Apostila HTML, XHTML e Css

aPOstiLA DE
hTML ,xhtm
e
cSs
1
ndice
HTML
1.Introduo ao HTML
2.O que o HTML
3.O que so tags HTML
4.Iniciando com HTML
5.Mais tags HTML
6.Atributos
7.Links
8.Imagens
9.Tabelas
10.Mais tabelas
12.Uploading do seu site
pgina 04
pgina 05
pgina 05
pgina 10
pgina 12
pgina 14
pgina 18
pgina 22
pgina 26
pgina 28
pgina 29
CSS
1.Introduo as CSS
2.Como funciona as CSS
3. Cores e fundos
4. FONTES
5. Textos
6. Links
7. Identificando e agrupando elementos (classes e id)
8. Agrupando elementos (span e div)
9.Box Model
10. Margin e padding
11. Bordas
12. Altura e largura
13. Flutuando elementos (floats)
14. Posicionando elementos
15. Usando z-index (Layers)
pgina 33
pgina 37
pgina 41
pgina 48
pgina 53
pgina 56
pgina 60
pgina 67
pgina 72
pgina 72
pgina 75
pgina 76
pgina 79
pgina 83
pgina 84
XHTML
Introduo ao XHTML
pgina 86
Escrevendo um XHTML vlido
pgina 87
Introduo
Nesta primeira parte do tutorial vamos falar sobre a linguagem HTML. Podemos dizer
que o HTML a linguagem me. importante aprendermos o HTML, para poder
trabalhar com outras linguagens.
O HTML, responsvel pela parte pesada do site.
Hoje, existe o XHTML, que veio para substituir o HTML.Voc deve se perguntar, por
que ento eu vou aprender HTML em vez de aprender logo XHTML? importante que
voc aprenda o bsico primeiro, a linguagem XHTML no to diferente do HTML,
mas melhor que voc conhea o HTML primeiro que tudo vai ficar mais fcil depois
para aprender o XHTML. E difcil achar algum tutorial ou apostila ensinando o
XHTML, j que praticamente o HTML modificado, com maneiras de fechar as tags
diferente etc. Ento, aprenda primeiro pelo HTML e depois faa a comparao e veja
as diferenas. Ser muito mais fcil entender o XHTML depois de ter visto o HTML.
Introduo ao HTML
O HTML, a linguagem me usada para construir os sites. Apesar de

ser coisa do passado, um site ser feito apenas com HTML, sem o HTML no
possvel montar uma pgina de internet. O HTML foi ficando obsoleto, por ser uma
linguagem limitada no podendo trabalhar com grficos e animaes por exemplo,
apenas texto e imagens estticas ou GIFs animados sem muita complexidade. Hoje
usado o HTML, junto com alguma outra linguagem, ou com outras linguagens. Sim,
porque vamos supor que voc queira colocar animaes em seu site ou at mesmo
fazer pequenas alteraes no ponteiro do mouse, mensagem na barra de ttulo,
mensagens de aviso. Isso no seria possvel somente com o HTML. So utilizadas
linguagens como o Java Script ou DHTML(Dynamic HTML) juntamente com o HTML.
Hoje so desenvolvidas pginas com banners em Flash, Fireworks, Photoshop, pginas
feita toda em Flash(o
que no recomendvel para que no tem banda larga), pginas feitas no Fireworks, mas
introduzido e alinhado em uma site usando HTML e CSS.
1. O que so tags HTML?

AS TAGS HTML A ESTRUTURA ONDE SER MONTADA NOSSAS PGINAS HTML. AS TAGS
SO RESPONSVEIS PELO NAVEGADOR INTERPRETAR O QUE ESTO ENTRE ELAS. SEM
ELAS NO SERIA POSSVEL INTERPRETAR O SEU SITE.
2. Vamos ver as tags principais para a construo de uma pgina HTML.

1. ESTRUTURA BSICA.
<html> a tag de abertura do html.
<head> cabealho da pgina. onde ficam informaes adicionais.
</head> tag de fechamento do cabealho.
<title>
a tag de abertura do ttulo da janela.
</title> tag de fechamento do ttulo da janela.

<body> corpo da pgina. aqui fcar a parte principal do seu site.
</body> tag de fechamento do corpo da pgina.
</html> tag de fechamento do html.
3. INICIANDO COM O HTML
TTULO NA JANELA DO SITE.

A tag utilizada para o ttulo da janela o <title>.
<html>
<head>
<title>Meu website</title>
</head>
<body>
</body>
</html>
<title> Aqui ficar o ttulo da janela </title>
2. TTULO DO SITE
A tag utilizada para o ttulo a <h1> ao <h6>.

<html>
<head>
</head>
<body>
<h1>Um cabealho</h1>
</body>
</html>
<h1>Aqui ficar o ttulo </h1>

*O tamanho do ttulo pode ser definido por suas
tags de h1 a h6, sendo que quanto maior o valor
da tag menor ser o tamanho do texto.

6
3.SUBTTULO DO SITE
A tag utilizada para o subttulo a <h1> ao <h6>.
<html>
<head>
</head>
<body>
<h2>Subttulo</h2>
</body>
</html>
<h1>Aqui ficar o subttulo </h1>

*O tamanho do subttulo, pode ser definido
assim como no ttulo.
4.TEXTO PARGRAFO NO SITE

A tag para o texto pargrafo o <p>.
<html>
<head>
</head>
<body>
<p>texto, texto texto, texto</p>
<h2>Subttulo</h2>
<p>texto, texto texto, texto</p>
</body>
</html>
<p>Aqui ficar o texto pargrafo</p>

No exemplo foi colocado um texto embaixo do ttulo e em baixo do subttulo.
5.Texto em negrito
Para colocarmos um texto em negrito devemos adicionar entre a tags <b> e </b>.
<b> Este texto deve ser negrito.</b>
Ser renderizado no navegador assim:

Este texto deve ser negrito.
6.Texto em Itlico
Para colocarmos um texto em negrito devemos adicionar entre a tags <i> e </i>.
<i> Este texto deve ser itlico.</i>

Este texto deve ser itlico
7.Texto com letras menores

Para fazermos textos usando letras menores podemos usar a tag <small></small>.
<small> Este texto deve ser com letras em tamanho small</small>

Este texto deve ser com letras em tamanho small.
8. Posso usar vrias tags simultaneamente?

Sim voc pode usar quantas tags queira, desde de que as aninhe
convenientemente. Veja como fazer isto no exemplo abaixo:
Para escrever um texto em negrito e itlico faa como mostrado a seguir:
<b><i>Texto em negrito e itlico.</i></b>
E no assim:
<b><i>Texto em negrito e itlico.</b></i>
Observe que no primeiro exemplo a primeira tag de abertura <b> corresponde a
ltima tag de fechamento </b>, e o aninhamento est certo. Isto evita confuso para
quem escreve o cdigo e para o navegador que l o cdigo. As ltimas tags
a serem abertas tem que ser as primeiras a serem fechadas, e as primeiras a
serem abertas tero de ser as ltimas a serem fechadas.
4.
MAIS TAGS!
9. Existem tags que so abertas e fechadas em nica tag. Estas tags so

comandos isolados, ou seja, no contm nenhum texto dentro delas para poder
funcionar. Um exemplo a tag <br /> que serve para criar uma quebra de linha:
Um texto<br /> e mais texto em nova linha

Um texto
e mais texto em nova linha
Notar que a tag escrita como se fosse uma mistura de tag de abertura e de
fechamento com uma barra "/" no final: <br />. A princpio podemos escrever
tambm <br></br> (sem contedo), mas para que complicar?
Outra tag de comando <hr /> que serve para definir uma linha horizontal ("hr" vem
"horizontal rule" - rgua horizontal ):
<hr />
10. Lista
<ul>
<li>Um item de lista</li>
<li>Outro item de lista</li>
</ul>

Um item de lista
Outro
item de lista
11. Lista ordenada:

<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
</ol>
1. Primeiro item da lista
2. Segundo item da lista
Tente voc mesmo!
<i>Itlico</i>
<small>Texto tamanho small</small>
<br /> Pula linha
<hr /> Linha Horizontal
<blockquote>Indentao</blockquote>
<ul>Lista<ul>
<ol>Lista ordenada<ol>
<li>Item de lista</li>
5.
ATRIBUTOS
O que atributo?
Como voc deve estar lembrado, uma tag um comando para o navegador (por
exemplo, <br /> um comando para mudar de linha). Em algumas tags voc pode
ser mais especfico, acresentando na tag, informaes adicionais de comando. Isto feito
atravs dos atributos.
<h3 style="background-color:#f0000;"> HTML (Hyper Text Markup Language)</h2>
Atributos so escritos dentro da tag, seguidos por um sinal de igual e depois entre
aspas so declaradas as informaes do atributo. As informaes quando mais de
uma, devem ser separadas por ponto e vrgula, tudo conforme mostrado no exemplo
acima. Adiante voltaremos a este assunto.
Como isto?
Existem vrios atributos. O primeiro que voc aprender o atributo style. Com o
atributo style voc pode adicionar estilizao e layout ao seu website. Por
exemplo, uma cor de fundo:
<html>
<head>
</head>
<body style="background-color:#f0000;">
</body>
</html>
O cdigo acima renderiza uma pgina com cor de fundo vermelha. Experimente voc
mesmo, construa uma pgina vermelha. A seguir explicaremos como funcionam as
cores.
Notar que algumas tags e atributos usam nomes do idioma ingls dos E.U.A. muito
importante que voc use os nomes exatamente como mostrados neste tutorial - se
voc mudar uma letra que seja, o navegador no ir entender seu cdigo.
importante tambm que voc no se esquea de fechar as aspas nas informaes do
atributo.
Como a pgina ficou vermelha?

No exemplo acima ns usamos o cdigo "#ff0000" para fazer a pgina na cor
vermelha. Eate o cdigo para a cor vermelha no sistema chamado de
nmeros hexadecimal (HEX). Cada cor representada por um nmero
hexadecimal. Voc pode pesquisar na internet a tabela de cores, nela voc
encontrar todos os cdigos hexadecimais para cada cor.
Um cdigo hexadecimal para cores formado por um sinal # seguido de seis dgitos
e/ou letras. Existe mais de 1000 cdigos HEX e no fcil decorar o cdigo para
todas as cores.
Para algumas cores, voc pode usar o nome das cores em ingls por exemplo (white,
black, red, blue, green e yellow - branco, preto, vermelho, azul, verde, amarelo).
Voltando aos atributos:

<body style="background-color: red;">
Quais tags podem usar atributos?
Atributos podem ser aplicados maioria das tags.
Voc normalmente usar atributos com mais freqncia em algumas tags, tais como
a tag body e raramente usar em outras, como por exemplo, a tag br que um
comando para pular de linha e no precisa de nenhuma informao adicional.
Assim como existem muitas tags, tambm existem muitos atributos. Alguns atributos
so empregados em tags especficas enquanto outros servem para vrias tags. E
vice-versa: algumas tags podem conter somente um tipo de atributo, enquanto
outras podem conter vrios tipos.
Isto pode parecer um pouco confuso, mas medida que voc for praticando vai
constatar que tudo fcil e lgico, bem como vai verificar as inmeras possibilidades
que os atributos oferecem.
Ento, quais so as partes que constituem uma tag?
A constituio bsica de uma tag denominada elemento (por exemplo em
<p>). Assim, uma tag constituida de um elemento (por exemplo <p>), ou por um
elemento e um ou mais atributos (por exemplo <p style="background-
color:#f0000;">).
6.
Links
Como construir links entre as pginas.

O que eu preciso para construir um link?
Para construir um link voc usa o que tem usado at agora para codificar HTML: uma
tag. Uma pequena tag com um elemento e um atributo suficiente para
voc construir links para onde quiser. A seguir um exemplo de link para o site
HTML.net:
<a href="http://www.html.com.br/">Aqui entra o nome do link</a>
Ser renderizado assim no navegador:
Aqui entra o nome do link
O elemento a refere-se a "anchor" - ncora . O atribuito href abreviao para

"hypertext reference" - referncia a hypertexto - e especifica o destino do link - que
normalmente um endereo na Internet ou um arquivo.
No exemplo acima o atributo href tem o valor "http://www.html.net", que o
endereo completo do site HTML.net e chamado de URL (Uniform Resource
Locator). Notar que "http://" deve sempre ser incluido nas URLs. A frase "Aqui entra
o nome do link" o texto mostrado no navegador como link. Lembre-se de fechar a tag
com um </a>.
Como so os links entre minhas prprias pginas?

Se voc quer construir links entre pginas de um mesmo website voc no
precisa escrever o endereo completo de cada pgina (URL). Por exemplo, se voc tem
duas pginas (vamos cham-las de pagina1.htm e pagina2.htm) e salvou as duas
em um mesmo diretrio voc constri um link de uma para a outra usando somente o
nome do arquivo no link. Nestas condies, um link da pgina1.htm para a pagina2.htm
como mostrado abaixo:
<a href="pagina2.htm">Aqui um link para a pagina 2</a>
Se a pagina2 for colocada em um subdiretrio (chamado de "subdiretorio"), o link

como mostrado abaixo:
<a href="subdiretorio/pagina2.htm">Aqui um link para a pagina 2</a>
Por outro lado, um link da pagina2 no "subdiretorio" para a pagina1 como mostrado a
seguir:
<a href="../pagina1.htm">Aqui um link para a pagina 1</a>
"../" aponta para o diretrio a um nvel acima do arquivo onde foi feito o link. Seguindo
o mesmo princpio voc pode apontar para dois (ou mais) nveis acima, escrevendo
"../../".
Como uma outra opo voc pode usar sempre o endereo completo do arquivo (URL).
Como so os links dentro de uma mesma pgina?

Voc pode criar links internos, dentro da prpria pgina. Por exemplo, uma tabela de
contedos ou ndice com links para cada um dos captulos em uma pgina. Tudo o que voc
precisa usar o atributo id e o smbolo "#".
Use o atributo id para marcar o elemento que o destino do link. Por exemplo:
<h1 id="heading1">Cabealho 1</h1>
Voc agora pode criar um link que leve quele elemento usando o smbolo "#" no
atributo do link. O smbolo "#" informa ao navegador para ficar na mesma pgina que
est. O smbolo "#" deve ser seguido pelo valor atribuido a id para onde o link vai. Por
exemplo:
<a href="#heading1">Link para o cabealho 1</a>
Para ficar mais claro, vamos a um exemplo:

<html>
<head>
</head>
<body>
<p><a href="#heading1">Link para cabealho 1</a></p>
<p><a href="#heading2">Link para cabealho 2</a></p>
<p>Texto texto texto texto</p>
<p>Texto texto texto texto</p>
</body>
Ser renderizado no navegador assim (clique nos dois links):

Link para cabealho 1
Link para cabealho 2
Cabealho 1
Texto texto texto texto
Cabealho 2
Texto texto texto texto
Obs.: O nome de um atributo id deve comear com uma letra
Links para um endereo de email

<a href="mailto:nobody@html.net">Enviar e-mail para nobody em
HTML.net</a>

Enviar e-mail para nobody em HTML.net
A nica diferena que no lugar do endereo do documento voc

escreve mailto:
seguido pelo endereo de e-mail. Quando o link clicado o programa de e-mail
padro
do usurio aberto com o endereo do link j digitado na linha para
destinatrio. Mas, ateno, isto s ir funcionar se o usurio tiver um
programa de e-mail instalado na sua mquina. Como por exemplo o Outlook.
Existem outros atributos que eu deva conhecer?

Par criar links voc sempre usa o atributo href. Adicionalmente voc pode usar
um title
(ttulo) para seu link:
<a href="http://www.html.net/" title="Visite HTML.net e aprenda
HTML">HTML.net</a>

HTML.net
O atributo title usado para fornecer uma breve descrio do link. Se voc sem
clicar no link - colocar o cursor do mouse sobre o link, vai aparecer o
texto
"Visite o site HTML.net e aprenda HTML".
7.Imagens
O que voc acha de colocar uma imagem no centro da sua pgina?
Tudo o que voc precisa da nossa conhecida tag.
<img src="bandeiradobrasil.jpg" alt="Bandeira do Brasil" />
O que voc tem a fazer dizer ao navegador que quer inserir uma imagem (img) e
depois informar onde a imagem esta localizada (src, abreviatura para "source" - local
de armazenagem ).
Notar que a tag imagem do tipo comando isolado, isto , uma s tag de abertura e
fechamento. Semelhante a tag <br /> e <hr />que no precisa de um texto inserido
nela.
"bandeiradobrasil.jpg" o nome do arquivo da imagem que voc quer inserir na
pgina. ".jpg" a extenso do tipo de imagem. Tal como a extenso .html ou".htm"
para arquivos de documentos HTML, ".jpg" informa ao navegador que o arquivo uma
imagem. Veja abaixo os trs os tipos de imagens que voc pode inserir na sua pgina:
GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
Em geral imagens GIF so melhores para grficos e desenhos e imagens
JPEG so melhores para fotografia. Existem duas razes para isto: primeiro,
imagens GIF so constituidas por 256 cores, e imagens JPEG por milhes de
cores, segundo, imagens GIF so melhores otimizadas para imagens simples ao
passo que imagens JPEG so melhores otimizadas para imagens complexas. Quanto
maior a compresso tanto menor o tamanho do arquivo e tanto mais rpido a
pgina carregada no navegador.
Tradicionalmente os formatos GIF e JPEG tem sido os mais empregados, mas

ultimamente o formato PNG tem se tornado cada vez mais popular. O formato PNG
em vrios aspectos melhor que os formatos JPEG e GIF: milhes de cores e
efetiva compresso.
Onde consigo minhas imagens?
Para criar suas prprias imagens voc precisa de um programa de edio de imagens.
O Adobe Photoshop e o Adobe Fireworks so excelentes para fazer um papel de parede para
a sua pgina por exemplo. (No final da apostila vou ensinar como faz multiplicar
um plano de fundo, de forma que ele cubra com as mesmas imagens todo o fundo do
seu website). Um programa de edio de imagens a ferramenta essencial
para criao de websites com grande impacto e apelo visual.
Vamos aprender mais algumas coisas sobre imagens.

Primeiro, voc pode inserir imagens que esto localizadas em outros diretrios ou at
mesmo em outros websites:
<img src="images/caixa.png">
<img src="http://www.html.com.br/caixa.png">
Segundo, imagens podem ser links:

<a href="http://www.html.com.br">
<img src="caixa.png"></a>
Existem outros atributos que eu deva conhecer?

Voc sempre ter que usar o atributo src, que diz ao navegador onde a imagem est
localizada. Alm dele existem alguns outros atributos que podem ser bastante
teis quando voc insere imagens em uma pgina.
O atributo alt usado para fornecer uma descrio textual alternativa da
imagem caso por alguma razo a imagem no seja renderizada para o usurio.
Isto particularmente importante para usurios com restries visuais ou quando a
imagem carregada muito lentamente. Em conseqncia, sempre use o atributo alt:
<img src="logo.gif" alt="logotipo do BR Masters">
Alguns navegadores mostram uma caixa pop-up com o contedo do atributo alt quando
o usurio passa o mouse sobre a imagem. Tenha em mente que a finalidade principal
do atributo alt a de fornecer uma alternativa textual para imagem. O atributo alt no
deve ser usado para criar mensagens pop-up uma vez que os leitores de tela passaro
uma mensagem que no descreve a imagem para os usurios com restries visuais.
O atributo title pode ser usado para fornecer uma curta descrio da imagem:
<img src="bandeira.gif" title="Aprenda HTML no site HTML.com.br">
Coloque o ponteiro do mouse sobre a imagem, sem clicar e aparecer uma caixa popup com o texto "Aprenda HTML no site HTML.net".
Dois outros atributos importantes so width e height:

<img src="logo.png" width="141" height="32">
Os atributos width e height podem ser usados para definir respectivamente, a

largura e
a altura da imagem. O valor adotado para medidas o pixel. Pixel a
unidade de medida usada para medir a resoluo da tela. (As resolues de
tela mais comuns so
de 800x600 e 1024x768 pixels, apesar das resolues 800x600 estarem
ficando para
trs e sendo cada vez mais usada as de 1024x768 e 1280x1024 ou
superior). Ao contrrio de centmetros, pixel uma unidade de medida
relativa que depende da resoluo da tela. Usurios com grande
resoluo de tela tero 25 pixels em 1 centmetro de tela enquanto
aqueles com baixa resoluo de tela tero os mesmos 25 pixels em 1,5 cm
de tela.
Se no forem definidos os valores para width e height, a imagem ser inserida
com seu tamanho real. Com width e height voc pode alterar o tamanho da
imagem:
<img src="logo.gif" width="32" height="32">
O tempo de descarga da imagem ser sempre aquele requerido como se ela

tivesse
suas dimenses reais, mesmo que voc diminua seu tamanho com uso
destes atributos. Assim, voc no deve diminuir o tamanho das
imagens com o uso dos atributos
width e height. Se
voc precisa
diminuir a
imagem diminua
suas
dimenses reais em um editor de imagem para tornar suas pginas mais
leves e mais rpidas.
Dito isto, acrescentamos que sempre uma boa idia definir os atributos
width e height para imagens, pois assim fazendo o navegador reservar o
espao para descarga da imagem previamente. Isto acaba por permitir ao
navegador, saber com antecedncia (antes de descarregar as imagens)
como ser o layout da pgina.
8.
Tabelas
Tabelas so usadas para apresentar "dados tabulares", isto ,

informao que deva ser apresentada em linhas e colunas, de forma lgica e
organizada.
difcil?
Criar tabelas em HTML pode parecer complicado, mas quando voc
acompanhar passo
a passo a explicao, ver que bem fcil.
<table>
<tr>
<td>Clula
<td>Clula
</tr>
<tr>
<td>Clula
<td>Clula
</tr>
</table>
1</td>
2</td>
3</td>
4</td>

Clula 1 Clula 2
Clula 3 Clula 4
Qual a diferena entre as tags <tr> e <td>?

Este com certeza o cdigo mais complicado at agora. Vamos analisar isto
por partes
e explicar as diferentes tags:
3 tags bsicas so usadas para inserir tabelas:
<table> comea e termina uma tabela.
<tr> significa "table row" - linha de tabela - comea e termina e
uma linha horizontal da tabela.
<td> significa "table data" - dados da tabela. comea e termina
cada clula contida nas linhas da tabela.
Eis o acontece no exemplo dado acima: a tabela comea com <table>,

segue-se uma
<tr>, que indica o incio de uma nova linha. Duas clulas so ento inseridas
na linha:
<td>Clula 1</td> e <td>Clula 2</td>. A linha termina com </tr> e
uma nova linha <tr> comea imediatamente a seguir. A nova linha tambm
contm duas clulas.
A tabela termina com </table>.
Para esclarecer: linhas so horizontais e colunas so verticais,
ambas contendo clulas:
Clula 1 e Clula 2 formam uma linha. Clula 1 e Clula 3 formam uma

coluna.
No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabela
pode conter um nmero ilimitado de linhas e colunas.
Outro exemplo:
<table>
<tr>
<td>Clula
<td>Clula
<td>Clula
<td>Clula
</tr>
<tr>
<td>Clula
<td>Clula
<td>Clula
<td>Clula
</tr>
<tr>
<td>Clula
<td>Clula
<td>Clula
<td>Clula
</tr>
</table>
1</td>
2</td>
3</td>
4</td>
5</td>
6</td>
7</td>
8</td>
9</td>
10</td>
11</td>
12</td>

Clula 1 Clula Clula
2
3
Clula
4
Clula 5 Clula Clula Clula

6
7 Clula811 Clula 12
Clula 9 Clula 10
Existem atributos?
Claro! Por exemplo, o atributo border que usado para definir a espessura
de uma borda em volta da tabela:
<table border="1">
<tr>
<td>Clula 1</td>
<td>Clula 2</td>
</tr>
<tr>
<td>Clula 3</td>
<td>Clula 4</td>
</tr>
</table>
A borda da tabela especificada em pixels.
Tal como fizemos com as imagens, podemos definir width - largura - em

pixels, para uma tabela - ou alternativamente em percentagem da tela. Veja
abaixo:
<table border="1" width="30%">
Este exemplo renderiza no navegador uma tabela com largura igual a 30% da
largura
da tela.
Existem mais atributos?

Existe uma grande quantidade de atributos para tabelas. A seguir mais dois:
align: define o alinhamento horizontal do contedo da tabela, de uma
linha ou
de uma clula. Por exemplo, left, centre ou right ( esquerda, no
centro ou direita).
valign: define o alinhamento vertical do contedo de uma clula. Por
exemplo, top, middle ou bottom (em cima, no meio ou em baixo).
<td align="right" valign="top">Clula 1</td>
O que posso inserir em tabelas?

Teoricamente
voc pode inserir qualquer coisa em
uma
tabela:
texto, links
e imagens... MAS, tabelas tem
por objetivo apresentar dados tabulares (isto , dados que por sua
natureza devam ser apresentados em linhas e colunas) ento
abstenha-se de colocar coisas dentro de tabela simplesmente porque voc
deseja que elas estejam prximas umas s outras.
Nos primrdios da Internet - isto , h poucos anos atrs - tabelas eram
usadas como ferramenta para construir layout. Se voc quer controlar a
apresentao de textos e imagens, existe uma maneira bem mais racional
(dica:CSS ou tableless). Veremos isso mais a frente em CSS e tableless.
9.
Mais Tabelas
Nesta segunda parte vamos dar continuao e aprender mais sobre as

tabelas.
O que mais existe?

Os dois atributos colspan e rowspan so usados para criar tabelas singulares.
Colspan a abreviao para "column span". Colspan usada na tag
<td> para indicar quantas colunas estaro contidas em uma clula.
<table border="1">
<tr>
<td colspan="3">Clula 1</td>
</tr>
<tr>
<td>Clula 2</td>
<td>Clula 3</td>
<td>Clula 4</td>
</tr>
</table>
E o rowspan?
Como voc j deve ter concluido, rowspan especifica quantas linhas
estaro contidas em uma clula:
<table border="1">
<tr>
<td rowspan="3">Clula 1</td>
<td>Clula 2</td>
</tr>
<tr>
<td>Clula 3</td>
</tr>
<tr>
<td>Clula 4</td>
</tr>
</table>
No exemplo acima rowspan definido em "3" na Clula 1. Isto especifica que

uma
clula deve conter 3 linhas. Clula 1 e Clula 2 esto na mesma linha,
enquanto Clula
3 e Clula 4 formam duas linhas independentes.
Isso no difcil, confuso. bom desenhar a tabela em uma folha de papel
antes de comear a codificao HTML.
10.
Uploading do seu site
At agora somente voc conseguiu visualizar suas pginas. Chegou a hora de

mostrlas para o mundo todo.
Para publicar a sua pgina na Web voc precisar apenas de
espao em um servidor. Para facilitar o seu upload voc poder baixar
programa FTP(opcional) em qualquer site de download de programas.
faz o upload das pginas sem precisar acessar toda vez o site
servidor. Voc acessar diretamente o servidor do seu computador.
um
um
Ele
do
Na internet voc j deve ter visto vrios servidores gratuitos para

hospedagem. Seu endereo ficar cumprido algo parecido com
http://home.servidor.com/nomedousuario. Mas, existe uma maneira de
redirecionar o endereo para que fique mais curto. Como
por exemplo: www.seusite.com.br. Porm, estes, com domnios: .com.br, .com,
.net etc
so pagos. Existem gratuitos que deixam parecido com isso:
www.seusite.k10.com.br (k10 o nome da empresa que est
hospedando). Bem melhor do que deixar aquele endereo enorme.
Depois de cadastrado, para acessar o seu endereo FTP, de um programa
FTP, voc precisar
de
apenas 3
coisas.
O
nomedo
servidor
FTP
(por
exemplo:
ftp.br.geocities.com.br),
o seu
nome
de usurio
(porexemplo: seunome@yahoo.com.br) e sua senha.
11.
Webstandards e validao
Nesta lio voc aprender mais alguns conceitos tericos do HTML.
O que mais h para conhecer sobre HTML?

HTML pode ser escrito de vrias maneiras. O navegador est apto a ler HTML
escrito de vrias maneiras. Podemos dizer que HTML tem muitos dialetos.
Esta a razo
porqu alguns websites so apresentados de formas diversas em
diferentes navegadores.
Desde o aparecimento da Internet tem sido feitas vrias tentativas para se
normatizar o
HTML notadamente atravs do World Wide Web Consortium (W3C)
fundado por
Tim Berners-Lee (o grande inventor do HTML).
No passado - quando voc tinha que comprar um navegador - Netscape
dominava o mercado de navegadores. quela poca as normas para o
HTML estavam nas suas verses 2.0 e 3.2. Mas pelo fato de dominar 90%
do mercado a Netscape no teria, e
no teve que se preocupar muito com normas. Pelo contrrio, a Netscape
inventava seus prprios elementos de marcao que no funcionavam em
outros navegadores.
Por muitos anos a Microsoft ignorou completamente a Internet. Em
determinado momento, resolveu competir com a Netscape e lanou seu
navegador prprio. A primeira verso do navegador da Microsoft, o Internet
Explorer, no era melhor do que
o Netscape no suporte s normas do HTML. Mas, a Microsoft resolveu
distribuir seu navegador gratuitamente junto com o Sistema Operacional
Windows e o Internet Explorer em pouco tempo tornou-se o navegador
mais usado e mais popular.
A partir das verses 4 e 5 a Microsoft anunciava que seus navegadores
ofereciam cada
vez maior suporte s normas HTML do W3C. A Netscape no se
movimentou para atualizar seu navegador e continuou a colocar no
mercado a velha e desatualizada verso 4.
Quando voc codifica HTML de acordo com as normas do W3C,

voc est construindo um website para ser visualizado em todos os
navegadores, no
s agora mas tambm no futuro. E felizmente, tudo o que voc
aprendeu neste tutorial est de acordo com a mais nova verso do
HTML, que o XHTML.
Devido a existncia de diferentes tipos de HTML, voc precisa informar ao

navegador qual o "dialeto" do HTML e no seu caso voc aprendeu
XHTML. Para informar ao navegador, voc usa o Document Type Definition.
O Document Type Definition deve ser escrito sempre no topo do documento:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<title>Ttulo</title>
</head>
<body>
<p>texto texto</p>
</body>
</html>
Alm do Document Type Definition (escrito na primeira linha no exemplo

acima), que
informa ao navegador que voc est codificando XHTML, voc precisa ainda
adicionar informao extra na tag html, usando os atributos xmlns e lang.
xmlns abreviao de "XML-Name-Space" e deve ter sempre o valor
http://www.w3.org/1999/xhtml. Isto tudo o que voc precisa saber.
No atributo lang voc especfica em que lngua (aqui trata-se de linguagem
humana) o documento escrito. As abreviaturas para as lnguas existentes no
mundo todo, esto
nas ISO 639 standard . No exemplo acima a lngua definida no atributo o
portugus
do Brasil ("pt-br").
Validao? Porqu deveria eu fazer isto?

O DTD importante tambm para a validao da pgina.
Insira o DTD nas suas pginas e poder verificar erros no seu HTML,
usando o validador gratuito do W3C.
Para testar o validador faa o seguinte: crie uma pgina e publique
na Internet. A seguir entre em validator.w3.org e l digite o
endereo (a URL) da sua pgina, depois clique no boto validar. Se
seu
HTML
estiver
correto,
vai
aparecer
uma mensagem de
congratulaes. Se no, ser apresentada uma lista de erros, informando
o qu est errado e onde. Cometa alguns erros propositais no seu cdigo para
verificar
o que acontece.
O validador no til somente no encontro de erros. Alguns
navegadores tentam interpretar os erros cometidos pelos desenvolvedores
e consertar o cdigo mostrando a pgina corretamente. Em navegadores
assim voc nunca encontrar erros no prprio navegador. J outros
navegadores no aceitam o erro e apresentam a pgina arruinada
ou mesmo nem apresentam. O validador ento ajuda voc a encontrar erros
que voc no tenha nem idia de que existiam
Sempre valide suas pginas, para ter certeza que elas sero mostradas
corretamente
em todos os navegadores.
1.
Introduo ao CSS
CSS significa Cascading Style Sheetes (Folhas de Estilo em Cascata). No

seria timo fazer layouts na sua pgina sem ter que alterar o HTML toda vez
que quisesse mudar?
Nesta introduo vamos ter uma breve introduo ao CSS para voc
ter uma idia como o CSS prtico. Podemos dizer que o CSS a
melhor metade do HTML. Codificando, no h melhor parceria: HTML
responsvel pelo trabalho pesado (a estrutura), enquanto CSS d o
toque de elegncia (layout).
CSS pode ser adicionado com uso do atributo style. Por exemplo,
voc pode definir o tipo e o tamanho da fonte em um pargrafo:
<p style="font-size:20px;">Este pargrafo em tamanho de fonte igual a
20px</p>
<p style="font-family:courier;">Este pargrafo em fonte Courier</p>
<p style="font-size:16px; font-family:cambria">Este pargrafo em
fonte
Cambria e tamanho 20px</p>
Este pargrafo em tamanho de fonte igual a 20px

Este pargrafo em fonte Courier
Este pargrafo em fonte Cambria e tamanho 16px
No exemplo acima usamos o atributo style para definir o tipo de fonte usado
(com a
propriedade font-family) e o tamanho da fonte (com a propriedade fontsize). Notar
que no ltimo pargrafo do exemplo definimos tanto o tipo como o tamanho
da fonte separados por um ponto e vrgula.
Est parecendo que h uma grande quantidade de trabalho a

executar
Uma das funcionalidades mais inteligentes das CSS a
possibilidade de controlar o layout de um arquivo central. Em lugar
de se usar o atributo style em cada tag, voc pode dizer ao navegador
como deve ser o layout de todos os textos em uma pgina:
<html>
<head>
<title>Minha primeira pgina CSS</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial}
h2 {font-size: 15px; font-family: courier}
p {font-size: 8px; font-family: times new roman}
</style>
</head>
<body>
<h1>Minha primeira pgina CSS</h1>
<h2>Bem vindo minha primeira pgina CSS</h2>
<p>Aqui voc ver como funciona CSS</p>
</body>
</html>
No exemplo acima inserimos as CSS na seo head do documento,

