Formateando parrafos

Como ya se hablo en la segunda parte de este curso. La estructura del html se basa en etiquetas. Por lo tanto para poder  crear una pagina decente necesitamos conocer de que elementos o etiquetas disponemos a la hora de escribir el codigo de nuestra pagina. Es por esto que en este capitulo me voy a centrar en describir las etiquetas que tienen que ver con el formato de  parrafos, voy a ahorrar palabras sobre el tema de la estructura que ya se hablo y asi evitar aburrilos.

PARRAFOS Y SALTOS DE LINEA

En cuanto a los parrafos hasta el momento solo hemos hablado de como crearlos, usando la etiqueta P:   <p></p>  Si analizamos el uso de esta etiqueta podemos llegar a encontrar una complicacion en esto en algunos casos. Vamos con un ejemplo:

<p>parrafo 1</p>
<p>parrafo 2</p>
<p>parrafo 3</p>

Se veria asi:

parrafo 1

parrafo 2

parrafo 3

La etiqueta parrafo lo que hace es separar el texto por medio de una linea en blanco (parrafo 1 , linea en blanco, parrafo 2 , linea en blanco......) ¿pero que hay si yo quisiera eliminar esa linea? osea que se vea asi:

Parrafo1
Parrafo 2
Parrafo 3

Para ello vamos a prescindir de la etiqueta P y a utilizar BR . Hay una gran diferencia entre ellas. BR solo dara un salto de linea. Y adiferencia de todo el resto de etiquetas del HTML BR no necesita un cierre. Ose con un ejemplo, en el proximo bloque de codigo voy a poner 2 maneras de lograr el mismo resultado pero utilizando diferentes etiquetas:

<p>parrafo 1</p>
<p>parrafo 2</p>
parrafo 1<br><br>
parrafo 2<br><br>

Y el resultado sera el mismo:

Parrafo 1

Parrafo 2

Parrafo 1

Parrafo 2

Como se puede apreciar en el codigo utilize 2 veces seguidas la etiqueta BR, esto es para crear 2 saltos de linea (y dejar una en blanco) Si hubiera hecho esto:

parrafo 1<br>
parrafo 2<br>

El resultado hubiera sido este:

Parrafo 1
Parrafo 2

Espero que con esto se halla entendido la diferencia entre <p>  y  <br>  . Una nota mas sobre BR, hay dos maneras de utilizarse y dara el mismo resultado. se puede escribir asi: <br>  O asi:  </ br>   pero recuerden que esta etiqueta no lleva cierre, pueden usar cualquiera de las dos formas pero es innecesario usar como apertura y cierre. Para asegurarse mejor de esto pueden probarlo creando una pagina y jugando con estas etiquetas y el texto.


ALINEACION DE TEXTO

Existen algunos atributos para incluir en las etiquetas, como por ejemplo el atributo "align". Si uilizamos estes atrubto junto a la etiqueta <p>  podremos alinear o justificar parrafos de la manera que queramos.

Un ejemplo claro:



Parrafo 1

Parrafo 2

Parrafo 3

Tenemos 3 parrafos alineados, uno a la izquierda, el segundo al centro y el tercero a la derecha. Para conseguir esto utilize el atributo "align" el cual se usa de la siguiente manera, por ej para una alineacion al centro:

<p align="center">parrafo</p>

Para usar este atributo o cualquier otro se hara de la siguiente manera: abrimos la etiqueta de inicio(<p) . espacio, nombre del atributo (align por ej.) , signo de igual (=), valor del atributo entre comillas ("center por ej), cierre de la etiqueta de inicio.( >) Luego ira el texto al que modificaremos con la etiqueta y para finalizar el cierre de la etiqueta (</p>)

Los valores posibles para align son: center (centro) left (izquierda) right (derecha) justify (justificar)

Basandome en el ejemplo anterior aca les pego el codigo usado para que se entienda mejor:

<p align="left">parrafo</p> 
<p align="center">parrafo</p>
<p align="right">parrafo</p>

Una nota sobre alinear a la izquierda, la mayoria de las veces no es necesario, ya que por defecto todos los elementos en html apareceran a la izquierda, sin embargo mas adelante este atributo nos sera de mucha utilidad.

Ahora que pasa si queremos alinear tres parrafos de la misma manera, por ej al centro? lo mas logico segun lo que hemos visto seria escribirlo de este modo:

<p align="center">parrafo</p> 
<p align="center">parrafo</p>
<p align="center">parrafo</p>

Este codigo no esta mal, sin embargo se puede simplificar con el uso de la etiqueta  <div> la cual mas adelante desarrolaremos mejor ya que es demasiado lo que hay que hablar de ella.  Entonces podriamos escribirlo asi:

<div align="center">
<p>parrafo</p> 
<p>parrafo</p>
<p>parrafo</p>
</div>

Y el resultado seria el mismo. Los atributos como align pueden ser usados en la mayoria de etiquetas de html, en este caso preferi usar div, por el hecho que el div hablando en criollo funcionaria como una capa invisible, pero muy util para alinear varios parrafos sin escribir tanto codigo repetido.



Pueden practicar lo explicado en este tutorial haciendo una pagina que contenga:


2 parrafos alineados al centro
3 saltos de linea
2 parrafos alineados a la izquierda
1 parrafo alineado a la derecha

ENCABEZADOS


Solo me queda hablar sobre los encabezados, en cuanto a parrafos se refiere. Un encabezado es un parrafo formateado a un tamaño mayor o menor y en negrita, generalmente es usado para los titulos. La etiqueta usada es H1  para un encabezado mayor y H6 para el encabezado mas pequeño.


Por lo tanto estas son todas las posibilidades de encabezados que tenemos:

<h1>encabezado mayor</h1>
<h2> otro encabezado </h2>
<h3> otro encabezado</h3>
<h4>otro encabezado</h4>
<h5>otro encabezado</h5>
<h6>encabezado menor</h6>

No pongo ejemplos ya que tengo los encabezados formateados con CSS en esta plantilla y no podrian apreciarlos, pueden verlos haciendo una pagina de prueba con todas las posibilidades.

En el proximo tutorial estare hablando sobre Formatear Texto