HTML & CSS

projete e construa websites

JON DUCKETT

Rio de Janeiro, 2016

 Baixe o código fonte deste livro em
http://www.altabooks.com.br (procure pelo título da obra)
ou no site original do livro
http://www.htmlandcssbook.com (conteúdo em inglês)

EXTRA ONLINE

No decorrer do livro você encontrará referências a conteúdos, ferramentas e exemplos

adicionais que estão disponíveis no site do livro original, conteúdo em inglês.

Acesse http://www.htmlandcssbook.com/extras/ (EXTRAS & TOOLS)

iv
 SUMÁRIO

Introdução 2
Capítulo 1 Estrutura 12
Capítulo 2 Texto 40
Capítulo 3 Listas 62
Capítulo 4 Links 74
Capítulo 5 Imagens 94
Capítulo 6 Tabelas 126
Capítulo 7 Formulários 144
Capítulo 8 Marcação extra 176
Capítulo 9 Flash, vídeo & áudio 200
Capítulo 10 Introdução à CSS 226
Capítulo 11 Cor 246
Capítulo 12 Texto 264
Capítulo 13 Caixas 300
Capítulo 14 Listas, tabelas & formulários 330
Capítulo 15 Layout 358
Capítulo 16 Imagens 406
Capítulo 17 Layout em HTML5 428
Capítulo 18 Processo & Design 452
Capítulo 19 Informações Práticas 476
Índice 494

v
 INTRODUÇÃO

X Sobre este livro

X Como a web funciona
X Aprendendo com outras páginas
 Primeiro, obrigado por escolher este
livro. Ele foi escrito com dois tipos muito
diferentes de pessoas em mente:

zzAquelas que querem aprender como projetar e construir

websites a partir do zero

zzQualquer um que tem um website (que pode ser construído

usando um sistema de gerenciamento de conteúdo, um
software de blog ou uma plataforma de e-commerce) e
quer ter mais controle sobre a aparência das páginas

As únicas coisas de que você precisa para usar este livro

são um computador com um navegador web e um editor de
texto (como o Bloco de Notas, que vem com o Windows, ou
TextEdit, que vem com os Macs).

3 INTRODUÇÃO
As páginas de introdução estão no início de cada Páginas de referência introduzem partes chave da
capítulo. Elas introduzem os temas chave que você HTML e CSS. O código HTML é mostrado em azul e
aprenderá. o código CSS é mostrado em rosa.

As páginas de fundamentação aparecem em As páginas de diagrama e infográficos são

fundo branco; elas explicam o contexto dos temas mostradas em um fundo escuro. Elas fornecem uma
abordados que são discutidos em cada capítulo. referência visual simples dos temas abordados.

As páginas de exemplo agrupam os temas que você As páginas de resumo estão no final de cada
aprendeu e demonstram como cada um pode ser capítulo. Elas lembram os principais temas que
aplicado. foram abordados em cada capítulo.

INTRODUÇÃO 4
 É DIFÍCIL APRENDER?

Focalizei o código que você

Muitos livros que ensinam HTML e CSS precisa usar em 90% das vezes e
parecem manuais maçantes. Para facilitar a omiti o código que raramente vê
mesmo se escrever sites for seu
sua aprendizagem, jogamos fora o modelo trabalho em tempo integral. Ao
tradicional usado por editoras e redesenhamos longo do livro, se você se deparar
com os outros 10%, será capaz
este livro a partir do zero. de fazer uma pesquisa no Google
para entender o que isso significa
rápida e facilmente.

Também adicionei informações

No trabalho, quando as pessoas Entender HTML e CSS pode práticas sobre temas que
olham para a tela do meu ajudar qualquer um que trabalha comumente me perguntam, por
computador e a veem cheia de com a web; designers podem exemplo, como preparar imagens,
código, não é incomum fazerem criar sites mais atraentes e áudio e vídeo para a web, como
comentários dizendo que parece utilizáveis, editores de website abordar o design e a construção
muito complicado ou que devo podem criar melhor conteúdo, de um novo site, como melhorar
ser muito inteligente para profissionais de marketing podem seus rankings nos mecanismos
compreender isso. A verdade se comunicar com o público de de busca (SEO) e como usar o
é que não é tão difícil aprender forma mais eficaz e gerentes Google Analytics para entender
a escrever páginas web e a ler podem encomendar melhores os visitantes do seu site.
o código usado para criá-las; sites e tirar o melhor proveito das
certamente você não tem que ser equipes.
"programador".

