ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Introdução

Antes de começarmos a estudar HTML, é necessário que se entenda alguns

princípios básicos que envolvem esta linguagem.

Internet

Internet é uma rede mundial de milhares de pequenas redes de computador e

milhões de microcomputadores comerciais, educacionais, governamentais e pessoais
que usa os protocolos TCP/IP (Transmission Control Protocol/Internet Protocol) para
comunicação.

No centro da Internet existem linhas de comunicação 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 serviços para usuários, como Correio

Eletrônico, a World Wide Web, FTP, grupos de notícias Usenet, Gopher, IRC, telnet e
outros.

A Internet é como uma cidade eletrônica com bibliotecas virtuais, lojas virtuais,
escritórios virtuais, galerias de arte virtuais, etc.

TCP/IP (Transmission Control Protocol/Internet Protocol -

Protocolo de Controle de Transmissão/Protocolo Internet)

Conjunto de protocolos utilizados na troca de informações entre computadores de

diferentes arquiteturas dentro da Internet. O TCP/IP está disponível para qualquer
tipo de CPU e Sistema Operacional.

Intranet

Intranet é uma rede desenvolvida para processamento de informações em uma

empresa ou organização. Seu uso inclui serviços como distribuição de documentos e
software, acesso a bancos de dados e treinamento.

Uma intranet é assim chamada porque ela geralmente emprega aplicativos

associados à Internet, como páginas da Web, navegadores da Web, sites FTP,
Correio Eletrônico, grupos de notícias e listas de distribuição, acessíveis somente às
pessoas que fazem parte da empresa.

Pág. 1
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Firewall (Parede de Fogo)

Firewall é um método para proteger os arquivos e programas em uma rede contra

usuários 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 usuários acesso à Internet
enquanto protege as informações internas.

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 distribuição de informações a grupos de pesquisas iniciado
no ano de 1989 por cientistas do CERN (Centro European Researche Nucleare)
laboratório de física sediado em Genebra, na Suiça, com o intuito de facilitar a
comunicação interna e externa.

Antes da WWW, os cientistas, assim como toda a comunidade Internet, necessitavam

de uma série de programas distintos para localizar, buscar e visualizar as
informações.

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 começou a anunciar o projeto WWW. No entanto,
apenas em fins de 1993 a World Wide Web iniciou sua fase de crescimento
explosivo, com a introdução da versão 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 várias tarefas
necessárias para se obter as informações disponíveis na Internet.

Usuários de todo o mundo foram atraídos pela forma simples e divertida que a WWW
disponibilizava o conteúdo da Internet.

A organização World Wide Web Consortium (W3C) é responsável pela padronização

do HTML. A especificação original do HTML foi desenvolvida, no CERN, por Tim
Berners-Lee atual Preisidente do W3C, que transformou sua obra em patrimônio
coletivo dos internautas.

A versão padrão do HTML hoje é a 4.0. Entretando algumas versões de Browsers

ainda interpretam somente a versão 3.2 do HTML.
Pág. 2
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Web

Web é o diminutivo para World Wide Web. Termo usado originalmente para a parte
da Internet que surgiu no início da década de 90, composta por informações
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 sinônimo da própria Internet ("Grande
Rede").

Hipertexto

Originalmente, Hipertexto é qualquer informação de texto em um computador, que

contenha saltos para outras informações.

Os documentos visualizados através dos Browsers são escritos em Hipertextos,

utilizando-se uma linguagem especial chamada HTML (HyperText Markup Language).

Através de hipertexto pode-se "navegar" de forma especial através de elementos

especiais chamados "links" para outros documentos ou para partes do mesmo
documento.

Um documento "não-hipertexto" permite somente que se navegue em uma

sequência, percorrendo seu conteúdo para frente e para trás.

O hipertexto nas páginas da Web foi expandido para incluir hyperlinks a partir de
texto, de uma figura, de um elemento gráfico, de mapas de imagens, som e até
mesmo animações.

Para se ter uma idéia de hipertexto, basta visualizar o sistema de "Ajuda" do

Microsoft Windows.

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 gráfico 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.

Home Page

Home Page é um conjunto de "páginas", documentos diponíveis na Web, interligados

entre si (através de links). O termo Home Page também é usado para designar a
Pág. 3
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

"página principal" de um conjunto de documentos. Um conjunto de "páginas"

também é chamado de Site.

Alguns Servidores da Web reservam [Link] como o nome da home page (página
principal), enquanto outros a denominam como [Link].

Site

Palavra em inglês que significa local, lugar. Na Internet, designa um conjunto de

páginas que representa uma pessoa, instituição ou empresa na rede.

Browsers (Navegadores da Web)

Browsers são softwares que lêem e interpretam arquivos HTML (Hyper Text Markup
Language) enviados na World Wide Web, formata-os em páginas da Web e os exibe
ao usuário. Navegadores da Web também podem executar som ou arquivos de vídeo
incorporados em documentos da Web se você dispuser do hardware necessário.

Existem Browsers para todos os gostos. Os mais utilizados, o Internet Explorer e o

Netscape Navigator, vêm acompanhados de outros programas para Internet, como o
leitor de Correio Eletrônico (e-mail). Existem outras opções de Browsers, basta
escolher um deles e partir tranquilo pelos "mares" da Internet.

Browsers

Internet Explorer [Link]

Netscape [Link]
Opera [Link]
NetCaptor [Link]
PolyWeb [Link]
NeoPlanet [Link]
KatieSoft Scroll [Link]

Pág. 4
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Internet Explorer Netscape Navigator

Protocolo

Protocolo é um conjunto de regras estabelecidas com o objetivo de permitir a

comunicação entre computadores. É um método de acesso a um documento ou
serviço através da Internet, como File Transfer Protocol (FTP) ou Hypertext Transfer
Protocol (HTTP). Também denominado tipo.

Protocolo HTTP (HyperText Transfer Protocol)

(Protocolo de Transferência de Hipertexto)

HTTP é um protocolo da Internet utilizado pelos computadores ligados à Web para

comunicar-se entre si, ativa os navegadores da Web para recuperarem informações
de servidores da World Wide Web.

O protocolo permite a um usuário usar um programa cliente para entrar em um URL

(ou clicar em um hyperlink) e recuperar texto, elementos gráficos, som e outras
informações digitais de um servidor da Web.

Endereços URL de recursos HTTP começam com [Link]

Protocolo FTP (File Transfer Protocol)

(Protocolo de Trasferência de Arquivo)

FTP é um protocolo que possibilita a transferência de arquivos de um local para outro

pela Internet.

Normalmente, os sites têm áreas públicas de FTP, permitindo que os usuários façam
download de programas por esse processo.

Pág. 5
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Protegido por senhas, o FTP também é utilizado para atualizar a distância sites
localizados em empresas hospedeiras.

URLs de arquivos em servidores FTP começam com [Link]

FTP Anônimo

A capacidade de acessar um sistema de computador remoto onde não se tem

nenhuma conta, através do File Transfer Protocol (FTP - Protocolo de Transferência
de Arquivo).

Os usuários têm direitos de acesso restritos com o FTP Anônimo e, geralmente,

podem somente listar, exibir ou copiar arquivos para ou a partir de um diretório
público no sistema remoto.

Muitos sites FTP não permitem o acesso ao FTP Anônimo para manter a segurança.

(Uniform Resource Locator)

(Localizador de Recursos Uniforme)

Um dos principais objetivos do projeto da WWW era o desenvolvimento de um

padrão de referência 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 tradução literal, Localizador Uniforme de

Recursos) é uma seqüência de caracteres que fornece o endereço Internet de um
Site da Web ou um recurso da World Wide Web, juntamente com o protocolo (como
FTP ou HTTP) através 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 endereço de um servidor válido
da Internet ou localização simbólica. Pode ser colocado um texto
([Link], por exemplo) ou o endereço IP do site.

Endereço IP (Endereço do Protocolo Internet)

A maneira padrão de identificar um computador conectado à Internet, da mesma

forma que um número de telefone identifica um telefone em uma rede telefônica.
Um endereço IP é representado por quatro números separados por pontos e onde
cada número é menor que 256, por exemplo, [Link]. O administrador de seu
servidor Web ou o provedor de serviços de Internet irá atribuir um endereço IP a seu
computador.

Pág. 6
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

O tipo mais comum de URL é [Link] que fornece o endereço Internet de uma
página da Web. Alguns outros tipos de URL são:

ftp:// que fornece o local da rede de um recurso FTP.

gopher:// que fornece o endereço Internet de um diretório gopher
news:// grupos de discussão ou de notícias (newsgroups)
[Link] para especificar um endereço de Correio Eletrônico da Internet (para
enviar correio eletrônico).

URL Absoluto

indicamos o endereço completo do item que desejamos recuperar.

O URL absoluto inclui um protocolo, como "http", local da rede, além de caminho e
nome de arquivo opcionais.
Exemplo: [Link] é um URL Absoluto

URL Relativo

Uma referência relativa assume-se que a máquina e diretório do item já estão sendo
usados e apenas necessita-se indicar o nome do arquivo desejado (ou posivelmente
subdiretório e arquivo).Um URL relativo inclui um protocolo.
Exemplo:
O URL relativo Treinamento/[Link] refere-se à página [Link], na pasta
Treinamento, abaixo da pasta atual.

Endereço

Endereço é o caminho até um objeto, documento, arquivo, página ou outro destino.

Um endereço pode ser um URL (Uniforme Resource Locator - Localizador Uniforme

de Recursos) ou um caminho de rede UNC (Universal Naming Convention -
Convenção Universal para Nomes), o formato padrão 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 endereço [Link] indica um URL do Web Site da XYZ

