Hoy se verá lo que son las listas y se marcarán los tres tipos que hay. Se estudian las listas alteradas.
Las posibilidades que os brinda el HTML en cuestión de procedimiento de texto son verdaderamente importantes. No se restringen a lo visto hasta ahora, sino que van más lejos aún. Diferentes ejemplos de eso son las listas, que aprovechan para contar y precisar elementos, los textos preformateados y las cabeceras o títulos.
Las listas primariamente están deliberadas para citar, numerar y concretar cosas por medio de peculiaridades, o al menos así se hacen en la escritura de textos. No obstante, las listas definitivamente se manejan para mucho más que enumerar una serie de puntos, la realidad es que son un recurso muy sugestivo para lograr maquetar varios elementos, como barras de navegación, pestañas etc. Pero esto se verá más adelante, cuando se apliquen los estilos CSS a las listas.
Por ahora, en este artículo, se va a tratar las listas desde el punto de vista de su elaboración y se verán los distintos tipos que hay, y que se pueden monopolizar para solucionar las diferentes necesidades a la hora de escribir textos en HTML.
Se pueden diferenciar tres tipos de listas HTML:
- Listas desordenadas
- Listas ordenadas
- Listas de definición
El cual se verán detenidamente una a una, empezando en este con las desordenadas.
Listas desordenadas
Son limitadas por las etiquetas <ul> y </ul> (unordered list). Cada uno de los elementos de la lista es citado a través de una etiqueta <li> (sin cierre, no obstante no hay inconveniente en ubicarlo). La cosa queda así:
<p>Países de Suramérica </p>
<ul>
<li>Venezuela
<li>Brasil
<li>Ecuador
</ul>
El resultado:
Países de Suramérica
- Venezuela
- Brasil
- Ecuador
Se pueden concretar el tipo de viñeta colocada para cada elemento. Para eso se debe detallar a través del atributo type incluyéndolo dentro de la etiqueta de apertura <ul>, si se quiere que el estilo sea válido para toda la lista, o dentro de la etiqueta <li> si se pretende hacer algo específico de un solo elemento. La sintaxis es del siguiente tipo:
<ul type=”tipo de viñeta”>
Donde tipo de viñeta puede ser uno de los siguientes:
circle
disc
square
Tomen en cuenta que en algunos navegadores no trabaja la opción de modificar el tipo de viñeta a enseñar y por mucho que os empeñen, siempre saldrá el redondel negro.
En caso de que no marche, siempre se puede elaborar la lista a mano con la viñeta que se quiera manejando las tablas de HTML. Se verá más adelante cómo trabajar con tablas.
Ahora verán un ejemplo de lista con un cuadrado en sitio de un redondel, y en el último elemento se añadirá un círculo. Para eso se va a poner el atributo type en la etiqueta <ul>, con lo que afectará a todos los elementos de la lista.
<ul type=”square”>
<li>Dispositivo 1
<li>Dispositivo 2
<li>Dispositivo 3
<li type=”circle”>Dispositivo 4
</ul>
Que posee como resultado
- Dispositivo 1
- Dispositivo 2
- Dispositivo 3
- Dispositivo 4
