Aprenda a criar e adicionar um favicon personalizado em poucos passos. Descubra como esse pequeno ícone pode fazer toda a diferença na identidade da sua marca.
Para inserir um imagem em um site é usado a tag em html <img> e inserido o local onde essa imagem se encontra entre as aspas do src ficando algo assim:
<img src="caminho da imagem">
O caminho da imagem pode ser um diretório no computador(nesse caso só ira funcionar na máquina local), no servidor onde o site está hospedado ou no host de outro site.
Normalmente na estrutura do site é criado um diretório para receber as imagens com o nome de img, image ou imagens que pode ser na raiz do site ou no diretório assets. Isso é um padrão não é obrigatório.
Veja abaixo alguns exemplos:
imagem no mesmo diretório do arquivo html sendo usado, pode ser no computador local ou servidor:
<img src="nome-da-imagem.jpg" >
Imagem em hospedada em outro site:
<img src="http://www.outro-site.com.br/imagens/nome-da-imagem.jpg">
Imagem hospedada no diretório em uma camada mais para dentro:
<img src="..assets/assets/nome-da-imagem.jpg">
Imagem localizada em um diretório mais abrangente do site.
<img src="../../img/nome-da-imagem.jpg">
Nesse último exemplo é usado dois pontos ".." e depois barra "/" para voltar do diretório que está o arquivo. Veja mais em como navegador por pastas no terminal ou arquivos.
Note pelos exemplos que as tags img não são fechadas isso ocorre porque quando o elemento não tem filiação não precisa sem fechado. Ou seja a tag img não recebe outros elementos apenas outras tags dentro dela mesmo.
Outras tags que são usadas junto com as imagens normalmente e são muito importantes serem preenchidas, mas não obrigatórias são as tags alt e title que servem para descrever as imagens. Cada uma das duas tags tem sua finalidade.
Esse é o básico para se inserir uma imagem no site, mas pode ser muito mais aprimorado como por exemplo: saber o melhor tamanho de imagens para usar no site, redimensionar imagens com html, tratar o tamanho das imagens com css, usar link em imagem, usar imagem de fundo, trabalhar melhor imagens para ter melhor resultado em seo, saber para que serve a tag alt em imagens, ou para que serve a tag title em imagens, usar filtro css para tratar imagens, inverter cor de imagens com css...
Aprenda a criar e adicionar um favicon personalizado em poucos passos. Descubra como esse pequeno ícone pode fazer toda a diferença na identidade da sua marca.
É o adiamento e eventualmente dispensa do carregamento de imagens que o usuário não irá visualizar imediatamente. Serve para melhorar a experiência de usuários com internet ruim e assim otimizar o SEO.
Vamos desvendar juntos como essas linguagens fundamentais se combinam para criar não apenas estética visual, mas também uma presença online otimizada e impactante.
Explore as infinitas possibilidades de design no HTML, desvendando os segredos das cores que cativam visitantes e elevam seu site nos rankings de busca.
Descubra o poder oculto por trás da codificação HTML: desde a elegância dos caracteres especiais até a versatilidade das entidades, elementos, números e símbolos.
Desvende os truques do espaçamento em HTML e CSS com esta lista imperdível de 10 itens. A surpresa do número 6 vai redefinir suas noções de design web!