Scribd Logo
Importer

Bienvenue sur Scribd !

  • HTML Básico

    Transféré par

    Daniel campo
    8 vues35 pages

    Titre original

    HTML Básico.doc

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    DOC, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme DOC, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    8 vues35 pages

    HTML Básico

    Transféré par

    Daniel campo

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme DOC, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 35

    Manual HTML

    Documento bsico e seus componentes


    A estrutura de um documento HTML apresenta os seguintes componentes: <HTML> <HEAD><TITLE>Titulo do Documento</TITLE></HEAD> <BODY> texto, imagem, links, </BODY> </HTML> As etiquetas HTML n!o s!o "case sensiti#e$. Traduzindo: tanto faz escrever <HTML>,
    <Html>, <html>, <HtMl>,

    ...

    A sec%!o &HEAD'
    &HEAD' cont m informa!"es so#re o documento. $ elemento &TITLE', por e%emplo, define um t&tulo, que mostrado no alto da 'anela do #ro(ser. )or e%emplo: <HEAD><TITLE>
    Tutorial HTML </TITLE></HEAD>

    A seco <BODY>
    Tudo que estiver contido em &BODY' ser* mostrado na 'anela principal do #ro(ser, sendo apresentado ao leitor. &BODY' pode conter ca#e!al+os, par*grafos, listas, ta#elas, lin,s para outros documentos, imagens, formul*rios, anima!"es, v&deos, sons e scripts em#utidos.

    At(ibutos de &BODY'

    Manual HTML

    Atrav s de atri#utos de <BODY>, podemos definir cores para os te%tos, lin,s e para o fundo das p*ginas, #em como uma imagem de fundo .marca d/*gua0: <BODY onde: B)*OLO+ cor de fundo .quando n1o fundo da p*gina0 TE-T cor dos te%tos da p*gina .padr1o: preto0 L345 cor dos lin,s .padr1o: azul0 ALI./ cor dos lin,s, quando accionados .padr1o: vermel+o0 0LI./ cor dos lin,s, depois de visitados .padr1o: azul escuro ou ro%o0 $s seus valores s1o dados em +e%adecimal, equivalentes a cores no padr1o 678 .6ed, 7reen, 8lue0. 9%istem ta#elas de cores com esses valores, mas grande parte dos editores '* oferece uma interface #em amig*vel atrav s da qual escol+emos as cores dese'adas, sem nos preocuparmos com n:meros esdr:%ulos tais como ;<<=>A>. 8ro(sers que seguem a defini!1o de HTML ?.@ em diante, tam# m aceitam -A nomes de cores, tirados da paleta B7A do Cindo(s D por e%emplo, podemos escrever B)*OLO+,"BLUE". )or m, #ro(sers mais antigos n1o apresentar1o as cores indicadas. BA*/)+O1.D 9specifica a imagem ..gif ou .'pg0 usada como fundo. B)2+O2E+TIE3 , 4I-ED <i%a uma imagem no fundo. 9%emplo: indicada, o #ro(ser ir* mostrar uma cor padr1o, geralmente o cinza ou #ranco2 alguns editores poder1o esta#elecer o #ranco para o B)*OLO+,"#rrggbb" TE-T,"#rrggbb" LI./,"#rrggbb" ALI./,"#rrggbb"

    0LI./,"#rrggbb" BA*/)+O1.D,"URL">

    Manual HTML

    <BODY

    BA*/)+O1.DEnomeFimagem

    B)*OLO+EnomeFcor

    TE-TEnomeFcor

    LI./EnomeFcor 0LI./EnomeFcor ALI./EnomeFcor> $u ent1o, podemos utilizar o cGdigo equivalente da cor em +e%ad cimal: <BODY BA*/)+O1.DEnomeFimagem B)*OLO+E;cGdigoFcor TE-TE;cGdigoFcor LI./E;cGdigoFcor 0LI./E;cGdigoFcor ALI./E;cGdigoFco> .ota5 n1o importa a sequHncia dos atri#utos.87I$L$6, L345, BL345, J0 colocaDse sempre um espa!o entre estes.

    *abe%al6os
    H* seis n&veis de ca#e!al+os em HTML, de <H1> a <H6>: <H7>9ste <H?>9ste
    um ca#e!al+o de n&vel -</H7><H8>9ste um ca#e!al+o de n&vel @</H8>

    um ca#e!al+o de n&vel ?</H9><H:>9ste

    um ca#e!al+o de n&vel K</H:>

    <H;>9ste um ca#e!al+o de n&vel L</H;><H<>9ste um ca#e!al+o de n&vel A</H<>

    Alin6amento $s ca#e!al+os tHm atri#utos de alin+amento: <H2 ALI).,CENTER>Cabe alho !e"trali#a$o</H2> *abe%al6o cent(ali=ado <H3 ALI).,637HT>Ia#e!al+o alin+ado M direita</H3> *abe%al6o alin6ado > di(eita <H4 ALI).,L9<T>Ia#e!al+o alin+ado M esquerda .default0</H4> *abe%al6o alin6ado > es?ue(da @deAaultB

    Manual HTML

    3epa(ado(es
    Cueb(a de lin6a Nuando queremos mudar de lin+a, usamos o elemento &B+'. 3sso sG automaticamente para apresentar os te%tos. Iom sucessivos &B+', podemos inserir diversas lin+as em #ranco nos documentos. necess*rio quando

    queremos uma que#ra de lin+a em determinado ponto, pois os #ro(sers '* que#ram as lin+as

    <.OB+>te%to</.OB+>: <az com que o te%to n1o ten+a que#ras de lin+as e crie uma #arra de scroll +orizontal para se poder ver o te%to.

    2a(g(aAos )ara separar #locos de te%to, usamos o elemento &2': )ar*grafo -2<2>)ar*grafo @. que produz: )ar*grafo-2 )ar*grafo@. Iom#inando par*grafos e que#ras de lin+a, temos: )ar*grafo -2<B+> lin+a - do par*grafo -, <B+>lin+a @ do par*grafo -.<2>)ar*grafo @2<B+> lin+a - do par*grafo @, <B+>lin+a @ do par*grafo @. $ resultado da marca!1o acima : )ar*grafo -2 lin+a - do par*grafo -, lin+a @ do par*grafo -. )ar*grafo @2 lin+a - do par*grafo @, lin+a @ do par*grafo @.

    Manual HTML

    <P>

    tem atri#uto de alin+amento, como os ca#e!al+os:

    <P ALI).,CENTER>%&&im !omo o& !omboio&' a& boa& i$eia& (& )e#e& !hegam !om atra&o*
    <BR>+,io)a"i ,uare&!hi-</P>

    Assim

    como

    os

    com#oios,

    as

    #oas

    ideias

    Ms

    vezes

    c+egam

    com

    atraso.

    .7iovani 7uaresc+i0 <P ALI).,R.,HT>Como $i# o /ro)0rbio !hi"1&2 34 melhor /a&&ar /or ig"ora"te uma )e# $o 5ue
    /erma"e!er ig"ora"te /ara &em/re6*</P>

    Iomo diz o prov r#io c+inHs: OP mel+or passar por ignorante uma vez do que permanecer ignorante para sempreQ. <P ALI).,LE7T>E&te 0 o ali"hame"to /a$r8o +$e9ault-' e /or i&&o "8o )ou !olo!ar "e"huma 9ra&e
    e&/e!ial*</P>

    9ste o alin+amento padr1o .default0, e por isso n1o vou colocar nen+uma frase especial.

    Lin6a Ho(i=ontal <HR> insere uma lin+a +orizontal: 9ssa lin+a tem diversos atri#utos, oferecendo resultados diversos. <HR 3IDE:;> insere uma lin+a de largura R .pi%els0: <HR EIDTH:<=>> insere uma lin+a que ocupa L>S do espa!o +orizontal dispon&vel: <HR EIDTH:?=> ALI).:R.,HT .O3HADE> insere uma lin+a de comprimento ?>S .do espa!o +orizontal dispon&vel0, alin+ada M direita, sem efeito tridimensional: <HR 3IDE:;= EIDTH:@ ALI).:LE7T> insere uma lin+a de largura R> .pi%els0, comprimento @ .pi%els0, alin+ada M esquerda:

    4o(mata%!o de textos e ca(acte(es


    Blocos de texto

    Manual HTML

    HTML oferece as seguintes formata!"es de #locos de te%to: <)69> Apresenta o te%to na mesma maneira em que foi digitado, mantendo que#ras de lin+a e ta#ula!"es: <2+E>uma outra ali, etc.</pre> 6esulta em: uma outra ali, etc. Tma vez que <2+E> mant m o te%to original, n1o se deve for!ar espa!os com essa marca!1o dentro de outra marca!1o que '* apresente ta#ula!"es e espa!os espec&ficos. lin+a aqui, lin+a aqui,

    &BLO*/C1OTE' P usado para cita!"es longas: <BLO*/C1OTE>A massa do Uol arqueia o espa!oDtempo de tal maneira que, ainda que a Terra siga uma
    tra'ectGria recta no espa!oDtempo quadridimensional, pareceDnos que se desloca em Gr#ita circular no espa!o tridimensional.</BLO*/C1OTE> .Utep+en C. Ha(,ing, OTma 8reve HistGria do TempoQ0

    A massa do Uol arqueia o espa!oDtempo de tal maneira que, ainda que a Terra siga uma tra'ectGria recta no espa!oDtempo quadridimensional, pareceDnos que se desloca em Gr#ita circular no espa!o tridimensional. .Utep+en C. Ha(,ing, OTma 8reve HistGria do TempoQ0

    &ADD+E33' Tsado para formatar endere!os email e referHncias a autores de documentos: 9nvie cr&ticas e sugest"es para <ADD+E33>esenvisV .net</add(ess> 9nvie cr&ticas e sugest"es para

    4o(mata%!o de A(ases

    Manual HTML

    &B' Nuando dispon&vel no #ro(ser, su#lin+ado0 &I' Itlico .em alguns casos, caracteres inclinados0 &TT' Tipo teletA/e D fonte de espa!amento fi%o. &1' Uu#lin+ado2 deve ser usado com cuidado, pois confundeDse com a apresenta!1o de links. &3T+I/E' ou &3' <rase riscada. &BI)' <onte um pouco maior. &3MALL' <onte um pouco menor. &31B' <rase em estilo &ndice, como em H@$. &312' <rase em estilo e%poente, como em 5m@. <I94T96>te%to</I94T96>: centraliza o te%to em rela!1o M p*gina. mostrado em neg(ito .em alguns #ro(sers, pode aparecer

    *a(acte(es especiais HTML permite que caracteres especiais se'am representados por sequHncias, indicadas por trHs partes: um W inicial, um n:mero ou cadeia de caracteres correspondente ao caracter dese'ado, e um 2 final. Nuatro caracteres AUI33 D <, >, e B tHm significados especiais em HTML, e s1o usados dentro de documentos seguindo a correspondHncia: Entidade *a(acte(

    Manual HTML

    Wlt2 Wgt2

    < >

    Wamp2 W $utras sequHncias de escape suportam caracteres ISO Latin1. Aqui est uma tabela com os
    caracteres mais utilizados em Portugus:

    Entidade Waacute2 Wacirc2 Wagrave2 Watilde2 Wccedil2 Weacute2 Wecirc2 Wiacute2 Woacute2 Wocirc2 Wotilde2 Wuacute2 Wuuml2

    *a(acte( * X M 1 ! H & G Y " : Z

    Entidade WAacute2 WAcirc2 WAgrave2 WAtilde2 WIcedil2 W9acute2 W9circ2 W3acute2 W$acute2 W$circ2 W$tilde2 WTacute2 WTuml2

    *a(acte( [ \ ] ^ _ P ` a b c d e f

    *o(es e Aontes
    *o(es <FONT *OLO+:"#rrggbb">TeCto</FONT>

    Manual HTML

    Assim, um #loco de te%to pode ter uma cor diferente da defini!1o geral de cores, feita atrav s dos atri#utos de
    <BODY>.

    Taman6o A formata!1o <4O.T 3IDEEtamanho_da_letra>Te%to</4O.T> permite que o autor do documento altere o taman+o das letras em trec+os espec&ficos de te%to. $ taman+o #*sico dos te%tos ?. )odemos indicar taman+os relativos a esse, por e%emplo: <FONT 3IDE:D@>Letra maior</FONT> Letra "ormal <7ONT 3IDE:E@>Letra me"or</FONT> Letra maior Letra normal Letra menor

    4ontes Tma evolu!1o que permite a escol+a da fonte para os te%tos, o atri#uto <AI9: <FONT 4A*E:"fonte_da_letra">TeCto</FONT> )or e%emplo: <FONT 4A*E:"Fer$a"a" *OLO+:"#====%%">7o"te Fer$a"a a#ul</FONT> 7o"te Fer$a"a a#ul <FONT 4A*E:"%rial" *OLO+:"#==%%==">7o"te %rial )er$e</FONT> 7o"te %rial )er$e <FONT 4A*E:"Courier NeG" *OLO+:"#%%====">7o"te Courier NeG )ermelha</FONT> 7o"te Courier NeG )ermelha Ma(?uee P poss&vel o#ter o efeito de anima!1o de te%to, atrav s da formata!1o <MARQUEE>.

    Manual HTML

    <MA+C1EE BEHA0IO+Eefeito>Te%to</MA+C1EE> Atri#utos de largura e direc!1o do efeito permitem diversas apresenta!"es diferentes. )or e%emplo .o efeito sG e%ecutado no 3nternet 9%plorer e em vers"es recentes do 4etscape D e de maneiras diferentes0: <MARQUEE BEHA0IO+EUI6$LL EIDTHE?>S>Te%to</MARQUEE> <MARQUEE BEHA0IO+EUL3h9 DI+E*TIO.E637HT>Te%to</MARQUEE> <MARQUEE BEHA0IO+EUL3h9 DI+E*TIO.EL9<T>Te%to</MARQUEE>

    9%emplo que cont m tags de formata!1o: <HTML> <H9Ah> <T3TL9>9%emplo das tags</T3TL9> </H9Ah> <8$hi 87I$L$6E C+ite T9jTE8lac,> <H6 C3hTHE=>S U3k9E?> <I94T96>9 </)69> <H6 C3hTHE=>S U3k9E?> <)> <H->Taman+o-</H-> <86> <H@>Taman+o-</H@> <86> <H?>Taman+o-</H?> <86> <HK>Taman+o-</HK> <86> <HL>Taman+o-</HL> <86> <HA>Taman+o-</HA> <86> Te%to- D<<$4T I$L$6E8lue>Ior Azul</<$4T><86> Te%to@ D<<$4T <AI9E OTimes 4e( 6omanQ><onte Times 4e( 6oman</<$4T><86> Te%to? D<8>4egrito</8> <86> Te%toK D<3> 3t*lico</3> <86> Te%toL D<TT>Monoespa!ado</TT> <86> -> j 9 M ) L $</I94T96>

    Manual HTML

    Te%toA D<T>Uu#lin+ado</T> <86> Te%toR D<UT)>Uo#scrito</8> <86> Te%to=D<UT8>Uu#scrito</UT8> <86> Te%tog D<U>Ta%ado</U> <)> </8$hi> </HTML>

    Liga%Fes @uso de linksB Iom HTML poss&vel fazermos liga!"es de uma regi1o de te%to .ou imagem0 a um outro

    documento. $ #ro(ser destaca essas regi"es e imagens do te%to, indicando que s1o liga!"es de +iperte%to D tam# m c+amadas hypertext links ou hiperlinks ou simplesmente links. )ara inserir um lin, em um documento, utilizamos a etiqueta &A', da seguinte forma: <A H+E4 E larq_destinol>Xncora</A> onde: a(?Gdestino o T6L do documento de destino2 Hnco(a o te%to ou imagem que servir* de liga!1o +iperte%to do documento sendo apresentado para o documento de destino. At(ibutos <A> tem v*rios atri#utos, utilizados de acordo com a ac!1o associada ao lin,. $s mais usados s1o: H+E4 3ndica o arquivo de destino da liga!1o de +iperte%to. TA+)ET

    --

    Manual HTML

    3ndica o frame em que ser* carregado o arqFdestino. Maiores detal+es na sec!1o so#re frames. .AME Marca um indicador, isto , uma regi1o de um documento como destino de uma liga!1o. $s lin,s podem estar indicados como camin+os relativos ou a#solutos. *amin6o (elati#o $ camin+o relativo pode ser usado sempre que queremos fazer referHncia a um documento armazenado no mesmo servidor do documento atual.

    *amin6o absoluto Ttilizamos o camin+o a#soluto quando dese'amos referenciar um documento que este'a em outro servidor

    Indicado(es @uso de linksB


    Iomo foi dito anteriormente, o atri#uto 4AM9 permite indicar um trec+o de documento como ponto de chegada de uma liga!1o +iperte%to. A formata!1o: <A .AMEEliniciol>3ndicadores .uso de lin,s0</A> faz com que a Xncora Indicado(es @uso de linksB se'a o destino de um lin,. Ue escrevermos: <A H+E4El;iniciol>Topo do documento</A>. teremos uma liga!1o +iperte%to para um trec+o deste mesmo documento: Topo do documento.

    -@

    Manual HTML

    ha mesma forma, constru&mos lin,s para determinados trec+os de outros documentos, desde que sai#amos quais os trec+os do documento destino que est1o marcados para ponto de c+egada de um lin,.

    Inse(%!o de imagens
    $ elemento IMG insere imagens que so apresentadas junto com os textos. Um atributo
    SR de!e estar presente" da seguinte #orma:

    <3M7 3+*:"URL_imagem"> onde 1+LGimagem conveniente0. Assim, escrevendo: <3M7 U6I E l/icones/ne(red.gifl> inserimos a figura
    H*I/eg0, H*/"g.

    o T6L do fic+eiro que cont m a imagem que se quer inserir2 pode ser

    referenciada uma imagem que este'a em um outro servidor .o que, logicamente, n1o

    no documento.

    As imagens usadas na Ce# s1o armazenadas em arquivos com e%tens1o H*gi9, H*Cbm, H*I/g .ou

    At(ibutos bsicos de imagem


    ALT 3ndica um te%to alternativo, descrevendo #revemente a imagem, que apresentado no lugar da imagem nos #ro(sers te%to, ou quando se desa#ilita o carregamento de imagens em #ro(sers gr*ficos. P recomend*vel que este'a sempre presente. <IMG 3+*:"URL_imagem" ALT:"descrio_da_imagem"> hessa forma, <.M, JRC:"/i!o"e&/"eGre$*gi9" %LT:"No)oK"> assim: e, nos #ro(sers te%to, assim: LNo)oKM apresentado nos #ro(sers gr*ficos

    EIDTH e HEI)HT

    -?

    Manual HTML

    Atri#utos de dimens1o da imagem, em pi%els. 7rande parte dos editores HTML coloca automaticamente os valores destes atri#utos, quando indicamos a inser!1o de uma imagem. <IMG 3+*:"imagem" ALT:"descrio" EIDTH:"largura" HEI)HT:"altura"> Tma das vantagens de se usar esses atri#utos que o #ro(ser pode montar mais rapidamente as p*ginas, por sa#er de antem1o o espa!o que dever* ser reservado a elas. Moldu(as de imagem )ara mel+orar ainda mais a apresenta!1o das imagens 'unto com os te%tos, foram desenvolvidos atri#utos de moldura. 9stes atri#utos definem o espa!o D vertical e +orizontal D dei%ado entre as imagens e os te%tos circundantes: <IMG JRC:"imagem" 032A*E:e&/a oN)erti!al> <IMG JRC:"imagem" H32A*E:e&/a oNhori#o"tal>

    Tabelas
    A formata!1o de ta#elas foi adoptada #em antes de sua inclus1o na defini!1o de HTML. A manipula!1o de ta#elas, mesmo em editores, tra#al+osa2 a maior diferen!a entre ta#elas em o facto das ta#elas em HTML serem HTML e em editores como o MU Cord, entretanto, definidas apenas em termos de linhas e n1o de colunas.

    Elementos bsicos de tabelas <TABLE>***</TABLE> delimita uma ta#ela. Tm atri#uto #*sico apresenta!1o da #orda. <TABLE BO+DE+El#ordal> ... </TABLE> BO+DE+, que indica a

    TItulos, lin6as e elementos -K

    Manual HTML

    <CAPTION>***</CAPTION> define o t&tulo da ta#ela <TR>***</TR> delimita uma lin+a <TH>***</TH> define um ca#e!al+o para colunas ou lin+as .dentro de <T6>0 <TD>***</TD> delimita um elemento ou c lula .dentro de <T6>0

    Tma ta#ela simples: <TA8L9 8$6h96EK> <IA)T3$4>)rimeiro e%emplo</IA)T3$4> <T6><TH>Ioluna -</TH><TH>Ioluna @</TH></T6> <T6><Th>lin+a-, coluna -</Th><Th> lin+a -, coluna @</Th></T6> <T6><Th>lin+a @, coluna -</Th><Th>lin+a @, coluna @</Th></T6> </TA8L9> )rimeiro e%emplo *oluna 7 *oluna 8 lin+a-, coluna - lin+a -, coluna @ lin+a @, coluna - lin+a @, coluna @

    TItulos comp(eendendo mais de uma coluna ou lin6a

    P poss&vel englo#ar colunas e lin+as, atrav s dos atri#utos *OL32A. .para colunas0 e +OE32A. .para lin+as0: <TA8L9 8$6h96E-> <T6><TH *OL32A.E@>Colu"a& O e @</TH></TR> -L

    Manual HTML

    <T6><Th>lin+a-, coluna -</Th><Th> lin+a -, coluna @</Th></T6> <T6><Th>lin+a @, coluna -</Th><Th>lin+a @, coluna @</Th></T6> <T6><TH +OE32A.E?>? li"ha&</TH><TD>uma li"ha</TD></TR> <T6><Th>duas lin+as</Th></T6> <T6><Th>tres lin+as</Th></T6> </TA8L9>

    *olunas 7 e 8 lin+a-, coluna - lin+a -, coluna @ lin+a @, coluna - lin+a @, coluna @ uma lin+a 9 lin6as duas lin+as tres lin+as 4este e%emplo, vemos que o ca#e!al+o *olunas 7 e 8 compreende duas colunas .COLJP%N:@02 o ca#e!al+o 9 lin6as compreende, por sua vez, ? lin+as .ROQJP%N:?0.

    Tabelas sem bo(da <TA8L9 BO+DE+El>l> ... </TA8L9>

    Alin6amentos em tabelas
    Alin6amentos simples $s alin+amentos padr1o em ta#elas, como podemos ver no e%emplo acima, s1o: no sentido +orizontal: alin+amento M esquerda no sentido vertical: alin+amento no centro da c lula As lin+as e c lulas podem ter alin+amentos definidos atrav s dos atri#utos: ALI). E alinF+orizontal

    -A

    Manual HTML

    0ALI). E alinFvertical Be'amos como esses alin+amentos funcionam nas c lulas: <Th AL374EalinF+orizontal>Te%to da c lula</Th>

    <TD F%L.,N:ali"N)erti!al>TeCto $a !0lula</TD>

    )adr1o

    ALI).EL9<T 0ALI).ET$)

    ALI).EI94T96

    ALI).E637HT

    )adr1o

    0ALI).EM3hhL9 0ALI).E8$TT$M

    Obs.: a tabela acima #oi #eita especialmente para mostrar as di#eren$as entre os
    alin%amentos. Uma tabela comum ajusta o taman%o de suas c&lulas ao conte'do" desta #orma:

    )adr1o alignEleft alignEcenter

    alignErig+t

    )adr1o valignEtop valignEmiddle valignE#ottom

    Alin6amentos combinados Tma mesma c lula pode ter atri#utos %L.,N e F%L.,N2 <Th AL374EalinF+orizontal BAL374EalinFvertical>Te%to da c lula</Th> )or e%emplo:

    )adr1o

    ALI).ELE7T' 0ALI).EBOTTOM

    ALI).ECENTER' 0ALI).ETOP

    ALI).ER.,HT' 0ALI).EM.DDLE

    Alin6amentos de lin6as $ alin+amento pode ser aplicado a lin+as inteiras, com: -R

    Manual HTML

    <T6 AL374EalinF+orizontal BAL374EalinFvertical>Te%to da c lula</T6> )or m, o alin+amento declarado em uma c lula prevalece so#re o alin+amento da lin+a, como se vH no e%emplo:

    center

    center Th 0ALI).ETOP

    center

    Th ALI).ER.,HT

    #ottom

    #ottom

    #ottom

    At(ibutos de la(gu(a 4o item anterior, foi comentado que uma ta#ela comum a'usta o taman+o de suas c lulas ao conte:do. )or e%emplo:

    'aneiro fevereiro mar!o a#ril maio 'un+o

    )ara apresentar uma ta#ela ocupando determinado espa!o dispon&vel na lin+a, usamos o atri#uto Q.DTH. 9sse atri#uto pode ser aplicado tam# m a lin+as e c lulas. 9ssa largura pode ser definida em porcentagem .do espa!o dispon&vel0: EIDTHE%S ou em pi%els: EIDTHE% Ex 75 (abela ocupando )*+ do espa$o dispon,!el <TA8L9 8$6h96E- (idt+EL>S>

    'aneiro a#ril

    fevereiro maio

    mar!o 'un+o

    -=

    Manual HTML

    Ex 85 (abela ocupando )*+ do espa$o dispon,!el" com uma coluna de -*+ do espa$o
    dispon,!el na tabela

    <TA8L9 8$6h96E- (idt+EL>S> <T6> <Th>'aneiro</Th><Th (idt+EA>S>fevereiro</Th><Th>mar!o</Th> </T6> <T6> <Th>a#ril</Th><Th (idt+EA>S>maio</Th><Th>'un+o</Th> </T6> </TA8L9>

    'aneiro a#ril

    fevereiro maio

    mar!o 'un+o

    Ex9 5 . controlo da largura da tabela est limitado / dimenso de seu conte'do: <TA8L9 8$6h96E- (idt+EL>S> <T6> <Th>'aneiro</Th><Th (idt+E-S>fevereiro</Th><Th>mar!o</Th> </T6> <T6> <Th>a#ril</Th><Th (idt+E-S>maio</Th><Th>'un+o</Th> </T6> </TA8L9>

    'aneiro a#ril

    fevereiro mar!o maio 'un+o

    At(ibutos de espa%amento hois atri#utos permitem o controle de espa!amento em ta#elas: *ELL2ADDI.) D espa!o entre o te%to e as #ordas da c lula *ELL32A*I.) D espa!o entre c lulas

    -g

    Manual HTML

    Tomemos a mesma ta#ela simples da sec!1o anterior: 'aneiro fevereiro mar!o a#ril maio 'un+o

    Ex 75 0spa$o entre o texto e as bordas <TA8L9 8$6h96E- *ELL2ADDI.)E@>>

    'aneiro

    fevereiro

    mar!o

    a#ril

    maio

    'un+o

    Ex 85 0spa$o entre c&lulas <TA8L9 8$6h96E- *ELL32A*I.)E@>>

    'aneiro a#ril

    fevereiro maio

    mar!o 'un+o

    Ex9 5 0spa$o entre texto e bordas" e espa$o entre c&lulas <TA8L9 8$6h96E- *ELL2ADDI.)E@> *ELL32A*I.)E@>> 'aneiro fevereiro mar!o

    a#ril

    maio

    'un+o

    ExtensFes de tabelas
    hiversas e%tens"es de ta#elas possi#ilitam a apresenta!1o de efeitos muito #ons nas p*ginas.

    @>

    Manual HTML

    *o( de Aundo <TA8L9 8$6h96EL I9LLU)AI347EL I9LL)Ahh347E-> B)*OLO+:"#EO77DR"> 'aneiro a#ril fevereiro maio mar!o 'un+o

    <TA8L9 8$6h96EL I9LLU)AI347EL I9LL)Ahh347E->> <TR><TD B)*OLO+:"#EO77DR">Ia"eiro</TD><TD>9e)ereiro</TD> <TD B)*OLO+:"#EO77DR">mar o</TD></TR> <TR><TD>abril</TD><TD B)*OLO+:"#EO77DR">maio</TD><TD>Iu"ho</TD></TR> </T%BLE> 'aneiro a#ril fevereiro maio mar!o 'un+o

    *o( de bo(da <TA8L9 8$6h96EL I9LLU)AI347EL I9LL)Ahh347E-> 87I$L$6El;9-<<hgl BO+DE+*OLO+:"#==77==">

    'aneiro a#ril

    fevereiro maio

    mar!o 'un+o

    <TA8L9 8$6h96El-l I9LLU)AI347El>l I9LL)Ahh347E-> BO+DE+*OLO+:"#==77=="> <TR> <TD bg!olor:"#EO77DR">Ia"eiro</TD><TD>9e)ereiro</TD> <TD bg!olor:"#EO77DR">mar o</TD> </TR> <TR>

    @-

    Manual HTML

    <TD>abril</TD><TD bg!olor:"#EO77DR">maio</TD><TD>Iu"ho</TD> </TR> </T%BLE>

    'aneiro a#ril Imagem de Aundo

    fevereiro maio

    mar!o 'un+o

    <TA8L9 8$6h96EL BA*/)+O1.D:"imagem"> 'aneiro a#ril fevereiro maio mar!o 'un+o

    <Th BA*/)+O1.D:"imagem"> 'aneiro a#ril fevereiro maio mar!o 'un+o

    4(ames $s frames s1o divis"es do ecr1 do #ro(ser em diversos ecr1s .ou OquadrosQ0. Iom isso, tornaDse poss&vel apresentar mais de uma p*gina por vez: por e%emplo, um &ndice principal em uma parte pequena do ecr1, e os te%tos relacionados ao &ndice em outra parte. P muito f*cil colocar frames em p*ginas2 por m, nem todos os utilizadores gostam deles, pois nem sempre a navega!1o f*cil, al m de pro#lemas para a impress1o e a marca!1o dos documentos interiores aos frames nos #oo,mar,s. A alternativa natural para os frames s1o as ta#elas. Tma p*gina com frames tem um te%to fonte semel+ante a: <HTML> <H9Ah><T3TL9>Assunto j</T3TL9></H9Ah> <FRAMESET *OL3El@>S, =>Sl> @@

    Manual HTML

    <<6AM9 3+*Elindice-.+tmll> <<6AM9 3+*Elapresenta.+tmll .AMEElprincipall> <4$<6AM9> <8$hi> <H@>8emDvindo M p*gina do assunto jm</+@> <)> 8l* #l* #l* #l* #l* #l* #l* #l* #l* #l* </8$hi> </NOFRAME> </FRAMESET> </HTML> A parte 4+AME3ET define a divis1o da p*gina em OquadrosQ. 4este e%emplo, a p*gina ser* dividida em duas colunas, sendo a primeira com @>S do taman+o do ecr1, e a segunda coluna com os restantes =>S do ecr1. hentro da formata!1o de 4+AME3ET, temos os 4+AME 3+*, que s1o referHncias Ms p*ginas que ser1o mostradas nos frames definidos Assim, no cGdigo acima vemos que a p*gina i"$i!eO*html ser* mostrada na primeira coluna .que ocupar* @>S do ecr10, e a p*gina a/re&e"ta*html ser* mostrada na segunda .ocupando =>S do ecr10. Links com 4(ames Uempre que se acciona um lin, dentro de uma p*gina, o default 1isto &" o comportamento
    padro2 & que a pgina re#erente a esse lin3 seja carregada na mesma janela da pgina anterior.

    4o e%emplo visto com frames, seguir um lin, dentro da 'anela M direita faz com que a p*gina apontada se'a mostrada ocupando a 'anela da direita .coluna de =>S0: <HTML> <H9Ah><T3TL9>Assunto j</T3TL9></H9Ah> <<6AM9U9T *OL3El@>S, =>Sl> <<6AM9 3+*Elindice-.+tmll> <<6AM9 3+*Elapresenta.+tmll .AMEEprincipal> <4$<6AM9> @?

    Manual HTML

    <8$hi> <H@>8emDvindo M p*gina do assunto jm</+@> <)> 8l* #l* #l* #l* #l* #l* #l* #l* #l* #l* </8$hi> </4$<6AM9> </<6AM9U9T> </HTML> Be'a no cGdigo fonte acima que o frame associado a a/re&e"ta*html tem um atri#uto NAME. 4omear um frame permite que direccionemos o frame em que ser* apresentado o documento de destino de um lin,. 4o e%emplo visto, o arquivo i"$i!eO*html tem um lin, da seguinte forma: <a +refElapresenta@.+tmll tar !t"#r$%&$#a'>ECem/lo "S*@</a>. 3sto indica que se est* definindo .pelo atri#uto target0 o frame em que a p*gina de destino do lin, .a/re&e"ta@*html0 ser* mostrada.

    *omposi%!o com 4(ames


    Iomo '* foi poss&vel o#servar, a formata!1o 7R%MEJET tem atributos que de#inem a
    di!iso do espa$o da janela do bro4ser em colunas ou lin%as. Podemos utilizar uma combina$o de 5#ramesets5 para criar di!ersos modos de apresenta$o do conte'do de um site.

    Antes de ver algumas composi!"es, lem#reDse de que os pontosDc+ave para o mecanismo dos frames s1o estes, mostrados no item anterior:

    a nomea!1o dos frames e a declara!1o dos targets dos lin,s, que definem o frame no qual as p*ginas de destino ser1o mostradas.

    @K

    Manual HTML

    9m#ora quase todos os editores CiU3Ci7 de HTML dHem suporte M cria!1o de frames, necess*rio que o autor se preocupe com os detal+es de nomea!1o de frames e direccionamento de lin,s. Iomo montar dois frames em coluna:

    <<6AM9U9T *OL3El%, nl> &4+AME 3+*,Jcol7 6tmlJ' <<6AM9 3+*Elcol@.+tmll> </<6AM9U9T>

    hois frames em lin+a:

    <<6AM9U9T +OE3El%, nl> &4+AME 3+*,Jlin7 6tmlJ' <<6AM9 3+*Ellin@.+tmll> </<6AM9U9T> )ara montar esta estrutura a#ai%o, deveDse criar primeiro dois frames em coluna e compor a segunda coluna com dois frames em lin+a:

    <<6AM9U9T *OL3El%, nl> &4+AME 3+*,Jcol7 6tmlJ' <<6AM9U9T +OE3El%, nl> &4+AME 3+*,Jlin7 6tmlJ' <<6AM9 3+*Ellin@.+tmll> </<6AM9U9T> </<6AM9U9T> )ara montar esta estrutura a#ai%o, deveDse criar primeiro dois frames em lin+a e compor a segunda lin+a com dois frames em coluna:

    @L

    Manual HTML

    <<6AM9U9T +OE3El%, nl> &4+AME 3+*,Jlin7 6tmlJ' <<6AM9U9T *OL3El%, nl> &4+AME 3+*,Jcol7 6tmlJ' <<6AM9 3+*Elcol@.+tmll> </<6AM9U9T> </<6AM9U9T>

    At(ibutos de 4(ames
    At este ponto, vimos os atri#utos *OL3 e +OE3 .para <6AM9U9T0, 3+* e .AME .para <6AM90. $utros atri#utos permitem um maior controle so#re a apresenta!1o: 9limina!1o das #ordas dos frames: <<6AM9U9T I$LUEl@>S, =>Sl FRAMEBORDER"""o"> <<6AM9 U6IElindiceK.+tmll> <<6AM9 U6IElapresentaK.+tmll 4AM9Elprincipall> </<6AM9U9T> <rame sem #arra de rolagem: <<6AM9U9T I$LUEl@>S, =>Sl> <<6AM9 U6IElindiceK.+tmll SCROLLING"""o"> <<6AM9 U6IElapresentaK.+tmll 4AM9Elprincipall> </<6AM9U9T> Limpa( o ec(! H* #asicamente dois efeitos poss&veis para limpar a apresenta!1o de frames, e isso feito com ltargetsl especiais: TA679TEl(t)#" limpa os frames que estiverem activos, apresentando a p*gina de destino no ecr1 inteiro.

    @A

    Manual HTML

    TA679TEl(*'a%+" a#re uma nova 'anela do #ro(ser para apresentar a p*gina de destino

    4o(mul(ios
    Tm formul*rio fazer formul*rios um modelo para a entrada de um con'unto de dados. $ primeiro passo para aprender as etiquetas que desen+am as 'anelin+as de entrada de dados,

    para depois tra#al+armos com os scripts, que s1o os programas que tratam esses dados, oferecendo os servi!os dese'ados .acesso a #anco de dados, envio de email, etc.0. $ elemento <7ORM> delimita um formul*rio e cont m uma sequHncia de elementos de entrada e de formata!1o do documento. <FORM A*TIO.:"URLN$eN&!ri/t" METHOD:m0to$o>***</FORM> $s atri#utos de 7ORM que nos interessam agora s1o: A*TIO. 9specifica o T6L do script ao qual ser1o enviados os dados do formul*rio. METHOD Uelecciona um m todo para acessar o T6L de ac!1o. $s m todos usados actualmente s1o 79T e )$UT. Am#os os m todos transferem dados do #ro(ser para o servidor, com a seguinte diferen!a #*sica:

    2O3T D os dados entrados fazem parte do corpo da mensagem enviada para o servidor2 D transfere grande quantidade de dados.

    )ET D os dados entrados fazem parte do T6L .endere!o0 associado M consulta enviada para o servidor2 D suporta at -@= caracteres.

    <$6M tam# m pode apresentar o atri#uto: E.*TY2E

    @R

    Manual HTML

    3ndica o tipo de codifica!1o dos dados enviados atrav s do formul*rio. $ tipo default application/%D(((DformDurlencoded. $utro tipo aceito por alguns #ro(sers te%t/plain. $s formul*rios podem conter qualquer formata!1o D par*grafos, listas, ta#elas, imagens D e%cepto outros formul*rios. 9m especial, colocamos dentro da marca!1o de <<$6M> as formata!"es para campos de entrada de dados, que s1o trHs: <34)TT>, <U9L9IT> e <T9jTA69A>. Todos os campos de entrada de dados tHm um atri#uto N%ME, ao qual associamos um nome, que ser* utilizado posteriormente pelo script. U1o os scripts que organizam esses dados de entrada em um con'unto de informa!"es significativas para determinado propGsito.

    I.21T $ campo &I.21T' tem um atri#uto Ti)9, ao qual atri#u&mos seis valores diferentes para gerar seis tipos diferentes de entrada de dados.

    *ampo de dados texto Nuando .NPUT n1o apresenta atri#utos, assumido que TYPE:TETT .default02 a formata!1o: 4ome: <34)TT TY2E:TETT .AME:"Nome"> ou apenas: 4ome: <34)TT .AME:"Nome"> produz o resultado: 4ome:

    *ampo de dados passKo(d 9ntrada de te%to na qual os caracteres s1o escondidos por asteriscos, como se pode ver no e%emplo.

    @=

    Manual HTML

    Login: <34)TT Ti)9ET9jT 4AM9Elogin><#r> Pa&&Gor$2 <.NPUT TY2E:P%JJQORD .AME:"&e"ha"> Login:


    meuNlogi"

    )ass(ord:

    Alguns at(ibutos pa(a os campos de tipo TE-T e 2A33EO+D 0AL1E pode ser usado para dar um valor inicial a um campo de tipo te%to ou sen+a. hesse modo, se o utilizador n1o preenc+er este campo, ser* adoptado este valor padr1o. Ue o utilizador quiser entrar dados, ele simplesmente apaga o que '* estiver escrito e escreve as suas informa!"es. 4ome: <34)TT Ti)9ET9jT 4AM9Elnomel 0AL1E:"Jeu "ome"> 4ome:
    Jeu "ome

    3IDE especi#ica o taman%o do espa$o no displa6 para o campo do #ormulrio. S7 & !lido
    para campos (08( e PASS9.R:. . !alor default 1padro2 & ;*.

    9ndere!o: <34)TT Ti)9ET9jT 3IDE:?<> 9ndere!o: MA-LE.)HT & o n'mero de caracteres aceitos num campo de dados< este atributo s7
    & !lido para campos de entrada (08( e PASS9.R:.

    hia do mHs: <34)TT Ti)9ET9jT 4AM9Ele%l MA-LE.)HT:@> produz o resultado: hia do mHs: Apenas @ caracteres ser1o lidos pelo formul*rio, n1o importa o quanto se escreva neste campo.

    MLltipla escol6a *HE*/BO- insere um #ot1o para escol+a de op!"es. A cada alternativa corresponde um valor a ser manipulado pelo script que processa os dados. 4ote que o nome do campo .4AM90 o mesmo para toda a lista de valores. )ode ser escol+ida mais de uma alternativa.

    @g

    Manual HTML

    <34)TT TY2E:CHECUBOT .AME:"e&/orte" 0AL1E:"ba&5uete">Ba&5uete <br>

    Tma directiva IH9I59h marca uma escol+a inicial, isto , se o utilizador n1o escol+er nen+uma op!1o, o formul*rio ir* considerar a alternativa lpr Descol+idal: <34)TT TY2E:CHECUBOT .AME:"e&/orte" 0AL1E:")olei" *HE*/ED>FVlei <br> <.NPUT TYPE:CHECUBOT N%ME:"e&/orte" F%LUE:"9utebol">7utebol hesportos que pratica: <ute#ol Bolei#ol 4ata!1o 8asquete THnis

    Escol6a Lnica +ADIO insere um #ot1o de escol+a de valores para uma op!1o, isto , somente uma alternativa pode ser escol+ida. 4ote que o nome do campo .4AM90 lista de valores. <34)TT TY2E:R%D.O .AME:"time" 0AL1E:"/alm">Palmeira& <br> <.NPUT TYPE:R%D.O N%ME:"time" F%LUE:"i"te">."ter"a!io"al Tma directiva IH9I59h marca uma escol+a inicial D se o utilizador n1o escol+er nen+uma op!1o, o formul*rio ir* considerar a alternativa lpr Descol+idal: o mesmo para toda a

    ?>

    Manual HTML

    <34)TT TY2E:R%D.O .AME:"time" 0AL1E:"aea" *HE*/ED>%E% <br> <.NPUT TYPE:R%D.O N%ME:"time" F%LUE:""aut">NWuti!o Nual o seu clu#eo )orto2 <erreira 2 Uporting2 Alverca2 8enfica2 8elenenses2 8oavista2 Maritimo2 7uimar1es2 8raga2 )a!os de

    BotFes de ac%!o 31BMIT apresenta o #ot1o que causa o envio dos dados de entrada para o servidor: <34)TT TY2E:JUBM.T>
    Jubmeter !o"&ulta

    P poss&vel modificar o rGtulo desse #ot1o atrav s do atri#uto BALT9 <34)TT TY2E:JUBM.T 0AL1E:"E")ia me"&agem">
    E")ia me"&agem

    +E3ET restaura os !alores iniciais das entradas de dados. <34)TT TY2E:REJET>


    Re/or

    P poss&vel modificar o rGtulo desse #ot1o atrav s do atri#uto BALT9 <34)TT TY2E:REJET 0AL1E:"%/aga tu$oK">
    %/aga tu$oK

    3ELE*T
    &3ELE*T' apresenta uma lista de !alores" atra!&s de campos .P(=.>. <U9L9IT .AME:"&abor"> <OPT.ON>%ba!aCi <OPT.ON>Creme <OPT.ON>Mora"go

    ?-

    Manual HTML

    <OPT.ON>Cho!olate </JELECT>

    Tam# m poss&vel esta#elecer uma escol+aDpadr1o, atrav s do atri#uto U9L9IT <U9L9IT .AME:"&abor"> <OPT.ON>%ba!aCi <OPT.ON 3ELE*TED>Creme <OPT.ON>Mora"go <OPT.ON>Cho!olate </JELECT>

    Iom o atri#uto U3k9, escol+eDse quantos itens da lista ser1o mostrados .no e%emplo,
    SIZE?@2:

    <U9L9IT .AME:"&abor" SI,E:X> <OPT.ON>%ba!aCi <OPT.ON 3ELE*TED>Creme <OPT.ON>Mora"go <OPT.ON>Cho!olate </JELECT>

    Iom o atri#uto MTLT3)L9, defineDse que se pode seleccionar mais de um item .pressionando a tecla U+ift do teclado enquanto se seleccionam os itens0: <U9L9IT .AME:"&abor" SI,E:X MULTIPLE> <OPT.ON>%ba!aCi <OPT.ON 3ELE*TED>Creme

    ?@

    Manual HTML

    <OPT.ON>Mora"go <OPT.ON>Cho!olate </JELECT>

    TE-TA+EA
    &TE-TA+EA' abre uma rea para entrada de texto" de acordo com atributos para
    n'mero de colunas" lin%as" e A se #or o caso A um !alor inicial.

    <T9jTA69A *OL3:X= +OE3:< .AME:"!ome"tario"> DeiCe &eu !ome"tWrio </TETT%RE%>

    Mudio e 0Ideo $ uso de *udio e v&deo na 3nternet tem gan+o muito destaque nos :ltimos dois anos, e sa#er como usar #em estas m&dias. [udio e v&deo s1o classificados como lm&dias cont&nuasl, pois s1o geradas segundo determinadas ta%as, devendo ser reproduzidas nessa mesma ta%a, para evitar distor!"es. Nuanto mais informa!"es de uma sequHncia de *udio ou v&deo digital s1o armazenados, mel+or a qualidade do *udio ou v&deo reproduzido. 3sso implica, logicamente, no facto de fic+eiros de *udio e v&deo serem geralmente muito grandes, o que torna invi*vel o uso mais frequente dessas m&dias em p*ginas Ce#. Al m de procurarmos lidar sempre com pequenos trec+os de *udio e v&deo, podemos e%plorar tecnologias recentes que permitem a transmiss1o em tempo real. #om

    Mudio
    H* duas maneiras de inserir som numa p*gina:

    ??

    Manual HTML

    <9M89h SRC:"au$io*&om"> insere o fic+eiro de som como o#'ecto. <87U$T4h 3+*Elaudio.soml> faz com que o som se'a inserido como som de fundo ou ptril+a sonorap de uma p*gina. 9sta formata!1o sG funciona no 3nternet 9%plorer. 9ssas formata!"es, por m, n1o far1o efeito algum quando o #ro(ser n1o estiver configurado para le%ecutarl o arquivo de som por meio de um plugDin adequado, ou se o computador em que estiver carregada a p*gina n1o tiver instalada uma placa de som.

    Tipos de a(?ui#o de udio


    $s tipos de fic+eiros de *udio s1o escol+idos segundo o tipo de *udio .voz, sons, m:sica0, a aplica!1o desse *udio e a qualidade de reprodu!1o dese'ada. Aqui ser1o apresentados apenas os tipos mais comuns:

    AT .Uun Audio0, usando pelas esta!"es de tra#al+o da Uun Microsnstems. A3<<, usado geralmente em m*quinas Macintos+ e Uilicon 7rap+ics. 63<< .6esource 3nterc+ange <ile <ormat0: pode conter muitos tipos diferentes de dados, incluindo *udio digital .CAB0 e M3h3. 7eralmente, os lfic+eiros M3h3l do Microsoft Cindo(s est1o, na realidade, em formato 63<< e n1o M3h3.

    CAB .Cave0 um su#con'unto da especifica!1o 63<<. AB3 .Audio Bideo 3nterleave0, formato Microsoft. M)97 .Motion )ictures 9%pert 7roup0: o padr1o M)97D? .con+ecido por M)?0 padr1o de compress1o de *udio mais popular actualmente. M3h3 .Musical 3nstrument higital 3nterface0 n1o o

    e%actamente um formato de *udio,

    mas de representao de m sica. Tm arquivo M3h3 armazena informa!"es so#re cada nota e instrumento e, a partir dessas informa!"es, um sintetizador reproduz os sons. )or isso, uma m:sica instrumental em M3h3 geralmente produzir* um fic+eiro muito menor do que a mesma m:sica em Cave ou qualquer outro formato. 0Ideo A inser!1o de v&deo depende #astante do tipo de arquivo de v&deo que temos para inserir em uma p*gina. he maneira geral, esta formata!1o pode servir para a inser!1o de um arquivo Nuic,Time: <9M89h SRC:"ar5ui)o*mo)">

    ?K

    Manual HTML

    Tma formata!1o mais completa inclui a indica!1o do plugDin e controles da reprodu!1o do v&deo.

    ?L

    Vous aimerez peut-être aussi