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.
Passos
-
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] X Fonte de pesquisa
- 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.
-
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.
-
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>
-
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.
-
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">
-
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] X Fonte de pesquisa 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] X Fonte de pesquisa
-
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
-
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] X Fonte de pesquisa 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] X Fonte de pesquisa [6] X Fonte de pesquisa
- 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.
-
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.">
-
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] X Fonte de pesquisa É 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] X Fonte de pesquisa
Publicidade
Referências
- ↑ http://www.htmlgoodies.com/primers/html/article.php/3478181
- ↑ http://www.htmlgoodies.com/primers/html/article.php/3478181
- ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
- ↑ http://www.htmlcodetutorial.com/images/_IMG_WIDTH.html
- ↑ http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
- ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
- ↑ http://www.htmlgoodies.com/primers/html/article.php/3478181
- ↑ http://www.webweaver.nu/html-tips/hotlinking.shtml
Publicidade