Traduzido do Inglês para o Português - www.onlinedoctranslator.

com

1
Criação de página da Web
Blocos
Embora as páginas da Web tenham se tornado cada vez
mais complexas, sua estrutura subjacente permanece Neste capítulo
notavelmente simples. A primeira coisa que você deve
saber é que é impossível criar uma página da Web sem Uma página HTML básica 3
HTML. Como você aprenderá, o HTML abriga seu conteúdo HTML Semântico: Marcação com Significado 6
e descreve seu significado. Por sua vez, os navegadores da
Marcação: Elementos, Atributos e Valores O 13
Web renderizam seu conteúdo encapsulado em HTML para
os usuários. Conteúdo de Texto de uma Página Web 16

Uma página da Web é composta principalmente de três Links, imagens e outros não textuais
componentes: Contente 17
- Conteúdo do texto:O texto simples que Nomes de arquivo 19
aparece na página para informar os visitantes URLs 20
sobre seus negócios, férias em família,
Principais conclusões 24
produtos ou qualquer que seja o foco de sua
página.

- Referências a outros arquivos:Eles carregam

itens como imagens, áudio, vídeo e arquivos
SVG, e são vinculados a outras páginas e
recursos HTML, bem como a folhas de estilo
(que controlam o layout da página) e arquivos
JavaScript (que adicionam comportamento à
sua página).

- Marcação:Os elementos HTML que

descrevem seu conteúdo de texto e fazem
as referências funcionarem. (Omem HTML
significamarcação.)
É importante observar que cada um desses sobre o idioma principal do conteúdo (inglês,
componentes em uma página da 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 o guiará por uma página HTML
visualizadas em praticamente qualquer navegador
básica, discutirá algumas práticas recomendadas
em qualquer plataforma, seja desktop, celular, tablet
e 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 em relação a outro, mas tudo bem.
Nota: Conforme mencionado na introdução,
O importante como primeiro passo é tornar o
eu usoHTMLpara se referir à linguagem em
conteúdo acessível a todos os usuários, e o HTML
geral. Para os casos em que estou
permite isso.
destacando características especiais
exclusivas de uma versão da linguagem,
Além dos três componentes dos quais uma página da
usarei o nome individual. Por exemplo, "
Web é composta principalmente, uma página também
HTML5 introduz vários novos elementos 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 veem
anteriormente noHTML 4eXHTML 1.0.” Para
explicitamente e que se destina principalmente a
obter mais detalhes, consulte “Como este
navegadores e mecanismos de pesquisa. Isso pode
livro funciona” na introdução.
incluir informações

2Capítulo 1
 Uma página HTML básica
Vamos dar uma olhada em uma página HTML
básica para fornecer contexto para o que está por
vir neste capítulo e além. FiguraAilustra como um
navegador de desktop normalmente renderiza o
código HTML emB. Você aprenderá algumas
noções básicas sobre o códigoB, mas não se
preocupe se você não entender tudo agora. Isso é
apenas para lhe dar uma amostra do HTML. Você
tem o resto do livro para aprender mais sobre
isso.

Você provavelmente pode adivinhar o que está

AUma renderização padrão típica da página. Embora isso
mostre a página no Firefox, a página é exibida de maneira
semelhante em outros navegadores.
acontecendo no código, especialmente no
corposeção. Primeiro vamos olhar para a
parte antes docorpo.

BAqui 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. Como demonstrado emA, o HTML ao redor do conteúdo do texto não aparecerá quando
você visualizar 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 linha. Isso não é obrigatório e
não afeta a renderização da página.

<!DOCTYPE html>
<html lang="en">
<cabeça>
<meta charset="utf-8" />
<título>Linho azul (Linum lewisii)</title>
</head>
<corpo>
<artigo>
<h1>O efêmero linho azul</h1>

<img src="blueflax.jpg" width="300" height="175" alt="Blue Linho (Linum lewisii)" />

<p>estou continuamente<em>espantado</em>no belo, delicado<a href="http://

- pt.wikipedia.org/wiki/Linum_lewisii" rel="external" title="Saiba mais sobre o Azul
- Linho">linho azul</a>que de alguma forma tomou conta do meu jardim. Eles estão inundados de cores a cada
- manhã, mas nem uma única flor permanece à tarde. Eles são a própria definição
- de efêmero.</p>
</artigo>
</body>
</html>

Blocos de construção de páginas da Web3

Tudo acima do<corpo>start tag é a informação COtítuloO texto do elemento é a única parte da área
instrucional para navegadores e mecanismos superior de um documento HTML que o usuário vê. O
de busca mencionados anteriormenteC. Cada resto são informações sobre a página para
navegadores e mecanismos de pesquisa.
página começa com a declaração DOCTYPE,
que informa ao navegador a versão HTML da <!DOCTYPE html>
página. <html lang="en">
<cabeça>
Você deve sempre usar o DOCTYPE do HTML5, que <meta charset="utf-8" />
é<!DOCTYPE html>. O caso do texto não importa, <title>O Efêmero Linho Azul
mas é mais comum usar DOCTYPE em letras - (Linum lewisii)</title>
</head>
maiúsculas. Independentemente disso, sempre
inclua o DOCTYPE em suas páginas. (Consulte 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

continuar através</cabeça>são invisíveis para
os usuários com uma exceção: o texto entre
<título>e</título>—Blue Flax (Linum lewisii)—aparece
como o título na parte superior da janela do
navegador e em uma guia do navegadorB. Além
disso, normalmente é o nome padrão de um
marcador ou favorito do navegador e é uma
informação valiosa para os mecanismos de pesquisa.
O Capítulo 3 explica o que fazem as outras partes do
segmento superior de uma página.

4Capítulo 1
DO conteúdo de uma página existe entre as tags Enquanto isso, o conteúdo da sua página, ou seja,
inicial e final docorpoelemento. o documento termina o queévisível para os usuários — fica entre
no</html>.
<corpo>e</corpo>. finalmente, o</html>
<!DOCTYPE html> end tag sinaliza o fim da páginaD.
<html lang="en"> O recuo do código não tem absolutamente
. . . [cabeçalho do documento] . . .
nenhuma influência sobre se o código é HTML
<corpo>
<artigo> válido. Também não afeta como o conteúdo é
<h1>O efêmero linho azul</h1> exibido no navegador (opréelemento, sobre o qual
você aprenderá no Capítulo 4, é a única exceção).
<img src="blueflax.jpg" width="300" No entanto, é comum recuar o código que está
- height="175" alt="Linho Azul (Linum
aninhado em um elemento pai para facilitar a
- lewisii)" />
compreensão da hierarquia dos elementos
<p>Estou sempre <em>impressionado</em> conforme você lê o código. Você aprenderá mais
- no belo, delicado sobre pais e filhos mais adiante neste capítulo.
- <a href="http://en.wikipedia.org/ Você também aprenderá com mais detalhes sobre
- wiki/Linum_lewisii" rel="externo"
a renderização padrão do navegador.
- title="Saiba mais sobre o Blue Flax">
- Blue Flax</a> que de alguma forma levou
- manter em meu jardim. Eles estão inundados
Primeiro, vamos discutir o que significa
- em cores todas as manhãs, mas não um
escrever HTML semântico e por que ele é a
-única flor permanece pelo
-tarde. eles são os mesmos base de um Web site eficaz.
-definição de efêmero.</p>
</artigo>
</body>
</html>

Blocos de construção de páginas da Web5

HTML semântico:
Marcação com Significado
HTML é um sistema inteligente de inclusão de
informações sobre o conteúdo em um documento
de texto. Essas informações, chamadas de
marcação, descrevem osignificadodo conteúdo, ou
seja, osemântica.Você já viu alguns exemplos em
nossa página HTML básica, como opelemento que
marca o conteúdo do parágrafo.
HTML faznãodefinir como o conteúdo deve
aparecer em um navegador; esse é o papel do
CSS (Cascading Style Sheets). O HTML5 enfatiza
essa distinção mais do que qualquer versão
anterior do HTML. Está no cerne da linguagem.
Você deve estar se perguntando por que, se for esse o
caso, algum texto na página HTML básicaA
parece maior do que outro texto ou está em
negrito ou itálicoB.
Ótima pergunta. A razão é que todo navegador da
Web possui um arquivo CSS integrado (umfolha de
estilos)que determina como cada elemento HTML é
exibido por padrão, a menos que você crie o seu
próprio que o substitua. A apresentação padrão
varia ligeiramente de navegador para navegador,
mas no geral é bastante consistente. Mais
importante, a estrutura subjacente do conteúdo e
o significado definido pelo seu HTML permanecem
os mesmos.
6Capítulo 1
AO conteúdo da nossa página básica mais um segundo
parágrafo adicionado no final. Os elementos HTML não ditam
como o conteúdo deve aparecer, apenas o que eles
significam. Em vez disso, a folha de estilo integrada de cada
navegador determina como o conteúdo é exibido por padrão
B.
...
<corpo>
<artigo>
<h1>O efêmero linho azul</h1>
<img src="blueflax.jpg" width="300"
- height="175" alt="Linho Azul (Linum
- lewisii)" />
<p>Estou sempre <em>impressionado</em>
- no belo, delicado
- <a href="http://en.wikipedia.org/
- wiki/Linum_lewisii" rel="externo"
- title="Saiba mais sobre o Blue Flax">
- Blue Flax</a> que de alguma forma levou
- manter em meu jardim. Eles estão inundados
- em cores todas as manhãs, mas não um
- única flor permanece pelo
- tarde. eles são os mesmos
- definição de efêmero.</p>
<p><small>© Sociedade de Linho Azul.
- </pequeno></p>
</artigo>
</body>
</html>

