by Ed Tittel and Chris Minnick

Comeando HTML5 e

CSS3

Beginning HTML5 & CSS3 For DummiesPublished by John Wiley & Sons, Inc. 111 River Street Hoboken, NJ 07030-5774 www.wiley.com

Copyright 2013 by John Wiley & Sons, Inc., Hoboken, New JerseyPublished simultaneously in CanadaNo part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permit-ted under Sections 107 or 108 of the 1976 United States Copyright Act, without the prior written permis-sion of the Publisher. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions.Trademarks: Wiley, For Dummies, the Dummies Man logo, Dummies.com, Making Everything Easier, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book.

LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.

For general information on our other products and services, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002. For tech-nical support, please visit www.wiley.com/techsupport.Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com. For more information about Wiley products, visit www.wiley.com.Library of Congress Control Number: 2013942775ISBN 978-1-118-65720-1 (pbk); ISBN 978-1-118-69075-8 (ebk); ISBN 978-1-118-69070-3 (ebk) Manufactured in the United States of America10 9 8 7 6 5 4 3 2 1

Table of ContentsIntroduction ................................................................. 1

About this Book ............................................................................................... 2Foolish Assumptions ....................................................................................... 3Icons Used in This Book ................................................................................. 4Beyond the Book ............................................................................................. 4Where to Go from Here ................................................................................... 5

Part I: Getting Started with HTML and CSS on the Web ... 7

Chapter 1: An Overview of HTML and CSS on the Web . . . . . . . . . . . . .9How and Where Web Pages Come to Life Online ...................................... 10

HyperText ............................................................................................. 10Content versus presentation .............................................................. 14Web browsers ...................................................................................... 14Getting to know Internet protocols ................................................... 16

Understanding HTML and Its Versions ....................................................... 17Different versions of HTML................................................................. 17Creating HTML markup ....................................................................... 18Building HTML documents ................................................................. 19

Understanding the Role of CSS .................................................................... 20Different versions here, too . . . .......................................................... 20Creating CSS markup ........................................................................... 21

Dissecting a Simple Markup Example ......................................................... 22Wheres the HTML? ............................................................................. 22Wheres the CSS?.................................................................................. 23A partnership of equals ....................................................................... 23

Chapter 2: Meeting the Structure and Components of HTML . . . . . . . .25Like Any Language: Syntax and Rules ......................................................... 25

Color-coding the markup .................................................................... 26Breaking down the elements .............................................................. 27

Adding Attributes to Your HTML ................................................................ 29Examining Entities in Markup ...................................................................... 30

Non-ASCII characters ........................................................................... 30Character codes ................................................................................... 31(Special) tag characters ...................................................................... 32

Organizing Web Pages .................................................................................. 32Organizing HTML text ......................................................................... 34Complementing and enhancing text .................................................. 36

iv Beginning HTML5 & CSS3 For DummiesChapter 3: Creating and Viewing a Web Page . . . . . . . . . . . . . . . . . . . .37

Before You Get Started ................................................................................. 37Creating a Page from Scratch ....................................................................... 39

Step 0: Gather your tools .................................................................... 39Step 1: Planning a simple design ........................................................ 40Step 2: Writing some HTML ................................................................ 41Step 3: Saving your page ..................................................................... 44Step 4: Viewing your page ................................................................... 46

Editing an Existing Web Page ....................................................................... 47Posting Your Page Online ............................................................................. 49

Part II: Getting the Structure and Text Right ................ 51

Chapter 4: HTML Documents Need Good Structure . . . . . . . . . . . . . . . .53Establishing a Document Structure ............................................................. 53HTML Document Organization Revisited ................................................... 54HTML DOCTYPE Starts Things Off .............................................................. 55The Element ...................................................................................... 56Anatomy of the ................................................................................. 56

Meeting the himself ................................................................ 57Handling metadata with ........................................................ 57Redirecting users to another page .................................................... 58Naming your page with a ........................................................ 61

The Is a BIG Container .................................................................... 61

Chapter 5: Text and Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63Formatting Text ............................................................................................. 63

Paragraphs ............................................................................................ 65Headings................................................................................................ 66

Controlling Text Blocks ................................................................................ 68Block quotes ......................................................................................... 68Preformatted text ................................................................................. 69Horizontal rules.................................................................................... 71

Organizing Information ................................................................................. 73Numbered lists ..................................................................................... 73Bulleted lists ......................................................................................... 75Definition lists ...................................................................................... 77Nesting lists .......................................................................................... 79

Chapter 6: Tip-Top Tables in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .81How Got a Bad Name in HTML ....................................................... 81Whats in a Table? LOTS of Markup ............................................................ 82Setting Up a Table Border ............................................................................ 84

vTable of ContentsThe Table Head () and Its Elements .............................................. 85Managing Table Layouts ............................................................................... 87Making Good Table Bodies ........................................................................... 89

Shaping a solid table ........................................................................... 89Sitting at the Footer of the Table ................................................................. 92Exploring and Explaining a Table ................................................................ 92

Oh caption, my caption ....................................................................... 93Is the header dead yet? ....................................................................... 93Marching through the table body ...................................................... 94Finishing with the footer ..................................................................... 94

Chapter 7: Working with Forms in HTML . . . . . . . . . . . . . . . . . . . . . . . . .97Exploring Types of Web Forms ................................................................... 97

Search forms ......................................................................................... 98Data collection forms .......................................................................... 99

Creating Forms ............................................................................................. 100Structure ............................................................................................. 101Input tags ............................................................................................ 102Input fields .......................................................................................... 103Form validation .................................................................................. 113

Processing Data ........................................................................................... 115Processing forms on your pages ...................................................... 115

Designing User-Friendly Forms .................................................................. 117Other Noteworthy Forms-Related Markup ............................................... 118Form Frameworks ........................................................................................ 120

Part III: Adding Links, Images, and Other Media ........ 123

Chapter 8: Getting Hyper with Links in HTML . . . . . . . . . . . . . . . . . . . .125Basic Links 101 ............................................................................................. 125

Exploring link options ....................................................................... 127Avoiding common mistakes ............................................................. 129

Customizing Links ....................................................................................... 130Opening new windows ...................................................................... 130Specifying locations in web pages ................................................... 132Linking to non-HTML resources ....................................................... 134

Chapter 9: Working with Images in HTML . . . . . . . . . . . . . . . . . . . . . . .139The Role of Images in a Web Page ............................................................. 139Creating Web-Friendly Images ................................................................... 140Adding an Image to a Web Page ................................................................. 142

Image location .................................................................................... 142Using the element ................................................................... 143

vi Beginning HTML5 & CSS3 For DummiesAdding alternative and title text ...................................................... 143Specifying image size ......................................................................... 146Image borders and alignment........................................................... 149

Images That Link .......................................................................................... 149Triggering links .................................................................................. 149Building image maps ......................................................................... 150

Chapter 10: Managing Media and More in HTML . . . . . . . . . . . . . . . .153The Battle of the Media Formats ............................................................... 154

Meet the major audio formats .......................................................... 155Meet the major video formats .......................................................... 156

Comparing Traditional and HTML5 Media Handling .............................. 157Mastering HTML5 Media Markup .............................................................. 158

Making beautiful music with audio .................................................. 158Moving media with video .................................................................. 159Undergoing the conversion experience .......................................... 162

Working with Web Page Controls .............................................................. 163Displaying a meter bar ...................................................................... 163Tracking progress on activities ....................................................... 165Tracking and reporting on time ....................................................... 166Updating HTML5 controls................................................................. 168

Part IV: Adopting CSS Style ...................................... 169

Chapter 11: Advantages of Style Sheets . . . . . . . . . . . . . . . . . . . . . . . .171Advantages of Style Sheets ......................................................................... 172

The four steps to style ...................................................................... 173Understanding the C in CSS .............................................................. 174What CSS can do for a web page ...................................................... 174

Styling a Document with CSS ..................................................................... 175Using HTML5 Boilerplate .................................................................. 176Normalize before you stylize ............................................................ 176What you can do with CSS ................................................................ 180

Putting CSS in Its Place ............................................................................... 182Pixels, points, and dots Oh my! ................................................... 182Understanding the viewport............................................................. 183Property measurement values ......................................................... 184

About the CSS3 Standard ............................................................................ 186

Chapter 12: CSS Structure and Syntax . . . . . . . . . . . . . . . . . . . . . . . . . .191Exploring CSS Structure and Syntax ......................................................... 191

Selectors and declarations ............................................................... 194The selectors ...................................................................................... 195Inheriting styles ................................................................................. 204

Understanding the Cascade ....................................................................... 205

viiTable of ContentsChapter 13: Using Different Kinds of Style Sheets . . . . . . . . . . . . . . . .207

Applying Inline Styles .................................................................................. 208Getting to Know Internal Style Sheets ...................................................... 210

Understanding the element ................................................. 210Figuring out internal style sheet scope ........................................... 210

Working with External Style Sheets .......................................................... 212CSS files ............................................................................................... 212Link element attributes ..................................................................... 213Importing and when to use @import ............................................... 214

Part V: Enhancing Your Pages Look and Feel ............. 215

Chapter 14: Managing Layout and Positioning . . . . . . . . . . . . . . . . . . .217Managing Layout ........................................................................................ 217

Tiny boxes .......................................................................................... 217Block versus inline elements ............................................................ 219Normal flow ........................................................................................ 222

Managing Positioning .................................................................................. 225About coordinates and offsets ......................................................... 226Relative positioning ........................................................................... 226Absolute positioning ......................................................................... 227Floating ................................................................................................ 228

Using a Layout Generator ........................................................................... 230

Chapter 15: Building with Boxes, Borders, and Buttons . . . . . . . . . .233Meeting the Box Model ............................................................................... 233Putting the Box Model into Practice ......................................................... 235

Specifying padding and margin widths ........................................... 239Adding borders .................................................................................. 243Aligning text ........................................................................................ 246Indenting text ..................................................................................... 247Creating buttons with CSS ................................................................ 247

Chapter 16: Using Colors and Backgrounds . . . . . . . . . . . . . . . . . . . . .251Defining Color Values .................................................................................. 251

Color names ........................................................................................ 251Color numbers.................................................................................... 253

Defining Color Definitions ........................................................................... 255Text ...................................................................................................... 256Links .................................................................................................... 256Backgrounds ....................................................................................... 258Advanced backgrounds .................................................................... 259

viii Beginning HTML5 & CSS3 For DummiesChapter 17: Web Typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .261

Finding Out about Fonts ............................................................................. 261Font family .......................................................................................... 262Sizing ................................................................................................... 265

Trying Out Text Treatments ...................................................................... 268Embolden with bold .......................................................................... 268Emphasizing with italic ..................................................................... 269Changing capitalization ..................................................................... 270Getting fancy with the text-decoration property ........................... 271

Checking Out the Catchall Font Property ................................................ 272Experimenting with Web Fonts .................................................................. 273

Font file formats ................................................................................. 273Finding fonts ....................................................................................... 274Linking fonts ....................................................................................... 274Using Google Fonts ............................................................................ 275

Chapter 18: CSS Text and Shadow Effects . . . . . . . . . . . . . . . . . . . . . .281Creating Shadows ........................................................................................ 282

text-shadow ........................................................................................ 282box-shadow......................................................................................... 283

Creating Inset Text ...................................................................................... 284Creating 3D Text .......................................................................................... 285Creating a Letterpress Effect ...................................................................... 286Drop Shadows .............................................................................................. 287Text Rotation ................................................................................................ 289

Chapter 19: Multimedia and Animation with CSS . . . . . . . . . . . . . . . .291Using CSS with Multimedia ......................................................................... 291

Visual media styles ............................................................................ 293Paged media styles ............................................................................ 299

Getting Animated ......................................................................................... 300Using the animation properties ....................................................... 302Creating animations with @keyframes .......................................... 303Animating color .................................................................................. 303

Part VI: The Part of Tens ........................................... 305

Chapter 20: Ten Keys to Mobile Web Design . . . . . . . . . . . . . . . . . . . .307Design for Different Mobile Devices .......................................................... 307Design for People ......................................................................................... 310Design for Small Screens ............................................................................ 310Design for Low Bandwidth ......................................................................... 311

ixTable of ContentsDesign for Touch ......................................................................................... 311Design for Distracted Surfers ..................................................................... 313Test on Many Mobile Devices .................................................................... 313Design for Simplicity ................................................................................... 314Set Up Mobile Web Addresses ................................................................... 314Include a Link to the Desktop Site ............................................................. 315

Chapter 21: Ten HTML Dos and Donts . . . . . . . . . . . . . . . . . . . . . . . . .317Dont Lose Sight of Your Content .............................................................. 317Do Structure Your Documents and Your Site .......................................... 318Do Make the Most from the Least ............................................................. 318Do Build Attractive Pages ........................................................................... 319Dont Lose Track of Those Tags ................................................................ 319Do Avoid Browser Dependencies .............................................................. 320Dont Make It Hard to Navigate Your Wild and Woolly Web ................. 321Dont Think Revolution, Think Evolution ................................................. 322Dont Get Stuck in the Two-Dimensional-Text Trap ................................ 323Dont Let Inertia Overcome You ................................................................ 323

Chapter 22: Ten Ways to Kill Web Bugs Dead . . . . . . . . . . . . . . . . . . .325Make a List and Check It Twice ............................................................. 325Master Text Mechanics ............................................................................... 326Lack of Live Links a Lousy Legacy ........................................................ 327When Old Links Must Linger ...................................................................... 328Make Your Content Mirror Your World .................................................... 328Look for Trouble in All the Right Places ................................................... 328Cover All the Bases with Peer Reviews .................................................... 329Use the Best Tools of the Testing Trade .................................................. 330Schedule Site Reviews ................................................................................. 330Foster User Feedback .................................................................................. 331If You Give to Them, Theyll Give to You! ................................................ 332

Chapter 23: Ten Cool HTML Tools and Technologies . . . . . . . . . . . . .333WYSIWYG HTML Editors ............................................................................ 334

Dreamweaver...................................................................................... 334Other WYSIWYG editors ................................................................... 335

Helper HTML Editors .................................................................................. 335Aptana Studio ..................................................................................... 335Other helper editors .......................................................................... 336

Inexpensive Graphics Editors .................................................................... 337Professional Graphics Editors ................................................................... 337

Adobe Photoshop .............................................................................. 338Adobe Fireworks ................................................................................ 338

W3C Link Checker ........................................................................................ 339

x Beginning HTML5 & CSS3 For DummiesOther Link Checkers .................................................................................... 339HTML Validators .......................................................................................... 340FTP Clients .................................................................................................... 341Miscellaneous Helpful Web Tools ............................................................. 341

Part VII: Appendixes ................................................. 343

Appendix A: Twitterati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .345

Appendix B: About the Dummies HTML Site . . . . . . . . . . . . . . . . . . . . .349About WordPress ........................................................................................ 349

The dashboard ................................................................................... 349Appearance and themes ................................................................... 350Pages and posts ................................................................................. 351

Widgets ......................................................................................................... 351Responsive Design ....................................................................................... 352

HTML5 Cafe ........................................................................................ 352The home page ................................................................................... 352About Us.............................................................................................. 354The Menu ............................................................................................ 354Contact Us........................................................................................... 354

HTML5 Boilerplate ....................................................................................... 355

Introduo

Qualquer um pode criar ou editar pginas da web. Desenvolver estas pginas no requer um QI especialmente alto ou um grau avanado. Criao ou edio de pginas web requer simplesmente um desejo de aprender e bom senso o suficiente para ver o processo at o seu fim natural - uma pgina visvel na web.

Neste livro, que revelam os meandros das linguagens de marcao que so a seiva da web - o HyperText Markup Language (HTML) usado para capturar texto, grficos, e outros contedos, eo Sheets (CSS) linguagem Cascading Style usado para fazer pginas da web olhar bem onde quer que apaream. Porque HTML e CSS so blocos de construo bsicos para a criao de pginas web, saber como us-los voc adiciona ao redil de autores de web e desenvolvedores de contedo.

Se voc j tentou construir suas prprias pginas da web, mas achei muito difcil, no h problema em relaxar agora. Se voc pode discar para um telefone ou encontrar suas chaves na manh-ing, voc tambm pode criar pginas web. Sem brincadeira!

Este livro mantm o technobabble ao mnimo e fica com Ingls simples, sempre que possvel. Alm da conversa simples sobre hipertexto, HTML e web, que incluem muitos exemplos, alm das instrues tag-a-tag para ajudar a construir pginas web com o mnimo de barulho e incomodar. Ns tambm fornecemos exemplos sobre o que fazer com suas pginas da web depois que voc construiu-los, para que possa public-las online. Ns explicamos as diferenas entre os vrios sabores de HTML (HTML4, HTML5, e at mesmo algo chamado XHTML) para que voc possa escolher o estilo que funciona melhor para voc. Spoiler alert: Ns achamos que voc deve escolher HTML5, mas que a escolha inteiramente at voc.

Este livro tem seu prprio site companheiro com exemplos de HTML e CSS de todos os seus captulos em forma utilizvel. Alm do contedo do livro, compartilhamos contedo somente web e ponteiros ao vivo para todo o widgets, sites, e outras coisas legais a que nos referimos, para que voc possa usar as tcnicas que mostrar para embelezar suas prprias pginas web e surpreender seus amigos. Por favor, visite www. dummieshtml.com/html5cafe e comear a navegar de l. (Apndice B neste livro cobre todo esse material com mais detalhes.)

2 Beginning HTML5 & CSS3 For Dummies

Sobre este livroPense neste livro como um guia amigvel, acessvel para ocupar HTML e CSS e construir legveis, atraentes pginas web. Essas coisas no so difceis de pegar, mas eles embalar muitos detalhes. Os tpicos abordados neste livro incluem o seguinte:

Estrutura da pgina web compreenso e organizao

Upload e publicao de pginas web para o mundo inteiro ver

Verificao e validao de suas pginas da web

Mergulho em profundidade de marcao com HTML5 e CSS3

Voc tambm pode construir pginas web sem anos de treinamento rduo, habilidades estticos avanados, ou ablues rituais em correntes geladas. Se voc pode dizer a um amigo como preparar seu mac-'n'queijo favorito, voc pode construir um documento web til. O propsito deste livro no transform-lo em um cientista de foguetes (ou para essa matria, para transformar a cincia de foguetes em HTML). Seu objetivo mostrar-lhe os elementos estruturais e tcnicos necessrios para a boa aparncia, pginas web legveis e dar-lhe a confiana necessria para construir alguma!

Este livro explica como usar HTML e CSS para obter suas pginas e executar-ning na World Wide Web. Ns dizemos-lhe o que est envolvido na estruturao e construo de documentos web eficazes que podem trazer suas idias e informaes para o mundo online - se isso que voc quer fazer - e talvez at mesmo ter algum divertimento de alta tecnologia comunic-los aos outros.

Para fazer este livro fcil de ler, tenha em mente as seguintes coisas sobre como trabalhar com a marcao:

Como conveno para este livro, todo o HTML e CSS marcao aparece em Tipo de espaamento simples como isto:

Whats in a Title? Quando voc digita marcao HTML, CSS, ou outras coisas relacionadas, copiar

as informaes exatamente como voc v-lo, incluindo os colchetes angulares (), porque eles so parte da magia que faz com HTML e CSS trabalho.

As margens de uma pgina do livro no tem a mesma sala como fazem as vastas extenses do ciberespao. Portanto, longas filas de HTML e CSS marcao, ou designaes para web sites (chamados de URLs, ou Uniform Resource Locator), pode quebrar em vrias linhas. Lembre-se, o computador v essas linhas como uma nica linha de cdigo HTML ou CSS, ou como uma nica URL - por isso, se voc digitar tudo desse texto, no se esquea de colocar tudo em uma linha. No insira qualquer retorno rgidos (ou pressione a tecla Enter), se voc ver a quebra de linha.

3IntroductionMostramos que tudo suposto ser tudo em uma linha, quebrando em um caractere de pontuao ou espao e, em seguida, precedendo qualquer excesso, assim:www.infocadabra.transylvania.co/nexlus /plexus/lexus/

praxis/okay/this-is-all make-believe-but-real-ones-get LONG.html

O HTML4 no importa se voc digitar um texto tag em maisculas, minsculas, ou ambos (exceto para as entidades de carter, tambm conhecidos como cdigos de caracteres). HTML5 e CSS, no entanto, quer o texto tag em apenas letras minsculas. Assim, para fazer seu trabalho olhar tanto como a nossa, quanto possvel, entre todos os HTML e CSS tag texto, e todos os outros de marcao, em letras minsculas s.

Nossos listagens de cdigo pode ser, onde as cores especficas significam tipos diferent de marcao com cdigo de cores. Explicamos isso no Captulo 2, na seo sobre a codificao de cores. (Nota: Todas as ilustraes usar cores bonitas, tambm!)

S mais uma coisa: Os leitores podem perceber que nos referimos web, sites, e assim por diante neste livro, embora ns tambm cham-lo a World Wide Web. Decidimos seguir o uso comum, que j no trata "web" como um nome prprio. Por fim, as rodas do progresso transformaram o tempo suficiente para vestir a parte superior do capital inicial "W" na web!

Suposies tolasAlguns dizem que fazer suposies faz um tolo fora de tanto a pessoa que os faz e quem cai sujeitos a elas. (E s quem so eles, afinal? Ns assumimos que sabemos, mas... No importa.)

Voc no precisa ser um mago nas artes arcanas de programao, nem voc precisa de um PhD em cincia da computao. Voc no precisa mesmo de um sentido detalhada do que est acontecendo nas entranhas do seu computador para lidar com o material deste livro.

Mesmo assim, praticidade exige que fazer algumas suposies sobre voc, nosso caro leitor: Voc pode transformar o seu computador ligado e desligado, voc sabe como usar um mouse e um teclado, e voc quer construir suas prprias pginas web para se divertir, lucro, ou algum motivo inteiramente de seu prprio pas. Tambm assumimos que voc tem uma conexo Internet e um navegador web.

Se voc pode escrever uma frase e saber a diferena entre um ttulo e um pargrafo, voc pode criar e publicar seus prprios documentos na web. O restante composto por detalhes - e ns ajud-lo com isso.

4 Beginning HTML5 & CSS3 For Dummies

cones utilizados neste livroAqui est uma lista dos cones que usamos neste livro de texto da bandeira e informao que especialmente notvel.

Este cone sinais de detalhes tcnicos que so informativas ou interessante, mas no so absolutamente essenciais para a escrita ou HTML compreenso e CSS.

Este bandeiras cone informao til que faz marcao HTML ou outras coisas importantes ainda menos complicado do que voc temia que poderia ser.

Este cone aponta para coisas que voc no deve ignorar - no se esqueam esses lembretes. (A pgina de sanidade ou web voc salva pode ser a sua prpria.)

Cuidado quando voc v esse cone. Ele avisa contra coisas que voc no deve tentar. As conseqncias podem ser graves se voc ignorar essas advertncias.

Este cone indica que os recursos disponveis on-line. Mais notavelmente, ns orient-lo para www.dummieshtml.com/html5cafe quando discutimos arquivos de exemplo que voc pode encontrar l.

Alm do LivroEsta seo descreve onde os leitores podem encontrar contedo complementar do livro. Alguns dos que esto disponveis no www.dummies.com, e algumas delas - incluindo todos os exemplos de marcao no livro - est disponvel em www.dummieshtml.com/html5cafe:

Cheat Sheet: Visite www.dummies.com/cheatsheet/beginninghtml5css3 ver uma colectnea rpida de HTML e CSS marcao, alm de algumas cartas de cor handy-dandy.

Extras: Ns publicamos artigos que ampliam o contedo abordado no livro, com um pequeno artigo extra para partes II a IV deste livro. As partes II e III lidar com HTML, e Partes III e IV com CSS. A URL para este material www.dummies.com/extras/beginninghtml5css3.

Atualizaes: Cada For Dummies livro tcnico explica onde os leitores podem encontrar atualizaes no caso de o livro muda substancialmente. Este o lugar onde qualquer

5Introductionatualizaes ou correes que fazemos para o contedo do livro e cobertura aparecer, junto com toda a errata que encontrar e corrigir. A URL para este material tambm www.dummies.com/extras/beginninghtml5css3.

Por exemplo, nosso livro repleto de HTML5 e CSS 3 marcao, e as especificaes para ambos HTML5 e CSS3 ainda esto em desenvolvimento, de modo que as mudanas so obrigadas a ocorrer nos meses e anos vindouros

Arquivos complementares: Nosso site livro oferece downloads por captulo com o HTML fonte e / ou arquivos CSS para cada captulo e um one-shot-ganha tudo para baixar o livro inteiro, todos de www.dummieshtml / html5cafe. Consulte o Apndice B para obter detalhes sobre o site Dummies HTML.

Onde Ir AgoraIsto onde voc pegar a estrada. Onde voc comea, no importa. No se preocupe - voc pode lidar com isso. Ns sabemos que voc est pronto para ter o tempo de sua vida. Divirta-se!

6 Beginning HTML5 & CSS3 For Dummies

Parte IIntroduo ao HTML e CSS

na Web

Visite www.dummies.com para mais uma grande For Dummies contedo online. Alm disso, h um site s para este livro on-line em www.dummieshtml.com.

Nesta parte . . . Levando-se em HTML de 10.000 ps (uma viso geral) Compreender o papel que Cascading Style Sheets (CSS) jogar na web Cavando em HTML-speak: marcao, elementos, marcas, entidades e mais Primeiros suas pginas organizadas

Criando e exibindo sua pgina primeiro web

Movendo pginas de seu PC para um servidor web on-line

1Uma viso geral do

HTML e CSS na WebNeste captuloTrazendo pginas da web para a vida

Compreender o papel que desempenha HTML em pginas da web

Apreciando o que faz CSS para dar estilo web pginas

Explorando e analisando exemplos de marcao simples

B em-vindo ao maravilhoso mundo da web, HTML e CSS. Com apenas um pouco de conhecimento, um pouco de prtica, e algo a dizer, voc podecriar o seu prprio pequeno hectares virtual do espao ciberntico ou melhorar no trabalho existente.

Usamos o termo HTML ao longo deste livro. Usando esse prazo permite-nos consultar o HyperText Markup Language, em geral, incluindo tanto HTML4 e Markup Language), todos de uma s vez. Embora HTML4 e HTML5 so diferentes (e XHTML difere de ambos, tambm), eles so todos iguais o suficiente para esta referncia a fazer sentido.

