Crie sua Primeira Página Web em 30 Minutos Usando Apenas HTML e CSS

 Olá e bem-vindo ao Código do Zero MZ!

Sempre teve curiosidade em saber como os websites são feitos? Parece magia, mas garanto que não é. Hoje, juntos, vamos desvendar o primeiro segredo da internet.

Neste guia passo a passo, vamos criar a sua PRIMEIRA página web do absoluto zero. E o melhor de tudo? Faremos isso em menos de 30 minutos, usando apenas ferramentas que você já tem no seu computador.

Pronto para se tornar um criador da web? Vamos a isso!

O Que Você Vai Precisar?

Não se preocupe, a lista é muito curta:

  1. Um computador (Windows, Mac ou Linux).

  2. Um editor de texto simples. Vamos usar o Bloco de Notas (Notepad) que já vem instalado no Windows.

  3. Um navegador de internet como o Google Chrome ou Firefox.

É só isso! Não precisa instalar nada.

Parte 1: O Esqueleto da Página (HTML)

Toda página web precisa de uma estrutura, um esqueleto. Essa linguagem de estruturação chama-se HTML (HyperText Markup Language).

Passo 1: Criar o nosso ficheiro

  1. Abra o Bloco de Notas no seu computador.

  2. Copie e cole o código abaixo lá dentro.

  3. Vá em Ficheiro (File) > Guardar Como (Save As...).

  4. IMPORTANTE: Na caixa "Tipo (Save as type)", mude de "Documentos de texto (.txt)" para "Todos os ficheiros (All Files)".

  5. Dê o nome ao ficheiro de index.html e guarde-o no seu Ambiente de Trabalho (Desktop).

Passo 2: O código HTML básico

Este é o esqueleto inicial de qualquer página web moderna.

HTML
<!DOCTYPE html>
<html lang="pt-MZ">
<head>
    <meta charset="UTF-8">
    <title>A Minha Primeira Página Web</title>
</head>
<body>

    <h1>Olá, Moçambique!</h1>

    <p>Eu estou a aprender a criar websites com o blog Código do Zero MZ. Isto é mais fácil do que eu pensava!</p>

    <img src="https://images.pexels.com/photos/4145354/pexels-photo-4145354.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Pessoa a programar num laptop">

</body>
</html>

Agora, vá até ao seu Ambiente de Trabalho e dê um duplo clique no ficheiro index.html. Ele vai abrir no seu navegador e... PARABÉNS! Você acabou de criar a sua primeira página web!

Parte 2: A Aparência (CSS)

A nossa página funciona, mas está um pouco sem graça, certo? Agora vamos adicionar "roupa" e "pintura" a esse esqueleto. Para isso, usamos a linguagem de estilo chamada CSS (Cascading Style Sheets).

Vamos adicionar o nosso código CSS diretamente no nosso ficheiro HTML para simplificar.

Passo 3: Adicionar estilo à página

  1. Abra novamente o seu ficheiro index.html com o Bloco de Notas (clique direito > Abrir com > Bloco de Notas).

  2. Agora, vamos copiar o código final completo, que já inclui o nosso CSS. Substitua todo o texto que estava no seu ficheiro por este código abaixo.

(CÓDIGO FINAL COMPLETO)

HTML
<!DOCTYPE html>
<html lang="pt-MZ">
<head>
    <meta charset="UTF-8">
    <title>A Minha Primeira Página Web</title>

    <style>
        body {
            font-family: sans-serif;
            background-color: #f0f2f5;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 800px;
            margin: 40px auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        h1 {
            color: #007bff;
            text-align: center;
        }

        p {
            font-size: 18px;
        }

        img {
            max-width: 100%;
            border-radius: 8px;
            margin-top: 20px;
        }
    </style>
    </head>
<body>

    <div class="container">
        <h1>Olá, Moçambique!</h1>

        <p>Eu estou a aprender a criar websites com o blog Código do Zero MZ. Isto é mais fácil do que eu pensava!</p>

        <img src="https://images.pexels.com/photos/4145354/pexels-photo-4145354.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Pessoa a programar num laptop">
    </div>

</body>
</html>

Passo 4: Ver a Magia Acontecer

Guarde as alterações no Bloco de Notas (Ficheiro > Guardar).

Agora, vá ao seu navegador e atualize a página (pressione a tecla F5). Veja a incrível diferença!

Conclusão e Próximos Passos

PARABÉNS! Se você seguiu todos os passos, você não só criou a sua primeira página web, como também a estilizou. Você aprendeu que:

  • HTML é usado para a estrutura e o conteúdo.

  • CSS é usado para o design e a aparência.

Isto é apenas o começo da sua jornada como desenvolvedor. O poder de criar coisas na internet está, literalmente, nas suas mãos.

Desafio para si: Tente mudar o texto do <h1> ou a cor de fundo background-color no código CSS para ver o que acontece!

Gostou deste tutorial? Teve alguma dificuldade? Deixe um comentário abaixo!

Comentários

Enviar um comentário

Mensagens populares deste blogue

O Box Model do CSS: O Guia Definitivo de Margin, Border e Padding

 Olá, equipa! Preparados para desvendar um dos maiores segredos do CSS? Tudo o que vemos numa página web — um parágrafo, uma imagem, um título — é, para o navegador, uma caixa retangular . Entender como essa caixa funciona, como podemos controlar o seu tamanho e o espaço à sua volta, é o segredo para controlar o layout de qualquer site. Hoje, vamos desvendar o famoso (e por vezes temido) Box Model do CSS . Prometo que, no final desta aula, vais dominar os conceitos de margin , border e padding de uma vez por todas. Os 4 Componentes da Caixa Imaginem um quadro com uma fotografia na parede. O Box Model funciona exatamente da mesma forma. ` ` Content (Conteúdo): É a fotografia em si. O teu texto, a tua imagem. Padding (Preenchimento): É o espaço em branco (passe-partout) entre a fotografia e a moldura. É o espaço interno da caixa. Border (Borda): É a moldura do quadro. A linha que fica à volta do conteúdo e do padding. Margin (Margem): É o espaço vazio na parede à volta do qua...
Ler mais

Formulários Bonitos com CSS: O Guia para Estilizar Inputs

 Olá, equipa! Na aula passada, construímos a estrutura do nosso formulário de contato. Ele funciona, mas sejamos honestos: é feio. Ninguém se sente inspirado a preencher um formulário com a aparência dos anos 90. A boa notícia é que não precisa de ser assim. Hoje, vamos pegar nesse esqueleto HTML e vesti-lo com o poder do CSS. Vou mostrar-vos como estilizar cada parte do nosso formulário — os campos de texto, as etiquetas e os botões — para que ele fique limpo, moderno e convidativo. Parte 1: A Estrutura Base e o Espaçamento Primeiro, vamos dar ao nosso formulário um contentor e algum espaço para respirar. No nosso estilos.css , vamos adicionar o seguinte: CSS form { max-width : 600px ; /* O formulário não ficará demasiado largo em ecrãs grandes */ margin : 40px auto; /* Centra o formulário na página com margem em cima/baixo */ padding : 20px ; background-color : #ffffff ; border-radius : 8px ; box-shadow : 0 4px 8px rgba ( 0 , 0 , 0 , 0.1 ); } form ...
Ler mais