DESENVOLVIMENTO EM AMBIENTES WEB

Comentários:
• Os comentários são usados para descrever a
própria página, seu status ou o significado do
uso de um comando. Eles não são
interpretados pelo browser e nem mostrados
ao usuário.

<!-- Página de Pedidos -->

<!-- Versão 0.4 -->
<!-- Início do Menu --> 1

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Link:
• Link é o elemento principal do hipertexto.

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Estrutura básica da tag <a>:
• Para criar um link são necessários
basicamente:
• Nome ou caminho de um arquivo (ou
documento) para qual se deseja criar um link.
• O texto que servirá como “ponto de atenção” ao
arquivo.

<a href=“caminho”>Ponto de Atenção</a>

3
<a href=“menu.html”>Voltar ao Menu</a>
Prof. Samuel Rodrigues
DESENVOLVIMENTO EM AMBIENTES WEB
Link entre dois documentos:
• Notas:
• Respeito à caracteres maiúsculos e minúsculos;
• As páginas devem estar no mesmo diretório,
caso contrario deve-se passar não só o nome do
arquivo, mas, seu endereço completo.

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Caminhos relativos e absolutos:
• Caminho Relativo: é baseado na localização
em relação ao arquivo atual. Comumente
utilizado quando a estrutura dos arquivos
fazem parte de um mesmo conjunto.

href=“arquivo.html”
href=“diretorio/arquivo.html”
href=“../arquivo.html”
href=“../diretorio/arquivo.html” 5

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Caminhos relativos e absolutos:
• Caminho Absoluto: leva em consideração o
caminho completo do sistema de arquivos,
ignorando a posição do arquivo atual. Utilizado
quando a estrutura dos arquivos fazem parte de
um conjunto diferente.

href=“/un/diretorio/arquivo.html” (linux/unix)
href=“/c:/diretorio/arquivo.html” (dos/windows)
6

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Link para um documento na web:
• As páginas na web se localizam em algum
lugar diferente do qual você está trabalhando
atualmente.

<a href=“http://www.terra.com.br”>Link para o Terra</a>

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Anatomia da URL:
• Os links podem referenciar o domínio de um
site na Internet como visto no slide anterior ou
um documento específico dentro do site. Em
ambos os casos é usada uma URL (Uniform
Resource Location) para fazer essa ligação.
•A URL é composta pela indicação do
protocolo (http://), pelo domínio
(www.terra.com.br), por um ou mais diretórios
8
e pelo nome do arquivo.
Prof. Samuel Rodrigues
DESENVOLVIMENTO EM AMBIENTES WEB
Anatomia da URL:
Protocolo://domínio/diretório/arquivo

• protocolo: forma como a página é acessada

(http ou ftp);
• domínio: nome do sistema na Internet na qual
a informação está armazenada
• diretório: local onde o documento está
armazenado
• arquivo: nome do arquivo.
9
http://www.terra.com.br/futebol/estaduais2008/documento.html

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Link para o cliente de e-mail:
• O link pode se referenciar a um endereço de e-
mail com o uso do comando mailto. Os
navegadores que suportam esse comando abrem o
cliente de e-mail padrão do sistema.

<a href=“mailto:samuel.rodrigues@docente.unip.br”>Contato</a>

10

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Âncoras:
• Âncoras são lugares especiais para os quais
podem ser criados links. Podem ser usadas com
link no mesmo documento ou link em outros
documentos. São normalmente usadas em
páginas cujo conteúdo é extenso.
<a href=“#nome_do_alvo”>Nome Visivel</a>

O alvo de uma âncora é uma tag que será referenciada pelo

valor do seu atributo “id”.
11
<h1 id=“nome”>Bem vindo à Sessão 2</h1>
Prof. Samuel Rodrigues
DESENVOLVIMENTO EM AMBIENTES WEB
Âncoras no mesmo documento:
• As âncoras podem levar para sessões dentro
de um mesmo documento:
Vá para a <a href=“#sessao2”>sessão 2</a>

Âncoras em documentos distintos:

• As âncoras podem também levar a sessões dentro de um
documento diferente do atual:
Vá para a <a href=“arquivo.html#sessao2”>sessão 2</a>
12
(EXERCÍCIO ÂNCORAS)
Prof. Samuel Rodrigues