Este livro o seu guia para baixo e sujo para a compreenso de documentos web, enfeitar pginas da web existentes e elaborao de pginas complexas e interessantes que usam intrincados desenhos, multimdia e scripting.

A melhor maneira de comear a trabalhar com HTML saltar para a direita, de modo que o que este captulo faz: Ele explica os conceitos bsicos de como HTML e CSS trabalho nos bastidores dentro de pginas da web, e apresenta-lhe os seus blocos de construo subjacentes. Quando voc feito com este captulo, voc vai saber como HTML e CSS trabalho para que voc possa comear a criar ou editar pginas web de imediato - embora muito, muito simples.

10 Part I: Getting Started with HTML and CSS on the Web

Como e onde as pginas da Web ganham vida onlinePginas da Web pode acomodar vrios tipos de contedo, como texto, grficos, formulrios, arquivos de udio e vdeo, streaming de mdia, e at mesmo jogos interativos.Navegar na Internet por apenas um momento ou dois, e voc v um banquete de informaes e contedo exibido de vrias maneiras. Cada site diferente, mas todos tm uma coisa em comum: HyperText Markup Language (tambm conhecido como HTML). Voc tambm corre em Cascading Style Sheets (CSS) regularmente.

Independentemente do que informaes de uma pgina web contm, cada pgina creado usando alguma forma de HTML. HTML a argamassa que mantm pginas web juntos: grficos, textos e outras informaes so os tijolos. CSS diz pginas da web como eles devem olhar (e at certo ponto, se comportar), quando em exposio.

Arquivos HTML que produzem pginas da web so arquivos de texto simples, se esses arquivos contm HTML4, HTML5, ou mesmo XHTML. A mesma coisa vale para CSS. Confiana em arquivos de texto simples ou documentos, explica porque a web funciona to bem como ele faz. Texto uma forma universal de representao de dados para computadores. Qualquer arquivo de texto que voc cria em um PC com Windows - incluindo qualquer arquivo HTML ou CSS - funciona igualmente bem em um Mac, Linux / Unix, ou qualquer outro sistema operacional.Mas as pginas da web no so apenas documentos de texto. Pginas da Web so feitas utilizando, texto chamado HTML especial carregado de acar carente de ateno ou CSS. Cada pgina web utiliza os seus prprios conjuntos especficos de instrues e diretrizes que incluem (juntamente com o seu contedo) dentro de arquivos de texto para especificar o que est na pgina e como essa pgina deve parecer e se comportar. Fique com a gente para descobrir tudo o que voc precisa saber sobre HTML e CSS!

HyperTextInstrues especiais nas linhas de licenciamento HTML de texto para apontar para (isto , link) outra coisa no ciberespao. Tais indicadores so chamados de hyperlinks. Hyperlinks so a cola que mantm a World Wide Web em conjunto. No navegador da Web, hiperlinks geralmente aparecem em azul e sublinhados. Quando voc clica em um link, ele te leva para outro lugar.

Hypertext ou no, uma pgina web um arquivo de texto, o que significa que voc pode criar e editar uma pgina web em qualquer aplicativo que cria texto simples (como o Bloco de Notas ou TextEdit). Algumas ferramentas de software oferecem opes extravagantes (abordados no Captulo 23) para ajud-lo a criar pginas web, mas que geram os mesmos arquivos de texto que podem ser criados usando um editor de texto simples. Recomendamos que voc comece com um editor de pginas web simples, gratuito chamado Aptana Studio. Visite www.aptana.com, onde voc pode baixar o programa. (Voc tambm pode encontrar instrues para Windows, Mac OS e Linux.)

11Chapter 1: An Overview of HTML and CSS on the WebDirigir claramente de processadores de texto, como o WordPad ou o Microsoft Word, quando a criao de HTML. Estas ferramentas introduzir todos os tipos de marcao extra para pginas da web que voc no quer arma rei o seu trabalho. Se voc no acreditar em ns, tente criar uma pgina web dentro do Word e, em seguida, olhar para todas as coisas que ele adiciona dentro de algum outro editor. Voc no vai acreditar em seus olhos!A World Wide Web vem por seu nome honestamente. , literalmente, uma teia de pginas on-line hospedados em servidores da web em todo o mundo, conectados em trilhes de maneiras por hiperlinks que ligam as pginas individuais em conjunto. Sem tais links, a web seria apenas um monte de documentos isolados, autnomos. Boo hoo!

Grande parte do valor da web vem de sua capacidade de vincular pginas e outros recursos (como imagens, arquivos para download, e meios de comunicao de todos os tipos) em um nico site, ou em muitos sites. Por exemplo, USA.gov (. Www.usa gov) um site de gateway - sua funo principal fornecer acesso a outros websites. Se voc no tiver certeza de qual governo agncia lida com emprstimos pela primeira vez para os compradores de casas, ou se voc quiser fazer um tour do Capitlio, visite o site mostrado na Figura 1-1 para obter informaes.

Figure 1-1: USA.gov uses hyperlinks to help visitors locate government information.

Os navegadores da Web foram criados especificamente para a finalidade de leitura de marcao HTML e exibir as pginas da Web resultantes tal marcao descreve. Vidas marcao em um arquivo de texto (juntamente com o seu contedo) para dar ordens a um browser. Por exemplo, olhe para a pgina web mostrada na Figura 1-2. voc pode

12 Part I: Getting Started with HTML and CSS on the Webver como a pgina composta por examinar seu HTML subjacente; seu CSS subjacente regula a sua formatao, layout e aparncia.

Esta pgina inclui um grfico, um ttulo que descreve a pgina (HTML5 Cafe: Home), uma breve boas-vindas, texto de navegao, e no muito mais.

Aqui, os diferentes elementos da pgina usar uma formatao diferente:

O ttulo da pgina aparece na guia do navegador.. Uma breve e simples barra de navegao de texto (HOME | QUEM SOMOS | MENU | CONTATO) aparece na borda superior.

A declarao de boas-vindas uma posio no tipo de grande formato de texto, seguido de uma breve descrio do que est l.

A imagem do copo de caf aparece ao lado, seguido por nosso slogan favorito da manh (alimentado pelo caf).

Figure 1-2: Esta pgina incorpora vrias partes e vrios pedaos de HTML e CSS.

13Chapter 1: An Overview of HTML and CSS on the WebO navegador sabe para exibir esses componentes da pgina de maneiras especficas, graas marcao HTML um pouco simplificado para esta pgina apresentamos na Listagem 1-1. Eventualmente, ns dar a volta a todo o material real que est na pgina web atual, mas para o momento, apresentamos uma varafigura equivalente.

Listagem 1-1: O HTML5 Cafe Pgina

HTML5 Cafe: Home

HOME | ABOUT US | MENU | CONTACT US

Welcome to HTML5 Cafe!Here you will find all sorts of delicious HTML5 and CSS3 treats.

This is the sample site for Beginning HTML5 and CSS3 for Dummies, by Ed Tittel and Chris Minnick. To view all of the code samples from the book, visit the Menu.

powered by coffee.

copyright dummieshtml.com

14 Part I: Getting Started with HTML and CSS on the WebQuase todo o texto fechado entre parnteses em ngulo (menos do que e maior do que sinais, ou ) uma tag HTML (muitas vezes chamado de marcao). Por exemplo, o p dentro de parntesis( tags) identifica texto dentro de pargrafos. A marcao entre e no incio do documento define dados que descrevem todo o documento, incluindo o conjunto de caracteres utiliza (charset=uft-8), o ttulo que aparece na aba do navegador, descrio e exibir informaes, e links para algumas folhas de estilo padro para gerenciar a aparncia.A marcao entre e contm tudo o que voc pode realmente ver na pgina (e alguns valores que controlam como a imagem grande xcara de caf includos aparece). Isso realmente tudo que existe para ela. Voc incorpora a marcao em um arquivo de texto, junto com o texto para os leitores a ver, para instruir o navegador como exibir sua pgina web.

Tags e contedo entre (e dentro) eles tambm so chamados de elementos. Colchetes angulares coloque marcao HTML; chaves {} fecha marcao CSS. (Voc ainda no viu aqueles ainda, mas eles aparecem no prximo captulo.)

Contedo versus apresentaoEm termos simples, o contedo coisa que voc pode ver em uma pgina web. Quando os desenvolvedores falam sobre "o contedo da pgina web," muitas vezes, as informaes sobre o texto que aparece em uma pgina web. Mas as imagens so de contedo, tambm, como qualquer um dos vrios tipos de multimdia que voc encontra em muitas pginas da web hoje em dia, tais como msicas, vdeos, animaes, apresentaes de slides e todos os tipos de outras coisas. Em geral, as alas HTML e pacotes de contedo em pginas da web.Igualmente simplesmente, a apresentao o material em uma pgina da web parece quando voc o v. Quando os desenvolvedores web falar sobre "apresentao", eles esto se referindo a uma infinidade de caractersticas. Estes incluem uma infinidade de controles tipografia para texto (tipo de letra, o peso da fonte, tamanho da fonte, cor de fonte, e muito mais), mas tambm controles precisos de posicionamento que podem determinar exatamente onde os elementos aparecero como eles so exibidos. CSS inclui centenas de apresentao con-controles, que definem como o contedo web parece e se comporta quando exibido em algum lugar, ou ento estampados ou at mesmo falado (para aquelas pessoas que fazem uso de text-to-speech instalaes renderizao).

