Manual de

HTML 4.01 XHTML 1

ndice Temtico. 1. Introduccin ............................................................................................... 3 2 Introduccin al lenguaje HTML ................................................................. 3

2.1 Qu es la World Wide Web? ......................................................................................... 3 2.1.1 Introduccin a los URIs ............................................................................................. 3 2.1.2 Identificadores de fragmento .................................................................................... 4 2.1.3 URIs relativos ........................................................................................................... 4 2.2 Qu es el HTML? .......................................................................................................... 4 2.2.1 Breve historia del HTML ........................................................................................... 5 2.3 HTML 4 ............................................................................................................................ 5

3 XHTML ......................................................................................................... 5
3.1 Diferencias entre HTML y XHTML .................................................................................. 6 3.2 Por qu usar XHTML? .................................................................................................. 7 3.3 Estructura bsica de un documento XHTML. ................................................................. 7

4 El lenguaje HTML. ....................................................................................... 8

4.1 Las etiquetas. .................................................................................................................. 8 4.2 Introduccin a la estructura. ............................................................................................ 9 4.3 El elemento HTML. .......................................................................................................... 9 4.4. Cabecera del documento ............................................................................................. 10 4.4.1 Elemento HEAD ...................................................................................................... 10 4.4.2 Elemento TITLE. ..................................................................................................... 10 4.4.3 Elemento META ...................................................................................................... 10 4.5. Cuerpo del documento ................................................................................................. 12 4.6. Textos ........................................................................................................................... 14 4.6.1. Caracteres especiales ........................................................................................... 14 4.6.2. Saltos de lnea y prrafos ...................................................................................... 15 4.6.3. Formato del texto ................................................................................................... 17 4.6.4. Formatos especiales de texto ................................................................................ 18 4.7. Listas de elementos .................................................................................................. 20 4.8. Imgenes ...................................................................................................................... 22 4.8.1.Formato de intercambio de grficos (GIF) .............................................................. 22 4.8.2. Joint Photographic Experts Group (JPEG) ............................................................ 22 4.8.3. Portable Network Graphics (PNG) ........................................................................ 23 4.8.4. Tags para las imgenes y atributos ....................................................................... 23 4.9. Enlaces ......................................................................................................................... 26 4.9.1. Estructura de los enlaces ...................................................................................... 26 4.9.2. Enlaces absolutos y relativos ................................................................................ 26 4.9.3. Tipos de enlaces ....................................................................................................... 27 4.9.4. Utilizar imgenes para los enlaces ........................................................................ 28 4.9.5. Enlaces abriendo una nueva ventana del navegador ........................................... 28 4.10. Mapas de imagen ....................................................................................................... 29 4.10.1. Cdigo HTML para definir un mapa gestionado por el cliente ............................ 29 4.11. Tablas ......................................................................................................................... 31 4.11.1. Atributos de la etiqueta <TABLE> ....................................................................... 31 4.11.2. Estructura de una tabla........................................................................................ 32 4.11.3. Atributos de la etiqueta <tr> ................................................................................ 32

Manual de

HTML 4.01 XHTML 1

4.11.4. Atributos de la etiqueta <td> ................................................................................ 33 4.11.5. Celdas de cabeceras y ttulos de tabla ................................................................ 33 4.11.6. Ejemplos de creacin de tablas ........................................................................... 33 4.12. Formularios................................................................................................................. 37 4.12.1. Estructura de los formularios ............................................................................... 37 4.12.2. Botones de enviar y de restablecer los valores originales .................................. 37 4.12.3. Introduccin de texto ........................................................................................... 38 4.12.4. Contraseas (passwords) y campos ocultos ....................................................... 39 4.12.5. Casillas de verificacin (checkbox) y botones de radio (radio buttons) .............. 40 4.12.6. Listas desplegables ............................................................................................. 41 4.12.7. Botones e imgenes ............................................................................................ 42 4.12.8. Otros atributos: .................................................................................................... 42 4.13. Sonido ........................................................................................................................ 42 4.13.1. Fondos sonoros ................................................................................................... 43 4.13.2. Activacin del sonido por el propio usuario ......................................................... 43 4.14. Marcos o frames ...................................................................................................... 46 4.14.1. Estructura del documento principal ..................................................................... 46 4.14.2. Cargar pginas en diferentes frames .................................................................. 48 4.14.3. Anidacin de framesets ....................................................................................... 49 4.14.4. Frames Flotantes (Iframe) ................................................................................... 49

Anexo n 1. Colores ..................................................................................... 51 Anexo n 2. Caracteres especiales ............................................................ 52

A2.1. Caracteres bsicos .................................................................................................... 52 A2.2.Acentos y marcas diacrticas ...................................................................................... 52 A2.3. Caracteres Especiales ............................................................................................... 54

Manual de

HTML 4.01 XHTML 1

1. Introduccin
Esta especificacin define el Lenguaje de Formato de Documentos para Hipertexto (HyperText Markup Language, HTML), el lenguaje de publicacin de la World Wide Web. Esta especificacin define HTML 4.01, que es una versin de HTML 4. Adems de las caractersticas relativas a texto, multimedia e hipervnculos de las versiones anteriores de HTML (HTML 3.2 [HTML32] y HTML 2.0 [RFC1866]), HTML 4 soporta ms opciones de multimedia, lenguajes de scripts, hojas de estilo, mejores capacidades de impresin, y documentos ms accesibles a usuarios con discapacidades. HTML 4 tambin da un gran paso adelante hacia la internacionalizacin de los documentos, con la intencin de hacer la Web autnticamente universal. HTML4 es una aplicacin de SGML conforme al estndar internacional ISO 8879 -- Standard Generalized Markup Language [ISO8879].

2 Introduccin al lenguaje HTML 2.1 Qu es la World Wide Web?

La World Wide Web (Web), en castellano "Tejido Mundial", es una red de recursos de informacin. La Web se basa en tres mecanismos para hacer que estos recursos estn listos y a disposicin 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 fcilmente entre recursos (p.ej., HTML). Las relaciones entre los tres mecanismos son evidentes a todo lo largo de esta especificacin.

2.1.1 Introduccin a los URIs

Todos los recursos disponibles en la Web -- documentos HTML, imgenes, videoclips, programas, etc. -- tienen una direccin que puede ser codificada mediante un Universal Resource Identifier, o "URI", es decir, un Identificador Universal de Recursos. Los URIs se componen normalmente de tres partes: 1. El esquema de nombres del mecanismo usado para acceder al recurso. 2. El nombre de la mquina que aloja el recurso. 3. El nombre en s del recurso, dado en forma de "path" o "ruta de acceso". Consideremos el URI que designa la pgina de Informes Tcnicos del W3C:
http://www.w3.org/TR

Este URI puede leerse de la siguiente manera: Hay un documento disponible a travs del protocolo HTTP (ver [RFC2616]), que se encuentra en la mquina www.w3.org, accesible a travs de la ruta "/TR". Entre otros esquemas que pueden encontrarse en documentos HTML se incluyen "mailto" para correo electrnico y "ftp" para FTP. Aqu tenemos otro ejemplo de URI. ste se refiere al buzn de correo electrnico de un usuario:
...aqu va texto... Para cualquier comentario, enve un mensaje a <A href="mailto:jose@algunsitio.com">Jose Chvere</A>.

Nota. La mayora de los lectores estar familiarizado con el trmino "URL" y no con el trmino "URI". Los URLs forman un subconjunto del esquema de nombres URI, que es ms general.

Manual de

HTML 4.01 XHTML 1

2.1.2 Identificadores de fragmento

Algunos URIs se refieren a una localizacin dentro de un recurso. Este tipo de URIs termina con un "#" seguido de un identificador de vnculo (llamado identificador de fragmento). Por ejemplo, aqu tenemos un URI que apunta a un vnculo llamando seccion_2:
http://algunsitio.com/html/superior.html#seccion_2

2.1.3 URIs relativos

Un URI relativo no contiene informacin sobre el esquema de nombres. Su ruta de acceso se refiere generalmente a un recurso que est en la misma mquina que el documento actual. Los URIs relativos pueden contener indicadores relativos de ruta (p.ej., ".." significa un nivel superior en la jerarqua definida por la ruta de acceso), y puede contener identificadores de fragmento.
En general los URIs hacen distincin entre maysculas y minsculas. Puede haber URIs, o partes de URIs, donde la diferencia no importe (p.ej., nombres de mquinas), pero la identificacin de stas puede no ser fcil. Los usuarios deberan considerar que en los URIs se distingue siempre entre maysculas y minsculas (para quedarse del lado de la seguridad).

Los URIs relativos se convierten en URIs completos a partir de un URI base. Como ejemplo de conversin de un URI relativo, supongamos que tenemos el URI base "http://www.acme.com/soporte/intro.html". El URI relativo de la siguiente lnea de cdigo de un vnculo hipertextual:
<a href="proveedores.html">Proveedores</A>

se expandira al URI completo "http://www.acme.com/soporte/proveedores.html", mientras que el URI relativo de la siguiente lnea de cdigo de una imagen:
<img src="../iconos/logo.gif" alt="logo">

se expandira al URI completo "http://www.acme.com/iconos/logo.gif". En HTML, los URIs se usan para: Crear un vnculo a otro documento o recurso (ver elementos a y link). Crear un vnculo a una hoja de estilo o script externos (ver elementos link y script). Incluir una imagen, objeto o aplicacin en una pgina (ver elementos img, object, applet e input). Crear un mapa de imgenes (ver elementos map y area). Enviar un formulario (ver elemento form). Crear un documento con marcos (ver elementos frame e iframe). Citar una referencia externa (ver elementos q, blockquote, ins y del). Hacer referencia a convenciones de metadatos que describen un documento (ver elemento head). Designar una imagen de fondo (ver elemento body). Este es un uso desaprobado y deberan usarse hojas de estilo en su lugar.

2.2 Qu es el HTML?
Para publicar informacin y distribuirla globalmente, se necesita un lenguaje entendido universalmente, una especie de lengua franca de publicacin que todas las computadoras puedan comprender potencialmente. El lenguaje de publicacin usado por la World Wide Web es el HTML (acrnimo de HyperText Markup Language, Lenguaje para el Formato de Documentos de Hipertexto). El HTML da a los autores las herramientas para: Publicar documentos en lnea con encabezados, textos, tablas, listas, fotos, etc.

Manual de

HTML 4.01 XHTML 1

Obtener informacin en lnea a travs de vnculos de hipertexto, haciendo clic con el botn de un ratn. Disear formularios para realizar transacciones con servicios remotos, para buscar informacin, hacer reservas, pedir productos, etc. Incluir hojas de clculo, videoclips, sonidos, y otras aplicaciones directamente en sus documentos.

2.2.1 Breve historia del HTML

El HTML fue desarrollado originalmente por Tim Berners-Lee mientras estaba en el CERN, y fue popularizado por el navegador Mosaic desarrollado en el NCSA. Durante los aos 90 ha proliferado con el crecimiento explosivo de la Web. Durante este tiempo, el HTML se ha desarrollado de diferentes maneras. La Web depende de que los autores de pginas Web y las compaas compartan las mismas convenciones de HTML. Esto ha motivado el trabajo colectivo en las especificaciones del HTML. El HTML 2.0 (noviembre de 1995, ver [RFC1866]) fue desarrollado bajo los auspicios de la Internet Engineering Task Force (IETF) para codificar lo que era la prctica comn a finales de 1994. HTML+ (1993) y HTML 3.0 (1995, ver [HTML30]) propusieron versiones mucho ms ricas de HTML. A pesar de no haber logrado nunca el consenso en las discusiones sobre estndares, estos borradores llevaron a la adopcin de un nmero de nuevas caractersticas. Los esfuerzos del Grupo de Trabajo HTML del World Wide Web Consortium para codificar la prctica comn en 1996 condujeron a HTML 3.2 (enero de 1997, ver [HTML32]). Los cambios desde HTML 3.2 se resumen en el Apndice A. La mayora de las personas estn de acuerdo en que los documentos HTML deberan funcionar bien en diferentes navegadores y plataformas. Gracias a la interoperabilidad los proveedores de contenidos reducen gastos, ya que slo deben desarrollar una versin de cada documento. Si este esfuerzo no se realiza, hay un riesgo mucho mayor de que la Web se convierta en un mundo propietario de formatos incompatibles, que al final acabara por reducir el potencial comercial de la Web para todos los que forman parte de ella. Cada versin de HTML ha intentado reflejar un consenso cada vez mayor entre los interlocutores de la industria, de modo que no se desperdicien las inversiones hechas por los proveedores de contenidos y que sus documentos no dejen de ser legibles a corto plazo. El HTML ha sido desarrollado con la premisa de que cualquier tipo de dispositivo debera ser capaz de usar la informacin de la Web: PCs con pantallas grficas con distintas resoluciones y colores, telfonos mviles, dispositivos de mano, dispositivos de salida y entrada por voz, computadoras con anchos de banda grandes o pequeos, etc.

2.3 HTML 4
El HTML 4 desarrolla el lenguaje HTML con mecanismos para hojas de estilo, ejecucin de scripts, marcos, objetos incluidos, soporte mejorado para texto de derecha a izquierda y direcciones mezcladas, tablas ms ricas y mejoras en formularios, ofreciendo mejoras de accesibilidad para personas con discapacidades. El HTML 4.01 es una revisin de HTML 4.0 que corrige errores e introduce algunos cambios.

3 XHTML
En enero de 2000, el World Wide Web Consortium (W3C) aprob el nuevo estndar XHTML, con lo cual podemos decir que HTML ha muerto y en su lugar reina el nuevo XHTML. Pero no debemos asustarnos ya que XHTML no es ms que HTML adaptado a las normas XML y qu es XML? En primer lugar diremos que es la abreviatura de eXtensible Markup Language, o lenguaje extensible de marcado que fue inventado por el W3C en 1998. Bsicamente y de forma grosera podemos decir que es un lenguaje que a diferencia de HTML nos permite crear nuestras propias etiquetas para definir la estructura del documento pero no permite definir el aspecto. Para conferir a un documento XML capacidades multimedia, introducir hipervnculos o frmulas matemticas debemos acudir a la introduccin de otros lenguaje como SMIL (multimedia) Xlink (hipervnculos) MathML (frmulas). Adems para proyectos XML profesionales, debe escribirse adicionalmente una definicin del tipo de documento en la que se definan las etiquetas y se establezca su orden.

Manual de

HTML 4.01 XHTML 1

Por todo lo anterior podemos decir que actualmente la creacin de proyectos en XML es una tarea muy laboriosa y nunca se sabe con certeza si la pgina se ver bien en el navegador.

3.1 Diferencias entre HTML y XHTML

HTML seguir siendo el estndar vlido durante los prximos aos, pero como ya existe XML, el W3C ha decidido reconvertir el lenguaje HTML. XHTML es HTML con las estrictas reglas del XML L Usar minsculas. En HTML no se distingua entre maysculas y minsculas, mientras que en XHTML las etiquetas y nombres de atributos deben escribirse siempre en minsculas. Slo pueden escribirse en maysculas los valores de los atributos. Toda etiqueta requiere una etiqueta final. Mientras que en HTML podamos se algo desordenados en XHTML cada etiqueta requiere una etiqueta final. Ahora est totalmente prohibido olvidarse de </p> o </li> , etc. Debemos escribir:
<p> esto es un p&aacute;grafo </p>

Las etiquetas sin etiqueta final deben cerrarse. Deben cerrarse de forma interna. Antes escribamos
<HR>

ahora debemos escribir <hr /> Aadimos un espacio en blanco y una barra inclinada dentro de la etiqueta. El espacio en blanco es necesario para evitar que los navegadores anteriores se confundan. Los valores de los atributos aparecen entre comillas. Es obligatorio introducir todos los valores de atributo entre comillas.
<table border=2>

Se prohbe abreviar los atributos. Para muchas etiquetas se haba inventado una abreviatura que con frecuencia sustitua a todo el valor del atributo, por ejemplo con
<hr noshade>

se ocultaba la sombra de una lnea de separacin, para esto mismo ahora debemos de escribir:
<hr noshade=noshade>

El atributo name se sustituye por id. En HTML el atributo name se utilizaba para definir el nombre de formularios, marcadores, etc. Ahora este atributo queda reemplazado por id. Los navegadores antiguos no admiten el atributo id. As pues se aconseja incluir ambos u omitir el atributo id. Actualmente (2005) pocos usuarios de Internet utilizan navegadores que no admitan el atributo id con lo cual es aconsejable su uso en lugar de name. L No se permite el solapamiento de etiquetas. Aunque el solapamiento de elementos no est permitido, era tolerado en los navegadores existentes.

Manual de Ejemplo incorrecto:

<p>he aqu un <em>prrafo</p> enfatizado</em>

HTML 4.01 XHTML 1

Ejemplo correcto:
<p>he aqu un <em>prrafo</em> enfatizado.</p>

3.2 Por qu usar XHTML?

Porque el uso XML se est generalizando en la creacin de sitios web profesionales y XHTML nos ayuda a familiarizarnos con sus normas. Para que nuestro cdigo sea siempre igual al utilizar las mismas normas siempre. Y utilizar las mismas normas que el resto de desarrolladores. En la prctica usaremos las normas expuestas en el apartado anterior para mantener la coherencia del lenguaje, sin embargo tendremos que no ser muy estrictos en ciertos aspectos para poder seguir utilizando ciertas lneas de cdigo que nos resultan fciles y tiles de utilizar.

3.3 Estructura bsica de un documento XHTML.

Todo documento XML empieza por un prlogo y, por lo tanto, un documento XHTML correcto tambin empieza por un prlogo. A continuacin aparece la referencia a la definicin del tipo de documento. La definicin del tipo de documento se encuentra en el servidor del W3C, donde se definen todas las etiquetas XHTML. Como ejemplo se ha seleccionado el llamado transitional DTD, una versin de transicin que no es tan rgida.
Una DTD, o definicin del tipo de documento, es una coleccin de declaraciones XML que, como coleccin, define la estructura reglamentaria, los elementos y atributos que estn disponibles para su uso en documentos que cumplan con la DTD.

En la tercera lnea aparece finalmente la etiqueta <html> con el atributo xmlns. Se trata del atributo name space que en XML define un espacio de nombre para HTML. El resto es puro HTML con las peculiaridades del XHTML. En ocasiones la especificacin del DTD puede hacer que ciertas etiquetas, atributos o eventos desaconsejados por la norma no funcionen. L
<?xml <!DOCTYPE html PUBLIC -//W3C//DTD http://www.w3.org/TR/xhtml1-transitional.dtd> <html <head> <title>Documento </head> <body> <p>Hola </body> </html> mundo</p> version=1.0?> Transitional//EN

XHTML

1.0

xmlns=htpp://www.w3.org/1999/xhtml> XHTML</title>

El ejemplo anterior se corresponde a XHTML 1 actualmente ya existe una nueva implementacin, la XHTML 2, un ejemplo de una pgina sera el siguiente:
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="http://www.w3.org/MarkUp/style/xhtml2.css"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd"> <html xmlns="http://www.w3.org/2002/06/xhtml2/" xml:lang="en"

Manual de

HTML 4.01 XHTML 1

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/2002/06/xhtml2/ http://www.w3.org/MarkUp/SCHEMA/xhtml2.xsd" > <head> <title>Titulo del documento</title> </head> <body> <p>Moved to <a href="http://example.org/">example.org</a>.</p> </body> </html>

Existen algunas diferencias entre XHTML 2 y 1 pero debido a la novedad de la versin 2 muchas de sus recomendaciones an no son entendidas por los navegadores. En todo caso nuestro inters est en cumplir las normas expuestas en el apartado 3.1.

4 El lenguaje HTML. 4.1 Las etiquetas.

Para crear una pgina web mediante HTML, slo se necesita un editor de textos ASCII, y conocer las etiquetas (tags), que hay que introducir para controlar el aspecto y comportamiento de los elementos que compondrn la pgina web. El HTML est formado por un conjunto de cdigos de maquetacin, por lo que no es un lenguaje de programacin propiamente dicho. Estos cdigos son las etiquetas HTML, que consisten en una serie de comandos encerrados entre dos signos de menor y mayor. La forma general es:
<etiqueta> ... </etiqueta>

El mecanismo de funcionamiento es muy sencillo, cuando un navegador encuentra el signo <, examina los caracteres hasta que encuentra el final >, e interpreta el contenido de la etiqueta, y si la reconoce como una propiedad del HTML, aplica esa propiedad al elemento que venga a continuacin, hasta el momento en que encuentren la misma etiqueta precedida por la barra (smbolo /). Este tipo de etiqueta es denominada contenedor, puesto que necesita una etiqueta de cierre que delimite hasta dnde se aplicar la propiedad definida en la etiqueta de apertura. Existen otras etiquetas que no necesitan ser cerradas (la recomendacin XHTML obliga a cerrar todas las etiquetas). La mayor parte de las etiquetas pueden contener, de forma opcional u obligatoria, lo que se conocen como atributos, que son una serie de parmetros con valores que matizan el significado de la etiqueta. Los valores de los atributos se colocan habitualmente entre comillas de la siguiente manera:
<etiqueta atributo1=valor1 atributo2=valor2 ... >

En la mayora de los casos se puede prescindir de estas comillas en los atributos, y colocar directamente el valor tras el signo =. Como norma general, se puede prescindir de las comillas en el caso de los valores numricos y utilizarlas en los casos en que los valores sean cadenas de texto (como en las imgenes o los hipervnculos). Por otra parte, se pueden anidar varias etiquetas, unas a continuacin de otras, para aplicar simultneamente varias propiedades a una misma porcin del documento. Por ejemplo:
<etiqueta1> <etiqueta2> <etiqueta3>

Manual de
Texto con formato definido en las etiquetas 1, 2 y 3 </etiqueta3> </etiqueta2> </etiqueta1>

HTML 4.01 XHTML 1

Todas las etiquetas son independientes entre s, y por lo general no influye para nada el orden en el que se escriban. Eso s, para evitar problemas es muy recomendable seguir el orden lgico de anidamiento, y cerrar primero la etiqueta que se ha abierto la ltima. Se debe tener en cuenta, adems, que el HTML no distingue entre maysculas y minsculas en la especificacin de las etiquetas y atributos. Sin embargo, para facilitar la legibilidad de los documentos, es una buena prctica escribir las etiquetas y atributos en maysculas, lo que nos permitir diferenciar rpidamente el cdigo HTML de los contenidos de texto de la pgina web.

4.2 Introduccin a la estructura.

Un documento HTML 4 se compone de tres partes: 1. una lnea que contiene informacin sobre la versin de HTML, 2. una seccin de cabecera declarativa (delimitada por el elemento HEAD), 3. un cuerpo, que contiene el contenido real del documento. El cuerpo puede ser especificado mediante el elemento BODY o mediante el elemento FRAMESET. Puede aparecer espacio en blanco (espacios, saltos de lnea, tabulaciones y comentarios) antes y despus de cada seccin. Las secciones 2 y 3 deberan estar delimitadas por el elemento HTML. Aqu tenemos un ejemplo de un documento HTML sencillo:
<!DOCTYPE HTML PUBLIC "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Mi primer documento HTML</TITLE> </HEAD> <BODY> <P>Hola mundo! </BODY> </HTML> "-//W3C//DTD HTML 4.01//EN"

Lo mismo que en el caso del XHTML el especificar el DTD puede tener consecuencias no deseadas, aunque lo propio sera declarar siempre cual es la norma seguida.

4.3 El elemento HTML.

<html>...</html>

Un documento HTML no es ms que texto escrito entre las etiquetas <html> y </html>. Algunos navegadores no necesitan estas etiquetas para interpretar los documentos HTML, pero al hacer pginas Web es imprescindible procurar que el mayor nmero de usuarios puedan verlas correctamente, por lo que siempre debemos incluir estas etiquetas al principio y al final de todos los documentos HTML que hagamos. Los documentos HTML se componen de dos partes diferenciadas: cabecera y cuerpo, ambos encerrados entre los tags <html> y </html>.

<html> <head>

Manual de
cabecera del documento </head> <body> cuerpo de la pgina, textos, enlaces, imgenes </body> </html>

HTML 4.01 XHTML 1

4.4. Cabecera del documento

4.4.1 Elemento HEAD
<head>...</head>

La cabecera del documento se encuentra siempre entre las etiquetas <head> y </head>, y en ella se sitan elementos que no forman parte de los contenidos reales del documento, tales como palabras clave para los buscadores, descripcin, etc. (tags <meta>), as como el ttulo de la pgina, cdigo de aplicaciones en JavaScript, o definiciones de hojas de estilo.
<head profile="http://www.acme.com/profiles/core"> <title>el mundo de palotes</title> <meta name="author" content="perico palotes"> <meta name="copyright" content="&copy; 1997 acme corp."> <meta name="keywords" content="empresarial,instrucciones,catlogos"> <meta name="date" content="1994-11-06t08:49:37+00:00"> </head>

4.4.2 Elemento TITLE.

Todos los documentos HTML deben tener un elemento TITLE en la seccin HEAD.
<title>Ttulo del documento</title>

Una de las etiquetas ms utilizadas en la cabecera es <title>, para definir el ttulo del documento, que realmente no aparece en el contenido del mismo, sino en la barra de ttulo del navegador. Si no definimos un ttulo para el documento, en la barra de ttulo del navegador se suele mostrar la direccin URL del documento que est cargado (Internet Explorer) o simplemente no se muestra nada (Netscape).

4.4.3 Elemento META

<meta ...>

Tambin en la cabecera del documento es donde se deben incluir las ya comentadas etiquetas <meta>, que se utilizan para diferentes usos, en funcin de sus atributos. Estas etiquetas no son terminadas por </meta> ya que no afectan a ningn elemento de texto o grfico. Algunas de las ms utilizadas son:
<meta http-equiv=refresh content=n segundos;url=nueva_url>

Esta etiqueta indica qu documento debe sustituir al actual en el nmero de segundos que se especifiquen en el atributo CONTENT. Si no se indica URL, el documento actual se recargar automticamente en ese nmero de segundos. Si especificamos una URL, tiene la misma funcin que un enlace, pero sin que haga falta que el usuario haga clic en ningn sitio. Esta etiqueta se usa en ocasiones para colocar una breve pgina de presentacin que posteriormente deja paso a los contenidos reales del sitio web.
<meta name=keywords content=palabra_clave1, palabra_clave2 ...>

10

Manual de

HTML 4.01 XHTML 1

Se utiliza para especificar las palabras clave de nuestro documento de cara a su localizacin por los buscadores y portales de Internet.
<meta name=description content=breve descripcin de la pgina>

Se utiliza para dar una breve descripcin de los contenidos de la pgina. En muchos casos, esta descripcin ser la que los buscadores muestren en los resultados de sus bsquedas a continuacin del enlace.
<meta name=author content=nombre del autor del documento>

Nos permite poner nuestro nombre como autores del cdigo HTML.
<meta http-equiv=imagetoolbar content=no>

Esta etiqueta meta se utiliza para evitar que en el Internet Explorer al situar el ratn sobre una imagen aparezca la barra de herramientas de imgenes. Esta estropea el aspecto de la pgina adems de permitir descargar la imagen lo que en muchas ocasiones se trata de evitar. Otras etiquetas menos utilizadas, pero que tambin se pueden incluir en las cabeceras de los documentos son:
<base href=url>

Especificar la URL que se tomar como base del documento HTML y que se utilizar para las referencias a URL relativas que se encuentren en los enlaces y en las referencias a imgenes. No tiene mucho uso y lo normal es utilizarlo en documentos obtenidos de otros servidores o directorios e incluidos fuera de contexto, puesto que de esta forma los enlaces siguen siendo validos.

11

Manual de

HTML 4.01 XHTML 1

4.5. Cuerpo del documento

<body ...> Cuerpo del documento: textos, imgenes, enlaces, etc. </body>

El cuerpo de la pgina web es la parte fundamental de todo documento HTML, ya que lo que el navegador visualizar es todo aquello que introduzcamos en l, que ser el conjunto de elementos encerrados entre las etiquetas <body> y </body>. La etiqueta <body> admite una serie de atributos que afectarn a la totalidad del cuerpo del documento. Es aqu donde definiremos tanto el color de fondo de la pgina, como el de los textos y de los enlaces, as como la imagen que aparecer como fondo de nuestra pgina. Los atributos que admite la etiqueta <body> son los siguientes:
bgcolor=color

Define el color de fondo de la pgina. En un principio, todos los colores debemos especificarlos con una almohadilla #, seguida de los valores hexadecimales RRGGBB, es decir, los valores hexadecimales de las proporciones de color rojo, verde y azul. De esa forma, el color negro ser #000000 y el blanco #FFFFFF. Tambin puede usarse uno de los 140 nombres de colores normalizados que admiten tanto Netscape como Internet Explorer para sustituir a la combinacin RGB (ver anexo n 1)
text=color

Establece el color por defecto que tendr el texto en todo el documento, de acuerdo con el formato de colores explicado anteriormente.
link=color

Define el color que tendrn los enlaces en la pgina.

alink=color

Define el color que tendr el enlace activo en la pgina. Cuando utilizamos el tabulador para recorrer los diferentes enlaces de la pgina, el enlace activo ser aquel que queda resaltado, de forma que al pulsar la tecla Intro vayamos a la direccin indicada por ese enlace.
vlink=color

Define el color que tendrn los enlaces visitados en la pgina, que son aquellos enlaces que van a pginas que ya hemos visitado con anterioridad. Lista de colores estndar:

background=url o ruta

12

Manual de

HTML 4.01 XHTML 1

Permite insertar una imagen como fondo de la pgina. El valor de este atributo ser la ubicacin de la imagen que deseo establecer como fondo, y puede ser especificada como URL absoluta o haciendo referencia a una ruta dentro del servidor actual. Los siguientes atributos de la etiqueta <BODY> slo son soportados por el navegador Internet Explorer:
leftmargin=pixels

Establece un margen izquierdo del ancho en pxeles especificado.

topmargin=pixels

Establece un margen superior del alto en pxeles especificado.

bgproperties=fixed

Utilizando este atributo, en el navegador Internet Explorer, el fondo quedar fijo aunque la pgina necesite hacer scroll, de forma que los contenidos se desplazarn sobre el fondo, en lugar de desplazarse toda la pgina a la vez. Todos estos atributos estn desaconsejados por W3C, es decir que no se deberan de utilizar en su lugar se utilizarn las hojas de estilo.
Ejemplo desaprobado: El siguiente fragmento HTML ilustra el uso de los atributos desaprobados. Establece el color de fondo del lienzo en blanco, el color de primer plano del texto en negro, y el color de los hipervnculos en rojo inicialmente, fucsia cuando son activados y marrn una vez que han sido visitados. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Un estudio sobre la dinmica de la poblacin</title> </head> <body bgcolor="white" text="black" link="red" alink="fuchsia" vlink="maroon"> ... cuerpo del documento ... </body> </html> Ejemplo recomendado: Usando hojas de estilo, se podra conseguir el mismo efecto de la siguiente manera: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Un estudio sobre la dinmica de la poblacin</title> <style type="text/css"> body { background: white; color: black } a:link { color: red } a:visited { color: maroon } a:active { color: fuchsia } </style> </head> <body> ... cuerpo del documento ...

