Apostila Geral HTML (Programação Web)

5/16/2018 Apostila Geral HTML (Programa o Web) - slidepdf.com

http://slidepdf.com/reader/full/apostila-geral-html-programacao-web 1/62

CURSO TÉCNICO EM INFORMÁTICA

PROGRAMAÇÃO WEB IE05 - 2006

PROF. ANDRÉ FABIANO DE MORAES [email protected]



2

Índice

PARTE I - HYPERTEXT MARKUP LANGUAGE (HTML) – BÁSICO.......................3 I. Características Gerais do HTML .................................................................................................................................4 II. Criando Documentos HTML ........................................................................................................................................5

1. HTML "Mínimo"..........................................................................................................................................................5 2. Marcações Básicas ......................................................................................................................................................6 3. Interligando Documentos ...........................................................................................................................................9 4. Interligando sessões em uma página ......................................................................................................................10 5. Listas ............................................................................................................................................................................11 6. Texto Pré-formatado...................................................................................................................................................14 7. Caracteres Especiais ..................................................................................................................................................15 8. Endereços....................................................................................................................................................................15 9. Inserir imagens............................................................................................................................................................17 10. Controle de Cores e Gráficos de Fundo................................................................................................................19 11. Barras horizontais .....................................................................................................................................................20

III. Tabela de Comandos ...................................................................................................................................................21 IV.Tabela de Acentuação/ Caracteres Especiais .........................................................................................................25

V. Tabela de Cores ............................................................................................................................................................25

PARTE II - HYPERTEXT MARKUP LANGUAGE (HTML) - TABELAS .................27 I.Tabelas em HTML ..........................................................................................................................................................28

1.Principais Marcações..................................................................................................................................................28 2. Atributos .....................................................................................................................................................................29 3. Mais elementos de controle......................................................................................................................................32

II. Tabela de Comandos.....................................................................................................................................................35

PARTE III - HYPERTEXT MARKUP LANGUAGE (HTML) - FORMULÁRIOS....36 I. Sobre este Tutorial........................................................................................................................................................37

II. Codificação básica........................................................................................................................................................38 III. Texto..............................................................................................................................................................................39

1. Entrada de texto comum - TEXT..............................................................................................................................39 2. Entrada de texto protegido, senha - PASSWORD ................................................................................................40 3. Entrada oculta - HIDDEN..........................................................................................................................................41 4. Entrada de várias linhas de texto - TEXTAREA....................................................................................................42

IV. Menus ...........................................................................................................................................................................43 1. Menus com opções - SELECT..................................................................................................................................43 2. Listas pagináveis - SELECT com SIZE....................................................................................................................44

V. Botões.............................................................................................................................................................................45 1. Botões sim ou não - checkbox..................................................................................................................................45 2. Botões com opções - radio .......................................................................................................................................46

3. Botões de submissão e limpeza - reset e submit....................................................................................................47

PARTE IV - HYPERTEXT MARKUP LANGUAGE (HTML) - EXTENSÕES DONETSCAPE .......................................................................................................................49

PARTE V - HYPERTEXT MARKUP LANGUAGE (HTML) - FRAMES.................52 I. Sobre este Tutorial........................................................................................................................................................53 II. Estrutura Básica - Frame Document........................................................................................................................54 III. Sintaxe ..........................................................................................................................................................................55

1. Frameset.......................................................................................................................................................................55 2. Frame ............................................................................................................................................................................58

3. Noframes......................................................................................................................................................................59 IV. Intercalando Frameset - exemplos...........................................................................................................................60 V. Links entre frames......................................................................................................................................................61 VI. Cartela de Comandos .................................................................................................................................................62



3

Tutorial - Autoria em HTML

Parte I - Hypertext Markup Language (HTML) – Básico(HTML e algumas extensões para o navegador Netscape)

© Copyright 1995 Rede Nacional de Pesquisa - RNP

É PERMITIDA A REPRODUÇÃO DO PRESENTE MATERIAL,DESDE QUE TENHA FINS EDUCACIONAIS OU DE PESQUISA,

DEVENDO, NO ENTANTO, SER MENCIONADOSEXPRESSAMENTE OS DIREITOS AUTORAIS RESERVADOS À

RNP. É VEDADA A REPRODUÇÃO PARA QUAISQUER OUTROSFINS, A MENOS QUE CONCEDIDA EXPRESSA AUTORIZAÇÃO

PELA RNP.

URL: http://www.cr-df.rnp.br/



4

I. Características Gerais do HTML

• Documentos HTML são arquivos escritos em ASCII - texto.• Podem ser criados em qualquer editor de texto ( vi, emacs, edit, notepad)• Existem editores específicos para várias plataformas• Existem conversores de vários formatos, por exemplo, doc para html•

A unidade mínima de informação é a “página”Há diferenças entre os diversos clientes Web, de forma que nem todas as marcações eseus correspondentes recursos são suportadas por todos eles. Quando um cliente nãoentende uma determinada marcação, ele simplesmente a ignora. Ao criar um documento,é importante testá-lo com vários clientes.

Você pode visualizar um documento que esteja criando com NCSA Mosaic (ou qualquer outro cliente Web). Basta abrí-lo com o comando Open Local File disponível na opção File do menu.

HTML utiliza marcações específicas e distintas para dizer ao Web browser como exibir o

documento.Importante: HTML não faz diferença entre maiúsculas e minúsculas (não é "case sensitive"). Então a notação <title> é equivalente a <TITLE> ou <TiTlE>.

Como são as Marcações HTML?

As marcações do HTML - tags - consistem do sinal (<), (o símbolo de "menor que"), seguidapelo nome da marcação e fechada por (>) ("maior que").

De um modo geral, as tags aparecem em pares, por exemplo, <H1> Cabeçalho</H1>. Osímbolo que termina uma determinada marcação é igual aquele 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 decabeçalho e </H1> avisa que o cabeçalho acabou.

Há excessões a esse funcionamento em pares das marcações. Por exemplo, a que indicaum final de parágrafo: <P> . Não necessita de uma correspondente: </P>. A marcação queindica quebra de linha - <br> - também não precisa de uma correspondente, e outras taiscomo <hr> e <li>..

Exemplos de Marcações

• A notação: <TITLE> (e a correspondente </TITLE>), especificam o título de umdocumento.• A notação: <H1> (e a correspondente </H1>), indica a aparência de um cabeçalho.• A notação: <P>é a marcação para final de parágrafo.



5

II. Criando Documentos HTML

1. HTML "Mínimo"

Todo documento deve ser identificado como HTML (<html> </html>), ter uma área decabeçalho (<head></head>) com o nome para o documento (<title> </title>), um títuloprincipal e uma área definida como corpo(<body></body>) do conteúdo do documento.Como o exemplo a seguir:

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

Esta página vai aparecer assim:



6

2. Marcações Básicas

2.1. Títulos

Todo documento em HTML deve possuir um título. De um modo geral o título aparece emlugar separado da página (por exemplo, alto da tela no Netscape), e é utilizado paraidentificar o documento em outros contextos ( por exemplo, buscas Wais). É interessanteque o título possa sugerir claramente o conteúdo do documento.

Atenção porque o conceito de título é diferente de cabeçalho. O título está mais para onome do arquivo. Não é um elemento relevante na visualização do documento comoacontece com o cabeçalho.

A marcação utilizada para títulos é <title> e seu par </title>.

Escrito desta forma:

<html><title> Este é o título</title>

<body><h2>E este o cabeçalho de nível 2</h2>Aqui entra o texto do documento ...</body></html>

Apresenta-se assim:



7

2.2. Cabeçalhos

"Cabeçalhos" normalmente são usados para títulos e sub-títulos de uma página.

HTML possui seis níveis de cabeçalhos, numerados de 1 a 6, sendo o número 1 o de maiordestaque. Cabeçalhos são exibidos em letras maiores e em negrito. O primeiro cabeçalhoem cada documento deve estar marcado como <H1>.

ATENÇÃO: ao definir o tamanho de um cabeçalho, você não está definindo o tamanho daletra (fonte 10, fonte 14). Você apenas define que ele aparecerá com maior tamanho edestaque que o resto do texto. O tamanho exato com que ele será visualizado é definidopelo programa visualizador de html (browser) de cada pessoa que acessar a informação.

