DS & II

capitulo_01_introducao

Leitura de 2 min

Capítulo 01: Manual do Arquiteto Web (Introdução) 🏗️🌐

Bem-vindo à sua jornada para se tornar um mestre na construção de mundos digitais! Neste curso, vamos aprender HTML e CSS, as ferramentas fundamentais para criar qualquer página na web, com o tema Construção de Impérios e RPG!

📖 O que são HTML e CSS?

Imagine que você está construindo um castelo para o seu reino.

  • HTML (HyperText Markup Language): É o esqueleto ou os tijolos do castelo. Ele define onde fica a porta, onde fica a janela, onde fica o trono. Ele dá a estrutura e o significado.
  • CSS (Cascading Style Sheets): São as roupas, a pintura e a decoração do castelo. Ele diz qual cor a parede terá, o tamanho das janelas e como as coisas brilham. Ele dá o estilo e a beleza.

📖 Exemplo Guiado: Seu Primeiro Pergaminho Web

Vamos criar um arquivo HTML simples.

  1. Crie o arquivo index.html na sua pasta de estudos:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Meu Primeiro Reino</title>
</head>
<body>
    <h1>Bem-vindo ao Meu Reino!</h1>
    <p>Este é o início da minha jornada como arquiteto web.</p>
</body>
</html>

🕹️ Como Executar

  1. Abra a pasta onde você salvou o arquivo.
  2. Dê um duplo clique no arquivo index.html.
  3. Ele abrirá no seu navegador (Chrome, Edge, etc.) e você verá o título grande e o parágrafo!

📊 Ilustração Visual: Estrutura vs Estilo

graph TD
    A["HTML (Tijolos)"] --> B["Página Web"]
    C["CSS (Pintura)"] --> B

🛠️ Prática Obrigatória 1: Ficha do Construtor

Crie um arquivo chamado construtor.html. Use a estrutura básica que aprendeu e mude o título (<title>) para “Ficha do Construtor”. No corpo (<body>), coloque o seu nome em um título <h1> e a sua classe (ex: Aprendiz de Mago) em um parágrafo <p>.

🔑 Gabarito de Código

Prática 1: construtor.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Ficha do Construtor</title>
</head>
<body>
    <h1>Nome: Aragorn</h1>
    <p>Classe: Construtor de Impérios</p>
</body>
</html>

📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo X) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.
  3. ⚠️ IMPORTANTE: Seu repositório DEVE SER PÚBLICO.
  4. No Microsoft Teams:
    • Copie o link do seu repositório.
    • Cole na tarefa correspondente no Teams.
    • Clique em Entregar.

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks