Oficina HTML 5 – Aula 2
Aula html 2

Esta é a segunda aula da oficina de HTML produzida pelo grupo P²-KLH – ACT Unicamp/Limeira

Inscreva-se no canal!

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 :

  1. Primeiro Item
  2. Segundo Item
  3. 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