B A folha de estilo padrão de um navegador
renderiza títulos (h1–h6elementos) diferentemente do
texto normal, itálicoemtexto, cores e links
sublinhados. Além disso, alguns elementos começam
em sua própria linha (h1ep, por exemplo) e outros são
exibidos no conteúdo ao redor (comoae
em). Este exemplo inclui um segundo parágrafo (o aviso de
direitos autorais) para deixar claro que cada parágrafo
ocupa sua própria linha. É simples substituir qualquer uma
ou todas essas regras de apresentação por suas próprias
folhas de estilo.
Nível de bloco, Inline e HTML5
Como você pode ver, alguns elementos HTML
(por exemplo, oartigo,h1, ep) são exibidos em
sua própria linha como um parágrafo em um
livro, enquanto outros (por exemplo, oa
eem) renderize na mesma linha que outro
conteúdoB. Novamente, esta é uma função das
regras de estilo padrão do navegador, não dos
próprios elementos HTML. Permita-me
elaborar. Antes do HTML5, a maioria dos
elementos era categorizada comonível de bloco
(os que são exibidos em sua própria linha) ou
em linha (aqueles exibidos dentro de uma linha
de texto). O HTML5 elimina esses termos
porque eles associam elementos à
apresentação, o que você aprendeu não é
papel do HTML.
Em vez disso, de um modo geral, os elementos
que foram previamente dublados em linha são
categorizados em HTML5 comofrase de conteúdo
— isto é, elementos e seu texto contido que
aparecem principalmente dentro de um parágrafo.
(O Capítulo 4 concentra-se quase exclusivamente
no conteúdo de frases. Veja a lista completa em
http://dev.w3.org/html5/spec-author-view/
content-models.html#phrasing-content-0.)
Os antigos elementos de nível de bloco agora também se
enquadram nas novas categorias HTML5 que se
concentram em sua semântica. Muitos desses elementos
são responsáveis pelos principais blocos estruturais e
cabeçalhos do seu conteúdo (aprofunde-se no Capítulo 3
para saber mais sobre a seção de conteúdo e os
elementos de cabeçalho do conteúdo).
Com tudo isso dito, os navegadores não mudaram
as regras de exibição padrão para esses
elementos, nem deveriam. Afinal, você não iria
querer, digamos, os dois parágrafos (o
pelementos) correndo um para o outro, ou o
emtext (“espantado”) para quebrar a frase
aparecendo em sua própria linha (emé o
elemento que você usa para adicionar ênfase).
Blocos de construção de páginas da Web7
Geralmente títulos, parágrafos e elementos
estruturais comoartigoexibem em sua própria
linha e o conteúdo de frase é exibido na
mesma linha que o conteúdo ao redor. E
mesmo que o HTML5 não use mais os termos
block-level e inline, ajuda saber o que eles
significam. É comum que os tutoriais os usem,
já que eles estavam enraizados no vernáculo
HTML antes do HTML5. Posso usá-los
ocasionalmente no livro para informar
rapidamente se um elemento ocupa sua
própria linha ou compartilha uma linha por
padrão.
Abordaremos o CSS em detalhes em capítulos
posteriores, mas, por enquanto, saiba que uma folha de
estilo, como uma página HTML, é apenas texto, então
você pode criar uma com o mesmo editor de texto do
seu HTML.
O foco do HTML5 na semântica
O HTML5 enfatiza a semântica do HTML, deixando
todo o estilo visual para o CSS. Esse nem sempre
foi o caso das versões anteriores do HTML.
Não existia um meio adequado para estilizar
páginas nos primeiros anos da Web; O HTML já
tinha alguns anos quando o CSS1 foi
formalmente introduzido em dezembro de
1996. Para preencher essa lacuna nesse meio
tempo, o HTML incluiu um punhado de
elementos de apresentação cujo objetivo era
permitir o estilo básico do texto, como negrito,
itálico ou um tamanho diferente do texto ao
redor.
Esses elementos serviram ao seu propósito na época,
mas caíram em desuso com razão à medida que as
melhores práticas evoluíram para Web
8Capítulo 1
desenvolvimento. Central para esse pensamento
era - e ainda é - a noção de que o HTML serve
apenas para descrever o significado do conteúdo,
não sua exibição.
Os elementos HTML de apresentação quebraram
essa prática recomendada. Como tal, o HTML 4
tornou obsoleto seu uso, recomendando que os
autores usassem CSS para estilizar o texto e outros
elementos da página.
HTML5 vai além; elimina alguns elementos de
apresentação e redefine outros, de modo que
eles carregam apenas valor semântico em vez
de ditar a apresentação.
Opequenoelemento é um desses exemplos.
Inicialmente, pretendia-se tornar o texto menor
do que o texto normal. No entanto, em HTML5
pequenorepresenta letras miúdas, como um
aviso legal. Você pode usar CSS para torná-lo o
maior texto da página, se desejar, mas isso não
mudará o significado do seupequenocontente.
Enquanto isso,pequenoantigo homólogo, o
grandeelemento, não existe em HTML5. Existem
outros exemplos também, sobre os quais você
aprenderá à medida que avança no livro.
O HTML5 também define novos elementos, como
comocabeçalho,rodapé,navegação,artigo,seção,
e muitos mais que enriquecem a semântica do seu
conteúdo. Você aprenderá sobre eles mais tarde
também.
No entanto, se você usar um elemento HTML
que existe desde o surgimento da linguagem
ou um novo no HTML5, seu objetivo deve ser o
mesmo: escolha os elementos que melhor
descrevem o significado de seu conteúdo sem
levar em conta sua apresentação.
COcorpoda nossa página básica, que contém o
artigo,h1,img,p,em, eaelementos para descrever o significado
do conteúdo. Todo o conteúdo está aninhado em
oartigo.
<corpo>
<artigo>
<h1>O efêmero linho azul</h1>
<img src="blueflax.jpg" width="300"
- height="175" alt="Linho Azul (Linum
- lewisii)" />
<p>Estou sempre <em>impressionado</em>
- no belo, delicado
- <a href="http://en.wikipedia.org/
- wiki/Linum_lewisii" rel="externo"
- title="Saiba mais sobre o Blue Flax">
- Blue Flax</a> que de alguma forma levou
- manter em meu jardim. Eles estão inundados
- em cores todas as manhãs, ainda
- nem uma única flor permanece por
- a tarde. eles são os mesmos
- definição de efêmero.</p>
</artigo>
</body>
DOs títulos são elementos críticos na definição do contorno de
uma página. Eles tornam uma página mais acessível aos
usuários de leitores de tela e os mecanismos de pesquisa os
utilizam para determinar o foco de uma página.
<h1>O efêmero linho azul</h1>
EÉ fácil adicionar uma imagem a uma página comimg.
Conforme definido peloalternativoatributo, “Blue Linho
(Linum lewisii)” é exibido se nossa imagem não for.
<imgsrc="blueflax.jpg" width="300"
- height="175" alt="Linho azul (Linum lewisii)"
- />
A semântica da nossa
página HTML básica
Agora que você conhece a função do HTML, vamos
examinar um pouco mais profundamente o processo de
pensamento por trás da marcação de conteúdo de
exemplo. Como você verá, não há mágica para escrever
HTML semântico. É principalmente senso comum, uma vez
que você esteja familiarizado com os elementos à sua
disposição. Vamos revisitar ocorpoda nossa página básica
para uma amostra de alguns dos elementos HTML usados
com mais frequênciaC.
Todo o conteúdo está contido em umartigo
elementoC. Resumidamente,artigodefine uma
parte distinta do conteúdo. Oartigoelemento é a
escolha apropriada para cercar o conteúdo de
nossa página básica, mas não necessariamente
para todas as páginas que você escrever. Você
aprenderá mais sobre quando usarartigono
Capítulo 3.
O próximo é um títuloD. O HTML fornece seis níveis de
título,h1–h6, comh1sendo o mais importante. Umh2é
um subtítulo de umh1, umh3é um subtítulo de umh2,
e assim por diante, exatamente como quando você
digita um documento com vários títulos em um
processador de texto.
Toda página HTML deve ter umh1(ou
mais, dependendo do seu conteúdo),
marcando nosso título comh1foi a escolha
óbvia. Os elementos do títuloh1–
h6são abordados mais no Capítulo 3.
Em seguida, você tem uma imagemE. Oimg
elemento é a escolha principal para exibir uma
imagem, portanto, novamente, não houve debate
sobre qual elemento era apropriado. O
alternativoO atributo fornece texto que é exibido se a
imagem não carregar ou se a página for visualizada em
um navegador somente de texto. Você aprenderá mais
sobre imagens no Capítulo 5.
Blocos de construção de páginas da Web9
O parágrafo está marcado com—surpresap
elementoF. Assim como em materiais impressos,
um parágrafo pode conter uma única frase ou
várias frases. Se nossa página precisasse de outro
parágrafo, você simplesmente adicionaria outrop
elemento após o primeiro.
Existem dois elementos aninhados em nosso
parágrafo que definem o significado de trechos de
texto:emeaF. Estes são exemplos dos numerosos
elementos de conteúdo de frase que o HTML5
fornece, a maioria dos quais melhora a semântica
do texto do parágrafo. Como mencionado,
aqueles, juntamente comp, são discutidos no
Capítulo 4.
Oemelemento significa “ênfase de ênfase”.
No caso de nossa página, enfatiza o espanto
que as flores causaramF. Lembre-se de que,
como o HTML descreve o significado do
conteúdo,emdita ênfase semântica, não
visual, embora seja comum renderizarem
texto em itálico.
Finalmente, a página básica define um link para
outra página com oaelemento (“âncora”), que é
o elemento mais poderoso em todo o HTML
porque torna a Web, a Web: vincula uma página
a outra página ou recurso e vincula uma parte
de uma página a outra parte de uma página
( na mesma página ou em outra). No exemplo,
significa que o texto “Blue Flax” é um link para
uma página da WikipédiaG.
10Capítulo 1
FOpelemento pode conter outros elementos que
definem a semântica das frases dentro de um
parágrafo. Oemeaelementos são dois exemplos.
<p>estou continuamente<em>espantado</em>no
- o lindo, delicado<a href="http://
- en.wikipedia.org/wiki/Linum_lewisii"
- rel="external" title="Saiba mais sobre
- Linho Azul">Linho Azul</a>que de alguma forma
- tomou conta do meu jardim. Eles estão inundados em
- cor todas as manhãs, mas nem uma única
- flor permanece pela tarde. Eles são
- a própria definição de efêmero.</p>
G EsseaO elemento define um link para a página da
Wikipédia sobre o Blue Flax. O opcionalreleO atributo
aumenta a semântica indicando que o link aponta para
outro site. O link funciona sem ele, no entanto. O opcional
títuloO atributo aprimora a semântica doafornecendo
informações sobre a página vinculada. Ele aparece no
navegador quando um usuário passa o mouse sobre o
link.
<a href="http://en.wikipedia.org/wiki/Linum_
- lewisii" rel="external" title="Saiba mais
- sobre Linho Azul">Linho Azul</a>
Muito fácil, certo? Depois de aprender mais
sobre os elementos HTML disponíveis para
você, escolher os corretos para o seu conteúdo
geralmente é uma tarefa simples.
Ocasionalmente, você encontrará um conteúdo
que pode ser razoavelmente marcado de mais
de uma maneira, e tudo bem. Nem sempre há
uma maneira certa e errada, apenas na maioria
das vezes.
Por fim, o HTML5 não tenta fornecer um
elemento para cada tipo de conteúdo
imaginável, porque a linguagem se tornaria
desajeitada. Em vez disso, adota uma postura
prática e real, definindo elementos que
abrangem a grande maioria dos casos.
Parte da beleza do HTML é que é simples para
qualquer pessoa aprender o básico, construir
algumas páginas e aumentar seu conhecimento a
partir daí. Portanto, embora existam
aproximadamente 100 elementos HTML, não deixe
que esse número o assuste. Há um punhado de
núcleos que você usará repetidamente, enquanto
os restantes são reservados para casos menos
comuns. Você já aprendeu o básico de vários
elementos comuns, então está no caminho certo.
Por que a semântica é importante
Agora que você conhece a importância do
HTML semântico e o viu em ação, precisa
saber os motivospor queé importante.
Aqui estão algumas das razões mais
importantes (esta não é uma lista exaustiva),
algumas das quais já mencionamos:
- Acessibilidade e interoperabilidade aprimoradas
(o conteúdo está disponível para tecnologias
assistivas para visitantes com deficiência e para
navegadores em desktop, celular, tablet e outros
dispositivos semelhantes)
- Otimização aprimorada do mecanismo de
pesquisa (SEO)
- (Normalmente) código mais leve e páginas mais rápidas
- Manutenção e estilo de código mais fáceis
Se você não está familiarizado comacessibilidade, é a
prática de disponibilizar seu conteúdo para todos os
usuários, independentemente de suas capacidades
(consulte www.w3.org/standards/webdesign/
accessibility). Tim Berners-Lee, inventor da Web, disse
a famosa frase: “O poder da Web está em sua
universalidade. O acesso de todos,
independentemente da deficiência, é um aspecto
essencial.”
Blocos de construção de páginas da Web11
Qualquer dispositivo com um navegador é capaz de
exibir HTML, desde que seja apenas texto. No entanto,
os meios pelos quais um usuário acessa o conteúdo
podem variar. Por exemplo, usuários com visão
visualizam o conteúdo, enquanto um usuário com
deficiência visual pode aumentar o tamanho da página
ou da fonte ou usar um leitor de tela, software que lê o
conteúdo em voz alta para eles (um exemplo de
tecnologia assistiva). Em alguns casos, os leitores de
tela anunciam o tipo de elemento HTML ao redor do
conteúdo para fornecer ao usuário o contexto do que
está por vir. Por exemplo, o usuário pode ser
informado de que uma lista foi encontrada antes que
os itens individuais da lista sejam lidos em voz alta. Da
mesma forma, os usuários são avisados quando um
link é encontrado para que possam decidir se desejam
segui-lo.

