LA
   
  Ayuda Web
  Manual HTML 2ª parte
 

Cuerpo (BODY) de un documento

El cuerpo (BODY) es la segunda y última de las dos partes en que se estructura un documento HTML. Por supuesto es obligatoria, ya que es aquí donde reside el verdadero contenido de la página, y por tanto, al contrario de la HEAD sí se ve cuando navegamos por ella.

Se escibirá asi:

<BODY>

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

</BODY>

Como ya habrás visto, los navegadores, por defecto, presentan el texto de una página ajustando los contenidos a la esquina superior izquierda de la pantalla. El elemento BODY tiene parámetros que permiten modificar los márgenes por defecto. Lo malo es que cada navegador los interpreta de una manera. Por ejemplo, Netscape utiliza solamente dos instrucciones que afectan simultáneamente a los márgenes superior e inferior e izquierdo y derecho respectivamente:

  marginwidth="pixels", para los márgenes izquierdo y derecho.
  marginheight="pixels", para los márgenes superior e inferior.

En cambio, el Internet Explores, utiliza uno para cada cual:

  leftmargin="pixels", para el margen izquierdo
  topmargin="pixels", para el margen superior
  rightmargin="pixels", para el margen derecho
  bottommargin="pixels", para el margen inferior

Donde pixels es el número de pixels que se quiere mover cada margen hacia el interior de la página. Estos parámetros también son accesibles desde instrucciones de estilo.

Otro problema que suele presentarse con los márgenes es que a la hora de imprimir una página, cada impresora, junto con el navegador, se las ingeniarán para hacer justo lo contrario de lo que se desea... Tal vez algun dia todo esto funcione bien.

Otra cosa que puede controlarse desde BODY es el color que tomarán los links que pongamos en la página. Por ejemplo, para hacer que los links sean amarillos antes de ser visitados, azul-verde cuando son activados, y verdes después de haber sido utilizados, se escribe:

<BODY LINK="#FFFF00" VLINK="#22AA22" ALINK="#0077FF">

Veamos a hora los elementos más habituales del lenguaje que deben escribirse en el BODY. 

Tamaños y tipos de letra en HTML

Para definir distintos tamaños de letra, en HTML se utiliza el elemento lleno <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 se suele utilizar 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


Otra forma de cambiar los tamaños de letra es utilizar el elemento <FONT > con el atributo VALOR, que es un número entre 1 y 7. El valor por defecto del texto es 3. La gran diferencia de esta notación respecto a la anterior es que no se produce un salto de párrafo después de cada cambio, por lo que pueden hacerse cosas como esta:

<FONT SIZE=3>A</font><FONT SIZE=4>A</font><FONT SIZE=5>A</font>

<FONT SIZE=6>A</font><FONT SIZE=7>A</font><FONT SIZE=6>A</font>

<FONT SIZE=5>A</font><FONT SIZE=4>A</font><FONT SIZE=3>A</FONT>

Dará como resultado:

AAAAAAAAA

Se puede cambiar el tamaño por defecto (3) de toda la página con el elemento <BASEFONT SIZE=valor>. El texto tomará el tamaño indicado por valor y lo mantendrá hasta que aparezca otro elemento <BASEFONT SIZE=valor> y lo restaure o lo cambie por otro diferente. Tanto si se ha establecido un valor base como si se utiliza el valor por defecto, los tamaños también pueden indicarse de forma relativa, por lo que el valor puede ser positivo (+) o negativo (-) respecto al tamaño base. Por ejemplo estos dos valores dan el mismo resultado:

<FONT SIZE=5>ABcde</FONT>
<FONT SIZE=+2>ABcde</FONT>

ABcde
ABcde


Con la versión 3.0 de Netscape se ha implementado un nuevo atributo del elemento <FONT> que permite elegir tipos de letra entre los varios de que dispone por defecto Windows. Se trata del atributo FACE. Este atributo permite forzar el tipo de letra que el diseñador de la página quiere que vea el cliente, sin importar el que por defecto tenga establecido el visualizador.

Si escribes

<FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL</FONT>
<FONT FACE="times new roman">Texto de prueba 12345 con tipo TIMES NEW ROMAN</FONT>
<FONT FACE="courier new">Texto de prueba 12345 con tipo COURIER NEW</FONT>
<FONT FACE="courier">Texto de prueba 12345 con tipo COURIER</FONT>
<FONT FACE="roman">Texto de prueba 12345 con tipo ROMAN</FONT>
<FONT FACE="small fonts">Texto de prueba 12345 con tipo SMALL FONTS</FONT>

Se verá:

Texto de prueba 12345 con tipo ARIAL
Texto de prueba 12345 con tipo TIMES NEW ROMAN
Texto de prueba 12345 con tipo COURIER NEW
Texto de prueba 12345 con tipo COURIER
Texto de prueba 12345 con tipo ROMAN
Texto de prueba 12345 con tipo VERDANA
Texto de prueba 12345 con tipo SMALL FONTS

Por supuesto, este atributo es compatible con todos los demás ya conocidos, como color y tamaño. Por ejemplo, si escribes

<FONT FACE="impact" SIZE=6 COLOR="red">
 Texto de prueba 12345 con tipo IMPACT</FONT>

Se verá:

Texto de prueba 12345 con tipo IMPACT

Se pueden hacer todas la combinaciones que se quieran, pero hay que tener presente que si en la máquina cliente no está instalada una determinada fuente, ésta no se verá y en su lugar aparecerá la fuente por defecto del visualizador. No es interesante por tanto, definir tipos raros, que probablemente, no llegarán a verse nunca.

Si a pesar de todo, se define un tipo del que se tienen dudas de que exista en el cliente, se pueden indicar otros tipos alternativos, de forma que el navegador si no tiene el primer tipo, utilizará el siguiente, y si tampoco lo tiene el próximo, etc. Así:

<FONT FACE="raro, courier" SIZE=4 COLOR="red">
 Texto de prueba 12345 con tipos alternativos</FONT>

Se verá:

Texto de prueba 12345 con tipos alternativos

Como puedes ver, se ha declarado como primer tipo de letra el llamado "raro" que, por supuesto, no existe, y el navegador pasa a utilizar el siguiente, "courier", que sí es habitual. 

Texto en color

Se puede controlar el color del texto utilizando el elemento <FONT> con el atributo COLOR="xxx", donde "xxx" es el nombre en inglés del color que se desea. Hay que tener presente que algunos no se verán o se verán mal si la máquina no soporta, por lo menos, 256 colores. Por supuesto, este efecto es anidable con el de tamaño y todos los demás.

Si escribes:

<B><FONT COLOR="red">Texto ROJO </FONT>
<br>
<FONT COLOR="blue">Texto AZUL </FONT>
<br>
<FONT COLOR="navy">Texto AZUL MARINO </FONT>
<br>
<FONT COLOR="green">Texto VERDE </FONT>
<br>
<FONT COLOR="olive">Texto OLIVA </FONT>
<br>
<FONT COLOR="yellow">Texto AMARILLO </FONT>
<br>
<FONT COLOR="lime">Texto LIMA </FONT>
<br>
<FONT COLOR="magenta">Texto MAGENTA </FONT>
<br>
<FONT COLOR="purple">Texto PURPURA </FONT>
<br>
<FONT COLOR="cyan">Texto CYAN </FONT>
<br>
<FONT COLOR="brown">Texto MARRON </FONT>
<br>
<FONT COLOR="black">Texto NEGRO </FONT>
<br>
<FONT COLOR="gray">Texto GRIS </FONT>
<br>
<FONT COLOR="teal">Texto TEAL </FONT>
<br>
<FONT COLOR="white">Texto BLANCO </FONT>
<br>
</B>

Se verá:

Texto ROJO
Texto AZUL
Texto AZUL MARINO
Texto VERDE
Texto OLIVA
Texto AMARILLO
Texto LIMA
Texto MAGENTA
Texto PURPURA
Texto CYAN
Texto MARRON
Texto NEGRO
Texto GRIS
Texto TEAL
Texto BLANCO

He aquí una combinación de colores y tamaños:
Si escribes:

<FONT SIZE=6 COLOR="red">E</FONT><FONT SIZE=4>sto es una </FONT> 
<FONT SIZE=6 COLOR="red">P</FONT><FONT SIZE=4>rueba </FONT>

Resulta:

Esto es una Prueba

Los colores también se pueden definir en hexadecimal (por ejemplo el rojo es <FONT COLOR=#FF0000>). Cuando son colores básicos, como los del ejemplo de arriba, es más cómodo escribir el nombre aunque sea en inglés, pero cuando se trata de definir un color que "no tiene nombre" no hay más remedio que usar la codificación hexadecimal. 
Tabla de colores:

16 Colores estandar (4 bits)

BLACK NAVY BLUE TEAL AQUA
SILVER GRAY YELLOW GREEN OLIVE LIME
RED MAROON WHITE FUCHSIA PURPLE

256 Colores RGB (8 bits)

RED
FF0000
FF3300 CC3300 FF9999 FFCCCC 990033 MAROON
990000
FF3333 CC3333 FFCC99 CC0066 993300
FF0033 CC0033 FF9966 FF6699 660000
000000 CC0000 663333 990066 330000
LIME
66FF00
33FF33 66FF66 OLIVE
66FF00
99FF99 CCFFCC GREEN
00FF00
00CC00 009900 006600 003300
00CC00 009900 006600 003300
009900 006600 66FF00 009900
AQUA
00FFFF
00FFFF 3333FF TEAL
006666
6666FF 9999FF BLUE
0000FF
33FFFF 66FFFF 99FFFF CCFFFF
CCCCFF 0000CC 000099 000099
CCCCFF 000066 000033 000099
00CCCC 009999 006666 003333
YELLOW FFFF33 FFFF66 FFFF99 FFFFCC
CCCC00 999900 666600 333300
FUCHSIA FF33FF FF66FF FF99FF FFCCFF
CC00CC 990099 660066 330033
TEAL 7D337D 7D667D 7D997D 7DCC7D
E100E1 CC00CC AF00AF 990099
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
663300 663333 663366 663399 6633CC 6633FF
660000 660033 660066 660099 6600CC 6600FF
333300 333333 333366 333399 3333CC 3333FF
003300 003333 003366 003399 0033CC 0033FF
330000 330033 330066 330099 3300CC 3300FF
000000 000033 000066 000099 0000CC 0000FF

Para poner el fondo de la pagina de algún color uniforme, solo debes añadir el parámetro BGCOLOR en el comando BODY (situada al principio del documento), ya sea usando el nombre de uno de los 16 colores básicos o el código hexadecimal de la trica rojo-verde-azul.

Los números hexadecimales, se caracteriza por tener 16 dígitos (en lugar de los diez de la numeración decimal habitual o dos en la binaria). Estos dígito son: 0 1 2 3 4 5 6 7 8 9 A B C D E F

As&iacute:, por ejemplo, el color rojo se representa como #FF0000, porque tiene el toda la intensidad de rojo y nada de verde y azul.

Los colores básicos son:
#FF0000 - Rojo
#00FF00 - Verde
#0000FF - Azul

Otros colores son:
#FFFFFF - Blanco
#000000 - Negro
#FFFF00 - Amarillo

Para hacer un color más oscuro, simplemente reduce la intensidad del componente, dejando los otros dos iguales. Así, el rojo (#FF0000) se hace más oscuro asi: #CC0000, #990000, #660000, #330000 etc

Para hacer que un color más pastel, simplemente variar los otros dos colores dejando igual el principal. Así, el rojo (#FF0000) se hace más claro asi: #FF3333, #FF6666, #FF9999, #FFCCCC etc

Ejemplo 1: <FONT SIZE=+2 COLOR=#33FF33>Esto esta en color verde perico</FONT>

 

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 etiquetaEsto 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 etiquetaEsto 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.

 

Textos preformateados

Posiblemente ya te habrás dado cuenta de que, cuando escribes un texto con tu editor, a la hora de ver lo hecho con el visualizador, algunas cosas no están como tú las pusiste... Como por ejemplo poner dos o tres espacios en blanco entre palabras, o intentar encolumnar los datos de una pequeña tabla: ¡acaba todo junto y en la misma línea!

Este efecto se puede eliminar con el elemento lleno <PRE> . Al texto que va dentro del elemento PRE se le pueden aplicar todos los elementos que se quiera, siempre que sean elementos que no alteren la posición del texto. Por ejemplo si utilizas el elemento <H>, se rompería el preformateo pero no ocurrirá lo mismo con <FONT SIZE>. Por defecto, los textos preformateados se ven con tipo de letra "curier", es decir de paso fijo y los no preformateados en "Times New Roman". Estos tipos son configurables en el visualizador.

Se escribirá así:

<PRE>

1  2  3  4  5  6  7      <B>Esto es una demostracion de</B>

       8  9 10 11 12 13 14         texto preformateado.

      15 16 17 18 19 20 21

</PRE>

y este sería el resultado:

 

1  2  3  4  5  6  7         Esto es una demostracion de 

       8  9 10 11 12 13 14         texto preformateado.

      15 16 17 18 19 20 21

Dentro de un bloque preformateado también se pueden poner links a otros documentos y codificación para caracteres especiales (se verá más adelante lo que es eso).
Este elemento admite el parámetro WIDTH=x donde x define la máxima longitud de línea visualizada. No funciona con Netscape.


El navegador, por defecto, elimina varios espacios en blanco y los convierte en uno solo. Si lo que deseas es separar una palabra de otra más de un espacio, se puede recurrir a una instrucción especial que le indica esto al navegador, pero hay que darla codificada; funciona como un avance de carro, y aunque en pantalla cumple su objetivo, cuando se imprime la página, no todas las impresoras son capaces de interpretarlo correctamente. Se escribe: &#160; y como alias se utiliza: &nbsp;

Por ejemplo, si escribes:

texto texto&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;texto texto

Se ve así:

texto texto     texto texto


Con Netscape 3.0 se ha implementado un nuevo elemento que permite definir espacios en blanco sin utilizar el elemento <PRE>
Se trata del elemento <SPACER>. este elemento puede ir acompañado de los atributos TYPE y SIZE y se puede utilizar en cualquier zona de una página, pero donde más se aprecia su efecto es en las columnas. Se escibirá asi:

<MULTICOL COLS=2>
<SPACER TYPE=HORIZONTAL SIZE=35>
texto texto texto texto texto texto texto texto texto texto texto texto
<P>
<SPACER TYPE=HORIZONTAL SIZE=35>
texto texto texto texto texto texto texto texto texto texto texto texto
<SPACER TYPE=VERTICAL SIZE=35>
texto texto texto texto texto texto texto texto texto texto texto texto
</MULTICOL>

Y se ve así:
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 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 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 texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Como puedes ver, con TYPE=horizontal deja espacio en blanco a la izquierda de la primera linea. Es el valor por defecto. TYPE=vertical deja espacio en blanco por arriba de la primera linea. Para ambos tipos el tamaño del espacio se da en puntos (pixels) con el atributo SIZE. El valor por defecto es 0.

Fíjate en que entre las dos instrucciones con tipo horizontal hay un elemento <P>. En efecto, es necesario indicarle a <SPACER> donde termina el párrafo para que ejecute la siguiente instrucción del mismo tipo. Este elemento no funciona con el navegador de Microsoft. Para conseguir columnas sin utilizar este elemento la única solución es emplear tablas: <TABLE> 

 
  Hoy habia 12750 visitantes (23944 clics a subpáginas) ¡Aqui en esta página!  
 
LA Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis