Como Inserir Imagens Usando HTML

Baixe em PDF
Baixe em PDF

Adicionar imagens a um site ou perfil de alguma rede social é uma excelente maneira de melhorar o aspecto visual da página. O código HTML (Linguagem de Marcação de Hipertexto) para adicionar imagens é bastante simples e geralmente é o primeiro a ser aprendido por um estudante de HTML.

Parte 1
Parte 1 de 2:

Inserindo a imagem

Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/59\/Insert-Images-with-HTML-Step-1-Version-10.jpg\/v4-460px-Insert-Images-with-HTML-Step-1-Version-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/59\/Insert-Images-with-HTML-Step-1-Version-10.jpg\/v4-728px-Insert-Images-with-HTML-Step-1-Version-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    . Atualmente, existem diversos serviços gratuitos de hospedagem de imagens, como o Picasa Web Albums, Imgur, Flickr ou o Photobucket. Leia atentamente os termos de uso de cada um deles. Alguns desses serviços podem reduzir qualidade da imagem enviada ou removê-la após ela atingir um determinado número de visualizações (isso ocorre porque as imagens ocupam espaço nos servidores dessas empresas).
    • Alguns dos serviços de hospedagem de blogs permitem que o usuário envie imagens usando ferramentas próprias de administração do blog.
    • Caso você seja assinante de um serviço de hospedagem pago, envie as imagens para seu próprio site usando um serviço de FTP (Protocolo de Transferência de Arquivos). É recomendada a criação de um diretório "imagens" para manter a organização dos seus arquivos. [1]
    • Caso queira utilizar uma imagem de outro site, peça permissão ao criador dela. Se o pedido for concedido, baixe e envie a imagem para um site de hospedagem de imagens.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/40\/Insert-Images-with-HTML-Step-2-Version-8.jpg\/v4-460px-Insert-Images-with-HTML-Step-2-Version-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/40\/Insert-Images-with-HTML-Step-2-Version-8.jpg\/v4-728px-Insert-Images-with-HTML-Step-2-Version-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Abra o documento HTML correspondente à página web na qual a imagem será exibida.
    • Caso sua intenção seja inserir uma imagem em um fórum, basta digitar o código diretamente no seu post. Vários fóruns de internet utilizam um sistema customizado em vez de HTML. Caso isso não funcione, peça ajuda aos demais usuários.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c7\/Insert-Images-with-HTML-Step-3-Version-8.jpg\/v4-460px-Insert-Images-with-HTML-Step-3-Version-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c7\/Insert-Images-with-HTML-Step-3-Version-8.jpg\/v4-728px-Insert-Images-with-HTML-Step-3-Version-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Encontre o local no corpo do arquivo HTML no qual você deseja inserir uma imagem. Escreva a tag <img>. Essa é uma tag vazia, ou seja, ela não possui uma tag de fechamento. Tudo o que for necessário para exibir uma imagem precisa ir dentro dos dois colchetes.
    • <img>
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d2\/Insert-Images-with-HTML-Step-4-Version-9.jpg\/v4-460px-Insert-Images-with-HTML-Step-4-Version-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d2\/Insert-Images-with-HTML-Step-4-Version-9.jpg\/v4-728px-Insert-Images-with-HTML-Step-4-Version-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Visite a página da internet na qual você hospedou a imagem. Clique com o botão direito do mouse na imagem (no Mac, segure a tecla Control e clique com o mouse) e selecione "Copiar endereço da imagem". Se preferir, clique em "Visualizar imagem" para abri-la sozinha em uma página e copie a URL na barra de endereços.
    • Caso você tenha enviado a imagem ao diretório de imagens do seu próprio site, crie um link para ela da seguinte forma /imagens/ onomedoseuarquivoaquii . Caso não funcione, é provável que o diretório de imagens esteja em outra pasta. Mova-o para o diretório raiz.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3d\/Insert-Images-with-HTML-Step-5-Version-7.jpg\/v4-460px-Insert-Images-with-HTML-Step-5-Version-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3d\/Insert-Images-with-HTML-Step-5-Version-7.jpg\/v4-728px-Insert-Images-with-HTML-Step-5-Version-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Você provavelmente já sabe que os atributos HTML são colocados dentro de tags para modificá-lo. O atributo SRC significa "fonte", e é ele quem informa ao navegador onde procurar para encontrar a imagem. Escreva src=" " e cole o endereço URL da imagem dentro das aspas. Veja um exemplo:
    • <img src="http://www.exemplodesitedeimagens.com/meu-cachorro.jpg">
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/26\/Insert-Images-with-HTML-Step-6-Version-6.jpg\/v4-460px-Insert-Images-with-HTML-Step-6-Version-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/26\/Insert-Images-with-HTML-Step-6-Version-6.jpg\/v4-728px-Insert-Images-with-HTML-Step-6-Version-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tecnicamente falando, o HTML tem tudo o que é necessário para exibir uma imagem. No entanto, é melhor adicionar o atributo alt também. Ele informa ao navegador de internet o texto que vai ser exibido quando a imagem não puder ser carregada. Mais importante ainda, isso ajuda os motores de busca a descobrirem aproximadamente o conteúdo de sua imagem, permitindo que os leitores de tela descrevam a imagem aos visitantes com deficiência visual. [2] Siga o exemplo abaixo e mude o texto de dentro das aspas:
    • <img src="http://www.exemplodesitedeimagens.com/meu-cachorro.jpg" alt="meu cachorro comendo banana">
    • Caso a imagem não seja importante ao conteúdo da página, adicione o atributo ALT sem texto dentro dele (alt=""). [3]
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7e\/Insert-Images-with-HTML-Step-7-Version-5.jpg\/v4-460px-Insert-Images-with-HTML-Step-7-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7e\/Insert-Images-with-HTML-Step-7-Version-5.jpg\/v4-728px-Insert-Images-with-HTML-Step-7-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Salve o arquivo HTML do site. Acesse a página que você acabou de editar ou atualize-a, caso ela já esteja aberta. A imagem deverá ser exibida. Se ela estiver em no tamanho errado ou apresentar algum outro problema, siga para a próxima seção.
    Publicidade
Parte 2
Parte 2 de 2:

Ajustes opcionais

Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/06\/Insert-Images-with-HTML-Step-8-Version-6.jpg\/v4-460px-Insert-Images-with-HTML-Step-8-Version-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/06\/Insert-Images-with-HTML-Step-8-Version-6.jpg\/v4-728px-Insert-Images-with-HTML-Step-8-Version-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para obter melhores resultados, basta usar um software de edição de imagens para redimensioná-las e, em seguida, enviar a nova versão. Defina os atributos width (largura) e height (altura) do HTML para que o navegador diminua ou aumente a imagem, o que pode ser inconsistente em diversos navegadores de internet e até mesmo causar erros de exibição (raramente). [4] Caso queira fazer um ajuste rápido e funcional, use o seguinte formato:
    • <img src="http://exemplo.com/exemplo.png" alt="mostrar imagem" width=200 height=200> (Número de pixels, ou "CSS pixels", no HTML5.) [5] [6]
    • Ou <img src="exemplo.com/exemplo.png" width=100% height=10%> (Porcentagem da dimensão da página web ou da imagem.)
    • Se você introduzir somente um dos dois atributos (largura ou altura), o navegador deverá preservar a proporção largura:altura.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/68\/Insert-Images-with-HTML-Step-9-Version-6.jpg\/v4-460px-Insert-Images-with-HTML-Step-9-Version-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/68\/Insert-Images-with-HTML-Step-9-Version-6.jpg\/v4-728px-Insert-Images-with-HTML-Step-9-Version-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    É possível utilizar o atributo title (título) para adicionar um comentário extra ou alguma informação sobre a imagem. Por exemplo, você pode utilizá-lo para dar créditos ao autor da foto. Geralmente, este texto é exibido sempre que um visitante passa o cursor sobre a imagem.
    • <img src="http://exemplo.com/exemplo.png" title="Fotografado por Max G.">
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/36\/Insert-Images-with-HTML-Step-10-Version-5.jpg\/v4-460px-Insert-Images-with-HTML-Step-10-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/36\/Insert-Images-with-HTML-Step-10-Version-5.jpg\/v4-728px-Insert-Images-with-HTML-Step-10-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para fazer com que a imagem também seja um link, insira o código da imagem dentro da tag de link <a></a> . Veja um exemplo:
    • <a href="http://www.urldaimagem.com><img src="http://urldaimagem.com/imagem.gif"></a>
    Publicidade

Dicas

  • Não se esqueça de incluir a extensão da imagem (.jpg, .gif, etc) na URL.
  • As imagens GIF funcionam bem para logotipos ou desenhos animados; as imagens JPEG funcionam bem para imagens complexas, como fotografias.
  • Na maioria dos casos, é aconselhável que você use imagens com os formatos .gif, .jpeg, .jpg ou .png. [7] É provável que outros formatos não sejam exibidos corretamente em todos os navegadores.
  • Mantenha uma cópia de segurança da imagem em seu computador, somente por precaução.
Publicidade

Avisos

  • Não use imagens inserindo a URL do site de outra pessoa. Isso consome a banda de internet dessa pessoa sem gerar quaisquer visitas ao site dela. Além de ser antiético, a imagem desaparecerá se o site original dela sair do ar. Se o autor da página descobrir, ele pode até mesmo alterar a imagem que aparece no seu site. [8]
Publicidade

WikiHows Relacionados

Como
Inserir Espaços no HTML
Como
Definir a Largura e Altura de uma Imagem Usando HTML
Como
Ativar o WebGL
Como
Configurar Cores de Fundo em HTML
Como
Mudar a Cor do Texto em HTML
Como
Centralizar uma Imagem em HTML
Como
Criar uma Wiki
Como
Centralizar Texto no HTML
Como
Alterar a Cor de um Botão em HTML
Como
Definir um Plano de Fundo em HTML
Como
Abrir Arquivos HTML
Como
Executar um Servidor Web em Seu Computador
Como
Instalar o XAMPP para Windows
Como
Criar um Feed RSS
Publicidade

Referências

  1. ↑ http://www.htmlgoodies.com/primers/html/article.php/3478181
  2. ↑ http://www.htmlgoodies.com/primers/html/article.php/3478181
  3. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
  4. ↑ http://www.htmlcodetutorial.com/images/_IMG_WIDTH.html
  5. ↑ http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
  6. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
  7. ↑ http://www.htmlgoodies.com/primers/html/article.php/3478181
  8. ↑ http://www.webweaver.nu/html-tips/hotlinking.shtml

Sobre este guia wikiHow

Em outras línguas
Esta página foi acessada 139 651 vezes.

Este artigo foi útil?

Publicidade