Cómo alinear el texto en HTML

"Lenguaje de marcado de hipertexto" es el lenguaje básico del diseño de un sitio web. Se sabe que HTML es un lenguaje frontal para diseñar la interfaz de un sitio web. Hay muchas funciones con respecto a este idioma. Los comandos utilizados para el diseño se conocen como etiquetas. Estas etiquetas se combinan para desarrollar un sitio web. Un solo archivo de código HTML es responsable de un sitio web estático que no se ejecuta. Los contenidos HTML son texto, imagen, formas, color, alineación, etc. La alineación es un ingrediente importante en el diseño, ya que determina el contenido respectivo de manejar en un lugar específico. Discutiremos algunos ejemplos básicos en esta guía.

Herramientas necesarias

Para elaborar el concepto de alineación en HTML, debemos mencionar algunas herramientas necesarias 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 necesitamos tener algunos conocimientos de conceptos básicos de HTML. Hemos presentado la captura de pantalla de un código de muestra.

…
… .

HTML tiene dos partes principales. Uno es la cabeza, y el otro es el cuerpo. Todas las etiquetas están escritas en soportes angulares. La parte principal trata de nombrar la página HTML utilizando la etiqueta de "Título". Y también, use la declaración de estilo dentro de la cabeza. Por otro lado, el cuerpo trata con todas las demás etiquetas de texto, imágenes o videos, etc. En otras palabras, lo que quiera agregar a su página HTML está escrita en la parte del cuerpo de HTML.

Una cosa que necesito resaltar aquí es la apertura y el cierre de la etiqueta. Cada etiqueta que está escrita debe estar cerrada. Por ejemplo, HTML tiene una etiqueta de inicio de y la etiqueta final es . Por lo tanto, se observa que la etiqueta final tiene un corte seguido del nombre de la etiqueta. Del mismo modo, todas las demás etiquetas también siguen el mismo enfoque. Cada editor de texto se guarda con la extensión de HTML. Por ejemplo, hemos usado un archivo con el ejemplo de nombre.html. Entonces verá que el icono del bloc de notas se ha cambiado en el icono del navegador.

Como la alineación está contento de estilo. El estilo en HTML es de tres tipos. Un estilo en línea, un estilo interno y externo. En línea implica en la etiqueta. Interno está escrito dentro de la cabeza. Al mismo tiempo, el estilo externo se escribe en un archivo CSS separado.

Estilo en línea de texto

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 ejecutemos como navegador, mostrará la salida que se da a continuación en el navegador.

Si queremos que este texto se muestre en el centro, alteraremos la etiqueta.

Esta etiqueta es una etiqueta en línea. Escribiremos esta etiqueta cuando presentaremos la etiqueta del párrafo en el cuerpo HTML. Después del texto, luego cierre la etiqueta del párrafo. Guarde y luego abra el archivo en el navegador.

El párrafo está alineado en el centro, como se muestra en el navegador. La etiqueta utilizada en este ejemplo se usa para cualquier alineación, yo.mi., para izquierda, derecha y centro. Pero si desea alinear el texto solo en el centro, entonces se usa una etiqueta específica para este propósito.

…

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 alinear el encabezado en lugar de un párrafo en el texto HTML. La sintaxis para esta alineación de encabezado es la misma. Esto se puede hacer a través de la etiqueta como mediante el estilo en línea o agregando la etiqueta Aline.

La salida se muestra en el navegador. La etiqueta de encabezado ha convertido el texto plano en un encabezado, y la etiqueta la 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.

Después de agregar esta etiqueta en la etiqueta del párrafo, guarde el archivo y ejecutelo en el navegador. Verá que el párrafo ahora está centrado alineado. Vea la imagen a continuación.

Alinear el texto a la derecha

Para inclinar el texto a la derecha es similar a colocarlo en el centro de la página. Solo la palabra "centro" se reemplaza por "correcto" en la etiqueta del párrafo.

…

Los cambios se pueden ver a través de la imagen que se 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 de texto

Ejemplo 1

Como se describió anteriormente, que el CSS interno (hoja de estilo en cascada) o el estilo interno es un tipo de CSS que se define en la parte de la cabeza de HTML de la página. Funciona de manera similar a las etiquetas internas lo hacen.

Considere la página que se muestra arriba; Contiene los encabezados y el párrafo en él. 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 hay necesidad de escribir ninguna etiqueta dentro de la etiqueta del párrafo. Ahora observe el código y está funcionando.

Esta etiqueta está escrita dentro de la etiqueta de estilo en la parte de la cabeza. 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 cada párrafo presente en el texto.

Ejemplo 2

En este ejemplo, al igual que un párrafo, alinearemos todos los encabezados en el texto al lado derecho. Para este propósito, mencionaremos encabezados en la declaración de estilo dentro de la cabeza.

H2, H3

Text-Align: correcto

Ahora, después de guardar el archivo, ejecute el archivo de bloc de notas en el navegador. Verá que los encabezados 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 siguen siendo el mismo. Por lo tanto, estamos utilizando el concepto de clase. Presentamos la clase con un método de punto dentro de la etiqueta de estilo. Es necesario agregar el nombre de la clase dentro de la etiqueta del párrafo que desea alinearse.

< p class = “center”>…

Hemos agregado la clase en los primeros tres párrafos. Ahora ejecuta el código. Puede ver en la salida que los tres primeros párrafos están alineados en el centro, mientras que otros no están.

Conclusión

Este artículo explicó que la alineación podría hacerse de diferentes maneras a través de etiquetas en línea e internas.