HyperText Markup Language... O termo hypertext é definido por texto que tem link para outros textos. Os termos markup language definem anotações para a estrutura de um texto. Sendo assim o que caracteriza a estrutura HTML é a sua propriedade de se ligar indefinidamente a outros documentos. E esta propriedade, devido a sua grande importância, deu origem ao acrônimo HTML.

Mas o que vem a ser um link? O link é um canal, uma porta de conexão com outra página. Na barra de comandos no topo desta página, por exemplo, existe uma série de links que possibilita a interação desta com outras páginas desse site ou de outros sites espalhados pela Rede. Os links podem ser:

relativos, absolutos, internos e externos

 

LINKS RELATIVO & ABSOLUTO

Link é um termo inglês que quer dizer Ligação. Como o nome mesmo já diz, a função do link é ligar dois documentos. O link pode ser Relativo ou Absoluto. O link relativo não especifica o caminho completo do endereço do arquivo, já o link absoluto sim. Por exemplo aqui está o link relativo que direciona para o arquivo de historia.htm, que está nesse mesmo diretório, nesse mesmo servidor:

<A HREF="historia.htm">História</A>

História

Porém o seu endereço absoluto seria:

<A HREF="http://orbita.starmedia.com/~edaurelio/historia.htm">História</A>

História

Bem mais complexo!

Mas como o arquivo historia.htm, onde quero chegar, está no mesmo diretório do mesmo servidor então não preciso de todo esse trabalho de digitação, apenas o nome do arquivo já basta. Já o link absoluto é usado para localizar arquivo que está num servidor diferente, por isso seu endereço tem que estar completo.

O link também é chamado de Hiperlink

 

LINKS INTERNO & EXTERNO

O Link Interno é aquele que liga dois pontos em uma mesma homepage. Acima expliquei que o link relativo não possuía o endereço completo por estar apontando um endereço no mesmo diretório, pois bem, todos os links relativos são links internos.

O Link Externo é aquele que cria uma ligação entre homepages diferentes e, por isso, é um link absoluto (tem que possuir o endereço completo). Todos os links externos são absolutos porém nem todos os links absolutos são externos. O exemplo de um link absoluto (acima) é um link interno.

 

<A atributos> ... </A>

O que é uma Âncora?

Uma âncora é um ponto de referência que marca o destino de um link interno. Eles são práticos quando uma homepage possui muita informação. As âncoras criam pontos de ligação entre todos os tópicos abordados, organizando sua estrutura e com isso otimizando sua navegação. Um exemplo prático é a seção Guia de Referências que possui um índice remissivo ligado aos seus respectivos temas localizados em outros partes desta HP.

Para definir um link, utilizaremos o par de tags <A> </A>, cujo "A" vem de "Anchor" ("âncora" em inglês). Vamos supor que dentro desta página eu queira criar um link para uma palavra que se encontra lá no final (desta página). Então, nesta palavra, eu teria que colocar uma marcação, a âncora, para que o link a encontrasse. Portanto um link possui dois comandos distintos: <A HREF="...">, comando de partida e <A NAME="#..."> comando de chegada que possibilitam:

• Saltos para pontos diferentes em uma mesma página ou
• Saltos para pontos de uma página diferente no mesmo diretório.

Em atributos vou explicar com alguns exemplos como eles funcionam.

ATRIBUTOS:

href="..."
De Hypertext REFerence ou referência de hipertexto. Informa a URL, que pode ser um documento HTML, uma imagem ou outro tipo de recurso. Como exemplo vou criar um link para outro site de HTML:

<A HREF="http://www.icmsc.sc.usp.br/manuals/HTML/index.html">Tutorial HTML ICMC-USP</A>

O resultado é: Tutorial HTML ICMC-USP

 

name="..."
Este atributo estabelece o ponto de chegada nos saltos interligados do link. Por exemplo: Vou criar uma ligação (o link) entre este ponto da página e um outro lá embaixo no final. A palavra de ancora chamei de imgreduzidas e ela fica uma linha antes da seção "CRIANDO UM DIRETÓRIO DE IMAGENS REDUZIDAS") . O símbolo # avisa o browser para procurar o link no documento atual. A sintaxe é:

<A HREF="#imgreduzidas">Diretório de Imagens</A>

E a âncora de chegada é (que está fixado no ponto de destino):

<A NAME="imgreduzidas"></A>

Agora dê uma clicada em Diretório de Imagens para ver o salto. O salto foi para aquele ponto específico porque coloquei uma âncora lá.

 

target="_blank", "nome" ou "_top"
Especifica uma janela ou quadro que receberão a página ou recurso referenciado.

Se target="_blank", a página será aberta em uma nova janela do browser.

<a href="a11.htm" target="_blank">Tabela de Caracteres Especiais</a>

Tabela de Caracteres Especiais

Se target="nome" a página será aberta dentro de um frame que possua o tal nome.
Vide um bom exemplo em Montando estruturas com frames onde nomeei um target como "ladodireito"

Se target="_top", a página será aberta sobre a mesma janela do browser, ignorando qualquer organização de frames.

<a href="a11.htm" target="_top">Tabela de Caracteres Especiais</a>

Tabela de Caracteres Especiais

 

title="descrição"
Apresenta um quadro com a descrição do link quando o mouse é posicionado sobre ele.

<a href="a11.htm" title="Cascading Style Sheets">CSS</a>

CSS

Outro exemplo de TITLE está em Botões com imagens.

 

LINKS SEM SUBLINHADO, AUTOMÁTICO, PISCANTE, OCULTO e ETC

LINK SEM SUBLINHADO
Este é o link tradicional, que você já conhece: Ferramenta TodoBR

<A HREF="http://www.todobr.com.br">Ferramenta TodoBR</A>

Ele, geralmente, se apresenta na cor azul e possui um sublinhado. Você pode omitir esse sublinhado inserindo o seguinte parâmetro STYLE="text-decoration:none". Então ele ficará assim: Ferramenta TodoBR

<A HREF="http://www.todobr.com.br" STYLE="text-decoration:none">Ferramenta TodoBR</A>

No exemplo acima eu estou tirando o sublinhado de um link específico, "Ferramentas TodoBR", para fazer o mesmo com todos os links da página basta inserir estes parâmetros em qualquer lugar da página entre <BODY...> e </BODY>

<style type="text/css">
A:link {text-decoration:none}
A:visited {text-decoration:none}
A:active {text-decoration:none}
</style>

 

LINK QUE MUDA O CURSOR
Quando você sobrepõe um link com o cursor ele muda a seta para uma mãozinha com o dedo indicador apontado, esta é a condição default. Porém você pode escolher qual figura deve aparecer em determinado link. Nos exemplos abaixo eu configurei o primeiro com o cursor HELP (que apresenta uma seta com a interrogação) e o segundo com o cursor de espera (com a ampulheta). Para descobrir os demais códigos dos cursores vá até [Alterando o formato do cursor]

<A HREF="http://www.todobr.com.br" style="cursor:help">Ferramenta TodoBR</A>

Ferramenta TodoBR

<A HREF="http://www.todobr.com.br" style="cursor:wait">Ferramenta TodoBR</A>

Ferramenta TodoBR

 

LINK AUTOMÁTICO
O link automático consiste naquele que abre espontaneamente quando o mouse passa sobre ele, sem que seja necessário o internauta dar o clique. Sua sintaxe é simples:

<A HREF="marcha.htm" onmouseover="parent.location='marcha.htm'">Marcha</A>

Agora passe o mouse sobre Marcha

 

LINK PISCANTE
Trata-se do link que fica alternando a cor da letra ou de fundo chamando mais a atenção do internauta. Exemplo: Yahoo! BRASIL

Para criar esse tipo de link em sua HP existem duas etapas:
PRIMEIRO - Copie e cole o script abaixo antes da tag </BODY> de sua página.

<script>
// Flashing Link © Dynamic Drive (www.dynamicdrive.com)
if (document.all&&document.all.flashlink){
var flashlinks=document.all.flashlink
if (flashlinks.length==null)
flashlinks[0]=document.all.flashlink
function changecolor(which,type,color){
if (type==0){
if (flashlinks[which].style.color!=color)
flashlinks[which].style.color=color
else
flashlinks[which].style.color=''
}
else if (type==1){
if (flashlinks[which].style.backgroundColor!=color)
flashlinks[which].style.backgroundColor=color
else
flashlinks[which].style.backgroundColor=''
}
}
if (flashlinks.length==null){
var flashengine='setInterval("changecolor(0,'+flashlinks[0].flashtype+',\''+flashlinks[0].flashcolor+'\')",'+'1000)'
eval(flashengine)
}
else
for (i=0;i var flashengine='setInterval("changecolor('+i+','+flashlinks[i].flashtype+',\''+flashlinks[i].flashcolor+'\')",'+'1000)'
eval(flashengine)
}
}
</script>

