Você está na página 1de 3

07/11/2016

UdacityNanodegree

IntrotoProgrammingNanodegree
Stage0FirstProject
UmpoucosobreHTML
HTML(HyperTextMarkupLanguage)umpadrodemarcaoparapginaseaplicaesweb,esur
giunoinciodosanos90.
Atualmentealinguagemestnaverso5,popularmenteconhecidacomoHTML5.
fonte:HTMLWikipedia,thefreeencyclopedia

AestruturadeumapginaHTML
Emsuacomposio,todapginaHTMLtemumpadromnimodeelementos,chamadostambmde'tags'.Abaixoaestruturamnimadeuma
pginaHTML.

<html>

<html>

<head>
<head>
<body>
<body>

Nestecaptuloinicialfalaremosdastags<p>,<div>,<h1>,<b>,<em>,<span>.
Antesdefalarmossobrecadauma,importantesabermosqueastags,compequenasexcees,etrataremosessas,temomesmopadrode
formato,ondetemos'atributos'eseusrespectivos'valores'paracadatag.V
ejamosabaixo:
<TAGATRIBUTO1="VALOR"ATRIBUTO2="VALOR"...>Textodecontedo<TAG>

Tagh1
Atag"h1"utilizadaparadestacar
,principalmente,ttulosemumtexto.
Suaestruturaaseguinte:

<h1>Ttuloprincipaldapgina<h1>

Exemplo:

<h1>

MeuTtuloPrincipal
<h1>

Obs.:Estatagtambmpodeserutilizadaemimagens,seguindoamesmaestrutura.

Tagp
Atag"p"umatagdeblocodecontedo.Muitousadoparaestruturasdepargrafosemtextos.
Suaestruturaaseguinte:

<p>Linhadetextodeumtextoprincipal.<p>

Exemplo:

<p>

Esteumpargrafodetexto.Vocpodeinseriroseutextoaqui.
<p>

file:///C:/_attach/estudos/udacity/nanodegree1/stage0/stage0.html

1/3

07/11/2016

UdacityNanodegree

Tagbr
Sevocreparar,atag'p'automaticamenteforaotextoairparaaprximalinha.Eseeuprecisardemaisumalinhapulada?Apodemosusara
tagbr.
Suaestruturaaseguinte:

<br>

(Pulandoumalinha)

Exemplo:

<br>(Pulandoumalinha)
Texto
<br><br>

(Pulandoduaslinhas)

Tagb
Atag"b"umatagusadaparatransformarotextoemnegrito.
Suaestruturabemsimples:

<b>Textoemnegrito<b>

Exemplo:

<b>Esteumtextoescritocomatag'b'.<b>

Tagem
Atag"em"umatagusadaparatransformarotextoemitlico.Antesatag'i'erautilizada,maselafoidescontinuadaesubstituda.
Suaestruturatambmmuitosimples:

<em>Textoemitlico<em>

Exemplo:

<em>Esteumtextoescritocomatag'em'.<em>

Tagspan
Atag"span"umatagutilizadaparatextos,porm,commenorimportncia.Muitousadaparacolocartrechosdetextoquenoprecisamde
destaqueouimportncia,equenonecessitemdeumatag'p'.
Suaestruturaaseguinte:

<span>Textoescritocomspan<span>

Exemplo:

<span>Esteumtextoescritocomspan.<span>

Taga
Atag"a"umatagncora,ouseja,elaumhyperlinkmarcaesoupontosdapginaatualouexterna.
Apropriedadehrefindicaolinkadirecionar
.Aestruturasimples:

<ahref="linkaseacessado">Texto<a>

Exemplo:

file:///C:/_attach/estudos/udacity/nanodegree1/stage0/stage0.html

2/3

07/11/2016

UdacityNanodegree

EsteumdeacessopginadaUdacity.Clique<a>
aqui.<a>

Tagimg
Atag"image"umatagparamarcaodehyperlinks,porm,imagens.Suaestruturaumpoucodiferentedosdemaisitens,poistema
obrigatoriedadededuaspropriedades.
Apropriedadesrcindicaoendereodaimagem,eapropriedade
altindicaumtextoalternativocasoaimagemnoaparea.
Estatagtemdediferentequetambmnopossuiumatagdefechamento,como'<p>'.V
ejaabaixo:

<imgsrc="https://br.udacity.com/assets/images/logo/logomark.min.svg"alt="textoalternativoaimagem">
alt="text">

<img

Exemplo:

>

Tagdiv
Atag"div"umatagdeblocodecontedotambm,comoatag'p'.
Adiferenaqueatagdivcomumenteusadacomoumcontinerparaor
ganizareestruturarosblocosdeumapginaHTML.
Suaestruturaaseguinte:

<div>

<div>

<p>Primeiralinhadetexto.<p>
<imgsrc="https://www.uol.com.br/img.svg""textoalternativoaimagem">
<p>Segundalinhadetexto.<p>

Exemplo:

<div>

Primeiralinhadetextodentrodadiv.LinkparaaUdacity
aqui.

Segundalinhadetextodentrodadiv.LinkparaaUdacity
aqui.

<div>

DicasFinais
Combasenoselementosapresentados,sevocolharocdigofontedessapgina,verqueelafoi99%escritacomoselementosapresentados
comexceodeumnicoelementochamado'pre'que,resumidamente,formataumtextoeoexibedamaneiraqueestnocdigo.Podemos
concluiroseguinte:
Astagasa,span,br,img,andstrongsotodoselementos'inline',ouseja,elementosquenopossuemblocosdeoutrastagsneles.Issonoquer
dizerquenopossamter
,ok?!
Joselementosdivepsoblocosdeelementos,ouseja,elespodemconterdiversoselementos'inline'neles.

Obrigadoeataprxima!

file:///C:/_attach/estudos/udacity/nanodegree1/stage0/stage0.html

3/3