1. Etiquetas para Listas

Las listas en html son elementos muy importantes de alto significado semántico, en esta ocasión aprenderemos todo sobre ellas, además aprenderemos a hacer listas ordenadas y sin ordenar, con viñetas de varios tipos, etc.

Para empezar, existen dos tipos de listas html en general: listas ordenadas y listas sin ordenar, a continuación veamos como se implementa cada uno y sus diferencias.

Para definir las listas utilizaremos la siguiente etiqueta:

Etiqueta	Descripción	Tipo
<ul>	Lista no ordenada	Bloque
<ol>	Lista ordenada	Bloque
<li>	Elemento de una lista	Bloque

2. Listas no ordenadas <ul> en HTML

Una lista no ordenada en HTML es aquella en la que los elementos no están enumerados ni marcados por algún caracter que designe orden. Los elementos están simplemente listadas con alguna viñeta predeterminada como puede ser un punto u otro tipo como veremos más adelante.

Una etiqueta <ul> contiene a todas los elementos de la lista y dentro de ella irán los atributos que afectan a toda la lista en bloque.

Los elementos de la lista propiamente dichos, se especifican en una etiqueta <li>, de tal manera que cada elemento es independiente de otro elemento.

Ejemplo de listas no ordenadas:

Elemento 1
Elemento 2
Elemento 3

<ul>  <!--Crea lista no ordenada --> 
   <li>Elemento 1</li>  <!--Crea los elementos de la lista --> 
   <li>Elemento 2</li> 
   <li>Elemento 3</li>
</ul>

3. Listas ordenadas <ol> en HTML

Una lista ordenada en HTML es aquella en la que los elementos estan enumerados o marcado con algún signo alfanumérico que indique el orden de los elementos.

Se utiliza la etiqueta <ol> para crear listas ordenadas, entre la etiqueta de apertura y cierre irán los elementos de la lista dentro de una etiqueta <li> respectivamente.

En cualquier caso la etiqueta <li> sirve para indicar los elementos de la lista, independientemente de si son ordenadas o desordenadas.

Ejemplo de listas ordenadas:

Elemento 1
Elemento 2
Elemento 3

<ol>  <!--Crea lista ordenada --> 
   <li>Elemento 1</li>  <!--Crea los elementos de la lista --> 
   <li>Elemento 2</li> 
   <li>Elemento 3</li>
</ol>

4. Listas Anidadas en HTML

Se puede decir que es una lista dentro de otra lista, donde podemos ingresar etiquetas <ul> o <ol> justo después de una etiqueta <li> podemos conseguir sublistas o listas dentro de listas.

Ejemplo de listas anidadas:

Lista Anidada: Clasificación de las Frutas:

Acidas

Limón
Maracuya
Kiwi

Dulces

Banana
Nispero
Sandia

Neutras

Mani
Almedras
Aguacate

<!--Creando una lista anidada --> 
<p>Lista: Clasificación de las Frutas: </p>
<ul >
   <li >Acidas</li> <!--Crea un elemento de la lista -->
      <ol>  <!--Crea una sublista ordenada -->
         <li>Limón</li> <!--Crea un elemento de la sublista -->
         <li>Maracuya</li>
         <li>Kiwi</li>
      </ol> 
   <li >Dulces</li>
      <ol>  <!--Crea una sublista ordenada -->
         <li>Banana</li>
         <li>Nispero</li>
         <li>Sandia</li>
      </ol> 
   <li >Neutras</li>
      <ol>  <!--Crea una sublista ordenada -->
         <li>Mani</li>
         <li>Almedras</li>
         <li>Aguacate</li>
      </ol> 
</ul>

Ejemplo Practico: Un Articulo con Texto, Enlaces y Listas

Utilizaremos el ejemplo de etiquetas de texto y le añadimremos los enlaces:

Analisis y Desarrollo de Sistemas de Información

Perfil del aprendiz

Un Analista de Sistemas es responsable del estudio de los problemas y las necesidades presentes en la organización para determinar en qué medida pueden las aplicaciones de software, los servicios tecnologicos web y bases de datos, las redes, las personas y los procedimientos actuar conjuntamente para resolver los problemas del modo más adecuado y mejorar los sistemas de la empresa y de información .

Duración:

Etapa Lectiva: 18 meses
Etapa Productiva: 6 meses
Total: 24 meses

Perfil de salida

Analista Informatico
Programador Analista
Desarrollador de Aplicaciones
Desarrollador Frontend
Desarrollador Backend
Desarrollador Fullstack

      
<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>adsi</title>
</head>
<body>
                           
<h1>Analisis y Desarrollo de Sistemas de Información<h1>
<!--Enlace que apunte a la section1 de esta misma pagina --> 
<a href="#section1"  >Interno</a> 
<!--Enlace local desde esta pagina hacia etiquetas_texto.html pagina local de nuestro sitio--> 
<a href="etiquetas_texto.html" target="_blank" >Local</a>
<!--Enlace externo a otros sitio, apunta a Google  --> 
<a href="https://www.google.com/" target="_blank" >Externo</a>
<!--Enlazar un correo colocamos mailto: en el atributo href del enlace, seguido el correo--> 
<a href="mailto:actividades.clasroom@google.com">Email</a>
<hr>
<h2>Perfil del aprendiz</h2>
<p>
   Un <b>Analista de Sistemas<b> es responsable del <strong>estudio de los problemas<strong> y las necesidades presentes en la <em>organización<em> para determinar en qué medida pueden las <i>aplicaciones de software<i>, los servicios tecnologicos web
   y bases de datos, las <small>redes<small>, las  <big>personas<big>  y los procedimientos actuar conjuntamente para resolver los problemas del modo más adecuado y <mark>mejorar los sistemas de la empresa y de información<mark> .
<p>
<h2>Duración:</h2>
<ul>  <!--Crea lista no ordenada --> 
   <li>Etapa Lectiva: 18 meses</li>  <!--Crea los elementos de la lista --> 
   <li>Etapa Productiva: 6 meses</li> 
   <li>Total: 24 meses</li>
</ul>
<h2>Perfil de salida</h2>
<ol>  <!--Crea lista ordenada --> 
   <li>Analista Informatico</li>  <!--Crea los elementos de la lista --> 
   <li>Programador Analista</li> 
   <li>Desarrollador de Aplicaciones</li>
   <li>Desarrollador Frontend</li> 
   <li>Desarrollador Backend</li>
   <li>Desarrollador Fullstack</li>
</ol>                        
</body>
</html>

Actividad #6. HTML5: ETIQUETAS PARA LISTAS

Ahora que ya sabes crear listas en HTML es el momento de que empieces a practicar, aunque no es nada difícil, practica para desarrollar la habilidad en el aprendizaje.

Te ha resultado util esta guia de aprendizaje ?

Que tal el contenido?