Escolar Documentos
Profissional Documentos
Cultura Documentos
CSS
1.Introduo as CSS____________________________________________pgina 33
2.Como funciona as CSS ________________________________________pgina 37
3. Cores e fundos _____________________________________________pgina 41
4. FONTES __________________________________________________pgina 48
5. Textos ___________________________________________________pgina 53
6. Links ____________________________________________________pgina 56
7. Identificando e agrupando elementos (classes e id) ______________pgina 60
8. Agrupando elementos (span e div) ____________________________pgina 67
9.Box Model_________________________________________________pgina 72
10. Margin e padding ________________________________________pgina 72
11. Bordas _________________________________________________pgina 75
12. Altura e largura __________________________________________pgina 76
13. Flutuando elementos (floats) _______________________________pgina 79
14. Posicionando elementos ___________________________________pgina 83
15. Usando z-index (Layers)___________________________________pgina 84
XHTML
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
1. ESTRUTURA BSICA.
<html>
<head>
<title> Aqui ficar o ttulo da janela </title>
<title>Meu website</title>
</head>
<body>
</body>
</html>
2. TTULO DO SITE
<html>
<h1>Aqui ficar o ttulo </h1>
<head>
<title>Meu website</title> <h2>Aqui ficar o ttulo </h2>
</head>
<body> <h3>Aqui ficar o ttulo </h3>
<h1>Um cabealho</h1>
</body> <h4>Aqui ficar o ttulo </h4>
</html> <h5>Aqui ficar o ttulo </h5>
<html>
<head>
<title>Meu website</title>
</head>
<body>
<h1>Um cabealho</h1>
<p>texto, texto texto, texto</p>
<h2>Subttulo</h2>
<p>texto, texto texto, texto</p>
</body>
</html>
Para colocarmos um texto em negrito devemos adicionar entre a tags <b> e </b>.
6. Texto em Itlico
Para colocarmos um texto em negrito devemos adicionar entre a tags <i> e </i>.
Para fazermos textos usando letras menores podemos usar a tag <small></small>.
Sim voc pode usar quantas tags queira, desde de que as aninhe
convenientemente. Veja como fazer isto no exemplo abaixo:
E no assim:
<b><i>Texto em negrito e itlico.</b></i>
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>
<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.
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:#ff0000;">
</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?
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).
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.
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:
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:
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).
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:
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>
Cabealho 1
Cabealho 2
Par criar links voc sempre usa o atributo href. Adicionalmente voc pode usar um title
(ttulo) para seu link:
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 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.
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.
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">
<a href="http://www.html.com.br">
<img src="caixa.png"></a>
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:
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:
Coloque o ponteiro do mouse sobre a imagem, sem clicar e aparecer uma caixa pop-
up com o texto "Aprenda HTML no site HTML.net".
Dois outros atributos importantes so width e height:
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:
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
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 1</td>
<td>Clula 2</td>
</tr>
<tr>
<td>Clula 3</td>
<td>Clula 4</td>
</tr>
</table>
Clula 1 Clula 2
Clula 3 Clula 4
Este com certeza o cdigo mais complicado at agora. Vamos analisar isto por partes
e explicar as diferentes tags:
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 1</td>
<td>Clula 2</td>
<td>Clula 3</td>
<td>Clula 4</td>
</tr>
<tr>
<td>Clula 5</td>
<td>Clula 6</td>
<td>Clula 7</td>
<td>Clula 8</td>
</tr>
<tr>
<td>Clula 9</td>
<td>Clula 10</td>
<td>Clula 11</td>
<td>Clula 12</td>
</tr>
</table>
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>
Tal como fizemos com as imagens, podemos definir width - largura - em pixels, para
uma tabela - ou alternativamente em percentagem da tela. Veja abaixo:
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:
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.
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>
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 mostr-
las para o mundo todo.
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 nome do servidor FTP (por exemplo:
ftp.br.geocities.com.br), o seu nome de usurio (por exemplo:
seunome@yahoo.com.br) e sua senha.
11. Webstandards e validao
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).
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.
<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.
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.
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:
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 font-size). 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
<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>
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:
Alm de cores, tipos de fontes, etc., CSS pode ser usado para controlar a
configurao e a apresentao da pgina (margens, flutuaes, alinhamentos,
larguras, alturas, etc.) Controlando os diferentes elementos com CSS voc ser capaz
de criar layouts elegantes e precisos.
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...</p>
Ser renderizado no navegador assim:
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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.
Suponha que desejamos uma cor de fundo vermelha para a pgina web:
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:
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.
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
<html> conforme mostrado a seguir:
<head>
<title>Exemplo</title>
</head>
<body style="background-color: #FF0000;">
Uma outra maneira de aplicar CSS e pelo uso da tag <style> do HTML. Como mostrado
a seguir:
<html>
<head>
<title>Exemplo</title>
<style type="text/css">
</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:
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>
...
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 trocando-
se 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;
}
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.
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: #ff0000;
}
As cores podem ser definidas pelo seu valor hexadecimal como no exemplo acima
(#ff0000), com uso do nome da cor ("red") ou ainda pelo seu valor rgb
(rgb(255,0,0)).
A propriedade 'background-color'
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]
body {
background-color: #FFCC66;
background-image: url("imagem.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
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.
Por exemplo, o cdigo mostrado a seguir para que a imagem no se repita na tela:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Image de fundo fixa [background-attachment]
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.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
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.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Compilando [background]
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
Usando background voc consegue o mesmo resultado, abreviando como mostrado
abaixo:
background-colo
background-image
background-repeat
background-attachment
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:
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.
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:
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 sans-serif.
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.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
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]
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;}
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;
}
p{
font: italic bold 30px arial, sans-serif;
}
font-style
font-variant
font-weight
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:
th {
text-align: right;
}
td {
text-align: center;
}
p{
text-align: justify;
}
Decorao de textos [text-decoration]
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
h1 {
letter-spacing: 6px;
p{
letter-spacing: 3px;
Transformao de textos [text-transform]
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
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 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
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?
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;
}
Pseudo-classe: link
a:link {
color: green;
}
Pseudo-classe: visited
Pseudo-classe: active
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.
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;
font-weight:bold;
color:red;
}
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Exemplo 2: Removendo sublinhado dos links
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;
}
a:link {
color: blue;
text-decoration:none;
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
7. Identificando e agrupando elementos (classes e id)
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.
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:
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.
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
<h1>Captulo 1</h1>
...
<h2>Captulo 1.1</h2>
...
<h2>Captulo 1.2</h2>
...
<h1>Captulo 2</h1>
...
<h2>Captulo 2.1</h2>
...
<h3>Captulo 2.1.2</h3>
...
#c1-2 {
color: red;
}
Nesta lio veremos com detalhes o uso dos elementos HTML <span> e <div> no que
se refere a sua vital importncia para as CSS.
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>
<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>
#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:
<h1>Article 1:</h1>
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.
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.
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 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 {
margin: 100px 40px 10px 70px;
}
p{
margin: 5px 50px 5px 50px;
}
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.
h1 {
background: yellow;
}
h2 {
background: orange;
}
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 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:
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.
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p{
border-width: 1px;
border-style: dashed;
border-color: blue;
}
ul {
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-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-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;
border-style: solid;
border-color: blue;
}
p{
border: 1px solid blue;
}
12. Altura e largura
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
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)
Se desejamos que um texto seja posicionado em volta de uma figura como mostrado
abaixo, basta flutuarmos a imagem:
textoxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxtexto
<div id="picture">
<img src="bandeiradobrasil.jpg" alt="Bandeira do Brasil">
</div>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,
xxxxxxxxxxxxxxxxxxxxxxxxx...</p>
Para conseguir o efeito mostrado, basta definir uma largura para o box que o contm
e declarar para ele float: left;
#picture {
float:left;
width: 100px;
}
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>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</p>
</div>
<div id="column3">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</p>
</div>
A seguir definimos a largura de cada coluna, por exemplo 33%, e declaramos float:
left; para cada uma das colunas:
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}
float pode ser declarado left, right ou none.
A propriedade clear
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 flutuados
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">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,
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 {
float:left;
width: 100px;
}
.floatstop {
clear:both;
}
14. Posicionando elementos
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;
}
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
Posicionamento relativo
#bola1 {
position:relative;
left: 350px;
bottom: 150px;
}
#bola2 {
position:relative;
left: 150px;
bottom: 500px;
}
#bola3 {
position:relative;
left: 50px;
bottom: 700px;
}
15. Usando z-index (Layers)
Para fazer isto definimos para cada elemento um nmero ndice (z-index). O
comportamento que elementos com nmero ndice maior se sobrepem queles
com menor nmero.
Vamos supor um royal flush no jogo de poker. As cartas podem ser apresentadas
como se cada uma delas tivesse um z-index:
#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;
}
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,
Meu primeiro conselho, nesse caso, que voc, se no trabalha com XML, deixe
XHTML bem simples, mas simplesmente porque voc pode obter benefcios muito
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
com XML. E com a poderosa linguagem XSLT voc pode muito facilmente oferecer
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/xhtml1-strict.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/xhtml1-transitional.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/xhtml1-frameset.dtd>
<!DOCTYPE html
PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
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.
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.
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 />
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>
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.