Olá Pessoal essa é a nossa 5° do curso básico de HTML.
Nesse ponto você já consegue identificar as principais tags HTML e desenvolver páginas simples conforme mostrado durante as aulas anteriores.
Nesta aula vamos falar um pouco sobre imagens, sua tag e suas propriedades.
Caso tenha alguma dúvida deixe nos comentários será um prazer responde-las.Ao finalizar o curso você poderá receber um CERTIFICADO DE PARTICIPAÇÃO TOTALMENTE GRATUITO!
Então vamos lá!
Quando se deseja inserir uma imagem em alguma página, a sintaxe geral do comando HTML é:
IMG SRC=”local_onde _está_a_imagem”
que pode ter vários atributos:
alt=”texto_alternativo”
border=”borda_da_imagem”
WIDTH=”largura_da_imagem”
HEIGHT=”altura_da_imagem”
ALIGN=”alinhamento_horizontal_ou_vertical_da_imagem”
VSPACE=”margem_superior_inferior”
HSPACE=”margem_direita_esquerda” >
Em que:
<IMG> – tag que determina a inserção de uma imagem;
SRC – este atributo diz onde está a imagem.
ALT – este atributo permite colocar um texto alternativo na imagem.
Border – este atributo configura uma borda (moldura) na imagem. Seus valores variam de 0 (sem borda) a infinito. Se não for especificado, o seu valor será 1.
Width – especifica a largura da imagem. Seu valor é medido em pixels. Se não for especificado a imagem aparece com seu tamanho original.
Height – especifica a altura da imagem. Seu valor é medido em pixels. Se não for especificado a imagem aparece com seu tamanho original.
Align – atribui valores para o alinhamento horizontal (à esquerda, ao centro, à direita – left, center e right); ou valores para o alinhamento vertical (top, midlle, baseline e bottom). Outros valores também são aceitos: texttop, absmidlle, absbottom.
ALIGN=LEFT – a imagem fica à esquerda,
ALIGN=RIGHT – a imagem fica à direita,
ALIGN=CENTER – a imagem fica no centro,
ALIGN=TOP – alinha o topo da imagem com o topo do elemento mais alto da linha, que pode ser outra imagem,
ALIGN=MIDDLE – alinha a base do texto com o centro da imagem,
ALIGN=BOTTOM – alinha a imagem com a base dos outros elementos da linha.
ALIGN=TEXTTOP – alinha o topo da imagem com o topo do texto,
ALIGN=ABSMIDDLE – alinha o centro do texto com o centro da imagem.
ALIGN=BASELINE e ALIGN=ABSBOTTOM – alinham a imagem com a base dos outros elementos da linha;
Vspace – especifica o espaço acima e abaixo da imagem. Seu valor é medido em pixels.
Hspace – especifica o espaço a direita e esquerda da imagem. Seu valor é medido em pixels.
Exemplo prático:
<html>
<head>
<title>Aula de Imagens em HTML</title>
</head>
<body>
<p align=”center”>Nesta aula você aprenderá ultilzar imagens em HTML</p>
<br />
<img src=”caminhoda_imagem/nome_da_imagem.jpg”>
</body>
</html>
Aprenda mais…
Confira este tutorial explicativo sobre imagens mapeadas em HTML
http://rafapaulino.com/imagens-mapeadas/
Vale a pena ver!
Fonte: http://www.ufpa.br/dicas/htm/htm-ima2.htm
http://www.clem.ufba.br/tuts/html/c12.htm
