You are on page 1of 104

Sumário

INTRODUÇÃO _________________________________ 3
EDIÇÃO DE DOCUMENTOS __________________________________ 4
COMANDOS DE HTML ___________________________________ 5
ATRIBUTOS ____________________________________________ 5
COMENTÁRIOS __________________________________________ 6
COMPONENTES BÁSICOS ___________________________________ 6
CRIANDO UM DOCUMENTO _________________________________ 7

HTML BÁSICO _________________________________ 9


CABEÇALHOS ___________________________________________ 9
PARÁGRAFOS __________________________________________ 12
SEPARADORES _________________________________________ 15
FORMATAÇÃO DO TEXTO _________________________________ 17
FORMATAÇÃO DE CARACTERES _____________________________ 17
B LOCOS _____________________________________________ 22
FONTE _______________________________________________ 25
LISTAS _______________________________________________ 29
ANINHANDO E COMBINANDO LISTAS _________________________ 34

IMAGENS _____________________________________ 37
INSERINDO IMAGENS _____________________________________ 39
ATRIBUTOS ___________________________________________ 40
IMAGENS DE FUNDO _____________________________________ 42
IMAGENS MAPEADAS ____________________________________ 45
LIGAÇÕES (LINKS) ____________________________ 48
LINKS PARA ARQUIVOS __________________________________ 48
LINKS PARA SEÇÕES DE DOCUMENTOS _______________________ 51
HIPERLINK COM IMAGEM MAPEADA _________________________ 55

TABELAS _____________________________________ 62
ANINHANDO TABELAS ___________________________________ 65
MESCLANDO CÉLULAS ___________________________________ 67
ALTERANDO DIMENSÕES __________________________________ 70
IMAGEM DE FUNDO ______________________________________ 73

FRAMES ______________________________________ 75
COMPOSIÇÕES COM FRAMES ______________________________ 81
LIGANDO FRAMES ______________________________________ 85
ENCADEANDO FRAMES ___________________________________ 88

FORMULÁRIOS _______________________________ 91
OS OBJETOS DE FORMULÁRIOS ____________________________ 91
INSERINDO OBJETOS ____________________________________ 93
FAZENDO O FORMULÁRIO FUNCIONAR _______________________ 99

EXERCÍCIOS ________________________________ 101


Programando em HTML

INTRODUÇÃO

Antes de iniciar este curso é importante que você saiba o que é World
Wide Web (www), consiga operar um navegador (browser) e o que é
uma homepage. Porém não é necessário que você conecte-se à Internet
para poder ver as páginas que está editando.

A HTML (HyperText Markup Language) é uma linguagem utilizada para a


edição de documentos da Web que possui etiquetas para formatar o tex-
to e figuras que serão apresentados pelo navegador e cria ligações entre
páginas, criando o conceito de hipertexto. Ela é composta por comandos
colocados entre parênteses angulares (< e >). Estes comandos são
chamados de etiquetas (tags) que informam ao navegador como os tex-
tos e imagens serão exibidos na página.

Toda página Web é um arquivo de texto gravado com a extensão .htm


(Windows) ou .html (Unix) que possui comandos HTML e está gravado
em um servidor. Quando o computador cliente solicita uma página, o
servidor envia para ele o arquivo html que o navegador se encarregará de
interpretar e exibir a página solicitada.

Celta Informática - F: (11) 4331-1586 Página: 3


Programando em HTML

EDIÇÃO DE DOCUMENTOS

Um documento HTML pode ser criado utilizando um simples editor de


textos como o Bloco de Notas do Windows ou um editor de HTML que
possui atalhos para os comandos e insere automaticamente as etique-
tas, orientando na digitação dos seus elementos, e aumentando muito a
produtividade. Existem atualmente editores do tipo WYSIWYG (what you
see is what you get - o que você vê é o que você quer) que permitem a
construção da página sem a necessidade de digitar ou ver o código HTML,
tais como o Dreamweaver e FrontPage.

Neste curso iremos utilizar o Bloco de Notas do Windows, pois o que


interessa é você se familiarizar bastante com as tags HTML e caso
utilizassemos algum editor, estas tags seriam colocadas automaticamen-
te prejudicando o seu aprendizado.

Celta Informática - F: (11) 4331-1586 Página: 4


Programando em HTML
Comandos de HTML

Como você já sabe, um documento HTML possui tags que informam


como a página será exibida pelo navegador. A maioria dessas tags pos-
suem também sua correspondente de fechamento:

<tag> texto formatado </tag>

Este fechamento é necessário porque estas tags servem para definir a


formatação de uma porção de texto, e por isso devemos marcar onde
começa e termina o texto com a formatação especificada por ela.

Existem também tags chamadas “vazias”, pois não marcam uma região
de texto, apenas inserem algum elemento ou formatação no documento:

<tag>

Todas as tags possuem atributos que podem ser utilizados ou não, de-
pendendo da formatação desejada para o texto. Eles definem alguma
característica especial e são colocados na etiqueta inicial.

<tag atributo1=valor1 atributo2=valor2> texto formatado </tag>

As tags HTML não são sensíveis à caixa, ou seja, tanto faz escrevê-la
com letras maiúsculas ou minúsculas. Sendo assim, <FONT>, <Font>
ou <font> são a mesma coisa.

Atributos

Um atributo define várias propriedades para uma tag. Por exemplo, a tag
<FONT COLOR=”red”> texto </FONT> possui o atributo COLOR que
determina qual será a cor da font utilizada no texto.

O atributo é sempre incluído na tag inicial e nunca na tag final, e o seu


valor é delimitado por aspas simples ou duplas. Estas aspas são opcionais
se o valor do atributo consistir somente de letras (a-z), dígitos (0-9), hífen
e ponto. O nome dos atributos não são sensíveis a caixa mas seus valo-
res podem ser.

Celta Informática - F: (11) 4331-1586 Página: 5


Programando em HTML
Comentários

Todo bom programador inclui comentários em seu código para uma pos-
terior manutenção feita por ele mesmo ou por outra pessoa. Estes co-
mentários não são interpretados pelo navegador, sendo úteis no entendi-
mento de como o código está sendo executado.

Um comentário em HTML começa com “<!—“, e termina com “—>”, não


podendo ser utilizados “—” dentro do comentário. Por exemplo:

<!— Este texto é um comentário —>

Componentes básicos

A estrutura básica de um documento HTML é a seguinte:

<HTML>
<HEAD>
<TITLE>Titulo do Documento</TITLE>
elementos opcionais
</HEAD>
<BODY>
textos,imagens,links
</BODY>
</HTML>

A etiqueta <HTML>...</HTML> marca o início o final do documento HTML,


e entre ela existem as seções de cabeçalho (head) e corpo (body) do
documento.

O cabeçalho é delimitado por <HEAD>...</HEAD> e contém informa-


ções sobre o documento e seu conteúdo que podem ser recuperados
por robôs de busca na Internet, e não serão exibidos na página.

A principal informação contida no cabeçalho é o título do documento que


aparece na barra de título do navegador e está delimitado pela etiqueta
<TITLE>...</TITLE>. Este título não deve ser nem muito longo e nem
muito curto, ele deve indicar claramente o conteúdo da página. Ele pre-
cisa ter algum significado para o internauta pois além de ser exibido pe-
los programas de busca, o título será listado nos favoritos do navegador
(bookmark).

Celta Informática - F: (11) 4331-1586 Página: 6


Programando em HTML
O corpo do documento contém todas as informações que serão exibidas
pelo navegador, tais como: cabeçalhos, parágrafos, imagens, listas, ta-
belas e links. Ele está delimitado pela etiqueta <BODY>...</ BODY>.

Criando um documento

Para iniciar e edição de um documento, abra o Bloco de notas do Windows


e digite o texto mostrado a seguir.

Salve este documento com o nome de modelo.htm, para não ter que
digitar toda estrutura básica novamente a cada novo documento.

Após salvar, inclua um título e algum texto no corpo do documento. Salve


o arquivo com o nome de primeiro.htm, utilizando a opção Salvar como...
do menu Arquivo, não esquecendo de informar a extensão .htm ou o
arquivo será gravado como .txt. Observe a figura.

Celta Informática - F: (11) 4331-1586 Página: 7


Programando em HTML

No navegador utilize o menu Arquivo > Abrir... e procure pelo arquivo


que você acabou de salvar.

Repare na informação da barra de título, no endereço e no conteúdo da


página.

Celta Informática - F: (11) 4331-1586 Página: 8


Programando em HTML
Na caixa de lista do endereço é informado o local do arquivo no computa-
dor, quando esta página for publicada, ou seja, gravada em um servidor
Web, o endereço será alguma coisa parecida com:

http://www.meunome.com.br/primeiro.htm

Repare que o texto na página apareceu sem quebra de linha apesar de


ter sido pressionada a tecla Enter após a digitação da palavra “página” no
Bloco de notas. Isto ocorre porque o navegador não recebeu uma instru-
ção para quebrar a linha ou qualquer outra que modificasse o texto, ele
apenas exibiu o que estava na tag <BODY>.

HTML BÁSICO

Agora que você aprendeu a editar, salvar como html e abrir um docu-
mento no navegador, está na hora de começar a aprender como formatar
o texto, inserir figuras e links e criar tabelas e frames.

CABEÇALHOS

Todo documento possui cabeçalhos que separam seções ou tópicos que


facilitam a visualização de quem os lê, permitindo um melhor acompa-
nhamento das idéias expostas. O HTML possui a etiqueta <H> que cria
cabeçalhos na área de visualização das páginas.

Existem seis tipos de cabeçalhos no HTML com formatação própria e


prontos para serem utilizados, indo de <H1> a <H6>. Sendo <H1> de
tamanho maior que <H6>.

Celta Informática - F: (11) 4331-1586 Página: 9


Programando em HTML
Faça o seguinte documento:

Que será exibido desta forma no navegador.

Celta Informática - F: (11) 4331-1586 Página: 10


Programando em HTML
Os cabeçalhos possuem o atributo ALIGN que faz o alinhamento do texto.

ALIGN = [ left | center | right | justify ]

Defina o atributo ALIGN para as etiquetas de cabeçalho como mostra a


figura.

Celta Informática - F: (11) 4331-1586 Página: 11


Programando em HTML
PARÁGRAFOS

Como vimos no primeiro exemplo, o HTML não quebra ou avança linhas


quando pressionamos a tecla Enter, ele só avançará uma linha após um
comando específico que mande ele fazer isto.

Existem duas etiquetas que permitem uma quebra de linha, são elas:
<BR> e <P>. A primeira avança uma linha imediatamente após ser en-
contrada, e a segunda força um novo parágrafo inserindo uma linha em
branco separando blocos de texto.

<BR>
Este comando quebra a linha em determinado ponto, dando continuida-
de ao texto em outra linha, não possuindo seu correspondente fecha-
mento (etiqueta vazia). Já que o navegador quebra linhas automatica-
mente de forma a caberem em sua janela, utilizamos o <BR> para
formatar o texto ao nosso gosto.

<HTML>
<HEAD>
<TITLE>Parágrafos</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=center>Etiqueta BR</H1>
Em outubro, 27 a 29, iremos para o nosso
acampamento na estância de Atibaia. Sairemos
dia 27 às 13 horas da sede do clube.<BR>
Não cheguem atrasados.<BR>
Até lá.
</BODY>
</HTML>

<P>
Como vimos, esta Tag além de causar uma quebra da linha, também
adiciona uma linha em branco. Ela é utilizada para criar parágrafos, se-
parando blocos de texto que podem ser formatados em conjunto.

Celta Informática - F: (11) 4331-1586 Página: 12


Programando em HTML
Esta etiqueta pode ser utilizada somente no final de um parágrafo ou
juntamente com sua correspondente de fechamento (</P>) envolvendo
uma região do texto para formatação. Como a Tag <H>, ela também
possui o atributo ALIGN.

O exemplo anterior ficaria da seguinte forma com o uso de <P>.

<HTML>
<HEAD>
<TITLE>Parágrafos</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=center>Etiqueta P</H1>
Em outubro, 27 a 29, iremos para o nosso
acampamento na estância de Atibaia. Sairemos
dia 27 às 13 horas da sede do clube.<P>
<P ALIGN=center> Não cheguem atrasados.</P>
Até lá.
</BODY>
</HTML>

Celta Informática - F: (11) 4331-1586 Página: 13


Programando em HTML
As duas etiquetas de quebra de linha (BR) e parágrafo (P) também po-
dem ser combinadas:

<HTML>
<HEAD>
<TITLE>Parágrafos</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=center>Etiqueta P</H1>
Em outubro, 27 a 29, iremos para o nosso
acampamento na estância de Atibaia. Sairemos
dia 27 às 13 horas da sede do clube.<P>
<P ALIGN=center> Não cheguem atrasados.<BR>
Até lá.</P>
</BODY>
</HTML>

Repare que a etiqueta <BR> pode estar no meio de uma linha no Bloco de
notas que sua função continuará a mesma. Isto ocorre com outras etique-
tas que podem estar em qualquer posição no documento, desde que res-
peitada a ordem de leitura dos comandos. Mas para facilitar a vida do pro-
gramador, devemos utilizar deslocamentos do texto separando e agrupan-
do os diversos comandos. Este deslocamento é conhecido como
edentação, e é muito utilizado em outras linguagens de programação.

Celta Informática - F: (11) 4331-1586 Página: 14


Programando em HTML
SEPARADORES

Separadores são linhas horizontais que dividem o documento, desta-


cando títulos e separando diferentes tipos de informação .

Estas linhas podem ser usadas com os atributos de altura (SIZE), largu-
ra (WIDTH), sombra (NOSHADE) e alinhamento (ALIGN)

<HTML>
<HEAD>
<TITLE>Separadores</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=center>Separadores</H1><HR>
Em outubro, 27 a 29, iremos para o nosso
acampamento na estância de Atibaia. Sairemos
dia 27 às 13 horas da sede do clube.<HR>
<CENTER>Não cheguem atrasados.<HR>
Até lá.</CENTER>
</BODY>
</HTML>

Celta Informática - F: (11) 4331-1586 Página: 15


Programando em HTML
Neste exemplo foi incluída a etiqueta <CENTER>, como o nome já diz,
centraliza o texto que estiver entre ela e sua correspondente de fecha-
mento </CENTER>.
O atributo SIZE do separador é indicado por um valor inteiro de pixels,
enquanto que o atributo WIDTH pode ser indicado tanto em pixels quanto
em porcentagem da largura da página.
Quando um valor absoluto de pixels é utilizado, o comprimento da linha
permanecerá o mesmo independente da dimensão da janela do navega-
dor, enquanto que ao utilizar porcentagem, este comprimento mudará de
acordo com o redimensionamento do navegador. O padrão para HR é
100% da largura.

<HTML>
<HEAD>
<TITLE>Separadores</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=center>Separadores</H1><HR SIZE=5>
<CENTER>Linha de tamanho fixo<HR SIZE=3
WIDTH=130>
Linha de tamanho proporcional<HR WIDTH=50%>
</CENTER>
</BODY>
</HTML>

Celta Informática - F: (11) 4331-1586 Página: 16


Programando em HTML

Observe nas figuras anteriores a alteração na largura da linha proporcio-


nal quando a janela do navegador foi redimensionada.

FORMATAÇÃO DO TEXTO

O texto em uma página Web pode ser formatado como se estivéssemos


em um programa editor de textos, alterando a fonte ou o estilo dos
caracteres apresentados. O HTML possui etiquetas que realizam esta
formatação sendo necessário utilizar em todas elas a sua correspon-
dente de fechamento, indicando o início e fim do trecho de texto a ser
formatado.

Formatação de Caracteres

Os comandos para formatação de texto dividem-se em elementos lógi-


cos e físicos. A formatação lógica depende de como o navegador está
configurado, garantindo uma uniformidade na apresentação de cabeça-
lhos, parágrafos, listas e outros elementos preconfigurados. Na
formatação física, são especificados claramente os estilos de texto de-
sejado: negrito, itálico, cor, grifado, dentre outros.

Celta Informática - F: (11) 4331-1586 Página: 17


Programando em HTML
Física

São utilizadas as seguintes etiquetas para a formatação física do texto:

Etiqueta Função
<B> texto </B> Negrito
<I> texto </I> Itálico
<U> texto </U> Sublinhado
<TT> texto </TT> Teletipo - caracteres monoespaçados
<STRIKE> texto </STRIKE> Riscado
<SUP> texto </SUP> Sobrescrito
<SUB> texto </SUB> Subescrito
<BIG> texto </BIG> Fonte um pouco maior
<SMALL> texto </SMALL> Fonte um pouco menor

O programa abaixo mostra o uso de alguns formatadores de texto utiliza-


dos no célebre soneto de Camões.

<HTML>
<HEAD>
<TITLE>Formatação de texto</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=center>Formatadores físicos</H1><HR
SIZE=5>
<H2 ALIGN=center>Soneto - 05</H2>
<I>Amor</I> é um <B>fogo</B> que arde sem se
ver,<BR>
é <B>ferida</B> que dói, e não se sente;<BR>
é um <B>contentamento</B> descontente,<BR>
é <B>dor</B> que desatina sem doer.<P>
É um não <B>querer</B> mais que bem querer;<BR>
é um <B>andar</B> solitário entre a gente;<BR>
é nunca <B>contentar</B> se de contente;<BR>
é um cuidar que <B>ganha</B> em se perder.<P>
É <B>querer estar preso</B> por vontade;<BR>
é <B>servir</B> a quem vence, o vencedor;<BR>
é ter com quem nos mata, <B>lealdade</B>.<P>
Mas como <U>causar</U> pode seu favor<BR>
nos <BIG>corações humanos</BIG> <U>amizade</U>,<BR>
se tão contrário a si é o mesmo <I>Amor</I>?<P>
<TT>(Camões)</TT>
</BODY>
</HTML>

Celta Informática - F: (11) 4331-1586 Página: 18


Programando em HTML

Lógica

Esta formatação é utilizada quando se deseja formatar o texto utilizando


um dos padrões disponíveis. Por exemplo, quando você formata um tex-
to como cabeçalho não é especificado como este texto será apresenta-
do pois toda esta definição já esta internamente programada no navega-
dor.

Etiqueta Função
<CITE> Destaca citações, como títulos de revistas e filmes
<CODE> Indica trechos de código de programa
<DFN> Descreve um termo
<EM> Enfatiza o texto - itálico
<KBD> Indica uma entrada via teclado
<SAMP> Representa a saída de um programa
<STRONG> Enfatiza o texto - negrito
<VAR> Indica valores que o usuário deverá escrever

Celta Informática - F: (11) 4331-1586 Página: 19


Programando em HTML
Estes formatadores são utilizados da mesma forma que os formatadores
físicos, devendo o texto que se queira formatar estar entre a etiqueta e
sua correspondente de fechamento:

<KBD> texto </KBD>.

Podemos também combinar os diversos comandos de formatação para


determinado trecho do texto. Desde que observados se as etiquetas
estão sendo abertas e fechadas na ordem correta evitando possíveis
erros na apresentação por alguns navegadores.

Correto: <B><CODE>Texto em código e negrito.</CODE></B>

Incorreto: <B><CODE>Texto em código e negrito.</B></CODE>

Caracteres especiais

Caracteres especiais são aqueles que não são interpretados por alguns
navegadores ou não são possíveis de serem digitados pelo teclado. Para
representar estes caracteres, utilizamos seqüências de escape, indicadas
por três partes:
1 - o caracter &
2 - um número ou cadeia de caracteres
3 - o caracter ;

Ex: &#231 = ç
&atilde = ã
Outro uso para esse recurso é quando se deseja utilizar na página,
caracteres de uso do HTML, tais como: < , > e &.

Entidade Caracter
&lt; <
&gt; >
&amp; &

Celta Informática - F: (11) 4331-1586 Página: 20


Programando em HTML
Na tabela a seguir temos os caracteres mais utilizados pela língua portu-
guesa.

Entidade Caracter Entidade Caracter


&aacute; á &Aacute; Á
&acirc; â &Acirc; Â
&agrave; à &Agrave; À
&atilde; ã &Atilde; Ã
&ccedil; ç &Ccedil; Ç
&eacute; é &Eacute; É
&ecirc; ê &Ecirc; Ê
&iacute; í &Iacute; Í
&oacute; ó &Oacute; Ó
&ocirc; ô &Ocirc; Ô
&otilde; õ &Otilde; Õ
&uacute; ú &Uacute; Ú
&uuml; ü &Uuml; Ü
&nbsp espaço

É importante a utilização destes caracteres de escape na construção de


sua página, pois garante que ela seja visualizada corretamente por qual-
quer navegador não importado a língua configurada no computador do
usuário.

O exemplo seguinte ilustra o uso das seqüências de escape.

<HTML>
<HEAD>
<TITLE>Formatação de texto</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=center>Caracteres especiais</H1><HR
SIZE=5>
A etiqueta &lt;H1&gt; &eacute; utilizada para<BR>
a edi&ccedil;&atilde;o de documentos HTML.
</BODY>
</HTML>

Celta Informática - F: (11) 4331-1586 Página: 21


Programando em HTML

Blocos

Com o HTML podemos também criar blocos de texto destacando-os do


restante da página. As etiquetas utilizadas são as seguintes:
<ADDRESS>, <BLOCKQUOTE> e <PRE>.

<ADDRESS>
Esta etiqueta cria um bloco de texto para endereços, identificando o au-
tor do documento. Este bloco pode conter endereço para contato, e-mail,
link para a página do webmaster e outras informações a respeito do do-
cumento. Ela geralmente é colocada no final da página.

<HTML>
<HEAD>
<TITLE>Address</TITLE>
</HEAD>
<BODY>
<HR><ADDRESS>
Esta página foi desenvolvida por Marcos:
omix@bol.com.br
</ADDRESS><HR>
</BODY>
</HTML>

Celta Informática - F: (11) 4331-1586 Página: 22


Programando em HTML

<BLOCKQUOTE>
Blockquote destaca um bloco de texto separando-o em um novo pará-
grafo. Ele pode tanto aparecer em itálico quanto edentado, dependendo
do navegador utilizado.

<HTML>
<HEAD>
<TITLE>Blockquote</TITLE>
</HEAD>
<BODY>
<H2>BLOCKQUOTE</H2><HR>
Os dias est&atilde;o se passando muito
r&aacute;pido, por isso:
<BLOCKQUOTE>
Nunca deixe para realizar as tarefas de sua
responsabilidade<BR>
o mais r&aacute;pido poss&iacute;vel.
</BLOCKQUOTE>
Tenha isso em mente.
</BODY>
</HTML>

Celta Informática - F: (11) 4331-1586 Página: 23


Programando em HTML
<PRE>
Utilizamos a etiqueta PRE para inserir na página um texto com o mesmo
formato que ele foi digitado, respeitando os espaçamentos, fontes, mar-
cas de tabulação e quebras de linha feitas com a tecla Enter, formatando
o texto na tela com uma fonte monoespaçada como a Courier. Ela é
muito útil para exibir textos que necessitam deste tipo de fonte como por
exemplo: listagens de programas e planilhas.

No entanto, os comandos HTML colocadas entre <PRE> e </PRE> se-


rão interpretados pelo navegador normalmente.

<HTML>
<HEAD><TITLE>Pre</TITLE></HEAD>
<BODY><H2>PRE</H2><HR>
População brasileira
<PRE>
<B>Ano</B> <B>Total</B>(mil)
1940 41.236
1950 51.944
1960 70.070
1970 93.138
1980 119.002
1991 146.825
1996 157.069
</PRE>
Fonte: IBGE
</BODY>
</HTML>

Celta Informática - F: (11) 4331-1586 Página: 24


Programando em HTML
Fonte

A linguagem HTML possui recursos para alterar o tipo, cor e tamanho da


fonte utilizada nos textos. Estes recursos são implementados com a
etiqueta <FONT> e seus atributos SIZE (tamanho), FACE (tipo) e COLOR
(cor).

O atributo SIZE determina o tamanho da fonte a ser mostrada e varia em


números inteiros de 1 até 7, sendo o tamanho 3, definido como padrão.

<FONT>Fonte tamanho 3</FONT><BR>


<FONT SIZE=5>Fonte tamanho 5</FONT><BR>
<FONT SIZE=2>Fonte tamanho 2</FONT>

O atributo SIZE também pode ser incrementado ou decrementado, colo-


cando-se um sinal
(+ ou -) antes do número, baseando-se no tamanho padrão de fonte
(SIZE=3).

<FONT>Fonte tamanho 3</FONT><BR>


<FONT SIZE=+2>Fonte tamanho 5</FONT><BR>
<FONT SIZE=-1>Fonte tamanho 2</FONT>
Os dois exemplos anteriores apresentam o mesmo efeito de tamanho
da fonte que é mostrado na próxima figura.

Com o atributo FACE alteramos o nome da fonte que será mostrada pelo
navegador. Caso a fonte especificada não esteja instalada no computador
do usuário, o sistema a substituirá pela fonte padrão. Mas é possível evitar
esta substituição criando uma lista preferencial de fontes, onde se não for
encontrada a primeira, a segunda será utilizada e assim por diante.

Celta Informática - F: (11) 4331-1586 Página: 25


Programando em HTML
<HTML>
<HEAD><TITLE>Fonte</TITLE></HEAD>
<BODY>
<FONT FACE=’comic sans ms’>Meu coração desmaia
pensativo, </FONT><BR>
<FONT FACE=’verdana’>Cismando em tua rosa
predileta.</FONT><BR>
<FONT FACE=’lucida’ SIZE=5>Sou teu pálido amante
vaporoso, </FONT><BR>
<FONT FACE=’avantgarde’>Sou teu Romeu... teu
lânguido poeta!...</FONT><BR>
<FONT FACE=’comic sans ms’>Sonho-te às vezes
virgem... seminua...</FONT><BR>
<FONT FACE=’verdana’>Roubo-te um casto beijo à
luz da lua... </FONT><BR>
<FONT FACE=’lucida’ SIZE=5> — E tu és Julieta...
</FONT><P>
<FONT FACE=’albertus medium, verdana’
SIZE=2>Castro Alves</FONT>
</BODY>
</HTML>

Por último temos o atributo COLOR que especifica a cor do texto. A cor
é escolhida utilizando-se o formato hexadecimal, RGB ou uma entre as
dezesseis constantes para nome de cor.
O formato hexadecimal é composto de um número nesta base precedi-
do pelo caracter “#” indicando a intensidade de cada cor primária (red,

Celta Informática - F: (11) 4331-1586 Página: 26


Programando em HTML
green e blue) na composição da cor final. Estes valores variam de 00 (0)
a FF (255) para cada uma das cores.

<FONT COLOR = #rrggbb>


<FONT COLOR = #9169A1>Texto na cor violeta azulado</FONT>

Para usar um dos nomes predefinidos, basta digitar o nome da cor dese-
jada.

<FONT COLOR = green>Texto em verde</FONT>


<FONT COLOR = olive>Texto em verde oliva</FONT>

Na tabela a seguir são mostradas os nomes das dezesseis cores


predefinidas.

Cor Hexadecimal Cor Hexadecimal


black #000000 green #008000
silver #C0C0C0 lime #00FF00
gray #808080 olive #808000
white #000000 yellow #FFFF00
maroon #800000 navy #000080
red #FF0000 blue #0000FF
purple #800080 teal #008080
fuchsia #FF00FF aqua #00FFFF

No exemplo a seguir é mostrado o uso do atributo COLOR, e repare que


está sendo usado um encadeamento da etiqueta FONT. A primeira eti-
queta determina a fonte utilizada e o tamanho do texto e as outras deter-
minam a cor de cada palavra.

<HTML>
<HEAD><TITLE>Fonte Cores</TITLE></HEAD>
<BODY>
<H3>Olhe abaixo e diga as <U>CORES</U>, não as
palavras.</H3>
<FONT FACE=’arial black’ SIZE=5>
<FONT COLOR=green>AMARELO</FONT>
<FONT COLOR=red>&nbspAZUL&nbsp</FONT>

Celta Informática - F: (11) 4331-1586 Página: 27


Programando em HTML
<FONT COLOR=blue>LARANJA</FONT><BR>
<FONT COLOR=red>PRETO</FONT>
<FONT COLOR=blue>&nbspCINZA&nbsp</FONT>
<FONT COLOR=black>VERDE</FONT><BR>
<FONT COLOR=black>VERDE</FONT>
<FONT COLOR=green>&nbspAZUL&nbsp</FONT>
<FONT COLOR=blue>VERMELHO</FONT><BR>
<FONT COLOR=blue>ROXO</FONT>
<FONT COLOR=red>LARANJA</FONT>
<FONT COLOR=green>AMARELO</FONT>
</FONT><HR>
Você encontrou dificuldade pois, o lado
direito do cérebro tenta dizer a cor, mas o
lado esquerdo insiste em ler a palavra.
</BODY></HTML>

Na listagem anterior foi utilizado o caracter especial &nbsp para inserir


um espaço a mais entre algumas palavras. A etiqueta FONT inclui um
espaço automaticamente e caso você deseje incluir mais espaços em
branco, é necessário utilizar esse caracter especial. Ele também é útil
durante a digitação de um texto qualquer, pois o HTML aceita somente
um espaço entre palavras, mesmo que existam 20 espaços no código,
na página será mostrado apenas um.

Celta Informática - F: (11) 4331-1586 Página: 28


Programando em HTML
<HR><FONT FACE=’arial black’ SIZE=4>
Primeiro Segundo Terceiro<BR>
Primeiro &nbsp&nbsp Segundo &nbsp&nbsp Terceiro<HR>

