Embedded Files
Introdução ao HTML e CSS 🌐🎨
Aula 1: Prática de HTML e CSS
Objetivo da Aula:
Reforçar a prática com HTML e CSS.
Aplicar os conceitos de estruturação (HTML) e estilização (CSS).
Desenvolver habilidades práticas através de exercícios simples e objetivos.
Estrutura da Aula:
Recapitulação Rápida de HTML e CSS 📚
HTML: Revisar rapidamente as tags e sua estrutura básica (como <html>, <head>, <body>, <h1>, <p>, <ul>, etc.), focando na estruturação de conteúdo.
CSS: Revisar a sintaxe de seletores, propriedades e valores. Discutir como estilizar elementos básicos (como fontes, cores, margens, e alinhamento).
Exercícios Práticos com HTML e CSS ✍️
Exercício 1: Criando uma Página Simples
Crie uma página HTML com os seguintes elementos:Um título principal (<h1>) com o texto “Minha Primeira Página”.
Um parágrafo (<p>) de introdução sobre o conteúdo da página.
Uma lista não ordenada (<ul>) com 3 itens.
Estilize a página com CSS para:
Mudar a cor do texto do título.
Alterar a cor de fundo da página.
Ajustar o tamanho e o tipo da fonte do parágrafo.
Código Exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Minha Página de Apresentação</title>
<style>
body {
background-color: #f0f0f0;
}
h1 {
color: #FF5733;
}
</style>
</head>
<body>
<h1>Meu Nome</h1>
<p>Olá, meu nome é João e eu adoro aprender programação!</p>
</body>
</html
Parte 2: Convite para Evento 🎉
Exercício 2: Criando um Convite Simples
Faça um convite para um evento fictício. Inclua:Um título (<h1>) com o nome do evento.
Um parágrafo (<p>) explicando o evento.
Estilo a aplicar: mudar a cor de fundo e alinhamento do texto.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Convite para Evento</title>
<style>
body {
background-color: #e0f7fa;
text-align: center;
}
h1 {
color: #00838f;
}
</style>
</head>
<body>
<h1>Festa de Aniversário!</h1>
<p>Venha celebrar meu aniversário com muita diversão e alegria!</p>
</body>
</html>
Parte 3: Página sobre algo que você gosta 🌟
Exercício 3: Página sobre seu Hobby ou Interesse
Escolha algo que você gosta, como um hobby, filme ou livro. Inclua:Um título (<h1>) sobre o tema escolhido.
Um parágrafo (<p>) explicando o que é e por que você gosta disso.
Uma imagem usando <img>.
Estilo a aplicar: mudar a cor de fundo e mudar a cor do texto.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Minha Paixão por Música</title>
<style>
body {
background-color: #fce4ec;
}
h1 {
color: #c2185b;
}
</style>
</head>
<body>
<h1>Música é minha paixão!</h1>
<p>Eu amo música porque ela me faz sentir emoções e me ajuda a relaxar.</p>
<img src="imagem-musica.jpg" alt="Imagem de música" width="300">
</body>
</html>
Hora do exercício! 🏋️🔥
01 - Crie uma pasta chamada HTML-CSS 📁
02 - Dentro da pasta HTML-CSS, crie uma pasta com seu nome.
03 - Dentro desta pasta, crie uma pasta chamada "Aula01"
04 - Cada exercício abaixo deverá ter um arquivo .html. Exemplo: exercício01.html, exercício02.html...
📁 html-css > 📁 "seu nome" > 📁 aula01 > 🌐exercicio01.html
💠Página Pessoal Simples
Crie uma página com seu nome no título (<title>) e informações pessoais em um parágrafo. Use a cor verde para o texto e o fundo amarelo. Adicione uma imagem.
💠Página de Convite
Crie uma página de convite para um evento fictício. Coloque um título principal, um subtítulo e uma descrição do evento. Altere a cor de fundo para azul claro e o texto para branco.
💠Página Sobre um Hobby
Crie uma página sobre um hobby de sua escolha. Adicione um título e um parágrafo explicando o que é. Insira uma imagem relacionada ao hobby e faça o texto centralizado na página.
💠Lista de Tarefas
Crie uma lista não ordenada (<ul>) com cinco tarefas que você precisa fazer durante o dia. Estilize a lista com marcadores de círculo e altere a cor do texto para roxo.
💠Biografia com Estilo
Crie uma página sobre uma pessoa famosa. Adicione uma imagem dela, um título com o nome e dois parágrafos: um sobre sua biografia e outro sobre seus feitos. Use bordas arredondadas nas imagens e adicione uma cor de fundo suave.
💠Página de Contato
Crie uma página simples de contato com:
Nome (campo de texto).
E-mail (campo de e-mail).
Mensagem (campo de texto).
Use bordas finas e sombra para dar destaque aos campos.
💠Página de Produtos
Crie uma página com uma lista de 3 produtos. Para cada produto, adicione o nome, preço e uma imagem. Coloque um fundo cinza claro e um alinhamento central.
💠Tabela de Preços
Crie uma tabela (<table>) com 3 colunas e 4 linhas. Na primeira linha, coloque os títulos: Produto, Preço e Descrição. Use bordas suaves e altere a cor de fundo das células de cabeçalho para azul claro.
💠Página de Receitas
Crie uma página de receita simples. Insira um título, uma lista ordenada com os ingredientes e um parágrafo com as instruções. Use imagens pequenas dos ingredientes e dê destaque ao título com uma cor diferente.
💠Página com Links
Crie uma página com um título e uma lista de links (use a tag <a>). Altere a cor dos links para roxo e, quando o usuário passar o mouse, a cor do link deve mudar para vermelho.
💠Página de Testemunhos
Crie uma página com três testemunhos. Use as tags <blockquote> para destacar cada um. Estilize o texto com itálico e adicione uma borda fina ao redor de cada testemunho.
💠Página com Cabeçalho e Rodapé
Crie uma página com um cabeçalho (<header>) contendo o nome do site e um rodapé (<footer>) com direitos autorais. Estilize o cabeçalho com uma cor de fundo escura e o rodapé com uma cor mais clara.
💠Página de Filmes
Crie uma página listando seus filmes favoritos. Adicione o nome do filme, uma descrição e a imagem da capa. Use um layout de 2 colunas (imagem à esquerda, descrição à direita).
💠Página de Portfolio
Crie uma página de portfólio com 3 seções: um título com seu nome, uma lista com suas habilidades e um link para seu LinkedIn. Estilize o fundo da página para cinza escuro e o texto para branco.
💠Página de Clima
Crie uma página com informações sobre o clima de sua cidade. Adicione o nome da cidade, a temperatura e uma imagem de clima (sol, chuva, etc.). Use cores vibrantes para o fundo e cores suaves para o texto.
Google Sites
Report abuse