SdevLab – Tutorial | HTML List

Eae galera!
O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre HTML. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, siga para a página que direciona o aprendizado básico.
Boa leitura!

ATUALIZAÇÃO (06/08/2015): Este post foi escrito com base nos tutoriais do W3C para HTML 4.1. O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de HTML 5, logo não é mais válido. O conteúdo está correto, mas não é sobre a versão mais atual!

HTML List

Montar uma lista em html é muito simples. Podemos montar uma lista ordenada como a divisão de capítulos de um livro, podemos montar uma lista não ordenada, ou seja, um item da lista não está ordenado de nenhuma forma em relação à outro, ou então podemos montar uma lista de definições.
Segue abaixo um exemplo com os 3 tipos. Copie e cole o  código no Bloco de notas e salve como teste16.html:

<html>
   <head>
      <title>
           Teste 16
      </title>
   </head>
   <body>
      <p>
           Exemplo de lista não ordenada.
      </p>
      <ul>
           <li>
                Item 1
           </li>
           <li>
                Item 2
           </li>
      </ul>
      <p>
           Exemplo de lista ordenada.
      </p>
      <ol>
           <li>
                Item 1
           </li>
           <li>
                Item 2
           </li>
      </ol>
      <p>
           Exemplo de lista de definição.
      </p>
      <dl>
           <dt>
                Item que estamos definindo
           </dt>
                <dd>
                     caracteristica 1
                </dd>
                <dd>
                     caracteristica 2
                </dd>
            <dt>
                Item 2 que estamos definindo
            </dt>
                <dd>
                     caracteristica
                </dd>
      </dl>
   </body>
</html>

Explicando o exemplo acima, a primeira lista que aparece é a lista não ordenada. Esta lista começa e termina nas tags <ul> e </ul> e seus itens ficam entre as tags <li> e </li>.

A segunda lista do exemplo é a lista ordenada, que é bastante semelhante em termos de tags à lista não ordenada. A lista começa e termina com as tags <ol> e </ol> e seus itens funcionam da mesma maneira da  não ordenada.

O terceiro exemplo é uma lista de definição. Esta é um pouco diferente das outras duas, pois usa uma tag extra. Ela começa e termina nas tags <dl> e </dl> e seus itens ficam entre as tags <dt> e </dt>. A definição dos termos da lista ficam entre as tags <dd> e </dd>.

Para modificar o estilo das listas, tente o atributo type em uma das combinações dos trechos abaixo:


<ol type="A">
<ol type="a">
<ol type="I">
<ol type="i"
<ul type="disc">
<ul type="circle">
<ul type="square">

Tente intercalar diferentes tipos de lista para treinar estas tags. Este foi o tutorial sobre listas, talvez o mais simples da série.

Até o próximo tutorial!
😉

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-html41
Contribua!

Fonte de pesquisa: w3schools.com/html

Um comentário sobre “SdevLab – Tutorial | HTML List

  1. Pingback: SdevLab – Curso| Aprenda HTML 4.1 Online | Sanoj's devLab

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s