apresentação html -1

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

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

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



Aula ! - H"M#$n%rodu&ão



' (ue é $)"E*)E"+• $n%erne% é um con,un%o de redes mundial.• A in%erne% é comos%a or milhes de redes

ar%iculares/ formada or resid0ncias/ emresas/uni1ersidades/ 2rgãos do go1erno/ e e%c./ e

%ornou-se um fen3meno/ ois é a%ra1és dela (ueas essoas %em a ossibilidade de cole%arinforma&es sobre (ual(uer assun%o do seuin%eresse/ em (ual(uer lugar no mundo.

• A in%erne% ermi%e o acesso a informa&es de%odos os %ios e de mui%as %ransfer0ncias dedados/ além de uma grande 1ariedade derecursos e ser1i&os/ como emails/ ser1i&os decomunica&ão ins%an%4nea/ comar%ilhamen%o de

ar(ui1os como m5sicas e fo%os/ redes sociais/ euma in6nidade de ou%ros %emas.



' (ue é 777:• 777 é a sigla ara 7orld 7ide 7eb/ (ue

signi6ca rede de alcance mundial/ em or%ugu0s.' 888 é um sis%ema em hierm9dia/ (ue é areunião de 1rias m9dias in%erligadas or sis%emas

ele%r3nicos de comunica&ão e e;ecu%adas na$n%erne%/ onde é oss91el acessar (ual(uer si%eara consul%a na $n%erne%.

• A 7eb funciona a%ra1és de %r0s ar4me%ros: a=*#/ (ue eseci6ca o endere&o 5nico (ue cada

gina 1ai receber/ e é como ela 1ai serencon%rada (uando os usurios digi%arem/ H""P/(ue >é o na1egador e ser1idor en1iaminforma&es? e H"M# (ue é um mé%odo decodi6car a informa&ão da in%erne%/ ara sere;ibida de di1ersas maneiras.



' (ue é 7eb:• 7eb é uma ala1ra inglesa (ue signi6ca %eia ou rede. '

signi6cado de web ganhou ou%ro sen%ido com oaarecimen%o da in%erne%. A 8eb assou a designar a rede(ue conec%a comu%adores or %odo mundo/ a 7orld 7ide7eb 777. 7eb ode ser uma %eia de aranha ou um

%ecido e %ambém se u%iliBa ara designar uma %rama ouin%riga.

• A 8eb signi6ca um sis%ema de informa&es ligadasa%ra1és de hierm9dia hierliga&es em forma de %e;%o/19deo/ som e ou%ras anima&es digi%ais (ue ermi%em ao

usurio acessar uma in6nidade de con%e5dos a%ra1és dain%erne%. Para %al é necessrio liga&ão C in%erne% e umna1egador browser onde são 1isualiBados os con%e5dosdison91eis. São e;emlos de na1egadores: Dooglehrome/ Safari/ MoBilla Firefo;/ $n%erne% E;lorer/ 'era/e%c.



' (ue é Si%e+• G um con,un%o de ginas 8eb/ is%o é/ de

hier%e;%os acess91eis geralmen%e elo ro%ocoloH""P na in%erne%. ' con,un%o de %odos os sites 5blicos e;is%en%es come a 7orld 7ide 7eb. As

ginas num site são organiBadas a ar%ir de um=*# bsico/ ou s9%io/ onde 6ca a gina rincial/e geralmen%e residem no mesmo dire%2rio de umser1idor. As ginas são organiBadas den%ro dosite numa hierar(uia obser11el no =*#/ embora

as hierliga&es en%re elas con%rolem o modocomo o lei%or se aercebe da es%ru%ura global/modo esse (ue ode %er ouco a 1er com aes%ru%ura hierr(uica dos ar(ui1os do site.



' (ue e H"M#+H"M# Hyer"e;% Maru #anguage - #inguagem de Marcacao deHier%e;%o e a uma linguagem considerada a base de %odas asou%ras linguagens de desen1ol1imen%o de ro,e%os ara 7EI.om ela 1oce ode comar%ilhar fo%os/ 1ideos/ musicas/ %e;%os efaBer mui%as coisas.

A linguagem H"M# foi criada com a 1isao de (ue %odos osdisosi%i1os de1eriam ser caaBes de usar informacoes da 7eb:Ps com lacas de 1ideos e moni%ores de diferen%es resolucoes erofundidades de cores? %elefones celulares? disosi%i1os ararocessar en%rada e saida de 1oB? comu%adores com %a;a de%ransferencia al%a ou bai;a e assim or dian%e.

Foi a rimeira linguagem no se%or e e usada amlamen%e a%e osdias a%uais. Foi criada elo "im Ierners-#ee (uando ele%rabalha1a como es(uisador ara o E*) #abora%orio Euroeude Fisica de Par%iculas/ na Suica. Foi oulariBado eloaarecimen%o do bro8ser Mosaic/ criado or Marc Andreessen(uando ele es%uda1a na =ni1ersidade de $llinois.



Primeira Pagina em H"M#=ma agina bsica em H"M# e um ar(ui1o de %e;%osimles con%endo o %e;%o da agina e os comandosH"M# (ue de6nem a forma%a&ão das mesmas. 'scomandos são indicados en%re os marcadores

chamados "AD (ue 1em en%re os s9mbolos de < e>. A maioria dos comandos e usada em ares/sendo (ue (uando 1oc0 abre alguma "AD como/ ore;emlo/ a "AD JI'KL1oce recisara fecharree%indo a "AD assim: JNI'KL. A "AD com barra

N signi6ca (ue es%a fechando a (ue es%a sembarra.



riando sua rimeiragina H"M#.• Primeiramen%e crie uma as%a ara sal1ar as

aginas. Ke referencia na Area de %rabalhoKes%o.

• Semre dei;e os ar(ui1os do si%e mui%o bem

organiBados/ assim facili%a e mui%o odesen1ol1imen%o dele.

• Keois de criado uma as%a no Kes%o ou em(ual(uer ou%ro lugar de sua referencia abra oIloco de )o%as.

• Menu $niciarProgramasAcess2riosIloco de)o%as



riando sua rimeiragina H"M#.• Keois de aber%o digi%e o seguin%e codigo:Jh%mlJheadJ%i%le Minha Primeira Pgina em H"M#OOOJN%i%leJNheadJbodyJ alignQcen%erQ Essa é a rimeira ginaH"M#OOO JN

JNbodyJNh%ml



E;licando o (ue 1c feB+• Agora 1ou e;licar %udo o (ue 1oce escre1eu.• A "AD JH"M# indica (ue 1oce iniciou um

ar(ui1o H"M#.• A "AD JHEAK indica (ue 1oce abriu um

cabecalho.• A "AD J"$"#E (ue de1e ser usada den%ro do

cabecalho JHEAK/ ser1e ara colocar %i%ulo naagina/ e a(uela frase (ue aarece na barrinha

aBul do 7indo8s RP (uando a agina es%a aber%a.• A "AD JI'KL indica (ue se iniciou o coro daagina. E den%ro des%a "AD (ue 1ai boa ar%e das

"AD u%iliBadas ara faBer uma agina.



E;licando o (ue 1c feB+• A "AD J indica (ue abriu um no1o aragrafo. '

a%ribu%o A#$D) como o rorio nome diB ser1e araeseci6car o alinhamen%o. E E)"E* signi6ca (ue oalinhamen%o e no cen%ro. aso 1oce (ueira colocar

o %e;%o na es(uerda %ro(ue o E)"E* or #EF"/ ouor *$DH" ara a direi%a e ainda ode colocar =S"$FL ara dei;ar o %e;%o ,us%i6cado.

• Keois de digi%ado o codigo acima/ sal1e o ar(ui1ocomo rimeira.h%ml. #embre-se de digi%ar o .h%ml

no 6nal do nome do ar(ui1o. Pois se digi%ar aenasrimeira e ,a clicar em sal1ar o Iloco de no%as 1aiensar (ue 1oce es%a faBendo um ar(ui1o de %e;%ocomum/ e ira sal1ar em forma%o "R". Kei;e acodi6cacao como A)S$.



Elemen%os:• Jh%ml ... JNh%ml

• $ndicam/ resec%i1amen%e/ o in9cio e o 6m dodocumen%o

• Jhead ... JNhead• Se&ão do cabe&alho/ de6ni&es l2gicas sobre o

documen%o iden%i6ca&ão/ ca%aloga&ão/ %9%ulo/19nculos/ e%c.

• J%i%le ... JN%i%le:



E;emlo!

JH"M#JHEAK

J"$"#EMinha PginaJN"$"#E

JNHEAK

JNH"M#



Elemen%os

• Jbody ... JNbody• Ke6ni&ão de %odo o con%e5do do

documen%o (ue ser e;ibido elosna1egadores

• JhT ... JNhT• $den%i6ca&ão dos U n91eis de %9%ulos

diferen%es em um documen%o T !/ V/ W/X/ Y/ ou U

• J ... JN• Ke6nem um bloco de %e;%o como um

argrafo



E;emlo VJbodyJh!Iem ZindoOOOJNh!Essa é minha rimeira ginaJ' (ue 1oc0 achou dela+JNJNbody



Elemen%os do coro

• Jem ... JNem• Enfa%iBam o %e;%o em i%lico• e(ui1alen%e a Ji...JNi

•

Js%rong ... JNs%rong• Enfa%iBam o %e;%o em negri%o• e(ui1alen%e a Jb...JNb

• Jbr•

insere uma (uebra na linha do argrafo• u%iliBado ara ular linhas

• Jhr• insere uma linha horiBon%al no argrafo



E;emlo WJbodyJh!Iem ZindoOOOJNh!Js%rongEssaJNs%rong é minhaJemrimeiraJNem gina

J' (ue Ji1oc0JNi JbachouJNb dela+JNJhr



#iga&es e $magens• Ja hrefQ endere&o do linQ )ome do linJNa

• insere um lin• href reresen%a o endere&o

• Jimg srcQnome da imagemQ 8id%hQlarguraQ

heigh%Qal%uraQ• insere uma imagem• src reresen%a o nome do ar(ui1o• 8id%h [ a largura em i;els• heigh% [ al%ura em i;els



E;emlo XJonhe&a minha ginas fa1ori%asJNJa hrefQh%%:NNh%ml-color-codes.comNQores ara7ebJNaJbr

JahrefQh%%:NNaos%ilas.8iido%.comNhiermidiaQ"ecnologia Hierm9diaJNa



E;emlo YJhrJMinhas imagensJNJimg srcQP.,gQ 8id%hQVQ heigh%Q!YQ



E;erc9cio

• rie um documen%o H"M#/ no bloco deno%as/ con%endo as seguin%esinforma&es:

• abe&alho com %9%ulo: nome meu doseu s9%io• oro:

• Seu nome %9%ulo !• urso %9%ulo V• Ma%r9cula %9%ulo W• #is%a das discilinas cursadas• lins ara W ginas (ue 1oc0 gos%e

apresentação html -1

Documents