2188 HTML

LINGUAGEM DE PROGRAMAO HTML
< P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com >

< w w w . u n i v e r s o m i n a s . c o m . b r >

1

Universo
Minas


2
1. Introduo __________________________________________________________________________ 6
1.1. Internet _________________________________________________________________________ 6
1.2. Intranet _________________________________________________________________________ 6
1.3. WWW (World Wide Web) __________________________________________________________ 7
1.4. Web ___________________________________________________________________________ 7
1.5. Hipertexto _______________________________________________________________________ 8
1.6. Links ou Hyperlinks ________________________________________________________________ 8
1.7. Home Page_______________________________________________________________________ 8
1.8. Site ____________________________________________________________________________ 9
1.9. Browsers (Navegadores da Web)______________________________________________________ 9
1.10. Protocolo ______________________________________________________________________ 10
1.11. Protocolo HTTP (HyperText Transfer Protocol)__________________________________________ 10
1.12. Protocolo FTP (File Transfer Protocol) ________________________________________________ 10
1.12.1. FTP Annimo _______________________________________________________________ 11
1.13. URL (Uniform Resource Locator) ____________________________________________________ 11
1.13.1. URL Absoluto_______________________________________________________________ 12
1.13.2. URL Relativo________________________________________________________________ 12
1.13.3. Endereo___________________________________________________________________ 12
1.13.4. Entendendo uma URL _________________________________________________________ 13
1.14. ISP (Internet Service Provider) ______________________________________________________ 14
1.14.1. Provedores _________________________________________________________________ 14
1.14.2. Seu Site na Grande Rede _______________________________________________________ 14
1.14.3. Login _____________________________________________________________________ 14
1.15. Resoluo _____________________________________________________________________ 15
2. HTML (HyperText Markup Language)_____________________________________________________ 15
2.1. TAGs __________________________________________________________________________ 16
2.2. Estrutura Bsica__________________________________________________________________ 17
2.2.1. Incio e Fim do Documento ______________________________________________________ 17
2.2.2. Definies Lgicas sobre o Documento_____________________________________________ 17
2.2.3. Ttulo da Pgina ______________________________________________________________ 17
2.2.4. Contedo da Pgina ___________________________________________________________ 17
2.3. TAG com Atributos _______________________________________________________________ 18
3. Estrutura da Pgina ___________________________________________________________________ 19
3.1. HTML <html>...</html> ____________________________________________________________ 19
3.2. HEAD <head>...</head> ___________________________________________________________ 19
3.2.1. Elementos presentes em HEAD___________________________________________________ 20
TITLE <title>...</title>______________________________________________________________ 20
SCRIPT <script>...</script>__________________________________________________________ 20
META <meta>____________________________________________________________________ 20


3
3.3. BODY <body>...</body>___________________________________________________________ 21
Atributos de BODY________________________________________________________________ 21
4. META TAGs <meta> _________________________________________________________________ 23
5. Caracteres Especiais e Acentuao _______________________________________________________ 29
5.1. Por que usar estas formataes ? ___________________________________________________ 32
6. Cores Atravs de Valores Hexadecimais ____________________________________________________ 32
7. Comentrios ________________________________________________________________________ 34
8. Controles de Formatao_______________________________________________________________ 35
8.1. Ttulos / Subttulos _______________________________________________________________ 35
8.2. Controles "Fsicos"de Formatao de Texto _____________________________________________ 36
8.3. Controles de Fontes _______________________________________________________________ 37
8.3.1. FONT <font>...</font> _________________________________________________________ 37
8.3.2. BASEFONT <basefont> ________________________________________________________ 37
8.4. Formatao de Pargrafos __________________________________________________________ 38
8.5. Quebra de Linha__________________________________________________________________ 39
8.6. O TAG Blockquote <blockquote>...</blockquote> ________________________________________ 39
8.7. O TAG DIV <div>...</div> __________________________________________________________ 39
8.8. O TAG PRE <pre>...</pre>__________________________________________________________ 40
8.9. O TAG CENTER <center>...</center>__________________________________________________ 40
8.10. O TAG NOBR <nobr>...</nobr> _____________________________________________________ 40
9. Listas _____________________________________________________________________________ 41
9.1. Listas Ordenadas _________________________________________________________________ 41
9.2. Elementos LI <li>. . . </li> ___________________________________________________________ 42
9.3. Listas No Ordenadas _____________________________________________________________ 44
9.4. Listas de Definio________________________________________________________________ 45
10. Links _____________________________________________________________________________ 47
10.1. Links para dentro da prpria pgina __________________________________________________ 48
10.2. Para outras pginas de um mesmo Site ________________________________________________ 48
10.3. Links para outros Sites ____________________________________________________________ 48
10.4. Link especial: "mailto" ____________________________________________________________ 48
11. Imagens __________________________________________________________________________ 49
12. Formatos de Imagens_________________________________________________________________ 51
12.1. Usando o GIF (Graphics Interchange Format) ___________________________________________ 51
12.2. Usando o JPEG (Joint Photographic Experts Group) ______________________________________ 51
12.3. Sobre o PNG (Portable Networ Graphics)_______________________________________________ 52
12.4. Imagens no Browser______________________________________________________________ 52
13. Mapas Sensitivos ___________________________________________________________________ 53
13.1. Definio ______________________________________________________________________ 54


4
13.2. Descrio______________________________________________________________________ 55
15. Tabelas ___________________________________________________________________________ 56
15. Espaamento (Netscape Navigator) ______________________________________________________ 64
16. Marquee (Microsoft Internet Explorer) ____________________________________________________ 65
17. Formulrios ________________________________________________________________________ 66
17.1. Envio de Arquivos _______________________________________________________________ 70
17.2. FORM FIELD - Exemplos __________________________________________________________ 70
17.2.1. One-Line Text Box____________________________________________________________ 70
17.2.2. Scolling Text Box_____________________________________________________________ 70
17.2.3. Check Box__________________________________________________________________ 71
17.2.4. Radio Button________________________________________________________________ 71
17.2.5. Drop-Down Menu____________________________________________________________ 71
17.2.6. Push Button ________________________________________________________________ 72
18. Som______________________________________________________________________________ 74
18.1. Controles de Som do Microsoft Internet Explorer ________________________________________ 74
BGSOUND <bgsound> (Microsoft Internet Explorer) _______________________________________ 74
Atributos de BGSOUND ____________________________________________________________ 74
18.2. Controles de Som no Netscape Navigator______________________________________________ 75
19. Frames ___________________________________________________________________________ 75
19.1. Definio ______________________________________________________________________ 75
19.2. Documentos de Layout e Documentos de Contedo______________________________________ 75
19.2.1. Documentos de Layout ________________________________________________________ 76
19.2.2. Documentos de Contedo______________________________________________________ 76
19.3. TAGs e Atributos Bsicos _________________________________________________________ 76
19.4. Frames Sobrepostas Diretamente e Indiretamente ________________________________________ 79
19.5. Links em Frame Alvo _____________________________________________________________ 80
20. SSI (Server Side Include) ______________________________________________________________ 82
21. Etapas para Criao de um Site__________________________________________________________ 83
21.1. Planejamento ___________________________________________________________________ 83
21.2. Coleta de Material _______________________________________________________________ 83
21.3. Direo Editorial_________________________________________________________________ 83
21.4. Design________________________________________________________________________ 83
21.5. Programao ___________________________________________________________________ 83
21.6. Divulgao_____________________________________________________________________ 84
21.7. Manuteno____________________________________________________________________ 84
22. DHTML (HTML Dinmico) ____________________________________________________________ 84
23. XML (Extensible Markup Language) _____________________________________________________ 84
24. Editores de HTML___________________________________________________________________ 84
25. WebMails _________________________________________________________________________ 85
26. Definies _________________________________________________________________________ 85


5
26.1. Programas CGI (Commom Gateway Interface) ___________________________________________ 85
26.2. Client Side _____________________________________________________________________ 85
26.3. ASP (Active Server Pages)_________________________________________________________ 86
26.4. PHP (Personal Home Page)_________________________________________________________ 86
26.5. Criptografia ____________________________________________________________________ 86
26.6. Plug-In________________________________________________________________________ 86
26.7. Applet ________________________________________________________________________ 86
26.8. Servlet ________________________________________________________________________ 86
26.9. Cookie ________________________________________________________________________ 87
26.10. Download_____________________________________________________________________ 87
26.11. Upload_______________________________________________________________________ 87
26.12. RGB _________________________________________________________________________ 87
26.13. CMYK _______________________________________________________________________ 87


6
1. Introduo

Antes de comearmos a estudar HTML, necessrio que se entenda alguns princpios bsicos que
envolvem esta linguagem.

1.1. Internet

Internet uma rede mundial de milhares de pequenas redes de computador e milhes de
microcomputadores comerciais, educacionais, governamentais e pessoais que usa os protocolos
TCP/IP (Transmission Control Protocol/Internet Protocol) para comunicao.

No centro da Internet existem linhas de comunicao de dados de alta velocidade entre
computadores host, consistindo em milhares de sistemas de computador comerciais, do governo,
educacionais e outros, que encaminham dados e mensagens.

Atualmente, a Internet oferece um grupo de servios para usurios, como Correio Eletrnico, a
World Wide Web, FTP, grupos de notcias Usenet, Gopher, IRC, telnet e outros.

A Internet como uma cidade eletrnica com bibliotecas virtuais, lojas virtuais, escritrios virtuais,
galerias de arte virtuais, etc.

TCP/IP (Transmission Control Protocol/Internet Protocol - Protocolo de Controle de Transmisso/Protocolo
Internet)

Conjunto de protocolos utilizados na troca de informaes entre computadores de diferentes arquiteturas dentro
da Internet. O TCP/IP est disponvel para qualquer tipo de CPU e Sistema Operacional.

1.2. Intranet

Intranet uma rede desenvolvida para processamento de informaes em uma empresa ou
organizao. Seu uso inclui servios como distribuio de documentos e software, acesso a bancos
de dados e treinamento.

Uma intranet assim chamada porque ela geralmente emprega aplicativos associados Internet,
como pginas da Web, navegadores da Web, sites FTP, Correio Eletrnico, grupos de notcias e
listas de distribuio, acessveis somente s pessoas que fazem parte da empresa.


7

Firewall (Parede de Fogo)

Firewall um mtodo para proteger os arquivos e programas em uma rede contra usurios em outra rede. Um
firewall bloqueia o acesso indesejado a uma rede protegida, enquanto fornece rede protegida o acesso s redes
fora do firewall. Uma empresa geralmente ir instalar um firewall para dar aos usurios acesso Internet enquanto
protege as informaes internas.

1.3. WWW (World Wide Web)
(Ampla Rede Mundial)

WWW a sigla de World Wide Web que significa Rede Mundial (a grande rede de computadores
interligados no mundo todo). A World Wide Web resultado de um projeto para uma melhor
distribuio de informaes a grupos de pesquisas iniciado no ano de 1989 por cientistas do CERN
(Centro European Researche Nucleare) laboratrio de fsica sediado em Genebra, na Suia, com o
intuito de facilitar a comunicao interna e externa.

Antes da WWW, os cientistas, assim como toda a comunidade Internet, necessitavam de uma srie
de programas distintos 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 crescimento explosivo, com a introduo da verso final do software
NCSA Mosaic, um browser, para a comunidade Internet.

Muitos browsers foram desenvolvidos para muitos sistemas de computadores. Em 1994, a WWW
j havia se tornado uma das formas mais populares de acesso aos recursos da Internet.

O objetivo inicial era, portanto, centralizar em uma nica ferramenta as vrias tarefas necessrias
para se obter as informaes disponveis na Internet.

Usurios de todo o mundo foram atrados pela forma simples e divertida que a WWW
disponibilizava o contedo da Internet.

A organizao World Wide Web Consortium (W3C) responsvel pela padronizao do HTML.
A especificao original do HTML foi desenvolvida, no CERN, por Tim Berners-Lee atual
Preisidente do W3C, que transformou sua obra em patrimnio coletivo dos internautas.

A verso padro do HTML hoje a 4.0. Entretando algumas verses de Browsers ainda
interpretam somente a verso 3.2 do HTML.

1.4. Web



8
Web o diminutivo para World Wide Web. Termo usado originalmente para a parte da Internet
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 sinnimo da
prpria Internet ("Grande Rede").

1.5. Hipertexto

Originalmente, 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" permite somente que se navegue em uma sequncia, percorrendo
seu contedo para frente e para trs.

O hipertexto nas pginas da Web foi expandido para incluir hyperlinks a partir de texto, de uma
figura, de um elemento grfico, de mapas de imagens, som e at mesmo animaes.

Para se ter uma idia de hipertexto, basta visualizar o sistema de "Ajuda" do Microsoft Windows.

1.6. Links ou Hyperlinks

Link um ponto de acesso ou salto at um local na mesma pasta de trabalho ou em outro arquivo,
representado a partir 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 arquivo em seu sistema local, em um
compartilhamento de rede na World Wide Web ou em uma Intranet.

1.7. Home Page

Home Page um conjunto de "pginas", documentos diponveis na Web, interligados entre si
(atravs de links). O termo Home Page tambm usado para designar a "pgina principal" de um
conjunto de documentos. Um conjunto de "pginas" tambm chamado de Site.

Alguns Servidores da Web reservam index.htm como o nome da home page (pgina principal),
enquanto outros a denominam como default.htm.



9
1.8. Site

Palavra em ingls que significa local, lugar. Na Internet, designa um conjunto de pginas que
representa uma pessoa, instituio ou empresa na rede.

1.9. Browsers (Navegadores da Web)

Browsers so softwares que lem e interpretam arquivos 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 arquivos de vdeo incorporados em documentos da Web
se voc dispuser do hardware necessrio.

Existem Browsers para todos os gostos. Os mais utilizados, o Internet Explorer, o Netscape
Navigator e o Mozilla Firefox vm acompanhados de outros programas para Internet, como o leitor
de Correio Eletrnico (e-mail). Existem outras opes de Browsers, basta escolher um deles e partir
tranquilo pelos "mares" da Internet.

Browsers

Internet Explorer http://www.microsoft.com/ie_intl/br/download
Netscape http://www.netscape.com
Opera http://www.operasoftware.com/download.html
NetCaptor http://www.netcaptor.com
PolyWeb http://psibersoft.hypermart.net
NeoPlanet http://www.neoplanet.com
KatieSoft Scroll http://www.katiesoft.com/scroll/download.html
Mozilla Firefox http://www.mozilla.com/en-US/firefox/



10

Internet Explorer Mozilla Firefox

1.10. Protocolo

Protocolo um conjunto de regras estabelecidas com o objetivo de permitir a comunicao entre
computadores. um mtodo de acesso a um documento ou servio atravs da Internet, como File
Transfer Protocol (FTP) ou Hypertext Transfer Protocol (HTTP). Tambm denominado tipo.

1.11. Protocolo HTTP (HyperText Transfer Protocol)
(Protocolo de Transferncia de Hipertexto)

HTTP um protocolo da Internet utilizado pelos computadores ligados Web para comunicar-se
entre si, ativa os navegadores da Web para recuperarem informaes de servidores da World Wide
Web.

O protocolo permite a um usurio usar um programa cliente para entrar em um URL (ou clicar em
um hyperlink) e recuperar texto, elementos grficos, som e outras informaes digitais de um
servidor da Web.

Endereos URL de recursos HTTP comeam com http://

1.12. Protocolo FTP (File Transfer Protocol)
(Protocolo de Trasferncia de Arquivo)

FTP um protocolo que possibilita a transferncia de arquivos de um local para outro pela Internet.

Normalmente, os sites tm reas pblicas de FTP, permitindo que os usurios faam download de
programas por esse processo.



11
Protegido por senhas, o FTP tambm utilizado para atualizar a distncia sites localizados em
empresas hospedeiras.

URLs de arquivos 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 Arquivo).

Os usurios tm direitos de acesso restritos com o FTP Annimo e, geralmente, podem somente
listar, exibir ou copiar arquivos para ou a partir de um diretrio pblico no sistema remoto.

Muitos sites FTP no permitem o acesso ao FTP Annimo para manter a segurana.

1.13. URL (Uniform Resource Locator)
(Localizador de Recursos Uniforme)

Um dos principais objetivos do projeto da WWW era o desenvolvimento de um padro de
referncia a um item independente de seu tipo (som, filme, imagem, etc.). Para este objetivo foi
desenvolvido a URL (Uniform Resource Locator).

URL (Uniforme Resource Locator, numa traduo literal, Localizador Uniforme de Recursos) uma
seqncia de caracteres que fornece o endereo Internet 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 termina com os dois pontos) indica qual protocolo Internet est sendo
usado.
As duas barras indicam que o que vem a seguir o endereo de um servidor vlido da Internet ou
localizao simblica. Pode ser colocado um texto
(www.universominas.com.br, por exemplo) ou o endereo IP do site.

Endereo IP (Endereo do Protocolo Internet)

A maneira padro de identificar um computador conectado Internet, da mesma forma que um nmero de telefone
identifica um telefone em uma rede telefnica. Um endereo IP representado por quatro nmeros separados por
pontos e onde cada nmero menor que 256, por exemplo, 192.200.44.69. O administrador de seu servidor Web ou
o provedor de servios de Internet ir atribuir um endereo IP a seu computador.

O tipo mais comum de URL http://, que fornece o endereo Internet de uma pgina da Web.
Alguns outros tipos de URL so:


12

ftp:// que fornece o local da rede de um recurso FTP.
gopher:// que fornece o endereo Internet de um diretrio gopher
news:// grupos de discusso ou de notcias (newsgroups)
mailto:// para especificar um endereo de Correio Eletrnico da Internet (para enviar correio
eletrnico).

1.13.1. URL Absoluto

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
arquivo, opcionais.
Exemplo: http://www.universominas.com.br/treinamento/cursos.htm um URL Absoluto

1.13.2. URL Relativo

Uma referncia relativa assume-se que a mquina e diretrio do item j esto sendo usados e
apenas necessita-se indicar o nome do arquivo desejado (ou posivelmente subdiretrio e
arquivo).Um URL relativo inclui um protocolo.
Exemplo:
O URL relativo Pgina de teste/index.htm refere-se pgina Cursos.htm, na pasta Treinamento,
abaixo da pasta atual.

1.13.3. Endereo

Endereo o caminho at um objeto, documento, arquivo, pgina ou outro destino.

Um endereo pode ser um URL (Uniforme Resource Locator - Localizador Uniforme de Recursos)
ou um caminho de rede UNC (Universal Naming Convention - Conveno Universal para Nomes),
o formato padro para caminhos que incluem um servidor de arquivo de rede de rea local que
utiliza a sintaxe a seguir:
Exemplo: \\servidor\compartilhamento\caminho\nome do arquivo

O endereo http://www.universominas.com.br indica um URL do Web Site da Universo Minas
Ltda.


13

1.13.4. Entendendo uma URL

http://www.Universominas.com.br/treinamento/cursos.htm#local

http:// Protocolo - Protocolo da Internet utilizado pelos computadores ligados Web para
comunicar-se entre si.

www.Universominas.com.br Nome do Domnio - Domnio so as categorias de endereos da
Internet que representam pases ou tipos de organizao.

www Sigla de World Wide Web, significa Rede Mundial

UNIVERSOMINAS Nome especfico que pode conter uma ou mais palavras, separadas ou
no, por hifens (ex.: UNIVERSOMINAS-informatica).

com Tipo de Domnio - Indica 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 lucrativos).

br Sigla do Pas - composta de duas letras, significa que a pgina est situada em um
computador no Brasil. Pginas que no possuem terminao indicando o pas de origem esto
situadas nos Estados Unidos. Outros Exemplo: .pt (Portugal) e .jp (Japo).

treinamento Diretrio (pasta) onde est localizada a pgina (arquivo) cursos.htm.
s vezes uma URL indica apenas o diretrio (ou o servidor). Nesse caso, o servidor se encarrega
de procurar e enviar o arquivo adequado.

cursos.htm Nome da pgina escrita em HTML requerida (pginas da Web geralmente tm
terminao em .htm ou .html).

#local 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 Internet. Atravs de um
Provedor voc pode ter acesso Internet e servios de hospedagem de Site. O Provedor
disponibiliza as informaes solicitadas pelos "navegadores" (Browsers) por uma combinao de
computador e programas que formam os servidores situados em instalaes apropriadas, neste
caso, o Provedor aluga espao em um disco rgido cuja mquina deve estar permanentemente
conectada rede, disponibilizando sua Home Page 24 horas por dia a todos os usurios da Internet.
A ligao com o provedor pode ser feita por linhas telefnicas normais (conexo discada) ou por
linhas especiais, ligadas 24 horas por dia (conexo dedicada).

Um provedor geralmente oferece vrias funes de aplicaes como World Wide Web (www,
http), transferncia de arquivos (ftp) e gerenciamento de contedo (armazenamento de dados). A
maioria dos provedores tambm disponibilizam 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 desenvolver sua Home Page, basta transferir seus arquivos via FTP para o Provedor.
Alguns programas especficos podem facilitar o seu Upload, j que o Browser funciona apenas para
busca de arquivos, e no para o envio. O CuteFTP um dos mais indicados pelos provedores, que
permite um acesso totalmente grfico e interativo a servidores FTP. Mas, sem dvida, existe um
excelente, o Internet Neighborhood. Sua interface comum ao do Microsoft Windows Explorer,
funcionando de maneira simples, possibilitando Download e Upload da mquina local para o
servidor FTP, transferindo arquivos de uma pasta para outra.

1.14.3. Login

Acesso. o processo de identificar-se ao entrar num computador ou em uma rede de
computadores. A cada entrada na Internet, voc se "loga" (faz o login) em seu Provedor,
colocando nome (username) e senha (password).


15

1.15. Resoluo

Resoluo o numero de pixels usados para capturar ou exibir uma imagem. A resoluo VGA
padro 640 pixels na horizontal e 480 na vertical. O SuperVGA (SVGA) trabalha 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 Formatao de Hipertexto)

Originado do casamento dos padres HyTime (Hypermedia/Time-based Doumnt Structuring
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 determinado 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 animaes) que sero visualizadas pelo
programa de navegao (Browser).

HyTime (Hyprmedia/Time-based Document Structuring Language)

HyTime (ISO 10744:1992) o padro para representao estruturada de hipermdia e informao baseada em
tempo. Um documento visto como um conjunto de eventos concorrentes dependentes de tempo (udio, vdeo,
etc.), conectados por webs ou hiperlinks.
O padro HyTime independente dos padres e processamento de texto em geral. Ele fornece a base para a
construo de sistemas hipertextos padronizados, consistindo de documentos que aplicam os padres de maneira
particular.

SGML (Standard Generalized Markup Language)

Padro ISO 8879 de formatao de textos: no foi desenvolvido para hipertexto, mas torna-se conveniente para
transformar documentos em hiper-objetos e para descrever as ligaes. SGML no aplicado de maneira
padronizada: todos os produtos SGML tm seu prprio sistema para traduzir as etiquetas para um particular
formatador de texto.

O documento HTML pode ser escrito em qualquer editor de textos, desde que este tenha a
capacidade de grav-lo como cdigo ASCII (American Standard Code for Information
Interchange - cdigo utilizado para representar textos quando h computadores envolvidos), isto ,
como texto puro, sem formatao ou caracteres de controle. Pode-se usar, portanto, o Notepad
do Windows, ou o Edit do MS-DOS. Pode-se tambm usar editores mais modernos, como o
Word, sendo necessrio neste caso que o documento seja gravado no formato texto e no como um
".doc" normal do MS-Word.

Conjunto de caracteres ASCII



16
O conjunto de caracteres de 7 bits do cdigo padro americano para intercmbio de informaes (ASCII,
American Standard Code for Information Interchange) e que amplamente usado para representar letras e
smbolos encontrados em um teclado americano padro. O conjunto de caracteres ASCII igual aos 128 primeiros
caracteres (0127) do conjunto de caracteres ANSI.

Conjunto de caracteres ANSI

O conjunto de caracteres de 8 bits do Instituto Nacional de Padronizao Americano (ANSI, American National
Standards Institute) que usado pelo Microsoft Windows e que possibilita a representao de at 256 caracteres
(0-255) atravs do teclado. Os 128 primeiros 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
internacionais, acentos, smbolos monetrios e fraes.

2.1. TAGs

TAGs so os "comandos" do HTML. Um documento HTML composto de TAGs que faro com
que o browser monte a pgina de acordo com a formatao definida pelo comando HTML.

Um TAG sempre precedido de um caracter "<" (menor que) e seguido por um caracter ">"
(maior que).
Exemplo de TAG: <HTML>

Na maioria dos casos, um TAG deve ter um correspondente, chamado de TAG de fechamento.
Ou seja, um TAG indica onde comea sua rea de influncia, enquanto o seu correspondente TAG
de fechamento indica onde termina a rea de influncia.

Um TAG de fechamento tem o mesmo nome do TAG de abertura, precedido do caracter "/".
Exemplo de TAG de fechamento: </HTML>

TAGs podem ser escritas em minsculas ou maiscula, mas nunca podem haver espaos em branco
dentro de TAGs, exceto entre atributos e entre aspas.
Exemplo : <HTML>, <html>, <HtMl>, <Html>, <hTmL> ...



17

2.2. Estrutura Bsica

A Estrutura Bsica de um documento HTML a seguinte:
Exemplo:
<html> > Incio do Documento

<head> > Incio do Cabealho do Documento
<title> > Incio do Ttulo do Documento
Aqui entra o Ttulo do documento
</title> > Fim do Ttulo do Documento
</head> > Fim do Cabealho do Documento

<body> > Incio do Contedo do Documento
Aqui entra todo o contedo que ser exposto pelo Browser...
</body> > Fim do Contedo do Documento

</html> > Fim do Documento

<html>

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 respectivamente o incio e fim do documento.

2.2.2. Definies Lgicas sobre o Documento

Entre os TAGs <HEAD> . . . </HEAD> esto as definies lgicas sobre o documento.
Delimitam a seo de cabealho do documento. Trata-se da primeira seo do documento.

2.2.3. Ttulo da Pgina

Os TAGs <TITLE> . . . </TITLE> 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 contedo da pgina que ser exposto pelo
Browser, incluindo cabealho e rodap.


18
Corpo do documento. Entre estas marcas estar contido maior parte do contedo a ser
apresentado, textos, imagens, etc.

2.3. TAG com Atributos

Exemplo:
<html> > Incio do Documento

<head> > Incio do Cabealho do Documento
<title> > Incio do Ttulo do Documento
Aqui entra o Ttulo do documento
</title> > Fim do Ttulo do Documento
</head> > Fim do Cabealho do Documento

<body> > Incio do Contedo do Documento

<p align="center">Esta a Home Page da Universo Minas e este texto est centralizado.</p> > O
TAG <P> (pargrafo) est acompanhado do Atributo ALIGN especificando o Valor CENTER,
determinando que o texto do pargrafo deve ser alinhado ao centro

</body> > Fim do Contedo do Documento

</html> > Fim do Documento

<html>


19

3. Estrutura da Pgina

O elemento <HTML> contm o elemento <HEAD> e <BODY>.
O TAG <TITLE> localizado na rea de influncia, obrigatrio, segundo a especificao do
HTML.

Exemplo:
<html>

<head>
<title>Pgina de teste</title>
</head>

<body>

</body>
</html>

3.1. HTML <html>...</html>

Atributo: No possui atributos
Explicao: Indica que o documento presente um documento HTML. Deve englobar todos os
demais TAGs.
Exemplo:
<html>
...todos os demais TAGs, textos, etc.
</html>

3.2. HEAD <head>...</head>

