Buscar

SolidarioFluenciaHTMLCSS

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes
Você viu 3, do total de 451 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes
Você viu 6, do total de 451 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes
Você viu 9, do total de 451 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Prévia do material em texto

Aprenda a construir com menos 
tempo e esforco layouts para web
Dedico este E-book a todos os Galuchos, 
forma carinhosa que uso para chamar 
os seguidores do Chief of Design. 
Por me inspirarem a fazer duas coisas 
que amo: criar e comunicar.
E também as pessoas que tem câncer e 
precisam de ajuda. Que esse pequeno 
gesto lhes ajude um pouco e que tam-
bém inspire outros a fazerem o mesmo.
Sumário
Apresentação ���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������10
Capítulo #1 - Ferramentas necessárias para o desenvolvimento ������������������������������������������������������������������������22
Capítulo #2 - Afinal, o que é HTML? �����������������������������������������������������������������������������������������������������������������������������������26
Linguagem de Marcação de Hipertexto �������������������������������������������������������������������������������������������������������������������������������27
A evolução do HTML ������������������������������������������������������������������������������������������������������������������������������������������������������29
W3C������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������29
Metas do W3C �����������������������������������������������������������������������������������������������������������������������������������������������������������������30
Padrões Web (web standards) ������������������������������������������������������������������������������������������������������������������������������������30
Tags HTML �����������������������������������������������������������������������������������������������������������������������������������������������������������������������30
Sintaxe HTML ������������������������������������������������������������������������������������������������������������������������������������������������������������������32
Sintaxe das tags em elementos nulos (vazios ou void) ����������������������������������������������������������������������������������������36
Tags entre Tags ���������������������������������������������������������������������������������������������������������������������������������������������������������������37
Conhecendo tags estruturais básicas em um arquivo HTML ������������������������������������������������������������������������������38
Uma forma inusitada de memorizar estas tags ������������������������������������������������������������������������������������������������������42
Indentação �����������������������������������������������������������������������������������������������������������������������������������������������������������������������44
Árvore do documento (hierarquia) �����������������������������������������������������������������������������������������������������������������������������44
Tags mais usadas em todos os HTMLs (Utilizando o Princípio 80/20) ����������������������������������������������������������������������47
<div> ����������������������������������������������������������������������������������������������������������������������������������������������������������������������������������49
<p> ��������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������52
<ol>, <ul> e <li> ����������������������������������������������������������������������������������������������������������������������������������������������������������������55
<img> ���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������59
<span> �������������������������������������������������������������������������������������������������������������������������������������������������������������������������������71
<h1> à <h6> ����������������������������������������������������������������������������������������������������������������������������������������������������������������������76
Capítulo #3 - HTML 5: a evolução! ����������������������������������������������������������������������������������������������������������������������������������� 103
As diferenças entre o XHTML e o HTML5 ������������������������������������������������������������������������������������������������������������������������ 107
<!DOCTYPE html> ������������������������������������������������������������������������������������������������������������������������������������������������������������������ 108
Definição das principais novas tags do HTML5 ������������������������������������������������������������������������������������������������������������� 112
Diferença entre Section e Article ��������������������������������������������������������������������������������������������������������������������������������������� 114
Capítulo #4 - O que é CSS? �������������������������������������������������������������������������������������������������������������������������������������������������� 116
Folha de ����������������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 117
Estilos em Cascata ���������������������������������������������������������������������������������������������������������������������������������������������������������������� 117
Como funciona o CSS? Parte 1 - Sintaxe ������������������������������������������������������������������������������������������������������������������������� 121
Como funciona o CSS? Parte 2 - Vinculando as folhas de estilos ao documento HTML������������������������������������� 128
Inline ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 128
Incorporadas ����������������������������������������������������������������������������������������������������������������������������������������������������������������� 129
Externas ������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 130
 @import url() ���������������������������������������������������������������������������������������������������������������������������������������������������������������� 135
Como funciona o CSS? Parte 3 - Tipos de seletores����������������������������������������������������������������������������������������������������� 136
Como funciona o CSS? Parte 4 - Propriedades mais usadas ������������������������������������������������������������������������������������� 143
Como funciona o CSS? Parte 4.1 - Background ������������������������������������������������������������������������������������������������������������� 148
Resumo do tópico ������������������������������������������������������������������������������������������������������������������������������������������������������������������ 164
Como funciona o CSS? Parte 4.2 - Formatando textos ����������������������������������������������������������������������������������������������� 167
Color ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������ 173
Font-family �������������������������������������������������������������������������������������������������������������������������������������������������������������������� 174
Font-weight ������������������������������������������������������������������������������������������������������������������������������������������������������������������178
Text-decoration ������������������������������������������������������������������������������������������������������������������������������������������������������������ 185
Outras propriedades para estilizar textos ������������������������������������������������������������������������������������������������������������� 187
Como funciona o CSS? Parte 4.3 - Considerações importantes �������������������������������������������������������������������������������� 189
Como funciona o CSS? Parte 4.4 (Box Model) ��������������������������������������������������������������������������������������������������������������� 205
Padding �������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 216
Diferenças entre margin e padding ������������������������������������������������������������������������������������������������������������������������� 217
Border ����������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 219
Como funciona o CSS? Parte 4.5 - Outras propriedades importantes ��������������������������������������������������������������������� 231
Position, top, right, bottom e left����������������������������������������������������������������������������������������������������������������������������� 231
Z-index ��������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 245
List-style ������������������������������������������������������������������������������������������������������������������������������������������������������������������������ 251
Float �������������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 259
Clear ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 270
Display �������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 274
Max-width, min-width, max-height e min-height ������������������������������������������������������������������������������������������������ 297
Box-shadow ������������������������������������������������������������������������������������������������������������������������������������������������������������������ 313
Text-shadow ����������������������������������������������������������������������������������������������������������������������������������������������������������������� 317
Capítulo #5 - Introdução ao Design Responsivo ������������������������������������������������������������������������������������������������������� 322
Capítulo #6 - Proposta para a construção de site ���������������������������������������������������������������������������������������������������� 334
Estrutura do site ��������������������������������������������������������������������������������������������������������������������������������������������������������� 336
Wireframe ��������������������������������������������������������������������������������������������������������������������������������������������������������������������� 337
Capítulo #7 - Codificação do site Galucho ������������������������������������������������������������������������������������������������������������������� 341
7.1 - Montar a estrutura HTML comum em todas as páginas do site dentro da página modelo ����������������������� 343
O corpo do site ������������������������������������������������������������������������������������������������������������������������������������������������������������� 343
O topo ����������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 344
O menu de navegação ������������������������������������������������������������������������������������������������������������������������������������������������ 346
A área que abriga o logo do site ������������������������������������������������������������������������������������������������������������������������������ 346
A área que abriga o slogan ���������������������������������������������������������������������������������������������������������������������������������������� 347
O Box de conteúdo ������������������������������������������������������������������������������������������������������������������������������������������������������ 348
O Rodapé ����������������������������������������������������������������������������������������������������������������������������������������������������������������������� 348
7.2 - Estilizar, com folhas de estilo, a estrutura padrão do site para resoluções menores que 480 pixels ����� 351
A “body” e o corpo do site ����������������������������������������������������������������������������������������������������������������������������������������� 352
O topo ����������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 356
O Box de conteúdo ������������������������������������������������������������������������������������������������������������������������������������������������������ 370
7.3 - Estilizar a estrutura para resoluções de no mínimo 480 pixels ������������������������������������������������������������������������ 377
O topo ����������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 385
7.4 - Estilizar a estrutura para resoluções de até no mínimo 767 pixels ����������������������������������������������������������������� 389
O topo ����������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 389
O rodapé ������������������������������������������������������������������������������������������������������������������������������������������������������������������������ 395
7.5 - Estilizar a estrutura para resoluções de até no mínimo 991 pixels ����������������������������������������������������������������� 397
7.6 - Salvar cópias do modelo para construção das Páginas Home e Portfólio ���������������������������������������������������� 399
7.7 - Completar o restante dos códigos HTML da Home Page ����������������������������������������������������������������������������������� 404
7.8 - Finalizar a estilização da Home Page para resoluções menores que 480 pixels ����������������������������������������� 408
Estilizando o slideshow ��������������������������������������������������������������������������������������������������������������������������������������������� 409
Estilizando o texto da missão do site ��������������������������������������������������������������������������������������������������������������������� 414
Estilizando a galeria de imagens ����������������������������������������������������������������������������������������������������������������������������� 415
7.9 - Finalizar a estilização da Home Page para resoluções de até no mínimo 480 pixels ��������������������������������� 417
7.10 - Finalizar a estilização da Home Page para resoluções de até no mínimo 767 pixels ������������������������������ 419
7.11 - Finalizar a estilização da Home Page para resoluções de até no mínimo 991 pixels ������������������������������ 422
7.12 - Completar o restante dos códigos HTML da página de portfólio�������������������������������������������������������������������425
7.13 - Finalizar a estilização da página de portfólio para resoluções menores que 480 pixels ������������������������� 431
7.14 - Finalizar a estilização da página de portfólio para resoluções de até no mínimo 481 pixels ����������������� 437
7.15 - Finalizar a estilização da página de portfólio para resoluções de até no mínimo 767 pixels ���������������� 438
7.16 - Finalizar a estilização da página de portfólio para resoluções de até no mínimo 991 pixels ����������������� 439
Parabéns!!! Terminamos o site do Galucho!!! ������������������������������������������������������������������������������������������������������������������ 440
O mundo começa agora. Apenas começamos ����������������������������������������������������������������������������������������������������������� 441
Referências Bibliográficas ��������������������������������������������������������������������������������������������������������������������������������������������������� 445
Agradecimentos ��������������������������������������������������������������������������������������������������������������������������������������������������������������������� 449
Sobre o Autor �������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 450
10
Apresentação
 11
