0% acharam este documento útil (0 voto)

6 visualizações42 páginas

Use A Cabeça! HTML e CSS

O documento introduz o HTML como a linguagem fundamental para criar páginas na web, explicando sua importância e funcionamento. Ele descreve como servidores web e navegadores interagem para exibir conteúdo HTML, além de apresentar a estrutura básica de um código HTML. O texto também menciona a evolução para HTML5 e a importância de entender a marcação para criar páginas web eficazes.

Enviado por

Morená

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

6 visualizações42 páginas

Use A Cabeça! HTML e CSS

Enviado por

Morená

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

1 comece a entender o HTML

A Linguagem da Web
Não tão rápido... Para me
conhecer melhor, você
precisa falar a linguagem
universal. Você sabe, o
HTML e as CSS.

A única coisa que separa você da Web é a capacidade de

aprender a linguagem: HyperText Markup Language, ou HTML.
Portanto, prepare-se para algumas aulas de linguagem. Depois deste
capítulo, você não só entenderá alguns elementos básicos do HTML, como
também será capaz de falar HTML com um pouco de estilo. No final deste
livro você estará falando HTML como se tivesse nascido em Weblândia.

este é um novo capítulo 1

Head_First_HTML_And_CSS_PFCG.indb 1 26/04/2017 16:51:47

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
html potencializa a Web

A Web
O Vídeo matou um artista
Você quer ter uma idéia fantástica? Vender alguma coisa? Precisa de uma
loja criativa? Ligue-se na Web — não precisamos dizer que ela se tornou
a forma universal de comunicação. E melhor ainda, uma forma de
comunicação da qual VOCÊ pode participar.
Entretanto, se você realmente deseja usar a Web com eficiência, tem
que saber algumas coisas sobre o seu funcionamento e sobre HTML.
Vamos dar uma olhada bem de cima a partir de 10 mil metros:

Uma vez colocados os

ie arquivos em um servidor
Para fazer páginas Weypb,ercrText Web, qualquer navegador
(H
escritos em HTML os coloque poderá acessar suas
Markup Language) e raremos páginas Web na Internet.
um servidor Web (most ivos em
como colocar seus arqute ).
um servidor mais ad ian

O HTML, em sua página Web, diz ao

navegador tudo o que ele precisa saber
para exibir sua página. E, se você fez Há um monte de PCs e
seu trabalho direitinho, suas páginas dispositivos conectados à
serão exibidas sem problemas em PDAs Internet, todos executando
e dispositivos móveis, e funcionarão navegadores. E o mais
com navegadores com facilidade de importante é que há amigos,
fala e lente de aumento para as família, fãs e potenciais clientes
pessoas com problemas de visão. utilizando esses PCs!

2 Capítulo 1

Head_First_HTML_And_CSS_PFCG.indb 2 26/04/2017 16:51:48

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
comece a entender o html

O que faz um servidor web?

Os servidores Web têm um trabalho integral na Internet, aguardando sem descanso
solicitações dos navegadores. Que tipo de solicitações? De páginas Web, imagens,
sons ou até mesmo filmes. Quando um servidor recebe uma solicitação de algum
desses recursos, ele o encontra e então o envia para o navegador.

O servidor é um comp utador Os navegadores solic

que aguarda
conectado a Internetvega páginas HTML outr itam
dores. recursos, como imag os
as solicitações do na ens.
o HTM L “lo u nge
r quiv
d oa .ht
m
so
ci
<html>
<head>
<title>

l
re
My Playlist

”.
</title>
<head>
<body>
<html>
<h1>Kick’n Tunes
<head>
</h1>

P“
<title>
My Playlist <p>BT - Satellite: nice
</title>
downbeat tune.
<head>
<body> </p>
<h1>Kick’n Tunes <p>
</h1>
...
<p>BT - Satellite: nice
downbeat tune.
</p>
<p>
...

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kick’n Tunes
</h1> <html>
<p>BT - Satellite: nice <head>
downbeat tune. <title>
</p> My Playlist
<p> </title>

... <head>
<body>
<h1>Kick’n Tunes
</h1>
<p>BT - Satellite: nice
downbeat tune.
</p>

Cada servidor
<p>
...

“Encontrei, aqui está.”

armazena
arquivos HTML,
figuras, sons e ... se o servidor puder
outros tipos de
Servidor web
localizar o recurso, o envia.
arquivos.

O que o navegador web faz?

Você já sabe como funciona um navegador: está surfando na Web e clica em um link
para visitar uma página. Aquele clique faz com que o navegador solicite uma página
HTML a um servidor Web, recebendo-a e exibindo-a em sua janela.

...e exibe a
r vid or serveas O navegador página HTML.
e
O s as web e dor. recebe a página...
págin ao navega
<html>
<head>
<title>

envia
Head First Lounge </
title>
<head>
<body>
<h1>Welcome to Head
</h1>
<img src="[Link]
<p>Join us any even
</p>
<html>
<head>
<p>
<title>
My Playlist
...
</title>
<html> <head>
<head>

<title> <body>
My Playlist
<h1>Kick’n Tunes
</title>
<head>
</h1>
<body>
<h1>Kick’n Tunes ...
</h1>

<p>BT - Satellite: nice

downbeat tune.

</p>
<p>
...

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kick’n Tunes
</h1>
...

Servidor web

Mas como o navegador sabe como exibir a página? É aqui que entra o HTML.
O HTML diz ao navegador tudo sobre o conteúdo e sobre a estrutura da
página. Vamos ver como isso funciona.

você está aqui 3

Head_First_HTML_And_CSS_PFCG.indb 3 26/04/2017 16:51:48

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
escrevendo com HTML

O que você escreve (o HTML)...

Bem, você sabe que o HTML é a chave para fazer o navegador exibir suas
páginas, mas com o quê se parece o HTML exatamente? E o que ele faz?
Vamos dar uma olhada em um pequeno código HTML. Imagine que você
queira criar uma página para anunciar o Head First Lounge, um lugar quente
com música boa, elixires refrescantes e acesso wireless. Veja o que você
escreverá em HTML:
<html>

<head>

<title>Head First Lounge</title>

</head>

<body>

<h1>Welcome to the Head First Lounge</h1> B

D Join us any evening for refreshing elixirs,

conversation and maybe a game or

two of <em>Dance Dance Revolution</em>. E

Wireless access is always provided;

BYOWS (Bring your own web server).

</p>

<h2>Directions</h2> F
<p>

You'll find us right in the center of

G downtown Webville. Come join us!

</p>

</body>

</html>

Nós não esperamos que você conheça

HTML ainda.
Neste ponto, você terá apenas uma pequena
amostra de como o HTML se parece; vamos
explicar tudo em detalhes já, já. Por ora, estude o HTML
e veja como ele é representado no navegador na figura da
próxima página. Certifique-se de prestar bastante atenção em
cada letra e como e onde ela será mostrada no navegador.

4 Capítulo 1

Head_First_HTML_And_CSS_PFCG.indb 4 26/04/2017 16:51:49

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
comece a entender o html

O que o navegador cria...

Quando o navegador lê seu HTML, ele interpreta todas as tags
que envolvem seu texto. As tags são apenas palavras ou caracteres
entre os sinais de menor e maior, como <head>, <p>, <h1> e
assim por diante. As tags informam ao navegador a estrutura e o
significado de seu texto. Assim, ao invés de apenas entulhar seu
navegador com um monte de texto, com o HTML você pode usar
as tags para dizer qual texto é o título, qual texto é um parágrafo,
qual texto precisa ser destacado e até mesmo onde as imagens
devem ser colocadas.
Vamos verificar como o navegador interpreta as tags no g
Observe que cada taqu
Head First Lounge no HTML mapeia o e
o navegador exibe.
A

C
E
D

você está aqui 5

Head_First_HTML_And_CSS_PFCG.indb 5 26/04/2017 16:51:50

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
mais sobre markup e tags

mais facilidade o documento quando

P: Então o HTML é apenas um estivermos editando o HTML. À medida R: Você está aprendendo sobre
monte de tags que eu coloco em que seus documentos HTML vão ficando HTML e HTML5 apenas é a versão
volta do meu texto? mais complicados, você verá que alguns mais atual do HTML. HTML5 ganhou
espaços, retornos e tabulações aqui muito destaque recentemente e é
R: Para começar, sim. Lembre-se de que e ali realmente ajudarão a melhorar a porque ele simplifica muitas das formas
HTML quer dizer Linguagem de Criação de legibilidade do HTML. como escrevemos HTML e possibilita
Hipertexto, portanto, o HTML lhe oferece algumas novas funcionalidades, que
uma maneira de “criar” seu texto com P: Então há dois níveis de títulos, abordaremos neste livro. Ele também
tags para dizer ao navegador como seu <h1> e um subtítulo <h2>? fornece algumas ferramentas avançadas
texto está estruturado. Mas também há o por meio de sua JavaScript application
aspecto do hipertexto do HTML, sobre o R: Na verdade, existem seis, de <h1> programming interfaces (APIs), que
qual falaremos mais adiante. a <h6>, que o navegador normalmente são abordadas no Use a Cabeça!
exibe em tamanhos de fonte Programação em HTML5.
P: Como o navegador decide a sucessivamente menores. A menos
forma de exibir o HTML? que você esteja criando um documento P: A marcação parece bobagem.
complexo e muito grande, normalmente Aplicações “O-que-você-vê-é-o-
R: O HTML mostra ao navegador a você não utilizará títulos além do <h3>. que-obtém” têm existido desde
estrutura de seu documento: onde estão quando, dos anos 70? Por que a
os títulos, onde estão os parágrafos, o P: Por que preciso da tag <html>? Web não é baseada em um formato
que precisa de destaque e assim por Não é óbvio que se trata de um como o Microsoft Word ou alguma
diante. Dadas essas informações, os documento html? aplicação similar?
navegadores possuem regras internas
padrão para a exibição de cada um R: A tag <html> diz ao navegador R: A Web é criada a partir de
desses elementos. que o documento é realmente HTML. arquivos de texto sem quaisquer
Enquanto alguns navegadores perdoarão caracteres especiais de formatação. Isso
Mas você não precisa utilizar as você pela omissão dessa tag, outros permite que qualquer navegador em
definições padrão, e pode adicionar seu não o farão, e quando você encontrar qualquer parte do mundo recupere uma
próprio estilo e regras de formatação o “HTML de tamanho industrial” mais página Web e entenda seu conteúdo.
com as CSS, que determinarão a adiante neste livro, verá que é muito Existem aplicações WYSIWYG como
fonte, as cores, o tamanho e muitas importante incluir essa tag. Dreamweaver que funcionam muito bem.
outras características de sua página. Mas neste livro vamos iniciar do ponto
Voltaremos às CSS novamente mais P: O que faz com que o arquivo se fundamental e começar com texto. Então
adiante neste capítulo. torne um arquivo HTML? você estará pronto para entender o que
P: O HTML para o Head First R: Basicamente, um arquivo HTML é
as aplicações em Dreamweaver estão
fazendo nos bastidores.
Lounge tem todos os tipos de um arquivo de texto simples. Ao contrário
deslocamento e espaçamento, e ainda
assim eu não os vejo na exibição do
de um arquivo de processadores de texto, P: Há alguma maneira de colocar
não há nenhuma formatação especial comentários no HTML?
navegador. Por que isso acontece? embutida nele. Por convenção, adicionamos

R: Correto, e boa observação. Os “.html” ao final do nome do arquivo para R: Sim, se você colocar seus co-
dar ao sistema operacional uma ideia mentários entre , o navegador
navegadores ignoram tabulações, melhor do que é o arquivo. Mas, como você vai ignorá-los totalmente. Digamos
retornos de carro e a maioria dos espaços já viu, o que realmente interessa é o que que você queira escrever o comen-
nos documentos HTML. Ao invés disso, colocamos dentro do arquivo. tário “Aqui é o início do conteúdo
eles confiam em sua marcação para do Lounge”, o faria desta maneira:
determinarem onde ocorrem as quebras P: Todos estão falando em 
sim, por que não estamos dizendo Observe que você pode colocar os
Então por que inserimos nossa própria “HTML-CINCO” em vez de “HTML”? comentários em múltiplas linhas. Lembre-
formatação se o navegador vai
-se sempre de que tudo que for colocado
ignorá-la? Para nos ajudar a ler com
entre “”, mesmo que seja código
HTML, será ignorado pelo navegador.
6 Capítulo 1

Head_First_HTML_And_CSS_PFCG.indb 6 26/04/2017 16:51:50

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
comece a entender o html

Você está mais perto de aprender o HTML do que imagina...

do sobre
a versão Observe o HTML do “Head First Lounge” novamente. Dê
L5 ganhou uma olhada nas tags e veja se você consegue imaginar o
ente e é que elas dizem ao navegador sobre o conteúdo. Escreva
as das formas suas respostas no espaço à direita; já ﬁzemos o primeiro
possibilita comentário para você.
dades, que
Ele também
tas avançadas
t application <html> Informa ao navegador que este é o início do HTML.
APIs), que
<head> Inicia a página head (veja mais informações adiante)
abeça!
<title>Head First Lounge</title>

</head>
ce bobagem.
ê-vê-é-o- <body>
o desde
<h1>Welcome to the Head First Lounge</h1>
or que a
um formato <img src=”[Link]”>
ou alguma <p>

Join us any evening for refreshing elixirs,

rtir de conversation and maybe a game or
squer
two of <em>Dance Dance Revolution</em>.
matação. Isso
gador em Wireless access is always provided;
ecupere uma
BYOWS (Bring your own web server).
conteúdo.
WYG como </p>
am muito bem.
<h2>Directions</h2>
iar do ponto
m texto. Então <p>
tender o que You’ll find us right in the center of
eaver estão
downtown Webville. Come join us!

</p>
ra de colocar
</body>

</html>
r seus co-
o navegador
Digamos
o comen-
onteúdo
maneira:
ginning
ent -->

e colocar os
inhas. Lembre-
e for colocado
que seja código
avegador.
você está aqui 7