Explicao: Contm o cabealho do documento diversas informaes lgicas, isto , que no
fazem parte do corpo do documento e portanto no sero exibidas diretamente.
Exemplo:
<head>
...diversos TAGs contendo informaes lgicas sobre o documento...
</head>


20
3.2.1. Elementos presentes em HEAD

TITLE <title>...</title>

Explicao: 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 "Favorites"). Alm disso, exibem o ttulo como nome da janela em que a pgina visualizada. O
Ttulo obrigatrio. No confunda o ttulo da pgina com o nome do arquivo gravado em disco.
Exemplo:
<title>
Universo Minas
</title>

SCRIPT <script>...</script>

Explicao: utilizado para insero de cdigo script (ex.: java Script, VB Script, etc.) dentro do
documento HTML.
Exemplo:
<script>
...cdigo em alguma linguagem script reconhecida pelo browser...
</script>

META <meta>

Explicao: Define valores especiais. os valores so definidos como pares "name/value"
(nome/valor).

Atributos de META

Atributo: NAME
Explicao: Especifica um nome ao qual um determinado valor ser associado. O browser precisa
entender esse nome para que o TAG tenha utilidade.
Exemplo:
<meta name="keywords" content="INFORMTICA, TREINAMENTO, CONSULTORIA">

Atributo: CONTENT
Explicao: Especifica o valor associado a um "NAME".
Exemplo:

obrigatrio a presena do atributo "NAME" ou do atributo "HTTP-EQUIV".
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


21
O TAG META utilizado, tambm, para especificar palavras chaves que sero catalogadas por
Ferramentas de Busca.
3.3. BODY <body>...</body>

Explicao: Deve englobar toda a parte fsica do documento, isto , o que deve ser exibido pelo
Browser.

Atributos de BODY

Atributo: BACKGROUND
Explicao: Define uma imagem que ser utilizada como "fundo" da pgina. Caso a imagem tenha
um tamanho inferior ao da pgima ela ser repetida diversas vezes de forma a cobrir o fundo do
documento
Exemplo:
<body background="images/fundo.gif">
...diversos TAGs, textos etc...
</body>

Atributo: BGCOLOR
Explicao: Define a cor de fundo da pgina
Exemplo:
<body bgcolor="white">

Atributo: TEXT
Explicao: Define a cor do texto da pgina
Exemplo:
<body text="black">

Atributo: LINK
Explicao: Define a cor dos links ainda no visitados
Exemplo:
<body link="blue">

Atributo: VLINK
Explicao: Define a cor dos links j visitados nos ltimos x dias onde x um valor definido pelo
usurio em seu browser.
Exemplo:
<body vlink="purple">


22

Atributo: ALINK
Explicao: Define a cor dos links no instante em que so clicados pelo usurio.
Exemplo:
<body alink="red">

Exemplo:
<body link="blue" vlink="purple" alink="red">

Atributo: BGPROPERTIES (Microsoft Internet Explorer)
Explicao: Deve ter o valor "fixed". Indica que o fundo da pgina fixo, isto , no "rola" junto
com o contedo da pgina.
Exemplo:
<body background="images/fundo.gif" bgproperties="fixed">

Atributo: LEFTMARGIN (Microsoft Internet Explorer)
Explicao: Especifica uma quantidade de espao (em pixels) a ser deixada como margem
esquerda do documento.
Exemplo:
<body leftmargin="20">

Atributo: TOPMARGIN (Microsoft Internet Explorer)
Explicao: Especifica uma quantidade de espao (em pixels) a ser deixada como margem superior
do documento.
Exemplo:
<body toptmargin="20">

Exemplo do Elemento BODY com todos os seus Atributos:
<html>

<head>
<title>Universo Minas</title>

</head>

<body background="images/fundo.gif" link="blue" vlink="purple" alink="red" bgproperties="fixed"
bgcolor="white " text="black" topmargin="20" leftmargin="20">

<p><a href="http://www.Universominas.com.br">Oi! Eu sou um link!</a></p>

</body>


23

4. META TAGs <meta>

As META TAGs direcionam suas pginas.
Utilizando as TAGs HTML padro, voc no capaz de fornecer informaes histricas sobre o
contedo Web, como quem criou uma pgina especfica, ou quando ela foi modificada pela ltima
vez.

O HTML projetado primariamente para apresentar informaes, no para registrar detalhes. A
TAG <META> pode armazenar esta informao de mais alto nvel nas pginas Web.

Uma tecnologia importante que entra em jogo sempre que voc utiliza as META TAGs, o HTTP.
O Protocolo de Transferncia de Hipertexto (HTTP - HyperText Transfer Protocol) especifica
como as informaes so transferidas para a Internet e utilizadas para solicitar documentos Web 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.

Normalmente, os cabealhos HTTP so definidos automaticamente pelos servidores Web baseados
nas respostas s solicitaes de recursos. Mas em vez do servidor Web ter de determinar quais
cabealhos so utilizados, voc pode modificar cabealhos existentes ou criar o seu prprio
utilizando o atributo HTTP-EQUI V na TAG <META>.

Isso possibilita personalizar o comportamento do navegador e do servidor.
O tipo de contedo padro e o conjunto de caracteres para o servidor so texto/html e ISO-
8859-1 (Western, Latin-1). O Servidor define esta informao em um cabealho HTTP da
seguinte forma: Content-Type: text/html; CHARSET=iso-8859-1

Atributo: HTTP-EQUIV="CONTENT-TYPE"
Explicao: Define o tipo contedo padro.
Exemplo: http-equiv="Content-Type"

Atributo: CONTENT="TEXT/HTML; CHARSET=ISO-8859-1"
Explicao: Define o conjunto de caracteres.
Exemplo: content="text/html; charset=iso-8859-1"

Exemplo:
O "CONTENT-TYPE" apenas um de vrios meta valores semelhantes. Aqui esto mais alguns:

Atributo: HTTP-EQUIV="CONTENT-DISPOSITION"
Explicao: Especifica um manipulador de aplicativo para o arquivo.


24
Exemplo: http-equiv="Content-Disposition"

Atributo: HTTP-EQUIV="CONTENT-SCRIPT-TYPE"
Explicao: Define a linguagem de macro-padro.
Exemplo: http-equiv="Content-Script-Type"

Atributo: HTTP-EQUIV="CONTENT-STYLE-TYPE"
Explicao: Define a linguagem de folha de estilo padro.
Exemplo: http-equiv="Content-Style-Type"

Atributo: HTTP-EQUIV="CONTENT-LANGUAGE"
Explicao: Declara a linguagem natural para a pgina.
Exemplo: http-equiv="Content-Language"

Exemplo:
<html>

<head>
<meta http-equiv="Content-Language" content="pt-br">
</head>

<body>

<p>Esta a Home Page Universo Minas</p>

</body>

</html>



25
Atravs da META TAG REFRESH, de gerenciamento de contedo final, pode-se
redirecionar o Browser automaticamente de uma pgina para outra, mostrando uma mensagem
rpida em uma pgina, antes de entrar em uma outra pgina.

Atributo: HTTP-EQUIV="REFRESH"
Explicao: Gerenciamento de contedo final. Redireciona o Browser automaticamente, de uma
pgina para uma outra pgina.
Exemplo:
<meta http-equiv="refresh" content="2; URL=http://www.Universominas.com.br/page1.htm">

Esta META TAG muito til para mudanas de endereo, levando o usurio automaticamente para
o novo endereo.
Para informar ao navegador que a partir da page0.htm deve recuperar a page1.htm em cinco
segundos, ficaria assim:
Exemplo:
<html>

<head>
<meta http-equiv="refresh" content="5; URL=page1.htm">
<title>Ttulo da Page 0 (page0.htm)</title>
</head>

<body>
Corpo do Documento
</body>
</html>

A page0.htm aparecer ao acessar a sua Home Page com uma mensagem ou efeito, e aps 5
segundos, carregar a page1.htm.

Outras definies de META TAG incluem informaes referentes verso do HTML, verso do
navegador, ferramentas de criao Web e mecanismos de pesquisa.
A maioria destas fontes de META TAG adicionais utilizam o atributo NAME, que designa
informaes suplementares que no tm um cabealho HTTP relacionado.
Em cada uma destas TAGs, o atributo NAME identifica o valor real, enquanto o atributo
CONTENT especifiva um valor associado ao NAME.

Atributo: NAME="AUTOR"
Explicao: Determina o nome do autor.
Exemplo:
<meta name="Autor" content="William Sheakspeare">


26

Atributo: NAME="COPYRIGHT"
Explicao: Define as informaes de direitos autorais.
Exemplo:
<meta name="Copyright" content="1999-2000 Universo Minas Ltda.">

Atributo: NAME="GENERATOR"
Explicao: Define a ferramenta de criao que gerou a pgina.
Exemplo:
<meta name="Generator" content="Microsoft FrontPage 4.0">

Atributo: NAME="REPLY-TO"
Explicao: Define o endereo de e-mail para contato.
Exemplo:
<meta name="Reply-To" content="LUAN@universominas.com.br">
Alguns navegadores e mecanismos de pesquisa podem no ser capazes de interpretar suas META
TAGs e simplesmente as ignoraro. A meta informao sempre adicionada ao cabealho da
pgina na rea de influncia entre as "marcas" <HEAD> e </HEAD> juntamente com as
"marcas" <TITLE> e </TITLE>.

Exemplo:
<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
</head>

<body>

</body>
</html>

As classificaes do mecanismo de pesquisa ajudam a sondar clientes e rendimentos. Para obter as
melhores classificaes, utilize as META TAGs.

As tcnicas de META TAGs que iro trabalhar em seu favor (razoavelmente, claro) no atributo
NAME incluem:"KEYWORDS", "DESCRIPTION" e "ROBOTS"


27

Atributo: NAME="KEYWORDS"
Explicao: Conjunto de listas de palavras-chave.
Exemplo:

Atributo: NAME="DESCRIPTION"
Explicao: Conjunto de descries.
Como alguns mecanismos de pesquisa utilizam descries de pginas menores do que 200
caracteres, tente colocar as informaes mais relevantes primeiro.
Exemplo:
<meta name="description" content="Universo Minas vem prestando Servios de Desenvolvimento;
Manuteno e Implantao de Sistemas; Consultoria; Treinamento e Suporte Tcnico, h quase dez
anos. No mercado carioca desde o incio de 1991, a UNIVERSOMINAS trabalha com as mais
importantes empresas pblicas e privadas do Brasil.">

Atributo: NAME="ROBOTS"
Explicao: Conjunto de controles de indexao.
Exemplo:
<meta name="robots" content="NOINDEX, NOFOLLOW">

Veja os valores de contedo (atributo CONTENT) para especificar como a pgina deve ser
indexada:

Atributo: CONTENT="ALL"
Explicao: Indexa a pgina a todos os seus vnculos (padro).
Exemplo: content="ALL"

Atributo: CONTENT="INDEX"
Explicao: Indexa a pgina.
Exemplo: content="INDEX"

Atributo: CONTENT="FOLLOW"
Explicao: Segue os vnculos.
Exemplo: content="FOLLOW"

Atributo: CONTENT="NOFOLLOW"
Explicao: No segue os vnculos.
Exemplo: content="NOFOLLOW"

Segundo a especificao do HTML 4.0, as palavras-chaves relacionadas a ndice e os valores de
nome "ROBOTS" devem ser determinadas em letra maiscula.



28
Em vez de empregar NAME="ROBOTS" em cada pgina Web, uma soluo alternativa criar
um arquivo robots.txt e posicion-lo no diretrio principal do seu Site.

O arquivo robots.txt funciona de maneira semelhante ao NAME="ROBOTS", mas pode ser
usado para especificar conjuntos de arquivos e diretrios a serem excludos da indexao.

Exemplo:
<html>

<head>
<meta name="description" content="Universo Minas vem prestando Servios de Desenvolvimento;
anos. No mercado carioca desde o incio de 1991, a UNIVERSOMINAS trabalha com as mais
importantes empresas pblicas e privadas do Brasil.">
<meta name="robots" content="NOINDEX, NOFOLLOW">
</head>

<body>
</body>
</html>

Graas ao grande crescimento nos mecanismos de pesquisa multilnge, voc pode desejar criar
verses de idiomas especficos das palavras-chave, descries e outros meta dados. Para fazer
isto, utilize o atributo LANG para especificar uma preferncia de idioma.

Atributo: LANG="PT-BR"
Explicao: Portugus Brasileiro
Exemplo: lang="pt-br"
Atributo: LANG="PT"
Explicao: Portugus Portugal
Exemplo: lang="pt"

Atributo: LANG="EN"
Explicao: Ingls Britnico
Exemplo: lang="en"
Atributo: LANG="EN-US"
Explicao: Ingls Norte-Americano
Exemplo: lang="en-us"

Atributo: LANG="RU"
Explicao: Russo
Exemplo: lang="ru"
Atributo: LANG="IT"
Explicao: Italiano
Exemplo: lang="it"

Exemplo:
<html>
<head>


29
<meta name="keywords" lang="pt-br" content="INFORMTICA, TREINAMENTO,
CONSULTORIA">
</head>
<body>
</body>
</html>

No irritante quando outros Sites exibem suas pginas dentro das molduras deles? Uma forma no
muito 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. Isso evita que a pgina aparea emoldurada no interior de outra.

Exemplo:
<meta http-equiv="Window-target" content="_top">

As META TAGs tambm podem ajuda-lo a gerenciar contedo - e esta uma rea que todo
WebMaster deveria apreciar.
Os WebMasters deveriam gerenciar adequadamente o contedo como META TAGs, informando
aos navegadores quando solicitar 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 vencimento imediato. Para evitar isso, as datas
devem ser definidas no formato RFC850.

Exemplo:
<meta http-equiv="expires" 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
emite a mesma solicitao de quando pressionamos o Reload (Recomear) do "navegador" , O
"NO-CACHE" o nico valor vlido, e utilizado da seguinte maneira:

Exemplo:
<meta http-equiv="pragma" content="no-cache">

Quando voc planejar adicionar meta informaes ao seu Site Web, comece pela Home Page
(Pgina Principal). Depois de atualizar a Home Page e as pginas de nvel superior, considere
adicionar as meta informaes ao restante de seu Site.

5. Caracteres Especiais e Acentuao


30

As formas de representar caracteres especiais, atravs de uma notao especfica, so chamadas de
Entidades. Existem Entidades de Caracter e Entidades Numricas.

Exemplo:

Caracter Entidade de Caracter Entidade Numrica Descrio
ç ç c cedilha (minsculo)

HTML permite que caracteres especiais sejam representados por seqncias de escape, indicadas
por trs partes: um & (e () comercial) inicial, um nmero ou cadeia de caracteres
correspondente ao caracter desejado, e um ; (ponto e vrgula) final.

Exemplo:

ã ã a c/ til

Um caracter bastante til o espao no ignorvel, o (Non-breaking space). Este
caracter importante quando desejamos forar o browser a no ignorar espaos em branco entre
palavras.

Non-breaking space Espao no ignorvel

Exemplo:
<body>
<p>Veja como fica com espao no ignorvel!</p>
</body>

Visualizao pelo 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:

& & & E() comercial
< < < Menor que
> > > Maior que

Outras seqncias de escape suportam caracteres ISO Latin1. Temos aqui uma tabela com as
entidades mais utilizados em Portugus:

Tabela de Caracteres Especiais e Acentuao
Tabulao Horizontal
Espao no ignorvel
" " " Aspas
À À A c/ crase
Á Á A c/ acento agudo
Â Â A c/ acento circunflexo
Ã Ã A c/ til
Ç Ç C cedilha (maisculo)
É É E c/ acento agudo
Ê Ê E c/ acento circunflexo
Í Í I c/ acento agudo
Ó Ó O c/ acento agudo
Ô Ô O c/ acento circunflexo
Õ Õ O c/ til
Ú Ú U c/ acento agudo
Ü Ü U c/ trema
à à a c/ crase
á á a c/ acento agudo
â â a c/ acento circunflexo
ã ã a c/ til
ç ç c cedilha (minsculo)
é é e c/ acento agudo
ê ê e c/ acento circunflexo
í í i c/ acento agudo
ñ ñ n c/ til
ó ó o c/ acento agudo
ô ô o c/ acento circunflexo
õ õ o c/ til
ú ú u c/ acento agudo
ü ü u c/ trema



32

Veja outras entidades numricas:

Tabela de Caracteres Especiais e Acentuao
# # Tralha
$ $ Cifro
% % Percente

5.1. Por que usar estas formataes ?

Os browsers costumam tambm mostrar corretamente os caracteres acentuados normalmente. Essa
prtica, embora facilite sobremaneira a digitao dos documentos, no recomendada "ainda",
devido a um problema relativo a transmisso desses caracteres.

Chama-se conjunto de caracteres uma representao digital de texto. Um caracter um smbolo
cujas diversas representaes devem significar a mesma coisa para uma comunidade de pessoas.
Na prtica, porm, existem alguns conjuntos que associam dois nmeros distintos a um mesmo
caracter.

Os Browser j permitem que se escolha a codificao adequada ao conjunto de caracteres relativo
aos documentos a serem recuperados. Mas para garantir a interpretao apropriada de um
documento, pode-se inserir uma indicao do esquema de codificao, atravs do campo:


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 Valores Hexadecimais

As cores so definidas atravs de um valor hexadecimal de 6 algarismos, ou atravs de seus nomes.
Os nomes padronizados so: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, purple, red, silver, teal, white e yellow. Estes nomes foram escolhidos por serem os nomes
originais das cores suportadas pelas primeiras verses do MS-Windows. Alguns Browsers
implementam outros nomes no padronizados.


33

Tabela de Cores Atravs de Valores 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..........................
Indianred.......................
Indigo............................
Ivory..............................
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


34
7. Comentrios

! 

Explicao: Nada do que for escrito dentro deste TAG ser interpretado pelo browser.
Comentrios so extremamentes teis para facilitar a manuteno das pginas, que muitas vezes
poder ser feita por uma pessoa diferente daquela que a escreveu pela primeira vez. Atravs dos
comentrios, se explica o que se deseja com cada comando.
Exemplo:


Exemplo:


Exemplo:
<html>

<head>
</head>

<body>

<p><a href="http://www.Universominas.com.br">Oi! Eu sou um link para o site da Universo
Minas!</a></p>
</body>
</html>

Oi! Eu sou um link para o site da Universo Minas!



35

8. Controles de Formatao

8.1. Ttulos / Subttulos

Hn <hn>...</hn>

Explicao: Indica que o texto influenciado uma "HEADER" (cabealho). Os cabealhos tm
seis nveis de importncia, sendo o nvel "1" o mais importante e o nvel "6" o menos.
Exemplo:
<h1>Este o cabealho de nvel 1</h1>

Nota:
Veja os nveis de cabealho e o equivalente 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

Atributos de Hn

Atributo: ALIGN
Explicao: Indica se o cabealho ser alinhado a esquerda (padro), centralizado ou a direita,
usando-se, respectivamente, as palvras "LEFT", "CENTER" e "RIGHT".
Exemplo:
<h1 align="left">Texto Um</h1>
<h2 align="center">Texto Dois</h2>
<h3 align="right">Texto Trs</h3>



36

8.2. Controles "Fsicos"de Formatao de Texto

I <i>...</i> ou EM <em>...</em>

Explicao: Indica que o texto deve ser apresentado em itlico.
Exemplo: <i>Este texto est em itlico</i>
Exemplo: <em>Este texto tambm est em itlico</em>
Visualizao pelo Browser: Este texto est em itlico

B <b>...</b> ou STRONG <strong>...</strong>

Explicao: Indica que o texto deve ser apresentado em negrito.
Exemplo: <b>Este texto est em negrito</b>
Exemplo: <strong>Este texto tambm est em negrito</strong>
Visualizao pelo Browser: Este texto est em negrito

U <u>...</u>

Explicao: Indica que o texto deve ser apresentado sublinhado.
Exemplo: <u>Este texto est sublinhado</u>
Visualizao pelo Browser: Este texto est sublinhado

STRIKE <strike>...</strike>

Explicao: Indica que o texto deve ser apresentado com um trao cortando-o.
Exemplo: <strike>Este texto est strike !</strike>
Visualizao pelo Browser: Este texto est strike !

SUB <sub>...</sub>

Explicao: Indica que o texto deve ser apresentado em subscrito.
Exemplo: <sub>Este texto est subscrito</sub>
Este texto est subscrito



37

SUP <sup>...</sup>

Explicao: Indica que o texto deve ser apresentado em sobrescrito.
Exemplo: <sup> Este texto est subrescrito </sup>
Este texto est subrescrito

8.3. Controles de Fontes

8.3.1. FONT <font>...</font>

Explicao: Existem 7 tamanhos de fonte em HTML, numeradas de 1 a 7. O tamanho padro 3.
As cores so definidas atravs de um valor hexadecimal de 6 algarismos, ou atravs de seus nomes.
Caso o usurio no possua nenhuma das fontes listadas, ser usada uma fonte padro. Usualmente a
fonte padro a Times New Romam.
Exemplo:
<font face="Times New Roman" size="5" color="#000000">Texto</font>

Atributos de FONT

Atributo: SIZE
Explicao: Indica qual o tamanho de fonte que deve ser usado dentro de sua rea de influncia.
Exemplo:
<font size="5">Texto</font>

Atributo: COLOR
Explicao: Indica qual a cor da fonte dentro de sua rea de influncia
Exemplo:
<font color="#000000">Texto</font>
<font color="black">Texto</font>

Atributo: FACE
Explicao: Determina a fonte (tipo de letra) a ser utilizada. Como valor deve ter uma lista de
nomes de fontes separados por vgula.
Exemplo:
<font face="Times New Roman">Texto</font>
Exemplo:
<font face="Verdana, Arial, Helvetica">Texto</font>

8.3.2. BASEFONT <basefont>

Atributo: SIZE


38
Explicao: Determina o tamanho base de fonte para uma pgina. O TAG deve ser usado no incio
do documento, logo aps <body>.
Exemplo:
<body>
<basefont size="3">

<p>Texto</p>
<p><font face="Arial" color="#FF0000">Texto</font></p>
</body>

8.4. Formatao de Pargrafos

P <p>...</p>

Explicao: Indica que o texto influenciado um pargrafo, e possui um alinhamento prprio. Os
browsers, habitualmente, deixam um espao vertical em branco de cerca de "uma linha" antes de
cada pargrafo.
Exemplo:
<p>Esta a Home Page da Universo Minas. E este um exemplo de pargrafo.</p>

Atributos de P

Atributo: ALIGN
Explicao: Indica se o pargrafo ser alinhado a esquerda (padro), centralizado, a direita ou
justificado usando-se, respectivamente, as palvras "LEFT", "CENTER", "RIGHT" e "JUSTIFY".
Exemplo:
<p align="center">Esta a Home Page da Universo Minas. E este um exemplo de pargrafo
centralizado.</p>



39

8.5. Quebra de Linha

BR <br>

Explicao: Passa para a prxima linha.
Exemplo:
<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 Blockquote <blockquote>...</blockquote>

Explicao: Faz a margem comear mais dentro da pgina. O efeito deste TAG pode ser
acumulado, obtendo assim margens maiores.
Exemplo:
<blockquote>Esta a Home Page da Universo Minas. E este um exemplo de margem visualizada
pelo Browser.</blockquote>
Esta a Home Page da Universo Minas. E este um exemplo de margem visualizada
pelo Browser.

8.7. O TAG DIV <div>...</div>

Explicao: Indica que o texto influenciado uma diviso, e possui portanto um alinhamento
prprio.

Atributos de DIV

Atributo: ALIGN
Explicao: Indica se a diviso ser alinhado a esquerda (padro), centralizado, a direita ou
justificado usando-se, respectivamente, as palvras "LEFT", "CENTER", "RIGHT" e "JUSTIFY".
utilizado no lugar do TAG <p>, quando se deseja modificar o alinhamento sem, no entanto, uinserir-
se espao vertical em branco.
Exemplo:
<div align="right">Esta a Home Page da Universo Minas. E esta a minha diviso.</div>



40
8.8. O TAG PRE <pre>...</pre>

Explicao: Usualmente 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.
Exemplo:
<pre>
Esta a Home Page da Universo Minas.
Aqui nos veremos:Treinamento
Consultoria
Representaes
Solues Web
</pre>

8.9. O TAG CENTER <center>...</center>

Explicao: 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
mantida a compatibilidade com pginas escritas no passado.
Exemplo:
<center>
Esta a Home Page da Universo Minas. Este texto ser centralizado.
</center>

8.10. O TAG NOBR <nobr>...</nobr>

Explicao: Impede que o texto em sua rea de influncia seja "quebrado", isto , dividido em mais
de uma linha. Deve-se usar este TAG de forma cuidadosa. Normalmente o usurio no deseja ser
obrigado a empregar a "scroll bar" para ler o contedo de uma pgina.
Exemplo:
<nobr>Este texto ficar
na mesma linha
ao visualiza-lo no browser.<nobr>
Este texto ficar na mesma linha ao visualiza-lo no browser.


41

9. Listas

9.1. Listas Ordenadas

OL <ol>...</ol>

Explicao: Indica o incio e o final de uma lista ordenda (numerada).
Exemplo:
<ol>
<li> Treinamento </li>
<li> Consultoria </li>
<li> Desenvolvimento </li>
<li> Manuteno </li>
</ol>
1. Treinamento
2. Consultoria
3. Desenvolvimento
4. Manuteno

Atributos de OL

Atributo: START
Explicao: Especifica o nmero do primeiro elemento da lista.
Exemplo:
<ol start="10">
<li> Manuteno </li>
</ol>
10. Treinamento
11. Consultoria
12. Desenvolvimento
13. Manuteno


42

Atributo: TYPE
Explicao: Define o tipo de numerao empregada na lista. Pode assumir os valores "1 (1, 2, 3, 4,
etc) ", "I" (I, II, III, IV, etc), "i" (i, ii, iii, iv, etc), "A" (A,B, ..., Z) ou "a" (a, b, ..., z).
Exemplo:
<ol type="A">
<li> Manuteno </li>
</ol>

A. Treinamento
B. Consultoria
C. Desenvolvimento
D. Manuteno

9.2. Elementos LI <li>. . . </li>

LI <li>

Explicao: Demarca os elementos de listas ordenadas e no ordenadas.
Exemplo:
<ol>
<li> Manuteno </li>
</ol>
1. Treinamento
2. Consultoria
3. Desenvolvimento
4. Manuteno


43

Atributos de LI

Atributo: TYPE
Explicao: Deve ser usado somente em listas no numeradas. Indica qual o smbolo a ser usado
para demarcar o elemento.
Exemplo:
<ul type="square">
<li type="disc"> Consultoria </li>
<li> Manuteno </li>
</ul>
Treinamento
Consultoria
Desenvolvimento
Manuteno

Atributo: VALUE
Explicao: Deve ser usado somente em listas numeradas. Altera a sequncia da numerao.
Exemplo:
<ol>
<li value="15"> Desenvolvimento </li>
<li> Manuteno </li>
</ol>
1. Treinamento
2. Consultoria
15. Desenvolvimento
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 normalmente. No entanto, no so
permitidos "headers" (H1, H2, H3 etc.).



44

9.3. Listas No Ordenadas

UL <ul>...</ul>

Explicao: Indica o incio e o final de uma lista no numerada
Exemplo:
<ul>
<li> Manuteno </li>
</ul>
Treinamento
Consultoria
Desenvolvimento
Manuteno

Atributo de UL

Atributo: TYPE
Explicao: Indica qual o smbolo deve ser usado para demarcar cada elemento da lista. Pode ser
os valores "disc" (), "circle" () ou "square"(n).
Exemplo:
<ul type="circle">
<li> Manuteno </li>
</ul>
Treinamento
Consultoria
Desenvolvimento
Manuteno


