CURSO BSICO DE

HTML

Apostila desenvolvida para ser usada em um curso bsico de HTML do

comit Fome-Zero Joinville.
Quaisquer dvidas, sugestes, reclamaes enviar e-mail para
felipe_at_gallois_dot_us.

Felipe Gallois
2008

Este trabalho est licenciado sob uma Licena Creative Commons AtribuioUsoNoComercial-Compartilhamento pela mesma licena. Para ver uma cpia
desta licena, visite http://creativecommons.org/licenses/by-nc-sa/2.5/br/ ou
envie uma carta para Creative Commons, 559 Nathan Abbott Way, Stanford,
California 94305, USA.

Sumrio
Introduo.............................................................................................................................................4
Elementos............................................................................................................................................5
Comeando sua pgina........................................................................................................................6
Hyperlinks.........................................................................................................................................11
Imagens..............................................................................................................................................14
Listas...................................................................................................................................................17
Tabelas...............................................................................................................................................20
Frames...............................................................................................................................................25
Forms.................................................................................................................................................28
Consideraes Finais.........................................................................................................................32
Lista de caracteres especiais...............................................................................................................32
Lista de tags........................................................................................................................................33

Introduo
Uma pgina da web (webpage) uma fonte de informaes que adequada World
Wide Web e que pode ser acessada por um navegador web. Isso quer dizer que ela um
documento que feito de modo atender requisitos da rede mundial de computadores e
capaz de ser visualizada a partir de um programa especfico para esse fim.
As pginas web esto localizadas ou em um computador local ou remoto e
disponibilizadas atravs de um servidor web. O acesso a elas pode ser restringido redes
locais, apenas ao prprio computador ou ainda ser publicada na Internet. A requisio e o
acesso a elas feita por meio de um protocolo chamado HTTP (Hypertext Transfer Protocol, ou
Protocolo de transferncia de hipertexto).
Originalmente, as pginas web eram arquivos estticos de texto guardados dentro de
servidores web. Atualmente, entretanto, comum encontrarmos servidores que geram
dinamicamente os arquivos (x)HTML de acordo com a requisio do navegador. Existem ainda
maneiras de obtermos comportamento dinmico pelo lado do cliente (navegador) por meio de
implementaes de Ajax e JavaScript, por exemplo.
As webpages utilizam de HTML (Hypertext Markup Language) para fazer a formatao
dos dados. importante notar que HTML no uma linguagem de programao, mas sim de
formatao. Isso guarda diferenas fundamentais entre HTML e, por exemplo, JavaScript, uma
vez que a primeira limita-se apenas a mudar a maneira como os dados so dispostos na tela.
Para melhorar a aparncia das webpages possvel usar cdigo CSS (Cascading Style
Sheet) que pode ser escrito em um arquivo em separado ou dentro do prprio HTML.
prefervel valer-se da primeira opo uma vez que isso torna seu cdigo mais reutilizvel e,
alm disso, o uso de CSS torna-se mais eficiente j que aproveita-se melhor da maneira como
o HTTP trabalha, com o navegador baixando uma nica vez as informaes e guardando-as em
cache.
As imagens so armazenadas tambm como arquivos separados em servidores web. O
navegador faz o trabalho de baixar todas as imagens enquanto a pgina processada,
mantendo a conexo com o servidor at que todas as informaes sejam baixadas e
fornecidas. A grande maioria deles renderiza as imagens juntamente com os textos e outros
materiais na pgina a ser exibida.

Elementos
Uma pgina web apresenta uma srie de elementos que sero usados para a interao
com o usurio. Eles dividem-se em duas grandes categorias, os que so mostrados e os que
no so.
Entre os mostrados, temos as informaes textuais, com diversas variaes de
renderizao; as informaes no-textuais, como imagens estticas (gif, jpg, png, etc) ou
animadas (animated gif, flash, shockwave), udio (midi, wav) e vdeo (wmv, rm, mov, etc), e;
informaes interativas que so mais complexas, atreladas interface. Nesse ponto, temos
textos interativos, ilustraes interativas, botes, hyperlinks e formulrios.
Como elementos no mostrados temos os comentrios, meta dados(DTD), informaes
de diagramao e estilo (CSS) e scripts (JavaScript).
Nem todos esses elementos sero tratados no escopo do curso. Muitos deles requerem
ferramentas adicionais e uma grande quantidade de recursos do computador, tanto para a
criao quanto para a exibio e so usados apenas para tornar mais agradvel a experincia
de navegao do usurio.

Comeando sua pgina

Para criar suas prprias pginas no necessrio um vasto arsenal de ferramentas,
apenas um editor de texto e um navegador j so suficientes. Para um iniciante at melhor
que no sejam usados recursos muito complexos, eles podem fazer com que muitos detalhes
triviais, mas importantes, passem despercebidos. Para o nosso curso, usaremos um editor de
texto simples de sua preferncia (como o kwrite, o gedit ou o Mousepad). Recursos como o
syntax highlighting (ou destaque de sintaxe) so realmente teis durante a criao da sua
pgina ao mesmo tempo que no "fazem o trabalho" por voc, ento prudente que voc
deixe-o ligado. Qualquer navegador que tenha interface grfica serve para o nosso curso, fique
a vontade para escolher o de sua preferncia.
Comearemos com algo bem simples, abra o editor de texto e insira o seguinte
<html>
<head>
<title>T&iacute;tulo da p&aacute;gina</title>
</head>
<body>
Essa &eacute; a minha primeira p&aacute;gina. <b>Esse texto est&aacute; em
negrito.</b>
</body>
</html>
Salve o arquivo como teste.html e abra com um navegador. Voc ver o seguinte

Agora vamos explicar algumas coisas sobre o exerccio acima. Primeiramente, tudo que
estiver entre os sinais de menor que e maior que ('<' e '>'), incluindo eles so chamadas
'tags'. As tags so partes importantes em documentos HTML, elas so as responsveis por toda
a formatao do texto. Com elas voc pode dividir o documento em rea de cabealho e corpo,
colocar ttulos, criar tabelas, divises, formulrios e ainda formatar trechos especficos do
texto, como a parte em negrito acima.
A primeira tag <html>. Ela diz ao navegador que esse ponto marca o incio de um
documento HTML, enquanto que a ltima tag </html> diz a ele exatamente o que esperado,
que esse o fim do documento HTML. O texto que est compreendido entre as tags <head> e
</head> informao sobre a rea de cabealho, como voc pode perceber com <title> e </
title> onde o texto que est entre essas tags aparecer no ttulo da janela do navegador.
Prosseguindo, temos as tags <body> e </body> que so responsveis por guardar os
dados referentes ao corpo do documento. Isso significa que o texto que estiver entre elas ser
exibido pelo navegador. Por fim, as tags <b> e </b> faro com que o texto entre elas seja
exibido em negrito (em ingls, bold).
Voc j deve ter percebido que as tags utilizadas sempre tm um "fechamento" como

por exemplo, <html> -> </html>, <head> -> </head> e <body> -> </body>. Isso realmente
valido para uma grande quantidade delas, mas no ser onipresente, portanto fique atento.
Uma considerao a ser feita sobre as tags que elas no so sensveis caixa, o que
significa que <b> o mesmo que <B> embora as convenes atuais incentivem o uso de todas
as tags em letras minsculas. Ento, para seguir os mais novos padres web voc deve usar
letras minsculas. O padro xHTML demanda necessariamente o uso delas.
Uma outra questo que pode surgir sobre a extenso dos arquivos. Antigamente,
muitos sistemas no permitiam salvar extenses que tivessem mais do que trs caracteres e
por isso era comum ver arquivos com nomes como 'index.htm' ou 'home.htm'. Hoje em dia
raro encontrarmos um sistema moderno que no permita extenses com um nmero de
caracteres que vai muito alm de trs, logo totalmente aceitvel usar 'index.html' ou
'home.html' como o caso do nosso ltimo exemplo (teste.html).
Os espaos utilizados para separar uma palavra da outra aparecero normalmente na
sua visualizao, porm, caso voc use mais de um espao, eles no sero considerados. Para
que isso ocorra, preciso usar uma tag especial.
Trataremos agora dos elementos HTML. Considerando o nosso ltimo exemplo, '<b>Esse
texto est&aacute; em negrito</b>' um elemento onde: 1) o elemento HTML inicia-se com a
tag de incio '<b>'; 2) o contedo do elemento 'Esse texto est&aacute; em negrito', e; 3) o
elemento HTML termina com a tag de fim '</b>'.
Tambm um elemento HTML o seguinte trecho:
<body>
Essa &eacute; a minha primeira p&aacute;gina. <b>Esse texto est&aacute; em
negrito.</b>
</body>
O incio do elemento '<body>' e o fim '</body>'.
Um detalhe importante a ser mostrado aqui o que diz respeito acentuao. Voc
deve ter notado algumas coisas "estranhas" nos exemplos acima, como '&eacute;' ou
'&aacute;'. Essas so referncias para os caracteres especiais como '' ou '' no exemplo
acima, mas que tambm so utilizados em outros casos. O uso deles se deve ao fato de que
alguns caracteres so reservados, facilmente perceptvel em '<' e '>' que servem para abrir e
fechar tags. O que faramos para inserir esses caracteres em um texto dentro do HTML?
Usamos referncias especiais para tal, seguindo o exemplo '&lt;' e '&gt;'. Falaremos mais sobre
eles na hora devida.
Usaremos agora algumas tags para tornarmos nosso texto mais complexo. Abra o editor
de textos e crie o arquivo 'teste2.html'. Escreva o cdigo a seguir.
Cabealhos, pargrafos e quebras de linha
<html>
<head>
<title>Exemplos de texto com cabe&ccedil;alho, par&aacute;grafos e quebras
de linha</title>
</head>
<body>
<h1>Esse &eacute; um cabe&ccedil;alho muito grande</h1>
<h2>Esse &eacute; um cabe&ccedil;alho um pouco menor, mas bem grande
ainda</h2>
<h3>Esse &eacute; um cabe&ccedil;alho nem t&atilde;o grande assim</h3>
<h4>Esse &eacute; um cabe&ccedil;alho m&eacute;dio</h4>
<h5>Esse &eacute; um cabe&ccedil;alho pequeno</h5>
<h6>Esse &eacute; um cabe&ccedil;alho muito pequeno</h6>
<hr />
<p>Agora faremos um par&aacute;grafo. A tag &apos;&lt;hr /&gt;&apos; no
c&oacute;digo serve para inserir uma linha horizontal, voc&ecirc; pode v&ecirc;la acima.</p>
<p>Note que ao criarmos outro, temos uma linha branca adicionada entre
eles</p>
Agora o texto est&aacute; sendo escrito diretamente no corpo do documento,
sem nenhuma formata&ccedil;&atilde;o. <br />
Use a tag vazia &apos;&lt;br /&gt;&apos; para quebrar linhas (saltar

linhas) sen&atilde;o o seu texto vai ficar bem estranho.

<!-- Finalmente, esse um comentrio. O que voc escrever aqui no ser
mostrado no documento exibido pelo navegador, mas pode ajudar a entender o que
voc quer fazer com o cdigo. -->
</body>
</html>

Agora vamos explicar um pouco mais sobre as tags usadas nesse exemplo.
Preservamos a mesma estrutura de '<html><head><title></title></head><body></body></
html>', mas acrescentamos diversas outras tags. As que se iniciam com o 'h' e so seguidas
por um nmero de 1 a 6 ('<h1>' e '<h4>', por exemplo) servem para fazer um cabealho, um
texto que se destacar do restante. O nmero determina o tamanho do mesmo, quanto menor
o nmero, maior a tipografia. A tag '<hr />' serve para inserir uma linha horizontal ao longo de
todo o documento enquanto a '<br />' apenas salta para a prxima linha. Uma observao
sobre essas duas tags que ambas podem ser escritas da seguinte maneira: '<br>' ou '<hr>'.
A razo pela qual se coloca a barra no final dela que elas so tags vazias, isto , no
precisam de uma tag para inici-las e outra para termin-las. Os novos padres da web
determinam que toda e qualquer tag deve ser fechada, incluindo as tags vazias. Por isso
colocamos a barra no final, para indicar que ela se inicia e se fecha nela mesma. Dessa
maneira, garantimos que nosso cdigo possibilite sua reutilizao no futuro, quando as novas
normas estiverem em vigor. Alm dessas tags temos os pargrafos, representados por '<p>' e
'</p>'. O texto compreendido entre elas ser colocado como um pargrafo separado e ao
trmino da tag uma nova linha ser inserida.

Fora isso, vale ainda comentar no momento sobre os caracteres especiais utilizados.
Temos vrios deles nesse exemplo:
'&eacute;', ""
'&ccedil;', ""
'&apos;', "'"
'&lt;', "<"
'&gt;', ">"
'&otilde;', ""
'&ecirc;', ""
so alguns deles. Ao final da apostila teremos uma tabela mostrando cada um deles.
Com base no que vimos at aqui, crie um arquivo chamado "seu_nome.html", no
esquea de colocar realmente o seu nome ;). Dentro dele, faa algo dizendo quem voc, seu
nome, sua idade, o que faz da vida e qualquer outra coisa que quiser dizer. No se esquea de
usar as tags que voc viu at agora.
No final desse documento voc ver alguns exemplos dos exerccios que sero
passados aqui. Caso precise de alguma referncia, no hesite em consult-los.
Algumas tags apresentam atributos que podem ser modificados por voc medida que
achar necessrio. Veremos alguns exemplos abaixo, tomando como ponto de partida o
exemplo de apresentao usado no exerccio anterior.
<html>
<head>
<title>P&aacute;gina do Gallois</title>
</head>
<body>
<h1>Ol&aacute;, seja bem-vindo &agrave; minha webpage</h1>
<hr />
<p>Meu nome &eacute; Felipe Gallois e sou estudante de Ci&ecirc;ncia da
Computa&ccedil;&atilde;o na UDESC. Eu sou bolsista do projeto Fome-Zero em
Joinville
e
respons&aacute;vel
por
fazer
a
apostila
do
curso
de
cria&ccedil;&atilde;o de p&aacute;ginas web.</p>
Caso voc&ecirc; encontre algum erro, tenha alguma cr&iacute;tica ou
sugest&atilde;o para a melhoria deste material, mande um e-mail para mim:<br />
felipe@gallois.us<br /><br />
At&eacute; a pr&oacute;xima.
</body>
</html>

