... Y esta etiqueta ya tiene el " alinear", cuyo valor determina la posición de este contenedor. Hay tres valores:" izquierda", "centrar", "derecho". Por defecto, vale" izquierda"Sin embargo, creo que no te sorprende.

Escribamos lo mismo ahora Código HTMLpero con el uso de contenedores, además, no alineemos el centro, sino la derecha.

Como puede ver, todo funciona. Te aconsejo que también cambies los valores de los atributos " alinear"para ver otros tipos de alineación de contenedores.

Otra forma de alinear elementos HTML - estas son tablas, pero este tema merece una discusión por separado, por lo que hablaremos de ello en uno de los siguientes artículos.

Hasta entonces, su página debería verse así:

Título de nivel 1, centrado

Saludos cordiales, Mikhail Rusakov.

PD Si quieres saber más sobre HTMLluego mira mi curso gratuito con un ejemplo de cómo crear un sitio web en HTML:

A veces, nuestro código no siempre es perfecto. Y realmente quiero que no solo funcione, sino que también esté bellamente diseñado y formateado. El tiempo es nuestro principal enemigo, rara vez nos permite seguir las reglas de la codificación. Intentamos terminar el diseño lo antes posible, o describir una docena de estilos CSS, y lo hacemos a expensas de la legibilidad. En este artículo, proporcionaré una lista de servicios para ayudarlo a formatear su código de una manera que sea un placer verlo.

¿Confías en el programa o haces todo con bolígrafos?

Seguro que tienes una pregunta: ¿cómo hacer que el código sea legible? ¿Puede el programa organizar de manera competente todas las sangrías y saltos de línea de modo que el ojo humano reciba solo placer estético de la apariencia del código? ¡Por supuesto que puede! No se equivoque que, dado que el robot hace el trabajo por usted, se hará "sucio". Los servicios que se presentarán en el artículo a continuación me han salvado más de una vez. Por ejemplo, en situaciones en las que era necesario copiar el mismo código html de otro sitio, y las etiquetas, cuando se insertaban, simplemente estaban dispuestas en un orden caótico a lo largo de las líneas: un montón de pestañas, no saltos de línea lógicos, ¡absolutamente ningún anidamiento es visible! Probablemente, muchos estén familiarizados con esto. Y realmente quiero que tenga una forma diferente en su sitio web: ordenado y bien legible. Después de todo, en primer lugar, lo hacemos por nosotros mismos, por la conveniencia de un mayor soporte de este o aquel código.

Formateemos tu código

Habla menos, trabaja más. Como ha demostrado la práctica, formatear el código en línea es bastante simple. Solo necesita copiar su código "sucio" y pegarlo en campos de texto especiales en uno de los sitios especificados. Luego presiona un botón, espera un poco y ¡listo! Terminas con un código hermoso, bien formateado y de fácil lectura.

Aquí hay una lista de todos los purificadores de código que conozco para diferentes idiomas.

¿Amas tu CSS como yo lo amo? Si es así, sin duda, esfuércese por asegurarse de que no solo se comporte y se sienta bien, sino que también se vea agradable.
Con suerte, las herramientas a continuación ayudarán a que su código se acerque más al ideal.

1. Styleneat

Probablemente el servicio más simple de la revisión.
La herramienta no tiene tantas posibilidades:

• Ordenar propiedades alfabéticamente
• Ordenar los selectores alfabéticamente (si "Organización segura" está marcada, esta opción no está disponible)
• Posibilidad de elegir el estilo de formato: multilínea o una sola línea
• Sabe cómo extraer archivos CSS conectados con la importación al archivo principal y procesarlos sin piedad
• Puede enviar el código para su procesamiento usando: un cuadro de texto, cargando un archivo o proporcionando un enlace a CSS
• El resultado se puede tomar en forma de código CSS o archivo cargado

2. FormatoCSS

A pesar de su formidable apariencia, la herramienta hace un excelente trabajo con sus funciones, de las cuales tiene muchas.
Puedes personalizar mucho:

• colocación de espacios / tabulaciones / nuevas líneas,
• ordenar propiedades y nombres de selectores,
• convertir nombres de propiedades y selectores a minúsculas, etc.

Lo que me gustó especialmente de este servicio: la capacidad de sub-reglas de formato de "escalera" (me parece una forma muy conveniente de organizar estilos).

3. CleanCSS

Una herramienta lo suficientemente poderosa que nos brinda muchas oportunidades:

• Puede alimentar CSS copiando y pegando en el campo "Código CSS" o como un enlace a un archivo de estilo.
• Puede obtener el resultado en forma de texto o en un archivo
• El usuario puede elegir entre 4 tipos de formato de fuente: el código se puede optimizar para el tamaño más pequeño o, a la inversa, para una mejor legibilidad. Es posible configurar una plantilla de formato en el campo "Plantilla personalizada"
• Sabe cómo combinar reglas, traer propiedades a una forma corta
• Si es necesario, elimine los comentarios y las definiciones no válidas.
• Al igual que los servicios descritos anteriormente, con mucho gusto clasificará lo que su corazón desee en orden alfabético y lo convertirá a minúsculas / mayúsculas.

