Curso de HTML - Aula 6

Nessa aula vamos aprender a inserir imagens em nossas páginas.

Por | @jonathanlamimkt Programação
Como sabemos, os documentos HTML precisam trabalhar rapidamente. Por esse motivo um documento HTML não pode conter muitas imagens e nem imagens muito grande, por exemplo, os BMP (bitmap) tornam a visualização das imagens muito lenta.

As imagens que aparecem na Internet podem estar nos formatos GIF e JPG, que são os mais utilizados. Nessa aula tomaremos por base esses dois tipos de imagens.

IMG

A Tag Curso de HTML - Aula 6 é a responsável por inserir uma imagem em um documento HTML.

Sintaxe:

Curso de HTML - Aula 6              align=”alinhamento”
             alt=”texto_de_identificação”
             border=”espessura_da_borda”
             width=”largura”
             height=”altura”
             lowsrc=”url_imagem2”>

Src: indica o nome da imagem ou o endereço onde a imagem está localizada.

Align: define o alinhamento da imagem, podendo trabalhar tanto no alinhamento vertical da imagem quanto no alinhamento vertical da primeira linha de texto em relação à imagem. Pode ser: left (esquerda), center (centralizado), right (direita).

Alt: define um nome alternativo, que é mostrado enquanto a imagem não é carregada. Após o carregamento da imagem esse texto passa a ser mostrado quando a imagem recebe o foco do ponteiro do mouse.

Border: define a espessura da borda da imagem, caso se deseje inserir uma. Essa espessura é dada através de números inteiros.

Width/Height: definem, respectivamente, largura e altura da imagem e devem ser passadas em pixel. Se apenas um desses parâmetros for inserido, o outro será ajustado de forma automática, sem distorcer a imagem.

Lowsrc: define uma figura de apresentação inicial, útil em páginas que contém muitas imagens ou imagens muito pesadas.

Exemplo:



Curso de HTML – Aula 6



Curso de HTML - Aula 6              align=”center”
             alt=”Meu Amigo Tux”
             border=”2”
             width=”100”
             height=”100”
             lowsrc=”tux2.jpg”>




OBS: Troque a imagem tux.jpg e tux2.jpg por uma imagem existente em seu computador.

DICA:

Para inserir um GIF Animado na página o procedimento é mesmo utilizado para inserir uma imagem estática.

Bons Estudos!

Mais sobre: html curso_html imagem
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo
  • ASSINE NOSSA NEWSLETTER

    As melhores publicações no
    seu e-mail

  • Preencha para confirmar