Estamos no século da informação, da internet, da tecnologia.
Tudo no mundo muda muito rápido e tudo mudou principalmente nos últimos 20 anos. E a In-
ternet e a WEB propiciaram boa parte dessas mudanças em todos os aspectos. 
Tudo hoje em dia, praticamente, gira em torno da internet. Usamos a internet para tudo: comprar 
roupas, alimentos, falar com algum parente distante, pagar contas, chamar táxi e etc.
Essa mudança afetou todas as áreas inclusive, claro, a do trabalho. Novas profissões começaram 
a “bombar” e outras praticamente sumiram, principalmente quando se trata das áreas de comu-
nicação e informação. 
E hoje em dia falar de comunicação sem levar em conta a WEB é um sacrilégio.
 
Por isso a internet demanda muita mão de obra em todas as partes do processo: desde o design, 
até o atendimento de suporte. Eu comecei a trabalhar por causa dessa demanda. Eu nasci profis-
sionalmente, praticamente na web.
 
Essa demanda está há muito tempo aquecida e por isso muita gente quer entrar para surfar nessa 
onda. E é muito provável que você aí queira também, não é?
Então se você almeja ser um surfista profissional, surfando nas ondas da web, 
você pode trabalhar como Web Designer, Front-End, Desenvolvedor, etc. Porém 
para isso se tornar realidade uma coisa é certa: terás que saber como funciona a 
web. E a web nasceu, basicamente, com uma linguagem de marcação chamada 
HTML.
Claro que dependendo da profissão escolhida você precisará se especializar em HTML ou no mí-
nimo “saber como funciona”. Ao longo da minha carreira percebi grandes dificuldades das pesso-
as, principalmente, os oriundos do design gráfico, publicidade e criativos em geral, em aprender 
essa linguagem de marcação. Percebi essa dificuldade principalmente quando comecei a minis-
12
trar aulas, aos 23 anos, de Web Design.
 
Após lançar o blog Chief of Design essa constatação só aumentou através do “feedback” de vários 
leitores do blog. Por causa disso eu sempre pensei em tentar ensinar HTML/CSS de um jeito di-
ferente do modo comum visto por aí, mas eu relutava em fazê-lo ora seja por questão de tempo, 
ora por pensar que minhas ideias eram ”muito loucas”, e por aí vai…
 
Eu sei que neste momento você pode estar um pouco desconfiado desse novo método, ressabia-
do se irá aprender HTML mesmo... 
 
Mas você gostaria de criar sites de forma mais fácil, né ?
 
Gostaria de ter mais independência para atuar como freelancer e até aumentar a sua renda 
com isso? 
Gostaria de aperfeiçoar o seu currículo e até trabalhar com isso?
Gostaria de não ficar “perdido” quando precisa fazer alguma alteração em um site?
Gostaria de construir seu próprio blog com mais embasamento?
 
Então, deixe essas desconfianças, pois eu trago para você, neste E-book a oportunidade de virar 
o jogo. 
Preparado? Então vamos nessa!
 13
Por que ler este E-book?
Forneço-te o conhecimento necessário para você criar suas primeiras páginas de internet e in-
terpretar os códigos mais comumente usados.
Você será capaz de ver o que você planejou sendo renderizado nos navegadores e em diferentes 
dispositivos do que jeito que sempre quis. E ainda será capaz de executar a manutenção de sites 
já existentes.
 
E aí você me indaga: Mas como será isso? De que forma pretendes resolver meu problema? 
Qual o diferencial deste E-book?
 
Calma! Logo, logo lhe contarei isso, po-
rém antes quero que reflita algo sobre o 
comportamento humano em relação à 
aprendizagem e em relação à motivação.
Aprendizagem 
Desde que nascemos absorvermos infor-
mações do ambiente externo, muitas de-
las vindas dos nossos pais e pessoas que 
nos cercam.
Desde bebezinhos aprendemos aos pou-
cos a nos comunicar, com alguns erros, 
erros estes corrigidos com o tempo, até 
que chegamos à fase pré-escolar de for-
ma que já conseguimos nos fazer enten-
der.
14
Lógico que nesta fase estamos longe da pronúncia perfei-
ta, porém já temos fluência e até então nos comunicamos 
facilmente sem sermos ainda apresentados à gramática, 
ou seja, para fazer-se entender você precisa ter fluência na 
Língua Portuguesa e não necessariamente ser um letrado. 
Então anota aí: 
Para aprender construir suas primeiras páginas 
de internet você precisará ter fluência nas lin-
guagens HTML e CSS. 
Mas a frente de explico como isso é possível.
Motivação
 
Sabemos que muitas pessoas tem facilidade em aprender 
linguagens para construção de sites. Isto é fato. 
O problema é que esta tal “facilidade” já se tornou um mito 
na web que pode parecer absurdo questioná-la. Conse-
quentemente este mito já se impregnou na mente de mui-
tos através da comunidade web.
 
Isto é uma crença que cada vez mais pertence ao imagi-
nário coletivo de quem trabalha com isso. Basta digitar no 
Google “HTML é fácil” e temos 167 milhões de resultados. 
Fica difícil apostar que não. Concorda?
 
Só que na verdade muitas pessoas não tem essa tal facili-
 15
dade. E como já disse acima, constatei isso ao lecionar aulas em cursos de Web design, no dia a 
dia, no “feedback” do público do Chief através de pesquisas, e-mails e mensagens.
 
Entretanto, você, com a certeza de que o mundo inteiro aprende facilmente, gasta sua energia 
tentando uma, duas, três e mais algumas vezes sem sucesso e cai na armadilha da desmotivação. 
Daí para não se passar de “burro” é preferível arrumar uma desculpa e desistir, reforçando o mito 
que aprender HTML é fácil.
 
Primeiro é que não existe essa de “burro”. Segundo é que as pessoas não são iguais. Sendo assim 
o que é fácil para um, pode não ser para outros. E para encerrar, se você já teve contato alguma 
vez com HTML e CSS, é bem provável que você teve a falsa percepção que é tudo muito compli-
cado e o que você sentiu de verdade, na sua percepção, é que essas linguagens são um saco.
 
Só a verdade não é bem essa. Pelo contrário meu amigo, Galucho! Aprender HTML e CSS é muito 
legal, desde que a forma que for passada para você não seja tão somente uma receita de bolo 
mecânica e desmotivadora que ocupe sua memória, não te transmita significados e te canse a 
ponto de que no dia seguinte você não se lembre de nada.
 
Vou te mostrar que é possível enxergar e mesclar formas diferentes de entender questões.
Pense comigo: 
As pessoas podem ser motivadas ao aprendizado por métodos diferentes. 
Algumas aprendem linguagens apenas repetindo o que um tutor fornece e isso 
basta para que elas achem o conteúdo fácil. Já outras precisam de simbologias 
e significados que se relacionem com um conhecimento prévio para que o con-
teúdo seja absorvido facilmente.
 
Consegues enxergar isso?
 
Tendo explicado as questões sobre aprendizageme motivação, chegou a hora de te falar o que 
este livro propõe e como a proposta se apresentará.
16
Neste livro proponho que você se jogue efetivamente no mundo prático e não fique aguardando 
conhecer todos os fundamentos, todas tags, toda a sintaxe e semântica das linguagens só para 
depois você ter a confiança de construir seus sites.
 
Não que não seja importante aprender todas as normas e regras que o HTML e CSS exigem, pelo 
contrário, mas o tempo que você levará para aprender algo que você usará poucas vezes, você 
pode investir nos conceitos mais utilizados. Isso te dará a “fluência” necessária.
 
Aos poucos, quando seus projetos exigirem outros elementos você vai incorporando-os em suas 
habilidades. Como uma criança que vai juntando o quebra cabeça da comunicação. Como o 
motorista, que já habilitado, vai aos poucos ganhando confiança no trânsito. Ele não tem como 
aprender tudo de uma vez, entretanto a cada novo trecho de pista que enfrenta com responsa-
bilidade , ele se tornar um motorista cada vez melhor.
 
Agora, habilitado, sentado no banco do motorista, com o carro na garagem, lendo a surrada 
apostilha de CFC (Centros de Formação de Condutores) pela enésima vez, ninguém chega à 
praia, não é? Isto é “overload” de informação com zero de prática.
 
Este livro te estimulará a não ficar esperando o momento certo para agir. Porque esperar causa 
paralisação e o momento certo nunca chega. 
Não deixe o medo de se sentir incompleto te paralisar! 
Agora vou te mostrar que não é preciso estar 100% pronto para por a mão na massa.
Você conhece o Principio 80/20 de Vilfredo Pareto?
Este princípio se demonstra mais ou menos assim: Cerca de 80% dos resultados que obtemos 
estão relacionados com 20% dos nossos esforços. E o que isso quer dizer? 
Quer dizer, que de todas as ações (100%) que você aplica em algo, 20% delas são responsáveis 
por 80% dos resultados. Que doido!!!
17
Isso quer dizer também que 80% das ações (a grande 
maioria) que você se mata executando te leva para me-
nor parte dos resultados. Que cansativo, né?
Essa relação 80/20 não é precisa, é algo aproximado.
Agora tente observar em nosso universo prático. Por 
exemplo, uma empresa de produtos de limpeza que tem 
uma gama enorme de produtos, certamente somente 
cerca de 20% destes produtos estão relacionados com os 
80% de lucro da empresa. Sacou?
 
A gente não quer que você, que está começando agora, 
fique se matando com 80% de sobrecarga de informação 
que só te trará 20% dos resultados.
Por isso este livro foca na melhor informação (os tais 
20%, se lembra?) para que você tenha mais tempo livre 
e mais resultados. Consequentemente com este tempo 
livre você pode descansar a mente e reempregar em ou-
tras atividades.
 
Reafirmo que uma das propostas do livro é focar nos fun-
damentos que trazem efetivamente a maior parte dos 
resultados, que já podem ser aplicados em poucos dias 
até que lhe traga a “fluência” necessária para assumir seus 
primeiros projetos. 
É um atalho para seu aprendizado. Ok?
 
Acredito que só de saber que você trabalhará com o 
que realmente trará resultados efetivos já é algo muito 
18
motivador, não é mesmo? Mas talvez para alguns ainda não seja o suficiente.
 
Então o que mais proponho apresentar para manter sua motivação em alta durante seus estudos?
Não tem jeito! Em algum momento deste livro você terá que repetir códigos como em uma recei-
ta de bolo. Isto é necessário para que você adquira conhecimentos prévios que te ajudarão nos 
exercícios mais avançados. Porém, sempre que possível, deixaremos esta tarefa mais agradável.
Sabemos que quanto mais repetimos uma tarefa mais ficamos bons nela. A repetição nos serve 
para ganhar um nível mínimo de competência. Mas, fala sério... Ficar repetindo exercícios muitas 
vezes é muito chato. 
Portanto, para não cair no mar de lama da desmotivação que é a grande responsável pelas desis-
tências e pelas desculpas que reforçam o mito que aprender HTML e CSS é fácil (mas pode ser), 
iremos apresentar o conteúdo deste livro da seguinte forma:
• Apresentação da sintaxe para construção dos elementos das linguagens HTML e CSS.
• Sempre que aplicada a sintaxe ela virá acompanhada de uma explicação semântica dos ele-
mentos.
• Sempre que possível, usaremos uma apresentação lúdica dos elementos. 
O cérebro retém informação com mais facilidade enquanto você se diverte, sente algum tipo 
de prazer ou emoção.
• Repetição mecânica dos exemplos. Porém com pouca carga para não cair na armadilha da 
desmotivação (lembra-se?)
• Sempre que possível apresentar os exemplos embutindo as habilidades já adquiridas e soman-
do a experiências, conhecimentos prévios e a outros tipos de associações. Isso faz com que 
nosso cérebro experimente outros contextos de aprendizagem.
 19
• Conforme as etapas anteriores forem cumpridas, partiremos para a aplicação prática. Cada 
elemento explicado no conteúdo, seguindo a ordem de apresentação, será demonstrado em 
um layout predefinido. Teremos aqui a oportunidade de praticar e automatizar nossas habili-
dades básicas e fundamentais (os 20%) enquanto trabalhamos em outras mais avançadas.
• Também forneceremos links para os exemplos e para arquivos, onde você poder baixar para 
seu computador e comparar com o que você fez.
• E por fim, pausa para descanso, Galucho! Isso mesmo, descanso. Sabe por quê? 
 Não adianta você passar horas em cima de uma assunto pensando que assim irá aprender mais 
 rápido. O cérebro satura, “a cabeça pesa”... Ele (o cérebro) tem pouca capacidade de absorver 
 novos conhecimentos em grandes períodos de tempo. Por isso precisamos fracionar os estu-
 dos para conseguirmos absorver melhor o conhecimento que adquirimos.
“Você precisa de motivação para aprender HTML/CSS, e não de paciência.”
A fim de melhorar o aprendizado e assimilação do conteúdo doE-book que, por vezes, é bastante 
técnico, inserimos no E-book certos símbolos e gráficos. 
A seguir segue uma descrição de cada um:
Este é o “Chefinho”. E ele está aqui para te ajudar na compreensão do ebook. 
Portanto o nosso chefinho aparecerá em exemplos, dicas e observações im-
portantes. Fique ligado e sempre que ele aparecer e preste atenção. 
20
Este retângulo trajeado indica que existem informações, notas, links, dicas e 
observações importantes que devem ser lidos dentro do contexto e de imedia-
to para que sejam compreendidos corretamente. Este tipo de retângulo pode 
aparecer tanto na cor vermelha, branca ou azul e com a companhia ou não do 
“Chefinho”. Então, fique atento!
Todos os arquivos usados nos exemplos, de todas as partes, estarão disponíveis 
para você na internet, para que você possa baixá-los e compará-los (sem co-
piar, hein!) com os arquivos que você criou aí na sua máquina. 
Você encontrará esses links ao longo do ebook (nos encerramentos de certos 
tópicos) e também no final, na página de referências.
Ao longo do ebook você pode encontrar alguns links inseridos dentro dos 
conteúdos. Estes links são conteúdos complentares, ao assunto que está sen-
do tratado, para que você possa acessar depois.
Fique atento quando algum código aparecer diretamente nas páginas. 
Dentro dos próprios exemplos, ao invés de conteúdo fictício, podem estar di-
cas que te ajudarão no seu percurso.
<tag>
 <outraTag> 
 DICAS 
 </outraTag> 
</tag>
 21
Bom, agora que você já sabe um pouco mais sobre o E-book , espero que tenha uma agradável 
leitura e um aprendizado efetivo. Como reforço eu te peço disciplina e dedicação, OK?
Então, vamos começar a aprendizagem!!!
Seja bem-vindo. :D
Você pode (deve) reportar possíveis erros que encontrar aqui nesta obra.
Para isso basta mandar um email para contato@chiefofdesign.com.br.
Um dos pontos fundamentais do ebook é a pausa para o descanso.
Não adiantar ficar horas a fio estudando. Seu cérebro não armazenará tudo 
de uma vez. Estude , mas reserve um tempinho para o desncaso também.
22
Ferramentas necessárias 
para o desenvolvimento23
Antes de começar a colocar a mão na massa, você precisará equipar-se de ferramentas que irão 
auxiliar-te no desenvolvimento dos exercícios, no entendimento dos mesmos e também do con-
teúdo como um todo.
Basicamente precisaremos de um computador (óbvio), um navegador e um editor de texto.
Navegador
Para conferirmos nosso HTML precisaremos fundamentalmente de um navegador (browser) mo-
derno. Não importa o sistema operacional nem o dispositivo.
Mas recomendo que você baixe, pelo menos, os principais navegadores na sua máquina: 
Google Chrome, Mozila Firefox e Internet explorer. 
Ainda podemos também baixar o Opera, o Safari da Apple... 
Mas a escolha é sua. Normalmente o Google Chrome, por usar webkit (motor de renderização) 
assim como o Opera e o Safari, por si só já nos dá um resultado satisfatório.
O mais importante é ter em mente que sempre ao desenvolvemos, precisaremos testar nossos 
sites e aplicações em vários navegadores. Precisamos que nossos projetos suporte os principais 
e/ou ao máximo de navegadores possíveis. Isso se chama “Cross-Browser”.
24
Para desenvolver os projetos normalmente uso o Google Chrome e o Firefox, mas isso varia. Eu 
recomendo que usemos, nos exemplos, o Chrome porque já vem com um depurador embutido, e 
vamos precisar de um depurador para nos ajudar, e também por ser um dos mais populares nave-
gadores.
Editor de texto.
Para criar documentos HTML e 
CSS precisamos de um editor de 
texto sem formatação ou algum 
ambiente de desenvolvimento in-
tegrado (IDE). 
IDE são softwares que geralmente 
contém um editor de texto, mais 
um depurador e um gama de re-
cursos e plugins, que podem ser 
WYSIWYG ou não. IDE ajudam, e 
muito, no nosso cotidiano de de-
senvolvimento.
WYSIWYG é uma sigla em inglês 
que significa “What You See Is 
What You Get” ou “O que você vê 
é o que você obtém”. Esse termo é usado para definir softwares onde você já vê o resultado, ou algo 
muito similar, enquanto cria.
Então, podemos usar até o “Bloco de Notas“ se quisermos, todavia é mais interessante usar algum 
editor software específico para isso e que nos ajudará mais no entendimento da matéria, na orga-
nização e otimização dos processos.
 25
Existem vários softwares com esse fim: 
Dreamweaver, NetBeans, Eclipse, WebStorm, etc. 
Você pode usar qual preferir, qual se sentir mais à vontade.
 
Nos exemplos deste livro usarei o Sublime Text. O Sublime Text é gratuito, leve, tem vários plu-
gins e tem um visual bem agradável. 
Você pode baixá-lo, se quiser, no site:
 
www.sublimetext.com.
Como o principal objetivo é primeiro fazer você ganhar fluência, deixaremos para outra oportu-
nidade o uso de outros softwares de testes e de edição mais avançados.
Com essas ferramentas, citadas acima, em mãos já podemos partir para a próxima fase. 
Vamos lá? :)
26
Afinal, o que é HTML?
 27
HTML = “HyperText Markup 
Language”
 
