PDF download Baixe em PDF PDF download 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

PDF download Baixe em PDF
  1. . 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. 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. 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. 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. 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. 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. 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

PDF download Baixe em PDF
  1. 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. É 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. 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

Sobre este guia wikiHow

Esta página foi acessada 141 937 vezes.

Este artigo foi útil?

Publicidade