Insira uma imagem em HTML
Para entender como inserir uma imagem em HTML, é necessário fixar em mente um conceito-chave: as imagens que você vê nas páginas da Web dos sites que visita, blogs e fóruns não estão incorporados nestes últimos, mas são chamadas de locais externos. Isso significa que cada foto possui um endereço único, que permite seu rastreamento e visualização.
O endereço de uma imagem é composto da seguinte forma: no início está o endereço do espaço da Web em que o arquivo está hospedado (por exemplo. https://www.configurehow.com/) e, em seguida, há o nome da imagem completo com a extensão (por exemplo, image.jpg) O endereço direto de uma imagem na web, portanto, deve ter uma composição do tipo https://www.[domínio do sítio]/[nome e extensão da imagem], no caso do nosso exemplo https://www.configurehow.com/immagine.jpg.
A esta altura, você deve estar se perguntando como lembrar o endereço de uma imagem em uma página da Web para torná-la visível ao público? Nada mais simples! Basta usar a tag img seguido pelo atributo src = Seguido porendereço da imagem para ser inserido na página entre aspas. Continuando com o exemplo acima, para inserir uma imagem em uma página da web, você deve usar a seguinte formatação.
Se quiser, você também pode adicionar a tag alt à imagem, de modo a configurar o Texto Alternativo (uma espécie de descrição do arquivo carregado) a ser mostrado caso este não esteja disponível (por exemplo, devido a erros de conexão com o servidor ou exclusão da foto de sua posição original), o que também favorece a indexação da imagem pelos buscadores (como já expliquei a você em outro tutorial). A tag alt é inserida imediatamente após o elemento img, como no exemplo abaixo.
Como você deve ter notado, nos exemplos que acabei de dar, não fechei a tag img com a tag : a razão é que não há necessidade de fazer isso, pois img é uma tag "vazia". No entanto, pode ser prático inserir um espaço e um golpear / antes do símbolo maior>, de modo a tornar a imagem também compatível com o XHTML, a linguagem de marcação que associa algumas propriedades do XML a características do HTML.
Coloque uma imagem HTML à direita, esquerda e centro
Agora que você está familiarizado com o uso da tag img, certamente terá interesse em saber como movê-la direita, esquerda e centro. Nas próximas linhas, vou mostrar exatamente isso: como alinhar uma imagem ao centro, esquerda, direita, parte superior ou inferior da página que a contém e também como redimensioná-la.
Para alinhar as imagens, basta usar a formatação que vimos nas linhas anteriores e adicionar a variável a ela alinhar =, seguido pelo tipo de arranjo que você deseja que a foto adote: centro, para alinhar a imagem no centro; esquerda, para alinhá-lo à esquerda; certo, para alinhá-lo à direita; fundo, para organizar a foto na parte inferior direita da primeira linha do texto; meio, para organizar a foto na parte central à direita da primeira linha do texto; topo, para organizá-lo no canto superior direito da primeira linha do texto.
Conforme mencionado acima, através do código HTML também é possível redimensionar as imagens (apenas visualmente, sem alterar o tamanho do arquivo original) e especificar os espaçamentos que devem ter em relação aos demais elementos que compõem a página Web na qual são inseridos.
Para indicar o tamanho que uma imagem deve ter, variáveis devem ser usadas largura ed altura especificando os valores em pixels, enquanto para o espaçamento é necessário usar a voz hspace para indicar o espaçamento horizontal e vspace para indicar o vertical. A seguir, dou o exemplo de uma foto de 300 x 200 pixels com espaçamento vertical e horizontal de 20 pixels.
Você viu como é simples alinhar e redimensionar imagens em HTML? Como eu disse a você, é tudo menos complicado, você só precisa saber os tags a serem usados e usar as variáveis de sua preferência para fazer a foto enviada assumir a posição desejada.
Insira uma imagem em HTML como fundo
querer insira uma imagem em HTML e use-a como fundo da página? Isso também é possível, mas para continuar você não terá que recorrer à tag img, mas à tag corpo seguido pelo atributo fundo ea partir caminho da imagem fechado entre aspas. Garanto que não há nada de complicado em fazer esta operação: o exemplo abaixo pode provar.
Como a imagem inserida como plano de fundo na página da Web será repetida tanto horizontal quanto verticalmente, recomendo que você adote essa técnica apenas se tiver imagens que, mesmo se repetidas, permitem obter um resultado estético agradável, para entender uma classificação de efeito de mosaico.
Insira uma imagem vinculada em HTML
Vamos concluir este guia descobrindo juntos como associar um link a uma imagem em HTML, de modo que, ao clicar nela, você será redirecionado para uma página específica da Web. Para adicionar um link da Internet a uma imagem, tudo o que você precisa fazer é inserir a tag a href = Seguido porendereço do site para link ao código da imagem. Aqui está um exemplo em que a imagem que usamos até agora neste tutorial leva ao endereço www.sitodesample.it:
Eu diria que é isso! Agora você conhece todas as regras básicas para inserir uma imagem HTML em blogs e sites da Web. É preciso muito pouco para aprender, percebeu? E a partir daqui você pode aprofundar o assunto descobrindo muitas outras funções que podem ser exploradas usando a linguagem HTML. Divirta-se!
Como inserir uma imagem em HTML
