Apresentação HTML - 2

7/17/2019 Apresentação HTML - 2

http://slidepdf.com/reader/full/apresentacao-html-2 1/22

HTMLProfessora: Hanna Sérgia Sousa de MagalhãesE-mail: [email protected]



Aula ! - H"M#$on%inuando



&E$AP'"(#A)*+



Títulos

"odo documen%o em H"M# de,e ossuir um %%ulo.*e um modo geral o %%ulo aarece em lugarsearado da /gina 0or e1emlo2 al%o da %ela nona,egador32 e é u%ili4ado ara iden%i5car o

documen%o em ou%ros con%e1%os• A marca6ão u%ili4ada ara %%ulos é 7%i%le8 e seu

ar 79%i%le8.



E1emlo 7h%ml8 -iniciou o H"M#7head8 -abriu um cabe6alho7%i%le8 Es%e é o %%ulo79%i%le8 -%i%ulo79head87body8 -iniciou o coro da /gina7h!8E es%e o cabe6alho de n,el !79h!8-iden%i5ca6ão de %%ulosA;ui en%ra o %e1%o do documen%o ...

79body879h%ml8



Cabeçalhos

<$abe6alhos< normalmen%e são usados ara %%ulose sub-%%ulos de uma /gina.H"M# ossui seis n,eis de cabe6alhos2 numeradosde a =2 sendo o n>mero o de maior des%a;ue.

7head87Hy8"e1%o do cabe6alho 79Hy 879head8



Parágrafos

A marca6ão 78 é u%ili4ada ara de5nir o incio deum no,o ar/grafo2 dei1ando uma linha em brancoen%re cada ar/grafo.



Quebras de linhaA marca6ão 7br8 fa4 uma ;uebra de linha sem acrescen%ar esa6o e1%ra en%re as linhas.?ea a diferen6a do uso de 78 e 7br8 2nos e1emlos a seguir:

7h%ml87body87h8(%ili4ando 79h8?amos searar es%a sen%en6a com marca6ão de ar/grafo.78Para ,eri5car a diferen6a.79body879h%ml8

7h%ml87body87h8(%ili4ando br79h8

*iferen6a ;uando searamos duas linhas u%ili4ando7br8a marca6ão de ;uebra de linha7br8*iferen6a ;uando searamos duas linhas u%ili4ando7br8a marca6ão de ;uebra de linha7br8*eu ra no%ar79body879h%ml8



InterligandoDocumentos+ rincial oder do H"M# ,em da sua caacidade dein%erligar ar%es de um %e1%o 0e %ambém imagens3 a ou%rosdocumen%os.A marca6ão 7A82 ;ue de5ne o on%o de ar%ida ara oslinBs2 é denominada de Cncora. Para incluir uma Cncora em

seu documen%o:. 'nicie a Cncora com 7A . 0 H/ um esa6o deois de A.3!. Eseci5;ue o documen%o a ser in%erligado2 inserindoarCme%ro H&ED<5lenameF seguido do sinal: 8G. 'nsira o %e1%o ;ue ,ai funcionar como linB no documen%o

corren%e. Ano%e a marca6ão de 5nal da Cncora: 79A8.

(m e1emlo de referIncia a um hier%e1%o:7A H&ED<#is%aPraias.h%ml<8Praias79A8



#is%as• Listas No Numeradas

Para criar uma lis%a não numerada:. $omece com a marca6ão de incio de lis%a: 7(#8.!. 'nsira a marca6ão 7#'8 an%es de cada i%em da lis%a i%em.

0)ão é necess/rio fechar a marca6ão com 79#'8 3G. Encerre com a marca6ão de 5m de lis%a: 79(#8.

Abai1o o e1emlo de uma lis%a com dois i%ens:7(#8

7#'8 ma6ãs7#'8 bananas79(#8

$ada marca6ão 7#'8 ode con%er ,/rios ar/grafos.



#is%as• Listas Numeradas

(ma lis%a numerada - ou ordenada - é semelhan%e auma lis%a não numerada2 e1ce%o or;ue u%ili4amarca6ão 7+#8 ao in,és de 7(#8. +s i%ens são

iden%i5cados u%ili4ando-se a mesma no%a6ão 7#'8 .(ma lis%a criada assim:7+#87#'8 laranas

7#'8 eras7#'8 u,as79+#8



#is%as• Listas de De!niç"es

(ma lis%a de de5ni6Jes normalmen%e consis%e em al%ernar um %ermo 0abre,iado como *"3 euma de5ni6ão 0abre,iado como **3. $lien%es Keb broLsers geralmen%e mos%ram a de5ni6ãoem no,a linha com ou%ro alinhamen%o.E1emlo de uma lis%a de de5ni6ão:

7*#8

7*"8 )$SA7**8 )$SA2 %he )a%ional $en%er for Suercomu%ing Alica%ions2 is loca%ed on %he camusof %he (ni,ersi%y of 'llinois a% (rbana-$hamaign. )$SA is one of %he ar%ician%s in %he)a%ional Me%a$en%er for $omu%a%ional Science and Engineering.7*"8 $ornell "heory $en%er7**8 $"$ is loca%ed on %he camus of $ornell (ni,ersi%y in '%haca2 )eL orB. $"$ isano%her ar%ician% in %he )a%ional Me%a$en%er for $omu%a%ional Science andEngineering.

79*#8

As en%radas 7*"8 e 7**8 odem con%er ,/rios ar/grafos 0searados or 7P8 32 lis%as2 ouou%ras de5ni6Jes.A marca6ão 7**8 ode %ambém ser u%ili4ada2 fora de uma lis%a de de5ni6Jes como se fosseuma %abula6ão 0insere um esa6o no incio da frase3.



#is%as• Listas Intercaladas

As lis%as odem ser encadeadas ou in%ercaladas arbi%rariamen%e2 rodu4indoresul%adosbas%an%e in%eressan%es. A r/%ica é ;ue ,ai mos%rar ;ual o n>mero m/1imo de lis%as;ue ,alea ena in%ercalar. Pode-se inclusi,e %er um ar/grafo2 in%ercalado com uma lis%a ;uecon%enha um >nico i%em.

E1emlo de lis%a in%ercalada:7(#87#'8 Es%ados da região sul do Nrasil:7(#87#'8 &io Orande do Sul

7#'8 San%a $a%arina79(#87#'8 (m es%ado da região nordes%e:7(#87#'8 Pernambuco79(#879(#8



#is%as• Te#to Pr$%formatado

A marca6ão 7P&E80deri,ada de reforma%%ed3 delimi%a uma /rea de %e1%o em ;ueesa6os2no,as linhas e %abula6Jes são man%idas. +u sea2 o %e1%o ser/ aresen%ado e1a%amen%edaforma como foi digi%ado2 mesmo ;ue não haam marca6Jes do h%ml. Q uma forma de sereser,ar o forma%o de um %e1%o

Es%e recurso é u%ili4ado or e1emlo ara lis%as de rogramas.?eamos um e1emlo:

7P&E8R9bin9cshcd TS$&cfs ge% mysrc.f:mycfsdir9mysrc.f

cfs ge% myin5le:mycfsdir9myin5lefc -! -o mya.ou% mysrc.f mya.ou%cfs sa,e myou%5le:mycfsdir9myou%5lerm U79P&E8



'magens• Inserir imagens

As imagens den%ro de uma /gina de,em es%arreferencialmen%e no forma%o <.gif<. Es%e é oforma%o mais uni,ersalmen%e acei%o elos

,isuali4adores de KKK 0broLsers3. + )e%scaeconsegue decodi5car ou%ros forma%os como o <.g<e <.rgb<2 mas es%a caacidade não é comum a%odos os rogramas.

(%ili4a-se a seguin%e no%a6ão ara incluir umaimagem:7img src<dire%Vrio9ar;ui,o<8



'magens• &linhamento das imagens

• "oda imagem includa ode ser osicionada0align...3 na %ela das seguin%es formas: "+P2M'**#E2 N+""+M2 #ED" e &'OH".



E1emlo !• As %rIs rimeiras o6Jes de5nem a osi6ão da

imagem com rela6ão ao %e1%o. ?ea os e1emlos:



'magens• (ma imagem ode ser ainda um bo%ão sens,el:

Para isso bas%a incluir uma imagem no in%erior deuma Cncora.

7a href<.9inde1.h%m<87img

src<..9images9s%o.gif879a8



$on%role de $ores eOr/5cos de Dundo• ' &tributo (ac)ground

+ a%ribu%o NacBground de,e ser alicado Wmarca6ão 7body8. Es%e a%ribu%o eseci5ca a (&#de uma imagem ;ue ser/ u%ili4ada como fundo

0bacBground3 de uma /gina. Es%a imagem ocuar/%oda a /rea de fundo da %ela.

*e,e ser escri%o des%a forma:

7body bacBground<images9fundo.gif<8 .. %oda a/gina .. 79body8



$on%role de $ores eOr/5cos de Dundo• ' &tributo (*Color

Es%e a%ribu%o %ambém de,e acomanhar amarca6ão 7body8. Ele ermi%e ;ue se de5na umacor adrão ara o fundo da /gina2 sem

necessidade de um ar;ui,o imagem ara isso.

+ forma%o da marca6ão é:7body bgcolor<Rrrggbb<8A;ui 5ca a

/gina79body8

+nde <Rrrggbb< é um cVdigo he1adecimal noadrão <red-green-blue< u%ili4ado ara eseci5car acor de fundo.



$ores de le%ras e linBs• ' atributo T+,T

Es%e a%ribu%o é u%ili4ado ara con%rolar a cor do%e1%o <normal< em uma /gina. +u sea de5ne a corde %odo o %e1%o do documen%o e1ce%o os linBs. +

a%ribu%o de,e acomanhar a marca6ão 7N+*82escre,endo-se da seguin%e forma:

7body %e1%<Rrrggbb<8A;ui en%ra odocumen%o79body8



E1ercicios• (se sua cria%i,idade e crie uma agina com %odos

os %ags / conhecidos.

Documents

Apresentação HTML - 2