Links e Imagens Ana Cuper ana@instructor.com.br
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 roteiros imagens mountain.html rapel.html trekking.html canyoning.html 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 roteiros imagens mountain.html rapel.html trekking.html canyoning.html 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 index.html institucional modalidades pacotes roteiros imagens mountain.html rapel.html trekking.html canyoning.html 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 >
Caminho das imagens index.html institucional modalidades pacotes roteiros imagens mountain.html rapel.html modalidades.gif trekking.html canyoning.html 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:ana@instructor.com.br > 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:ana@instructor.com.br > ana@instructor.com.br </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.