Baixe em PDFBaixe 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. How.com.vn Português: Step 1 Envie a imagem
    . 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. How.com.vn Português: Step 2 Abra seu arquivo HTML.
    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. How.com.vn Português: Step 3 Comece com a tag IMG.
    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. How.com.vn Português: Step 4 Encontre o endereço URL da sua imagem.
    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. How.com.vn Português: Step 5 Coloque o endereço URL dentro do atributo SRC.
    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. How.com.vn Português: Step 6 Adicione um atributo ALT.
    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="How.com.vn Português: 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="How.com.vn Português: "). [3]
  7. How.com.vn Português: Step 7 Salve as alterações.
    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. How.com.vn Português: Step 1 Altere o tamanho da imagem.
    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="How.com.vn Português: 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. How.com.vn Português: Step 2 Adicione uma dica de ferramenta.
    É 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. How.com.vn Português: Step 3 Crie um link na imagem.
    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 How.com.vn

O How.com.vn é uma "wiki"; ou seja, muitos de nossos artigos são escritos em parceria com várias pessoas. Para criar este artigo, 28 pessoas, algumas anônimas, editaram e melhoraram o texto desde sua criação. Este artigo foi visualizado 137 745 vezes.
Esta página foi acessada 137 745 vezes.

Este artigo foi útil?

⚠️ Disclaimer:

Content from Wiki How Português language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.

Notices:
  • - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
  • - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
  • - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
  • - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.

Publicidade