Neste artigo, mostrarei como usar a tag img em HTML para criar imagens, deixando o site mais vívido.

Existe um ditado " um site bonito deve ter imagens, layout claro e muitos efeitos atraentes ". Esta afirmação por si só é suficiente para listarmos as tecnologias que devem ser utilizadas para criá-lo.

• Crie belas formas => Use tags HTML para construir, normalmente tags img.
• Limpar layout => Use CSS para dividir o layout.
• Efeitos atraentes => Use HTML5 e CSS3 ou bibliotecas Javascript como jQuery.

Muito conhecimento, né? Mas não se preocupe, temos que ir devagar, não com pressa, então neste artigo vamos aprender como usar tags img para criar imagens primeiro.

O que é tag img em HTML?

Img significa imagem, é uma tag HTML usada para criar imagens em páginas da web. 100% dos sites usam essa tag.

Para exibir imagens na web, use a img com a seguinte sintaxe:

 <img src="link"/>

Onde o link principal é o link que aponta para a imagem. Deve ser um link que existe na internet, não um link no computador do cliente. Então você tem que fazer o upload da imagem para a hospedagem, qualquer computador que acesse o site pode vê-la.

Exemplo : Crie uma imagem com o link da imagem já carregada na hospedagem do web888.

 <img src="https://web888.net/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/>

Atributos da tag img em HTML

Para trabalhar sem problemas com a tag, você deve entender o significado de todos os seus atributos, os mais típicos são os seguintes atributos:

atributo src .

Este é um atributo que contém o caminho que aponta para o arquivo de imagem. Existem muitos tipos diferentes de imagens, como png, jpg, gif , … e todas podem ser exibidas no site. Particularmente para o valor da URL deve estar em uma das duas formas, ou seja, a URL com o domínio ou a URL no diretório atual ( todos enviados para hospedagem ).

Atributo Alt

Esta é a propriedade que será exibida caso você passe a URL da imagem errada, desta vez exibirá este texto ao invés da imagem.

 <img src="url_khong_ton_tai" alt="hình ảnh"/>

Para o pessoal de SEO, esse atributo ajuda o mecanismo de bot do Google a saber o significado da imagem.

Propriedades de largura e altura

Esta é a propriedade que define a largura ( largura ) e a altura ( altura ) da imagem. Você também pode usar CSS para configurá-lo.

 <img width="500px" height="200px" src="https://hocvietcode.com/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/> <img width="200px" height="100px" src="https://hocvietcode.com/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/>

Normalmente, usaremos CSS para definir a largura e a altura em vez de usar as duas propriedades acima. No entanto, como ainda não aprendemos CSS, você pode usar essas duas propriedades.

Algumas maneiras de usar tags img em html

Podemos usar a img em combinação com outras tags para criar uma interface de site.

Combine uma tag para criar links de imagem

Se você quiser quando o usuário clicar na imagem, o navegador redirecionará para outra página, então você pode usar uma tag a ao redor da imagem.

 <a href="https://hocvietcode.com"> <img src="http://code.web888.vn/upload/config/images/hoc-lap-trinh-online.png" title="Học lập trình"/> </a>

Combine a tag do mapa para atribuir o link a uma pequena posição na imagem

Digamos que você tenha uma imagem de satélite e na imagem haja um pequeno ângulo que é uma foto do sol. Você quer que quando você clicar no pequeno canto do sol nessa imagem, ele mudará para uma imagem completa do sol, como fazer como no exemplo abaixo.

 <img src="https://hocvietcode.com/upload/tut_post/images/2014/08/14/123/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="https://hocvietcode.com/upload/tut_post/images/2014/08/14/123/sun.gif"> </map>

Explicação :

• Na img existe um atributo usemap="#planetmap" que serve para especificar o mapa a ser aplicado a esta forma, pois seu valor é #planemap então ele vai pegar a tag map com name="planemap" .
• Na tag do map define uma area com atributos
  • shape="rect" ou seja, retângulo
  • coords="0,0,82,126" ou seja, uma lista de coordenadas que compõem a area , tendo a imagem acima como padrão para medição e medida em pixels.
  • alt="sun" é ao passar o mouse sobre o local com as coordenadas acima, este título será exibido
  • https://freetuts.net/upload/tut_post/images/2014/08/14/123/sun.gif é o link quando você clica nesta área para ir.

No artigo, apresentei como usar a img para criar imagens simples em HTML e apresentei algumas maneiras de usar a img em combinação com outras tags, como a tag, map tag para fazer diferentes funções. Na verdade, quando você faz isso, você tem que combiná-lo com CSS, a nova interface é linda e os efeitos são atraentes.