HTML avançado

Formulários - Parte 1

Um formulário é um modelo para a entrada de um conjunto de dados. Eles são muito usados em registros eletrônicos ou em formulários para o envio de emails para as páginas sem precisar abrir um programa de email ou digitar endereços, além da vantagem de ter campos para cada tipo de informação.
O primeiro passo para fazer formulários é aprender as tags que fazem os campos de entrada de dados.
O elemento

inicia um formulário e contém uma seqüência de elementos de entrada e de formatação do documento.

Listagem 11: Sintaxe básica de formulário

1	"URL_de_script" METHOD=método>...

Atributos da tag

ACTION: especifica o URL do script ao qual serão enviados os dados do formulário.
METHOD: seleciona um método para acessar o URL de ação. Os métodos usados atualmente são GET e POST. Ambos os métodos transferem dados do navegador para o servidor, com a seguinte diferença básica:

• POST: os dados inseridos fazem parte do corpo da mensagem enviada para o servidor; transfere grande quantidade de dados.
• GET: os dados inseridos fazem parte do URL associado à consulta enviada para o servidor; suporta até 128 caracteres.

Os formulários podem conter qualquer formatação - parágrafos, listas, tabelas, imagens - exceto outros formulários. Em especial, colocamos dentro da marcação de

as formatações para campos de entrada de dados, que são três: , e .</p> <p> Todos os campos de entrada de dados têm um atributo NAME, ao qual associamos um nome, utilizado posteriormente pelo sistema para enviar os dados. Normalmente são usados "scripts". </p> <p> Os scripts que organizam esses dados de entrada de todos os campos em um conjunto de informações e realizem uma tarefa programada, como por exemplo enviar os dados do formulário para o seu email. HTML não tem condições de fazer isso, por isso é necessário utilizar scripts CGI, PERL ou ASP para executar estas tarefas, porém estes tipos de scripts necessitam de aprendizado mais dedicado para se criar o que você deseja e são muito mais complexos do que a linguagem HTML, pois eles processam informações.</p> <p> Você pode usar scripts prontos em seus formulários, mas no momento ainda não é possível membros da StarMedia Home Pages executarem os scripts nos servidores.</p> <h3> Formulários - Parte 2</h3> <p> Agora precisamos criar os campos onde os usuários vão digitar os dados e selecionar as opções. Você inclui estes campos dentro da tag <form> . Conheça a função de cada um e como criá-los:</p> <p> <input>: esta é a tag para iniciar a criação de campos de dados. Há vários atributos que permitem a criação de diferentes campos de entrada de dados. Vejamos:</p> <p> <strong>Campo de dados texto</strong></p> <p> Quando INPUT não apresenta atributos, assume-se TYPE=TEXT como padrão à formatação:</p> <p> <strong>Listagem 12:</strong> Exemplo de input do tipo text</p> <div> <div id="highlighter_350818" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> <div class="line number2 index1 alt1"> 2</div> <div class="line number3 index2 alt2"> 3</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><form> </code></div> <div class="line number2 index1 alt1"> <code class="js plain">Nome: <input TYPE=TEXT NAME=</code><code class="js string">"Nome"</code><code class="js plain">></code></div> <div class="line number3 index2 alt2"> <code class="js plain"></FORM></code></div> </div> </td></tr> </tbody></table> </div> </div> <p> <strong>Ou apenas:</strong></p> <p> <strong>Listagem 13:</strong> Exemplo de input com tipo implícito</p> <div> <div id="highlighter_73388" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> <div class="line number2 index1 alt1"> 2</div> <div class="line number3 index2 alt2"> 3</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><form> </code></div> <div class="line number2 index1 alt1"> <code class="js plain">Nome: <input NAME=</code><code class="js string">"Nome"</code><code class="js plain">></code></div> <div class="line number3 index2 alt2"> <code class="js plain"></FORM></code></div> </div> </td></tr> </tbody></table> </div> </div> <p> <strong>Campo de dados de texto em formato senha</strong></p> <p> Entrada de texto na qual os caracteres são escondidos por asteriscos. É muito usado para entradas de senhas, como se pode ver no exemplo.</p> <p> <strong>Listagem 14:</strong> Exemplo de input password</p> <div> <div id="highlighter_292417" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> <div class="line number2 index1 alt1"> 2</div> <div class="line number3 index2 alt2"> 3</div> <div class="line number4 index3 alt1"> 4</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><form> </code></div> <div class="line number2 index1 alt1"> <code class="js plain">Usuário: <input TYPE=TEXT NAME=login><br> </code></div> <div class="line number3 index2 alt2"> <code class="js plain">Senha: <input TYPE=PASSWORD NAME=</code><code class="js string">"senha"</code><code class="js plain">> </code></div> <div class="line number4 index3 alt1"> <code class="js plain"></FORM></code></div> </div> </td></tr> </tbody></table> </div> </div> <p> <strong>Atributo NAME</strong></p> <p> Ele é especialmente para que você dê um nome ao campo, ele não aparece na página, mas serve para identificar o campo e o valor digitado no email que você receber, nunca deixe de definir o nome dos campos, só assim você você poderá saber o que cada usuário preencheu em cada campo. Por exemplo se você tem vários campos de texto, cada um para um tipo de infromação diferente, você usa o name para identificar o campo. Você vai ver sempre que em todas as tags INPUT este atributo está presente. Basta incluir ele da seguinte forma:</p> <p> <strong>Listagem 15:</strong> Exemplo de uso do atributo name</p> <div> <div id="highlighter_488395" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><input type=</code><code class="js string">"text"</code> <code class="js plain">name=</code><code class="js string">"coloque o nome do campo"</code><code class="js plain">></code></div> </div> </td></tr> </tbody></table> </div> </div> <p> <strong>Atributo VALUE</strong></p> <p> Pode ser usado para dar um valor inicial a um campo de tipo texto ou senha. Desse modo, se o usuário não preencher este campo, será adotado este valor padrão. Se o usuário quiser inserir dados, ele somente precisará apagar o que já estiver escrito.</p> <p> <strong>Listagem 16:</strong> Exemplo de atributo value</p> <div> <div id="highlighter_257998" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><input TYPE=TEXT NAME=</code><code class="js string">"nome"</code> <code class="js plain">VALUE=</code><code class="js string">"Seu nome"</code><code class="js plain">></code></div> </div> </td></tr> </tbody></table> </div> </div> <p> <strong>Atributo SIZE</strong></p> <p> Especifica o tamanho do espaço no vídeo para o campo do formulário. Só é válido para campos TEXT e PASSWORD. O valor padrão é 20.</p> <p> <strong>Listagem 17:</strong> Input com atributo size definido</p> <div> <div id="highlighter_273346" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> <div class="line number2 index1 alt1"> 2</div> <div class="line number3 index2 alt2"> 3</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><form> </code></div> <div class="line number2 index1 alt1"> <code class="js plain">Endereço: <input TYPE=TEXT SIZE=35></code></div> <div class="line number3 index2 alt2"> <code class="js plain"></FORM></code></div> </div> </td></tr> </tbody></table> </div> </div> <p> <strong>Atributo MAXLENGTH</strong></p> <p> É o número de caracteres aceitos em um campo de dados; este atributo só é válido para campos de entrada TEXT e PASSWORD.</p> <p> <strong>Listagem 18:</strong> Atributo maxlength</p> <div> <div id="highlighter_421207" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> <div class="line number2 index1 alt1"> 2</div> <div class="line number3 index2 alt2"> 3</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><form> Dia </code><code class="js keyword">do</code> <code class="js plain">mês: </code></div> <div class="line number2 index1 alt1"> <code class="js plain"><input TYPE=TEXT NAME=</code><code class="js string">"ex"</code> <code class="js plain">MAXLENGTH=2> </code></div> <div class="line number3 index2 alt2"> <code class="js plain"></FORM></code></div> </div> </td></tr> </tbody></table> </div> </div> <p> Apenas 2 caracteres serão lidos pelo formulário, não importa o quanto se escreva neste campo.</p> <p> <strong>Campo de Dados Escondido (Hidden)</strong></p> <p> Este tipo de campo funciona igual a um campo de texto, só que ele não aparece no formulário para o visitante. Ele está lá no código, mas o visitante não pode vê-lo ou alterá-lo. Isso é importante para você incluir informações que achar necessárias, mas que não deseja que o visitante altere. </p> <p> <strong>Listagem 19:</strong> Exemplo de uso de campo hidden </p> <div> <div id="highlighter_840487" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> <div class="line number2 index1 alt1"> 2</div> <div class="line number3 index2 alt2"> 3</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><form> </code></div> <div class="line number2 index1 alt1"> <code class="js plain"><input TYPE=HIDDEN NAME=Escondido Value=Sim> </code></div> <div class="line number3 index2 alt2"> <code class="js plain"></FORM></code></div> </div> </td></tr> </tbody></table> </div> </div> <p> Aqui o campo está escondido. O visitante não o vê, mas ele vai ser processado pelo formulário. Você pode incluí-lo sem problemas junto com os outros elementos. Por exemplo:</p> <p> <strong>Listagem 20:</strong> Form com campo hidden</p> <div> <div id="highlighter_386014" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> <div class="line number2 index1 alt1"> 2</div> <div class="line number3 index2 alt2"> 3</div> <div class="line number4 index3 alt1"> 4</div> <div class="line number5 index4 alt2"> 5</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><form> </code></div> <div class="line number2 index1 alt1"> <code class="js plain">Usuário: <input TYPE=TEXT NAME=login><br> </code></div> <div class="line number3 index2 alt2"> <code class="js plain">Senha: <input TYPE=PASSWORD NAME=</code><code class="js string">"senha"</code><code class="js plain">> </code></div> <div class="line number4 index3 alt1"> <code class="js plain"><input TYPE=HIDDEN NAME=Escondido Value=Sim> </code></div> <div class="line number5 index4 alt2"> <code class="js plain"></FORM></code></div> </div> </td></tr> </tbody></table> </div> </div> <p> <strong>Múltipla escolha</strong></p> <p> Você também pode criar um campo onde o usuário só precisa selecionar as opções, sem digitar nada. Há dois tipos básicos de seleção:</p> <p> <strong>CHECKBOX</strong>: insere um botão de escolha de valores para várias opções. </p> <p> <strong>Listagem 21:</strong> Exemplos de checkboxes</p> <div> <div id="highlighter_28370" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> <div class="line number2 index1 alt1"> 2</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><input TYPE=CHECKBOX NAME=</code><code class="js string">"esporte"</code> <code class="js plain">VALUE=</code><code class="js string">"basquete"</code><code class="js plain">>Basquete <br > </code></div> <div class="line number2 index1 alt1"> <code class="js plain"><input TYPE=CHECKBOX NAME=esporte VALUE=</code><code class="js string">"bocha"</code><code class="js plain">>Bocha</code></div> </div> </td></tr> </tbody></table> </div> </div> <p> Um atributo "CHECKED" marca uma escolha inicial, isto é, se o usuário não escolher nenhuma opção, o formulário irá considerar a alternativa "pré-escolhida":</p> <p> <strong>Listagem 22:</strong> Uso do atributo checked</p> <div> <div id="highlighter_252422" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> <div class="line number2 index1 alt1"> 2</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><input TYPE=CHECKBOX NAME=</code><code class="js string">"esporte"</code> <code class="js plain">VALUE=</code><code class="js string">"volei"</code> <code class="js plain">CHECKED&>Vôlei <br> </code></div> <div class="line number2 index1 alt1"> <code class="js plain"><input TYPE=CHECKBOX NAME=</code><code class="js string">"esporte"</code> <code class="js plain">VALUE=</code><code class="js string">"futebol"</code><code class="js plain">>Futebol</code></div> </div> </td></tr> </tbody></table> </div> </div> <p> <strong>Escolha única</strong></p> <p> <strong>RADIO</strong>: insere um botão de escolha de valores para uma opção, isto é, somente uma alternativa pode ser escolhida. </p> <p> <strong>Listagem 23:</strong> Campos radio</p> <div> <div id="highlighter_780920" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> <div class="line number2 index1 alt1"> 2</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><input TYPE=RADIO NAME=</code><code class="js string">"time"</code> <code class="js plain">VALUE=</code><code class="js string">"palm"</code><code class="js plain">>Palmeiras <br> </code></div> <div class="line number2 index1 alt1"> <code class="js plain"><input TYPE=RADIO NAME=</code><code class="js string">"time"</code> <code class="js plain">VALUE=</code><code class="js string">"inte"</code><code class="js plain">>Internacional</code></div> </div> </td></tr> </tbody></table> </div> </div> <p> Uma diretiva CHECKED marca uma escolha inicial - se o usuário não escolher nenhuma opção, o formulário irá considerar a alternativa "pré-escolhida":</p> <p> <strong>Listagem 24:</strong> Atributo checked em radios</p> <div> <div id="highlighter_354035" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> <div class="line number2 index1 alt1"> 2</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><input TYPE=RADIO NAME=</code><code class="js string">"time"</code> <code class="js plain">VALUE=</code><code class="js string">"aea"</code> <code class="js plain">CHECKED>Cruzeiro <br> </code></div> <div class="line number2 index1 alt1"> <code class="js plain"><input TYPE=RADIO NAME=</code><code class="js string">"time"</code> <code class="js plain">VALUE=</code><code class="js string">"naut"</code><code class="js plain">>Náutico</code></div> </div> </td></tr> </tbody></table> </div> </div> <p> <strong>Botões de ação</strong></p> <p> Os botões são usados para executar ações dentro do formulário, como enviar os dados ou limpar os campos. </p> <p> <strong>SUBMIT:</strong> apresenta o botão que causa o envio dos dados de entrada para o servidor. </p> <p> <strong>Listagem 25:</strong> Uso de botão submit</p> <div> <div id="highlighter_652032" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> <div class="line number2 index1 alt1"> 2</div> <div class="line number3 index2 alt2"> 3</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><form> </code></div> <div class="line number2 index1 alt1"> <code class="js plain"><input TYPE=SUBMIT> </code></div> <div class="line number3 index2 alt2"> <code class="js plain"></FORM></code></div> </div> </td></tr> </tbody></table> </div> </div> <p> É possível modificar a mensagem desse botão através do atributo VALUE.</p> <p> <strong>Listagem 26:</strong> Alterando o texto do submit</p> <div> <div id="highlighter_147330" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> <div class="line number2 index1 alt1"> 2</div> <div class="line number3 index2 alt2"> 3</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><form> </code></div> <div class="line number2 index1 alt1"> <code class="js plain"><input TYPE=SUBMIT VALUE=</code><code class="js string">"Envia mensagem"</code><code class="js plain">> </code></div> <div class="line number3 index2 alt2"> <code class="js plain"></FORM></code></div> </div> </td></tr> </tbody></table> </div> </div> <p> <strong>RESET</strong>: restaura os valores iniciais das entradas de dados.</p> <p> <strong>Listagem 27:</strong> Exemplo com botão reset</p> <div> <div id="highlighter_464060" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> <div class="line number2 index1 alt1"> 2</div> <div class="line number3 index2 alt2"> 3</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><form> </code></div> <div class="line number2 index1 alt1"> <code class="js plain"><input TYPE=RESET> </code></div> <div class="line number3 index2 alt2"> <code class="js plain"></FORM></code></div> </div> </td></tr> </tbody></table> </div> </div> <p> Também é possível modificar a mensagem desse botão através do atributo VALUE.</p> <h3> Formulários - Parte 3</h3> <p> <strong><select>:</strong> apresenta uma lista de valores em um menu suspenso. Ótimo para criar escolhas que o usuário seleciona sem precisar digitar através de campos <option>. Veja como fazer: . </p> <p> <strong>Listagem 28:</strong> Exemplo de campo select</p> <div> <div id="highlighter_806210" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> <div class="line number2 index1 alt1"> 2</div> <div class="line number3 index2 alt2"> 3</div> <div class="line number4 index3 alt1"> 4</div> <div class="line number5 index4 alt2"> 5</div> <div class="line number6 index5 alt1"> 6</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><select NAME=</code><code class="js string">"sabor"</code><code class="js plain">> </code></div> <div class="line number2 index1 alt1"> <code class="js plain"><option>Abacaxi </code></div> <div class="line number3 index2 alt2"> <code class="js plain"><option>Creme </code></div> <div class="line number4 index3 alt1"> <code class="js plain"><option>Morango </code></div> <div class="line number5 index4 alt2"> <code class="js plain"><option>Chocolate </code></div> <div class="line number6 index5 alt1"> <code class="js plain"></SELECT></code></div> </div> </td></tr> </tbody></table> </div> </div> <p> <strong>Atributo SELECTED</strong>: também é possível estabelecer uma escolha-padrão, através do atributo SELECTED.</p> <p> <strong>Listagem 29:</strong> Uso do atributo selected</p> <div> <div id="highlighter_869077" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> <div class="line number2 index1 alt1"> 2</div> <div class="line number3 index2 alt2"> 3</div> <div class="line number4 index3 alt1"> 4</div> <div class="line number5 index4 alt2"> 5</div> <div class="line number6 index5 alt1"> 6</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><select NAME=</code><code class="js string">"sabor"</code><code class="js plain">> </code></div> <div class="line number2 index1 alt1"> <code class="js plain"><option>Abacaxi </code></div> <div class="line number3 index2 alt2"> <code class="js plain"><option SELECTED>Creme </code></div> <div class="line number4 index3 alt1"> <code class="js plain"><option>Morango </code></div> <div class="line number5 index4 alt2"> <code class="js plain"><option>Chocolate </code></div> <div class="line number6 index5 alt1"> <code class="js plain"></SELECT></code></div> </div> </td></tr> </tbody></table> </div> </div> <p> <strong>Atributo SIZE:</strong> com o atributo SIZE, escolhe-se quantos itens da lista serão mostrados (no exemplo, SIZE=4).</p> <p> <strong><textarea></strong> :abre uma área para entrada de texto, de acordo com atributos para número de colunas, linhas, e - se for o caso - um valor inicial. É um campo onde as pessoas poderão digitar mais texto do que nos campos de texto que vimos na parte 2. Além disso, o usuário pode ver o texto que está digitando. A tag fica assim:</p> <p> <strong>Listagem 30:</strong> Textarea básico</p> <div> <div id="highlighter_803944" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><textarea COLS=40 ROWS=5 NAME=</code><code class="js string">"comentario"</code><code class="js plain">> Deixe seu comentário

Repare que, no atributo "COLS", definimos o número de colunas para a largura do campo de texto e, em "ROWS", o número de linhas para o campo de texto. Se o usuário digitar mais do que cinco linhas, surgirá uma barra de rolagem para ele cortar o texto se desejar.
Os valores destes atributos podem ser modificados à vontade de acordo com a sua necessidade.

Inserindo Sons

Você pode incluir em sua página um som de fundo. Com isso, sempre que alguém acessar sua página, este som será tocado. Desta forma você pode fazer seu site ter mais recursos e personalidade.
Os arquivos de som ideais para serem inseridos em uma home page são aqueles no formato MIDI (.MID), mas você também pode incluir sons do tipo WAVE (.WAV).
O Netscape e o Internet Explorer têm algumas diferenças em seu sistema e, por isso, em algumas versões do Netscape o som pode não tocar.
A tag deve ser . Veja o exemplo:
Listagem 31: Tag emed

1	"nome da música" autostart="true" loop=10>

• Em "nome da musica" você coloca o nome da música mid ou wav.
• Em "loop" você coloca o número de vezes que o som vai ser repetido.
• Em "autostart" você define se quer que a música comece a tocar sozinha (atributo TRUE), se você colocar "FALSE" o usuário terá que clicar no botão de "play"para ouvir a música
• 
  

Se você quiser que ele fique se repetindo infinitamente, basta colocar "infinity" no lugar de um número. Não é necessário colocar "" neste caso.

Âncoras

Âncoras são links estabelecidos para certas partes de uma mesma página ou de outra página qualquer, por exemplo, se você quer que um link vá direto para um texto que está no meio de uma página sem o visitante ter que descer a página. Por exemplo, clicando aqui você salta automaticamente para o fim da página.
Para o funcionamento de uma âncora deve-se estabelecer dois comandos:

• Um que defina o lugar da página para onde se pretende "saltar" e
• Outro que identifique esse ponto de destino. - Links com âncoras para uma mesma página. Você pode fazer com que links saltem para determinados pontos de uma mesma página, facilitando a navegação. Veja como. Primeiro vamos definir o ponto de destino. Você deve incluir a seguinte tag exatamente no local onde quer que o link vá:

Listagem 32: Sintaxe da tag âncora

1	"Coloque o nome da ancora aqui">

NAME: é um parâmetro que define um ponto de destino.
Agora você pode usar a tag de link "comum" para fazer o link saltar para o ponto onde você definiu: Texto.
Repare que há um símbolo "#" antes do nome da âncora. É ele que vai fazer o navegador entender que deve ir para a âncora que você definiu.
Links com âncoras para uma outra página
Agora digamos que você queira que o link vá para uma outra página e direto para um texto no final dela. Primeiro você deve incluir, na página de destino, a tag da âncora no ponto onde ela vai aparecer ela depois de clicar no link, e salvar a página. Em seguida, na página que terá o link, você deve construir a tag assim:
Listagem 33: âncora para outra página

1	"nome-do-lugar-a-ser-levado#nome da ancora">Texto

Em "nome-do-lugar-a-ser-levado" você coloca o URL ou a página html que vai ser mostrada e, depois do destino, o "#nome da ancora". Este nome de âncora deve ser o mesmo nome de âncora que você definiu na página de destino.
Você pode incluir quantas âncoras quiser em sua página, mas lembre-se de que cada uma deve ter um nome diferente.



postado por cleidiane.