|
|
|
IMAGENS E LIGAÇÕES
Esta é a melhor parte! São as ligações de hipermídia que permitem que você navegue pelo mundo colorido do WWW sem se preocupar com endereços, nomes de arquivo, formatos, etc. Imagens podem ser referenciadas por hipertexto, mas também podem ser incluídas na página, tornando-a mais atraente e até mais compreensível. Esta parte abrange os seguintes tópicos: Âncoras Remotas Nesta seção, adicionaremos ligações de hipertexto (links) à nossa home page. O texto (ou imagem) que aciona o link e o objeto-alvo do mesmo são chamados de âncoras. Uma âncora é um dos dois lados de um hyperlink (ligação de hipermídia), que consiste de uma âncora-fonte que aponta para o endereço de uma âncora-destino. O destino pode ser qualquer formato de mídia eletrônica (um arquivo HTML, um arquivo de texto, uma imagem, um arquivo de vídeo, etc.) O elemento Vamos colocar links para o índice Yahoo e o mecanismo de busca WebCrawler no primeiro parágrafo da nossa homepage: ... sugiro que procure no índice do <a href=http://www.yahoo.com> <B>Yahoo</B></a> ou faça uma busca no <a href=http://www.webcrawler.com><B>WebCrawler</B></a>. As localidades acima foram referenciadas através de uma URL absoluta. Podemos também usar URLs relativas. Por exemplo, vamos criar uma ligação para o Home Page deste tutorial, no final da página: <hr> <a href="index.html">Volta para Tutorial.</a> <hr> Podemos também utilizar outros tipos de URLs como ftp, gopher, etc. Na nossa página-exemplo, criaremos um link de correio eletrônico (URL tipo mailto) para um endereço fictício. Se o link for acionado, deverá aparecer uma janela para envio de correio eletrônico: Para mais informações entre em contato com <a href="mailto:dino@raptor.ingen.com>dino@raptor.ingen.com</a>. (endereço fictício)<br>
[Volta para o início desta página] Âncoras Locais É possível tambem usar âncoras para navegar dentro de
um documento local ou remoto. <hr> <h2><a name="periodos"></a>Períodos da Era Mesozóica</h2> (...) <hr> <h2><a name="lista"></a>Lista de Dinossauros</h2> (...) <hr> <h2><a name="fontes"></a>Outras Fontes de Informação</h2> e as chamaremos pelo sumário: <li><a href="#periodos">Períodos da Era Mesozóica</a> <li><a href="#lista">Lista de Dinossauros</a> <li><a href="#fontes">Outras fontes de informação</a> </ul> Se quiséssemos referenciar as âncoras acima a partir de
outro documento, teriamos apenas que complementá-la com o trecho <a href="../referencias.html#HTML">Guias sobre HTML</a> acessa o documento Âncoras não precisam ser somente páginas HTML.
Podem também ser arquivos de imagem, vídeo, arquivos executáveis ou qualquer outra
mídia eletrônica. No exemplo abaixo, incluímos uma âncora para uma imagem GIF ( <p>Se você realmente procura alguma coisa um pouco mais séria sobre
dinossauros, confira o <a href="http://ucmp1.berkeley.edu/expo/dinoexpo.html">
Dinosaur Hall</a>. Se procura imagens e informações sobre o
filme <a href="jplogo.gif">Parque dos Dinossauros</a>, veja
<a href="http://www.efn.org/~billy/">Billy´s Place of Info and
Pictures</a>. Finalmente, se você quer entrar para o clube da
Sabedoria dos Dinossauros e escolher seu dinossauro preferido,
vá para a <a href="http://www.sirius.com/~chaosium/saurin/saurin.html">
Saurintology Page</a>.
[Volta para o início desta página] Imagens Internas No exemplo anterior, vimos que é possível criar âncoras
para referenciar textos e imagens. Neste exemplo, utilizaremos o elemento Os formatos de arquivo de imagem aceitos por todos os
browsers são Começaremos colocando no início da nossa página, uma
imagem (de um dinossauro, é claro!). Temos um arquivo de imagem formato GIF, no mesmo
diretório que o arquivo HTML da nossa homepage, chamado " <center><img src="velociraptor.gif"><br> <h1>Dinosaurs´ Web</h1></center> <hr>
Observe também, no exemplo acima, que utilizamos o
elemento Se a imagem não está no mesmo diretório que a página, temos que informar o caminho (URL relativa) para que possa ser encontrada. Por exemplo: <img src="stego.gif"> informa que a imagem <img src="http://www.dsc.ufpb.brdscicon.gif"> No nosso exemplo, incluiremos um ícone (imagem GIF) dentro da ligação que criamos para retornar ao Sumário. Este ícone então será uma imagem ativa, ou seja, passa a ser um link também. Se voce clicar nela, ela faz alguma coisa. <hr> <a href="index.html"><img src="left.gif"> Volta para Tutorial.</a> <hr> Antes que vejamos o resultado do parágrafo anterior, vamos
adicionar alguns parágrafos com imagens. Além do atributo <h3>Imagens de Dinossauros</h3> <p>Este é um <b>Estegosauro</b>: <img src="stego.gif>, animal do grupo <i>Ornitischia</i> do final do período Jurássico. A figura do estegossauro foi incluída neste parágrafo sem alinhamento vertical. <p>O <b>Triceratops</b> <img src="tricera.gif" align=middle>, dinossauro do grupo <i>Ornitischia</i> que viveu na America do Norte no final do período Cretáceo, foi incluído neste parágrafo com alinhamento pelo meio da linha. O <b>Apatossauro</b> (ou brontossauro) <img src="bronto.gif" align=top> é um dinossauro do grupo <i>Saurischia</i>, que viveu no período Jurássico. Neste parágrafo ele foi alinhado com a parte de cima da linha. <p>Finalmente, esta barata (Arghh!) <a href="barata.gif"> <img src="baratinha.gif" align=middle></a> também foi alinhada pelo meio (não sei se a barata é dinossauro, mas não resisti em colocá-la aqui). Se você clicar sobre a barata, receberá uma barata maior!
Com o que foi visto até agora, você já será capaz de criar sua homepage. Se quiser incrementá-la com papel de parede, ícones e outros recursos, siga para a próxima seção! [Volta para o início desta página] [Voltar para o Sumário] |
|
(Clique aqui) para adicionar esta página ao seu FAVORITOS Faça do meu site sua página inicial Copyright © 2000 Norio® Home Page are trademarks of Norio® Home Page. Todos os direitos reservados. Envie um E-Mail para: Anselmo_Norio@hotmail.com, se necessitar alguma ajuda, dúvida ou comentário sobre este Web Site. No ar desde 01/08/2000. Ultima Modificação: quarta-feira, 27 de março de 2002. |
Veja
o resultado