Anda di halaman 1dari 19

HTML

U N I R I T T E R



1 1 / 0 3 / 2 0 1 3
Luan Freitas
[Digite o resumo do documento aqui. Em
geral, um resumo um apanhado geral do
contedo do documento. Digite o resumo do
documento aqui. Em geral, um resumo um
apanhado geral do contedo do documento.]

PRIMEIROS PASSOS 2
TAGS, ATRIBUTOS E ELEMENTOS. 3
TTULOS DA PGINA 4
Pargrafos 5
Ttulos 7
Links 8
Listas 9
Imagens 11
Tabelas 12
Formas 13


Primeiros passos
A mai or i a das coi sas na web no di f er ent e do que o mater i al emseu
computador - apenas ummonte de ar qui vos or denados emtoda uma car ga de
di r etr i os.
HTML arqui vos so nada mai s do que ar qui vos de texto si mpl es, de modo a
comear a escr ever emHTML, voc pr eci sa de nada mai s do que umedi tor de
texto si mpl es.
Bl oco de notas umedi tor de t exto comum(no Wi ndows i sso nor mal mente
encontr ado sob os Pr ogr amas>Acessr i os do menu).
Di gi te i sso no seu edi tor de texto:

Esta a minha primeira pgina web
Agor a, cr i e uma pasta chamada 'html ' na sua uni dade C (ou emqual quer
outr o l ugar que voc gosta) e sal ve o ar qui vo como "myf i r stpage.html ".
i mpor tante que a extenso especi f i cado "html ." - Al guns edi tor es de texto,
como o bl oco de notas, automati camente sal v-l o de outr a f or ma "txt"..
Ol har par a ar qui vos HTML, no pr eci sa nemser na web. Abr a umnavegador da
web, como o Fi refox ou o Internet Expl orer e na bar r a de ender eos, onde voc
costuma di gi tar ender eos da web, di gi te o l ocal do ar qui vo que voc acabou de
sal var (por exempl o, "c: \ html \ myf i r stpage.html ") e bateu
vol tar . Al ter nati vamente, v par a o menu Ar qui vo do navegador , sel eci one Abr i r
e pr ocur e o ar qui vo.
Pow. No . Sua pr i mei r a pgi na web. Como emoci onante. E bastaramal gumas
pal avr as di gi tadas.
J di ssemos aqui par a uti l i zar uma base de edi tor de texto, como o Notepad,
mas voc pode ser t entado a usar umpr ogr ama de sof twar e dedi cado, como
o Macromedi a Dreamweaver ou Mi crosoft FrontPage.
Voc deve ter mui to cui dado ao usar esses pr ogr amas, especi al mente se voc
umi ni ci ante, por que mui tas vezes j ogar emcdi go desnecessr i o ou no padr o
par a "ajudar " voc.
Se voc sr i o sobr e apr ender HTML, voc deve l er atr avs de umtutor i al como
este pr i mei r o, de modo que voc tenha pel o menos umconheci mento bsi co do
que est acontecendo.
Pr ogr amas como estes nunca l he dar o mesmo contr ol e sobr e uma pgi na web
como codi f i cao mo.




Tags, atributos e elementos.
Embor a os concei tos bsi cos de HTML sej amde t exto si mpl es, pr eci samos de um
pouco mai s par a tor n-l o umdocumento HTML vl i do.

Etiquetas
A estr utur a bsi ca de umdocumento HTML i ncl ui eti quetas, que ci r cundamo
contedo e apl i car si gni f i cado a el e.
Mude o seu documento par a que el e se par ece comi sso:

