O que são tags de imagem HTML?
O artigo a seguir fornecerá um resumo das tags de imagem HTML. Eu sei o que é clichê, mas deixe-me começar dizendo que uma imagem vale mais que mil palavras. No caso de páginas da web, isso é especialmente verdade. Uma imagem pode vender o visitante com sua ideia, impressionar alguém a comprar seu produto e ajudar uma página da Web a ficar muito melhor. Neste guia, veremos como podemos adicionar IMG às páginas da Web e alinhá-las adequadamente, além de adicionar links a elas.
Adicionando imagens a páginas da Web
Você pode adicionar IMG a uma página HTML usando o No documento HTML, aqui está a sintaxe:
Aqui, o IMG informa ao navegador que a tag trata de adicionar um IMG ao documento e o “src =” especifica de onde fazer o download da imagem.
Exemplo de uma página com uma imagem
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Aqui está a saída do código:
Um fato interessante sobre essas páginas HTML é que, quando você usa a tag IMG, a imagem não é inserida na referida página da Web; em vez disso, cria um espaço de retenção onde a imagem é colocada após o download.
Suporte ao navegador e compatibilidade com atributos
Como você pode esperar, todos os navegadores modernos suportam imagens e o uso de tags IMG. Às vezes, os navegadores móveis redimensionam a imagem para ajustá-la na tela se a imagem não estiver definida como responsiva.
Quando se trata de compatibilidade de atributos com o HTML 4.01 e o HTML5 mais recente, a maioria das tags funciona, exceto alinhamento, borda, hspace e vspace, que simplesmente não são suportados neste último.
Imagens como um link:
Haverá momentos em que você desejará que uma imagem funcione como um link para outra página. Você pode fazer isso adicionando a tag IMG dentro da tag.
Definindo uma imagem como plano de fundo de uma página da Web
Você pode atribuir uma imagem como uma imagem de plano de fundo de uma página da web usando a propriedade CSS da imagem de plano de fundo no elemento Corpo da página.
Imagem de fundo
Configurando uma imagem para flutuar no navegador
Podemos usar a propriedade CSS “float” para definir uma imagem para flutuar dentro de qualquer lugar da janela do navegador. Vamos dar uma olhada em um exemplo que o ajudará a entender.
Aqui, a imagem do carro flutuará para o lado direito do texto.
Aqui, a imagem do carro flutuará para o lado esquerdo do texto.
Atributos da etiqueta de imagem
A seguir, estão os atributos de uma tag de imagem.
1) Alinhar
Valores possíveis: Superior, Inferior, Médio, Esquerdo ou Direito.
O atributo iluminado é usado para especificar o alinhamento de uma imagem na página da web.
2) Alt
Tipo de valor: Texto
Alt é usado para especificar o texto alternativo de uma imagem de uma página da web. Nos casos em que a exibição de um IMG não é possível, o navegador exibe esse texto para o usuário. Mecanismos de pesquisa como Google e Bing usam esse texto alternativo para mostrar resultados na Pesquisa de imagens.
3) Fronteira
Tipo de valor: Pixels
É usado para criar uma borda de espessura definida pelo usuário ao redor da imagem. Não funciona em HTML5.
4) Origem Cruzada
Tipo de valor: credenciais de uso anônimas
Esse atributo é usado quando queremos especificar como as fotos de origem cruzada devem ser tratadas. Isso é usado principalmente nos casos em que os elementos de tela dos aplicativos da web JavaScript são usados.
5) Altura
Tipo de valor: porcentagens ou pixels
Obviamente, este é usado para indicar a altura da imagem na página HTML.
6) hspace
Tipo de valor: Pixels
Sem suporte no HTML5, o atributo hspace é usado para especificar em pixels quanto espaço em branco deve ser adicionado à esquerda e à direita da imagem inserida.
7) ismap
Tipo de valor: URL de uma página
ismap, usamos para definir a referida imagem como um mapa de imagem do servidor. Quando o usuário clica (ou toca) dentro da imagem, os navegadores enviam as coordenadas do clique (ou toque) para o servidor da Web como um URL.
8) Longdesc
Tipo de valor: URL
Longdesc é usado para fornecer uma descrição detalhada de uma imagem usando um URL. O URL usado no atributo é usado como a descrição da imagem.
9) src
Tipo de valor: URL
src significa source e é usado para especificar o endereço do qual o navegador recuperará a imagem; esse URL pode ser aplicado a uma imagem dentro de um diretório no mesmo servidor e também pode armazenar uma imagem em um servidor de terceiros. um nome de domínio diferente.
10) mapa de uso
Tipo de valor: #mapname
O atributo usemap é usado para definir a imagem para um mapa de imagem do lado do cliente. Um mapa de uso é sempre usado com tags HTML de mapa e área.
11) vspace
Tipo de valor: Pixels
Não suportado no HTML5, o atributo Vspace é usado para definir o número de pixels que serão usados como espaço em branco na parte superior e inferior da imagem na página da web.
12) Largura
Tipo de valor: Pixels
Assim como o nome sugere, o atributo width é usado para especificar a largura de uma imagem dentro da página da web em HTML.
Conclusão - Tags de imagem HTML
Agora que vimos como as imagens são adicionadas nas páginas HTML e como definir seus atributos, podemos criar páginas da Web de aparência atraente em um projeto da Web.
Além de adicionar um toque visual a uma página da web, as imagens são valiosas porque também ajudam na otimização de mecanismos de pesquisa. A adição de tags e descrições alt adequadas às imagens ajuda os mecanismos de pesquisa a entender melhor o conteúdo de uma página da Web e a melhorar o ranking de uma página da Web em muitos casos.
Artigos recomendados
Este é um guia para tags de imagem HTML. Aqui discutimos os atributos da tag de imagem, juntamente com o suporte ao navegador e a compatibilidade com os atributos. Você também pode consultar os seguintes artigos para saber mais -
- Um guia simples para comandos HTML
- Introdução ao que é XHTML?
- Tutoriais sobre atributos HTML
- Aplicativos e principais usos do HTML
- Estilos de lista diferentes em HTML
- Quadros HTML
- Blocos HTML