Vamos agora alterar alguns atributos, comeando pelo cabealho. Altere

<h1>Ol&aacute;, seja bem-vindo &agrave; minha webpage</h1>
para
<h1 align="center">Ol&aacute;, seja bem-vindo &agrave; minha webpage</h1>
Em segundai, altere
<body> para <body bgcolor="blue">

Abra o arquivo e veja as modificaes. O que ocorreu efetivamente? Ao inserir o

atributo 'align="center"' na tag '<h1>' voc solicitou que o texto fosse alinhado no centro da
pgina. No caso do corpo do documento, o atributo 'bgcolor="blue"' quer dizer que voc ir
alterar a cor do plano de fundo (background color ou bgcolor) para azul (blue).
Note que os atributos preferencialmente devem ser escritos em letras minsculas,
novamente para atender s novas convenes. Os valores dos atributos devem sempre estar
entre aspas, simples ou duplas, indiferente. Fique atento apenas ao caso de voc querer usar
um valor de atributo que tenha aspas, onde voc precisar alternar as duas para poder
alcanar o resultado desejado, por ex. name='Edson Arantes "Pel" do Nascimento'.

Hyperlinks
Um outro recurso amplamente utilizado em HTMLs o hyperlink. Ele serve para ligar um
documento outro na Web. Basicamente, ele ser composto pelo endereo de outro
documento e, ao ser clicado, levar voc ao endereo referenciado por ele. Existem duas
maneiras de usar hyperlinks nos seus documentos, com textos ou com imagens. O texto
aparecer sublinhado e o cursor do mouse ficar diferente ao passar por cima dele. As imagens
tero o mesmo efeito de mudana de cursor.
Primeiramente ensinaremos a criar links com texto. Eles podem ser criados com a tag
'<a href="endereo para onde quer redirecionar">', que deve ser fechada com '</a>'. O
contedo entre a tag ser o texto que dever ser clicado para que o navegador redirecione.
Pode ser qualquer coisa que voc quiser, mas recomenda-se usar alguma coisa intuitiva. A
Internet originalmente pretendia usar hyperlinks em abundncia, quando seu contedo ainda
era basicamente composto por textos cientficos e documentos. O aumento da velocidade de
transferncia e o incio do uso de imagens e meios multimdia na rede ofuscaram um pouco
seu propsito original. Um exemplo para o uso de hyperlinks com texto seria:
<a href="http://www.google.com">Google</a>
Um recurso que pode ser til se voc quiser redirecionar a pessoa mas manter a sua
prpria pgina aberta adicionar o atributo 'target="_blank"' sua tag '<a>'. O resultado
que ao clicar no link, uma nova janela do navegador abrir com o endereo desejado. Note o
exemplo abaixo:
<a href="http://www.google.com" target="_blank">Google</a>
Agora vamos mostrar como voc cria um hyperlink usando uma imagem ao invs do
texto. O processo bem semelhante.
<a href="http://www.google.com"><img border="0"
src="http://www.google.com.br/intl/pt-BR/logos/Logo_25wht.gif" /></a>
No lugar do texto inserimos uma imagem e ela automaticamente se transforma na
ncora responsvel por ligar o documento outro.
Vamos aproveitar esse exemplo para darmos mais uma explicao, como inserir
imagens. Voc deve ter percebido que usamos uma tag diferente logo acima: '<img />'. Ela
tem seus atributos que sero mostrados em breve. Ela serve exatamente para inserir imagens
no documento HTML, servindo tanto para buscar imagens no computador local ou na rede. No
nosso caso, usamos para buscar na Internet, mas isso indiferente, o navegador trata
qualquer um dos casos muito bem.
Para explicar como funciona o mecanismo de usar imagens que esto no computador
local, devemos entender dois conceitos antes, o de caminho relativo e o de caminho absoluto.
O caminho absoluto indica a localizao do arquivo no computador a partir do diretrio raiz.
Por exemplo, um arquivo chamado 'foo.bar' que est dentro da pasta home do usurio Joao
tem caminho absoluto '/home/Joao/foo.bar' ou o arquivo de configurao padro de grande
parte dos Xorg tem caminho absoluto '/etc/X11/xorg.conf'.
O conceito de caminho relativo distancia-se do de absoluto na medida em que no
possvel determinar o caminho do arquivo sem saber a pasta em que se est no momento.
Outra diferena que torna-se mais complicado acessar um arquivo que esteja em uma pasta
que est numa pasta que no descende da que voc est na rvore de diretrios. Para
dizermos o caminho relativo de um arquivo 'foo.bar' que est na mesma pasta em que
estamos no momento, podemos dizer que 'foo.bar'. Suponhamos agora a seguinte estrutura
de pastas
arquivos
`-- fotos
|
`-- fotos_do_ano_novo
|
|
`-- ano_novo1.jpg
|
|
`-- ano_novo2.jpg
|
|
`-- ano_novo2.jpg
|
`-- fotos_da_pascoa

|
|
|
|
|
|
|
|
|
|
`-|
|
|
`-|
|
|
`-`-|
|
`-|
|
`--

|
`-- pascoa1.jpg
|
`-- pascoa2.jpg
|
`-- pascoa3.jpg
`-- fotos_na_praia
|
`-- praia1.jpg
|
`-- praia2.jpg
|
`-- praia3.jpg
`-- foto1.jpg
`-- foto2.jpg
`-- foto3.jpg
textos
`-- texto1.txt
`-- texto2.txt
`-- texto3.txt
videos
`-- video1.mpg
`-- video2.mpg
`-- video3.mpg
projetos
projeto1
`-- tema1.tem
`-- tema2.tem
projeto2
`-- tema3.tem
`-- tema4.tem
prazos_dos_projetos.txt

Partindo da pasta arquivos, o caminho relativo do arquivo 'foto1.jpg' 'fotos/foto1.jpg'

