Faça Sua Pesquisa.

segunda-feira, 20 de fevereiro de 2012

Html >> Imagens


A tag <img> é utilizada para adicionar imagens ao documento html. Ela não possui tag de fechamento. Exemplo:
<img src = "http://www.progamacaoweb.com.br/tutoriais/html/codigo/exercicio-4.jpg" height = "303" width ="498" alt="Imagem do exercício 4" border ="1" hspace="5" vspace="5" align="baseline" />
srs é o link da imagem podendo ser um caminho absoluto ou relativo. Mais informações em: Caminhos relativos e absolutos 
height é a altura da imagem
width é a largura da imagem
alt é um texto exibido quando a imagem não é carregada ou quando se fica com o mouse sobre ela.
border é a grossura da borda que contorna a imagem, o valor de 0 indica que a imagem não terá borda
hspace é o espaçamento horizontal entre a imagem e o conteúdo em sua volta
vspace é o espaçamento vertical entre a imagem e o conteúdo em sua volta
align é a forma de alinhamento da imagem, os valores possíveis são: absbottom, absmiddle, baseline, bottom, left, middle, right, texttop e top
Como transformar uma imagem em link
Ja vimos anteriormente no capítulo de "Introdução" que podemos quando necessário misturar diversas tags html. Para criarmos um link em uma imagem teremos de utilizar as tags <a>...</a> e <img>, basta colocar a tag de imagem "<img>" dentro da tag <a>..</a>, Exemplo:
<a href="fullindex.html"><img src="go.gif"></a>
Por padrão, quando criamos um link em uma imagem o navegador irá criar uma borda azul em torno da mesma. Você consegue remover esta borda através do atributo "border", basta atribuir a ele o valor de 0:
<a href="fullindex.html"><img src="go.gif" border="0"></a>
Exercício: Desenvolva o código fonte para criar a página da imagem abaixo tendo o seguinte contexto:
Considere quê você tenha uma pasta de nome "design" e que esta no mesmo diretório que seu arquivo .html, dentro da pasta design você tem as imagens a.jpg (quadro azul), b.jpg (quadro cinza) e c.jpg (quadro laranja). Baixe aqui as 3 imagens
Ao clicar em qualquer uma das imagens da página deverá ser aberta uma nova janela para a exibição da imagem clicada (utilize o atributo target da tag href com o valor de _blank).

0 comentários:

Postar um comentário

TecCodigos Copyright © 2011 | Template created by O Pregador | Powered by Blogger