Olhe para qualquer página da Internet online hoje e você notará que eles compartilham certas coisas em comum. Um desses traços compartilhados são as imagens. As imagens certas acrescentam muito à apresentação de um site. Algumas dessas imagens, como o logotipo de uma empresa, ajudam a marcar o site e conectar essa entidade digital à sua empresa física.
Como adicionar uma imagem a uma página da web usando HTML
Para adicionar uma imagem, ícone ou gráfico à sua página da web, você precisa usar a tag no código HTML da página. Você coloca o.
IMGtag em seu. HTML exatamente onde você deseja que o gráfico seja exibido. O navegador da web que está processando o código da página substituirá essa tag pelo gráfico apropriado assim que a página for visualizada. Voltando ao exemplo do logotipo da nossa empresa, aqui está como você poderia adicionar essa imagem ao seu site:
O Atributo SRC
Olhando para o código HTML acima, você verá que o elemento inclui dois atributos. Cada um deles é necessário para a imagem.
O primeiro atributo é o "src". Este é literalmente o arquivo de imagem que você deseja exibir na página. Em nosso exemplo, estamos usando um arquivo chamado "logo.png". Este é o gráfico que o navegador da web exibiria ao renderizar o site.
Você também notará que antes deste nome de arquivo, adicionamos algumas informações adicionais, "/ images /". Este é o caminho do arquivo. A barra inicial informa ao servidor para examinar a raiz do diretório. Em seguida, ele irá procurar por uma pasta chamada "imagens" e finalmente o arquivo chamado "logo.png". Usar uma pasta chamada "imagens" para armazenar todos os gráficos de um site é uma prática bastante comum, mas o caminho do arquivo seria alterado para o que for relevante para o seu site.
O Atributo Alt
O segundo atributo obrigatório é o texto "alt". Este é o "texto alternativo" que é mostrado se a imagem não carregar por algum motivo. Este texto, que em nosso exemplo diz "Logotipo da empresa", seria exibido se a imagem não carregasse. Por que isso aconteceria? Vários motivos:
- Caminho de arquivo incorreto
- Nome de arquivo incorreto ou erro ortográfico
- Erro de transmissão
- O arquivo foi excluído do servidor
Estas são apenas algumas possibilidades de por que nossa imagem especificada pode estar faltando. Nesses casos, nosso texto alternativo seria exibido.
Para que é usado o Alt Text?
O texto alternativo também é usado pelo software de leitura de tela para "ler" a imagem para um visitante com deficiência visual. Como eles não podem ver a imagem como nós, este texto permite que eles saibam o que é a própria imagem. É por isso que o texto alternativo é obrigatório e deve indicar claramente o que é a imagem!
Um mal-entendido comum sobre o texto alternativo é que ele se destina a fins de mecanismo de pesquisa. Isso não é verdade. Embora o Google e outros mecanismos de pesquisa leiam este texto para determinar o que é a imagem (lembre-se, eles também não podem "ver" sua imagem), você não deve escrever um texto alternativo para apelar apenas para a pesquisa motores. Texto alternativo claro do autor, destinado a humanos. Se você também pode adicionar algumas palavras-chave na tag que sejam atraentes para os mecanismos de pesquisa, tudo bem, mas sempre certifique-se de o texto alternativo está servindo ao seu propósito principal, declarando o que a imagem é para qualquer um que não possa ver os gráficos Arquivo.
Outros atributos de imagem
O.
IMG.
tag também tem dois outros atributos que você pode ver em uso ao colocar um gráfico em sua página da web - a largura e a altura. Por exemplo, se você usa um editor WYSIWYG como o Dreamweaver, ele adiciona automaticamente essas informações para você. Aqui está um exemplo:
O.
LARGURA.
e.
ALTURA.
atributos informam ao navegador o tamanho da imagem. O navegador então sabe exatamente quanto espaço no layout deve ser alocado e pode passar para o próximo elemento na página durante o download da imagem. O problema de usar essas informações em seu HTML é que nem sempre você deseja que sua imagem seja exibida nesse tamanho exato. Por exemplo, se você tiver um.
site responsivo
cujo tamanho muda com base na tela do visitante e no tamanho do dispositivo, você também deseja que suas imagens sejam flexíveis. Se você declarar em seu HTML qual é o tamanho fixo, achará muito difícil substituí-lo por responsivo.
Consultas de mídia CSS
. Por este motivo, e para manter uma separação de estilo (CSS) e estrutura (HTML), é recomendado que você NÃO adicione atributos de largura e altura ao seu código HTML.
Uma observação: se você deixar essas instruções de tamanho desativadas e não especificar um tamanho no CSS, o navegador mostrará a imagem em seu tamanho padrão de qualquer maneira.
Editado por Jeremy Girard