enquanto o de 'texto2.txt' '/textos/texto2.txt'. Dessa maneira, o arquivo 'tema1.tem' do
projeto1 ter como caminho relativo 'projetos/projeto1/tema1.tem'. At a no existem muitas
complicaes, mas necessrio conhecer um pouco sobre como trabalhar com arquivos que
esto em pastas que esto em nveis superiores. Isso exigir o uso de '..'. Quando voc estiver
na pasta projeto1 e quiser saber o caminho relativo do arquivos 'prazos_dos_projetos.txt'
dever ter em mente que este arquivo encontra-se em um nvel superior na rvore de
diretrios com relao qual voc est no momento. Isso quer dizer que voc deve retroceder
um nvel para s ento poder chamar o arquivo desejado, e exatamente para isso ser
necessrio o uso de '..'. Como soluo, estando na pasta projeto1, o caminho relativo ser
'../prazos_dos_projetos.txt'.
Quando for necessrio retroceder mais nveis ainda, voc precisar usar mais '..'. Por
exemplo, imagine-se agora no diretrio 'projeto2' e deseja saber o caminho relativo para o
arquivo 'praia3.jpg'. Ele ser '../../fotos/fotos_na_praia/praia3.jpg'. Os primeiros '..' te colocaro
no diretrio 'projetos' e o segundo no 'arquivos'. Deste ponto em diante voc segue os passos
de como se estivesse apenas buscando em sub-diretrios.
Dada essa longa explicao, prosseguiremos na parte de imagens no computador local.
Fica bem simples se o princpio acima estiver entendido pelo aluno. Para adicionar uma
imagem que esteja na mesma pasta do seu documento HTML apenas coloque
<img src="nome_da_imagem" />
Caso ela esteja numa subpasta
<img src="nome_da_subpasta/nome_da_imagem" />
E, finalmente, se ela estiver em pastas que no descendem da que voc estiver
<img src="../nome_da_pasta/nome_da_imagem" />
Voc pode descer quantos nveis quiser at encontrar sua imagem, mas
recomendado, caso sua imagem esteja em lugares que no sejam o prprio caminho ou uma
subpasta, que voc utilize o caminho absoluto. Em geral, quando se est fazendo pginas de
grande porte, comum armazenar todas as imagens em subpastas do caminho onde se

encontra o documento HTML. Dessa maneira, o uso de caminhos relativos se torna muito mais
gil e facilita imensamente no caso de ser necessrio uma mudana de servidor ou da pasta
onde se encontram os arquivos, isso porque quando for completada a operao, nenhum
caminho precisar ser consertado no seu cdigo.

Imagens
As imagens so elementos extremamente comuns nos documentos web atualmente.
Elas fazem parte dos mais variados tipos de pginas e podem ser usadas tanto para decorar
como para compor a informao de maneira a torn-la mais compreensvel. difcil
navegarmos na Internet e entrarmos em uma pgina que no tenha pelo menos uma imagem.
importante notar que as imagens podem ter diversas aplicaes nos documentos web,
possvel us-las como decorao para uma pgina, como plano de fundo, como explicao
para alguma coisa (como usada nos livros), como ligao para outras pginas (hyperlinks), etc.
Os designers fazem muitas coisas com as imagens, principalmente grficos vetoriais,
para criar interfaces mais agradveis no uso de pginas, paralelamente ao uso de CSS. O
resultado traz pginas muito bonitas, mas que algumas vezes ficam bem pesadas para um
computador lento ou uma internet de velocidade mais baixa. Cabe a voc fazer o julgamento
de equilibrar o documento e trazer uma experincia agradvel ao usurio, tanto no ponto de
vista de qualidade visual quanto em performance.
Como vimos anteriormente, o navegador interpreta as imagens a partir da leitura da tag
'<img />'. Essa tag tem vrios atributos e trataremos de alguns deles a seguir. Vamos supor
que voc queira inserir uma imagem que est no mesmo caminho do seu documento.
<img src="imagem.jpg" />
Essa tag deve ser suficiente para fazer com que a imagem aparea em seu navegador.
Voc pode tambm querer pegar uma imagem que est na Internet, usando uma URL
para encontr-la.
<img
src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Flag_of_Brazil.svg
/60px-Flag_of_Brazil.svg.png" />
Dessa maneira, voc estar usando uma imagem encontrada na Internet, por exemplo.
O uso de caminho absoluto no computador local j foi descrito anteriormente e serve da
mesma maneira para inserir uma imagem isolada no documento web.
O atributo 'alt' serve para dar um nome alternativo s imagens nas webpages.
<img
src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Flag_of_Brazil.svg
/60px-Flag_of_Brazil.svg.png" alt="bandeira do brasil" />
Ao para com o mouse em cima da imagem, voc poder notar que o texto mostrado
ser o que voc colocou em 'alt'. Esse recurso tambm facilita muito a navegao para uma
pessoa que estiver usando navegao em modo texto, uma vez que o nome da imagem que
aparecer na tela ser o que estiver no valor do atributo 'alt'. O uso desse atributo
considerado uma boa prtica e deve ser feito sempre que possvel.
As imagens tambm podem ser usadas como plano de fundo para dar uma aparncia
mais sofisticada sua pgina.
<body background="imagem_de_fundo.jpg">
Nesse exemplo em especfico, no utilizamos a tag <img />' pois o navegador j
entender que ao usar o atributo 'background' da tag '<body>' chamaremos uma imagem para
ser utilizada como plano de fundo.
Outro recurso que provavelmente ser muito utilizado o alinhamento das imagens
com relao ao texto. Voc pode basicamente coloc-la acima, no meio ou abaixo do texto.
Seguem alguns exemplos
<p>
Uma imagem
<img src="imagem.gif" align="bottom" />
no texto
</p>

<p>
Uma imagem
<img src="imagem.gif" align="middle" />
no texto
</p>
<p>
Uma imagem
<img src="imagem.gif" align="top" />
no texto
</p>
<p>
Uma imagem
<img src="imagem.gif" />
no meio do texto
</p>
<p>
<img src="imagem.gif" />
Uma imagem antes do texto
</p>
<p>
Uma imagem depois do texto
<img src="imagem.gif" />
</p>
As linhas acima mostram diversas maneiras de se diagramar a imagem juntamente com
o texto. Outra maneira de colocar as imagens na direita ou esquerda do seu texto pode ser da
seguinte forma:
<p>
<img src ="imagem.gif" align ="left">
Um par&aacute;grafo com uma imagem. O atributo &apos;align&apos;
est&aacute; configurado para &apos;left&apos; (esquerda). A imagem ficar&aacute;
&agrave; esquerda do texto;
</p>
<p>
<img src ="imagem.gif" align ="right">
Um par&aacute;grafo com uma imagem. O atributo &apos;align&apos;
est&aacute; configurado para &apos;right&apos; (direita). A imagem ficar&aacute;
&agrave; direita do texto;
</p>
Outros atributos que sero usados com bastante freqncia so os
responsveis por redimensionar as imagens. Voc precisar de dois deles, um para
altura (height) e outro para largura (width). Veja abaixo como utiliz-los.
<p>
<img src="imagem.gif"
width="20" height="20">
</p>
<p>
<img src="imagem.gif"
width="45" height="45">
</p>
<p>
<img src="imagem.gif"

width="70" height="70">
</p>
Mudar o valor dos atributos aumenta ou diminui a imagem conforme o que for indicado.