13

Manual de

HTML 4.01 XHTML 1

</body> </html>

Nota: Para evitar la descarga de imgenes de una pgina se colocan en la etiqueta <body> las siguientes sentencias de JavaScript (las dos ltimas slo funcionan con Internet Explorer) oncontextmenu=return false; desactiva el men contextual que aparece al pulsar el botn derecho del ratn, onselectstart=retar false; desactiva la seleccin de elementos de una pgina (pulsar el botn del ratn y arrastrar), ondragstart=return false; impide arrastrar una imagen desde el Internet Explorer a otra ventana o al escritorio.
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" >

4.6. Textos
Todos los atributos del texto (tipo de letra, tamao, colores, alineacin, formato...) se especifican mediante etiquetas. Hay que tener en cuenta que el navegador, para que los prrafos y los textos sean legibles independientemente del tamao de la ventana del navegador, ignora los saltos de lnea, tabulaciones, y los espacios adicionales que se introduzcan mediante teclado, por lo que para insertar estos elementos, tambin debemos utilizar ciertas etiquetas y cdigos que veremos ms adelante.
<pre> texto preformateado </pre>

Si en alguna ocasin, deseamos que el texto se conserve tal y como lo hemos introducido, respetando los saltos de lnea, e incluso los espacios que se introduzcan entre caracteres, podemos utilizar la etiqueta <pre>...</pre> y englobar en ella todo el texto que deseemos.

4.6.1. Caracteres especiales

Algunos de los caracteres que forman parte del alfabeto latino, o de otros alfabetos, no pueden ser directamente escritos por teclado, debido a dos razones fundamentales: 1. El teclado no dispone de una tecla para el carcter, como es el caso de los teclados americanos o ingleses, que no disponen de , o de letras acentuadas. 2. El carcter puede ser interpretado por el navegador como cdigo HTML y no como carcter, como por ejemplo los signos < y >. Al utilizar los signos mayor que y menor que para delimitar las etiquetas si se quieren utilizar como caracteres normales hay que indicrselo al navegador mediante un cdigo; as el carcter < es sustituido por &lt; (less than) y el carcter > por &gt; (greater than). Si se escribe la siguiente lnea de cdigo:
Los signos &gt; y &lt; se representan mediante &#38;gt; y &#38;lt;.

Se obtendra lo siguiente:

14

Manual de

HTML 4.01 XHTML 1

Aunque en muchos casos al escribir texto desde Windows parece que ese problema no existe y el texto se visualiza sin problemas en los navegadores, debemos tener en cuenta que desde un navegador de Macintosh o desde otros navegadores de otros sistemas, estos caracteres sern interpretados de forma errnea y visualizados como smbolos extraos. En estos casos, dichos caracteres especiales deben se introducidos como una cadena de caracteres precedida por el smbolo & y terminada en ;. Por ejemplo para escribir en un documento HTML la palabra carcter, la forma correcta sera car&aacute;cter (&aacute; = a con acento) o Espaa, que se debera escribir como Espa&ntilde;a (&ntilde; = n con tilde). El listado completo de estos caracteres especiales se encuentra en el anexo n 2. Tambin los espacios extra entre los caracteres deben ser introducidos siguiendo este criterio. Para introducir ms de un espacio entre los caracteres de texto, debemos emplear &nbsp; tantas veces como espacios deseemos introducir. mayscu las minscul as ; &aacute; &Aacute ; &eacute; &Eacute &iacute; &Iacute; ; &oacute; &Oacute ; &uacute; &Uacute &ntilde; &Ntilde;

Tabla con los cdigos para vocales con tilde y para la .

4.6.2. Saltos de lnea y prrafos

Como ya se explic anteriormente, los saltos de lnea (tambin llamados retornos de carro) no tienen ningn efecto en el cdigo HTML salvo que se utilice el tag <pre>. Para introducir saltos de lnea o prrafos en un documento HTML, tenemos dos posibilidades: las etiquetas <br> y las etiquetas <p> y <div>.
<br>

La etiqueta <br> introduce un salto de lnea en el punto del documento en que la colocamos. Sera el equivalente a un punto y aparte en el texto normal. Por lo general se usa sin ningn tipo de atributo, y funciona por s sola, es decir, al no definir propiedades aplicables a ninguna porcin de documento, no existe el correspondiente tag de cierre </BR>. Pero ya se ha dicho que utilizando XHTML deberemos poner <br />.
<p align=alineacin>...</p> <div align=alineacin>...</div>

Ambas sirven para separar prrafos en HTML, aadiendo saltos de lnea antes y despus del texto al que encierran. En el caso de <P> se deja una lnea en blanco entre un prrafo y el siguiente, mientras que en el caso de <DIV> los prrafos irn uno a continuacin del otro.
<p> y <div> delimitan un determinado prrafo, por lo que debemos cerrarlos con su correspondiente </p> y </div> respectivamente.

Tanto en el caso de <p> como en el de <div>, podemos utilizar el atributo align=alineacin, que nos servir para definir la alineacin del texto en el documento. Los diferentes valores que puede tomar este atributo son los siguientes: align=left Alineacin a la izquierda align=right Alineacin a la derecha align=center Texto centrado align=justify Texto justificado (no 100% compatible con los diferentes navegadores) Todos estos atributos estn desaconsejados por W3C, es decir que no se deberan de utilizar en su lugar se utilizarn las hojas de estilo.

Texto en el documento<br / >

15

Manual de
<p align=left>prrafo de texto alineado a la izquierda</p> <div align=justify>prrafo de texto justificado</div>

HTML 4.01 XHTML 1

En la prctica, utilizaremos el tag <p>, ya que el tag <div> se usar para un propsito muy diferente, que veremos ms adelante cuando hablemos de HTML dinmico.
<hr align=left|right|center width=ancho|porcentaje size=grosor color=color noshade=noshade>

Esta etiqueta coloca una lnea horizontal en el documento, que por defecto se mostrar con una ligera sombra. Los atributos que admite el tag <hr> son los siguientes:
align=left|right|center

Especifica la colocacin de la lnea horizontal en la ventana, que puede ser a la izquierda (left), a la derecha (right) o centrada (center).
width=ancho|porcentaje

Indica el ancho de la lnea, pudiendo especificarlo en pixels o como porcentaje del tamao de la ventana (por ejemplo: <HR WIDTH=50%>)
size=grosor

Grosor (o alto) de la lnea.

color=color

Indica el color de relleno de la lnea horizontal.

Noshade si usamos XHTML debemos poner noshade=noshade

Este atributo, que debe colocarse sin ningn valor asociado, especifica que la lnea horizontal debe colocarse sin la sombra por defecto, para aquellos casos en que se necesita una barra horizontal slida. Esta etiqueta est desaprobada por W3C, es decir que no se debera utilizar, en su lugar se utilizarn las hojas de estilo. Ejemplos: El siguiente cdigo se visualiza en el navegador segn se muestra en la figura.

<html> <head>

16

Manual de
</head> <body> Saeta que voladora cruza, arrojada al azar, y que no se sabe dnde temblando se clavar; hoja que del rbol seca arrebata el vendaval, sin que nadie acierte el surco donde al polvo volver; </body> </html>

HTML 4.01 XHTML 1

Si queremos que se vea con los saltos de lnea en el lugar adecuado el cdigo sera el siguiente.
<html> <head> </head> <body> Saeta que voladora <br /> cruza, arrojada al azar, <br /> y que no se sabe dnde <br /> temblando se clavar; <br /> <br /> hoja que del rbol seca <br /> arrebata el vendaval, <br /> sin que nadie acierte el surco <br /> donde al polvo volver; <br /> </body> </html>

Resultado de utilizar la etiqueta <br />

4.6.3. Formato del texto

<font face=tipografa size=tamao color=color> texto con formato </font>

La etiqueta <font> sirve para definir el tamao, color y tipo de letra de los textos a lo largo del documento HTML, utilizando los siguientes atributos:
face=fuente o tipografa

Utilizaremos este atributo para que el texto se muestre en el navegador utilizando la fuente o tipografa especificada. Para que este atributo tenga efecto, la fuente debe estar instalada en el ordenador de la persona que visualice la pgina. Si no es as, el texto se mostrar utilizando la

17

Manual de

HTML 4.01 XHTML 1

fuente que tenga configurada el navegador como fuente por defecto. Por eso es conveniente utilizar fuentes estndar, como Arial, Times New Roman o Courier New. Podemos especificar ms de un nombre como valor para el atributo face, separndolo del anterior por una coma, de manera que si el ordenador no tiene instalada la primera fuente, tratar de mostrar el texto con la segunda, tercera, y as sucesivamente. En caso de no tener ninguna de ellas instalada, utilizar la fuente por defecto. Este sistema puede usarse para colocar nombres de fuentes diferentes segn el sistema que use el usuario, por ejemplo, si usa Windows la fuente puede ser Arial, pero en un Macintosh la fuente sera una Helvetica:
<font face=arial,helvetica>texto con fuente arial o similar</font> size=tamao

HTML dispone de 7 tamaos de texto diferentes, por lo que este valor numrico slo podr tomar valores entre 1 y 7. Si no especificamos nada, el navegador tomar como tamao por defecto el 3 (salvo que se especifique otro diferente usando el tag <basefont> como se ver ms adelante). El tamao del texto tambin puede expresarse de forma relativa, para aumentar o disminuir la fuente por defecto. La forma de hacer esto es utilizando el atributo size seguido de un signo + o y el aumento o disminucin del texto respecto al tamao por defecto:
<font size=+nmero>

De esta forma, <font size=+2>texto</font> har que el texto se muestre con un tamao dos veces mayor que el texto por defecto.
color=#rrggbb

Establece el color con el que se mostrar el texto en pantalla. #RRGGBB, ser el valor en hexadecimal que denotar un color especfico, de la misma manera que ya se explic para los atributos del tag <body>. Igualmente, este color podr ser especificado utilizando los colores soportados por los navegadores (ver anexo n 1)
<basefont size=tamao>

La etiqueta <basefont> permite especificar el tamao por defecto que tomar el texto en todo el documento. Puede colocarse en cualquier lugar del documento, aunque por ser una etiqueta que afecta a la totalidad del documento, es conveniente para mejorar la legibilidad colocarla en la cabecera, entre las etiquetas <head> y </head>:
<head> <basefont size=2> </head>

<basefont> admite un nico atributo size, que tomar los valores numricos del 1 al 7, como se indic para la etiqueta <font>. Al usar esta etiqueta, las referencias a tamaos relativos que se coloquen en otros tags <font> a lo largo del documento sern relativas al tamao especificado en <basefont>. En Internet Explorer, tambin se pueden colocar los atributos face y color, del mismo modo que se explic para la etiqueta <font>. Font y Basefont estn desaprobados por W3C

4.6.4. Formatos especiales de texto

Para resaltar una palabra de una frase, citar textos extrados de otras fuentes, etc, HTML dispone de una serie de tags, para dar formato a las fuentes, que se detallan a continuacin:

18

Manual de

HTML 4.01 XHTML 1

<b>...</b>

Coloca el texto en negrita.

<strong>...</strong>

<i>...</i>

Texto en cursiva

<em>...</em>

<cite>...</cite>

<u>...</u>

Texto subrayado

<s>...</s>

Texto tachado

<strike>...</strike>

<code>...</code>

<kbd>...</kbd>

Texto con formato de cdigo. Estas etiquetas muestran el texto con una fuente monoespaciada (normalmente Courier o similar), y se suele usar para presentar en la pgina, por ejemplo, el cdigo fuente de algn programa.

<samp>...</samp>

<tt>...</tt>

Texto con apariencia de mquina de escribir.

<blockquote>...</blockquote>

Texto sangrado. Esta etiqueta, adems de presentar el texto desplazado a la derecha, aade un salto de lnea antes y despus del texto que encierra en su interior.

<hn align=a>...</hn> <h1> <h2> <h3> <h4> <h5> <h5>

Titulares / tamao del texto. Estas etiquetas pueden tomar valores entre <h1> Y <h6>, correspondientes en orden inverso a los tamaos de texto que podemos definir con el tag <font>, es decir, <h1> equivale a <font size=6> y <h6> corresponde a <font size=1>. Adems, los tags <h1> a <h6> colocan el texto en negrita y aaden un salto de lnea delante y detrs del texto al que encierran, por lo que suelen usarse para crear ttulos y subttulos de diferentes niveles. Tambin podemos especificar el atributo align=alineacin para especificar la alineacin del ttulo, aceptando los mismos valores que en el caso del tag <p>.

19

Manual de

HTML 4.01 XHTML 1

<blink>...</blink> Texto parpadeante. Actualmente esta etiqueta slo es soportada por Netscape. <marquee behavior=scroll|slide width=ancho>...</marquee>

Marquesina de texto deslizante. Muestra el texto desplazndose horizontalmente de derecha a izquierda a lo largo de la ventana del navegador. La propiedad behavior define el comportamiento que seguir el texto al aparecer en la marquesina, mientras que width define el ancho de la marquesina en la pantalla. Esta etiqueta es especfica de Internet Explorer. Blink y marquee estn desaprobados por W3C
_... ^...

Subndices. Superndices.

<big>...</big> Aumenta un nivel el tamao del texto, es decir, si actualmente el tamao del texto es 3, con <BIG> pasa a ser 4. Si se anidan varios tags <BIG>, el texto aumentar sucesivamente. <small>...</small> Disminuye un nivel el tamao del texto. <!-- Texto comentado -->

Este tag se usa para introducir comentarios a lo largo del cdigo HTML para facilitar su comprensin, colocando explicaciones o notas. Tambin se usa para incluir determinados elementos como cdigo JavaScript u hojas de estilo, y evitar que los navegadores que no soporten estas caractersticas den errores al procesar nuestra pgina. Tambin se usa a menudo para detectar errores en nuestra pgina, comentando zonas completas de cdigo simplemente aadiendo <!-- al principio y --> al final del cdigo que queramos comentar.

4.7. Listas de elementos

A menudo nos interesar presentar elementos en forma de listas. Para ello, podemos escoger entre tres tipos distintos de listas: 1. Listas desordenadas (no numeradas) 2. Listas ordenadas (numeradas) 3. Listas de definicin
<ul type=tipo_vieta>...</ul>

Este tag se usa para crear listas desordenadas (o listas con vietas), donde lo que aparece al principio de los elementos es un punto, un crculo o un cuadradito. Por otra parte, los contenidos que se incluyan dentro del tag <ul> quedarn sangrados a la derecha, con lo que puede usarse como sustituto de <blockquote>. La etiqueta bsica para todas las listas es <li> precediendo a cada uno de los elementos que componen la lista, y sin cerrarla con </li>. Adems, utilizando la etiqueta <li> se aadir automticamente un salto de lnea, por lo que no es necesario utilizar <br> o <p>. El resultado de la lista ser el siguiente:
HTML <ul <li>una <li>otra <li>otra type=disc> cosa cosa cosa ms XHTML <ul <li>una <li>otra <li>otra type=disc> cosa</li> cosa</li> cosa ms</li>

20

Manual de
</ul> </ul>

HTML 4.01 XHTML 1

Una cosa Otra cosa Otra cosa ms Las listas de este tipo, admiten el atributo type=tipo_vieta, donde tipo_vieta puede tomar los siguientes valores: type=disc presentar un crculo relleno
type=circle type=square

presentar un crculo hueco presentar un cuadrado

Las listas tambin pueden ir anidadas unas con otras, como por ejemplo:
HTML <ul <li>elemento <li>elemento <ul <li>elemento <li>elemento </ul> <li>elemento </ul> XHTML <ul type=disc> <li>elemento 1</li> <li>elemento 2</li> <ul type=circle> </li> <li>elemento 2.1</li> <li>elemento 2.2</li> </ul> <li>elemento 3</li> </ul>

type=disc> 1 2 type=circle> 2.1 2.2 3

<ol type=tipo_nmero start=comienzo>...</ol>

Este tag se usa para crear listas ordenadas, que sirven para presentar elementos en un orden determinado. Su estructura es muy similar a la anterior. La diferencia estriba en que en el resultado aparecer automticamente un nmero correlativo para cada elemento. En este caso, definiremos la lista con la etiqueta <ol>...</ol>, que tambin admite el atributo type, slo que en este caso, los valores que puede tomar sirven para definir el formato del nmero de orden con el que aparecern los elementos de la lista. Los valores que puede tomar este atributo para este tipo de listas son los siguientes: type=A letras maysculas (A, B, C ...)
type=a type=I type=i type=1

letras minsculas (a, b, c ...) nmeros romanos en maysculas (I, II, III ...) nmeros romanos en minsculas (i, ii, iii ...) nmeros (1, 2, 3 ...). esta ser la opcin por defecto

Otro atributo que admite este tipo de listas es start=comienzo, para definir el nmero en el que debe empezar la lista.
<dl>...</dl>

Este tag se usa para crear listas de definicin. Como su nombre indica, son apropiadas para glosarios o definiciones de trminos. Toda la lista debe ir englobada entre las etiquetas <DL> y </dl>, y a diferencia de las dos anteriores, cada elemento o rengln de la lista tiene dos partes: 1. Nombre de la palabra o trmino a definir (etiqueta <dt>, Definition Term) 2. Definicin del trmino (etiqueta <dd>, Definition Definition)

<dl> <dt>un trmino a definir <dd>definicin 1 <dt>otro trmino <dd>otra definicin

Su resultado es: Un trmino a definir Definicin 1 Otro trmino

21

Manual de
</dl>

HTML 4.01 XHTML 1

Otra definicin

NOTA: Todas las listas pueden ir anidadas entre s, incluso si son de diferentes tipos. Los atributos de estas etiquetas estn desaprobados, se deben usar estilos.

4.8. Imgenes
Aunque existen hoy da una gran cantidad de formatos grficos diferentes, a la hora de publicar en Internet slo tendremos en cuenta tres de ellos: gif, jpeg y png. Elegir estos y no otros se debe a que, adems de proporcionarnos una buena resolucin, son formatos que comprimen el tamao de las imgenes, y por lo tanto, pueden transmitirse ms rpidamente a travs de Internet. Adems, ambos formatos son estndares independientes por completo de la plataforma o sistema operativo que el usuario est utilizando, por lo que aseguramos que la visualizacin ser similar en un sistema Windows, un Macintosh o un Linux.

4.8.1.Formato de intercambio de grficos (GIF)

El formato GIF (extensin de archivo .gif) es uno de los dos formatos de archivo ms comunes para imgenes en World Wide Web, dado que es admitido por la prctica totalidad de exploradores Web. Dado que este formato slo puede mostrar un mximo de 256 colores, es ms adecuado para dibujos de lneas en blanco y negro, imgenes prediseadas en color e imgenes con grandes bloques de colores slidos. Este formato usa, adems, un sistema de compresin sin prdida llamado LZW (Lemple - Zif - Wellch, el mismo que utiliza el ZIP), que hace que se obtengan ficheros muy pequeos. Este algoritmo de compresin es especialmente eficiente cuando se trata de imgenes con colores planos, lneas definidas y pocos degradados (exactamente al contrario que JPEG). Por ello este formato est especialmente indicado para dibujos lineales, iconos, etc. El formato GIF89a tambin admite tanto transparencia como animacin. Utilice archivos GIF para: 1. Imgenes que contienen reas transparentes. 2. Un nmero limitado de colores, como 256 o menos. 3. Colores en reas diferenciadas. 4. Imgenes en blanco y negro. 5. Imgenes de pequeo tamao, como el botn de un sitio. 6. Imgenes en las que la nitidez y la claridad son importantes, como los dibujos de lneas o los cmics. 7. Imgenes que contienen texto. 8. Animaciones.

4.8.2. Joint Photographic Experts Group (JPEG)

El formato JPEG (extensin de archivo .jpg o .jpeg) es el otro formato de archivo ms comn para imgenes en el Web. No est limitado por los 256 colores mostrados por el formato GIF; por tanto, se puede utilizar para la presentacin de fotografas de gran calidad o de imgenes con millones de colores. Dado que se ha diseado como un formato de almacenamiento de imgenes, puede comprimir de forma eficiente fotografas grandes de alta calidad y convertirlas en archivos muy compactos; por tanto, es muy til cuando se desea enviar una imagen grande por correo electrnico. Sin embargo, cuanto ms se reduzca el tamao del archivo de la imagen (o se modifique y vuelva a guardar la imagen), sta perder ms informacin, con lo que disminuir su calidad. JPEG es un formato de compresin con prdida, esto quiere decir que, al guardar una imagen en este formato, algo de la informacin que contiene esa imagen se reduce, es decir, esta pierde un poco de calidad, aunque, generalmente, esta prdida de calidad es imperceptible al ojo humano. Con ello se consigue reducir el tamao del archivo y, por tanto, mejorar la velocidad de bajada de tus pginas web.

22

Manual de

HTML 4.01 XHTML 1

Por otro lado, el formato JPEG permite elegir el nivel de compresin que queremos asignar a un archivo, de modo que podamos decidir qu punto deseamos entre una mayor calidad de imagen (y, por tanto, un mayor tamao de archivo) y una imagen de baja calidad (con un menor tamao de archivo). El sistema de compresin que usa JPEG se basa en reducir informacin promedindola en las zonas de degradado. A grandes rasgos, esto quiere decir que se calcula el valor de color de algunos pxeles en funcin del color de los pxeles que les rodean. Debido a ello, este formato es muy eficiente a la hora de almacenar imgenes que posean muchos degradados y matices de color, mientras que es casi intil cuando se enfrenta a dibujos con grandes extensiones de colores planos y uniformes o con bordes muy definidos. Adems, este formato no admite transparencia ni animacin. Utilice archivos JPEG para: 1. Fotografas. 2. Imgenes de aspecto natural. 3. Gran cantidad de colores, incluso millones de ellos. 4. Gran nmero de detalles, como en una fotografa de una casa en el sitio de una inmobiliaria. 5. Imgenes de grandes dimensiones.

4.8.3. Portable Network Graphics (PNG)

El formato PNG (extensin de archivo .png) puede mostrar millones de colores. Sin embargo, como se trata de un formato prcticamente nuevo, es admitido por muy pocos exploradores (aunque est consiguiendo aceptacin con gran rapidez). Las imgenes guardadas en este formato no perdern calidad aunque se comprima el archivo. Admite transparencia, pero no admite animacin, ya que no puede contener varias imgenes. Soporta una profundidad de color mxima de 24 bits (16.7 millones de colores), usa un sistema de compresin sin prdida denominado LZ77 que permite reducir el tamao de los archivos sin reducir su calidad y, si eso no es suficiente y crees que te va a sobrar alguno de los 16 millones de colores, puedes reducir la profundidad para as reducir ms el tamao de los ficheros. PNG puede adems guardarse en modo entrelazado, tal como vimos en GIF y JPEG, y ya hay disponibles versiones del formato con transparencias (incluso con la posibilidad de asignar diversos grados de transparencia).

4.8.4. Tags para las imgenes y atributos

La etiqueta que nos sirve para incluir imgenes en nuestras pginas web es muy similar a la de enlaces a otras pginas, que veremos en el siguiente apartado. La nica diferencia es que, en lugar de indicar al programa navegador el nombre y la localizacin de un documento de texto HTML para que lo cargue, se le indica el nombre y la localizacin de un fichero que contiene una imagen. La estructura de la etiqueta es:
<img src="ruta_de_imagen" width=ancho height=alto border=numero alt=descripcin lowsrc=imagen_baja_resolucin usemap=#mapa_imagen align=alineacin hspace=espacio_h vspace=espacio_v>

En XHTML aadiremos / antes de >. Con img src (image source = fuente de la imagen) se indica que se quiere cargar la imagen que se le indica en el atributo src, especificando la ruta completa para localizarla. Los atributos son los siguientes:
src=URL o ruta_de_imagen

Imagen a mostrar, indicada bien con referencias a URL o mediante la localizacin absoluta o relativa dentro del servidor.
width=ancho height=alto

Los atributos width y height indican al navegador las dimensiones con las que debe mostrar esta imagen. Si no se especifican estos atributos, el navegador leer los datos de la imagen

23

Manual de

HTML 4.01 XHTML 1

para averiguar sus dimensiones y a continuacin la presentar. Sin embargo, es recomendable especificar las dimensiones para que el navegador no pierda tiempo teniendo que calcular esas dimensiones, lo que provocara una ralentizacin en la carga de nuestra pgina.
border=nmero

Indica el grosor del borde que enmarcar la imagen. Este atributo tiene especial importancia cuando la imagen va a tener aplicado un hiperenlace, porque los navegadores la mostrarn por defecto con un borde, por lo que debemos colocar border=0 para evitar que esto ocurra.
alt=descripcin

Con el atributo alt se introduce una descripcin alternativa (una palabra o una frase breve), explicativa de la imagen, que aparecer cuado site el cursor sobre la imagen de igual manera que la ayuda en los botones de los programas de Windows. Este atributo es muy importante si queremos hacer que nuestras pginas sean accesibles para personas con discapacidades visuales, que tal vez estn accediendo a nuestra pgina con un navegador de slo texto o de voz.
lowsrc=imagen_baja_resolucin

Este atributo, especfico de Netscape, permite colocar una imagen de baja resolucin o de baja calidad que se cargar antes que la imagen definitiva, para que el usuario pueda ir viendo la pgina sin tener que esperar por la imagen de mejor calidad, que lgicamente tambin ocupar ms y tardar ms en cargarse.
usemap=#mapa_imagen

Este atributo define el mapa de imagen que se usar para controlar los enlaces que sern activados desde esta imagen. Los mapas de imagen son etiquetas de HTML que permiten especificar zonas dentro de una imagen como si fueran hipervnculos, por ejemplo para realizar mapas interactivos, y sern explicados con detenimiento en el apartado 6.6.
align=alineacin

Permite definir la posicin que tendr la imagen con respecto al texto, pudiendo tomar los siguientes valores: Valor top texttop Descripcin La altura de la primera letra del texto coincide con la de la imagen insertada. La segunda lnea de texto aparece debajo de la imagen El texto se coloca de manera que su altura mxima coincida con la parte superior de la imagen. Este atributo normalmente es equivalente a ALIGN=top, aunque no en todos los navegadores). Al igual que en caso anterior, la segunda lnea de texto se sita debajo de la imagen Alinea la lnea media de la primera letra con la mitad de la imagen. La siguiente lnea de texto pasa a colocarse debajo de la imagen

middle

absmiddl Alinea la lnea media del conjunto de la caja de texto (probablemente las e letras altas, como I, t, l, etc.) con la mitad de la imagen center abscente r bottom right Alinea la altura mxima del texto con la altura de la mitad de la imagen Alinea la lnea base del texto con la altura de la mitad de la imagen Alinea la lnea base del texto con la parte inferior de la imagen Sita la imagen a la derecha del texto, de manera que la primera letra del texto se alinea con la parte superior de la imagen. Las siguientes lneas de texto se sitan a continuacin de la primera, manteniendo la misma sangra de prrafo que sta Igual que el anterior, pero con la imagen a la izquierda del texto.

left

hspace=espacio_h

24

Manual de
vspace=espacio_v

HTML 4.01 XHTML 1

Definen el espacio horizontal y vertical, respectivamente, que se dejar alrededor de la imagen sin colocar texto en l. Este espacio estar definido en pxeles.
gallerying=no

Este atributo slo es reconocido por el navegador Internet Explorer 6 o sup., su misin es evitar que al situar el ratn sobre la imagen se abra la barra de herramientas de imagen, propia de este navegador.

La captura anterior se obtendra tras colocar el siguiente cdigo en el cuerpo del documento HTML.
<p> <img src="logo_ife.gif" align=top / > Imagen con el texto por la parte superior.

25

Manual de
</p> <p> <img src="logo_ife.gif" align=middle / > Imagen centrada respecto al texto. </p> <p> <img src="logo_ife.gif" align=bottom / > Imagen con el texto por la parte inferior. </p>

HTML 4.01 XHTML 1

4.9. Enlaces
La base del World Wide Web es la posibilidad de saltar de un sitio a otro de forma sencilla, y sin duda la caracterstica que ms ha influido en el espectacular crecimiento de Internet ha sido la posibilidad de unir los distintos documentos repartidos por todo el mundo por medio de enlaces de hipertexto.

4.9.1. Estructura de los enlaces

<a href=enlace o url>Texto</a>

En general, la estructura de los enlaces utiliza el tag <a href=enlace>Texto</a>, donde enlace es el destino del enlace, y texto es el texto indicativo del enlace en la pantalla, que habitualmente aparece subrayado, y en un color especial (el que se especific en los atributos link, vlink o alink del tag body).

4.9.2. Enlaces absolutos y relativos

Para hacer referencia a otro documento o archivo, podemos hacerlo de varias formas. Por un lado, es posible indicar la ruta en forma de direccin URL completa, indicando todos los datos del documento (protocolo, servidor, ruta y nombre de fichero). Tambin puede hacerse referencia a un documento dentro del mismo servidor haciendo referencia de forma absoluta a su colocacin en la estructura de directorios del servidor, o de forma relativa, indicando la ubicacin del archivo en referencia al documento desde el que se efecta el enlace. Para ver de qu manera se especifica una direccin en cualquiera de los casos, lo mejor es poner un ejemplo prctico: Supongamos que tenemos el documento destino.htm en el servidor www.servidor.com, alojado en una carpeta llamada mios dentro de otra llamada docs, que est situada en el nivel principal. Por otra parte, quiero hacer referencia a destino.htm desde otra pgina web que se llama origen.htm, que est situada en la carpeta docs. Para hacer referencia a destino.htm desde origen.htm podemos hacerlo de estas tres formas: Ref. URL Cdigo HTML
<a href=http://www.servidor.com/docs/mios/destino.htm>destino</a>

absoluta <a href=/docs/mios/destino.htm>destino</a> Relativa

<a href=mios/destino.htm>destino</a>

Si el enlace se quiere hacer a la inversa, es decir, desde destino.htm colocar un enlace para origen.htm, se har de la siguiente forma: Ref. URL absoluta Relativa Cdigo HTML
<a href=http://www.servidor.com/docs/origen.htm>origen</a> <a href=/docs/origen.htm>origen</a> <a href=../origen.htm>origen</a>

26

Manual de

HTML 4.01 XHTML 1

El smbolo ../ se utiliza para subir un nivel en la estructura de directorios, y se puede utilizar concatenado, es decir si necesito subir 2 niveles de directorio para localizar el archivo puedo escribir ../../docs/pagina.htm y as sucesivamente. En la mayora de los casos es preferible utilizar direcciones relativas en lugar de las absolutas, ya que esto nos dejar una cierta libertad para mover de directorio un conjunto de pginas enlazadas entre s (y sus imgenes) sin que tengamos que cambiar todas las referencias internas dentro de los documentos, mientras que si se hace de forma absoluta, al cambiar las pginas de carpeta, las referencias deben cambiarse tambin. En cualquier caso, habr que seguir utilizando URL para las direcciones de internet que no estn en nuestro servidor. Las referencias absolutas suelen usarse para acceder a recursos comunes que se encuentran en el servidor y que se prevea que nunca van a cambiar de ubicacin.

4.9.3. Tipos de enlaces

Podemos encontrarnos varios tipos diferentes de enlaces: Enlaces dentro de una misma pgina Enlaces a pginas del mismo sitio o servidor Enlaces a pginas externas (fuera de nuestro servidor) Enlaces a direcciones de correo Enlaces a archivos para descarga Enlaces a otros servicios

4.9.3.1. Enlaces dentro de una misma pgina

<a name=marca> <a href=#marca>

En algunos casos, sobre todo si la pgina es muy extensa, puede resultar necesario insertar saltos desde una posicin determinada del documento a otra. En este caso, el formato del enlace ser el siguiente: <a href=#marca> texto </a>, y esta marca se definir en el lugar de la pgina al que deseo saltar con la etiqueta <a name=marca> </a>.

4.9.3.2. Enlaces a pginas del mismo sitio o servidor

Simplemente usaremos referencias relativas, especificando el nombre del archivo o documento al que hacemos referencia. o la ruta relativa del mismo respecto al documento desde el que se cargar: <a href=subdir/pagina.htm>Texto</a> En caso de que lo que queramos es que adems de saltar a otro documento, lo haga en una zona concreta del mismo, debemos definir en la pgina destino la marca para el enlace, como se explic en el punto anterior, y hacer el enlace de la siguiente manera:
<a href=subdir/pagina.htm#marca>Texto</a>

4.9.3.3. Enlaces a pginas externas (fuera de nuestro servidor)

En estos casos usaremos direcciones URL completas, que pueden ser tambin direcciones de web, ftp, gopher, etc. Una vez conocida la URL, la colocaremos como el destino del enlace. Por ejemplo, para colocar un enlace a la pgina web del Centro de Nuevas Tecnologas, colocaramos el siguiente cdigo:
<a href=http://www.ifes.es>IFES</a>

NOTA: Es muy importante copiar estas direcciones correctamente (respetando las maysculas y minsculas), pues los servidores UNIX s las distinguen, y podran no funcionar nuestros enlaces si no se respeta la sintaxis original.

4.9.3.4. Enlaces a direcciones de correo

En este caso el formato del enlace ser:
<a href=mailto:direccion@decorreo.es>Escrbeme</a>

27

Manual de

HTML 4.01 XHTML 1

Lo ms habitual es poner como texto del enlace la propia direccin a la que hace referencia, para que, en caso de que el navegador no reconozca este tipo de enlace, el usuario tenga la posibilidad de anotar la direccin a la que debe escribir. Puede resultar interesante que cuando el correo nos llegue procedente de algn visitante de nuestra pgina, el asunto del mensaje sea uno especfico, para poder reconocerlos rpidamente en el buzn (e incluso procesarlos automticamente). Para especificar el asunto del correo, debo hacerlo de la siguiente forma:
<a href=mailto:direccin@decorreo.es?subject=Mi asunto>Mensaje</a>

4.9.3.5. Enlaces a archivos para descarga

Un caso particular de enlaces es aquel en que queremos colocar en nuestra pgina un enlace a un archivo de forma que al hacer clic sobre l se active la descarga. Esto no deja de ser un enlace a un archivo, y se hace en general de igual modo que para enlazar un documento HTML, ya que es el navegador el que, al no reconocerlo como un documento de hipertexto y no poder cargarlo en su visualizador, nos proporcionar la opcin de descargarlo al disco duro.

4.9.3.6 Enlaces a otros servicios

Desde una pgina web podemos hacer enlaces a otros servicios, tales como ftp, news, gopher, etc, con la nica condicin de especificar el protocolo correcto para cada caso. Incluso si queremos colocar un enlace a una pgina de nuestro disco duro y que el enlace sea interpretado como URL, podemos usar tambin el protocolo file:// Servicio ftp Gopher news telnet fich. local Enlace ftp://servidorftp/destino gopher://destino news://servidor/grupo telnet://servidor file:///unidad|/ruta/destino Ejemplo ftp://ftp.micosoft.com/pub/nevagadores/ie5.zip gopher://elegans.cbs.umn.edu/1 news://news.teleline.es/teleline.pruebas telnet://cpd.uniovi.es file:///c|/docs/pagina.htm

En el caso del ftp o del http, es posible que sea necesario especificar un nombre de usuario y contrasea para acceder al documento o archivo. En ese caso, el formato del enlace ser de la forma:
<a href=ftp://usuario:contrasea@servidor.com/destino.zip>descargar</a>

4.9.4. Utilizar imgenes para los enlaces

Si deseamos que el enlace no sea un texto resaltado, sino que se active al pulsar sobre una imagen, lo nico que debemos hacer es insertar la imagen entre la etiqueta de apertura y la de cierre del enlace:
<a href=direccin><img src=imagen ...></a>

En estos casos, podemos aadirle a la etiqueta img todos los atributos que admite cuando funciona sola, aunque hay que tener en cuenta que, al tener un enlace asignado, la imagen aparecer por defecto con un borde del color que se haya definido para el atributo link en el cuerpo del documento. Si no deseamos que la imagen aparezca con ese borde, debemos especificar en la imagen el atributo border=0.

4.9.5. Enlaces abriendo una nueva ventana del navegador

Una posibilidad muy interesante es la de incluir en las pginas enlaces que al ser activados abren una nueva ventana del navegador, en la que se cargar la pgina destino. Esto se consigue utilizando el modificador target=_blank, de la siguiente forma:
<a href=pagina.htm target=_blank>texto</a>

28

Manual de

HTML 4.01 XHTML 1

El uso del atributo target ser explicado ms a fondo en el apartado de marcos (frames), as como otras posibilidades que existen para abrir nuevas ventanas utilizando JavaScript, que nos permitirn un mayor control sobre la ventana destino.

4.10. Mapas de imagen

Una de las posibilidades ms interesantes que nos ofrece el HTML es la de utilizar una misma imagen para crear enlaces a pginas diferentes a partir de diferentes zonas de la imagen. De ese modo, por ejemplo, podramos crear enlaces a diferentes pases en un mapa de Europa, de forma que se pueda pinchar en cada pas por separado, an estando en la misma imagen.

4.10.1. Cdigo HTML para definir un mapa gestionado por el cliente

Los mapas gestionados por el cliente se componen en realidad de dos tags diferentes <map> y <area>, de acuerdo a la siguiente sintaxis:
<map name=nombre> <area shape=rect|circle|polygon coords=lista de coordenadas href=url o ruta alt=texto alternativo> <area ...> . <area shape=default nohref> </map>

Hay que sealar que el tag <map> es un tag contenedor (contiene a los diferentes elementos <area> que fijan las zonas de la imagen), mientras que <area> es un tag simple, sin su correspondiente tag de cierre </area> (En XHTML debemos cerrar mediante / >). Aunque el cdigo de los mapas puede ir colocado en cualquier zona del documento HTML, a menudo es conveniente colocarlo al final para que as se carguen cuando ya se haya cargado el resto de la pgina, y no ralentizar la carga de los elementos que se vayan a mostrar en pantalla. Para la etiqueta <map> slo existe un atributo:
name=nombre

Este atributo especifica el nombre del mapa para que pueda ser referenciado desde la etiqueta <img ...> mediante el atributo usemap=#nombre (hay que recordar siempre colocar el smbolo #).
<area ...>

Cada una de las zonas que vaya a tener nuestra imagen debe ser descrita mediante una etiqueta <area>, en la que especificaremos la forma que tendr, las coordenadas que delimitan esa zona, y la direccin a la que nos llevar ese enlace. Utilizando <area shape=default nohref> le diremos al navegador que aquellas zonas de la imagen que no estn incluidas en las definidas anteriormente, no deben contener ningn enlace. Esto ltimo normalmente no es necesario, ya que la mayora de los navegadores se comportan de esta forma por defecto, aunque s es conveniente incluirla siempre al final de la definicin del mapa para evitar efectos indeseados. Los atributos de la etiqueta <area> son los siguientes:
shape=rect|circle|poly

Este atributo especifica la forma que tendr la zona de la imagen sobre la cual debemos pinchar para ir al enlace especificado en href. Los posibles valores son: shape=rect Rectngular shape=circle shape=poly Crculo Polgono

coords=lista de coordenadas

29

Manual de

HTML 4.01 XHTML 1

El atributo coords sirve para definir las coordenadas que delimitan la zona. En funcin del tipo de zona definido por el atributo shape, tendremos: Tipo
rect circle poly

Coordenadas
coords=x1,y1,x2,y2 coords=x,y,R coords=x1,y1,x2,y2,x3,y3,...

Descripcin (x1,y1) y (x2,y2) esquinas del rectngulo definen las

(x,y) es el centro del crculo y R el radio del mismo (x1,y1), (x2,y2), (x3,y3), etc. son los diferentes puntos que forman el polgono

Todos los puntos quedarn definidos por dos coordenadas, horizontal y vertical, tomando siempre como punto de referencia (0,0) la esquina superior izquierda de la imagen. En cualquier caso, en la prctica no se definen coordenadas a mano, sino que se usa un programa mapeador de imgenes de los muchos que existen en el mercado (Mapedit, CuteMap, etc.), que genera el cdigo correspondiente de una forma ms visual. href=url o ruta Este atributo es idntico al del tag <a>, indicando el documento al que ir el navegador al pinchar en la zona definida con shape y coords.
alt=texto descriptivo

Podemos colocar un breve texto descriptivo, al igual que se haca para la etiqueta <img>, de forma que al pasar por encima de una zona concreta se muestre dicho texto.

30

Manual de

HTML 4.01 XHTML 1

4.11. Tablas
Una de las principales etiquetas para realizar montajes con HTML es la correspondiente a la creacin de tablas, que nos servirn no slo para mostrar contenidos dentro de celdas, sino para colocar los elementos alineados o montar una imagen compuesta por otras (por ejemplo, cuando se requiere que algunas cumplan la funcin de botones). El uso correcto de las etiquetas de tablas es la base de un buen montaje, ya que las tablas pueden usarse para el uso habitual de insertar datos, pero tambin para crear mrgenes, alinear imgenes y otros elementos, colocar ttulos en bandas de color, centrar los contenidos de forma independiente de la resolucin, etc.
<table>...</table>

La etiqueta <TABLE> es la etiqueta general para definir las tablas de nuestro documento, y entre ellas irn colocadas el resto de las etiquetas con las que definiremos filas y columnas, y los contenidos de la tabla.

4.11.1. Atributos de la etiqueta <TABLE>

border=nmero

La tabla tendr una lnea delimitando sus celdas del grosor en pixels que especifiquemos con numero. Si no ponemos este atributo, la tabla aparecer sin bordes.
cellspacing=nmero

Permite controlar el espacio, en pxeles, entre las diferentes celdas de una tabla.
cellpadding=nmero

Permite delimitar un margen entre el borde de la celda y el contenido. Como en los casos anteriores, este nmero se especifica en pxeles.

width=nmero o porcentaje

Establece el ancho de la tabla, expresado como un ancho fijo en pxeles, o bien mediante un porcentaje del ancho total disponible en la ventana del navegador. Este tamao es el tamao mnimo de la tabla, puesto que depende de los contenidos que realmente tenga la tabla. Es decir, si por ejemplo metemos una imagen de ancho 200 en una tabla con ancho 100, prevalece el ancho de la imagen, pero si metemos en la misma tabla una imagen que mida 50 de ancho, la tabla medir 100.
height=nmero o porcentaje

Permite fijar la altura de la tabla, bien como un nmero fijo de pixels, o como en el caso anterior, como un porcentaje de la ventana del navegador en la que se carque. Igual que antes, este tamao es la altura mnima de la tabla en caso de que los contenidos no hagan que esta altura sea mayor.

31

Manual de
align=left|right|center

HTML 4.01 XHTML 1

Nos permite alinear la tabla a derecha o izquierda, o centrada en la pgina.

bgcolor=color

Permite especificar un determinado color de fondo para la tabla, utilizando el mismo formato que su equivalente del tag <BODY>.
bordercolor=color

Permite ponerle al borde de la tabla un determinado color, utilizando los nombres de color vlidos, o el valor en hexadecimal de un color concreto. Para que este atributo tenga efecto, es necesario haberle especificado con BORDER un tamao de borde diferente de 0. Debe tenerse en cuenta que Netscape y Explorer muestran los bordes de la tabla de forma diferente.
bordercolorlight=color bordercolordark=color

Estos atributos, especficos de Internet Explorer, permiten modificar los colores claro y oscuro, respectivamente, de los bordes de una tabla (normalmente estos bordes se muestran con un aspecto tridimensional). Como en el caso anterior, se requiere que hayamos definido la tabla con un borde distinto de 0.
background=url o ruta de imagen

Especifica la imagen a mostrar como fondo de la tabla.

4.11.2. Estructura de una tabla

Como acabamos de ver, las etiquetas <table>...</table> delimitan el inicio y el fin de una tabla y definir sus propiedades generales. Pero una tabla est compuesta de celdas distribuidas en filas y columnas. Cada fila ir encerrada entre las etiquetas <tr>...</tr>, y para dividir las filas en celdas utilizaremos la etiqueta <td>...</td>, colocando en su interior el texto, las imgenes o los dems elementos que deseemos presentar en el interior de la tabla. As, una tabla que contenga 2 filas y 3 columnas, tendr el siguiente cdigo:
<table> <tr> <td>cdigo <td>cdigo <td>cdigo </tr> <tr> <td>cdigo <td>cdigo <td>cdigo </tr> </table>

html</td> html</td> html</td>

html</td> html</td> html</td>

Todas las etiquetas de tipo <tr> deben englobar el mismo nmero de etiquetas <td>, ya que de no ser as, cada fila tendra un nmero diferente de columnas, aunque como veremos a continuacin, podemos combinar varias celdas para producir columnas ms anchas que otras o filas ms altas que otras.

4.11.3. Atributos de la etiqueta <tr>

Como hemos dicho anteriormente, la etiqueta <tr> se utiliza para aadir una nueva fila a una tabla. Hay que repetir esta etiqueta tantas veces como filas tenga la tabla. La etiqueta <tr> admite los atributos bgcolor, bordercolor, bordercolorlight, bordercolordark, width y height, que ya se han comentado para la etiqueta <table>. Adems, podemos los siguientes atributos:
align=right|left|center

32

Manual de

HTML 4.01 XHTML 1

Define la alineacin horizontal que tendrn los contenidos de la fila con respecto a la celda en la que estn contenidos. Esta alineacin se aplicar a todas las celdas que encierre la etiqueta <TR>, salvo que se especifique lo contrario en la celda correspondiente.
valign=top|bottom|middle|baseline

Define la alineacin vertical que tendrn los contenidos de todas las celdas que pertenecen a esta fila.

4.11.4. Atributos de la etiqueta <td>

