Código HTML e IMG SRC

Escrito por ben lingenfelter | Traduzido por camila rodrigues
  • Compartilhar
  • Tweetar
  • Compartilhar
  • E-mail

Mesmo que o HTML esteja na versão 5 no momento dessa publicação, o código IMG SRC não mudou muito desde a versão 1. Você ainda vincula imagens com tag "a href", e você conecta uma imagem em vez de texto com a tag "img src". Se você deseja redimensionar a imagem, há um lugar para isso na codificação. Se você quer uma borda, há espaço para isso também. Mas IMG SRC ainda é a tag de inserção de imagem básica.

Outras pessoas estão lendo

A tag IMG SRC

Quando você quiser adicionar uma imagem a uma página web, e você estiver editando usando HTML, você deve usar a tag IMG SRC. Ele deve se parecer com: <img src="image.jpg" />

Este é o modo mais simples de inserção de código de imagem. Normalmente, ele possui mais alguns atributos, como dimensões, qualquer tipo de link, uma legenda "hover" ou alinhamento. Você também pode substituir uma URL pelo nome da imagem, se a imagem que você gostaria de exibir não estiver armazenada no gerenciador de arquivos. Nesse caso, o código de imagem seria <img src="http://www.site.com/image.jpg" />

Adicionando dimensões à imagem

Para adicionar dimensões a uma imagem que pode ser muito grande para se colocar no site, você precisa adicionar dimensões (em pixels) para a tag de imagem: <img src="image.jpg" height=200 width=300 />

Tente certificar-se de que as dimensões que você deu a imagem são proporcionais ao original. Se você não tomar cuidado para manter proporção, sua imagem vai acabar ficando borrada e esticada.

Vinculando a imagem

Para adicionar um link a uma imagem, você tem que adicionar uma tag <a href>. A imagem vinculada seria codificada assim: <a href="link URL"> <img src="image.jpg" height=200 width=300 /> </a>

A tag <a href> funciona para qualquer hiperlink, por isso, se você deixou de fora o código IMG SRC e digitou algum texto onde ele aparece em cima, o texto estaria ligado, não a imagem. Ela ficaria assim: <a href="link URL"> TEXT </a>

ALT adicionado à tag IMG

Uma adição comum a tag IMG SRC é a alt, que significa "alternativa". No código, que geralmente aparece no final da lista de atributos, como este: <img src="image.jpg" height=200 width=300 alt="image name" />. Assim, se a sua imagem não carregar, um texto será exibido com o ícone de imagem quebrada, e o nome da imagem aparecerá. A vantagem de fazer isso é que, em vez de apenas um ícone de imagem quebrada, os visitantes do site, pelo menos, saberão o nome da imagem.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível