Todo LenguajeHTML

Instituto Tecnológico de OrizabaHerramientas para desarrollo Web

Lenguaje HTML

¿Qué es la World Wide Web?

La World Wide Web (Web), en castellano "Tejido Mundial", es una red de recursos de información. La Web se basa en tres mecanismos para hacer que estos recursos estén listos y a disposición de la mayor audiencia posible:

Un esquema uniforme de nombres para localizar recursos en la Web (p.ej., URIs).

Protocolos, para acceder a recursos con nombre en la Web (p.ej., HTTP). Hipertexto, para navegar fácilmente entre recursos (p.ej., HTML).

Las relaciones entre los tres mecanismos son evidentes a todo lo largo de esta especificación.

Introducción a los URIs

Todos los recursos disponibles en la Web -- documentos HTML, imágenes, videoclips, programas, etc. -- tienen una dirección que puede ser codificada mediante unUniversal Resource Identifier, o "URI", es decir, un Identificador Universal de Recursos. Los URIs se componen normalmente de tres partes:

El esquema de nombres del mecanismo usado para acceder al recurso. El nombre de la máquina que aloja el recurso. El nombre en sí del recurso, dado en forma de "path" o "ruta de acceso".

Consideremos el URI que designa la página de Informes Técnicos del W3C:

http://www.w3.org/TR

Este URI puede leerse de la siguiente manera: Hay un documento disponible a través del protocolo HTTP (ver [RFC2616]), que se encuentra en la máquina www.w3.org, accesible a través de la ruta "/TR". Entre otros esquemas que pueden encontrarse en documentos HTML se incluyen "mailto" para correo electrónico y "ftp" para FTP.

Aquí tenemos otro ejemplo de URI. Éste se refiere al buzón de correo electrónico de un usuario:

...aquí va texto... Para cualquier comentario, envíe un mensaje a <A href="mailto:[email protected]">Jose Chévere</A>.

1

http://html.conclase.net/w3c/html401-es/references.html#ref-RFC2616


Nota. La mayoría de los lectores estará familiarizado con el término "URL" y no con el término "URI". Los URLs forman un subconjunto del esquema de nombres URI, que es más general.

¿Qué es HTML?

Definiéndolo de forma sencilla, "HTML es lo que se utiliza para crear todas las páginas web de Internet". Más concretamente, HTML es el lenguaje con el que se "escriben" la mayoría de páginas web.

Los diseñadores utilizan el lenguaje HTML para crear sus páginas web, los programas que utilizan los diseñadores generan páginas escritas en HTML y los navegadores que utilizamos los usuarios muestran las páginas web después de leer su contenido HTML.

Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de diseño, es muy fácil de aprender y escribir por parte de las personas. En realidad, HTML son las siglas de HyperText Markup Language.

El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un organismo sin ánimo de lucro llamado World Wide Web Consortium, más conocido como W3C. Como se trata de un estándar reconocido por todas las empresas relacionadas con el mundo de Internet, una misma página HTML se visualiza de forma muy similar en cualquier navegador de cualquier sistema operativo.

El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite publicar información de forma global". Desde su creación, el lenguaje HTML ha pasado de ser un lenguaje utilizado exclusivamente para crear documentos electrónicos a ser un lenguaje que se utiliza en muchas aplicaciones electrónicas como buscadores, tiendas online y banca electrónica.

Historia de HTML

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos.

Los sistemas de "hipertexto" habían sido desarrollados años antes. En el ámbito de la informática, el "hipertexto" permitía que los usuarios accedieran a la información relacionada con los documentos electrónicos que estaban

2


visualizando. De cierta manera, los primitivos sistemas de "hipertexto" podrían asimilarse a los enlaces de las páginas web actuales.

Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo presentó a una convocatoria organizada para desarrollar un sistema de "hipertexto" para Internet. Después de unir sus fuerzas con el ingeniero de sistemas Robert Cailliau, presentaron la propuesta ganadora llamada WorldWideWeb (W3).

El primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre "HTML Tags" (Etiquetas HTML) y todavía hoy puede ser consultado online a modo de reliquia informática.

La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por parte del organismo IETF (Internet Engineering Task Force). Aunque se consiguieron avances significativos (en esta época se definieron las etiquetas para imágenes, tablas y formularios) ninguna de las dos propuestas de estándar, llamadas HTML y HTML+ consiguieron convertirse en estándar oficial.

En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar, el 22 de septiembre de ese mismo año, el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML.

A partir de 1996, los estándares de HTML los publica otro organismo de estandarización llamado W3C (World Wide Web Consortium). La versión HTML 3.2 se publicó el 14 de Enero de 1997 y es la primera recomendación de HTML publicada por el W3C. Esta revisión incorpora los últimos avances de las páginas web desarrolladas hasta 1996, como applets de Java y texto que fluye alrededor de las imágenes.

HTML 4.0 se publicó el 24 de Abril de 1998 (siendo una versión corregida de la publicación original del 18 de Diciembre de 1997) y supone un gran salto desde las versiones anteriores. Entre sus novedades más destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios.La última especificación oficial de HTML se publicó el 24 de diciembre de 1999 y se denomina HTML 4.01. Se trata de una revisión y actualización de la versión HTML 4.0, por lo que no incluye novedades significativas.

Desde la publicación de HTML 4.01, la actividad de estandarización de HTML se detuvo y el W3C se centró en el desarrollo del estándar XHTML. Por este motivo, en el año 2004, las empresas Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en HTML y decidieron organizarse en una nueva asociación llamada WHATWG (Web Hypertext Application Technology Working Group).

3

http://www.whatwg.org/

http://www.w3.org/

http://www.ietf.org/

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html


La actividad actual del WHATWG se centra en el futuro estándar HTML 5, cuyo primer borrador oficial se publicó el 22 de enero de 2008. Debido a la fuerza de las empresas que forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, en marzo de 2007 el W3C decidió retomar la actividad estandarizadora de HTML.

De forma paralela a su actividad con HTML, W3C ha continuado con la estandarización de XHTML, una versión avanzada de HTML y basada en XML.

La primera versión de XHTML se denomina XHTML 1.0 y se publicó el 26 de Enero de 2000 (y posteriormente se revisó el 1 de Agosto de 2002).

XHTML 1.0 es una adaptación de HTML 4.01 al lenguaje XML, por lo que mantiene casi todas sus etiquetas y características, pero añade algunas restricciones y elementos propios de XML. La versión XHTML 1.1 ya ha sido publicada en forma de borrador y pretende modularizar XHTML. También ha sido publicado el borrador de XHTML 2.0, que supondrá un cambio muy importante respecto de las anteriores versiones de XHTML.

Especificación oficial

El organismo W3C (World Wide Web Consortium) elabora las normas que deben seguir los diseñadores de páginas web para crear las páginas HTML. Las normas oficiales están escritas en inglés y se pueden consultar de forma gratuita en las siguientes direcciones:

Especificación oficial de HTML 4.01 Especificación oficial de XHTML 1.0

El estándar XHTML 1.0 incluye el 95% del estándar HTML 4.01, ya que sólo añade pequeñas mejoras y modificaciones menores. Afortunadamente, no es necesario leer las especificaciones y recomendaciones oficiales de HTML para aprender a diseñar páginas con HTML o XHTML. Las normas oficiales están escritas con un lenguaje bastante formal y algunas secciones son difíciles de comprender. Por ello, en los próximos capítulos se explica de forma sencilla y con decenas de ejemplos la especificación oficial de XHTML.

4

http://www.w3.org/TR/xhtml1/

http://www.w3.org/TR/html401/

http://www.w3.org/

http://www.w3.org/2007/03/html-pressrelease

http://www.w3.org/2007/03/html-pressrelease

http://www.w3.org/TR/html5/


HTML y XHTML

El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es más que una adaptación de HTML al lenguaje XML. Técnicamente, HTML es descendiente directo del lenguaje SGML (Standard Generalized Markup Language), mientras que XHTML lo es del XML (que a su vez, también es descendiente de SGML).

Esquema de la evolución de HTML y XHTML

Las páginas y documentos creados con XHTML son muy similares a las páginas y documentos HTML. Las discusiones sobre si HTML es mejor que XHTML o viceversa son recurrentes en el ámbito de la creación de contenidos web, aunque no existe una conclusión ampliamente aceptada.

Actualmente, entre HTML 4.01 y XHTML 1.0, la mayoría de diseñadores escogen XHTML. En un futuro cercano, si los diseñadores deben elegir entre HTML 5 y XHTML 1.1 o XHTML 2.0, quizás la elección sea diferente.

HTML y CSS

Originalmente, las páginas HTML sólo incluían información sobre sus contenidos de texto e imagenes. Con el desarrollo del estándar HTML, las páginas empezaron a incluir también información sobre el aspecto de sus contenidos: tipos de letra, colores y márgenes.

5


La posterior aparición de tecnologías como JavaScript, provocaron que las páginas HTML también incluyeran el código de las aplicaciones (llamadas scripts) que se utilizan para crear páginas web dinámicas.

Incluir en una misma página HTML los contenidos, el diseño y la programación complica en exceso su mantenimiento. Normalmente, los contenidos y el diseño de la página web son responsabilidad de diferentes personas, por lo que es conveniente separarlos.

CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML y el aspecto que deben presentar esos contenidos:

Esquema de la separación de los contenidos y su presentación

Una ventaja añadida de la separación de los contenidos y su presentación es que los documentos XHTML creados son más flexibles, ya que se adaptan mejor a las diferentes plataformas: pantallas de ordenador, pantallas de dispositivos móviles, impresoras y dispositivos utilizados por personas discapacitadas.

De esta forma, utilizando exclusivamente XHTML se crean páginas web "feas" pero correctas. Aplicando CSS, se pueden crear páginas "bonitas" a partir de las páginas XHTML correctas.

6

Estructura de una página HTML

Las páginas HTML están estructuradas en tres partes diferenciadas:

<!Tipo de documeto> la HEAD (cabecera) y el BODY (cuerpo).

Ejemplo de página

<!Tipo de documento><HTML><HEAD><TITLE> Documento de prueba </TITLE></HEAD>



<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 se escribe 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">

7

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

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 se deben escribir comentarios con claves de acceso o datos confidenciales.

8


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 información acerca del documento, y generalmente no se ve cuando se navega por él.

En la HEAD se pone el elemento <TITLE> :

que es una breve descripción que identifica la página. 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.

También lo guarda en su caché, y servirá para mostrar la página, 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.

<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 página activa al cabo de 10 segundos. También 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>

Utilizar esto con precaución. Si se sabe que el contenido de la página no va a cambiar, es inútil hacer esto, y si se hace contra un servidor, se puede sobrecargar. Este elemento, sólo tendrá utilidad en casos muy especiales.

9


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>

Si se pone una fecha ya pasada, como la que hay en el ejemplo, el navegador elimina inmediatamente de la caché la página recibida, y si no es pasada, lo hará en el momento indicado por la misma. También se le puede dar valor cero a la fecha de expiración:

<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 </TITLE><META HTTP-EQUIV="Expires" CONTENT="no-cache"></HEAD>

Si se tiene interés en que las páginas aparezcan en los grandes buscadores de Internet, y puedan ser encontradas con facilidad, se pueden 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 la página:

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

Se pueden poner todos los elementos <META> que se crean necesarios, pero sin repetirlos.

10


Todos los navegadores, por defecto, siempre que reciben una página de un servidor se hacen una copia de la misma en el disco de la máquina. Con esto se pretende que si se vuelve a solicitar la misma página, en lugar de pedirla de nuevo al servidor, se mostrará la que tiene guardada en el disco. A esta área del disco donde el navegador va poniendo las páginas visitadas, se le denomina caché. El tamaño de la caché se puede modificar desde las opciones de configuración del navegador, e incluso se puede dar tamaño cero, con lo que siempre que se vea una página, ésta habrá sido solicitada al servidor independientemente de lo que digan las instrucciones META.

11


Cuerpo (BODY) de un documento

El cuerpo (BODY) es la segunda y última de las dos partes en que se estructura un documento HTML.

Por supuesto es obligatoria, ya que es aquí donde reside el verdadero contenido de la página, y por tanto, al contrario de la HEAD sí se ve cuando navegamos por ella.

Se escibirá asi:

<BODY>

texto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto texto

</BODY>

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 Explorer, utiliza uno para cada cual:

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

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

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

12


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






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

13


Por ejemplo: si se escribe

<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 se pudiera esperar. Este elemento admite un parámetro de alineación. Así, si se escribe:

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

Texto en H3

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

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

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

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

Dará como resultado:

AAAAAAAAA

Se puede cambiar el tamaño por defecto (3) de toda la página con el elemento <BASEFONT SIZE=valor>.

El texto tomará el tamaño indicado por valor y lo mantendrá hasta que aparezca otro elemento <BASEFONT SIZE=valor> y lo restaure o lo cambie por otro diferente.

Tanto si se ha establecido un valor base como si se utiliza el valor por defecto, los tamaños también pueden indicarse de forma relativa, por lo que el valor puede ser positivo (+) o negativo (-) respecto al tamaño base.

14


Por ejemplo estos dos valores dan el mismo resultado:

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

ABcdeABcde

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

Si se escribe

<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 ARIALTexto de prueba 12345 con tipo TIMES NEW ROMANTexto de prueba 12345 con tipo COURIER NEWTexto de prueba 12345 con tipo COURIERTexto de prueba 12345 con tipo ROMANTexto de prueba 12345 con tipo VERDANATexto de prueba 12345 con tipo SMALL FONTS

Este atributo es compatible con todos los demás ya conocidos, como color y tamaño. Por ejemplo, si se escribe :

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

Se verá:

15


Texto de prueba 12345 con tipo IMPACT

Se pueden hacer todas la combinaciones que se quieran, pero hay que tener presente que si en la máquina cliente no está instalada una determinada fuente, ésta no se verá y en su lugar aparecerá la fuente por defecto del visualizador.

No es interesante por tanto, definir tipos raros, que probablemente, no llegarán a verse nunca.

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

Así:

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

Se verá:

Texto de prueba 12345 con tipos alternativos

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

Texto en color

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

Si se escribe:

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

16


<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

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

<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

17


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.

Las distintas definiciones de los bloques. Separadores.

Si se analiza una página cualquiera se vera 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.

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


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








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.

18


Por ejemplo, si se escribe: <H1> Texto en H1 </H1> <H3> Texto en H3 </H3>

se verá:

Texto en H1

Texto en H3

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

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

Texto en H3

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

Se escribirá así:

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

Y este sería el resultado:

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

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

Como puede verse, hay una línea en blanco entre los dos bloques. Si no se quiere dejar esa línea vacía entre los dos párrafos puede utilizarse el elemento

19


<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


<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 3Texto 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 4Texto 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 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

20


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

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

Se escribe así:

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

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

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

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

texto2 texto2 texto2 texto2 texto2 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3

texto3 texto3 texto3 texto3 texto3

Como se puede 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

21


bloques especiales definidos con instrucciones de estilo (bordes, tamaño, situación, alineación, color, etc., etc.)

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

Se escribe así:

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

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

Se escribirá así:

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

Y este sería el resultado:

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

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

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

22


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

Por ejemplo, si se escribe:

<HR WIDTH=400 SIZE=5>

El resultado será:

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

<HR WIDTH=80% SIZE=5>

El resultado será:

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

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

El resultado será:

O bien:

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

El resultado será:

23


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

Si se escribe:

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

Se obtiene:

Esto es una prueba de enmarcado

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

Si se escribe:

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

Se obtiene:

Esto es una etiqueta Esto es una prueba de enmarcado

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

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

Se obtiene:

Esto es una etiqueta

24


Esto es una prueba de enmarcado

Si en estos ejemplos no se ve el recuadro o la etiqueta no está donde debiera, es porque no se tiene una versión de navegador adecuada. Por supuesto, dentro del recuadro generado por <FIELDSET> se puede poner cualquier cosa: formularios, imágenes, texto, etc.

Textos preformateados

Cuando se escribe un texto con un editor, a la hora de ver lo hecho con el visualizador, algunas cosas no están como se pusieron... Como por ejemplo poner dos o tres espacios en blanco entre palabras, o intentar encolumnar los datos de una pequeña tabla: ¡acaba todo junto y en la misma línea!

Este efecto se puede eliminar con el elemento <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 se utiliza 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", y los no preformateados en "Times New Roman". Estos tipos son configurables en el visualizador.

Se escribirá así:

<PRE>

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

8 9 10 11 12 13 14 texto preformateado.

15 16 17 18 19 20 21

</PRE>


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

8 9 10 11 12 13 14 texto preformateado.

15 16 17 18 19 20 21

Dentro de un bloque preformateado también se pueden poner links a otros documentos y codificación para caracteres especiales.

25


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

Se escribe: y como alias se utiliza:

Por ejemplo, si se escribe: texto texto texto texto

Se ve así:

texto texto texto texto

Otros efectos en el texto

Una o varias líneas de texto, pueden estar centradas respecto a los márgenes de la ventana. Esto afecta sólo al texto que hay entre <CENTER> y </CENTER>, pero no a todo el párrafo. 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 centradotexto texto texto texto texto texto texto texto texto txto texto texto texto texto texto texto texto

Esto, además , se puede aplicar a una tabla, una imagen o cualquier otra cosa.

Quedan algunos otros elementos que modifican el aspecto del texto.

Texto en negrita: <B>Texto en negrita</B>

26


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índiceTexto normal <SUP>Texto Superíndice</SUP>

Texto subíndiceTexto nomal <SUB>Texto Subíndice</SUB>

Texto grande <BIG>Texto grande</BIG>

Texto pequeño <SMALL>Texto pequeño</SMALL>

En los navegadores de última generación se ha implementado un efecto que permite incluir explicaciones ocultas que aparecen al pasar el ratón por encima (sin pulsar), pero sin cambiar de página ni abrir ninguna ventana nueva.

Por ejemplo, si se escribe:

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

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

27


Listas y menús

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 definición <DL>.

Esto es una lista ordenada (numerada): 1. Primera linea 2. Segunda linea

Se escribe:

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

Fijarse 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

28


</UL>

En este caso los números 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 Primera linea o segunda linea

Se escribe:

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

También 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 sólo se pueden ordenar con números. También se pueden utilizar letras y numeración romana tanto en mayúsculas como minúsculas.

Para esto se utiliza el atributo TYPE del elemento <OL> con los siguientes valores: TYPE=1 (por defecto) para números, TYPE=A para letras mayúsculas, TYPE=a para letras minúsculas, TYPE=I para numeración romana en mayúsculas y TYPE=i para numeración romana en minúsculas.

Esto es una lista ordenada con letras mayúsculas: A. Primera linea B. Segunda linea C. Tercera linea D. Cuarta linea

Se escribe:

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

29


</OL>

Esto es una lista ordenada con letras minúsculas: a. Primera linea b. Segunda linea c. Tercera linea d. 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 numeración romana en mayúsculas: I. Primera linea

II. Segunda linea III. Tercera linea IV. 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 numeración romana en minúsculas: i. Primera linea

ii. Segunda linea iii. Tercera linea iv. Cuarta linea

Se escribe:

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

30


</OL>

En algunos casos puede interesar que la lista no comience por el número 1 (por ejemplo si es una lista que continua en otra página). Se puede conseguir con el atributo START combinado con TYPE.

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

Se escribe:

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

El número que se pone en el atributo START indica en que número 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 líneas en la lista desordenada comienzan en el margen izquierdo y las del menú unas posiciones más a la derecha (aunque eso depende del visualizador, con Netscape se ven igual).

31


Esto es un directorio:


Se escribe:

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

Esto es una lista de definicion:


Se escribe:

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

Fijarse que ahora en lugar del elemento <LI> se utiliza <DT> y <DD>, y como tipo <DL>. Estos tres nuevos elementos también se pueden usar con cualquiera de los anteriores tipos de lista, alterando por completo su apariencia.

32


Ejemplos de listas y menús

Desordenadas

Desordenada simple con marcas Linea de texto 1 Linea de texto 2 Linea de texto 3

Se escribe: <UL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3</UL>

Desordenada simple sin marcas. Comienzo en margen izquierdo Linea de texto 1 Linea de texto 2 Linea de texto 3 Se escribe: <DL> <DT>Linea de texto 1 <DT>Linea de texto 2 <DT>Linea de texto 3</DL>

Desordenada simple sin marcas. Comienzo una posición a la derecha Linea de texto 1 Linea de texto 2 Linea de texto 3

Se escribe: <UL> <DT>Linea de texto 1 <DT>Linea de texto 2 <DT>Linea de texto 3</UL>

Desordenada simple con marcas. Comienzo una posición a la derecha Linea de texto 1 Linea de texto 2 Linea de texto 3

Se escribe: <UL> <LI>Linea de texto 1

33


<LI>Linea de texto 2 <LI>Linea de texto 3</UL>

Desordenada simple sin marcas. Comienzo dos posiciones a la derecha Linea de texto 1 Linea de texto 2 Linea de texto 3

Se escribe: <UL> <DD>Linea de texto 1 <DD>Linea de texto 2 <DD>Linea de texto 3</UL>

Desordenada simple sin marcas. Comienzo tres posiciones a la derecha Linea de texto 1 Linea de texto 2 Linea de texto 3

Se escribe: <UL> <UL> <DD>Linea de texto 1 <DD>Linea de texto 2 <DD>Linea de texto 3 </UL></UL>

Desordenada simple con marcas. Comienzo dos posiciones a la derecha o Linea de texto 1 o Linea de texto 2 o Linea de texto 3

Se escribe: <UL> <UL TYPE=DISC> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 </UL></UL>

Desordenada con 4 niveles sin marcas Linea de texto 1 Linea de texto 2 Linea de texto 3 Linea de texto 3.1 Linea de texto 3.2 Linea de texto 3.2.1 Linea de texto 3.2.2

34


Linea de texto 3.2.2.1 Linea de texto 3.2.2.2 Linea 4 de texto Se escribe: <DL> <DT>Linea de texto 1 <DT>Linea de texto 2 <DT>Linea de texto 3 <DL> <DT>Linea de texto 3.1 <DT>Linea de texto 3.2 <DL> <DT>Linea de texto 3.2.1 <DT>Linea de texto 3.2.2 <DL> <DT>Linea de texto 3.2.2.1 <DT>Linea de texto 3.2.2.2 </DL> </DL> </DL> <DT>Linea 4 de texto </DL>

Desordenada con 4 niveles con marcas Linea de texto 1 Linea de texto 2 Linea de texto 3

o Linea de texto 3.1 o Linea de texto 3.2

Linea de texto 3.2.1 Linea de texto 3.2.2

Linea de texto 3.2.2.1 Linea de texto 3.2.2.2

Linea 4 de texto

Se escribe: <UL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 <UL> <LI>Linea de texto 3.1 <LI>Linea de texto 3.2 <UL> <LI>Linea de texto 3.2.1 <LI>Linea de texto 3.2.2 <UL> <LI>Linea de texto 3.2.2.1 <LI>Linea de texto 3.2.2.2 </UL> </UL>

35


</UL> <LI>Linea 4 de texto </UL>

Ordenadas

Ordenada simple 1. Linea de texto 1 2. Linea de texto 2 3. Linea de texto 3

Se escribe: <OL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3</OL>

Ordenada con 4 niveles, todos ordenados 1. Linea de texto 1 2. Linea de texto 2 3. Linea de texto 3

1. Linea de texto 3.1 2. Linea de texto 3.2

1. Linea de texto 3.2.1 2. Linea de texto 3.2.2

1. Linea de texto 3.2.2.1 2. Linea de texto 3.2.2.2

4. Linea de texto 4

Se escribe: <OL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 <OL> <LI>Linea de texto 3.1 <LI>Linea de texto 3.2 <OL> <LI>Linea de texto 3.2.1 <LI>Linea de texto 3.2.2 <OL> <LI>Linea de texto 3.2.2.1 <LI>Linea de texto 3.2.2.2 </OL> </OL> </OL>

<LI>Linea de texto 4

36


</OL>

Ordenada con 4 niveles, todos ordenados. Numeración romana en mayúsculas y minúsculas

I. Linea de texto 1 II. Linea de texto 2

III. Linea de texto 3 i. Linea de texto 3.1

ii. Linea de texto 3.2 i. Linea de texto 3.2.1

ii. Linea de texto 3.2.2 i. Linea de texto 3.2.2.1

ii. Linea de texto 3.2.2.2 IV. Linea de texto 4

Se escribe: <OL TYPE=I> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 <OL TYPE=i> <LI>Linea de texto 3.1 <LI>Linea de texto 3.2 <OL TYPE=i> <LI>Linea de texto 3.2.1 <LI>Linea de texto 3.2.2 <OL TYPE=i> <LI>Linea de texto 3.2.2.1 <LI>Linea de texto 3.2.2.2 </OL> </OL> </OL>

<LI>Linea de texto 4</OL>

Ordenada con 4 niveles, 2 desordenados con marcas 1. Linea de texto 1 2. Linea de texto 2 3. Linea de texto 3


Linea de texto 3.2.1 Linea de texto 3.2.2

Linea de texto 3.2.2.1 Linea de texto 3.2.2.2

4. Linea de texto 4

Se escribe: <OL>

37


<LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 <OL> <LI>Linea de texto 3.1 <LI>Linea de texto 3.2 <UL TYPE=SQUARE> <LI>Linea de texto 3.2.1 <LI>Linea de texto 3.2.2 <UL TYPE=CIRCLE> <LI>Linea de texto 3.2.2.1 <LI>Linea de texto 3.2.2.2 </UL> </UL> </OL> <LI>Linea de texto 4</OL>

Ordenada con 4 niveles, 2 desordenados sin marcas 1. Linea de texto 1 2. Linea de texto 2 3. Linea de texto 3


Linea de texto 3.2.1 Linea de texto 3.2.2 Linea de texto 3.2.2.1 Linea de texto 3.2.2.2

4. Linea de texto 4

Se escribe: <OL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 <OL> <LI>Linea de texto 3.1 <LI>Linea de texto 3.2 <DL> <DD>Linea de texto 3.2.1 <DD>Linea de texto 3.2.2 <DL> <DD>Linea de texto 3.2.2.1 <DD>Linea de texto 3.2.2.2 </DL> </DL> </OL> <LI>Linea de texto 4</OL>

38


Tablas.

Las tablas son sin duda uno de los elementos más potentes del HTML. Con pocos elementos se pueden conseguir efectos espectaculares.

39


En el interior de las celdas de una tabla, que pueden ser con borde visible o invisible, se puede poner cualquier cosa: texto de cualquier tamaño y color, imágenes, links...

Por supuesto, además de permitir cualquier contenido, tienen sus propios atributos de alineación tanto horizontal como vertical, y atributos de dimensionado.

Por defecto se autodimensionan, es decir, se adaptan en tamaño a su contenido, pero también es posible definirlo de forma fija. Las tablas han sido utilizadas largo tiempo para maquetar el contenido de las páginas, y aunque las nuevas tendencias aconsejen hacer esto con bloques (capas XHTML), no es un elemento que vaya a desaparecer, y es mucho más sencillo de utilizar.

El elemento básico de definición de tabla es <TABLE> </TABLE> y en su interior se disponen los sub elementos <TR> para definir una fila (Row) <TH> para definir una cabecera (Header) <TD> para definir una celda de datos (Data).

Estos sub elementos también han de llevar sus correspondientes cierres: </TR> </TH> </TD>.

Una cabecera <TH> es lo mismo que una celda de datos <TD> pero de forma automática el texto de su contenido recibe los atributos de negrita y centrado. Sólo es posible definirlas al principio de las filas, de las columnas o de ambas a la vez. He aquí una tabla-resumen de los elementos utilizados y los atributos que admite cada uno:

TABLE TR TD TH CAPTION

BORDER X - - - -

BORDERCOLOR X - - - -

ROWSPAN - - X X -

COLSPAN - - X X -

ALIGN - X X X X

VALIGN - - X - -

WIDTH X - X - -

HEIGTH X - X - -

CELLPADDING X - - - -

CELLSPACING X - - - -

NOWRAP - - X - -

EVENTS X X X X -

40


Resumen de tablas

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:

41


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)

Y este otro sirve para definir qué bordes de la tabla serán visibles:

<TABLE RULES="valor"> ... </TABLE> donde valor puede ser: 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.

Estos últimos atributos no funcionan igual en todos los navegadores, y no funcionan en absoluto si no son de la última generación. Según el navegador de que se trate, puede que haya que combinar más de un atributo para conseguir el efecto deseado. Lo mejor es hacer pruebas con algunas versiones para asegurarse.

Ejemplos de tablas

Tabla básica de 3x2

A B C

D E F

<TABLE BORDER><TR>

<TD>A</TD> <TD>B</TD> <TD>C</TD></TR><TR>

<TD>D</TD> <TD>E</TD> <TD>F</TD></TR>

</TABLE>

Dos ejemplos de línea expandida <ROWSPAN>

Item 1Item 2

Item 3

Item 4 Item 5<TABLE BORDER>

<TR>

42


<TD>Item 1</TD><TD ROWSPAN=2>Item 2</TD><TD>Item 3</TD>

</TR><TR>

<TD>Item 4</TD> <TD>Item 5</TD></TR>

</TABLE>

Item 1Item 2 Item 3 Item 4

Item 5 Item 6 Item 7<TABLE BORDER>

<TR><TD ROWSPAN=2>Item 1</TD>

<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD></TR><TR>

<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD></TR>

</TABLE>

Ejemplo de columna expandida <COLSPAN>

Item 1 Item 2

Item 3 Item 4 Item 5<TABLE BORDER>

<TR><TD>Item 1</TD><TD COLSPAN=2>Item 2</TD>

</TR><TR>

<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD></TR>

</TABLE>

Tabla con cabeceras <TH>

Head1 Head2 Head3

A B C

D E F<TABLE BORDER>

<TR><TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>

</TR><TR>



</TABLE>

Combinación de columna expandida y cabecera

43


Head1 Head2

A B C D

E F G H<TABLE BORDER>

<TR><TH COLSPAN=2>Head1</TH>

<TH COLSPAN=2>Head2</TH></TR><TR>

<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> </TR><TR>

<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> </TR>

</TABLE>

Combinación de cabeceras múltiples y columnas expandidas

Head1 Head2

Head 3 Head 4 Head 5 Head 6

A B C D

E F G H<TABLE BORDER>

<TR><TH COLSPAN=2>Head1</TH><TH COLSPAN=2>Head2</TH>

</TR><TR>

<TH>Head 3</TH> <TH>Head 4</TH> <TH>Head 5</TH> <TH>Head 6</TH>

</TR><TR>

<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> </TR><TR>

<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> </TR>

</TABLE>

Cabeceras laterales

Head1 Item 1 Item 2 Item 3

Head2 Item 4 Item 5 Item 6

Head3 Item 7 Item 8 Item 9<TABLE BORDER>

<TR><TH>Head1</TH><TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>


44



</TABLE>

Combinación de cabeceras laterales y líneas expandidas

Head1Item 1 Item 2 Item 3 Item 4

Item 5 Item 6 Item 7 Item 8

Head2 Item 9 Item 10 Item 3 Item 11<TABLE BORDER>

<TR><TH ROWSPAN=2>Head1</TH> <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item

4</TD></TR><TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item

8</TD></TR><TR><TH>Head2</TH> <TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item

11</TD></TR>

</TABLE>

Combinación de cabeceras superiores y laterales. Tabla centrada. Contenidos centrados. Título al pie.

TABLE TR TD TH CAPTION

BORDER X - - - -

ROWSPAN - - X X -

COLSPAN - - X X -

ALIGN - X X X X

VALIGN - - X - -

WIDTH X - X - -

HEIGTH X - X - -

CELLPADDING X - - - -

CELLSPACING X - - - -

Resumen de tablas<CENTER><TABLE BORDER><CAPTION ALIGN=bottom>Resumen de tablas</CAPTION> <TR><TD><TH>TABLE</TH><TH>TR</TH><TH>TD</TH><TH>TH</TH><TH>CAPTION</TH></TD></TR>

<TR ALIGN=CENTER> <TH>BORDER</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD></TR>

45


<TR ALIGN=CENTER> <TH>ROWSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD></TR>

<TR ALIGN=CENTER> <TH>COLSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD></TR>

<TR ALIGN=CENTER> <TH>ALIGN</TH><TD>-</TD><TD>X</TD><TD>X</TD><TD>X</TD><TD>X</TD></TR>

<TR ALIGN=CENTER> <TH>VALIGN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD></TR>

<TR ALIGN=CENTER> <TH>WIDTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD></TR>

<TR ALIGN=CENTER> <TH>HEIGTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD></TR>

<TR ALIGN=CENTER> <TH>CELLPADDING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD></TR>

<TR ALIGN=CENTER> <TH>CELLSPACING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD></TR></TABLE></CENTER>

Ejemplo con todos los elementos y parámetros

Media

Altura Peso

SexoHombres 1.9 85

Mujeres 1.7 60<TABLE BORDER>

<TR> <TD><TH ROWSPAN=2></TH><TH COLSPAN=2>Media</TH></TD>

</TR><TR> <TD><TH>Altura</TH><TH>Peso</TH></TD></TR><TR> <TH ROWSPAN=2>Sexo</TH> <TH>Hombres</TH><TD>1.9</TD><TD>85</TD></TR><TR> <TH>Mujeres</TH><TD>1.7</TD><TD>60</TD></TR>

</TABLE>

Otro ejemplo de línea y columna expandidos

46


A1 2

3 4

C D

<TABLE BORDER><TR>

<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD><TD>1</TD><TD>2</TD>

</TR><TR>

<TD>3</TD><TD>4</TD>

</TR><TR>

<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD><TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>

</TR><TR></TR>

</TABLE>

Ajustando márgenes y bordes

Tabla sin bordes

Item 1Item 2

Item 3Item 4 Item 5<TABLE>

<TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD>

</TR><TR> <TD>Item 4</TD> <TD>Item 5</TD> </TR>

</TABLE>

Aquí no es visible el borde de las celdas debido a que se ha omitido el atributo BORDER del elemento <TABLE>. La omisión o no es equivalente a parametrizarlo; se consigue lo mismo así: BORDER=0, y como ya habrás deducido, el valor de BORDER puede ser variable. Mira el siguiente ejemplo:

Tabla con borde de 10 puntos

Item 1 Item 2

Item 3 Item 4<TABLE BORDER=10>

<TR> <TD>Item 1</TD> <TD> Item 2</TD></TR><TR> <TD>Item 3</TD> <TD>Item 4</TD> </TR>

47


</TABLE>

Dimensionado de celdas

A B C

D E F

<TABLE BORDER CELLPADDING=10 CELLSPACING=0><TR>



</TABLE>

A B C

D E F<TABLE BORDER CELLPADDING=0 CELLSPACING=10>

<TR><TD>A</TD> <TD>B</TD> <TD>C</TD>

</TR><TR>


</TABLE>

A B C

D E F

<TABLE BORDER CELLPADDING=10 CELLSPACING=10><TR>



</TABLE>

A B C

D E F

<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10><TR>



</TABLE>

48


Alineación, títulos y subtablas

Líneas múltiples en un tabla

Enero Febrero Marzo

Celda 1 Celda 2Otra celda Celda 3

Celda 4y estaes la celda 5

Celda 6

<TABLE BORDER><TR>

<TH>Enero</TH><TH>Febrero</TH><TH>Marzo</TH>

</TR><TR>

<TD>Celda 1</TD> <TD>Celda 2</TD> <TD>Otra celda<br> Celda 3</TD></TR><TR>

<TD>Celda 4</TD> <TD>y esta<br>es la celda 5</TD> <TD>Celda 6</TD></TR>

</TABLE>

Alineado horizontal del contenido de las celdas. ALIGN=LEFT | RIGHT | CENTER

Se puede aplicar individualmente a una celda o a toda la línea

Enero Febrero Marzo

Todas alineadas al centro Celda 2Otra celda

Celda 3

Alineado a la derecha Alineado al centro Por defecto Alineado a la izquierda

<TABLE BORDER><TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH></TR><TR ALIGN=center> <TD>Todas alineadas al centro</TD>

49


<TD>Celda 2</TD> <TD>Otra celda<br> Celda 3</TD></TR><TR> <TD ALIGN=right>Alineado a la derecha</TD> <TD ALIGN=center>Alineado al centro</TD> <TD>Por defecto<br>Alineado a la izquierdat</TD></TR>

</TABLE>

Alineado vertical del contenido de las celdas. VALIGN=TOP | BOTTOM | MIDDLE

Se puede aplicar individualmente a una celda o a toda la columna

Enero Febrero Marzo

Todas alineadas arriba Esta es laCelda 2

Celda 3

Alineado arribaAlineado abajo

Por defectoAlineado al centro

<TABLE BORDER><TR>

<TH>Enero</TH><TH>Febrero</TH><TH>Marzo</TH>

</TR><TR VALIGN=top> <TD>Todas alineadas arriba</TD> <TD>Esta es la<br>Celda 2</TD> <TD>Celda 3</TD></TR><TR> <TD VALIGN=top>Alineado arriba</TD> <TD VALIGN=bottom>Alineado abajo</TD> <TD>Por defecto<br>Alineado al centro</TD></TR>

</TABLE>

Titulando las tablas. CAPTION=TOP | BOTTOM Título arriba

Enero Febrero Marzo

Celda 1 Celda 2 Celda 3<TABLE BORDER><CAPTION ALIGN=top>Titulo arriba</CAPTION>

<TR><TH>Enero</TH><TH>Febrero</TH><TH>Marzo</TH>

</TR><TR>

50

<TD>Celda 1</TD><TD>Celda 2</TD><TD>Celda 3</TD>

</TR></TABLE>

Enero Febrero Marzo

Celda 1 Celda 2 Celda 3

Título abajo<TABLE BORDER><CAPTION ALIGN=bottom>Titulo abajo</CAPTION>

<TR><TH>Enero</TH><TH>Febrero</TH><TH>Marzo</TH>

</TR><TR>

<TD>Celda 1</TD><TD>Celda 2</TD><TD>Celda 3</TD>

</TR></TABLE>

Anidando tablas. La tabla ABCD dentro de la tabla 12345

1 2

3

A B

C D

4 5 6<TABLE BORDER>

<TR> <TD>1</TD><TD>2</TD><TD>3<TABLE BORDER>

<TR> <TD>A</TD><TD>B</TD>

</TR><TR> 

<TD>C</TD><TD>D</TD>

</TR></TABLE></TD>

</TR><TR> 

<TD>4</TD><TD>5</TD><TD>6</TD>

</TR>

51


</TABLE>

Longitud horizontal de las tablas

Tabla que ocupa el 50 % de la pantalla, y cuyas celdas están dimensionadas al 50 % cada una respecto a la longitud total de la tabla

Width=50% Width=50%

Celda 3 Celda 4<TABLE BORDER WIDTH="50%">

<TR><TD>Width=50%</TD><TD>Width=50%</TD></TR><TR><TD>Celda 3</TD><TD>Celda 4</TD></TR>

</TABLE>

Tabla dimensionada al 50 % de la pantalla, celdas sin dimensionar. Obsévese que se alargan más de lo que lo harían sin forzar la longitud de la tabla

Celda 1 2

Celda 3 4<TABLE BORDER WIDTH="50%">

<TR><TD>Celda 1</TD><TD>2</TD></TR><TR><TD>Celda 3</TD><TD>4</TD></TR>

</TABLE>

El mismo efecto anterior, pero con la tabla dimensionada al 100 %

WIDTH=100% Celda 2

3 Celda 4<TABLE BORDER WIDTH="100%">

<TR><TD>WIDTH=100%</TD><TD>Celda 2</TD></TR><TR><TD>3</TD><TD>Celda 4</TD></TR>

</TABLE>

Centrado de una tabla en la página

A B C

D E F<CENTER><TABLE BORDER WIDTH="50%">

<TR>

52




</TABLE></CENTER>

Tabla forzada al 50 % de la página, conteniendo otra tabla anidada en una de sus celdas. La segunda tabla está forzada a ocupar el 100 % de la celda receptora.

Item 1 Item 2

Item A Item B Item 4

<TABLE BORDER WIDTH="50%"><TR><TD>Item 1</TD><TD>Item 2</TD></TR><TR><TD> <TABLE BORDER WIDTH=100%>

<TR><TD>Item A</TD><TD>Item B</TD></TR>

</TABLE> </TD> <TD>Item 4</TD></TR>

</TABLE>

Longitud vertical de las tablas

Tabla que ocupa el 50 % horizontal de la pantalla, y el 25 % vertical. HEIGHT=25%

HEIGHT=25% Item 2

3 4<TABLE BORDER WIDTH="50%" HEIGHT="25%">

<TR><TD>HEIGHT=15%</TD> <TD>Item 2</TD></TR><TR><TD>3</TD><TD>4</TD></TR>

</TABLE>

Fondos de colores o gráficos en las tablas

Una tabla de cuatro celdas. Cada una de un color.

Texto ROJO Texto VERDE

Texto AZUL Texto AMARILLO

53


<TABLE BORDER><TR><TD BGCOLOR="RED">Texto ROJO</TD> <TD BGCOLOR="green">Texto VERDE</TD></TR>

<TR><TD BGCOLOR="blue">Texto AZUL</TD> <TD BGCOLOR="YELLOW">Texto AMARILLO</TD></TR></TABLE>

En este ejemplo se ha dado color individualmente a cada celda. El atributo BGCOLOR="color" puede utilizarse en cada elemento de la tabla para efectos globales. Por ejemplo, para hacer toda la tabla en rojo, sólo sería necesario escribir: <TABLE BORDER BGCOLOR="red"> .... .... </TABLE>

Para toda la línea: <TABLE BORDER> <TR BGCOLOR="red"><TD> texto </TD></TR> .... </TABLE>

También se puede usar una imagen como fondo de toda la tabla: <TABLE BORDER BACKGROUND="yellow_r.gif"> .... .... </TABLE>

De sólo una celda: <TABLE BORDER> <TR><TD BACKGROUND="yellow_r.gif"> texto </TD></TR> .... </TABLE>

O de toda la fila: <TABLE BORDER > <TR BACKGROUND="yellow_r.gif"><TD> texto </TD></TR> .... </TABLE>

Bordes de colores en las tablas

Se puede cambiar el color de los bordes de una tabla, aunque este atributo no funciona igual en todos los navegadores, ya que en el IE el color afecta a todas las líneas de la tabla, y en Mozilla solamente a los bordes exteriores. Por ejemplo:

Ejemplo de bordes de color rojo

Ejemplo de bordes de color rojo <TABLE BORDER=2 bordercolor="red" > <TR><TD> Ejemplo de bordes</TD><TD> de color rojo </TD></TR> <TR><TD> Ejemplo de bordes</TD><TD> de color rojo </TD></TR> </TABLE>

54


Atributos de última generación

Tabla que solamente muestra los cuatro bordes A B CD E F<TABLE FRAME="border" RULES="none">


</TR><TR>


</TABLE>

Tabla que solamente muestra los bordes superior e inferior A B CD E F<TABLE FRAME="hsides" RULES="none">


</TR><TR>


</TABLE>

Tabla que solamente muestra los bordes izquierdo y derecho A B CD E F<TABLE FRAME="vsides" RULES="none">


</TR><TR>


</TABLE>

Tabla que solamente muestra las líneas de división entre columnas A B CD E F<TABLE FRAME="void" RULES="cols">


</TR><TR>


</TABLE>

55


Tabla que solamente muestra las líneas de división entre filas

A B CD E F

<TABLE FRAME="void" RULES="rows"><TR>



</TABLE>

Ejemplo de tabla con agrupamientos de columnas y filas Ejemplo de grupos de columnas y líneas

Columna1 Columna2 Columna3 Columna4 Columna5 Columna6 Columna7

C1L1 C2L1 C3L1 C4L1 C5L1 C6L1 C7L1







<TABLE border="1" frame="border" rules="groups"><CAPTION>Ejemplo de grupos de columnas y líneas</CAPTION><COLGROUP align="center"><COLGROUP align="left"><COLGROUP align="center" span="2"><COLGROUP align="center" span="3">

<THEAD valign="top"><TR><TH>Columna1</TH><TH>Columna2</TH><TH>Columna3</TH><TH>Columna4</TH><TH>Columna5</TH><TH>Columna6</TH><TH>Columna7</TH></TR><TBODY><TR><TD>C1L1<TD>C2L1<TD>C3L1<TD>C4L1<TD>C5L1<TD>C6L1<TD>C7L1</TR><TR><TD>C1L2<TD>C2L2<TD>C3L2<TD>C4L2<TD>C5L2<TD>C6L2<TD>C7L2</TR><TR><TD>C1L3<TD>C2L3<TD>C3L3<TD>C4L3<TD>C5L3<TD>C6L3<TD>C7L3</TR><TR><TD>C1L4<TD>C2L4<TD>C3L4<TD>C4L4<TD>C5L4<TD>C6L4<TD>C7L4</TR><TBODY><TR><TD>C1L5<TD>C2L5<TD>C3L5<TD>C4L5<TD>C5L5<TD>C6L5<TD>C7L5</TR><TR><TD>C1L6<TD>C2L6<TD>C3L6<TD>C4L6<TD>C5L6<TD>C6L6<TD>C7L6</TR>

56


<TFOOT><TR><TD>C1L7<TD>C2L7<TD>C3L7<TD>C4L7<TD>C5L7<TD>C6L7<TD>C7L7</TR></TABLE>

Como se puede ver, existe un agrupamiento desde la línea 1 a la 4, y otro de la 5 a la 6. A su vez, las columnas 3 y 4 forman un grupo, y la 5, 6 y 7 otro.

Los dos agrupamientos de columnas se definen con las instrucciones:

<COLGROUP align="center" span="2"><COLGROUP align="center" span="3">

Hay cuatro grupos de filas: La que aparece debajo de las cabeceras la escribe <THEAD> Las dos líneas que separan los grupos de filas centrales las producen las dos instrucciones <TBODY>, Y la última la produce <TFOOT>. Por supuesto, no es obligado que esten todas, se puede poner solamente las que se necesiten. Todo esto funciona solamente si en la definición de la tabla se incluye el atributo rules="groups"

Tablas con efectos compatibles con todos los navegadores...

Como ya se ha podido ver, muchos de los efectos de última generación mostrados no funcionan igual, o no funcionan en absoluto con todos los navegadores. ¿Qué hacer entonces para conseguir tablas cuyas líneas de bordes se vean siempre bien? Pues la única solución es usar una tabla sin bordes. Pero si utilizando atributos de tabla para poner líneas de bordes donde queramos hay problemas con algunos navegadores, la solución es utilizar otros recursos del HTML que sean admitidos por todos. No es ninguna solución mágica: solamente tienes que crear un gráfico con un punto (preferiblemente cuadrado) del color y grosor que se quiera dar a las líneas... y listo. Supongamos que queremos conseguir con una tabla representar un recuadro con bordes rojos. Para ello, utilizando cualquier editor de gráficos creamos un fichero que contenga un punto de color rojo. Solamente uno, será casi invisible. No se necesita más. Le llamaremos rojo.gif

Ejemplo de recuadro con ángulos rectos.

Y este sería el código necesario:

<table width="300" height="50" cellspacing="0" cellpadding="0" border="0" bgcolor="#6a7da5" align="center">

57


<tr> <td rowspan="3" width="1" height="50">

<img src="rojo.gif" width="1px" height="50" border="0" alt=""></td> <td colspan="4" height="1">

<img src="rojo.gif" width="300" height="1" border="0" alt=""></td> <td rowspan="3" width="1">

<img src="rojo.gif" width="1px" height="50" border="0" alt=""></td> </tr> <tr> <td colspan="4" align="center" height="48">

<font color="white"><b>Ejemplo de recuadro con ángulos rectos.</b></font></td> </tr> <tr> <td colspan="4" height="1">

<img src="rojo.gif" width="300" height="1" border="0" alt=""></td> </tr></table>

Como se puede ver, el truco consiste en definir celdas alrededor de la celda que lleva el texto. Estas celdas que rodean a la principal solamente contienen el fichero gráfico con el punto. Para conseguir que aparezcan las líneas, sólo hay que "estirar" el punto contenido en nuestro fichero gráfico rojo.gif. Esto nos permite "dibujar" las líneas que se quieran y donde se quieran, sin problemas de compatibilidad, ya que estos atributos del elemento <IMG> son completamente estandarizados (por lo menos de momento). Fíjarse en que además de atributos propios del elemento IMG también se utiliza una instrucción de estilo: width="1px" para asegurar un grosor mínimo de la línea. Este es el aspecto de la misma tabla con los bordes visibles:

Vertical izquierda

Horizontal arriba

Vertical derecha

Ejemplo de recuadro con ángulos rectos.

Horizontal abajo

--------------------Utilizando una técnica parecida, también se pueden conseguir recuadros con las esquinas redondeadas. Al igual que en el anterior ejemplo, es necesario tener un gráfico previamente, pero este dará algo más de trabajo. Con cualquier editor de gráficos (el "Paint" de Windows, por ejemplo) se genera un círculo del color que se quiera, y con el borde transparente o de otro color. A continuación lo cortas en cuatro porciones, como una tarta, y guardas cada trozo con un nombre cualquiera, por ejemplo, angulo1, angulo2, etc. Así

Recuadro con ángulos redondeados

58


Y este es el código necesario:

<table border="0" cellspacing="0" cellpadding="0"><tr> <td bgcolor="#DDE0FC" width="20"><img src="angulo1.gif" width="20" height="20"> <td bgcolor="#DDE0FC"> <td bgcolor="#DDE0FC" width="20"><img src="angulo2.gif" width="20" height="20"> </tr> <tr> <td bgcolor="#DDE0FC" width="20"> <td bgcolor="#DDE0FC">Recuadro con ángulos redondeados <td bgcolor="#DDE0FC" width="20"> </tr> <tr> <td bgcolor="#DDE0FC" width="20"><img src="angulo4.gif" width="20" height="20"> <td bgcolor="#DDE0FC"> <td bgcolor="#E5E7FD" width="20"><img src="angulo3.gif" width="20" height="20"> </tr> </table>

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.

59


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 se utilice, que tiene seis dígitos en hexadecimal. Si se corta en 3 grupos de dos de izquierda a derecha, se obtendra 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>.

Lista de códigos RGB

White rgb=#FFFFFFRed rgb=#FF0000Green rgb=#00FF00Blue rgb=#0000FFMagenta rgb=#FF00FF Cyan rgb=#00FFFFYellow rgb=#FFFF00Black rgb=#000000Aquamarine rgb=#70DB93Baker's Chocolate rgb=#5C3317Blue Violet rgb=#9F5F9FBrass rgb=#B5A642Bright Gold rgb=#D9D919Brown rgb=#A62A2ABronze rgb=#8C7853Bronze II rgb=#A67D3DCadet Blue rgb=#5F9F9FCool Copper rgb=#D98719Copper rgb=#B87333 Coral rgb=#FF7F00Corn Flower Blue rgb=#42426FDark Brown rgb=#5C4033 Dark Green rgb=#2F4F2FDark Green Copper rgb=#4A766EDark Olive Green rgb=#4F4F2FDark Orchid rgb=#9932CDDark Purple rgb=#871F78Dark Slate Blue rgb=#6B238EDark Slate Grey rgb=#2F4F4FDark Tan rgb=#97694FDark Turquoise rgb=#7093DBDark Wood rgb=#855E42Dim Grey rgb=#545454

60


Dusty Rose rgb=#856363Feldspar rgb=#D19275Firebrick rgb=#8E2323Forest Green rgb=#238E23Gold rgb=#CD7F32 Goldenrod rgb=#DBDB70Grey rgb=#C0C0C0Green Copper rgb=#527F76Green Yellow rgb=#93DB70Hunter Green rgb=#215E21Indian Red rgb=#4E2F2FKhaki rgb=#9F9F5FLight Blue rgb=#C0D9D9Light Grey rgb=#A8A8A8Light Steel Blue rgb=#8F8FBDLight Wood rgb=#E9C2A6Lime Green rgb=#32CD32Mandarian Orange rgb=#E47833Maroon rgb=#8E236BMedium Aquamarine rgb=#32CD99Medium Blue rgb=#3232CDMedium Forest Green rgb=#6B8E23Medium Goldenrod rgb=#EAEAAEMedium Orchid rgb=#9370DBMedium Sea Green rgb=#426F42Medium Slate Blue rgb=#7F00FFMedium Spring Green rgb=#7FFF00Medium Turquoise rgb=#70DBDBMedium Violet Red rgb=#DB7093Medium Wood rgb=#A68064Midnight Blue rgb=#2F2F4FNavy Blue rgb=#23238ENeon Blue rgb=#4D4DFFNeon Pink rgb=#FF6EC7New Midnight Blue rgb=#00009CNew Tan rgb=#EBC79EOld Gold rgb=#CFB53BOrange rgb=#FF7F00Orange Red rgb=#FF2400Orchid rgb=#DB70DBPale Green rgb=#8FBC8FPink rgb=#BC8F8FPlum rgb=#EAADEAQuartz rgb=#D9D9F3Rich Blue rgb=#5959ABSalmon rgb=#6F4242

61


Scarlet rgb=#8C1717Sea Green rgb=#238E68Semi-Sweet Chocolate rgb=#6B4226Sienna rgb=#8E6B23Silver rgb=#E6E8FASky Blue rgb=#3299CCSlate Blue rgb=#007FFFSpicy Pink rgb=#FF1CAESpring Green rgb=#00FF7FSteel Blue rgb=#236B8ESummer Sky rgb=#38B0DETan rgb=#DB9370Thistle rgb=#D8BFD8Turquoise rgb=#ADEAEAVery Dark Brown rgb=#5C4033Very Light Grey rgb=#CDCDCDViolet rgb=#4F2F4FViolet Red rgb=#CC3299Wheat rgb=#D8D8BFYellow Green rgb=#99CC32

¿Por qué hay que usar códigos?

Existen diversos sistemas operativos dentro del mundo de los ordenadores.

62


Estos sistemas no son otra cosa que unos programas especiales que se ejecutan inmediatamente después de encender el ordenador, y son los que se encargan de darle "vida" a la máquina.

Junto con estos programas, los ordenadores cargan en memoria unas tablas especiales que coinciden con los caracteres que tiene el teclado y algunos más que no están en el mismo, pero que se pueden escribir en pantalla por otros medios.

Estas tablas, desafortunadamente, no son siempre las mismas, y varían de un sistema a otro, de una marca de ordenador a otra, y por supuesto, de un idioma a otro. Por ejemplo, no se ven igual las letras con acentos desde un PC que desde un MACintosh, o una terminal UNIX, si las escribimos directamente desde el teclado.

Dado que el HTML pretende ser un lenguaje universal, y que una página debe verse como su creador desea, sin importar si estamos ante un ordenador que "habla" en inglés o en español, o que tiene tal o cual sistema operativo, se ha creado una tabla de caracteres "conflictivos" (en realidad están todos, pero generalmente sólo se usa para caracteres especiales) que se escriben con un código en lugar de pulsar la tecla que lo contiene directamente.

Por ejemplo, "Ñ" se escribirá:

Ñ o bien Ñ

Esto habrá que hacerlo con todos los caracteres que no sean las letras del alfabeto (mayúsculas y minúsculas), los números y unos pocos signos, como el punto, la coma, el guión y algunos otros. A este conjunto de caracteres, común para todos los sistemas, se le denomina código ASCII, y desde luego hay que codificar todas las letras acentuadas, eñes, cedillas, etc., etc.

Como se puede ver, la tabla tiene una columna con el carácter deseado seguida de su código numérico en base decimal, una descripción del carácter y después un nombre corto (una especie de alias) que para los más habituales se llegan a memorizar, y para cosas cortas, ayudan. No todos tienen ese nombre corto, y esos hay que escribirlos con el código numérico.

Tabla de códigos de caracteres

Caracter Código Descripción Alias

63


! ! Cerrar exclamación --

" " Dobles comillas --

# # Signo de número --

$ $ Dólar --

% % Tanto por ciento --

‰ ‰ Tanto por mil --

& & Ampersand amp

' ' Apóstrofe --

( ( Cerrar paréntesis --

) ) Abrir paréntesis --

* * Asterisco --

+ + Signo más --

, , Coma --

- - Guión --

. . Punto --

/ / Barra de división --

0 - 9 0 - 9 Dígitos del al 0-9 --

: : Dos puntos --

; ; Punto y coma --

< < Menor --

< < Menor lt

= = Igual --

> > Mayor --

> > Mayor gt

? ? Cerrar interrogación --

@ @ Arroba --

A - Z A - Z Letras A-Z --

[ [ Cerrar corchete (izquierdo) --

\ \ Barra inversa --

] ] Abrir corchete --

^ ^ Circunflejo --

_ _ Subrayado --

` ` Acento agudo --

a - z a - z Letras a-z --

64


{ Abrir llave --

| | Barra vertical --

} Cerrar llave --

~ ~ Tilde --

Espacio sin separación nbsp

¡ ¡ Abrir exclamación iexcl

¢ ¢ Centavo cent

£ £ Libra Esterlina pound

¤ ¤ Signo de divisa general curren

¥ ¥ Yen yen

¦ ¦ Barra vertical partida (pipe) brvbar

§ § Sección sect

¨ ¨ Diéresis uml

© © Copyright copy

ª ª Doña ordf

« « Abrir comillas francesas laquo

¬ ¬ No (símbolo lógico) not

Guión débil shy

® ® Registrado reg

¯ ¯ Macrón macr

° ° Grados deg

± ± Más-menos plusmn

² ² Dos superíndice sup2

³ ³ Tres superíndice sup3

´ ´ Acento agudo acute

µ µ Micro micro

¶ ¶ Fin de párrafo para

· · Punto medio middot

¸ ¸ Cedilla cedil

¹ ¹ Uno superíndice sup1

º º Género masculino ordm

» » Cerrar comillas francesas raquo

¼ ¼ Un cuarto frac14

½ ½ Un medio frac12

65


¾ ¾ Tres cuartos frac34

⅛ ⅛ Un octavo --

⅜ ⅜ Tres octavos --

⅝ ⅝ Cinco octavos --

⅞ ⅞ Siete octavos --

¿ ¿ Abrir interrogación iquest

À À A mayúscula, acento grave Agrave

Á Á A mayúscula, acento agudo Aacute

Â Â A mayúscula, acento circunflejo Acirc

Ã Ã A mayúscula, tilde Atilde

Ä Ä A mayúscula, diéresis Auml

Å Å A mayúscula, anillo Aring

Æ Æ AE mayúscula AElig

Ç Ç C cedilla mayúscula Ccedil

È È E mayúscula, acento grave Egrave

É É E mayúscula, acento agudo Eacute

Ê Ê E mayúscula, acento circunflejo Ecirc

Ë Ë E mayúscula, diéresis Euml

Ì Ì I mayúscula, acento grave Igrave

Í Í I mayúscula, acento agudo Iacute

Î Î I mayúscula, acento circunflejo Icirc

Ï Ï I mayúscula, diéresis Iuml

Ð Ð Eth mayúscula ETH

Ñ Ñ Eñe mayúscula Ntilde

Ò Ò O mayúscula, acento grave Ograve

Ó Ó O mayúscula, acento agudo Oacute

Ô Ô O mayúscula, acento circunflejo Ocirc

Õ Õ O mayúscula, tilde Otilde

Ö Ö O mayúscula, diéresis Ouml

× × Signo de multiplicación times

Ø Ø O barrada mayúscula Oslash

Ù Ù U mayúscula, acento grave Ugrave

Ú Ú U mayúscula, acento agudo Uacute

Û Û U mayúscula, acento circunflejo Ucirc

66


Ü Ü U mayúscula, diéresis Uuml

Ý Ý Y mayúscula, acento agudo Yacute

Þ Þ THORN mayúscula THORN

ß ß Beta minúscula szlig

à à a minúscula, acento grave agrave

á á a minúscula, acento agudo aacute

â â a minúscula, acento circunflejo acirc

ã ã a minúscula, tilde atilde

ä ä a minúscula, diéresis auml

å å a minúscula, anillo aring

æ æ ae mínuscula aelig

ç ç c cedilla minúscula ccedil

è è e minúscula, acento grave egrave

é é e minúscula, acento agudo eacute

ê ê e minúscula, acento circunflejo ecirc

ë ë e minúscula, diéresis euml

ì ì i minúscula, acento grave igrave

í í i minúscula, acento agudo iacute

î î i minúscula, acento circunflejo icirc

ï ï i minúscula, diéresis iuml

ð ð eth minúscula eth

ñ ñ eñe minúscula ntilde

ò ò o minúscula, acento grave ograve

ó ó o minúscula, acento agudo oacute

ô ô o minúscula, acento circunflejo ocirc

õ õ o minúscula, tilde otilde

ö ö o minúscula, diéresis ouml

÷ ÷ Signo de división divide

ø ø o barrada minúscula oslash

ù ù u minúscula, acento grave ugrave

ú ú u minúscula, acento agudo uacute

û û u minúscula, acento circunflejo ucirc

ü ü u minúscula, diéresis uuml

ý ý y minúscula, acento agudo yacute

67


þ þ thorn minúscula thorn

ÿ ÿ y minúscula, diéresis yuml

€ &#8364 Euro euro

≠ ≠ Distinto de ne

≤ ≤ Menor o igual que le

≥ ≥ Mayor o igual que ge

√ √ Radical radic

Ω Ω Omega --

↑ ↑ Flecha arriba uarr

↓ ↓ Flecha abajo darr

← ← Flecha izquierda larr

→ → Flecha derecha rarr

↔ ↔ Flecha izq-der harr

№ Nº --

▲ Flecha ar --

► Flecha de --

▼ Flecha ab --

◄ Flecha iz --

■ Cuadrado lleno --

□ Cuadrdo vacio --

▪ Mini cuadrado lleno --

▫ Mini cuadrado vacio --

● Punto lleno --

○ Punto vacio --

◊ ◊ Rombo vacio loz

68


Creación de enlaces (links).

El siguiente es sin duda el elemento más importante del HTML, ya que permite realmente "navegar" por uno o varios documentos, que pueden residir en cualquier parte, pareciendo que siempre se esta en el mismo; a esto se le llama hipertexto ya que con esta posibilidad, en realidad, el documento puede ser infinito...

En efecto, para la persona que este leyendo sobre un determinado tema, no hay diferencias ostensibles que le hagan notar dónde está el documento que lee.

Para el lector, todo parece un mismo documento, cuando en realidad, probablemente el conjunto de lo que lee está repartido por medio mundo, o en un plano más modesto, el documento leído puede estar compuesto en realidad por varios cientos de páginas que "saltan" de unas a otras sin notarlo.

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

Pero seguramente se preguntará 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 vera 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>.

69


Y se vera así:

Link de prueba

(Esto puede que no funcione en algunos navegadores antiguos)

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

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 del propio servidor es suficiente escribir la ruta virtual corta: /mifichero.htm o bien: /otro_directorio/mifichero.htm según proceda.

Como se ha 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 se puede 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 índice <A HREF="indice.htm"> <img src="bolaroja.gif"> </A>.

Y este sera el resultado:

Ir al índice

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 índice <A HREF="indice.htm"> <img src="bolaroja.gif" border=0> </A>.

Y este sera el resultado:

Ir al índice

El valor de los atributos hay que escribirlos EXACTAMENTE como se deba. En el ejemplo anterior no funcionaría el link si se escribiera www.miservidor.es en

70

http://www.miservidor.es/


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.es) y fichero (mifichero.htm).

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

Servicio Descripción Ejemplo Efecto

http:// Servicios WWW <A HREF="http://www.uv.es/"> WWW</A> WWW

ftp:// Servicios FTP <A HREF="ftp://ftp.uv.es/">FTP</A> FTP

news:// Servicios NEWS <A HREF="news://news.uv.es/">NEWS</A> NEWS

mailto:// Servicios E-mail <A HREF="mailto:[email protected]/">E-mail</A> E-mail

file:///C| Fichero local <A HREF="indice.htm/">Fichero</A> Fichero

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>

Esta instrucción mostrará la página indice.htm pero con otra ventana del visualizador, es decir tendremos lanzado el visualizador 2 veces.

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>

Existen otros valores para TARGET:

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.

71

mailto:[email protected]/

news://news.uv.es/

ftp://ftp.uv.es/

http://www.uv.es/


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>

En el documento destino:

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

NAME también puede utilizarse para saltar de una línea a otra dentro de un mismo documento. Se escribirá así:

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

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

En la línea de destino

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

Como se ha visto en el cuadro de arriba, es posible enviar un e-mail desde un link con la instrucción:

<A HREF="mailto:[email protected]">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 se quiere que dicha ventana se abra con el asunto (subject) y el texto (body) ya escritos se puede conseguir así:

<A HREF="mailto:[email protected]?&subject=Asunto de prueba&body=Texto de prueba">Enviar e-mail</A>

72


Con los links, al igual que con los formularios, es posible moverse usando la tecla de tabulación, para conseguir que el enfoque salte de un link a otro en uncierto orden. Para ello se utiliza el atributo tabindex.

<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 debe saber que...

El texto que se ponga 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 presentará en pantalla la última línea del mismo.

Cuando se haga un link, es preferible utilizar direcciones relativas. Si se utilizan direcciones absolutas y después se tienen que mover los ficheros por cualquier razón, se tendrán que modificar todas las direcciones.

Si al hacer un link, después del nombre de la máquina no se pone 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 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 se hace el link en lugar de un nombre de fichero se pone el de un directorio, generalmente el servidor s 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.

73


No sólo se puede montar el link sobre un texto, también se puede hacer sobre una imagen cualquiera. Es decir, después del link y antes de </A> se puede poner lo que se quiera.

El arte de escribir buen HTML reside en dar una buena estructura a la información. Siempre que se pueda huir de crear páginas muy largas. Se crean cuantas se necesiten, con buena estructura y enlázarlas con cuantos links sean precisos.

Recordar: si el trabajo HTML no va a residir en un servidor en red, y se ha utilizado direcciones absolutas, al hacer un link, no empezar con aquello de: "http://....". No funcionará.

Si se continua deseando poner direcciones absolutas con ficheros locales, se 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 se quiera) fíjarse en que las barras que separan los directorios y ficheros son barras a la derecha.

Insertar imágenes

Insertar imágenes en un documento permite crear páginas mucho más atractivas. Según el tipo de gráficos utilizado se pueden conseguir efectos realmente sorprendentes. 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.

Las imágenes utilizadas pueden estar en formato GIF o JPG. Estos formatos son interpretados directamente por el navegador.

La diferencia entre estos dos formatos es su nivel de compresión. En efecto, el JPG tiene una compresión mucho mayor que el GIF, por lo que suele ser el formato más utilizado en el mundo web, donde siempre se debe perseguir que las páginas sean lo más ligeras posible.

Por contra, cuanta mayor compresión tenga un gráfico menor calidad se consigue, pero para usos generales el JPG es perfectamente válido.

74


Se puede usar cualquier otro formato como el MPG o el AVI (ambos de vídeo), pero entonces el visualizador llamará a un programa auxiliar, que previamente le habrás definido, para que sea éste el que visualice el fichero.

La desventaja de las imágenes en formatos no tratados por el propio visualizador es que no se vera el texto junto con la imagen, y por tanto no se podra imprimir la página compuesta. para evitar esto, se utilizan los llamados "plug-in" que consisten en pequeños programas que permiten llamar a aplicaciones específicas ejecutándose como ventanas del navegador. Un ejemplo muy común son los ficheros .pdf.

Algunos navegadores no son capaces de tratar imágenes, o aunque el navegador sí pueda, tal vez el cliente esté navegando en modo solo texto, es decir, sin ver las imágenes, lo que permite moverse más rápido. Para estos casos se puede recurrir al atributo ALT (por alternativo) para definir un texto que aparecerá en lugar de la imagen. Esto es importante cuando una imagen, además de ser un elemento decorativo o informativo, soporta un link. El uso de ALT es recomendado por la W3.

Ejemplos del uso de <IMG>:

Imagen alineada a la izquierda (por defecto)

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

texto texto texto texto texto texto texto texto texto texto texto

Imagen con un texto alternativo

Sirve para que, si no es posible cargar la imagen, aparezca un texto en su lugar. También se utiliza para que al colocar el puntero del ratón sobre la imagen, sin pulsar, aparezca el texto. Para verlo se tiene que deshabilitar la opción de cargar imágenes del visualizador (sólo es posible con Netscape).

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

75


Imagen alineada a la izquierda.Texto alineado arriba

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

texto texto texto texto texto texto texto texto texto texto

Imagen alineada a la izquierda.Texto alineado abajo

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

texto texto texto texto texto texto texto texto texto texto

Imagen alineada a la izquierda.Texto alineado al centro

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

texto texto texto texto texto texto texto texto texto

Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen

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

76


Imagen alineada a la izquierda.Texto envolviendo la imagen <IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto <BR CLEAR> texto texto texto texto texto

Imagen alineada a la derecha.Texto alineado a la izquierda de la imagen

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

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

Imagen redimensionada a más.Texto alineado a la derecha de la imagen

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

texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto 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.

Imagen redimensionada a menos.Texto alineado a la derecha de la imagen <IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=75 HEIGTH=20 > texto texto texto texto texto texto texto texto texto texto texto texto

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

77


Estos dos atributos, además de para variar el tamaño de un gráfico, también pueden (casi deben) utilizarse con los valores naturales del mismo. Es decir, que no se pretende alterar las dimensiones del gráfico. La razón estriba en cómo funcionan los navegadores. Cuando el navegador solicita una página y comienza a recibirla, lo primero que hace es leer la cabecera, a continuación lee el código del BODY y por último carga las imágenes que contenga la página haciendo nuevas conexiones al servidor para cada una de ellas.

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.

Imagen alineada a la izquierda con marco.Texto alineado a la derecha de la imagen

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

Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen. Espacios verticales y horizontales vacíos forzados.

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

Usar una imagen como punto de montaje de un link

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

Como se puede 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 se quiere eliminar el marco, se escribe:

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

Mapeado de una imagen para usarla como direccionador

78


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

Si se mueve el ratón por encima de la imagen, se verá 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 se habrá supuesto, esto es un sistema de coordenadas, y para que nuestra imagen funcione como un menú direccionador, lo que se necesita 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 se puede 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: rect http://miservidor.es/mifichero1.htm 12,35rect http://miservidor.es/mifichero2.htm 90,42rect http://miservidor.es/mifichero3.htm 112,46

Este podría ser el aspecto del fichero del ejemplo, el llamado mimapa. El parámetro rect significa rectángulo, y nos indica que la imagen ha sido troceada en rectángulos y las coordenadas indican la esquina superior izquierda y la inferior derecha. También podría ser en círculos (circ) o polígonos (poly).

Resto de instrucciones del ejemplo:

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

La primera parte A HREF ya se conoce, es un link. Después viene un directorio: cgi-bin. Este es un directorio especial que tienen los servidores http, donde se ejecutan los programas auxiliares del servidor, y al que normalmente sólo puede acceder el administrador del sistema. En ese directorio hay un fichero llamado imagemap (según el sistema puede ser otro) que es un programa que se encarga de leer tu fichero mimapa, capturar las coordenas que señale el puntero del ratón y servir la dirección que tiene asociada, con lo que se acaba obteniendo un link normal. Ya por último, aparece ISMAP que es el que convierte una simple imagen en una potente herramienta.

79

http://miservidor.es/mifichero3.htm%20112,46


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 un PC con Windows o en un MAC (que los hay), se tendra 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.

Pero, una vez más, Netscape ha propuesto una solución mucho más simple: que sea el propio visualizador quien haga las veces de programa conversor. En efecto, un recurso tan bueno como los mapas, no debe depender de tener la máquina en red y de que haya un servidor http que atienda. Además, eso resta portabilidad a los documentos locales y a los trabajos personales en disquete.

Para ello se ha implementado el elemento MAP que acompañará a IMG.

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 observar la ventanita de estado que hay en la parte inferior izquierda de la pantalla, se vera 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 se tiene 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 se tiene el atributo AREA que define las áreas de la imagen.

80


El parámetro SHAPE="rect" indica la figura geométrica que se esta 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 se sabe 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 se quiere que tenga link se definirá con NOHREF.

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

Y por fin, USEMAP 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íjarse 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 se conoce; 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.

81


¿Cómo se escriben los formularios ?

La base del formulario es el elemento <FORM>, y es el que define una zona de la página como formulario. En una página puede haber varias zonas definidas como formulario, en cuyo caso es conveniente darles distintos nombres a cada uno. Dentro de este elemento, que es un objeto, se insertan otros elementos, que a su vez son sub-objetos del objeto FORM, que son los que realmente dibujan en pantalla los componentes del formulario. Se verá con detalle el concepto de objeto en las secciones de programación de esta guia, ya que ahora no lo necesitamos. Hay tres clases de estos sub-objetos:

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

Principio del formulario

Final del formulario

Analicemos cómo se escribe:

<FORM NAME="MI_FORMULARIO" METHOD="POST"ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">

82


<INPUT NAME="campo1"> <INPUT TYPE="submit" VALUE="Procesar"></FORM>

En la primera línea vemos el elemento de definición de formulario: <FORM>. Va acompañado de tres atributos: NAME, METHOD y ACTION.

NAME, evidentemente, se refiere al nombre que se le asigne al formulario. No es obligatorio, pero si el formulario va a ser utilizado en páginas ASP, PHP, o simplemente en VBScript o JavaScript, se necesitará un nombre, ya que el formulario será considerado como un objeto.

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.

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

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>

En este caso el formulario funcionaría igual que un link.

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

83


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>

Si no quieres complicarte la vida con descodificaciones (depende de lo que se vaya a hacer con los datos recibidos), el navegador puede remitirlos con un formato más sencillo y ya descodificado. Para ello sólo hay que añadir el parámetro ENCTYPE con el valor TEXT/PLAIN.

Se escribe así:

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

Resumiendo: sin poner ningun parámetro al elemento ACTION los datos te llegarán así:

CAMPO1=Esto+es+una&CAMPO2=demostracion+de+formularios y poniendo ENCTYPE="TEXT/PLAIN" así:

CAMPO1=Esto es unaCAMPO2=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"> ......

84


</FORM>

Esto funcionará siempre que en la máquina del cliente haya instalado algun programa que permita enviar correo electrónico, si no es así hay que recurrir a un programa CGI o de otro tipo en el servidor que se encargue de hacerlo. No es buena idea presuponer que todo el mundo tiene un cliente de correo instalado en su máquina.

El elemento INPUT

INPUT sin ningún atributo define por defecto una ventana de escritura de 20 caracteres de longitud por una línea de ancho:



Se escribe:

<FORM> <INPUT> </FORM><INPUT> admite varios atributos:

SIZE define la longitud de la ventana de texto.

MAXLENGTH define la máxima longitud de la cadena que se puede escribir dentro de la ventana.

NAME define el nombre de la ventana (que en realidad es un campo dentro del registro, que en conjunto, es el formulario). Si escribes:

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



Como puedes comprobar, sólo se pueden escribir 10 caracteres dentro de la ventana, que también es de longitud 10. No es obligatorio que concidan ambos valores, puedes definir la ventana al valor que quieras y la longitud de la cadena puede ser mayor o menor.

VALUE sirve para que la ventana aparezca con un valor predeterminado, y no vacía como hace por defecto:


85



Se escribe:

<FORM> <INPUT VALUE="HOLA"> </FORM>El valor puede ser modificado o barrado por el usuario.

READONLY Sirve para que el valor de la ventana, que contiene un valor predeterminado, no pueda ser modificado por el usuario.



Se escribe:

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

No funciona en versiones antiguas de los navegadores.

TYPE=TEXT Es el valor por defecto de TYPE. Puede omitirse.

TYPE=PASSWORD para que el valor predeterminado de la ventana esté en formato oculto:



Se escribe:

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

TYPE=HIDDEN define que el valor predeterminado de la ventana y la ventana misma estén en formato oculto:

Principio del formularioFinal del formulario

Se escribe:

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

86


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.

TYPE=SUBMIT para generar un botón que al ser pulsado cierra la captura de datos del formulario y procede a ejecutar lo definido en el atributo ACTION que ya conocemos.



Se escribe:

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

VALUE puede acompañar a SUBMIT , y en este caso sirve para definir el texto que queremos que tenga el botón en su interior. Si se omite, por defecto el visualizador le da el valor "Submit Query". 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.



Se escribe:

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

87


TYPE=RESET para generar un botón que al ser pulsado inicializa todos los componentes del formulario. Principio del formulario


Se escribe:

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

VALUE puede acompañar a RESET , y en este caso sirve para definir el texto que queremos que tenga el botón en su interior. Si se omite, por defecto el visualizador le da el valor "Reset".

TYPE=FILE Este es un nuevo tipo que sólo funciona con Netscape 3.0 o superior, y sirve para enviar un fichero a una máquina remota (hacer FTP), pero no funciona solo, necesita de ciertos acompañantes que hacen su uso un poco más complicado:

Aquí hay que echar mano de un atributo parametrizado de <FORM>: ENCTYPE="multipart/form-data" para generar un botón que permitirá buscar un fichero en nuestra máquina, ponerlo en una ventanita de entrada como las ya conocidas (por tanto tanbién se puede escribir directamente el nombre del fichero en lugar de buscarlo) y junto con un botón tipo submit enviar el fichero.


Enviar el fichero: Final del formulario

Se escribe:

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

el botón generado aparece con el texto "Browse.." y no sirve de nada añadirle el parámetro VALUE para darle otro nombre, como se puede hacer con el botón de tipo submit.

88


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">y escribir: ACTION="ftp://miusuario@miservidor/" METHOD="POST">

Otra forma más directa de hacer un FTP en las dos direcciones, es desde la ventana "Location" del visualizador. La sintaxis de los parámetros de ACTION son válidos en esa ventana.

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>

TYPE=IMAGE hace que el visualizador presente una imagen que es sensible al ratón. Lo que el formulario envía al servidor es un registro cuyos campos son el nombre definido para la imagen seguido de los parámetros .x=n .y=n donde n son los números de las coordenas x y del punto en el que estaba el ratón en el momento del envío. Para presentar la imagen se utiliza el atributo SRC del elemento IMG. Este sería un ejemplo de respuesta: imagen.x=99&imagen.y=15Prueba a pulsar en cualquier parte de esta imagen:



Se escribe:

<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">

89


<INPUT TYPE=IMAGE NAME="imagen" SRC="sugeren.gif"></FORM>

Los formularios que utilicen este tipo de recursos pueden prescindir del tipo SUBMIT, ya que el formulario se cierra con la imagen.

TYPE=RADIO genera botones circulares que permiten seleccionar un valor predeterminado o activar una opción


Clase A Clase B Final del formulario

Se escribe:

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

En este ejemplo, los botones permiten seleccionar la clase A, la clase B o ninguna de las dos. Si se desea que por defecto un valor esté seleccionado, por ejemplo clase B, hay que añadir el parámetro CHECKED después del valor: ... VALUE="B" CHECKED></form>

TYPE=CHECKBOX genera casillas de marca que permiten seleccionar un valor predeterminado o activar una opción


Clase A Clase B Final del formulario

Se escribe:

90


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

En este ejemplo, las casillas de marca permiten seleccionar la clase A, la clase B, ninguna, o las dos. Si se desea que por defecto un valor esté seleccionado, por ejemplo clase B, hay que añadir el parámetro CHECKED después del valor: ... VALUE="B" CHECKED></form>

El elemento SELECT

SELECT sin ningún atributo define por defecto una lista desplegable de toda la pantalla de alto y una columna de ancho:



Se escribe:

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

Como evidentemente esto no es muy práctico, hay que parametrizar el elemento. En primer lugar se le da nombre, ya que éste es un campo más del formulario, la diferencia es que no hay que escribir en él sino escoger un valor de los que nos muestre al desplegarlo, se usará el atributo NAME, y para entrar valores en la lista se usa el atributo OPTION.



Se escribe:

<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">

91


<INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar">

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

Se deben tener en cuenta varias cosas respecto a SELECT: 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:



Se escribe:

<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

92


</SELECT></FORM>

Esto siginifica que cuando selecciones "Este es el valor 5" en realidad lo que se envía al servidor es "Valor 5". 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. Principio del formulario


Se escribe:


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

Puede ocurrir que interese agrupar los valores de la lista desplegable, a fin de que resulte más fácil encontrar la opción adecuada, sobre todo si la lista es larga. Para ello se puede utilizar el parámetro optgroup. Por ejemplo:

Y se escribe: <select name="coches"> <option selected value="0">Ninguno <optgroup label="Coches de lujo"> <option value="1">Rolls Royce

93


<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

Este elemento, como su nombre indica, permite definir un área de texto en la pantalla en la que podemos escribir cualquier cosa. Se debe escribir ya parametrizada en cuanto a dimensiones, con los atributos ROWS (líneas) y COLS (COLUMNAS). No tiene otros atributos o posibles variantes. Por supuesto, para que sea operativo, deberá ir acompañado de los componentes necesarios para enviar e inicializar.



Se escribe:


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

94


El tratamiento de los datos recibidos en el servidor desde los formularios requiere conocer la tabla de conversión hexadecimal que utilizan la mayoría de visualizadores. Recuerda que las palabras en destino aparecen separadas por el signo +, y las letras acentuadas y otros caracteres, por valores hexadecimales precedidos del símbolo % 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.

Estilos en los formularios

En las últimas versiones de los dos navegadores más utilizados, pueden aplicarse cambios de estilo a los formularios, lo que permite una presentación más sofisticada. ATENCION: Hay que tener en cuenta que los estilos no estan estandarizados, y hay cosas que se ven bien en unos navegadores y no se ven en otros, y hay solo unos pocos efectos que se vean en todos ellos. En los elementos de formulario pueden redefinirse casi todos los parámetros: colores de fondo, tipo y anchura de bordes, color y tipo de letra del texto, altura y anchura del elemento, alineación del texto dentro del elemento, etc. Por ejemplo:



Se escribe así:

<FORM METHOD="GET" ACTION="">

<INPUT TYPE="text" STYLE="background:yellow;color:red" NAME="campo1">

<INPUT TYPE="text" STYLE="border:1;background:yellow;color:blue" readonly NAME="campo2" VALUE="Solo lectura">

<INPUT TYPE="button" STYLE="background:transparent;color:red" VALUE="Procesar">

</FORM>

95


Problemas de privacidad en los formularios

En las últimas versiones del navegador Internet Explorer de Microsoft, ha aparecido una nueva prestación consistente en memorizar los datos introducidos en cualquier formulario de uso habitual. En efecto, muchas veces se utilizan formularios para tareas repetitivas, en las que casi siempre hay que introducir los mismos datos. Esto nos puede ahorrar tener que escribir cada vez lo mismo, y Microsoft pensó que sería buena idea facilitar la labor del usuario haciendo que el navegador guarde en una lista desplegable todos los datos que se van escribiendo en cada transacción, de manera que cuando se accede a la página, cada campo de texto (<INPUT TYPE="text">) queda convertido en una lista desplegable (<SELECT>) cuyo contenido son los datos que se han introducido en ese mismo campo en ocasiones anteriores. Visto así suena incluso interesante.... a condición de que el usuario sea siempre el mismo, claro. Porque, ¿qué ocurre si el formulario está incluido en una página que es utilizada por numerosas personas en una sala común con máquinas públicas, como una sala de usuarios o un cibercafé? Pues que si el siguiente usuario se conecta a la misma página, puede ver los datos que escribió su antecesor en esa máquina. Para evitarlo, existe un parámetro, poco conocido en general, que debe incluirse en la definición del formulario, y que no tiene ningún efecto en los navegadores que no tienen la costumbre de ser tan indiscretos. Así:

<FORM NAME="MI_FORMULARIO" METHOD="POST" AUTOMPLETE="OFF">......</FORM>

Orden de tabulación en los formularios

De forma predeterminada, el orden de tabulación es el mismo que el orden en que los elementos se han escrito. Puede darse el caso de que necesites que el orden de tabulación de los elementos de un formulario no sea el mismo en el que estan escritos. Para ello se puede incluir en todos los elementos el parámetro TABINDEX=n donde n es el número de orden deseado de cada uno. Si se va a alterar el orden natural de tabulación, conviene hacerlo con todos los elementos del formulario. En cualquier caso, el navegador hace dos grupos de tabulación, los que tienen el parámetro TABINDEX y los que no. Seguirá el orden de los valores y a continuación pasará a los que no tengan numeración, siguiendo el orden de escritura. He aquí un ejemplo de la sintaxis:

<FORM NAME="MI_FORMULARIO" METHOD="POST">

96


<INPUT TYPE="text" NAME="Campo1" TABINDEX=2><INPUT TYPE="text" NAME="Campo2" TABINDEX=1></FORM>

En este caso, "Campo2" sería el primero en recibir el cursor. Todo esto sólo funciona con navegadores de versiones recientes.

Desactivar elementos en los formularios

Con casi todos los navegadores modernos se pueden bloquear los elementos que forman un formulario, todos o algunos de ellos. Y puede que te preguntes qué interés tiene bloquear un formulario. Puede ser necesario en aplicaciones dinámicas en las que interese bloquear partes del formulario según el usuario cumplimente unos opciones u otras. Para ello se utiliza el parámetro DISABLED. Este parámetro es accesible desde JavaScript y VBScript. Se escribe:

<FORM NAME="MI_FORMULARIO" METHOD="POST"><INPUT TYPE="text" NAME="Campo1" VALUE="Control desactivado" DISABLED><INPUT TYPE="text" NAME="Campo2"></FORM>

Se puede aplicar a cualquier objeto contenido en el formulario. Este sería el resultado:



Como puedes ver, el efecto es parecido al que se consigue con la opción de estilo readonly, pero con DISABLED se impide incluso el que se pueda seleccionar el contenido del control (no se produce el evento onFocus) y con readonly no.

97


Ejemplos de formularios

Juego de botones direccionados a páginas LOCALES.Esto sólo funciona abriendo la página como file:/// no como servicio http://.

<TABLE><TR> <TD> <FORM METHOD="GET" ACTION="indice.htm"> <INPUT TYPE="SUBMIT" VALUE="Indice"> </FORM> </TD>

<TD> <FORM METHOD="GET" ACTION="notas.htm"> <INPUT TYPE="SUBMIT" VALUE="Notas"> </FORM> </TD>

<TD> <FORM METHOD="GET" ACTION="como.htm"> <INPUT TYPE="SUBMIT" VALUE="Cómo funciona?"> </FORM> </TD></TR></TABLE>

Juego de botones direccionados a páginas REMOTAS.Puede funcionar abriendo la página como servicio http:// o como file:///. pero deberá utilizarse METHOD=GET en lugar de METHOD=POST.

<TABLE><TR> <TD> <FORM METHOD="GET" ACTION="http://sestud.uv.es/manual.esp/indice.htm">

98


<INPUT TYPE="SUBMIT" VALUE="Indice"> </FORM> </TD>

<TD> <FORM METHOD="GET" ACTION="http://sestud.uv.es/manual.esp/notas.htm"> <INPUT TYPE="SUBMIT" VALUE="Notas"> </FORM> </TD>

<TD> <FORM METHOD="GET" ACTION="http://sestud.uv.es/manual.esp/como.htm"> <INPUT TYPE="SUBMIT" VALUE="Cómo funciona?"> </FORM> </TD></TR></TABLE>

1 campo vacío. Longitud no limitada.1 campo vacío. Longitud limitada a 10

<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi"> <INPUT NAME="campo1"> <INPUT NAME="campo2" SIZE=10 MAXLENGTH=10><P> <INPUT TYPE="submit" VALUE="Procesar"> <INPUT TYPE="reset" VALUE="Inicializar"></FORM>

1 campo vacío. Longitud no limitada.1 campo con contenido visible.1 campo con contenido oculto

<form method="POST" action="http://miservidor/cgi-bin/test2-cgi"> <input name="campo1"> <input name="campo2" VALUE="TEXTO VISIBLE"> <input type="password" name="campo3" VALUE="TEXTO OCULTO"><P> <input type="submit" value="Procesar"> <input type="reset" value="Inicializar"></form>

1 campo vacío. Longitud sin limitar.1 campo vacío. Longitud limitada a 10.2 botones de selección.

99


Clase A Clase B

<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi"> <INPUT NAME="campo1"> <INPUT NAME="campo2" SIZE=10 MAXLENGTH=10><P>Clase A <INPUT TYPE="RADIO" NAME="clase" VALUE="A">Clase B <INPUT TYPE="RADIO" NAME="clase" VALUE="B"><P> <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar">

</form>

1 campo vacío. Longitud sin limitar.1 campo vacio. Longitud limitada a 10.2 botones selección2 casillas selección

Clase A Clase B

Tipo 1 Tipo 2

<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi"> <INPUT NAME="campo1"> <INPUT NAME="campo2" SIZE=10 MAXLENGTH=10><P>Clase A <INPUT TYPE="RADIO" NAME="clase" VALUE="A">Clase B <INPUT TYPE="RADIO" NAME="clase" VALUE="B"><P>Tipo 1 <INPUT TYPE="CHECKBOX" NAME="tipo" VALUE="1">Tipo 2 <INPUT TYPE="CHECKBOX" NAME="tipo" VALUE="2"><P><INPUT TYPE="SUBMIT" VALUE="Procesar"><INPUT TYPE="RESET" VALUE="Inicializar">

</form>

1 lista desplegable de 3 valores. 1 visible

100


<FORM METHOD="POST" ACTION="http://miservidor/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>

1 lista desplegable de 5 valores. 3 visibles.

<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi">

<SELECT NAME="lista1" SIZE=3> <OPTION>Valor 1 <OPTION>Valor 2 <OPTION>Valor 3 <OPTION>Valor 4 <OPTION>Valor 5</SELECT><P> <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"></FORM>

1 Ventana de texto de 5x40

<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi"><TEXTAREA NAME="texto1" ROWS=5 COLS=40 ></TEXTAREA><P><INPUT TYPE="SUBMIT" VALUE="Procesar"><INPUT TYPE="RESET" VALUE="Inicializar"></FORM>

Un típico y complejo formulario

101


Nombre: F.Nac.: DNI:

Apellidos:

Calle y número:

Código Postal: Ciudad:

Provincia: Teléfono:

Opción: Escoja una opción

Comentariospersonales:

Pulse aquí:

<FORM ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi" METHOD=POST>

<CENTER><TABLE BORDER><TR> <TD>Nombre:</TD> <TD> <INPUT TYPE="text" NAME="nombre" SIZE=18 MAXLENGTH=18> F.Nac.: <INPUT TYPE="text" NAME="edad" SIZE=8 MAXLENGTH=8> DNI: <INPUT TYPE="text" NAME="dni" SIZE=8 MAXLENGTH=8></TD>

<TR> <TD>Apellidos:</TD> <TD> <INPUT TYPE="text" NAME="apellidos" SIZE=48 MAXLENGTH=48></TD>

<TR> <TD>Calle y número:</TD> <TD> <INPUT TYPE="text" NAME="domicilio" SIZE=48 MAXLENGTH=48></TD>

<TR> <TD>Código Postal:</TD> <TD> <INPUT TYPE="text" NAME="postal" SIZE=5 MAXLENGTH=5>Ciudad: <INPUT TYPE="text" NAME="localidad" SIZE=36 MAXLENGTH=36></TD>

<TR> <TD>Provincia: </TD> <TD> <INPUT TYPE="text" NAME="provincia" SIZE=20 MAXLENGTH=20> Teléfono: <INPUT TYPE="text" NAME="telefono" SIZE=19 MAXLENGTH=19></TD>

<TR> <TD>Opción:</TD> <TD> <SELECT NAME="OPCION"> <OPTION>OPCION 1

102


<OPTION>OPCION 2 <OPTION>OPCION 3 <OPTION>OPCION 4 <OPTION>OPCION 5

</SELECT>Escoja una opción</TD><TR> <TD>Comentarios<BR> personales:</TD> <TD> <TEXTAREA NAME="coment" ROWS=2 COLS=48></TEXTAREA></TD>

<TR> <TD><B>Pulse aquí:</B></TD> <TD ALIGN=CENTER> <INPUT TYPE="submit" VALUE="Enviar datos "> <INPUT TYPE="reset" VALUE="Borrar los datos"></TD>

</TABLE></CENTER></FORM>

Multimedia

De un modo similar a como se inserta una imagen se puede insertar un fichero de sonido o de vídeo.

Sonido de fondo al cargar la página

En este caso la etiqueta depende del navegador, ya que se implementa de forma diferente en el Explorer y el Netscape. Los formatos más usados son mid (para temas musicales sin voces) , wav y au.

Netscape

La etiqueta básica para que se cargue el fichero de música con la página, sin intervención del usuario, es en Netscape (siendo obligatorio especificar el tamaño):

<EMBED SRC="gifs/derroche.mid" WIDTH=144 HEIGHT=30>

En Netscape se verá para WIDTH=160 HEIGHT=70 como:

La etiqueta EMBED tiene multitud de atributos, he aquí algunos.

AUTOSTART= FALSE (por defecto) y TRUE. Este último hace que suene inmediatamente después de cargar la página sin necesidad de pulsar el botón.HIDDEN=TRUE, oculta la consola y sólo tiene este valor . Como no se podría

103


activar el sonido pulsando el botón, suene al cargar la páginaLOOP=FALSE ,TRUE(por defecto),N para oir el fichero una vez, infinitas o el número que especifiquemos en NCONTROLS=SMALLCONSOLE, aparece una consola pequeñita

Si pones esta etiqueta, las versiones más recientes del Explorer (desde la 4.0) también la interpretan correctamente, salvo LOOP. El Explorer lee el fichero una vez para LOOP=0 y lo repite indefinidamente para N igual a otro valor cualquiera.

Explorer

El Explorer ofrece menos posibilidades para manejar estos ficheros. La etiqueta básica para que se cargue la música con la página es:

<BGSOUND SRC="fichero de sonido" LOOP= n ó INFINITE>

donde n es el número de veces que se oye el fichero: 1, 2, 3 ... o infinitas

Sonido de fondo en los dos navegadores

Si deseas que suene la música al cargar la página con los dos navegadores debes escribir las etiquetas para ambos.

Es decir debes poner:

<bgsound src="../gifs/houston.mid"><embed src="../gifs/houston.mid" Hidden="true" >

para que suene una vez

o bien:

<BGSOUND SRC="../gifs/cantina.wav" LOOP=infinite> <EMBED SRC="../gifs/cantina.wav" WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="true" HIDDEN="true">

104


para que se ejecute indefinidamente.

Sonido desde un enlace en la página

Si no quieres que se cargue la música con la página, algo que llega a resultar bastante pesado a veces, debes poner un enlace al fichero de sonido, lo que funciona con ambos navegadores: Netscape y Explorer.

También puedes poner cualquier otro tipo de ficheros de sonido, como mp3, que comprime hasta 12 veces la música, sin pérdida apreciable de calidad.

Vídeo

El gran problema de los ficheros de vídeo es su tamaño, ya que unos pocos segundos pueden representar varios Mb (mega bytes) de tamaño. Probablemente en el futuro se irá generalizando su uso, ya que aumentará la velocidad en la Red. Los formatos que se emplean son variados: avi, mpeg, ram, mov, etc, que pueden reproducir a la vez sonido y vídeo. Los ficheros avi y mpeg se reproducen con el Reproductor Multimedia de Windows, pero los demás necesitan visores propios que se deben instalar previamente. Por ejemplo los ficheros ram se visualizan con Real Player, los mov con Quick Time, etc.

Son los llamados plug-in

En Netscape, la etiqueta es muy parecida a la de sonido, siendo obligatorio especificar también las dimensiones:

<EMBED SRC="video.avi" HEIGHT=300 WIDTH=400 AUTOSTART=false LOOP=false>

En explorer debes llamar al fichero con un enlace

<A HREF="gifs/jordan.avi">Mira el vídeo de Jordan</A>

lo que abrirá el programa asociado al tipo de vídeo elegido cuando lo pulses. En el Netscape también puedes hacer esto mismo.

105

Todo LenguajeHTML

Documents

Transcript of Todo LenguajeHTML