As notações relativas a cabeçalhos são:

<Hy>Texto do cabeçalho </Hy >

onde y é um número entre 1 e 6 especificando o nível do cabeçalho.

O conjunto de notações possíveis é o que segue:<H1>Headings</H1><H2>Headings</H2><H3>Headings</H3><H4>Headings</H4><H5>Headings</H5><H6>Headings</H6>

2.3. Parágrafos

A marcação <p> é utilizada para definir o início de um novo parágrafo, deixando uma linhaem branco entre cada parágrafo.HTML não reconhece o caracter de quebra de linha doseditores de texto. Mesmo que exista uma linha em branco, os clientes Web só reconhecem oinício de um novo parágrafo mediante a marcação apropriada.

Existem algumas exceções. Por exemplo, inserindo uma marcação de parágrafo depois de<P>, <lLI>,<Hy> e outras, esta será ignorada.



8

2.4. Quebras de linha

A marcação <br> faz uma quebra de linha sem acrescentar espaço extra entre aslinhas.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.</body></html>

<html><body><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:



9

3. Interligando Documentos

3.1. Para começar

O principal poder do HTML vem da sua capacidade de interligar partes de um texto (etambém imagens) a outros documentos. Os clientes exibem em destaque estas áreas oupontos chaves (normalmente com cores diferentes ou sublinhado) para indicar que se tratade um link, ou interligação, no hipertexto.

A marcação <A>, que define o ponto de partida para os links, é denominada de âncora.Para incluir uma âncora em seu documento:

• Inicie a âncora com <A . ( Há um espaço depois de A.)• Especifique o documento a ser interligado, inserindo parâmetro

HREF="filename" seguido do sinal: > • Insira o texto que vai funcionar como link no documento corrente• Anote a marcação de final da âncora: </A>.

Um exemplo de referência a um hipertexto:

<A HREF="ListaPraias.html">Praias</A>

A palavra “Praias'' é definida como o marcador do link para se chegar ao documentoListaPraias.html, que está no mesmo diretório do documento corrente. Ou seja, "Praias" aparece em negrito e se eu clicar nessa palavra será exibido o documento apontado -ListaPraias.html

3.2. Interligando Documentos em Outros Diretórios

É possível interligar documentos em outro diretório especificando-se o caminho relativo apartir do documento corrente, em relação ao que está sendo interligado.

Por exemplo, um link para o arquivo Sergipe.html localizado nosubdiretório Estados seria assim:

<A HREF="Estados/Sergipe.html">Sergipe</A>

Estes são dos denominados links relativos. É também possível usar o caminhocompleto (pathname absoluta) do arquivo desejado. Para isso, utiliza-se a sintaxe padrão dosistema UNIX.Importante: se você quiser referenciar um diretório a partir do “raiz” do seu servidor www,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.

3.3. Ligando URL’s

O World Wide Web utiliza-se das Uniform Resource Locators (URLs) para especificar alocalizaçã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.

Se escreve de acordo com o esquema abaixo:

protocolo://servidor[:port]/path/filename

Onde protocolo é uma das seguintes definiçõesfile um arquivo no seu sistema local, ou servidor de ftphttp um arquivo em um servidor World Wide Web



10

gopher um arquivo em um servidor GopherWAIS um arquivo em um servidor WAISnews um Usenet newsgrouptelnet uma conexão Telnet

Por exemplo, para incluir um link para o HTML Beginner’s Guide , em um documento, deveser usado:

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

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

3.4. Ligando sessões específicas em outro documento

Para fazer links com sessões de outros documentos o processo é o mesmo da sessãoanterior. Faz-se uma âncora normalmente, e apenas é acrescentado, após a url dodocumento de destino, o sinal # e uma palavra, ou identificador. O identificador é "volta" nonosso exemplo:

Este é o meu <a href="index20.htm#volta">link</a> para o último item do índice destetutorial.

No índice do tutorial - arquivo index20.htm - deverá haver uma notação que reconheça apalavra/identificador informado no ponto de partida.Pode ser: <a name="volta"><li>Formulários Eletrônicos</a>.

4. Interligando sessões em uma página

HTML permite que se façam ligações entre diferentes trechos de um documento. Você podeapontar 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 é :

1.Defina o "ponto de partida", atribuindo a ele um nome qualquer - no exemploitem1-, 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 nomecorrespondente ao do ponto de partida, assim:

Esta <a name="intem1">segunda sessão</a> trata de..



11

5. Listas

5.1. Listas Não Numeradas

Para criar uma lista não numerada:

1. Comece com a marcação de início de lista: <UL>. 2. Insira a marcação <LI> antes de cada item da lista item. (Não é necessário fechar

a marcação com </LI> )3. Encerre com a marcação de fim de lista: </UL>.

Abaixo o exemplo de uma lista com dois itens:

<UL><LI> maçãs<LI> bananas</UL>

Vai aparecer assim:

Cada marcação <LI> pode conter vários parágrafos.



12

5.2. Listas Numeradas

Uma lista numerada - ou ordenada - é semelhante a uma lista não numerada, exceto porqueutiliza marcação <OL> ao invés de <UL>. Os itens são identificados utilizando-se amesma notação <LI> .

Uma lista criada assim:

<OL><LI> laranjas<LI> peras<LI> uvas</OL>

Resulta neste formato:

5.3. Listas de Definições

Uma lista de definições normalmente consiste em alternar um termo (abreviado como DT) euma definição (abreviado como DD). Clientes Web browsers geralmente mostram adefinição em nova linha com outro alinhamento.

Exemplo de uma lista de definição:

<DL><DT> NCSA<DD> NCSA, the National Center for Supercomputing Applications, is located on the campus

of the University of Illinois at Urbana-Champaign. NCSA is one of the participants in theNational MetaCenter for Computational Science and Engineering.

<DT> Cornell Theory Center

<DD> CTC is located on the campus of Cornell University in Ithaca, New York. CTC isanother participant in the National MetaCenter for Computational Science andEngineering.

</DL>



13

Será vista desta forma:

As entradas <DT> e <DD> podem conter vários parágrafos (separados por <P> ), listas, ououtras definições.

A marcação <DD> pode também ser utilizada, fora de uma lista de definições como se fosseuma tabulação (insere um espaço no início da frase).

5.4.Listas Intercaladas

As listas podem ser encadeadas ou intercaladas arbitrariamente, produzindo resultadosbastante interessantes. A prática é que vai mostrar qual o número máximo de listas que vale

a pena intercalar. Pode-se inclusive ter um parágrafo, intercalado com uma lista quecontenha um único item.

Exemplo de lista intercalada:

<UL><LI> Estados da região sul do Brasil:

<UL><LI> Rio Grande do Sul<LI> Santa Catarina</UL>

<LI> Um estado da região nordeste:

<UL><LI> Pernambuco</UL>

</UL>



14

É exibida com este formato:

6. Texto Pré-formatado

A marcação <PRE>(derivada de ”preformatted”) delimita uma área de texto em que espaços,novas linhas e tabulações são mantidas. Ou seja, o texto será apresentado exatamente daforma como foi digitado, mesmo que não hajam marcações do html. É uma forma de sepreservar o formato de um texto

Este recurso é utilizado por exemplo para listas de programas.Vejamos um exemplo:<PRE>#!/bin/cshcd $SCRcfs get mysrc.f:mycfsdir/mysrc.f

cfs get myinfile:mycfsdir/myinfilefc -02 -o mya.out mysrc.fmya.outcfs save myoutfile:mycfsdir/myoutfilerm *</PRE>

Apresenta-se assim:



15

Podem ser definidos links dentro de textos pré-formatados. No entanto, deve-se evitarutilizar outros caracteres das marcações em áreas <PRE>. Isto porque caracteres como <, >,and & possuem um significado específico no HTML.

O ideal é utilizar as sequências especiais, (<, >, and &, respectivamente) sempreque precisar representar esses caracteres. Veremos mais sobre no próximo item.

7. Caracteres EspeciaisHTML permite que se apliquem estilos específicos a palavras ou sentenças.

Vamos ver algumas opções:

<B></B> texto em negrito<I></I> texto em itálico

E o efeito de cada uma delas:

Para representar os caracteres das tags, utilize a seguintes notações:

< para representar < > para representar >& para representar &"para representar "

Uma lista completa dessas notações especiais pode ser obtida no CERN, em:http://www.w3.org/hypertext/WWW/MarkUp/ISOlat1.html

Caso o editor que você esteja utilizando não acentue, é possível também utilizarnotações especiais para acentuação. Há uma lista delas ao final deste documento.

Atenção: Ao contrário do resto do HTML, as notações especiais diferenciam letrasmaiúsculas de minúsculas. Não é possível usar &LT; no lugar de < .

8. Endereços

A marcação <ADDRESS></ADDRESS> é habitualmente utilizada para especificar o autor dodocumento e a forma de contato com ele (por exemplo, o endereço eletrônico). Geralmenteé o último item de uma página.

Por exemplo, a última linha do Beginer's Guide em que foi baseado este tutorial é assim:

<ADDRESS>A Beginner's Guide to HTML / NCSA / [email protected]</ADDRESS>



16

E o resultado é

Existe ainda um recurso para criar um item na página que, ao ser selecionado, abre uma janela, e permite que se envie uma mensagem eletrônica para um endereço específico. Paraisso utiliza-se a variável "mailto:"

Veja o exemplo abaixo, para enviar mensagens de dúvidas para o

endereço eletrônico [email protected] dúvida ou comentário, você pode enviar um email ao<a href="mailto:[email protected]">pessoal de apoio</a> a usuários do CR-DF.

Fica assim:

E ao se clicar em “pessoal de apoio”, se abrirá uma janela para envio de mensagemeletrônica, como abaixo:



17

9. Inserir imagens

As imagens dentro de uma página devem estar preferencialmente no formato ".gif". Este éo formato mais universalmente aceito pelos visualizadores de WWW (browsers). O Netscapeconsegue decodificar outros formatos como o ".jpg" e ".rgb", mas esta capacidade não écomum a todos os programas. Utiliza-se a seguinte notação para incluir uma imagem:

<img src="diretório/arquivo">

No exemplo:

• Alinhamento das imagens

Toda imagem incluída pode ser posicionada (align=...) na tela das seguintesformas: TOP, MIDDLE, BOTTOM, LEFT e RIGHT.

As três primeiras opções definem a posição da imagem com relação ao texto.Veja os exemplos:



18

As duas últimas definem a posição da imagem na página, a direita ou esquerda:

Atenção: De um modo geral não é necessário incluir essa anotação para alinhar aimagem a esquerda. Caso seja omitida a opção "align", a imagem aparecerá aesquerda da página.

Uma imagem pode ser também alinhada à direita da página:

Uma imagem pode ser ainda um botão sensível: Para isso basta incluir uma imagem nointerior de uma âncora.

<a href="./index.htm"><img src="../images/stop.gif></a>



19

10. Controle de Cores e Gráficos de Fundo

10.1. Cores e elementos gráficos de fundo

• O Atributo Background

O atributo Background deve ser aplicado à marcação <body>. Este atributo especifica aURL de uma imagem que será utilizada como fundo (background) de uma página. Estaimagem ocupará toda a área de fundo da tela.

Deve ser escrito desta forma:

<body background="images/fundo.gif"> .. toda a página .. </body>

É importante ter cuidado para que elementos de fundo não prejudiquem a leitura do textoem tela. De um modo geral, esses elementos devem aparecer em cores bem claras e sutis.

Sempre vale a pena visitar outras páginas que utilizam esse recurso para recolherboas idéias.

• O Atributo BGColor

Este atributo também deve acompanhar a marcação <body>. Ele permite que se definauma cor padrão para o fundo da página, sem necessidade de um arquivo imagem para isso.

O formato da marcação é:

<body bgcolor="#rrggbb">Aqui fica a página</body>

Onde "#rrggbb" é um código hexadecimal no padrão "red-green-blue" utilizado paraespecificar a cor de fundo.

Sugerimos a consulta a uma tabela desses padrões disponível em serviço da INFINET, em: http://www.infi.net/wwwimages/colorindex.html . Uma versão desta tabela encontra-seno final deste documento.

10.2. Cores de letras e links

• O atributo TEXTEste atributo é utilizado para controlar a cor do texto "normal" em uma página. Ou sejadefine a cor de todo o texto do documento exceto os links. O atributo deve acompanhar amarcação <BODY>, escrevendo-se da seguinte forma:

<body text="#rrggbb">Aqui entra o documento</body>

Onde "RGB" é um código hexadecimal do trio "red-green-blue", exatamente no mesmopadrão daquele utilizado no atributo BGCOLOR. Para conhecer as variações desse padrãosugerimos consulta a tabela disponível na INFINET citada anteriormente.

• Os atributos LINK, VLINK e ALINK Este atributo controla a cor de textos que funcionem como link na página.

1. LINK define cores de links nao consultados2. VLINK se referente a links já consultados e3. ALINK determina cor de links quando ativados.

A notação é absolutamente igual à anterior, seguindo os mesmos padrões para definir ascores. Uma definição completa incluiria então:

<body text="#rrggbb" link="#rrggbb" vlink="#rrggbb" alink="#rrggbb"> Aqui entra o documento </body>



20

11. Barras horizontais

A marcação <HR> produz uma linha horizontal no documento.É possível determinar uma largura maior para as barras, utilizando-se a extensão "size".Veja os exemplos:

É ainda possível determinar o quanto da largura da página a linha horizontal vai ocupar.Para isso utiliza-se a extensão width= .

Observe

Atenção: a extensão width não determina o comprimento da linha (em cm ou mm),mas o quanto da largura da página ela deve ocupar.



21

III. Tabela de Comandos

Marcação Função Características <HTML></HTML> Delimita o documento (início

e fim)Esta marcação deve ser inseridaimediatamente no início e no final de todoarquivo HTML

<HEAD></HEAD> Cabeçalho O cabeçalho de um arquivo html é uma áreapara inserção de informações que não serãovisíveis na página HTML, tais como “title” ecomentários

<TITLE></TITLE> Título do documento Nome a ser atribuído ao documento HTML,mas que não será visualizado na página.Deve sempre aparecer na área definidacomo “head” do documento

<! > Comentário Indicação de quaisquer comentários, taiscomo nome do autor, data de criação,software utilizado para autoria, etc. Não évisualizado na página HTML (só quandosolicitadao o “source file”)Também deve aparecer na área definida

como“head” do documento.

<BODY></BODY> Corpo do documento Delimita o corpo do documento. Vemimediatamente abaixo da área definida como“head”. Esta marcação deve ser “fechada”somente ao final do documento,imediatamente seguida da marcação</html>

Exemplo de como devem aparecer distribuídas no arquivo as marcações acima citadas:

<html><head>

<title> Título do documento</title><! autor: João das Couves><! última atualização: 30/02/2001></head><body>Blá blá blá ... aqui entra o conteúdo da página ... blá....</body></html> <BODY

BACKGROUND=“J“></BODY>

Imagem de fundo

J = arquivo imagem ou urlde arquivo imagem

Insere uma imagem como fundo da página(mais ou menos como uma “marca d’água).O arquivo deve estar em formato .gif . Estearquivo pode estar na mesma máquina(anotar sua path/nome), ou em outra

máquina (indicar por URL)<BODYBGCOLOR=“#rrggbb”></BODY>

Cor padrão de fundo

#rrggbb = código de coresrgb (ver tabela de coresneste documento)

Define uma cor de fundo padrão para apágina.

Esta cor pode variar de monitor para monitor.

<BODYTEXT=“#rrggbb”LINK=“#rrggbb”VLINK=“#rrggbb”ALINK=“#rrggbb”></BODY>

Cores do texto dodocumento

#rrggbb = código de coresrgb (ver tabela de coresneste documento)

Define a cor para:

text = texto normal da páginalink = links da páginavlink = links consultados na páginaalink = links ativados na página

<Hy></Hy> Títulos ou cabeçalhos napágina

Existem seis níveis de cabeçalho na página(não confudir com cabeçalho do documento= head):



22

y = número de 1 a 6 <h1></h1>, <h2></h2> , etc.

Sendo H1 o maior e H6 o menor nível.Atenção, marcações Hy definem tamanhorelativo do texto, e os colocam em destaque(normalmente negrito)

<P> Parágrafo Insere uma linha em branco entre doisparágrafos

<BR> Quebra de linha Faz uma quebra de linha.

<A HREF=“0 “>texto</a>

Âncora para hiperlinkreferencial

0 = URL ou nome dearquivo

Define um link.O link vai aparecer em destaque na página(normalmente outra cor e sublinhado)

<A HREF=“# ϒ“> texto</a>

Âncora interna ou paraseção específica em outrodocumento

# ϒ

= código ou palavrachave

Abre uma âncora para um outro trechodentro de uma mesma página, ou para umtrecho específico em outro documento.

1. Trecho na mesma páginaApós a âncora de hiperlink referencial, deveaparecer, entre aspas, o caracter# e uma palavra ou código chave. Estemesmo código ou palavra deverá aparecerno “ponto de chegada” deste link interno,como uma âncora de nome(veja próximo item).

2. Link para trecho específico em outrodocumento Deve ser efeito exatamente da mesmaforma, sendo que , antes do caracter #,deverá aparecer o nome do arquivo que serpretende ‘ligar’, ou sua url completa.

<A NAME=“ ϒ “> Âncora de nome

ϒ= código ou palavra chave

Este é o ponto de chegada de uma âncorainterna a um documento ou para trechoespecífico em outro documento.

O código ou palavra chave deve ser idênticoàquele do ponto de partida.

Não altera a visualização do texto.<A HREF=“MAILTO:[email protected]”>

Envio de email paraendereço especificado

Permite que se crie um link que ao serselecionado abrirá uma tela de composiçãode mensagem eletrônica a ser enviada parao endereço digitado após MAILTO:



23

<UL></UL> Delimita lista não numerada Deve ser escrita ao início e ao final da lista.Casa item da lista é antecedido damarcação <LI>

<OL></OL> Delimita lista numerada Deve ser escrita ao início e ao final da lista.Casa item da lista é antecedido damarcação <LI>

<LI> Cada item de uma listanumerada ou não --o00o--

Uma lista não numerada:<UL><LI> item 1<LI> item 2<LI> item 3</UL>

Uma lista numerada<OL><LI> item 1<LI> item 2<LI> item 3</OL>

<DL></DL> Delimita lista de definições Deve ser escrita ao início e ao final da lista.Cada item da lista é antecedido damarcação <DT> ou <DD>, conformeexplicado a seguir.

<DT> Entrada de título em lista de

definições

Insere um título em uma lista de definição. A

entrada de título vai aparecer alinhada àesquerda da página.Normalmente vem seguido de um item dotipo <DD>

<DD> Entrada de definição emlista de definições

Insere uma definição (antecedido ou não por<DT>). Este item vai aparecer numa margemmais interna à página (como se tivesse umatabulação antes).

Fora de listas de definição pode ser utilizadopara produzir este mesmo efeito (Uma“tabulação)

Uma lista de definições:

<DL><DT> Título 1

<DD> definição a<DD> definição b

<DT> Título 2<DD> definição a

</DL>

<PRE></PRE> Texto pré-formatado Mantém a exata formatação do texto digitado.

<B></B> Negrito--o00o--

<I></I> Itálico

--o00o--<ADRESS></ADRESS>

Endereço Quanto a visualização, normalmente, apenascoloca o trecho em itálico.



24

<IMG SRC=“.”> Inserção de imagem

. = nome ou URL dearquivo imagem.

Marcação para inserir uma imagem napágina. Esta imagem deve estarpreferencialmente em formato .gif. Podeestar na mesma máquina (apontar com onome ou path completa) ou em outramáquina (apontar com URL)

<IMG ALING=“”SRC=“.”>

Alinhamento de imagem Opcional .Define o alinhamento de uma imagem napágina. Aceita os seguintes valores:TOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio dafiguraBOTTOM = alinha o texto com o rodapé dafiguraRIGHT = alinha a figura à direita da telaLEFT = alinha a figura à esquerda da tela.Faz ainda com que o texto que esteja ao ladocontorne a figura.

<HR> insere linha horizontal--o00o--

<HR SIZE=n> Largura da linha horizontal

n= número

Opcional Extensão opcional que define a largura dalinha

<HR WIDTH=n%> Ocupação da tela da linhahorizontal

n= número

Opcional

Define o quanto da tela uma linha vai ocupar.



25

IV.Tabela de Acentuação/ Caracteres Especiais

As notações presentes em marcações, devem ser representadas com notaçõesespeciais para que possam ser exibidas em tela. Estas notações especiais semprese iniciam por & (e comercial) e encerram-se com ; (ponto e vírgula).

Notação descrição aparência< “Maior que” >> “Menor que” <& E comercial &" aspas duplas “® marca registrada ® &copy copyrights ©

É possível utilizar facilidades de acentuação (padrão do Windows por exemplo) emdocumentos HTML. No entanto, desta forma, apenas poderá visualizar a acentuaçãoo computador que reconhecer este padrão específico.

Segue abaixo o padrão para acentuação- ISO Latin-1 alphabet -, semelhante aoutilizado para exibir caracteres das marcações, e que poderá ser visualizado pelagrande maioria das máquinas.

Caracter Notação

Acento agudo &xacute; onde x é uma letra qualquer, maiúscula ou minúsculaAcento grave &xgrave; onde x é uma letra qualquer, maiúscula ou minúsculaAcento circunflexo &xcirc; onde x é uma letra qualquer, maiúscula ou minúsculaLetra com til &xtilde; onde x é uma letra qualquer, maiúscula ou minúsculaLetra com trema &xuml; onde x é uma letra qualquer, maiúscula ou minúsculaLetras unidas &Aelig; = Æ e æ = æ Letra com argola Å = Å e &aring = å Cedilha Ç = Ç e &ccedil= ç N com til Ñ = Ñ e ñ = ñ O cortado Ø = Ø e ø = ø

THORN maiúsculo &THORN = Þ(Icelandic)thorn minúsculo &thorn= þ (Icelandic)eth minúsculo &eth ð (Icelandic)eth maiúsculo Ð= Ð (Icelandic)Caracter alemão &szlig = ß

V. Tabela de CoresTabela original em: http://www.infi.net/wwwimages/colorindex.html



26

White rgb=#FFFFFFRed rgb=#FF0000Green rgb=#00FF00

Blue rgb=#0000FFMagenta rgb=#FF00FFCyan rgb=#00FFFFYellow rgb=#FFFF00Black rgb=#000000Aquamarine rgb=#70DB93Baker's Chocolate rgb=#5C3317Blue Violet rgb=#9F5F9FBrass rgb=#B5A642Bright Gold rgb=#D9D919Brown rgb=#A62A2ABronze rgb=#8C7853

Bronze II rgb=#A67D3DCadet Blue rgb=#5F9F9FCool Copper rgb=#D98719Copper rgb=#B87333Coral rgb=#FF7F00Corn Flower Blue rgb=#42426FDark Brown rgb=#5C4033Dark Green rgb=#2F4F2FDark Green Copper rgb=#4A766EDark Olive Green rgb=#4F4F2F

Dark Orchid rgb=#9932CDDark Purple rgb=#871F78Dark Slate Blue rgb=#6B238EDark Slate Grey rgb=#2F4F4FDark Tan rgb=#97694FDark Turquoise rgb=#7093DBDark Wood rgb=#855E42Dim Grey rgb=#545454Dusty Rose rgb=#856363Feldspar rgb=#D19275Firebrick rgb=#8E2323Forest Green rgb=#238E23Gold rgb=#CD7F32Goldenrod rgb=#DBDB70Grey rgb=#C0C0C0Green Copper rgb=#527F76Green Yellow rgb=#93DB70Hunter Green rgb=#215E21Indian Red rgb=#4E2F2F

Khaki rgb=#9F9F5FLight Blue rgb=#C0D9D9Light Grey rgb=#A8A8A8

Light Steel Blue rgb=#8F8FBDLight Wood rgb=#E9C2A6Lime Green rgb=#32CD32Mandarian Orange rgb=#E47833Maroon rgb=#8E236BMedium Aquamarine rgb=#32CD99Medium Blue rgb=#3232CDMedium Forest Green rgb=#6B8E23

Medium Goldenrod rgb=#EAEAAEMedium Orchid rgb=#9370DBMedium Sea Green rgb=#426F42Medium Slate Blue rgb=#7F00FFMedium Spring Green rgb=#7FFF00Medium Turquoise rgb=#70DBDBMedium Violet Red

rgb=#DB7093Medium Wood rgb=#A68064Midnight Blue rgb=#2F2F4FNavy Blue rgb=#23238ENeon Blue rgb=#4D4DFFNeon Pink rgb=#FF6EC7New Midnight Blue rgb=#00009CNew Tan rgb=#EBC79EOld Gold rgb=#CFB53BOrange rgb=#FF7F00Orange Red rgb=#FF2400Orchid rgb=#DB70DBPale Green rgb=#8FBC8FPink rgb=#BC8F8FPlum rgb=#EAADEAQuartz rgb=#D9D9F3Rich Blue rgb=#5959ABSalmon rgb=#6F4242Scarlet rgb=#8C1717Sea Green rgb=#238E68Semi-Sweet Chocolate rgb=#6B4226

Sienna rgb=#8E6B23Silver rgb=#E6E8FASky Blue rgb=#3299CC

Slate Blue rgb=#007FFFSpicy Pink rgb=#FF1CAESpring Green rgb=#00FF7FSteel Blue rgb=#236B8ESummer Sky rgb=#38B0DETa n rgb=#DB9370Thistle rgb=#D8BFD8Turquoise rgb=#ADEAEAVery Dark Brown rgb=#5C4033Very Light Grey

rgb=#CDCDCDViolet rgb=#4F2F4FViolet Red rgb=#CC3299Wheat rgb=#D8D8BFYellow Green rgb=#99CC3




Parte II - Hypertext Markup Language (HTML) - Tabelas

(HTML e algumas extensões do Netscape)





PELA RNP.URL: http://www.cr-df.rnp.br/



28

I.Tabelas em HTML

1.Principais Marcações

Segue abaixo o conjunto de marcações essenciais para desenhar tabelas em HTML. Algunsatributos podem ser definidos para cada uma dessas marcações. Falaremos desses atributos maisadiante.

• <TABLE></TABLE>Toda tabela deve ser iniciada com a marcação <table> e encerrada com </table>.

ATENÇÃO: Dessa forma a tabela vai aparecer sem bordas, mas dividindo linhas e células.

Para que a tabela apareça com bordas simples, defina dessa forma <table border></table>.Antes e depois de uma tabela, acontece sempre uma quebra de linha.

• <TR></TR> Cada linha de uma tabela deve sempre aparecer entre as marcações <tr> e </tr>. (TR = Table Row)

• <TD></TD> Esta é a marcação que define cada célula de uma tabela. As células de uma tabela devem sempreaparecer entre as marcações de linhas (<tr> e </tr>). Como padrão, o texto nas células é alinhado aesquerda.

• <TH></TH> Desta forma são definidos os títulos de uma tabela. Estes podem ser posicionados em qualquercélula. A diferença entre a marcação de célula e título de célula é que o título aparece em negrito.

Vamos ver então o exemplo de uma tabela utilizando essas marcações básicas.

<table border>

<tr><td>Itens/Mês</td><th>Janeiro</th><th>Fevereiro</th><th>Março</th></tr>

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

Vai aparecer dessa forma:



29

2. Atributos

As marcações das tabelas, podem apresentar resultados diferentes, se acompanhadas de algunsatributos. Vamos ver os principais:

• <BORDER> Esse atributo aparece junto a marcação TABLE. Caso esse atributo não apareça, a tabela não terábordas.Ou seja, como já vimos, para obter uma tabela com bordas, ela deve ser delimitada pelas marcações<table border> </table>.

• <ALIGN>Este atributo pode ser aplicado a TR,TH e TD, e controla como será o alinhamento do texto dentro deuma célula, com relação às bordas laterais.

Aceita os valores left, center, right, respectivamente para alinhar a esquerda, centralizar ou alinhar adireita. Veja o exemplo:

<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><td align=right>direita</td>

</tr></table>

Aparece assim:



30

• <VALIGN> Pode ser aplicado a TR,TH e TD, e define o alinhamento do texto nas células com relação a bordasuperior e inferior.

Aceita os valores top, middle e bottom

<table border>

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

Aparece assim:

• <NOWRAP>Este atributo evita que haja uma quebra de linha dentro de uma célula. Cautela ao utilizá-lo, para nãoproduzir células muito largas.

• <COLSPAN> Pode ser aplicado a TH ou TD. Define quantas colunas uma célula poderá abranger. Por padrão cadacélula corresponde a uma coluna, ou seja COLSPAN=1.



31

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>

Que fica assim:

• <ROWSPAN> Este atributo pode ser aplicado a células (TH e TD) e define quantas linhas uma mesma célula podeabranger. 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><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>



32

Apresenta-se dessa forma:

3. Mais elementos de controle

Vamos ver agora mais um conjunto de extensões que permitem maior controle sobre tabelas. Estassão especialmente úteis na criação de múltiplas tabelas intercaladas.

• BORDER=<value>Acrescentando um valor ao atributo BORDER é possível colocar tabelas em maior destaque:

<table border=5>

<tr><td>teste1</td> <td>teste2</td> <td>teste3</td></tr><tr><td>teste4</td> <td>teste5</td> <td>teste6</td></tr></table>

• CELLSPACING=<value> Este atributo é aplicável à marcação TABLE. Como padrão, o Netscape 1.1 utiliza espaço 2 entre ascélulas. Este atributo define o espaço entre cada célula na tabela.

<table border cellspacing=5>



33

<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 decada célula.

Veja exemplo:

<table border cellpadding=8>

<tr><td>teste1</td> <td>teste2</td> <td>teste3</td></tr><tr><td>teste4</td> <td>teste5</td> <td>teste6</td></tr></table>

A tabela mais compacta possível seria definida como: <table border=0 cellspacing=0 cellpadding=0>

• WIDTH=<value or percent>



34

Este atributo pode ser aplicado tanto a TABLE como a TH e TD. A ele tanto pode ser associado umvalor em "pixels" (ponto em tela gráfica), como um valor percentual. Ou seja, determina o quanto datela uma tabela ou célula de tabela deverá ocupar.

Vamos ver os exemplos:

<table border width=50%><tr><td>segunda</td><td>terça</td><td>quarta</td></tr><tr><td>quinta</td><td>sexta</td><td>sábado</td>

</tr></table>

Segundo exemplo - aplicando width a uma célula:

<table border><tr> <td width=50%>segunda</td> <td>terça</td> <td>quarta</td></tr><tr> <td>quinta</td> <td>sexta</td> <td>sábado</td></tr></table>



35

II. Tabela de Comandos

• Marcações:

<table> e </table> = define início e fim da tabela.<tr></tr> = define cada linha da tabela<td></td> = define cada célula da tabela. Um conjunto de células aparece sempre delimitado pelasmarcações de linha (<tr></tr>).<th></th> = define títulos na tabela. Na pr´tica são células onde o texto aparece emdestaque (negrito). Podem aparecer em qualquer posição na tabela.

• Atributos

<border> = determina que uma tabela tenha bordas. Aparece sempre associado a marcação<TABLE BORDER>.

<align> = Controla o alinhamento horizontal do texto em uma linha ou célula. Pode aparecerassociado a TR, TD ou TH. Aceita os valores:

left = alinha à esquerda right = alinha à a direita center = centraliza

Como nos exemplos:

<tr align=center> <td align=left> <th align=right>

<valign> = controla o alinhamento vertical do conteúdo de cada célula da tabela. Pode aparecerassociado a TR, TD ou TH. Aceita os valores:

top = alinha com o alto da célulamiddle = alinha no meiobottom = alinha com a parte de baixo da célula

Como nos exemplos:<tr align=top><td align=middle><th align=bottom>

<rowspan> = Aparece associado a células (TD ou TH) e determina quantas linhas uma célulaabrange.

Ex: <rowspan=2> , <rowspan=3> ...

<colspan> = Aparece associado a células (TD ou TH) e determina quantas colunas uma célulaabrange.

Ex: <colspan=2> , <colspan=3> ...

• Atribuição de Valores

BORDER=<value> = define a largura da bordaCELLSPACING=<value> = define espaçamento entre célulasCELLPADDING=<value> = define distância entre o texto e a borda das célulasWIDTH=<value or percent> = determina o quanto da tela uma tabela deve ocupar



36


Parte III - Hypertext Markup Language (HTML) - Formulários









37

I. Sobre este Tutorial

Neste tutorial, você vai aprender a criar "Formulários Eletrônicos", que permitem um usuário do Web

submeter informações para o provedor do serviço.

Existem vários tipos de campos de entrada, como:

• campos de entrada de texto• menus de múltipla escolha ou escolha única• botões sim-ou-não• botões para submissão ou limpeza de formulário

Cada uma destes campos tem funcionalidade própria e você vai aprender em que situação utilizá-losem seus formulários.

Para melhor compreender a notação utilizada nos formulários, você primeiro precisa se familiarizarcom HTML (Hypertext Markup Language). Consulte, se necessário, o nosso tutorial sobre HTMLbásico disponível em http://www.cr-df.rnp.br/hipertextos/cr-df/cursos/html1/

Se você já conhece HTML, as marcações utilizadas em formulários seguem a mesma convenção, eportanto, será fácil aprender.

Contudo, formulários HTML sempre seguem um padrão:

<TITLE>Título do Documento</TITLE>

no início, e o restante do documento a seguir.

Além disto, as marcações que definem o formulário precisam ser iniciadas e finalizadas, comoestas marcações de listas.

<UL><LI>Primeiro item da lista<LI>Segundo item da lista</UL>

<FORM>conteúdo do formulário...

</FORM>

Uma última observação: você pode ter múltiplos formulários em um único hiperdocumento. Apenascertifique-se que os blocos <FORM></FORM> não se sobrepõem.



38

II. Codificação básica

Como vimos, um formulário começa com a marcação <FORM> e termina com </FORM>. Outrositens devem ser especificados:

• Primeiro, o formulário precisa saber como enviar a informação para o servidor. Existem doismétodos, GET e POST.

METHOD="GET"A maioria dos documentos HTML são recuperados a partir da requisão de uma única URL aoservidor. Assim, um formulário que utilize este método, envia toda sua informação ao final da URLativada.

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 sabeque 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 ativadaa partir do formulário, e ela é referenciada através da marcação ACTION. Esta URL em geral apontapara 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 URLcompleta.

ACTION="/cgi-bin/post-query" para um script no seu servidor

ACTION="http://www.cr-df.rnp.br/cgi-bin/post-query" para um script no servidor do CR/DF

Após você construir estas 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>

Observe que este formulário utiliza o método POST e envia as informações digitadas para um scriptlocal 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 cham ar cada valor digitado.Certamente você pode definir mais de um campo de entrada textual ou menu dentro de umformulário, mas certifique-se de que cada um possui um nome diferente.



39

III. Texto

1. Entrada de texto comum - TEXT

A forma mais simples de campo de entrada é a marcação text. Este campo permite a digitação deuma única palavra ou linha de texto, e possui uma largura default de 20 caracteres.

Opções:

VALUE="" OPCIONALUtilizando a marcação VALUE você especifica que texto aparecerá no campo quando o formulário forexibido.

SIZE="" OPCIONALEsta 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 otexto irá se deslocar a esquerda dentro do campo.

MAXLENGTH="" OPCIONALSe você deseja limitar o número de caracteres que o usuário pode digitar, basta usar estamarcação. O formulário irá emitir um bip de erro se o usuário tentar digitar além do permitido emMAXLENGTH.


Qual o seu primeiro nome?<INPUT TYPE="text" NAME="primeiro_nome" VALUE="carlos" SIZE="10" MAXLENGTH="15">

</FORM>

Obs.:

• O valor informado em NAME deve utilizar sublinhado em vez de espaços em branco. Inserirespaços em branco nestes nomes pode causar problemas no servidor na decodificação dosvalores informados.

• Se seu formulário possui apenas um campo de entrada textual, ao teclar ENTER neste campo oformulário será submetido, como se o usuário tivesse acionado o botão SUBMIT.



40

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="" OPCIONALA marcação VALUE especifica um valor default para este campo.

SIZE="" OPCIONALEsta troca o tamanho do campo de password exibido na tela.

MAXLENGTH="" OPCIONALLimita o número de caracteres que o usuário pode informar como password.


Informe sua senha de acesso (8 caracteres):<INPUT TYPE="password" VALUE="xpto" NAME="sua_senha" SIZE="8" MAXLENGTH="8">

</FORM>

Obs.:

• Se você pretende utilizar MAXLENGTH para limitar o número de caracteres informados, tenhacerteza de especificar um SIZE com o mesmo tamanho, para fornecer ao usuário o sentimentode qual a largura do campo. Esta regra não foi utilizada no primeiro exemplo, que possui SIZEigual a 10, mas MAXLENGTH de 15, o que faz o campo se deslocar nos últimos 5 caracterescaso o valor informado possua mais do que 10 caracteres.

• Mesmo que o valor default VALUE esteja representado por asteriscos, o usuário pode visualizar oseu valor através da recuperação do fonte do hiperdocumento em HTML (uma opção comum namaioria dos clientes WWW).



41

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 peloscript de decodificação no servidor, mas não é diretamente exibida ao usuário no formulário.

Opções:VALUE="" OBRIGATÓRIOAtravés da marcação VALUE, você deve especificar o texto oculto a ser enviado ao scriptprocessador do formulário.


Você não pode visualizar nada aqui embaixo.<INPUT TYPE="hidden" NAME="nome_oculto" VALUE="form12">

</FORM>

Obs.:

• Mesmo que o valor especificado em HIDDEN VALUE não seja exibido no formulário, o usuáriopode vê-lo através da operação de visualização do fonte do hiperdocumento, da mesma formacomo no campo PASSWORD.



42

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ÓRIOEspecifica o número de linhas da entrada textual.

COLS="" OBRIGATÓRIOEspecifica o número de colunas da entrada textual.

Texto default OPCIONALSe você deseja que um texto seja exibido no campo textual ao abrir o formulário, simplesmentecoloque este texto entre as marcações de início e fim da TEXTAREA.


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 sobreeste servidor. Grato.</TEXTAREA>

</FORM>

Obs.:

• O usuário dispõe de Scrollbars para digitar além do número de linhas e colunas definidas emROWS e COLS.



43

IV. Menus

1. Menus com opções - SELECT

Menu de opção única

A marcação SELECT segue a mesma convencão de TEXTAREA. Ou seja, as opções de menuficam entre a marcação de início <SELECT> e a de fim </SELECT>.

Opções:OPTION OBRIGATÓRIOEspecifica uma opção presente no menu.

VALUE="" OPCIONALEspecifica o valor da opção retornada ao servidor. Se não for definido, o nome da opção é enviado ao

servidor.

SELECTED OPCIONALPor default, a primeira OPTION é exibida no menu. Esta marcação estabelece uma opção de menua ser exibida inicialmente, quando não se deseja que seja a primeira OPTION.


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>

Obs.:



44

• 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áriosRADIOBUTTONS, que veremos a seguir.

•

O script decodificador, no servidor, provavelmente apreciará uma única palavra para VALUE, emvez de múltiplas palavras. Você sempre pode utilizar sublinhado para separar expressõescompostas.

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çãoSIZE. Ela especifica quantas linhas com opções de menu serão exibidas na janela.

Opções: MULTIPLE OPCIONALEspecifica 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ÓRIONúmero de linhas (opções de menu) exibidas na janela.

OPTION OBRIGATÓRIOEspecifica uma opção da lista.

VALUE="" OPCIONALEspecifica o valor da opção retornada ao servidor.Se não for definido, o nome da opção é enviado ao servidor.

SELECTED OPCIONALEsta opção determina uma OPTION default para ser selecionada.


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>



45

Obs.:

• Este elemento de entrada é bom para listas com muitas opções, porque é possível controlarquantas serão exibidas por vez.

• Em alguns clientes WWW, é necessário teclar simultaneamente as teclas CONTROL ou SHIFTpara selecionar múltiplos itens.

V. Botões

1. Botões sim ou não - checkbox

Retornando ao formato de INPUT TYPE="", a marcação CHECKBOXES é perfeita para escolherentre duas opções.

