HTML e CSS: Atividade 1 | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--isso eu posso escrever o que quiser
    <div>
        <p>estou sendo ignorada :(</p>
    </div>
    -->

    <title>Gigantes marinhos</title>
    <link rel="icon" href="https://cdn-icons-png.flaticon.com/512/47/47015.png"
    type="image/png">
    <style>
        body {
            background: linear-gradient(to bottom, #e6f7ff, #0077be);
            font-family:"Times New Roman", Times, serif;
            color: rgb(0, 0, 0);
            }
    </style>
</head>

<body>
    <a href="https://www.worldwildlife.org/species/blue-whale">Olhe o site das
        baleias</a>
    <h1 style="color: rgb(0, 54, 104); font-size:100px;">Baleia Azul</h1>

    <h2 style="color: rgb(0, 54, 104);">Hoje você irá conhecer o animal mais lindo do nosso planeta</h2>

    <hr style="border: 1px inset rgb(0, 54, 104); width: 50%; margin-right: auto;
    margin-left:0;">

    <p style="color:rgb(19, 115, 131);" title="Sou uma dica">O maior mamífero da Terra e o maior animal que 
        já existiu, o mais bonito também
    </p>

    <hr style="border: 1px inset rgb(0, 54, 104); width: 50%; margin-right: auto;
    margin-left:0;">

    <p style="color:rgb(0, 54, 104);" title="Raul, eu te amo mais que baleias!">Uma criação
        divina
    </p>

    <img src="baleia.jpg" style="max-width: 100%; height:auto;" 
    alt="imagem de uma baleia azul na imensidão do oceano com raios de luz natural">  

    <pre style="color: rgb(0, 54, 104); font-size:20px;">As baleias são LINDAS
           BELAS e deveriam
       ser ETERNAS</pre>

    <hr style="border: 1px inset rgb(0, 54, 104); width: 50%; margin-right: auto;
    margin-left:0;">

    <h3 style="color: rgb(0, 54, 104);"> Essa é uma lista não ordenada</h3>
    <ul>
        <li>teste</li>
        <li>usa bolinhas</li>
    </ul>

    <hr style="border: 1px inset rgb(0, 54, 104); width: 50%; margin-right: auto;
    margin-left:0;">

    <h3 style="color: rgb(0, 54, 104);"> Essa é uma lista ordenada</h3>
    <ol>
        <li>eu amo comida</li>
        <li>eu amo o meu amor raul</li>
        <li>eu amo BALEIAS (no código que fiz aqui tinha um emoji de uma baleia e um coração azul)</li>
    </ol>

    <footer style="text-align: center; padding:10px; color:white; background-color: rgb(0, 54, 104);">
        Feito com (no código que fiz aqui tinha um emoji de coração azul) por Anna | 2025 | Para Raul e as baleias (no código que fiz aqui tinha um emoji de uma baleia)
    </footer>

</body>

**Escrevi muitas coisas nada com nada, pois eu estava me divertindo enquanto realizava a tarefa e queria ir testando as coisas, vendo no que dava. Fora do que aprendi assistindo as aulas, todo o resto aprendi em um site que indicaram ("https://www.w3schools.com/html/html_styles.asp") **

Oi, Anna! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

É muito legal ver como você explorou criativamente o HTML e o CSS! Sua página tem personalidade, estilo e transmite bem seu entusiasmo pelo tema. Isso mostra que você está se familiarizando com a linguagem de forma leve e prática, o que é ótimo nesse início.

Uma dica interessante para o futuro é usar o elemento section para organizar conteúdos que têm um mesmo propósito. Por exemplo:


<section>
  <h2>Conheça a baleia azul</h2>
  <p>O maior mamífero do planeta...</p>
</section>

Esse trecho cria uma seção semântica e ajuda o navegador (e leitores de tela) a entenderem melhor a estrutura do conteúdo.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!