Imagens com Links

Propaganda
Inserindo links em Imagens
TECNOLOGIA WEB - INSERINDO LINKS EM IMAGENS
DIGITE O CÓDIGO ABAIXO no bloco de notas, Notepad++ ou no amaya:
OBS. 01:
Em vermelho temos os comentários do código e em preto o código XHTML.
OBS. 02:
Todo código "XHTML" deverá ser escrito em caixa baixa (letra minúscula).
<!-- Versão Padrão - Campo necessário -->
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Versão do código "XHTML" que será usado. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Cabeçalho do cógido HTML ou XHTML. -->
<head>
<title>Imagens com Links</title>
</head>
<!-- O comando - STYLE="BACKGROUND-COLOR:CÓDIGO DA CÔR" - muda a côr de fundo no "XHTML".
Para a versão somente "HTML" seria o comando => bgcolor="código da côr". -->
<body style="background-color:#99ccff">
<h2><b>Links para WEB são caminhos mais curtos ou endereços de Web Páginas</b></h2>
<p><b>Abaixo temos uma lista de alguns itens que serão configurados em sala.</b></p>
<b><i>Clique nas imagens abaixo com o mouse para visitar os endereços:</i></b>
<!-- Criando cinco (5) hyperlinks de imagens para WEB. -->
<!-- As imagens deverão estar no mesmo diretório da página XHTML. -->
<!-- Imagens para este código estão no site do professor seus nomes são:
- E-mail;
- Estácio;
- Google;
- Prof.;
- Yahoo. -->
<!-- Entre no site do professor e baixe as imagens para mesma pasta onde será salvo o
arquivo "XHTML". -->
<h4>
<a href="http://www.google.com.br">
<img src="google.gif" alt="Visitar Site" width="96" height="35" />
</a>
</h4>
<h4>
<a href="http://www.profcelso.orgfree.com">
file:///E|/...S_ESTUDOS/AulasOnLine/2012-2/Arquivos_Aulas/01-Tecnologia_Web/AULAS/Codigos_exercicios/04_Imagens_com_links.html[18/09/2012 13:16:49]
Inserindo links em Imagens
<img src="Prof.gif" alt="Site do Professor" width="53" height="60" />
</a>
</h4>
<h4>
<a href="http://www.uniradial.edu.br/processoseletivo/default.asp">
<img src="Estacio.gif" alt="Universidade Estácio de Sá" width="150"
height="46" />
</a>
</h4>
<h4>
<a href="http://www.oracle.com/br/index.htm">
<img src="oracle.gif" alt="Oracle Brasil" width="150" height="23" />
</a>
</h4>
<h4>
<a href="http://www.yahoo.com.br">
<img src="yahoo.gif" alt="Yahoo!" width="150" height="30" />
</a>
</h4>
<!-- Vinculando um endereço de e-mail (@) em um site através de uma imagem. -->
<h2><b>CONTATOS</b></h2>
<p>Clique na imagem abaixo para enviar um e-mail para o <b><u>Professor Celso:</u></b></p>
<p>
<a href="mailto:[email protected]">
<img src="e-mail.gif" alt="Contato Prof. Celso" width="40" height="38" /></a>
</p>
</body>
</html>
FIM DO CÓDIGO
Tecnologia Web
Imprimir
PROFESSOR CELSO
file:///E|/...S_ESTUDOS/AulasOnLine/2012-2/Arquivos_Aulas/01-Tecnologia_Web/AULAS/Codigos_exercicios/04_Imagens_com_links.html[18/09/2012 13:16:49]
Download