00060 - Programando em HTML

SumárioINTRODUÇÃO _________________________________ 3

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

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

IMAGENS_____________________________________ 37INSERINDO IMAGENS _____________________________________ 39ATRIBUTOS ___________________________________________ 40IMAGENS DE FUNDO _____________________________________ 42IMAGENS MAPEADAS ____________________________________ 45

Celta Informatica

Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem previa autorizacao por escrito de Jose Arnaldo Rodrigues (Celta Informatica), podera ser reproduzida total ou parcialmente, por qualquer processo, eletronico, fotocopia, mecanico ou sistema de processamento de dados. Obrigado pela preferencia, Celta Informatica. http://www.celtainformatica.com.br E-mail: [email protected] Fone: (11) 4331-1586

LIGAÇÕES (LINKS) ____________________________ 48LINKS PARA ARQUIVOS __________________________________ 48LINKS PARA SEÇÕES DE DOCUMENTOS _______________________ 51HIPERLINK COM IMAGEM MAPEADA _________________________ 55

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

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

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

EXERCÍCIOS ________________________________ 101

Programando em HTML

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

INTRODUÇÃO

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

A HTML (HyperText Markup Language) é uma linguagem utilizada para aediçã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 entrepáginas, criando o conceito de hipertexto. Ela é composta por comandoscolocados entre parênteses angulares (< e >). Estes comandos sãochamados 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á gravadoem um servidor. Quando o computador cliente solicita uma página, oservidor envia para ele o arquivo html que o navegador se encarregará deinterpretar e exibir a página solicitada.

Programando em HTML


EDIÇÃO DE DOCUMENTOS

Um documento HTML pode ser criado utilizando um simples editor detextos como o Bloco de Notas do Windows ou um editor de HTML quepossui atalhos para os comandos e insere automaticamente as etique-tas, orientando na digitação dos seus elementos, e aumentando muito aprodutividade. Existem atualmente editores do tipo WYSIWYG (what yousee is what you get - o que você vê é o que você quer) que permitem aconstruçã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 queinteressa é você se familiarizar bastante com as tags HTML e casoutilizassemos algum editor, estas tags seriam colocadas automaticamen-te prejudicando o seu aprendizado.

Programando em HTML


Comandos de HTML

Como você já sabe, um documento HTML possui tags que informamcomo 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 aformatação de uma porção de texto, e por isso devemos marcar ondecomeça e termina o texto com a formatação especificada por ela.

Existem também tags chamadas “vazias”, pois não marcam uma regiãode 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 algumacaracterí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ê-lacom 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 quedetermina qual será a cor da font utilizada no texto.

O atributo é sempre incluído na tag inicial e nunca na tag final, e o seuvalor é delimitado por aspas simples ou duplas. Estas aspas são opcionaisse o valor do atributo consistir somente de letras (a-z), dígitos (0-9), hífene ponto. O nome dos atributos não são sensíveis a caixa mas seus valo-res podem ser.

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ãopodendo 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) dodocumento.

O cabeçalho é delimitado por <HEAD>...</HEAD> e contém informa-ções sobre o documento e seu conteúdo que podem ser recuperadospor 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 queaparece 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 nemmuito 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).

Programando em HTML


O corpo do documento contém todas as informações que serão exibidaspelo 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 Windowse digite o texto mostrado a seguir.

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

Após salvar, inclua um título e algum texto no corpo do documento. Salveo 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 oarquivo será gravado como .txt. Observe a figura.

Programando em HTML


No navegador utilize o menu Arquivo > Abrir... e procure pelo arquivoque você acabou de salvar.

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

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 servidorWeb, 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 deter sido pressionada a tecla Enter após a digitação da palavra “página” noBloco de notas. Isto ocorre porque o navegador não recebeu uma instru-ção para quebrar a linha ou qualquer outra que modificasse o texto, eleapenas 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 formataro texto, inserir figuras e links e criar tabelas e frames.

CABEÇALHOS

Todo documento possui cabeçalhos que separam seções ou tópicos quefacilitam a visualização de quem os lê, permitindo um melhor acompa-nhamento das idéias expostas. O HTML possui a etiqueta <H> que criacabeçalhos na área de visualização das páginas.

Existem seis tipos de cabeçalhos no HTML com formatação própria eprontos para serem utilizados, indo de <H1> a <H6>. Sendo <H1> detamanho maior que <H6>.

Programando em HTML


Faça o seguinte documento:

Que será exibido desta forma no navegador.

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

Programando em HTML


PARÁGRAFOS

Como vimos no primeiro exemplo, o HTML não quebra ou avança linhasquando pressionamos a tecla Enter, ele só avançará uma linha após umcomando 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 embranco 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> paraformatar 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 nossoacampamento na estância de Atibaia. Sairemosdia 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émadiciona uma linha em branco. Ela é utilizada para criar parágrafos, se-parando blocos de texto que podem ser formatados em conjunto.

Programando em HTML


Esta etiqueta pode ser utilizada somente no final de um parágrafo oujuntamente com sua correspondente de fechamento (</P>) envolvendouma região do texto para formatação. Como a Tag <H>, ela tambémpossui 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 nossoacampamento na estância de Atibaia. Sairemosdia 27 às 13 horas da sede do clube.<P><P ALIGN=center> Não cheguem atrasados.</P>Até lá.

</BODY></HTML>

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 nossoacampamento na estância de Atibaia. Sairemosdia 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 denotas 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 comoedentação, e é muito utilizado em outras linguagens de programação.

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 nossoacampamento na estância de Atibaia. Sairemosdia 27 às 13 horas da sede do clube.<HR><CENTER>Não cheguem atrasados.<HR>Até lá.</CENTER>

</BODY></HTML>

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 quantoem porcentagem da largura da página.

Quando um valor absoluto de pixels é utilizado, o comprimento da linhapermanecerá o mesmo independente da dimensão da janela do navega-dor, enquanto que ao utilizar porcentagem, este comprimento mudará deacordo 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>

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éssemosem um programa editor de textos, alterando a fonte ou o estilo doscaracteres apresentados. O HTML possui etiquetas que realizam estaformataçã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 serformatado.

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. Naformatação física, são especificados claramente os estilos de texto de-sejado: negrito, itálico, cor, grifado, dentre outros.

Programando em HTML


Física

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

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

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><HRSIZE=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>

Programando em HTML


Lógica

Esta formatação é utilizada quando se deseja formatar o texto utilizandoum 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.

Indica valores que o usuário deverá escrever<VAR>

Enfatiza o texto - negri to<STRONG>Representa a saída de um programa<SAMP>Indica uma entrada via teclado<KBD>

Enfatiza o texto - itálico<EM> Descreve um termo<DFN> Indica trechos de código de programa<CODE>

Destaca citações, como títulos de revistas e filmes<CITE> FunçãoEtiqueta

Programando em HTML


Estes formatadores são utilizados da mesma forma que os formatadoresfísicos, devendo o texto que se queira formatar estar entre a etiqueta esua correspondente de fechamento:

<KBD> texto </KBD>.

Podemos também combinar os diversos comandos de formatação paradeterminado trecho do texto. Desde que observados se as etiquetasestão sendo abertas e fechadas na ordem correta evitando possíveiserros 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 algunsnavegadores ou não são possíveis de serem digitados pelo teclado. Pararepresentar estes caracteres, utilizamos seqüências de escape, indicadaspor três partes:

1 - o caracter &2 - um número ou cadeia de caracteres3 - 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 &.

&&>><<CaracterEntidade

Programando em HTML


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

espaço&nbspÜÜ üü ÚÚ úú ÕÕ õõ ÔÔ ôô ÓÓ óó ÍÍ íí ÊÊ êê ÉÉ éé ÇÇ çç ÃÃ ãã ÀÀ àà ÂÂ ââ ÁÁ áá CaracterEntidade CaracterEntidade

É importante a utilização destes caracteres de escape na construção desua página, pois garante que ela seja visualizada corretamente por qual-quer navegador não importado a língua configurada no computador dousuá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><HRSIZE=5>

A etiqueta <H1> é utilizada para<BR>a edição de documentos HTML.

</BODY></HTML>

Programando em HTML


Blocos

Com o HTML podemos também criar blocos de texto destacando-os dorestante 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: [email protected]</ADDRESS><HR>

</BODY></HTML>

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, dependendodo navegador utilizado.

<HTML><HEAD>

<TITLE>Blockquote</TITLE></HEAD><BODY>

<H2>BLOCKQUOTE</H2><HR>Os dias estão se passando muitorápido, por isso:<BLOCKQUOTE>

Nunca deixe para realizar as tarefas de suaresponsabilidade<BR>o mais rápido possível.</BLOCKQUOTE>Tenha isso em mente.

</BODY></HTML>

Programando em HTML


<PRE>Utilizamos a etiqueta PRE para inserir na página um texto com o mesmoformato que ele foi digitado, respeitando os espaçamentos, fontes, mar-cas de tabulação e quebras de linha feitas com a tecla Enter, formatandoo texto na tela com uma fonte monoespaçada como a Courier. Ela émuito útil para exibir textos que necessitam deste tipo de fonte como porexemplo: 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.2361950 51.9441960 70.0701970 93.1381980 119.0021991 146.8251996 157.069

</PRE>Fonte: IBGE</BODY></HTML>

Programando em HTML


Fonte

A linguagem HTML possui recursos para alterar o tipo, cor e tamanho dafonte utilizada nos textos. Estes recursos são implementados com aetiqueta <FONT> e seus atributos SIZE (tamanho), FACE (tipo) e COLOR(cor).

O atributo SIZE determina o tamanho da fonte a ser mostrada e varia emnú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 tamanhoda fonte que é mostrado na próxima figura.

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

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 asdezesseis 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,

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

#00FFFFaqua#FF00FFfuchsia

#008080teal#800080purple#0000FFblue#FF0000red#000080navy#800000maroon

#FFFF00yellow#000000white

#808000olive#808080gray

#00FF00lime#C0C0C0silver

#008000green#000000blackHexadecimalCorHexadecimalCor

No exemplo a seguir é mostrado o uso do atributo COLOR, e repare queestá 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>

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 ladodireito do cérebro tenta dizer a cor, mas olado esquerdo insiste em ler a palavra.

</BODY></HTML>

Na listagem anterior foi utilizado o caracter especial &nbsp para inserirum espaço a mais entre algumas palavras. A etiqueta FONT inclui umespaço automaticamente e caso você deseje incluir mais espaços embranco, é necessário utilizar esse caracter especial. Ele também é útildurante a digitação de um texto qualquer, pois o HTML aceita somenteum espaço entre palavras, mesmo que existam 20 espaços no código,na página será mostrado apenas um.

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 dapá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 cadalinha 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 alista (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.

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

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

Programando em HTML


A etiqueta <OL> possui dois atributos: TYPE e START. TYPE determinao 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>

Programando em HTML


Lista de glossário

Esta lista também é chamadas Lista de definição, pois permite incluiruma descrição de cada item listado. A etiqueta <DL> marca este tipo delista, que possui mais duas outras etiquetas para indicar o termo a serdefinido (<DT>) e sua definição (<DD>).

<DL><DT>IBGE

<DD>Instituto Brasileiro de Geografia eEstatí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, poisele permite uma tabulação bem prática do texto.

Programando em HTML


<DL><FONT SIZE=5>Regiões, estados e maiorescidades</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 ecentro-oeste brasileiros.

Aninhando e combinando listas

Podemos colocar uma lista dentro de outra (aninhar) de mesmo tipo oude 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:

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 aslistas 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 nafigura a seguir.

No aninhamento com os dois tipos de listas cria-se uma estrutura maiselegante e complicada, sendo necessário tomar um certo cuidado nomomento 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

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 ordenadae VALUE da etiqueta <LI> para dar uma continuidade à classificação dasfiliais 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 demarcador ou de número que será utilizado, dependendo se ela está emuma lista não ordenada ou ordenada. Faça as seguintes alterações eveja 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>

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 sevocê não escolher adequadamente o seu tamanho de arquivo e em quetipo elas serão salvas. Pois para arquivos de imagem muito grandes, apágina demorará para ser visualizada, desmotivando com isso o usuárioque logo pulará para outro site. Por outro lado se esta mesma imagemfor salva em um formato incorreto ela ficará deformada e feia, apesar deo arquivo ser pequeno. Devido a isto tudo, é importante você conheceralgum 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 parailustrações, gráficos e figuras ou imagens de textos com até 256 cores.Estes arquivos podem ser entrelaçados permitindo uma visualizaçãogradativa 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 semdar a aparência de uma caixa. É possível criar também pequenas anima-ções utilizando diversas imagens GIF juntamente com um programa quesobrepõ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 porexemplo fotografias e arte digitalizada. Ele permite vários graus decompactação com perda (lossey) da imagem, sendo uma maiorcompactação responsável por uma menor qualidade desta. Este forma-to não é muito bom para figuras com poucas cores pois durante acompactação o programa força uma transição gradativa entre as coresdando ao final a impressão de figuras embaçadas.

Programando em HTML


PNG - Ele é o mais novo formato para arquivos gráficos utilizados naWEB, suportado somente pelos navegadores da geração 4 em diante,não sendo visualizado pelos navegadores mais antigos. Os arquivos PNGcombinam as melhores características do GIF e JPEG, pois permitemtransparê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ãomaiores que os JPEG da mesma imagem sendo recomendados somentepara 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 quantomaior a dimensão e profundidade de cores de uma figura maior será otamanho do seu arquivo mesmo com o uso de um dos três formatosdescritos acima, tendo sempre como parâmetro que uma figura com15Kb leva aproximadamente 6 segundos para ser carregada com ummodem de 28,8Kbps.

A resolução da imagem é outro parâmetro importante pois os monitoresconseguem exibir somente figuras com aproximadamente 72 pixels porpolegada, não adiantando portanto, ter uma imagem com 600x600 pon-tos por polegada de resolução, fazendo apenas o arquivo ficar enormesem nenhum benefício prático.

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 alocalização da imagem, que pode estar tanto no mesmo diretório quantoem qualquer lugar da WEB. O conjunto destes dois elementos formam aetiqueta <IMG SRC=”URL_da_imagem”> indicando uma imagem nocódigo HTML.

O URL é o local da Internet onde a imagem está - seu endereço, porexemplo: “http://www.america.com.br/brasil.gif”. Quando a imagem esti-ver no mesmo diretório que o arquivo HTML, não é necessário indicartodo o endereço bastando apenas informar o nome.

No exemplo a seguir é utilizado o comando IMG para exibir as bandeirasde 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>

Programando em HTML


ATRIBUTOS

Além do atributo SRC, o elemento IMG possui outros atributos opcionaisque determinam o tamanho da imagem, seu alinhamento, como será aborda 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 aimagem, ou quando ela não é carregada pelo navegador.

ALIGN - Determina o alinhamento da imagem em relação ao texto, e àslaterais da janela do navegador. Podendo ser: top, middle, bottom, left eright.

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 caberna 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 valorabsoluto quanto em porcentagem do tamanho da janela.

HEIGHT - Determina a altura da imagem e funciona semelhante aoWIDTH.

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=middleWIDTH=50> ) é pouco conhecida por nós.<BR>

</BODY></HTML>

Programando em HTML


O atributo ALIGN alinha a imagem com relação ao texto utilizando osparâmetros top, middle e bottom. Os parâmetros left e right alinham aimagem em relação à borda da janela. E caso não seja especificado umvalor para o atributo ALIGN, o padrão será: ALIGN=bottom.

Neste próximo exemplo são utilizados outros parâmetros de ALIGN etambém para borda e espaçamentos. Salve-o com o nome deguiana.htm.

<HTML><HEAD><TITLE>Imagens</TITLE></HEAD><BODY>

<H1>GUIANA</H1><IMG SRC=”guiana.gif” ALT=”Guiana” ALIGN=leftVSPACE=5 HSPACE=10>Antigamente uma colônia holandesa, que passa a sercontrolada pelos ingleses em 1815 após grandesdisputas. Rivalidades entrenegros escravos trazidos pelos holandeses,indianos trazidos pelos ingleses e indígenasnativos passam a fazer parte do contextonacional. Após a independência em 1966, dão iniciodiscussões com a Venezuela e o Suriname a respeitode divisas territoriais, que são resolvidasdiplomaticamente.<P>

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, HSPACEe 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 tipospermitidos na Web e não ser muito grande, evitando uma demora nocarregamento 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

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, ficandoo navegador responsável pela sua repetição.

Como exemplo vamos utilizar uma figura pequena chamada fundo1.gif euma maior com o nome de fundo2.jpg.

A figura de fundo é adicionada ao código HTML utilizando-se o parâmetroBACKGROUND da etiqueta BODY juntamente com o URL da imagemdesejada.

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

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 textoe dos links. As cores são atribuídas da mesma forma que é feita paramudar 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 documentoBGCOLOR - cor de fundo do documentoTEXT - cor do texto, padrão=pretoLINK - cor do link, padrão=azulVLINK - cor do link visitado, padrão=vermelho-púrpuraALINK - 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 oservidor não encontrar a figura de fundo, tornando o texto ilegível em umfundo 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 corespadrão.

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 HTMLque servem como referência ao acesso à outros documentos a partir deum 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 coordenadasque depende do formato de cada região escolhida. São elas:

Retângulo = esquerda, topo, direita, base (x1, y

1, x

2, y

2)

Polígono = x1, y

1, x

2, y

2, ..., x

N, y

N(x

1, y

1, x

2, y

2, x

3, y

3)

Círculo = centroX, centro

Y, raio (x

1, y

1,r)

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 suascoordenadas 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 umclique na região delimitada.ALT - Texto alternativo que aparece, caso a figura não possa ser exibidaou quando o ponteiro do mouse ficar parado por alguns instantes sobre aregião.

Faça o exemplo a seguir, utilizando a figura mapa_robo.gif como ummapa 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"

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 ouFireworks, 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 diversaspáginas, que será criada com um programa específico para mapear figuras.

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. Ouso do hipertexto também facilita a edição de documentos longos, pois ousuário pode facilmente ir de um ponto ao outro, acessando tópicos ouseções com apenas um clique.

Essas ligações entre documentos HTML são chamadas de hypertextlinks ou hiperlinks (ligação de hipermídia) ou simplesmente links. Quesão ligações entre dois pontos, a fonte e o destino.

A fonte de uma hiperligação é comumente chamada apenas de link, queo navegador destaca geralmente em azul e sublinhado, indicando quesão ligações de hipertexto. Este link pode ser qualquer texto ou imagemque ao ser clicado levará o usuário até o destino.

O destino ou âncora é um ponto de referência de um documento ouendereço que será acessado por um link quando o usuário der um cliquenele 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 paratrechos de documentos.

LINKS PARA ARQUIVOS

Âncoras locais são aquelas que estão no mesmo site do link que aschama, ou seja, estão no mesmo diretório ou em subdiretórios do diretórioonde 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 seracessado.NAME - Determina o nome do destino a ser acessado por um link - âncora.

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

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 colonizadapelos 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 árvorede 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 daEuropa, é necessário subir um nível com “../” e depois descer até imagens:

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

Programando em HTML


E para subir dois níveis e descer um, se a imagem estiver na pastasimbolos:

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

Os caminhos para os links criados anteriormente são chamados Linksrelativos, pois informam a localização completa do arquivo desejadotendo apenas como base o diretório da arquivo ativo. Os links podemconter também o caminho completo do arquivo, quando são chamadosLinks absolutos, úteis quando tem-se a certeza de que o arquivo dedestino 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 seracionado 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 RioGrande do Sul</A>

<A HREF=”ftp://ftp.netscape.com/pub/”>DownloadNetscape</A>

<A HREF=”mailto:[email protected]”>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:

<AHREF=”mailto:[email protected]?SUBJECT=Convite”>

Convite</A>

E inclua um texto padrão na mensagem, acrescentando &BODY= e otexto, da seguinte forma:<A HREF=”mailto:[email protected]?SUBJECT=Convite

&BODY=Quero receber o convite para seu próximoevento.”>Convite</A>

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 permiteuma navegação mais rápida em documentos longos, pois através dosumá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=5COLOR=navy>Argentina</FONT></A><P>A Argentina é um dos países que fazem fronteiracom 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 defronteiras.<BR><P ALIGN=right><A HREF=”#topo”>Voltar</A><HR SIZE=5>

</BODY></HTML>

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

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 umaseçã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>

Programando em HTML


<A NAME=”argentina”><FONT SIZE=5 COLOR=navy> Argentina</FONT></A><P>A Argentina é um dos países que fazem fronteiracom 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 defronteiras.<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>

Programando em HTML


Repare que quando a imagem é um link, ela é envolvida por uma moldurada mesma cor que um link de texto.

Também pode existir hiperlink ligando um documento e uma seção deoutro. Vamos supor que no exercício anterior, os textos sobre os paísesestivessem em outro documento HTML, para acessarmos uma das se-ções deste segundo documento necessitaríamos construir um hiperlinkcom 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 osnomes 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 fronteiracom o Brasil.<BR><P ALIGN=right><A HREF=”index.htm#topo”>Voltar</A><HR SIZE=5><BR><BR><BR><BR><HR>

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 defronteiras.<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 suasregiões associada a uma determinada âncora, que pode estar tanto nomesmo 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 destavez iremos utilizar um programa chamado Map This.

O Map This é um programa freeware que você encontra no endereçoabaixo, ou em algum site de busca.

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

Esse programa faz somente o mapa da figura não realizando qualquermodificaçã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.

Programando em HTML


Como exemplo escolha a figura mapa_robo.gif utilizada anteriormentecomo modelo de mapa.

Esta programa possui botões na barra de ferramentas associados aosparâmetros do atributo SHAPE da tag AREA e outros botões operacionaisque 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.

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 centroda região a ser demarcando até sua periferia.

Um polígono (POLY) é demarcado com um clique em cada um dos seusvértices, fechando ele com um duplo-clique no último vértice.

Demarque todas as áreas do robô como mostra a figura abaixo. Sendoque o retângulo deverá ser feito primeiro, pois senão o usuário não teráacesso aos círculos que estarão sobrepostos.

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 AreaInfo 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 commentabout this area, escreva o texto alternativo mostrado quando o ponteiroficar sobre a área ou se a figura não for carregada pelo navegador.

No exemplo iremos construir quatro links, para os seguintes locais: duaspá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:

Rostorosto.htmRetângulo

Cabelocabelo.jpgPolígonoNariz#narizPolígono

Olhoolho.htmCírculosComentárioURLObjeto

Após estas definições Map This nos oferece a possibilidade de testar omapa 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 comos seus propósitos, basta selecioná-la e editar arrastando um dos seuspontos de delimitação ou então apagá-la para fazer uma nova área.

Programando em HTML


Quando o mapa estiver do seu gosto, clique no menu File >> Save e nacaixa de diálogo Setting for this Mapfile dê o nome cabeca_robo parao mapa, escreva seu nome como autor e na caixa de texto Default URLdigite “#fora” para âncora quando o usuário clicar em uma região nãomapeada 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 seueditor de HTML ou com o Bloco de Notas do Windows. Este arquivo deveestar 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

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 paratornar este mapa funcional, precisamos indicar qual é a figura de base,como fizemos anteriormente no tópico de figuras, e completar o códigopara 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"

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 nenhumapretensão de funcionar como o nariz dosanimais.<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 orosto, chamadas olho.htm e rosto.htm respectivamente, para testarcompletamente o funcionamento do mapa que acabamos de construir.

Programando em HTML


TABELAS

As tabelas são utilizadas para controlar vários aspectos da formataçãode uma página, organizando informações através de linhas e colunas.Com elas podemos criar layouts de páginas utilizando-as para demarcarregiões onde serão colocados textos e figuras.

Uma tabela é construída com a tag <TABLE> e </TABLE> que marcamo 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 deuma 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 oselementos 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>

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 espessuradas 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 alinhamentodo 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 = pixelALIGN = [ 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 ealinhamento. 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 colocandonegrito em seu conteúdo.

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>

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 nacélula, basta utilizar a tag IMG logo após a tag TD.

ANINHANDO TABELAS

As tabelas também podem ser aninhadas, contendo uma tabela dentrode outra e assim sucessivamente. Fazemos isso colocando a definiçãode 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 nossaprimeira tabela dentro de uma tabela maior sem bordas, contendo umacélula com uma imagem.

<TABLE><TR>

<TD><IMG SRC=”america_sul3.gif”><TD>

<TABLE BORDER><TR>

<TH>País

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>


</TR></TABLE>

</TABLE>

Enquanto construímos tabelas aninhadas, é muito importante observar-mos a abertura e fechamento de cada uma delas para uma perfeitavisualizaçã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.

Programando em HTML


MESCLANDO CÉLULAS

Em uma tabela HTML podemos mesclar células umas com as outras damesma 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 eTH.

ROWSPAN = número

COLSPAN = número

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

Altere a página do nosso exemplo incluindo mais uma coluna com umacé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>

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 defundo alterada pela atributo BGCOLOR. Na tag TD este atributo funcionada mesma forma quando o usamos para colorir o fundo da página. Astags TABLE e TR também podem ter sua cor de fundo alterada, sendoque <TABLE BGCOLOR=xxxx> altera a cor de toda tabela, e <TRBGCOLOR=xxxx> altera a cor de fundo da linha. A definição de cor paraa célula sobrepõe a cor da linha que por sua vez sobrepõe a cor dadapara 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.

Programando em HTML


No exemplo a seguir, utilizamos várias cores para cada uma das tagsque compõem a tabela e mesclamos duas células em linha e mais duasem 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>


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

Programando em HTML


ALTERANDO DIMENSÕES

Quando uma tabela é criada, as dimensões das linhas e colunas sãodeterminadas pelo maior conteúdo existente na célula. Na célula queconté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 atributoWIDTH, que pode ser informado em porcentagem ou em pixels. Sendoque na tag TABLE a largura proporcional é em relação à dimensão dajanela do navegador e na tag TD esta proporção é em relação à largurada 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>

Programando em HTML


A linha da tabela pode ter sua altura modificada pelo atributo HEIGHTfuncionando 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 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 suaborda, indicado também por um número de pixels.

Programando em HTML


<TABLE BORDER CELLPADDING=5 CELLSPACING=0><TR>

<TH BGCOLOR=silver>&nbsp <TH>A <TH>B <TH>C</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 naparte superior ou inferior delas para mostrar um título ou a fonte dos seusdados. Em uma página HTML as legendas são feitas pela tag CAPTIONcolocada 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

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 atributoBACKGROUND com seu valor igual o URL da imagem desejada, comoutilizado para página.

No exemplo seguinte, está sendo utilizado o atributo BACKGROUNDpara colocar uma imagem no fundo da tabela e também links sob o mapade 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>

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>

Programando em HTML


FRAMES

Frame ou moldura é um recurso da linguagem HTML que permite aonavegador exibir duas ou mais páginas simultaneamente na mesma ja-nela. Caso você tenha a necessidade de exibir uma página contendo aapresentação da empresa e uma lista de seus produtos e mais umapágina para cada produto, o usuário teria que voltar para a página deapresentação se desejasse ver outro produto.

Com o uso do frame, a lista de produtos poderá ser constantementeexibida enquanto o usuário visualiza os produtos em uma outra moldurana 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 oconteú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áginamenu.htm poderemos acessar as páginas empresa.htm, produtos.htme servicos.htm e a partir delas o menu novamente.

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ç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ções para o ramo de veículos. Com uma política de Qualidade e Tecnologia enfrentamos com otimismo

e confiança todos os obstáculos,

pois o desafio para oferecer a melhor soluçã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>

Programando em HTML


<BODY><FONT SIZE=5 COLOR=red FACE=algerian> PRODUTOS</FONT><P><FONT SIZE=4 COLOR=maroon>Vendemos o que h&aacutede 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>

Programando em HTML


servicos.htm<HTML><HEAD>

<TITLE>Serviços</TITLE></HEAD><BODY><FONT SIZE=5 COLOR=red FACE=”algerian”> SERVIÇOS</FONT><P><P ALIGN=justify>Nós oferecemos a melhor orientação aos nossos clientes na escolhe do produto que melhor atende àssuas exigências. Além de dar manutenç&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>

Programando em HTML


Antes de trabalhar com frames é necessário um planejamento prévio decomo será o lay-out da página e de que modo os frames estarão. Nesteplanejamento deverão ser determinadas as dimensões de cada frame,bem como se a janela do navegador será dividida em colunas, linhas ouuma 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. Estatag possui os seguintes atributos:

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

Os valores dos atributos COLS e ROWS podem ser um número inteiroem 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 eporcentagem, então divide o espaço remanescente entre todos elemen-tos com dimensões relativas. Para um elemento com comprimento de3* será destinado o triplo do espaço de um elemento com comprimento1*. O valor * é equivalente a 1* e é muitas vezes usado para preencher oespaç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á carregadadentro do frame. A tag FRAME substitui a tag BODY dos documentoHTML 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>

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çõesindicadas 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>

Programando em HTML


COMPOSIÇÕES COM FRAMES

Para dividir uma janela com frames em linhas e colunas, é necessáriocombinar 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>

Programando em HTML


<FRAMESET COLS=”30%,*”><FRAME SRC=”a.htm”><FRAMESET ROWS=”30%,*”>

<FRAME SRC=”b.htm”><FRAME SRC=”c.htm”>


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


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

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.

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

Programando em HTML


LIGANDO FRAMES

Até agora trabalhamos com frames exibidos de uma forma independenteuns dos outros, criando um documento principal que exibe outros emmolduras separadas, sem nenhuma ligação um com o outro.

Para fazer esta ligação devemos primeiro nomear cada frame no arquivoprincipal para depois com o atributo TARGET poder apontar o link para oframe 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 vinculadoaos links da página, que pode ser tanto um frame quanto uma outra URL.Seus atributos são:

HREF = URL

TARGET = Frame

Programando em HTML


No próximo exercício faça uma arquivo principal definindo o nome dosframes, 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 emoutro 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>

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árioder um clique nele, a página empresa.htm será carregada no lugar ocu-pado pela página menu.htm.

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 deframes no lugar da página produtos.htm. Esta nova página terá um framesuperior 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.htmfazendo ela apontar para a nova página:

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çãodos 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 outrostrê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>

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


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


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ãodos visitantes, fazer uma votação onde os visitantes escolhem entre umitem e outro, etc, assim, podemos concluir que os formulários permitemcoletar 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 tenhaum programa, escrito em outra linguagem, responsável em receber eprocessar 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 oferecemopçõ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.

Programando em HTML


Os itens numerados na figura anterior representam alguns objetos deformulário, os quais são denominados:

1, 2 e 5 – Campo de texto3 e 4 – Menu de lista6 - Botões de opção7 - Área de texto8 e 9 - Botões de comando

Além desses quatro objetos, ainda temos: caixa de seleção, campo dearquivos, campo de imagens, campo oculto e menu de salto.

Campos de texto: também chamados caixas de texto, são utilizadospara 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 emuma linha simples.Botões: realizam tarefas quando são clicados, ou seja, são aquilo quefaz o formulário fazer algo, como enviar as informações e redefinir osdados 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çõesem 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 emgrupos. A seleção de um dos botões do grupo cancela a seleção detodos os outros.Menus de lista: apresentam um conjunto de valores que os usuáriospoderão escolher.Campos de arquivos: permitem que o usuário procure os arquivos nosdiscos 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 foremrelevantes 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 vinculaa um documento ou arquivo.Área de texto: é uma caixa de texto onde o usuário pode digitar inúmerapalavras com linhas múltiplas (exibem uma barra de rolagem).

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 queirá 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>, tendoos dados digitados pelo usuário atribuídos a uma variável com nome etipo 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.

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ário</TITLE><HEAD><BODY><P ALIGN=”center”><FONT FACE=”Arial Rounded MTBold, Bookman Old Style, Brush Script”COLOR=”#3300CC” SIZE=”5">Exemplo deformulá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ávelpara todos do mesmo grupo mas com valores diferentes.

<P><B>Opçõ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>

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óvel<BR><INPUT TYPE=”checkbox” NAME=”bens” VALUE=”televisao”>Televisão

</TR></TABLE>

O menu de lista é criado com as tags <SELECT>...</SELECT>, quedefine a lista e seu comportamento, e <OPTION>, que define os ele-mentos de escolha da lista. Numa lista o usuário escolhe um ou maisitens após dar um clique na sua seta.

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ço

</SELECT></P>

Criamos uma área de texto com a tag <TEXTAREA>...</TEXTAREA> eseus 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 deagradecimento ao usuário. Este scrip recebe valores de campos ocultos

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çãodeste 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 MTBold,

Bookman Old Style, Brush Script” COLOR=”#3300CC”SIZE=”5">Exemplo de Objetos de Formulário</FONT></P>

<FORM METHOD=”post”ACTION=”http://www.dominio.com.br/cgi-bin/ enviarform.cgi”><INPUT TYPE=”hidden” NAME=”emaildestino” VALUE=”[email protected]”><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ço

</SELECT><INPUT TYPE=”text” NAME=”ano” MAXLENGTH=”4”

Programando em HTML


SIZE=”6"></P><P><B>Opçõ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á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>

Programando em HTML


FAZENDO O FORMULÁRIO FUNCIONAR

Toda vez que um usuário preenche os campos do formulário e clica nobotã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 possuio 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áveln=nome

n”

Os formulários são enviados por um dos dois métodos: GET, que enviaos resultados do formulário no URL enviado para o script; e POST, quecodifica o material enviado para o script. Consulte seu programador ouadministrador de sistema para você saber determinar qual método deveser 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 scriptCGI recebendo a string com os valores da variáveis, enviará um e-mailpara você da seguinte forma:

Programando em HTML


Form ResultsThis form was submitted with a method ofPOSTThe URL it was posted from: http://www.dominio.com.br/formulario.htmThe host that posted it: 200.193.220.27 (200.193.220.27)Location of Thank You Page: http://www.dominio.com.br/grato.htmEmail Results to: [email protected]

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

Form Values—————Variable ‘nome’ = Hamilton LuizVariable ‘campoemail’ = [email protected] ‘data’ = 03Variable ‘mes’ = MarçoVariable ‘ano’ = 1968Variable ‘opcao’ = lazerVariable ‘comentarios’ = Gostei muito doque existe no seu site. Mas a parte visualdeixa a desejar.

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 delinha?

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ícioanterior.

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ãoutilizadas?

11. Faça o código da lista mostrada a seguir.

Programando em HTML


12. Complemente a lista anterior colocando pequenas definições em cadaum dos itens.

13. Altere a lista de forma que ela exiba pequenos quadrados no lugardos números.

14. Quais os tipos de imagens podemos carregar em uma página deInternet?

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, colocandoalgum texto antes e depois dela.

19. Faça uma página com a bandeira Argentina e um texto do lado direitodessa 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 adescrição de suas partes.

22. Continuando com o exercício anterior, crie uma lista abaixo do mapacom 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.

Programando em HTML


25. Coloque uma legenda na tabela anterior e mais uma coluna comfigura 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 abrauma 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áticahttp://www.celtainformatica.com.br

Documents

00060 - Programando em HTML