Por cierto, este servicio se basa en el motor "" - Analizador / optimizador CSS de código abierto. Por lo tanto, todos pueden representar libremente su propio bello en función de él, con blackjack e interruptores.
UPD\u003e En los comentarios sugirieron un enlace al gemelo de este servicio: CodeBeautifier. El conjunto de funciones es casi idéntico a CleanCSS (el servicio también se ejecuta en CSSTidy).

4. ProCSSor

En mi opinión sofisticada, el más conveniente de todos los presentados en esta revisión.
El servicio se encuentra con el usuario con una interfaz agradable e información sobre herramientas muy clara que le permite descubrir rápidamente la configuración.
Como cualquier embellecedor que se precie, ProCSSor aceptará nuestro código en el campo de entrada, en forma de archivo o enlace. Enviará el resultado al navegador y mostrará un enlace para descargar el archivo.
La herramienta tiene suficientes configuraciones para complacer a casi cualquier usuario, no tiene mucho sentido enumerarlas, es mejor probarla de inmediato.
Una buena característica del servicio es la capacidad de guardar su configuraciónpara que la próxima vez pueda omitir el paso de configuración e ir directamente al proceso de refinado.
Otro atractivo es ProCSSor proporciona API, la documentación se puede encontrar aquí:

Con las etiquetas de formato, puede resaltar texto de importancia semántica en las páginas, crear textos de "escritura a mano", insertar caracteres en superíndice y subíndice en documentos HTML y aumentar y disminuir el tamaño de fuente.

¿Qué es la semántica?

La semántica en HTML es la práctica de proporcionar significado y estructura al contenido del documento mediante una etiqueta adecuada. El código semántico describe el significado del contenido de un documento, independientemente de su estilo o apariencia. El uso de elementos semánticos tiene varios beneficios:

1. el código semántico afecta directamente la cantidad de código HTML. Cuanto menos código, más "ligero" es el documento, lo que significa que las páginas web se cargan más rápido y se requiere menos memoria por parte del usuario. El sitio se vuelve más rápido y menos costoso.
2. computadoras, lectores de pantalla para quienes las etiquetas y sus atributos son importantes, leer y comprender adecuadamente el contenido de la página web.
3. código semántico En igualdad de condiciones, aparecerá más alto en los resultados del motor de búsqueda que una página con un código no semántico.

Miniatura

Para poner el texto en negrita y llamar la atención sobre él, usaremos un elemento en línea. ... Hay dos etiquetas que puede utilizar para poner el texto en negrita: etiquetas y ... Es importante comprender la diferencia semántica entre los dos.

Etiqueta semánticamente se utiliza para dar más importancia al texto y, por tanto, es la opción más popular para el texto en negrita. Etiqueta por otro lado, semánticamente significa el énfasis estilístico del texto, que no siempre es la mejor opción para un texto digno de mención. Debe evaluar la importancia del texto para el que desea establecer el peso y seleccionar la etiqueta adecuada. Aunque los navegadores los muestran exactamente igual, los motores de búsqueda pueden darles diferentes significados al analizar una página.

Código HTML con etiquetas y :

Atención: descenso empinado.

Estas son las recetas ensalada rusa y vinagreta.

Ejemplo: texto importante y en negrita

• Inténtalo tú mismo "

Atención: descenso empinado. Estas son las recetas ensalada rusa y vinagreta.

Atención: descenso empinado.

Estas son las recetas ensalada rusa y vinagreta.

Texto en cursiva

Para texto en cursiva enfatizado, usaremos el elemento en línea ... Al igual que con las etiquetas para texto en negrita, hay dos etiquetas diferentes que establecen el texto en cursiva, cada una con su propio significado semántico.

Etiqueta se usa para enfatizar un fragmento de texto; esta es la opción más popular para cursiva. Otra opción es usar la etiqueta , que se utiliza simplemente para crear texto en cursiva.

Código HTML con etiquetas y :

yo amor ¡Patria!

Nombre Victoria significa victoria.

Etiquetas y

Etiqueta Reduce el tamaño de la fuente en uno en comparación con el texto normal. En HTML, el tamaño de fuente se mide en unidades convencionales de 1 a 7, el tamaño de texto promedio utilizado por defecto es 3. Por lo tanto, agregar una etiqueta disminuye el texto en una unidad convencional. Etiqueta por el contrario, aumenta el tamaño de la fuente en uno sobre el texto normal.

Código HTML con etiquetas y :

Este es texto sin formato.

Este es un texto con letras más pequeñas.

Este es un texto con letras grandes.

Ejemplo: fuente reducida y ampliada

• Inténtalo tú mismo "

Este es texto sin formato.

Este es un texto con letras más pequeñas.

Este es un texto con letras grandes.

Etiqueta HTML

Etiqueta se utiliza para resaltar o resaltar texto debido a su relevancia en el contexto. Un buen ejemplo es resaltar una palabra que el usuario estaba buscando en un documento. Normalmente, en los navegadores, el color de fondo del texto dentro del contenedor. resaltado en amarillo como un marcador de tinta.

Etiqueta HTML

Etiqueta se utiliza para resaltar el texto que se ha eliminado en una nueva versión del documento. Este formato le permite realizar un seguimiento de los cambios que se han realizado en el texto revisado del documento. Los navegadores suelen marcar el texto en un contenedor como tachado .

Etiqueta HTML

Etiqueta está diseñado para resaltar el texto que se ha agregado a una nueva versión del documento. Este formato le permite realizar un seguimiento de qué parte del contenido se agregó cuando el documento se actualizó por última vez. Los navegadores suelen marcar el texto en un contenedor .

Etiqueta HTML

Etiqueta _{muestra el texto en subíndice. Al mismo tiempo, el texto se ubica por debajo de la línea de base del resto de caracteres de la línea y el tamaño reducido. Dicho texto se puede utilizar en la práctica, por ejemplo, para escribir varias fórmulas en subíndice .}

Etiqueta HTML

Etiqueta ^{muestra el texto en superíndice. El texto se muestra con un tamaño reducido y se coloca más alto que la línea de base del resto de los caracteres de la línea. Dicho texto se puede utilizar en la práctica, por ejemplo, para escribir varias fórmulas o notas al pie. sobrescrito .}

Traslación de líneas y líneas horizontales.

Etiqueta
(linea de alimentación)

Como ha visto antes, la etiqueta

Le permite separar lógica y físicamente un párrafo de texto de otro, pero ¿qué sucede si necesita ajustar el texto en una nueva línea dentro de un párrafo? Una sola etiqueta está especialmente diseñada para este propósito.
... Una de las diferencias a primera vista de esta etiqueta de

No hay sangría antes y después de la etiqueta.
... Esto permite que las líneas de texto adyacentes se coloquen más juntas. La capacidad de determinar de forma independiente la ubicación de la transferencia puede resultar útil al escribir poesía o al separar varios elementos de un documento. Agregar un elemento
en cualquier línea donde desee interrumpir el flujo de texto e insertar un salto de línea.

Etiqueta

---

(linea horizontal)

Las líneas horizontales permiten dividir el texto largo formalmente sin restricciones en subsecciones separadas. Las líneas horizontales en un documento web juegan el mismo papel que las rayas ornamentales impresas. Se usa una sola etiqueta para insertar una línea horizontal

---

... Esta etiqueta única en bloques le permite insertar una línea horizontal cuyo ancho sea el ancho completo del contenedor en el que se anida la etiqueta o el ancho de la ventana del navegador.

Ejemplo: avances de línea y líneas horizontales

• Inténtalo tú mismo "

Estas líneas están separadas entre sí por el párrafo (p):

Este es el primer párrafo.

Éste es el segundo párrafo.

Esta es la linea:

---

Estas líneas se separan entre sí mediante la etiqueta br:
Nuestra Tanya llora fuerte
Dejó caer una pelota al río

Código HTML con etiquetas , , , _{, ^:}

Hay una palabra en el texto: suerte.

Palabra problema ha sido eliminado del texto.

Palabra victoria fue agregado al texto.

Fórmula de agua: H ₂O.

Velocidad del viento: 20 m ³/ seg.

Ejemplo: formatear texto

• Inténtalo tú mismo "

Hay una palabra en el texto: suerte. La palabra problemas se ha eliminado del texto. La palabra se ha agregado al texto. Fórmula del agua: Н 2 O. Velocidad del viento: 20 m 3 / seg.

Hay una palabra en el texto: suerte.

Palabra problema ha sido eliminado del texto.

Palabra victoria fue agregado al texto.

Fórmula de agua: H ₂O.

Velocidad del viento: 20 m ³/ seg.

Tareas

Tarea final

En esta lección, aprendió sobre los elementos para marcar frases pequeñas y palabras sueltas. Se prestó especial atención al marcado lógico del texto mediante etiquetas que le permiten indicar la importancia de una palabra o frase, y no solo el formato visual.

Es hora de repetir lo aprendido y completar cinco tareas simples:

Palabra semánticamente fuerte

• Decide por ti mismo "

Resalte la palabra "profesional" en negrita, indicando así la especial importancia semántica de esta palabra.

Debes convertirte en un profesional en tu campo.

Debes convertirte profesional su negocio

Énfasis en la palabra

• Decide por ti mismo "

Enfatice la palabra "completo". Al mismo tiempo, visualmente, esta palabra debe mostrarse en cursiva.