Listas em HTML

Um efeito muito utilizado em qualquer documento é a caracterização de listas. Em HTML/XHTML, é possível utilizar dois tipos de listas: listas ordenadas e as não ordenadas. Neste post veja listas em HTML.

Listas não ordenadas são determinadas pela tag UL. São marcadas com caracteres simbólicos como círculos, quadrados e discos:

 <ul>
    <li>Nintendo Switch</li>
    <li>Playstation 4</li>
    <li>X Box One</li>
 </ul>

• Nintendo Switch
• Playstation 4
• X Box One

Listas ordenadas são determinadas pela tag OL. Listas ordenadas são marcadas com caracteres como números, letras e algarismos romanos.

Assim como a lista não ordenada, todo item da lista fica enclausurado na tag LI:

<ol>
  <li>Nintendo</li>
  <li>Sony</li>
  <li>Microsoft</li>
<ol>

1. Nintendo
2. Sony
3. Microsoft

A diferença é que não precisamos nos preocupar com a sequência, pois isso o próprio browser se encarrega de cuidar.

Tanto a tag OL quanto a tag UL são aninháveis, ou seja, uma pode existir dentro da outra.

Lista de definição

Listas de definição são usadas para marcar termos e definições. Também podem ser usadas para fazer corresponder entre si, quaisquer itens que tenham um relacionamento direto uns com os outros (conjuntos de nomes/valores):

 <dl>
    <dt>NES</dt>
    <dd>Videogame de 8 bits</dd>
    <dt>SuperNES</dt>
    <dd>Videogame de 16 bits</dd>
    <dt>Playstation</dt>
    <dd>Videogame de 32 bits</dd>
    <dt>N64</dt>
    <dd>Videogame de 64 bits</dd>
 </dl>

NES

Videogame de 8 bits

SuperNES

Videogame de 16 bits

Playstation

Videogame de 32 bits

N64

Videogame de 64 bits

Listas aninhadas

As listas aninhadas combinam as listas ordenadas com as listas não ordenadas para criar estruturas mais complexas:

 <ul>
    <li>
       Nintendo
       <ul>
          <li>
             Nintendo 64
              <ul>
                 <li>Super Mario 64</li>
                 <li>Zelda: Ocarina of Time</li>
                 <li>Starfox 64</li>
              </ul>
          </li>          
          <li>
            Wii
              <ul>
                <li> Super Mario Galaxy</li>
                <li> Legend of Zelda: Twilight Princess</li>
                <li>Mario Kart Wii</li>
              </ul>
          </li>   
      </ul> 
   </li>
 </ul> 

• Nintendo
  • Nintendo 64
    • Super Mario 64
    • Zelda: Ocarina of Time
    • Starfox 64
  • Wii
    • Super Mario Galaxy
    • Legend of Zelda: Twilight Princess
    • Mario Kart Wii

Links em HTML

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: html | listas

Seu computador está lento, travando ou dando tela azul? E toda vez que isso acontece você precisa gastar dinheiro com assistência técnica?

A verdade é que continuar sem esse conhecimento pode estar custando muito mais do que você imagina.

Você pode economizar centenas ou até milhares de reais ao longo do tempo fazendo você mesmo a manutenção dos seus computadores. E, se decidir prestar serviços, esse conhecimento também pode se transformar em uma fonte de renda, que pode variar de R$2.000 a R$5.000 por mês ou mais.

Tudo isso com aulas práticas, objetivas e focadas no que realmente funciona, sem enrolação:

✔ Resolver seus próprios problemas sem depender de ninguém
✔ Ganhar dinheiro com manutenção e suporte técnico
✔ Ou até entrar de vez no mercado de TI

A decisão é sua: continuar gastando dinheiro sempre que o computador apresentar um problema ou aprender uma habilidade que pode fazer você economizar e até gerar uma nova fonte de renda.

👉 CLIQUE AQUI AGORA e veja todos os detalhes antes que essa oportunidade passe: