Prepara AV1 Tecnologias Para Internet I

TECNOLOGIAS

TECNOLOGIAS

P

P

ARA

ARA

INTERNET I

INTERNET I

ANTONIO MARIA CARNEIRO NETO

ANTONIO MARIA CARNEIRO NETO

Unidade I - O AMBIENTE INTERNET

Unidade I - O AMBIENTE INTERNET

Surgiment da Internet a!"# a Segunda Guerra Mundia$ Surgiment da Internet a!"# a Segunda Guerra Mundia$

 A T  A Teiaeia

O embrião do que hoje é

O embrião do que hoje é a maior rede de comunicação do planetaa maior rede de comunicação do planeta nasceu em setembro de !"!#

nasceu em setembro de !"!#

O $epartamento de $e%esa dos Estados

O $epartamento de $e%esa dos Estados &nidos ti'eram a ideia de&nidos ti'eram a ideia de criar um sistema de comunicação que não pudesse ser destru(do criar um sistema de comunicação que não pudesse ser destru(do por bombardeios eu %osse capa) de li*ar pontos estraté*icos+ por bombardeios eu %osse capa) de li*ar pontos estraté*icos+ como centros de pesquisas de

como centros de pesquisas de bases das ,orças Armadas#bases das ,orças Armadas# O !r%et

O !r%et ARPARPAA

O projeto %oi -nanciado pela Ad'anced Research .rojects A*enc/ O projeto %oi -nanciado pela Ad'anced Research .rojects A*enc/ 0AR.

0AR.A1+ 2r*ão respons3'el pelo A1+ 2r*ão respons3'el pelo desen'ol'imento de pesquisasdesen'ol'imento de pesquisas cient(-cas e tecnol2*icas para -ns militares do *o'erno norte4 cient(-cas e tecnol2*icas para -ns militares do *o'erno norte4 americano+ o que %e) com que a rede %osse

americano+ o que %e) com que a rede %osse bati)ada de Arpanet#bati)ada de Arpanet# A rede %uncionou pela primeira 'e)

A rede %uncionou pela primeira 'e) em janeiro de !56em janeiro de !56 interli*ando 7 computadores em locais distintos+ todos na

interli*ando 7 computadores em locais distintos+ todos na costacosta oeste dos E&A

Unidade I - O AMBIENTE INTERNET

Unidade I - O AMBIENTE INTERNET

Surgiment da Internet a!"# a Segunda Guerra Mundia$ Surgiment da Internet a!"# a Segunda Guerra Mundia$

 A T  A Teiaeia

O embrião do que hoje é

O embrião do que hoje é a maior rede de comunicação do planetaa maior rede de comunicação do planeta nasceu em setembro de !"!#

nasceu em setembro de !"!#

O $epartamento de $e%esa dos Estados

O $epartamento de $e%esa dos Estados &nidos ti'eram a ideia de&nidos ti'eram a ideia de criar um sistema de comunicação que não pudesse ser destru(do criar um sistema de comunicação que não pudesse ser destru(do por bombardeios eu %osse capa) de li*ar pontos estraté*icos+ por bombardeios eu %osse capa) de li*ar pontos estraté*icos+ como centros de pesquisas de

como centros de pesquisas de bases das ,orças Armadas#bases das ,orças Armadas# O !r%et

O !r%et ARPARPAA

O projeto %oi -nanciado pela Ad'anced Research .rojects A*enc/ O projeto %oi -nanciado pela Ad'anced Research .rojects A*enc/ 0AR.

0AR.A1+ 2r*ão respons3'el pelo A1+ 2r*ão respons3'el pelo desen'ol'imento de pesquisasdesen'ol'imento de pesquisas cient(-cas e tecnol2*icas para -ns militares do *o'erno norte4 cient(-cas e tecnol2*icas para -ns militares do *o'erno norte4 americano+ o que %e) com que a rede %osse

americano+ o que %e) com que a rede %osse bati)ada de Arpanet#bati)ada de Arpanet# A rede %uncionou pela primeira 'e)

A rede %uncionou pela primeira 'e) em janeiro de !56em janeiro de !56 interli*ando 7 computadores em locais distintos+ todos na

interli*ando 7 computadores em locais distintos+ todos na costacosta oeste dos E&A

O AMBIENTE INTERNET

O AMBIENTE INTERNET

Bre&e de#'ri() d !rt'$ TCP*IP Bre&e de#'ri() d !rt'$ TCP*IP Cer%+ juntamente com

