|
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 >>
|
