Esquema de tipos de un documento HTML

Cuando un visualizador recibe un fichero, antes de mostrarlo necesita saber el tipo de contenido que ste tiene, a fin de procesarlo adecuadamente. No es lo mismo recibir un documento de texto que una fotografa en formato GIF, o un vdeo en formato MPG, o si lo que estamos intentando es transferir un fichero. En cada caso, el visualizador pondr en juego distintas habilidades, de las muchas que posee. Si el fichero procede de un servidor http remoto, (es decir un servidor web; http es el nombre del protocolo que utilizar el servicio invocado), ste se encargar de decirle al visualizador cuanto necesite saber, pero si lo que hay que procesar es un fichero local, la nica forma de saberlo es por la extensin del fichero. La extensin de un fichero son las tres o cuatro letras (depende del sistema operativo con el que se trabaje) que hay despus del nombre del fichero y que estn separadas del mismo por un punto. Por ejemplo, esta pgina se llama estruc.htm. Las tres letras que hay despus del punto (htm) son la extensin del fichero. Las otras, las que estn delante del punto, son el nombre del fichero. Las extensiones de 4 o ms letras son tpicas de sistemas operativos como UNIX o LINUX y las de 3 o menos de Windows, que ha mantenido esta costumbre por herencia de los tiempos del DOS, ya que puede trabajar perfectamente con extensiones de ms de 3 letras. Por ejemplo, la extensin .html funciona en Windows igual que la .htm Estas son algunas de las extensiones stndard ms comunes y sus contenidos. La primera de ellas suele utilizarse en sistemas UNIX-LINUX y la segunda en Windows:
.html

o .htm Documento HTML. Contine texto e instrucciones HTML que sern interpretadas. .text o .txt Contiene texto plano. El visualizador presentar todo el fichero como si fuera un nico bloque de texto y no interpretar ninguna instruccin HTML que pudiera llevar. Esto lo har con cualquier fichero que lleve una extensin desconocida o simplemente no lleve ninguna.
.gif

Contiene un fichero de imagen en formato GIF.

.npg

Contiene un fichero de imagen en formato NPG.

.xbm

Contiene un fichero de imagen en formato X-Bitmap (blanco y negro).

.xpm

Contiene un fichero de imagen en formato X-Pixmap (color). o .jpg Contiene un fichero de imagen en formato codificado jpeg. .mpeg o .mpg Contiene un fichero de imagen de video o cine (en movimiento).
.jpeg

.au

Contiene un fichero de audio (sonido) codificado en aiff-encoded.

.mid

Contiene un fichero de audio (sonido) generado con secuenciadores midi tpicos de Windows.
.avi

Contiene uzxzn fichero con video y sonido tpico de Windows.

.mp3

Contiene un fichero con sonido tpico de Windows y otros sistemas.

.exe

Contiene un fichero binario ejecutable en DOS o Windows.

.hqx .Z

Contiene un fichero binario ejecutable en Macintosh. o .zip Contiene un (o varios) fichero/s comprimido/s de cualquier clase. Para poder utilizarlo hay que indicarle al visualizador una herramienta de compresindescompresin. Contiene un fichero de imagen de cualquier documento generado con Acrobat Writer.

.pdf

.doc

Contiene un fichero de documento generado por Microsoft Word En el entorno web se utilizan los MIME types (Multipurpose Internet Mail Extension) para definir el tipo de un fichero transferido. El visualizador determina desde el MIME type cmo hay que tratar cada fichero. Estos son los mime types ms habituales junto con las extensiones de fichero a las que suele relacionarse:
application/rtf application/pdf application/postscript application/msword application/x-msexcel application/x-mspowerpoint application/asx application/x-mplayer2 application/x-shockwave-flash application/x-java-applet application/java application/octet-stream application/x-compressed audio/mpeg audio/x-wav audio/x-ms-wma audio/x-midi audio/x-ms-mp3 audio/x-mp3 audio/mpeg3 audio/x-mpeg-3 audio/x-pn-realaudio .rtf .pdf .ps .doc .xls .ppt .asx .asx .avi .mp3 .mpg .swf .class .clas .clas .class .exe .com .zip .mp3 .mpg .wav .wma .mid .midi .mp3 .mp3 .mp3 .mp3 .mpeg .rm

image/jpeg image/gif image/png text/html text/plain text/css text/x-javascript text/richtext text/rtf video/mpeg video/avi video/x-ms-wmv video/x-msvideo video/quicktime video/x-ms-asf

.jpg .jpeg .gif .png .htm .html .txt .text .htm .html .css .js .rtf .rtf .mpg .mpeg .avi .wmv .wmv .mov .asf

Los visualizadores tienen una configuracin de los mapas de tipos aceptables, e instrucciones de cmo proceder en cada caso. Algunos tipos son tratados directamente por el propio visualizador (p.ej.: htm, gif, txt) mientras que para otros necesitan de una herramienta auxiliar adecuada, que hay que indicar al visualizador, para que sea llamada en el momento preciso (p.ej.: zip, mpg, avi, pdf).

Ahora que ya sabes qu son las extensiones de fichero, es el momento de aclarar una cuestin importante: Los documentos HTML los puedes escribir con lo que quieras... Siempre que los salves en modo Solo Texto. Es decir, que si utilizas, por ejemplo, Word de Windows o de MAC, por defecto estos programas salvan en formato Word. Y aunque luego los renombres como documentos .htm o .html, el formato interno sigue siendo Word. Tampoco vale dejarlos con la extensin .txt que les dejan la mayora de editores al salvarlos en modo Solo Texto. No seran interpretados correctamente. Por lo tanto si tienen extensin .txt (y por supuesto son .txt), entonces puedes renombrarlos a .htm, o bien en el momento de guardarlos en formato Solo Texto no dejar la extensin por defecto .txt y darle ya directamente la extensin .htm. Algunos procesadores de texto ya incluyen entre sus tipos el .htm. Si es as, lo que hacen es eliminar la codificacin propia, y convertirla a elementos de HTML. Por ejemplo, si tienes un texto en itlica, automticamente es convertido al elemento <I>, etc.. El problema de los editores avanzados de texto y de la mayora de programas asistentes para escribir HTML es que generan un cdigo bastante "sucio", difcil de corregir o modificar despus. No es que no funcione, pero como el programa no sabe cual es la finalidad del texto escrito, por defecto le pone todo lo que sabe por si acaso, aplicando el dicho de "mejor que sobre..."

Cabecera (HEAD) de un documento HTML

La HEAD es la primera de las dos partes en que se estructura un documento HTML. En la HEAD reside informacin acerca del documento, y generalmente no se ve cuando se navega por l. En la HEAD se pone el elemento lleno <TITLE> que es una breve descripcin que identifica la pgina. Es lo que el navegador se guarda en el "Bookmarks" (libro de marcas o libro de direcciones), con lo que crea la lista que aparece en la orden "Go" de la barra de rdenes, lo que aparece en la esquina superior izquierda cuando se imprime el documento, y lo que aparece en el marco de la ventana del navegador. Tambin lo guarda en su cach, y servir para mostrar la pgina, cuando sea llamada otra vez, sin necesidad de conectarse de nuevo al servidor de origen. No hay que confundir el elemento <TITLE> con el nombre del fichero. Por ejemplo, esta pgina est contenida en un fichero llamado head.htm y el texto de su <TITLE> es: Head de un documento. Se escibir asi:
<HEAD> <TITLE>Head de un documento </TITLE> </HEAD>

Dentro de la HEAD puede utilizarse otro elemento: META. Por ejemplo, si se escribe:
<HEAD> <TITLE>Head de un documento </TITLE> <META HTTP-EQUIV="Refresh" CONTENT="10"> </HEAD>

Esto hace que el visualizador vuelva a cargar la pgina activa al cabo de 10 segundos. Tambin puede hacerse a un servidor. As:
<HEAD> <TITLE>Head de un documento </TITLE> <META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://miservidor/mipagina.htm"> </HEAD>

Utiliza esto con precaucin. Si sabes que el contenido de la pgina no va a cambiar, es intil hacer esto, y si lo haces contra un servidor, puedes sobrecargarlo. Este elemento, slo tendr utilidad en casos muy especiales. Otra opcin es forzar la expiracin inmediata en la cach del navegador de la pgina recibida, lo que provoca que la pgina sea solicitada de nuevo al servidor cada vez, en lugar de cargar la copia que ya existe en la mquina del cliente. Se escribe as:
<HEAD> <TITLE>Head de un documento </TITLE> <META HTTP-EQUIV="Expires" CONTENT="Tue, 20 Aug 1996 14:25:27 GMT"> </HEAD>

Si se pone una fecha ya pasada, como la que hay en el ejemplo, el navegador elimina inmediatamente de la cach la pgina recibida, y si no es pasada, lo har en el momento indicado por la misma. Tambin se le puede dar valor cero a la fecha de expiracin:
<HEAD> <TITLE>Head de un documento </TITLE> <META HTTP-EQUIV="Expires" CONTENT="0"> </HEAD>

Otra opcin es impedir directamente que el navegador guarde en cach la pgina. Esto es especialmente til cuando se trabaja con formularios que consultan datos dinmicos:
<HEAD> <TITLE>Head de un documento </TITLE> <META HTTP-EQUIV="Expires" CONTENT="no-cache"> </HEAD>

Si tienes inters en que tus pginas aparezcan en los grandes buscadores de Internet, y puedan ser encontradas con facilidad, puedes poner las palabras clave que contiene la pgina separadas por comas. Por ejemplo:
<HEAD> <TITLE>Head de un documento </TITLE> <META NAME="keywords" CONTENT="HTML, internet </HEAD>

">

Este otro sirve para que los buscadores puedan ofrecer un breve resumen de los contenidos de tu pgina:
<HEAD> <TITLE>Head de un documento </TITLE> <META NAME="description" CONTENT="Manual para escribir HTML."> </HEAD>

El siguiente es importante con los nuevos navegadores, ya que le indica la tabla de caracteres que se ha empleado al escribir la pgina. De no usarlo, puede ocurrir que el navegador no muestre correctamente los caracteres especiales no ascii, tales como acentos, letras de alfabetos no occidentales, etc., que se hayan quedado sin codificar de la forma tpica en html.
<HEAD> <TITLE>Head de un documento </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </HEAD>

Los charset ms habituales suelen ser:

<meta http-equiv="Content-Type" <meta http-equiv="Content-Type" <meta http-equiv="Content-Type" html5"> <meta http-equiv="Content-Type" <meta http-equiv="Content-Type" 1252"> content="text/html; charset=utf-8"> content="text/html; charset=iso-8859-1"> content="text/html; charset=utf-8 / content="text/html; charset=iso-8859-15"> content="text/html; charset=windows-

Puedes poner todos los elementos <META> que creas necesarios, pero sin repetirlos.

Habrs notado que se ha utilizado la palabra "cach", y tal vez no sepas a qu se refiere. Todos los navegadores, por defecto, siempre que reciben una pgina de un servidor se hacen una copia de la misma en el disco de tu mquina. Con esto se pretende que si vuelves a solicitar la misma pgina, en lugar de pedirla de nuevo al servidor, te mostrar la que tiene guardada en el disco. A esta rea del disco donde el navegador va poniendo las pginas visitadas, se le denomina cach. El tamao de la cach lo puedes modificar desde las opciones de configuracin del navegador, e incluso puedes darle tamao cero, con lo que siempre que veas una pgina, sta habr sido solicitada al servidor independientemente de lo que digan las instrucciones META.

Hay otros elementos que pueden aparecer en la HEAD, como ISINDEX, NEXTID, LINK o BASE, pero son de uso muy especializado y poco corriente, algunos ya en desuso, y ninguno obligatorio (<TITLE> s lo es).

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 pgina, 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 habrs visto, los navegadores, por defecto, presentan el texto de una pgina ajustando los contenidos a la esquina superior izquierda de la pantalla. El elemento BODY tiene parmetros que permiten modificar los mrgenes por defecto. Lo malo es que cada navegador los interpreta de una manera. Por ejemplo, Netscape utiliza solamente dos instrucciones que afectan simultneamente a los mrgenes superior e inferior e izquierdo y derecho respectivamente: marginwidth="pixels", para los mrgenes izquierdo y derecho. marginheight="pixels", para los mrgenes 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 nmero de pixels que se quiere mover cada margen hacia el interior de la pgina. Estos parmetros tambin son accesibles desde instrucciones de estilo. Otro problema que suele presentarse con los mrgenes es que a la hora de imprimir una pgina, cada impresora, junto con el navegador, se las ingeniarn 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 tomarn los links que pongamos en la pgina. Por ejemplo, para hacer que los links sean amarillos antes de ser visitados, azul-verde cuando son activados, y verdes despus de haber sido utilizados, se escribe: <BODY LINK="#FFFF00" VLINK="#22AA22" ALINK="#0077FF"> Veamos a hora los elementos ms habituales del lenguaje que deben escribirse en el BODY.

Tamaos y tipos de letra en HTML

Para definir distintos tamaos de letra, en HTML se utiliza el elemento lleno <Hx> </Hx> donde x es un nmero que puede variar entre 1 y 6, siendo 1 el tamao mayor. Se escribirn as:
<H1> <H2> <H3> <H4> <H5> <H6> Texto Texto Texto Texto Texto Texto de de de de de de prueba prueba prueba prueba prueba prueba (H1)</H1>. (H2)</H2> (H3)</H3> (H4)</H4> (H5)</H5> (H6)</H6>

y este sera 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 despus del cierre automticamente el visualizador inserta un salto de prrafo. 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 cabra esperar. Este elemento admite un parmetro de alineacin. As, si escribes:
<H3 align=center> Texto en H3 </H3>

Texto en H3
Otra forma de cambiar los tamaos de letra es utilizar el elemento <FONT > con el atributo VALOR, que es un nmero entre 1 y 7. El valor por defecto del texto es 3. La gran diferencia de esta notacin respecto a la anterior es que no se produce un salto de prrafo despus 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:

AAA

AAAAAA

Se puede cambiar el tamao por defecto (3) de toda la pgina con el elemento <BASEFONT SIZE=valor>. El texto tomar el tamao 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 tamaos tambin pueden indicarse de forma relativa, por lo que el valor puede ser positivo (+) o negativo (-) respecto al tamao base. Por ejemplo estos dos valores dan el mismo resultado:
<FONT SIZE=5>ABcde</FONT> <FONT SIZE=+2>ABcde</FONT>

ABcde ABcde
Con la versin 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 diseador de la pgina 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 dems ya conocidos, como color y tamao. 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 mquina 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 llegarn 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 prximo, 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 ingls del color que se desea. Hay que tener presente que algunos no se vern o se vern mal si la mquina no soporta, por lo menos, 256 colores. Por supuesto, este efecto es anidable con el de tamao y todos los dems. 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 combinacin de colores y tamaos: 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 tambin se pueden definir en hexadecimal (por ejemplo el rojo es <FONT COLOR=#FF0000>). Cuando son colores bsicos, como los del ejemplo de arriba, es ms cmodo escribir el nombre aunque sea en ingls, pero cuando se trata de definir un color que "no tiene nombre" no hay ms remedio que usar la codificacin hexadecimal. En el ndice encontrars una tabla con los cdigos de colores.

#000000 #003300 #006600 #009900 #00CC00 #00FF00 #330000 #333300 #336600 #339900 #33CC00 #33FF00 #660000 #660033 #666600 #669900 #66CC00 #66FF00 #990000 #993300 #996600 #999900 #99CC00 #99FF00 #CC0000 #CC3300 #CC6600 #CC9900 #CCCC00 #CCFF00 #FF0000 #FF3300 #FF6600 #FF9900 #FFCC00 #FFFF00

#000033 #003333 #006633 #009933 #00CC33 #00FF33 #330033 #333333 #336633 #339933 #33CC33 #33FF33 #660033 #663333 #666633 #669933 #66CC33 #66FF33 #990033 #993333 #996633 #999933 #99CC33 #99FF33 #CC0033 #CC3333 #CC6633 #CC9933 #CCCC33 #CCFF33 #FF0033 #FF3333 #FF6633 #FF9933 #FFCC33 #FFFF33

#000066 #003366 #006666 #009966 #00CC66 #00FF66 #330066 #333366 #336666 #339966 #33CC66 #33FF66 #660066 #663366 #666666 #669966 #66CC66 #66FF66 #990066 #993366 #996666 #999966 #99CC66 #99FF66 #CC0066 #CC3366 #CC6666 #CC9966 #CCCC66 #CCFF66 #FF0066 #FF3366 #FF6666 #FF9966 #FFCC66 #FFFF66

#000099 #003399 #006699 #009999 #00CC99 #00FF99 #330099 #333399 #336699 #339999 #33CC99 #33FF99 #660099 #663399 #666699 #669999 #66CC99 #66FF99 #990099 #993399 #996699 #999999 #99CC99 #99FF99 #CC0099 #CC3399 #CC6699 #CC9999 #CCCC99 #CCFF99 #FF0099 #FF3399 #FF6699 #FF9999 #FFCC99 #FFFF99

#0000CC #0033CC #0066CC #0099CC #00CCCC #00FFCC #3300CC #3333CC #3366CC #3399CC #33CCCC #33FFCC #6600CC #6633CC #6666CC #6699CC #66CCCC #66FFCC #9900CC #9933CC #9966CC #9999CC #99CCCC #99FFCC #CC00CC #CC33CC #CC66CC #CC99CC #CCCCCC #CCFFCC #FF00CC #FF33CC #FF66CC #FF99CC #FFCCCC #FFFFCC

#0000FF #0033FF #0066FF #0099FF #00CCFF #00FFFF #3300FF #3333FF #3366FF #3399FF #33CCFF #33FFFF #6600FF #6633FF #6666FF #6699FF #66CCFF #66FFFF #9900FF #9933FF #9966FF #9999FF #99CCFF #99FFFF #CC00FF #CC33FF #CC66FF #CC99FF #CCCCFF #CCFFFF #FF00FF #FF33FF #FF66FF #FF99FF #FFCCFF #FFFFFF

Existe otra forma de representar algunos colores, sin la necesidad de utilizar nmeros en hexadecimal. Estos colores pueden representarse por su nombre, y son los siguientes:
Color Hexadecimal #FFFFFF #000000 #000080 #0000FF #008000 #008080 #00FF00 #00FFFF #800000 #800080 #808000 #808080 #C0C0C0 #FF0000 #FF00FF #FFFF00 Nombre white black navy blue green teal lime aqua maroon purple olive gray silver red fuchsia yellow

Las distintas definiciones de los bloques. Separadores.

Si se analiza una pgina cualquiera veremos que, en realidad, est compuesta de distintos bloques. Es algo as como un mosaico en el que cada parte de la composicin final tiene sus propios contenidos, que pueden ser texto, grficos o las dos cosas. Dependiendo de la composicin que se quiera hacer, habr que elegir los elementos ms convenientes para que nuestros contenidos aparezcan finalmente con la alineacin debida, el tamao apropiado, etc.

Comenzaremos con el elemento <Hx> </Hx> donde x es un nmero que puede variar entre 1 y 6, siendo 1 el tamao mayor. Se escribirn as:
<H1> <H2> <H3> <H4> <H5> <H6> Texto Texto Texto Texto Texto Texto de de de de de de prueba prueba prueba prueba prueba prueba (H1)</H1>. (H2)</H2> (H3)</H3> (H4)</H4> (H5)</H5> (H6)</H6>

y este sera 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 despus del cierre, automticamente, el visualizador inserta un salto de prrafo.

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 cabra esperar. Este elemento admite un parmetro de alineacin. As, si escribes:
<H3 align=center> Texto en H3 </H3>

Texto en H3

Para definir los prrafos 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 prrafo <P>, es conveniente acostumbrarse a ponerlo siempre. En la nueva definicin 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 sera 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 lnea en blanco entre los dos bloques. Si no se quiere dejar esa lnea vaca entre los dos prrafos 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 sera 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 alineacin: ALIGN=LEFT (por defecto), ALIGN=RIGHT , ALIGN=CENTER y ALIGN=JUSTIFY Se escribirn 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 <P ALIGN=RIGHT> Texto 2 Texto 2 Texto Texto 2 Texto 2 Texto <P ALIGN=CENTER> Texto 3 Texto 3 Texto Texto 3 Texto 3 Texto <P ALIGN=JUSTIFY> Texto 4 Texto 4 Texto Texto 4 Texto 4 Texto

1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 </P> 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P> 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 </P> 4 Texto 4 Texto 4 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 </P>

y este sera 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 </DIV> <DIV ALIGN=RIGHT> 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

texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2

texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2

texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2

texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2

texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2

texto1 texto1 texto1 texto1 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 </DIV>

Fjate en que aqu s se utiliza el cierre </DIV>. Este sera 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 prctica, y en general solamente se utiliza para definir bloques especiales definidos con instrucciones de estilo (bordes, tamao, situacin, alineacin, color, etc., etc.)

Otro elemento que es casi igual que <DIV> pero que no admite atributos de alineado, y no produce separacin de prrafo ni de lnea es <SPAN>. En realidad, de forma directa no sirve para nada, y ha sido creado tambin 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 prrafos 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 sera 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

Fjate 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 vaco <HR> (por Horizontal Rule). Este sera el resultado:

Al igual que al texto, se le puede incluir un parmetro de color, pero no funciona en todos los navegadores. Tambin se puede cambiar su apariencia aadindole el atributo <NOSHADE>. As:
<HR NOSHADE>

El resultado es:

El elemento <HR> admite dos parmetros: WIDTH y SIZE. El primero define la longitud de la lnea 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 nmero de puntos (pxels), o en tantos por ciento referidos al ancho total de la ventana. As:
<HR WIDTH=80% SIZE=5>

El resultado ser:

Adems se puede indicar su posicin respecto a los mrgenes 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 versin 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 versin adecuada de navegador, en los siguientes ejemplos slo vers 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 parmetro 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 parmetro <LEGEND> tiene tres atributos que indican la posicin 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 versin de navegador adecuada. Por supuesto, dentro del recuadro generado por <FIELDSET> se puede poner cualquier cosa: formularios, imgenes, texto, etc.

Textos preformateados
Posiblemente ya te habrs dado cuenta de que, cuando escribes un texto con tu editor, a la hora de ver lo hecho con el visualizador, algunas cosas no estn como t las pusiste... Como por ejemplo poner dos o tres espacios en blanco entre palabras, o intentar encolumnar los datos de una pequea tabla: acaba todo junto y en la misma lnea!

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 posicin del texto. Por ejemplo si utilizas el elemento <H>, se rompera 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 8 2 3 4 5 6 7 <B>Esto es una demostracion de</B> texto preformateado.

9 10 11 12 13 14

15 16 17 18 19 20 21

</PRE>

y este sera el resultado:

1 8 2 3 4 5 6 7 Esto es una demostracion de texto preformateado.

9 10 11 12 13 14

15 16 17 18 19 20 21

Dentro de un bloque preformateado tambin se pueden poner links a otros documentos y codificacin para caracteres especiales (se ver ms adelante lo que es eso). Este elemento admite el parmetro WIDTH=x donde x define la mxima longitud de lnea 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 ms de un espacio, se puede recurrir a una instruccin

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 pgina, 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 acompaado de los atributos TYPE y SIZE y se puede utilizar en cualquier zona de una pgina, pero donde ms 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 tamao del espacio se da en puntos (pixels) con el atributo SIZE. El valor por defecto es 0.

Fjate en que entre las dos instrucciones con tipo horizontal hay un elemento <P>. En efecto, es necesario indicarle a <SPACER> donde termina el prrafo para que ejecute la siguiente instruccin del mismo tipo. Este elemento no funciona con el navegador de Microsoft. Para conseguir columnas sin utilizar este elemento la nica solucin es emplear tablas: <TABLE>

Otros efectos en el texto

Una o varias lneas de texto, pueden estar centradas respecto a los mrgenes de la ventana. Esto afecta slo al texto que hay entre <CENTER> y </CENTER>, pero no a todo el prrafo. Por ejemplo:
texto texto texto texto texto texto texto texto texto texto texto texto <CENTER>texto centrado texto centrado</CENTER> texto texto texto texto texto texto texto texto texto texto texto texto

Se ver:

texto texto texto texto texto texto texto texto texto txto texto texto texto texto texto texto texto
texto centrado texto centrado texto texto texto texto texto texto texto texto texto txto texto texto texto texto texto texto texto

Esto, adems de a texto slo, se puede aplicar a una tabla, una imagen o cualquier otra cosa. Quedan algunos otros elementos que modifican el aspecto del texto. Algunos, aparentemente, hacen la misma cosa, y otros no funcionan con el visualizador de Netscape, por lo que se omiten aqu.
Texto en negrita:
<B>Texto en negrita</B>

Texto realzado:
<STRONG>Texto realzado</STRONG>

Texto en itlica:
<I>Texto en itlica</I>

Texto con nfasis:

<EM>Texto con nfasis</EM> Texto ejemplo de cdigo: <CODE>Texto ejemplo de cdigo</CODE> Texto teletipo: <TT>Texto teletipo</TT>

Texto subrayado:

<U>Texto subrayado</U>

Texto tachado:
<STRIKE>Texto tachado</STRIKE>

Texto de direccin:
<ADDRESS>Texto de direccin</ADDRESS>

Texto intermitente
<BLINK>Texto intermitente</BLINK>
Texto superndice

Texto normal nomal

<SUP>Texto Superndice</SUP>
Texto subndiceTexto

<SUB>Texto Subndice</SUB>

Texto grande
<BIG>Texto grande</BIG> Texto pequeo <SMALL>Texto pequeo</SMALL>

En los navegadores de ltima generacin se ha implementado un efecto que permite incluir explicaciones ocultas que aparecen al pasar el ratn por encima (sin pulsar), pero sin cambiar de pgina ni abrir ninguna ventana nueva. Por ejemplo, si escribes:

<ACRONYM TITLE="Hyper Text Markup Language">HTML</ACRONYM> Al pasar el ratn sobre la palabra HTML, se desvela su significado: HTML De funcionamiento similar al anterior tambin tenemos el elemento <abbr> <abbr TITLE="Hyper Text Markup Language">HTML</abbr> Y este es el aspecto que toma el texto: HTML Este ltimo elemento NO funciona con el navegador IE. Como puedes ver, los dos trabajan de la misma forma que el parmetro title que se aplica al elemento <A> y se diferencian de ste solamente por el tipo de subrayado, que es ms ligero.

Listas y mens
Hay elementos que permiten crear texto con varios formatos de listado: Estos pueden ser ordenados <OL> (se refiere a numerados, no ordenados por algun criterio), desordenados <UL> (no numerados), directorios <DIR>, menu <MENU> y listados de definicin <DL>. Veamos cmo es la sintaxis bsica y apariencia de estos elementos, a partir de los cuales, pueden hacerse combinaciones muy complejas mediante anidamientos de unos con otros, hasta conseguir prcticamente cualquier presentacin deseada:

Esto es una lista ordenada (numerada):

1. Primera linea 2. Segunda linea Se escribe:
<OL> <LI>Primera linea <LI>Segunda linea </OL>

Fjate en que los elementos <LI> no necesitan cierre. Terminan cuando aparece otro igual o se cierra la lista. Puede ser conveniente poner el cierre </LI> si se van a aplicar instrucciones de estilo.

Esto es una lista desordenada ( no numerada):

Primera linea segunda linea

Se escribe:
<UL> <LI>Primera linea <LI>Segunda linea </UL>

En este caso los nmeros han sido sustituidos por unos puntos gruesos. Esa es la apariencia por defecto; se puede cambiar usando el atributo TYPE con tres valores (el valor por defecto es DISC). Con el valor CIRCLE se ver:
o o

Primera linea segunda linea

Se escribe:
<UL TYPE=CIRCLE> <LI>Primera linea <LI>Segunda linea </UL>

Tambin puede usarse el valor SQUARE. As:

Primera linea segunda linea

Se escribe:
<UL TYPE=SQUARE> <LI>Primera linea <LI>Segunda linea </UL>

Las listas ordenadas no slo se pueden ordenar con nmeros. Tambin se pueden utilizar letras y numeracin romana tanto en maysculas como minsculas. Para esto se utiliza el atributo TYPE del elemento <OL> con los siguientes valores: TYPE=1 (por defecto) para nmeros, TYPE=A para letras maysculas, TYPE=a para letras minsculas, TYPE=I para numeracin romana en maysculas y TYPE=i para numeracin romana en minsculas.

Esto es una lista ordenada con letras maysculas:

A. B. C. D. Primera linea Segunda linea Tercera linea Cuarta linea

Se escribe:
<OL TYPE=A> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>

Esto es una lista ordenada con letras minsculas: a. b. c. d. Primera linea Segunda linea Tercera linea Cuarta linea

Se escribe:
<OL TYPE=a> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>

Esto es una lista ordenada con numeracin romana en maysculas: I. II. III. IV. Primera linea Segunda linea Tercera linea Cuarta linea

Se escribe:
<OL TYPE=I> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea

</OL>

Esto es una lista ordenada con numeracin romana en minsculas: i. ii. iii. iv. Primera linea Segunda linea Tercera linea Cuarta linea

Se escribe:
<OL TYPE=i> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>

En algunos casos puede interesarnos que la lista no comience por el nmero 1 (por ejemplo si es una lista que continua en otra pgina). Se puede conseguir con el atributo START combinado con TYPE.

Esto es una lista ordenada con letras maysculas y que comienza por la E:
E. F. G. H. Primera linea Segunda linea Tercera linea Cuarta linea

Se escribe:
<OL TYPE=A START=5> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>

El nmero que pones en el atributo START indica en que nmero o letra comenzar la lista. la E es la quinta letra.

Esto es un men: Primera linea Segunda linea Se escribe:

<MENU> <LI>Primera linea <LI>Segunda linea </MENU>

La diferencia entre un men y una lista desordenada, es que las lneas en la lista desordenada comienzan en el margen izquierdo y las del men unas posiciones ms a la derecha (aunque eso depende del visualizador, con Netscape se ven igual).

Esto es un directorio: Primera linea Segunda linea Se escribe:

<DIR> <LI>Primera linea <LI>Segunda linea </DIR>

Ocurre lo mismo que con el men, con Netscape no se aprecia diferencia.

Esto es una lista de definicion: Primera linea Segunda linea Se escribe:

<DL> <DT>Primera linea <DD>Segunda linea </DL>

Fjate que ahora en lugar del elemento <LI> se utiliza <DT> y <DD>, y como tipo <DL>. Estos tres nuevos elementos tambin se pueden usar con cualquiera de los anteriores tipos de lista, alterando por completo su apariencia. Para hacerse una idea de la variedad de aspectos que se pueden conseguir, lo mejor es ver la pgina de ejemplos de listados.