Salve no mesmo diretório do seu arquivo de seus arquivos de trabalho, usando o botão direito do mouse, chame-a de
back1.gif.
Estender a versatilidade dos documentos WWW usando figuras como hiperlinks.
| Inserir um botão gráfico que liga com outro documento HTML | |
| Usar uma pequena imagem para agir como "selo" para apresentar uma cópia maior da mesma imagem |
Nas lições anteriores, você aprendeu a criar hipertextos. Você pode também fazer imagens "inline" agir da maneira "hiper". Se você relembra, em uma lição passada nós ligamos algum texto em nossa página Joinville I com um outro documento trural.html, que fala do Turismo Rural em Joinville. Agora, nesta segunda página, iremos incluir um botão que, quando clicado, levará o leitor de volta para a página Joinville I.
O modo de fazer isso é colocar os rótulos HTML para imagens embutidas entre o início da definição de uma âncora e o terminador.
<a href="arquivoX.html"> <img src="grafico.gif"> Vá para documento X</a>
Em uma página WWW, este código mostrará uma imagem e o texto Vá para o
documento X, e ambos são hiperlinks; clicando sobre o texto ou sobre a
imagem, o efeito será exatamente o mesmo. Note que uma imagem sozinha pode ser um
hiperlink. Em WWW, uma imagem que é um link é circundada por uma caixa azul (assim como
os textos que são links), para mostrar que é uma imagem "ativa". Veja como é:
<a href="arquivoX.html"> <img src="grafico.gif" border=n> Vá para documento X</a>
Sendo "n" um número equivalente à espessura em número de pixels da borda da imagem-link. Se não for usado o termo "border" a imagem será circundada por uma fina linha azul. Mas podemos aumentar a espessura, fazendo n maior que 1; ou então retirar a linha, fazendo n=0 ou escrevendo apenas border, sem lhe atribuir valor para "n".
Agora vamos criar um botão. Primeiro, você precisa pegar uma cópia desta imagem que
indica retorno ("back") .
Salve no mesmo diretório do seu arquivo de seus arquivos de trabalho, usando o botão
direito do mouse, chame-a de back1.gif.
A seguir, acrescente o código HTML para fazer o botão aparecer e funcionar.
trural.html no editor <hr> <a href="jv1.html"> <img src="back1.gif" border> Voltar para a página <i>Joinville I</i></a>
Obs: O rótulo da imagem inline (<img...>) está completamente dentro da âncora entre o > que marca o fim do URL e o </a> que marca terminador do hipertexto. Também note como o rótulo <i> é usado dentro de um hipertexto ativo para enfatizar o título da lição.
trural.html Joinville I.
Já foi comentado sobre o problema de usar grandes imagens "inline" em suas páginas WWW porque os leitores da página podem ter que esperar muito tempo para que as imagens sejam apresentadas no browser. Uma forma de tratar isto é criar cópias miniaturas das imagens originais (o que chamaremos de "selos") e usá-las nas páginas como imagens embutidas. Então, usando o mesmo passo dado acima, você pode fazer com que o "selo" aja como um hiperlink que aponta para a imagem no tamanho real. Desta forma, grandes imagens somente são transmitidas se o leitor decidir vê-las.
A maneira de fazer isso é simples. No arquivo jv1.html, no cabeçalho Atrações Turísticas, substitua a primeira linha:
<h2><img src="mir.gif"><A NAME="atracoes"> Atrações Turísticas</A></h2>
por esta outra, já com o link de selo:
<h2><A HREF="mir2.gif"><img src="mir.gif"></A><A NAME="atracoes"> Atrações Turísticas</A></h2>
Agora a imagem mir.gif é um selo que leva a outra imagem mir2.gif
do Mirante. Ela é um link e aparecerá sublinhada de azul. Se você quiser retirar
essa borda basta lembrar de inserir a palavrinha mágica border após o
nome do arquivo a ser linkado.
Salve e Recarregue no seu browser.
Tente acrescentar um botão que faça a ligação entre 2 documentos WWW um para o outro e vice-versa.
Usando o rótulo de preformatação para criar uma tabela de texto.