HTML e CSS

CAPTULO 1
Sobre o curso - o
complexo mundo do
front-end
"Ao a chave fundamental para todo sucesso"
Vivemos hoje numa era em que a Internet ocupa um espao
cada vez mais importante em nossas vidas pessoais e
profissionais. O surgimento constante de Aplicaes Web, para
as mais diversas finalidades, um sinal claro de que esse
mercado est em franca expanso e traz muitas oportunidades.
Aplicaes corporativas, comrcio eletrnico, redes sociais,
filmes, msicas, notcias e tantas outras reas esto presentes
na Internet, fazendo do navegador (o browser) o software mais
utilizado de nossos computadores.
Esse curso pretende abordar o desenvolvimento de frontend (interfaces) para Aplicaes Web e Sites que acessamos por
meio do navegador de nossos computadores, utilizando padres
atuais de desenvolvimento e conhecendo a fundo suas
caractersticas tcnicas. Discutiremos as implementaes dessas
tecnologias nos diferentes navegadores, a adoo
deframeworks que facilitam e aceleram nosso trabalho, alm de
dicas tcnicas que destacam um profissional no mercado.
HTML, CSS e JavaScript sero vistos em profundidade.
Alm do acesso por meio do navegador de nossos
computadores, hoje o acesso Internet a partir de dispositivos
mveis representa um grande avano da plataforma, mas
tambm implica em um pouco mais de ateno ao trabalho que
um programador front-end tem que realizar. No decorrer do
curso, vamos conhecer algumas dessas necessidades e como
utilizar os recursos disponveis para atender tambm a essa
nova necessidade.
1.1 - O CURSO E OS EXERCCIOS
Esse um curso prtico que comea nos fundamentos de
HTML e CSS, incluindo tpicos relacionados s novidades das
verses HTML5 e CSS3. Depois, abordada a linguagem de

programao JavaScript, para enriquecer nossas pginas com
interaes e efeitos, tanto com JavaScript puro quanto com a
biblioteca jQuery, hoje padro de mercado.
Durante o curso, sero desenvolvidas pginas de um Site de
comrcio eletrnico. Os exerccios foram projetados para
apresentar gradualmente ao aluno quais so as tcnicas mais
recomendadas e utilizadas quando assumimos o papel
do Programador front-end, quais so os desafios mais
comuns e quais so as tcnicas e padres recomendados para
atingirmos nosso objetivo, transformando imagens estticas
(os layouts) em cdigo que os navegadores entendem e exibem
como pginas da Web.
Os exerccios propostos so fundamentais para o
acompanhamento do curso, desde os mais iniciais, j que so
incrementados no decorrer das aulas. Igualmente importante
a participao ativa nas discusses e debates em sala de aula.
1.2 - O PROJETO DE E-COMMERCE

Durante o curso, vamos produzir um site para um ecommerce de moda chamado Mirror Fashion. Construiremos
vrias pginas da loja com intuito de aprender os conceitos de
HTML, CSS e JS.
Os contedos e o design da loja j foram pr-definidos.
Vamos, aqui, focar na implementao, papel do programador
front-end.
Agora a melhor hora de aprender algo novo
Se voc gosta de estudar essa apostila aberta da Caelum,
certamente vai gostar dos novos cursos online que

lanamos na plataformaAlura. Voc estuda a qualquer
momento com a qualidade Caelum.
Conhea a Alura.
1.3 - TIRANDO DVIDAS COM INSTRUTOR

Durante o curso, tire todas as suas dvidas com o instrutor.
HTML, CSS e JavaScript, apesar de parecerem simples e
bsicos, tm muitas caractersticas complexas que no podem
deixar de ser totalmente compreendidas pelo aluno. Os
instrutores tambm esto disponveis para tirar as dvidas do
aluno aps o trmino do treinamento, basta entrar em contato
direto com o instrutor ou com a Caelum, teremos o prazer em
ajud-lo.
Se voc est acompanhando essa apostila em casa, pense
tambm em fazer o curso presencial na Caelum. Voc ter
contato direto com o instrutor para esclarecer suas dvidas,
aprender mais tpicos alm da apostila, e trocar experincias.
1.4 - TIRANDO DVIDAS ONLINE NO GUJ

Recomendamos fortemente a busca de recursos e a
participao ativa na comunidade por meio das listas de
discusso relacionadas ao contedo do curso.
O GUJ.com.br um site de perguntas e respostas para
desenvolvedores de software que abrange diversas reas, sendo
que front-end um dos principais focos. A comunidade do GUJ

tem mais de 150 mil usurios e 1 milho e meio de mensagens.
o lugar ideal pra voc tirar suas dvidas e encontrar outros
desenvolvedores.
http://www.guj.com.br
1.5 - BIBLIOGRAFIA
Alm do conhecimento disponvel na Internet pela da
comunidade, existem muitos livros interessantes sobre o
assunto. Algumas referncias:
HTML5 e CSS3: Domine a web do futuro - Lucas Mazza,

editora Casa do Cdigo;
A Web Mobile: Programe para um mundo de muitos
dispositivos - Srgio Lopes, editora Casa do Cdigo;
A Arte E A Cincia Do CSS - Adams & Cols;
Pro JavaScript Techniques - John Resig;
The Smashing Book - smashingmagazine.com
Voc pode tambm fazer o curso WD-43 dessa apostila na
Caelum
Querendo aprender ainda mais sobre HTML, CSS e
JavaScript? Esclarecer dvidas dos exerccios? Ouvir
explicaes detalhadas com um instrutor?
A Caelum oferece o curso WD-43 presencial nas cidades

de So Paulo, Rio de Janeiro e Braslia, alm de turmas
incompany.
Consulte as vantagens do curso Desenvolvimento Web

com HTML, CSS e JavaScript.
1.6 - PARA ONDE IR DEPOIS?
Este curso parte da Formao Web Design da Caelum

que engloba tambm o treinamento Programao com
JavaScript e jQuery. Voc pode obter mais informaes aqui:
http://www.caelum.com.br/cursos-web-front-end/
Se o seu desejo entrar mais a fundo no desenvolvimento
Web, incluindo a parte server-side, oferecemos a Formao
Ruby on Rails, a Formao Java e a Formao .NETque
abordam trs caminhos possveis para esse mundo.
Mais informaes em:
http://www.caelum.com.br/cursos-rails/
http://www.caelum.com.br/cursos-java/
http://www.caelum.com.br/cursos-dotnet/
PRXIMO CAPTULO:
Introduo a HTML e CSS
CAPTULO 2
Introduo a HTML e CSS

"Quanto mais nos elevamos, menores parecemos aos olhos
daqueles que no sabem voar."
2.1 - EXIBINDO INFORMAES NA WEB

A nica linguagem que o navegador consegue interpretar para a exibio de
contedo o HTML. Para iniciar a explorao do HTML, vamos imaginar o seguinte
caso: o navegador realizou uma requisio e recebeu como corpo da resposta o seguinte
contedo:
Mirror Fashion.
Bem-vindo Mirror Fashion, sua loja de roupas e
acessrios.
Confira nossas promoes.
Receba informaes sobre nossos lanamentos por email.
Navegue por todos nossos produtos em catlogo.
Compre sem sair de casa.
Para conhecer o comportamento dos navegadores quanto ao contedo descrito antes,
vamos reproduzir esse contedo em um arquivo de texto comum, que pode ser criado
com qualquer editor de texto puro. Salve o arquivo como index.html e abra-o a partir
do navegador sua escolha.
Parece que obtemos um resultado um pouco diferente do esperado, no? Apesar de

ser capaz de exibir texto puro em sua rea principal, algumas regras devem ser seguidas
caso desejemos que esse texto seja exibido com alguma formatao, para facilitar a
leitura pelo usurio final.
Usando o resultado acima podemos concluir que o navegador por padro:
Pode no exibir caracteres acentuados corretamente;
No exibe quebras de linha.

Para que possamos exibir as informaes desejadas com a formatao, necessrio
que cada trecho de texto tenha uma marcao indicando qual o significado dele. Essa
marcao tambm influencia a maneira com que cada trecho do texto ser exibido. A
seguir listado o texto com uma marcao correta:
<!DOCTYPE html>
<html>
<head>
<title>Mirror Fashion</title>
<meta charset="utf-8">
</head>
<body>
<h1>Mirror Fashion.</h1>
<h2>Bem-vindo Mirror Fashion, sua loja de roupas e
acessrios.</h2>
<ul>
<li>Confira nossas promoes.</li>
<li>Receba informaes sobre nossos lanamentos por
email.</li>
<li>Navegue por todos nossos produtos em
catlogo.</li>
<li>Compre sem sair de casa.</li>
</ul>
</body>
</html>
Reproduza o cdigo anterior em um novo arquivo de texto puro e salve-o
como index-2.html. No se preocupe com a sintaxe, vamos conhecer detalhadamente
cada caracterstica do HTML nos prximos captulos. Abra o arquivo no navegador.
Agora, o resultado exibido de maneira muito mais agradvel e legvel. Para isso,
tivemos que utilizar algumas marcaes do HTML. Essas marcaes so chamadas
de tags, e elas basicamente do significado ao texto contido entre sua abertura e
fechamento.
Apesar de estarem corretamente marcadas, as informaes no apresentam nenhum
atrativo esttico e, nessa deficincia do HTML, reside o primeiro e maior desafio do
programador front-end.
O HTML foi desenvolvido para exibio de documentos cientficos. Para termos
uma comparao, como se a Web fosse desenvolvida para exibir monografias
redigidas e formatadas pela Metodologia do Trabalho Cientfico da ABNT. Porm, com
o tempo e a evoluo da Web e de seu potencial comercial, tornou-se necessria a

exibio de informaes com grande riqueza de elementos grficos e de interao.
2.2 - SINTAXE DO HTML

O HTML um conjunto de tags responsveis pela marcao do contedo de uma
pgina no navegador. No cdigo que vimos antes, as tags so os elementos a mais que
escrevemos usando a sintaxe <nomedatag>. Diversas tags so disponibilizadas
pela linguagem HTML e cada uma possui uma funcionalidade especfica.
No cdigo de antes, vimos por exemplo o uso da tag <h1>. Ela representa o ttulo
principal da pgina.
<h1>Mirror Fashion</h1>
Note a sintaxe. Uma tag definida com caracteres < e >, e seu nome (H1 no caso).
Muitas tags possuem contedo, como o texto do ttulo ("Mirror Fashion"). Nesse caso,
para determinar onde o contedo acaba, usamos uma tag de fechamento com a barra
antes do nome: </h1>.
Algumas tags podem receber atributos dentro de sua definio. So parmetros
usando a sintaxe de nome=valor. Para definir uma imagem, por exemplo, usamos
a tag <img> e, para indicar qual imagem carregar, usamos o atributo src:
<img src="../imagens/casa_de_praia.jpg">
Repare que a tag img no possui contedo por si s. Nesses casos, no necessrio
usar uma tag de fechamento como antes no h1.
Tire suas dvidas no novo GUJ Respostas
O GUJ um dos principais fruns brasileiros de

computao e o maior em portugus sobre Java. A nova
verso do GUJ baseada em uma ferramenta
de perguntas e respostas (QA) e tem uma comunidade

muito forte. So mais de 150 mil usurios pra ajudar voc
a esclarecer suas dvidas.
Faa sua pergunta.
2.3 - ESTRUTURA DE UM DOCUMENTO HTML

