Listas – Aprenda HTML – Tutorial interactivo gratuito de HTML

por

HTML proporciona una forma de crear tanto una lista ordenada (con elementos contando, 1, 2, 3 …) como una lista desordenada con viñetas en lugar de números. Las listas son una buena forma de formalizar una lista de elementos y dejar que el estilo HTML haga el trabajo por usted.

Listas ordenadas

A continuación, se muestra un ejemplo de cómo crear una lista ordenada:

<p>Here is a list of ordered items:</p>
<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Las listas ordenadas tienen un atributo de “tipo” que define la convención de numeración a utilizar.

Para contar usando números, use type = “1”:

<p>Here is a list of ordered items:</p>
<ol type="1">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Para contar usando letras mayúsculas, use type = “A”:

<p>Here is a list of ordered items:</p>
<ol type="A">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Para contar usando letras minúsculas, use type = “a”:

<p>Here is a list of ordered items:</p>
<ol type="a">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Para contar usando números romanos en mayúsculas, use type = “I”:

<p>Here is a list of ordered items:</p>
<ol type="I">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Para contar usando números romanos en minúscula, use type = “i”:

<p>Here is a list of ordered items:</p>
<ol type="i">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Listas desordenadas

A continuación, se muestra un ejemplo de cómo crear una lista desordenada:

Aquí hay una lista de elementos desordenados:

  • Primer elemento
  • Segundo artículo
  • Tercer artículo

Para cambiar los atributos de estilo de la lista, podemos usar el atributo CSS llamado list-style-type. Los tipos disponibles son:

A continuación, se muestra un ejemplo del tipo de estilo de lista de discos:

<p>Here is a list of unordered items:</p>    
<ul style="list-style-type: disc">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

A continuación, se muestra un ejemplo del tipo de estilo de lista de círculos:

<p>Here is a list of unordered items:</p>    
<ul style="list-style-type: circle">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

A continuación, se muestra un ejemplo del tipo de estilo de lista cuadrada:

<p>Here is a list of unordered items:</p>    
<ul style="list-style-type: square">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

A continuación, se muestra un ejemplo del tipo de estilo de lista ninguno:

<p>Here is a list of unordered items:</p>    
<ul style="list-style-type: none">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

Ejercicio

Usar <ul> y <ol> enumerando la lista (abajo) debajo del texto My favorite foods/drinks list.
(Insinuación: Puede insertar una lista en una lista como <ol> dentro <li>)

• Foods
    1. Egg
    2. Sushi
• Drinks
    1. Apple juice
    2. Coffee

Deja un comentario