Listas
Ns temos trs tipos de listas em HTML, listas ordenadas, listas no ordenadas e listas
de definies. Uma lista no ordenada simplesmente coloca um marcador antes de cada um de
seus elementos enquanto a lista ordenada numera-os. Alm delas temos a lista de definies,
que se difere por no ser uma lista de itens. Ela uma lista de termos e definies. Vamos
mostrar alguns exemplos para que voc veja melhor. Crie um novo arquivo de texto como
nome 'listas.html'.
<html>
<head>
<title>Alguns exemplos de listas</title>
</head>
<body>
<p>Vejamos abaixo algumas listas e suas diferentes
caracter&iacute;sticas.</p>
<br />
<p>Primeiramente, uma lista n&atilde;o ordenada.</p>
<h4>Frutas</h4>
<ul>
<li>Ma&ccedil;&atilde;</li>
<li>Morango</li>
<li>Laranja</li>
<li>Lim&atilde;o</li>
<li>Abacaxi</li>
</ul>
<br />
<p>Veja agora uma lista ordenada.</p>
<h4>Resultados finais do campeonato de F&oacute;rmula 1 de 1991.</h4>
<ol>
<li>Senna</li>
<li>Mansell</li>
<li>Patrese</li>
<li>Berger</li>
<li>Prost</li>
<li>Piquet</li>
</ol>
<br />
<p>Vamos definir algumas coisas abaixo.</p>
<h4>Bebidas</h4>
<dl>
<dt>Caf&eacute;</dt>
<dd>Bebida quente e preta</dd>
<dt>Ch&aacute;</dt>
<dd>Tem de v&aacute;rias cores e pode ser servido tanto quente como
gelado</dd>
<dt>&Aacute;gua</dt>
<dd>Sem cor, e com certeza gelada! ;)</dd>
</dl>
</body>
</html>
O exemplo auto-explicativo com relao aos tipos de listas empregados, mas alguns
detalhes sero deixados para voc praticar. As listas possuem atributos tambm. Alguns deles

sero explicados aqui.

Em essncia, voc usa tags '<ul>' ou '<ol>' para iniciar suas listas (no ordenada e
ordenada), e '<li>' para cada um dos itens listados. As tags devem sempre ser acompanhadas
de fechamento. No caso da lista de definio voc tem uma pequena alterao. Alm da sua
tag, que '<dl>' cada um dos elementos dela devem ter duas tags diferentes, a '<dt>' para o
item em si e '<dd>' para a definio do mesmo.
Para mudar um pouco suas listas ordenadas, tente coisas como:
<ol type="A">
Isso far que ao invs de nmeros, a lista seja ordenada com letras do alfabeto
maisculas.
A.
B.
C.
D.
E.

Ma
Morango
Laranja
Limo
Abacaxi

Usar
<ol type="a">
far a mesma coisa, s que desta vez com letras minsculas.
ainda possvel usar algarismos romanos para a numerao. Para isso, faa o seguinte.
<ol type="I">
O resultado ser
I. Ma
II. Morango
III. Laranja
IV. Limo
V. Abacaxi
Quer algarismos romanos minsculos?
<ol type="i">
Prontinho =)
Para mudar o tipo de marcadores usados nas listas no ordenadas, use:
<ul type="disc">
<ul type="circle">
<ul type="square">
O primeiro valor do atributo type far com que os marcadores sejam discos
preenchidos, o segundo discos vazios no meio (crculos) e o ltimo mostrar quadrados. bem
simples, tente todos eles.
Outra idia interessante de listas que possvel aninhar vrias delas. No seu arquivo
'listas.html', adicione o seguinte cdigo.
<p>Uma lista aninhada para complicar um pouco</p>
<h4>Bebidas e alguns de seus tipos</h4>
<ul type="circle">
<li>Caf&eacute;</li>
<ul type="square">
<li>com leite</li>
<li>preto</li>
<li>frapp&eacute;</li>
</ul>

<li>Ch&aacute;</li>
<ul type="square">
<li>mate</li>
<li>erva doce</li>
<li>camomila</li>
</ul>
<li>&Aacute;gua</li>
<ul type="square">
<li>com g&aacute;s</li>
<li>sem g&aacute;s</li>
</ul>
</ul>
Agora voc tem uma lista aninhada dentro do seu documento e pode ver como ela
funciona. possvel aninhar vrios nveis, o que pode ser til dependendo do tipo de lista que
voc pretende criar. Isso pode ser usado, por exemplo, para definir a rvore genealgica de
uma famlia, embora provavelmente isso te dar muito trabalho! Use sua imaginao.

Tabelas
As tabelas so em HTML exatamente o que so em qualquer outro lugar. Elas servem
para organizar os dados de uma maneira que fique mais fcil para as pessoas entenderem ou
tornar mais rpida a comunicao em determinadas ocasies.
Vamos diretamente ao uso dessas tabelas para depois entrarmos em detalhes. Crie um
arquivo chamado 'tabelas.html' e coloque o seguinte cdigo.
<html>
<head>
<title>Uma p&aacute;gina com tabelas</title>
</head>
<body>
<table border="1">
<tr>
<th>Parte do computador</th>
<th>O que ela faz</th>
</tr>
<tr>
<td>Teclado</td>
<td>Onde voc&ecirc; digita</td>
</tr>
<tr>
<td>Mouse</td>
<td>Onde voc&ecirc; mexe a seta</td>
</tr>
</table>
</body>
</html>
Voc vai criar uma tabela com a tag '<table>'. A partir da, voc deve definir as linhas
com a tag '<tr>' e as colunas com '<td>'. Cada um dos valores colocados entre as tags '<td>'
considerado estar dentro de uma clula. A tag '<th>' usada para o cabealho da tabela, um
texto destacado para explicar um pouco sobre a coluna em questo. O atributo 'border' da tag
'<table>' determina a largura da borda da tabela, experimente usar um valor diferente para
ver o resultado.
Agora insira dentro da tabela, depois dos outros itens as seguintes linhas:
<tr>
</tr>

<td>Adesivo no monitor</td>
<td></td> <!-- n&atilde;o faz nada :)-->

Recarregue o arquivo e voc notar que a clula onde no h nada tambm ficar sem
borda, o que pode dar uma aparncia desagradvel para o usurio, solucione o problema
colocando o caracter especial '&nbsp;' nela.
<tr>
<td>Adesivo no monitor</td>
<td>&nbsp;</td> <!-- n&atilde;o faz nada :)-->
</tr>
Ele faz com que serja inserido um caracter em branco (non-breaking space), diferente
de se colocar um espao normal l, que o navegador deixa de interpretar. Dessa forma, voc
engana a tabela como se tivesse realmente algo escrito l, que de fato h, mas o usurio no
ver isso.
possvel tambm fazer tabelas sem bordas, dependendo do seu objetivo:
<h4>A mesma tabela, sem bordas e com legenda</h4>
<table border="0">

<caption align="top"><i>Minha legenda</i></caption>

<caption
align="bottom"><i>Minha
outra
legenda,
tabela</i></caption>
<tr>
<th>Parte do computador</th>
<th>O que ela faz</th>
</tr>
<tr>
<td>Teclado</td>
<td>Onde voc&ecirc; digita</td>
</tr>
<tr>
<td>Mouse</td>
<td>Onde voc&ecirc; mexe a seta</td>
</tr>
<tr>
<td>Adesivo no monitor</td>
<td>&nbsp;</td> <!-- n&atilde;o faz nada :)-->
</table>

abaixo

da

