Qualquer imagem que você deseja vincular no HTML do seu site devem primeiro ser carregadas no mesmo lugar para o qual você enviou o HTML da página da web, se o site estiver hospedado em um servidor da web que você acessa por FTP ou se você usar 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 suas imagens para o serviço de hospedagem é apenas a primeira etapa. Em seguida, você precisa adicionar uma tag no HTML para identificá-lo.
Upload de um imagem 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:
<img src = "url da imagem" height = "xxx" largura = "yyy" alt = "text" />
Supondo que você esteja enviando uma foto da lua com o nome “lunar.jpg”, a tag da imagem assume o seguinte formato:
<img src = "images / lunar.jpg" height = "500" largura = "500" alt = "lua" />
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:
<img src = "images / lunar.jpg" height = "50%" alt = "lua" />
A tag de imagem não requer uma tag de fechamento.
Se você estiver criando um link para as imagens em outro documento, use marcas âncora e aninhe a marca da imagem dentro.
<a href="link url"> <img src = "url da imagem" height = "xxx" width = "yyy" alt = "text" /> </a>
Upload de imagens em um subdiretório
É mais comum armazenar imagens em um subdiretório, geralmente chamado de 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 denominado “minhapagina.com”, a raiz segue este formato: http://minhapagina.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 MinhaPagina pode ter a estrutura:
- o diretório raiz http://minhapagina.com/products/ - o diretório de produtos - o diretório de documentação sob o diretório de produtos http: // minhapagina.com/images/ - o diretório de imagens
Nesse caso, ao apontar para suas imagens no diretório de imagens, você escreve:
<img src = "http://minhapagina.com/images/lunar.jpg" height = "500" alt = "moon" />
Isso é chamado de caminho absoluto para suas imagens.
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 suas imagens, 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 URL da imagem que você acabou de testar no atributo SRC. Faça o upload da página novamente 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 seu 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.
