Cómo sangrar el código. Formatear un párrafo HTML. Establecer sangrías insertando espacios

Las listas numeradas son una colección de elementos con sus números de serie. El tipo y tipo de numeración depende de los atributos de la etiqueta.

, que se utiliza para crear la lista. Cada elemento de la lista numerada está indicado por una etiqueta.
1. como se muestra a continuación.
   1. primer punto
   2. Segundo punto
   3. Tercer punto

   Si no especificas ninguno atributos adicionales y solo escribe una etiqueta

   , entonces el valor predeterminado es una lista con números arábigos (1, 2, 3,...), como se muestra en el Ejemplo 11.3.

   Ejemplo 11.3. Crear una lista numerada

   trabajando con el tiempo

   1. crear puntualidad (nunca llegarás tarde a nada);
   2. cura para la puntualidad (nunca tendrás prisa);
   3. cambio en la percepción del tiempo y los relojes.
   
   
   

   Resultado este ejemplo mostrado en la Fig. 11.3.

   Arroz. 11.3. Vista de lista numerada

   Tenga en cuenta que una lista numerada también agrega sangría automática en la parte superior, inferior e izquierda del texto.

   Los siguientes valores pueden servir como elementos de numeración:

   • Números arábigos (1, 2, 3,...);
   • letras latinas mayúsculas (A, B, C, ...);
   • letras latinas minúsculas (a, b, c, ...);
   • números romanos mayúsculas (I, II, III, ...);
   • Números romanos en minúscula (i, ii, iii, ...).

   Para indicar el tipo de lista numerada, utilice atributo de tipo etiqueta

   . Su valores posibles se dan en la tabla. 11.2.
   Mesa 11.2. Tipos de lista numerada

   Tipo de lista	código HTML	Ejemplo
   números arábigos		1. Cheburashka 2. Cocodrilo Gena 3. Shapoklyak
   Letras mayúsculas del alfabeto latino.		A. Cheburashka B. cocodrilo gena C. Shapoklyak
   Letras minúsculas del alfabeto latino.		a. Cheburashka b. Gena cocodrilo do. shapoklyak
   Números romanos en mayúsculas.		I. Cheburashka II. Gena cocodrilo III. shapoklyak
   números romanos en minúscula		i. Cheburashka ii. Gena cocodrilo III. shapoklyak

   Para comenzar la lista con cierto valor, se utiliza el atributo de inicio de la etiqueta

   . No importa en qué tipo esté configurada la lista usando type , el atributo de inicio funciona igual con números romanos y arábigos. El ejemplo 11.4 muestra cómo crear una lista usando números romanos en mayúsculas que comienzan con ocho.

   Ejemplo 11.4. Numeración de listas

   8. Rey Magnum XLIV
   9. Rey Sigfrido XVI
   10. Rey Segismundo XXI
   11. Rey Husbrandt I
   
   
   

   El resultado de este ejemplo se muestra en la Fig. 11.4.

   

   Arroz. 11.4. Lista numerada con números romanos.

   - 4,5 sobre 5 basado en 2 votos

   Muy a menudo, cierta información de un sitio web debe presentarse en forma de listas.

   Las listas te permiten organizar y sistematizar información diversa y presentarlo al visitante de una manera conveniente.

   Las listas en HTML vienen en tres variedades: listas con viñetas, listas numeradas y listas de definiciones. Veamos cómo crearlos en orden.

   Lista con viñetas.

   Este tipo de lista se utiliza con mayor frecuencia. La lista con viñetas en HTML se crea usando etiquetas

   • . En este caso, se agrega un marcador frente a cada elemento de la lista de forma predeterminada; es un marcador en forma de círculo; Usando etiquetas, se crea un contenedor, dentro del cual se encuentran los elementos de la lista: .

     Código lista con viñetas se verá así:

     • Esta opción es
     • esta opción
     • Opción como esta

     Puedes intentar crear página HTML usando este codigo y terminarás con la siguiente lista:

     

     Como puede ver, cada elemento de la lista está posicionado con nueva linea, mientras que se crean ciertas sangrías a la izquierda, arriba y abajo. Cada elemento de la lista comienza con un marcador; el marcador puede ser un círculo relleno (usado de forma predeterminada), un círculo o un cuadrado. en la etiqueta

     Hay un atributo de tipo que se utiliza para establecer el estilo del marcador. Este atributo tiene los siguientes significados:
     • disco - círculo;
     • círculo - círculo;
     • cuadrado - cuadrado.

     El valor del disco es el predeterminado.

     Un ejemplo de creación de una lista con viñetas con marcadores circulares:

     • Esta opción es
     • esta opción
     • Opción como esta

     Como resultado, la lista tomará la siguiente forma:

     

     Crear una lista con viñetas con marcadores cuadrados:

     • Esta opción es
     • esta opción
     • Opción como esta

     La lista se verá así:

     

     El atributo de tipo se puede aplicar a más que solo una etiqueta

     , sino también a la etiqueta
     • . De esta manera puedes crear una lista con una variedad de viñetas.
       • Esta opción es
       • esta opción
       • Opción como esta

       El resultado será el siguiente:

       

       Listas numeradas.

       Las listas numeradas en HTML son listas en las que cada elemento tiene un número de serie, las listas numeradas se crean usando la etiqueta

       y anidado en sus etiquetas

       1. 1. primera linea
          2. Segunda linea
          3. Tercera linea

          La lista se ve así:

          

          Por defecto, la numeración está en números arábigos. Pero la etiqueta

          Existe un atributo de tipo, mediante cuyos valores se puede realizar la numeración en mayúsculas (tipo="A") o minúsculas (tipo="a") en letras latinas, Números romanos en mayúsculas (tipo="I") y minúsculas (tipo="i").

          A continuación se detallan versiones abreviadas del código y el tipo de numeración que puede haber en un caso u otro.

          Vista de lista:

          Vista de lista:

          

          Numeración en letras minúsculas del alfabeto latino:

          Vista de lista:

          

          Vista de lista:

          

          Vista de lista:

          

          Lista de definiciones en HTML.

          Un tipo especial de lista son las listas de definiciones. Se diferencian en que cada elemento de la lista consta de dos elementos, un término y un texto que revela su significado. Estas listas se crean usando etiquetas.

          . Etiqueta

          crea un contenedor para la lista, etiqueta

          establece el término y la etiqueta

          descripción o definición de un término.

          Grabado esta lista como sigue:

          Término 1

          Definición 1

          Término 2

          Definición del término 2

          Término 3

          Definición 3

          El resultado será la siguiente lista:

          

          Como puede ver, esto crea una sangría adecuada para el término y el texto de definición.

          Listas anidadas o multinivel en HTML.

          A veces es necesario anidar otra lista dentro de un elemento de cierto tipo de lista. HTML le permite incrustar ilimitadamente algunas listas en elementos de otras listas.

          Por ejemplo, aquí se muestra un código que anida listas numeradas dentro de elementos de lista con viñetas.

          • Esta opción es
            1. primera linea
            2. Segunda linea
            3. Tercera linea
          • esta opción
            1. primera linea
            2. Segunda linea
            3. Tercera linea
          • Opción como esta
            1. primera linea
            2. Segunda linea
            3. Tercera linea

          listas HTML Se utiliza para agrupar piezas de información relacionadas. Hay tres tipos de listas:

          lista con viñetas —

          - cada elemento de la lista
          • marcado con un marcador,
            lista numerada —
            - cada elemento de la lista
            1. marcado con un número
               lista de definiciones- - consta de pares de términos
               —
               definición.

               Cada lista es un contenedor dentro del cual se ubican los elementos de la lista o los pares de término-definición. Los elementos de la lista se comportan como elementos de bloque, ubicados uno debajo del otro y ocupando todo el ancho del bloque contenedor. Cada elemento de la lista tiene un bloque adicional ubicado en el lateral, que no participa en el diseño.

               Crear listas HTML

               1. Lista con viñetas

               Lista con viñetas es una lista desordenada (de la lista desordenada en inglés). Creado usando par de etiquetas

               . El marcador de un elemento de la lista es una etiqueta, por ejemplo, un círculo relleno.

               Los navegadores agregan de forma predeterminada el siguiente formato al bloque de lista:

               Cada elemento de la lista se crea utilizando una etiqueta emparejada.

            2. (del elemento de lista en inglés).
            disponible .
            • microsoft
            • Google
            • Manzana
            Arroz. 1. Lista con viñetas

            2. Lista numerada

            lista numerada se crea utilizando una etiqueta emparejada. Cada elemento de la lista también se crea utilizando el elemento

          • . El navegador numera los elementos en orden automáticamente y, si elimina uno o más elementos de dicha lista, los números restantes se recalcularán automáticamente.

            El bloque de lista también tiene estilos de navegador predeterminados:

          • El atributo de valor está disponible, lo que le permite cambiar el número predeterminado para el elemento de la lista seleccionado. Por ejemplo, si para el primer elemento de la lista configura
          • , entonces la numeración restante se volverá a calcular en relación con el nuevo valor.

            Para etiqueta

            Los siguientes atributos están disponibles:
            Tabla 1. Atributos de etiqueta

            Atributo	Descripción, valor aceptado.
            invertido	El atributo invertido hace que la lista se muestre en orden inverso (por ejemplo, 9, 8, 7...).
            comenzar	El atributo de inicio especifica el valor inicial a partir del cual comenzará la numeración, por ejemplo, una construcción. Al primer artículo se le asignará el número de serie “10”. También puede especificar el tipo de numeración al mismo tiempo, por ejemplo, .
            tipo	El atributo de tipo especifica el tipo de marcador a utilizar en la lista (letras o números). Valores aceptados: 1: valor predeterminado, numeración decimal. A - numeración de listas en orden alfabético, letras mayúsculas(A, B, C, D). a — numeración de la lista en orden alfabético, letras minúsculas(a, b, c, d). I - numeración en números romanos mayúsculas (I, II, III, IV). i — numeración en números romanos minúsculas (i, ii, iii, iv).

            1. microsoft
            2. Google
            3. Manzana
            Arroz. 2. Lista numerada

            3. Lista de definiciones

            Listas de definiciones se crean usando una etiqueta

            . Para agregar un término, use una etiqueta
            , y para insertar una definición - la etiqueta
            .

            El bloque de lista de definiciones tiene los siguientes estilos de navegador predeterminados:

            Para etiquetas

            ,

            Y

            disponible .

            Director:

            Peter Tochilín

            Elenco:

            Andrey Gaidulyan

            Alexéi Gavrílov

            Vitaly Gogunsky

            María Kozhevnikova

            Arroz. 3. Lista de definiciones

            4. Lista anidada

            A menudo oportunidades listas simples falta, por ejemplo, al crear una tabla de contenido no hay forma de prescindir elementos anidados. El marcado para la lista anidada sería el siguiente:

            • Punto 1.
            • Punto 2.
              • Subcláusula 2.1.
              • Subcláusula 2.2.
                • Subcláusula 2.2.1.
                • Subcláusula 2.2.2.
              • Subcláusula 2.3.
            • Punto 3.

            
            Arroz. 4. Lista anidada

            5. Lista numerada de varios niveles

            Una lista de varios niveles se utiliza para mostrar elementos de la lista en diferentes niveles con varias sangrías. El marcado para una lista numerada de varios niveles sería el siguiente:

            1. párrafo
            2. párrafo
               1. párrafo
               2. párrafo
               3. párrafo
                  1. párrafo
                  2. párrafo
                  3. párrafo
               4. párrafo
            3. párrafo
            4. párrafo

            Este marcado predeterminado creará una nueva numeración para cada lista anidada, comenzando con uno. Para crear numeración anidada, debe utilizar las siguientes propiedades:
            counter-reset restablece uno o más contadores, especificando el valor a restablecer;
            incremento de contador especifica el valor de incremento del contador, es decir en qué incrementos se numerará cada elemento posterior;
            contenido: contenido generado, en en este caso es responsable de mostrar el número antes de cada elemento de la lista.

            Ol ( /* eliminar la numeración estándar */ list-style: none; /* Identifique el contador y asígnele el nombre li. El valor del contador no está especificado; de forma predeterminada es 0 */ counter-reset: li; ) li :before ( /* Definimos el elemento que será numerado - li. El pseudoelemento anterior indica que el contenido insertado usando la propiedad de contenido se colocará antes de los elementos de la lista. El valor del incremento del contador se establece aquí (el valor predeterminado es 1 */ contador-incremento: li /). * La propiedad de contenido muestra el número del elemento de la lista () significa que el texto generado representa los valores de todos los contadores con ese nombre. punto entre números y se agrega un punto con un espacio antes del contenido de cada elemento de la lista */ contenido: contadores(li,".") "."
            Arroz. 5. Lista numerada de varios niveles

          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.

          , cubriendo grupos de etiquetas

          Y

          . Al menos un grupo de etiquetas debe estar emparejado

          con un grupo

          ; etiquetas

          siempre debe ir primero en orden.

          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 cierto tipo lista, generalmente puedes resolver esto haciendo dos preguntas simples:

          1. ¿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.
          2. ¿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 se usa simplemente texto grande, entonces será mucho más difícil diseñar el estilo elementos individuales de alguna manera más o menos útil.
          • El uso de una lista HTML crea un contenido adecuado para el contenido. estructura semántica, no sólo "como una lista" efecto visual. tiene ventajas importantes, 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 debe usar lista correcta HTML.

          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 pertenecer a uno elemento específico lista. 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í:

          1. Capítulo uno
             1. Sección uno
             2. Sección dos
             3. Sección tres
          2. Capítulo dos
          3. 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.

          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 encabezados, o incluso dividirlo en páginas individuales.

          Ejemplo paso a paso

          Echemos un vistazo 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

          • Tortas
          • galletas
          • panes rápidos

          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

          • Tortas
            • Esponja simple
            • Pastel de chocolate
            • Pastel de té de manzana
          • galletas
            • Galletas ANZAC
            • Gotas de mermelada
            • Momentos de fusión
          • Panes/panes rápidos
            • Apagador
            • bollos

          Buenas tardes, queridos lectores. Hoy una breve nota sobre cómo hacer Línea roja para cada párrafo de la página HTML.. Si alguien no lo sabe, la línea roja es la sangría de la primera línea de un bloque de texto. Este tipo de sangría en los párrafos se puede encontrar en casi cualquier texto impreso, pero al crear sitios web, el diseño de una línea roja es bastante raro, a pesar de que hace que el texto sea mucho más fácil de percibir. En caso de que un cliente de repente exija que los párrafos de su sitio web comiencen con una línea roja, a continuación les doy una receta sencilla para solucionar este problema.

          Puedes solucionar el problema de muchas formas, por ejemplo, puedes insertar varias seguidas al principio de cada párrafo. personajes especiales, pero puede tardar bastante gran número tiempo. Por lo tanto, recomiendo usar propiedad CSS sangría de texto, que establece sangría de primera línea bloque de texto. En este caso, no se produce ningún efecto en las líneas restantes.

          La propiedad text-indent tiene una sintaxis simple:

          sangría de texto:<значение> | <проценты>| heredar

          Puede especificar píxeles (px), puntos (pt) y otras unidades aceptadas en CSS como valores. El valor determina cuánto se desplazará el texto de la primera línea hacia la derecha desde posición inicial. Es aceptable indicar valores negativos, entonces el texto se moverá hacia la izquierda. Al especificar valores porcentuales, la sangría de la primera línea se calcula según el ancho del bloque de texto.

          Si necesita agregar una línea roja a un solo párrafo, puede hacer esto:

          Resultado:

          Había un roble al borde del camino. Probablemente era diez veces más antiguo que los abedules que componían el bosque, diez veces más grueso y dos veces más alto que cada abedul. Era un roble enorme, de dos cinchas de ancho, con las ramas rotas y la corteza cubierta de viejas llagas. Con brazos y dedos enormes, torpes, asimétricamente extendidos y nudosos, se encontraba entre los sonrientes abedules, como un viejo monstruo enojado y desdeñoso. Solo él no quería someterse al encanto de la primavera y no quería ver ni la primavera ni el sol.

          O agregar párrafos que deberían comenzar con una línea roja. atributo de clase y agregar estilo deseado:

          
          

          El príncipe Andrei miró varias veces este roble mientras conducía por el bosque. Había flores y hierba bajo el roble, pero él todavía estaba en medio de ellas, sombrío, inmóvil, feo y terco.
          

          Resultado:

          El príncipe Andrei miró varias veces este roble mientras conducía por el bosque. Había flores y hierba bajo el roble, pero él todavía estaba en medio de ellas, sombrío, inmóvil, feo y terco.

          Ahora puedes fácilmente haz una línea roja en el tuyo paginas html . ¡Nos vemos de nuevo!