< img > tag - Inserindo uma imagem em um site - O atributo src

Agora que aprendemos o que é uma imagem e conhecemos seus tipos mais usados, vamos de fato aprender como colocar imagens em um site, usando códigos em HTML.

Neste tutorial de nossa apostila de HTML, iremos colocar imagens em sites usando a tag <img> e seu principal atributo, o src.


A tag <img> - O que é e para que serve

Para colocar uma imagem em um site, vamos usar a tag <img> do HTML.
Através dela, vamos dizer ao HTML todas as informações da imagem que queremos exibir naquele documento.
Já essas informações serão informadas através dos mais diversos atributos que existem para essa tag.

Por exemplo, com o src iremos dizer onde está localizada a imagem.
Já com o alt iremos exibir um texto descrevendo a imagem.

Também podemos escolher o alinhamento da imagem (se em cima, na esquerda, direita etc).
Podemos definir a altura e largura de uma figura, ou até a transparência (caso seja GIF ou PNG).

Enfim, podemos manusear fotos e imagens através de uma infinidade de maneiras em HTML, tudo isso apenas da tag img.
Mas antes de fazer isso, precisamos entender como essa tag <img> funciona, pois ela é diferente das outras que estudamos até o momento em nosso curso de HTML.

Como funciona a <img> e os endereços de imagem

Diferente das outras tags, principalmente quando falamos sobre textos em HTML, essas tags simplesmente exibiam um conteúdo um texto, se mudava apenas a maneira na qual as informações eram exibidas.

Essa exibição e formatação ocorrem de maneira praticamente instantânea, pois é apenas uma interpretação de códigos que seu browser, com o auxílio dos modernos computadores de hoje, fazem rapidamente. Porém, com imagens não é assim, e por um motivo bem simples: o seu navegador não tem as informações da imagem de maneira instantânea.

Como explicamos no tutorial passado de nossa apostila de HTML sobre o que são imagens, elas possuem muito, mas muito mais informações que textos comuns. Ou seja, antes de exibir uma imagem em um site, o seu browser irá fazer um pedido ao servidor que está armazenando a imagem, e geralmente isso pode demorar.

Obviamente, demora bem mais que exibir um simples texto. É tanto que os primeiros elementos a serem exibidos numa página são os textos, só depois as imagens, pois os textos já vem embutido nos arquivos .html

E onde buscamos essas imagem? Da mesma maneira que buscamos os arquivos de HTML.
Quando queremos acessar a página de um site sobre PHP, estamos na verdade baixando o arquivo "tudo-sobre-PHP.html". Ele pode estar, por exemplo, na pasta principal do seu site sobre PHP:
http://www.sitedojoao.com.br/tudo-sobre-PHP.html

Ou seja, as páginas em HTML são arquivos de HTML com código, que são baixados e exibidos.
E aí que entra as imagens: elas também possuem um endereço, uma URL ou mesmo um endereço interno no seu computador.
Vamos supor que você criou a logomarca de seu site em PHP e salvou como "logo.png" e colocou na pasta principal. Seu endereço será:
http://www.sitedojoao.com.br/logo.png

Então, ao acessar essa URL, você está baixando as informações da imagem.
Essas imagens podem estar dentro de seu computador. Por exemplo, se guarda a sua foto na pasta de imagens do Windows, ela terá o endereço:
C:\Windows\usuarioZezinho\Imagens\Zezinho_na_balada.jpeg

Ou seja, se você colocar essa URL no seu código HTML, seu navegador vai até esse endereço e baixa essa imagem para exibir no seu site. Exatamente como faz com um arquivo do tipo .html






Como usar a tag <img> para exibir imagens e o atributo src

Antes de ensinarmos, de fato, como usar a tag <img>, vamos trabalhar com a seguinte imagem.
Clique com o botão direito em cima dela e salve com o nome que está "HTML-Progressivo.png" em sua pasta de estudos de HTML, onde salva os códigos-fonte de seus sites:

Apostila de HTML completa