Os navegadores da WebFerramenta principal do usurio no puzzle web chamado de um navegador web. Os navegadores da Web so programas que lem as instrues de HTML e CSS e ento usar essas instrues para fazer o contedo da pgina web aparecem na tela.

Sempre escreva o seu HTML com a idia de que as pessoas vo ver o contedo usando um navegador web. Apenas lembre-se que h mais de um tipo de navegador l fora, e cada um vem em vrias verses.

15Chapter 1: An Overview of HTML and CSS on the WebGeralmente, os navegadores web solicita pginas da web de exibio que vm de um servidor web na Internet. Mas voc tambm pode exibir pginas HTML que voc salvou no seu equipamento antes de disponibiliz-los em um servidor de Internet web. Quando voc desenvolve seus prprios documentos HTML (pginas web), voc visualizar essas pginas (chamados de pginas locais) no seu browser. Voc pode usar as pginas locais para obter uma boa idia do que as pessoas vo ver depois as pginas ir ao vivo na Internet.Cada navegador interpreta HTML em sua prpria maneira (embora HTML5 projetado para melhorar esta situao). Assim, o mesmo cdigo HTML pode no parecem exatamente iguais a partir de um navegador para outro. Quando voc trabalha com HTML bsico, as variaes sero menores, mas como voc adicionar outros elementos (como scripting e multimdia), tornando a marcao pode se complicar. Mais uma vez, HTML5 suposto para corrigir muitos destes problemas, mas o HTML5 ainda no est completamente terminado como ns escrevemos este livro, por isso ainda muito cedo para dizer se essa promessa em teoria ser mantido na prtica.

Captulo 3 explica como usar um navegador da Web para exibir uma cpia local de sua pgina primeiro web, caso voc ainda no sabe como fazer isso.

Algumas pessoas usam navegadores web somente de texto como o Lynx, porque quer:

Eles so deficientes visuais e no pode usar uma exibio grfica. Eles gostam de um navegador pobre, rpida que exibe apenas texto.

Alguns poucos browsersA web pode ser visto atravs de navegadores de vrios tipos, cada um em suas prprias verses, e cada um com seus prprios conjuntos de recursos. Alguns dos muitos browsers web pop-ular incluem o Microsoft Internet Explorer, Mozilla Firefox, Apple Safari e Google Chrome. Outros navegadores, como o Lynx e Opera, tambm so amplamente utilizados. Como um desenvolvedor de HTML, voc deve pensar alm de sua prpria experincia de navegao e preferncias. Isso porque cada usurio tem suas prprias preferncias e configuraes do navegador pessoal, e eles no so de forma todos iguais - no chega nem perto!

Cada navegador renderiza HTML um pouco diferente. Cada browser lida com JavaScript, multimdia, folhas de estilo, e outros add-ins de forma diferente tambm. Jogar em diferentes sistemas operacionais, e uma mistura de smartphones e tablets, alm de notebooks e PCs, e as coisas ficam realmente interessantes.

Normalmente diferenas entre os navegadores so menores. Mas s vezes uma combinao de HTML, texto e mdia pode trazer um navegador especfico para os seus joelhos. Quando voc trabalha com HTML, testar suas pginas em tantos browsers diferentes, como voc pode. Instale pelo menos quatro browsers no seu sistema para testes. Recomendamos as verses mais recentes do Internet Explorer, Safari, Chrome e Firefox.

Se voc quiser mais informaes sobre browsers, o Yahoo! mantm uma lista bastante completa (mais de 60 itens no total):

http://dir.yahoo.com/computers_and_internet/software/ internet/world_wide_web/browsers

16 Part I: Getting Started with HTML and CSS on the WebConhecer protocolos de InternetSob o cap, a Internet funciona por causa de jogos extremamente durveis e capazes de regras e formatos para a comunicao em rede. Essas coisas so chamados de protocolos, e definem os modos pelos quais os computadores podem falar uns com os outros atravs da Internet.

Na verdade, a web composto de bilhes de recursos, cada um deles passveis de ligao. Localizao exata de um recurso a chave para ligar para ele. Sem um endereo exato (um Uniform Resource Locator, ou URL), voc no pode usar a barra de endereo em um navegador da Web para visitar uma pgina da web diretamente.

URLs so o sistema de endereamento padro para recursos da web. Cada recurso (pgina web, site ou arquivo individual) tem uma URL nica. URLs so muito parecidos com o seu endereo postal. Figura 1-3 identifica os componentes de um URL.

Domain

http://www.domain.com/mainfolder/subfolder/file.html

Filename

Protocol Path

Figure 1-3: Os componentes de um URL ajud-la a definir um local exato para um arquivo na web.

O problema est nos detalhes do protocoloUma coleo de protocolos relacionados muitas vezes chamado de conjunto de protocolos. Para a Internet, que conjunto de protocolos TCP / IP retirado da sigla para os nomes de dois dos seus protocolos mais importantes - a saber, o Transmission Control Protocol (TCP) eo Internet Protocol (IP). Juntos, na verdade, tanto comunicaes IP transporte web de forma segura atravs da Internet TCP e. Eles tambm suportam o protocolo de transferncia de hipertexto, tambm conhecido como HTTP, que o que move pginas web e materiais auxiliares (imagens, grficos, mdia e assim por diante) em todo o Internet.

HTTP no o nico protocolo no trabalho no andar de cima de Internet TCP e IP. O Simple Mail Transfer Protocol (SMTP) eo Post

Office Protocol (POP) fazer e-mail possvel, e do Protocolo de Transferncia de Arquivo (FTP) permite carregar, descarregar, mover, copiar e excluir arquivos e pastas atravs da Internet. A boa notcia que os browsers e servidores Web fazem todo o trabalho HTTP para voc, ento voc s precisa colocar as pginas em um servidor ou digite uma URL em um navegador.

Para ver como funciona HTTP, confira David Gourley e captulo de Brian Totty em mensagens HTTP, disponvel por meio do Google Books. Ir para http://books.google.com, procure por "transaes HTTP entendimento", clique duas vezes em HTTP: O Guia Definitivo nos resultados, e navegar ao redor dentro deste excelente referncia.

17Chapter 1: An Overview of HTML and CSS on the WebCada componente URL ajuda a definir a localizao de uma pgina web ou recurso:

Protocolo:Especifica o protocolo que o navegador deve usar para solicitar o recurso. Isso geralmente HTTP, mas poderia ser HTTPS (HTTP seguro), FTP, ou qualquer outra coisa.

Domnio: Pontos para o site geral, como www.usa.gov, onde reside o recurso. Um domnio pode hospedar alguns arquivos (como um site pessoal) ou milhares de arquivos (como um grande governo ou site corporativo, tais como www.usa.gov ou www.ibm.com).

Caminho: Nomes a seqncia de pastas atravs do qual a navegar para chegar ao um arquivo ou recurso especfico.

Por exemplo, para chegar a um arquivo na pasta de servios que reside na pasta do sistema, use o / system / servios / path.

Nome do arquivo: Especifica o arquivo em um caminho de diretrio do navegador dever ter acesso.

Embora a URL mostrada na Figura 1-3 no acessvel ao pblico, ele aponta para um domnio e define um caminho que leva a um file.html recurso especfico chamado:

http://www.domain.com/mainfolder/subfolder/file.html

Captulo 8 oferece os detalhes completos sobre como usar HTML e URLs para adicionar hiperlinks para suas pginas da web, e no Captulo 3 mostra como obter uma URL para o seu site depois que voc est pronto para mov-lo para um servidor web.

HTML Entendimento e suas versesVoc j sabe que o trabalho principal do HTML rotular e acomodar o contedo em pginas da web. Mas HTML vem em vrias verses, cada um dos quais processa contedo, mas cada uma das quais ligeiramente diferente do outro. As regras e os componentes bsicos ficar mais ou menos o mesmo, mas alguns pormenores importantes diferem. As sees seguintes exploram essas verses e explicar o que os torna diferentes.

Diferentes verses do HTMLHTML significa HyperText Markup Language, marcao desenvolvido no final de 1980 e incio de 1990 para descrever pginas web. HTML est agora consagrado em numerosos descries padro chamado especificaes do World Wide Web Consortium (W3C) ea aplicao HyperText Grupo de Trabalho de Tecnologia Web (WHATWG). Para trabalhar nas especificaes HTML para verses 1-4 terminou em 1999.

18 Part I: Getting Started with HTML and CSS on the WebQuando voc adiciona um X na frente de HTML, voc comea XHTML, uma verso retrabalhada de HTML baseado no eXtensible Markup Language (XML). XML foi projetado para trabalhar e se comportar bem com computadores, software e Internet.

As verses originais (1-4, que ) de HTML incluiu algumas irregularidades que podem causar azia por um software que l documentos HTML. XHTML foi projetado para usar uma sintaxe extremamente regular e previsvel que mais fcil para o software de manusear. XHTML era para substituir o HTML, mas crescente complexidade tcnica em verses posteriores causou a cair no esquecimento. (XHTML 2.0 era to complicado, que no foi nem amplamente adotado, nem muito usado em tudo.)

Em 2004, o WHATWG comeou a trabalhar no que chamado de "padro de vida" para o que chamado de HTML5 hoje. Foi no processo por um longo tempo agora, e o padro finalmente em fase de concluso como escrever este livro. Algumas reas do HTML5 ainda esto em desenvolvimento ou sujeita a controvrsia no resolvida. Ns longe deles neste livro, para que possamos fornec-lo com um encdao slida para suas pginas da web para o futuro previsvel.

HTML5 j parece estar sucedendo onde XHTML no. Mesmo que o padro ainda est em construo, HTML5 amplamente adotado e utilizado na web hoje. Na verdade, a especificao HTML5 o que chamado formulrio "Candidate Recommendation" a partir de dezembro de 2012 Esse um passo antes de status final recomendao atingido; a maioria dos especialistas esperam que a verso final a ser aprovado e ratificado no final de 2013 ou incio de 2014.

Este livro concentra-se nas partes seguras do HTML5, que usam o mesmo tipo de sintaxe regular e direta que XHTML oferecido, mas muito mais simples de entender e usar. Livros anteriores que j mostram como criar HTML e XHTML por escrito; neste livro, nos ater ao HTML5, perodo.

Criao de marcao HTMLHTML uma linguagem simples para descrever o contedo da pgina web. Seus componentes so fceis de usar e esto disponveis em trs tipos bsicos:

Elementos: Identificar diferentes partes de um documento HTML usando tags.

Atributos: Fornecer informaes adicionais sobre uma instncia especfica de um elemento.

Entidades: caracteres de texto no-ASCII, como o smbolo de copyright ()e letras acentuadas (E). Entidades vm do padro genrico Markup Language (SGML) usado para definir as primeiras verses HTML.

19Chapter 1: An Overview of HTML and CSS on the WebEste captulo aborda forma bsica e sintaxe para elementos, atributos e entidades. As partes II a V deste livro mostram como elementos e atributos, faa o seguinte:

Descrever vrios tipos de texto (como pargrafos, artigos, ou tabelas). Crie efeitos em uma pgina web (como alterar fontes ou cores, ou a criao de botes com cantos arredondados e bordas chanfradas)

Adicione imagens e links para uma pgina.

Ns fornecemos links para algumas tabelas de entidades bsicas em nosso site companheiro, ou pode consultar as completas Unicode Charts cdigo de caracteres em www. unicode.org/charts, onde voc pode encontrar cdigos para quase todos os conhecidos linguagem humana, e uma enorme coleo de formas abstratas e smbolos. Encontrar essas informaes, navegando em torno neste site:

www.dummieshtml.com/html5cafe

Construo de Documentos HTMLConstruo de um documento HTML requer a montagem de uma seqncia de elementos. Alguns dos que a seqncia prescrito, o que significa que certos elementos sempre aparecem em uma ordem especfica. Outros aspectos da seqncia so opcionais, o que lhe d a capacidade de escolher os elementos para uma pgina especial, que so mais adequados para acomodar e entregar o seu contedo.

Felizmente, isso ajuda a explicar por que os documentos HTML muitas vezes provm de esqueletos pr-definidos chamados modelos. Porque todo mundo sabe de antemo o que os elementos HTML so prescritas e em que ordem eles devem aparecer, no h nenhuma razo para que o trabalho em uma pgina web no pode comear com esse esqueleto - o que mais ou menos quando voc comear a trabalhar em livre de contedo de qualquer maneira. Modelos de torn-lo um pouco mais rpido e mais fcil para voc aperfeioar a sua pgina web (e para se certificar de que voc no se esquea de qualquer dos seus elementos obrigatrios).O erro humano em pginas web inevitvel, ento navegadores so projetados para fazer o seu melhor para compensar os erros e omisses nessas pginas. Mas mesmo que o HTML5 simples e direta, ele vem com alguns requisitos bsicos que devem ser cumpridos para uma pgina da Web para exibir corretamente. Ns entramos em tais requisitos no captulo 2 e as partes II e III deste livro. Por agora, por favor, aceite que h boas razes para seguir as regras do HTML de estrada, o melhor do que que se voc fizer isso, suas pginas devem trabalhar (e de boa aparncia), em quase todos os navegadores web.

20 Part I: Getting Started with HTML and CSS on the WebBasicamente, a construo de uma pgina web consiste na insero de uma sequncia de elementos HTML em um documento, junto com o texto e indicaes de recursos, para dar a pgina de algum contedo. Isso significa que a adio de elementos (e s vezes dando-lhes atributos e valores), escrever um texto, preparar imagens ou mdia, e assim por diante. Quando todas as peas so colocadas juntas, voc pode verificar o seu trabalho para se certificar de que a pgina diz o que quer, faz o que quiser, e olha o jeito que voc quiser.

Compreender o papel do CSSCascading Style Sheets (CSS) gerir pgina web de apresentao, e governar como as pginas parecem e se comportam quando em exposio para os usurios (ou a ser impressos em papel ou ouvido em um conversor de texto para fala). CSS uma outra linguagem de marcao que mistura smbolos especiais e palavras-chave para definir regras para a manipulao de elementos HTML especficos (e at mesmo, casos especficos de elementos HTML, quando o "tratamento especial" necessria). CSS melhor entendida como uma ferramenta para gerenciar a formatao, layout e comportamento em pginas da web.

CSS oferece uma incrvel variedade de controles da apresentao, incluindo posicionamento e disposio dos elementos do documento, identificao e atribuio de cores para texto e fundos, e seleo e manipulao de tipos especficos, chamados de fontes, de informao textual. CSS fornece mtodos para que uma nica pgina de marcao pode ser apresentada em diferentes estilos para diferentes formas de prestao, de modo que um documento pode ser ajustado e melhorado para entrega em uma tela, uma pgina impressa, por voz, ou at mesmo em um Braille- dispositivo tctil base.

Quando um autor cria uma pgina web, ele ou ela pode definir uma folha de estilo para esse documento. No entanto, o navegador web do leitor pode substituir suas definies com uma folha de estilo diferente, se o leitor assim o desejar. CSS define um regime de prioridade, chamado de cascata, que define qual estilo regra deve ser aplicada a elementos HTML individuais em um documento. Tais prioridades ou pesos so calculados para aplicar regras de estilo para que os resultados so previsveis e

Diferentes verses tambm . . .Assim como o HTML, CSS tem j existe h um tempo. Hoje, trs verses finais de CSS foram definidos:

Verso 1, tambm chamado de CSS nvel 1, foi publicado pelo W3C em De dezembro de 1996 Esta verso define todos os recursos bsicos de CSS, incluindo propriedades de fontes, tais como tipo e nfase, cor de texto e os fundos, os atributos de texto para o espaamento entre as letras, palavras e linhas

21Chapter 1: An Overview of HTML and CSS on the Webde texto, valores de alinhamento de texto, imagens e tabelas, margens, bordas, preenchimento e posicionamento dos elementos, e identificadores nicos e classificaes genricas para grupos de atributos.

Verso 2 (CSS Nvel 2), publicado em maio de 1998, acrescenta absoluta, relativa, e posicionamento fixo para os elementos, e um z-index para posicionar mltiplas camadas em um documento, juntamente com os tipos de mdia, auricular (som) estilos, texto bidirecional e novas propriedades de fonte, como sombras.

Verso 2.1 (CSS Nvel 2 Reviso 1, tambm conhecido como CSS2.1) reparado erros em CSS2. Ele passou por muitas verses e revises em si, primeiro atingindo o status de recomendao Candidato em fevereiro de 2004, no foi finalmente publicado como uma recomendao at junho de 2011.

Verso 3 (CSS Nvel 3) dividido em uma coleo de itens chamados mduloscada um dos quais se estende caractersticas definidas na CSS 2. No momento, 50 mdulos CSS ter emitido a partir de CSS do W3C grupo de trabalho, mas apenas quatro alcanaram status de recomendao - ou seja, o Media Queries, Namespaces, Nvel Seletores 3 e Color. Outros so relativamente estveis e alcanaram o status Recomendao candidatos, incluindo o mdulo de Fundos e Fronteiras, bem como layout de vrias colunas. O resto ainda esto em vrios estgios de concluso.

CSS4 segue a abordagem mdulo introduzido com CSS 3 para que no haja especificao CSS4 nico, monoltico. Apenas alguns Nvel 4 mdulos so curalmente em desenvolvimento, porque to poucos Nvel 3 mdulos foram concludos. (Valores Imagem, Fundos e Fronteiras e Seletores so o nvel mais conhecido 4 mdulos sendo trabalhado no momento.)

A maioria dos navegadores modernos, como as verses do Internet Explorer 9 e 10, as verses do Chrome 20 e posteriores, Firefox verso 17 ou superior, e assim por diante, apoiar plenamente CSS2.1. Suporte para CSS3 varia por mdulo, onde todos os itens de status Recomendao normalmente so suportados, mas com diferentes graus de suporte para outros mdulos. CSS4 goza de pouco ou nenhum apoio desses mesmos browsers (exceto para aplicao experimental ou beta).

Tal como acontece com HTML5, ns fornecemos informaes apenas sobre amplamente adotado e usado marcao CSS neste livro. Vamos supor que voc quer construir vivel e prevercapazes de pginas web e sites. por isso que afastar-se de especificaes e mdulos que no so bem compreendidos e amplamente implementadas aqui.

Criando marcao CSSCuriosamente, qualquer documento HTML pode incluir informaes de estilo escrito usando a marcao CSS. No entanto, a maioria dos desenvolvedores web Isole marcao CSS em documentos separados de folhas de estilo e usar links para aqueles externa independente

22 Part I: Getting Started with HTML and CSS on the Webfolhas de estilo em suas pginas da web (documentos HTML). Esta tcnica ajuda a manter o contedo separado da apresentao, incentiva a reutilizao de folhas de estilo, e faz com que seja fcil de atualizar apresentao para vrias pginas, editando as folhas de estilo que fazem referncia ao invs de ter que incorporar mudanas em toda uma srie de pginas da web. Outra vantagem importante desta abordagem que ela estimula o uso de folhas de estilo padro - como as que voc v referenciadas na listagem 1-1, neste mesmo captulo, na verdade - onde customizao local vem de referncia para as folhas de estilo locais.

A construo de uma folha de estilo requer algum conhecimento dos elementos HTML que aparecem em suas pginas web, e requer que voc defina propriedades e valores para gerir a forma como esses elementos vo olhar e para onde eles devem ser posicionados nessas pginas. CSS oferece incrvel controle sobre a apresentao, que por sua vez exige extensos testes e ajustes para fazer as coisas apenas para a direita. Alm disso, CSS permite que classes ou identificadores nicos a serem utilizados, de modo que voc pode associar um conjunto de regras de estilo com um nico tipo ou mesmo uma nica instncia de um elemento HTML em suas pginas. Assim, voc pode definir regras de estilo bsico para elementos HTML inteira e, em seguida, substitu-los com regras especficas para as coisas tais como cabealhos, rodaps de pginas, certos tipos de pargrafos, e at mesmo casos individuais de elementos HTML. Isso proporciona um poder incrvel sobre o layout, olhar e sentir-se em pginas da web.

Diviso de um simples marcao ExemploVirar volta a ter um outro olhar Listagem 1-1. Um exame cuidadoso desta lista curta mostra um pouco de HTML, mas apenas referncias indiretas a CSS.

Onde est o HTML?Os elementos HTML que voc v na Listagem 1-1 so os seguintes, por ordem de apario:

A tag comea a pgina da web, e termina.

A marcao entre e define informaes gerais para a pgina da Web inteira.

O texto dentro do elemento fornece o ttulo da pgina. O elemento fornece informaes sobre o contedo da pgina e layout de exibio

Um elemento estabelece um link para um recurso externo; neste caso, a duas folhas de estilo CSS diferentes.

23Chapter 1: An Overview of HTML and CSS on the Web

A marcao entre e estabelece contedo da pgina.

A define duas divises diferentes contedos em da pgina, uma para navegao, o outro para o contedo da pgina. A navegao define uma barra de navegao.

O elemento ncora define links de hipertexto.

O ttulo 1 define um cabealho de nvel 1.

O pargrafo define um pargrafo de texto.

Uma figura define um grfico com uma legenda.

A imagem ligaes de elementos em um grfico para a exposio, com

horizontais e as dimenses verticais e texto alternativo caso a imagem no aparece.

A legenda da figura elemento rotula a legenda figura

Um rodap do documento define o texto para a parte inferior da pgina.

Coloque todos esses elementos juntos, adicionar valores e atributos de texto, e voc tem a pgina web mostrada na Figura 1-2.

Onde est o CSS?No h CSS per se na Listagem 1-1. Em vez disso, voc encontrar links para duas folhas de estilo externas, uma main.css chamado e outro normalize.css. Quando isso acontece, essas duas folhas de estilo so os resultados de um trabalho considervel por parte da comunidade HTML5 para criar um estilo HTML padro que parece o mesmo (ou pelo menos, muito perto) em vrios navegadores. Este projeto chamado de HTML5 Boilerplate, e se descreve como "um modelo de front-end profissional para a construo de aplicaes web velozes, robustas e adaptveis ou sites "Confira no http://html5boilerplate.com.; voc tambm pode encontrar uma boa vitrine de exemplos legais com base neste modelo em http://h5bp.net.

A parceria entre iguais tentador tratar CSS como uma reflexo tardia para HTML ou de alguma forma secundria a HTML. Voc deve ter o contedo que voc possa ter apresentao, certo? Embora isso seja verdade, voc no pode entregar contedo sem apresentao, tampouco, e uma boa apresentao to importante para o sucesso e usabilidade de uma pgina web, como o contedo que ele lida em um navegador web.

24 Part I: Getting Started with HTML and CSS on the Web por isso que importante entender HTML e CSS. Voc pode usar HTML para controlar que vai para uma pgina da web, e voc usar CSS para controlar onde e como parece; o que parece (ou soa, ou ainda se sente) como; e como ele se comporta. HTML e CSS so essenciais para uma pgina web bem trabalhada, assim que voc deve dedicar a mesma ateno e energia para a compreenso de HTML e CSS, nem um em detrimento do outro.

2Encontro da estrutura e

os componentes de HTML

Neste captulo Entendimento a sintaxe e as regras em linguagens de marcao

Examinando entidades na marcao

Organizando pginas da web

Explorando uma pgina web

T rabalhar com uma linguagem de marcao, como HTML exige que voc compreenda as convenes usadas para inserir a marcao em um arquivo de texto e fazer sentido das cordas s vezes enigmticas de texto que voc pode ver como um resultado.

Mas, como voc obter os detalhes, tudo comea a fazer um certo tipo de sentido - um sentido que voc deve procurar desenvolver e cultivar, se voc quiser construir ou editar marcao em pginas da web. Fique com a gente aqui, por favor, como falar com voc atravs de alguns detalhes importantes envolvidos na leitura e compreenso HTML.

Como qualquer Idioma: Sintaxe e RegrasHTML chamado de linguagem de marcao por uma boa razo: agarra, texto normal comum e insere vrias seqncias em que o texto para definir, organizar e gerenciar o fluxo ea seqncia de contedo em pginas da web. As cordas inseridas definir a marcao, que navegadores - ou outros programas especiais conhecidos como agentes de utilizador - debruar sobre e usar (junto com CSS, claro) para orientar a sua visualizao dos contedos includos.

Como qualquer linguagem, HTML est sujeito a uma sintaxe especfica, que define a ordem em que a marcao deve ou pode aparecer em uma pgina web. H tambm grande quantidade de regras interessantes sobre que tipo de marcao legal em alguns lugares, mas ilegal em outros. Isto pode parecer um conceito difcil, mas essas restries em HTML ilustra o que isso significa e por que faz muito sentido:

26 Part I: Getting Started with HTML and CSS on the Web O elemento para fornecer uma legenda para uma tabela. Assim, um s aparecem dentro marcao. Se voc deseja fornecer uma legenda para uma figura, voc deve usar o elemento em seu lugar. Voc precisa empregar a marcao certa para os usos corretos em HTML.

HTML reconhece vrios tipos de listas, que pode organizar os itens de texto com nmeros ou marcadores. Os itens da lista empregar o tags para identificar elementos em tais listas. por isso que essas marcas particulares so legais apenas se ocorrer dentro de algum tipo de elemento da lista, como (uma ou lista desordenada, com marcadores) ou (um ordenado, ou lista numerada ).

Captulo 5 abrange listas em grande detalhe. Esse captulo fala sobre a marcao para criar vrias listas em pginas da Web usando HTML.

HTML suporta todos os tipos de campos e controles de entrada de formulrios on-line. Tal como acontece com tabelas, elementos de formulrios relacionados podem aparecer apenas dentro de um par de . H lotes de elementos e atributos em formulrios relacionados que podem aparecer apenas em tal contexto. Estes incluem vrios tipos de entrada, vrios tipos de caixas de texto, controles de boto, e muito mais. Todos eles so legais apenas em um formulrio, de modo que deve ocorrer entre e em uma pgina web para que possam trabalhar.

Captulo 7 abrange formas em grande detalhe. Este captulo explica a marcao para criar todos os tipos de formulrios em pginas web usando HTML.

HTML Entendimento resume em grande parte para apreender como criar a marcao ele usa (que a sintaxe) e compreender a ordem (ou contexto) em que os elementos de marcao individuais podem aparecer. Essas so as regras para a criao de HTML vlida ou legal. Grande parte deste livro dedicada a um ou ambos destes tpicos. As mesmas observaes so vlidas para CSS tambm, pelo caminho, a no ser que a sintaxe e as regras para a sua expresso so diferentes porque CSS uma linguagem de marcao diferente do HTML.

Codificao de cores a marcaoComo apresentamos HTML e CSS informaes em nossos exemplos de cdigo deste livro, usamos codificao de cores para ajud-lo a distinguir o que o que por meio de marcao. Aqui est uma chave de cor que voc deve ter em mente que voc ler nossas vrias listagens de cdigo em outras partes do livro:

27Chapter 2: Meeting the Structure and Components of HTMLTemos colorir marcao apenas em listagens de cdigo e blocos de cdigo, pois afeta a legibilidade muito quando cdigo aparece na cpia do corpo - ou seja, dentro de pargrafos comuns de texto como este. Nos pargrafos como este, ns simplesmente usar uma fonte diferente, espaamento simples - como voc j viu em nossas discusses sobre e marcao (e outros elementos HTML) na seo anterior.

S mais uma coisa: Se voc usar um editor de HTML, como o Aptana Studio, HTML-Kit, Dreamweaver, KompoZer, ou o que quer, voc encontrar essas ferramentas tambm usam a cor do texto para ajudar a identificar os diferentes tipos de marcao. Infelizmente, nenhum deles fazer isso no exatamente da mesma maneira, de modo que o esquema de cores que apresentamos aqui neste livro ser diferente dependendo do editor HTML que voc usa.

Quebrando os elementosOs elementos so os blocos de construo para HTML. Voc us-los para descrever cada pedao de texto em sua pgina web. Elementos so feitos de tags e os contedos dentro (ou entre) essas tags. Em HTML, existem dois tipos principais de elementos:

Elementos com contedo composto de um par de tags e qualquer texto que fica entre as tags de abertura e fechamento do par

Elementos que inserir algo na pgina, utilizando uma nica tag

Pares de tags em HTMLElementos que descrevem o contedo usar um par de tags para marcar o incio eo fim, com tudo in between representando o contedo do elemento. Pares de tag comear com uma tag de abertura, seguido de algum contedo, e terminar com uma marca de fechamento, como este: Ttulos so fceis, o contedo duro .

Contedo - como artigos, apartes, pargrafos, ttulos, tabelas e listas - sempre usa pares de tags, onde

A tag de abertura () informa ao navegador, "O elemento comea aqui."

A tag de fechamento () informa ao navegador, "O elemento termina aqui."

Contedo real o material entre a abertura e fechamento de tags. Aqui est um trecho do pargrafo bio do Ed em www.edtittel.com/about/about-ed. html:

Ed Tittel has worked over 30 years in the computing industry. Hes worked as a software developer and development manager, a networking consultant, a trainer and course developer, and a technical evangelist . . .

28 Part I: Getting Started with HTML and CSS on the Webtags simplesElementos que inserir algo em uma pgina so chamados de elementos vazios (porque eles encerram nenhum contedo) e usar uma nica tag, como este: . Imagens e quebras de linha inserir algo em um arquivo HTML e usar uma nica tag (elemento vazio) - ou seja, E , respectivamente.

Em HTML5, elementos vazios no necessitam de tratamento especial. Em uma verso anterior conhecido como XHTML (baseado na linguagem de marcao XML), elementos vazios so obrigados a terminar com uma barra pouco antes do parntese angular de fecho, ento o que ns escrevemos como na pgina anterior em HTML5 (e HTML4, para que o assunto) seria escrito como . Para compatibilidade com verses anteriores com HTML4, isso muitas vezes seria escrito como porque esse espao anterior barra habilitado navegadores mais antigos para reconhecer o elemento corretamente, mesmo se eles no analisar a marcao como XHTML. Voc pode encontrar o espao extra ea barra de fechamento em pginas que voc olha, ento no deixe que te incomoda. Estas contores no se aplicam mais em HTML5.

Por exemplo, o elemento faz referncia a uma imagem. Quando o navegador exibe a pgina, ele substitui o elemento com o arquivo que ele aponta. (Um atributo faz o que aponta, como mostrado na prxima seo.)

No entanto atraente o conceito possa parecer, voc no pode fazer os seus prprios elementos HTML. Elementos legais para HTML pertence a um conjunto muito especfico - se voc usar elementos que no pertencem a esse conjunto, o navegador simplesmente ignora-los. Os elementos que voc pode usar so definidos nas vrias especificaes HTML. (A verso da especificao do HTML5 que era atual como estvamos escrevendo este livro pode ser encontrado em www.w3.org/TR/html51.)

marcao NestingAlgumas estruturas de pginas HTML podem conter elementos aninhados. Pense neles como malas que se encaixam perfeitamente um dentro do outro. Por exemplo, uma lista de marcadores usa dois tipos de elementos:

O elemento especifica que a lista no estiver ordenada (com marcadores).

O elemento marca cada item da lista. (Li significa "item da lista.")

Quando voc combina elementos usando essa abordagem, voc deve fechar todos os elementos de item de lista dentro antes de fechar o elemento da lista no ordenada, como este:

Item 1 Item 2

29Chapter 2: Meeting the Structure and Components of HTML

Adicionando Atributos para seu HTMLAtributos introduzir variedade e especificidade de como um elemento descreve o contedo ou como elemento que funciona ou se comporta. Atributos permitem que voc use elementos de forma diferente dependendo das circunstncias. Por exemplo, o elemento usa o atributo src para especificar um local para uma imagem que voc deseja exibir:

Neste pouco de HTML, o elemento uma bandeira geral para o navegador que voc deseja incluir uma imagem. Os atributos lidar com todos os detalhes:

O atributo src fornece os detalhes para a imagem que voc deseja usar - header.png neste caso

O atributo width e height dar informaes sobre como exibir a imagem na pgina.

O atributo alt fornece uma alternativa de texto para a imagem, o que til porque um texto nico navegador pode exibir o texto, ou um leitor de texto-para-fala pode dizer isso em voz alta para os deficientes visuais.

O atributo title cria uma mensagem de texto pop-up que aparece sobre a imagem quando o usurio move o mouse dentro de suas fronteiras.

Captulo 9 descreve o elemento e seus atributos em detalhe glorioso.

Se voc deseja definir atributos para qualquer elemento HTML, eles devem aparecer dentro da tag de abertura para esse elemento, ou dentro da tag apenas para um elemento vazio. Pertencem aps o nome do elemento, mas antes do parntese angular de fecho nessa tag, como este:

Regras de sintaxe HTML5 decreto que atribuem valores devem aparecer sempre entre aspas, mas voc pode incluir atributos e seus valores em qualquer ordem que desejar dentro da tag de abertura ou de uma nica tag de um elemento vazio.

Cada elemento HTML tem uma coleo de atributos que podem ser usados com ele, mas voc no pode misturar e combinar os atributos e elementos, com tudo. Alguns atributos podem ter qualquer texto como um valor, porque esse valor pode ser qualquer coisa de, tal como a localizao de uma imagem ou uma pgina para a qual voc gostaria de ligao. Outros atributos impor uma lista especfica de valores que podem ser tomadas, tais como as suas opes para o alinhamento de texto em uma clula da tabela (esquerda, direita, centro, e assim por diante).

30 Part I: Getting Started with HTML and CSS on the WebAs vrias especificaes HTML que defini exatamente quais atributos voc pode usar com qualquer elemento, e que se valoriza (se explicitamente definidos).

Cada captulo nas partes II e III abrange os atributos que voc pode usar com cada elemento HTML indicado. Alm disso, consulte o nosso contedo on-line para as listas completas de HTML obsoleta (e XHTML) tags e atributos. (Nota: HTML-speak, depreciado significa que um tag ou atributo no deve mais ser utilizado, pois pode se tornar obsoleto em breve e no ser mais legal marcao.)

Examinando Entidades em marcaoTexto torna a web possvel, mas sujeita a limitaes. Entidades, tambm conhecidas como entidades de carter, define cdigos para exibir caracteres especiais em suas pginas da web.

Caracteres no-ASCIIAmerican Standard Code for Information Interchange Bsico (ASCII) texto define um nmero bastante reduzido de caracteres (127 nos cdigos bsicos de 7 bits; 255 nos cdigos estendidos de 8 bits). Ele no inclui alguns caracteres especiais, como smbolos de marca registrada, fraes e caracteres acentuados.

Por exemplo, se traduzir um pargrafo de texto da biografia de Ed para o alemo, o resultado inclui trs personagens U com trema (), representadas na Figura 2-1.

Figure 2-1: Texto ASCII no pode representar todos os caracteres de texto, por isso usa HTML entidades tambm.

Texto ASCII n