HTML Básico - Códigos HTML

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
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
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.
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.
Cabealhos
Cabealhossonormalmenteutilizadosparaidentificarpginasesees,epossuemaparnciadiferenciada
dorestantedotexto.NoHTMLhseisnveisdecabealhos/ttulosquepodemserutilizadospormeiodas
tagsh1,h2,h3,h4,h5eh6,sendoh1omaior/maisrelevanteeh6omenor/menosrelevante.
NaListagem2podemosvercomoutilizaressastags,enaFiguraNtemosoresultadodessecdigo.Para
testaressecdigo,bastacopiloparaoespaoindicadonalinha8daListagem1esalvarodocumento
comaextenso.html.
<h1>Ttulodenvel1</h1>
Listagem2.Diferentesnveisdecabealho
Run
Figura1.Diferentesnveisdecabealho
Pargrafos
PargrafosdetextosogeradosnaHTMLpormeiodastags
.Esseumexemplodetagcujadisposionatelasedemformadebloco,ouseja,umpargrafoposto
sempreabaixodooutro.
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
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
Tabelassoelementosutilizadoscomfrequnciaparaexibirdadosdeformaorganizadaemlinhasecolunas.
NoHTML,elassoformadasportrstagsbsicas:table,paradelimitaratabelatr,paraindicaraslinhase
tdparaformarascolunas.AListagem3mostraumexemplosimplesdetabelacom3linhaseduas
colunas,eseuresultadopodeservistonaFigura4.
<table>
<tr>
<td>Linha1,Coluna1</td>
</tr>
<tr>
</tr>
<tr>
</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>
<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).
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
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
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>

HTML Básico - Códigos HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Básico - Códigos HTML

Uploaded by

Copyright:

Available Formats

01/11/2016 HTMLbsico:cdigosHTML

HTML bsico - cdigos HTML

Estrutura bsica de uma pgina HTML

You might also like