Aula 05 HTML – HyperText Markup Language – Imagens

Curso de Html Aula 01
Curso de Html Aula 05

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

Um comentário em “Aula 05 HTML – HyperText Markup Language – Imagens

  1. Caramba…muito interessante! Isso nosso professor não ensinou e tive que me ‘atrever’ a colocar coisas extras na atividade pesquisando na internet heheh.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *