Nessa aula vamos ver como adicionamos uma imagem no nosso html, para isso utilizamos a tag img, vamos lá ver como funciona?
Logo no inicio da web, as páginas continham apenas conteúdos de textos e links. Isso tornava os conteúdos um tanto quanto limitados e monótonos. Não demorou muito para serem criados recursos de inclusão de imagens nas páginas. No HTML, a tag responsável pela inserção de imagens é a tag img. Porém, o HTML tecnicamente não faz a inclusão da imagem em si, o que ele faz é linkar a imagem para a página, de forma que ela seja aberta como se estivesse inserida na mesma, parecido com o processo da tag link. Dessa forma, podemos adicionar imagens tanto localmente quanto de forma global, ou seja, através de uma URL externa ao domínio principal. Além disso, também é importante reforçar que a tag img não possui uma tag de fechamento e traz consigo o padrão de display inline-block do CSS além de ajuste de largura e altura no padrão automático.
Inserindo imagem localmente através do HTML img
Para inserir uma imagem no HTML basta utilizar a tag img com o atributo src. Ou seja: o atributo src, ou source, vai conter a url da imagem que será inserida.
Diante disso, a sintaxe final será:
img src="url"
Para inserir uma imagem local, podemos apenas incluir o nome da imagem com sua extensão, como no exemplo abaixo:
img src="imagem.jpg"
Se ela estiver contida dentro de uma pasta local, nós devemos referenciar a pasta também. Por exemplo, se minha página principal está contida na pasta public_html e dentro dela temos uma pasta chamada imagens, onde está a nossa imagem, utilizaremos a seguinte url:
img src="imagens/imagem.jpg"
Agora digamos que temos uma pasta public_html onde dentro dela temos as pastas imagens e pages, onde a nossa página esta dentro da pasta pages e a imagem está dentro da pasta imagens. Dessa forma, utilizamos ../ para poder voltar uma pasta e assim entrar na pasta que queremos.
img src="../imagens/imagem.jpg"
Por outro lado, podemos ainda incluir a url completa da nossa imagem. Digamos que nosso domínio é meudominio.com e utilizando o exemplo anterior. Dessa forma, utilizaremos o seguinte código:
img src="meudominio.com/public_html/im..."
Com isso, já estamos prontos para incluir qualquer imagem localmente a nossa página, utilizando o recurso HTML img.
Canal da Twitch: / evenusfi
📥 Me envie sua dúvida pelo Instagram: / digitali.zando
📹 Se inscreva no canal
→ / evenusfi
📡 Siga a gente nas Redes Sociais
→ evertonfigueiredo.com.br/bio/
📸Instagram
→ / digitali.zando
💻 Edição e Áudio: Digitalizando
🔗 Um vídeo do projeto Digitalizando
15 фев 2021
