Lição HTML

Introduo
As pessoas imaginam que muito difcil construir um website. Isto no verdade! Qualquer um pode aprender como construir um website. Se voc continuar lendo, estar apto a construir um website em uma hora. Outros pensam - erroneamente - que necessrio softwares avanados e caros para construir websites. verdade que existem muitos softwares capazes de criar um website para voc. Alguns mais fechados que outros. Mas, se voc pretende trilhar o caminho certo, dever criar voc mesmo o website. Felizmente, isto simples voc j tem a sua disposio todos os softwares que presisa. O objetivo deste tutorial fornecer os conhecimentos bsicos que permitiro construir um website de forma correta. O tutorial parte do zero e no requer qualquer conhecimento prvio de programao. O tutorial no ensina tudo. Assim necessrio que voc se empenhe, pratique e consolide os ensinamento aqui contidos. Mas, no se aborrea - aprender como construir um website divertido e bastante satisfatrio quando voc trilha o caminho certo de aprendizado. Como tirar o melhor proveito do tutotial uma deciso sua. Ns sugerimos que voc estude somente duas ou trs lies por dia e pratique bastante tudo o que voc aprender em cada lio. OK. Chega de conversa. Vamos comear!
Lio 1: Vamos comear

Nesta primeira lio apresentaremos as ferramentas necessrias construo de um website.
O que necessrio?
muito provvel que voc j tenha as ferramentas que precisa. Voc tem um "navegador". Navegador um programa que permite visualizar e navegar por pginas na Internet. Voc est lendo est pgina em um navegador. No importa qual navegador voc usa. O mais comum o Microsoft Internet Explorer. Mais existem outros, tais como, Opera e Mozilla Firefox que podem ser usados.
Voc j deve ter ouvido falar ou at mesmo pode j ter usado programas tais como, Microsoft FrontPage, Macromedia Dreamweaver ou mesmo Microsoft Word, que podem - pelo menos anunciam que podem - criar websites para voc. Por ora, esquea estes programas! Eles no tm qualquer utilidade para voc na tarefa de codificar seu website. Voc precisar de um simples editor de textos. Se voc tem instalado o Windows, poder usar o Notepad, que normalmente pode ser encontrado no menu Programs em Accessories (Programas Acessrios):
Se voc no tem o Windows, use um editor de texto similar. Por exemplo, Pico (Linux) ou TextEdit (Mac). Notepad um editor de texto bsico e simples, mas excelente para codificao, porque no interfere no que voc est digitando. Com ele o controle todo e somente seu. O problema com programas que criam o website para voc, que eles vm com uma srie de funes pr-instaladas para voc escolher. Tudo dever ser projetado para se encaixar nestas funes padro. Assim, muitas vezes no possvel criar exatamente aquilo que voc planejou. Ou - mais frustante ainda - os programas inserem modificaes no cdigo que voc cria. Usando o Notepad ou qualquer editor de textos simples voc o nico responsvel pelo acertos ou pelos erros do seu cdigo.
Um navegador e o Notepad (ou editor similar) tudo o que voc precisa para acompanhar este tutorial e construir seu website.
Preciso estar online?

No. Voc no precisa estar conectado Internet - tanto para ler este tutorial como para construir seus websites. Se voc quer desconetar-se enquanto l este tutorial, voc poder imprimir ou simplesmente desconectar-se da Internet enquanto l a tela. Voc pode construir seu website no HD do seu computador e fazer o upload para a Internet quando terminar.
O que vem a seguir?

Passe para a prxima lio e leia sobre o HTML antes de comearmos a diverso a partir da Lio 3.
Lio 2: O que HTML?

Esta lio apresentar voc seu novo amigo, o HTML.
O que HTML?
HTML a "lngua me" do seu navegador. Resumindo uma longa histria, HTML foi inventado em 1990 por um cientista chamado Tim Berners-Lee. A finalidade inicial era a de tornar possvel o acesso e a troca de informaes e de documentao de pesquisas, entre cientistas de diferentes universidades. O projeto inicial tornou-se um sucesso jamais imaginado por Tim Berners-Lee. Ao inventar o HTML ele lanou as fundaes da Internet tal como a conhecemos atualmente. HTML uma linguagem que possibilita apresentar informaes (documentao de pesquisas cientficas) na Internet. Aquilo que voc v quando abre uma pgina na Internet a interpretao que seu navegador faz do HTML. Para visualizar o cdigo HTML de uma pgina use o menu "View" (Ver) no topo do seu navegador e escolha a opo "Source" (Cdigo fonte).
Para quem no conhece, o cdigo HTML pode parecer complicado, mas este tutorial ir tornar as coisas claras para voc.
Para que devo usar o HTML?

Se voc quer construir websites ter que conhecer HTML. Mesmo que voc use um programa para criar seu website, tal como o Dreamweaver, um conhecimento bsico de HTML ser necessrio para tornar as coisas mais simples e para criar um website de melhor qualidade. A boa notcia que HTML fcil de aprender e de usar. A partir das duas prximas lies voc j ter aprendido como construir seu primeiro website. HTML usado para construir websites. simples!
OK, mas o que significa H-T-M-L?

HTML a abreviatura de "HyperText Mark-up Language" - e isto tudo o que voc precisa saber por enquanto. Contudo, vamos detalhar isto.
Hyper o oposto de linear. Nos tempos antigos - quando mouse era apenas um rato caado por gatos - os programas de computadores rodavam linearmente: quando o programa executava uma ao tinha que esperar a prxima linha de comando para executar a prxima ao e assim por diante de linha em linha. Com HTML as coisas so diferentes - voc pode ir de onde estiver para onde quiser. Exemplificando: no necessrio que voc tenha visitado o site MSN.com antes de visitar o site HTML.net. Text texto e no h mais nada a acresentar. Mark-up significa marcao e o texto que voc escreve. Voc cria a marcao da mesma forma que escreve em um editor seus cabealhos, marcadores, negrito, etc Language significa linguagem e exatamente o que HTML ; uma linguagem. A linguagem HTML usa muitas palavras do ingls.
Neste tutorial voc aprender XHTML (Extensible HyperText Mark-up Language) que nada mais do que uma maneira mais bem estruturada de escrever HTML. Agora que voc j sabe o que HTML (e XHTML) vamos comear aplicando eles para: construir websites.
Lio 3: O que so tags HTML?

Voc j est em condies de aprender a chave do HTML - tags.
"Tags"?
Tags so rtulos usados para informar ao navegador como deve ser apresentado o website. Todas as tags tm o mesmo formato: comeam com um sinal de menor "<" e acabam com um sinal de maior ">".
Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de fechamento: </comando>. A diferena entre elas que na tag de fechamento existe um barra "/". Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento ser processado segundo o comando contido na tag. Mas, como toda regra tem sua exceo, aqui no HTML a exceo que para algumas tags a abertura e o fechamento se d na mesma tag. Tais tags contm comandos que no necessitam de um contedo para serem processados, isto , so tags de comandos isolados, por exemplo, um pulo de linha conseguido com a tag <br />. HTML tag - e nada mais do que tags. Aprender HTML aprender como usar as diferentes tags.
Voc pode mostrar alguns exemplos?

OK, a tag <b> informa ao navegador que todo o texto colocado entre <b> e </b> deve ser mostrado em negrito. (O comando "b" uma abreviao para "bold" - negrito.) Exemplo 1:
<b>Este texto deve ser em negrito.</b>
Vai ser apresentado no navegador, como mostrado a seguir:

Este texto deve ser em negrito.
As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que trata-se de um cabealho (h vem de "heading" - cabealho ), sendo <h1> o cabealho de primeiro nvel e aquele apresentado com o maior tamanho de texto, <h2> o cabealho de segundo nvel e aquele apresentado com tamanho de texto um pouco menor e <h6> o cabealho de sexto nvel e aquele apresentado com o menor tamanho de texto. Exemplo 2:
<h1>Este um ttulo</h1> <h2>Este um sub ttulo</h2>
Vai ser apresentado no navegador, como mostrado a seguir:
Este um ttulo
Este um subttulo As tags devem ser escritas com letras maisculas ou minsculas?
Para a maioria dos navegadores indiferente se voc usa maiscula, minscula ou mesmo uma mistura delas.<COMANDO>, <comando> ou <CoMaNdo> normalmente tem o mesmo efeito. Contudo a maneira correta usar minsculas. Ento, crie o hbito de escrever suas tags com minsculas.
Onde devo colocar todas estas tags?

Voc deve escrever suas tags em um documento HTML. Um website constituido por um ou mais documentos HTML. Quando voc navega na Web, voc est abrindo diferentes documentos HTML. Se voc passar para a prxima lio, em dez minutos estar construindo seu primeiro website.
Lio 4: Criando seu primeiro website

Com o que voc aprendeu nas lies anteriores est a alguns minutos de criar seu primeiro website.
Como?
Na lio 1 vimos o que necessrio para construir um website: um navegador e o Notepad (ou um editor de texto similar). Uma vez que voc esta lendo esta pgina, provavelmente est com seu navegador aberto. Agora abra outra janela do seu navegador de modo que voc tenha duas janelas na tela, uma para ler este tutorial e outra para visualizar o website que voc vai construir. Abra tambm o Notepad ( Iniciar Programas Acessrios):
Agora, estamos prontos para comear!
O que posso fazer?

Vamos comear com algo simples. Que tal uma pgina que diga: "Hurrah! Esta a minha primeira pgina web." Continue e voc ver como isto simples de fazer. HTML simples e lgico. O navegador l HTML de modo idntico ao que voc l um texto qualquer, de cima para baixo e da esquerda para a direita. Assim um documento HTML inicia com aquilo que deve ser a primeira coisa aparecer na pgina e termina com a ltima coisa a aparecer. A primeira coisa a fazer dizer ao navegador que voc vai "falar" com ele na linguagem HTML. Isto feito com a tag <html> (nenhuma novidade nisto). Ento, antes de mais nada digite "<html>" na primeira linha do documento, no Notepad. Como sabemos das lies anteriores, <html> uma tag de abertura e deve ser fechada com a tag de fechamento quando voc acabar de digitar seu documento HTML. Para termos certeza que no iremos esquecer de fechar a tag HTML, faa isso agora mesmo, digitando "</html>" localizada a algumas linhas abaixo, assim voc ir escrever seu documento entre as tags digitadas <html> e </html>.
A prxima coisa que o documento precisa um "head" (cabea), que fornece informaes sobre o documento e um "body" (corpo), que abriga o contedo do documento. Como HTML no seria nada se no fosse lgico, a "cabea" (<head> e </head>) fica em cima do "corpo" (<body> e </body>). Seu documento agora est como mostrado abaixo:
<html> <head> </head> <body> </body> </html>
Notar como estruturamos o cdigo em linhas diferentes (usar a tecla Enter para
pular para prxima linha) e tambm a indentao (recuos) do cdigo (usar a tecla Tab para indentar). A prncipio no faz qualquer diferena a maneira como voc estrutura (linhas e recuos na digitao) seu documento HTML. Mas um cdigo bem estruturado mais fcil de ler e entender, altamente recomendado que voc adote uma estrutura clara e ntida para seu HTML, usando linhas e indentao (recuos), como mostrado no exemplo acima. Se o seu documento est como o mostrado acima, voc construiu sua primeira pgina web - uma pgina particularmente chata e provalvelmente nada parecido com o que voc sonhou fazer quando comeou a ler este tutorial, mas de qualquer forma um tipo de website. Isto que voc fez ser um template base para seus futuros documentos HTML.
At aqui tudo bem, mas como colocar contedo no meu website?

Como voc j aprendeu, seu documento HTML composto de duas partes: um head e um body. Na seo head voc escreve informaes sobre a pgina e na seo body voc coloca as informaes que constituem a pgina. Por exemplo, para dar um ttulo ao documento, ttulo este que aparea no topo da barra do navegador voc dever usar a seo"head". A tag para acresentar um ttulo <title>:
<title>Minha primeira pgina web</title>
Notar que o ttulo no aparece na pgina propriamente dita. Tudo que voc quer que aparea na pgina contedo e dever ser colocado entre as tags "body".
Conforme combinamos, queremos uma pgina dizendo, "Hurrah! Esta a minha primeira pgina web." Este o texto que queremos comunicar e ele dever ser colocado na seo body. Ento digite na seo body o seguinte:
<p>Hurrah! Esta a minha primeira pgina web.</p>
A letra p na tag <p> a abreviatura para "paragraph" (pargrafo) que exatamente o que o texto - um texto pargrafo. Seu documento HTML agora est como mostrado a seguir:
<html> <head> <title>Minha primeira pgina web</title> </head> <body> <p>Hurrah! Esta a minha primeira pgina web.</p> </body> </html>
Pronto! Voc acaba de construir seu primeiro website! Agora basta que voc salve seu trabalho no HD e depois visualize no navegador:

No Notepad v ao menu "Arquivo" no topo da janela e escolha a opo "Salvar como...". Escolha "Todos os arquivos" no box "Salvar como tipo". Isto muito importante - caso voc no faa isto, o arquivo ser salvo como texto e no como documento HTML. Salve seu documento com o nome "page1.htm" (a extenso ".htm" indica que se trata de um documento HTML. A extenso ".html" d o mesmo resultado. Eu sempre uso ".htm", mas voc pode escolher a que voc preferir .htm ou .html). Voc pode salvar o documento onde voc quiser no seu HD - esteja certo de salvar em um lugar que depois voc possa achar com facilidade.
Agora v ao seu navegador:

No menu existente no topo do navegador v em "Arquivo" e escolha a opo "Abrir". Clique em "Procurar" no box que aparece. Localize o seu documento HTML e clique em "Abrir".
Voc dever ver no seu navegador: "Hurrah! Esta a minha primeira pgina web." Parabns! Se voc quer que o mundo todo veja sua pgina, v direto para a Lio 14 e aprenda como fazer upload da sua pgina para a Internet. Se no, tenha pacincia e continue lendo. A brincadeira apenas comeou.
Lio 5: O que voc j aprendeu?

Comece sempre com o template bsico que construmos na lio anterior:
<html> <head>
<title></title> </head> <body> </body> </html>
Coloque sempre o ttulo do seu documento na seo head: <title>Ttulo da sua pgina</title>. Ver na figura abaixo como o ttulo aparece no topo superior esquerdo do navegador:
O ttulo muito importante porque usado pelos mecanismos de busca (tais como o Google) para indexar seu website como mostrado a seguir para o site CSS para Web Design:
Na seo body voc escreve o contedo da sua pgina. Voc conhece algumas das mais importantes tags:
<p> usado para pargraos.</p> <b>Torna o texto negrito.</b> <h1>Cabealho</h1> <h2>Subttulo</h2> <h3>Sub-subttulo</h3>
Lembre-se, o nico caminho para aprender HTML por ensaio e erro. Mas, no se preocupe, voc no destruir seu computador e nem a Internet. Ento, faa seus experimentos e testes - esta a melhor maneira de ganhar experincia.
O que significa isto?

Ningum se tornar um bom criador de websites aprendendo os exemplos contidos neste tutorial. O que voc aprender neste tutorial simplesmente o bsico para criao - para se tornar um bom desenvolvedor voc dever descobrir caminhos por si mesmo em maneiras criativas. Ento mos obra. Comece suas experincias com tudo que voc aprendeu at agora.
O que fazer agora?

Tente criar algumas pginas. Por exemplo, construa uma pgina com um ttulo, um cabealho, algum texto, um subttulo e mais algum texto. No h nada contra fazer uma consulta no tutorial para construir as pginas, ou seja, a "cola" permitida. Porm, mais a frente, tente criar sem consultar - "cola" no permitida.
Lio 6: Mais tags HTML

E a? Voc construiu algumas pginas como sugerimos na lio anterior? No? Sim? Bem, a seguir um exemplo:
<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>
E agora?
Agora vamos aprender mais sete tags. Voc j sabe que pode obter negrito com a tag <b>, agora saiba que pode obter itlico letras inclinadas - com a tag <i>. J percebeu no ?, "i" vem de "italic". Exemplo 1:
<i>Este texto deve ser itlico.</i>
Ser renderizado no navegador assim: Este texto deve ser itlico. De modo similar voc pode fazer seu texto com letra menores usando a tag <small>: Exemplo 2:
<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.
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: Exemplo 3: 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.
Mais tags!
Como foi dito na Lio 4 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: Exemplo 4:
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 ): Exemplo 5:
<hr />
Exemplo 6:
<ul> <li>Um item de lista</li> <li>Outro item de lista</li> </ul>

Um item de lista Outro item de lista
Exemplo 7:
<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
Uau! Isto tudo?

Sim, por enquanto isto tudo. Aconselhamos, novamente, a fazer seus prprios experimentos, construindo algumas pginas usando as sete tags ensinadas nesta lio:
<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>
Lio 7: Atributos
Voc pode adicionar atributos s tags.
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. Exemplo 1:
<h2 style="background-color:#ff0000;">Eu adoro HTML</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: Exemplo 2:
<html>
<head> </head> <body style="background-color:#ff0000;"> </body> </html>
O cdigo acima renderiza uma pgina com cor de fundo vermelha - v em frente! 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. A seguir alguns exemplos: Branco: #ffffff Preto: #000000 (zeros) Vermelho: #ff0000 Azul: #0000ff Verde: #00ff00 Amarelo: #ffff00 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 facilitar as coisas ns desenvolvemos uma carta com as 216 cores mais usadas na web: Carta das 216 cores seguras para a Web. Para algumas cores, voc pode usar o nome das cores em ingls (white, black, red, blue, green e yellow - branco, preto, vermelho, azul, verde, amarelo). Exemplo 3:
<body style="background-color: red;">
Chega de cores. Voltemos 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 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 viceversa: 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. Este tutorial apresentou a voc, os atributos.
Ento, quais so as partes que constituem uma tag?

A constituio bsica de uma tag denominada elemento (por exemplo p em <p>). Assim, uma tag constituida de um elemento (por exemplo <p>), ou por um elemento e um ou mais atributos (por exemplo <p style="background-color:#ff0000;">). Simples!
Lio 8: Links
Nesta lio voc aprender como construir links entre 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 simples e pequenina 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:
Exemplo 1:
<a href="http://www.html.net/">Aqui um link para HTML.net</a>
Ser renderizado no navegador assim: Aqui um link para HTML.net
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 um link para HTML.net" 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:
Exemplo 2:
<a href="page2.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:
Exemplo 3:
<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:
Exemplo 4:
<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 "../../". Voc entendeu? Como alternativa 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>
Tudo fica claro com um exemplo:
Exemplo 5:
<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> </html>
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 (Nota: O nome de um atributo id deve comear com uma letra)
Posso criar link para mais alguma coisa?

Voc pode criar link para um endereo de e-mail. Isto feito de modo semelhante aos links para documentos.
Exemplo 6:
<a href="mailto:nobody@html.net">Enviar e-mail para nobody em HTML.net</a>

Enviar e-mail para nobody em HTML.net
A nica diferena que no lugar do endereo do documento voc escreve mailto: seguido pelo endereo de e-mail. Quando o link clicado o programa de e-mail padro do usurio aberto com o endereo do link j digitado na linha para destinatrio. Mas, ateno, isto s ir funcionar se o usurio tiver um programa de e-mail instalado na sua mquina. Faa uma experincia com este tipo de link clicando no exemplo acima.
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:
Exemplo 7:
<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".
Lio 9: Imagens
O que voc acha de poder adicionar uma imagem do Tim Bernes-Lee o inventor do HTML no centro da sua pgina?
Ops, isto soa como um desafio...

Talvez, mas muito fcil de fazer. Tudo o que voc precisa da nossa j conhecida tag: Exemplo 1:
<img src="tim.jpg" alt="Tim Berners-Lee" />
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 abertuta e fechamento. Semelhante a tag <br /> que no precisa de um texto inserido nela. "tim.jpg" o nome do arquivo da imagem que voc quer inserir na pgina. ".jpg" a extenso do tipo de imagem. Tal como a extenso ".htm" para arquivos de documentos HTML, ".jpg" informa ao navegador que o arquivo uma imagem. So 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 melhor a compresso tanto menor o tamanho do arquivo e tanto mais rpido a pgina carregada no navegador. Como voc deve saber por experincia prpria, pginas desnecessariamente "pesadas" para carregar so frustantes para o usurio. Tradicionalmente os formatos GIF e JPEG tem sido os mais empregados, mas ultimamente o formato PNG tem se tornado cada vez mais popular (notadamente em detrimento do formato GIF). 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. Um programa de edio de imagens a ferramenta essencial para criao de websites com grande impacto visual. Lamentavelmente, nenhum editor de imagem vem instalado com o Windows ou qualquer outro sistema operacional. Assim, voc deve considerar a aquisio do Paint Shop Pro, do PhotoShop ou do Macromedia Fireworks, que so os trs melhores editores de imagens atualmente existentes no mercado. Contudo, como j dissemos, no h necessidade de comprar um programa caro para acompanhar este tutorial. Por enquanto, voc poder fazer o download de um exelente editor de imagens chamado Irfan View que freeware, isto , no custa nada. Ou voc pode fazer download de imagens existentes na web. Mas, por favor, se optar por fazer o download de imagens da Internet, cuidado para no violar direitos autorais de terceiros. A seguir mostro como fazer o download de uma imagem existente na Internet: 1. Clique com o boto direito do mouse na imagem da Internet. 2. No menu que aparece escolha a opo "Salvar imagem como...". 3. Na janela que se abre, escolha o lugar no seu computador para salvar e clique "Salvar". Faa isto com a imagem abaixo e salve no seu computador no mesmo local onde est localizado seus documentos HTML. (Notar que dever ser salvo o arquivo com formato PNG: logo.png):
Agora voc pode inserir a imagem nos seus documentos. Tente fazer isto em um documento que voc criou neste tutorial.
Isto tudo o que eu preciso saber sobre imagens?

Existem mais algumas coisinhas que voc precisa saber. Primeiro, voc pode inserir imagens que esto localizadas em outros diretrios ou at mesmo em outros websites: Exemplo 2:
<img src="images/logo.png">
Exemplo 3:
<img src="http://www.html.net/logo.png">
Segundo, imagens podem ser links: Exemplo 4:

<a href="http://www.html.net"> <img src="logo.png"></a>
Ser renderizado no navegador assim: (clique na imagem):
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: Exemplo 5:
<img src="logo.gif" alt="logotipo do HTML.net">
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: Exemplo 6:
<img src="logo.gif" title="Aprenda HTML no site HTML.net">
Coloque o ponteiro do mouse sobre a imagem, sem clicar e aparecer uma caixa pop-up com o texto "Aprenda HTML no site HTML.net" . Dois outros atributos importantes so width e height: Exemplo 7:
<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). Ao contrrio de centmetros, pixel uma inidade 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 eheight, a imagem ser inserida com seu tamanho real. Com width e height voc pode alterar o tamanho da imagem: Exemplo 8:
<img src="logo.gif" width="32" height="32">
Contudo, 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. Por enquanto isto tudo sobre o Tim Berners-Lee e sobre imagens.
Lio 10: Tabelas

Tabelas so usadas para apresentar "dados tabulares" , isto , informao que deva ser apresentada em linhas e colunas, de forma lgica.
difcil?
Criar tabelas em HTML pode parecer complicado, mas se voc ficar frio e acompanhar passo a passo a explicao, ver que tudo evidente - tal como acontece com tudo no HTML. Exemplo 1:
<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 <tr> e <td>?

Como voc deve ter visto no exemplo acima, este foi o cdigo HTML mais complicado que escrevemos 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. Evidente. <tr> significa "table row" - linha de tabela - comea
e termina e uma linha
horizontal da tabela. Tambm evidente. <td> significa "table data" - dados da tabela. comea e termina cada clula contida nas linhas da tabela. Tudo simples e evidente.
Eis o acontece no Exemplo 1: 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 Clula 2 Clula 3 Clula 4 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. Exemplo 2:
<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
1</td> 2</td> 3</td> 4</td> 5</td> 6</td> 7</td> 8</td> 9</td> 10</td> 11</td>
<td>Clula 12</td> </tr> </table>
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! existem atributos. Por exemplo, o atributo border que usado para definir a espessura de uma borda em volta da tabela: Exemplo 3:
<table border="1"> <tr> <td>Clula 1</td> <td>Clula 2</td> </tr> <tr> <td>Clula 3</td> <td>Clula 4</td> </tr> </table>
Ser renderizado no navegador assim: Clula 1 Clula 2 Clula 3 Clula 4 A espessura da borda especificada em pixels (Ver lio 9) Tal como fizemos com as imagens, podemos definir width - largura - em pixels, para uma tabela - ou alternativamente em percentagem da tela: Exemplo 4:
<table border="1" width="30%">
Este exemplo renderiza no navegador uma tabela com largura igual a 30% da largura da tela. Tente voc mesmo.
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, center 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).
Exemplo 5:
<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 destinam-se a 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). Adiante veremos isto. Agora, coloque em prtica tudo que voc aprendeu e crie vrias tabelas de diferentes tamanhos, usando diferentes atributos e contedos. Isto ir ocupar voc por horas.
Lio 11: Mais tabelas

O ttulo "Mais tabelas" pode sugerir uma lio enfadonha. Mas, veja as coisas pelo lado positivo, depois que voc se tornar um mestre em tabelas nada mais do HTML poder desafi-lo.
O que mais existe?

Os dois atributos colspan e rowspan so usados para criar tabelas singulares. a abreviao para "column span". Colspan usada na tag <td> para indicar quantas colunas estaro contidas em uma clula.
Colspan
Exemplo 1:
<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>
Ser renderizado no navegador assim: Clula 1 Clula 2 Clula 3 Clula 4 Definindo colspan em "3", a clula na primeira linha conter trs colunas. Se voc definir colspan em "2", a clula conter duas colunas e assim ser necessrio inserir mais uma clula na primeira linha para que tenhamos na primeira linha as colunas em acordo com as da segunda linha. Exemplo 2:
<table border="1"> <tr> <td colspan="2">Clula 1</td> <td>Clula 2</td> </tr> <tr> <td>Clula 3</td> <td>Clula 4</td> <td>Clula 5</td> </tr> </table>
Ser renderizado no navegador assim: Clula 1 Clula 2 Clula 3 Clula 4 Clula 5
Que tal rowspan?

Como voc j deve ter concluido, rowspan especifica quantas linhas estaro contidas em uma clula: Exemplo 3:
<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: Clula 2 Clula 1 Clula 3 Clula 4 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. Confuso? Bem, isto na verdade no descomplicado e voc pode se perder. Assim, sempre uma boa idia, desenhar a tabela em uma folha de papel antes de comear a codificao HTML. No est confuso? Ento v em frente e crie algumas tabela com uso de colspan e rowspan.
Lio 12: Layout (CSS)

No seria timo se voc pudesse dar sua pgina o layout que ela merece?
Claro! mas como fao isto?

Para o layout da sua pgina use Cascading Style Sheets (CSS) - Folhas de Estilo em Cascata. Nesta lio voc ter uma breve introduo s CSS. Depois voc poder aprender CSS desde o incio no nosso tutorial CSS. Assim, considere esta lio apenas um aperitivo. 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). Como mostrado na Lio 7, CSS pode ser adicionado com uso do atributo style. Por exemplo, voc pode definir o tipo e o tamanho da fonte em um pargrafo: Exemplo 1:
<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:20px; font-family:courier">Este pargrafo em fonte Courier e tamanho 20px</p>
Este pargrafo em tamanho de fonte igual a 20px

Este pargrafo em fonte Courier
Este pargrafo em fonte Courier e tamanho 20px

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: Exemplo 2:
<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>
Ver exemplo
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');">
Tente inserir estes cdigos em algumas das suas pginas - experimente as duas formas de inserir, tanto como mostrado acima como colocando as CSS na seo head do documento.
CSS no nada mais do que cores e tipos de fontes?

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. Exemplo 3:
<p style="padding:25px;border:1px solid red;">Eu amo CSS</p>
Eu amo CSS
Com a propriedade float um elemento poder "flutuar" esquerda ou direita. O exemplo seguinte ilustra este princpio: Exemplo 4:
<img src="bill.jpg" alt="Bill Gates" style= "float:left;" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat... 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: Exemplo 5:
<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
Ver exemplo
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. Tente voc mesmo. Fcil e legal, eh?
Legal sim. Mas, fcil?

Voc no aprende CSS em 10 minutos. E como foi dito acima, nesta lio voc teve apenas uma breve introduo s CSS. No futuro aprenda mais no nosso Tutorial CSS.
Por enquanto concentre-se no HTML, e passe para a prxima lio onde voc aprender como publicar seu website na Internet para que o mundo todo o veja!
Lio 13: Uploading pginas

At agora somente voc conseguiu visualizar suas pginas. Chegou a hora de mostr-las para o mundo todo.
O mundo est preparado para ver suas pginas?

O mundo est preparado sim - voc, em breve, estar tambm. Para publicar seu trabalho na Internet, voc precisa somente de espao em um servidor e um programa FTP gratuito. Se voc costuma acessar a Internet j deve ter visto que existem vrios servios gratutitos de hospedagem de sites. Seu endereo no servidor ser alguma coisa parecida com http://home.servidor.com/~nomedousuario. Voc tem que ativar o servio. Informe-se como fazer isto na documentao fornecida pelo servio de hospedagem. Outra opo obter um espao gratuito de um servidor na Internet. Isto igual a registrar uma conta de e-mail (como por exemplo, obter um endereo de e-mail do hotmail) voc pode registrar-se gratuitamente para obter um espao em um servidor na Internet. Existem vrias companhias que oferecem este servio gratuito entre elas a Angelfire (clique em "Sign Up" e escolha membro gratuito - ou faa uma busca no Google para encontrar um servio gratuito com registro em portugus) - isto um processo bem rpido. Para acessar o servidor voc precisa conhecer o "Nome do seu servidor" (Por exemplo, ftp.angelfire.com) e ter um nome de usurio e senha.
Isto tudo que eu preciso?

Para acessar o servidor e publicar as pginas voc precisa de um programa FTP. Voc no deve ter um programa destes ainda, mas existem vrios deles na Internet para download e so gratuitos. Existem muitos programas FTP. Um dos melhores o FileZilla, e gratuito . Voc pode obter o FileZilla em filezilla.sourceforge.net.
Como eu fao o upload das pginas?

Abaixo fornecemos um exemplo de como fazer isto usando o servidor Angelfire e o programa FileZilla. Este procedimento mais ou menos igual para qualquer programa FTP. Conecte-se Internet e abra o programa FTP. Insira "Host Name" ("ftp.angelfire.com" no "Address"), nome do usurio (em "User") e senha (em "Password") clique "Connect". Voc agora tem acesso ao servidor. Em um lado da janela do programa voc
ver os diretrios e arquivos do seu computador ("Local Site"), e no outro o do servidor ("Remote Site"):
Ache os seus documentos HTML e imagens a serem publicadas (no "Local site") e transfira para o servidor ("Remote site") simplesmente dando um clique duplo nos arquivos. Agora o mundo todo poder ver seu site! (Por exemplo, no endereo http://www.angelfire.com/folk/htmlnet/pagina1.htm). D a uma das pginas o nome de "index.htm" (ou "index.html") e ela ser automaticamente a pgina de entrada no site, ou seja, basta digitar http://www.angelfire.com/folk/htmlnet (sem qualquer nome de arquivo) e abrir http://www.angelfire.com/folk/htmlnet/index.htm. Para mais adiante ser uma boa idia comprar um domnio (espao no servidor) s para voc (www.seu-nome.com) e assim ter um nome do site bem mais curto e fcil de guardar que aqueles fornecidos por um servio gratuito da Internet. Voc pode encontrar na Internet vrias firmas que vendem domnio. Faa uma busca do Google.
Lio 14: Web standards 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 (yep! o grande sujeito que inventou o HTML). Mas, este tem sido um rduo e longo caminho. 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's, o Internet Explorer, no era melhor do que o Netscape no suporte s normas do HTML. Mas, a Microsoft resolveu distribuir seu navegador gratuitamente (isto sempre agrada a todos) 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. O que vem a seguir histria. Nos dias atuais as normas HTML esto na sua verso 4.01 e no XHTML. Hoje em dia o Internet Explorer que detm quase 90% do mercado. O Internet Explorer ainda tem seus elementos prprios, mas oferece suporte para as normas HTML do W3C. Os navegadores Mozilla, Opera e Netscape tambm suportam as normas. Ento, 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.
Legal! Posso anunciar?

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: Exemplo 1:
<!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. abreviao de "XML-Name-Space" e deve ter sempre o valor http://www.w3.org/1999/xhtml. Isto tudo o que voc precisa saber. Se voc tem o hbito ou gosta de se aprofundar e conhecer coisas complicadas poder ler mais sobre namespaces no site do W3C.
xmlns
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"). Uma DTD informar ao navegador como deve ser lido e renderizado o HTML. Use o exemplo mostrado, como um template para todos os seus futuros documentos HTML. O DTD importaante ainda, para a validao da pgina.
Validao? Porqu deveria eu fazer isto?

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.
Lio 15: Dicas finais

Congratulaes, voc chegou na ltima lio.
Ento, agora eu j sei tudo?

Voc aprendeu um bocado de coisas e j est em condies de construir seu website. No entanto o que voc aprendeu o bsico e ainda h muita coisa a ser aperfeioada. Podemos dizer que voc construiu uma base slida para continuar e se aprofundar no assunto. Nesta ltima lio, daremos umas dicas finais:
Para comear, aconselhamos a escrever seus documentos HTML de forma ordenada e estruturada. Assim fazendo voc estar no s mostrando aos outros que possui uma base slida de conhecimento mas tambm estar facilitando a leitura, interpretao e manuteno do cdigo. Siga as normas e valide seu cdigo. Mas, no faa disto uma fonte de stress. Escreva um XHTML claro, use o DTD e valide suas pginas no validator.w3c.org. Coloque contedos nas suas pginas. Lembre-se que HTML apenas a ferramenta que possibilita apresentar informao na Internet, assim necessrio que haja a informao a ser apresentada ou seja, o contedo. Pginas lindas e bem desenhadas so timas, mas as pessoas buscam informao na Internet. Evite encher suas pginas com imagens pesadas e outros "balangandans" que voc encontra na Internet. Isto faz com suas pginas demorem a carregar e frustante para o usurio. Pginas que demoram mais de 20 segundos para carregar podem perder at 50% dos seus visitantes. Lembre-se de cadastrar seu site nos sites de busca, de modo a que outras pessoas, alm da sua famlia, possam encontr-las e visit-las. Na pgina de entrada dos sites para cadastro em mecanismos de busca voc encontrar um link para adicionar seu site (O mais importante o Google mas, existem outros tais como, DMOZ, Yahoo, AltaVista, AlltheWeb e Lycos). Neste tutorial voc aprendeu a usar o Notepad, que um simples e fcil editor de textos, contudo talvez voc agora possa pensar em usar um editor mais sofisticado com mais possibilidades e ferramentas. Voc encontra uma listagem e sumrio de diferentes editores em Download.com.
Como eu aprendo mais?

Antes de mais nada muito importante que voc continue a trabalhar e experimentar com tudo que voc aprendeu neste tutorial. Quando encontrar algum site que contenha uma coisa que voc ache interessante, estude o cdigo do site. No seu navegador v ao menu "View" - "Ver" e escolha "Source" - "Cdigo Fonte" para ver o cdigo do site.
Procure na Internet por artigos e tutoriais HTML. Existem muitos sites com timos contedos sobre HTML. Leia e faa perguntas em listas de discusso e fruns na Internet. Um timo lugar o frum XHTML do iMasters onde voc sempre encontra algum disposto a ajudar. E para terminar - assim que voc se achar pronto - continue e aprenda CSS no nosso Tutorial CSS. S nos resta desejar a voc que passe horas agradveis ao lado do seu novo amigo, o HTML. Vejo voc na Internet :-)
Introduo
Folhas de estilos em cascata Cascading Style Sheets (CSS) uma ferramenta fantstica para construo do layout dos seus websites. Permite que voc projete websites com uma tcnica completamente diferente da convencional e possibilita uma considervel reduo de tempo de trabalho. Conhecer CSS uma necessidade para qualquer um envolvido com o projeto web. Este tutorial iniciar voc nas CSS em algumas poucas horas. fcil de entender e ensinar a voc todas as tcnicas sofisticadas. Aprender CSS divertido. medida em que voc for progredindo no tututorial no esquea de dedicar algum tempo para fazer seus experimentos com o que for aprendendo em cada lio. Para usar CSS necessrio um conhecimento bsico de HTML. Se voc no est familiarizado com HTML, consulte nosso tutorial HTML antes de comear com CSS.
Quais softwares eu precisarei?

Por favor, evite usar softwares tais como FrontPage, DreamWeaver ou Word para acompanhar este tutorial. Softwares avanados no facilitaro seu aprendizado de CSS. Ao contrrio, eles colocaro limites para voc e atrasaro seu aprendizado. Tudo o que voc precisa de um simples e gratuito editor de texto. Por exemplo, Microsoft Windows vem com um programa chamado Notepad. Normalmente este programa est no diretrio Accessories no menu Start => Programs. Alternativamente voc pode usar um editor de texto similar, tal como, Pico para Linux ou Simple Text para Macintosh. Um editor de texto simples o ideal para o aprendizado de HTML e de CSS porque eles no afetam e nem modificam o cdigo que voc digita. Assim os acertos e erros de codificao devem-se exclusivamente a voc no ao software que voc utiliza. Voc pode usar qualquer navegador parta acompanhar este tutorial. Ns aconselhamos que voc mantenha seu navegador sempre atualizado e utilize a ltima verso disponvel. Um navegador e um editor de textos simples tudo o que voc precisa.
Vamos comear!
Lio 1: O que CSS?

Talvez voc j tenha ouvido falar em CSS, mas no saiba o que significa exatamente. Nesta lio voc saber o que e para que serve CSS. CSS a abreviatura para Cascading Style Sheets. Folha de Estilos em Cascata
O que eu posso fazer com CSS?

CSS uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. Aguarde e voc ver! HTML pode ser (in)devidamente usado para definir o layout de websites. Contudo CSS proporciona mais opes e mais preciso e sofisticado. CSS suportado por todos os navegadores atuais. Depois de estudar algumas poucas lies deste tutorial, voc estar em condies de projetar uma folha de estilos, usando CSS para dar um grande visual ao seu website.
Qual a diferena entre CSS e HTML?

HTML usado para estruturar contedos. CSS usado para formatar contedos estruturados. OK, isto soa um tanto tcnico e confuso. Mas, por favor continue lendo. Tudo far sentido em breve. Em tempos passados quando a Madonna era virgem e um sujeito chamado Tim Berners Lee inventou a World Wide Web, a linguagem HTML era usada somente para estruturar textos. Um autor podia marcar seus textos definindo "isto um cabealho " ou "isto um pargrafo" usando tags HTML tais como <h1> e <p>. medida que a Web ganhava popularidade, os designers comeavam a sentir a necessidade de encontrar meios de construir layout para os documentos online. Para suprir estas necessidades os fabricantes de navegadores (quela poca a Netscape e a Microsoft) inventaram novas tags HTML tais como, por exemplo a tag <font> que se diferenciava das tags originais do HTML pelo fato de destinar-se layout e no estrutura. Isto adicionalmente teve o efeito de disvirtuar o emprego de tags inicialmente projetadas para estrutura como por exemplo a tag <table> que passaram a ser empregadas para layout. Muitas destas novas tags para layout como a tag <blink> eram suportadas somente por um determinado tipo de navegador. A frase "Voc precisa do navegador X para visualizar esta pgina" tornou-se comum nos websites.
CSS foi inventada para solucionar esta situao, colocando disposio dos web designers meios sofisticados de projetar layouts suportados por todos os navegadores. E ao mesmo tempo a separao dos estilos de apresentao da marcao dos contedos torna a manuteno dos sites bem mais fcil.
Quais so os benefcios do uso de CSS?

CSS uma revoluo no mundo do web design. Os benefcios concretos do uso de CSS incluem:

controle do layout de vrios documentos a partir de uma simples folha de estilos; maior preciso no controle do layout; aplicao de diferentes layouts para servir diferentes mdias (tela, impressora, etc.); emprego de variadas, sofisticadas e avanadas tcnicas de desenvolvimento.
Na prxima lio veremos com maiores detalhes como funciona CSS e como comear seu estudo.
Lio 2: Como funciona 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. Assim, se voc est acostumado a usar HTML para layout ir reconhecer muitos dos cdigos que usaremos. Vamos dar uma olhada em um exemplo concreto.
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:
Mas, onde colocar 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. Recomendamos que voc foque no terceiro mtodo, ou seja o mtodo externo.
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 style.css e est localizada no diretrio style. Tal situao est mostrada a seguir:
O "truque" criar um link no documento HTML (default.htm) para a folha de estilos (style.css). O link criado em uma simples linha de cdigo HTML como mostrado a seguir:
<link rel="stylesheet" type="text/css" href="style/style.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 o que aprendemos.
Faa voc mesmo

Abra o Notepad (ou qualquer outro editor de texto que queira usar) e crie dois arquivos um arquivo HTML e um arquivo CSS com os seguintes contedos:
default.htm
<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>
style.css
body { background-color: #FF0000; }
Salve os dois arquivos no mesmo diretrio. Lembre-se de salvar os arquivos com a extenso apropriada (".css" e ".htm") Abra default.htm no seu navegador e veja uma pgina com o fundo vermelho. Parabns! Voc construiu sua primeira folha de estilos!
Prossiga para a prxima lio onde abordaremos algumas propriedades CSS.
Lio 3: Cores e fundos

Nesta lio voc aprender 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. Sero explicadas as seguintes propriedades CSS:

color background-color background-image background-repeat background-attachment background-position background
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;
Ver exemplo
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 { background-color: #FFCC66;
} h1 { color: #990000; background-color: #FC9804; }
Ver exemplo
Notar 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. Usaremos a imagem de uma borboleta para exemplificar a aplicao de imagens de fundo. Voc pode fazer o download da imagem mostrada abaixo e us-la nos seus experimentos (clique com o boto direito do mouse sobre a imagem e escolha "salvar imagem como") ou voc poder usar uma outra imagem qualquer ao seu gosto.
Para inserir uma imagem de fundo na pgina basta aplicar a propriedade backgroundimage ao elemento <body> e especificar o caminho para onde est gravada a imagem.
body { } h1 { color: #990000; background-color: #FC9804; }
background-color: #FFCC66; background-image: url("butterfly.gif");
Ver exemplo
NB: Notar como foi especificado o caminho para a imagem usando url("butterfly.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/butterfly.gif") ou at mesmo hosped-la na Internet: url("http://www.html.net/butterfly.gif").
Imagem de fundo repetida [background-repeat]

No exemplo anterior voc observou que a imagem da borboleta 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. Value
Background-repeat: repeat-x background-repeat: repeat-y background-repeat: repeat background-repeat: norepeat
Description A imagem se repete na horizontal A imagem se repete na vertical A imagem se repete na tanto na horizontal como na vertical A imagem no se repete
Example Ver exemplo Ver exemplo Ver exemplo Ver exemplo
Por exemplo, o cdigo mostrado a seguir para que a imagem no se repita na tela:
body {
background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat;
} h1 { } color: #990000; background-color: #FC9804;
Ver exemplo
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 imegem que rola. Description Example Background-attachment: scroll A imagem rola com a pgina Ver exemplo Background-attachment: fixed A imagem fixa Ver exemplo Por exemplo, o cdigo abaixo fixa a imagem na tela.
body {
Value
} h1 {
background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed;
color: #990000; background-color: #FC9804; }
Ver exemplo
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 . Value

background-position: 2cm 2cm background-position: 50% 25% background-position: top right
Description A imagem posicionada a 2 cm da esquerda e 2 cm para baixo na pgina A imagem centrada na horizontal e a um quarto (25%) para baixo na pgina A imagem posicionada no canto superior direito da pgina
Example Ver exemplo Ver exemplo Ver exemplo
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 {
color: #990000; background-color: #FC9804; }
Ver exemplo
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("butterfly.gif") no-repeat fixed right bottom;
A declarao abreviada deve seguir a seguinte ordem:

[background-color] | [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 backgroundposition no foram declaradas no cdigo mostrado a seguir:
background: #FFCC66 url("butterfly.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).
Sumrio
Nesta lio voc aprendeu tcnicas que no so possveis com uso de HTML. A brincadeira continua na prxima lio onde examinaremos as possibilidades de estilizao das fontes.
Lio 4: Fontes
Nesta lio 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. Descreveremos as seguintes propriedades CSS:

font-family font-style font-variant font-weight font-size font
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". A diferena est mostrada na figura a seguir:
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;}
Ver exemplo
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;}
Ver exemplo
Fonte variante [font-variant]

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

A propriedade font-weight define quo negrito ou "pesada" deve ser renderizada a fonte. 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;}
Ver exemplo
Tamanho da fonte [font-size]

On tamanho da fonte definido pela propriedade font-size. Existem muitas unidades (p. ex.:. pixels e percentagens) 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;}
Ver exemplo
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. Muitos usurios tm restries, como por exemplo, pessoas idosas, pessoas com viso limitada ou as que usam um monitor de baixa qualidade. Para fazer seu site acessvel a todos, voc dever usar unidades como '%' ou 'em'. Abaixo uma figura mostrando como ajustar o tamanho das fontes nos navegadores Mozilla Firefox e 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
Sumrio
Voc acaba de aprender algumas possibilidades relativas a fontes. Lembre-se que a grande vantagem de especificar fontes usando CSS que voc poder alterar em alguns minutos, as fontes de um website inteiro. CSS economiza tempo e facilita sua vida. Na prxima lio veremos as propriedades para textos.
Lio 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:

text-indent text-align text-decoration letter-spacing text-transform
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;
Ver exemplo
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: justify; text-align: center;
text-align: right;
Ver exemplo
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: line-through; text-decoration: overline; text-decoration: underline;
Ver exemplo
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 { } p { } letter-spacing: 3px; letter-spacing: 6px;
Ver exemplo
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" transformase 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;
Ver exemplo
Sumrio
Nas trs ltimas lies aprendemos vrias propriedades CSS, mas h muito mais ainda a aprender com CSS. Na prxima lio veremos os links.
Lio 6: Links
Voc pode aplicar aos links tudo que aprendeu nas lies anteriores (i.e. 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; }
Ver exemplo
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; }
Ver exemplo
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; }
Ver exemplo
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; }
Ver exemplo
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 5, 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; }
Ver exemplo
Exemplo 1b: UPPERCASE e lowercase

Na lio 5 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; }
Ver exemplo
Os exemplos mostrados do uma idia das inmeras possibilidades de combinao de diferentes propriedades. Voc pode criar seus prprios efeitos faa uma tentativa!
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. At minha me sabe disto! 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 5, 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 juntamente com outras propriedades para as quatro pseudo-classes.
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; }
Ver exemplo
Sumrio
Nesta lio voc aprendeu pseudo-classes, usando algumas propriedades j estudadas nas lies anteriores. Isto deve ter proporcionado uma idia das possibilidades das CSS.
Na prxima lio ensinaremos como definir propriedades para elementos especficos e grupamentos de elementos.
Lio 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 iremos responder nesta lio.
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>
Ver exemplo
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; }
Ver exemplo
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;
Ver exemplo
Como mostrado no exemplo acima, podemos definir propriedades para um elemento especfico usando um seletor #id na folha de estilos para o documento.
Sumrio
Nesta lio voc aprendeu que com o uso dos seletores class e id, possvel definir propriedades CSS para elementos especficos. Na prxima lio trataremos de dois elementos do HTML largamente usados com as CSS: <span> e <div>.
Lio 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 de autoria de Benjamin Franklin:
<p>Dormir cedo e acordar cedo faz o homem saudvel, rico e sbio.</p>
Vamos supor que queremos enfatizar na cor vermelha os benefcios apontados por Mr. Franklin pelo fato de no se passar o dia dormindo. 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="benefit">saudvel</span>, <span class="benefit">rico</span> e <span class="benefit">sbio</span>.</p>
A folha de estilos:
span.benefit { color:red; }
Ver exemplo
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; }
Ver exemplo
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.
Sumrio
Na lio7 e 8 voc aprendeu seletores id e class e elementos <span> e <div>. Voc agora j deve estar apto a agrupar e identificar razoalvelmente todas as partes de um documento, o que um grande passo na direo de tornar-se um mestre nas CSS. Na lio 9 veremos o box model.
Lio 9: O 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.
Sumrio
Nesta lio voc foi apresentado ao box model. Nas trs lies seguintes iremos detalhar como criar e controlar elementos no box model.
Lio 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 Definindo padding de um elemento
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). Ver o diagrama mostrado na lio 9. 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;
Ver exemplo
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: 5px 50px 5px 50px; margin: 100px 40px 10px 70px;
Ver exemplo
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: orange; background: yellow;
Ver exemplo
Definindo padding para os cabealhos, alteramos a quantidade de enchimento existente ao redor de cada um deles:
h1 { } h2 { background: orange; padding-left:120px; }
background: yellow; padding: 20px 20px 20px 80px;
Ver exemplo
Sumrio
Voc est no caminho para se tornar um mestre em CSS box model. Na prxima lio veremos com detalhes como atribuir bordas coloridas e formas aos elementos.
Lio 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.
border-width border-color border-style Exemplos de definio de bordas border
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 {
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;
Ver exemplo
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;
Ver exemplo
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;
Sumrio
Nesta lio aprendemos que so infinitas as possibilidades de estilizao de bordas com CSS.
Na prxima lio veremos como definir as dimenses do box model - height e width.
Lio 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.

width height
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; }
Ver exemplo
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; }
Ver exemplo
Sumrio
Nas Lies9, 10, 11 e 12 voc aprendeu os fundamentos do box model em CSS. Como podemos notar o box model fornece uma srie de novas opes de estilizao. At agora, voc deve ter usado tabelas para criar seus layouts, porm com CSS e o box model voc, a partir de agora, estar capacitado a criar layouts mais elegantes, precisos e em conformidade com as recomendaes do W3C.
Lio 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:
Como isto feito ?

O HTML para o exemplo acima mostrado a seguir:
<div id="picture"> <img src="bill.jpg" alt="Bill Gates"> </div> <p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</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; }
Ver exemplo
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>Haec disserens qua de re agatur et in quo causa consistat non videt...</p> </div> <div id="column2"> <p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p> </div> <div id="column3"> <p>nam nihil esset in nostra potestate si res ita se haberet...</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
Ver exemplo 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="bill.jpg" alt="Bill Gates"> </div> <h1>Bill Gates</h1> <p class="floatstop">causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</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; }
Ver exemplo
Sumrio
Floats so muito teis em vrias situaes e frequentemente usados em conjunto com posicionamento. Na prxima lio veremos como posicionar um box tanto de maneira relativa como absoluta.
Lio 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. Nesta lio veremos os seguintes itens:

O princpio de posicionamento CSS Posicionamento absoluto Posicionamento relativo
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 (ver lio 9) o cabealho pode ser estilizado para ser apresentado como mostrado abaixo:
Se quisermos o cabealho posicionado a 100px do topo do documento e a 200px esquerda, podemos usar o seguinte CSS:
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;
Ver exemplo
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:
#dog1 { position:relative; left: 350px; bottom: 150px; position:relative; left: 150px; bottom: 500px;
} #dog2 {
} #dog3 { position:relative; left: 50px; bottom: 700px;
Ver exemplo
Sumrio
Nas duas lies anteriores voc aprendeu como flutuar e posicionar elementos. Estes dois mtodos posibilitam a voc construir o layouy sem uso das ultrapassadas tabelas e imagens transparentes no HTML. Use CSS. mais preciso, mais vantajoso e muito mais fcil de manutenir.
Lio 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; top: 100px; z-index: 1; } #jack_of_diamonds { position: absolute; left: 115px;
top: 115px; z-index: 2;
#queen_of_diamonds { position: absolute; left: 130px; top: 130px; z-index: 3; } #king_of_diamonds { position: absolute; left: 145px; top: 145px; z-index: 4; } #ace_of_diamonds { position: absolute; left: 160px; top: 160px; z-index: 5; }
Ver exemplo
O mtodo simples, mas as possibilidades so muitas. Voc pode colocar imagens sobre textos, texto sobre texto, etc.
Sumrio
Layers podem ser usados em muitas situaes. Tente, por exemplo, usar z-index para criar efeitos em cabealhos no lugar de usar imagens. Por um lado mais rpido carregar texto na pgina e por outro, texto mais amigvel aos dispositivos de indexao.
Lio 16: Web-standards e validao

W3C a sigla para World Wide Web Consortium, uma organizao independente que gerencia as normas para codificao na Internet (isto , HTML, CSS, XML e outros). Microsoft, Fundao Mozilla e muitas outras organizaes so membros do W3C e formam um consenso sobre o futuro desenvolvimento de normas. Se voc tem alguma experincia com web design, provavelmente sabe que h uma grande diferena na maneira como diferentes navegadores renderizam uma pgina. frustante e requer um consumo de muito tempo, criar uma pgina que possa ser visualizada consistentemente no Mozilla, Internet Explorer, Opera e no restante dos navegadores existentes. A idia da normatizao criar um consenso e encontrar um denominador comum para uso de tecnologias para a Web. Isto significa que seguindo as normas, um
desenvolvedor ter a certeza de que sua criao ser tratada de maneira apropriada em diferentes plataformas. Assim, ns recomendamos que voc se beneficie do trabalho desenvolvido pelo W3C e valide sua CSS para estar em conformidade com as normas.
Validador CSS
Para facilitar a verificao aos preceitos das normas CSS, o W3C desenvolveu um validador que faz uma verificao da folha de estilos e retorna um relatrio com os eventuais erros e avisos caso sua CSS no valide. Para facilitar a validao da sua folha de estilos voc poder submet-la ao validador aqui mesmo nesta pgina. Na caixa de texto abaixo, substitua a URL existente pela URL da sua folha de estilos e clique no boto para validar. Voc ser informado pelo site do W3C se h erros na sua folha de estilos.
Validar folha de estilos
Se o validador no encontrar erros; ser mostrada uma imagem como a abaixo, que voc poder usar na sua pgina para anunciar que est usando um cdigo vlido:
O validador pode tambm ser encontrado neste link: http://jigsaw.w3.org/css-validator/

Lição HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Lição HTML

Transféré par

Droits d'auteur :

Formats disponibles

Introduo

Lio 1: Vamos comear

Preciso estar online?

O que vem a seguir?

Lio 2: O que HTML?

Para que devo usar o HTML?

OK, mas o que significa H-T-M-L?

Lio 3: O que so tags HTML?

Voc pode mostrar alguns exemplos?

Vai ser apresentado no navegador, como mostrado a seguir:

Vai ser apresentado no navegador, como mostrado a seguir:

Onde devo colocar todas estas tags?

Lio 4: Criando seu primeiro website

Agora, estamos prontos para comear!

O que posso fazer?

At aqui tudo bem, mas como colocar contedo no meu website?

Agora v ao seu navegador:

Lio 5: O que voc j aprendeu?

<title></title> </head> <body> </body> </html>

O que significa isto?

O que fazer agora?

Lio 6: Mais tags HTML

<small>Este texto deve ser com letras em tamanho small.</small>

Ser renderizado no navegador assim:

Posso usar vrias tags simultaneamente?

Ser renderizado no navegador assim:

Ser renderizado no navegador assim:

Um item de lista Outro item de lista

Uau! Isto tudo?

<head> </head> <body style="background-color:#ff0000;"> </body> </html>

Como a pgina ficou vermelha?

Chega de cores. Voltemos aos atributos.

Quais tags podem usar atributos?

Ento, quais so as partes que constituem uma tag?

O que eu preciso para construir um link?

Ser renderizado no navegador assim: Aqui um link para HTML.net

Como so os links entre minhas prprias pginas?

Como so os links dentro de uma mesma pgina?

Tudo fica claro com um exemplo:

Posso criar link para mais alguma coisa?

Ser renderizado no navegador assim:

Existem outros atributos que eu deva conhecer?

Ser renderizado no navegador assim: HTML.net

Ops, isto soa como um desafio...

Ser renderizado no navegador assim:

PNG (Portable Network Graphics)

Onde consigo minhas imagens?

Isto tudo o que eu preciso saber sobre imagens?

Segundo, imagens podem ser links: Exemplo 4:

Ser renderizado no navegador assim: (clique na imagem):

Existem outros atributos que eu deva conhecer?

Ser renderizado no navegador assim:

Ser renderizado no navegador assim:

<img src="logo.gif" width="32" height="32">

Ser renderizado no navegador assim:

Lio 10: Tabelas

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

Ser renderizado no navegador assim: Clula 1 Clula 2

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

e termina e uma linha

<td>Clula 12</td> </tr> </table>

O que posso inserir em tabelas?

Lio 11: Mais tabelas