5 INTRODUÇÃO
 A ESTRUTURA
DESTE LIVRO

Para aprender a criar páginas web, este livro

está dividido em três seções:

1: HTML 2: CSS 3: PRÁTICO

No primeiro capítulo, Começamos esta seção com Terminamos com algumas
analisaremos como a HTML é um capítulo que explica como informações úteis que o
usada para criar páginas web. a CSS usa regras para permitir ajudarão a construir melhores
Veremos que você começa que você controle a estilização sites.
escrevendo as palavras e o layout das páginas web. Em
que quer que apareçam na seguida, analisaremos a grande Examinaremos algumas das
página. Então adicione tags ou variedade das propriedades novas tags que serão introdu-
elementos às palavras de modo CSS que você pode usar nas zidas na HTML5 para ajudar a
que o navegador saiba o que é regras CSS. Essas propriedades descrever a estrutura das suas
um título, onde um parágrafo geralmente se dividem em uma páginas. A HTML5 é a versão
começa e termina etc. de duas categorias: mais recente da HTML (ainda
sob desenvolvimento à época em
O restante desta seção apresenta Apresentação: Como controlar que este livro era escrito). Antes
as tags à sua disposição para coisas como a cor do texto, de aprender
criar páginas web, agrupadas em as fontes que você quer usar sobre esses elementos, você pre-
capítulos sobre: texto, listas, links, e o tamanho dessas fontes, cisa de uma boa noção de como
imagens, tabelas, formulários, como adicionar cores de fundo a CSS é usada para controlar o
áudio e vídeo, flash e elementos às páginas (ou partes de uma design das páginas web. Há um
diversos. página) e como adicionar capítulo que explica um processo
imagens de fundo. de design que talvez você queira
Devo alertá-lo de que os seguir ao criar um novo website.
exemplos dos primeiros Layout: Como controlar onde
nove capítulos não são muito os diferentes elementos são Por fim, concluímos com
animadores, mas são a base posicionados na tela. Você uma análise dos temas que
de todas as páginas web. Os também aprenderá várias o ajudarão depois que você
capítulos seguintes sobre técnicas que os profissionais construir seu site, como colocá-
CSS mostrarão como tornar usam para tornar as páginas lo na web, otimização dos
a aparência das suas páginas mais atraentes. mecanismos de pesquisa (SEO)
muito mais interessante. e uso de softwares analíticos
para monitorar quem visita seu
site e o que eles procuram.

INTRODUÇÃO 6
 COMO AS PESSOAS
ACESSAM A WEB

Antes de analisarmos o código utilizado para

construir websites, é importante considerar as
diferentes maneiras como as pessoas acessam
a web e esclarecer parte da terminologia.

NAVEGADORES SERVIDORES WEB LEITORES DE TELA

As pessoas acessam websites Quando você solicita ao navegador Leitores de tela são programas
usando um software chamado uma página web, a solicitação é que leem o conteúdo de uma tela
navegador web. Exemplos popula- enviada pela Internet até um com- de computador para um usuário.
res incluem Firefox, Internet Explorer, putador especial conhecido como Eles são comumente utilizados por
Safari, Chrome e Opera. servidor web que hospeda o site. pessoas com deficiência visual.

Para visualizar uma página web, Servidores web são computadores Da mesma forma como muitos
os usuários podem digitar um en- especiais que estão constante- países possuem legislações que
dereço web no navegador, seguir mente conectados à Internet, e são exigem que edifícios públicos
um link de outro site ou usar um otimizados para enviar páginas web sejam acessíveis a pessoas
marcador de página. às pessoas que as solicitam. com deficiência, também foram
instituídas muitas leis que exigem
Fabricantes de software lançam Algumas grandes empresas rodam que websites sejam acessíveis a
regularmente novas versões dos seus próprios servidores web, mas pessoas com deficiência.
navegadores com novos recursos é mais comum usar os serviços
e suporte a novas adições às de uma empresa de hospedagem Ao longo deste livro veremos
linguagens. É importante, porém, web que cobra uma taxa para várias referências a leitores de
lembrar que muitos usuários de hospedar seu site. tela. Essas notas ajudarão a
computador não têm as versões garantir que os sites que você cria
mais recentes desses navega- são acessíveis a pessoas que usam
dores. Portanto, você não pode
DISPOSITIVOS esse tipo de software.
contar com o fato de que todos As pessoas acessam sites com
os visitantes do seu site sejam uma variedade cada vez maior de É interessante observar que tec-
capazes de usar a funcionalidade dispositivos, incluindo computa- nologias similares àquelas usadas
mais recente oferecida em todos dores desktop, laptops, tablets e por leitores de tela também são
os navegadores. celulares. É importante lembrar usadas em outras áreas onde as
que os vários dispositivos diferem pessoas não são capazes de ler
Você aprenderá a identificar o no tamanho da tela e alguns têm uma tela, como quando estão diri-
navegador que o visitante usa para conexões mais rápidas com a web gindo ou praticando exercícios.
acessar seu site no Capítulo 19. que outros.

7 INTRODUÇÃO
 COMO WEBSITES
SÃO CRIADOS

Todos os sites usam HTML e CSS, mas os sistemas

de gerenciamento de conteúdo, software de
blogs e plataformas de e-commerce muitas vezes
adicionam mais algumas tecnologias ao mix.

O QUE VOCÊ VÊ COMO É CRIADO HTML5 E CSS3

Ao analisar um website, o mais Websites pequenos costumam ser Desde que a web foi inicialmente
provável é que o navegador escritos usando só HTML e CSS. criada, havia várias versões da
receberá a HTML e CSS do HTML e CSS — cada uma conce-
servidor web que hospeda o site. Sites maiores — especialmente bida para ser uma melhoria em
O navegador interpreta o código os que são atualizados regu- relação à versão anterior.
HTML e CSS para criar a página larmente e usam um sistema
que você vê. de gerenciamento de conteúdo No momento em que este livro
(CMS), ferramentas para blogs, ou era escrito, a HTML5 e CSS3 ain-
A maioria das páginas web software de e-commerce — mui- da estavam sendo desenvolvidas.
também inclui conteúdo extra tas vezes usam tecnologias mais Embora elas ainda não tenham
como imagens, áudio, vídeo ou complexas no servidor web, mas sido finalizadas, muitos nave-
animações e este livro ensinará estas são na verdade usadas para gadores já suportavam alguns
como prepará-lo para uso na web produzir HTML e CSS que é então recursos dessas linguagens e
e então como inseri-lo em suas enviada para o navegador. Assim, várias pessoas utilizavam a última
páginas. se seu site usar essas tecnologias, versão do código nos websites.
você será capaz de usar seu novo Optei, portanto, por discutir
Alguns sites também enviam conhecimento sobre HTML e CSS essas versões mais recentes.
JavaScript ou Flash para o para ter mais controle sobre a
navegador, e você verá como aparência do seu site. Como HTML5 e CSS3 baseiam-
adicionar JavaScript e Flash nas -se nas versões anteriores dessas
suas páginas na web. Ambas as Sites maiores e mais complexos linguagens, aprendendo esses
tecnologias são temas avançados como esses podem usar um banco meios, você também será capaz
que você pode entender mais de dados para armazenar dados de compreender suas versões
tarde depois que dominar HTML e linguagens de programação anteriores. Adicionei notas claras
e CSS, se preferir. como PHP, ASP.Net, Java ou Ruby quando o código é novo e tam-
no servidor web, mas você não bém quando talvez não funcione
precisa conhecer essas tecnolo- em navegadores mais antigos.
gias para melhorar o que o usuário
vê. As habilidades que aprenderá
neste livro devem ser suficientes
para ajudá-lo nessa estrada.
INTRODUÇÃO 8
 COMO A WEB FUNCIONA

Ao visitar um website, o servidor web que hospeda

esse site pode estar em qualquer lugar do mundo.
Para que você encontre a localização do servidor
web, o navegador primeiro se conecta a um
servidor DNS (Domain Name System).

Nesta página, pode-se ver zz

Um usuário em Barcelona À direita, você pode ver o que
exemplos que demonstram visita sony.jp em Tóquio acontece quando um usuário
como o servidor web que na Inglaterra quer ver o site
zz
Um usuário em Nova York visita
hospeda o site que você está da galeria de arte do Louvre
google.com em São Francisco
visitando pode estar em na França que está localizado
qualquer lugar do mundo. zz
Um usuário em Estocolmo visita em www.louvre.fr. Primeiro,
São os servidores DNS que qantas.com.au em Sidney o navegador em Cambridge
informam o navegador como acessa um servidor DNS em
zz
Um usuário em Vancouver
encontrar o website. Londres. Depois, o servidor
visita airindia.in em
Bangalore DNS informa ao navegador a
localização do servidor que
hospeda o site em Paris.

