Home UC3M
Home IT
Home / Docencia / Introducción a HTML

Intro a HTML

Fases de Diseño de un sitio Web: III. Fase Producción

Índice
  1. Listas

Las listas sirven para representar enumeraciones o puntos. Hay tres tipos de listas en HTML:

  1. Listas ordenadas o numeradas:
    1. Primer elemento
    2. Segundo elemento
    3. Tercer elemento
  2. Listas desordenadas o no numeradas:
    • Primer elemento
    • Segundo elemento
    • Tercer elemento
  3. Listas de definiciones:
    Primer Término:
    Definición del primer término puede ser tan larga como se quiera e incluso contener más de una línea.
    Segundo Término:
    Definición del segundo Término
    Tercer Término:
    Definición del tercer Término
    Otra definición para el tercer Término
Go Up
  2. Listas Desordenadas

Consisten en una enumeración de elementos donde cada uno de ellos viene indicado mediante un punto, guión, asterisco u otros signos). El comienzo y final de la lista se indica mediante las etiquetas <ul>...</ul> (del inglés Unordered List). Cada elemento de la lista se indica mediante las etiquetas <li>...</li> (del inglés List Item).

El atributo type dentro del elemento <ul> nos indica el tipo de marcador elegido para cada elemento de la lista. Se escribe <ul type="valor">...</ul>. El atributo type puede tomar varios valores, en la siguiente tabla se muestran los más utilizados:

Valor del atributo type Estilo Ejemplo
<ul>...</ul> (sin atributo) Punto en negrita (valor por defecto)
  • Primer elemento
  • Segundo elemento
<ul type="disc">...</ul> Punto en negrita
  • Primer elemento
  • Segundo elemento
<ul type="circle">...</ul> Círculo transparente
  • Primer elemento
  • Segundo elemento
<ul type="square">...</ul> Cuadrado
  • Primer elemento
  • Segundo elemento

Ejercicio

Tarea:

Practica las listas desordenadas utilizando el editor interactivo.

Procedimiento:

  1. Abre el editor interactivo pulsando aquí.
  2. Escribe en el lado izquierdo el siguiente código HTML: 
    <HTML>
 <body>
  <h3>Listas desordenadas sencillas</h3>
  <ul>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
  </ul>
  <h3>Listas desordenadas anidadas</h3>
  <ul type="disc">
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Este elemento muestra cómo anidar las listas
      <ul type="circle">
        <li>Primer elemento de la lista anidada</li>
        <li>Segundo elemento de la lista anidada</li>
        <li>Tercer elemento contiene otra lista más
		  <ul type="square">
            <li>Primer elemento</li>
            <li>Segundo elemento</li>
          </ul>
        </li>
        <li>Cuarto elemento podemos seguir después de la anidación.
      </ul>  
    </li>
    <li>Último elemento</li>
  </ul>
 </body>
</HTML>
  3. Pulsa el botón submit y comprueba el resultado
Go Up

Solución:

Debería verse

Listas desordenadas sencillas

  • Primer elemento
  • Segundo elemento

Listas desordenadas anidadas

  • Primer elemento tipo disc
  • Segundo elemento tipo disc
  • Este elemento muestra cómo anidar las listas
    • Primer elemento de la lista anidada. Tipo circle
    • Segundo elemento de la lista anidada. Tipo circle
    • Tercer elemento contiene otra lista más
      • Primer elemento tipo cuadrado
      • Segundo elemento tipo cuadrado.
    • Cuarto elemento podemos seguir después de la anidación.
  • Último elemento

Observa

  • Si no ponemos el atributo type por defecto se muestran como puntos negros igual que si hubiésemos puesto el atributo type="disc"
  • Las listas se pueden anidar tantas veces como queramos
  • Hay que tener cuidado de cerrar correctamente las etiquetas.
  • La etiqueta de cierre li al igual que ocurría con p no es necesario ponerla aunque se recomienda su uso por homogeneidad con el resto de las etiquetas.

  3. Listas Ordenadas

Consisten en un conjunto de elementos ordenados identificados mediante números griegos (1, 2, ...), números latinos (en mayúsculas I, II, III, IV,..., o minúsculas i, ii, iii, iv, ...) o letras (en mayúsculas: A, B, C, ..., o minúsculas: a, b, c, ...). El comienzo y final de la lista se indica mediante las etiquetas <ol>...</ol> (del inglés Ordered List). Cada elemento de la lista, al igual que en la listas desordenadas se indica mediante las etiquetas <li>...</li> (del inglés List Item).

El atributo type dentro del elemento <ul> nos indica el tipo de marcador elegido para cada elemento de la lista. Se escribe <ul type="valor">...</ul>. El atributo type puede tomar varios valores, en la siguiente tabla se muestran los más utilizados:

Valor del atributo type Estilo Ejemplo
<ul>...</ul> Numeración griega (valor por defecto si no existe type)
  1. Primer elemento
  2. Segundo elemento
<ul type="1">...</ul> Numeración griega
  1. Primer elemento
  2. Segundo elemento
