Apostila HTML,XHTML E CSS.pdf

7/22/2019 Apostila HTML,XHTML E CSS.pdf

1/89

aPOstiLA DE

html, xhtml e cSs


2/89

ndiceHTML

1.Introduo ao HTML __________________________________________pgina 042.O que o HTML _____________________________________________pgina 05

3.O que so tags HTML _________________________________________pgina 054.Iniciando com HTML _________________________________________pgina 105.Mais tags HTML _____________________________________________pgina 126.Atributos __________________________________________________pgina 147.Links _____________________________________________________pgina 188.Imagens __________________________________________________pgina 229.Tabelas ___________________________________________________pgina 26

10.Mais tabelas ______________________________________________pgina 2812.Uploading do seu site ______________________________________pgina 29

CSS

1.Introduo as CSS____________________________________________pgina 332.Como funciona as CSS ________________________________________pgina 373. Cores e fundos _____________________________________________pgina 414. FONTES __________________________________________________pgina 485. Textos ___________________________________________________pgina 536. Links ____________________________________________________pgina 567. Identificando e agrupando elementos (classes e id) ______________pgina 608. Agrupando elementos (span e div) ____________________________pgina 679.Box Model_________________________________________________pgina 7210. Margin e padding ________________________________________pgina 7211. Bordas _________________________________________________pgina 7512. Altura e largura __________________________________________pgina 76

13. Flutuando elementos (floats) _______________________________pgina 7914. Posicionando elementos ___________________________________pgina 8315. Usando z-index (Layers)___________________________________pgina 84

XHTML

Introduo ao XHTML ___________________________________pgina 86Escrevendo um XHTML vlido _____________________________pgina 87


3/89


4/89

Intro duo

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 possvelmontar 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.


5/89

1. O que so tags HTML?AS TAGS HTML A ESTRUTURA ONDE SER MONTADA NOSSAS PGINAS HTML. ASTAGS SO RESPONSVEIS PELO NAVEGADOR INTERPRETAR O QUE ESTO ENTREELAS. SEM ELAS NO SERIA POSSVEL INTERPRETAR O SEU SITE.

2. Vamo s ver as tags principais para a c nstruo de umapgina HTML.

1.ESTRUTURA BSICA. a tag de abertura do html.

cabealho da pgina. onde ficam informaes adicionais.

tag de fechamento do cabealho.

a tag de abertura do ttulo da janela.

tag de fechamento do ttulo da janela.

corpo da pgina. aqui ficar a parte principal do seu site.

tag de fechamento do corpo da pgina.

tag de fechamento do html.


6/89

3.INICIANDO C M O HTML

. TTULO NA JANELA DO SITE.A tag utilizada para o ttulo da janela o .

Meu website

. TTULO DO SITEtag utilizada para o ttulo a ao .

Meu website

Um cabealho

Aqui ficar o ttulo da janela

Aqui ficar o ttulo

Aqui ficar o ttulo

Aqui ficar o ttulo

Aqui ficar o ttulo

Aqui ficar o ttulo

Aqui ficar o ttulo

*O tamanho do ttulo pode ser definido por suastags de h1 a h6, sendo que quanto maior o valorda tag menor ser o tamanho do texto.


7/89

3.SUBTTULO DO SITE

A tag utilizada para o subttulo a ao .

Meu websiteUm cabealhoSubttulo

4.TEXTO PARGRAFO NO SITE

A tag para o texto pargrafo o

.

Meu websiteUm cabealho

texto, texto texto, texto
Subttulo
texto, texto texto, texto

Aqui ficar o subttulo Aqui ficar o subttulo

Aqui ficar o subttulo



Aqui ficar o subttulo *O tamanho do subttulo, pode ser definidoassim como no ttulo.

Aqui ficar o texto pargrafo

No exemplo foi colocado um texto embaixo do ttulo e em baixo do subttulo.

8/89

5.Texto em negritoPara colocarmos um texto em negrito devemos adicionar entre a tags e .

Ser renderizado no navegador assim:

6.Texto em ItlicoPara colocarmos um texto em negrito devemos adicionar entre a tags e .


7.Texto com letras menoresPara fazermos textos usando letras menores podemos usar a tag .


Este texto deve ser negrito.

Este texto deve ser itlico.

Este texto deve ser com letras em tamanho small

Este texto deve ser negrito.

Este texto deve ser com letras em tamanho small.

9/89

8. Posso usar vrias tags simultaneamente?Sim voc pode usar quantas tags queira, desde de que as aninheconvenientemente. Veja como fazer isto no exemplo abaixo:

Para escrever um texto em negrito e itlico faa como mostrado a seguir:

E no assim:

Observe que no primeiro exemplo a primeira tag de abertura corresponde a

ltima tag de fechamento , e o aninhamento est certo. Isto evita confuso paraquem escreve o cdigo e para o navegador que l o cdigo. As ltimas tags aserem abertas tem que ser as primeiras a serem fechadas, e as primeiras aserem abertas tero de ser as ltimas a serem fechadas.

Texto em ne rito e itlico.

Texto em ne rito e itlico.


10/89

4. MAIS TAGS!

9. Existem tags que so abertas e fechadas em nica tag. Estas tags socomandos isolados, ou seja, no contm nenhum texto dentro delas para poderfuncionar. Um exemplo a tag
que serve para criar uma quebra de linha:


Notar que a tag escrita como se fosse uma mistura de tag de abertura e defechamento com uma barra "/" no final:
. A princpio podemos escrevertambm
(sem contedo), mas para que complicar?

Outra tag de comando que serve para definir uma linha horizontal ("hr" vem

"horizontal rule" - rgua horizontal ):


10. Lista


Um texto
e mais texto em nova linha

Um textoe mais texto em nova linha

Um item de listaOutro item de lista

Um item de listaOutro item de lista


11/89

11. Lista ordenada:


Tente voc mesmo!

Primeiro item da listaSegundo item da lista

1.Primeiro item da lista2.Segundo item da lista

ItlicoTexto tamanho small
Pula linha Linha HorizontalIndentaoListaLista ordenada

Item de lista


12/89

5. ATRIBUTOSO que atributo?

Como voc deve estar lembrado, uma tag um comando para o navegador (porexemplo,
um comando para mudar de linha). Em algumas tags voc podeser 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 entreaspas so declaradas as informaes do atributo. As informaes quando mais deuma, devem ser separadas por ponto e vrgula, tudo conforme mostrado no exemploacima. Adiante voltaremos a este assunto.

Como isto?

Existem vrios atributos. O primeiro que voc aprender o atributo style. Com oatributo style voc pode adicionar estilizao e layout ao seu website. Porexemplo, uma cor de fundo:

O cdigo acima renderiza uma pgina com cor de fundo vermelha. Experimente vocmesmo, construa uma pgina vermelha. A seguir explicaremos como funcionam ascores.

Notar que algumas tags e atributos usam nomes do idioma ingls dos E.U.A. muitoimportante que voc use os nomes exatamente como mostrados neste tutorial - sevoc 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 doatributo.

HTML (Hyper Text Markup Language)


13/89

Como a pgina ficou vermelha?

No exemplo acima ns usamos o cdigo "#ff0000" para fazer a pgina na corvermelha. 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 oscdigos hexadecimais para cada cor.

Um cdigo hexadecimal para cores formado por um sinal # seguido de seis dgitose/ou letras. Existe mais de 1000 cdigos HEX e no fcil decorar o cdigo paratodas 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:

Quais tags podem usar atributos?

Atributos podem ser aplicados maioria das tags.

Voc normalmente usar atributos com mais freqncia em algumas tags, tais comoa tag body e raramente usar em outras, como por exemplo, a tag br que umcomando para pular de linha e no precisa de nenhuma informao adicional.

Assim como existem muitas tags, tambm existem muitos atributos. Alguns atributosso empregados em tags especficas enquanto outros servem para vrias tags. E

vice-versa: algumas tags podem conter somente um tipo de atributo, enquantooutras podem conter vrios tipos.

Isto pode parecer um pouco confuso, mas medida que voc for praticando vaiconstatar que tudo fcil e lgico, bem como vai verificar as inmeras possibilidadesque os atributos oferecem.

Ento, quais so as partes que constituem uma tag?

A constituio bsica de uma tag denominada elemento (por exemplo em

). Assim, uma tag constituida de um elemento (por exemplo

), ou por umelemento e um ou mais atributos (por exemplo

).


14/89

6. LinksComo 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: umatag. Uma pequena tag com um elemento e um atributo suficiente paravoc construir links para onde quiser. A seguir um exemplo de link para o siteHTML.net:

Ser renderizado assim no navegador:

O elemento a refere-se a "anchor" - ncora . O atribuito href abreviao para"hypertext reference" - referncia a hypertexto - e especifica o destino do link - quenormalmente um endereo na Internet ou um arquivo.

No exemplo acima o atributo href tem o valor "http://www.html.net", que oendereo completo do site HTML.net e chamado de URL (Uniform ResourceLocator). Notar que "http://" deve sempre ser incluido nas URLs. A frase "Aqui entrao nome do link" o texto mostrado no navegador como link. Lembre-se de fechar atag com um .

Como so os links entre minhas prprias pginas?

Se voc quer construir links entre pginas de um mesmo website voc no precisaescrever o endereo completo de cada pgina (URL). Por exemplo, se voc tem duaspginas (vamos cham-las de pagina1.htm e pagina2.htm) e salvou as duas em ummesmo diretrio voc constri um link de uma para a outra usando somente o nome doarquivo no link. Nestas condies, um link da pgina1.htm para a pagina2.htm comomostrado abaixo:

Aqui entra o nome do link

Aqui entra o nome do link

Aqui um link para a pagina 2


15/89

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

Por outro lado, um link da pagina2 no "subdiretorio" para a pagina1 como mostrado a

seguir:

"../" aponta para o diretrio a um nvel acima do arquivo onde foi feito o link. Seguindoo 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 decontedos ou ndice com links para cada um dos captulos em uma pgina. Tudo o quevoc 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 "#" noatributo do link. O smbolo "#" informa ao navegador para ficar na mesma pgina queest. O smbolo "#" deve ser seguido pelo valor atribuido a id para onde o link vai. Porexemplo:



Cabe alho 1

Link para o cabealho 1


16/89

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

Link para cabealho 1


Cabealho 1

Texto texto texto texto
Cabealho 2



Cabealho 1


Cabealho 2



17/89

Links para um endereo de email


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 padrodo 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:


O atributo title usado para fornecer uma breve descrio do link. Se voc - semclicar no link - colocar o cursor do mouse sobre o link, vai aparecer o texto"Visite o site HTML.net e aprenda HTML".

Enviar e-mail para nobody em HTML.net

Enviar e-mail para nobody em HTML.net

HTML.net

HTML.net


18/89

7.ImagensO que voc acha de colocar uma imagem no centro da sua pgina?

Tudo o que voc precisa da nossa conhecida tag.


O que voc tem a fazer dizer ao navegador que quer inserir uma imagem (img) edepois informar onde a imagem esta localizada (src, abreviatura para "source" - localde armazenagem ).

Notar que a tag imagem do tipo comando isolado, isto , uma s tag de abertura efechamento. Semelhante a tag
e que no precisa de um texto inseridonela.

"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 umaimagem. 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 queimagens JPEG so melhores otimizadas para imagens complexas. Quanto maior acompresso tanto menor o tamanho do arquivo e tanto mais rpido a pgina


19/89

Tradicionalmente os formatos GIF e JPEG tem sido os mais empregados, masultimamente 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 eefetiva 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 paredepara a sua pgina por exemplo. (No final da apostila vou ensinar como faz multiplicarum plano de fundo, de forma que ele cubra com as mesmas imagens todo o fundo doseu website). Um programa de edio de imagens a ferramenta essencialpara 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 atmesmo em outros websites:

Segundo, imagens podem ser links:



20/89

Existem outros atributos que eu deva conhecer?

Voc sempre ter que usar o atributosrc, que diz ao navegador onde a imagem estlocalizada. Alm dele existem alguns outros atributos que podem ser bastante teisquando voc insere imagens em uma pgina.

O atributo alt usado para fornecer uma descrio textual alternativa da imagemcaso 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 quandoo usurio passa o mouse sobre a imagem. Tenha em mente que a finalidade principaldo atributo alt a de fornecer uma alternativa textual para imagem. O atributo alt nodeve ser usado para criar mensagens pop-up uma vez que os leitores de tela passarouma 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".


21/89

Dois outros atributos importantes so width e height:

Os atributos width e height podem ser usados para definir respectivamente, a largura ea altura da imagem. O valor adotado para medidas o pixel. Pixel a unidade demedida usada para medir a resoluo da tela. (As resolues de tela mais comuns sode 800x600 e 1024x768 pixels, apesar das resolues 800x600 estarem ficando paratrs e sendo cada vez mais usada as de 1024x768 e 1280x1024 ou superior). Aocontrrio de centmetros, pixel uma unidade de medida relativa que depende daresoluo da tela. Usurios com grande resoluo de tela tero 25 pixels em 1centmetro de tela enquanto aqueles com baixa resoluo de tela tero os mesmos 25pixels em 1,5 cm de tela.

Se no forem definidos os valores para width e height, a imagem ser inserida com seutamanho 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 tivessesuas dimenses reais, mesmo que voc diminua seu tamanho com uso destes atributos.Assim, voc no deve diminuir o tamanho das imagens com o uso dosatributos width e height. Se voc precisa diminuir a imagem diminua suasdimenses reais em um editor de imagem para tornar suas pginas mais leves e maisrpidas.

Dito isto, acrescentamos que sempre uma boa idia definir os atributos width e heightpara 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.


22/89

8. TabelasTabelas 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 passoa passo a explicao, ver que bem fcil.


Qual a diferena entre as tags e ?

Este com certeza o cdigo mais complicado at agora. Vamos analisar isto por partese explicar as diferentes tags:

3 tags bsicas so usadas para inserir tabelas:

comea e termina uma tabela. significa "table row" - linha de tabela - comea e termina e uma linhahorizontal da tabela.

significa "table data" - dados da tabela. comea e termina cada clulacontida nas linhas da tabela.

Clula 1Clula 2

Clula 3Clula 4


23/89

Eis o acontece no exemplo dado acima: a tabela comea com , segue-se uma, que indica o incio de uma nova linha. Duas clulas so ento inseridas na linha:Clula 1 e Clula 2. A linha termina com e uma novalinha comea imediatamente a seguir. A nova linha tambm contm duas clulas.A tabela termina com .

Para esclarecer: linhas so horizontais e colunas so verticais, ambascontendo 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 conterum nmero ilimitado de linhas e colunas.

Outro exemplo:


Clula 1Clula 2

Clula 3Clula 4Clula 5Clula 6Clula 7Clula 8

Clula 9Clula 10Clula 11Clula 12

Clula 1 Clula 2 Clula 3 Clula 4Clula 5 Clula 6 Clula 7 Clula 8Clula 9 Clula 10 Clula 11 Clula 12


24/89

Existem atributos?

Claro! Por exemplo, o atributo border que usado para definir a espessura de umaborda em volta da tabela:


A borda da tabela especificada em pixels.

Tal como fizemos com as imagens, podemos definir width - largura - em pixels, parauma tabela - ou alternativamente em percentagem da tela. Veja abaixo:

Este exemplo renderiza no navegador uma tabela com largura igual a 30% da largurada tela.

Clula 1Clula 2

Clula 3Clula 4


25/89

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 oude 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).

O que posso inserir em tabelas?

Teoricamente voc pode inserir qualquer coisa em uma tabela: texto, links eimagens... MAS, tabelas tem por objetivo apresentar dados tabulares (isto ,dados que por sua natureza devam ser apresentados em linhas e colunas) entoabstenha-se de colocar coisas dentro de tabela simplesmente porque voc deseja queelas estejam prximas umas s outras.

Nos primrdios da Internet - isto , h poucos anos atrs - tabelas eram usadas comoferramenta para construir layout. Se voc quer controlar a apresentao de textos e

imagens, existe uma maneira bem mais racional (dica:CSS ou tableless). Veremos issomais a frente em CSS e tableless.

Clula 1


26/89

9. Mais TabelasNesta 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 paraindicar quantas colunas estaro contidas em uma clula.


Clula 1Clula 2Clula 3Clula 4


27/89

E o rowspan?

Como voc j deve ter concluido,rowspan especifica quantas linhas estarocontidas em uma clula:


No exemplo acima rowspan definido em "3" na Clula 1. Isto especifica que umaclula deve conter 3 linhas. Clula 1 e Clula 2 esto na mesma linha, enquanto Clula3 e Clula 4 formam duas linhas independentes.

Isso no difcil, confuso. bom desenhar a tabela em uma folha de papel antes decomear a codificao HTML.

Clula 1Clula 2

Clula 3

Clula 4


28/89

10. Uploading do seu siteAt agora somente voc conseguiu visualizar suas pginas. Chegou a hora de mostr-las para o mundo todo.

Para publicar a sua pgina na Web voc precisar apenas de um espao em umservidor. Para facilitar o seu upload voc poder baixar um programa FTP(opcional) emqualquer site de download de programas. Ele faz o upload das pginas sem precisaracessar toda vez o site do servidor. Voc acessar diretamente o servidor do seucomputador.

Na internet voc j deve ter visto vrios servidores gratuitos para hospedagem. Seuendereo 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 etcso 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 aqueleendereo enorme.

Depois de cadastrado, para acessar o seu endereo FTP, de um programa FTP, vocprecisar de apenas 3 coisas. O nome do servidor FTP (por exemplo:ftp.br.geocities.com.br), o seu nome de usurio (por exemplo:[email protected]) e sua senha.


29/89

11. Webstandards e validaoNesta 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 devrias maneiras. Podemos dizer que HTML tem muitos dialetos. Esta a razoporqu alguns websites so apresentados de formas diversas em diferentesnavegadores.

Desde o aparecimento da Internet tem sido feitas vrias tentativas para se normatizar o

HTML notadamente atravs do World Wide Web Consortium (W3C) fundado porTim Berners-Lee (o grande inventor do HTML).

No passado - quando voc tinha que comprar um navegador - Netscape dominava omercado de navegadores. quela poca as normas para o HTML estavam nas suasverses 2.0 e 3.2. Mas pelo fato de dominar 90% do mercado a Netscape no teria, eno teve que se preocupar muito com normas. Pelo contrrio, a Netscape inventavaseus prprios elementos de marcao que no funcionavam em outros navegadores.

Por muitos anos a Microsoft ignorou completamente a Internet. Em determinadomomento, resolveu competir com a Netscape e lanou seu navegador prprio. Aprimeira verso do navegador da Microsoft, o Internet Explorer, no era melhor do queo Netscape no suporte s normas do HTML. Mas, a Microsoft resolveu distribuir seunavegador gratuitamente junto com o Sistema Operacional Windows e o InternetExplorer 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 cadavez 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 desatualizadaverso 4.


30/89

Quando voc codifica HTML de acordo com as normas do W3C, voc estconstruindo um website para ser visualizado em todos os navegadores, nos agora mas tambm no futuro. E felizmente, tudo o que voc aprendeu nestetutorial 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 navegadorqual o "dialeto" do HTML e no seu caso voc aprendeu XHTML. Para informar aonavegador, voc usa o Document Type Definition. O Document Type Definition deve serescrito sempre no topo do documento:

Alm do Document Type Definition (escrito na primeira linha no exemplo acima), queinforma ao navegador que voc est codificando XHTML, voc precisa ainda adicionarinformao extra na tag html, usando os atributosxmlns e lang.

xmlns abreviao de "XML-Name-Space" e deve ter sempre o valorhttp://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) odocumento escrito. As abreviaturas para as lnguas existentes no mundo todo, estonas ISO 639 standard . No exemplo acima a lngua definida no atributo o portugusdo Brasil ("pt-br").

Ttulo

texto texto


31/89

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 ovalidador gratuito do W3C.

Para testar o validador faa o seguinte: crie uma pgina e publique na Internet. Aseguir 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 umamensagem de congratulaes. Se no, ser apresentada uma lista de erros, informandoo qu est errado e onde. Cometa alguns erros propositais no seu cdigo para verificaro que acontece.

O validador no til somente no encontro de erros. Alguns navegadores tentaminterpretar os erros cometidos pelos desenvolvedores e consertar o cdigo mostrando a

pgina corretamente. Em navegadores assim voc nunca encontrar erros no prprionavegador. J outros navegadores no aceitam o erro e apresentam a pgina arruinadaou mesmo nem apresentam. O validador ento ajuda voc a encontrar erros que vocno tenha nem idia de que existiam

Sempre valide suas pginas, para ter certeza que elas sero mostradas corretamenteem todos os navegadores.


32/89


33/89

1.Introduo ao CSSCSS 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 idiacomo o CSS prtico. Podemos dizer que o CSS a melhor metade do HTML.Codificando, no h melhor parceria: HTML responsvel pelo trabalho pesado (aestrutura), enquanto CSS d o toque de elegncia (layout).

CSS pode ser adicionado com uso do atributo style. Por exemplo, voc podedefinir 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 apropriedade font-family) e o tamanho da fonte (com a propriedade font-size). Notarque no ltimo pargrafo do exemplo definimos tanto o tipo como o tamanho da fonteseparados por um ponto e vrgula.

Este pargrafo em tamanho de fonte igual a20px

Este pargrafo em fonte Courier

Este pargrafo em fonteCambria e tamanho 20px

Este pargrafo em tamanho de fonte igual a 20px

Est e par gr af o em f ont e Cour i er


34/89

Est parecendo que h uma grande quantidade de trabalho a executar

Uma das funcionalidades mais inteligentes das CSS a possibilidade decontrolar 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 emuma pgina:

No exemplo acima inserimos as CSS na seo head do documento, assim elase aplica pgina inteira. Para fazer isto use a tag queinforma 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 dospargrafos sero em fonte Times New Roman tamanho 8.

Uma outra opo a de digitar as CSS em um documento separado. Com as CSS emum documento separado voc pode gerenciar o layout de muitas pginas aomesmo tempo. Muito inteligente, pois voc pode mudar de uma s vez, o tipo ou otamanho da fonte de todo o site, quer ele tenha centenas ou milhares de pginas. Nsno nos aprofundaremos em CSS agora, mas voc pode aprender tudo, no futuro, emnosso tutorial CSS.

Minha primeira pgina CSS

h1 {font-size: 30px; font-family: arial}h2 {font-size: 15px; font-family: courier}

p {font-size: 8px; font-family: times new roman}Minha primeira pgina CSSBem vindo minha primeira pgina CSS

Aqui voc ver como funciona CSS


35/89

O que mais posso fazer com CSS?

CSS faz muito mais do que definir tipos e tamanhos de fontes. Por exemplo, vocpode 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 capazde criar layouts elegantes e precisos.


Com a propriedade float um elemento poder "flutuar" esquerda ou direita. O

exemplo seguinte ilustra este princpio:

Texto verde

Cabealho com fundo azul

Eu amo CSS

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX,XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...


36/89


No exemplo mostrado, um elemento (a imagem) flutua esquerda e o outro elemento(o texto) preenche o espao deixado direita.

Com a propriedade position, voc pode posicionar um elemento em qualquer lugar dapgina, com preciso:

No exemplo mostrado a imagem foi posicionada a 50 pixels da borda inferior e a 10pixels 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 paraestudar. Mas no nada difcil, vamos ver nas prximas pginas o que vocprecisa saber sobre as CSS.


37/89

2. Como funciona as CSSNesta 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 documentoHTML.

Muitas das propriedades usadas em Cascading Style Sheets (CSS) so semelhantesquelas do HTML. Se voc est acostumado a usar HTML para layout ir reconhecermuitos 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:

Com CSS o mesmo resultado ser obtido assim:

Como voc pode notar os cdigos HTML e CSS so mais ou menos parecidos. Oexemplo 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 do fundo por exemplo:vermelha(#FF0000)

body {background-color: #FF0000;}


38/89

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 deaplicao esto exemplificados a seguir. Recomendo que voc foque no terceiro

mtodo, ou seja o mtodo externo. O mtodo externo alm de ser menos confusopara trabalhar por no estar junto com o HTML ele no ficar amostra sealgum olhar o cdigo fonte da sua pgina pelo browser, pois estarescondido 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 baseo exemplo mostrado anteriormente a cor vermelha para o fundo da pgina pode ser

aplicada conforme mostrado a seguir:

Mtodo 2: Interno (a tag style)

Uma outra maneira de aplicar CSS e pelo uso da tag do HTML. Como mostradoa seguir:

Exemplo

Esta uma pgina com fundo vermelho

Exemplo

body {background-color: #FF0000;}

Esta uma pgina com fundo vermelho


39/89

Mtodo 3: Externo (link para uma folha de estilos)

O mtodo recomendado o de lincar para uma folha de estilos externa. Usaremos estemtodo 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 tantono servidor como no disco rgido.

Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de estilo.csse est localizada no diretrio estilo (o que no necessrio, colocar em pastaseparada 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 folhade estilos (estilo.css). O link criado em uma simples linha de cdigo HTML comomostrado a seguir:

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 e . Conforme mostrado abaixo:

Este link informa ao navegador para usar o arquivo CSS na renderizao eapresentao do layout do documento HTML.A coisa realmente inteligente disto que vrios documentos HTML podem lincar parauma mesma folha de estilos. Em outras palavras isto significa que um simples arquivoser 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 evitaque voc edite manualmente uma a uma as pginas para fazer a mudana nos 100documentos HTML. Usando CSS a mudana se far em uns poucos segundos trocando-se a cor em uma folha de estilos central.

Meu documento

...


40/89

VAMO S PRATICAR!

Abra o bloco de notas (ou equivalente em outro sistema operacional) e crie doisarquivos um arquivo HTML e um arquivo CSS com os seguintes contedos:

Index.html

estilo.css

Salve os dois arquivos no mesmo diretrio. Lembre-se de salvar os arquivos com aextenso 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!

Meu documento

Minha primeira folha de estilos

body {background-color: #FF0000;

}


41/89

3. Cores e fundosVoc vai aprender agora como aplicar cores de primeiro plano e cores de fundo no seuwebsite. Abordaremos ainda os mtodos avanados de controle e posicionamento deimagens 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 nodocumento sejam na cor vermelha. O elemento HTML que marca tais cabealhos oelemento . O cdigo a seguir define todos os na cor vermelha.

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'

A propriedade background-color define a cor do fundo de um elemento.

O elemento contm todo o contedo de um documento HTML. Assim, paramudar a cor de fundo da pgina, devemos aplicar a propriedade background-color aoelemento .

Voc pode aplicar cores de fundo para outros elementos, inclusive para cabealhos etextos. No exemplo abaixo foram aplicadas diferentes cores de fundo para os

elementos e .

Obs.: Note que foram aplicadas duas propriedades ao elemento separadas porum ponto e vrgula.

h1 { color: #ff0000;}

body {background-color: #FFCC66;

}

h1 {color: #990000;background-color: #FC9804;

}


42/89

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 propriedadebackground-image ao elemento e especificar o caminho para onde est

gravada a imagem.

Obs.: Note como foi especificado o caminho para a imagem usandourl("imagem.gif"). Isto significa que a imagem est localizada no mesmo diretrioda 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 naInternet: url("http://www.html.net/imagem.gif").

body {background-color: #FFCC66;background-image: url("imagem.gif");

}


}


43/89

Imagem de fundo repetida [background-repeat]

No exemplo anterior voc observou que a imagem se repetiu tanto na vertical comona horizontal cobrindo toda a tela? A propriedade background-repeat controla ocomportamento de repetio da imagem de fundo.

A tabela a seguir mostra os quatro diferentes valores para background-repeat.

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;

}


}


44/89

Image de fundo fixa [background-attachment]

A propriedade background-attachment define se a imagem ser fixa ou se ir rolarjuntamente 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 background-attachment.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-color: #FFCC66;background-image: url("butterfly.gif");background-repeat: no-repeat;background-attachment: fixed;

}


}


45/89

Posio da imagem de fundo [background-position]

Por padro uma imagem de fundo posicionada no canto superior esquerdo da tela. Apropriedade background-position permite alterar este posicionamento padro e colocara imagem em qualquer lugar na tela.

Existem vrias maneiras de definir o posicionamento da imagem na tela definindovalores para background-position. Todas elas se utilizam de um sistema decoordenadas. Por exemplo, os valores '100px 200px' posiciona a imagem a 100px dotopo e a 200px do lado esquerdo da janela do navegador.

As coordenadas podem ser expressas em percentagem da largura da janeja, emunidades 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.


46/89

No exemplo de cdigo a seguir a imagem posicionada no canto inferior direito dapgina:

Compilando [background]

A propriedade background uma abreviao para todas as propriedades listadasanteriormente.

Com background voc declara vrias propriedades de modo abreviado, economizandodigitao e alguns bites, alm de tornar a folha de estilo mais fcil de se ler eentender.

Por exemplo, observe as cinco linhas a seguir:

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;}

background-color: #FFCC66;background-image: url("butterfly.gif");background-repeat: no-repeat;background-attachment: fixed;background-position: right bottom;}


47/89

Usando background voc consegue o mesmo resultado, abreviando como mostradoabaixo:

A declarao abreviada deve seguir a seguinte ordem:

background-colo

background-image

background-repeat

background-attachment

background-position

Se uma das propriedades no for declarada ela assume automaticamente o seu valordefault. Por exemplo, a propriedade background-attachment e background-positionno foram declaradas no cdigo mostrado a seguir:

As duas propriedades no declaradas assumiro o valor default que como voc j sabeso: a imagem rola na tela e ser posicionada no canto superior esquerdo (que so osvalores default para as propriedades no declaradas).

background: #FFCC66 url("imagem.gif") no-repeat fixed right bottom;

background: #FFCC66 url("imagem.gif") no-repeat;


48/89

4. FONTESEstudaremos as fontes e como aplic-las usando CSS. Veremos como criar situaespara que determinada fonte seja visualizada pelo usurio mesmo no estandoinstalada em seu sistema operacional.

F amlia de fontes [font-family]

A propriedade font-family usada para definir uma lista de fontes e sua prioridadepara apresentao de um elemento em uma pgina. Se a primeira fonte da lista noestiver instalada na mquina do usurio, dever ser usada a segunda e assim pordiante at ser encontrada uma fonte instalada.

Existem dois tipos de nomes para definir fontes: nomes para famlias de fontes enomes para famlias genricas. Os dois so explicados a seguir:

nome para famlias de fontesExemplos para este tipo (normalmente conhecidas como "font") so "Arial", "TimesNew Roman" ou "Tahoma".

nome para famlias genricas

Famlias genricas so fontes que pertencem a um grupo com aparncia uniforme. Umexemplo so as fontes sans-serif que englobam a coleo de fontes que "no tm p".


49/89

Ao listar fontes para seu website, comece com aquela preferida, seguindo-se algumasalternativas para ela. recomendvel encerrar a listagem das fontes com uma fontegenrica. Assim fazendo, em ltimo caso a pgina ser renderizada com fonte damesma famlia das que foram especificadas quando todas as demais estiveremindisponveis na mquina do usurio.

A seguir mostramos um exemplo de listagem de fontes:

Cabealhos sero renderizados com fonte "Arial". Se o usurio no tiver a fontArial instalada, ser usada a fonte "Verdana". Se ambas estiverem indisponveis namquina 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 osnomes.

Estilo da fonte [font-style]

A propriedade font-style define a escolha da fonte em normal, italic ou oblique. Noexemplo a seguir todos as cabealhos sero em itlico.

h1 {font-family: arial, verdana, sans-serif;}h2 {font-family: "Times New Roman", serif;}

h1 {font-family: arial, verdana, sans-serif;}h2 {font-family: "Times New Roman", serif; font-style: italic;}


50/89

F onte 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 tamanhosreduzidos. Confundiu? D uma olhada nos exemplos a seguir:

Se a propriedade font-variant for definida para small-caps e no estiver disponvel namquina do usurio, ser usada fonte em maiscula.

Peso da fonte [font-weight]

A propriedade font-weight define se a fonte ser o quo negrito. Uma fonte pode sernormal ou bold. Alguns navegadores suportam nmeros de 100-900 (em intervalosde 100 em 100) para definir o peso da fonte.

h1 {font-variant: small-caps;}h2 {font-variant: normal;}

p {font-family: arial, verdana, sans-serif;}td {font-family: arial, verdana, sans-serif; font-weight: bold;}


51/89

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 paradefinir o tamanho da fonte. Neste tutorial ns usaremos as unidades mais comuns e

apropriadas. Ver exemplos a seguir:

Existe uma diferena fundamental entre as quatro unidades adotadas no exemploacima. As unidades 'px' e 'pt' so absolutas, enquanto '%' e 'em' permitem aousurio ajustar o tamanho das fontes ao seu gosto e necessidade. Para fazer seusite acessvel a todos, voc dever usar unidades como '%' ou 'em'.

Abaixo uma figura mostrando como ajustar o tamanho das fontes no navegadorInternet Explorer. Tente voc mesmo este ajuste uma excelente funcionalidade donavegador, no mesmo?

h1 {font-size: 30px;}h2 {font-size: 12pt;}h3 {font-size: 120%;}p {font-size: 1em;}


52/89

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 paraum pargrafo

:

Usar a abreviao simplifica o cdigo como mostrado abaixo:

A ordem dos valores para font a mostrada a seguir :

font-style

font-variant

font-weight

font-size

font-family

p {font-style: italic;font-weight: bold;font-size: 30px;font-family: arial, sans-serif;

}

p {font: italic bold 30px arial, sans-serif;

}


53/89

5. TextosFormatar e estilizar textos um item chave para qualquer web designer. Nesta liovoc ser apresentado s interessantes oportunidades que as CSS proporcionam paraadicionar 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 umpargrafo. No exemplo a seguir um recuo de 30px aplicado todos os textosmarcados com

:

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 usadoem jornais e revistas.

No exemplo a seguir o texto contido na clula de cabealho alinhado direitae os contidos nas clulas de dados so centrados. E, os textos normais empargrafos so justificados:

p {text-indent: 30px;

}

th {text-align: right;

}

td {text-align: center;

}

p {text-align:justify;

}


54/89

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 umalinha sobre o texto, etc. No exemplo a seguir os cabealhos so sublinhados, oscabealhos levam um linha em cima e os cabealhos so cortados por

uma linha.

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

e de6px entre as letras do texto de um cabealho o cdigo a seguir dever serusado.

h1 {text-decoration: underline;

}

h2 {text-decoration: overline;

}h3 {

text-decoration: line-through;}

h1 {

letter-spacing: 6px;

}

p {

letter-spacing: 3px;


55/89

Transformao de textos [text-transform]

A propriedade text-transform controla a capitalizao (tornar maiscula) do texto.Voc pode escolher capitalize, uppercase ou lowercase independentemente decomo o texto foi escrito no cdigo HTML.

Como exemplo tomamos a palavra "cabealho" que pode ser apresentada ao usuriocomo "CABEALHO" ou "Cabealho". So quatro os valores possveis para text-transform:

capitalize

Capitaliza a primeira letra de cada palavra. Por exemplo: "john doe" transforma-separa "John Doe".

uppercase

Converte todas as letras para maiscula. Por exemplo: "john doe" transforma-separa"JOHN DOE".

lowercase

Converte todas as letras para minscula. Por exemplo: "JOHN DOE" transforma-separa"john doe".

noneSem trasformaes - o texto apresentado como foi escrito no cdigo HTML.

Para exemplificar vamos usar uma lista de nomes. Os nomes esto marcados com oelemento (item de lista). Vamos supor que desejamos os nomes capitalizados eos 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;

}


56/89

6. LinksVoc pode aplicar aos links tudo que aprendeu nas lies anteriores (mudar cores,fontes, sublinhados, etc). A novidade aqui que voc pode definir as propriedades demaneira 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 interessantesefeitos 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 eventosao definir uma propriedade de estilo para uma tag HTML.

Vamos ver um exemplo. Como voc j sabe, links so marcados no HTML com tags. Podemos ento usar a como um seletor CSS:

Um link pode ter diferentes estados. Por exemplo, pode ter sido visitado ou novisitado. Voc usar pseudo-classes para estilizar links visitados e no visitados.

Use as pseudo-classes a:link e a:visited para estilizar links no visitados e visitadosrespectivamente. 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 {color: blue;

}

a:link{color: blue;

}

a:visited {color: red;

}


57/89

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.

Pseudo-classe: visited

A pseudo-clases: visited usada para links visitados. No exemplo a seguir linksvisitados sero na cor amarela:

Pseudo-classe: active

A pseudo-classe :active usada para links ativos.

No exemplo a seguir links ativos tero seu fundo na cor vermelha:

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, podemosmudar a cor do link para laranja e o texto para itlico quando o ponteiro do mousepassa sobre ele, o cdigo CSS para estes efeitos o mostrado a seguir:

a:link{color: green;

}

a:visited {color: yellow;

}

a:active {background-color: red;

}

a:hover {color: orange;font-style: italic;

}


58/89

Exemplo 1: Efeito quando o ponteiro est sobre o link

comum a criao de efeitos diferentes quando o ponteiro est sobre o link. Veremosa 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 deum texto pode ser controlado pela propriedade letter-spacing. Isto pode ser aplicadoaos links para obter um efeito interessante:

Exemplo 1b: UPPERCASE e lowercase

Na lio anterior vimos a propriedade text-transform, para estilizar com letrasmaisculas e minsculas. Isto pode ser usado para estilizar links:

a:hover {letter-spacing: 10px;font-weight:bold;color:red;

}

a:hover {text-transform: uppercase;font-weight:bold;color:blue;background-color:yellow;

}


59/89

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 sublinhadodos links, pois isto poder reduzir signifcativamente a usabilidade do

website. As pessoas esto acostumadas com links na cor azul e sublinhados e sabemque 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 doscontedos do seu website.

Feita esta ressalva, muito fcil retirar o sublinhado dos links. Conforme explicado nalio 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 apropriedade text-decoration.

Alternativamante, voc pode definir text-decoration juntamente com outraspropriedades para as quatro pseudo-classes.

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;

}


60/89

7. Identificando e agrupando elementos (classes e id)Em alguns casos voc deseja aplicar estilos a um elemento ou grupo de elementos emparticular. Nesta lio veremos como usar class e id para estilizar elementos.

Como definir uma cor para um determinado cabealho, diferente da cor usada para osdemais cabealhos do website? Como agrupar links em diferentes categorias e estilizarcada 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 naproduo 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 nacor vermelha e os demais links na pgina permaneam na cor azul.

Uvas para vinho branco:
RieslingChardonnayPinot Blanc
Uvas para vinho tinto:
Cabernet SauvignonMerlotPinot Noir


61/89

Para conseguir isto, dividimos os links em duas categorias. Isto feito atribuindo umaclasse para cada link, usando o atributo class.

Vamos especificar esta classe no exemplo a seguir:

Agora podemos definir propriedades especficas para links pertencentes as classeswhitewine e redwine, respectivamente.

Como mostrado no exemplo acima, pode-se definir propriedades para estilizao dos

elementos pertencentes a uma determinada classe usando um .nomedaclasse nafolha de estilos do documento.

Uvas para vinho branco:
RieslingChardonnayPinot Blanc
Uvas para vinho tinto:
Cabernet SauvignonMerlotPinot Noir
a {color: blue;

}

a.whitewine {color: #FFBB00;

}

a.redwine {color: #800000;

}Cabernet SauvignonMerlotPinot Noir


62/89

Identificando um elemento com uso de id

Alm de agrupar elementos podemos querer atribuir identificao a um nicoelemento. Isto feito usando o atributo id.

O que h de especial no atributo id que no poder existir dois ou mais elementoscom a mesma id, ou seja em um documento apenas um e somente um elementopoder ter uma determinada id. Cada id nica. Para casos em que haja necessidadede mais de um elemento com a mesma identificao usamos o atributo class. A seguirum exemplo de possvel uso de id:

O exemplo acima simula os cabealhos de um documento estruturado em captulos epargrafos. comum atribuir uma id para cada captulo como mostrado a seguir:

Captulo 1...Captulo 1.1...Captulo 1.2...Captulo 2...Captulo 2.1...

Captulo 2.1.2...

Captulo 1...

Captulo 1.1...Captulo 1.2...Captulo 2...CCaptulo 2.1...Captulo 2.1.2

...


63/89

Vamos supor que o cabealho do captulo 1.2 deva ser na cor vermelha. Isto pode serfeito conforme mostrado na folha de estilo a seguir:

Como mostrado no exemplo acima, podemos definir propriedades para um elementoespecfico usando um seletor #id na folha de estilos para o documento.

#c1-2 {color: red;

}

64/89

8. Agrupando elementos (span e div)Os elementos e so usados para agrupar e estruturar um documento eso freqentemente usados em conjunto com os atributos class e id.

Nesta lio veremos com detalhes o uso dos elementos HTML e no quese refere a sua vital importncia para as CSS.

Agrupando com

Agrupando com

Agrupando com

O elemento um elemento neutro e que no adiciona qualquer tipo desemntica ao documento. Contudo, pode ser usado pelas CSS para adicionarefeitos visuais a partes especficas do texto no seu documento.

Um exemplo deste uso mostrado na citao abaixo:

Vamos supor que queremos enfatizar na cor vermelha os benefcios apontados nafrase. Para isto marcamos os benefcios com . A cada span atribumos umaclass, e estilizamos na folha de estilos:

A folha de estilos:

claro que voc pode usar id para estilizar o elemento . Mas, como voc deveestar lembrado, dever usar uma nica id para cada um os trs elementos ,conforme foi explicado na lio anterior.

< >Dormir cedo e acordar cedo faz o homemsaudvel rico e sbio.< >

Dormir cedo e acordar cedo faz o homemsaudvel,ricoe sbio.

span.beneficio {color:red;

}


65/89

Agrupando com

Enquanto usado dentro de um elemento nvel de bloco como vimos noexemplo anterior, usado para agrupar um ou mais elementos nvel de bloco.

Diferenas parte, o agrupamento com funciona mais ou menos da mesmamaneira. Vamos ver um exemplo tomando duas listas de presidentes dos EstadosUnidos agrupados segundo suas filiaes polticas:

E na folha de estilos, podemos agrupar a estilizao da mesma maneira como fizemosno exemplo acima:

Franklin D. RooseveltHarry S. Truman

John F. KennedyLyndon B. JohnsonJimmy CarterBill Clinton

Dwight D. EisenhowerRichard NixonGerald FordRonald ReaganGeorge BushGeorge W. Bush

#democrats {background:blue;

}

#republicans {background:red;

}


66/89

Nos exemplos mostrados acima usamos somente e para simplesestilizaes, tais como cores de textos e de fundos. Contudos estes dois elementospossibilitam estilizaes bem mais avanadas como veremos adiante nas lies destetutorial.


67/89

9.Box ModelO box model (modelo das caixas) em CSS, descreve os boxes (as caixas) geradaspelos elementos HTML. O box model, detalha ainda, as opes de ajuste de margens,bordas, padding e contedo para cada elemento. Abaixo apresentamos um diagramarepresentando a estrutura de construo do box model:

O box model em CSS

A ilustrao acima terica. Vamos explic-la na prtica tomando como base umcabealho e um texto. O HTML para nosso exemplo (o texto foi retirado da DeclaraoUniversal dos Direitos Humanos e est no original em ingls) o mostrado abaixo:

Article 1:

All human beings are born freeand equal in dignity and rights.They are endowed with reason and conscienceand should act towards one another in aspirit of brotherhood


68/89

Definindo estilos para cores e fontes o exemplo pode ser apresentado como a seguir:

O exemplo contm dois elementos: e

. O box model para os dois elementos mostrado a seguir:

Embora possa parecer um pouco complicado, a ilustrao mostra como cada um doselementos contido em um box (uma caixa). Boxes que podem ser ajustados econtrolados via CSS.


69/89

10. Margin e paddingNa lio anterior vimos o box model. Nesta lio veremos como controlar aapresentao 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 einferior). A margin a distncia entre os lados de elementos vizinhos (ou s bordas dodocumento). Veja o diagrama da lio anterior.

Vamos comear com um exemplo mostrando como definir margins para o documento,ou seja, para o elemento . A ilustrao a seguir mostra como sero as

margens da pgina.

As CSS so mostradas abaixo:

body {margin-top: 100px;margin-right: 40px;margin-bottom: 10px;margin-left: 70px;

}


70/89

Ou, adotando uma sintaxe mais elegante:

As margens para a maioria dos elementos pode ser definida conforme o exemploacima. Podemos ento, por exemplo, definir margens para todos os pargrafos

:

Definindo padding de um elemento

Padding pode tambm ser entendido como "enchimento". Isto faz sentido, porquepadding no computado na distncia entre elementos, padding define simplesmentea distncia entre a borda e o contedo do elemento.

Ilustramos o uso de padding atravs de um exemplo onde todos os cabealhos tmuma cor de fundo definida:

body {margin: 100px 40px 10px 70px;

}

body {margin: 100px 40px 10px 70px;

}

p {margin: 5px 50px 5px 50px;

}

h1 {background: yellow;

}

h2 {background: orange;

}


71/89

Definindo padding para os cabealhos, alteramos a quantidade de enchimentoexistente ao redor de cada um deles:

h1 {background: yellow;padding: 20px 20px 20px 80px;

}

h2 {background: orange;padding-left:120px;

}


72/89

11. BordasBordas podem ser usadas para muitas coisas, por exemplo, como elementodecorativo 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 assumiros valores thin, medium, e thick (fina, mdia e grossa), ou um valor numrico empixels. 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 expressosem cdigo ou nome de cores, por exemplo, "#123456", "rgb(123,123,123)"ou"yellow".


73/89

Tipos de bordas[border-style]

Existem vrios tipos de bordas disponveis para escolha. A seguir apresentamos 8 tiposdiferentes de bordas e como elas so renderizadas Internet Explorer 5.5. Todos osexemplos so mostrados na cor "gold" e com espessura "thick", mas voc pode usarqualquer cor e espessura ao seu gosto.

Os valores none ou hidden podem ser usados quando no se deseja a existncia debordas.

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;

}

Exemplos de definio de bordas

As trs propriedades explicadas acima podem ser definidasjuntas para cada elemento e resultam em diferentes bordas.Para exemplificar, foram estilizadas diferentes bordas para

os elementos , , e

. O resultado podeno ser uma obra prima, mas, ilustra bem algumas dasinmeras possibilidades de estilizao de bordas:


74/89

possvel ainda definir propriedades especialmente para as bordas top, bottom, rightou left (superior, inferior, direita e esquerda). Veja o exemplo a seguir:

Compilando [border]

Assim como para muitas outras propriedades, voc pode usar uma declaraoabreviada para bordas. Vamos a um exemplo:

Pode ser abreviada assim:

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;

}

p {border-width: 1px;

border-style: solid;border-color: blue;

}

p {

border: 1px solid blue;}


75/89

12. Altura e larguraAt agora ainda no fizemos qualquer considerao sobre as dimenses doselementos 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:

Atribuindo altura [height]

No exemplo acima a altura ser determinada pelo contedo inserido no box. Vocpode definir a altura de um elemento com a propriedade height. Como exemplo,vamos fazer a altura do box anterior igual a 500px:

div.box {width: 200px;border: 1px solid black;background: orange;

}

div.box {

height: 500px;width: 200px;border: 1px solid black;background: orange;

}


76/89

13. Flutuando elementos (floats)Um elemento pode ser 'flutuado' esquerda ou direita com uso da propriedadefloat. 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 Boxmodel). A figura a seguir ilustra o princpio de float:

Se desejamos que um texto seja posicionado em volta de uma figura como mostradoabaixo, basta flutuarmos a imagem:

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,xxxxxxxxxxxxxxxxxxxxxxxxx...


77/89

Para conseguir o efeito mostrado, basta definir uma largura para o box que o contme declarar para ele float: left;

Outro exemplo : colunas

Floats podem ser usados para construir colunas em um documento. Para criar ascolunas estruturamos as colunas no cdigo HTML usando como mostrado aseguir:

A seguir definimos a largura de cada coluna, por exemplo 33%, e declaramos float:left; para cada uma das colunas:

#picture {float:left;width: 100px;

}

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...

#column1 {

float:left;width: 33%;}

#column2 {float:left;width: 33%;

}

#column3 {float:left;width: 33%;

}


78/89

float pode ser declarado left, right ou none.

A propriedade clear

A propriedade clear usada para controlar o comportamento dos elementos que seseguem aos elementos floats no documento.

Por padro, o elemento subsequente a um float, ocupa o espao livre ao lado doelemento flutuado. Veja no exemplo acima que o texto deslocou-se automaticamentepara o lado da foto de Bill Gates.

A propriedade clear pode assumir os valores left, right, both ou none. A regrageral : se clear, for por exemplo definido both para um box, a margem superiordeste box ser posicionada sempre abaixo da margem inferior dos boxes flutuadosque estejam antes dele no cdigo.

Para evitar que o texto se posicione no espao livre deixado pela foto do Bill Gatesbasta adicionar a seguinte regra CSS:

Bandeira do Brasil

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...

#picture {float:left;width: 100px;

}.floatstop {

clear:both;}


79/89

. Posicionando elementosCom posicionamento CSS podemos colocar um elemento em uma posio exata napgina. Combinado com floats (ver lio 13), o posicionamento abre muitaspossibilidades 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 elementoem qualquer lugar na tela usando um sistema de coordenadas.

Vamos supor que queremos posicionar um cabealho. Usando o box model (veja nalio 9) o cabealho pode ser estilizado para ser apresentado como mostrado abaixo:

O resultado mostrado a seguir:

h1 { position:absolute;top: 100px;left: 200px;

}


80/89

Como voc pode ver, posicionar com CSS uma tcnica precisa para colocarelementos. muito mais fcil do que usar tabelas, imagens transparentes e tudomais.


81/89

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, ebottom para definir as coordenadas e posicionar o elemento.

Para exemplificar o posicionamento absoluto escolhemos colocar quatro boxes nosquatro cantos da pgina:

#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;

}


82/89

Posicionamento relativo

Para posicionar um elemento de forma relativa a propriedade position deve serdefinida para relative. A diferena entre os dois tipos de posicionamento amaneira como o posicionamento calculado.

O posicionamento para posio relativa calculado com base na posiooriginal do elemento no documento. Isto significa uma movimentao doelemento para a esquerda, para a direita, para cima ou para baixo. Assim fazendo oelemento ocupa um espao aps ser posicionado.

Como exemplo de posicionamento relativo vamos tentar posicionar trs imagensrelativamente as suas posies originais na pgina. Notar como as imagens deixamum espao vazio nas suas posies originais no documento:

#bola1 {position:relative;left: 350px;bottom: 150px;

}#bola2 {

position:relative;left: 150px;bottom: 500px;

}

#bola3 {position:relative;left: 50px;bottom: 700px;

}


83/89

15. Usando z-index (Layers)CSS usa o espao tri-dimensional - altura, largura e profundidade. Nas liesanteriores vimos as duas primeiras dimenses. Nesta lio aprenderemos como

colocar elementos em layers (camadas). Resumindo, camadas significam como oselementos se sobrepem uns aos outros.

Para fazer isto definimos para cada elemento um nmero ndice (z-index). Ocomportamento que elementos com nmero ndice maior se sobrepem quelescom menor nmero.

Vamos supor um royal flush no jogo de poker. As cartas podem ser apresentadascomo se cada uma delas tivesse um z-index:

No caso mostrado, os nmeros ndice esto emuma seqncia direta (de 1-5), contudo o mesmo resultado poderia ser obtido comuso de 5 diferentes nmeros, no em seqncia. O que conta a cronologia dosnmeros (a ordem).


84/89

O cdigo para a ilustrao das cartas mostrado a seguir:

O mtodo simples, mas as possibilidades so muitas. Voc pode colocar imagenssobre textos, texto sobre texto, etc.

#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;

}


85/89


86/89

Intro duo a 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. E com a poderosa linguagem XSLT voc pode muito facilmente oferecer

seus os dados em XHTML para o navegador.


87/89

Para que seu arquivo possa ser lido por mquinas alm de humanos muitoimportante que voc escreva um XHTML vlido, com isso voc est fazendo com queas informaes do seu site fique mais acessvel para as buscas, contribuindo para oprojeto e principalmente melhorando as visitas do seu site.

O que o DO C TYPE?

O Doctype (Document Type Definition) a primeira coisa que se deve escrever emum arquivo XHTML, ele vai na primeira linha do seu documento, se voc quiser terum XML vlido, no devemos esquec-lo, ele serve para informar ao browser quetipo de documento ser visualizado.

Existem 3 tipos:

Strict: Este tipo usado quando voc fez um cdigo 100% XHTML, sem erros, deveser escrito assim:

Transitional: Este o modo mais usado, voc o usa quando est comeando amigrar do nosso amigo HTML para o poderoso XHTML, sua sintaxe :

Frameset: usado quando voc est utilizando FRAMES em seu site, se escreve

assim:

Veja o exemplo abaixo:


88/89

Exemplo :

Feche T DAS as tags

Quem j escreveu algum XML sabe que ele no funciona at que TODAS as tagsestiverem 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:
, , etc
2.

E no devemos esquecer de forma alguma de fechar as tags solitrias, assim, aoinvs de
escrevemos
, ou na forma simplificada:
.

Descobriram que fechando tags desta forma
, no se sabe porque estavacausando um problema no Netscape, mas apenas colocando um espao antes da / oproblema solucionado.

Use letras minsculas

Quem nunca viu um cdigo fonte de um documento HTML escrito assim: Um documento XHTML deve ter TODAS as tags e seus respectivos atributos escritoscom letra minscula!


89/89

No esquea das ASPAS

Esta regra bem simples. Todos os atributos XHTML devem conter as benditasASPAS.

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 duasformas juntas durante neste perodo em que estamos migrando:

Atributos sem valor

No devemos esquecer tambm os atributos que escrevemos sem valor, por exemplo:

ERRADO:

CERTO:

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

Documents

Apostila HTML,XHTML E CSS.pdf