OU
Linguagem de 
Marcação de Hipertexto
Afinal, o que é HTML?
28
HTML é uma linguagem de marcação que foi inventada na década de 1990 por um cientista cha-
mado Tim Berners-Lee. 
A finalidade inicial era tornar possível o acesso e a troca de informações, de documentações e de 
pesquisas, entre cientistas de diferentes universidades. 
O projeto inicial tornou-se um sucesso jamais imaginado por Tim Berners-Lee. Ao inventar o 
HTML ele lançou as fundações da Internet tal como a conhecemos atualmente.
O HTML se popularizou através do primeiro browser da história: O Mosaic.
Mosaic - browser desenvolvido por Marc Andreessen na década de 1990. Desde então vários de-
senvolvedores e fabricantes de browsers surgiram utilizando o HTML como base.
O HTML é uma linguagem universal na internet para distribuir informação e conteúdo. Ele é ba-
seado no conceito de Hipertexto, ou seja, ligações/conexões entre elementos como imagens, 
documentos, vídeos, áudios, palavras, etc.
 
O hipertexto é uma forma não linear de distribuir e dispor os conteúdos no meio digital.
Aquilo que você vê quando abre uma página na Internet é a interpretação que seu navegador faz 
do HTML. 
O HTML é a linguagem que usamos para publicarmos conteúdo (texto, imagem, vídeo, áudio e 
etc) na Web.
 29
A evolução do HTML:
• 1991 - HTML;
• 1994 - HTML 2;
• 1996 - Surgimento do CSS 1 + JavaScript (veremos mais para frente o que é CSS);
• 1997 - HTML 4;
• 1998 - CSS 2;
• 2000 - XHTML 1;
• 2002 - Tableless;
• 2009 - HTML 5 (Em 2004 surgiu um grupo o WHATWG, em 2011 este junta-se à W3C para con-
solidar o HTML5);
• 2014 - HTML5 (em 28 de outubro de 2014 HTML5 se tornou uma recomendação oficial do 
W3C).
W3C
Fundado em 1994, por Tim Berners-Lee, o W3C (World Wide Web Consortium) é uma organização 
sem fins lucrativos composta por cerca de 400 membros cuja missão é levar a World Wide Web 
ao seu potencial máximo, desenvolvendo protocolos e diretrizes que garantam o crescimento a 
longo prazo da Web.
30
Metas do W3C
• Web para todos.
• Web em qualquer dispositivo.
• Web como uma base de conhecimento.
• Web confiável e segura.
Padrões Web (web standards)
Os Padrões Web são as recomendações do W3C (World Wide Web Consortium), as quais são des-
tinadas a orientar os desenvolvedores para o uso de boas práticas a fim de tornar a web acessível 
para todos.
“Não faça seu site de qualquer jeito Faça certo!!! Utilize os padrões Web.”
Tags HTML
Todo documento HTML é feito a partir de elementos de marcações e estes são formados através 
de tags. Estas marcações definem o tipo de conteúdo e informam ao navegador como ele deve 
ser apresentado na página.
Tags são marcas específicas que marcam delimitando o conteúdo e informando ao navegador 
sobre que tipo de informação se trata (um título, um parágrafo, uma lista). Toda tag contém um 
nome (nome da marca) e este também dá designação ao elemento HTML.
Todo elemento visual que você identifica em uma página web, desde um texto, uma foto ou um 
 31
vídeo, são inseridos através de tags.
 
Por exemplo, um parágrafo que você encontra em um texto na web é, ou deveria ser, marcado 
com uma tag que faça o navegador identificar o elemento como um parágrafo. Para isso será ne-
cessário de uma tag específica denominada “p”.
Mas chega de teoria e vamos à prática. O que você quer saber mesmo é como é que se faz para 
mostrar o conteúdo nas páginas, certo? Então vamos ao que chamamos de sintaxe, ou seja, a 
forma de montar o código HTML. 
Para isso vamos primeiro entender como se “mexe” com as tags e depois como montar uma es-
trutura HTML básica. Ok?
 
Vamos nessa!
32
Sintaxe HTML
Já sabemos que todo elemento HTML é formados por tags. As tags tem o seguinte formato:
Começam com um sinal de menor “<”, terminam com um sinal de maior “>” e entre esses sinais 
vai o nome da tag do elemento que queremos inserir em nosso documento.
33
Para constituir o elemento HTML precisamos de dois tipos de tags mais o conteúdo. Os dois tipos 
de tags são:
• A tag de abertura que marca o início do elemento: <tag>.
• E a tag de fechamento que marca o fim do elemento: </tag>.
A diferença entre elas é que na tag de fechamento existe uma barra “/”. 
Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento representa o 
conteúdo. E este será processado segundo o comando contido na tag.
Para exemplificar vamos usar o elemento HTML que marca parágrafos.
 
Começamos com a tag de abertura: 
34
Primeiro inserimos o sinal de menor, em seguida o nome da tag do elemento “parágrafo”. E para 
finalizar, inserimos o o sinal de maior.
Resultado:
Simples assim!
Posteriormente colocamos o conteúdo textual que desejamos apareça no parágrafo. 
Resultado:
E para finalizar colocamos a tag de fechamento. Resultado:
Meu primeiro parágrafo!
Meu primeiro parágrafo!
35
E as tags não podem ter espaços entre os sinais de maior para o comando. Ex: < tag>.
As tags podem ser escritas tanto em maiúsculo quanto minúsculo, entretanto por questões de 
estética e também por indicação dos padrões web e boas práticas, recomenda-se todo o usoem minúsculo. Exemplo:
<TAG> - válido, mas é não é uma boa prática.
<tag> - boa prática.
Resumindo:
Basicamente o código para inserir um elemento HTML segue a lógica apresentada acima, mas 
como toda a regra existe exceções, com as tags não seria diferente! 
 
É o que vamos ver a seguir ao conhecermos os “elementos nulos”. 
<tag>Conteúdo a ser visualizado na página web</tag>
36
Sintaxe das tags em elementos nulos (vazios ou void)
Elementos nulos são marcações que só possuem tag de abertura. Elas têm um fechamento 
automático. 
Essas tags não podem conter texto ou elementos aninhados dentro deles, já que não possuem 
tags de fechamento.
Exemplo:
 
<input/> texto - Errado.
<input> texto </input> - Errado.
<input/> - Certo.
Em arquivos XHTML estas tags possuem auto-fechamento, ou seja, a barra (/). 
Já para especificação W3C em HTML5 não necessita de auto-fechamento, apesar de não trazer 
efeito algum ao elemento seu uso. Vamos ver como fica a sintaxe?
Em XHTML: <tag/>
Em HTML: <tag>
 37
Estas são as tags de elementos nulos:
• area,
• base,
• br,
• col,
• hr,
• img,
• input,
• link,
• meta,
• param.
Com o advento do HTML5
foram adicionadas, nesta lista, as tags:
• command,
• keygen,
• source.
Não é preciso que você se preocupe em memorizá-las, Galucho. Foque em saber que elas exis-
tem e como funciona a forma de escrever a sintaxe do código, ok?
Tags entre Tags
Um elemento HTML pode conter outra tag entre suas tags, e quantas forem necessárias. 
Isso define uma hierarquia entre os elementos: o elemento externo pode ser definido como ele-
mento pai e a interno como elemento filho. 
Vejo exemplo:
38
Vou exemplificar melhor sobre hierarquia depois, 
porque antes precisamos entender uma estrutu-
ra básica de HTML, no tópico a seguir.
 
Conhecendo tags estruturais básicas em um arquivo HTML
Finalmente você mexerá no Sublime Text (ou se preferir outro editor de texto). Agora vamos fazer 
nosso primeiro código. E nele vamos inserir tags HTML fundamentais. Então, abra o Sublime Text 
( ou o seu editor favorito) e vamos começar!
Em qualquer página de internet de qualidade que se preze você encontrará está uma estrutura 
básica de tags. Portanto abra seu editor de texto e inicie um novo arquivo. Iremos usar todos os 
conceitos para construção de tags que vimos anteriormente. Começaremos pela tag raiz de todo 
e qualquer página HTML. Digite:
<tag>
 <outraTag> 
 Conteúdo
 </outraTag> 
</tag>
 39
 
Este é o elemento “html” que dá início a estrutura. Você pode notar a presença do sinal de menor 
e maior mais o nome do elemento que forma a tag de abertura. E notar no fechamento que re-
petimos a mesma regra, porém adicionando uma barra antes do nome do elemento.
Agora iremos aplicar o que vimos sobre tags dentro de tags. O elemento “html” englobará todas 
as demais tags que formam um documento HTML. Entenda-se documento HTML como o arqui-
vo que será interpretado pelos navegadores para formar uma página web.
Você digitará entre as tags de abertura e fechamento do elemento HTML as tags de um elemento 
chamado “head”. Ficará da seguinte forma:
Como você já sabe muito bem as tags seguem o modelo de abertura e fechamento. O elemento 
“head” está contido dentro do elemento “html”. Eles são elementos filho e pai respectivamente. 
Esta hierarquia, consideramos como árvore do documento ( assunto que ainda será abordado).
Dando prosseguimento... Agora vamos colocar o terceiro elemento básico que é o “title” entre as 
tags do elemento “head”. E ficará assim:
40
Em seguida entre as tags de abertura e fechamento do elemento “title” coloque um título que 
você deseja para a sua página. Por exemplo: “Minha primeira página web”.
 
E para encerrar a estrutura básica colocaremos um elemento de suma importância em um docu-
mento HTML. Falo do elemento “body”. Ele ficará sempre entre as tags do elemento “html”. 
Entretanto a sua tag de abertura sempre virá após a tag de fechamento do elemento “head”. 
Veja a seguir:
 41
Significado das tags usadas:
<html></html>: São tags que delimitam o documento HTML. É a raiz deste documento.
<head></head>: São tags que delimitam o cabeçalho. É onde se encontra outros elementos de 
cabeçalho.
<title></title>: Correspondem ao título que você vê na parte superior do seu navegador (barra 
de ferramentas). São tags contidas dentro do elemento “head” (<head></head>) e que dá o nome 
da página. Além disso elas fornecem um título para a página quando ela é adicionada aos favo-
ritos e para visualização nos resultados de buscas.
<body></body>: Estas tags são responsáveis por mostrar todo o conteúdo de uma página. É o 
“corpo da página”. E é dentro delas que ficam outras tags específicas para inserção de conteúdo 
e de divisão de seções. 
42
Uma forma inusi-
tada de memorizar 
estas tags
O uso dos elementos: html, 
head, title e body é pratica-
mente “mandatório” para o 
bom andamento do seu códi-
go. Isso quer dizer que sempre 
você estará usando-os. Talvez 
você memorize-os logo de 
cara.
Entretanto pode ser que al-
guns não tenham essa facilida-
de. Para isso nada melhor que 
uma imagem lúdica, somada a 
um pouco de imaginação, para 
fixar o conceito na memória. 
É... Este carinha é quem você 
está imaginando mesmo. (o 
que não faço para te ajudar, 
hein? :D)
Como já disse, na introdução 
deste livro, o cérebro retém in-
formação com mais facilidade 
enquanto você se diverte. E 
com certeza você não terá que 
 43
cansar de repetir várias vezes para memorizar estas tags, basta se lembrar desta imagem ao lado.
Esta obra de vanguarda (hehe) procura associar os nomes, em inglês, de elementos HTML às 
particularidades que vemos em um indivíduo comum. (associação que outros autores já fizeram 
também, diga-se de passagem.)
Brincando com os elementos ,da forma mais estranha possível, você facilita a fixação. 
Isto vai de encontro com a aprendizagem significativa de David (não, eu!), o Ausubel (grande psi-
cólogo de educação americano). Onde os novos conhecimentos que se adquirem relacionam-se 
com o conhecimento prévio que a pessoa já possui. 
Você pode até não ser ainda “expert” em HTML, porém você sabe o que é um corpo. Esse seu co-
nhecimento prévio que agora, propositalmente, uso para te ajudar.
Fica até mais fácil de você lembrar o elemento “head”, que literalmente significa cabeça, a uma 
cabeça. Tão obvio! Para associar tag body (corpo) usei o restante do corpo do indivíduo. O ele-
mento “title” está dento de head, da cabeça. Associasse então o individuo da imagem verbalizan-
do um título com um balão.
Lógico que isto não se aplica a todo mundo. Uns memorizam repetindo um exemplo, outros as-
sociando a algo já experimentado. 
Quando você estiver definitivamente escrevendo esses códigos não precisará lembrar-se desta 
imagem. Será algo automático e você estará em outro nível onde usará este seu conhecimento 
para associar e absorver conhecimentos mais avançados.
Bom... Você já deve estar entendendo como a montagem do código HTML funciona. Entretanto 
ele está muito bagunçado. No tópico a seguir você vai aprender como a deixá-lo organizado. 
44
Indentação
Indentação é o ato de indentar. Ele consiste em organizar seu código para que ele fique estetica-
mente agradável e principalmente legível. 
Isto é muito importante para que possamos encontrar determinada informação ou código, quan-
do estamos criando um site ou fazendo sua manutenção. E como fazemos isso?
Basta criar espaços em branco ou usar a tecla “TAB” em nosso código HTML. Precisamente antes 
da tags de aberturas.
Veja no exemplo abaixo:
Árvore do documento (hierarquia)
Como você pode ver, nos exemplos encontrados nos tópicos anteriores, existem elementos den-
tro de outros elementos. Isso é possível através de tags de um elemento que ficam entre as tags 
de abertura e de fechamento de outro elemento. Esse processo de inserir um elemento dentro de 
outro chamamos de “aninhamento.
SEM Indentação COM Indentação
 45
Através da indentação fica 
mais fácil identificarum ele-
mento aninhado em outro e 
também a forma como eles 
se relacionam.
 
Para compreendermos este 
relacionamento devemos en-
tender o conceito de árvore 
do documento.
Um conhecimento que é 
absorvido, pela maioria das 
pessoas, é sobre a árvore ge-
nealógica de uma família. 
Usaremos esse conhecimen-
to prévio para explicar o fun-
cionamento da árvore de um 
documento.
Em qualquer família existe o 
grau de parentesco que de-
termina a relação entre seus 
integrantes. 
De forma similar, na árvore 
do documento, os elementos 
da marcação se relacionam 
entre si como se relacionam 
os integrantes de uma família.
 
46
Para entender, usamos os elementos HTML que já conhecemos até o momento. Existem elemen-
tos HTML pai, filho, irmãos, ancestrais, descendentes, entre outros.
A imagem anterior, que representa a árvore do documento, nos possibilita identificar o relacio-
namento de hierarquia entre os elementos.
Segue o que podemos identificar na nossa árvore:
• O elemento “html” é pai dos elementos “head” e “body”.
• O elemento “title” é filho do elemento “head”. E o inverso, obviamente, “head” é pai de “title”.
• Os elementos “html” e “head” são ancestrais de “title”.
• O elemento title é descendente do elemento “html”.
Depois que estamos acostumados com HTML é possível presumir a hierarquia entre os elemen-
tos simplesmente observando um bloco de notícias com textos, imagens e outros elementos 
visuais em uma página web.
 
Porém, para confirmar, deve sempre conferir o código fonte.
Outra coisa que podemos notar é que além de existir elementos dentro de outros elementos, 
existem aqueles que estão no mesmo nível de hierarquia. Observando os códigos anteriores no-
tamos este nível de hierarquia entre os elementos “head” e “body”.
47
Tags mais usadas em todos os HTMLs 
(Utilizando o Princípio 80/20)
Como já dito neste livro, quando Tim Berners-Lee criou o HTML, a finalidade inicial era trocar 
informações e acessar documentação de pesquisa entre cientistas de diferentes universidades. 
Até então o aspecto das páginas era bastante simples.
Antes disto, toda a informação para leitura era concentrada na mídia impressa. Para um trabalho 
escolar era normal frequentar bibliotecas a procura de livros, revistas, etc.”
Conforme a web foi evoluindo surgiram os primeiros navegadores, portais de notícias, provedo-
res de acesso e serviços de buscas.
 
Com o tempo surgiram outras versões de HTML. Os hardwares e a conexão na internet também 
avançaram. O custo de acesso baixou o que estimulou o crescimento do número de usuários.
 
Sites institucionais eram criados aos montes. E finalmente, no ponto onde eu queria chegar, a 
mídia impressa começou a migrar uma parte de seus esforços ao universo digital para angariar 
seguidores. 
E você deve estar se perguntando: “O que isso tem a ver com as tags mais usadas?”
E eu te digo: Tudo!!! 
Porque as tags mais usadas são aquelas que dão significados a linguagens visuais que encontra-
mos no meio impresso. Hoje em dia uma página web é como fosse um espelho digital de uma 
Tags mais Usadas(20%) = Site HTML(80%)
48
página de revista. Lógico que não em sua totalidade, o usuário é passivo diante de uma revista 
gráfica. Mas sim, em comparação com uma época jurássica na timeline da web, onde as tags já 
existiam, porém os sites eram abarrotados de frames e layouts estruturados em tabelas, também 
de elementos, navegações e menus em flash ou em javascript, como protagonistas.
Devemos agradecer as empresas de comunicação, as revistas, os jornais, as editoras por aderi-
rem à internet. Isso com certeza não foi o fator mais importante, mas contribuiu para o desenvol-
vimento de tecnologias para produção de conteúdo dinâmico sem espaço para firulas.
Agradecemos também aos pioneiros do HTML por desenvolver elementos que representam ana-
logicamente tudo o que sempre foi usado no meio impresso agora também para web. E a W3C 
por criar os padrões web. 
Agora...Você já notou quais os elementos visuais mais comuns em uma página de revista? 
Só para citar alguns:
• Blocos;
• Parágrafos;
• Listas;
• Imagens;
• Títulos e Subtítulos; 
E é este o conhecimento prévio sobre os elementos visuais que desde a época das primeiras lei-
turas você adquiriu. 
Você lembra quando a sua professora do ginásio dizia: “Pula uma linha, parágrafo…” ( eu espero 
não parecer um “velhaco” relembrando tal passagem).
De lá para cá, você adquiriu esse conhecimento com a escrita, a leitura e até com a diagramação, 
caso trabalhe com isso. E não é por coincidência que esses elementos visuais se encontram e 
estão entre os mais usados do HTML junto com as tags estruturais apresentadas neste livro.
 
49
E a partir daí você pode ter certeza: Você terá agora duas estratégias poderosas em seu poder 
para construir suas primeiras páginas de internet! São eles:
• O conhecimento prévio sobre a sintaxe de tags HTML;
• O conhecimento prévio sobre as tags estruturais fundamentais, já vistas neste livro, somadas 
as tags mais usadas em páginas web, que iremos apresentar a seguir.
E essas duas estratégias juntas é que proporcionarão os 20% de esforços que resultarão nos 80% 
de resultados. Então o que falta agora é apresentar as tags mais usadas no HTML. 
Você vai se impressionar ao saber como os elementos desses “códigos aterrorizantes”, a primei-
ra vista, são bastante familiares aos elementos visuais que você costuma ver em uma revista ou 
jornal.
Vamos então às tags:
 
<div>
São tags que delimitam blocos de conteúdo. Este bloco serve de contêiner e pode agrupar e ani-
nhar outros elementos (filhos) como; parágrafos, imagens, listas, entre outros. Como também 
estar dentro de outro bloco “div” (elemento pai).
Apesar de não existir representação se-
mântica para esse elemento ele é muito 
usado para dividir seções em uma página 
web.
 
Exemplo:
50
<html>
 <head>
 <title>
 Minha primeira página web
 </title>
 </head>
 <body>
 <div>Bloco 1</div>
 <div>Bloco 2</div>
 </body>
</html>
Abra seu editor e digite estas linhas de código acima, salve como o nome minha-primeira-pagi-
na-web.html e depois abra o 
arquivo em seu 
navegador. 
Agora será possível ver algo 
na página, como na imagem 
abaixo:
Nota: O aspecto visual de alguns elementos HTML 
só são definidos através de estilos CSS que, para fins 
didáticos, não está sendo aplicado neste exemplo.
51
Agora um exemplo prático 
encontrado no Blog Chief of 
Design.
Na imagem ao lado temos 
a seção de um artigo sobre 
User Experience (Recomendo 
que leia depois!). 
Como se trata de uma seção, 
o bloco que agrupa os conte-
údos visuais deste artigo está 
usando o elemento “div”. 
O código foi gerado por um 
Gerenciador de conteúdo 
chamado “Wordpress” que 
inseriu mais 2 Divs aninha-
das (elementos filhos) dentro 
da seção.
DIV (elemento pai): contêiner 
da seção que agrupa todos 
os elementos (títulos, textos, 
imagem).
DIV (descendente): contêiner 
da seção que mostra o nome 
do autor do artigo.
DIV (descendente): contêiner 
da seção que agrupa os ele-
http://chiefofdesign.com.br/user-experience/
http://chiefofdesign.com.br/user-experience/
52
mentos HTML que geram os parágrafos do texto do artigo e a imagem.
<p>
Estas tags já foram apresentadas a você, elas delimitam parágrafos, elementos em abundância 
tanto na web quanto na mídia impressa.
Vamos aproveitar incrementando um pouco mais o código do arquivo minha-primeira-pagina-
-web.html. Insira um parágrafo entre as tags dos dois elementos “div”, como a seguir:
<html>
 <head>
 <title>Minha primeira página web</title>
 </head>
 <body>
 <div>
 <p>Este é um parágrafo que está inserido dentro do elemento HTML “div” 
 (primeiro bloco desta página). 
 Este parágrafo é descendente do elementos “div”, “body” e “html”.</p>
 </div>
 <div>
 <p>Este é um paragráfo do segundo bloco da página. 
 Nele eu posso colocar um texto que complemente o assunto
 tratado no bloco anterior.</p>
 </div></body>
</html>
OBS: Leia os textos em todos os códigos
de exemplos, pois possuem dicas!
53
Agora salve, veja no navegador e…
...Decepção total! Que zica é essa?
 
De onde surgiram estes caracteres estranhos?
Pois bem! Sem motivo para pânico caso isso tenha acontecido com você. Se não aconteceu, 
ótimo. Entretanto é bom saber com agir nesses casos. Vamos tomar duas ações:
Primeira ação:
Existe uma tag denominada “meta”(meta tags). Ela fornece informações importantes sobre o 
documento HTML. 
Trataremos dela de forma mais completa em outro tópico. Por enquanto é importante que você 
saiba que ela também é responsável por informar o formato de codificação de caracteres. 
Portanto para deixar a codificação do nossa página do jeito que queremos você deve inserir logo 
após a tag de abertura do elemento “head” o seguinte código:
54
O código da página , agora, então ficará assim:
<html>
 <head>
 <meta charset=”UTF-8”>
 <title>Minha primeira página web</title>
 </head>
 <body>
 <div>
 <p>Este é um parágrafo que está inserido dentro do elemento HTML “div” 
 (primeiro bloco desta página). Este parágrafo é descendente do
 elementos “div”, “body” e “html”.</p>
 </div>
 <div>
 <p>Este é um paragráfo do segundo bloco da página. Nele eu posso colocar um 
 texto que complemente o assunto tratado no bloco anterior.</p>
 </div>
 </body>
</html> 
Segunda ação:
Antes ou, dependendo do seu editor HTML preferido, na hora de salvar seu documento, é bom 
se certificar que ele esteja configurado para codificação UTF-8. No editor que sugerimos (Subli-
me Text) basta na hora de salvar escolher a opção “Save with Encoding” e em seguida escolher a 
opção “UTF-8”. Vamos ver o resultado?
<meta charset=”UTF-8”>
55
Agora que a codificação está OK, podemos prosseguir.
 
Enquanto houver a necessidade de incluir textos e consequentemente incluir mais parágrafos 
basta usar o elemento HTML “p”. Veja no exemplo anterior como existem mais de um parágrafo.
Para continuar com as tags mais usadas falaremos de agora não só de um elemento HTML e sim 
de um grupo que trabalhando juntos formam as famosas listas. 
<ol>, <ul> e <li>
Este conjunto de tags são usadas para marcar conteúdo em listas. 
Todo o conteúdo em que você precisa exibir, uma sequência, um procedimento, ou uma relação 
de elementos de um tema comum podem ser consideradas listas.
Exemplos:
• Sequência de preparo de uma receita;
• Lista de planetas do sistema solar;
56
• Lista de com tipos de programas para editar imagens.
• Lista de itens de navegação do seu site.
E essass listas podem ser ordenadas ou não ordenadas.
Vamos conferir?
Listas ordenadas: 
As listas ordenadas enumeram, ou dispõem em ordem, os elementos apresentados, e são 
marcados pelas tags <ol></ol>. O elemento HTML “ol” vem do inglês ordered list (lista orde-
nada). E é apropriada para aplicar as listas com elementos que apresentam uma sequência a 
seguir, como um procedimento, por exemplo. Por isso o motivo de enumerar os elementos. 
Porém esta tag só define o tipo de lista e não tem efeito algum se não trabalhar em conjunto com 
as tags filhas <li></li>.
O elemento HTML “li” (list item) é o responsável por apresentar cada elemento, ou se preferir cha-
mar de outro jeito, item da lista. Vamos exemplificar adicionando mais códigos a nossa página 
minha-primeira-pagina-web.html:
<ol>
 <li>Eu sou o primeiro item desta lista ordenada e posso ser usada como o primeiro item a
 seguir de um sequência. Por exemplo, o primeiro ingrediente a usar em uma receita 
 culinária;</li>
 <li>Eu sou o segundo item a seguir desta lista ordenada;</li>
 <li>Eu sou o terceiro e último item a seguir desta lista ordenada.</li>
</ol>
Agora ao visualizar no navegador veja que o os itens foram organizados numericamente.
Você não precisa fazer esta tarefa de forma manual. Veja abaixo:
57
Listas não ordenadas:
São poucos os sites que não possuem uma lista não ordenada, pois se trata de um elemento 
importante para construção de menus e outros tipos de navegação que falaremos mais à frente. 
Mas está é uma função que é executada com outros elementos HTML. A grande função das listas 
não ordenadas é listar itens de forma mais livre, sem o rigor de ordenamento encontrado nas 
listas ordenadas.
As tags para determinar este tipo de lista são <ul></ul>. O elemento HTML “ul” vem do inglês 
Unordered list (lista não ordenada). Para entendermos melhor a diferença entre o elemento HTML 
“ul” e o “ol” basta imaginar a descrição de uma receita de bolo, por exemplo. 
Para apresentar os ingredientes não precisa de ordem então usamos “ul”, já para apresentar o 
preparo do bolo é indicado usar “ol”, pois é preciso seguirmos uma sequência lógica. Não que 
você seja obrigado, com uma faca no pescoço a seguir esta lógica. No dia a dia com certeza você 
usará mais “UL” do que “OL”.
E existem sites que só usam de forma livre “ul” onde poderia ser “ol”. Porém entenda quando é 
semanticamente mais apropriado usar um ou outro. Assim como o elemento HTML “ol”, o “ul” 
necessita de trabalhar em conjunto com as tags filhas <li></li> para surtir efeito.
 
58
Então siga o mesmo procedimento anterior, mas ao invés de <ol> utilize <ul>. 
Vamos ver como fica?
Se você usa o editor de texto Microsoft Word ou similar (conhecimento prévio), nele você tem 
a opção de definir as listas ordenadas resultando em “bullets”, esses símbolos na frente de cada 
ítem da lista. Com o HTML isso ocorre automaticamente. Entretanto existem listas que não apa-
recem estes símbolos, como em muitos menus por exemplos.
Quando você perceber isso saiba que é devido a uma escolha do desenvolvedor do site que atra-
vés de um código de estilo CSS, optou por ocultá-los.
Existem outras tags usadas para listas de definição, todavia como elas não estão entre as mais 
usadas partiremos para outro elemento. 
Desta vez falaremos sobre o elemento responsável por inserir imagens em sites.
Sigam-me os bons! :D
59
<img>
Este é um elemento nulo. Você lembra do conceito? (Senão lembra volte na página 36).
O <img> é responsável por marcar imagens e através de alguns atributos adicionais informar ao 
navegador em que caminho se encontra a imagem, em que tamanho ele deve ser inserido na pá-
gina, especificar um título e também um texto alternativo para ser exibido quando a imagem não 
for encontrada no caminho especificado ou para os deficientes visuais que usam leitores de tela. 
Muita informação, não é? Calma, Galucho, que já vamos explicar cada detalhe.
Primeiro vamos a sintaxe, por partes.
Caminho da imagem:
Antes de qualquer coisa é importante saber que as extensões de arquivos de imagens comuns 
em páginas web são o jpg, o png e o gif. E outro conceito importante, a saber, é que elementos 
HTML podem possuir atributos.
Atributos são comandos extras a um elemento. Cada atributo possui um nome e um valor e são 
inseridos dentro da tag de abertura. Uma tag pode ter um ou mais atributos. No caso da tag 
<img> podem ser usados mais que um atributo.
Simulando uma tag com atributos temos:
Voltando a nossa tag <img>, o caminho da imagem é o endereço (URL = Localizador uniforme de 
recursos) indicado pelo atributo “src” do elemento HTML “img” onde o navegador deve localizar 
o arquivo de imagem. Para isso são necessários os seguintes itens:
<tag nome-do-atributo=”valor-do-atributo”></tag>
60
• img : é o nome da tag do elemento;
• src= : significa search (localizar). Indica a url (endereço-caminho) onde está o arquivo 
 de imagem;
• “ “ : contém o endereço da imagem. O que estiver entre aspas é nome do caminho da imagem. 
Este caminho pode ser formado só pelo nome do arquivo + a extensão do arquivo de imagem 
(jpg, png, gif). Tipo:
 “nome-do-arquivo.jpg”;
 Ou em conjunto com um diretório, por ex: “pasta-de-imagens/nome-do-arquivo.jpg”;
 Ou com conjunto de diretórios, por ex: 
 “arquivos-do-site/pasta-de-imagens/nome-do-arquivo.jpg”;Analisando todo caminho da imagem conclui-se que:
<img src=”caminho onde se encontra o arquivo de imagem 
(nome(s) do(s) diretório(s) e/ou nome do arquivo) + um ponto 
+ extensão do arquivo de imagem”>
Exemplo de inserção de uma imagem:
<img src=”arquivos/imagens/pato.jpg”>
Veja como fica o resultado no navegador.
61
Observações importantes:
• Em arquivos XHTML o auto-fechamento é feito na tag de abertura (uso da barra):
 <img src=”arquivos/imagens/pato.jpg” />
• É imprescindível que não existam erros de digitação no caminho da imagem, pois isso acarre-
tará no que é chamado de “link quebrado”. E a imagem não aparecerá.
• Da mesma forma o caminho da imagem deve estar correto para imagem aparecer no site.
Caso seu arquivo de imagem esteja dentro de um diretório que não for o mesmo do arquivo 
HTML deve-se colocar o caminho, com os diretórios internos no atributo “src”, até a imagem.
62
Os exemplos a seguir mostram o endereço da imagem relativo ao arquivo HTML 
minha-primeira-página-web.html.
Exemplo 1:
Imagem no mesmo diretório 
do arquivo HTML.
Exemplo 2: 
Imagem localizada em dire-
tório dois níveis abaixo (sub-
diretórios) do diretório onde 
se encontra o arquivo HTML.
Se você usa, ou já usou o sis-
tema Windows, possui co-
nhecimento prévio para en-
tender a lógica dos caminhos 
de um arquivo. Isso porque é 
similar a árvore de diretórios 
usada no Windows que você 
manipula quando clica nas 
pastas até chegar no arquivo 
desejado. A diferença é que 
no atributo “src” em vez de 
cliques você digita barras se-
parando cada pasta até che-
gar ao arquivo da imagem. 
63
Exemplo 3:
Existirá momentos que a imagem que você quer inserir, não sei o porquê, está em um diretório 
um nível acima da onde se encontra o arquivo HTML e você quer chamá-lo via código. 
Então, como proceder?
Quando você começar a criar seus projetos aconselho que organize, na medida do possível, suas 
pastas e arquivos de seus sites no mesmo diretório ou em diretórios em níveis abaixo de onde 
se encontra seus arquivos HTML, porque isso facilita seu trabalho. Porém quando não tiver jeito 
proceda da seguinte forma: insira no atributo “src” dois pontos e uma barra antes do arquivo de 
imagem.
Segue o comando:
<img src=”../arquivo-de-imagem.jpg” >
Entendendo a sintaxe: os dois 
pontos seguidos pela barra 
significam que o arquivo de 
imagem não está no mesmo 
diretório que o arquivo HTML 
e nem em seus subdiretórios. 
A imagem, está sim, em um 
diretório de nível acima em 
relação ao arquivo HTML. 
Veja a figura ao lado para en-
tender:
64
Com isso, obtemos o resultado:
<img src=”../pato.jpg” >
E quanto mais níveis acima um arquivo de imagem estiver, mais será necessária a inclusão dos 
“dois pontos seguido pela barra”.
<img src=”../../pato.jpg” > 
(../../ ) = Dois níveis acima. 
<img src=”../../../pato.jpg” > 
 (../../../ ) = Três níveis acima.
Exemplo 4:
Pode acontecer também de a imagem 
que você quer inserir esteja em um 
subdiretório que pertence a um dire-
tório de nível acima ao arquivo HTML 
que você está trabalhando.
 
Veja o comando abaixo:
<img src=”../sub-diretorio/sub-di-
retorio/arquivo-de-imagem.jpg” >
Resultado:
<img src=”../arquivos/imagens /pato.
jpg” >
65
Note que tanto a imagem (pato.jpg) quanto o arquivo HTML (minha-primeira-página-web.html) 
estão em caminhos diferentes:
• Imagem: arquivos/imagens/pato.jpg.
• Arquivo HTML: paginas-html/minha-primeira-página-web.html.
Como já citado, todos os endereços de imagens usados até agora são “relativos” ao arquivo HTML 
minha-primeira-página-web.html. 
Existe também uma forma onde o endereço é considerado “absoluto”, ou seja, completo. Isso 
acontece quando inserimos uma imagem hospedada em outro site ou até mesmo em nosso site. 
Para isso basta colocar o endereço completo da imagem. Tomamos como exemplo o logo do 
Blog Chief of Design. Ele se encontra no seguinte endereço:
http://chiefofdesign.com.br/wp-content/themes/optimizePressTheme/themes/3/images/
chief-of-design.png
Você achou longo, não é mesmo? Para entendê-lo vamos “desmembrá-lo” em três partes:
• http://chiefofdesign.com.br/ - Este é o endereço principal do site, onde fica o diretório raiz;
• wp-content/themes/optimizePressTheme/themes/3/images/ - Aqui estão os sub-diretórios. 
Eles são compostos, neste caso, por seis pastas (veja a separação por barras);
• chief-of-design.png - E finalmente o arquivo de imagem do logo.
Para inserir a imagem basta colocar o endereço (url) no atributo “src”.
<img src=”http://chiefofdesign.com.br/wp-content/themes/optimizePressTheme/themes/3/ima-
ges/chief-of-design.png” >
66
Já sei! 
Você gostaria de ver esse logo dentro do arquivo minha-primeira-página-web.html que estamos 
usando, certo? 
Então vamos lá? 
Agora veja o resultado no navegador:
67
Visualmente não ficou um primor. Porém não era este o objetivo.
Encerramos por aqui este tópico sobre inserção de imagem. Mas o assunto imagem continua. 
Agora iremos falar sobre dimensões das imagens.
Dimensões das imagens
Se considerarmos os exemplos de inserção de imagens em uma página web exibidos até agora 
notamos que não especificamos os tamanhos das imagens e isso não as impediu de aparecer no 
navegador no tamanho correto. Porém é indicado você usar os atributos de dimensão de ima-
gens para o navegador reservar a área em que a imagem deverá aparecer.
Os atributos usados são o “width” para largura e “height” para altura, e o valor adotado para medi-
da é o pixel(px). A imagem do pato que estamos usando na página minha-primeira-página-web.
html tem 300px de largura e 169px de altura. Vamos ver agora como atribuir estes valores na tag 
“img”.
<img src=”arquivos/imagens/pato.jpg” width=”300” height=”169” >
Simples assim. Sabendo as dimensões das imagens basta colocar seus valores nos seus respecti-
vos atributos. 
Você pode também manipular os valores para mais ou para menos, mas isso se constitui em 
um mau uso dos atributos, resultando em deformação da 
imagem ou diminuição da performance. Saiba o porquê:
Originalmente sabemos que a imagem do pato tem 300 
por 169 pixels. (confira a imagem ao lado).
Entretanto você gostaria que ela fosse maior e decide au-
68
mentá-la através dos atribu-
tos do elemento HTML “img”.
Conforme você aumenta 
duas, três, “n” vezes, a ima-
gem fica “pixelizada” perden-
do sua qualidade e definição 
(veja a imagem ao lado).
A deformação visual ocorrerá 
também quando você alterar 
somente uma das dimen-
sões, tanto para mais quanto 
para menos. 
Veja o exemplo abaixo: 
Mas a pior alteração de todas não resulta em deformidade visual perceptível, e sim na perda de 
performance da página. 
Logo, seu site demora preciosos segundo para carregar devido a possuir imagens de dimensões 
maiores que aqueles valores atribuídos na tag “img”. 
Entenda o código abaixo:
<img src=”arquivos/imagens/pato.jpg” width=”150” height=”85” >
69
Esta imagem foi definida com tama-
nho 50% menor que o arquivo (pato.
jpg). Apesar de aparentemente me-
nor quando visualizada no navega-
dor, ele continua sendo o mesmo ar-
quivo, com o mesmo tamanho (300 
por 169) e com o mesmo peso. Olhe a 
próxima imagem e veja como ela se 
apresenta menor e sem deformações 
aos nossos olhos.
Porém o peso da imagem continua o 
mesmo. Agora imagine uma página 
com dezenas de imagens redimensionadas através do HTML sendo que os arquivos de imagens 
encontrados nos subdiretórios são bem maiores? 
O quão rápido este site poderia ser, e não é? Isso é um erro primário que você não deve cometer.
Existem sistemas que automatizam as imagens através de programação. Fora isso, procure redi-
mensionar as imagens, em seu editor de imagem preferido, com as medidas exatas as encontra-
das nos atributos “width” e “height” antes de subi-las ao diretório de destino.
Texto alternativo:
Eis aqui um atributo importante para questões de acessibilidade. O atributo “alt” coloca um texto 
alternativo a imagem, isto é, quando, por algum motivo a imagem não aparecer,um texto que 
representa a imagem aparecerá sem seu lugar. 
Mas a importância deste atributo vai além disto. Este texto alternativo é lido por leitores de telas, 
o que facilita o uso de sua página por pessoas com algum tipo de deficiência visual. O leitor de 
tela possibilita o usuário ouvir a descrição da imagem.
70
Como um profissional web você deve atender as necessidades dos usuários e este atributo é algo 
de fácil implementação. Basta adicionar o “alt” seguido de um sinal de igual (=) e um texto curto, 
que descreve de forma sucinta a imagem, entre aspas. Veja só:
<img src=”arquivos/imagens/pato.jpg” width=”300” height=”169” alt=”Imagem de um pato”>
E ainda existe outra vantagem de usar este atributo. Os buscadores usam o uso destes textos para 
identificar as imagens nos sites e classificá-las nos resultados de buscas. Portanto é um desper-
dício omitir o uso deste atributo.
Título da imagem:
E para finalizar agora falaremos sobre o atributo “title”. Esse atributo coloca um título para sua 
imagem. Não é um atributo essencial para o elemento HTML “img”, e é até usado em outros ele-
mentos. 
Pode até ser que o título que você decida colocar seja o mesmo texto encontrado no atributo 
“alt”, mas não necessariamente. O “alt” descreve a imagem, e o “title” dá um título. Veja a sintaxe:
<img src=”arquivos/imagens/pato.jpg” width=”300” height=”169” alt=”Imagem de um pato” 
title=”Pato”>
Quando o usuário repousa o mouse sobre imagem que usa o “title” ele vê tipo uma legenda com 
o título da imagem. 
Caminho completo com os atributos básicos:
Ufa! Quanta coisa falamos sobre imagens. 
Estas são encontradas aos montes para informar e embelezar tanto na mídia impressa como na 
71
digital. Apesar de aparente complexidade, com um pouco de prática você verá que não tem mis-
tério seu uso com HTML. 
Segue a sintaxe final do nosso exemplo com a a imagem do pato:
O código HTML e os arquivos usados até 
esta etapa se encontram neste link para download. 
<span>
“span” é um elemento neutro para renderização de texto. Apesar de não adicionar nenhuma 
semântica ao documento ele pode ser usado para alterar estilos visuais, através do CSS, de um 
trecho de texto de outro elemento HTML. 
Por exemplo: Você tem um texto de um parágrafo na cor preta e dentro deste texto você quer 
enfatizar um trecho importante com outra cor. 
Em revistas é comum ver pequenos trechos destacados de forma visual diferenciada para desta-
car algo importante na reportagem. No HTML existem vários elementos com esta função mais o 
“span” é um dos mais utilizados.
Veja como seria a aplicação:
<p>Estou digitando um parágrafo com o texto na cor preta. 
 Porém <span>este trecho quero enfatizá-lo com a cor vermelha</span>. 
 Faço isso porque considero importante destacá-lo.</p>
<img src=”arquivos/imagens/pato.jpg” width=”300” height=”169” alt=”Imagem de um pato” title=”Pato”>
http://ebookhtmlcss.com/arquivos/capitulo-2/arquivos-para-download-1.zip
http://ebookhtmlcss.com/arquivos/capitulo-2/arquivos-para-download-1.zip
72
Note que o simples fato de colocar as tags “span” 
não surti efeito algum visualmente. 
Isto ocorre porque se faz necessário um códi-
go CSS específico aplicado ao elemento HTML 
“span”, como você pode ver a seguir: 
<p> Estou digitando um parágrafo com o texto na cor preta. Porém <span style=”color:#f00”>es-
te trecho quero enfatizá-lo com a cor vermelha</span>. Faço isso porque considero importante 
destacá-lo.</p>
Não se preocupe com o código adicional na tag de abertura do elemento “span”. Ele será aborda-
do no assunto CSS. Estamos usando aqui só para efeito de demonstração. 
Vamos ver o resultado:
Agora é possível ver o trecho enfatizado na cor vermelha.
73
<br>
Ele é um elemento nulo muito usado também em construção de páginas. 
Em arquivos XHTML o auto-fechamento é feito na tag de abertura (uso da barra), assim: <br/>.
 
E em HTML usa-se a versão sem barra: <br>
Sua função é inserir uma quebra de linha em textos. Só que ele é tão prático de usar, que é 
comum cair na tentação de usá-lo para fazer coisas fora de sua função. Vamos entender agora:
Imagine a descrição de um endereço residencial. Seus dados são comumente separados por 
linhas, porém sem fugir da ideia central, que é informar o endereço. Este é um caso positivo de 
aplicação do elemento “br”.
Para exemplificá-lo vamos usar o endereço do MASP - Museu de Arte de São Paulo Assis Chate-
aubriand:
Avenida Paulista, 1578 - Cerqueira César.
São Paulo - SP.
CEP: 01310-200.
Aplicaremos agora o código:
<p>Avenida Paulista, 1578 - Cerqueira César<br>
São Paulo - SP<br>
CEP: 01310-200</p>
Note que o texto foi quebrado duas 
vezes e continuou nas linhas seguintes.
74
O que acontece é que pela facilidade de aplicação usa-se as quebras em situações não indica-
das. Segue dois exemplos:
1. Usar a tag <br> para simular parágrafos:
Este é o primeiro parágrafo de um assunto qualquer. <br><br>
Este é o segundo parágrafo. <br><br>
Forma correta:
<p>Este é o primeiro parágrafo de um assunto qualquer. </p>
<p>Este é o segundo parágrafo</p>
2. Forçar espaçamentos:
<div><p>Quero que este bloco fique com certa distância do bloco a seguir. </div><br><br>
<br><br>
<div><p>Consegui isso abarrotando meu código com quebras de linha. </div>
Forma correta:
<div><p>Quero que este bloco fique com certa distância do bloco a seguir. </p></div>
<div><p>Consegui isso através do CSS.</p></div>
OBS: Às vezes alguns gerenciadores de conteúdo (CMS), geram 
algumas tags <br> de forma automática e em locais indesejados 
em sua página. Fique atento!
75
Veja que na forma correta não se usa tag <br>, porque ela não foi feita para isso. Você pode ques-
tionar: “Ah! Eu testei aqui é deu certo! Consegui o espaçamento que queria entre as duas ‘DIVs’.
Entretanto não podemos esquecer que o HTML é uma linguagem de marcação. Para a tarefa de 
estilizar usamos o CSS. Para espaçamento existem propriedades específicas no CSS. Ok?
Outro exemplo de bom uso da tag <br> são poemas. Em poemas é muita comum a quebra de 
linha. Após cada verso, se inseri a quebra de linha. Exemplo com o poema de Luís de Camões, 
“Amor é fogo que arde sem se ver”:
<p>Amor é fogo que arde sem se ver;<br> 
É ferida que dói, e não se sente;<br> 
É um contentamento descontente;<br> 
É dor que desatina sem doer. </p>
E em caso de existência de estrofes (conjunto de versos) é indicado a separação em 
parágrafos. Entáo a continuação desse poema viria dentro de outra tag <p>.
<p>É um não querer mais que bem querer;<br> 
É um andar solitário entre a gente;<br> 
É nunca contentar-se de contente;<br> 
É um cuidar que se ganha em se perder. </p>
 
O código HTML e os arquivos usados até esta etapa 
se encontram neste link para download.
http://ebookhtmlcss.com/arquivos/capitulo-2/arquivos-para-download-2.zip
http://ebookhtmlcss.com/arquivos/capitulo-2/arquivos-para-download-2.zip
76
<h1> à <h6>
Chegamos a um grupo de elementos fundamentais, principalmente para atrair a atenção dos 
usuários, as Heading tags. Na mídia impressa seriam similares aos títulos e subtítulos.
Estes elementos devem ser usados como indicadores de títulos das seções e subseções dentro de 
um documento HTML. São denominados também como cabeçalhos ou títulos de uma seção de 
documento. Podem ser usados para marcação de títulos, subtítulos, legendas, títulos alternativos 
e slogans. 
As tags de cabeçalhos são classificadas em seis tipos, sendo <h1></h1> (cabeçalho nível 1) usadas 
para os títulos de seção mais importantes e <h6></h6> (cabeçalho nível 6) o menos importante. 
Veja a diferença entre os seis elementos:
<h1>Este é o cabeçalho 1</h1>
<h2>Este é o cabeçalho 2</h2>
<h3>Este é o cabeçalho 3</h3>
<h4>Este é o cabeçalho 4</h4>
<h5>Este é o cabeçalho 5</h5>
<h6>Este é o cabeçalho 6</h6>
Crie um novo arquivo HTML com a es-
trutura básica já vista e insira o código 
acima. Salve o arquivo com o nome de 
“heading-tags.html”. Agora veja como 
ficou no navegador (figura ao lado).
Perceba

Continue navegando