Listas

De Manuais Informática - IES San Clemente.
Ir a la navegación Ir a la búsqueda

Listas

As listas existen dende sempre na linguaxe HTML, vexamos os tipos existentes:

Listas non numeradas

As listas non numeradas empréganse para coleccións de elementos relacionados que aparecen sen ningún tipo de orde determinada. En (X)HTML as listas non numeradas indícanse co elemento <ul> (Unnumbered List). O contido dun <ul> limítase a un ou máis elementos de lista <li> (List Item). Estes elementos de lista son elementos de bloque, polo que sempre se mostrarán nunha nova liña.

  • ul:
<ul> ... </ul>
Atributos: id, class, style, title
Atributos obsoletos:
- compact
- type="disc | circle | square"
  • li:
<li> ... </li>
Atributos: id, class, style, title
Atributos obsoletos:
- type="formato"
- value="número"

Exemplo:

<ul>
  <li>Listas non numeradas</li>
  <li>Listas numeradas</li>
  <li>Listas de definición</li>
</ul>
Recordade que en (X)HTML é obrigatorio pechar todas as etiquetas.

Listas numeradas

As listas numeradas empréganse para listas nas que a secuencia dos elementos é importante. As listas numeradas indícanse co elemento <ol> (Ordered List) e deben incluír un ou máis elementos de lista (<li>). Trátanse de elementos de bloque.

  • ol:
<ol> ... </ol>
Atributos: id, class, style, title
Atributos obsoletos:
- compact
- start="number"
- type = "1 | A | a | I | i"

Exemplo:

<ol>
  <li>Instalar o sistema operativo</li>
  <li>Actualizar o sistema operativo</li>
  <li>Instalar o resto do software</li>
 </ol>
Recordade que en (X)HTML é obrigatorio pechar todas as etiquetas.

Listas de definición

Este tipo emprégase para listas que consisten en parellas de termos e definicións. As listas de definición están marcadas como elementos <dl> (Definition List). O contido dun dl é algún número de termos (indicados polo elemento <dt> - Definition Term) e definicións (indicados polo elemento <dd>). O elemento dt (termo) só pode conter elementos en liña. Todos os elementos empregados nas listas de definición son elementos a nivel de bloque e comezarán por unha nova liña.

  • dl:
<dl> ... </dl>
Atributos: id, class, style, title, compact
  • dd:
<dd> ... </dd>
Atributos: id, class, style, title

A estrutura das listas de definición é algo distinta das listas vistas ata o de agora. Estas listas están compostas por elementos dt e dd, e estes elementos contidos nun elemento dl, tal e como pode verse no seguinte exemplo:

Exemplo:

 <dl>
  <dt>em</dt>
    <dd>Indica texto enfatizado. Renderízase en cursiva.</dd>
  <dt>strong</dt>
    <dd>Indica texto moi enfatizado. Renderízase en negra.</dd>
 </dl>
Non é necesario que os termos e as definicións aparezan alternándose. Pódense introducir dous termos seguidos e logo unha definición (por exemplo).

Aniñar listas

Os elementos de listas poden aniñarse noutras listas. Por exemplo, pódese aniñar unha lista numerada nunha de definición, ou viceversa.

Vexamos un exemplo:

Sistemas Operativos:
<ol>
  <li>Windows 
    <ul>
      <li>Windows Vista</li>
      <li>Windows XP</li>
      <li>Windows 98</li>
    </ul>
  </li>
  <li>Linux</li>
  <li>MacOS X</li>
</ol>

O código anterior dará como resultado:

Sistemas Operativos:
  1. Windows
    • Windows Vista
    • Windows XP
    • Windows 98
  2. Linux
  3. MacOS X

--Vieites e Arribi 12:16 21 oct 2010 (BST)