Um documento HTML vlido precisa seguir obrigatoriamente a estrutura composta
pelas tags <html>, <head> e <body> e a instruo <!DOCTYPE>.
Vejamos cada uma delas:
A tag <html>
Na estrutura do nosso documento, antes de tudo, inserimos uma tag <html>. Dentro
dessa tag, necessrio declarar outras duas tags: <head> e <body>. Essas duas tags so
"irms", pois esto no mesmo nvel hierrquico em relao sua tag "pai", que
<html>.
<html>
<head></head>
<body></body>
</html>
A tag <head>
A tag <head> contm informaes sobre nosso documento que so de interesse somente
do navegador, e no dos visitantes do nosso site. So informaes que no sero
exibidas na rea do documento no navegador.
A especificao obriga a presena da tag de contedo <title> dentro do
nosso <head>, permitindo especificar o ttulo do nosso documento, que
normalmente ser exibido na barra de ttulo da janela do navegador ou na aba do
documento.
Outra configurao muito utilizada, principalmente em documentos cujo contedo
escrito em um idioma como o portugus, que tem caracteres como acentos e cedilha, a
configurao da codificao de caracteres, chamado de encoding ou charset.
Podemos configurar qual codificao queremos utilizar em nosso documento por

meio da configurao de charset na tag <meta>. Um dos valores mais comuns
usados hoje em dia o UTF-8, tambm chamado de Unicode. H outras possibilidades,
como o latin1, muito usado antigamente.
O UTF-8 a recomendao atual para encoding na Web por ser amplamente
suportada em navegadores e editores de cdigo, alm de ser compatvel com
praticamente todos os idiomas do mundo. o que usaremos no curso.
<html>
<head>
</head>
<body>
</body>
</html>
A tag <body>
A tag <body> contm o corpo do nosso documento, que exibido pelo navegador em
sua janela. necessrio que o <body> tenha ao menos um elemento "filho", ou seja,
uma ou mais tags HTML dentro dele.
<html>
<head>
</head>
<body>
<h1>A Mirror Fashion</h1>
</body>
</html>
Nesse exemplo, usamos a tag <h1>, que indica um ttulo.
A instruo DOCTYPE
O DOCTYPE no uma tag HTML, mas uma instruo especial. Ela indica para o
navegador qual verso do HTML deve ser utilizada para renderizar a pgina.
Utilizaremos<!DOCTYPE html>, que indica para o navegador a utilizao da
verso mais recente do HTML - a verso 5, atualmente.
H muitos comandos complicados nessa parte de DOCTYPE que eram usados em
verses anteriores do HTML e do XHTML. Hoje em dia, nada disso mais importante.
O recomendado sempre usar a ltima verso do HTML, usando a declarao
deDOCTYPE simples:
<!DOCTYPE html>
2.4 - TAGS HTML
O HTML composto de diversas tags, cada uma com sua funo e significado. O
HTML 5, ento, adicionou muitas novas tags, que veremos ao longo do curso.
Nesse momento, vamos focar em tags que representam ttulos, pargrafo e nfase.
Ttulos
Quando queremos indicar que um texto um ttulo em nossa pgina, utilizamos as
tags deheading em sua marcao:
<h1>Mirror Fashion.</h1>
<h2>Bem-vindo Mirror Fashion, sua loja de roupas e
acessrios.</h2>
As tags de heading so tags de contedo e vo de <h1> a <h6>, seguindo a
ordem de importncia, sendo <h1> o ttulo principal, o mais importante, e <h6> o
ttulo de menor importncia.
Utilizamos, por exemplo, a tag <h1> para o nome, ttulo principal da pgina, e a
tag <h2>como subttulo ou como ttulo de sees dentro do documento.
A ordem de importncia, alm de influenciar no tamanho padro de exibio do
texto, tem impacto nas ferramentas que processam HTML. As ferramentas de indexao
de contedo para buscas, como o Google, Bing ou Yahoo! levam em considerao essa
ordem e relevncia. Os navegadores especiais para acessibilidade tambm interpretam o
contedo dessas tags de maneira a diferenciar seu contedo e facilitar a navegao do
usurio pelo documento.
Pargrafos
Quando exibimos qualquer texto em nossa pgina, recomendado que ele seja
sempre contedo de alguma tag filha da tag <body>. A marcao mais indicada para
textos comuns a tag de pargrafo:
<p>Nenhum item na sacola de compras.</p>
Se voc tiver vrios pargrafos de texto, use vrias dessas tags <p> para separ-los:
<p>Um pargrafo de texto.</p>
<p>Outro pargrafo de texto.</p>
Marcaes de nfase
Quando queremos dar uma nfase diferente a um trecho de texto, podemos utilizar as
marcaes de nfase. Podemos deixar um texto "mais forte" com a
tag <strong> ou deixar o texto com uma "nfase acentuada" com a tag <em>.
Tambm h a tag <small>, que diminui o tamanho do texto.
Por padro, os navegadores renderizaro o texto dentro da tag <strong> em
negrito e o texto dentro da tag <em> em itlico. Existem ainda as tags <b> e <i>,
que atingem o mesmo resultado visualmente, mas as tags <strong> e <em> so
mais indicadas por definirem nossa inteno de significado ao contedo, mais do que
uma simples indicao visual. Vamos discutir melhor a questo do significado das tags
mais adiante.
<p>Compre suas roupas e acessrios na <strong>Mirror
Fashion</strong>.</p>
2.5 - IMAGENS
A tag <img> define uma imagem em uma pgina HTML e necessita de dois
atributos preenchidos: src e alt. O primeiro aponta para o local da imagem e o
segundo, um texto alternativo para a imagem caso essa no possa ser carregada ou
visualizada.
O HTML 5 introduziu duas novas tags especficas para
imagem: <figure> e<figcaption>. A tag <figure> define uma
imagem com a conhecida tag <img>. Alm disso, permite adicionar uma legenda
para a imagem por meio da tag <figcaption>.
<figure>
<img src="img/produto1.png" alt="Foto do produto">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
Nova editora Casa do Cdigo com livros de uma forma
diferente
Editoras tradicionais pouco ligam para ebooks e novas

tecnologias. No conhecem programao para revisar os
livros tecnicamente a fundo. No tm anos de experincia

em didticas com cursos.
Conhea a Casa do Cdigo, uma editora diferente, com
curadoria daCaelum e obsesso por livros de qualidade a

preos justos.
Casa do Cdigo, ebook com preo de ebook.
2.6 - A ESTRUTURA DOS ARQUIVOS DE UM PROJETO

Como todo tipo de projeto de software, existem algumas recomendaes quanto
organizao dos arquivos de um site. No h nenhum rigor tcnico quanto a essa
organizao e, na maioria das vezes, voc vai adaptar as recomendaes da maneira que
for melhor para o seu projeto.
Como um site um conjunto de pginas Web sobre um assunto, empresa, produto ou
qualquer outra coisa, comum todos os arquivos de um site estarem dentro de uma s
pasta e, assim como um livro, recomendado que exista uma "capa", uma pgina inicial
que possa indicar para o visitante quais so as outras pginas que fazem parte desse
projeto e como ele pode acess-las, como se fosse o ndice do site.
Esse ndice, no por coincidncia, conveno adotada pelos servidores de pginas
Web. Se desejamos que uma determinada pasta seja servida como um site e dentro
dessa pasta existe um arquivo chamado index.html, esse arquivo ser a pgina inicial a
menos que alguma configurao determine outra pgina para esse fim.
Dentro da pasta do site, no mesmo nvel que o index.html, recomendado
que sejam criadas mais algumas pastas para manter separados os arquivos de imagens,
as folhas de estilo CSS e os scripts. Para iniciar um projeto, teramos uma estrutura de
pastas como a demonstrada na imagem a seguir:
Muitas vezes, um site servido por meio de uma aplicao Web e, nesses casos, a
estrutura dos arquivos depende de como a aplicao necessita dos recursos para
funcionar corretamente. Porm, no geral, as aplicaes tambm seguem um padro bem
parecido com o que estamos adotando para o nosso projeto.
2.7 - EDITORES E IDES

Existem editores de texto
como Gedit (www.gnome.org), Sublime(http://www.sublimetext.com/)
e Notepad++ (http://notepad-plus-plus.org), que possuem realce de sintaxe e outras
ferramentas para facilitar o desenvolvimento de pginas. H tambm IDEs (Integrated
Development Environment), que oferecem recursos como autocompletar e prvisualizao, como Eclipse e Visual Studio.
2.8 - PRIMEIRA PGINA
A primeira pgina que desenvolveremos para a Mirror Fashion ser a Sobre, que
explica detalhes sobre a empresa, apresenta fotos e a histria.
Recebemos o design j pronto, assim como os textos. Nosso trabalho, como
desenvolvedores de front-end, codificar o HTML e CSS necessrios para esse
resultado.
J conhece os cursos online Alura?
A Alura oferece dezenas de cursos online em sua

plataforma exclusiva de ensino que favorece o
aprendizado com a qualidadereconhecida da Caelum.
Voc pode escolher um curso nas reas de Java, Ruby,

Web, Mobile, .NET e outros, com uma assinatura que d
acesso a todos os cursos.

Conhea os cursos online Alura.
2.9 - EXERCCIO: PRIMEIROS PASSOS COM HTML

1.
Ao longo do curso, usaremos diversas imagens que o nosso designer preparou.
Nesse ponto, vamos importar todas as imagens dentro do projeto que criamos antes para
que possamos us-las nas pginas.
Copie a pasta mirror-fashion de dentro da pasta caelum/cursos/43 para a rea de

trabalho de sua mquina.
o Verifique a pasta img, agora cheia de arquivos do design do site. Alm desta pasta,
teremos as pastas js e css, que ainda no usaremos.
Em casa
Voc pode baixar um ZIP com todos os arquivos necessrios para o curso
aqui:https://s3.amazonaws.com/caelum.com.br/caelum-arquivos-curso-web.zip
2.
Dentro da pasta mirror-fashion, vamos criar o arquivo sobre.html com a
estrutura bsica contendo o DOCTYPE e as tags html, head e body:
3. <!DOCTYPE html>
4. <html>
5.
<head>
6.
7.
<title>Sobre a Mirror Fashion</title>
8.
</head>
9.
<body>
10.
</body>
11.
</html>
12.
A pgina deve ter uma imagem com o logo da empresa, um ttulo e um texto
falando sobre ela.
O texto para ser colocado na pgina est no arquivo sobre.txt disponvel na
pastaCaelum/43/textos. So vrios pargrafos que devem ser adaptados com o HTML
apropriado.
Aps copiar o texto do arquivo sobre.txt coloque cada um dos pargrafos dentro de
uma tag<p>. Coloque tambm o ttulo Histria dentro de uma tag <h2>.
Use a tag <img> para o logo e a tag <h1> para o ttulo. Seu HTML deve ficar
assim, no final:
<img src="img/logo.png">
<h1>A Mirror Fashion</h1>
<p>
A Mirror Fashion a maior empresa de comrcio eletrnico
no segmento
de moda em todo o mundo. Fundada em 1932, possui filiais
em 124 pases........
</p>
13.
Um texto corrido sem nfases difcil de ler. Use negritos e itlicos para
destacar partes importantes.
Use a tag <strong> para a nfase mais forte em negrito, por exemplo para destacar
o nome da empresa no texto do primeiro pargrafo:
<p>A <strong>Mirror Fashion</strong> a maior empresa
comrcio eletrnico.......</p>
Use tambm a nfase com <em> que deixar o texto em itlico. Na parte da Histria,
coloque os nomes das pessoas e da famlia em <em>.
14.
A pgina deve ter duas imagens. A primeira apresenta o centro da Mirror
Fashion e deve ser inserida aps o segundo pargrafo do texto. A outra, uma
imagem da Famlia Pelho e deve ser colocada aps o subttulo da Histria.
As imagens podem ser carregadas com a tag <img>, apontando seu caminho. Alm
disso, no HTML5, podemos usar as tags <figure> e <figcaption> para
destacar a imagem e colocar uma legenda em cada uma.
A imagem do centro de distribuio est em img/centro-distribuicao.png:
<figure>
<img src="img/centro-distribuicao.png">
<figcaption>Centro de distribuio da Mirror
Fashion</figcaption>
</figure>
A imagem da famlia a img/familia-pelho.jpg e deve ser colocada na parte
de Histria:
<figure>
<img src="img/familia-pelho.jpg">
<figcaption>Famlia Pelho</figcaption>
</figure>
Verifique o resultado no navegador. Devemos j ver o contedo e as imagens na
sequncia, mas sem um design muito interessante.
Boa prtica - Indentao
Uma prtica sempre recomendada, ligada limpeza e utilizada para facilitar a leitura do
cdigo, o uso correto de recuos, ou indentao, no HTML. Costumamos alinhar
elementos "irmos" na mesma margem e adicionar alguns espaos ou um tabpara
elementos "filhos".
A maioria dos exerccios dessa apostila utiliza um padro recomendado de recuos.
Boa prtica - Comentrios
Quando iniciamos nosso projeto, utilizamos poucas tags HTML. Mais tarde
adicionaremos uma quantidade razovel de elementos, o que pode gerar uma certa
confuso. Para manter o cdigo mais legvel, recomendada a adio de comentrios
antes da abertura e aps o fechamento de tags estruturais (que contero outras tags).
Dessa maneira, ns podemos identificar claramente quando um elemento
estdentro dessa estrutura ou depois da mesma.

<div id="header">
<p>Esse pargrafo est "dentro" da rea principal.</p>
</div>

<p>Esse pargrafo est "depois" da rea principal.</p>
2.10 - ESTILIZANDO COM CSS
Quando escrevemos o HTML, marcamos o contedo da pgina com tags que melhor
representam o significado daquele contedo. A quando abrimos a pgina no navegador
possvel perceber que o navegador mostra as informaes com estilos diferentes.
Um h1, por exemplo, fica em negrito numa fonte maior. Pargrafos de texto so
espaados entre si, e assim por diante. Isso quer dizer que o navegador tem um estilo
padro para as tags que usamos. Mas, claro, pra fazer sites bonites vamos
querer customizar o design dos elementos da pgina.
Antigamente, isso era feito no prprio HTML. Se quisesse um ttulo em vermelho,
era s fazer:
<h1><font color="red">Mirror Fashion anos 90</font></h1>
Alm da tag font, vrias outras tags de estilo existiam. Mas isso passado. Tags
HTML para estilo so m prtica hoje em dia e jamais devem ser usadas.
Em seu lugar, surgiu o CSS, que uma outra linguagem, separada do HTML, com
objetivo nico de cuidar da estilizao da pgina. A vantagem que o CSS bem mais
robusto que o HTML para estilizao, como veremos. Mas, principalmente, escrever
formatao visual misturado com contedo de texto no HTML se mostrou algo bem
impraticvel. O CSS resolve isso separando as coisas; regras de estilo no aparecem
mais no HTML, apenas no CSS.
2.11 - SINTAXE E INCLUSO DE CSS
A sintaxe do CSS tem estrutura simples: uma declarao de propriedades e valores
separados por um sinal de dois pontos ":", e cada propriedade separada por um sinal
de ponto e vrgula ";" da seguinte maneira:
background-color: yellow;
color: blue;
O elemento que receber essas propriedades ser exibido com o texto na cor azul e
com o fundo amarelo. Essas propriedades podem ser declaradas de trs maneiras
diferentes.
Atributo style
A primeira delas como um atributo style no prprio elemento:
<p style="color: blue; background-color: yellow;">
O contedo desta tag ser exibido em azul com fundo amarelo
no navegador!
</p>
Mas tnhamos acabado de discutir que uma das grandes vantagens do CSS era
manter as regras de estilo fora do HTML. Usando esse atributo style no parece
que fizemos isso. Justamente por isso no se recomenda esse tipo de uso na prtica, mas
sim os que veremos a seguir.
A tag style
A outra maneira de se utilizar o CSS declarando suas propriedades dentro de uma
tag<style>.
Como estamos declarando as propriedades visuais de um elemento em outro lugar do

nosso documento, precisamos indicar de alguma maneira a qual elemento nos referimos.
Fazemos isso utilizando um seletor CSS. basicamente uma forma de buscar certos
elementos dentro da pgina que recebero as regras visuais que queremos.
No exemplo a seguir, usaremos o seletor que pega todas as tags p e altera sua cor e
background:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>
O contedo desta tag ser exibido em azul com fundo
amarelo!
</p>
<p>
<strong>Tambm</strong> ser exibido em azul com
fundo amarelo!
</p>
</body>
</html>
O cdigo anterior da tag <style> indica que estamos alterando a cor e o fundo
de todos os elementos com tag p. Dizemos que selecionamos esses elementos pelo
nome de sua tag, e aplicamos certas propriedades CSS apenas neles.
Arquivo externo
A terceira maneira de declararmos os estilos do nosso documento com um arquivo
externo, geralmente com a extenso .css. Para que seja possvel declarar nosso CSS
em um arquivo parte, precisamos indicar em nosso documento HTML uma ligao
entre ele e a folha de estilo.
Alm da melhor organizao do projeto, a folha de estilo externa traz ainda as
vantagens de manter nosso HTML mais limpo e do reaproveitamento de uma mesma
folha de estilos para diversos documentos.
A indicao de uso de uma folha de estilos externa deve ser feita dentro da
tag <head> do nosso documento HTML:
<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p>
O contedo desta tag ser exibido em azul com fundo
amarelo!
</p>
<p>
<strong>Tambm</strong> ser exibido em azul com
fundo amarelo!
</p>
</body>
</html>
E dentro do arquivo estilos.css colocamos apenas o contedo do CSS:
p {
color: blue;
}
Voc no est nessa pgina a toa
Voc chegou aqui porque a Caelum referncia nacional

em cursos de Java, Ruby, Agile, Mobile, Web e .NET.
Faa curso com quem escreveu essa apostila.
2.12 - PROPRIEDADES TIPOGRFICAS E FONTES

Da mesma maneira que alteramos cores, podemos alterar o texto. Podemos definir
fontes com o uso da propriedade font-family.
A propriedade font-family pode receber seu valor com ou sem aspas. No
primeiro caso, passaremos o nome do arquivo de fonte a ser utilizado, no ltimo,
passaremos a famlia da fonte.
Por padro, os navegadores mais conhecidos exibem texto em um tipo que
conhecemos como "serif". As fontes mais conhecidas (e comumente utilizadas como
padro) so "Times" e "Times New Roman", dependendo do sistema operacional. Elas
so chamadas de fontes serifadas pelos pequenos ornamentos em suas terminaes.
Podemos alterar a famlia de fontes que queremos utilizar em nosso documento para
a famlia "sans-serif" (sem serifas), que contm, por exemplo, as fontes "Arial" e
"Helvetica". Podemos tambm declarar que queremos utilizar uma famlia de fontes
"monospace" como, por exemplo, a fonte "Courier".
h1 {
font-family: serif;
}
h2 {
font-family: sans-serif;
}
p {
font-family: monospace;
}
possvel, e muito comum, declararmos o nome de algumas fontes que gostaramos
de verificar se existem no computador, permitindo que tenhamos um controle melhor da
forma como nosso texto ser exibido. Normalmente, declaramos as fontes mais comuns,
e existe um grupo de fontes que so consideradas "seguras" por serem bem populares.
Em nosso projeto, vemos que as fontes no tm ornamentos. Ento vamos declarar
essa propriedade para todo o documento por meio do seu elemento body:
body {
font-family: "Arial", "Helvetica", sans-serif;
}
Nesse caso, o navegador verificar se a fonte "Arial" est disponvel e a utilizar

para renderizar os textos de todos os elementos do nosso documento que, por cascata,
herdaro essa propriedade do elemento body.
Caso a fonte "Arial" no esteja disponvel, o navegador verificar a disponibilidade
da prxima fonte declarada, no nosso exemplo a "Helvetica". Caso o navegador no
encontre tambm essa fonte, ele solicita qualquer fonte que pertena famlia "sansserif", declarada logo a seguir, e a utiliza para exibir o texto, no importa qual seja ela.
Temos outras propriedades para manipular a fonte, como a propriedade fontstyle, que define o estilo da fonte que pode ser: normal (normal na
vertical), italic (inclinada) eoblique (oblqua).
2.13 - ALINHAMENTO E DECORAO DE TEXTO

J vimos uma srie de propriedades e subpropriedades que determinam o estilo do
tipo (fonte). Vamos conhecer algumas maneiras de alterarmos as disposies dos textos.
Uma das propriedades mais simples, porm muito utilizada, a que diz respeito ao
alinhamento de texto: a propriedade text-align.
p {
text-align: right;
}
O exemplo anterior determina que todos os pargrafos da nossa pgina tenham o
texto alinhado para a direita. Tambm possvel determinar que um elemento tenha seu
contedo alinhado ao centro ao definirmos o valor center para a
propriedade text-align, ou ento definir que o texto deve ocupar toda a largura
do elemento aumentando o espaamento entre as palavras com o valor justify. O
padro que o texto seja alinhado esquerda, com o valor left, porm importante
lembrar que essa propriedade propaga-se em cascata.
possvel configurar tambm uma srie de espaamentos de texto com o CSS:
p {
line-height: 3px; /* tamanho da altura de cada linha */
letter-spacing: 3px; /* tamanho do espao entre cada
letra */
word-spacing: 5px; /* tamanho do espao entre cada
palavra */
text-indent: 30px; /* tamanho da margem da primeira linha
do texto */
}
2.14 - IMAGEM DE FUNDO
A propriedade background-image permite indicar um arquivo de imagem
para ser exibido ao fundo do elemento. Por exemplo:
h1 {
background-image: url(sobre-background.jpg);
}
Com essa declarao, o navegador vai requisitar um arquivo sobrebackground.jpg, que deve estar na mesma pasta do arquivo CSS onde consta
essa declarao.
Seus livros de tecnologia parecem do sculo passado?
Conhea a Casa do Cdigo, uma nova editora, com

autores de destaque no mercado, foco em ebooks (PDF,
epub, mobi), preosimbatveis e assuntos atuais.

Com a curadoria da Caelum e excelentes autores, uma
abordagemdiferente para livros de tecnologia no Brasil.

Conhea os ttulos e a nova proposta, voc vai gostar.
Casa do Cdigo, livros para o programador.
2.15 - BORDAS
As propriedades do CSS para definirmos as bordas de um elemento nos apresentam
uma srie de opes. Podemos, para cada borda de um elemento, determinar sua cor,
seu estilo de exibio e sua largura. Por exemplo:
body {
border-color: red;
border-style: solid;
border-width: 1px;
}
Para que o efeito da cor sobre a borda surta efeito, necessrio que a
propriedadeborder-style tenha qualquer valor diferente do padro none.
Conseguimos fazer tambm comentrios no CSS usando a seguinte sintaxe:
/* deixando o fundo ridculo */
body {
background: gold;
}
2.16 - EXERCCIO: PRIMEIROS PASSOS COM CSS

1.
Aplicaremos um pouco de estilo em nossa pgina usando CSS. Dentro da
pasta css, crie um arquivo sobre.css, que conter nosso cdigo de estilo para
essa pgina.
Em primeiro lugar, precisamos carregar o arquivo sobre.css dentro da
pgina sobre.htmlcom a tag <link> dentro da tag <head>:
<link rel="stylesheet" href="css/sobre.css">
Para o elemento <body>, altere a sua cor e sua fonte base por meio das
propriedades color efont-family:
body {
color: #333333;
font-family: "Lucida Sans Unicode", "Lucida Grande", sansserif;
}
O ttulo principal deve ter um fundo estampado com a imagem img/sobrebackground.jpg. Use a propriedade background-image pra isso. Aproveite e
coloque uma borda sutil nos subttulos, para ajudar a separar o contedo.
h1 {
background-image: url(../img/sobre-background.jpg);
}
h2 {
border-bottom: 2px solid #333333;
}
Acerte tambm a renderizao das figuras. Coloque um fundo cinza, uma borda sutil,
deixe a legenda em itlico com font-style e alinhe a imagem e a legenda no
centro com text-align.
figure {
background-color: #F2EDED;
border: 1px solid #ccc;
text-align: center;
}
figcaption {
font-style: italic;
}
Teste o resultado no navegador. Nossa pgina comea a pegar o estilo da pgina final!
2.
(opcional) Teste outros estilos de bordas em vez do solid que vimos no
exerccio anterior. Algumas
possibilidades: dashed, dotted, double, groove e outros.
Teste tambm outras possibilidades para o text-align,

como left, right e justify.
2.17 - CORES NA WEB

Propriedades como background-color, color, border-color, entre outras aceitam uma
cor como valor. Existem vrias maneiras de definir cores quando utilizamos o CSS.
A primeira, mais simples e ingnua, usando o nome da cor:
h1 {
color: red;
}
h2 {
background: yellow;
}
O difcil acertar a exata variao de cor que queremos no design. Por isso, bem
incomum usarmos cores com seus nomes. O mais comum definir a cor com base em
sua composio RGB.
RGB um sistema de cor bastante comum aos designers. Ele permite especificar at
16 milhes de cores como uma combinao de trs cores base: Vermelho (Red), Verde
(Green), Azul (Blue). Podemos escolher a intensidade de cada um desses trs canais
bsicos, numa escala de 0 a 255.
Um amarelo forte, por exemplo, tem 255 de Red, 255 de Green e 0 de Blue (255,
255, 0). Se quiser um laranja, basta diminuir um pouco o verde (255, 200, 0). E assim
por diante.
No CSS, podemos escrever as cores tendo como base sua composio RGB. Alis,
no CSS3 - que veremos melhor depois - h at uma sintaxe bem simples pra isso:
h3 {
color: rgb(255, 200, 0);
}
Essa sintaxe funciona nos browsers mais modernos mas no a mais comum na
prtica, por questes de compatibilidade. O mais comum a notao hexadecimal, que
acabamos usando no exerccio anterior ao escrever #F2EDED. Essa sintaxe tem suporte
universal nos navegadores e mais curta de escrever, apesar de ser mais enigmtica.
h3 {
background: #F2EDED;
}
No fundo, porm, a mesma coisa. Na notao hexadecimal (que comea com #),
temos 6 caracteres. Os primeiros 2 indicam o canal Red, os dois seguintes, o Green, e os
dois ltimos, Blue. Ou seja, RGB. E usamos a matemtica pra escrever menos, trocando
a base numrica de decimal para hexadecimal.
Na base hexadecimal, os algarismos vo de zero a quinze (ao invs do zero a nove da

base decimal comum). Para representar os algarismos de dez a quinze, usamos letras de
A a F. Nessa sintaxe, portanto, podemos utilizar nmeros de 0-9 e letras de A-F.
H uma conta por trs dessas converses, mas seu editor de imagens deve ser capaz
de fornecer ambos os valores para voc sem problemas. Um valor 255 vira FF na
notao hexadecimal. A cor #F2EDED, por exemplo, equivalente a rgb(242, 237,
237), um cinza claro.
Vale aqui uma dica quanto ao uso de cores hexadecimais, toda vez que os caracteres
presentes na composio da base se repetirem, estes podem ser simplificados. Ento um
nmero em hexadecimal 3366FF, pode ser simplificado para 36F.


Conhea a Alura.
2.18 - LISTAS HTML
No so raros os casos em que queremos exibir uma listagem em nossas pginas. O

HTML tem algumas tags definidas para que possamos fazer isso de maneira correta. A
lista mais comum a lista no-ordenada.
<ul>
<li>Primeiro item da lista</li>
<li>
Segundo item da lista:
<ul>
<li>Primeiro item da lista aninhada</li>
<li>Segundo item da lista aninhada</li>
</ul>
</li>
<li>Terceiro item da lista</li>
</ul>
Note que, para cada item da lista no-ordenada, utilizamos uma marcao de item de
lista<li>. No exemplo acima, utilizamos uma estrutura composta na qual o segundo
item da lista contm uma nova lista. A mesma tag de item de lista <li> utilizada
quando demarcamos uma lista ordenada.
<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
<li>Terceiro item da lista</li>
<li>Quarto item da lista</li>
<li>Quinto item da lista</li>
</ol>
As listas ordenadas tambm podem ter sua estrutura composta por outras listas
ordenadas como no exemplo que temos para as listas no-ordenadas. Tambm
possvel ter listas ordenadas aninhadas em um item de uma lista no-ordenada e viceversa.
Existe um terceiro tipo de lista que devemos utilizar para demarcar um glossrio,
quando listamos termos e seus significados. Essa lista a lista de definio.
<dl>
<dt>HTML</dt>
<dd>
HTML a linguagem de marcao de textos utilizada
para exibir textos como pginas na Internet.
</dd>
<dt>Navegador</dt>
<dd>
Navegador o software que requisita um documento HTML
atravs do protocolo HTTP e exibe seu contedo em uma
janela.
</dd>
</dl>
2.19 - ESPAAMENTO E MARGEM
Utilizamos a
propriedade padding para espaamento e margin para margem. Vejamos cada
uma e como elas diferem entre si.
Padding
A propriedade padding utilizada para definir uma margem interna em alguns
elementos (por margem interna queremos dizer a distncia entre o limite do elemento,
sua borda, e seu respectivo contedo) e tem as subpropriedades listadas a seguir:
padding-top
padding-right
padding-bottom
padding-left
Essas propriedades aplicam uma distncia entre o limite do elemento e seu contedo
acima, direita, abaixo e esquerda respectivamente. Essa ordem importante para
entendermos como funciona a shorthand property do padding.
Podemos definir todos os valores para as subpropriedades do padding em uma nica
propriedade, chamada exatamente de padding, e seu comportamento descrito nos
exemplos a seguir:
Se passado somente um valor para a propriedade padding, esse mesmo valor
aplicado em todas as direes.
p {
padding: 10px;
}
Se passados dois valores, o primeiro ser aplicado acima e abaixo (equivalente a
passar o mesmo valor para padding-top e padding-bottom) e o
segundo ser aplicado direita e esquerda (equivalente ao mesmo valor
para padding-right e padding-left).
p {
padding: 10px 15px;
}
Se passados trs valores, o primeiro ser aplicado acima (equivalente
a padding-top), o segundo ser aplicado direita e esquerda (equivalente a
passar o mesmo valor parapadding-right e padding-left) e o
terceiro valor ser aplicado abaixo do elemento (equivalente a paddingbottom)
p {
padding: 10px 20px 15px;
}
Se passados quatro valores, sero aplicados respectivamente a paddingtop, padding-right, padding-bottom e padding-left.
Para facilitar a memorizao dessa ordem, basta lembrar que os valores so aplicados
em sentido horrio.
p {
padding: 10px 20px 15px 5px;
Margin
A propriedade margin bem parecida com a propriedade padding, exceto
que ela adiciona espao aps o limite do elemento, ou seja, um espaamento alm do
elemento em si. Alm das subpropriedades listadas a seguir, h a shorthand
property margin que se comporta da mesma maneira que a shorthand
property do padding vista no tpico anterior.
margin-top
margin-right
margin-bottom
margin-left
H ainda uma maneira de permitir que o navegador defina qual ser a dimenso da
propriedade padding ou margin conforme o espao disponvel na tela:
definimos o valorauto para a margem ou o espaamento que quisermos.
No exemplo a seguir, definimos que um elemento no tem nenhuma margem acima
ou abaixo de seu contedo e que o navegador define uma margem igual para ambos os
lados de acordo com o espao disponvel:
p {
margin: 0 auto;
}
Dimenses
possvel determinar as dimenses de um elemento, por exemplo:
p {
background-color: red;
height: 300px;
width: 300px;
}
Todos os pargrafos do nosso HTML ocuparo 300 pixels de largura e de altura,
com cor de fundo vermelha.
2.20 - EXERCCIOS: LISTAS E MARGENS

1.
Ainda na pgina sobre.html, crie um subttulo chamado Diferenciais e, logo em
seguida, uma lista de diferenciais. Use <h2> para o subttulo, <ul> para a lista
e <li> para os itens da lista.
Dica: voc pode copiar o texto dos diferenciais do arquivo diferenciais.txt.
<h2>Diferenciais</h2>
<ul>
<li>Menor preo do varejo, garantido</li>

<li>Se voc achar uma loja mais barata, leva o produto de
graa</li>
....
</ul>
Teste o resultado no navegador.
2.
Podemos melhorar a apresentao da pgina acertando alguns espaamentos
usando vrias propriedades do CSS, como margin, padding e textindent.
3. h1 {
4.
padding: 10px;
5. }
6.
7. h2 {
8.
margin-top: 30px;
9. }
10.
11.
p {
12.
padding: 0 45px;
13.
text-indent: 15px;
14.
}
15.
16.
figure {
17.
padding: 15px;
18.
margin: 30px;
19.
}
20.
21.
figcaption {
22.
margin-top: 10px;
23.
}
Veja o resultado no navegador.
24.
Para centralizar o body como no design, podemos usar o truque de colocar um
tamanho fixo e margens auto na esquerda de direita:
25.
body {
26.
margin-left: auto;
27.
margin-right: auto;
28.
width: 940px;
29.
}
Verifique mais uma vez o resultado.
Voc pode tambm fazer o curso WD-43 dessa apostila na
Caelum
Querendo aprender ainda mais sobre HTML, CSS e

JavaScript? Esclarecer dvidas dos exerccios? Ouvir
explicaes detalhadas com um instrutor?
A Caelum oferece o curso WD-43 presencial nas cidades

de So Paulo, Rio de Janeiro e Braslia, alm de turmas
incompany.

2.21 - LINKS HTML

Quando precisamos indicar que um trecho de texto se refere a um outro contedo,
seja ele no mesmo documento ou em outro endereo, utilizamos a tag de ncora <a>.
Existem dois diferentes usos para as ncoras. Um deles a definio de links:
<p>
Visite o site da <a
href="http://www.caelum.com.br">Caelum</a>.
</p>
Note que a ncora est demarcando apenas a palavra "Caelum" de todo o contedo
do pargrafo exemplificado. Isso significa que, ao clicarmos com o cursor do mouse na
palavra "Caelum", o navegador redirecionar o usurio para o site da Caelum, indicado
no atributohref.
Outro uso para a tag de ncora a demarcao de destinos para links dentro do
prprio documento, o que chamamos de bookmark.
<p>Mais informaes <a href="#info">aqui</a>.</p>
<p>Contedo da pgina...</p>
<h2 id="info">Mais informaes sobre o assunto:</h2>
<p>Informaes...</p>
De acordo com o exemplo acima, ao clicarmos sobre a palavra "aqui", demarcada
com um link, o usurio ser levado poro da pgina onde o bookmark "info"
visvel. Bookmark o elemento que tem o atributo id.
possvel, com o uso de um link, levar o usurio a um bookmark presente em outra

pgina.
<a href="http://www.caelum.com.br/curso/wd43/#contato">
Entre em contato sobre o curso
</a>
O exemplo acima far com que o usurio que clicar no link seja levado poro da
pgina indicada no endereo, especificamente no ponto onde o bookmark "contato" seja
visvel.
2.22 - EXERCCIOS: LINKS

1.
No primeiro pargrafo do texto, citamos o centro de distribuio na cidade
deJacarezinho, no Paran. Transforme esse texto em um link externo apontando para
o mapa no Google Maps.
Use a tag <a> para criar link para o Google Maps:
<a href="https://maps.google.com.br/?q=Jacarezinho">
Jacarezinho, no Paran
</a>
Teste a pgina no navegador e acesse o link.
2.
Durante o curso, vamos criar vrias pginas para o site da Mirror Fashion, como
uma pgina inicial (chamada index.html).
Queremos, nessa pgina de Sobre que estamos fazendo, linkar para essa pgina. Por
isso, vamos cri-la agora na pasta mirror-fashion com a estrutura bsica e
um pargrafo indicando em qual pgina o usurio est. No se preocupe, ela ser
incrementada em breve.
Crie a pgina index.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Ol, sou o index.html!</h1>
</body>
</html>
Adicione um link inteno na nossa sobre.html apontando para esta pgina que
acabamos de criar. O terceiro pargrafo do texto possui referncia a esta pgina mas
ainda sem link. Crie link l:
... Acesse <a href="index.html">nossa loja</a>...
Repare como apenas envolvemos o texto a ser linkado usando a tag <a>.
Veja o resultado.
3.
Se reparar bem, ainda nesse terceiro pargrafo de texto, h referncias textuais
para as outras sees da nossa pgina, em particular para a Histria e os Diferenciais.
Para facilitar a navegao do usurio, podemos transformar essas referncias em

ncoras para as respectivas sees no HTML.
Para isso, adicione um id em cada um dos subttulos para identific-los:
<h2 id="historia">Histria</h2>
...
<h2 id="diferenciais">Diferenciais</h2>
Agora que temos os ids dos subttulos preenchidos, podemos criar uma ncora para
eles:
... Conhea tambm nossa <a href="#historia">histria</a> e
nossos <a href="#diferenciais">diferenciais</a>....
Veja o resultado em seu navegador.
2.23 - ELEMENTOS ESTRUTURAIS

J vimos muitas tags para casos especficos: ttulos com h1, pargrafos com p,
imagens com img, listas com ul etc. E ainda vamos ver vrias outras.
Mas claro que no existe uma tag diferente para cada coisa do universo. O conjunto
de tags do HTML bem vasto mas tambm limitado.
Invariavelmente voc vai cair algum dia num cenrio onde no consegue achar a tag
certa para aquele contedo. Nesse caso, pode usar as tags <div> e <span> que
funcionam como coringas. So tags sem nenhum significado especial mas que podem
servir para agrupar um certo contedo, tanto um bloco da pgina quanto um pedao de
texto.
E, como vamos ver a seguir, vamos poder estilizar esses divs e spans com CSS
customizado. Por padro, eles no tm estilo algum.
Tire suas dvidas no novo GUJ Respostas
O GUJ um dos principais fruns brasileiros de
computao e o maior em portugus sobre Java. A nova

verso do GUJ baseada em uma ferramenta
de perguntas e respostas (QA) e tem uma comunidade
muito forte. So mais de 150 mil usurios pra ajudar voc

a esclarecer suas dvidas.
Faa sua pergunta.
2.24 - CSS: SELETORES DE ID E FILHO

J vimos como selecionar elementos no CSS usando simplesmente o nome da tag:
p {
color: red;
}
Apesar de simples, uma maneira muito limitada de selecionar. s vezes no
queremos pegar todos os pargrafos da pgina, mas apenas algum determinado.
Existem, portanto, maneiras mais avanadas de selecionarmos um ou mais elementos
do HTML usando os seletores CSS. Vamos ver seletores CSS quase que ao longo do
curso todo, inclusive alguns bem avanados e modernos do CSS3. Por enquanto, vamos
ver mais 2 bsicos alm do seletor por nome de tag.
Seletor de ID
possvel aplicar propriedades visuais a um elemento selecionado pelo valor de seu
atributo id. Para isso, o seletor deve iniciar com o caractere "#" seguido do valor
correspondente.
#cabecalho {
color: white;
text-align: center;
}
O seletor acima far com que o elemento do nosso HTML que tem o
atributo id com valor "cabecalho" tenha seu texto renderizado na cor branca e
centralizado. Note que no h nenhuma indicao para qual tag a propriedade ser
aplicada. Pode ser tanto uma <div>quanto um <p>, at mesmo tags sem contedo
como uma <img>, desde que essa tenha o atributo id com o valor "cabecalho".
Como o atributo id deve ter valor nico no documento, o seletor deve aplicar suas
propriedades declaradas somente quele nico elemento e, por cascata, a todos os seus
elementos filhos.
Seletor hierrquico
Podemos ainda utilizar um seletor hierrquico que permite aplicar estilos aos
elementos filhos de um elemento pai:
#rodape img {
margin-right: 35px;
vertical-align: middle;
width: 94px;
}
No exemplo anterior, o elemento pai rodape selecionado pelo seu id. O estilo
ser aplicado apenas nos elementos img filhos do elemento com id=rodape.
2.25 - FLUXO DO DOCUMENTO E FLOAT

Suponhamos que, por uma questo de design, a imagem da famlia Pelho deva vir ao
lado do pargrafo e conforme a imagem abaixo:
Isso no acontece por padro. Repare que, observando as tags HTML que usamos at
agora, os elementos da pgina so desenhados um em cima do outro. como se cada
elemento fosse uma caixa (box) e o padro empilhar essas caixas verticalmente. Mais
pra frente vamos entender melhor esse algoritmo, mas agora o importante que ele
atrapalha esse nosso design.
Temos um problema: a tag <figure> ocupa toda a largura da pgina e aparece
empilhada no fluxo do documento, no permitindo que outros elementos sejam
adicionados ao seu lado.
Este problema pode ser solucionado por meio da propriedade float. Esta propriedade
permite que tiremos um certo elemento do fluxo vertical do documento o que faz com
que o contedo abaixo dele flua ao seu redor. Na prtica, vai fazer exatamente o layout
que queremos.
Em nosso exemplo, o contedo do pargrafo tentar fluir ao redor da nossa imagem
comfloat. Perceba que houve uma perturbao do fluxo HTML, pois agora a nossa
imagem parece existir fora do fluxo.
2.26 - EXERCCIOS: SELETORES CSS E FLUTUAO DE
ELEMENTOS
1.
Temos uma <figure> com a imagem do centro de distribuio que
queremos centralizar na pgina (margin auto) e acertar o tamanho (width).
Para aplicar essas regras apenas a esse figure e no a todos da pgina, vamos usar
o ID. Coloque um id na <figure> para podermos estiliz-la especificamente via
CSS:
<figure id="centro-distribuicao">
....
Adicionando o CSS:
#centro-distribuicao {
margin-left: auto;
margin-right: auto;
width: 550px;
}
Teste no navegador. Compare o resultado com a outra figura que no recebeu o mesmo
estilo.
2.
Crie um rodap para a pgina utilizando uma <div>, que deve ser inserida
como ltimo elemento dentro da tag <body>:
3. <div id="rodape">
4.
<img src="img/logo.png">
5.
6.
© Copyright Mirror Fashion
7. </div>
Teste o resultado.
8.
Assim como fizemos para os ttulos e subttulos, estilize o nosso rodap. Repare
no uso doid via CSS para selecionarmos apenas o elemento especfico que ser
estilizado. Repare tambm no uso do seletor de descendentes para indicar um elemento
que est dentro de outro.
9. #rodape {
10.
color: #777;
11.
margin: 30px 0;
12.
padding: 30px 0;
13.
}
14.
15.
#rodape img {
16.
margin-right: 30px;
17.
vertical-align: middle;
18.
width: 94px;
19.
}
Teste o resultado final no navegador.
20.
Queremos que a imagem da Famlia Pelho esteja flutuando a direita no texto na
seo sobre a Histria da empresa. Para isso, use a propriedade float no CSS.
Como a <figure> com a imagem da famlia Pelho ainda no possui id, adicione
um:
<figure id="familia-pelho">
....
Agora podemos referenciar o elemento atravs de seu id em nosso CSS, indicando a
flutuao e uma margem para espaamento:
#familia-pelho {
float: right;
margin: 0 0 10px 10px;
}
Teste o resultado. Repare como o texto renderizado ao redor da imagem, bem
diferente de antes.
21.
(opcional) Faa testes com o float:
left tambm.
22.
(opcional) Teste flutuar a imagem do centro de distribuio. Como o contedo
fluir ao seu redor agora? o que queramos? Como melhorar?
Nova editora Casa do Cdigo com livros de uma forma
diferente
Editoras tradicionais pouco ligam para ebooks e novas

tecnologias. No conhecem programao para revisar os
livros tecnicamente a fundo. No tm anos de experincia

em didticas com cursos.
Conhea a Casa do Cdigo, uma editora diferente, com

curadoria daCaelum e obsesso por livros de qualidade a
preos justos.
Casa do Cdigo, ebook com preo de ebook.
2.27 - O FUTURO E PRESENTE DA WEB COM O HTML5

Nos ltimos anos, muito tem se falado sobre a prxima verso do HTML, o HTML5.
Esse projeto um grande esforo do W3C e dos principais browsers para atender a uma
srie de necessidades do desenvolvimento da Web como plataforma de sistemas
distribudos e informao descentralizada. Algumas novidades so importantes para a
marcao de contedo, outras para a estilizao com o CSS nvel 3 (CSS3) e outras
novidades so importantes para interao avanada com o usurio com novas
funcionalidades do navegador com JavaScript.
Apesar da especificao ainda no estar completa e existirem diferenas entre as
implementaes adotadas pelos diferentes navegadores ainda hoje, o mercado est
tomando uma posio bem agressiva quanto adoo dos novos padres e hoje muitos
projetos j so iniciados com os novos padres.
Em alguns casos, os esforos de manuteno de um projeto que adota os novos
padres similar ou comparvel com a manuteno de um projeto que prev
compatibilidade total com navegadores j obsoletos como o Internet Explorer 7 e o
Firefox 3.
Em nosso projeto, vamos adotar os padres do HTML5 e vamos conhecer e utilizar
algumas de suas novidades quanto melhoria da semntica de contedo e novas
propriedades de CSS que nos permite adicionar efeitos visuais antes impossveis. Ainda
assim, nosso projeto ser parcialmente compatvel com navegadores obsoletos por conta
da tcnica Progressive Enhancement.
CAPTULO 3
HTML semntico e
posicionamento no CSS
"O caos a rima do inaudito."
3.1 - O PROCESSO DE DESENVOLVIMENTO DE UMA TELA

Existe hoje no mercado uma grande quantidade de empresas especializadas no
desenvolvimento de sites e aplicaes web, bem como algumas empresas de
desenvolvimento de software ou agncias de comunicao que tm pessoas capacitadas
para executar esse tipo de projeto.
Quando detectada a necessidade do desenvolvimento de um site ou aplicao web, a
empresa que tem essa necessidade deve passar todas as informaes relevantes ao
projeto para a empresa que vai execut-lo. A empresa responsvel pelo seu
desenvolvimento deve analisar muito bem essas informaes e utilizar pesquisas para
complementar ou mesmo certificar-se da validade dessas informaes.
Um projeto de site ou aplicao web envolve muitas disciplinas em sua execuo,
pois so diversas caractersticas a serem analisadas e diversas as possibilidades
apresentadas pela plataforma. Por exemplo, devemos conhecer muito bem as
caractersticas do pblico alvo, pois ele define qual a melhor abordagem para definir a
navegao, tom lingustico e visual a ser adotado, entre outras. A afinidade do pblico
com a Internet e o computador pode inclusive definir o tipo e a intensidade das
inovaes que podem ser utilizadas.
Por isso, a primeira etapa do desenvolvimento do projeto fica a cargo da rea de User
Experience Design (UX) ou Interaction Design (IxD), normalmente composta de
pessoas com formao na rea de comunicao. Essa equipe, ou pessoa, analisa e
enderea uma srie de informaes da caracterstica humana do projeto, definindo a
quantidade, contedo e localizao de cada informao.
Algumas das motivaes e prticas de Design de Interao e Experincia do Usurio
so contedo do curso Design de Interao, Experincia do Usurio e Usabilidade.
O resultado do trabalho dessa equipe uma srie de definies sobre a navegao (mapa
do site) e um esboo de cada uma das vises, que so as pginas, e vises parciais
como, por exemplo, os dilogos de alerta e confirmao da aplicao. Essas vises no
adotam nenhum padro de design grfico: so utilizadas fontes, cores e imagens neutras,
embora as informaes escritas devam ser definidas nessa fase do projeto.
Esses esboos das vises so o que chamamos de wireframes e guiam o restante do
processo de design.
Com os wireframes em mos, hora de adicionar as imagens, cores, tipos, fundos,