Opções:VALUE="" OPCIONALEspecifica o valor da opção enviado ao servidor. Se não for definido, o valor "on" é enviado ao scriptdecodificador.

CHECKED OPCIONALEsta marcação define a opção selecionada por default.


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



46

Obs.:

• Este elemento funciona melhor para respostas do tipo "sim/não" ou "on/off".• Você pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo NAME,

mas diferentes VALUES

2. Botões com opções - radio

RADIOBUTTONS utilizam uma notação similar a de CHECKBOXES, contudo, apenas uma opçãopode ser escolhida.

Opções:

VALUE="" OBRIGATóRIOEspecifica o valor da opção a ser enviado para o servidor.Se não for definido, um valor "on" é enviado ao script decodificador.

CHECKED RECOMENDADOEsta 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.


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>



47

Obs.:

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

• Uma vez que um botão é selecionado, ele não pode ser desmarcado sem selecionar outro botãoque possua o mesmo NAME. A seleção default pode ser restaurada com a utilização do botãoRESET, introduzido a seguir.

• Se você utiliza vários RADIOBUTTONS com o mesmo NAME e nenhum VALUES, o servidor nãoserá capaz de dizer que botão foi selecionado, uma vez que o valor "on" será retornada paraqualquer um deles.

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 oscampos 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 preenc her 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="" OPCIONALEspecifica 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õesRESET e SUBMIT, respectivamente.

NAME="" OPCIONALSe NAME for definido em um botão SUBMIT, o formulário irá transmitir o valor do conteúdo doelemento VALUE, permitindo que você tenha múltiplos botões SUBMIT numa espécie de versão

simplificada de um RADIOBUTTONS.

<FORM METHOD="POST" ACTION="/cgi-bin/donothing">

Qual o seu primeiro nome? <INPUT TYPE="text"><BR>Aperte este botão: <INPUT TYPE="radio" NAME="nada"><BR><INPUT TYPE="reset" VALUE="Limpa campos"><INPUT TYPE="submit">

</FORM>



48

Obs.:

• Normalmente, o script decodificador retorna um hiperdocumento após ele processar a informaçãodo formulário.

• Nem todos os clientes suportam múltiplos botões SUBMIT. É melhor utilizar apenas um únicobotão SUBMIT para transmitir a informação digitada no formulário.



49


Parte IV - Hypertext Markup Language (HTML) - Extensões doNetscape








50

Extensões do Netscape

Este documento é uma tradução e adaptação do documento disponível em

(http://home.mcom.com/assist/net_sites/html_extensions.html)

A Netscape Communications desenvolveu uma série de extensões específicas, seguem algumasabaixo.Um documento completo sobre estas extensões está disponível na Netscape.Com, em:(http://home.mcom.com/assist/net_sites/html_extensions.html)

• <HR>A netscape desenvolveu 5 novas tags para serem aplicadas junto à marcação HR (horizontal rule)

<HR SIZE=número>A tag SIZE define a largura da linha horizontal.

<HR WIDTH=percentual>A linha padrão ocupa toda a extensão da tela. Com esta Tag é possível determinar opercentual de ocupação da tela de um linha.

<HR ALIGN=left|right|center>Assim é possível alinhar linhas horizontais que não ocupem toda a tela, seja à direita, àesquerda, ou centralizadas.

<HR NOSHADE>Produz uma linha realmente sólida, sem nenhum tipo de sombra.

• <UL> Utilizando-se as extensões TYPE=disc, TYPE=circle, or TYPE=square é possivel definir o

formato do indicador de uma lista não numerada (UL)• <OL>

Da mesma forma, é possível definir o tipo de algarismos em listas numeradas, usando asextensões:

(TYPE=A) para letras maiúsculas(TYPE=a) para letras minúsculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) números padrão

Para listas que devem começar com valores diferentes de 1, pode se usar a tag START. Porexemplo, START=5 vai exibir 'E', 'e', 'V', 'v', or '5' de acordo com a tag TYPE.

• <LI>À marcação LI também podem ser atribuidas extensões TYPE, como em UL e OL, conformeexplicado acima. Para listas numeradas pode ser usado VALUE para atribuir um valor a umitem.

• <IMG>

<IMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom>A marcação ALIGN=left fará com que os demais elementos sejam alinhados à direita eabaixo da imagem. Assim é possível fazer um texto contornar uma figura alinhada aesquerda da página. ALIGN=right se comporta de modo semelhante, mas na borda direita datela.



51

As novas extensões para HTML do NETSCAPE possibilitam ainda: ALIGN=top,ALIGN=texttop, ALIGN=middle, ALIGN=absmiddle, ALIGN=baseline, ALIGN=bottom eALIGN=absbottom, permitindo refinamentos no controle de alinhamento.

<IMG WIDTH=valor HEIGHT=valor>As marcações WIDTH e HEIGHT podem definir o tamanho da imagem, acelerando o trabalhodo browser. Ao invés de esperar a imagem chegar, o browser sabe previamente seutamanho, agilizando a transferência. É também possível alterar o tamanho original de umaimagem usando-se destas marcações. No entanto, desta forma, pode se perder a qualidadeda imagem.

<IMG BORDER=value>Define a espessura da borda de uma imagem. Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estão definidas como links.

<IMG VSPACE=valor HSPACE=valor>

Para as images flutuantes, VSPACE controla o espaço vertical acima e abaixo da figura,enquanto HSPACE controla o espaço horizontal a esquerda e a direita da figura.

NovosElementos

• <NOBR>NOBR define que uma linha não pode ser quebrada em sua exibição. É utilizado em par =<NOBR>e</NOBR>.

• <WBR>WBR significa Word BReak. É utilizado em uma linha definida como NOBR, para determinarem qual palavra alinha pode ser quebrada se necessário. Não produz um BR automático,mas indica ao browser onde quebrar a linha se necessário.

• <FONT SIZE=valor> </FONT>Com esta marcação você pode definir tamanho de fonte. São aceitos valores entre 1-7. Otamanho padrão da marcação FONT é 3. O valor também pode ser definido opcionalmentecom os caracteres '+' or '-' , antes do número.

• <BASEFONT SIZE=value> Altera o tamanho da BASEFONT relativo a todas as marcações FONT. O padrão é 3.

• <CENTER>Utilizado aos pares para centralizar elementos do seu texto em html.

NovasEntidades

Além dos caracteres especiais já em uso, foram criados:

® -> Marca Registrada -> ® © -> Copyright -> ©



52


Parte V - Hypertext Markup Language (HTML) - Frames









53

Documentos com múltiplas Janelas - Frames

Este tutorial é uma tradução e adaptação do documento Frames Syntax: http://home.mcom.com/assist/net_sites/frame_syntax.html

I. Sobre este Tutorial

Neste tutorial, vamos ver uma facilidade ainda não "sacramentada" para os HTMLeiros , mas quepromete vir por aí. É a possibilidade de se dividir um hipertexto em múltiplas janelas (frames ).

Agora, atenção por que até esse exato momento, janeiro 1996 só conheço um browser que lê essafacilidade. É o Netscape, a partir da versao 2.0. Então, muito cuidado, é recomendável que você criesempre uma opção de navegação para quem estiver usando um browser que não enxerga frames.Vamos ver como fazê-lo.

Uma última observação antes de partirmos para a festa. Aqui é importante que você já conheça

HTML - Hypertext Markup Language. Se não conhece, sem problema também, dá uma lidacuidadosa nos nossos outros tutoriais sobre HTML, disponíveis em http://www.cr-df.rnp.br/hipertextos/cr-df/cursos/ .

Este tutorial faz parte de um conjunto de módulos destinados a quem deseja publicar/proverinformação na Internet, através de serviço do tipo WWW (World Wide Web).

Atualmente - janeiro de 1996 - este conjunto compreende 7 módulos:

1. Introdução Geral a Internet2. HTML Básico3. Tabelas em HTML4. Formulários em HTML

5. Múltiplas Janelas - Frames6. Extensões do Netscape7. Guia de Estilo

Informações adicionais podem ser solicitadas a [email protected]



54

II. Estrutura Básica - Frame Document

O "Frame Document" é um arquivo onde se define a estrutura das janelas para seu

hiperdocumento em HTML. Quantas serão e qual sua distribuição em tela. Neste documentoas marcações <body> e seu par </body> são substituídas por <frameset> e </frameset>.Tal arquivo pode ser, por exemplo, o arquivo index.html de qualquer nível na estrutura doseu serviço de informações baseado em WWW.

Pronto, agora é preciso definir cada frame/janela internamente à(s) área(s) de frameset. Ouseja, as características de cada janela e seus "conteúdos" - URL incial. Cada janela/frame éantecedido da marcação <frame>, como numa lista cada item é antecedido por <li>.Usualmente, uma URL virá associada a cada frame.

A estrutura mínima do frame document será então:

<html>

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

<frameset ...>

<frame src="URL"><frame src="URL">

</frameset></html>

• Atenção: Note que com apenas essasmarcações o documento da estrutura -Frame Document - não funciona. Énecessário que esteja definido algumatributo para as áreas de frameset, assimcomo associadas urls a cada frame, comoveremos mais adiante.

• Atenção II: Você poderá ter - eprovavelmente terá - vários <frameset>intercalados. Da mesma foma como é

possível intercalar listas, ou tabelas emHTML.

Cada uma destas marcações - <frameset> e <frame> - aceita extensões, valores eatributos, como veremos a seguir.



55

III. Sintaxe

1. Frameset

Frameset aceita os atributos ROWS e COLS, referentes divisões horizontais(comolinhas em uma tabela) e verticais (como colunas) entre janelas na tela. Internamente amarcações FRAMESET só poderão aparecer outras FRAMESET, FRAME ouNOFRAMES.

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ãoFRAMESET será ignorada.

ATRIBUTOS

a) ROWS (<frameset rows=“valor, valor, valor...”>)Define divisões horizontais.entre janelas. Vem sempre acompanhado de valoresassociado, 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 separadospor vírgulas.

