Imagens: adicionando imagens à sua página
Insira e formate imagens na sua página web
Imagens: adicionando imagens à sua página é uma aula grátis de HTML for Kids no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML for Kids, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML for Kids inclui 4 aulas no total.
Imagens: adicionando imagens à sua página
Boas-vindas à próxima lição! Hoje, aprenderemos a adicionar imagens às suas páginas da Web. As imagens tornam suas páginas mais envolventes e divertidas!
O que são imagens em HTML?
As imagens são adicionadas às páginas da Web usando a tag <img>. Essa é uma tag autocontida, ou seja, não precisa de uma tag de fechamento como </img>.
Vamos aprender a usá-la!
Adicionando uma imagem
Para adicionar uma imagem, use o atributo src para especificar a localização do arquivo de imagem.
Exemplo:
Neste exemplo:
src: Especifica o arquivo de imagem.alt: Fornece um texto alternativo caso a imagem não possa ser exibida.
<img src="https://www.w3.org/html/logo/img/html5-display.png"
alt="A beautiful view" />
Texto alternativo (atributo alt)
O atributo alt descreve a imagem. Ele é importante para a acessibilidade e ajuda os mecanismos de pesquisa a entenderem sua imagem.
Exemplo:
Se a imagem não for carregada, o texto "A beautiful sunset over the ocean" será exibido no lugar dela.
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A beautiful sunset over the ocean" />
Adicionando dimensões à imagem
Você pode controlar o tamanho da imagem usando os atributos width e height.
Exemplo:
Neste exemplo, a imagem fica com 300 pixels de largura e 200 pixels de altura.
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A red flower" width="300" height="200" />
Transformando imagens em links
Você pode transformar uma imagem em um link clicável colocando-a dentro de uma tag <a>.
Exemplo:
Quando a imagem for clicada, o usuário será levado a https://example.com.
<a href="https://example.com">
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Example Logo" />
</a>
Usando imagens on-line
Você pode usar imagens hospedadas on-line especificando a URL delas no atributo src.
Exemplo:
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Online Image" />
Experimente você mesmo
Vamos criar uma página da Web simples com imagens. Veja um exemplo:
<!DOCTYPE html>
<html>
<head>
<title>My Image Page</title>
</head>
<body>
<h1>Welcome to My Gallery</h1>
<img src="cat.jpg" alt="A cute cat" width="400" />
<p>This is my adorable cat!</p>
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A playful dog" />
<p>This is a friendly dog from the internet!</p>
</body>
</html>
Muito bem!
Parabéns! Você aprendeu a adicionar imagens às suas páginas da Web, definir suas dimensões e até mesmo vinculá-las a outras páginas. As imagens tornam suas páginas da Web mais interessantes e visualmente atraentes. Na próxima lição, aprenderemos a criar tabelas para organizar dados. Prepare-se para deixar suas páginas ainda mais funcionais!
Perguntas Frequentes
A aula “Imagens: adicionando imagens à sua página” é grátis?
Sim — o texto completo de “Imagens: adicionando imagens à sua página” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML for Kids, atualize para CoddyKit PRO. O curso de HTML for Kids inclui 4 aulas no total.
O que vou aprender em “Imagens: adicionando imagens à sua página”?
Insira e formate imagens na sua página web Você pratica HTML for Kids com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML for Kids?
Nenhuma experiência prévia é necessária. HTML for Kids no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Imagens: adicionando imagens à sua página”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML for Kids?
Sim. Cada aula de HTML for Kids inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Títulos e parágrafos
- Listas: ordenadas e não ordenadas
- Links: conectando a Web
- Imagens: adicionando imagens à sua página