Todas as imagens que você deseja vincular no seu site HTML deve primeiro ser carregado para o mesmo lugar para onde você envia o HTML da página da web, se o site estiver hospedado em um servidor da web que você acessa por FTP ou você usa um serviço de hospedagem na web. Se você usa um serviço de hospedagem na web, provavelmente usa um formulário de upload fornecido pelo serviço. Esses formulários normalmente estão na seção de administração de sua conta de hospedagem.
Carregar sua imagem para o serviço de hospedagem é apenas a primeira etapa. Em seguida, você precisa adicionar uma tag no HTML para identificá-lo.
Upload de imagens para o mesmo diretório do HTML
Suas fotos podem estar localizadas no mesmo diretório do HTML. Se esse é o caso:
- Faça upload de uma imagem na raiz do seu site.
- Adicione uma tag de imagem em seu HTML para apontar para a imagem.
- Faça upload do arquivo HTML para a raiz do seu site.
- Teste o arquivo abrindo a página em seu navegador da web.
A tag de imagem assume o seguinte formato:
Supondo que você esteja enviando uma foto da lua com o nome "lunar.jpg", a tag da imagem assume o seguinte formato:
A altura e a largura são opcionais, mas recomendadas. Esses valores padrão estão em pixels, mas também podem ser expressos como porcentagens:
A tag de imagem não requer uma tag de fechamento.
Se você estiver criando um link para uma imagem em outro documento, use marcas âncora e aninhe a marca da imagem dentro.
Upload de imagens em um subdiretório
É mais comum armazenar imagens em um subdiretório, geralmente chamado Imagens. Para apontar para imagens nesse diretório, você precisa saber onde ele está em relação à raiz do seu site.
A raiz do seu site é onde o URL, sem diretórios no final, é exibido. Por exemplo, para um site chamado "MyWebpage.com", a raiz segue este formulário: http://MyWebpage.com/. Observe a barra no final. É assim que a raiz de um diretório geralmente é indicada. Os subdiretórios incluem essa barra para mostrar onde estão na estrutura de diretórios. O site de exemplo MyWebpage pode ter a estrutura:
http://MyWebpage.com/ - o diretório raiz
http://MyWebpage.com/products/ - o diretório de produtos
http://MyWebpage.com/products/documentation/ - o diretório de documentação sob o diretório de produtos
http://MyWebpage.com/images/ - o diretório de imagens
Nesse caso, ao apontar para sua imagem no diretório de imagens, você escreve:
Isso é chamado de caminho absoluto à sua imagem.
Problemas comuns com imagens que não são exibidas
Fazer com que as imagens apareçam em sua página da web pode ser um desafio no início. Os dois motivos mais comuns são que a imagem não foi carregada para onde o HTML está apontando ou o HTML foi escrito incorretamente.
A primeira coisa a fazer é ver se você consegue encontrar sua imagem online. A maioria dos provedores de hospedagem possui algum tipo de ferramenta de gerenciamento que você pode usar para ver onde carregou suas imagens. Depois de achar que tem o URL correto para sua imagem, digite-o no navegador. Se a imagem aparecer, você tem o local correto.
Em seguida, verifique se o seu HTML está apontando para essa imagem. A maneira mais fácil de fazer isso é colar o imagem URL que você acabou de testar no atributo SRC. Reenvie a página e teste.
O atributo SRC de sua tag de imagem nunca deve começar com C: \ ou Arquivo: Eles parecerão funcionar quando você testar sua página da web em seu próprio computador, mas todos que visitarem seu site verão uma imagem corrompida. Isso ocorre porque C: \ aponta para um local em sua disco rígido. Como a imagem está em seu disco rígido, ela é exibida quando você a visualiza, mas não será para mais ninguém.