<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< HTML >
< corpo >
Est a a mi nha pr i mei r a pgi na web
</ corpo >
</ HTML >
Agor a sal ve o documento novamente, vol tar par a o navegador e sel eci one
"r ef r esh" (que i r r ecar r egar a pgi na).
A apar nci a da pgi na no mudou emnada, mas o pr opsi to de HTML apl i car
si gni f i cado no, apr esentao, e este exempl o j def i ni r amal guns el ementos
f undamentai s de uma pgi na web.
A pr i mei r a l i nha no topo que comea <! DOCTYPE... dei xar que o navegador
soubesse que voc sabe o que di abos voc est f azendo. Voc pode pensar que
voc r eal mente no sabe o que est f azendo ai nda, mas i mpor tante manter
esta dentr o Se voc no f i zer i sso, o navegador i r mudar par a o "qui r ks mode"
e agi r de uma manei r a mui to pecul i ar . No se pr eocupe comi sso ai nda, voc
pode saber mai s sobr e "ti pos de documentos" no Tutor i al Avanado HTML, se voc
r eal mente qui ser . Par a o momento, basta l embr ar a empur r ar esta l i nha no topo
de suas pgi nas web e voc est r i ndo.
Par a vol tar ao ponto, <html > a tag de abertura que comea as coi sas f or a e di z
ao navegador que tudo entr e i sso e o </ html >tag de fechamento umdocumento
HTML. As coi sas entr e <body>e </ body> o contedo pr i nci pal do documento que
i r apar ecer na j anel a do navegador .
Marcas de fechamento
O</ body>e </ html >f echar suas mar cas r especti vas. Todas as tags HTML devem
ser f echadas. Embor a ver ses mai s anti gas do HTML pr egui osamente per mi ti u
que al gumas mar cas no sej amf echados, os mai s r ecentes padr es de exi gi r que
todas as mar cas par a ser f echado. Este umbomhbi to de entr ar de qual quer
manei r a.
Nemtodas as mar cas tmf echamento mar cas como esta (<html ></ html >) al gumas
mar cas, o que no o envol va emtor no do contedo vai f echar -se. A tag de
quebr a de l i nha, por exempl o, f i ca assi m: / ><br . Ns vamos entr ar emtodos estes
exempl os mai s tar de. Tudo o que voc pr eci sa l embr ar que todas as tags devem
ser f echadas ea mai or i a (aquel es comcontedo entr e el es) esto no f or mato de
aber tur a de tag de contedo mar ca de f echamento.

Atributos
As tags tambmpodemter atri butos, que so extr a bi ts de i nf or mao. Atr i butos
apar ecemdentr o da tag de aber tur a e seu val or sempr e entr e aspas. El es
ol hamal go como <tag Mar gar i na attr i bute="val ue"></ tag>. Ns vi r atr avs de
tags comatr i butos mai s tar de.
Elementos
Eti quetas tendema no f azer mui to mai s do que mar car o i n ci o eo f i mde
umel emento. El ementos so os bi ts que compemas pgi nas web. Voc di r i a, por
exempl o, que tudo o que no mei o e i ncl ui a <body>e </ body>tags o el emento
do cor po. Como outr o exempl o, enquanto que <ti tl e>"e" </
ti tl e>'so mar cas, <ti tl e>Rumpl e Sti l tski n </ ti tl e> umt tul o el emento.

Ttulos da pgina
Todos HTML pgi nas devemter uma pgi na t tul o.

Par a adi ci onar umt tul o par a a sua pgi na, al ter ar o seu cdi go par a que
el e se par ecesse comi sso:

<DOCTYPE ht ml PUBLI C " - / / W3C / / DTD XHTML 1. 0 St r i ct / / EN"
"Ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- st r i ct . dt d">

< ht ml >

< cabea >
< ttulo > Minha primeira pgina web </ title >
</ cabea >

< cor po >
Est a a mi nha pr i mei r a pgi na web
</ cor po >

</ ht ml >
Ns adi ci onamos doi s novos el ementos aqui , que comeamcoma cabea tag
eo t tul o tag (e ver como ambos per to).
Oel emento de cabea (que comea coma <head>tag de aber tur a e ter mi na como </
head>tag) apar ece antes do el emento cor po (comeando com<body>e ter mi nando
com</ body>) e contmi nf or maes sobr e a pgi na. As i nf or maes conti das no
el emento pr i nci pal no apar ece na j anel a do navegador .
Ver emos mai s tar de que outr os el ementos podemapar ecer dentr o do el emento
cabea, mas o mai s i mpor tante del es o t tul o do el emento.
Se voc ol har para esse documento no navegador (sal var e atual i zar como
antes), voc vai ver que o "Mi nha pr i mei ra pgi na web" apar ece na bar r a de
t tul o da j anel a (no a r ea da tel a r eal ). Otexto que voc col ocar entr e as
tags de t tul o tor nou-se o t tul o do documento (sur pr esa!). Se voc f osse
adi ci onar esta pgi na aos seus "f avor i tos" (ou "f avor i tos", dependendo do seu
navegador ), voc ver que o t tul o tambm usado l .

Pargrafos
Agor a que voc tema estr utur a bsi ca de umHTML documento, voc pode mexer
como contedo sobr e umpouco.

Vol te par a o seu edi tor de texto e adi ci onar outr a l i nha sua pgi na:

<DOCTYPE ht ml PUBLI C " - / / W3C / / DTD XHTML 1. 0 St r i ct / / EN"
"Ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- st r i ct . dt d">

< ht ml >

< cabea >
< t t ul o > Mi nha pr i mei r a pgi na web </ t i t l e >
</ cabea >

< cor po >
Est a a mi nha pr i mei r a pgi na web
Como emocionante
</ cor po >

</ ht ml >
Ol he par a o documento no seu navegador .
Voc poder i a ter esper ado o documento apar ea como di gi tada, emduas l i nhas,
mas emvez di sso voc deve ver al go como:
Esta a mi nha pri mei ra pgi na web Como emoci onante.
I sto por que os navegador es no costumamter qual quer avi so de que l i nha o
seu cdi go est l i gado. Tambmno pegue qual quer avi so de espaos (que se
obtmo mesmo r esul tado se voc di gi tou "Esta a mi nha pr i mei r a pgi na web
Como emoci onante").
Se voc quer que o texto apar ea eml i nhas di f er entes, voc pr eci sa decl ar ar
expl i ci tamente que.
Mude suas duas l i nhas de contedo, de modo que el es se par ecemcomi sto:

< p > Est a a mi nha pr i mei r a pgi na web </ p >
< p > Como emoci onant e </ p >
Op tag par a pargrafo.
Ol he par a os r esul tados deste. As duas l i nhas apar ecer agora emduas l i nhas.
Pense no contedo HTML como se f osse uml i vr o - comos par gr af os se f or caso
di sso.
nfase
Voc pode enf ati zar texto emumpar gr af o usando l os (nf ase) e f or te (nf ase
f or te). Estas so duas manei r as de f azer pr ati camente a mesma coi sa, embor a,
tr adi ci onal mente, os navegador es exi beml os emi tl i co e f or te emnegr i to.

< p > Si m, i sso < los > </ los > o que eu di sse. Como < forte >
muito </ strong > emoci onant e. </ p >
Quebras de linha
Otag de quebr a de l i nha pode tambmser uti l i zado par a separar as l i nhas
como este:

Esta a mi nha pr i mei r a pgi na web <br />
Como emoci onante
No entanto, este mtodo mai s uti l i zado e no deve ser usado se doi s bl ocos de
texto so desti nados a ser separ ados umdo outr o (por que se i sso que voc
quer f azer , voc pr ovavel mente quer que o p tag).
Obser ve que, como no h contedo envol vi do coma tag de quebr a de l i nha, no
h tag de f echamento e f echa-se comuma "/" aps o "br ".


Ttulos
Op mar ca apenas o i n ci o de f or matao de texto.
Se voc t emdocumentos comgenu nos t tul os, ento exi stemHTML tags de
pr oj etados especi f i camente para el es.
El es so h1 , h2 , h3 , h4, h5e h6, h1 ser o todo-poder oso i mper ador de r ubr i cas
e h6sendo o menor pl ebeu.
Al ter ar o cdi go par a o segui nte:

<DOCTYPE ht ml PUBLI C " - / / W3C / / DTD XHTML 1. 0 St r i ct / / EN"
"Ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- st r i ct . dt d">

< ht ml >

< cabea >
< t t ul o > Mi nha pr i mei r a pgi na web </ t i t l e >
</ cabea >

< cor po >
< h 1> Minha primeira pgina web </ h 1>

< h 2> O que </ h 2>
< p > A pgina simples juntos usando HTML </ p >

< h 2> Por que esta </ h 2>
< p > Para saber HTML </ p >
</ cor po >

</ ht ml >
Note que o h1 mar ca s uti l i zado uma vez - que suposto ser o pr i nci pal
t tul o da pgi na e no deve ser usada vr i as vezes.
h2 a h6no entanto, pode ser usado to f r equentemente como voc desej a, mas
devemsempr e ser usados emor dem, como el es se desti nam. Por exempl o, umh4deve
ser umsub-t tul o de umh3 , o qual deve ser umsub-t tul o de umh2 .



Links
At agor a voc f oi f azer uma pgi na web i ndependente, o que mui to bome
agradvel , mas o que tor na a i nter net to especi al que tudo l i gaes j untos.
O'H' e 'T' em' HTML 'stand para' hi pertexto ', que si gni f i ca, basi camente, de um
si stema de texto vi ncul ado.

Uma ncora tag ( um) usado par a def i ni r uml i nk, mas voc tambmpr eci sa
adi ci onar al go par a a mar ca de ncor a - o desti no do l i nk.
Adi ci one i sto a seu documento:

<DOCTYPE ht ml PUBLI C " - / / W3C / / DTD XHTML 1. 0 St r i ct / / EN"
"Ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- st r i ct . dt d">

< ht ml >

< cabea >
< t t ul o > Mi nha pr i mei r a pgi na web </ t i t l e >
</ cabea >

< cor po >

< h 1> Mi nha pr i mei r a pgi na web </ h 1>

< h 2> O que </ h 2>
< p > A pgi na si mpl es j unt os usando HTML </ p >

< h 2> Por que est a </ h 2>
< p > Par a saber HTML </ p >

< h 2> Onde encontrar o tutorial </ h 2>
< p > < um href = "http://www.htmldog.com" > Dog HTML </ a > </
p >

</ cor po >

</ ht ml >
Odesti no do l i nk def i ni do no href atr i buto da mar ca. Ol i nk pode
ser absol uto, como "http://www.html dog.com", ou pode ser rel ati va pgi na atual .
Assi m, se, por exempl o, voc ti nha outr o ar qui vo chamado "f l yi ngmoss.html ",
ento a l i nha de cdi go ser i a si mpl esmente hr ef =f l yi ngmoss.html ><a O
mi l agr e de musgo emvo </ a>ou al go assi m.
Uml i nk no temque l i gar par a outr o arqui vo HTML, el e pode l i gar par a
qual quer ar qui vo emqual quer l ugar na web.
Uml i nk pode tambmenvi ar umusur i o par a outr a par te da mesma pgi na em
que esti ver em. Voc pode adi ci onar umI D de atr i buto par a qual quer tag, por
exempl o, <h2 i d="moss">Moss </ h2>, e depoi s l i gar para el e, usando al go como
i sto: hr ef ="#moss"><a I r par a musgo </ a>. Sel eci onar esta l i gao i r r ol ar a
pgi na di r etamente para o el emento comque I D.
A uma tag per mi te que voc abr a o l i nk emuma janel a recm-gerado, emvez de
substi tui r a pgi na da web que o usur i o est que no pr i mei r o pensamento
pode soar como uma boa i di a, poi s no l eva o usur i o l onge de seu si t e.
H uma sr i e de r azes pel as quai s voc no deve f azer i sso, no entanto.
A par ti r de uma usabi l i dade ponto de vi sta, este mtodo quebra de navegao. A
f er r amenta de navegao mai s comumente usado emumnavegador a
vol ta boto. A aber tur a de uma nova j anel a desati va esta f uno.
Emmai or ponto de usabi l i dade, mai s ger al , os usur i os no quer emnovas
j anel as a ser sur gi ndo emtodo o l ugar . Se el es quer emabr i r uml i nk emuma
nova j anel a, emsegui da, el es podemoptar por f az-l o el es mesmos.

Listas
Exi stemtr s ti pos de l i sta, ordenada l i stas, l i stas ordenadas e l i stas de
defi ni es . Vamos ol har par a os doi s pr i mei r os aqui , e l i stas de
def i ni o no HTML Tutor i al I nter medi r i o .

Desor denada l i stas e l i stas or denadas f unci onamda mesma f or ma, exceto que o
pr i mei r o usado par a no sequenci ai s l i stas comos i t ens da l i sta
ger al mente pr ecedi dos por bal as e o l ti mo par a l i stas sequenci ai s, que
nor mal mente so r epr esentados por nmer os i ncr ementai s.
Oul eti queta usado para def i ni r as l i stas no or denadas e ol tag usado
par a def i ni r l i stas or denadas. Dentr o das l i stas, o l i eti queta usada par a
def i ni r cada i temda l i sta.
Al ter ar o cdi go par a o segui nte:

<DOCTYPE ht ml PUBLI C " - / / W3C / / DTD XHTML 1. 0 St r i ct / / EN"
"Ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- st r i ct . dt d">

< ht ml >

< cabea >
< t t ul o > Mi nha pr i mei r a pgi na web </ t i t l e >
</ cabea >

< cor po >
< h 1> Mi nha pr i mei r a pgi na web </ h 1>

< h 2> O que </ h 2>
< p > A pgi na si mpl es j unt os usando HTML </ p >

< h 2> Por que est a </ h 2>
< ul >
< li > Para saber HTML </ li >
< li > Para mostrar </ li >
< li > Porque eu me apaixonei com o meu computador e
quer para dar-lhe algum amor HTML. </ li >
</ ul >

</ cor po >

</ ht ml >
Se voc ol har para i sso emseu navegador , voc ver uma l i sta com
mar cador es. Basta mudar os ul tags para ol e voc vai ver que a l i sta ser
numerada.
As l i stas tambmpodemser i ncl u das nas l i stas de modo a f or mar uma
hi er ar qui a estr utur ada de i tens.
Substi tua o cdi go l i sta aci ma como segui nte:

< ul >
< l i > Par a saber HTML </ l i >
< l i >
Par a most r ar
< ol >
< li > Para o meu patro </ li >
< li > Para meus amigos </ li >
< li > Para o meu gato </ li >
< li > Para o patinho falando no meu crebro </
li >
</ ol >
</ l i >
< l i > Por que eu me apai xonei como meu comput ador e quer o dar -
l he umpouco de amor HTML. </ l i >
</ ul >
Et voi l . Uma l i sta dentr o de uma l i sta. E voc pode col ocar uma outr a l i sta que
dentr o. E outr o dentr o desse. E assi mpor di ante e assi mpor di ante.

Imagens
As coi sas podempar ecer umpouco semgr aa e chato comtoda esta f or matao
de t exto. cl ar o, a web no apenas sobr e o texto, mul ti m di a e a f or ma mai s
comumde m di a a i magem.

A img tag usada para colocar uma imagem em um HTML documento e ele fica assim:

< img src = "http://www.htmldog.com/images/logo.gif" width = "157"
altura = "70" alt = "logo Dog HTML" />
Osrc atr i buto di z ao navegador onde encontr ar a i magem. Tal como
a uma eti queta, esta pode ser absol uta, como no exempl o aci ma demonstr a, mas
ger al mente r el ati vo. Por exempl o, se voc cr i ar sua pr pr i a i mageme sal v-
l o como "al i enpi e.j pg" emumdi r etr i o chamado "i magens", emsegui da, o cdi go
ser i a <i mg sr c ="/ i magens al i enpi e.j pg...
Os l argura e al tura atr i butos so necessr i os, por que se el es f or emexcl u dos,
o navegador tende a cal cul ar o tamanho que as car gas de i magem, emvez de
quando a pgi na car r egada, o que si gni f i ca que o l ayout do documento pode
pul ar enquanto a pgi na car r egada.
Oal t atr i buto a descri o al ternati va. I sto usado par a pessoas que no
podemou optampor no ver as i magens. Esta uma exi gnci a nas l ti mas
ver ses do HTML.
Note-se que, como a BR tag, por que o i mg tag no temuma tag de f echamento,
f echa-se emsi , ter mi nando com/ >
A constr uo de i magens par a a web umpouco f or a do mbi to da pr esente
si te, mas val e a pena obser var al gumas coi sas...
Os f or matos de ar qui vo mai s uti l i zados para i magens so GIF s e J PEGs . Ambos
so f or matos compactados, e t musos di f er ent es.
GI Fs pode ter mai s de 256 cor es, mas que mantmas cor es da i magem
or i gi nal . Quanto menor o nmer o de cor es que voc temna i magem, quanto menor
o tamanho do ar qui vo ser .
GIFS DEVE SER USADOPARA IMAGENS COMCORES SLIDOS.
J PEGs por outr o l ado, uti l i zar umal gor i tmo matemti co par a compr i mi r a
i mageme di stor cer o or i gi nal l i gei r amente. Quanto mai s bai xa f or a
compr esso, mai or ser o tamanho do f i chei r o, mas quanto mai s cl ara a i magem.
J PEGS DEVE SER USADOPARA IMAGENS tai s como fotografi as.
As i magens so, tal vez, os mai or es arqui vos de umweb desi gner novo ser
mani pul ao. umer r o comuma ser al hei o ao tamanho do ar qui vo de i magens,
que pode ser extr emamente gr ande. Pgi nas da Web deve bai xar to r api damente
quanto poss vel , e se voc tenha emmente que a mai or i a das pessoas ai nda
usammodems que bai xar emmenos de umsegundo 7Kb (r eal i sti camente, menos do
que 5Kb), voc pode ver como umgr ande ar qui vo ser mui to mai s l ento do o
tempo de downl oad de uma pgi na i ntei ra.
Voc pr eci sa encontr ar umequi l br i o entr e qual i dade de i mageme tamanho da
i magem. Pr ogr amas de mani pul ao de i magemmai s moder nos per mi temcompr i mi r
as i magens e a mel hor manei r a de descobr i r o que mel hor par a si mesmo
tentati va e er r o.

Tabelas
Do outr o l ado da r ede mundi al de computador es, HTML tabel as so usadas e
abusadas par a l ayout de pgi nas. Vamos encontr ar como o l ayout de uma pgi na
semtabel as , no CSS Tutor i al Avanado . Ouso cor r eto de tabel as f azer
exatamente o que voc esper ar i a de uma tabel a para f azer - par a estruturar
os dados tabul ares .

H uma sr i e de tags uti l i zadas emtabel as e pl enamente se f ami l i ar i zar com
a f or ma como el es tr abal ham pr ovavel mente a r ea mai s di f ci l deste
tutor i al i ni ci antes HTML.
Copi e o segui nte cdi go no cor po do documento e, emsegui da, vamos passar pel o
que cada mar ca est f azendo:

< tabela >
< tr >
< td > Linha 1, clula 1 </ td >
< td > Linha 1, clula 2 </ td >
< td > Linha 1, clula 3 </ td >
</ tr >
< tr >
< td > Linha 2, clula 1 </ td >
< td > Linha 2, clula 2 </ td >
< td > Linha 2, clula 3 </ td >
</ tr >
< tr >
< td > Linha 3, clula 1 </ td >
< td > Linha 3, clula 2 </ td >
< td > Linha 3, clula 3 </ td >
</ tr >
< tr >
< td > Linha 4, clula 1 </ td >
< td > A linha 4, clula 2 </ td >
< td > Linha 4, clula 3 </ td >
</ tr >
</ tabela >
A tabela elemento define a mesa.
Otr el emento def i ne uma tabel a de l i nha .
Otd el emento def i ne uma cl ul a de dados . Estes devemser col ocados emtr tags,
como mostr ado aci ma.
Se i magi nar uma tabel a de 3x4, que de 12 cl ul as, deve haver
quatr o tr el ementos para def i ni r as l i nhas e tr s td el ementos dentr o de cada
uma das l i nhas, f azendo umtotal de 12 td el ementos.
Formas
Formas podemser usadas par a envi ar dados na I nter net e so f r equentemente
uti l i zados como formas de contato par a conver ter as i nf or maes i nser i dos por
umusur i o emume-mai l , como o uti l i zado neste si te .

Por conta pr pr i a, f or mas so i ntei s. El es pr eci samser l i gado a umpr ogr ama
que i r pr ocessar os dados i ntr oduzi dos pel o uti l i zador . Estes assumemtodos
os ti pos de f or mas e esto f or a do mbi to da pr esente si te. Se voc usar um
pr ovedor de ser vi o de i nter net par a hospedar seu cdi go HTML , que ser capaz
de aj ud-l o comi sso e pr ovavel mente ter i nstr ues cl ar as e si mpl es sobr e
como, por exempl o, par a f azer umtr abal ho de f or ma f or mul r i o par a e-mai l .
As tags bsi cas usadas no HTML r eal de f or mas so forma , a
entrada , textarea , sel ect e opo .
f or ma def i ne a f or ma e dentr o desta tag, exi ste uma necessr i a ao atr i buto
que conta a f or ma onde o seu contedo ser envi ado par a quando el e f or
envi ado.
Oopci onal mtodo atr i buto di z a f or ma como os dados que vai ser envi ado e
pode ter o val or de obter (que padr o) ou ps . I sto comumente usado, e
mui tas vezes def i ni do par a postar as i nf or maes que esconde ( se tr avas as
i nf or maes sobr e o URL ).
Assi m, umel emento de f or mul r i o ser par eci do comeste:

< forma de ao = "processingscript.php" mtodo = "post" >

</ formulrio >
A entr ada de tag o pai do mundo f or mul r i o. Pode l evar dez f or mas, descr i tos
a segui r :
<I nput type ="text" / > umpadr o de cai xa de texto . I sto pode tambmter
umval or de atr i buto, que def i ne o texto i ni ci al na cai xa de texto.
<I nput type ="password" / > semel hante cai xa de texto, mas os car acter es
di gi tados pel o usur i o ser o ocul tados.
<I nput type ="checkbox" / > uma cai xa de sel eo , que pode ser l i gado e
desl i gado pel o usur i o. I sto pode tambmter uma marcada atr i buto, que ser i a
usado no f or mato <i nput type="checkbox" checked="checked" / >, e f az comque
o estado i ni ci al da cai xa de ver i f i cao para ser l i gado, por assi mdi zer .
<I nput type ="radi o" / > semel hante a uma cai xa, mas o usur i o s pode
sel eci onar umboto de opo emumgr upo. I sto pode tambmter
uma mar cada atr i buto, usado na mesma f or ma que a cai xa de ver i f i cao.
<I nput type ="fi l e" / > uma r ea que mostr a os arqui vos emseu computador ,
como voc v ao abr i r ou sal var umdocumento na mai or i a dos pr ogr amas, e
usado par a per mi ti r que os usur i os f azer upl oad de ar qui vos.
<I nput type ="submi t" / > umboto que, quando sel eci onado i r apresentar o
f or mul r i o. Voc pode contr ol ar o texto que apar ece no boto submi t (como voc
pode como boto e r edef i ni o de ti pos - vej a abai xo), como val or de atr i buto,
por exempl o <i nput type ="submi t" val ue ="Ooo Procure Texto emum
boto... Wow" >/ .
<I nput type ="i magem" / > uma i magemque i r apr esentar as coor denadas de
onde o usur i o cl i car sobr e el e. I sso tambmr equer umsrc atr i buto, como
o i mg tag.
<I nput type ="button" / > umboto que no vai f azer nada semcdi go extr a
adi ci onado.
<I nput type ="reset" / > umboto que, quando sel eci onado i r redefi ni r os
campos do f or mul r i o par a seus val or es padro.
<I nput type ="hi dden" / > umcampo que no ser o exi bi dos e usado par a
passar i nf or maes como o nome da pgi na que o usur i o est ou o ender eo de
e-mai l que o f or mul r i o deve ser envi ado para.
Note-se que a entr ada de tag f echa-se comum" / >"no f i nal .
A textarea , basi camente, uma cai xa de texto gr ande. El a exi ge
uml i nhas e col s atr i buto e usada como esta:
<textar ea r ows="5" col s="20">uma gr ande car ga de texto aqui </ textar ea>
A sel eo tag tr abal ha coma opo de f azer tag drop-down cai xas de sel eo .
El es f unci onamassi m:

< selecione >
< opo valor = "primeira opo" > Opo 1 </ opo >
< opo valor = "segunda opo" > Opo 2 </ opo >
< opo valor = "tercei ra opo" >Opo 3 </ opo >
</ sel eci onar >
Quando o f or mul r i o envi ado, o val or da opo sel eci onada ser envi ada.
Semel hante ao ver i f i cado atr i buto de cai xas e bot es de r di o, uma opo tag
pode tambmter umsel ecci onado de atr i buto, que ser i a usado no
f or mato <opti on val ue="mouse" sel ected="sel ected">Roedor </ opti on>.
Todas as mar cas menci onadas aci ma ser mui to bomapr esentado na pgi na, mas
se voc l i gar o seu f or mul r i o par a umpr ogr ama de mani pul ao de f or ma,
todos el es vo ser i gnor ado. I st o por que os campos do f or mul r i o
necessi ta nomes . Assi m, par a todos os campos, o atr i buto de nome pr eci sa ser
adi ci onado, por exempl o <i nput type="text" / >name="tal ki ngsponge"
Uma f or ma pode par ecer como a abai xo. (Nota: este f or mul r i o no f unci onar a
menos que h umarqui vo "contactus.php", que decl ar ado na ao atr i buto
do f or mul r i o tag, par a l i dar coma data apr esentada)

< forma de ao = "contactus.php" mtodo = "post" >

< p > Nome: </ p >
< p > < entrada tipo = "text" nome = "nome" valor = "Seu
nome" /> </ p >

< p > Comentrios: </ p >
< p > < textarea nome = "comentrios" linhas = "5" cols =
"20" > Seus comentrios </ textarea > </ p >

< p > Voc : </ p >
< p > < entrada tipo = "radio" nome = "s tu" valor =
"masculino" /> Masculino </ p >
< p > < entrada tipo = "radio" nome = " s tu " valor =
"feminino" /> Feminino </ p >
< p > < entrada tipo = "radio" nome = "s tu" valor =
"hermafrodita" /> Um <hermafrodita / p >
< p > < entrada tipo = " "rdio nome = "s tu" valor = ""
assexuada checked = "checked" /> assexuada </ p >

< p > < entrada tipo = "submit" /> </ p >

< p > < entrada tipo = "reset" /> </ p >

</ formulrio >
Juntando tudo
Se voc j passou por todas as pgi nas desta HTML Tutori al Ini ci ante , ento
voc deve ser umHTMLer competente.
Na ver dade, devi do ao f ato de que a mai or i a das pessoas que usamHTML us-l o
bastante mal , deve ser mel hor do que a mai or i a.

Osegui nte cdi go i ncor por a todos os mtodos que f or amexpl i cados nas
pgi nas anter i or es:

<DOCTYPE ht ml PUBLI C " - / / W3C / / DTD XHTML 1. 0 St r i ct / / EN"
"Ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- st r i ct . dt d">

< ht ml >

< cabea >

< t t ul o > Mi nha pr i mei r a pgi na web </ t i t l e >

<-! Alis, este um comentrio ->

</ cabea >

< cor po >

< h 1> Mi nha pr i mei r a pgi na web </ h 1>

< h 2> O que </ h 2>
< p > A pgi na si mpl es j unt os usando HTML. < f or t e > Uma pgi na
si mpl es col ocar emconj unt o, ut i l i zando HTML. </ st r ong > Uma pgi na
si mpl es col ocar emconj unt o, ut i l i zando HTML. Uma pgi na si mpl es
col ocar emconj unt o, ut i l i zando HTML. Uma pgi na si mpl es col ocar em
conj unt o, ut i l i zando HTML. Uma pgi na si mpl es col ocar emconj unt o,
ut i l i zando HTML. Uma pgi na si mpl es col ocar emconj unt o, ut i l i zando
HTML. Uma pgi na si mpl es col ocar emconj unt o, ut i l i zando HTML. Uma
pgi na si mpl es col ocar emconj unt o, ut i l i zando HTML. </ p >

< h 2> Por que est a </ h 2>
< ul >
< l i > Par a saber HTML </ l i >
< l i >
Par a most r ar
< ol >
< l i > Par a o meu pat r o </ l i >
< l i > Par a meus ami gos </ l i >
< l i > Par a o meu gat o </ l i >
< l i > Par a o pat i nho f al ando no meu cr ebr o </
l i >
</ ol >
</ l i >
< l i > Por que eu ca no amor como meu comput ador e quer o dar -
l he umpouco de amor HTML. </ l i >
</ Ul >

<h2> Onde encont r ar o t ut or i al </ h2>
<p> hr ef =" ht t p: / / www. ht ml dog. com"> <i mg sr c =
"ht t p: / / www. ht ml dog. com/ i mages/ l ogo. gi f " wi dt h = " 157" hei ght = "70"
al t = "l ogo Dog HTML" / > </ a> </ p>

<h3> t abel a Al guns al eat r i a </ h3>
<t abl e bor der ="1">
<t r >
<t d> Li nha 1, cl ul a 1 </ t d>
<t d> Li nha 1, cl ul a 2 </ t d>
<t d> Li nha 1, cl ul a 3 </ t d>
</ Tr >
<t r >
<t d> Row 2, cl ul a 1 </ t d>
<t d> Row 2, cl ul a 2 </ t d>
<t d> Row 2, cl ul a 3 </ t d>
</ Tr >
<t r >
<t d> Li nha 3, cl ul a 1 </ t d>
<t d> Li nha 3, cl ul a 2 </ t d>
<t d> Li nha 3, cl ul a 3 </ t d>
</ Tr >
<t r >
<t d> Li nha 4, cl ul a 1 </ t d>
<t d> Li nha 4, cl ul a 2 </ t d>
<t d> Li nha 4, cl ul a 3 </ t d>
</ Tr >
</ Tabl e>

<h3> f or ma al eat r i a Al guns </ h3>
<p> <st r ong> Obser vao: </ st r ong> Par ece a par t e, mas ganhou ' t
f azer uma coi sa mal di t a </ p >

< f or ma de ao = "somescr i pt . php" mt odo = " post " >

< p > Nome: </ p >
< p > < ent r ada t i po = " t ext " nome = "nome" val or = "Seu nome" / > </
p >

< p > Coment r i os: </ p >
< p > < t ext ar ea l i nhas = "10" col s = " 20" nome = "coment r i os" >
Seus coment r i os </ t ext ar ea > </ p >

< p > Voc : </ p >
< p > < ent r ada t i po = " r adi o" nome = " s t u" val or = "mascul i no" / >
Mascul i no </ p >
< p > < ent r ada t i po = " r adi o" nome = " s t u" val or = "f emi ni no" / >
Femi ni no </ p >
< p > < ent r ada t i po = " r adi o" nome = " s t u" val or = "her maf r odi t a"
/ > Umher maf r odi t a </ p >
< p > < ent r ada t i po = " r adi o" nome = " s t u" val or = "assexual "
check = "checked" / > assexuada </ p >

< p > < ent r ada t i po = " submi t " / > </ p >

< p > < ent r ada t i po = " r eset " / > </ p >

</ f or mul r i o >

</ cor po >

</ ht ml >

Anda mungkin juga menyukai