Para testar como o endereço da imagem funciona como se fosse um endereço qualquer, digite no seu navegador o endereço da imagem e entre no 'site'.
Se estiver no Windows, ficará como: C:\Meus_Sites\HTML-Progressivo.png
Se for Linux, será algo como: /home/Meus_Sites/usuario/HTML-Progressivo.png

O resultado deverá ser o mesmo:

Entrando uma imagem pelo URL

Ou seja, acessamos um 'site' que tem somente nossa imagem.
Note que usamos somente a URL, o endereço da imagem. É a fonte da imagem.

Vamos usar essa informação, sobre a localização da imagem dentro da tag img, especificamente através do atributo src (de source, fonte em inglês).
Então, a sintaxe para usar a tag img com o atributo src é:

<img src="ENDEREÇO_DA_IMAGEM">

Simples, sem segredo.
Vamos criar alguns sites e usar nossa imagem.

Vamos criar um arquivo html, chamado index.html, onde iremos fazer nosso site, com título, tag meta description, <body>, <html>, <head>.e tudo mais que aprendemos até o momento.
Vamos colocar nossa imagem "HTML-Progressivo.png" na MESMA PASTA que esse arquivo em HTML.

Assim, o código HTML de nosso site para exibir essa imagem é:

<!DOCTYPE html>
 
<html>

  <head>
      <title> Usando a tag <img> </title>
      <meta name="description" content="Como usar uma imagem em um site">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
 
  <body>
      <img src="HTML-Progressivo.png">
  </body>

</html>

Pronto, você adicionou sua primeira imagem em seu site. Simples, não?
Agora experimente substituir "HTML-Progressivo.png" pelo endereço completo da imagem ( C:\ etc)
Verá a mesma coisa.

Organizando as imagens em uma pasta/diretório

O que os webmasters costumam fazer é criar uma pasta só de imagens, para não ficar tudo ali bagunçado na mesma pasta. E é isso que vamos fazer.

Dentro da pasta de seu site, crie uma outra chamada "imagens".
Agora coloque essa imagem dentro da pasta "imagens".
Sua hierarquia de arquivos e pastas deverá ficar assim:

Curso de HTML

Agora, mudamos apenas o conteúdo src para:
<img src="imagens\HTML-Progressivo.png"(se for Windows) ou
<img src="imagens/HTML-Progressivo.png">(se for Linux)

Essa é, sem dúvidas, a melhor maneira de se criar um site com imagens e vários arquivos.
Primeiro porque é necessário escrever pouco (não precisa do http://www...).
Depois, porque quando você for criar seus sites, você vai primeiro criar em seu computador, e só então passar para o servidor de hospedagem. Se você criar uma pasta chamada 'imagens' lá, o código de suas páginas em HTML será o mesmo.

Mas se tiver colocado, em seu computador, os endereços como: C:\site\imagens
Vai ter que mudar tudo, pois seus arquivos não vão mais estar em seu computador, e sim na internet.

Inserindo uma imagem da internet

Até o momento usamos nossas imagens, de dentro de nossas pastas de nossos computadores.
Mas o normal é que elas estejam disponíveis na internet, em outros sites.

Para o browser, não há a mínima diferença se você colocar o endereço interno de seu computador ou da internet. Claro, se estiver na sua máquina ele vai carregar de maneira praticamente instantânea.
Do resto, é exatamente igual.

Vamos ver isso na prática.
Entre na página sobre o Google, na Wikipedia: https://pt.wikipedia.org/wiki/Google
Lá, clique no logo (marca, símbolo) do Google, vai abrir uma página sobre a imagem, onde é possível obter a URL da imagem (bem como notar que é uma figura PNG com fundo transparente).
https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png

Vamos colocar esse endereço em nosso código HTML, no lugar de nossa figura interna.
Nosso código ficará assim:

<!DOCTYPE html>
 
<html>

  <head>
      <title> Usando a tag <img> </title>
      <meta name="description" content="Usando imagem de outros sites">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
 
  <body>
      <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png">
  </body>

</html>

Salve e abra seu index.html e veja a logo da Google carregando no site que você criou.

Exigindo duas ou mais figuras com a <img>

Com certeza a maioria dos sites possui muito mais de uma imagem.
Se for um portal de notícias, por exemplo, você verá dezenas de pequenas figuras na home page.

Vamos agora adicionar outra imagem em nosso site, através do código HTML usado.
Agora é hora de adicionarmos outra figura. Vamos colocar ao lado do logotipo do Google, o logo tipo da linguagem de programação PHP.

Mais uma vez acessamos a Wikipedia, na página sobre o PHP:  https://pt.wikipedia.org/wiki/PHP
Clicamos na imagem do logo. Abrirá uma página com diversos arquivos de imagem, com vários tamanhos e diferentes formatos.

Escolha o formato PNG e tamanho 200px. A URL da imagem é:
https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/PHP-logo.svg/200px-PHP-logo.svg.png
Vamos colocá-la em nosso código-fonte HTML, que vai ficar:

<!DOCTYPE html>
 
<html>

  <head>
      <title> Usando a tag <img> </title>
      <meta name="description" content="Usando imagens de outros sites">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
 
  <body>
      <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/PHP-logo.svg/200px-PHP-logo.svg.png">
  </body>

</html>

Veja que ficou uma imagem ao lado da outra, e apenas adicionamos outra tag <img> com outro atributo src. Note que vai começando a demorar para carregar seu site, pois antes seu navegador vai baixar as imagens.

E se não quisermos que elas ficam lado a lado?
Ué, usamos a tag de nova linha <br /> ou de parágrafo <p> </.p>:
Ou seja, troque:

<img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/PHP-logo.svg/200px-PHP-logo.svg.png">

Por:
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png">
<br />      
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/PHP-logo.svg/200px-PHP-logo.svg.png">


E verá que o logotipo do PHP ficou abaixo do Google.É fácil notar que estamos lidando com as imagens como se fossem outros elementos de HTML, que já estudamos.Vamos enfatizar isso mostrando como podemos colocar as imagens como fazendo parte de uma lista simples, nosso código, do trecho das tags <img> se torna:


<body>
    <ul>
      <li><img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png"> </li>
      <br />
      <li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/PHP-logo.svg/200px-PHP-logo.svg.png"> </li>
    </ul>
</body>


E verá que as imagens agora fazem parte de uma lista.

Exercícios sobre a tag <img>

1. Salve 3 fotos das suas 3 bandas favoritas e exiba elas em um site HTML.Tente usar as tags que aprendeu em nosso curso.

2. Agora escreva, em cima de cada uma dessas imagens o nome dela.Ou seja, no primeiro parágrafo bote o nome da banda, pule de linha e bote a foto através da <img>.Faça o mesmo para as outras duas bandas.


3. Coloque as fotos em uma lista enumerada.


4. Quando mostramos como colocar o logo da Google, dissemos que a imagem fornecida pela Wikipedia não tinha transparência e no tutorial passado explicamos sobre as imagens PNG sem transparêcia, que seu fundo é igual ao fundo do site.Então, no exemplo que fornecemos onde mostramos a figura do Google e do PHP, troque a cor de fundo do seu site. O que acontece com o fundo das imagens?




3 comentários:

Rebeca Lacerda de Oliveira disse...

Olá, boa noite.
Me chamo Rebeca e estou começando a aprender a programar e estou na fase de por imagens em html, porém, estou tendo dificuldades em colocar a imagem no "site". Mas não entendo onde posso estar errando já que a imagem e o link html estão na mesma pasta. Tentei pelo link da imagem (que não carrega) e pela fonte da imagem como a pasta e o nome da imagem, as duas formas dão no mesmo. A imagem aparece com o link "corrompido" não carrega.
Sou leiga no assunto ainda mas quero muito saber onde erro.
Obrigada e aguardo resposta.
Seu Blog é excelente.

Anônimo disse...

Tente criar uma pasta apenas para imagem. Depois você arrasta uma imagem para essa pasta, vamos supor que o nome dessa imagem esta Sol.png

Dessa maneira agora o codigo fica img src="imagem/Sol.png"

*note que imagem seria a pasta que criou e sol.png a imagem de fato*

Anônimo disse...

Obrigada mesmo