Programação acompanhada: crie uma página web simples
Siga instruções passo a passo para criar uma página divertida
Programação acompanhada: crie uma página web simples é uma aula grátis de HTML for Kids no CoddyKit. Esta é a aula 1 de 2. 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 2 aulas no total.
Criando sua primeira página web
Programação guiada: crie uma página web simples
Boas-vindas ao seu primeiro projeto de programação! Nesta lição, criaremos uma página web simples passo a passo. Acompanhe para ver como as partes de HTML, CSS e design básico se combinam.
Objetivo: Criar uma página de perfil pessoal.
Configurando seu arquivo
Etapa 1: configurando seu arquivo
Primeiro, vamos criar uma pasta para o seu projeto e adicionar um arquivo HTML:
- Crie uma nova pasta no seu computador chamada MyWebPage.
- Dentro da pasta, crie um arquivo chamado
index.html. - Abra o arquivo no seu editor de código (por exemplo, o Visual Studio Code).
Dica: O nome de arquivo index.html é normalmente usado para a página principal de um site.
Adicionando a estrutura básica
Etapa 2: adicionando a estrutura básica
Agora, adicione a estrutura básica de HTML ao seu arquivo. Ela inclui as tags <!DOCTYPE html>, <html>, <head> e <body>.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>My Profile Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
</body>
</html>
Adicionando uma seção de perfil
Etapa 3: adicionando uma seção de perfil
Vamos adicionar uma seção para exibir seu nome e uma breve descrição.
Exemplo:
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
<!-- Profile Section -->
<h2>About Me</h2>
<p>Hi, I’m [Your Name]. I’m learning web development, and this is my first project!</p>
</body>
Adicionando uma imagem
Etapa 4: adicionando uma imagem
Em seguida, vamos adicionar uma foto de perfil usando a tag <img>. Salve uma imagem na pasta do projeto e vincule-a ao seu arquivo HTML.
Exemplo:
<!-- Profile Picture -->
<img src="profile.jpg" alt="My Profile Picture" width="200" />
Adicionando uma lista de hobbies
Etapa 5: adicionando uma lista de hobbies
Crie uma lista não ordenada dos seus hobbies usando as tags <ul> e <li>.
Exemplo:
<!-- Hobbies Section -->
<h2>My Hobbies</h2>
<ul>
<li>Reading books</li>
<li>Playing video games</li>
<li>Coding projects</li>
</ul>
Adicionando um link
Etapa 6: adicionando um link
Adicione um link para seu site favorito usando a tag <a>.
Exemplo:
<!-- Favorite Website -->
<h2>My Favorite Website</h2>
<p>Check out my favorite website: <a href="https://example.com" target="_blank">Example</a>.</p>
Adicionando estilos em linha
Etapa 7: adicionando estilos em linha
Vamos adicionar alguns estilos básicos diretamente ao seu HTML usando o atributo style.
Exemplo:
<h1 style="color: blue; text-align: center;">Welcome to My Page</h1>
<p style="font-size: 16px; color: gray;">This is my personal profile page.</p>
Recapitulação do projeto de página web
Parabéns!
Parabéns! Você criou sua primeira página web passo a passo. Neste projeto, aprendeu a estruturar seu HTML, adicionar conteúdo e aplicar estilos em linha. Continue experimentando e adicionando novas seções à sua página!
Dica: Experimente hospedar sua página no GitHub Pages para compartilhá-la com seus amigos!
Perguntas Frequentes
A aula “Programação acompanhada: crie uma página web simples” é grátis?
Sim — o texto completo de “Programação acompanhada: crie uma página web simples” é 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 2 aulas no total.
O que vou aprender em “Programação acompanhada: crie uma página web simples”?
Siga instruções passo a passo para criar uma página divertida 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 1 de 2.
Quanto tempo leva a aula “Programação acompanhada: crie uma página web simples”?
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
- Programação acompanhada: crie uma página web simples
- Caça ao tesouro no HTML