HTML

  1. Estrutura Fundamental: Crie um arquivo HTML chamado exercicio1.html que seja reconhecido pelos navegadores como um documento HTML5. Configure o idioma principal da página para português do Brasil e a codificação de caracteres para UTF-8. Dê à página o título "Meu Primeiro Desafio HTML" (que deve aparecer na aba do navegador).
  2. Conteúdo Textual: No corpo do seu arquivo exercicio1.html, adicione um título que seja o mais importante da página com o texto "Explorando o HTML". Logo abaixo, insira um subtítulo de segunda importância com "Elementos de Texto". Em seguida, crie dois blocos de texto distintos (parágrafos). O primeiro deve falar sobre sua expectativa com HTML. O segundo deve explicar o que são tags, e no meio dessa explicação, force o texto seguinte a começar em uma nova linha.
  3. Destaque e Ênfase: No primeiro bloco de texto do exercício anterior, identifique uma palavra ou frase que você considera muito importante e faça com que ela seja exibida com forte ênfase (geralmente em negrito). Em outra parte do mesmo texto, escolha uma palavra para receber uma ênfase mais suave (geralmente em itálico).
  4. Organizando Informações: Crie um novo arquivo organizacao.html. Nele, apresente uma lista de suas 3 comidas favoritas, onde a ordem não importa. Depois, crie um guia passo a passo (com pelo menos 3 passos) de como você organiza seus estudos, onde a ordem é crucial.
  5. Navegação Web: Crie um arquivo navegando.html. Insira um link que direcione o usuário para um motor de busca popular (como Google ou DuckDuckGo) e configure este link para abrir em uma nova aba do navegador. Crie também um segundo arquivo HTML chamado detalhes.html na mesma pasta (coloque um título simples nele, como "Página de Detalhes") e, na navegando.html, adicione um link que leve o usuário para esta página detalhes.html.
  6. Galeria Simples: Crie um arquivo galeria_simples.html. Exiba uma imagem da sua escolha (pode ser de um link da internet) na página. Forneça um texto alternativo que descreva a imagem caso ela não carregue. Ajuste a largura da imagem para que ela não ultrapasse 400 pixels na tela.
  7. Agenda Semanal: Crie um arquivo agenda.html. Monte uma representação visual de uma agenda simples para dois dias da semana (ex: Segunda e Terça), mostrando atividades para dois horários diferentes em cada dia. Use cabeçalhos para identificar os horários e os dias. Nomeie esta agenda como "Minhas Atividades".
  8. Formulário de Feedback: Crie um arquivo feedback.html. Construa uma área onde os usuários possam inserir seu nome completo e seu endereço de e-mail para enviar um feedback. Adicione etiquetas descritivas para cada campo de entrada. Inclua também um botão que indique a ação de "Enviar Feedback".
  9. Esqueleto de um Site de Notícias: Crie um arquivo portal.html. Usando elementos que descrevam o significado de cada parte, monte a estrutura principal de uma página de portal de notícias. Deve haver uma área para o nome do portal (cabeçalho principal), uma área para os links de navegação (menu), a área principal onde as notícias ficariam, um espaço para um artigo de notícia específico (com seu próprio título e parágrafos), e uma área no final da página para informações de copyright (rodapé).
  10. Anotações no Código: No arquivo portal.html do exercício anterior, deixe "anotações para você mesmo(a)" (que não apareçam na página renderizada) explicando o propósito da área de navegação principal e da área do artigo de notícia.

CSS

  1. Estilo Direto no Elemento: Crie um arquivo estilo_direto.html. Adicione um parágrafo. Sem usar arquivos CSS externos ou a tag <style>, faça o texto deste parágrafo aparecer na cor roxa e com um tamanho de 24 pixels.
  2. Estilos na Cabeça do HTML: Crie um arquivo estilo_head.html. Adicione um título de nível 1 e um parágrafo. Diretamente na tag <head> do documento HTML, adicione as regras necessárias para que o título seja exibido na cor verde-escura e todo o texto do parágrafo utilize a família de fontes "Arial" (ou uma fonte genérica sem serifa como alternativa).
  3. Folha de Estilo Externa: Crie dois arquivos: pagina_externa.html e meus_estilos.css. Na página HTML, adicione um título de nível e um parágrafo. Conecte a folha de estilo externa à sua página HTML. Na folha de estilo, faça com que o título apareça na cor laranja e com seu texto alinhado ao centro da página. Faça com que o parágrafo tenha uma cor de fundo amarelo-pálido.
  4. Identificadores e Classes: Utilizando os arquivos do exercício anterior (pagina_externa.html e meus_estilos.css):
  5. Estilo em Grupo: Na sua folha de estilo meus_estilos.css, adicione uma regra que faça com que todos os títulos de nível 1, 2 e 3 (mesmo que nem todos existam no seu HTML ainda) utilizem a família de fontes "Georgia" (ou uma fonte genérica com serifa) e tenham um espaçamento entre letras de 2 pixels.
  6. Trabalhando com Cores: Crie um arquivo explorando_cores.html e uma folha de estilo externa (estilos_explorando_cores.css) para ele. Adicione uma div contendo um parágrafo. Na folha de estilo, para a div:
  7. Formatação Avançada de Texto: No explorando_cores.html, adicione um segundo parágrafo com um id específico. Na folha de estilo, formate este novo parágrafo para que ele tenha um tamanho de fonte de 1.1em, uma altura de linha que seja 1.5 vezes o tamanho da fonte, todo o texto em letras minúsculas, e uma sombra de texto sutil (ex: deslocada 2px para baixo e para a direita, com um leve desfoque e cor cinza).