Head_First_HTML_And_CSS_PFCG.indb 7 26/04/2017 16:51:50

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
o que o markup faz

<html> Informa ao navegador que este é o início do HT ML

<head> Inicia a página
<title>Head First Lounge</ Dá um título à página
title>
</head> Finaliza um título
<body> Inicia o corpo da página
<h1>Welcome to the Head First Informa ao navegador que Welcome é um título
Lounge</h1>
<img src=”[Link]”> Coloca a imagem “[Link]” aqui.
<p> Início de um parágrafo
Join us any evening for
refreshing elixirs,
conversation and maybe a
game or two of <em>Dance
Coloca Dance Dance Revolution em destaque
Dance Revolution</em>.
Wireless access is always
provided; BYOWS (Bring your
own web server).
</p> Fim do parágrafo
<h2>Directions</h2> Informa ao navegador que Directions é um subtítulo
<p> Início de um novo parágrafo
You’ll find us right in the
center of downtown Webville.
Come join us!
</p> Fim do parágrafo
</body> Informa ao browser que este é o fim do corpo
</html> Informa ao browser que este é o fim do HTML

8 Capítulo 1

Head_First_HTML_And_CSS_PFCG.indb 8 26/04/2017 16:51:50

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
comece a entender o html

Sua grande pausa no Café Starbuzz

O Café Starbuzz fez o seu nome como a cafeteria que cresceu
com mais rapidez nas redondezas. Se você já viu algum na
esquina, olhe para o outro lado da rua e verá outro.
Na verdade, eles cresceram tão rapidamente que ainda nem
conseguiram criar uma página na Web, e aqui está sua grande
chance: por acaso, enquanto estava comprando seu chá Chai
Starbuzz, você encontra o CEO do Starbuzz.

Ouvi por aí que você

conhece um pouco o HTML.
Nós realmente precisamos
de uma página web que tenha
as ofertas do Starbuzz.
Você pode nos ajudar?

O CEO Starbuzz

Decisões, decisões.
Marque a sua prioridade abaixo (escolha apenas uma):

A. Dar um banho no cachorro. C. Pegar a oportunidade do Starbuzz e

lançar uma carreira SENSACIONAL
na Web.

B. Finalmente colocar minhas contas D. Marcar uma hora no dentista.

em dia.

você está aqui 9

Head_First_HTML_And_CSS_PFCG.indb 9 26/04/2017 16:51:50

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
o que rola na página do starbuzz

Maravilha! Estamos tão

contentes por você nos

ajudar *. Veja só o que

precisamos ter em nossa
primeira página...

abisca
O CEO rum
algo emnapo
guarda

Dê uma olhada no guardanapo. Você

consegue determinar a estrutura que
há nele? Em outras palavras, há títulos
óbvios? Parágrafos? Falta alguma coisa
como um título para a página?
Vá em frente e marque no guardanapo
(usando seu lápis) qualquer estrutura que * Se por algum acaso você marcou A, B ou D
veja e adicione tudo o que está faltando. na página anterior, recomendamos que você
Você encontrará as respostas no ﬁnal
doe este livro para uma biblioteca, utilize-o
do Capítulo 1.
para acender a lareira no inverno ou, sei
lá, venda-o para o Mercado Livre e ganhe
algum dinheiro.
10 Capítulo 1

Head_First_HTML_And_CSS_PFCG.indb 10 26/04/2017 16:51:50

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
comece a entender o html

Crie a página Web do Starbuzz

É claro que o único problema com tudo

isso é que você ainda não criou nenhuma
página Web em sua vida. Entretanto, foi
por isso que você decidiu usar sua cabeça
para aprender o HTML, não é mesmo?
Não se preocupe, veja o que você fará
nas próximas páginas:

1 Criará um arquivo HTML usando seu

editor de texto favorito.
2 Digitará o cardápio que o CEO do
Starbuzz escreveu no guardanapo.

3 Salvará o arquivo como “[Link]”.

4 Abrirá o arquivo “[Link]” em seu

navegador predileto, se acomodará
na cadeira e observará a mágica
acontecendo.

Não quero pressioná-lo, mas milhares

de pessoas visitarão esta página web
quando você tiver terminado. Ela
não só precisa estar correta como
também deve estar linda!

você está aqui 11

Head_First_HTML_And_CSS_PFCG.indb 11 26/04/2017 16:51:5

-A bril-2015 Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
escrevendo HTML em um macintosh

Como criar um arquivo HTML (Mac)

Todos os arquivos HTML são arquivos de texto. Para criar
um arquivo de texto, você precisa de uma aplicação que
permita a criação de texto simples sem enchê-lo de um
monte de formatação elegante e caracteres especiais. Só
precisamos de texto, puro e simples.
Utilizaremos o TextEdit do Mac neste livro; entretanto, se
você preferir outro editor de texto, ele também deverá
funcionar bem. E, se você estiver usando o Windows, pule
algumas páginas para obter as instruções necessárias.

Primeiro passo:
Navegue até a sua pasta Applications.
A aplicação TextEdit está na pasta
(Applicações). A melhor maneira de chegar
aqui é escolhendo “New Finder Window” do
menu File e então procurar pela aplicação
diretamente em seus atalhos. Quando
encontrá-lo, clique em Applications.

Segundo passo:
Localize e execute TextEdit.
Aqui está o TextEdit.
Você provavelmente possui várias aplicações
listadas em sua pasta Applications. Portanto,
faça uma rolagem para baixo até encontrar
o TextEdit. Para executá-lo, clique duas vezes Os atalhos
no ícone do TextEdit. do Finder.
Terceiro passo (opcional):
Mantenha o TextEdit em seu Dock
Se quiser tornar sua vida mais fácil, clique e
mantenha pressionado o botão do mouse
sobre o ícone do TextEdit no Dock (este
ícone aparece sempre que a aplicação
estiver em execução). Quando aparecer um
menu instantâneo, escolha “Keep in Dock”.
Dessa maneira, o ícone do TextEdit sempre
aparecerá em seu Dock e você não terá que
procurá-lo novamente na pasta Applications
sempre que precisar usá-lo.

12 Capítulo 1

Head_First_HTML_And_CSS_PFCG.indb 12 26/04/2017 16:51:5

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
comece a entender o html

Quarto passo:
Altere as preferências do TextEdit
Por padrão, o TextEdit fica em modo
“rich text”, o que significa que ele
adicionará sua própria formatação e Este menu de
caracteres especiais a seu arquivo formatação de texto
durante o salvamento — e isso não é o significa que você
que você quer. Portanto, você precisa está em modo rich
alterar as preferências no TextEdit text. Se ele estiver
para que ele salve seu trabalho como aqui, é preciso alterar
um arquivo de texto puro. Para fazer suas preferências.
isso, primeiro escolha o item de menu
“Preferences” no menu TextEdit.

Quinto passo:
Defina as preferências como
Plain text
Uma vez na caixa de diálogo
“Preferences”, há três coisas que
você deve fazer.
Primeiro, escolha “Plain text” como
o modo de edição padrão na guia
“New Document”.
Na guia “Open and Save”,
certifique-se de que “Ignore rich
text commands in HTML files”
esteja marcado.
Por último, certifique-se de que
“Add .txt extension to plain text files”
esteja desmarcado.
Isso é tudo; para fechar a caixa de
diálogo, clique no botão vermelho
no canto superior esquerdo.

Sexto passo:
Viu? O menu de
Saia e reinicie
formatação sumiu: isso
Agora saia do TextEdit escolhendo significa que estamos
“Quit” no menu TextEdit e então no modo texto.
reinicie a aplicação. Desta vez, você
verá uma janela sem os menus de
formatação de texto elegante no topo
da janela. Você agora está pronto para
criar um arquivo HTML.

você está aqui 13

Head_First_HTML_And_CSS_PFCG.indb 13 26/04/2017 16:51:5

-A bril-2015 Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
escrevendo HTML no windows

Como criar um arquivo HTML (Windows)

Ou qualquer outra
Se você está lendo esta página, deve ser um usuário do Windows 7. Caso versão do Windows.
contrário, pule algumas páginas adiante. Se você é daqueles que se
senta lá no fundo e não faz perguntas, tudo bem para nós.
Para criar arquivos HTML no Windows 7, vamos usar o Bloco de
Se você estiverer outra
Notas (Notepad, se sua versão do Windows for em inglês). Ele pode
usando qualqu dows,
ser encontrado em qualquer versão do Windows; o preço é correto e
versão do Win rará o
ele é muito fácil de usar. Se você já possui seu editor favorito que rode
também encont aqui.
em Windows 7, também está tudo bem; apenas certifique-se de que ele
consiga criar um arquivo de texto simples com uma extensão “.html”.
Bloco de Notas
Presumindo que você esteja usando o Bloco de Notas, veja como criar
seu primeiro arquivo HTML.

Primeiro passo:
Abra o menu Start (Iniciar, na versão em português)
e navegue até o Bloco de Notas.
Você o encontrará em Accessories (Accessorios). A
maneira mais fácil de chegar lá é clicando no menu
“Start”, então em “All Programs” e finalmente em
“Accessories”. Você verá o Bloco de Notas listado ali.

14 Capítulo 1

Head_First_HTML_And_CSS_PFCG.indb 14 26/04/2017 16:51:5

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
comece a entender o html

Segundo passo:
Abra o Bloco de Notas.
Uma vez localizado o Bloco de Notas
na pasta Acessórios, vá em frente e
clique nele. Você verá uma janela
em branco pronta para que você
Se você estiveerr comece a digitar HTML.
usando qu alqu outra
W indo ws,
versão do ra rá o
també m en co nt
aq ui.
Bloco de Notas

Mas recomendado.

Terceiro passo (opcional):

Não oculte as extensões de tipos de
arquivo conhecidos.
Por padrão, o Windows Explorer oculta as
extensões de tipos de arquivo conhecidos.
Por exemplo, um arquivo chamado
“[Link]” será mostrado no
Explorer como “Eusouomaximo” sem a
sua extensão “.html”.
É muito menos confuso quando o
Windows mostra essas extensões, portanto
vamos alterar as opções de pasta para que
você possa ver as extensões dos arquivos.
Primeiro, abra as Folder Options
clicando no botão Start, clincando em
Control Painel, em “Appearence and
Personalization” e então clique em
Folder Options.
Em seguida, na guia “View”, em
“Advanced Configurations”, role a tela para
baixo até encontrar “Hide extensions for
know file types” e desmarque essa opção.
Pronto. Clique no botão “OK” para
salvar a preferência. Agora você verá as
extensões de arquivo no Explorer.

você está aqui 15

Head_First_HTML_And_CSS_PFCG.indb 15 26/04/2017 16:51:5

-A bril-2015 Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
Previous chapter Next chapter

1. comece a entender o HTML (2/9)

1. comece a entender o HTML (4/9)
editores e HTML

P: Por que estou usando um editor de texto R: A resposta simples: utilize qual deles preferir.
simples? Não há ferramentas poderosas como o O HTML e as CSS são padrões da indústria, o que
Dreamweaver e Expression Web para a criação de significa que todos os navegadores tentam suportar
páginas Web? HTML e CSS da mesma maneira (apenas certifique-se
de que esteja usando a última versão do navegador,
R: Você está lendo este livro porque deseja entender para obter o melhor suporte).
as verdadeiras tecnologias usadas nas páginas Web,
certo? Todas elas são grandes ferramentas, mas fazem A resposta complexa: na verdade, há algumas
quase todo o trabalho para você. Até que você seja o pequenas diferenças na maneira como os navegadores
mestre do HTML e CSS, vai querer aprender essas coisas lidam com suas páginas. Se você tem usuários que
sem que uma grande ferramenta fique em seu caminho. acessarão suas páginas por uma grande variedade de
navegadores, então sempre teste sua página Web em
Quando você for um mestre, entretanto, essas vários navegadores diferentes. Algumas páginas serão
ferramentas oferecerão alguns recursos muito bons, exibidas da mesma maneira, outras não. Quanto mais
como a verificação da sintaxe e visualização das avançado você se tornar em HTML e CSS, mais essas
páginas. Neste momento, quando você enxergar a pequenas diferenças importarão para você. Vamos
página de “código”, entenderá tudo o que está ali, e encontrar algumas dessas sutilezas neste livro.
descobrirá que as alterações no HTML e nas CSS puros
são quase sempre muito mais rápidas do que através Qualquer um dos principais navegadores – Internet
de interfaces como usuário. Você também descobrirá Explorer, Chrome, Firefox, Opera e Safari – funcionarão
que, uma vez que os padrões mudam, essas ferramentas para a maioria dos exemplos (exceto onde citado); eles
nem sempre são atualizadas com rapidez e podem não são todos navegadores modernos com grande suporte a
suportar a maioria dos padrões mais recentes, até sua HTML e CSS. E como desenvolvedor Web, você deverá
próxima versão. A partir do momento que você for capaz testar seu código em mais de um navegador, então nós
de alterar o HTML e as CSS sem a ferramenta, será o encorajamos a fazer o download e se familiarizar com
capaz de acompanhar todas as novidades o tempo todo. ao menos dois!

Existem muitos outros editores que incluem ótimas Se você está procurando um bom navegador,
ferramentas como clips (para inserir automaticamente experimente o Firefox da Mozilla; ele possui um suporte
trechos de HTML que você escreve com frequência), muito bom para HTML e CSS.
preview (para ter uma prévia diretamente no editor,
antes de testar no navegador), coloração de sintaxe P: Estou criando estes arquivos no meu próprio
(as tags são de cores diferentes do conteúdo) e muito computador – como os verei na Web?
mais. Uma vez que você compreender a escrita básica
de HMTL e CSS em um editor simples, pode ser válido R: Essa é uma das coisas boas do HTML: você pode
checar um desses editores mais incrementados, como criar arquivos e testá-los em seu próprio computador
Coda, TextMate, CoffeeCup ou Aptana Studio. Existem e então publicá-los na Web. No momento, vamos nos
muitas opções para serem escolhidas (grátis ou não). preocupar apenas com o modo de criar os arquivos
e com o que acontece dentro deles. Mais tarde
P: Eu já tenho o editor, mas qual navegador devo mostraremos como podemos colocá-los na Web.
usar? Há tantos: Internet Explorer, Chrome, Firefox,
Opera, Safari(...) o que devo fazer?

16 Capítulo 1

Head_First_HTML_And_CSS_PFCG.indb 16 26/04/2017 16:51:51

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
comece a entender o html

Enquanto isso, de volta ao Café Starbuzz...

Agora que você já conhece o básico sobre a criação de um arquivo
de texto simples, só precisa colocar algum conteúdo em seu editor,
salvá-lo e então carregá-lo em seu navegador.
Comece a digitar as bebidas que foram descritas no guardanapo do
CEO; essas bebidas são o conteúdo de sua página. Adicionaremos
algumas marcações HTML para dar ao conteúdo uma estrutura, já, já.
Por ora, digite apenas o conteúdo básico. Quanto terminar, adicione
“Starbuzz Coffee Beverages” ao topo da página.

Digite as informações do
guardanapo desta maneira:

Windows

Mac

você está aqui 17

Head_First_HTML_And_CSS_PFCG.indb 17 26/04/2017 16:51:52

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
salvando seu html

Salvando seu trabalho...

Digitadas as bebidas que estavam no guardanapo do CEO, você salvará seu
trabalho em um arquivo chamado “[Link]”. Antes de fazer isso, crie
uma pasta chamada “starbuzz” para armazenar os arquivos do site.
Para fazer isso, escolha “Save” (Salvar) no menu “Archive” (Arquivo). Você
verá uma caixa de diálogo “Save as”. Veja então o que deve fazer:
Crie uma nova Windows
1 Primeiro, crie uma pasta pasta aqui.
“starbuzz” para todos os
arquivos relacionados ao
Starbuzz. Você faz isso
com o botão “New folder”

Quando salvar, certifique-se Não se preocupe

de que UTF-8 está com UTF-8 por
selecionado para a Codificação enquanto, nós
no Mac e no Windows. trataremos dele
mais tarde.
Mac

Crie uma nova Clique em

pasta aqvui. “Save” para
salvar.

2 Em seguida, clique na pasta

“starbuzz” recém-criada e
digite “[Link]” como
nome do arquivo. Clique Clique em
no botão “Save” (Salvar).
“Save” para
salvar.

18 Capítulo 1

Head_First_HTML_And_CSS_PFCG.indb 18 26/04/2017 16:51:53

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
comece a entender o html

Abra sua página Web em um navegador

Você está pronto para abrir sua primeira página
Web? Usando seu navegador predileto, escolha
“Open Archive...” (ou “Open...” se estiver usando o
Windows 7 e o Internet Explorer) no menu “Archive”
e navegue até o seu arquivo “[Link]”. Selecione-o
e clique em “Open”.

Mac

No Mac, navege até o

arquivo e selecione-o,
clinado no ícone, e
depois no botão Open.

Windows No Windows Internet

Explore o processo tem dois
passos. Primeiro você abrirá
a caixa de diálogo Open.

Então você clicará em

Browse para obter uma
caixa de diálogo onde irá
navegar até o local onde
salvou o arquivo.

você está aqui 19

Head_First_HTML_And_CSS_PFCG.indb 19 26/04/2017 16:51:53

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
testando seu html

Leve sua página para um Windows

test drive...
Sucesso! Sua página foi carregada
no navegador, apesar do resultado
ser um pouco... hum... desanimador.
Mas isso só aconteceu porque tudo o
que você fez até agora foi entender
o mecanismo de criação de uma
página e sua visualização em um
navegador. E, até agora, você só
digitou o conteúdo da página Web.
É aqui que entra o HTML. O HTML
lhe oferece uma maneira de dizer
ao navegador como é a estrutura de
sua página. O que é estrutura? Como
você já viu, é uma maneira de marcar
seu texto para que o navegador saiba
o que é título, que texto aparece
em um parágrafo, que texto é um
subtítulo e assim por diante. Uma
vez que o navegador tenha algumas
poucas informações sobre a estrutura,
poderá exibir sua página de uma
maneira mais significativa e legível.

Mac

Dependendo do seu sistema operacional

e navegador, quase sempre você poderá
clicar duas vezes no arquivo HTML ou
arrastá-lo e soltá-lo no ícone do navegador,
para abri-lo. Muito mais simples.

20 Capítulo 1

Head_First_HTML_And_CSS_PFCG.indb 20 26/04/2017 16:51:53

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
comece a entender o html

Ímãs de Geladeira
Bem, vamos adicionar a estrutura...

Seu trabalho será adicionar estrutura ao texto do guardanapo do Starbuzz. Utilize

os ímãs de geladeira que estão na parte de baixo da página para marcar o texto
e indicar quais partes são títulos, subtítulos e parágrafos. Já fizemos alguns para
adiantar o seu lado. Não precisaremos de todos os ímãs abaixo para completar o
trabalho; alguns ficarão de fora.

<h1> Starbuzz Coffee Beverages </h1>

House Blend, $1.49

A smooth, mild blend of coffees from Mexico, Bolivia

and Guatemala.

<h2> Mocha Cafe Latte, $2.35 </h2>

<p> Espresso, steamed milk and chocolate syrup. </p>

Cappuccino, $1.89

A mixture of espresso, steamed milk and foam.

Chai Tea, $1.85

A spicy drink made with black tea, spices, milk and honey.

Use este ímã

para iniciar Use este ímã Use este ímã Use este ímã
um título. Use este ímã Use este ímã para finalizar para iniciar um para finalizar
para finalizar para iniciar um subtítulo. parágrafo. um parágrafo.
um título. um subtítulo.

você está aqui 21

Head_First_HTML_And_CSS_PFCG.indb 21 26/04/2017 16:51:53

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
seu primeiro markup html

seu primeiro HTML !

Eles podiam ser parecidos com ímãs

de geladeira, mas você já estava
marcando seu texto com HTML. O
único porém, como você já sabe, é
que normalmente nos referimos aos
ímãs como tags . Observe a marcação
abaixo e compare-a aos seus ímãs da
página anterior

</h1>
Utilize as tags <h1>loes. Todo o
para marcar os títus é conteúdo
texto dentro dela
real do título.

<h1>Starbuzz Coffee Beverages</h1>

<h2>House Blend, $1.49</h2> As tags <h2> e </

<p>A smooth, mild blend of coffees from Mexico,
h2> envolvem um
Bolivia and Guatemala.</p>
subtítulo. Pense no
<h2> como subtítulo
do título <h1>.
<h2>Mocha Cafe Latte, $2.35</h2>

<p>Espresso, steamed milk and chocolate syrup.</p>

As tags <p> e </p>
circundam um bloco
<h2>Cappuccino, $1.89</h2> de texto que é um
<p>A mixture of espresso, steamed milk and foam.</p> parágrafo. Pode ter
uma ou mais frases.
<h2>Chai Tea, $1.85</h2>

<p>A spicy drink made with black tea, spices, milk

and honey.</p>

Observe que você não precisa ma

correspondentes em uma mesma is colocar as tags
colocar todo o conteúdo que quilinha, mas pode
ser entre elas.

22 Capítulo 1

Head_First_HTML_And_CSS_PFCG.indb 22 26/04/2017 16:51:53

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
comece a entender o html

Já chegamos?
Você tem um arquivo HTML com marcação. Isso o torna uma página Web?
Quase. Você já viu as tags <html>, <head>, <title> e <body>. Precisamos
adicioná-las para tornar essa uma página HTML de primeira classe...

Primeiro envolva seu HTML gs <head> e </ Vá em frente e

com as tags <html> e Depois, adicione as stasobre sua página Web, coloque um títuloO
</html>. Isso informa ao head>. Informaçõe r ora, pense nele desta dentro da head. te
navegador que o conteúdo como seu título. Po o permite que você diga título normalmen
do arquivo é HTML. maneira, o cabeçalhs sobre a página Web. aparece no topo dar.
ao navegador coisa janela do navegado
<html>

<head>
O cabeçalho consiste das
<title>Starbuzz Coffee</title> tags <head> e </head>e de
</head> tudo o que está dentro delas.

<body>

<h1>Starbuzz Coffee Beverages</h1>

<h2>House Blend, $1.49</h2>

<h2> e </ <p>A smooth, mild blend of coffees from Mexico,

olvem um
o. Pense no
Bolivia and Guatemala.</p>
O corpo das
mo subtítulo tags <body>
o <h1>. <h2>Mocha Cafe Latte, $2.35</h2> e </doby> é
<p>Espresso, steamed milk and chocolate syrup.</p> tudo o que
está lá dentro.
> e </p>
um bloco <h2>Cappuccino, $1.89</h2>

ue é um <p>A mixture of espresso, steamed milk and foam.</p>

Pode ter
frases. <h2>Chai Tea, $1.85</h2>

<p>A spicy drink made with black tea, spices,

milk and honey.</p>

</body> Mantenha o
cabeçalho e o corpo
</html>
separados quando
O corpo contém o conteúdo e estrutura escrever seu HTML.
de sua página Web; as partes da página
Web que você vê em seu navegador.

você está aqui 23

Head_First_HTML_And_CSS_PFCG.indb 23 26/04/2017 16:51:54

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
outro teste com markup

Outro test drive

Siga em frente e altere seu arquivo “[Link]”
adicionando as tags <head>, </head>, <title>, </title>,
<body> e </body>. Uma vez feito isso, salve suas
alterações e recarregue o arquivo em seu navegador.

Observe que o título

especificado no
arquivo index.
Você pode recarregar seu de elemento <head> é
nu Open
html selecionando o item o bometão de mostrado aqui.
File novamente ou usando dor.
atualização do seu navega

Agora as coisas parecem umret pouco

as
melhores. O browser interp ou
tags e criou uma exibiçõ pa ra a página
da, mas
que não apenas é mais [Link]
também muito mais legíve

Maneiro!

24 Capítulo 1

Head_First_HTML_And_CSS_PFCG.indb 24 26/04/2017 16:51:54

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
comece a entender o html

Dissecando tags
Ok, você já viu um pouco de marcação,
então vamos dar um zoom e ver como as
tags de fato trabalham.

e o título
Normalmente, você coloca tags em volttag a de
o no chamento
head> é algum conteúdo. Aqui, estamos usan do s Está é a tag de tífetulo; Neste
aqui. para dizer ao navegador que noss o conteú do que finaliza um você sabe
“Starbuzz Coffee Beverages”, é um títu lo de caso a tag </h1>. fechamento
primeiro nível (ou seja, um título nível um). que é uma tag dedepois do
porque ela vem uma / antes
conteúdo e tem gs de
de h1. Todas as ta um /.
Aqui está a tag de abertura fechamento possuem
que inicia o título.

<h1> Starbuzz Coffee Beverages </h1>

Todo esse negócio é chamado de

do nome
As tags consistem lo
elemento. Nesse caso, podemos chamá-lo
Chamamos as
da tag envolvidose pe
m ai or,
de elemento <h1>. Um elemento consiste
tags de abertura
or
sinais de men e >. de tags e de contúdo entre eles.
e as tags de
os caracteres < fechamento
correspondentes.

Para mostrar ao navegador a estrutura de

sua página, utilize os pares de tags em volta
de seu conteúdo.

Lembre-se,
Elemento = Tag de Abertura + Conteúdo + Tag
de Fechamento

você está aqui 25

Head_First_HTML_And_CSS_PFCG.indb 25 26/04/2017 16:51:54

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
elementos e tags correspondentes

bar? Você se esqueceu da tag

P: Então as tags P: Notei que o HTML em

de fechamento?

correspondentes não precisam

estar na mesma linha?
algumas páginas nem sempre
combina as tags de abertura
R: Uau, que olho de lince! Há
alguns elementos que utilizam uma
com as tags de fechamento. notação de atalho com apenas uma
R: Não. Lembre-se, o navegador tag. Deixe isso guardado por ora
não se importa com as tabulações, R: Bem, supõe-se que as e retornaremos ao assunto em um
retornos e com a maioria dos tags devam combinar. Em geral, capítulo posterior.
espaços. Portanto, suas tags podem os navegadores fazem um bom
começar e terminar em qualquer trabalho de identificação do que P: Um elemento é tag de
lugar da mesma linha, ou podem você quis dizer quando escreveu abertura + conteúdo + tag de
começar e terminar em linhas o HTML incorretamente. Mas, fechamento. Você não pode
diferentes. Apenas certifique-se de como você verá, hoje há grandes ter tags dentro de outras tags?
iniciar com uma tag de abertura, benefícios em escrever um HTML Como o cabeçalho e o corpo
como <h2>, e terminar com uma tag perfeito. Não fique preocupado estão dentro da tag <html>?
de fechamento, como </h2>. achando que você nunca será capaz

P: Por que as tags de de escrever um HTML perfeito; R: Sim, as tags do HTML são
existem várias ferramentas que muitas vezes “aninhadas” dessa
fechamento possuem aquele “/” podem verificar seu código antes maneira. Se você pensar sobre o
adicional? que ele seja colocado em um assunto, é natural para uma página
servidor Web, onde todo mundo
R: O “/” na tag de fechamento possa vê-lo. Por ora, apenas
HTML ter um corpo, que contenha
um parágrafo e assim por diante.
existe para ajudar você e o habitue-se a sempre combinar Muitos elementos HTML possuem
navegador a saber onde o conteúdo as tags de abertura com as de outros elementos HTML entre suas
estruturado termina. Caso contrário, fechamento. tags. Daremos uma olhada nesse
as tags de fechamento seriam tipo de situação mais adiante , mas
iguaizinhas às tags de abertura. P: Bem, e quanto à tag <img por enquanto observe apenas como
src=“[Link]”> no exemplo do os elementos se relacionam uns
com os outros em uma página.

As tags podem ser um pouco mais interessantes do que você já viu até
aqui. Veja uma tag de parágrafo com algumas coisinhas adicionais. O que
você acha que ela faz?

<p id=”houseblend”>A smooth, mild

blend of coffees from Mexico, Bolivia
and Guatemala.</p>

