Herramientas necesarias
Para desarrollar el concepto de alineación en HTML, debemos mencionar algunas herramientas necesarias para ejecutar el código HTML. Uno es un editor de texto y el segundo es un navegador. Un editor de texto tal vez un bloc de notas, sublime, bloc de notas ++ o cualquier otro que pueda ayudar. En esta guía, hemos utilizado el bloc de notas, una aplicación predeterminada en Windows, y Google Chrome como navegador.
Formato HTML
Para comprender la alineación, primero debemos tener algunos conocimientos sobre los conceptos básicos de HTML. Hemos presentado la captura de pantalla de un código de muestra.
< html >
< cabeza >…</ cabeza >
< cuerpo >….</ cuerpo >
</ html >
HTML tiene dos partes principales. Uno es la cabeza y el otro es el cuerpo. Todas las etiquetas están escritas entre paréntesis angulares. La parte principal trata de nombrar la página html usando la etiqueta de título. Y también, use la declaración de estilo dentro de la cabeza. Por otro lado, el cuerpo se ocupa de todas las demás etiquetas de texto, imágenes o videos, etc. En otras palabras, lo que quieras agregar a tu página html está escrito en la parte del cuerpo de html.
Una cosa que debo resaltar aquí es la apertura y el cierre de la etiqueta. Cada etiqueta que se escribe debe estar cerrada. Por ejemplo, Html tiene la etiqueta inicial de y la etiqueta final es. Por tanto, se observa que la etiqueta final tiene una barra inclinada seguida del nombre de la etiqueta. Del mismo modo, todas las demás etiquetas también siguen el mismo enfoque. Luego, cada editor de texto se guarda con la extensión html. Por ejemplo, hemos utilizado un archivo con el nombre example.html. Luego verá que el ícono del bloc de notas se ha convertido en el ícono del navegador.
Como la alineación es contenido de estilismo. El estilo en html es de tres tipos. Un estilo en línea, estilo interno y externo. Inline implica en la etiqueta. Internal está escrito dentro de la cabeza. Al mismo tiempo, el estilo externo se escribe en un archivo CSS separado.
Estilo de texto en línea
Ejemplo 1
Ahora es el momento de discutir un ejemplo aquí. Considere la imagen que se muestra arriba. En ese archivo de bloc de notas, hemos escrito un texto simple. Cuando lo ejecutamos como navegador, mostrará el resultado que se muestra a continuación en el navegador.
Si queremos que este texto se muestre en el centro, modificaremos la etiqueta.
Esta etiqueta es una etiqueta en línea. Escribiremos esta etiqueta cuando introduzcamos la etiqueta de párrafo en el cuerpo html. Después del texto, cierre la etiqueta de párrafo. Guarde y luego abra el archivo en el navegador.
El párrafo se alinea en el centro, tal como se muestra en el navegador. La etiqueta utilizada en este ejemplo se utiliza para cualquier alineación, es decir, para la izquierda, la derecha y el centro. Pero si desea alinear el texto solo en el centro, entonces se usa una etiqueta específica para este propósito.
< centrar >……..</ centrar >La etiqueta central se usa antes y después del texto. Esto también mostrará el mismo resultado que el ejemplo anterior.
Ejemplo 2
Este es un ejemplo de alineación del encabezado en lugar de un párrafo en el texto html. La sintaxis de esta alineación de encabezado es la misma. Esto se puede hacer a través de la etiqueta o mediante un estilo en línea o agregando la etiqueta de alineación dentro de la etiqueta de encabezado.
La salida se muestra en el navegador. La etiqueta de título ha convertido el texto sin formato en un título y la etiqueta lo ha alineado en el centro.
Ejemplo 3
Alinear el texto en el centro
Considere un ejemplo en el que se muestra un párrafo en el navegador. Necesitamos alinear esto en el centro.
Abriremos este archivo en el bloc de notas y luego lo alinearemos en la posición central usando la etiqueta.
< pag estilo =texto-alinear: centro;>Después de agregar esta etiqueta en la etiqueta de párrafo, guarde el archivo y ejecútelo en el navegador. Verá que el párrafo ahora está centrado y alineado. Vea la imagen a continuación.
Alinear el texto a la derecha
Inclinar el texto hacia la derecha es similar a colocarlo en el centro de la página. Solo la palabra central se reemplaza por derecha en la etiqueta de párrafo.
< pag estilo =texto-alinear: derecha;> ……… ..</ pag >Los cambios se pueden ver a través de la imagen adjunta a continuación.
Guarde y actualice la página web en el navegador. El texto ahora se mueve al lado derecho de la página.
Estilo interno del texto
Ejemplo 1
Como se describió anteriormente, el CSS interno (hoja de estilo en cascada) o el estilo interno es un tipo de CSS que se define en la parte principal del HTML de la página. Funciona de manera similar a las etiquetas internas.
Considere la página que se muestra arriba; contiene los encabezados y el párrafo. Tenemos el requisito de ver el texto en el centro. La alineación en línea requiere la escritura manual de etiquetas dentro de cada párrafo. Pero el estilo interno se puede aplicar automáticamente a cada párrafo del texto mencionando p en la declaración de estilo. Entonces no es necesario escribir ninguna etiqueta dentro de la etiqueta de párrafo. Ahora observe el código y está funcionando.
< estilo >PAG{Texto-alinear: centro}
</ estilo >
Esta etiqueta está escrita dentro de la etiqueta de estilo en la parte principal. Ahora ejecute el código en el navegador.
Cuando ejecute la página en el navegador, verá que todos los párrafos están alineados en el centro de la página. Esta etiqueta se aplica a todos los párrafos presentes en el texto.
Ejemplo 2
En este ejemplo, al igual que en un párrafo, alinearemos todos los encabezados del texto al lado derecho. Para este propósito, mencionaremos encabezados en la declaración de estilo dentro del encabezado.
H2, h3{
Texto-alinear: Derecha
}
Ahora, después de guardar el archivo, ejecute el archivo del bloc de notas en el navegador. Verá que los títulos están alineados en el lado derecho de la página HTML.
Ejemplo 3
En el estilo interno, puede haber una situación en la que necesite alinear el texto de solo algunos párrafos en el texto mientras que otros permanecen iguales. Por lo tanto, estamos usando el concepto de clase. Introducimos la clase con un método de puntos dentro de la etiqueta de estilo. Es necesario agregar el nombre de la clase dentro de la etiqueta de párrafo que desea alinear.
< estilo >.centrar{
Texto-alinear: centro}
</ estilo >
clase =centro> ……</ pag >
Hemos agregado la clase en los primeros tres párrafos. Ahora ejecuta el código. Puede ver en la salida que los primeros tres párrafos están alineados en el centro, mientras que otros no lo están.
Conclusión
Este artículo explica que la alineación se puede realizar de diferentes formas a través de etiquetas internas y en línea.