Introdução à Programação Web

Lógica, Estrutura e Estilo

Navegue usando as setas do teclado ou os botões abaixo.

Bloco 1: O Invisível

Como a tecnologia funciona nos bastidores antes de chegar à tela.

O que é o quê?

Algoritmo

A receita de bolo. É a sequência lógica de passos para resolver um problema.

Programação

O motor (JS). É o que faz o site tomar decisões e reagir ao usuário.

Marcação

O esqueleto (HTML). Serve para etiquetar os elementos e dizer o que cada um representa.

De onde vem o software?

Compilados

O aplicativo já vem pronto e fechado. O computador apenas executa.

Exemplo: Aplicativos baixados no celular.

Interpretados

O código é lido e traduzido na hora, linha por linha, pelo navegador.

Exemplo: O site que você está acessando agora.

A Internet e a Nuvem

A dinâmica de pedido e resposta:

  • Cliente (Você): O navegador que solicita a página.
  • Servidor (Nuvem): O computador que envia os arquivos solicitados.
  • Nuvem: Computadores de terceiros sempre ligados e conectados.
[Imagem de um notebook sobre uma mesa]

Bloco 2: Construindo

Dando nome, hierarquia e volume à nossa estrutura.

1. HTML Semântico: Nomes aos bois

Antes de tudo, precisamos identificar as partes do nosso site:

<header>

O topo da página (Logo e Menu).

<main>

O conteúdo mais importante.

<footer>

O rodapé (Contatos e Links).

Isso ajuda buscadores e garante acessibilidade para todos.

2. O Navegador e o DOM

[Imagem de uma árvore com raízes]

A Árvore de Família

Após identificar os nomes, o navegador monta uma hierarquia estrutural.

  • O <html> é a raiz de tudo.
  • O <body> é o ancestral direto.
  • Tags internas são filhas de quem as contém.

Essa organização define como os elementos se relacionam entre si.

3. O Box Model: Tudo é caixa

Todo elemento nomeado e organizado ocupa um espaço físico na tela:

  • Conteúdo: O texto ou imagem.
  • Padding: Espaço interno (respiro).
  • Border: A moldura da caixa.
  • Margin: Distância entre esta e outras caixas.
Volume: O espaço entre este texto e a borda azul é o Padding.

Bloco 3: A Pintura

Usando o CSS para definir cores, estilos e posicionamento.

CSS: Estilo e Seletores

Seletor

Quem será alterado?

h1

Propriedade

O que será alterado?

color

Valor

Como será a alteração?

blue

Flexbox vs. Grid

lexbox (O Elástico)

Ideal para organizar itens em uma única direção (como uma barra de menu).

Grid (A Estante)

Ideal para criar grades complexas de colunas e linhas (como uma galeria).

Missão: Construção Livre

O Desafio:

  • Crie a estrutura base com header, main e footer.
  • Use o CSS para colorir e dar padding às seções.
  • Explore: Adicione títulos, textos, links ou listas dentro de cada parte.
  • Tente usar uma Classe para destacar um elemento específico.

Dica de Estrutura:

<header>
  <h1>Meu Portfólio</h1>
</header>

<main>
  <p>Sobre mim...</p>
  <ul>
    <li>Projeto 1</li>
  </ul>
</main>