Cer%+ juntamente com en*enheiro Ren*enheiro Robert 8ahn %oi obert 8ahn %oi respons3'el pelarespons3'el pela criação de um pequeno mecanismo que

criação de um pequeno mecanismo que permite dois computadorespermite dois computadores con'ersassem entre si+ no mesmo

con'ersassem entre si+ no mesmo idioma+ quando li*ados na rede#idioma+ quando li*ados na rede# Esse

Esse me'ani#mme'ani#m %oi %oi +ati,ad 'm !rt'$ TCP*IP+ati,ad 'm !rt'$ TCP*IP em in*l9sem in*l9s  T

 Trans%er Control : Inrans%er Control : Internet .rternet .rotocol 4 %e) com quotocol 4 %e) com que as di'ersas redes see as di'ersas redes se inte*rassem+ %ormando uma *i*antesca rede internacional de

inte*rassem+ %ormando uma *i*antesca rede internacional de redesredes de computadores+ chamada pela primeira 'e) de

de computadores+ chamada pela primeira 'e) de Internet#Internet# ;ur*iram a

;ur*iram a Bitnet .ue tran#!rta&a men#agen# de 'rreiBitnet .ue tran#!rta&a men#agen# de 'rrei

e$etr/ni'

e$etr/ni' e a  e a N;,net+ que permitia o uso interati'o deN;,net+ que permitia o uso interati'o de computador

computadores remotos e a troca de arqui'os e de es remotos e a troca de arqui'os e de mensa*ens de e4mensa*ens de e4 mail#

mail#

Mas a populari)ação da Internet em todo o

Mas a populari)ação da Internet em todo o mundo %oi amundo %oi a r$d ider$d ide

e+

