El Lenguaje HTML - UNED PDF

Módulo IV
El lenguaje HTML para la

creación de documentos
en el WWW
Prólogo
HTML (HyperText Markup Language) es el lenguaje propio del

“Word Wide Web” (WWW) de manera que todos sus documentos
están escritos utilizando la sintaxis de este lenguaje.
La característica básica de HTML es ser un lenguaje que permite
describir documentos con estructura de hipertexto y que se puede
transportar de forma directa a diferentes entornos de computadoras
(PC, Macintosh, estaciones de trabajo, ...) sin tener que modificar
nada.
Un hipertexto se puede ver como una red de información textual de
naturaleza no secuencial, ya que no existe a priori un orden
preestablecido en la secuencia de lectura de la información. Esta
descripción contrasta con el concepto del libro tradicional que es
esencialmente secuencial, es decir, preestablece una ordenación
para la lectura del texto. Por ejemplo, supongamos que comenzamos
a leer un texto denominado A; a continuación, en un libro tendría que
pasar al texto B y así sucesivamente, por el contrario un hipertexto nos
podría permitir pasar al texto B, al C o al F y a su vez en estos textos
puede que existan otras alternativas. De esta forma, un sistema
hipertexto presenta elecciones diferentes a los lectores y el usuario
individualmente determina que opción elige de entre las posibles que
el autor ha presentado.
Una definición más formal es concebir un hipertexto como una red
de componentes o nodos unidos mediante un conjunto de enlaces que
conectan siempre un nodo de partida con un nodo de destino, lo que
establece una determinada topología entre los componentes de la red.
De esta conceptualización se puede deducir que los elementos
básicos que caracterizan un hipertexto son tres: los nodos, los enlaces
y los anclajes.
Considerando ésta definición, en un hipertexto escrito con HTML
los nodos corresponden a los documentos del hipertexto, en donde se
incluyen las directivas de los enlaces a otros nodos y las anclas.
Además, con HTML se hace una descripción del documento
especificando en el texto la estructura lógica del contenido (tales como
títulos, párrafos de texto normal, definiciones, listas, enumeraciones,
...) así como los efectos que se quieren dar (por ejemplo, donde poner
el texto en cursiva o en negrita, o donde situar un gráfico). La
presentación final la hacen los visualizadores (Mosaic, Netscape,
Explorer, ...).
Los documentos HTML son puro texto (en ASCII), por lo que se
pueden escribir con cualquier editor de texto. Aunque en otros
módulos se verán editores de tipo WYSIWYG (What You See Is What
You Get) que facilitan el escribir los documentos HTML.
En este módulo se explica como utilizar los diferentes elementos y
directivas que describen a los documentos HTML. La versión que se
explica es la 4, aunque también se incluyen las extensiones
incorporadas por Netscape y Microsoft.
El módulo consta de seis temas y dos anexos. El primer tema es
una introducción al lenguaje HTML y con él podrá crear su primer
documento HTML. En el segundo y tercer tema se profundiza en la
creación de documentos HTML, viendo nuevas directivas y elementos
que enriquecen nuestros documentos. El cuarto tema introduce las
hojas de estilo y las capas. El quinto básicamente es un manual de
referencia de todas las directivas de HTML con las extensiones de
Netscape y Microsoft. El tema seis es una guía de estilo que pueden
seguir cuando vayan a escribir sus documentos hipertexto. Los
anexos son una lista de entidades para los caracteres de Latin 1 y las
referencias numéricas de los mismos.
Aunque puede escribir documentos HTML con editores específicos,
como los explicados en otros módulos, sin tener que saber HTML,
también es verdad que estos tienen ciertos inconvenientes que hay
que tener en cuenta si se quiere utilizar la mayoría de las
características de las nuevas versiones de HTML. Inconvenientes
como los siguientes:
• No reconocen nuevas directivas de HTML, ni las extensiones

de Netscape o de Explorer (excepto, por supuesto, si el editor es
de Netscape o de Microsoft).
• Algunos editores tampoco soportan formularios, marcos ni

tablas.
• Añaden cierta información (como el nombre del editor) y

directivas propias al documento que se está haciendo.
• Algunos eliminan directivas que no entienden, aunque formen

parte del estándar de HTML.
• Ocupan más espacio en disco y más memoria.
• No son tan intuitivos de aprender, como puedan parecer.
• Por último, existe un coste económico, que no se tiene con los

editores de texto incluidos con el software del sistema.
En resumen son más caros y en general menos flexibles que los
simples editores de texto. Aunque también tienen sus ventajas y
permiten escribir más rápido los documentos.
General
Índice
Módulo IV
El lenguaje HTML para la creación

de documentos en el WWW
Tema 1 Introducción al lenguaje HTML
1.1 Introducción al HTML 1

1.2 Elementos de los documentos HTML 5
1.2.1 Directivas anidadas 7
1.2.2 Espacios en blanco y saltos de línea 7
1.2.3 Atributos de los elementos 8
1.2.4 Comentarios 9
1.3 Estructura de los documentos HTML 9
1.3.1 El elemento HTML 10
1.4 Editando y visualizando una página Web 10
1.4.1 Mostrar en un navegador la página creada 12
1.4.2 Las primeras líneas de la página 13
1.4.3 El contenido visible del documento 15
1.5 Un primer documento HTML 17
1.5.1 La cabecera y el título 17
1.5.2 El cuerpo 18
1.5.3 Una sección dentro del documento 18
1.5.4 Enlaces a otros documentos 19
1.5.5 Imágenes en el documento 22
1.6 Esquema de denominación para los documentos HTML 23
1.6.1 Tipos de archivos MIME 25
Tema 2 Diseño de documentos HTML
2.1 Puntualizaciones para el diseño de documentos 27
I
El lenguaje HTML para la creación de documentos en el WWW
2.1.1 Botones de navegación 30

2.1.2 Índice o tabla de contenido 31
2.1.3 Listas 32
2.1.4 Proporcionando formatos alternativos 34
2.2 Formateando el texto 34
2.2.1 Modificando la fuente del texto 36
2.2.2 Cambiando tamaños y colores para el texto 39
2.2.3 Resaltando el texto 40
2.2.4 Elección de los valores por defecto de la fuente del texto 41
2.3 Composición de la página 42
2.3.1 Especificación de los márgenes de la página 42
2.3.2 Sangrados 43
2.3.3 Indicar un espaciado entre párrafos 44
2.3.4 Texto en varias columnas 45
2.3.5 Alineamiento del texto 46
2.3.6 Controlando el fondo del documento 48
2.4 Situando imágenes en una página 49
2.4.1 Alineamiento de las imágenes 49
2.4.2 Especificar el tamaño de la imagen 52
2.5 Tablas 53
2.5.1 Alineamiento del contenido de las celdas de la tabla 54
2.5.2 Divisióndelatablaengruposdecolumnasysecciones...horizontales
55
2.5.3 Extender una celda a través de dos o mas filas o columnas 58
2.5.4 Tablas dentro de tablas 60
2.6 Documentos con marcos 61
2.6.1 Marcos en línea 65
Tema 3 Características avanzadas de HTML
3.1 Formularios de entrada de datos 69

3.1.1 Construcción de un formulario 69
3.1.2 Introducir texto en un formulario 72
3.1.3 Entradas mediante botones y menús 74
3.1.4 Los botones de enviar y borrar 77
3.1.5 Enviando ficheros desde un formulario 78
3.1.6 Imágenes activas 79
II
3.1.7 Otros elementos y directivas dentro de un formulario 80

3.2 Enlaces dentro de un documento 84
3.2.1 El atributo NAME 84
3.3 Enlazando y cargando ficheros de datos 86
3.3.1 Aplicaciones auxiliares 86
3.3.2 Enlazando a páginas con imágenes 88
3.3.3 Elementos para empotrar datos 90
3.4 Sonidos 92
3.4.1 Capacidades sonoras de los navegadores 92
3.4.2 Fondos sonoros 92
3.4.3 Activación del sonido por el propio usuario 94
3.5 Vídeo 94
3.5.1 Vídeo para Internet Explorer 95
3.6 Mapas 96
3.6.1 Mapas gestionados por el cliente 96
3.6.2 Mapas gestionados por el servidor 97
Tema 4 Estilos y capas
4.1 Hojas de estilo 101

4.1.1 Visión general 102
4.1.2 Directivas dentro de una hoja de estilo 103
4.1.3 Enlazando hojas de estilo a los documentos 104
4.1.4 Escribir hojas de estilo 106
4.1.5 Identificación de directivas 108
4.1.6 Directivas especiales para los estilos 110
4.1.7 Estilos para los enlaces 112
4.2 Formato de texto utilizando estilos 113
4.2.1 Modificando la fuente del texto 113
4.2.2 Cambios en las características del texto 119
4.3 Capas 122
4.3.1 Capas con estilos 123
4.3.2 Posicionando las capas 123
4.3.3 Ocultar elementos 125
4.3.4 Propiedades 126
III
Tema 5 Elementos y directivas del lenguaje HTML
5.1 Atributos comunes a diferentes directivas 133

5.2 A: Anclas de hipertexto 134
5.3 ADDRESS 136
5.4 APPLET 136
5.5 AREA 137
5.6 B: Negrita 138
5.7 BASE 138
5.8 BASEFONT 138
5.9 BGSOUND 138
5.10 BIG 139
5.11 BLINK 139
5.12 BLOCKQUOTE 139
5.13 BODY 139
5.14 BR Salto de línea 140
5.15 BUTTON 140
5.16 CAPTION 140
5.17 Carácteres especiales 141
5.17.1 Carácteres especiales 141
5.17.2 Carácteres de control 142
5.18 CENTER 142
5.19 CITE 143
5.20 CODE 143
5.21 COL 143
5.22 COLGROUP 143
5.23 DD 143
5.24 DEL 144
5.25 DIV 144
5.26 DL: Listas de glosario 144
5.27 DT 144
5.28 EM 145
5.29 EMBED 145
5.30 FIELDSET 145
5.31 FONT 145
5.32 FORM 146
IV
5.33 FRAME 146

5.34 FRAMESET 148
5.35 Hn 148
5.36 HEAD 149
5.37 HR: Línea horizontal 150
5.38 HTML 150
5.39 I 150
5.40 IFRAME 150
5.41 IMG 151
5.42 INPUT 152
5.43 INS 153
5.44 KBD 153
5.45 LABEL 153
5.46 LAYER 153
5.47 LEGEND 154
5.48 LI 154
5.49 LINK 154
5.50 MAP 155
5.51 MARQUEE 155
5.52 META 155
5.53 NOBR 155
5.54 NOFRAMES 156
5.55 NOSCRIPT 156
5.56 OBJECT 156
5.57 OL: Listas numeradas 156
5.58 OPTGROUP 156
5.59 OPTION 156
5.60 P: Párrafo 156
5.61 PRE 157
5.62 Q 157
5.63 S 157
5.64 SAMP 157
5.65 SCRIPT 157
5.66 SELECT 158
5.67 SMALL 158
5.68 SPAN 158
V
5.69 STRIKE 158

5.70 STRONG 158
5.71 STYLE 159
5.72 SUB 159
5.73 SUP 159
5.74 TABLE 159
5.75 TBODY 161
5.76 TD; TH 161
5.77 TEXTAREA 162
5.78 TFOOT; THEAD 162
5.79 TITLE 162
5.80 TR 162
5.81 TT 162
5.82 U 163
5.83 UL 163
5.84 WBR 163
Tema 6 Una guía de escritura de documentos HTML
6.1 Sobre la estructura general de un hipertexto 165

6.2 Sobre la estructura de un documento 167
6.2.1 Indicar el estado de la información del documento 168
6.2.2 Poner los enlaces en el contexto 168
6.2.3 Firmar el documento 169
6.2.4 Dar un título adecuado al documento 169
6.2.5 Considerar un formato independiente del dispositivo 170
6.2.6 No utilizar los enlaces como notas a pie de página 170
6.2.7 Anotar adecuadamente las referencias que se hagan 170
6.2.8 Escribir el documento para que pueda también ser impreso 171
6.2.9 Escribir texto que sea legible, aunque tenga enlaces 171
6.2.10 Evitar comentarios excesivos sobre los mecanismos de
información (hablar sobre FTP, telnet, etc.) 172
6.2.11 No centrarse en discutir las páginas propias 172
6.2.12 No abusar de imágenes y gráficos 172
Anexo A Entidades para los caracteres de ISO Latin 1 173
Anexo B Referencias numéricas de los caracteres de Latin 1 175
VI
1 Introducción al lenguaje HTML
Tema
La razón por la que alguien quiere publicar una página HTML es sencillamente
comunicarse con el mundo, bien por razones comerciales, para poder vender algo, o
simplemente por el deseo de compartir una historia. En la práctica se puede publicar
cualquier clase de información en la “web”, incluyendo gráficos, sonido e incluso vídeo.
Esto ha supuesto una verdadera revolución en la comunicación, ya que ha permitido que
cualquiera pueda compartir su información, documentación u opinión con todos y cada
uno de los millones de usuarios de Internet.
En la actualidad hay bastantes programas que permiten editar y crear páginas “web” sin
tener que aprender HTML (p.e.: AOLPress, Netscape Composer, FrontPage, Adobe
PageMill, etc.). Pero esto supone estar limitado a las características y posibilidades que
ofrecen dichos programas. No obstante, se pueden utilizar las ventajas que proporciona un
editor de HTML para crear rápidamente un primer documento, y añadir posteriormente los
elementos que aún no están implementados en ese editor pero que están descritos en este
módulo.
Este tema es una introducción al lenguaje HTML (HyperText Markup Language) y junto
con los siguientes temas se enseña a utilizar los elementos y directivas (tags) especificados
en el lenguaje HTML. Es decir, se aprenderá a utilizar la “lingua franca” de la World Wide
Web (WWW), ya que todos sus documentos estan escritos en HTML. La versión que se
estudia es la 4, aunque se comentaran las extensiones propias de Netscape y Microsoft.
1.1 Introducción al HTML

El “HyperText Markup Language” (HTML) es un lenguaje sencillo que permite
describir documentos con estructura de hipertexto que son transportables a diferentes
plataformas (PC, Macintosh, estaciones de trabajo, ...). HTML se basa en el SGML
(Standard Generalized Markup Language), que es un sistema de procesamiento de
documentos mucho más amplio. SGML se utiliza para describir la estructura general de
diferentes clases de documentos, centrandose principalmente en su contenido y no en su
apariencia.
HTML no es un procesador de texto tipo WYSIWYG (What You See is What You Get:
lo que ves es lo que tienes) como puede ser por ejemplo Word o WordPerfect, ya que la
presentación de los documentos la hacen los navegadores y estos lo pueden realizar de
1
diferentes maneras. Con HTML lo que se hace es especificar la estructura lógica del
contenido del documento (indicando cuales son los títulos, párrafos, citas, definiciones,
etc. que lo constituyen, es decir formatear texto) y los distintos efectos que se quieren dar a
cada uno de ellos (por ejemplo, poner un texto en cursiva o en negrita), también permite
añadir gráficos, sonido y vídeo y guardarlo todo en formato ASCII de sólo-texto que puede
leer cualquier ordenador (aunque para poder visualizar el vídeo o reproducir el sonido el
ordenador debe tener instalado el correspondient hardware).
La presentación final del documento la realizan los navegadores, que interpretarán cada
uno de estos elementos. Así, un navegador podrá dejar una línea en blanco entre párrafos y
otro podrá sangrarlos. Las Figuras 1-1 a 1-3 muestran la apariencia del mismo documento
HTML con diferentes navegadores (Netscape, Internet Explorer y AOLPress).
Los documentos HTML son puro texto (ASCII) con las directivas (tags) incluidas en el
propio texto, que delimitan los distintos bloques de texto como diferentes elementos del
documento. La Tabla 1-1 muestra el documento HTML que se ha presentado con
diferentes navegadores en las Figuras 1-1 a 1-3.
Considerar que HTML no es otra forma más de crear documentos formateados, sino que
su principal característica reside en la primera parte de su nombre (hypertext), es decir, los
documentos HTML pueden contener enlaces a otros documentos o, en la práctica, a
cualquier “cosa” que esté en Internet. Esto significa que puede crear distintas páginas
“Web” , permitiendo que los usuarios puedan saltar de una a otra cuando lo consideren
necesario. Además de poder tener enlaces a páginas “Web” de otros organismos o
instituciones, permitiendo que los usuarios puedan acceder a la información contenida en
otros sitios.
Figura 1-1: Presentación de un documento HTML con Netscape 4.03
2
1.1 Introducción al HTML
Figura 1-2: Presentación de un documento HTML con Microsoft Explorer 4
Figura 1-3: Presentación de un documento HTML con AOLPress
3
<HTML>
<HEAD>
<TITLE>Dpto. de Informática y Automática. Información
General.</TITLE>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="/gif/escudin.gif" HSPACE=5 WIDTH=70 HEIGHT=70>
<H1> Departamento de Informática y Automática <BR>
Información General </H1>
<FONT SIZE=-1>
[ <A HREF=http://www.dia.uned.es/>D.I.A.</A> |
<A HREF=http://www.uned.es/>U.N.E.D.</A> |
<A HREF=/personal/personal.html>Personal</A> |
<A HREF=/regladas/regladas.html>Docencia</A> |
<A HREF=/proyectos/proyectos.html>Proyectos</A> |
<A HREF=/matlab/matlab.html>Matlab</A> |
<A HREF=home.html#Direccion>Dirección</A> ]
<BR>
[ <A HREF=http://www.dia.uned.es/><EM>D.I.A.</EM></A> |
<A HREF=http://www.uned.es/><EM>U.N.E.D.</EM></A> |
<A HREF=/personal/personal.html><EM>Members</EM></A> |
<A HREF=/regladas/regladas.html><EM>Teaching</EM></A> |
<A HREF=/proyectos/proyectos.html><EM>Projects</EM></A> |
<A HREF=/matlab/matlab.html><EM>Matlab</EM></A> |
<A HREF=home.html#Direccion><EM>Address</EM></A> ]
</FONT>
<FORM ACTION="info-e.html"><INPUT TYPE="submit" VALUE="English">
<HR>
</CENTER>
<FONT SIZE="+3">D</FONT>atos generales:

<P>
<UL>
<LI>Dpto/Unidad : <A HREF=http://www.dia.uned.es/> INFORMATICA Y AUTOMATICA
</A>
<LI>Facultad/Centro : CIENCIAS
<LI>Universidad : <a href="http://www.uned.es">UNED</a>
<LI>Dirección : Senda del Rey s/n
<LI>CP. Provincia : 28040 MADRID
<LI>Tfno : 34-1-3987145
<LI>Fax : 34-1-3986697
<LI>Director: <A HREF=http://www.dia.uned.es/personal/sdormido.html>
Dr. D. Sebastián DORMIDO BENCOMO</A>.
<LI>Secretaria:Da. Ma. Antonia CANTO DIEZ
</UL>
<HR>
<FONT SIZE=-1>
Revisión: 2 Agosto 1999/ <EM>Last update: August 2, 1999</em>:
<A HREF="mailto:webmaster@dia.uned.es"><TT> webmaster@dia.uned.es </tt> </a>
</FONT>
</BODY>
</HTML>
Tabla 1- 1: Documento HTML correspondiente a las Figuras 1-1 a 1-3
4
1.2 Elementos de los documentos HTML
Notas
Un documento HTML es un archivo ASCII de sólo texto, esto significa que su edición se
puede hacer con cualquier procesador o editor de texto, por ejemplo, con editores básicos
de texto como el NotePad (bloc de notas) o el WordPad que se incluyen con Windows, o el
SimpleText o el TeachText incluidos en los sistemas Macintosh.
Se puede observar que la presentación de un documento HTML utilizando diferentes

navegadores es básicamente similar. Las diferencias se reducen a pequeñas modificaciones
en la apariencia de los elementos. Así, por ejemplo, algunos elementos que aparecen en
cursiva en un navegador se interpretan en negrita en otros. De cualquier forma, para
aquellas personas que estén acostumbradas a utilizar un navegador en concreto no les
supone ningún problema cambiar a otro.
Los ejemplos que se presentan en este módulo se han preparado utilizando Netscape que
es uno de los más difundidos en la actualidad, pero si repite los ejemplos, los puede
visualizar también con otro, por ejemplo con Internet Explorer, y ver la diferencia entre
ambos.
En resumen, los puntos que caracterizan a HTML son los siguientes:
• Es un lenguaje de marcas para documentos electrónicos en Internet.
• Permite la presentación de documentos en diferentes tipos de monitores y de

dispositivos.
• Las marcas principalmente son semánticas.
• Permite enlaces de hipertexto de un documento a otro, entradas del usuario e

interacción.
• No es un procesador de texto tipo WYSIWYG, por el contrario utiliza el

método WYGIWYM (What You Get Is What You Meant).
• La interpretación de las marcas depende de los navegadores y de los

dispositivos (ordenadores y monitores) de presentación.
• Es un lenguaje extensible, es decir se pueden añadir nuevas características y

órdenes sin que se tengan que perder documentos anteriores que no las
utilicen.

Las directivas o instrucciones HTML, junto con el texto al que se le aplican, se
denominan un elemento HTML. A las directivas en HTML se las conoce como tags y
consisten en el nombre del elemento entre los simbolos menor (<) y mayor (>)
(<nombre_tag>). Por ejemplo, un párrafo se pondría:
5
<P> Esto es un parrafo.
Generalmente los elementos HTML se identifican mediante una directiva de comienzo,

en el que se pone el nombre del elemento y los atributos, seguido por el contenido y por una
directiva de terminación. Por ejemplo, una cabecera de un documento se puede poner
como:
<H1> 1. Elementos de los documentos HTML </H1>
Como se ve, el final se indica con una directiva de la forma </nombre_tag>, es decir,
el nombre de la directiva entre los signos </ y >.
Algunos elementos estan vacíos, es decir, no afectan a ningún bloque del documento.
Estos elementos no requieren una directiva de terminación. Por ejemplo, un salto de línea
se crea con la directiva
<BR>
y una línea horizontal a lo largo de toda la página con la directiva
<HR>
Los nombres de los elementos no son sensibles a mayúsculas/minúsculas. Por ejemplo,

el salto de línea se puede poner equivalentemente de cualquiera de las formas siguientes:
<BR>, <Br>, <br>.
Entre los elementos del documento de la Tabla 1-1 se pueden resaltar los siguientes:
1) La cabecera (HEAD) con el título (TITLE) del documento. El título no aparece en
la presentación del documento. En algunos navegadores aparece como título de la
ventana, por ejemplo en la Figura 1-2.
2) Dentro del cuerpo (BODY) está el elemento imágen (IMG) con un enlace al archivo
con el escudo de la UNED que aparece en la presentación (ver por ejemplo la Figura
1-2).
3) El elemento cabecera (H1) que visualiza:
Departamento de Informática y Automática

Información General
4) Los elementos “ancla” (A) que enlazan a distintos documentos.

5) Un elemento formulario (FORM) con el valor VALUE=English que sirve para
opcionalmente ir a la versión inglesa de este documento.
6) Un párrafo (P) donde hay otro elemento lista con los datos del Departamento de
Informática y Automática de la UNED.
7) Otro elemento ancla (A) que permite enviar correo electrónico (mailto).
6
Caracteres especiales
Conviene advertir que según el estandar HTML las vocales acentuadas y la letra ñ se
consideran caracteres “especiales” y se tienen que escribir mediante unas “entidades” que
comienzan con el símbolo & y terminan con un punto y coma (;), entre estos símbolos se
escribe un identificador del carácter “especial” deseado. Aunque más adelante se volverá
sobre el tema de los caracteres especiales, en la Tabla 1-2 se listan los caracteres del
español que se consideran caracteres especiales en HTML.
á: á é: é í: í ó: ó ú: ú
Á: Á É: &Eaucte; Í: Í Ó: Ó Ú: Ú
ü: ü Ü: Ü ñ: ñ Ñ: Ñ ¿: ¿ ¡: ¡
Tabla 1- 2: Caracteres del español considerados como caracteres especiales en HTML
1.2.1 Directivas anidadas

En muchas ocasiones se quiere dar formato al texto por medio de más de una directiva,
por ejemplo, poniendo en cursiva una parte del texto contenido en una cabecera:
<H1>Sobre el uso del <EM>antes</EM> y del <EM>después</EM></H1>
Cuyo resultado sería:
Como se vé, se puede anidar distintas directivas para conseguir un formato combinando
el efecto de las mismas, pero hay que considerar dos cuestiones:
1) No todas las directivas o tags pueden estar contenidas en todos los otros tipos de
directivas. Como una regla general se puede decir que las directivas que afectan a
párrafos enteros (que son las llamadas a nivel de bloque en el W3C1) pueden
contener directivas que afectan a palabras o letras (directivas en línea o a nivel de
caracter), pero no al revés.
2) El orden en el que se colocan es importante, cuando se vaya a poner una directiva
de cierre (</...>) ésta debe corresponder a la última directiva que no se haya cerrado,
es decir, si primero tenemos una directiva <A> y luego otra <B>, entonces debemos
cerrar primero la </B> y luego la </A>. Tal como se ha hecho en el ejemplo con
H1 y EM.
1.2.2 Espacios en blanco y saltos de línea

Los navegadores de HTML ignoran cualquier espacio extra que se inserte entre las
1.W3C: World Wide Web Consortium. Creado en 1994 para potenciar el desarrollo de la red mundial
desarrollando protocolos para fomentar la evolución de Intenerte y su interoperabilidad. Su dirección es:
www.w3.org
7
directivas. Esto se puede utilizar para añadir espacios en blanco y saltos de línea que
ayuden a ver más claramente el documento mientras se escribe, por ejemplo el haber
añadido en el documento de la Tabla 1-1 saltos de línea después de cada cierre de directiva
y blancos para sangrar líneas con directivas anidadas hace que sea más fácil su lectura y
edición cuando se abre con WordPad.
Para comenzar un párrafo nuevo se utiliza la directiva <P>, y para añadir líneas en
blanco <BR>.
Pero no es conveniente repetir varios <P> o <BR> para añadir espacios extras entre
párrafos, ya que hay navegadores que ignoran las directivas extras.
Para controlar el espaciado se utilizan las hojas de estilo, en las cuales se pueden
especificar con absoluta precisión el espacio que debe ir entre los elementos de la página
Web que diseñe. Las hojas de estilo se comentaran con más detalle en el tema 4 de este
módulo.
Las directivas a nivel de bloque generalmente incluyen saltos de línea automáticos. Por
ejemplo, no es necesario utilizar una directiva de nuevo párrafo después de una cabecera
(<H1>), ya que las cabeceras incluyen automáticamente un salto de línea. Algunas
directivas a nivel de bloque son: <P>, <H1>, <BR>, <UL> y <TABLE>.
Las directivas en línea, que afectan tan sólo a unos pocos caracteres o palabras, no
comienzan automáticamente en una nueva línea. Algunas directivas en línea son: <EM>,
<B> e <IMG>.
1.2.3 Atributos de los elementos

Muchas directivas permiten atributos con distintas opciones que definen el formato
deseado para el texto que contienen. Los atributos se situan entre el nombre del elemento y
el delimitador que lo encierra (>). Un atributo consta de un nombre del atributo, un signo
igual y un valor. Junto al signo igual se permiten espacios en blanco.
El valor del atributo es una cadena de literales delimitados por comillas, aunque estas se
pueden suprimir si la cadena sólo contiene letras (A-Z, a-z), dígitos (0-9), el guión de
subrayado (_) o el punto (.).
Por ejemplo, el elemento ancla (A), que marca una región de texto como el comienzo (o
el final) de un enlace hipertexto, puede tener varios atributos. Uno de ellos es HREF, que
especifica el documento hipertexto que se enlaza con la parte de texto marcada. Para ello
en la directiva de A se escribe:
<A HREF=”http://www.dia.uned.es/home.html”>D.I.A.</A>
En este caso al atributo HREF se le asigna el valor:
http://www.dia.uned.es/home.html
El elemento A no está vacío y se cierra con la directiva de terminación </A>.

En algunos casos, el atributo debe tomar un valor correspondiente a un pequeño grupo de
posibles elecciones. Por ejemplo, para la directiva <BR> se tiene un argumento CLEAR
que puede tomar como valores los nombres simbólicos left, right y all, cualquier otro valor
sería ignorado:
8
1.3 Estructura de los documentos HTML
<BR CLEAR=left>
Otros atributos sólo pueden tomar un determinado tipo de valores. Por ejemplo, los
atributos HSPACE, WIDTH y HEIGHT de la directiva IMG sólo aceptan como valores
números enteros:
<IMG SRC=”/gif/escudin.gif” HSPACE=5 WIDTH=70 HEIGHT=70>
La directiva IMG también tiene como atributo SRC cuyo valor es el URL del fichero
donde está la imagen que se visualiza.
Hay atributos que por defecto toman un valor, en estos casos no es necesario poner el
signo igual y el valor. Por ejemplo, la directiva TABLE que indica el comienzo de una tabla
puede tener un atributo llamado BORDER que indica que se dibuje un borde en torno a la
tabla:
<TABLE BORDER>
Notas
Los tag de terminación nuncan tienen atributos. Los atributos de un elemento siempre se
situan en la directiva de comienzo.
1.2.4 Comentarios
En un documento HTML se pueden incluir comentarios para ayudar a describir el propio
documento o proporcionar alguna clase de indicación sobre su estado (fecha de creación o
modificación, autor, forma de creación, etc.). El texto del comentario se ignora cuando se
realiza la traducción del archivo HTML. Los comentarios nunca aparecen en la pantalla.
Un comentario empieza con , aunque algunas
implementaciones de HTML permiten terminar el comentario sólo con el signo >.
Ejemplos de comentarios son:



1.3 Estructura de los documentos HTML

Los documentos HTML se estructuran en dos partes:
1) La cabecera (HEAD)
2) El cuerpo (BODY)
Las dos partes estan dentro del elemento HTML, que simplemente indica que su
contenido es un documento HTML.
La cabecera contiene información sobre el documento que generalmente no se visualiza,
por ejemplo el título (TITLE).
En el cuerpo es donde se situa el material del documento que se visualiza.
9
Los elementos permitidos dentro de HEAD (como TITLE) no se pueden utilizar dentro
de BODY y viceversa.
Un ejemplo sencillo de la estructura básica de un documento HTML es el siguiente:
<HTML>
<HEAD>
<TITLE> El titulo del documento </TITLE>
</HEAD>
<BODY>
El cuerpo del documento HTML
</BODY>
</HTML>
1.3.1 El elemento HTML

La directiva HTML es el primer tag en cualquier documento HTML, ya que indica que se
trata de un documento escrito en el formato HTML. Todo el texto y las directivas del
documento deben ir entre las directivas HTML de comienzo y de terminación.
El elemento HTML tiene tres atributos opcionales:
1) VERSION: Viene fijada por el DTD (Document Type Definition). Para la versión
HTML 3.0 corresponde a la cadena “-//W3O//DTD W3 HTML 3.0//EN”.
2) URN: Es el nombre universal del recurso para el documento.
3) ROLE: Es una lista opcional separada por blancos de nombres simbólicos SGML
que definen el papel que juega este documento. Por ejemplo el de índice de
contenido.
Notas
Tanto la directiva de comienzo como la de terminación del elemento HTML se pueden
omitir.
1.4 Editando y visualizando una página Web

Como ya se ha indicado, para crear una página Web no se necesita ninguna herramienta
especial, ya que se puede utilizar cualquier procesador de texto, como WordPad (en
Windows) o SimpleText (en Macintosh).
Se deben seguir los siguientes pasos:
1) Abrir un procesador o editor de texto, por ejemplo WordPad.
2) Crear un nuevo documento en blanco, para ello selecione en el menú la opción
Archivo -> Nuevo (File -> New), Figura 1-4.
3) Escriba el contenido del documento HTML tal como se explica en este módulo.
4) Guarde el documento, para ello seleccione la opción: Archivo -> Guardar como..
(File -> Save as).
10
5) En el cuadro de dialogo que aparece, seleccione documento de texto (o ASCII),

Figura 1-5.
6) Escriba el nombre del archivo del documento pero poniendole la extensióln .htm o
.html.
7) Seleccione la carpeta (o directorio) en donde vaya a guardar el documento.
8) Pulse Guardar.
Figura 1-4: Crear un documento nuevo con WordPad
Figura 1-5: Guardar el documento en un archivo de texto con la extensión .html
11
Notas
Si se utiliza un editor de páginas Web como AOLPress, FrontPage o PageMill, el código
HTML se puede ver y editar con cualquier otro editor de texto, tan sólo hay que elegir
Archivo -> Abrir (File -> Open) y abrir el fichero con el documento.
1.4.1 Mostrar en un navegador la página creada

Una vez que ha creado una página, querrá verificar como es mostrada por un navegador.
Como no se sabe que navegador utilizaran aquellas personas que visiten esta página es
conveniente verla con varios (por lo menos con Netscape y con Explorer).
En el módulo 2 se explicó como abrir archivos con Netscape, básicamente los pasos a
seguir son:
1) Abrir el navegador (Netscape Communicator o Internet Explorer).
2) Seleccionar Archivo -> Abrir o Abrir página, Figura 1-6.
3) En el cuadro de dialogo que aparece, buscar la página Web que se quiere visualizar.
Figura 1-7.
4) Pulsar sobre Abrir. La página se mostrará en el navegador tal como aparecerá
cuando realmente se publique en el servidor.
Figura 1-6: Abrir una página con Netscape
12
Figura 1-7: Elegir el archivo que se quiere abrir en el navegador.
Notas
Para ver el documento HTML en el navegador no es necesario cerrarlo previamente en el
editor de texto. Esto hace que la edición sea más rápida, ya que puede ir editando el texto,
guardarlo y ver como va quedando en el navegador, con tan sólo ir pulsando en el botón de
Recargar (Reload) que aparece en la barra de navegación.
1.4.2 Las primeras líneas de la página

Como ya se ha indicado, el documento HTML comienza con la directiva <HTML> y
termina con </HTML> y consta de una cabecera escrita entre <HEAD> y </HEAD> y un
cuerpo, que es lo que se muestra en los navegadores, escrito entre las directivas <BODY> y
</BODY>.
Pero, como ya se indicó en el módulo 2, cuando un usuario desde un navegador, salta a
una página, este navegador necesita que se le indique de alguna forma que clase de
documento es y como lo debe de visualizar. Aunque por defecto cualquier documento que
empiece por <HTML>, o que tenga directivas HTML, se interpretaría como documento
HTML, es conveniente indicar esto de alguna manera, e incluso poder decir que versión de
HTML se ha utilizado. Por ello muchas páginas comienzan con <!DOCTYPE> y
continuan con la directiva <HTML>.
13
En este caso se debería comenzar la página con:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”><HTML>
Donde se indica que se utiliza la versión HTML 4.0.

La última linea del fichero será </HTML>.
La cabecera y el cuerpo del documento

El fichero se dividirá en dos secciones: HEAD (cabecera) y BODY (cuerpo). En la
cabecera se dará información sobre el URL de la página y las relaciones que puede tener
con otras páginas. El único elemento de la cabecera que es visible es el título.
Para crear la cabecera se escribe <HEAD> tras de lo cual se puede añadir el título y
aquella información que se irá comentando a continuación.
El final de la cabecera se escribe con </HEAD>.
El cuerpo contiene toda la información que se va a presentar de la página. Toda esta
información está entre las directivas <BODY> y </BODY>.
Una buena idea es crear una plantilla con estas directivas que tienen que aparecer en
todos los documentos. Figura 1-8.
Figura 1-8: Líneas que deben contener todos los documentos HTML
El título
Cada página HTML debe de tener un título, que debe ser corto y descriptivo de la página.
Este título aparecererá en la mayoría de los navegadores en la barra de la ventana (Figura
1-9). El título también es utilizado en los índices de los marcadores o “bookmarks” y de la
lista de Historial.
Para escribir un título se pone el cursor entre las directivas de <HEAD> y </HEAD> y se
14
escribe el título con las directiva <TITLE> el título deseado y se cierra con </TITLE>:
<HEAD>
<TITLE>Título del documento</TITLE>
</HEAD>
Figura 1-9: El título del documento aparece en la barra de la ventana del navegador
1.4.3 El contenido visible del documento

Para organizar la página se dispone en HTML de las cabeceras, que se pueden utilizar
para escribir los títulos de los capítulos, secciones y subsecciones que compongan el
documento. Hay hasta seis niveles de cabeceras (desde <H1> a <H6>), aunque rara vez se
utilizan más de tres.
Las cabeceras se escriben dentro de la sección “BODY” (cuerpo) del documento, y
necesitan la directiva de terminación </Hn> (donde n es un número de 1 a 6).
Por ejemplo:
<H1>La cabecera del documento</H1>
En el documento se puede poner un párrafo:
<P>Un párrafo con texto, donde se da la

explicación que se desee, y que se introduce con la
directiva de párrafo P, algunas palabras las podemos
<STRONG>resaltar</STRONG>.
En este párrafo se ha resaltado una palabra mediante la directiva <STRONG>, ésta es una
directiva de formato lógico y generalmente se visualiza en negrita. También se podría
haber utilizado la directiva <B> para ponerlo en negrita o <I> para ponerlo en cursiva.
Una lista de items se crea con la directiva <UL>, entre <UL> y </UL> se ponen los
elementos de la lista, comenzando cada uno por <LI>:
<UL>
<LI>¿Qué es HTML?
<LI>Una visión de HTML
<LI>Un ejemplo
</UL>
15
El documento completo se muestra en la Figura 1-10 y en la Figura 1-11 aparece como

es visualizado por Netscape.
Figura 1-10: Documento que se visualiza en la Figura 1-11.
Figura 1-11: Visualización con Netscape del documento de la Figura 1-10.
16
1.5 Un primer documento HTML

Antes de ver con detalle cada uno de los elementos que pueden constituir un documento
HTML vamos a construir un documento muy sencillo que sirva para clarificar algunas de
las ideas expuestas hasta ahora e ir introduciendo algunas de las principales directivas1.
Este primer documento va a consistir en una página personal con la siguiente
información:
1) Nombre y titulación. Por ejemplo: Joaquín Aranda Almansa. Profesor Titular de
Universidad
2) Datos para la comunicación (dirección postal, teléfono, fax, correo electrónico):
Departamento de Informática y Automática.
Facultad de Ciencias.
UNED.
Teléfono: 3987146
Fax: 3986607
e-mail:jaranda@dia.uned.es
3) Una pequeña biografía.
4) Líneas de investigación, docencia o trabajo (que pueden tener enlaces a otros
documentos donde se amplie la información sobre estas líneas).
5) Enlaces a la página inicial (“home page”) de nuestra organización y a otros
documentos a los que consideramos oportuno acceder desde nuestra página.
1.5.1 La cabecera y el título

En la cabecera, donde hay información no visualizada relativa al documento, asignamos
un título al mismo (es preceptivo y todos los documentos deben tener un título):
<HEAD>
<TITLE> Página Web de J. Aranda </TITLE>
</HEAD>
Notas
Como se ve, en lugar de “página” se ha puesto “página”, ya se ha comentado el
problema con las vocales acentuadas y en la Tabla 1-2 se ha dado la correspondencia que
existe entre las vocales acentuadas y las entidades que las representan en HTML. A
continuación, para facilitar la legibilidad se sustituirán las entidades propias de HTML
para las vocales acentuadas por las propias vocales, pero recordar que en el documento
HTML tienen que ir las entidades de HTML, de lo contrario puede haber problemas en
1.En este capítulo, al igual que en el 2 y en el 3, se van a ir introduciendo las principales directivas de
HTML mostrando situaciones en las que se pueden utilizar. Una explicación de las mismas se da en el
capítulo 5, el cual se puede utilizar como manual de referencia.
17
algunas transmisiones.
1.5.2 El cuerpo
En el cuerpo tendremos que ir creando los elementos necesarios para mostrar la
información que se ha indicado anteriormente.
La cabecera del documento

El nombre lo podemos poner como una cabecera del documento, Para ello utilizamos la
directiva H1 (indica que es una cabecera de primer nivel):
<H1>Joaquín Aranda Almansa</H1>
Una forma de poner la dirección y datos para la comunicación

La dirección la podemos expresar poniendo el elemento ADDRESS
<ADDRESS>
Departamento de Informática y Automática <BR>
Facultad de Ciencias <BR>
UNED
</ADDRESS>
La directiva ADDRESS es obsoleta, pero aún se utiliza y se mantiene en HTML 4,

aunque su principal resultado es mostrar el texto en cursiva, para lo cual se tienen otras
directivas. En este ejemplo se ha utilizado para poner la dirección postal, aunque es más
habitual utilizarla para poner la dirección de correo electrónico.
Los siguientes datos que deseamos poner son el número de teléfono, el número de fax y
la dirección de correo electrónico. Estos los colocamos como una lista:
<UL>
Teléfono: 3987146 <br>
Fax: 3986697 <br>
e-mail:jaranda@ddia.uned.es
</UL>
1.5.3 Una sección dentro del documento

La biografía la podemos separar del resto del texto, marcándola como una sección
diferente, mediante un raya horizontal y poniéndole una cabecera de un nivel inferior a la
que utilizamos en el nombre (H2 indica que es una cabecera de segundo nivel), la biografía
se escribe como un elemento párrafo (P):
<HR>
<H2>Biografía</H2>
<P>Profesor Titular de Universidad. En la actualidad imparte su
docencia en el Departamento de Informática y Automática de la
18
Facultad de Ciencias de la UNED. Las líneas de investigación y

la docencia que imparte en la actualidad son las indicadas a
continuación
</P>
Para las líneas de investigación y docencia se crea otra sección, las dispondremos como
listas con una cabecera igual a la de biografía:
<H2>Líneas de investigación</H2>
<UL>
<LI>Control de procesos
<LI>Integración multisensorial
<LI>Sistemas de navegación
</UL>
<H2>Docencia</H2>
<UL>
<LI>Automática II
<LI>Sistemas Operativos I y II
</UL>
1.5.4 Enlaces a otros documentos

Los enlaces son la característica primordial del “World Wide Web”, ya que ellos
permiten saltar de una página a otra, aunque esten en ordenadores distintos.
Los enlaces tienen tres partes: el destino, la etiqueta y el objetivo. Sin duda el destino es
la más importante, ya que indica lo que ocurrirá cuando el visitante pulse sobre el enlace.
Como se irá viendo en este módulo, se pueden crear enlaces para cargar imágenes, para
descargar ficheros, enviar correo electrónico o ejecutar programas CGI. Pero lo más
común es para conectarse a otras páginas Web a las que se denominan anclas. Todos los
destinos se indican mediante su correspondiente URL.
La segunda parte del enlace, la etiqueta, es la parte visible sobre la que se pulsa para ir al
destino. Puede ser un texto, una imagen o ambas cosas (en el capítulo 2 se verán enlaces
con imágenes).
La última parte, el objetivo (target), es ignorado muchas veces, indica donde se
visualiza, el objetivo suele ser el nombre de una ventana o marco.
En el ejemplo, tanto el Departamento de Informática y Automática como la UNED
tienen sus propios servidores Web, luego podemos crear enlaces directos a ellos:
...
<A HREF="http://www.dia.uned.es">Departamento de
...
<A HREF="http://www.uned.es">UNED</A>
...
Donde se ha utilizado el elemento ancla (A) con el atributo HREF cuyo valor es el
destino del enlace, en este caso el URL del servidor Web con el que queremos enlazar
(http://www.dia.uned.es) para el Departamento de Informática y Automática y
(http://www.uned.es) para la UNED. Las direcciones que se ponen son las de los
ordenadores de la UNED y del Departamento de Informática y Automática, cargándose
una página que deben tener todos los servidores Web que se denomina home.html.
19
Aunque depende del navegador que se utilice (y de como esté configurado el mismo),
generalmente las etiquetas de los enlaces aparecen subrayadas y de otro color. En este caso
aparecerá como enlace “Departamento de Informática y Automática” y “UNED”, cuando
pulsemos en “Departamento de Informática y Automática” el navegador cargará la página
correspondiente que está situada en http://www.dia.uned.es, y cuando se pulse
sobre “UNED” se cargará la página inicial de la UNED que está en
http://www.uned.es.
Si tenemos documentos HTML relativos a las líneas de investigación y a las asignaturas,
podemos poner enlaces a los mismos (utilizando el elemento A), de la forma siguiente:
<UL>
<LI> <A HREF="http://www.dia.uned.es/investigacion/
control.html"> Control de procesos </A>
sensor.html">Integración multisensorial </A>
navegacion.html">Sistemas de navegación</A>
</UL>
<H2>Docencia</H2>
<UL>
<LI> <A HREF="http://www.dia.uned.es/asignaturas/
automaticaII.html">Automática II</A>
<LI> <A HREF="http://www.dia.uned.es/asignaturas/
soI">Sistemas Operativos I</A> y <A HREF="http://www.
dia.uned.es/asignaturas/soII">II </A>
</UL>
Igual que ocurría con los enlaces al Departamento de Informática y Automática y a la

UNED, en estos enlaces el elemento ancla (A) tiene un atributo (HREF) cuyo valor es el
URL del correspondiente documento al que se enlaza.
Enlaces especiales
Podemos conseguir que al pulsar en la dirección de correo electrónico nos envíe un
correo. Para ello se utiliza un ancla con el URL “mailto”, de la siguiente forma:
e-mail: <A HREF="mailto:jaranda@dia.uned.es"> jaranda@dia.uned.es </A>
Hay que tener en cuenta que algunos navegadores no soportan mailto (aunque
practicamente todos los que se comercializan hoy día si lo permiten).
En las figuras 1-12 a 14 se muestra este documento con distintos navegadores (Netscape
para Macintosh, Netscape 4.03 en Windows e Internet Explorer 4 en Windows).
Notas
Recordar que el elemento ancla (A) no está vacío y queda marcado como enlace todo lo
que hay entre <A> y </A>.
20
Figura 1-12: Documento HTML con los datos personales mostrados con Netscape en una plataforma Macintosh
Figura 1-13: Documento HTML con los datos personales mostrados con Netscape 4.03 en Windows
21
Figura 1-14: Documento HTML con los datos personales mostrados con Internet Explorer 4 en Windows.
1.5.5 Imágenes en el documento

A este documento se le puede dar algo más de colorido poniendo una imagen con nuestra
foto o con algún dibujo.
Por ejemplo, se pueden añadir unos iconos junto al número de teléfono, de Fax y a la
dirección de correo electrónico. Para ello se utiliza el elemento IMG de la siguiente forma:
<IMG SRC="icons/telefono.gif" ALIGN=MIDDLE>

Teléfono: 3987146
El elemento IMG tiene dos atributos:

1) SRC: cuyo valor es el URL o archivo donde está la imágen.
2) ALIGN: que indica el alineamiento del texto con la imagen.
En el Tema 2 se explicará mas extensamente la colocación de imágenes dentro de un
documento.
La Figura 1-15 muestra el resultado final visualizado con Netscape y en la Tabla 1-3 el
documento HTML completo que le corresponde.
22
1.6 Esquema de denominación para los documentos HTML
Figura 1-15: Versión final del documento HTML con los datos personales mostrados con Netscape

Cuando un navegador recibe un archivo debe conocer a qué tipos de datos está
accediendo para saber que hacer con ellos. Los servidores de material con estructura de
hipertexto (HTTP) le dicen al navegador explícitamente el tipo de datos que le están
enviando. Pero en otros casos, como cuando el navegador está usando FTP o está
accediendo a archivos locales, el tipo de datos lo obtiene de la propia extensión del archivo
(la parte del nombre del archivo que sigue a continución del punto). Por ejemplo, hemos
visto que los archivos HTML se identifican de la forma siguiente
nombre.html
donde la extensión .html indica que se trata de un documento HTML.

Generalmente se utilizan cuatro letras para la extensión, lo que no es ningún problema
para ordenadores Macintosh, UNIX o basados en Windows 95 o 98, ya que en ellos no hay
restricciones en el tamaño de los nombres de los archivos. Sin embargo en máquinas
basadas en DOS o en Windows 3.1, el tamaño de los nombres de los archivos está
restringido y las extensiones sólo pueden tener tres letras, esto se soluciona truncando las
extensiones, así .html se convierte en .htm.
En la Tabla 1-4 se muestran algunas de las extensiones más comunes y su significado.
23
<HTML>
<HEAD>
<TITLE>Página Web de J. Aranda</TITLE>


</HEAD>
<BODY>
<H1>Joaquín Aranda Almansa</H1>

<ADDRESS>
<A HREF="http://www.dia.uned.es">Departamento de Informática y
Automática</A> <BR>
Facultad de Ciencias <BR>
<A HREF="http://www.uned.es">UNED</A>
</ADDRESS>
<UL>
<IMG SRC="icons/telefono.gif" ALIGN=MIDDLE> Teléfono: 3987146 <br>
<IMG SRC="icons/fax.gif" ALIGN=MIDDLE> Fax: 3986697 <br>
<IMG SRC="icons/telnet.gif" ALIGN=MIDDLE> e-mail: <A
HREF="mailto:jaranda@dia.uned.es">jaranda@ddia.uned.es</A>
</UL>
<HR>
<H2>Biografía</H2>
<p>
Profesor Titular de Universidad. En la actualidad imparte su docencia en el
Departamento de Informática y Automática de la Facultad de Ciencias de
la UNED. Las líneas de investigación y la docencia que imparte en la
actualidad son las indicadas a continuación
</p>
<UL>
<LI><A HREF="http://www.dia.uned.es/investigacion/control.html">Control de
procesos</A>
<LI><A HREF="http://www.dia.uned.es/investigacion/sensor.html">Integración
multisensorial </A>
<LI><A HREF="http://www.dia.uned.es/investigacion/navegacion.html">Sistemas de
navegación</A>
</UL>
<H2>Docencia</H2>
<UL>
<LI><A
HREF="http://www.dia.uned.es/asignaturas/automaticaII.html">Automática
II</A>
<LI><A HREF="http://www.dia.uned.es/asignaturas/soI">Sistemas Operativos I</A> y <A
HREF="http://www.dia.uned.es/asignaturas/soII">II</A>
</UL>
<hr>
</BODY>
</HTML>
Tabla 1- 3: Documento HTML con datos personales
24
Extensión Significado
.html Documentos HTML, conteniendo texto e instrucciones HTML.
(.htm)
.txt Un archivo de sólo texto. En este caso el navegador presenta el contenido del archivo
como un bloque de texto sin procesar las instrucciones que pueda contener. Por regla
general los tipos desconocidos se tratan como archivos de texto.
.ps Archivo PostScript, que es un formato común en muchas impresoras laser.
.eps Archivo en formato PostScript encapsulado. Este formato no es apropiado para enviar
directamente a una impresora.
.gif Un archivo de imágenes en formato GIF.
.xbm Un archivo de imágens en formato X-bitmap (blanco y negro).
.xpm Un archivo de imágenes en formato X-pixmap (en color).

.jpeg Un archivo de imágenes en formato JPEG.
(.jpg)
.mpeg Un archivo de vídeo en formato MPEG.
(.mpg o
.mpe)
.qt Un archivo de vídeo en formato Quick-Time (Macintosh).
.avi Un archivo de vídeo en formato AVI (Microsoft).
.au Un archivo de audio (sonido) en formato AIFF.
.Z Un archivo comprimido utilizando el compresor Lempel-Zip. Este es un programa de

compresión-descompresión común en ordenadores UNIX.
.gz Un archivo comprimido utilizando el programa GNU gzip. Este programa es común en
ordenadores UNIX y está disponible también para PCs y Macintosh.
Tabla 1- 4: Algunas extensiones de los archivos más habituales
1.6.1 Tipos de archivos MIME

En el WWW se utilizan los tipos MIME (Multipurpose Internet Mail Extension) para
definir el tipo de datos que se transfieren. Cuando un servidor Web envía datos a un
navegador, primero consulta su lista de tipos de archivos MIME, y luego le dice al cliente
que tipos de datos le va a enviar. Cada navegador tiene una configuración almacenada (en
un menú o en un archivo) que asocia a cada tipo de datos una función determinada. Un
navegador puede manipular muchos tipos de datos (como documentos HTML, imágenes
GIF, etc.) pero otros tipos de datos se transfieren para su procesamiento a programas
auxiliares, como son los visualizadores de imágenes, proyectores de vídeo, reproductores
de audio, etc.
Los servidores Web (HTTP) transfieren una cabecera inicial al navegador con el tipo
MIME de los datos que se le envian a continuación. Para ello el servidor tiene que tener una
forma de decir el tipo de datos que va a transmitir. Normalmente dispone de un archivo de
configuración que relaciona las extensiones de los nombres de los archivos con el tipo
MIME apropiado. Por ejemplo, el tipo MIME para documentos HTML es text/html.
De esta forma, si un navegador pide que se le envíe el archivo notas.html, el servidor
mira cual es el tipo MIME correspondiente a la extensión .html y le envía un mensaje al
25
navegador diciéndole que los datos que se le van a transferir inmediatamente son del tipo
text/html.
Hay otros servidores, como los de FTP, que no envian la información de tipos MIME de
los datos. En este caso, el navegador debe obtenerla directamente a partir de la extensión
del nombre del archivo. Por este motivo, cada navegador se debe configurar con un lista de
las extensiones de los tipos de datos más comunes, que además le servirá también para
determinar el tipo de los archivos locales.
26
2 Diseño de documentos HTML
Tema
En el capítulo 1 se ha comentado la filosofía propia del lenguaje HTML y se han

introducido los elementos básicos de un documento HTML: cabeceras, listas, marcas de
caracteres, imágenes, anclas de hipertexto y algunos más. En este capítulo estudiaremos
otros elementos importantes de HTML (BLOCKQUOTE, OL, FORM, TABLE,...) y veremos
algunas cuestiones de diseño de documentos. Al introducir las directivas se indican
algunas de las situaciones en las que se pueden utilizar, refiriendose al capítulo 5 para una
explicación más extensa de las mismas y ver que atributos aceptan así como los valores que
pueden tomar.
2.1 Puntualizaciones para el diseño de documentos

Aunque se puede continuar el estudio de este módulo saltando esta sección y escribir
páginas HTML sin hacer unas consideraciones previas de diseño, es una buena idea
reflexionar en primer lugar sobre los documentos que va a publicar y hacer un diseño
previo. De esta forma tendrá un camino que seguir cuando escriba los documentos y le
ahorrará posteriores reorganizaciones.
En los ejemplo que se verán en este capítulo se consideraran algunos puntos que se
mencionan a continuación.
1) Considere cuál es la audiencia a la que va dirigido y como quiere que naveguen a
través de los documentos, si es más importante la vistosidad del documento,
incluyendo gráficos y sonidos, o que se descargue rápidamente y que la información
sea textual.
2) Los documentos deben ser pequeños. Cada documento no debe de visualizar más
de dos o tres pantallas completas de datos. La ventaja del modelo de hipertexto es
que se pueden enlazar varias componentes de la red de documentos. Esta ventaja se
pierde si se está viendo un documento inmenso de cientos o miles de lineas de texto.
Aunque se pueden construir enlaces de hipertexto dentro de un mismo documento,
esto generalmente supone una navegación mas difícil que si se tiene una colección
de pequeños ficheros.
3) Cada documento debe tener las herramientas de navegación. Estas son enlaces que
conectan el documento a otros documentos siguiendo una jerarquía y a
27
determinados puntos de navegación general dentro de la colección. Así, cada página

debe tener enlaces a los documentos siguiente y anterior (si hay un orden lineal de
páginas) y a una tabla o índice de contenidos. Si el documento es grande, más de
dos o tres pantallas, es una buena idea colocar los botones de navegación en la parte
superior e inferior del documento, de forma que sea más fácil encontrarlos.
4) Todos los documentos deben tener un estilo de presentación consistente. Cada
documento se debe de haber diseñado con la misma estructura de cabecera, los
mismos iconos de navegación y una plantilla similar para el contenido.
En la Figura 2-1 se muestra un ejemplo de un documento HTML perteneciente a una
colección de ficheros relacionados (en concreto corresponde a un manual de HTML hecho
en HTML); el listado de este documento está en la Tabla 2-1. El documento forma parte de
una colección en la que todos los ficheros se enlazan en una forma serie, como las páginas
de un libro, es decir, hay un documento anterior y un documento siguiente. Sin embargo
hay también enlaces de hipertexto relacionando los documentos en una forma que no es
serie. Por ejemplo, un documento discutiendo el elemento IMG tiene una sentencia
mencionando los URLs, que contiene un enlace a un documento que da una explicación
más detallada de los mismos.
Los documentos también están ordenados de forma jerárquica. Así, el documento que
discute el elemento TITLE está por debajo del documento HEAD que está por debajo del
documento del índice (la Figura 2-3 muestra el documento índice y en la Tabla 2-2 se da
como referencia el listado del mismo). La página de índice tiene enlaces a todos los
documentos de la colección y es una forma fácil y rápida de encontrar una sección
determinada.
Figura 2- 1: Presentación en Netscape del documento cabecera.html
28
<HTML>
<HEAD>
<TITLE>1 Cabecera documentos HTML</TITLE>
</HEAD>
<BODY>
[<A HREF="Indice.html">Indice</A>]
[<A HREF="Intro.html">Anterior</A>]
[<A HREF="Base.html">Siguiente</A>]
<HR>
<H1>2.1 Cabecera de los documentos HTML</H1>
<P ALIGN="JUSTIFY">La cabecera (HEAD) contiene .... El material que se visualiza se
incorpora en el cuerpo (<A HREF="Body.html">BODY</A>) del documento. .... Estos
elementos son los siguientes:
<UL>
<li><A HREF="Base.html">BASE</A>: Es un registro del URL original del documento.
<li><A HREF="Isindex.html">ISINDEX</A>: Generalmente se introduce en la cabecera
por el servidor o un programa del servidor para indicar que el documento es accesible
mediante búsqueda.
<li><A HREF="Link.html">LINK</A>: Define las relaciones (enlaces) entre este
documento y otros. En un documento puede haber varios LINK.
<li><A HREF="Meta.html">META</A>: Es un contenedor para la metainformación
del documento.
<li><A HREF="Nextid.html">NEXTID</A>: Es un parámetro utilizado por los
editores que generan HTML de forma automática para crear identificadores
únicos de los documentos.
<li><A HREF="Title.html">TITLE</A>: Es el título del documento. Este
elemento es obligatorio, ya que todos los documentos deben tener necesariamente un
TITLE.
</UL>
<P ALIGN="JUSTIFY">Además de estos elementos, hay otros que no son oficiales
en la definición del HTML estándar, pero que son soportados por
algunos visualizadores. Estos elementos son los siguientes:
<UL>
<li><A HREF="Script.html">SCRIPT</A>: Es una extensión introducida por
Netscape Inc. para incluir programas denominados "scripts", escritos en Javascript,
dentro de un documento HTML. Funciona en versiones de Netscape 2.0 y posteriores.
<li><A HREF="Style.html">STYLE</A>: Es un elemento de HTML versión 3.0 que
permite incluir información de las hojas de estilo. Está operativo en
el visualizador Arena.
</UL>
<H2>Ejemplo</H2>
<P ALIGN="JUSTIFY">La cabecera de un documento podría tener la siguiente
estructura:
<BLOCKQUOTE>
<PRE>
<HTML>
<HEAD>
<TITLE> CURSO DE INTERNET </TITLE>
<BASE HREF="http://www.dia.uned.es/cursos/internet.html">
<LINK HREF="http://www.matfun.uned.es/internet/indice.html"
REL="index">
</HEAD>
<BODY>
</BODY>
</HTML>
</PRE>
</BLOCKQUOTE>
<HR>
</BODY> </HTML>
Tabla 2- 1: Documento cabecera.html
29
Por otra parte, antes de empezar a crear los ficheros debe organizar su ubicación, para
ello puede seguir las siguientes recomendaciones:
1) Cree un directorio o carpeta central en la que se situará todo el material que quiere
que esté disponible en el Web. (Si está en Windows eliga Archivo > Nuevo >
Carpeta).
2) Esta carpeta central divídala en subcarpetas de forma que refleje la forma en que se
organizará su Web. Por ejemplo, puede tener una carpeta para los documentos
HTML, otra para las imágenes, y otra para otros tipos de ficheros. Si el Web es muy
grande, entonces le puede interesar tener carpetas diferentes para cada capítulo,
situando las imágenes en carpetas diferentes.
Notas
Para nombrar las carpetas y los ficheros es recomendable que utilice nombres
compuestos por una única palabra, sin símbolos o signos de puntuación.
2.1.1 Botones de navegación

Para una estructura de documentos como la descrita se deben poner unos botones de
navegación. En la Figura 2-1 se ve en la parte superior unos iconos para navegar:
[Indice][Anterior][Siguiente]. El botón Indice apunta directamente a la
página de índice o contenido, el botón Anterior apunta al documento anterior en la
jerarquía, que en este caso corresponde al fichero Intro.html, y el botón Siguiente al
siguiente, que corresponde en este caso al fichero base.html.
Para leer el documento en forma lineal sólo se necesitan los botones Anterior y
Siguiente. El código para ello corresponde a:
Para darle más vistosidad se podría haber puesto unos iconos para la navegación, se
pueden incluir unas imágenes con un pequeño dibujo, como se muestra en la Figura 2-2,
para lo cual se pone dentro del ancla el elemento IMG con el URL del fichero que tiene el
dibujo del icono:
[<A HREF="Indice.html"><IMG SRC=”index.gif” ALT=”Indice”></A>]

[<A HREF="Intro.html"><IMG SRC=”fizq.gif” ALT=”Anterior”></A>]
[<A HREF="Base.html"><IMG SRC=”fder.gif” ALT=”Siguiente”></A>]
El elemnto IMG tiene en este caso dos atributos: SRC cuyo valor es el fichero con el
dibujo, y ALT cuyo valor es un texto que se mostrará en aquellos navegadores que tienen
desactivada la carga de imágenes.
30
Figura 2- 2: Iconos gráficos para la navegación
Notas
Tal como se muestra en el listado del documento de la Tabla 2.1, los botones de
navegación se han puesto tanto al principio como al final del documento. Esta es una buena
alternativa para cuando los documentos son largos y no se ven completos en una pantalla
(teniendose que utilizar la barra de deslizamiento, como ocurre en la Figura 2-1).
Figura 2- 3: Presentación en Netscape del documento indice.html
2.1.2 Índice o tabla de contenido

En la Figura 2-3 se muestra un índice que corresponde al manual de HTML comentado
anteriormente (en la Tabla 2-2 está su listado). En el índice se da una visión global de la
31
estructura jerárquica de los documentos, incluyendo las situaciones de las secciones y

enlaces directas a las mismas.
Este índice se ha construido a mano, lo cual supone un trabajo tedioso, pero hay
programas que generan automáticamente índices con enlaces de hipertexto directos a partir
de una colección de documentos HTML, en este caso se utilizan las cabeceras empotradas
en los documentos para crear tanto los nombres de las secciones como la organización
jerárquica. Ésta es otra buena razón para utilizar cabeceras.
2.1.3 Listas
El ejemplo de la Tabla 2-2 (visualizado en la Figura 2-3) le puede servir de referencia
para cuando quiera hacer listas, ya que aparecen listas numeradas (<OL>), punteadas
(<UL>) y anidadas.
Listas numeradas
Una lista numerada se comienza con la directiva <OL> y se termina con </OL>, entre
ellas se escriben los items de la lista, cada uno de ellos con una directiva <LI>:
<OL>
<LI><A HREF="cabecera.html">Cabecera de los documentos</A>
<LI><A HREF="Body.html">El cuerpo de un documento HTML</A>
<LI><A HREF="Organizacion.html">Organización de los
elementos en el cuerpo</A>
<LI><A HREF="Elembloque.html">Elementos a nivel de bloque</A>
<LI><A HREF="listas">Listas</A>
<LI><A HREF="enfatiza.html">Enfatización de
caracteres</A>
<LI><A HREF="Anclas.html">Anclas (A) de hipertexto</A>
<LI><A HREF="Caracter.html">Elementos a nivel de carácter</A>
</OL>
El resultado de esta lista se muestra en la Figura 2-4, donde se ve que cada item va
precedido por un número de orden.
Figura 2- 4: Lista ordenada
32
Listas punteadas
Una lista punteada se comienza con la directiva <UL> y se termina con </UL>, entre
ellas se escriben los item de la lista, cada uno de ellos con una directiva <LI>:
<UL>
<li><A HREF="Hn.html">Cabeceras (Hn)</A>
<li><A HREF="Parrafos.html">Párrafos (P)</A>
<li><A HREF="Address.html>El elemento ADDRESS</A>
<li><A HREF="Blockauote.html">El elemento BLOCKQUOTE (BQ)</A>
<li><A HREF="Hr.html">Línea horizontal (HR)</A>
<li><A HREF="Pre.html">Texto preformateado (PRE)</A>
<li><A HREF="Form.html">Formularios (FORM)</A>
<li><A HREF="Table.html">Tablas (TABLE)</A>
<li><A HREF="Div.html">División de bloques (DIV)</A>
<li><A HREF="Fig.html">Figuras (FIG)</A>
<li><A HREF="Note.html">Notas (NOTE)</A>
<li><A HREF="Footnote.html">Notas a pie de página (FOOTNOTES
o FN)</A>
</UL>
El resultado se muestra en la Figura 2-5 donde se ve que los items de la lista están
precedidos por una marca (por defecto un punto negro) en lugar de por el número de orden
como ocurría en el caso anterior.
Figura 2- 5: Listas punteadas
Listas anidadas
Se puede insertar una lista dentro de otra. Esto es lo que se utilizó al hacer el índice
mostrado en la Figura 2-3 y cuyo código HTML se muestra en la Tabla 2-2. Dentro de la
lista numerada creada con OL se han incluido listas numeradas (creadas con UL). En este
caso, la lista numerada marca los capítulos de que consta el manual de HTML y las listas
33
punteadas los apartados de las mismas.
2.1.4 Proporcionando formatos alternativos

También hay que tener en cuenta otras características que se emplean. Por ejemplo, si
desea dar una versión que sea imprimible de la colección de documentos, puede combinar
los documentos para presentar alternativamente un fichero grande, que permita al cliente
descargarlo y leerlo como HTML o imprimirlo (desde su propio navegador) como un
fichero de texto. Para ello debe añadir en el índice algún párrafo que indique esta opción,
como por ejemplo:
<p> Estos documentos estan disponibles como un único <A

HREF=”todos.html”>documento HTML</A>(230Kb) que puede utilizar
para imprimirlo. Sin embargo, en este documento se han
eliminado los enlaces de hipertexto.</p>
También puede utilizar otros formatos alternativos para el documento completo. Por
ejemplo, indicar que existe una versión en formato zip para PC con el nombre todos.zip,
con este formato tiene todos los documentos con su estructura de directorios incluida (si así
lo quiere) en un único archivo comprimido, el usuario tendría que descargarlo y utilizar
alguna aplicación del paquete PKZIP para descomprimirla. Para ordenadores Macintosh
existe un programa para archivar documentos llamado StuffIt, en este caso puede generar
un archivo todos.sit. Para usuarios de Unix podría tener un archivo en formato tar
(todos.tar) o comprimido con gzip (todos.tar.Z).
También es recomendable crear una página en la que se pusieran enlaces a estos archivos
para permitir su descarga por parte del usuario. En este caso debería indicar la aplicación
que se necesita para descomprimir o descodificar el archivo y cuanto ocupa el mismo.
Ejercicio
Hacer una colección de documentos con todos los documentos de los ejercicios y de los
ejemplos:
• Hacer una tabla de contenido. Actualícela con los sucesivos ejemplos y

ejercicios.
• Hacer enlaces a los documentos.
• En los documentos poner “botones de navegación”.
2.2 Formateando el texto

El formatear texto en páginas Web es bastante diferente de como se formatea el texto en
programas de edición y procesamiento de textos, por la sencilla razón de que en nuestro
caso no se puede tener un control completo de como verá el usuario final el texto. Hay que
tener en cuenta que el usuario que “visite” nuestras páginas puede hacerlo desde distintas
plataformas (PC con Windows, macintosh, estaciones de trabajo con UNIX, etc) y con
distintos programas, navegadores gráficos como son Netscape o Internet Explorer, o
incluso con un navegador no-gráfico Lynx, sin que nínguno de estos navegadores muestre
34
<HTML>
<HEAD>
<TITLE>Elementos y directivas de HTML</TITLE>
</HEAD>
<BODY>
<H1>Elementos y directivas del lenguaje HTML</H1>
<OL>
<li><A HREF="cabecera.html">Cabecera de los documentos HTML</A>
<UL>
<li><A HREF="Base.html">BASE</A>
<li><A HREF="Isindex.html">ISINDEX</A>
<li><A HREF="Link.html">LINK</A>
<li><A HREF="Meta.html">META</A>
<li><A HREF="Nextid.html">NEXTID</A>
<li><A HREF="Title.html">TITLE</A>
<li><A HREF="Script.html">SCRIPT</A>
<li><A HREF="Style.html">STYLE</A>
</UL>
<li><A HREF="Body.html">El cuerpo (BODY) de un documento HTML</A>
<li><A HREF="Organizacion.html">Organización de los elementos en el cuerpo</A>
<li><A HREF="Elembloque.html">Elementos a nivel de bloque</A>
<UL>
<li><A HREF="Hn.html">Cabeceras (Hn)</A>
<li><A HREF="Parrafos.html">Párrafos (P)</A>
<li><A HREF="Address.html>El elemento ADDRESS</A>
<li><A HREF="Blockauote.html">El elemento BLOCKQUOTE (BQ)</A>
<li><A HREF="Hr.html">Línea horizontal (HR)</A>
<li><A HREF="Pre.html">Texto preformateado (PRE)</A>
<li><A HREF="Form.html">Formularios (FORM)</A>
<li><A HREF="Table.html">Tablas (TABLE)</A>
<li><A HREF="Div.html">División de bloques (DIV)</A>
<li><A HREF="Fig.html">Figuras (FIG)</A>
<li><A HREF="Note.html">Notas (NOTE)</A>
<li><A HREF="Footnote.html">Notas a pie de página (FOOTNOTES o FN)</A>
</UL> <li><A HREF="listas">Listas</A>
<UL>
<li><A HREF="Dl.html">Listas de glosario (DL)</A>
<li><A HREF="Ul.html">Listas regulares sin número de secuencia (UL, MENU,
DIR)</A>
<li><A HREF="Ol.html">Listas regulares con número de secuencia (OL)</A>
</UL>
<li><A HREF="enfatiza.html">Enfatización de caracteres</A>
<UL>
<li><A HREF="logicos.html">Estilos lógicos</A>
<li><A HREF="fisicos.html>Estilos físicos</A>
</UL>
<li><A HREF="Anclas.html">Anclas (A) de hipertexto</A>
<li><A HREF="Caracter.html">Elementos a nivel de carácter</A>
<UL>
<li><A HREF="br.html">Saltos de línea (BR)</A>
<li><A HREF="tab.html">Tabuladores (TAB)</A>
<li><A HREF="Img.html">Imagenes (IMG)</A>
<li><A HREF="banners.html>Pancartas (BANNERS)</A>
</UL>
<li><A HREF="Math.html">Ecuaciones: el elemento MATH</A>
<UL>
<li><A HREF="Emath.html">Elementos dentro de MATH</A>
<li><A HREF="Entimat.html">Entidades matemáticas</A>
</UL>
35
<li><A HREF="cespeciales.html">Caracteres especiales</A>

<UL>
<li><A HREF="cespeciales2.html">Caracteres especiales</A>
<li><A HREF="ccontrol.html">Caracteres de control</A>
</UL>
<li><A HREF="extensiones.html">Extensiones de Netscape y Microsoft</A>
<UL>
<li><A HREF="center.html">CENTER</A>
<li><A HREF="font.html">FONT</A>
<li><A HREF="basefont.html">BASEFONT</A>
<li><A HREF="applet.html">APPLET</A>
<li><A HREF="marquee.html">MARQUEE</A>
<li><A HREF="map.html">MAP</A>
<li><A HREF="frame.html">FRAME</A>
</UL>
</OL>
<br>
<DIR>
<li><A HREF="autores.html">Sobre los autores</A>
<li><A HREF="biblio.html">Bibliografía complementaria</A>
<li><A HREF="otrosformatos.html">Este documento en otros formatos imprimibles</A>
</DIR>
</BODY>
</HTML>
Tabla 2- 2: Listado del documento indice.html
el texto exactamente de la misma forma.

En las sucesivas revisiones de HTML se ha ido dando más capacidad a los diseñadores
para controlar el formato del texto. En HTML 3.2 se añadieron varias directivas que entre
otras cosas permitian cambiar la fuente, el tamaño y el color del texto. Pero aunque se tenía
más control sobre el texto, esto era bastante tedioso pues cada palabra o párrafo debía tener
sus propias directivas de formato. Con HTML 4 se han ido devaluando muchas de estas
directivas en beneficio de las hojas de estilo que permiten asignar un conjunto de
características a un párrafo. Este mecanismo de las hojas de estilo resulta bastante mas
eficiente y potente.
Como no siempre se necesita toda esta potencia que proporcionan las hojas de estilo, en
muchas ocasiones se puede optar por directivas locales para indicar qué fuente, tamaño o
color de texto se desea. Por ello se indica a continuación como usar estas directivas,
viendose en el capítulo siguiente la utilización de las hojas de estilo.
2.2.1 Modificando la fuente del texto

Originariamente en HTML no se permitía indicar una fuente de texto en concreto, ni
modificar el tamaño o color de la misma. Pero a partir de HTML 3.2, se incluyó una
directiva que permite indicar el tipo de fuente así como el tamaño o color que se prefiere.
Esta directiva es <FONT>, en el siguiente ejemplo, cuya visualización con Netscape se
muestra en la Figura 2-6, se utiliza para cambiar la fuente del texto:
<P><FONT FACE=”Arial Black”>Este párrafo está escrito con la

fuente de texto Arial Black</FONT>
<P>En medio de un párrafo también se puede
cambiar la fuente, <FONT FACE=”Copperplate Gothic Light”>en
este caso se utiliza la fuente Copperplate Gothic Light</FONT>
36
Figura 2- 6: Cambio del tipo de fuente de texto en un documento
La fuente que se quiere utilizar se ha puesto como valor en el atributo FACE.

Además de FACE hay otras directivas que modifican la fuente utilizada. Por ejemplo, si
se quiere visualizar código de un programa de ordenador, URLs u otros textos que se
quieren presentar con una fuente con caracteres tipo máquina de escribir o
monoespaciados, se puede utilizar las siguientes directivas:
• <CODE> para marcar texto como código de computador.
• <KBD> para marcar texto de entrada de teclado.
• <SAMP> para visualizar un texto de ejemplo, con una fuente con caracteres de
anchura fija.
• <TT> texto en tipo máquina de escribir (es el utilizado con mayor frecuencia).
Figura 2- 7: Ejemplos de textos con caracteres de anchura fija
En la Figura 2-7 se muestra el siguiente ejemplo con el uso de estas directivas:
<P>A Continuación se muestran ejemplos de la utilización de
37
directivas que utilizan fuentes de caracteres de anchura fija:

<P> La instrucción <CODE>mkdir</CODE> crea un nuevo directorio.
<P>Si quiere cambiar su contraseña tecle <KBD>passwd</KBD> y
ponga la nueva contraseña.
<P>A continuación <SAMP>un texto con una fuente con letras de
anchura fija</SAMP>.
<P>Para concluir <TT>un texto de máquina de escribir</TT>.
La visualización se hace con la fuente y el tamaño seleccionado en el navegador para el

tipo de letra de anchura fija (fixed width)1.
Pero si lo que se quiere es visualizar varias líneas con una fuente de anchura fija,
entonces es mejor utilizar <PRE>, esto permite mantener los saltos de línea y el espaciado
tal como aparece en el texto original. PRE se utiliza para texto preformateado y es
adecuado para tablas y texto ASCII cuyo formato mantenga cierta estructura o forma. La
Figura 2-8 muestra el código de un ejemplo donde se utiliza texto preformateado, la
visualización con Netscape de este documento se muestra en la Figura 2-9.
Figura 2- 8: Ejemplo de un texto preformateado
Figura 2- 9: Visualización de un texto preformateado
1. En Netscape Comunicator 4 esto se seleciona en Edición > Preferencias > Apariencia > Tipo de letras,
en el ejemplo mostrado en la Figura 2-7 corresponde a Courier New de 12 puntos.
38
2.2.2 Cambiando tamaños y colores para el texto

Para cambiar el tamaño de la fuente, FONT acepta el atributo SIZE (cuyos valores son
enteros entre 1 y 7) y para cambiar el color se utiliza el atributo COLOR (cuyo valor es el
código hexadecimal del color deseado).
También se puede cambiar el tamaño de la fuente, de una forma relativa al resto del
texto. Esto se hace con las directivas:
• <BIG> indica que a partir de ese momento se utilice un tamaño de letra mayor
al que se está utilizando.
• <SMALL> indica que se utilice un tamaño de letra menor al que se está

utilizando.
En el siguiente ejemplo, mostrado en la Figura 2-10, se utilizar BIG y SMALL para

cambiar el tamaño relativo de los caracteres:
<P>En un momento determinado se desea utilizar <BIG>un tamaño

de letra mayor</BIG>, pero a partir de otro momento se desea
utilizar <SMALL>un tamaño de letra menor</SMALL>, para
continuar con el tamaño por defecto.
Figura 2- 10: Modificando el tamaño relativo de las letras
Si lo que se quiere es cambiar el tamaño del texto para crear subíndices o superíndices, se
pueden utilizar las directivas <SUB> y <SUP> respectivamente. En el siguiente código,
mostrado en la Figura 2-11 con Netscape, se utilizan estas directivas para poner los índices
y los subíndices de unas ecuaciones:
<P>Teorema de Pitágoras: a<SUP>2</SUP> + b<SUP>2</SUP> =

c<SUP>2</SUP>
<P>Fórmula química del agua: H<SUB>2</SUB>O
Figura 2- 11: Subíndices y superíndices
39
2.2.3 Resaltando el texto

Para resaltar el texto hay directivas semánticas como STRONG o EM, que ya hemos visto,
en este caso la forma de resaltar el texto depende de la interpretación del navegador
(generalmente STRONG se interpreta poniendo el texto en negrita y EM en cursiva, aunque
algunos navegadores no-gráficos, como Lynx, lo que hacen es subrayarlo). Pero también
se pueden utilizar otras directivas que explícitamente indican que el texto se ponga en
negrita, es el caso de la directiva <B>, o en cursiva, directiva <I>.
Las directivas CITE y ADDRESS (que la hemos visto en el ejemplo de la sección 1.5)
también se suelen interpretar poniendo el texto en cursiva.
Otra forma de resaltar el texto es subrayandolo, para ello se dispone de la directiva <U>,
o tachar el texto con una raya, para lo que se dispone de la directiva <STRIKE>. Esto es
común utilizarlo cuando se está revisando el texto (el subrayado sería el texto nuevo
añadido y el tachado el que se borrará en la versión final). Aunque estas directivas se
mantienen en la version HTML 4, no se aconseja su uso, ya que para estas funciones se han
introducido las directivas <DEL> para borrar e <INS> para insertar1.
Netscape introdujo una directiva para resaltar el texto haciendolo parpadear
(<BLINK>), que se puede utilizar para resaltar enlaces o un texto que se considere
importante dentro de la página. Esta directiva no la reconoce Internet Explorer, ni parece
ser que la vaya a reconocer.
En el siguiente ejemplo, que se visualiza con Netscape en la Figura 2-12, se muestra el
uso de todas estas directivas para resaltar el texto (lógicamente, en el papel impreso no se
aprecia el efecto de parpadeo logrado con BLINK):
<P>Hay bastantes directivas que nos permiten resaltar el texto,

por ejemplo con <STRONG>STRONG que pone el texto en
negrita</STRONG> o con <EM>EM que lo pone en cursiva</EM>.
<P>También se puede utilizar la directiva <B>B para negrita</B>
o la <I>I para cursiva</I>.
<P>Otra forma de resaltar es <U>subrayandolo con U</U> o
indicar que está <STRIKE>tachado con STRIKE</STRIKE>.
<P>Aunque en la versión impresa no se aprecia, en la pantalla se
puede ver un <BLINK>parpadeo</BLINK> logrado con BLINK.
Figura 2- 12: Distintas formas de resaltar un texto
1.Estas directivas no son aún ampliamente reconocidas, pero en las nuevas versiones de Explorer ya se
reconocen, y posiblemente lo haga Netscape también.
40
Si se quiere resaltar un párrafo, como por ejemplo cuando se cita a un autor famoso,
entonces se puede utilizar la directiva <BLOCKQUOTE>. El resultado de su utilizacción
depende del navegador empleado. Con Netscape queda sangrado, como se muestra en el
siguiente ejemplo, ver Figura 2-13:
<P> Y habiéndola escrito, se la leyó, que

decía así:
<BLOCKQUOTE> <P> Mandará vuestra merced, por esta
primera de pollinos, señora sobrina, dar a Sancho Panza,
mi escudero, tres de los cinco que dejé en casa y
están a cargo de vuestra merced. </BLOCKQUOTE>
Figura 2- 13: Texto citado entre “comillas”
La directiva <BOLCKQUOTE> es una directiva a nivel de bloque, siempre comienza en

una nueva línea. Si lo que se quiere es entrecomillar algo en la misma línea, en HTML 4 se
dispone de la directiva <Q>, pero esta directiva aún no es soportada por Netscape ni por
Internet Explorer.
2.2.4 Elección de los valores por defecto de la fuente del texto

Si se quiere, se puede indicar un tamaño para el texto del cuerpo de la página, aunque
luego con BIG y SMALL se pueda cambiar de una forma relativa. Esto se puede hacer con
la directiva BASEFONT, por ejemplo:
<BASEFONT SIZE=”5”>
Pero recuerde que aquellos posibles visitantes de su página pueden haber seleccionado
en su navegador los tamaños que prefieren para el texto, por ello no use esta directiva de
forma arbitraria. También debe de tener en cuenta que BASEFONT no afecta a las
cabeceras, por ello no debe de elegir un valor que sea mayor que el de las cabeceras.
Algunos navegadores permiten cambiar la fuente y el color con los atributos FACE y
COLOR dentro de la directiva BASEFONT. Pero tenga cuidado, porque esto no es soportado
mayoritariamente.
Si lo que se quiere es cambiar el color por defecto del texto, en HTML 4 se permite el
atributo TEXT dentro de la directiva BODY, indicando en hexadecimal el color deseado.
41
2.3 Composición de la página

Hay varias directivas que se aplican a la página completa, en lugar de a unas pocas
palabras o a un párrafo y que permiten definir algunas de las características de composición
de la página, como pueden ser los márgenes y columnas, el color de fondo, divisiones de la
página, etc.
2.3.1 Especificación de los márgenes de la página

Los navegadores, Netscape e Internet Explorer, añaden por defecto un espacio entre el
contenido de la página y el borde de la pantalla. Pero Internet Explorer permite modificar
este espacio indicando en número de pixels, dentro de la directiva BODY, el margen
izquierdo deseado con LEFTMARGIN y el margen superior con TOPMARGIN.
El siguiente código es visualizado en la Figura 2-14 con Internet Explorer, en donde se
ve que hay un espacio mayor que el habitual:
<BODY LEFTMARGIN=30 TOPMARGIN=30>

<P>La del alba sería cuando don Quijote salió de la venta tan
contento, tan gallardo, tan alborozado pòr verse ya armado
caballero, que el gozo le reventaba por las cinchas del
caballo.
Figura 2- 14: Especificando espacios extras en los margenes superior e izquierdo
En la Figura 2-15 se muestra el mismo ejemplo pero se ha suprimido la especificación

LEFTMARGIN=30 TOPMARGIN=30.
Figura 2- 15: Sin especificar espacios extras en los margenes superior e izquierdo
42
Notas
Recuerde que LEFTMARGIN y TOPMARGIN sólo funcionan con Internet Explorer.
2.3.2 Sangrados
Hay diversas formas de hacer que los párrafos esten sangrados (desplazados a la
derecha). Una forma que la entienden los distintos navegadores es utilizando listas1, en
concreto, puede utilizar la directiva <UL> para sangrar, como se ve en el siguiente ejemplo
(Figura 2-16):
<P>A continuación se muestra una forma de sangrar utilizando

listas:
<UL>En este caso no se introduce ningún item en la lista, tan
solo se pone la directiva de comienzo de la lista y todo lo que
hay hasta la directiva de final queda sangrado
</UL>
Figura 2- 16: Sangrado de un párrafo utilizando las directivas de lista
Otra forma, pero sólo disponible para Netscape, es utilizar la directiva <SPACER> con
dos atributos, TYPE con el valor horizontal, y SIZE indicando en pixels el sangrado
que se quiere. El siguiente ejemplo muestra el resultado al aplicar esta directiva (Figura
2-17):
<P>A continuación se muestra una forma de sangrar utilizando

SPACER:
<P>
<SPACER TYPE=horizontal SIZE=36>En este caso el resultado es
diferente a cuando se utilizó la lista para sangrar. Como puede
ver, lo que hace es sangrar el comienzo del párrafo, es como
poner un tabulador.
1.Este fue el truco que se utilizó en el editor de HTML que acompañaba a la versión Netscape Gold, y que
tenía la opción de hacer que los párrafos estuvieran sangrados, y que esto lo entendieran los otros
navegadores, el secreto quedó desvelado al ver el código: los sangrados se creaban con listas.
43
Figura 2- 17: Sangrado del comienzo del párrafo
La directiva SPACER también se puede utilizar para crear un bloque alrededor del cual
se puede escribir un texto, esto se puede usar para desplazar todo el texto, para lo cuál el
atributo TYPE toma el valor block y se ponen dos atributos más WIDTH y HEIGHT con
el ancho y la altura del bloque expresado en pixels, y otro, ALIGN, que indica el
alineamiento del bloque.
En el siguiente ejemplo se utiliza esta directiva para que el texto quede desplazado a la
derecha (Figura 2-18):
<SPACER TYPE=block WIDTH=100 HEIGHT=100 ALIGN=left>Esta es una

forma de crear un margen extra a la izquierda del texto.
<P>En este caso, es como si hubiera una imagen invisible a la
izquierda del texto.
Figura 2- 18: Un bloque de espacio
2.3.3 Indicar un espaciado entre párrafos

El espacio que se deja entre párrafos, cuando se estan utilizando las directivas P o BR,
depende del tamaño del texto, si el texto está en un tipo de caracteres grande se deja mayor
espacio que si el tamaño de los caracteres es menor. Pero en Netscape se puede utilizar
también la directiva SPACER para indicar el espacio que se quiere dejar entre una línea y
otra, en este caso el argumento TYPE toma el valor vertical, y SIZE el valor en pixels
del espacio que se va a dejar entre dos líneas.
En el siguiente ejemplo se muestra el efecto de esta directiva (Figura 2-19):
44
<SPACER TYPE=horizontal SIZE=32>Con Netscape se puede utilizar

la directiva SPACER para sangrar el comienzo de un párrafo, y
también para indicar el espaciado entre dos líneas
<SPACER TYPE=vertical SIZE=24>Como se ve en este ejemplo, esta
línea esta separada 24 pixels de la anterior.
Figura 2- 19: Espaciado entre líneas
Notas
Recuerde que SPACER sólo funciona con Netscape.
2.3.4 Texto en varias columnas

Netscape reconoce una directiva que permite dividir el texto en varias columnas, tal
como aparecen en artículos de revistas o periódicos. Esta directiva es MULTICOL y puede
definir el número de columnas (atributo COLS), el espaciado entre las columnas (atributo
GUTTER) y la anchura de cada columna (atributo WIDTH), expresado todo ello en pixels o
en porcentaje del tamaño de la ventana.
El siguiente ejemplo muestra un texto en varias columnas (Figura 2-20):
<MULTICOL COLS=3 GUTTER=18 WIDTH=90%>

Cuando se quiere poner a disposición del público un conjunto de
información, probablemente ya se tiene una estructura de la
misma, aunque sea mental. Es muy normal que esta estructura sea
en forma arborescente, con una jerarquía análoga a la de los
libros, es decir, con capítulos, secciones y subsecciones.
<P>
Si se tiene esta estructura, manténgala. Ello ayudará a los
lectores a estructurar la información a la que están accediendo
y el propio escritor puede utilizarla para organizar los
archivos en directorios.
<P>
Conviene tener siempre presente cuál es la audiencia para la
que se está escribiendo. No es lo mismo escribir para gente sin
conocimientos previos del tema que para expertos en él. Si no
tienen conocimientos del tema, la estructura que se les
presente es la que aprenderán, pero si tienen conocimientos del
tema, ya poseen una organización preconcebida de como se
configura la información del mismo, que puede ser diferente a
la del escritor. Por ello es conveniente que se adopte la
45
estructura de acuerdo con la audiencia a la que va destinada. Si

ésta es variada, por ejemplo dos grupos diferentes, se pueden
mantener simultaneamente estructuras para ambos, utilizando
árboles solapados.
</MULTICOL>
Figura 2- 20: Texto en columnas
Notas
Recuerde que MULTICOL sólo funciona con Netscape
2.3.5 Alineamiento del texto

En las especificaciones de HTML 2.0 los elementos P y H1 a H6 no tenian atributos,
pero a partir de HTML 3.2 estos elementos soportan el atributo ALIGN. Con este atributo
se define el alineamiento que se desea para estos elementos en la página, los valores que
puede tomar son: left (ajusta el texto a la izquierda, es el valor por defecto), center
(centra el texto entre los márgenes), right (ajusta el texto a la derecha) y justify
(ajusta el texto a los dos márgenes). En la Figura 2-21 se muestran los distintos resultados
del alineamiento del texto, correspondiente al documento de la Tabla 2-3.
Si un navegador no entiende el atributo ALIGN, entonces lo ignora.
Además de utilizar el atributo ALIGN existe otra posibilidad para centrar el texto, es
mediante la directiva CENTER, la cual se puede utilizar con casi cualquier clase de
elementos de HTML, incluyendo los párrafos, cabeceras, imágenes y formularios, aunque
tengan otro método para centrarlos.
46
Figura 2- 21: Alineamiento de cabeceras y párrafos
<HTML>
<HEAD>
<TITLE>Alineamiento de cabeceras y párrafos</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center">Alineamiento de cabeceras y párrafos</H1>
<H2 ALIGN="left">Cabecera y párrafo alineada a la izquierda</H2>
<P>Con ALIGN="left" , valor por defecto, el texto queda alineado a la izquierda.
<H2 ALIGN="center">Cabecera y párrafo centrada</H2>
<P ALIGN="center">Con ALIGN="center", el texto queda centrado entre los dos
márgenes, izquierdo y derecho. Se puede usar esta opción para centrar una imagen. Por
ejemplo <BR> <IMG SRC="fder.gif">
<H2 ALIGN="right">Cabecera y párrafo alineada a la derecha</H2>
<P ALIGN="right">Con ALIGN="right" el texto queda alineado a la derecha.
<H2 ALIGN="justify">Cabecera y párrafo justificados</H2>
<P ALIGN="justify"> con ALIGN="justify" el texto tanto de la cabecera como de los
párrafos queda justificado a los dos márgenes, izquierdo y derecho.
</BODY>
</HTML>
Tabla 2- 3: Utilización de ALIGN para alineamiento del texto
En el siguiente ejemplo se compara la utilización de la directiva <CENTER> y el atributo

ALIGN para centrar párrafos y cabeceras. El efecto, como se puede ver en la Figura 2-22 es
el mismo.
<H1 ALIGN=”center”>Esta es una cabecera centrada con el

atributo ALIGN</H1>
47
<P ALIGN=”center”>Este párrafo también ha sido centrado con el

atributo ALIGN para la directiva P de párrafo. A continuación
se hará con la directiva CENTER.
<CENTER>
<H1>Cabecera centrada con CENTER</H1>
<P>Este es un párrafo también centrado. Todo quedará centrado
hasta que se cierre la directiva CENTER. Como se ve el efecto es
igual que con el atributo ALIGN.
</CENTER>
<P>A partir de ahora no está centrado, ya que se ha cerrado la
directiva CENTER.
Figura 2- 22: Centrado de cabeceras y párrafos
2.3.6 Controlando el fondo del documento

A partir de HTML 3.2 se soporta el atributo BACKGROUND para el elemento BODY, de
forma que se permite indicar un archivo con una imagen que se puede utilizar como fondo
del documento. Para ello se escribiría:
<BODY BACKGROUND=”url”>
El valor de BACKGROUND es el URL correspondiente a un archivo con la imagen. Si

puede, el navegador cargará esta imagen y la utilizará como fondo del documento que está
presentando.
Esto puede hacer mas atractivo el documento, pero se debe utilizar con gran cuidado, ya
que no todo el mundo tiene monitores gráficos de calidad, además, el color del fondo puede
que dificulte la lectura o visualización de otros gráficos o textos.
Es muy probable que se tengan problemas si se utiliza como fondo un color similar al
usado para el texto.
Todos los navegadores que soportan el atributo BACKGROUND también soportan los
atributos TEXT, LINK y VLINK para especificar el color del texto, del texto con enlaces y
del texto con enlaces que ya se han visitado.
48
2.4 Situando imágenes en una página
Además, también se puede utilizar el atributo BGCOLOR dentro de BODY para

especificar un determinado color de fondo. En este caso el color se expresa en
hexadecimal: BGCOLOR=”#rrggbb”. O bien de la forma BGCOLOR=color, donde
color es uno de los 16 colores predefinidos (ver Tabla 2-4).
color= silver Gray Maroon Green Navy Purple Olive Teal
PLATEADO GRIS GRANATE VERDE AZUL PURPURA COLOR VERDE

MARINO ACEITUNA BOTELLA
color= white black red lime blue magenta yellow cyan
BLANCO NEGRO ROJO VERDE AZUL MORADO AMARILLO AZUL

LIMA VERDOSO
Tabla 2- 4: Los dieciseis colores predefinidos para el fondo
Por ejemplo:
<BODY BACKGROUND=”fondoim.gif”>
En este caso se cargaría como fondo para la página el gráfico que hay en el fichero
fondoim.gif. En el caso:
<BODY BGCOLOR=red>
Se pondría como fondo de toda la página el color rojo. Si se quiere un color de los no
predefinidos, se puede poner un verde claro de la siguiente forma:
<BODY BGCOLOR=”#94D639”>
En la impresión (al ser en blanco y negro) no se ponen de manifiesto estos colores, pero
puede probarlos en su ordenador y ver que efecto produce.

Ya se ha visto como poner una imagen en una página (con la directiva IMG), en la
sección 1.5 cuando se añadieron a la página personal unos iconos para el teléfono, el fax y
el correo electrónico, y en la sección 2.1.1 cuando se han puesto unos iconos gráficos para
la navegación. En estos ejemplos incluso se vio como se puede poner un enlace que
contenga a las imágenes e incluso dar un texto alternativo para cuando el navegador no
carga la imagen.
En esta sección se verá como puede alinear la imagen con el texto y como puede
especificar el tamaño de la misma.
2.4.1 Alineamiento de las imágenes

El alineamiento de la imágenes es algo más problemático que el alineamiento del texto,
ya que se puede querer alinear imágenes con el texto (que es lo esperado) pero también se
suele desear mantener la imágen en una determinada posición y que el texto fluya en torno
suyo. A partir de HTML 3.2 se puede utilizar ALIGN con los valores:
49
• texttop: la imagen se alinea con el texto más alto que se tenga en la línea.
• top: la imagen se alinea con el elemento más alto que se tenga en la línea.
• middle: el centro de la imagen queda alineada con la línea base del texto.
• absmiddle: el centro de la imagen queda alineado con el item más graqnde.
• bottom: la parte inferior de la imagen se alinea con la parte inferior del texto.
• absbottom: la parte inferior de la imagen se alinea con la parte inferior del

elemento más grande.
En la Figura 2-23 se muestra el resultado de utilizar estos atributos, el listado de la

página está en la Tabla 2-5.
<HTML>
<HEAD>
<TITLE>Alineamiento de las imagenes</TITLE>
</HEAD>
<BODY>
<P><IMG SRC=”gif/diacolp.gif”>Se alinea el escudo <IMG SRC=”gif/escudi,.gif”
ALIGN=”texttop”> de la UNED con texttop. <IMG SRC=”gif/diacolp.gif”>Se alinea el
escudo <IMG SRC=”gif/escudi,.gif” ALIGN=”top”> de la UNED con top
<P><IMG SRC=”gif/diacolp.gif”>Se alinea el escudo <IMG SRC=”gif/escudi,.gif”
ALIGN=”middle”> de la UNED con middle. <IMG SRC=”gif/diacolp.gif”>Se alinea el
escudo <IMG SRC=”gif/escudi,.gif” ALIGN=”absmiddle”> de la UNED con absmiddle
<P><IMG SRC=”gif/diacolp.gif” ALIGN=”texttop”>Se alinea el escudo <IMG
SRC=”gif/escudi,.gif” ALIGN=”bottom”> de la UNED con bottom. <IMG
SRC=”gif/diacolp.gif” ALIGN=”textop”>Se alinea el escudo <IMG SRC=”gif/escudi,.gif”
ALIGN=”absbottom”> de la UNED con absbottom
</BODY>
</HTML>
Tabla 2- 5: Utilización de ALIGN para alinear las imagenes
Por otro lado, si se quiere que el texto “fluya” en torno a la imagen se pueden usar los
valores left (para que la imagen se mantenga en el lado izquierdo) y right (para que se
mantenga en el lado derecho).
En la Figura 2-24 se muestra el resultado del uso del atributo ALIGN con la directiva
IMG, en la Tabla 2-6 se encuentra el listado del correspondiente documento.
Casi todos los navegadores soportan este tipo de alineamiento de las imágenes; sin
embargo, hay algunos que no lo soportan y situan la imagen alineada con el texto. Por ello
es una buena idea poner IMG como el primer item de una línea, o que esté precedido por un
elemento de línea en blanco, de esta forma se garantiza que la imagen aparezca como el
primer item de la línea.
También puede ocurrir que un autor quiera dejar cierto espacio entre la imagen y el
texto. Una forma de conseguirlo es crear la imagen con un borde, pero si esto no se puede
hacer se tiene la opción de utilizar los atributos HSPACE y VSPACE que indican el espacio,
en pixels, que hay que dejar en torno a la imagen. Por ejemplo, en la Figura 2-24 se dejó un
espacio en torno a la segunda imagen: VSPACE=5 HSPACE=8.
Si se quiere, también se puede poner un borde en torno a la imagen, para ello se utiliza el
atributo BORDER, el cual indica el ancho del borde en pixels. Si no se quiere un borde se
50
tiene que poner BORDER=”0”, el valor por defecto suele ser BORDER=”1”, pero esto
depende también del navegador.
Figura 2- 23: Alineamiento de las imágenes con el texto
51
Figura 2- 24: Alineamiento de las imágens de forma que el texto fluya en torno a ellas
<HTML>
<HEAD>
<TITLE>Alineamiento de imágenes</TITLE>
</HEAD>
<BODY>
<H1>Alineamiento de las imágenes</H1>
<P> <IMG ALIGN="left" ALT="[Ejemplo de imagen]" SRC="escudin.gif">Se puede ver como
afecta el atributo ALIGN a las imágenes. Con <CODE>ALIGN="left"</CODE> hace que la
imagen quede a la izquierda del texto, "fluyendo" este a su lado.
<P><IMG VSPACE=5 HSPACE=8 ALIGN="left" ALT="[Ejemplo de imagen]" SRC="escudin.gif">
Con la misma imagen podemos utilizar <B>HSPACE</B> y <B>VSPACE</B> viendo como deja
mas espacio entre la imagen y el texto. Así se mejora la lectura del texto y la vista
de la imagen.
<P><IMG HEIGHT=100 WIDTH=100 ALIGN="right" ALT="[Ejemplo de imagen]"
SRC="escudin.gif">También se puede poner la imagen a la derecha con
<CODE>ALIGN="right"</CODE> y cambiando su tamaño especificando <B>HEIGHT</B> y
<B>WIDTH</B> . En este caso la imagen es ampliada a este tamaño.
</BODY>
</HTML>
Tabla 2- 6: Utilización de ALIGN para alinear las imágenes de forma que el texto fluya en torno a ellas
2.4.2 Especificar el tamaño de la imagen

Cuando un navegador va a formatear una página, debe conocer el tamaño de las
imágenes que tiene que presentar. En general, un navegador no conoce este dato hasta que
no se ha cargado la imágen, lo cual significa que no puede presentar la página hasta que no
ha llegado la imagen. Esto supone un retardo considerable, por ello a partir de HTML 3.2
se soportan los atributos HEIGHT y WIDTH para el elemento IMG, con los que se puede
especificar el tamaño de la imagen en pixels. Con esta información, el navegador puede
52
2.5 Tablas
comenzar a formatear la página, dejando el espacio adecuado para cuando se termine de

descargar la imagen. Si la imagen no es del tamaño indicado, entonces la reescala para
ajustarla a ese tamaño. La utilización de estos atributos la puede ver en la tercera imagen
del ejemplo que hemos mostrado en la Figura 2-24 y en la Tabla 2-6.
Cuando se han puesto imágenes, puede que desee que el texto no esté a continuación de
la imagen sino que continue en la parte inferior de ella (es decir, que deje de “fluir” el texto
en torno a ella), para conseguirlo puede utilizar el atributo CLEAR dentro del elemento BR.
Por ejemplo <BR CLEAR=”left”> asegura que el texto que se ponga a continuación
quedará con el margen izquierdo liberado.
2.5 Tablas
Las tablas son una forma fácil de presentar en muchas ocasiones información que de otra
resulta más complicado de entender. Hacer las tablas directamente en código HTML puede
ser bastante tedioso, aunque el resultado merece el esfuerzo. No obstante puede ayudarse
de algunos de los editores de HTML para ello, y en todo caso retocarlas después para
añadir alguna característica que no ha podido introducir con el editor. También puede
ocurrir que haya gente que sus navegadores no entienden las tablas (algo raro pero posible),
en este caso haga las tablas utilizando texto preformateado como se ha visto antes.
Una recomendación, no se limite a utilizar las tablas para presentar un conjunto de
números repartidos en filas y columnas, sus posibilidades son mucho mayores y encontrará
muchos Webs con presentaciones atractivas y que estan basados en una inteligente
utilización de las tablas.
Las tablas se crean utilizando el elemento TABLE, y se definen como un conjunto de
filas, indicadas mediante los elementos TR. Cada una de estas filas es un conjunto de celdas
definidas mediante los elementos TH y TD. Los elementos TH (table header) se utilizan
para las cabeceras de las columnas o de las filas y los elementos TD (table data) para las
entradas normales de la tabla. También se puede incluir un pie de tabla mediante el
elemento CAPTION. El pie de tabla puede contener todas las marcas de formateo de
caracteres, incluyeno anclas de hipertexto. El siguiente ejemplo:
<TABLE BORDER>
<CAPTION>Pie de la tabla</CAPTION>
<TR><TH>Una cabecera <TH>Otra cabecera <TH>La tercera
cabecera</TR>
<TR><TD>primer </TD> <TD>20%</TD> <TD>40%</TD>
<TR><TD>segundo </TD> <TD>59% </TD> <TD>35%</TD>
</TABLE>
Se visualiza como:
Hay que resaltar varios puntos:
53
• Por defecto, el contenido de las celdas de las cabeceras se centra, mientras que
el de las celdas de datos se ajusta a la izquierda. Esto se puede modificar con el
atributo ALIGN para las celdas, el atributo COLSPEC para el elemento
TABLE o el atributo ALIGN para los elementos TR de las filas.
• Las celdas pueden estar vacías.
• Las celdas pueden ocupar varias filas. En éste caso las celdas contribuyen a la
cuenta de las columnas de cada una de las filas que ocupan, pero sólo aparecen
una vez en la descripción de la tabla en la primera fila que ocupan.
• Si para una fila dada, el número de columnas de la tabla es mayor que el

número de celdas definidas para ésta fila (después de incluir las celdas que
ocupan varias filas), las celdas que faltan hasta llegar al número de columnas
que tiene la tabla se consideran que están en el lado derecho de la tabla y se
interpretan como celdas vacías.
• No es válido tener celdas que se solapen. En estos casos, la interpretación

depende del navegador.
• Los elementos TD y TH generalmente no necesitan una directiva de

terminación. Sin embargo es conveniente ponerla, puesto que puede haber
situaciones que originen cierta confusión. Por ejemplo, el formateador de
tablas de Netscape con cierta frecuencia se confunde si falta la directiva de
terminación. En particular, conviene usar siempre la directiva de terminación
si se tienen tablas dentro de tablas.
• Por defecto, las tablas se dibujan sin bordes. Para dibujar las líneas de los
bordes se tiene que poner el atributo BORDER, y a partir de HTML 4 si se
quiere elegir los bordes que se van a visualizar entonces puede usar el atributo
FRAME (ver en el capítulo 5 los atributos para TABLE).
• Por defecto, las tablas se ajustan al margen izquierdo. Para centrar las tablas se
pueden poner dentro del elemento CENTER. Netscape admite el atributo de
alineamiento ALIGN para TABLE.
2.5.1 Alineamiento del contenido de las celdas de la tabla

Los elementos TD, TR y TH pueden tomar varios atributos que permiten definir el
alineamiento del contenido de los elementos (ALIGN y VALIGN, que se ilustran como
ejemplo en la Tabla 2-7 y se visualiza su resultado en la Figura 2-25).
Con ALIGN se consigue el alineamiento horizontal, puede tomar los valores: left,
center, right, justify. Para TD el valor por omisión es left y para TH center.
Con VALIGN se consigue definir el alineamiento vertical, toma por tanto los valores:
top, middle, bottom o baseline, el valor por omisión es middle. Con baseline
se alinea el contenido de cada celda con la línea base de la primera línea de texto que
contiene la celda; si no hay imagenes y hay varias líneas de texto el efecto es el mismo que
con top, pero si contiene imagenes y texto el efecto es el mismo que con bottom.
54
2.5 Tablas
Figura 2- 25: Presentación con Netscape del documento tabla.html
<HTML>
<HEAD><TITLE>TABLA</TITLE></HEAD>
<BODY>
<TABLE BORDER WIDTH=100%>
<TR> <TH> Cabecera 1 </TH> <TH> Cabecera 2 <BR> subcabecera </TH> </TR>
<TR VALIGN="top"><TH> Cabecera 1 </TH><TH> Cabecera 2 <BR> subcabecera</TH>
</TR>
<TR ALIGN="rigth"> <TH> Cabecera 1 </TH> <TH> Cabecera 2 <BR> subcabecera </TH>
</TR>
<TR> <TD> 80.25 </TD> <TD> dato1 <BR> 77.8 </TD> </TR>
<TR ALIGN="center"> <TD> 80.25 </TD> <TD> dato1 <BR> 77.8 </TD> </TR>
<TR VALIGN="bottom"> <TD> 80.25 </TD> <TD> dato1 <BR> 77.8 </TD> </TR>
</TABLE>
</BODY>
</HTML>
Tabla 2- 7: Documento tabla.html con la creación de una tabla
Cuando diseñe una tabla se tiene que asegurar que el número de filas y columnas es el
correcto para la tabla, es decir, que todas las filas deben cubrir el mismo número de
columnas, y que todas las columnas cubran el mismo número de filas.
2.5.2 División de la tabla en grupos de columnas y secciones horizontales

Hay dos clases de grupos de columnas: estructurales y no estructurales. El primero
controla donde se dibujan las líneas de división o reglas. El segundo no. Pero los dos
permiten dar formato de una sola vez a todas las celdas de una columna (o grupo de
columnas).
Para dividir una tabla en grupos de columnas estructurales se tiene la directiva
COLGROUP con la que se indica el número de columnas que forman el grupo.
En el siguiente ejemplo, la tabla se divide en dos grupos de columnas, el primero es
55
alineado a la izquierda y con el tipo de fuente , el segundo se extiende a lo largo de tres

columnas y se centra su contenido (Figura 2-26):
<TABLE WIDTH=100%>
<CAPTION ALIGN=top>Aparcamientos en Madrid</CAPTION>
<COLGROUP ALIGN=LEFT STYLE=”font: 12pt Arial”>
<COLGROUP SPAN=3 ALIGN=CENTER>
<TR>
<TD><BR>
<TH>A.C.
<TH>M.DE.U
<TH>P.DE.M.
<TR>
<TH>NºPLAZ.
<TD>600
<TD>450
<TD>300
<TR>
<TH>NºPISOS
<TD>2
<TD>3
<TD>3
<TR>
<TH>PLAZAS/PISO
<TD>300
<TD>150
<TD>100
</TABLE>
Figura 2- 26: División de una tabla en grupos de columnas
Si se quiere dividir la tabla en grupos de columnas no estructurales entonces, en lugar

de utilizar COLGROUP se debe de utilizar COL. De hecho, dentro de COLGROUP se puede
incluir COL para añadir información no estructural (como el tamaño, alineamiento, etc) a
columnas individuales dentro del grupo de columnas estructural.
Si lo que se quiere es dividir la tabla en secciones horizontales, por ejemplo, para
dibujar líneas de división entre secciones en lugar de entre filas individuales, entonces
antes de la primera directiva <TR> se pueden definir las secciones mediante <THEAD>
<TBODY> o <TFOOT>, pudiendose poner los atributos necesarios para cada sección.
En el ejemplo anterior se han añadido las directivas THEAD y TBODY para tener una
56
2.5 Tablas
sección con los títulos de las columnas y otra con el resto (Figura 2-27):
<TABLE WIDTH=100%>
<THEAD STYLE=”font: 12pt Arial”>
<TR>
<TD><BR>
<TH>A.C.
<TH>M.DE.U
<TH>P.DE.M.
<TBODY>
<TR>
<TH>NºPLAZ.
<TD>600
<TD>450
<TD>300
<TR>
<TH>NºPISOS
<TD>2
<TD>3
<TD>3
<TR>
<TH>PLAZAS/PISO
<TD>300
<TD>150
<TD>100
</TABLE>
Figura 2- 27: División de la tabla en secciones horizontales
Notas
Estas directivas aún no son entendidas por Netscape, por lo que hay que tener cuidado al
utilizarlas, ya que no tendran efecto cuando el documento se muestre con un navegador que
no las contemple.
57
2.5.3 Extender una celda a través de dos o mas filas o columnas

Algunas veces puede querer que una celda se extienda a lo largo de dos o más columnas
(o filas), por ejemplo cuando se quiere poner una cabecera común a varias columnas (o
filas), esto es posible mediante el atributo COLSPAN (o ROWSPAN para filas), cuyo valor
es el número de columnas (filas) a través de las cuales se va a extender la celda.
En el ejemplo de la Tabla 2-8 se utiliza COLSPAN para extender unas celdas que sirven
como cabeceras de columnas a lo largo de tres columnas. En cada fila se han definido siete
posiciones de columnas, en la primera fila hay una celda vacía y dos cabeceras
extendiendose a lo largo de tres columnas cada una, en la siguiente fila hay una celda
cabecera vacía y seis celdas individuales de datos. Se han dibujado los bordes para
distinguir claramente cada celda.
<TABLE BORDER WIDTH=100%> <TBODY>

<CAPTION ALIGN=top>Aparcamientos en <TR>
Madrid</CAPTION> <TH>NºPLAZ.
<TD>600
<COLGROUP ALIGN=LEFT STYLE=”font: 12pt <TD>450
Arial”>
<TD>300
<TD>1200
<TD>1500
<TD>900
<TR>
<TH>NºPISOS
<TR>
<TD>2
<TD><BR>
<TD>3
<TD>3
<TH COLSPAN=3>Centro Ciudad
<TD>4
<TH COLSPAN=3>Periferia
<TD>3
<TD>2
<TR>
<TR>
<TH><BR>
<TH>PLAZAS/PISO
<TH>A.C.
<TD>300
<TH>M.DE.U
<TD>150
<TH>P.DE.M.
<TD>100
<TH>Est.Maj.
<TD>300
<TH>Vil.
<TD>500
<TH>Alc.
<TD>450
</TABLE>
Tabla 2- 8: Documento con una tabla donde se extiende algunas celdas a lo largo de columnas
En la Figura 2-28 se muestra este documento cuando se visualiza con Internet Explorer,
y en la Figura 2-29 cuando se hace con Netscape, pueden comparar la diferencia entre ellos
ya que COLGROUP y THEAD no los entiende Netscape y por tanto no surten ningún efecto
con él.
En estas figuras se puede comprobar como las celdas donde se pone “Centro Ciudad” y
“Periferia” se extienden a lo largo de tres columnas cada una.
58
2.5 Tablas
Figura 2- 28: Visualización con Internet Explorer de un documento con celdas extendidas en varias columnas
Figura 2- 29: Visualización con Netscape de un documento con celdas extendidas en varias columnas
En el ejemplo anterior, las dos celdas vacías que aparecen al principio de las dos
primeras filas se podian definir como una única celda, mostrandose entonces como se ve en
la Figura 2-30. Para conseguir este efecto, el documento anterior de la Tabla 2-8 se tiene
que modificar en dos detalles: Primero hay que expandir a lo largo de las dos filas la celda
vacía de la primera fila. Segundo, ya que la celda vacía se ha expandido a las dos filas, la
primera celda de la segunda fila ya no se tiene que definir. A continuación se muestra la
primera parte del documento donde se han tenido que introducir estos dos cambios, el resto
sería igual que la columna derecha de la Tabla 2-8:

<TR>
<TD ROWSPAN=2><BR>
59
<TH COLSPAN=3>Centro Ciudad

<TH COLSPAN=3>Periferia
<TR>
<TH>A.C.
<TH>M.DE.U
<TH>P.DE.M.
<TH>Est.Maj.
<TH>Vil.
<TH>Alc.
Figura 2- 30: Expansión de celdas a lo largo de filas y columnas
2.5.4 Tablas dentro de tablas

En HTML 3.0 se pueden introducir tablas anidadas, es decir, tablas en las que el
contenido de una celda puede ser otra tabla. A continuación se presenta un ejemplo con
estas características, pues dentro de una tabla se han introducido otras dos tablas, cada una
en una celda de la tabla principal (Figura 2-31):

<TR> <TD COLSPAN=3 ALIGN="center"> <H3>Título de la
Tabla Principal </H3> </TD> </TR>
<TR> <TD> primer dato </TD> <TD> segundo dato </TD> <TD>
tercer dato </TD> </TR>
<TD ALIGN="center" VALIGN="center">
<TABLE BORDER=3 CELLSPACING=7>
<TR> <TD COLSPAN=2 ALIGN="center">Título de una
subtabla </TD> </TR>
<TR> <TD>Dato 1 </TD> <TD>Dato 2 </TD> </TR>
</TABLE>
</TD>
<TD></TD>
<TD ALIGN="center" VALIGN="center">
<TABLE BORDER=3 CELLSPACING=7>
60
2.6 Documentos con marcos
<TR> <TD COLSPAN=2 ALIGN="center">Título de la

otra subtabla </TD> </TR>
<TR> <TD>Dato 1 <br> tabla 2 </TD> <TD>Dato 2 </TD> </TR>
</TABLE>
</TD>
</TR>
</TABLE>
Figura 2- 31: Tablas anidadas
Notas
Los efectos que se pueden sonseguir con las tablas son muchos y variados, ya que los
atributos WIDTH y HEIGHT permiten modificar los tamaños de las celdas y de las tablas,
con ALIGN el alineamiento de las celdas y con BORDER, FRAME y RULES donde y como
se quieren las líneas de separación entre celdas y los bordes de la tabla.

Netscape introdujo en la versión 2 de Navigator un nuevo tipo de documentos, los
documentos HTML de marcos (frames). En estos documentos utilizan un tipo nuevo de
marcas que permite al autor dividir la ventana del navegador en distintos marcos
independientes, cada uno conteniendo su propio documento HTML.
El dividir una página en marcos permite que se pueda ver más de una página a la vez sin
la confusión y el atiborramiento que puede suponer el tener varias ventanas abiertas.
A partir de la versión 4 de HTML los marcos (frames) son un estándar de HTML. Sin
embargo se supone que se deben etiquetar las páginas Web que contienen marcos al fin de
ayudar a los navegadores a reconocerlas. Para ello comience el documento que contiene la
definición de los marcos con:
<!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 4. Frameset//EN”>
61
En un documento de marcos, el elemento BODY se reemplaza por el elemento

FRAMESET, que define la forma de los distintos marcos en los que se divide la ventana del
navegador.
El contenido incial de un marco se define con los elementos FRAME o FRAMESET
situados dentro del primer FRAMESET. Cada elemento FRAME define el contenido y
propiedades de un marco en particular, mientras que los siguientes FRAMESET van
dividiendo los marcos en otros marcos.
Dentro de un documento de marcos sólo se acepta un elemento más, el NOFRAMES. Este
elemento puede contener un elemento BODY con marcas normales de HTML que se
presentaran cuando el navegador no entienda el elemento FRAMESET.
En la Tabla 2-9 se muestra un documento con marcos. En la Figura 2-32 se ve la
presentación de este documento por Netscape.
<!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 4. Frameset//EN”>

<HTML>
<HEAD> <TITLE>Curso HTML</TITLE></HEAD>
<FRAMESET ROWS="30,*" >
<FRAME NAME="barra" SRC="menubar.html">
<FRAMESET COLS="85%,15%">
<FRAME NAME="contenido" SRC="indice.html">
<FRAME NAME="navibar" SRC="menu.html">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
<P>No dispone de un navegador con "frames". Puede perder algunas características
e información de estos documentos.
<hr>
Puede cargar el <A HREF="indice.html">índice</A> y navegar por el mismo.
</BODY>
</NOFRAMES>
</HTML>
Tabla 2- 9: Documento en el que se divide la pantalla del navegador en tres marcos
En el listado de la Tabla 2-9 podemos ver que con <FRAMESET ROWS="30,*"> se

definen dos marcos horizontales, el primero con una altura de 30 pixels y el segundo con el
resto de la pantalla (Figura 2-32).
Con la sentencia <FRAME NAME="barra" SRC="menubar.html"> se indica
que el primer marco lo designamos con el nombre barra (que es el valor del atributo NAME)
e inicialmente cargamos en él el documento menubar.html (que es el valor del atributo
SRC), (ver la Tabla 2-10 donde está el listado de este documento).
A continuación, el segundo marco horizontal se divide en dos marcos verticales
mediante <FRAMESET COLS="85%,15%">, el primer marco ocupará el 80% y el
segundo el 15% del ancho de la ventana.
Con <FRAME NAME="contenido" SRC="indice.html">, al igual que antes,
se indica un nombre para el primer marco (contenido) que se acaba de definir y se carga
con un documento inicial (indice.html) y con el siguiente <FRAME
NAME="navibar" SRC="menu.html"> se define el nombre para el segundo marco
(navibar) y el documento inicial con el que se carga (menu.bar, cuyo listado se
encuentra también en la Tabla 2-10). En la Figura 2-33 se muestra como queda la división
final en marcos.
62
El primero con una altura de 30 pixels
El resto de la ventana para el segundo
Con <FRAMESET ROWS=”30,*”>

se divide la ventana en dos
marcos horizontales
Figura 2- 32: División de la ventana en dos marcos horizontales
barra => menubar.html
navibar => menu.html

contenido => indice.html
Figura 2- 33: División de la ventana en tres marcos y los documentos que se cargan en cada uno
En el elemento NOFRAMES se pone un cuerpo (BODY) que se mostrará en aquellos

navegadores que no puedan cargar marcos.
Los marcos son útiles si su contenido se puede actualizar y reemplazar por otro
documento o datos. Esto es posible si es posible identificar que marco se quiere actualizar.
Esta es la importancia que tiene el atributo NAME en el elemento FRAME. Estos nombres
deben ser únicos dentro de una colección de documentos, ya que identifican
individualmente a cada marco.
En el ejemplo anterior se ha visto que a cada marco se le ha asignado un nombre (barra,
contenido, navibar). Estos nombres son elegidos arbitrariamente por el diseñador, aunque
es lógico elegir nombres que resulten fáciles de recordar.
En las anclas de hipertexto (elementos A) y en los formularios (FORM) se puede hacer
referencia a marcos individuales mediante el atributo TARGET. El valor de este atributo es
el nombre dado como identificador del marco. Por ejemplo en el documento
menubar.html se encuentra la sentencia <A HREF="tema1.html" TARGET=
"contenido"> TEMA 1</A> que indica que el resultado del enlace se presente en el
marco denominado contenido. Puede ver en los documentos de la Tabla 2-10 como se ha
utilizado en los enlaces de hipertexto el atributo TARGET.
63
Documento menubar.html
<HTML>
<HEAD><TITLE>Barra de menú</TITLE></HEAD>
<BODY>
<TABLE CELLPADING=0 CELLSPACING=0 WIDTH="100%">
<TR>
<TD ALIGN="center"><A HREF="http://uned.es">UNED</A>
<TD ALIGN="center"><A HREF="http://dia.uned.es">Dpt. I&A</A>
<TD ALIGN="center"><A HREF="indice.html" TARGET="contenido">Indice</A>
<TD ALIGN="center"><A HREF="intro.html" TARGET="contenido">Sobre el Curso</A>
</TR>
</TABLE>
</BODY>
</HTML>
Documento menu.html
<HTML>
<HEAD><TITLE>Menú</TITLE></HEAD>
<BODY>
<A HREF=”indice.html” TARGET=”contenido”>Indice</A><br>
<A HREF="tema1.html" TARGET="contenido">TEMA 1</A><br>
<A HREF=”tema4.html” TAGET=”contenido”>TEMA 4</A><br>
<A HREF=”tema5.html” TARGET=”contenido”>TEMA 5</A><br>
<A HREF="mailto:jaranda@dia.unes.es">Consultas</A>
</BODY>
</HTML>
Tabla 2- 10: Listado de los documentos menubar.html y menu.html que se incluyen en los marcos definidos en el
documento marcos.html
Notas
Las posibilidades de los marcos son inmensas y pueden servir para crear efectos
atractivos y entornos de navegación en los que siempre se mantiene una botonera o menú
de referencia. Para ello las directivas FRAME y SETFRAME disponen de una serie de
atributos que permiten definir tamaños, bordes, anchura de los margenes, etc. Consulte los
atributos de las mismas en el tema 4 y haga pruebas con ellos, por ejemplo en el ejercicio
que se propone a continuación.
No obstante presentan ciertos inconvenientes que hay que tener en cuenta, como son el
que el usario no conoce el URL de los documentos que se abren en los marcos (sólo
aparece el URL del documento inicial en el que se divide la ventana en marcos), esto
supone el que si en un marco se abre un documento que nos interesa en particular, no
podemos guardar en el “bookmark” su dirección, ya que la dirección que se nos guarda es
la del documento inicial.
64
Figura 2- 34: Vista del documento con marcos.html en el que se han definido tres marcos
Ejercicio: Hacer un documento HTML con tres marcos (frames):

1) En el marco de la derecha ponga el índice de todos los documentos de ejemplos y
ejercicios que tenga.
2) En el marco de la izquierda el contenido de los mismos.
3) En el de abajo ponga tres botones: uno a su página personal, otro con la dirección
de e-mail y el tercero con información sobre el curso.
2.6.1 Marcos en línea

Si se quiere mezclar en una página texto, gráficos y un marco, se puede necesitar crear
un marco flotante o inline.
Los marcos flotantes o en línea funcionan de forma similar a las imágenes, fluyendo con
el resto del contenido de la página. Se declaran con la directiva IFRAME, indicándole en el
atributo SRC el URL donde está el documento que se va a mostrar en el marco flotante.
Opcionalmente también se le puede dar un nombre al marco con el atributo NAME, así
como las dimensiones (en pixels o en tanto por ciento de la ventana) con los atributos
WIDTH y HEIGHT. Si se desea se puede hacer que fluya el texto a su alrededor (igual que
con las imágenes) utilizando ALIGN con los valores left y right.
En el siguiente ejemplo se muestra el uso de un marco en línea:
65
<!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 4.0 Frameset //EN”>

<HTML><HEAD><TITLE>Marcos flotantes</TITLE></HEAD>
<BODY>
<H1>Una vuelta por la UNED</H1>
<P>Aquí se puede ver un ejemplo de la página de un
Departamento de la UNED
<HR>
<P><CENTER>
<IFRAME WIDTH=90% HEIGHT=70%
SRC=”http://servidor.dia.uned.es/”>
En este ejemplo se muestra el Web del <A
HREF=”http://servidor.dia.uned.es/”>Departamento de
Informática y Automática</A> de la UNED como una prueba de
un Web típico de la Universidad, con información relativa a
la docencia y a la investigacción.
</IFRAME>
</CENTER>
</BODY>
</HTML>
En la Figura 2-35 se muestra el resultado de este ejemplo con Internet Explorer. Aunque
es un estandar en HTML 4, Netscape aún no lo entiende y lo que muestra es el texto
alternativo que se pone entre <IFRAME> y </IFRAME>, como se ve en la Figura 2-36.
Figura 2- 35: Un marco flotante visualizado con Internet Explorer
66
Figura 2- 36: En Netscape no se visualizan los marcos flotantes, por lo que se muestra el texto alternativo
67
68
3 Características avanzadas de
Tema
HTML
En este capítulo se van a ver características que dan una mayor potencialidad a las
páginas HTML, como es la posibilidad de interactividad mediante formularios, los mapas
o la reproducción de sonidos y vídeos.
3.1 Formularios de entrada de datos

En el capítulo anterior se han visto muchas de las directivas de HTML, todas
encaminadas a comunicar tus ideas a los visitantes de tus páginas, pero sin la posibilidad de
que los visitantes se comuniquen contigo. Para permitir esta posibilidad se van a utilizar los
formularios.
En un formulario hay dos partes básicas. Por una parte está la estructura con campos,
etiquetas y botones que ve el visitante de la página y que le ayuda a rellenar el formulario.
Por otra está el “script” de procesamiento, que coge toda esta información para convertirla
en un formato que puede leer o procesar.
Construir el interfaz del formulario es bastante fácil, se hace de una forma similar a
como se crea cualquier otra parte de una página Web. Se pueden crear cajas de texto, cajas
para las palabras claves, diferentes tipos de botones, menús, areas de texto e incluso
imágenes para pulsar sobre ellas. A cada uno de estos elementos se les asigna un nombre
que sirve como etiqueta para identificar los datos que hay que procesar.
Procesar los datos de un formulario es algo más complicado. La principal herramienta
que hay para ello son los “script” de CGI, muchos de los cuales se escriben en Perl o en otro
lenguaje de programación. Sobre ellos se hablará en otro módulo del curso. Aquí nos
centraremos en ver como se construyen los formularios en HTML.
3.1.1 Construcción de un formulario

Un formulario tiene tres partes importantes: la directiva FORM, que incluye el URL del
“script” del CGI que procesará el formulario; los elementos del formulario, como campos y
menús; y el botón de enviar que envía los datos al script del CGI en el servidor.
Vamos a ir creando el formulario de la Figura 3-1 que corresponde a la ficha de alumno
de un Departamento (en la Tabla 3-1 se muestra el código completo para este formulario).
69
3 Características avanzadas de HTML
Figura 3- 1: Formulario de entrada de datos
El primer elemento de un formulario es FORM, con él se puede construir un documento

que contenga botones, listas desplegables, menús, campos de texto, cajas de marcas, etc.
Para el ejemplo de la Figura 3-1, esta primera directiva tiene que ser:
<FORM ACTION="http//www.dia.uned.es/" METHOD=POST>
Con el atributo METHOD se está indicando la forma de enviar la información al servidor,

los valores que puede tomar son GET y POST. Con GET se envian los pares nombre-valor
al final del URL. Con POST se envía un fichero con los pares nombre-valor a la entrada
estándar del servidor, junto con el tipo de contenido y la longitud en bytes. El script de CGI
toma los datos de la entrada estándar y los analiza. La principal ventaja es que no hay límite
de tamaño.
70
<HTML>
<HEAD>
<TITLE>Ficha del Departamento</TITLE>
</HEAD>
<BODY>
<h1>Ficha del Departamento de Informática y Automática</h1>
<h2>Ciencias Físicas</h2>
<hr>
<P> Si está matriculado en alguna asignatura del Departamento de Informática y
Automática. Rellene esta ficha:
<hr>
<FORM ACTION="http//www.dia.uned.es/ficalm" METHOD=POST>
<p>Nombre (Apellidos, Nombre): <INPUT NAME="Nombre" SIZE=80 TYPE="text">
<P>Calle: <INPUT NAME="calle" SIZE=60 TYPE="text">
<P>Ciudad: <INPUT NAME="ciudad" SIZE=15 TYPE="text">
Provincia: <INPUT NAME="provincia” SIZE=15 TYPE="text">
Código postal: <INPUT TYPE="cpostal" SIZE=5 TYPE="text">
<p>Observaciones y comentarios: <TEXTAREA NAME="Direccion" ROWS="3" COLS="80"
WRAP>Si tiene algún comentario u observación que hacer, por favor hagalo
constar en este espacio.</TEXTAREA>
<HR>
<P>Especialidad: <INPUT TYPE="radio" NAME="especialidad" VALUE="fg"
CHECKED>Física General
<INPUT TYPE="radio" NAME="especialidad" VALUE="fg">Física Industrial
<p>Asignaturas (seleccione en las que está matriculado):
<UL>
<LI><INPUT TYPE="checkbox" NAME="asig" VALUE="AutomaticaI"> Automática I
<LI><INPUT TYPE="checkbox" NAME="asig" VALUE="ElectronicaI"> Electrónica I
<LI><INPUT TYPE="checkbox" NAME="asig" VALUE="AutomaticaII"> Automática II
<LI><INPUT TYPE="checkbox" NAME="asig" VALUE="ElectronicaII"> Electrónica
II
<LI><INPUT TYPE="checkbox" NAME="asig" VALUE="Informatica"> Informática
<LI><INPUT TYPE="checkbox" NAME="asig" VALUE="ElectronicaFG"> Electrónica
(Fisica General)
</UL>
<p>Centro asociado:
<SELECT NAME="centro asociado" SIZE=1>
<OPTION VALUE="Avila">Avila
<OPTION VALUE="Barcelona">Barcelona
<OPTION VALUE="Cadiz">Cádiz
<OPTION VALUE="Madrid">Madrid
<OPTION VALUE="Sevilla">Sevilla
</SELECT>
<HR>
<p><INPUT TYPE="submit" VALUE="Enviar ficha">
<INPUT TYPE="reset" VALUE="Borrar">
</FORM>
</BODY>
</HTML>
Tabla 3- 1: Documento formulario.html con el código para crear un formulario de entrada de datos
En el atributo ACTION se indica la localización del servidor en donde se ejecuta el CGI

cuando se envian los datos del formulario.
Dentro del elemento FORM se encuentran las siguientes directivas:
• INPUT, es uno de los elementos que más se repite, ya que se utiliza para
introducir distintos tipos de datos y para definir distintos tipos de botones,
incluido el de enviar datos.
71
• TEXTAREA, para permitir introducir más de una línea de texto.
• SELECT, que corresponde a un menú desplegable, cuyas opciones vienen

dadas por el elemento OPTION. En el ejemplo, las opciones son nombres de
Centros Asociados de la UNED.
Todos los elementos de entrada de FORM tienen un atributo clave, éste es el atributo
NAME, que asocia un nombre de variable a los datos asociados con el elemento de entrada,
por ejemplo NAME="Direccion".
En las siguientes subsecciones se ira viendo como crear, mediante estas directivas, los
distintos elementos de que consta el formulario.
3.1.2 Introducir texto en un formulario

Una de las formas de introducir texto en un formulario es mediante las cajas de texto, las
cuales contienen una línea y generalmente se utilizan para introducir nombres y
direcciones. Esto se hace con la directiva INPUT:
<p>Nombre (Apellidos, Nombre): <INPUT NAME="Nombre" SIZE=80

TYPE="text">
El valor del atributo TYPE es text indicando que la entrada es de tipo texto. Con el
atributo NAME se da un nombre que identifica los datos metidos en la caja de texto. SIZE
indica el tamaño de la caja, opcionalmente se puede poner un atributo MAXLENGTH para
definir el número máximo de caracteres que pueden entrar en la caja.
El resultado de estas directivas en un formulario se muestra en la Figura 3-2.
Figura 3- 2: Cajas de texto en un formulario
Un texto que algunas veces hay que introducir es una palabra clave o contraseña
(password), por ejemplo para poder acceder a ciertos servicios de uso restringido. En este
caso también se puede utilizar INPUT pero poniendo password como valor del atributo
TYPE. En el siguiente ejemplo se pide el nombre y una palabra clave para acceder a ciertos
servicios:
72
<FORM METHOD=POST ACTION=”http://iti.uned.es/prog/recurso”>

<H2>Introduce tu nombre de usuario y palabra clave para
continuar</H2>
<P>Nombre de usuario: <INPUT TYPE="text" NAME=”nombre” SIZE=20>
Palabra clave: <INPUT TYPE=”password” NAME=”password” SIZE=12>
<P><INPUT TYPE=”SUBMIT” VALUE=”Continuar”>
<INPUT TYPE=”reset”>
</FORM>
En la Figura 3-3 se muestra el documento con este formulario. Cuando se escribe la

palabra clave, ésta no se visualiza sino que se van imprimiendo unos asteríscos (*).
Figura 3- 3: Introducción de palabras claves en un formulario
Hasta ahora, las posibilidades se restringen a una sola línea, pero muchas veces se puede
querer introducir un texto mas largo, para ello se dispone de la directiva TEXTAREA. Es el
caso del ejemplo de la Figura 3-1 cuando se permite introducir observaciones y
comentarios:
<p>Observaciones y comentarios: <TEXTAREA NAME="Direccion"

ROWS="3" COLS="80" WRAP>Si tiene algún comentario u observación
que hacer, por favor hagalo constar en este espacio.</TEXTAREA>
En la Figura 3-4 se muestra tan sólo el área para texto conseguido de esta forma.
Figura 3- 4: Un área para introducir mas de una línea de texto
Con el atributo COLS se define la anchura del texto en número de caracteres y con ROWS
la altura del texto en número de filas. Si se quiere que el texto se ajuste a la anchura del área
73
marcada entonces se puede utilizar el atributo WRAP.

Si se desea se puede tener un texto previo en el área marcada para introducir el texto. En
este caso el usuario puede situarse sobre el texto y borrarlo o modificarlo. Para introducir
este texto previo tan sólo hay que escribirlo entre la directiva <TEXTAREA> y el final de
directiva </TEXTAREA>.
3.1.3 Entradas mediante botones y menús

Muchas veces, los datos que se tienen que introducir pertenecen a un conjunto
determinado de valores (por ejemplo, la especialidad o las asignaturas en la Figura 3-1).
Puede ocurrir que sólo se pueda seleccionar uno de los valores de ese conjunto de datos
(por ejemplo la especialidad en la Figura 3-1, se supone que un alumno sólo se matricula de
una especialidad), o varios valores del posible conjunto (en el ejemplo de la Figura 3-1 las
asignaturas). En el primero de los casos se pueden utilizar los denominado “botones de
radio” (en recuerdo a las viejas radios que tenian presintonizadas unas emisoras que se
seleccionaban al pulsar un boton, y sólo uno podía estar pulsado) o un menú con una lista
desplegable de la que sólo se puede seleccionar un valor. En el segundo caso se pueden
utilizar listas con recuadros para marcar (check boxes).
Botones de radio
Los botones de radio se crean también con la directiva INPUT, pero el valor del atributo
TYPE es radio. En el ejemplo de la ficha del Departamento esto corresponde a:
<P>Especialidad: <INPUT TYPE="radio" NAME="especialidad"

VALUE="fg" CHECKED>Física General
<INPUT TYPE="radio" NAME="especialidad" VALUE="fg">Física
Industrial
El valor de NAME identifica a cada uno de los botones, sólo uno puede ser pulsado cada
vez por el visitante. El valor de VALUE es el texto que se envia al servidor cuando está
seleccionado ese botón. Opcionalmente puede poner en uno de los botones de radio el
atributo CHECKED para que cuando se abra la página sea el botón seleccionado por
defecto.
En la Figura 3-5 se muestra la presentación de estos botones con Netscape. En este caso
el botón preseleccionado es el que corresponde a Física General.
Figura 3- 5: Botones de radio
Recuadros de selección
En este caso se pueden marcar tantos valores como se desee. La forma de crearlas es
74
dando el valor de checkbox en el atributo TYPE de la directiva INPUT. En el ejemplo

corresponde a la lista de asignaturas:
<p>Asignaturas (seleccione en las que está matriculado): <P

<INPUT TYPE="checkbox" NAME="asig" VALUE="AutomaticaI">
Automática I
<INPUT TYPE="checkbox" NAME="asig" VALUE="ElectronicaI">
Electrónica I
<INPUT TYPE="checkbox" NAME="asig" VALUE="AutomaticaII">
Automática II
<INPUT TYPE="checkbox" NAME="asig" VALUE="ElectronicaII">
Electrónica II
<INPUT TYPE="checkbox" NAME="asig" VALUE="Informatica">
Informática
<INPUT TYPE="checkbox" NAME="asig" VALUE="ElectronicaFG">
Electrónica (Fisica General)
El resultado se muestra en la Figura 3-6. En el ejemplo de la Tabla 3-1 las asignaturas se

pusieron en una lista (con UL) por lo que en la Figura 3-1 aparecían punteadas como una
lista, pero ahora se han puesto sin la lista, por lo que aparecen una a continuación de otra,
ésta puede ser una opción adecuada si hay pocos items, pero de no ser así el efecto es peor y
puede incluso llevar a confusión, como se puede comprobar en este ejemplo.
Figura 3- 6: Recuadros de selección
El valor del atributo NAME es la palabra que identifica a todos los recuadros de selección
de un determinado conjunto. El valor de VALUE es el valor que se envia al servidor cuando
la correspondiente caja está seleccionada. Si se quiere, se pueden tener previamente
selecionadas tantas cajas como se desee, para ello se pone el atributo CHECKED en cada
una que se desee que aparezca marcada cuando se abra la página.
Menús
Los menús son una opción que facilita la entrada de cierta información. Se crean
mediante la directiva SELECT y cada uno de los items del mismo mediante OPTION. En el
ejemplo se ha utilizado para introducir el Centro Asociado del alumno1:
<p>Centro asociado:
1.Aunque en el ejemplo sólo se han puesto cinco centros, en realidad hay muchos más y ésta puede ser
una buena opción para que el alumno ponga el nombre correcto del mismo.
75
<SELECT NAME="centro asociado" SIZE=1>

<OPTION VALUE="Avila">Avila
<OPTION VALUE="Barcelona">Barcelona
<OPTION VALUE="Cadiz">Cádiz
<OPTION VALUE="Madrid">Madrid
<OPTION VALUE="Sevilla">Sevilla
</SELECT>
En la Figura 3-7 se muestra este menú. El valor de NAME de la directiva SELECT

identifica a todo el conjunto de datos del menú, el número de opciones que inicialmente se
visualizan es el indicado con SIZE. Dentro de OPTION, el atributo VALUE indica el valor
que es enviado al servidor si se elige esta opción. Si se quiere, se puede permitir selecionar
varios valores, poniendo MULTIPLE dentro de SELECT, y también se pueden dejar unos
valores seleccionados por defecto poniendo SELECTED dentro de la directiva OPTION
correspondiente a los items que se quieren dejar seleccionados por defecto.
Figura 3- 7: Menús dentro de un formulario
En HTML 4 se permite crear menús con submenús, por ejemplo, si se tiene un menú con
muchas opciones, entonces se podrian agrupar las opciones por categorías y ponerlas en
submenús. Para ello se dispone de la directiva OPTGROUP, que se situaría antes de la
primera directiva <OPTION> del grupo que se quiere poner en un submenú. OPTGROUP
tiene el atributo LABEL cuyo valor sirve como cabecera para el submenú. Por ejemplo:
<SELECT NAME=asig SIZE=3 MULTIPLE>

<OPTGROUP LABEL=”Primero”>
<OPTION VALUE=”ETCI”>Est.Tec.Com.I
<OPTION VALUE=”PROGI”>Programación I
<OPTION VALUE=”ALG”>Algebra
<OPTION VALUE=”ANMAT”>Analisís Matemático
</OPTGROUP>
<OPTGROUP LABEL=”Segundo>
<OPTION VALUE=”ETCII”>Est.Tec.Com.II
<OPTION VALUE=”PROGII”>Programación II
<OPTION VALUE=”MATDIS”>Matemática Discreta
<OPTION VALUE=”LOG”>Lógica
</OPTGROUP>
<OPTGROUP LABEL=”Tercero”>
<OPTION VALUE=”ETCIII”>Est.Tec.Com.III
76
<OPTION VALUE=”PROGIII”>Programación III

<OPTION VALUE=”SO”>Sistemas Operativos
<OPTION VALUE=”RED”>Redes
</OPTGROUP>
</SELECT>
Notas
Aunque los submenús son estandar en HTML 4, no son aún soportados ni por Explorer
ni por Netscape.
3.1.4 Los botones de enviar y borrar

Una vez que se han introducido los datos en el formulario es necesario enviarlos al
servidor para que los pueda procesar. Para ello siempre hay que tener un botón de enviar.
Este botón se crea con la directiva INPUT, dandole el valor submit al atributo TYPE:
<INPUT TYPE="submit" VALUE="Enviar ficha">
El valor de VALUE es cualquier texto que se quiera que aparezca en el botón, por defecto
aparece Submit Query.
Si lo que se quiere es borrar todo el formulario para volverlo a rellanar, se puede crear un
botón de reset poniendo el valor reset en el atributo TYPE de INPUT:
<INPUT TYPE="reset" VALUE="Borrar">
En la Figura 3-8 se ven estos dos botones.
Figura 3- 8: Botones de enviar y borrar
En HTML 4 se han añadido directivas que permiten crear iconos más atractivos,
añadiendo una imagen, cambiando la fuente o cambiando el color de fondo del botón.
Para crear un botón con una imagen se dispone de la directiva BUTTON:
<BUTTON NAME=”enviar” VALUE=”submit” TYPE=”submit”

STYLE=”font: 24pt Arial Black”>Enviar a <IMG
SRC=”diacolp.gif”></BUTTON>
77
En la Figura 3-9 se visualiza este botón. Con el atributo STYLE se puede cambiar la
fuente del texto que se visualizará en el botón junto a la imagen (este texto corresponde al
escrito entre <BUTTON> y </BUTTON>).
Figura 3- 9: Botón con imagen en un formulario
Para crear un botón de borrado con una imagen se puede utilizar también BUTTON, pero
con el valor de reset en el atributo TYPE.
Aunque estos botones son un estandar en HTML 4, hasta ahora sólo Explorer para
Windows los soporta.
3.1.5 Enviando ficheros desde un formulario

En muchas ocasiones la información que se quiere enviar es bastante compleja, por lo
que es preferible enviar un fichero con esa información.
Para enviar un fichero se puede utilizar la directiva INPUT con el valor file en el atributo
TYPE:
<H1>Envio de prácticas</H1>
<FORM METHOD=POST ACTION=”http://dia.uned.es/cgis/rec.cgi”>
Alumno: <INPUT TYPE=”text” NAME=”alumno” SIZE=20>
<P>Fichero de la práctica:
<INPUT TYPE=”file” ENCTYPE=”multipart/form-data”
NAME=”fichero” SIZE=50>
<INPUT TYPE=”submit” NAME=”submit” VALUE=”ENVIAR”>
</FORM>
En la Figura 3-10 se muestra este formulario. En la directiva FORM el valor de METHOD

debe ser post. La directiva INPUT, además del atributo TYPE cuyo valor es file, tiene que
tener los siguientes atributos: ENCTYPE con valor multipart/form-data (para que el fichero
se transfiera en su propio formato); NAME cuyo valor es el nombre que el servidor utilizará
para identifcar al fichero que se va a transferir; opcionalmente se puede poner SIZE con el
tamaño (en caracteres) del campo donde el usuairo debe introducir el camino del fichero a
transferir.
Junto al campo donde se introduce el camino del fichero aparece un botón (denominado
NAVEGAR o BROWSE) y al pulsarlo abre una ventana (Figura 3-11) que se puede utilizar
para localizar el fichero que se quiere enviar, cuando se seleccione un fichero en esta
ventana el camino del mismo quedará escrito en el campo que hay junto al botón.
78
Figura 3- 10: Transferencia de ficheros desde un formulario
Figura 3- 11: Ventana para la selección del fichero que se quiere transferir.
3.1.6 Imágenes activas

Dentro de un formulario se pueden utilizar imágenes como elementos activos. Cuando
se pulsa sobre la imagen, las coordenadas del ratón (medidas desde la esquina superior
izquierda) se añaden al nombre de la variable y se envian esos datos al servidor.
A continuación se muestra un ejemplo de la utilización de una imagen activa (Figura
3-12):
<FORM METHOD=POST ACTION=”http://dia.uned.es/cgi/plansit”>

<P>Pulse sobre el edificio al que quiere ir para indicarle el
medio de transporte mas aconsejable
<INPUT TYPE=”image” SRC=”plano.gif” NAME=”plano”>
</FORM>
En el elemento INPUT, el valor de TYPE tiene que ser image y el del atributo SRC la
localización de la imagen en el servidor. Cuando el visitante pulsa sobre una posición de la
imagen, las coordenadas del ratón son añadidas al nombre puesto en el atributo NAME, en
este caso a plano.
79
Considerar que todos los datos del formulario son enviados automáticamente cuando el
visitante pulsa sobre la imagen activa. Por ello es conveniente dar todas las instrucciones
de como se utiliza una imagen activa y situar la imagen al final del formulario, de forma
que el visitante complete los otros elementos antes de pulsar sobre la imagen y enviar los
datos.
Figura 3- 12: Imagen activa
3.1.7 Otros elementos y directivas dentro de un formulario

Hay una serie de directivas que nos permiten organizar los elementos dentro de un
formulario, etiquetar formalmente parte del formulario, desactivar elementos, etc. y que en
general pueden ayudar a rellenar y gestionar mejor el formulario.
Así, si se tiene una gran cantidad de información para rellenar en el formulario, se
80
pueden agrupar elementos relacionados para que sea más fácil de seguir el formulario.
Para organizar los elementos en el formulario se utiliza el elemento <FIELDSET>.
Cada grupo se pone entre <FIELDSET> y </FIELDSET>, la leyenda para cada grupo se
pone entre <LEGEND> y </LEGEND>, puediendose alinear la misma con ALIGN. En la
Figura 3-13 se muestra el siguiente formulario organizado en elementos:
<FORM METHOD=POST ACTION="http://dia.uned.es/procform">

<FIELDSET>
<LEGEND>Información personal</LEGEND>
TYPE="text">
<LEGEND ALIGN="right">Comentarios</LEGEND>
<p>Observaciones y comentarios: <TEXTAREA NAME="Direccion"
ROWS="3" COLS="80" WRAP>Si tiene algún comentario u observación
que hacer, por favor hagalo constar en este espacio.</TEXTAREA>
</FIELDSET>
</FORM>
Figura 3- 13: Organización de los elementos en un formulario
Por ahora, las directivas FIELDSET y LEGEND sólo las soporta Internet Explorer 4 para
Windows.
Otra directiva que se puede utilizar para etiquetar elementos, de forma que se puedan
enlazar con otros elementos asociados o utilizar en los “scripts” es LABEL, aunque esta
directiva no la soportan ni Explorer ni Netscape.
Hay también atributos que ayudan a recorrer el formulario o a rellenarlo. Entre estos
estan TABINDEX que nos permite movernos entre los campos del formulario y los enlaces
de la página mediante la tecla tabulador, por defecto el orden en que se recorren los
elementos al pulsar el tabulador es el mismo que en el que estan situados en el formulario,
esto se puede cambiar asignandole un valor numérico que indica el orden de recorrido
81
(primero los más bajos).

En la Figura 3-14 se indica como se van recorriendo los elementos al pulsar la tecla de
tabulador para el siguiente ejemplo:
<A HREF="formasig.html" TABINDEX=6>Continuar</A>

<FORM METHOD=POST ACTION="http://dia.uned.es/procform">
TYPE="text" TABINDEX=1>
<P>Calle: <INPUT NAME="calle" SIZE=60 TYPE="text" TABINDEX=2>
<P>Ciudad: <INPUT NAME="ciudad" SIZE=15 TYPE="text"
TABINDEX=3>
Código postal: <INPUT TYPE="cpostal" SIZE=5 TYPE="text"
TABINDEX=5>
<P>Provincia: <INPUT NAME="provincia” SIZE=15 TYPE="text"
TABINDEX=4>
</FORM>
Sexto
Primero
Segundo
Tercero
Quinto
Cuarto
Figura 3- 14: Uso de los tabuladores para recorrer una página
Otra de las características de HTML 4 es la posibilidad de añadir atajos de teclado

(convinación de teclas para seleccionar o introducir datos). Cuando el usuario escribe las
teclas del atajo se activa el correspondiente elemento del formulario. Esto se hace mediante
el atributo ACESSKEY, cuyo valor es la convinación de teclas utilizadas como atajo. El
siguiente ejemplo muestra el uso de los atajos (Figura 3-15):
<H1>Votación de representantes</H1>
<FORM METHOD=POST ACTION="http://dia.uned.es/cgi/vota">
<P><INPUT TYPE="radio" NAME="vota" ACCESSKEY=b>Andres Bario
(Alt-B)
<P><INPUT TYPE="radio" NAME="vota" ACCESSKEY=c>Juan Carrasco
(Alt-C)
<P><INPUT TYPE="radio" NAME="vota" ACCESSKEY=g>José Gonzalez
(Alt-G)
<P><INPUT TYPE="radio" NAME="vota" ACCESSKEY=s>Felipe Suarez
(Alt-S)
<P><INPUT TYPE="SUBMIT" VALUE="Votar"> <INPUT TYPE="reset">
</FORM>
82
Figura 3- 15: Atajos de teclado para la selección de elementos en un formulario
Por último indicar como se pueden ocultar, desactivar o proteger los elementos de un
formulario.
Para ocultar un campo, y hacerlo no visible al usuario, puede utilizar el valor de hidden
en el atributo TYPE, por ejemplo:
<INPUT TYPE="hidden" NAME="ident" VALUE="id">
Pero para crear un elemento visible pero no modificable, que es enviado con el resto de
los datos cuando se pulsa el boton de enviar, se utiliza el atributo READONLY.
En algunos casos, puede querer que el visitante no utilice ciertos elementos, por ejemplo
el botón de enviar hasta que no rellene ciertos datos, entonces se puede usar el atributo
DISABLED. Pero cuidado, que la única forma de cambiar el contenido de un elemento
desactivado es mediante un “script”.
Notas
Recuerde que cuando utilice los formularios debe tener en cuenta los siguientes puntos:
1) El desarrollador puede utilizar el elemento FORM para solicitar entradas del usuario.
Sin embargo, cada documento con un FORM debe enviar los datos a un programa
en el servidor, diseñado para analizar los datos del formulario. Este programa es
especificado en el atributo ACTION de FORM.
2) Cada elemento del formulario se le asigna un nombre con NAME que identifica a los
datos que se introducen en ese elemento.
3) Un FORM puede contener distintos elementos de entrada, como INPUT, SELECT y
TEXTAREA. Estos elementos sólo pueden aparecer dentro de un FORM.
83
4) Un FORM no puede estar dentro de un elemento cabecera o de otro FORM (no se

pueden anidar FORM). Sin embargo, dentro de FORM se pueden tener cabeceras,
listas, marcas de caracteres, tablas y elementos PRE.
3.2 Enlaces dentro de un documento

Cuando se activa un enlace, el navegador obtiene el objeto del enlace y visualiza el
documento HTML desde el principio. Pero no siempre se desea esto, algunas veces el
documento es demasiado largo y se quiere enlazar directamente a un punto determinado
del documento, y no al comienzo. También puede querer hacer enlaces entre distintos
lugares del mismo documento. Para conseguir esto se dispone del atributo NAME en el
elemento ancla <A>.
3.2.1 El atributo NAME

El atributo NAME del elemento ancla A asigna un único nombre, denominado
identificador del fragmento, a un lugar determinado de un documento. Se puede enlazar a
esta ubicación usando un URL que contiene este nombre. Este enlace lo puede hacer desde
el mismo documento o desde otro.
Por ejemplo, en la página principal del Departamento de Informática y Automática se
tiene un identificador de fragmento para acceder directamente a la parte del documento
donde está la dirección del Departamento y al punto donde se dan otros enlaces:
<HTML>
<HEAD><TITLE>Departamento de Informática y
Automática</TITLE>
<BASE href="http://www.dia.uned.es/autom/home.html"></HEAD>
<BODY>
<CENTER>
<IMG SRC="/gif/escudo.gif" ALT="Dpto. de Inf. y Aut.">
<H1>Departamento de Informática y
Automática</H1>
<HR>
<FONT SIZE="-1">
[ <A HREF="http://www.uned.es/">U.N.E.D.</A> |
<A HREF=info.html>Información</A> |
<A HREF=personal/personal.html>Personal</A> |
<A HREF=regladas/regladas.html>Docencia</A> |
<A HREF=proyectos/proyectos.html>Proyectos</A> |
<A HREF=matlab/matlab.html>Matlab</A> |
<A HREF="#Direccion">Dirección</A> |
<A HREF="#Enlaces">WWW</a> ]
<BR>
......
HR>
<DL>
<DT>
<A NAME="Direccion"><B>Dirección de correo </B></A>
<TT>
<DD>Dpto. Informática y Automática.
84
3.2 Enlaces dentro de un documento
<DD>Facultad de Ciencias. UNED.

<DD>C/ Senda del Rey s/n.
<DD>E-28040 Madrid. Spain.
</tt>
<DT><B>Teléfono / <EM>Phone:</EM></B>
<TT>+34-1-3987145</tt>
<DT><B>Fax:</B> <TT>+34-1-3986697</tt>
<DT><B>E-mail:</B> <A HREF="mailto:info@dia.uned.es">
<TT>info@dia.uned.es</TT></A>
</DL>
<HR>
<A NAME="Enlaces">
<H4>Enlaces a WWW de interés </h4></a>
<UL>
<LI><A HREF="/enlaces/www.html">
Búsqueda, navegación e información.
/ <EM>Search, navigation, and information.</em></a>
<LI><A HREF="/enlaces/acad-invest.html">Académico
e Investigación / <EM>Academic and Research</em></a>
<LI><A HREF="/enlaces/otros.html">Otros enlaces / <EM>Other
links</em></a>
</UL>
.....
Como se ve en este listado, con:
<A NAME="Direccion"><B>Dirección de correo </B></A>
se ha asociado a esta ubicación del documento el identificador de fragmento Direccion.

Cuando se hace la referencia
<A HREF="#Direccion">Dirección</A
estamos indicando con el símbolo # que es referencia a un identificador de fragmento, que

en este caso está en el mismo documento. Al pulsar sobre ella iriamos a la parte del
documento que se ha marcado con el identificador Direccion.
Por supuesto, en el elemento ancla se pueden poner simultaneamente los atributos NAME
y HREF, por ejemplo:
<A HREF=”info.html” NAME=”Informacion”>Más infomación</A>
Pulsando sobre este ancla se accede al documento info.html, al mismo tiempo,

pulsando sobre un enlace:
<A HREF=”#Informacion”>Puede ver otras informacions</A>
accedería a la posición marcada con el identificador Informacion.

También se pueden hacer referencias a un punto en concreto de otro documento, por
ejemplo, desde otro documento podríamos querer acceder directamente a la dirección del
85
Departamento, en este caso, el URL debería adoptar la forma:
http://home.html#Direccion
En resumen:
1) El atributo NAME asigna un nombre, denominado identificador del fragmento, a un
elemento ancla (A). Esto permite que este elemento sea el destino de un enlace de
hipertexto, de forma que con HREF también se hagan referencias a localizaciones
dentro de un documento.
2) Para referenciar una localización dentro del documento, marcada con NAME,
utilizaría un elemento ancla de la forma <A HREF=”#ident_frag”> texto
</A>, donde ident_frag es el identificador que se utiliza en las referencias. Es
obligatorio poner el caracter #, ya que indica el comienzo de la referencia.
3) Puede referenciar una localización marcada con NAME desde otro documento
externo, por ejemplo poniendo:
<A HREF=”http://home.html#Direccion”>Dirección
Departamento</A>
4) Puede combinar HREF y NAME en el mismo elemento ancla:
<A HREF=”info.html” NAME=”Informacion”>Más infomación</A>
3.3 Enlazando y cargando ficheros de datos

Quizás una de las cosas que han hecho mas popular el Web ha sido la posibilidad de
añadir gráficos, sonidos y películas a las páginas Web. Realmente los navegadores actuales
sólo muestran determinadas clases de imágens, teniendose que utilizar aplicaciones
externas para abrir otros tipos de ficheros multimedia.
Uno de los problemas mayores que se tiene con los ficheros multimedia es su gran
tamaño, diez segundos de sonido pueden ocupar 200Kb y tardar mas de tres minutos en
transferirse, si es una película (aunque sea en un formato pequeño de 2”*3”) el tiempo de
transmisión puede ser bastante mayor. Análogamente, grandes imágenes, aunque sean en
formatos comprimidos como JPEG o GIF, pueden acabar con la paciencia de cualquier
usuario.
Por útlimo, hay que tener en cuenta la diversidad de ordenadores y sistemas, por lo que
cuando se publican páginas Webs hay que asegurarse que pueden ser leidas, vistas, oidas,
etc. por el mayor número posible de visitantes.
3.3.1 Aplicaciones auxiliares

Hasta ahora hemos visto que los enlaces son a documentos HTML o a documentos
HTML que contienen imágenes mediante el elemento IMG. Pero si enlazamos a archivos
con otros formatos de datos, por ejemplo de películas o de sonido, muchos navegadores no
podrán presentarlos.
Para acceder a estos datos se utilizan programas auxiliares que permiten mostrar
imágenes, películas o sonidos que el navegador por si mismo no puede presentar.
Por ejemplo, para visualizar ficheros postscript se puede utilizar una aplicación como
86
gosthview; para visualizar películas en formato quicktime se puede utilizar la aplicación

QuickTime; etc.
Los navegadores conocen el tipo de datos que conectan por un mensaje especial que es
enviado al cliente antes de los datos reales, este mensaje contiene una cabecera con el tipo
de contenido MIME (que vimos en el capítulo 1). Por ejemplo, para un archivo GIF la
cabecera será:
Content-Type: image/gif
Para una película MPEG, será:
Content-Type: video/mpeg
Cuando llega este mensaje al navegador, y si el navegador no puede presentar estos

datos, mira en su base de datos de aplicaciones auxiliares para encontrar un programa que
corresponda a este tipo MIME.
Si los datos llegan desde un servidor FTP o desde la propia máquina local, entonces no
hay un mensaje con el tipo MIME, en este caso el propio navegador tiene que deducir el
tipo de datos de que se trata. Para ello puede utilizar la extensión del archivo y acudir a una
base de datos que tenga donde se relacionen las extensiones de los archivos con el tipo
MIME de datos que puede contener. Por ejemplo, si la extensión es .gif el tipo MIME será
image/gif, o si la extensión es .mpeg, .mpg o .mpe el tipo MIME es video/mpeg. Esta lista
con los tipos MIME y las extensiones se tiene que actualizar si se añade un archivo con una
nueva extensión. En muchos navegadores, esta lista se puede editar desde un menú
desplegable (Figura 3-16).
Figura 3- 16: Lista de aplicaciones vista con el menú Preferencias de Netscape
87
Notas
En un principio puede haber enlaces a muchos tipos de archivos (audio, películas,
multimedia y diferentes formatos de imágenes), pero la mayoría de los clientes sólo
disponen de reproductores o visualizadores para un determinado subconjunto de estos
formatos de archivos. Por ello, es una buena idea indicar el formato de los archivos, de
forma que el usuario pueda evitar acceder a archivos que no pueda visualizar ni utilizar.
3.3.2 Enlazando a páginas con imágenes

Como ya se ha indicado, los navegadores pueden presentar sólo algunos formatos de
imágenes, y algunas veces están restringidos a imágens GIF de menos de 50 colores por
imagen. También se ha indicado que tienen sus ventajas las imágenes pequeñas, ya que las
imágenes grandes pueden tardar mucho en descargarse.
Sin embargo, algunas veces no son razonables estas restricciones. Puede necesitar
incluir imágenes grandes que son una parte muy importante del material que se quiere
publicar, por ejemplo el mapa del campus en el que pulsando sobre él se accede a
información sobre ciertos edificios del mismo.
Alternativamente puede también tener imágenes de alta calidad, o en formatos que no
son entendidos por el navegador, que quiere visualizar. La cuestión es como incluir
imágenes que no son soportadas por los navegadores y como advertir al usuario que es una
imagen grande y puede tardar bastante en descargarla.
Por ejemplo, si necesita que en la página principal aparezca una imagen grande, puede
hacer un archivo pequeño con la imagen, por ejemplo en formatos comprimidos como son
los formatos GIF y JPEG.
Si tiene imágenes grandes en otra página, es un buen consejo que en el enlace a la misma
indique al usuario que es una página con gráficos (por ejemplo, puede indicar el tamaño de
los gráficos, de forma que el usaurio sea consciente del coste que supone el descargarla),
esto permite al usuario acceder a la página desactivando la carga de imágenes, con lo que
reduce el tiempo de carga de dicha página, y sólo cargar la imagen si realmente le puede
interesar.
Una forma práctica de enlazar a las imágenes es mediante un pequeño icono de la
imagen real (es lo que en la terminología del web se llama por el anglicismo thumbnail
sketch), dando una pequeña descripción de la misma. Un thumbnail se puede hacer
fácilmente mediante cualquier programa de dominio público de edición de gráficos. Al
icono del thumbnail se le asocia un enlace a una página con la imagen en grande, indicando
en el enlace el tamaño de la imagen.
Si la imagen está en un formato que no es entendido por el navegador, entonces no se
cargará con el elemento IMG, en este caso se puede enlazar directamente con el elemento
ancla <A>, como en el siguiente ejemplo (Figura 3-16):
<A HREF=”eco.tif”><IMG SRC=”iconoeco.gif”>Ecografía (formato

TIF 300Kb)</A>
88
Al pulsar se abre una

aplicación para mostrar
la imagen en formato TIFF.
Figura 3- 17: Icono para enlazar a una figura grande en un formato no entendido por el navegador
En resumen, tenemos que tener en cuenta:

1) Que cuando hagamos un enlace a un documento con una imagen grande, hay que
poner algún tipo de aviso para el usuario, de forma que pueda estimar lo que tardará
en descargar estos datos.
2) Listar el formato de los datos en los enlaces a imágenes grandes, archivos de audio,
de películas o ficheros de archivos de datos en general, de forma que el usaurio
pueda estimar si el archivo está en un formato que puede utilizar.
89
3) Utilizar iconos para enlazar a imágenes grandes o archivos de películas. De esta

forma el usuario conoce con que va a enlazar, resultando además un buen
complemento gráfico para el documento.
3.3.3 Elementos para empotrar datos

Ya vimos que desde un documento HTML se puede enlazar a otros tipos de datos,
utilizando aplicaciones auxiliares. Pero también podríamos querer que esos datos queden
empotrados dentro del documento. Por ejemplo, si se desea que en vez de abrir una
aplicación en otra ventana para ver una película, ésta quedase empotrada dentro del propio
documento.
Esto es posible mediante los elementos EMBED y OBJECT. Estos elementos se han
diseñado para empotrar objetos de diferentes tipos de datos dentro de un documento
HTML, de forma análoga a como lo hace IMG para las imágenes. Para poder visualizar
estos datos es necesario equipar al navegador con el correspondiente “plug-in”1.
El elemento EMBED no es estándar y es soportado por Netscape y Explorer.
El elemento OBJECT no está aún soportado por los navegadores, pero está diseñado con
un propósito de estandarización universal, incluso para reemplazar a IMG como elemento
para empotrar imágenes.
Con el elemento EMBED se pueden incluir datos no estándar con una directiva de la
forma:
<EMBED SRC=”video/pell.avi” WIDTH=”200” HEIGHT=”150”>
Con esta directiva se empotra en el documento el archivo pell.avi, que corresponde a una
película en formato AVI de Microsoft.
El navegador determina el tipo de datos de que se trata, de la misma forma que se indicó
en la sección 3.3.1, bien enviando el servidor una cabecera con el tipo MIME de datos o
deduciendolo el navegador a partir de la extensión del archivo, consultando para ello su
base de datos de arhivos y tipos MIME.
El elemento EMBED tiene como atributos: SRC, WIDTH y HEIGHT, con el mismo
significado que en el elemento IMG. Con SRC se indica el URL para acceder a los datos, y
con HEIGHT y WIDTH se da el tamaño del recuadro donde se visualizaran dentro del
documento.
Además se tiene: CONTROLS cuyo valor determina como deben aparecer los controles,
AUTOSTART que si su valor es true el sonido o la película se arranca automáticamente
cuando el usuario entra en la página, LOOP que indica cuantas veces se va a repetir la
película o el sonido y ALIGN que alinea los controles en la página.
En la Tabla 3-2 se encuentra el código para empotrar sonido en un documento HTML, en
la Figura 3-18 se muestra el resultado cuando no se tiene el “plug-in” adecuado en el
navegador. Si se tiene el “plug-in”, y la tarjeta de sonido, se escuchará la música
digitalizada en el archivo SONATA.MID.
1.Un “plug-in” es un módulo de programa específico para tratar un determinado tipo de datos que se carga
en el navegador si se acceden a datos de este tipo.
90
Figura 3- 18: Resultado visto con Netscape, cuando no se dispone del “plug-in” adecuado, de un documento
HTML en el que hay empotrado un archivo de sonido
<HTML>
<HEAD>
<TITLE>Departamento de Matemáticas Fundamentales</TITLE>
</HEAD>
<BODY BACKGROUND="Backgrounds/summer_paper.gif">
<P>
<BGSOUND SRC="musica/SONATA.MID" LOOP=infinite>
<EMBED SRC="musica/SONATA.MID" WIDTH=0 HEIGHT=2 AUTOSTART=true>
<P>
<TEXT="#000000"LINK="#EE3300"VLINK="0000FF"ALINK="#0077FF">
<CENTER>
<TABLE BORDER=6>
<TR>
<TD>
<IMG Align=Left SRC="gif/dep1.gif">
<CENTER>
<FONT SIZE=7> Departamento de<BR>
Matemáticas <BR>
Fundamentales <BR>
UNED</FONT>
</CENTER>
</TD>
</TR>
</TABLE>
<P>
.....
Tabla 3- 2: Listado de un documento HTML en donde se empotra un archivo de sonido
91
3.4 Sonidos
Una página del Web puede tener sonidos incorporados, bien sea como un fondo sonoro
que se ejecuta automáticamente al cargar la página, o como una opción para que la active el
propio usuario.
3.4.1 Capacidades sonoras de los navegadores

Para poder escuchar los sonidos es necesario disponer, como es lógico, de una tarjeta de
sonido con sus correspondientes altavoces. Pero esto no es suficiente, pues no todos los
programas navegadores están capacitados en la misma medida.
Explorer de Microsoft
Es el que está mejor adaptado para el sonido, pues a partir de la versión 2.0 es capaz de
reproducir fondos sonoros sin necesidad de añadir nada, y no hay ninguna complicación
con los servidores, como ocurre con el Netscape. Además, a partir de la versión 3.0 del
Explorer, es incluso compatible con los plug-ins del Netscape.
Netscape
Las versiones anteriores a la 2.0 no son capaces de reproducir fondos sonoros que se
ejecuten automáticamente, sino que requerirá que se activen los programas auxiliares
asociados a los formatos .wav o .mid.
La versión 2.0 sí es capaz de reproducir un fondo sonoro, pero es necesario que tenga
instalado un plug-in llamado Crescendo que se obtiene en LiveUpdate (una vez obtenido
hay que instalarlo manualmente en el directorio 'plugins' del Netscape 2.0).
La versión 3.0 lleva implícito el plug-in Live Audio (pero sólo la versión completa, no la
reducida). En caso afirmativo, es capaz de reproducir un fondo sonoro.
A partir de la versión 4 se incluye el plug-in de sonido.
Pero a todas estas complicaciones de las distintas versiones de los navegadores de los
usuarios, hay otra más y es que el servidor donde esté alojada la página del Web debe tener
configurados como MIME los formatos .mid y .wav. Si esto no es así, aunque se deposite
en el servidor el documento HTLM acompañado por el correspondiente fichero de sonido,
éste no se ejecutará. En dicho caso, es necesario ponerse en contacto con los
administradores del servidor para que configuren como MIME los formatos .mid y .wav.
Este problema no existe, sin embargo para Explorer.
3.4.2 Fondos sonoros

Se han visto las distintas capacidades de los navegadores. Ahora se van a ver las
directivas que se deben poner en el documento HTML para que se puedan oir los sonidos
en uno y otro navegador, y que lamentablemente no son iguales, pero que se pueden
combinar, como se verá más adelante.
92
3.4 Sonidos
Fondo sonoro para el Microsoft Internet Explorer

Para las versiones 2.0 en adelante, se utiliza la directiva:
<BGSOUND SRC="fichero_de_sonido" LOOP=n>
El fichero de sonido puede estar en formato .mid o .wav.

El atributo LOOP sirve para especificar el número (n) de veces que se debe ejecutar el
fichero de sonido. Si se escoje el número n=-1 o se pone LOOP=infinite, el sonido se
ejecutará indefinidamente. Se puede omitir este atributo, y entonces el fichero se ejecutará
una sola vez.
Por ejemplo, la directiva para que se ejecute el fichero son1.mid dos veces en el Explorer
es:
<BGSOUND SRC="son1.mid" LOOP=2>
Fondo sonoro para el Netscape

La directiva básica para el Netscape es:
<EMBED SRC="fichero_de_sonido" WIDTH=xxx HEIGHT=yy>
donde WIDTH es la anchura y HEIGHT la altura de una consola que aparece, y que tiene
diferentes teclas (play, stop, pausa, etc.). Más adelante se comentarán los valores xxx e yy
que debemos atribuirles.
El fichero de sonido puede estar en formato .mid o .wav, pero recuérdese la advertencia
hecha anteriormente, de que estos formatos deben estar configurados como MIME por el
servidor donde esté alojada la página.
Dentro de la directiva se pueden añadir los atributos ya comentados de:
• AUTOSTART="true" (arranca automáticamente)
• LOOP="true" (se ejecuta ininterrumpidamente)
A continuación se puede ver una directiva para que aparezca en Netscape una consola
con sus teclas. Pulsando la tecla play se ejecutará el fichero son1.mid.
Con respecto a las dimensiones de la consola, existe el problema de que son distintas
para los diferentes plug-ins que existen para Netscape, y no se sabe a priori cuál de ellos
estarán usando los distintos usuarios de la página. En este ejemplo se van a poner las
dimensiones de la consola del plug-in Crescendo del Netscape 2.0 (200 de ancho por 55 de
alto), pero es posible que si se está utilizando otro distinto se vean zonas en blanco.
La etiqueta queda de esta manera:
<EMBED SRC="son1.mid" WIDTH=200 HEIGHT=55>
Para conseguir que la consola sea invisible hay que añadirle el atributo
HIDDEN="true".
93
<EMBED SRC="prv89.mid" HIDDEN="true">
Fondo sonoro combinado para Explorer y Netscape

Se pueden combinar los dos tipos distintos de directivas para conseguir que un fondo
sonoro sea escuchado por usuarios que utilicen tanto el Explorer como el Netscape
(siempre que éste último esté preparado para ello). En este caso, el Explorer ignorará la
etiqueta del Netscape, y a la inversa.
Por ejemplo las dos etiquetas necesarias para que se ejecute el fichero son1.mid como
sonido de fondo, tanto por el Explorer como por el Netscape (lo hará una sola vez):
<BGSOUND SRC="son1.mid">
<EMBED SRC="son1.mid" HIDDEN="true" AUTOSTART="true">
Para que este sonido se ejecute indefinidamente, a la etiqueta del Explorer basta con
añadirle el atributo LOOP=infinite, como se ha visto anteriormente. Y con respecto a
la etiqueta del Netscape, teóricamente debería también bastar añadirle el atributo
LOOP="true", pero también hay que poner las dimensiones de la consola (que no se va a
ver). Las dos etiquetas quedan de esta manera:
<BGSOUND SRC="prv89.mid" LOOP=infinite>

<EMBED SRC="prv89.mid" WIDTH=200 HEIGHT=55 AUTOSTART="true"
LOOP="true" HIDDEN="true">
3.4.3 Activación del sonido por el propio usuario

Hasta aquí se ha visto cómo poner un sonido de fondo en una página. Hay otra opción,
mucho más sencilla, y es la de poner un enlace a un fichero de sonido, de tal manera, que al
pulsarlo se ejecute el fichero. Por ejemplo, un enlace al fichero son1.mid:
<A HREF="son1.mid">musica</A>
Al pulsar el enlace se activa, en una ventana aparte, el programa que ejecuta el sonido.
Esto es válido para todos los navegadores, incluso las versiones más antiguas, con la única
condición de que se haya configurado un programa auxiliar capaz de ejecutar ficheros .mid
o .wav.
3.5 Vídeo
Es posible tener enlaces a vídeos en una página Web. Al igual que con los sonidos, se ha
de tener un especial cuidado para proporcionar vídeo en un formato que puedan entender
los posibles visitantes de la página. Formatos QuickTime y MPEG se entienenden tanto en
Mac como en Windows, formatos AVI sólo se entienden en Windows.
Tanto Explorer como Netscape pueden visualizar vídeos en una página Web, pero lo
hacen de forma diferente. Para que el vídeo sea accesible a los visitantes de la página,
independiente del navegador que utilizan, se debe utilizar (o por lo menos añadir) un enlace
a un fichero de vídeo externo. Cuando el usuario pulse sobre el enlace, el navegador
94
3.5 Vídeo
descargará el fichero de vídeo y abrirá el programa auxiliar correspondiente, con el que se

puede reproducir el vídeo.
Para añadir un enlace a un vídeo externo puede seguir los siguientes pasos:
• Crea un icono que puedas utilizar en una página para indicar que es un enlace a
un vídeo (por ejemplo, lo puede llamar video.gif).
• Guarda el fichero de vídeo con la extensión apropiada, ya que en caso

contrario el navegador puede que no lo reconociera y no fuera capaz de abrirlo
con la aplicación que le corresponda. Utiliza la extension .qt o .mov para
ficheros QuickTime, .avi para ficheros AVI y .mpeg o .mpg para ficheros
MPEG.
• En tu documento HTML crea un enlace a este fichero: <A

HREF=”ficvide.ext”>. La etiqueta del enlace puede ser el icono de
vídeo que tiene: <IMG SRC=”video.gif”>.
• Es recomendable poner también el tamaño y el formato del vídeo.
Por ejemplo:
<A HREF=”prof.mov”><IMG SRC=”video.gif”>4.8 Mb (QuickTime)</A>
Para empotrar un vídeo en una página (y que lo reconozcan tanto Netscape como
Explorer) se puede utilizar la directiva EMBED. Por ejemplo:
<EMBED SRC=”prof.avi” WIDTH=90 HEIGHT=90 AUTOSTART=true

ALIGN=right>
Con WIDTH y HEIGHT se indica el ancho y el alto en pixels del vídeo. ALIGN funciona
igual que para las imágenes.
3.5.1 Vídeo para Internet Explorer

Explorer reconoce un atributo especial de la directiva IMG que le permite insertar vídeos
en una página, este atributo es DYNSRC. Su utilización se muestra en el siguiente ejemplo:
<IMG SRC=”video.gif” DYNSRC=”prof.avi” CONTROLS ALIGN=right>
El valor video.gif del atributo SRC corresponde a una imagen estática que es visualizada
antes y después del vídeo. El valor prof.avi de DYNSRC es el URL del fichero con el vídeo.
CONTROLS muestra los botones de control de play, pause y stop.
Opcionalmente también se puede añadir el atributo LOOP que es el número de veces que
se repite el vídeo (con un valor de -1 o infinite se proyecta continuamente), el atributo
START que si toma el valor fileopen el vídeo se proyecta cuando el visitante entra en la
página y con el valor mouseover cuando el visitante apunta con el ratón sobre el enlace.
95
Notas
Lógicamente, en un medio impreso no se pueden reproducir los sonidos y los vídeos,
pero en el CD-ROM que acompaña al curso hay ficheros de sonidos y vídeos que puede
utilizar para comprobar como funcionan estas directivas.
3.6 Mapas
Se ha visto que se pueden hacer enlaces de texto y de gráficos. Pero también existe otra
posibilidad: que dentro de una sola imagen se pueda acceder a varios enlaces. Se hace
declarando zonas dentro de la imagen (rectángulos, círculos, etc..), siendo cada una de ellas
un enlace distinto. Tradicionalmente, siempre han existido dos maneras de hacerlo:
• Mapas gestionados por el cliente (el navegador).
• Mapas gestionados por el servidor.

Los segundos fueron los primeros en desarrollarse y estaban incluidos dentro del
estándar HTML 2.0. Sin embargo, nunca hubo una manera común de gestionar esos
mapas. Debido a ello, Netscape elaboró un sistema propio: los mapas gestionados por el
navegador, que fue incluido en el estándar 3.2.
3.6.1 Mapas gestionados por el cliente

Para utilizarlos se necesitan dos cosas: declarar el mapa y asignarlo a una imagen. Para
declarar el mapa se usa una sentencia de la forma:
<MAP NAME="mi_mapa">
<AREA SHAPE=... COORDS=... ALT="Enlace a..">
...
</MAP>
Dentro de la directiva MAP sólo se puede definir el nombre del mapa (algo
imprescindible, por otra parte). Es dentro de cada elemento AREA donde se pueden definir
otras cosas utilizando los siguientes atributos:
• SHAPE: Define la forma de la zona, que podrá ser rectangular (RECT),

circular (CIRCLE) o poligonal (POLY, que corresponde a un polígono
irregular).
• COORDS: Coordenadas (separadas por comas) que definen la zona. El número

y significado de esas coordenadas dependerá de la zona.
• HREF: URL a donde irá el usuario si pulsa sobre esa zona.
• NOHREF: Especifica que esa zona no tiene asignado ningún enlace.
96
3.6 Mapas
• ALT: Texto que se presentará en lugar de la imagen en navegadores no

gráficos para acceder al enlace.
Como se puede ver, para declarar correctamente una zona se necesita conocer cómo se
definen exactamente las formas y coordenadas.
Para la zona rectangular (SHAPE=RECT) las coordenadas son:
COORDS="x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2)
la inferior derecha.
Para la circular (SHAPE=CIRCLE): COORDS="x,y,radio" siendo (x,y) el centro
del círculo.
Para la polinomial (SHAPE=POLY): COORDS="x1,y1,x2,y2,x3,y3,..."
definiendo cada pareja (x,y) una esquina del polígono.
Una vez definido el mapa hay que asignarle una imagen, lo cual se hace de la siguiente
forma:
<IMG SRC=... USEMAP="#mi_mapa">
Siempre hay que añadir al comienzo del nombre del mapa una almohadilla (#). Un
ejemplo:
<MAP NAME="navegadores">
<AREA SHAPE=RECT COORDS="0,0,24,31"
HREF="http://www.netscape.com" ALT="Netscape">
<AREA SHAPE=RECT COORDS="26,0,53,31"
HREF="http://www.microsoft.com" ALT="Microsoft">
<AREA SHAPE=DEFAULT NOHREF ALT="Nada">
</MAP>
<IMG SRC="nav.gif" WIDTH=53 HEIGHT=31 BORDER=0
USEMAP="#navegadores">
Hay que tener en cuenta que, cuando dos zonas se solapan, la que esté declarada primero
es la que tiene preferencia. Por eso se ha declarado al final una zona que no conduce a
ningún URL por si el usuario pulsa con el ratón donde no debe.
3.6.2 Mapas gestionados por el servidor

Para gestionar un mapa desde el servidor se tiene que tener el correspondiente programa
sobre el servidor. El programa debe de estar ubicado en el directorio de los cgi-bin. Para
utilizarlos lo mejor es consultar con el administrador del servidor, y pedirle información
sobre el servidor que se tiene y como crear conjuntos de coordenadas para los mapas
gestionados por el servidor.
En el documento HTML debe de declarar el mapa de la siguiente forma:
<A HREF=”http://sitio/imagemap/path/coords”>
Donde sitio es la dirección del servidor (p.e. dia.uned.es), imagemap es el

nombre del programa que interpreta el conjunto de coordenadas, y /path/coords
indica el camino (path) del fichero de texto en el que se contienen las coordendas (el mapa)
para la imagen.
97
Un mapa gestionado por el servidor estaría definido de la siguiente forma:
<A HREF=”http://dia.uned.es/cgi/promap/home/mapas/plano.map”>
<IMG SRC=”plano.gif” ALT=”Plano Universidad” ISMAP>
</A>
El atributo ISMAP indica que es una imagen correspondiente a un mapa gestionado por
el servidor.
En la Tabla 3-3 se muestra el código HTML de un ejemplo para la utilización de un mapa
de España para la búsqueda de recursos (en la Figura 3-19) se muestra el mapa, cuando el
usuario apunta a un área definida, el URL de destino aparece en la barra de estado.
<MAP NAME=spain_map>
<AREA SHAPE=rect COORDS= "138,34, 186,43" HREF="larioja.html">

<AREA SHAPE=rect COORDS= "156,22, 201,33" HREF="navarra.html">
<AREA SHAPE=rect COORDS= "149,14, 185,22" HREF="euskadi.html">
<AREA SHAPE=rect COORDS= "76,11, 118,21" HREF="asturias.html">
<AREA SHAPE=rect COORDS= "108,3, 156,13" HREF="cantabria.html">
<AREA SHAPE=rect COORDS= "40,19, 76,33" HREF="galicia.html">
<AREA SHAPE=rect COORDS= "86,45, 162,66" HREF="castillaleon.html">
<AREA SHAPE=rect COORDS= "114,74, 154,94" HREF="cmadrid.html">
<AREA SHAPE=rect COORDS= "119,96, 175,128" HREF="castillamancha.html">
<AREA SHAPE=rect COORDS= "172,46, 208,65" HREF="aragon.html">
<AREA SHAPE=rect COORDS= "214,37, 264,67" HREF="catalunya.html">
<AREA SHAPE=rect COORDS= "180,95, 225,121" HREF="cvalenciana.html">
<AREA SHAPE=rect COORDS= "228,88, 282,138" HREF="baleares.html">
<AREA SHAPE=rect COORDS= "167,134, 208,153" HREF="murcia.html">
<AREA SHAPE=rect COORDS= "74,144, 159,170" HREF="andalucia.html">
<AREA SHAPE=rect COORDS= "129,188, 176,207" HREF="ceuta.html">
<AREA SHAPE=rect COORDS= "77,190, 117,206" HREF="melilla.html">
<AREA SHAPE=rect COORDS= "45,95, 110,114" HREF="extremadura.html">
<AREA SHAPE=rect COORDS= "3,171, 77,205" HREF="canarias.html">
<AREA SHAPE=default HREF="error.html">
</MAP>
<A HREF="http://dia.uned.es/gi/promap/home/mapas/es.map">
<IMG BORDER=0 SRC="iconos/spain.gif" ALT="Esto es un mapa sensible. Use la lista
alternativa" USEMAP="#spain_map" ISMAP>
</A>
Tabla 3- 3: Declaración de un mapa sensible
98
3.6 Mapas
Figura 3- 19: Mapa sensible
99
100
4 Estilos y capas
Tema
HTML no fue diseñado para hacer bellas presentaciones, sino para que fueran
universales. Fue gracias a pioneros como Netscape Corporation, los que hicieron que a
partir de la versión 3.2 se añadieran directivas que dieran a los diseñadores más control
sobre la apariencia del texto. Pero esto supone considerar más directivas para conseguir el
formato de cada párrafo y/o palabra. El W3 Consortium quiere desechar del orden de 20
directivas y atributos que añaden formato a textos, listas, tablas, etc., y que en su lugar se
utilicen los estilos.
Las hojas de estilo son un mecanismo para añadir información tipográfica y sobre el
formato a un documento HTML, pero de forma que no queden afectadas las marcas de
HTML.
En este tema se explica como crear estilos y como utilizar las hojas de estilo.
4.1 Hojas de estilo

Las hojas de estilo se refieren a definiciones de formatos de directivas que se pueden
incluir tanto en el propio documento HTML como en un documento aparte de hoja de
estilo. Su principal ventaja se refiere a la capacidad de homogeneizar y mejorar el
mantenimiento de diseños de páginas HTML, de forma que la personalización de color,
tipos y tamaños de fuentes, párrafos, fondos (color o imágenes de trasfondo), etc., estén
recogidas en un lugar concreto. De esta forma, cambiar la apariencia de todo un grupo de
documentos será tan simple como cambiar las definiciones de una o varias hojas de estilo.
Para soportar las hojas de estilo se han añadido dos nuevos elementos a HTML, STYLE
y SPAN.
Las hojas de estilo permiten indicar como debe presentarse el texto sin que se cambien
en el documento las directivas y marcas de caracteres. Por ejemplo, una hoja de estilo
puede tener información del tipo:
H1 {font-size=24pt; font-family=arial; text-align:center;}

H2 {font-size=18pt; font-family=arial; text-align:left;}
EM {font-style=italics;}
que está diciendo:
101
4 Estilos y capas
“Las cabeceras H1 centradas en la página y visualizadas con caracteres de

tipo Arial de 24 puntos”.
“Las cabeceras H2 ajustadas a la izquierda y visualizadas con caracteres de
tipo Arial de 18 puntos”.
“Para los textos dentro de EM utilizar la versión cursiva (italics) del tipo de
letra actual”.
Si un navegador entiende el mecanismo de las hojas de estilo, cuando carga un

documento HTML, accede a la información asociada a la misma y aplica las instrucciones
de la hoja de estilo para formatear el documento. Esto permite que el autor sugiera el
formato preferido para sus documentos. En realidad el autor sólo sugiere, ya que el
navegador o el usuario pueden ignorar la información de la hoja de estilo si consideran por
alguna razón que es inapropiada.
Las hojas de estilo han tardado en utilizarse, ya que era necesario definir un lenguaje
aceptado para las mismas. En la actualidad hay dos lenguajes, el CSS (cascading
languages) que es el que se ha impuesto y el DSSSL-Lite o DSSSL-Online (versión
reducida del DSSSL, Document Style Semantics and Specification Language).
El lenguaje CSS es simple y fácil de entender, en la actualidad está soportado por el
Internet Explorer y por Netscape.
4.1.1 Visión general

Una hoja de estilo (StyleSheet) es una definición de atributos de código HTML, que
puede estar embebido (in-line) o en un archivo separado. La definición de un estilo estará
delimitado por los nuevos atributos <STYLE> ... </STYLE>. Pero, con la finalidad de
hacer más simple la declaración de estilos parciales, que atañen sólo a partes muy concretas
y aisladas de un documento, se han ampliado las posibilidades con los atributos <SPAN> y
<DIV>. El primero abarcará a párrafos y el segundo a partes más complejas, como
capítulos o secciones de documentos.
El lugar natural para definir estilos, o hacer referencias a estilos contenidos en archivos
externos, es en la cabecera de los documentos HTML, es decir, entre las directivas
<HEAD> ... </HEAD>. La apariencia de una definición de un estilo, sería algo como lo
siguiente:
<HEAD>
<STYLE TYPE=”text/css”>

</STYLE>
</HEAD>
El atributo de inicio <STYLE> toma como parámetro el tipo, que normalmente será
"text/css"; por el momento, sólo indicarlo y no haremos mayores comentarios a este
respecto. Observe, ya en lo concreto de la sintaxis de la definición de un estilo, que puede
abarcar directivas estándar de HTML, como es H1 (cabecera de primer nivel), o atributos
definidos por el usuarios, como sería .resalte. Además, las propiedades se definen
entre llaves y es posible dar valor a varias, separando unas de otras mediante un punto y
coma.
Por otra parte, puede observar la acotación entre comentarios (<! >). Esta posibilidad,
102
4.1 Hojas de estilo
que no imposición, se aconseja con el fin de no descomponer la apariencia de las páginas

HTML visualizadas con navegadores que no soporten hojas de estilo. Téngase en cuenta
que lo contenido entre las marcas de comentario estará oculto para el navegador, pero no
así para el intérprete SGML, encargado del paso de los atributos de la hoja de estilos. Por
tanto, se mostraran las páginas formateadas sólo en aquellos navegadores que den soporte a
hojas de estilos; los restantes ignoraran el contenido.
4.1.2 Directivas dentro de una hoja de estilo

En las hojas de estilo se utilizan directivas (tags) del lenguaje HTMI, con la posibilidad
de definir y declarar directivas personales, utilizables con posterioridad, de forma similar,
dentro de un documento de marcas de hipertexto (HTML).
Si quiere definir propiedades para un atributo estándar HTML, por ejemplo referente a
cabeceras de primer nivel (<H1> ... </H1>), deberá realizar una especie de sobrecarga
(mimetizando la terminología de la programación orientada a objetos). Así, un código
como el siguiente:
<HEAD>
<STYLE TYPE="text/css">

</STYLE>
En el elemento STYLE no se indica el lenguaje que se utiliza para la hoja de estilo. Se

propuso utilizar el elemento META para indicarlo. En este caso el lenguaje utilizado por
defecto en un documento para las hojas de estilo quedaría especificado de la forma:
<META HTTP-EQUIV=”contenedor del tipo de estilo”

CONTENT=”tipo/subtipo”>
donde tipo/subtipo es el tipo del lenguaje para las hojas de estilo. Para CSS se
105
4 Estilos y capas
escribirá:
<META HTTP-EQUIV=”contenedor del tipo de estilo”

CONTENT=”text/css”>
Por último, el elemento nuevo SPAN permite que un formato se aplique a frases
individuales, palabras o letras, independientemente del formato especificado para el
elemento. Por ejemplo, la marca:
<SPAN STYLE=”color:red; text-decoration: line-through”> algún

texto </SPAN>
indica que el texto dentro de SPAN se escriba en rojo y cruzado por una línea.
4.1.4 Escribir hojas de estilo

Para escribir una hoja de estilo, siga los siguientes pasos:
1) Si es una hoja de estilo interna, comience la definición con la directiva <STYLE>,
si es externa, cree un nuevo documento de texto con su procesador preferido (p.e.
WordPad en Windows).
2) Escriba el nombre de la directiva que quiere definir (P, H1, A, ...).
3) Las propiedades deseadas escríbalas entre llaves, comience con { para marcar el
comienzo de la definición de propiedades, y termine con }, separe cada propiedad
con un punto y coma (;).
4) Repita los dos pasos anteriores para cada una de las directivas cuyas propiedades se
quieren redefinir.
5) Cuando haya terminado, si es una hoja de estilo interna, termine con </STYLE>,
si es una hoja de estilo externa, guarde el fichero de texto, poniéndole la extensión
.css para indicar que corresponde a una hoja de estilo en cascada.
En la Figura 4-1 se muestra el código de un documento HTML donde se ha definido una
hoja de estilo interna. En la Figura 4-2 se muestra una hoja de estilo externa que se ha
almacenado en un fichero de texto que, en este ejemplo, se llama estilo.css, cuando se
quiera considerar esta hoja de estilo en un documento se tiene que utilizar la directiva
LINK. Por último, en la Figura 4-3 se visualiza el correspondiente documento. El resultado
es el mismo para los dos casos, se ve que la cabecera de primer nivel se ha definido con un
tipo de letra Arail Black de color y con un color de fondo verde, mientras que los párrafos
se escriben con Times New Roman y justificados a los dos márgenes.
También se han definido los colores de los enlaces, si no está visitado el enlace aparece
en verde y si está visitado en azul.
Por supuesto, la elección de estos colores ha sido arbitraria, y tan sólo como ejemplo, es
cuestión del diseñador elegir unos colores adecuados.
106
4.1 Hojas de estilo
Figura 4 1: Hoja de estilo interna
Figura 4 2: Hoja de estilo externa
107
4 Estilos y capas
Figura 4 3: Resultado de la aplicación de una hoja de estilo
A la hora de escribir las hojas de estilo recuerde los siguientes puntos:

a) Puede definir una propiedad para varias directivas, separando cada directiva con una
coma, por ejemplo, para que las cabeceras (Hn) sean de color azul:
H1, H2, H3 {color: blue}
b) También puede definir las propiedades de una directiva que depende de otra,
escribiendo la directiva dependiente después de la primaria. Por ejemplo, si se
quiere que el texto marcado con la directiva EM dentro de una directiva H1, además
de ponerse en cursiva, se ponga en rojo, se hará de la forma:
H1 EM {color: red}
c) Cuando se hace un cambio en una hoja de estilo externa, todas las páginas que
referencian esta hoja de estilo se actualizan también. Esto es adecuado para
conjuntos de documentos que se quiere que tengan la misma apariencia.
d) En el mismo documento se puede enlazar una hoja de estilo externa, incluir una hoja
de estilo interna y aplicar estilos localmente. En este caso, los estilos locales
prevalecen sobre las hojas de estilo interna, las cuales prevalecen sobre las externas.
4.1.5 Identificación de directivas

Se pueden dividir los elementos de HTML en categorías o clases para poder aplicar de
una forma selectiva los estilos. Por ejemplo, se puede crear una clase de párrafos
introductorios con un formato ligeramente diferente de los párrafos normales.
Para indicar que un elemento de una página HTML pertenece a una determinada clase
hay que añadir en la directiva el atributo CLASS=nombreclase, donde nombreclase
es la palabra que se ha usado para identificar la clase.
En la hoja de estilo (o en la sección STYLE) se tiene que escribir
directiva.nombreclase donde directiva es la directiva de la que se está
haciendo una clase, y nombreclase es el nombre que se le da y que se usará luego en el
108
4.1 Hojas de estilo
atributo CLASS. Después se sigue con la misma definición hecha entre { y }.

En el ejemplo de las Figuras 4-1 a 4-3 se puede añadir una clase para un párrafo
introductorio. En la Figura 4-4 se muestra la definición del estilo de este párrafo
introductorio y en la Figura 4-5 su visualización.
Figura 4 4: Definición de una clase
Figura 4 5: Aplicación de un estilo a una clase
En lugar de crear una clase completa, se pueden identificar directivas individuales y

aplicarles la información de las hojas de estilo o de las funciones de JavaScript.
Para identificar los elementos en una página HTML en la correspondiente directiva se
tiene que añadir el atributo ID=identificador, donde identificador es una
palabra que identifica esa directiva.
En la hoja de estilo se pondría directiva#identificador donde directiva
es la clase de directiva que se quiere identificar e identificador es el identificador
usado en el atributo ID.
109
4 Estilos y capas
En la Figura 4-6 se muestra el mismo ejemplo anterior, pero en este caso, en lugar de una
clase intro se ha definido un identificador, que también se ha llamado intro. El resultado en
la visualización es el mismo que en el caso anterior.
Figura 4 6: Identificador de directiva
Cada identificador ID tiene que ser único en un documento HTML. Su principal utilidad
es para aplicar JavaScript a determinadas partes de la página Web.
4.1.6 Directivas especiales para los estilos

Hay dos directivas que son particularmente útiles a la hora de aplicar estilos. La primera
es DIV, la cuál se aplica a una o mas secciones del documento. La otra es SPAN, que se
puede aplicar a unas pocas palabras de texto. El provecho de estas directivas es cuando se
definen clases y se utilizan en una hoja de estilo.
Para aplicar los estilos (en una hoja de estilo interna o externa) a una directiva DIV se
define una clase DIV.nombreclase, donde nombreclase es la palabra que
identifica a la clase, o se da un identificador de directiva ID#identificador, donde
identificador es la palabra para identificar la directiva DIV.
Por ejemplo, se puede definir el siguiente estilo para DIV:
<STYLE>
DIV.cabe {background: lime}
DIV.poste {background: magenta}
H1 {color: red; font: Arial Black}
P {text.align: justify}
</STYLE>
Dentro del cuerpo del documento se utiliza DIV al comienzo de cada una de las
secciones, añadiendole el atributo CLASS=nombrecalse o ID=identificador.
En la Figura 4-7 se ve el código de un documento utilizando DIV y en la Figura 4-8 su
visualización.
110
4.1 Hojas de estilo
Figura 4 7: Utilización de DIV con las hojas de estilo
Figura 4 8: Visualización del uso de DIV en las hojas de estilo
La otra directiva comentada, SPAN, se puede utilizar de forma análoga, definiendo una
clase o identificador para la misma: SPAN.nombreclase o SPAN#identificador.
El formato definido para la clase o identificador de SPAN, se aplica poniendo <SPAN
CLASS=nombreclase> o <SPAN ID=identicicador> delante de las palabras
que se deseen. Terminando con </SPAN>.
La Figura 4.9 se muestra el código de un ejemplo que usa SPAN, y la Figura 4-10 su
111
4 Estilos y capas
visualización.
Figura 4 9: Utilización de SPAN en las hojas de estilo
Figura 4 10: Visualización del uso de SPAN en las hojas de estilo
4.1.7 Estilos para los enlaces

Los enlaces suelen estar subrayados, pero si este efecto no te gusta, se pueden definir
colores de fondo para los enlaces.
Los enlaces pueden tener distinto aspecto según estén visitados o no, estén activos o
cuando se apunta a ellos. Para cada caso se puede definir la apariencia del enlace:
Con A:link se define la apariencia del enlace que no se ha visitado o pulsado o
apuntado.
Con A:visited se cambia la apariencia de los enlaces que ya se han visitado
112
4.2 Formato de texto utilizando estilos
Con A:active cambia la apariencia de los enlaces cuando son pulsados.

Con A:hover cuando son apuntados.
A continuación se define el estilo. Por ejemplo:
A:link {background:yellow; color: blue}

A:visited {background:blue; color:yellow}
A:active {background:red; color: cyan}
A:hover {backgound:white; color:silver}
Para cambiar la apariencia de todos los enlaces a la vez escribir:
A {property:value}
donde property es la propiedad que se quiere cambiar y value el valor.

El consorcio W3C quiere que deje de utilizarse la directiva FONT, así como otras 20
directivas y atributos utilizadas para formatos de texto, listas, tablas, etc., en su lugar quiere
consolidar que toda la información de formato se haga mediante los estilos.
Siguiendo las directrices del W3C, a continuación se explica como crear estilos
individuales que se pueden utilizar localmente, en hojas de estilo internas o externas, tal
como se han visto en la sección anterior.
4.2.1 Modificando la fuente del texto

En algunos de los ejemplos anteriores se vio que se puede cambiar la fuente del texto.
Como no todos disponen del mismo grupo de fuentes, es una buena idea que en el marcador
de “familia de fuentes” (font-family) se indiquen mas de una fuente de tipo de letra.
Para indicar las familias de fuente escribir:
font-family: familia1, familia2
donde familia1 es la primera elección de tipo de fuente de letra y familia2 la

segunda. Si en el cliente no se dispone del tipo familia1 se utiliza familia2. Se
pueden poner tantas como se desee. Un buen consejo es por lo menos especificar dos, una
de ellas que sea una fuente común, de forma que se mantenga cierto “control” en la
apariencia del texto. Por ejemplo, Times es común para Macintosh y para Windows.
Se pueden utilizar nombres genéricos como: serif, sans-serif, cursive, fantasy y
monospace.
También se pueden usar nombres específicos de fuentes como Copperplate Gothic
Light.
En la Figura 4-11 se visualiza el siguiente ejemplo, donde se han indicado una familia de
fuentes para las cabeceras y para los párrafos:
<HEAD><TITLE>Sobre esotérico y exotérico</TITLE>

<STYLE>
113
4 Estilos y capas
H1 {font-family: “Arial Black”, “Book Antiqua”}

P {font-family: “Helvetica”, “Times”}
</STYLE>
</HEAD>
<BODY>
<P>Hay cierta confusión entre esotérico y exotérico, aunque
significan cosas totalmente opuestas. Veamos que dice el
diccionario de la RAE sobre los mismos
<H1>Esotérico</H1>
<P>Adj. Oculto, reservado. 2. Por extensión dícese de lo que es
impenetrable o de difícil acceso para la mente. 3. Dícese de la
doctrina que los filósofos de la antigüedad no comunicaban sino
a corto número de sus discípulos. 4. Dícese de cualquier
doctrina que se transmite oralmente a los iniciados.
<H1>Exotérico</H1>
<P>Adj. Común, accesible para el vulgo, lo contrario de
esotérico. 2. Dícese de lo que es de fácil acceso para la mente.
3. Dícese por lo común de la doctrina que los filósofos de la
antigüedad manifestaban públicamente.
Figura 4 11: Utilización de font-family para indicar la fuente que se tiene que utilizar
Puede ocurrir que la fuente que se seleccione no la tenga instalada el usuario en su

sistema (cosa por otra parte bastante normal si se utilizan fuentes poco comunes), para
estos casos se ha añadido una nueva posibilidad a las hojas de estilo, que es la capacidad de
empotrar una fuente en una página y descargarla al sistema del usuario visitante como si
fuera una imagen. Para ello escribir:
@font-face {font-family: “.fuente”; src: url(url_fuente)}
donde fuente es el nombre completo de la fuente que se quiere empotrar y

url_fuente es el URL de la fuente.
114
Puede elegir cualquier archivo de fuente para empotrar la fuente. Recuerde que Internet
Explorer requiere que las fuentes estén en formato .eot. Puede convertir las fuentes que
tiene instaladas a formato .eot con programas como WEFT.
Por su parte, Netscape está trabajando en tecnologías Bitstream que utiliza sistemas de
fuentes empotradas desarrolladas por HexMac.
Para resaltar el texto poniéndolo en cursiva o en negrita, se puede utilizar font-style
y font-weight. Los valores posibles con font-style son:
• oblique, para texto oblicuo
• italic, para texto en cursiva
• normal, para volver a texto normal

font-weight toma los valores:
• bold, para poner en negrita el texto
• bolder o lighter, para aumentar o disminuir en una forma relativa la negrita
• múltiplos de 100 (entre 100 y 900) donde 400 representa la “negrura” de texto
normal y 700 la letra en negrita.
• normal, para poner el texto otra vez normal.
El siguiente ejemplo, visualizado en la Figura 4-12, muestra el uso de font-style y

font-weight:

<STYLE>
H1 {font-weight:normal;
font-family: “Arial Black”, “Book Antiqua”}
P {font-family: “Helvetica”, “Times”}
P.intro {font-weight:bold; font-style:italic}
P.intro EM {font-style:normal}
</STYLE>
</HEAD>
<BODY>
<P class=intro>Hay cierta confusión entre <EM>esotérico</EM> y
<EM>exotérico</EM>, aunque significan cosas totalmente
opuestas. Veamos que dice el diccionario de la RAE sobre los
mismos
<H1>Esotérico</H1>
<P>Adj. Oculto, reservado. <EM>2</EM>. Por extensión dícese de
lo que es impenetrable o de difícil acceso para la mente.
<EM>3</EM>. Dícese de la doctrina que los filósofos de la
antigüedad no comunicaban sino a corto número de sus
discípulos. <EM>4</EM>. Dícese de cualquier doctrina que se
transmite oralmente a los iniciados.
<H1>Exotérico</H1>
esotérico. <EM>2</EM>. Dícese de lo que es de fácil acceso para
la mente. <EM>3</EM>. Dícese por lo común de la doctrina que los
filósofos de la antigüedad manifestaban públicamente.
115
4 Estilos y capas
Figura 4 12: Uso de font-style y font-weight
También se puede definir el tamaño del tipo de letra de un texto marcado por una
directiva de HTML. Para ello utilizar font-size, con el que se pueden definir valores
absolutos de tamaño de letra: xx-small, x-small, small, medium, large, x-large o xx-large
(que va desde muy pequeño a muy grande), o valores relativos con larger (mayor) o
smaller (más pequeño). También se puede dar el valor exacto en puntos o en pixels (p.e.
12pt o 15px), o en un porcentaje relativo al estilo que se utiliza por defecto (p.e. 120%).
En el siguiente ejemplo, visualizado en la Figura 4-13, se ha cambiado el tamaño de
letra:

<STYLE>
H1 {font-size:30pt;
font-weight:normal;
P {font-size:10pt;
font-family: “Helvetica”, “Times”}
</STYLE>
</HEAD>
<BODY>
mismos
<H1>Esotérico</H1>
116

<H1>Exotérico</H1>
esotérico. <EM>2</EM>. Dícese de lo que es de fácil acceso para
la mente. <EM>3</EM>. Dícese por lo común de la doctrina que los
filósofos de la antigüedad manifestaban públicamente.
Figura 4 13: Uso de font-size
También se puede especificar la altura de la línea con line-height. Los valores que
puede tomar son:
• n, el número por el que es multiplicado el tamaño de la fuente para obtener la

altura de la línea.
• Un porcentaje (P%) del tamaño de la fuente.
• Un valor absoluto (N) en puntos, pixels o cualquier otra media.

En el ejemplo anterior se ha cambiado el tamaño de la línea poniendo (ver Figura 4-14):
<STYLE>
H1 {font-size:30pt;
font-weight:normal;
P {line-height:20pt;
font-size:10pt;
117
4 Estilos y capas
</STYLE>
</HEAD>
<BODY> ....
Figura 4 14: Uso de line-height
Para poner de una sola vez tanto la fuente, el tamaño, la altura de la línea y la familia,
para ello se puede utilizar font. Los valores que hay que utilizar son los indicados para
cada caso separados por blancos:
1) Los valores de font-style: normal, oblique o italic.
2) Los valores de font-weight: normal, bold, bolder, lighter o múltiplos de 100.
3) small-caps si se quiere que una variante de la fuente esté en letra versalita.
4) El tamaño de fuente deseado tal como se especifica para font-size.
5) La altura de línea, precedida de / (p.e.: 10pt/20pt indica tamaño de letra de 10
puntos y altura de línea de 20 puntos).
6) La familia o familias de fuente, separadas por comas.
En el ejemplo anterior, en lugar de poner:
H1 {font-size:30pt;
font-weight:normal;
P {line-height:20pt;
font-size:10pt;
Se podría poner:
118
H1 {font: normal 30pt “Arial Black”, “Book Antiqua”}

P {font: 10pt/20pt “Helvetica”, “Times”}
El resultado es el mismo que el mostrado en la Figura 4-14.

Por supuesto, no hay que poner todas las opciones, en el ejemplo no lo hicimos. Pero
sólo se puede poner la altura de línea si también se especifica el tamaño de la fuente (como
en el ejemplo 10pt/20pt). En Netscape se debe seguir el orden anterior, aunque no es
necesario para Explorer.
4.2.2 Cambios en las características del texto

En las hojas de estilo se puede indicar como resaltar el texto, especificando el color del
mismo o del fondo o haciéndolo parpadear o subrayándolo; también se puede especificar el
espaciado de las palabras y de las letras y el alineamiento del texto.
El color del texto marcado por una directiva se cambia con color en el estilo de esa
directiva. Puede tomar los siguientes valores:
• nombrecolor: uno de los 16 colores predefinidos (ver Tabla 2-4).
• #RRGGBB, el valor en hexadecimal que representa al color que se desea.
• rgb(r,g,b), donde r, g y b son enteros entre 0 y 255 que especifican la

cantidad de rojo, verde y azul respectivamente que se mezclan para dar el
color deseado.
• rgb(r%,g%,b%), donde r, g y b especifican los porcentajes de rojo, verde

y azul que se mezclan para dar el color deseado.
Si para r, g y b se utilizan valores mayores de 255 es cambiado por 250, igualmente si

es en porcentaje y se pone un valor mayor que el 100%, éste es reemplazado por el 100%.
Para cambiar el fondo del texto marcado con una directiva de HTML, se utiliza
background en el estilo de esta directiva. Los valores que puede tomar son:
• transparent o color, donde color es el código de color en

hexadecimal o el nombre (en inglés) de un color.
• url(imagen.gif), para utilizar una imagen de fondo, imagen.gif es

el nombre del fichero con la imagen. Opcionalmente se puede utilizar
repeat para que esta imagen se repita tanto horizontalmente como
verticalmente1. Si se quiere que se repita sólo horizontalmente se pondría
repeat-x, si se quiere que se repita sólo verticalmente se pondría
repeat-y, y no-repeat para no repetir la imagen. También se puede
especificar la posición de la imagen poniendo x,y donde x e y representan un
porcentaje o un valor absoluto de la distancia de la imagen a la esquina
superior izquierda. Para x también se pueden usar los valores top, center y
bottom y para y los valores left, center y right.
1.Es el efecto que en algunos sitios llaman “alicatado” como traducción de tile.
119
4 Estilos y capas
• Se puede especificar a la vez tanto un color como una imagen de fondo.

Por ejemplo:
H1 {background:yellow;
color: blue;
font: normal 30pt “Arial Black”, “Book Antiqua”}
El espaciado entre palabras y letras se puede modificar. Para palabras se utiliza

word-spacing:longitud, para letras se utiliza letter-spacing:longitud,
en ambos casos longitud es el valor numérico en pixels, puntos, ems, etc., de espacio.
Si lo que se quiere es sangrar el texto, se utiliza text-indent:valor, donde valor
es un valor absoluto (positivo o negativo) o un porcentaje.
A continuación se muestra el ejemplo anterior, donde además de indicar un color de
fondo y de letras, se definen el espaciado entre palabras y letras (Figura 4-15):
<STYLE>
H1 {letter-spacing: .7em;
background:yellow;
color: blue;
P {text-indent:10pt; word-spacing:1.4em;
font: 10pt/20pt “Helvetica”, “Times”}
P.intro {text-indent:0; font: italic bold}
</STYLE>
</HEAD>
<BODY> ....
Figura 4 15: Modificación del espaciado y del color
120
Se pueden utilizar valores positivos y negativos para el espaciado de letras y palabras,

aunque el resultado depende de las posibilidades del navegador. El espaciado también está
afectado por el alineamiento elegido. Para evitar que se tengan huecos en un texto
justificado, se recomienda utilizar un espaciado de letra de 0.
Para indicar el alineamiento que se desea se dispone de text-align, cuyos valores
son: left (alineamiento a la izquierda), right (alineamiento a la derecha), center (texto
centrado en mitad de la ventana) y justify (texto alineado a la izquierda y a la derecha).
Si lo que se quiere es que aparezcan los espacios en blanco tal como están (al igual que
ocurre con el texto preformateado de la directiva PRE) se puede utilizar white-space
con los valores: pre para que el navegador tenga en cuenta los espacios en blanco y los
retorno de carro extras, nowrap para mantener todos los elementos en la misma línea
excepto donde se inserte una directiva BR y normal para tratar los espacios en blanco de la
forma habitual.
En la Figura 4-16 se muestra el ejemplo anterior donde se han modificado el
alineamiento y el tratamiento de los espacios en blanco:
<STYLE>
H1 {white-space:pre;
letter-spacing: .7em; background:yellow; color: blue;
P {text-align:justify;
text-indent:10pt; word-spacing:1.4em;
font: 10pt/20pt “Helvetica”, “Times”}
P.intro {text-indent:0; font: italic bold}
</STYLE>
</HEAD>
<BODY>
mismos
<H1>E s o t é r i c o</H1>
lo que es impenetrable o de difícil acceso para la mente......
También se puede modificar la forma de resaltar el texto. Para ello se tiene

text-decoration, que puede tomar los valores: underline para subrayado, overline
para una línea por encima del texto, line-through para una línea que cruce el texto, none
para que el texto no se marque (por ejemplo en las directivas como U, STRIKE, DEL, INS
o A), o blink para hacer que el texto parpadee1.
Muchos diseñadores piensan que el texto subrayado es una herencia de la época de la
máquina de escribir, por lo que suelen utilizar la opción none para eliminar en los enlaces
(directiva A) el subrayado, pero hay que indicar de alguna forma que es un enlace, por
ejemplo, cambiando el color del fondo.
Por último, puede cambiar el texto a mayúsculas o a minúsculas mediante
text-transform que toma los valores: capitalize para poner el primer carácter de
cada palabra en mayúsculas, uppercase todas las letras mayúsculas, lowercase todas en
minúsculas o none para dejar el texto como es.
1.Aunque la opción blink está incluida oficialmente en las especificaciones de las hojas de estilo css,
Internet Explorer no la contempla, quizás porque es herencia de la directiva BLINK de Netscape.
121
4 Estilos y capas
Figura 4 16: Alineamiento de texto y espacios en blanco
4.3 Capas
Una posible difinición de las capas es la páginas que se pueden incrustar dentro de otras.
Los atributos de una capa (posición, visibilidad, etc.), como los de cualquier otro elemento
HTML, pueden definirse dentro de una hoja de estilo. Su contenido, en cambio, siempre
deberá ser especificado dentro de la parte principal de la página.
En realidad, el nombre de capas no es nada oficial: es un invento de Netscape. La
denominación oficial podría traducirse como "contenido HTML posicionable
dinámicamente". Tampoco se las puede considerar dentro de ningún estándar HTML, pero
son la base de lo que se ha dado en llamar HTML dinámico.
Sin duda, lo más importante de las capas es la posibilidad que presentan de ser movidas y
modificadas desde un lenguaje de script. Desgraciadamente, las implementaciones de
Netscape y Explorer son incompatibles entre sí, por lo que resulta complicado escribir
código que funcione en ambas plataformas.
La única manera común de definir capas en Explorer y Netscape (versiones 4 y
superiores) es mediante hojas de estilo en sintaxis CSS.
La definición de una capa sigue la misma estructura que la que se usa para decidir las
características de una directiva con el parámetro ID:
#micapa {position:absolute; top:100px; left:20px;}
</STYLE>
Esto colocaría a la capa denominada micapa a 20 pixels de la izquierda de la página y a

100 del comienzo de la misma. El contenido de la capa se indica mediante la directiva
122
4.3 Capas
<SPAN>:
<DIV ID="micapa">
<H1>El título de la capa</H1>
<P>Aquí es donde iría el texto.
...
</DIV>
Las capas que se han definido hasta ahora se colocan en una posición determinada de la
página. Pero existe otro tipo de capas llamadas flotantes cuya colocación depende, en
cambio, de la posición dentro del código fuente de la página donde se hayan colocado. Se
definen así:
#flotante {position: relative; left: 20px; top: 100px;}
</STYLE>
Existen varias propiedades de las capas que se pueden modificar, como son la posición,
la visibilidad, el orden en que se ponen en pantalla, etc...
4.3.1 Capas con estilos

Cada ítem que se crea con una hoja de estilo en cascada (css) es encerrado en una caja
invisible. De esta caja se puede controlar el tamaño, el color y el espaciado, así como el
flujo con respecto a otros objetos de la página.
Las cajas de los elementos se pueden tener a nivel de bloque, en un nuevo párrafo, o en
línea, dentro del párrafo, sin comenzar otro párrafo.
De una caja se pueden controlar tres propiedades especiales. Primero, alrededor del
contenido hay un espacio de relleno cuya anchura se puede controlar. Entorno al relleno se
encuentra el borde, pudiéndose indicar el color, la anchura y la textura del mismo.
Envolviendo el borde hay un espacio transparente que es el margen, no se puede cambiar
su color pero se puede especificar su anchura y altura, de esta forma se puede controlar la
posición de los elementos en la página.
Algunos valores (como son los porcentajes) dependen del padre del elemento padre. Un
padre es el elemento que contiene al elemento actual. Por ejemplo, el BODY podrá contener
las directivas H1 y P, por lo que es un padre de ellas. Sin embargo, si el BODY está dividido
con directivas DIV y las directivas P se encierran en una de las DIV, entonces la DIV es
padre de la P, y el BODY padre de la DIV. Por último, la directiva P podría contener una
directiva EM, y de este modo P sería padre de esta EM.
4.3.2 Posicionando las capas

La posición, tal como se ha visto, se puede indicar de una forma absoluta o relativa a la
posición original. El posicionamiento absoluto se indica mediante
position:absolute a continuación se escribe top, right, bottom o left
seguido de :n, donde n es la distancia deseada de desplazamiento referenciada al elemento
padre (por ejemplo a la ventana donde se visualiza) expresado en valores relativos o
absolutos (p.e. 20px, 25pt, 50em) o como un porcentaje del elemento padre. El
posicionamiento relativo con position:relative, seguido por top, right,
123
4 Estilos y capas
bottom o left y el valor :n del desplazamiento con respecto a su posición original.

Por ejemplo (Figura 4-17):
<STYLE>
IMG{position:relative; left:0; top:0}
IMG.fuera{position:relative; left:40px; top:-60px}
</STYLE>
</HEAD>
<BODY>
<BODY>
mismos
<IMG SRC=”diacolp.gif” ALT=”Escudo Dept. Inf. y Aut.”>
<IMG SRC=”escudin.gif” ALT=”Escudo UNED” CLASS=fuera>
...
Figura 4 17: Posicionando en forma relativa una capa
En el posicionamiento relativo un elemento es movido con respecto a su posición natural

en el flujo, no con respecto a otros elementos. El escudo de la UNED en la Figura 4-17 se
ha movido 40 pixels a la derecha y -60 hacia arriba.
Si se pone posicionamiento absoluto para las imágenes:
IMG{position:absolute; left:0; top:0}

IMG.fuera{position:relative; left:0; top:0}
La imagen es sacada del flujo de elementos y situada con referencia al elemento padre.
En este caso el escudo del Dept. de Inf. y Aut. aparecerá arriba a la izquierda de la página y
124
4.3 Capas
el escudo de la UNED en su posición natural, ya que éste se posiciona de forma relativa con
left:0; top:0 (Figura 4-18).
Figura 4 18: Posicionamiento absoluto
Es posible que al posicionar los elementos de esta forma se puedan solapar, en este caso
se puede elegir que elemento debe estar arriba. Para ello se escribe z-index:n, donde n
es un número que indica el nivel de los elementos en una pila de objetos. Cuanto mayor es
este número más alto en la pila está el elemento.
En la impresión no se aprecia este orden, pero puede comprobar los resultados si hace:
IMG{position:absolute; left:0; top:0}

IMG.fuera{position:absolute; left:0; top:0; z-index:-1}
En este caso se garantiza que las imágenes de la clase fuera se vean por debajo de todos
los demás elementos.
4.3.3 Ocultar elementos

Se puede estar ocultando o mostrando los elementos en función del navegador del
usuario, de las preferencias del lenguaje o de otros criterios. También se puede visualizar
en línea o a nivel de bloque o visualizar un elemento como un ítem de una lista, aunque sin
usar la directiva LI.
Para indicar como se deben visualizar los elementos se dispone de display, con las
opciones:
• none, para esconder los elementos dados.
125
4 Estilos y capas
• block, para visualizar los elementos como si fueran a nivel de bloque

(comenzando en un nuevo párrafo).
• inline, para visualizarlos como si fueran en línea (sin comenzar en otro

párrafo).
• list-item, para visualizarlos como si fueran items de una lista (como si se

usara la directiva LI).
4.3.4 Propiedades
Se pueden controlar el relleno, los bordes y los márgenes de los elementos.
Para poner un borde se utiliza border, puediéndose añadir (sin espacio) -top (borde
arriba), -bottom (borde abajo), -left (borde a la izquierda), -right (borde a la
derecha). La anchura del borde se puede indicar con thin, medium o thick o con un
valor absoluto (p.e. 3px), el valor por defecto es medium. El estilo de los bordes se indica
con none (ninguno) dotted, dashed, solid, double, groove, ridge, inset o
outset. También se puede indicar el color escribiendo uno de los nombres de colores de
la Tabla 2-4.
Se puede definir cualquier parte del borde por separado, por ejemplo, se puede utilizar
border-right-width:3 para poner el borde de la derecha, o
border-color:yellow para indicar que los cuatro bordes se pongan de color
amarillo. Si no se indica el color del borde, el navegador utilizara el color que esté indicado
para el contenido del elemento.
Para añadir el relleno entorno a un elemento se utiliza padding, y al igual que para los
bordes, se puede indicar para cada uno de los lados escribiendo -top, -bottom, -left
o -right. El espacio de relleno que se quiere se indica con :n, donde n es el espacio de
relleno expresado en unidades o en un porcentaje de elemento padre.
Para poner los márgenes (que es el espacio transparente entre un elemento y el siguiente,
añadido fuera del relleno y el borde) se escribe margin, y opcionalmente también se
puede añadir -top, -bottom, -left o -right. La cantidad de margen deseada se
indica con :n.
También se puede indicar la altura y la anchura para muchos elementos, incluyendo las
imágenes. Si se tienen varios elementos en una página que son del mismo tamaño, se puede
poner simultáneamente la altura y la anchura para los mismos. Para ello se pone width:n
y height:m donde n y m son la anchura y la altura que se define.
El siguiente ejemplo (Figura 4-19) muestra la utilización de estas propiedades:
<STYLE>
IMG{position:relative; left:0; top:0; border:thick solid red}
IMG.fuera{position:relative; left:0; top:0; border: medium
double green; margin-left:30}
H1 {padding:15; margin:25}
</STYLE>
</HEAD>
<BODY>
<BODY>
<DIV STYLE=”position:relative; left:100; width:200”>
126
4.3 Capas

mismos
<H1>Esotérico</H1>
Figura 4 19: Cambios de las propiedades de anchura, relleno, bordes y márgenes
Otra propiedad que resulta interesante controlar es permitir que el texto envuelva a los
elementos. Por ejemplo, se puede querer que las imágenes (o cualquier otro elemento)
queden siempre envueltas por el texto, o que nunca estén, o que sólo lo estén por un lado
(izquierdo o derecho). Para ello se dispone de float:left, en este caso el elemento
queda a la izquierda y el texto fluye a su derecha, o float:right, el elemento queda a la
derecha y el texto fluye a su izquierda. El ardid para que el texto fluya entre los elementos
es poner siempre la imagen directamente antes del texto que debe fluir a continuación.
Cuando se hace que el texto fluya entorno a las imágenes con directivas de HTML se
puede poner un salto de línea para que separe el flujo de texto. Con las hojas de estilo se
puede marcar una directiva en particular de forma que los otros elementos (como el texto)
no puedan fluir entorno a él. Para ello se dispone de clear:left (para parar el flujo
hasta que el lado izquierdo esté limpio de todos los elementos), clear:right (ídem
pero el lado derecho), clear:both (parar el flujo hasta que ambos lados estén limpios) y
clear:none para continuar el flujo.
En el siguiente ejemplo (Figura 4-20) se muestra como controlar el flujo de texto entorno
a diferentes elementos:
127
4 Estilos y capas
<STYLE>
IMG{position:relative; left:0; top:0; border:thick solid red;
float:left}
double green; margin-left:30; float:right; clear:right}
</STYLE>
</HEAD>
<BODY>
<BODY>
mismos
<H1>Esotérico</H1>
...
Figura 4 20: Control del flujo del texto entorno a las figuras
Para cambiar el color de cualquier elemento, incluyendo líneas horizontales, formularios

y tablas se puede utilizar:
color:codcol
128
4.3 Capas
Donde codcol puede ser:
• el nombre de uno de los dieciséis colores predefinidos de la Tabla 2-4 .
• #rrggbb, donde rrggbb es la representación hexadecimal del color

deseado.
• rgb(r, g, b) donde r, g, b son enteros entre 0 y 255 que indican la

cantidad de rojo, verde y azul, respectivamente, que se mezclan para dar el
color que se desea.
• rgb(r%, g%, b%) donde r, g, b indican el porcentaje de rojo, verde y azul

que se mezcla para dar el color deseado.
Tener en cuenta que si se ponen valores mayores de 255 (o porcentajes mayores al

100%) estos son reemplazados por 255 (o por el 100%).
También se debe considerar que si bien podemos cambiar el color de un texto, en cambio
no podemos cambiar de esta forma el color de una imagen (esto habría que hacerlo desde
un programa de dibujo). Lo que si se puede hacer es cambiar el color de fondo de la
imagen.
Para cambiar el fondo de cualquier elemento, incluyendo imágenes, formularios y
tablas, se utiliza:
background:colfondo
Donde colfondo es:
• transparent.
• el nombre de un color de la Tabla 2-4 o el código en hexadecimal del color.
• url(imagen.gif), donde imagen.gif es una imagen que se utilizará

como fondo. Se puede añadir repeat para repetir la imagen tanto
horizontalmente como verticalmente, repeat-x para repetirla
horizontalmente y repeat-y para repetirla verticalmente, y no-repeat
para no repetir la imagen. También se puede indicar si se quiere que la imagen
de fondo se pueda enrollar con scroll o fixed. Y para fijar la posición de
la imagen de fondo se pueden indicar las coordenadas x y o los valores top,
center o bottom para la x y left, center y right para la y.
El cambio de color no se aprecia en la impresión, por ello se recomienda que pruebe en

su ordenador el siguiente ejemplo:
<STYLE>
IMG{position:relative; left:0; top:0; border:thick solid red;
float:left}
double green; margin-left:30; float:right; clear:right}
BODY {background:url(fondia.gif)}
P {background:lime; padding: 10}
129
4 Estilos y capas
</STYLE>
</HEAD>
<BODY>
<BODY>
mismos
<H1>Esotérico</H1>
...
Si se hace la caja de un elemento más pequeña que su contenido (p.e. con height y
width esto es posible), habrá parte de ese contenido que no se vea, con la propiedad
overflow se puede indicar donde debe ir esta parte sobrante. Los valores que puede
tomar son:
• visible, para ensanchar la caja de forma que encaje con el contenido.
• hidden, para ocultar cualquier contenido que no encaje con la caja.
• scroll, para añadir unas barras de desplazamiento al elemento.
Otra propiedad interesante es la posibilidad de crear una ventana que sólo deje ver una
parte del documento. Por ahora la ventana debe ser rectangular, pero la idea es permitir
otras formas. Para ello se escribe:
clip:rect(t r b l)
Donde t r b l son las coordenadas superior, derecha, abajo e izquierda de la porción

rectangular de elemento que se quiere ver (Figura 4-21), estos valores pueden ser absolutos
(p.e. 20 px) o relativos (15 em). Los elementos se tienen que posicionar en forma absoluta.
Hay que tener en cuenta que clip no sólo afecta al contenido, sino también al relleno y a
los bordes.
130
4.3 Capas
b=100 pixels
t=0 pixels
l=80 pixels
r=180 pixels
Figura 4 21: Ejemplo de valores para clip
Se pueden especificar propiedades de listas, hay varios estilos para listas no numeradas y
para listas numeradas. Para poner las propiedades de la lista se utiliza:
list-style:valor
Donde valor es:
• disc para marcar los ítems de la lista con un círculo negro
• circle si se quiere que sea un círculo vacío
• square para usar un cuadrado
• decimal para numeración arábiga (1, 2, 3, ...)
• lower-alpha para que la numeración sea con letras minúsculas (a, b, c, ...)
• upper-alpha ídem pero con letras mayúsculas (A, B, C, ...)
• lower-roman para que la numeración sea con números romanos en

minúsculas (i, ii, iii, iv,...)
131
4 Estilos y capas
• upper-roman ídem pero en mayúsculas (I, II, III, IV, ...)
• url(imagen.gif) para usar la imagen de imagen.gif como marca de

los ítems de la lista.
Como opciones se puede poner outside para que las marcas esten a la izquierda de los
ítems de la lista o inside para alinear las marcar a las otras líneas de otros párrafos de la
lista.
Por último indicar como se pueden especificar donde se quiere tener un salto de página.
Esto es útil sobre todo cuando se quiere imprimir la página.
Para indicar un salto de página después de un directiva:
page-break-after:always
Para indicar un salto de página antes de una directiva:
page-break-befor:always
Para eliminar los saltos de página:
page-break-after:auto
page_break_befor:auto
132
5 Elementos y directivas del
Tema
lenguaje HTML
En este tema se hace una introducción a todos los elementos del lenguaje HTML. El
objetivo es poder utilizarlo como un manual de referencia a los mismos. Al lado de cada
directiva se ha puesto:
H4: Si es una definición estándar de HTML 4.
IE: Si es específica de Internet Explorer
N: Si es específica de Netscape.
N+IE: Si es común a Netscape e Internet Explorer pero no es estándar.
Se han indicado los atributos de cada directiva. Si en una directiva estándar de Html 4
Microsoft o Netscape han añadido algún atributo específico de ellos esto se ha indicado
poniendo delante del atributo:
• IE • Si es de Internet Explorer.
• N • Si es de Netscape.
• N+IE • Si es común a Netscape e Internet Explorer pero no es estándar.
5.1 Atributos comunes a diferentes directivas

Los siguientes atributos se pueden utilizar con diferentes directivas:
• CLASS: Marca un conjunto de elementos de una página como pertenecientes

a una clase para poderles aplicar estilos.
• EVENT: Corresponde a un evento intrínseco como los definidos en la Tabla

5-1.
• ID: Identifica a unas directivas en concreto para utilizarlas en funciones de

JavaScript o en estilos.
133
5 Elementos y directivas del lenguaje HTML
• STYLE: Añade información de la hoja de estilo local.
EVENTO Directivas con las que funciona Cuando funciona
ONBLUR A AREA BUTTON INPUT LABEL Cuando el visitante sale de un elemento que pre-
SELECT TEXTAREA viamente focalizó (ver FOCUS)
ONCHANGE INPUT SELECT TEXTAREA El visitante modifica el valor o contenido del

elemento
ONCLICK Todos excepto: APPLET BASE BASE- El visitante pulsa en el área indicada
FONT BR FONT FRAME FRAMESET
HEAD HTML IFRAME META PARAM
SCRIPT STYLE TITLE
ONDBLCLICK Igual que ONCLICK El visitante pulsa dos veces en el área indicada
ONFOCUS A AREA BUTTON INPUT LABEL El visitante selecciona, pulsa o accede con el
SELECT TEXTAREA tabulador al elemento indicado
ONKEYDOWN INPUT (de tipo NAME o PASSWORD) El visitante escribe algo en el elemento indicado
TEXTAREA
ONKEYPRESS INPUT (de tipo NAME o PASSWORD) El visitante escribe algo en el elemento indicado
TEXTAREA
ONKEYUP INPUT (de tipo NAME o PASSWORD) El visitante deja la tecla después de escribir en el
TEXTAREA elemento indicado
ONLOAD BODY FRAMESET La página se carga en el navegador
ONMOUSEDOWN Igual que ONCLICK El visitante presiona el botón del ratón bajando
sobre el elemento
ONMOUSEMOVE Igual que ONCLICK El visitante mueve el ratón sobre el elemento

especificado después de haberlo apuntado
ONMOUSEOUT Igual que ONCLICK El visitante mueve el ratón hacia afuera del ele-
mento indicado después de haber estado en él
ONMOUSEOVER Igual que ONCLICK El visitante apunta con el ratón al elemento
ONMOUSEUP Igual que ONCLICK El visitante levanta el botón del ratón después de
haberlo pulsado
ONRESET FORM (sin INPUT del tipo RESET) El visitante pulsa el botón de reset del formu-
lario
ONSELECT INPUT (de tipo NAME o PASSWORD) El visitante selecciona uno o mas caracteres o
TEXTAREA palabras en el elemento
ONSUBMIT FORM (sin INPUT del tipo SUBMIT) El visitante pulsa el botón de envio del formu-
lario
ONUNLOAD BODY FRAMESET El navegador carga una página diferente después

de que la página indicada se ha cargado
Tabla 5-1: Eventos
5.2 A: Anclas de hipertexto H4

Un ancla es una parte de texto o algún otro objeto (por ejemplo una imagen) que marca el
comienzo y/o el final de un enlace de hipertexto. El elemento <A> se utiliza para marcar
esta parte de texto y dar su relación hipertextual con otros documentos. El texto entre las
directivas de apertura <A> y terminación </A> puede ser el comienzo o el destino (o
134
5.2 A: Anclas de hipertexto H4
ambas cosas) de un enlace.

Por ejemplo:
El enlace al <A HREF="http://www.dia.uned.es/">Departamento de

Informática y Automática</A> puede ser hecho con
una figura o icono como:
<p><A HREF="http://www.dia.uned.es/"><IMG
SRC="escudo.gif"></A>
Los atributos permitidos son:
• ACCESSKEY: Permite que el enlace se active mediante una combinación de

teclas.
• HREF: Marca el ancla como el comienzo de un enlace a otro documento o

recurso (por ejemplo un archivo con una imagen) o a un lugar determinado en
otro documento. El destino se expresa con un URL (Uniform Resource
Locator) absoluto o relativo. Por ejemplo, HREF puede utilizar http: para
acceder a otros documentos HTML, imágenes, etc o puede utilizar ftp: o
ghopher:. También puede indicar una conexión telnet:.
Los ULR’s parciales o relativos son comunes en conjuntos de documentos

dentro de un servidor http, pero también se pueden emplear para acceder a
cualquier servidor.
Ejemplos de valores dados a HREF son:

<A HREF=”http://www.dia.uned.es/personal/personal.html”>
es un enlace al documento HTML especificado en el servidor indicado

(www.dia.uned.es).
<A HREF=”ftp://ftp.dia.uned.es/research/ins/sensores.Z”>
corresponde a un acceso FTP al archivo comprimido (sensores.Z) en el

servidor indicado (ftp.dia.uned.es).
<A HREF=”../matlab95/ponencias.html”>
corresponde a una referencia relativa. El documento HTML se encuentra en el

mismo servidor.
<A HREF=”telnet://smaug.dia.uned.es”>
es una conexión telnet a la máquina smaug.dia.uned.es.
También se puede hacer referencia a lugares determinados de un documento.

Estos puntos se pueden marcar como destinos de los enlaces hipertexto
mediante el atributo NAME. Por ejemplo, un lugar en un documento se puede
marcar como:
<A NAME=”Direccion”>Dirección de correo</A>
Y un enlace a este lugar sería:
135
<A HREF="#Direccion">Dirección</A>
• NAME: Este atributo marca al ancla como un posible destino de un enlace

desde otro documento o desde algún otro lugar del mismo documento. El
valor asignado a NAME debe ser un nombre simbólico.
Un ejemplo típico de NAME se ha dado anteriormente (al final del atributo

HREF).
Un enlace a la ubicación de
<A NAME=”Direccion”>Dirección de correo</A>
en el documento home.html desde otro documento es:

<A HREF=”home.html#Direccion”>Dirección</A>
• EVENT: Corresponde a un suceso de los indicados en la sección 5-1.
• TABINDEX: Para dar un orden de selección de los enlaces de una página

cuando se pulsa la tecla de tabulador. Toma valores entre 0 y 32767:
TABINDEX=n.
Por defecto, el orden en el que se van seleccionando los elementos cuando se

pulsa la tecla de tabulador depende de la posición de los mismos en la página.
Cuando se cambia este orden con TABINDEX, el elemento con el número más
bajo es el que se activa primero. Si dos elementos tienen el mismo número de
índice para el tabulador, se accede según su situación en la página.
• TARGET: Este atributo indica el objetivo (destino) del enlace, pudiéndose

indicar que el enlace se abra en una nueva ventana.
Ejemplo:
<A HREF=”pagina1.html” TARGET=otraventana>
5.3 ADDRESS H4
El elemento ADDRESS se utiliza para dar información del tipo de dirección, firma, autor,
etc. Generalmente se sitúa en la parte superior o inferior del documento. La interpretación
depende del navegador (se suele interpretar poniendo su contenido en cursiva). También se
puede justificar a la derecha o estar sangrado.
Un elemento ADDRESS no puede contener elementos P, BLOCKQUOTE, FORM u otros
elementos de bloques, pero si puede contener texto, marcas de texto, elementos de ancla e
incluso imágenes.
5.4 APPLET H4
Los “applets” son programas escritos en el lenguaje Java, que pueden ser incrustados
dentro de los documentos HTML y ejecutados. Esta incrustación se hace con el elemento
136
5.5 AREA H4
APPLET; los parámetros necesarios por el “applet” se pasan con los elementos PARAM.
Por ejemplo:
<APPLET CODE=”simcal” WIDTH=200 HEIGHT=200>

<PARAM NAME=”caudal” VALUE=”20”>
<PARAM NAME=”presion” VALUE=”1”>
</APPLET>
En este caso, el atributo CODE indica la aplicación que se quiere ejecutar, los atributos
WIDTH y HEIGHT dan el espacio necesario (en pixels) y los elementos PARAM, dentro de
APPLET, contienen los parámetros que se emplean. En PARAM, el atributo NAME indica el
nombre del parámetro y el atributo VALUE el valor del mismo.
5.5 AREA H4
Dentro del elemento MAP está el elemento AREA que define un área en la que se puede
pulsar para navegar a través de los enlaces que se le asocian.
• SHAPE: Que indica la forma de las zonas “calientes”: rect para un rectángulo,
circle para un círculo y poly para una forma irregular.
• COORDS: Si la forma es rect, su valor es “x1,y1,x2,y2” que corresponde

a las coordenadas de la esquina superior izquierda e inferior derecha. Si la
forma es circle, su valor es “x,y,r” donde x,y son las coordenadas del
centro y r es el radio del círculo. Si la forma es poly, su valor es
“x1,y1,x2,y2,x3,y3,...” que representan las coordenadas de cada
uno de los vértices del polinomio.
• HREF: Cuyo valor es el URL de la página que debe cargarse cuando se pulsa
sobre este área.
• HOHREF: Si se quiere que al pulsar no se produzca ningún resultado.
• TARGET: Su valor es el nombre de la ventana donde debe aparecer la página.
• ACCESSKEY: Combinación de teclas que activan el enlace asignado a esta

área.
Ejemplo:
<MAP NAME=”un_nombre”>
<AREA SHAPE=”rect” COORDS=”x1, y1, x2, y2” HREF=”url_region”>
<AREA SHAPE=”circle” COORDS=”x1, y1, r” HREF=”url_region”>
<AREA SHAPE=”polygon” COORDS=”x1, y1, x2, y2, ...”
HREF=”ul-region”>
</MAP>
137
5.6 B: Negrita H4
El texto entre <B> y </B> se visualiza en negrita.
5.7 BASE H4
El elemento BASE permite recordar el URL original del documento en aquellas
situaciones en las que su lectura se hace fuera de contexto. Un ejemplo puede ser cuando el
documento se mueve de su posición original. Los URL’s dentro del documento pueden ser
relativos a su dirección base, que por defecto es el URL utilizado para obtener el
documento.
Los atributos permitidos son HREF y TARGET, con la misma función que tienen en la
directiva A.
Por ejemplo, si la base es:
<BASE HREF=”http://www.dia.uned.es/cursos/internet.html”>
Y se hace referencia a una imagen:
<img src=”imagenes/prof.gif”>
Esta se encontrará en:
“http://www.dia.uned.es/cursos/imagenes/prof.gif”.
5.8 BASEFONT H4
Selecciona un tamaño para todo el texto del cuerpo. Los atributos permitidos son:
• COLOR: Indica el color por defecto del texto
• FONT: Indica la fuente de texto utilizada por defecto.
• SIZE: Indica el tamaño del texto por defecto.
<BASEFONT SIZE=”n”>
5.9 BGSOUND IE
Enlaza a un sonido que es reproducido automáticamente cuando se visita la página.
Los atributos que acepta son:
• LOOP: Para indicar cuantas veces se repite el sonido, si el valor que se pone es
LOOP=-1 o LOOP=infinite el sonido se repite ininterrumpidamente
mientras se esté en la página.
138
5.10 BIG H4
• SRC: Indica el URL del fichero con el sonido que se reproduce.

BGSOUND reconoce los formatos de sonido WAV, AU y MIDI.
<BGSOUND SRC=”sonido.url” LOOP=3>
5.10 BIG H4
Indica que el texto que se encierra entre <BIG> y </BIG> se debe visualizar con un tipo
de carácter mas grande que el actual.
5.11 BLINK N
El texto entre <BLINK> y </BLINK> se resalta haciéndolo parpadear en la pantalla.
5.12 BLOCKQUOTE H4
Este elemento define un bloque de cita que el navegador interpretará de la forma
adecuada, por ejemplo sangrando el texto o poniéndolo en cursiva. BLOCKQUOTE también
provoca un salto de párrafo y generalmente fuerza espacios en blanco tanto antes como
después de la cita.
5.13 BODY H4
Dentro del elemento BODY está todo el contenido del documento, al contrario que en el
HEAD que sólo contiene información sobre él. En el cuerpo se permiten distintas marcas de
elementos para indicar cabeceras, párrafos, listas, enlaces de hipertexto, imágenes, etc.
Se permiten los siguientes atributos:
• ALINK, LINK, VLINK: Especifica los colores de los enlaces activos, nuevos
y visitados. Pueden tomar como valor la representación hexadecimal
(“#rrggbb”) del color deseado o uno de los 16 colores predefinidos.
• BACKGROUND: Especifica un archivo (el URL del mismo) de una imagen

utilizada como fondo del documento. Esto permite dar una apariencia distinta
a los documentos. Cuando se ponga un fondo hay que ajustar el color del texto
para conseguir un contraste adecuado que facilite su lectura.
• BGCOLOR: Especifica el color del fondo. Puede tomar como valor la

representación hexadecimal (“#rrggbb”) del color deseado o uno de los 16
colores predefinidos.
• IE • LEFTMARGIN, TOPMARGIN: Especifican los márgenes izquierdo y

superior.
• TEXT: Especifica el color del texto. Puede tomar como valor la

representación hexadecimal (“#rrggbb”) del color deseado o uno de los 16
colores predefinidos.
139
Por ejemplo:
<BODY BGCOLOR=”#000000” TEXT=”#FFFFFF” ALINK=”#616161”

VLINK=”#242424” LINK=lime>
5.14 BR Salto de línea H4

El elemento salto de línea (BR) indica que en un punto determinado comienza una nueva
línea. Se utiliza junto con el elemento de tabulación para tener un mayor control de como el
navegador interpreta el texto.
Acepta el atributo CLEAR el cual indica que el texto no debe comenzar hasta que esté
libre el margen indicado, es una forma de evitar que el texto fluya entorno a una imagen.
Los valores que puede tomar son: left, right y all.
5.15 BUTTON H4
Directiva para crear botones en un formulario.
Los atributos que puede tomar son:
• ACCESSKEY: Para indicar una combinación de teclas que seleccionen al

botón.
• EVENT: Asocia un script al botón. Ver 5.1.
• NAME: Identifica el botón con un nombre.
• STYLE: Para especificar la fuente de texto, el tamaño y el color del texto del
botón.
• VALUE: Especifica la clase de botón de la que se trata: submit, reset.
Por ejemplo:
<BUTTON TYPE=”reset” NAME=”reset” VALUE=”reset” STYLE=”font:

24pt Arial; background:lime><IMG SRC=”dibres.gif”> Reset
</BUTTON>
5.16 CAPTION H4
Con la directiva CAPTION se pone un título a una tabla. Esta directiva irá dentro de
TABLE.
Como atributo acepta ALIGN que indica el alineamiento del título de la tabla, toma los
valores: top, bottom, left o right.
Por ejemplo:
<TABLE>
<CAPTION ALIGN=bottom>El título de la tabla</CAPTION>
... el resto de la tabla ...
</TABLE>
140
5.17 Caracteres especiales H4
5.17 Caracteres especiales H4

Los caracteres que hay entre las directivas representan la codificación del texto de
acuerdo con el conjunto de caracteres gráficos de 8 bits ISO 8859/1, conocido como
Alfabeto Latino No. 1, o simplemente Latin 1. Consiste de 256 caracteres, incluyendo los
caracteres de muchos de los idiomas de la Europa Oriental.
Las primeras 128 posiciones de los caracteres de Latin 1 incluyen un espacio, 33
caracteres de control, las 26 letras mayúsculas y minúsculas del alfabeto inglés, 1os 10
dígitos y otros 32 caracteres imprimibles. Este subconjunto, funcionalmente idéntico al
código ASCII, está definido por el conjunto de caracteres ISO 646 de 7 bits para el
intercambio de información. En muchos aspectos ISO 646 es idéntico al ANSI estándar de
ASCII (American Standard Code for Information Interchange). La diferencia más
significativa entre los dos son los nombres asignados a los caracteres de control que ocupan
las posiciones de 00 a 31 y la 127.
Las 128 posiciones superiores de Latin 1 incluyen un espacio de no salto, un indicador
de guión, 93 caracteres gráficos, 8 caracteres sin asignar y 25 caracteres de control. El
espacio de no salto y el indicador de guión no son reconocidos e interpretados por muchos
navegadores, por lo que se desaconseja su utilización.
Ciertos caracteres puede que no sean accesibles desde el teclado o que algunos
programas del sistema no estén equipados con códigos de caracteres de 8 bits, por esta
razón en HTML y en muchos navegadores se proporcionan unas entidades para los
caracteres y unas referencias numéricas a los mismos, de forma que se facilita su
introducción e interpretación mediante un nombre y su posición numérica.
En el Anexo A de este módulo se da una lista de las entidades para los caracteres de Latin
1 y en el Anexo B una lista de las referencia numéricas a los mismos. Por ejemplo, si se
quiere hacer referencia a la a acentuada (á), se puede poner la entidad á o la
referencia numérica à.
5.17.1 Caracteres especiales

Algunos caracteres tienen un significado especial dentro del contexto de un documento
HTML. Así, los caracteres de espacio y espacio no-salto al interpretarlos los navegadores
tienen los efectos siguientes sobre el formato del texto:
• Espacio: se interpreta como un espacio entre las palabras excepto en <PRE>,

donde se toma como un espacio no-salto.
Las entidades &ensp; y &emsp; indican un espacio “en” y un espacio

“em” respectivamente; donde un espacio “en” es la mitad del tamaño de un
punto y un espacio “em” es igual al tamaño de un punto. Para tipos de
caracteres de ancho fijo, se puede interpretar el espacio “en” como un espacio
de un carácter y el espacio “em” como equivalente al espacio de dos
caracteres.
• Espacio no-salto: corresponde a la entidad y se trata de la misma

forma que el carácter espacio, excepto que los clientes nunca rompen la línea
en este punto. Es útil cuando se quiere asegurar que algunas palabras
permanezcan siempre juntas y no salten de línea.
141
Por otra parte, el indicador de guión se interpreta como un guión en todos los contextos y
como un espacio potencial por los mecanismos de partición de palabras. Las entidades
&endash; y &emdash; indican marcas de guiones con el mismo ancho que &ensp; y
&emsp; respectivamente.
5.17.2 Caracteres de control

Los caracteres de control son caracteres no imprimibles que se utilizan con fines de
comunicación y de control de dispositivos y como separadores de información.
En las aplicaciones SGML, la utilización de los caracteres de control está limitado para
maximizar el intercambio útil entre redes y sistemas operativos heterogéneos. En HTML
se emplean sólo tres caracteres de control. Los 55 caracteres de control restantes no se usan
y no deben aparecer en los documentos HTML. Los caracteres válidos de control y su
interpretación son:
• Tabulador horizontal (HT, código decimal 9): se interpreta como un espacio

en todos los contextos excepto en <PRE>, donde el tabulador se considera
como un desplazamiento horizontal en la misma línea múltiplo de 8.
• Line Feed (LF, código decimal 10): se interpreta como un espacio en todos los
contextos excepto en <PRE>, donde se toma como un desplazamiento al
comienzo de una nueva línea.
• Vuelta de carro (CR, código decimal 13): se interpreta como un espacio en

todos los contextos excepto en <PRE>, donde se entiende como un
desplazamiento al comienzo de la línea.
5.18 CENTER H4
Netscape introdujo este elemento para permitir el alineamiento centrado de bloques de
texto, figuras, etc.
Se puede utilizar con cualquier clase de elementos de HTML, incluyendo párrafos <P>,
cabeceras <H1>, imágenes <IMG>, etc.
Por ejemplo:
<CENTER>
<H2>AMADÍS DE GAULA A DON QUIJOTE DE LA MANCHA</H2>
<H3>SONETO</H3>
<P>
Tú, que imitaste la llorosa vida <br>
Que tuve ausente y desdeñado sobre <br>
El gran ribazo de la peña Pobre, <br>
De alegre á penitencia reducida, <br>
Tú, á quien los ojos dieron la bebida <br>
De abundante licor, aunque salobre, <br>
Y alzándose la plata, estaño y cobre, <br>
Te dió la tierra en tierra la comida, <br>
Vive seguro de que eternamente, <br>
En tanto, al menos, que en la cuarta esfera <br>
Sus caballos aguije el rubio Apolo, <br>
142
5.19 CITE H4
Tendrás claro renombre de valiente; <br>

Tu patria será en todas la primera; <br>
Tu sabio autor, al mundo único y solo.
</P>
</CENTER>
5.19 CITE H4
Indica que el texto entre <CITE> y </CITE> es una cita. Generalmente se interpreta
visualizandolo en cursiva.
5.20 CODE H4
Indica que el texto entre <CODE> y </CODE> es un ejemplo de código de ordenador.
Generalmente se visualiza con un tipo de carácter de anchura fija.
5.21 COL H4
Para dividir una tabla en grupo de columnas no-estructurales.
• ALING: Indica el alineamiento de las columnas en el grupo.
• SPAN: Indica el número de columnas del grupo
Por ejemplo:
<TABLE>
...
<COL SPAN=2>
<TR>...
5.22 COLGROUP H4
Divide una tabla en grupos de columnas estructurales
Los atributos que acepta son los mismos que COL.
Ejemplo:
<TABLE>
<CAPTION ALIGN=left>Título de la tabla</CAPTION>
<COLGROUP SPAN=4 ALIGN=center>
<COL SPAN=3>
<TR>
....
5.23 DD H4
Para escribir una definición dentro de una lista. Ver DL.
143
5.24 DEL H4
Marca un texto como borrado. Generalmente se visualiza cruzando una raya sobre el
texto.
5.25 DIV H4
Divide una página en secciones lógicas. Se utiliza con el atributo CLASS o ID para
identificar distintas clases de bloques.
• ALIGN: Permitir indicar el alineamiento de la sección a la izquierda (left),

derecha (right) o centro (center).
• CLASS: Permite asignar un nombre a cada una de las secciones.
• ID: Permite dar un único nombre a una división en particular.
5.26 DL: Listas de glosario H4

Este tipo de listas también se conoce como listas de definición y son una relación de
términos con sus correspondientes definiciones.
La directiva que abre la lista es <DL>. Opcionalmente puede ir seguida por una cabecera
de lista de la forma:
<CAPTION> Cabecera de la lista </CAPTION>
Los ítems que constituyen la lista se introducen mediante los dos elementos siguientes:
• <DT>: Los términos del glosario.
• <DD>: La definición.
Por ejemplo
<DL>
<LH>Glosario de términos </LH>
<DT>atributo
<DD> Una cualidad característica del elemento,
diferente a la de tipo o contenido.
<DT>browser
<DD> Una herramienta para visualizar documentos HTML.
</DL>
5.27 DT H4
Marca los términos que son definidos en un lista. Ver DL.
144
5.28 EM H4
5.28 EM H4
Para enfatizar un texto. Generalmente se visualiza en cursiva.
5.29 EMBED N+IE

Esta directiva se utiliza para incluir objetos que requieren un “plug-in”. Por ejemplo, una
película QuickTime, una secuencia de música MIDI, etc. Se necesitan diferentes
parámetros dependiendo del tipo de objeto que se utilice, pero la mayoría de las veces se
puede utilizar WIDTH y HEIGHT. En los archivos “READ-ME” (LEEME) puede aprender
como incluir los “plug-ins” en los fuentes HTML. EMBED y los “plug-ins” son directivas
de Netscape, pero se soportan también por Explorer y por Cyberdog.
Si el navegador no soporta el plug-in, entonces se visualiza el texto que hay en la
directiva <NOEMBED>. Con frecuencia se utiliza a continuación de la directiva EMBED:
<NOEMBED><A HREF=...>texto</A></NOEMBED>. Debe terminar con
</NOEMBED>.
• ALIGN: Indica el alineamiento de los controles.
• AUTOSTART: Indica que el sonido o el vídeo se arranque de forma

automática.
• CONTROLS: Visualiza los botones de control: reproducir (play), pausa

(pause) y rebobinar (rewind).
• LOOP: Indica que el número de veces que se tiene que reproducir.
• SRC: Especifica el URL del fichero con el sonido o el vídeo.
• WIDTH, HEIGHT: Indica el tamaño de los controles.
5.30 FIELDSET H4
Agrupa a un conjunto de elementos de un formulario
5.31 FONT H4
Este elemento lo introdujo Netscape para permitir, cuando ello sea posible, controlar el
tamaño del tipo de carácter visualizado. Los tamaños de los tipos de caracteres se definen
en un rango de 1 a 7 (el valor base por defecto es 3). Para ello se utiliza el atributo SIZE
cuyo valor es el tamaño que se quiere para el tipo de carácter, en el rango de 1 a 7, o bien un
valor relativo utilizando los caracteres + y -.
Microsoft añadió el atributo FACE. Con este atributo se especifica la forma del tipo de
carácter. Por ejemplo FACE=”arial” indica que se utiliza el tipo de carácter “arial”.
Los nombres para los tipos de caracteres corresponden a los del gestor de tipos de
caracteres de Windows, de forma que hay que conocerlos y tenerlos instalados para poder
trabajar. Obviamente esto sólo es para PC’s y no funciona en Macintosh ni en sistemas
145
Unix.
En resumen, los atributos permitidos son:
• COLOR: Cambia el color del texto.
• FACE: Cambia la fuente de texto.
• SIZE: Cambia el tamaño del texto.
5.32 FORM H4
Elemento para crear formularios.
Para realizar el formulario, dentro de FORM se utilizan los elementos: INPUT,
TEXTAREA y SELECT, que permiten especificar botones y campos de entrada de texto
mediante INPUT, listas seleccionables mediante SELECT y regiones de entrada de texto
mediante TEXTAREA.
Los datos introducidos en FORM se transmiten a un servidor, y mediante el atributo
ACTION se puede especificar el URL del servidor al que hay que enviar los datos. Además,
el elemento FORM puede seleccionar el método HTTP por el que se envían los datos. El
método GET significa que los datos se añaden al URL como una cadena de consulta,
mientras que el método POST significa que los datos se transmiten como el cuerpo de un
mensaje, al igual que los datos enviados por el servidor al navegador pero en el sentido
opuesto.
Los atributos permitidos en FORM son:
• ACTION: Permite indicar el URL donde se tienen que enviar los datos. Por
defecto, el URL que se supone es el del documento. La forma en que los datos
se envían depende del protocolo de acceso del URL y del valor del atributo
METHOD.
• METHOD: Especifica las variaciones en el protocolo utilizado para enviar el

contenido del formulario. Actualmente toma los valores GET (es el valor por
defecto) y POST. Con el método GET, el contenido del formulario se añade al
URL, después del signo de interrogación. Con el método POST, el contenido
se envía al servidor en el cuerpo del mensaje.
5.33 FRAME H4
Netscape introdujo en la versión 2.0 un nuevo modelo completo de documentos HTML.
Estos son los documentos de marcos (FRAME), en los cuales la pantalla se divide en un
número de “marcos de visión” independientes, cada uno de los cuales contiene su propio
documento HTML.
Un documento de múltiples marcos no contiene un BODY, en su lugar utiliza un
elemento FRAMESET, que define los tamaños, localizaciones y contenidos iniciales de los
marcos individuales.
Por ejemplo:
<FRAMESET ROWS=”15%,70%,15%”>
146
5.33 FRAME H4
<FRAME NAME=”ventna1” SRC=”documento.html”>

<FRAMESET COLS=”50%,50%”>
<FRAME NAME=”ventana2” SRC=”otrodocumento.html”>
<FRAME NAME=”ventana3# SRC=”mipagina.html”>
</FRAMESET>
<FRAME NAME=”ventana4” SRC=”indice.html”>
<NOFRAME>
<BODY ...>
... contenido a visualizar si el navegador no
entiende FRAMESET ....
</NOFRAME>
</FRAMESET>
En este caso, primero se divide la pantalla en tres partes, la de arriba y la de abajo más
estrechas (del 15% de la altura de la pantalla), el resto es para el marco central. La parte de
arriba se denomina ventana1 e inicialmente se carga con el documento
documento.html. El elemento FRAME indica el contenido inicial de la celda, que
puede estar vacía. La segunda parte se divide, por columnas, en dos marcos, llamados
ventana2 y ventana3. Y así el resto.
Una vez que se han denominado los marcos, se puede indicar a las anclas de hipertexto
que devuelvan los datos a un determinado marco. Para hacer esto se emplea el atributo
TARGET en el elemento A. Por ejemplo, si un documento contiene el ancla:
<A HREF=”tudocumento.html” TARGET=”ventana3”>enlace</A>
El navegador coge los datos recibidos y los coloca en la ventana denominada “ventana3”,
tal como se indicó en el enlace.
Si un navegador no soporta marcos, entonces ignora todos los elementos FRAME’s y
visualiza el contenido de NOFRAMES. Por el contrario, si un navegador entiende los
FRAME’s, entonces ignora el contenido de NOFRAMES.
La directiva FRAME se utiliza dentro de la directiva FRAMESET. Puede tener los
siguientes atributos:
• N • BORDER=n: Indica la anchura de los bordes del marco. n es la anchura en

pixels.
• N • BORDERCOLOR=color: Indica el color de los bordes del marco. color

es el color deseado en hexadecimal (BORDECOLOR=”#rrggbb”) o el
nombre de uno de los 16 colores predefinidos.
• FRAMEBORDER: Su valor es yes o no e indica si se visualiza o se oculta el

borde del marco.
• IE • FRAMESPACING=n: Añade espacio entre los marcos. n es el espacio

añadido en pixels.
• NAME: Es el nombre del marco, por ejemplo, es el utilizado en los parámetros

de TARGET para referenciar a un marco en concreto.
• NORESIZE: Evita que el usuario cambie el tamaño del marco.
147
• MARGINHEIGHT, MARGINWIDTH: Asigna, en pixeles, los márgenes

izquierdo y derecho, y superior e inferior de los marcos.
• SCROLLING: Su valor puede ser yes, no o auto. Indica si el marco debe de

tener barras de desplazamiento (“scrolling”). Si se pone auto, las barras de
desplazamiento se utilizaran en caso necesario.
• SRC: Su valor es el URL de la página que se debe situar inicialmente en el

marco.
• TARGET: Indica en que marco se debe de abrir un enlace.
5.34 FRAMESET H4
Define los marcos en los que se divide la ventana. Ver el ejemplo en FRAME.
Los atributos que permite son: BORDER, BORDECOLOR, FRAMEBORDER y
FRAMESPACING cuyos objetivos y valores son los mismos que los indicados en FRAME.
Además se acepta:
• COLS=”a,b”: Indica que la ventana se divide en dos columnas de anchura a

y b respectivamente. En general se pueden indicar tantas divisiones en
columnas como se quieren, La anchura de las columnas se pueden expresar
tanto en un porcentaje del tamaño de la ventana como en pixels.
• ROWS=”a,b”: Idem pero la división se hace por filas.
5.35 Hn H4
HTML permite seis niveles de cabeceras, indicadas como H1, H2, H3, H4, H5,
H6. No se fuerza ninguna jerárquia entre estas cabeceras, aunque por consistencia se
aconseja poner en el nivel superior H1 e ir bajando progresivamente. Por ejemplo:
<H1>Este es el nivel superior de cabecera</H1>

Texto
<H2> Este es el segundo nivel </H2>
Texto
Junto con el elemento cabecera se puede utilizar el elemento DIV para indicar de una
manera explícita la estructura jerárquica del documento, ya que los elementos cabeceras
únicamente ponen el texto pero no realizan ninguna división estructural del documento en
secciones.
Se permite el atributo:
• ALIGN: Las cabeceras se sitúan generalmente a la izquierda. Con el atributo

ALIGN se puede especificar explícitamente el alineamiento horizontal:
align=left: la cabecera se ajusta a la izquierda (es el valor por defecto).
align=center: la cabecera se coloca centrada.
148
5.36 HEAD H4
align=right: la cabecera se ajusta a la derecha.
align=justify: en los casos que sea posible hacerlo, las líneas de

cabecera se justifican a los dos márgenes, si no se puede su efecto es igual que
align=left.
Por ejemplo:
<H1 align=center> Esta cabecera esta centrada </H1>
<H2 align=right> Esta cabecera esta ajustada a la derecha </H2>
5.36 HEAD H4
La cabecera (HEAD) contiene información general, o meta-información, sobre el
documento y su contenido no se visualiza como parte del propio documento. El material
que se visualiza se incorpora en el cuerpo (BODY) del documento. Por este motivo, sólo se
pueden colocar dentro de HEAD elementos como los citados a continuación:
• BASE: Es un registro del URL original del documento.
• LINK: Define las relaciones (enlaces) entre este documento y otros. En un

documento puede haber varios LINK.
• META: Es un contenedor para la metainformación del documento.
• TITLE: Es el título del documento. Este elemento es obligatorio, ya que todos

los documentos deben tener necesariamente un TITLE.
• SCRIPT: Es una extensión introducida por Netscape Inc. a partir de su

versión 2.0, para incluir programas denominados “scripts”, escritos en
Javascript, dentro de un documento HTML.
• STYLE: Es un elemento de HTML introducido en la versión 3.0 que permite

incluir información de las hojas de estilo. Está operativo en el navegador
Arena.
La cabecera de un documento podría tener la siguiente estructura:
<HTML>
<HEAD>
<TITLE> CURSO DE INTERNET </TITLE>
<BASE HREF=”http://www.dia.uned.es/cursos/internet.html”>
<LINK
HREF=”httpd://www.matfun.uned.es/internet/indice.html”
REL=”index”>
</HEAD>
<BODY>
.......
</BODY>
</HTML>
149
5.37 HR: Línea horizontal H4

El elemento HR se emplea para dibujar una línea horizontal que cruce completamente
toda la pantalla. Un ejemplo típico es utilizarlo para separar secciones del texto.
Este elemento está vacío, es decir, no se necesita un </HR>.
Los atributos que se pueden utilizar son:
• ALIGN: Sus valores son: “left”, “right” o “center”: Especifica el alineamiento

de la línea en la página. Por defecto es centrado (center).
• NOSHADE: Dibuja como línea divisoria una barra negra, el valor por omisión
es una barra sombreada.
• SIZE=“n”: Especifica el ancho vertical, en pixels, de la línea divisoria (n es

un entero).
• WIDTH= “n”: Especifica el ancho horizontal en pixels o como un porcentaje

de la anchura de la ventana (n es un entero).
5.38 HTML H4
Identifica un documento como un documento de HTML.
5.39 I H4
Visualiza un texto en cursiva.
5.40 IFRAME H4
Directiva para crear marcos flotantes o en línea. Los atributos que acepta son:
• ALIGN: Su valor es left o right. Indica el alineamiento del marco flotante.
• FRAMEBORDER: Su valor es 1 o 0. Muestra u oculta los bordes del marco.
• NAME: Especifica el nombre del marco flotante, este nombre se puede utilizar
en un atributo TARGET.
• WIDTH, HEIGHT: Especifica el tamaño, anchura y altura, del marco.
• SCROLLING:. Su valor puede ser yes, no o auto. Indica si el marco debe de

tener barras de desplazamiento (“scrolling”). Si se pone auto, las barras de
desplazamiento se utilizaran en caso necesario.
• SRC: Su valor es el URL de la página que se debe situar inicialmente en el

marco.
150
5.41 IMG H4
5.41 IMG H4
El elemento IMG se usa para insertar una imagen dentro de un documento HTML. El
propósito es permitir que se incluyan dibujos, figuras y similares dentro de un documento y
se presenten con el texto, sin que se tenga que tener un enlace hipertexto que recupere la
imagen y la visualice en otra ventana. Este elemento no es adecuado para incluir otro texto
HTML dentro del documento.
Las imágenes se pueden incluir en un ancla de hipertexto, de esta forma se puede hacer
que funcionen como botones de enlace a otros documentos o recursos.
El elemento IMG está vacío, es decir, no tiene la directiva de terminación </IMG>.
Acepta los siguientes atributos:
• ALIGN: Este atributo opcional le indica al navegador como alinear la imagen

con el texto adyacente. Acepta los valores:
texttop: la imagen se alinea con el texto más alto que se tenga en la línea.
top: la imagen se alinea con el elemento más alto que se tenga en la línea.
middle: el centro de la imagen queda alineada con la línea base del texto.
absmiddle: el centro de la imagen queda alineado con el ítem más grande.
bottom: la parte inferior de la imagen se alinea con la parte inferior del texto.
absbottom: la parte inferior de la imagen se alinea con la parte inferior del

elemento más grande.
Si se quiere que el texto “fluya” en torno a la imagen se pueden usar los

valores left (para que la imagen se mantenga en el lado izquierdo) y right
(para que se mantenga en el lado derecho).
• ALT (texto alternativo): Algunos navegadores no pueden mostrar imágenes.

Con este atributo opcional se permite especificar un texto alternativo que se
visualiza en entornos de sólo texto. Si la imagen es un botón de enlace, es
conveniente incluir un texto alternativo, por ejemplo ALT=“texto
alternativo a la imagen”.
• BORDER: Especifica la anchura del borde. BORDER=”0” indica que no se

ponga ninguno.
• IE • CONTROLS: Visualiza u oculta los controles de vídeo.
• IE • DYNSRC: Especifica el URL del archivo de vídeo.
• HEIGHT: Es opcional e indica una altura para la imagen. Por defecto, su valor
está dado en pixels. Por ejemplo: HEIGHT=”30” representa una altura de 30
pixels para la imagen. Está soportado por muy pocos navegadores, entre ellos
Netscape.
151
• HSPACE: Especifica el espacio horizontal, en pixels, que hay que dejar entre
la imagen y los elementos que la rodean. Por ejemplo: HSPACE = “3”.
• ISMAP: Este atributo identifica una imagen como un “mapa”, de forma que
pulsando en distintas partes de la misma, las acciones son distintas.
Conceptualmente esto se hace creando en el servidor HTTP una relación entre
ciertas regiones y las acciones correspondientes. Estas regiones se pueden
especificar como cajas, círculos o polígonos. Cuando se pulsa sobre la
imagen, las coordenadas de la pulsación se envían a un programa del servidor
que mira en la base de datos la acción asociada a estas coordenadas. A
continuación, el programa devuelve un mensaje al navegador indicándole a
que documento debe acceder.
• IE • LOOP: Especifica el número de repeticiones del fichero vídeo.
• N+IE • LOWSRC: Indica que se trata de un archivo de imagen de baja

resolución. Su sintaxis es igual que la de SRC. Un navegador como Netscape
carga primero el archivo de la imagen de baja resolución especificado por
LOWSRC y luego el especificado por SRC.
• SRC: Este atributo especifica el URL del documento de la imagen. Su

presencia es obligatoria. Su sintaxis es la misma que la del atributo HREF de
la directiva <A>.
• IE • START: Indica cuando debe empezar a reproducirse el vídeo.
• USEMAP=”#label”: Indica el mapa que se utiliza con la imagen .
• VSPACE: Define el espacio vertical, en pixels, que hay que dejar entre la
imagen y los elementos que la rodean.
• WIDTH: Análogo a HEIGHT, representa una anchura para la imagen.
5.42 INPUT H4
Es utilizado para especificar las entradas de un formulario. Los atributos que tiene son:
• ACCESSKEY: Indica el conjunto de teclas con las que se puede seleccionar

esta entrada.
• CHECKED: Para botones de tipo RADIO o CHECKBOX, indica que han sido
comprobados.
• DISABLED: Para desactivar elementos del formulario
• EVENT: Para ejecutar un “script” cuando ocurra algún evento como

ONFOCUS, ONBLUR, etc.
152
5.43 INS H4
• MAXLENGTH: Es el número máximo de caracteres que se pueden introducir en

un texto.
• NAME: Su valor es el nombre de este ítem, tal como se transmite al programa

(“script”) de la pasarela (gateway). Forma parte de un par nombre/valor.
• SIZE: Es el tamaño, en caracteres, del texto.
• SRC: Es el URL del archivo fuente de la imagen.
• READONLY: Indica que el visitante no puede cambiar su valor.
• TABORDER: Indica el orden en el que se recorren los elementos cuando se

pulsa la tecla de tabulador.
• TYPE: Especifica el tipo de entrada. Sus posibles valores son: CHECKBOX,

HIDDEN, RADIO, RESET, SUBMIT, TEXT o IMAGE.
• VALUE: Para un texto es su valor por defecto, para un botón de tipo RADIO o
CHECKBOX es el valor enviado con el formulario; para botones de envío
(SUBMIT) o de “reset” es la etiqueta del propio botón.
5.43 INS H4
Marca un texto como insertado, como por ejemplo se hace en un documento legal.
Generalmente se visualiza subrayado.
5.44 KBD H4
Marca un texto como de tipo teclado.
5.45 LABEL H4
Se utiliza para etiquetar partes de un formulario. Necesita el atributo FOR cuyo valor es
el valor del atributo ID del correspondiente elemento del formulario.
5.46 LAYER N
Permite posicionar elementos Puede tener los atributos:
• ID: Cuyo valor es un identificador que luego se puede utilizar en programas

de JavaScript.
• TOP=m: donde m es el número de pixels que el elemento se debe desplazar

desde el borde superior de la ventana.
• LEFT=n: donde n es el número de pixels que el elemento se debe desplazar

desde el borde izquierdo de la ventana.
153
• WIDTH=w: Donde w es la anchura en pixels.
• HEIGHT=h: Donde h es la altura en pixels.
• SRC: De forma opcional se puede indicar el URL de un documento que

inicialmente aparecerá en el recuadro definido.
• CLIP=”t,l,r,b”: que corresponde al “offset” en pixels correspondientes

al borde superior, izquierdo, derecho e inferior.
• BGCOLOR: Cuyo valor es uno de los 16 colores predefinidos.
• BACKGROUND: cuyo valor es una imagen que se utiliza de fondo.
5.47 LEGEND H4
Etiqueta una parte de un formulario. La etiqueta va entre <LEGEND> y </LEGEND>. Se
puede utilizar el atributo ALIGN para indicar el alineamiento de la etiqueta.
5.48 LI H4
Directiva con la que se introduce cada uno de los ítems de una lista (ver OL y UL).
• TYPE: Para indicar que símbolo se utiliza al comienzo de cada ítem.
• VALUE: Indica el valor inicial del primer ítem de la lista.
5.49 LINK H4
El elemento LINK indica una relación entre el documento y algún otro objeto o
documento. Por tanto, un documento puede tener cualquier número de elementos LINK
para indicar todos los posibles enlaces entre el documento y los objetos o documentos
relacionados.
El elemento LINK está vacío (es decir, no tiene la directiva de terminación </LINK>).
Entre sus atributos están:
• HREF: Es el URL del documento
• REL: Indica las relaciones definidas por el enlace. Si es una hoja de estilo, su
valor será REL=stylesheet.
• TYPE: Indica el tipo de documento. Por ejemplo: TYPE=”text/css”.

Una de las utilizaciones mas corrientes de LINK es para indicar la utilización de hojas de
estilo externas.
Por ejemplo:
154
5.50 MAP H4
<LINK REL=stylesheet TYPE=”text/css” HREF=estilos.css>
5.50 MAP H4
Para definir un mapa. Dentro de MAP está el elemento AREA (ver AREA).
Tiene el atributo NAME que es el nombre del mapa.
5.51 MARQUEE IE
Crea textos móviles que flotan sobre la pantalla.
• BEHAVIOR: Indica como se debe mover el texto. Los valores que puede
tomar son: scroll cuando el texto comienza en un lado de la pantalla y
desaparece en el otro, slide el texto comienza en un lado y para cuando alcanza
el otro, alternate el texto comienza en un lado y vuelve atrás cuando alcanza el
otro.
• DIRECTION: Determina en que dirección se moverá el texto, sus posibles

valores son: left, right.
• LOOP: Indica cuantas veces cruzará el texto la ventana.
• SCROLLAMOUNT: Indica, en pixels, la cantidad de espacio que hay que dejar

entre cada dos pases del texto.
• SCROLLDELAY: Indica, en milisegundos, el tiempo que hay que dejar entre

cada dos pases del texto.
5.52 META H4
El elemento META se usa dentro de HEAD para incluir meta-información del documento
que no se define con otros elementos HTML. Esta información la pueden extraer los
servidores/clientes y utilizarla para identificar, indexar y catalogar.
atributos:
• HTTP-EQUIV: Conecta el elemento a una cabecera de respuesta HTTP. Se

puede utilizar para crear saltos automáticos a otras página e indicar el lenguaje
de “script” por defecto.
• NAME: Se usa para nombrar una propiedad como el autor, fecha de

publicación, etc., es decir, para añadir información extra a la página.
5.53 NOBR N+IE

Para mantener en una línea todos los elementos que se encierra entre <NOBR> y
</NOBR>.
155
5.54 NOFRAMES H4
Proporciona un contenido alternativo a los marcos, para cuando estos no son
visualizados. (Ver FRAMES).
5.55 NOSCRIPT H4
Proporciona un contenido alternativo a los script. (Ver SCRIPT).
5.56 OBJECT H4
Aunque todavía no está implementado por los navegadores mas extendidos, la intención
del W3C es reemplazar IMG y APPLETS por esta directiva.
5.57 OL: listas numeradas H4

Definición de listas numeradas. Acepta los atributos:
• TYPE: Que indica el símbolo que se debe utilizar en la lista. Sus valores son: A
para usar letras mayúsculas, a para letras minúsculas, I para números romanos
en mayúscula, i para números romanos en minúsculas, y 1 para números
arabes, este último es el valor por defecto.
• START: Cuyo valor es el valor inicial para los ítems de esta lista.
5.58 OPTGROUP H4
Divide un menú es submenús.
El atributo que acepta es LABEL cuyo valor es la cabecera del submenú.
5.59 OPTION H4
Este elemento indica los posible ítems dentro de SELECT.
• SELECTED: Este atributo indica que por defecto se selecciona esta opción.
• VALUE: Es el valor que se transmite al enviar el formulario, si se selecciona

esta opción.
5.60 P: párrafo H4
El elemento P delimita un bloque de texto como un párrafo. La directiva <P> marca el
comienzo del párrafo y </P> el final, aunque esta última es opcional, ya que un párrafo
termina cuando comienza otro párrafo o una cabecera (H) o un BLOCKQUOTE o una lista o
una tabla o un formulario.
156
5.61 PRE H4
Los elementos párrafos tienen la misma estructura que las cabeceras (Hn), es decir, texto
y marcas a nivel de carácter, tales como resaltar caracteres, imágenes en línea, campos de
formulario y matemáticas.
En general, un navegador coloca los espacios y el sangrado adecuado para indicar el
párrafo. Netscape con frecuencia añade un espaciado vertical extra cuando se termina un
párrafo con </P>. Esto suele resultar molesto con Netscape, pero se puede utilizar como
una característica que permite un control más preciso del espaciado entre un párrafo y el
siguiente elemento (por ejemplo una tabla o una regla horizontal).
Acepta el atributo ALIGN para alinear el párrafo, sus valores son: left, right, center.
5.61 PRE H4
Este elemento se utiliza para visualizar el texto con un tipo de letra como el de máquina
de escribir con ancho fijo. Es útil para presentar texto formateado para un teletipo, o para
un monitor con caracteres de ancho fijo. También es común utilizarlo para presentar
ejemplos de código de ordenador.
Dentro de PRE no se acepta la directiva <P>, pero por robustez, si se encuentra se trata
como un salto de línea. Tampoco se aceptan otros elementos a nivel de bloques como:
cabeceras, listas, figuras o tablas.
En cambio, si se pueden utilizar elementos ancla y los que enfatizan caracteres (EM,
STRONG, B, I, etc.).
WIDTH es un atributo opcional que especifica el número máximo de caracteres que
pueden ser visualizados en una línea. Generalmente se toma por defecto el valor de 80,
aunque esto depende del navegador.
5.62 Q H4
Se utiliza para citas cortas. Generalmente se muestran entre marcas de cita apropiadas al
contexto del idioma. Por ejemplo, con comillas y dobles comillas, que se alternan en citas
anidadas.
5.63 S H4
Al igual que STRIKE, para visualizar texto con una línea que lo cruce.
5.64 SAMP H4
Para visualizar un texto de muestra, en una fuente de caracteres de anchura fija.
5.65 SCRIPT H4
Para añadir “scripts” automáticos a una página, por ejemplo “scripts” de JavaScript.
Los atributos admitidos son:
• CHARSET=code: Donde code es el nombre oficial del conjunto de

caracteres utilizados por el “script”.
157
• LANGUAGE: Indica el lenguaje en el que se escribe el “script”. Aunque en las

especificaciones de HTML 4 se prefiere para ello TYPE.
• SRC: Es el URL del fichero donde está el “script” externo.
• TYPE: Especifica el lenguaje en el que se escribe el “script”.
5.66 SELECT H4
Crea un menú o lista desplegable de posibles ítems.
• NAME: El nombre tal como se pasa al programa (“script”) de la pasarela

formando parte del par nombre/valor.
• MULTIPLE: Permite hacer una selección múltiple de una lista.
• SIZE: El número de elementos que se visualizan. Si se indica SIZE, la

selección se convierte en una lista desplegable. Si no se indica, la selección es
un menú de tipo desplegable.
Dentro de este elemento se incluye el elemento OPTION.
5.67 SMALL H4
Indica que el texto que encierra debe ser visualizado con un tipo de carácter mas pequeño
que el actual.
5.68 SPAN H4
Para crear estilos personalizados para caracteres.
• CLASS=”nombreclase”: Donde nombreclase identifica el tipo de texto.
• ID=”nombreid”: Donde nombreid identifica este texto en particular.
5.69 STRIKE H4
Visualiza el texto con una línea cruzada.
5.70 STRONG H4
Para enfatizar el texto. Generalmente se interpreta visualizando el texto en negrita.
158
5.71 STYLE H4
5.71 STYLE H4
El elemento STYLE se utiliza para dar instrucciones de formato de estilo que se pueden
aplicar a un documento HTML. La forma de hacerlo es por alguno de estos dos medios:
• Encerrando la información entre <STYLE> y </STYLE>.
• Referenciando una hoja de estilos externa mediante directivas de la forma:

<STYLE HREF=”yrl_to_stylesheet”>
5.72 SUB H4
Indica que el texto que encierra debe visualizarse como un subíndice, con un tipo de
carácter más pequeño.
5.73 SUP H4
Indica que el texto que encierra debe ser visualizado como un superíndice, con un tipo de
carácter más pequeño.
5.74 TABLE H4
Para crear tablas.
Las tablas comienzan con un pie de tabla opcional, que se define con el elemento
CAPTION, seguido por una o más filas. Cada fila, definida por el elemento TR, está
formada por una o más celdas; de entre ellas se distinguen las celdas de cabecera, definidas
por TH, y las celdas de datos, definidas por TD. Las celdas se pueden fusionar a lo largo de
las filas y de las columnas. El modelo también proporciona algún soporte para el control de
la apariencia de la tabla, por ejemplo estilos de bordes y de márgenes.
El número de columnas en la tabla está definido por el número de elementos TD y TH. El
número de filas lo define el número de elementos TR.
Las tablas pueden contener gran variedad de cosas tales como cabeceras, listas, párrafos,
formularios, figuras, texto preformateado e incluso tablas anidadas.
Por ejemplo
<TABLE BORDER>
<CAPTION>Pie de la tabla</CAPTION>
<TR><TH>Una cabecera <TH>Otra cabecera <TH>La tercera
cabecera</TR>
<TR><TD>primer </TD> <TD>20%</TD> <TD>40%</TD>
<TR><TD>segundo </TD> <TD>59% </TD> <TD>35%</TD>
</TABLE>
Hay que resaltar varios puntos:
• Por defecto, el contenido de las celdas de las cabeceras se centra, mientras que
el de las celdas de datos se ajusta a la izquierda. Esto se puede modificar con el
atributo ALIGN para las celdas.
159
• Las celdas pueden estar vacías.
• Las celdas pueden ocupar varias filas. En éste caso las celdas contribuyen a la
cuenta de las columnas de cada una de las filas que ocupan, pero sólo aparecen
una vez en la descripción de la tabla en la primera fila que ocupan.
• Si para una fila dada, el número de columnas de la tabla es mayor que el

número de celdas definidas para ésta fila (después de incluir las celdas que
ocupan varias filas), las celdas que faltan hasta llegar al número de columnas
que tiene la tabla se consideran que están en el lado derecho de la tabla y se
interpretan como celdas vacías.
• No es válido tener celdas que se solapen. En estos casos, la interpretación

depende del navegador.
• Los elementos TD y TH generalmente no necesitan una directiva de

terminación. Sin embargo es conveniente ponerla, puesto que puede haber
situaciones que originen cierta confusión. Por ejemplo, el formateador de
tablas de Netscape con cierta frecuencia se confunde si falta la directiva de
terminación. En particular, conviene usar siempre la directiva de terminación
si se tienen tablas dentro de tablas.
• Por defecto, las tablas se dibujan sin bordes. Para dibujar las líneas de los
bordes se tiene que poner el atributo BORDER.
• Por defecto, las tablas se ajustan al margen izquierdo. Para centrar las tablas se
pueden poner dentro del elemento CENTER.
• BGCOLOR: Su valor es el color de fondo, que puede estar dado por su

representación hexadecimal (“#rrggbb”) o por el nombre de uno de los
dieciseis colores predefinidos.
• BORDER: Indica la anchura, en pixels, del borde.
• IE • BORDERCOLOR: Su valor es la representación hexadecimal del color del

borde.
• IE • BORDECOLORDARK: Es el color de sombra del borde (en hexadecimal).
• IE • BORDECOLORLIGHT: Es el color iluminado del borde (en hexadecimal).
• CELLPADING: Especifica la cantidad de espacio, en pixels, entre los

contenidos de las celdas y sus bordes
• CELLSPACING: Especifica la cantidad de espacio, en pixels, entre celdas.
• FRAME: Visualiza los bordes externos, los valores que puede tomar son: void
sin bordes, above un borde sencillo arriba, below un borde sencillo abajo,
160
5.75 TBODY H4
bsides un borde tanto arriba como abajo, vsides bordes a derecha e izquierda,
rbs un borde sencillo a la derecha, lbs un borde sencillo a la izquierda, box o
border bordes en todos los lados.
• N+IE • HEIGHT: Indica en pixels la altura de la tabla.
• RULES: Visualiza los bordes internos. Los valores que puede tomar son: none
ningún borde interno, rows líneas horizontales entre cada una de las filas de la
tabla, cols líneas verticales entre cada columna de la tabla, groups líneas entre
grupos y secciones horizontales tal como se definen con COLGROUP, COL,
THEAD, TBODY, TFOOT.
• WIDTH: Indica el tamaño de la tabla en pixels.
5.75 TBODY H4
Identifica el cuerpo de la tabla. Los atributos que acepta son los de las celdas.
5.76 TD; TH H4
Los elementos TD y TH definen las celdas individuales. Estos elementos también
pueden admitir atributos (iguales que los de TR) para especificar el alineamientos de las
celdas. Cuando se especifican los alineamientos en TD y TH no se tienen en cuenta los
especificados por TR. Los valores por defecto de TD son: ALIGN=”left”
VALIGN=”middle”. Mientras que los de TH son: ALIGN=”center”
VALIGN=”middle”.
Los atributos que se aceptan son:
• ALIGN especifica el alineamiento “horizontal” del contenido de las celdas y

puede tomar los valores: “left”, “center”, “right”, “justify” (justificado a
ambos márgenes) y “char” (alineado a un caracter dado, en este caso se añade
CHAR=”a” donde a es el caracter con el que se alinea).
• BGCOLOR: Indica un color de fondo para la celda, el valor es uno de los

dieciséis colores predefinidos o el código hexadecimal del mismo
(“#rrggbb”).
• COLSPAN: Indica cuantas columnas (contando hacia la derecha) están

ocupadas por la celda.
• NOWRAP: Mantiene el contenido de la celda en una línea.
• ROWSPAN: Indica cuantas filas (hacia abajo) abarca la celda.
• VALIGN: Especifica el alineamiento “vertical” del contenido de las celdas y

puede tomar los valores: “top”, “middle”, “bottom” y “baseline”.
161
• WIDTH, HEIGHT: Indica el tamaño de la celda, anchura y altura, en valores

absolutos en pixels o en tanto por ciento con respecto al tamaño completo de la
tabla.
5.77 TEXTAREA H4
Elemento que se sitúa dentro de un formulario para la entrada de un texto de múltiples
líneas.
• ACCESSKEY: Igual que para INPUT, indica una combinación de letras para
seleccionar este elemento.
• COLS: El número de columnas (caracteres) que se visualizan en el área de este

texto.
• NAME: Al igual que para el elemento INPUT, el valor de este atributo es el

nombre tal como se pasa al programa (“script”) de la pasarela, formando parte
del par nombre/valor.
• ROWS: El número de filas que se visualizan en el área de este texto.
5.78 TFOOT; THEAD H4

Identifican las áreas de pié y cabecera de una tabla.
Acepta como atributo ALIGN con los mismos valores que para TD y TH.
5.79 TITLE H4
Todo documento HTML debe contener el elemento TITLE, que le asigna un título. El
título identificará el contenido del documento en un contexto global, y se puede utilizar en
las listas de “los últimos documentos visitados” y como etiqueta en la ventana que lo
visualiza. Generalmente, los títulos no se visualizan en el texto del propio documento.
El elemento TITLE se sitúa en la cabecera del documento y su longitud es ilimitada,
aunque en algunas aplicaciones los títulos largos se pueden truncar. Por esta razón se
recomienda que tengan menos de 64 caracteres. No se deben utilizar tampoco títulos
excesivamente cortos (como por ejemplo: Introducción), ya que no son significativos.
5.80 TR H4
El elemento TR define una fila de la tabla. Puede tener los atributos siguientes: ALIGN y
VALIGN con los mismos valores que para TD y TH. Los valores por defecto son:
ALIGN=”left” VALIGN=”middle”.
5.81 TT H4
Visualiza el texto con caracteres de máquina de escribir de anchura fija.
162
5.82 U H4
5.82 U H4
El texto que se visualiza está subrayado.
5.83 UL H4
Para crear una lista sin número de orden. Acepta como atributo TYPE cuyo valor es el
símbolo que precede a cada ítem.
5.84 WBR N+IE

Para crear saltos de línea en textos encerrados con la directiva NOBR.
163
164
6 Una guía de escritura de
Tema
documentos HTML
En los temas anteriores se han introducido los elementos y las directivas que componen
los documentos HTML. En otro módulo se presentará un editor para escribir documentos
HTML. Pero tan importante como conocer las directivas y los elementos necesarios para
escribir los documentos HTML y el disponer de un buen editor que nos facilite su
elaboración, es el tener buenas ideas de como estructurarlos y escribirlos. En este tema se
intenta dar una guía para estructurar la información en forma hipertextual para la WWW.
Los comentarios que se hacen sirven en general para cualquier tipo de hipertexto,
aunque se han particularizado para el caso de un hipertexto en red (documentos HTML).
En la primera sección se presenta la estructura general de un hipertexto y la segunda se
centra en dar una serie de consejos para la escritura de los documentos.
6.1 Sobre la estructura general de un hipertexto

Cuando se quiere poner a disposición del público un conjunto de información,
probablemente ya se tiene una estructura de la misma, aunque sea mental. Es muy normal
que esta estructura sea en forma arborescente, con una jerarquía análoga a la de los libros,
es decir, con capítulos, secciones y subsecciones.
Si se tiene esta estructura, manténgala. Ello ayudará a los lectores a estructurar la
información a la que están accediendo y el propio escritor puede utilizarla para organizar
los archivos en directorios.
Conviene tener siempre presente cuál es la audiencia para la que se está escribiendo. No
es lo mismo escribir para gente sin conocimientos previos del tema que para expertos en él.
Si no tienen conocimientos del tema, la estructura que se les presente es la que aprenderán,
pero si tienen conocimientos del tema, ya poseen una organización preconcebida de como
se configura la información del mismo, que puede ser diferente a la del escritor. Por ello es
conveniente que se adopte la estructura de acuerdo con la audiencia a la que va destinada.
Si ésta es variada, por ejemplo dos grupos diferentes, se pueden mantener simultaneamente
estructuras para ambos, utilizando árboles solapados.
Por ejemplo, se puede tener una estructura de tutorial para los lectores novatos y una
estructura de manual de referencia para los expertos, pero la información base de las dos
organizaciones es la misma. En la Figura 4-1 se muestra un esquema de estructura con esta
idea.
165
6 Una guía de escritura de documentos HTML
TUTORIAL MANUAL DE REFERENCIA
Secciones que explican

los conceptos desde el más
fácil al más difícil
Entrada alfabética Entrada según la
al manual función
Ejemplos que aclaran los conceptos
Ejemplo con la utilización

de funciones específicas Sintáxis de cada función
Figura 6- 1: Árboles solapados para dos tipos de audiencia
Por un lado hay un tutorial paso a paso y por otro un manual de referencia. En el nivel
inferior ambas estructuras tienen la misma información. Es análogo a tener varios índices
en un libro. En este caso además, el tutorial puede tener información que no tiene el manual
de referencia.
Otra cuestión a tener en cuenta es el tamaño de la base de datos y de cada documento.
Para evitar la “pérdida en el hiperespacio” (que es frecuente cuando se visitan estructuras
complejas), hay que indicar de alguna forma el tamaño de la base de datos. Una forma
apropiada de hacerlo es proporcionar un listado completo de las entradas (si no es
adecuado darlo en la página inicial, “home page”, se puede dar separadamente). En el
índice de nivel superior se debe anotar cada entrada con el número de documentos que se
encuentran siguiendo esa entrada. Cuando sea posible, una representación visual adecuada
será de gran ayuda al lector, al igual que lo son los visualizadores gráficos, los monitores en
color y las conexiones rápidas.
Notas
Para tener una idea lo más ajustada posible del tamaño de la base de datos propia
conviene no mezclar los enlaces internos con los externos.
Otro punto importante es el tamaño de los documentos. El objeto es que cada documento
cubra un concepto bien definido. No es bueno dividir arbitrariamente un concepto en
varios para tener elementos de información más pequeños. Ni tampoco lo es mezclar
conceptos para hacer documentos más grandes.
Hay dos límites sobre el tamaño máximo de los documentos. Por un lado está el hecho de
que un documento grande se tarda más en transferir y el lector tarda más de lo que piensa en
saltarlo o volver atrás. Por otro lado, es más difícil recorrerlos; si se tienen interfaces
gráficos se pueden desplegar los documentos, mediante una barra de desplazamiento que al
moverla se desplaza también el documento en la pantalla, pero con interfaces textuales esto
no es posible y sólo se presentan algunas líneas. Además, si el documento es muy grande,
aunque se tengan interfaces gráficos, se dificulta mucho su lectura, porque cualquier
movimiento en la barra de desplazamiento causa que el documento se desplace, perdiendo
166
6.2 Sobre la estructura de un documento
el lector la orientación de donde se encuentra.

Las ventajas de un documento grande son que permite una lectura secuencial más
comoda, por supuesto, si se ha escrito para leerse secuencialmente. Por otra parte, necesita
menos enlaces, con lo que los problemas de hacerlos y mantenerlos son menores.
En resumen, para los tamaños de los documentos se pueden tener en cuenta las líneas
siguientes:
• Para menús de acceso a otros documentos o ayudas “en línea” son suficientes
documentos de hasta 24 líneas.
• Para documentos de texto se pueden considerar tamaños de media página a 5

páginas.
Por último, un comentario sobre los documentos que no son propios. Si se necesita hacer
referencia a un documento externo, se puede hacer un enlace a él o mantener una copia del
mismo. Hay razones tanto para hacer una cosa como la otra.
Razones para no hacer copia del documento y hacer un enlace al mismo son las
siguientes:
• Cuando se actualiza el documento, si se tiene una copia hay que tener un

mecanismo que garantice la actualización de la copia, de no ser así se tendrán
copias desfasadas.
• Se puede pensar que la copia es más fácil de acceder, pero esto es relativo.
Puede haber lectores en otros sitios para los que el original está más cerca y
acceden más fácilmente.
Entre las razones para copiarlo están:
• Si es una información transitoria, como una noticia, es mejor tener una copia.
• Si se quiere hacer referencia a una determinada versión de algo, por ejemplo

de un programa, es mejor mantener una copia que no cambie cuando se
actualice el programa.

Cuando se escribe un documento de hipertexto (en HTML) es conveniente tener en
consideración una serie de cuestiones, entre ellas resaltamos las siguientes:
• Indicar el estado de la información del documento.
• Poner los enlaces en el contexto.
• Firmar el documento.
• Dar un título adecuado al documento.
• Considerar un formato independiente del dispositivo.
167
• No utilizar los enlaces como notas a pie de página.
• Anotar adecuadamente las referencias que se hagan.
• Escribir el documento para que también pueda ser impreso.
• Escribir texto que sea legible, aunque tenga enlaces.
• Evitar comentarios excesivos sobre los mecanismos de información (hablar

sobre FTP, telnet, etc.).
• No centrarse en discutir las páginas propias.
6.2.1 Indicar el estado de la información del documento.

Es normal encontrarse con documentos que no están en su forma definitiva, sino que
están en revisión o aún incompletos, pero que pueden ser útiles a los posibles lectores. Por
ello es conveniente tener una información del estado del documento, indicando cuando fue
su última actualización, si está completo, cual es la información que cubre, etc.
No todos los documentos necesitan incluir este tipo de información; se puede tener una
página de visión general en la que se da esta información para cada documento.
En algunos casos puede ser útil incluir la fecha de creación o de la última modificación,
lo cual puede evitar que el lector siga leyendo una información ya caducada.
6.2.2 Poner los enlaces en el contexto.

Quizás la mayor diferencia entre escribir un texto secuencial y un hipertexto, es que los
posibles lectores del hipertexto pueden saltar a él desde cualquier sitio y a cualquier punto
del mismo. Aunque sólo se tengan enlaces desde un determinado lugar, conviene
considerar que, por la propia estructura abierta de la WWW, otra persona puede querer
referenciar alguna cuestión particular de nuestro trabajo haciendo un enlace a ese punto en
concreto. Por ello no se puede saber si el posible lector sigue el flujo de información que se
ha pensado al escribir el documento.
En el caso de escribir un tutorial, sí es importante mantener el flujo de información de un
documento al siguiente, tal como inicialmente se pensó. Pero, aunque no se tenga un
especial cuidado de aquellos que saltan desde otro lugar, si es recomendable que estos no
se encuentren perdidos de una forma desesperada. Para evitarlo se puede pensar hacer
cosas como las siguientes:
• Cuidar que el texto y el vocabulario se entienda por si mismo. Es decir, evitar

comenzar los documentos con frases del tipo: “La solución al problema es ...”
o “El siguiente aspecto que consideramos ...”.
• Hay palabras que se pueden enlazar a la información de fondo. Un ejemplo

típico es la documentación del proyecto WWW, donde la primera aparición de
WWW se enlazaba al documento del proyecto central.
168
• Considerar también que se pueden dar punteros explícitos como puntos de

navegación en la parte superior e inferior del documento.
• Tener en cuenta la posible reutilización de parte del material en un futuro. Ello

ayuda a escribir los documentos para su posible reutilización de forma
separada.
Otro aspecto que conviene tener en cuenta es la inclusión de iconos para facilitar la
navegación. Esto puede ser muy efectivo si se utilizan los mismos iconos en todos los
documentos. Por ejemplo, se puede poner un enlace hacia atrás para ir a la página anterior
en la jerarquía, excepto para la página superior. Con esto se consigue dar consistencia a
toda la estructura de documentos de nuestro hipertexto, de manera que el lector sepa
cuando está dentro de él y cuando está fuera, además se tiene una forma rápida de ir hacia
atrás.
De esta forma se puede pensar en tener una pequeña cadena de iconos de navegación al
final de cada página, el primero de ellos sería un enlace a la página superior de la
estructura, el segundo al capítulo, el tercero a la sección, etc.
6.2.3 Firmar el documento.

El poder contactar con el autor también ayuda a tener actualizado el documento. Esto es
fácil hacerlo, ya que solamente hay que poner un enlace a una página que contenga
información del autor.
Se puede tener una página propia, con la dirección de correo electrónico y el número de
teléfono (como la hecha en el Tema 1). En este caso, es posible añadir un enlace a esta
página, por ejemplo poniendo una nota al final de las páginas (con las iniciales o el
nombre) y el enlace a la misma. Es también normal que en lugar de una página se ponga la
dirección de correo electrónico.
En la página propia de autor se pueden incluir notas de copyright o declaraciones que se
crean convenientes.
6.2.4 Dar un título adecuado al documento.

El título del documento se da en el elemento TITLE en la cabecera (HEAD) del mismo.
Ya se comentó en el tema anterior (sección 2.1.6) como debe ser este título. Hay un título
para cada documento (obligatoriamente), el cual debe de dar información del documento
en un contexto global, por lo que no son convenientes títulos como:
<TITLE>Introducción</TITLE>
que en un contexto general, no aclaran nada sobre el contenido del documento. En cambio,
si sería conveniente un título de la forma:
<TITLE>Introducción: Una visión general de HTML</TITLE>
El título no es parte del texto del documento que se visualiza, aunque es una propiedad
del mismo y no puede contener anclas, ni párrafos, etc.; pero es útil para identificar el nodo
en una lista de historia o para etiquetar la ventana de visualización.
169
No hay que confundir el título con las cabeceras (H1, H2,H3, ...). Es conveniente que el
título no sea excesivamente largo (menos de 64 caracteres) ya que muchas aplicaciones
visualizan el título en ventanas o en menús donde el espacio disponible está limitado.
6.2.5 Considerar un formato independiente del dispositivo.

El hipertexto escrito en HTML no contiene información sobre los tipos de letras, la
forma y el espaciado de los párrafos que se deben utilizar para visualizar el documento.
Esto tiene la ventaja de que se puede interpretar adecuadamente en cualquier plataforma,
incluso en terminales de sólo texto.
Debe considerar que cada cliente utiliza diferentes espaciados y tipos de letras. Por esta
razón hay que tener cuidado cuando se usan elementos como cabeceras y listas. Si los
efectos de presentación no son de su agrado en el visualizador que tenga, no intente
cambiarlos utilizando elementos inapropiados o incluyendo blancos con elementos vacíos,
ya que esto se puede interpretar de distinta forma por otro cliente y producir resultados
extraños.
Conviene seguir algunas reglas sencillas, como por ejemplo:
• Utilizar siempre las cabeceras en orden, una cabecera H1 al inicio del

documento, cabeceras de nivel 2 para marcar secciones, de nivel 3
subsecciones, etc. No salte un nivel de cabecera porque no le guste el
resultado en su cliente.
• No añadir espacios y líneas en blanco, excepto en los elementos

preformateados (PRE).
• No refererirse a posibilidades que sean propias de un visualizador en

particular. Por ejemplo, diciendo “pulse aquí” o “seleccione el número del
enlace”. El usuario tendrá las instrucciones de como seleccionar enlaces en su
visualizador.
6.2.6 No utilizar los enlaces como notas a pie de página.

Las notas a pie de página distraen de la línea argumental. Si el material que hay en una
nota no se puede integrar en el cuerpo del texto, probablemente tampoco será necesario en
una nota. Porque se puedan incluir apuntes, notas y otros materiales, no quiere decir que se
tenga necesariamente que hacer.
6.2.7 Anotar adecuadamente las referencias que se hagan.

Cuando se haga una lista de referencias es conveniente anotarlas y dar una pequeña
descripción del contenido del destino de cada enlace, pero con discreción, ya que muchos
títulos son autoexplicativos y no necesitan anotaciones adicionales. Una anotación que no
diga nada es tan malo como no tener ninguna.
Piense en como se puede aumentar el valor de la lista. Cualquiera puede hacer una
recopilación de enlaces (en la WWW hay programas automatizados, conocidos como
robots, que recopilan cientos de miles de enlaces), pero para dar una descripción útil hay
que leer y entender el documento, de esta forma la lista que haga será un recurso valioso.
170
6.2.8 Escribir el documento para que pueda también ser impreso.

Muchas veces se habla del mundo ideal sin papel, o de un mundo casi ideal, en el que se
puede tener una versión hipertexto de un documento y separadamente una versión en
papel. Sin embargo, en el mundo real es muy probable que se quiera generar una copia
impresa del documento hipertexto que se está visualizando, partiendo del mismo archivo.
Si se tienen archivos HTML, es posible hacer una impresión del documento
formateándolo para algún procesador de texto (TeX, Word, FrameMaker, etc.), pero al
crear el texto del documento hay que tener en mente el que se pueda leer en forma impresa.
Por ello, conviene evitar hacer referencias en el texto de la forma “para más información
sobre HTML pulsar aquí” (donde aquí tiene un enlace a un documento de referencia de
HTML), en su lugar se puede intentar escribir algo como “para más información sobre
HTML ver la sección de referencia de HTML” (donde referencia de HTML tiene un enlace
al documento de referencia de HTML).
6.2.9 Escribir texto que sea legible, aunque tenga enlaces.

Un aspecto que ya han resaltado otros autores y que, desafortunadamente, está muy
extendido, es lo que han denominado el síndrome del “aquí” (o en la versiones inglesas el
“here”). Es decir, un abuso haciendo enlaces en la palabra “aquí” (“here”). Por ejemplo, es
muy normal encontrar frases del tipo:
Para información sobre XXXX pulse aquí.
que quedaría mejor y mucho más fácil de leer si se utiliza una frase del tipo:
Se dispone de información sobre XXXX.
Otra situación que también se produce con frecuencia es la utilización de tópicos para los
enlaces. Por ejemplo, para hacer un enlace a una página de personas que contribuyen al
hipertexto, muchos autores ponen frases del tipo:
Un enlace a la página de AGRADECIMIENTOS.
donde AGRADECIMIENTOS es el enlace.

En su lugar se pueden poner frases del tipo:
Gracias a las personas que han contribuido.
Notas
Una buena recomendación es diseñar las páginas HTML de forma que se puedan leer sin
seguir los enlaces.
171
6.2.10 Evitar comentarios excesivos sobre los mecanismos de información

(hablar sobre FTP, telnet, etc.).
Es común encontrarse páginas de información sobre FTP, correo electrónico, etc., sobre
todo en sitios con anuncios de Internet. WWW se diseñó para hacer innecesario todo esto.
Por ejemplo, puede querer anunciar que se tiene un archivo de software de dominio
público, que es accesible ahora por WWW:
Se dispone de un nuevo acceso WWW a los archivos accedidos antes por FTP y NFS, en
donde se incluye una colección de software de dominio público.
Pero en la WWW hay mucha gente que no necesita, ni quiere muchas veces, conocer
nada sobre FTP o NFS o incluso sobre los mecanismos WWW. Por eso es mejor hacer una
frase de la forma:
Se dispone de un archivo de software de dominio público.
6.2.11 No centrarse en discutir las páginas propias.

El mero hecho de no tener nada que decir no frena a alguna gente, y en lugar de escribir
sobre el mundo de fuera, se centran en discutir sobre sus propias páginas, sobre cómo se
han escrito, que hay nuevo en ellas, que dicen sus amigos sobre ellas, cuál es la estadística
de su uso, quien las lee, etc.
Estas cuestiones pueden ser de interés interno, pero muchas veces a la mayoría de la
gente no les interesa en absoluto y pueden inclusive suponer una pérdida de tiempo.
6.2.12 No abusar de imágenes y gráficos

Algunos autores llenan sus documentos de imágenes y gráficos, que muchas veces no
aportan más información de la que se pueda dar con un simple texto, pero que sin embargo
aumentan considerablemente el tiempo de transmisión; esto se hace más patente en
aquellos usuarios conectados mediante la línea telefónica normal. Además hay muchos
usuarios que no disponen de un visualizador gráfico o tienen desactivada la carga de
imágenes. Por estos motivos es recomendable no abusar de ellas y si es necesario incluir
una imagen utilice el atributo ALT en el elemento IMG o el correspondiente párrafo de
explicación en el elemento FIG (tal como se vio en el tema anterior).
172
Anexo
A Entidades para los caracteres de
ISO Latin 1
Esta lista de entidades corresponden a “ISO 8879:1986//ENTITIES Added Latin 1//EN”
Nombre Sintáxis Descripción

Aacute Á A mayúscula acentuada (Á)
Agrave À A mayúscula con acento grave (À)
Acirc Â A mayúscula con acento circunflejo (Â)
Atilde Ã A mayúscula con tilde (Ã)
Aring Å A mayúscula con anillo (Å)
Auml Ä A mayúscula con diéresis (Ä)
AElig Æ Diptóngo AE mayúsculo (Æ)
Ccedil Ç C mayúscula con cedilla (Ç)
Eacute É E mayúsucla acentuada (É)
Egrave È E mayúsucla con acento grave (È)
Ecirc Ê E mayúsucla con acento circunflejo (Ê)
Euml Ë E mayúsucla con diéresis (Ë)
Iacute Í I mayúscula acentuada (Í)
Igrave Ì I mayúsucula con acento grave (Ì)
Icirc Î I mayúscula con acento circunflejo (Î)
Iuml Ï I mayúsucula con diéresis (Ï)
ETH Ð Eth mayúscula, Islandia
Ntilde Ñ Eñe mayúscula (Ñ)
Oacute Ó O mayúscula acentuada (Ó)
Ograve Ò O mayúscula con acento grave (Ò)
Ocirc Ô O mayúscula con acento circunflejo (Ô)
Otilde Õ O mayúscula con tilde (Õ)
Ouml Ö O mayúscula con diéresis (Ö)
Oslash Ø O mayúscula con barra ( Ø)
Uacute Ú U mayúscula acentuada (Ú)
Ugrave Ù U mayúscula con acento grave (Ù)
173
Ucirc Û U mayúscula con acento circunflejo (Û)
Uuml Ü U mayúscula con diéresis (Ü)
Yacute Ý Y mayúscula con acento (†)
THORN Þ THORN mayúscula, Islandia
szlig ß Sharp s minúscula, Alemania ( ß)

aacute á a minúscula acentuada (á)
agrave à a minúscula con acento grave (á)
acirc â a minúscula con acento circunflejo (â)
atilde ã a minúscula con tilde (ã)
auml ä a minúscula con diéresis (ä)
aelig æ Diptóngo ae minúsculo (æ)
ccedil ç c minúscula con cedilla (ç)
eacute é e minúscula acentuada (é)
egrave è e minúscula con acento grave (é)
ecirc ê e minúscula con acento circunflejo (ê)
euml ë e minúscula con diéresis (ë)
iacute í i minúscula acentuada (í)
igrave ì i minúscula con acento grave (ì)
icirc î i minúscula con acento circunflejo (î)
iuml ï i minúscula con diéresis (ï)
eth ð eth minúsucula, Islandia
ntilde ñ ñ minúscula
oacute ó o minúscula acentuada (ó)
ograve ò o minúscula con acento grave (ò)
ocirc ô o minúscula con acento circunflejo (ô)
otilde õ o minúscula con tilde (õ)
ouml ö o minúscula con diéresis
oslash ø o minúscula con barra (ø)
uacute ú u minúscula acentuada (ú)
ugrave ù u minúscula con acento grave (ù)
ucirc û u minúscula con acento circunflejo (û)
uuml ü u minúscula con diéresis (ü)
yacute ý y con acento (‡)
thorn þ thorn minúsculo, Islandia
yuml ÿ y minúscula con diéresis (ÿ)
174
Anexo
B Referencias numéricas de los
caracteres de Latin 1
Esta lista está ordenada numéricamente y se ha obtenido del conjunto de caracteres

gráficos ISO 8859/1 8-bit:
Referencia Descripción
- No usados
Tabulador horizontal

Nueva línea (line feed)
- No usado
Espacio
! Signo de admiración (!)
" Comillas (“)
# Signo de número (#)
$ Signo del dolar ($)
% Signo de tanto por ciento (%)
& Ampersand (&)
' Apóstrofo (‘)
( Paréntesis de la izquierda (()
) Paréntesis de la derecha ())
* Asterisco (*)
+ Signo más (+)
, Coma (,)
- Guión (-)
. Punto -punto y aparte- (.)
/ Barra a la derecha -slash- (/)
0 - 9 Dígitos 0-9

: Dos puntos (:)
175
; Punto y coma (;)
< Menor que (<)
= Igual (=)
> Mayor que (>)
? Signo de interrogación (?)
@ a de arroba (@)
A-Z Letras A-Z
[ Corchete izquierdo ([)

\ Barra a la izquierda -backslash- (\)
] Corchete derecho (])
_ Barra horizontal (_)
` Acento (´)
a-z Letras a-z
{ Llave izquierda ({)

| Barra vertical (|)
} Llave derecha (})
~ Tilde (~)
- No usados
¡ Signo de admiración invertido (¡)

¢ Signo de céntimo (¢)
£ Signo de Libra esterlina (£)
¤ Signo de aparición general (¤)
¥ Signo Yen (¥ )
¦ Barra vertical de separación (|)
§ Signo de sección (§)
¨ Diéresis (¨)
© Copyright (©)
ª Ordinal femenino (ª)
« Doble ángulo izquierdo («)
¬ Negación (¬)
Guión de separación (–)
® Marca comercial registrada (®)
¯ Acento Macron (¯ )
° Signo de grados (°)
176
± Más o menos (±)
² Superíndice 2
³ Superíndice 3
´ Acento (´)
µ Signo micra (µ)
¶ Signo de párrafo (¶)
· Punto en el medio (·)
¸ Cedilla (¸)
¹ Superíndice 1
º Ordinal masculino (º)
» Doble angulo derecho (»)
¼ Fracción 1/4
½ Fracción 1/2
¾ Fracción 3/4
¿ Interrogación invertida (¿)
À A mayúscula acentuada (Á)
Á A mayúscula con acento grave (À)
Â A mayúscula con acento circunflejo (Â)
Ã A mayúscula con tilde (Â)
Ä A mayúscula con anillo (Å)
Å A mayúscula con diéresis (Ä)
Æ Diptongo AE mayúsculo (Æ)
Ç C mayúscula con cedilla (Ç)
È E mayúscula acentuada (É)
É E mayúscula con acento grave (È)
Ê E mayúscula con acento circunflejo (Ê)
Ë E mayúscula con diéresis (Ë)
Ì I mayúscula acentuada (Í)
Í I mayúscula con acento grave (Ì)
Î I mayúscula con acento circunflejo (Î)
Ï I mayúscula con diéresis (Ï)
Ð Eth mayúscula, Islandia
Ñ Ñ mayúscula
Ò O mayúscula acentuada (Ó)
Ó O mayúscula con acento grave (Ò)
Ô O mayúscula con acento circunflejo (Ô)
Õ O mayúscula con tilde (Õ)
Ö O mayúscula con diéresis (Ö)
× Signo de multiplicación
Ø O mayúscula con barra (Ø)
177
Ù U mayúscula acentuada (Ú)
Ú U mayúscula con acento grave (Ù)
Û U mayúscula con acento circunflejo (Û)
Ü U mayúscula con diéresis (Ü)
Ý Y mayúscula acentuada (†)
Þ THORN mayúscula, Islandia
ß Sharp s minúscula, Alemania ( ß)
à a minúscula acentuada (á)
á a minúscula con acento grave (à)
â a minúscula con acento circunflejo (â)
ã a minúscula con tilde (ã)
ä a minúscula con tilde (å)
å a minúscula con diéresis (ä)
æ Diptongo ae minúsculo (æ)
ç c minúscula con cedilla (ç)
è e minúscula acentuada (é)
é e minúscula con acento grave (è)
ê e minúscula con acento circunflejo (ê)
ë e minúscula con diéresis (ë)
ì i minúscula acentuada (í)
í i minúscula con acento grave (ì)
î i minúscula con acento circunflejo (î)
ï i minúscula con diéresis (ï)
ð eth minúscula, Islandia
ñ ñ minúscula
ò o minúscula acentuada (ó)
ó o minúscula con acento grave (ò)
ô o minúscula con acento circunflejo (ô)
õ o minúscula con tilde (õ)
ö o minúscula con diéresis (ö)
÷ Signo de división (÷)
ø o minúscula con barra (ø)
ù u minúscula acentuada (ú)
ú u minúscula con acento grave (ù)
û u minúscula con acento circunflejo (û)
ü u minúscula con diéresis (ü)
ý y minúscula acentuada
þ thorn minúscula, Islandia
ÿ y minúscula con diéresis (ÿ)
178

El Lenguaje HTML - UNED PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

El Lenguaje HTML - UNED PDF

Cargado por

Copyright:

Formatos disponibles

Módulo IV

El lenguaje HTML para la

HTML (HyperText Markup Language) es el lenguaje propio del

• No reconocen nuevas directivas de HTML, ni las extensiones

• Algunos editores tampoco soportan formularios, marcos ni

• Añaden cierta información (como el nombre del editor) y

• Algunos eliminan directivas que no entienden, aunque formen

• Ocupan más espacio en disco y más memoria.

• No son tan intuitivos de aprender, como puedan parecer.

• Por último, existe un coste económico, que no se tiene con los

El lenguaje HTML para la creación

Tema 1 Introducción al lenguaje HTML

1.1 Introducción al HTML 1

Tema 2 Diseño de documentos HTML

2.1 Puntualizaciones para el diseño de documentos 27

2.1.1 Botones de navegación 30

Tema 3 Características avanzadas de HTML

3.1 Formularios de entrada de datos 69

3.1.7 Otros elementos y directivas dentro de un formulario 80

Tema 4 Estilos y capas

4.1 Hojas de estilo 101

Tema 5 Elementos y directivas del lenguaje HTML

5.1 Atributos comunes a diferentes directivas 133

5.33 FRAME 146

5.69 STRIKE 158

Tema 6 Una guía de escritura de documentos HTML

6.1 Sobre la estructura general de un hipertexto 165

Anexo A Entidades para los caracteres de ISO Latin 1 173

Anexo B Referencias numéricas de los caracteres de Latin 1 175

1.1 Introducción al HTML

Figura 1-1: Presentación de un documento HTML con Netscape 4.03

Figura 1-2: Presentación de un documento HTML con Microsoft Explorer 4

Figura 1-3: Presentación de un documento HTML con AOLPress

<FONT SIZE="+3">D</FONT>atos generales:

Tabla 1- 1: Documento HTML correspondiente a las Figuras 1-1 a 1-3

Se puede observar que la presentación de un documento HTML utilizando diferentes

En resumen, los puntos que caracterizan a HTML son los siguientes:

• Es un lenguaje de marcas para documentos electrónicos en Internet.

• Permite la presentación de documentos en diferentes tipos de monitores y de

• Las marcas principalmente son semánticas.

• Permite enlaces de hipertexto de un documento a otro, entradas del usuario e

• No es un procesador de texto tipo WYSIWYG, por el contrario utiliza el

• La interpretación de las marcas depende de los navegadores y de los

• Es un lenguaje extensible, es decir se pueden añadir nuevas características y

1.2 Elementos de los documentos HTML

<P> Esto es un parrafo.

Generalmente los elementos HTML se identifican mediante una directiva de comienzo,

<H1> 1. Elementos de los documentos HTML </H1>

y una línea horizontal a lo largo de toda la página con la directiva

Los nombres de los elementos no son sensibles a mayúsculas/minúsculas. Por ejemplo,

Departamento de Informática y Automática

4) Los elementos “ancla” (A) que enlazan a distintos documentos.

á: &aacute; é: &eacute; í: &iacute; ó: &oacute; ú: &uacute;

Á: &Aacute; É: &Eaucte; Í: &Iacute; Ó: &Oacute; Ú: &Uacute;

ü: &uuml; Ü: &Uuml; ñ: &ntilde; Ñ: &Ntilde; ¿: &#191; ¡: &#161;

Tabla 1- 2: Caracteres del español considerados como caracteres especiales en HTML

1.2.1 Directivas anidadas

<H1>Sobre el uso del <EM>antes</EM> y del <EM>después</EM></H1>

Cuyo resultado sería:

1.2.2 Espacios en blanco y saltos de línea

1.2.3 Atributos de los elementos

En este caso al atributo HREF se le asigna el valor:

El elemento A no está vacío y se cierra con la directiva de terminación </A>.

á: á é: é í: í ó: ó ú: ú

Á: Á É: &Eaucte; Í: Í Ó: Ó Ú: Ú

ü: ü Ü: Ü ñ: ñ Ñ: Ñ ¿: ¿ ¡: ¡

<P>Un párrafo con texto, donde se da la

<H1>Joaquín Aranda Almansa</H1>