[Crédito: El navegador Midori fue escrito por Christian Dywan con ilustraciones de Nancy Runge]

Cómo formatear listas para su página web en la Raspberry Pi

Al crear una página web en Raspberry Pi, probablemente necesitará saber cómo formatear una lista. Las listas se utilizan más de lo que cree para comunicar información, por lo que existe una forma estándar de formatearlas mediante HTML.

Hay dos tipos diferentes de lista: una lista ordenada y una lista desordenada. Una lista ordenada se utiliza para los artículos que deben estar en un orden particular, como las instrucciones paso a paso para colocar un estante.

Una lista desordenada se utiliza para artículos que pueden estar en cualquier orden, como una lista de verificación de cosas para empacar para unas vacaciones. Las listas ordenadas se muestran en pantalla con un número al lado de cada elemento y las listas desordenadas aparecen con una viñeta al lado, aunque puede usar CSS para cambiar la presentación de las listas. Puede utilizar enlaces o cualquier otro código HTML en cada elemento de la lista.

Esta página web tiene dos listas. La lista de consejos de fotografía sería una lista desordenada porque los consejos tienen sentido en cualquier orden. Su HTML se ve así:

<h2> Mis mejores consejos para la fotografía de viajes </h2>
<ul>
 <li> Lleva siempre contigo una cámara, aunque sea de bolsillo. </li>
 <li> Siempre que sea posible, lleve una batería de repuesto completamente cargada. </li>
 <li> Etiquete sus tarjetas SD para poder diferenciarlas. </li>
</ul>

Utiliza las etiquetas <ul> y </ul> para marcar el inicio y el final de la lista desordenada, y las etiquetas <li> y </li> para marcar el inicio y el final de cada elemento de la lista. Cuando coloca este código HTML en su página web y lo ve en su navegador, los consejos tienen viñetas al lado.

[Crédito: El navegador Midori fue escrito por Christian Dywan con ilustraciones de Nancy Runge]

Crédito: El navegador Midori está escrito por Christian Dywan con ilustraciones de Nancy Runge

La otra lista de esta página web es menos obvia. La mayoría de los sitios web tienen una barra de navegación en cada página, un conjunto estandarizado de enlaces que le permiten moverse por todas las páginas del sitio. Desde el punto de vista de HTML, es solo una lista de enlaces. Entonces, para hacer una barra de navegación, cree una lista de las diferentes páginas web que tendrá el sitio, así:

<ul>
 <li> <a href="index.html"> Página principal </a> </li>
 <li> <a href="galleries.html"> Galerías </a> </li>
 <li> <a href="tips.html"> Consejos fotográficos </a> </li>
 <li> <a href="contact.html"> Contacto </a> </li>
</ul>

El primer enlace es un enlace a la página en la que ya se encuentran, lo que puede parecer ilógico, pero es menos confuso tener exactamente el mismo conjunto de enlaces en cada página, que tener enlaces que aparecen o desaparecen en la barra de navegación de página a página.

LEER  ¿Qué se puede hacer con una Raspberry Pi?

Por ahora, se verá como una lista con viñetas en la parte superior de la página web, pero puede transformarla en una barra de navegación adecuada usando CSS más adelante.

Si desea crear listas ordenadas, simplemente cambie las etiquetas <ul> y </ul> por <ol> y </ol> . Cuando observa una lista ordenada en su navegador, verá que las viñetas se reemplazan con números. Puede probarlo editando su lista desordenada temporalmente para convertirla en una lista ordenada, guardándola y viendo la página en su navegador.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *