Esta lista de exercícios tem como objetivo permitir exercitar e reforçar o aprendizado das diversas tags estudadas no curso de HTML.
Crie o seu currículo em HTML puro. O seu objetivo com este exercício é colocar em prática o aprendizado das tags de texto e semântica. Seja uma pessoa criativa e explore as inúmeras possibilidades. Inclua títulos com as várias hierarquias, parágrafos, destaques (itálico e negrito), links, citações, listas ordenadas e não ordenadas, quebras de linha, código, linhas horizontais e imagem. Preste atenção na hierarquia e semântica das tags.
Faça um cadastro em HTML puro. Ele não precisa funcionar. Coloque em prática o aprendizado das tags de formulário. Explore todas as tags possíveis como os vários tipos de input (text, radio, checkbox, email, url, tel), áreas de texto, botão, menus de seleção (com seleção única e multi-seleção), rótulos (labels), listas de sugestões (datalist), agrupamento de campos (fieldset e legend). Implemente validações usando as propriedades HTML. Não é permitido usar CSS e JavaScript.
Implemente uma lista de tarefas em HTML puro. Ela não precisa ser funcional mas deve conter a estrutura para representar os elementos e as funcionalidades. A implementação deve conter um campo de texto para escrever a tarefa e um botão para adicioná-la. Ela deve conter também uma lista com opções para marcar como concluída e excluir a tarefa. A implementação também deve conter um texto que resume quantas tarefas existem, quantas foram concluídas e quantas ainda estão pendentes.
Criar uma tabela em HTML que lista as capitais dos estados do Brasil agrupadas por região. A tabela deverá conter as seguintes colunas: região, capital, estado e população. O valor da região não deve se repetir e, para isso, use uma célula mesclada. Na última linha coloque a soma total de todas as capitais. Use como exemplo os dados da Wikipedia em https://pt.wikipedia.org/wiki/Lista_de_capitais_do_Brasil_por_popula%C3%A7%C3%A3o.
Crie a estrutura básica de uma página de notícias usando apenas HTML. Utilize a tag <header> para incluir o nome do site e um menu de navegação com a tag <nav>. No conteúdo principal, use a tag <main> para abrigar duas seções: uma com artigos de notícias (<section> contendo múltiplos <article>) e outra com conteúdos complementares usando <aside> (ex: links relacionados ou anúncios). Finalize a página com um <footer> que exiba informações como direitos autorais ou contato. Não utilize CSS ou JavaScript. O foco é praticar a estruturação semântica do HTML.
Crie um menu de nevegação em HTML para o seu site pessoal. O menu deverá conter a logo, os itens de menu e uma seção de busca. A logo deverá levar para a página inicial do site. Os itens de menu serão biografia, currículo, comunidade e contato e deverão levar para as páginas correspondentes. A seção de busca deverá ter um campo de busca e um botão com a ação de buscar. A implementação não deve conter CSS e JavaScript, apenas HTML.
Crie uma seção de perguntas e respostas em HTML puro. A seção deve conter as perguntas e respostas abaixo e deve utilizar as novas HTML details e summary na sua implementação.
1. O que significa HTML?
HTML significa HyperText Markup Language, ou Linguagem de Marcação de Hipertexto.
2. Quem criou o HTML?
Foi criado por Tim Berners-Lee em 1991 para facilitar o compartilhamento de informações científicas.
3. HTML é uma linguagem de programação?
Não. É uma linguagem de marcação usada para estruturar conteúdo na web.
4. Qual foi a primeira versão do HTML?
A primeira versão foi lançada em 1991, mas a primeira padronizada foi o HTML 2.0, em 1995.
5. Qual é a tag usada para inserir uma imagem?
A tag <img> é usada para inserir imagens em uma página HTML.
Crie uma pasta no seu computador chamada exercicios-html e crie um arquivo para cada exercício de acordo com o seu número. Segue o exemplo da estrutura abaixo. Ao longo da implementação dos exercícios, atualize o repositório no GitHub com o mesmo e envie para a avaliação. Obrigado! 😃
- exercicios-html
|- 01-curriculo.html
|- 02-cadastro.html
|- 03-lista-de-tarefas.html