Apostila de Criaçao de Páginas para Intenet

Prévia do material em texto

Criação de Páginas
HTML
Volume I
COTUCA – Colégio Técnico de Campinas
Departamento de Processamento de Dados
Curso Técnico em Informática
1o Semestre de 2002
Depto. Processamento de Dados Criação de Páginas HTML
- 2 -
Índice
1. INTRODUÇÃO À INTERNET..................................................................................4
1.1 PRINCIPAIS SERVIÇOS DA INTERNET.......................................................5
1.2 O QUE SÃO SITES DA INTERNET...............................................................9
1.3 BROWSERS ................................................................................................10
1.4 ELEMENTOS ENVOLVIDOS EM UMA CONEXÂO INTERNET..................10
1.5 TIPOS DE CONEXÕES COM A INTERNET................................................12
2. Introdução ao HTML .............................................................................................13
2.1 MARCAÇÕES (TAGS).................................................................................13
2.2 CRIANDO DOCUMENTOS HTML ...............................................................14
2.3 ATIVIDADES PARA FIXAÇÂO ....................................................................16
3. Formatação de Texto ............................................................................................18
4. Criando Listas .......................................................................................................22
4.1 Listas Não-Numeradas ................................................................................22
4.2 Listas Numeradas ........................................................................................22
4.3 Listas de Definição.......................................................................................23
4.4 Listas Intercaladas .......................................................................................24
5. Inserindo Imagens.................................................................................................25
5.1 Manipulando Imagens..................................................................................25
5.2 GIF Intrelaçado (Interlaced Gif)....................................................................26
5.3 Imagens Transparentes ...............................................................................26
5.4 Imagens Sensíveis.......................................................................................27
6. Criando Links (Internos e Externos ao Documento)..............................................31
6.1 Interligando Documentos .............................................................................31
6.2 Interligando Documentos em Outros Diretórios ...........................................31
Depto. Processamento de Dados Criação de Páginas HTML
- 3 -
6.3 Ligando URL’s..............................................................................................32
6.4 Ligando sessões específicas em outro documento......................................33
6.5 Interligando sessões em uma página...........................................................33
7. Criando Tabelas....................................................................................................35
8. Frames ..................................................................................................................41
8.1 Frameset ......................................................................................................41
8.2 Frame...........................................................................................................44
8.3 Noframes......................................................................................................45
8.4 Intercalando Frameset - exemplos...............................................................47
8.5 Links entre frames........................................................................................48
9. Formulários ...........................................................................................................50
9.1 Entrada de Texto..........................................................................................51
9.2 Menus ..........................................................................................................55
9.3 Botões ..........................................................................................................59
Depto. Processamento de Dados Criação de Páginas HTML
- 4 -
1. INTRODUÇÃO À INTERNET
Internet é uma grande rede de computadores interligados para troca de informações.
Esses computadores possuem as mais diversas arquiteturas e sistemas operacionais,
porém conseguem estabelecer uma comunicação entre eles de forma transparente para
os usuários. Quando um computador está ligado à internet, ele consegue receber
informações de qualquer computador que também esteja ligado à internet sem mesmo
saber onde é que este outro computador está fisicamente.
Para entender melhor toda essa história de Internet veja um pouco de histórico dos
acontecimentos relacionados com esta área.
O início de tudo isso se deu em função da preocupação do governo americano em
descentralizar as informações estratégicas e sigilosas dos seus bancos de dados. Para
tal, era preciso criar um meio de comunicação computadorizado, que permitisse a troca
de informações entre computadores distintos, com Sistemas Operacionais distintos sem
perceber essa distinção. Caso isso se tornasse uma realidade, qualquer ponto de
armazenamento físico de informação poderia ser destruído sem causar gigantescas
perdas, pois a informação estaria pulverizada pela rede, distribuída entre os vários
computadores que a compõe.
Toda essa preocupação se deu em plena guerra fria, na década de 50, logo após a
II Guerra Mundial. Nessa época, foi criada uma agencia do governo americano de nome
ARPA (Advanced Research Projects Agency ou Agencia de Projetos e Pesquisas
Avançadas) que tinha o objetivo de pesquisar e desenvolver novas tecnologias para as
forças armadas. Das pesquisas da ARPA surgiu, na década de 60, a ARPANet que deu
os primeiros sinais da realização da idéia de interligar pontos do mundo. Bem,
inicialmente os pontos ligados foram bases militares americanas, mas desse passo inicial
surgiu o que conhecemos hoje por internet.
Somente na década de 70 as universidades começaram a conectar-se à internet
expandindo o objetivo de uma rede militar para uma rede também acadêmica. A partir daí,
foi realizada a primeira conexão entre países utilizando cabos, rádio e satélites e a
internet não parou mais de crescer. Com o passar dos tempos a internet foi se
popularizando e se tornando um dos meios de comunicação e realização de negócios
mais utilizados no mundo.
Para que máquinas completamente diferentes e com sistemas operacionais distintos
pudessem conversar, foi necessário estabelecer um padrão de linguagem a ser utilizado
na comunicação entre essas máquinas e a esse padrão damos o nome de PROTOCOLO.
O padrão de comunicação da ARPANet foi aperfeiçoado por volta de 1974 e desde então
a internet adota como padrão o protocolo TCP/IP, que divide os dados em pequenos
pacotes e os envia pela rede. Cada pacote sabe onde deve chegar, ou seja, sabe o seu
destino e segue o melhor caminho possível no momento até chegar a ele.
No protocolo TCP/IP não podemos garantir a ordem de chegada dos pacotes. Pode
ser que a nossa informação seja dividida em três pacotes e que cada um deles siga um
Depto. Processamento de Dados Criação de Páginas HTML
- 5 -
caminho diferente para chegar ao seu destino. Note que ambos tem o mesmo destino,
mas não necessariamente caminham juntos pela rede. Ao chegarem ao destino comum,
os três pacotes serão colocados em ordem e comporão novamente a informação original.
Isso se dá devido ao fato do protocolo TCP/IP não serorientado a conexão, ou seja, ele
não estabelece um canal individual de comunicação entre dois computadores (como
acontece em uma conversa telefônica, por exemplo). Dizemos que o TCP/IP é um
protocolo orientado a pacotes.
Dissemos anteriormente que cada pacote sabe qual é o seu destino. Para que as
máquinas na internet possam ser identificadas, cada uma delas recebe um número, que
chamamos de Número IP ou Endereço IP. O protocolo IP versão 4 possui endereço IP
composto por 4 números separados por um ponto. Cada um desses números varia de 0 a
255 compondo números no seguinte formato: 143.106.1.3 ou 143.106.72.2. Algumas
combinações de números são reservadas para uso específico, mas não existe nenhum
número IP válido repetido e operante na internet. Caso duas máquinas estejam operando
com o mesmo endereço IP válido, ocorrerá um conflito de IP e pelo menos a segunda
máquina a entrar na internet não funcionará corretamente. Redes iniciadas pelo número
10 não são válidas na Internet, portanto 10.0.3.1 não é um endereço válido.
No início, todo computador que estava conectado à internet (portanto tinham um
endereço IP único) e que quisesse estabelecer uma comunicação com outro computador
também na internet deveria saber qual era o endereço dessa máquina destino. Com o
aumento das máquinas na internet foi ficando cada vez mais complicado o acesso aos
computadores da rede através da utilização de seus endereços IP. Para solucionar este
problema, foi criada uma forma de associar os endereços IP a nomes facilmente
lembrados pelos seres humanos. Nasceu então o que conhecemos por DNS (Domain
Name Service).
Quando queremos acessar o site do COTUCA, por exemplo, digitamos
www.cotuca.unicamp.br. Essa URL (Uniform Resouce Locator) é convertida em números,
143.106.250.34, por exemplo, e o computador que tem esse endereço IP (computador
que hospeda o site do COTUCA) envia ao seu browser a página inicial do site. Podemos
perceber então que cada site tem dois endereços, um alfanumérico
(www.cotuca.unicamp.br), que chamamos de URL, e um numérico (143.106.250.34) e
pode ser acessado por qualquer um dos dois.
1.1 PRINCIPAIS SERVIÇOS DA INTERNET
Não é apenas de navegação que vive a internet.
Com a popularização da internet, vários serviços oferecidos por ela se tornaram
bastante utilizados e continuam sendo até hoje. Vejamos, a seguir quais são os serviços
mais utilizados na internet.
Depto. Processamento de Dados Criação de Páginas HTML
- 6 -
1.1.1 FTP (File Transfer Protocol)
O serviço FTP permite a transferência de arquivos entre computadores na Internet.
Seu funcionamento baseia-se no estabelecimento de uma sessão limitada entre o cliente
FTP local (o seu computador) e servidor FTP remoto (o servidor de FTP da unicamp, por
exemplo). No servidor remoto a sessão é autenticada, via prompt de comando que
requisita o nome de login e senha do usuário. Essa sessão possui apenas comandos
referentes à manipulação de arquivos.
Existe um tipo de servidor de FTP que chamamos de servidor FTP anonymous, que
disponibiliza uma conta especial com autenticação flexível (nome de login: anonymous, e
a senha normalmente é apenas o endereço de correio eletrônico do usuário), permitindo
um acesso com restrições aos dados do repositório de arquivos e informações.
Por medidas de segurança e disponibilidade, usa-se um FTP mirroring, que
disponibiliza cópias de um dado repositório em mais de um servidor FTP.
Alguns servidores varrem um cadastro de servidores FTP anonymous e criam bases
de dados a partir do conteúdo desses servidores, esse processo é conhecido como
archie. Permite que um usuário que deseja obter um dado arquivo de domínio público
obtenha de um desses servidores archie sua localização. O acesso pode ser feito via
programas clientes archie, ou via telnet com uma conta especial do servidor archie ou via
correio eletrônico, associado a um programa que interage com o servidor archie.
1.1.2 E-Mail (Eletronic Mail)
São serviços que permitem a troca de mensagens entre usuários através da
Internet. Sendo os serviços de maior alcance da Internet, possibilita a troca de
mensagens entre usuários de várias redes de serviço (CompuServe, Americam OnLine,
Bitnet, etc) até usuários de rede coorporativas não totalmente interligadas a Internet.
Seu funcionamento tem como base um endereço conhecido como endereço de
correio eletrônico (e-mail address), cujo formato é: usuario@servidor. Onde usuario
representa o identificador de uma caixa postal e servidor representa o domínio ou nome
completo de uma máquina que será responsável por armazenar a mensagem até que o
destinatário a receba.
O endereço eletrônico pode estar associado a um usuário, a um grupo de usuários
ou mesmo a um serviço a ser prestado que usa o correio eletrônico como meio de
transporte.
Seu funcionamento é baseado no paradigma “store-and-forward” não tendo
interação entre usuários e sim softwares servidores responsáveis por executar e
gerenciar a transferência de mensagens.
Os principais componentes de um sistema de correio eletrônico são:
Depto. Processamento de Dados Criação de Páginas HTML
- 7 -
ÿ Agente usuário aplicativo que interage com o usuário, responsável pela
edição de mensagens a serem transmitidas e a obtenção das mensagens
recebidas (Eudora, Elm, Mail, Outlook, etc.)
ÿ Agente transporte aplicativo responsável pelo transporte de mensagens
entre os pontos envolvidos, locais ou remotos (Sendmail usando SMTP).
ÿ Mail boxes caixas postais onde são armazenadas as mensagens
recebidas.
ÿ Gerente de mail boxes aplicativo responsável pelo gerenciamento das
caixas postais. O gerente é necessário especialmente quando os softwares
agente usuário e o agente transporte de mail não residem em mesmo
equipamento.
Outros serviços baseados no sistema de correio eletrônico:
ÿ Listas de discussão: (mailing lists) baseado na associação de um
endereço de correio eletrônico a várias caixas postais (uma lista de
usuários), de forma que uma mensagem enviada a esse endereço é
recebida em todas as caixas postais. Sendo classificadas como:
o Simples, sem controle sobre as mensagens e cadastramento de
usuários.
o Moderada, com controle sobre as mensagens por um usuário
moderador.
o Fechada, com controle sobre o cadastramento de usuários.
1.1.3 HTTP (HyperText Transfer Protocol)
O HTTP é o protocolo utilizado na comunicação entre o servidor Web e o browser.
Uma conexão http é realizada através de comandos telnet, que por sua vez são
formados por mensagens de texto trocadas através de uma conexão de rede. Um
exemplo:
telnet www.cotuca.unicamp.br 80
GET /index.html http/1.0
O valor 80 se refere ao número da porta destinada a conexões com o servidor Web.
Depto. Processamento de Dados Criação de Páginas HTML
- 8 -
1.1.4 News
É composto por informações agrupadas por categorias e softwares responsáveis
pelo seu intercâmbio, divulgação e acesso.
Originado a partir dos usuários da rede Usenet (uma rede acadêmica de
equipamentos com sistema operacional Unix, conectados através de linhas discadas via
UUCP), atualmente amplamente difundido pela Internet.
Newsgroup são categorias de news onde as informações são agrupadas,
organizadas de forma hierárquica, partindo da atividade até o assunto. Exemplo
rec.music.classic, música clássica, da atividade música, que é atividade recreativa.
Os newgroups são classificados como:
� Newsgroups livres, não tem controle sobre suas informações.
� Newgroups moderados tem uma triagem das informações antes de sua
publicação.
A unidade que compõe o newsgroup é denominada de artigo, tendo o formato
semelhante a uma mensagem de correio eletrônico.
Não existe um catálogo único de todos os newsgroups existentes, pois estes grupos
estão relacionados a assuntos de interesse local.
Usuários podem participar desses grupos a partir da seleção de um ou mais gruposde seu interesse para leitura de artigos ou até mesmo o envio de artigos próprios ou
respostas a outros artigos.
1.1.5 Telnet
Permite a execução de aplicações em outras estações da rede, com a interação a
partir do terminal ou estação local.
As estações remotas devem possuir mecanismos de autorização de acesso via um
sistema de contas (login).
O funcionamento do serviço telnet tem as seguintes características:
ÿ O usuário interage com um software cliente telnet selecionando a estação
remota que deseja executar uma aplicação.
ÿ Na estação remota é acionado um servidor telnet, que disponibiliza um
prompt (nome de login e senha) para estabelecimento da sessão.
Depto. Processamento de Dados Criação de Páginas HTML
- 9 -
1.1.6 SSH
SSH (Secure Shell) é um programa similar ao telnet, porém permite que todos os
dados que serão trocados na conexão sejam criptografados, ou seja, fornece uma
conexão segura entre o cliente e o servidor.
1.2 O QUE SÃO SITES DA INTERNET
Chamamos de Site o conjunto de páginas que tratam de um mesmo assunto. Os
sites possuem vários objetivos, por exemplo, a divulgação de empresas, produtos,
serviços, filantropia, comércio eletrônico e informações em geral.
Os sites podem ser estáticos ou dinâmicos. Os sites estáticos são aqueles que não
utilizam Banco de Dados, ou seja, não utilizam linguagens dinâmicas, constituindo-se
apenas em sites de divulgação de informações que não sofrem alterações constantes. As
alterações das informações em sites estáticos obrigatoriamente envolvem a figura de um
profissional da informática.
Sites dinâmicos são aqueles que utilizam Banco de Dados como fonte de
informação. São desenvolvidos utilizando linguagens dinâmicas para gravar e recuperar
informações de Banco de Dados. O exemplo mais clássico de sites desse tipo são os
sites de E-commerce, onde os produtos disponíveis e seus preços são constantemente
alterados por transações realizadas por sistemas de compra e venda de mercadorias.
Ao longo do desenvolvimento tecnológico da internet, os sites também foram
evoluindo em formato e em tecnologia. Podemos classificar os sites em três gerações,
que são:
� Sites de Primeira Geração: Foram os Primeiros sites feitos por
pesquisadores (alunos, professores e cientistas) que tinham como único
objetivo divulgar informação. São sites estáticos e sobre os quais o
desenvolvedor teve apenas a preocupação mínima com estética.
� Sites de Segunda Geração: Com a popularização da internet e a abertura
do comércio utilizando a internet foi necessário criar atrativos para que os
internautas visitassem e permanecessem utilizando os sites. Foi então que
surgiu a preocupação não somente com o conteúdo do site, mas também
com a sua estética. Surgiram os sites animados utilizando a tecnologia dos
applets Java e mais tarde a tecnologia Flash. Porém, houve um excessivo
uso de animações o os sites se tornaram muito pesados, confusos e
lentos.
� Sites de Terceira Geração: Após o grande glamour dos sites animados,
houve a interferência de profissionais da informática que uniram o atrativo
das animações à necessidade de organização das informações procurando
cada vez mais satisfazer os navegadores, exibindo o site de forma rápida,
animada e principalmente organizada. Mas a grande alteração no
comportamento dos sites de terceira geração foi a interação com
Depto. Processamento de Dados Criação de Páginas HTML
- 10 -
programas gerenciadores de banco de dados para a extração de
informações atualizadas a cada nova solicitação de exibição da página.
Com essa possibilidade de atualização da informação surgiram as páginas
dinâmicas.
1.3 BROWSERS
A palavra browser aplicada à informática significa programa visualizador. Em linhas
gerais, o browser é utilizado para visualizar sites e navegar através de seus links.
Os browsers para a Internet também são chamados Navegadores, pelo fato de o
Netscape Navigator ser o browser pioneiro e que inicialmente tomou conta do mercado.
Assim, "navegar” ou “surfar" é "passear" pela Internet em busca de informação (com
ou sem objetivo específico).
Todo browser tem a capacidade de interpretar a linguagem HTML, que é padrão de
desenvolvimento de páginas para internet e é desejável também que seja capaz de
interpretar linguagens de script (JavaScript, VBScript, Perl) que são muito utilizadas hoje
em dia.
1.3.1 Qual é o melhor navegador?
A princípio, não existe um melhor, mas duas empresas concorrentes dominam o
mercado: a Netscape, proprietária do Netscape Communicator e a Microsoft, fabricante
do Internet Explorer.
Isso significa que o Internet Explorer - pelo fato ser instalado juntamente com o
Windows - é mais facilmente encontrado nos computadores, o que nos traz uma idéia
errônea de que existe um navegador melhor.
1.4 ELEMENTOS ENVOLVIDOS EM UMA CONEXÂO INTERNET
Para estabelecermos uma conexão com a Internet, além de um computador,
precisamos ainda de outros elementos computacionais, que são basicamente:
� Computador
� Modem
� Linha Telefônica
� Provedor
� Softwares de Comunicação
Depto. Processamento de Dados Criação de Páginas HTML
- 11 -
1.4.1 Computador
Muito pouco é exigido de um computador para que ele esteja apto a estabelecer
uma conexão com a Internet. A configuração mínima para um computador é processador
486, com 8 MB de Memória RAM e monitor colorido. Porém, somente isso não basta, é
necessário que o computador tenha um Modem ligado a ele.
1.4.2 Modem
A palavra Modem é a junção das iniciais das palavras MOdulador e DEModulador e
é um equipamento que permite a comunicação entre o computador e a linha telefônica. É
este aparelho que traduz as informações que trafegam dentro do computador (sinais
binários) para sinais que trafegam na linha telefônica e vice-versa.
1.4.3 Linha Telefônica
É o meio através do qual as informações vão ser levadas de um lado pra outro.
Quanto melhor for a linha telefônica, melhor será a velocidade de acesso às informações
na internet, portanto procure usar linhas digitais no lugar de linhas analógicas.
1.4.4 Provedor
Chamamos de Provedor a empresa que nos dá acesso à Internet. Essas empresas
possuem conexões de alta velocidade com as empresas que ligam um país à rede
mundial e permitem que várias pessoas tenham acesso à internet ao mesmo tempo. No
Brasil existem quatro empresas que fazem a ligação do nosso país com o mundo através
da internet, são elas: Embratel (MCI), RNP (Rede Nacional de Pesquisas), Global One e a
Inpsat. A essas empresas estão ligados os nossos provedores (UOL, AOL, ig, Unicamp,
etc) e a eles nós estamos conectados.
1.4.5 Softwares de Comunicação
Chamamos de Softwares de Comunicação qualquer programa que permita o
estabelecimento de uma conexão com a internet. O mais conhecido deles é o Dial-Up
pois é um programa que vem instalado junto com o sistema operacional Windows. Os
programas de comunicação permitem que informemos um número de telefone a ser
discado, um nome de usuário e uma senha. Este programa então efetua uma ligação
telefônica para o número indicado (número do provedor) e solicita uma permissão de
acesso para o usuário e senha indicados. Se o usuário e a senha forem válidos, o
provedor estabelece a conexão com o seu computador e lhe permite acesso à internet.
Depto. Processamento de Dados Criação de Páginas HTML
- 12 -
1.5 TIPOS DE CONEXÕES COM A INTERNET
Para que um computador esteja ligado à internet, ele precisa estabelecer uma
conexão com um computador que lhe de acesso à espinha dorsal da internet. Esse
computador é chamado provedor de acesso e existem duas formas de estabelecermos
uma conexão com o provedor.
1.5.1 Acesso Discado
Conexões realizadas em modo discado são feitas a partir de uma linha telefônica
(como as que temos em casa). Esse tipo de conexão é utilizado por usuários caseiros e
por empresas de pequeno e médio porte.1.5.2 Acesso Dedicado
Conexões realizadas em modo dedicado são feitas a partir de uma linha telefônica
privada de dados, que chamamos de LP, que conecta o computador ou uma rede
diretamente ao provedor. Esse tipo de conexão é utilizado por empresas, condomínios,
escolas.
Depto. Processamento de Dados Criação de Páginas HTML
- 13 -
2. Introdução ao HTML
HTML (Hypertext Markup Language) significa Linguagem de Marcação de
Hipertexto. Esta é uma linguagem dedicada à construção de páginas Web.
O HTML é um tipo de documento que contém como característica principal a
presença de hipertextos, ou seja, clicando num texto marcado é possível acessar outros
textos, geralmente com assuntos relacionados.
Os documentos HTML são arquivos escritos em ASCII - texto. Podem ser criados
em qualquer editor de texto (vi, emacs, edit, notepad, etc.), como também em editores
específicos (FrontPage, Composer, etc.).
2.1 MARCAÇÕES (TAGS)
O HTML visa fornecer uma formatação do texto e ligação entre várias páginas. Para
realizar essas características, o HTML possui alguns comandos conhecidos como
marcações ou simplesmente tags. Uma marcação ou tag informa como o texto deverá ser
exibido.
As marcações do HTML (tags) são iniciadas com o sinal “<“ (o símbolo de "menor
que") seguido pelo nome da marcação e fechadas pelo sinal “>” (o símbolo de “maior
que").
De um modo geral, as tags aparecem em pares, por exemplo, <H1>
Cabeçalho</H1>. O símbolo que termina uma determinada marcação é igual àquele que
a inicia, antecedido por uma barra (/) e precedido pelo texto referente.
No exemplo, <H1> avisa ao cliente Web para iniciar a formatação do primeiro nível
de cabeçalho e </H1> avisa que o cabeçalho acabou.
Há exceções a esse funcionamento em pares das marcações. Por exemplo, a que
indica um final de parágrafo: <P> . Não necessita de uma correspondente: </P>. A
marcação que indica quebra de linha - <BR> - também não precisa de uma
correspondente, e outras tais como <HR> e <LI>.
Como exemplos de marcações comumente usadas temos:
• <TITLE> (e a correspondente </TITLE>), especificam o título de um documento.
• <H1> (e a correspondente </H1>), indica a aparência de um cabeçalho.
• <P> é a marcação para final de parágrafo.
Depto. Processamento de Dados Criação de Páginas HTML
- 14 -
2.2 CRIANDO DOCUMENTOS HTML
Todo documento para internet deve começar informando que é um documento
HTML através das tags <HTML> e </HTML>. Entre estas tags deverá estar todo o texto
da página, bem como suas respectivas tags de formatação. Para organizar o texto da
página, é possível definir o texto que será referente ao cabeçalho através das tags
<HEAD> e <HEAD> e o corpo do texto através das tags <BODY> e </BODY>.
Estrutura Básica de uma página HTML
<HTML>
<HEAD>
<TITLE> Título da Home Page </TITLE>
</HEAD>
<BODY>
Aqui você insere textos,
imagens, tabelas, etc.
</BODY>
</HTML>
Observe o documento a seguir:
Depto. Processamento de Dados Criação de Páginas HTML
- 15 -
Como podemos observar nos exemplos anteriores, a página possui duas partes: o
cabeçalho (HEAD) e o corpo do documento (BODY).
Os atributos do cabeçalho devem ser inseridos entre as tags <HEAD> e </HEAD>.
Por exemplo, temos os seguintes:
ÿ <TITLE> Título da página </TITLE> � insere o título que aparecerá na barra de
títulos do browser.
ÿ <META NAME=”Description” CONTENT=”Descrição da página”> � insere a
descrição da página que aparecerá nos sistemas de buscas.
A tag <BODY> determina onde começa e termina o corpo do documento. Nessa tag
é possível determinar algumas características do texto, como cor de escrita e background,
cor do texto referente à uma ligação a outro texto (link) e é possível também definir
características para o documento como, por exemplo, uma imagem de fundo para a
página.
Veja a linha de definição do corpo da página abaixo:
<BODY BGCOLOR="#000000"
TEXT="#FFFFFF"
BACKGROUND="fundo.gif"
LINK="#EEEEEE"
ALINK="#EEEEEE"
VLINK="#EEEEEE">
<HTML>
<HEAD>
<TITLE>Exemplo de HTML simples</TITLE>
</HEAD>
<BODY>
<H1>Este é o primeiro nível de cabeçalho</H1>
Bem-vindo ao mundo do HTML.
Este é o primeiro parágrafo.<P>
E este é o segundo.<P>
</BODY>
</HTML>
Depto. Processamento de Dados Criação de Páginas HTML
- 16 -
... Texto da Página ...
</BODY>
Dentro da tag <BODY>, estão definidas características que serão aplicadas no
texto que estiver entre as tag de inicio e fim do corpo do documento HTML. As
características definidas acima são:
� BGCOLOR ="valor" - Cor do fundo da página
� TEXT ="valor" - Cor do texto padrão
� BACKGROUND="fundo.gif" - Imagem a ser usada como pano de fundo
da página
� LINK ="valor" - Cor dos links
� ALINK ="valor" - Cor dos links acionados
� VLINK ="valor" - Cor dos links já visitados
Os valores para as cores devem ser escritos no padrão Hexadecimal. Para obter
uma lista de cores Hexadecimais consulte o Anexo I.
2.3 ATIVIDADES PARA FIXAÇÂO
1) Execute o editor notepad (Bloco de Notas) e digite as seguintes linhas:
<HTML>
<HEAD>
<TITLE>Curso de Informática - Criação de Páginas para Internet</TITLE>
</HEAD>
<BODY>
Seja Bem-Vindo à programação HTML !!!
</BODY>
</HTML>
2) Salve o documento acima com o nome Primeiro.HTML e execute essa Página em
um browser.
Depto. Processamento de Dados Criação de Páginas HTML
- 17 -
3) Perceba em que local do seu browser aparecem os textos indicados nas tags
<TITLE> e <BODY>.
4) Altere o seu documento para que o texto do corpo do arquivo seja exibido na cor
Vermelha (#FF0000).
5) Altere o seu documento para que a cor de fundo seja Amarela (#FFFF00).
Depto. Processamento de Dados Criação de Páginas HTML
- 18 -
3. Formatação de Texto
A interpretação de um arquivo HTML não se dá da mesma forma que a interpretação
de um arquivo de um editor de texto. Ao contrário dos editores de texto, o browser não
reconhece o pressionamento da tecla <enter> dentro de um arquivo HTML como uma
quebra de linha. Toda a formatação de texto, quebra de linha, centralização de parágrafo
deve ser realizada através de tags criadas para esse propósito.
Podemos aplicar diversas formatações ao texto. Para alterar o tipo da letra, cor e
tamanho, utilizamos a tag <FONT> e </FONT> e podemos determinar os atributos
desejados da seguinte forma:
<FONT COLOR = nome_cor > Texto </FONT>
<FONT FACE = tipo_letra > Texto </FONT> ,
<FONT SIZE =+n >Texto </FONT> , onde n seria o incremento ao tamanho original.
Os três comandos acima podem ser representador por uma única tag <FONT> da
seguinte forma:
<FONT COLOR = nome_cor
FACE = tipo_letra
SIZE =+n >
Texto
</FONT>
O parâmetro COLOR permite especificar a cor da letra que será aplicada ao texto.
Veja a tabela de cores no Anexo I.
O parâmetro FACE permite que seja escolhida uma forte diferenciada para o texto.
Várias fontes podem ser especificadas, dessa forma o browser verifica da lista de
possíveis fontes qual a primeira que está disponível no computador e a utiliza. Para
especificar várias fontes basta separa-las por vírgula.
O parâmetro SIZE permite especificar o tamanho da fonte a ser usado para o texto.
Podem ser especificados números de 1 até 7, sendo o padrão o número 3. Caso
utilizemos o sinal de adição (+) antes do número, estaremos indicando que esse número
deve ser acrescido no tamanho atual da fonte.
Em relação ao tamanho da letra, ainda temos as tags <H1> e </H1> que podem
variar em até 6 níveis. As tags H* são normalmente utilizadas para especificar títulos ou
níveis de cabeçalho (Header).
<H1> Tamanho H1</H1>
<H2> Tamanho H2</H2>
Depto. Processamento de Dados Criação de Páginas HTML
- 19 -
<H3> Tamanho H3</H3>
<H4> Tamanho H4</H4>
<H5> Tamanho H5</H5>
<H6> Tamanho H6</H6>
h6, h5,h4, h3 ,h2 ,h1
Veja a seguir uma tabela de outros estilosque podem ser aplicados a um texto:
TAG Efeito
<B> Texto </B> Aplica o estilo negrito (Bold)
<I> Texto </I> Aplica o estilo Itálico
<TT> Texto </TT> Aplica o estilo Typewriter deixando o texto com
espaçamento regular como de uma máquina de
escrever
<U> Texto </U> Aplica o estilo sublinhado
<SMALL> Texto </SMALL> Reduz a fonte do texto
<STRONG> Texto </STRONG> Similar ao negrito ( <B> )
<BIG> Texto </BIG> Aumenta a fonte e aplica o estilo negrito
<SUP> Texto </SUP> Aplica o estilo sobrescrito
<SUB> Texto </SUB> Aplica o etilo subscrito
<BLINK> Texto </BLINK> Aplica o estilo piscante
Para alinhar o texto à página, contamos com as seguintes tags:
TAG Efeito
<CENTER> Centraliza o texto em relação à página
<BR> Quebra de linha, iniciando o texto seguinte na linha logo abaixo
<P> Força o fim de um parágrafo, ou seja, pula uma linha antes de
iniciar outro parágrafo
Depto. Processamento de Dados Criação de Páginas HTML
- 20 -
<HR> Régua horizontal; inclui uma linha horizontal no texto, separando o
texto em blocos
WIDTH �� �� _% comprimento. Ex. width=50%
SIZE �� �� _ espessura do traço. Ex. size=6
<PRE> Respeita a formatação original do texto inserido na página
A marcação <BR> faz uma quebra de linha sem acrescentar espaço extra entre as
linhas. Veja a diferença do uso de <P> e <BR> nos exemplos a seguir:
<HTML>
<BODY>
<H1>Utilizando p</H1>
Vamos separar esta sentença com marcação de parágrafo.<P>
Para verificar a diferença.
<HR>
<H1>Utilizando br</H1>
Diferença quando separamos duas linhas utilizando<BR>
a marcação de quebra de linha<BR>
Diferença quando separamos duas linhas utilizando<BR>
a marcação de quebra de linha<BR>
Deu pra notar?
</BODY>
</HTML>
Veja a diferença no uso das duas notações:
Depto. Processamento de Dados Criação de Páginas HTML
- 21 -
Depto. Processamento de Dados Criação de Páginas HTML
- 22 -
4. Criando Listas
A utilização de listas em um documento HTML pode facilitar a organização e até a
navegação pelo seu site. Podemos utilizar listas para montar menus ou para montar um
sumário do conteúdo de suas páginas e permitir ao usuário acessar diretamente cada
uma das partes que compõe a sua página. Existem basicamente três formatos de listas.
As não-numeradas, as numeradas e as de definição.
4.1 Listas Não-Numeradas
As listas não-numeradas ou não ordenadas são aquelas que contém uma série de
itens indicados por símbolos, não por números. Para criar uma lista não numerada,
utilizamos a tag <UL> (Unordered List)
Para indicar que desejamos criar uma lista não numerada, devemos colocar todos
os itens dessa lista entre as tags <UL> e </UL>.
Cada item da lista deve ainda ser precedido da tag <LI>(List Item). Não é
necessário fechar a tag <LI> com a tag </LI>, porém essa é uma boa prática.
Abaixo o exemplo de uma lista com dois itens:
<HTML>
<BODY>
<H1>Vai aparecer assim...</H1>
<UL>
<LI> maçãs </LI>
<LI> bananas </LI>
</UL>
</BODY>
</HTML>
4.2 Listas Numeradas
As listas numeradas são aquelas que apresentam uma numeração crescente diante
de cada elemento que a compõe. Uma lista numerada - ou ordenada - é semelhante a
uma lista não numerada, exceto pela utilização da marcação <OL> (Ordered List) ao
Depto. Processamento de Dados Criação de Páginas HTML
- 23 -
invés da marcação <UL> (Unordered List). Os itens são identificados utilizando-se a
mesma notação <LI> (List Item).
Abaixo temos um exemplo de uma lista numerada:
<HTML>
<BODY>
<H1>Vai aparecer assim...</H1>
<OL>
<LI> laranjas </LI>
<LI> pêras </LI>
<LI> uvas </LI>
</OL>
</BODY>
</HTML>
4.3 Listas de Definição
Listas de definições consistem em destacar textos de acordo com o recuo.
Utilizamos as tags <DT> (Definition Title) e <DD> (Definition Detail). As tags <DL>
(Definition List) e </DL> definem a região onde será aplicada a lista de definição.
<DL>
<DT> URL
<DD> Uniform Resource Locator (URL)/Localizador Uniforme de Recursos é o que o
WWW usa para encontrar a localização de arquivos e documentos (e outras coisas) nos
computadores da Internet. Os browsers apresentam a URL dos documentos que estão
sendo mostrados na tela.
<DT> Hyperlink
<DD> É uma ligação hipertexto, ou seja, são os lugares da página onde o mouse
vira "dedinho" e, quando você clica, é remetido para outro local, outra parte do mesmo
documento ou outro documento. O uso abreviou o termo para Link.
</DL>
Depto. Processamento de Dados Criação de Páginas HTML
- 24 -
4.4 Listas Intercaladas
As listas descritas acima podem ser intercaladas ou encadeadas podendo oferecer
uma certa flexibilidade ao usuário. Utilizamos esse tipo de recurso quando precisamos
expressar hierarquia. Exemplo:
<HTML>
<BODY>
<H1>Vai aparecer assim...</H1>
<UL>
<LI> Países da América do Sul:
<UL>
<LI> Brasil
<LI> Paraguai
</UL>
<LI> Um país da Europa:
<UL>
<LI> Espanha
</UL>
</UL>
</BODY>
</HTML>
Depto. Processamento de Dados Criação de Páginas HTML
- 25 -
5. Inserindo Imagens
Inserir imagens em uma página HTML é uma tarefa relativamente fácil, porém
requer alguns requisitos básicos. O formato da imagem é, talvez, o requisito mais
importante a ser considerado. Ela deve estar em formato GIF ou JPG. No início da
utilização de imagens na internet, o formato GIF se tornou muito popular, porém, hoje em
dia o formato JPG tomou o seu lugar por apresentar arquivos com um tamanho menor ao
mesmo arquivo em versão GIF. Comparado com o formato BMP, um arquivo JPG pode
oferecer uma redução de tamanho de até dez vezes.
5.1 Manipulando Imagens
Para a inserção de imagens, usamos a tag <IMG> com o atributo SRC (Source).
Atualmente, as imagens mais usadas são: GIF, JPG e PNG. Exemplo:
<IMG SRC=”nome_da_imagem.gif”>
Veja alguns outros atributos que podem ser configurados para uma imagem:
Atributo na tag IMG Característica
ALT="texto" Especifica um texto alternativo que descreve a imagem. Esse
texto será exibido caso a imagem não possa ser exibida e será
exibido também quando o cursor do mouse repousar sobre a
imagem funcionando, neste caso, como ToolTip.
HEIGHT = "valor" Especifica, em pixel, a altura da imagem.
WIDTH = "valor" Especifica, em pixel, a largura da imagem.
BORDER = "valor" Especifica, em pixels, a largura da borda da imagem.
ALIGN = “valor” Especifica o alinhamento do texto em relação à imagem que pode
ser: TOP, MIDDLE, BOTTOM, LEFT e RIGHT.
HSPACE=”valor” Especifica, em pixels, o espaço que deve ser deixado em branco
nas laterais da imagem.
VSPACE=”valor” Especifica, em pixels, o espaço que deve ser deixado em branco
na parte superior e inferior da imagem.
ISMAP Especifica que a imagem é um mapa de imagens.
Veja abaixo alguns exemplos do uso da tag <IMG>
<IMG ALIGN=”bottom” SRC=”nome_da_imagem.gif”>
Depto. Processamento de Dados Criação de Páginas HTML
- 26 -
<IMG ALIGN=”right” SRC=”nome_da_imagem.gif”>
<IMG WIDTH=100 HEIGHT=100 SRC=”nome_da_imagem.gif”>
Ao utilizar o atributo ALING especificando alinhamento TOP, MIDDLE ou
BOTTON teremos o seguinte efeito do texto com relação à imagem:
Devemos tomar uma série de cuidados ao trabalhar com imagens em nosso
documento HTML. Quando inserimos uma imagem, o texto subseqüente a ela será
colocado na mesma linha, ao lado o texto e nem sempre isso é desejável. Para que
a nossa imagem apareça sozinha em uma linha, devemos utilizar a tag de quebra
de linha <BR> ou a tag de finalização de parágrafo <P> logo após a especificação
da tag da imagem.
Podemos também centralizar a imagem na linha do documento HTML
colocando a tab <IMG> entre as tag <CENTER> e </CENTER>.
5.2 GIF Intrelaçado (Interlaced Gif)
Quando uma página está sendo transmitida, as imagens gif definidas como
“interlaced” são carregadas gradualmente, ou seja, o usuário consegue visualizara
imagem toda, e assim, com a progressão da transmissão a resolução da imagem se torna
mais definida. Sem essa característica, a imagem é transmitida em blocos, sendo que o
usuário só poderá ter uma noção da imagem toda quando a transmissão finalizar.
Dependendo da resolução da imagem, haverá diferença de nível de resolução final
em um arquivo interlaced no padrão gif89a ou gif87a. De um modo geral, o formato gif87a
oferece melhor resolução para arquivos "interlaced".
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo "gif" como interlaced, selecione o menu OPTIONS e ative a
opção SAVE GIF's INTERLACED. Caso você observe perda de resolução na imagem,
salve-a no padrão gif87a.
5.3 Imagens Transparentes
O formato gif89a permite que se defina que uma cor em um arquivo fique
transparente, dessa forma, teremos uma imagem com fundo transparente permitindo que
apenas o desejo seja visto e não o seu fundo.
TOP MIDDLE BOTTOM
Depto. Processamento de Dados Criação de Páginas HTML
- 27 -
Veja a diferença nas duas imagens abaixo:
Criando Imagens Transparentes com LVIEW PRO
1. Selecione o menu Retouch
2. Neste menu, escolha a opção Color Depth
3. Defina como Palette Image e clique em OK
4. Selecione o menu Options
5. Escolha Background Color
6. Clique no botão Dropper
7. O curso vai ficar com a aparência de um conta gotas
8. Clique com o cursor sobre a cor que você deseja que fique transparente
9. Salve a imagem como gif89a (file => Save as)
Atenção, você só irá visualizar a transparência da imagem ao exibí-la com o
browser. Na tela do Lview a aparência do arquivo não é alterada.
5.4 Imagens Sensíveis
Imagens sensíveis ou mapas clicáveis são imagens que contém vários links
associados a elas. Uma aplicação comum para este recurso é a utilização de mapas
geográficos em que, ao se clicar em cada região/área/cidade, será obtido um arquivo
diferente.
Passo a Passo
Para criar uma imagem sensível é preciso:
1. Mapear as coordenadas do arquivo imagem, gerando um arquivo do tipo .map
Transparente Fundo normal
Depto. Processamento de Dados Criação de Páginas HTML
- 28 -
2. Copiar o arquivo .map para o seu servidor
3. Atualizar na área do servidor www a existência do novo .map (normalmente,
no arquivo imagemap.com, que se encontra no diretório
/usr/local/etc/httpd/conf no Unix)
4. Inserir o arquivo em uma página, incluindo a extensão ismap junto à imagem,
da seguinte forma: <img src="nome_do_arquivo.gif" ismap>
5. Fazer uma âncora da imagem para o programa que interpreta mapas no
servidor - imagemap -, com a identificação do mapa a ser associado a esta
imagem.
Exemplo: <a href="/cgi-bin/imagemap/mapa1"><img src="arquivo.gif"></a>
Gerando o Arquivo .MAP com MAPEDIT FOR WINDOWS
1. Selecione no menu file a opção open/create
2. Defina o tipo de servidor como (NCSA, Apache, ...)
3. Na janela GIF Filename localize o arquivo imagem que você quer mapear (use
o botão de browse para chegar até ele, se estiver no PC)
4. Digite na janela Map Filename o nome que você deseja dar ao arquivo .map
5. Clique ok. O Mapedit vai informar que o arquivo .map não existe e pedir
confirmação para sua criação.
6. Em seguida, o arquivo imagem que foi especificado será exibido na tela do
Mapedit
7. No menu tools, selecione o formato da primeira área que você quer mapear
(polígono, círculo ou retângulo)
8. Mantendo o botão esquerdo do mouse pressionado, delimite a área que você
quer mapear e clique no botão direito do mouse.
9. Surgirá uma janela de diálogo em que você deve inserir a URL que deseja
associar àquela área e, opcionalmente, comentários.
10.Repita operação semelhante até concluir o mapeamento completo da imagem.
11.Escolha no menu file a opção Save As
12.Confirme o correto formato do arquivo .map e o nome do arquivo.
Depto. Processamento de Dados Criação de Páginas HTML
- 29 -
Copiando .MAP para o Servidor
O arquivo .map referente a esta imagem deverá estar armazenado juntamente com
as suas páginas e imagens a serem tornadas disponíveis no WWW.
É interessante criar um subdiretório no servidor exclusivamente para armazenar os
arquivos .map a serem utilizados.
Atualizando o .MAP no IMAGEMAP.CONF
Uma vez copiado o arquivo .map para o servidor, para que ele funcione é necessário
inserir sua localização em um arquivo chamado imagemap.conf é este o arquivo
consultado no servidor para interpretar qualquer imagem sensível.
O imagemap.conf é um arquivo texto que se encontra na área de configuração do
servidor. Por isso, normalmente só o administrador da máquina terá acessso a ele . Basta
então solicitar ao administrador que atualize o imagemap.conf toda vez que um novo
.map for criado
O imagemap.conf está localizado no diretório /usr/local/etc/httpd/conf e tem a
seguinte aparência:
#
# Mapeamento de imagens
#
# ex do rio
#backbone: /data/httpd/htdocs/dpd/backbone.map
#wood : /home/servicos/httpd/htdocs/info/imagem-clicavel/wood.map
Brasil : /is/www/SVI/Brasil.map
BRnorte : /is/www/SVI/BRnorte.map
BRnordeste : /is/www/SVI/BRnordeste.map
BRsudeste : /is/www/SVI/BRsudeste.map
BRcentro : /is/www/SVI/BRcentro.map
BRsul : /is/www/SVI/BRsul.map
#clique : /home/servicos/httpd/htdocs/ct/hdoc/clique/mapa1.map
wood3 : /is/www/mercosul/wood2.map
mercosul : /is/www/mercosul/mercosul.map
Depto. Processamento de Dados Criação de Páginas HTML
- 30 -
Inserindo a Imagem Mapeada na Página
Para inserir uma imagem mapeada em uma página, abra uma âncora apontando
para o imagemap na área de cgi-bin do seu servidor, especifique o nome com que o
mapa referente está referenciado no imagemap.conf e insira a imagem no interior da
âncora, associando o atributo ISMAP, da seguinte forma:
<a href="/cgi-bin/imagemap/mapa1"><img src="brasil.gif" ismap></a>
Onde mapa1 é o nome utitilizado no arquivo imagemap.conf para referenciar o
arquivo .map criado para o arquivo brasil.gif, no exemplo.
Depto. Processamento de Dados Criação de Páginas HTML
- 31 -
6. Criando Links (Internos e Externos ao Documento)
A principal característica do HTML é a capacidade de interligar partes de um texto (e
também imagens) a outros documentos. Os clientes exibem em destaque estas áreas ou
pontos chaves (normalmente com cores diferentes ou sublinhado) para indicar que se
trata de um link, ou interligação, no hipertexto.
6.1 Interligando Documentos
A marcação <A>, que define o ponto de partida para os links, é denominada de
âncora. Para incluir uma âncora em seu documento:
1. Inicie a âncora com <A . (Há um espaço depois de A.)
2. Especifique o documento a ser interligado, inserindo parâmetro
HREF="filename" seguido do sinal: >
3. Insira o texto que vai funcionar como link no documento corrente
4. Anote a marcação de final da âncora: </A>.
Um exemplo de referência a um hipertexto:
<A HREF="ListaCidades.html"> Cidades </A>
A palavra “Cidades”' é definida como o marcador do link para se chegar ao
documento ListaCidades.html, que está no mesmo diretório do documento corrente. Ou
seja, "Cidades" aparece em negrito e se eu clicar nessa palavra será exibido o
documento apontado - ListaCidades.html
6.2 Interligando Documentos em Outros Diretórios
É possível interligar documentos em outro diretório especificando-se o caminho
relativo a partir do documento corrente, em relação ao que está sendo interligado.
Por exemplo, um link para o arquivo SaoPaulo.html localizado no subdiretório
Estados seria assim:
<A HREF="Estados/SaoPaulo.html"> São Paulo</A>
Depto. Processamento de Dados Criação de Páginas HTML
- 32 -
Estes são dos denominados links relativos. É também possível usar o caminho
completo (pathname absoluta) do arquivo desejado. Para isso, utiliza-se a sintaxe padrão
do sistema UNIX.
Importante: se você quiser referenciar um diretório a partir do “raiz” do seu servidorwww, inicie a notação com /. Isto é, se você tiver uma notação desta forma
<A HREF=“/imagens/incon1.gif”>, significa que o arquivo incon1.gif deverá ser
buscado no diretório imagens que está imediatamente acima do diretório raiz do seu
servidor WWW.
6.3 Ligando URL’s
O World Wide Web utiliza-se das Uniform Resource Locators (URLs) para
especificar a localização de arquivos em servidores. Uma URL inclui o tipo de recurso
acessado (p.e, gopher, WAIS), o endereço do servidor, e a localização do arquivo.
A estrutura do comando é a seguinte:
protocolo://servidor[:port]/path/filename
Onde protocolo é uma das seguintes definições:
Protocolo Descrição
file um arquivo no seu sistema local, ou servidor de ftp
http um arquivo em um servidor World Wide Web
gopher um arquivo em um servidor Gopher
WAIS um arquivo em um servidor WAIS
news um Usenet newsgroup
telnet uma conexão Telnet
Por exemplo, para incluir um link para o HTML Beginner’s Guide, em um
documento, deve ser usada a seguinte tag:
<A HREF = "http://www.altavista.com"> Altavista </A>
Depto. Processamento de Dados Criação de Páginas HTML
- 33 -
Ou ainda:
<A HREF = "http://www.ncsa.uiuc.edu/General/Internet/WWW/
HTMLPrimer.html"> NCSA's Beginner's Guide to HTML</A>
O que torna a sentença ”NCSA's Beginner's Guide to HTML'' um link para tal
documento.
Para mais informações sobre URLs, veja em WWW Names and Addresses, URIs,
URLs, URNs, escrito por pessoas do CERN, disponível em
http://info.cern.ch/hypertext/WWW/Addressing/Addressing.html.
A Beginner's Guide to URLs, localizado no menu de Help do NCSA Mosaic, e
disponível em http://www.ncsa.uiuc.edu/demoweb/url-primer.html
6.4 Ligando sessões específicas em outro documento
Para fazer links com sessões de outros documentos o processo é o mesmo da
sessão anterior. Faz-se uma âncora normalmente, e apenas é acrescentado, após a url
do documento de destino, o sinal # e uma palavra, ou identificador. O identificador é a
palavra "enderecos", exemplo:
Por exemplo:
<a href="exemplo.html#enderecos">link</a>
No texto do documento apontado pela âncora, deve-se identificar qual a sessão
corresponde ao ponto indicado pela palavra “volta”. Utiliza-se, por exemplo, uma notação
que reconheça a palavra/identificador informando no ponto de partida no documento
exemplo.html
Pode ser: <a name="enderecos"> Endereços Eletrônicos </a>.
6.5 Interligando sessões em uma página
HTML permite que se façam ligações entre diferentes trechos de um documento.
Você pode apontar uma palavra ou trecho de um texto utilizando uma âncora de nome
(named anchor). Este recurso é bastante usado na geração de índices de conteúdo no
início de uma página.
O passo a passo é :
Depto. Processamento de Dados Criação de Páginas HTML
- 34 -
1.Defina o "ponto de partida", atribuindo a ele um nome qualquer - no exemplo
item1-, precedido do caracter #,da seguinte forma:
Veja o início da <a href="#item1">segunda sessão</a>.
2.Defina o "ponto de chegada", atribuindo a ele uma âncora de nome, com o nome
correspondente ao do ponto de partida, assim:
Esta <a name="intem1">segunda sessão</a> trata de..
Depto. Processamento de Dados Criação de Páginas HTML
- 35 -
7. Criando Tabelas
Para criarmos tabelas, utilizamos várias tags para determinarmos o início e fim de
uma tabela, quantas linhas, quantas colunas, etc. Em seguida, temos uma lista dos
comandos relacionados a criação de tabelas:
ÿ <TABLE> </TABLE>
Essas tags servem para indicar a região que compreende uma tabela. Os demais
comandos para criação de linhas e colunas devem aparecer entre <TABLE> </TABLE>.
Se omitirmos o atributo BORDER, a tabela será criada sem as bordas.
ÿ <TR> </TR> (Table Row)
Cada linha de uma tabela deve sempre aparecer entre as marcações <tr> e </tr>.
(TR = Table Row).
ÿ <TD> </TD> (Table Data)
Esta é a marcação que define cada célula de uma tabela. As células de uma tabela
devem sempre aparecer entre as marcações de linhas (<tr> e </tr>). Como padrão, o
texto nas células é alinhado a esquerda.
ÿ <TH> </TH> (Table Header)
Com esta tag, definimos os títulos de uma tabela. O texto da célula criada com essa
tag aparecerá em negrito.
Abaixo, temos um exemplo simples:
<TABLE BORDER>
<TR>
<TD>Itens/Mês</TD>
<TH>Janeiro</TH><TH>Fevereiro</TH><TH>Março</TH>
</TR>
Depto. Processamento de Dados Criação de Páginas HTML
- 36 -
<TR>
<TH>Usuarios</TH><TD>80</TD><TD>93</TD><TD>120</TD>
</TR>
<TR>
<TH>Linhas</TH><TD>3</TD><TD>3</TD><TD>5</TD>
</TR>
</TABLE>
Vejamos agora alguns atributos:
ÿ <BORDER>
Esse atributo aparece junto a tag <TABLE>. A omissão desse atributo implica numa
tabela sem bordas.
Ou seja, como já vimos, para obter uma tabela com bordas, ela deve ser delimitada
pelas marcações <TABLE BORDER> </TABLE>.
Podemos alterar o tamanho da borda, acrescentando valores:
<TABLE BORDER=5> ... </TABLE>
ÿ <ALIGN>
Este atributo pode ser aplicado a TR,TH e TD, e controla como será o alinhamento
do texto dentro de uma célula, com relação às bordas laterais.
Aceita os valores left, center, right, respectivamente para alinhar a esquerda,
centralizar ou alinhar a direita.
Veja o exemplo:
Depto. Processamento de Dados Criação de Páginas HTML
- 37 -
<TABLE BORDER>
<TR>
<TD>Primeira célula</TD><TD>Segunda célula</TD><TD>Terceira célula</TD>
</TR>
<TR>
<TD ALIGN=center>centro</TD>
<TD ALIGN=left>esquerda</TD>
<TDA ALIGN=right>direita</TD>
</TR>
</TABLE>
ÿ <VALIGN>
Pode ser aplicado a TR,TH e TD, e define o alinhamento do texto nas células com
relação a borda superior e inferior.
Aceita os valores top, middle e bottom
<TABLE BORDER>
<TD>
<TD> Teste para linhamento<BR>
com relação a bordas<BR>
inferior e superior<BR>
</TD>
<TD VALIGN=top> TOP </td>
<TD VALIGN=middle>MIDDLE</td>
<TD VALIGN=botton>BOTTOM</td>
</TR>
</TABLE>
Depto. Processamento de Dados Criação de Páginas HTML
- 38 -
ÿ <NOWRAP>
Este atributo evita que haja uma quebra de linha dentro de uma célula. Cautela ao
utilizá-lo, para não produzir células muito largas.
ÿ <COLSPAN>
Pode ser aplicado a TH ou TD. Define quantas colunas uma célula poderá abranger.
Por padrão cada célula corresponde a uma coluna, ou seja, COLSPAN=1.
Vejamos um exemplo:
<TABLE BORDER>
<TR>
<TD COLSPAN=3>3colunas</TD><TD>normal</TD><TD>normal</TD>
</TR>
<TR>
<TD>col 1</TD><TD>col 2</TD><TD>col3</TD><TD>col 4</TD><TD>col
5</TD>
</TR>
</TABLE>
ÿ <ROWSPAN>
Este atributo pode ser aplicado a células (TH e TD) e define quantas linhas uma
mesma célula pode abranger. Assim como na marcação anterior, o padrão é uma célula
corresponder a uma linha.
Novamente, vamos ver exemplos:
<TABLE BORDER>
<TR>
<TD ROWSPAN=3>3 linhas</TD>
<TD>col 2</TD><TD>col 3</TD><TD>col4</TD><TD>col5</TD> </TR>
Depto. Processamento de Dados Criação de Páginas HTML
- 39 -
<TR>
<TD>col 2</TD><TD>col 3</TD><TD>col4</TD><TD>col 5</TD>
</TR>
<TR>
<TD>col 2</TD><TD>col 3</TD><TD>col4</TD><TD>col 5</TD>
</TR>
</TABLE>
ÿ CELLSPACING=<value>
Este atributo é aplicável à marcação TABLE. Como padrão, o Netscape 1.1 utiliza
espaço 2 entre as células. Este atributo define o espaço entre cada célula na tabela.
<TABLE BORDER CELLSPACING=5>
<TR>
<TD>teste1</TD> <TD>teste2</TD> <TD>teste3</TD>
</TR>
<TR>
<TD>teste4</TD> <TD>teste5</TD> <TD>teste6</TD>
</TR>
</TABLE>
ÿ CELLPADDING=<value>
Este atributo é aplicado também à marcação TABLE e define a distância entre o
texto e a borda de cada célula.
Veja exemplo:
<TABLE BORDER CELLPADDING=8>
<TR>
Depto. Processamento de Dados Criação de Páginas HTML
- 40 -
<TD>teste1</TD> <TD>teste2</TD> <TD>teste3</TD>
</TR>
<TR>
<TD>teste4</TD> <TD>teste5</TD> <TD>teste6</TD>
</TR></TABLE>
ÿ WIDTH=<value or percent>
Este atributo pode ser aplicado tanto a TABLE como a TH e TD. A ele tanto pode ser
associado um valor em "pixels" (ponto em tela gráfica), como um valor percentual. Ou
seja, determina o quanto da tela uma tabela ou célula de tabela deverá ocupar.
Vamos ver os exemplos:
<TABLE BORDER WIDTH=50%>
<TR>
<TD>segunda</TD>
<TD>ter&ccedil;a</TD>
<TD>quarta</TD>
</TR>
<TR>
<TD>quinta</TD>
<TD>sexta</TD>
<TD>s&aacute;bado</TD>
</TR>
</TABLE>
Depto. Processamento de Dados Criação de Páginas HTML
- 41 -
8. Frames
O “Frame Document” é um arquivo onde se define a estrutura das janelas (frames)
para seu hiperdocumento em HTML. Neste documento as marcações <BODY> e
</BODY> são substituídas por <FRAMESET> e </FRAMESET>.
Veja a estrutura básica abaixo:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET ...>
<FRAME SRC="URL">
<FRAME SRC="URL">
</FRAMESET>
</HTML>
Note que cada frame será indicado com a tag <FRAME SRC=..>, que deverá conter
a URL e atributos se necessário.
8.1 Frameset
Frameset aceita os atributos ROWS e COLS, referentes divisões horizontais (como
linhas em uma tabela) e verticais (como colunas) entre janelas na tela. Internamente às
marcações FRAMESET só poderão aparecer outras FRAMESET, FRAME ou
NOFRAMES.
Importante: Não podem ser utilizadas as marcações válidas entre marcações
<BODY></BODY> nem internamente a marcações FRAMESET, nem antes dela, senão
FRAMESET será ignorada.
Depto. Processamento de Dados Criação de Páginas HTML
- 42 -
Os atributos do Frameset são:
ÿ ROWS (<frameset rows=“valor, valor, valor...”>)
Define divisões horizontais entre janelas. Vem sempre acompanhado de valores
associado, que definem quanto da tela cada janela vai ocupar. Dessa forma, para cada
janela a ser criada deverá haver um valor associado. Estes valores devem vir separados
por vírgulas.
Este valor poderá ser:
o Numérico - pixels=> (ROWS="30, 50") Refere-se a quantos pixels cada
frame (ou janela) deve ocupar. A desvantagem desta notação é que não é
possível ter controle do valor total de pixels que o cliente do usuário
compreende.
o Percentual=> (ROWS="25%, 25%, 50%") Pode ainda ser um valor
percentual, sempre somando um valor de 100%. (É o método mais
simples)
o Relativo=> (ROWS="2*,*") Desta forma, define-se um valor relativo. No
exemplo, o primeiro frame vai ocupar dois terços da tela, e o segundo um
terço.
Exemplos:
1. Para dividir a tela do browser em três janelas horizontais, sendo que a do meio é
mais larga que as de cima e de baixo:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET ROWS="20%, 60%, 20%">
<FRAME SRC="cell1.html">
<FRAME SRC="cell2.html">
<FRAME SRC="cell3.html">
</FRAMESET>
</HTML>
Depto. Processamento de Dados Criação de Páginas HTML
- 43 -
2.Três janelas horizontais, sendo que a primeira e a segunda tem uma altura fixa, e
o frame central deverá ocupar o restante do espaço:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET ROWS="30, *, 50">
<FRAME SRC="cell1.html">
<FRAME SRC="cell2.html">
<FRAME SRC="cell3.html">
</FRAMESET>
</HTML>
ÿ COLS (<frameset cols=“valor, valor, valor.. “>)
Funciona exatamente como a marcação anterior, no entanto, divide a tela em frames
ou janelas verticais.
Exemplos:
Para dividir a tela do browser em três janelas verticais
1.Três colunas, sendo que a do meio é mais larga que as de cima e de baixo:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET COLS="20%, 60% ,20%">
<FRAME SRC="cell1.html">
<FRAME SRC="cell2.html">
<FRAME SRC="cell3.html">
</FRAMESET>
</HTML>
Depto. Processamento de Dados Criação de Páginas HTML
- 44 -
2.Três janelas verticais, sendo que a primeira e a segunda tem uma altura fixa, e o
frame central deverá ocupar o restante do espaço:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET COLS="200, *, 100">
<FRAME SRC="cell1.html">
<FRAME SRC="cell2.html">
<FRAME SRC="cell3.html">
</FRAMESET>
</HTML>
8.2 Frame
A marcação FRAME define cada janela contida em uma área “frameset”. Esta
marcação não necessita de uma tag de finalização (</frame>) e aceita 6 atributos
possíveis:
ÿ SRC="url"
O atributo SRC define a URL que será exibida em cada frame.
ÿ NAME="nome_da_janela"
Este atributo é utilizado para associar um nome a uma janela. Deve ser usado
quando uma janela - frame - for o destino de um link em outro documento (normalmente é
no mesmo documento. Um frame apontando para outro. Tipo um índice abrindo várias
urls em outras janelas).
Este atributo é opcional. Por padrão, os frames não tem nome.
Importante, o nome_da_janela deve começar por caracter alfanumérico.
ÿ MARGINWIDTH="valor"
Depto. Processamento de Dados Criação de Páginas HTML
- 45 -
Esse atributo controla as margens esquerda e direita de cada frame, ou seja, a
distância entre o conteúdo da página e as margens da janela. O valor associado será um
valor absoluto em pixels. O menor valor aceito será 1.
Este atributo é opcional, caso não venha definido, o browser usará o seu padrão
para definir as margens no frame/janela.
ÿ MARGINHEIGHT="valor"
Também é um atributo opcional. Funciona exatamente como o anterior, só que
determina as margens superior/inferior em cada frame.
ÿ SCROLLING="yes/no/auto"
Novamente, é um atributo opcional, que define se uma janela deve possuir barra de
rolagem ou não. Caso seja definido como YES, a janela sempre possuirá uma barra de
rolagem visível. Caso seja definido como NO, nunca haverá barra de rolagem. E,
finalmente, se vier como AUTO, o browser aplicará a barra quando necessário.
O padrão é AUTO, portanto, se o atributo scrolling não vier definido, o browser
aplicará a barra de rolagem, sempre que necessário.
ÿ NORESIZE
Este atributo não possui valor associado. Quando ele não aparece, o usuário poderá
alterar o tamanho da janela, "arrastando" com o cursor a borda da mesma. O padrão é
que todas as janelas possam ter seu tamanho alterado. NORESIZE é opcional .
Um frame, com todos os atributos definidos, seria escrito assim, por exemplo:
<frame src=“http://www.cotuca.unicamp.br” name=“home” marginwidth=“5”
marginheight=“5” scrolling=“auto” noresize>
8.3 Noframes
Esta marcação possibilita que se crie uma opção de navegação na página para
quem não possui um browser que entende frames.
Esta marcação aparece no documento de estrutura "Frame document", e sempre é
usada em pares (<noframes>.. conteúdo... </noframes>).
Depto. Processamento de Dados Criação de Páginas HTML
- 46 -
Quando o acesso for feito através de um browser que entenda frames, o que estiver
entre as marcações "noframes" será simplesmente ignorado.
Internamente a uma área "noframes" deverá ser usada a estrutura padrão de
documentos html (<head> </head>, <title> </title> <body> </body>, etc...).
Um exemplo:
<HTML>
<HEAD>
<TITLE>Teste, uso de frames</TITLE>
</HEAD>
<FRAMESET ROWS="15%, 85%">
<NOFRAMES>
<BODY BGCOLOR="#000000" TEXT="#ffff00" LINK="#ff0000" >
Bem-vindo a uma página de teste.<P>
Para acessá-la, você deve utilizar a versão 2.0 ou acima do <I>browser</I><A
HREF="http://home.netscape.com/comprod/mirror/index.html"> Netscape Navigator!</A>
<HR>
</BODY>
</NOFRAMES>
<FRAMESET COLS="25%, 75%">
<FRAME NAME="1" SRC="teste1.htm" NORESIZE>
<FRAME NAME="2" SRC="teste2.htm" NORESIZE>
</FRAMESET>
<FRAMESET COLS="30%, 70%">
<FRAME NAME="3" MARGINWIDTH="50" SRC="teste3.htm">
<FRAMESET ROWS="65%, 35%">
<FRAME NAME="4" SRC="teste4.htm" NAME="chat">
<FRAME NAME="5" SRC="teste5.htm">
</FRAMESET>
Depto. Processamento de Dados Criação de Páginas HTML
- 47 -
</FRAMESET>
</FRAMESET>
</HTML>
Browser (Mosaic) não lê frames Browser (Netscape ou IE) lê frames
8.4 Intercalando Frameset - exemplosPara tornar mais claro como se constroem múltiplas e intercaladas janelas - divisões
horizontais e verticais - utilizando marcações de frames, seguem abaixo dois exemplos de
construção de documentos com múltiplas janelas.
Exemplo 1:
<HTML>
<HEAD>
<TITLE>Título</TITLE>
</HEAD>
<FRAMESET ROWS="30%, 70%">
<FRAMESET COLS="33%, 33%, 33%">
<FRAME SRC="">
<FRAME SRC="">
<FRAME SRC="">
</FRAMESET>
<FRAMESET COLS="50%, 50%">
<FRAME SRC="">
<FRAME SRC="">
</FRAMESET>
</FRAMESET>
Depto. Processamento de Dados Criação de Páginas HTML
- 48 -
</HTML>
Exemplo 2:
<HTML>
<HEAD>
<TITLE>Título</TITLE>
</HEAD>
<FRAMESET ROWS="15%, 85%">
<FRAME SRC="teste5.htm">
<FRAMESET COLS="25%, 75%">
<FRAMSE SRC="teste4.htm">
<FRAMESET ROWS="85%, 15%">
<FRAME SRC="teste3.htm">
<FRAME SRC="teste2.htm">
</FRAMESET>
</FRAMESET>
</FRAMESET
</HTML>
8.5 Links entre frames
A marcação TARGET, permite que se controle em qual janela um link específico
será exibido quando o usuário clicar sobre ele. Por exemplo, pode-se ter uma janela
lateral com uma espécie de indíce do serviço de informação e outra janela em que a
navegação propriamente dita vai ocorrer. Desta forma, o índice está permanentemente
disponível durante toda a consulta.
Para utilizar este recurso você deverá:
1. Atribuir um "name" a cada frame em seu "frame document" (name="valor").
2. No documento onde será criado um link, que vai aparecer em outra janela, ao
criar o link, acrescentar a marcação target="valor"" à âncora, da seguinte
forma:
<a href="URL" target="valor">
Onde este valor é idêntico àquele associado à marcação name no frame document.
Depto. Processamento de Dados Criação de Páginas HTML
- 49 -
Exemplo:
O frame document deverá ser escrito
assim:
O documento que contém o índice de
navegação (barra.htm), será assim:
<HTML>
<HEAD>
<TITLE>Título</TITLE></HEAD>
<FRAMESET ROWS="80%, 20%">
<FRAME NAME="navega" SRC="teste3.htm">
<FRAME SRC="barra.htm">
</FRAMESET>
</HTML>
<HTML>
<HEAD>
<TITLE>Título</TITLE>
</HEAD>
<BODY>
<A HREF="http://www.cotuca.unicamp.br/"
TARGET="navega"> [link para o cotuca]</a>
<A HREF="http://www.cotuca.unicamp.br/"
TARGET="navega"> [link para o cotuca]</a>
<A HREF="http://www.cotuca.unicamp.br/"
target="navega"> [link para o cotuca]</a>
</BODY>
</HTML>
Depto. Processamento de Dados Criação de Páginas HTML
- 50 -
9. Formulários
Um formulário começa com a tag <FORM> e termina com </FORM>, porém outros
itens devem ser especificados:
�� �� Primeiro, o formulário precisa saber como enviar a informação para o servidor.
Existem dois métodos, GET e POST.
METHOD="GET"
A maioria dos documentos HTML é recuperada a partir da requisição de uma única
URL ao servidor. Assim, um formulário que utilize este método, envia toda sua informação
ao final da URL ativada.
METHOD="POST"
Este método transmite toda a informação fornecida via formulário, imediatamente
após a URL ativada. Ou seja, quando o servidor recebe uma ativação de um formulário
utilizando POST ele sabe que precisa continuar "ouvindo" para obter a informação. Este é
o melhor método.
�� �� Segundo, o formulário precisa saber para onde enviar a informação. Esta é a
URL sendo ativada a partir do formulário, e ela é referenciada através da marcação
ACTION. Esta URL em geral aponta para um script CGI que irá receber e decodificar os
resultados. Lembre-se que se você está referenciando um script que reside no mesmo
servidor do formulário, você não precisa incluir a URL completa.
ACTION="/cgi-bin/post-query" para um script no seu servidor
ACTION="http://www.cotuca.unicamp.br/cgi-bin/post-query" para um script no
servidor do CR/DF
Após a construção destas marcações, seu formulário geralmente terá a seguinte
estrutura:
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
Marcações de campos de entrada e HTML em geral
</FORM>
Depto. Processamento de Dados Criação de Páginas HTML
- 51 -
Observe que este formulário utiliza o método POST e envia as informações digitadas
para um script local chamado post-query no diretório /cgi-bin do servidor.
Outra informação importante: cada marcação de entrada em um formulário tem uma
opção NAME associada, de tal forma que o script saiba qual o nome, isto é, como chamar
cada valor digitado. Certamente você pode definir mais de um campo de entrada textual
ou menu dentro de um formulário, mas certifique-se de que cada um possui um nome
diferente.
9.1 Entrada de Texto
9.1.1 Entrada de texto comum - TEXT
A forma mais simples de campo de entrada é a marcação TEXT. Este campo
permite a digitação de uma única palavra ou linha de texto, e possui uma largura default
de 20 caracteres.
Opções:
ÿ VALUE="" (OPCIONAL)
Utilizando a marcação VALUE você especifica que texto aparecerá no campo
quando o formulário for exibido.
ÿ SIZE="" (OPCIONAL)
Esta marcação altera o tamanho deste campo exibido na tela.
Obs.: o usuário sempre poderá digitar mais caracteres do que o tamanho do campo
na tela, pois o texto irá se deslocar a esquerda dentro do campo.
ÿ MAXLENGTH="" (OPCIONAL)
Se você deseja limitar o número de caracteres que o usuário pode digitar, basta usar
esta marcação. O formulário irá emitir um bip de erro se o usuário tentar digitar além do
permitido em MAXLENGTH.
Depto. Processamento de Dados Criação de Páginas HTML
- 52 -
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
Qual o seu primeiro nome?
<INPUT TYPE="text" NAME="primeiro_nome" VALUE="João" SIZE="10" MAXLENGTH="15">
</FORM>
Observações:
o O valor informado em NAME deve utilizar sublinhado em vez de espaços em
branco. Inserir espaços em branco nestes nomes pode causar problemas no
servidor na decodificação dos valores informados.
o Se seu formulário possui apenas um campo de entrada textual, ao teclar
ENTER neste campo o formulário será submetido, como se o usuário tivesse
acionado o botão SUBMIT.
9.1.2 Entrada de texto protegido, senha - PASSWORD
Marcações de entrada do tipo password são idênticas aos campos do tipo text,
exceto pelo fato de todos os caracteres serem exibidos como asteriscos ( *).
Opções:
ÿ VALUE="" (OPCIONAL)
A marcação VALUE especifica um valor default para este campo.
ÿ SIZE="" (OPCIONAL)
Esta troca o tamanho do campo de password exibido na tela.
Depto. Processamento de Dados Criação de Páginas HTML
- 53 -
ÿ MAXLENGTH="" (OPCIONAL)
Limita o número de caracteres que o usuário pode informar como password.
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
Informe sua senha de acesso (8 caracteres):
<INPUT TYPE="password" VALUE="xpto" NAME="sua_senha" SIZE="8" MAXLENGTH="8">
</FORM>
Observações:
o Se você pretende utilizar MAXLENGTH para limitar o número de caracteres
informados, tenha certeza de especificar um SIZE com o mesmo tamanho,
para fornecer ao usuário o sentimento de qual a largura do campo. Esta
regra não foi utilizada no primeiro exemplo, que possui SIZE igual a 10, mas
MAXLENGTH de 15, o que faz o campo se deslocar nos últimos 5 caracteres
caso o valor informado possua mais do que 10 caracteres.
o Mesmo que o valor default VALUE esteja representado por asteriscos, o
usuário pode visualizar o seu valor através da recuperação do fonte do
hiperdocumento em HTML (uma opção comum na maioria dos clientes
WWW).
9.1.3 Entrada oculta - HIDDEN
Além da marcação PASSWORD com um valor VALUE default, é possível "esconder"
informação passada dentro de blocos FORM com uma marcação HIDDEN. Esta
informação é recebida pelo script de decodificação no servidor, mas não é diretamente
exibida ao usuário no formulário.
Opções:
ÿ VALUE="" (OBRIGATÓRIO)
Depto. Processamento de Dados Criação de Páginas HTML
- 54 -
Através da marcação VALUE, você deve especificar o texto oculto a ser enviado ao
script processador do formulário.
<FORMMETHOD="POST" ACTION="/cgi-bin/post-query">
Você não pode visualizar nada aqui embaixo.
<INPUT TYPE="hidden" NAME="nome_oculto" VALUE="form12">
</FORM>
Observação:
o Mesmo que o valor especificado em HIDDEN VALUE não seja exibido no
formulário, o usuário pode vê-lo através da operação de visualização do
fonte do hiperdocumento, da mesma forma como no campo PASSWORD.
9.1.4 Entrada de várias linhas de texto - TEXTAREA
A marcação TEXTAREA não utiliza o formato convencional INPUT TYPE="text" dos
exemplos anteriores. Ao contrário, uma marcação <TEXTAREA> delimita o seu início e a
marcação </TEXTAREA> o seu fim.
Opções:
ÿ ROWS="" (OBRIGATÓRIO)
Especifica o número de linhas da entrada textual.
ÿ COLS="" (OBRIGATÓRIO)
Especifica o número de colunas da entrada textual.
ÿ Texto default (OPCIONAL)
Depto. Processamento de Dados Criação de Páginas HTML
- 55 -
Se você deseja que um texto seja exibido no campo textual ao abrir o formulário,
simplesmente coloque este texto entre as marcações de início e fim da TEXTAREA.
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
Por favor, escreva aqui suas sugestões, dúvidas e críticas:<BR>
<TEXTAREA NAME="critica" ROWS="3" COLS="40">
Gostaria de obter mais informações sobre
este servidor. Grato.
</TEXTAREA>
</FORM>
Observação:
o O usuário dispõe de Scrollbars para digitar além do número de linhas e
colunas definidas em ROWS e COLS.
9.2 Menus
9.2.1 Menus com opções - SELECT
Menu de opção única. A marcação SELECT segue a mesma convenção de
TEXTAREA. Ou seja, as opções de menu ficam entre a marcação de início <SELECT> e
a de fim </SELECT>.
Opções:
ÿ OPTION (OBRIGATÓRIO)
Especifica uma opção presente no menu.
Depto. Processamento de Dados Criação de Páginas HTML
- 56 -
ÿ VALUE="" (OPCIONAL)
Especifica o valor da opção retornada ao servidor. Se não for definido, o nome da
opção é enviado ao servidor.
ÿ SELECTED (OPCIONAL)
Por default, a primeira OPTION é exibida no menu. Esta marcação estabelece uma
opção de menu a ser exibida inicialmente, quando não se deseja que seja a primeira
OPTION.
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
Onde você pretende fazer turismo nas férias?
<SELECT NAME="lugares_para_ver">
<OPTION>Fortaleza
<OPTION VALUE="sul">Florianópolis ou Porto Alegre
<OPTION>Rio de Janeiro
<OPTION SELECTED>Brasília
<OPTION VALUE="amazonia">Manaus
</SELECT>
</FORM>
Observações:
o Se você possui mais do que 3 ou 4 opções de escolha, e o usuário só pode
selecionar uma, então este elemento de entrada é o melhor. As pessoas
frequentemente utilizam vários RADIOBUTTONS, que veremos a seguir.
Depto. Processamento de Dados Criação de Páginas HTML
- 57 -
o O script decodificador, no servidor, provavelmente apreciará uma única
palavra para VALUE, em vez de múltiplas palavras. Você sempre pode
utilizar sublinhado para separar expressões compostas.
9.2.2 Listas pagináveis - SELECT com SIZE
A única diferença entre este elemento de entrada e o anterior SELECT é a
introdução da opção SIZE. Ela especifica quantas linhas com opções de menu serão
exibidas na janela.
Opções:
ÿ MULTIPLE (OPCIONAL)
Especifica que múltiplas opções podem ser selecionadas, em oposição ao exemplo
anterior do SELECT, onde apenas uma opção pode ser selecionada no menu.
ÿ SIZE="" (OBRIGATÓRIO)
Número de linhas (opções de menu) exibidas na janela.
ÿ OPTION (OBRIGATÓRIO)
Especifica uma opção da lista.
ÿ VALUE="" (OPCIONAL)
Especifica o valor da opção retornada ao servidor.
Se não for definido, o nome da opção é enviado ao servidor.
ÿ SELECTED (OPCIONAL)
Esta opção determina uma OPTION default para ser selecionada.
Depto. Processamento de Dados Criação de Páginas HTML
- 58 -
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
Que facilidades de acomodação você deseja?<BR>
<SELECT NAME="opcional" MULTIPLE SIZE="5">
<OPTION>Televisão
<OPTION VALUE="casal" SELECTED>Cama de Casal
<OPTION>Ar Condicionado
<OPTION>Fax
<OPTION SELECTED>Modem V.34
<OPTION>Sauna
<OPTION>Lavanderia
<OPTION>Frigo-Bar
</SELECT>
</FORM>
Observações:
o Este elemento de entrada é bom para listas com muitas opções, porque é
possível controlar quantas serão exibidas por vez.
o Em alguns clientes WWW, é necessário teclar simultaneamente as teclas
CONTROL ou SHIFT para selecionar múltiplos itens.
Depto. Processamento de Dados Criação de Páginas HTML
- 59 -
9.3 Botões
9.3.1 Botões sim ou não - CHECKBOX
Retornando ao formato de INPUT TYPE="", a marcação CHECKBOXES é perfeita
para escolher entre duas opções.
Opções:
ÿ VALUE="" (OPCIONAL)
Especifica o valor da opção enviado ao servidor. Se não for definido, o valor "on" é
enviado ao script decodificador.
ÿ CHECKED (OPCIONAL)
Esta marcação define a opção selecionada por default.
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
<INPUT TYPE="checkbox" NAME="boletim" CHECKED>Sim, eu desejo receber
o boletim de notícias.
<P>
<INPUT TYPE="checkbox" NAME="info">Sim, eu gostaria de receber mais
informações turísticas.
</DL>
</FORM>
Depto. Processamento de Dados Criação de Páginas HTML
- 60 -
Observações:
o Este elemento funciona melhor para respostas do tipo "sim/não" ou "on/off".
o Você pode simular uma lista SELECT MULTIPLE criando CHECKBOXES
com o mesmo NAME, mas diferentes VALUES
9.3.2 Botões com opções - RADIO
RADIOBUTTONS utilizam uma notação similar a de CHECKBOXES, contudo,
apenas uma opção pode ser escolhida.
Opções:
ÿ VALUE="" (OBRIGATÓRIO)
Especifica o valor da opção a ser enviado para o servidor.
Se não for definido, um valor "on" é enviado ao script decodificador.
ÿ CHECKED (RECOMENDADO)
Esta marcação especifica qual botão estará selecionado por default.
Uma vez que uma seleção precisa ser feita, é melhor prover uma opção pre-
selecionada.
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
Suas preferências na viagem:
<DL>
<DD>Classe do Bilhete:
<INPUT TYPE="radio" NAME="classe" VALUE="eco">econômica
<INPUT TYPE="radio" NAME="classe" VALUE="exe">executiva
<INPUT TYPE="radio" NAME="classe" VALUE="pri" CHECKED>primeira
<DD>Localização:
<INPUT TYPE="radio" NAME="local" VALUE="frente">área fumante
<INPUT TYPE="radio" NAME="local" VALUE="tras">área não fumante
</DL>
</FORM>
Depto. Processamento de Dados Criação de Páginas HTML
- 61 -
Observações:
o Como já foi mencionado, RADIOBUTTONS não são boa escolha para listas
com muitos itens, porque o cliente tem problemas para exibir muitos botões.
É melhor utilizar o menu SELECT.
o Uma vez que um botão é selecionado, ele não pode ser desmarcado sem
selecionar outro botão que possua o mesmo NAME. A seleção default pode
ser restaurada com a utilização do botão RESET, introduzido a seguir.
o Se você utiliza vários RADIOBUTTONS com o mesmo NAME e nenhum
VALUES, o servidor não será capaz de dizer que botão foi selecionado, uma
vez que o valor "on" será retornado para qualquer um deles.
9.3.3 Botões de submissão e limpeza - RESET E SUBMIT
Em vez do usuário corrigir cada INPUT, um botão RESET pode ser utilizado para
restaurar todos os campos a seus valores default, como se nenhuma informação
houvesse sido digitada.
E finalmente, o FORM precisa de uma opção para enviar toda a informação digitada
para o servidor, uma vez que o usuário terminou de preencher os todos os campos de
entrada. O botão SUBMIT transfere toda a informação para a URL especificada no
elemento ACTION.
Opções:
ÿ VALUE="" OPCIONAL
Especifica o texto a ser exibido no botão.
Se não for especificado, os textos default "Reset" e "Submit Query" serão colocados
nos botões RESET e SUBMIT, respectivamente.
Depto. Processamento de Dados Criação de Páginas HTML
- 62 -
ÿ NAME="" OPCIONAL
Se NAME for definido em um botão SUBMIT, o formulário irá transmitir o valor do
conteúdo do elemento VALUE, permitindo