Más o menos vamos adentrándonos más en la práctica del HTML siendo un lenguaje, el día de hoy veremos con más detalles algunas etiquetas que permitirán darle un formato a lo que escribimos, es decir, como justificar nuestro texto, definir párrafos ya sea izquierda o derecha, introducirle viñetas, numeraciones, etc.
Ya conocemos que para la definición de un párrafo podemos utilizar la etiqueta <p>, el cual añade un salto dejando una línea en blanco para continuar con el resto del archivo.
Utilizando también la etiqueta <br>, el cual su cierre no existe (</br>) y es utilizada para un simple retorno con lo que no solo se puede dejar la línea en blanco, sino que se cambia de línea.
Ahora bien, los párrafos que se añaden con la etiquetas <P> son fácilmente manipulables, pudiéndose centrar, llevar a la izquierda o a la derecha especificando en el interior de la etiqueta con otro atributo “align”. El atributo no es más que una pequeña ayuda para definirle cierto funcionamiento a la etiqueta.
Así pues, para introducir un escrito alineado a la izquierda debemos escribir:
[callout font_size=”13px” style=”bluegrey”]
<p align=”center”> El texto</p>
Dando como resultado:
El texto
Para alinear a la izquierda es “left” y a la derecha es “right”, bastante sencillo de recordar.[/callout]
Así como podéis ver, cada atributo realiza una acción determinada en nuestra etiqueta y dicho atributo debe ir encerrado entre comillas. En uno de que otro caso se necesita especificar algunos atributos para que funcionen de forma adecuada.
El atributo align no es exclusivamente para nuestra etiqueta <p>, se puede emplear para otras que son bastante comunes y podremos estudiar más adelante, desde la introducción de texto hasta la presencia de imágenes, suelen hacer de este atributo una forma habitual.
En el siguiente artículo os mostraré algunos ejemplos para manejar mucho mejor la información y asimilar la técnica de forma mas concisa.
Ya sabéis que el atributo “align” no es exclusiva para la etiqueta <p>. Pensemos ahora en un texto relativamente extenso en el cual los párrafos se alinean a la izquierda (por ejemplo). Una manera de hacer más simple nuestro código y de evitar añadir seguidamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta <div>.
La etiqueta por sí sola no tiene ninguna utilidad, por lo que a juro debe estar acompañada del atributo align ya que nos da el permiso de alinear cualquier elemento (párrafo o imagen) de la manera que nosotros deseemos.
El código quedaría de esta manera:
[callout font_size=”13px” style=”bluegrey”]
<p align=”left”> Parrafo1</p>
<p align=”left”> Parrafo3</p>
<p align=”left”> Parrafo2</p>[/callout]
Que equivale a:
[callout font_size=”13px” style=”bluegrey”]
<div align=”left”>
<p>Parrafo1</p>
<p>Parrafo2</p>
<p>Parrafo3</p>
</div>[/callout]
Como podemos observar, la etiqueta <div> marca divisiones en las que precisamos un mismo tipo de alineado.
Existen más etiquetas para precisar párrafos especiales, preparados como títulos. Hablamos de los encabezados o Header en inglés. Son aquellas etiquetas que formatean el texto como un titular como ya habíamos mencionado, para lo cual determinan un mayor tamaño de letra y sitúan el texto en negrita. Existe variedad en cuanto a tipos de encabezado, el cual se diferencian por el tamaño de la letra que manipulan. La etiqueta en concreto es la <h1>, para los encabezados más grandes, <h2> para los de segundo nivel y así hasta <h6> el cual es el encabezado más pequeño.
Los encabezados también deben tener una separación en párrafos, por lo que todo el contenido que metamos dentro de <h1> y </h1> (o cualquier otro encabezado) se pondrá en un párrafo independiente.
Para visualizar un encabezado veremos lo siguiente:
[callout font_size=”13px” style=”bluegrey”]
<h1>Encabezado número 1</h1>
El cual se mostrará de la siguiente manera:
[su_heading size=”16″ align=”left” margin=”0″]Encabezado de nivel 1[/su_heading]
Los encabezados y otras etiquetas de HTML, soportan el atributo align. Aquí vemos un ejemplo utilizándolo de forma que quede al centro con el encabezado de nivel 2.
<h2 align=”center”>Encabezado nivel 2</h2>
Se verá de esta manera en la página:
[su_heading size=”19″ align=”left” margin=”0″]Encabezado nivel 2[/su_heading][/callout]
Solo os queda ir practicando ya que el lenguaje HTML es como una lengua, si no la practicamos la olvidamos.
