Apostila HTML, XHTML e Css

aPOstiLA DE
html, xhtml e cSs
ndice
HTML
1.Introduo ao HTML __________________________________________pgina 04 2.O que o HTML _____________________________________________pgina 05 3.O que so tags HTML _________________________________________pgina 05 4.Iniciando com HTML _________________________________________pgina 10 5.Mais tags HTML _____________________________________________pgina 12 6.Atributos __________________________________________________pgina 14 7.Links _____________________________________________________pgina 18 8.Imagens __________________________________________________pgina 22 9.Tabelas ___________________________________________________pgina 26 10.Mais tabelas ______________________________________________pgina 28 12.Uploading do seu site ______________________________________pgina 29
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
Introduo ao XHTML ___________________________________pgina 86 Escrevendo um XHTML vlido _____________________________pgina 87
Introduo Nesta primeira parte do tutorial vamos falar sobre a linguagem HTML. Podemos dizer que o HTML a linguagem me. importante aprendermos o HTML, para poder trabalhar com outras linguagens. O HTML, responsvel pela parte pesada do site. Hoje, existe o XHTML, que veio para substituir o HTML.Voc deve se perguntar, por que ento eu vou aprender HTML em vez de aprender logo XHTML? importante que voc aprenda o bsico primeiro, a linguagem XHTML no to diferente do HTML, mas melhor que voc conhea o HTML primeiro que tudo vai ficar mais fcil depois para aprender o XHTML. E difcil achar algum tutorial ou apostila ensinando o XHTML, j que praticamente o HTML modificado, com maneiras de fechar as tags diferente etc. Ento, aprenda primeiro pelo HTML e depois faa a comparao e veja as diferenas. Ser muito mais fcil entender o XHTML depois de ter visto o HTML. Introduo ao HTML O HTML, a linguagem me usada para construir os sites. Apesar de ser coisa do passado, um site ser feito apenas com HTML, sem o HTML no possvel montar uma pgina de internet. O HTML foi ficando obsoleto, por ser uma linguagem limitada no podendo trabalhar com grficos e animaes por exemplo, apenas texto e imagens estticas ou GIFs animados sem muita complexidade. Hoje usado o HTML, junto com alguma outra linguagem, ou com outras linguagens. Sim, porque vamos supor que voc queira colocar animaes em seu site ou at mesmo fazer pequenas alteraes no ponteiro do mouse, mensagem na barra de ttulo, mensagens de aviso. Isso no seria possvel somente com o HTML. So utilizadas linguagens como o Java Script ou DHTML(Dynamic HTML) juntamente com o HTML. Hoje so desenvolvidas pginas com banners em Flash, Fireworks, Photoshop, pginas feita toda em Flash(o que no recomendvel para que no tem banda larga), pginas feitas no Fireworks, mas introduzido e alinhado em uma site usando HTML e CSS.
1.
O que so tags HTML?
AS TAGS HTML A ESTRUTURA ONDE SER MONTADA NOSSAS PGINAS HTML. AS TAGS SO RESPONSVEIS PELO NAVEGADOR INTERPRETAR O QUE ESTO ENTRE ELAS. SEM ELAS NO SERIA POSSVEL INTERPRETAR O SEU SITE.
2.
Vamos ver as tags principais para a construo de uma
pgina HTML. 1. ESTRUTURA BSICA.

<html> a tag de abertura do html. <head> cabealho da pgina. onde ficam informaes adicionais.
</head> tag de fechamento do cabealho. <title> a tag de abertura do ttulo da janela.
</title> tag de fechamento do ttulo da janela. <body> corpo da pgina. aqui ficar a parte principal do seu site. </body> tag de fechamento do corpo da pgina. </html> tag de fechamento do html.
3.
1.
INICIANDO COM O HTML
TTULO NA JANELA DO SITE. A tag utilizada para o ttulo da janela o <title>. <html> <head> <title>Meu website</title> </head> <body> </body> </html>
<title> Aqui ficar o ttulo da janela </title>
2. TTULO DO SITE A tag utilizada para o ttulo a <h1> ao <h6>. <html> <head> <title>Meu website</title> </head> <body> <h1>Um cabealho</h1> </body> </html> <h1>Aqui ficar o ttulo </h1> <h2>Aqui ficar o ttulo </h2> <h3>Aqui ficar o ttulo </h3> <h4>Aqui ficar o ttulo </h4> <h5>Aqui ficar o ttulo </h5> <h6>Aqui ficar o ttulo </h6> *O tamanho do ttulo pode ser definido por suas tags de h1 a h6, sendo que quanto maior o valor da tag menor ser o tamanho do texto.
3. SUBTTULO DO SITE A tag utilizada para o subttulo a <h1> ao <h6>. <html> <head> <title>Meu website</title> </head> <body> <h1>Um cabealho</h1> <h2>Subttulo</h2> </body> </html> <h1>Aqui ficar o subttulo </h1> <h2>Aqui ficar o subttulo </h2> <h3>Aqui ficar o subttulo </h3> <h4>Aqui ficar o subttulo </h4> <h5>Aqui ficar o subttulo </h5> <h6>Aqui ficar o subttulo </h6> *O tamanho do subttulo, pode ser definido assim como no ttulo.
4. TEXTO PARGRAFO NO SITE A tag para o texto pargrafo o <p>. <html> <head> <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>
<p>Aqui ficar o texto pargrafo</p> No exemplo foi colocado um texto embaixo do ttulo e em baixo do subttulo.
5. Texto em negrito Para colocarmos um texto em negrito devemos adicionar entre a tags <b> e </b>. <b> Este texto deve ser negrito.</b>
Ser renderizado no navegador assim: Este texto deve ser negrito.
6. Texto em Itlico Para colocarmos um texto em negrito devemos adicionar entre a tags <i> e </i>. <i> Este texto deve ser itlico.</i>
Ser renderizado no navegador assim:
Este texto deve ser itlico.
7. Texto com letras menores Para fazermos textos usando letras menores podemos usar a tag <small></small>. <small> Este texto deve ser com letras em tamanho small</small>
Ser renderizado no navegador assim: Este texto deve ser com letras em tamanho small.
8. Posso usar vrias tags simultaneamente? Sim voc pode usar quantas tags queira, desde de que as aninhe convenientemente. Veja como fazer isto no exemplo abaixo: Para escrever um texto em negrito e itlico faa como mostrado a seguir: <b><i>Texto em negrito e itlico.</i></b> E no assim: <b><i>Texto em negrito e itlico.</b></i> Observe que no primeiro exemplo a primeira tag de abertura <b> corresponde a ltima tag de fechamento </b>, e o aninhamento est certo. Isto evita confuso para quem escreve o cdigo e para o navegador que l o cdigo. As ltimas tags a serem abertas tem que ser as primeiras a serem fechadas, e as primeiras a serem abertas tero de ser as ltimas a serem fechadas.
4.
MAIS TAGS!
9. Existem tags que so abertas e fechadas em nica tag. Estas tags so comandos isolados, ou seja, no contm nenhum texto dentro delas para poder funcionar. Um exemplo a tag <br /> que serve para criar uma quebra de linha: Um texto<br /> e mais texto em nova linha Ser renderizado no navegador assim: 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> Ser renderizado no navegador assim:
Um
item de lista Outro item de lista
11. Lista ordenada: <ol> <li>Primeiro item da lista</li> <li>Segundo item da lista</li> </ol> Ser renderizado no navegador assim: 1. Primeiro item da lista 2. Segundo item da lista Tente voc mesmo! <i>Itlico</i> <small>Texto tamanho small</small> <br /> Pula linha <hr /> Linha Horizontal <blockquote>Indentao</blockquote> <ul>Lista<ul> <ol>Lista ordenada<ol> <li>Item de lista</li>
5.
ATRIBUTOS
O que atributo?
Como voc deve estar lembrado, uma tag um comando para o navegador (por exemplo, <br /> um comando para mudar de linha). Em algumas tags voc pode ser mais especfico, acresentando na tag, informaes adicionais de comando. Isto feito atravs dos atributos. <h3 style="background-color:#ff0000;"> HTML (Hyper Text Markup Language)</h2>
Atributos so escritos dentro da tag, seguidos por um sinal de igual e depois entre aspas so declaradas as informaes do atributo. As informaes quando mais de uma, devem ser separadas por ponto e vrgula, tudo conforme mostrado no exemplo acima. Adiante voltaremos a este assunto.
Como isto?
Existem vrios atributos. O primeiro que voc aprender o atributo style. Com o atributo style voc pode adicionar estilizao e layout ao seu website. Por exemplo, uma cor de fundo: <html> <head> </head> <body style="background-color:#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?

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

Atributos podem ser aplicados maioria das tags. Voc normalmente usar atributos com mais freqncia em algumas tags, tais como a tag body e raramente usar em outras, como por exemplo, a tag br que um comando para pular de linha e no precisa de nenhuma informao adicional. Assim como existem muitas tags, tambm existem muitos atributos. Alguns atributos so empregados em tags especficas enquanto outros servem para vrias tags. E vice-versa: algumas tags podem conter somente um tipo de atributo, enquanto outras podem conter vrios tipos. Isto pode parecer um pouco confuso, mas medida que voc for praticando vai constatar que tudo fcil e lgico, bem como vai verificar as inmeras possibilidades que os atributos oferecem.
Ento, quais so as partes que constituem uma tag?

A constituio bsica de uma tag denominada elemento (por exemplo em <p>). Assim, uma tag constituida de um elemento (por exemplo <p>), ou por um elemento e um ou mais atributos (por exemplo <p style="backgroundcolor:#ff0000;">).
6.
Links
Como construir links entre as pginas.
O que eu preciso para construir um link?

Para construir um link voc usa o que tem usado at agora para codificar HTML: uma tag. Uma pequena tag com um elemento e um atributo suficiente para voc construir links para onde quiser. A seguir um exemplo de link para o site HTML.net: <a href="http://www.html.com.br/">Aqui entra o nome do link</a> Ser renderizado assim no navegador: Aqui entra o nome do link
O elemento a refere-se a "anchor" - ncora . O atribuito href abreviao para "hypertext reference" - referncia a hypertexto - e especifica o destino do link - que normalmente um endereo na Internet ou um arquivo. No exemplo acima o atributo href tem o valor "http://www.html.net", que o endereo completo do site HTML.net e chamado de URL (Uniform Resource Locator). Notar que "http://" deve sempre ser incluido nas URLs. A frase "Aqui entra o nome do link" o texto mostrado no navegador como link. Lembre-se de fechar a tag com um </a>.
Como so os links entre minhas prprias pginas?

Se voc quer construir links entre pginas de um mesmo website voc no precisa escrever o endereo completo de cada pgina (URL). Por exemplo, se voc tem duas pginas (vamos cham-las de pagina1.htm e pagina2.htm) e salvou as duas em um mesmo diretrio voc constri um link de uma para a outra usando somente o nome do arquivo no link. Nestas condies, um link da pgina1.htm para a pagina2.htm como mostrado abaixo: <a href="pagina2.htm">Aqui um link para a pagina 2</a>
Se a pagina2 for colocada em um subdiretrio (chamado de "subdiretorio"), o link como mostrado abaixo: <a href="subdiretorio/pagina2.htm">Aqui um link para a pagina 2</a> Por outro lado, um link da pagina2 no "subdiretorio" para a pagina1 como mostrado a seguir: <a href="../pagina1.htm">Aqui um link para a pagina 1</a> "../" aponta para o diretrio a um nvel acima do arquivo onde foi feito o link. Seguindo o mesmo princpio voc pode apontar para dois (ou mais) nveis acima, escrevendo "../../". Como uma outra opo voc pode usar sempre o endereo completo do arquivo (URL).
Como so os links dentro de uma mesma pgina?

Voc pode criar links internos, dentro da prpria pgina. Por exemplo, uma tabela de contedos ou ndice com links para cada um dos captulos em uma pgina. Tudo o que voc precisa usar o atributo id e o smbolo "#". Use o atributo id para marcar o elemento que o destino do link. Por exemplo: <h1 id="heading1">Cabealho 1</h1> Voc agora pode criar um link que leve quele elemento usando o smbolo "#" no atributo do link. O smbolo "#" informa ao navegador para ficar na mesma pgina que est. O smbolo "#" deve ser seguido pelo valor atribuido a id para onde o link vai. Por exemplo: <a href="#heading1">Link para o cabealho 1</a>
Para ficar mais claro, vamos a um exemplo: <html> <head> </head> <body> <p><a href="#heading1">Link para cabealho 1</a></p> <p><a href="#heading2">Link para cabealho 2</a></p> <h1 id="heading1">Cabealho 1</h1> <p>Texto texto texto texto</p> <h1 id="heading2">Cabealho 2</h1> <p>Texto texto texto texto</p> </body>
Ser renderizado no navegador assim (clique nos dois links): Link para cabealho 1 Link para cabealho 2 Cabealho 1 Texto texto texto texto Cabealho 2 Texto texto texto texto Obs.: O nome de um atributo id deve comear com uma letra
Links para um endereo de email <a href="mailto:nobody@html.net">Enviar e-mail para nobody em HTML.net</a>
Ser renderizado no navegador assim: Enviar e-mail para nobody em HTML.net
A nica diferena que no lugar do endereo do documento voc escreve mailto: seguido pelo endereo de e-mail. Quando o link clicado o programa de e-mail padro do usurio aberto com o endereo do link j digitado na linha para destinatrio. Mas, ateno, isto s ir funcionar se o usurio tiver um programa de e-mail instalado na sua mquina. Como por exemplo o Outlook.
Existem outros atributos que eu deva conhecer?

Par criar links voc sempre usa o atributo href. Adicionalmente voc pode usar um title (ttulo) para seu link: <a href="http://www.html.net/" title="Visite HTML.net e aprenda HTML">HTML.net</a>
Ser renderizado no navegador assim: HTML.net
O atributo title usado para fornecer uma breve descrio do link. Se voc - sem clicar no link - colocar o cursor do mouse sobre o link, vai aparecer o texto "Visite o site HTML.net e aprenda HTML".
7.
Imagens
O que voc acha de colocar uma imagem no centro da sua pgina? Tudo o que voc precisa da nossa conhecida tag. <img src="bandeiradobrasil.jpg" alt="Bandeira do Brasil" />
O que voc tem a fazer dizer ao navegador que quer inserir uma imagem (img) e depois informar onde a imagem esta localizada (src, abreviatura para "source" - local de armazenagem ). Notar que a tag imagem do tipo comando isolado, isto , uma s tag de abertura e fechamento. Semelhante a tag <br /> e <hr />que no precisa de um texto inserido nela. "bandeiradobrasil.jpg" o nome do arquivo da imagem que voc quer inserir na pgina. ".jpg" a extenso do tipo de imagem. Tal como a extenso .html ou".htm" para arquivos de documentos HTML, ".jpg" informa ao navegador que o arquivo uma imagem. Veja abaixo os trs os tipos de imagens que voc pode inserir na sua pgina:

GIF (Graphics Interchange Format) JPG / JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics)
Em geral imagens GIF so melhores para grficos e desenhos e imagens JPEG so melhores para fotografia. Existem duas razes para isto: primeiro, imagens GIF so constituidas por 256 cores, e imagens JPEG por milhes de cores, segundo, imagens GIF so melhores otimizadas para imagens simples ao passo que imagens JPEG so melhores otimizadas para imagens complexas. Quanto maior a compresso tanto menor o tamanho do arquivo e tanto mais rpido a pgina carregada no navegador.
Tradicionalmente os formatos GIF e JPEG tem sido os mais empregados, mas ultimamente o formato PNG tem se tornado cada vez mais popular. O formato PNG em vrios aspectos melhor que os formatos JPEG e GIF: milhes de cores e efetiva compresso.
Onde consigo minhas imagens?

Para criar suas prprias imagens voc precisa de um programa de edio de imagens. O Adobe Photoshop e o Adobe Fireworks so excelentes para fazer um papel de parede para a sua pgina por exemplo. (No final da apostila vou ensinar como faz multiplicar um plano de fundo, de forma que ele cubra com as mesmas imagens todo o fundo do seu website). Um programa de edio de imagens a ferramenta essencial para criao de websites com grande impacto e apelo visual.
Vamos aprender mais algumas coisas sobre imagens. Primeiro, voc pode inserir imagens que esto localizadas em outros diretrios ou at mesmo em outros websites: <img src="images/caixa.png">
<img src="http://www.html.com.br/caixa.png">
Segundo, imagens podem ser links: <a href="http://www.html.com.br"> <img src="caixa.png"></a> Ser renderizado no navegador assim:
Existem outros atributos que eu deva conhecer?

Voc sempre ter que usar o atributo src, que diz ao navegador onde a imagem est localizada. Alm dele existem alguns outros atributos que podem ser bastante teis quando voc insere imagens em uma pgina. O atributo alt usado para fornecer uma descrio textual alternativa da imagem caso por alguma razo a imagem no seja renderizada para o usurio. Isto particularmente importante para usurios com restries visuais ou quando a imagem carregada muito lentamente. Em conseqncia, sempre use o atributo alt: <img src="logo.gif" alt="logotipo do BR Masters">
Alguns navegadores mostram uma caixa pop-up com o contedo do atributo alt quando o usurio passa o mouse sobre a imagem. Tenha em mente que a finalidade principal do atributo alt a de fornecer uma alternativa textual para imagem. O atributo alt no deve ser usado para criar mensagens pop-up uma vez que os leitores de tela passaro uma mensagem que no descreve a imagem para os usurios com restries visuais. O atributo title pode ser usado para fornecer uma curta descrio da imagem: <img src="bandeira.gif" title="Aprenda HTML no site HTML.com.br">
Coloque o ponteiro do mouse sobre a imagem, sem clicar e aparecer uma caixa popup com o texto "Aprenda HTML no site HTML.net".
Dois outros atributos importantes so width e height: <img src="logo.png" width="141" height="32">
Os atributos width e height podem ser usados para definir respectivamente, a largura e a altura da imagem. O valor adotado para medidas o pixel. Pixel a unidade de medida usada para medir a resoluo da tela. (As resolues de tela mais comuns so de 800x600 e 1024x768 pixels, apesar das resolues 800x600 estarem ficando para trs e sendo cada vez mais usada as de 1024x768 e 1280x1024 ou superior). Ao contrrio de centmetros, pixel uma unidade de medida relativa que depende da resoluo da tela. Usurios com grande resoluo de tela tero 25 pixels em 1 centmetro de tela enquanto aqueles com baixa resoluo de tela tero os mesmos 25 pixels em 1,5 cm de tela. Se no forem definidos os valores para width e height, a imagem ser inserida com seu tamanho real. Com width e height voc pode alterar o tamanho da imagem: <img src="logo.gif" width="32" height="32"> O tempo de descarga da imagem ser sempre aquele requerido como se ela tivesse suas dimenses reais, mesmo que voc diminua seu tamanho com uso destes atributos. Assim, voc no deve diminuir o tamanho das imagens com o uso dos atributos width e height. Se voc precisa diminuir a imagem diminua suas dimenses reais em um editor de imagem para tornar suas pginas mais leves e mais rpidas. Dito isto, acrescentamos que sempre uma boa idia definir os atributos width e height para imagens, pois assim fazendo o navegador reservar o espao para descarga da imagem previamente. Isto acaba por permitir ao navegador, saber com antecedncia (antes de descarregar as imagens) como ser o layout da pgina.
8.
Tabelas
Tabelas so usadas para apresentar "dados tabulares", isto , informao que deva ser apresentada em linhas e colunas, de forma lgica e organizada.
difcil?
Criar tabelas em HTML pode parecer complicado, mas quando voc acompanhar passo a passo a explicao, ver que bem fcil. <table> <tr> <td>Clula <td>Clula </tr> <tr> <td>Clula <td>Clula </tr> </table>
1</td> 2</td> 3</td> 4</td>
Ser renderizado no navegador assim: Clula 1 Clula 2 Clula 3 Clula 4
Qual a diferena entre as tags <tr> e <td>?

Este com certeza o cdigo mais complicado at agora. Vamos analisar isto por partes e explicar as diferentes tags: 3 tags bsicas so usadas para inserir tabelas: <table> comea e termina uma tabela. <tr> significa "table row" - linha de tabela - comea e termina e uma linha horizontal da tabela. <td> significa "table data" - dados da tabela. comea e termina cada clula contida nas linhas da tabela.
Eis o acontece no exemplo dado acima: a tabela comea com <table>, segue-se uma <tr>, que indica o incio de uma nova linha. Duas clulas so ento inseridas na linha: <td>Clula 1</td> e <td>Clula 2</td>. A linha termina com </tr> e uma nova linha <tr> comea imediatamente a seguir. A nova linha tambm contm duas clulas. A tabela termina com </table>. Para esclarecer: linhas so horizontais e colunas so verticais, ambas contendo clulas:
Clula 1 e Clula 2 formam uma linha. Clula 1 e Clula 3 formam uma coluna. No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabela pode conter um nmero ilimitado de linhas e colunas. Outro exemplo: <table> <tr> <td>Clula <td>Clula <td>Clula <td>Clula </tr> <tr> <td>Clula <td>Clula <td>Clula <td>Clula </tr> <tr> <td>Clula <td>Clula <td>Clula <td>Clula </tr> </table>
1</td> 2</td> 3</td> 4</td> 5</td> 6</td> 7</td> 8</td> 9</td> 10</td> 11</td> 12</td>
Ser renderizado no navegador assim: Clula 1 Clula 2 Clula 3 Clula 4 Clula 5 Clula 6 Clula 7 Clula 8 Clula 9 Clula 10 Clula 11 Clula 12
Existem atributos?
Claro! Por exemplo, o atributo border que usado para definir a espessura de uma borda em volta da tabela: <table border="1"> <tr> <td>Clula 1</td> <td>Clula 2</td> </tr> <tr> <td>Clula 3</td> <td>Clula 4</td> </tr> </table>
A borda da tabela especificada em pixels.
Tal como fizemos com as imagens, podemos definir width - largura - em pixels, para uma tabela - ou alternativamente em percentagem da tela. Veja abaixo: <table border="1" width="30%">
Este exemplo renderiza no navegador uma tabela com largura igual a 30% da largura da tela.
Existem mais atributos?

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

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

Os dois atributos colspan e rowspan so usados para criar tabelas singulares. Colspan a abreviao para "column span". Colspan usada na tag <td> para indicar quantas colunas estaro contidas em uma clula. <table border="1"> <tr> <td colspan="3">Clula 1</td> </tr> <tr> <td>Clula 2</td> <td>Clula 3</td> <td>Clula 4</td> </tr> </table>
E o rowspan? Como voc j deve ter concluido, rowspan especifica quantas linhas estaro contidas em uma clula:
<table border="1"> <tr> <td rowspan="3">Clula 1</td> <td>Clula 2</td> </tr> <tr> <td>Clula 3</td> </tr> <tr> <td>Clula 4</td> </tr> </table> Ser renderizado no navegador assim:
No exemplo acima rowspan definido em "3" na Clula 1. Isto especifica que uma clula deve conter 3 linhas. Clula 1 e Clula 2 esto na mesma linha, enquanto Clula 3 e Clula 4 formam duas linhas independentes. Isso no difcil, confuso. bom desenhar a tabela em uma folha de papel antes de comear a codificao HTML.
10.
Uploading do seu site
At agora somente voc conseguiu visualizar suas pginas. Chegou a hora de mostrlas para o mundo todo. Para publicar a sua pgina na Web voc precisar apenas de um espao em um servidor. Para facilitar o seu upload voc poder baixar um programa FTP(opcional) em qualquer site de download de programas. Ele faz o upload das pginas sem precisar acessar toda vez o site do servidor. Voc acessar diretamente o servidor do seu computador. 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
Nesta lio voc aprender mais alguns conceitos tericos do HTML.
O que mais h para conhecer sobre HTML?

HTML pode ser escrito de vrias maneiras. O navegador est apto a ler HTML escrito de vrias maneiras. Podemos dizer que HTML tem muitos dialetos. Esta a razo porqu alguns websites so apresentados de formas diversas em diferentes navegadores. Desde o aparecimento da Internet tem sido feitas vrias tentativas para se normatizar o HTML notadamente atravs do World Wide Web Consortium (W3C) fundado por Tim Berners-Lee (o grande inventor do HTML). No passado - quando voc tinha que comprar um navegador - Netscape dominava o mercado de navegadores. quela poca as normas para o HTML estavam nas suas verses 2.0 e 3.2. Mas pelo fato de dominar 90% do mercado a Netscape no teria, e no teve que se preocupar muito com normas. Pelo contrrio, a Netscape inventava seus prprios elementos de marcao que no funcionavam em outros navegadores. Por muitos anos a Microsoft ignorou completamente a Internet. Em determinado momento, resolveu competir com a Netscape e lanou seu navegador prprio. A primeira verso do navegador da Microsoft, o Internet Explorer, no era melhor do que o Netscape no suporte s normas do HTML. Mas, a Microsoft resolveu distribuir seu navegador gratuitamente junto com o Sistema Operacional Windows e o Internet Explorer em pouco tempo tornou-se o navegador mais usado e mais popular. A partir das verses 4 e 5 a Microsoft anunciava que seus navegadores ofereciam cada vez maior suporte s normas HTML do W3C. A Netscape no se movimentou para atualizar seu navegador e continuou a colocar no mercado a velha e desatualizada verso 4.
Quando voc codifica HTML de acordo com as normas do W3C, voc est construindo um website para ser visualizado em todos os navegadores, no s agora mas tambm no futuro. E felizmente, tudo o que voc aprendeu neste tutorial est de acordo com a mais nova verso do HTML, que o XHTML.
Devido a existncia de diferentes tipos de HTML, voc precisa informar ao navegador qual o "dialeto" do HTML e no seu caso voc aprendeu XHTML. Para informar ao navegador, voc usa o Document Type Definition. O Document Type Definition deve ser escrito sempre no topo do documento: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"> <head> <title>Ttulo</title> </head> <body> <p>texto texto</p> </body> </html>
Alm do Document Type Definition (escrito na primeira linha no exemplo acima), que informa ao navegador que voc est codificando XHTML, voc precisa ainda adicionar informao extra na tag html, usando os atributos xmlns e lang. xmlns abreviao de "XML-Name-Space" e deve ter sempre o valor http://www.w3.org/1999/xhtml. Isto tudo o que voc precisa saber. No atributo lang voc especfica em que lngua (aqui trata-se de linguagem humana) o documento escrito. As abreviaturas para as lnguas existentes no mundo todo, esto nas ISO 639 standard . No exemplo acima a lngua definida no atributo o portugus do Brasil ("pt-br").
Validao? Porqu deveria eu fazer isto?

O DTD importante tambm para a validao da pgina. Insira o DTD nas suas pginas e poder verificar erros no seu HTML, usando o validador gratuito do W3C. Para testar o validador faa o seguinte: crie uma pgina e publique na Internet. A seguir entre em validator.w3.org e l digite o endereo (a URL) da sua pgina, depois clique no boto validar. Se seu HTML estiver correto, vai aparecer uma mensagem de congratulaes. Se no, ser apresentada uma lista de erros, informando o qu est errado e onde. Cometa alguns erros propositais no seu cdigo para verificar o que acontece. O validador no til somente no encontro de erros. Alguns navegadores tentam interpretar os erros cometidos pelos desenvolvedores e consertar o cdigo mostrando a pgina corretamente. Em navegadores assim voc nunca encontrar erros no prprio navegador. J outros navegadores no aceitam o erro e apresentam a pgina arruinada ou mesmo nem apresentam. O validador ento ajuda voc a encontrar erros que voc no tenha nem idia de que existiam Sempre valide suas pginas, para ter certeza que elas sero mostradas corretamente em todos os navegadores.
1.
Introduo ao CSS
CSS significa Cascading Style Sheetes (Folhas de Estilo em Cascata). No seria timo fazer layouts na sua pgina sem ter que alterar o HTML toda vez que quisesse mudar? Nesta introduo vamos ter uma breve introduo ao CSS para voc ter uma idia como o CSS prtico. Podemos dizer que o CSS a melhor metade do HTML. Codificando, no h melhor parceria: HTML responsvel pelo trabalho pesado (a estrutura), enquanto CSS d o toque de elegncia (layout). CSS pode ser adicionado com uso do atributo style. Por exemplo, voc pode definir o tipo e o tamanho da fonte em um pargrafo: <p style="font-size:20px;">Este pargrafo em tamanho de fonte igual a 20px</p> <p style="font-family:courier;">Este pargrafo em fonte Courier</p> <p style="font-size:16px; font-family:cambria">Este pargrafo em fonte Cambria e tamanho 20px</p> Ser renderizado no navegador assim:
Este pargrafo em tamanho de fonte igual a 20px

Este pargrafo em fonte Courier
Este pargrafo em fonte Cambria e tamanho 16px
No exemplo acima usamos o atributo style para definir o tipo de fonte usado (com a propriedade font-family) e o tamanho da fonte (com a propriedade 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

Uma das funcionalidades mais inteligentes das CSS a possibilidade de controlar o layout de um arquivo central. Em lugar de se usar o atributo style em cada tag, voc pode dizer ao navegador como deve ser o layout de todos os textos em uma pgina: <html> <head> <title>Minha primeira pgina CSS</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial} h2 {font-size: 15px; font-family: courier} p {font-size: 8px; font-family: times new roman} </style> </head> <body> <h1>Minha primeira pgina CSS</h1> <h2>Bem vindo minha primeira pgina CSS</h2> <p>Aqui voc ver como funciona CSS</p> </body> </html>
No exemplo acima inserimos as CSS na seo head do documento, assim ela se aplica pgina inteira. Para fazer isto use a tag <style type="text/css"> que informa ao navegador que voc est digitando CSS. No exemplo, todos os cabealhos da pgina sero em fonte Arial e tamanho 30px. Todos os subttulos sero em fonte Courier tamanho 15. E, todos os textos dos pargrafos sero em fonte Times New Roman tamanho 8. Uma outra opo a de digitar as CSS em um documento separado. Com as CSS em um documento separado voc pode gerenciar o layout de muitas pginas ao mesmo tempo. Muito inteligente, pois voc pode mudar de uma s vez, o tipo ou o tamanho da fonte de todo o site, quer ele tenha centenas ou milhares de pginas. Ns no nos aprofundaremos em CSS agora, mas voc pode aprender tudo, no futuro, em nosso tutorial CSS.
O que mais posso fazer com CSS?

CSS faz muito mais do que definir tipos e tamanhos de fontes. Por exemplo, voc pode adicionar cores e fundos. A seguir alguns exemplos para voc praticar: <p style="color:green;">Texto verde</p> <h1 style="background-color: blue;">Cabealho com fundo azul</h1> <body style="background-image: url('http://www.html.net/logo.png');"> Alm de cores, tipos de fontes, etc., CSS pode ser usado para controlar a configurao e a apresentao da pgina (margens, flutuaes, alinhamentos, larguras, alturas, etc.) Controlando os diferentes elementos com CSS voc ser capaz de criar layouts elegantes e precisos. <p style="padding:25px;border:1px solid red;">Eu amo CSS</p>
Com a propriedade float um elemento poder "flutuar" esquerda ou direita. O exemplo seguinte ilustra este princpio: <img src="bandeiradobrasil.jpg" alt="Bandeira do Brasil" style= "float:left;" /> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX, XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...</p>

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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 da pgina, com preciso: <img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" /> No exemplo mostrado a imagem foi posicionada a 50 pixels da borda inferior e a 10 pixels da borda direita do navegador. Voc pode colocar em qualquer lugar na pgina. Voc no aprende CSS em 10 minutos. preciso se dedicar um tempo para estudar. Mas no nada difcil, vamos ver nas prximas pginas o que voc precisa saber sobre as CSS.
2.
Como funciona as CSS
Nesta lio voc aprender a desenvolver sua primeira folha de estilos. Voc ver o bsico sobre o modelo CSS e que cdigo necessrio para usar CSS em um documento HTML. Muitas das propriedades usadas em Cascading Style Sheets (CSS) so semelhantes quelas do HTML. Se voc est acostumado a usar HTML para layout ir reconhecer muitos dos cdigos que usaremos.
A sintaxe bsica das CSS