45

9.4. Listas de Definio

DL <dl>...</dl>

Explicao: Demarca os elementos de listas ordenadas e no ordenadas.
Exemplo:
<dl>
<dt> Treinamento </dt>
<dd> um departamento da Universo Minas. </dd>
<dt> Consultoria </dt>
<dd> um outro departamento! </dd>
</dl>
Treinamento
um departamento da Universo Minas.
Consultoria
um outro departamento!

Nota:
So muito teis para estruturas do tipo "dicionrio", onde um termo citado e ento explicado. Na
Web muito utilizada para listas de URLs e seus respectivos comentrios.

DT <dt>

Explicao: Representa o termo definido, a ser explicado em <DD>.
Exemplo:
<dl>
</dl>
Treinamento
Consultoria


46

Nota:
No devem conter TAGs referentes a: HEADER, Pargrafo, Listas, Texto Pre-Formatado, Diviso,
CENTER, BLOCKQUOTE, Formulrio, ISINDEX, Linha Horizontal ou Tabela.

DD <dd>

Explicao: Representa a definio do termo presente em <DT>. No deve conter HEADERs.
Exemplo:
<dl>
</dl>
Treinamento
Consultoria



47

10. Links

Os pontos que ligam os hipertextos so chamados de hyperlinks, links ou ncoras de
hipertexto.

O TAG que indica a regio a ser tratada como um hyperlink o par <A> e </A> - "A" (anchor).
Dentro desse TAG, na forma de atributo, colocada a referncia ao arquivo ligado. A referncia
indica a URL do documento. Quando o usurio clicar sobre o trecho realado pela ncora de
hipertexto, o arquivo ligado ser requisitado ao servidor e mostrado na janela do navegador.

Geralmente 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>

Explicao: Indica a regio a ser tratada como hyperlink
Exemplo:
<a href="http://www.Universominas.com.br">Universo Minas</a>
Universo Minas

Atributos de A

Atributo: HREF
Explicao: Define que sua rea de influncia um link.
Exemplo:
<p> Clique em <a href="http://www.Universominas.com.br/cursos.htm">Cursos</a> para acessar a
pgina dos Descritivos dos Cursos.</p>
Clique em Cursos para acessar a pgina dos Descritivos dos Cursos.

Existem quatro formas de se especificar um link:


48

10.1. Links para dentro da prpria pgina

O local precisa ter um "nome". Este "nome" definido da seguinte forma:

Exemplo:
<a href="#nome">Link para o Nome</a>
.
.
.
<a name="nome"><a>

10.2. Para outras pginas de um mesmo Site

Exemplo:
<a href="nome.htm">Link para o Nome</a>

Nesse caso, assumiu-se que o arquivo nome.htm estava localizado no mesmo diretrio da pgina
que referncia. Caso o arquivo nome.htm esteja em outro diretrio, pode-se utilizar a "URL
relativa" pgina de destino.

Exemplo:
<a href="/treinamento/cursos/pgina.htm">Link para a Pgina</a>

Pode-se, ainda, referenciar uma pgina utilizando-se a navegao em diretrios, semelhante ao que
se faz no DOS, lanando mo do operador "..".

Se na pgina http://www.Universominas.com.br/treinamento/cursos.htm existir um link que
aponta para o endereo:
http://www.Universominas.com.br/consultoria/desenvolvimento.htm, este pode ser
representado da seguinte maneira:

Exemplo:
<a href="../consultoria/desenvolvimento.htm">Link para o Desenvolvimento</a>

10.3. Links para outros Sites

Deve-se usar a URL completa da pgina destino.

Exemplo:
<a href="http://www.Universominas.com.br/treinamento/cursos.htm">Link para outro Site</a>

10.4. Link especial: "mailto"


49

Existe um tipo de link chamado de "mailto:". Se, quando o link for definido, o protocolo utilizado
for "mailto:" ao invs de "http://", o link abrir uma janela especial para que se possa enviar um
e-mail (correio eletrnico) para o endereo especfico.

Exemplo:
Mande um<a href="mailto:LUAN@Universominas.com.br">e-mail</a>para a
UNIVERSOMINAS.
Mande um e-mail para a UNIVERSOMINAS.

11. Imagens

IMG <img>

Explicao: Este TAG exibe uma imagem na pgina.

Atributos de IMG

Atributo: SRC
Explicao: Obrigatrio, indica a URL da imagem a ser exibida. Podem ser usadas
URL absoluto (http://www.Universominas.com.br/images/imagem.gif) ou URL relativo
(/images/imagem.gif)
Exemplo:
<img src="/images/imagem.gif">

Atributo: ALT
Explicao: Indica 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.
Exemplo:
<img src="/images/imagem.gif" alt="Logotipo da Universo Minas">

Atributo: ALIGN
Explicao: Determina o alinhamento da imagem em relao ao texto existente na mesma linha. Os
valores vlidos so "TOP", "MIDDLE", "BOTTOM","LEFT" e "RIGHT".
Exemplo:
<img src="/images/imagem.gif" align="top">

Atributo: WIDTH
Explicao: Determina a largura, em pixels, da imagem.
Exemplo:
<img src="/images/imagem.gif" width="600">



50
Atributo: HEIGHT
Explicao: Determina a altura, em pixels, da imagem.
Exemplo:
<img src="/images/imagem.gif" height="60">

Atributo: BORDER
Explicao: Determina a largura, em pixels, da imagem.
Exemplo:
<img src="/images/imagem.gif" border="2">

Atributo: HSPACE
Explicao: Determina a quantidade de espao deixado em branco aos lados da imagem, de forma
que ela no fique demasiadamente prxima dos outros elementos da pgina.
Exemplo:
<img src="/images/imagem.gif" hspace="10">

Atributo: VSPACE
Explicao: Determina a quantidade de espao deixado em branco acima e abaixo da imagem.
Exemplo:
<img src="/images/imagem.gif" vspace="10">

Atributo: USEMAP
Explicao: Indica que a imagem um mapa sensitivo interpretado totalmente.
Exemplo:
<img src="/images/imagem.gif" usemap="#mapalocal">

Atributo: DYNSRC (Microsoft Internet Explorer)
Explicao: Determina 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 AVI.
Exemplo:
<img src="imagemUNIVERSOMINAS.gif" dynsrc="vdeoUNIVERSOMINAS.avi">

Atributo: LOOP (Microsoft Internet Explorer)
Explicao: Indica quantas vezes o videoclip ser exibido. Se o valor for "-1" ou "infinite" ele ser
exibido continuamente.
<img src="imagemUNIVERSOMINAS.gif" dynsrc="vdeoUNIVERSOMINAS.avi" loop="5">

Atributo: START (Microsoft Internet Explorer)
Explicao: Pode assumir os valores "fileopen" (o videoclipe ser exibido assim que a pgina for
aberta, o que o default) ou "mouseover" (o videoclip ser exibido quando o cursor toca-lo).
<img src="imagemUNIVERSOMINAS.gif" dynsrc="vdeoUNIVERSOMINAS.avi" loop="5"
start="mouseover">


51

Alguns Browsers, como o Internet Explorer 3 e 4 e o Netscape Comunicator 4, expe o texto
presente no atributo 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
continuar a exibio do resto do documento. Alm disto, WIDTH e HEIGHT podem ser usados
para distorcer imagens.

Pode-se usar o atributo BORDER para se retirar a borda de um link (quando claro, este for uma
imagem). No entanto, deve-se tomar cuidado para no confundir o usurio, pois este poder no
perceber que a imagem tambm um link.

12. Formatos de Imagens

GIF (Graphics Interchange Format) e JPEG (Joint Photographic Experts Group) so os dois
formatos grficos padres usados na Internet, 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 GIF apresenta um bom rendimento no tamanho e qualidade em imagens com cores "limpas", sem
muito detalhes. Possui suporte para imagens animadas e com partes "transparentes".

Trabalha com cores indexadas, podendo representar um mximo 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 naturalmente compactado (GIFs tem uma
compresso padro).
Podem ser entrelaadas. Uma imagem entrelaada (interlaced) pode ser vista medida que vai
sendo carregada (melhorando a definio aos poucos).
Pode-se definir uma das cores como sendo "transparente", permitindo que se veja o que est
por trs. O recurso de transparncia muito interessante, pois permite criar a sensao de que
as imagens no so todas retangulares.
Permite a criao de animaes (GIFs Animados). O Princpio do GIF Animado o mesmo de
um filme que vemos no cinema, ou seja uma sequncia de imagens transmitida rapidamente, uma
animao propriamente dita. Os anncios (chamados de banners) que se v na Web, na
verdade so, GIFs Animados.

12.2. Usando o JPEG (Joint Photographic Experts Group)



52
O JPEG melhor para imagens que apresentam muitos tons de cor. Este formato ideal para
trabalhar com fotografias digitais 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 perfeito, quanto mais voc comprime,
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 transparncia, portanto sempre aparecem retangulares na tela.
O entrelaamento pode ser conseguido utilizando o formato Progressive Rendered JPEG, uma
nova verso criada para possibilitar um carregamento igual ao de um GIF entrelaado. Os
Browsers de ltima gerao j entendem este formato numa boa, mas no os antigos.
No permite a criao de animaes.

12.3. Sobre o PNG (Portable Networ Graphics)

Um formato novo, ainda no muito comum na Internet, o PNG (Portable Network Graphics),
desenvolvido por um grupo formado especialmente com este fim. Ele uma evoluo das GIFs que
conhecemos, mantendo diversas de suas caractersticas e incorporando novas com pouco custo de
implementaco aos desenvolvedores. Suporta cores TRUECOLOR (48 bits por pixel),
interlaamento, transparncia, etc. Foi desenvolvido para, no futuro, substituir o GIF e o JPEG.

Nota:
PNG pronunciado "ping".

12.4. Imagens no Browser

Uma imagem GIF 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
respectivamente. E ainda, se a sua imagem tem somente 16 cores ela requer somente 4 bits por
pixel, reduzindo em 50% o tamanho do arquivo quando comparado com o de 256 cores.

Da mesma forma que no GIF, existem ajustes finos possveis no JPEG. Neste formato, o tamanho
do arquivo depende da qualidade que voc pode optar para a sua imagem. Alm disso, alguns
softwares permitem 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 monitores
(padro SVGA) de computador de 96 dpi, pode-se sempre diminuir para este valor.

Experimente fazer alguns testes com os dois formatos, variando o nmero de cores, compresso e
resoluo.

Ferramentas Grficas e GIFs Animados



53
Paint Shop Pro 6.0 / Animation Shop http://www.jasc.com/psp.html
Photoshop 5.5 / ImageReady 2.0 http://www.adobe.com

Lista com diversas opes no Site da Tucows, na seo Image Animators

Image Animators http://wwwtucows.matrix.com.br/imgani95.html

13. Mapas Sensitivos

Atravs do conceito de Mapa Sensitivo (Clickable Map), podem ser criados diversos links dentro
de uma mesma imagem. O usurio ser encaminhado para uma URL determinada pelo local da
imagem selecionada.

MAP <map>...</map>

Explicao: Indica o incio e o final do mapa. Pode ficar em qualquer parte da pgina.
Exemplo:
<map name="mapa1">
...
</map>

Atributos de MAP

Atributo: NAME
Explicao: Atributo obrigatrio, indica o nome do mapa.
Exemplo:
<map name="mapa1">
...
</map>

AREA <area>

Explicao: 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>.
Exemplo:
<area coords="0,0,29,29" href="pagina2.htm">

Atributos de AREA

Atributo: COORDS
Explicao: Define as coordenadas da rea. Varia de acordo com o formato declarado em
"SHAPE".
Exemplo:


54

Atributo: HREF
Explicao: Indica a URL destino da rea.
Exemplo:

Atributo: NOHREF
Explicao: Indica que aquela rea ser neutra.
Exemplo:
<area coords="12,0,30,45" nohref>

Atributo: SHAPE
Explicao: Indica o formato da rea. Pode ser "RECT", "CIRCLE" ou "POLYGON". Caso seja
omitido, assume-se "RECT".
Exemplo:
<area shape="circle" coords="50,50,15" href="pagina3.htm>

Nota:
Para "RECT", usa-se o formato "x1, y1, x2, y2", definindo-se o canto superior esquerdo e o
inferior direito do retngulo.
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 Sensitivo Interpretado localmente deve-se passar por duas etapas:
Definio e Descrio

13.1. Definio

Adiciona-se o atributo "USEMAP" no TAG da imagem que vir a ser o Mapa Sensitivo.
USEMAP="#mapa1", onde "mapa1" o nome do mapa descrito atravs dos TAGs
<MAP>...</MAP>
Exemplo:
<img src="imagem.gif" width="600" height="60" alt="imagem.gif"
border="0" usemap="#mapa1">
<map name="mapa1">

Foi inserida, atravs do TAG <IMG> uma imagem no documento. O atributo "USEMAP" define
esta imagem como um Mapa Sensitivo local.
Exemplo:


55

O Mapa Sensitivo ser descrito atravs do TAG <MAP>. O nome da descrio ser "mapa1".
Exemplo:
<map name="mapa1">

Esta imagem no funcionar como um Mapa Sensitivo em browsers antigos, pois estes ignoraro
o atributo "USEMAP".

13.2. Descrio

Uma imagem com 600 Pixels de Largura e 60 Pixels de Altura ser dividida em dois blocos para
serem feitos links para duas pginas distintas.

Exemplo:
<html>
<head>
</head>
<body>

<map name="mapa1">
<area shape="rect" coords="300,2,600,60"
href="http//www.Universominas.com.br/treinamento.htm">
<area shape="rect" coords="0,0,300,60" href="http://www.Universominas.com.br/consultoria.htm">
</map>

</body>
</html>

Foi criado um Mapa Sensitivo interpretado localmente. Para isso, o TAG <IMG> foi utilizado na
definio da imagem e do respectivo mapa.
Em seguida, o mapa definido, atravs dos TAGs <MAP> e <AREA>.

Exemplo feito com a ajuda de um Editor de HTML:
Link para
http://www.touch.com.br/
consultoria.htm

Link para
http://www.touch.com.br/
treinamento.htm



56
<html>
<head>
</head>
<body>

<p></p>

</body>
</html>

15. Tabelas

Assim como as listas, no HTML existem elementos especficos para a criao e formatao de
tabelas. O recurso de tabelas muito interessante e muito usado nas pginas Web.
O conceito o mesmo conhecido usualmente: ela tem linhas e colunas, e na interseo delas esto
as clulas.
Na linguagem HTML voc pode inserir nas clulas tudo o que normalmente faz parte do corpo de
um documento, como textos, links, imagens, listas e at outras tabelas.

TABLE <table>...</table>

Explicao: Indica o incio e o final de uma determinada tabela. Todas as demais marcas referentes
a tabelas - linhas e clulas - somente sero consideradas se incluidas entre <table> e </table>.
<table>
<tr>
<td>Texto A</td>
<td>Texto B</td>
</tr>
</table>

Atributos de TABLE

Atributo: BORDER
Explicao: Se presente, a tabela apresenta bordas. Se for atributo o valor 0 (zero), no somente a
tabela no apresentar bordas, como o espao usualmente reservado para bordas ser liberado,
permitindo a confeco de tabelas mais compactas.
Exemplo:
<table border="4">

Atributo: CELLSPACING


57
Explicao: Indica quanto espao, em pixels, deve ser inserido entre as clulas da tabela.
Exemplo:
<table cellspacing="10">

Atributo: CELLPADDING
Explicao: Indica quanto espao, em pixels, deve ser inserido entre as bordas das clulas e seu
contedo.
Exemplo:
<table cellpadding="5">

Atributo: WIDTH
Explicao: Indica a largura da tabela. Usa-se como medida o nmero de pixels desejado ou uma
porcentagem da largura do documento.
Exemplo:
<table width="300">

Atributo: ALIGN
Explicao: Indica a posio da tabela no documento. Pode assumir os valores "LEFT" ou
"RIGHT", indicando, respectivamente, que a tabela deve estar a esquerda ou a direita do
documento, e com o texto "fluindo" sua volta.
Exemplo:
<table align="center">

Explicao: Especifica uma imagem que ser utilizada como "background" da tabela. A imagem
ser "TILED", isto , repetida de forma a cobrir todo o fundo da tabela.
Exemplo:
<table border background="imagem.gif">

Atributo: BGCOLOR
Explicao: Especifica uma cor de fundo para a tabela.
Exemplo:
<table border bgcolor="yellow">

Atributo: BORDERCOLOR
Explicao: Especifica uma cor para as bordas da tabela.
Exemplo:
<table border bgcolor="yellow" bordercolor="blue">

Atributo: BORDERCOLORLIGHT
Explicao: Especifica uma das cores utilizadas para desenhar a borda com efeito tridimensional da
tabela.
Exemplo:
<table border bgcolor="yellow" bordercolorlight="blue">


58

Atributo: BORDERCOLORDARK
Explicao: Especifica uma das cores utilizadas para desenhar a borda com efeito tridimensional da
tabela.
Exemplo:
<table border bgcolor="yellow" bordercolordark="blue">

Atributo: RULES
Explicao: Indica quais linhas internas a tabela deve apresentar. Pode assumir os valores: "ROWS
(somente as linhas horizontais)", "COLS (somente as linhas verticais)", "NONE (nenhuma)" e "ALL
(todas)".
Exemplo:
<table border bgcolor="yellow" rules="rows">

Atributo: FRAME
Explicao: Indica quais bordas externas a tabela deve apresentar. Pode assumir os valores:
"VOID (nenhuma)", "ABOVE (topo da tabela)", "BELOW (base da tabela)", "HSIDES (topo
e base da tabela)", "LHS (lado direito da tabela)", "VSIDES (esquerda e direita da tabela)"
e "BOX (todas)".
Exemplo:
<table border bgcolor="yellow" frame="below">

