Aprendendo a Programar em HTML

Introduo

As pessoas imaginam que muito difcil construir um website. Isto

no verdade! Qualquer um pode aprender como construir um website.
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?
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 Simple Text (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-
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-
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
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),
(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
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 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.
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
existem tags que so abertas e fechadas em nica tag.
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 />

Ser renderizado no navegador assim:

Exemplo 6:

<ul>
<li>Um item de lista</li>
<li>Outro item de lista</li>
</ul>

Ser renderizado no navegador assim:

Um item de lista
Outro item de lista

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.
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.
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.
tags
Voc normalmente usar atributos com mais freqncia em algumas tags, tais

como a tag body e raramente usar em outras, como por exemplo, a tag br que
um comando para pular de linha e no precisa de nenhuma informao
adicional.
Assim como existem muitas tags, tambm existem muitos atributos. Alguns
atributos so empregados em tags especficas enquanto outros servem para
vrias tags. E vice-versa: algumas tags podem conter somente um tipo de atributo,
enquanto outras podem conter vrios tipos.
Isto pode parecer um pouco confuso, mas medida que voc for praticando vai
constatar que tudo fcil e lgico, bem como vai verificar as inmeras
possibilidades que os atributos oferecem.
Este tutorial apresentou a voc, os atributos.
Ento, quais so as partes que constituem uma tag?
A constituio
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
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?
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 atributo 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>

Ser renderizado no navegador assim:

Enviar e-mail para nobody em HTML.net

A nica diferena que no lugar do endereo do documento voc escreve mailto:

seguido pelo endereo de e-mail. Quando o link clicado o programa de e-mail
padro do usurio aberto com o endereo do link j digitado na linha para
destinatrio. Mas, ateno, isto s ir funcionar se o usurio tiver um programa de
e-mail instalado na sua mquina. 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" />

Ser renderizado no navegador assim:

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

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">

Ser renderizado no navegador assim:

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">

Ser renderizado no navegador assim:

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">

Ser renderizado no navegador assim:

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

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 "ttable row" - linha de tabela - comea e termina e uma linha
horizontal da tabela. Tambm evidente.
<td> significa "ttable 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
ambas contendo
clulas:
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 1</td>
<td>Clula 2</td>
<td>Clula 3</td>
<td>Clula 4</td>
</tr>
<tr>
<td>Clula 5</td>
<td>Clula 6</td>
<td>Clula 7</td>
<td>Clula 8</td>
</tr>
<tr>
 <td>Clula 9</td>
<td>Clula 10</td>
<td>Clula 11</td>
<td>Clula 12</td>
</tr>
</table>

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?
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, centre ou right ( esquerda, no centro
ou direita).
valign: define o alinhamento vertical do contedo de uma clula. Por
exemplo, top, middle ou bottom (em cima, no meio ou em baixo).

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-
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:
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.
Colspan a abreviao para "column span". Colspan usada na tag <td> para indicar
quantas colunas estaro contidas em uma clula.
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
de Estilo
em Cascata.
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).
(layout)
Como mostrado na Lio 7, CSS pode ser adicionado com uso do atributo style.
style
Por exemplo, voc pode definir o tipo e o tamanho da fonte em um pargrafo:
Exemplo 1:

<p style="font-
style="font-size:20px;">Este
size:20px;" pargrafo em tamanho de fonte igual a 20px</p>
<p style="font-
style="font-family:courier;">Este
family:courier;" pargrafo em fonte Courier</p>
<p style="font-
style="font-size:20px; font-
font-family:courier">Este
family:courier" pargrafo em fonte Courier e tamanho 20px</p>

Ser renderizado no navegador assim:

Este pargrafo em tamanho de fonte igual a 20px

Este pargrafo em fonte Courier
Este pargrafo em fonte 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.
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-
{font-size: 30px; font-
font-family:
family: arial}
h2 {font-
{font-size: 15px; font-
font-family: courier}
p {font-
{font-size: 8px; font-
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
style="color:green;" verde</p>

<h1 style="background-
style="background-color: blue;">Cabealho
blue;" com fundo azul</h1>

<body style="background
style="background-
yle="background-image: url('http://www.html.net/logo.png');">
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
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

red;" amo CSS</p>

Ser renderizado no navegador assim:

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>

Ser renderizado no navegador assim:

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

ESSE A O 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.
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
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-
registrar-se gratuitamente para obter um espao em um
servidor na Internet.
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
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
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.
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
verso do HTML, que o XHTML.
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-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-
lang="pt-br">
br">

<head>
<title>Ttulo</title>
</head>

<body>
<p>texto texto</p>
</body>

</html>

Alm do Document Type Definition (escrito na primeira linha no exemplo acima),

que informa ao navegador que voc est codificando XHTML, voc precisa ainda
adicionar informao extra na tag html, usando os atributos xmlns e lang.
xmlns abreviao de "XML-Name-Space" e deve ter sempre o valor
http://www.w3.org/1999/xhtml.
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.
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 :-)