prepara av1 tecnologias para internet i
Post on 06-Jul-2018
218 Views
Preview:
TRANSCRIPT
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
1/41
TECNOLOGIAS PAINTERNET IANTONIO MARIA CARNEIR
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
2/41
Unidade I - O AMBIENTE INTERNET
CCT0412 - TECNOLOGIA PARA INTERNET I
Surgiment da Internet a!"# a Segunda Guerra Mundia$ A Teia
O embrião do que hoje é a maior rede de comunicação do planeta
nasceu em setembro de !"!#O $epartamento de $e%esa dos Estados &nidos ti'eram a ideia decriar um sistema de comunicação que não pudesse ser destru(dopor bombardeios eu %osse capa) de li*ar pontos estraté*icos+como centros de pesquisas de bases das ,orças Armadas#
O !r%et ARPAO projeto %oi -nanciado pela Ad'anced Research .rojects A*enc/
0AR.A1+ 2r*ão respons3'el pelo desen'ol'imento de pesquisascient(-cas e tecnol2*icas para -ns militares do *o'erno norte4americano+ o que %e) com que a rede %osse bati)ada de Arpanet#A rede %uncionou pela primeira 'e) em janeiro de !56interli*ando 7 computadores em locais distintos+ todos na costaoeste dos E&A
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
3/41
O AMBIENTE INTERNET
CCT0412 - TECNOLOGIA PARA INTERNET I
Bre&e de#'ri() d !rt'$ TCP*IPCer%+ juntamente com en*enheiro Robert 8ahn %oi respons3'el pelacriação de um pequeno mecanismo que permite dois computadores
con'ersassem entre si+ no mesmo idioma+ quando li*ados na rede#Esse me'ani#m %oi +ati,ad 'm !rt'$ TCP*IP em in*l9s Trans%er Control : Internet .rotocol 4 %e) com que as di'ersas redes seinte*rassem+ %ormando uma *i*antesca rede internacional de redesde computadores+ chamada pela primeira 'e) de Internet#;ur*iram a Bitnet .ue tran#!rta&a men#agen# de 'rreie$etr/ni' e a N;,net+ que permitia o uso interati'o decomputadores remotos e a troca de arqui'os e de mensa*ens de e4
mail#Mas a populari)ação da Internet em todo o mundo %oi a r$d idee+ 0também chamada de
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
4/41
O AMBIENTE INTERNET
CCT0412 - TECNOLOGIA PARA INTERNET I
O !rimeir na&egadr M#ai'
.ouco depois da criação da
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
5/41
O AMBIENTE INTERNET
CCT0412 - TECNOLOGIA PARA INTERNET I
A rede n Bra#i$O !rimeir 'ntat d +ra#i$ 'm a Internet 'rreu em1 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 umaparceria com o ,ermilab+ um dos mais importantes centros depesquisa cient(-ca dos Estados &nidos#
O Cn#"r'i r$d ide e+ 3C5Con%orme C 0Cons2rcio
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
6/41
Unidade II - INTRO6U78O AO 9TML:
CCT0412 - TECNOLOGIA PARA INTERNET I
;i#t"ria d 9TML:
Em 1 a C de'idiu .ue n) 'ntinuaria a e&$uir 9TML # O %oi con*elado na 'ersão 7#? e uma especi-cação %oilançada com nome de LKTM>+ que era uma 'ersão do LM> do KTM> eDi*indore*ras LM> de sintaDe como atributos com aspas+ al*umas ta*s com %echamentoenquanto outras eram autocontidas#Um !e.uen gru! n >!era+ entretanto+ n) e#ta&a 'n&en'id .ue =ML era sem quebrar a retrocompatibilidade# Aquela
especi-cação e'entualmente se tornou e+ @rm# 20+ subsequentemente %oiincorporado na especi-cação KTM>#Em 6??" a # =oas ideias *eram implementadas e asmais rejeitadas independentemente de quem %osse a %onte e quem elarepresentasse+ ou até mesmo onde elas %oram inicialmente debatida# =oas ideiaserão adotadas no Titter+ blo*s e IRC#
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
7/41
NTRO6U78O AO 9TML:
CCT0412 - TECNOLOGIA PARA INTERNET I
;i#t"ria d 9TML:
$e'ido a especi-cação KTM> est3 sendo desen'ol'ida tanto pela 1 disse A realidade é que os %abricantes de na'e*adores t9m o 'etode-niti'o em tudo na especi-cação+ j3 que se eles não a implementarem + aespeci-cação não é nada além do trabalho de -cção 0http::#ebstandarts#or*:6??!:?:F:inter'ie4ith4ian4hicSson4editor4o%4thehtml4especi-cation:1# Muitos participantes acharam isto altamente desa*rad3'el Os %abricantes dena'e*adores tomaram de assalto nossa eb reclamaram com al*uma
justi-cati'a#
http://www.webstandarts.org/2009/05/13/interview-with-ian-hickson-editor-of-the-html5-especification/http://www.webstandarts.org/2009/05/13/interview-with-ian-hickson-editor-of-the-html5-especification/http://www.webstandarts.org/2009/05/13/interview-with-ian-hickson-editor-of-the-html5-especification/http://www.webstandarts.org/2009/05/13/interview-with-ian-hickson-editor-of-the-html5-especification/
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
8/41
INTRO6U78O AO 9TML:
CCT0412 - TECNOLOGIA PARA INTERNET I
A D$#Da !r trF# d 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 propriet3rioscomo Adobe ,lash ou Microso%t ;il'erli*ht# Independente do que 'oc9 achadestas tecnolo*ias ou empresas acreditamos que a
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
9/41
INTRO6U78O AO 9TML:
CCT0412 - TECNOLOGIA PARA INTERNET I
E#trutura Prin'i!a$
.rimeiro o $OCTU.EPVdoct/pe htmlQ
Note que se quer h3 um nBmero de 'ersão+ isto é tudo# Não é uma instruçãopara encantamento e$a eigida !e$# na&egadre# .ue !re'i#am da!re#en(a d de um d'tH!e !ara ati&ar md de !adre#+ 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
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
10/41
INTRO6U78O AO 9TML:
CCT0412 - TECNOLOGIA PARA INTERNET I
O .ue uma TAG 9TMLJ
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+ compor eDemplo Pdoct/peQ+ PhtmlQ+ Pdi'Q+ etc# As são di'ididas con%ormecate*orias abaiDo
O elemento rootmetadados;criptsseç@es
a*rupamento de conteBdo;emnticas de n('el de teDtoEdiç@esConteBdo incorporado
Tabelas,ormul3rios Interati'o
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
11/41
INTRO6U78O AO 9TML:
CCT0412 - TECNOLOGIA PARA INTERNET I
Atri+ut# de uma TAG
&ma TA pode conter atributos+ que são in%ormaç@es que alteram o
comportamento da TA# Os atributos podem ser di'ididos em atributosespec(-cos para cada TA e atributos *lobais que são comuns a todas as ta*s#Além das TAs+ eDistem outros elementos que ajudam na construção dedocumentos 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 aona'e*ador a %orma como os elementos são apresentados#
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
12/41
INTRO6U78O AO 9TML:
CCT0412 - TECNOLOGIA PARA INTERNET I
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 nodocumento 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 EuropeanComputer Manu%acturerYs Association 0http::#ecmascript#or*:1 e atualmenteencontra4se na 'ersão #
O .ue 6OM 36'ument O+%e't Mde$5 u Mde$ de O+%et# d6'ument J
W a inter%ace entre a lin*ua*em Ha'ascript e os objetos do KTM># =asicamentequando 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#
http://www.ecmascript.org/http://www.ecmascript.org/
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
13/41
Unidade III - INTRO6U78O CONSTRU78O 6E PGINASESTTICAS - TAGS
CCT0412 - TECNOLOGIA PARA INTERNET I
Tag# e#truturai# d 9TML:
Os elementos estruturais de-nem a%orma como o documento KTM> podeser criado# ;ua utili)ação não éobri*at2ria+ no entanto+ recomenda4seque sejam utili)ados em determinadascircunstncias dentro o documento#
PV$OCTU.E htmlQ
Phtml lan*Z[en[Q PheadQ Pmeta charsetZ[ut%4 PtitleQThe KTM> $oc P:headQ Pbod/Q PpQThe KTM> conte P:bod/QP:htmlQ
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
14/41
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS - TAGS
CCT0412 - TECNOLOGIA PARA INTERNET I
O elemento PKTM>Q representa a TA principalpara a construção do documento KTM># Wapresentado abaiDo a estrutura de um
documento KTM>#
OndePheadQ 4 Representa uma coleção demetadados# Neste elemento são carre*adas asin%ormaç@es re%erentes ao documento+ como poreDemplo 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 doPheadQ+ este elemento representa o conteBdoprincipal da p3*ina# Aqui estão locali)ados todosos comandos necess3rios para a criação dodocumento KTM>#
PV$OCTU.E htmlQ
Phtml lan*Z[en[Q PheadQ Pmeta charsetZ[ut% PtitleQThe KTM> $o P:headQ Pbod/Q PpQThe KTM> conte P:bod/QP:htmlQ
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
15/41
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS - TAGS
CCT0412 - TECNOLOGIA PARA INTERNET I
O elemento PsectionQ representa uma seção
*enérica dentro de um documento# Esteelemento pode conter um a*rupamento deteDtos com '3rios cap(tulos+ seç@es numeradas+etc# No eDemplo abaiDo é apresentado um
arti*o contendo um assunto principal e dentrodeste assunto '3rias seç@es com assuntosdistintos#EDemplo de utili)ação
ParticleQPh*roupQ PhQ>i'ro sobre KTM>P:
Ph6QComo criar uma p3P:h*roupQPpQO curso de KTM> é mimportante P:pQPsectionQ PhQO KTM> P:hQ PpQ;ur*imento do KTMP:sectionQ
PsectionQ PhQTa*sP:hQ PpQComandos de criaçp3*inas#P:pQP:sectionQP:articleQ
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
16/41
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS - TAGS
CCT0412 - TECNOLOGIA PARA INTERNET I
Este elemento é a seção onde -cam asin%ormaç@es de na'e*ação de p3*ina#eralmente nesta seção são colocados osli*aç@es 0 linSs internos1 para a pr2pria p3*inaou li*aç@es eDternas para outras p3*inas desites eDternos#EDemplo de utili)ação
PheaderQ
Pna'Q PhQMenu .rincipalP PulQ PliQPahre%Z[articles#html[Q(narti*osP:aQP:liQ PliQPa hre%Z[http::#estacio#br[Q
Est3cioP:aQP:liQ P:ulQ P:na'QP:headerQ
http://www.estacio.br/http://www.estacio.br/
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
17/41
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS - TAGS
CCT0412 - TECNOLOGIA PARA INTERNET I
W um arti*o independente dentro de um teDto+
este elemento pode estar ou não dentro de umelemento PsectionQ# Ima*ine um jornal com asseç@es de esportes+ %o%ocas+ etc# $entro de cadaseção eDistem '3rios arti*os sobre teDtosespec(-cos+ por eDemplo+ na seção de esportespode ter um arti*o %alando sobre o time A+ outrosobre time = e o outro sobre o time C# &m arti*opode conter um elemento PheaderQ que é ot(tulo e um elemento P%ooterQ que é o rodapédo elemento#EDemplo de utili)ação
ParticleQ
PheaderQ PhQNo'a \it2ria VP PpQPtime pubdatedatetimeZ[6??!4?4?!?G??[QP:timeQP:pQP:headerQ PpQO time A *anhoucontinuar assim ser3 l(d
campeonato###P:pQ PpQ###P:pQP%ooterQ Pa hre%Z[commentsZ[QComenP:%ooterQP:articleQ
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
18/41
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS - TAGS
CCT0412 - TECNOLOGIA PARA INTERNET I
Neste elemento estão contidas as in%ormaç@esque não estão relacionadas diretamente com oteDto# Como por eDemplo comerciais pa*os+linSs promocionais+ etc#EDemplo de utili)ação
PasideQPhQTenha uma *radPpQPa hre%Zhttp::Estude na est3cioP:aQP:asideQPKQ+ PK6Q+ PKFQ+ PK"QElementos que represcada seção+ sendo Phe Ph"Q o menor t(tuloEDemplo de utili)ação
Pbod/QPhQMaior P:hQPh6QMenor 6 P:h6QPhFQMenor F P:hFQPh7QMenor 7 P:h7QPhQMenor P:hQPh"QMenor " P:h"QP:bod/Q
http://www.estacio.br/http://www.estacio.br/
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
19/41
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
20/41
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS - TAGS
CCT0412 - TECNOLOGIA PARA INTERNET I
Também utili)ado para delimitar o t(tulo da
seção+ trabalha em conjunto com os elementosanteriores+ no entanto+ não é obri*at2rio#EDemplo de utili)ação
ParticleQPheaderQ Ph*roupQ PhQ>i'ro sobre KTM>P Ph6QComo criar uma p3
P:h*roupQPpQO curso de KTM> é mP:pQP:headerQ PsectionQ PhQO KTM> P:hQ PpQ;ur*imento do KTMP:sectionQ
PsectionQ PhQTa*sP:hQ PpQComandos de criaçP:sectionQP:articleQ
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
21/41
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS - TAGS
CCT0412 - TECNOLOGIA PARA INTERNET I
Este elemento contémbasicamente asin%ormaç@es sobre oconteBdo da seção+ comopor eDemplo o autor+ linSsrelacionados+ etc#EDemplo de utili)ação
P%ooterQ Pna'Q PpQPa hre%Z[:credits#html[QCrédit Pa hre%Z[:tos#html[QTermos >e Pa her%Z[:indeD#html[QMais In P:pQ P:na'Q
P:%ooterQ
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
22/41
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS - TAGS
CCT0412 - TECNOLOGIA PARA INTERNET I
Tag# Tetuai#
Elemento que representa um par3*ra%o#EDemplo de utili)ação
Elemento que representa uma quebra depar3*ra%o ou tema eDibindo uma linhahori)ontal#EDemplo de utili)ação
Este elemento apresenta um bloco de teDto pré4%ormatado+ preser'ando seu conteBdo#EDemplo de utili)ação
PpQ Isto é um par3*ra%
Phr :Q
PpreQ>ine # >ine 6 is to the ri >ine F ali*ns ithP:preQ
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
23/41
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS - TAGS
CCT0412 - TECNOLOGIA PARA INTERNET I
Tag# Tetuai#
Tem como %unção eDibir o teDto indicando dequal re%er9ncia %oi retirado 0citação1#
EDemplo de utili)ação
Este elemento permite de-nir lo*icamente asin%ormaç@es de uma ima*em# Trabalha comP-*captionQ e Pim*Q#EDemplo de utili)ação
OndeP-*captionQ 4 Elemento que permite dar umt(tulo a uma ima*em#Pim*Q 4 Elemento que eDibe a ima*em# NesteeDemplo o atributo src indica o endereço e o tipoda ima*em e o atributo alt é mostrado caso aima*em não possa ser eDibida#
PblocSquote
citeZ[http::#quoteml[Q PpQElemento teDtual# P:blocSquoteQ
P-*ureQ P-*captionQ,oto de,ériasP:-*captionQ
Pim* srcZ[stata#jp*[ a%érias no Rio de HaneiroP:-*ureQ
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
24/41
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS - TAGS
CCT0412 - TECNOLOGIA PARA INTERNET I
Tag# Tetuai#
Elemento que representa um bloco de teDto# As TAs 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 deum bloco de teDto que não se encaiDe emal*uma re*ra de-na de bloco+ pode4se utili)ar orecurso da Pdi'Q# A Pdi'Q é um bloco de teDtoque pode ser usado em qualquer lu*ar dodocumento# eralmente a Pdi'Q é usada paradia*ramar o la/out de um site#
EDemplo de utili)ação
Pdi'Q teste P:di'Q
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
25/41
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS - TAGS
CCT0412 - TECNOLOGIA PARA INTERNET I
Tag# Semnti'a#
Elemento que representa um hiperlinSAtributoshre% Z A &R> que %ornece o destino dohiperlinS#tar*et Z nome de na'e*ação ao conteDto oupala'ra4cha'es se*uintes strin*s literais[]blanS[+ []sel%[+ []parent[+ ou []top[#
EDemplo de utili)ação
PpQ
Pahre%Z[http::en#iSipedbera[QCamberaP:aQis the capital cit/ o% AusP:pQ
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
26/41
8 8
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
27/41
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS - TAGS
CCT0412 - TECNOLOGIA PARA INTERNET I
Tag# Semnti'a#
Este elemento diminui o tamanho do teDto#EDemplo de utili)ação
Este elemento trans%orma o teDto em umconteBdo não rele'ante#EDemplo de utili)ação
P%ooterQ
PpQPsmallQ^ cop/ri*EDample Corp#P:smallQP:%ooterQ
PpQ=u/ our Iced Tea anP:pQPpQPsQRecommended_F#!! per bottleP:sQP:
PpQPstron*QNo selli_6#!! a bottleVP:stron*
8 8
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
28/41
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS - TAGS
CCT0412 - TECNOLOGIA PARA INTERNET I
Tag# Semnti'a#
Este elemento trans%orma o teDto em umacitação#
Este elemento coloca aspas em um bloco deteDto#EDemplo de utili)ação
Este elemento representa um %ra*mento dec2di*o de computador#EDemplo de utili)ação
PpQM/ %a'orite mo'ie isarsP:citeQ#P:pQ
PpQThe man said PqQThinput hereP:qQ#P:pQ
PpreQ PcodeQ %unction .anel0element+ closeKandler1 ` this#element Z elemen
this#canClose Z canClo this#closeKandler Z %un0closeKandler1 closeKand P:codeQP:preQ
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS TAGS
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
29/41
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS - TAGS
CCT0412 - TECNOLOGIA PARA INTERNET I
Tag# Semnti'a#
Elemento de utili)ação *enérica id9ntico aoelemento P$I\Q#EDemplo de utili)ação
Este elemento representa uma quebra de linha#EDemplo de utili)ação
PspanQ Teste de eDem
PpQF6 \assar ;treetPbCambrid*e+ MA ?6F!P:pQ
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS TAGS
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
30/41
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS - TAGS
CCT0412 - TECNOLOGIA PARA INTERNET I
Li#ta#;ão elementos de ordenação de teDto podendoser numeradas e não numeradas#
$e-ne uma lista numerada# Os itens da listassão de-nidos pela ta* $iQEDemplo de utili)ação
Atributos da lista
re'ersed Z altera a ordem da lista#
start Z \alor inicial da listat/pe Z Altera o numerador da lista0 V A a I i1#
PolQ
PliQeDemploP:liQ PliQeDemplo6P:liQ PliQeDemploFP:liQP:olQ
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS TAGS
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
31/41
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS - TAGS
CCT0412 - TECNOLOGIA PARA INTERNET I
Li#ta#
$e-ne uma lista não numerada# &tili)a osmesmos atributos de PolQ#EDemplo de utili)ação
Elemento que teDtual que eDibe uma lista dede-niç@es+ com termos espec(-cos# Trabalhacom as ta*s PdtQ termo a ser eDibido e PddQelementos do termo#EDemplo de utili)ação
PulQ
PliQeDemploP:liQ PliQeDemplo6P:liQ PliQeDemploFP:liQP:ulQ
PdlQ PdtQCarrosP:dtQ PddQ&noP:ddQ
PddQolP:ddQ PdtQMotosP:dtQ PddQKondaP:ddQPddQUamahaP:ddQP:dlQ
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS -
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
32/41
7 7TABELAS
CCT0412 - TECNOLOGIA PARA INTERNET I
Ta+e$a#;ão elementos que representam dados de umaou mias dimens@es# .odem ser utili)adas paraeDibição de tabelas de preços de um site#
Elemento b3sico para criação da tabela#EDemplo de utili)açãoPtableQ 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 Cabelo PtdQ? MinP:tdQ
PtdQR_ +??P:tdQ P:trQ PtrQ PthQManicureP:thQ PtdQF? MinP:tdQ PtdQR_ 6?+??P:tdQ
P:trQPtrQ
PthQ.edicureP:thQ PtdQF? MinP:tdQ PtdQR_ ?+??P:tdQ
P:trQ P:tbod/QP:tableQ
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
33/41
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS -
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
34/41
TABELAS
CCT0412 - TECNOLOGIA PARA INTERNET I
deAnteriormente+ para a eDibição de '(deos em um documentoKTM>+ os desen'ol'edores utili)a'am a TA PobjectQ que éum container *enérico para incorporar objetos estran*eiros0 plu*ins de terceiros 1 a p3*ina# $e'ido a inconsist9ncia dos
na'e*adores+ era necess3rio replicar '3rias linhas de c2di*opara que o '(deo pudesse ser eDibido# O KTM> pro'9 a TAP'ideoQ para eliminar os problemas de incompatibilidadeentre os na'e*adores#
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 '(deoser3 passado cont(nuamente#
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS -
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
35/41
TABELAS
CCT0412 - TECNOLOGIA PARA INTERNET I
EDemplo de utili)açãoP'ideo controls srcZ[http::media#F#or*n/:mo'ie#o*'[Q;eu na'e*ador não suporKTM> P:'ideoQ
de
poster Z Endereço de uma ima*em ser3 eDibidaenquanto o '(deo não carre*a#hei*ht Z Altura do '(deo em piDelsidth Z >ar*ura do '(deo em piDelsmuted Z [muted[ or [[ou [[ 0strin* 'a)ia1 ou sematributo# Estado do '(deo de%ault com o 3udiodesli*ado#src Z &R> do '(deo
INTRO6U78O CONSTRU78O 6E PGINAS ESTTICAS -S
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
36/41
TABELAS
CCT0412 - TECNOLOGIA PARA INTERNET I
Audi
Elemento que permite tocar um arqui'o de3udio# Com atributos semelhantes ao P'ideoQ#EDemplo de utili)ação
Paudio controls
srcZ[http::media#F#or*:6n/:?74$eath]=ecomes],ur#;eu na'e*ador não suportaKTM> P:audioQ
Unidade I - LINGUAGEM 6E MARCA78O E ESTILOS - CSS
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
37/41
Unidade I LINGUAGEM 6E MARCA78O E ESTILOS CSS
CCT0412 - TECNOLOGIA PARA INTERNET I
6eDni()Con%orme
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
38/41
Unidade I LINGUAGEM 6E MARCA78O E ESTILOS CSS
CCT0412 - TECNOLOGIA PARA INTERNET I
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çãoA*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 ah+ h6+ hF ` %ont4%amil/ sans4seri%
Unidade I - LINGUAGEM 6E MARCA78O E ESTILOS - CSS
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
39/41
U dade GU G C 7 O S OS CSS
CCT0412 - TECNOLOGIA PARA INTERNET I
41 Se$etre# de#'endente#&m elemento pode estar contido dentro de outro elemento#EDemploPKQEste teDto é PEMQmuitoP:EMQ importanteP:KQ
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 elementoh possuem a cor a)ul :
42 Se$etre# D$;# &m elemento -lho é carateri)ado quando os elementos são separados por [Q[
EDemplodi' olQli p `color *reen Neste eDemplo+ todos os elementos p serão de cor 'erde quando esti'eremdentro de um elemento item PliQ+ -lho de uma lista PolQ dentro de uma Pdi'Q
Unidade I - LINGUAGEM 6E MARCA78O E ESTILOS - CSS
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
40/41
7
CCT0412 - TECNOLOGIA PARA INTERNET I
4 Se$etre# !r atri+ut#Especi-ca re*ras para os elementos que possuem determinado atributo#EDemplospanhelloZ[Cle'eland[f*oodb/eZ[Columbus[f ` color blue A re*ra ser3 aplicada a todos os elementos span que possuem o atributohelloZ[Cle'eland[ e o atributo *oodb/eZ[Columbus[#44 Se$etre# !r '$a##e#&ma classe permite atribuir um conjunto de re*ras a um determinado elementodeterminado 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$etre# !r I6O atributo I$ permite identi-car um elemento Bnico no documento KTM># .ara este elemento basta utili)ar o caracter se*uindo pelo nome do elemento#EDemplohtitulo ` teDt4ali*n center : aplica a re*ra ao elemento h com o idZtitu
-
8/17/2019 Prepara AV1 Tecnologias Para Internet I
41/41
top related