LISTAS

Em algumas páginas é útil colocar listas formatadas com itens para enu-
merar informações. Elas podem apresentar resumos do conteúdo da
página ou funcionarem como ponto de ligação entre as diversas informa-
ções do site (links). O código HTML suporta os seguintes tipos de listas:

Listas não ordenadas, que acrescentando uma marca no início de cada


linha do texto.
Listas ordenadas, que enumeram cada item com números ou letras.
Listas de glossário, utilizadas para descrever cada item listado.

Listas não ordenadas

Criamos uma lista não ordenada com duas etiquetas, uma para iniciar a
lista (UL) e outra para indicar cada linha desta lista (LI). O comando
<UL> e seu correspondente de fechamento </UL> devem envolver to-
dos os itens da lista.

Celta Informática - F: (11) 4331-1586 Página: 29


Programando em HTML
<HTML>
<HEAD><TITLE>Listas</TITLE></HEAD>
<BODY>
Países da América do Sul
<UL>
<LI>Argentina <LI>Bolívia
<LI>Brasil <LI>Chile
<LI>Colômbia <LI>Equador
<LI>Guiana <LI>Paraguai
<LI>Peru <LI>Suriname
<LI>Uruguai <LI>Venezuela
</UL>
</BODY>
</HTML>

É possível modificar o marcador utilizado neste tipo de lista alterando o


atributo TYPE da etiqueta <UL>. Existem três tipos de marcadores: circle,
disc e square.

<UL TYPE=circle><LI>Argentina <LI>Bolívia </UL>


<UL TYPE=disc> <LI>Brasil <LI>Chile </UL>
<UL TYPE=square><LI>Colômbia <LI>Equador </UL>

Celta Informática - F: (11) 4331-1586 Página: 30


Programando em HTML
Podemos também alterar o marcador de cada linha individualmente,
modificando o atributo TYPE da etiqueta <LI>.

<UL>
<LI TYPE=circle>Peru
<LI TYPE=disc>Suriname
<LI TYPE=square>Uruguai
</UL>

Lista ordenadas

A lista ordenada é utilizada quando desejamos enumerar os itens apre-


sentados. Ela é criada com a tag <OL> e sua correspondente de fecha-
mento </OL>, mais a tag <LI> para cada item desta lista, da mesma
forma que na Lista não ordenada.

<HTML>
<HEAD><TITLE>Listas</TITLE></HEAD>
<BODY>
Países da América do Sul com maior área.
<OL>
<LI>Brasil
<LI>Argentina
<LI>Peru
</OL>
</BODY></HTML>

Celta Informática - F: (11) 4331-1586 Página: 31


Programando em HTML

A etiqueta <OL> possui dois atributos: TYPE e START. TYPE determina


o estilo de número que será mostrado pelo navegador, e possui os se-
guintes valores:

1 - número decimal: 1, 2, 3, 4, 5, ...


a - alfabeto minúsculo: a, b, c, d, e, ...
A - alfabeto maiúsculo: A, B, C, D, E, ...
i - números romanos minúsculos: i, ii, iii, iv, v, ...
I - números romanos maiúsculos: I, II, III, IV, V, ...

O atributo START indica qual será o ponto de partida da lista.

<H3>America do Sul</H3>
Países mais populosos
<OL TYPE=I>
<LI>Brasil
<LI>Colômbia
</OL>
Países menos populosos
<OL TYPE=i START=11>
<LI>Quiana
<LI>Suriname
</OL>

Celta Informática - F: (11) 4331-1586 Página: 32


Programando em HTML

Lista de glossário

Esta lista também é chamadas Lista de definição, pois permite incluir


uma descrição de cada item listado. A etiqueta <DL> marca este tipo de
lista, que possui mais duas outras etiquetas para indicar o termo a ser
definido (<DT>) e sua definição (<DD>).

<DL>
<DT>IBGE
<DD>Instituto Brasileiro de Geografia e
Estatística
<DT>INSS
<DD>Instituto Nacional do Seguro Social
<DT>EMBRAPA
<DD>Empresa Brasileira de Pesquisa Agropecuária
</DL>

Podemos utilizar este tipo de lista também para organizar a página, pois
ele permite uma tabulação bem prática do texto.

Celta Informática - F: (11) 4331-1586 Página: 33


Programando em HTML
<DL><FONT SIZE=5>Regiões, estados e maiores
cidades</FONT>
<DT><B>Sul</B>
<DD>Rio Grande do Sul
<DL><DD>Porto Alegre
<DD>Gravataí</DL>
<DD>Santa Catarina
<DL><DD>Blumenau
<DD>Joinvile</DL>
<DD>Paraná
<DL><DD>Curitiba
<DD>Londrina</DL>
<DT><B>Sudeste
<DT>Centro-oeste</B>
</DL>

Como exercício, complete a lista com cidades e estados do sudeste e


centro-oeste brasileiros.

Aninhando e combinando listas

Podemos colocar uma lista dentro de outra (aninhar) de mesmo tipo ou


de tipos diferentes, criando uma estrutura hierárquica de itens e subitens.

No aninhamento de listas não ordenadas, o marcador de linha será alte-


rado automaticamente a cada sub-lista e também cada uma destas será
deslocada mais para direita. Faça o seguinte exemplo:

Celta Informática - F: (11) 4331-1586 Página: 34


Programando em HTML
<HR><B>Aninhamento de listas não ordenadas</B>
<UL>
<LI>Primeiro item principal
<UL>
<LI>Primeiro item secundário
<LI>Segundo item secundário
<UL>
<LI>Item da lista de terceiro nível
</UL>
</UL>
<LI>Segundo item principal
<LI>Terceiro item principal
</UL><HR>

O aninhamento de listas ordenadas funciona da mesma forma para as


listas não ordenadas, bastando apenas trocar a etiqueta <UL> pela <OL>.
Faça esta troca na listagem anterior e veja o resultado dos dois casos na
figura a seguir.

No aninhamento com os dois tipos de listas cria-se uma estrutura mais


elegante e complicada, sendo necessário tomar um certo cuidado no
momento de abrir e fechar cada uma das etiquetas de lista. Por isso é
importante contar as etiquetas de abertura e sua correspondente de fe-
chamento para a listas ficarem conforme você deseja.

<HR><B>Lista de filiais por ordem de rentabilidade</


B>
<UL>
<LI>São Paulo
<OL>
<LI>Santo André
<LI>São Paulo

Celta Informática - F: (11) 4331-1586 Página: 35


Programando em HTML
<UL TYPE=disc>
<LI>Santo Amaro
<LI>Moóca
</UL>
<LI>Votuporanga
</OL>
<LI>Mato-Grosso
<OL START=4>
<LI>Cuiabá
<LI>Rondonópolis
</OL>
<LI>Goiás
<OL><LI VALUE=6>Goiânia</OL>
</UL><HR>

No código desse exemplo usamos os atributos START da lista ordenada


e VALUE da etiqueta <LI> para dar uma continuidade à classificação das
filiais na página. O atributo VALUE funciona para as linhas da lista orde-
nada da mesma forma que START.

A etiqueta <LI> possui também o atributo TYPE que especifica o tipo de


marcador ou de número que será utilizado, dependendo se ela está em
uma lista não ordenada ou ordenada. Faça as seguintes alterações e
veja o resultado:

<UL TYPE=disc>
<LI TYPE=square>Santo Amaro
<LI>Moóca
.
.
.
<LI>Goiás
<OL><LI VALUE=6 TYPE=I>Goiânia</OL>
</UL><HR>

Celta Informática - F: (11) 4331-1586 Página: 36


Programando em HTML
IMAGENS

Todo bom site possui imagens integradas ao texto. Estas imagens aju-
dam a tornar as páginas da Internet mais atraentes para o usuário, moti-
vando ainda mais suas visitas.

Mas ao mesmo tempo que ajudam, as imagens podem atrapalhar se


você não escolher adequadamente o seu tamanho de arquivo e em que
tipo elas serão salvas. Pois para arquivos de imagem muito grandes, a
página demorará para ser visualizada, desmotivando com isso o usuário
que logo pulará para outro site. Por outro lado se esta mesma imagem
for salva em um formato incorreto ela ficará deformada e feia, apesar de
o arquivo ser pequeno. Devido a isto tudo, é importante você conhecer
algum programa que trabalhe e salve suas imagens nos formatos acei-
tos pela WEB, tais como o Macromedia Fireworks e Adobe Photoshop.

Os formatos aceitos pelos navegadores para arquivos de imagens, com-


primem estas a fim de diminuir seu tamanho e tempo de carregamento,
são eles : GIF,JPG e PNG.

GIF - É o formato utilizado para imagens com poucas cores e altos con-
trastes sem perda durante a compressão (lossless), sendo ideal para
ilustrações, gráficos e figuras ou imagens de textos com até 256 cores.
Estes arquivos podem ser entrelaçados permitindo uma visualização
gradativa da imagem indo de uma menor para uma maior qualidade du-
rante o carregamento. O formato GIF permite também fundos transpa-
rentes que causam a impressão de uma integração maior à página sem
dar a aparência de uma caixa. É possível criar também pequenas anima-
ções utilizando diversas imagens GIF juntamente com um programa que
sobrepõe estas imagens a tempo regulares e salvas em um único arqui-
vo GIF, formando o que conhecemos como GIF animado.

JPEG - Este formato é utilizado para conter imagens que possuem mui-
tas cores e uma transição suave entre elas (baixo contraste), como por
exemplo fotografias e arte digitalizada. Ele permite vários graus de
compactação com perda (lossey) da imagem, sendo uma maior
compactação responsável por uma menor qualidade desta. Este forma-
to não é muito bom para figuras com poucas cores pois durante a
compactação o programa força uma transição gradativa entre as cores
dando ao final a impressão de figuras embaçadas.

Celta Informática - F: (11) 4331-1586 Página: 37


Programando em HTML

PNG - Ele é o mais novo formato para arquivos gráficos utilizados na


WEB, suportado somente pelos navegadores da geração 4 em diante,
não sendo visualizado pelos navegadores mais antigos. Os arquivos PNG
combinam as melhores características do GIF e JPEG, pois permitem
transparências e podem conter fotografias exibidas com milhões de co-
res preservando também as cores sólidas e ilustrações com texto,
compactando as imagens sem perda. Geralmente os arquivos PNG são
maiores que os JPEG da mesma imagem sendo recomendados somente
para imagens com baixo contraste (tons contínuos) que contém transpa-
rências.

Quando colocamos imagens em uma página devemos tomar certos cui-


dados quanto ao tempo de carga desta página. Observando que quanto
maior a dimensão e profundidade de cores de uma figura maior será o
tamanho do seu arquivo mesmo com o uso de um dos três formatos
descritos acima, tendo sempre como parâmetro que uma figura com
15Kb leva aproximadamente 6 segundos para ser carregada com um
modem de 28,8Kbps.

A resolução da imagem é outro parâmetro importante pois os monitores


conseguem exibir somente figuras com aproximadamente 72 pixels por
polegada, não adiantando portanto, ter uma imagem com 600x600 pon-
tos por polegada de resolução, fazendo apenas o arquivo ficar enorme
sem nenhum benefício prático.

Celta Informática - F: (11) 4331-1586 Página: 38


Programando em HTML
INSERINDO IMAGENS

Usamos o elemento IMG para inserir imagens na página na linha de tex-


to. Este elemento possui obrigatoriamente o atributo SRC que contém a
localização da imagem, que pode estar tanto no mesmo diretório quanto
em qualquer lugar da WEB. O conjunto destes dois elementos formam a
etiqueta <IMG SRC=”URL_da_imagem”> indicando uma imagem no
código HTML.

O URL é o local da Internet onde a imagem está - seu endereço, por


exemplo: “http://www.america.com.br/brasil.gif”. Quando a imagem esti-
ver no mesmo diretório que o arquivo HTML, não é necessário indicar
todo o endereço bastando apenas informar o nome.

No exemplo a seguir é utilizado o comando IMG para exibir as bandeiras


de alguns países. Repare que estas imagens são tratadas pelo navega-
dor como se fossem caracteres de texto.

<HTML>
<HEAD><TITLE>Imagens</TITLE></HEAD>
<BODY>
<H1>BANDEIRAS</H1>
<IMG SRC=”brasil.gif”>&nbsp&nbsp
<IMG SRC=”guiana.gif”><HR>
<IMG SRC=”argentina.gif”><BR>
<CENTER><IMG SRC=”uruguai.gif”></CENTER><HR>
</BODY>
</HTML>

Celta Informática - F: (11) 4331-1586 Página: 39


Programando em HTML
ATRIBUTOS

Além do atributo SRC, o elemento IMG possui outros atributos opcionais


que determinam o tamanho da imagem, seu alinhamento, como será a
borda e o espaço deixado entre a imagem e outros elementos da página.

ALT - Contém o texto que aparece quando o mouse é passado sobre a


imagem, ou quando ela não é carregada pelo navegador.
ALIGN - Determina o alinhamento da imagem em relação ao texto, e às
laterais da janela do navegador. Podendo ser: top, middle, bottom, left e
right.
USEMAP - É utilizado para indicar que a imagem é um mapa de ima-
gem, e que cada região dela será um link diferente.
WIDTH - Este atributo determina a largura da imagem em pixel, indepen-
dente de seu tamanho original. A imagem será sempre forçada a caber
na dimensão especificada, se WIDTH for menor que a largura da ima-
gem, ela será comprimida e vice-versa. Ele pode ser dado tanto em valor
absoluto quanto em porcentagem do tamanho da janela.
HEIGHT - Determina a altura da imagem e funciona semelhante ao
WIDTH.
BORDER - Especifica a largura da borda da imagem.
VSPACE e HSPACE - Determinam os espaços em branco deixados en-
tre a figura e os outros elementos da página.

<HTML>
<HEAD><TITLE>Imagens</TITLE></HEAD>
<BODY>
<H1>BANDEIRAS</H1>
Esta é a bandeira do Brasil:
<IMG SRC=”brasil.gif” ALT=”Brasil” WIDTH=20%>.
Ela foi criada para a república.<P>
A bandeira da Guiana
( <IMG SRC=”guiana.gif” ALT=”Guiana” ALIGN=middle
WIDTH=50> ) é pouco conhecida por nós.<BR>
</BODY>
</HTML>

Celta Informática - F: (11) 4331-1586 Página: 40


Programando em HTML

O atributo ALIGN alinha a imagem com relação ao texto utilizando os


parâmetros top, middle e bottom. Os parâmetros left e right alinham a
imagem em relação à borda da janela. E caso não seja especificado um
valor para o atributo ALIGN, o padrão será: ALIGN=bottom.

Neste próximo exemplo são utilizados outros parâmetros de ALIGN e


também para borda e espaçamentos. Salve-o com o nome de
guiana.htm.

