Archivo de la etiqueta: lista

Lista desordenada con diferentes bordes en CSS


En esta actividad queremos crear una lista desordenada en la que los elementos pares tengan un borde punteado rojo, y estén desplazados veinte píxeles hacia la derecha con respecto a los elementos impares. Estos últimos tendrán un borde continuo, pero con un color diferente para cada lado. Además, todos los elementos tendrán un margen interno con respecto al contenido de cinco píxeles.

act7p82

Para afrontar esta actividad, vamos a utilizar dos clases par e impar en el documento HTML.

Así, los archivos HTML y CSS que solucionan este ejercicio se muestran abajo.

htmlact7p82

cssact7p82

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.

listaanidadatresniveles

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:

htmllistaanidadatresniveles

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:

listaanidada

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:

htmllistaanidada

 

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.

BlogMariaJoseArroyo_MejorandoBlog