Lista numerada en html. Listas numeradas. Página html de lista numerada
HTML admite tres tipos diferentes de listas, cada una de las cuales tiene sus propias etiquetas:
Listas numeradas
En una lista numerada, el navegador inserta automáticamente los números de los elementos en orden, comenzando con un valor determinado (normalmente 1). Esto le permite insertar y eliminar elementos de la lista sin alterar la numeración, ya que los números restantes se recalcularán automáticamente.
Las listas numeradas se crean utilizando un elemento de bloque.
(de la lista ordenada en inglés - lista numerada). Al lado del contenedor
para cada elemento de la lista se coloca un elemento
Etiqueta
tiene la siguiente sintaxis:
- elemento 1
- elemento 2
- elemento 3
Los elementos de lista numerados deben contener varios elementos de lista, como se muestra en el siguiente ejemplo:
Ejemplo: lista numerada
- Inténtalo tú mismo "
Instrucción paso a paso
- Consigue la llave
- Inserta la llave en la cerradura.
- Gira la llave dos vueltas
- Saca la llave de la cerradura
- Abre la puerta
Instrucción paso a paso
- Consigue la llave
- Inserta la llave en la cerradura.
- Gira la llave dos vueltas
- Saca la llave de la cerradura
- Abre la puerta
A veces, al mirar códigos HTML existentes, te encontrarás con el argumento tipo en elemento
, que se utiliza para indicar el tipo de numeración (letras, números romanos y arábigos, etc.). Sintaxis:
- A - letras latinas mayúsculas (A, B, C...);
- a - letras latinas minúsculas (a, b, c...);
- I - números romanos grandes (I, II, III...);
- i - números romanos pequeños (i, ii, iii...);
- 1 - Números arábigos (1, 2, 3...) (utilizados por defecto).
- de la siguiente manera:
-
En este caso se interrumpirá la numeración secuencial de la lista y a partir de este punto se comenzará de nuevo la numeración, en este caso a partir del siete.
Ejemplo de uso de atributos valor etiqueta
En este ejemplo, el "primer elemento de la lista" sería el número 1, el "segundo elemento de la lista" sería el número 7 y el "tercer elemento de la lista" sería el número 8.
Formatear listas numeradas con CSS
Para cambiar los números de la lista debe usar la propiedad tipo de estilo de lista Hojas de estilo CSS:
- . El navegador sangra cada elemento de la lista y muestra viñetas automáticamente.
- Primer punto
- Segundo punto
- Tercer punto
- No es necesario colocar sólo texto; es aceptable colocar cualquier elemento de contenido streaming (enlaces, párrafos, imágenes, etc.)
- Está permitido crear una lista anidada o una lista de segundo nivel. Para anidar una lista, describa la nueva lista dentro del elemento
- lista ya existente. Cuando anida una lista con viñetas en otra, el navegador cambia automáticamente el estilo de viñeta de la lista de segundo nivel. Cualquier lista puede anidarse dentro de otra. El siguiente ejemplo demuestra la estructura de una lista con viñetas anidada dentro del segundo elemento de una lista numerada.
- Inténtalo tú mismo "
- Lunes
- Enviar correo
- Visita al editor
- Elegir un tema
- Diseño decorativo
- Reporte final
- Visualización nocturna de mensajes.
- Martes
- Revisar calendario
- Enviar imágenes
- Miércoles...
- Lunes
- Enviar correo
- Visita al editor
- Elegir un tema
- Diseño decorativo
- Reporte final
- Visualización nocturna de mensajes.
- Martes
- Revisar calendario
- Enviar imágenes
- Miércoles...
- Inténtalo tú mismo "
- Café
- Café
- Café
- Café
- Café
- Leche
- Café
- Leche
- Café
- Leche
- Café
- Leche
- Inténtalo tú mismo "
- Tauro
- Geminis
- Aries
- Tauro
- Geminis
- (del término de definición en inglés - una palabra, término definido) y
- (De la descripción de la definición en inglés: descripción del término que se define).
- Primer periodo
- Descripción del primer término.
- Segundo período
- Descripción del segundo término.
- Inténtalo tú mismo "
- La World Wide Web
- - De inglés La World Wide Web (WWW) es un sistema distribuido que proporciona acceso a documentos relacionados ubicados en diferentes computadoras conectadas a Internet.
- Internet
- — un conjunto de redes que utilizan un único protocolo de intercambio para transmitir información.
- Sitio web
- - un conjunto de páginas web individuales que están interconectadas mediante enlaces y un diseño uniforme.
- Primer elemento de la lista
- Segundo elemento de la lista
- Tercer elemento de la lista
- , luego automáticamente se pone delante de él .
- 1 - números arábigos;
- A - letras mayúsculas;
- a - letras latinas minúsculas;
- I - números romanos mayúsculas;
- i - números romanos en minúscula.
- :
Lista numerada:
- Café
- Té
- Leche
Nota: etiqueta
- sólo puede contener etiquetas como elementos secundarios
- , es decir, todo el contenido de la lista numerada debe colocarse dentro de los elementos
- . Etiqueta
- , a su vez, no tiene restricciones de contenido, por lo que puedes colocar en él párrafos, imágenes, enlaces, tablas, otras listas, etc.
Lista con viñetas
Lista con viñetas- Se trata de listas de elementos no numeradas, es decir, desordenadas, cuya secuencia no importa. Todos los elementos de la lista con viñetas tienen las mismas viñetas y, de forma predeterminada, aparecen como pequeños círculos negros.
Para crear listas con viñetas en HTML, use la etiqueta
- , dentro del cual se encuentran los elementos de la propia lista (como en el caso de las listas numeradas, la etiqueta
- , que contiene todos los contenidos mostrados de la lista):
Lista con viñetas:
- Café
- Té
- Leche
tipos de marcadores
Los tipos de viñetas de lista numeradas se pueden cambiar utilizando el atributo de tipo. Este atributo admite cinco tipos de marcadores:
Las listas con viñetas no tienen un atributo de tipo, por lo que no se puede cambiar el tipo de viñeta de una lista con viñetas mediante HTML. Para cambiar el tipo de marcador, en este caso, puedes utilizar la propiedad CSS list-style-type, con la que, además del valor predeterminado, puedes seleccionar dos tipos más de marcador: círculo o cuadrado.
Cambiar marcadores de lista:
Título de la página Lista numerada con atributo type="a":
- manzanas
- Plátanos
- limones
Lista numerada con atributo tipo="I":
- manzanas
- Plátanos
- limones
Tipos de marcadores de lista con viñetas:
- manzanas
- Plátanos
- limones
- manzanas
- Plátanos
- limones
La propiedad CSS tipo-estilo de lista, además de los tipos de marcadores para listas con viñetas, tiene muchos tipos diferentes de marcadores para listas numeradas. Pero cambiar un tipo estándar de marcador por otro no siempre es suficiente para crear una lista hermosa. Para diseñar listas, es mejor usar CSS, que le permite no solo cambiar la apariencia del marcador, sino también reemplazar marcadores con imágenes, controlar su ubicación y controlar la sangría. Puedes ver cómo hacer todo esto.
lista horizontal
Si está utilizando un cuadro de lista HTML para crear un menú horizontal, deberá organizar los elementos de la lista uno tras otro en la misma línea. Esto no se puede hacer usando HTML, por lo que necesitarás usar CSS.
Para crear una lista horizontal, debe establecer una propiedad de visualización CSS para los elementos de la lista con el valor inline o inline-block, dependiendo de qué otras propiedades vaya a utilizar.
Título de la página lista numerada
- manzanas
- Plátanos
- limones
Lista con viñetas:
- manzanas
- Plátanos
- limones
Después de esto, todos los elementos de la lista se alinearán en una línea. Tenga en cuenta que las viñetas desaparecerán de los elementos de la lista y ni siquiera habrá un espacio entre ellas, pero la sangría izquierda de la lista permanecerá.
Puedes ver cómo convertir una lista horizontal en un menú horizontal.
La única diferencia es que esta etiqueta está hecha estrictamente para listas de numeración. El nombre de la etiqueta proviene de la abreviatura en inglés "Lista ordenada", una lista numerada.
Sintaxis de etiquetas
- Elemento #1
- Elemento #2
- Elemento #3
- ...
Donde el atributo type="value" puede tomar los siguientes valores
- A - establece marcadores en forma de letras latinas mayúsculas (A, B, C...);
- a - establece marcadores en forma de letras latinas minúsculas (a, b, c...);
- I - coloca marcadores en forma de números romanos grandes (I, II, III, IV...);
- i - establece marcadores en forma de pequeños números romanos (i, ii, iii, iv..);
- 1 (predeterminado): establece marcadores en forma de números arábigos (1, 2, 3...);
El atributo start="value" especifica el valor inicial (valor inicial) del informe.
El atributo invertido especifica el conteo inverso (si es necesario).
Etiqueta
- requiere el uso obligatorio de una etiqueta de cierre
Para formar elementos de lista, se utiliza una etiqueta emparejada.
- , que contiene todos los contenidos mostrados de la lista):
- . Entre las etiquetas de apertura y cierre hay palabras individuales, frases, párrafos, imágenes, fragmentos de código y mucho más que forman el contenido de la lista con viñetas.
Nota
Dentro de la lista puedes cambiar la cuenta por la tuya. Para este fin hay un atributo especial value="" en la etiqueta.
- , al que se le asigna algún valor numérico. Por ejemplo
- Elemento #1
- Elemento #2
- Elemento #3
- Elemento #1
- Elemento #2
- Elemento #3
- Elemento #1
- Elemento #2
- Elemento #3
- Elemento #10
- Elemento #11
- Elemento #12
- Elemento #1
- Elemento #2
- Elemento #3
- Elemento #1
- Elemento #2
- Elemento #3
- Elemento #1
- Elemento #2
- Elemento #3
- Elemento #1
- Elemento #2
- Elemento #3
- Elemento #1
- Elemento #2
- Elemento #3
- Elemento #1
- Elemento #2
- Elemento #3
- Elemento #1
- Elemento #2
- Elemento #3
- .
- Elemento #1
- Elemento #2
- Elemento #3
- Elemento #4
Así es como se ve en la página:
- Elemento #1
- Elemento #2
- Elemento #3
- Elemento #4
Ejemplo 5. Lista numerada inversa en html
A continuación se muestra un ejemplo de una lista numerada al revés (contando en orden inverso).
- Elemento #1
- Elemento #2
- Elemento #3
- Elemento #4
Así es como se ve en la página:
- Elemento #1
- Elemento #2
- Elemento #3
- Elemento #4
Las listas de definiciones conectan objetos específicos y sus definiciones en una lista. Por ejemplo, si desea agregar definiciones a los artículos de una lista de compras, puede hacerlo así:
leche Producto lácteo líquido blanco. pan Producto alimenticio elaborado a partir de harina. La mantequilla es un producto lácteo sólido de color amarillo. granos de café Las semillas del fruto de algunos cafetos.
Cada definición y término es un grupo de definición (o grupo de nombre-valor). Puede tener tantos grupos de definiciones como desee, pero cada grupo debe tener al menos un término y al menos una definición. No se puede tener un término sin una definición o una definición sin un término.
Es posible asociar más de un término a una definición, o viceversa. Por ejemplo, el término "café" puede tener varios significados y puedes mostrarlos uno tras otro:
café una bebida hecha de granos de café tostados y molidos una taza de café una reunión durante la cual se bebe café de color marrón medio a oscuro
Alternativamente, es posible tener más de un término con la misma definición. Se utiliza para mostrar variaciones de un término que tienen el mismo significado:
refresco refresco cola Bebida dulce y carbonatada
Las listas de definiciones se diferencian de otros tipos de listas porque utilizan términos definidos y descripciones de definiciones en lugar de objetos de lista.
Por lo tanto, las listas de definiciones utilizan un par de elementos.
Una lista simple de definiciones para un término con una definición se vería así:
- Término
- Definición del término
- Término
- Definición del término
- Término
- Definición del término
Que se genera de la siguiente manera:
Término Definición del término Término Definición del término Término Definición del término
En este ejemplo, conectamos más de un término a una definición y viceversa:
- Término
- Definición del término
- Término
- Término
- Una definición que se aplica a los dos términos anteriores.
- Un término que puede tener ambas de las siguientes definiciones.
- Una definición del término
- Otra definición del término
El cual se presentará de la siguiente manera:
Término Definición de un término Término Término Una definición que se aplica a los dos términos anteriores Un término que puede tener las dos definiciones siguientes Una definición de un término Otra definición de un término
No es una práctica común asociar varios términos con una definición, pero es bueno saber que es posible si surge la necesidad.
Seleccionar un tipo de lista
Al decidir utilizar un tipo de lista en particular, normalmente puede hacerlo haciendo dos preguntas sencillas:
- ¿Están definidos los términos (u otros pares de nombre/valor concatenados)?
- En caso afirmativo, utilice la lista de definiciones.
- De lo contrario, no utilice la lista de definiciones; pase a la siguiente pregunta.
- ¿Importa el orden de los elementos de la lista?
- En caso afirmativo, utilice una lista ordenada.
- Si no, usa desordenado lista.
Diferencia entre listas HTML y texto
Uno podría preguntarse cuál es la diferencia entre una lista HTML y algún texto con viñetas o números escritos a mano. Existen varias ventajas al utilizar una lista HTML:
- Si necesita cambiar el orden de los elementos de una lista ordenada, simplemente muévalos en código HTML. Si los números están escritos a mano, tendrás que revisar todo y cambiar el número de cada elemento para corregir el orden, ¡lo cual es bastante aburrido, por decir lo menos!
- El uso de una lista HTML le permite diseñar la lista correctamente. Si solo usa texto grande, será mucho más difícil diseñar elementos individuales de una manera más o menos útil.
- El uso de una lista HTML le da al contenido una estructura semántica adecuada, en lugar de simplemente un efecto visual "similar a una lista". Esto tiene importantes beneficios, ya que permite a los lectores de pantalla decirles a los usuarios con discapacidad visual que están leyendo una lista en lugar de simplemente leer una mezcla confusa de texto y números.
Por otro lado: texto y listas no son lo mismo. Usar texto en lugar de una lista requiere más trabajo y puede crear problemas para los lectores de documentos. Por lo tanto, si un documento requiere una lista, entonces se debe utilizar una lista HTML adecuada.
Listas anidadas
Un elemento de una lista puede contener otra lista completa; esto se denomina lista "anidada". Esto puede ser útil para cosas como una tabla de contenidos, como la que aparece al comienzo de la conferencia:
1. Capítulo uno 1. Sección primera 2. Sección segunda 3. Sección tercera 2. Capítulo dos 3. Capítulo tres
El punto clave a recordar es que la lista anidada debe hacer referencia a un elemento de lista específico. Para reflejar esto en el código, se coloca una lista anidada dentro de este elemento de lista. El código de la lista anterior se ve así:
- Capítulo uno
- Seccion uno
- Sección dos
- Sección tres
- Capitulo dos
- Capítulo tres
Tenga en cuenta que la lista anidada comienza después del elemento
- y texto que contiene una lista del elemento ("Capítulo Uno"); y termina antes del elemento , que contiene una lista del elemento. Las listas anidadas suelen formar la base del menú de navegación de un sitio web porque son una forma conveniente de definir la estructura de un sitio web.
- Tortas
- Galletas
- panes rápidos
- Tortas
- Esponja simple
- Pastel de chocolate
- Pastel de té de manzana
- Galletas
- Masitas de Anzac
- Gotas de mermelada
- Momentos de fusión
- Panes/panes rápidos
- Apagador
- bollos
Estilos de lista numerada
Ejemplo Significado Descripción a B C alfa inferior Minúscula A B C alfa superior Letras mayúsculas yo, ii, iii bajo romano Números romanos en letras minúsculas. Yo, II, III alto-romano Números romanos en mayúsculas. Ejemplo: aplicar una propiedad CSS tipo de estilo de lista
Listas con viñetas
Las listas con viñetas son esencialmente similares a las listas numeradas, solo que no contienen numeración secuencial de elementos. Las listas con viñetas se crean utilizando un elemento de bloque.
EtiquetaEn el siguiente ejemplo, puede ver que, de forma predeterminada, se agrega un pequeño marcador en forma de círculo relleno antes de cada elemento de la lista:
Dentro de una etiqueta
Listas anidadas
Cualquier lista puede anidarse dentro de otra. Dentro de un elementoEjemplo: listas anidadas
Formatear listas con viñetas
Para cambiar la apariencia del marcador de lista, debe usar la propiedad tipo de estilo de lista Hojas de estilo CSS:
El siguiente ejemplo muestra diferentes estilos de listas con viñetas:
Ejemplo: estilos de lista con viñetas
Desct:
Círculo:
Cuadrado:
Ninguno:
Marcadores gráficos.
En HTML es posible crear una lista con marcadores gráficos. Una cosa es cuando los marcadores de la lista son círculos o cuadrados estándar, y otra muy distinta cuando el propio desarrollador selecciona el marcador de acuerdo con el diseño de la página. Para embellecer los elementos de la lista, a menudo se utilizan imágenes pequeñas.
Para reemplazar un marcador normal por uno gráfico, reemplace la propiedad tipo de estilo de lista por propiedad imagen-estilo-lista e indicar la URL de la imagen:Ejemplo: marcadores gráficos
signos del zodiaco
signos del zodiaco
Listas de definiciones (descripciones)
Las listas de definiciones son muy útiles para crear, por ejemplo, su diccionario personal de términos. Cada elemento de la lista de definiciones tiene dos partes: el término y su definición.
Pones la lista completa en un elemento.
Las listas de definiciones se utilizan a menudo en publicaciones científicas, técnicas y educativas, utilizándose para compilar glosarios, diccionarios, libros de referencia, etc.La estructura general de la lista de descripciones es la siguiente:
El siguiente ejemplo muestra un posible uso de una lista de definiciones:
Ejemplo: lista de definiciones
World Wide Web - del inglés. La World Wide Web (WWW) es un sistema distribuido que proporciona acceso a documentos relacionados ubicados en diferentes computadoras conectadas a Internet. Internet es un conjunto de redes que utilizan un único protocolo de intercambio para transmitir información. Un sitio web es un conjunto de páginas web individuales que están interconectadas mediante enlaces y un diseño uniforme.
De forma predeterminada, el texto del término se presiona en el borde izquierdo de la ventana del navegador y la descripción del término se encuentra debajo y se desplaza hacia la derecha.
Hay dos tipos de listas en HTML: numeradas y no numeradas. Su creación es casi la misma. Incluso las etiquetas difieren en un carácter. También puede crear, que pueden incluir tanto números como marcadores.
Estas listas se pueden transformar de la forma que desee. Todo depende de tu imaginación. Primero, veremos listas estándar, al igual que en el editor de Word, y luego las mejoraremos y las diseñaremos más allá del reconocimiento.
Lista numerada HTML
Se puede crear uno numerado normal utilizando las siguientes etiquetas:
Las listas simples se ven así
Según los estándares, cada elemento de la lista debe estar dentro de una etiqueta li de apertura y cierre. Pero si no pones la etiqueta de cierre el resultado será exactamente el mismo. El procesador es bastante inteligente. Durante la conversión de la lista, analiza las etiquetas de apertura. Si ve uno nuevo
Por lo tanto, se pueden hacer listas como se muestra a continuación.
Pero desde el punto de vista de los profesionales esto es incorrecto.
Las listas sin numerar (o con viñetas) se crean de la misma manera, solo que en lugar de la etiqueta ol, se escribe ul.
No hay números ni letras, sólo varios símbolos llamados marcadores.
Lista numerada de varios niveles HTML
Muchos usuarios están interesados en esta oportunidad. Por lo tanto, cabe señalar que cualquier lista numerada HTML se puede convertir en varios niveles. Los niveles adicionales pueden ser iguales o estar etiquetados.
Para crear la lista que se muestra en el ejemplo anterior, debe escribir lo siguiente.
Tenga en cuenta que en este código, a diferencia de los primeros ejemplos, se agrega el atributo de tipo. Gracias a él, puede especificar el tipo de clasificación tanto para listas numeradas como con viñetas.
Para los numerados indicamos el alfabeto o tipo de números, y para el resto de casos, el tipo de marcador.
Si utiliza una etiqueta HTML especial, la lista numerada puede convertirse en lo que desee.
Puede especificar el atributo de tipo con cualquier valor de la tabla. O en la clase de estilo CSS, especifique el tipo de estilo de lista con el tipo de clasificación deseado.
La traducción de valores es bastante sencilla. Con conocimientos básicos de inglés es suficiente. Pero incluso si no puede traducir las palabras "círculo", "cuadrado", etc., puede comprender visualmente cuál será el resultado al especificar estos valores en el atributo de tipo.
Para listas numeradas, utilice las siguientes opciones:
El valor predeterminado es siempre una lista con Es decir, si no especifica nada, es lo mismo que type="1".
Además, las listas numeradas pueden comenzar en cualquier posición deseada. De forma predeterminada, la salida comienza desde 1. Pero si lo desea, puede comenzar al menos desde cien. Para hacer esto, debe especificar el atributo de inicio con cualquier valor.
Además, puedes sacar la conclusión en orden inverso. Para hacer esto necesitas escribir al revés.
Diseño de listas
Una lista numerada en HTML se puede diseñar de manera tan hermosa que es posible que no te des cuenta de inmediato de que se trata de una lista normal y no de una imagen hecha en Photoshop.
A continuación se muestran ejemplos de hermosas listas.
Como puede verse en el ejemplo, puede cambiar la apariencia de la numeración y de los propios elementos.
Puede crear una lista normal como esta.
En los estilos CSS necesitas especificar el diseño de las etiquetas ol. Tenga en cuenta que en este caso la configuración se aplicará a todas las listas del sitio donde se utiliza este archivo de estilo.
Consideremos primero la opción con un diseño de lista redonda. Volver al código de lista. Allí se indica la lista redondeada de clases. Esta es la clase con la que necesitas jugar para crear tanta belleza. Puedes nombrar la clase como quieras.
Ahora veamos el diseño cuadrado.
Los estilos son bastante similares. La diferencia es que en el primer caso el elemento se redondea utilizando las capacidades de CSS.
Un maquetador profesional debe anticipar y comprender que no todos los usuarios utilizan computadoras modernas. No todo el mundo tiene instalado Windows 7, 8, 10. Hay un porcentaje de usuarios que todavía tienen Windows XP y utilizan versiones antiguas del navegador Internet Explorer.
Como regla general, casi todas las mejoras modernas en el diseño de elementos no están respaldadas por ellos. Al usuario le parecerá que no se ha realizado ningún trabajo en el diseño del sitio. Que todo se ha alejado. Los elementos chocan entre sí. Para evitar esto, es necesario considerar todas las opciones.
Algunos webmasters hacen la vista gorda ante ellos a medida que su participación en el mercado moderno se hace cada vez más pequeña. Pero para un profesional, cada visitante es importante, especialmente si se trata de un sitio comercial.
Haga algo adecuado para todos o tenga en cuenta todas las variaciones del navegador.
En HTML, un conjunto completo de etiquetas se encarga de organizar las listas, cuya organización debe cumplir con ciertas reglas de estructuración de datos.
La quinta versión del estándar HTML admite 3 tipos de listas: listas numeradas, listas con viñetas y listas de definiciones. También proporciona la capacidad de anidar listas entre sí, creando listas anidadas de varios niveles.
lista numerada
lista numerada- este es un conjunto de elementos (elementos de lista) que tienen una secuencia determinada. Cada elemento de una lista numerada tiene un marcador único que indica el orden en que aparece el elemento en relación con otros elementos de la lista. De forma predeterminada, los marcadores de elementos de lista numerados son números. El primer elemento tiene el número 1, el segundo el número 2, y así sucesivamente.
Los ejemplos más comunes de listas numeradas son recetas para preparar varios platos. Ya que cualquier receta es una lista numerada, con una secuencia clara de acciones.
Para crear listas numeradas en HTML, use la etiqueta
- , dentro del cual se encuentran los elementos de la lista con datos. Cada elemento de la lista se indica mediante una etiqueta.
Ejemplos con listas numeradas en html (
- )
Ejemplo 1. Lista HTML numerada en letras latinas
Ejemplo con letras mayúsculas
Ejemplo con letras minúsculas
Así es como se ve en la página:
Ejemplo 2. Lista HTML numerada en letras romanas
Ejemplo con letras mayúsculas
Así es como se ve en la página:
Ejemplo con letras minúsculas
Así es como se ve en la página:
Ejemplo 3. Lista numerada html con diferente posición inicial
Un ejemplo que muestra las capacidades del atributo de inicio, que le permite establecer el valor inicial del contador.
Así es como se ve en la página:
Ejemplo 4. Cambiar el recuento en listas numeradas html
A continuación se muestra un ejemplo con la capacidad de cambiar los valores del contador usando el atributo de valor al mostrar nuevos elementos en las etiquetas.
En teoría, puede anidar cualquier número de listas, aunque en la práctica esto puede resultar confuso si las listas están anidadas demasiado profundamente. Para listas muy grandes, puede ser mejor dividir el contenido en varias listas con títulos, o incluso en páginas separadas.
Ejemplo paso a paso
Veamos un ejemplo paso a paso para unirlo todo. Considere el siguiente escenario:
Estamos creando un pequeño sitio web para la Escuela de Culinaria. En la página principal mostraremos una lista de recetas clasificadas vinculadas a las páginas de recetas. Cada página de receta enumera los ingredientes necesarios, notas sobre esos ingredientes y el método de preparación. Las tres categorías son "Tortas" (incluidas recetas de "Bizcocho simple", "Tarta de chocolate" y "Tarta de té de manzana"); "Galletas" (incluidas recetas de "Galletas ANZAC", "Jam Drops" y "Melting Moments"); y "Quickbreads" (incluidas recetas de "Damper" y "Scones"). Al cliente no le importa en qué orden se muestran las categorías y recetas, sólo quiere que la gente entienda qué elementos son categorías y cuáles son recetas.
Repasemos el proceso de creación de este sitio web. En esta sección crearemos el marcado y también agregaremos algo de estilo a las listas. El estilo no se cubrirá en detalle hasta la conferencia sobre el estilo de listas más adelante en la serie.
Diseño de página principal
Cree una página HTML bien formada, que incluya tipo de documento y elementos. HTML, head y body y guárdelo como stepbystep-main.html. Añade un título principal (h1) "Escuela de cocina HTML" y un subtítulo (h2) "Recetas":
Escuela de cocina HTML
Recetas
Recetas
La sangría de los elementos li hace que el código sea más fácil de leer, pero no es obligatoria.
Ahora necesita agregar recetas como subelementos, por ejemplo, "Bizcocho simple", "Pastel de chocolate" y "Pastel de té de manzana" son parte de la categoría "Tortas". Para hacer esto, necesita crear una lista anidada en cada posición de la lista. Como el orden no es importante, vuelve a encajar. desordenado lista. Para simplificar el material del tutorial, todas las recetas se pueden vincular a una página de recetas:
Recetas
Aquí: escriba – listar símbolos:
Si desea que la lista comience con un número distinto de 1, debe especificarlo usando el atributo comenzar etiqueta
.
El siguiente ejemplo muestra una lista numerada con números romanos grandes y un valor inicial de XLIX:
La numeración también se puede iniciar utilizando el atributo valor, que se agrega al elemento