|
Neste tutorial veremos como inserir imagens em uma página da Web.
As imagens são uma parte interna muito utilizada para retratar qualquer conceito de forma simplificada. Elas são usadas para
aprimorar o design e a exibição de uma página da Web. A linguagem HTML fornece muitas tags embutidas para inserir facilmente uma imagem
em uma página da Web.
Neste tutorial, aprenderemos as várias tags para incluir imagens em HTML.
Sintaxe de Imagens HTML
1. <img>
Tecnicamente, as imagens nunca são inseridas em nenhuma página da web. Em vez disso, eles estão vinculados às suas respectivas
páginas da web. A tag HTML <img> é comumente usado para inserir uma imagem em qualquer página da web. A tag <img> funciona
criando um espaço de retenção para a imagem selecionada. Por padrão, a tag HTML <img> está vazia e não contém nenhum valor. Ele
contém apenas atributos que não incluem uma tag de fechamento.<
Os dois atributos da tag <img> são os seguintes:
Atributo IMG src- Este atributo define o caminho para a imagem especificada.
Atributo IMG alt - Este atributo busca um texto alternativo para a imagem fornecida.
2. Atributo IMG src
O atributo HTML ![]() src define o caminho (URL) para a imagem.
Nota: Sempre que o seu navegador carregar qualquer página da web, no mesmo momento, é responsabilidade do seu navegador
buscar as imagens das páginas da web de um servidor da web e incluí-las no site. Portanto, o programador HTML deve sempre garantir
que a imagem permaneça no mesmo local em relação à página da web. Caso contrário, seus usuários receberão um ícone de link quebrado
que exibe um texto mostrando que o navegador não consegue encontrar a imagem.
Sintaxe:
<img src="HTML-Logo.png">
Vejamos alguns Exemplos:
Exemplo 1: Neste exemplo vamos mostrar como inserir uma imagem em uma página e usar o atributo 'alt':
Veja na imagem abaixo o resultado desse código depois de executado:
3. O Atributo alt:
O atributo HTML alt é usado para fornecer um texto alternativo para a imagem fornecida, se o usuário do site não puder
visualizar a imagem devido a atraso no carregamento, conexões de internet lentas ou qualquer outro motivo.
O conteúdo do atributo alt deve ser preciso e deve descrever a finalidade da imagem.
Sintaxe:
<img src="HTML-Logo.png" alt="Logomarca do HTML">
Exemplo 2: Neste exemplo vamos mostrar como inserir uma imagem em uma página e usar o atributo 'alt':
Veja na imagem abaixo o resultado desse código depois de executado:
4. Tamanho da Imagem - Largura e Altura:
Depois de inserir a imagem, é importante especificar a altura e a largura, para que caiba bem na página. Portanto, o HTML
fornece o atributo style para definir a altura e a largura de uma imagem.<
Sintaxe:
<img src="HTML-Logo.png" alt="Bem-vindo ao nosso site" style="largura:600px; altura:600px;">
Exemplo 3: Neste exemplo vamos mostrar como inserir uma imagem em uma página utilizando os atributos de largura e altura:
Veja na imagem abaixo o resultado desse código depois de executado:
5. Imagem HTML como um link:
O HTML fornece o recurso para usar a imagem como um link. Para isso o programador HTML precisa usar a tag <img> dentro
da tag HTML <a>:
Sintaxe:
Exemplo 4: Neste exemplo vamos mostrar como inserir uma imagem com um link para uma página Web:
Veja na imagem abaixo o resultado desse código depois de executado:
<< Tutorial para Criar um Color Picker
Tutorial para Converter uma Imagem Colorida para Tons de Cinza >>
|
