COMO ADICIONAR UMA IMAGEM NO HTML | CURSO HTML/CSS/JS

Channel:

Everton Dev

Subscribers:

5,530

Published on February 16, 2021 11:00:14 PM ● Video Link: https://www.youtube.com/watch?v=yUSEqfamytw

Game:

Counter-Strike: Source (2004)

Duration: 3:35

2,957 views

94

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 é https://meudominio.com e utilizando o exemplo anterior. Dessa forma, utilizaremos o seguinte código:

img src="https://meudominio.com/public_html/imagens/imagem.jpg"

Com isso, já estamos prontos para incluir qualquer imagem localmente a nossa página, utilizando o recurso HTML img.

Canal da Twitch: https://www.twitch.tv/evenusfi

📥 Me envie sua dúvida pelo Instagram: https://www.instagram.com/digitali.zando

📹 Se inscreva no canal
→ https://www.youtube.com/c/EvenusFi

📡 Siga a gente nas Redes Sociais
→ https://evertonfigueiredo.com.br/bio/

📸Instagram
→ https://www.instagram.com/digitali.zando

💻 Edição e Áudio: Digitalizando
🔗 Um vídeo do projeto Digitalizando

Other Statistics