HTML5 e CSS3 001-123
HTML5 e CSS3 001-123
HTML5 e CSS3 001-123
HTML5
e CSS3
Sétima Edição
Imprensa de pêssego
Machine Translated by Google
Imprensa de pêssego
Rua Oitava, 1249
Berkeley, CA 94710
510/524-2178
510/524-2221 (fax)
Aviso de Direitos
Todos os direitos reservados. Nenhuma parte deste livro pode ser reproduzida ou transmitida de qualquer forma, por qualquer meio, eletrônico,
mecânico, fotocópia, gravação ou outro, sem a permissão prévia por escrito do editor. Para obter informações sobre como obter permissão
para reimpressões e trechos, entre em contato com [email protected].
Capturas de tela de bart.gov cortesia do Distrito de Trânsito Rápido da Área da Baía de São Francisco (BART).
Capturas de tela de css3generator.com cortesia de Randy Jensen.
Capturas de tela do dribbble.com cortesia de Dan Cederholm.
Capturas de tela de fontsquirrel.com cortesia de Ethan Dunham.
Foodense.is capturas de tela cortesia de Julie Lamba.
capturas de tela do modernizr.com cortesia de Faruk Ates.
Capturas de tela de namecheap.com cortesia de Namecheap.
Aviso de responsabilidade
As informações contidas neste livro são distribuídas “como estão”, sem garantia. Embora todas as precauções tenham sido tomadas na preparação do
livro, nem os autores nem a Peachpit terão qualquer responsabilidade perante qualquer pessoa ou entidade com relação a qualquer perda ou
dano causado ou supostamente causado direta ou indiretamente pelas instruções contidas neste livro. ou pelos produtos de software e hardware de
computador nele descritos.
Marcas registradas
Muitas das designações utilizadas pelos fabricantes e vendedores para distinguir os seus produtos são reivindicadas como marcas comerciais.
Quando essas designações aparecem neste livro, e a Peachpit estava ciente de uma reivindicação de marca registrada, as designações aparecem
conforme solicitado pelo proprietário da marca registrada. Todos os outros nomes de produtos e serviços identificados ao longo deste livro são usados
apenas de forma editorial e para o benefício de tais empresas, sem intenção de violação da marca registrada.
Nenhum tal uso, ou o uso de qualquer nome comercial, tem a intenção de transmitir endosso ou outra afiliação a este livro.
ISBN-13: 978-0-321-71961-4
ISBN-10: 0-321-71961-1
987654321
Para a família.
Machine Translated by Google
flexibilidade e orientação; e para inúmeras conversas outras pessoas da Peachpit por trabalharem nos
e muitas bastidores para tornar o livro um sucesso.
Robyn Thomas, por seu tremendo esforço em nos progresso e proporcionarem pausas ocasionais e bem-
manter no caminho certo, discutindo incontáveis vindas na escrita. Agradeço principalmente àqueles
cuidadosas e fornecendo palavras regulares de dizer muitas vezes que eu não poderia me reunir,
encorajamento, que sempre foram um incentivo. mas que continuaram perguntando mesmo assim.
Michael Bester, por todos os comentários e escrita de livros e por sua orientação enquanto eu
omissões e nos ajudando a transmitir a mensagem A comunidade da Web, por suas inovações e por
certa aos leitores. Foi um verdadeiro prazer compartilhar seu conhecimento para que outros
trabalhar com ele em outro livro. possam se beneficiar (citei muitos de vocês ao longo
do livro).
Chris Casciano, na mesma linha, por todo o seu A vocês, leitores, pelo interesse em aprender sobre
conhecimento técnico, sugestões e feedback crucial. HTML e CSS e por selecionarem este livro; Eu sei que
Gostei muito de você ter se juntado a nós nas últimas você tem muitos outros para escolher. Espero que o
semanas; tivemos sorte de ter você. livro lhe sirva bem.
iv Agradecimentos
Machine Translated by Google
Muito obrigado aos seguintes autores colaboradores. Seth Lemoine (capítulos 5 e 16)
Os leitores têm um livro mais valioso devido aos Seth Lemoine é desenvolvedor de software e professor
seus esforços, pelos quais sou grato. Também gostaria em Atlanta. Por mais de dez anos, ele trabalhou em
de pedir desculpas a Erik Vorhes por não termos projetos desafiadores para ver o que é possível,
conseguido encaixar os Apêndices A e B no livro. com tecnologias que vão desde HTML, JavaScript
e CSS até Objective-C e Ruby. Seja encontrando
Leitores que os veem no site do livro maneiras inovadoras de ensinar HTML5 e CSS para
certamente apreciará seu trabalho. seus alunos ou aperfeiçoando uma receita Schezuan
em seu wok ao ar livre, ser criativo é sua paixão.
Em ordem alfabética de sobrenome, os autores
colaboradores são:
Erik Vorhes (Apêndices A e B, disponíveis
Scott Boms (Capítulo 14)
no site do livro)
Scott é um premiado designer, escritor e palestrante
Erik Vorhes cria coisas para a Web com VSA Partners e
que fez parceria com organizações como PayPal,
é editor-chefe da Typedia (http://typedia.com/). Ele
HSBC, Hyundai, DHL, XM Radio, revista Toronto Life
mora e trabalha em Chicago.
e Masterfile durante seus mais de 15 anos de
trabalho na Web. Quando ele está longe do
computador, você pode encontrá-lo tirando fotos Brian Warren (Capítulo 13)
Polaroids; tocando bateria com sua banda, George; Brian Warren é designer sênior da Happy Cog na
ou aproveitando o tempo com sua maravilhosa esposa Filadélfia. Quando não está escrevendo ou desenhando,
e dois filhos. Ele é ele passa o tempo brincando com sua linda família,
ouvindo música e fazendo cerveja. Ele bloga, de forma
@scottboms no Twitter. intermitente, em http://begoodnotbad.com.
—Bruce
Agradecimentos _
Machine Translated by Google
Resumo do conteúdo
agradecimentos . . . . . . . . . . . . . . . . . . . . 4
introdução . . . . . . . . . . . . . . . . . . . . . . . . xv
Texto do capítulo 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Índice
Agradecimentos . . . . . . . . . . . . . . . . . . . . . 4
Introdução . . . . . . . . . . . . . . . . . . . . . . . . xv
HTML e CSS em resumo. . ... . . . . . . . . . . . . . . xvi
Aprimoramento progressivo: uma prática recomendada . . . . . . XVIII
Esse livro é para você? . . . . . . . . . . . . . . . . . . . . xx
Como este livro funciona. . . . . . . . . . . . . . . . . . . . XXII
Site complementar. . . ... . . . . . . . . . . . . . XXIV
URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Principais conclusões. . . . . . . . . . . . . . . . . . . . . . . . 24
Índice vii
Machine Translated by Google
Criando um cabeçalho. . . . . . . . . . . . . . . . . . . . . . 61
Marcação de navegação . . . . . . . . . . . . . . . . . . . . . 64
Criando um Artigo. . . . . . . . . . . . . . . . . . . . . 68
Definindo uma seção. . . . . . . . . . . . . . . . . . . . . . 72
Especificando um aparte. . . . . . . . . . . . . . . . . . . . . 75
Criando um rodapé . . . . . . . . . . . . . . . . . . . . . . 80
Criando contêineres genéricos. . . . . . . . . . . . . . . . 84
Melhorando a acessibilidade com . . . . . . . . . . . . . 88
elementos de nomenclatura ARIA com classe ou. ID.
. .. . . . . . . . 92
Adicionando o atributo Title aos elementos. . . . . . . . . . 95
Adicionando comentários . . . . . . . . . . . . . . . . . . . . . 96
Capítulo 4 Texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Iniciando um novo parágrafo. . . . . . . . . . . . . . . . 0,100
Adicionando informações de contato do autor. . . . . . . . . . . .102
Criando uma Figura . . . . . . . . . . . . . . . . . . . . . .104
Especificando hora. . . . . . . . . . . . . . . . . . . . . . .106
Marcando texto importante e enfatizado. . . . . . . . . 110
Indicando uma Citação ou Referência. . . . . . . . . . . . . 112
Citando Texto. . . . . . . . . . . . . . . . . . . . . . . . . 113
Destacando texto. . . . . . . . . . . . . . . . . . . . . . 116
Explicando abreviaturas . . . . . . . . . . . . . . . . . . 118
Definindo um Termo . . . . . . . . . . . . . . . . . . . . . . 0,120
Criação de sobrescritos e subscritos. . . . . . . . . . . 121
Observando edições e textos imprecisos. . . . . . . . . . . . . 124
Código de marcação. . . . . . . . . . . . . . . . . . . . . .128
Usando texto pré-formatado. . . . . . . . . . . . . . . . . 0,130
Especificação de letras miúdas . . . . . . . . . . . . . . . . . . . .132
Criando uma quebra de linha . . . . . . . . . . . . . . . . . . . .133
Criando períodos . . . . . . . ... . . . . . . . . . . . . .134
Outros Elementos. . . . . . . ... . . . . . . . . . . . . .136
viii Índice
Machine Translated by Google
Índice ix
Machine Translated by Google
x Índice
Machine Translated by Google
Índice xii
Machine Translated by Google
xii Índice
Machine Translated by Google
Índice 529
Apêndice A A1
Apêndice B B1
Índice xiii
Machine Translated by Google
Introdução
Se você está apenas começando sua aventura na ou em qualquer lugar intermediário, a partir de
construção de sites ou já construiu alguns antes, qualquer dispositivo habilitado para Web. Em suma,
mas deseja garantir que seu conhecimento esteja a promessa da Web reside na sua universalidade.
atualizado, você chegou em um momento muito E o alcance da Web continua a expandir-se à medida
interessante no setor. que a tecnologia chega a comunidades que antes
estavam excluídas.
Como codificamos e estilizamos as páginas, os
navegadores nos quais visualizamos as páginas e Somando-se à grandeza da Web está o fato de
os dispositivos nos quais visualizamos os navegadores que qualquer pessoa é livre para criar e lançar um site.
todos avançaram substancialmente nos últimos Este livro mostra como. É ideal para iniciantes sem
anos. Antes limitados a navegar na Web a partir de conhecimento de HTML ou CSS que desejam começar
nossos computadores desktop ou laptops, agora a criar páginas da Web. Você encontrará instruções
podemos levar a Web conosco em qualquer número claras e fáceis de seguir que o guiarão passo a
de dispositivos: telefones, tablets e, sim, laptops e passo pelo processo de criação de páginas.
desktops, e muito mais.
E é como deveria ser, porque o Por último, o livro é um guia útil para manter à mão.
Você pode procurar tópicos no índice ou índice e
A promessa da Web sempre foi a dissolução
consultar apenas aqueles assuntos sobre os quais
das fronteiras – o poder de compartilhar e
precisa de mais informações.
acessar informações livremente de qualquer
metrópole, comunidade rural,
Introdução xv
Machine Translated by Google
xvi Introdução
Machine Translated by Google
Introdução xvii
Machine Translated by Google
Progressivo
Aprimoramento:
Uma melhor prática
Comecei a introdução falando da universalidade da
Web – a noção de que a informação na Web
deve ser acessível.
apto para todos. O aprimoramento progressivo
ajuda você a criar sites com a universalidade em
mente. Não é uma linguagem, mas sim uma
abordagem para a construção de sites que Steve A Uma página HTML básica sem CSS
personalizado aplicado a ela. Esta página pode não
Champeon criou em 2003 (http://en.wikipedia.org/wiki/ parecer ótima, mas as informações são acessíveis –
Aprimoramento_progressivo). e é isso que importa. Mesmo navegadores próximos ao
início da Web, há mais de 20 anos, podem exibir esta
A ideia é simples, mas poderosa: comece seu site página; o mesmo acontece com os telefones celulares
com conteúdo e comportamento HTML que mais antigos com navegadores da Web. E os leitores de
tela, softwares que leem páginas da Web em voz alta
é acessível a todos os visitantes A. Para o mesmo
para visitantes com deficiência visual, poderão navegar facilmente.
página, adicione seu design com CSS B e
adicione comportamento adicional com
JavaScript, normalmente carregando-os de
arquivos externos (você aprenderá como fazer isso).
O resultado é que dispositivos e navegadores
xviii Introdução
Machine Translated by Google
Introdução xix
Machine Translated by Google
Este livro não pressupõe nenhum conhecimento n O Capítulo 20 explica como testar e
prévio de construção de sites. Então, nesse depure suas páginas antes de colocá-las na
sentido, é para o iniciante absoluto. Você Web.
aprenderá HTML e CSS desde o início. Ao fazer
n O Capítulo 21 explica como proteger seu próprio
isso, você também aprenderá sobre os recursos
nome de domínio e depois publicar seu site
novos em HTML5 e CSS3, com ênfase naqueles
na Web para que todos possam ver.
que designers e desenvolvedores estão usando
hoje em seu trabalho diário. Expandindo isso, alguns dos tópicos incluem:
Mas mesmo se você estiver familiarizado com n Criar, salvar e editar HTML e
Arquivos CSS.
HTML e CSS, ainda terá que aprender com este
livro, especialmente se quiser se atualizar sobre n O que significa escrever HTML semântico
muitas das novidades em HTML5, CSS3 e práticas e por que é importante.
recomendadas.
n Como separar o conteúdo da sua página (ou
seja, seu HTML) de sua apresentação (ou
O que este livro vai te ensinar seja, seu CSS) – um aspecto fundamental do
Adicionamos aproximadamente 125 páginas aprimoramento progressivo.
a este livro desde a edição anterior para trazer n Estruture seu conteúdo de maneira significativa
a você o máximo de material possível. (A usando elementos HTML que já existem há anos
primeira edição do livro, publicada em 1996, tinha e que são novos no HTML5.
um total de 176 páginas.)
Também fizemos atualizações substanciais (ou
n Melhorar a acessibilidade do seu site com
reescritas completas) em quase todas as
funções de referência ARIA e outras boas
páginas anteriores. Em suma, esta Sétima
práticas de codificação.
Edição representa uma revisão importante.
n Adicionar imagens às suas páginas e otimizá-las
Os capítulos estão organizados assim:
para a Web.
n Os capítulos 1 a 6 e 15 a 18 cobrem os princípios
n Vincular de uma página da Web para outra página
de criação de páginas HTML e a variedade de
ou de uma parte de uma página para outra
elementos HTML à sua disposição, demonstrando
parte.
claramente quando e como usar cada um deles.
n Estilizar o texto (tamanho, cor, negrito, itálico,
e mais); adicionar cores e imagens de fundo;
n Os capítulos 7 a 14 se aprofundam no CSS,
e implementar um layout fluido com várias
desde a criação de sua primeira regra de
colunas que pode encolher e expandir
estilo até a aplicação de efeitos visuais
aprimorados com CSS3. para acomodar diferentes tamanhos de tela.
xx Introdução
Machine Translated by Google
n Aproveitando novos seletores em CSS3 O que este livro não vaite ensinam
que permitem que você direcione seus estilos
Infelizmente, mesmo depois de adicionar tantas
de uma forma mais ampla do que era
páginas desde a edição anterior, há muito o que falar
possível anteriormente.
quando se trata de HTML e
n Aprender suas opções para abordar visitantes em
CSS que tivemos que deixar de fora alguns tópicos.
dispositivos móveis.
Com algumas exceções, limitamo-nos a omitir
n Construindo um único site para todos os usuários—
itens que você teria menos ocasiões de usar,
estejam eles usando um telefone celular, tablet, que ainda estão sujeitos a alterações, que não
laptop, computador desktop ou outro
possuem amplo suporte ao navegador, que
dispositivo habilitado para Web - com base em
exigem conhecimento de JavaScript ou que são
muitos dos princípios do web design assuntos avançados.
responsivo, alguns dos quais aproveitam as
Alguns dos tópicos não abordados incluem:
consultas de mídia CSS3.
Introdução xxi
Machine Translated by Google
Como este livro funciona porque não há como saber quais navegadores seus
visitantes usarão.
Quase todas as seções do livro contêm exemplos O código e as capturas de tela são acompanhados
práticos de código que demonstram o uso no mundo por descrições dos elementos HTML ou propriedades
real (A e B). Normalmente, eles são acompanhados CSS em questão, tanto para dar contexto aos
de capturas de tela que mostram os resultados do exemplos quanto para aumentar sua compreensão
código quando você visualiza a página da Web em deles.
um navegador C.
Em muitos casos, você pode descobrir que as
A maioria das capturas de tela são da versão
descrições e exemplos de código são suficientes para
mais recente do Firefox disponível na época. No
começar a usar os recursos HTML e CSS. Mas se
entanto, isso não implica uma recomendação do você precisar de orientação explícita sobre como usá-
Firefox em detrimento de qualquer outro los, instruções passo a passo serão sempre
navegador. Os exemplos de código serão muito fornecidas.
semelhantes em qualquer uma das versões mais
Finalmente, a maioria das seções contém dicas
recentes do Chrome, Internet Explorer, Opera ou
que transmitem informações adicionais de uso,
Safari. Como você aprenderá no Capítulo 20, você
práticas recomendadas, referências a partes
deve testar suas páginas em uma ampla variedade
relacionadas do livro, links para recursos relevantes e muito mais.
de navegadores antes de colocá-las na Web,
R Você encontrará um trecho de código HTML em muitas páginas, com as seções pertinentes destacadas. Uma reticência (...)
representa código ou conteúdo adicional que foi omitido por questões de brevidade. Freqüentemente, a parte omitida é mostrada
em uma figura de código diferente.
...
<corpo>
<header role="banner">
...
<nav role="navegação">
<ul class="nav">
<li><a href="/" class="current">página inicial</a></li>
<li><a href="/about/">sobre</a></li>
<li><a href="/resources/">recursos</a></li>
<li><a href="/archives/">arquivos</a></li>
</ul>
</nenhum>
...
</header>
...
</body>
</html>
XXII Introdução
Machine Translated by Google
B Se o código CSS for relevante para o exemplo, ele Convenções utilizadas neste livro
será mostrado em uma caixa própria, com as seções
pertinentes destacadas. O livro usa as seguintes convenções:
Introdução xxiii
Machine Translated by Google
xxiv Introdução
Machine Translated by Google
1
Construção de página da web
Blocos
É importante observar que cada um desses sobre o idioma principal do conteúdo (inglês,
componentes de uma página Web é composto francês e assim por diante), codificação de
exclusivamente de texto. Isso significa que as páginas caracteres (normalmente UTF-8) e muito mais.
são salvas em formato somente texto e podem ser
Este capítulo guiará você por uma página HTML
visualizadas em praticamente qualquer navegador e
básica, discutirá algumas práticas recomendadas e
em qualquer plataforma, seja desktop, celular, tablet
explicará cada um dos três componentes
ou outro. Garante a universalidade da Web. Uma
importantes.
página pode parecer diferente quando visualizada
em um dispositivo versus Nota: Conforme mencionado na introdução, utilizo
HTML para me referir à linguagem em geral. Nos
outro, mas tudo bem. O importante como primeiro
casos em que estou destacando características
passo é tornar o conteúdo acessível a todos os
usuários, e o HTML permite isso. especiais exclusivas de uma versão do idioma, usarei
o nome individual. Por exemplo, “HTML5
Além dos três componentes dos quais uma página da
Web é composta principalmente, uma página também introduz vários elementos novos e
inclui HTML que fornece informações sobre a própria
redefine ou elimina outros que existiam
página, a maioria das quais seus usuários não
anteriormente no HTML 4 e XHTML 1.0.”
veem explicitamente e que se destina principalmente
Para mais detalhes, consulte “Como este livro funciona”
a navegadores e pesquisas. motores. Isto pode incluir na introdução.
informações
2 Capítulo 1
Machine Translated by Google
B Aqui está o código para uma página HTML básica. Destaquei as partes HTML para que você possa distingui-las do conteúdo
de texto da página. Conforme demonstrado em A, o HTML que envolve o conteúdo do texto não aparece quando você visualiza a
página em um navegador. Mas, como você aprenderá, a marcação é essencial porque descreve o significado do conteúdo.
Observe também que cada linha é separada por um retorno de carro.
Isso não é obrigatório e não afeta a renderização da página.
<!DOCTYPEhtml>
<html lang="pt">
<cabeça>
<meta charset="utf-8" />
<title> Linho Azul (Linum lewisii)</title>
</head>
<corpo>
<artigo>
<h1>O Efêmero Linho Azul</h1>
Tudo acima da tag inicial <body> são as C O texto do elemento título é a única parte da
informações de instrução para navegadores área superior de um documento HTML que o usuário
vê. O resto são informações sobre a página para
e motores de busca mencionados anteriormente C.
navegadores e mecanismos de busca.
Cada página começa com a declaração DOCTYPE,
que informa ao navegador a versão HTML da página. <!DOCTYPEhtml>
<html lang="pt">
<cabeça>
Você deve sempre usar o DOCTYPE do HTML5, que <meta charset="utf-8" />
é <!DOCTYPE html>. A caixa do texto não <title>O Efêmero Linho Azul ÿ
importa, mas é mais comum usar DOCTYPE em (Linum lewisii)</title>
</head>
letras maiúsculas.
Independentemente disso, inclua sempre o
DOCTYPE em suas páginas. (Veja a barra lateral
“DOCTYPE aprimorado do HTML5” no Capítulo 3 para
obter mais informações.)
Os bits que começam em <!DOCTYPE html> e
continuam até </head> são invisíveis para os
usuários com uma exceção: o texto entre <title> e </
title>—Blue Flax (Linum lewisii)—aparece como o
título no final. bem no topo da janela do navegador e
em um navegador
guia B. Além disso, normalmente é o padrão
nome de um marcador ou favorito do navegador
e é uma informação valiosa para pesquisa
4 Capítulo 1
Machine Translated by Google
D O conteúdo de uma página existe entre as tags inicial e final do Enquanto isso, o conteúdo da sua página – ou
elemento body . O documento termina em </html>. seja, o que é visível para os usuários – fica
entre <body> e </body>. Finalmente, o </html>
<!DOCTYPEhtml> A tag end sinaliza o final da página D.
<html lang="pt"> O recuo do código não tem absolutamente
. . . [cabeçalho do documento] . . .
nenhuma influência sobre se o código é HTML
<corpo>
válido. Também não afeta a forma como o con-
<artigo>
<h1>O Efêmero Linho Azul</h1> tenda é exibida no navegador (o elemento
pre , sobre o qual você aprenderá no Capítulo 4,
<img src="blueflax.jpg" width="300" é a única exceção). No entanto, é costume recuar
ÿ height="175" alt="Linho Azul (Linum o código aninhado em um elemento pai para
ÿ lewisii)" />
facilitar a compreensão da hierarquia dos
<p>Fico continuamente elementos à medida que você lê o código. Você
<em>maravilha</em> ÿ com a aprenderá mais sobre pais e filhos posteriormente
beleza e a delicadeza ÿ <a href="http:// neste capítulo. Você também aprenderá mais
en.wikipedia.org/ ÿ wiki/Linum_lewisii" detalhadamente sobre a renderização padrão
rel="external" ÿ title=" Saiba mais sobre
o Linho Azul"> ÿ Linho Azul</a> que do navegador.
de alguma forma tomou conta do meu Primeiro, vamos discutir o que significa
jardim. Elas ficam inundadas de ÿ escrever HTML semântico e por que ele é a base
cores todas as manhãs, mas nem de um site eficaz.
uma ÿ única flor permanece à ÿ
tarde. Eles são a própria ÿ definição de efêmero.</p>
</artigo>
</body>
</html>
6 Capítulo 1
Machine Translated by Google
8 Capítulo 1
Machine Translated by Google
<h1>O Efêmero Linho Azul</h1> amostra. Como você verá, não há mágica em escrever HTML semântico.
É principalmente bom senso quando você estiver
<img src="blueflax.jpg" width="300" ÿ familiarizado com os elementos à sua disposição.
height="175" alt="Linho Azul (Linum ÿ lewisii)" />
Vamos revisitar o corpo da nossa página básica
para conhecer alguns dos elementos HTML C mais
</artigo>
O próximo é o título D. O HTML fornece seis níveis de
</body>
título, h1–h6, sendo h1 o mais importante. Um h2 é um
subtítulo de um h1, um h3 é um subtítulo de um h2 e
D Os títulos são elementos críticos na definição do assim por diante, assim como quando você digita um
esboço de uma página. Eles tornam uma página mais
documento com vários títulos em um processador de
acessível aos usuários de leitores de tela e os mecanismos
de pesquisa os utilizam para determinar o foco de uma página. texto.
O parágrafo é marcado com – surpresa – o elemento p F O elemento p pode conter outros elementos
F. Assim como nos materiais impressos, um parágrafo que definem a semântica das frases dentro de
pode conter uma única frase ou várias frases. um parágrafo. Os elementos em e a são dois
exemplos.
Se nossa página precisasse de outro parágrafo, você
simplesmente adicionaria outro elemento p após o <p> Fico continuamente <em>surpreso</
primeiro. em> com ÿ a linda e delicada <a href="http://
ÿ en.wikipedia.org/wiki/Linum_lewisii" ÿ
Existem dois elementos aninhados em nosso rel="external" title="Saiba mais sobre ÿ
parágrafo que define o significado de pedaços de Blue Flax">Blue Flax</a> que de alguma
texto: em e F. Esses são exemplos dos numerosos forma ÿ tomou conta do meu jardim. Eles
elementos de conteúdo de frases que o HTML5
estão inundados de ÿ cores em todas as
cores manhã, mas nem uma única ÿ flor
fornece, a maioria dos quais melhora a semântica do
permanece à tarde. Elas são ÿ a própria definição de efêmero.</p>
texto do parágrafo.
Conforme mencionado, esses, juntamente com
p, são discutidos no Capítulo 4. G Este elemento define um link para a página da
Wikipedia sobre Blue Flax. O atributo opcional rel
O elemento em significa “ênfase no estresse”. aumenta a semântica, indicando que o link aponta
No caso da nossa página, destaca-se o espanto para outro site. O link funciona sem ele, no entanto.
O atributo opcional title aprimora a semântica de a ,
que as flores provocaram em F.
fornecendo informações sobre a página vinculada. Ele
Lembre-se disso porque o HTML descreve aparece no navegador quando um usuário passa o
o significado do conteúdo, em dita a ênfase semântica, mouse sobre o link.
10 Capítulo 1
Machine Translated by Google
Muito fácil, certo? Depois de aprender mais sobre Por que a semântica é importante
os elementos HTML disponíveis
Agora que você conhece a importância do HTML
para você, escolher os corretos para o seu conteúdo
semântico e o viu em ação, precisa saber os motivos
geralmente é uma tarefa simples.
pelos quais ele é importante.
Ocasionalmente, você encontrará um conteúdo que
poderia ser razoavelmente marcado de mais de uma
maneira, e tudo bem. Aqui estão alguns dos motivos mais importantes (esta
Nem sempre existe uma maneira certa e errada, não é uma lista exaustiva), alguns dos quais já
Por último, o HTML5 não tenta fornecer um elemento n Melhor acessibilidade e interoperabilidade
para cada tipo de conteúdo imaginável, porque a habilidade (o conteúdo está disponível para
linguagem se tornaria desajeitada. Em vez disso, adota tecnologias assistivas para visitantes com
uma postura prática e real, definindo elementos que deficiência e para navegadores em desktops,
qualquer pessoa aprender o básico, construir algumas n (normalmente) código mais leve e páginas mais rápidas
páginas e aumentar seu conhecimento a partir daí.
n Manutenção e estilo de código mais fáceis
Portanto, embora existam aproximadamente 100 elementos
HTML, não se deixe assustar por esse número. Há Se você não está familiarizado com acessibilidade,
alguns itens básicos que você usará repetidamente, é prática disponibilizar seu conteúdo para todos os
enquanto os restantes são reservados para casos usuários, independentemente de suas capacidades
elementos comuns, então está no caminho certo. webdesign/acessibilidade). Tim Berners-Lee, inventor da
Web, disse a famosa frase: “O poder da Web está na
sua universalidade.
O acesso de todos, independentemente da deficiência, é
um aspecto essencial.”
12 Capítulo 1
Machine Translated by Google
HTML tem três componentes principais de Um elemento vazio (também chamado de elemento
marcação: elementos, atributos e valores. void) se parece com uma combinação de tags de
Você viu exemplos de cada um em nossa início e fim, com um sinal de menor que inicial, o
página básica. nome do elemento seguido por quaisquer atributos que
ele possa ter, um espaço opcional, uma barra opcional
Elementos e o sinal maior que final, que é obrigatório B.
Os elementos são como pequenos rótulos que descrevem
as diferentes partes de uma página da Web: “Este é um O espaço e a barra antes do final de um elemento
título, aquela coisa ali é um parágrafo e aquele vazio são opcionais em HTML5. Provavelmente é
grupo de links é a navegação”. justo dizer que aqueles de nós que anteriormente
Discutimos alguns elementos na seção anterior. codificaram em XHTML, que requer a barra para
Alguns elementos possuem um ou mais atributos, fechar um elemento vazio, tendem a usá-lo em
que descrevem melhor a finalidade e o conteúdo (se HTML5 também, embora certamente outros o tenham
houver) do elemento. abandonado.
Os elementos podem conter texto e outros elementos Eu o incluí no meu código, mas se você optar por
mentos, ou eles podem estar vazios. Um não-vazio omiti-lo no seu, a página se comportará
Contente
Dia de início Etiqueta final
B Elementos vazios, como img mostrado aqui, não circundam nenhum conteúdo de texto (o texto do atributo alt faz parte
do elemento, não está rodeado por ele). Eles possuem uma única tag que serve tanto para abrir quanto para fechar o
elemento. O espaço e a barra no final são opcionais no HTML5, mas é comum incluí-los. No entanto, o >
que completa o elemento é obrigatório.
exatamente o mesmo. Seja qual for o caminho que você entre aspas, mas é costume incluí-las, por isso recomendo
escolher, recomendo fazê-lo de forma consistente. que você sempre faça isso. E assim como acontece com
os nomes dos elementos, recomendo que você digite os
É comum digitar os nomes dos elementos em letras
nomes dos atributos em letras minúsculas.
minúsculas, embora o HTML5 também não seja
exigente aqui, permitindo letras maiúsculas. No
entanto, hoje em dia é raro encontrar alguém que Embora você encontre detalhes sobre valores aceitáveis
codifique em letras maiúsculas, então, a menos que o para a maioria dos atributos neste livro, deixe-me dar uma
rebelde que existe em você não consiga resistir, eu não ideia dos tipos de valores que você encontrará à
recomendo. É visto como uma prática datada. medida que avança.
conteúdo (C e D). Em HTML5, o valor de um atributo pode escolhas E. Certifique-se de escrever enumeradas
C Aqui está um elemento rótulo (que associa um rótulo de texto a um campo de formulário) com um par simples atributo-valor.
Os atributos estão sempre localizados dentro da tag inicial de um elemento. É costume colocá-los entre aspas.
D Alguns elementos, como mostrado aqui, podem receber um ou mais atributos, cada um com seu próprio valor. A ordem
não é importante. Separe cada par atributo-valor do próximo com um espaço.
E Alguns atributos aceitam apenas valores específicos. Por exemplo, o atributo media no elemento link pode ser definido como all, screen
ou print, entre outros, mas você não pode simplesmente criar um valor para ele como faz com o
Atributo do Título .
14 Capítulo 1
Machine Translated by Google
Muitos atributos exigem um número para seu valor, elemento F. Na verdade, você pode criar uma
especialmente aqueles que descrevem tamanho e árvore genealógica de uma página da Web que mostre
comprimento. Um valor numérico nunca inclui unidades, os relacionamentos hierárquicos entre cada elemento
apenas o número. Quando as unidades são da página e que identifique cada elemento
aplicáveis, como na largura e na altura de uma imagem exclusivamente.
ou vídeo, elas são entendidas como pixels.
Essa estrutura subjacente semelhante a uma árvore
genealógica é um recurso importante do código HTML.
Alguns atributos, como href e src, fazem referência a Ele facilita tanto os elementos de estilo (sobre os quais
outros arquivos e, portanto, devem conter
você começará a aprender no Capítulo 7) quanto a
valores na forma de URL, ou Uniform Resource aplicação do comportamento JavaScript a eles.
Locator, o endereço exclusivo de um arquivo na Web.
É importante observar que quando os elementos
Você aprenderá mais sobre URLs
contêm outros elementos, cada elemento deve estar
na seção “URLs” deste capítulo.
adequadamente aninhado, ou seja, totalmente contido
em seu pai. Sempre que você usar uma tag final, ela
Pais e Filhos deverá corresponder à última tag inicial não fechada.
Se um elemento contiver outro, ele será Em outras palavras, primeiro abra o elemento 1,
considerado o pai do elemento incluído ou depois abra o elemento 2, depois feche o elemento
filho. Quaisquer elementos contidos no elemento filho 2 e depois feche o elemento 1 G.
são con-
descendentes siderados do pai externo
<artigo>
F O elemento article é pai dos elementos h1, img e p . Por outro lado, os elementos h1, img
e p são filhos (e descendentes) do artigo. O elemento p é pai dos elementos em e a . O em
e a são filhos do p e também descendentes (mas não filhos) do artigo. Por sua vez, o artigo é
seu ancestral.
G Os elementos devem estar adequadamente aninhados. Se você abrir p e depois em, deverá fechá -los antes de fechar p.
16 Capítulo 1
Machine Translated by Google
18 Capítulo 1
Machine Translated by Google
buckminster-fuller.html Buckminster_Fuller.html
Separe cada palavra com um travessão Os sublinhados não são tão bons para a
otimização de mecanismos de pesquisa quanto os traços
R Lembre-se de usar letras minúsculas nos nomes dos arquivos, separar as palavras com um travessão e adicionar a
extensão .html. A mistura de letras maiúsculas e minúsculas torna mais difícil para os visitantes digitarem o endereço
correto e encontrarem sua página.
Abordagem correta
http://www.yoursite.com/notable-architects/20th-century/buckminster-fuller.html
http://www.yoursite.com/NotableArchitects/20th_CENTURY/Buckminster_Fuller.html
Abordagem incorreta
B Use todas as letras minúsculas e travessões também para seus diretórios e pastas. A chave é a consistência. Se você
não usar letras maiúsculas, seus visitantes (e você) não precisarão perder tempo se perguntando “Agora, era B maiúsculo ou
minúsculo?”
20 Capítulo 1
Machine Translated by Google
URLs absolutos
URLs podem ser absolutos ou relativos. Um
URL absoluto mostra o caminho completo para o arquivo,
URLs relativos
Dentro da pasta atual, existe
Para lhe dar instruções sobre como chegar à um arquivo chamado “index.html”…
22 Capítulo 1
Machine Translated by Google
Principais conclusões
Os conceitos básicos de HTML e algumas práticas
recomendadas importantes fornecem a base para a
construção de sites eficazes. Vamos revisitar as principais
conclusões:
<!DOCTYPEhtml>
n O conteúdo de uma página vai para o elemento body .
As instruções destinadas principalmente ao
navegador e aos mecanismos de pesquisa estão
antes disso, principalmente na cabeça.
24 Capítulo 1
Machine Translated by Google
2
Trabalhando com Web
Arquivos de página
A inspiração de outros 39
Machine Translated by Google
26 Capítulo 2
Machine Translated by Google
Criando um novo
Página da Internet
28 Capítulo 2
Machine Translated by Google
30 Capítulo 2
Machine Translated by Google
32 Capítulo 2
Machine Translated by Google
Especificando um padrão
A Salve o arquivo como index.html para designar
o arquivo como a página padrão que deve ser aberta
Página ou página inicial
naquele diretório.
A maioria dos servidores Web possui um sistema para
reconhecer uma página padrão em cada pasta, com
base no nome do arquivo. Em quase todos os casos,
index.html é reconhecido como a página padrão A,
embora os servidores normalmente
procure nomes de arquivos como index.htm e
default.htm se index.html não existir. Se
seus visitantes digitam uma URL com um diretório, mas
não especificam um nome de arquivo, o arquivo padrão
é usado B.
34 Capítulo 2
Machine Translated by Google
Organizando arquivos
Antes de ter muitos arquivos, é uma boa ideia descobrir
onde colocá-los. É habitual (mas não obrigatório)
criar uma pasta para cada seção principal
3. É comum criar uma pasta de nível superior para as B No Windows, na área de trabalho ou no Windows
imagens do seu site e, opcionalmente, Explorer, clique com o botão direito e escolha Novo > Pasta.
adicionar subpastas para ajudá-lo a organizar
suas imagens por seção ou outros critérios.
Outra abordagem é criar uma pasta de nível
superior chamada Assets (ou algo semelhante)
e colocar sua pasta de imagens nela , junto com
pastas para outros ativos, como vídeo, folhas
de estilo e assim por diante. (Você aprenderá
sobre folhas de estilo a partir do Capítulo 7.)
36 Capítulo 2
Machine Translated by Google
1. Abra um navegador.
38 Capítulo 2
Machine Translated by Google
A inspiração
de outros
Uma das maneiras mais fáceis de expandir sua fluência
em HTML é observar como outros desenvolvedores e
designers criaram suas páginas. Felizmente, o código
HTML é fácil de visualizar e aprender. No entanto, o
conteúdo de texto, gráficos, sons, vídeos, folhas de estilo
R Todos os navegadores de desktop possuem um comando de
e outros arquivos externos podem estar protegidos por direitos
menu que permite visualizar o código HTML de uma página.
O nome varia de View Source para Page Source (no Firefox,
autorais. Como regra geral, use páginas de outras
mostrado) para nomes semelhantes. (No Chrome, é Ferramentas pessoas como inspiração para o seu HTML e, a seguir, crie
> Exibir código-fonte da página.)
seu próprio conteúdo.
Eles são apenas um indicador que o Chrome inclui em sua janela Exibir
código-fonte.
40 Capítulo 2
Machine Translated by Google
3
HTML básico
Estrutura
Este capítulo aborda os elementos HTML necessários
para estabelecer a base e a estrutura de seus Neste capítulo
documentos. Ou seja, o esboço e os recipientes
Iniciando sua página da web 43
semânticos primários do seu conteúdo.
Criando um título 46
Especificando um aparte 75
n Aplicando o atributo title a
elementos 80
Criando um rodapé
Adicionando comentários 96
Machine Translated by Google
42 Capítulo 3
Machine Translated by Google
n O elemento principal
</body>
</html> n A codificação de caracteres em um meta
elemento
n O elemento corpo
10. Digite </html> para finalizar sua página. relacionados ao conteúdo do HTML, alguns dos quais
você verá antecipadamente neste capítulo.
Esse é um número bastante saudável de etapas, mas
como todas as suas páginas começarão dessa maneira,
você pode usar uma única página HTML como
modelo para iniciar cada página, evitando digitar. Na
verdade, a maioria dos editores de código permite
especificar o código inicial para cada nova página,
tornando isso ainda mais fácil. Se você não encontrar o
menu Configurações ou Preferências em seu editor,
pesquise na seção Ajuda.
44 Capítulo 3
Machine Translated by Google
O HTML5 DOCTYPE garante Certifique-se de que seu editor de código esteja configurado
os navegadores são renderizados em um modo para salvar arquivos como UTF-8 para corresponder
confiável e instruem os validadores HTML a à codificação de caracteres especificada no código por <meta
julgar seu código em relação aos elementos e à sintaxe permitidos charset="UTF-8"
pelo HTML5. /> A. (Ou se você especificou um
Validadores HTML são discutidos no Capítulo 20. conjunto de caracteres diferente, salve seus arquivos
nele.) Nem todos os editores salvarão suas páginas
O DOCTYPE do HTML5 não faz distinção entre maiúsculas e minúsculas
como UTF-8 por padrão, mas a maioria permite que
positivo. Por exemplo, alguns optam por digitá-lo você para escolher a codificação em um menu ou
como <!doctype html>, mas provavelmente é mais comum painel (veja “Salvar suas páginas da Web” no
usar <!DOCTYPE html> A. Capítulo 2). Sem a configuração UTF-8 em vigor, você
poderá ocasionalmente ver caracteres engraçados em
O elemento html , que segue o DOCTYPE, seu conteúdo, em vez de uma letra pretendida, como um i
deve incluir todos os outros elementos da sua página A. acentuado ou um n com um til (~).
Na época do HTML 4 e do XHTML 1.0, havia vários DOCTYPEs para escolher, cada um significando a versão do
HTML e se estava no modo Transicional ou Estrito. Você invariavelmente tinha que copiá-los de algum outro lugar
porque eles eram complicados demais para serem lembrados.
Por exemplo, aqui está o DOCTYPE para documentos XHTML Strict.
Felizmente, todos os navegadores - antigos e novos - entendem o DOCTYPE do HTML5, então você pode segui-lo
em todas as suas páginas e esquecer que as outras existiram. (A única ocasião em que eles podem ser relevantes é
se você herdar um site antigo e o proprietário não permitir que você altere o DOCTYPE para a versão HTML5.)
C O título também
aparece no painel
Histórico do
visitante
(mostrado), na lista
de Favoritos e na lista de Favoritos.
46 Capítulo 3
Machine Translated by Google
48 Capítulo 3
Machine Translated by Google
B Embora todos os títulos sejam exibidos em Use os níveis de título de forma consistente
negrito por padrão, h1 está em uma fonte maior em todo o site para uma melhor experiência
que h2, que é maior que h3, e assim por diante. do usuário.
Mas como você sabe, a aparência não é relevante
ao decidir qual nível de título usar. Você pode alterar
Você pode adicionar um id a um título se
a apresentação com CSS.
quiser criar um link diretamente para ele (veja
“Criando Âncoras” no Capítulo 6).
Entendimento
Documento HTML5
Contorno
Na seção anterior, você aprendeu que os
elementos de títulos, h1–h6, contribuem
para o esboço da sua página HTML. Você
vai se aprofundar mais nesta seção para
aprender como alguns elementos exclusivos do
HTML5 também afetam o contorno.
Uma nota sintática antes de continuar.
Na discussão e nas páginas a seguir, usarei
frequentemente “seção” como um termo
genérico para significar uma parte distinta de
uma página, em oposição ao elemento de
seção (sobre o qual você aprenderá)
especificamente. Quando me refiro ao
elemento de seção , a palavra terá o estilo
de código, assim como nesta frase.
OK, continuando.
Então, você sabe que cada documento HTML
tem um esboço subjacente, que é como um
índice analítico, conforme definido pelos
elementos do título. Agora, o esboço não é
algo exibido explicitamente em sua página
- embora os navegadores possam um dia
fornecer um meio de vê-lo - mas, como
acontece com toda semântica, é significativo
para mecanismos de pesquisa e leitores de tela,
que usam o esboço para colete a estrutura
da sua página e forneça as informações
aos usuários.
50 Capítulo 3
Machine Translated by Google
1. Configurando
2. Recursos básicos
1. Reprodução de vídeo
3. Recursos avançados
2. Configurando
3. Recursos básicos
4. Reprodução de vídeo
5. Recursos avançados
52 Capítulo 3
Machine Translated by Google
D Exemplo de esboço com semântica explícita Dos esboços com o mesmo significado (ou
seja, Versões 1 e 2), ambos são válidos
...
HTML5, mas o segundo é preferível porque
<corpo> os elementos da seção são mais
<artigo>
<h1>Guia do usuário do produto</h1> explícito semanticamente. Na prática, você poderia
<seção> envolver um elemento de artigo em todo o
<h1>Configurando</h1> conteúdo da Versão 2, já que isso é ainda mais
</seção>
apropriado neste contexto (embora o esboço
<seção>
resultante seja um pouco diferente).
<h1>Recursos básicos</h1> A Figura D mostra um exemplo.
<seção>
Não se esqueça também de que cada título será
<h1>Reprodução de vídeo</h1>
</seção>
seguido por textos, imagens e outros conteúdos
</seção> relacionados, sobre os quais você aprenderá à
medida que avança. Mas, por enquanto, deixei
<seção> tudo isso de fora para que você possa se concentrar
<h1>Recursos avançados</h1>
em aprender sobre títulos e contornos.
</seção>
</artigo>
</body> Fazendo o que puder
</html>
no ecossistema atual
Mas espere! Há outro ajuste que você deve fazer
no código. Lembre-se de quando
Eu disse para “manter esse pensamento; em breve
vou explicar porque você deve limitar seus h1s”?
Embora seja verdade que cada elemento de
conteúdo da seção (artigo, aparte, navegação e
seção) possa começar sua hierarquia de títulos
com h1, isso não é obrigatório. Na verdade, em
um futuro próximo, é melhor começar cada um
com um h2 ou menos se eles representarem
um subtítulo de um h1 já existente para um
pedaço de conteúdo relacionado.
54 Capítulo 3
Machine Translated by Google
Embrulhando-o
Sugiro reler esta discussão sobre o esboço do
documento HTML5 se alguma coisa não for bem
compreendida. Não é tão complicado quanto
pode parecer. Eu recomendo fortemente que
você crie uma variedade de páginas de teste e
compare os resultados no HTML5 Outliner para
ter uma ideia melhor de como o algoritmo de
estrutura de tópicos funciona. Use o Outliner
também durante o trabalho do projeto, para
garantir que sua estrutura esteja conforme
planejado. Primeiro, certifique-se de validar suas
páginas HTML5 em http://validator.nu/ ou http://
validator.w3.org/ para verificar se há erros de
codificação (consulte “Validando seu código” no Capítulo 20).
56 Capítulo 3
Machine Translated by Google
Hoje em dia, o conteúdo é compartilhado entre sites mais do que nunca. Você tem sites de agregação de notícias, blogs com
feeds RSS, feeds do Twitter e assim por diante. Como você aprenderá em “Criando um Artigo”, o artigo
O elemento representa uma composição independente que pode ser distribuída (não deve ser, apenas que seria apropriado fazê-
lo).
...
<h2>Notícias de toda a Web</h2>
<artigo>
<h1>Adolescente local prefere vinil ao digital</h1>
<p>Uma adolescente local substituiu todas as suas faixas digitais por vinil. “É ÿ legal”, disse
ela, oficialmente.</p>
Portanto, mesmo que o título Local Teen tenha uma classificação mais alta (h1) do que o h2 abaixo, é um subtítulo do h2
porque está contido em um artigo sob esse título. E o Hooked h2 é um sub-subtítulo do News h2, não em pé de igualdade.
O título Notícias pode ser h3, h4 ou qualquer nível de título, e o contorno seria exatamente o mesmo. O mesmo se aplica a Local
Teen e Hooked, desde que Local Teen tenha a classificação mais alta.
</body>
</html>
58 Capítulo 3
Machine Translated by Google
Página Comum
Construções
Sem dúvida você já visitou dezenas de sites
organizados como o mostrado em A. Retirando o
conteúdo, você pode ver que existem quatro
componentes principais: um cabeçalho com
navegação, um artigo na área de conteúdo principal,
um barra lateral com informações tangenciais e
rodapé B.
60 Capítulo 3
Machine Translated by Google
2. Digite <cabeçalho>.
C Esta página tem dois cabeçalhos: um que serve como cabeçalho de toda a página e outro como cabeçalho
para o elemento principal do artigo Perguntas frequentes . Observe que o primeiro não tem títulos h1–h6 , mas o
segundo tem. Consulte a última dica desta seção para obter informações sobre o atributo role opcional mostrado
no primeiro cabeçalho.
...
<body>
<header role="banner"> ...
[logotipo do site, navegação, etc.] ... </header>
<artigo>
<cabeçalho>
<ul>
<li><a href="#answer1">Qual é a sua política de devolução?</
a><li> <li><a href="#answer2">Como encontro um local?</a ><li>
...
</ul>
</nav>
</header>
<article id="answer2">
<h2>Como encontro um local?</h2>
<p> ... [resposta] ... </p> </
article>
...
</article> <!-- fim do artigo pai -->
</body>
</html>
62 Capítulo 3
Machine Translated by Google
4. Digite </header>.
</header>
</body>
</html>
64 Capítulo 3
Machine Translated by Google
Como mencionei anteriormente, só porque você tem um grupo de links em sua página não significa que ele deva estar
contido em uma navegação.
O exemplo de página de notícias a seguir inclui quatro listas de links, dos quais apenas dois são considerados
importantes o suficiente para justificar serem agrupados em uma navegação. (Como você verá, abreviei partes do
código.)
...
<corpo>
<cabeçalho>
<nenhum>
</nenhum>
</header>
<div id="principal">
<à parte>
<h1>Outras histórias</h1>
</artigo>
</div>
66 Capítulo 3
Machine Translated by Google
</aside>
<rodapé>
</body>
</html>
A navegação secundária no aparte (veja “Especificando um aparte”) permite ao usuário navegar para outras páginas
no diretório Arts & Entertainment, constituindo assim uma importante seção de navegação da página. Porém, as Outras
Histórias além dos links não.
Então, como você decide quando um grupo de links merece navegação? Em última análise, é um julgamento baseado
na organização do seu conteúdo. No mínimo, marque a navegação global do seu site (ou seja, o que permite aos
usuários acessar as seções do site) com nav. Freqüentemente, mas nem sempre, essa navegação específica
aparece dentro de um elemento de cabeçalho no nível da página (consulte “Criando um cabeçalho”).
</body>
</html>
68 Capítulo 3
Machine Translated by Google
1. Digite <artigo>.
2. Digite o conteúdo do artigo, que
pode incluir qualquer número de elementos,
como parágrafos, listas, áudio, vídeo,
imagens, figuras e muito mais.
3. Digite </artigo>.
<artigo>
<endereço>
</endereço>
</footer>
</artigo>
Observe o uso dos elementos rodapé e endereço (veja as discussões sobre eles neste capítulo e no Capítulo 4,
respectivamente). Aqui, o endereço se aplica apenas ao artigo pai (aquele mostrado), não à página ou a quaisquer
artigos aninhados nesse artigo, como os comentários do leitor no Exemplo 2.
O Exemplo 2 demonstra elementos de artigo aninhados na forma de comentários enviados pelo usuário ao
artigo pai, exatamente como você vê na seção de comentários de blogs ou sites de notícias. Também mostra um
uso para o elemento de seção (veja “Definindo uma Seção”) e o elemento de tempo , abordado no Capítulo 4.
70 Capítulo 3
Machine Translated by Google
<rodapé>
</footer>
<seção>
<h2>Comentários do leitor</h2>
<artigo>
</artigo>
<artigo>
</artigo>
</seção>
</artigo>
Estas são apenas algumas maneiras mais comuns de aproveitar o artigo e seus elementos complementares.
<seção>
72 Capítulo 3
Machine Translated by Google
Se você ainda acha que o artigo e a seção às vezes parecem muito semelhantes, não se preocupe, você não está
sozinho. Mesmo desenvolvedores experientes às vezes aplicam esses dois elementos de maneira diferente.
Conforme mencionado no Capítulo 1, nem sempre há uma escolha certa e uma escolha errada quando se trata de
marcar seu conteúdo, apenas na maioria das vezes. As outras vezes se resumem a decisões pessoais sobre quais
elementos HTML você acha que melhor descrevem seu conteúdo.
Portanto, pense cuidadosamente ao decidir entre artigo e seção, mas não se preocupe se você acertará sempre. Às
vezes é um pouco subjetivo e, de qualquer forma, sua página continuará funcionando. Além disso, ninguém vai bater à sua
porta no meio da noite.
No seguinte exemplo ligeiramente modificado da especificação HTML5, você vê a seção usada sem artigo.
(Você também terá uma visão antecipada das listas ordenadas em ação. Saiba mais sobre ol e outros
elementos da lista no Capítulo 15.)
...
<body>
<h1>Programa de Pós-Graduação</h1>
<seção>
<h2>Cerimônia</h2>
<ol>
<li>Procissão de Abertura</li>
<li>Discurso do orador da turma</li>
<li>Discurso do Presidente da Turma</
li> <li>Apresentação dos Diplomas</li>
<li>Discurso de encerramento do Diretor</li>
</ol>
</seção>
<seção>
</body>
</html>
74 Capítulo 3
Machine Translated by Google
...
<corpo>
<cabeçalho>
<nav role="navegação">
... [ul com links] ...
</nenhum>
</header>
<artigo>
<h1 id="gaudi">Arquiteto de Barcelona</h1>
... [parágrafos introdutórios] ...
<seção>
<h2 id="sagrada-familia" lang="es">A Sagrada Família</h2>
... [imagem e parágrafo] ...
</seção>
<seção>
<h2 id="park-guell">Parque Guell</h2>
... [outra imagem e parágrafos] ...
</seção>
</artigo>
<aside role="complementar">
<h1>Maravilhas Arquitetônicas de Barcelona</h1>
<p>Barcelona é o lar de muitas maravilhas arquitetônicas além da obra de Gaudí. Alguns deles ÿ incluem:</p>
<ul>
<li lang="es">Arco do Triunfo</li>
<li>A catedral <span lang="es">(La Seu)</li>
<li lang="es">Grande Teatro do Liceu</li>
<li lang="es">Pavilhão Mies van der Rohe</li>
<li lang="es">Santa Maria do Mar</li>
</ul>
</body>
</html>
76 Capítulo 3
Machine Translated by Google
Consulte “Melhorando a
acessibilidade com ARIA” para saber
como você pode usar role="complementary" com aparte.
...
<corpo>
<artigo>
</body>
</html>
Esse mesmo artigo pode incluir uma citação extraída do texto do artigo. Isso também seria um aparte. Ou poderia
ter à parte “Histórias Relacionadas” contendo uma lista de links para outros ensaios sobre o país ou região circundante
(Indonésia, Austrália e assim por diante). Alternativamente, esse lado poderia estar em uma coluna de página diferente,
em vez de aninhado no artigo.
Você já viu um exemplo de aparte em uma barra lateral (A e C). Agora, vamos considerar um exemplo de portfólio
de design ou conjunto de estudos de caso, em que cada página HTML se concentra em um único projeto e você fornece
links (aninhados em uma navegação) para as outras páginas do projeto em uma coluna adjacente (controlada por CSS). ,
não simplesmente em virtude de organizar o código conforme mostrado no Exemplo 2).
78 Capítulo 3
Machine Translated by Google
...
<corpo>
<!-- conteúdo principal da página -->
<artigo>
<à parte>
<h1>Outros Projetos</h1>
<nenhum>
<ul>
...
</ul>
</nenhum>
</aside>
</body>
</html>
Seria perfeitamente adequado aninhar isso também no artigo do projeto , uma vez que eles estão relacionados.
<seção>
<h2 id="park-guell">Parque Guell</h2>
... [outra imagem e parágrafos] ...
</seção>
</artigo>
<aside role="complementar">
<h1>Maravilhas arquitetônicas de Barcelona ÿ </
h1>
... [resto à parte] ...
</aside>
<rodapé>
<p><small>© Direitos autorais 2011</small>
ÿ </p>
</footer>
</body>
</html>
80 Capítulo 3
Machine Translated by Google
2. Digite <rodapé>.
4. Digite </footer>.
B O próprio elemento de rodapé não impõe nenhuma Um rodapé não precisa estar no final do
formatação ao texto por padrão. Aqui, o aviso de elemento que o contém, embora geralmente esteja.
copyright é menor que o texto normal porque está
aninhado em um pequeno elemento para representar
É inválido aninhar um cabeçalho ou outro
semanticamente a impressão legal (consulte o Capítulo 4).
rodapé dentro de um rodapé. Além disso, você
Como tudo mais, você pode alterar o tamanho da fonte
com CSS. não pode aninhar um rodapé em um cabeçalho ou endereço
elemento.
Consulte “Melhorando a
acessibilidade com ARIA” para saber
como você pode usar role="contentinfo" com
rodapé em uma determinada circunstância. Seria
apropriado incluí-lo no rodapé em A porque
representa o rodapé de toda a página, mas omiti
para evitar dar a impressão de que role="contentinfo"
é adequado para todos os rodapés
elementos. Consulte “Outros exemplos de rodapé ”
para obter um exemplo que mostra a distinção e
usa a função corretamente.
um pequeno exemplo de rodapé para a página inteira (A e B). Aqui está outro rodapé de página, mas com mais conteúdo.
...
<corpo>
... [cabeçalho e conteúdo da página] ...
<!-- este é um rodapé de página porque body é seu ancestral mais próximo -->
<footer role="contentinfo">
<p><small>© Copyright 2011 The Corporation, Inc.</small></p>
<ul>
<li><a href="terms-of-use.html">Termos de Uso</a></li>
<li><a href="privacy-policy.html">Política de Privacidade</a></li>
</ul>
</footer>
</body>
</html>
O próximo exemplo demonstra um rodapé no contexto de uma seção de página (neste caso, um artigo) e um segundo
rodapé para toda a página. (Veja “Mais exemplos de artigos ” para uma explicação do escopo do elemento de endereço aqui.)
<corpo>
...
<artigo>
82 Capítulo 3
Machine Translated by Google
<rodapé>
<endereço>
</endereço>
</footer>
</artigo>
</footer>
</body>
</html>
O id="footer-page" (você pode especificar qualquer id válido) no rodapé da página é opcional e serve
apenas para diferenciá-lo do outro rodapé para controle de estilo. Observe que apenas o rodapé da página
recebe o opcional role="contentinfo". Consulte “Melhorando a acessibilidade com ARIA” para saber mais
sobre esta função.
</seção>
</artigo>
<aside role="complementar">
<h1>Maravilhas arquitetônicas de ÿ
Barcelona</h1>
... [resto à parte] ...
</aside>
<rodapé>
... [direito autoral] ...
</footer>
</div>
</body>
</html>
84 Capítulo 3
Machine Translated by Google
É por isso que o HTML5 introduziu cabeçalho, rodapé, artigo, seção, lado e navegação. Esses tipos de blocos de
construção eram tão predominantes nas páginas da Web que mereciam seus próprios elementos com
significado. div não desaparece no HTML5, você terá menos ocasiões para usá-lo do que no passado.
Você já viu um: envolver uma página inteira com um contêiner para fins de estilo (B e C).
Como consegui o layout de duas colunas com div? Apliquei um pouco de CSS ao elemento article para exibi-lo
como coluna um e ao elemento side para exibi-lo como coluna dois. (Veja o Capítulo 7 para começar a aprender CSS,
e veja o Capítulo 11 para layouts com CSS.)
Entretanto, na maior parte (se não na maior parte) do tempo, cada uma de suas colunas tem mais de uma seção de
conteúdo. Por exemplo, talvez você queira outro artigo (ou seção, ou à parte, e assim por diante) na área de conteúdo
principal abaixo do primeiro artigo. E talvez você queira um aparte adicional na segunda coluna, digamos, com uma
lista de links para outros sites sobre Gaudí. Ou talvez você queira outro tipo de elemento nessa coluna.
Você precisaria agrupar o conteúdo que deseja representar cada coluna em um div E e depois estilizar esse div de
acordo. (Se você estava pensando que a seção seria uma opção, ela não se destina a ser um contêiner genérico para
estilo.) Forneci um diagrama F para ajudá-lo a visualizar a relação entre o código E e um possível layout CSS. Tenha
em mente que é apenas uma possibilidade de layout para este HTML; CSS é bastante poderoso.
Portanto, é muito comum ter uma div em torno de cada grupo de conteúdo que você deseja estilizar como uma
coluna (claro, você pode fazer mais de duas). Em termos do que há neles , isso pode variar muito, com base no
conteúdo que você deseja em suas páginas. Não se esqueça disso, pois seus contêineres semânticos primários para
seções de conteúdo, artigo, seção, aparte e navegação podem ir a praticamente qualquer lugar. Assim como o
cabeçalho e o rodapé, como você aprendeu neste capítulo. Não dê muita importância ao fato de que o exemplo (E e F)
mostra apenas artigos na área de conteúdo principal e apartes na barra lateral.
Porém, para ter certeza, div deve ser seu último recurso como contêiner porque não tem valor semântico.
Na maioria das vezes, será correto usar cabeçalho , rodapé, artigo, seção, lado e, possivelmente, navegação . No
entanto, não use um desses apenas para evitar div se não for semanticamente apropriado fazê-lo. div tem seu
lugar, você só quer limitar seu uso.
Dito isto, há uma situação válida em que não há problema em usar div para todos (ou a maioria, depende de você)
contêineres em uma página, em vez dos novos elementos HTML 5. Consulte “Estilizando elementos HTML5 em
navegadores mais antigos” no Capítulo 11 para obter mais informações.
86 Capítulo 3
Machine Translated by Google
...
<corpo>
<artigo>
...
</artigo>
<à parte>
...
</aside>
<rodapé>
...
</footer>
</div>
<!-- contêiner da página final -->
</body>
</html>
</header>
WAI-ARIA (Web Accessibility Initiative's
Accessible Rich Internet Applications), ou <!-- Coluna Um quando CSS aplicado -->
ARIA, é uma especificação que se declara <div id="content" role="main">
“uma tecnologia de ponte”. Ou seja, preenche <artigo>
...
lacunas semânticas com atributos até que
</artigo>
linguagens como HTML forneçam sua própria
semântica equivalente. <artigo>
...
Por exemplo, qual marcação HTML você usaria
</artigo>
para permitir que um leitor de tela soubesse como
ir (ou passar) do conteúdo principal da sua ... [mais seções conforme desejado] ...
página? Ou para uma caixa de pesquisa? Como </div>
você aprenderá, há alguma sobreposição entre <!-- fim da coluna um -->
88 Capítulo 3
Machine Translated by Google
n papel = "banner"
n role="navegação"
n papel = "principal"
n role="complementar"
Uma seção de apoio do documento,
concebida para complementar o conteúdo
principal. . . mas isso continua significando
útil quando separado do principal
contente.
n role="contentinfo"
90 Capítulo 3
Machine Translated by Google
continua na página 94
92 Capítulo 3
Machine Translated by Google
A Adicione um atributo id exclusivo a um elemento para identificá-lo para formatação, links ou comportamento
JavaScript posterior. Adicione um atributo de classe a um ou mais elementos para poder formatá-los todos de uma só vez.
Por exemplo, as classes arquiteto e projeto poderiam ser aplicadas ao conteúdo sobre outros arquitetos para uma
formatação consistente. Os links na navegação apontam para os ids em h1 e h2s (veja o Capítulo 6 para obter mais
informações sobre links). Os outros ids são para formatação. Consulte “Criando Containers Genéricos” para obter mais
informações sobre ids, bem como outro exemplo que os utiliza. Os atributos id e class não afetam a aparência de um
elemento, a menos que o CSS faça referência a eles.
...
<corpo>
<div id="container">
<header>
<nav role="navigation">
<ul id="toc">
<li><a href="#gaudi">Arquiteto de Barcelona</a></li>
<li><a href="#sagrada-familia " lang="es">A Sagrada Família</a></li>
<li><a href="#park-guell">Parque Guell</a></li>
</ul>
</
nav> </header>
<p>Os incríveis edifícios de Antoni Gaudí trazem milhões de turistas a Barcelona todos os anos.</p>
...
<section class="project">
<h2 id="sagrada-familia" lang="es">A Sagrada Família</h2>
...
</seção>
<section class="project">
<h2 id="park-guell">Parque Guell</h2>
...
</seção> </
artigo>
...
</div>
</body>
</html>
94 Capítulo 3
Machine Translated by Google
Barcelona</a></li>
<li> <a href="#sagrada-familia" ÿ Para adicionar um título aos elementos
lang="es"> A Sagrada Família de uma página da web:
ÿ </a></li>
<li><a href="#park-guell">Parque No elemento HTML do item que você deseja rotular com
ÿ Guell</a></li>
título, adicione title="label", onde rótulo é o breve texto
</ul>
descritivo que deve aparecer na dica de ferramenta
</nenhum>
Adicionando comentários
Você pode adicionar comentários aos seus e mais A. Esses comentários só aparecem
documentos HTML para observar onde as seções quando o documento é aberto com um editor de
começam ou terminam, para comentar para você texto ou através da opção Exibir código-fonte do
mesmo (ou para futuros editores) a finalidade de um navegador. Eles são invisíveis para os visitantes no
navegador, caso contrário B.
determinado trecho de código, para impedir a exibição do conteúdo,
A Este exemplo inclui quatro comentários. Dois se combinam para marcar o início e o fim do artigo. Outro “comenta”
o primeiro parágrafo para que não seja exibido na página (se você deseja que o parágrafo seja removido a longo
prazo, seria melhor excluí-lo do HTML). O último comentário é um lembrete para adicionar mais conteúdo antes de
colocar a página no site ativo. Apenas certifique-se de remover quaisquer comentários temporários como “tarefas”
antes de colocar sua página no ar, caso os visitantes vejam seu código. “Criando Containers Genéricos” tem mais
exemplos de comentários.
...
<corpo>
...
<p>O inconformismo de Gaudí, já visível na sua adolescência, aliado à sua tranquila ÿ mas firme
devoção à Igreja, constituiu uma base única para os seus pensamentos e ideias. Sua ÿ busca pela
simplicidade...</p>
<seção class="projeto">
<h2 id="sagrada-familia" lang="es">A Sagrada Família</h2>
...
</seção>
<seção class="projeto">
<h2 id="park-guell">Parque Guell</h2>
...
</seção>
</artigo>
<!-- fim do artigo -->
<!--
O QUE FAZER: Adicione outro artigo aqui sobre outros edifícios famosos antes de colocar a página no ar.
-->
...
</body>
</html>
96 Capítulo 3
Machine Translated by Google
Para adicionar um
comentário à sua página HTML:
1. No seu documento HTML, onde deseja inserir
um comentário, digite <!--.
2. Digite os comentários.