Guia Explicativo: Aprendendo a
Programar com HTML e Bootstrap
Este material tem como objetivo ensinar, de forma clara e passo a passo, como dar os
primeiros passos na programação de páginas web utilizando HTML e Bootstrap.
1. O que significa programar para a web?
Programar para a web é criar sites e aplicações que funcionam em navegadores de internet,
como o Google Chrome ou Firefox. Para isso, utilizamos algumas linguagens específicas:
- HTML: Define o conteúdo e a estrutura da página (textos, imagens, títulos, listas, etc.).
- CSS: Define o estilo visual da página (cores, tamanhos, espaçamentos).
- Bootstrap: É uma biblioteca de CSS pronta que nos ajuda a estilizar com mais rapidez.
2. Começando com HTML
O HTML (HyperText Markup Language) funciona como a base de qualquer página web. Ele
organiza o que será exibido, como um esqueleto.
Estrutura básica de um arquivo HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Minha Página</title>
</head>
<body>
<!-- Conteúdo da página vai aqui -->
</body>
</html>
Algumas tags importantes:
- <h1> até <h6>: títulos (do maior ao menor)
- <p>: parágrafo
- <img src="caminho-da-imagem">: imagem
- <a href="link">: link
- <div>: divisão de conteúdo (muito usada para organização)
3. Usando o editor de código VS Code
O Visual Studio Code (VS Code) é um programa gratuito onde vamos digitar nosso código.
Etapas:
1. Instale o VS Code.
2. Crie uma pasta chamada "meu-projeto".
3. Dentro dela, crie os arquivos [Link] e [Link].
4. Abra a pasta no VS Code.
5. Instale a extensão Live Server para visualizar a página no navegador.
4. O que é o Bootstrap?
O Bootstrap é um conjunto de estilos prontos que facilita a construção de sites bonitos e
responsivos (que funcionam bem em diferentes tamanhos de tela).
Exemplo de uso de classe Bootstrap:
<div class="container text-center">
<h1 class="text-primary">Bem-vindo!</h1>
</div>
Algumas classes comuns:
- container: adiciona margens automáticas
- text-center: centraliza o texto
- col-md-4: cria colunas (layout responsivo)
- card: cria um cartão visual com imagem e texto
5. Criando a estrutura da página
1. Dentro da tag <body>, comece com um <header>:
<header class="container text-center">
<img src="img/[Link]" class="rounded-circle" width="150">
<h1>Meu Primeiro Site</h1>
<p class="lead">Aprendendo a programar com HTML e Bootstrap!</p>
</header>
2. Crie a seção principal com <main>:
<main class="container">
<h2>Meus Projetos</h2>
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="img/[Link]" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Projeto 1</h5>
<p class="card-text">Descrição do projeto</p>
</div>
</div>
</div>
</div>
</main>
6. Visualizando a página com Live Preview
- Clique com o botão direito sobre o arquivo [Link] no VS Code
- Escolha a opção "Open with Live Server"
- Uma nova aba abrirá no seu navegador mostrando a página
7. Dicas Finais
- Nomeie seus arquivos com letras minúsculas e sem espaços (ex: [Link], minha-
[Link])
- Mantenha as imagens organizadas em uma pasta "img"
- Teste cada alteração no navegador
- Use a documentação do Bootstrap para explorar novas possibilidades: [Link]
- Não desanime com os erros: errar faz parte do aprendizado!
