Entrar Ainda não tem acesso?
1
resposta

[Projeto] Lista de exercícios

Referente ao curso HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

por Viviane Matos Chaves Silva
| 62.4k xp | 15 posts

  1. Construindo a estrutura básica do HTML Você acabou de iniciar um estágio em uma empresa de desenvolvimento web e sua primeira tarefa é criar um documento HTML básico para um novo projeto. O objetivo é construir a estrutura fundamental de um arquivo HTML, incluindo as tags essenciais: ,

, , e . Além disso, dentro da tag , adicione uma tag

  1. Adicionando conteúdo ao HTML 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

    para o cabeçalho e

    para o parágrafo. Escolha um tema para o cabeçalho e escreva um breve parágrafo relacionado a esse tema.

Boas-vindas ao meu site

Este é um exemplo de um parágrafo em HTML.

  1. Trabalhando com meta tags e título Você precisa otimizar a seção
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.

Boas-vindas ao meu site

Este é um exemplo de um parágrafo em HTML.

  1. Organizando conteúdo com tags HTML 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

    , um subtítulo com a tag

    , e um parágrafo com a tag

    . Use textos de sua escolha para cada um destes. Lembre-se de seguir a hierarquia correta das tags e verificar o resultado no navegador.

Meu projeto pessoal

Esse site é para noticiar sobre meu dia a dia

Este é um projeto em que viso compartilhar meus hobbies, meu gosto culinário, fotos de pet e o que de novo estiver vivendo.

  1. Adicionando imagens com acessibilidade 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 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.

Meu projeto pessoal

Esse site é para noticiar sobre meu dia a dia

Este é um projeto em que viso compartilhar meus hobbies, meu gosto culinário, fotos de pet e o que de novo estiver vivendo.

Foto de um cachorro
  1. Listando Itens em HTML 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
    • para uma lista não ordenada ou
      1. para uma lista ordenada, e
      2. para cada item da lista. Verifique o layout no navegador após a inserção.

Meu projeto pessoal

Esse site é para noticiar sobre meu dia a dia

Este é um projeto em que viso compartilhar meus hobbies, meu gosto culinário, fotos de pet e o que de novo estiver vivendo.

Foto de um cachorro
  • Hobbies
  • Culinária
  • Pets
1 resposta
por Rafael Messina Boldrini
| 223.8k xp | 127 posts
Analista de Automação

Para ajudá-lo a começar com seu projeto de HTML, vamos detalhar os exercícios e fornecer exemplos práticos de código para cada tarefa. Acompanhe as instruções e você poderá criar uma estrutura HTML funcional e otimizada para o seu site.

1. Construindo a Estrutura Básica do HTML

Vamos começar criando um arquivo HTML básico que inclui todas as tags essenciais (<!DOCTYPE html>, <html>, <head>, <title>, <body>).

<!DOCTYPE html>
<html lang="pt">
    <head>
            <meta charset="UTF-8">
        <title>Boas-vindas ao meu site</title>
    </head>
    <body>
            <header>
                <h1>Boas-vindas ao meu site</h1>
                <p>Este é um exemplo de um parágrafo em HTML.</p>
        </header>
    </body>
</html>

2. Adicionando Conteúdo ao HTML

Agora, adicionamos um cabeçalho e um parágrafo ao corpo do documento. Já incluímos isso na etapa anterior, sob a tag <header>.

3. Trabalhando com Meta Tags e Título

O título da página foi definido e a meta tag para UTF-8 já foi adicionada no exemplo acima. Veja como essas tags são colocadas dentro do <head>.

4. Organizando Conteúdo com Tags HTML

Para esta parte, vamos criar um arquivo HTML que apresente um título principal, um subtítulo e um parágrafo explicativo.

<!DOCTYPE html>
<html lang="pt">
    <head>
            <meta charset="UTF-8">
        <title>Meu Projeto Pessoal</title>
    </head>
    <body>
        <h1>Meu Projeto Pessoal</h1>
        <h2>Esse site é para noticiar sobre meu dia a dia</h2>
            <p>Este é um projeto em que viso compartilhar meus hobbies, meu gosto culinário, fotos de pet e o que de novo estiver vivendo.</p>
    </body>
</html>

5. Adicionando Imagens com Acessibilidade

Para adicionar uma imagem, use a tag <img> com o atributo alt, que descreve a imagem.

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

Exemplo com uma imagem específica:

<img src="https://cdn2.gnarususercontent.com.br/1/5826950/9a71ffb5-7bcd-4f05-bf56-4647bff723bd.png" alt="Logo do meu projeto">

6. Listando Itens em HTML

Por fim, vamos criar uma lista de características do projeto.

<ul>
    <li>Hobbies</li>
    <li>Culinária</li>
    <li>Pets</li>
</ul>

Essa estrutura básica de HTML que você montou agora pode ser visualizada em qualquer navegador, permitindo que você verifique como o conteúdo está sendo apresentado e faça ajustes conforme necessário. Continue praticando e adicionando novos elementos para enriquecer seu site!