assim ela
se aplica pgina inteira. Para fazer isto use a tag <style
type="text/css"> que informa ao navegador que voc est digitando CSS.
No exemplo, todos os cabealhos da pgina sero em fonte Arial e
tamanho 30px. Todos os subttulos sero em fonte Courier tamanho
15. E, todos os textos dos pargrafos sero em fonte Times New Roman
tamanho 8.
Uma outra opo a de digitar as CSS em um documento separado. Com as
CSS em
um documento separado voc pode gerenciar o layout de muitas
pginas ao mesmo tempo. Muito inteligente, pois voc pode mudar de
uma s vez, o tipo ou o tamanho da fonte de todo o site, quer ele tenha
centenas ou milhares de pginas. Ns
no nos aprofundaremos em CSS agora, mas voc pode aprender tudo, no
futuro, em nosso tutorial CSS.
O que mais posso fazer com CSS?

CSS faz muito mais do que definir tipos e tamanhos de fontes. Por
exemplo, voc pode adicionar cores e fundos. A seguir alguns exemplos para
voc praticar:
<p style="color:green;">Texto verde</p>
<h1 style="background-color: blue;">Cabealho com fundo azul</h1>
<body style="background-image:
url('http://www.html.net/logo.png');">
Alm de cores, tipos de fontes, etc., CSS pode ser usado para
controlar a
configurao e a apresentao da pgina (margens, futuaes,
alinhamentos, larguras, alturas, etc.) Controlando os diferentes elementos com
CSS voc ser capaz
de criar layouts elegantes e precisos.
<p style="padding:25px;border:1px solid red;">Eu amo CSS</p>
Com a propriedade foat um elemento poder "futuar" esquerda ou

direita. O
exemplo seguinte ilustra este princpio:
<img src="bandeiradobrasil.jpg" alt="Bandeira do Brasil" style=
"float:left;" />
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXX, XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...</p>

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
No exemplo mostrado, um elemento (a imagem) futua esquerda e o outro

elemento
(o texto) preenche o espao deixado direita.
Com a propriedade position, voc pode posicionar um elemento em qualquer
lugar da pgina, com preciso:
<img src="bill.jpg" alt="Bill Gates"
style="position:absolute;bottom:50px;right:10px;" />
No exemplo mostrado a imagem foi posicionada a 50 pixels da borda inferior
e a 10
pixels da borda direita do navegador. Voc pode colocar em qualquer lugar na
pgina.
Voc no aprende CSS em 10 minutos. preciso se dedicar um
tempo para estudar. Mas no nada difcil, vamos ver nas
prximas pginas o que voc precisa saber sobre as CSS.
2.
Como funciona as CSS
Nesta lio voc aprender a desenvolver sua primeira folha de estilos.

Voc ver o bsico sobre o modelo CSS e que cdigo necessrio para usar
CSS em um documento HTML.
Muitas das propriedades usadas em Cascading Style Sheets (CSS) so
semelhantes quelas do HTML. Se voc est acostumado a usar HTML
para layout ir reconhecer muitos dos cdigos que usaremos.
A sintaxe bsica das CSS

Suponha que desejamos uma cor de fundo vermelha para a
pgina web: Usando HTML podemos fazer assim:
<body bgcolor="#FF0000">
Com CSS o mesmo resultado ser obtido assim:

body {background-color: #FF0000;}
Como voc pode notar os cdigos HTML e CSS so mais ou menos

parecidos. O
exemplo acima serve tambm para demonstrar o fundamento do modelo
CSS:
seletor {propriedade: valor}
seletor: Em qual tag ser aplicada a propriedade. Por exemplo:
body propriedade: A propriedade pode ser como por exemplo: a
cor do fundo
valor: O valor da propriedade cor
vermelha(#FF0000)
do
fundo
por
exemplo:
Mas, onde colocamos o cdigo CSS? isto que veremos a seguir.
Aplicando CSS a um documento HTML

Voc pode aplicar CSS a um documento de trs maneiras distintas. Os trs
mtodos de aplicao esto exemplificados a seguir. Recomendo que
voc foque no terceiro mtodo, ou seja o mtodo externo. O mtodo
externo alm de ser menos confuso para trabalhar por no estar
junto com o HTML ele no ficar amostra se algum olhar
o
cdigo fonte da
sua
pgina pelo
browser,
pois estar
escondido no servidor onde est hospedando o
seu site. Mtodo 1: In-line (o atributo style)
Uma maneira de aplicar CSS pelo uso do atributo style do HTML. Tomando
como base
o exemplo mostrado anteriormente a cor vermelha para o fundo da pgina
pode ser
aplicada conforme mostrado a seguir:
<html>
<head>
<title>Exemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta uma pgina com fundo vermelho</p>
</body>
</html>
a
seguir: 2: Interno (a tag style)
Mtodo
Uma outra maneira de aplicar CSS e pelo uso da tag <style> do HTML. Como
mostrado
<html>
<head>
<title>Exemplo</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta uma pgina com fundo vermelho</p>
</body>
</html>
Mtodo 3: Externo (link para uma folha de estilos)

O mtodo recomendado o de lincar para uma folha de estilos externa. Usaremos este
mtodo nos exemplos deste tutorial.
Uma folha de estilos externa um simples arquivo de texto com a extenso .css. Tal como
com qualquer outro tipo de arquivo voc pode colocar uma folha de estilos tanto
no servidor como no disco rgido.
Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de estilo.css
e est localizada no diretrio estilo (o que no necessrio, colocar em pasta
separada do arquivo HTML). Tal situao est mostrada a seguir:
O que voc tem a fazer criar um link no documento HTML (ndex.html) para a folha
de estilos (estilo.css). O link criado em uma simples linha de cdigo HTML como
mostrado a seguir:
<link rel="stylesheet" type="text/css" href="c:\~documentos~/estilo.css" />
Notar que o caminho para a folha de estilos indicado no atributo href.
Esta linha de cdigo deve ser inserida na seo header do documento HTML, isto ,
entre as tags <head> e </head>. Conforme mostrado abaixo:
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...
Este link informa ao navegador para usar o arquivo CSS na renderizao e

apresentao do layout do documento HTML.
A coisa realmente inteligente disto que vrios documentos HTML podem lincar para
uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo
ser capaz de controlar a apresentao de muitos documentos HTML.
Esta tcnica pode economizar uma grande quantidade de trabalho. Se por exemplo,
voc quiser trocar a cor do fundo de um site com 100 pginas, a folha de estilos evita
que voc edite manualmente uma a uma as pginas para fazer a mudana nos 100
documentos HTML. Usando CSS a mudana se far em uns poucos segundos

trocandose a cor em uma folha de estilos central.
VAMOS PRATICAR!
Abra o bloco de notas (ou equivalente em outro sistema operacional) e
crie dois arquivos um arquivo HTML e um arquivo CSS com os seguintes
contedos:
Index.html
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Minha primeira folha de estilos</h1>
</body>
</html>
estilo.css
body {
background-color: #FF0000;
}
Salve os dois arquivos no mesmo diretrio. Lembre-se de salvar os

arquivos com a
extenso apropriada (".css" e ".html"(ou htm).
Abra index.html no seu navegador e veja uma pgina com o fundo
vermelho. Parabns! Voc construiu sua primeira folha de estilos!
3. Cores e fundos
Voc vai aprender agora como aplicar cores de primeiro plano e cores de fundo no seu
website. Abordaremos ainda os mtodos avanados de controle e posicionamento de
imagens de fundo.
Cor do primeiro plano: a propriedade 'color'
A propriedade color define a cor do primeiro plano de um elemento.
Considere, por exemplo, que desejamos que todos os cabealhos de primeiro nvel no
documento sejam na cor vermelha. O elemento HTML que marca tais cabealhos o
elemento <h1>. O cdigo a seguir define todos os <h1> na cor vermelha.
h1 {
color: #f0000;
}
As cores podem ser definidas pelo seu valor hexadecimal como no exemplo acima
(#f0000), com uso do nome da cor ("red") ou ainda pelo seu valor rgb
(rgb(255,0,0)).
A propriedade 'background-color'
A propriedade background-color define a cor do fundo de um elemento.
O elemento <body> contm todo o contedo de um documento HTML. Assim, para
mudar a cor de fundo da pgina, devemos aplicar a propriedade background-color ao
elemento <body>.
Voc pode aplicar cores de fundo para outros elementos, inclusive para cabealhos e
textos. No exemplo abaixo foram aplicadas diferentes cores de fundo para os
elementos <body> e <h1>.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Obs.: Note que foram aplicadas duas propriedades ao elemento <h1> separadas por
um ponto e vrgula.
Images de fundo [background-image]

A propriedade CSS background-image usada para definir uma imagem de
fundo.
Para inserir uma imagem de fundo na pgina basta aplicar a
propriedade background-image ao elemento <body> e especificar
o caminho para onde est gravada a imagem.
body
{
background-image: url("imagem.gif");
}
h1 {
color: #990000;
Obs.: Note como foi especificado o caminho para a imagem usando

url("imagem.gif"). Isto significa que a imagem est localizada no mesmo
diretrio
da folha de estilos. Pode ser escolhido um outro diretrio para gravar as
imagens e o caminho
seria
url("../images/imagem.gif")
ou at mesmo hosped-la na
Internet: url("http://www.html.net/imagem.gif").
Imagem de fundo repetida [background-repeat]

No exemplo anterior voc observou que a imagem se repetiu tanto na
vertical como
na horizontal cobrindo toda a tela? A propriedade background-repeat
controla o comportamento de repetio da imagem de fundo.
A tabela a seguir mostra os quatro diferentes valores para backgroundrepeat.
Por exemplo, o cdigo mostrado a seguir para que a imagem no se repita

na tela:
body
{
background-image:
url("butterfy.gif"); backgroundrepeat: no-repeat;
}
h1 {
color: #990000;
}
Image de fundo fixa [background-attachment]

A propriedade background-attachment define se a imagem ser fixa ou se
ir rolar juntamente com o elemento que a contm.
Uma imagem de fundo fixa permanece no mesmo lugar e no rola com a
tela ao contrrio da imagem que no fixa e rola acompanhando o
contedo da tela.
A tabela a seguir mostra os quatro diferentes valores para backgroundattachment. Veja os exemplos para constatar a diferena entre imagem fixa
e imagem que rola.
Por exemplo, o cdigo abaixo fixa a imagem na tela.

body
{
background-image:
url("butterfy.gif"); backgroundrepeat: no-repeat; backgroundattachment: fixed;
}
h1 {
color: #990000;
}
Posio da imagem de fundo [background-position]

Por padro uma imagem de fundo posicionada no canto superior esquerdo da
tela. A
propriedade background-position permite alterar este posicionamento padro
e colocar
a imagem em qualquer lugar na tela.
Existem vrias maneiras de definir o posicionamento da imagem na
tela definindo valores
para background-position.
Todas
elas se
utilizam
de um
sistema de
coordenadas. Por exemplo, os valores '100px 200px' posiciona a imagem
a 100px do topo e a 200px do lado esquerdo da janela do navegador.
As coordenadas podem ser expressas em percentagem da largura da
janeja, em unidades fixas (pixels, centmetros, etc.) ou pode-se usar
as palavras top, bottom, center, left e right. A figura a seguir ilustra o
modelo de coordenadas:
Na tabela a seguir so mostrados alguns exemplos.
No exemplo de cdigo a seguir a imagem posicionada no canto inferior

direito da pgina:
body
{
background-image:
url("butterfy.gif"); backgroundrepeat: no-repeat; backgroundattachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
Compilando [background]
A propriedade background uma abreviao para todas as propriedades
listadas anteriormente.
Com background voc declara vrias propriedades de modo abreviado,
economizando digitao e alguns bites, alm de tornar a folha de
estilo mais fcil de se ler e entender.
Por exemplo, observe as cinco linhas a seguir:
background-image:
url("butterfy.gif"); backgroundrepeat: no-repeat; backgroundattachment: fixed; backgroundposition: right bottom;
}
Usando background voc consegue o mesmo resultado, abreviando como

mostrado abaixo:
background: #FFCC66 url("imagem.gif") no-repeat fixed right bottom;
A declarao abreviada deve seguir a seguinte ordem:

background-colo
background-image
background-repeat
backgroundattachment
background-position
Se uma das propriedades no for declarada ela assume automaticamente o
seu valor default. Por exemplo, a propriedade background-attachment e
background-position
no foram declaradas no cdigo mostrado a seguir:
background: #FFCC66 url("imagem.gif") no-repeat;
As duas propriedades no declaradas assumiro o valor default que como
voc j sabe
so: a imagem rola na tela e ser posicionada no canto superior esquerdo
(que so os valores default para as propriedades no declaradas).
4.
FONTES
Estudaremos as fontes e como aplic-las usando CSS. Veremos como

criar situaes para que
determinada fonte seja
visualizada
pelo
usurio
mesmo
no
estando instalada
em seu sistema operacional.
Famlia de fontes [font-family]

A propriedade font-family usada para definir uma lista de fontes e sua
prioridade
para apresentao de um elemento em uma pgina. Se a primeira fonte da
lista no estiver instalada na mquina do usurio, dever ser usada a
segunda e assim por
diante at ser encontrada uma fonte instalada.
Existem dois tipos de nomes para definir fontes: nomes para famlias de
fontes e nomes para famlias genricas. Os dois so explicados a seguir:
nome para famlias de fontes
Exemplos para este tipo (normalmente conhecidas como "font") so
"Arial", "Times
New Roman" ou "Tahoma".
nome para famlias genricas
Famlias genricas so fontes que pertencem a um grupo com aparncia
uniforme. Um exemplo so as fontes sans-serif que englobam a coleo de
fontes que "no tm p".
Ao listar fontes para seu website, comece com aquela preferida, seguindose algumas alternativas para ela. recomendvel encerrar a listagem das
fontes com uma fonte genrica. Assim fazendo, em ltimo caso a
pgina ser renderizada com fonte da mesma famlia das que foram
especificadas quando todas as demais estiverem indisponveis na
mquina do usurio.
A seguir mostramos um exemplo de listagem de fontes:

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Cabealhos <h1> sero renderizados com fonte "Arial". Se o usurio no
tiver a font
Arial instalada, ser usada a fonte "Verdana". Se ambas estiverem
indisponveis na mquina do usurio ser usada uma fonte da famlia sansserif.
Notar que para especificar a fonte "Times New Roman" foram usadas
aspas. Isto necessrio para fontes com nomes compostos e que
contenham espaos entre os nomes.
Estilo da fonte [font-style]

A propriedade font-style define a escolha da fonte em normal, italic ou
oblique. No exemplo a seguir todos as cabealhos <h2> sero em itlico.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}
Fonte variante [font-variant]

A propriedade font-variant usada para escolher as variantes normal
ou small- caps. Uma fonte small-caps aquela que usa letras
maisculas de tamanhos reduzidos. Confundiu? D uma olhada nos
exemplos a seguir:
Se a propriedade font-variant for definida para small-caps e no estiver

disponvel na mquina do usurio, ser usada fonte em maiscula.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Peso da fonte [font-weight]

A propriedade font-weight define se a fonte ser o quo negrito. Uma fonte
pode ser
normal ou bold. Alguns navegadores suportam nmeros de 100-900 (em
intervalos
de 100 em 100) para definir o peso da fonte.
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Tamanho da fonte [font-size]

O tamanho da fonte definido pela propriedade font-size.
Existem muitas unidades (p. ex.:. pixels e porcentagens) que podem ser
usadas para definir o tamanho da fonte. Neste tutorial ns usaremos as
unidades mais comuns e apropriadas. Ver exemplos a seguir:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Existe uma diferena fundamental entre as quatro unidades adotadas no

exemplo
acima. As unidades 'px' e 'pt' so absolutas, enquanto '%' e 'em'
permitem ao usurio ajustar o tamanho das fontes ao seu gosto e
necessidade. Para fazer seu site acessvel a todos, voc dever usar
unidades como '%' ou 'em'.
Abaixo uma figura mostrando como ajustar o tamanho das fontes no
navegador Internet Explorer. Tente voc mesmo este ajuste uma
excelente funcionalidade do navegador, no mesmo?
Compilando [font]
Usar font uma abreviao que permite definir vrias propriedades em
uma s.
Veja a seguir quatro linhas de cdigo usadas para definir propriedades de
fonte para um pargrafo <p>:
p{
font-style: italic;
font-weight:
bold; font-size:
30px;
font-family: arial, sans-serif;
Usar a abreviao simplifica o cdigo como mostrado abaixo:

p{
font: italic bold 30px arial, sans-serif;
A ordem dos valores para font a mostrada a seguir :

font-style
fontvariant
fontweight
font-size
font-family
5.
Textos
Formatar e estilizar textos um item chave para qualquer web designer.

Nesta lio voc ser apresentado s interessantes oportunidades que as
CSS proporcionam para adicionar layout aos textos. Sero discutidadas as
propriedades listadas abaixo:
Indentao de texto [text-indent]

A propriedade text-indent permite que voc aplique um recuo primeira
linha de um pargrafo. No exemplo a seguir um recuo de 30px aplicado
todos os textos
marcados com <p>:
p{
text-indent: 30px;
}
Alinhamento de textos [text-align]

A propriedade text-align corresponde ao atributo align das antigas verses
do HTML. Textos podem ser alinhados esquerda (left), direita
(right) ou centrados (centred). E temos ainda o valor justify que faz
com o texto contido em uma linha
se estenda tocando as margens esquerda e direita. Este tipo de alinhamento
usado
em jornais e revistas.
No exemplo a seguir o texto contido na clula de cabealho <th> alinhado
direita
e os contidos nas clulas de dados <td> so centrados. E, os textos
normais em pargrafos so justificados:
th
{
}
td
{
}
p{
}
textalign:
right
;
textalign:
cent
er;
textalign:
justi
fy;
Decorao de textos [text-decoration]

A propriedade text-decoration possibilita adicionar "efeitos" ou "decorao"
em textos. Voc pode por rexemplo, sublinhar textos, cortar o texto com
uma linha, colocar uma linha sobre o texto, etc. No exemplo a seguir os
cabealhos <h1> so sublinhados, os cabealhos <h2> levam um linha
em cima e os cabealhos <h3> so cortados por uma linha.
h1
{
text-decoration: underline;
}
h2
{
text-decoration: overline;
}
h3
{
text-decoration: line-through;
Espao entre letras [letter-spacing]

O espaamento entre os caracteres de um texto controlado pela
propriedade letter- spacing. O valor desta propriedade define o espao entre
os caracteres. Por exemplo,
se voc deseja um espao de 3px entre as letras do texto de um pargrafo
<p> e de
6px entre as letras do texto de um cabealho <h1> o cdigo a seguir
dever ser usado.
h1 {
letter-spacing: 6px;
}
p{
letter-spacing: 3px;
Transformao de textos [text-transform]

A
propriedade
text-transform
controla
a
capitalizao
(tornar
maiscula) do texto. Voc pode escolher capitalize, uppercase ou
lowercase independentemente de como o texto foi escrito no cdigo
HTML.
Como exemplo tomamos a palavra "cabealho" que pode ser apresentada
ao usurio como "CABEALHO" ou "Cabealho". So quatro os valores
possveis para text- transform:
capitalize
Capitaliza a primeira letra de cada palavra. Por exemplo: "john doe"
transforma-se para "John Doe".
uppercase
Converte todas as letras para maiscula. Por exemplo: "john doe"
transforma-se para"JOHN DOE".
lowercase
Converte todas as letras para minscula. Por exemplo: "JOHN DOE"
transforma-se para"john doe".
none
Sem trasformaes - o texto apresentado como foi escrito no cdigo HTML.
Para exemplificar vamos usar uma lista de nomes. Os nomes esto marcados
com o elemento <li> (item de lista). Vamos supor que desejamos os nomes
capitalizados e
os cabealhos em letras maisculas.
Ao consultar o exemplo sugerido para este cdigo d uma olhada no HTML da
pgina
e observe que os textos no cdigo foram escritos com todas as letras em
minsculas.
h1
{
}
li {
texttransf
orm:
uppe
rcas
e;
texttransf
orm:
capit
alize
;
6.
Links
Voc pode aplicar aos links tudo que aprendeu nas lies anteriores
(mudar cores, fontes, sublinhados, etc). A novidade aqui que voc pode
definir as propriedades de maneira diferenciada de acordo com o estado
do link ou seja visitado, no visitado, ativo ou com o ponteiro do mouse
sobre o link. Isto possibilita adicionar interessantes efeitos ao seu website.
Para estilizar estes efeitos voc usar as chamadas pseudo- classes.
O que pseudo-classe?
Uma pseudo-classe permite estilizar levando em conta condies diferentes ou
eventos
ao definir uma propriedade de estilo para uma tag HTML.
Vamos ver um exemplo. Como voc j sabe, links so marcados no HTML
com tags
<a>. Podemos ento usar a como um seletor CSS:
a{
color: blue;
Um link pode ter diferentes estados. Por exemplo, pode ter sido visitado
ou no
visitado. Voc usar pseudo-classes para estilizar links visitados e no
visitados.
a:link {
color: blue;
}
a:visited {
color: red;
}
Use as pseudo-classes a:link e a:visited para estilizar links no visitados
e visitados
respectivamente. Links ativos so estilizados com a pseudo-classe a:active e
a:hover, esta ltima a pseudo-classe para links com o ponteiro do mouse
sobre ele.
A seguir explicaremos com mais detalhes e exemplificao, as quatro pseudo-classes.

Pseudo-classe: link
A pseudo-classe :link usada para links no visitados.
No exemplo a seguir links no vistados sero na cor verde.
a:link {
color: green;
}
Pseudo-classe: visited
A pseudo-clases: visited usada para links visitados. No exemplo a seguir links
visitados sero
na cor amarela:
a:visited {
color: yellow;
}
Pseudo-classe: active
A pseudo-classe :active usada para links ativos.
No exemplo a seguir links ativos tero seu fundo na cor vermelha:
a:active {
background-color: red;
}
Pseudo-classe: hover
A pseudo-classe :hover usada para quando o ponteiro do mouse est sobre o link.
Isto pode ser usado para conseguir efeitos bem interessantes. Por exemplo, podemos
mudar a cor do link para laranja e o texto para itlico quando o ponteiro do mouse
passa sobre ele, o cdigo CSS para estes efeitos o mostrado a seguir:
a:hover {
color: orange;
font-style: italic;
}
Exemplo 1: Efeito quando o ponteiro est sobre o link

comum a criao de efeitos diferentes quando o ponteiro est sobre o link.
Veremos
a seguir alguns exemplos extras de estilizao da pseudo-classe :hover.
Exemplo 1a: Espaamento entre as letras
Como voc deve estar lembrado da lio anterior, o espaamento entre as
letras de
um texto pode ser controlado pela propriedade letter-spacing. Isto pode ser
aplicado aos links para obter um efeito interessante:
a:hover {
letter-spacing:
10px; fontweight:bold;
color:red;
}
Exemplo 1b: UPPERCASE e lowercase

Na lio anterior vimos a propriedade text-transform, para estilizar
com letras maisculas e minsculas. Isto pode ser usado para estilizar
links:
a:hover {
text-transform:
uppercase; fontweight:bold; color:blue;
background-color:yellow;
}
Exemplo 2: Removendo sublinhado dos links

Uma pergunta comum: Como remover o sublinhado dos links?
Voc deve estudar com muito cuidado a necessidade de retirar o
sublinhado dos links, pois isto poder reduzir signifcativamente a
usabilidade do
website. As pessoas esto acostumadas com links na cor azul e
sublinhados e sabem que ali h um texto a ser clicado. Se voc muda a cor
e retira o sublinhado dos links, poder confundir seus visitantes e em
conseqncia no retirar o mximo dos
contedos do seu website.
Feita esta ressalva, muito fcil retirar o sublinhado dos links. Conforme
explicado na lio anterior, a propriedade text-decoration pode ser usada para
definir se o texto
ou no sublinhado. Para remover o sublinhado, basta definir o valor none
para a propriedade text-decoration.
a{
text-decoration:none;
Alternativamante,
voc pode definir
juntamente com
outras
propriedades para as quatro pseudo-classes.
a:link
{
color: blue;
}
a:visited {
color: purple;
}
a:active {
background-color: yellow;
}
a:hover {
text-decoration
color:red;
7.
Identificando e agrupando elementos (classes e id)
Em alguns casos voc deseja aplicar estilos a um elemento ou grupo de

elementos em particular. Nesta lio veremos como usar class e id para
estilizar elementos.
Como definir uma cor para um determinado cabealho, diferente da cor
usada para os demais cabealhos do website? Como agrupar links em
diferentes categorias e estilizar cada categoria diferentemente? Estas so
algumas das questes que vamos ver agora.
Agrupando elementos com uso de classe

Vamos supor que temos duas listas de links para diferentes tipos de uvas
usadas na produo de vinho branco e de vinho tinto. O cdigo HTML
conforme mostrado
abaixo:
<p>Uvas para vinho branco:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>Uvas para vinho tinto:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>
Queremos que os links para vinho branco sejam na cor amarela, para vinho
tinto na
cor vermelha e os demais links na pgina permaneam na cor azul.
Para conseguir isto, dividimos os links em duas categorias. Isto feito

atribuindo uma classe para cada link, usando o atributo class.
Vamos especificar esta classe no exemplo a seguir:
<p>Uvas para vinho branco:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>
<p>Uvas para vinho tinto:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
Agora podemos definir propriedades especficas para links pertencentes
as classes
whitewine e redwine, respectivamente.
a{
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
Como mostrado no exemplo acima, pode-se definir propriedades para
estilizao dos
elementos pertencentes a uma determinada classe usando um
.nomedaclasse na folha de estilos do documento.
Identificando um elemento com uso de id
Alm de agrupar elementos podemos querer atribuir identificao a um nico

elemento. Isto feito usando o atributo id.
O que h de especial no atributo id que no poder existir dois ou mais elementos
com a mesma id, ou seja em um documento apenas um e somente um
elemento poder ter uma determinada id. Cada id nica. Para casos em que haja
necessidade
de mais de um elemento com a mesma identificao usamos o atributo class. A seguir um
exemplo de possvel uso de id: exe: 2
<h1>Captulo
...
<h2>Captulo
...
<h2>Captulo
...
<h1>Captulo
...
<h2>Captulo
...
<h3>Captulo
...
1</h1>
1.1</h2>
1.2</h2>
2</h1>
2.1</h2>
2.1.2</h3>
O exemplo acima simula os cabealhos de um documento estruturado em captulos e

pargrafos. comum atribuir uma id para cada captulo como mostrado a seguir:
<h1
...
<h2
...
<h2
...
<h1
...
<h2
...
<h3
id="c1">Captulo 1</h1>
id="c1-1">Captulo 1.1</h2>
id="c1-2">Captulo 1.2</h2>
id="c2">Captulo 2</h1>
id="c2-1">CCaptulo 2.1</h2>
id="c2-1-2">Captulo 2.1.2</h3>
#c1-2 {
color: red;
}
...
Vamos supor que o cabealho do captulo 1.2 deva ser na cor vermelha. Isto
pode ser feito conforme mostrado na folha de estilo a seguir:
Como mostrado no exemplo acima, podemos definir propriedades para um
elemento
especfico usando um seletor #id na folha de estilos para o documento.
8.
Agrupando elementos (span e div)
Os elementos <span> e <div> so usados para agrupar e estruturar um documento e so

freqentemente usados em conjunto com os atributos class e id.
Nesta lio veremos com detalhes o uso dos elementos HTML <span> e <div> no que
se refere a sua vital importncia para as CSS.
Agrupando com <span>
Agrupando com<div>
Agrupando com <span>
O elemento <span> um elemento neutro e que no adiciona qualquer tipo de
semntica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar
efeitos visuais a partes especficas do texto no seu documento.
Um exemplo deste uso mostrado na citao abaixo:
<p>Dormir cedo e acordar cedo faz o homemsaudvel, rico e sbio.</p>
Vamos supor que queremos enfatizar na cor vermelha os benefcios apontados na

frase. Para isto marcamos os benefcios com <span>. A cada span atribumos uma
class, e estilizamos na folha de estilos:
<p>Dormir cedo e acordar cedo faz o homem
<span class="beneficio">saudvel</span>,
<span class="beneficio">rico</span>
e <span class="beneficio">sbio</span>.</p>
A folha de estilos:
span.beneficio {
color:red;
}
claro que voc pode usar id para estilizar o elemento <span>. Mas, como voc deve
estar lembrado, dever usar uma nica id para cada um os trs elementos <span>,
conforme foi explicado na lio anterior.
Agrupando com <div>

Enquanto <span> usado dentro de um elemento nvel de bloco como
vimos no exemplo anterior, <div> usado para agrupar um ou mais
elementos nvel de bloco.
Diferenas parte, o agrupamento com <div> funciona mais ou
menos da mesma maneira. Vamos ver um exemplo tomando duas
listas de presidentes dos Estados Unidos agrupados segundo suas
filiaes polticas:
<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>
E na folha de estilos, podemos agrupar a estilizao da mesma maneira como

fizemos
no exemplo acima:
#democrats {
background:blue;
}
#republicans {
background:red;
}
Nos exemplos mostrados acima usamos somente <div> e <span>

para simples estilizaes, tais como cores de textos e de fundos.
Contudos estes dois elementos possibilitam estilizaes bem mais
avanadas como veremos adiante nas lies deste tutorial.
9.
Box Model
O box model (modelo das caixas) em CSS, descreve os boxes (as

caixas) geradas pelos elementos HTML. O box model, detalha ainda, as
opes de ajuste de margens, bordas, padding e contedo para cada
elemento. Abaixo apresentamos um diagrama representando a estrutura
de construo do box model:
O box model em CSS
A ilustrao acima terica. Vamos explic-la na prtica tomando

como base um cabealho e um texto. O HTML para nosso exemplo (o
texto foi retirado da Declarao Universal dos Direitos Humanos e est no
original em ingls) o mostrado abaixo:
<h1>Article 1:</h1>
<p>All human beings are born
free and equal in dignity and
rights.
They are endowed with reason and
conscience and should act towards one
another in a
spirit of brotherhood</p>
Definindo estilos para cores e fontes o exemplo pode ser apresentado como
a seguir:
O exemplo contm dois elementos: <h1> e <p>. O box model para os dois
elementos
mostrado a seguir:
Embora possa parecer um pouco complicado, a ilustrao mostra como cada

um dos elementos contido em um box (uma caixa). Boxes que podem ser
ajustados e controlados via CSS.
10.
Margin e padding
Na lio anterior vimos o box model. Nesta lio veremos como

controlar a apresentao de um elemento definindo as propriedades
margin e padding.
Definindo margin de um elemento

Um elemento tem quatro lados: right, left, top e bottom (direito, esquerdo,
superior e inferior). A margin a distncia entre os lados de elementos
vizinhos (ou s bordas do documento). Veja o diagrama da lio anterior.
Vamos comear com um exemplo mostrando como definir margins para o
documento,
ou seja, para o elemento <body>. A ilustrao a seguir mostra como
sero as margens da pgina.
As CSS so mostradas abaixo:

body
{
m
a
r
g
i
n
t
o
p
:
1
0
0
p
x
;
m
a
r
g
i
n
r
i
g
h
t
:
4
0
p
x
;
m
a
r
g
i
n
b
ottom: 10px;
margin-left: 70px;
Ou, adotando uma sintaxe mais elegante:

body
{
margin: 100px 40px 10px 70px;
}
As margens para a maioria dos elementos pode ser definida conforme o

exemplo
acima. Podemos ento, por exemplo, definir margens para todos os
pargrafos <p>:
body
{
}
p{
Definindo padding de um elemento

Padding pode tambm ser entendido como "enchimento". Isto faz sentido,
porque padding no computado na distncia entre elementos, padding
define simplesmente
a distncia entre a borda e o contedo do elemento.
Ilustramos o uso de padding atravs de um exemplo onde todos os
cabealhos tm uma cor de fundo definida:
h1
{
}
h2
{
}
back
grou
nd:
yello
w;
back
grou
nd:
oran
ge;
Definindo padding para os cabealhos, alteramos a quantidade de

enchimento existente ao redor de cada um deles:
h1
{
background: yellow;
padding: 20px 20px 20px 80px;
}
h2
{
}
background: orange;
padding-left:120px;
11.
Bordas
Bordas podem ser usadas para muitas coisas, por exemplo, como elemento
decorativo ou para servir de linha de separao entre duas coisas. CSS
proporciona infinitas possibilidades de uso de bordas na pgina.
A espessura das bordas [border-width]

A espessura das bordas definida pela propriedade border-width, que pode
assumir
os valores thin, medium, e thick (fina, mdia e grossa), ou um valor
numrico em pixels. A figura a seguir ilustra algumas espessuras de bordas:
As cores das bordas [border-color]
A propriedade border-color define as cores para as bordas. Os valores so

expressos
em cdigo ou nome de cores, por exemplo, "#123456", "rgb(123,123,123)"
ou"yellow".
Tipos de bordas[border-style]
Existem vrios tipos de bordas disponveis para escolha. A seguir
apresentamos 8 tipos diferentes
de
bordas
e
como
elas
so
renderizadas Internet Explorer 5.5. Todos os exemplos so mostrados
na cor "gold" e com espessura "thick", mas voc pode usar qualquer cor e
espessura ao seu gosto.
Os valores none ou hidden podem ser usados quando no se deseja a
existncia de bordas.
Exemplos de definio de bordas
As trs propriedades explicadas acima podem ser

definidas juntas para cada elemento e resultam em
diferentes
bordas.
Para
exemplificar,
foram
estilizadas diferentes bordas para
os elementos <h1>, <h2>, <ul> e <p>. O
resultado pode no ser uma obra prima, mas,
ilustra bem algumas das inmeras possibilidades
de estilizao de bordas:
h1
{
}
h2
{
}
p{
ul {
b
o
r
d
e
r
w
i
d
t
h
:
t
h
i
c
k
;
b
o
r
d
e
r
s
t
y
l
e
:
d
o
t
t
e
d
;
b
o
r
d
er-color: gold;
border-width:
20px;
borderstyle:
outset;
border-color: red;
border-width: 1px;
border-style:
dashed; bordercolor: blue;
border-width: thin;
border-style: solid;
border-color:
orange;
possvel ainda definir propriedades especialmente para as bordas top,

bottom, right
ou left (superior, inferior, direita e esquerda). Veja o exemplo a seguir:
h1
{
border-top-width:
thick;
border-topstyle: solid; bordertop-color: red;
border-bottom-width:
thick;
border-bottomstyle:
solid;
borderbottom-color: blue;
border-right-width:
thick;
border-rightstyle: solid; borderright-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color:
orange;
Compilando [border]
Assim como para muitas outras propriedades, voc pode usar uma
declarao abreviada para bordas. Vamos a um exemplo:
p{
border-width:
1px;
borderstyle:
solid;
border-color:
blue;
}
Pode ser abreviada assim:
p{
}
border: 1px solid blue;
12.
Altura e largura
At agora ainda no fizemos qualquer considerao

sobre
as
dimenses dos elementos com que trabalhamos. Nesta lio veremos
como fcil atribuir uma altura
e uma largura para um elemento.
Atribuindo largura [width]

A propriedade width destina-se a definir a largura de um elemento.
O exemplo a seguir constri um box dentro do qual podemos digitar um
texto:
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
Atribuindo altura [height]

No exemplo acima a altura ser determinada pelo contedo inserido
no box. Voc pode definir a altura de um elemento com a
propriedade height. Como exemplo, vamos fazer a altura do box anterior
igual a 500px:
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
13.
Flutuando elementos (floats)
Um elemento pode ser 'futuado' esquerda ou direita com uso da

propriedade foat. Isto significa que o box e seu contedo so deslocados
para a direita ou para a esquerda do documento (ou do bloco container)
(ver lio 9 para descrio do Box model). A figura a seguir ilustra o
princpio de float:
Se desejamos que um texto seja posicionado em volta de uma figura como

mostrado abaixo, basta futuarmos a imagem:
Uma imagem flutuada
textoxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxtexto
<div id="picture">
<img src="bandeiradobrasil.jpg" alt="Bandeira do Brasil">
</div>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxx,
xxxxxxxxxxxxxxxxxxxxxxxxx...</p>
Para conseguir o efeito mostrado, basta definir uma largura para o box que o
contm
e declarar para ele foat: left;
#picture {
float:left;
width: 100px;
}
Outro exemplo : colunas
Floats podem ser usados para construir colunas em um documento. Para
criar as colunas estruturamos as colunas no cdigo HTML usando <div>
como mostrado a seguir:
<div id="column1">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx..
.</p>
</div>
<div id="column2">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xx,
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
</p>
</div>
<div id="column3">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
</p>
</div>
A seguir definimos a largura de cada coluna, por exemplo 33%, e
declaramos foat:
left; para cada uma das colunas:
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}
foat pode ser declarado left, right ou none.
A propriedade clear
A propriedade clear usada para controlar o comportamento dos elementos
que se seguem aos elementos floats no documento.
Por padro, o elemento subsequente a um float, ocupa o espao
livre ao lado do elemento futuado. Veja no exemplo acima que o texto
deslocou-se automaticamente para o lado da foto de Bill Gates.
A propriedade clear pode assumir os valores left, right, both ou
none. A regra geral : se clear, for por exemplo definido both para
um box, a margem superior deste box ser posicionada sempre abaixo
da margem inferior dos boxes futuados que estejam antes dele no
cdigo.
<div id="picture">
<img src="bandeiradobrasil.jpg" alt="Bandeira do Brasil">
</div>
<h1>Bandeira do Brasil</h1>
<p
class="floatstop">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xx, xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</p>
Para evitar que o texto se posicione no espao livre deixado pela foto do Bill
Gates
basta adicionar a seguinte regra CSS:
#picture {
foat:left;
width: 100px;
}
.foatstop {
clear:both;
}
14.
Posicionando elementos
Com posicionamento CSS podemos colocar um elemento em uma

posio exata na pgina.
Combinado
com
floats (ver
lio
13), o
posicionamento abre
muitas
possibilidades para criao de layouts precisos e avanados.
O princpio de posicionamento CSS

Considere a janela do navegador como um sistema de coordenadas:
O princpio de posicionamento CSS estabelece que voc pode posicionar um

elemento em qualquer lugar na tela usando um sistema de coordenadas.
Vamos supor que queremos posicionar um cabealho. Usando o box model
(veja na lio 9) o cabealho pode ser estilizado para ser apresentado como
mostrado abaixo:
h1
{
position:absolute;
top: 100px;
left: 200px;
O resultado mostrado a seguir:
Como voc pode ver, posicionar com CSS uma tcnica precisa para
colocar
elementos. muito mais fcil do que usar tabelas, imagens
transparentes e tudo mais.
Posicionamento absoluto
Um elemento posicionado absolutamente no cria nenhum espao no
documento. Isto significa que no deixa nenhum espao vazio aps ser
posicionado.
Para posicionar um elemento de forma absoluta a propriedade
position deve ser definida para absolute. Voc pode ento usar as
propriedades left, right, top, e bottom para definir as coordenadas e
posicionar o elemento.
Para exemplificar o posicionamento absoluto escolhemos colocar quatro
boxes nos quatro cantos da pgina:
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolut
e; top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
Posicionamento relativo
Para posicionar um elemento de forma relativa a propriedade
position deve ser definida para relative. A diferena entre os dois
tipos de posicionamento a maneira como o posicionamento
calculado.
O posicionamento
para
posio relativa
calculado com base na posio original do elemento no

documento. Isto
significa uma movimentao
do
elemento para a esquerda, para a direita, para cima ou para baixo. Assim
fazendo o elemento ocupa um espao aps ser posicionado.
Como exemplo de posicionamento relativo vamos tentar posicionar trs
imagens relativamente as suas posies originais na pgina. Notar como as
imagens deixam
um espao vazio nas suas posies originais no documento:
#bola1 {
position:relativ
e; left: 350px;
bottom: 150px;
}
#bola2 {
position:relativ
e; left: 150px;
bottom: 500px;
}
#bola3 {
position:relativ
e; left: 50px;
bottom: 700px;
}
15.
Usando z-index (Layers)
CSS usa o espao tri-dimensional - altura, largura e profundidade.

Nas lies anteriores vimos as duas primeiras dimenses. Nesta lio
aprenderemos
como colocar
elementos
em
layers
(camadas).
Resumindo, camadas significam como os elementos se sobrepem uns
aos outros.
Para fazer isto definimos para cada elemento um nmero ndice (zindex). O comportamento que elementos com nmero ndice maior
se sobrepem queles com menor nmero.
Vamos supor um royal fush no jogo de poker. As cartas podem ser
apresentadas como se cada uma delas tivesse um z-index:
No caso mostrado, os nmeros ndice esto

uma seqncia direta (de 1-5), contudo o mesmo resultado poderia ser
obtido com
uso de 5 diferentes nmeros, no em seqncia. O que conta a
cronologia dos nmeros (a ordem).
O cdigo para a ilustrao das cartas mostrado a seguir:

#ten_of_diamonds {
position:
absolute; left:
100px; bottom:
100px;
z-index: 1;
}
#jack_of_diamonds {
position:
absolute; left:
115px; bottom:
115px;
z-index: 2;
}
#queen_of_diamonds {
position:
absolute; left:
130px; bottom:
130px;
z-index: 3;
}
#king_of_diamonds {
position:
absolute; left:
145px; bottom:
145px;
z-index: 4;
}
#ace_of_diamonds {
position:
absolute; left:
160px; bottom:
160px;
z-index: 5;
}
O mtodo simples, mas as possibilidades so muitas. Voc pode colocar
imagens
sobre textos, texto sobre texto, etc.
Introduo ao XHTML
Para que serve o XHTML? Um arquivo XHTML um arquivo HTML, que pode
ser lido
por qualquer browser. No estamos falando de um novo HTML, com
novas tags ou coisa assim. Pelo contrrio, o XHTML foi feito para funcionar
mesmo em navegadores antigos. Mas, ao mesmo tempo, Um arquivo
XHTML tambm um arquivo XML vlido,
que pode ser lido por qualquer interpretador de XML.
Meu primeiro conselho, nesse caso, que voc, se no trabalha com
XML, deixe preocupao com o XHTML para depois de dominar bem o
cdigo semntico e o layout tableless. No porque seja complicado,
pelo contrrio, transformar HTML
em XHTML bem simples, mas
simplesmente porque voc pode obter benefcios muito significativos, e

muito mais rapidamente, aprendendo CSS do que XHTML.
O segundo conselho que voc comece a estudar o assunto. Depois de
dominar bem layouts CSS, mergulhe no XML. A maioria dos bancos de
dados hoje permite extrair dados diretamente em XML e todas as
plataformas de aplicaes web trabalham bem com
XML.
com
poderosa linguagem XSLT voc pode muito facilmente oferecer seus os

dados em XHTML para o navegador.
Para que seu arquivo possa ser lido por mquinas alm de humanos
muito importante que voc escreva um XHTML vlido, com isso voc est
fazendo com que
as informaes do seu site fique mais acessvel para as buscas,
contribuindo para o projeto e principalmente melhorando as visitas do seu
site.
O que o DOC TYPE?

O Doctype (Document Type Definition) a primeira coisa que se deve
escrever em
um arquivo XHTML, ele vai na primeira linha do seu documento, se voc
quiser ter
um XML vlido, no devemos esquec-lo, ele serve para informar ao
browser que tipo de documento ser visualizado.
Existem 3 tipos:
Strict: Este tipo usado quando voc fez um cdigo 100% XHTML, sem
erros, deve
ser escrito assim:
<!DOCTYPE html
PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd>
Transitional: Este o modo mais usado, voc o usa quando est

comeando a migrar do nosso amigo HTML para o poderoso XHTML, sua
sintaxe :
<!DOCTYPE html
PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd>
Frameset: usado quando voc est utilizando FRAMES em seu site, se

escreve assim:
<!DOCTYPE html
PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd>
Veja o exemplo abaixo:
Exemplo:
<!DOCTYPE html
PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Feche TODAS as tags

Quem j escreveu algum XML sabe que ele no funciona at que
TODAS as tags estiverem bem fechadas, no HTML era diferente,
muitas vezes deixvamos tags abertas, e ele funcionava que era uma
beleza.
Para se fazer um XHTML vlido, devemos fechar TODAS as tags:
1. No devemos esquecer de fechar as tags que estamos carecas de
conhecer:
<p></p>, <b></b>, etc
2. E no devemos esquecer de forma alguma de fechar as tags solitrias,

assim, ao invs de <br> escrevemos <br></br>, ou na forma simplificada:
<br />.
Descobriram que fechando tags desta forma <br/>, no se sabe
porque
estava causando um problema no Netscape, mas apenas
colocando um espao antes da / o problema solucionado.
Use letras minsculas
Quem nunca viu um cdigo fonte de um documento HTML escrito assim:
<A
href=http://tags.com.letras.minsculas/
TARGET=_BLANK>
</A>
Um documento XHTML deve ter TODAS as tags e seus respectivos atributos
escritos com letra minscula!
No esquea das ASPAS

Esta regra bem simples. Todos os atributos XHTML devem conter as
benditas
ASPAS.
Atributo NAME
O antigo atributo NAME foi substitudo pelo atributo ID. Se seus usurios,
clientes, etc, utilizam ainda antigos browsers, voc pode sem problema
nenhum utilizar as duas formas juntas
durante
neste
perodo
em
que
estamos
migrando:
<img src=imagem.gif id=imagem name=imagem />
Atributos sem valor
No devemos esquecer tambm os atributos que escrevemos sem valor, por
exemplo: ERRADO:
<option selected>
<frame noresize>
<input checked>
<input readonly>
CERTO:
<option selected=selected>
<frame noresize=noresize>
<input checked=checked>
<input readonly=readonly>
E assim por diante.
Quer uma dica?
Se voc est migrando do HTML para o XHTML, o TIDY pode te dar uma
forcinha.
O TIDY uma ferramenta para validar e consertar cdigos HTML, ele tem
opes que voc pode escolher qual a verso do HTML voc quer validar,
uma dessas opes a XHTML. Se voc j est escrevendo um XHTML e
quer que seu cdigo fique livre de todos os erros, o TIDY arruma para voc.

Apostila HTML, XHTML e Css

Uploaded by

Document Information

Original Title

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

Apostila HTML, XHTML e Css

Uploaded by

Copyright:

Available Formats

aPOstiLA DE

Escrevendo um XHTML vlido

O HTML, responsvel pela parte pesada do site.

O HTML, a linguagem me usada para construir os sites. Apesar de

1. O que so tags HTML?

2. Vamos ver as tags principais para a construo de uma pgina HTML.

a tag de abertura do ttulo da janela.

</title> tag de fechamento do ttulo da janela.

3. INICIANDO COM O HTML

TTULO NA JANELA DO SITE.

<title> Aqui ficar o ttulo da janela </title>

A tag utilizada para o ttulo a <h1> ao <h6>.

<h1>Aqui ficar o ttulo </h1>

da tag menor ser o tamanho do texto.

<h1>Aqui ficar o subttulo </h1>

4.TEXTO PARGRAFO NO SITE

<p>Aqui ficar o texto pargrafo</p>

Ser renderizado no navegador assim:

Ser renderizado no navegador assim:

7.Texto com letras menores

Ser renderizado no navegador assim:

8. Posso usar vrias tags simultaneamente?

9. Existem tags que so abertas e fechadas em nica tag. Estas tags so

Ser renderizado no navegador assim:

Ser renderizado no navegador assim:

11. Lista ordenada:

Como a pgina ficou vermelha?

Voltando aos atributos:

Como construir links entre as pginas.

O elemento a refere-se a "anchor" - ncora . O atribuito href abreviao para

Como so os links entre minhas prprias pginas?

Se a pagina2 for colocada em um subdiretrio (chamado de "subdiretorio"), o link

Como so os links dentro de uma mesma pgina?

Para ficar mais claro, vamos a um exemplo:

Ser renderizado no navegador assim (clique nos dois links):

Obs.: O nome de um atributo id deve comear com uma letra

Links para um endereo de email

Ser renderizado no navegador assim:

A nica diferena que no lugar do endereo do documento voc

Existem outros atributos que eu deva conhecer?

Ser renderizado no navegador assim:

Ser renderizado no navegador assim:

Tradicionalmente os formatos GIF e JPEG tem sido os mais empregados, mas

Vamos aprender mais algumas coisas sobre imagens.

Segundo, imagens podem ser links:

Ser renderizado no navegador assim:

Existem outros atributos que eu deva conhecer?

Ser renderizado no navegador assim:

Dois outros atributos importantes so width e height:

Os atributos width e height podem ser usados para definir respectivamente, a

O tempo de descarga da imagem ser sempre aquele requerido como se ela

Tabelas so usadas para apresentar "dados tabulares", isto ,

Ser renderizado no navegador assim:

Qual a diferena entre as tags <tr> e <td>?

cada clula contida nas linhas da tabela.

Eis o acontece no exemplo dado acima: a tabela comea com <table>,

Clula 1 e Clula 2 formam uma linha. Clula 1 e Clula 3 formam uma

Ser renderizado no navegador assim:

Clula 5 Clula Clula Clula

Ser renderizado no navegador assim:

A borda da tabela especificada em pixels.

Tal como fizemos com as imagens, podemos definir width - largura - em

Existem mais atributos?