Front-end com Vue 3

Aparência

Atividade de Casa ​

Para a Atividade de Casa, vamos colocar em prática os conceitos e as tags fundamentais do HTML que exploramos até agora. O objetivo é que você crie uma pequena página HTML dedicada a um hobby ou interesse pessoal, uma oportunidade perfeita para começar a aplicar o que aprendeu de maneira criativa e significativa. Abaixo estão as diretrizes detalhadas para a atividade:

Objetivo da Atividade ​

Construir uma página web simples que apresente um dos seus hobbies ou interesses, utilizando as tags HTML discutidas em aula. A página deve ser informativa, visualmente atraente e bem estruturada, proporcionando uma ótima prática das habilidades de marcação HTML.

Requisitos ​

  • Estrutura Básica: Use as tags <!DOCTYPE html>, <html>, <head>, e <body> para estruturar sua página corretamente.
  • Título da Página: Inclua um título relevante usando a tag <title> dentro do <head>. Esse título aparecerá na aba do navegador quando sua página for aberta.
  • Cabeçalhos e Texto: Organize o conteúdo da sua página com o uso de cabeçalhos (<h1>, <h2>, etc.) e parágrafos (<p>), garantindo uma boa hierarquia e legibilidade.
  • Imagens: Adicione imagens relacionadas ao seu hobby ou interesse utilizando a tag <img>, lembrando de incluir o atributo alt para descrever a imagem.
  • Links: Se houver páginas web externas que forneçam informações adicionais sobre seu hobby ou interesse, use a tag <a> para criar links para esses sites.
  • Listas: Se apropriado, organize informações em listas ordenadas (<ol>) ou não ordenadas (<ul>), com cada item da lista marcado por uma tag <li>.

Exemplo ​

html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Meu Hobby: Fotografia</title>
  </head>
  <body>
    <h1>Fotografia</h1>
    <p>
      A fotografia é uma paixão que me permite capturar momentos únicos e
      transformá-los em memórias eternas.
    </p>

    <h2>Por que eu amo fotografia</h2>
    <p>
      A fotografia me conecta com o mundo de uma forma profunda, permitindo-me
      ver a beleza nos detalhes cotidianos.
    </p>

    <h2>Equipamentos Favoritos</h2>
    <ul>
      <li>Câmera DSLR</li>
      <li>Tripe</li>
      <li>Lentes variadas</li>
    </ul>

    <h2>Galeria de Fotos</h2>
    <img
      src="foto1.jpg"
      alt="Uma foto que tirei durante minha viagem à montanha."
    />

    <h2>Saiba Mais</h2>
    <p>
      Para mais informações sobre fotografia, visite
      <a href="https://example.com">este site</a>.
    </p>
  </body>
</html>

Dicas ​

  • Personalize: Sinta-se livre para personalizar a página tanto quanto possível. Quanto mais pessoal, melhor!
  • Validação: Após concluir, considere usar um validador HTML online para verificar se há erros em seu código.
  • Experimente: Não tenha medo de experimentar diferentes tags e atributos para ver como eles alteram a apresentação da sua página.

Esta atividade não é apenas uma forma de praticar o uso de tags HTML, mas também uma oportunidade de compartilhar um pouco sobre si mesmo através do desenvolvimento web. Divirta-se criando sua página!