Aula 02

Trabalhando com Listas, Links e Imagens ✅

🎯 Objetivo da Aula:

• Aprender a criar listas e links em HTML.

• Inserir e estilizar imagens com HTML e CSS.

• Aplicar layout básico utilizando propriedades do CSS, como text-align e display.

1. Listas em HTML 📝

Existem dois tipos principais de listas em HTML:

• Lista não ordenada (<ul>)

• Lista ordenada (<ol>)

Exemplo de Lista Não Ordenada (ul):

<ul>

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

</ul>

• A tag <ul> cria uma lista onde os itens são marcados com pontos (ou outro marcador, dependendo do estilo aplicado).

Exemplo de Lista Ordenada (ol):

<ol>

    <li>Primeiro</li>

    <li>Segundo</li>

    <li>Terceiro</li>

</ol>

• A tag <ol> cria uma lista numerada, onde os itens são numerados automaticamente

2. Links em HTML 🔗

Os links são criados com a tag <a>, e o atributo href especifica o destino do link.

Exemplo de Link Externo:

<a href="https://www.google.com" target="_blank">Visite o Google</a>

• O href contém o endereço do link.

• O target="_blank" faz com que o link seja aberto em uma nova aba.

Exemplo de Link Interno:

html

Copiar

<a href="#section1">Ir para a Seção 1</a>

• O link interno direciona o usuário para outra parte da mesma página.

1 - 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 "Aula02"

04 - Cada exercício abaixo deverá ter um arquivo .html. Exemplo: exercício01.html, exercício02.html...

⚠️ Se a pasta html-css > "seu nome" já estiver no computador, crie apena a pasta "aula02"

📁 html-css > 📁 "seu nome" > 📁 aula02 > 🌐exercicio01.html

Exercício 1: Página de Viagem dos Sonhos ✈️
Crie uma página sobre o seu destino dos sonhos. Inclua:

• Um título (<h1>) com o nome do lugar.

• Um parágrafo (<p>) explicando por que você quer visitar esse lugar.

• Uma imagem do destino.

• Use CSS para dar um fundo de cor clara à página e alterar a cor do texto do título.

Exercício 2: Página de Música Favorita 🎶
Crie uma página sobre sua música ou banda favorita. Inclua:

• Um título (<h1>) com o nome da música/banda.

• Um parágrafo (<p>) explicando o que você mais gosta nessa música/banda.

• Uma lista não ordenada (<ul>) com 3 músicas dessa banda.

• Insira uma imagem da banda ou capa do álbum.

• Use CSS para mudar a cor do título para algo chamativo e o fundo para algo suave.

Exercício 3: Página de Filmes Favoritos 🎬
Crie uma página listando seus 3 filmes favoritos. Inclua:

• Um título (<h1>) com o nome do filme.

• Para cada filme, adicione:

  • O nome do filme em um título secundário (<h2>).

  • Uma breve descrição (em <p>).

  • Uma imagem do pôster do filme.

• Use CSS para centralizar as imagens e adicionar uma borda ao redor dos pôsteres.

Exercício 4: Página de Receitas de Culinária 🍴
Crie uma página com uma receita de sua escolha. Inclua:

• O nome da receita em <h1>.

• Uma lista ordenada (<ol>) com os ingredientes.

• Um parágrafo explicando o modo de preparo.

• Use CSS para estilizar o fundo da página e adicionar um sombra suave na lista de ingredientes.

Exercício 5: Página de Contato Simples 📧
Crie uma página de contato com os seguintes campos:

• Nome (campo de texto).

• E-mail (campo de e-mail).

• Mensagem (campo de texto).

• Um botão de enviar (<button>).

• Use CSS para centralizar os campos e aplicar bordas arredondadas nas caixas de entrada.

Exercício 6: Página de Eventos 🎉
Crie uma página para um evento fictício com:

• Um título (<h1>) com o nome do evento.

• Um parágrafo (<p>) explicando sobre o evento.

• Uma lista ordenada (<ol>) com a programação do evento.

• Um link para um site relacionado.

• Estilize a página com um fundo colorido suave e centralize o texto.

Exercício 7: Página de Hobbies 🎨
Crie uma página sobre um hobby de sua escolha. Inclua:

• Um título (<h1>) com o nome do hobby.

• Um parágrafo (<p>) explicando por que você gosta desse hobby.

• Uma lista não ordenada (<ul>) com 3 itens que você precisa para praticá-lo.

• Adicione uma imagem do seu hobby.

• Use CSS para dar uma cor de fundo suave e centralizar o conteúdo.

Exercício 8: Página de Biografia de uma Personalidade Famosa 🌟
Crie uma página sobre uma personalidade famosa. Inclua:

• Um título (<h1>) com o nome da pessoa.

• Um parágrafo (<p>) falando brevemente sobre a vida dessa pessoa.

• Uma imagem dessa pessoa.

• Estilize a página para que o texto tenha um fundo claro e a imagem tenha uma borda arredondada.

Exercício 9: Página de Galeria de Imagens 🖼️
Crie uma página com uma galeria de 4 imagens de sua escolha. Para cada imagem, faça o seguinte:

• Use a tag <img> para incluir as imagens.

• Adicione uma descrição de cada imagem em um parágrafo (<p>).

• Use CSS para alinhar as imagens horizontalmente e adicionar espaçamento entre elas.

Exercício 10: Página de Lista de Compras 🛒
Crie uma página com uma lista de compras. Inclua:

• Um título (<h1>) com o nome "Lista de Compras".

• Uma lista não ordenada (<ul>) com 5 itens de sua escolha.

• Um parágrafo explicando quando você precisa comprar esses itens.

• Use CSS para adicionar cores de fundo alternadas nas listas de itens.

Exercício 11: Página de Testemunhos 🗣️
Crie uma página com 3 testemunhos sobre um tema de sua escolha. Use a tag <blockquote> para cada testemunho. Estilize:

• O texto de cada testemunho com itálico.

• A borda de cada bloco de testemunho com uma linha fina e uma cor de fundo suave.

Exercício 12: Página de Tarefas do Dia 📅
Crie uma página simples com uma lista das tarefas do dia. Inclua:

• Um título (<h1>) com o nome "Tarefas do Dia".

• Uma lista ordenada (<ol>) com 5 tarefas que você precisa realizar.

• Use CSS para alterar a cor do texto e adicionar um ícone ao lado de cada tarefa.

Exercício 13: Página de Curiosidades 🔍
Crie uma página com curiosidades sobre um tema (como animais, espaço, história, etc.). Inclua:

• Um título (<h1>) com o tema.

• Três curiosidades em forma de listas (<ul>).

• Uma imagem relacionada.

• Use CSS para alterar o fundo da página e centrar as listas.

Exercício 14: Página de Citações Famosas 📝
Crie uma página com 5 citações famosas. Inclua:

• Um título (<h1>) com o nome "Citações Famosas".

• Cada citação deve estar dentro de uma tag <blockquote>.

• Use CSS para alinhamento centralizado e adicionar sombras nas citações.

Exercício 15: Página de Mapa de Localização 🗺️
Crie uma página simples com um título (<h1>) "Onde Estamos" e uma descrição (<p>) explicando onde você está. Inclua:

• Um mapa do Google (usando a tag <iframe>).

• Uma imagem do local.

• Use CSS para alinhamento centralizado e borda arredondada na imagem.