Lista anidada con tres niveles en HTML

En esta práctica queremos anidar hasta tres niveles de listas ordenadas, situando en cada nivel un tipo de numeración diferente. Por ejemplo, una lista como la que aparece más abajo.

Para ello vamos a necesitar las siguientes etiquetas del código HTML:

<div> División, es decir, seleccionar una sección de la página web.

<ol> Lista ordenada.

<li> Elemento de la lista.

<meta charset =”UTF-8″> Se emplea para indicarle al navegador el tipo de codificación de caracteres, y no tener problemas con los caracteres especiales, como las tildes.

Es aconsejable presentar el código de una forma ordenada y estructurada para mejorar la comprensión del mismo.

Asimismo, tendremos que cerrar las etiquetas abiertas cuando no queramos que sigan haciendo su función.

El código HTML para la lista anidada de arriba es el siguiente:

Listas anidadas y edición de texto en HTML

Vamos a realizar una práctica para presentar una lista anidada con una edición de texto variada en código HTML.

En primer lugar queremos mostrar en una página web la siguiente lista:

Para ello vamos a necesitar las siguientes etiquetas del código HTML:

<div> División, es decir, seleccionar una sección de la página web.

<h1> Encabezado 1.

<ol> Lista ordenada.

<ul> Lista desordenada.

<u> Subrayado.

<em> Cursiva.

<strong> Negrita.

<sub> Subíndice.

<sup> Superíndice.

<li> Elemento de la lista.

<meta charset =»UTF-8″> Se emplea para indicarle al navegador el tipo de codificación de caracteres, y no tener problemas con los caracteres especiales, como las tildes.

Es muy importante presentar el código de una forma ordenada y estructurada para mejorar la comprensión del mismo.

Además, debemos cerrar las etiquetas abiertas cuando no queramos que sigan haciendo su función.

El código HTML para la lista anidada de arriba es el siguiente:

 

Mejorando nuestro blog de aula.

Continuamos trabajando con nuestro blog de aula, que nos va a servir como un cuaderno de trabajo digital en el que vamos a publicar trabajos realizados en clase.

Una vez publicada la primera entrada, la siguiente tarea a realizar va a ser añadirle a la cabecera una explicación sobre nuestro blog.

Así, entraremos en el panel de administración de Blogger con nuestro usuario y contraseña, y en el apartado de Visión General seleccionamos Diseño. Se nos presentará la estructura de nuestro blog, y editaremos Header (Cabecera). A continuación se nos abrirá una ventana para configurar la cabecera, y escribiremos la información en el casillero Descripción del blog. Deberéis escribir el siguiente texto: «Bitácora de trabajo en la materia TIC de 1º de Bachillerato. I.E.S. Arcelacis. Santaella (Córdoba)«.

Una vez realizado esto, vamos a añadir un gadget con enlaces a los blogs de nuestros compañeros y compañeras del aula. Para ello, desde nuestro panel de Blogger, al igual que en el paso anterior entramos en Diseño, y hacemos click en la parte del blog que queramos y nos permita incluir un gadget, haciendo click en el enlace con este nombre. de esta forma, se nos abrirá una ventana con el listado disponible. Seleccionaremos Lista de enlaces, y en la ventana de configuración indicaremos un nombre para esta lista, permitiéndonos incorporar nombre del blog y url correspondiente.

Por último, realizando los mismos pasos explicados más arriba para incluir un nuevo gadget, seleccionaremos Estadísticas del blog, para contabilizar las visitas a nuestra bitácora.

Un ejemplo del resultado de todo lo que he explicado lo tenéis en el blog de María José Arroyo, del que muestro una imagen.