Este valor poderá ser:• 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áriocompreende.

• Percentual=> (ROWS="25%, 25%, 50%" ) Pode ainda ser um valorpercentual, sempre somando um valor de 100%.É o método mais simples. • 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 umterço.

Exemplos :

1. Para dividir a tela do browser em três janelas horizontais, sendo que a do meio é maislarga que as de cima e de baixo:



56

<html>


<frameset rows="20%, 60%, 20%"><frame src="cell1.html"><frame src="cell2.html"><frame src="cell3.html"></frameset>

</html> 2.Três janelas horizontais, sendo que a primeira e a segunda tem uma altura fixa, e oframe central deverá ocupar o restante do espaço:

<html>


<frameset rows="30, *, 50">

<frame src="cell1.html"><frame src="cell2.html"><frame src="cell3.html">

</frameset>

</html>

b) 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:



57

<html>


<frameset cols="20%, 60% ,20%">


</frameset>

</html>

2.Três janelas verticais, sendo que a primeira e a segunda tem uma altura fixa, e o framecentral deverá ocupar o restante do espaço:

<html>


<frameset cols="200, *, 100">


</frameset>

</html>

Atenção , para intercalar janelas verticais e horizontais, será necessário definirvárias áreas "FRAMESET". Para cada área delimitida como "FRAMESET" vocêpoderá definir número de linhas OU colunas. Veremos como fazê-lo mais adiante.Não é possível definir COLS e ROWS para uma mesma área “FRAMESET”.



58

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:

a) SRC="url"O atributo SRC define a URL que será exibida em cada frame.

b) NAME="nome_da_janela"Este atributo é utilizado para associar um nome a uma janela. Deve ser usado quandouma janela - frame - for o destino de um link em outro documento (normalmente é nomesmo documento. Um frame apontando para outro. Tipo um índice abrindo várias urlsem 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.

c) MARGINWIDTH="valor"Esse atributo controla as margens esquerda e direita de cada frame, ou seja, a distânciaentre o conteúdo da página e as margens da janela. O valor associado será um valorabsoluto em pixels. O menor valor aceito será 1.

Este atributo é opcional, caso não venha definido, o browser usará o seu padrão paradefinir as margens no frame/janela.

d) MARGINHEIGHT="valor"Também é um atributo opcional. Funciona exatamente como o anterior, só que determinaas margens superior/inferior em cada frame.

e) SCROLLING="yes/no/auto"Novamente, é um atributo opcional, que define se uma janela deve possuir barra derolagem ou não. Caso seja definido como YES, a janela sempre possuirá uma barra derolagem 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á abarra de rolagem, sempre que necessário.

f) NORESIZEEste 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.cr-df.rnp.br” name=“home” marginwidth=“5” marginheight=“5” scrolling=“auto” noresize>



59

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

Quando o acesso for feito através de um browser que entenda frames, o que estiverentre as marcações "noframes" será simplesmente ignorado.

Internamente a uma área "noframes" deverá ser usada a estrutura padrão dedocumentos 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><ahref="http://home.netscape.com/comprod/mirror/index.html"> Netscape Navigator!</a></p>

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

</FRAMESET></FRAMESET></html>

Veja como ela é exibida, por exemplo, com o MOSAIC (não lê frame) e com o NETSCAPE (lêframe).



60

MOSAIC - não lê frame NETSCAPE - lê frame

IV. Intercalando Frameset - exemplos

Para tornar mais claro como se constrõem múltiplas e intercaladas janelas - divisõeshorizontais e verticais - utilizando das marcações de frames, seguem abaixo doisexemplos 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>

</html>

Exemplo 2:



61

<html><head><title></title>

</head><frameset rows="15%, 85%"><frame src="teste5.htm"><frameset cols="25%, 75%"><frame src="teste4.htm"><frameset rows="85%, 15%"><frame src="teste3.htm"><frame src="teste2.htm"></frameset></frameset></frameset></html>

V. 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 lateralcom uma espécie de indíce do serviço de informação e outra janela em que a navegaçãopropriamente dita vai ocorrer. Desta forma, o índice está permanentemente disponíveldurante 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.

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.cr-df.rnp.br/" target="navega"> [link parao cr-df]</a><a href="http://www.cr-df.rnp.br/" target="navega"> [link parao cr-sp]</a>



62

<a href="http://www.cr-df.rnp.br/" target="navega"> [link parao cr-pe]</a></body>

</html>

VI. Cartela de Comandos

Marcação Função / características• Estrutura Básica

<html> e </html> Delimita o "frame document", como em qualquer arquivo htmlnormal.

<head></head> Define cabeça do documento, novamente, como em qualquerarquivo html.

<frameset></frameset> delimita as janelas a serem usadas no documento. Podem haver

vários frameset intercalados. Controla o comportamente das janelasatravés de seus atributos.

<frame src="URL"> Define cada janela/frame. Normalmente possui uma URLassociada. Aceita atributos e valores.

• Sintaxe

Para Frameset

<frameset rows="valor, valor, valor"> define quantas linhas - janelas horizontais - e sua ocupação natela, para cada área frameset. Aparecerão tantos valores quantasforem as janelas. Os valores relativos a cada janela deverão serseparados por vírgulas.Cada valor associado poderá ser:

1. Numérico - em pixels = <frameset rows="30, 50">2. Percentual = <frameset rows="25%, 25%, 50%">Relativo = <"2*,*">;

<frameset cols="valor, valor, valor"> define quantas colunas - janelas verticais - e sua ocupação da tela.Funciona exatamente como a marcação interior (associação devalores, com as mesmas opções).

Para Frame

<frame SRC="URL"> associa uma url a uma janela<frame NAME="valor"> associa um nome a uma janela<frame MARGINWIDTH="valor"> determina margem direita/esquerda em cada frame<frame MARGINHEIGHT="valor"> determina margem superior/inferior em cada frame<frame SCROLLING="yes/no/auto"> define presença, ausência, ou atribuição automática (pelo browser)

de barras de rolagem<frame NORESIZE > mantém fixo o tamanho de cada janela/frame

Para Noframes

<noframe></noframe> delimita área para navegação opcional, destinada a quem usabrowser que não entenda 'frame'.Internamente, recebe a marcação<body></body> delimitando o documento, e todas as demaismarcações HTML.

Target

<a href="URL" target="name"> Define a janela em que será exibido um link ao ser ativado. O nameassociado deverá ser idêntico ao name atribuído a janela de destinono “frame document”.

Apostila Geral HTML (Programação Web)

Documents

Transcript of Apostila Geral HTML (Programação Web)