Links e Imagens
Ana Cuper
[email protected]
Links
• Existem duas maneiras de referenciar um
documento: relativo ou absoluto.
• Caminho absoluto- começa de um ponto
fixo :
<a href="http://www.instructor.com.br/web/index.html">
Site Gaia </a>
• Caminho relativo- definido em relação ao
seu diretório corrente
<a href="roteiros/index.htm">Roteiros</a>
Como fazer links relativos
index.html
institucional
modalidades
pacotes
mountain.html
rapel.html
trekking.html
canyoning.html
roteiros
imagens
imagens
• A página index.html está na raiz do site.
• Dentro dela se você deseja chamar a página
canyoning.html que está dentro de modalidades, basta
um link:
<a href=”modalidades/canyoning.html”> Canyoning </a>
Como fazer links relativos
index.html
institucional
modalidades
pacotes
mountain.html
rapel.html
trekking.html
canyoning.html
roteiros
imagens
imagens
• da página canyoning.html para a index.html
que está na raiz do site é preciso indicar um
nível acima:
<a href=”../index.html”>Home</a>
Inserindo imagens
• As imagens nas páginas html são
chamadas através da tag <img> Ex:
<img src="imagens/gaia_logo.gif"
width="750" height="55" />
• Onde gaia_logo.gif é o nome da
imagem. Ela está dentro do diretório
“imagens” e sua largura é 750px e
altura 55px.
Caminho
institucional
index.html
modalidades
pacotes
mountain.html
rapel.html
trekking.html
canyoning.html
roteiros
imagens
thumb_canyoning.jpg
• Suponha que na página canyoning.html
você deseja incluir uma imagem que está
dentro do diretório imagens.
• O caminho a percorrer seria:
<img src=”imagens/thumb_canyoning.jpg”>
imagens
Caminho das imagens
index.html
institucional
modalidades
pacotes
mountain.html
rapel.html
trekking.html
canyoning.html
imagens
roteiros
modalidades.gif
imagens
• suponha que na página canyoning.html você deseja
incluir uma imagem que está dentro do diretório
imagens na raiz do site.
• O caminho a percorrer seria:
<img src=”../imagens/modalidades.gif” />
Links para e-mails:
<a href=”mailto:[email protected]”>
e-mail </a>
Botões simples
• Links usando imagens:
<a href="roteiros.html">
<img src=”roteiros.gif” /> </a>
Links internos:
• dentro de uma mesma página:
<a name=topo> Título da página </a>
<p> texto </p>
<p> texto </p>
<p> texto </p>
<a href= #topo> Topo da página</a>
• O parâmetro NAME serve para marcar um
ponto para possíveis desvios. Quando
desviamos para um determinado ponto
dentro de um documento, indicamos este
nome com um "#"
O que vamos fazer?
• Inserir imagens nas páginas do site e
também links para podermos navegar.
• Abrir a página index.html
• Atenção: o código que estiver em
preto, é o que já existe em sua página
e você não deve copiá-lo novamente
1º. Inserir as imagens da testeira
• Na tabela grande, na primeira célula –
inserir a imagem gaia_logo.gif:
<td><img src="imagens/gaia_logo.gif"
width="750" height="55" /></td>
2º. Inserir os botões simples
• Na tabela grande, na segunda célula – inserir
as imagens:
<tr>
<td><img src="imagens/espaco2.gif" width="259" height="47“/>
2º. Inserir os botões simples
• Na tabela grande, na segunda célula – inserir
as imagens:
<img src="imagens/roteiros.gif" width="115"
height="47" border=“0” />
2º. Inserir os botões simples
• Na tabela grande, na segunda célula – inserir
as imagens:
<img src="imagens/modalidades.gif" width="114" height="47“
border=“0” />
2º. Inserir os botões simples
• Na tabela grande, na segunda célula – inserir
as imagens:
<img src="imagens/pacotes.gif" width="114" height="47"
border=“0” />
2º. Inserir os botões simples
• Na tabela grande, na segunda célula – inserir
as imagens:
<img src="imagens/contato.gif" width="114" height="47"
border=“0” />
2º. Inserir os botões simples
• Na tabela grande, na segunda célula – inserir
as imagens:
<img src="imagens/lat1.gif" width="34" height="47" /></td>
</tr>
• Atenção: não deixe espaço entre as
tags, pois senão haverá um espaço em
branco entre as imagens. Ou seja,
assim que terminar uma tag, já começa
outra. Ex: /><img
3º Botões simples
• Em cada imagem insira seu link:
<a href=“roteiros/index.html”><img src="imagens/roteiros.gif"
width="115" height="47" border=“0” /></a>
<a href=“modalidades/index.html”><img src="imagens/modalidades.gif"
width="114" height="47" border=“0” /></a>
<a href=“pacotes/index.html”><img src="imagens/pacotes.gif"
width="114" height="47“ border=“0” /></a>
<a href=“contato/index.html”><img src="imagens/contato.gif"
width="114" height="47" border=“0” /></a>
4º Inserir uma imagem na coluna
• Na coluna lateral, onde
você inseriu os dados da
agência, insira uma figura
antes do texto.
<p><img src=“roteiros/imagens/thumb_
brotas3.jpg width="122" height=“82" /></p>
5º Inserir o e-mail de contato
• Aonde aparece o e-mail do GAIA insira
o seu e-mail para contato. Siga o
exemplo:
<a href=“mailto:[email protected]”>
[email protected] </a>
6ª. Links nas laterais
• Nas colunas laterais,
aproveite as
informações para fazer
links para outras
páginas.
Como inserir imagens nas pág. internas?
• Abra a página inicial de modalidades,
que está em “modalidades>index.html”
Como inserir imagens nas pág. internas?
<tr>
<td><img src="../imagens/gaia_logo.gif"
width="750" height="55“ /></td>
</tr>
Como inserir imagens nas pág. internas?
<tr>
<td> <img src="../imagens/espaco2.gif"
width="259" height="47" />
Botões simples
<a href=“../roteiros/index.html">
<img src="../imagens/roteiros.gif" width="115"
height="47" border="0“ /></a>
Botões simples
<a href="../modalidades/index.html">
<img src="../imagens/modalidades.gif"
width="114" height="47" border="0"/></a>
Botões simples
<a href=“../pacotes/index.html">
<img src="../imagens/pacotes.gif" width="114"
height="47" border="0"/></a>
Botões simples
<a href="../contato/index.html">
<img src="../imagens/contato.gif" width="114"
height="47" border="0"/></a>
<img src="../imagens/lat1.gif" width="34" height="47“ />
</td>
</tr>
E o submenu?
<tr>
<td> <img src="../imagens/espaco2.gif"
width="259" height="47" />
E o submenu?
<a href="canyoning.html">
<img src="../imagens/canyoning.gif"
width="115" height="46" border="0"/></a>
E o submenu?
<a href=“moutain.html">
<img src="../imagens/moutain.gif"
width="114" height="46" border="0"/></a>
6ª. E agora?
• Agora, repita o processo para as
outras imagens e faça o mesmo
para as outras páginas do site.
Obrigada pela atenção!
Quando terminar, faça upload e
mande e-mail avisando.