Os usuários de leitores de tela podem navegar

em uma página de várias maneiras, como pular
de um título para outro por meio de um comando
de teclado. Isso permite que eles coletem os
principais tópicos de uma página e ouçam com
mais detalhes aqueles que os interessam, em vez
de ouvir a página inteira sequencialmente.

Assim, você pode ver por que uma boa semântica faz
uma diferença marcante para usuários com
deficiências.

O SEO – ou seja, a classificação da sua página nos

resultados do mecanismo de pesquisa – pode
melhorar, porque os mecanismos de pesquisa
enfatizam as partes do seu conteúdo que são
marcadas de uma maneira específica. Por exemplo, os
títulos informam ao spider do mecanismo de pesquisa
os principais tópicos da sua página, ajudando o
mecanismo de pesquisa a determinar como indexar o
conteúdo da página.

À medida que avança no livro, você aprenderá

por que uma boa semântica pode tornar seu
código mais eficiente e mais fácil de manter e
estilizar.

12Capítulo 1

Marcação: Elementos,
Atributos e valores
Agora que você já viu um pouco de HTML, vamos dar
uma olhada mais de perto no que constitui a
marcação.
HTML tem três componentes principais de
marcação:elementos, atributos,evalores. Você
viu exemplos de cada um em nossa página
básica.
elementos
Os elementos são como pequenos rótulos que
descrevem as diferentes partes de uma página da
Web: “Isto é um título, aquilo ali é um parágrafo e
aquele grupo de links é a navegação”. Discutimos
alguns elementos na seção anterior. Alguns
elementos têm um ou mais atributos, que
descrevem melhor o propósito e o conteúdo (se
houver) do elemento.
Os elementos podem conter texto e outros
elementos ou podem estar vazios. Um não vazio
elemento consiste em ummarca de início
(o nome e os atributos do elemento, se
houver, entre sinais de menor e maior
que), o conteúdo e ummarca final (uma
barra seguida do nome do elemento,
novamente entre sinais de menor e
maior)A.
Umelemento vazio (também chamado de
elemento vazio)parece uma combinação de
tags de início e fim, com um sinal de menor
inicial, o nome do elemento seguido por
quaisquer atributos que ele possa ter, um
espaço opcional, uma barra opcional e o sinal
de maior final, que é obrigatórioB.
O espaço e a barra antes do final de um elemento
vazio são opcionais em HTML5. Provavelmente é
justo dizer que aqueles de nós que codificaram
anteriormente em XHTML, que requer a barra para
fechar um elemento vazio, tendem a usá-lo em
HTML5 também, embora certamente outros o
tenham descartado. Eu o incluo no meu código,
mas se você optar por omiti-lo do seu, a página se
comportará

Contente
Marca de início Etiqueta final

estou continuamente<em>espantado</em>

Colchetes angulares Barra

AAqui está um elemento HTML típico. Omarca de

inícioeetiqueta finalcercam o texto que o elemento
descreve. Neste caso, a palavra “maravilhado”
é enfatizado, graças aoemelemento. É comum digitar
suas tags de elemento em letras minúsculas.

<img src="blueflax.jpg" width="300" height="175" alt="Blue Linho (Linum lewisii)"/>

Um espaço e uma barra

BElementos vazios, comoimgmostrados aqui, não envolvam nenhum conteúdo de texto (oalternativoo texto do
atributo é parte do elemento, não cercado por ele). 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 é necessário.

Blocos de construção de páginas da Web13

exatamente o mesmo. Seja como for,
recomendo fazê-lo de forma consistente.
É comum digitar os nomes de seus elementos em
letras minúsculas, embora o HTML5 também não seja
exigente aqui, permitindo letras maiúsculas. No
entanto, é raro encontrar alguém hoje em dia que
codifica em letras maiúsculas, então, a menos que o
rebelde em você simplesmente não resista, eu não
recomendo. É encarado como uma prática datada.
entre aspas, mas é costume incluí-las, então
recomendo que você sempre o faça. E assim
como com os nomes dos elementos,
recomendo que você digite os nomes dos
atributos em letras minúsculas.
Embora você encontre detalhes sobre valores
aceitáveis para a maioria dos atributos neste livro,
deixe-me dar uma ideia dos tipos de valores que você
encontrará à medida que avança.

