Prepara AV1 Tecnologias Para Internet I

Embed Size (px)

Citation preview

  • 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