Você já imaginou a internet sem imagens? A possibilidade de aprender como colocar imagem no HTML nos poupou de ter que acessar sites tediosos e com grandes blocos de texto.
A Linguagem de Marcação de Hipertexto, ou melhor, o HTML, é a linguagem base da internet. Assim, o código HTML para adicionar imagens é super simples e, normalmente quando iniciam-se os estudos da linguagem de marcação, os estudantes logo aprendem como colocar imagem no HTML.
Hoje, nós iremos te ensinar o passo a passo para você aprender e logo vai perceber que não há nenhum segredo.
Preparado para aprender? Vamos lá!
Como colocar imagem no HTML: o que vai precisar?
Usar boas imagens nos sites é essencial para manter uma página dinâmica, atraente e chamativa para os usuários. Imagina que chato seria abrir essa página aqui, e não ver a imagem que você viu no topo? Cansativo, não é?
Mas vamos ao que interessa: aprender a colocar imagem no HTML!
Primeiro, você precisará de algumas coisas:
- Imagens: é meio óbvio, não é? Mas lembre-se: elas precisam estar nos formatos .jpg, .png, e/ou .gif;
- Acesso ao servidor: aquele onde os arquivos da página estão armazenados;
- Editor de arquivo HTML.
E aí, já está com tudo em mãos?
Qual a tag usada para inserir imagem em HTML?
A tag HTML usada para inserir imagens em uma página é conhecida por <img>. Ela nasceu com o intuito de acabar com a monotonicidade dos sites, que eram cheios de texto.
O elemento <img> pode ser adicionado no corpo da página, ou seja, entre as tags <body> e </body> e necessita de, no mínimo, um atributo para ser útil, o src, ou source.
O src é relevante por conter um acesso que direciona para a imagem que será incorporada no site.
Exemplo: suponhamos que a sua imagem é renomeada por praia.jpg e está no diretório da sua página HTML, você pode inseri-la da seguinte maneira:
<img src=“praia.jpg”>Mas, caso a sua imagem esteja num subdiretório de imagens que, por sua vez, também permanece no seu diretório de página HTML, você usaria o seguinte código:
<img src=“imagens/praia.jpg”>Lembrando que o Google recomenda usar o segundo exemplo no seu site, visto que, auxilia na indexação da página, sem falar no SEO – Search Engine Optimization.
Se você ainda não pegou o raciocínio nos exemplos acima: take your time and relax. Nós vamos explicar mais detalhado no decorrer do artigo!
É importante ressaltar que o HTML não adiciona a imagem de fato, tecnicamente falando. O que acontece é que o usuário a vê na página como se ela estivesse inserida, mas na realidade, o que o HTML faz é linkar a imagem na página.
Com a tag <img>, diversas funções podem ser abarcadas: a adição da imagem como background, a ilustração de conteúdos, sem falar na possibilidade de deixar a página mais agradável!
Atributos da imagem no HTML
Pensou que o elemento <img> era só aquilo acima? Não mesmo!
Ele contém diversos atributos essenciais para adicionar funcionalidades à sua imagem. Vamos conhecê-los?
Title
Também conhecidos como títulos de imagem, eles ajudam a fornecer mais informações para o usuário. Seguindo os nossos exemplos, no código, poderíamos usar assim:
<img src=“praia.jpg”>
title=“Praia tropical na América do Sul”>Eles não são essenciais. Na verdade, se você puder incluir essas informações no corpo do texto, melhor.
Alt Text
Sabe quando você abre um site e as imagens não carregam? Já percebeu que aparece um texto dentro dela? Aquilo é um Alt Text.
Vê um exemplo: suponhamos que a nossa imagem é essa:
E ela não carregou, o Alt Text apareceria assim:
O Alt Text nada mais é que a descrição da imagem e ele tem diversos pontos positivos. Um deles é a possibilidade de deixar a sua página acessível para deficientes visuais!
Como deficientes visuais usam leitores de tela e, muitos leitores ainda não leem imagens, com o Alt Text presente, os deficientes conseguem saber e imaginar o que aquela imagem representa.
Largura e Altura
São representadas por width e height, respectivamente. No código, ficaria assim:
<img src=“praia.jpg”>
title=“Praia tropical na América do Sul”>
width=“400”
height=“350”Border
O elemento border é responsável por criar um contorno ao redor do elemento HTML. Em suma, é uma borda onde a tag se apresenta de diferentes formas:
- border-width: tamanho da borda;
- border-style: estilo da borda;
- border-color: cor da borda.
Alinhamento
Já pensou em como centralizar imagens em na linguagem de programação?
Conhecido por align, o atributo alinhamento é responsável por colocar as imagens nos lugares desejados. É bem simples, funciona assim:
- Para alinhar a imagem à esquerda, use a palavra left;
- Já para alinhar a imagem à direita, use a palavra right;
- No caso de imagens no meio, ou seja, centralizadas, use a palavra middle;
- No topo, use a palavra top;
- Embaixo, use a palavra bottom.
Referrerpolicy
O referrerpolicy é o atributo responsável pela determinação de políticas de segurança que podem ser aplicadas durante a realização de requisições HTTP quando utilizadas imagens em páginas HTML.
Ismap
O Ismap é responsável por enviar para o service-side a informação de qual posição a imagem foi criada pelo usuário no client-side. Assim, a imagem pode se tornar clicável!
Além disso, o Ismap precisa ser utilizado junto a tag <a> que representa as linkagens.
Como colocar imagem no HTML: passo a passo
Se você leu o artigo até aqui, você já sabe como fazer isso. Mas vamos lá!
1. Faça o upload dos seus arquivos no servidor
Sejam as imagens ou sejam seus arquivos em HTML: todos precisam de upload no servidor, ok?
Mova todas as imagens para uma pasta renomeada, assim você terá tudo mais organizado e fácil.
2. Anote o nome das imagens
Você precisa ter em mãos os nomes exatos das imagens para quando for adicionar no código. Além disso, precisa prestar atenção no tipo dos arquivos.
Veja dois tipos muito populares na imagem abaixo: o .png e o .jpg.
3. É hora do código!
Agora é a hora de juntarmos todos os atributos que aprendemos acima para colocarmos imagem no HTML!
Suponhamos que a minha imagem tem o nome de praia.jpg, tem o Alt Text é aquele que colocamos no exemplo lá em cima, a largura é de 60 e a altura é de 40.
No código, será representado da seguinte maneira:
<img src=“praia.jpg”>
alt text=“Praia com areia branca e mar azul com coqueiros do lado direito e, ao fundo do lado direito da imagem é possível visualizar montanhas cobertas de vegetação e com algumas casas presentes”>
width=“60”
height=“40”Simples, não é?
Como inserir imagens animadas?
Da mesma maneira que você irá inserir uma imagem normal.
A diferença está no tipo da imagem: enquanto em imagens estáticas os arquivos são .jpg e .png, nas imagens animadas, o arquivo usado será o .gif!
Como tornar a imagem responsiva para diferentes telas?
Imagens responsivas são aquelas que funcionam em dispositivos com diferentes tamanhos de tela.
Para que isso aconteça, você precisa dar um valor novo à sua largura. Em seguida, a altura da imagem se ajustará automaticamente.
É importante ressaltar que tornar imagens responsivas é uma tarefa essencial no que toca a experiência dos usuários.
Quais os formatos de imagem suportados no HTML?
Em suma, os formatos suportados são:
- JPEG;
- GIF (incluindo os animados);
- PNG;
- SVG;
- BMP;
- PNG ICO.
Qual a importância de colocar imagem no HTML?
Ninguém quer acessar uma página na web totalmente sem imagens. Elas não são atrativas e não captam a atenção do usuário. A relevância do HTML para o mercado é gigante, principalmente para o Marketing Digital.
Colocar imagens no HTML é não só importante, bem também é essencial. Portanto, se você deseja fornecer aos seus clientes uma boa experiência no seu site e ser parte relevante na cultura digital, as imagens precisam estar presentes no site.
Se interessou em aprender mais sobre Desenvolvimento Web e códigos?
Então você precisa conhecer a plataforma Multi+, que garante o acesso a todos os bootcamps na área de desenvolvimento da XP Educação e muitos outros. Você consegue trilhar um caminho profissional bem interessante ao realizar todos os cursos oferecidos na plataforma. Acesse já e saiba mais!
