🎓 Curso Grátis de HTML e CSS

Bem-vindo ao teu primeiro passo no mundo da programação web!

Vais aprender a criar páginas web do zero, sem precisar de conhecimentos prévios. Este curso foi pensado para quem nunca programou e quer começar de forma simples e prática. No final, vais ter o teu próprio site publicado na internet!

💡 O HTML é como o esqueleto de uma página web. Ele define a estrutura do teu site. Já o CSS é o que dá cor, forma e beleza. Vamos começar o teu primeiro projeto web juntos!

Lição 1 Introdução ao HTML

HTML significa HyperText Markup Language (Linguagem de Marcação de Hipertexto). Não te assustes com o nome! É apenas uma forma de dizer ao navegador (Chrome, Firefox, Safari) como organizar o conteúdo de uma página.

O HTML usa tags (etiquetas) para marcar diferentes partes do conteúdo. As tags são palavras entre sinais de menor e maior: <tag>

A tua primeira tag

Vamos começar com algo simples. A tag <h1> serve para criar um título grande:

<h1>Olá, Mundo!</h1>

Repara que a maioria das tags tem uma abertura <h1> e um fechamento </h1>. O conteúdo fica no meio.

Outras tags básicas

Aqui estão algumas tags que vais usar constantemente:

📝 Tarefa Prática:

Abre o Bloco de Notas (Windows) ou TextEdit (Mac) e escreve:

<h1>O meu nome é [teu nome]</h1>
<p>Este é o meu primeiro código HTML!</p>

Guarda o ficheiro com o nome index.html e abre-o num navegador. Parabéns, criaste a tua primeira página web! 🎉

Lição 2 Estrutura Básica de uma Página

Toda a página HTML tem uma estrutura padrão. É como a fundação de uma casa - sempre a mesma base, depois personalizas como quiseres.

A estrutura completa

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <title>O Meu Primeiro Site</title>
</head>
<body>
    <h1>Bem-vindo ao meu site!</h1>
    <p>Este é o meu primeiro site feito com HTML.</p>
</body>
</html>

O que significa cada parte?

💡 Dica: Copia sempre esta estrutura base quando começares uma nova página. Vais poupar muito tempo!
📝 Tarefa Prática:

Cria um ficheiro HTML completo com:

Lição 3 Trabalhando com Texto e Imagens

Agora que já sabes a estrutura básica, vamos adicionar mais conteúdo interessante à tua página!

Formatação de texto

Podes dar ênfase ao teu texto de várias formas:

<p>Este texto está <strong>em negrito</strong> e este está <em>em itálico</em>.</p>
<p>Também podes <u>sublinhar</u> ou <mark>destacar</mark> palavras.</p>

Criar listas

As listas são super úteis para organizar informação:

<!-- Lista não ordenada (com bolinhas) -->
<ul>
    <li>Maçãs</li>
    <li>Bananas</li>
    <li>Laranjas</li>
</ul>

<!-- Lista ordenada (com números) -->
<ol>
    <li>Acordar</li>
    <li>Tomar pequeno-almoço</li>
    <li>Ir trabalhar</li>
</ol>

Adicionar imagens

Uma imagem vale mais que mil palavras! A tag <img> é especial porque não tem fechamento:

<img src="caminho-da-imagem.jpg" alt="Descrição da imagem">

O src indica onde está a imagem, e o alt é uma descrição (importante para acessibilidade).

Criar links

Links conectam páginas. É o que torna a web uma "teia"!

<a href="https://www.google.com">Ir para o Google</a>
<a href="outra-pagina.html">Ir para outra página do meu site</a>
📝 Tarefa Prática:

Cria uma página sobre o teu filme favorito que inclua:

Lição 4 Introdução ao CSS

Até agora, as tuas páginas são funcionais mas... um pouco sem graça, certo? É aqui que entra o CSS (Cascading Style Sheets)!

O CSS é o que dá cor, estilo e personalidade ao teu site. Se o HTML é o esqueleto, o CSS é a roupa, a pele e o penteado! 💅

Como adicionar CSS

Existem 3 formas de adicionar CSS, mas vamos focar na mais prática: dentro da tag <head>

<head>
    <style>
        h1 {
            color: blue;
            font-size: 36px;
        }
        
        p {
            color: gray;
            font-size: 18px;
        }
    </style>
</head>

Anatomia de uma regra CSS

Cada regra CSS tem 3 partes:

seletor {
    propriedade: valor;
    propriedade: valor;
}

Propriedades CSS básicas

📝 Tarefa Prática:

Pega na página que criaste na lição anterior e adiciona CSS para:

Lição 5 Cores, Fontes e Estilos de Layout

Agora vamos fazer o teu site ficar realmente bonito! Vais aprender a escolher cores, usar fontes modernas e organizar o layout.

Trabalhando com cores

Existem várias formas de definir cores em CSS:

/* Por nome */
color: red;
color: lightblue;

/* Código hexadecimal */
color: #FF5733;
background-color: #0077ff;

/* RGB */
color: rgb(255, 87, 51);

/* RGBA (com transparência) */
background-color: rgba(0, 119, 255, 0.5);
💡 Dica: Usa sites como coolors.co ou colorhunt.co para encontrar paletas de cores harmoniosas!

Fontes do Google Fonts

Podes usar milhares de fontes gratuitas! Vai a fonts.google.com, escolhe uma fonte e adiciona no <head>:

<head>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" 
          rel="stylesheet">
    <style>
        body {
            font-family: 'Poppins', sans-serif;
        }
    </style>
</head>

Classes e IDs

Para estilizar elementos específicos, usa classes e IDs:

<!-- No HTML -->
<p class="destaque">Este parágrafo é especial</p>
<p id="principal">Este é único</p>

<!-- No CSS -->
<style>
    .destaque {
        background-color: yellow;
        padding: 10px;
    }
    
    #principal {
        font-size: 24px;
        font-weight: bold;
    }
</style>

Box Model - Espaçamentos

Controla o espaço em volta dos elementos:

.caixa {
    width: 300px;
    padding: 20px;        /* Espaço interno */
    margin: 30px;         /* Espaço externo */
    border: 2px solid black;  /* Borda */
    border-radius: 10px;  /* Cantos arredondados */
}

Layout básico

Cria um layout simples e responsivo:

body {
    max-width: 900px;
    margin: 0 auto;     /* Centraliza */
    padding: 20px;
    background-color: #f8f9fa;
}

main {
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}
📝 Tarefa Prática:

Cria uma página de portfólio pessoal com:

Lição 6 Como Publicar o Teu Site Gratuitamente

Chegou a hora mágica! Vais colocar o teu site na internet para que qualquer pessoa no mundo possa aceder. E o melhor: é 100% grátis! 🚀

Opção 1: GitHub Pages (Recomendado)

O GitHub Pages é uma das formas mais populares e confiáveis:

Em poucos minutos, o teu site estará em: seunome.github.io/meu-site

Opção 2: Netlify Drop

Ainda mais simples:

Opção 3: Vercel

Para projetos mais avançados:

💡 Dica: Todas estas plataformas dão-te um domínio gratuito. Se quiseres um domínio personalizado (ex: meunome.com), podes comprar por cerca de 10€/ano e conectá-lo!

Preparar os ficheiros

Antes de publicar, garante que:

📝 Tarefa Prática Final:

Publica o site que criaste nas lições anteriores usando uma das plataformas acima. Depois:

Parabéns! És oficialmente um desenvolvedor web! 🎉👨‍💻👩‍💻

🌟 Pronto para o Próximo Nível?

Concluíste o curso grátis de HTML e CSS! Mas isto é apenas o começo...

Na nossa Área Premium, vais aprender:

🚀 Ir para Área Premium

Continua a tua jornada e torna-te um desenvolvedor web completo!