26 Capítulo 1

Head_First_HTML_And_CSS_PFCG.indb 26 26/04/2017 16:51:54

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
comece a entender o html

Ah, esqueci de te dizer:

também precisamos ter a
missão de nossa empresa
em uma página. Retire a
declaração da missão de uma
de nossas xícaras e crie outra
página para ela...

Missão do
zz
Café Starbu
da a
Oferecer to
ue
cafeína de q
para
você precisa
r su vida
a
impulsiona

razer.
Beba com p

1 Escreva o HTML da nova página

“[Link]” aqui.

2 Digite seu HTML usando um

editor de texto e salve-o como
“[Link]” na mesma
pasta onde está o arquivo
“[Link]”.

3 Uma vez feito isso, abra

“[Link]” em seu
navegador.

4 Compare seu trabalho com a

resposta no final do capítulo
antes de seguir adiante...

você está aqui 27

Head_First_HTML_And_CSS_PFCG.indb 27 26/04/2017 16:51:54

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
usando css para estilo

Tá, parece que você está chegando

a algum lugar. Você tem a página
principal e a página da missão prontas.
Mas não esqueça que o CEO disse que
o site também deve ser lindo. Você não
acha que ele está precisando de um
pouco de estilo?

Certo. Já temos a estrutura

pronta, por isso agora vamos nos
concentrar em sua apresentação.

Você já sabe que o HTML lhe

oferece uma maneira de descrever
a estrutura do conteúdo em seus
arquivos. Quando o navegador exibe
seu HTML, ele utiliza seu próprio
estilo padrão para apresentar essa
estrutura. Entretanto, confiar o
estilo ao navegador obviamente não
fará você ganhar nenhum prêmio
de “designer do mês”.
É aqui que entram as CSS. As
CSS lhe oferecem uma maneira CSS é a abreviação
de descrever o modo como o seu Cascading Style Sheedets
conteúdo deve ser apresentado. (Folhas de Estilo em
Vamos experimentá-las criando Cascata). Vamos saber
algumas CSS que façam com o que isso significa mais
que a página do Starbuzz pareça adiante. Por ora saib
um pouco mais apresentável (e apenas que as CSS lhea
lançando sua carreira na Web oferecem uma maneira
durante o processo). informar ao navegador de
elementos de sua página os
devem ser exibidos.

28 Capítulo 1

Head_First_HTML_And_CSS_PFCG.indb 28 26/04/2017 16:51:54

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
comece a entender o html

Conheça o elemento style

Para ter um pouco de estilo, você adicionará um novo (diga com a gente)
E-L-E-M- E-N-T-O à sua página —o elemento <style>. Vamos voltar à página
principal do Starbuzz e colocar um pouco de estilo. Dê uma olhada...
i colocado
O elemento <style> ofodo seu HTML.
dentro do cabeçalh
<html> Assim como outros elementos, o elemento
<head> <style> possui uma tag de abertura <style>
<title>Starbuzz Coffee</title> e uma tag de fechamento </style>.
<style type="text/css"> mas a tag <style> também
precisa de um atributo chamado
type, que informa ao navegador
</style>
o tipo de estilo que você está
</head> utilizando. Como serão usadas as
<body> CSS, você precisa especificar o
<h1>Starbuzz Coffee Beverages</h1> tipo text/css.
Veja como você deve definir
<h2>House Blend, $1.49</h2>
os estilos para a página.
<p>A smooth, mild blend of coffees from Mexico, Bolivia and
Guatemala.</p>

<h2>Mocha Caffe Latte, $2.35</h2>

<p>Espresso, steamed milk and chocolate syrup.</p>

<h2>Cappuccino, $1.89</h2>

<p>A mixture of espresso, steamed milk and milk foam.</p>

<h2>Chai Tea, $1.85</h2>

<p>A spicy drink made with black tea, spices, milk and honey.</p>

</body>

</html>

P: Um elemento pode ter um “atributo”? O que P: Porque eu tenho que especificar o tipo do
isso significa? estilo“text css” como atributo de style? Existem
outros tipos de estilos?
R: Os atributos são uma maneira de oferecer informações
adicionais sobre um elemento. Como no caso de você ter R: Houve um tempo em que os designers de HTML
um elemento “style” e o seu atributo permitir que você diga pensavam que haveria outros estilos, mas caímos na
exatamente de que tipo de estilo está falando. Você verá muitos real e você só pode usar <style> sem um atributo
atributos para elementos; lembre-se apenas de que eles lhes — todos os navegadores saberão que se trata de CSS.
oferecem adicionais sobre o elemento. Ficamos desapontados; estávamos segurando nosso
fôlego pelo <style type=“kitschanos50”>. Fazer o quê...

você está aqui 29

Head_First_HTML_And_CSS_PFCG.indb 29 26/04/2017 16:51:55

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
acrescentando um elemento de estilo

Dê ao Starbuzz um pouco de estilo

Agora que você já tem um elemento <style> no cabeçalho do HTML, tudo
o que precisa fazer é fornecer algumas CSS para dar à página um pouco
de charme. A seguir, você encontrará algumas CSS já “saídas do forno”.
Sempre que você encontrar o logo Pronto, verá o HTML e a CSS que deve
Código

digitar conforme ele aparece no livro. Confie em nós. Você aprenderá

como a marcação funciona mais tarde, depois de ver o que ela pode fazer.
Portanto, dê uma olhada na CSS e adicione-a ao seu arquivo “[Link]”.
Depois de digitar tudo, salve seu arquivo.

<title>Starbuzz Coffee</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
padding: 10px 10px 10px 10px; A CSS utiliza uma
sintaxe totalmente
diferente do HTML.
font-family: sans-serif;
}

</style>
</head>

<body>
<h1>Starbuzz Coffee Beverages</h1>

<h2>House Blend, $1.49</h2>

<p>A smooth, mild blend of coffees from Mexico, Bolivia and
Guatemala.</p>

<h2>Mocha Caffe Latte, $2.35</h2>

<p>Espresso, steamed milk and chocolate syrup.</p>

<h2>Cappuccino, $1.89</h2>
<p>A mixture of espresso, steamed milk and milk foam.</p>

<h2>Chai Tea, $1.85</h2>

<p>A spicy drink made with black tea, spices, milk and honey.</p>
</body>
</html>

30 Capítulo 1

Head_First_HTML_And_CSS_PFCG.indb 30 26/04/2017 16:51:55

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
comece a entender o html

Passeando com estilo

É hora de outro test drive. Recarregue seu arquivo “[Link]”.
Desta vez, você verá que a página Web do Starbuzz tem uma
aparência totalmente nova.

Cor de fundo
agora é dourada.

Agora temos
margens em torno
do conteúdo.
Margem
Também, temos uma
borda cinza em
torno do conteúdo.

