¿Cómo funciona esto?(continuación)

La idea es sencilla: sólo tienes que crear un documento con tu editor preferido (como documento entenderemos el conjunto de ficheros, tanto de texto como de imágenes, que forman las distintas páginas), guardarlo con la extensión .htm o .html, abrirlo con tu navegador preferido, y ya tienes un hipertexto en marcha.

Las páginas o documentos creados pueden residir en el disco duro de tu ordenador personal, en un disquete, en un CD-ROM, o estar a varios miles de kilómetros en otro ordenador llamado servidor web o servidor http, que es el protocolo utilizado. Si es así, entonces te estarás moviendo por la WWW (World Wide Web) que es como se ha dado en llamar a este tipo de servicios de Internet.

Así pues, en esencia, una página escrita en HTML no es más que texto normal, escrito con cualquier editor, y al que, cuando se le quiere dar algun aspecto especial, como por ejemplo el tamaño de la letra, habrá que acompañar de ciertos códigos para indicar el efecto deseado. A estos códigos se les llama elementos del lenguaje.

Pero no hay que olvidar que al fin y al cabo no hablamos más que de texto. Simple y llano texto. Por lo tanto, para montajes sencillos, en los que no se requiera ningún efecto especial, nos podemos olvidar hasta del mismísimo HTML. El visualizador nos presentará perfectamente cualquier página ".txt" generada por cualquier editor, y los links entre documentos sólo requieren un simple y sencillo comando. Y aún así podremos conseguir el tipo y tamaño de letra y colores de texto y fondo que queramos, simplemente configurando el visualizador.

Como ya habrás deducido, lo primero es crear las páginas en tu máquina, es decir, en local, y eso ya te permite navegar por tu documento, simplemente abriendo las páginas creadas con tu navegador preferido.

Introducción al HTML

Elementos en un documento HTML

En esta guía, a las instrucciones que forman el lenguaje HTML les llamaremos elementos. Otros autores también las denominan "TAGS", o "ETIQUETAS". La notación de los elementos consiste en los símbolos < y > que encierran dentro una instrucción.

Los elementos pueden ser llenos o vacíos.

Elementos llenos

Se forman escribiendo la instrucción correspondiente seguida del texto al que se quiere aplicar la instrucción y se termina repitiendo la instrucción pero con una barra inclinada inmediatamente antes de la misma. Por ejemplo, el elemento H1 que sirve para dar el máximo tamaño al texto, se escribirá:

<H1> Texto de prueba </H1>.
 

Texto de prueba

Si olvidas poner </H1> todo el resto de la página tendrá el mismo tamaño grande.

Elementos vacíos

Los elementos vacíos se escriben como los llenos, pero no es necesario poner la instrucción repetida al final con una barra. Esto se debe a que estos elementos no producen un efecto sobre el texto. Generalmente se utilizan para separar bloques de texto, y por tanto no es necesario indicar su fin. Empiezan y terminan en el mismo punto. Por ejemplo, el elemento <HR> que sirve para dibujar una linea horizontal en la pantalla, se escribirá:

<HR>

Y este sería el resultado:

Elementos con argumento

Algunos elementos se escriben con argumento. Es como pasarle parámetros a la instrucción, y se llaman atributos del elemento.

Por ejemplo, el elemento <A> que sirve para hacer un link (enlace) con otro documento o con otra página del actual, se escribirá:

<A HREF="http://www.miservidor.com/mifichero.htm"> Link de prueba  </A>.

Este es un elemento lleno donde al atributo HREF se le asigna el valor que aparece entre comillas: "http://www.miservidor.com/mifichero.htm". El texto al que afecta este elemento es Link de prueba y realiza un link con el fichero mifichero.htm que está en el servidor www.miservidor.com.

Los elementos pueden escribirse tanto en mayúsculas como en minúsculas. Puede ser preferible la primera opción ya que aporta claridad al documento fuente, y eso se agradece a la hora de hacer correcciones, pero CUIDADO, el valor de algunos atributos hay que escribirlos EXACTAMENTE como deban ser. En el ejemplo anterior no funcionaría el link si escribiéramos www.miservidor.com en mayúsculas, eso es un nombre de máquina y sería interpretado como OTRA máquina.

Los elementos pueden anidarse unos con otros, teniendo cuidado de poner los cierres en el lugar adecuado. Por ejemplo, el elemento <H1> combinado con <I> que sirve para generar texto en itálica, se escribirá:

<H1><I>Texto de prueba </I></H1>.

y este sería el resultado:

Texto de prueba

Los elementos, en HTML, los puedes escribir tanto en mayúsculas como en minúsculas. Funciona igual <P> que <p>. A la hora de revisar el código escrito, resulta más claro si se escribieron en mayúsculas, pero si en el futuro hay que convertir la página a otro estándar, como el XHTML, no se admitirán las mayúsculas. Si no piensas migrar a otras tecnologías, hazlo como más cómodo te resulte.

Estructura de una página HTML

Las páginas HTML están estructuradas en dos partes diferenciadas: la HEAD (cabecera) y el BODY(cuerpo).

Ejemplo de página

<!Tipo de documento>
<HTML>
<HEAD>
<TITLE> Documento de prueba </TITLE>
</HEAD>
<!-- Esto es un comentario-->
<BODY>
<H1> Esto es una "demo" de documento HTML </H1>
Esto es el más sencillo de los documentos HTML.
</BODY></HTML>

El tipo de documento no es obligatorio a efectos prácticos, es decir que la página se verá igual tanto si lo escribes como si no. Sólo sirve como identificación del tipo de contenido del fichero a los efectos de cumplir las especificaciones de estándar recomendadas por el consorcio W3C, que es el organismo que regula el lenguaje. Por ejemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://w3.org/TR/REC-html40/loose.dtd">

Indica que cumple el estándar HTML 4.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://w3.org/TR/REC-html40/strict.dtd">

Significa que cumple el estándar HTML 4.0 y, además, no contiene elementos desaconsejables.

Y esta es una definición de marcos que cumple el estándar HTML 4.0:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://w3.org/TR/REC-html40/frameset.dtd">

