[Projeto] Mão na massa - Desafio - Resolução | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cyber</title>
</head>
<body>
    <h1>Segurança cibernética no futuro</h1>
    <h2>Como esse assunto é visto atualmente!</h2>
<p>No futuro, a segurança cibernética será crucial devido à evolução tecnológica e sofisticação das ameaças digitais, exigindo cooperação entre governos, empresas e indivíduos para proteger dados, privacidade e infraestruturas digitais. Com a expansão da Internet das Coisas e da computação em nuvem, a proteção contra ataques cibernéticos será essencial para garantir um futuro digital seguro.</p>    
<img src="cyber.jpg" width="1000" height="700" alt="img cyber">

<ol>Principais problemas</ol>
<ol>
    <li>Inteligência Artificial Maliciosa</li>
    <li>Ataques Quânticos</li>
    <li>IoT Insegura</li>
    <li>Deepfakes e Manipulação de Mídia</li>
    <li>Escassez de Talentos em Segurança Cibernética</li>
    <li>Ataques contra Infraestruturas Críticas</li>
    <li>Privacidade em Declínio</li>
    <li>Legislação e Regulação Insuficientes</li>
    <li>Ciberataques Estatais e Guerra Cibernética</li>
    <li>Riscos Emergentes de Tecnologias Disruptivas</li>
</ol>

</body>
</html>

![]( Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

Olá Hugo!

Pelo que consigo ver no seu código e na imagem fornecida, você está no caminho certo para construir uma página HTML bem estruturada. No entanto, parece que há um pequeno equívoco na forma como você está usando as tags de lista ordenada (<ol>). No seu código, você utilizou a tag <ol> duas vezes consecutivas, uma para o título da lista e outra para a lista em si. A maneira correta de fazer isso seria usar a tag <ol> apenas uma vez para englobar todos os itens da lista, e usar uma tag de cabeçalho, como <h3> para o título da lista. Além disso, a imagem na página parece estar muito grande, o que pode afetar a usabilidade e o design responsivo do site.

Aqui está uma sugestão de como corrigir a lista e ajustar o tamanho da imagem:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cyber</title>
</head>
<body>
    <h1>Segurança cibernética no futuro</h1>
    <h2>Como esse assunto é visto atualmente!</h2>
    <p>No futuro, a segurança cibernética será crucial devido à evolução tecnológica e sofisticação das ameaças digitais, exigindo cooperação entre governos, empresas e indivíduos para proteger dados, privacidade e infraestruturas digitais. Com a expansão da Internet das Coisas e da computação em nuvem, a proteção contra ataques cibernéticos será essencial para garantir um futuro digital seguro.</p>    
    <img src="cyber.jpg" style="max-width:100%; height:auto;" alt="Imagem representando segurança cibernética">

    <h3>Principais problemas</h3>
    <ol>
        <li>Inteligência Artificial Maliciosa</li>
        <li>Ataques Quânticos</li>
        <li>IoT Insegura</li>
        <li>Deepfakes e Manipulação de Mídia</li>
        <li>Escassez de Talentos em Segurança Cibernética</li>
        <li>Ataques contra Infraestruturas Críticas</li>
        <li>Privacidade em Declínio</li>
        <li>Legislação e Regulação Insuficientes</li>
        <li>Ciberataques Estatais e Guerra Cibernética</li>
        <li>Riscos Emergentes de Tecnologias Disruptivas</li>
    </ol>

</body>
</html>

Neste código, ajustei a tag da lista e adicionei um estilo à imagem para garantir que ela se ajuste à largura da tela do dispositivo, mantendo a proporção original. Isso melhora a responsividade da página.

Lembre-se de que a prática é essencial para aperfeiçoar suas habilidades em HTML e CSS, então continue experimentando e ajustando seu código. Espero ter ajudado e bons estudos!