CABECERAS Y PÁRRAFOS

|Introducción| |Head| |Body| |Formato| |Cabeceras y Párrafos| |Fuentes| |Líneas| |Listas| |Imágenes| |Enlaces| |Marquesina|
|Sonido y Vídeo| |Mapas Gráficos| |Tablas| |Marcos| |Formularios| |Estilos| |Capas y Applets| |Caracteres especiales|

Nos encontramos con 6 tipos de cabeceras. Aparecen en negrita y aplican un salto al final del cierre.

La etiqueta es <H1> (header) para la más grande y <H6> para la más pequeña. Todas con sus cierres, lógicamente. Tened en cuenta que la <H4> es la del tamaño predeterminado y, por tanto, sólo veremos que está en negrita, como toda cabecera que se precie, y que no nos hace falta poner la <BR> porque ya se produce un salto.

<BODY>
<H1> Cabecera tipo 1 </H1>
<H2> Cabecera tipo 2 </H2>
<H3> Cabecera tipo 3 </H3>
<H4> Cabecera tipo 4 </H4>
<H5> Cabecera tipo 5 </H5>
<H6> Cabecera tipo 6 </H6>
</BODY>

Cabecera tipo 1

Cabecera tipo 2

Cabecera tipo 3

Cabecera tipo 4

Cabecera tipo 5
Cabecera tipo 6

Los párrafos se definen como bloques de texto a los que podemos aplicar algún atributo. La etiqueta es <P> que, algunos programas usan con la correspondiente etiqueta de cierre y para otros no hace falta ya que se considera bloque desde esa etiqueta hasta la siguiente. De todas formas, ¿qué es un texto sino una sucesión de párrafos?

El atributo más importante del párrafo es ALIGN (alinear) que va a tener como valores posibles: left (izquierda, el predeterminado), center (centrado) , right (derecha) y justify (completa).
Este atributo se puede aplicar, con las nuevas versiones HTML, a muchas etiquetas.

<BODY>
<P ALIGN=center> Texto al centro:<BR>
Al vino vinín y revolandín de la bota pifota y pifotín de la bota rota
</BODY>
<BODY>
<P ALIGN=right> Texto a la derecha:<BR>
Al vino vinín y revolandín de la bota pifota y pifotín de la bota rota
</BODY>

Texto al centro:
Al vino vinín y revolandín de la bota pifota y pifotín de la bota rota
Texto a la derecha:
Al vino vinín y revolandín de la bota pifota y pifotín de la bota rota

<BODY>
Texto a la izquierda: <BR>
<P ALIGN=left> Al vino vinín y revolandín de la bota pifota y pifotín de la bota rota <P> Que es como no poner el atributo
</BODY>
<BODY>
Texto justificado: <BR>
<P ALIGN=justify> Al vino vinín y revolandín de la bota pifota y pifotín de la bota rota y al que no diga que al vino vinín
</BODY>

Texto a la izquierda:

Al vino vinín y revolandín de la bota pifota y pifotín de la bota rota

Que es como no poner el atributo
Texto justificado:

Al vino vinín y revolandín de la bota pifota y pifotín de la bota rota y al que no diga que al vino vinín

La etiqueta <P> puesta en medio de una parrafada lo que hace es meter un espacio más grande que el que metía un <BR>, como vemos a continuación:

<BODY>
Ya me he cansado del vino vinín <BR> así que vamos a meter <P> un rollo sin sentido. Ya está, con esto tengo bastante.
</BODY>

Ya me he cansado del vino vinín
así que vamos a meter

un rollo sin sentido. Ya está, con esto tengo bastante.

Pero aún podemos meter más espacios, si los necesitamos. Para ello ponemos varios <BR> o alternamos las etiquetas como muestro aquí:

<BODY>
Ya me he cansado del vino vinín <BR><BR><BR><BR> así que vamos a meter un rollo sin sentido. Ya está, con esto tengo bastante.
</BODY>

Ya me he cansado del vino vinín



así que vamos a meter un rollo sin sentido. Ya está, con esto tengo bastante.

<BODY>
Ya me he cansado del vino vinín <BR><P><BR><P> así que vamos a meter un rollo sin sentido. Ya está, con esto tengo bastante.
</BODY>

Ya me he cansado del vino vinín


así que vamos a meter un rollo sin sentido. Ya está, con esto tengo bastante.

También se puede conseguir alternando <BR> con el código &NBSP;

<BODY>
Aquí el texto y <BR> &NBSP; <BR> &NBSP;
aquí el salto
</BODY>

Aquí el texto y
 
 
aquí el salto

Una curiosidad es el atributo DIR="rtl" (direction), que hace que los textos se desplacen a la derecha si se aplica a una celda de tabla o a un párrafo; y hace que se lean las letras al revés si va dentro de la etiqueta <BDO> (bi-directional override).

<BODY>
<P DIR="rtl"> Esto es un parrafito </P>
<BDO DIR="rtl"> Y esto está al revés <BDO>
</BODY>

Esto es un parrafito


Y esto está al revés

La etiqueta <FIELDSET>, creada para dejar bonitos los formularios, se puede aplicar a texto normal y a más elementos. Lo que hace es crear un cuadrito alrededor con un título.
Va acompañada de <LEGEND> que es donde se pone el título y que tiene como atributo ALIGN con los valores right, center, left (predeterminado), top (predeterminado) y bottom (estos dos últimos para que se sitúe arriba o abajo del cuadrito). Mejor lo vemos:

<BODY>
<FIELDSET>
<LEGEND ALIGN=center> Aqui el Título </LEGEND>
Aqui el texto que queremos dentro del cuadrito
</FIELDSET>
</BODY>


Aqui el Título
Aqui el texto que queremos dentro del cuadrito

Tener en cuenta que el cuadrito se extenderá a lo largo de la pantalla ya que aún no tiene atributos de longitud. Si queremos acortarlo deberemos meterlo en una tabla, donde sí que podemos controlar la anchura. Se puede cambiar los colores mediante los estilos, que veremos más adelante.

Sin la etiqueta <LEGEND> quedará:

<BODY>
<FIELDSET>
Aqui el texto que queremos dentro del cuadrito
</FIELDSET>
</BODY>


Aqui el texto que queremos dentro del cuadrito

Un atributo que se puede aplicar a cantidad de elementos (listas, imágenes, etc.) de una página web es TITLE (sí, igual que el de HEAD) que lo que hace es que aparezca una etiquetita, con el texto que hayas entrecomillado, cuando el cursor se queda sobre el elemento. Prueba a dejar el cursor quieto sobre la palabra y sobre la línea.

<BODY>
<P TITLE="Hola"> Bienvenido </P>
Línea
<HR TITLE="Hola de nuevo">
</BODY>

Bienvenido

Línea

Por último, una etiqueta muy útil, se llama <DIV> (division), tiene su cierre y presenta la particularidad de que engloba un bloque de texto con todas las etiquetas que tenga ese texto, es decir, podemos meter <P> dentro de ella, cabeceras, listas, etc...

Tiene como atributo ALIGN con valores left (por defecto), right y center.

<BODY>
<DIV ALIGN=RIGHT >
El tejado tiene:
  <UL>
    <LI> Goteras
    <LI> Pararrayos
    <LI> Nidos
  </UL>
</DIV>
</BODY>

El tejado tiene:
  • Goteras
  • Pararrayos
  • Nidos

Esas etiquetas extrañas definen una lista, lo veremos luego.

Un par de atributos curiosos de esta etiqueta (sólo Explorer) son:

<BODY>
<DIV CONTENTEDITABLE=true> Esto se deja meter letras entre medias. </DIV>

Y

<DIV UNSELECTABLE=on> Esta frase no se puede seleccionar. </DIV>
</BODY>

Esto se deja meter letras entre medias.

Y

Esta frase no se puede seleccionar.

Lógicamente los valores false y off no tienen sentido. Es como no poner las etiquetas.