9 INTRODUÇÃO
 2

O computador acessa uma rede

de servidores chamados de
1
sistema de nomes de domínio
(DNS). Esses servidores
Ao conectar-se à web, você faz
funcionam como agendas de
isso por meio de um provedor
telefone; eles informam ao
de acesso à Internet (ISP).
computador o endereço IP
Digita-se um nome de domínio
associado ao nome de domínio
ou endereço web no navegador
solicitado. Um endereço IP é
para visitar um site; por
um número de até 12 dígitos
exemplo: google.com,
separados por pontos. Cada
bbc.co.uk, microsoft.com .
dispositivo conectado à web
tem um endereço IP único; é
como o número de telefone para
esse computador.

Cambridge

3 LONDON
O número único que o servidor
DNS retorna para o computador
permite que o navegador entre
em contato com o servidor
web que hospeda o site que
você solicitou. Um servidor
web é um computador que está PARIS
constantemente conectado
à web, e é especialmente
configurado para enviar 4
páginas web para os usuários.
O servidor web então envia a
página que você solicitou de
volta ao navegador web.

INTRODUÇÃO 10
 ESTRUTURA
1
X Entendendo a estrutura
X Aprendendo a marcação
X Tags e elementos
 Diariamente, nós nos deparamos
com todo tipo de documento. Jornais,
formulários de seguro, catálogos de
lojas… a lista é longa.
Muitas páginas web funcionam como versões eletrônicas
desses documentos. Por exemplo, jornais mostram as
mesmas matérias na mídia impressa e em websites; você pode
contratar um seguro pela web; e lojas têm catálogos on-line e
sistemas de comércio eletrônico.

Em todos os tipos de documento, a estrutura é muito

importante para ajudar os leitores a entender as mensagens
que você está tentando transmitir e para navegar pelo
documento. Assim, para aprender a escrever páginas web,
é muito importante entender como estruturar documentos.
Neste capítulo você irá:

zzVer como a HTML descreve a estrutura de uma página web

zzEntender como tags ou elementos são adicionados aos

documentos

zzEscrever a primeira página web

13 ESTRUTURA
ESTRUTURA 14
 COMO PÁGINAS USAM
A ESTRUTURA

Pense nas matérias que você A estrutura é muito Agora pense em um tipo
lê em um jornal: para cada semelhante quando uma bem diferente de documento
matéria haverá um título, matéria jornalística é — um formulário de seguro.
algum texto e possivelmente visualizada on-line (embora Formulários de seguro
algumas imagens. Se o ela também possa ter muitas vezes têm títulos
artigo for um texto longo, recursos de áudio ou vídeo). para diferentes seções, e
pode haver subtítulos que Isto é ilustrado à direita com cada seção contém uma lista
dividem a matéria em seções uma cópia de um jornal ao das perguntas com áreas
ou citações destacadas do lado do artigo correspondente para que você preencha os
texto. A estrutura ajuda no website. detalhes ou caixas de seleção
os leitores a entender as que devem ser marcadas.
matérias no jornal. Mais uma vez, a estrutura é
muito semelhante on-line.

15 ESTRUTURA
ESTRUTURA 16
 ESTRUTURANDO
DOCUMENTOS DO WORD

O uso de títulos e subtítulos Isso pode ser expandido À direita, podemos ver
em qualquer documento nos subtítulos mais abaixo um documento simples
muitas vezes reflete uma na página. Ao usar um no Microsoft Word. Os
hierarquia das informações. processador de texto diferentes estilos para
Por exemplo, um documento para criar um documento, o documento, como
pode começar com um título separamos o texto para lhe diferentes níveis do título,
grande, seguido por uma dar estrutura. Cada tema são mostrados na caixa
introdução ou a informação pode ter um novo parágrafo, suspensa. Se você usa o Word
mais importante. e cada seção pode ter um regularmente, também pode
título para descrever o que ele ter usado a paleta ou a barra
abrange. de formatação para fazer isso.

17 ESTRUTURA
ESTRUTURA 18
 Na página anterior, você viu
como a estrutura foi adicionada
a um documento do Word para
facilitar o entendimento. Usamos
a estrutura da mesma forma ao
escrever páginas web.

19 ESTRUTURA
 A HTML DESCREVE
A ESTRUTURA
DAS PÁGINAS
Na janela do navegador, você pode ver uma página web que apresenta
exatamente o mesmo conteúdo que o documento do Word que
vimos na página 18. Para descrever a estrutura de uma página web,
adicionamos código às palavras que queremos que apareçam na página.

Você pode ver o código HTML para essa página a seguir. Não se
preocupe com o que o código significa ainda. Iremos analisá-lo em mais
detalhes na próxima página. Observe que o código HTML está em azul,
e o texto que você vê na tela em preto.

<html>
<body>
<h1>This is the Main Heading</h1>
<p>This text might be an introduction to the rest of
the page. And if the page is a long one it might
be split up into several sub-headings.<p>
<h2>This is a Sub-Heading</h2>
<p>Many long articles have sub-headings so to help
you follow the structure of what is being written.
There may even be sub-sub-headings (or lower-level
headings).</p>
<h2>Another Sub-Heading</h2>
<p>Here you can see another sub-heading.</p>
</body>
</html>

O código HTML (em azul) é composto por caracteres inseridos entre

colchetes angulares — chamados elementos HTML. Os elementos
geralmente são compostos por duas tags: uma tag de abertura e uma
tag de fechamento. (A tag de fechamento contém uma barra extra).
Cada elemento HTML informa ao navegador algo sobre as informações
que estão entre as tags de abertura e fechamento.

ESTRUTURA 20
 A HTML USA ELEMENTOS
PARA DESCREVER A
ESTRUTURA DAS PÁGINAS
Vamos examinar mais de perto o código da última página. Há
vários elementos diferentes. Cada elemento tem uma tag de
abertura e uma tag de fechamento.

CÓDIGO
<html>

<body>

<h1>Este é o título principal</h1>

<p>Este texto pode ser uma introdução ao resto

da página. E se a página for longa, ela pode
ser dividida em vários subtítulos.<p>

<h2>Este é um subtítulo</h2>

<p>Muitos artigos longos têm subtítulos para ajudar

você a seguir a estrutura do que está escrito.
Pode até haver subtítulos (ou títulos nível de
mais baixo).</p>

<h2>Outro subtítulo</h2>

<p>Aqui você pode ver outro subtítulo.</p>

</body>

</html>

21 ESTRUTURA
 Tags funcionam como contêineres. Eles dizem
algo sobre as informações que estão entre as
tags de abertura e fechamento.

DESCRIÇÃO
A tag de abertura <html> indica que qualquer coisa entre ela e uma tag de fechamento </html>
é código HTML.
A tag <body> indica que qualquer coisa entre ela e a tag de fechamento </body>
deve ser exibida na janela principal do navegador.

A palavras entre <h1> e </h1> são um título principal.

Um parágrafo de texto aparece entre as tags <p> e </p>.

As palavras entre <h2> e </h2> formam um subtítulo.

Eis outro parágrafo entre as tags de abertura <p> e fechamento </p>.

Outro subtítulo entre as tags <h2> e </h2>.

Outro parágrafo entre as tags <p> e </p>.

A tag de fechamento </body> indica o fim do que deve aparecer na janela principal do navegador.

A tag de fechamento </html> indica que é o fim do código HTML.

ESTRUTURA 22
 UMA OBSERVAÇÃO MAIS
ATENTA DAS TAGS

<p>
CARACTERE

COLCHETE ANGULAR DIREITO

(SINAL MAIOR QUE)
COLCHETE ANGULAR ESQUERDO
(SINAL MENOR QUE)

TAG DE ABERTURA

Os caracteres entre Por exemplo, na tag acima o A tag de fechamento tem

parênteses indicam o p significa parágrafo. uma barra após o símbolo <.
propósito da tag.

23 ESTRUTURA
 CARACTERE

</p> BARRA
COLCHETE ANGULAR DIREITO
(SINAL MAIOR QUE)

COLCHETE ANGULAR ESQUERDO

(SINAL MENOR QUE)

TAG DE FECHAMENTO

Os termos "tag" e como sinônimos. a tag de abertura, a tag

"elementos" são Estritamente falando, porém, de fechamento e qualquer
frequentemente usados um elemento compreende conteúdo que está entre elas.

ESTRUTURA 24