Alguns atributos podem aceitar qualquer valor,

Atributos e Valores
Os atributos contêm informações sobre o
conteúdo do documento, em vez de serem o
próprio conteúdo (CeD). Em HTML5, o valor
de um atributo pode opcionalmente ser
outros são mais limitados. Talvez os mais comuns
sejam aqueles que aceitam valores enumerados ou
predefinidos. Em outras palavras, você deve
selecionar um valor de uma lista padrão de opções
E. Certifique-se de escrever os valores enumerados
em letras minúsculas.

paraé um atributo derótulo

<rótulofor="e-mail">Endereço de e-mail</label>

O valor doparaatributo

CAqui está umrótuloelemento (que associa um rótulo de texto a um campo de formulário) com um par atributo-valor simples.
Os atributos estão sempre localizados dentro da tag inicial de um elemento. É costume colocá-los entre aspas.

hrefé um atributo dea reletambém é um atributo dea

Valor parahref Valor pararele

<ahref="http://en.wikipedia.org/wiki/Linum_lewisii" rel="externo"
- title="Saiba mais sobre o Blue Flax">Linho Azul</a>

Valor paratítulo
títuloé um atributo dea

D Alguns elementos, comoamostrados aqui, podem ter 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.

<link rel="folha de estilo" media="tela"href="blueflax.css" />

Valor predefinido

EAlguns atributos aceitam apenas valores específicos. Por exemplo, omeios de comunicaçãoatributo nolinkelemento pode ser definido
comotodos,tela, ouimprimir, entre outros, mas você não pode simplesmente criar um valor para ele como pode com o
títuloatributo.

14Capítulo 1
Muitos atributos requerem um número para seu valor,
particularmente aqueles que descrevem tamanho e
comprimento. Um valor numérico nunca inclui
unidades, apenas o número. Onde as unidades são
aplicáveis, como na largura e altura de uma imagem
ou vídeo, elas são entendidas como pixels.
Alguns atributos, comohrefeorigem, fazem
referência a outros arquivos e, portanto, devem
conter valores na forma de uma URL ou Uniform
Resource Locator, o endereço exclusivo de um
arquivo na Web. Você aprenderá mais sobre
URLs na seção “URLs” deste capítulo.
Pais e filhos
Se um elemento contém outro, ele é
considerado o pai do elemento incluído ou
filho. Quaisquer elementos contidos no
elemento filho são considerados
descendentes do elemento pai externo
elementoF. Na verdade, você pode criar uma
árvore genealógica de uma página da Web que
mostra as relações hierárquicas entre cada
elemento da página e que identifica
exclusivamente cada elemento.
Essa estrutura subjacente semelhante à árvore
genealógica é um recurso-chave do código HTML. Ele
facilita os elementos de estilo (sobre os quais você
começará a aprender no Capítulo 7) e a aplicação do
comportamento JavaScript a eles.
É importante observar que quando os elementos
contêm outros elementos, cada elemento deve
estar devidamente aninhado, ou seja, totalmente
contido em seu pai. Sempre que você usar uma tag
final, ela deve corresponder à última tag inicial não
fechada. Em outras palavras, primeiro abra o
elemento 1, depois abra o elemento 2, feche o
elemento 2 e feche o elemento 1G.

<artigo>
<h1>O efêmero linho azul</h1>
<imgsrc="blueflax.jpg".../>
<p>... continuamente<em>espantado</em>... delicado<a...>linho azul</a>...</p>
</artigo>

FOartigoelemento é pai doh1,img, epelementos. Por outro lado, oh1,img, epelementos são filhos (e
descendentes) doartigo. Opelemento é pai de ambos osemeaelementos. O
emeasão filhos dope também descendentes (mas não filhos) dosartigo. Por sua vez,artigoé o ancestral deles.

Correto (sem linhas sobrepostas)

<p>... continuamente <em>maravilhado</em> ...</p>

<p>... continuamente <em>maravilhado ...</p></em>

Incorreto (os conjuntos de tags se cruzam)

GOs elementos devem ser aninhados corretamente. Se você abrirpe entãoem, você deve fecharemantes de fecharp.

Blocos de construção de páginas da Web15

de uma página da web AO conteúdo de texto de uma página (destacado) é
basicamente qualquer coisa além da marcação. Neste exemplo,
observe que cada frase é separada por pelo menos um retorno
conteúdo de texto de carro e algumas palavras são separadas por vários espaços
(apenas para enfatizar o ponto sobre retornos e espaços
O texto contido nos elementos é talvez o recolhidos). Além disso, inclui uma referência de caractere
ingrediente mais básico de uma página da Web. Se especial (&cópia de;) para o símbolo de direitos autorais para
garantir que ele seja exibido corretamente, independentemente
você já usou um processador de texto, digitou
da codificação na qual você salva este documento.
algum texto. O texto em uma página HTML, no
entanto, tem algumas diferenças importantes.
<p>estou continuamente<em>espantado</em>no
Primeiro, quando um navegador renderiza HTML, - linda e delicada Linho Azul que
ele recolhe espaços extras ou tabulações em um - de alguma forma tomou conta do meu jardim.
único espaço e converte retornos e alimentações
de linha em um único espaço ou os ignora Eles estão inundados em cor cada
- manhã, mas nem uma única flor
completamente (AeB).
- permanece pela tarde.
Em seguida, o HTML costumava ser restrito a
caracteres ASCII - basicamente as letras do
idioma inglês, numerais e alguns dos símbolos
Eles são a própria definição de
mais comuns. Caracteres acentuados (comuns a - efêmero.</p>
muitos idiomas da Europa Ocidental) e muitos <p>&cópia de; Sociedade de Linho Azul.</p>
símbolos cotidianos tiveram que ser criados
com referências de caracteres especiais como&
eagudo;(para é) ou
&cópia de;(para ©). Veja a lista completa em
www.eliza bethcastro.com/html/extras/entities.html.

O Unicode atenua muitos problemas com caracteres

especiais. É prática padrão codificar páginas em UTF-8,
como na página básicaCe salve os arquivos HTML com
a mesma codificação (consulte “Salvando sua página
BObserve que quando você visualiza o documento com
um navegador, os retornos e espaços extras são
da Web” no Capítulo 2). Eu recomendo que você faça o ignorados e a referência do caractere é substituída pelo
mesmo. símbolo correspondente (©).

Como o Unicode é um superconjunto do ASCII -

CEspecifique a codificação de caracteres do seu documento
é tudo o que o ASCII é e muito mais - os
diretamente após ocabeçamarca de início. Oconjunto de caracteres
documentos codificados em Unicode são O atributo define o tipo de codificação.
compatíveis com os navegadores e editores
<!DOCTYPE html>
existentes, exceto os mais antigos. Os
<html lang="en">
navegadores que não entendem Unicode
<cabeça>
interpretarão a parte ASCII do documento <meta charset="utf-8" />
corretamente, enquanto os navegadores que <title>Linho azul (Linum lewisii)</title> </
entendem Unicode também exibirão a parte head>
<corpo>
não ASCII. Mesmo assim, ainda é comum usar
...
referências de caracteres às vezes, como para o
</body>
símbolo de direitos autorais, pois é fácil de </html>
lembrar e digitar&cópia de;A.

16Capítulo 1
AEm nosso documento HTML básico, há uma referência
a um arquivo de imagem chamadoblueflax.jpg, que o
navegador solicitará, carregará e exibirá quando
carregar o restante da página. A página também inclui
um link para outra página sobre o Blue Flax.
...
<artigo>
<h1>O efêmero linho azul</h1>
<img src="blueflax.jpg"largura="300"
- height="175" alt="Linho Azul (Linum
- lewisii)" />
<p>Estou sempre <em>surpreso</em> com
- o lindo, delicado<a href =
- "http://en.wikipedia.org/wiki/Linum_
- lewisii"rel="externo" title="Aprender
- mais sobre o Linho Azul">Linho Azul
- </a> que de alguma forma tomou conta do meu
- jardim. Eles estão inundados de cores a cada
- manhã, mas nem uma única flor
- permanece pela tarde. Eles são o
- própria definição de efêmero.</p>
</artigo>
...
BAs imagens e outros conteúdos não textuais são
referenciados a partir de uma página da Web e o
navegador os exibe junto com o texto.
Links, imagens e
Outro Não-Texto
Contente
Claro, parte do que torna a Web tão vibrante
são os links de uma página para outra e as
imagens, vídeos, músicas, animações e muito
mais. Em vez de incluir os arquivos externos,
como vídeos, no arquivo HTML, esses arquivos
são salvos independentemente e são
simplesmente referenciados na páginaA. Como
a referência nada mais é do que texto, o
arquivo HTML permanece quase
universalmente acessível.
Os navegadores podem lidar com links e imagens
(exceto em navegadores somente de texto) sem
perder o ritmoB. No entanto, eles não podem
necessariamente lidar com todos os outros tipos de
arquivo. Se você fizer referência a um arquivo que o
navegador do visitante não entende, o navegador
geralmente tentará encontrar um plug-in ou um
aplicativo auxiliar, algum programa apropriado no
computador do visitante, que seja capaz de abrir esse
tipo de arquivo.
Você também pode fornecer informações extras
aos navegadores sobre como renderizar
conteúdo com um plug-in, se necessário, ou
como baixar o plug-in, se o visitante ainda não o
tiver em seu computador.
Blocos de construção de páginas da Web17
Todo esse negócio de baixar e instalar plug-ins
atrapalha a experiência do usuário em seu site,
presumindo que eles permaneçam por lá. Os
plug-ins também podem apresentar problemas
de desempenho porque não são uma parte
nativa do navegador.

O Flash, por exemplo, é o plug-in mais

difundido há anos. Sem dúvida, você já
assistiu a um vídeo on-line reproduzido por
meio do Flash em algum momento e
experimentou a lentidão do computador ou
a falha ocasional do navegador (ou ambos).
O HTML5 tenta mitigar muitos desses
problemas introduzindo a reprodução de mídia
nativa no navegador por meio doáudioe
vídeoelementos. Infelizmente, tem havido um
debate entre os fornecedores de navegadores sobre
quais formatos de mídia devem ser suportados,
então você nem sempre pode acabar com os plugins
ainda. Mas é um começo.

Você aprenderá mais sobre imagens no Capítulo

5 e examinará plug-ins, elementos de mídia do
HTML5 e muito mais no Capítulo 17.

18Capítulo 1
 Separe palavras com um traço