Informática Ltda.

Pág. 7
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Entendendo uma URL

[Link]

http:// Protocolo - Protocolo da Internet utilizado pelos computadores ligados à

Web para comunicar-se entre si.

[Link] Nome do Domínio - Domínio são as categorias de endereços da

Internet que representam países ou tipos de organização.

• www Sigla de World Wide Web, significa Rede Mundial

• XYZ Nome específico que pode conter uma ou mais palavras, separadas ou
não, por hifens (ex.: XYZ-informatica).

• com Tipo de Domínio - 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 (organizações sem fins lucrativos).

• br Sigla do País - composta de duas letras, significa que a página está situada
em um computador no Brasil. Páginas que não possuem terminação indicando o
país de origem estão situadas nos Estados Unidos. Outros Exemplo: .pt (Portugal)
e .jp (Japão).

treinamento Diretório (pasta) onde está localizado a página (arquivo) [Link].

Às vezes uma URL indica apenas o diretório (ou o servidor). Nesse caso, o servidor
se encarrega de procurar e enviar o arquivo adequado.

[Link] Nome da página escrita em HTML requerida (páginas da Web

geralmente tem terminação em .htm ou .html).

#local Aponta para o local específico dentro da página que será exibida.

Pág. 8
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

ISP (Internet Service Provider)

Provedores

O Provedor é uma Empresa ou Organização que oferece conexão para Internet.

Através de um Provedor você pode ter acesso à Internet e serviços de hospedagem
de Site. O Provedor disponibiliza as informações solicitadas pelos "navegadores"
(Browsers) por uma combinação de computador e programas que formam os
servidores situados em instalações apropriadas, neste caso, o Provedor aluga espaço
em um disco rígido cuja máquina deve estar permanentemente conectada à rede,
disponibilizando sua Home Page 24 horas por dia a todos os usuários da Internet.
A ligação com o provedor pode ser feita por linhas telefônicas normais (conexão
discada) ou por linhas especiais, ligadas 24 horas por dia (conexão dedicada).

Um provedor geralmente oferece várias funções de aplicações como World Wide

Web (http), transferência de arquivos (ftp) e gerenciamento de conteúdo
(armazenamento de dados). A maioria dos provedores também disponibilizam caixa
postal eletrônica, "contas" de e-mail para seus usuários, juntamente com os serviços
de acesso e hospedagem.

Seu Site na Grande Rede

Ao desenvolver sua Home Page, basta transferir seus arquivos via FTP para o
Provedor.
Alguns programas específicos podem facilitar o seu Upload, já que o Browser
funciona apenas para busca de arquivos, e não para o envio. O CuteFTP é um dos
mais indicados pelos provedores, que permite um acesso totalmente gráfico e
interativo a servidores FTP. Mas, sem dúvida, existe um excelente, o Internet
Neighborhood. Sua interface é comum ao do Microsoft Windows Explorer,
funcionando de maneira simples, possibilitando Download e Upload da máquina local
para o servidor FTP, transferindo arquivos de uma pasta para outra.

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).

Pág. 9
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Resolução

Resolução é o numero de pixels usados para capturar ou exibir uma imagem. A

resolução VGA padrão é 640 pixels na horizontal e 480 na vertical. O SuperVGA
(SVGA) trabalha com valores de 800x600 e 1024x768. Há quem chame de SSVGA as
resoluções acima de SVGA, como 1600x1200. Quanto maiores os números, maiores
os detalhes da imagem.

HTML (HyperText Markup Language)

(Linguagem de Formatação de Hipertexto)

Originado do casamento dos padrões HyTime (Hypermedia/Time-based Doumnt

Structuring Language) e SGML (Standard Generalized Markup Language), o HTML,
sigla para HyperText Markup Language (Linguagem de Formatação de Hipertexto),
linguagem usada para criar páginas na Web, estabelece como um determinado
elemento deve ser visualizado, não sendo, portanto uma linguagem de programação,
e sim, uma linguagem de formatação de exibição de textos, através de "comandos"
conhecidos como TAGs. Em suma, HTML é empregado para definir as funções dos
diferentes elementos das páginas (como textos, fotos ou animações) que serão
visualizadas pelo programa de navegação (Browser).

HyTime (Hyprmedia/Time-based Document Structuring Language)

HyTime (ISO 10744:1992) é o padrão para representação estruturada de hipermídia

e informação baseada em tempo. Um documento é visto como um conjunto de
eventos concorrentes dependentes de tempo (áudio, vídeo, etc.), conectados por
webs ou hiperlinks.
O padrão HyTime é independente dos padrões e processamento de texto em geral.
Ele fornece a base para a construção de sistemas hipertexto padronizados,
consistindo de documentos que aplicam os padrões de maneira particular.

SGML (Standard Generalized Marup Language)

Padrão ISO 8879 de formatação de textos: não foi desenvolvido para hipertexto, mas
torna-se conveniente para transformar documentos em hiper-objetos e para
descrever as ligações. SGML não é aplicado de maneira padronizada: todos os
produtos SGML tem seu próprio 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 código ASCII (American Standard Code for
Information Interchange - código utilizado para representar textos quando há
computadores envolvidos), isto é, como texto puro, sem formatação ou caracteres de
controle. Pode-se usar, portanto, o Notepad do Windows, ou o Edit do MS-DOS.
Pode-se também usar editores mais modernos, como o Word, sendo necessário

Pág. 10
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

neste caso que o documento seja gravado no formato texto e não como um ".doc"
normal do MS-Word.

Conjunto de caracteres ASCII

O conjunto de caracteres de 7 bits do código padrão americano para intercâmbio de

informações (ASCII, American Standard Code for Information Interchange) e que é
amplamente usado para representar letras e símbolos encontrados em um teclado
americano padrão. 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 Padronização Americano

(ANSI, American National Standards Institute) que é usado pelo Microsoft Windows e
que possibilita a representação de até 256 caracteres (0-255) através do teclado. Os
128 primeiros caracteres (0-127) correspondem a letras e símbolos de um teclado
americano padrão. Os outros 128 caracteres (128-255) representam caracteres
especiais, como letras de alfabetos internacionais, acentos, símbolos monetários e
frações.

TAGs

TAGs são os "comandos" do HTML. Um documento HTML é composto de TAGs que

farão com que o browser monte a página de acordo com a formatação definida pelos
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 começa sua área de influência, enquanto
o seu correspondente TAG de fechamento indica onde termina a área de influência.

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 minúsculas ou maiúscula, mas nunca podem haver
espaços em branco dentro de TAGs, exceto entre atributos e entre aspas.
Exemplo : <HTML>, <html>, <HtMl>, <Html>, ...

Pág. 11
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Estrutura Básica

A Estrutura Básica de um documento HTML é a seguinte:

Exemplo:
<html> > Início do Documento

<head> > Início do Cabeçalho do Documento

<title> > Início do Título do Documento
Aqui entra o Título do documento
</title> > Fim do Título do Documento
</head> > Fim do Cabeçalho do Documento

<body> > Início do Conteúdo do Documento

Aqui entra todo o conteúdo que será exposto pelo Browser...
</body> > Fim do Conteúdo do Documento

</html> > Fim do Documento

<html>

Vamos ver um pouco sobre os elementos básicos do HTML a seguir.

Início e Fim do Documento

Os TAGs <HTML> . . . </HTML> indicam respectivamente o início e fim do

documento.

Definições Lógicas sobre o Documento

Entre os TAGs <HEAD> . . . </HEAD> estão as definições lógicas sobre o

documento. Delimitam a seção de cabeçalho do documento. Trata-se da primeira
seção do documento.

Título da Página

Os TAGs <TITLE> . . . </TITLE> indicam o título do documento, que será

apresentado na barra superior do browser. Estas marcas devem constar da seção de
cabeçalho.

Conteúdo da Página

Pág. 12
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Entre os TAGs <BODY> . . . </BODY> estão o conteúdo da página que será

exposto pelo Browser, incluindo cabeçalho e rodapé.
Corpo do documento. Entre estas marcas estará contido maior parte so conteúdo a
ser apresentado, textos, imagens, etc.

TAG com Atributos

Exemplo:
<html> > Início do Documento

<head> > Início do Cabeçalho do Documento

<title> > Início do Título do Documento
Aqui entra o Título do documento
</title> > Fim do Título do Documento
</head> > Fim do Cabeçalho do Documento

<body> > Início do Conteúdo do Documento

<p align="center">Esta é a Home Page da XYZ Informática e este texto está

centralizado.</p> > O TAG <P> (parágrafo) está acompanhado do Atributo ALIGN
especificando o Valor “CENTER”, determinando que o texto do parágrafo deve ser
alinhado ao centro

</body> > Fim do Conteúdo do Documento

</html> > Fim do Documento

<html>

Pág. 13
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Estrutura da Página

O elemento <HTML> contém o elemento <HEAD> e <BODY>.

O TAG <TITLE> localizado na área de influência, é obrigatório, segundo a
especificação do HTML.

Exemplo:
<html>

<head>
<title>XYZ Informática</title>
</head>

<body>

Aqui entra todo o conteúdo que será exposto pelo Browser...

</body>
</html>

HTML <html>...</html>

Atributo: Não possui atributos

Explicação: Indica que o documento presente é um documento HTML. Deve
englobar todos os demais TAGs.
Exemplo:
<html>
...todos os demais TAGs, textos, etc.
</html>

HEAD <head>...</head>

Atributo: Não possui atributos

Explicação: Contém o cabeçalho do documento diversas informações lógicas, isto é,
que não fazem parte do corpo do documento e portanto não serão exibidas
diretamente.
Exemplo:
<head>
...diversos TAGs contendo informações lógicas sobre o documento...
</head>

Pág. 14
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

3.2.1. Elementos presentes em HEAD

TITLE <title>...</title>

Atributo: Não possui atributos

Explicação: Contém o título do documento. Muitos browsers utilizam o título como
forma de referenciar a página em uma lista de links úteis criadas pelo usuário
(conhecida como "Bookmarks" ou "Favorites"). Além disso, exibem o título como
nome da janela em que a página é visualizada. O Título é obrigatório. Não confunda
o título da página com o nome do arquivo gravado em disco.
Exemplo:
<title>
XYZ Informática
</title>

SCRIPT <script>...</script>

Explicação: É utilizado para inserção de código script (ex.: java Script, VB Script,
etc.) dentro do documento HTML.
Exemplo:
<script>
...código em alguma linguagem script reconhecida pelo browser...
</script>

META <meta>

Explicação: Define valores especiais. os valores são definidos como pares

"name/value" (nome/valor).

Atributos de META

Atributo: NAME
Explicação: 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="INFORMÁTICA, TREINAMENTO,
CONSULTORIA">

Atributo: CONTENT
Explicação: Especifica o valor associado a um "NAME".
Exemplo:
<meta name="keywords" content="INFORMÁTICA, TREINAMENTO,
CONSULTORIA">

É obrigatório a presença do atributo "NAME" ou do atributo "HTTP-EQUIV".

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Pág. 15
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

O TAG META é utilizado, também, para especificar palavras chaves que serão
catalogadas por Ferramentas de Busca.

BODY <body>...</body>

Explicação: Deve englobar toda a parte física do documento, isto é, o que deve ser
exibido pelo Browser.

Atributos de BODY

Atributo: BACKGROUND
Explicação: Define uma imagem que será utilizada como "fundo" da página. Caso a
imagem tenha um tamanho inferior ao da págima ela será repetida diversas vezes de
forma a cobrir o fundo do documento
Exemplo:
<body background="images/[Link]">
...diversos TAGs, textos etc...
</body>

Atributo: BGCOLOR
Explicação: Define a cor de fundo da página
Exemplo:
<body bgcolor="white">

Atributo: TEXT
Explicação: Define a cor do texto da página
Exemplo:
<body text="black">

Atributo: LINK
Explicação: Define a cor dos links ainda não visitados
Exemplo:
<body link="blue">

Atributo: VLINK
Explicação: Define a cor dos links já visitados nos últimos x dias onde x é um valor
definido pelo usuário em seu browser.
Exemplo:
<body vlink="purple">

Pág. 16
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Atributo: ALINK
Explicação: Define a cor dos links no instante em que são clicados pelo usuário.
Exemplo:
<body alink="red">

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

Atributo: BGPROPERTIES (Microsoft Internet Explorer)

Explicação: Deve ter o valor "fixed". Indica que o fundo da página é fixo, isto é,
não "rola" junto com o conteúdo da página.
Exemplo:
<body background="images/[Link]" bgproperties="fixed">

Atributo: LEFTMARGIN (Microsoft Internet Explorer)

Explicação: Especifica uma quantidade de espaço (em pixels) a ser deixada como
margem esquerda do documento.
Exemplo:
<body leftmargin="20">

Atributo: TOPMARGIN (Microsoft Internet Explorer)

Explicação: Especifica uma quantidade de espaço (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>XYZ Informática</title>

</head>

<body background="images/[Link]" link="blue" vlink="purple" alink="red"

bgproperties="fixed" bgcolor="white " text="black" topmargin="20"
leftmargin="20">

<p><a href="[Link] Eu sou um link!</a></p>

</body>

Pág. 17
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

META TAGs <meta>

As META TAGs direcionam suas páginas.

Utilizando as TAGs HTML padrão, você não é capaz de fornecer informações
históricas sobre o conteúdo Web, como quem criou uma página específica, ou
quando ela foi modificada pela última vez.

O HTML é projetado primariamente para apresentar informações, não para registrar

detalhes. A TAG <META> pode armazenar esta informação de mais alto nível nas
páginas Web.

Exemplo:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
O "CONTENT-TYPE" é apenas um de vários meta valores semelhantes. Aqui estão
mais alguns:

Atributo: HTTP-EQUIV="CONTENT-DISPOSITION"
Explicação: Especifica um manipulador de aplicativo para o arquivo.
Exemplo: http-equiv="Content-Disposition"

Atributo: HTTP-EQUIV="CONTENT-SCRIPT-TYPE"
Explicação: Define a linguagem de macro-padrão.
Exemplo: http-equiv="Content-Script-Type"

Atributo: HTTP-EQUIV="CONTENT-STYLE-TYPE"
Explicação: Define a linguagem de folha de estilo padrão.
Exemplo: http-equiv="Content-Style-Type"

Atributo: HTTP-EQUIV="CONTENT-LANGUAGE"
Explicação: Declara a linguagem natural para a página.
Exemplo: http-equiv="Content-Language"

Exemplo:
<html>

<head>
<meta http-equiv="Content-Language" content="pt-br">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>XYZ Informática</title>
</head>
<body>
<p>Esta é a Home Page XYZ Informática</p>
</body>
</html>

Pág. 18
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Através da META TAG “REFRESH”, de gerenciamento de conteúdo final, pode-se

redirecionar o Browser automaticamente de uma página para outra, mostrando uma
mensagem rápida em uma página, antes de entrar em uma outra página.

Atributo: HTTP-EQUIV="REFRESH"
Explicação: Gerenciamento de conteúdo final. Redireciona o Browser
automaticamente, de uma página para uma outra página.
Exemplo:
<meta http-equiv="refresh" content="2; URL=[Link]

Esta META TAG é muito útil para mudanças de endereço, levando o usuário
automaticamente para o novo endereço.
Para informar ao navegador que a partir da [Link] deve recuperar a [Link]
em cinco segundos, ficaria assim:
Exemplo:
<html>

<head>
<meta http-equiv="refresh" content="5; URL=[Link]">
<title>Título da Page 0 ([Link])</title>
</head>

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

A [Link] aparecerá ao acessar a sua Home Page com uma mensagem ou efeito,
e após 5 segundos, carregará a [Link].

Outras definições de META TAG incluem informações referentes à versão do HTML,

versão do navegador, ferramentas de criação Web e mecanismos de pesquisa.
A maioria destas fontes de META TAG adicionais utilizam o atributo NAME, que
designa informações suplementares que não têm um cabeçalho 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"
Explicação: Determina o nome do autor.
Exemplo:
<meta name="Autor" content="William Sheakspeare">

Pág. 19
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Atributo: NAME="COPYRIGHT"
Explicação: Define as informações de direitos autorais.
Exemplo:
<meta name="Copyright" content="1999-2000 XYZ Informática Ltda.">

Atributo: NAME="GENERATOR"
Explicação: Define a ferramenta de criação que gerou a página.
Exemplo:
<meta name="Generator" content="Microsoft FrontPage 4.0">

Atributo: NAME="REPLY-TO"
Explicação: Define o endereço de e-mail para contato.
Exemplo:
<meta name="Reply-To" content="XYZ@[Link]">
Alguns navegadores e mecanismos de pesquisa podem não ser capazes de
interpretar suas META TAGs e simplesmente as ignorarão. A meta informação é
sempre adicionada ao cabeçalho da página na área de influência entre as "marcas"
<HEAD> e </HEAD> juntamente com as "marcas" <TITLE> e </TITLE>.

Exemplo:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<title>XYZ Informática</title>
</head>

<body>

Aqui entra todo o conteúdo que será exposto pelo Browser...

</body>
</html>

Caracteres Especiais e Acentuação

As formas de representar caracteres especiais, através de uma notação específica,

são chamadas de Entidades. Existem “Entidades de Caracter” e “Entidades
Numéricas”.

Exemplo:
Pág. 20
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Caracter Entidade de Entidade Descrição

Caracter Numérica
ç &ccedil; &#231; c cedilha
(minúsculo)

HTML permite que caracteres especiais sejam representados por seqüências de

escape, indicadas por três partes: um “&” (e (ê) comercial) inicial, “um número ou
cadeia de caracteres correspondente ao caracter desejado”, e um “;” (ponto
e vírgula) final.

Exemplo:

Caracter Entidade de Entidade Descrição

Caracter Numérica
ã &atilde; &#227; a c/ til

Um caracter bastante útil é o espaço não ignorável, o “&nbsp;” (Non-breaking

space). Este caracter é importante quando desejamos forçar o browser a não ignorar
espaços em branco entre palavras.

Caracter Entidade de Entidade Descrição

Caracter Numérica
Non-breaking space &nbsp; Espaço não
ignorável

Exemplo:
<body>
<p>Veja como fica com &nbsp;&nbsp;&nbsp;&nbsp; espaço não ignorável!</p>
</body>

Visualização pelo Browser:

Veja como fica com espaço não ignorável!

Pág. 21
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Os caracteres ASCII “<” (menor que), “>” (maior que), e “&” (e (ê) comercial) tem
significados especiais para indicar um comando HTML. Mas por vezes queremos
exibir estes símbolos na tela e são usados dentro de documentos seguindo a
correspondência:

Caracter Entidade de Entidade Descrição

Caracter Numérica
& &amp; &#38; E(ê) comercial
< &lt; &#60; Menor que
> &gt; &#62; Maior que

Outras seqüências de escape suportam caracteres ISO Latin1. Temos aqui uma
tabela com as entidades mais utilizados em Português:

Tabela de Caracteres Especiais e Acentuação

Caracter Entidade de Entidade Descrição
Caracter Numérica
&#09; Tabulação
Horizontal
&nbsp; Espaço não
ignorável
" &quot; &#34; Aspas
À &Agrave; &#192; A c/ crase
Á &Aacute; &#193; A c/ acento agudo
 &Acirc; &#194; A c/ acento
circunflexo
à &Atilde; &#195; A c/ til
Ç &Ccedil; &#199; C cedilha
(maiúsculo)
É &Eacute; &#201; E c/ acento agudo
Ê &Ecirc; &#202; E c/ acento
circunflexo
Í &Iacute; &#205; I c/ acento agudo
Ó &Oacute; &#211; O c/ acento agudo
Ô &Ocirc; &#212; O c/ acento
circunflexo
Õ &Otilde; &#213; O c/ til
Ú &Uacute; &#218; U c/ acento agudo
Ü &Uuml; &#220; U c/ trema
à &agrave; &#224; a c/ crase
á &aacute; &#225; a c/ acento agudo
â &acirc; &#226; a c/ acento
circunflexo
ã &atilde; &#227; a c/ til
ç &ccedil; &#231; c cedilha
(minúsculo)
Pág. 22
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

é &eacute; &#233; e c/ acento agudo

ê &ecirc; &#234; e c/ acento
circunflexo
í &iacute; &#237; i c/ acento agudo
ñ &ntilde; &#241; n c/ til
ó &oacute; &#243; o c/ acento agudo
ô &ocirc; &#244; o c/ acento
circunflexo
ò &otilde; &#245; o c/ til
ú &uacute; &#250; u c/ acento agudo
ü &uuml; &#252; u c/ trema

Veja outras entidades numéricas:

Tabela de Caracteres Especiais e Acentuação

Caracter Entidade de Entidade Descrição
Caracter Numérica
# &#35; Tralha
$ &#36; Cifrão
% &#37; Percente

Por que usar estas formatações ?

Os browsers costumam também mostrar corretamente os caracteres acentuados

normalmente. Essa prática, embora facilite sobremaneira a digitação dos
documentos, não é recomendada "ainda", devido a um problema relativo a
transmissão desses caracteres.

Chama-se conjunto de caracteres uma representação digital de texto. Um caracter é

um símbolo cujas diversas representações devem significar a mesma coisa para uma
comunidade de pessoas. Na prática, porém, existem alguns conjuntos que associam
dois números distintos a um mesmo caracter.

Os Browser já permitem que se escolha a codificação adequada ao conjunto de

caracteres relativo aos documentos a serem recuperados. Mas para garantir a
interpretação apropriada de um documento, pode-se inserir uma indicação do
esquema de codificação, através do campo:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Na World Wide Web, os acentos da Língua Portuguesa chegam a travar os Browsers

de usuários em outros países, que usam um conjunto de caracteres diferentes do
ISO Latin 1 – apesar do ISO Latin 1 ser padrão na Web.

Pág. 23
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

6. Cores Através de Valores Hexadecimais

As cores são definidas através de um valor hexadecimal de 6 algarismos, ou através

de seus nomes.
Os nomes padronizados são: 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
versões do MS-Windows. Alguns Browsers implementam outros nomes não
padronizados.

Pág. 24
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Tabela de Cores Através de Valores Hexadecimais

Antiquewhite....... #FAEBD7 Goldenrod...................... #DAA520 Olive..................... #808000
Aqua.................. #00FFFF Gray.............................. #808080 Olivedrab.............. #6B8E23
Aquamarine........ #7FFFD4 Green............................ #008000 Orange.................. #FFA500
Azure................. #F0FFFF Greenyellow................... #ADFF2F Orangered............. #FF4500
Beige.................. #F5F5DC Honeydew...................... #F0FFF0 Orchid................... #DA70D6
Bisque................ #FFE4C4 Hotpink.......................... #FF69B4 Palegoldenrod....... #EEE8AA
Black.................. #000000 Indianred....................... #CD5C5C Palegreen............. #98FB98
Blanchedalmond #FFEBCD Indigo............................ #4B0082 Paleturquoise........ #AFEEEE
Blue................... #0000FF Ivory.............................. #FFFFF0 Palevioletred......... #DB7093
Blueviolet........... #8A2BE2 Khaki............................. #F0E68C Papayawhip.......... #FFEFD5
Brown................. #A52A2A Lavander....................... #E6E6FA Peachpuff............. #FFDAB9
Burlywood.......... #DEB887 Lavanderblush............... #FFF0F5 Peru...................... #CD853F
Cadetblue........... #5F9EA0 Lawngreen..................... #7CFC00 Pink...................... #FFC0CB
Chatreuse........... #7FFF00 Lemonchiffon................. #FFFACD Plum..................... #DDA0DD
Chocolate........... #D2691E Lightblue........................ #ADD8E6 Powderblue........... #B0E0E6
Coral.................. #FF7F50 Lightcoral....................... #F08080 Purple................... #800080
Carnflowerblue... #6495ED Lightcyan....................... #E0FFFF Red....................... #FF0000
Cornsilk.............. #FFF8DC Lightgoldenrodyelloow... #FAFAD2 Rsybrown.............. #BC8F8F
Crimson............. #DC143C Lightgreen...................... #90EE90 Royalblue.............. #4169E1
Cyan.................. #00FFFF Lightgray........................ #D3D3D3 Saddlebrown......... #8B4513
Darkblue............. #00008B Lightpink........................ #FFB6C1 Salmon................. #FA8072
Darkcyan............ #008B8B Lightsalmon................... #FFA07A Sandybrown.......... #F4A460
Darkgoldenrod.... #B8860B Lightseagreen................ #20B2AA Seagreen.............. #2E8B57
Darkgray............ #A9A9A9 Lightskyblue................... #87CEFA Seashell................ #FFF5EE
Darkgreen.......... #006400 Lightslategray................ #778899 Sienna.................. #A0522D
Darkkhaki........... #BDB76B Lightsteelblue................ #B0C4DE Silver.................... #C0C0C0
Darkmagenta...... #8B008B Lightyellow..................... #3FFFFE0 Skyblue................. #87CEEB
Darkolivegreen... #556B2F Lime.............................. #00FF00 Slateblue............... #6A5ACD
Darkorange........ #FF8C00 Limegreen..................... #32CD32 Slategray.............. #708090
Darkorchid.......... #9932CC Linen............................. #FAF0E6 Snow..................... #FFFAFA
Darkred.............. #8B0000 Magenta........................ #FF00FF Springgreen.......... #00FF7F
Darksalmon........ #E9967A Maroon.......................... #800000 Steelblue............... #4682B4
Darkseagreen..... #8FBC8F Mediumaquamarine....... #66CDAA Tan....................... #D2B48C
Darkslateblue..... #483D8B Mediumblue................... #0000CD Teal...................... #008080
Darkslategray..... #2F4F4F Mediumorchid................ #BA55D3 Thistle................... #D8BFD8
Darkturquoise..... #00CED1 Mediumpurple................ #9370DB Tomato................. #FF6347
Darkviolet........... #9400D3 Mediumseagreen........... #3CB371 Turquoise.............. #40E0D0
Deeppink............ #FF1493 Mediumslateblue............ #7B68EE Violet.................... #EE82EE
Deepskyblue...... #00BFFF Mediumspringreen......... #00FA9A Wheat................... #F5DEB3
Dimgray............. #696969 Mediumturquoise........... #48D1CC White.................... #FFFFFF

Pág. 25
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Comentários

! <!-- ... -->

Atributo: Não possui atributos

Explicação: Nada do que for escrito dentro deste TAG será interpretado pelo
browser.
Comentários são extremamentes úteis para facilitar a manutenção das páginas, que
muitas vezes poderá ser feita por uma pessoa diferente daquela que a escreveu pela
primeira vez. Através dos comentários, se explica o que se deseja com cada
comando.
Exemplo:
<!-- Comentário -->

Exemplo:
<!-- =========================================== -->

Exemplo:
<html>

<head>
<title>XYZ Informática</title>
</head>

<body>
<!--------------------- Link para o Site da XYZ Informática ------------------->
<p><a href="[Link] Eu sou um link para o site da XYZ
Informática!</a></p>
</body>
</html>

Visualização pelo Browser:

Oi! Eu sou um link para o site da XYZ Informática!

Controles de Formatação

Títulos / Subtítulos

Hn <hn>...</hn>

Explicação: Indica que o texto influenciado é uma "HEADER" (cabeçalho). Os

cabeçalhos têm seis níveis de importância, sendo o nível "1" o mais importante e o
nível "6" o menos.
Exemplo:
<h1>Este é o cabeçalho de nível 1</h1>
Pág. 26
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

<h2>Este é o cabeçalho de nível 2</h2>

<h3>Este é o cabeçalho de nível 3</h3>
<h4>Este é o cabeçalho de nível 4</h4>
<h5>Este é o cabeçalho de nível 5</h5>
<h6>Este é o cabeçalho de nível 6</h6>

Nota:
Veja os níveis de cabeçalho 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).

Visualização pelo Browser:

Este é o cabeçalho de nível 1
Este é o cabeçalho de nível 2
Este é o cabeçalho de nível 3
Este é o cabeçalho de nível 4
Este é o cabeçalho de nível 5
Este é o cabeçalho de nível 6

Atributos de Hn

Atributo: ALIGN
Explicação: Indica se o cabeçalho será alinhado a esquerda (padrão), 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 Três</h3>

Controles "Físicos"de Formatação de Texto

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

Atributo: Não possui atributos

Explicação: Indica que o texto deve ser apresentado em itálico.
Exemplo: <i>Este texto está em itálico</i>
Exemplo: <em>Este texto também está em itálico</em>
Visualização pelo Browser: Este texto está em itálico

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

Atributo: Não possui atributos

Explicação: Indica que o texto deve ser apresentado em negrito.
Exemplo: <b>Este texto está em negrito</b>
Exemplo: <strong>Este texto também está em negrito</strong>
Visualização pelo Browser: Este texto está em negrito

U <u>...</u>
Pág. 27
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Atributo: Não possui atributos

Explicação: Indica que o texto deve ser apresentado sublinhado.
Exemplo: <u>Este texto está sublinhado</u>
Visualização pelo Browser: Este texto está sublinhado

STRIKE <strike>...</strike>

Atributo: Não possui atributos

Explicação: Indica que o texto deve ser apresentado com um traço cortando-o.
Exemplo: <strike>Este texto está strike !</strike>
Visualização pelo Browser: Este texto está strike !

SUB _...

Atributo: Não possui atributos

Explicação: Indica que o texto deve ser apresentado em subscrito.
Exemplo: _{Este texto está subscrito}
Visualização pelo Browser: Este texto está subscrito

SUP ^...

Atributo: Não possui atributos

Explicação: Indica que o texto deve ser apresentado em sobrescrito.
Exemplo: ^{Este texto está subrescrito}
Visualização pelo Browser: Este texto está subrescrito

Controles de Fontes

FONT <font>...</font>

Explicação: Existem 7 tamanhos de fonte em HTML, numeradas de 1 a 7. O

tamanho padrão é 3.
As cores são definidas através de um valor hexadecimal de 6 algarismos, ou através
de seus nomes.
Caso o usuário não possua nenhuma das fontes listadas, será usada uma fonte
padrão. Usualmente a fonte padrão é a Times New Romam.
Exemplo:
<font face="Times New Roman" size="5" color="#000000">Texto</font>

Atributos de FONT

Pág. 28
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Atributo: SIZE
Explicação: Indica qual o tamanho de fonte que deve ser usado dentro de sua área
de influência.
Exemplo:
<font size="5">Texto</font>

Atributo: COLOR
Explicação: Indica qual a cor da fonte dentro de sua área de influência
Exemplo:
<font color="#000000">Texto</font>
<font color="black">Texto</font>

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

BASEFONT <basefont>

Atributo: SIZE
Explicação: Determina o tamanho base de fonte para uma página. O TAG deve ser
usado no início do documento, logo após <body>.
Exemplo:
<body>
<basefont size="3">

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

8.4. Formatação de Parágrafos

P <p>...</p>

Explicação: Indica que o texto influenciado é um parágrafo, e possui um

alinhamento próprio. Os browsers, habitualmente, deixam um espaço vertical em
branco de cerca de "uma linha" antes de cada parágrafo.
Exemplo:
<p>Esta é a Home Page da XYZ Informática. E este é um exemplo de
parágrafo.</p>
Pág. 29
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Atributos de P

Atributo: ALIGN
Explicação: Indica se o parágrafo será alinhado a esquerda (padrão), centralizado,
a direita ou justificado usando-se, respectivamente, as palvras "LEFT", "CENTER",
"RIGHT" e "JUSTIFY".
Exemplo:
<p align="center">Esta é a Home Page da XYZ Informática. E este é um exemplo de
parágrafo centralizado.</p>

Quebra de Linha

BR <br>

Atributo: Não possui atributos

Explicação: Passa para a próxima linha.
Exemplo:
<p>Este texto ficará
na mesma linha.<br>
E este em outra linha.</p>
Visualização pelo Browser:
Este texto ficará na mesma linha.
E este em outra linha.

O TAG Blockquote <blockquote>...</blockquote>

Atributo: Não possui atributos

Explicação: Faz a margem começar mais dentro da página. O efeito deste TAG
pode ser acumulado, obtendo assim margens maiores.
Exemplo:
<blockquote>Esta é a Home Page da XYZ Informática. E este é um exemplo de
margem visualizada pelo Browser.</blockquote>
Visualização pelo Browser:
Esta é a Home Page da XYZ Informática. E este é um exemplo de margem
visualizada pelo Browser.

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

Explicação: Indica que o texto influenciado é uma divisão, e possui portanto um

alinhamento próprio.

Atributos de DIV
Pág. 30
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Atributo: ALIGN
Explicação: Indica se a divisão será alinhado a esquerda (padrão), 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 espaço vertical em branco.
Exemplo:
<div align="right">Esta é a Home Page da XYZ Informática. E esta é a minha
divisão.</div>

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

Atributo: Não possui atributos

Explicação: Usualmente o browser ignora os espaços em branco e as quebras de
linha existentes no documento fonte, formatando o texto de acordo com o tamanho
de sua janela. Com a utilização deste TAG os espaços e as quebras de linha são
honrados. O browser exibe o conteúdo de <pre> usando uma fonte diferente da
usual.
Exemplo:
<pre>
Esta é a Home Page da XYZ Informática.
Aqui nos veremos:Treinamento
Consultoria
Representações
Soluções Web
</pre>

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

Atributo: Não possui atributos

Explicação: Centraliza o texto influenciado. o TAG <center> foi criado quando não
havia outras formas de se centralizar os elementos na tela. Hoje faz parte da
definição do HTML para que seja mantida a compatibilidade com páginas escritas no
passado.
Exemplo:
<center>
Esta é a Home Page da XYZ Informática. Este texto será centralizado.
</center>

TAG NOBR <nobr>...</nobr>

Explicação: Impede que o texto em sua área de influência seja "quebrado", isto é,
dividido em mais de uma linha. Deve-se usar este TAG de forma cuidadosa.

Pág. 31
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Normalmente o usuário não deseja ser obrigado a empregar a "scroll bar" para ler o
conteúdo de uma página.
Exemplo:
<nobr>Este texto ficará
na mesma linha
ao visualiza-lo no browser.<nobr>
Visualização pelo Browser:
Este texto ficará na mesma linha ao visualiza-lo no browser.

Listas

Listas Ordenadas

OL <ol>...</ol>

Explicação: Indica o início e o final de uma lista ordenda (numerada).

Exemplo:
<ol>
<li> Treinamento </li>
<li> Consultoria </li>
<li> Desenvolvimento </li>
<li> Manutenção </li>
</ol>
Visualização pelo Browser:
1. Treinamento
2. Consultoria
3. Desenvolvimento
4. Manutenção

Atributos de OL

Atributo: START
Explicação: Especifica o número do primeiro elemento da lista.
Exemplo:
<ol start="10">
<li> Treinamento </li>
<li> Consultoria </li>
<li> Desenvolvimento </li>
<li> Manutenção </li>
</ol>

Visualização pelo Browser:

10. Treinamento
11. Consultoria
12. Desenvolvimento
13. Manutenção
Pág. 32
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Atributo: TYPE
Explicação: Define o tipo de numeração 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> Treinamento </li>
<li> Consultoria </li>
<li> Desenvolvimento </li>
<li> Manutenção </li>
</ol>

Visualização pelo Browser:

A. Treinamento
B. Consultoria
C. Desenvolvimento
D. Manutenção

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

LI <li>

Explicação: Demarca os elementos de listas ordenadas e não ordenadas.

Exemplo:
<ol>
<li> Treinamento </li>
<li> Consultoria </li>
<li> Desenvolvimento </li>
<li> Manutenção </li>
</ol>
Visualização pelo Browser:
1. Treinamento
2. Consultoria
3. Desenvolvimento
4. Manutenção

Pág. 33
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Atributos de LI

Atributo: TYPE
Explicação: Deve ser usado somente em listas não numeradas. Indica qual o
símbolo a ser usado para demarcar o elemento.
Exemplo:
<ul type="square">
<li> Treinamento </li>
<li type="disc"> Consultoria </li>
<li> Desenvolvimento </li>
<li> Manutenção </li>
</ul>

Visualização pelo Browser:

■ Treinamento
• Consultoria
■ Desenvolvimento
■ Manutenção

Atributo: VALUE
Explicação: Deve ser usado somente em listas numeradas. Altera a sequência da
numeração.
Exemplo:

<ol>
<li> Treinamento </li>
<li> Consultoria </li>
<li value="15"> Desenvolvimento </li>
<li> Manutenção </li>
</ol>

Visualização pelo Browser:

1. Treinamento
2. Consultoria
15. Desenvolvimento
16. Manutenção

Nota:
Este TAG deve estar presente somente na área de influência dos TAGs
<OL> (Listas Ordenadas) ou <UL> (Listas Não Ordenadas).
O texto presente em cada item da lista pode ser formatado normalmente. No
entanto, não são permitidos "headers" (H1, H2, H3 etc.).

Pág. 34
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Listas Não Ordenadas

UL <ul>...</ul>

Explicação: Indica o início e o final de uma lista não numerada

Exemplo:
<ul>
<li> Treinamento </li>
<li> Consultoria </li>
<li> Desenvolvimento </li>
<li> Manutenção </li>
</ul>

Visualização pelo Browser:

• Treinamento
• Consultoria
• Desenvolvimento
• Manutenção

Atributo de UL

Atributo: TYPE
Explicação: Indica qual o símbolo deve ser usado para demarcar cada elemento da
lista. Pode ser os valores "disc" (•), "circle" (°) ou "square"(n).
Exemplo:
<ul type="circle">
<li> Treinamento </li>
<li> Consultoria </li>
<li> Desenvolvimento </li>
<li> Manutenção </li>
</ul>
Visualização pelo Browser:
° Treinamento
° Consultoria
° Desenvolvimento
° Manutenção

Pág. 35
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Listas de Definição

DL <dl>...</dl>

Atributo: Não possui atributos

Explicação: Demarca os elementos de listas ordenadas e não ordenadas.
Exemplo:

<dl>
<dt> Treinamento </dt>
<dd> É um departamento da XYZ Informática. </dd>
<dt> Consultoria </dt>
<dd> É um outro departamento! </dd>
</dl>

Visualização pelo Browser:

Treinamento
É um departamento da XYZ Informática.
Consultoria
É um outro departamento!

Nota:
São muito úteis para estruturas do tipo "dicionário", onde um termo é citado e então
explicado. Na Web é muito utilizada para listas de URLs e seus respectivos
comentários.

DT <dt>

Atributo: Não possui atributos

Explicação: Representa o termo definido, a ser explicado em <DD>.
Exemplo:
<dl>
<dt> Treinamento </dt>
<dd> É um departamento da XYZ Informática. </dd>
<dt> Consultoria </dt>
<dd> É um outro departamento! </dd>
</dl>

Visualização pelo Browser:

Treinamento
É um departamento da XYZ Informática.
Consultoria
É um outro departamento!

Pág. 36
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Nota:
Não devem conter TAGs referentes a: HEADER, Parágrafo, Listas, Texto Pre-
Formatado, Divisão, CENTER, BLOCKQUOTE, Formulário, ISINDEX, Linha Horizontal
ou Tabela.

DD <dd>

Atributo: Não possui atributos

Explicação: Representa a definição do termo presente em <DT>. Não deve conter
HEADERs.
Exemplo:
<dl>
<dt> Treinamento </dt>
<dd> É um departamento da XYZ Informática. </dd>
<dt> Consultoria </dt>
<dd> É um outro departamento! </dd>
</dl>
Visualização pelo Browser:
Treinamento
É um departamento da XYZ Informática.
Consultoria
É um outro departamento!

Links

Os pontos que ligam os hipertextos são chamados de hyperlinks, links ou

âncoras de hipertexto.

O TAG que indica a região a ser tratada como um hyperlink é o par <A> e </A> -
"A" (anchor). Dentro desse TAG, na forma de atributo, é colocada a referência ao
arquivo ligado. A referência indica a URL do documento. Quando o usuário clicar
sobre o trecho realçado 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

é possível alterar isso através dos parâmetros opcionais do elemento <BODY>.

A <a>...</a>

Explicação: Indica a região a ser tratada como hyperlink

Exemplo:
<a href="[Link] Informática</a>
Visualização pelo Browser:
XYZ Informática

Pág. 37
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Atributos de A

Atributo: HREF
Explicação: Define que sua área de influência é um link.
Exemplo:
<p> Clique em <a href="[Link] para
acessar a página dos Descritivos dos Cursos.</p>
Visualização pelo Browser:
Clique em Cursos para acessar a página dos Descritivos dos Cursos.

Existem quatro formas de se especificar um link:

Links para dentro da própria página

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>

Para outras páginas de um mesmo Site

Exemplo:
<a href="[Link]">Link para o Nome</a>

Nesse caso, assumiu-se que o arquivo [Link] estava localizado no mesmo

diretório da página que referência. Caso o arquivo [Link] esteja em outro
diretório, pode-se utilizar a "URL relativa" à página de destino.

Exemplo:
<a href="/treinamento/cursos/pá[Link]">Link para a Página</a>

Pode-se, ainda, referenciar uma página utilizando-se a navegação em diretórios,

semelhante ao que se faz no DOS, lançando mão do operador "..".

Se na página [Link] existir um link

que aponta para o endereço:
[Link] este pode ser
representado da seguinte maneira:

Exemplo:
<a href="../consultoria/[Link]">Link para o Desenvolvimento</a>

Pág. 38
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Links para outros Sites

Deve-se usar a URL completa da página destino.

Exemplo:
<a href="[Link] para outro Site</a>

Link especial: "mailto"

Existe um tipo de link chamado de "[Link] Se, quando o link for definido, o
protocolo utilizado for "[Link] ao invés de "[Link] o link abrirá uma janela
especial para que se possa enviar um e-mail (correio eletrônico) para o endereço
específico.

Exemplo:
Mande um<a href="[Link] a XYZ.
Visualização pelo Browser:
Mande um e-mail para a XYZ.

Imagens

IMG <img>

Explicação: Este TAG exibe uma imagem na página.

Atributos de IMG

Atributo: SRC
Explicação: Obrigatório, indica a URL da imagem a ser exibida. Podem ser usadas
URL absoluto ([Link] ou URL relativo
(/images/[Link])
Exemplo:
<img src="/images/[Link]">

Atributo: ALT
Explicação: Indica um texto asociado à imagem. Quando a imagem não puder ser
exibida, o texto é exibido em seu lugar. Este texto também é exibido quando o
cursor fica parado sobre a imagem.

Exemplo:
<img src="/images/[Link]" alt="Logotipo da XYZ Informática">

Pág. 39
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Atributo: ALIGN
Explicação: Determina o alinhamento da imagem em relação ao texto existente na
mesma linha. Os valores válidos são "TOP", "MIDDLE", "BOTTOM","LEFT" e "RIGHT".
Exemplo:
<img src="/images/[Link]" align="top">

Atributo: WIDTH
Explicação: Determina a largura, em pixels, da imagem.
Exemplo:
<img src="/images/[Link]" width="600">

Atributo: HEIGHT
Explicação: Determina a altura, em pixels, da imagem.
Exemplo:
<img src="/images/[Link]" height="60">

Atributo: BORDER
Explicação: Determina a largura, em pixels, da imagem.
Exemplo:
<img src="/images/[Link]" border="2">

Atributo: HSPACE
Explicação: Determina a quantidade de espaço deixado em branco aos lados da
imagem, de forma que ela não fique demasiadamente próxima dos outros elementos
da página.
Exemplo:
<img src="/images/[Link]" hspace="10">

Atributo: VSPACE
Explicação: Determina a quantidade de espaço deixado em branco acima e abaixo
da imagem.
Exemplo:
<img src="/images/[Link]" vspace="10">

Atributo: USEMAP
Explicação: Indica que a imagem é um mapa sensitivo interpretado totalmente.
Exemplo:
<img src="/images/[Link]" usemap="#mapalocal">

Atributo: DYNSRC (Microsoft Internet Explorer)

Explicação: Determina qual o vídeo ou ambiente VRML será exibido. Pode ser
usado em conjunto com SRC. Dessa forma, quando o usuário não possuir suporte a
vídeo, verá uma imagem estática em seu lugar.
Os vídeos devem estar em formato AVI.
Exemplo:
Pág. 40
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

<img src="[Link]" dynsrc="ví[Link]">

Atributo: LOOP (Microsoft Internet Explorer)

Explicação: Indica quantas vezes o videoclip será exibido. Se o valor for "-1" ou
"infinite" ele será exibido continuamente.
<img src="[Link]" dynsrc="ví[Link]" loop="5">

Atributo: START (Microsoft Internet Explorer)

Explicação: Pode assumir os valores "fileopen" (o videoclipe será exibido assim que
a página for aberta, o que é o default) ou "mouseover" (o videoclip será exibido
quando o cursor toca-lo).
<img src="[Link]" dynsrc="ví[Link]" loop="5" start="mouseover">

Alguns Browsers, como o Internet Explorer 3 e 4 e o Netscape Comunicator 4, expõe

o texto presente no atributo ALT quando o cursor toca a imagem. O texto è exibido
em "balões de texto" ou similares.

Os atributos WIDTH e HEIGHT são extremamente importantes. Os browsers, tendo

informações sobre a altura e a largura das imagens, não precisam esperar que elas
cheguem por inteiro para continuar a exibição do resto do documento. Além 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 não confundir o
usuário, pois este poderá não perceber que a imagem é também um link.

Formatos de Imagens

GIF (Graphics Interchange Format) e JPEG (Joint Photographic Experts Group) são os
dois formatos gráficos padrões usados na Internet, cada formato tem suas vantagens
e desvantagens, como analisado a seguir.
Os dois formatos de imagens são bastante utilizados, mas possuem características
diferentes.

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 máximo de 256 cores.

• Armazena imagens com grandes áreas planas (da mesma cor) de forma bastante
eficiente.
• Não possui níveis de compreenssão, apesar de já ser naturalmente compactado
(GIFs tem uma compressão padrão).
Pág. 41
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

• Podem ser entrelaçadas. Uma imagem entrelaçada (interlaced) pode ser vista à
medida que vai sendo carregada (melhorando a definição aos poucos).
• Pode-se definir uma das cores como sendo "transparente", permitindo que se
veja o que está por trás. O recurso de transparência é muito interessante, pois
permite criar a sensação de que as imagens não são todas retangulares.
• Permite a criação de animações (GIFs Animados). O Princípio do GIF Animado é
o mesmo de um filme que vemos no cinema, ou seja uma sequência de imagens
transmitida rapidamente, uma animação propriamente dita. Os anúncios
(chamados de banners) que se vê na Web, na verdade são, GIFs Animados.

Usando o JPEG (Joint Photographic Experts Group)

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 milhões de cores.

• Armazena imagens complexas de forma eficiente.
• Tem uma compressão variável. Porém, como nem tudo é perfeito, quanto mais
você comprime, maior será a perda da qualidade. A compressão padrão é em
torno de 33 (numa escala de 1 a 100), mas a ideal, só testando mesmo. Quanto
maior o número, pior fica a qualidade.
• Não possui o recurso de transparência, portanto sempre aparecem retangulares
na tela.
• O entrelaçamento pode ser conseguido utilizando o formato Progressive Rendered
JPEG, uma nova versão criada para possibilitar um carregamento igual ao de um
GIF entrelaçado. Os Browsers de última geração já entendem este formato numa
boa, mas não os antigos.
• Não permite a criação de animações.

Sobre o PNG (Portable Networ Graphics)

Um formato novo, ainda não muito comum na Internet, é o PNG (Portable

Network Graphics), desenvolvido por um grupo formado especialmente com este
fim. Ele é uma evolução das GIFs que conhecemos, mantendo diversas de suas
características e incorporando novas com pouco custo de implementacão aos
desenvolvedores. Suporta cores TRUECOLOR (48 bits por pixel), interlaçamento,
transparência, etc. Foi desenvolvido para, no futuro, substituir o GIF e o JPEG.

Nota:
PNG é pronunciado "ping".

Imagens no Browser

Uma imagem GIF pode conter até 256 cores. Para isso, são necessários 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
Pág. 42
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

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 possíveis no JPEG. Neste
formato, o tamanho do arquivo depende da qualidade que você pode optar para a
sua imagem. Além disso, alguns softwares permitem que você configure a resolução
da imagem . A maioria das imagens é salva com a resolução de 300 dpi (pontos por
polegada). Porém como a resolução da maioria dos monitores (padrão SVGA) de
computador é de 96 dpi, pode-se sempre diminuir para este valor.

Experimente fazer alguns testes com os dois formatos, variando o número de cores,
compressão e resolução.

Ferramentas Gráficas e GIFs Animados

Paint Shop Pro 6.0 / Animation Shop [Link]

Photoshop 5.5 / ImageReady 2.0 [Link]

Lista com diversas opções no Site da Tucows, na seção Image Animators

Image Animators [Link]

Mapas Sensitivos

Através do conceito de Mapa Sensitivo (Clickable Map), podem ser criados diversos
links dentro de uma mesma imagem. O usuário será encaminhado para uma URL
determinada pelo local da imagem selecionada.

AREA <area>

Explicação: Define as áreas da imagem que estão relacionadas a links, e que links
são esses. Dentro da área de influência de <MAP>, podemos ter um número
qualquer de tags <AREA>.
Exemplo:
<area coords="0,0,29,29" href="[Link]">

Tabelas

As tabelas foram uma grande conquista para os autores de documentos para a Web.
Com elas é possível, por exemplo, termos estas páginas do tutorial organizadas em
colunas, sendo uma delas voltada exclusivamente aos links de navegação e
observações. Tabelas implementam um conceito importante de design, as "grades",
segundo as quais organizamos textos e ilustrações de maneira organizada.
Pág. 43
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Como já foi possível perceber, as tabelas podem conter textos, listas, parágrafos,
imagens, diversas outras formatações - inclusive outras tabelas. Novas versões de
HTML e de navegadores populares vêm acrescentando diversos atributos às tabelas,
e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis.

A formatação de tabelas faz parte da versão 3.0 da linguagem HTML. Manipular

tabelas em HTML dá trabalho e necessita de calma.

A tag para criação de uma tabela é <TABLE>, e dentro dela você coloca atributos
importantes para a criação correta da sua tabela. Não esqueça de fazer o fechamento
da tag com </TABLE>.

- Atributos de Tabela

- <TABLE BORDER>
O elemento delimita uma tabela e a espessura de sua borda:

<TABLE BORDER=valor da espessura> ... </TABLE>

- WIDTH e HEIGHT
Com estes atributos, você pode definir o tamanho que a tabela vai ocupar na tela.
WIDTH (largura), HEIGHT (altura). Eles podem ser em pixels ou em porcentagem.
Basicamente o HEIGHT não é usado , mas o valor de largura é muito útil. Veja como
usar:

<TABLE BORDER=valor da borda WIDTH="valor da largura">

Um exemplo de tabela com valor de largura que ocupe 75% da tela

(WIDTH="75%"):

Coluna 1 Coluna 2
linha1, coluna 1 linha 1, coluna 2
linha 2, coluna 1 linha 2, coluna 2

- Dentro dessa formatação, inserimos as linhas e elementos da tabela:

- <TH> ... </TH>

Define um cabeçalho para a tabela

- <TR> ... </TR>

Delimita uma linha

- <TD> ... </TD>

Delimita um elemento da tabela

Pág. 44
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Veja como fica a tag para a criação de uma tabela com 2 linhas e 2 colunas:

<TABLE BORDER=2>
<TH> Coluna 1</TH><TH> Coluna 2 </TH>
<TR><TD> linha1, coluna 1</td><td> linha 1, coluna 2 </TD></TR>
<TR><TD> linha 2, coluna 1</TD><TD>linha 2, coluna 2 </TD></TR>
</TABLE>

Resultado:

Coluna 1 Coluna 2
linha1, coluna 1 linha 1, coluna 2
linha 2, coluna 1 linha 2, coluna 2

Agora veja a mesma tabela sem bordas (border=0):

Coluna 1 Coluna 2
linha1, coluna 1 linha 1, coluna 2
linha 2, coluna 1 linha 2, coluna 2

- Atributos COLSPAN e ROWSPAN

É possível dividir colunas e linhas, através dos atributos COLSPAN (para

colunas) e ROWSPAN (para linhas):

<TABLE BORDER=2>
<TH COLSPAN=2>Colunas 1 e 2</TH>
<TR>
<TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR>
<TR><TD>linha 2, coluna 1</T><TD>linha 2, coluna 2</TD></TR>
<TH ROWSPAN=3>3 linhas juntas</TH>
<TD>uma linha</TD>
<TR><TD>duas linhas</TD></TR>
<TR><TD>três linhas</TD></TR>
</TABLE>

Resultado:

Colunas 1 e 2
linha1, coluna 1 linha 1, coluna 2
linha 2, coluna 1 linha 2, coluna 2
3 linhas juntas uma linha
duas linhas

Pág. 45
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

três linhas

Neste exemplo, temos que o cabecalho Colunas 1 e 2 compreende duas colunas

(colspan=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (rowspan=3).

- Cores de fundo

Quando você cria uma tabela, ela tem o fundo transparente e, portanto, vai sempre
assumir a cor do fundo ou a imagem de fundo da página. Mas é possível que você
defina uma cor de fundo para cada célula, linha e coluna da sua tabela. Para isso
você deve incluir o atributo "BGCOLOR", veja como fica:

<table border=2>
<th bgcolor="#FF0000">Coluna 1</th>
<th bgcolor="#009900">Coluna 2</th>
<tr>
<td>linha1, coluna 1</td>
<td> linha 1, coluna 2</td>
</tr>
<tr>
<td>linha 2, coluna 1</td>
<td>linha 2, coluna 2</td>
</tr>
</table>

Resultado:

Coluna 1 Coluna 2
linha1, coluna 1 linha 1, coluna 2
linha 2, coluna 1 linha 2, coluna 2

Você pode definir a cor de fundo de qualquer linha ou coluna que quiser, bastando
apenas incluir o atributo junto da tag de linha ou coluna. Da mesma forma você pode
incluir tags de fonte e imagem para colocar dentro de cada célula da tabela.

- Imagem de fundo

Você também pode colocar em uma tabela uma imagem de fundo, como um papel de
parede somente para a tabela. Para isso, você só precisa colocar o atributo
"BACKGROUND". Veja como fazer:

<table border=2 background="nome da imagem que vai aparecer">

<th><font color="#000000">Coluna 1</font></th>
<th><font color="#000000">Coluna 2</font></th>
<tr>
Pág. 46
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

<td><font color="#000000">linha1, coluna 1</font></td>

<td><font color="#000000"> linha 1, coluna 2</font></td>
</tr>
<tr>
<td><font color="#000000">linha 2, coluna 1</font></td>
<td><font color="#000000">linha 2, coluna 2</font></td>
</tr>
</table>

Resultado:

Coluna 1 Coluna 2
linha1, coluna 1 linha 1, coluna 2
linha 2, coluna 1 linha 2, coluna 2

Assim como quando colocamos uma imagem de fundo em uma página, a imagem de
fundo em uma tabela será "repetida" até preencher todo o espaço da tabela.

Onde houver uma cor de fundo definida para a célula, coluna ou linha a imagem de
fundo não vai aparecer. Veja:

Coluna 1 Coluna 2
linha1, coluna 1 linha 1, coluna 2
linha 2, coluna 1 linha 2, coluna 2

TR <tr>...</tr>

Explicação: Indica o início 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

Pág. 47
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Atributo: BGCOLOR
Explicação: Define a cor de fundo de uma linha da tabela.
Exemplo:
<table>
<tr bgcolor="red">
<td>Texto A</td>
<td>Texto B</td>
</tr>
</table>

TD <td>...</td>

Explicação: Indica um elemento (célula) da tabela, vindo do inglês "Table Data". Os

elementos contém 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
Explicação: Define se o conteúdo da célula 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
Explicação: Define se o conteúdo da célula estará alinhado com seu topo ("TOP"),
centralizado ("MIDDLE") ou com sua base ("BOTTOM").
Se omitido o alinhamento fica ao meio.

Exemplo:
<table>
Pág. 48
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

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

Atributo: WIDTH
Explicação: Define a largura da célula. 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
Explicação: Indica quantas "células de largura" (colunas) a respectiva célula deve
ocupar.
Exemplo:
<table>
<tr>
<td colspan="2">Texto A</td>
</tr>
<tr>
<td>Texto B</td>
</tr>
</table>

Atributo: ROWSPAN
Explicação: Indica quantas "células de altura" (linhas) a respectiva célula deve
ocupar.

Exemplo:
<table>
<tr>
<td rowspan="2">Texto A</td>
<td>Texto B</td>
</tr>
<tr>
<td>Texto C</td>
</tr>
</table>

Atributo: BACKGROUND
Pág. 49
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Explicação: Define uma imagem como fundo de uma célula.

Exemplo:
<table>
<tr>
<td background="[Link] A</td>
<td>Texto B</td>
<td>Texto C</td>
</tr>
</table>

Atributo: BGCOLOR
Explicação: Define a cor de fundo de uma determinada célula.
Exemplo:
<table>
<tr>
<td bgcolor="yellow">Texto A</td>
<td>Texto B</td>
<td>Texto C</td>
</tr>
</table>

Formulários

Formulários são de grande utilidade para a Web, pois permitem a interatividade entre
o usuário, a pessoa que visualiza as páginas e o Servidor Web. Assim, através da
Web, se pode ler e gravar informações em Banco de Dados, gerando enormes
possibilidades de uso para a Internet, como por exemplo a de um serviço de venda.
Formulários também podem ser gerados para a navegação entre páginas e Sites na
Web.

Nota:
GET Indica como os dados serão passados pelo script.
POST Envia os dados para entrada padrão do sistema operacional

FORM <form>...</form>

Explicação: Indica a existência de um formulário, isto é, um local da página

utilizado pelo usuário para enviar informações para um local predeterminado
(usualmente um Script CGI).
Exemplo:
<form method="POST" action="[Link]
<p><input type="text" name="T1" size="20"> <input type="submit"
value="Submit" name="B1"> <input type="reset" value="Reset" name="B2"></p>
</form>

Pág. 50
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

O contorno pontilhado define a área do FORM

Atributos de FORM

Atributo: ACTION
Explicação: Indica a localização (URL) do script que irá receber e interpretar os
dados enviados pelo formulário.
Exemplo:
<form method="POST" action="[Link]

Atributo: METHOD
Explicação: Indica o formato no qual os dados serão enviados. Pode assumir os
valores "GET" (indica como os dados serão passados pelo script) ou "POST" (envia os
dados para entrada padrão do sistema operacional).
<form method="POST" action="[Link]

INPUT <input>

Explicação: Indica um objeto (campo texto, checkbox, etc).

Exemplo: <input type="text" size="30">

Atributos de INPUT

Atributo: TYPE
Explicação: Especifica que tipo de objeto deve ser: "TEXT", "PASSWORD",
CHECKBOX", "HIDDEN", "RADIO", BUTTON", "SUBMIT" e "RESET".
Exemplo: <input type="text" size="40">

Atributo: NAME
Explicação: Indica o nome do objeto. Este nome não será exibido para o usuário.
Ele é utilizado pelo script associado ao formulário para a manipulação de suas
informações.
Exemplo: <input type="text" size="20" name="endereco">

Atributo: VALUE
Explicação: É o conteúdo do objeto. Dependendo do tipo de objeto (ex.: caixas de
texto) o conteúdo pode ser manipulado pelo usuário.
Exemplo: <input type="text" size="40" value="Rio de Janeiro">

Atributo: SIZE
Explicação: Indica o número de caracteres visíveis de um objeto tipo "TEXT" (caixa
de texto).
Exemplo: <input type="text" size="40">
Pág. 51
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Atributo: MAXLENGTH
Explicação: Indica o número máximo de caracteres permitido como conteúdo de
um objeto tipo "TEXT".
Exemplo: <input type="text" size="40" maxlength="60">

Atributo: CHECKED
Explicação: Determina qual a opção padrão (default) para objetos tipo "RADIO".
Para objetos tipo "CHECKBOX", sua presença determina que ele está, como default,
assinalado.
Exemplo: <input type="checkbox" checked>

Atributo: ALIGN
Explicação: Determina o comportamento dos objetos em relação a textos e
imagens presentes na mesma linha. As opções são: "TOP", "MIDDLE" e "BOTTOM".

O conteúdo dos formulários podem ser manipulados por scripts em JavaScript.

TEXTAREA <textarea>...</textarea>

Explicação: Proporciona ao usuário espaço para a digitação de múltiplas linhas de

texto.
Exemplo:
<textarea rows="3" cols="50">Área para texto</textarea>

Atributos de TEXTAREA

Atributo: NAME
Explicação: Indica o nome do objeto. Este nome não será exibido para o usuário.
Ele é utilizado pelo script associado ao formulário para a manipulação de suas
informações.

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

Atributo: ROWS
Explicação: Indica o número de linha que a área de texto deve possuir.
Exemplo:
<textarea rows="3" cols="50">Área para texto</textarea>

Atributo: COLS
Explicação: Indica o número de colunas que a área de texto deve possuir.
<textarea rows="3" cols="50">Área para texto</textarea>

SELECT <select>...</select>

Pág. 52
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Explicação: Permite ao usuário selecionar uma dentre uma lista de opções

possíveis. As opções são criadas através do TAG <OPTION>.
Exemplo:
<select name="opcoes" size="1">
<option selected>Texto A</option>
<option>Texto B</option>
</select>

Atributos de SELECT

Atributo: NAME
Explicação: Indica o nome do objeto. Este nome não será exibido para o usuário.
Ele é utilizado pelo script associado ao formulário para a manipulação de suas
informações.
Exemplo: <select name="opcoes" size="1">

Atributo: SIZE
Explicação: Define o número de opções que serão exibidas simultaneamente.
Exemplo: <select name="opcoes" size="1">

Atributo: MULTIPLE
Explicação: Se presente, indica que mais de uma opção poderá ser escolhida.

OPTION <option>

Explicação: Deve ser usado dentro da área de influência de "SELECT". Define as

diversas opções disponíveis ao usuário.

Atributos de OPTION

Atributo: VALUE
Explicação: Define o valor da opção, que será enviado ao script correspondente
caso esta seja selecionada.

Atributo: SELECTED
Explicação: Define que a opção será selecionada como default.

FORM FIELD - Exemplos

One-Line Text Box

Pág. 53
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

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>

Scolling Text Box

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

Check Box

Exemplo:
<form method="POST" action="_URL_">
<input type="checkbox" name="C1" value="ON">Tópico 1<input type="submit"
value="Submit" name="B1"><input type="reset" value="Reset" name="B2">
</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>

Radio Button

Pág. 54
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Exemplo:
<form method="POST" action="_URL_">
<input type="radio" value="V1" checked name="R1">Tópico 1<input
type="submit"
value="Submit" name="B1"><input type="reset" value="Reset" name="B2">
</form>

Drop-Down Menu

Exemplo:
<form method="POST" action="_URL_">
<select name="D1" size="1">
<option selected value="[Link] 1</option>
<option value="[Link] 2</option>
</select><input type="submit" value="Submit" name="B1"><input type="reset"
value="Reset"
name="B2">
</form>

Push Button

Exemplo:
<form method="POST" action="_URL_">
<input type="button" value="Button" name="B1">
</form>

Exercício de Formulário

Todas as informações fornecidas em um formulário são agrupadas e enviadas para

um programa, mais conhecido como Script CGI, que é escrito especialmente para
processar esses dados de acordo com alguma necessidade ou especificação.
Atualização ou consulta a base de dados, envio de dados por e-mail, ou
simplesmente a construção de uma nova página (gerada a partir dos novos dados)
são algumas das aplicações mais comuns.

Pág. 55
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

Escrever um Script CGI não é tarefa fácil para a maioria dos WebDesigners, mas
existem vários CGI "pré-fabricados" disponíveis gratuitamente na Rede, que
processam as informações fornecidas de forma transparente.
Como exercício proposto vamos utilizar o AnyForm para ensinar como colocar um
formulário em uma página HTML.

<html>

<head>
<title>Formulário</title>
</head>

<body>

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

seus
comentários!</b></font></p>

<p><font face="Verdana, Arial, Helvetica" size="2">Olá! Obrigado por visitar o meu

WebSite. <br>
Use este formulário para deixar aqui os seus comentários: </p>

<form action="[Link]
method="post">
<input type="hidden" name="AnyFormMode" value="mail">
<input type="hidden" name="AnyFormDisplay" value="[Link]
<input type="hidden" name="AnyFormTo" value="cursos@[Link]>
<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 página:
<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"Não"> Não</p>
<p>Qual a página 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 comentários: <br>
Pág. 56
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

<textarea name="Comentarios" rows="5" cols="40"></textarea></p>

<p>Você gostaria que eu respondesse a este seu comentário?
<input type="checkbox" name="Quer Resposta" value="Sim"> Sim </p>
<p><input type="submit" value="Enviar os comentários"> <input type="reset"
value="Limpar todos os campos"> </p>
</form>
</font>
</body>
</html>

Frames

Definição

Até a chegada do Netscape 2.0, e com ele a implementação do NHTML, uma página
era composta de uma janela, sem divisões.
Através 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. Além disso, uma frame pode "ordenar" ao browser
para que este atualize, com a URL indicada, uma frame diferente.
Como todos os recursos mais avançados para a construção de Home Pages, também
os frames devem ser utilizados com o máximo de cuidado. Sua utilização deve
Pág. 57
 ETCV - LINGUAGEM DE PROGRAMAÇÃO HTML

obedecer ao critério de necessidade, para não prejudicar o designe a navegabilidade

da página. Os casos de real necessidade de frames não são tantos, mas quando
surgem, as frames podem melhorar dramaticamente o site.
Casos de índices e tutoriais são alguns dos mais comuns em que o uso de frames é
mais indicado. Exatamente para efeitos de design, pode-se alterar as diversas
características de frames através de recursos como omissão de barra de rolagem e
borda.

Pág. 58