O que são imagens HTML e como modificar sua página da Web?

Este artigo fornecerá um conhecimento detalhado e abrangente de imagens HTML e como você não pode adicioná-las e modificá-las para tornar sua página da web bonita.

As imagens são uma parte muito importante de uma página da web, pois melhora a aparência de uma página da web e aumenta a interação com o cliente. A USP de vários sites é como eles organizam imagens diferentes em suas páginas da web e adicionam sabores a elas. Nisso Artigo Imagens, vamos entender como incorporar imagens em uma página da web usando HTML na seguinte ordem:

Como adicionar imagem em HTML

Para incorporar uma imagem em uma página da web, o HTML oferece tag. Outro ponto importante a lembrar é, não tem uma tag de fechamento. scr atributo é usado para especificar o caminho da imagem, que pode ser um url ou caminho de imagem do sistema / servidor. Vamos primeiro começar com a sintaxe básica de incorporação de imagens em uma página da web usando HTML.



Sintaxe

img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>

Código de amostra

Imagem HTML incorporando imagens na página da web  

Semelhante a outras tags, existem vários atributos associados a tag. Vamos olhar para cada um deles um por um, entender sua necessidade e como usá-los.

Tags de imagens HTML

  • Atributo alt

O atributo alt é o texto alternativo para uma imagem. A razão pela qual o atributo alt foi introduzido é se por algum motivo a imagem não carregou, então um texto alternativo deve aparecer dando uma ideia sobre a imagem. Os motivos para a imagem não carregar podem ser uma conexão lenta com a Internet ou a imagem não reside na fonte fornecida, etc.

Se a imagem residir na mesma pasta onde está o arquivo HTML, você pode especificar o nome do arquivo diretamente. Caso contrário, você deve fornecer o caminho absoluto do arquivo de imagem.

O valor do atributo alt deve descrever a imagem.

Exemplo

 Logotipo da Edureka
Imagem HTML incorporando imagens na página da web logotipo da edureka 

criar cópia do objeto java
  • Largura e altura de uma imagem

O atributo de estilo é usado para definir a altura e largura de uma imagem. No atributo style, você especifica o estilo CSS.

Imagem HTML incorporando imagens na página da web  

Alguns dos pontos importantes ao incorporar uma imagem em uma página da web usando HTML são:

  • Os atributos de largura e altura são definidos em pixels.
  • Você também pode definir a largura e a altura de uma imagem em porcentagem. Ele considerará a porcentagem de acordo com a página inteira.
   
  • Se você especificar apenas um deles, ele ajustará o outro de acordo.
  • Incorporação de imagens usando URL

HTML também oferece a flexibilidade de selecionar a imagem de outro servidor apenas especificando o URL. Você pode usar um servidor separado para hospedar as imagens e, em seguida, incorporar essas imagens usando URL.

Imagem HTML incorporando imagens na página da web  

redondo duplo para int java
  • Imagem como um link

Você também pode usar a imagem como um link onde o usuário pode clicar na imagem e acessar uma nova página da web. Para fazer isso, basta colocar o dia em tag.

Imagem HTML incorporando imagens na página da web  

Você também pode ajustar o alinhamento da imagem usando a propriedade float CSS. Todas as propriedades CSS precisam ser especificadas no atributo style.

Imagem HTML A imagem irá flutuar à direita do texto. A imagem irá flutuar à esquerda do texto.

Este é um dos recursos importantes fornecidos pelo HTML. tag ajuda na definição de um mapa de imagem. Você deve estar se perguntando o que é um mapa de imagem. Um mapa de imagem é uma imagem com áreas clicáveis

Imagem HTML  

Você também pode adicionar uma imagem de plano de fundo em uma página da web. Você só precisa usar a propriedade CSS, por exemplo, imagem de fundo na tag de estilo e adicioná-la ao elemento HTML.

Imagem HTML

Imagem de fundo

Elemento BODY

Com isso encerramos este Blog de Imagens HTML.Agora, depois de executar os trechos acima, você terá entendido como inserir imagens em HTML. Espero que este blog seja informativo e agregue valor para você.

Confira nosso que vem com treinamento ao vivo conduzido por instrutor e experiência em projetos da vida real. Este treinamento torna você proficiente em habilidades para trabalhar com tecnologias da web de back-end e front-end. Inclui treinamento em Desenvolvimento Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.

Tem alguma questão para nós? Mencione isso na seção de comentários do blog “Imagens HTML” e entraremos em contato com você.