e+ 0também chamada de <<<+ ou teia de alcance mundial1+0também chamada de <<<+ ou teia de alcance mundial1+ criada pelo %(sico in*l9s Tim =erners4>ee em !!?+ na

criada pelo %(sico in*l9s Tim =erners4>ee em !!?+ na ;u(ça+ no;u(ça+ no laborat2rio Europeu de .art(culas ,(sicas+ o CERN 0si*la de

laborat2rio Europeu de .art(culas ,(sicas+ o CERN 0si*la de ConseilConseil Européen pour la Recherche Nucléaire1#

O AMBIENTE INTERNET

O AMBIENTE INTERNET

O !rimeir na&egadr M#ai' O !rimeir na&egadr M#ai' .ouco depois da criação da <<<+ o

.ouco depois da criação da <<<+ o Centro Nacional paraCentro Nacional para Aplicaç@es em ;upercomputador

Aplicaç@es em ;upercomputadores dos es dos Estados &nidosEstados &nidos 0NC;A1+ deu in(cio  criação de um

0NC;A1+ deu in(cio  criação de um pro*rama que possibilitoupro*rama que possibilitou a 'isuali)aç

a 'isuali)ação do coão do conteBdo da nteBdo da <e<eb+ b+ oo M#ai'M#ai' # # O Mosaic %oi

O Mosaic %oi o primeiro pro*rama de na'e*ação 0ou broser1o primeiro pro*rama de na'e*ação 0ou broser1 da hist2ria# O so%tare %e) com que a internet abandonasse o da hist2ria# O so%tare %e) com que a internet abandonasse o miser3'el mundo das letrinhas 'erdes e *anhasse uma

miser3'el mundo das letrinhas 'erdes e *anhasse uma inter%ace *r3-ca+ ou seja+ um rosto# Essa no'a cara %e) com inter%ace *r3-ca+ ou seja+ um rosto# Essa no'a cara %e) com que as pessoas pudessem compartilhar teDtos e arqui'os+ que as pessoas pudessem compartilhar teDtos e arqui'os+ como ocorria até então+ mas também ima*ens+ sons e como ocorria até então+ mas também ima*ens+ sons e *r3-cos em locais de a

*r3-cos em locais de atuali)ação dinmica+ denominadostuali)ação dinmica+ denominados sites# Al*o semelhante s p3*inas de uma re'ista+ s2

sites# Al*o semelhante s p3*inas de uma re'ista+ s2 que naque na tela do computador#

O AMBIENTE INTERNET

O !rimeir 'ntat d +ra#i$ 'm a Internet 'rreu em 1 quando a ,undação de Amparo  .esquisa do estado de ;ão .aulo 0,apesp1+ li*ada  ;ecretaria Estadual de Ci9ncia e  Tecnolo*ia reali)ou a primeira coneDão  rede atra'és de uma

parceria com o ,ermilab+ um dos mais importantes centros de pesquisa cient(-ca dos Estados &nidos#

O Cn#"r'i r$d ide e+ 3C5

Con%orme C 0Cons2rcio <orld <ide <eb 0<FC1 é um

cons2rcio internacional criado em !G!+ no qual or*ani)aç@es -liadas+ uma equipe em tempo inte*ral e o pBblico trabalham  juntos para desen'ol'er padr@es para a <eb# >iderado pelo

in'entor da eb Tim =erners4>ee e o CEO Here/ Hae+ o <FC tem como missão Condu)ir a <orld <ide <eb para que atinja todo seu potencial+ desen'ol'endo protocolos e diretri)es que *arantam seu crescimento de lon*o pra)o#

Unidade II - INTRO6U78O AO 9TML:

Em 1 a C de'idiu .ue n) 'ntinuaria a e&$uir  9TML# O <utur era  =ML# Então o KTM> %oi con*elado na 'ersão 7#? e uma especi-cação %oi lançada com nome de LKTM>+ que era uma 'ersão do LM> do KTM> eDi*indo re*ras LM> de sintaDe como atributos com aspas+ al*umas ta*s com %echamento enquanto outras eram autocontidas#

Um !e.uen gru! n >!era+ entretanto+ n) e#ta&a 'n&en'id .ue  =ML era  <utur !ara td# # autre# ?e+ # Estes indi'(duos começaram um trabalho eDtra curricular em uma especi-cação pro'a de conceito que

estender os %ormul3rios KTM> sem quebrar a retrocompatibilidade# Aquela

especi-cação e'entualmente se tornou e+ @rm# 20+ subsequentemente %oi incorporado na especi-cação KTM>#

Em 6??" a <FC decidiu que tal'e) ti'esse sido otimista demais na esperança de que o mundo se mudasse para o LM># =oas ideias *eram implementadas e as mais rejeitadas independentemente de quem %osse a %onte e quem ela

representasse+ ou até mesmo onde elas %oram inicialmente debatida# =oas ideias serão adotadas no Titter+ blo*s e IRC#

NTRO6U78O AO 9TML:

$e'ido a especi-cação KTM>  est3 sendo desen'ol'ida tanto pela <Fc quanto a <KAT<+ h3 di%erentes 'ers@es da especi-cação# Con%orme abaiDo

????rg*TR*;tm$:   #na!#;t D'ia$ da C

Em 6??! a <FC parou de trabalhar no LKTM> 6#? e des'iou recursos para KTM> -cando claro que o KTM> ha'ia 'encido a batalha de -loso-as# O %ato de os *rupos de trabalho KTM> consistir em representantes de todas as %abricantes de na'e*adores+ também era importante# ;e os %abricantes esti'esse dispostos a implementar parte da especi-cação 0 como a indisposição da Microso%t para

implementar Pdialo*Q+ ou a oposição da Mo)illa ao PbbQ1 ela era remo'ida KicSson 0Ian KiDie KicSson+ l(der da Mo)illa que ajudou na especi-cação do KTM> 1 disse A realidade é que os %abricantes de na'e*adores t9m o 'eto de-niti'o em tudo na especi-cação+ j3 que se eles não a implementarem + a especi-cação não é nada além do trabalho de -cção 0

http::#ebstandarts#or*:6??!:?:F:inter'ie4ith4ian4hicSson4editor4o%4the4 html4especi-cation:

1# Muitos participantes acharam isto altamente desa*rad3'el Os %abricantes de na'e*adores tomaram de assalto nossa eb reclamaram com al*uma

INTRO6U78O AO 9TML:

Ainda mai# im!rtante  a ne'e##idade de um !adr) a+ert $i&re 0para utili)ar e li're para implementar1 que possa competir com padr@es propriet3rios como Adobe ,lash ou Microso%t ;il'erli*ht# Independente do que 'oc9 acha

destas tecnolo*ias ou empresas acreditamos que a <eb seja uma plata%orma muito 'ital  sociedade+ comércio e comunicaç@es para estar nas mãos de um %abricante# O quão di%erente teria pro*redido a Renascença se CaDton ti'esse mantido patente e monop2lio da %abricação de prensas de impressão 

N) .ue+re a e+

K3 eDatamente milh@es de p3*inas <eb j3 em uso por a(+ e é interati'o que elas continuem a ser reprodu)idas# Então o KTM> é em sua maioria é um deri'ati'o do KTM>7 que continua de-nir como os na'e*adores de'em lidar com

marcaç@es anti*as como P%ontQ+ PcenterQ e outras ta*s de apresentação+ pois milh@es de p3*inas eb as utili)am# Mas os autores não de'em utili)34las pois estão obsoletas

INTRO6U78O AO 9TML:

E#trutura Prin'i!a$ .rimeiro o $OCTU.E PVdoct/pe htmlQ

Note que se quer h3 um nBmero de 'ersão+ isto é tudo# Não é uma instrução para encantamento e$a  eigida !e$# na&egadre# .ue !re'i#am da !re#en(a d de um d'tH!e !ara ati&ar  md de !adre# + e esta strin* é a strin* mais curta que o %a) de maneira con-3'el#

Então precisamos de-nir a codi-cação de caracteres do documento não %a)9 lo pode resultar em um risco de se*urança obscuro porém real

INTRO6U78O AO 9TML:

W o elemento que comp@em a estrutura do documento KTM>+ este elemento é iniciado com o s(mbolo menor 0 P 1 e terminado com o s(mbolo maior 0 Q 1+ como por eDemplo Pdoct/peQ+ PhtmlQ+ Pdi'Q+ etc# As são di'ididas con%orme

cate*orias abaiDo O elemento root metadados ;cripts seç@es a*rupamento de conteBdo ;emnticas de n('el de teDto Ediç@es

ConteBdo incorporado  Tabelas

INTRO6U78O AO 9TML:

&ma TA pode conter atributos+ que são in%ormaç@es que alteram o comportamento da TA# Os atributos podem ser di'ididos em atributos

espec(-cos para cada TA e atributos *lobais que são comuns a todas as ta*s# Além das TAs+ eDistem outros elementos que ajudam na construção de

documentos KTM>+ que são o C;;+ o Ha'ascript# Uma +re&e deDni() de CSS

W uma abre'iação do termo Cascadin* ;t/le ;heet 0,olhas de Estilo em Cascata1# O C;; permite+ de uma %orma simples+ a a utili)ação de estilos 0cor do teDto+

tamanho e tipo da %onte1 ao documento KTM># Tem como -nalidade %ornecer ao na'e*ador a %orma como os elementos são apresentados#

INTRO6U78O AO 9TML:

Uma +re&e deDni() da $inguagem Ka&a#'ri!t

W uma lin*ua*em de pro*ramação que est3 locali)ado do lado cliente+ isto é+ no na'e*ador e tem como objeti'o controlar o KTM> e o C;; manipulando4os no documento KTM># Esta lin*ua*em é muito parecida com as lin*ua*ens CXX e  Ha'a+ permitindo inclusi'e a orientação a objetos# W mantida pela European

Computer Manu%acturerYs Association 0http::#ecmascript#or*: 1 e atualmente encontra4se na 'ersão #

O .ue  6OM 36'ument O+%e't Mde$5 u Mde$ de O+%et# d 6'ument J

W a inter%ace entre a lin*ua*em Ha'ascript e os objetos do KTM># =asicamente quando o documento KTM> é carre*ado pelo na'e*ador+ o mesmo -ca

arma)enado em uma estrutura hier3rquica em %orma de 3r'ore que pode ser %acilmente manipul3'el atra'és de comandos Ha'ascript#

Unidade III - INTRO6U78O  CONSTRU78O 6E PGINAS

ESTTICAS - TAGS

Tag# e#truturai# d 9TML:

Os elementos estruturais de-nem a %orma como o documento KTM> pode ser criado# ;ua utili)ação não é

obri*at2ria+ no entanto+ recomenda4se que sejam utili)ados em determinadas circunstncias dentro o documento#

PV$OCTU.E htmlQ Phtml lan*Z[en[Q   PheadQ Pmeta charsetZ[ut%4G[Q PtitleQThe KTM> $ocumentP:titleQ   P:headQ   Pbod/Q PpQThe KTM> contentP:pQ   P:bod/Q P:htmlQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

<HTML>

O elemento PKTM>Q representa a TA principal para a construção do documento KTM># W

apresentado abaiDo a estrutura de um documento KTM>#

Onde

PheadQ 4 Representa uma coleção de

metadados# Neste elemento são carre*adas as in%ormaç@es re%erentes ao documento+ como por eDemplo comandos C;; e Ha'ascript#

PtitleQ 4 >ocali)ado dentro do PheadQ+ representa o t(tulo do documento#

Pbod/Q 4 >ocali)ado no mesmo n('el do

PheadQ+ este elemento representa o conteBdo principal da p3*ina# Aqui estão locali)ados todos os comandos necess3rios para a criação do

documento KTM># PV$OCTU.E htmlQ Phtml lan*Z[en[Q   PheadQ Pmeta charsetZ[ut%4G[Q PtitleQThe KTM> $ocumentP:titleQ   P:headQ   Pbod/Q PpQThe KTM> contentP:pQ   P:bod/Q P:htmlQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

<SECTION>

O elemento PsectionQ representa uma seção *enérica dentro de um documento# Este

elemento pode conter um a*rupamento de

teDtos com '3rios cap(tulos+ seç@es numeradas+ etc# No eDemplo abaiDo é apresentado um

arti*o contendo um assunto principal e dentro deste assunto '3rias seç@es com assuntos distintos#

EDemplo de utili)ação

ParticleQ Ph*roupQ

 PhQ>i'ro sobre KTM>P:hQ

 Ph6QComo criar uma p3*ina P:h6Q P:h*roupQ

PpQO curso de KTM> é muito importante P:pQ PsectionQ PhQO KTM> P:hQ PpQ;ur*imento do KTM> P:pQ P:sectionQ PsectionQ   PhQTa*sP:hQ PpQComandos de criação de p3*inas#P:pQ P:sectionQ P:articleQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

<NAV>

Este elemento é a seção onde -cam as in%ormaç@es de na'e*ação de p3*ina# eralmente nesta seção são colocados os li*aç@es 0 linSs internos1 para a pr2pria p3*ina ou li*aç@es eDternas para outras p3*inas de sites eDternos# EDemplo de utili)ação PheaderQ   Pna'Q PhQMenu .rincipalP:hQ   PulQ   PliQPa hre%Z[articles#html[Q(ndice de arti*osP:aQP:liQ PliQPa hre%Z[ http::#estacio#br[Q ;ite da Est3cioP:aQP:liQ   P:ulQ  P:na'Q P:headerQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

<ARTICLE>

W um arti*o independente dentro de um teDto+ este elemento pode estar ou não dentro de um elemento PsectionQ# Ima*ine um jornal com as seç@es de esportes+ %o%ocas+ etc# $entro de cada seção eDistem '3rios arti*os sobre teDtos

espec(-cos+ por eDemplo+ na seção de esportes pode ter um arti*o %alando sobre o time A+ outro sobre time = e o outro sobre o time C# &m arti*o pode conter um elemento PheaderQ que é o t(tulo e um elemento P%ooterQ que é o rodapé do elemento# EDemplo de utili)ação ParticleQ PheaderQ PhQNo'a \it2ria VP:hQ PpQPtime pubdate datetimeZ[6??!4?4?!T76G4 ?G??[QP:timeQP:pQ P:headerQ

PpQO time A *anhou no'amente+ se continuar assim ser3 l(der do

campeonato###P:pQ   PpQ###P:pQ P%ooterQ Pa hre%Z[ commentsZ[QComent3riosP:aQ P:%ooterQ P:articleQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

<ASIDE>

Neste elemento estão contidas as in%ormaç@es que não estão relacionadas diretamente com o teDto# Como por eDemplo comerciais pa*os+ linSs promocionais+ etc#

EDemplo de utili)ação

PasideQ

PhQTenha uma *raduação VVV P:hQ PpQPa hre%Zhttp::#estacio#brQ Estude na est3cioP:aQP:pQ

P:asideQ

PKQ+ PK6Q+ PKFQ+ PK7Q+ PKQ+ e PK"Q

Elementos que representam o t(tulo de cada seção+ sendo PhQ o maior t(tulo e Ph"Q o menor t(tulo# EDemplo de utili)ação Pbod/Q PhQMaior P:hQ Ph6QMenor 6 P:h6Q PhFQMenor F P:hFQ Ph7QMenor 7 P:h7Q PhQMenor  P:hQ Ph"QMenor " P:h"Q P:bod/Q

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

<HGROUP>

Elemento usado em conjunto com as TAs anteriores para delimitar o t(tulo da seção# EDemplo de utili)ação

Ph*roupQ

 PhQ>i'ro sobre KTM>P:hQ

 Ph6QComo criar uma p3*ina P:h6Q P:h*roupQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

<HEADER>

 Também utili)ado para delimitar o t(tulo da seção+ trabalha em conjunto com os elementos anteriores+ no entanto+ não é obri*at2rio#

EDemplo de utili)ação

ParticleQ PheaderQ   Ph*roupQ

PhQ>i'ro sobre KTM>P:hQ

Ph6QComo criar uma p3*ina P:h6Q   P:h*roupQ

PpQO curso de KTM> é muito importante P:pQ P:headerQ  PsectionQ PhQO KTM> P:hQ PpQ;ur*imento do KTM> P:pQ P:sectionQ PsectionQ   PhQTa*sP:hQ

PpQComandos de criação de p3*inas#P:pQ P:sectionQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

<FOOTER>

Este elemento contém basicamente as

in%ormaç@es sobre o

conteBdo da seção+ como por eDemplo o autor+ linSs relacionados+ etc# EDemplo de utili)ação P%ooterQ   Pna'Q PpQPa hre%Z[:credits#html[QCréditosP:aQ  Pa hre%Z[:tos#html[QTermos >e*aisP:aQ  Pa her%Z[:indeD#html[QMais In%ormaç@esP:aQ   P:pQ   P:na'Q P:%ooterQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

<P>

Elemento que representa um par3*ra%o# EDemplo de utili)ação

<HR>

Elemento que representa uma quebra de par3*ra%o ou tema eDibindo uma linha hori)ontal#

EDemplo de utili)ação

<PRE>

Este elemento apresenta um bloco de teDto pré4 %ormatado+ preser'ando seu conteBdo#

EDemplo de utili)ação

PpQ Isto é um par3*ra%o P:pQ Phr :Q

PpreQ >ine #

>ine 6 is to the ri*ht o% line # >ine F ali*ns ith line 6#

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

<BLOCKQUOTE>

 Tem como %unção eDibir o teDto indicando de qual re%er9ncia %oi retirado 0citação1#

EDemplo de utili)ação

<FIGURE>

Este elemento permite de-nir lo*icamente as in%ormaç@es de uma ima*em# Trabalha com P-*captionQ e Pim*Q#

EDemplo de utili)ação Onde

P-*captionQ 4 Elemento que permite dar um t(tulo a uma ima*em#

Pim*Q 4 Elemento que eDibe a ima*em# Neste eDemplo o atributo src indica o endereço e o tipo da ima*em e o atributo alt é mostrado caso a ima*em não possa ser eDibida#

PblocSquote citeZ[http::#quote#com:sample#ht ml[Q  PpQElemento teDtual# P:pQ P:blocSquoteQ P-*ureQ  P-*captionQ,oto de ,ériasP:-*captionQ

 Pim* srcZ[stata#jp*[ altZ[,oto das %érias no Rio de Haneiro[Q

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

<DIV>

Elemento que representa um bloco de teDto# As  TAs Pbod/Q+ PheaderQ+ P%ooterQ+ etc+

possuem re*ras de utili)ação bem de-nidas# Caso o desen'ol'edor necessite da criação de um bloco de teDto que não se encaiDe em

al*uma re*ra de-na de bloco+ pode4se utili)ar o recurso da Pdi'Q# A Pdi'Q é um bloco de teDto que pode ser usado em qualquer lu*ar do

documento# eralmente a Pdi'Q é usada para dia*ramar o la/out de um site#

EDemplo de utili)ação

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

<A>

Elemento que representa um hiperlinS Atributos

hre% Z A &R> que %ornece o destino do hiperlinS#

tar*et Z nome de na'e*ação ao conteDto ou pala'ra4cha'es se*uintes strin*s literais []blanS[+ []sel%[+ []parent[+ ou []top[# EDemplo de utili)ação

PpQ Pa

hre%Z[http::en#iSipedia#or*:iSi:Cam bera[QCamberaP:aQ

is the capital cit/ o% Australia# P:pQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

<EM>

Este elemento en%ati)a um bloco de teDto+ colocando4o em it3lico#

EDemplo de utili)ação

PpQPemQCatsP:emQ are cute animals#P:pQ

<STRONG>

Este elemento trans%orma um teDto simples em um teDto de certa importncia+ colocando4o em ne*rito#

EDemplo de utili)ação

PpQPemQCatsP:emQ are cute animals#P:pQ

PpQPstron*QPstron*Q<arnin*#P:stro n*Q This dun*eon is

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

<SMALL>

Este elemento diminui o tamanho do teDto# EDemplo de utili)ação

<S>

Este elemento trans%orma o teDto em um conteBdo não rele'ante#

EDemplo de utili)ação

P%ooterQ

 PpQPsmallQ^ cop/ri*ht 6?? EDample Corp#P:smallQP:pQ P:%ooterQ

PpQ=u/ our Iced Tea and >emonadeV P:pQ

PpQPsQRecommended retail price _F#!! per bottleP:sQP:pQ

PpQPstron*QNo sellin* %or just _6#!! a bottleVP:stron*QP:pQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

<CITE>

Este elemento trans%orma o teDto em uma citação#

<Q>

Este elemento coloca aspas em um bloco de teDto#

EDemplo de utili)ação

<CODE>

Este elemento representa um %ra*mento de c2di*o de computador#

EDemplo de utili)ação

PpQM/ %a'orite mo'ie is PciteQstar arsP:citeQ#P:pQ

PpQThe man said PqQThe quote is input hereP:qQ#P:pQ

PpreQ  PcodeQ

 %unction .anel0element+ canClose+ closeKandler1 ` this#element Z element this#canClose Z canClose this#closeKandler Z %unction 01 ` i% 0closeKandler1 closeKandler01     P:codeQ P:preQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

<SPAN>

Elemento de utili)ação *enérica id9ntico ao elemento P$I\Q#

EDemplo de utili)ação

<BR>

Este elemento representa uma quebra de linha# EDemplo de utili)ação

PspanQ Teste de eDemplo P:spanQ PpQF6 \assar ;treetPbr :Q

Cambrid*e+ MA ?6F! P:pQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

;ão elementos de ordenação de teDto podendo ser numeradas e não numeradas#

<OL>

$e-ne uma lista numerada# Os itens da listas são de-nidos pela ta* $iQ

EDemplo de utili)ação Atributos da lista

re'ersed Z altera a ordem da lista# start Z \alor inicial da lista

t/pe Z Altera o numerador da lista0 V  A  a  I  i1# PolQ  PliQeDemploP:liQ  PliQeDemplo6P:liQ  PliQeDemploFP:liQ P:olQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

<UL>

$e-ne uma lista não numerada# &tili)a os mesmos atributos de PolQ#

EDemplo de utili)ação

<DL>

Elemento que teDtual que eDibe uma lista de de-niç@es+ com termos espec(-cos# Trabalha com as ta*s PdtQ termo a ser eDibido e PddQ elementos do termo# EDemplo de utili)ação PulQ  PliQeDemploP:liQ  PliQeDemplo6P:liQ  PliQeDemploFP:liQ P:ulQ PdlQ PdtQCarrosP:dtQ  PddQ&noP:ddQ PddQolP:ddQ  PdtQMotosP:dtQ  PddQKondaP:ddQ PddQUamahaP:ddQ P:dlQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS

-TABELAS

Ta+e$a#

;ão elementos que representam dados de uma ou mias dimens@es# .odem ser utili)adas para eDibição de tabelas de preços de um site#

<TABLE>

Elemento b3sico para criação da tabela# EDemplo de utili)ação PtableQ  PcaptionQ>ista de preçosP:captionQ  PtheadQ   PtrQ   PthQ;er'içoP:thQ   PthQTempoP:thQ   PthQ\alorP:thQ   P:trQ  P:theadQ Ptbod/Q   PtrQ PthQCorte de CabeloP:thQ PtdQ? MinP:tdQ PtdQR_ +??P:tdQ   P:trQ   PtrQ   PthQManicureP:thQ PtdQF? MinP:tdQ PtdQR_ 6?+??P:tdQ P:trQ PtrQ   PthQ.edicureP:thQ PtdQF? MinP:tdQ PtdQR_ ?+??P:tdQ P:trQ  P:tbod/Q P:tableQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS

-TABELAS

Ta+e$a# Onde

<CAPTION>

Elemento que indica o t(tulo da tabela#

<THEAD>

Neste elemento encontram4se as linhas que %ormam o t(tulo de cada coluna da tabela#

<TBODY>

Neste elemento encontram4se os dados de cada coluna#

<TFOOT>

Neste elemento encontram4se as in%ormaç@es -nais de cada coluna#

<TR>

Elemento que cria uma linha na tabela#

<TD>

Elemento que cria uma coluna na tabela#

<TH>

Este elemento é id9ntico ao PT$Q+ no entanto s2 é utili)ado dentro da TA de t(tulo PTKQ#

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS

-TABELAS

de

Anteriormente+ para a eDibição de '(deos em um documento KTM>+ os desen'ol'edores utili)a'am a TA PobjectQ que é um container *enérico para incorporar objetos estran*eiros 0 plu*ins de terceiros 1 a p3*ina# $e'ido a inconsist9ncia dos na'e*adores+ era necess3rio replicar '3rias linhas de c2di*o para que o '(deo pudesse ser eDibido# O KTM>  pro'9 a TA P'ideoQ para eliminar os problemas de incompatibilidade entre os na'e*adores#

<VIDEO>

Elemento que eDibe '(deos ou -lmes# Atributos

autopla/ Z [autopla/[ ou [[ 0strin* 'a)ia1 ou sem atributo#  Todas 'e) que a p3*ina %or recarre*ada+ o '(deo se iniciar3#

controls Z [controls[ ou [[ 0strin* 'a)ia1 ou sem atributo# ;er3 eDibido a inter%ace de controle de '(deo#

loop Z [loop[ ou [[ 0strin* 'a)ia1 ou sem atributo# O '(deo ser3 passado cont(nuamente#

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS

-TABELAS

;eu na'e*ador não suporta '(deos em KTM> 

P:'ideoQ de

poster Z Endereço de uma ima*em ser3 eDibida enquanto o '(deo não carre*a#

hei*ht Z Altura do '(deo em piDels idth Z >ar*ura do '(deo em piDels

muted Z [muted[ or [[ou [[ 0strin* 'a)ia1 ou sem atributo# Estado do '(deo de%ault com o 3udio desli*ado#

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS

-TABELAS

Audi

<AUDIO>

Elemento que permite tocar um arqui'o de 3udio# Com atributos semelhantes ao P'ideoQ# EDemplo de utili)ação

Paudio controls

srcZ[http::media#F#or*:6??:?5:bun n/:?74$eath]=ecomes],ur#o*a[Q

;eu na'e*ador não suporta 3udio em KTM> 

Unidade I - LINGUAGEM 6E MARCA78O E ESTILOS - CSS

Con%orme <FC+ Cascadin* ;t/le ;heets 0C;;1 é um mecanismo simples para adicionar estilo 0por eDemplo+ %ontes+ cores+ espaçamento 1 a documentos da <eb# O C;; é um conjunto de comandos que alteram o comportamento dos elementos KTM> #

42 Sintae

A re*ra C;; é a unidade b3sica de uma %olha de estilo# Nessa de-nição o termo unidade b3sica si*ni-ca a menor porção de c2di*o capa) de produ)ir e%eito de estili)ação# &ma re*ra C;; é composta de duas partes o seletor e a declaração# A declaração compreende uma propriedade e um 'alor#

Onde

seletor ` propriedade 'alor  ;eletor é o al'o da re*ra C;;# $eclaração $etermina a re*ra# EDemplo de utili)ação

h+ h6 `color *reen  hF+ h7  h `color red  h" `color blacS 

Unidade I - LINGUAGEM 6E MARCA78O E ESTILOS - CSS

4 Se$e() de e$ement#

No C;;+ a seleção de elementos pode 'ariar de uma %orma simpli-cada até padr@es conteDtuais ricos#

 Tipos de seleção

A*rupamento 4 o C;; permite a*rupar declaraç@es repetidas# h ` %ont4%amil/ sans4seri% 

h6 ` %ont4%amil/ sans4seri%  hF ` %ont4%amil/ sans4seri%  W equi'alente a

Unidade I - LINGUAGEM 6E MARCA78O E ESTILOS - CSS

&m elemento pode estar contido dentro de outro elemento# EDemplo

PKQEste teDto é PEMQmuitoP:EMQ importanteP:KQ

h ` color red  : indica que todos os elementos h possuem a cor 'ermelha : em ` color red  : indica que todos os elementos em possuem a cor 'ermelha : h em ` color blue  : indica que os elementos em contidos em um elemento h possuem a cor a)ul :

42 Se$etre# D$;#

&m elemento -lho é carateri)ado quando os elementos são separados por [Q[# EDemplo

di' olQli p `color *reen 

Neste eDemplo+ todos os elementos p serão de cor 'erde quando esti'erem

Unidade I - LINGUAGEM 6E MARCA78O E ESTILOS - CSS

Especi-ca re*ras para os elementos que possuem determinado atributo# EDemplo

spanhelloZ[Cle'eland[f*oodb/eZ[Columbus[f ` color blue 

A re*ra ser3 aplicada a todos os elementos span que possuem o atributo helloZ[Cle'eland[ e o atributo *oodb/eZ[Columbus[#

44 Se$etre# !r '$a##e#

&ma classe permite atribuir um conjunto de re*ras a um determinado elemento# W determinado por aster(stico ponto 0#1 ou simplesmente ponto 0# 1#

EDemplo

#pastoral ` color *reen  : todos os elementos com a classegZpastoral : ou

#pastoral ` color *reen  : todos os elementos com a classegZpastoral : 4: Se$etre# !r I6

O atributo I$ permite identi-car um elemento Bnico no documento KTM># .ara selecionar este elemento basta utili)ar o caracter  se*uindo pelo nome do elemento#

EDemplo