Alm da borda de tamanho zero (ou sem borda, se preferir), temos mais duas tags que
at ento no havamos apresentado, uma delas se refere tabela e a outra no. A tag
'<caption>' serve para se colocar uma legenda na tabela e pode carregar o atributo 'align',
que determinar se ela aparecer em cima ou em baixo. A outra tag, '<i>', pode ser usada em
qualquer lugar do texto e serve para deixar o texto que est entre seu incio e fechamento em
itlico, assim como a tag '<b>' faz ao passar para negrito.
Agora mostraremos alguns exemplos onde queremos que um determinado campo
ocupe mais de uma clula.
<h4>Telefone de algumas pessoas que acabei de inventar</h4>
<table border="1">
<tr>
<th>Nome</th>
<th colspan="2">Telefone</th>
</tr>
<tr>
<td>Jo&atilde;o Frango</td>
<td>33 2548 3549</td>
<td>33 2544 3578</td>
</tr>
<tr>
<td>Valpano</td>
<td>44 2578 3258</td>
<td>44 2566 5799</td>
</tr>
</table>
<br />
<h4>Telefone das mesmas pessoas que acabei de inventar, formatando
diferente</h4>
<table border="1">
<tr>
<th>Nome</th>
<td>Jo&atilde;o Frango</td>
<td>Valpano</td>
</tr>
<tr>
<th rowspan="2">Telefone</th>
<td>33 2548 3549</td>
<td>33 2544 3578</td>
</tr>
<tr>

<td>44 2578 3258</td>

<td>44 2566 5799</td>

</tr>
</table>

O exemplo acima, alm da utilidade proposta, mostra mais uma coisa: os cabealhos
no precisam necessariamente ser o primeiro elemento da coluna. Na segunda tabela
percebemos que ele est na verdade referindo-se linha onde ele est. Voltando ao tema,
usamos os atributos 'colspan' e 'rowspan' para estendermos uma clula, ambos esto
disponveis tanto para '<th>' quanto para '<td>'. O valor do atributo determinar quantas
clulas o campo ocupar, 'colspan' para colunas e 'rowspan' para linhas.
Vale notar que possvel alinhas tabelas e colocar quaisquer outras tags dentro das
clulas. possvel, por exemplo, fazer uma lista dentro de uma clula de uma tabela, inclusive
aninh-las. S tome cuidado para no fazer algo to complicado que voc possa se perder ao
desenvolver.
Outra possibilidade ao trabalhar com tabelas alterar a distncia entre o texto e as
bordas da tabela. Esse parmetro controlado pelo atributo 'cellpadding' e pode ser
observado no exemplo a seguir.
<h4>Tabela sem espa&ccedil;amento entre texto e bordas</h4>
<table border="1" cellpadding="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<br />
<h4>Tabela com espa&ccedil;amento entre texto e bordas</h4>
<table border="1" cellpadding="15">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
Alm de espaamento entre texto e bordas tambm podemos deixar uma distncia
entre uma clula e outra com o atributo 'cellspacing', confira nesse outro exemplo.
<h4>Tabela sem espa&ccedil;amento entre c&eacute;lulas</h4>
<table border="1" cellspacing="0" bgcolor="yellow">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<br />
<h4>Tabela com espa&ccedil;amento entre c&eacute;lulas</h4>
<table border="1" cellspacing="15">

<tr>
<td bgcolor="yellow">amarelo</td>
<td bgcolor="red">vermelho<td>
</tr>
<tr>
<td bgcolor="green">verde</td>
<td bgcolor="blue">azul</td>
</tr>
</table>
Tanto a tabela toda como cada uma das clulas tratam do atributo background, assim
como fizemos anteriormente com a tag '<body>'. Desse modo, possvel alterar a cor desses
elementos, como voc pode observar no exemplo acima.
Ainda podemos alinhar o texto dentro de uma clula pelo atributo 'align' da mesma
maneira como fizemos em outros lugares, o exemplo abaixo uma alterao daquela nossa
"agenda de telefones".
<h4>Telefone das mesmas pessoas que acabei de
diferente</h4>
<table border="1">
<tr>
<th>Nome</th>
<td align="center">Jo&atilde;o Frango</td>
<td align="center">Valpano</td>
</tr>
<tr>
<th rowspan="2">Telefone</th>
<td>33 2548 3549</td>
<td>33 2544 3578</td>
</tr>
<tr>
<td>44 2578 3258</td>
<td>44 2566 5799</td>
</tr>
</table>

inventar,

formatando

Note que o nome das pessoas agora esto centralizados nas clulas.
Existem outros atributos que no apresentaremos aqui para no alongarmos demais
essa parte, com o contedo apresentando at aqui j possvel construir tabelas bem
completas.

Frames
Com frames voc pode inserir mais de um documento dentro da mesma tela do
navegador. Voc pode fazer frames horizontais ou verticais, que determinaro a maneira como
os documentos sero exibidos. Cada documento HTML ser chamado frame e cada frame
independente do outro.
Embora isso ajude bastante a organizar o contedo das pginas, algumas desvantagens
so notveis, como a maior necessidade de ateno do desenvolvedor para manter os
documentos HTML e a dificuldade para a impresso de uma pgina inteira.
Basicamente, o frame faz com que o documento se divida todo e em cada uma dessas
partes voc possa criar uma pgina independente e diferente de todas as outras que voc est
utilizando. Imagine uma bandeja de refeitrio toda dividida onde em cada lugar seja possvel
colocar um alimento diferente sem que ele se misture com o outro.
Para colocar frames eu suas pginas, primeiramente voc tem que utilizar a tag
'<frameset>' que o conjunto de frames que sero usados. Essa tag trar definies bsicas,
como se os frames estaro divididos em linhas ou colunas e o tamanho das mesmas. Veja
abaixo um exemplo de utilizao.
<frameset cols="30%, 70%">
<frame src="uma_pagina.html" />
<frame src="outra_pagina.html" />
</frameset>
Esse exemplo mostra a diviso dos frames com porcentagem de tamanho a ser
ocupado na tela. Existe uma outra maneira de fazer isso, que com o nmero de pixels que
cada um utilizar.
<frameset cols="200, 300" />
Ou ainda voc pode querer um frame use o espao restante, como no exemplo abaixo:
<frameset cols="20%, 20%, *" />
Use os cdigos abaixo para ter uma idia do funcionamento dos frames.
frames.html
<html>
<head>
<title>Vamos usar uns frames</title>
</head>
<frameset cols="20%, 80%">
<frame src="uma_pagina.html" />
<frame src="outra_pagina.html" />
</frameset>
<body>
<noframes>O seu navegador n&atilde;o suporta frames!</noframes>
</body>
</html>
uma_pagina.html
<html>
<head>
<title>Essa &eacute; uma p&aacute;gina</title>
</head>
<body>
Uma p&aacute;gina qualquer! =)

</body>
</html>
outra_pagina.html
<html>
<head>
<title>Essa &eacute; outra p&aacute;gina</title>
</head>
<frameset rows="100, *, 200">
<frame src="oi.html" />
<frame src="tudo_bem.html" />
<frame src="tchau.html" />
</frameset>
<body>
<noframes>O seu navegador n&atilde;o suporta frames!</noframes>
</body>
</html>
oi.html
<html>
<frameset cols="30%, 30%, *">
<frame src="oi1.html" />
<frame src="oi2.html" />
<frame src="oi3.html" />
</frameset>
<body>
<noframes>O seu navegador n&atilde;o suporta frames!</noframes>
</body>
</html>
oi1.html
<html>
<body bgcolor="red">
<i>oi um</i>
</body>
</html>
oi2.html
<html>
<body bgcolor="turquoise">
<i>oi dois</i>
</body>
</html>
oi3.html
<html>
<body bgcolor="cyan">
<i>oi tr&ecirc;s</i>

</body>
</html>
tudo_bem.html
<html>
<big>Tudo bem?</big>
</html>
tchau.html
<html>
<strong>TCHAU! =D</strong>
</html>

Como vrios documentos foram usados, organize-os de maneira a conseguir um

resultado parecido com a imagem acima. Alm dos frames tivemos algumas outras tags de
formatao. '<strong>' faz basicamente o mesmo que a tag '<b>', isto , deixa o texto em
negrito, mas na verdade um texto forte com nfase. '<big>' deixa o texto em tamanho maior
na tela. Outro detalhe a ser observado que no caso dos frames que so compostos pelos
documentos oi1, oi2 e oi3.html, cada um tem uma cor de fundo diferente. Isso foi usado
apenas para mostrar que cada um dos frames totalmente independente do outro, no
compartilhando o mesmo plano de fundo.
Apenas para complementar, aconselhvel o uso da tag '<noframes>' nos documentos
que contenham frames. Essa tag especifica o que dever ser feito caso o navegador no seja
capaz de trabalhar com frames.

Forms
Um form uma rea que contm elementos de formulrio em um documento HTML.
Esses elementos so responsveis por permitir que o usurio entre com informaes (como
campos de texto, reas de texto, menus, etc.) em um formulrio. So definidos pela tag
'<form>'.
Os formulrios so constantes nas pginas encontradas na internet e basicamente todo
cliente de webmail tem elementos de formulrio, mais precisamente campo de texto e campo
de senha para poder fazer a entrada de seu login e senha. Mesmo que voc no se lembre
deles agora, provavelmente ver que eles so familiares depois de alguns exemplos.
Faremos nosso primeiro exerccio exatamente em cima destes dois exemplos.
Os formulrios so constantes nas pginas encontradas na internet e basicamente todo
cliente de webmail tem elementos de formulrio, mais precisamente campo de texto e campo
de senha para poder fazer a entrada de seu login e senha. Mesmo que voc no se lembre
deles agora, provavelmente ver que eles so familiares depois de alguns exemplos.
Faremos nosso primeiro exerccio exatamente em cima destes dois exemplos:
<html>
<head>
<title>Estamos quase acabando, paci&ecirc;ncia com os forms</title>
</head>
<body>
<p>Veja se isto te lembra algo em clientes de e-mail</p>
<form>
Login:<input type="text" name="login" /><br />
Senha:<input type="password" name="password" />
</form>
</body>
</html>
Logo acima podemos ver algumas coisas a respeito dos forms. Uma delas que eles
no tm muita serventia se no tivermos outros elementos dentro deles, os '<input>' (Lembrese de fechar a tag com um '/' no final dela. Como j disse, todas as tags devem ser fechadas!).
So eles os responsveis por mostrar no navegador os campos que sero responsveis por
possibilitar a entrada de algum tipo de informao por parte do usurio. O atributo 'type'
determina o tipo do elemento, veja abaixo alguns deles:
text: Usado quando voc quer inserir caracteres, nmeros e afins no formulrio.
password: Bem parecido com o 'text' mas sua entrada de dados no aparecer
explicitamente para o usurio. Usada principalmente, como o prprio nome sugere, para a
entrada de senhas.
radio: So os radio buttons, ou botes de opo. Elas permitem que o usurio seja
capaz de escolher um elemento entre um nmero limitados deles.
checkbox: As check boxes, ou caixas de seleo, tm uma finalidade parecida com a
dos botes, com a diferena de permitir que sejam selecionados mais de um elementos.
submit: O boto submit serve para enviar os dados.
reset: O boto reset serve para apagar todas as entradas do formulrio.
Uma outra tag que bem comum nas pginas a '<select>' que geralmente tambm
esto dentro de formulrios. El ter sub-elementos que sero as tags '<option>' que sero
valores que popularo o menu drop-down. O exemplo abaixo clarifica o seu uso
<select name="servico">
<option value="email">E-mail</option>
<option value="agenda">Agenda</option>
<option value="noticias">Not&iacute;cias</option>
<option value="jogos">Jogos</option>
</select>
Podemos usar os botes de opo para fazer algo semelhante ao select

<input type="radio" name="servico_botao" value="email" /> E-mail<br />

<input type="radio" name="servico_botao" value="agenda" /> Agenda<br />
<input
type="radio"
name="servico_botao"
value="noticias"
/>
Not&iacute;cias<br />
<input type="radio" name="servico_botao" value="jogos" /> Jogos<br />
Os botes de opo precisam basicamente de dois atributos para funcionar
corretamente. Um deles o 'name', que diz o grupo ao qual ele pertence. Os botes devem
estar agrupados para quando os dados forem recuperados na pgina que receber o
formulrios, as aes corretas sejam tomadas. O atributo 'value' o valor do boto em si,
dentro do grupo e sabendo qual o nome da opo, possvel tratar de maneira precisa o que
dever ocorrer com os dados do formulrio.
O mesmo conceito de grupos e valores individuais tambm se aplica s caixas de
seleo. Da mesma maneira elas devem ser agrupadas e depois receber um valor especfico
para cada uma delas. O exemplo abaixo mostra isso.
E-mail: <input type="checkbox" name="servico_cb" value="email" /><br />
Agenda: <input type="checkbox" name="servico_cb" value="agenda" /><br />
Not&iacute;cias: <input type="checkbox" name="servico_cb" value="noticias"
/><br />
Jogos: <input type="checkbox" name="servico_cb" value="jogos" /><br />
Como voc pode perceber, elas possuem igualmente os campos 'name' e 'value' que
funcionam da mesma maneira.
possvel colocar alguns botes tambm, eles podem ter vrias utilidades, mas usando
apenas HTML pouco provvel que voc encontre alguma utilidade prtica para eles. De
qualquer maneira, veja abaixo como utiliz-los:
<input type="button" value="Oi, eu sou um bot&atilde;o">
No h muito mistrio quanto sua sintaxe, o tipo deve ser 'button' e o atributo 'value'
dir o que aparecer no texto do boto.
Vamos agora tratar o caso de dois botes bem comuns em formulrios, 'submit' e
'reset'. Cada um deles um tipo especial de elemento usados, respectivamente, para enviar o
formulrio e apagar tudo que foi entrado no mesmo. Para us-los, o tipo (type) da tag
'<input>' deve ser 'submit' ou 'reset'. Alm disso, voc pode dar um outro nome para o
boto, alterando o valor do atributo 'value'.
<input type="submit" value="Enviar" />
<input type="reset" value="Apagar" />
As linhas acima mostram o exemplo de um boto 'submit' e um 'reset', os dois esto
com seus 'value's alterados para poder exibir nomes em portugus. Coloque-os em um
documento de exemplo, junto com mais campos de formulrio e clique em ambos para
entender o funcionamento deles. O boto reset tem uma caracterstica mais explcita, voc
ver os campos que j estavam preenchidos serem todos esvaziados, e exatamente isso que
ele deve fazer. No caso do 'submit' os dados tambm sero apagados, mas algo mais
acontece. Veja na barra de endereos do navegador que o URL ser alterado de acordo com os
dados que voc tiver inserido. exatamente dessa maneira que as pginas se comunicam.
verdade que no faz muito sentido esse exerccio, j que os dados inseridos no so
utilizados para nada. O tratamento dessas informaes feita, de maneira mais bsica, pelo
CGI mas podem tambm ser usadas diversas linguagens de programao para os mais
variados fins. Isso, porm, foge do escopo do presente material e portanto no ser explicado.
Entretanto, fica aqui mais um instruo referente formulrios, eles podem ser usados para
redirecionar alguma outra pgina com as informaes que foram fornecidas. Isso feito
atravs do atributo 'action' da tag '<form>'.
<form name="entrada" action="pagina_redirecionada.html">
Esse atributo est intimamente ligado ao boto 'submit', uma vez que esse endereo
ser acessado ao clicar nele. Resumindo, voc coloca em um formulrio a ao que dever ser

desempenhada ao se clicar no boto 'submit'. O documento receber as informaes que

estavam contidas no formulrio e podero, conseqentemente, ser tratadas para algum fim
especfico. Faa o teste preenchendo um formulrio e em seguida clicando no boto 'submit'
que redirecione para uma pgina local vlida, voc poder ver que no final do URL havero os
dados que estavam no formulrio da pgina anterior.

Consideraes Finais
Bom, com isso conclumos a apostila. Espero que seja til como aprendizado e como
referncia rpida. Alguns tpicos interessantes para aprofundar o que foi mostrado aqui so:
JavaScript: linguagem de programao extremamente til para lidar dinamicamente
com os contedos.
CGI: Um protocolo usado para tratar requisies do cliente web e retornar contedo.
XML: Uma outra linguagem de formatao, pode ser usada para vrios propsitos
CSS: Linguagem para descrever a apresentao de um documento HTML (entre outros).
Responsvel por muitos dos layouts presentes nas pginas.
<div>: Tags de HTML que no foram abordadas aqui. Em conjunto com CSS, compem
uma grande parte das pginas atuais da internet.
Por fim, fique com uma lista de tags e cdigos para caracteres especiais.

Lista de caracteres especiais

&lt;
&amp;
&Aacute;
&Eacute;
&Iacute;
&Oacute;
&Uacute;
&aacute;
&eacute;
&iacute;
&oacute;
&uacute;
&Auml;
&Euml;
&Iuml;
&Ouml;
&Uuml;
&auml;
&euml;
&iuml;
&ouml;
&uuml;
&Atilde;
&Ntilde;
&Otilde;
&atilde;
&ntilde;
&otilde;
&Oslash;
&oslash;
&ETH;
&eth;
&szlig;
&frac14;
&frac12;
&frac34;
&copy;
&reg;
&ordf;
&sup2;
&sup3;
&sup1;
&macr;

<

&gt;
>
&
&quot;
&Agrave;

&Egrave;

&Igrave;

&Ograve;

&Ugrave;

&agrave;

&egrave;

&igrave;

&ograve;

&ugrave;

&Acirc;

&Ecirc;

&Icirc;

&Ocirc;

&Ucirc;

&acirc;

&ecirc;

&icirc;

&ocirc;

&ucirc;

&aring;

&Aring;

&Ccedil;

&ccedil;

&Yacute;

&yacute;

&yuml;

&THORN;

&thorn;

&AElig;
&aelig;

&nbsp;
&iexcl;

&pound;

&yen;

&sect;
&curren;

&brvbar;

&laquo;

&not;

&shy;

"

&micro;
&para;
&middot;
&deg;
&cedil;
&iquest;
&times;
&divide;
&#147;
&#148;
&#140;
&#135;

&ordm;

&acute;

&uml;

&plusmn;
&raquo;

&cent;
&euro;
&#153;
&#137;
&#131;
&#134;

Lista de tags
tag
descrio
<!--...--> define um comentrio
<!DOCTYPE> define o tipo do documento
<a>
define uma ncora
<abbr>
define uma abreviao
<acronym> define um acrnimo
<address> define um elemento de endereo
<area>
define uma rea dentro de um mapa de imagem
<b>
define texto em negrito
<base>
define o URL base para todos os links da pgina
<bdo>
define a direo em que o texto ser mostrado
<big>
define texto grande
<blockquote> define uma longa citao
<body>
define o elemento de corpo
<br>
insere uma quebra de linha
<button>
define um boto
<caption> define a legenda de uma tabela
<cite>
define uma citao
<code>
define um texto de cdigo de computador
<col>
define atributos para as colunas de tabela
<colgroup> define um grupo de colunas de tabela
<dd>
define a descrio de uma definio
<del>
define texto apagado
<div>
define uma seo no documento
<dfn>
define uma definio de termo
<dl>
define uma lista de definies
<dt>
define um termo de definio
<em>
define um texto enfatizado
<fieldset> define um arranjo de campos
<form>
define um formulrio
<frame>
define uma sub-janela (frame ou quadro)
<frameset> define um arranjo de frames
<h1> to <h6> define cabealhos 1 a 6
<head>
define informaes sobre o documento
<hr>
define uma linha horizontal
<html>
define um documento HTML
<i>
define um texto em itlico
<iframe>
define um frame em linha
<img>
define uma imagem
<input>
define um campo de entrada
<ins>
define um texto inserido
<kbd>
define um texto de teclado
<label>
define um rtulo para controle de formulrio
<legend>
define o ttulo de um arranjo de campos
<li>
define um item de lista

<link>
<map>
<meta>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<p>
<param>
<pre>
pargrafos)
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<style>
<sub>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<title>
<tr>
<tt>
<ul>
<var>

define uma referncia de recurso

define um mapa de imagem
define meta-informao
define uma seo sem frames
define uma seo sem scripts
define um objeto embarcado
define uma lista ordenada
define um grupo de opes
define uma opo em uma lista drop-down
define um pargrafo
define um parmetro para um objeto
define texto pr-formatado (respeita espaos e
define uma citao curta
define um exemplo de cdigo de computador
define um script
define texto selecionvel
define um texto pequeno
define uma seo em um documento
define texto destacado
define uma definio de estilo
define texto subscrito
define texto sobrescrito
define uma tabela
define o corpo de uma tabela
define uma clula de uma tabela
define uma rea de texto
define o rodap de uma tabela
define o cabealho de uma tabela
define o cabealho de uma tabela
define o ttulo de um documento
define uma linha de tabela
define texto monoespaado
define uma lista no ordenada
define uma varivel