Aula Um de HTML

Como criar uma página HTML simples?

HTML (HyperText Markup Language) é a linguagem de marcação usada para estruturar conteúdo na web.

Passo 1: Estrutura Básica

Aqui está a estrutura básica de um arquivo HTML. Vamos começar com uma explicação sobre cada parte:

    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Página Simples</title>
    </head>
    <body>
        <h1>Bem-vindo à Minha Página</h1>
        <p>Esta é uma página HTML simples para aprender!</p>
    </body>
    </html>

Explicação de cada parte:

<!DOCTYPE html>: Esta linha informa ao navegador que estamos usando HTML5. Ele define o tipo de documento.
<html lang="pt-br">: A tag <html> é o contêiner principal de todo o conteúdo da página. O atributo lang="pt-br" define o idioma da página como português do Brasil.
<head>: O <head> contém informações sobre a página, como o título da página e os metadados.
<meta charset="UTF-8">: Define a codificação de caracteres para UTF-8, que é padrão e garante que caracteres especiais (como acentos) sejam exibidos corretamente.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: A tag de viewport garante que a página seja responsiva em dispositivos móveis.
<title>Página Simples</title>: O título que aparece na aba do navegador. Pode ser qualquer texto descritivo da sua página.
<body>: O conteúdo real da página vai dentro da tag <body>. Tudo o que aparecer na página web será colocado aqui.
<h1>Bem-vindo à Minha Página</h1>: A tag <h1> é usada para títulos de nível 1. É o maior e mais importante título na página.
<p>Esta é uma página HTML simples para aprender!</p>: A tag <p> cria um parágrafo. Você pode escrever o conteúdo de texto dentro desta tag.

Passo 2: Criando o Arquivo

Abra um editor de texto: Pode ser o bloco de notas (Windows) ou um editor de código (como Visual Studio Code, Sublime Text, ou Atom).
Crie um novo arquivo e copie o código acima.
Salve o arquivo com a extensão .html, por exemplo, minha_pagina.html.

Passo 3: Abrindo no Navegador

Após salvar o arquivo, abra-o no seu navegador (Chrome, Firefox, etc.).
Você verá a página que criamos! A página terá o título "Página Simples" na aba do navegador e exibirá o texto "Bem-vindo à Minha Página" como um título grande, seguido de "Esta é uma página HTML simples para aprender!".

Passo 4: Personalizando a Página

Agora que você tem a estrutura básica, pode personalizar a página. Aqui estão algumas alterações que você pode tentar:

Adicionar mais parágrafos:

<p>Este é um outro parágrafo!</p>

Adicionar imagens:

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

Alterar a cor de fundo com CSS (dentro da tag <head>):

        <style>
            body {
                background-color: lightblue;
            }
        </style>

Exemplo Completo com Personalização:

    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Página Simples</title>
        <style>
            body {
                background-color: lightblue;
                font-family: Arial, sans-serif;
            }
            h1 {
                color: darkblue;
            }
            p {
                font-size: 18px;
            }
        </style>
    </head>
    <body>
        <h1>Bem-vindo à Minha Página</h1>
        <p>Esta é uma página HTML simples para aprender!</p>
        <p>Eu adicionei algumas personalizações!</p>
        <img src="https://via.placeholder.com/150" alt="Imagem de exemplo">
    </body>
    </html>

Explicação das Novidades:

<style>: O conteúdo dentro da tag <style> define estilos CSS para a página.
background-color: lightblue; define a cor de fundo da página como azul claro.
font-family: Arial, sans-serif; muda a fonte do texto para Arial.
h1 { color: darkblue; } altera a cor do título principal para azul escuro.
Imagem: A tag <img> é usada para exibir imagens. Você coloca o link da imagem no atributo src.

Conclusão

Agora você sabe como criar uma página HTML simples, personalizar com CSS e adicionar imagens. HTML é a base de todas as páginas web, e você pode expandir esse conhecimento adicionando mais elementos como listas, links, tabelas, formulários, entre outros.

Se tiver dúvidas ou quiser saber mais, é só perguntar!

Voltar à página inicial

Voltar à Tecnologia

Aula 2 de HTML

Aula 1 de HTML