En el HTML 4.0 se consideran desaconsejables aquellos elementos que, aún siendo soportados, han sido sustituidos por otros y, por ello, es posible que sean eliminados en el futuro. En cualquier caso, el que un elemento escrito en tus páginas se vea o no, dependerá siempre del navegador utilizado y/o de su versión, no de lo que diga el estándar.

Puedes ver el aspecto real del ejemplo de página pulsando aquí.

Para escribir comentarios en la página (que sólo se ven en el texto fuente, pero no en el visualizador) se utilizará el elemento

<!-- -->

cuidado: el que no se vea de forma normal en el navegador, no significa que no pueda verse el código fuente. Nunca escribas comentarios con claves de acceso o datos confidenciales.

Cabecera (HEAD) de un documento HTML

En la HEAD reside información 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 descripción que identifica la página.

No hay que confundir el elemento <TITLE> con el nombre del fichero. Por ejemplo, esta página 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>

<HEAD> <TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://miservidor/mipagina.htm">
</HEAD>

Utiliza esto con precaución. Si sabes que el contenido de la página no va a cambiar, es inútil hacer esto, y si lo haces contra un servidor, puedes sobrecargarlo. Este elemento, sólo tendrá utilidad en casos muy especiales.

Otra opción es forzar la expiración inmediata en la caché del navegador de la página recibida, lo que provoca que la página sea solicitada de nuevo al servidor cada vez, en lugar de cargar la copia que ya existe en la máquina 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>

<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Expires" CONTENT="0">
</HEAD>

Otra opción es impedir directamente que el navegador guarde en caché la página. Esto es especialmente útil cuando se trabaja con formularios que consultan datos dinámicos:

<HEAD>
<TITLE>Head de un documento </TITLEv
<META HTTP-EQUIV="Expires" CONTENT="no-cache">
</HEAD>

Si tienes interés en que tus páginas aparezcan en los grandes buscadores de Internet, y puedan ser encontradas con facilidad, puedes poner las palabras clave que contiene la página 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 página:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META NAME="description" CONTENT="Manual para escribir HTML.">
</HEAD>

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

Cuerpo (BODY) de un documento HTML

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 pixeles 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">

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: A A A A A A A A

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> 

Se dispone tambien del 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>

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>

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

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>

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. En el índice encontrarás una tabla con los códigos de colores.

Las definiciones de bloques y 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>

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>

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

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>

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> 

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>

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

Se escribe así:

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

Se escribe así:

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

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>

texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto 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:

<HR NOSHADE>

<HR WIDTH=400 SIZE=5>

<HR WIDTH=80% SIZE=5> 

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

O bien:

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

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:

Este elemento tiene un parámetro que permite etiquetar el recuadro:

<FIELDSET>

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

</FIELDSET>

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

Textos preformateados

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>

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

Por ejemplo, si escribes:

texto texto     texto texto

texto texto texto texto

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

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 (pixeles) 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>

Otros efectos en el texto

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  

texto texto texto texto texto texto texto texto texto txto texto texto texto texto texto texto texto

Esto, además de a texto sólo, 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 itálica:

<I>Texto en itálica</I>

Texto con énfasis:

<EM>Texto con énfasis</EM>

Texto ejemplo de código:

<CODE>Texto ejemplo de código</CODE>

Texto teletipo:

<TT>Texto teletipo</TT>

Texto subrayado:

<U>Texto subrayado</U>

Texto tachado:

<STRIKE>Texto tachado</STRIKE>

Texto de dirección:

<ADDRESS>Texto de dirección</ADDRESS>

Texto intermitente

<BLINK>Texto intermitente</BLINK>

^{Texto superíndice}Texto normal

<SUP>Texto Superíndice</SUP>

_{Texto subíndice}Texto nomal

<SUB>Texto Subíndice</SUB>

Texto grande

<BIG>Texto grande</BIG>

Texto pequeño

<SMALL>Texto pequeño</SMALL>

<ACRONYM TITLE="Hyper Text Markup Language">HTML</ACRONYM>

Al pasar el ratón sobre la palabra HTML, se desvela su significado: HTML

De funcionamiento similar al anterior también tenemos el elemento

<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 parámetro title que se aplica al elemento <A> y se diferencian de éste solamente por el tipo de subrayado, que es más ligero.

Listas y menús

Esto es una lista ordenada (numerada):

1. Primera linea
2. Segunda linea

<OL>
<LI>Primera linea
<LI>Segunda linea
</OL>

• Primera linea
• segunda linea

<UL>
<LI>Primera linea
<LI>Segunda linea
</UL>

• Primera linea
• segunda linea

<UL TYPE=CIRCLE>
<LI>Primera linea
<LI>Segunda linea
</UL>

También puede usarse el valor SQUARE. Así:

• Primera linea
• segunda linea

<UL TYPE=SQUARE>
<LI>Primera linea
<LI>Segunda linea
</UL>

Esto es una lista ordenada con letras mayúsculas:

1. Primera linea
2. Segunda linea
3. Tercera linea
4. Cuarta linea

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

1. Primera linea
2. Segunda linea
3. Tercera linea
4. Cuarta linea

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

1. Primera linea
2. Segunda linea
3. Tercera linea
4. Cuarta linea

<OL TYPE=I>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>

1. Primera linea
2. Segunda linea
3. Tercera linea
4. Cuarta linea

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

Esto es una lista ordenada con letras mayúsculas y que comienza por la E:

5. Primera linea
6. Segunda linea
7. Tercera linea
8. Cuarta linea

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

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

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

Primera linea

Segunda linea

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

Tablas

He aquí una tabla-resumen de los elementos utilizados y los atributos que admite cada uno:

Veamos el significado de cada atributo:

• BORDER Indica el ancho de los bordes de la tabla. Se mide en píxels. Si no se escribe este atributo, es equivalente a BORDER=0 (por defecto).
• BORDERCOLOR Establece el color de los bordes de la tabla. No funciona igual en todos los navegadores.
• CELLSPACING Indica el número de píxels que separan una celda de otra. Aunque pueda parecerlo, no hace lo mismo que BORDER. Su valor por defecto es 2.
• CELLPADDING Indica los píxels de separación entre el borde de la celda y su contenido. Su valor por defecto es 1.
• WIDTH Según donde se escriba, sirve para controlar el ancho de toda la tabla o de sus columnas. Si se incluye en <TABLE> puede indicar el tamaño tanto en píxels como en porcentaje respecto al ancho de la pantalla.
• ALIGN Indica la alineación horizontal de los datos dentro de las celdas. Puede tener tres valores: LEFT (izquierda), RIGHT (derecha) y CENTER (centro).
• VALIGN Indica la alineación vertical de los datos dentro de las celdas. Puede tener tres valores: TOP (arriba), BOTTOM (abajo) y MIDDLE (centro).
• ROWSPAN Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado número de filas.
• COLSPAN Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado número de columnas.
• NOWRAP Para impedir que las líneas de texto dentro de una celda se trunquen en los espacios en blanco.
• EVENTS Se pueden capturar todos los eventos típicos de los navegadores en cualquiera de las partes de una tabla. Para ello es necesario JavaScript, y no es compatible con todos los navegadores. Por ejemplo: <TABLE BORDER onMouseOver="javascript:alert('Aviso')"> ... </TABLE>

Recientemente se han implementado al elemento <TABLE> algunos atributos muy interesantes que permiten definir qué bordes o líneas de la tabla se mostrarán:

Este atributo sirve para definir qué bordes del marco de la tabla serán visibles: <TABLE FRAME="valor"> ... </TABLE> donde valor puede ser:

• void - Ningún lado (por defecto).
• above - Sólo el borde superior
• below - Sólo el borde inferior.
• hsides - Sólo los bordes superior e inferior.
• vsides - Sólo los lados derecho e izquierdo.
• lhs - Sólo el lado izquierdo.
• rhs - Sólo el lado derecho.
• box - Los cuatro lados.
• border - Los cuatro lados (no es lo mismo que el ya conocido)

• none - Ninguna línea de división (por defecto).
• groups - Sólo aparecen líneas de división entre grupos de filas y grupos de columnas.
• cols - Sólo aparecerán líneas de división entre filas.
• rows - Sólo aparece líneas de división entre columnas.

Las posibilidades son tan amplias, que lo mejor es ver la página de ejemplos de tablas que encontrarás en el índice.

Códigos hexadecimales de color

Estos códigos de color se pueden utilizar como valor de atributo en los elementos <FONT COLOR> y <BODY BGCOLOR FGCOLOR TEXT LINK VLINK ALINK>. Algunos no funcionarán en ciertos visualizadores, así como si Windows no está configurado con 256 colores al menos.

La codificación de estos colores está basada en mezclas cromáticas RGB (RED GREEN BLUE), es decir, se mezclan ciertas cantidades de los tres colores básicos (rojo verde y azul), para conseguir el color deseado. La cantidad de cada color está definida por el código que utilizamos, que tiene seis dígitos en hexadecimal. Si los cortamos en 3 grupos de dos de izquierda a derecha, obtendremos la cantidad (en hexadecimal) de cada color.

La sintaxis para cambiar el fondo de la página (background) a color rojo es: <BODY BGCOLOR=#FF0000> y para dar color al texto, ver la página Texto de colores.

Creación de enlaces (links)

Todo esto lo consigue el elemento <A> (por Anchor, en inglés = ancla o punto de anclaje). En lo sucesivo le llamaremos enlace o sinplemente link (en inglés link=eslabón o enlace).

Pero seguramente te preguntarás qué es eso de un "link". Pues un link es un área de la pantalla, que puede contener una o varias palabras o una imagen, que es "sensible" al puntero del ratón, y al ponerlo sobre ella y pulsar el botón izquierdo el visualizador llamará a la página que tiene asignada el link. Habitualmente por defecto los visualizadores señalan un área linkada subrayándola, si es texto, o poniéndole un borde si es una imagen, ambas cosas en color azul. Por supuesto, eso se puede cambiar en las configuraciones de visualizador. Si no se desea que aparezca el subrayado para mejorar la estética en algunos casos, se puede parametrizar con una instrucción de estilo.

Se escribirá:

<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba  </A>.

Y se vería así: Link de prueba

Si lo que se desea es que aparezca sin subrayado o de otro color, o ambas cosas, se puede recurrir a una instrucción de estilo. Así:

<A HREF="http://www.miservidor.es/mifichero.htm"
  style="color:red; text-decoration:none;"> Link de prueba  </A>.

El elemento <A> tiene dos atributos: HREF y NAME.

En el ejemplo de arriba al atributo HREF se le asigna el valor que aparece entre comillas: "http://www.miservidor.es/mifichero.htm". El texto sobre el que se monta el enlace es Link de prueba y realiza un link con el fichero mifichero.htm que está en el servidor www.miservidor.com.

Esta forma de escribir la ruta del link de forma completa, se utiliza cuando hay que saltar de una máquina a otra, si el enlace es para otra página de nuestro propio servidor es suficiente escribir la ruta virtual corta: /mifichero.htm o bien: /otro_directorio/mifichero.htm según proceda.

Como has visto, el punto de enlace se realiza en el texto escrito antes del cierre del elemento </A>, pero también puede hacerse con una imagen cualquiera, que iría en lugar del texto, incluso puedes poner el texto junto con una imagen. Por ejemplo para hacer un link que nos lleve al índice desde una bola roja, se escribe:

    Ir al inicio <A HREF="inicio.htm"> <img src="bolaroja.gif"> </A>.

Ir al inicio

Al igual que el texto aparece subrayado en azul cuando forma parte de un enlace, los gráficos reciben un borde azul alrededor de toda la imagen, lo que a veces puede resultar poco estético. Esto también tiene solución, pero aquí se hace en la instrucción de la imagen:

    Ir al inicio <A HREF="inicio.htm"> <img src="bolaroja.gif" border=0> </A>.

Ir al inicio

El valor de los atributos hay que escribirlos EXACTAMENTE como se deba. En el ejemplo anterior no funcionaría el link si escribiéramos www.miservidor.es en mayúsculas o con alguna otra diferencia, eso es un nombre de máquina y sería interpretado como OTRA máquina. Esto es aplicable a todos los parámetros: servicio (http://) servidor (www.miservidor.com) y fichero (mifichero.htm). Estas precauciones son ineludibles en el caso de servidores montados en máquinas con sistema operativo UNIX.

Dentro de los parámetros pasados a HREF, podrás ver que al principio pone http://, esto es, el tipo de servicio al que el visualizador va a llamar, y hay varios :

Además de HREF, el elemento <A> puede tener otro atributo: TARGET. Se utiliza para ordenar la apertura de otra ventana del visualizador con la página que se desee. Se escribirá:

     <A HREF="indice.htm" TARGET="Ventana-2"> </A>

Del mismo modo, el atributo TARGET puede utilizarse para salir de una pantalla compuesta de frames. En efecto, si estamos en una pantalla con, por ejemplo, dos frames, cualquier link invocado desde cualquiera de ellos, hace que la página llamada aparezca en ese mismo frame. Para volver a una pantalla "normal" sin frames, se puede escribir un link con la sintaxis siguiente:

     <A HREF="indice.htm" TARGET="_parent"> </A>

TARGET="_blank": Para que el enlace se muestre en una nueva ventana vacía. También puede darse un nombre cualquiera con el mismo efecto. TARGET="_self": Para mostrar el enlace en la misma ventana o frame que lo referencia (valor por defecto). TARGET="_top": El documento solicitado se cargará en la pantalla actual, ocupando toda la ventana y destruyendo la estructura de frames anterior, si existe.

Como se acaba de ver, el atributo HREF sirve para enlazar con otro documento, que puede estar en un servidor o ser un fichero local, pero que siempre se nos presentará desde la primera línea del mismo. El atributo NAME se utiliza para definir algo así como "un punto de aterrizaje" en cualquier línea del documento de destino, de forma que nos aparecerá en pantalla desde la línea deseada y no desde el principio. Esto es muy útil cuando se trata de documentos largos divididos en secciones.

Se escribirá así:

En el documento activo:

<A HREF="http://www.miservidor.es/mifichero.htm#punto1"> Ir al punto 1</A>

<A NAME="punto1"></A>

Dentro del documento activo En la línea de partida:

<A HREF="#punto1">Ir al punto 1</A>

<A NAME="punto1"></A>

Como habrás visto en el cuadro de arriba, es posible enviar un e-mail desde un link con la instrucción:<A HREF="mailto:migue.hit@hotmail.com">Enviar e-mail</A>. Con esta sintaxis se invoca al cliente de correo predeterminado para que abra una ventana con la dirección deseada ya escrita. Si además quieres que dicha ventana se abra con el asunto (subject) y el texto (body) ya escritos se puede conseguir así:

<A HREF="mailto:migue.hit@hotmail.com?&subject=Asunto de prueba&body=Texto de
prueba">Enviar e-mail</A>

Como puedes ver, los saltos en esta línea se han producido siguiendo la numeración indicada por los disintos tabindex, al resto de links se llega por orden de escritura. Se escribe:

<A HREF="tablas.htm" tabindex="2">Tablas</A> <A HREF="imagen1.htm" tabindex="3">Imágenes</A> <A HREF="body.htm" tabindex="1">Body</A>

Esto solamente funciona con versiones recientes de navegadores. Otro atributo reciente de los links es title que permite escribir una descripción del link sin necesidad de pulsar en él, simplemente poniendo encima el puntero del ratón. Por ejemplo:

<A HREF="tablas.htm" title="Saltar a la sección de tablas">Tablas</A>

Se obtiene: Tablas

Debes saber que...

• El texto que pongas después del símbolo # puede ser cualquiera, siempre que no tenga espacios en blanco, caracteres especiales ni caracteres codificados, y por supuesto, que no esté repetido en el mismo documento de destino.
• Si en el documento de destino no existe el punto definido en el documento de origen, el visualizador nos presentará en pantalla la última línea del mismo.
• Cuando hagas un link, es preferible utilizar direcciones relativas. Si utilizas direcciones absolutas y después tienes que mover los ficheros por cualquier razón, tendrás que modificar todas las direcciones.
• Si al hacer un link, después del nombre de la máquina no pones el nombre de un fichero, por defecto el servidor entiende que se le pide la "home page" (página inicial) de ese directorio. Generalmente (aunque depende de la configuración del servidor) el fichero inicial de un directorio suele ser index.htm o default.htm
• Si un servidor no tiene definida página inicial, simplemente nos mostrará una lista de todos los ficheros y directorios que tenga en el directorio definido como raíz si el servidor tiene activada la opción de listar directorios, en caso contrario, dará un error.
• Si después de la dirección de la máquina a la que le haces el link en lugar de un nombre de fichero pones el de un directorio, generalmente el servidor nos mostrará un simple listado de los ficheros y directorios que éste contenga si el servidor tiene activada la opción de listar directorios, en caso contrario, dará un error.
• No sólo puedes montar el link sobre un texto, también puedes hacerlo sobre una imagen cualquiera. Es decir, después del link y antes de puedes poner lo que quieras.
• El arte de escribir buen HTML reside en dar una buena estructura a la información. Siempre que puedas huye de crear páginas muy largas. Crea cuantas necesites, con buena estructura y enlázalas con cuantos links sean precisos.
• Recuerda: si tu trabajo HTML no va a residir en un servidor en red, y has utilizado direcciones absolutas, al hacer un link, no empieces con aquello de: "http://....". No funcionará.
• Si continuas deseando poner direcciones absolutas con ficheros locales, tendrá que ser así file:///C:/MIDIRECTORIO/mifichero.htm
• Después de C (que puede ser A, B, D o la unidad de disco que quieras) fíjate en que las barras que separan los directorios y ficheros son barras a la derecha.

Insertar imagenes

Para insertar una imagen en un documento HTML se utiliza el elemento <IMG>. Este elemento puede ir acompañado de los atributos SRC ALT ISMAP ALIGN WIDTH HEIGTH BORDER VSPACE HSPACE. Con las nuevas implementaciones que Netscape hace del elemento, se consiguen efectos de imagen flotante y por tanto se ha hecho necesario dotar al elemento <BR> del atributo CLEAR.

Veamos ejemplos del uso de <IMG>:

<IMG SRC="sugeren.gif">texto texto texto texto  texto texto texto texto

<IMG SRC="sugeren.gif" ALT="AQUI VA UNA IMAGEN">

<IMG SRC="sugeren.gif" ALIGN=TOP> texto texto texto texto texto  texto exto
texto texto texto texto texto  

<IMG SRC="sugeren.gif" ALIGN=BOTTOM> texto texto texto texto texto  texto exto
texto texto texto texto texto  

<IMG SRC="sugeren.gif" ALIGN=MIDDLE> texto texto texto texto texto  texto exto
texto texto texto texto texto  

<IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto  texto texto
texto texto texto texto texto  

<IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto <BR CLEAR>
texto texto texto texto texto texto texto  

<IMG SRC="sugeren.gif" ALIGN=RIGHT> texto texto texto texto texto  texto texto
texto texto texto texto texto  

Si tu visualizador no soporta esto, hay un truco para conseguir algo parecido:

<TABLE> <TR><TD>texto texto texto texto texto texto texto texto texto texto texto texto</TD><TD align=center><IMG SRC="sugeren.gif"></TD></TR> </TABLE>

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

<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=272 HEIGTH=92 > texto texto texto texto
texto texto texto texto texto texto texto texto  

Aquí la imagen es la misma de los ejemplos anteriores, pero ha sido redimensionada por el visualizador. Su tamaño original es de 136x46 puntos. Este es su aspecto al doble: 272x92.

<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=75 HEIGTH=20 > texto texto texto  texto
texto texto texto texto texto texto texto texto  

Aquí la imagen es la misma de los ejemplos anteriores, pero ha sido redimensionada por el visualizador. Su tamaño original es de 136x46 puntos. Este es su aspecto a la mitad: 75x23

Consideraciones sobre WIDTH y HEIGTH

Esta forma de trabajar tiene como consecuencia, que si en el código del BODY no hay instrucciones sobre el espacio que hay que reservar en pantalla para cada imagen, cuando éstas lleguen en el último paso de la carga de la página, el texto ya estará compuesto, pero al no saber el tamaño de las imágenes, no se habrá reservado el espacio adecuado para insertarlas, por lo que todo el texto será desplazado hacia abajo, con la consiguiente pérdida del formato original de la página, ya que el navegador no va a recomponer el texto que ya estaba escrito.

<IMG SRC="sugeren.gif" ALIGN=LEFT BORDER=5> texto texto texto texto texto  texto
texto texto texto texto texto texto  

texto texto texto texto texto texto texzto texto texto texto texto texto
<IMG SRC="sugeren.gif"> ALIGN=LEFT HSPACE=100 VSPACE=30
texto texto texto  texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto   

texto texto <A HREF="indice.htm"><IMG SRC="sugeren.gif" ></A>texto texto. 

Como puedes ver, la imagen aparece rodeada de un marco de color como es habitual en los puntos de link (en el texto es el subrayado). Si quieres eliminar el marco, escribe:

       ....  IMG SRC="sugeren.gif" BORDER=0 > 

Mapeado de una imagen para usarla como direccionador

<A HREF="/cgi-bin/imagemap/mimapa"><IMG SRC="sugeren.gif" ISMAP></A> 

Si mueves el ratón por encima de la imagen, verás que en la ventanita de estado del navegador (en la parte inferior izquierda de la ventana) aparecen junto a un interrogante unos números que cambian según muevas el ratón. Con cuidado intenta poner el puntero en la esquina superior izquierda y en la inferior derecha. Verás las cifras 1,1 y 136,46, respectivamente, que son las medidas en puntos que tiene el gráfico. Como ya habrás supuesto, esto es un sistema de coordenadas, y para que nuestra imagen funcione como un menú direccionador, lo que necesitamos es que algún elemento convierta esas coordenadas en una dirección del estilo ya conocido: "http://miservidor.es/mifichero.htm". Esto siginifica que con un solo link podemos obtener un enorme número de direcciones, teóricamente tantas como pares de coordenadas tiene la imagen. En la práctica serán menos, ya que andar intentando atinar en el punto 11,32, por ejemplo, es un poco engorroso.

Existen multitud de programas llamados mapeadores que parten la imagen en imaginarios trozos, y cada uno de ellos indica un link con alguna parte. Estos programas generan un fichero con todas las direcciones. Algo así:

rect http://miservidor.es/mifichero1.htm 12,35
rect http://miservidor.es/mifichero2.htm 90,42
rect http://miservidor.es/mifichero3.htm 112,46 

<A HREF="/cgi-bin/imagemap/mimapa"><IMG SRC="sugeren.gif" ISMAP></A>

Sólo queda por decir que el fichero mimapa tiene que estar en otro directorio especial que tiene el servidor a estos efectos, y al que por supuesto, solo puede acceder el administrador del sitema.

Todo esto es suponiendo que el servidor está en una máquina UNIX. Si reside en tu propio PC con Windows o en un MAC (que los hay), tendrás que ver las instrucciones concretas del programa servidor. La forma de montar el mapa puede variar de un programa servidor a otro, pero la base de funcionamiento es siempre la misma.

Otra forma alternativa de conseguir que una imagen responda con ciertas acciones, es operar con los elementos de formularios. En el índice encontrarás información sobre un tipo de formulario que devuelve un par de coordenadas, que una vez evaluadas permite ejecutar una acción.

Por ejemplo, en la siguiente imagen, la mitad izquierda nos envía a indice.htm y la mitad derecha a intro.htm. Mueve el puntero del ratón horizontalmente sobre la imagen y observa la ventanita de estado que hay en la parte inferior izquierda de la pantalla, verás como cambia el nombre del link.

Se escribe así:

<MAP NAME="nombre1">
<AREA SHAPE="rect" COORDS="1,1,75,46" HREF="indice.htm">
<AREA SHAPE="rect" COORDS="76,1,136,46" HREF="intro.htm">
</MAP>

<IMG SRC="sugeren.gif" USEMAP="#nombre1">

En primer lugar tenemos el elemento MAP, que lo que está haciendo es definir un mapa de coordenadas. Va acompañado del atributo NAME que da nombre al mapa. Es necesario nombrarlo porque podría haber más de uno en la misma página, y evidentemente, sus nombres no deberán repetirse.

A continuación tenemos el atributo AREA que define las áreas de la imagen. El parámetro SHAPE="rect" indica la figura geométrica que estamos utilizando para ello. Al igual que con los otros mapas, puede ser rect circ y poly.

El parámetro COORDS fácilmente se adivina que indica las coordenadas del área, en este caso vértice superior izquierdo e inferior derecho, respectivamente.

HREF ya sabemos lo que hace: indica un link con una página, pero esta vez no va acompañando al elemento <A>, digamos que es un atributo prestado. Hay un área por cada link definido. Si un área no queremos que tenga link se definirá con NOHREF.

IMG SRC también son conocidos: hacen que se visualice la imagen.

Y por fin, USEMAP nos dice qué mapa de coordenadas hay que aplicar a la imagen. A una misma imagen se le pueden aplicar distintos mapas si se desea. Fíjate en que nombre1, (el nombre del mapa) va precedido del símbolo #. Esto se debe a que, en este caso, el mapa al que se hace referencia está en la misma página que la instrucción IMG. Podría estar en otra, y en ese caso el símbolo tendría que estar después del nombre de la página. Por ejemplo: otrapagina.htm#nombre1

Como ya se ha dicho más arriba, hay tres figuras geométricas definibles para las áreas: rect, circle y poly. El rectángulo ya lo conocemos; consiste en parejas de coordenadas que indican los vértices superior izquierdo e inferior derecho respectivamente del área. Para el cículo (circ) son necesarios tres valores: x,y r donde x,y es el par de coordenas que indican el punto donde está el centro del cículo, y r es el radio del círculo medido en puntos. Para los polígonos (poly) se necesitan tantas parejas de coordenadas como vértices tenga el polígono, procurando que la última pareja quede unida a la primera, ya que la figura debe estar cerrada. No es obligatorio que sean figuras regulares. En el caso de que se quiera emplear todo el gráfico como área de enlace, es decir, un solo link, se puede emplear default, y no es necesario indicar ninguna coordenada.

Imágenes de fondo

<div style="background: url(yellow_r.gif);width: 200px; height: 200px;"> </div>

<body background="yellow_r.gif">

Algunos ejemplos de listas

<DL>
<DT><IMG SRC="bolaroja.gif">Linea de texto
<DT><IMG SRC="bolaroja.gif">Linea de texto
<DT><IMG SRC="bolaroja.gif">Linea de texto
</DL>

Introducción a los Formularios

Generalidades

¿Cómo funcionan los formularios?

Una vez terminada la captura de datos, estos forman un registro que es enviado a un servidor http (web) que lo procesará y devolverá una respuesta (o no). Pueden utilizarse también para enviar su contenido a una dirección de correo electrónico, o que simplemente abran otra página.

Si el formulario se diseña para abrir una página o para ser enviado por e-mail, todo se reduce a escribir HTML, pero la cosa se complica cuando se trata de transacciones de datos que hay que guardar en un servidor (comercio electrónico). En este caso, en el servidor tiene que haber un programa especial, creado específicamente para ese formulario, que reciba los datos y sepa qué hacer con ellos, procesarlos y confeccionar la respuesta que remitirá al navegadorr. A esa respuesta se le denomina documento virtual ya que esa página no está escrita en ninguna parte; es generada, enviada y destruida.

A los programas que hacen de puente entre el formulario y el servidor, se les llama programas CGI (Common Gateway Interface) y no hay que confundirlos con las páginas dinámicas escritas en ASP o PHP, aunque se parecen mucho.

Los programas CGI pueden estar escritos en cualquier lenguaje de programación que sea soportado por el sistema operativo del servidor, y pueden estar diseñados para cualquier función: desde una simple captura de datos que serán guardados en un fichero, hasta la más sofisticada consulta a una base de datos.

INFORMACION ADICIONAL

¿Cómo es un CGI?

Ejemplo de programa CGI (shell UNIX)

#!/bin/sh

echo Content-type: text/plain
echo

echo Test CGI. Se visualiza el contenido de las variables mas usuales
echo
echo numero de argumentos: $#. valor argumentos: "$*".
echo

echo SERVER_SOFTWARE      = $SERVER_SOFTWARE
echo SERVER_NAME          = $SERVER_NAME
echo GATEWAY_INTERFACE    = $GATEWAY_INTERFACE
echo SERVER_PROTOCOL      = $SERVER_PROTOCOL
echo SERVER_PORT          = $SERVER_PORT
echo REQUEST_METHOD       = $REQUEST_METHOD
echo HTTP_ACCEPT          = $HTTP_ACCEPT
echo PATH_INFO            = $PATH_INFO
echo PATH_TRANSLATED      = $PATH_TRANSLATED
echo SCRIPT_NAME          = $SCRIPT_NAME
echo QUERY_STRING         = $QUERY_STRING
echo REMOTE_HOST          = $REMOTE_HOST
echo REMOTE_ADDR          = $REMOTE_ADDR
echo REMOTE_USER          = $REMOTE_USER
echo REMOTE_IDENT         = $REMOTE_IDENT
echo AUTH_TYPE            = $AUTH_TYPE
echo CONTENT_TYPE         = $CONTENT_TYPE
echo CONTENT_LENGTH       = $CONTENT_LENGTH
echo HTTP_USER_AGENT      = $HTTP_USER_AGENT
echo HOME                 = $HOME
echo HTTP_FROM            = $HTTP_FROM
echo HTTP_REFERER         = $HTTP_REFERER
echo REFERER_URL          = $REFERER_URL

if [ "$CONTENT_TYPE" = "application/x-www-form-urlencoded" ]; then

read lo_que_viene
echo
echo ESTO VIENE POR  LA INPUT:
echo
echo $lo_que_viene

exit 0
else

echo NO VIENE NADA POR LA INPUT
exit 0
fi

Ejemplo de respuesta del programa test2-cgi al formulario prueba.htm

Test CGI. Se visualiza el contenido de las variables mas usuales

numero de argumentos: 0. valor argumentos: .

SERVER_SOFTWARE = NCSA/1.3
SERVER_NAME = miserver.midominio.mipais
GATEWAY_INTERFACE = CGI/1.1
SERVER_PROTOCOL = HTTP/1.0
SERVER_PORT = 80
REQUEST_METHOD = POST
HTTP_ACCEPT = image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*
PATH_INFO =
PATH_TRANSLATED =
SCRIPT_NAME = /cgi-bin/test2-cgi
QUERY_STRING =
REMOTE_HOST = mimaquina.misubdominio.midominio.mipais
REMOTE_ADDR = 255.255.255.255
REMOTE_USER =
REMOTE_IDENT = unknown
AUTH_TYPE =
CONTENT_TYPE = application/x-www-form-urlencoded
CONTENT_LENGTH = 52
HTTP_USER_AGENT = Mozilla/2.02 (Win95; I)
HOME =
HTTP_FROM =
HTTP_REFERER = http://sestud.uv.es/manual.esp/prueba.htm
REFERER_URL = ESTO VIENE POR LA INPUT:  CAMPO1=Esto+es+una&CAMPO2=demostracion+de+formularios 

Fíjate que las palabras aparecen separadas por el signo + y no por espacios como hemos escrito. Si además hubiéramos escrito algún carácter especial, no se vería como tal, sino su valor en hexadecimal precedido del carácter %. Por ejemplo, el cáracter & es transferido como %26. Esta conversión se hace para no confundirlo con el separador de campos, que como puedes ver es el mismo símbolo. El signo = después del nombre del campo, también lo pone el visualizador.

Todo esto y algunas cosas más (que habrá que ver en la documentación de referencia) han de tenerse presentes a la hora de realizar programas CGI. Para terminarlo de complicar, no todos los visualizadores utilizan la misma forma de enviar los datos recibidos, por lo que se plantea a menudo la necesidad de decidir para qué visualizador queremos programar nuestro WEB.

Los programas de test, como el del ejemplo, son muy útiles cuando se están diseñando formularios, ya que permiten comprobar de forma real su funcionamiento y analizar el registro que envían, cosa imprescindible para poder programar el correspondiente CGI. Intenta hacer uno a tu medida, o simplemente copia éste, instálalo en tu servidor http, (si no tienes acceso, pide a tu administrador de sistema que lo haga), empieza a probar... y buena suerte.

¿Cómo se escriben los formularios ?

• <INPUT>
  • Campos de entrada por teclado.
  • Botones de selección.
  • Casillas de marca.
  • Botones de proceso.
  • Botones de inicialización (reset).
  • Imágenes sensibles al ratón.
• <SELECT>
  • Listas desplegables de valores.
  • Listas fijas de valores.
• <TEXTAREA>
  • Ventanas de escritura libre.

Este sería el más elemental de los formularios, con sólo un campo y un botón de envío:

<FORM NAME="MI_FORMULARIO" METHOD="POST"
ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="submit" VALUE="Procesar"></FORM>

METHOD se refiere al método que emplearemos para enviar los datos al servidor, y pueden ser dos: POST y GET. El optar por uno u otro obedece a complejas cuestiones de programación basadas en la máxima longitud de registro que puede enviarse; cada uno usa un canal de salida distinto. El que soporta más longitud es POST, y será el que utilicemos en casi todos los ejemplos. Si el formulario solamente se utiliza para llamar a otras páginas, se utiliza el método GET, y si se trata de envio de datos POST. Echale un vistazo a la respuesta del programa test2-cgi de la página anterior. Fíjate en las variables QUERY_STRING e INPUT. Por la primera llegarán los datos cuando se utilice METHOD=GET y por la segunda cuando es POST el método elegido. ACTION se refiere a la acción que queremos que ejecute el formulario en un servidor http o en local. Con el valor del ejemplo ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi" se le está indicando que ejecute un programa llamado test2-cgi que está en el directorio /cgi-bin del servidor http miserver.midominio.mipais cuya respuesta será similar a la que hemos visto en la página de introducción a los formularios.

Además de enviar datos a un servidor, ACTION también puede realizar una acción en local, por ejemplo traer una página:

Se escribe:

<FORM METHOD="POST" ACTION="indice.htm">
......
</FORM>

Otra cosa que puede hacer ACTION, y que además tiene la ventaja de que no sería preciso diseñar un CGI, es enviar un e-mail (correo electrónico) a un usuario o a una lista de usuarios. Los datos enviados por el formulario, tendrán la forma que ya conocemos, pero una vez recibidos por esta vía, pueden ser tratados con programas de edición de texto, y convertidos al formato que se quiera. Se escribe:

<FORM METHOD="POST" ACTION="mailto:mi-usuario@miservidor-e-mail">
......
</FORM>

<FORM METHOD="POST" ACTION="mailto:mi-usuario@miservidor-e-mail"
ENCTYPE="TEXT/PLAIN">
......
</FORM>

CAMPO1=Esto+es+una&CAMPO2=demostracion+de+formularios

y poniendo ENCTYPE="TEXT/PLAIN" así:

CAMPO1=Esto es una

CAMPO2=demostracion de formularios

Al igual que con el elemento <A> es posible hacer que el asunto (subject) del e-mail se reciba con el texto que quieras, pero omitiendo la parte correspondiente al cuerpo (body) del mismo, ya que en este caso el contenido del e-mail son los campos del formulario: <FORM METHOD="POST" ACTION=

"mailto:mi-usuario@miservidor-e-mail?&subject=asunto de prueba"
ENCTYPE="TEXT/PLAIN">
......
</FORM>

El elemento INPUT

<FORM> <INPUT> </FORM>

SIZE define la longitud de la ventana de texto.

<FORM> <INPUT SIZE=10 MAXLENGTH=10 NAME="campo1"></FORM>

<FORM> <INPUT VALUE="HOLA"> </FORM>

<FORM> <INPUT VALUE="HOLA" READONLY> </FORM>

<FORM> <INPUT TYPE="PASSWORD" VALUE="HOLA"> </FORM>

<FORM> <INPUT TYPE="HIDDEN" VALUE="HOLA"> </FORM>

Esta opción se utiliza cuando es necesario enviar un valor fijo al servidor,
pero no se desea que el usuario intervenga o que lo vea. CUIDADO, esto no es un formato
encriptado, viendo el documento fuente se puede saber el valor de la ventana.

<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="SUBMIT" VALUE="Procesar"></FORM>

Existe otro tipo llamado TYPE=BUTTON que genera un botón igual al generado por el tipo submit, pero que no realiza ninguna acción; es simplemente un botón "muerto" en cuanto a acciones directas. Suele utilizarse para asociarle instrucciones en JavaScript o VBScript mediante el evento onClick.

<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="BUTTON" VALUE="No hace nada"></FORM>

<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="RESET" VALUE="Inicializar"></FORM>

  <FORM enctype="multipart/form-data"
ACTION="ftp://miservidor/" METHOD="POST">
Enviar el fichero:
<INPUT NAME="mifichero" TYPE="FILE">
<INPUT TYPE="SUBMIT" VALUE="Enviar fichero"></FORM>

En este ejemplo se haría una conexión al servicio FTP general de la máquina remota, pero se puede hacer a un directorio en particular de un usuario concreto. Sólo habría que cambiar la línea

  ACTION="ftp://miservidor/" METHOD="POST">

  ACTION="ftp://miusuario@miservidor/" METHOD="POST">

Por supuesto, todo esto si no tienes cuenta y permiso de escritura en la máquina remota, no sirve para nada...

Como ya se ha dicho antes, el atributo ACTION es capaz de enviar el contenido del formulario por correo electrónico, pero no sólo es capaz de enviar el formulario: también puede adjuntar al e-mail un fichero cualquiera. Lo único que hay que hacer es añadirle un instrucción como la que acabamos de ver para el FTP. Así:

  <FORM enctype="multipart/form-data"
ACTION="mailto:mi-usuario@miservidor-e-mail/" METHOD="POST">
Adjuntar el fichero:
<INPUT NAME="mifichero" TYPE="FILE">
<INPUT TYPE="SUBMIT" VALUE="Adjuntar fichero"></FORM>

     imagen.x=99&imagen.y=15

<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT TYPE=IMAGE NAME="imagen" SRC="sugeren.gif">
</FORM>

<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
Clase A
<INPUT TYPE="RADIO" NAME="clase" VALUE="A">
Clase B
<INPUT TYPE="RADIO" NAME="clase" VALUE="B"></form>

       ... VALUE="B" CHECKED></form>

<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
Clase A
<INPUT TYPE="CHECKBOX" NAME="clase" VALUE="A">
Clase B
<INPUT TYPE="CHECKBOX" NAME="clase" VALUE="B"></form>

       ... VALUE="B" CHECKED></form>

El elemento SELECT

<FORM> <SELECT> </SELECT>  </FORM>

<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">

<SELECT NAME="lista1">
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
</SELECT>
</FORM>

La longitud de la ventana de selección se autoajusta al valor más largo de la lista. La ventana de selección, por defecto, muestra una línea, si se quieren mostrar más se utilizará el atributo SIZE. Se debe procurar que los contenidos de los campos sean lo más cortos posibles; una excesiva longitud implica mayor tráfico por la red, pero se deben construir las listas de forma clara, y que resulten de fácil lectura al usuario, lo que puede aumentar la longitud de los valores. Para enviar un valor diferente del que aparece en la lista, se utiliza el parámetro VALUE asociado al atributo OPTION. Prueba con el valor 5 de la siguiente lista:

<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">

<SELECT NAME="lista1" SIZE=3>
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
<OPTION>Valor 4
<OPTION VALUE="Valor 5">Este es el Valor 5
<OPTION>Valor 6
<OPTION>Valor 7
</SELECT>
</FORM>

Con las listas desplegables es obligatorio seleccionar siempre un valor, y si no hay ninguno seleccionado, por defecto el visualizador enviará el primer valor de la lista.

Se puede hacer que haya un valor preseleccionado añadiendo el parámetro SELECTED al atributo OPTION, y si se quiere permitir más de una selección, se pondrá el atributo MULTIPLE al elemento SELECT. Para seleccionar y deseleccionar hay que atenerse a las normas de Windows.

<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">

<SELECT NAME="lista1" MULTIPLE SIZE=3>
<OPTION>Valor 1
<OPTION SELECTED>Valor 2
<OPTION>Valor 3
<OPTION>Valor 4
<OPTION>Valor 5
<OPTION>Valor 6
<OPTION>Valor 7
</SELECT>
</FORM>

Ninguno Rolls Royce Ferrari Mercedes Renault Peugeot Seat

Y se escribe:

<select name="coches">
 <option selected value="0">Ninguno
 <optgroup label="Coches de lujo">
    <option value="1">Rolls Royce
    <option value="2">Ferrari
    <option value="3">Mercedes
 </optgroup>
 <optgroup label="Coches normales">
    <option value="4">Renault
    <option value="5">Peugeot
    <option value="6">Seat
 </optgroup>
</select>

El elemento TEXTAREA

<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">

<TEXTAREA NAME="texto1" ROWS=5 COLS=40 ></TEXTAREA>
</FORM>

Aunque no es habitual, dentro de un área de texto puede haber un contenido por defecto (que puede ser borrado o modificado por el usuario). Para ello simplemente se escribirá el texto entre <TEXTAREA> y </TEXTAREA>. Así:

<TEXTAREA NAME="texto1" ROWS=5 COLS=40>
Contenido del area de texto
</TEXTAREA>

Se puede proceder a la descodificación en el programa CGI que recibe los datos, o bien definir macros en programas auxiliares que serán ejecutados después. En el índice encontrarás la tabla de conversiones utilizada con el visualizador Netscape desde Windows.