Em HTML, o que é uma tag de imagem?

Ao criar uma página da Web usando HTML, a tag da imagem é usada para inserir uma foto ou gráfico em um determinado local da página. Há muitas maneiras pelas quais as imagens podem ser usadas em páginas da Web, desde o aumento de interesse até o uso como ferramenta de navegação ou para fornecer informações. Existem também vários formatos diferentes de imagens que podem ser usados. Não importa como ou qual imagem esteja sendo adicionada à página da web, a tag da imagem é sempre necessária.

Para adicionar uma imagem, a tag da imagem é incluída onde você deseja que a imagem apareça na sua página. Por exemplo, se uma imagem fosse inserida após este parágrafo, a tag da imagem, ou <img>, seria adicionada ao documento HTML após este parágrafo. A tag <img> define todas as imagens em HTML. É chamado de tag vazia, pois contém atributos e não possui tag de fechamento. Atributos são opções disponíveis para uma tag HTML específica.

Se apenas <img> fosse adicionado a um documento HTML, nada seria exibido, pois os atributos da tag não foram incluídos. O atributo mais importante para <img> é "src", que significa origem. O atributo src indica onde o arquivo de imagem está realmente localizado ou é o endereço do arquivo de imagem. Como a imagem está sendo usada em uma página da web, o local da imagem será fornecido como um URL. Dentro do documento HTML, a imagem teria a seguinte aparência: <img src = "URL" />.

Especificamente, o URL aponta para onde a imagem está armazenada. Por exemplo, se uma imagem de um computador com o nome de arquivo computer.jpg fosse armazenada na pasta images em www.wisegeek.com, o URL seria substituído por: <img src = "www.wisegeek.com/images/computer. jpg "/>. Quando o navegador abre a página da web, ele exibe a imagem na qual a tag da imagem está incluída.

A tag da imagem possui vários outros atributos diferentes. Eles permitem que o usuário ajuste a aparência da imagem na página. Os seguintes atributos são comumente usados ​​para esta tag: alt, borda, tamanho e alinhamento.

O atributo alt significa texto alternativo e é mostrado se um navegador não puder exibir uma imagem. Além disso, o texto alternativo é lido para os usuários com deficiência visual e optam por exibir texto sobre imagens. Para o exemplo acima, o texto alternativo pode ser indicado como alt = "imagem de um computador".

O atributo border adiciona uma borda à imagem com a espessura, dependendo do número de pixels indicado. Isso pode ser especialmente útil quando o plano de fundo da imagem e o plano de fundo do site são semelhantes, e uma distinção clara é desejada. Por exemplo, border = "10" colocará uma borda com 10 pixels de espessura em torno de uma imagem.

Os atributos de tamanho também são importantes, pois a largura e a altura podem ser usadas para especificar o tamanho exato de uma imagem. Esses atributos precisam ser usados ​​com muito cuidado, pois sua alteração pode afetar as proporções ou a qualidade da imagem exibida. Os atributos de tamanho não alteram o arquivo real, exatamente como o navegador o exibe.

O atributo align especifica como a imagem é alinhada em comparação com o texto na página. Existem várias opções diferentes para esse atributo, incluindo superior, inferior, médio, esquerdo, direito, absmiddle, absbottom, linha de base e texto. Essas tags também ajudam a determinar como o texto da página se alinha à imagem.