Contente

• Dar um passo
• Método 1 de 1: inserir imagens com HTML
• Pontas
• Avisos

Adicionar imagens ao seu site ou perfil de rede social é uma excelente maneira de enfeitar sua página da web. HTML (HyperText Markup Language) tem muitas funções para criar páginas da web, mas felizmente o código que você precisa para adicionar imagens não é muito difícil.

Dar um passo

Método 1 de 1: inserir imagens com HTML

1. Carregue sua imagem em um site de hospedagem gratuita, como Photobucket ou TinyPic, que permite links ativos. Hot-linking permite um link direto de uma imagem para o servidor do site; alguns provedores baniram isso porque o hot-linking usa sua largura de banda e ocupa espaço em seus servidores.
   • Se você tiver uma conta de hospedagem paga, envie as imagens diretamente para o servidor onde o seu site está colocado. Isso é sempre mais confiável do que um site gratuito e não precisa ser caro.
2. Abra um novo documento em um editor de texto (por exemplo,, Bloco de notas / Bloco de notas) ou abra a página em seu site / perfil onde você pode alterar o código HTML diretamente.
3. Comece com o img marcação. O img a tag está vazia, o que significa que nenhuma tag de fechamento é necessária. No entanto, para validação de XHTML você ainda pode colocar um espaço e uma barra na frente dele Maior que assinar.
   • img />
4. Existem muitos atributos disponíveis, mas apenas um é necessário:src. Esse é o local / endereço, ou também o URL, de sua imagem.
   • img src = "URL da imagem" />
5. Em seguida você tem que alt adicionar atributo. Isso mostra um texto alternativo, caso a imagem não carregue. Este também é um serviço para deficientes visuais que utiliza leitores de tela.
   • Se você passar o cursor sobre uma imagem, esse texto também será mostrado como uma dica de ferramenta, mas isso só acontece no Internet Explorer. A solução que funciona com todos os navegadores (Firefox et al.) é para isso título atributo para usar além de alt. (Você pode omitir o último se não quiser que a imagem tenha uma dica de ferramenta.)

Como um exemplo:img src = "URL da imagem" alt = "Just in case" title = "Dica de ferramenta" />

1. Agora você pode indicar o tamanho da imagem com o altura e largura atributo e especificando os pixels ou uma porcentagem. Observe que o redimensionamento dessa forma altera apenas o tamanho da visualização, não o tamanho da imagem em si. Para encurtar o tempo de carregamento de uma imagem, é melhor, especialmente com imagens grandes, redimensioná-las antecipadamente com um software de edição de fotos ou com um serviço online como o PicResize.com.
   • img src = "URL da imagem" alt = "Just in case" title = "Tooltip" height = "50%" width = "50%" />
   • img src = "URL da imagem" alt = "Just in case" title = "Tooltip" height = "25px" width = "50px" />

Pontas

• O valor para esses atributos é fornecido em pixels ou como uma porcentagem, de 1 a 100%.
• A imagem pode ser colocada em qualquer lugar da página da web, usando os vários atributos de formatação, como topo, base, meio, direita, esquerda, etc.
• O atributo hspace é usado para inserir espaço horizontal à esquerda e direita de uma imagem, enquanto o atributo vspace é usado para abrir espaço na parte superior e inferior de imagens e outros objetos.
• Não se entregue muito às imagens. Isso parece confuso e pouco profissional.
• Imagens GIF são adequadas para logotipos ou desenhos animados, mas esse tipo de arquivo é menos adequado para fotos e outras imagens com muitas cores.
  • As imagens GIF suportam apenas cores de 8 bits com um máximo de 256 cores para uma imagem. Portanto, é de se esperar que a reprodução de uma ilustração ou foto colorida de 16 ou 24 bits não seja tão boa.
  • Imagens GIF também suportam transparência. Um pouco de transparência é possível, o que significa que uma cor pode se tornar transparente.
  • O entrelaçamento também é suportado por imagens GIF, o que significa que o visitante do site terá uma ideia de como a imagem ficará antes de ser completamente carregada.
  • O formato GIF também oferece suporte a animação.
• Certifique-se de que o URL informe o formato de arquivo da imagem (.webp .gif etc.).

Avisos

• Não faça Hotlink!