Computing">
HTML5 e CSS3 - TRADU - Guia Prático e Visual (7 Edição) (026-049) .En - PT
HTML5 e CSS3 - TRADU - Guia Prático e Visual (7 Edição) (026-049) .En - PT
HTML5 e CSS3 - TRADU - Guia Prático e Visual (7 Edição) (026-049) .En - PT
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.
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.
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>
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>
Ótima pergunta. A razão é que todo navegador da <p><small>© Sociedade de Linho Azul.
Web possui um arquivo CSS integrado (umfolha de - </pequeno></p>
estilos)que determina como cada elemento HTML é </artigo>
</body>
exibido por padrão, a menos que você crie o seu
</html>
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
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
B A folha de estilo padrão de um navegador porque eles associam elementos à
renderiza títulos (h1–h6elementos) diferentemente do
texto normal, itálicoemtexto, cores e links apresentação, o que você aprendeu não é
sublinhados. Além disso, alguns elementos começam
papel do HTML.
em sua própria linha (h1ep, por exemplo) e outros são
exibidos no conteúdo ao redor (comoae Em vez disso, de um modo geral, os elementos
em). Este exemplo inclui um segundo parágrafo (o aviso de
que foram previamente dublados em linha são
direitos autorais) para deixar claro que cada parágrafo
ocupa sua própria linha. É simples substituir qualquer uma categorizados em HTML5 comofrase de conteúdo
ou todas essas regras de apresentação por suas próprias — isto é, elementos e seu texto contido que
folhas de estilo.
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.)
8Capítulo 1
COcorpoda nossa página básica, que contém o A semântica da nossa
artigo,h1,img,p,em, eaelementos para descrever o significado
página HTML básica
do conteúdo. Todo o conteúdo está aninhado em
oartigo. Agora que você conhece a função do HTML, vamos
examinar um pouco mais profundamente o processo de
<corpo>
pensamento por trás da marcação de conteúdo de
<artigo>
<h1>O efêmero linho azul</h1> exemplo. Como você verá, não há mágica para escrever
HTML semântico. É principalmente senso comum, uma vez
<img src="blueflax.jpg" width="300" que você esteja familiarizado com os elementos à sua
- height="175" alt="Linho Azul (Linum
disposição. Vamos revisitar ocorpoda nossa página básica
- lewisii)" />
para uma amostra de alguns dos elementos HTML usados
texto:emeaF. Estes são exemplos dos numerosos - tomou conta do meu jardim. Eles estão inundados em
- cor todas as manhãs, mas nem uma única
elementos de conteúdo de frase que o HTML5
- flor permanece pela tarde. Eles são
fornece, a maioria dos quais melhora a semântica - a própria definição de efêmero.</p>
do texto do parágrafo. Como mencionado,
aqueles, juntamente comp, são discutidos no
Capítulo 4. G EsseaO elemento define um link para a página da
Wikipédia sobre o Blue Flax. O opcionalreleO atributo
Oemelemento significa “ênfase de ênfase”. aumenta a semântica indicando que o link aponta para
No caso de nossa página, enfatiza o espanto outro site. O link funciona sem ele, no entanto. O opcional
títuloO atributo aprimora a semântica doafornecendo
que as flores causaramF. Lembre-se de que, informações sobre a página vinculada. Ele aparece no
como o HTML descreve o significado do navegador quando um usuário passa o mouse sobre o
conteúdo,emdita ênfase semântica, não link.
10Capítulo 1
Muito fácil, certo? Depois de aprender mais Por que a semântica é importante
sobre os elementos HTML disponíveis para
Agora que você conhece a importância do
você, escolher os corretos para o seu conteúdo
HTML semântico e o viu em ação, precisa
geralmente é uma tarefa simples.
saber os motivospor queé importante.
Ocasionalmente, você encontrará um conteúdo
que pode ser razoavelmente marcado de mais
de uma maneira, e tudo bem. Nem sempre há Aqui estão algumas das razões mais
uma maneira certa e errada, apenas na maioria importantes (esta não é uma lista exaustiva),
das vezes. algumas das quais já mencionamos:
elemento para cada tipo de conteúdo (o conteúdo está disponível para tecnologias
imaginável, porque a linguagem se tornaria assistivas para visitantes com deficiência e para
desajeitada. Em vez disso, adota uma postura navegadores em desktop, celular, tablet e outros
qualquer pessoa aprender o básico, construir - (Normalmente) código mais leve e páginas mais rápidas
algumas páginas e aumentar seu conhecimento a
- Manutenção e estilo de código mais fáceis
partir daí. Portanto, embora existam
aproximadamente 100 elementos HTML, não deixe Se você não está familiarizado comacessibilidade, é a
que esse número o assuste. Há um punhado de prática de disponibilizar seu conteúdo para todos os
núcleos que você usará repetidamente, enquanto usuários, independentemente de suas capacidades
comuns. Você já aprendeu o básico de vários accessibility). Tim Berners-Lee, inventor da Web, disse
elementos comuns, então está no caminho certo. a famosa frase: “O poder da Web está em sua
universalidade. O acesso de todos,
independentemente da deficiência, é um aspecto
essencial.”
Assim, você pode ver por que uma boa semântica faz
uma diferença marcante para usuários com
deficiências.
12Capítulo 1
elemento consiste em ummarca de início
Marcação: Elementos, (o nome e os atributos do elemento, se
Atributos e valores houver, entre sinais de menor e maior
que), o conteúdo e ummarca final (uma
Agora que você já viu um pouco de HTML, vamos dar barra seguida do nome do elemento,
uma olhada mais de perto no que constitui a novamente entre sinais de menor e
marcação. maior)A.
HTML tem três componentes principais de Umelemento vazio (também chamado de
marcação:elementos, atributos,evalores. Você elemento vazio)parece uma combinação de
viu exemplos de cada um em nossa página tags de início e fim, com um sinal de menor
básica. inicial, o nome do elemento seguido por
quaisquer atributos que ele possa ter, um
elementos espaço opcional, uma barra opcional e o sinal
Os elementos são como pequenos rótulos que de maior final, que é obrigatórioB.
descrevem as diferentes partes de uma página da O espaço e a barra antes do final de um elemento
Web: “Isto é um título, aquilo ali é um parágrafo e vazio são opcionais em HTML5. Provavelmente é
aquele grupo de links é a navegação”. Discutimos justo dizer que aqueles de nós que codificaram
alguns elementos na seção anterior. Alguns anteriormente em XHTML, que requer a barra para
elementos têm um ou mais atributos, que fechar um elemento vazio, tendem a usá-lo em
descrevem melhor o propósito e o conteúdo (se HTML5 também, embora certamente outros o
houver) do elemento. tenham descartado. Eu o incluo no meu código,
Os elementos podem conter texto e outros mas se você optar por omiti-lo do seu, a página se
elementos ou podem estar vazios. Um não vazio comportará
Contente
Marca de início Etiqueta final
estou continuamente<em>espantado</em>
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.
<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.
<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.
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, elementoF. Na verdade, você pode criar uma
particularmente aqueles que descrevem tamanho e árvore genealógica de uma página da Web que
comprimento. Um valor numérico nunca inclui mostra as relações hierárquicas entre cada
unidades, apenas o número. Onde as unidades são elemento da página e que identifica
aplicáveis, como na largura e altura de uma imagem exclusivamente cada elemento.
ou vídeo, elas são entendidas como pixels.
Essa estrutura subjacente semelhante à árvore
genealógica é um recurso-chave do código HTML. Ele
Alguns atributos, comohrefeorigem, fazem facilita os elementos de estilo (sobre os quais você
referência a outros arquivos e, portanto, devem começará a aprender no Capítulo 7) e a aplicação do
conter valores na forma de uma URL ou Uniform comportamento JavaScript a eles.
Resource Locator, o endereço exclusivo de um
É importante observar que quando os elementos
arquivo na Web. Você aprenderá mais sobre
contêm outros elementos, cada elemento deve
URLs na seção “URLs” deste capítulo.
estar devidamente aninhado, ou seja, totalmente
contido em seu pai. Sempre que você usar uma tag
Pais e filhos final, ela deve corresponder à última tag inicial não
Se um elemento contém outro, ele é fechada. Em outras palavras, primeiro abra o
considerado o pai do elemento incluído ou elemento 1, depois abra o elemento 2, feche o
filho. Quaisquer elementos contidos no elemento 2 e feche o elemento 1G.
elemento filho são considerados
descendentes do elemento pai externo
<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.
GOs elementos devem ser aninhados corretamente. Se você abrirpe entãoem, você deve fecharemantes de fecharp.
16Capítulo 1
AEm nosso documento HTML básico, há uma referência
a um arquivo de imagem chamadoblueflax.jpg, que o
Links, imagens e
navegador solicitará, carregará e exibirá quando
carregar o restante da página. A página também inclui Outro Não-Texto
um link para outra página sobre o Blue Flax.
Contente
...
<artigo> Claro, parte do que torna a Web tão vibrante
<h1>O efêmero linho azul</h1> são os links de uma página para outra e as
imagens, vídeos, músicas, animações e muito
<img src="blueflax.jpg"largura="300"
mais. Em vez de incluir os arquivos externos,
- height="175" alt="Linho Azul (Linum
- lewisii)" /> como vídeos, no arquivo HTML, esses arquivos
são salvos independentemente e são
<p>Estou sempre <em>surpreso</em> com simplesmente referenciados na páginaA. Como
- o lindo, delicado<a href = a referência nada mais é do que texto, o
- "http://en.wikipedia.org/wiki/Linum_
arquivo HTML permanece quase
- lewisii"rel="externo" title="Aprender
- mais sobre o Linho Azul">Linho Azul universalmente acessível.
- </a> que de alguma forma tomou conta do meu
Os navegadores podem lidar com links e imagens
- jardim. Eles estão inundados de cores a cada
(exceto em navegadores somente de texto) sem
- manhã, mas nem uma única flor
- permanece pela tarde. Eles são o perder o ritmoB. No entanto, eles não podem
- própria definição de efêmero.</p> necessariamente lidar com todos os outros tipos de
</artigo> 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.
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.
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?”
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.
22Capítulo 1
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).
<!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.
24Capítulo 1