La etiqueta <td> sirve para dividir las filas en celdas. Utilizaremos un par de etiquetas <td>...</td> para cada una de las celdas de la tabla, y en su interior colocaremos el cdigo HTML necesario para mostrar los contenidos de la tabla. Admite los mismos atributos que <tr>, aunque cuando se utilizan acompaando a <td> slo tendrn efecto sobre la celda en la que se apliquen. Adems, las etiquetas <td> pueden admitir los siguientes atributos:
nowrap

Si aparece este atributo, que no requiere ningn valor, significa que las filas de texto contenidas en la celda no pueden ser partidas, aunque llenen el ancho de la celda. Hay que ser cauteloso utilizando este atributo, ya que podra aumentar excesivamente el ancho de la tabla.
colspan=nmero rowspan=nmero

Utilizaremos colspan cuando nos interese que una celda ocupe 2 ms columnas, lo que se especifica con el valor nmero. Utilizaremos rowspan si queremos que una celda ocupe 2 o ms filas. En cualquiera de los dos casos, debemos tener en cuenta que se est utilizando el espacio que de otro modo ocupara una celda (definida con <td>), lo que supone que habr que eliminar otros tags <td> a lo largo de la tabla para que todo cuadre. Es fundamental dominar el uso de los atributos rowspan y colspan. Asimismo, en ocasiones ser necesario anidar tablas (es decir, introducir tablas dentro de tablas), para lograr determinados efectos o realizar montajes complicados.

4.11.5. Celdas de cabeceras y ttulos de tabla

<th>...</th>

Adems de las celdas que contienen datos normales, podemos incluir unas celdas especiales llamadas celdas de cabecera, que se distinguen porque el texto de las mismas aparece centrado y en negrita. Las celdas del tipo <th></th> sustiuyen a las del tipo
<td>...</td> <caption>...</caption>

Esta etiqueta se usa para aadir un titular (caption) a las tablas, es decir, un texto que aparece encima de la tabla, e indica cuales son sus contenidos.

4.11.6. Ejemplos de creacin de tablas

A continuacin veremos algunos ejemplos de montajes tpicos con tablas, con su correspondiente cdigo en HTML. Ejemplo 1: Tabla con contenidos o datos En muchas ocasiones, basta con crear una tabla para mostrar datos como caractersticas tcnicas, o simplemente descripciones y precios: Para ello, podemos usar una tabla simple con un caption y una serie de celdas de cabecera para encabezar la lista de artculos. Adems, usaremos una fuente monoespaciada y alineacin a la derecha para lograr que los precios queden situados correctamente. DISCOS DUROS

33

Manual de

HTML 4.01 XHTML 1

Marca Seagate Fujitsu

El cdigo HTML correspondiente sera:

Tamao 15 Gb. 15 Gb.

P.V.P.
19.290 21.445

34

Manual de

HTML 4.01 XHTML 1

<TABLE BORDER=2 CELLSPACING=0 CELLPADDING=2 ALIGN="CENTER"> <caption><b>DISCOS DUROS</b></caption> <tr bgcolor=#C0C0C0> <th width=100>Marca</th> <th width=60>Tama&ntilde;o</th> <th width=60>P.V.P.</th> </tr> <tr> <td>Seagate</td> <td>15 Gb.</td> <td align="right"><font face="Courier">19.290</font></td> </tr> <tr> <td>Fujitsu</td> <td>15 Gb.</td> <td align="right"><font face="Courier">21.440</font></td> </tr> </table>

En primer lugar, hemos creado una tabla con un borde de grosor 2 y un pequeo margen interno para mostrar los contenidos, adems de centrar la tabla en la pgina. Tambin hemos utilizado la etiqueta <caption> para aadirle un ttulo a nuestra tabla, que quedar centrado respecto a la tabla, sobre la parte superior. Adems, utilizamos celdas de encabezado para centrar el texto de la fila superior, as como un color de fondo para destacarla an ms. Por otro lado, en la fila superior se han colocado los anchos de las diferentes columnas, de modo que no hace falta definirlos nuevamente en el resto de celdas.

Ejemplo 2: Tablas con celdas combinadas

Este tipo de tablas es el ms normal, ya que en la mayora de los casos es necesario hacer que una celda ocupe varias columnas o varias filas. Tambin es el ms utilizado cuando hay que montar una portada de presentacin dentro de la cual se encuentran imgenes que forman botones constituyendo un men, por ejemplo. Tambin es muy til para presentar datos mejor ordenados, con columnas de cabecera ocupando ms de una columna de datos, de forma que englobe varias caractersticas de un producto, por ejemplo:

Caractersticas
DISCOS DUROS Marca Seagate Fujitsu Tamao 15 Gb. 15 Gb.

Precio
19.290 21.445

En este caso necesitaremos recurrir a los atributos rowspan y colspan de la etiqueta <td> para poder expandir estas celdas de forma que ocupen ms de una fila o columna. El cdigo completo para la tabla anterior ser:

35

Manual de

HTML 4.01 XHTML 1

<table border=2 cellspacing=0 cellpadding=2 width=40% align=center> <tr> <th rowspan=4 bgcolor=#d0d0d0 width=25%>discos duros</th> <th colspan=2 bgcolor=#707070> <font color=white>caracter&iacute;sticas</font> </th> <th rowspan=2 bgcolor=#707070 width=25%> <font color=white>precio</font> </th> </tr> <tr> <th bgcolor=#a0a0a0>marca</th> <th bgcolor=#a0a0a0>tama&ntilde;o</th> </tr> <tr> <td>seagate</td> <td>15 gb.</td> <td align=right><font face=courier>19.290</font></td> </tr> <tr> <td>fujitsu</td> <td>15 gb.</td> <td align=right><font face=courier>21.445</font></td> </tr> </table>

Hemos utilizado, adems, celdas de diferentes colores para destacar las caractersticas, y anchos variables en funcin de la resolucin, es decir, expresados en porcentajes. En este sentido, hay que tener en cuenta que los anchos expresados en porcentajes se refieren a porcentajes del objeto contenedor, es decir, en el caso de la tabla, 40% se refiere al 40% de la ventana del navegador, mientras que en las celdas de cabecera, 25% se refiere al 25% del ancho total de la tabla.

36

Manual de

HTML 4.01 XHTML 1

4.12. Formularios
Los formularios de HTML son utilizados principalmente para recoger informacin en una pgina web, y hacer que esta vaya a una determinada direccin de correo o que el servidor la interprete y devuelva una determinada respuesta al usuario. En el primer caso, slo tendramos que decirle al formulario que nos enve los datos que recoja a la direccin de correo, y de esta forma recibiramos los datos del formulario en bruto, con la informacin que el formulario ha recogido, pero sin darle ningn tipo de formato. Si quiero que la informacin me llegue formateada, necesitar utilizar un programa (CGI, ASP, PHP o similar), instalado en el servidor, que ser el que se encargue de analizar los datos y formatearlos correctamente.

4.12.1. Estructura de los formularios

<form action=url o enlace a direccin de correo name=nombre method=post|get enctype=codificacin mime></form>

Los formularios se definen mediante la etiqueta <form>...</form>, dentro de la cual se colocarn los diferentes campos del formulario (casillas de texto, botones, etc.). Debe tenerse en cuenta que si estos elementos no se colocan entre las etiquetas <form> y </form>, stos no se vern, debido a que los datos tienen que estar asociados a un formulario para poder ser enviados. Los atributos de la etiqueta <form> son los siguientes:
action=url o enlace a direccin de correo

El atributo ACTION indica la accin que se debe efectuar al enviar el formulario. Si se coloca una URL, los datos sern procesados desde la pgina indicada en esa URL (normalmente un CGI, ASP, PHP, Cold Fusion...). Si se especifica un enlace a una direccin de correo electrnico, debe hacerse de la misma forma que en tag <a>, es decir, action=mailto:usuario@servidor.com
name=nombre

Este atributo se usa para asignarle un nombre al formulario y poder acceder a l desde JavaScript, de forma que podemos controlar algunos aspectos de su funcionamiento antes del envo (por ejemplo, verificar que un nmero de telfono no tenga ms de 9 digitos o que una direccin de correo contenga una arroba).
method=post|get

El atributo method se usa para controlar la forma en que se va a acceder a la url o direccin de correo. Habitualmente, get se usa cuando los datos no van a ser procesados externamente (por ejemplo, para bsquedas), mientras que post se usa si los datos van a ser enviados por correo o tienen que actualizar una base de datos.
enctype=codificacin MIME

El atributo enctype indica el tipo de codificacin MIME que tendrn los datos enviados. Por defecto, este atributo tiene el valor application/x-www-form-urlencoded, lo que significa que los datos se formatearn como si fueran URLs, es decir, sin admitir caracteres especiales ni espacios, que sern sustituidos por cdigos o smbolos. Si queremos enviar un formulario por correo electrnico, lo mejor es poner enctype=text/plain, que dejar los datos formateados tal cual, como un fichero de texto, perfectamente legible y sin codificar.

4.12.2. Botones de enviar y de restablecer los valores originales

<input type=submit value=Texto del botn>

Muchos de los elementos de los formularios comparten la etiqueta <input>, y variando sus atributos podemos hacer que el elemento sea de un tipo o de otro. En este caso, utilizaremos type=submit para introducir uno de los elementos fundamentales: el botn de enviar. El botn de submit es el que se encarga de enviar los datos al servidor, de forma que al pulsarlo el formulario realiza la accin especificada en el atributo action que vimos anteriormente.

37

Manual de

HTML 4.01 XHTML 1

Por otro lado, el atributo value indica el texto que aparecer sobre el botn de enviar.
<input type=reset value=Texto del botn>

El control de tipo reset consiste en un botn que nos permitir restablecer los valores originales que contena un formulario en el momento de cargarlo por primera vez. Como en el caso anterior, el atributo VALUE indica el texto que se mostrar en el botn. En muchos casos, el formulario se mostrar vaco por defecto, por lo que el botn de reset suele aparecer con el texto borrar.

4.12.3. Introduccin de texto

<input type=text size=ancho visible maxlength=longitud_mxima name=identificador value=contenido por defecto>

Si al atributo type de la etiqueta input le asignamos el valor text obtendremos un campo de edicin para introduccin de datos. Este tipo de control es uno de los ms usados en los formularios. En los campos de edicin existen los siguientes atributos:
size=ancho visible

Este atributo define el ancho del campo de edicin sobre la pantalla. Hay que tener en cuenta que Internet Explorer y Netscape interpretan este atributo de forma diferente, ya que Internet Explorer utiliza una fuente de ancho variable (normalmente Arial) mientras que Netscape utiliza una fuente monoespaciada (Courier).
<form ...> Escribe tu apellido:<br> <input type=text size=25 name=Apellido> <input type=submit value=enviar> </form> maxlength=longitud mxima

Este atributo indica el nmero mximo de caracteres que podremos teclear dentro del campo de edicin. Por ejemplo, podramos fijar maxlength=9 para un campo de edicin donde se deba escribir un nmero de telfono.
name=identificador

El atributo name especifica el identificador interno que tiene asignado este elemento concreto del formulario. Este identificador se usar para poder distinguir un campo de otro a lo largo del formulario, y es independiente del texto que se muestre al lado del campo de edicin, que deber ser introducido como HTML normal si queremos que ponga algo.
value=contenido por defecto

Este atributo especifica el texto que contendr el campo de edicin en el momento de cargar el formulario por primera vez, por ejemplo, si queremos mostrar un texto que diga "escriba aqu su texto".
<textarea rows=filas cols=columnas name=identificador wrap=off|physical|virtual> Contenido inicial del cuadro de texto </textarea>

Para introducir textos de gran longitud podemos introducir un cuadro de texto de mltiples lneas, por medio de la etiqueta <textarea>. Como en los casos anteriores, name indica el nombre de la variable interna en la que se va a almacenar el contenido del cuadro de texto. Como esta etiqueta se usa para almacenar textos largos, el contenido por defecto no se define con un atributo VALUE, sino introducindolo entre las etiquetas <textarea> y </textarea>.
rows=filas cols=columnas

38

Manual de

HTML 4.01 XHTML 1

Los atributos rows y cols sirven para indicar el tamao que tendr el cuadro de texto, especificado en nmero de caracteres (no en pixels). Como en el caso anterior, debemos tener en cuenta que Internet Explorer y Netscape usan fuentes diferentes para mostrar los formularios.
wrap=off|physical|virtual

Al tener mltiples lneas y poder contener gran cantidad de texto, la etiqueta <textarea> admite el atributo wrap para controlar tanto la forma en la que se introduce el texto, como la manera en la que este texto se enviar al servidor. El valor por defecto es wrap=off, y en este caso las lneas son enviadas en la misma forma en la que se escriban. No se cambia de lnea hasta que el usuario introduce un salto de lnea, y si las lneas son ms largas que el ancho de la ventana, aparecer una barra de desplazamiento horizontal. Las lneas son enviadas al servidor de la misma forma en que fueron escritas. Si utilizamos wrap=phyhsical, el texto salta automticamente al llegar al borde derecho del cuadro. Estos saltos automticos son sustituidos por saltos de lnea fsicos al enviar el contenido del cuadro de texto al servidor. Por ltimo, con wrap=virtual tambin haremos que el texto salte automticamente, pero en este caso los saltos automticos no se sustituyen por saltos de lnea reales, y las lneas de texto son enviadas al servidor tal cual fueron escritas, como si hubiramos elegido la opcin off. Por ejemplo, el siguiente cdigo:
<form action=mailto:usuario@servidor.com method="post" enctype="text/plain"> Introduce tus comentarios:<br/> <textarea name="Comentarios" rows=6 cols=40> </textarea> <input type=submit value=enviar> </form>

Resultar en lo siguiente:

Una vez que el usuario haya escrito sus comentarios dentro del formulario y haya pulsado el botn de envo, recibiremos un e-mail con el siguiente texto: Comentarios=Bla bla bla...

4.12.4. Contraseas (passwords) y campos ocultos

<input type=password size=ancho visible maxlength=longitud_mxima name=identificador value=contenido por defecto>

La etiqueta <input> con el atributo type=password sirve para crear campos de contrasea, que son en realidad casillas de texto, con la particularidad de que al escribir, el texto se sustituye por asteriscos. Al enviar los datos al servidor, stos sern enviados como texto normal. Los atributos que admite un campo password son los mismos que en el caso de un campo de edicin normal.
<input type=hidden name=identificador value=contenido>

El campo tipo hidden (oculto) sirve para incluir datos en el formulario que no sean accesibles al usuario, pero que sin embargo sern enviados al servidor. Debido a ello, este tipo

39

Manual de

HTML 4.01 XHTML 1

de campos no tiene ninguna representacin en pantalla, slo a nivel interno. Como en los casos anteriores, value indicar el valor que ser enviado para la variable especificada en el atributo name. Por ejemplo, podramos usar un campo oculto para enviar al servidor la fecha actual, o tambin comprobaciones de cara a un enlace con una base de datos.

4.12.5. Casillas de verificacin (checkbox) y botones de radio (radio buttons)

<input type=checkbox name=identificador [checked]>

Si queremos que el usuario confirme una opcin determinada, podemos hacer uso de una casilla de verificacin o checkbox. En este caso, a diferencia del resto, el campo checkbox se enva al servidor nicamente si la casilla de verificacin est activada en el momento del envo. Por ello, podemos poner mltiples campos checkbox con el mismo identificador y diferentes valores, que generarn mltiples entradas al ser enviado el formulario al servidor (aquellas que estn marcadas). Por defecto, el valor que tendr un campo checkbox es on. El atributo checked es opcional, y si se incluye, la casilla de verificacin aparecer activada por defecto. Por ejemplo, si solicitamos al usuario que confirme su inclusin en una lista de correo:
<form ...> <input type="checkbox" name="lista" value=incluir>S, deseo ser incluido lista de correo </form>

