Apostila HTML

LINGUAGEM DE PROGRAMAO HTML
CURSO SUPERIOR DE FORMAO ESPECFICA EM

GESTO DE AMBIENTES INTERNET
WEBMASTER / WEBDESIGNER
< P r o f. G u s t a v o L o u r e i r o - g_Ioureiro@hot mai I .com >
< w w w . g I o u r e i r o . h p g . c o m . b r >
1
1. Introduo..............................................................................................................................7
2
1.1. Internet............................................................................................................................7
1.2. Intranet...........................................................................................................................7
1.3. WWW (World Wide Web)............................................................................................8
1.4. Web..................................................................................................................................9
1.5. Hipertexto.......................................................................................................................9
1.6. Links o H!perlinks.......................................................................................................9
1.7. Ho"e #a$e....................................................................................................................1%
1.8. &ite.................................................................................................................................1%
1.9. 'ro(sers ()a*e$adores da Web)................................................................................1%
1.1%. #roto+olo.....................................................................................................................11
1.11. #roto+olo H,,# (H!per,ext ,rans-er #roto+ol)....................................................11
1.12. #roto+olo .,# (.ile ,rans-er #roto+ol)....................................................................11
1.12.1. FTP Annimo .......................................................................................................12
1.13. /0L (/ni-or" 0esor+e Lo+ator)............................................................................12
1.13.1. URL Absoluto ......................................................................................................13
1.13.2. URL Relativo .......................................................................................................13
1.13.3. Endereo...............................................................................................................13
1.13.4. Entendendo uma URL...........................................................................................14
1.14. I&# (Internet &er*i+e #ro*ider)................................................................................15
1.14.1. Provedores............................................................................................................15
1.14.2. eu ite na !rande Rede.......................................................................................15
1.14.3. Lo"in.....................................................................................................................15
1.15. 0esol12o....................................................................................................................16
2. HTML (HyperText Markup Language).............................................................................16
2.1. ,34s.............................................................................................................................17
2.2. 5strtra '6si+a...........................................................................................................18
2.2.1. #n$%io e Fim do &o%umento.....................................................................................1'
2.2.2. &e(ini)es L*"i%as sobre o &o%umento..................................................................1'
2.2.3. T$tulo da P+"ina......................................................................................................1'
2.2.4. ,onte-do da P+"ina................................................................................................1'
2.3. ,34 +o" 3tribtos.....................................................................................................19
3. Estrutura da !g"na............................................................................................................2#
3.1. H,7L 89t"l:...8;9t"l:.............................................................................................2%
3.2. H53< 89ead:...8;9ead:.............................................................................................2%
3.2.1. Elementos .resentes em /EA&..............................................................................21
T#TLE 0title1...02title1.....................................................................................................21
,R#PT 0s%ri.t1...02s%ri.t1.............................................................................................21
3ETA 0meta1..................................................................................................................21
3.3. '=<> 8bod!:...8;bod!:.............................................................................................22
3
Atributos de 45&6...........................................................................................................22
$. MET% T%&s '(eta)...........................................................................................................2$
*. +ara,teres Espe,"a"s e %,entuao.....................................................................................31
5.1. Por 7ue usar estas (ormata)es 8...............................................................................34
6. +ores %tra-.s de /a0ores Hexade,"(a"s.............................................................................3$
7. +o(ent!r"os.........................................................................................................................36
1. +ontro0es de 2or(atao....................................................................................................37
8.1. ,?tlos ; &bt?tlos.......................................................................................................37
8.2. @ontroles A.?si+osAde .or"ata12o de ,exto.............................................................38
8.3. @ontroles de .ontes......................................................................................................39
'.3.1. F59T 0(ont1...02(ont1...........................................................................................3:
'.3.2. 4AEF59T 0base(ont1.........................................................................................3:
8.4. .or"ata12o de #ar6$ra-os..........................................................................................4%
8.5. Bebra de Lin9a..........................................................................................................41
8.6. = ,34 'lo+kCote 8blo+kCote:...8;blo+kCote:...................................................41
8.7. = ,34 <ID 8di*:...8;di*:.........................................................................................41
8.8. = ,34 #05 8pre:...8;pre:........................................................................................42
8.9. = ,34 @5),50 8+enter:...8;+enter:......................................................................42
8.1%. = ,34 )='0 8nobr:...8;nobr:..............................................................................42
3. L"stas....................................................................................................................................$3
9.1. Listas =rdenadas..........................................................................................................43
9.2. 5le"entos LI 8li:. . . 8;li:...........................................................................................44
9.3. Listas )2o =rdenadas..................................................................................................46
9.4. Listas de <e-ini12o.......................................................................................................47
1#. L"nks...................................................................................................................................$3
1%.1. Links para dentro da prEpria p6$ina.......................................................................5%
1%.2. #ara otras p6$inas de " "es"o &ite...................................................................5%
1%.3. Links para otros &ites..............................................................................................5%
1%.4. Link espe+ialF A"ailtoA.............................................................................................51
11. I(agens..............................................................................................................................*1
12. 2or(atos de I(agens........................................................................................................*3
12.1. /sando o 4I. (4rap9i+s Inter+9an$e .or"at).......................................................53
12.2. /sando o G#54 (Goint #9oto$rap9i+ 5xperts 4rop)...........................................54
12.3. &obre o #)4 (#ortable )et(or 4rap9i+s)...............................................................54
12.4. I"a$ens no 'ro(ser...................................................................................................54
4
13. Mapas 4ens"t"-os................................................................................................................**
13.1. <e-ini12o.....................................................................................................................56
13.2. <es+ri12o.....................................................................................................................57
1*. Ta5e0as...............................................................................................................................*1
1*. Espaa(ento (6ets,ape 6a-"gator)..................................................................................66
16. Mar7uee (M",roso8t Internet Exp0orer)............................................................................67
17. 2or(u0!r"os.......................................................................................................................63
17.1. 5n*io de 3rCi*os......................................................................................................73
17.2. .=07 .I5L< H 5xe"plos........................................................................................73
1;.2.1. 5ne<Line Te=t 4o= ..............................................................................................;3
1;.2.2. %ollin" Te=t 4o= .................................................................................................;3
1;.2.3. ,>e%? 4o= ............................................................................................................;4
1;.2.4. Radio 4utton ........................................................................................................;4
1;.2.5. &ro.<&o@n 3enu ................................................................................................;4
1;.2.A. Pus> 4utton ..........................................................................................................;5
11. 4o(.....................................................................................................................................77
18.1. @ontroles de &o" do 7i+roso-t Internet 5xplorer..................................................77
4!5U9& 0b"sound1 B3i%roso(t #nternet E=.lorerC.....................................................;;
Atributos de 4!5U9&...................................................................................................;;
18.2. @ontroles de &o" no )ets+ape )a*i$ator................................................................78
13. 2ra(es................................................................................................................................71
19.1. <e-ini12o.....................................................................................................................78
19.2. <o+"entos de La!ot e <o+"entos de @onteIdo...............................................78
1:.2.1. &o%umentos de LaDout.........................................................................................;:
1:.2.2. &o%umentos de ,onte-do.....................................................................................;:
19.3. ,34s e 3tribtos '6si+os.........................................................................................79
19.4. .ra"es &obrepostas <ireta"ente e Indireta"ente.................................................82
19.5. Links e" .ra"e 3l*o.................................................................................................84
2#. 44I (4er-er 4"de In,0ude)..................................................................................................16
21. Etapas para +r"ao de u( 4"te........................................................................................17
21.1. #laneJa"ento..............................................................................................................87
21.2. @oleta de 7aterial......................................................................................................87
21.3. <ire12o 5ditorial........................................................................................................87
21.4. <esi$n .........................................................................................................................87
21.5. #ro$ra"a12o ..............................................................................................................88
21.6. <i*l$a12o .................................................................................................................88
21.7. 7anten12o................................................................................................................88
5
22. 9HTML (HTML 9"n:(",o).............................................................................................11
23. ;ML (Extens"50e Markup Language)..............................................................................11
2$. Ed"tores de HTML.............................................................................................................3#
2*. <e5Ma"0s............................................................................................................................3#
26. 9e8"n"=es...........................................................................................................................3#
26.1. #ro$ra"as @4I (@o""o" 4ate(a! Inter-a+e).....................................................9%
26.2. @lient &ide...................................................................................................................91
26.3. 3&# (3+ti*e &er*er #a$es).........................................................................................91
26.4. #H# (#ersonal Ho"e #a$e).......................................................................................91
26.5. @ripto$ra-ia................................................................................................................91
26.6. #l$HIn.........................................................................................................................91
26.7. 3pplet..........................................................................................................................91
26.8. &er*let..........................................................................................................................92
26.9. @ookie..........................................................................................................................92
26.1%. <o(nload..................................................................................................................92
26.11. /pload.......................................................................................................................92
26.12. 04'...........................................................................................................................93
26.13. @7>K.......................................................................................................................93
6
1. Introduo
Antes de comearmos a estudar HTML, necessrio que se entenda
alguns princpios bsicos que envol vem esta linguagem.
1.1. Internet
nternet uma rede mundi al de milhares de pequenas redes de
computador e milhes de microcomputadores comerciais, educacionais,
governamentais e pessoais que usa os protocolos TCP/P (Transmission
Control Protocol/nternet Protocol) para comunicao.
No centro da nternet existem linhas de comunicao de dados de alta
velocidade entre computadores host, consisti ndo em milhares de
sistemas de computador comerciais, do governo, educacionais e outros,
que encami nham dados e mensagens.
Atual mente, a nternet oferece um grupo de servios para usurios, como
Correio Eletrnico, a World Wide Web, FTP, grupos de notcias Usenet,
Gopher, RC, telnet e outros.
A nternet como uma cidade eletrnica com bibliotecas virtuais, lojas
virtuais, escri tri os virtuais, galerias de arte virtuais, etc.
TCP/IP (Transmission ControI ProtocoI/I nt ernet ProtocoI -
ProtocoIo de ControI e de Transmisso/ProtocoIo Internet )
Conjunto de protocolos utilizados na troca de informaes entre computadores de
diferentes arqui teturas dentro da nternet. O TCP/IP est disponvel para qualquer tipo
de CPU e Sistema Operacional .
1.2. Intranet
ntranet uma rede desenvol vi da para processamento de informaes
em uma empresa ou organizao. Seu uso inclui servios como
distri buio de documentos e software, acesso a bancos de dados e
trei namento.
Uma intranet assim chamada porque ela geral mente emprega
aplicati vos associados nternet, como pginas da Web, navegadores da
Web, sites FTP, Correio Eletrnico, grupos de notcias e listas de
distri buio, acessveis somente s pessoas que fazem parte da empresa.
7
FirewaII (Parede de Fogo)
Firewall um mtodo para proteger os arqui vos e programas em uma rede contra
usurios em outra rede. Um firewal l bloqueia o acesso indesejado a uma rede protegi da,
enquanto fornece rede protegi da o acesso s redes fora do firewal l. Uma empresa
geral mente ir instalar um firewal l para dar aos usurios acesso nternet enquanto
protege as informaes internas.
1.3. WWW (WorId Wide Web)
(AmpI a Rede Mundi aI )
WWW a sigla de World Wide Web que significa Rede Mundial (a grande
rede de computadores interli gados no mundo todo). A World Wide Web
resul tado de um projeto para uma melhor distri buio de informaes a
grupos de pesquisas iniciado no ano de 1989 por cientistas do CERN
(Centro European Researche Nucleare) laboratri o de fsica sediado em
Genebra, na Suia, com o intui to de facili tar a comunicao interna e
externa.
Antes da WWW, os cientistas, assim como toda a comuni dade nternet,
necessitavam de uma srie de programas disti ntos para localizar, buscar
e visualizar as informaes.
Ao final de 1990, os pesquisadores no CERN possuiam um browser
baseado em modo texto. Durante o ano de 1991 a WWW foi liberada para
uso geral no CERN. Durante o ano de 1992, o CERN comeou a anunciar o
projeto WWW. No entanto, apenas em fins de 1993 a World Wide Web
iniciou sua fase de cresci mento explosivo, com a introduo da verso
final do software NCSA Mosaic, um browser, para a comuni dade nternet.
Muitos browsers foram desenvol vi dos para mui tos sistemas de
computadores. Em 1994, a WWW j havia se tornado uma das formas
mais populares de acesso aos recursos da nternet.
O objeti vo inicial era, portanto, centralizar em uma nica ferramenta as
vrias tarefas necessrias para se obter as informaes disponveis na
nternet.
Usurios de todo o mundo foram atrados pela forma simples e diverti da
que a WWW disponi bilizava o contedo da nternet.
A organizao World Wide Web Consorti um (W3C) responsvel pela
padronizao do HTML. A especificao original do HTML foi desenvol vi da,
no CERN, por Tim Berners- Lee atual Preisidente do W3C, que transformou
sua obra em patri mni o coleti vo dos internautas.
A verso padro do HTML hoje a 4.0. Entretando algumas verses de
8
Browsers ainda interpretam somente a verso 3.2 do HTML.
1.4. Web
Web o dimi nuti vo para World Wide Web. Termo usado original mente
para a parte da nternet que surgiu no incio da dcada de 90, composta
por informaes dispostas na forma de textos, imagens e sons, pela qual
se navega com a ajuda de Browsers. Antes, trocava- se basicamente
mensagens. As duas redes acabaram se fundindo e hoje a palavra Web
usada como sinni mo da prpria nternet ("Grande Rede").
1.5. Hipertexto
Original mente, Hipertexto qualquer informao de texto em um
computador, que contenha saltos para outras informaes.
Os documentos visualizados atravs dos Browsers so escritos em
Hipertextos, utilizando- se uma linguagem especial chamada HTML
(HyperText Markup Language).
Atravs de hipertexto pode- se "navegar" de forma especial atravs de
elementos especiais chamados "links" para outros documentos ou para
partes do mesmo documento.
Um documento "no- hipertexto" permi te somente que se navegue em
uma sequncia, percorrendo seu contedo para frente e para trs.
O hipertexto nas pginas da Web foi expandi do para incluir hyperli nks a
parti r de texto, de uma figura, de um elemento grfico, de mapas de
imagens, som e at mesmo ani maes.
Para se ter uma idia de hipertexto, basta visualizar o sistema de "Ajuda"
do Microsoft Windows.
1.6. Links ou HyperIinks
Link um ponto de acesso ou salto at um local na mesma pasta de
trabal ho ou em outro arqui vo, representado a parti r de texto colorido ou
sublinhado, de uma figura, de um elemento grfico ou de um mapa de
imagens.
Voc pode clicar em um link para saltar at um local em um arqui vo em
seu sistema local, em um comparti l hamento de rede na World Wide Web
ou em uma ntranet.
9
1.7. Home Page
Home Page um conjunto de "pgi nas", documentos diponveis na Web,
interli gados entre si (atravs de links). O termo Home Page tambm
usado para designar a "pgi na principal " de um conjunto de documentos.
Um conjunto de "pgi nas" tambm chamado de Site.
Alguns Servidores da Web reservam index.ht m como o nome da home
page (pgina principal ), enquanto outros a denomi nam como defaul t.ht m .
1.8. Site
Palavra em ingls que significa local, lugar. Na nternet, designa um
conjunto de pginas que representa uma pessoa, insti tui o ou empresa
na rede.
1.9. Browsers (Navegadores da Web)
Browsers so softwares que lem e interpretam arqui vos HTML (Hyper
Text Markup Language) enviados na World Wide Web, formata- os em
pginas da Web e os exibe ao usurio. Navegadores da Web tambm
podem executar som ou arqui vos de vdeo incorporados em documentos
da Web se voc dispuser do hardware necessrio.
Existem Browsers para todos os gostos. Os mais utilizados, o nternet
Explorer e o Netscape Navigator, vm acompanhados de outros
programas para nternet, como o leitor de Correio Eletrnico (e-mail).
Existem outras opes de Browsers, basta escolher um deles e parti r
tranquil o pelos "mares" da nternet.
Browsers
nternet Explorer http://www. mi crosoft.com/i e_intl /br/downl oad
Netscape http://www.netscape.com
Opera http://www.operasoftware.com/downl oad.ht ml
NetCaptor http://www.netcaptor.com
PolyWeb http://psibersoft.hypermart.net
NeoPlanet http://www.neopl anet.com
KatieSoft Scroll http://www.kati esoft.com/scroll /downl oad.ht ml
10
Internet ExpIorer Netscape Navigator
1.10. ProtocoIo
Protocolo um conjunto de regras estabeleci das com o objeti vo de
permi ti r a comunicao entre computadores. um mtodo de acesso a
um documento ou servio atravs da nternet, como File Transfer Protocol
(FTP) ou Hypertext Transfer Protocol (HTTP). Tambm denomi nado tipo.
1.11. ProtocoIo HTTP (HyperText Transfer ProtocoI)
(ProtocoIo de Transfernci a de Hipert exto)
HTTP um protocolo da nternet utilizado pelos computadores ligados
Web para comunicar- se entre si, ati va os navegadores da Web para
recuperarem informaes de servidores da World Wide Web.
O protocolo permi te a um usurio usar um programa cliente para entrar
em um URL (ou clicar em um hyperl i nk) e recuperar texto, elementos
grficos, som e outras informaes digi tais de um servidor da Web.
Endereos URL de recursos HTTP comeam com http:// .
1.12. ProtocoIo FTP (FiIe Transfer ProtocoI)
(ProtocoIo de Trasfernci a de Arquivo)
FTP um protocolo que possibili ta a transfernci a de arqui vos de um local
para outro pela nternet.
Normal mente, os sites tm reas pblicas de FTP, permi ti ndo que os
usurios faam download de programas por esse processo.
Protegido por senhas, o FTP tambm utilizado para atualizar a distncia
sites localizados em empresas hospedeiras.
11
URLs de arqui vos em servidores FTP comeam com ftp:// .
1.12. 1. FTP Annimo
A capacidade de acessar um sistema de computador remoto onde no se
tem nenhuma conta, atravs do File Transfer Protocol (FTP - Protocolo de
Transferncia de Arqui vo).
Os usurios tm direi tos de acesso restri tos com o FTP Anni mo e,
geral mente, podem somente listar, exibi r ou copiar arqui vos para ou a
parti r de um diretri o pblico no sistema remoto.
Muitos sites FTP no permi tem o acesso ao FTP Anni mo para manter a
segurana.
1.13. URL (Uniform Resource Locator)
(LocaIizador de Recursos Uniforme)
Um dos principais objeti vos do projeto da WWW era o desenvol vi mento de
um padro de referncia a um item independente de seu tipo (som, filme,
imagem, etc.). Para este objeti vo foi desenvol vi do a URL (Uniform
Resource Locator).
URL (Uniforme Resource Locator, numa traduo literal, Localizador
Uniforme de Recursos) uma seqncia de caracteres que fornece o
endereo nternet de um Site da Web ou um recurso da World Wide Web,
juntamente com o protocolo (como FTP ou HTTP) atravs do qual o site ou
o recurso acessado.
A parte inicial do URL (a que termi na com os dois pontos) indica qual
protocolo nternet est sendo usado.
As duas barras indicam que o que vem a seguir o endereo de um
servidor vlido da nternet ou localizao simblica. Pode ser colocado um
texto
(www.xyz.com. br , por exempl o) ou o endereo P do site.
Endereo IP (Endereo do ProtocoIo Internet )
A manei ra padro de identi fi car um computador conectado nternet, da mesma forma
que um nmero de telefone identi fica um telefone em uma rede telefni ca. Um
endereo P representado por quatro nmeros separados por pontos e onde cada
nmero menor que 256, por exempl o, 192.200.44.69. O admi nistrador de seu servidor
Web ou o provedor de servios de nternet ir atribui r um endereo P a seu computador.
O tipo mais comum de URL http:// , que fornece o endereo nternet de
12
uma pgina da Web. Alguns outros tipos de URL so:
ftp:// que fornece o local da rede de um recurso FTP.
gopher:// que fornece o endereo nternet de um diretri o gopher
news:// grupos de discusso ou de notcias (newsgroups)
maiIto:// para especificar um endereo de Correio Eletrnico da nternet
(para enviar correio eletrnico).
1.13. 1. URL AbsoIuto
indicamos o endereo completo do item que desejamos recuperar.
O URL absoluto inclui um protocolo, como "http", local da rede, alm de
caminho e nome de arqui vo opcionais.
ExempIo: http://www. xyz.com.br/t rei namento/cursos.ht m um URL
Absoluto
1.13. 2. URL ReIati vo
Uma referncia relati va assume- se que a mqui na e diretri o do item j
esto sendo usados e apenas necessita- se indicar o nome do arqui vo
desejado (ou posivel mente subdiretri o e arqui vo).Um URL relati vo inclui
um protocolo.
ExempIo:
O URL relati vo Treinamento/Cursos.ht m refere- se pgina Cursos.htm, na
pasta Treinamento, abaixo da pasta atual.
1.13. 3. Endereo
Endereo o caminho at um objeto, documento, arqui vo, pgina ou
outro desti no.
Um endereo pode ser um URL (Uniforme Resource Locator - Localizador
Uniforme de Recursos) ou um caminho de rede UNC (Universal Naming
Conventi on - Conveno Universal para Nomes), o formato padro para
caminhos que incluem um servi dor de arqui vo de rede de rea local que
utiliza a sintaxe a seguir:
ExempIo: \\servi dor\comparti l hamento\cami nho\nome do arqui vo
O endereo http:// www. xyz.com. br indica um URL do Web Site da XYZ
nformti ca Ltda.
13
1.13. 4. Entendendo uma URL
http:// www. xyz.com. br/ t r ei nament o/ cursos. ht m#I ocaI
http:// Protocolo - Protocolo da nternet utilizado pelos computadores
ligados Web para comunicar- se entre si.
www.xyz.com. br Nome do Domnio - Domnio so as categorias de
endereos da nternet que representam pases ou tipos de organizao.
www Sigla de World Wide Web, significa Rede Mundial
XYZ Nome especfico que pode conter uma ou mais palavras,
separadas ou no, por hifens (ex.: XYZ-informati ca).
com Tipo de Domnio - ndica a natureza do Site. No caso como trata-
se de um Site de uma empresa privada, ".com" vem de comercial.
Outros Exemplo: .gov (governo) e .org (organizaes sem fins
lucrati vos).
br Sigla do Pas - composta de duas letras, significa que a pgina
est situada em um computador no Brasil. Pginas que no possuem
termi nao indicando o pas de origem esto situadas nos Estados
Unidos. Outros Exemplo: .pt (Portugal ) e .jp (Japo).
treinament o Diretrio (pasta) onde est localizado a pgina (arqui vo)
cursos.ht m.
s vezes uma URL indica apenas o diretri o (ou o servidor). Nesse caso, o
servidor se encarrega de procurar e enviar o arqui vo adequado.
cursos.ht m Nome da pgina escri ta em HTML requeri da (pginas da
Web geral mente tem termi nao em .htm ou .html ).
#IocaI Aponta para o local especfico dentro da pgina que ser
exibida.
14
1.14. ISP (Internet Service Provider)
1.14. 1. Provedores
O Provedor uma Empresa ou Organizao que oferece conexo para
nternet. Atravs de um Provedor voc pode ter acesso nternet e
servios de hospedagem de Site. O Provedor disponibiliza as informaes
solicitadas pelos "navegadores" (Browsers) por uma combi nao de
computador e programas que formam os servi dores situados em
instalaes apropri adas, neste caso, o Provedor aluga espao em um
disco rgido cuja mqui na deve estar permanentement e conectada
rede, disponibilizando sua Home Page 24 horas por dia a todos os
usurios da nternet.
A ligao com o provedor pode ser fei ta por linhas telefnicas normais
(conexo discada) ou por linhas especiais, ligadas 24 horas por dia
(conexo dedicada).
Um provedor geral mente oferece vrias funes de aplicaes como
World Wide Web (http), transferncia de arqui vos (ftp) e gerenciamento
de contedo (armazenamento de dados). A maioria dos provedores
tambm disponi bilizam caixa postal eletrnica, "contas" de e-mail para
seus usurios, juntamente com os servios de acesso e hospedagem.
1.14. 2. Seu Site na Grande Rede
Ao desenvol ver sua Home Page, basta transferi r seus arqui vos via FTP
para o Provedor.
Alguns programas especficos podem facili tar o seu Upload, j que o
Browser funciona apenas para busca de arqui vos, e no para o envio. O
CuteFTP um dos mais indicados pelos provedores, que permi te um
acesso total mente grfico e interati vo a servidores FTP. Mas, sem dvi da,
existe um excelente, o nternet Neighborhood. Sua interface comum ao
do Microsoft Windows Explorer, funcionando de manei ra simples,
possibili tando Download e Upload da mqui na local para o servidor FTP,
transferi ndo arqui vos de uma pasta para outra.
1.14. 3. Login
cesso. o processo de identi ficar- se ao entrar num computador ou em
uma rede de computadores. A cada entrada na Internet , voc se "lo!a"
"fa# o lo!in$ em seu Pro%edor , colocando nome "username$ e senha
"pass&ord$ .
15
1.15. ResoIuo
'esolu()o o numero de pixels usados para capturar ou exibi r uma
imagem. A resoluo VGA padro 640 pixels na horizontal e 480 na
vertical. O SuperVGA (SVGA) trabal ha com valores de 800x600 e
1024x768. H quem chame de SSVGA as resolues acima de SVGA,
como 1600x1200. Quanto maiores os nmeros, maiores os detalhes da
imagem.
2. HTML (HyperText Markup Language)
(Linguagem de Format ao de Hipert exto)
Originado do casamento dos padres HyTime (Hypermedi a/Ti me- based
Doumnt Structuri ng Language) e SGML (Standard Generalized Markup
Language), o HTML, sigla para HyperText Markup Language (Linguagem
de Formatao de Hipertexto), linguagem usada para criar pginas na
Web, estabelece como um determi nado elemento deve ser visualizado,
no sendo, portanto uma linguagem de programao, e sim, uma
linguagem de formatao de exibio de textos, atravs de "comandos"
conhecidos como TAGs. Em suma, HTML empregado para definir as
funes dos diferentes elementos das pginas (como textos, fotos ou
ani maes) que sero visualizadas pelo programa de navegao
(Browser).
HyTi me (Hyprmedi a/ Ti me- based Document Structuri ng Language)
HyTi me (SO 10744:1992) o padro para representao estruturada de hipermdi a e
informao baseada em tempo. Um documento visto como um conjunto de eventos
concorrentes dependentes de tempo (udio, vdeo, etc.), conectados por webs ou
hiperl i nks.
O padro HyTi me independente dos padres e processamento de texto em geral. Ele
fornece a base para a construo de sistemas hipertexto padronizados, consistindo de
documentos que aplicam os padres de maneira particular.
SGML (Standard GeneraIized Marup Language)
Padro SO 8879 de formatao de textos: no foi desenvol vi do para hipertexto, mas
torna- se conveniente para transformar documentos em hiper- objetos e para descrever
as ligaes. SGML no aplicado de manei ra padronizada: todos os produtos SGML tem
seu prpri o sistema para traduzi r as etiquetas para um particular formatador de texto.
O documento HTML pode ser escrito em qualquer edi tor de textos , desde
que este tenha a capacidade de grav- lo como cdigo SCII "merican
Standard Code for Informati on Interchan!e * cdigo utilizado para
representar textos quando h computadores envol vi dos $, isto , como
texto puro , sem formatao ou caracteres de control e. Pode-se usar,
portanto, o Notepad do Windows, ou o Edit do MS-DOS. Pode-se tambm
usar edi tores mais modernos, como o Word, sendo necessrio neste caso
16
que o documento seja gravado no formato texto e no como um ".doc"
normal do MS-Word.
Conjunto de caracteres ASCII
O conjunto de caracteres de 7 bits do cdigo padro americano para intercmbi o de
informaes (ASC, American Standard Code for nformati on nterchange) e que
ampl amente usado para representar letras e smbolos encontrados em um teclado
americano padro. O conjunto de caracteres ASC igual aos 128 pri mei ros caracteres
(0127) do conjunto de caracteres ANS.
Conjunto de caracteres ANSI
O conjunto de caracteres de 8 bits do nstituto Nacional de Padronizao Americano
(ANS, American National Standards nsti tute) que usado pelo Microsoft Windows e que
possibili ta a representao de at 256 caracteres (0- 255) atravs do teclado. Os 128
pri mei ros caracteres (0- 127) correspondem a letras e smbolos de um teclado americano
padro. Os outros 128 caracteres (128- 255) representam caracteres especiais, como
letras de alfabetos internaci onais, acentos, smbolos monetri os e fraes.
2.1. TAGs
T+s so os "comandos" do HTML. Um documento HTML composto de
T+s que faro com que o browser monte a pgina de acordo com a
formatao defini da pelos comando HTML.
Um T+ sempre precedido de um caracter "<" (menor que) e seguido
por um caracter ">" (maior que).
ExempIo de TAG: <HTML>
Na maioria dos casos, um T+ deve ter um correspondente, chamado de
T+ de fechamento . Ou seja, um T+ indica onde comea sua rea de
influncia, enquanto o seu correspondente T+ de fechamento indica
onde termi na a rea de influncia.
Um T+ de fechamento tem o mesmo nome do T+ de a,ertura ,
precedi do do caracter "/".
ExempIo de TAG de fechamento: </ HTML>
TAGs podem ser escritas em minsculas ou maiscula, mas nunca podem
haver espaos em branco dentro de T+s, exceto entre atri ,utos e entre
aspas.
ExempIo : <HTML>, <ht mI >, <Ht MI >, <Ht mI >, ...
17
2.2. Estrutura Bsica
A Estrutura Bsica de um documento HTML a seguinte:
ExempIo:
<ht ml > > ncio do Documento
<head> > ncio do Cabealho do Documento
<ti tl e> > ncio do Ttulo do Documento
Aqui entra o Ttulo do documento
</ ti tl e> > Fim do Ttulo do Documento
</head> > Fim do Cabealho do Documento
<body> > ncio do Contedo do Documento
Aqui entra todo o contedo que ser exposto pelo Browser...
</body> > Fim do Contedo do Documento
</ht ml > > Fim do Documento
<ht ml >
Vamos ver um pouco sobre os elementos bsicos do HTML a seguir.
2.2. 1. Incio e Fim do Documento
Os TAGs <HTML> . . . </ HTML> indicam respecti vamente o incio e fim
do documento.
2.2. 2. Definies Lgicas sobre o Documento
Entre os TAGs <HEAD> . . . </ HEAD> esto as defini(-es l.!icas sobre
o documento. Deli mi tam a seo de cabealho do documento. Trata- se da
pri mei ra seo do documento.
2.2. 3. TtuIo da Pgina
Os TAGs <TI TLE> . . . </TI TLE> indicam o ttulo do documento, que ser
apresentado na barra superior do browser. Estas marcas devem constar
da seo de cabealho.
2.2. 4. Contedo da Pgina
Entre os TAGs <BODY> . . . </BODY> esto o conte/do da pgina que
ser exposto pelo Browser, incluindo cabealho e rodap.
18
Corpo do documento. Entre estas marcas estar conti do maior parte so
contedo a ser apresentado, textos, imagens, etc.
2.3. TAG com Atributos
ExempIo:
<ht ml > > ncio do Documento
<head> > ncio do Cabealho do Documento
<ti tl e> > ncio do Ttulo do Documento
Aqui entra o Ttulo do documento
</ ti tl e> > Fim do Ttulo do Documento
</head> > Fim do Cabealho do Documento
<body> > ncio do Contedo do Documento
<p align="center" >Esta a Home Page da XYZ nformti ca e este texto
est centralizado. </ p> > O TAG <P> (pargrafo) est acompanhado do
Atributo ALGN especificando o Valor "CENTER, determi nando que o
texto do pargrafo deve ser alinhado ao centro
</body> > Fim do Contedo do Documento
</ht ml > > Fim do Documento
<ht ml >
19
3. Estrutura da Pgina
O elemento <HTML> contm o elemento <HEAD> e <BODY>.
O T+ <TITLE> localizado na 0rea de influ1ncia , obrigatri o, segundo a
especificao do HTML.
ExempIo:
<ht ml >
<head>
<ti tl e>XYZ nformti ca</ t i t l e>
</head>
<body>
</body>
</ht ml >
3.1. HTML <ht mI >. . . </ ht mI >
Atributo: No possui atributos
ExpIicao: ndica que o documento presente um documento HTML.
Deve englobar todos os demais TAGs.
ExempIo:
<ht ml >
...todos os demais TAGs, textos, etc.
</ht ml >
3.2. HEAD <head>. . . </ head>
ExpIicao: Contm o cabealho do documento diversas informaes
lgicas, isto , que no fazem parte do corpo do documento e portanto
no sero exibidas diretamente.
ExempIo:
<head>
...diversos TAGs contendo informaes lgicas sobre o documento...
</head>
20
3.2. 1. EIementos present es em HEAD
TITLE <ti tI e>. . . </ t i t I e>
ExpIicao: Contm o ttulo do documento. Muitos browsers utilizam o
ttulo como forma de referenciar a pgina em uma lista de links teis
criadas pelo usurio (conhecida como "Bookmarks" ou "Favori tes"). Alm
disso, exibem o ttulo como nome da janela em que a pgina
visualizada. O Ttulo obrigatri o. No confunda o ttul o da pgina com o
nome do arqui vo gravado em disco.
ExempIo:
<ti tl e>
XYZ nformti ca
</ ti tl e>
SCRIPT <script >. . . </ scri pt >
ExpIicao: utilizado para insero de cdigo script (ex.: java Script, VB
Script, etc.) dentro do documento HTML.
ExempIo:
<scri pt >
...cdigo em alguma linguagem script reconheci da pelo browser...
</scri pt >
META <met a>
ExpIicao: Define valores especiais. os valores so defini dos como
pares "name/val ue" (nome/val or).
Atributos de META
Atributo: NAME
ExpIicao: Especifica um nome ao qual um determi nado valor ser
associado. O browser precisa entender esse nome para que o TAG tenha
utilidade.
ExempIo:
<met a name="keywords" content ="NFORMTCA, TRENAMENTO,
CONSULTORA">
Atributo: CONTENT
ExpIicao: Especifica o valor associado a um "NAME".
ExempIo:
CONSULTORA">
21
obrigatri o a presena do atri,uto "NAME" ou do atri ,uto "HTTP-EQUV".
<met a http- equi v="Content- Type" content =" t ext / ht ml ; charset =i so- 8859-
1">
O T+ META utilizado, tambm, para especificar palavras chaves que
sero catalogadas por 2erramentas de 3usca.
3.3. BODY <body>. . . </ body>
ExpIicao: Deve englobar toda a parte fsica do documento, isto , o
que deve ser exibido pelo Browser.
Atributos de BODY
Atributo: BACKGROUND
ExpIicao: Define uma imagem que ser utilizada como "fundo" da
pgina. Caso a imagem tenha um tamanho inferior ao da pgi ma ela ser
repeti da diversas vezes de forma a cobrir o fundo do documento
ExempIo:
<body background="i mages/fundo.gi f" >
...diversos TAGs, textos etc...
</body>
Atributo: BGCOLOR
ExpIicao: Define a cor de fundo da pgina
ExempIo:
<body bgcolor =" whi t e" >
Atributo: TEXT
ExpIicao: Define a cor do texto da pgina
ExempIo:
<body text =" bl ack" >
Atributo: LNK
ExpIicao: Define a cor dos links ainda no visi tados
ExempIo:
<body link="bl ue" >
Atributo: VLNK
ExpIicao: Define a cor dos links j visitados nos lti mos x dias onde x
um valor definido pelo usurio em seu browser.
ExempIo:
<body vlink="purpl e" >
22
Atributo: ALNK
ExpIicao: Define a cor dos links no instante em que so clicados pelo
usurio.
ExempIo:
<body alink="red" >
ExempIo:
<body link="bl ue" vlink="purpl e" alink="red" >
Atributo: BGPROPERTES (Microsoft nternet Explorer)
ExpIicao: Deve ter o valor "fi xed". ndica que o fundo da pgina fixo,
isto , no "rola" junto com o contedo da pgina.
ExempIo:
<body background="i mages/fundo.gi f" bgproperti es=" f i xed" >
Atributo: LEFTMARGN (Microsoft nternet Explorer)
ExpIicao: Especifica uma quanti dade de espao (em pixels) a ser
deixada como margem esquerda do documento.
ExempIo:
<body leftmargi n=" 20" >
Atributo: TOPMARGN (Microsoft nternet Explorer)
ExpIicao: Especifica uma quanti dade de espao (em pixels) a ser
deixada como margem superior do documento.
ExempIo:
<body toptmargi n=" 20" >
ExempIo do EIemento BODY com todos os seus Atributos:
<ht ml >
<head>
</head>
<body background="i mages/fundo.gi f" link="bl ue" vlink="purpl e"
alink="red" bgproperti es="f i xed" bgcolor =" whi t e " text =" bl ack"
topmargi n=" 20" leftmargi n=" 20" >
<p><a href ="ht t p:// www. xyz.com.br" >Oi ! Eu sou um link! </ a></ p>
</body>
23
4. META TAGs <met a>
As M4T T+s direcionam suas pginas.
Utilizando as T+s HTML padro, voc no capaz de fornecer
informaes histricas sobre o contedo 5e,, como quem criou uma
pgina especfica, ou quando ela foi modi ficada pela lti ma vez.
O HTML projetado pri mari amente para apresentar informaes, no
para registrar detalhes. A T+ <META> pode armazenar esta informao
de mais alto nvel nas pginas 5e,.
Uma tecnologi a importante que entra em jogo sempre que voc utiliza as
M4T T+s, o HTTP. O Protocolo de Transfer1ncia de Hipertexto "HTTP *
H6perText Transfer Protocol$ especifica como as informaes so
transferi das para a Internet e utilizadas para solicitar documentos 5e, e
como retornar respostas.
As respostas so formadas com um cabealho HTTP e corpo da
mensagem. O cabealho contm informaes que os navegadores
necessitam para interpretar o documento, como seu tipo de contedo. O
corpo da mensagem traz o restante do contedo do documento.
Normal mente, os cabealhos HTTP so defini dos automati camente pelos
servidores 5e, baseados nas respostas s solici taes de recursos. Mas
em vez do servi dor 5e, ter de determi nar quais cabealhos so
utilizados, voc pode modificar cabealhos existentes ou criar o seu
prpri o utilizando o atri,uto HTTP- EQUIV na T+ <META> .
sso possibili ta personalizar o comportamento do navegador e do
servidor.
O tipo de conte/do padr)o e o con7unto de caracteres para o servi dor so
texto/ ht mI e ISO- 8859- 1 (Western, Latin- 1) . O Ser%idor define esta
informao em um cabealho HTTP da seguinte forma: Content- Type:
text/ ht mI ; CHARSET=iso- 8859- 1
Atributo: HTTP-EQUV="CONTENT-TYPE"
ExpIicao: Define o tipo contedo padro.
ExempIo: http- equi v="Content- Type"
Atributo: CONTENT="TEXT/HTML; CHARSET=SO-8859- 1"
ExpIicao: Define o conjunto de caracteres.
ExempIo: content =" t ext / ht ml ; charset =i so- 8859- 1"
ExempIo:
1">
24
O "CONTENT- TYPE" apenas um de vrios meta %alores semelhantes.
Aqui esto mais alguns:
Atributo: HTTP-EQUV="CONTENT-DSPOSTON"
ExpIicao: Especifica um mani pul ador de aplicati vo para o arqui vo.
ExempIo: http- equi v="Content- Disposi ti on"
Atributo: HTTP-EQUV="CONTENT-SCRPT-TYPE"
ExpIicao: Define a linguagem de macro- padro.
ExempIo: http- equi v="Content- Script- Type"
Atributo: HTTP-EQUV="CONTENT-STYLE-TYPE"
ExpIicao: Define a linguagem de folha de estilo padro.
ExempIo: http- equi v="Content- Style- Type"
Atributo: HTTP-EQUV="CONTENT-LANGUAGE"
ExpIicao: Declara a linguagem natural para a pgina.
ExempIo: http- equi v="Content- Language"
ExempIo:
<ht ml >
<head>
<met a http- equi v="Content- Language" content =" pt - br" >
1">
</head>
<body>
<p>Esta a Home Page XYZ nformti ca</ p>
</body>
</ht ml >
25
Atravs da M4T T+ REFRESH" , de !erenciamento de conte/do final ,
pode- se redirecionar o 3ro&ser automati camente de uma pgina para
outra, mostrando uma mensagem rpida em uma pgina, antes de entrar
em uma outra pgina.
Atributo: HTTP-EQUV="REFRESH"
ExpIicao: Gerenciamento de contedo final. Redireciona o Browser
automati camente, de uma pgina para uma outra pgina.
ExempIo:
<met a http- equiv="ref resh" content =" 2;
URL=ht t p: // www. xyz.com. br/page1.ht m" >

Esta M4T T+ mui to til para mudanas de endereo, levando o
usurio automati camente para o novo endereo.
Para informar ao navegador que a parti r da pa!e8.ht m deve recuperar a
pa!e9.ht m em cinco segundos, ficaria assim:
ExempIo:
<ht ml >
<head>
<met a http- equi v=" ref resh" content =" 5; URL=page1.ht m" >
<ti tl e>T tul o da Page 0 (pa!e8.ht m )</ti tl e>
</head>
<body>
Corpo do Documento
</body>
</ht ml >
A pa!e8.ht m aparecer ao acessar a sua Home Pa!e com uma mensagem
ou efei to, e aps 5 segundos, carregar a pa!e9.ht m .
Outras definies de M4T T+ incluem informaes referentes verso
do HTML, verso do navegador, ferramentas de criao Web e
mecanismos de pesquisa.
A maioria destas fontes de M4T T+ adicionais utilizam o atri,uto
NAME, que designa informaes suplementares que no tm um
cabealho HTTP relacionado.
Em cada uma destas T+s, o atri ,uto NAME identi fica o %alor real ,
enquanto o atri ,uto CONTENT especifi va um %alor associado ao NAME.
Atributo: NAME="AUTOR"
ExpIicao: Determi na o nome do autor.
ExempIo:
<met a name="Autor" content ="Wi l l i am Sheakspeare" >
26
Atributo: NAME="COPYRGHT"
ExpIicao: Define as informaes de direi tos autorais.
ExempIo:
<met a name="Copyri ght " content =" 1999- 2000 XYZ nformti ca Ltda." >
Atributo: NAME="GENERATOR"
ExpIicao: Define a ferramenta de criao que gerou a pgina.
ExempIo:
<met a name="Generator" content ="Mi crosoft FrontPage 4.0" >
Atributo: NAME="REPLY-TO"
ExpIicao: Define o endereo de e-mail para contato.
ExempIo:
<met a name="Repl y- To" content ="XYZ@XYZ.com.br" >
Alguns navegadores e mecanismos de pesquisa podem no ser capazes
de interpretar suas M4T T+s e simplesmente as ignoraro. A meta
informao sempre adicionada ao cabealho da pgina na 0rea de
influ1ncia entre as "marcas" <HEAD> e </ HEAD> juntamente com as
"marcas" <TITLE> e </TITLE> .
ExempIo:
<ht ml >
<head>
1">
<met a name="GENERATOR" content ="Mi crosoft FrontPage 4.0" >
</head>
<body>
</body>
</ht ml >
As classificaes do mecanismo de pesquisa ajudam a sondar clientes e
rendi mentos. Para obter as melhores classificaes, utilize as M4T T+s.
As tcnicas de M4T T+s que iro trabal har em seu favor
(razoavel mente, claro) no atri ,uto NAME incluem: "KEYWORDS" ,
"DESCRIPTION" e "ROBOTS"
27
Atributo: NAME="KEYWORDS"
ExpIicao: Conjunto de listas de palavras- chave.
ExempIo:
CONSULTORA">
Atributo: NAME="DESCRPTON"
ExpIicao: Conjunto de descries.
Como alguns mecanismos de pesquisa utilizam descries de pginas
menores do que 200 caracteres, tente colocar as informaes mais
relevantes pri mei ro.
ExempIo:
<met a name="descri pti on" content ="XYZ nformti ca vem prestando
Servios de Desenvol vi mento; Manuteno e mplantao de Sistemas;
Consultori a; Treinamento e Suporte Tcnico, h quase dez anos. No
mercado carioca desde o incio de 1991, a XYZ trabal ha com as mais
importantes empresas pblicas e privadas do Brasil." >
Atributo: NAME="ROBOTS"
ExpIicao: Conjunto de control es de indexao.
ExempIo:
<met a name="robots" content ="NONDEX, NOFOLLOW">
Veja os %alores de conte/do (atri,uto CONTENT ) para especificar como a
pgina deve ser indexada:
Atributo: CONTENT="ALL"
ExpIicao: ndexa a pgina a todos os seus vnculos (padro).
ExempIo: content ="ALL"
Atributo: CONTENT="NDEX"
ExpIicao: ndexa a pgina.
ExempIo: content ="NDEX"
Atributo: CONTENT="FOLLOW"
ExpIicao: Segue os vnculos.
ExempIo: content ="FOLLOW"
Atributo: CONTENT="NOFOLLOW"
ExpIicao: No segue os vnculos.
ExempIo: content ="NOFOLLOW"
Segundo a especificao do HTML :.8, as palavras- chaves relacionadas a
ndice e os valores de nome "ROBOTS" devem ser determi nadas em
letra mai/scula .
28
Em vez de empregar NAME="ROBOTS" em cada pgina Web, uma
soluo alternati va criar um arqui vo ro,ots.txt e posicion- lo no
diretri o principal do seu Site.
O arqui vo ro,ots.txt funciona de manei ra semelhante ao
NAME="ROBOTS" , mas pode ser usado para especificar conjuntos de
arqui vos e diretri os a serem excludos da indexao.
ExempIo:
<ht ml >
<head>
CONSULTORA">
<met a name="descri pti on" content ="XYZ nformti ca vem prestando
Consultori a; Treinamento e Suporte Tcnico, h quase dez anos. No
mercado carioca desde o incio de 1991, a XYZ trabal ha com as mais
importantes empresas pblicas e privadas do Brasil." >
<met a name="robots" content ="NONDEX, NOFOLLOW">
</head>
<body>
</body>
</ht ml >
Graas ao grande cresci mento nos mecanismos de pesquisa mul tilnge,
voc pode desejar criar verses de idiomas especficos das palavras-
chave, descries e outros meta dados. Para fazer isto, utilize o atri ,uto
LANG para especificar uma preferncia de idioma.
Atributo: LANG="PT-BR"
ExpIicao: Portugus Brasileiro
ExempIo: lang="pt- br"
Atributo: LANG="PT"
ExpIicao: Portugus Portugal
ExempIo: lang="pt "
Atributo: LANG="EN"
ExpIicao: ngls Britnico
ExempIo: lang="en"
Atributo: LANG="EN- US"
ExpIicao: ngls Norte-
Americano
ExempIo: lang="en- us"
Atributo: LANG="RU"
ExpIicao: Russo
ExempIo: lang="ru"
Atributo: LANG="T"
ExpIicao: taliano
ExempIo: lang="i t "
ExempIo:
29
<ht ml >
<head>
<met a name="keywords" lang="pt- br" content ="NFORMTCA,
TRENAMENTO, CONSULTORA">
</head>
<body>
</body>
</ht ml >
No irri tante quando outros Sites exibem suas pginas dentro das
molduras deles? Uma forma no mui to elegante de evitar isso
empregando o "Window- target" com um valor "_top" .
O valor "_top" informa aos navegadores compatveis para carregarem a
pgina dentro do conjunto de molduras superior. sso evita que a pgina
aparea emoldurada no interior de outra.
ExempIo:
<met a http- equi v="Wi ndow- target" content ="_top" >
As M4T T+s tambm podem ajuda- lo a gerenciar contedo - e esta
uma rea que todo 5e,Master deveria apreciar.
Os 5e,Masters deveri am gerenciar adequadamente o contedo como
M4T T+s, informando aos navegadores quando solici tar verses mais
recente de pginas, quando no armazenar as pginas em cache, etc.
Voc informa aos navegadores quando solicitar verses de pginas mais
recentes definindo uma data de validade com HTTP- EQUIV="EXPIRES" .
Os navegadores interpretam datas ilegais como um venci mento imediato.
Para evi tar isso, as datas devem ser definidas no formato RFC850 .
ExempIo:
<met a http- equi v="expi res" content ="Mon, 12 Apr 1999 10:00:00 GMT">
Cuidado ao utilizar as datas de validade. Alguns indexadores excluem as
pginas vencidas do seu ndice mestre ou programa de reindexao da
pgina.
Uma outra forma de controlar o cache usar o PRAGMA com um valor
de "NO- CACHE", que emi te a mesma solici tao de quando
pressionamos o 'eload "'ecome(ar$ do "na%e!ador" , O " NO- CACHE" o
nico valor vlido, e utilizado da seguinte manei ra:
ExempIo:
<met a http- equi v=" pragma" content =" no- cache" >
Quando voc planejar adicionar meta informa(-es ao seu Site 5e,,
comece pela Home Pa!e "P0!ina Principal$ . Depois de atualizar a Home
30
Pa!e e as pginas de nvel superior, considere adicionar as meta
informaes ao restante de seu Site.
5. Caracteres Especiais e Acentuao
As formas de representar caracteres especiais, atravs de uma notao
especfica, so chamadas de Entidades . Existem " Entidades de
Caracter e " Entidades Numricas .
ExempIo:
Caracter Entidade de
Caracter
Entidade Numrica Descrio
ç ç c cedilha (minscul o)
HTML permi te que caracteres especiais sejam representados por
se;<1ncias de escape , indicadas por tr1s partes : um " & (e () comercial)
inicial, " um nmero ou cadeia de caracteres correspondent e ao
caracter desejado , e um " ; (ponto e vrgula) final.
ExempIo:
Caracter
&atil de; ã a c/ til
Um caracter bastante til o espao no ignorvel, o " (Non-
breaki ng space). Este caracter importante quando desejamos forar o
browser a no ignorar espaos em branco entre palavras.
Caracter
Non- breaki ng space Espao no
ignorvel
ExempIo:
<body>
<p>Vej a como fica com espao no
ignorvel ! </ p>
</body>
VisuaIizao peIo Browser:
Veja como fica com espao no ignorvel !
31
Os caracteres ASCII " < (menor que), " > (maior que), e " & (e ()
comercial) tem significados especiais para indicar um comando HTML.
Mas por vezes queremos exibir estes smbolos na tela e so usados
dentro de documentos seguindo a correspondncia:
Caracter
& & & E() comercial
< < < Menor que
> > > Maior que
Outras se;<1ncias de escape suportam caracteres ISO Latin1 . Temos
aqui uma tabela com as entidades mais utilizados em Portugus:
TabeIa de Caracteres Especiais e Acentuao
Caracter
Tabulao Horizontal
Espao no
ignorvel
" " " Aspas
À À A c/ crase
Á Á A c/ acento agudo
Â Â A c/ acento
circunflexo
Ã Ã A c/ til
Ç Ç C cedilha
(mai scul o)
É É E c/ acento agudo
Ê Ê E c/ acento
circunflexo
´ Í c/ acento agudo
Ó Ó O c/ acento agudo
Ô Ô O c/ acento
circunflexo
&Otil de; Õ O c/ til
Ú Ú U c/ acento agudo
&Uuml ; Ü U c/ trema
à à a c/ crase
á á a c/ acento agudo
â â a c/ acento
circunflexo
&atil de; ã a c/ til
ç ç c cedilha (minscul o)
é é e c/ acento agudo
ê ê e c/ acento
circunflexo
í í i c/ acento agudo
&ntil de; ñ n c/ til
ó ó o c/ acento agudo
ô ô o c/ acento
circunflexo
&otil de; õ o c/ til
32
ú ú u c/ acento agudo
&uuml ; ü u c/ trema
33
Veja outras enti dades numricas:
TabeIa de Caracteres Especiais e Acentuao
Caracter
# # Tralha
$ $ Cifro
% % Percente
5.1. Por que usar estas format aes ?
Os browsers costumam tambm mostrar corretamente os caracteres
acentuados normal mente. Essa prtica, embora facili te sobremanei ra a
digi tao dos documentos, no recomendada "ainda", devido a um
problema relati vo a transmisso desses caracteres.
Chama- se conjunto de caracteres uma representao digi tal de texto. Um
caracter um smbolo cujas diversas representaes devem significar a
mesma coisa para uma comuni dade de pessoas. Na prtica, porm,
existem alguns conjuntos que associam dois nmeros distintos a um
mesmo caracter.
Os Browser j permi tem que se escolha a codificao adequada ao
conjunto de caracteres relati vo aos documentos a serem recuperados.
Mas para garanti r a interpretao apropri ada de um documento, pode- se
inserir uma indicao do esquema de codificao, atravs do campo:
1">
Na World Wide Web, os acentos da Lngua Portuguesa chegam a travar os
Browsers de usurios em outros pases, que usam um conjunto de
caracteres diferentes do ISO Latin 1 apesar do ISO Latin 1 ser padro
na Web.
6. Cores Atravs de VaIores Hexadeci mais
As cores so definidas atravs de um valor hexadecimal de 6 algarismos, ou atravs
de seus nomes.
Os nomes padronizados so: aqua, bIack, bIue, fuchsia, gray, green, Iime,
maroon, navy, oIive, purpIe, red, siIver, teaI, white e yeIIow. Estes nomes foram
escolhidos por serem os nomes originais das cores suportadas pelas primeiras
verses do MS-Windows. Alguns 3ro&sers implementam outros nomes no
padronizados.
34
TabeIa de Cores Atravs de VaIores Hexadecimais
Antiquewhite.......
Aqua..................
Aquamarine........
Azure.................
Beige..................
Bisque................
Black..................
Blanchedalmond
Blue...................
Blueviolet...........
Brown.................
Burlywood..........
Cadetblue...........
Chatreuse...........
Chocolate...........
Coral..................
Carnflowerblue...
Cornsilk..............
Crimson.............
Cyan..................
Darkblue.............
Darkcyan............
Darkgoldenrod....
Darkgray............
Darkgreen..........
Darkkhaki...........
Darkmagenta......
Darkolivegreen...
Darkorange........
Darkorchid..........
Darkred..............
Darksalmon........
Darkseagreen.....
Darkslateblue.....
Darkslategray.....
Darkturquoise.....
Darkviolet...........
Deeppink............
Deepskyblue......
Dimgray.............
Dodgerblue.........
Firebrick.............
Floralwhite..........
Forestgreen........
Fuchsia..............
Gainsboro..........
Ghostwhite.........
Gold...................
#FAEBD7
#00FFFF
#7FFFD4
#F0FFFF
#F5F5DC
#FFE4C4
#000000
#FFEBCD
#0000FF
#8A2BE2
#A52A2A
#DEB887
#5F9EA0
#7FFF00
#D2691E
#FF7F50
#6495ED
#FFF8DC
#DC143C
#00FFFF
#00008B
#008B8B
#B8860B
#A9A9A9
#006400
#BDB76B
#8B008B
#556B2F
#FF8C00
#9932CC
#8B0000
#E9967A
#8FBC8F
#483D8B
#2F4F4F
#00CED1
#9400D3
#FF1493
#00BFFF
#696969
#1E90FF
#B22222
#FFFAF0
#228B22
#FF00FF
#DCDCDC
#F8F8FF
#FFD700
Goldenrod......................
Gray..............................
Green............................
Greenyellow...................
Honeydew......................
Hotpink..........................
ndianred.......................
ndigo............................
vory..............................
Khaki.............................
Lavander.......................
Lavanderblush...............
Lawngreen.....................
Lemonchiffon.................
Lightblue........................
Lightcoral.......................
Lightcyan.......................
Lightgoldenrodyelloow...
Lightgreen.....................
.
Lightgray........................
Lightpink........................
Lightsalmon...................
Lightseagreen................
Lightskyblue...................
Lightslategray................
Lightsteelblue................
Lightyellow.....................
Lime..............................
Limegreen.....................
Linen.............................
Magenta........................
Maroon..........................
Mediumaquamarine.......
Mediumblue...................
Mediumorchid................
Mediumpurple................
Mediumseagreen...........
Mediumslateblue...........
.
Mediumspringreen.........
Mediumturquoise...........
Mediumvioltred..............
Midnightblue..................
Mintcream.....................
.
Mistyrose.......................
Moccasin.......................
Navajowhite...................
Navy..............................
Oldlace..........................
#DAA520
#808080
#008000
#ADFF2F
#F0FFF0
#FF69B4
#CD5C5C
#4B0082
#FFFFF0
#F0E68C
#E6E6FA
#FFF0F5
#7CFC00
#FFFACD
#ADD8E6
#F08080
#E0FFFF
#FAFAD2
#90EE90
#D3D3D3
#FFB6C1
#FFA07A
#20B2AA
#87CEFA
#778899
#B0C4DE
#3FFFFE0
#00FF00
#32CD32
#FAF0E6
#FF00FF
#800000
#66CDAA
#0000CD
#BA55D3
#9370DB
#3CB371
#7B68EE
#00FA9A
#48D1CC
#C71585
#191970
#F5FFFA
#FFE4E1
#FFE4B5
#FFDEAD
#000080
#FDF5E6
Olive.....................
Olivedrab..............
Orange.................
.
Orangered............
.
Orchid...................
Palegoldenrod.......
Palegreen.............
Paleturquoise........
Palevioletred.........
Papayawhip..........
Peachpuff.............
Peru......................
Pink......................
Plum.....................
Powderblue...........
Purple...................
Red.......................
Rsybrown..............
Royalblue..............
Saddlebrown.........
Salmon.................
Sandybrown..........
Seagreen..............
Seashell................
Sienna..................
Silver....................
Skyblue.................
Slateblue..............
.
Slategray..............
Snow....................
.
Springgreen..........
Steelblue..............
.
Tan.......................
Teal......................
Thistle...................
Tomato.................
Turquoise..............
Violet....................
Wheat...................
White....................
Whitesmoke..........
Yellow...................
Yellowgreen..........
#808000
#6B8E23
#FFA500
#FF4500
#DA70D6
#EEE8AA
#98FB98
#AFEEEE
#DB7093
#FFEFD5
#FFDAB9
#CD853F
#FFC0CB
#DDA0DD
#B0E0E6
#800080
#FF0000
#BC8F8F
#4169E1
#8B4513
#FA8072
#F4A460
#2E8B57
#FFF5EE
#A0522D
#C0C0C0
#87CEEB
#6A5ACD
#708090
#FFFAFA
#00FF7F
#4682B4
#D2B48C
#008080
#D8BFD8
#FF6347
#40E0D0
#EE82EE
#F5DEB3
#FFFFFF
#F5F5F5
#FFFF00
#9ACD32
35
7. Comentri os
! <!- - ... -->
ExpIicao: Nada do que for escrito dentro deste TAG ser interpretado
pelo browser.
Comentri os so extremamentes teis para facili tar a manuteno das
pginas, que mui tas vezes poder ser fei ta por uma pessoa diferente
daquela que a escreveu pela pri mei ra vez. Atravs dos comentri os, se
explica o que se deseja com cada comando.
ExempIo:
<!- - Comentri o -->
ExempIo:
<!- -
=== = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
-->
ExempIo:
<ht ml >
<head>
</head>
<body>
<!- -------------------- Link para o Site da XYZ nformti ca ------------------->
<p><a href ="ht t p:// www. xyz.com.br" >Oi ! Eu sou um link para o site da
XYZ nformti ca! </ a></ p>
</body>
</ht ml >
Oi! Eu sou um link para o site da XYZ nformti ca!
36
8. ControI es de Format ao
8.1. TtuIos / Subt tuIos
Hn <hn>. . . </ hn>
ExpIicao: ndica que o texto influenciado uma "HEADER"
"ca,e(alho$ . Os cabealhos tm seis nveis de importnci a, sendo o nvel
"1" o mais importante e o nvel "6" o menos.
ExempIo:
<h1>Este o cabealho de nvel 1</h1>
Nota:
Veja os nveis de cabealho e o equival ente aos tamanhos da fonte.
(h1 - 24 pt / h2 - 18 pt / h3 - 14 pt / h4 - 12 pt / h5 - 10 pt / h6 - 8 pt).
Este o cabealho de nvel 1
Este o cabeal ho de nvel 5
Atributos de Hn
Atributo: ALGN
ExpIicao: ndica se o cabealho ser alinhado a esquerda (padro),
central izado ou a direi ta, usando- se, respecti vamente, as palvras "LEFT",
"CENTER" e "RGHT".
ExempIo:
<h1 align="l ef t " >Text o Um</h1>
<h2 align="center" >Text o Dois</h2>
<h3 align="ri ght " >Text o Trs</h3>
37
8.2. ControIes "Fsicos"de Format ao de Texto
I <i >. . . </ i > ou EM <em>. . . </ em>
ExpIicao: ndica que o texto deve ser apresentado em it0lico.
ExempIo: <i >Este texto est em itlico</i >
ExempIo: <em>Este texto tambm est em itlico</ em>
VisuaIizao peIo Browser: 4ste texto est0 em it0lico
B <b>. . . </ b> ou STRONG <strong>. . . </ st rong>
ExpIicao: ndica que o texto deve ser apresentado em negri to .
ExempIo: <b>Este texto est em negri to</ b>
ExempIo: <strong>Este texto tambm est em negri to</st rong>
VisuaIizao peIo Browser: Este texto est em negri to
U <u>. . . </ u>
ExpIicao: ndica que o texto deve ser apresentado sublinhado .
ExempIo: <u>Este texto est sublinhado</ u>
VisuaIizao peIo Browser: Este texto est sublinhado
STRIKE <stri ke>. . . </ st ri ke>
ExpIicao: ndica que o texto deve ser apresentado com um trao
cortando- o.
ExempIo: <stri ke>Este texto est strike !</stri ke>
VisuaIizao peIo Browser: Este texto est strike !
SUB <sub>. . . </ sub>
ExpIicao: ndica que o texto deve ser apresentado em subscri to.
ExempIo: <sub>Este texto est subscri to</sub>
Este texto est subscrito
38
SUP <sup>. . . </ sup>
ExpIicao: ndica que o texto deve ser apresentado em sobrescri to .
ExempIo: <sup> Este texto est subrescri to </sup>
Este texto est subrescrito
8.3. ControIes de Fontes
8.3. 1. FONT <font >. . . </ f ont >
ExpIicao: Existem 7 tamanhos de fonte em HTML, numeradas de 1 a 7.
O tamanho padro 3.
As cores so definidas atravs de um valor hexadeci mal de 6 algarismos,
ou atravs de seus nomes.
Caso o usurio no possua nenhuma das fontes listadas, ser usada uma
fonte padro. Usual mente a fonte padro a Times New Romam.
ExempIo:
<font face="Ti mes New Roman" size="5"
color=" #000000" >Text o</ f ont >
Atributos de FONT
Atributo: SZE
ExpIicao: ndica qual o tamanho de fonte que deve ser usado dentro
de sua rea de influncia.
ExempIo:
<font size="5" >Text o</ f ont >
Atributo: COLOR
ExpIicao: ndica qual a cor da fonte dentro de sua rea de influncia
ExempIo:
<font color =" #000000" >Text o</ f ont >
<font color ="bl ack" >Text o</ f ont >
Atributo: FACE
ExpIicao: Determi na a fonte (tipo de letra) a ser utilizada. Como valor
deve ter uma lista de nomes de fontes separados por vgula.
ExempIo:
<font face="Ti mes New Roman" >Text o</ f ont >
ExempIo:
<font face="Verdana, Arial, Helvetica" >Texto</ f ont >
8.3. 2. BASEFONT <basefont >
Atributo: SZE
39
ExpIicao: Determi na o tamanho base de fonte para uma pgina. O
TAG deve ser usado no incio do documento, logo aps <body>.
ExempIo:
<body>
<basefont size="3" >
<p>Text o</ p>
<p><f ont face="Ari al " color=" #FF0000" >Text o</ f ont ></ p>
</body>
8.4. Format ao de Pargrafos
P <p>. . . </ p>
ExpIicao: ndica que o texto influenciado um pargrafo, e possui um
alinhamento prprio. Os browsers, habi tual mente, deixam um espao
vertical em branco de cerca de "uma linha" antes de cada pargrafo.
ExempIo:
<p>Esta a Home Page da XYZ nformti ca. E este um exempl o de
pargrafo. </ p>
Atributos de P
Atributo: ALGN
ExpIicao: ndica se o pargrafo ser alinhado a esquerda (padro),
central izado, a direi ta ou justificado usando- se, respecti vamente, as
palvras "LEFT", "CENTER", "RGHT" e "JUSTFY".
ExempIo:
<p align="center" >Esta a Home Page da XYZ nformti ca. E este um
exempl o de pargrafo central izado. </ p>
40
8.5. Quebra de Linha
BR <br >
ExpIicao: Passa para a prxi ma linha.
ExempIo:
<p>Este texto ficar
na mesma linha. <br >
E este em outra linha. </ p>
Este texto ficar na mesma linha.
E este em outra linha.
8.6. O TAG BIockquote <bIockquot e>. . . </ bI ockquot e>
ExpIicao: Faz a margem comear mais dentro da pgina. O efei to
deste TAG pode ser acumul ado, obtendo assim margens maiores.
ExempIo:
<bl ockquote>Esta a Home Page da XYZ nformti ca. E este um
exempl o de margem visualizada pelo Browser. </ bl ockquote>
Esta a Home Page da XYZ nformti ca. E este um exempl o de
margem visualizada pelo Browser.
8.7. O TAG DIV <di v>. . . </ di v>
ExpIicao: ndica que o texto influenciado uma diviso, e possui
portanto um alinhamento prprio.
Atributos de DIV
Atributo: ALGN
ExpIicao: ndica se a diviso ser alinhado a esquerda (padro),
central izado, a direi ta ou justificado usando- se, respecti vamente, as
palvras "LEFT", "CENTER", "RGHT" e "JUSTFY". utilizado no lugar do
TAG <p>, quando se deseja modi ficar o alinhamento sem, no entanto,
uinserir- se espao vertical em branco.
ExempIo:
<di v align="ri ght " >Esta a Home Page da XYZ nformti ca. E esta a
minha diviso. </ di v>
41
8.8. O TAG PRE <pre>. . . </ pr e>
ExpIicao: Usual mente o browser ignora os espaos em branco e as
quebras de linha existentes no documento fonte, formatando o texto de
acordo com o tamanho de sua janela. Com a utilizao deste TAG os
espaos e as quebras de linha so honrados. O browser exibe o contedo
de <pre> usando uma fonte diferente da usual.
ExempIo:
<pre>
Esta a Home Page da XYZ nformti ca.
Aqui nos veremos:Trei namento
Consul tori a
Representaes
Solues Web
</pre>
8.9. O TAG CENTER <cent er >. . . </ cent er >
ExpIicao: Centraliza o texto influenciado. o TAG <center > foi criado
quando no havia outras formas de se centralizar os elementos na tela.
Hoje faz parte da definio do HTML para que seja manti da a
compati bi li dade com pginas escri tas no passado.
ExempIo:
<center >
Esta a Home Page da XYZ nformti ca. Este texto ser central izado.
</center >
8.10. O TAG NOBR <nobr >. .. </ nobr >
ExpIicao: mpede que o texto em sua rea de influncia seja
"quebrado", isto , dividi do em mais de uma linha. Deve- se usar este TAG
de forma cuidadosa. Normal mente o usurio no deseja ser obrigado a
empregar a "scroll bar" para ler o contedo de uma pgina.
ExempIo:
<nobr >Este texto ficar
na mesma linha
ao visualiza- lo no browser. <nobr >
Este texto ficar na mesma linha ao visualiza- lo no browser.
42
9. Listas
9.1. Listas Ordenadas
OL <oI >. . . </ oI >
ExpIicao: ndica o incio e o final de uma lista ordenda (numerada).
ExempIo:
<ol >
<l i > Treinamento </l i >
<l i > Consultori a </l i >
<l i > Desenvol vi mento </l i >
<l i > Manuteno </l i >
</ol >
1. Treinamento
2. Consultori a
3. Desenvol vi mento
4. Manuteno
Atributos de OL
Atributo: START
ExpIicao: Especifica o nmero do pri mei ro elemento da lista.
ExempIo:
<ol start ="10" >
</ol >
10. Treinamento
11. Consul tori a
13. Manuteno
43
Atributo: TYPE
ExpIicao: Define o tipo de numerao empregada na lista. Pode
assumi r os valores "1 (1, 2, 3, 4, etc) ", "" (, , , V, etc), "i" (i, ii, iii, iv,
etc), "A" (A,B, ..., Z) ou "a" (a, b, ..., z).
ExempIo:
<ol type="A" >
</ol >
A. Treinamento
B. Consultori a
C. Desenvol vi mento
D. Manuteno
9.2. EIementos LI <Ii >. . . </Ii >
LI <Ii >
ExpIicao: Demarca os elementos de listas ordenadas e n)o ordenadas .
ExempIo:
<ol >
</ol >
1. Treinamento
2. Consultori a
4. Manuteno
44
Atributos de LI
Atributo: TYPE
ExpIicao: Deve ser usado somente em listas no numeradas. ndica
qual o smbolo a ser usado para demarcar o elemento.
ExempIo:
<ul type="square" >
<l i type=" di sc" > Consul tori a </l i >
</ul >
E Treinamento
Consultori a
E Desenvol vi mento
E Manuteno
Atributo: VALUE
ExpIicao: Deve ser usado somente em listas numeradas. Altera a
sequncia da numerao.
ExempIo:
<ol >
<l i value="15" > Desenvol vi mento </l i >
</ol >
1. Treinamento
2. Consultori a
16. Manuteno
Nota:
Este TAG deve estar presente somente na rea de influncia dos TAGs
<OL> (Listas Ordenadas) ou <UL> (Listas No Ordenadas).
O texto presente em cada item da lista pode ser formatado normal mente.
No entanto, no so permi ti dos "headers" (H1, H2, H3 etc.).
45
9.3. Listas No Ordenadas
UL <uI >. . . </ uI >
ExpIicao: ndica o incio e o final de uma lista no numerada
ExempIo:
<ul >
</ul >
Treinamento
Consultori a
Desenvol vi mento
Manuteno
Atributo de UL
Atributo: TYPE
ExpIicao: ndica qual o smbolo deve ser usado para demarcar cada
elemento da lista. Pode ser os valores "disc" ( ), "circle" () ou
"square"( ).
ExempIo:
<ul type="ci rcl e" >
</ul >
Treinamento
Consultori a
Desenvol vi mento
Manuteno
46
9.4. Listas de Definio
DL <dI >. . . </ dI >
ExpIicao: Demarca os elementos de listas ordenadas e no ordenadas.
ExempIo:
<dI >
<dt > Treinamento </dt >
<dd> um departamento da XYZ nformti ca. </dd>
<dt > Consultori a </dt >
<dd> um outro departamento! </dd>
</ dI >
Treinamento
um departamento da XYZ nformti ca.
Consultori a
um outro departamento!
Nota:
So mui to teis para estruturas do tipo "dicionri o", onde um termo
citado e ento explicado. Na Web mui to utilizada para listas de URLs e
seus respecti vos comentri os.
DT <dt >
ExpIicao: Representa o termo defini do, a ser explicado em <DD>.
ExempIo:
<dl >
<dt > Treinament o </ dt >
<dd> um departamento da XYZ nformti ca. </dd>
<dt > ConsuItori a </ dt >
<dd> um outro departamento! </dd>
</dl >
Treinament o
um departamento da XYZ nformti ca.
ConsuItori a
um outro departamento!
47
Nota:
No devem conter TAGs referentes a: HEADER, Pargrafo, Listas, Texto
Pre-Formatado, Diviso, CENTER, BLOCKQUOTE, Formulrio, SNDEX,
Linha Horizontal ou Tabela.
DD <dd>
ExpIicao: Representa a definio do termo presente em <DT>. No
deve conter HEADERs.
ExempIo:
<dl >
<dt > Treinamento </dt >
<dd> um depart ament o da XYZ Informtica. </ dd>
<dt > Consultori a </dt >
<dd> um outro depart ament o! </ dd>
</dl >
Treinamento
um depart ament o da XYZ Informtica.
Consultori a
um outro depart ament o!
48
10. Links
Os pontos que ligam os hipertextos so chamados de h!er"i n#s$ "in#s
o% &ncoras de hi!erte'to .
O T+ que indica a regio a ser tratada como um h6perli n= o par <A> e
</ A> * "" "anchor$ . Dentro desse T+, na forma de atri,uto , colocada
a refer1ncia ao arqui vo ligado. A refer1ncia indica a U'L do documento.
Quando o usurio clicar sobre o trecho realado pela >ncora de
hipertexto , o arqui vo ligado ser requisi tado ao servidor e mostrado na
janela do navegador.
Geral mente o Browser apresenta os links em azul e sublinhados, mas
como j vimos possvel alterar isso atravs dos parmetros opcionais do
elemento <BODY> .
A <a>. . . </ a >
ExpIicao: ndica a regio a ser tratada como hyperli nk
ExempIo:
<a href ="ht t p://www. xyz.com.br" >XYZ nformti ca</ a>
XYZ nformti ca
Atributos de A
Atributo: HREF
ExpIicao: Define que sua rea de influncia um link.
ExempIo:
<p> Clique em <a
href ="ht t p:// www. xyz.com.br/cursos.ht m" >Cursos</ a> para acessar a
pgina dos Descri ti vos dos Cursos. </p>
Clique em Cursos para acessar a pgina dos Descri ti vos dos Cursos.
Existem quatro formas de se especificar um lin= :
49
10. 1. Links para dentro da prpria pgina
O local precisa ter um "nome" . Este "nome" definido da seguinte
forma:
ExempIo:
<a href =" #nome" >Li nk para o Nome</a>
.
.
.
<a name="nome" ><a >
10. 2. Para outras pginas de um mesmo Site
ExempIo:
<a href ="nome.ht m" >Li nk para o Nome</a>
Nesse caso, assumi u- se que o arqui vo nome. ht m estava localizado no
mesmo diretri o da pgina que referncia. Caso o arqui vo nome. ht m
esteja em outro diretri o, pode- se utilizar a "U'L relati %a" pgina de
destino.
ExempIo:
<a href ="/ t rei nament o/cursos/pgi na.ht m" >Li nk para a Pgina</a>
Pode-se, ainda, referenciar uma pgina utilizando- se a navegao em
diretri os, semelhante ao que se faz no DOS, lanando mo do operador
".." .
Se na pgina http:// www. xyz.com. br/ t rei nament o/cursos.ht m existi r
um lin= que aponta para o endereo:
http:// www. xyz.com. br/consuI tori a/ desenvoI vi ment o. ht m , este
pode ser representado da seguinte maneira:
ExempIo:
<a href ="../consul tori a/desenvol vi mento.ht m" >Li nk para o
Desenvol vi mento</ a>
10. 3. Links para outros Sites
Deve- se usar a U'L completa da pgina desti no.
ExempIo:
<a href ="ht t p://www. xyz.com.br/t rei nament o/cursos.ht m" >Li nk para
outro Site</a>
50
10. 4. Link especiaI: "maiIto"
Existe um tipo de lin= chamado de "maiIto:" . Se, quando o lin= for
definido, o protocolo utilizado for "maiIto:" ao invs de "http://" , o lin=
abrir uma janela especial para que se possa enviar um e*mail "correio
eletr?nico$ para o endereo especfico.
ExempIo:
Mande um<a href =" mai l to:XYZ@XYZ.com.br" >e- mail </a>para a XYZ.
Mande um e-mail para a XYZ.
11. Imagens
IMG <i mg>
ExpIicao: Este TAG exibe uma imagem na pgina.
Atributos de IMG
Atributo: SRC
ExpIicao: Obrigatri o, indica a URL da imagem a ser exibida. Podem
ser usadas
URL absoluto (http://www. xyz.com.br/i mages/i magem.gi f) ou URL relati vo
(/images/i magem.gi f)
ExempIo:
<i mg src="/i mages/i magem.gi f" >
Atributo: ALT
ExpIicao: ndica um texto asociado imagem. Quando a imagem no
puder ser exibida, o texto exibido em seu lugar. Este texto tambm
exibido quando o cursor fica parado sobre a imagem.
ExempIo:
<i mg src="/i mages/i magem.gi f" alt ="Logoti po da XYZ nformti ca" >
Atributo: ALGN
ExpIicao: Determi na o alinhamento da imagem em relao ao texto
existente na mesma linha. Os valores vlidos so "TOP", "MDDLE",
"BOTTOM","LEFT" e "RGHT".
ExempIo:
<i mg src="/i mages/i magem.gi f" align=" t op" >
Atributo: WDTH
ExpIicao: Determi na a largura, em pixels, da imagem.
ExempIo:
<i mg src="/i mages/i magem.gi f" width=" 600" >
51
Atributo: HEGHT
ExpIicao: Determi na a altura, em pixels, da imagem.
ExempIo:
<i mg src="/i mages/i magem.gi f" height =" 60" >
Atributo: BORDER
ExpIicao: Determi na a largura, em pixels, da imagem.
ExempIo:
<i mg src="/i mages/i magem.gi f" border ="2" >
Atributo: HSPACE
ExpIicao: Determi na a quanti dade de espao deixado em branco aos
lados da imagem, de forma que ela no fique demasiadamente prxi ma
dos outros elementos da pgina.
ExempIo:
<i mg src="/i mages/i magem.gi f" hspace="10" >
Atributo: VSPACE
ExpIicao: Determi na a quanti dade de espao deixado em branco
acima e abaixo da imagem.
ExempIo:
<i mg src="/i mages/i magem.gi f" vspace="10" >
Atributo: USEMAP
ExpIicao: ndica que a imagem um mapa sensiti %o interpretado
total mente .
ExempIo:
<i mg src="/i mages/i magem.gi f" usemap=" #mapal ocal " >
Atributo: DYNSRC (Microsoft nternet Explorer)
ExpIicao: Determi na qual o vdeo ou ambiente VRML ser exibido.
Pode ser usado em conjunto com SRC. Dessa forma, quando o usurio
no possuir suporte a vdeo, ver uma imagem esttica em seu lugar.
Os vdeos devem estar em formato AV.
ExempIo:
<i mg src="i magemXYZ.gi f" dynsrc=" vdeoXYZ.avi " >
Atributo: LOOP (Microsoft nternet Explorer)
ExpIicao: ndica quantas vezes o videoclip ser exibido. Se o valor for
"-1" ou "infi ni te" ele ser exibido conti nuamente.
<i mg src="i magemXYZ.gi f" dynsrc=" vdeoXYZ.avi " loop="5" >
Atributo: START (Microsoft nternet Explorer)
ExpIicao: Pode assumi r os valores "fileopen" (o videoclipe ser exibi do
assim que a pgina for aberta, o que o defaul t ) ou "mouseover" (o
videoclip ser exibido quando o cursor toca- lo).
52
<i mg src="i magemXYZ.gi f" dynsrc=" vdeoXYZ.avi " loop="5"
start =" mouseover" >
Alguns Browsers, como o nternet Explorer 3 e 4 e o Netscape
Comunicator 4, expe o texto presente no atri buto ALT quando o cursor
toca a imagem. O texto exibido em "bales de texto" ou similares.
Os atributos WIDTH e HEIGHT so extremamente importantes. Os
browsers, tendo informaes sobre a altura e a largura das imagens, no
precisam esperar que elas cheguem por inteiro para conti nuar a exibio
do resto do documento. Alm disto, WIDTH e HEIGHT podem ser usados
para distorcer imagens.
Pode-se usar o atri buto BORDER para se retirar a borda de um link
(quando claro, este for uma imagem). No entanto, deve- se tomar
cuidado para no confundi r o usurio, pois este poder no perceber que
a imagem tambm um link.
12. Formatos de Imagens
+I2 (Graphics nterchange Format) e @P4+ (Joint Photographic Experts
Group) so os dois formatos grficos padres usados na nternet, cada
formato tem suas vantagens e desvantagens, como analisado a seguir.
Os dois formatos de imagens so bastante utilizados, mas possuem
caractersticas diferentes.
12. 1. Usando o GIF (Graphics Interchange Format )
O +I2 apresenta um bom rendi mento no tamanho e qualidade em
imagens com cores "li mpas", sem mui to detalhes. Possui suporte para
imagens ani madas e com partes "transparentes".
Trabalha com cores indexadas, podendo representar um mxi mo de
256 cores.
Armazena imagens com grandes reas planas (da mesma cor) de
forma bastante eficiente.
No possui nveis de compreensso, apesar de j ser natural mente
compactado (GFs tem uma compresso padro).
Podem ser entrel aadas. Uma imagem entrel aada (interlaced) pode
ser vista medida que vai sendo carregada (melhorando a definio
aos poucos).
Pode-se defini r uma das cores como sendo "transparente", permi ti ndo
que se veja o que est por trs. O recurso de transparncia mui to
interessante, pois permi te criar a sensao de que as imagens no so
todas retangul ares.
Permi te a criao de ani maes (GFs Animados). O Princpio do GF
53
Animado o mesmo de um fil me que vemos no cinema, ou seja uma
sequncia de imagens transmi ti da rapidamente, uma animao
propri amente dita. Os anncios (chamados de banners) que se v na
Web, na verdade so, GFs Animados.
12. 2. Usando o JPEG (Joint Photographic Experts Group)
O @P4+ melhor para imagens que apresentam mui tos tons de cor. Este
formato ideal para trabal har com fotografi as digi tais e imagens
complexas.
Pode representar imagens com at 16 milhes de cores.
Armazena imagens complexas de forma eficiente.
Tem uma compresso varivel. Porm, como nem tudo perfei to,
quanto mais voc compri me, maior ser a perda da qualidade. A
compresso padro em torno de 33 (numa escala de 1 a 100), mas a
ideal, s testando mesmo. Quanto maior o nmero, pior fica a
qualidade.
No possui o recurso de transparnci a, portanto sempre aparecem
retangul ares na tela.
O entrelaamento pode ser conseguido utilizando o formato
Progressive Rendered JPEG, uma nova verso criada para possibili tar
um carregamento igual ao de um GF entrel aado. Os Browsers de
lti ma gerao j entendem este formato numa boa, mas no os
anti gos.
No permi te a criao de ani maes.
12. 3. Sobre o PNG (PortabI e Networ Graphics)
Um formato novo, ainda no mui to comum na nternet, o PNG
(PortabI e Network Graphics) , desenvol vi do por um grupo formado
especial mente com este fim. Ele uma evoluo das +I2s que
conhecemos, mantendo diversas de suas caractersticas e incorporando
novas com pouco custo de implementaco aos desenvol vedores. Suporta
cores T'U4COLO' ":A ,its por pixel$ , interlaamento, transparncia, etc.
Foi desenvol vi do para, no futuro, substi tui r o +I2 e o @P4+.
Nota:
PNG pronunciado "ping".
12. 4. Imagens no Browser
Uma imagem GF pode conter at 256 cores. Para isso, so necessrios 8
bits para cada pixel da imagem. Se a sua imagem tem 128 ou 64 cores,
significa que cada pixel vai precisar de 7 ou 6 bits respecti vamente. E
ainda, se a sua imagem tem somente 16 cores ela requer somente 4 bits
54
por pixel, reduzindo em 50% o tamanho do arqui vo quando comparado
com o de 256 cores.
Da mesma forma que no GF, existem ajustes finos possveis no JPEG.
Neste formato, o tamanho do arqui vo depende da qualidade que voc
pode optar para a sua imagem. Alm disso, alguns softwares permi tem
que voc configure a resoluo da imagem . A maioria das imagens
salva com a resoluo de 300 dpi (pontos por polegada). Porm como a
resoluo da maioria dos moni tores (padro SVGA) de computador de
96 dpi, pode- se sempre dimi nui r para este valor.
Experi mente fazer alguns testes com os dois formatos, variando o
nmero de cores, compresso e resoluo.
Ferrament as Grficas e GIFs Animados
Paint Shop Pro 6.0 / Animati on Shop http://www.j asc.com/psp.ht ml
Photoshop 5.5 / mageReady 2.0 http://www.adobe.com
Lista com diversas opes no Site da Tucows, na seo Image
Animators
mage Animators http://wwwt ucows.mat ri x.com.br/i mgani 95.ht ml
13. Mapas Sensiti vos
Atravs do concei to de Mapa Sensiti %o "Clic=a,le Map$ , podem ser criados
diversos lin=s dentro de uma mesma imagem. O usurio ser
encami nhado para uma U'L determi nada pelo local da imagem
selecionada.
MAP <map>. . . </ map>
ExpIicao: ndica o incio e o final do mapa. Pode ficar em qualquer
parte da pgina.
ExempIo:
<map name=" mapa1" >
...
</ map>
Atributos de MAP
Atributo: NAME
ExpIicao: Atributo obrigatri o, indica o nome do mapa.
ExempIo:
...
55
</ map>
AREA <area>
ExpIicao: Define as reas da imagem que esto relacionadas a links, e
que links so esses. Dentro da rea de influncia de <MAP>, podemos ter
um nmero qualquer de tags <AREA>.
ExempIo:
<area coords="0,0,29,29" href ="pagi na2.ht m" >
Atributos de AREA
Atributo: COORDS
ExpIicao: Define as coordenadas da rea. Varia de acordo com o
formato declarado em "SHAPE".
ExempIo:
Atributo: HREF
ExpIicao: ndica a URL desti no da rea.
ExempIo:
Atributo: NOHREF
ExpIicao: ndica que aquela rea ser neutra.
ExempIo:
<area coords="12,0,30,45" nohref >
Atributo: SHAPE
ExpIicao: ndica o formato da rea. Pode ser "RECT", "CRCLE" ou
"POLYGON". Caso seja omi ti do, assume- se "RECT".
ExempIo:
<area shape="ci rcle" coords="50,50,15" href ="pagi na3.ht m>
Nota:
Para " RECT", usa-se o formato " x1, y1, x2, y2 ", definindo- se o canto
superior esquerdo e o inferior direi to do retngul o.
Para " CIRCLE", "x,y,r ", definindo- se o ponto central e o raio.
Para " POLYGON ", "x1, y1, x2, y2, x3, y3, x4, y4, ... " .
Para se criar um Mapa Sensiti vo Interpret ado IocaIment e deve- se
passar por duas etapas: Definio e Descrio
13. 1. Definio
Adiciona- se o atributo "USEMAP" no T+ da imagem que vir a ser o
56
Mapa Sensiti %o .
USEMAP=" #mapa1" , onde "mapa1" o nome do mapa descri to
atravs dos T+s <MAP>. . . </ MAP>
ExempIo:
<i mg src="i magem.gi f" width="600" height =" 60" alt ="i magem.gi f"
border ="0" usemap=" #mapa1" >
Foi inserida, atravs do T+ <I MG> uma imagem no documento. O
atributo "USEMAP" define esta imagem como um Mapa Sensiti %o local.
ExempIo:
O Mapa Sensiti %o ser descri to atravs do T+ <MAP> . O nome da
descrio ser "mapa1" .
ExempIo:
Esta imagem no funcionar como um Mapa Sensiti %o em ,ro&sers
anti !os , pois estes ignoraro o atri buto "USEMAP" .
13. 2. Descrio
Uma imagem com 600 Pixels de Largura e 60 Pixels de Altura ser
dividida em dois blocos para serem fei tos links para duas pginas
distintas.
ExempIo:
<ht ml >
<head>
</head>
<body>
<area shape="rect " coords="300,2,600,60"
57
Link para
ht t p://www.t ouch.com.br/
consult oria.ht m
Link para
ht t p://www.t ouch.com.br/
t reinament o.ht m
href ="ht t p// www. xyz.com.br/ trei namento.ht m" >
<area shape="rect " coords="0,0,300,60"
href ="ht t p:// www.XYZ.com/consul tori a.ht m" >
</ map>
</body>
</ht ml >
Foi criado um Mapa Sensiti %o interpretado local mente. Para isso, o T+
<I MG> foi utilizado na definio da imagem e do respecti vo mapa.
Em seguida, o mapa definido, atravs dos T+s <MAP> e <AREA> .
ExempIo feito com a ajuda de um Editor de HTML:
<ht ml >
<head>
</head>
<body>
<p><! - -webbot bot =" mageMap"
rectangl e="(300,2) (600, 60) http://www. xyz.com.br/t rei namento.ht m"
rectangl e="(0,0) (300, 60) http://www. xyz.com.br/consul tori a.ht m"
src="i magem.gi f" width=" 600" height =" 60" alt ="i magem.gi f" border ="0"
--></ p>
</body>
</ht ml >
15. TabeIas
Assim como as listas, no HTML existem elementos especficos para a
criao e formatao de tabelas. O recurso de tabelas mui to
interessante e mui to usado nas pginas Web.
O concei to o mesmo conhecido usual mente: ela tem linhas e colunas, e
na interseo delas esto as clulas.
Na linguagem HTML voc pode inserir nas clulas tudo o que
normal mente faz parte do corpo de um documento, como textos, links,
imagens, listas e at outras tabelas.
TABLE <tabI e>. . . </ t abI e>
ExpIicao: ndica o incio e o final de uma determi nada tabela. Todas as
demais marcas referentes a tabelas - linhas e clulas - somente sero
consideradas se incluidas entre <t abI e> e </ tabI e> .
<tabl e>
<t r >
<t d>Text o A</td>
58
<t d>Text o B</td>
</ tr >
</ tabl e>
Atributos de TABLE
Atributo: BORDER
ExpIicao: Se presente, a tabela apresenta bordas. Se for atri buto o
valor 0 (zero), no somente a tabela no apresentar bordas, como o
espao usual mente reservado para bordas ser liberado, permi ti ndo a
confeco de tabelas mais compactas.
ExempIo:
<tabl e border =" 4" >
Atributo: CELLSPACNG
ExpIicao: ndica quanto espao, em pixels, deve ser inserido entre as
clulas da tabela.
ExempIo:
<tabl e cellspacing="10" >
Atributo: CELLPADDNG
ExpIicao: ndica quanto espao, em pixels, deve ser inserido entre as
bordas das clulas e seu contedo.
ExempIo:
<tabl e cellpaddi ng=" 5" >
Atributo: WDTH
ExpIicao: ndica a largura da tabela. Usa-se como medi da o nmero de
pixels desejado ou uma porcentagem da largura do documento.
ExempIo:
<tabl e width=" 300" >
Atributo: ALGN
ExpIicao: ndica a posio da tabela no documento. Pode assumi r os
valores "LEFT" ou "RGHT", indicando, respecti vamente, que a tabela deve
estar a esquerda ou a direi ta do documento, e com o texto "fluindo" sua
volta.
ExempIo:
<tabl e align="center" >
ExpIicao: Especifica uma imagem que ser utilizada como
"background" da tabela. A imagem ser "TLED", isto , repeti da de forma
a cobrir todo o fundo da tabela.
ExempIo:
<tabl e border background="i magem.gi f" >
59
Atributo: BGCOLOR
ExpIicao: Especifica uma cor de fundo para a tabela.
ExempIo:
<tabl e border bgcolor =" yel l ow" >
Atributo: BORDERCOLOR
ExpIicao: Especifica uma cor para as bordas da tabela.
ExempIo:
<tabl e border bgcolor =" yel l ow" bordercolor ="bl ue" >
Atributo: BORDERCOLORLGHT
ExpIicao: Especifica uma das cores utilizadas para desenhar a borda
com efei to tridi mensional da tabela.
ExempIo:
<tabl e border bgcolor =" yel l ow" bordercolorl i ght =" bl ue" >
Atributo: BORDERCOLORDARK
ExpIicao: Especifica uma das cores utilizadas para desenhar a borda
com efei to tridi mensional da tabela.
ExempIo:
<tabl e border bgcolor =" yel l ow" bordercolordark=" bl ue" >
Atributo: RULES
ExpIicao: ndica quais linhas internas a tabela deve apresentar. Pode
assumi r os valores: "ROWS (somente as linhas horizontais)", "COLS
(somente as linhas verticais)", "NONE (nenhuma)" e "ALL (todas)".
ExempIo:
<tabl e border bgcolor =" yel l ow" rules="rows" >
Atributo: FRAME
ExpIicao: ndica quais bordas externas a tabela deve apresentar. Pode
assumi r os valores: " VOID (nenhuma) ", "ABOVE (topo da tabeI a) ",
"BELOW (base da tabeI a) ", "HSIDES (topo e base da tabeI a) ", "LHS
(Iado direi to da tabeI a) ", "VSIDES (esquerda e direi ta da tabeI a) " e
"BOX (todas) ".
ExempIo:
<tabl e border bgcolor =" yel l ow" frame="bel ow" >
Todos os atributos de uma tabela so opcionais. Uma tabela padro no
possui bordas e sua altura e largura so as mni mas necessrias para
suportar seu contedo.
TR <tr >. . . </ t r >
ExpIicao: ndica o incio e o final de uma determi nada linha da tabela
(Table Row). Uma linha composta de elementos.
ExempIo:
60
<tabl e>
<t r >
<t d>Text o A</td>
<t d>Text o B</td>
</ tr >
</ tabl e>
Atributos de TR
Atributo: BGCOLOR
ExpIicao: Define a cor de fundo de uma linha da tabela.
ExempIo:
<tabl e>
<t r bgcolor ="red" >
<t d>Text o A</td>
<t d>Text o B</td>
</ tr >
</ tabl e>
TD <t d>. . . </ t d>
ExpIicao: ndica um elemento (clula) da tabela, vindo do ingls "Table
Data". Os elementos contm os dados da tabela, sejam eles texto, links,
imagens, etc.
ExempIo:
<tabl e>
<t r >
<t d>Text o A</td>
<t d>Text o B</td>
</ tr >
</ tabl e>
Atributos de TD
Atributo: ALGN
ExpIicao: Define se o contedo da clula estar alinhado a esquerda
("LEFT"), central izado ("CENTER") ou a direi ta ("RGHT").
Se omi ti do, o alinhamento fica esquerda.
ExempIo:
<tabl e>
<t r >
<t d align="ceter" >Text o A</td>
<t d>Text o B</td>
</ tr >
</ tabl e>
Atributo: VALGN
61
ExpIicao: Define se o contedo da clula estar alinhado com seu topo
("TOP"), centralizado ("MDDLE") ou com sua base ("BOTTOM").
Se omi ti do o alinhamento fica ao meio.
ExempIo:
<tabl e>
<t r >
<t d valign=" mi ddl e" >Text o A</td>
<t d>Text o B</td>
</ tr >
</ tabl e>
Atributo: WDTH
ExpIicao: Define a largura da clula. Pode ser expressa em pixels ou
como uma porcentagem da largura total da tabela.
ExempIo:
<tabl e>
<t r >
<t d width=" 30%" >Text o A</td>
<t d width=" 70%" >Text o B</td>
</ tr >
</ tabl e>
Atributo: COLSPAN
ExpIicao: ndica quantas "clulas de largura" (colunas) a respecti va
clula deve ocupar.
ExempIo:
<tabl e>
<t r >
<t d colspan="2" >Text o A</td>
</ tr >
<t r >
<t d>Text o B</td>
</ tr >
</ tabl e>
Atributo: ROWSPAN
ExpIicao: ndica quantas "clulas de altura" (linhas) a respecti va clula
deve ocupar.
ExempIo:
<tabl e>
<t r >
<t d rowspan="2" >Text o A</td>
<t d>Text o B</td>
</ tr >
<t r >
62
<t d>Text o C</td>
</ tr >
</ tabl e>
63
ExpIicao: Define uma imagem como fundo de uma clula.
ExempIo:
<tabl e>
<t r >
<t d background=" f i l e:///c:\seta.gi f" >Text o A</td>
<t d>Text o B</td>
<t d>Text o C</td>
</ tr >
</ tabl e>
Atributo: BGCOLOR
ExpIicao: Define a cor de fundo de uma determi nada clula.
ExempIo:
<tabl e>
<t r >
<t d bgcolor =" yel l ow" >Text o A</td>
<t d>Text o B</td>
<t d>Text o C</td>
</ tr >
</ tabl e>
TH <t h>. . . </ t h>
ExpIicao: ndica um elemento da tabela. A nica diferena para "TD"
que o elemento identi ficado como "HEADER" (cabealho) da tabela.
ExempIo:
<tabl e>
<t r >
<t h>Text o A</th>
</ tr >
</ tabl e>
Atributos de TH
ExpIicao: Define se o contedo da clula estar alinhado a esquerda
("LEFT"), central izado ("CENTER") ou a direi ta ("RGHT").
Se omi ti do, o alinhamento fica central izado.
ExempIo:
<tabl e>
64
<t r >
<t h align="ceter" >Text o A</th>
<t h>Text o B</th>
</ tr >
</ tabl e>
Atributo: VALGN
ExpIicao: Define se o contedo da clula estar alinhado com seu topo
("TOP"), centralizado ("MDDLE") ou com sua base ("BOTTOM").
Se omi ti do o alinhamento fica ao meio.
ExempIo:
<tabl e>
<t r >
<t h valign=" mi ddl e" >Text o A</th>
<t h>Text o B</th>
</ tr >
</ tabl e>
Atributo: WDTH
ExpIicao: Define a largura da clula. Pode ser expressa em pixels ou
como uma porcentagem da largura total da tabela.
ExempIo:
<tabl e>
<t r >
<t h width=" 30%" >Text o A</th>
<t h width=" 70%" >Text o B</th>
</ tr >
</ tabl e>
Atributo: COLSPAN
ExpIicao: ndica quantas "clulas de largura" (colunas) a respecti va
clula deve ocupar.
ExempIo:
<tabl e>
<t r >
<t h colspan="2" >Text o A</th>
</ tr >
<t r >
<t h>Text o B</th>
</ tr >
</ tabl e>
Atributo: ROWSPAN
ExpIicao: ndica quantas "clulas de altura" (linhas) a respecti va clula
deve ocupar.
ExempIo:
65
<tabl e>
<t r >
<t h rowspan="2" >Text o A</th>
<t h>Text o B</th>
</ tr >
<t r >
<t h>Text o C</th>
</ tr >
</ tabl e>
Nota:
Usual mente os 3o&sers exibem o contedo de <TH> em ne!ri to e
central i#ado .
CAPTION <capti on>. . . </ capt i on>
ExpIicao: Define um ttul o (legenda) para a tabela.
ExempIo:
<tabl e>
<capti on>Ttul o da Tabela</capti on>
<t r >
<t d>Text o A</td>
<t d>Text o B</td>
</ tr >
</ tabl e>
Atributos de CAPTION
Atributo: ALGN
ExpIicao: ndica se o ttulo (legenda) deve ficar acima ou abixo da
tabela. Deve possuir o valor "TOP" ou "BOTTOM".
ExempIo:
<tabl e>
<capti on align="bot t om" >T t ul o da Tabela</capti on>
<t r >
<t d>Text o A</td>
<t d>Text o B</td>
</ tr >
</ tabl e>
O ttulo no exibi do "dentro" da tabela (visual mente).
O TAG "CAPTON" deve estar conti do entre os TAGs de abertura e
fechamento da tabela, no entanto, fora de qualquer linha.
15. Espaamento (Netscape Navigator)
66
SPACER <spacer >
ExpIicao: nsere um espao em branco (medido em pixels) na pgina.
Atributos de SPACER
Atributo: TYPE
ExpIicao: Pode apresentar trs valores: "HORZONTAL", indicando que
um espao horizontal, "VERTCAL", indicando que um espao vertical e
"BLOCK", indicando que um retngul o.
Atributo: SZE
ExpIicao: ndica quantos pixels de largura ("SPACER" tipo
"HORZONTAL") ou altura (tipo "VERTCAL) o "SPACER" apresentar.
ExempIo:
<spacer type="hori zontal " size="10" >XYZ nformti ca vem prestando
Consultori a; Treinamento e Suporte Tcnico, h quase dez anos.
<spacer type=" ver t i cal " size="20" >No mercado carioca desde o incio de
1991, a XYZ trabalha com as mais importantes empresas pblicas e
privadas do Brasil. Mas no s isso.
Atributo: ALGN
ExpIicao: ndica que o "SPACER" ser alinhado a esquerda ("LEFT") ou
a direi ta ("RGHT"), com o texto fluindo ao seu redor.
Atributo: WDTH
ExpIicao: Define a largura em SPACERs tipo "BLOCK".
Atributo: HEGHT
ExpIicao: Define a altura em SPACERs tipo "BLOCK".
ExempIo:
XYZ nformti ca vem prestando Servios de Desenvol vi mento;
Manuteno e mplantao de Sistemas; Consul tori a; Treinamento e
Suporte Tcnico, h quase dez anos.No mercado carioca desde o incio de
1991, a XYZ trabalha com as mais importantes empresas pblicas e
privadas do Brasil. Mas no s isso.
<spacer type="bl ock" widht =" 60" height =" 60" align="l ef t " >Parti ci pamos
ati vamente da evoluo tecnolgica do mercado de telecomunicaes,
representando produtos inovadores como servidores CT CallXpress,
servidores de fax RightFAX e placas inteli gentes de fax da Brooktrout, que
facili tam a comunicao da sua empresa.
16. Marquee (Microsoft Internet ExpIorer)
67
MARQUEE <marquee>. . . </ mar quee>
ExpIicao: O texto ou figura presente na rea de influncia deixa de ser
esttico e passa a percorrer horizontal mente a janela do browser (ou sua
frame).
ExempIo:
<marquee>
XYZ nformti ca presta Servios de Desenvol vi mento; Manuteno e
mplantao de Sistemas; Consultori a; Treinamento; Suporte Tcnico e
Solues Web.
</ marquee>
Atributos de MARQUEE
Atributo: ALGN
ExpIicao: Pode assumi r os valores "TOP", "MDDLE" e "DOWN". Define
o comportamento da "MARQUEE" em relao ao texto a seu lado.
ExempIo:
<marquee align=" t op" >
Atributo: BEHAVOR
ExpIicao: ndica o comportamento da "MARQUEE". Pode assumi r os
valores "SCROLL" (defaul t), "SLDE" e "ALTERNATE".
ExempIo:
<marquee behavi or ="al t ernate" >
Atributo: DRECTON
ExpIicao: Define para que direo a "MARQUEE" deve correr. Pode
assumi r os valores "LEFT" (defaul t) e "RGHT".
ExempIo:
<marquee direction=" ri ght " >
Atributo: LOOP
ExpIicao: Especifi va o nmero de rota(-es que a "MARQUEE" deve
executar. Os valores "NFNTE" e "-1" indicam um nmero infini to.
ExempIo:
<marquee loop="5" >
Atributo: SCROLLAMOUNT
ExpIicao: ndica o nmero de pixels de deslocamento do texto entre
cada quadro de ani mao da "MARQUEE".
ExempIo:
<marquee scrollamount =" 15" >
Atributo: SCROLLDELAY
ExpIicao: ndica o nmero de milisegundos transcorri dos entre cada
68
quadro de animao da "MARQUEE".
ExempIo:
<marquee scrolldelay="10" >
Atributo: WDTH
ExpIicao: ndica a largura do efei to "MARQUEE". Pode ser expressa em
pixels ou porcentagem da janela.
ExempIo:
<marquee width=" 50%" >
Atributo: HEGHT
ExpIicao: ndica a altura do efei to "MARQUEE". Pode ser expressa em
pixels ou porcentagem da janela.
ExempIo:
<marquee height ="30" >
Atributo: BGCOLOR
ExpIicao: ndica a cor de fundo da "MARQUEE". Cria um efei to de
"tarja".
ExempIo:
<marquee bgcolor =" yel l ow" >
Atributo: HSPACE
ExpIicao: Especifica a quanti dade de espao deixado em branco aos
lados da "MARQUEE".
ExempIo:
<marquee hspace="20" >
Atributo: VSPACE
ExpIicao: Especifica a quanti dade de espao deixado em branco acima
e abixo da "MARQUEE".
ExempIo:
<marquee vspace="30" >
17. FormuI rios
Formul ri os so de grande utilidade para a Web, pois permi tem a
interati vi dade entre o usurio, a pessoa que visualiza as pginas e o
Servidor Web. Assim, atravs da Web, se pode ler e gravar informaes
em Banco de Dados, gerando enormes possibilidades de uso para a
nternet, como por exempl o a de um servio de venda. Formul ri os
tambm podem ser gerados para a navegao entre pginas e Sites na
Web.
Nota:
GET ndica como os dados sero passados pelo script.
POST Envia os dados para entrada padro do sistema operacional
69
FORM <form>. . . </ f or m>
ExpIicao: ndica a existncia de um formul ri o, isto , um local da
pgina utilizado pelo usurio para enviar informaes para um local
predetermi nado (usual mente um Script CG).
ExempIo:
<form method="POST" action="ht t p: // www. xyz.com.br/cgi- bin/script" >
<p><i nput type=" t ext " name="T1" size="20" > <i nput type="submi t "
value="Submi t " name="B1" > <i nput type="reset " value="Reset"
name="B2" ></ p>
</form>
O contorno ponti l hado define a rea do FORM
Atributos de FORM
Atributo: ACTON
ExpIicao: ndica a localizao (URL) do script que ir receber e
interpretar os dados enviados pelo formul ri o.
ExempIo:
Atributo: METHOD
ExpIicao: ndica o formato no qual os dados sero enviados. Pode
assumi r os valores "GET" (indica como os dados sero passados pelo
script) ou "POST" (envia os dados para entrada padro do sistema
operacional ).
INPUT <input >
ExpIicao: ndica um o,7eto (campo texto, checkbox, etc).
ExempIo: <i nput type=" t ext " size="30" >
Atributos de INPUT
Atributo: TYPE
ExpIicao: Especifica que tipo de objeto deve ser: "TEXT", "PASSWORD",
CHECKBOX", "HDDEN", "RADO", BUTTON", "SUBMT" e "RESET".
Atributo: NAME
ExpIicao: ndica o nome do objeto. Este nome no ser exibido para o
usurio. Ele utilizado pelo script associado ao formul ri o para a
70
manipulao de suas informaes.
ExempIo: <i nput type=" t ext " size="20" name="endereco" >
Atributo: VALUE
ExpIicao: o contedo do objeto. Dependendo do tipo de objeto (ex.:
caixas de texto) o contedo pode ser mani pulado pelo usurio.
ExempIo: <i nput type=" t ext " size="40" value="Ri o de Janeiro" >
Atributo: SZE
ExpIicao: ndica o nmero de caracteres visveis de um objeto tipo
"TEXT" (caixa de texto).
Atributo: MAXLENGTH
ExpIicao: ndica o nmero mxi mo de caracteres permi ti do como
contedo de um objeto tipo "TEXT".
ExempIo: <i nput type=" t ext " size="40" maxlength=" 60" >
Atributo: CHECKED
ExpIicao: Determi na qual a opo padro (defaul t ) para objetos tipo
"RADO". Para objetos tipo "CHECKBOX", sua presena determi na que ele
est, como defaul t , assinalado.
ExempIo: <i nput type="checkbox" checked>
Atributo: ALGN
ExpIicao: Determi na o comportament o dos objetos em relao a
textos e imagens presentes na mesma linha. As opes so: "TOP",
"MDDLE" e "BOTTOM".
O contedo dos formul ri os podem ser mani pul ados por scripts em
JavaScript.
TEXTAREA <text area>. . . </ t ext ar ea>
ExpIicao: Proporciona ao usurio espao para a digi tao de ml ti pl as
linhas de texto.
ExempIo:
<text area rows="3" cols="50" >rea para texto</ t ext area>
Atributos de TEXTAREA
Atributo: NAME
ExempIo:
<text area rows="3" cols="50" >rea para texto</ t ext area
name="obj eto" >
71
Atributo: ROWS
ExpIicao: ndica o nmero de linha que a rea de texto deve possuir.
ExempIo:
Atributo: COLS
ExpIicao: ndica o nmero de colunas que a rea de texto deve
possuir.
SELECT <seI ect >. . . </ seI ect >
ExpIicao: Permi te ao usurio selecionar uma dentre uma lista de
opes possveis. As opes so criadas atravs do T+ <OPTI ON>.
ExempIo:
<select name="opcoes" size="1" >
<opti on selected>Texto A</opti on>
<opti on>Text o B</opti on>
</sel ect >
Atributos de SELECT
Atributo: NAME
ExempIo: <select name="opcoes" size="1" >
Atributo: SZE
ExpIicao: Define o nmero de opes que sero exibidas
simul taneamente.
ExempIo: <select name="opcoes" size="1" >
Atributo: MULTPLE
ExpIicao: Se presente, indica que mais de uma opo poder ser
escolhida.
OPTION <option>
ExpIicao: Deve ser usado dentro da rea de influncia de "SELECT".
Define as diversas opes disponveis ao usurio.
Atributos de OPTION
Atributo: VALUE
ExpIicao: Define o valor da opo, que ser enviado ao script
72
correspondente caso esta seja selecionada.
Atributo: SELECTED
ExpIicao: Define que a opo ser selecionada como defaul t .
17. 1. Envio de Arqui vos
A definio do formul ri o deve conter o atributo
ENCTYPE="mul topart/form- data", e o METHOD deve assumi r,
obrigatori amente, o tipo "POST".
<form enctype=" mul t i part /form- data" action="_URL_" method="POST">
A implementao do campo onde ser indicado qual o arqui vo para
UPLOB "en%io$ fei ta atravs do T+:
<form enctype=" f i l e" name="NomeQual quer" size="xx" >
A sintaxe do formul ri o no sofre outras alteraes.
17. 2. FORM FIELD - ExempIos
17. 2. 1. One- Line Text Box
ExempIo:
<form method="POST" action="_URL_">
<i nput type=" t ext " name="T1" size="20" ><i nput type="submi t "
value="Submi t " name="B1" ><i nput type=" reset" value="Reset"
name="B2" >
</form>
17. 2. 2. ScoIIing Text Box
ExempIo:
<text area rows="2" name="S1" cols="20" ></ t ext area><i nput
type="submi t " value="Submi t " name="B1" ><i nput type=" reset"
value="Reset" name="B2" >
</form>
73
17. 2. 3. Check Box
ExempIo:
<i nput type="checkbox" name="C1" value="ON" >Tpi co 1<i nput
type="submi t "
name="B2" >
</form>
ExempIo com CHECKED:
<form method="POST" action="- -WEBBOT-SELF--">
<i nput type="checkbox" name="C1" value="ON" checked><i nput
type="submi t " value="Submi t " name="B1" ><i nput type=" reset"
value="Reset" name="B2" >
</form>
17. 2. 4. Radio Button
ExempIo:
<i nput type=" radi o" value="V1" checked name="R1" >Tpi co 1<i nput
type="submi t "
name="B2" >
</form>
17. 2. 5. Drop- Down Menu
ExempIo:
74
<sel ect name="D1" size="1" >
<opti on selected value="ht t p: // www. xyz.com.br/ topi co1" >Tpi co
1</opti on>
<opti on value="ht t p: // www. xyz.com.br/ topi co1" >Tpi co 2</opti on>
</sel ect ><i nput type="submi t " value="Submi t " name="B1" ><i nput
type="reset" value="Reset"
name="B2" >
</form>
17. 2. 6. Push Button
ExempIo:
<i nput type="but t on" value="But t on" name="B1" >
</form>
Exerccio de FormuI rio
Todas as informaes fornecidas em um formul ri o so agrupadas e
enviadas para um programa, mais conhecido como Script CG, que
escri to especial mente para processar esses dados de acordo com alguma
necessidade ou especificao.
Atualizao ou consul ta a base de dados, envio de dados por e-mail, ou
simplesmente a construo de uma nova pgina (gerada a parti r dos
novos dados) so algumas das aplicaes mais comuns.
Escrever um Script CG no tarefa fcil para a maioria dos
WebDesigners, mas existem vrios CG "pr- fabricados" disponveis
gratui tamente na Rede, que processam as informaes forneci das de
forma transparente.
Como exerccio proposto vamos utilizar o AnyForm para ensinar como
colocar um formul ri o em uma pgina HTML.
<ht ml >
<head>
<ti tl e>Formul ri o</ t i t l e>
</head>
75
<body>
<p><f ont face="Verdana, Arial, Helveti ca" size="2"
color="bl ue" ><b >Dei xe aqui seus
comentri os! </ b></ f ont ></ p>
<p><f ont face="Verdana, Arial, Helveti ca" size="2" >Ol ! Obrigado por
visitar o meu
WebSite. <br >
Use este formul ri o para deixar aqui os seus comentri os: </p>
<form action="ht t p:// www.uky.edu/cgi- bin/cgi wrap/ ~j ohnr/AnyForm.cgi "
method=" post " >
<i nput type=" hi dden" name="AnyFormMode" value=" mai l " >
<i nput type=" hi dden" name="AnyFormDisplay"
value="ht t p: // www. xyz.com.br" >
<i nput type=" hi dden" name="AnyFormTo"
value="cursos@XYZ.com.br >
<i nput type=" hi dden" name="AnyFormSubject" value="Comentari os
sobre o WebSite" >
<p>Ent re com seu e-mail: <i nput type=" t ext " name"AnyFormFrom"
size"40" size="20" ></ p>
<p>Ent re com seu nome: <i nput type=" t ext " name"Nome" size"40"
size="20" ></ p>
<p>Voc gostou da minha pgina:
<i nput type=" radi o" name"Gostou" size"Si m" > Sim
<i nput type=" radi o" name"Gostou" size"Mais ou Menos" > Mais ou
Menos
<i nput type=" radi o" name"Gostou" size"No" > No</p>
<p>Qual a pgina de que voc mais gostou?
<select name="Mel hor Pagina" size="1" >
<opti on value="Li nk" >Li nks </opti on>
<opti on value="Curri cul um" >Curri cul um </opti on>
<opti on value="Gal eri a" >Gal eri a de Fotos </opti on>
<opti on value="Cl i part " >Bi bl i oteca magens </opti on>
</sel ect > </p>
<p>Dei xe aqui os seus comentri os: <br >
<text area name="Comentari os" rows="5" cols="40" ></ t ext area></ p>
<p>Voc gostari a que eu respondesse a este seu comentri o?
<i nput type="checkbox" name="Quer Resposta" value="Si m" > Sim
</p>
<p><i nput type="submi t " value="Envi ar os comentri os" > <i nput
type="reset"
value="Li mpar todos os campos" > </p>
</form>
</font >
</body>
76
</ht ml >
18. Som
18. 1. ControIes de Som do Microsoft Internet ExpIorer
O Microsoft Internet 4xplorer incorpora a seu HTML nati vo a capacidade
de tocar arqui vos de som, nos padres midi , au e wave , atravs do T+
<BGSOUND> .
BGSOUND <bgsound> (Microsoft Internet ExpIorer)
ExpIicao: Reproduz um determi nado som em "background", isto ,
enquanto o usurio utiliza a pgina. O som somente iniciado quando o
seu download concludo. sto difere este TAG de produtos como o Real
Audio, que reproduz o som na medi da em que o arqui vo correspondente
chega ao browser.
Atributos de BGSOUND
Atributo: SRC
ExpIicao: ndica qual o arqui vo de udio a ser reproduzido. Podem ser
77
utilizados os formatos ".wav". ".au" e ".mi d".
Atributo: LOOP
ExpIicao: ndica quantas vezes o som ser repeti do. O valor "defaul t"
"1". Os valores "NFNTE" e "-1" indicam que o som deve ser repeti do
indefini damente.
Tenha cuidado ao inserir arqui vos de udio nas pginas. Avalie bem seus
tamanhos e respecti vos tempos de do&nload .
18. 2. ControIes de Som no Netscape Navigator
Diferentement e do 4xplorer , o Cetscape no vem com controles nati vos
de som, mas tem a capacidade de tocar diferentes tipos de sons atravs
do plu!* in LiveAudio , que vem normal mente incorporado ao software
Cetscape a parti r da sua %ers)o D e suporta os tipos de som mais
populares, como wave , midi e au. Como este plug- in j vem incorporado
ao Cetscape Ca%i!ator , pode ser usado tranqui lamente, pois todos os
usurios deste ,ro&ser o tero instalado.
19. Frames
19. 1. Definio
At a chegada do Cetscape E.8, e com ele a implementao do NHTML,
uma pgina era composta de uma janela, sem divises.
Atravs do frami n! , um recursos poderoso, a janela de um browser pode
ser dividi da em diversas partes. Cada uma dessas partes chamada de
frame .
Cada uma dessas frames pode ser mani pul ada separadamente. Cada
frame pode conter um documento diferente. Alm disso, uma frame pode
"ordenar" ao ,ro&ser para que este atualize, com a U'L indicada, uma
frame diferente .
Como todos os recursos mais avanados para a construo de Home
Pages, tambm os frames devem ser utilizados com o mxi mo de
cuidado. Sua utilizao deve obedecer ao critrio de necessidade, para
no prejudicar o designe a navegabi li dade da pgina. Os casos de real
necessidade de frames no so tantos, mas quando surgem, as frames
podem melhorar dramati camente o site.
Casos de ndices e tutori ais so alguns dos mais comuns em que o uso de
frames mais indicado. Exatamente para efei tos de design, pode- se
alterar as diversas caractersticas de frames atravs de recursos como
omisso de barra de rolagem e borda.
19. 2. Documentos de Lao%t e Documentos de Contedo
78
Com a definio de frames, os documentos escri tos em HTML " extens)o.
html ou htm$ podem ser de dois tipos:
() *oc%mentos de Lao%t
+) *oc%mentos de ,ontedo
19. 2. 1. Documentos de Layout
Documentos de layout contm informaes sobre a estrutura de frames
dos documentos. Cada frame declarada em documento de layout contm
uma referncia implFci ta ou explFci ta para outro documento que ser
exibido no frame. Esse "documento filho" ser exibi do
independentement e da existnciade outras frames na janela do browser.
O "documento filho" pode ser um documento de contedo ou mesmo
outro documento de layout encadeado.
19. 2. 2. Documentos de Contedo
Documentos de contedo so documentos normais em HTML. Um
documento de contedo pode ser visto em um frame ( de um documento
de layout) ou sozinho, na janela do browser.
19. 3. TAGs e Atributos Bsicos
O T+ <FRAMESET> substi tui o T+ <BODY> em um documento de
layout. Ele define a diviso da janela em duas ou mais linhas ou em duas
ou mais colunas. Podem haver vrios T+s <FRAMESET> encadeados,
fazendo- se, desta maneira, divises das divises da pgina. Assim como o
<BODY> , o T+ <FRAMESET> precisa ser fechado contm todas as
informaes sobre cada uma das subdi vises da janela, sobre cada uma
das frames.
FRAMESET <frameset >. . . </ f r ameset >
ExpIicao: Contm os elementos "FRAME", "NOFRAMES" e outros
"FRAMESETs" que podem ser aninhados para que se tenha uma divises
dentro de uma diviso de layout.
ExempIo:
<frameset scrolling=" yes" cols="25%,50%,*" >
<frame src="contents.ht m" >
<frame src="i nfo.ht m" >
<frameset scrolling="no" src="grafi c.ht m" >
</frameset >
79
Atributos do FRAMESET
Atributo: COLS
ExpIicao: Divide a janela (ou frame) em diversas frames verticais,
tantas quantas forem os valores descri tos. Os valores podem estar
expressos em pixels, percentuais ou relati vamente uns aos outros.
ExempIo:
<frameset cols="*,2*" >
ExempIo:
<frameset cols="50,100" >
Atributo: FRAMEBORDER
ExpIicao: ndica se ser exibida uma borda 3D para as frames, ou se
as frames no aparecero destacadas por uma borda. O parmetro pode
assumi r os valores "1" ( defaul t , indica a exibio da borda) ou "0"
(supri me a exibio de borda).
ExempIo:
<frameset cols="*,2*" frameborder =" 1" >
ExempIo:
<frameset cols="50,100" frameborder =" 0" >
Atributo: FRAMESPACNG
ExpIicao: Cria um espao adicional, em pixels, entre as frames.
ExempIo:
<frameset cols="*,2*" framespaci ng=" 10" >
Atributo: ROWS
ExpIicao: Divide a janela (ou frame) em diversas frames horizontais,
tantas quantos forem os valores descri tos. Os valores podem estar
expressos em pixels, percentuais ou relati vamente uns aos outros.
ExempIo:
<frameset rows="*, 2*" >
Os atributos "FRAMESPACNG" e "FRAMEBORDER" funcionam igual mente
por toda a cadeia de "FRAMESETs" encadeados, bastando que sejam
declarados no pri mei ro comando "FRAMESET" a ser utilizado.
A definio de frames atravs de percentuais interessante, pois a
diagramao da janela preservada, no importando a resoluo em que
se estiver visualizando a pgina.
FRAME <frame>
ExpIicao: Define o contedo de cada frame do documento.
ExempIo:
<frame src="page1.ht m" >
Atributos de FRAME
80
Atributo: SRC
ExpIicao: Associa uma URL frame.
ExempIo:
Atributo: NAME
ExpIicao: Associa um valor (nome) janela.
ExempIo:
<frame src="page1.ht m" name="cursos" >
Atributo: MARGNWDTH (Microsoft nternet Explorer)
ExpIicao: Especifica o valor da margem direi ta/esquerda da frame.
Caso seja impossvel para o browser seguir o valor determi nado, este
ignorado.
ExempIo:
<frame src="page1.ht m" margi nwi dth=" 30" >
Atributo: MARGNHEGHT (Microsoft nternet Explorer)
ExpIicao: Especifica o valor da margem superior/i nferi or da frame.
Caso seja impossvel para o browser seguir o valor determi nado, este
ignorado.
ExempIo:
<frame src="page1.ht m" margi nhei ght =" 20" >
Atributo: SCROLLNG
ExpIicao: Define apresena, ausncia ou atribuio automti ca pelo
browser das barras de rolagem. Pode ser "YES", "NO" ou "AUTO".
ExempIo:
<frame src="page1.ht m" acrolling="no" >
Atributo: NORESZE
ExpIicao: mpede que o usurio mude o tamanho da frame.
ExempIo:
<frame src="page1.ht m" noresize>
NOFRAME <noframe>. . . </ nof r ame>
ExpIicao: Permi te a criao de uma opo de navegao para
browsers mais anti gos, que no entendem frames.
ExempIo:
<noframes>
<body>
<p>Esta pgina usa Frame, mas o seu Browser no os suporta. </ p>
</body>
</noframes>
81
Os browsers que entendem frames ignoram toda a rea de influncia de
<NOFRAMES>. Assim, pginas cim frames podem conter mensagens que
somente sero lidas pelos browsers mais anti gos, provavel mente
avisando a seus usurios para que consigam uma verso mais nova, ou
que sigam um determi nado link para pgina escri ta sem o uso de frames.
19. 4. Frames Sobrepostas Diretament e e Indiret ament e
A janela do browser pode ser dividi da em diversas frames horizontais e
verticais. para que isso seja possvel, o CHTML permi te que T+s
<FRAMESET> sejam encadeados. Assim so criadas frames so,repostas
diretament e .
ExempIo (Documento de Layout):
<ht ml >
<head>
</head>
<!- --Diviso da janela em 2 frames- -->
<frameset rows="*, *" >
<!- --Atribuio de page1.ht m pri mei ra frame- -->
<!- --Diviso da segunda frame em duas- -->
<frameset cols="30%,70%" >
<!- --Atribuio de page2.ht m- -->
<!- --Atribuio de page3.ht m- -->
</frameset >
</frameset >
</ht ml >
um documento de layout. Os documentos a que se referem os
comandos <FRAME> , dentro do <FRAMESET> , so tipicamente
documentos de contedo, mas tambm podero ser novos documentos
de layout, que dividam novamente cada frame.
A janela do browser foi inicial mente dividi da em 2 frames horizontais
iguais. Foi atri budo o documento de contedo "page1. ht m" pri mei ra
frame.
Em seguida, dividiu- se a segunda frame em duas frames verticais, a
pri mei ra com 30% do espao disponvel e a segunda com os restantes
70%.
82
Uma frame pode exibir um documento de contedo, isto , um
documento tradicional com textos, imagens etc, ou um documento de
layout, que a dividi ri a novamente em outras frames. Chama- se isto de
di%is)o indireta .
83
<ht ml >
<head>
</head>
</frameset >
</frameset >
</ht ml >
ExempIo (Documento de Layout - page3. ht m) :
<ht ml >
<head>
</head>
<frameset rows="*, 2*" >
</frameset >
</frameset >
</ht ml >
O documento de la6out estabelece a diviso da janela em D frames . Duas
dessas frames contm os documentos de contedo page1. ht m e
page2. ht m .
A terceira frame contm o documento de la6out page3. ht m , que a
subdi vi de em D su,* frames .
19. 5. Links em Frame AIvo
Quando o usurio pressiona um lin= qualquer em uma frame , o lin= pode
atualizar sua prpria frame com o documento conti do em sua U'L, ou
atualizar outra frame . Para que seja possvel a atualizao de outras
frames , foi introduzi do o atri,uto "TARGET" no T+ <A> .
84
<ht ml >
<head>
</head>
<frame src="page1.ht m" name="pagi na1" >
</frameset >
</frameset >
</ht ml >
ExempIo (Documento de Layout - page2. ht m) :
<ht ml >
<head>
</head>
<body>
<a href ="ht ml 1.ht m" target =" pagi na1" >
Clicando neste Link, a Frame "pagina1"ser atualizada
com o arqui vo "html 1.ht m". </ a>
</body>
</ht ml >
O lin= conti do do documento "page2. ht m" tem como alvo a frame
chamada de "pagina1" , isto , quando "clicado", no ir atualizar a
pr.pri a frame , mas a "frame al%o" .
O atri,uto "TARGET" pode ter o nome de uma frame ou uma dentre as
seguinte palavras:
_seIf (atualiza a prpri a frame)
_parent (atualiza a "frame* m)e" )
_top (atualiza toda a janela, independente de qualquer frame - ex.: link
externo)
_bIank ou _window (abre uma nova janela de browser)
"_self", "_parent" e "_top" so case-sensiti ve, e devem ser escri tos em
minsculas.
85
20. SSI (Server Side IncIude)
Coment0ri o no cdigo HTML que insere automati camente texto nas
pginas quando elas so buscadas por um navegador da Web. As pginas
que contm SSI recebem extenses ".SHL" , ".STM" , ".SHTM" ou
".SHTML" .
20. 1. Criando Pginas Dinmicas com SSI (Server Side IncIude)
Como criar nos Sites pginas que esto sempre mudando, sem que
ningum precise alter- las?
Muitos Sites na Web exibem, em pginas fixas, barras ou quadros com
contedo varvel.
1. Crie uma pgina HTML coloque um texto, uma imagem - o que desejar.
2. Salve a parte que desejar da pgina, recortando- a e colondo- a num
edi tor de texto - o Bloco de Notas por exempl o. Denomi ne este arqui vo de
"texto. txt" .
3. No lugar do trecho reti rado, do documento HTML, inclua as trs linhas
seguintes:
ExempIo:
<!- ---- Comentri o ---------------->
<!- - #i ncl udevi rt ual =" t ext o. t xt " -->
<!- ---- /Comentri o --------------->
A pri mei ra e lti ma linhas so apenas comentri os. Servem para voc
saber que ali entrar o contedo do arqui vo "texto. txt" .
A linha do meio contm a chamada para o servio SSI.
Entre o sinal de exclamao e o item #i ncIude coloque exatamente dois
hifens
("- -").
ExempIo:
<!- - #i ncl udevi rt ual =" t ext o. t xt " -->
Em lugar de escrever apenas "texto. txt" , indique o diretri o onde se
encontra o arqui vo.
ExempIo:
<ht ml >
<head>
</head>
86
<body>
<!- ---- Comentri o ----->
<!- - #i ncl udevi rt ual =" f i l e:///c:\di retri o\texto. t xt " -->
<!- ---- /Comentri o ----->
</body>
</ht ml >
4. Salve o arqui vo HTML como "pagina. ht m" . Salve outra vez, agora
como " pagina.sht m" .
O "s" indica uma pgina ligada ao SSI.
Alm de SHTM, as pginas SSI tambm podem ter extenso SHL, STM e
SHTML .
Abra o 3ro&ser e carregue a " pagina.sht m" . A pgina ser exibida
exatamente como foi criada. sso porque o Servidor substi tui a T+ de
inclus)o pelo texto do ar;ui %o indicado , antes de enviar a pgina ao
3ro&ser . Verifique o c.di!o HTML e confira .
5. Agora voc pode alterar o contedo salvo em "texto. txt" sem precisar
mexer no arqui vo " pagina.sht m" . Caso voc queira substi tui r o
arqui vo ".txt" , basta criar um outro com o mesmo nome e salvar no
mesmo diretri o.
21. Etapas para Criao de um Site
Pequenos "truques" fazem bastante diferena no momento da criao de um site. Saber
organizar as sees, defini r a formatao das imagens e textos deixa o trabal ho mais
veloz e com maior quali dade.
21. 1. PIanejament o
Definio do objeti vo do site. Voc pode criar uma pgina simpl es com informaes
bsicas ou decidi r- se por fazer um comrcio eletrnico, tudo depende do capi tal
disponvel. Lembre- se que o site ser feito para seu pblico alvo.
21. 2. CoIeta de Materi aI
Junte todo o material disponvel que poder ser utilizado no site. Livros, jornais, vdeos,
folhetos, etc. Selecione tudo que pode ser includo.
21. 3. Direo EditoriaI
Faa um estudo defini do do Layout de seu site, relacionando as diferentes informaes
entre si de forma lgica. Tente facilitar ao mxi mo a navegao, se possvel, crie
sistemas de busca internos e mapas.
21. 4. Design
87
Lembre- se que criar um site moderno no uilizar todos os tipos de tecnologi a
disponvel, a prioriadade deve ser as informaes. Por outro lado mui to informao, com
pouca preocupao no design no funcional.
21. 5. Programao
Verifique o funcionamento dos scripts e programas que realizam tarefas automti cas. Se
possvel, teste o site em vrias verses de browsers.
21. 6. DivuIgao
Cadastre o seu site nos sistemas princi pais sistemas de busca nacionais e
internacionais. Divul gue o endereo em caixas de produtos, cartes e materias
promocionais.
21. 7. Manut eno
Atualize as informaes periodicamente e verifi que o funcionamento de links e scripts.
22. DHTML (HTML Dinmico)
Refere- se a pginas 5e, cujo contedo se modi fica sem interveno
direta do 5e,Master . Uma mesma pgina pode ser vista de forma
diferente, dependendo de variveis como a localizao geogrfica do
Internauta , a hora da visi ta, pginas anteriores j vistas e as preferncias
do usurio. Vrias tecnologias so usadas para produzir HTML din>mi co :
Scripts CGI , Server Side IncIudes (SSI) , Cookies , Java, JavaScript e
ActiveX .
DHTML permi te criar efei tos especiais, tais como texto em que sai da
pgina uma palavra por vez ou efei tos de transio com estilo de
mensagem giratri a entre as pginas.
23. XML (ExtensibI e Markup Language)
O XML uma evoluo do HTML - no apenas convi ve, como se integra
facil mente a ele.
Ainda h poucas ferramentas para o trabal ho em XML e poucos softwares
capazes de interpret- lo. Mas a adoo dessa tecnologi a pelos principais
fabricantes deve mudar esse panorama em pouco tempo. O nternet
Explorer 5.0, foi o pri mei ro produto massivamente usado a adotar a
novidade. O novo browser da Netscape, tambm abraar o XML.
O XML e o HTML tm uma origem comum, o SGML (Standard Generalized
Markup Language), um padro internacional genrico para descrio da
estrutura de diversos tipos de documentos eletrnicos. Ao contrri o do
HTML, no entanto, o XML no estabelece como um determi nado elemento
deve ser visualizado. Seu objeti vo armazenar as informaes de forma
organizada. A idia que um arqui vo XML possa ser apresentado em
mdias diferentes - um mesmo materi al, por exempl o, pode receber
88
determi nado tratamento grfico para a Web e outra formatao para ser
impresso.
Por suas caractersticas, o XML necessita de um intermedi ri o para que os
dados sejam visualizados.
89
24. Editores de HTML
Torna- se bem mais simples e agradvel a confeco de pginas quando
se usa um software apropri ado. No existe hoje um programa padro
para desenvol vi mento em HTML, nem um editor WYSWYG (What You See
s What You Get) perfei to para a criao de pginas.
Existe, porm uma srie de editores HTML que podem facili tar em mui to o
trabal ho de desenvol vi mento de Home Pages. Dentre estes, podemos
citar o vrios como opes para solues que se adequem a necessidade
de cada um.
Programas para Criao e Edio de Sites
HotDog WebMaster Suite 5.5 http://www.sausage.com
GoLive 5.0 http://www.adobe.com
HotMetal Pro 5.0 http://www.softquad.com
FrontPage 2000 > http://www. mi crosoft.com/brasil
HomeSi te 4.0 http://www.al l ai re.com
DreamWeaver 4.0 http://www. macromedi a.com.br
25. WebMai Is
Para trocar e-mail voc no precisa ter uma conta no provedor. Na
realidade, nem menos precisa ter um computador. s usar o do vizinho,
de algum amigo ou de um cybercaf no meio do Oceano Pacfico. Muito
usado como endereo alternati vo, por quem quer anoni mato ou esteja
viajando, os webmails so gratui tos. s entrar em algum dos servios
abaixo e criar um ou vrios endereos.
WebMaiIs
HotMail http://www.hot mai l .com
ZipMail http://www.zi pmai l .com
Yahoo Mail http://mai l.yahoo.com.br
BOL http://www.bol .com.br
26. Definies
26. 1. Programas CGI (Commom Gateway Interface)
Scripts que obedecem a uma especificao (a Commom Gateway
nterface, CG) para troca de dados com servi dores Web. Podem ser
escri tos em diferentes linguagens de programao, entre elas C, Perl,
Java, Visual Basic e Delphi. Os formul ri os HTML, por exempl o, usam
programas CG para processar as informaes quando o usurio clica no
boto "Enviar". Outra forma de dar retorno dinmico ao do internauta
90
rodar scripts ou programas na mqui na dele.
26. 2. CIient Side
Literal mente: "no lado do cliente". Refere- se a programas que rodam no
micro do usurio, e no num servidor Web. Esses programas podem ser
Applets Java, Scripts Java ou Controles ActiveX. Contrapem- se aos
programas CG, que so do tipo Server Side (executados no servi dor).
26. 3. ASP (Acti ve Server Pages)
Padro para pginas Web criadas dinamicamente com base em cdigo
JScript ou Visual Basic. Quando o Browser solici ta uma pgina ASP, o
Servidor monta- a na hora e apresenta- a ao Browser. Nesse aspecto, ASP e
CG so similares.
26. 4. PHP (PersonaI Home Page)
Linguagem de Scripts usada para criar pginas Web dinmicas. Assim
como os Scripts em Perl, os programas PHP so embuti dos em TAGs HTML
e executados no Servidor. A fora do PHP est em sua compati bi l i dade
com mui tos Banco de Dados.
26. 5. Criptografi a
Processo de embaral hamento de dados, para evitar que pessoas no-
autorizadas leiam as informaes.
26. 6. PIug- In
Software que aclopado ao browser para ampliar suas funes. Os plug-
ins servem para permi ti r a apresentao de imagens, sons ou desenhos
tridi mensionais, entre outras aplicaes.
PIug- ins
Windows MediaPlayer
http://www. mi crosoft.com/wi ndows/medi apl ayer/downl oad
RealPlayer G2 http://www.real.com/g2/products/pl ayer/i ndex.ht ml
Acrobat http://www.adobe.com/prodi ndex/acrobat/readstep/ht ml
Alexa http://www.al exa.com/downl oad/i ndex.ht ml
QuickTime http://www.appl e.com/qui ckti me/downl oad
26. 7. AppIet
91
Programa escri to para rodar dentro de outro programa (por exempl o,
macros do Word ou do Excel). Um applet no pode ser executado de
forma autnoma. Os Applets escritos em Java, responsveis por boa parte
da dinmica da Web, em geral rodam no ambiente do Browser.
26. 8. ServIet
Applet que roda num servidor. Em geral, o termo se refere a um Applet
Java que executado num servi dor Web. Esse tipo de programa tem- se
tornado comum como substi tuio aos programas CG
26. 9. Cookie
Mensagem enviada ao 3ro&ser pelo servi dor 5e,. Gravada no micro do
usurio, ela lida e devol vi da ao servidor quando o 3ro&ser solicita uma
pgina. O objeti vo bsico do Coo=ie identi ficar o usurio, a fim de
apresentar pginas personalizadas.
26. 10. DownIoad
Cpia de arqui vos de um computador qualquer para o micro do usurio.
Quando voc transfere um arqui vo de algum lugar para o seu
computador, voc est fazendo um do&nload .
Gerenciadores de DownIoad
Cath- Up http://www. manageabl e.com/downl oad.ht ml
Getri ght http://www.si liconacti on.com.br /
http://www.get ri ght.com/get.ht ml
Go!Zilla http://www.gizmo.net/gozilla
Windownl oad http://mason.gmu.edu/ ~r mccl ana/wi ndownl oad.ht ml
Mr. Cool http://www.ci x.co.uk/ ~net- services/mrcool/welcome.ht m
Download Wonder http://www.fort y.com
26. 11. UpIoad
Transferncia de arqui vos do micro do usurio para um computador
qualquer.
Quando voc transfere um arqui vo do seu computador para algum lugar,
voc esta fazendo um upload .
Gerenciadores de UpIoad
nternet Neighborhood http://www. t ucows.com
CuteFTP http://www.
92
26. 12. RGB
niciais, em ingls, das cores vermel ho, verde e azul. O RGB um modelo
de cores baseado nessas trs tonali dades bsicas e utilizado como padro
nos moni tores de vdeo. Um dos problemas mais difceis da editorao
eletrnica obter a correspondnci a das cores RGB com as cores CMYK.
26. 13. CMYK
Abreviatura das cores bsicas: ciano, magenta, amarelo (yellow) e preto
(black). Representa um sistema que obtm as tonalidades a parti r da
mistura dessas quatro cores.
93

Apostila HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila HTML

Enviado por

Direitos autorais:

Formatos disponíveis

LINGUAGEM DE PROGRAMAO HTML

CURSO SUPERIOR DE FORMAO ESPECFICA EM

Você também pode gostar