Suponha que desejamos uma cor de fundo vermelha para a pgina web: Usando HTML podemos fazer assim: <body bgcolor="#FF0000">
Com CSS o mesmo resultado ser obtido assim: body {background-color: #FF0000;}
Como voc pode notar os cdigos HTML e CSS so mais ou menos parecidos. O exemplo acima serve tambm para demonstrar o fundamento do modelo CSS: seletor {propriedade: valor} seletor: Em qual tag ser aplicada a propriedade. Por exemplo: body propriedade: A propriedade pode ser como por exemplo: a cor do fundo valor: O valor da vermelha(#FF0000) propriedade cor do fundo por exemplo:
Mas, onde colocamos o cdigo CSS? isto que veremos a seguir.
Aplicando CSS a um documento HTML

Voc pode aplicar CSS a um documento de trs maneiras distintas. Os trs mtodos de aplicao esto exemplificados a seguir. Recomendo que voc foque no terceiro mtodo, ou seja o mtodo externo. O mtodo externo alm de ser menos confuso para trabalhar por no estar junto com o HTML ele no ficar amostra se algum olhar o cdigo fonte da sua pgina pelo browser, pois estar escondido no servidor onde est hospedando o seu site. Mtodo 1: In-line (o atributo style) Uma maneira de aplicar CSS pelo uso do atributo style do HTML. Tomando como base o exemplo mostrado anteriormente a cor vermelha para o fundo da pgina pode ser aplicada conforme mostrado a seguir: <html> <head> <title>Exemplo</title> </head> <body style="background-color: #FF0000;">
<p>Esta uma pgina com fundo vermelho</p> </body> </html> Mtodo 2: Interno (a tag style) 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 {background-color: #FF0000;} </style> </head> <body> <p>Esta uma pgina com fundo vermelho</p> </body> </html>
Mtodo 3: Externo (link para uma folha de estilos) O mtodo recomendado o de lincar para uma folha de estilos externa. Usaremos este mtodo nos exemplos deste tutorial. Uma folha de estilos externa um simples arquivo de texto com a extenso .css. Tal como com qualquer outro tipo de arquivo voc pode colocar uma folha de estilos tanto no servidor como no disco rgido. Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de estilo.css e est localizada no diretrio estilo (o que no necessrio, colocar em pasta separada do arquivo HTML). Tal situao est mostrada a seguir: O que voc tem a fazer criar um link no documento HTML (ndex.html) para a folha de estilos (estilo.css). O link criado em uma simples linha de cdigo HTML como mostrado a seguir: <link rel="stylesheet" type="text/css" href="c:\~documentos~/estilo.css" />
Notar que o caminho para a folha de estilos indicado no atributo href. Esta linha de cdigo deve ser inserida na seo header do documento HTML, isto , entre as tags <head> e </head>. Conforme mostrado abaixo: <html> <head> <title>Meu documento</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> ...
Este link informa ao navegador para usar o arquivo CSS na renderizao e apresentao do layout do documento HTML. A coisa realmente inteligente disto que vrios documentos HTML podem lincar para uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo ser capaz de controlar a apresentao de muitos documentos HTML. Esta tcnica pode economizar uma grande quantidade de trabalho. Se por exemplo, voc quiser trocar a cor do fundo de um site com 100 pginas, a folha de estilos evita que voc edite manualmente uma a uma as pginas para fazer a mudana nos 100 documentos HTML. Usando CSS a mudana se far em uns poucos segundos trocandose a cor em uma folha de estilos central.
VAMOS PRATICAR! Abra o bloco de notas (ou equivalente em outro sistema operacional) e crie dois arquivos um arquivo HTML e um arquivo CSS com os seguintes contedos: Index.html <html> <head> <title>Meu documento</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Minha primeira folha de estilos</h1> </body> </html>
estilo.css body { background-color: #FF0000; }
Salve os dois arquivos no mesmo diretrio. Lembre-se de salvar os arquivos com a extenso apropriada (".css" e ".html"(ou htm). Abra index.html no seu navegador e veja uma pgina com o fundo vermelho. Parabns! Voc construiu sua primeira folha de estilos!
3.
Cores e fundos
Voc vai aprender agora como aplicar cores de primeiro plano e cores de fundo no seu website. Abordaremos ainda os mtodos avanados de controle e posicionamento de imagens de fundo.
Cor do primeiro plano: a propriedade 'color'

A propriedade color define a cor do primeiro plano de um elemento. Considere, por exemplo, que desejamos que todos os cabealhos de primeiro nvel no documento sejam na cor vermelha. O elemento HTML que marca tais cabealhos o elemento <h1>. O cdigo a seguir define todos os <h1> na cor vermelha. h1 { } color: #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'
A propriedade background-color define a cor do fundo de um elemento. O elemento <body> contm todo o contedo de um documento HTML. Assim, para mudar a cor de fundo da pgina, devemos aplicar a propriedade background-color ao elemento <body>. Voc pode aplicar cores de fundo para outros elementos, inclusive para cabealhos e textos. No exemplo abaixo foram aplicadas diferentes cores de fundo para os elementos <body> e <h1>. body { } h1 { } background-color: #FFCC66;
color: #990000; background-color: #FC9804;
Obs.: Note que foram aplicadas duas propriedades ao elemento <h1> separadas por um ponto e vrgula.
Images de fundo [background-image]

A propriedade CSS background-image usada para definir uma imagem de fundo. Para inserir uma imagem de fundo na pgina basta aplicar a propriedade background-image ao elemento <body> e especificar o caminho para onde est gravada a imagem. body { } h1 { }
background-color: #FFCC66; background-image: url("imagem.gif");
Obs.: Note como foi especificado o caminho para a imagem usando url("imagem.gif"). Isto significa que a imagem est localizada no mesmo diretrio da folha de estilos. Pode ser escolhido um outro diretrio para gravar as imagens e o caminho seria url("../images/imagem.gif") ou at mesmo hosped-la na Internet: url("http://www.html.net/imagem.gif").
Imagem de fundo repetida [background-repeat]

No exemplo anterior voc observou que a imagem se repetiu tanto na vertical como na horizontal cobrindo toda a tela? A propriedade background-repeat controla o comportamento de repetio da imagem de fundo. A tabela a seguir mostra os quatro diferentes valores para 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;
} h1 { }
Image de fundo fixa [background-attachment]

A propriedade background-attachment define se a imagem ser fixa ou se ir rolar juntamente com o elemento que a contm. Uma imagem de fundo fixa permanece no mesmo lugar e no rola com a tela ao contrrio da imagem que no fixa e rola acompanhando o contedo da tela. A tabela a seguir mostra os quatro diferentes valores para 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;
} h1 { }
Posio da imagem de fundo [background-position]

Por padro uma imagem de fundo posicionada no canto superior esquerdo da tela. A propriedade background-position permite alterar este posicionamento padro e colocar a imagem em qualquer lugar na tela. Existem vrias maneiras de definir o posicionamento da imagem na tela definindo valores para background-position. Todas elas se utilizam de um sistema de coordenadas. Por exemplo, os valores '100px 200px' posiciona a imagem a 100px do topo e a 200px do lado esquerdo da janela do navegador. As coordenadas podem ser expressas em percentagem da largura da janeja, em unidades fixas (pixels, centmetros, etc.) ou pode-se usar as palavras top, bottom, center, left e right. A figura a seguir ilustra o modelo de coordenadas:
Na tabela a seguir so mostrados alguns exemplos.
No exemplo de cdigo a seguir a imagem posicionada no canto inferior direito da pgina: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;
} h1 { }
Compilando [background]
A propriedade background uma abreviao para todas as propriedades listadas anteriormente. Com background voc declara vrias propriedades de modo abreviado, economizando digitao e alguns bites, alm de tornar a folha de estilo mais fcil de se ler e entender. Por exemplo, observe as cinco linhas a seguir: background-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: #FFCC66 url("imagem.gif") no-repeat fixed right bottom;
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 valor default. Por exemplo, a propriedade background-attachment e background-position no foram declaradas no cdigo mostrado a seguir: background: #FFCC66 url("imagem.gif") no-repeat; As duas propriedades no declaradas assumiro o valor default que como voc j sabe so: a imagem rola na tela e ser posicionada no canto superior esquerdo (que so os valores default para as propriedades no declaradas).
4.
FONTES
Estudaremos as fontes e como aplic-las usando CSS. Veremos como criar situaes para que determinada fonte seja visualizada pelo usurio mesmo no estando instalada em seu sistema operacional.
Famlia de fontes [font-family]

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

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

A propriedade font-variant usada para escolher as variantes normal ou smallcaps. Uma fonte small-caps aquela que usa letras maisculas de tamanhos reduzidos. Confundiu? D uma olhada nos exemplos a seguir:
Se a propriedade font-variant for definida para small-caps e no estiver disponvel na mquina do usurio, ser usada fonte em maiscula. h1 {font-variant: small-caps;} h2 {font-variant: normal;}
Peso da fonte [font-weight]

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

O tamanho da fonte definido pela propriedade font-size. Existem muitas unidades (p. ex.:. pixels e porcentagens) que podem ser usadas para definir o tamanho da fonte. Neste tutorial ns usaremos as unidades mais comuns e apropriadas. Ver exemplos a seguir: h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}
Existe uma diferena fundamental entre as quatro unidades adotadas no exemplo acima. As unidades 'px' e 'pt' so absolutas, enquanto '%' e 'em' permitem ao usurio ajustar o tamanho das fontes ao seu gosto e necessidade. Para fazer seu site acessvel a todos, voc dever usar unidades como '%' ou 'em'. Abaixo uma figura mostrando como ajustar o tamanho das fontes no navegador Internet Explorer. Tente voc mesmo este ajuste uma excelente funcionalidade do navegador, no mesmo?
Compilando [font]
Usar font uma abreviao que permite definir vrias propriedades em uma s. Veja a seguir quatro linhas de cdigo usadas para definir propriedades de fonte para um pargrafo <p>: p{
font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif;
Usar a abreviao simplifica o cdigo como mostrado abaixo: p{ } font: italic bold 30px arial, sans-serif;
A ordem dos valores para font a mostrada a seguir : font-style 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:
Indentao de texto [text-indent]

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

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

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

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

A propriedade text-transform controla a capitalizao (tornar maiscula) do texto. Voc pode escolher capitalize, uppercase ou lowercase independentemente de como o texto foi escrito no cdigo HTML. Como exemplo tomamos a palavra "cabealho" que pode ser apresentada ao usurio como "CABEALHO" ou "Cabealho". So quatro os valores possveis para texttransform: capitalize Capitaliza a primeira letra de cada palavra. Por exemplo: "john doe" transforma-se para "John Doe". uppercase Converte todas as letras para maiscula. Por exemplo: "john doe" transforma-se para"JOHN DOE". lowercase Converte todas as letras para minscula. Por exemplo: "JOHN DOE" transforma-se para"john doe". none Sem trasformaes - o texto apresentado como foi escrito no cdigo HTML. Para exemplificar vamos usar uma lista de nomes. Os nomes esto marcados com o elemento <li> (item de lista). Vamos supor que desejamos os nomes capitalizados e os cabealhos em letras maisculas. Ao consultar o exemplo sugerido para este cdigo d uma olhada no HTML da pgina e observe que os textos no cdigo foram escritos com todas as letras em minsculas. h1 { } li { }
text-transform: uppercase;
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 pseudoclasses.
O que pseudo-classe?
Uma pseudo-classe permite estilizar levando em conta condies diferentes ou eventos ao definir uma propriedade de estilo para uma tag HTML. Vamos ver um exemplo. Como voc j sabe, links so marcados no HTML com tags <a>. Podemos ento usar a como um seletor CSS: a{ } color: blue;
Um link pode ter diferentes estados. Por exemplo, pode ter sido visitado ou no visitado. Voc usar pseudo-classes para estilizar links visitados e no visitados. a:link { color: blue; } a:visited { color: red; } Use as pseudo-classes a:link e a:visited para estilizar links no visitados e visitados respectivamente. Links ativos so estilizados com a pseudo-classe a:active e a:hover, esta ltima a pseudo-classe para links com o ponteiro do mouse sobre ele.
A seguir explicaremos com mais detalhes e exemplificao, as quatro pseudo-classes. Pseudo-classe: link A pseudo-classe :link usada para links no visitados. No exemplo a seguir links no vistados sero na cor verde. a:link { color: green; }
Pseudo-classe: visited A pseudo-clases: visited usada para links visitados. No exemplo a seguir links visitados sero na cor amarela: a:visited { color: yellow; }
Pseudo-classe: active A pseudo-classe :active usada para links ativos. No exemplo a seguir links ativos tero seu fundo na cor vermelha: a:active { background-color: red; }
Pseudo-classe: hover
A pseudo-classe :hover usada para quando o ponteiro do mouse est sobre o link. Isto pode ser usado para conseguir efeitos bem interessantes. Por exemplo, podemos mudar a cor do link para laranja e o texto para itlico quando o ponteiro do mouse passa sobre ele, o cdigo CSS para estes efeitos o mostrado a seguir: a:hover { color: orange; font-style: italic; }
Exemplo 1: Efeito quando o ponteiro est sobre o link

comum a criao de efeitos diferentes quando o ponteiro est sobre o link. Veremos a seguir alguns exemplos extras de estilizao da pseudo-classe :hover. Exemplo 1a: Espaamento entre as letras Como voc deve estar lembrado da lio anterior, o espaamento entre as letras de um texto pode ser controlado pela propriedade letter-spacing. Isto pode ser aplicado aos links para obter um efeito interessante: a:hover { letter-spacing: 10px; font-weight:bold; color:red; }
Exemplo 1b: UPPERCASE e lowercase Na lio anterior vimos a propriedade text-transform, para estilizar com letras maisculas e minsculas. Isto pode ser usado para estilizar links: a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }
Exemplo 2: Removendo sublinhado dos links

Uma pergunta comum: Como remover o sublinhado dos links? Voc deve estudar com muito cuidado a necessidade de retirar o sublinhado dos links, pois isto poder reduzir signifcativamente a usabilidade do website. As pessoas esto acostumadas com links na cor azul e sublinhados e sabem que ali h um texto a ser clicado. Se voc muda a cor e retira o sublinhado dos links, poder confundir seus visitantes e em conseqncia no retirar o mximo dos contedos do seu website. Feita esta ressalva, muito fcil retirar o sublinhado dos links. Conforme explicado na lio anterior, a propriedade text-decoration pode ser usada para definir se o texto ou no sublinhado. Para remover o sublinhado, basta definir o valor none para a propriedade text-decoration. a{ } text-decoration:none;
Alternativamante, voc pode definir text-decoration propriedades para as quatro pseudo-classes. a:link {
juntamente
com
outras
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)
Em alguns casos voc deseja aplicar estilos a um elemento ou grupo de elementos em particular. Nesta lio veremos como usar class e id para estilizar elementos. Como definir uma cor para um determinado cabealho, diferente da cor usada para os demais cabealhos do website? Como agrupar links em diferentes categorias e estilizar cada categoria diferentemente? Estas so algumas das questes que vamos ver agora.
Agrupando elementos com uso de classe

Vamos supor que temos duas listas de links para diferentes tipos de uvas usadas na produo de vinho branco e de vinho tinto. O cdigo HTML conforme mostrado abaixo: <p>Uvas para vinho branco:</p> <ul> <li><a href="ri.htm">Riesling</a></li> <li><a href="ch.htm">Chardonnay</a></li> <li><a href="pb.htm">Pinot Blanc</a></li> </ul> <p>Uvas para vinho tinto:</p> <ul> <li><a href="cs.htm">Cabernet Sauvignon</a></li> <li><a href="me.htm">Merlot</a></li> <li><a href="pn.htm">Pinot Noir</a></li> </ul> Queremos que os links para vinho branco sejam na cor amarela, para vinho tinto na cor vermelha e os demais links na pgina permaneam na cor azul.
Para conseguir isto, dividimos os links em duas categorias. Isto feito atribuindo uma classe para cada link, usando o atributo class. Vamos especificar esta classe no exemplo a seguir: <p>Uvas para vinho branco:</p> <ul> <li><a href="ri.htm" class="whitewine">Riesling</a></li> <li><a href="ch.htm" class="whitewine">Chardonnay</a></li> <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li> </ul> <p>Uvas para vinho tinto:</p> <ul> <li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li> <li><a href="me.htm" class="redwine">Merlot</a></li> <li><a href="pn.htm" class="redwine">Pinot Noir</a></li> </ul> Agora podemos definir propriedades especficas para links pertencentes as classes whitewine e redwine, respectivamente. a{ } color: blue;
a.whitewine { color: #FFBB00; } a.redwine { color: #800000; } <li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li> <li><a href="me.htm" class="redwine">Merlot</a></li> <li><a href="pn.htm" class="redwine">Pinot Noir</a></li> </ul> Como mostrado no exemplo acima, pode-se definir propriedades para estilizao dos elementos pertencentes a uma determinada classe usando um .nomedaclasse na folha de estilos do documento.
Identificando um elemento com uso de id

Alm de agrupar elementos podemos querer atribuir identificao a um nico elemento. Isto feito usando o atributo id. O que h de especial no atributo id que no poder existir dois ou mais elementos com a mesma id, ou seja em um documento apenas um e somente um elemento poder ter uma determinada id. Cada id nica. Para casos em que haja necessidade de mais de um elemento com a mesma identificao usamos o atributo class. A seguir um exemplo de possvel uso de id: <h1>Captulo ... <h2>Captulo ... <h2>Captulo ... <h1>Captulo ... <h2>Captulo ... <h3>Captulo ... 1</h1> 1.1</h2> 1.2</h2> 2</h1> 2.1</h2> 2.1.2</h3>
O exemplo acima simula os cabealhos de um documento estruturado em captulos e pargrafos. comum atribuir uma id para cada captulo como mostrado a seguir: <h1 ... <h2 ... <h2 ... <h1 ... <h2 ... <h3 ... id="c1">Captulo 1</h1> id="c1-1">Captulo 1.1</h2> id="c1-2">Captulo 1.2</h2> id="c2">Captulo 2</h1> id="c2-1">CCaptulo 2.1</h2> id="c2-1-2">Captulo 2.1.2</h3>
Vamos supor que o cabealho do captulo 1.2 deva ser na cor vermelha. Isto pode ser feito conforme mostrado na folha de estilo a seguir: #c1-2 { color: red; } Como mostrado no exemplo acima, podemos definir propriedades para um elemento especfico usando um seletor #id na folha de estilos para o documento.
8.
Agrupando elementos (span e div)
Os elementos <span> e <div> so usados para agrupar e estruturar um documento e so freqentemente usados em conjunto com os atributos class e id. Nesta lio veremos com detalhes o uso dos elementos HTML <span> e <div> no que se refere a sua vital importncia para as CSS. Agrupando com <span> Agrupando com<div>
Agrupando com <span>

O elemento <span> um elemento neutro e que no adiciona qualquer tipo de semntica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a partes especficas do texto no seu documento. Um exemplo deste uso mostrado na citao abaixo: <p>Dormir cedo e acordar cedo faz o homemsaudvel, rico e sbio.</p>
Vamos supor que queremos enfatizar na cor vermelha os benefcios apontados na frase. Para isto marcamos os benefcios com <span>. A cada span atribumos uma class, e estilizamos na folha de estilos: <p>Dormir cedo e acordar cedo faz o homem <span class="beneficio">saudvel</span>, <span class="beneficio">rico</span> e <span class="beneficio">sbio</span>.</p>
A folha de estilos: span.beneficio { color:red; }
claro que voc pode usar id para estilizar o elemento <span>. Mas, como voc deve estar lembrado, dever usar uma nica id para cada um os trs elementos <span>, conforme foi explicado na lio anterior.
Agrupando com <div>

Enquanto <span> usado dentro de um elemento nvel de bloco como vimos no exemplo anterior, <div> usado para agrupar um ou mais elementos nvel de bloco. Diferenas parte, o agrupamento com <div> funciona mais ou menos da mesma maneira. Vamos ver um exemplo tomando duas listas de presidentes dos Estados Unidos agrupados segundo suas filiaes polticas: <div id="democrats"> <ul> <li>Franklin D. Roosevelt</li> <li>Harry S. Truman</li> <li>John F. Kennedy</li> <li>Lyndon B. Johnson</li> <li>Jimmy Carter</li> <li>Bill Clinton</li> </ul> </div> <div id="republicans"> <ul> <li>Dwight D. Eisenhower</li> <li>Richard Nixon</li> <li>Gerald Ford</li> <li>Ronald Reagan</li> <li>George Bush</li> <li>George W. Bush</li> </ul> </div>
E na folha de estilos, podemos agrupar a estilizao da mesma maneira como fizemos no exemplo acima:
#democrats { background:blue; } #republicans { background:red; }
Nos exemplos mostrados acima usamos somente <div> e <span> para simples estilizaes, tais como cores de textos e de fundos. Contudos estes dois elementos possibilitam estilizaes bem mais avanadas como veremos adiante nas lies deste tutorial.
9.
Box Model
O box model (modelo das caixas) em CSS, descreve os boxes (as caixas) geradas pelos elementos HTML. O box model, detalha ainda, as opes de ajuste de margens, bordas, padding e contedo para cada elemento. Abaixo apresentamos um diagrama representando a estrutura de construo do box model: O box model em CSS
A ilustrao acima terica. Vamos explic-la na prtica tomando como base um cabealho e um texto. O HTML para nosso exemplo (o texto foi retirado da Declarao Universal dos Direitos Humanos e est no original em ingls) o mostrado abaixo: <h1>Article 1:</h1> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood</p>
Definindo estilos para cores e fontes o exemplo pode ser apresentado como a seguir:
O exemplo contm dois elementos: <h1> e <p>. O box model para os dois elementos mostrado a seguir:
Embora possa parecer um pouco complicado, a ilustrao mostra como cada um dos elementos contido em um box (uma caixa). Boxes que podem ser ajustados e controlados via CSS.
10.
Margin e padding
Na lio anterior vimos o box model. Nesta lio veremos como controlar a apresentao de um elemento definindo as propriedades margin e padding.
Definindo margin de um elemento

Um elemento tem quatro lados: right, left, top e bottom (direito, esquerdo, superior e inferior). A margin a distncia entre os lados de elementos vizinhos (ou s bordas do documento). Veja o diagrama da lio anterior. Vamos comear com um exemplo mostrando como definir margins para o documento, ou seja, para o elemento <body>. A ilustrao a seguir mostra como sero as margens da pgina.
As CSS so mostradas abaixo: body { 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 { } p{ }
margin: 100px 40px 10px 70px;
margin: 5px 50px 5px 50px;
Definindo padding de um elemento

Padding pode tambm ser entendido como "enchimento". Isto faz sentido, porque padding no computado na distncia entre elementos, padding define simplesmente a distncia entre a borda e o contedo do elemento. Ilustramos o uso de padding atravs de um exemplo onde todos os cabealhos tm uma cor de fundo definida: h1 { } h2 { }
background: yellow;
background: orange;
Definindo padding para os cabealhos, alteramos a quantidade de enchimento existente ao redor de cada um deles: h1 { } h2 { }
background: yellow; padding: 20px 20px 20px 80px;
background: orange; padding-left:120px;
11.
Bordas
Bordas podem ser usadas para muitas coisas, por exemplo, como elemento decorativo ou para servir de linha de separao entre duas coisas. CSS proporciona infinitas possibilidades de uso de bordas na pgina.
A espessura das bordas [border-width] A espessura das bordas definida pela propriedade border-width, que pode assumir os valores thin, medium, e thick (fina, mdia e grossa), ou um valor numrico em pixels. A figura a seguir ilustra algumas espessuras de bordas:
As cores das bordas [border-color]
A propriedade border-color define as cores para as bordas. Os valores so expressos em cdigo ou nome de cores, por exemplo, "#123456", "rgb(123,123,123)" ou"yellow".
Tipos de bordas[border-style]
Existem vrios tipos de bordas disponveis para escolha. A seguir apresentamos 8 tipos diferentes de bordas e como elas so renderizadas Internet Explorer 5.5. Todos os exemplos so mostrados na cor "gold" e com espessura "thick", mas voc pode usar qualquer cor e espessura ao seu gosto. Os valores none ou hidden podem ser usados quando no se deseja a existncia de bordas.
Exemplos de definio de bordas
As trs propriedades explicadas acima podem ser definidas juntas para cada elemento e resultam em diferentes bordas. Para exemplificar, foram estilizadas diferentes bordas para os elementos <h1>, <h2>, <ul> e <p>. O resultado pode no ser uma obra prima, mas, ilustra bem algumas das inmeras possibilidades de estilizao de bordas:
h1 {
} h2 {
border-width: thick; border-style: dotted; border-color: gold;
} p{
border-width: 20px; border-style: outset; border-color: red;
} ul {
border-width: 1px; border-style: dashed; border-color: blue;
border-width: thin; border-style: solid; border-color: orange;
possvel ainda definir propriedades especialmente para as bordas top, bottom, right ou left (superior, inferior, direita e esquerda). Veja o exemplo a seguir:
h1 {
border-top-width: thick; border-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;
Pode ser abreviada assim: p{ }
border: 1px solid blue;
12.
Altura e largura
At agora ainda no fizemos qualquer considerao sobre as dimenses dos elementos com que trabalhamos. Nesta lio veremos como fcil atribuir uma altura e uma largura para um elemento.
Atribuindo largura [width]

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

No exemplo acima a altura ser determinada pelo contedo inserido no box. Voc pode definir a altura de um elemento com a propriedade height. Como exemplo, vamos fazer a altura do box anterior igual a 500px: div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; }
13.
Flutuando elementos (floats)
Um elemento pode ser 'flutuado' esquerda ou direita com uso da propriedade float. Isto significa que o box e seu contedo so deslocados para a direita ou para a esquerda do documento (ou do bloco container) (ver lio 9 para descrio do Box model). A figura a seguir ilustra o princpio de float:
Se desejamos que um texto seja posicionado em volta de uma figura como mostrado abaixo, basta flutuarmos a imagem:
Uma imagem flutuada 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; } Outro exemplo : colunas Floats podem ser usados para construir colunas em um documento. Para criar as colunas estruturamos as colunas no cdigo HTML usando <div> como mostrado a seguir: <div id="column1"> <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</p> </div> <div id="column2"> <p>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 usada para controlar o comportamento dos elementos que se seguem aos elementos floats no documento. Por padro, o elemento subsequente a um float, ocupa o espao livre ao lado do elemento flutuado. Veja no exemplo acima que o texto deslocou-se automaticamente para o lado da foto de Bill Gates. A propriedade clear pode assumir os valores left, right, both ou none. A regra geral : se clear, for por exemplo definido both para um box, a margem superior deste box ser posicionada sempre abaixo da margem inferior dos boxes 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
Com posicionamento CSS podemos colocar um elemento em uma posio exata na pgina. Combinado com floats (ver lio 13), o posicionamento abre muitas possibilidades para criao de layouts precisos e avanados.
O princpio de posicionamento CSS

Considere a janela do navegador como um sistema de coordenadas:
O princpio de posicionamento CSS estabelece que voc pode posicionar um elemento em qualquer lugar na tela usando um sistema de coordenadas. Vamos supor que queremos posicionar um cabealho. Usando o box model (veja na lio 9) o cabealho pode ser estilizado para ser apresentado como mostrado abaixo:
h1 {
position:absolute; top: 100px; left: 200px;
O resultado mostrado a seguir:
Como voc pode ver, posicionar com CSS uma tcnica precisa para colocar elementos. muito mais fcil do que usar tabelas, imagens transparentes e tudo mais.
Posicionamento absoluto
Um elemento posicionado absolutamente no cria nenhum espao no documento. Isto significa que no deixa nenhum espao vazio aps ser posicionado. Para posicionar um elemento de forma absoluta a propriedade position deve ser definida para absolute. Voc pode ento usar as propriedades left, right, top, e bottom para definir as coordenadas e posicionar o elemento. Para exemplificar o posicionamento absoluto escolhemos colocar quatro boxes nos quatro cantos da pgina: #box1 { position:absolute; top: 50px; left: 50px; } #box2 { position:absolute; top: 50px; right: 50px; } #box3 { position:absolute; bottom: 50px; right: 50px;
#box4 { position:absolute; bottom: 50px; left: 50px; }
Posicionamento relativo
Para posicionar um elemento de forma relativa a propriedade position deve ser definida para relative. A diferena entre os dois tipos de posicionamento a maneira como o posicionamento calculado. O posicionamento para posio relativa calculado com base na posio original do elemento no documento. Isto significa uma movimentao do elemento para a esquerda, para a direita, para cima ou para baixo. Assim fazendo o elemento ocupa um espao aps ser posicionado. Como exemplo de posicionamento relativo vamos tentar posicionar trs imagens relativamente as suas posies originais na pgina. Notar como as imagens deixam um espao vazio nas suas posies originais no documento:
#bola1 { position:relative; left: 350px; bottom: 150px; } #bola2 { position:relative; left: 150px; bottom: 500px; } #bola3 { position:relative; left: 50px; bottom: 700px; }
15.
Usando z-index (Layers)
CSS usa o espao tri-dimensional - altura, largura e profundidade. Nas lies anteriores vimos as duas primeiras dimenses. Nesta lio aprenderemos como colocar elementos em layers (camadas). Resumindo, camadas significam como os elementos se sobrepem uns aos outros. Para fazer isto definimos para cada elemento um nmero ndice (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:
No caso mostrado, os nmeros ndice esto em uma seqncia direta (de 1-5), contudo o mesmo resultado poderia ser obtido com uso de 5 diferentes nmeros, no em seqncia. O que conta a cronologia dos nmeros (a ordem).
O cdigo para a ilustrao das cartas mostrado a seguir: #ten_of_diamonds { position: absolute; left: 100px; bottom: 100px; z-index: 1; } #jack_of_diamonds { position: absolute; left: 115px; bottom: 115px; z-index: 2; } #queen_of_diamonds { position: absolute; left: 130px; bottom: 130px; z-index: 3; } #king_of_diamonds { position: absolute; left: 145px; bottom: 145px; z-index: 4; } #ace_of_diamonds { position: absolute; left: 160px; bottom: 160px; z-index: 5; } O mtodo simples, mas as possibilidades so muitas. Voc pode colocar imagens sobre textos, texto sobre texto, etc.
Introduo ao XHTML Para que serve o XHTML? Um arquivo XHTML um arquivo HTML, que pode ser lido por qualquer browser. No estamos falando de um novo HTML, com novas tags ou coisa assim. Pelo contrrio, o XHTML foi feito para funcionar mesmo em navegadores antigos. Mas, ao mesmo tempo, Um arquivo XHTML tambm um arquivo XML vlido, que pode ser lido por qualquer interpretador de XML. Meu primeiro conselho, nesse caso, que voc, se no trabalha com XML, deixe preocupao com o XHTML para depois de dominar bem o cdigo semntico e o layout tableless. No porque seja complicado, pelo contrrio, transformar HTML em XHTML bem simples, mas simplesmente porque voc pode obter benefcios muito significativos, e muito mais rapidamente, aprendendo CSS do que XHTML. O segundo conselho que voc comece a estudar o assunto. Depois de dominar bem layouts CSS, mergulhe no XML. A maioria dos bancos de dados hoje permite extrair dados diretamente em XML e todas as plataformas de aplicaes web trabalham bem com XML. E com a poderosa linguagem XSLT voc pode muito facilmente oferecer seus os dados em XHTML para o navegador.
Para que seu arquivo possa ser lido por mquinas alm de humanos muito importante que voc escreva um XHTML vlido, com isso voc est fazendo com que as informaes do seu site fique mais acessvel para as buscas, contribuindo para o projeto e principalmente melhorando as visitas do seu site.
O que o DOC TYPE? O Doctype (Document Type Definition) a primeira coisa que se deve escrever em um arquivo XHTML, ele vai na primeira linha do seu documento, se voc quiser ter um XML vlido, no devemos esquec-lo, ele serve para informar ao browser que tipo de documento ser visualizado. Existem 3 tipos:
Strict: Este tipo usado quando voc fez um cdigo 100% XHTML, sem erros, deve ser escrito assim: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/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>
Veja o exemplo abaixo:
Exemplo: <!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>
Feche TODAS as tags Quem j escreveu algum XML sabe que ele no funciona at que TODAS as tags estiverem bem fechadas, no HTML era diferente, muitas vezes deixvamos tags abertas, e ele funcionava que era uma beleza. Para se fazer um XHTML vlido, devemos fechar TODAS as tags: 1. No devemos esquecer de fechar as tags que estamos carecas de conhecer: <p></p>, <b></b>, etc
2. E no devemos esquecer de forma alguma de fechar as tags solitrias, assim, ao invs de <br> escrevemos <br></br>, ou na forma simplificada: <br />. Descobriram que fechando tags desta forma <br/>, no se sabe porque estava causando um problema no Netscape, mas apenas colocando um espao antes da / o problema solucionado. Use letras minsculas Quem nunca viu um cdigo fonte de um documento HTML escrito assim: <A href=http://tags.com.letras.minsculas/ TARGET=_BLANK> </A> Um documento XHTML deve ter TODAS as tags e seus respectivos atributos escritos com letra minscula!
No esquea das ASPAS Esta regra bem simples. Todos os atributos XHTML devem conter as benditas ASPAS. Atributo NAME O antigo atributo NAME foi substitudo pelo atributo ID. Se seus usurios, clientes, etc, utilizam ainda antigos browsers, voc pode sem problema nenhum utilizar as duas formas juntas durante neste perodo em que estamos migrando: <img src=imagem.gif id=imagem name=imagem /> Atributos sem valor No devemos esquecer tambm os atributos que escrevemos sem valor, por exemplo: ERRADO: <option selected> <frame noresize> <input checked> <input readonly> CERTO: <option selected=selected> <frame noresize=noresize> <input checked=checked> <input readonly=readonly> E assim por diante. Quer uma dica? Se voc est migrando do HTML para o XHTML, o TIDY pode te dar uma forcinha. O TIDY uma ferramenta para validar e consertar cdigos HTML, ele tem opes que voc pode escolher qual a verso do HTML voc quer validar, uma dessas opes a XHTML. Se voc j est escrevendo um XHTML e quer que seu cdigo fique livre de todos os erros, o TIDY arruma para voc.

Apostila HTML, XHTML e Css

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apostila HTML, XHTML e Css

Uploaded by

Copyright:

Available Formats

aPOstiLA DE

html, xhtml e cSs

O que so tags HTML?

Vamos ver as tags principais para a construo de uma

pgina HTML. 1. ESTRUTURA BSICA.

</head> tag de fechamento do cabealho. <title> a tag de abertura do ttulo da janela.

INICIANDO COM O HTML

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

Ser renderizado no navegador assim: Este texto deve ser negrito.

Ser renderizado no navegador assim:

Este texto deve ser itlico.

Ser renderizado no navegador assim:

item de lista Outro item de lista

Como a pgina ficou vermelha?

Voltando aos atributos: <body style="background-color: red;">

Quais tags podem usar atributos?

Ento, quais so as partes que constituem uma tag?

Como construir links entre as pginas.

O que eu preciso para construir um link?

Como so os links entre minhas prprias pginas?

Como so os links dentro de uma mesma pgina?

Ser renderizado no navegador assim: Enviar e-mail para nobody em HTML.net

Existem outros atributos que eu deva conhecer?

Ser renderizado no navegador assim: HTML.net

Ser renderizado no navegador assim:

Onde consigo minhas imagens?

Existem outros atributos que eu deva conhecer?

Ser renderizado no navegador assim:

1</td> 2</td> 3</td> 4</td>

Ser renderizado no navegador assim: Clula 1 Clula 2 Clula 3 Clula 4

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

Ser renderizado no navegador assim:

A borda da tabela especificada em pixels.

Existem mais atributos?

O que posso inserir em tabelas?

O que mais existe?

Ser renderizado no navegador assim:

Uploading do seu site

Nesta lio voc aprender mais alguns conceitos tericos do HTML.

O que mais h para conhecer sobre HTML?

Validao? Porqu deveria eu fazer isto?

Este pargrafo em tamanho de fonte igual a 20px

Este pargrafo em fonte Cambria e tamanho 16px

Est parecendo que h uma grande quantidade de trabalho a executar

O que mais posso fazer com CSS?

Ser renderizado no navegador assim:

Ser renderizado no navegador assim:

Como funciona as CSS

A sintaxe bsica das CSS

Mas, onde colocamos o cdigo CSS? isto que veremos a seguir.

Aplicando CSS a um documento HTML

estilo.css body { background-color: #FF0000; }

Cor do primeiro plano: a propriedade 'color'

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

Images de fundo [background-image]

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

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

Imagem de fundo repetida [background-repeat]

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

Image de fundo fixa [background-attachment]

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

Posio da imagem de fundo [background-position]

Na tabela a seguir so mostrados alguns exemplos.