SEGUNDO - Configure o link onde o efeito deve acontecer com os seguintes parâmetros: id="lashlink" - para criar o efeito intermitente; flashtype=0 | 1, sendo que 0 (zero) para a letra que pisca ou 1 para o fundo que pisca e finalmente flashcolor="cor", para definir a cor do texto ou do fundo que irá piscar. Abaixo segue dois exemplos com as suas respectivas sintaxe configuradas.

<a href="index.htm" id="flashlink" flashtype=0 flashcolor="#b0c4de"><b>HOME</b></a>

HOME

<a href="http://www.soswebmaster.com.br/" id="flashlink" flashtype=1 flashcolor="#ffff00">
<b>SOS WebMaster</b></a>

SOS WebMaster

 

LINK OCULTO
Qual a utilidade de criar um link que ninguém possa ver?

Bom, isso vai da sua imaginação. Você pode criar situações interessantes com esse recurso. Imagine alguns links ocultos e automáticos numa homepage de estórias ilustrada que entram inesperadamente com um fundo musical. O internauta, ao mover o mouse sobre sua página entrará numa seção oculta, sem que ele entenda o que está acontecendo. A sintaxe do link oculto (e automático) é a seguinte:

<A HREF="a8espelho.htm" onmouseover="parent.location='a8espelho.htm'"
style="text-decoration:none">&nbsp;&nbsp;&nbsp;&nbsp;</A>

Onde &nbsp; (no-break space) cria um espaço em branco que será a área de atuação do link. Para aumentar essa área basta aumentar a quantidade de espaços. No exemplo acima coloquei 4 espaços. Agora movimente o mouse aqui adiante dessa linha...     

CUIDADO: A situação pode perder o controle se você carregar sua HP com links ocultos. O internauta pensará que o browser dele está com problemas, ou que sua HP possua links parasitas que ficam abrindo constantemente sem que ele tenha solicitado, então ele irá se cansar entre os irritantes vai-e-vem's e abandonar sua página.

 

LINK COM MENSAGEM

Através da função onclick="alert('...')" podemos inserir uma mensagem no link. Essa mensagem aparecerá entre o clique no link e a mudança da tela. Esse recurso é útil para mensagens de aviso em geral, etc.

<A HREF="ab.htm" onclick="alert('Tutorial HTML Edaurelio')">Glossário WEB</A>

Glossário WEB

 

ENVIANDO E-MAIL VIA HTML

Podemos acionar o programa de E-mail diretamente de uma página HTML usando uma variação do comando <A>, que usa a opção mailto no lugar da URL. O comando completo é:

<a href="mailto:edaurelio@hotmail.com">Pergunte ao autor</a>

Pergunte ao autor

O mesmo comando é usado para anexar uma imagem ao acionador do E-mail. Basta trocar a frase "pergunte ao autor" pela sintaxe <img src="mail.gif"> (mail.gif é o nome do arquivo desse pombinho que está voando aí em baixo). O atributo border="0" elimina a borda e deixa um acabamento mais apresentável em figuras com movimento. Exemplo:

Sintaxe: <A HREF="mailto:edaurelio@hotmail.com"> <IMG SRC="imagens/mail.gif" border="0"></a>

Você pode enviar E-mail para múltiplos destinatários simplesmente colocando os endereços E-mail separados por vírgulas. Exemplo:

<a href="mailto:fulano@ig.com.br, siclano@hotmail.com, beltrano@aol.com.br">

 

CRIANDO LINKS PARA DOWNLOAD

Vamos supor que agora sua homepage já está pronta e você queira colocar uma relação de arquivos a disposição do usuário para download. Mas... como fazê-lo, qual tag devo utilizar e onde coloca-los?

Primeiro, por uma questão de organização, crie uma pasta chamada download no servidor onde sua homepage está hospedada, ela será o local onde você irá colocar seus arquivos para download, logicamente. Depois basta utilize a tag <a href> que é a mesma tag utilizada para criar os links e direcione os arquivos indicando sua URL. Como exemplo coloquei o aplicativo icondraw.exe para download. Então sua sintaxe é a seguinte:

<a href="download/icondraw.exe">[Icondraw download aqui]</a>

[Icondraw download aqui]

Embora, neste exemplo, o aplicativo não esteja zipado, o browser irá apenas copiá-lo para o local que o usuário determinar. Porém caso o usuário tenha um plug-in instalado em seu HD compatível o arquivo que ele está copiando, como por exemplo arquivos de vídeo, então o arquivo será executado. Se esta não for a intenção do webmaster então é aconselhável zipar os arquivos. Os arquivos zipados, por serem menores, também são copiados mais rápido.

 

LINKS PARA ABRIR ARQUIVOS DO EXCEL OU WORD

Imagine a seguinte situação: Você tenha uma relação de arquivos criados nos softwares Excel (*.xls) ou Word (*.doc) e quer coloca-los a disposição do público sem ter o trabalho de converte-los em arquivos HTML e depois coloca-los online ou ter que enviá-los via e-mail para centenas, ou quem sabe milhares, de usuários.

Nessa situação a alternativa mais simples seria copiar os arquivos como estão para o diretório onde o seu site está hospedado e depois criar links direcionados para eles. Então quando o usuário clicar no link do seu interesse o sistema irá fazer o download do arquivo correspondente (Excel ou Word) e depois abri-lo logo em seguida. Para isso basta direcionar o link para o arquivo.xls (ou .doc) exatamente como faria para direcionar uma URL. A sintaxe é esta:

<A HREF="historico.xls" target="window">Historico de Atualização de Arquivos</A>

Historico de Atualização de Arquivos

<A HREF="historiawww.doc" target="window">História da World Wide Web</A>

História da World Wide Web

Logicamente, para que tudo funcione direitinho o usuário terá que possuir o sistema operacional Windows com o Office instalado (ou algum outro software compatível), senão o sistema irá fazer apenas o download do arquivo sem abri-lo.

 

SEU SITE NA PÁGINA DE ABERTURA

Quando acionamos o browser para entrar na Rede algumas vezes notamos que ele abre um site qualquer sem que tenhamos especificado sua URL. Isso acontece porque a URL deste site está configurada, no browser, para entrar sempre que conectamos. A sintaxe a seguir cria esta opção do internauta habilitar sua homepage no browser dele. Ela pode ser inserida em qualquer lugar do seu código-fonte. O exemplo a seguir habilita minha homepage como página de abertura em seu browser. Observe que a URL é absoluta.

<CENTER>
<A HREF="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage
('http://orbita.starmedia.com/~edaurelio/index.htm');">
Gostaria de colocar este site como sua página de abertura?
</A>
</CENTER>

Gostaria de colocar este site como sua página de abertura?

NOTA: Para desabilitar essa função (no Internet Explorer) basta entrar em [Tools], depois em [Internet Options...] e em Homepage clique em [Use Blank].

 

<IMG atributos>

Insere uma imagem no documento.

Utilizado dentro de: elementos de formatação de caracteres, listas, tabelas, formulários, <A>

Atributos:

SRC="..."
A URL da imagem é o único atributo obrigatório. Não existe a terminação </IMG>.

OBS: A posição do comando IMG antecede o texto em todos os exemplos abaixo.

 

ALIGN="top | middle | bottom | left | right"
Alinha a imagem em relação ao texto pelo topo, meio, base (default), esquerda e direita, respectivamente. Exemplos:

<IMG SRC="imagens/leaf6.jpg" ALIGN="top"> Alinha a parte...

Alinha a parte de cima da imagem com a parte mais alta da linha. O texto, ao saltar para a linha seguinte, ocupa a linha imediata após o término da figura, causando uma falha de seqüência conforme mostra esse exemplo.

 

<img src="imagens/leaf6.jpg" ALIGN="middle"> Alinha a base...

Alinha a base do texto com a linha média da imagem. Quando o texto troca de linha, este salta para a parte inferior da figura causando uma falha de continuidade aparente, conforme apresentada nesse exemplo.

 

<img src="imagens/fnt14001.jpg" ALIGN="bottom">linha a parte...

linha a parte de baixo da imagem com a base do texto. Neste exemplo colocamos uma figura da letra capitular "A" no início da frase para destacar o texto do parágrafo.

 