<HTML>
<HEAD><TITLE>Imagens</TITLE></HEAD>
<BODY>
<H1>GUIANA</H1>
<IMG SRC=”guiana.gif” ALT=”Guiana” ALIGN=left
VSPACE=5 HSPACE=10>
Antigamente uma colônia holandesa, que passa a ser
controlada pelos ingleses em 1815 após grandes
disputas. Rivalidades entre
negros escravos trazidos pelos holandeses,
indianos trazidos pelos ingleses e indígenas
nativos passam a fazer parte do contexto
nacional. Após a independência em 1966, dão inicio
discussões com a Venezuela e o Suriname a respeito
de divisas territoriais, que são resolvidas
diplomaticamente.<P>

Celta Informática - F: (11) 4331-1586 Página: 41


Programando em HTML
<CENTER>
<IMG SRC=”guiana.gif” ALT=”Guiana” BORDER=3>
</CENTER>
</BODY></HTML>

Experimente alterar ALIGN=right e os parâmetros de VSPACE, HSPACE


e BORDER. Altere também o alinhamento do parágrafo:

<P ALIGN=right>Antigamente uma colônia ...


diplomaticamente.</P>

IMAGENS DE FUNDO

A imagem de fundo ou segundo plano elimina o fundo branco ou cinza,


trazendo mais vida às páginas. Ela deve ter o formato de um dos tipos
permitidos na Web e não ser muito grande, evitando uma demora no
carregamento da página.
As imagens utilizadas como fundo (background) podem ser de dimen-
sões pequenas ou do tamanho total da tela. Quando for pequena, o nave-
gador irá repetir esta imagem diversas vezes até completar toda a área

Celta Informática - F: (11) 4331-1586 Página: 42


Programando em HTML
visível da página, enquanto que a de dimensões maiores não será repe-
tida, desde que ela seja maior ou igual a área visível da janela do navega-
dor.

Mesmo ocupando toda a área visível, as diversas cópias das figuras pe-
quenas serão transmitidas pelo servidor apenas uma única vez, ficando
o navegador responsável pela sua repetição.

Como exemplo vamos utilizar uma figura pequena chamada fundo1.gif e


uma maior com o nome de fundo2.jpg.

A figura de fundo é adicionada ao código HTML utilizando-se o parâmetro


BACKGROUND da etiqueta BODY juntamente com o URL da imagem
desejada.

<BODY BACKGROUND=”ULR”>

Aproveite o exercício anterior incluindo nele a figura fundo1.gif como fun-


do.

<HEAD><TITLE>Imagens</TITLE></HEAD>
<BODY BACKGROUND=”fundo1.gif”>
<H1>GUIANA</H1>

Celta Informática - F: (11) 4331-1586 Página: 43


Programando em HTML

Utilizando os atributos de BODY podemos definir uma imagem de fundo,


como vimos, alterar a cor de fundo do documento e mudar a cor do texto
e dos links. As cores são atribuídas da mesma forma que é feita para
mudar a cor da fonte, podendo usar tanto o padrão RGB quanto as vari-
áveis predefinidas.

Os atributos de BODY são:

BACKGROUND - URL da figura de fundo do documento


BGCOLOR - cor de fundo do documento
TEXT - cor do texto, padrão=preto
LINK - cor do link, padrão=azul
VLINK - cor do link visitado, padrão=vermelho-púrpura
ALINK - cor do link ativo

No exemplo a seguir, a figura fundo2.jpg é o fundo com o texto em branco


(white). Repare que a cor do fundo foi alterada para azul, no caso de o
servidor não encontrar a figura de fundo, tornando o texto ilegível em um
fundo padrão branco. E as cores dos links não foram alteradas, e nem é
bom fazer isso, pois os usuários já estão acostumados com as cores
padrão.

Celta Informática - F: (11) 4331-1586 Página: 44


Programando em HTML
<HEAD><TITLE>Imagens</TITLE></HEAD>
<BODY BACKGROUND=”fundo2.jpg” TEXT=white BGCOLOR=blue>
<H1>GUIANA</H1>

IMAGENS MAPEADAS

As imagens mapeadas possuem regiões delimitadas pelo código HTML


que servem como referência ao acesso à outros documentos a partir de
um clique sobre cada região.

Existem três tipos de delimitação de áreas: retangular, circular e poligonal.


Para delimitar cada região, devemos informar um grupo de coordenadas
que depende do formato de cada região escolhida. São elas:

Retângulo = esquerda, topo, direita, base (x , y , x , y )


1 1 2 2
Polígono = x , y , x , y , ..., x , y (x , y , x , y , x , y )
1 1 2 2 N N 1 1 2 2 3 3
Círculo = centro , centro , raio (x , y ,r)
X Y 1 1

Celta Informática - F: (11) 4331-1586 Página: 45


Programando em HTML

Como vimos anteriormente, a Tag IMG possui o atributo USEMAP indi-


cando que a imagem é um mapa e qual o nome do mapa de coordena-
das ela deverá utilizar.

O mapa é definido pela Tag <MAP NAME=”nome do mapa”> que con-


tém uma outra Tag responsável pelas definições de cada região e suas
coordenadas chamada AREA.

A seguir são apresentados as principais atributos da Tag AREA:

SHAPE - Determina a forma geométrica da área, podendo ser: rect,


circle, poly e default. Default é utilizada para indicar o restante da ima-
gem.
COORDS - São as coordenadas de cada região.
HREF - Contém o URL que será solicitado quando o usuário der um
clique na região delimitada.
ALT - Texto alternativo que aparece, caso a figura não possa ser exibida
ou quando o ponteiro do mouse ficar parado por alguns instantes sobre a
região.

Faça o exemplo a seguir, utilizando a figura mapa_robo.gif como um


mapa chamado mapa:

<HTML>
<HEAD><TITLE>Mapas</TITLE></HEAD>
<BODY>
<H2>Figura mapeada</H2>
<IMG SRC=”mapa_robo.gif” USEMAP=”#mapa”>
<MAP NAME=”mapa”>
<AREA SHAPE=circle COORDS=”41,65,22"
ALT=”olho direito”>
<AREA SHAPE=circle COORDS=”106,64,22"
ALT=”olho esquerdo”>
<AREA SHAPE=poly COORDS=”78,26,62,88,78,83"

Celta Informática - F: (11) 4331-1586 Página: 46


Programando em HTML
ALT=”nariz”>
<AREA SHAPE=rect COORDS=”4,23,151,101"
ALT=”rosto”>
<AREA SHAPE=poly COORDS=”13,22,26,3,45,12,58,3,
76,13,93,3,115,15,134,3,145,22" ALT=”coroa”>
</MAP>
</BODY>
</HTML>

As coordenadas dessa figura podem ser obtidas através do Photoshop ou


Fireworks, posicionando-se o ponteiro do mouse sobre os vértices e ano-
tando suas coordenadas.

Mais a frente, veremos uma figura mapeada com ligações para diversas
páginas, que será criada com um programa específico para mapear figuras.

Celta Informática - F: (11) 4331-1586 Página: 47


Programando em HTML
LIGAÇÕES (LINKS)

Os documentos apresentados na Internet possuem o conceito hipertexto,


que são páginas a partir das quais podemos acessar qualquer outra pá-
gina, ou trechos, não importando em que local da Internet ela esteja. O
uso do hipertexto também facilita a edição de documentos longos, pois o
usuário pode facilmente ir de um ponto ao outro, acessando tópicos ou
seções com apenas um clique.

Essas ligações entre documentos HTML são chamadas de hypertext


links ou hiperlinks (ligação de hipermídia) ou simplesmente links. Que
são ligações entre dois pontos, a fonte e o destino.

A fonte de uma hiperligação é comumente chamada apenas de link, que


o navegador destaca geralmente em azul e sublinhado, indicando que
são ligações de hipertexto. Este link pode ser qualquer texto ou imagem
que ao ser clicado levará o usuário até o destino.

O destino ou âncora é um ponto de referência de um documento ou


endereço que será acessado por um link quando o usuário der um clique
nele e pode ser de qualquer formato de mídia eletrônica (arquivo de texto,
imagem, vídeo, HTML e outros). Existem âncoras para arquivos e para
trechos de documentos.

LINKS PARA ARQUIVOS

Âncoras locais são aquelas que estão no mesmo site do link que as
chama, ou seja, estão no mesmo diretório ou em subdiretórios do diretório
onde está o documento principal.

Para construir um link utilizamos a Tag <A>, e seus principais parâmetros:

HREF - Contém o URL do documento de destino - o arquivo eletrônico a ser


acessado.
NAME - Determina o nome do destino a ser acessado por um link - âncora.

<A HREF=”destino”>link</A> ou; <A NAME=”nome”>âncora</A>

Celta Informática - F: (11) 4331-1586 Página: 48


Programando em HTML
Vamos agora criar um documento HTML que possui um link para a pági-
na guiana.hmt construída anteriormente.

<HTML>
<HEAD><TITLE>Países</TITLE></HEAD>
<BODY>
<H1>Países</H1>
A <A HREF=”guiana1.htm”>Guiana</A> foi colonizada
pelos ingleses.
</BODY>
</HTML>

Caso o arquivo desejado esteja em um diretório abaixo ou acima, utiliza-


mos o mesmo esquema de caminhos parecidos com o DOS, conside-
rando o diretório atual para iniciar as buscas. Suponha a seguinte árvore
de pastas:

Se a página que estiver na pasta paises contém um link para uma ima-
gem da subpasta america, este link deverá ter a seguinte sintaxe:

<A HREF=”america/imagens/praia.jpg”> texto </A>

Caso uma página na pasta america tenha um link para uma imagem da
Europa, é necessário subir um nível com “../” e depois descer até imagens:

<A HREF=”../europa/imagens/praia.jpg”> texto </A>

Celta Informática - F: (11) 4331-1586 Página: 49


Programando em HTML
E para subir dois níveis e descer um, se a imagem estiver na pasta
simbolos:

<A HREF=”../../simbolos/praia.jpg”> texto </A>

Os caminhos para os links criados anteriormente são chamados Links


relativos, pois informam a localização completa do arquivo desejado
tendo apenas como base o diretório da arquivo ativo. Os links podem
conter também o caminho completo do arquivo, quando são chamados
Links absolutos, úteis quando tem-se a certeza de que o arquivo de
destino não terá sua localização modificada.

Um exemplo de Link absoluto seria:

<A HREF=”http://www.cce.ufsc.br/index.htm”>
Universidade </A>

No parâmetro HREF podemos utilizar outros tipos de URL da Internet,


tais como o ftp, gopher ou um URL para o correio eletrônico, que ao ser
acionado pelo usuário, abre uma nova mensagem no programa de cor-
reio eletrônico do seu sistema, com o destinatário determinado pelo link.
Por exemplo:

<A HREF=”gopher://penta.ufrgs.br/”>Univ Fed do Rio


Grande do Sul</A>
<A HREF=”ftp://ftp.netscape.com/pub/”>Download
Netscape</A>
<A HREF=”mailto:meunome@servidor.com.br”>Meunome</
A>

No link para o correio eletrônico podemos incluir um textos automatica-


mente, no campo assunto ou um texto padrão.

Para incluir um assunto faça o seguinte:

<A
HREF=”mailto:alguem@serv.com.br?SUBJECT=Convite”>
Convite</A>

E inclua um texto padrão na mensagem, acrescentando &BODY= e o


texto, da seguinte forma:
<A HREF=”mailto:alguem@ser.com.br?SUBJECT=Convite
&BODY=Quero receber o convite para seu próximo
evento.”>Convite</A>

Celta Informática - F: (11) 4331-1586 Página: 50


Programando em HTML
LINKS PARA SEÇÕES DE DOCUMENTOS

Além de acessar arquivos completos através de um link, podemos tam-


bém acessar seções específicas do documento. Este recurso permite
uma navegação mais rápida em documentos longos, pois através do
sumário, podemos ir direto ao assunto desejado.

Primeiro devemos criar os links e depois nomear um trecho do docu-


mento ou imagem como âncora. Siga o exemplo:

<HTML>
<HEAD><TITLE>Países</TITLE></HEAD>
<BODY>
<A NAME=topo><H1>Países</H1></A>
<UL>
<LI><A HREF=”#argentina”>Argentina</A>
<LI><A HREF=”#brasil”>Brasil</A>
<LI><A HREF=”#guiana”>Guiana</A>
</UL><HR><BR><BR><BR><BR><HR>
<A NAME=”argentina”><FONT SIZE=5
COLOR=navy>Argentina</FONT></A><P>
A Argentina é um dos países que fazem fronteira
com o Brasil.<BR>
<P ALIGN=right><A HREF=”#topo”>Voltar</A>
<HR SIZE=5><BR><BR><BR><BR><HR>
<A NAME=”brasil”><FONT SIZE=5 COLOR=navy>Brasil
</FONT></A><P>
O Brasil é o maior país da América do sul.<BR>
<P ALIGN=right><A HREF=”#topo”>Voltar</A>
<HR SIZE=5><BR><BR><BR><BR><HR>
<A NAME=”guiana”><FONT SIZE=5 COLOR=navy>Guiana
</FONT></A><P>
Até hoje a Guiana ainda apresenta problemas de
fronteiras.<BR>
<P ALIGN=right><A HREF=”#topo”>Voltar</A>
<HR SIZE=5>
</BODY>
</HTML>

Celta Informática - F: (11) 4331-1586 Página: 51


Programando em HTML

Como dito anteriormente, as imagens também podem ser links da mes-


mo forma que o texto, servindo tanto como origem quanto destino de um
hiperlink.

Altere o último exercício eliminando a lista inicial para formar outra com
ícones antes do nome de cada país, que levarão o usuário para uma
seção com a bandeira do país correspondente.
<HTML>
<HEAD><TITLE>Países</TITLE></HEAD>
<BODY>
<A NAME=topo><H1>Países</H1></A>
<A HREF=”#bandargentina”><IMG SRC=”bandeira.gif”
HSPACE=5></A>
<A HREF=”#argentina”>Argentina</A><BR>
<A HREF=”#bandbrasil”><IMG SRC=”bandeira.gif”
HSPACE=5></A>
<A HREF=”#brasil”>Brasil</A><BR>
<A HREF=”#bandguiana”><IMG SRC=”bandeira.gif”
HSPACE=5></A>
<A HREF=”#guiana”>Guiana</A><BR>
<HR><BR><BR><BR><BR><HR>

Celta Informática - F: (11) 4331-1586 Página: 52


Programando em HTML
<A NAME=”argentina”><FONT SIZE=5 COLOR=navy>
Argentina</FONT></A><P>
A Argentina é um dos países que fazem fronteira
com o Brasil.<BR>
<P ALIGN=right><A HREF=”#topo”>Voltar</A>
<HR SIZE=5><BR><BR><BR><BR><HR>
<A NAME=”brasil”><FONT SIZE=5 COLOR=navy>Brasil
</FONT></A><P>
O Brasil é o maior país da América do Sul.<BR>
<P ALIGN=right><A HREF=”#topo”>Voltar</A>
<HR SIZE=5><BR><BR><BR><BR><HR>
<A NAME=”guiana”><FONT SIZE=5 COLOR=navy>Guiana
</FONT></A><P>
Até hoje a Guiana ainda apresenta problemas de
fronteiras.<BR>
<P ALIGN=right><A HREF=”#topo”>Voltar</A>
<HR SIZE=5><BR><BR><BR><BR><HR>
<A NAME=”bandargentina”>
<IMG SRC=”argentina.gif”></A><P>
<A NAME=”bandbrasil”><IMG SRC=”brasil.gif”></
A><P>
<A NAME=”bandguiana”><IMG SRC=”guiana.gif”></A>
</BODY>
</HTML>

Celta Informática - F: (11) 4331-1586 Página: 53


Programando em HTML
Repare que quando a imagem é um link, ela é envolvida por uma moldura
da mesma cor que um link de texto.

Também pode existir hiperlink ligando um documento e uma seção de


outro. Vamos supor que no exercício anterior, os textos sobre os países
estivessem em outro documento HTML, para acessarmos uma das se-
ções deste segundo documento necessitaríamos construir um hiperlink
com o atributo HREF contendo o nome do arquivo e sua respectiva se-
ção:

<A HREF=”arquivo.htm#seção>

Divida o exercício anterior em dois arquivo HTML, um deles só com os


nomes dos países, chamado: index.htm, e o outro com o restante, cha-
mado: texto.htm. Faça as alterações listadas a seguir.

index.htm
<HTML><HEAD><TITLE>Países</TITLE></HEAD>
<BODY>
<A NAME=topo><H1>Países</H1></A>
<A HREF=”texto.htm#bandargentina”>
<IMG SRC=”bandeira.gif” HSPACE=5></A>
<A HREF=”texto.htm#argentina”>Argentina</A><BR>
<A HREF=”texto.htm#bandbrasil”>
<IMG SRC=”bandeira.gif” HSPACE=5></A>
<A HREF=”texto.htm#brasil”>Brasil</A><BR>
<A HREF=”texto.htm#bandguiana”>
<IMG SRC=”bandeira.gif” HSPACE=5></A>
<A HREF=”texto.htm#guiana”>Guiana</A><P>
</BODY></HTML>

texto.htm
<HTML><HEAD><TITLE>Texto</TITLE></HEAD>
<BODY>
<A NAME=”argentina”><FONT SIZE=5
COLOR=navy>Argentina</FONT></A><P>
A Argentina é um dos países que fazem fronteira
com o Brasil.<BR>
<P ALIGN=right><A HREF=”index.htm#topo”>Voltar</A>
<HR SIZE=5><BR><BR><BR><BR><HR>

Celta Informática - F: (11) 4331-1586 Página: 54


Programando em HTML
<A NAME=”brasil”><FONT SIZE=5 COLOR=navy>Brasil
</FONT></A><P>
O Brasil é o maior país da América do Sul.<BR>
<P ALIGN=right><A HREF=”index.htm#topo”>Voltar</
A>
<HR SIZE=5><BR><BR><BR><BR><HR>
<A NAME=”guiana”><FONT SIZE=5 COLOR=navy>Guiana
</FONT></A><P>
Até hoje a Guiana ainda apresenta problemas de
fronteiras.<BR>
<P ALIGN=right><A HREF=”index.htm#topo”>Voltar</
A>
<HR SIZE=5><BR><BR><BR><BR><HR>
<A NAME=”bandargentina”>
<IMG SRC=”argentina.gif”></A><P>
<A NAME=”bandbrasil”><IMG SRC=”brasil.gif”></
A><P>
<A NAME=”bandguiana”><IMG SRC=”guiana.gif”></A>
</BODY></HTML>

HIPERLINK COM IMAGEM MAPEADA

A imagem mapeada também pode ser um link, tendo cada uma de suas
regiões associada a uma determinada âncora, que pode estar tanto no
mesmo documento quanto em qualquer outro lugar na Internet.

No tópico referente à imagens, construímos uma imagem mapeada ma-


nualmente sem o uso de um programa específico para isso. Mas desta
vez iremos utilizar um programa chamado Map This.

O Map This é um programa freeware que você encontra no endereço


abaixo, ou em algum site de busca.

http://xoom.com/helpcenter/mapthis/mainmenu

Esse programa faz somente o mapa da figura não realizando qualquer


modificação nela. Após a abertura do programa, clique no menu File >>
New e escolha a figura que servirá como plano de fundo do mapa.

Celta Informática - F: (11) 4331-1586 Página: 55


Programando em HTML

Como exemplo escolha a figura mapa_robo.gif utilizada anteriormente


como modelo de mapa.

Esta programa possui botões na barra de ferramentas associados aos


parâmetros do atributo SHAPE da tag AREA e outros botões operacionais
que são os seguintes:

- Usado para criar áreas retangulares no mapa.

- Cria áreas circulares no mapa.

- Usado para criar áreas não uniformes que possuem vários vérti-
ces.
- A Arrow é usada para selecionar, mover, editar e redimensionar
áreas do mapa.
- Edita as informação da área selecionada.

- Apaga a área selecionada.

Celta Informática - F: (11) 4331-1586 Página: 56


Programando em HTML
Para demarcar um retângulo (RECT), clique no botão específico e arras-
te o ponteiro do canto superior esquerdo até o canto inferior direito da
área que deseja demarcar. No exemplo, o rosto do robô.

A área circular (CIRCLE) é feita arrastando o ponteiro a partir do centro


da região a ser demarcando até sua periferia.

Um polígono (POLY) é demarcado com um clique em cada um dos seus


vértices, fechando ele com um duplo-clique no último vértice.

Demarque todas as áreas do robô como mostra a figura abaixo. Sendo


que o retângulo deverá ser feito primeiro, pois senão o usuário não terá
acesso aos círculos que estarão sobrepostos.

Celta Informática - F: (11) 4331-1586 Página: 57


Programando em HTML
Após demarcar todas áreas, clique no botão seta da barra de ferramen-
tas e clique-direito em um dos círculos, escolhendo a opção Edit Area
Info do pop menu.

Na caixa de diálogo Area Setting, determine o URL que será chamado quan-
do for dado um clique nesta área. E na caixa de texto Internal comment
about this area, escreva o texto alternativo mostrado quando o ponteiro
ficar sobre a área ou se a figura não for carregada pelo navegador.

No exemplo iremos construir quatro links, para os seguintes locais: duas


páginas, uma figura e uma âncora na mesma página. Siga a tabela abai-
xo para definir os parâmetros de cada uma das áreas:

Objeto URL Comentário


Círculos olho.htm Olho
Polígono #nariz Nariz
Polígono cabelo.jpg Cabelo
Retângulo rosto.htm Rosto

Após estas definições Map This nos oferece a possibilidade de testar o


mapa construído, onde ao passar o ponteiro sobre uma área, a URL as-
sociada será exibida na barra de status.

A partir do menu Goodies >> Test Map... abra a janela de teste verifi-
cando se todas as áreas estão corretas e quando estiver acabado o tes-
te, clique no botão Done. Caso alguma área não esteja de acordo com
os seus propósitos, basta selecioná-la e editar arrastando um dos seus
pontos de delimitação ou então apagá-la para fazer uma nova área.

Celta Informática - F: (11) 4331-1586 Página: 58


Programando em HTML

Quando o mapa estiver do seu gosto, clique no menu File >> Save e na
caixa de diálogo Setting for this Mapfile dê o nome cabeca_robo para
o mapa, escreva seu nome como autor e na caixa de texto Default URL
digite “#fora” para âncora quando o usuário clicar em uma região não
mapeada da figura.

Salve o mapa com o nome de cara_robo.htm e o formato (File Format)


HTML. Feche o Map This e abra o arquivo cara_robo.htm com o seu
editor de HTML ou com o Bloco de Notas do Windows. Este arquivo deve
estar parecido com a listagem mostrada a seguir.

<BODY>
<MAP NAME=”cabeca_robo”>
<!— #$-:Image Map file created by Map THIS! —>
<!— #$-:Map THIS! free image map editor by Todd
C. Wilson —>
<!— #$-:Please do not edit lines starting
with “#$” —>
<!— #$VERSION:1.30 —>
<!— #$AUTHOR:Eu mesmo —>
<!— #$DATE:Tue Sep 05 10:19:11 2000 —>
<!— #$PATH:C:\Meus documentos\ —>
<!— #$GIF:mapa_robo.gif —>
<AREA SHAPE=CIRCLE COORDS=”41,64,22"
HREF=”olho.htm” ALT=”Olho”>
<AREA SHAPE=CIRCLE COORDS=”105,64,22"
HREF=”olho.htm” ALT=”Olho”>
<AREA SHAPE=POLY

Celta Informática - F: (11) 4331-1586 Página: 59


Programando em HTML
COORDS=”14,22,26,3,45,12,57,3,76,12,93,3,115,
15,134,2,146,23,14,22,14,22" HREF=”cabelo.jpg”
ALT=”Cabelo”>
<AREA SHAPE=POLY
COORDS=”78,27,79,85,62,90,78,27,78,27"
HREF=”#nariz” ALT=”Nariz”>
<AREA SHAPE=RECT COORDS=”3,24,153,102"
REF=”rosto.htm” ALT=”Rosto”>
<AREA SHAPE=default HREF=”#fora”>
</MAP></BODY>

Mas observe que o Map This fez somente o mapa para nós. Agora para
tornar este mapa funcional, precisamos indicar qual é a figura de base,
como fizemos anteriormente no tópico de figuras, e completar o código
para uma página completa.

<HTML><HEAD><TITLE>Cabeça do robô</TITLE></HEAD>
<BODY>
<IMG SRC=”mapa_robo.gif” USEMAP=”#cabeca_robo”>
<MAP NAME=”cabeca_robo”>
<!— #$-:Image Map file created by Map THIS! —>
<!— #$-:Map THIS! free image map editor by
Todd C. Wilson —>
<!— #$-:Please do not edit lines starting
with “#$” —>
<!— #$VERSION:1.30 —>
<!— #$AUTHOR:Eu mesmo —>
<!— #$DATE:Tue Sep 05 10:19:11 2000 —>
<!— #$PATH:C:\Meus documentos\ —>
<!— #$GIF:mapa_robo.gif —>
<AREA SHAPE=CIRCLE COORDS=”41,64,22"
HREF=”olho.htm” ALT=”Olho”>
<AREA SHAPE=CIRCLE COORDS=”105,64,22"
HREF=”olho.htm” ALT=”Olho”>
<AREA SHAPE=POLY
COORDS=”14,22,26,3,45,12,57,3,76,12,93,3,
115,15,134,2,146,23,14,22,14,22"
HREF=”cabelo.jpg” ALT=”Cabelo”>
<AREA SHAPE=POLY
COORDS=”78,27,79,85,62,90,78,27,78,27"

Celta Informática - F: (11) 4331-1586 Página: 60


Programando em HTML
HREF=”#nariz” ALT=”Nariz”>
<AREA SHAPE=RECT COORDS=”3,24,153,102"
HREF=”rosto.htm” ALT=”Rosto”>
<AREA SHAPE=default HREF=”#fora”>
</MAP>
<HR SIZE=20>
<A NAME=”nariz”><H3>Nariz</H3></A>
O nariz do robô é apenas um enfeite, sem nenhuma
pretensão de funcionar como o nariz dos
animais.<P>
Você clicou numa <A NAME=”fora”>área</A> sem
link.
</BODY></HTML>

Faça por sua conta uma página que fale sobre os olhos e outra para o
rosto, chamadas olho.htm e rosto.htm respectivamente, para testar
completamente o funcionamento do mapa que acabamos de construir.

Celta Informática - F: (11) 4331-1586 Página: 61


Programando em HTML
TABELAS

As tabelas são utilizadas para controlar vários aspectos da formatação


de uma página, organizando informações através de linhas e colunas.
Com elas podemos criar layouts de páginas utilizando-as para demarcar
regiões onde serão colocados textos e figuras.

Uma tabela é construída com a tag <TABLE> e </TABLE> que marcam


o seu início e fim. E pelas tags <TR> e <TD> que informam onde come-
çam as linhas e colunas.

A tabela é construída linha a linha com a tag <TR> indicando o início de


uma linha. E para cada coluna nesta linha, utilizamos a tag <TD>, for-
mando com isso uma célula.

Na listagem a seguir temos o exemplo de uma tabela simples com qua-


tro linhas e três colunas. Digite este código complementando-o com os
elementos básicos de uma página HTML.

<TABLE>
<TR>
<TD>País
<TD>População
<TD>Área
</TR>
<TR>
<TD>Argentina
<TD>34.000
<TD>2.780
</TR>
<TR>
<TD>Brasil
<TD>157.070
<TD>8.547
</TR>

Celta Informática - F: (11) 4331-1586 Página: 62


Programando em HTML
<TR>
<TD>Colômbia
<TD>35.700
<TD>1.140
</TR>
</TABLE>

A tag TABLE possui os atributos BORDER, que determina a espessura


das bordas da tabela em pixel, e ALIGN, que informa a posição de exibi-
ção da tabela no navegador.

As tags TD e TR possuem dois atributos que determinam o alinhamento


do texto para toda a linha (TR) ou somente para determinada célula (TD).
Um deles, o ALIGN informa o alinhamento horizontal e o VALIGN deter-
mina o alinhamento vertical.

BORDER = pixel
ALIGN = [ left | center | right ] (valores para a tag TR)
ALIGN = [ left | center | right | justify ] (valores para a tag TD)
VALIGN=[ top | middle | bottom ]

Quando o atributo BORDER é informado sem nenhum valor, o navega-


dor constrói a tabela com borda igual a um pixel.

Altere o código da página anterior implementando os recursos de borda e


alinhamento. No próximo exemplo temos também como novidade a tag
<TH> que é utilizada para construir células da mesma forma que a tag
<TD>, informando que a célula é um título, centralizando e colocando
negrito em seu conteúdo.
Celta Informática - F: (11) 4331-1586 Página: 63
Programando em HTML
<TABLE BORDER ALIGN=center>
<TR>
<TH>País
<TH>População
<TH>Área
</TR>
<TR>
<TD>Argentina
<TD ALIGN=right>34.000
<TD ALIGN=right>2.780
</TR>
<TR>
<TD>Brasil
<TD ALIGN=right>157.070
<TD ALIGN=right>8.547
</TR>
<TR>
<TD>Colômbia
<TD ALIGN=right>35.700
<TD ALIGN=right>1.140
</TR>
</TABLE>

Celta Informática - F: (11) 4331-1586 Página: 64


Programando em HTML
Uma célula pode conter texto, figuras, figuras mapeadas e qualquer ou-
tro objeto permitido em uma página HTML. Para inserir uma imagem na
célula, basta utilizar a tag IMG logo após a tag TD.

ANINHANDO TABELAS

As tabelas também podem ser aninhadas, contendo uma tabela dentro


de outra e assim sucessivamente. Fazemos isso colocando a definição
de uma tabela dentro de uma célula.

<TABLE>
<TR>
<TD><TABLE>conteúdo da segunda tabela</TABLE>
<TD><TABLE>conteúdo da terceira tabela</TABLE>
</TR>
</TABLE>

Inclua mais algumas linhas no exemplo anterior, para colocar a nossa


primeira tabela dentro de uma tabela maior sem bordas, contendo uma
célula com uma imagem.

<TABLE>
<TR>
<TD><IMG SRC=”america_sul3.gif”>
<TD>
<TABLE BORDER>
<TR>
<TH>País

Celta Informática - F: (11) 4331-1586 Página: 65


Programando em HTML
<TH>População
<TH>Área
</TR>
<TR>
<TD>Argentina
<TD ALIGN=right>34.000
<TD ALIGN=right>2.780
</TR>
<TR>
<TD>Brasil
<TD ALIGN=right>157.070
<TD ALIGN=right>8.547
</TR>
<TR>
<TD>Colômbia
<TD ALIGN=right>35.700
<TD ALIGN=right>1.140
</TR>
</TABLE>
</TABLE>

Enquanto construímos tabelas aninhadas, é muito importante observar-


mos a abertura e fechamento de cada uma delas para uma perfeita
visualização. E também prestar bastante atenção à quantidade de colu-
nas de cada tabela, pois para cada linha teremos que ter o mesmo nú-
mero de colunas ou células que nas outras linhas da mesma tabela.

Celta Informática - F: (11) 4331-1586 Página: 66


Programando em HTML
MESCLANDO CÉLULAS

Em uma tabela HTML podemos mesclar células umas com as outras da


mesma forma que no editor de texto. As células da tabela são mescla-
dos quando usamos os atributos ROWSPAN e COLSPAN das tags TD e
TH.

ROWSPAN = número
COLSPAN = número

Quando você desejar que uma determinada célula ocupe duas ou mais
linhas é necessário utilizar o atributo ROWSPAN juntamente com a tag
TD informando quantas linhas esta célula ocupará.

Altere a página do nosso exemplo incluindo mais uma coluna com uma
célula mesclando duas linhas.

<TABLE>
<TR>
<TD BGCOLOR=silver><IMG SRC=”america_sul3.gif”>
<TD>
<TABLE BORDER>
<TR>
<TH>País
<TH>População
<TH>Área
<TH>Idioma
</TR>
<TR>
<TD>Brasil
<TD ALIGN=right>157.070
<TD ALIGN=right>8.547
<TD>Português
</TR>

Celta Informática - F: (11) 4331-1586 Página: 67


Programando em HTML
<TR>
<TD>Argentina
<TD ALIGN=right>34.000
<TD ALIGN=right>2.780
<TD ROWSPAN=2 VALIGN=top>Espanhol
</TR>
<TR>
<TD>Colômbia
<TD ALIGN=right>35.700
<TD ALIGN=right>1.140
</TR>
</TABLE>
</TR>
</TABLE>

Na listagem anterior a célula que contém o mapa está com a cor de


fundo alterada pela atributo BGCOLOR. Na tag TD este atributo funciona
da mesma forma quando o usamos para colorir o fundo da página. As
tags TABLE e TR também podem ter sua cor de fundo alterada, sendo
que <TABLE BGCOLOR=xxxx> altera a cor de toda tabela, e <TR
BGCOLOR=xxxx> altera a cor de fundo da linha. A definição de cor para
a célula sobrepõe a cor da linha que por sua vez sobrepõe a cor dada
para a tabela.

Como dito anteriormente, as células podem ser mescladas ocupando,


além de linhas, duas ou mais colunas utilizando-se o atributo COLSPAN.

Celta Informática - F: (11) 4331-1586 Página: 68


Programando em HTML

No exemplo a seguir, utilizamos várias cores para cada uma das tags
que compõem a tabela e mesclamos duas células em linha e mais duas
em coluna..

<TABLE BORDER BGCOLOR=#cccccc>


<TR BGCOLOR=#999999>
<TH>País
<TH>Idioma
<TH>População(mil)
<TH>Área(mil Km<SUP>2</SUP>)
</TR>
<TR>
<TD BGCOLOR=#333333><FONT COLOR=white>Brasil
</FONT>
<TD>Português
<TD ALIGN=right>157.070
<TD ALIGN=right>8.547
</TR>
<TR>
<TD>Argentina
<TD ROWSPAN=2>Espanhol
<TD ALIGN=right>34.000
<TD ALIGN=right>2.780
</TR>
<TR>
<TD>Colômbia
<TD ALIGN=right>35.700
<TD ALIGN=right>1.140
</TR>
<TR>
<TD COLSPAN=2 ALIGN=center>
<FONT COLOR=red><B>Total</B></FONT>
<TD ALIGN=right><B>226.770</B>
<TD ALIGN=right><B>12.467</B>
</TR></TABLE>
Celta Informática - F: (11) 4331-1586 Página: 69
Programando em HTML

ALTERANDO DIMENSÕES

Quando uma tabela é criada, as dimensões das linhas e colunas são


determinadas pelo maior conteúdo existente na célula. Na célula que
contém o mapa, é ela que especifica a altura de toda a linha, e nas colu-
nas “População” e ‘Área” são os títulos que determinam a largura de to-
das as linhas abaixo deles.

Para alterar o tamanho das células e da tabela utilizamos o atributo


WIDTH, que pode ser informado em porcentagem ou em pixels. Sendo
que na tag TABLE a largura proporcional é em relação à dimensão da
janela do navegador e na tag TD esta proporção é em relação à largura
da tabela.

O uso das larguras proporcional e absoluta é mostrado nos dois exem-


plos a seguir.

Exemplo 1
<TABLE BORDER=2 WIDTH=330 BGCOLOR=#f0f0ff>
<TR>
<TH BGCOLOR=silver WIDTH=25>&nbsp <TH>A <TH>B <TH>C
</TR>
<TR>
<TH>1 <TD>Célula A1 <TD>Célula B1 <TD>Célula C1
</TR>
<TR>
<TH>2 <TD>Célula A2 <TD>Célula B2 <TD>Célula C2
</TR></TABLE>

Celta Informática - F: (11) 4331-1586 Página: 70


Programando em HTML

A linha da tabela pode ter sua altura modificada pelo atributo HEIGHT
funcionando da mesma forma que WIDTH.

Exemplo 2
<TABLE BORDER=2 WIDTH=60% BGCOLOR=#f0f0ff>
<TR>
<TH BGCOLOR=silver WIDTH=10%>&nbsp
<TH WIDTH=40%>A <TH>B <TH>C
</TR>
<TR>
<TH>1 <TD>Célula A1 <TD>Célula B1 <TD>Célula C1
</TR>
<TR>
<TH HEIGHT=43>2 <TD>Célula A2
<TD>Célula B2 <TD>Célula C2
</TR>
</TABLE>

Para afastar uma célula de outra usamos o atributo CELLSPACING jun-


tamente com um número que determina a distância entre elas. O atribu-
to CELLPADDING causa o afastamento do conteúdo da célula e sua
borda, indicado também por um número de pixels.

Celta Informática - F: (11) 4331-1586 Página: 71


Programando em HTML
<TABLE BORDER CELLPADDING=5 CELLSPACING=0>
<TR>
<TH BGCOLOR=silver>&nbsp <TH>A <TH>B <TH>C
</TR>
<TR>
<TH>1 <TD>Célula A1 <TD>Célula B1 <TD>Célula C1
</TR>
<TR>
<TH HEIGHT=43>2 <TD>Célula A2
<TD>Célula B2 <TD>Célula C2
</TR>
</TABLE>

Em algumas tabelas temos a necessidade de incluir uma legenda na


parte superior ou inferior delas para mostrar um título ou a fonte dos seus
dados. Em uma página HTML as legendas são feitas pela tag CAPTION
colocada dentro de uma definição de tabela (<TABLE> ... </TABLE>).
Esta tag possui o atributo ALIGN e seus seguintes valores:

ALIGN=[ top | bottom | left | right ]

<TABLE BORDER>
<CAPTION ALIGN=top><B>AMÉRICA DO SUL</B></CAPTION>
<CAPTION ALIGN=bottom>População em mil
habitantes<BR>Área em mil Km<SUP>2</SUP>
</CAPTION>
<TR><TD COLSPAN=3 ALIGN=center>MAIORES
<TD COLSPAN=3 ALIGN=center>MENORES</TR>
<TR><TD ROWSPAN=2>
<IMG SRC=”brasil.gif”><TD>Pop.<TD>157.070

Celta Informática - F: (11) 4331-1586 Página: 72


Programando em HTML
<TD ROWSPAN=2>
<IMG SRC=”suriname.gif”><TD>Pop.<TD>410</TR>
<TR><TD>Área<TD>8.547<TD>Área<TD>163</TR>
<TR><TD ROWSPAN=2>
<IMG SRC=”argentina.gif”><TD>Pop.<TD>34.000
<TD ROWSPAN=2>
<IMG SRC=”uruguai.gif”><TD>Pop.<TD>3.220</TR>
<TR><TD>Área<TD>2.780<TD>Área<TD>176</TR>
</TABLE>

IMAGEM DE FUNDO

Para inserir uma imagem de fundo numa tabela, utilizamos o atributo


BACKGROUND com seu valor igual o URL da imagem desejada, como
utilizado para página.

No exemplo seguinte, está sendo utilizado o atributo BACKGROUND


para colocar uma imagem no fundo da tabela e também links sob o mapa
de cada país que levarão o usuário para páginas específicas.

<TABLE BORDER=3 CELLSPACING=0 CELLPADDING=5


BACKGROUND=america_sul.gif>
<CAPTION ALIGN=top><B>AMÉRICA DO SUL</B></
CAPTION>
<CAPTION ALIGN=bottom>População em mil
habitantes<BR>Área em mil Km<SUP>2</SUP>
</CAPTION>
<TR><TD COLSPAN=3 ALIGN=center>MAIORES
<TD COLSPAN=3 ALIGN=center>MENORES</TR>
<TR><TD ROWSPAN=2 ALIGN=center>
<IMG SRC=”brasil.gif”><BR>
<A HREF=”brasil.htm”>Brasil</A>
<TD>Pop.<TD>157.070
<TD ROWSPAN=2 ALIGN=center>
<IMG SRC=”suriname.gif”><BR>
<A HREF=”suriname.htm”>Suriname</A>
<TD>Pop.<TD>410
<TR><TD>Área<TD>8.547<TD>Área<TD>163</TR>
<TR><TD ROWSPAN=2 ALIGN=center>
<IMG SRC=”argentina.gif”><BR>
<A HREF=”argentina.htm”>Argentina</A>

Celta Informática - F: (11) 4331-1586 Página: 73


Programando em HTML
<TD>Pop.<TD>34.000
<TD ROWSPAN=2 ALIGN=center>
<IMG SRC=”uruguai.gif”><BR>
<A HREF=”uruguai.htm”>Uruguai</A>
<TD>Pop.<TD>3.220
<TR><TD>Área<TD>2.780<TD>Área<TD>176</TR>
</TABLE>

Celta Informática - F: (11) 4331-1586 Página: 74


Programando em HTML
FRAMES

Frame ou moldura é um recurso da linguagem HTML que permite ao


navegador exibir duas ou mais páginas simultaneamente na mesma ja-
nela. Caso você tenha a necessidade de exibir uma página contendo a
apresentação da empresa e uma lista de seus produtos e mais uma
página para cada produto, o usuário teria que voltar para a página de
apresentação se desejasse ver outro produto.

Com o uso do frame, a lista de produtos poderá ser constantemente


exibida enquanto o usuário visualiza os produtos em uma outra moldura
na mesma janela do navegador.

Para construir uma página com a estrutura mostrada na figura acima, é


necessário construir na verdade três páginas HTML, sendo uma princi-
pal (frame.htm) com as definições de frame e as outras duas com o
conteúdo de cada frame (frame1.htm e frame2.htm).
Inicialmente vamos construir quatro páginas sem a utilização de frames,
com os recursos de navegação vistos até agora. Partindo da página
menu.htm poderemos acessar as páginas empresa.htm, produtos.htm
e servicos.htm e a partir delas o menu novamente.

Celta Informática - F: (11) 4331-1586 Página: 75


Programando em HTML
menu.htm
<HTML><HEAD>
<TITLE>Menu</TITLE>
</HEAD>
<BODY>
<H1>Menu</H1><HR>
<CENTER>
<UL>
<LI><A HREF=empresa.htm>Empresa</A>
<LI><A HREF=produtos.htm>Produtos</A>
<LI><A HREF=servicos.htm>Servi&ccedil;os</A>
</UL></CENTER>
</BODY></HTML>
empresa.htm
<HTML>
<HEAD>
<TITLE>Empresa</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5 COLOR=red FACE=”algerian”>
EMPRESA</FONT>
<P ALIGN=justify>Somos empresa que vem atuando no
mercado nacional oferecendo
solu&ccedil;&otilde;es para o ramo de
ve&iacute;culos. Com uma pol&iacute;tica de
Qualidade e Tecnologia enfrentamos com otimismo
e
confian&ccedil;a todos os obst&aacute;culos,
pois
o desafio para oferecer a melhor
solu&ccedil;&atilde;o nos motiva a crescer cada
vez mais.</P>
<P ALIGN=right><A HREF=”menu.htm”>menu</A></P>
</BODY></HTML>

produtos.htm
<HTML><HEAD>
<TITLE>Produtos</TITLE>
</HEAD>

Celta Informática - F: (11) 4331-1586 Página: 76


Programando em HTML
<BODY>
<FONT SIZE=5 COLOR=red FACE=algerian>
PRODUTOS</FONT><P>
<FONT SIZE=4 COLOR=maroon>Vendemos o que h&aacute
de
melhor no mercado global.</FONT><P>
<TABLE BORDER=2 ALIGN=center>
<TR><TH COLSPAN=2>MOTOR<TH COLSPAN=2>RODAS
<TR ALIGN=center>
<TD WIDTH=29%><IMG SRC=”virabrequim.gif”>
<TD WIDTH=21%>Virabrequim
<TD WIDTH=29%><IMG SRC=”roda_gota.gif”>
<TD WIDTH=21%>Gota
<TR ALIGN=center>
<TD><IMG SRC=”correia.gif”>
<TD>Correia
<TD><IMG SRC=”roda_beca.gif”>
<TD>Beca
<TR ALIGN=center>
<TD><IMG SRC=”vela.gif”>
<TD>Vela
<TD><IMG SRC=”roda_estrela.gif”>
<TD>Estrela
</TABLE>
<P ALIGN=right><A HREF=”menu.htm”>menu</A></P>
</BODY></HTML>

Celta Informática - F: (11) 4331-1586 Página: 77


Programando em HTML

servicos.htm
<HTML>
<HEAD>
<TITLE>Servi&ccedil;os</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5 COLOR=red FACE=”algerian”>
SERVI&Ccedil;OS</FONT><P>
<P ALIGN=justify>N&oacute;s oferecemos a melhor
orienta&ccedil;&atilde;o aos nossos clientes na
escolhe do produto que melhor atende &agrave;s
suas
exig&ecirc;ncias. Al&eacute;m de dar
manuten&ccedil;&atildeo permanente e por toda vida
de nossos produtos sem nenhum custo adicional.</P>
<P ALIGN=right><A HREF=”menu.htm”>menu</A></P>
</BODY></HTML>

Celta Informática - F: (11) 4331-1586 Página: 78


Programando em HTML
Antes de trabalhar com frames é necessário um planejamento prévio de
como será o lay-out da página e de que modo os frames estarão. Neste
planejamento deverão ser determinadas as dimensões de cada frame,
bem como se a janela do navegador será dividida em colunas, linhas ou
uma combinação de ambas.

Após o planejamento, o arquivo principal será formado pela tag


<FRAMESET> e sua correspondente de fechamento </FRAMESET>,
contendo entre elas as definições de divisão e conteúdo da página. Esta
tag possui os seguintes atributos:

COLS = [ pixel | % | * ] Determina o tamanho e quantidade das


colunas.
FRAMEBORDER = [ 0 | 1 ] Se igual a 0, não exibe bordas.
FRAMESPACING = [ pixel ] Espaço entre os frames.
ROWS = [ pixel | % | * ] Determina o tamanho e quantidade
das linhas.

Os valores dos atributos COLS e ROWS podem ser um número inteiro


em pixel, uma porcentagem do espaço vertical ou horizontal, ou um com-
primento expresso como i*, onde i é um número inteiro.
Na área da janela, o navegador primeiro destina dimensões em pixel e
porcentagem, então divide o espaço remanescente entre todos elemen-
tos com dimensões relativas. Para um elemento com comprimento de
3* será destinado o triplo do espaço de um elemento com comprimento
1*. O valor * é equivalente a 1* e é muitas vezes usado para preencher o
espaço restante da janela.

Para indicar o conteúdo de cada frame, utilizamos a tag <FRAME> jun-


tamente com seu atributo SRC informando que página será carregada
dentro do frame. A tag FRAME substitui a tag BODY dos documento
HTML normais.
<HTML><HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRAMESET COLS=100,300,100>
<FRAME SRC=”empresa.htm”>
<FRAME SRC=”produtos.htm”>
<FRAME SRC=”servicos.htm”>
</FRAMESET></HTML>

Celta Informática - F: (11) 4331-1586 Página: 79


Programando em HTML

Na listagem anterior apesar de as dimensões serem exatas, o navega-


dor irá preencher toda sua janela com os três frames nas proporções
indicadas pelos valores absolutos. Neste exemplo poderíamos, então,
ter usado na linha do FRAMESET o asterisco no dimensionamento do
último frame para ocupar o restante da janela, ao invés de um valor abso-
luto. Altere o exemplo e redimensione a janela do navegador.

</HEAD>
<FRAMESET COLS=100,300,*>
<FRAME SRC=”empresa.htm”>

A listagem a seguir constrói uma página com dois frames em linha, sen-
do que um possui o triplo da altura do outro.

<HTML><HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRAMESET ROWS=*,3*>
<FRAME SRC=”empresa.htm”>
<FRAME SRC=”produtos.htm”>
</FRAMESET></HTML>

Celta Informática - F: (11) 4331-1586 Página: 80


Programando em HTML

COMPOSIÇÕES COM FRAMES

Para dividir uma janela com frames em linhas e colunas, é necessário


combinar estes frames inserindo uma definição de frame (FRAMESET)
dentro de outra, na posição de uma tag FRAME normal.

<FRAMESET ROWS=”30%,*”>
<FRAME SRC=”a.html”>
<FRAMESET COLS=”30%,*”>
<FRAME SRC=”b.html”>
<FRAME SRC=”c.html”>
</FRAMESET>
</FRAMESET>

Celta Informática - F: (11) 4331-1586 Página: 81


Programando em HTML
<FRAMESET COLS=”30%,*”>
<FRAME SRC=”a.htm”>
<FRAMESET ROWS=”30%,*”>
<FRAME SRC=”b.htm”>
<FRAME SRC=”c.htm”>
</FRAMESET>
</FRAMESET>

<FRAMESET SCROLLING=no ROWS=”20%,*”>


<FRAMESET SCROLLING=no COLS=”30%,*”>
<FRAME SRC=”a.htm”>
<FRAME SRC=”b.htm”>
</FRAMESET>
<FRAMESET SCROLLING=no COLS=”*,30%”>
<FRAMESET SCROLLING=no ROWS=”*,*”>
<FRAME SRC=”c.htm”>
<FRAME SRC=”d.htm”>
</FRAMESET>
<FRAME SRC=”e.htm”>
</FRAMESET>
</FRAMESET>

Celta Informática - F: (11) 4331-1586 Página: 82


Programando em HTML
Faça o próximo exemplo que cria uma página com duas linhas de frames,
sendo a linha superior dividida em duas colunas de frames.

<HTML>
<HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRAMESET ROWS=30%,*>
<FRAMESET COLS=*,*>
<FRAME SRC=”empresa.htm”>
<FRAME SRC=”servicos.htm”>
</FRAMESET>
<FRAME SRC=”produtos.htm”>
</FRAMESET>
</HTML>

A tag FRAME possui além do atributo SRC, os seguintes atributos:

NAME - Nome do frame para sua identificação quando se usa o atributo


TARGET.
SRC - Endereço (URL) do conteúdo do frame.
FRAMEBORDER = [ 1 | 0 ] - Se igual a 1, o frame terá borda.
MARGINWIDTH - Largura da margem em pixel
MARGINHEIGHT - Altura da margem em pixel
NORESIZE - Quando usado, não permite o redimensionamento do frame
SCROLLING = [ yes | no | auto ] - Exibe ou não as barras de rolagem.

Celta Informática - F: (11) 4331-1586 Página: 83


Programando em HTML
Faça os dois exemplos a seguir para ver a utilização desses atributos,
faça também testes com outros valores e atributos em linhas diferentes
das mostradas.

Exemplo 1
<HTML><HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRMESET ROWS=30%,* FRAMESPACING=10>
<FRAMESET COLS=*,*>
<FRAME SRC=”empresa.htm”>
<FRAME SRC=”servicos.htm” SCROLLING=no>
</FRAMESET>
<FRAME SRC=”produtos.htm”>
</FRAMESET>
</HTML>

Exemplo 2
<HTML><HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRAMESET ROWS=*,2* FRAMESPACING=10 FRAMEBORDER=0>
<FRAME SRC=”empresa.htm” MARGINWIDTH=50>
<FRAME SRC=”produtos.htm” MARGINHEIGHT=20>
</FRAMESET>
</HTML>

Celta Informática - F: (11) 4331-1586 Página: 84


Programando em HTML

LIGANDO FRAMES

Até agora trabalhamos com frames exibidos de uma forma independente


uns dos outros, criando um documento principal que exibe outros em
molduras separadas, sem nenhuma ligação um com o outro.

Para fazer esta ligação devemos primeiro nomear cada frame no arquivo
principal para depois com o atributo TARGET poder apontar o link para o
frame desejado. Este atributo pertence às tags BASE e A.

A tag BASE deve ser localizada no cabeçalho da página, sendo respon-


sável por informar ao navegador qual será o documento base vinculado
aos links da página, que pode ser tanto um frame quanto uma outra URL.
Seus atributos são:

HREF = URL
TARGET = Frame

Celta Informática - F: (11) 4331-1586 Página: 85


Programando em HTML
No próximo exercício faça uma arquivo principal definindo o nome dos
frames, e altere os quatro arquivos já construídos (menu.htm,
servicos.htm, produtos.htm e empresa.htm).

O arquivo vazio.htm contém somente as definições básicas de uma pá-


gina HTML. Ele é usado para o Netscape não abrir os documentos em
outro frame senão o frame de nome “conteudo”.

Documento principal
<HTML><HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRAMESET COLS=30%,*>
<FRAME NAME=”menu” SRC=”menu.htm”>
<FRAME NAME=”conteudo” SRC=”vazio.htm”>
</FRAMESET></HTML>

menu.htm
<HTML><HEAD>
<TITLE>Frame</TITLE>
<BASE TARGET=”conteudo”>
</HEAD><BODY>
<H1>Menu</H1><HR>
<CENTER>
<UL>
<LI><A HREF=empresa.htm>Empresa</A>
<LI><A HREF=produtos.htm>Produtos</A>
<LI><A HREF=servicos.htm>Serviços</A>
</UL></CENTER>
</BODY></HTML>

servicos.htm
<P ALIGN=right>
<A HREF=”empresa.htm” TARGET=”menu”>
empresa</A>&nbsp&nbsp
<A HREF=”produtos.htm”>produtos</A></P>

Celta Informática - F: (11) 4331-1586 Página: 86


Programando em HTML

Observe que na página servicos.htm o link empresa possui o seu atri-


buto TARGET apontando para o frame menu, ou seja, quando o usuário
der um clique nele, a página empresa.htm será carregada no lugar ocu-
pado pela página menu.htm.

Celta Informática - F: (11) 4331-1586 Página: 87


Programando em HTML
ENCADEANDO FRAMES

Fazemos encadeamento de frames carregando um arquivo com defini-


ções de frameset dentro da tag FRAME de outro arquivo. Este recurso é
semelhante ao utilizado quando desejamos encadear tabelas, colocan-
do uma tabela dentro da célula de outra.

frame.htm
<HTML><HEAD></HEAD>
<FRAMESET SCROLLING=no ROWS=”20%,*”>
<FRAMESET SCROLLING=no COLS=”30%,*”>
<FRAME SRC=”a.htm”>
<FRAME SRC=”b.htm”>
</FRAMESET>
<FRAME SRC=”subframe.htm”>
</FRAMESET></HTML>

subframe.htm
<HTML><HEAD></HEAD>
<FRAMESET SCROLLING=no ROWS=”*,*”>
<FRAME SRC=”c.htm”>
<FRAME SRC=”d.htm”>
</FRAMESET></HTML>

Partindo do exercício anterior iremos exibir uma página com definições de


frames no lugar da página produtos.htm. Esta nova página terá um frame
superior com links para páginas que serão exibidas no frame inferior.

Inicie alterando a linha do arquivo menu.htm que abre a página produto.htm


fazendo ela apontar para a nova página:

Celta Informática - F: (11) 4331-1586 Página: 88


Programando em HTML
<UL>
<LI><A HREF=empresa.htm>Empresa</A>
<LI><A HREF=”produtos_b.htm”>Produtos</A>
<LI><A HREF=servicos.htm>Serviços</A>

Construa o código da página produtos_b.htm que contém a definição


dos frames:

produtos_b.htm
<HTML><HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRAMESET ROWS=40,*>
<FRAME NAME=”menu_produtos” SRC=”menu_produtos.htm”
SCROLLING=no>
<FRAME NAME=”conteudo_produtos”
SRC=”produtos_inicio.htm”>
</FRAMESET></HTML>

Nos dois frames da página produtos_b.htm serão carregados quatro ar-


quivos. Um deles no frame superior - menu_produtos.htm e os outros
três no frame inferior - produtos_inicio.htm, motor.htm e rodas.htm.

menu_produtos.htm
<HTML><HEAD></HEAD><BODY>
<TABLE ALIGN=center>
<TR ALIGN=center>
<TD WIDTH=100><A HREF=”motor.htm”
TARGET=”conteudo_produtos”>Motor</A>
<TD WIDTH=100><A HREF=”rodas.htm”
TARGET=”conteudo_produtos”>Rodas</A></TR>
</TABLE></BODY></HTML>

produtos_inicio.htm
<HTML><HEAD></HEAD><BODY>
<FONT SIZE=5 COLOR=red FACE=algerian>PRODUTOS</
FONT><P>
<FONT SIZE=4 COLOR=maroon>Vendemos o que h&aacute
de melhor no mercado global.</FONT><P>
</BODY></HTML>

Celta Informática - F: (11) 4331-1586 Página: 89


Programando em HTML
motor.htm
<HTML><HEAD></HEAD><BODY>
<TABLE BORDER=2 ALIGN=center>
<TR><TH COLSPAN=2>MOTOR
<TR ALIGN=center>
<TD WIDTH=29%><IMG SRC=”virabrequim.gif”>
<TD WIDTH=21%>Virabrequim
<TR ALIGN=center>
<TD><IMG SRC=”correia.gif”>
<TD>Correia
<TR ALIGN=center>
<TD><IMG SRC=”vela.gif”>
<TD>Vela
</TABLE></BODY></HTML>

rodas.htm
<HTML><HEAD></HEAD><BODY>
<TABLE BORDER=2 ALIGN=center>
<TR><TH COLSPAN=2>RODAS
<TR ALIGN=center>
<TD WIDTH=29%><IMG SRC=”roda_gota.gif”>
<TD WIDTH=21%>Gota
<TR ALIGN=center>
<TD><IMG SRC=”roda_beca.gif”>
<TD>Beca
<TR ALIGN=center>
<TD><IMG SRC=”roda_estrela.gif”>
<TD>Estrela
</TABLE></BODY></HTML>

Celta Informática - F: (11) 4331-1586 Página: 90


Programando em HTML
FORMULÁRIOS

Os formulários são bastante utilizados nos sites da Web, pois através de-
les é possível coletar informações de várias pessoas, solicitar a opinião
dos visitantes, fazer uma votação onde os visitantes escolhem entre um
item e outro, etc, assim, podemos concluir que os formulários permitem
coletar informações dos usuários. As respostas fornecidas pelos visitan-
tes são armazenadas, e depois você pode acessá-las e compará-las.

Mas para que este formulário funcione, é preciso que no servidor tenha
um programa, escrito em outra linguagem, responsável em receber e
processar o formulário.

Obs: Neste curso será ensinando apenas a linguagem HTML referente à


criação e envio do formulário.

OS OBJETOS DE FORMULÁRIOS

Os formulários são compostos por vários objetos, onde uns oferecem


opções para serem clicados e outros exibem campos de texto editáveis
(através da utilização de comportamentos, você poderá validar as infor-
mações digitadas pelo usuário). A próxima figura exibe um simples for-
mulário que foi criado em uma página.

Celta Informática - F: (11) 4331-1586 Página: 91


Programando em HTML
Os itens numerados na figura anterior representam alguns objetos de
formulário, os quais são denominados:

1, 2 e 5 – Campo de texto
3 e 4 – Menu de lista
6 - Botões de opção
7 - Área de texto
8 e 9 - Botões de comando

Além desses quatro objetos, ainda temos: caixa de seleção, campo de


arquivos, campo de imagens, campo oculto e menu de salto.

Campos de texto: também chamados caixas de texto, são utilizados


para coletar informações dos usuários, onde estes poderão digitar qual-
quer tipo de texto: alfabético ou numérico. O texto digitado é exibido em
uma linha simples.
Botões: realizam tarefas quando são clicados, ou seja, são aquilo que
faz o formulário fazer algo, como enviar as informações e redefinir os
dados dos formulários.
Campos de imagens: podem ser utilizados no lugar do botão Enviar,
onde este pode ser substituído por um botão de imagens.
Caixas de seleção: permitem que o usuário faça uma ou mais seleções
em um conjunto de opções.
Botões de opção: enquanto as caixas de seleção podem aparecer indi-
vidualmente ou em grupos, os botões de opção aparecem sempre em
grupos. A seleção de um dos botões do grupo cancela a seleção de
todos os outros.
Menus de lista: apresentam um conjunto de valores que os usuários
poderão escolher.
Campos de arquivos: permitem que o usuário procure os arquivos nos
discos rígidos, carregando-os como dados do formulário.
Campos ocultos: permitem armazenar informações (como o destinatá-
rio dos dados do formulário ou o assunto do formulário) que não forem
relevantes ao usuário, mas que serão utilizadas pelo aplicativo que pro-
cessa o formulário.
Menu de salto: permite inserir um menu no qual cada opção se vincula
a um documento ou arquivo.
Área de texto: é uma caixa de texto onde o usuário pode digitar inúmera
palavras com linhas múltiplas (exibem uma barra de rolagem).

Celta Informática - F: (11) 4331-1586 Página: 92


Programando em HTML
INSERINDO OBJETOS

Para construirmos um formulário utilizamos a tag <FORM> e sua cor-


respondente de fechamento </FORM>. É entre elas que serão coloca-
dos os elementos que formam um formulário interativo.

A tag FORM possui os seguintes atributos:

ACTION = URL Especifica o endereço onde está o programa que


irá processar o formulário
METHOD = [get | post]Indica o método utilizado pelo servidor para
processar o formulário

<FORM METHOD=”post” ACTION=”http://servidor.br/


cgi-bin/cadastro”>

Um campo para entrada de dados é definido com a tag <INPUT>, tendo


os dados digitados pelo usuário atribuídos a uma variável com nome e
tipo específicos. Esta tag possui os seguintes atributos:

TYPE = [ text | password | checkbox | radio | submit | reset | file | hidden |


image | button ]
text - Campo de texto.
password - Campo texto que mostra astericos no lugar do texto
digitado.
checkbox - Caixa de seleção.
radio - Botão de opção.
submit - Botão para envio dos dados do formulário.
reset - Botão que apaga os textos do formulário.
file - Campo de arquivo.
hidden - Campo de arquivo.
image - Campo de imagem.
button - Botão de comando.
NAME = variável - Nome da variável que receberá o conteúdo do campo.
VALUE = texto - Representa o valor padrão do campo.
CHECKED - Seleciona o campos do tipo checkbox.
SIZE = número - Define o tamanho do campo, sugerindo um número de
caracteres.

Celta Informática - F: (11) 4331-1586 Página: 93


Programando em HTML
MAXLENGTH = número - Número máximo de caracteres para a entra-
da de texto

Inicialmente vamos criar uma página que envia somente o nome do usu-
ário guando este clicar no botão Enviar.

<HTML><HEAD><TITLE>Formul&aacute;rio</TITLE><HEAD>
<BODY>
<P ALIGN=”center”><FONT FACE=”Arial Rounded MT
Bold, Bookman Old Style, Brush Script”
COLOR=”#3300CC” SIZE=”5">Exemplo de
formul&aacute;rio simples</FONT></P>
<FORM METHOD=”post” ACTION=”URL do CGI”>
<P><B>Nome</B>:
<INPUT TYPE=”text” NAME=”nome” size=”25"></P>
</FORM>
</BODY></HTML>

Os botões de opção são feitos informando o mesmo nome de variável


para todos do mesmo grupo mas com valores diferentes.

<P><B>Op&ccedil;&otilde;es de uso da Internet</B>:


<INPUT TYPE=”radio” NAME=”opcao”
VALUE=”estudo”>Estudo
<INPUT TYPE=”radio” NAME=”opcao”
VALUE=”pesquisa”>Pesquisa
<INPUT TYPE=”radio” NAME=”opcao”
VALUE=”trabalho”>Trabalho
<INPUT TYPE=”radio” NAME=”opcao” VALUE=”lazer”
CHECKED>Lazer
</P>

Celta Informática - F: (11) 4331-1586 Página: 94


Programando em HTML

A caixa de opção funciona semelhante ao botão de opção, com a diferen-


ça de poder ter mais de um campo selecionado ao mesmo tempo.

<TABLE>
<TR>
<TD VALIGN=”top”><B>Possui em sua casa</B>:
<TD>
<INPUT TYPE=”checkbox” NAME=”bens”
VALUE=”geladeira”>Geladeira<BR>
<INPUT TYPE=”checkbox” NAME=”bens”
VALUE=”automóvel”>Autom&oacute;vel<BR>
<INPUT TYPE=”checkbox” NAME=”bens”
VALUE=”televisao”>Televis&atilde;o
</TR>
</TABLE>

O menu de lista é criado com as tags <SELECT>...</SELECT>, que


define a lista e seu comportamento, e <OPTION>, que define os ele-
mentos de escolha da lista. Numa lista o usuário escolhe um ou mais
itens após dar um clique na sua seta.

Celta Informática - F: (11) 4331-1586 Página: 95


Programando em HTML
A tag SELECT possui os seguintes atributos:

NAME = variável - Nome da variável que receberá o conteúdo do campo.


MULTIPLE - Permite seleções múltiplas
SIZE = número - Define o número de opções visíveis na lista.

<P><B>Data da nascimento</B>:
<SELECT NAME=”dia”>
<OPTION SELETED>01
<OPTION>02
<OPTION>03
<OPTION>04
<OPTION>05
</SELECT>
<SELECT NAME=”mes”>
<OPTION SELECTED>Janeiro
<OPTION>Fevereiro
<OPTION>Mar&ccedil;o
</SELECT></P>

Criamos uma área de texto com a tag <TEXTAREA>...</TEXTAREA> e


seus atributos:

NAME = variável - nome da variável que receberá o conteúdo do campo.


COLS = número - especifica a largura da caixa de texto.
ROWS = número - especifica o número de linhas da caixa (altura).

Dentro da tag TEXTAREA podemos incluir um texto padrão para ser exi-
bido ao usuário.

<B>Sugestões</B><BR>
<TEXTAREA NAME=”sugestao” COLS=30 ROWS=5>
Digite aqui suas sugestões
</TEXTAREA>

A maioria dos provedores nos oferece pronto um scrip que envia as res-
postas do formulário para um e-mail especificado e exibe uma página de
agradecimento ao usuário. Este scrip recebe valores de campos ocultos

Celta Informática - F: (11) 4331-1586 Página: 96


Programando em HTML
(hidden) no formulário e que indicam os endereços da página de agrade-
cimento e do e-mail de resposta.

Na listagem a seguir temos o código completo da primeira ilustração


deste tópico, repare os valores do atributo ACTION e dos campos ocul-
tos “emaildestino” e “resposta”:

<HTML><HEAD><TITLE>Formulario</TITLE></HEAD>
<BODY BGCOLOR=”#FFFFFF” BACKGROUND=”3.jpg”>
<P ALIGN=”center”><FONT FACE=”Arial Rounded MT
Bold,
Bookman Old Style, Brush Script” COLOR=”#3300CC”
SIZE=”5">Exemplo de Objetos de Formul&aacute;rio
</FONT></P>
<FORM METHOD=”post”
ACTION=”http://www.dominio.com.br/cgi-bin/
enviarform.cgi”>
<INPUT TYPE=”hidden” NAME=”emaildestino”
VALUE=”adilson@ziq.com.br”>
<INPUT TYPE=”hidden” NAME=”resposta”
VALUE=”grato.htm”>
<P><B>Nome</B>:
<INPUT TYPE=”text” NAME=”nome” SIZE=”50">
</P>
<P><B>E-mail</B>:
<INPUT TYPE=”text” NAME=”campoemail” SIZE=”30">
</P>
<P><B>Data da nascimento</B>:
<SELECT NAME=”data” SIZE=”1">
<OPTION SELECTED>01
<OPTION>02
<OPTION>03
<OPTION>04
</SELECT>
<SELECT name=”mes”>
<OPTION SELECTED>Janeiro
<OPTION>Fevereiro
<OPTION>Mar&ccedil;o
</SELECT>
<INPUT TYPE=”text” NAME=”ano” MAXLENGTH=”4”

Celta Informática - F: (11) 4331-1586 Página: 97


Programando em HTML
SIZE=”6"></P>
<P><B>Op&ccedil;&otilde;es de uso da Internet</
B>:
<INPUT TYPE=”radio” NAME=”opcao”
VALUE=”estudo”>Estudo
<INPUT TYPE=”radio” NAME=”opcao”
VALUE=”pesquisa”>Pesquisa
<INPUT TYPE=”radio” NAME=”opcao”
VALUE=”trabalho”>Trabalho
<INPUT TYPE=”radio” NAME=”opcao” VALUE=”lazer”
CHECKED>Lazer</P>
<P><B>Coment&aacute;rios</B>:
<TEXTAREA NAME=”comentarios” COLS=”50"
ROWS=”3"></TEXTAREA></P>
<P>
<INPUT TYPE=”submit” NAME=”enviar”
VALUE=”Enviar”>
<INPUT TYPE=”reset” NAME=”apagar”
VALUE=”Redefinir”></P>
</FORM></BODY></HTML>

Celta Informática - F: (11) 4331-1586 Página: 98


Programando em HTML
FAZENDO O FORMULÁRIO FUNCIONAR

Toda vez que um usuário preenche os campos do formulário e clica no


botão Enviar, os dados vão para o servidor na forma de uma string (ca-
deia de caracteres) agrupados em pares. Cada um desses pares possui
o nome da variável e o seu valor que o script CGI (ou outro script perso-
nalizado) recebe para ser executado, pois só assim você poderá recupe-
rar e acessar os dados resultantes do formulário.

“variável1=valor1&variável2=valor2 ... &variável =nome ”


n n

Os formulários são enviados por um dos dois métodos: GET, que envia
os resultados do formulário no URL enviado para o script; e POST, que
codifica o material enviado para o script. Consulte seu programador ou
administrador de sistema para você saber determinar qual método deve
ser utilizado.

Após o usuário preencher o formulário e der um clique no botão Enviar,


este será encaminhado ao seu provedor de hospedagem e lá, o script
CGI recebendo a string com os valores da variáveis, enviará um e-mail
para você da seguinte forma:

Celta Informática - F: (11) 4331-1586 Página: 99


Programando em HTML
Form ResultsThis form was submitted with a method of
POST
The URL it was posted from: http://www.dominio.com.br/
formulario.htm
The host that posted it: 200.193.220.27 (200.193.220.27)
Location of Thank You Page: http://www.dominio.com.br/
grato.htm
Email Results to: adilson@ziq.com.br

Submit Date: Sun Sep 24 22:19:13 EDT 2000

Form Values
—————
Variable ‘nome’ = Hamilton Luiz
Variable ‘campoemail’ = omix@bol.com.br
Variable ‘data’ = 03
Variable ‘mes’ = Mar&ccedil;o
Variable ‘ano’ = 1968
Variable ‘opcao’ = lazer
Variable ‘comentarios’ = Gostei muito do
que existe no seu site. Mas a parte visual
deixa a desejar.

Celta Informática - F: (11) 4331-1586 Página: 100


Programando em HTML
EXERCÍCIOS

1. Quais os componentes básicos de um programa HTML?


2. Para editar um programa HTML que ferramentas são necessárias?
3. Que comando é utilizado para inserir linhas em branco e quebra de
linha?
4. O que são tags ou etiquetas?
5. Quais as tags alteram o estilo do texto para negrito e itálico?
6. Crie uma página semelhante à mostrada na figura.

7. Qual a tag utilizada para alterar a fonte do texto e seus atributos?


8. Construa uma página utilizando vários atributos da tag do exercício
anterior.
9. Faça uma página com cabeçalho, texto na cor branca e fundo navy,
tendo o seguinte texto:
“Existem diversas maneiras e promover o um site.
Você pode distribuir panfletos, anunciar em jornais e revistas ou
ainda a velha divulgação boca-a-boca.”
10. Quais os tipos de lista podemos criar com HTML e que tags são
utilizadas?
11. Faça o código da lista mostrada a seguir.

Celta Informática - F: (11) 4331-1586 Página: 101


Programando em HTML
12. Complemente a lista anterior colocando pequenas definições em cada
um dos itens.
13. Altere a lista de forma que ela exiba pequenos quadrados no lugar
dos números.
14. Quais os tipos de imagens podemos carregar em uma página de
Internet?
15. Quando usar cada um desses tipos?
16. Como fazemos para inserir uma figura na página?
17. Faça a seguinte página, utilizando as figuras brasil.gif e fundo1.gif:

18. Aumente a largura e diminua a altura da figura central, colocando


algum texto antes e depois dela.
19. Faça uma página com a bandeira Argentina e um texto do lado direito
dessa bandeira.
20. O que é um hyperlink, e com fazemos um em HTML?
21. Mapeie a bandeira do Brasil, e faça ela ter links para páginas com a
descrição de suas partes.
22. Continuando com o exercício anterior, crie uma lista abaixo do mapa
com o nome de estados brasileiros, e links para uma rápida descri-
ção de cada estado na mesma página.
23. Quais as tags utilizadas para a confecção de tabelas em HTML?
24. Monte uma tabela com borda espessa, fundo vermelho e letras bran-
cas, conforme a figura.

Celta Informática - F: (11) 4331-1586 Página: 102


Programando em HTML

25. Coloque uma legenda na tabela anterior e mais uma coluna com
figura que ocupe todas três linhas.
26. Altera as dimensões da tabela para que todas colunas tenhas a mes-
ma largura.
27. O que é frame e como ele é implementado em HTML?
28. Faça uma página com a seguinte estrutura de frames.

29. Ponha no frame A links para abrir páginas nos outros frames.
30. Em uma das páginas carregadas no frame B, faça um link que abra
uma página em D que tenha mais dois frames.

31. Crie um formulário que obtenha os dados pessoais do usuário, e al-


guns gostos pessoais utilizando todos os objetos de formulário vistos.

Celta Informática - F: (11) 4331-1586 Página: 103


Celta Informática
http://www.celtainformatica.com.br

You might also like