Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Desafios]

Referente ao curso HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags, no capítulo Documentação e HTML e atividade Lista de exercícios

por Leonardo Nascimento de Oliveira
| 15k xp | 67 posts

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Desafios</title>
    </head>
    <body>
        <header>
            <h1>Desafios</h1>
            <h2>Desafios de HTML</h2>
        </header>
        <main>
            <p>Lista de desafios:</p>
            <ol>
                <li><a href="desafio01.html">Desafio 01</a></li>
                <li><a href="desafio02.html">Desafio 02</a></li>
                <li><a href="desafio03.html">Desafio 03</a></li>
                <li><a href="desafio04.html">Desafio 04</a></li>
                <li><a href="desafio05.html">Desafio 05</a></li>
                <li><a href="desafio06.html">Desafio 06</a></li>
                <li><a href="desafio07.html">Desafio 07</a></li>
            </ol>
        </main>
    </body>
</html>

desafio01.html

<!DOCTYPE html>
<html>
    <head>
        <title>Desafio 01</title>
    </head>
    <body>
        <a href="index.html">Voltar</a>
    </body>
</html>

desafio02.html

<!DOCTYPE html>
<html>
    <head>
        <title>Desafio 02</title>
    </head>
    <body>
        <header>
            <h1>2) Adicionando conteúdo ao HTML</h1>
        </header>
        <main>
            <p>Agora que a estrutura básica do seu documento HTML está pronta, seu supervisor pediu para adicionar um cabeçalho e um parágrafo ao corpo do documento. Use as tags h1 para o cabeçalho e p para o parágrafo. Escolha um tema para o cabeçalho e escreva um breve parágrafo relacionado a esse tema.</p>
        </main>
        <a href="index.html">Voltar</a>
    </body>
</html>

desafio03.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Desafio 03</title>
    </head>
    <body>
        <header>
            <h1>3) Trabalhando com meta tags e título</h1>
        </header>
        <main>
            <p>Você precisa otimizar a seção head da página HTML existente. Adicione uma meta tag para definir a codificação de caracteres como UTF-8 e altere o título da página para algo mais descritivo e apropriado para o conteúdo do site.</p>
        </main>
        <a href="index.html">Voltar</a>
    </body>
</html>

desafio04.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Desafio 04</title>
    </head>
    <body>
        <header>
            <h1>Desafio 04</h1>
            <h2>4) Organizando conteúdo com tags HTML</h2>
        </header>
        <main>
            <p>Você está desenvolvendo a página inicial de um site para um projeto pessoal. Você precisa criar um título principal e um subtítulo, seguidos por um breve parágrafo explicativo. Utilize HTML para estruturar esses elementos. Crie um arquivo HTML e adicione um título principal com a tag h1, um subtítulo com a tag h2, e um parágrafo com a tag p. Use textos de sua escolha para cada um destes. Lembre-se de seguir a hierarquia correta das tags e verificar o resultado no navegador.</p>
        </main>
        <a href="index.html">Voltar</a>
    </body>
</html>

desafio05.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Desafio 05</title>
    </head>
    <body>
        <header>
            <h1>Desafio 05</h1>
            <h2>5) Adicionando imagens com acessibilidade</h2>
        </header>
        <main>
            <p>Neste desafio, você vai adicionar uma imagem ao seu projeto de site pessoal. Escolha uma imagem de sua preferência (pode ser um logo ou uma foto relacionada ao tema do site). Utilize a tag img para inserir a imagem no corpo do documento HTML, e não se esqueça de incluir o atributo alt para descrever a imagem, melhorando a acessibilidade do site. Verifique o resultado no navegador.</p>
            <img src="/img/html5.png" alt="Logotipo do html5">
        </main>
        <a href="index.html">Voltar</a>
    </body>
</html>
2 respostas
por Leonardo Nascimento de Oliveira
| 15k xp | 67 posts

desafio06.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Desafio 06</title>
    </head>
    <body>
        <header>
            <h1>Desafio 06</h1>
            <h2>6) Listando Itens em HTML</h2>
        </header>
        <main>
            <p>Agora, adicione uma lista de itens ao seu site. Esta lista pode ser de características do projeto, etapas de desenvolvimento, ou qualquer outra informação relevante. Utilize a tag ul para uma lista não ordenada ou ol para uma lista ordenada, e li para cada item da lista. Verifique o layout no navegador após a inserção.</p>
            <img src="/img/html5.png" alt="Logotipo do html5">
            <ol>
                <li><a href="desafio01.html">Desafio 01</a></li>
                <li><a href="desafio02.html">Desafio 02</a></li>
                <li><a href="desafio03.html">Desafio 03</a></li>
                <li><a href="desafio04.html">Desafio 04</a></li>
                <li><a href="desafio05.html">Desafio 05</a></li>
            </ol>
        </main>
        <a href="index.html">Voltar</a>
    </body>
</html>

desafio07.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Desafio 07</title>
    </head>
    <body>
        <header>
            <h1>Desafio 07</h1>
            <h2>7) Explorando o impacto do DOCTYPE no HTML</h2>
        </header>
        <a href="desafio07-quirksmode.html">Ativar quirks mode.</a>
        <main>
            <p>A sua tarefa é explorar o impacto da declaração !DOCTYPE html em um documento HTML. Crie um arquivo HTML básico com a estrutura apresentada no relato, incluindo elementos como head, title, body, h1, p, e img. Primeiro, visualize a página com a declaração !DOCTYPE html. Em seguida, remova a declaração e visualize novamente. Use a ferramenta de inspeção do navegador para explorar as diferenças no modo de renderização da página, focando na presença ou ausência do "Modo Quirks".</p>
            <img src="/img/html5.png" alt="Logotipo do html5">
            <ol>
                <li><a href="desafio01.html">Desafio 01</a></li>
                <li><a href="desafio02.html">Desafio 02</a></li>
                <li><a href="desafio03.html">Desafio 03</a></li>
                <li><a href="desafio04.html">Desafio 04</a></li>
                <li><a href="desafio05.html">Desafio 05</a></li>
                <li><a href="desafio06.html">Desafio 06</a></li>
            </ol>
        </main>
        <a href="index.html">Voltar</a>
    </body>
</html>

desafio07-quirksmode.html

<html>
    <head>
        <meta charset="UTF-8">
        <title>Desafio 07</title>
    </head>
    <body>
        <header>
            <h1>Desafio 07</h1>
            <h2>7) Explorando o impacto do DOCTYPE no HTML</h2>
        </header>
        <a href="desafio07.html">Desativar quirks mode.</a>
        <main>
            <p>A sua tarefa é explorar o impacto da declaração !DOCTYPE html em um documento HTML. Crie um arquivo HTML básico com a estrutura apresentada no relato, incluindo elementos como head, title, body, h1, p, e img. Primeiro, visualize a página com a declaração !DOCTYPE html. Em seguida, remova a declaração e visualize novamente. Use a ferramenta de inspeção do navegador para explorar as diferenças no modo de renderização da página, focando na presença ou ausência do "Modo Quirks".</p>
            <img src="/img/html5.png" alt="Logotipo do html5">
            <ol>
                <li><a href="desafio01.html">Desafio 01</a></li>
                <li><a href="desafio02.html">Desafio 02</a></li>
                <li><a href="desafio03.html">Desafio 03</a></li>
                <li><a href="desafio04.html">Desafio 04</a></li>
                <li><a href="desafio05.html">Desafio 05</a></li>
                <li><a href="desafio06.html">Desafio 06</a></li>
            </ol>
        </main>
        <a href="index.html">Voltar</a>
    </body>
</html>
solução!
por SARAH CRISTINA BATISTA DOS SANTOS
| 887.8k xp | 2113 posts
Alura Scuba Team Monitor/ fórum

Oi Leonardo, como vai?

Que bom que realizou os desafios, é isso aí! Continue se dedicando aos estudos e colocando em prática seus aprendizados.

Caso surjam dúvida, fico à disposição.

Abraços e bons estudos!