en la

Obtendremos el resultado siguiente en pantalla:

Si el usuario marca esta casilla y pulsa el botn de envo, se enviar el dato adicional lista=incluir. Si el usuario deja la casilla sin marcar, simplemente no se enviar nada.
<input type=radio name=identificador value=valor [checked]>

Cuando queremos que el usuario elija una nica opcin entre varias, podemos hace uso de los botones de radio. En este caso, puesto que debemos escoger entre varios elementos que van a compartir el mismo identificador, debemos colocar varias etiquetas <input>, que tendrn el mismo identificador en el atributo name y diferentes valores dentro del atributo value. Como en el caso anterior, el atributo opcional checked indica la opcin por defecto, de forma que slo podremos colocarlo en una de las etiquetas <input>. Al enviar el formulario, slo se enviar el valor correspondiente a la opcin que se haya marcado. Por ejemplo, si solicitamos al usuario que defina cul es su sistema operativo preferido:
<form> &iquest; Cu&aacute;l es tu sistema operativo preferido?<br/> <input type="radio" name="so" value="w95"> Windows 95/98 <input type="radio" name="so" value="w2k"> Windows 2000 <input type="radio" name="so" value="wnt"> Windows nt <input type="radio" name="so" value="linux" checked=checked> Linux </form>

Que resultara en:

40

Manual de

HTML 4.01 XHTML 1

Como vemos, el atributo checked es el que define cul ser la opcin marcada por defecto. Cuando el formulario se enve, lo que se enviar ser slo la opcin marcada, es decir: so=Linux (o la que se haya marcado). En estos casos, es importante que el atributo name sea el mismo para todos los botones de radio relacionados entre s.

4.12.6. Listas desplegables

<select name=identificador size=nmero de lneas [mltiple]> <option value=valor1 [selected]>texto opcin 1 <option value=valor2>texto opcin 2 ... </select>

Las listas desplegables se componen de dos etiquetas. La etiqueta <select> es una etiqueta contenedor, en la cual se coloca el atributo NAME para indicar el identificador correspondiente a la lista. Adems, el atributo size sirve para indicar el nmero de opciones que sern visibles a la vez en la pantalla, de forma que podemos tener una lista de seleccin en lugar de una lista desplegable si especificamos un size mayor que 1 (valor por defecto). En estos casos, podemos aadir tambin el atributo multiple para indicar que es posible seleccionar ms de una opcin. Si hacemos esto, es conveniente tambin recordar al usuario que debe mantener pulsada la tecla Control si desea seleccionar ms de una opcin. Por otro lado, entre las etiquetas <select>...</select> colocaremos tantas etiquetas <option> como opciones deba tener la lista, dentro de las cuales tendremos los siguientes atributos:
value=valor

Indica el valor que se enviar al servidor en caso de que se seleccione esta opcin. Este atributo no tiene nada que ver con el texto que aparezca en el men, que debe colocarse detrs de la etiqueta <option>. Si no se especifican los atributos value, se usar dicho texto externo como valor para enviar al servidor.
selected

Este atributo opcional indica que sta ser la opcin seleccionada por defecto en el momento de cargarse el formulario. Si no se especifica este atributo en ninguna opcin, la opcin seleccionada por defecto ser la primera. Ejemplo 1: Lista desplegable
<form ...> <select name=eleccin> <option value=Opc1>Opci&oacute;n 1 <option value=Opc2>Opci&oacute;n 2 <option value=Opc3>Opci&oacute;n 3 <option value=Opc4>Opci&oacute;n 4 </select> <input type=submit value=enviar> </form>

Ejemplo 2: Lista de seleccin

<form ...> <select name=eleccin size=5> <option value=Opc1>Opci&oacute;n 1

41

Manual de
<option value=Opc2>Opci&oacute;n 2 <option value=Opc3>Opci&oacute;n 3 <option value=Opc4>Opci&oacute;n 4 <option value=Opc5>Opci&oacute;n 5 <option value=Opc6 selected>Opci&oacute;n 6 </select> <input type=submit value=enviar> </form>

HTML 4.01 XHTML 1

En cualquiera de los casos, al enviar el formulario, lo que llegar ser eleccion=Opc3 (o la que se hubiera seleccionado) salvo que seleccionemos ms de una opcin con el atributo multiple, en cuyo caso se enviar: eleccion=Opc1&eleccion=Opc2&eleccion=Opc5, por ejemplo, en funcin de las opciones que haya seleccionad el usuario.

4.12.7. Botones e imgenes

<input type=button name=identificador value=texto a mostrar>

Este tipo de control es un botn genrico, que puede usarse para aadir otras funciones a nuestro formulario (como realizar clculos, etc.). Este tipo de elementos se usan en conjuncin con JavaScript o VBScript. En este caso, el atributo name servir para darle un nombre nico al botn para poder alterar sus propiedades desde nuestros scripts.
<input type=image name=identificador src=url o ruta width=ancho height=alto border=grosor>

Este tipo de control mostrar una imagen sobre la que podemos hacer clic, produciendo el mismo efecto que si tuviramos un botn de tipo submit. La diferencia principal es que en este caso se enviarn adems las coordenadas del punto sobre el que hemos pulsado en la imagen, en dos pares de valores del tipo: valorx=coordenada_x, valory=coordenada_y. Estos valores son enviados aadiendo al nombre del identificador x o y segn el caso. El atributo src indica la imagen a mostrar en el formulario, y se admiten tambin los atributos de imgenes width, height o border. Otro tipo de botn muy til es el botn de examinar, que no sirve para seleccionar archivos de nuestro ordenador. Este botn abrir la ventana de examinar del sistema operativo.
<input type="file" name="examina" size="18">

El atributo size sirve para indicar el tamao de casilla de texto, que aparece a la izquierda del botn examinar y que es donde aparecen los nombres de los archivos seleccionados.

4.12.8. Otros atributos:

disabled. Asignando el atributo disabled a un elemento, evita que este pueda recibir el

focus, e incluso impide que el usuario pueda introducir valores en el. Puede seguir mostrando valores, texto, etc, pero el usuario no puede modificarlos. readonly. El modificador READONLY es ligeramente diferente al DISABLED, ya que permite que el elemento reciba el focus, aunque sus contenidos o valores no pueden ser modificados. accesskey. El modificador ACCESSKEY, puede ser utilizado para especificar una tecla rpida para el <input>, Es decir activarlo pulsando ALT + Accesskey, como en el caso de los mens estndar de los programas de windows. tabindex. Puede ser utilizado para asignar un orden de tabulacin para que el usuario pueda navegar a travs del formulario utilizando el tabulador. Por ejemplo, si un determinado elemento tiene el focus en un momento determinado, y el usuario presiona TAB, pasar el focus al elemento que tenga en TABINDEX el nmero inmediatamente superior.

4.13. Sonido
Una pgina web puede tambin tener sonidos incorporados, bien como un fondo sonoro que comienza a orse automticamente al cargar la pgina, o como una opcin para que la active el propio usuario.

42

Manual de

HTML 4.01 XHTML 1

Para poder escuchar estos sonidos es necesario disponer, como es lgico, de una tarjeta de sonido con sus correspondientes altavoces o auriculares. Por otro lado, el servidor donde alojemos la pgina debe tener configurados correctamente los tipos MIME para los formatos de sonido .mid y .wav, ya que de no ser as, aunque coloquemos en el servidor nuestro documento HTML acompaado por el correspondiente fichero de sonido, ste no se interpretar correctamente y no sonar. En caso de ocurrir esto, es necesario ponerse en contacto con los administradores del servidor para realizar correctamente la configuracin de los tipos MIME. Adems, los tipos MIME afectan tambin a otros contenidos, como Flash o pginas WAP para telfonos mviles. Adems de todo esto, hay que tener en cuenta que Internet Explorer y Netscape no poseen las mismas caractersticas, y por ello es necesario utilizar etiquetas diferentes para cada uno de ellos.

4.13.1. Fondos sonoros

Podemos incorporar un sonido que servir de fondo musical para nuestra pgina. Este puede estar en cualquiera de los formatos (.mid o .wav), siempre teniendo en cuenta la advertencia sobre los tipos MIME en el servidor.
<bgsound src=fichero de sonido loop=nmero>

En el caso de Internet Explorer, desde la versin 2.0 se puede utilizar esta etiqueta para colocar un fondo musical en nuestras pginas. Los atributos son:
src=fichero de sonido

Funciona de la misma forma que el atributo SRC de la etiqueta <img>, es decir, indica la ubicacin del fichero de sonido, ya sea como URL o de forma absoluta o relativa en el mismo servidor.
loop=nmero

El atributo LOOP (en ingls, bucle) sirve para especificar el nmero de veces que debe sonar el fichero de sonido. Si se pone LOOP=-1 o loop=infinite, el sonido seguir sonando indefinidamente. Si se omite este atributo el fichero sonar una sola vez.
<embed src=fichero de sonido width=ancho height=alto border=grosor alt=texto alternativo align=alineacin autostart=true|false hidden=true|false>

En realidad, esta es una etiqueta de propsito general para insertar objetos de diferentes tipos, no soportados directamente por el navegador, y que deben ser interpretados por mdulos aadidos al navegador llamados plug-in. Aunque ahora tambin Internet Explorer la reconoce, esta etiqueta era originalmente especfica de Netscape, y la usaremos para incrustar un objeto de sonido en Netscape, de forma que se comporte de un modo muy similar a bgsound en Internet Explorer. En este caso, la diferencia principal es que en Netscape aparecer por defecto una consola que tiene diferentes teclas de play, stop, pausa, etc. Esta consola es la que se ver afectada por los atributos width, height, border, alt o align, que funcionan del mismo modo que en el caso de la etiqueta <img>. El fichero de sonido puede estar en formato .mid o .wav, pero siempre teniendo en cuenta la advertencia sobre los tipos MIME ya comentada.
autostart=true|false

Si se pone este atributo con el valor true, el sonido comenzar a sonar automticamente.
hidden=true|false

Si colocamos el atributo hidden=true conseguiremos ocultar la consola de botones, con lo que se comporta de una forma similar a <bgsound>.

4.13.2. Activacin del sonido por el propio usuario

Activacin del sonido por el propio usuario

43

Manual de

HTML 4.01 XHTML 1

Hasta aqu hemos visto cmo poner un sonido de fondo en una pgina. Hay otra opcin, mucho ms sencilla, y es la de poner un enlace a un fichero de sonido, de tal manera, que al pulsarlo se ejecute el fichero. Esto se consigue con un simple enlace que haga referencia al archivo de sonido que deseamos escuchar. Por ejemplo, si queremos or el fichero nocambie.mid:
Escucha esta <a href="nocambie.mid">m&uacute;sica</a>

Al pulsar el enlace se activar, en una ventana aparte, el programa que ejecuta el sonido. Esta tcnica es vlida para todos los navegadores, incluso las versiones ms antiguas, por supuesto con la condicin de que se haya configurado un programa auxiliar capaz de reproducir los ficheros de tipo .mid o .wav. Ejemplo de uso de embed
<html> <head> <title>ejemplo del uso de &lt;embed&gt;</title> </head> <body> <table border=0> <tr valign=bottom> <td><embed src="incrustado.mid" width=320 height=45></td> <td><h1>sonido</h1> <b> <code>&lt;embed src="incrustado.mid" width=320 height=45 &gt; </code> </b> </td> </tr> <tr valign=top> <td><embed src="incrustado.avi" width=320 height=240></td> <td><h1>v&iacute;deo</h1> <b> <code>&lt;embed src="incrustado.avi" width=320 height=240 &gt;</code> </b> </td> </tr> <tr valign=top> <td><embed src="incrustado.wrl" width=320 height=240></td> <td><h1>realidad virtual</h1> <b> <code>&lt;embed src="incrustado.wrl" width=320 height=240 &gt;</code> </b> </td> </tr> </table> </body> </html>

44

Manual de

HTML 4.01 XHTML 1

Visualizacin del cdigo anterior en Internet Explorer.

45

Manual de

HTML 4.01 XHTML 1

4.14. Marcos o frames

Los frames permiten mostrar la ventana del navegador dividida en zonas independientes, cada una de las cuales puede ser actualizada por separado. Podremos cargar un nuevo documento en una de las zonas sin afectar al resto, lo que es especialmente til en los casos en que una determinada informacin se conserva a lo largo de un conjunto de pginas web, como es el caso de una tabla de contenidos o un men de opciones, por ejemplo. Los frames son creados con dos etiquetas diferentes: <frameset> y <frame>: Adems, cuando se hace una divisin de la pgina en frames, en realidad usaremos varios documentos HTML para una nica pgina. Por un lado, el documento padre contendr la definicin de la estructura de frames y sus proporciones, y los documentos hijos contendrn los contenidos en s.

4.14.1. Estructura del documento principal

<frameset rows|cols=filas|columnas border=grosor framespacing=espaciado> referencias a los frames de contenidos </frameset>

Esta etiqueta define la divisin que se har de la ventana del navegador, bien sea en filas (ROWS) o en columnas (COLS). Hay que tener en cuenta que estas divisiones deben ser completas, es decir, se dividir la ventana de lado a lado, aunque se pueden anidar varios frameset si queremos dividir luego cada zona, como veremos ms adelante. La etiqueta <frameset> se colocar en un documento aparte, que har la llamada al resto de documentos a cargar en los diferentes frames y que sern los que realmente contengan los contenidos. La estructura general para un documento de este tipo ser la siguiente:
<html> <head> <title>t&iacute;tulo de la p&aacute;gina</title> </head> <frameset ...> ... frames ... </frameset> </html>

Como vemos, en este caso no se incluye la etiqueta <BODY>, puesto que en este documento padre no existen contenidos reales, sino tan solo la llamada a los documentos que contienen estos contenidos.
ROWS|COLS=divisin en filas|columnas

El valor que debemos poner dentro del atributo rows o cols es una secuencia de nmeros separados por comas, que indicarn las dimensiones de cada frame. Por ejemplo, para dividir la ventana en 3 columnas de 100, 200 y 300 pixels de ancho, respectivamente, pondremos: cols=100,200,300. Sin embargo, puesto que los navegadores pueden estar trabajando a resoluciones de pantalla muy variadas, podemos expresar las medidas como porcentajes o bien utilizar el smbolo del asterisco *. El asterisco significa espacio sobrante y har que el navegador debe utilice el espacio sobrante para representar ese frame. Podemos colocar tambin un nmero seguido de un asterisco para indicar proporciones del espacio sobrante, como por ejemplo:
<frameset rows=*,100,20%,3*> ... </frameset>

Esto crear una divisin en cuatro filas: la segunda medir 100 pixels de alto, la tercera ocupar el 20% de la altura total de la ventana y la primera y cuarta se repartirn el espacio sobrante (siendo la cuarta el triple de alto que la primera).
border=grosor

Este atributo es especfico de Netscape, e indica el grosor de los bordes entre los frames al aplicar la divisin.

46

Manual de
framespacing=espaciado

HTML 4.01 XHTML 1

Este atributo especfico de Internet Explorer indica el espacio que se dejar vaco entre los diferentes frames, actuando de un modo similar al atributo border en Netscape. Lo habitual hoy en da es utilizar border=0 framespacing=0, de modo que no exista espacio vaco entre los diferentes frames que conforman nuestra pgina.
<frame src=url o ruta name=identificador marginwidth=margen horizontal marginheight=margen vertical scrolling=yes|no|auto frameborder=yes|no noresize>