Há algum enchimento a
entre o conteúdos ose lados).
borda (em todo

Estamos usando
uma fonte
diferente para
obtermos uma
aparência limpa.

Se você estiver
usando IE, talvez não
visualize a borda. Nossa! Muito bom.
Estamos na Web agora!
O Internet Explorer não
mostra a borda em volta do
corpo corretamente. Tente
e ou
carregar a página no Firefox, Chrom
Safari para vê-la.

você está aqui 31

Head_First_HTML_And_CSS_PFCG.indb 31 26/04/2017 16:51:55

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
olhando as css mais de perto

Mesmo dando apenas uma pequena olhada nas CSS, você já começou a ver
o que elas podem fazer. Combine cada linha de definição de estilo com a sua
respectiva função.

background-color: #d2b48c;
Define a fonte a ser usada no texto.

margin-left: 20%;
Define uma borda preta pontilhada ao
redor do corpo.

margin-right: 20%;
Define a borda pontilhada e cinza em
torno do corpo.

border: 2px dotted black;

Define as margens esquerda e direita para
que elas ocupem cada uma 20% da página.

padding: 10px 10px 10px 10px;

Define a cor de fundo como dourado.

font-family: sans-serif;
Cria um pouco de enchimento em torno do
corpo da página.

P: A CSS parece uma linguagem verdade é mais fácil do que utilizar uma P: Por que há um “body” no
totalmente diferente do HTML. Por linguagem para ambas as funções. início das regras das CSS? O que
que ter duas linguagens? É só para isso significa?
eu ter que aprender mais coisas, né? P: #d2b48c não parece ser uma
cor. Como #d2b48c pode R: O “body” nas CSS significa que
R: Você está certo. HTML e CSS ser “dourado”? todo o código CSS entre o “{” e “}” se
são linguagens completamente aplica ao conteúdo dentro do elemento
diferentes, mas isso acontece porque R: Há algumas maneiras diferentes <body> do HTML. Portanto, quando você
eles têm funções totalmente diferentes. de se especificar as cores com as define a fonte como sans-serif, está
Assim como não usaria o português CSS. A mais popular é chamada de dizendo que a fonte padrão dentro do
para contabilizar seus gastos, ou a “código hexadecimal”, e #d2b48c é um corpo de sua página deve ser sans-serif.
matemática para escrever um poema, exemplo dela. Essa é realmente uma cor
você não utiliza as CSS para criar dourada. Por ora, aceite esse fato, e lhe Em breve detalharemos o modo de
estrutura ou o HTML para criar estilo mostraremos como exatamente #d2b48c funcionamento das CSS, portanto
porque eles não foram criados para isso. pode ser uma cor. continue lendo. Logo, você verá que
Mesmo que isso signifique aprender duas pode ser bem mais específico quanto à
linguagens, você descobrirá que, como aplicação dessas regras e, fazendo isso,
cada linguagem é boa naquilo que faz, na é possível criar designs muito legais.

32 Capítulo 1

Head_First_HTML_And_CSS_PFCG.indb 32 26/04/2017 16:51:55

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
comece a entender o html

Agora que você já colocou algum estilo na página “[Link]” do Starbuzz,

vá em frente e atualize a página “[Link]” para que ela tenha o
mesmo estilo.

1 Escreva a seguir o HTML para a página “[Link]” e

então adicone a nova CSS.

2 Atualize seu arquivo “[Link]” para que ele inclua a

nova CSS.

3 Isso feito, recarregue “[Link]” em seu navegador.

4 Certifique-se de que sua página sobre a missão pareça

com a nossa, que está no final do capítulo.

dy” no
SS? O que

gnifica que
“{” e “}” se
do elemento
o, quando você
serif, está
o dentro do
ser sans-serif.

modo de
ortanto
ê verá que
fico quanto à
fazendo isso,
uito legais.

você está aqui 33

Head_First_HTML_And_CSS_PFCG.indb 33 26/04/2017 16:51:56

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
conteúdo e estilo

Conversa de hoje: HTML e CSS, sobre conteúdo

e estilo

HTML CSS
Saudações, CSS; estou feliz que você esteja
aqui porque quero esclarecer algumas
confusões sobre nós.
É mesmo? Que tipo de confusão?
Muitas pessoas pensam que minhas
tags dizem ao navegador como exibir o
conteúdo. Isso não é verdade! Eu trabalho
com a estrutura e não com a apresentação.
Ah, é. Eu não gostaria de ver as pessoas lhe
dando crédito pelo meu trabalho!
Bem, você pode ver como as pessoas
podem ficar confusas; afinal, é possível
utilizar HTML sem CSS e ainda assim
obter uma página com um visual decente.
“Decente” soa um pouco exagerado, você
não acha? Quero dizer, a maneira como a
maioria dos navegadores exibe o HTML
puro parece um pouco ordinária. As
pessoas precisam entender o poder das
CSS e como nós podemos facilmente dar
um ótimo estilo às páginas Web.
Ei, eu também sou muito poderoso. Ter
seu conteúdo estruturado é muito mais
importante do que ter algo bonitinho. O
estilo é muito superficial; é a estrutura do
conteúdo que interessa.
Fala sério! Sem mim, as páginas Web
seriam muito chatas. E não apenas isso,
tire a capacidade de adicionar estilo às suas
páginas e ninguém as levará a sério. Tudo
parecerá malfeito e nada profissional.
Nossa, que ego, hein? Acho que eu não
poderia esperar outra coisa de você. Você
está apenas tentando fazer uma declaração
da moda com todo esse estilo sobre o qual
está falando.

34 Capítulo 1

Head_First_HTML_And_CSS_PFCG.indb 34 26/04/2017 16:51:56

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma
comece a entender o html

HTML CSS
Declaração da moda? Um bom design
e uma boa apresentação podem ter um
efeito enorme na legibilidade e usabilidade
das páginas. E você deveria estar contente
porque minhas regras de estilo flexíveis
permitem que os designers façam qualquer
tipo de coisas interessantes com seus
elementos sem bagunçar sua estrutura.
Certo. Na verdade, somos linguagens
totalmente diferentes, o que é bom,
porque eu não gostaria de ter nenhum de
seus designers de estilo bagunçando meus
elementos de estrutura.
Não se preocupe, vivemos em universos
separados.
É, isso é óbvio para mim todas as vezes
que olho para as CSS, essa linguagem
alienígena.
Tá, e HTML pode ser considerada uma
linguagem? Alguém já viu algo mais
desajeitado do que aquelas tags?
Milhões de escritores Web discordariam de
você. Eu tenho uma linguagem boa e limpa
que se encaixa perfeitamente ao conteúdo.
Dê só uma olhada nas CSS; elas são
elegantes e simples, e não sinais de menor
e maior patéticos <em> <torno> <de>
<tudo>. <Olha> <gente> <,> <eu> <posso>
<falar> <como> <o> <sr.> <HTML><!>
Ei, sua estúpida, já ouviu falar de tags de
fechamento?
Veja bem, não importa aonde você for,
está cercada por tags <style>. Boa sorte ao
tentar escapar delas!
Rá! Eu vou te mostrar... Sabe por quê? Eu
posso escapar.

Fique ligado!

você está aqui 35

Head_First_HTML_And_CSS_PFCG.indb 35 26/04/2017 16:51:56

Prova: Emenda_ RG_ Head _Firs t_ HTM L_ and_CSS Data: 13-A bril-2015
Liberado por: Lucia Quaresma