You are on page 1of 12

01/11/2016 HTMLbsico:cdigosHTML

www.devmedia.com.br
[versoparaimpresso]
Linkoriginal:http://www.devmedia.com.br/articles/viewcomp.asp?comp=16596

HTML bsico - cdigos HTML


Aprenda os princpios bsicos para confeco de um site em HTML
para que voc possa fazer o seu primeiro site.

Motivao
HTML(abreviaodeHypertextMarkupLanguage)umalinguagemdemarcaoutilizadanaestruturao
depginasweb.Suasintaxebastantesimplese,assimcomoaXMLbaseadaemtags,querepresentam
osdiversoselementosdeumapgina,comoimagenselinks.

Aoacessarumapginawebatravsdeumnavegador,elecapazdeinterpretarocdigoHTMLerenderiz
lodeformacompreensvelparaousuriofinal,exibindotextos,botes,etc.comasconfiguraesdefinidas
pormeiodasdiversastagsqueessalinguagemdispe.

AtualmenteaHTMLencontrasenaverso5epadronizadapeloW3C(WorldWideWebConsortium),uma
organizaointernacionalresponsvelporestabelecerpadresparaainternet,comoalinguagemXML,as
CSSeoSOAP.

http://www.devmedia.com.br/articles/viewcomp_forprint.asp?comp=16596 1/12
01/11/2016 HTMLbsico:cdigosHTML

SaibamaissobreHTML

Estrutura bsica de uma pgina HTML


AestruturabsicadeumapginaHTMLpodeservistanaListagem1,naqualpodemosverasprincipais
tagsquesonecessriasparaqueodocumentosejacorretamenteinterpretadopelosbrowsers.

01<!DOCTYPEhtml>
02<html>
03<head>
04<metacharset="UTF8"/>
05<title>Document</title>
06</head>
07<body>
08<!Contedo>
09</body>
10</html>

Listagem1.EstruturabsicadeumapginaHTML

http://www.devmedia.com.br/articles/viewcomp_forprint.asp?comp=16596 2/12
01/11/2016 HTMLbsico:cdigosHTML

Linha1:ainstruoDOCTYPEdevesersempreaprimeiraaapareceremumapginaHTMLeindicaparao
browserqualversodalinguagemestsendousada.Nessecaso,estamostrabalhandocomaHTML5,
versonaqualadeclaraodoDOCTYPEbastantesimples,comopodemosvernalistagem

Linhas2e10:aberturaefechamentodataghtml,quedelimitaodocumento.Sendoassim,todasasdemais
tagsdapginadevemestarnesseespao

Linhas3e6:aberturaefechamentodataghead,quedefineocabealhododocumento.Ocontedonesse
espaonovisvelnobrowser,mascontminstruessobreseucontedoecomportamento.Dentro
dessatag,porexemplo,podemserinseridasfolhasdeestiloescripts

Linha4:atagmeta,nessecaso,especificaqualconjuntodecaracteres(charactersetoucharset)ser
usadopararenderizarotextodapgina.OUTF8contmtodososcaracteresdospadresUnicodeeASCII,
sendo,portanto,omaisutilizadoempginasweb.Amesmatagmeta,pormcomoutrosatributos,podeser
utilizadaparaoutrosfins,comonaSEO(SearchEngineOptimization)

Linha5:atagtitledefineottulodapgina,aquelequeaparecenajanela/abadonavegador

Linhas7e9:aberturaefechamentodatagbody,marcandooespaonoqualdeveestarcontidoocontedo
visualdapgina.Asdemaistagsquerepresentamtexto,botes,etc.devemseradicionadasnesse
intervalo

Linha8:nessalinhapodemosobservarasintaxeparaadiodecomentriosemHTML.Essetrechono
renderizadopelobrowser.

ParadesenvolverpginascomHTML,basicamenteprecisamosdeumeditordetexto,comooBlocodeNotas
doWindows,NanoeEmacsnoLinux,entrevriosoutros.H,ainda,editorescomopesavanadas,como
recursosdesyntaxhilghligteautocomplete,comoSublimeText,Atom,BracketseVisualStudioCode,que
podemserusadosparaeditardocumentosHTML.

Independentedoeditorutilizado,podemossimplesmentecopiarocdigodaListagem1paraumdelese
salvaroarquivocomextenso.html.Emseguida,podemosabriressearquivoemumbrowser.

http://www.devmedia.com.br/articles/viewcomp_forprint.asp?comp=16596 3/12
01/11/2016 HTMLbsico:cdigosHTML

Saibamaissobremetatags

Tags
UmdocumentoHTMLcompostoportags,asquaispossuemumnomeeaparecementreossinais<e>,
comovimosnaListagem1,porexemplo,em<html>e<head>.Naqueleexemplotambmvimosque
algumastagsprecisamserabertasefechadas,comoem<body></body>.Nessecaso,atagde
fechamentodeveconterabarra/antesdonome.Outras,porm,noprecisamserfechadas,comoatag
<meta>.Nessescasos,aadiodabarra/nofinaldaprpriatag,comovemosnalinha4daListagem1,
opcional.

Outroaspectoimportantedalinguagemqueelacaseinsensitive,ouseja,nolevaemconsideraoa
diferenaentreletrasmaisculaseminsculas.Noentanto,ousoapenasdeletrasminsculastemsido
utilizadocomopadropelosdesenvolvedores.

Almdessascaractersticas,astagstambmpossuematributos,comovemosnalinha4daListagem1,na
qualatagmetapossuioatributocharset=UTF8.Essaspropriedadesdefinemalgumascaractersticas
adicionaisdecadatageemalgunscasossoobrigatrias.Seusvaloresdevemaparecerentreaspas
duplas,comonoexemploacima,ouemaspassimples,casooprpriovalorcontenhaaspasduplas.

http://www.devmedia.com.br/articles/viewcomp_forprint.asp?comp=16596 4/12
01/11/2016 HTMLbsico:cdigosHTML

Cabealhos
Cabealhossonormalmenteutilizadosparaidentificarpginasesees,epossuemaparnciadiferenciada
dorestantedotexto.NoHTMLhseisnveisdecabealhos/ttulosquepodemserutilizadospormeiodas
tagsh1,h2,h3,h4,h5eh6,sendoh1omaior/maisrelevanteeh6omenor/menosrelevante.

NaListagem2podemosvercomoutilizaressastags,enaFiguraNtemosoresultadodessecdigo.Para
testaressecdigo,bastacopiloparaoespaoindicadonalinha8daListagem1esalvarodocumento
comaextenso.html.

<h1>Ttulodenvel1</h1>
<h2>Ttulodenvel2</h2>
<h3>Ttulodenvel3</h3>
<h4>Ttulodenvel4</h4>
<h5>Ttulodenvel5</h5>
<h6>Ttulodenvel6</h6>

Listagem2.Diferentesnveisdecabealho
Run

Figura1.Diferentesnveisdecabealho

Pargrafos
PargrafosdetextosogeradosnaHTMLpormeiodastags

.Esseumexemplodetagcujadisposionatelasedemformadebloco,ouseja,umpargrafoposto
sempreabaixodooutro.

http://www.devmedia.com.br/articles/viewcomp_forprint.asp?comp=16596 5/12
01/11/2016 HTMLbsico:cdigosHTML

Ocdigoaseguiradicionatrspargrafos,quepodemservisualizadosnaFigura2.

<p>Primeiropargrafodotexto.</p>
<p>Segundopargrafodotexto.</p>
<p>Terceiropargrafodotexto.</p>

Run

Figura2.Pargrafosvisualizadosnapgina

Imagens
AinserodeimagensemumapginaHTMLpodeserfeitapormeiodatagimg,querecebenoatributosrc
oendereodoarquivoasercarregado.Almdesse,outrosdoisatributosimportantessooalt,queindica
umtextoalternativoqueserexibidocasooarquivonopossasercarregado,etitle,queindicaotextoque
aparecercomotooltipaopassaromousesobreafigura.

Ocdigoaseguirinsereumaimagemapartirdoarquivoperfil.png,localizadonamesmapastadoarquivo
HTML,eumatagimgapontandoparaumarquivoinexistente.ObservenaFigura3queenquantoaprimeira
aparececorretamente,asegundaexibidacomumconedeerrootextoalternativoqueinformamos.Note,
ainda,quesobreaprimeirafiguraestsendoexibidootooltipdefinidonoatributotitle.

<imgsrc="avatar.png"alt="Textoalternativo"title="Avatar"#tamfixo/>
<imgsrc="arquivo_inexistente.jpg"alt="Textoalternativo"title="Outrafigura"/>

Run

http://www.devmedia.com.br/articles/viewcomp_forprint.asp?comp=16596 6/12
01/11/2016 HTMLbsico:cdigosHTML

Figura3.Exemplosdeusodatagimg

Links
Linkssonormalmenteutilizadosparadirecionarousurioparaoutraspginas,ouparaoutraspartesda
mesmapgina.Nosdoiscasos,utilizamosataga,quepossuioatributohrefnoqualindicamosodestino
daquelelink.

Oseguintecdigomostracomoadicionarumlinkparaoutrapgina,nestecaso,indicadapeloarquivo
pagina2.html.

<ahref="pagina2.html">Pgina2</a>

Jocdigoabaixomostracomoadicionarumlinkparaumelementonamesmapgina.Nessecaso,ao
clicarnolinkobrowsermudarofocoparaoelementoquepossuioatributoidigualqueleindicadonohref.

<ahref="#paragrafo3">Irparaopargrafo3</a>
<!outroselementos>
<pid="rodape">Pargrafonorodap.</p

