Treinamento de Estagiários

HTML

Neste módulo, os estagiários aprenderão sobre a linguagem de marcação HTML e como criar páginas web simples.

Aulas

Aula Programação Web

Curso de HTML Completoopen in new window

Aula Curso em Vídeo

Curso completo e atual de HTML5 e CSS3open in new window

Desafios

Desafio 1: Estrutura básica de uma página HTML

Objetivo: Criar uma página HTML básica com elementos doctype, html, head e body.

Tópicos a serem estudados:

  1. Estrutura básica de um documento HTML
  2. Elementos: doctype, html, head, body, title e meta

Atividades propostas:

  1. Crie um novo arquivo HTML chamado "index.html".
  2. Adicione a declaração doctype no início do arquivo para especificar a versão do HTML.
  3. Inclua o elemento <html> para delimitar o conteúdo do documento HTML.
  4. Dentro do elemento <html>, adicione o elemento <head> para incluir metadados sobre o documento.
  5. No elemento <head>, adicione o elemento <title> para especificar o título da página.
  6. Ainda no elemento <head>, adicione alguns elementos <meta> para fornecer informações adicionais sobre o documento, como a codificação de caracteres e a descrição da página.
  7. Dentro do elemento <html>, adicione o elemento <body> para delimitar o conteúdo visível da página.

Ao concluir este desafio, o estagiário terá criado uma página HTML básica com a estrutura adequada e os elementos essenciais.

Desafio 2: Títulos e parágrafos

Objetivo: Adicionar títulos e parágrafos à sua página HTML usando as tags h1-h6 e p.

Tópicos a serem estudados:

  1. Elementos de título: h1, h2, h3, h4, h5, h6
  2. Elemento de parágrafo: p

Atividades propostas:

  1. Na sua página "index.html", dentro do elemento <body>, adicione um título usando a tag <h1>. Escolha um texto adequado para o título principal da sua página.
  2. Adicione um subtítulo usando a tag <h2>. Escolha um texto que seja um complemento ao título principal.
  3. Insira um parágrafo usando a tag <p>. Escreva um texto que descreva brevemente o conteúdo da sua página.
  4. Experimente adicionar mais títulos e parágrafos à sua página, utilizando diferentes níveis de títulos (h3-h6) e variações de texto nos parágrafos.

Ao concluir este desafio, o estagiário terá aprimorado suas habilidades em adicionar títulos e parágrafos em uma página HTML, utilizando as tags h1-h6 e p.

Desafio 3: Listas e tabelas

Objetivo: Incluir listas ordenadas, listas não ordenadas e tabelas na sua página HTML.

Tópicos a serem estudados:

  1. Listas ordenadas: <ol>, <li>
  2. Listas não ordenadas: <ul>, <li>
  3. Tabelas: <table>, <tr>, <th>, <td>

Atividades propostas:

  1. Na sua página "index.html", adicione uma lista não ordenada usando as tags <ul> e <li>. Insira pelo menos 3 itens na lista.
  2. Crie uma lista ordenada usando as tags <ol> e <li>. Insira pelo menos 3 itens na lista.
  3. Adicione uma tabela à sua página usando as tags <table>, <tr>, <th> e <td>. A tabela deve ter pelo menos 3 colunas e 3 linhas.
  4. Adicione cabeçalhos às colunas da tabela usando a tag <th>.
  5. Preencha as células da tabela com dados relevantes ao conteúdo da sua página.

Ao concluir este desafio, o estagiário terá aprimorado suas habilidades em criar listas ordenadas, listas não ordenadas e tabelas em uma página HTML, utilizando as tags

Objetivo: Adicionar imagens e links para outras páginas à sua página HTML.

Tópicos a serem estudados:

  1. Imagens: <img>
  2. Links: <a>

Atividades propostas:

  1. Adicione uma imagem à sua página "index.html" usando a tag <img>. Escolha uma imagem relevante ao conteúdo da sua página e certifique-se de definir os atributos src, alt e, opcionalmente, width e height.
  2. Crie um novo arquivo HTML chamado "about.html" com uma estrutura básica de HTML. Insira um título e um parágrafo breve sobre o conteúdo da página.
  3. Adicione um link na sua página "index.html" que direcione para a página "about.html" usando a tag <a> e o atributo href.
  4. Na página "about.html", adicione um link de volta para a página "index.html".
  5. Adicione pelo menos dois links externos na sua página "index.html" que direcionem para sites relevantes ao conteúdo da sua página. Utilize a tag <a> com o atributo href e, opcionalmente, adicione o atributo target com o valor _blank para abrir os links em uma nova aba.

Ao concluir este desafio, o estagiário terá aprimorado suas habilidades em adicionar imagens e links para outras páginas e sites externos em uma página HTML, utilizando as tags <img> e <a> e os atributos src, `

Desafio 5: Formulários e campos de entrada

Objetivo: Criar um formulário simples com campos de entrada, como texto, email, senha e botões.

Tópicos a serem estudados:

  1. Formulários: <form>
  2. Campos de entrada: <input>
  3. Tipos de campos de entrada: text, email, password, submit
  4. Rótulos: <label>

Atividades propostas:

  1. Crie um novo arquivo HTML chamado "form.html" com uma estrutura básica de HTML.
  2. Adicione um título e um subtítulo na página para indicar que é um formulário de contato.
  3. Na página "form.html", insira um formulário usando a tag <form>.
  4. Adicione um campo de entrada de texto para o nome do usuário com um rótulo <label> associado. Utilize o atributo type com valor text e o atributo id para conectar o campo de entrada com o rótulo.
  5. Adicione um campo de entrada de email para o endereço de email do usuário com um rótulo <label> associado. Utilize o atributo type com valor email e o atributo id para conectar o campo de entrada com o rótulo.
  6. Adicione um campo de entrada de senha para a senha do usuário com um rótulo <label> associado. Utilize o atributo type com valor password e o atributo id para conectar o campo de entrada com o rótulo.
  7. Adicione um botão para enviar o formulário usando um campo de entrada com atributo type com valor submit.
  8. Opcionalmente, aplique estilos CSS para melhorar a aparência do formulário e dos campos de entrada.

Ao concluir este desafio, o estagiário terá aprimorado suas habilidades em criar formulários simples com campos de entrada e rótulos, utilizando as tags <form>, <input> e <label> e os atributos type, id, name e for.

Desafio 6: Elementos semânticos

Objetivo: Incorporar elementos semânticos, como header, nav, main, article, section, aside e footer, à sua página HTML.

Tópicos a serem estudados:

  1. Elementos semânticos: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>

Atividades propostas:

  1. Crie um novo arquivo HTML chamado "semantic.html" com uma estrutura básica de HTML.
  2. Adicione um elemento <header> no topo da página, incluindo um título e um subtítulo.
  3. Insira um elemento <nav> dentro do <header> contendo uma lista não ordenada com links de navegação.
  4. Utilize o elemento <main> para englobar o conteúdo principal da página.
  5. Dentro de <main>, adicione um elemento <article> com título e texto, representando um post de blog, por exemplo.
  6. Ainda dentro de <main>, inclua um elemento <section> para separar uma parte do conteúdo, como uma seção de comentários ou informações adicionais.
  7. Adicione um elemento <aside> fora do <main> para conteúdo relacionado, mas não essencial para o conteúdo principal, como uma barra lateral com links ou anúncios.
  8. Inclua um elemento <footer> na parte inferior da página com informações de direitos autorais ou links adicionais.
  9. Opcionalmente, aplique estilos CSS para melhorar a aparência dos elementos semânticos.

Ao concluir este desafio, o estagiário terá aprimorado suas habilidades em utilizar elementos semânticos do HTML para estruturar a página de forma mais clara e acessível, proporcionando melhor compatibilidade com mecanismos de busca e tecnologias assistivas.

Desafio 7: Acessibilidade

Objetivo: Aprimore a acessibilidade da sua página HTML adicionando atributos alt às imagens e usando cabeçalhos e rótulos apropriados.

Tópicos a serem estudados:

  1. Atributo alt para imagens
  2. Uso apropriado de cabeçalhos (h1-h6)
  3. Rótulos para campos de formulário (<label>)

Atividades propostas:

  1. Revise sua página HTML criada nos desafios anteriores.
  2. Certifique-se de que todas as imagens incluídas na página possuam o atributo alt com uma descrição apropriada do conteúdo visual da imagem.
  3. Verifique se os cabeçalhos (h1-h6) estão sendo usados de maneira hierárquica e lógica para organizar o conteúdo da página.
  4. Para todos os campos de entrada do formulário, inclua elementos <label> associados aos campos correspondentes por meio do atributo for.
  5. Opcionalmente, explore outras técnicas de acessibilidade, como adicionar descrições de links e garantir um bom contraste de cores entre o texto e o fundo.

Ao concluir este desafio, o estagiário terá aprimorado suas habilidades em garantir a acessibilidade da página HTML, tornando o conteúdo mais amigável para usuários com necessidades especiais e melhorando a compatibilidade com tecnologias assistivas e mecanismos de busca.

Desafio 8: Validação HTML

Objetivo: Valide o código HTML da sua página usando o validador do W3C e corrija quaisquer erros encontrados.

Tópicos a serem estudados:

  1. Validação HTML
  2. Validador do W3C
  3. Correção de erros de HTML

Atividades propostas:

  1. Acesse o validador HTML do W3C no seguinte link: https://validator.w3.org/open in new window
  2. Cole o código HTML da sua página no campo apropriado e clique em "Check".
  3. Verifique se há erros e avisos no relatório gerado pelo validador.
  4. Corrija todos os erros encontrados no seu código HTML e valide novamente até que não haja mais erros.
  5. Opcionalmente, analise e resolva quaisquer avisos que o validador possa gerar.

Ao concluir este desafio, o estagiário terá garantido que sua página HTML esteja em conformidade com os padrões do W3C, o que ajuda a garantir uma melhor compatibilidade entre navegadores e plataformas e contribui para uma melhor experiência do usuário.

Last Updated:
Contributors: Maicon Cerutti