Aprenda a construir com menos

tempo e esforco layouts para web

Sumrio
Apresentao 10

Captulo #1 - Ferramentas necessrias para o desenvolvimento 22

Captulo #2 - Afinal, o que HTML? 26

A evoluo do HTML:29
W3C29
Metas do W3C30
Padres Web (web standards)30
Tags HTML30
Sintaxe HTML32
Sintaxe das tags em elementos nulos (vazios ou void)36
Tags entre tags37
Conhecendo tags estruturais bsicas em um arquivo HTML38
Uma forma inusitada de memorizar estas tags42
Indentao43
rvore do documento (hierarquia)44

Tags mais usadas em todos os HTML(Utilizando o Princpio 80/20)47

<div>49
<p>52
<ol>, <ul> e <li> 55
<img>59
<span>71
<br>72
<h1> <h6>75
<a>84
Captulo #3 - HTML 5: a evoluo! 103
As diferenas entre o XHTML e o HTML5 107

Definio das principais novas tags do HTML5 112

Diferena entre Section e Article 114

Captulo #4 - O que CSS?116

Folha de  117

Estilos em Cascata 117

O que o efeito cascata do CSS? 119

Herana 119
Especificidade 120
Importncia 120

Como funciona o CSS? Parte 1 - Sintaxe 121

Como funciona o CSS? Parte 2 - Vinculando as folhas de estilos ao documento HTML 128

Inline 128
Incorporadas 129
Externas 130

Como funciona o CSS? Parte 3 - Tipos de seletores 136

Como funciona o CSS? Parte 4 - Propriedades mais usadas 143

Como funciona o CSS? Parte 4.1 - Background 148

Background-color e Background-image149
Resumo do tpico 164

Como funciona o CSS? Parte 4.2 - Formatando textos  167

Herana 167
Color  173
Line-height 173
Font-family 174
Font-size  176
Font-weight  178
Font-style 179
Font-variant 180
Font  182
Text-align 184
Text-decoration 186
Outras propriedades para estilizar textos 188

Como funciona o CSS? Parte 4.3 - Consideraes importantes 190

Como funciona o CSS? Parte 4.4 (Box Model) 204

Width 209
Height 211
Margin 211
Padding 215
Diferenas entre margin e padding 216
Border 218

Como funciona o CSS? Parte 4.5 - Outras propriedades importantes 229

Position, top, right, bottom e left 229

 Z-index 243
List-style 249
Float 257
Clear  268
Display  272
Max-width, min-width, max-height e min-height 295
Border-radius 305
Box-shadow 313
Text-shadow 317

Captulo #5 - Introduo aoDesign Responsivo322

Captulo #6 - Proposta para a construo de site335

Estutura do site 336

Wireframe  337

Captulo #7 - Codificao do site Galucho342

7.1 - Montar a estrutura HTML comum em todas as pginas do site dentro da pgina modelo 344

O corpo do site 344

O topo 345
 345
O menu de navegao 347
A rea que abriga o logo do site  347
A rea que abriga o slogan 348
O Box de contedo 349
O Rodap 349

7.2 - Estilizar, com folhas de estilo, a estrutura padro do site para resolues
menores que 480 pixels 352

A body e o corpo do site 353

O topo 357
O Box de contedo 371

7.3 - Estilizar a estrutura para resolues de no mnimo 480 pixels 378

O topo386

7.4 - Estilizar a estrutura para resolues de at no mnimo 767 pixels 390

O topo 390
O rodap 396

7.5 - Estilizar a estrutura para resolues de at no mnimo 991 pixels 398

7.6 - Salvar cpias do modelo para construo das Pginas Home e Portflio 400

7.7 - Completar o restante dos cdigos HTML da Home Page 404

7.8 - Finalizar a estilizao da Home Page para resolues menores que 480 pixels 408

Estilizando o slideshow 409

Estilizando o texto da misso do site 414
Estilizando a galeria de imagens 415

7.9 - Finalizar a estilizao da Home Page para resolues de at no mnimo 480 pixels 417

7.10 - Finalizar a estilizao da Home Page para resolues de at no mnimo 767 pixels 419

7.11 - Finalizar a estilizao da Home Page para resolues de at no mnimo 991 pixels 422
 7.12 - Completar o restante dos cdigos HTML da pgina de portflio 425

7.13 - Finalizar a estilizao da pgina de portflio para resolues menores que 480 pixels 431

7.14 - Finalizar a estilizao da pgina de portflio para resolues de at no mnimo 481 pixels 437

7.15 - Finalizar a estilizao da pgina de portflio para resolues de at no mnimo 767 pixels  438

7.16 - Finalizar a estilizao da pgina de portflio para resolues de at no mnimo 991 pixels 439

Captulo #8 - O mundo comea agora. Apenas comeamos 441

Referncias Bibliogrficas 445

Agradecimentos 449

Sobre o Autor 450

Apresentao

10
Por que ler este E-book?
Forneo-te o conhecimento necessrio para voc criar suas primeiras pginas de internet e in-
terpretar os cdigos mais comumente usados.

Voc ser capaz de ver o que voc planejou sendo renderizado nos navegadores e em diferentes
dispositivos do que jeito que sempre quis. E ainda ser capaz de executar a manuteno de sites
j existentes.

E a voc me indaga: Mas como ser isso? De que forma pretendes resolver meu problema?
Qual o diferencial deste E-book?

Calma! Logo, logo lhe contarei isso, po-

rm antes quero que reflita algo sobre o
comportamento humano em relao
aprendizagem e em relao motivao.

Aprendizagem
Desde que nascemos absorvermos infor-
maes do ambiente externo, muitas de-
las vindas dos nossos pais e pessoas que
nos cercam.

Desde bebezinhos aprendemos aos pou-

cos a nos comunicar, com alguns erros,
erros estes corrigidos com o tempo, at
que chegamos fase pr-escolar de for-
ma que j conseguimos nos fazer enten-
der.
Lgico que nesta fase estamos longe da pronncia perfei-
ta, porm j temos fluncia e at ento nos comunicamos
facilmente sem sermos ainda apresentados gramtica,
ou seja, para fazer-se entender voc precisa ter fluncia na
Lngua Portuguesa e no necessariamente ser um letrado.

Ento anota a:

Para aprender construir suas primeiras pginas

de internet voc precisar ter fluncia nas lin-
guagens HTML e CSS.

Mas a frente de explico como isso possvel.

Motivao
Sabemos que muitas pessoas tem facilidade em aprender
linguagens para construo de sites. Isto fato.

O problema que esta tal facilidade j se tornou um mito

na web que pode parecer absurdo question-la. Conse-
quentemente este mito j se impregnou na mente de mui-
tos atravs da comunidade web.

Isto uma crena que cada vez mais pertence ao imagi-

nrio coletivo de quem trabalha com isso. Basta digitar no
Google HTML fcil e temos 167 milhes de resultados.

Fica difcil apostar que no. Concorda?

S que na verdade muitas pessoas no tem essa tal facili-

dade. E como j disse acima, constatei isso ao lecionar aulas em cursos de Web design, no dia a
dia, no feedback do pblico do Chief atravs de pesquisas, e-mails e mensagens.

Entretanto, voc, com a certeza de que o mundo inteiro aprende facilmente, gasta sua energia
tentando uma, duas, trs e mais algumas vezes sem sucesso e cai na armadilha da desmotivao.
Da para no se passar de burro prefervel arrumar uma desculpa e desistir, reforando o mito
que aprender HTML fcil.

Primeiro que no existe essa de burro. Segundo que as pessoas no so iguais. Sendo assim
o que fcil para um, pode no ser para outros. E para encerrar, se voc j teve contato alguma
vez com HTML e CSS, bem provvel que voc teve a falsa percepo que tudo muito compli-
cado e o que voc sentiu de verdade, na sua percepo, que essas linguagens so um saco.

S a verdade no bem essa. Pelo contrrio meu amigo, Galucho! Aprender HTML e CSS muito
legal, desde que a forma que for passada para voc no seja to somente uma receita de bolo
mecnica e desmotivadora que ocupe sua memria, no te transmita significados e te canse a
ponto de que no dia seguinte voc no se lembre de nada.

Vou te mostrar que possvel enxergar e mesclar formas diferentes de entender questes.
Pense comigo:

As pessoas podem ser motivadas ao aprendizado por mtodos diferentes.

Algumas aprendem linguagens apenas repetindo o que um tutor fornece e isso
basta para que elas achem o contedo fcil. J outras precisam de simbologias
e significados que se relacionem com um conhecimento prvio para que o con-
tedo seja absorvido facilmente.

Consegues enxergar isso?

Tendo explicado as questes sobre aprendizagem e motivao, chegou a hora de te falar o que
este livro prope e como a proposta se apresentar.
Afinal, o que HTML?

26
HTML = HyperText Markup
Language

OU

Linguagem de
Marcao de Hipertexto
HTML uma linguagem de marcao que foi inventada na dcada de 1990 por um cientista cha-
mado Tim Berners-Lee.

A finalidade inicial era tornar possvel o acesso e a troca de informaes, de documentaes e de

pesquisas, entre cientistas de diferentes universidades.

O projeto inicial tornou-se um sucesso jamais imaginado por Tim Berners-Lee. Ao inventar o
HTML ele lanou as fundaes da Internet tal como a conhecemos atualmente.

O HTML se popularizou atravs do primeiro browser da histria: O Mosaic.

Mosaic - browser desenvolvido por Marc Andreessen na dcada de 1990. Desde ento vrios de-
senvolvedores e fabricantes de browsers surgiram utilizando o HTML como base.

O HTML uma linguagem universal na internet para distribuir informao e contedo. Ele ba-
seado no conceito de Hipertexto, ou seja, ligaes/conexes entre elementos como imagens,
documentos, vdeos, udios, palavras, etc.

O hipertexto uma forma no linear de distribuir e dispor os contedos no meio digital.

Aquilo que voc v quando abre uma pgina na Internet a interpretao que seu navegador faz
do HTML.

O HTML a linguagem que usamos para publicarmos contedo (texto, imagem, vdeo, udio e
etc) na Web.
Sintaxe HTML
J sabemos que todo elemento HTML formados por tags. As tags tem o seguinte formato:

Comeam com um sinal de menor <, terminam com um sinal de maior > e entre esses sinais
vai o nome da tag do elemento que queremos inserir em nosso documento.
Para constituir o elemento HTML precisamos de dois tipos de tags mais o contedo. Os dois tipos
de tags so:

A tag de abertura que marca o incio do elemento: <tag>.

E a tag de fechamento que marca o fim do elemento: </tag>.

A diferena entre elas que na tag de fechamento existe uma barra /.

Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento representa o
contedo. E este ser processado segundo o comando contido na tag.

Para exemplificar vamos usar o elemento HTML que marca pargrafos.

Comeamos com a tag de abertura:

HTML 5: a evoluo!

103
J sabemos que o HTML apresenta o
contedo e usa url para vincular ar-
quivos externos como imagens, vde-
os, pginas, etc.

Agora vamos um pouco mais adiante

e falaremos do HTML5.

Provavelmente voc deve ter lido

e/ou ouvido falar dele.

O HTML 5 vem sendo desenvolvido e

planejado h bastante tempo, prati-
camente desde 2004 quando come-
aram os primeiros testes.

O HTML5 a nova e atual verso do

HTML reconhecida pelo W3C. Ele pro-
porcionou inmeras possibilidades e
novas e melhores definies.

Somado ao CSS 3 mais JavaScript,

essa nova linguagem possibilitou a
criao de coisas que antes s pode-
ramos fazer com outras linguagens
ou mtodos.

Novas tags surgiram, novos atributos

e a possibilidade de pginas mais in-
terativas, leves, acessveis e semnti-
cas.
O que CSS?

116
CSS = Cascading Style
Sheets

OU

Folha de
Estilos em Cascata
CSS uma linguagem de estilos que define o layout de documentos escritos com linguagem de
marcao, no caso o nosso HTML.

Ele adiciona um estilo a uma pgina e altera a forma visual de como ela apresentada.

O CSS foi uma revoluo no design para web. Ele executa:

controle do layout de vrios documentos a partir de uma simples folha de estilos;

controle preciso do layout;
aplicao de diferentes layouts para diferentes mdias (tela, impressora, celular, etc.);
avanadas tcnicas de desenvolvimento;
separa a estrutura do design - agilidade e performance.

O CSS o responsvel pelo visual de um site. Atravs dele aplicamos as cores, determinamos os
tamanhos, os pesos (no caso de fontes), bordas, imagens, etc. Com isso, separa-se a linguagem
de marcao (HTML) da camada de apresentao (esttica, design) do site.

E essa alterao aparecer em todo o site. E isso independentemente se o meu site tem 1 ou 100
documentos HTML.

Em verses anteriores do HTML existiam elementos que eram especficos para apresentao,
como por exemplo, <b>, <i>, <font>, <center>, <big>, etc. Eles eram utilizados para adicionar
certas caractersticas visuais ao documento.

Mas imagine que voc tem uma tarefa de criar uma pgina com 50 subttulos. E lhe foi deter-
minado aplicar a cor azul a todos eles. Logo, para deix-los com a cor azul voc usa <font co-
lor=blue>, aplicando manualmente, em todos os subttulos da pgina.

Porm na manh seguinte seu chefe pede para que voc mude todos os subttulos para a cor
vermelha. Sem opo, (claro que voc poderia pedir demisso, hehehe) voc teria refazer tudo
novamente, perdendo bastante tempo nessa refao indo em cada tag para mudar a cor.
Como funciona o CSS? Parte 1 - Sintaxe
O CSS tem a sua prpria sintaxe e estrutura. Uma regra CSS composta por um seletor, uma pro-
priedade e um valor. Vamos conhec-la?
Logo, para criar uma declarao CSS, seguimos os seguintes passos: Apontamos o seletor;

seletor { propriedade: valor; }

Abrimos e fechamos chaves {};
Dentro de chaves determinamos a propriedade e o valor;
E caso precise aplicar mais de uma declarao ( propriedade + valor) utilizamos ponto e vrgula
(;) ao final da declarao (aps o valor), para separ-las.

Seletor : o elemento HTML identificado por seu nome, classe, ID, etc;
e para o qual a regra ser aplicada (por exemplo: p, h1, form, .minhaclasse, :hover, etc.).
O seletor funciona como se fosse um alvo. Eu aponto para o CSS qual tag ele aplicar o estilo
que determinei, na regra CSS.

Propriedade : a caracterstica que ser estilizada, de um elemento HTML , no CSS.

Existem inmeras propriedades CSS, por exemplo: font, color, background, etc.

Valor : a aparncia que ser assumida pela propriedade CSS . Ento, a propriedade
define o que iremos estilizar enquanto que o valor define como ou quanto ser estilizado.

Por exemplo: Eu quero determinar que o tamanho de um subttulo, do meu documento HTML,
ser 14px. A propriedade para mudar o tamanho da fonte font-size e o valor da propriedade
seria 14px. Com isso teramos o seguinte resultado:
Diferenas entre margin e padding
Quando estamos aprendendo a desenvolver normal confundirmos estas duas propriedades.
Porm com o tempo voc ver que so muito diferentes. Para diferenciar tente se lembrar que
para afastar boxes vizinhos voc aplica margin. E para afastar o contedo seja texto, imagem, ou
outro, da extremidade do Box, use padding.

A propriedade margin faz um Box se distanciar de blocos vizinhos e tambm da extremidade

do navegador.
Enquanto que a propriedade padding faz o contedo dentro do bloco se distanciar da sua ex-
tremidade.

Nota: Quando utilizamos o valor zero para as propriedades margin e padding

no seletor universal (*) estamos limpando os valores em elementos que j vem
padronizados pelos navegadores.

E fazemos isso, pois resetando podemos estabelecer os valores da forma que a

gente bem entender sem entrar em conflito com valores criados pelos navega-
dores, sacou?

218
Introduo ao
Design Responsivo

323
Um site projetado com media queries estabelece diferentes estilizaes para diferentes tama-
nhos de tela. Quando este site acessado por um dispositivo as medias queries fazem algumas
consultas ao navegador:

E ae navegador? Qual sua largura? Altura? Resoluo? Que time que voc torce?
( No! Esta ultima no! Hahaha)

Aps esta checagem com o navegador ele compara as informaes que tem declaradas em seus
parmetros e retorna os estilos que se adaptam melhor as informaes passadas pelo navegador.

Vamos explicar melhor isso com os cdigos. Para usar as media queries voc precisa saber as
resolues de tela (altura e largura em pixels) dos dispositivos mais comuns. Usamos estas largu-
ras para estabelecer breakpoints que so pontos de quebras que determinam quando devemos
alterar as regras CSS.

Hoje em dia esta cada vez mais difcil saber o quanto de resolues diferentes existem, porque
toda hora se lana um novo aparelho e cada vez mais parrudo. Mas para fins de estudos vamos
nos ater a estas larguras a seguir como breakpoints:

320 pixels
480 pixels
600 pixels
768 pixels
1024 pixels
1200 pixels

Teoricamente os dois valores abaixo atendem bem a alguns smartphones:

320 pixels
480 pixels

325
Proposta para a
construo de site

335
Chegamos em um estgio onde fundamental repassar o contedo fornecido em um contexto
mais prximo da realidade que voc ir encontrar.

Por isso propomos a construo de um site onde usaremos seus conhecimentos prvios e recm
adquiridos sobre HTML, juntamente com os tpicos sobre CSS que foram apresentados e incor-
porados ao seu conhecimento, conforme o site for produzido.

Voc perceber que o esquema 80/20 faz sentido. Porm, eventualmente entrar um ou outro
elemento novo que foge ao esquema, mas que aumentar seu leque de conhecimento.

O site ser um portflio fictcio do Designer Galucho. E contar com elementos suficientes para
divulgao dos seus trabalhos como uma pgina inicial, uma rea de apresentao dos trabalhos
e outra para dados de contato e integrao com as redes sociais.

Esse seria o briefing bsico para o nosso projeto j que no aprofundaremos em questes como
objetivo de comunicao e de marketing, pblico alvo, esttica, entre outras.

Reforamos que este um livro sobre HTML/CSS. Porm para termos um site funcional e visual-
mente agradvel atentaremos a alguns aspectos que garantem a usabilidade, navegabilidade e
uma boa disposio dos elementos da interface.

Voc sempre pensar em todos os aspectos do Design, entretanto para esses exerccios adotare-
mos um template que foi reformulado para este fim didtico e de acordo com os aspectos citados
acima.

Alguns profissionais projetam suas interfaces direto no cdigo. Sugerimos que voc defina a es-
trutura de pginas e navegao, crie um esboo, depois transporte as ideias para seu editor visual
favorito (Photoshop e Fireworks so indicados) para depois transportar o layout para codificao.

Veremos a hierarquia do site atravs de um diagrama e depois o Wireframe do nosso site.

336
Estrutura do site

Antes de comear a um criar site, importante pensar

como ser a estrutura dele (qual o caminho de tal pgina,
qual ao do usurio o levar para tal pgina, onde ficar
cada diretrio, definir a hierarquia do contedo, etc).

Para ajudar nessa tarefa, podemos usar um diagrama sim-

ples. Voc pode criar um diagrama para definir a hierar-
quia e organizao do seu do seu site.

Voc pode fazer com lpis e papel, em um quadro bran-

co usando postit ou em softwares e servios online.

O importante voc planejar a sequncia lgica do seu

site, estruturando-o da melhor maneira possvel.

Reservar um tempo, antes de sair fazendo as coisas no Photoshop, para planejar e estruturar o
seu site, mesmo que ele seja simples, pode te facilitar a vida tanto na criao quanto no desen-
volvimento das pginas.

Voc pode achar essa parte chata e trivial, mas com certeza se algo der errado durante a execu-
o do projeto, voc lembrar dela. No que ela seja um escudo anti-bugs, no isso, mas um
bom planejamento pode facilitar a sua vida te ajudando a encontrar possveis erros antes mes-
mo deles se apresentarem.

Ento antes de sair fazendo, pare e pense no seu projeto como um todo!
Codificao do
site Galucho

342
Agora comearemos a montar efetivamente o site do Galucho com os cdigos HTML e CSS. A
primeira etapa construir uma pgina modelo que possuir somente os elementos comuns en-
tre todas as pginas. Por exemplo: o topo, com a integrao das redes sociais, o menu e o slogan,
e tambm o rodap, com as informaes de contato.

Essa pgina modelo no ser usada no site, entretanto ela serve de modelo para construir as ou-
tras pginas do site. O intuito duplic-la para no perdermos tempo construindo os mesmos
elementos em cada pgina. Sacou? Com isso bastar a voc incluir em cada pgina os elementos
que no so comuns entre as pginas. Voc ganhar muito tempo com isso.

Separaremos o desenvolvimento nas seguintes etapas:

1. Montar a estrutura HTML comum em todas as pginas do site dentro da pgina modelo;
2. Estilizar, com folhas de estilo, esta estrutura para resolues menores que 480 pixels;
3. Estilizar a estrutura para resolues de at no mnimo 480 pixels;
4. Estilizar a estrutura para resolues de at no mnimo 767 pixels;
5. Estilizar a estrutura para resolues de at no mnimo 991 pixels
6. Salvar cpias do modelo para construo da Home Page e da pgina de portflio;
7. Completar o restante dos cdigos HTML da Home Page;
8. Finalizar a estilizao da Home Page para resolues menores que 480 pixels;
9. Finalizar a estilizao da Home Page para resolues de at no mnimo 480 pixels;
10. Finalizar a estilizao da Home Page para resolues de at no mnimo 767 pixels;
11. Finalizar a estilizao da Home Page para resolues de at no mnimo 991 pixels;
12. Completar o restante dos cdigos HTML da pgina de portflio;
13. Finalizar a estilizao da pgina de portflio para resolues menores que 480 pixels;
14. Finalizar a estilizao da pgina de portflio para resolues de at no mnimo 480 pixels;
15. Finalizar a estilizao da pgina de portflio para resolues de at no mnimo 767 pixels;
16. Finalizar a estilizao da pgina de portflio para resolues de at no mnimo 991 pixels;

Ento , vamos comear! Vamos nessa? :)

452