As imagens podem melhorar o design e a aparência de uma página da web.
<img src="https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/06/tutorial-de-html-introducao-300x133.png" alt="foto 1">
Fica assim
Sintaxe de imagens HTML
A <img>tag HTML é usada para incorporar uma imagem em uma página da web.
As imagens não são tecnicamente inseridas em uma página da web; as imagens são vinculadas a páginas da web. A <img>tag cria um espaço de retenção para a imagem referenciada.
A <img>tag está vazia, contém apenas atributos e não possui uma tag de fechamento.
A <img>tag possui dois atributos obrigatórios:
src – especifica o caminho para a imagem
alt – Especifica um texto alternativo para a imagem
O atributo src
O src atributo necessário especifica o caminho (URL) para a imagem.
Nota: Quando uma página da web é carregada; é o navegador, naquele momento, que obtém a imagem de um servidor da Web e a insere na página. Portanto, verifique se a imagem realmente permanece no mesmo local em relação à página da Web; caso contrário, seus visitantes receberão um ícone de link quebrado. O ícone do link quebrado é mostrado se o navegador não conseguir encontrar a imagem.
O atributo alt
O alt atributo necessário fornece um texto alternativo para uma imagem, se por algum motivo o usuário não puder visualizá-la (devido a uma conexão lenta, um erro no atributo src ou se o usuário usar um leitor de tela).
O valor do alt atributo deve descrever a imagem:
<img src="imagem.jpg" alt="descricao...">
Tamanho da imagem – largura e altura
Você pode usar o styleatributo para especificar a largura e a altura de uma imagem.
<img src=”imagem.jpg” alt=”descrição” style="width:50px;height:50px;">
Como alternativa, você pode usar os atributos widthe height:
<img class="" src="https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/06/tutorial-de-html-introducao-300x133.png" width="50" height="50" />
Largura e altura, ou estilo?
Os width, heighte style atributos são todos válidos em HTML.
No entanto, sugerimos o uso do style atributo Impede que as folhas de estilos alterem o tamanho das imagens:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/06/tutorial-de-html-introducao-300x133.png" alt="HTML5 Icon" width="128" height="128">
<img src="https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/06/tutorial-de-html-introducao-300x133.png" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Formatos comuns de imagem
Aqui estão os tipos de arquivo de imagem mais comuns, suportados em todos os navegadores (Chrome, Edge, Firefox, Safari, Opera):
Abbreviation File Format File Extension
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg
Resumo do capítulo
Use o <img>elemento HTML para definir uma imagem
Use o src atributo HTML para definir o URL da imagem
Use o alt atributo HTML para definir um texto alternativo para uma imagem, se ela não puder ser exibida
Use o HTML widthe os heightatributos ou o CSS widthe as height propriedades para definir o tamanho da imagem
Use a float propriedade CSS para deixar a imagem flutuar para a esquerda ou para a direita
Nota: Carregar imagens grandes leva tempo e pode diminuir a velocidade da sua página da web. Use imagens com cuidado
<< Anterior Links HTML
Deixe um comentário