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
Imagem HTML incorporando imagens na página da web
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
- Imagem flutuante
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
- Mapas de Imagens
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
- Imagem de fundo
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 HTMLImagem 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ê.