Codificación aprenderaprogramar.com: CU00718B
CREACIÓN DE LISTAS EN HTML
En la mayoría de los documentos HTML se usan listas para organizar el texto. El lenguaje HTML incorpora distintas formas de mostrar listas, por ejemplo con viñetas sencillas o también con letras o números. Además, para que las páginas tengan más vistosidad, se pueden colocar imágenes delante de cada párrafo.
A continuación veremos los principales tipos de listas de los que HTML dispone.
LISTAS NO ORDENADAS
Las listas no ordenadas son aquellas que se encuentran entre las etiquetas <ul> y </ul> (ul indica unordered list), etiqueta de apertura y cierre respectivamente. Si queremos añadir un nuevo punto, lo tendremos que hacer dentro de las etiquetas <li> y </li>.
Si no le indicamos nada a la etiqueta <li>, la viñeta o marca que indica que se trata de un elemento de una lista se generará de forma automática. Pero si queremos definir nosotros mismo el símbolo del punto o marca a emplear, debemos indicarlo específicamente. En el pasado se usaba el atributo “type”, hoy en día no recomendado (deprecated). Con este atributo se podía hacer que la lista estuviera definida por puntos negros (li type="disc"), por puntos con el fondo blanco (li type="circle") o por cuadrados (li type="square").
La sintaxis recomendada para indicar la apariencia se basa en usar CSS como indicamos a continuación:
<ul style="list-style-type:disc">
<ul style="list-style-type:circle">
<ul style="list-style-type:square">
La apariencia final que realmente consigamos dependerá del navegador, es decir, el resultado puede ser distinto según usemos un navegador u otro. No todos los navegadores se comportan de la misma forma a la hora de mostrar un símbolo gráfico como una viñeta o marca.
Una lista no ordenada se usa cuando se enumeran elementos sin que el orden tenga relevancia: por ejemplo si decimos “Las personas presentes en la habitación eran: Juan, Manuel, Pedro, Gonzalo” se trata de una lista no ordenada (Juan, Manuel, Pedro, Gonzalo). En cambio si la enumeración implica un orden se tratará de una lista ordenada. Ejemplo: “Los mejores clasificados de la carrera fueron: Juan, Manuel, Pedro, Gonzalo” (se entiende que Juan fue el primero, Manuel el segundo, Pedro el tercero, etc.). Para cada caso, tendremos que decidir si usamos una lista HTML como ordenada o no.
EJERCICIO
El siguiente código define una lista no ordenada y hace uso de atributos deprecated para la etiqueta li. Guarda el código como archivo html con un nombre como ejemplo1dep.html. Sustituye estos atributos por CSS y guarda el archivo como ejemplo1css.html. Compara la visualización de ambos documentos HTML en tu navegador.
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de listas - aprenderaprogramar.com</title> </head> <body> <ul> <li type="circle">Esto es un tipo de punto.</li> <li type="square">Este es otro.</li> <li type="disc">Y este es otro diferente.</li> </ul> </body></html> |
El resultado a obtener será similar a este:
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
LISTAS ORDENADAS
Si lo que pretendemos es definir una lista ordenada, lo tendremos que hacer entre las etiquetas <ol> </ol> (ol indica ordered list). Además, cada elemento de la lista se escribirá con la misma etiqueta que para las listas no ordenadas: <li>. Pero al ser listas ordenadas los símbolos por defecto serán números y éstos se irán generando automáticamente por orden, conforme escribamos nuevos elementos de la lista.
En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos que escribamos se generarán automáticamente por orden, partiendo de ese número.
Por ejemplo, si queremos que nuestra lista empiece por el número 20, podemos indicarlo en el código. Escribe este código en tu editor de texto y comprueba el resultado.
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de listas - aprenderaprogramar.com</title> </head> <body> <ol> <li value="20">Este será el número 20.</li> <li>Este será el 21.</li> <li>Este será el 22. Y así sucesivamente.</li> </ol> </body></html> |
Al igual que con las listas no ordenadas, en el pasado se usaba el atributo “type”, hoy en día no recomendado (deprecated). Con este atributo se podía hacer que la lista estuviera definida por números (li type="1"), letras minúsculas (li type="a"), letras mayúsculas (li type="A"), número romanos en minúscula (li type="i") ó mayúscula (li type="I").
La sintaxis recomendada para indicar la apariencia se basa en usar CSS como indicamos a continuación: <ul style="list-style-type:decimal"> para números, <ul style="list-style-type:lower-alpha"> para letras minúsculas, <ul style="list-style-type:upper-alpha"> para letras mayúsculas, <ul style="list-style-type:lower-roman"> para números romanos en minúsculas, <ul style="list-style-type:upper-roman"> para números romanos en mayúsculas.
Prueba a crear listas usando los distintos valores para este atributo y visualízalas en tu navegador.
LISTAS DE DEFICIONES O DE DESCRIPCIONES
Este tipo de listas no es de uso frecuente, por lo que vamos a citarlas solo por si encontramos este tipo de código en alguna página web poder interpretar su significado. Las listas de definiciones se usan cuando queremos hacer una enumeración tipo “diccionario” donde tenemos varios términos y su definición o descripción. Por ejemplo, esto serían varios términos y sus definiciones:
|
Término |
Definición |
|
FTP |
Protocolo para transmisión de ficheros entre ordenadores |
|
HTML |
Lenguaje de etiquetas empleado para generar páginas web |
|
PHP |
Lenguaje interpretado en servidor que permite generar páginas web dinámicas |
Estos términos y sus definiciones o descripciones podríamos ponerlos de varias maneras dentro de una página web (como texto sin más, como lista ordenada, no ordenada…) y una de estas maneras es ponerlo como lista de definiciones.
Para crear una lista de definiciones debemos usar las etiquetas <dl>, <dt> y <dd>. Vamos a explicarlas por partes:
La etiqueta <dl> indica que dentro de ella va a ir una lista de definiciones o lista de descripciones.
La etiqueta <dt> indica que dentro de ella va un término que vamos a definir.
La etiqueta <dd> nos dice que dentro de ella se encuentra una definición o descripción asociada a un término. Un término podría tener varias descripciones. Por ejemplo el término Autor podría tener como descripciones: Mateo Renzi, Olivo Pascua, Jorge Guillén.
Los listados de definición se separarán automáticamente si escribimos varios de ellos.
EJEMPLO
Escribe este código en tu editor de texto, guárdalo como archivo html y comprueba el resultado.
|
<!DOCTYPE html> <dl> <dt>Aquí va el término que definiremos</dt>
<dd>Y aquí dentro irá la definición propiamente dicha.</dd> </dl>
<dl> <dt>Aquí va la segunda definición</dt>
<dd>Segunda definición, separada automáticamente de la anterior.</dd> </dl>
</body> |
Habitualmente, los navegadores generan de forma automática el efecto de que la definición o descripción queda desplazada hacia la derecha (tabulada) respecto a el término, así como el espacio de separación entre distintas listas de definiciones.
ANIDAMIENTO O USO SIMULTÁNEO (COMBINACIÓN) DE VARIOS TIPOS DE LISTAS
Si lo deseamos, podemos combinar unos tipos de listas con otros. Por ejemplo, tener listas ordenadas dentro de cada elemento de una lista desordenada. Veamos un ejemplo. Escribe el siguiente código en un editor de texto como bloc de notas o Notepad++ y guárdalo con un nombre de archivo como ejemploCU00718B.html.
|
<!DOCTYPE html> <ul> <li>Lenguajes de programación estructurada </li> <ol>
<li> Lenguaje C </li> </ol>
<ol>
<li>Lenguaje Java </li> </ol> </ul> </body> </html> |
El resultado de este código cuando lo visualizamos en un navegador sería algo similar a lo que mostramos en la siguiente imagen.
EJERCICIO
Crea una lista ordenada cuyos elementos sean Doctores, Ayudantes y Auxiliares. Dentro de Doctores define una lista no ordenada cuyos elementos sean: Juana Pérez, Alberto Márquez, Raúl Moreno. Dentro de Ayudantes define una lista no ordenada cuyos elementos sean: Noelia Suárez, Abel Rebollo. Dentro de Auxiliares crea una lista no ordenada cuyos elementos sean Silvia Estévez, Angela González y Cuarthemoc Adanez. Separa cada lista con un elemento hr de color azul, 10 pixeles de grosor y que ocupe el 50% del ancho disponible.
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