Notetambmquenessecasoohrefrequeraindaosinaldecerquilha(#)antesdoiddoelementoqueser
ofocodolink.

Tabelas

http://www.devmedia.com.br/articles/viewcomp_forprint.asp?comp=16596 7/12
01/11/2016 HTMLbsico:cdigosHTML

Tabelassoelementosutilizadoscomfrequnciaparaexibirdadosdeformaorganizadaemlinhasecolunas.
NoHTML,elassoformadasportrstagsbsicas:table,paradelimitaratabelatr,paraindicaraslinhase
tdparaformarascolunas.AListagem3mostraumexemplosimplesdetabelacom3linhaseduas
colunas,eseuresultadopodeservistonaFigura4.

<table>
<tr>
<td>Linha1,Coluna1</td>
<td>Linha1,Coluna2</td>
</tr>
<tr>
<td>Linha2,Coluna1</td>
<td>Linha2,Coluna2</td>
</tr>
<tr>
<td>Linha3,Coluna1</td>
<td>Linha3,Coluna2</td>
</tr>
</table>

Listagem3.Exemplodeusodetabelas
Run

Figura4.Exemplodetabelacom3linhase2

Existemaindaoutrastrstagsutilizadasparadelimitar,deformamaisorganizada,aspartesdatabela:
theadparaocabealhotbodyparaocorpoetfootparaorodap.AListagem4trazumexemplode
tabelamaiscomplexa,utilizandotodasastags.SeuresultadoapresentadonaFigura5.

<table>
<thead>
<tr>
<th>Produto</th>
<th>Preo</th>
<th>Quantidade</th>
</tr>
</thead>
<tbody>

http://www.devmedia.com.br/articles/viewcomp_forprint.asp?comp=16596 8/12
01/11/2016 HTMLbsico:cdigosHTML

<tr>
<td>Feijo</td>
<td>R$8,75</td>
<td>1</td>
</tr>
<tr>
<td>Arroz</td>
<td>R$4,99</td>
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td>R$18,73</td>
</tr>
</tfoot>
</table>

Listagem4.Tabelacomcabealhoerodap
Run

Figura5.Tabelacomcabealhoerodap

Observao:Porpadro,astabelasnopossuembordas.IssodeveseradicionadopormeiodasCSS.

Listas
Listassoelementosteisparaorganizareordenaritensqueestorelacionadosdealgumaforma.NoHTML
possvelcriartrstiposdelistas:ordenadas(comatagol),noordenadas(comatagul),ededefinio
(pormeiodatagdl).

http://www.devmedia.com.br/articles/viewcomp_forprint.asp?comp=16596 9/12
01/11/2016 HTMLbsico:cdigosHTML

NaListagem5temosumexemplodelistaordenada,enquantoaListagem6trazumexemplodelistano
ordenada.Emseguida,aFigura6mostraoresultadodosdoiscdigos.Observequecadaitemdasprimeiras
listasdefinidopelatagli.

<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>

Listagem5.Listaordenada
Run

<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>

Listagem6.Listanoordenada
Run

Figura6.Listasordenadaenoordenada

Aslistasdedefiniotmumcomportamentoumpoucodiferente,umavezquecadaitemcompostopor
umttulo(dt)eumadefinio(dd),semelhanteaoqueocorreemdicionrios,nosquaistemososverbetes
esuasdefinies.NaListagem7temosumexemplodessetipodelista,comseuresultadoilustradona
Figura7.

<dl>
<dt>Ttulo1</dt>
<dd>Definio1</dd>
<dt>Ttulo2</dt>
<dd>Definio2</dd>
<dt>Ttulo3</dt>
<dd>Definio3</dd>
</dl>

Listagem7.Exemplodelistadedefinio

http://www.devmedia.com.br/articles/viewcomp_forprint.asp?comp=16596 10/12
01/11/2016 HTMLbsico:cdigosHTML

Run

Formulrios
FormulriossonormalmenteutilizadosparaintegrarapginaHTMLaalgumprocessamentonolado
servidor.Nessescasos,apginaenviadadosparaumaaplicao(Java,PHP,.NET,etc),queosrecebe,trata
eretornaalgumresultado.

NoHTML,geralmenteusamosatagformparadelimitarareanaqualseencontramoscamposaserem
preenchidospelousurio,afimdeseremenviadosparaprocessamentonobackend(enquantoapgina
HTMLchamadadefrontenddaaplicao).

AListagem8mostraumexemplodeformulriocomvriostiposdecamposparaentradadedadoseum
botoparasubmetlosaoservidor.NaFigura8vemosseuresultado.

<formaction="salvar_dados.php"method="post">
<inputtype="text"placeholder="Digiteaqui"><br/>
<inputtype="checkbox">Checkbox<br/>
<inputtype="radio">Radiobutton<br/>
<inputtype="range"><br/>
<inputtype="submit"value="Enviar">
</form>

Listagem8.Formulriocomcampos
Run

http://www.devmedia.com.br/articles/viewcomp_forprint.asp?comp=16596 11/12
01/11/2016 HTMLbsico:cdigosHTML

Figura8.Formulrioparaenviodedados

Formatao de texto
Astagsdeformataodetextoajudamadestacartrechosdaparteescritadapgina,sejaparafinsdeSEO
ouporrequisitosdocontedo.Formataescomonegritoeitlicopodemseraplicadascomfacilidade
utilizandoasvriastagsdisponveisparaessefim:

bestrongparanegrito/textoforte
ieemparaitlico/nfase
supesubparasobrescritoesubscrito,respectivamente
insedelparaindicartrechosqueforamincludosouremovidos,respectivamente
smallparatextosmenoresqueopadro
markparatextodestacado.

NaListagem9vemosexemplosdeusodessastags,eseuresultadopodeserobservadoemseguida,na
Figura9.

<p>Textoemnegritocom<b>bold</b>e<strong>strong</strong>.</p>
<p>Textoemitlicocom<i>italics<i>e<em>emphasis</em>.</p>

http://www.devmedia.com.br/articles/viewcomp_forprint.asp?comp=16596 12/12