domingo, 31 de enero de 2021

👨‍💻 Mis apuntes sobre Listas HTML | Parte 2

Mis apuntes sobre Listas HTML
⏩ Snippet: ⏪
👉 Snippet: Una función exponente de la versatilidad de elaborar listas en HTML es precisamente la posibilidad de aplicarles el tipo de estilo que más nos guste. En esta lección, se exponen los diferentes estilos aplicables a listas en HTML.
Portafolio de temas tratados en esta publicación:
IR A PORTAFOLIO
INTRODUCCION

    Hoy voy a explicar cómo insertar los distintos tipos de estilos de listas en un documento HTML.

    Esta lección es continuación, por tanto los conceptos básicos de listas sugiero que debes repasarlos en la lección 1, antes de embarcarte en el estudio de esta lección, obviamente, si llegaste hasta acá por búsqueda de google sin haber visto esa lección 1, como también, si estás en el equipo de principintes sin conocimientos previos y básicos de listas HTML.

    Como se puede apreciar, ésta lección tiene "mucha tela para cortar" por ese motivo quise hacer ésta separación, para poder exponer visualmente cómo se aprecia cada estilo en cada tipo de lista, lo cual hubiera alargado la extensión de la lección 1.

   El tipo de estilo de lista especifica la apariencia del listado, y es cuándo entra en juego el cómo poner viñetas en listas de HTML, precisamente el siguiente ítem a desarrollar a continuación.


IR A PORTAFOLIO
CÓMO PONER VIÑETAS EN LISTAS DE HTML

   Poner viñetas en una lista html es tan fácil como lo veremos a continuación, se trata de poner estilo a nuestro elemento de lista y para ello emplearemos el atributo STYLE con unos valores pensados para este fin, veamos:

Atributo style

   Para crear listas con viñetas en HTML utilizamos el atributo style, esto indicará que la lista tendrá un estilo especial, emplea una propiedad.

   De manera que será la propiedad de type el "truco" para poder mejorar la apariencia de nuestras listas: básicamente se hace referencia a la asignación de viñetas preestablecidas, bien sea en <ul> o en <ol> según sea el tipo de lista en que estemos trabajando (desordenada ú ordenada, respectivamente).

   Finalmente el valor de dicha propiedad determina el tipo de viñeta que se mostrará, en nuestro caso queremos poner viñetas diferentes a los predeterminados ¿verdad? Pues bien, conozcamos los posibles valores que puede tomar y su respectiva descripción.

Valores para tipos de viñeta HTML en listas desordenadas:

  • disco: este es el valor predeterminado.
  • circular: muestra marcador es un círculo hueco.
  • cuadrado: muestra marcador es un cuadrado.

Valores para tipos de viñeta HTML en listas ordenadas:

  • viñetas estilo letra mayúscula
  • viñetas estilo letra minúscula
  • viñetas estilo con números enteros
  • viñetas estilo con números romanos en mayúscula
  • viñetas estilo con números romanos en minúscula

   Ahora sí, y como probablemente lo estabas esperando, aplicaré los estilos a ambos tipos de listas, en la siguiente sección. Expondré ejemplos para cada estilo, mostrando su HTML y su visualización.


IR A PORTAFOLIO
ESTILOS EN LISTAS DESORDENADAS HTML

   Por defecto, los navegadores muestran unos pequeños círculos rellenos para cada elemento de las listas no ordenadas <ul>. No obstante, se pueden aplicar estilos para mejorar la apariencia de la lista, lo cual se puede lograr utilizando la propiedad type, que hace posible seleccionar otros marcadores entre una serie de marcadores predefinidos. Seguidamente se detallan y visualizan esos estilos:

Lista desordenada con viñetas estilo circular:

Ejemplo de una lista desordenada |circular| aplicando el código type="circle".

Se escribe de la manera siguiente:

<ul type="circle">
<li<Lorem</li">
<li<Ipsum</li">
</ul">




Se visualiza de la manera siguiente:

  • Lorem
  • Ipsum

Lista desordenada con viñetas estilo disco:

Ejemplo de una lista desordenada |disco| aplicando el código type="disco".

Se escribe de la manera siguiente:

<ul type="disco">
<li<Lorem</li">
<li<Ipsum</li">
</ul">




Se visualiza de la manera siguiente:

  • Lorem
  • Ipsum

Nota: Obsérvese el parecido de los tipos circular y disco, no obstante, es apreciable la diferencia entre ambos en el relleno del tipo disco.

Lista desordenada con viñetas estilo cuadrado:

Ejemplo de una lista desordenada |cuadrada| aplicando el código type="square".

Se escribe de la manera siguiente:

<ul type="square">
<li<Lorem</li">
<li<Ipsum</li">
</ul">




Se visualiza de la manera siguiente:

  • Lorem
  • Ipsum

IR A PORTAFOLIO
ESTILOS EN LISTAS ORDENADAS HTML

   Por defecto, los navegadores muestran una numeración decimal para los elementos de las listas ordenadas <ol>. No obstante, se pueden aplicar estilos para mejorar la apariencia de la lista, lo cual se puede lograr utilizando la propiedad type, que hace posible seleccionar otros marcadores entre una serie de marcadores predefinidos. Seguidamente se detallan y visualizan esos estilos:

Lista ordenada con viñetas estilo mayúscula:

Ejemplo de una lista ordenada letra |mayúscula| aplicando el código type="A".

Se escribe de la manera siguiente:

<ol type="A">
<li<Lorem</li">
<li<Ipsum</li">
</ol">




Se visualiza de la manera siguiente:

  1. Lorem
  2. Ipsum

Lista ordenada con viñetas estilo minúscula:

Ejemplo de una lista ordenada letra |minúscula| aplicando el código type="a".

Se escribe de la manera siguiente:

<ol type="a">
<li<Lorem</li">
<li<Ipsum</li">
</ol">




Se visualiza de la manera siguiente:

  1. Lorem
  2. Ipsum

Lista ordenada con viñetas estilo números enteros:

Ejemplo de una lista ordenada |números enteros| aplicando el código type="1".

Se escribe de la manera siguiente:

<ol type="1">
<li<Lorem</li">
<li<Ipsum</li">
</ol">




Se visualiza de la manera siguiente:

  1. Lorem
  2. Ipsum

Lista ordenada con viñetas estilo números romanos en mayúscula:

Ejemplo de una lista ordenada |números romanos mayúsculas| aplicando el código type="I".

Se escribe de la manera siguiente:

<ol type="I">
<li<Lorem</li">
<li<Ipsum</li">
</ol">




Se visualiza de la manera siguiente:

  1. Lorem
  2. Ipsum

Lista ordenada con viñetas estilo números romanos en minúscula:

Ejemplo de una lista ordenada |números romanos minúsculas| aplicando el código type="i".

Se escribe de la manera siguiente:

<ol type="i">
<li<Lorem</li">
<li<Ipsum</li">
</ol">




Se visualiza de la manera siguiente:

  1. Lorem
  2. Ipsum

Lista ordenada con seriación ascendente:

   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, sólo deberemos escribir lo siguiente:

Se escribe de la manera siguiente:

<ol>

<li value="20">Este será el número 20. </li>

<li>Este será el 21. </li>

<li>Este será el 22. </li>

</ol>






Se visualiza de la manera siguiente:

  1. Este será el número 20.
  2. Este será el 21.
  3. Este será el 22.


IR A PORTAFOLIO
Fuentes


https://desarrolladoresweb.org/html/listas-en-html/

MANUAL DE HTML CSS - PDF

https://developer.mozilla.org/es/docs/Web/CSS/list-style-type