[Indice]

Las distintas definiciones de los bloques. Separadores.

Si se analiza una página cualquiera veremos que, en realidad, está compuesta de distintos bloques. Es algo así como un mosaico en el que cada parte de la composición final tiene sus propios contenidos, que pueden ser texto, gráficos o las dos cosas. Dependiendo de la composición que se quiera hacer, habrá que elegir los elementos más convenientes para que nuestros contenidos aparezcan finalmente con la alineación debida, el tamaño apropiado, etc.

Comenzaremos con el elemento <Hx> </Hx> donde x es un número que puede variar entre 1 y 6, siendo 1 el tamaño mayor.

Se escribirán así:

<H1> Texto de prueba (H1)</H1>.
<H2> Texto de prueba (H2)</H2>
<H3> Texto de prueba (H3)</H3>
<H4> Texto de prueba (H4)</H4>
<H5> Texto de prueba (H5)</H5>
<H6> Texto de prueba (H6)</H6>

y este sería el resultado:

Texto de prueba (H1)

Texto de prueba (H2)

Texto de prueba (H3)

Texto de prueba (H4)

Texto de prueba (H5)

Texto de prueba (H6)

No hay que olvidar poner el cierre </Hx> a cada elemento utilizado.
Este tipo de elemento suele emplearse para escribir encabezamientos, ya que después del cierre, automáticamente, el visualizador inserta un salto de párrafo.

Por ejemplo, si escribes:

<H1> Texto en H1 </H1> <H3> Texto en H3 </H3>

se verá:

Texto en H1

Texto en H3

Y no una cosa al lado de la otra, como cabría esperar. Este elemento admite un parámetro de alineación. Así, si escribes:

<H3 align=center> Texto en H3 </H3>

Texto en H3

Para definir los párrafos se utiliza el elemento lleno <P> </P> (por Paragraph). Aunque a menudo no se utiliza el cierre </P>, ya que el texto continuará normalmente hasta que encuentre otro párrafo <P>, es conveniente acostumbrarse a ponerlo siempre. En la nueva definición del XHTML el cierre es obligatorio.

Se escribirá así:

<P> Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 
Texto 1 Texto 1 </P> 
<P> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P>

Y este sería el resultado:

Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1

Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2

Como puede verse, hay una línea en blanco entre los dos bloques. Si no se quiere dejar esa línea vacía entre los dos párrafos puede utilizarse el elemento <BR> (por BReak). Es decir, que el elemento <BR> es un separador, no un indicador de bloque.

Se escribirá así:

<P>Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 
Texto 1 Texto 1 <BR> 
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P>

y este sería el resultado:

Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2

El elemento <P> admite cuatro atributos de alineación: ALIGN=LEFT (por defecto), ALIGN=RIGHT , ALIGN=CENTER y ALIGN=JUSTIFY
Se escribirán así:

<P ALIGN=LEFT>
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 </P>
<P ALIGN=RIGHT>
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P>
<P ALIGN=CENTER>
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 </P>
<P ALIGN=JUSTIFY>
Texto 4 Texto 4 Texto 4 Texto 4 Texto 4  Texto 4 Texto 4 Texto 4
Texto 4 Texto 4 Texto 4 Texto 4 Texto 4  Texto 4 Texto 4 Texto 4 </P>

y este sería el resultado:

Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1

Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2

Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3

Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 tex Texto 4 Texto 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4

Un elemento que se comporta de forma parecida a <BR> es <DIV> pero que admite los mismos atributos que <P>: ALIGN=LEFT ALIGN=RIGHT y ALIGN=CENTER

Se escribe así:


<DIV ALIGN=LEFT>
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 
</DIV>
<DIV ALIGN=RIGHT>
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
< /DIV>
<DIV ALIGN=CENTER>
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 
</DIV>

Fíjate en que aquí sí se utiliza el cierre </DIV>. Este sería el resultado:

texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1

texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2

texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3

Como puedes ver, salvo por las alineaciones, que ya se hacen con <P>, no tiene ninguna utilidad práctica, y en general solamente se utiliza para definir bloques especiales definidos con instrucciones de estilo (bordes, tamaño, situación, alineación, color, etc., etc.)

Otro elemento que es casi igual que <DIV> pero que no admite atributos de alineado, y no produce separación de párrafo ni de línea es <SPAN>. En realidad, de forma directa no sirve para nada, y ha sido creado también para aplicar las hojas de estilo.

Se escribe así:


<SPAN>
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 
</SPAN>

Otro interesante efecto es el elemento lleno <BLOCKQUOTE> que sirve para presentar párrafos adentrados (como si estuviesen tabulados).

Se escribirá así:

<BLOCKQUOTE>
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
<BLOCKQUOTE>
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
</BLOCKQUOTE>
</BLOCKQUOTE>

Y este sería el resultado:

texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Fíjate que en este ejemplo hay un anidamiento, y por tanto, debe haber dos cierres </BLOCKQUOTE> al final

Otro separador de bloques de texto es el elemento vacío <HR> (por Horizontal Rule). Este sería el resultado:

Al igual que al texto, se le puede incluir un parámetro de color, pero no funciona en todos los navegadores. También se puede cambiar su apariencia añadiéndole el atributo <NOSHADE>. Así:

<HR NOSHADE>

El resultado es:

El elemento <HR> admite dos parámetros: WIDTH y SIZE. El primero define la longitud de la línea y el segundo su anchura. No es obligado usar los dos a la vez
Por ejemplo, si escribes

<HR WIDTH=400 SIZE=5>

El resultado será:

El valor del atributo WIDTH se puede expresar, como en el ejemplo anterior, en número de puntos (píxels), o en tantos por ciento referidos al ancho total de la ventana. Así:

<HR WIDTH=80% SIZE=5>

El resultado será:

Además se puede indicar su posición respecto a los márgenes de la ventana con los atributos ALIGN=CENTER (por defecto) ALIGN=LEFT y ALIGN=RIGHT. Por ejemplo:

<HR WIDTH=80% SIZE=5 ALIGN=LEFT>

El resultado será:

O bien:

<HR WIDTH=80% SIZE=5 ALIGN=RIGHT>

El resultado será:

Hay otro elemento, aparecido en la versión 6 de Netscape, que permite rodear un texto con un marco, y opcionalmente ponerle una etiqueta. Se trata del elemento: <FIELDSET>. Recuerda que si no tienes la versión adecuada de navegador, en los siguientes ejemplos sólo verás el texto, pero no los enmarcados.
Si se escribe:

<FIELDSET>
   Esto es una prueba de enmarcado
</FIELDSET>

Se obtiene:

Esto es una prueba de enmarcado

Este elemento tiene un parámetro que permite etiquetar el recuadro: <LEGEND> Si se escribe:

<FIELDSET>
         <LEGEND>Esto es una etiqueta</LEGEND>
   Esto es una prueba de enmarcado
</FIELDSET>

Se obtiene:

Esto es una etiqueta Esto es una prueba de enmarcado

El parámetro <LEGEND> tiene tres atributos que indican la posición de la etiqueta: LEFT (por defecto), RIGHT y CENTER, aunque no funciona en todos los navegadores. Por ejemplo:

<FIELDSET>
         <LEGEND ALIGN=CENTER> Esto es una etiqueta </LEGEND>
   Esto es una prueba de enmarcado
</FIELDSET>

Se obtiene:

Esto es una etiqueta Esto es una prueba de enmarcado

Si en estos ejemplos no ves el recuadro o la etiqueta no está donde debiera, es porque no tienes una versión de navegador adecuada.

Por supuesto, dentro del recuadro generado por <FIELDSET> se puede poner cualquier cosa: formularios, imágenes, texto, etc.