CURSO BSICO DE

HTML
Apostila desenvolvida para ser usada em um curso bsico de HTML do
comit Fome-Zero Joinville.
Quaisquer dvidas! su"est#es! reclama$#es enviar e-mail para
%elipe&at&"allois&dot&us.
Felipe 'allois
())*
+ste trabal,o est licenciado sob uma Licen$a -reative -ommons Atribui$.o-
/so0.o-omercial--ompartil,amento pela mesma licen$a. 1ara ver uma c2pia
desta licen$a! visite ,ttp344creativecommons.or"4licenses4b5-nc-sa4(.64br4 ou
envie uma carta para -reative -ommons! 667 0at,an Abbott 8a5! 9tan%ord!
-ali%ornia 7:;)6! /9A.
Sumrio
Introduo.............................................................................................................................................4
Elementos............................................................................................................................................5
Comeando sua pgina........................................................................................................................6
Hyperlinks.........................................................................................................................................11
Imagens..............................................................................................................................................14
Listas...................................................................................................................................................17
a!elas..............................................................................................................................................."#
$rames..............................................................................................................................................."5
$orms................................................................................................................................................."%
Considera&es $inais.........................................................................................................................'"
Lista de (ara(teres espe(iais...............................................................................................................'"
Lista de tags........................................................................................................................................''
Introduo
/ma p"ina da <eb =<ebpa"e> ? uma %onte de in%orma$#es que ? adequada @ 8orld
8ide 8eb e que pode ser acessada por um nave"ador <eb. Asso quer diBer que ela ? um
documento que ? %eito de modo @ atender requisitos da rede mundial de computadores e
capaB de ser visualiBada a partir de um pro"rama especC%ico para esse %im.
As p"inas <eb est.o localiBadas ou em um computador local ou remoto e
disponibiliBadas atrav?s de um servidor <eb. D acesso a elas pode ser restrin"ido @ redes
locais! apenas ao pr2prio computador ou ainda ser publicada na Anternet. A requisi$.o e o
acesso a elas ? %eita por meio de um protocolo c,amado HTT1 =H5perteEt Trans%er 1rotocol! ou
1rotocolo de trans%erncia de ,iperteEto>.
Dri"inalmente! as p"inas <eb eram arquivos estticos de teEto "uardados dentro de
servidores <eb. Atualmente! entretanto! ? comum encontrarmos servidores que "eram
dinamicamente os arquivos =E>HTML de acordo com a requisi$.o do nave"ador. +Eistem ainda
maneiras de obtermos comportamento dinFmico pelo lado do cliente =nave"ador> por meio de
implementa$#es de AGaE e Java9cript! por eEemplo.
As <ebpa"es utiliBam de HTML =H5perteEt MarHup Lan"ua"e> para %aBer a %ormata$.o
dos dados. I importante notar que HTML n.o ? uma lin"ua"em de pro"rama$.o! mas sim de
%ormata$.o. Asso "uarda di%eren$as %undamentais entre HTML e! por eEemplo! Java9cript! uma
veB que a primeira limita-se apenas a mudar a maneira como os dados s.o dispostos na tela.
1ara mel,orar a aparncia das <ebpa"es ? possCvel usar c2di"o -99 =-ascadin" 9t5le
9,eet> que pode ser escrito em um arquivo em separado ou dentro do pr2prio HTML. I
pre%erCvel valer-se da primeira op$.o uma veB que isso torna seu c2di"o mais reutiliBvel e!
al?m disso! o uso de -99 torna-se mais e%iciente G que aproveita-se mel,or da maneira como
o HTT1 trabal,a! com o nave"ador baiEando uma nica veB as in%orma$#es e "uardando-as em
cac,e.
As ima"ens s.o armaBenadas tamb?m como arquivos separados em servidores <eb. D
nave"ador %aB o trabal,o de baiEar todas as ima"ens enquanto a p"ina ? processada!
mantendo a coneE.o com o servidor at? que todas as in%orma$#es seGam baiEadas e
%ornecidas. A "rande maioria deles renderiBa as ima"ens Guntamente com os teEtos e outros
materiais na p"ina a ser eEibida.
Elementos
/ma p"ina <eb apresenta uma s?rie de elementos que ser.o usados para a intera$.o
com o usurio. +les dividem-se em duas "randes cate"orias! os que s.o mostrados e os que
n.o s.o.
+ntre os mostrados! temos as in%orma$#es teEtuais! com diversas varia$#es de
renderiBa$.oJ as in%orma$#es n.o-teEtuais! como ima"ens estticas ="i%! Gp"! pn"! etc> ou
animadas =animated "i%! %las,! s,ocH<ave>! udio =midi! <av> e vCdeo =<mv! rm! mov! etc>! eJ
in%orma$#es interativas que s.o mais compleEas! atreladas @ inter%ace. 0esse ponto! temos
teEtos interativos! ilustra$#es interativas! bot#es! ,5perlinHs e %ormulrios.
-omo elementos n.o mostrados temos os comentrios! meta dados=KTK>! in%orma$#es
de dia"rama$.o e estilo =-99> e scripts =Java9cript>.
0em todos esses elementos ser.o tratados no escopo do curso. Muitos deles requerem
%erramentas adicionais e uma "rande quantidade de recursos do computador! tanto para a
cria$.o quanto para a eEibi$.o e s.o usados apenas para tornar mais a"radvel a eEperincia
de nave"a$.o do usurio.
Comeando sua pgina
1ara criar suas pr2prias p"inas n.o ? necessrio um vasto arsenal de %erramentas!
apenas um editor de teEto e um nave"ador G s.o su%icientes. 1ara um iniciante ? at? mel,or
que n.o seGam usados recursos muito compleEos! eles podem %aBer com que muitos detal,es
triviais! mas importantes! passem despercebidos. 1ara o nosso curso! usaremos um editor de
teEto simples de sua pre%erncia =como o H<rite! o "edit ou o Mousepad>. Lecursos como o
s5ntaE ,i",li",tin" =ou destaque de sintaEe> s.o realmente teis durante a cria$.o da sua
p"ina ao mesmo tempo que n.o M%aBem o trabal,oM por voc! ent.o ? prudente que voc
deiEe-o li"ado. Qualquer nave"ador que ten,a inter%ace "r%ica serve para o nosso curso! %ique
a vontade para escol,er o de sua pre%erncia.
-ome$aremos com al"o bem simples! abra o editor de teEto e insira o se"uinte
<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>
9alve o arquivo como teste.,tml e abra com um nave"ador. Noc ver o se"uinte
A"ora vamos eEplicar al"umas coisas sobre o eEercCcio acima. 1rimeiramente! tudo que
estiver entre os sinais de menor que e maior que =OPO e OQO>! incluindo eles s.o c,amadas
Ota"sO. As ta"s s.o partes importantes em documentos HTML! elas s.o as responsveis por toda
a %ormata$.o do teEto. -om elas voc pode dividir o documento em rea de cabe$al,o e corpo!
colocar tCtulos! criar tabelas! divis#es! %ormulrios e ainda %ormatar trec,os especC%icos do
teEto! como a parte em ne"rito acima.
A primeira ta" <html>. +la diB ao nave"ador que esse ponto marca o inCcio de um
documento HTML! enquanto que a ltima ta" </html> diB a ele eEatamente o que ? esperado!
que esse ? o %im do documento HTML. D teEto que est compreendido entre as ta"s <head> e
</head> ? in%orma$.o sobre a rea de cabe$al,o! como voc pode perceber com <title> e </
title> onde o teEto que est entre essas ta"s aparecer no tCtulo da Ganela do nave"ador.
1rosse"uindo! temos as ta"s <body> e </body> que s.o responsveis por "uardar os
dados re%erentes ao corpo do documento. Asso si"ni%ica que o teEto que estiver entre elas ser
eEibido pelo nave"ador. 1or %im! as ta"s PbQ e P4bQ %ar.o com que o teEto entre elas seGa
eEibido em ne"rito =em in"ls! bold>.
Noc G deve ter percebido que as ta"s utiliBadas sempre tm um M%ec,amentoM como
por eEemplo! <html> -Q </html>! <head> -Q </head> e <body> -Q </body>. Asso realmente ?
valido para uma "rande quantidade delas! mas n.o ser onipresente! portanto %ique atento.
/ma considera$.o a ser %eita sobre as ta"s ? que elas n.o s.o sensCveis @ caiEa! o que
si"ni%ica que <b> ? o mesmo que <B> embora as conven$#es atuais incentivem o uso de todas
as ta"s em letras minsculas. +nt.o! para se"uir os mais novos padr#es <eb voc deve usar
letras minsculas. D padr.o EHTML demanda necessariamente o uso delas.
/ma outra quest.o que pode sur"ir ? sobre a eEtens.o dos arquivos. Anti"amente!
muitos sistemas n.o permitiam salvar eEtens#es que tivessem mais do que trs caracteres e
por isso era comum ver arquivos com nomes como OindeE.,tmO ou O,ome.,tmO. HoGe em dia ?
raro encontrarmos um sistema moderno que n.o permita eEtens#es com um nmero de
caracteres que vai muito al?m de trs! lo"o ? totalmente aceitvel usar OindeE.,tmlO ou
O,ome.,tmlO como ? o caso do nosso ltimo eEemplo =teste.,tml>.
Ds espa$os utiliBados para separar uma palavra da outra aparecer.o normalmente na
sua visualiBa$.o! por?m! caso voc use mais de um espa$o! eles n.o ser.o considerados. 1ara
que isso ocorra! ? preciso usar uma ta" especial.
Trataremos a"ora dos elementos HTML. -onsiderando o nosso ltimo eEemplo! O<b>+sse
teEto estRaacuteJ em ne"rito</b>O ? um elemento onde3 S> o elemento HTML inicia-se com a
ta" de inCcio O<b>OJ (> o contedo do elemento ? O+sse teEto estRaacuteJ em ne"ritoO! eJ ;> o
elemento HTML termina com a ta" de %im O</b>O.
Tamb?m ? um elemento HTML o se"uinte trec,o3
<body>
Essa &eacute; a minha primeira p&aacute;gina. <b>Esse texto est&aacute; em
negrito.</b>
</body>
D inCcio do elemento ? OPbod5QO e o %im OP4bod5QO.
/m detal,e importante a ser mostrado aqui ? o que diB respeito @ acentua$.o. Noc
deve ter notado al"umas coisas Mestran,asM nos eEemplos acima! como OReacuteJO ou
ORaacuteJO. +ssas s.o re%erncias para os caracteres especiais como O?O ou OO no eEemplo
acima! mas que tamb?m s.o utiliBados em outros casos. D uso deles se deve ao %ato de que
al"uns caracteres s.o reservados! %acilmente perceptCvel em OPO e OQO que servem para abrir e
%ec,ar ta"s. D que %arCamos para inserir esses caracteres em um teEto dentro do HTMLT
/samos re%erncias especiais para tal! se"uindo o eEemplo ORltJO e OR"tJO. Falaremos mais sobre
eles na ,ora devida.
/saremos a"ora al"umas ta"s para tornarmos nosso teEto mais compleEo. Abra o editor
de teEtos e crie o arquivo Oteste(.,tmlO. +screva o c2di"o a se"uir.
-abe$al,os! par"ra%os e quebras de lin,a
Phtml>
<head>
<title>Exemplos de texto com cabe&ccedil;alho, par&aacute;grafos e uebras
de linha</title>
</head>
<body>
<h!>Esse &eacute; um cabe&ccedil;alho muito grande</h!>
<h">Esse &eacute; um cabe&ccedil;alho um pouco menor, mas bem grande
ainda</h">
<h#>Esse &eacute; um cabe&ccedil;alho nem t&atilde;o grande assim</h#>
<h$>Esse &eacute; um cabe&ccedil;alho m&eacute;dio</h$>
<h%>Esse &eacute; um cabe&ccedil;alho peueno</h%>
<h&>Esse &eacute; um cabe&ccedil;alho muito peueno</h&>
<hr />
<p>'gora faremos um par&aacute;grafo. ' tag &apos;&lt;hr /&gt;&apos; no
c&oacute;digo ser(e para inserir uma linha hori)ontal, (oc&ecirc; pode (&ecirc;*
la acima.</p>
<p>+ote ue ao criarmos outro, temos uma linha branca adicionada entre
eles</p>
'gora o texto est&aacute; sendo escrito diretamente no corpo do documento,
sem nenhuma formata&ccedil;&atilde;o. <br />
,se a tag (a)ia &apos;&lt;br /&gt;&apos; para uebrar linhas -saltar
linhas. sen&atilde;o o seu texto (ai ficar bem estranho.
</** 0inalmente, esse 1 um coment2rio. 3 ue (oc4 escre(er aui n5o ser2
mostrado no documento exibido pelo na(egador, mas pode a6udar a entender o ue
(oc4 uer fa)er com o c7digo. **>
</body>
</html>
A"ora vamos eEplicar um pouco mais sobre as ta"s usadas nesse eEemplo.
1reservamos a mesma estrutura de O<html><head><title></title></head><body></body></
html>O! mas acrescentamos diversas outras ta"s. As que se iniciam com o O,O e s.o se"uidas
por um nmero de S a U =O<h!>O e O<h$>O! por eEemplo> servem para %aBer um cabe$al,o! um
teEto que se destacar do restante. D nmero determina o taman,o do mesmo! quanto menor
o nmero! maior a tipo"ra%ia. A ta" O<hr />O serve para inserir uma lin,a ,oriBontal ao lon"o de
todo o documento enquanto a O<br /QO apenas salta para a pr2Eima lin,a. /ma observa$.o
sobre essas duas ta"s ? que ambas podem ser escritas da se"uinte maneira3 O<br>O ou O<hr>O.
A raB.o pela qual se coloca a barra no %inal dela ? que elas s.o ta"s vaBias! isto ?! n.o
precisam de uma ta" para inici-las e outra para termin-las. Ds novos padr#es da <eb
determinam que toda e qualquer ta" deve ser %ec,ada! incluindo as ta"s vaBias. 1or isso
colocamos a barra no %inal! para indicar que ela se inicia e se %ec,a nela mesma. Kessa
maneira! "arantimos que nosso c2di"o possibilite sua reutiliBa$.o no %uturo! quando as novas
normas estiverem em vi"or. Al?m dessas ta"s temos os par"ra%os! representados por O<p>O e
O</p>O. D teEto compreendido entre elas ser colocado como um par"ra%o separado e ao
t?rmino da ta" uma nova lin,a ser inserida.
Fora isso! vale ainda comentar no momento sobre os caracteres especiais utiliBados.
Temos vrios deles nesse eEemplo3
OReacuteJO! M?M
ORccedilJO! M$M
ORaposJO! MOM
ORltJO! MPM
OR"tJO! MQM
ORotildeJO! M#M
ORecircJO! MM
s.o al"uns deles. Ao %inal da apostila teremos uma tabela mostrando cada um deles.
-om base no que vimos at? aqui! crie um arquivo c,amado Mseu&nome.,tmlM! n.o
esque$a de colocar realmente o seu nome J>. Kentro dele! %a$a al"o diBendo quem ? voc! seu
nome! sua idade! o que %aB da vida e qualquer outra coisa que quiser diBer. 0.o se esque$a de
usar as ta"s que voc viu at? a"ora.
0o %inal desse documento voc ver al"uns eEemplos dos eEercCcios que ser.o
passados aqui. -aso precise de al"uma re%erncia! n.o ,esite em consult-los.
Al"umas ta"s apresentam atributos que podem ser modi%icados por voc @ medida que
ac,ar necessrio. Neremos al"uns eEemplos abaiEo! tomando como ponto de partida o
eEemplo de apresenta$.o usado no eEercCcio anterior.
<html>
<head>
<title>8&aacute;gina do 9allois</title>
</head>
<body>
<h!>3l&aacute;, se6a bem*(indo &agra(e; minha :ebpage</h!>
<hr />
<p>;eu nome &eacute; 0elipe 9allois e sou estudante de <i&ecirc;ncia da
<omputa&ccedil;&atilde;o na ,=E><. Eu sou bolsista do pro6eto 0ome*?ero em
@oin(ille e respons&aacute;(el por fa)er a apostila do curso de
cria&ccedil;&atilde;o de p&aacute;ginas :eb.</p>
<aso (oc&ecirc; encontre algum erro, tenha alguma cr&iacute;tica ou
sugest&atilde;o para a melhoria deste material, mande um e*mail para mimA<br />
felipeBgallois.us<br /><br />
't&eacute; a pr&oacute;xima.
</body>
</html>
Namos a"ora alterar al"uns atributos! come$ando pelo cabe$al,o. Altere
<h!>3l&aacute;, se6a bem*(indo &agra(e; minha :ebpage</h!>
para
<h! alignCDcenterD>3l&aacute;, se6a bem*(indo &agra(e; minha :ebpage</h!>
Em segundai, altere
<body> para <body bgcolorCDblueD>
Abra o arquivo e veGa as modi%ica$#es. D que ocorreu e%etivamenteT Ao inserir o
atributo OalignCDcenterDO na ta" O<h!>O voc solicitou que o teEto %osse alin,ado no centro da
p"ina. 0o caso do corpo do documento! o atributo ObgcolorCDblueDO quer diBer que voc ir
alterar a cor do plano de %undo =bacH"round color ou b"color> para aBul =blue>.
0ote que os atributos pre%erencialmente devem ser escritos em letras minsculas!
novamente para atender @s novas conven$#es. Ds valores dos atributos devem sempre estar
entre aspas! simples ou duplas! ? indi%erente. Fique atento apenas ao caso de voc querer usar
um valor de atributo que ten,a aspas! onde voc precisar alternar as duas para poder
alcan$ar o resultado deseGado! por eE. nameCEEdson 'rantes D8el1D do +ascimentoO.
Hyperlinks
/m outro recurso amplamente utiliBado em HTMLs ? o ,5perlinH. +le serve para li"ar um
documento @ outro na 8eb. Vasicamente! ele ser composto pelo endere$o de outro
documento e! ao ser clicado! levar voc ao endere$o re%erenciado por ele. +Eistem duas
maneiras de usar ,5perlinHs nos seus documentos! com teEtos ou com ima"ens. D teEto
aparecer sublin,ado e o cursor do mouse %icar di%erente ao passar por cima dele. As ima"ens
ter.o o mesmo e%eito de mudan$a de cursor.
1rimeiramente ensinaremos a criar linHs com teEto. +les podem ser criados com a ta"
O<a hrefCDendereFo para onde uer redirecionarD>O! que deve ser %ec,ada com O</a>O. D
contedo entre a ta" ser o teEto que dever ser clicado para que o nave"ador redirecione.
1ode ser qualquer coisa que voc quiser! mas recomenda-se usar al"uma coisa intuitiva. A
Anternet ori"inalmente pretendia usar ,5perlinHs em abundFncia! quando seu contedo ainda
era basicamente composto por teEtos cientC%icos e documentos. D aumento da velocidade de
trans%erncia e o inCcio do uso de ima"ens e meios multimCdia na rede o%uscaram um pouco
seu prop2sito ori"inal. /m eEemplo para o uso de ,5perlinHs com teEto seria3
<a hrefCDhttpA//:::.google.comD>9oogle</a>
/m recurso que pode ser til se voc quiser redirecionar a pessoa mas manter a sua
pr2pria p"ina aberta ? adicionar o atributo EtargetCDGblanHDE @ sua ta" O<a>O. D resultado ?
que ao clicar no linH! uma nova Ganela do nave"ador abrir com o endere$o deseGado. 0ote o
eEemplo abaiEo3
<a hrefCDhttpA//:::.google.comD targetCDGblanHD>9oogle</a>
A"ora vamos mostrar como voc cria um ,5perlinH usando uma ima"em ao inv?s do
teEto. D processo ? bem semel,ante.
<a hrefCDhttpA//:::.google.comD><img borderCDID
srcCDhttpA//:::.google.com.br/intl/pt*BJ/logos/KogoG"%:ht.gifD /></a>
0o lu"ar do teEto inserimos uma ima"em e ela automaticamente se trans%orma na
Fncora responsvel por li"ar o documento @ outro.
Namos aproveitar esse eEemplo para darmos mais uma eEplica$.o! como inserir
ima"ens. Noc deve ter percebido que usamos uma ta" di%erente lo"o acima3 O<img />O. +la
tem seus atributos que ser.o mostrados em breve. +la serve eEatamente para inserir ima"ens
no documento HTML! servindo tanto para buscar ima"ens no computador local ou na rede. 0o
nosso caso! usamos para buscar na Anternet! mas isso ? indi%erente! o nave"ador trata
qualquer um dos casos muito bem.
1ara eEplicar como %unciona o mecanismo de usar ima"ens que est.o no computador
local! devemos entender dois conceitos antes! o de camin,o relativo e o de camin,o absoluto.
D camin,o absoluto indica a localiBa$.o do arquivo no computador a partir do diret2rio raiB.
1or eEemplo! um arquivo c,amado O%oo.barO que est dentro da pasta ,ome do usurio Joao
tem camin,o absoluto O4,ome4Joao4%oo.barO ou o arquivo de con%i"ura$.o padr.o de "rande
parte dos Wor" tem camin,o absoluto O4etc4WSS4Eor".con%O.
D conceito de camin,o relativo distancia-se do de absoluto na medida em que n.o ?
possCvel determinar o camin,o do arquivo sem saber a pasta em que se est no momento.
Dutra di%eren$a ? que torna-se mais complicado acessar um arquivo que esteGa em uma pasta
que est numa pasta que n.o descende da que voc est na rvore de diret2rios. 1ara
diBermos o camin,o relativo de um arquivo O%oo.barO que est na mesma pasta em que
estamos no momento! podemos diBer que ? O%oo.barO. 9upon,amos a"ora a se"uinte estrutura
de pastas
arui(os
L** fotos
M L** fotosGdoGanoGno(o
M M L** anoGno(o!.6pg
M M L** anoGno(o".6pg
M M L** anoGno(o".6pg
M L** fotosGdaGpascoa
M M L** pascoa!.6pg
M M L** pascoa".6pg
M M L** pascoa#.6pg
M L** fotosGnaGpraia
M M L** praia!.6pg
M M L** praia".6pg
M M L** praia#.6pg
M L** foto!.6pg
M L** foto".6pg
M L** foto#.6pg
L** textos
M L** texto!.txt
M L** texto".txt
M L** texto#.txt
L** (ideos
M L** (ideo!.mpg
M L** (ideo".mpg
M L** (ideo#.mpg
L** pro6etos
L** pro6eto!
M L** tema!.tem
M L** tema".tem
L** pro6eto"
M L** tema#.tem
M L** tema$.tem
L** pra)osGdosGpro6etos.txt
1artindo da pasta arquivos! o camin,o relativo do arquivo O%otoS.Gp"O ? O%otos4%otoS.Gp"O
enquanto o de OteEto(.tEtO ? O4teEtos4teEto(.tEtO. Kessa maneira! o arquivo OtemaS.temO do
proGetoS ter como camin,o relativo OproGetos4proGetoS4temaS.temO. At? aC n.o eEistem muitas
complica$#es! mas ? necessrio con,ecer um pouco sobre como trabal,ar com arquivos que
est.o em pastas que est.o em nCveis superiores. Asso eEi"ir o uso de O..O. Quando voc estiver
na pasta proGetoS e quiser saber o camin,o relativo do arquivos OpraBos&dos&proGetos.tEtO
dever ter em mente que este arquivo encontra-se em um nCvel superior na rvore de
diret2rios com rela$.o @ qual voc est no momento. Asso quer diBer que voc deve retroceder
um nCvel para s2 ent.o poder c,amar o arquivo deseGado! e eEatamente para isso ser
necessrio o uso de O..O. -omo solu$.o! estando na pasta proGetoS! o camin,o relativo ser
O..4praBos&dos&proGetos.tEtO.
Quando %or necessrio retroceder mais nCveis ainda! voc precisar usar mais O..O. 1or
eEemplo! ima"ine-se a"ora no diret2rio OproGeto(O e deseGa saber o camin,o relativo para o
arquivo Opraia;.Gp"O. +le ser O..4..4%otos4%otos&na&praia4praia;.Gp"O. Ds primeiros O..O te colocar.o
no diret2rio OproGetosO e o se"undo no OarquivosO. Keste ponto em diante voc se"ue os passos
de como se estivesse apenas buscando em sub-diret2rios.
Kada essa lon"a eEplica$.o! prosse"uiremos na parte de ima"ens no computador local.
Fica bem simples se o princCpio acima estiver entendido pelo aluno. 1ara adicionar uma
ima"em que esteGa na mesma pasta do seu documento HTML apenas coloque
<img srcCDnomeGdaGimagemD />
-aso ela esteGa numa subpasta
<img srcCDnomeGdaGsubpasta/nomeGdaGimagemD />
+! %inalmente! se ela estiver em pastas que n.o descendem da que voc estiver
<img srcCD../nomeGdaGpasta/nomeGdaGimagemD />
Noc pode descer quantos nCveis quiser at? encontrar sua ima"em! mas ?
recomendado! caso sua ima"em esteGa em lu"ares que n.o seGam o pr2prio camin,o ou uma
subpasta! que voc utiliBe o camin,o absoluto. +m "eral! quando se est %aBendo p"inas de
"rande porte! ? comum armaBenar todas as ima"ens em subpastas do camin,o onde se
encontra o documento HTML. Kessa maneira! o uso de camin,os relativos se torna muito mais
"il e %acilita imensamente no caso de ser necessrio uma mudan$a de servidor ou da pasta
onde se encontram os arquivos! isso porque quando %or completada a opera$.o! nen,um
camin,o precisar ser consertado no seu c2di"o.
Imagens
As ima"ens s.o elementos eEtremamente comuns nos documentos <eb atualmente.
+las %aBem parte dos mais variados tipos de p"inas e podem ser usadas tanto para decorar
como para compor a in%orma$.o de maneira a torn-la mais compreensCvel. I di%Ccil
nave"armos na Anternet e entrarmos em uma p"ina que n.o ten,a pelo menos uma ima"em.
I importante notar que as ima"ens podem ter diversas aplica$#es nos documentos <eb! ?
possCvel us-las como decora$.o para uma p"ina! como plano de %undo! como eEplica$.o
para al"uma coisa =como usada nos livros>! como li"a$.o para outras p"inas =,5perlinHs>! etc.
Ds desi"ners %aBem muitas coisas com as ima"ens! principalmente "r%icos vetoriais!
para criar inter%aces mais a"radveis no uso de p"inas! paralelamente ao uso de -99. D
resultado traB p"inas muito bonitas! mas que al"umas veBes %icam bem pesadas para um
computador lento ou uma internet de velocidade mais baiEa. -abe a voc %aBer o Gul"amento
de equilibrar o documento e traBer uma eEperincia a"radvel ao usurio! tanto no ponto de
vista de qualidade visual quanto em per%ormance.
-omo vimos anteriormente! o nave"ador interpreta as ima"ens a partir da leitura da ta"
O<img />O. +ssa ta" tem vrios atributos e trataremos de al"uns deles a se"uir. Namos supor
que voc queira inserir uma ima"em que est no mesmo camin,o do seu documento.
<img srcCDimagem.6pgD />
+ssa ta" deve ser su%iciente para %aBer com que a ima"em apare$a em seu nave"ador.
Noc pode tamb?m querer pe"ar uma ima"em que est na Anternet! usando uma /LL
para encontr-la.
<img
srcCDhttpA//upload.:iHimedia.org/:iHipedia/commons/thumb/I/I%/0lagGofGBra)il.s(g
/&Ipx*0lagGofGBra)il.s(g.pngD />
Kessa maneira! voc estar usando uma ima"em encontrada na Anternet! por eEemplo.
D uso de camin,o absoluto no computador local G %oi descrito anteriormente e serve da
mesma maneira para inserir uma ima"em isolada no documento <eb.
D atributo OaltO serve para dar um nome alternativo @s ima"ens nas <ebpa"es.
<img
srcCDhttpA//upload.:iHimedia.org/:iHipedia/commons/thumb/I/I%/0lagGofGBra)il.s(g
/&Ipx*0lagGofGBra)il.s(g.pngD altCDbandeira do brasilD />
Ao para com o mouse em cima da ima"em! voc poder notar que o teEto mostrado
ser o que voc colocou em OaltO. +sse recurso tamb?m %acilita muito a nave"a$.o para uma
pessoa que estiver usando nave"a$.o em modo teEto! uma veB que o nome da ima"em que
aparecer na tela ser o que estiver no valor do atributo OaltO. D uso desse atributo ?
considerado uma boa prtica e deve ser %eito sempre que possCvel.
As ima"ens tamb?m podem ser usadas como plano de %undo para dar uma aparncia
mais so%isticada @ sua p"ina.
<body bacHgroundCDimagemGdeGfundo.6pgD>
0esse eEemplo em especC%ico! n.o utiliBamos a ta" X<img />O pois o nave"ador G
entender que ao usar o atributo ObacHgroundO da ta" O<body>O c,amaremos uma ima"em para
ser utiliBada como plano de %undo.
Dutro recurso que provavelmente ser muito utiliBado ? o alin,amento das ima"ens
com rela$.o ao teEto. Noc pode basicamente coloc-la acima! no meio ou abaiEo do teEto.
9e"uem al"uns eEemplos
<p>
,ma imagem
<img srcCDimagem.gifD alignCDbottomD />
no texto
</p>
<p>
,ma imagem
<img srcCDimagem.gifD alignCDmiddleD />
no texto
</p>
<p>
,ma imagem
<img srcCDimagem.gifD alignCDtopD />
no texto
</p>
<p>
,ma imagem
<img srcCDimagem.gifD />
no meio do texto
</p>
<p>
<img srcCDimagem.gifD />
,ma imagem antes do texto
</p>
<p>
,ma imagem depois do texto
<img srcCDimagem.gifD />
</p>
As lin,as acima mostram diversas maneiras de se dia"ramar a ima"em Guntamente com
o teEto. Dutra maneira de colocar as ima"ens na direita ou esquerda do seu teEto pode ser da
se"uinte %orma3
<p>
<img src CDimagem.gifD align CDleftD>
,m par&aacute;grafo com uma imagem. 3 atributo &apos;align&apos;
est&aacute; configurado para &apos;left&apos; -esuerda.. ' imagem ficar&aacute;
&agra(e; esuerda do texto;
</p>
<p>
<img src CDimagem.gifD align CDrightD>
,m par&aacute;grafo com uma imagem. 3 atributo &apos;align&apos;
est&aacute; configurado para &apos;right&apos; -direita.. ' imagem ficar&aacute;
&agra(e; direita do texto;
</p>
3utros atributos ue ser5o usados com bastante freN4ncia s5o os
respons2(eis por redimensionar as imagens. Ooc4 precisar2 de dois deles, um para
altura -height. e outro para largura -:idth.. Oe6a abaixo como utili)2*los.
<p>
<img srcCDimagem.gifD
:idthCD"ID heightCD"ID>
</p>
<p>
<img srcCDimagem.gifD
:idthCD$%D heightCD$%D>
</p>
<p>
<img srcCDimagem.gifD
:idthCDPID heightCDPID>
</p>
Mudar o valor dos atributos aumenta ou diminui a ima"em con%orme o que %or indicado.
Listas
02s temos trs tipos de listas em HTML! listas ordenadas! listas n.o ordenadas e listas
de de%ini$#es. /ma lista n.o ordenada simplesmente coloca um marcador antes de cada um de
seus elementos enquanto a lista ordenada numera-os. Al?m delas temos a lista de de%ini$#es!
que se di%ere por n.o ser uma lista de itens. +la ? uma lista de termos e de%ini$#es. Namos
mostrar al"uns eEemplos para que voc veGa mel,or. -rie um novo arquivo de teEto como
nome Olistas.,tmlO.
<html>
<head>
<title>'lguns exemplos de listas</title>
</head>
<body>
<p>Oe6amos abaixo algumas listas e suas diferentes
caracter&iacute;sticas.</p>
<br />
<p>8rimeiramente, uma lista n&atilde;o ordenada.</p>
<h$>0rutas</h$>
<ul>
<li>;a&ccedil;&atilde;</li>
<li>;orango</li>
<li>Karan6a</li>
<li>Kim&atilde;o</li>
<li>'bacaxi</li>
</ul>
<br />
<p>Oe6a agora uma lista ordenada.</p>
<h$>Jesultados finais do campeonato de 0&oacute;rmula ! de !QQ!.</h$>
<ol>
<li>>enna</li>
<li>;ansell</li>
<li>8atrese</li>
<li>Berger</li>
<li>8rost</li>
<li>8iuet</li>
</ol>
<br />
<p>Oamos definir algumas coisas abaixo.</p>
<h$>Bebidas</h$>
<dl>
<dt><af&eacute;</dt>
<dd>Bebida uente e preta</dd>
<dt><h&aacute;</dt>
<dd>Tem de (&aacute;rias cores e pode ser ser(ido tanto uente como
gelado</dd>
<dt>&'acute;gua</dt>
<dd>>em cor, e com certe)a gelada/ ;.</dd>
</dl>
</body>
</html>
D eEemplo ? auto-eEplicativo com rela$.o aos tipos de listas empre"ados! mas al"uns
detal,es ser.o deiEados para voc praticar. As listas possuem atributos tamb?m. Al"uns deles
ser.o eEplicados aqui.
+m essncia! voc usa ta"s O<ul>O ou O<ol>O para iniciar suas listas =n.o ordenada e
ordenada>! e O<li>O para cada um dos itens listados. As ta"s devem sempre ser acompan,adas
de %ec,amento. 0o caso da lista de de%ini$.o voc tem uma pequena altera$.o. Al?m da sua
ta"! que ? O<dl>O cada um dos elementos dela devem ter duas ta"s di%erentes! a O<dt>O para o
item em si e O<dd>O para a de%ini$.o do mesmo.
1ara mudar um pouco suas listas ordenadas! tente coisas como3
<ol typeCD'D>
Asso %ar que ao inv?s de nmeros! a lista seGa ordenada com letras do al%abeto
maisculas.
'. ;aF5
B. ;orango
<. Karan6a
=. Kim5o
E. 'bacaxi
/sar
<ol typeCDaD>
%ar a mesma coisa! s2 que desta veB com letras minsculas.
I ainda possCvel usar al"arismos romanos para a numera$.o. 1ara isso! %a$a o se"uinte.
<ol typeCDRD>
D resultado ser
R. ;aF5
RR. ;orango
RRR. Karan6a
RO. Kim5o
O. 'bacaxi
Quer al"arismos romanos minsculosT
<ol typeCDiD>
1rontin,o Y>
1ara mudar o tipo de marcadores usados nas listas n.o ordenadas! use3
<ul typeCDdiscD>
<ul typeCDcircleD>
<ul typeCDsuareD>
D primeiro valor do atributo t5pe %ar com que os marcadores seGam discos
preenc,idos! o se"undo discos vaBios no meio =cCrculos> e o ltimo mostrar quadrados. I bem
simples! tente todos eles.
Dutra id?ia interessante de listas ? que ? possCvel anin,ar vrias delas. 0o seu arquivo
Olistas.,tmlO! adicione o se"uinte c2di"o.
<p>,ma lista aninhada para complicar um pouco</p>
<h$>Bebidas e alguns de seus tipos</h$>
<ul typeCDcircleD>
<li><af&eacute;</li>
<ul typeCDsuareD>
<li>com leite</li>
<li>preto</li>
<li>frapp&eacute;</li>
</ul>
<li><h&aacute;</li>
<ul typeCDsuareD>
<li>mate</li>
<li>er(a doce</li>
<li>camomila</li>
</ul>
<li>&'acute;gua</li>
<ul typeCDsuareD>
<li>com g&aacute;s</li>
<li>sem g&aacute;s</li>
</ul>
</ul>
A"ora voc tem uma lista anin,ada dentro do seu documento e pode ver como ela
%unciona. I possCvel anin,ar vrios nCveis! o que pode ser til dependendo do tipo de lista que
voc pretende criar. Asso pode ser usado! por eEemplo! para de%inir a rvore "eneal2"ica de
uma %amClia! embora provavelmente isso te dar muito trabal,oZ /se sua ima"ina$.o.
Tabelas
As tabelas s.o em HTML eEatamente o que s.o em qualquer outro lu"ar. +las servem
para or"aniBar os dados de uma maneira que %ique mais %cil para as pessoas entenderem ou
tornar mais rpida a comunica$.o em determinadas ocasi#es.
Namos diretamente ao uso dessas tabelas para depois entrarmos em detal,es. -rie um
arquivo c,amado Otabelas.,tmlO e coloque o se"uinte c2di"o.
<html>
<head>
<title>,ma p&aacute;gina com tabelas</title>
</head>
<body>
<table borderCD!D>
<tr>
<th>8arte do computador</th>
<th>3 ue ela fa)</th>
</tr>
<tr>
<td>Teclado</td>
<td>3nde (oc&ecirc; digita</td>
</tr>
<tr>
<td>;ouse</td>
<td>3nde (oc&ecirc; mexe a seta</td>
</tr>
</table>
</body>
</html>
Noc vai criar uma tabela com a ta" O<table>O. A partir daC! voc deve de%inir as lin,as
com a ta" O<tr>O e as colunas com O<td>O. -ada um dos valores colocados entre as ta"s O<td>O ?
considerado estar dentro de uma c?lula. A ta" O<th>O ? usada para o cabe$al,o da tabela! um
teEto destacado para eEplicar um pouco sobre a coluna em quest.o. D atributo OborderO da ta"
O<table>O determina a lar"ura da borda da tabela! eEperimente usar um valor di%erente para
ver o resultado.
A"ora insira dentro da tabela! depois dos outros itens as se"uintes lin,as3
<tr>
<td>'desi(o no monitor</td>
<td></td> </** n&atilde;o fa) nada A.**>
</tr>
Lecarre"ue o arquivo e voc notar que a c?lula onde n.o , nada tamb?m %icar sem
borda! o que pode dar uma aparncia desa"radvel para o usurio! solucione o problema
colocando o caracter especial O&nbspJO nela.
<tr>
<td>'desi(o no monitor</td>
<td>&nbsp;</td> </** n&atilde;o fa) nada A.**>
</tr>
+le %aB com que serGa inserido um caracter em branco =non-breaHin" space>! di%erente
de se colocar um espa$o normal l! que o nave"ador deiEa de interpretar. Kessa %orma! voc
en"ana a tabela como se tivesse realmente al"o escrito l! que de %ato ,! mas o usurio n.o
ver isso.
I possCvel tamb?m %aBer tabelas sem bordas! dependendo do seu obGetivo3
<h$>' mesma tabela, sem bordas e com legenda</h$>
<table borderCDID>
<caption alignCDtopD><i>;inha legenda</i></caption>
<caption alignCDbottomD><i>;inha outra legenda, abaixo da
tabela</i></caption>
<tr>
<th>8arte do computador</th>
<th>3 ue ela fa)</th>
</tr>
<tr>
<td>Teclado</td>
<td>3nde (oc&ecirc; digita</td>
</tr>
<tr>
<td>;ouse</td>
<td>3nde (oc&ecirc; mexe a seta</td>
</tr>
<tr>
<td>'desi(o no monitor</td>
<td>&nbsp;</td> </** n&atilde;o fa) nada A.**>
</table>
Al?m da borda de taman,o Bero =ou sem borda! se pre%erir>! temos mais duas ta"s que
at? ent.o n.o ,avCamos apresentado! uma delas se re%ere @ tabela e a outra n.o. A ta"
O<caption>O serve para se colocar uma le"enda na tabela e pode carre"ar o atributo OalignO!
que determinar se ela aparecer em cima ou em baiEo. A outra ta"! O<i>O! pode ser usada em
qualquer lu"ar do teEto e serve para deiEar o teEto que est entre seu inCcio e %ec,amento em
itlico! assim como a ta" O<b>O %aB ao passar para ne"rito.
A"ora mostraremos al"uns eEemplos onde queremos que um determinado campo
ocupe mais de uma c?lula.
<h$>Telefone de algumas pessoas ue acabei de in(entar</h$>
<table borderCD!D>
<tr>
<th>+ome</th>
<th colspanCD"D>Telefone</th>
</tr>
<tr>
<td>@o&atilde;o 0rango</td>
<td>## "%$S #%$Q</td>
<td>## "%$$ #%PS</td>
</tr>
<tr>
<td>Oalpano</td>
<td>$$ "%PS #"%S</td>
<td>$$ "%&& %PQQ</td>
</tr>
</table>
<br />
<h$>Telefone das mesmas pessoas ue acabei de in(entar, formatando
diferente</h$>
<table borderCD!D>
<tr>
<th>+ome</th>
<td>@o&atilde;o 0rango</td>
<td>Oalpano</td>
</tr>
<tr>
<th ro:spanCD"D>Telefone</th>
<td>## "%$S #%$Q</td>
<td>## "%$$ #%PS</td>
</tr>
<tr>
<td>$$ "%PS #"%S</td>
<td>$$ "%&& %PQQ</td>
</tr>
</table>
D eEemplo acima! al?m da utilidade proposta! mostra mais uma coisa3 os cabe$al,os
n.o precisam necessariamente ser o primeiro elemento da coluna. 0a se"unda tabela
percebemos que ele est na verdade re%erindo-se @ lin,a onde ele est. Noltando ao tema!
usamos os atributos OcolspanO e Oro:spanO para estendermos uma c?lula! ambos est.o
disponCveis tanto para O<th>O quanto para O<td>O. D valor do atributo determinar quantas
c?lulas o campo ocupar! OcolspanO para colunas e Oro<spanO para lin,as.
Nale notar que ? possCvel alin,as tabelas e colocar quaisquer outras ta"s dentro das
c?lulas. I possCvel! por eEemplo! %aBer uma lista dentro de uma c?lula de uma tabela! inclusive
anin,-las. 92 tome cuidado para n.o %aBer al"o t.o complicado que voc possa se perder ao
desenvolver.
Dutra possibilidade ao trabal,ar com tabelas ? alterar a distFncia entre o teEto e as
bordas da tabela. +sse parFmetro ? controlado pelo atributo OcellpaddingO e pode ser
observado no eEemplo a se"uir.
<h$>Tabela sem espa&ccedil;amento entre texto e bordas</h$>
<table borderCD!D cellpaddingCDID>
<tr>
<td>!</td>
<td>"</td>
</tr>
<tr>
<td>#</td>
<td>$</td>
</tr>
</table>
<br />
<h$>Tabela com espa&ccedil;amento entre texto e bordas</h$>
<table borderCD!D cellpaddingCD!%D>
<tr>
<td>!</td>
<td>"</td>
</tr>
<tr>
<td>#</td>
<td>$</td>
</tr>
</table>
Al?m de espa$amento entre teEto e bordas tamb?m podemos deiEar uma distFncia
entre uma c?lula e outra com o atributo OcellspacingO! con%ira nesse outro eEemplo.
<h$>Tabela sem espa&ccedil;amento entre c&eacute;lulas</h$>
<table borderCD!D cellspacingCDID bgcolorCDyello:D>
<tr>
<td>!</td>
<td>"</td>
</tr>
<tr>
<td>#</td>
<td>$</td>
</tr>
</table>
<br />
<h$>Tabela com espa&ccedil;amento entre c&eacute;lulas</h$>
<table borderCD!D cellspacingCD!%D>
<tr>
<td bgcolorCDyello:D>amarelo</td>
<td bgcolorCDredD>(ermelho<td>
</tr>
<tr>
<td bgcolorCDgreenD>(erde</td>
<td bgcolorCDblueD>a)ul</td>
</tr>
</table>
Tanto a tabela toda como cada uma das c?lulas tratam do atributo bacH"round! assim
como %iBemos anteriormente com a ta" O<body>O. Kesse modo! ? possCvel alterar a cor desses
elementos! como voc pode observar no eEemplo acima.
Ainda podemos alin,ar o teEto dentro de uma c?lula pelo atributo Oali"nO da mesma
maneira como %iBemos em outros lu"ares! o eEemplo abaiEo ? uma altera$.o daquela nossa
Ma"enda de tele%onesM.
<h$>Telefone das mesmas pessoas ue acabei de in(entar, formatando
diferente</h$>
<table borderCD!D>
<tr>
<th>+ome</th>
<td alignCDcenterD>@o&atilde;o 0rango</td>
<td alignCDcenterD>Oalpano</td>
</tr>
<tr>
<th ro:spanCD"D>Telefone</th>
<td>## "%$S #%$Q</td>
<td>## "%$$ #%PS</td>
</tr>
<tr>
<td>$$ "%PS #"%S</td>
<td>$$ "%&& %PQQ</td>
</tr>
</table>
0ote que o nome das pessoas a"ora est.o centraliBados nas c?lulas.
+Eistem outros atributos que n.o apresentaremos aqui para n.o alon"armos demais
essa parte! com o contedo apresentando at? aqui G ? possCvel construir tabelas bem
completas.
Frames
-om %rames voc pode inserir mais de um documento dentro da mesma tela do
nave"ador. Noc pode %aBer %rames ,oriBontais ou verticais! que determinar.o a maneira como
os documentos ser.o eEibidos. -ada documento HTML ser c,amado %rame e cada %rame ?
independente do outro.
+mbora isso aGude bastante a or"aniBar o contedo das p"inas! al"umas desvanta"ens
s.o notveis! como a maior necessidade de aten$.o do desenvolvedor para manter os
documentos HTML e a di%iculdade para a impress.o de uma p"ina inteira.
Vasicamente! o %rame %aB com que o documento se divida todo e em cada uma dessas
partes voc possa criar uma p"ina independente e di%erente de todas as outras que voc est
utiliBando. Ama"ine uma bandeGa de re%eit2rio toda dividida onde em cada lu"ar seGa possCvel
colocar um alimento di%erente sem que ele se misture com o outro.
1ara colocar %rames eu suas p"inas! primeiramente voc tem que utiliBar a ta"
O<frameset>O que ? o conGunto de %rames que ser.o usados. +ssa ta" trar de%ini$#es bsicas!
como se os %rames estar.o divididos em lin,as ou colunas e o taman,o das mesmas. NeGa
abaiEo um eEemplo de utiliBa$.o.
<frameset colsCD#IT, PITD>
<frame srcCDumaGpagina.htmlD />
<frame srcCDoutraGpagina.htmlD />
</frameset>
+sse eEemplo mostra a divis.o dos %rames com porcenta"em de taman,o a ser
ocupado na tela. +Eiste uma outra maneira de %aBer isso! que ? com o nmero de piEels que
cada um utiliBar.
<frameset colsCD"II, #IID />
Du ainda voc pode querer um %rame use o espa$o restante! como no eEemplo abaiEo3
<frameset colsCD"IT, "IT, UD />
/se os c2di"os abaiEo para ter uma id?ia do %uncionamento dos %rames.
frames.html
<html>
<head>
<title>Oamos usar uns frames</title>
</head>
<frameset colsCD"IT, SITD>
<frame srcCDumaGpagina.htmlD />
<frame srcCDoutraGpagina.htmlD />
</frameset>
<body>
<noframes>3 seu na(egador n&atilde;o suporta frames/</noframes>
</body>
</html>
umaGpagina.html
<html>
<head>
<title>Essa &eacute; uma p&aacute;gina</title>
</head>
<body>
,ma p&aacute;gina ualuer/ C.
</body>
</html>
outraGpagina.html
<html>
<head>
<title>Essa &eacute; outra p&aacute;gina</title>
</head>
<frameset ro:sCD!II, U, "IID>
<frame srcCDoi.htmlD />
<frame srcCDtudoGbem.htmlD />
<frame srcCDtchau.htmlD />
</frameset>
<body>
<noframes>3 seu na(egador n&atilde;o suporta frames/</noframes>
</body>
</html>
oi.html
<html>
<frameset colsCD#IT, #IT, UD>
<frame srcCDoi!.htmlD />
<frame srcCDoi".htmlD />
<frame srcCDoi#.htmlD />
</frameset>
<body>
<noframes>3 seu na(egador n&atilde;o suporta frames/</noframes>
</body>
</html>
oi!.html
<html>
<body bgcolorCDredD>
<i>oi um</i>
</body>
</html>
oi".html
<html>
<body bgcolorCDturuoiseD>
<i>oi dois</i>
</body>
</html>
oi#.html
<html>
<body bgcolorCDcyanD>
<i>oi tr&ecirc;s</i>
</body>
</html>
tudoGbem.html
<html>
<big>Tudo bemV</big>
</html>
tchau.html
<html>
<strong>T<W',/ C=</strong>
</html>
-omo vrios documentos %oram usados! or"aniBe-os de maneira a conse"uir um
resultado parecido com a ima"em acima. Al?m dos %rames tivemos al"umas outras ta"s de
%ormata$.o. O<strong>O %aB basicamente o mesmo que a ta" O<b>O! isto ?! deiEa o teEto em
ne"rito! mas ? na verdade um teEto %orte com n%ase. O<big>O deiEa o teEto em taman,o maior
na tela. Dutro detal,e a ser observado ? que no caso dos %rames que s.o compostos pelos
documentos oiS! oi( e oi;.,tml! cada um tem uma cor de %undo di%erente. Asso %oi usado
apenas para mostrar que cada um dos %rames ? totalmente independente do outro! n.o
compartil,ando o mesmo plano de %undo.
Apenas para complementar! ? aconsel,vel o uso da ta" O<noframes>O nos documentos
que conten,am %rames. +ssa ta" especi%ica o que dever ser %eito caso o nave"ador n.o seGa
capaB de trabal,ar com %rames.
Forms
/m %orm ? uma rea que cont?m elementos de %ormulrio em um documento HTML.
+sses elementos s.o responsveis por permitir que o usurio entre com in%orma$#es =como
campos de teEto! reas de teEto! menus! etc.> em um %ormulrio. 9.o de%inidos pela ta"
O<form>O.
Ds %ormulrios s.o constantes nas p"inas encontradas na internet e basicamente todo
cliente de <ebmail tem elementos de %ormulrio! mais precisamente campo de teEto e campo
de sen,a para poder %aBer a entrada de seu lo"in e sen,a. Mesmo que voc n.o se lembre
deles a"ora! provavelmente ver que eles s.o %amiliares depois de al"uns eEemplos.
Faremos nosso primeiro eEercCcio eEatamente em cima destes dois eEemplos.
Ds %ormulrios s.o constantes nas p"inas encontradas na internet e basicamente todo
cliente de <ebmail tem elementos de %ormulrio! mais precisamente campo de teEto e campo
de sen,a para poder %aBer a entrada de seu lo"in e sen,a. Mesmo que voc n.o se lembre
deles a"ora! provavelmente ver que eles s.o %amiliares depois de al"uns eEemplos.
Faremos nosso primeiro eEercCcio eEatamente em cima destes dois eEemplos3
<html>
<head>
<title>Estamos uase acabando, paci&ecirc;ncia com os forms</title>
</head>
<body>
<p>Oe6a se isto te lembra algo em clientes de e*mail</p>
<form>
KoginA<input typeCDtextD nameCDloginD /><br />
>enhaA<input typeCDpass:ordD nameCDpass:ordD />
</form>
</body>
</html>
Lo"o acima podemos ver al"umas coisas a respeito dos %orms. /ma delas ? que eles
n.o tm muita serventia se n.o tivermos outros elementos dentro deles! os O<input>O =Lembre-
se de %ec,ar a ta" com um O4O no %inal dela. -omo G disse! todas as ta"s devem ser %ec,adasZ>.
9.o eles os responsveis por mostrar no nave"ador os campos que ser.o responsveis por
possibilitar a entrada de al"um tipo de in%orma$.o por parte do usurio. D atributo OtypeO
determina o tipo do elemento! veGa abaiEo al"uns deles3
text3 /sado quando voc quer inserir caracteres! nmeros e a%ins no %ormulrio.
pass:ord3 Vem parecido com o OtextO mas sua entrada de dados n.o aparecer
eEplicitamente para o usurio. /sada principalmente! como o pr2prio nome su"ere! para a
entrada de sen,as.
radio3 9.o os radio buttons! ou bot#es de op$.o. +las permitem que o usurio seGa
capaB de escol,er um elemento entre um nmero limitados deles.
checHbox3 As c,ecH boEes! ou caiEas de sele$.o! tm uma %inalidade parecida com a
dos bot#es! com a di%eren$a de permitir que seGam selecionados mais de um elementos.
submit3 D bot.o submit serve para enviar os dados.
reset3 D bot.o reset serve para apa"ar todas as entradas do %ormulrio.
/ma outra ta" que ? bem comum nas p"inas ? a O<select>O que "eralmente tamb?m
est.o dentro de %ormulrios. +l ter sub-elementos que ser.o as ta"s O<option>O que ser.o
valores que popular.o o menu drop-do<n. D eEemplo abaiEo clari%ica o seu uso
<select nameCDser(icoD>
<option (alueCDemailD>E*mail</option>
<option (alueCDagendaD>'genda</option>
<option (alueCDnoticiasD>+ot&iacute;cias</option>
<option (alueCD6ogosD>@ogos</option>
</select>
1odemos usar os bot#es de op$.o para %aBer al"o semel,ante ao select
<input typeCDradioD nameCDser(icoGbotaoD (alueCDemailD /> E*mail<br />
<input typeCDradioD nameCDser(icoGbotaoD (alueCDagendaD /> 'genda<br />
<input typeCDradioD nameCDser(icoGbotaoD (alueCDnoticiasD />
+ot&iacute;cias<br />
<input typeCDradioD nameCDser(icoGbotaoD (alueCD6ogosD /> @ogos<br />
Ds bot#es de op$.o precisam basicamente de dois atributos para %uncionar
corretamente. /m deles ? o OnameO! que diB o "rupo ao qual ele pertence. Ds bot#es devem
estar a"rupados para quando os dados %orem recuperados na p"ina que receber o
%ormulrios! as a$#es corretas seGam tomadas. D atributo O(alueO ? o valor do bot.o em si!
dentro do "rupo e sabendo qual o nome da op$.o! ? possCvel tratar de maneira precisa o que
dever ocorrer com os dados do %ormulrio.
D mesmo conceito de "rupos e valores individuais tamb?m se aplica @s caiEas de
sele$.o. Ka mesma maneira elas devem ser a"rupadas e depois receber um valor especC%ico
para cada uma delas. D eEemplo abaiEo mostra isso.
E*mailA <input typeCDchecHboxD nameCDser(icoGcbD (alueCDemailD /><br />
'gendaA <input typeCDchecHboxD nameCDser(icoGcbD (alueCDagendaD /><br />
+ot&iacute;ciasA <input typeCDchecHboxD nameCDser(icoGcbD (alueCDnoticiasD
/><br />
@ogosA <input typeCDchecHboxD nameCDser(icoGcbD (alueCD6ogosD /><br />
-omo voc pode perceber! elas possuem i"ualmente os campos OnameO e O(alueO que
%uncionam da mesma maneira.
I possCvel colocar al"uns bot#es tamb?m! eles podem ter vrias utilidades! mas usando
apenas HTML ? pouco provvel que voc encontre al"uma utilidade prtica para eles. Ke
qualquer maneira! veGa abaiEo como utiliB-los3
<input typeCDbuttonD (alueCD3i, eu sou um bot&atilde;oD>
0.o , muito mist?rio quanto @ sua sintaEe! o tipo deve ser ObuttonO e o atributo O(alueO
dir o que aparecer no teEto do bot.o.
Namos a"ora tratar o caso de dois bot#es bem comuns em %ormulrios! OsubmitO e
OresetO. -ada um deles ? um tipo especial de elemento usados! respectivamente! para enviar o
%ormulrio e apa"ar tudo que %oi entrado no mesmo. 1ara us-los! o tipo =type> da ta"
O<input>O deve ser OsubmitO ou OresetO. Al?m disso! voc pode dar um outro nome para o
bot.o! alterando o valor do atributo OvalueO.
<input typeCDsubmitD (alueCDEn(iarD />
<input typeCDresetD (alueCD'pagarD />
As lin,as acima mostram o eEemplo de um bot.o OsubmitO e um OresetO! os dois est.o
com seus O(alueOs alterados para poder eEibir nomes em portu"us. -oloque-os em um
documento de eEemplo! Gunto com mais campos de %ormulrio e clique em ambos para
entender o %uncionamento deles. D bot.o reset tem uma caracterCstica mais eEplCcita! voc
ver os campos que G estavam preenc,idos serem todos esvaBiados! e ? eEatamente isso que
ele deve %aBer. 0o caso do OsubmitO os dados tamb?m ser.o apa"ados! mas al"o mais
acontece. NeGa na barra de endere$os do nave"ador que o /LL ser alterado de acordo com os
dados que voc tiver inserido. I eEatamente dessa maneira que as p"inas se comunicam.
I verdade que n.o %aB muito sentido esse eEercCcio! G que os dados inseridos n.o s.o
utiliBados para nada. D tratamento dessas in%orma$#es ? %eita! de maneira mais bsica! pelo
-'A mas podem tamb?m ser usadas diversas lin"ua"ens de pro"rama$.o para os mais
variados %ins. Asso! por?m! %o"e do escopo do presente material e portanto n.o ser eEplicado.
+ntretanto! %ica aqui mais um instru$.o re%erente @ %ormulrios! eles podem ser usados para
redirecionar @ al"uma outra p"ina com as in%orma$#es que %oram %ornecidas. Asso ? %eito
atrav?s do atributo OactionO da ta" O<form>O.
<form nameCDentradaD actionCDpaginaGredirecionada.htmlD>
+sse atributo est intimamente li"ado ao bot.o OsubmitO! uma veB que esse endere$o
ser acessado ao clicar nele. Lesumindo! voc coloca em um %ormulrio a a$.o que dever ser
desempen,ada ao se clicar no bot.o OsubmitO. D documento receber as in%orma$#es que
estavam contidas no %ormulrio e poder.o! conseq[entemente! ser tratadas para al"um %im
especC%ico. Fa$a o teste preenc,endo um %ormulrio e em se"uida clicando no bot.o OsubmitO
que redirecione para uma p"ina local vlida! voc poder ver que no %inal do /LL ,aver.o os
dados que estavam no %ormulrio da p"ina anterior.
Consideraes Finais
Vom! com isso concluCmos a apostila. +spero que seGa til como aprendiBado e como
re%erncia rpida. Al"uns t2picos interessantes para apro%undar o que %oi mostrado aqui s.o3
Java9cript3 lin"ua"em de pro"rama$.o eEtremamente til para lidar dinamicamente
com os contedos.
-'A3 /m protocolo usado para tratar requisi$#es do cliente <eb e retornar contedo.
WML3 /ma outra lin"ua"em de %ormata$.o! pode ser usada para vrios prop2sitos
-993 Lin"ua"em para descrever a apresenta$.o de um documento HTML =entre outros>.
Lesponsvel por muitos dos la5outs presentes nas p"inas.
PdivQ3 Ta"s de HTML que n.o %oram abordadas aqui. +m conGunto com -99! comp#em
uma "rande parte das p"inas atuais da internet.
1or %im! %ique com uma lista de ta"s e c2di"os para caracteres especiais.
Lista de caracteres especiais
&lt; < &gt; >
&amp; & &uot; D
&'acute; X &'gra(e; Y
&Eacute; Z &Egra(e; [
&Racute; \ &Rgra(e; ]
&3acute; ^ &3gra(e; _
&,acute; ` &,gra(e; a
&aacute; 2 &agra(e; b
&eacute; 1 &egra(e; c
&iacute; d &igra(e; e
&oacute; 7 &ogra(e; f
&uacute; g &ugra(e; h
&'uml; i &'circ; j
&Euml; k &Ecirc; l
&Ruml; m &Rcirc; n
&3uml; o &3circ; p
&,uml; q &,circ; r
&auml; s &acirc; t
&euml; u &ecirc; 4
&iuml; v &icirc; w
&ouml; x &ocirc; y
&uuml; N &ucirc; z
&'tilde; { &aring; |
&+tilde; } &'ring; ~
&3tilde; &<cedil;
&atilde; 5 &ccedil; F
&ntilde; &acute;
&otilde; &yacute;
&3slash; &yuml;
&oslash; &TW3J+;
&ETW; &thorn;
&eth; &'Elig;
&s)lig; &aelig;
&frac!$; &nbsp;
&frac!"; &iexcl;
&frac#$; &pound;
&copy; &yen;
&reg; &sect;
&ordf; &curren;
&sup"; &br(bar;
&sup#; &lauo;
&sup!; &not;
&macr; &shy;
&micro; &ordm;
&para; &acute;
&middot; &uml;
&deg; &plusmn;
&cedil; &rauo;
&iuest;
&times; - &cent;
&di(ide; &euro;
&!$P; &!%#;
&!$S; &!#P;
&!$I; &!#!;
&!#%; &!#$;
Lista de tags
tag descriF5o
</**...**> define um coment2rio
</=3<T8E> define o tipo do documento
<a> define uma tncora
<abbr> define uma abre(iaF5o
<acronym> define um acrynimo
<address> define um elemento de endereFo
<area> define uma 2rea dentro de um mapa de imagem
<b> define texto em negrito
<base> define o ,JK base para todos os linHs da p2gina
<bdo> define a direF5o em ue o texto ser2 mostrado
<big> define texto grande
<blocHuote> define uma longa citaF5o
<body> define o elemento de corpo
<br> insere uma uebra de linha
<button> define um bot5o
<caption> define a legenda de uma tabela
<cite> define uma citaF5o
<code> define um texto de c7digo de computador
<col> define atributos para as colunas de tabela
<colgroup> define um grupo de colunas de tabela
<dd> define a descriF5o de uma definiF5o
<del> define texto apagado
<di(> define uma seF5o no documento
<dfn> define uma definiF5o de termo
<dl> define uma lista de definiFes
<dt> define um termo de definiF5o
<em> define um texto enfati)ado
<fieldset> define um arran6o de campos
<form> define um formul2rio
<frame> define uma sub*6anela -frame ou uadro.
<frameset> define um arran6o de frames
<h!> to <h&> define cabeFalhos ! a &
<head> define informaFes sobre o documento
<hr> define uma linha hori)ontal
<html> define um documento WT;K
<i> define um texto em it2lico
<iframe> define um frame em linha
<img> define uma imagem
<input> define um campo de entrada
<ins> define um texto inserido
<Hbd> define um texto de teclado
<label> define um r7tulo para controle de formul2rio
<legend> define o tdtulo de um arran6o de campos
<li> define um item de lista
<linH> define uma refer4ncia de recurso
<map> define um mapa de imagem
<meta> define meta*informaF5o
<noframes> define uma seF5o sem frames
<noscript> define uma seF5o sem scripts
<ob6ect> define um ob6eto embarcado
<ol> define uma lista ordenada
<optgroup> define um grupo de opFes
<option> define uma opF5o em uma lista drop*do:n
<p> define um par2grafo
<param> define um partmetro para um ob6eto
<pre> define texto pr1*formatado -respeita espaFos e
par2grafos.
<> define uma citaF5o curta
<samp> define um exemplo de c7digo de computador
<script> define um script
<select> define texto selecion2(el
<small> define um texto peueno
<span> define uma seF5o em um documento
<strong> define texto destacado
<style> define uma definiF5o de estilo
<sub> define texto subscrito
<sup> define texto sobrescrito
<table> define uma tabela
<tbody> define o corpo de uma tabela
<td> define uma c1lula de uma tabela
<textarea> define uma 2rea de texto
<tfoot> define o rodap1 de uma tabela
<th> define o cabeFalho de uma tabela
<thead> define o cabeFalho de uma tabela
<title> define o tdtulo de um documento
<tr> define uma linha de tabela
<tt> define texto monoespaFado
<ul> define uma lista n5o ordenada
<(ar> define uma (ari2(el