La etiqueta <frame> es la que nos servir para insertar los diferentes documentos que irn en cada divisin del frameset. Esta etiqueta no necesita englobar ningn elemento, por lo que no existe etiqueta de cierre. En principio, deben colocarse tantas etiquetas <frame> como divisiones se hayan definido en la etiqueta <frameset>, aunque puede sustituirse una etiqueta <frame> por un frameset completo (ver apartado 10.3. anidacin de framesets). Los atributos de esta etiqueta son los siguientes:
src=url o ruta

Indica el documento HTML que debe cargarse en esa divisin concreta del frameset, de acuerdo con el orden definido en el atributo ROWS o COLS de la etiqueta <FRAMESET>. Es decir, si tenemos el siguiente cdigo:
<frameset cols=150,*> <frame src=menu.htm> <frame src=content.htm> </frameset>

La pgina menu.htm se cargar en la columna izquierda (de 150 pixels de ancho) y la pgina content.htm se cargar en la derecha (que ocupar el resto del ancho disponible).
name=identificador

Este atributo sirve para asignarle un nombre al frame donde se colocarn los contenidos. De esta forma, podremos crear enlaces que carguen nuevas pginas en la zona concreta que nosotros queramos, mediante el atributo target de la etiqueta <a> (ver apartado 10.2. Cargar pginas en diferentes frames).
marginwidth=margen horizontal marginheight=margen vertical

Estos modificadores aceptan valores en pixels, y fuerzan un desplazamiento de los contenidos del frame de acuerdo con el nmero de pixels especificado que deeb tener de margen. No aceptan valores menores que 1.
scrolling="yes|no|auto"

Controlan la aparicin de la barra de scroll. Si utilizamos "yes", la barra de scroll aparecer aunque no sea necesaria. Utilizando "auto" slo aparecer barra de scroll cuando los contenidos de la pgina lo requieran. Utilizar el valor "no" puede resultar peligroso, ya que no aparecer la barra de scroll en ningn caso, por lo que si los contenidos no caben en pantalla, el usuario no podr verlos.
noresize

Por defecto, todos los frames que definamos en nuestro documento, pueden ser cambiados de tamao por el usuario. Utilizando este modificador, (que no requiere valor), evitaremos que el usuario modifique el tamao de los frames.
frameborder="yes|no|0"

Permite controlar el borde del frame. Utilizando el valor =0 en Internet Explorer, los bordes no sern mostrados. Netscape soporta tambin este modificador, pero solo si toma los valores "yes | no".

47

Manual de

HTML 4.01 XHTML 1

Si deseamos crear una pgina en la que los bordes de los frames no se vean en ninguno de los navegadores, deberemos utilizar un cdigo como el siguiente: <frameset cols="120,*" frameborder="no" framespacing=0 border=0> <frame src="menu.htm" name="menu"> <frame src="principal.htm" name="contenidos"> </frameset>

4.14.2. Cargar pginas en diferentes frames

Para utilizar los marcos de manera eficaz, es necesario decidir donde se cargarn los documentos a los que apunta cada enlace. Para ello, es imprescindible que en el documento principal, hayamos dado un nombre a cada uno de los marcos creados, mediante el modificador name="nombre de marco" acompaando a la etiqueta frame. Adems, en cada uno de los enlaces que aparezcan en los documentos cargados dentro de los marcos, es necesario aadir el modificador target="nombre de marco", que le indicar al navegador en cual de los marcos debe cargar el documento al que apunta.

Por ejemplo, para una presentacin como la de la figura, el cdigo del frameset ser:

<html> <head> <title> ejemplo de frames </title> </head> <frameset cols="180,*" framespacing=0 border=1 frameborder="yes"> <frame src="menu.htm" name="menu" noresize scrolling="no"> <frame src="contenido.htm" name="contenidos" scrolling="auto"> </frameset> </html>

Y el cdigo de men.htm:
<html> <head> <title> men&uacute;</title> </head> <body bgcolor="marineblue"> <a href="compania.htm" target="contenidos">acerca de la compa&ntilde;ia</a> <a href="clientes.htm" target="contenidos">clientes de la compa&ntilde;ia</a> <a href="contacto.htm" target="contenidos">contacte con nosotros</a> 48 </body> </html>

Manual de

HTML 4.01 XHTML 1

4.14.3. Anidacin de framesets

Hemos visto que, la etiqueta frameset admite como modificadores rows (para dividir en filas) o cols (para divisin en columnas), pero slo uno de ellos, lo que nos permite distribuir frames en horizontal o bien en vertical. Sin embargo, se pueden obtener distribuciones ms complejas anidando filas dentro de una columna, o viceversa. Supongamos que queremos una distribucin como la de la imagen: MEN U TITULO

CONTENIDOS

INFERIOR En este caso, hemos dividido la ventana en dos columnas, y la segunda columna, ha sido dividida en 3 filas. El cdigo necesario para esta distribucin de frames es el siguiente:
<frameset cols=" 150, * " > <frame src="menu.htm" name="menu"> <!-- en el lugar en el que ira el tag FRAME para la segunda columna, debo incluir un segundo frameset, para hacer la divisin en filas --> <frameset rows="80,*,80"> <frame src="titulo.htm" name="titulo"> <frame src="contenido.htm" name="contenido"> <frame src="inferior.htm" name="inferior"> </frameset> </frameset>

Es decir, primero se realiza la divisin por columnas, y se sustituir el tag frame de la segunda columna por un nuevo frameset que la subdividir en filas. En otros casos, puede ser interesante anidar dos frameset en documentos independientes. Para el mismo ejemplo anterior, crearamos dos documentos htm independientes, en el primero de ellos, introducimos el cdigo frameset adecuado para realizar la divisin por columnas, y desde l, llamaramos a un segundo documento que contendr el frameset para la divisin en filas, como se puede ver en el siguiente ejemplo. Documento index.htm
<frameset cols=" 150, * " > <frame src="menu.htm" name="menu"> <!-- en la segunda columna, cargaremos index2.htm, que contendr el un nuevo frameset --> <frame src="idex2.htm" name="principal"> </frameset>

Documento index2htm
<frameset rows="80,*,80"> <frame src="titulo.htm" name="titulo"> <frame src="contenido.htm" name="contenido"> <frame src="inferior.htm" name="inferior"> </frameset>

4.14.4. Frames Flotantes (Iframe)

El concepto de frames flotantes se introdujo con Internet Explorer 3. Son parecidas a las frames habituales, salvo porque pueden ir situadas en cualquier parte del documento HTML, como si se tratara de una imagen.

49

Manual de

HTML 4.01 XHTML 1

Una segunda diferencia con respecto a los frames tradicionales, es que se inserta en el cdigo HTML como si se tratara de una imagen, admitiendo las propiedades Width, Height, Hspace, Vspace y align, de la misma manera que si de una imagen se tratara. Los frames flotantes se definen con los tags <iframe> ... </iframe>, y admiten las siguientes propiedades: title: Sera el equivalente al ALT en una imagen, es decir un texto que aparecer cuando el usuario para el cursor del ratn sobre el rea del frame dinmico border, bordercolor, frameborder, name, src, en las mismas condiciones que si de un frame normal se tratara.
SCROLLING="no|auto"

50

Manual de

HTML 4.01 XHTML 1

Anexo n 1. Colores
Nombre aliceblue aquamarine bisque Blue burlywood chocolate cornsilk darkblue darkgray darkmagenta darkorchid darkseagreen darkturquoise deepskyblue firebrick fuchsia gold green hotpink ivory lavenderblush lightblue Nmero #F0F8FF #7FFFD4 #FFE4C4 #0000FF #DEB887 #D2691E #FFF8DC #00008B #A9A9A9 #8B008B #9932CC #8FBC8F #00CED1 #00BFBF #B22222 #FF00FF #FFD700 #008000 #FF69B4 #FFFFF0 #FFF0F5 Nombre antiquewhite azure black blueviolet cadetblue coral crimson darkcyan darkgreen darkolivegreen darkred darkslateblue darkviolet dimgray floralwhite gainsboro goldenrod greenyellow indianred khaki lawngreen Nmero
#FAEBD7 #F0FFFF #000000 #8A2BE2 #5F9EA0 #FF7F50 #DC143C #008080 #006400

Nombre aqua beige blanchedalmond brown chartreuse cornflowerblue cyan darkgoldenrod darkkhaki darkorange darksalmon darkslategray deeppink dodgerblue forestgreen ghostwhite gray honeydew

Nmero #00FFFF #F5F5DC #FFEBCD #A52A2A #7FFF00 #6495ED #00FFFF #B8860B #BDB76B #FF8600 #E9967A #2F4F4F #FF1493 #1E90FF #228B22 #F8F8FF #808080 #FFF0F0 #4B0080 #E6E6FA #FFFACD #E0FFFF #D3D3D3 #20B2AA #B0C4DE #32CD32 #800000 #BA55D3 #7B68EE #C71585 #FFE4E1 #000080 #6B8E23

#556B2F #8B0000 #483D8B #9400D3 #696969 #FFFAF0 #DCDCD C #DAA520 #ADFF2F

#CD5C5C indigo #F0E68C #7CFC00 #FF8080 #90EE90 #FFA07A #778899 #00FF00 #FF00FF #0000CD #3CB371 #48D1CC #F5FFFA lavender lemonchiffon lightcyan lightgrey lightseagreen lightsteelblue limegreen maroon mediumorchid mediumslateblue mediumvioletred mistyrose

#ADD8E6 lightcoral lightgreen lightsalmon lightslategray lime magenta

lightgoldenrodyel #FAFAD2 low lightpink lightskyblue lightyellow linen #FFB6C1 #87CEFA #FFFFE0 #FAF0E6

mediumaquamari #66CDAA mediumblue ne mediumpurple #9370DB mediumseagreen mediumturquoise mintcream navajowhite olive

mediumspringgre #00FA9A en midnightblue moccasin oldlace #191970 #FFE4B5 #FDF5E6

#FFDEAD navy #808000 olivedrab

51

Manual de

HTML 4.01 XHTML 1

orange palegoldenrod palevioletred peru powderblue rosybrown salmon seashell skyblue snow tan tomato wheat yellow

#FFA500

orangered

#FF4500 #98FB98 #FFEFD5

orchid paleturquoise peachpuff

#DA70D6 #AFEEEE #FFDAB9 #DDA0DD #FF0000 #8B4513 #2E8B57 #C0C0C0 #708090 #4682BA #D8BFD8 #EE82EE #F5F5F5 #

#EEE8AA palegreen #DB7093 #CD853F #B0E0E6 #BC8F8F #FA8072 #FFF5EE #87CEEB #FFFAFA #D2B48C #FF6347 #F5DEB3 #FFFF00 papayawhip pink purple royalblue sandybrown sienna slateblue springgreen teal turquoise white yellowgreen

#FFC0CB plum #800080 #4169E1 #FAA460 #A0522D red saddlebrown seagreen silver

#6A5ACD slategray #00FF7F #008080 #40E0D0 #FFFFFF #9ACD32 steelblue thistle violet whitesmoke

Anexo n 2. Caracteres especiales

Los caracteres especiales constituyen una gran ayuda para quienes escribimos textos en espaol, pues permiten generar las vocales acentuadas : "", "","", "","", y la letra "". Para generar un carcter especial, se usa la construccin:

&nombre_entidad;
O bien: &#numero_entidad; Aunque siempre es preferible utilizar el nombre que el nmero.

A2.1. Caracteres bsicos Cdigo &lt; &gt; &amp; &quot; A2.2.Acentos y marcas diacrticas Carct er Carcter < > & "

Cdigo
AElig; &Aacute;

Descripcin
diptongo AE mayscula - ligadura A mayscula, acento agudo

52

Manual de

HTML 4.01 XHTML 1

&Acirc; &Agrave; &Aring; &Atilde; &Auml; &Ccedil; &ETH; &Eacute; &Ecirc; &Egrave; &Euml; &Iacute; &Icirc; &Igrave; &Iuml; &Ntilde; &Oacute; &Ocirc; &Ograve; &Oslash; &Otilde; &Ouml; &THORN; &Uacute; &Ucirc; &Ugrave; &Uuml; &Yacute; &aacute; &acirc; &aelig;

A mayscula, acento circunflejo A mayscula, acento grave A mayscula, anillo A mayscula, tilde A mayscula, dieresis o umlaut C mayscula, cedilla Eth mayscula, Islndica E mayscula, acento agudo E mayscula, acento circunflejo E mayscula, acento grave E mayscula, dieresis o umlaut I mayscula, acento agudo I mayscula, acento circunflejo I mayscula, acento grave I mayscula, dieresis o umlaut N mayscula, tilde O mayscula, acento agudo O mayscula, acento circunflejo O mayscula, acento grave O mayscula, slash O mayscula, tilde O mayscula, dieresis o umlaut THORN mayscula, Islndica U mayscula, acento agudo U mayscula, acento circunflejo U mayscula, acento grave U mayscula, dieresis o umlaut Y mayscula, acento agudo a minscula, acento agudo a minscula, acento circunflejo a minsculae diptongo - ligadura

53

Manual de

HTML 4.01 XHTML 1

&agrave; &aring; &atilde; &auml; &ccedil; &eacute; &ecirc; &egrave; &eth; &euml; &iacute; &icirc; &igrave; &iuml; &ntilde; &oacute; &ocirc; &ograve; &oslash; &otilde; &ouml; &szlig; &thorn; &uacute; &ucirc; &ugrave; &uuml; &yacute; &yuml;

a minscula, acento grave a minscula, anillo a minscula, tilde a minscula, dieresis o umlaut c minscula, cedilla e minscula, acento agudo e minscula, acento circunflejo e minscula, acento grave eth minscula, Islndica e minscula, dieresis o umlaut i minscula, acento agudo i minscula, acento circunflejo i minscula, acento grave i minscula, dieresis o umlaut n minscula, tilde o minscula, acento agudo o minscula, acento circunflejo o minscula, acento grave o minscula, slash o minscula, tilde o minscula, dieresis o umlaut s aguda minscula, Alemana - ligadura sz thorn minscula, Islndica u minscula, acento agudo u minscula, acento circunflejo u minscula, acento grave u minscula, dieresis o umlaut y minscula, acento agudo y minscula, dieresis o umlaut

A2.3. Caracteres Especiales

54

Manual de

HTML 4.01 XHTML 1

Cdigo &acute; &brvbar; &cedil; &cent; &copy; &curren; &deg; &divide; &frac12; &frac14; &frac34; &iexcl; &iquest; &laquo; &macr; &micro; &middot; &nbsp; &not; &ordf; &ordm; &para; &plusmn; &pound; &raquo; &reg; &sect; &shy; &sup1; &sup2;

Carcter

Descripcin acento agudo barra vertical rota cedilla centavo copyright signo monetario grado divisin un medio un cuarto tres cuartos signo exclamacin invertido - izquierdo signo pregunta invertido - izquierdo ILeft angle quote, guillemotleft acento Macron micro punto al medio espacio

no ordinal femenino ordinal masculino prrafo Ms o menos Libra esterlina Right angle quote, guillemotright marca registrada seccin lnea de quiebre de palabra

superndice 1 superndice 2

55

Manual de

HTML 4.01 XHTML 1

&sup3; &times; &uml; &yen;

superndice 3 signo multiplicacin Umlaut - dieresis yen

56