Nomes de arquivo
Nunca inclua espaços entre as palavras em seus
Como qualquer outro documento de texto, uma
nomes de arquivo. Em vez disso, use um traço, para
página da Web tem um nome de arquivo que se
exemplo,história da empresa.htmle
identifica para você, seus visitantes e os navegadores
meus-filmes-favoritos.html. Você virá
da Web de seus visitantes. Existem algumas dicas a
em sites ocasionais que usam sublinhados (“_”),
serem lembradas ao atribuir nomes de arquivo às suas
mas eles não são recomendados, porque os
páginas da Web que ajudarão você a organizar seus
travessões são preferidos pelos mecanismos
arquivos, facilitar a localização e o acesso de seus
de pesquisa.
visitantes às suas páginas, garantir que seus
navegadores visualizem as páginas corretamente e
Use a extensão adequada
melhorar o SEO (AeB).
A principal maneira pela qual um navegador sabe que
deve ler um documento de texto como uma página da
Use Nomes de Arquivos em Minúsculas
Web é observando sua extensão. Embora.htm
Como o nome do arquivo que você escolhe para sua
também funciona,.htmlé habitual, então eu
página da Web determina o que seus visitantes terão que
recomendo que você use isso como sua extensão.
digitar para acessar sua página, você pode salvar seus
Se a página tiver alguma outra extensão, como
visitantes de erros de digitação inadvertidos (e dores de
. TXT, o navegador o tratará como texto e
cabeça) usando apenas letras minúsculas em seus nomes
mostrará todo o seu bom código ao visitante.
de arquivo. Também é uma grande ajuda quando você
mesmo cria links entre suas páginas. Se todos os seus Esteja ciente de que nem o Mac OS nem o
nomes de arquivos tiverem apenas letras minúsculas, é Windows sempre revelam a extensão real de um
apenas uma coisa a menos com que você terá que se documento. Altere as opções de pasta, se necessário,
para poder ver as extensões.
preocupar.

Nome do arquivo, Nomes de arquivos com letras maiúsculas

em letras minúsculas Extensão são difíceis de digitar e comunicar

buckminster-fuller.html Buckminster_Fuller.html

Separe cada palavra com um traço Os sublinhados não são tão bons para a otimização do
mecanismo de pesquisa quanto os traços

ALembre-se de usar todas as letras minúsculas para os nomes dos arquivos, separar as palavras com um traço e adicionar a
extensão .html. A mistura de letras maiúsculas e minúsculas torna mais difícil para seus visitantes digitar o endereço correto e
encontrar 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

BUse todas as letras minúsculas e traços para seus diretórios e pastas também. 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, isso era um B maiúsculo ou
um minúsculo?”

Blocos de construção de páginas da Web19

URLs Nome do Servidor de Esquema Caminho Nome do arquivo

Localizador uniforme de recursos, ou URL, é um "http://www.site.com/tofu/index.html"

nome sofisticado para endereço. Ele contém
informações sobre onde está um arquivo e o que um
ASua URL básica contém um esquema, nome do
navegador deve fazer com ele. Cada arquivo na servidor, caminho e nome do arquivo.
Internet possui um URL exclusivo.

A primeira parte da URL é chamada de esquema. Barra à direita

Ele informa ao navegador como lidar com o
arquivo que está prestes a abrir. O esquema "http://www.site.com/tofu/"
mais comum que você verá é o HTTP, ou
Hypertext Transfer Protocol. É usado para BUma URL com uma barra à direita e nenhum nome de
acessar páginas da WebA. arquivo aponta para o arquivo padrão no último diretório
nomeado (neste caso, otofudiretório). O nome de arquivo
A segunda parte da URL é o nome do servidor padrão mais comum éindex.html. Portanto, esta URL e a
do exemplo anterior apontam para a mesma página.
onde o arquivo está localizado, seguido do
caminho que leva ao arquivo e o próprio nome
do arquivo. Às vezes, um URL omite um nome
de arquivo e termina com um caminho, que Esquema Nome do servidor Caminho Nome do arquivo

pode ou não incluir uma barra à direitaB. Nesse

"ftp://ftp.site.com/pub/proposal.pdf"
caso, a URL refere-se ao arquivo padrão no
último diretório do caminho, normalmente
chamadoindex.html.
CQuando o usuário clicar neste URL, o navegador iniciará
uma transferência FTP do arquivoproposta.pdf.
Outros esquemas comuns sãohttps, para páginas da
Web seguras;ftp(File Transfer Protocol), para baixar
Esquema Endereço de email
arquivosC;mailto, para envio de e-mailD; earquivo,
para acessar arquivos em um disco rígido local ou "mailto: somename@somedomain.com "
redes locais de compartilhamento de arquivos (você
não terá oportunidade de usar oarquivoesquema com DUma URL para um endereço de e-mail inclui o
muita frequência, se for o caso)E. mailtoesquema seguido por dois pontos, mas sem barras
e, em seguida, o próprio endereço de e-mail.
Um esquema é geralmente seguido por dois
pontos e duas barras.mailtoenotícias
são exceções; estes levam apenas dois pontos. Letra da Unidade do Esquema Caminho e nome do arquivo

Observe que oarquivoesquema é seguido "arquivo:///c|/caminho/home.htm"

por dois pontos e três barras. Isso porque o
Barra vertical
host, que em outros esquemas fica entre a
segunda e a terceira barra, é considerado o
EPara fazer referência a um arquivo em uma máquina Windows
computador local. Sempre digite esquemas local, use oarquivoesquema. Para Macintosh, use
em letras minúsculas. file:///Harddisk/path/filename. Sem barra vertical
é necessário. (Às vezes, isso também funciona para o
Desses esquemas, você usaráhttpe Windows.)
mailtomais frequente. Os demais são para
casos especializados.

20Capítulo 1
 URLs absolutos
URLs podem ser absolutos ou relativos. Um URL
absolutomostra o caminho completo para o
www.site.com www.remote.com
arquivo, incluindo o esquema, o nome do
servidor, o caminho completo e o próprio nome
sobre imprensa
do arquivoF. Um URL absoluto é análogo a um
informação news.html endereço completo, incluindo nome, rua e
número, cidade, estado, CEP e país. Não
data.html inscrever-se
importa de onde uma carta seja enviada, os
index.html index.html correios poderão encontrar o destinatário. Em
termos de URLs, isso significa que a localização
você-está-aqui.html
da URL absoluta em si não tem relação com a
img localização do arquivo real referenciado - seja
imagem.png
em uma página da Web em seu servidor ou em
outro servidor, uma URL absoluta para um
arquivo específico parecerá exatamente o
FO documento que contém os URLs mesmo.
(você-está-aqui.htmlneste caso) é o ponto de referência para
URLs relativos. Em outras palavras, os URLs relativos são Ao fazer referência a um arquivo do servidor de
relativos à localização desse arquivo no servidor. URLs
absolutos funcionarão independentemente de onde estiverem
outra pessoa, você sempre usará um URL
localizados, porque sempre contêm o URL completo para um absoluto. Você também precisará usar URLs
recurso. absolutos para sites FTP ou, geralmente,
qualquer tipo de URL que não use um protocolo
HTTP.