<img src="imagens/acdsee.jpeg" ALIGN="left">Este parâmetro...

Este parâmetro posiciona a imagem no canto esquerdo jogando todo o texto para a direita. Após o término da imagem o texto volta a ocupar a largura normal da página envolvendo a área inferior da imagem conforme é apresenta neste exemplo. Esta opção não causa falha de continuidade do texto.

 

<img src="imagens/acdsee.jpeg" ALIGN="right">Alinha a imagem...

Alinha a imagem à direita forçando o texto a ocupar todo o lado livre a esquerda. O alinhamento do texto segue uma simetria sem quebras ou falhas aparentes. Assim como no exemplo acima, após o término da imagem, o texto volta a ocupar a largura normal da página envolvendo a área inferior da imagem.

 

Não existe um atributo em IMG que centraliza a imagem envolvendo-a com textos a sua esquerda e direita. Para isso temos que recorrer a tabela. Exemplo:

Sintaxe:

<TABLE> <TR> <TD WIDTH="250" STYLE="text-align:justify">Texto lado esquerdo...</TD> <TD WIDTH="150"><img src="imagens/sol3.gif"></TD> <TD WIDTH="250" STYLE="text-align:justify">Texto lado direito...</TD> </TR> </TABLE>

Nosso Sol é uma estrela de média grandeza, ocupando a posição central do nosso sistema planetário. A luz desse astro leva oito minutos para atingir a Terra. Como tal, encontra-se formando Hélio pela queima de Hidrogênio há cerca de 4,6 bilhões de anos.

A massa do sistema (99,8%) concentra-se no Sol, com os planetas girando ao seu redor, em órbitas elípticas de pequena excentricidade. O movimento de todos estes corpos concentra praticamente todo o momento angular do sistema.

ismap
Indica que a figura é uma imagem mapeada (imagemap) controlada pelo servidor (o mapa é estabelecido por arquivo separado, no servidor).

 

usemap="#nome_do_mapa"
Indica que a figura é uma imagem mapeada (imagemap) controlada pelo cliente (o mapa é estabelecido pelo elemento <map>, na mesma página HTML). #nome_do_mapa informa o rótulo do mapa <map> usado pela imagem.

 

width="largura", height="altura"
Informa a largura e a altura da imagem, em pixels. Útil para acelerar a visualização (dispensa o browser de ter que calcular o tamanho da imagem. Com esses parâmetros, ele reserva espaço para a figura e mostra logo o texto.

NOTA: Para saber o tamanho exato da imagem, basta clicar sobre ela com o botão direito do mouse e selecionar propriedades, ali é apresentada as características do arquivo juntamente com o seu tamanho em pixels.

Ao colocar o sinal % após algum valor em "width", ele calculará esse valor (em porcentagem) em relação à largura da janela. Exemplos:

<img src="imagens/acdsee.jpeg" width="100%" height="80">

<img src="imagens/acdsee.jpeg" width="70%" height="150">

Para aprender mais sobre este assunto vá para propriedades width & height.

 

border="valor"
Permite criar e alterar o tamanho da borda ao redor da imagem, sendo que: BORDER="0" oculta a borda.
Exemplos:

<IMG SRC="imagens/brass.jpeg" BORDER="0">

<IMG SRC="imagens/brass.jpeg" BORDER="1">

<IMG SRC="imagens/brass.jpeg" BORDER="5">

 

vspace="y" hspace="x"
Cria um espaço entre a imagem e o texto que a envolve. Exemplo:

<IMG SRC="imagens/acdsee.jpeg" VSPACE="20" HSPACE="20" align="left">

Definem uma espaçamento invisível ao redor da imagem criando um tipo de moldura. Respectivamente, definem os espaços vertical e horizontal, em pixels. Observe a margem que envolve os quatros cantos da figura a esquerda, ela parece ter uma borda oculta.

 

alt="texto"
Este parâmetro apresenta o conteúdo do texto especificado quando o cursor é posicionado sobre a imagem. Este texto também é muito útil como referência para os browsers que não trabalham com imagens. Exemplo:

<img src="imagens/acdsee.jpeg" alt="ACDsee versão 2.3">

Posicione o cursor sobre a imagem à esquerda e deixe-o por alguns segundos.

Porém se o seu browser não for compatível a exibição de imagens ele apresentará algo semelhante a esta caixinha com o "X" e a etiqueta de informação sobre a suposta imagem.

E... este será o resultado caso não especifique nada em alt.

 

onmouseover, onmouseout="imagem"
Estes dois atributos faz com que, ao passar o cursor sobre um objeto, ele mude para um segundo objeto ou função pré programado. Por exemplo: Observe as duas imagens na tabela abaixo:

home1.gif

home2.gif

Sintaxe:

<center> <a href="index.htm" onmouseover="imagem.src='imagens/home2.gif'" onmouseout="imagem.src='imagens/home1.gif'"> <img src="imagens/home1.gif" name="imagem"></a> </center>

Onde:
href="index.htm"
Indica o nome da página que será aberta;

onmouseover="imagem.src='imagens/home2.gif
Determina o que irá ocorrer quando o cursor estiver sobre o objeto;

onmouseout="imagem.src='imagens/home1.gif
Determina o que irá ocorrer quando o cursor estiver fora da área do objeto e finalmente,

img src="imagens/home1.gif
Que é a figura original do link.

Agora mova o cursor sobre a imagem acima. Viu?... Ele muda para a outra imagem programada.

Outro exemplo de utilização desses parâmetros. Agora alterando o status da barra do Windows

Sintaxe:

<center> <a href="index.htm" onmouseover="window.status='Alterando a barra de status'; return true; " onmouseout="window.status=''; return true;"> <img src="imagens/home3.gif" name="imagem2"></a> </center>

Agora ao mover o cursor sobre a imagem, ela muda o status do Windows para a frase "Alterando a barra de status" (que fica no canto inferior esquerdo do seu monitor).

 

CRIANDO UM DIRETÓRIO DE IMAGENS REDUZIDAS

Uma das maiores tentação do programador HTML é enriquecer sua homepage com lindas imagens. Mas a Internet ainda é muito lenta (99% dos internautas ainda possuem conexões abaixo de 56Kb/s!!...) e o uso de imagens irá acarretar numa demora considerável no tempo de transferência se o seu site tiver alguns MBytes de imagens. Uma alternativa seria o Diretório de Imagens Reduzidas.

A idéia consiste numa série de imagens reduzidas com link para sua correspondente em tamanho natural. Bom... existem várias maneiras de se criar um diretório de imagens reduzidas e irei explicar uma delas da forma que sei.

Sintaxe:

<center> <table border> <tr> <td><a href="modelos/janela.htm"> <img src="imagens/janela2.jpg" width="120" height="82" alt="janela2"></a></td> <td><a href="modelos/pesadelo.htm"> <img src="imagens/pesadelo2.jpg" width="120" height="82" alt="pesadelo2"></a></td> <td><a href="modelos/smoke.htm"> <img src="imagens/smoke2.jpg" width="120" height="82" alt="smoke2"></a></td> </tr> <tr> <td><a href="modelos/lobos.htm"> <img src="imagens/lobos2.jpg" width="120" height="82" alt="lobos2"></a></td> <td><a href="modelos/master.htm"> <img src="imagens/master2.jpg" width="120" height="82" alt="master2"></a></td> <td><a href="modelos/dragoes.htm"> <img src="imagens/dragoes2.jpg" width="120" height="82" alt="dragoes2"></a></td> </tr> </table> </center>

Na sintaxe acima criei uma tabela com duas linhas, cada linha com 3 células, cada célula com um arquivo de imagem que é uma cópia reduzida do seu original em tamanho real que, por sua vez é aberto num arquivo HTML exclusivo. O que fiz foi ancorar cada arquivo de imagem reduzida com seu correspondente em tamanho natural. Os arquivos reduzidos poderiam ser até menores, mas como exemplo tá bom. Procure analisar a sintaxe que fica fácil entender o raciocínio.

Agora movimente o cursor sobre o diretório de imagens, abaixo, escolha uma e clique sobre ela.

 

IMAGEM DE BAIXA RESOLUÇÃO

lowsrc="arquivo"
Este atributo, do comando <IMG>, faz com o browser exiba uma imagem inicial, de baixa resolução, enquanto carrega a imagem definitiva. Logicamente para que a tática dê certo a imagem de baixa resolução deve ser bem menor que a definitiva.

<img src="arquivo1" lowsrc="arquivo2">

A imagem de baixa resolução coloque em "arquivo2".