Classe HTML/CSS - Análise da Lição 1

Lição 1: Revisão do HTML básico e introdução aos elementos HTML avançados

Objetivo:

• Atualize tags HTML básicas.
• Introduza elementos HTML de nível intermediário para criar páginas da web mais funcionais.

1. Introdução à estrutura HTML

Comece com uma breve explicação de como o HTML organiza o conteúdo da página da web usando tags. Enfatize que HTML (HyperText Markup Language) é usado para estruturar páginas da web, enquanto CSS é usado para estilizar.

Principais conceitos a serem revisados:

• , , : Explique que todo documento HTML possui uma estrutura definida:
  • : elemento raiz que abrange toda a página da web.
  • : Contém metainformações como título, links para CSS, scripts, etc.
  • : contém todo o conteúdo visível, como texto, imagens e elementos com os quais os usuários interagem.

2. Recapitulação básica de tags HTML

• Títulos (

  a

  ):

  Explique que os títulos estruturam o conteúdo hierarquicamente, do maior (

  ) ao menor (

  ).

Exemplo:

    
Main Heading
    
Sub Heading

• Parágrafos (

  ):

  Usado para definir blocos de texto ou parágrafos.

Exemplo:

    
This is a paragraph.

• Âncoras (Click here
  • Imagens (): Usado para exibir imagens. Explique o atributo src para vincular ao arquivo de imagem e alt para acessibilidade.

  Exemplo:
  

  3. Introdução aos elementos HTML intermediários

  3.1. Formulários (, , )

  • Formulários são usados ​​para coletar informações do usuário.

  • Estrutura básica do formulário:

    • :
      Um contêiner para elementos de formulário. Pode incluir atributos como ação (para onde os dados do formulário são enviados) e método (GET/POST).
    • : Define um rótulo para elementos de entrada e melhora a acessibilidade.
    • : Define vários tipos de campos de entrada como texto, senha, caixa de seleção, rádio, etc.

  Exemplo de formulário simples com entrada de texto:
  

  Name: Email:

  3.2. Listas (

  ,
  ,
  1. )
  • Listas não ordenadas (
    )
    e Listas ordenadas (
    )
    ajudam na organização de dados em marcadores ou listas numeradas.
  • Itens da lista (
  • )
  define cada item da lista.

  Exemplo de lista não ordenada e ordenada:
  

  • Item 1
  • Item 2
  1. Step 1
  2. Step 2

  3.3. Tabelas (, , , )

  • Tabelas permitem que dados estruturados sejam exibidos em linhas e colunas.

    • : O contêiner da tabela.
      : Define uma linha na tabela.

      : Define uma célula da tabela.

      : Define uma célula de cabeçalho na tabela (opcional). Exemplo de tabela simples: Name Age John 25 4. Atividades de aula 4.1. Atividade de recapitulação: Faça com que os alunos criem uma página da Web básica que inclua: Um título ( ) Um parágrafo ( ) Uma imagem () Exemplo: Welcome to My Website This is my first webpage. 4.2. Exercício guiado: Crie um formulário simples: oriente os alunos na criação de um formulário simples para coletar informações do usuário (nome e e-mail). Inclua , e . 4.3. Listas e tabelas: Faça com que os alunos criem uma lista não ordenada ( ) de suas coisas favoritas e uma tabela simples com algumas linhas de dados (nome, idade, cor favorita). Exemplo: Reading Coding Traveling Name Age Alice 30 5. Trabalho de casa Os alunos devem estender sua página da web para: Adicionando elementos de formulário como caixas de seleção, botões de opção e um botão de envio. Personalização do formulário para coletar informações adicionais do usuário (por exemplo, sexo, hobbies). Exemplo: Gender: Male Female 6. Dicas adicionais Incentive os alunos a validar seu HTML usando ferramentas como o W3C Markup Validation Service. Explique a importância do HTML semântico e por que usar as tags corretas é importante para acessibilidade e SEO. Resumo Os alunos revisarão tags HTML básicas, como títulos, parágrafos, imagens e links. Eles serão apresentados a elementos HTML de nível intermediário: formulários, listas e tabelas. Exercícios práticos e trabalhos de casa darão a eles experiência prática na criação de uma página da web mais estruturada.