Todos os atributos de uma tabela so opcionais. Uma tabela padro no possui bordas e sua altura
e largura so as mnimas necessrias para suportar seu contedo.

TR <tr>...</tr>

Explicao: Indica o incio e o final de uma determinada linha da tabela (Table Row). Uma linha
composta de elementos.
Exemplo:
<table>
<tr>
<td>Texto A</td>
<td>Texto B</td>
</tr>
</table>

Atributos de TR

Atributo: BGCOLOR
Explicao: Define a cor de fundo de uma linha da tabela.
Exemplo:
<table>
<tr bgcolor="red">


59
<td>Texto A</td>
<td>Texto B</td>
</tr>
</table>

TD <td>...</td>

Explicao: Indica um elemento (clula) da tabela, vindo do ingls "Table Data". Os elementos
contm os dados da tabela, sejam eles texto, links, imagens, etc.
Exemplo:
<table>
<tr>
<td>Texto A</td>
<td>Texto B</td>
</tr>
</table>

Atributos de TD

Atributo: ALIGN
Explicao: Define se o contedo da clula estar alinhado a esquerda ("LEFT"), centralizado
("CENTER") ou a direita ("RIGHT").
Se omitido, o alinhamento fica esquerda.
Exemplo:
<table>
<tr>
<td align="ceter">Texto A</td>
<td>Texto B</td>
</tr>
</table>

Atributo: VALIGN
Explicao: Define se o contedo da clula estar alinhado com seu topo ("TOP"), centralizado
("MIDDLE") ou com sua base ("BOTTOM").
Se omitido o alinhamento fica ao meio.

Exemplo:
<table>
<tr>
<td valign="middle">Texto A</td>
<td>Texto B</td>
</tr>
</table>


60

Atributo: WIDTH
Explicao: Define a largura da clula. Pode ser expressa em pixels ou como uma porcentagem da
largura total da tabela.
Exemplo:
<table>
<tr>
<td width="30%">Texto A</td>
<td width="70%">Texto B</td>
</tr>
</table>

Atributo: COLSPAN
Explicao: Indica quantas "clulas de largura" (colunas) a respectiva clula deve ocupar.
Exemplo:
<table>
<tr>
<td colspan="2">Texto A</td>
</tr>
<tr>
<td>Texto B</td>
</tr>
</table>

Atributo: ROWSPAN
Explicao: Indica quantas "clulas de altura" (linhas) a respectiva clula deve ocupar.
Exemplo:
<table>
<tr>
<td rowspan="2">Texto A</td>
<td>Texto B</td>
</tr>
<tr>
<td>Texto C</td>
</tr>
</table>


61

Explicao: Define uma imagem como fundo de uma clula.
Exemplo:
<table>
<tr>
<td background="file:///c:\seta.gif">Texto A</td>
<td>Texto B</td>
<td>Texto C</td>
</tr>
</table>

Atributo: BGCOLOR
Explicao: Define a cor de fundo de uma determinada clula.
Exemplo:
<table>
<tr>
<td bgcolor="yellow">Texto A</td>
<td>Texto B</td>
<td>Texto C</td>
</tr>
</table>

TH <th>...</th>

Explicao: Indica um elemento da tabela. A nica diferena para "TD" que o elemento
identificado como "HEADER" (cabealho) da tabela.
Exemplo:
<table>
<tr>
<th>Texto A</th>
</tr>
</table>

Atributos de TH

Explicao: Define se o contedo da clula estar alinhado a esquerda ("LEFT"), centralizado
("CENTER") ou a direita ("RIGHT").
Se omitido, o alinhamento fica centralizado.



62

Exemplo:
<table>
<tr>
<th align="ceter">Texto A</th>
<th>Texto B</th>
</tr>
</table>

Atributo: VALIGN
Explicao: Define se o contedo da clula estar alinhado com seu topo ("TOP"), centralizado
("MIDDLE") ou com sua base ("BOTTOM").
Se omitido o alinhamento fica ao meio.
Exemplo:
<table>
<tr>
<th valign="middle">Texto A</th>
<th>Texto B</th>
</tr>
</table>

Atributo: WIDTH
Explicao: Define a largura da clula. Pode ser expressa em pixels ou como uma porcentagem da
largura total da tabela.
Exemplo:
<table>
<tr>
<th width="30%">Texto A</th>
<th width="70%">Texto B</th>
</tr>
</table>

Atributo: COLSPAN
Explicao: Indica quantas "clulas de largura" (colunas) a respectiva clula deve ocupar.
Exemplo:
<table>
<tr>
<th colspan="2">Texto A</th>
</tr>
<tr>
<th>Texto B</th>
</tr>
</table>



63

Atributo: ROWSPAN
Explicao: Indica quantas "clulas de altura" (linhas) a respectiva clula deve ocupar.
Exemplo:
<table>
<tr>
<th rowspan="2">Texto A</th>
<th>Texto B</th>
</tr>
<tr>
<th>Texto C</th>
</tr>
</table>

Nota:
Usualmente os Bowsers exibem o contedo de <TH> em negrito e centralizado.

CAPTION <caption>...</caption>

Explicao: Define um ttulo (legenda) para a tabela.
Exemplo:
<table>
<caption>Ttulo da Tabela</caption>
<tr>
<td>Texto A</td>
<td>Texto B</td>
</tr>
</table>

Atributos de CAPTION

Atributo: ALIGN
Explicao: Indica se o ttulo (legenda) deve ficar acima ou abixo da tabela. Deve possuir o valor
"TOP" ou "BOTTOM".
Exemplo:
<table>
<caption align="bottom">Ttulo da Tabela</caption>
<tr>
<td>Texto A</td>
<td>Texto B</td>
</tr>
</table>



64
O ttulo no exibido "dentro" da tabela (visualmente).
O TAG "CAPTION" deve estar contido entre os TAGs de abertura e fechamento da tabela, no
entanto, fora de qualquer linha.

15. Espaamento (Netscape Navigator)

SPACER <spacer>

Explicao: Insere um espao em branco (medido em pixels) na pgina.

Atributos de SPACER

Atributo: TYPE
Explicao: Pode apresentar trs valores: "HORIZONTAL", indicando que um espao
horizontal, "VERTICAL", indicando que um espao vertical e "BLOCK", indicando que um
retngulo.

Atributo: SIZE
Explicao: Indica quantos pixels de largura ("SPACER" tipo "HORIZONTAL") ou altura (tipo
"VERTICAL) o "SPACER" apresentar.

Exemplo:
<spacer type="horizontal" size="10">Universo Minas vem prestando Servios de Desenvolvimento;
anos.
<spacer type="vertical" size="20">No mercado carioca desde o incio de 1991, a
UNIVERSOMINAS trabalha com as mais importantes empresas pblicas e privadas do Brasil.
Mas no s isso.

Atributo: ALIGN
Explicao: Indica que o "SPACER" ser alinhado a esquerda ("LEFT") ou a direita ("RIGHT"),
com o texto fluindo ao seu redor.

Atributo: WIDTH
Explicao: Define a largura em SPACERs tipo "BLOCK".

Atributo: HEIGHT
Explicao: Define a altura em SPACERs tipo "BLOCK".

Exemplo:
Universo Minas vem prestando Servios de Desenvolvimento; Manuteno e Implantao de
Sistemas; Consultoria; Treinamento e Suporte Tcnico, h quase dez anos.No mercado carioca
desde o incio de 1991, a UNIVERSOMINAS trabalha com as mais importantes empresas pblicas
e privadas do Brasil. Mas no s isso.


65
<spacer type="block" widht="60" height="60" align="left">Participamos ativamente da evoluo
tecnolgica do mercado de telecomunicaes, representando produtos inovadores como servidores
CTI CallXpress, servidores de fax RightFAX e placas inteligentes de fax da Brooktrout, que
facilitam a comunicao da sua empresa.

16. Marquee (Microsoft Internet Explorer)

MARQUEE <marquee>...</marquee>

Explicao: O texto ou figura presente na rea de influncia deixa de ser esttico e passa a
percorrer horizontalmente a janela do browser (ou sua frame).
Exemplo:
<marquee>
Universo Minas presta Servios de Desenvolvimento; Manuteno e Implantao de Sistemas;
Consultoria; Treinamento; Suporte Tcnico e Solues Web.
</marquee>

Atributos de MARQUEE

Atributo: ALIGN
Explicao: Pode assumir os valores "TOP", "MIDDLE" e "DOWN". Define o comportamento da
"MARQUEE" em relao ao texto a seu lado.
Exemplo:
<marquee align="top">

Atributo: BEHAVIOR
Explicao: Indica o comportamento da "MARQUEE". Pode assumir os valores "SCROLL"
(default), "SLIDE" e "ALTERNATE".
Exemplo:
<marquee behavior="alternate">

Atributo: DIRECTION
Explicao: Define para que direo a "MARQUEE" deve correr. Pode assumir os valores "LEFT"
(default) e "RIGHT".
Exemplo:
<marquee direction="right">

Atributo: LOOP
Explicao: Especifiva o nmero de rotaes que a "MARQUEE" deve executar. Os valores
"INFINITE" e "-1" indicam um nmero infinito.

Exemplo:
<marquee loop="5">



66
Atributo: SCROLLAMOUNT
Explicao: Indica o nmero de pixels de deslocamento do texto entre cada quadro de animao
da "MARQUEE".
Exemplo:
<marquee scrollamount="15">

Atributo: SCROLLDELAY
Explicao: Indica o nmero de milisegundos transcorridos entre cada quadro de animao da
"MARQUEE".
Exemplo:
<marquee scrolldelay="10">

Atributo: WIDTH
Explicao: Indica a largura do efeito "MARQUEE". Pode ser expressa em pixels ou porcentagem
da janela.
Exemplo:
<marquee width="50%">

Atributo: HEIGHT
Explicao: Indica a altura do efeito "MARQUEE". Pode ser expressa em pixels ou porcentagem
da janela.
Exemplo:
<marquee height="30">

Atributo: BGCOLOR
Explicao: Indica a cor de fundo da "MARQUEE". Cria um efeito de "tarja".
Exemplo:
<marquee bgcolor="yellow">

Atributo: HSPACE
Explicao: Especifica a quantidade de espao deixado em branco aos lados da "MARQUEE".
Exemplo:
<marquee hspace="20">

Atributo: VSPACE
Explicao: Especifica a quantidade de espao deixado em branco acima e abixo da
"MARQUEE".
Exemplo:
<marquee vspace="30">

17. Formulrios

Formulrios so de grande utilidade para a Web, pois permitem a interatividade entre o usurio, a
pessoa que visualiza as pginas e o Servidor Web. Assim, atravs da Web, se pode ler e gravar


67
informaes em Banco de Dados, gerando enormes possibilidades de uso para a Internet, como por
exemplo a de um servio de venda. Formulrios tambm podem ser gerados para a navegao entre
pginas e Sites na Web.

Nota:
GET Indica como os dados sero passados pelo script.
POST Envia os dados para entrada padro do sistema operacional

FORM <form>...</form>

Explicao: Indica a existncia de um formulrio, isto , um local da pgina utilizado pelo usurio
para enviar informaes para um local predeterminado (usualmente um Script CGI).
Exemplo:
<form method="POST" action="http://www.Universominas.com.br/cgi-bin/script">
<p><input type="text" name="T1" size="20"> <input type="submit" value="Submit" name="B1">
<input type="reset" value="Reset" name="B2"></p>
</form>

O contorno pontilhado define a rea do FORM

Atributos de FORM

Atributo: ACTION
Explicao: Indica a localizao (URL) do script que ir receber e interpretar os dados enviados
pelo formulrio.
Exemplo:

Atributo: METHOD
Explicao: Indica o formato no qual os dados sero enviados. Pode assumir os valores "GET"
(indica como os dados sero passados pelo script) ou "POST" (envia os dados para entrada padro
do sistema operacional).

INPUT <input>

Explicao: Indica um objeto (campo texto, checkbox, etc).
Exemplo: <input type="text" size="30">

Atributos de INPUT

Atributo: TYPE


68
Explicao: Especifica que tipo de objeto deve ser: "TEXT", "PASSWORD", CHECKBOX",
"HIDDEN", "RADIO", BUTTON", "SUBMIT" e "RESET".

Atributo: NAME
Explicao: Indica o nome do objeto. Este nome no ser exibido para o usurio. Ele utilizado
pelo script associado ao formulrio para a manipulao de suas informaes.
Exemplo: <input type="text" size="20" name="endereco">

Atributo: VALUE
Explicao: o contedo do objeto. Dependendo do tipo de objeto (ex.: caixas de texto) o
contedo pode ser manipulado pelo usurio.
Exemplo: <input type="text" size="40" value="Rio de Janeiro">

Atributo: SIZE
Explicao: Indica o nmero de caracteres visveis de um objeto tipo "TEXT" (caixa de texto).

Atributo: MAXLENGTH
Explicao: Indica o nmero mximo de caracteres permitido como contedo de um objeto tipo
"TEXT".
Exemplo: <input type="text" size="40" maxlength="60">

Atributo: CHECKED
Explicao: Determina qual a opo padro (default) para objetos tipo "RADIO". Para objetos
tipo "CHECKBOX", sua presena determina que ele est, como default, assinalado.
Exemplo: <input type="checkbox" checked>

Atributo: ALIGN
Explicao: Determina o comportamento dos objetos em relao a textos e imagens presentes na
mesma linha. As opes so: "TOP", "MIDDLE" e "BOTTOM".

O contedo dos formulrios podem ser manipulados por scripts em JavaScript.
TEXTAREA <textarea>...</textarea>

Explicao: Proporciona ao usurio espao para a digitao de mltiplas linhas de texto.
Exemplo:
<textarea rows="3" cols="50">rea para texto</textarea>

Atributos de TEXTAREA

Atributo: NAME


69
Exemplo:
<textarea rows="3" cols="50">rea para texto</textarea name="objeto">

Atributo: ROWS
Explicao: Indica o nmero de linha que a rea de texto deve possuir.
Exemplo:

Atributo: COLS
Explicao: Indica o nmero de colunas que a rea de texto deve possuir.

SELECT <select>...</select>

Explicao: Permite ao usurio selecionar uma dentre uma lista de opes possveis. As opes
so criadas atravs do TAG <OPTION>.
Exemplo:
<select name="opcoes" size="1">
<option selected>Texto A</option>
<option>Texto B</option>
</select>

Atributos de SELECT

Atributo: NAME
Exemplo: <select name="opcoes" size="1">

Atributo: SIZE
Explicao: Define o nmero de opes que sero exibidas simultaneamente.
Exemplo: <select name="opcoes" size="1">

Atributo: MULTIPLE
Explicao: Se presente, indica que mais de uma opo poder ser escolhida.

OPTION <option>

Explicao: Deve ser usado dentro da rea de influncia de "SELECT". Define as diversas opes
disponveis ao usurio.

Atributos de OPTION

Atributo: VALUE


70
Explicao: Define o valor da opo, que ser enviado ao script correspondente caso esta seja
selecionada.

Atributo: SELECTED
Explicao: Define que a opo ser selecionada como default.

17.1. Envio de Arquivos

A definio do formulrio deve conter o atributo ENCTYPE="multopart/form-data", e o METHOD
deve assumir, obrigatoriamente, o tipo "POST".

<form enctype="multipart/form-data" action="_URL_" method="POST">

A implementao do campo onde ser indicado qual o arquivo para UPLOAD (envio) feita
atravs do TAG:

<form enctype="file" name="NomeQualquer" size="xx">

A sintaxe do formulrio no sofre outras alteraes.

17.2. FORM FIELD - Exemplos

17.2.1. One-Line Text Box

Exemplo:
<form method="POST" action="_URL_">
<input type="text" name="T1" size="20"><input type="submit"
value="Submit" name="B1"><input type="reset" value="Reset" name="B2">
</form>

17.2.2. Scolling Text Box

Exemplo:
<textarea rows="2" name="S1" cols="20"></textarea><input
type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2">
</form>



71

17.2.3. Check Box

Exemplo:
<input type="checkbox" name="C1" value="ON">Tpico 1<input type="submit"
</form>

Exemplo com CHECKED:
<form method="POST" action="--WEBBOT-SELF--">
<input type="checkbox" name="C1" value="ON" checked><input
type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2">
</form>

17.2.4. Radio Button

Exemplo:
<input type="radio" value="V1" checked name="R1">Tpico 1<input type="submit"
</form>

17.2.5. Drop-Down Menu

Exemplo:
<select name="D1" size="1">
<option selected value="http://www.Universominas.com.br/topico1">Tpico 1</option>


72
<option value="http://www.Universominas.com.br/topico1">Tpico 2</option>
</select><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset"
name="B2">
</form>

17.2.6. Push Button

Exemplo:
<input type="button" value="Button" name="B1">
</form>

Exerccio de Formulrio

Todas as informaes fornecidas em um formulrio so agrupadas e enviadas para um programa,
mais conhecido como Script CGI, que escrito especialmente para processar esses dados de
acordo com alguma necessidade ou especificao.
Atualizao ou consulta a base de dados, envio de dados por e-mail, ou simplesmente a construo
de uma nova pgina (gerada a partir dos novos dados) so algumas das aplicaes mais comuns.
Escrever um Script CGI no tarefa fcil para a maioria dos WebDesigners, mas existem vrios
CGI "pr-fabricados" disponveis gratuitamente na Rede, que processam as informaes fornecidas
de forma transparente.
Como exerccio proposto vamos utilizar o AnyForm para ensinar como colocar um formulrio em
uma pgina HTML.

<html>

<head>
<title>Formulrio</title>
</head>

<body>

<p><font face="Verdana, Arial, Helvetica" size="2" color="blue"><b>Deixe aqui seus
comentrios!</b></font></p>


73

<p><font face="Verdana, Arial, Helvetica" size="2">Ol! Obrigado por visitar o meu
WebSite. <br>
Use este formulrio para deixar aqui os seus comentrios: </p>

<form action="http://www.uky.edu/cgi-bin/cgiwrap/~johnr/AnyForm.cgi" method="post">
<input type="hidden" name="AnyFormMode" value="mail">
<input type="hidden" name="AnyFormDisplay" value="http://www.Universominas.com.br">
<input type="hidden" name="AnyFormTo" value="luan@universominas.com.br>
<input type="hidden" name="AnyFormSubject" value="Comentarios sobre o WebSite">
<p>Entre com seu e-mail: <input type="text" name"AnyFormFrom" size"40" size="20"></p>
<p>Entre com seu nome: <input type="text" name"Nome" size"40" size="20"></p>
<p>Voc gostou da minha pgina:
<input type="radio" name"Gostou" size"Sim"> Sim
<input type="radio" name"Gostou" size"Mais ou Menos"> Mais ou Menos
<input type="radio" name"Gostou" size"No"> No</p>
<p>Qual a pgina de que voc mais gostou?
<select name="Melhor Pagina" size="1">
<option value="Link">Links </option>
<option value="Curriculum">Curriculum </option>
<option value="Galeria">Galeria de Fotos </option>
<option value="Clipart">Biblioteca Imagens </option>
</select> </p>
<p>Deixe aqui os seus comentrios: <br>
<textarea name="Comentarios" rows="5" cols="40"></textarea></p>
<p>Voc gostaria que eu respondesse a este seu comentrio?
<input type="checkbox" name="Quer Resposta" value="Sim"> Sim </p>
<p><input type="submit" value="Enviar os comentrios"> <input type="reset"
value="Limpar todos os campos"> </p>
</form>
</font>
</body>
</html>



74

18. Som

18.1. Controles de Som do Microsoft Internet Explorer

O Microsoft Internet Explorer incorpora a seu HTML nativo a capacidade de tocar arquivos de
som, nos padres midi, au e wave, atravs do TAG <BGSOUND>.

BGSOUND <bgsound> (Microsoft Internet Explorer)

Explicao: Reproduz um determinado som em "background", isto , enquanto o usurio utiliza a
pgina. O som somente iniciado quando o seu download concludo. Isto difere este TAG de
produtos como o Real Audio, que reproduz o som na medida em que o arquivo correspondente
chega ao browser.

Atributos de BGSOUND

Atributo: SRC
Explicao: Indica qual o arquivo de udio a ser reproduzido. Podem ser utilizados os formatos
".wav". ".au" e ".mid".



75
Atributo: LOOP
Explicao: Indica quantas vezes o som ser repetido. O valor "default" "1". Os valores
"INFINITE" e "-1" indicam que o som deve ser repetido indefinidamente.

Tenha cuidado ao inserir arquivos de udio nas pginas. Avalie bem seus tamanhos e respectivos
tempos de download.

18.2. Controles de Som no Netscape Navigator

Diferentemente do Explorer, o Netscape no vem com controles nativos de som, mas tem a
capacidade de tocar diferentes tipos de sons atravs do plug-in LiveAudio, que vem normalmente
incorporado ao software Netscape a partir da sua verso 3 e suporta os tipos de som mais
populares, como wave, midi e au. Como este plug-in j vem incorporado ao Netscape Navigator,
pode ser usado tranquilamente, pois todos os usurios deste browser o tero instalado.

19. Frames

19.1. Definio

At a chegada do Netscape 2.0, e com ele a implementao do NHTML, uma pgina era
composta de uma janela, sem divises.
Atravs do framing, um recursos poderoso, a janela de um browser pode ser dividida em diversas
partes. Cada uma dessas partes chamada de frame.
Cada uma dessas frames pode ser manipulada separadamente. Cada frame pode conter um
documento diferente. Alm disso, uma frame pode "ordenar" ao browser para que este atualize,
com a URL indicada, uma frame diferente.
Como todos os recursos mais avanados para a construo de Home Pages, tambm os frames
devem ser utilizados com o mximo de cuidado. Sua utilizao deve obedecer ao critrio de
necessidade, para no prejudicar o designe a navegabilidade da pgina. Os casos de real
necessidade de frames no so tantos, mas quando surgem, as frames podem melhorar
dramaticamente o site.
Casos de ndices e tutoriais so alguns dos mais comuns em que o uso de frames mais indicado.
Exatamente para efeitos 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 Layout e Documentos de Contedo

Com a definio de frames, os documentos escritos em HTML ( extenso. html ou htm) podem
ser de dois tipos:



76

1. Documentos de Layout
2. Documentos de Contedo

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 implcita ou explcita para outro
documento que ser exibido no frame. Esse "documento filho" ser exibido independentemente 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 TAG <FRAMESET> substitui o TAG <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 TAGs
<FRAMESET> encadeados, fazendo-se, desta maneira, divises das divises da pgina. Assim
como o <BODY>, o TAG <FRAMESET> precisa ser fechado contm todas as informaes
sobre cada uma das subdivises da janela, sobre cada uma das frames.

FRAMESET <frameset>...</frameset>

Explicao: Contm os elementos "FRAME", "NOFRAMES" e outros "FRAMESETs" que
podem ser aninhados para que se tenha uma divises dentro de uma diviso de layout.
Exemplo:
<frameset scrolling="yes" cols="25%,50%,*">
<frame src="contents.htm">
<frame src="info.htm">
<frameset scrolling="no" src="grafic.htm">
</frameset>

Atributos do FRAMESET

Atributo: COLS
Explicao: Divide a janela (ou frame) em diversas frames verticais, tantas quantas forem os
valores descritos. Os valores podem estar expressos em pixels, percentuais ou relativamente uns aos
outros.
Exemplo:


77
<frameset cols="*,2*">
Exemplo:
<frameset cols="50,100">

Atributo: FRAMEBORDER
Explicao: Indica se ser exibida uma borda 3D para as frames, ou se as frames no aparecero
destacadas por uma borda. O parmetro pode assumir os valores "1" (default, indica a exibio da
borda) ou "0" (suprime a exibio de borda).
Exemplo:
<frameset cols="*,2*" frameborder="1">
Exemplo:
<frameset cols="50,100" frameborder="0">

Atributo: FRAMESPACING
Explicao: Cria um espao adicional, em pixels, entre as frames.
Exemplo:
<frameset cols="*,2*" framespacing="10">

Atributo: ROWS
Explicao: Divide a janela (ou frame) em diversas frames horizontais, tantas quantos forem os
valores descritos. Os valores podem estar expressos em pixels, percentuais ou relativamente uns aos
outros.
Exemplo:
<frameset rows="*,2*">

Os atributos "FRAMESPACING" e "FRAMEBORDER" funcionam igualmente por toda a cadeia
de "FRAMESETs" encadeados, bastando que sejam declarados no primeiro 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>

Explicao: Define o contedo de cada frame do documento.
Exemplo:
<frame src="page1.htm">

Atributos de FRAME

Atributo: SRC
Explicao: Associa uma URL frame.
Exemplo:



78
Atributo: NAME
Explicao: Associa um valor (nome) janela.
Exemplo:
<frame src="page1.htm" name="cursos">

Atributo: MARGINWIDTH (Microsoft Internet Explorer)
Explicao: Especifica o valor da margem direita/esquerda da frame. Caso seja impossvel para o
browser seguir o valor determinado, este ignorado.
Exemplo:
<frame src="page1.htm" marginwidth="30">

Atributo: MARGINHEIGHT (Microsoft Internet Explorer)
Explicao: Especifica o valor da margem superior/inferior da frame. Caso seja impossvel para o
browser seguir o valor determinado, este ignorado.
Exemplo:
<frame src="page1.htm" marginheight="20">

Atributo: SCROLLING
Explicao: Define apresena, ausncia ou atribuio automtica pelo browser das barras de
rolagem. Pode ser "YES", "NO" ou "AUTO".
Exemplo:
<frame src="page1.htm" acrolling="no">

Atributo: NORESIZE
Explicao: Impede que o usurio mude o tamanho da frame.
Exemplo:
<frame src="page1.htm" noresize>

NOFRAME <noframe>...</noframe>

Explicao: Permite a criao de uma opo de navegao para browsers mais antigos, que no
entendem frames.
Exemplo:
<noframes>
<body>
<p>Esta pgina usa Frame, mas o seu Browser no os suporta.</p>
</body>
</noframes>

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 antigos,
provavelmente avisando a seus usurios para que consigam uma verso mais nova, ou que sigam um
determinado link para pgina escrita sem o uso de frames.


79

19.4. Frames Sobrepostas Diretamente e Indiretamente

A janela do browser pode ser dividida em diversas frames horizontais e verticais. para que isso seja
possvel, o NHTML permite que TAGs <FRAMESET> sejam encadeados. Assim so criadas
frames sobrepostas diretamente.

Exemplo (Documento de Layout):
<html>

<head>
</head>


<frameset rows="*,*">


<frameset cols="30%,70%">


</frameset>
</frameset>
</html>

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 inicialmente dividida em 2 frames horizontais iguais. Foi atribudo o
documento de contedo "page1.htm" primeira frame.
Em seguida, dividiu-se a segunda frame em duas frames verticais, a primeira com 30% do espao
disponvel e a segunda com os restantes 70%.

Uma frame pode exibir um documento de contedo, isto , um documento tradicional com textos,
imagens etc, ou um documento de layout, que a dividiria novamente em outras frames. Chama-se
isto de diviso indireta.


80
<html>

<head>
</head>

</frameset>
</frameset>
</html>

Exemplo (Documento de Layout - page3.htm):
<html>

<head>
</head>

<frameset rows="*,2*">
</frameset>
</frameset>
</html>

O documento de layout estabelece a diviso da janela em 3 frames. Duas dessas frames contm
os documentos de contedo page1.htm e page2.htm.
A terceira frame contm o documento de layout page3.htm, que a subdivide em 3 sub-frames.

19.5. Links em Frame Alvo

Quando o usurio pressiona um link qualquer em uma frame, o link pode atualizar sua prpria
frame com o documento contido em sua URL, ou atualizar outra frame. Para que seja possvel a
atualizao de outras frames, foi introduzido o atributo "TARGET" no TAG <A>.



81
<html>
<head>
</head>

<frame src="page1.htm" name="pagina1">
</frameset>
</frameset>
</html>

Exemplo (Documento de Layout - page2.htm):
<html>
<head>
</head>

<body>
<a href="html1.htm" target="pagina1">
Clicando neste Link, a Frame "pagina1"ser atualizada
com o arquivo "html1.htm".</a>
</body>
</html>

O link contido do documento "page2.htm" tem como alvo a frame chamada de "pagina1", isto
, quando "clicado", no ir atualizar a prpria frame, mas a "frame alvo".

O atributo "TARGET" pode ter o nome de uma frame ou uma dentre as seguinte palavras:
_self (atualiza a prpria frame)
_parent (atualiza a "frame-me")
_top (atualiza toda a janela, independente de qualquer frame - ex.: link externo)
_blank ou _window (abre uma nova janela de browser)

"_self", "_parent" e "_top" so case-sensitive, e devem ser escritos em minsculas.


82

20. SSI (Server Side Include)

Comentrio no cdigo HTML que insere automaticamente 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 Include)

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 editor de texto - o Bloco de
Notas por exemplo. Denomine este arquivo de "texto.txt".

3. No lugar do trecho retirado, do documento HTML, inclua as trs linhas seguintes:
Exemplo:




A primeira e ltima linhas so apenas comentrios. Servem para voc saber que ali entrar o
contedo do arquivo "texto.txt".
A linha do meio contm a chamada para o servio SSI.
Entre o sinal de exclamao e o item #include coloque exatamente dois hifens
("--").
Exemplo:


Em lugar de escrever apenas "texto.txt", indique o diretrio onde se encontra o arquivo.
Exemplo:
<html>

<head>
</head>

<body>





83
</body>
</html>

4. Salve o arquivo HTML como "pagina.htm". Salve outra vez, agora como "pagina.shtm".
O "s" indica uma pgina ligada ao SSI.
Alm de SHTM, as pginas SSI tambm podem ter extenso SHL, STM e SHTML.
Abra o Browser e carregue a "pagina.shtm". A pgina ser exibida exatamente como foi criada.
Isso porque o Servidor substitui a TAG de incluso pelo texto do arquivo indicado, antes de
enviar a pgina ao Browser. Verifique o cdigo HTML e confira.

5. Agora voc pode alterar o contedo salvo em "texto.txt" sem precisar mexer no arquivo
"pagina.shtm". Caso voc queira substituir o arquivo ".txt", basta criar um outro com o
mesmo nome e salvar no mesmo diretrio.

21. Etapas para Criao de um Site

Pequenos "truques" fazem bastante diferena no momento da criao de um site. Saber organizar as sees,
definir a formatao das imagens e textos deixa o trabalho mais veloz e com maior qualidade.

21.1. Planejamento

Definio do objetivo do site. Voc pode criar uma pgina simples com informaes bsicas ou decidir-se por
fazer um comrcio eletrnico, tudo depende do capital disponvel. Lembre-se que o site ser feito para seu pblico
alvo.

21.2. Coleta de Material

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 Editorial

Faa um estudo definido do Layout de seu site, relacionando as diferentes informaes entre si de forma lgica.
Tente facilitar ao mximo a navegao, se possvel, crie sistemas de busca internos e mapas.

21.4. Design

Lembre-se que criar um site moderno no uilizar todos os tipos de tecnologia disponvel, a prioriadade deve ser
as informaes. Por outro lado muito informao, com pouca preocupao no design no funcional.

21.5. Programao

Verifique o funcionamento dos scripts e programas que realizam tarefas automticas. Se possvel, teste o site em
vrias verses de browsers.



84
21.6. Divulgao

Cadastre o seu site nos sistemas principais sistemas de busca nacionais e internacionais. Divulgue o endereo em
caixas de produtos, cartes e materias promocionais.

21.7. Manuteno

Atualize as informaes periodicamente e verifique o funcionamento de links e scripts.

22. DHTML (HTML Dinmico)

Refere-se a pginas Web cujo contedo se modifica sem interveno direta do WebMaster. Uma
mesma pgina pode ser vista de forma diferente, dependendo de variveis como a localizao
geogrfica do Internauta, a hora da visita, pginas anteriores j vistas e as preferncias do usurio.
Vrias tecnologias so usadas para produzir HTML dinmico: Scripts CGI, Server Side
Includes (SSI), Cookies, Java, JavaScript e ActiveX.

DHTML permite criar efeitos especiais, tais como texto em que sai da pgina uma palavra por vez
ou efeitos de transio com estilo de mensagem giratria entre as pginas.

23. XML (Extensible Markup Language)

O XML uma evoluo do HTML - no apenas convive, como se integra facilmente a ele.
Ainda h poucas ferramentas para o trabalho em XML e poucos softwares capazes de interpret-lo.
Mas a adoo dessa tecnologia pelos principais fabricantes deve mudar esse panorama em pouco
tempo. O Internet Explorer 5.0, foi o primeiro 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 contrrio do HTML, no entanto, o XML no estabelece como um determinado
elemento deve ser visualizado. Seu objetivo armazenar as informaes de forma organizada. A
idia que um arquivo XML possa ser apresentado em mdias diferentes - um mesmo material, por
exemplo, pode receber determinado tratamento grfico para a Web e outra formatao para ser
impresso.
Por suas caractersticas, o XML necessita de um intermedirio para que os dados sejam
visualizados.

24. Editores de HTML

Torna-se bem mais simples e agradvel a confeco de pginas quando se usa um software
apropriado. No existe hoje um programa padro para desenvolvimento em HTML, nem um editor
WYSIWYG (What You See Is What You Get) perfeito para a criao de pginas.



85
Existe, porm uma srie de editores HTML que podem facilitar em muito o trabalho de
desenvolvimento 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.microsoft.com/brasil
HomeSite 4.0 http://www.allaire.com
DreamWeaver 4.0 http://www.macromedia.com.br

25. WebMails

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 alternativo, por quem quer anonimato ou esteja viajando, os
webmails so gratuitos. s entrar em algum dos servios abaixo e criar um ou vrios endereos.

WebMails

HotMail http://www.hotmail.com
ZipMail http://www.zipmail.com
Yahoo Mail http://mail.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 Interface, CGI) para troca de
dados com servidores Web. Podem ser escritos em diferentes linguagens de programao, entre
elas C, Perl, Java, Visual Basic e Delphi. Os formulrios HTML, por exemplo, usam programas
CGI para processar as informaes quando o usurio clica no boto "Enviar". Outra forma de dar
retorno dinmico ao do internauta rodar scripts ou programas na mquina dele.

26.2. Client Side

Literalmente: "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 CGI, que so do tipo Server Side (executados no servidor).



86
26.3. ASP (Active Server Pages)

Padro para pginas Web criadas dinamicamente com base em cdigo JScript ou Visual Basic.
Quando o Browser solicita uma pgina ASP, o Servidor monta-a na hora e apresenta-a ao
Browser. Nesse aspecto, ASP e CGI so similares.

26.4. PHP (Personal Home Page)

Linguagem de Scripts usada para criar pginas Web dinmicas. Assim como os Scripts em Perl, os
programas PHP so embutidos em TAGs HTML e executados no Servidor. A fora do PHP est
em sua compatibilidade com muitos Banco de Dados.

26.5. Criptografia

Processo de embaralhamento de dados, para evitar que pessoas no-autorizadas leiam as
informaes.

26.6. Plug-In

Software que aclopado ao browser para ampliar suas funes. Os plug-ins servem para permitir a
apresentao de imagens, sons ou desenhos tridimensionais, entre outras aplicaes.

Plug-ins

Windows MediaPlayer http://www.microsoft.com/windows/mediaplayer/download
RealPlayer G2 http://www.real.com/g2/products/player/index.html
Acrobat http://www.adobe.com/prodindex/acrobat/readstep/html
Alexa http://www.alexa.com/download/index.html
QuickTime http://www.apple.com/quicktime/download

26.7. Applet

Programa escrito para rodar dentro de outro programa (por exemplo, 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. Servlet

Applet que roda num servidor. Em geral, o termo se refere a um Applet Java que executado num
servidor Web. Esse tipo de programa tem-se tornado comum como substituio aos programas
CGI


87

26.9. Cookie

Mensagem enviada ao Browser pelo servidor Web. Gravada no micro do usurio, ela lida e
devolvida ao servidor quando o Browser solicita uma pgina. O objetivo bsico do Cookie
identificar o usurio, a fim de apresentar pginas personalizadas.

26.10. Download

Cpia de arquivos de um computador qualquer para o micro do usurio.
Quando voc transfere um arquivo de algum lugar para o seu computador, voc est fazendo um
download.

Gerenciadores de Download

Cath-Up http://www.manageable.com/download.html
Getright http://www.siliconaction.com.br / http://www.getright.com/get.html
Go!Zilla http://www.gizmo.net/gozilla
Windownload http://mason.gmu.edu/~rmcclana/windownload.html
Mr. Cool http://www.cix.co.uk/~net-services/mrcool/welcome.htm
Download Wonder http://www.forty.com

26.11. Upload

Transferncia de arquivos do micro do usurio para um computador qualquer.
Quando voc transfere um arquivo do seu computador para algum lugar, voc esta fazendo um
upload.

Gerenciadores de Upload

Internet Neighborhood http://www.tucows.com
CuteFTP http://www.

26.12. RGB

Iniciais, em ingls, das cores vermelho, verde e azul. O RGB um modelo de cores baseado nessas
trs tonalidades bsicas e utilizado como padro nos monitores de vdeo. Um dos problemas mais
difceis da editorao eletrnica obter a correspondncia 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 partir da mistura dessas quatro cores.

2188 HTML

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

2188 HTML

Hochgeladen von

Copyright:

Verfügbare Formate

LINGUAGEM DE PROGRAMAO HTML

< P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com >

Das könnte Ihnen auch gefallen