Incorporando imagens no seu documento
O html possui uma tag exclusiva para incorporar imagens ao seu documento. Conforme comentado na nossa segunda postagem Aprenda para que servem as tags e como usá-las, há tags que não envolvem o conteúdo a ser marcado, essas tags são chamada de tags de fechamento automático (self-closing tags) por exemplo: <meta>, <link>, <br>, <hr> etc... outra tag de fechamento automático é <img>, esta tag nos permite inserir uma imagem no local onde a tag é colocada. Para isso devemos usar dentro da tag <img> o atributo src (abreviação de source ou fonte em português) para determinar a fonte ou origem da imagem, onde colocamos o caminho ou link da imagem que queremos carregar no documento.
Uma breve introdução a caminhos de arquivos (path)
- Caminho absoluto (absolute path) e equivale a um url completo contendo por exemplo: www.domínio.com/minhaimagem.jpg
- Caminho relativo (relative path) - não possui o domínio, e indica que o arquivo está localizado relativo ao próprio site por exemplo: meusite/minhaimagem.jpg (indica que a imagem está localizada na mesma pasta ou local do documento html
Em postagens futuras veremos esse assunto em maior detalhe. Agora voltaremos ao assunto de hoje. O caminho (path) da foto, deve ser inserido dentro das aspas "" no atributo src que deve ser inserido dentro da tag <img>. Como dito acima, podemos usar tanto caminhos absolutos com uma url qualquer, ou podemos usar um caminho relativo.
Abra o bom e velho bloco de notas ou outro editor de texto puro (exceto processadores de texto como word) e digite a seguinte estrutura básica:Inserindo nossa primeira imagem
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Minha Primeira Imagem</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Inserindo Imagens com a tag <img></h1>
<img src="https://cdn.pixabay.com/photo/2018/04/26/12/14/travel-3351825_1280.jpg">
</body>
</html>
*Nota: para este pequeno exemplo utilizamos um caminho absoluto com uma url para uma imagem hospedada em um bannco de imagens gratuito, porém, isso não é muito indicado, pois se moverem a imagem do local original ou mesmo a excluírem isso causará mal funcionamento no seu site, que não mostrará mais a imagem, mas sim um pequeno ícone de imagem não carregada. Por esse e outros motivos que veremos futuramente, é mais indicado utilizar caminhos relativos, fazendo upload das imagens que deseja utilizar para alguma pasta no mesmo local onde o seu documento html estiver hospedado.
Salvando e abrindo o documento, você deve visualizar o seguinte:
Salvando e abrindo o documento, você deve visualizar o seguinte:
 |
| Aparência da página contendo a imagem adicionada |
Parabéns! Você inseriu sua primeira imagem em sua página html. Obviamente que a imagem foi cortada durante a captura de tela, pois ela foi adicionada sem especificar seu tamanho e assumiu o tamanho total do arquivo na tela, ficando muito grande. Para determinarmos as dimensões de uma imagem, devemos configurar dois atributos que a tag imagem possui: width (largura) e height (altura). De maneira simplista esses dois atributos serão configurados hoje utilizando unidade de medidas em pixels (px), altere a sua tag imagem, inserindo os atributos width="400px" e height="450px" para que fique dessa forma:
Na próxima postagem aprenderemos um novo atributo da tag <img> que é utilizado entre outras coisas para que pessoas com deficiência visual possam saber do que trata uma imagem em um documento e também para que na ausência de uma imagem, seja por falha ou erro no arquivo, apareça um texto alternativo para o usuário.
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Minha Primeira Imagem</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Inserindo Imagens com a tag <img></h1>
<img src="https://cdn.pixabay.com/photo/2018/04/26/12/14/travel-3351825_1280.jpg" height="400px" width="450px">
</body>
</html>
Salve o documento e abra-o novamente no navegador, ou se já estiver com o documento aberto no navegador, atualize a página apertando f5 no teclado. Como pode verificar no print abaixo a imagem reduziu de tamanho:
 |
| Tamanho da imagem ajustado |
Na próxima postagem aprenderemos um novo atributo da tag <img> que é utilizado entre outras coisas para que pessoas com deficiência visual possam saber do que trata uma imagem em um documento e também para que na ausência de uma imagem, seja por falha ou erro no arquivo, apareça um texto alternativo para o usuário.
Por hoje é isso. Tem alguma dúvida? Envie um comentário. Pratique bastante os conceitos que aprendemos aqui pois só assim, você aprenderá. Bons estudos!
Comentários
Postar um comentário