AULA 4 - Inserindo imagem com HTML

•

UNIFCV

0

JACKSON SANTOS

19/02/2022

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Html

755 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

CONSTRUÇÃO DE PÁGINAS DA WEB - HTML
AULA 4 – Inserindo imagem na página com
HTML
Olá! Bem-vindo(a) ao curso sobre HTML. Este curso é destinado a quem quer criar uma página da web
simples. Utilizando a codificação e estrutura de HyperText Markup Language. Na aula de hoje aprederemos a
inserir imagens no esboço de página que está sendo criado.
Pensando nisso:
- Por onde costuma baixar imagens da internet, utiliza algum site ou página específica?
- Sabe a diferença entre imagem e Gifs, me conte da sua maneira?
- Quando vai acessar alguma página de internet, ou site você digita qual código primeiro ?
Já sabemos estruturar uma página agora vamos aprender a inserir
uma imagem, o que vamos precisar:
• Uma ou diversas imagens (e devem ser nos formatos .jpg, .png, .gif ou outros possíveis
formatos).
• Acesso ao servidor (nos quais os arquivos do site estão armazenados).
• Editor de arquivo HTML (pode ser um editor específico ou até mesmo um editor simples).
1º Passo: Baixar os arquivos (imagens)
Você deve baixar os arquivos necessários . Tanto os arquivos HTML ou PHP (dependendo do seu
site), bem como as imagens que você está planejando utilizar. Você pode fazer o upload de tudo no
mesmo arquivo ou você pode mover todas as imagens para uma pasta que pode ser facilmente
criada e nomeada como “imagens”, por exemplo.
Vai na internet e
busca as imagens
Escolha as imagens
que agrada
Salvar em uma pasta
chamada imagens
https://www.google.com/search?q=super+her
oi&tbm=isch&ved=
https://www.oficinadanet.com.br/post
/12323-por-dentro-do-google-
pesquisa-parte-1
https://www.oficinadanet.com.br/softw
ares/25039-porque-as-fotos-do-
android-ficam-na-pasta-dcim
Você deve saber o nome exato dos arquivos das imagens. Anote-as ou abra um diretório com as
imagens em uma nova aba. Aqui está um exemplo de como o Gerenciador de Arquivos se parece
no servidor com as imagens:
2º Passo — Verificando nomes de arquivos de imagens
Na imagem ao lado, preste atenção não ao nome do arquivo mas na
extensão (neste exemplo você vê os formatos .gif e .png, mas outro
formato muito popular é o .jpg). A extensão é tão importante quanto
o nome porque a imagem não vai carregar se a extensão não tiver
especificada corretamente. No próximo passo, vamos entender onde
o nome do arquivo é usado.
https://www.hostinger.com.br/tutoriais/como-inserir-imagem-html-no-
site?ppc_campaign=google_performance_max&gclid=Cj0KCQiA-
eeMBhCpARIsAAZfxZCFahvvcSxxcN_WF6xPHYdKMEvQ_4SS0-
_t0vb6K9FYvTsQWkldM9MaAiv0EALw_wcB
3º Passo — Editando o arquivo HTML
Abra o arquivo do seu site e navegue até a linha do arquivo onde você quer inserir a imagem no
HTML. Vamos usar a logo como exemplo neste tutorial. A logo do site é por padrão localizada no topo
da página então deve estar em uma das primeiras linhas do conteúdo do <body>.
Para inserir imagem no HTML utilize o código a seguir:
<img src="logo.jpg" alt="some text" width=60 height=40>
Nome da imagem
Significado de cada item
IMG: significa “imagem”: está tag informa ao navegador onde a imagem deve ser localizada no seu site.
SRC: significa “source” (origem): Este comando é inserido no comando IMG. O comando Source informa
ao navegador qual o caminho para a imagem. É recomendado armazenar as imagens em um diretório
chamado “imagens” ou “img”, por exemplo. Isso facilita a definir o caminho até as imagens.
logo.jpg é o nome da imagem. Você deve criar o nome completo da imagem como explicado no 2º Passo.
<img src="logo.jpg" alt="some text" width=60 height=40>
Significado de cada item
ALT: significa “alternate text”. Este texto será exibido quando a imagem não carregar por outros motivos, como a
conexão por exemplo.
“some text”: aqui você insere o texto que descreve a sua imagem.
WIDTH: indica a largura da sua imagem em pixels e pode variar de 1 a qualquer outro número. Mas claro que não
faz sentido configurar uma imagem com a largura superior à largura da tela do navegador.
HEIGHT: indica a altura das imagens em pixels. As regras seguem as mesmas da largura. A partir de 1 pixel e
que seja proporcional ao tamanho da tela do navegador do seu usuário.
<img src="logo.jpg" alt="some text" width=60 height=40>
Veja um exemplo de como deve ficar a estrutura
https://www.hostinger.com.br/tutoriais/como-inserir-imagem-html-no-site?ppc_campaign=google_performance_max&gclid=Cj0KCQiA-eeMBhCpARIsAAZfxZCFahvvcSxxcN_WF6xPHYdKMEvQ_4SS0-
_t0vb6K9FYvTsQWkldM9MaAiv0EALw_wcB
E agora ao visitar o seu site, você deve encontrar algo parecido com isso:
https://www.hostinger.com.br/tutoriais/como-inserir-imagem-html-no-site?ppc_campaign=google_performance_max&gclid=Cj0KCQiA-eeMBhCpARIsAAZfxZCFahvvcSxxcN_WF6xPHYdKMEvQ_4SS0-
_t0vb6K9FYvTsQWkldM9MaAiv0EALw_wcB
Finalização
Este é um jeito simples para inserir uma imagem HTML no seu site. Também é possível fazer isso
usando um arquivo de estilo em camadas, mas se esta é a sua primeira vez executando isso, o
HTML é o caminho mais fácil.
Imagens são elementos importantes na aparência e performance do seu site e por isso você deve
aprender a usar corretamente..
Referências
SANTOS, Marcel. Aprenda HTML, a linguagem da Web.Disponível em : <
https://pensandonaweb.com.br/aprendendo-html-a-linguagem-da-web/> Acesso em: 09 nov. 2021
G, Ariane. Inserindo imagens com HTML.Disponível em:
< https://www.hostinger.com.br/tutoriais/como-inserir-imagem-html-no-
site?ppc_campaign=google_performance_max&gclid> Acesso em: 17 nov. 2021
Atividade
Baixe um imagem e faça a
inserção no sua página já
construída no HTML
Exemplo: