Atributos y encabezados en HTML. Alineación de contenido de etiqueta Inserta contenido antes del contenido del objeto seleccionado. método before () en jQuery
Como prometí anteriormente, en este tutorial aprenderá cómo alinear horizontalmente el contenido de cualquier etiqueta HTML en una página sin usar el atributo de alineación obsoleto. Como habrás adivinado, volveremos a utilizar estilos (CSS), o más bien nuestro atributo de estilo favorito.
Entonces, para alinear el contenido de un elemento HTML, debe asignar uno de los siguientes valores al atributo de estilo:
- alineación de texto: centro- Alinear cada línea al centro de un elemento, como un párrafo.
- alineación de texto: izquierda- Cada línea está al ras del lado izquierdo del elemento (este es el valor predeterminado).
- alineación de texto: derecha- Cada línea se presiona contra el lado derecho.
- alineación de texto: justificar- Alineación inmediata a los lados izquierdo y derecho del elemento. Explicará. Por lo general, un elemento, como un párrafo, tiene un lado del texto siempre plano y el otro lado está "roto", ya que las longitudes de las líneas son ligeramente diferentes. Y cuando usamos el valor text-align:justify , cada línea se distribuye uniformemente en ancho. Si es necesario, el navegador agrega espacios adicionales entre palabras, y la primera y la última palabra de la línea siempre se presionan en los lados correspondientes, por lo que el bloque está parejo en ambos lados.
Ejemplo de alineación de contenido de etiqueta
Título del centro.
Párrafo central.
Resultado en el navegador
Título del centro.
El texto del párrafo se presiona a la derecha.
Párrafo central.
En general, la alineación horizontal solo se aplica a etiquetas de bloque y celdas de tabla (más sobre esto más adelante). Aunque, por otro lado, aunque lo intentes, no podrás aplicarlo a incorporado (inline). ¿Por qué? ¿Recuerdas que recientemente aprendimos que el ancho de un elemento en línea es igual a su contenido? En consecuencia, resulta que este mismo contenido simplemente no tiene dónde alinearse y el navegador simplemente ignorará su "arte". :)
Tarea.
- Crea un encabezado para el artículo, dos de sus secciones y una subsección en la primera sección. Y deja que el título del artículo se ubique en el centro de la página.
- Establezca la fuente para toda la página en Arial y todos los encabezados en Times y déjelos en cursiva.
- Establezca el color del texto del título del artículo en #FF6600, las secciones en #6600FF y deje la subsección sin cambios.
- Escriba un párrafo debajo de cada encabezado, y el texto de cada uno de ellos debe ocupar al menos tres líneas cuando se ve en un navegador.
- Alinee el segundo párrafo al centro, el tercero a la derecha y el cuarto a ambos.
Seguimos estudiando HTML. En este tutorial, veremos los encabezados de página HTML, qué son los encabezados, cómo usarlos correctamente y cuándo se pueden usar. También analizaremos los párrafos para que ya puedas llenar tu página de texto, pero, lo más importante, hacerlo bien.
Si no has leído el primer artículo, puedes encontrarlo aquí:
- Lección 1. ¿Qué es HTML?
Teoría y Práctica - Párrafos y encabezados de una página HTML
Hoy hablaremos de párrafos y encabezados. Comencemos de manera simple: con párrafos y dónde se aplican.
Párrafos por página
Ahora daré un ejemplo de código en el que estará presente la etiqueta de párrafo.
Ya recuerdas la estructura básica de la primera lección. Allí desmantelamos lo básico y vimos qué es HTML. Por lo tanto, nos centraremos en lo que hay entre las etiquetas.
.
Cuando escribe cualquier texto en una página, ya sea solo un párrafo o una pequeña línea explicativa debajo de la imagen, debe colocar este texto dentro de la etiqueta.
En lecciones posteriores, verá el proceso de dar formato a estos párrafos. Ahora debe comprender que no puede poner una etiqueta en una página sin ninguna etiqueta. Porque en el futuro será difícil aplicar algunos estilos individuales para esta sección particular del texto.
Trate de escribir algunos párrafos. Ponga algunos párrafos en la etiqueta y deje algunos sin ella. E inmediatamente verás la diferencia. Porque si escribe un párrafo dentro de esta etiqueta, inmediatamente tendrá sangrías. Ahora pasemos a los encabezados HTML de la página.
Encabezados HTML por página
Hay semántica en un documento HTML. No estoy hablando de la tecnología HTML5 y sus nuevas etiquetas. Aquí solo analizaremos los más básicos para que puedas dominar rápidamente los conceptos básicos de HTML. La semántica significa que los encabezados, párrafos, tablas, etc., no deben crearse con la misma etiqueta. Se puede hacer, pero la tecnología HTML es más diversa y existen etiquetas apropiadas para diferentes situaciones. Y solo necesita dominar las etiquetas básicas para poder trabajar libremente con código HTML.
Escribí esta pequeña introducción al hecho de que para los párrafos es necesario usar la etiqueta que ya conoce. Pero para los encabezados, se utilizan etiquetas que comienzan con la letra inglesa "H".
Aquí está la lista completa de encabezados que puede usar:
Algunas de estas etiquetas se utilizan con mucha más frecuencia. Estas son etiquetas como h1, h2 o h3. Si alguien ya está familiarizado con CSS, entonces entiende que el encabezado HTML El encabezado de la página h3 se puede diseñar de tal manera que se vea como h1 o h2 también. Pero los significados que tienen, al menos para la optimización SEO, son radicalmente diferentes. Por regla general, estos números, dentro de las etiquetas, deben entenderse como el nivel de importancia de este o aquel encabezado HTML. Por lo tanto, es necesario trabajar estos elementos con mucho cuidado y luego los motores de búsqueda comenzarán a notar sus artículos.
Hasta que lleguemos al CSS, verá estilos de encabezado que están configurados de forma predeterminada en los navegadores. Si inserta estas etiquetas una por una y escribe un texto dentro, verá lo siguiente:
Para los robots de búsqueda, el uso de encabezados en la página también es importante. Hay ciertas reglas que puedes leer en nuestro libro: Libro PDF en la promoción del sitio.
Después de haber estudiado todo, inmediatamente entramos en el código e intentamos escribir todo con nuestras propias manos. Esta es la forma más rápida de dominar cualquier lenguaje de programación. Pero la tecnología HTML es mucho más ligera que cualquier lenguaje de programación, por lo que cualquiera puede resolverlo. De esta forma recordarás mejor las etiquetas.
Video tutorial - ¿Título de la página HTML? (práctica)
Video visual sobre el ejemplo de trabajar con estas etiquetas:
Tarea
D/N: como ejemplo, escribe un texto corto que constará de 5-7 párrafos y 2-3 encabezados diferentes.
¡Practica más en párrafos y títulos de páginas HTML!
www.sitehere.ru
Cómo hacer una tabla en HTML
Cada tabla contiene filas y columnas. Ellos, a su vez, pueden contener texto y una imagen.
Para agregar una tabla a la página, use la etiqueta
Las filas y columnas se definen mediante etiquetas.
Filas de la tabla (
Creemos una tabla práctica que constará de una fila y cuatro columnas. Necesitamos marcar el comienzo de la tabla (
| ), fin de la línea ( |
Resultado:
Ahora usemos la etiqueta
Resultado:
Configuré el ancho de la tabla en 400 y, como puede ver, la primera y la tercera celda están en negrita y alineadas al centro. El resto están en el lado izquierdo. Le recomiendo que siempre dedique suficiente tiempo a formatear su código para no confundirse. En una mesa pequeña, puede que esto no juegue un papel importante, pero en una grande...
Hablemos un poco más sobre el ancho ya que lo mencioné. El ancho de la tabla se establece mediante el atributo de ancho, la altura - altura. Puede cambiar de esta manera no solo el ancho y el alto de la tabla, sino también el tamaño de las celdas (todas deben caber en la tabla, de lo contrario, el navegador no entenderá lo que quiere de ella).
Estos valores (ancho y alto) se especifican en píxeles, porcentaje. Puedes dejarlo así, no escribas nada, el navegador pensará que te dio pereza escribir “px” y considerará el número como píxeles.
Bueno, si desea alinear el contenido de una o más celdas de la tabla, use el atributo de alineación con los valores izquierda, centro, derecha. Esta es la alineación horizontal, pero también existe la alineación vertical y tiene su propio atributo separado: valign, que puede tomar los siguientes valores: línea base (alineación vertical exactamente a lo largo de la línea base), inferior (a lo largo del borde inferior), medio (celda los valores se alinearán verticalmente en el medio), arriba (a lo largo del borde superior). De forma predeterminada, los navegadores alinean las celdas al centro (medio).
Aumente el marco (bordes) de la tabla y cambie su color
Te habrás dado cuenta, ya te he mostrado cómo trabajar con el marco y el ancho de la mesa. En general, de forma predeterminada, la tabla siempre se muestra en el navegador sin marco, y esto no siempre es conveniente. Es por eso:
De acuerdo, de alguna manera no mucho. Pero esto no es un problema para aquellos que ya están familiarizados con el atributo de borde HTML, que usé en los ejemplos al principio de la publicación.
Agregando solo 1 atributo y se pone mejor:
¡Es como Excel! ¿Imagina que no habría división de celdas por líneas (cuadrícula)? Bueno, terror. Pero, ¿qué sucede si establece el borde en 10?
Como puede ver, el borde solo afecta el borde exterior y el marco de la tabla, cambiando el ancho del marco exterior, mientras deja los bordes entre las celdas de la tabla iguales.
Cambiemos el color de este borde, porque también hay un atributo para esto: bordercolor. Establezca su valor en "d3d3d3". Resultado:
Cómo sangrar una tabla
También se necesitan sangrías en la tabla para aumentar la "legibilidad", así como los bordes de las celdas. Para crear relleno, necesitamos el atributo "cellspacing". Seguiré trabajando con nuestra mesa 4x4, aplicándole este atributo. Actualizaré el código por ti (solo incluyo una línea para no saturar la publicación):
Resultado:
Estas eran las muescas en el exterior de las celdas. Pero hay un atributo similar para configurar el relleno dentro de las celdas - cellpadding, ahora también lo haré igual a 10 y verán cómo ha aumentado la distancia desde el contenido de la celda hasta sus bordes (tuve que reducir el número de celdas para que que la mesa no crezca en exceso). El código:
Resultado:
Ahora eliminaremos "cellspacing" y dejaremos solo "cellpadding". Resultado:
Entonces descubrimos cómo crear sangrías en la tabla y administrarlas. ¡Bien! Si está interesado en cómo hacer un salto de línea, entonces esto está escrito aquí.
Cómo fusionar celdas correctamente en una tabla
También hay atributos especiales para fusionar celdas en su tabla. Estos son "colspan" y "rowspan". El primero (colspan) combina celdas por columnas (horizontalmente), el segundo (rowspan), por filas o verticalmente. Unamos algo en nuestra mesa.
¡Aquí con cuidado! Al combinar celdas, debe reducir su número por el número (menos uno) que especifique en los parámetros de atributo. Si crea una tabla en HTML, combine celdas sin eliminar las innecesarias, entonces el sitio desaparecerá. Unimos dos, eliminamos uno. Unimos tres, eliminamos dos. Etc.
Al combinar celdas en columnas o columnas, ¡se debe eliminar una celda! Y haz esto tantas veces como celdas fusiones. Ahora les mostraré un ejemplo.
Al combinar celdas en columnas o columnas, ¡se debe eliminar una celda! Y haz esto tantas veces como celdas fusiones.
Ahora les mostraré un ejemplo. Aquí está nuestra tabla actual:
Combinemos las celdas con los números "1 y 2", "5 y 9", "4, 8, 12", "6 y 7". Mira lo genial que resultó, ¡yo mismo no esperaba!
El principio de asociación es éste.
Al fusionar horizontalmente las celdas número 1 y 2, debe escribir "colspan =" 2 ″ en la primera, colocar el contenido de la segunda en la primera (estamos fusionando) y eliminar la segunda celda (u ocultarla de HTML como Lo hice, lo mostraré más tarde).
Al fusionar verticalmente las celdas número 4, 8, 12, debe escribir "rowspan =" 2 ″ "en la primera celda (número 4) y eliminar el contenido del resto, después de colocarlos en la celda combinada.
Aquí está el código que se me ocurrió. He ocultado las celdas para mayor claridad (para que sea más fácil de entender), pero también puede eliminarlas.
Espero haberme explicado claramente y dado un buen ejemplo.
Cómo hacer un encabezado para una tabla
Para darle un título a una tabla, use etiquetas
