bg cover

Listas e textos

Prof. Me. Danilo Bueno

bg right:45%

Listas

Usadas para organizar e apresentar informações
Ex: listas de compras, lista de afazeres, lista de convidados, listas de ingredientes, testes de múltipla escolha etc…

Listas na Web

Estruturas fundamentais na Web
Ex. comuns: menus de navegação, listas de produtos, índices de conteúdo, processos passo a passo, especificações técnicas
IFSP Itapetininga, G1, Wikipedia

Listas em HTML

Tipo	Tag	Uso Principal	Marcador
Não Ordenada	`<ul>`	Itens sem ordem específica	Bolinha (•)
Ordenada	`<ol>`	Sequências numéricas	Números (1.)
Definição	`<dl>`	Termos e descrições	Sem marcador

“A escolha do tipo de lista a ser usada — ou se deve ou não usar uma lista — depende do conteúdo e da opção semanticamente mais apropriada para exibir esse conteúdo.”

Listas Não Ordenadas (UL)

<ul> é o elemento pai para listas não ordenadas;
Os itens de lista são representados por <li>;

<ul>
    <li>Prison Song</li>
    <li>Question</li>
    <li>Roulette</li>
    <li>Radio/Video</li>
</ul>

Os únicos filhos de um <ul> são um ou mais elementos de item de lista <li>

Listas Ordenadas (OL)

<ol> é o elemento pai para listas ordenadas;
Os itens de lista são representados por <li>;

<ol>
    <li>Ferver 500ml de água</li>
    <li>Retirar o macarrão do pacote</li>
    <li>Colocar o macarrão na panela</li>
    <li>Cozinhar por 3 minutos</li>
    <li>Temperar a gosto</li>
</ol>

Listas Ordenadas (OL)

Atributos:

type: Define o marcador (1, A, a, I, i)
start: Define o valor inicial
reversed: Ordem decrescente

Listas de Definição (DL)

<dl>
  <dt>API</dt>
  <dd>Interface de Programação de Aplicações</dd>
  
  <dt>DOM</dt>
  <dd>Modelo de Objeto do Documento</dd>
  
  <dt>SEO</dt>
  <dd>Otimização para Motores de Busca</dd>
</dl>

Listas de Definição (DL)

<dl>: Elemento pai para listas de definição;
<dt>: Termo a ser definido
<dd>: Descrição/definição do termo

Aplicações:

Glossários técnicos, Dicionários, Metadados de documentação

Listas Aninhadas

Cada lista pode ser colocada dentro de outra lista
O truque com o aninhamento das listas é saber onde começar e terminar cada lista e item de lista.
Uma boa estratégia para aninhar listas é pensar isoladamente cada parte (ou nível) da lista, para depois juntar as partes.

IMPORTANTE: o único elemento que pode estar dentro dos elementos <ul> e <ol> é o elemento <li>

Listas

bg right contain

<ol>
    <li>Passear com o cachorro</li>
    <li>Lavar a louça</li>
    <li>
        Ir ao mercado e comprar:
        <ul>
            <li>Leite</li>
            <li>Pão</li>
            <li>Queijo</li>
        </ul>
    </li>
    <li>Cortar a grama</li>
    <li>Fazer o jantar</li>
</ol>

Customizar com CSS

Remover os marcadores
Alterar o estilo do marcador ou do número.
Criar marcadores personalizados

bg right contain

Mais texto

O HTML foi originalmente criado para compartilhar documentos de texto, e não vídeos de gatos.

Citações

<blockquote>: citação em bloco (longa mais de 3 linhas).
<q>: citação em linha (curta de até 3 linhas).
<cite>: citação de fonte. Usado para referenciar o autor ou a obra de uma citação.
atributo cite: Especifica a fonte da citação (pode ser usado em <blockquote> e <q>)

Citação em bloco (longa)

<blockquote
  cite="https://html.spec.whatwg.org/the-blockquote-element">
  <p>O elemento <blockquote> representa uma seção citada de outra fonte.</p>
  <p>O conteúdo dentro de um blockquote deve ser citado de outra fonte,
    cujo endereço, se houver, pode ser citado no atributo "cite".
    Se o atributo "cite" estiver presente, ele deve ser uma URL válida.
  </p>
</blockquote>

Citação em linha (curta)

<p>A página sobre do W3C diz que sua missão é: 
  <q cite="https://www.w3.org/Consortium/">
    Levar a Web ao seu pleno potencial, desenvolvendo protocolos 
    e diretrizes que garantam o crescimento a longo prazo da Web
  </q>. Eu discordo dessa missão. </p>

Abreviações

<abbr>: usado para abreviar palavras ou acrônimos.

<p>Usamos o 
    <abbr title="Hypertext Markup Language">HTML</abbr> 
para estruturar nossas páginas web, e o 
    <abbr title="Cascading Style Sheets">CSS</abbr>
para estilizar.</p>

Endereço

<address>: usado para definir informações de contato do autor ou proprietário de um documento.

<address>
  <p>Homer Jay Simpson</p>
  <p>Email: [email protected]</p>
</address>

Sobrescrito e subscrito

<sup>: usado para definir texto sobrescrito (ex: potência).
<sub>: usado para definir texto subscrito (ex: fórmulas químicas).

<p>
  Formula da cafeína:
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.
</p>
<p>Se x<sup>2</sup> é 9, x deve ser 3 ou -3.</p>

Código

<code>: usado para definir um trecho de código genérico.
<pre>: usado para definir um bloco de código (preserva espaços e quebras de linha).
<var>: o nome de uma variável em uma expressão matemática ou um contexto de programação.
<kbd>: usado para definir uma entrada do teclado.
<samp>: usado para definir um exemplo de saída de computador.

Datas

<time>: representa um período específico no tempo;
Existem diversas maneiras de representar datas (ex: 20/01/16, 20th January 2016, Jan 20 2016, 20/01/2016).
Maneira não ambígua de representar datas.

<time datetime="2023-10-01">1º de Outubro de 2023</time>

HTML Entities

Caracteres especiais usados para representar caracteres reservados em HTML (+ de 2000 entidades disponíveis).
Existem 4 entidades HTML principais:
- <: menor que
- >: maior que
- &: & (e comercial)
- ": aspas duplas

HTML Entities

Caso queira mostrar < ou >, você deve usar as entidades HTML correspondentes:

<p>A tag &lt;p&gt; é utilizada para representar um parágrafo.</p>

Emojis

Representações gráficas de emoções, objetos, animais, etc.
Podem ser inseridos em HTML usando a entidade correspondente ou diretamente como caracteres.

<p>Eu amo 🍕 e &#129363;</p>

Obrigado!

[email protected] · website/docs · github