bordas e outras caractersticas visuais. Esse trabalho realizado pelos designers
grficos, que utilizam ferramentas grficas como Adobe Photoshop, Adobe Fireworks,
GIMP, entre outras. O que resulta desse trabalho que o designer realiza em cada
wireframe o que chamamos delayout. Os layouts so imagens estticas j com o
visual completo a ser implementado. Apesar de os navegadores serem capazes de exibir

imagens estticas, exibir uma nica imagem para o usurio final no navegador no a
forma ideal de se publicar uma pgina.
Para que as informaes sejam exibidas de forma correta e para possibilitar outras
formas de uso e interao com o contedo, necessrio que a equipe de programao
front-endtransforme essas imagens em telas visveis e, principalmente, utilizveis pelos
navegadores. Existem diversas tecnologias e ferramentas para realizar esse tipo de
trabalho. Algumas das tecnologias disponveis so: HTML, Adobe Flash, Adobe Flex,
JavaFX e Microsoft Silverlight.
De todas as tecnologias disponveis, a mais recomendada certamente o HTML,
pois a linguagem que o navegador entende. Todas as outras tecnologias citadas
dependem do HTML para serem exibidas corretamente no navegador e, ultimamente, o
uso do HTML, em conjunto com o CSS e o JavaScript, tem evoludo a ponto de
podermos substituir algumas dessas outras tecnologias onde tnhamos mais poder e
controle em relao exibio de grficos, efeitos e interatividade.
3.2 - O PROJETO MIRROR FASHION

Durante o curso, vamos produzir algumas pginas de um projeto: um e-commerce de
roupas. No captulo anterior, de introduo, criamos uma pgina simples de Sobre.
Vamos comear agora a projetar o restante, com as pginas mais complexas.
Uma equipe de UX j definiu as pginas, o contedo de cada uma delas e produziu
algunswireframes. Depois de realizado esse trabalho, a equipe de design j adicionou o
visual desejado pelo cliente como resultado final do projeto.
Agora a nossa vez de transformar esse layout em HTML, para que os
navegadores possam ler e renderizar o cdigo, exibir a pgina para o usurio final.
No captulo anterior, comeamos a codificar a pgina de Sobre da nossa loja, com o
intuito de praticar o bsico de HTML e CSS.
Nesse momento, vamos focar na construo da parte principal da loja, a Home Page,
e seguiremos o layout oficial criado pela equipe de design:
Figura 3.2: Design da Homepage
J conhece os cursos online Alura?
A Alura oferece dezenas de cursos online em sua

plataforma exclusiva de ensino que favorece o
aprendizado com a qualidadereconhecida da Caelum.

Voc pode escolher um curso nas reas de Java, Ruby,
Web, Mobile, .NET e outros, com uma assinatura que d

acesso a todos os cursos.
Conhea os cursos online Alura.
3.3 - ANALISANDO O LAYOUT

Antes de digitar qualquer cdigo, necessria uma anlise do layout. Com essa
anlise, definiremos as principais reas de nossas pginas. Um fator muito importante a
ser considerado quando fazemos essa anlise do layout o modo como os navegadores
interpretam e renderizam o HTML.
O HTML exibido no navegador de acordo com a ordem de leitura do idioma da
pgina. Na maioria dos casos, a leitura feita da esquerda para a direita, de cima para
baixo, da mesma maneira que lemos essa apostila, por exemplo.
Olhe detalhadamente nosso layout e tente imaginar qual a melhor maneira de

estruturar nosso HTML para que possamos codific-lo.
De acordo com o posicionamento de elementos que foi definido desde a etapa de
criao dos wireframes, todas as pginas no nosso projeto obedecem a uma estrutura
similar.
Estrutura da pgina
Note que h um cabealho (uma rea que potencialmente se repetir em mais de uma
pgina) que ocupa uma largura fixa; sendo assim, podemos criar uma seo exclusiva
para o cabealho.
Outra rea que tem uma caracterstica semelhante o rodap, pois pode se repetir em
mais de uma pgina. Podemos notar que o fundo do elemento vai de uma ponta outra
da pgina, porm seu contedo segue a mesma largura fixa do restante da pgina.
A rea central, que contm informaes diferentes em cada pgina, no tem nenhum
elemento ao fundo. Porm, notemos que sua largura limitada antes de atingir o incio e
o fim da pgina. Notemos que, apesar do fundo do rodap ir de uma ponta outra, seu
contedo tambm limitado pela mesma largura do contedo.
No caso da home page, o miolo da pgina pode ainda ser visto como dois blocos
diferentes. H o bloco principal inicial com o menu de navegao e o banner de
destaque. E h outro bloco no final com dois painis com listas de produtos.
Poderamos definir essas reas da seguinte maneira:
<body>
<header>

</header>
<section id="main">

</section>
<section id="destaques">

</section>
<footer>

</footer>
</body>
Note que utilizamos o atributo id do HTML para identificar
a <section> principal. O atributo id deve ser nico em cada pgina, ou seja, s
pode haver um elemento com o atributo id="main". Mesmo se o outro elemento
for de outra tag, o id no pode se repetir. De acordo com a estrutura acima, ns
separamos as quatro reas principais.
3.4 - HTML SEMNTICO
As tags que usamos antes - header, section e footer - so tags novas
do HTML5. Antigamente, numa situao parecida com essa, teramos criado apenas
trs div, uma para cada parte da pgina, e talvez colocado ids diferentes pra cada
uma.
Qual a diferena entre colocar div e essas novas tags do HTML5? Visualmente e
funcionalmente, nenhuma diferena. A nica diferena o nome da tag e o significado
que elas carregam. E isso bastante importante.
Dizemos que a funo do HTML fazer a marcao do contedo da pgina,
representar sua estrutura da informao. No papel do HTML, por exemplo, cuidar da
apresentao final e dos detalhes de design - isso papel do CSS. O HTML precisa
ser claro e limpo, focado em marcar o contedo.
As novas tags do HTML5 trazem novos significados semnticos para usarmos em
elementos HTML. Em vez de simplesmente agrupar os elementos do cabealho em
um divgenrico e sem significado, usamos uma tag header que carrega em si o
significado de representar um cabealho.
Com isso, temos um HTML com estrutura baseada no significado de seu contedo, o
que traz uma srie de benefcios, como a facilidade de manuteno e compreenso do
documento.
Provavelmente, o design da sua pgina deixa bastante claro qual parte da sua pgina
o cabealho e qual parte o menu de navegao. Visualmente, so distinguveis para o
usurio comum. Mas e se desabilitarmos o CSS e as regras visuais? Como distinguir
esses contedos?
Um HTML semntico carrega significado independente da sua apresentao visual.
Isso particularmente importante quando o contedo ser consumido por clientes no
visuais. H vrios desses cenrios. Um usurio cego poderia usar um leitor de tela para
ouvir sua pgina. Neste caso, a estrutura semntica do HTML essencial para ele
entender as partes do contedo.
Mais importante ainda, robs de busca como o Google tambm so leitores no
visuais da sua pgina. Sem um HTML semntico, o Google no consegue, por exemplo,
saber que aquilo um menu e que deve seguir seus links. Ou que determinada parte s
um rodap informativo, mas no faz parte do contedo principal. Semntica uma
importante tcnica de SEO - Search Engine Optimization - e crtica para marketing

digital.
Vamos falar bastante de semntica ao longo do curso e esse um ingrediente
fundamental das tcnicas modernas de web design. Veremos mais cenrios onde uma
boa semntica essencial.
3.5 - PENSANDO NO HEADER

J sabemos que o nosso cabealho ser representado pela tag <header> do
HTML5, semanticamente perfeita para a situao. Mas e o contedo dele?
Observe apenas o cabealho no layout anterior. Quais blocos de contedo voc
identifica nele?
O logo principal com o nome da empresa
Uma mensagem sobre a sacola de compras
Uma lista de links de navegao da loja

Repare como no destacamos a presena do cone da sacola. Ele no faz parte do
contedo, meramente decorativo. O contedo a mensagem sobre os itens na sacola.
Que tipo de contedo esse? Qual tag usar? apenas uma frase informativa, um
pargrafo de texto. Podemos usar <p>:
<p>
Nenhum item na sacola de compras
</p>
Mas e a imagem com o cone? Como decorativa, pertence ao CSS, como veremos
depois. O HTML no tem nada a ver com isso.
Continuando no header, nossa lista de links pode ser uma lista <ul> com <li>s. Dentro de cada item, vamos usar um link - <a> - para a pgina
correspondente. Mas h como melhorar ainda mais: esses links no so links ordinrios,
so essenciais para a navegao do usurio na pgina. Podemos sinalizar isso com a
nova tag <nav> do HTML5, que representa blocos de navegao primrios:
<nav>
<ul>
<li><a href="#">Sua Conta</a></li>
<li><a href="#">Lista de Desejos</a></li>
<li><a href="#">Carto Fidelidade</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="#">Ajuda</a></li>
</ul>
</nav>
O ltimo ponto para fecharmos nosso cabealho o logo. Como represent-lo?
Visualmente, observamos no layout que apenas uma imagem. Podemos usar ento
uma tag <img> como fizemos antes. Mas e semanticamente, o que aquele
contedo? E, principalmente, o que significa aquele logo para clientes no visuais?
Como gostaramos que esse contedo fosse indexado no Google?
muito comum, nesse tipo de situao, usar um <h1> com um texto que
represente o ttulo da nossa pgina. Se pensarmos bem, o que queremos passar com o
logo a ideia de que a pgina da Mirror Fashion.
Quando o texto for lido para um cego, queremos essa mensagem lida. Quando o
Google indexar, queremos que ele associe nossa pgina com Mirror
Fashion e no com uma imagem "qualquer".
fcil obter esse resultado colocando a <img> dentro do <h1>. E para
representar o contedo textual da imagem (o que vai ser usado pelo leitor de tela e pelo
Google), usamos o atributo alt da imagem. Esse atributo indica contedo alternativo,
que ser usado quando o cliente no for visual e no conseguir enxergar a imagem
visualmente.
<h1><img src="img/logo.png" alt="Mirror Fashion"></h1>
Repare como a colocao do H1 e do ALT na imagem no alteram em nada a pgina
visualmente. Esto l por pura importncia semntica. E isso muito bom. O H1 dar
o devido destaque semntico para a o logo, colocando-o como elemento principal. E o
ALT vai designar um contedo textual alternativo imagem.
Voc no est nessa pgina a toa
Voc chegou aqui porque a Caelum referncia nacional

em cursos de Java, Ruby, Agile, Mobile, Web e .NET.
Faa curso com quem escreveu essa apostila.
3.6 - ESTILIZAO COM CLASSES

Para podermos estilizar os elementos que criamos, vamos precisar de uma forma de
selecionarmos no CSS cada coisa. J vimos seletor de tag e por ID. Ou seja, pra estilizar
nosso menu <nav>, podamos fazer:
nav {
...
}
Mas imagine que podemos ter muitos NAV na pgina e queremos ser mais
especficos. O ID uma soluo:
<nav id="menu-opcoes">
</nav>
E, no CSS:
#menu-opcoes {
...
}
Vamos ver uma terceira forma, no uso de classes. O cdigo semelhante mas usa o
atributo class no HTML e o ponto no CSS:
<nav class="menu-opcoes">
</nav>
E, no CSS:
.menu-opcoes {
...
}
Mas quando usar ID ou CLASS?
Ambos fariam seu trabalho nesse caso. Mas bom lembrar que ids so mais fortes,
devem ser nicos na pgina, sempre. Embora esse nosso menu seja nico agora,
imagine se, no futuro, quisermos ter o mesmo menu em outro ponto da pgina, mais pra
baixo? Usar classes facilita reuso de cdigo e flexibilidade.
Alm disso, um elemento pode ter mais de uma classe ao mesmo tempo, aplicando
estilos de vrias regras do CSS ao mesmo tempo:
<nav class="menu-opcoes menu-cabecalho">

...
</nav>
.menu-opcoes {
// cdigo de um menu de opcoes
// essas regras sero aplicadas ao nav
}
.menu-cabecalho {
// cdigo de um menu no cabealho
// essas regras TAMBM sero aplicadas ao nav
}
No caso do ID, no. Cada elemento s tem um id, nico.
Preferimos o uso de classes pra deixar em aberto reaproveitar aquele elemento em
mais de um ponto depois. Vamos fazer isso na sacola tambm:
<p class="sacola">
</p>
Reutilizando uma classe para diversos elementos

Pode ser interessante criar uma classe que determina a centralizao horizontal de
qualquer elemento, sem interferir em suas margens superior e inferior como no exemplo
a seguir:
.container {
margin-right: auto;
margin-left: auto;
}
Agora, s adicionar a class "container" ao elemento, mesmo que ele j tenha outros
valores para esse atributo:
<div class="info container">
<p>Contedo que deve ficar centralizado</p>
</div>
3.7 - EXERCCIOS: HEADER SEMNTICO

1.
J temos o arquivo index.html criado. Vamos apagar seu nico pargrafo, pois
adicionaremos contedo que far sentido.
Crie o arquivo estilos.css na pasta css do projeto, que ser onde escreveremos o CSS
visual da pgina. Adicione tambm a tag <link> apontando para css/estilos.css:
<link rel="stylesheet" href="css/estilos.css">
2.
Prximo passo: criar o cabealho. Use as tags semnticas que vimos no curso,
como<header>, <nav>, <ul>, <li>, etc. Crie links para as pginas do
menu. E use <h1> para representar o ttulo da pgina com o logo acessvel.
3. <header>
4.
<h1><img src="img/logo.png" alt="Mirror Fashion"></h1>
5.
6.
<p class="sacola">
7.
8.
</p>
9.
10.
<nav class="menu-opcoes">
11.
<ul>
12.
<li><a href="#">Sua Conta</a></li>
13.
<li><a href="#">Lista de Desejos</a></li>
14.
<li><a href="#">Carto Fidelidade</a></li>
15.
<li><a href="sobre.html">Sobre</a></li>
16.
<li><a href="#">Ajuda</a></li>
17.
</ul>
18.
</nav>
19.
</header>
20.
J podemos at testar no navegador. Repare como a pgina, embora sem estilo
visual, utilizvel. assim que os clientes no visuais lero nosso contedo. Qual a
importncia de uma marcao semntica?
21.
Vamos criar a estilizao visual bsica do nosso contedo, sem nos
preocuparmos com posicionamento ainda. Ajuste as cores e alinhamento dos textos.
Coloque o cone da sacola com CSS atravs de uma imagem de fundo do pargrafo:
22.
.sacola {
23.
background: url(../img/sacola.png) no-repeat top
right;
24.
25.
font-size: 14px;
26.
padding-right: 35px;
27.
text-align: right;
28.
width: 140px;
29.
}
30.
31.
.menu-opcoes ul {
32.
font-size: 15px;
33.
}
34.
35.
.menu-opcoes a {
36.
color: #003366;
37.
}
Aproveite e configure a cor e a fonte base de todos os textos do site, usando um seletor
direto na tag <body>:
body {
color: #333333;
font-family: "Lucida Sans Unicode", "Lucida Grande", sansserif;
}
Teste no navegador e veja como nossa pgina comea a pegar o design.
3.8 - CSS RESET

Quando no especificamos nenhum estilo para nossos elementos do HTML, o
navegador utiliza uma srie de estilos padro, que so diferentes em cada um dos
navegadores. Em um momento mais avanado dos nossos projetos, poderemos enfrentar
problemas com coisas que no tnhamos previsto; por exemplo, o espaamento entre
caracteres utilizado em determinado navegador pode fazer com que um texto que, pela
nossa definio deveria aparecer em 4 linhas, aparea com 5, quebrando todo o nosso
layout.
Para evitar esse tipo de interferncia, alguns desenvolvedores e empresas criaram
alguns estilos que chamamos de CSS Reset. A inteno setar um valor bsico para
todas as caractersticas do CSS, sobrescrevendo totalmente os estilos padro do
navegador.
Desse jeito podemos comear a estilizar as nossas pginas a partir de um ponto que
o mesmo para todos os casos, o que nos permite ter um resultado muito mais slido em
vrios navegadores.
Existem algumas opes para resetar os valores do CSS. Algumas que merecem
destaque hoje so as seguintes:
HTML5 Boilerplate
O HTML5 Boilerplate um projeto que pretende fornecer um excelente ponto de
partida para quem pretende desenvolver um novo projeto com HTML5. Uma srie de
tcnicas para aumentar a compatibilidade da nova tecnologia com navegadores um
pouco mais antigos esto presentes e o cdigo totalmente gratuito. Em seu arquivo
"style.css", esto reunidas diversas tcnicas de CSS Reset. Apesar de consistentes,
algumas dessas tcnicas so um pouco complexas, mas um ponto de partida que
podemos considerar.
YUI3 CSS Reset

Criado pelos desenvolvedores front-end do Yahoo!, uma das referncias na rea, esse
CSS Reset composto de 3 arquivos distintos. O primeiro deles, chamado de Reset,
simplesmente muda todos os valores possveis para um valor padro, onde at mesmo
as tags <h1> e <small> passam a ser exibidas com o mesmo tamanho. O segundo
arquivo chamado de Base, onde algumas margens e dimenses dos elementos so
padronizadas. O terceiro chamado de Font, onde o tamanho dos tipos definido para
que tenhamos um visual consistente inclusive em diversos dispositivos mveis.
Eric Meyer CSS Reset
H tambm o famoso CSS Reset de Eric Meyer, que pode ser obtido
emhttp://meyerweb.com/eric/tools/css/reset/. apenas um arquivo com tamanho bem
reduzido.
Seus livros de tecnologia parecem do sculo passado?
Conhea a Casa do Cdigo, uma nova editora, com
autores de destaque no mercado, foco em ebooks (PDF,

epub, mobi), preosimbatveis e assuntos atuais.
Com a curadoria da Caelum e excelentes autores, uma
abordagemdiferente para livros de tecnologia no Brasil.
Conhea os ttulos e a nova proposta, voc vai gostar.

Casa do Cdigo, livros para o programador.
3.9 - BLOCK VS INLINE

Os elementos do HTML, quando renderizados no navegador, podem comportar-se
basicamente de duas maneiras diferentes no que diz respeito maneira como eles
interferem no documento como um todo: em bloco (block) ou em linha (inline).
Elementos em bloco so aqueles que ocupam toda a largura do documento, tanto
antes quanto depois deles. Um bom exemplo de elemento em bloco a tag <h1>, que
j utilizamos em nosso projeto. Note que no h nenhum outro elemento esquerda ou
direita do nosso nome da loja, apesar da expresso "Mirror Fashion" no ocupar toda a
largura do documento.
Entre os elementos em bloco, podemos destacar as tags de
heading <h1> a <h6>, os pargrafos <p> e divises <div>.
Elementos em linha so aqueles que ocupam somente o espao necessrio para que
seu prprio contedo seja exibido, permitindo que outros elementos em linha possam
ser renderizados logo na sequncia, seja antes ou depois, exibindo diversos elementos
nessa mesma linha.
Entre os elementos em linha, podemos destacar as tags de ncora <a>, as tags de
nfase<small>, <strong> e <em> e a tag de marcao de
atributos <span>.
Saber a distino entre esses modos de exibio importante, pois h diferenas na
estilizao dos elementos dependendo do seu tipo.
Pode ser interessante alterarmos esse padro de acordo com nossa necessidade, por
isso existe a propriedade display no CSS, que permite definir qual estratgia de
exibio o elemento utilizar.
Por exemplo, o elemento <li> de uma <ul> tem por padro o
valor block para a propriedade display. Se quisermos os elementos na
horizontal, basta alterarmos a propriedade display da <li> para inline:
ul li{
display: inline;
}
3.10 - EXERCCIOS: RESET E DISPLAY
1.
Utilizaremos o CSS reset do Eric Meyer. O arquivo reset.css j foi copiado para
a pastacss do nosso projeto quando importamos o projeto no captulo inicial.
Precisamos s referenci-lo no head antes do nosso estilos.css:
<link rel="stylesheet" href="css/reset.css">
Abra novamente a pgina no navegador. Percebe a diferena, principalmente na
padronizao dos espaamentos.
2.
Prximo passo: transformar nosso menu em horizontal e ajustar espaamentos
bsicos.
Vamos usar a propriedade display para mudar os <li> para inline.
Aproveite e j coloque um espaamento entre os links com margin.
Repare tambm como a sacola est desalinhada. O texto est muito pra cima e no
alinhado com a base do cone. Um padding-top deve resolver.
.menu-opcoes ul li {
display: inline;
margin-left: 20px;
}
.sacola {
padding-top: 8px;
}
Teste a pgina. Est melhorando?
3.
Nosso header ainda est todo esquerda da pgina, sendo que, no layout, ele
tem um tamanho fixo e fica centralizado na pgina. Alis, no s o cabealho que fica
assim: o contedo da pgina em si e o contedo do rodap tambm.
Temos trs tipos de elementos que precisam ser centralizados no meio da pgina.
Vamos copiar e colar as instrues CSS nos 3 lugares? No! Criamos uma classe no
HTML a ser aplicada em todos esses pontos e um nico seletor no CSS.
.container {
margin: 0 auto;
width: 940px;
}
Vamos usar essa classe container no HTML tambm. Altere a tag header e
passe oclass="container" para ela.
Teste a pgina e veja o contedo centralizado. Agora, falta "somente" o posicionamento
dos elementos do header.
3.11 - POSITION: STATIC, RELATIVE, ABSOLUTE

Existe um conjunto de propriedades que podemos utilizar para posicionar um
elemento na pgina, que so top, left, bottom e right. Porm essas
propriedades, por padro, no so obedecidas por nenhum elemento, pois elas
dependem de uma outra propriedade, aposition.
A propriedade position determina qual o modo de posicionamento de um
elemento, e ela pode receber como valor static, relative, absolute ou fixed. Veremos o
comportamento de cada um deles, junto com as propriedades de coordenadas.
O primeiro valor, padro para todos os elementos, o static. Um elemento com
posiostatic permanece sempre em seu local original no documento, aquele que o
navegador entende como sendo sua posio de renderizao. Se passarmos algum valor
para as propriedades de coordenadas, eles no sero respeitados.
Um dos valores para a propriedade position que aceitam coordenadas
o relative. Com ele, as coordenadas que passamos so obedecidas em relao posio
original do elemento. Por exemplo:
.logotipo {
position: relative;
top: 20px;
left: 50px;
}
Os elementos em nosso documento que receberem o valor "logotipo" em seu
atributoclass tero 20px adicionados ao seu topo e 50px adicionados sua esquerda
em relao sua posio original. Note que, ao definirmos coordenadas, estamos
adicionando pixels de distncia naquela direo, ento o elemento ser renderizado mais
abaixo e direita em comparao sua posio original.
O prximo modo de posicionamento que temos o absolute, e ele um pouco
complexo. Existem algumas regras que alteram seu comportamento em determinadas
circunstncias. Por definio, o elemento que tem o modo de posicionamento absolute
toma como referncia qualquer elemento que seja seu pai na estrutura do HTML cujo
modo de posicionamento seja diferente de static (que o padro), e obedece s
coordenadas de acordo com o tamanho total desse elemento pai.
Quando no h nenhum elemento em toda a hierarquia daquele que recebe o
posicionamento absolute que seja diferente de static, o elemento vai aplicar
as coordenadas tendo como referncia a poro visvel da pgina no navegador. Por
exemplo:
Estrutura HTML
<div class="quadrado"></div>
<div class="quadrado absoluto"></div>
Estilo CSS
.quadrado {
background: green;
height: 200px;
width: 200px;
}
.absoluto {
position: absolute;
top: 20px;
right: 30px;
}
Seguindo o exemplo acima, o segundo elemento <div>, que recebe o valor
"absoluto" em seu atributo class, no tem nenhum elemento como seu "pai" na
hierarquia do documento, portanto ele vai alinhar-se ao topo e direita do limite visvel
da pgina no navegador, adicionando respectivamente 20px e 30px nessas direes.
Vamos analisar agora o exemplo a seguir:
Estrutura HTML
<div class="quadrado relativo">
<div class="quadrado absoluto"></div>
</div>
Estilos CSS
.quadrado {
background: green;
height: 200px;
width: 200px;
}
.absoluto {
position: absolute;
top: 20px;
right: 30px;
}
.relativo {
position: relative;
}
Nesse caso, o elemento que recebe o posicionamento absolute "filho" do elemento
que recebe o posicionamento relative na estrutura do documento, portanto, o
elementoabsolute vai usar como ponto de referncia para suas coordenadas o
elemento relative e se posicionar 20px ao topo e 30px direita da posio
original desse elemento.
O outro modo de posicionamento, fixed, sempre vai tomar como referncia a poro
visvel do documento no navegador, e mantm essa posio inclusive quando h
rolagem na tela. uma propriedade til para avisos importantes que devem ser visveis
com certeza.
Um resumo de position
static
o
Sua posio dada automaticamente pelo fluxo da pgina: por padro ele
renderizado logo aps seus irmos
No aceita um posicionamento manual (left, right, top, bottom)
O tamanho do seu elemento pai leva em conta o tamanho do elemento static

relative
Por padro o elemento ser renderizado da mesma maneira que o static
Aceita posicionamento manual
O tamanho do seu elemento pai leva em conta o tamanho do elemento relative, porm
sem levar em conta seu posicionamento. O pai no sofreria alteraes mesmo se o
elemento fosse static.
fixed
o
Uma configurao de posicionamento vertical (left ou right) e uma horizontal (top ou

bottom) obrigatria
O elemento ser renderizado na pgina na posio indicada: mesmo que ocorra uma
rolagem o elemento permanecer no mesmo lugar
Seu tamanho no conta para calcular o tamanho do elemento pai, como se no fosse
elemento filho
absolute
o
Uma configurao de posicionamento vertical (left ou right) e uma horizontal (top ou

bottom) obrigatria
O elemento ser renderizado na posio indicada, porm relativa ao primeiro

elemento pai cujo position seja diferente de static ou, se no existir este pai, relativa
pgina
Seu tamanho no conta para calcular o tamanho do elemento pai

Conhea a Alura.
3.12 - EXERCCIOS: POSICIONAMENTO

Posicione o menu direita e embaixo no header. Use position:
absolute para isso. E no esquea: se queremos posicion-lo absolutamente com
relao ao cabealho, o cabealho precisa estar posicionado.
2. header {
3.
position: relative;
4. }
5.
6. .menu-opcoes {
7.
position: absolute;
8.
bottom: 0;
9.
right: 0;
10.
}
11.
A sacola tambm deve estar posicionada a direita e no topo.
Use position, top e rightpara conseguir esse comportamento. Adicione as
regras de posicionamento ao seletor.sacola que j tnhamos:
12.
.sacola {
13.
position: absolute;
14.
top: 0;
15.
right: 0;
16.
}
1.
17.
Teste a pgina no navegador. Como est nosso cabealho? De acordo com o
design original?
3.13 - EXERCCIOS OPCIONAIS

1.
Aplique nosso novo cabealho tambm na pgina sobre.html.

HTML e CSS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML e CSS

Uploaded by

Copyright:

Available Formats

CAPTULO 1

verses HTML5 e CSS3. Depois, abordada a linguagem de

1.2 - O PROJETO DE E-COMMERCE

Agora a melhor hora de aprender algo novo

Se voc gosta de estudar essa apostila aberta da Caelum,

certamente vai gostar dos novos cursos online que

momento com a qualidade Caelum.

1.3 - TIRANDO DVIDAS COM INSTRUTOR

1.4 - TIRANDO DVIDAS ONLINE NO GUJ

que front-end um dos principais focos. A comunidade do GUJ

HTML5 e CSS3: Domine a web do futuro - Lucas Mazza,

Voc pode tambm fazer o curso WD-43 dessa apostila na

Querendo aprender ainda mais sobre HTML, CSS e

JavaScript? Esclarecer dvidas dos exerccios? Ouvir

explicaes detalhadas com um instrutor?

A Caelum oferece o curso WD-43 presencial nas cidades

Consulte as vantagens do curso Desenvolvimento Web

1.6 - PARA ONDE IR DEPOIS?

Este curso parte da Formao Web Design da Caelum

Introduo a HTML e CSS

Introduo a HTML e CSS

2.1 - EXIBINDO INFORMAES NA WEB

Parece que obtemos um resultado um pouco diferente do esperado, no? Apesar de

Pode no exibir caracteres acentuados corretamente;

No exibe quebras de linha.

o tempo e a evoluo da Web e de seu potencial comercial, tornou-se necessria a

2.2 - SINTAXE DO HTML

Tire suas dvidas no novo GUJ Respostas

O GUJ um dos principais fruns brasileiros de

verso do GUJ baseada em uma ferramenta

de perguntas e respostas (QA) e tem uma comunidade

a esclarecer suas dvidas.

Faa sua pergunta.

2.3 - ESTRUTURA DE UM DOCUMENTO HTML

Podemos configurar qual codificao queremos utilizar em nosso documento por

Nova editora Casa do Cdigo com livros de uma forma

Editoras tradicionais pouco ligam para ebooks e novas

livros tecnicamente a fundo. No tm anos de experincia

Conhea a Casa do Cdigo, uma editora diferente, com

curadoria daCaelum e obsesso por livros de qualidade a

Casa do Cdigo, ebook com preo de ebook.

2.6 - A ESTRUTURA DOS ARQUIVOS DE UM PROJETO

2.7 - EDITORES E IDES

J conhece os cursos online Alura?

A Alura oferece dezenas de cursos online em sua

aprendizado com a qualidadereconhecida da Caelum.

Voc pode escolher um curso nas reas de Java, Ruby,

acesso a todos os cursos.

2.9 - EXERCCIO: PRIMEIROS PASSOS COM HTML

Copie a pasta mirror-fashion de dentro da pasta caelum/cursos/43 para a rea de

2.10 - ESTILIZANDO COM CSS

Como estamos declarando as propriedades visuais de um elemento em outro lugar do

<title>Sobre a Mirror Fashion</title>

Voc no est nessa pgina a toa

Voc chegou aqui porque a Caelum referncia nacional

Faa curso com quem escreveu essa apostila.

Consulte as vantagens do curso Desenvolvimento Web

com HTML, CSS e JavaScript.

2.12 - PROPRIEDADES TIPOGRFICAS E FONTES

Nesse caso, o navegador verificar se a fonte "Arial" est disponvel e a utilizar

2.13 - ALINHAMENTO E DECORAO DE TEXTO

Seus livros de tecnologia parecem do sculo passado?

Conhea a Casa do Cdigo, uma nova editora, com

epub, mobi), preosimbatveis e assuntos atuais.