<ul type="I">...</ul> Numeración latina (Mayúsculas)
  1. Primer elemento
  2. Segundo elemento
<ul type="i">...</ul> Numeración latina (Minúsculas)
  1. Primer elemento
  2. Segundo elemento
<ul type="A">...</ul> Numeración alfabética (Mayúsculas)
  1. Primer elemento
  2. Segundo elemento
<ul type="a">...</ul> Numeración alfabética (Minúsculas)
  1. Primer elemento
  2. Segundo elemento

Ejercicio

Tarea

Practica las listas ordenadas utilizando el editor interactivo.

Procedimiento:

  1. Abre el editor interactivo pulsando aquí.
  2. Escribe en el lado izquierdo el siguiente código HTML: 
    <HTML>
  <body>
    <h3>Listas ordenadas sencillas</h3>
    <ol type="1">
      <li>Primer elemento</li>
      <li>Segundo elemento</li>
    </ol>
    <h3>Listas ordenadas anidadas</h3>
    <ol>
      <li>Listas con letras
        <ol type="A">
          <li>Primer elemento de la lista anidada</li>
          <li>Segundo elemento de la lista anidada</li>
        </ol>
      </li>
      <li>Listas con numeración latina
        <ol type="I">
          <li>Primer elemento de la lista anidada</li>
          <li>Segundo elemento de la lista anidada</li>
        </ol>
      </li>
    </ol>
  </body>
</HTML>
  3. Pulsa el botón submit y comprueba el resultado.
Go Up

Solución:

Debería verse

Listas ordenadas sencillas

  1. Primer elemento
  2. Segundo elemento

Listas ordenadas anidadas

  1. Listas con letras
    1. Primer elemento de la lista anidada
    2. Segundo elemento de la lista anidada
  2. Listas con numeración latina
    1. Primer elemento de la lista anidada
    2. Segundo elemento de la lista anidada


Intenta estos cambios

  • Modifica el valor del atributo type para que tanto las letras como la numeración latina se vean en minúsculas.

  4. Listas de Definiciones

Consisten en conjunto de términos acompañados de sus definiciones. El comienzo y final de la lista se indica mediante las etiquetas <dl>...</dl> (del inglés Definition List). Cada elemento de la lista consta al menos de dos partes:

  • Lo que llamamos término e indicamos mediante las etiquetas <dt>...</dt> (del inglés Definition Term).
  • Lo que llamamos definición o descripción <dd>...</dd> (del inglés Definition Description).

En el siguiente dibujo puedes ver un ejemplo de declaración de listas de definiciones.

Ejercicio

Tarea

Practica las listas de definiciones utilizando el editor interactivo.

Procedimiento:

  1. Abre el editor interactivo pulsando aquí.
  2. Escribe en el lado izquierdo el siguiente código HTML: 
    <HTML>
 <body>
  <h3>Listas de definiciones</h3>
  <dl>
    <dt>Primer término</dt>
    <dd>Descripción del significado del primer término</dd>
    <dt>Segundo término</dt>
    <dd>Descripción del significado del segundo término</dd>
    <dt>Tercer término</dt>
    <dd>Descripción del significado del tercer término</dd>
    <dd>
      Un término puede tener más de un significado por lo que este párrafo
      correspondería con la segunda descripción del tercer término
    </dd>
  </dl>
 </body>
</HTML>
  3. Pulsa el botón submit y comprueba el resultado
Go Up

Solución:

Debería verse

Listas de definiciones

Primer término
Descripción del significado del primer término
Segundo término
Descripción del significado del segundo término
Tercer término
Descripción del significado del tercer término
Un término puede tener más de un significado por lo que este párrafo correspondería con la segunda descripción del tercer término

Observa

  • Los elementos de las listas de definiciones en vez de declararse con una única etiqueta <li>...</li> como ocurría con las listas ordenadas y desordenadas se declaran con dos etiquetas (<dt>...</dt> y <dd>...</dd>) . La primera de ellas para indicar el nombre del término y la siguiente para indicar su descripción. En cada elemento de la lista se pueden dar varias situaciones:
    • Que aparezcan ambas etiquetas , es decir un término con su descripción.
    • Que sólo aparezcan términos
    • Que sólo aparezcan descripciones
    • Que aparezca un único término con varias descripciones.
  • Las etiquetas <dt> y <dd> al igual que ocurre con las etiquetas <li> y <p> no necesitan etiqueta de cierre (</dt>, </dd>). Pero se recomienda ponerla por homogeneidad con el resto del código HTML

  5. Combinación de listas

Todas los tipos de listas que hemos visto hasta ahora se pueden combinar y anidarse entre sí como puedes ver en el siguiente ejercicio.

Ejercicio

Tarea

Practica las listas de definiciones utilizando el editor interactivo.

Procedimiento:

  1. Abre el editor interactivo pulsando aquí.
  2. Escribe en el lado izquierdo el siguiente código HTML: 
    <HTML>
 <body>
  <h3>Combinación de listas</h3>
  <dl>
    <dt><b>Listas desordenadas</b></dt>
    <dd>Se representan mediante:
		<ul>
          <li type="disc">Puntos en negrita </li>
          <li type="circle">Círculos transparentes</li>
          <li type="square">Cuadrados en negrita</li>
        </ul>
    </dd>
    <dt><b>Listas ordenadas</b></dt>
    <dd>Se representan mediante:
		<ul>
          <li>números
           <ol type="a">
			 <li>Griegos: 1, 2, 3, </li>
             <li>Romanos
               <ul type="circle">
                 <li>Mayúsculas (I, II, III, ...)</li>
                 <li>Minúsculas (i, ii, iii, ...)</li>
               </ul>
             </li>
		   </ol>
		  </li>
          <li>letras</li>
           <ol type="a">
			 <li>Mayúsculas (A, B, C, ...) </li>
             <li>Minúsculas (a, b, c, ...)</li>
           </ol>
        </ul>
    </dd>
    <dt><b>Listas de definiciones</b></dt>
    <dd>Esta definición de los distintos tipos de listas sirve como ejemplo</dd>
  </dl>
 </body>
</HTML>
  3. Pulsa el botón submit y comprueba el resultado
Go Up

Solución:

Debería verse

Combinación de listas

Listas desordenadas
Se representan mediante:
  • Puntos en negrita
  • Círculos transparentes
  • Cuadrados en negrita
Listas ordenadas
Se representan mediante:
  • Números
    1. Griegos: 1, 2, 3,
    2. Romanos
      • Mayúsculas (I, II, III, ...)
      • Minúsculas (i, ii, iii, ...)
  • Letras
    1. Mayúsculas (A, B, C, ...)
    2. Minúsculas (a, b, c, ...)
Listas de definiciones
Esta definición de los distintos tipos de listas sirve como ejemplo

Observa

  • Se pueden anidar listas de cualquier tipo en cualquier orden y tantas veces como se quiera
  • Cuando aplicamos el atributo type a la declaración de la lista <ul type="disc"> afecta a todos sus elementos.
  • Cuando aplicamos el atributo type a cada uno de los elementos <li type="disc"> su valor sólo afecta al elemento en en que se encuentre.
  6. Proyecto: Listas

Vamos a comenzar la edición de la página DireccionesDeInteres.html. El objetivo de esta página será crear una lista de direcciones útiles clasificadas atendiendo a distintas categorías. Cada categoría vendrá representada por un título y una o varias listas de distintos tipos. El Índice y las 5 primeras secciones contendrán listas no numeradas donde cada elemento se indica mediante un punto o un círculo. La sección "Medios (Prensa, radio, tv)" contendrá una lista numerada donde cada elemento se indica mediante un número, y la sección "Otros" contendrá una lista de definiciones donde los elementos no tienen ningún marcador gráfico.

En la siguiente figura se muestran algunos fragmentos de la página DireccionesDeInteres.html que contienen distintos tipos de listas.

Aplicación práctica

Tarea

Utiliza las etiquetas <ul>, <ol>, <li>, <dl> y <dt> para aquellas páginas de tu sitio web que contengan una colección de elementos. .

Procedimiento

  1. Observa la página DireccionesDeInteres.html del web de telémaco.
  2. Abre con el wordpad el fichero.html de tu sitio web que contenga una colección de elementos.
  3. Situate en el cuerpo del documento (en el espacio comprendido entre las etiquetas <body>...</body>).
  4. Añade una lista numerada a tu páginas rodeando cada uno de los elementos de las lista con las etiquetas <li>...</li> y el principio y final de la lista con las etiquetas <ol>...</ol>
  5. Añade una lista no numerada a tu páginas rodeando cada uno de los elementos de las lista con las etiquetas <li>...</li> y el principio y final de la lista con las etiquetas <ul>...</ul>
  6. Añade una lista de definiciones a tu páginas. Para ello indica el principio y final de la lista con las etiquetas <dl>...</dl>. Indica cada término a definir rodeándolo de las etiquetas <dt>...</dt> y cada definición con las etiquetas <dd>...</dd>.
  7. Guarda el fichero.html y ábrelo con el navegador (Internet Explorer o Netscape Navigator) para comprobar el resultado.
  8. Si el resultado no es como esperabas revisa de nuevo el contenido de tu página y comprueba si todas las etiquetas se abren y se cierran correctamente.
  9. Si tienes alguna duda coméntala con tus compañeros en el foro titulado "HTML"
Go Up

Solución:

Observaciones

  • Comprueba el aspecto de la página de Telémaco en el navegador pulsando sobre este enlace.
  • Puedes consultar el código HTML de esta página (o de cualquier página que consultes en Internet) desde tu navegador para hacerlo:
    • Si utilizas Internet Explorer: Selecciona la opción de menú (Ver|Código Fuente)
    • Si utilizas Netscape Navigator: Selecciona la opción de menú (Ver|Origen de la página)


Localización | Personal | Docencia | Investigación | Novedades | Intranet
inicio | mapa del web | contacta
Last Revision: