Esta é a segunda aula da oficina de HTML produzida pelo grupo P²-KLH – ACT Unicamp/Limeira
Introdução
Antes de partir para o próximo tópico da nossa oficina vamos relembrar o que vimos na aula anterior.
Relembrando.
- HTML é uma linguagem de marcação que possui <tags>
- O documento .html possui uma estrutura básica.
- Ao abrir a página (documento .html) no navegador ele lê as tags e apresenta de forma visual
- Tags apresentam abertura e fechamento na maioria dos casos (<input /> )
- Tags possuem atributos
- Inserção de texto com a tag <p>
- Inserção de imagens a página com a tag <img>
Estrutura básica de uma página HTML
<!DOCTYPE html>
<html>
<head>
<title>Título</title>
</head>
<body>
</body>
</html>
Dica: Recomendamos fortemente o site a seguir como fonte de estudos. Nele é possível encontrar tutoriais e conteúdo de referência com a documentação sobre as tags para montar suas páginas.
https://www.w3schools.com/html/default.asp
Criando Listas
Listas são muito úteis para apresentar um conteúdo de forma organizada. Sendo assim, apresentamos 3 tipos de listas que podemos usar em nossas páginas html, sendo elas:
- Ordenadas
- <ol> </ol>
- Desordenadas
- <ul> </ul>
- Definições
- <dl> </dl>
Utilize o editor de texto de sua preferência ou o bloco de notas para ir acompanhando na prática. Preferimos usar o Visual Code mas fique a vontade para utilizar outro. No editor preencha a versão do HTML(DOCTYPE), coloque as tags html, head, title e o body seguindo a estrutura que já mostramos anteriormente.
Na hora de salvar o arquivo lembre-se de especificar a extensão .html para poder abrir no navegador.
De volta para o código inclua as três listas citadas acima, listas ordenadas, listas desordenadas e listas de definições. Mas calma que já vamos explicar certinho.
Como itens são definidos?
Cada item da lista é definido pela tag <li> </li> no caso de listas ordenadas e não ordenadas. Já nas listas de definição usamos a tag </dt> para expor um item e <dd></dd> para defini-lo.
As listas ordenadas também possuem a possibilidade de definir qual o valor que a lista irá iniciar através do atributo start
Vamos finalmente para os exemplos.
Listas Não Ordenadas
Listas não ordenadas servem para listar itens sem a preocupação com a sequência, por isso geralmente possuem bullets( pontos preto)na frente de cada item.
No editor de texto:
<ul>
<li>Primeiro Item</li>
<li>Segundo Item</li>
<li>Terceiro Item</li>
</ul>
No navegador :
- Primeiro Item
- Segundo Item
- Terceiro Item
Listas Ordenadas
Listas ordenadas também são listas de itens mas possuem uma sequência numerada.
No editor de texto:
ol>
<li>Primeiro Item</li>
<li>Segundo Item</li>
<li>Terceiro Item</li>
</ol>
No navegador :
- Primeiro Item
- Segundo Item
- Terceiro Item
Listas de Definições
Essa é uma lista mais utilizadas para explicação de termos. No editor de texto fica assim:
<dl>
<dt>Massa</dt>
<dd>Ovo, farinha, leite…</dd>
<dt>Cobertura</dt>
<dd>Leite condensado, achocolatado…</dd>
</dl>
Já no navegador teremos esse resultado:
- Massa
- Ovo, farinha, leite…
- Cobertura
- Leite condensado, achocolatado…
Elas possuem o atributo type para mudar o estilo da lista. Aí você pode customizar sua lista da forma que achar melhor.
- Lista ordenada com números romanos
- Lista ordenada com alfabeto
- Lista desordenada com o símbolo de um quadrado
Nas listas você pode colocar parágrafos, quebras de linha, imagens, vínculos, outras listas,
Agora sobre as lista de definições é dito como um título e descrição poderá ser definido através das tags <dt> </dt> e <dd> </dd> respectivamente, após isso é dado exemplos práticos no código de como utilizá-los e como será retornado.
Por fim, um exercício prático com a instrução para que os alunos façam uma lista de compras do supermercado como treinamento.
Obrigada por acompanhar a aula 2, Não esqueça de fazer os exercícios extras. Até a próxima !
Baixe aqui a lista de exercíricios >> https://drive.google.com/drive/folders/16b6Z79ETTOAv-O18ydy3d2zf4_n4ICiF?usp=sharing