Tabela 1.1descreve como você acessaria

vários arquivos devocê-está-aqui.html—
tanto no mesmo site (site.com) quanto na
página e em outro site (remote.com) — como
forma de ilustrar a diferença entre URLs
relativos e absolutos.

TABELA 1.1URLs absolutos vs. URLs relativos

URL absoluta URL relativo

Nome do arquivo (pode ser usado em qualquer lugar) (só funciona em you-are-here.html)

index.html http://www.site.com/about/index.html index.html

data.html http://www.site.com/about/info/data.html /info/data.html

imagem.png http://www.site.com/img/image.png . . /img/image.png

news.html http://www.remote.com/press/news.html (nenhum: use absoluto)

index.html http://www.remote.com/sign-up/index.html (nenhum: use absoluto)

Blocos de construção de páginas da Web21

URLs relativos
Para lhe dar instruções sobre como chegar à casa
da minha vizinha, em vez de fornecer o endereço
completo dela, posso apenas dizer: "são três
portas à direita". Este é um endereço relativo -
para onde ele aponta depende de onde a
informação se origina. Com a mesma informação
em outra cidade, você nunca encontraria meu
vizinho.
Da mesma forma, uma URL relativa descreve a
localização do arquivo desejado com referência à
localização do arquivo que contém a própria
referência de URL. Portanto, você pode fazer com
que a URL diga algo como "link para a página xyz
que está no mesmo diretório desta página".
A URL relativa de um arquivo que está no
mesmo diretório da página atual (ou seja,
aquela que contém a URL em questão) é
simplesmente o nome e a extensão do arquivo
G. Você cria a URL para um arquivo em um
subdiretório do diretório atual digitando o
nome do subdiretório seguido por uma barra e,
em seguida, o nome e a extensão do arquivo
desejadoH.
Para fazer referência a um arquivo em um diretório
em um nível superior da hierarquia de arquivos, use
dois pontos e uma barraEU. Você pode combinar e
repetir os dois pontos e a barra para fazer referência a
qualquer arquivo no mesmo servidor ou unidade do
arquivo atual.
22Capítulo 1
Dentro da pasta atual, existe um
arquivo chamado “index.html”…
"index.html"
GA URL relativa para vincular a um arquivo na mesma
pasta (consulteF). Apenas o nome e a extensão do arquivo
são necessários na URL, em vez de preceder
aqueles comhttp://www.site.com/about/(o
pasta na qual ambos os arquivos residem).
Dentro da pasta atual, há uma
pasta chamada “info”…
"info/dados.html"
…que contém… …um arquivo chamado “data.html.”
HPara referenciar um arquivo (data.html, neste exemplo)
que está dentro de uma pasta dentro da pasta atual (veja
F), adicione o nome da subpasta e uma barra na frente
do nome do arquivo.
A pasta que contém a pasta atual…
…contém… …uma pasta chamada “img”
"../img/image.png"
…que contém… …um arquivo chamado “image.png”…
EUEste arquivo, como você pode ver emF, está em uma
pasta (imagem)que fica ao lado da pasta atual (sobre) no
diretório raiz do site. Nesse caso, você usa dois pontos e
uma barra para subir um nível e, em seguida, observe o
subdiretório, seguido por uma barra, seguido pelo nome
do arquivo. (Na prática normal, você escolheria um nome
de arquivo de imagem mais descritivo do queimagem.png,
que é deliberadamente genérico para o exemplo.)
Alternativamente, se seus arquivos estiverem em um
servidor da Web, você pode evitar arquivos complicados
caminhos como../../img/família/férias
. jpgprimeiro pulando direto para a raiz
do seu site e depois detalhando de lá
para o arquivo de destino. Uma única
barra no início alcança isso, então o
parente raizURL neste caso seria/img/
família/férias.jpg(assumindo oimg
pasta fica na pasta raiz do site, o que é habitual).
Novamente, isso só funciona em um servidor Web,
como no provedor de hospedagem que atende seu
site ou em um que você esteja executando
localmente em sua máquina (o Apache é a escolha
mais popular para isso).

Se você não estiver desenvolvendo seu site

localmente em um servidor, geralmente desejará usar
URLs relativos (exceto ao apontar para arquivos no
servidor de outra pessoa, é claro). Eles facilitarão a
movimentação de suas páginas de um sistema local
para um servidor. Desde que a posição relativa de
cada arquivo permaneça constante, você não
precisará alterar nenhum dos caminhos, portanto os
links funcionarão corretamente.

Blocos de construção de páginas da Web23

Principais conclusões
Os fundamentos do HTML e algumas das principais
práticas recomendadas fornecem a base para a
criação de sites eficazes. Vamos revisitar as principais
conclusões:

- Uma página da Web é composta principalmente de

três componentes: conteúdo de texto, referências a
outros arquivos e marcação.

- A marcação HTML é composta de

elementos, atributos e valores.
- É comum escrever seu HTML em letras
minúsculas (DOCTYPE é uma exceção),
colocar os valores de seus atributos entre
aspas e fechar os elementos vazios com um
espaço e uma barra (/).
- Sempre comece seus documentos HTML
com a declaração DOCTYPE:

<!DOCTYPE html>
- O conteúdo de uma página vai nocorpoelemento.
As instruções destinadas principalmente ao
navegador e aos mecanismos de pesquisa são
anteriores, principalmente nocabeça.

- Marque seu conteúdo com HTML

semântico e sem levar em conta como ele
deve aparecer em um navegador.

- O HTML semântico melhora a

acessibilidade e pode tornar seu site mais
eficiente e mais fácil de manter e estilizar.
- CSS controla a apresentação do conteúdo
HTML.
- A folha de estilo de cada navegador determina
a apresentação padrão do HTML. Você pode
sobrescrever essas regras com seu próprio
CSS.

- Crie nomes de arquivos e pastas em letras

minúsculas e separe as palavras com um traço
em vez de um espaço ou sublinhado.

Em seguida, você aprenderá como trabalhar com arquivos

de página da Web.

24Capítulo 1