Links e Imagens. Ana Cuper ana@instructor.com.br

Tamanho: px

Começar a partir da página:

Download "Links e Imagens. Ana Cuper ana@instructor.com.br"

Ricardo Silva Almada
8 Há anos
Visualizações:

1 Links e Imagens Ana Cuper ana@instructor.com.br

2 Links Existem duas maneiras de referenciar um documento: relativo ou absoluto. Caminho absoluto- começa de um ponto fixo : <a href=" Site Gaia </a> Caminho relativo- definido em relação ao seu diretório corrente <a href="roteiros/index.htm">roteiros</a>

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

html trekking.html canyoning.html imagens A página index.html está na raiz do site.

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

html rapel.html trekking.html canyoning.

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

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

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

html modalidades.gif trekking.html canyoning.

8 Links para s: <a href= > </a>

9 Botões simples Links usando imagens: <a href="roteiros.html"> <img src= roteiros.gif /> </a>

10 Links internos: dentro de uma mesma página: <a name=topo> Título da página </a> texto texto texto <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 "#"

parâmetro NAME serve para marcar um ponto para possíveis desvios.

11 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

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

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

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

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

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

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

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

19 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

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

gif" width="114" height="47" border= 0 /></a> <a href= pacotes/index.html ><img src="imagens/pacotes.

21 4º Inserir uma imagem na coluna Na coluna lateral, onde você inseriu os dados da agência, insira uma figura antes do texto. <img src= roteiros/imagens/thumb_ brotas3.jpg width="122" height= 82" />

22 5º Inserir o de contato Aonde aparece o do GAIA insira o seu para contato. Siga o exemplo: <a href= mailto:ana@instructor.com.br > ana@instructor.com.br </a>

23 6ª. Links nas laterais Nas colunas laterais, aproveite as informações para fazer links para outras páginas.

24 Como inserir imagens nas pág. internas? Abra a página inicial de modalidades, que está em modalidades>index.html

25 Como inserir imagens nas pág. internas? <tr> <td><img src="../imagens/gaia_logo.gif" width="750" height="55 /></td> </tr>

26 Como inserir imagens nas pág. internas? <tr> <td> <img src="../imagens/espaco2.gif" width="259" height="47" />

27 Botões simples <a href=../roteiros/index.html"> <img src="../imagens/roteiros.gif" width="115" height="47" border="0 /></a>

28 Botões simples <a href="../modalidades/index.html"> <img src="../imagens/modalidades.gif" width="114" height="47" border="0"/></a>

29 Botões simples <a href=../pacotes/index.html"> <img src="../imagens/pacotes.gif" width="114" height="47" border="0"/></a>

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

31 E o submenu? <tr> <td> <img src="../imagens/espaco2.gif" width="259" height="47" />

32 E o submenu? <a href="canyoning.html"> <img src="../imagens/canyoning.gif" width="115" height="46" border="0"/></a>

33 E o submenu? <a href= moutain.html"> <img src="../imagens/moutain.gif" width="114" height="46" border="0"/></a>

34 6ª. E agora? Agora, repita o processo para as outras imagens e faça o mesmo para as outras páginas do site.

35 Obrigada pela atenção! Quando terminar, faça upload e mande avisando.

Documentos relacionados

Síntese da aula anterior

Síntese da aula anterior Na última aula, aprendemos a utilizar em html: Tabelas Hiperligações 1 O que vamos fazer hoje? Vamos utilizar o que aprendemos da aula anterior juntamente com Utilização de imagens