2 LENGUAJE HTML.

2.1 ¿QUÉ ES HTML?

HTML ("Lenguaje de marcas de hipertexto") es el lenguaje estándar utilizado en la Web para

representar la información intercambiada por sus usuarios en forma de documentos de
"hipertexto"- texto con una presentación agradable, con inclusión de elementos multimedia
(gráficos, video, audio) y con la presencia de hiperenlaces que permiten relacionarlo con otros
documentos de hipertexto. Se trata de un documento de texto (ASCII) que incorpora una serie
de etiquetas que indican al navegador cómo interpretar y dar formato al texto que las
acompaña.

En resumen, todo documento HTML está constituido por dos tipos de elementos:

• Texto: el contenido, la información del documento.

• Etiquetas: instrucciones HTML que resaltan dicho contenido y le dan un formato

agradable y fácil de leer, con la posibilidad de relacionar documentos y fuentes de
información mediante hiperenlaces.

Los ficheros que contienen código HTML suelen tener extensión .html ó .htm, aunque también
pueden ser de otro tipo (como .asp, por ejemplo)

¿Por qué HTML?

HTML es un estándar, y otros formatos no. Cualquier navegador que use las normas
estándares de visualización de documentos Web podrá leer e interpretar perfectamente HTML,
no así documentos en otros formatos como Word, Excel, WordPerfect, etc. Es por ello que, si
queremos crear un sitio Web, necesitamos saber programar en HTML.

Todas las páginas Web están escritas mediante HTML.

2.1.1 Herramientas para generar código HTML.

Ya vimos, en el Tema 1 (apartado 1.3.), que existen muchos programas que permiten crear
código HTML:

• MACROMEDIA DREAMWEAVER
• MICROSOFT FRONTPAGE
• ADOBE GoLIVE
• NETSCAPE COMPOSER
Módulo 4
Creación de contenidos WEB

Estos editores son específicos para hacer páginas web, y, por esta razón, nos simplifican
mucho el trabajo. Sin embargo, ya observamos que la solución más económica y flexible es
utilizar un editor de textos normal y corriente (como el Bloc de Notas): el código HTML que
generan es exactamente el mismo que el que se genera con editores mucho más complejos,
con la ventaja de que, además, no están limitados por las características concretas de un
programa.

2.1.2 Etiquetas

La clave del lenguaje HTML radica en las etiquetas, que permiten dar formato al texto, añadir
imágenes, sonido y video.

Las etiquetas son palabras clave (comandos) encerradas entre los signos "menor que" (<) y
"mayor que" (>), que indican el tipo de contenido que encierran.

Ejemplos: <TITLE>,<TABLE>,<IMG>

Hay etiquetas de apertura y de cierre: el comando que emplean es el mismo, pero se

diferencian en que la de cierre lleva una barra inclinada ( / ) adicional. El efecto que define la
etiqueta tendrá validez para todo lo que esté incluido entre las etiquetas de inicio y fin, ya sea
texto plano u otras etiquetas.

Ejemplo: <TITLE>CURSO DE HTML</TITLE>

No todas las etiquetas precisan de una etiqueta de cierre. Así, tenemos dos tipos de
etiquetas, las llamadas "abiertas" y las "cerradas":

Las etiquetas cerradas son aquellas que constan de dos palabras claves : una que indica el
principio de la etiqueta, y otra que indica el final. Entre la etiquetas inicial y final puede haber
otras etiquetas.

Las etiquetas abiertas son las que constan de una única palabra clave (la etiqueta de
apertura). Son aquéllas en las que el final está implícito, y que definen un efecto que se
producirá en un punto determinado del documento, sin afectar a otros elementos del mismo.

Las etiquetas no son sensibles al uso de mayúsculas o minúsculas. Es indiferente cómo las
escribamos, puesto que se interpretarán del mismo modo, aunque lo normal es expresarlas en
mayúsculas para que destaquen mejor del resto del documento.

Ejemplo: <TITLE> = <title>

Estructura general de una etiqueta:

<ETIQUETA>Elementos afectados por la etiqueta </ETIQUETA>

Por último, las etiquetas pueden ir acompañadas de una serie de modificadores ó

parámetros, denominados "atributos". Estos parámetros se incluyen a continuación de la
palabra clave, dentro de los signos < y >.

2
Módulo 4
Creación de contenidos WEB

Ejemplos de etiquetas:

<CENTER>Mi página Web</CENTER>, <B>Texto en negrita</B> (Etiquetas cerradas)

<P>, <IMG>, <BR> , <TR>, <TD> (Etiquetas abiertas)

<BODY bgcolor="#00FFFFF"> Cuerpo de la página </BODY> (Etiqueta con parámetros)

Etiquetas correctas

Todo texto que se encuentre entre los caracteres "<" y ">" será considerado (por el navegador)
como una etiqueta. Si la supuesta etiqueta no fuera una de las válidas en el lenguaje HTML,
no será tenida en cuenta, sin causar ningún tipo de error, dejándose el texto y las etiquetas a
las que afectara como si no existiera dicha etiqueta. Así, si cometemos un error sintáctico al
expresar una etiqueta o un atributo, no se producirá ningún error: sencillamente, no se
obtendrá el efecto que deseábamos.

El lenguaje HTML evoluciona muy rápidamente y cada nueva versión de los programas
navegadores presenta etiquetas nuevas que causan efectos más espectaculares, o atributos
nuevos de las etiquetas ya existentes. Esto provoca que las versiones más antiguas no
entiendan estas nuevas etiquetas y, por tanto, las consideren erróneas y no realicen la acción
que deseábamos. Se da, incluso, el caso de atributos que son válidos para un único
navegador.

Cuando estemos creando código HTML, debemos hacerlo del modo más "estándar" posible,
para que el documento pueda ser visto de forma efectiva por diferentes navegadores en
máquinas distintas. Por tanto, debemos renunciar a mostrar efectos espectaculares que sólo
tengan validez en un navegador, y comprobar cómo se ve el documento en diversos
navegadores, ya que las personas que se conectan a las páginas en Internet no tienen por qué
tener la misma herramienta que quien las ha construído. También es importante comprobar
cómo se ve el documento en los distintos tamaños de la ventana del navegador, teniendo en
cuenta que no todos los usuarios van a tener un monitor con la misma resolución.

Atributos de las etiquetas

Las etiquetas pueden presentar modificadores, que llamaremos "atributos", que permiten
definir diferentes opciones para la instrucción HTML representada por la etiqueta. Estos
atributos se definen en la etiqueta de inicio, a continuación de la palabra clave, dentro de los
signos < y >, y consisten en el nombre del atributo y del valor que toma, separados por un
signo de igualdad (=).

Ejemplo: <TABLE width="90%" bgcolor="#C6E2FF" border=1>

El orden en que coloquemos los atributos de una misma etiqueta es indiferente, ya que no
afecta al resultado. Si se incluye el mismo atributo varias veces, con distintos valores, el
resultado será imprevisible, y dependerá de cómo lo interprete el navegador.

3
Módulo 4
Creación de contenidos WEB

Por ejemplo:

<A href="[Link] Página de ejemplo </A>

En este caso, la etiqueta "A" presenta un atributo, "HREF", cuyo valor es la dirección de
Internet "[Link] Esta instrucción representa un hiperenlace a dicha supuesta
página.

En ocasiones, una etiqueta puede ir acompañada por varios atributos:

<HR align="left" noshade size=5 width="50%">

En esta caso, la etiqueta HR presenta cuatro atributos. El segundo de ellos ("noshade") es un

caso especial que no presenta ningún valor. El orden en que especifiquemos estos atributos
no afecta al resultado final. Esta instrucción crea una línea horizontal, alineada a la izquierda,
sólida (es decir, sin sombreado), con una altura de 5 pixels y una anchura del 50 % de la
pantalla.

Si el valor que toma un atributo contiene más de una palabra, debemos expresarlo entre
comillas dobles (""); en caso contrario, no será necesario poner las comillas.

Por ejemplo:

Poner: <TABLE border=1>

es lo mismo que poner: <TABLE border="1">

Pero debemos poner:

<BODY bgcolor="#00FFFFF">

2.1.3 Estructura de un documento HTML.

Toda página debe comenzar, obligatoriamente, con la etiqueta <HTML>, y debe terminar con
la etiqueta de cierre </HTML>

Las páginas Web se dividen en dos partes claramente diferenciadas:

• La cabecera, que proporciona información acerca del documento (título, autor, fecha
de creación, etc.) La información a colocar es optativa, aunque es recomendable añadir
el título para que aparezca en la barra superior del navegador.

• Etiquetas: <HEAD>,</HEAD>

4
Módulo 4
Creación de contenidos WEB

• El cuerpo, que contiene todos los elementos (texto, imágenes, multimedia, tablas, etc.)
de la página, en definitiva la información que se va a mostrar al usuario.

Etiquetas: <BODY>, </BODY>

Dentro del cuerpo, los comentarios se sitúan entre las etiquetas <!-- y -->.

Ejemplo: <! Esto es un comentario -->

Los comentarios son útiles para realizar anotaciones que clarifiquen el código fuente del
documento, de forma que podamos interpretarlo de forma cómoda, fácil y rápida, a pesar de
que haya transcurrido un tiempo considerable desde su realización.

En resumen, la estructura general de una página escrita en HTML es la siguiente:

<HTML>

<!--Mi primera página Web-->

<HEAD>

<TITLE>Título de la página</TITLE>

</HEAD>

<BODY>
..................................................
</BODY>

</HTML>

La cabecera

La cabecera suele ser el lugar más indicado para colocar aquellos elementos que no alteran el
contenido de la página, aunque sí la forma de presentarlo y su comportamiento. Por ello, es el
lugar más recomendable para colocar los scripts y las hojas de estilo (que ya estudiaremos en
capítulos posteriores) Como hemos visto, la cabecera está delimitada por las etiquetas
<HEAD> y </HEAD>.

Algunos de los elementos que podemos encontrar en la cabecera son:

• Author: indica quién es el creador de la página,

• Generator: define la herramienta utilizada para crearla,
• Classification: palabras que permiten clasificar la página dentro de un buscador
jerárquico,
• Keywords: palabras clave por las que se puede encontrar la página en los buscadores,
• Description: descripción del contenido de la página.

5
Módulo 4
Creación de contenidos WEB

En cualquier caso, lo habitual es poner sólo el título, el generador, y el autor.

Otro elemento interesante que podemos incluir en la cabecera es una etiqueta del tipo:

<BASE href="[Link]

Cuando especificamos una URL relativa en un enlace (mediante la etiqueta <A>), en principio,
es para acceder a una página situada en nuestro mismo servidor. Sin embargo, si
especificamos lo anterior en la cabecera del documento, conseguimos que las URL's relativas
se refieran al directorio "/music", ubicado en el servidor :"[Link]

El cuerpo

El cuerpo de un documento HTML incluye todas las instrucciones HTML y el texto que forman
el contenido del documento. Como ya hemos visto, está delimitado por las etiquetas <BODY>
y </BODY>,

La etiqueta <BODY> tiene algunos atributos que son de definición global para todo el
documento, que definirán los colores y el fondo del documento.

<BODY BACKGROUND="url" BGCOLOR="#rrvvaa" TEXT="#rrvvaa" LINK="#rrvvaa"

VLINK="#rrvvaa">

Estos atributos son los siguientes:

• BACKGROUND="url": Se utiliza cuando se quiere poner una imagen como fondo del
documento; la dirección URL especificada define el camino correspondiente a la
imagen. La imagen aparecerá por debajo del texto y de las imágenes del documento
HTML. En el caso de que la imagen no ocupe la totalidad del fondo, será reproducida
tantas veces como sea necesario.
• BGCOLOR="#rrvvaa" ( ó " nombre del color"): Indica el color que tendrá el fondo del
documento. Sólo se utilizará si no se ha definido una imagen de fondo (mediante el
parámetro anterior), o si se ha definido pero no está disponible (porque ha sido
cambiada de directorio, por ejemplo).
• TEXT="#rrvvaa" (ó "nombre del color"): Especifica el color del texto del documento
HTML. Por defecto, este color será el negro.
• LINK="#rrvvaa" (ó "nombre del color"): Indica el color que tendrán los hiperenlaces a
los que todavía no se ha accedido. Por defecto, será azul.
• VLINK="#rrvvaa" (ó "nombre del color"): Indica el color de los enlaces que ya han
sido visitados. Por defecto, será magenta.
• ALINK="#rrvvaa" (ó "nombre del color"): Cambia el color de los enlaces cuando el
usuario hace click sobre él.

Definición de los colores

La forma en que se representan los colores en HTML es mediante un código, cuyo formato
es el siguiente:

#rrvvaa

6
Módulo 4
Creación de contenidos WEB

Este código indica la proporción de rojo (cifra "rr"), verde (cifra "vv") y azul (cifra "aa") que
contiene el color deseado, en formato hexadecimal. El símbolo # es opcional. Por ejemplo,
el código "#000000" corresponde al color negro, el "#FF0000" al rojo, y el "#FFFFFF" al blanco.

Un número hexadecimal es un número expresado en base 16 (es decir, visto como suma
de potencias de 16).

Los dígitos utilizados en base 16 serán:

• 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,

• A, B, C, D, E y F (también minúsculas)

Las letras A-F sustituyen a los factores 10, 11, 12, 13, 14 y 15, y son necesarias para
evitar ambigüedades.

Algunos ejemplos (a la derecha del signo = escribimos el número en el sistema decimal

de numeración):
0F = 15
0B = 11
14 = 20
1A = 26
20 = 32

En la especificación de los colores, sólo se utilizan números comprendidos entre el 00 y el FF

(esto es, entre el 0 y el 255) El 00 indica la ausencia total del color, y FF la mayor proporción
del color.

CÓDIGOS DE LOS PRINCIPALES COLORES

COLOR CLARO OSCURO

NEGRO #000000
AZUL #0000FF #0000D0
VERDE #00FF00 #00D000
ROSA #FF00FF #D000D0
ROJO #FF0000 #D00000
AMARILLO #FFFF00 #D0D000
GRIS #D0D0D0 #808080
CYAN #00FFFF #00D0D0
BLANCO #FFFFFF

7
Módulo 4
Creación de contenidos WEB

Algunos colores están ya predefinidos y pueden ser referenciados directamente por su

nombre (en lugar de por su código), pero sólo serán validos para Internet Explorer y Netscape:

• black -> negro

• navy -> azul marino
• lime -> lima
• purple -> púrpura
• yellow -> amarillo
• olive -> oliva

Cuando se referencia un color predefinido por su nombre, nos arriesgamos a que no sea bien
interpretado por algún navegador. Por ello, lo mejor es utilizar siempre los códigos de los
colores. Así nos aseguramos de que nuestra página se verá perfectamente en cualquier
navegador.

8
Módulo 4
Creación de contenidos WEB

2.2 AÑADIENDO TEXTO A LAS PÁGINAS WEB.

2.2.1.- Introducir texto.

Descrita la estructura de un documento HTML, podemos empezar a darle contenido,

añadiendo por ejemplo texto. Como se indicó anteriormente, los contenidos de la página entre
los que evidentemente se encuentra el texto, se añaden en el cuerpo (BODY) del documento.

Imaginemos que deseamos realizar una página muy sencilla que presente en pantalla un
simple mensaje: "Hola, esta es mi primera página y es muy sencilla". Su aspecto sería el
que se muestra en la Figura 2.1:

Figura 2.1.- Nuestra primera página Web.

El código HTML para obtener una página con el aspecto mostrado en la Figura 2.1 es el
siguiente:

<HTML>

<!--Mi primera página Web-->

<HEAD>
<TITLE>Mi primera página</TITLE>
</HEAD>

<BODY>
Hola, esta es mi primera página y es muy sencilla

</BODY>

</HTML>

9
Módulo 4
Creación de contenidos WEB

Debemos tener en cuenta que algunos navegadores no aceptan símbolos no anglosajones

(como la letra "ñ", los acentos, los símbolos ¿ y ¡, etc.). La solución de HTML a este problema
es definir juegos de caracteres para estos símbolos. Así, para indicar al navegador que
muestre estos símbolos "especiales" se debe escribir:

&#CÓDIGO NUMÉRICO;

En lugar del código numérico, se puede utilizar también el código HTML asociado:

Por ejemplo, para escribir la palabra "PÁGINA", debemos escribir:

P&#255;GINA,

donde 255 es el código numérico correspondiente a la letra Á.

Si utilizamos el código HTML asociado a la Á, debemos escribir:

P&AACUTE;GINA

Las versiones actuales de los navegadores más utilizados sí soportan el uso de acentos y
símbolos no anglosajones, por lo que cada vez es menos necesario el uso de los códigos
para estos símbolos.

Introducido el texto, solo queda conocer como mejorar el aspecto del texto añadido cambiando
por ejemplo los tipos de fuente, su color, su tamaño, etc.

2.2.2.- Párrafos.

El texto queda organizado en párrafos por medio de la utilización de la etiqueta <P>, que
cambia de párrafo (deja una línea en blanco) En este caso, se trata de una etiqueta abierta.

La etiqueta <P> puede también usarse como etiqueta cerrada <P>..</P>. Lo haremos de esta
manera cuando nos interese indicar cuáles son los atributos de un párrafo en concreto. En
este caso, <P> dispone del atributo ALIGN, con el que podemos definir la alineación del
párrafo. Este parámetro puede tomar cuatro valores: center, left (alineación por defecto), right
y justify, cuyo significado es evidente.

<P>Párrafo alineado a la izquierda, por defecto</P>

<P align=center>Párrafo centrado</P>

<P align="right">Párrafo alineado a la derecha</P>

<P align="justify">Párrafo justificado</P>

Si añadimos las líneas anteriores al código de nuestro primer ejemplo, en el navegador

visualizaríamos lo mostrado en la Figura 2.2.

10
Módulo 4
Creación de contenidos WEB

Figura 2.2.- Alineación de párrafos.

Alineación de múltiples párrafos

Se consigue con la etiqueta: <DIV align=***>..</DIV>. Funciona igual que la etiqueta <P
align=***>..</P>, con la diferencia de que en su interior se colocan todos los párrafos con sus
respectivos <P>..</P>

Ejemplo:

<DIV ALIGN="center">

<P> Texto del primer párrafo.</P>

<P> Texto del segundo párrafo.</P>

</DIV>

11
Módulo 4
Creación de contenidos WEB

2.2.3.- Dando formato al texto.

Como se indico anteriormente, podemos darle formato al texto: tipo de fuente, tamaño y color
de texto, aspecto (cursiva, subrayado, etc.). Para ello necesitaremos las etiquetas descritas en
este apartado.

Aspecto del texto.

Para dar aspecto al texto, esto es ponerlo en negrita, cursiva, subrayado o resaltado utilizamos
las siguientes etiquetas:

• NEGRITA: <B> .. </B>

• CURSIVA: <I> .. </I>
• SUBRAYADO: <U> .. </U>
• RESALTADO: <STRONG> .. </STRONG>
• TEXTO PARPADEANDO: <BLINK> .. </BLINK> (Solo funciona con Netscape)

Indicar que los navegadores sólo interpretan un espacio en blanco entre palabra y palabra.
Para introducir espacios en blanco insertamos el código &nbsp.

Tamaño del texto.

El tamaño del texto se especifica por medio del atributo SIZE de la etiqueta <FONT> (que es
cerrada):

<FONT size=t >...</FONT>,

donde "t" es el tamaño y debe ser un número comprendido entre 1 y 7 (siendo 1 el menor
tamaño y 7 el mayor).

En la Figura 2.3 se muestran los distintos tamaños de texto tal y como los mostraría el
navegador.

12
Módulo 4
Creación de contenidos WEB

Figura 2.3.- Tamaños de fuente.

El código HTML implementado para obtener la página mostrada en la Figura 2.3, es el

siguiente

<HTML>

<!--Ejemplo tamaño de fuente->

<HEAD>
<TITLE>Ejemplo de tamaño de texto</TITLE>

</HEAD>

<BODY>

<P> <font size=1>Texto de tamaño 1</font>

<P> <font size=2>Texto de tamaño 2</font>

<P> <font size=3>Texto de tamaño 3</font>

<P> <font size=4>Texto de tamaño 4</font>

13
Módulo 4
Creación de contenidos WEB

<P> <font size=5>Texto de tamaño 5</font>

<P> <font size=6>Texto de tamaño 6</font>

<P> <font size=7>Texto de tamaño 7</font>

</BODY>

</HTML>

Tipos de letra.

El tipo de fuente se define con la etiqueta <FONT>, seguida del atributo face:

<FONT face="Nombre de la fuente">..</FONT>,

donde el nombre debe ser el de una de las fuentes que tengamos instaladas. Lo mejor es
utilizar fuentes universales, como pueden ser: Arial, Times New Roman, etc.

Ejemplos:

<FONT FACE="Arial"> Texto </FONT>

<FONT FACE="Courier" SIZE=6> Texto< /FONT>

Color del texto

El color del texto se describe mediante:

<FONT color="#******">..</FONT>,

donde los asteriscos indican el código del color (ya explicamos anteriormente cómo se define
este código).

Ejemplo:

<FONT FACE="Arial" COLOR="#d00000"> Este texto está en rojo oscuro</FONT>

El navegador mostraría el texto con el siguiente aspecto:

14
Módulo 4
Creación de contenidos WEB

Figura 2.4.- Color del texto.

Títulos o encabezados

En un documento HTML, es posible definir seis tipos distintos de encabezados (ó

"cabeceras"), que serán, normalmente, el título del documento y los distintos subapartados que
lo forman. Se introducen con la etiqueta: <Hn>..</Hn>, siendo n un número entre 1 y 6 (donde
1 indica el mayor tamaño y 6 el menor) El texto indicado entre las etiquetas de inicio y de fin
será el afectado por las cabeceras:

Ejemplo:

<H1>Texto resaltado</H1>

Lo normal es utilizar los encabezados de forma consecutiva y descendente: comenzar el

documento con el encabezado <H1> (que definirá, por ejemplo, el título de la página), luego
utilizar el encabezado <H2> para los apartados principales, para los subapartados usar <H3>,
y así sucesivamente. Sin embargo, también podemos utilizar cualquier encabezado para
resaltar un texto en cualquier punto del documento.

El modo en que se presentan las cabeceras pueden variar de un navegador a otro, y sólo se
puede asegurar que se mostrará de distinta forma en orden de importancia. Lo normal es que
la <H1> sea negrita y muy grande, <H2> negrita y grande, <H3> itálica y grande.

15
Módulo 4
Creación de contenidos WEB

Las etiquetas <H1>,...,<H6> admiten el atributo ALIGN, que define la alineación del
encabezado:

<Hn ALIGN="Alineación del encabezado">

Este atributo puede tomar, como siempre, los valores: center, left, right y justify.

Sangrado de texto

Para sangrar el testo se utilizan las etiquetas:

<BLOCKQUOTE>..</BLOCKQUOTE>

Como se muestra en el siguiente ejemplo, los sangrados se pueden anidar.

Ejemplo:

<BLOCKQUOTE>Texto sangrado

<BLOCKQUOTE>Texto más sangrado que el anterior</BLOCKQUOTE>

</BLOCKQUOTE>

Con este código, en el navegador visualizaríamos lo siguiente:

Figura 2.5.- Texto con sangrado.

16
Módulo 4
Creación de contenidos WEB

Subíndices y superíndices

Para insertar subíndices y superíndices se utilizan las siguientes etiquetas:

• Etiqueta para los subíndices: <SUB>..</SUB>

• Etiqueta para los superíndices: <SUP>..</SUP>

Si queremos editar la ecuación C=x2+x-1, escribiremos:

C=x<SUP>2</SUP>+x-1

Etiquetas de información (Tooltips)

Los tooltips son etiquetas que aportan información cuando se posiciona el ratón sobre algún
objeto de la página. Se asocian a párrafos a través del atributo title de la etiqueta <P>:

<P title="Texto del tooltip">

Los tooltips son las cajitas con fondo amarillo que aparecen por ejemplo cuando nos situamos
sobre los iconos de las barras de herramientas de las aplicaciones de Microsoft, mostrándonos
o proporcionándonos información acerca de su utilidad.

Información acerca del autor

Para "firmar" la página Web, debemos utilizar las etiquetas <ADDRESS> ... </ADDRESS> al
final del cuerpo del documento:

Ejemplo:

<HTML>

<HEAD>

</HEAD>

<BODY>

<ADDRESS>

José Antonio Jiménez <br>

Madrid, 5 de Abril de 2005 <br>

jimenez@[Link] <br>

Universidad de Alcalá

</ADDRESS>

17
Módulo 4
Creación de contenidos WEB

</BODY>

</HTML>

Al interpretar el navegador el código HTML del ejemplo anterior, se observa lo siguiente:

Figura 2.6.- Firma del autor.

Color de fondo y del texto de una página

Para añadir color al fondo de una página o a todo el texto, utilizamos los atributos BGCOLOR
y TEXT de la etiqueta <BODY>, respectivamente.

ƒ Color de fondo de una página:

<BODY BGCOLOR="#******">

ƒ Color del texto de una página:

<BODY TEXT="#******">

18
Módulo 4
Creación de contenidos WEB

Otras etiquetas

Podemos utilizar otras etiquetas con distintas finalidades: enmarcar citas bibliográficas,
enmarcar definiciones, mostrar ejemplos, etc. Algunas de estas etiquetas se muestran en la
siguiente tabla:

• <CITE>..</CITE>: Para enmarcar citas bibliográficas.

• <DFN>..</DFN>: Para enmarcar definiciones.
• <KDB>..</KDB>: Muestra el texto como si hubiera sido escrito por una máquina
antigua.
• <SAMP>..</SAMP>: Para distinguir los ejemplos del resto del texto.
• <PRE>..</PRE>: Para respetar los saltos de línea y los espacios en blanco.

Con todas estas etiquetas ya se puede empezar a hacer páginas sencillas. En los apartados
siguientes, veremos cómo insertar otros elementos que permiten mejorar el aspecto y añadir
interactividad a nuestras páginas, tales como imágenes, hiperenlaces, tablas, marcos,
formularios, ...

2.2.4.-Saltos de línea y líneas de separación.

Para introducir saltos de línea en nuestras páginas utilizamos la etiqueta <BR>. También
pueden insertarse saltos de línea introduciendo el siguiente código HTML: <p>&nbsp;</p>.

Para insertar líneas de separación la etiqueta <HR>. Esta etiqueta muestra una línea
horizontal, de tamaño determinable. Se trata de una etiqueta abierta, que admite varios
atributos:

• align=***: Funciona igual que para la etiqueta <P>

• noshade: Aparece una línea sólida, sin sombrear, evitando el efecto en tres
dimensiones.
• size=num: Indica la altura (en puntos o pixels) de la línea.
• width=*: Indica el ancho de la línea, y podemos especificarlo tanto en pixels
(width=numero) como en tanto por ciento de la ventana del navegador
(width="num%")

La etiqueta <HR> sin ningún parámetro muestra una línea horizontal que ocupa todo el ancho
de la pantalla.

Ejemplo 1:

<HR align=center size=20 width="50%">

Aparece una línea horizontal, centrada, de 20 puntos de alto, y que ocupa el 50% del ancho de
la pantalla.

19
Módulo 4
Creación de contenidos WEB

Ejemplo 2:

<HTML>

<HEAD>

</HEAD>

<BODY>

<p> Aquí tenemos líneas con distintos atributos, tras unos saltos de línea</p>

<br>

<br>

<br>

<br>

<HR align=center size=5 width="50%">

<br>

<HR align=left size=20 width="80%">

<br>

<HR align=right size=10 width="30%">

</BODY>

</HTML>

El código del ejemplo anterior mostraría en pantalla del navegador la página mostrada en la
Figura 2.7.

20
Módulo 4
Creación de contenidos WEB

Figura 2.7.- Saltos de línea y líneas de separación.

21
Módulo 4
Creación de contenidos WEB

2.3 INCORPORANDO IMÁGENES.

2.3.1 Introducción.

Sólo se deben insertan imágenes cuando sea estrictamente necesario: no se deben insertan
sin más ni más a pesar de que a los diseñadores nos resulte enormemente atractivo. Esto se
debe a que aumentan considerablemente la cantidad de información que debe transmitirse
por la Red. Por esta razón, conviene también optimizar las imágenes que vamos a colocar en
nuestras páginas. Es necesario, por tanto, disponer de algún programa adicional para trabajar
con las imágenes (como Adobe Photoshop, Paint Shop Pro, ......). En el siguiente apartado se
indicarán algunos consejos a seguir para realizar un buen diseño de página.

¿Cómo podemos obtener imágenes para nuestra página? Tenemos varias opciones,
como:

• Comprar imágenes prediseñadas.

• Descargar imágenes prediseñadas de la propia Red.
• Utilizar un escáner para escanear imágenes o dibujos hechos a mano.
• Diseñar nuestras propias imágenes con programas de dibujo.
• Utilizar cámaras digitales.

2.3.2 Formatos gráficos.

El formato de una imagen indica la forma en que esta se comprime, se codifica y se almacena
en un fichero.

Lógicamente existen multitud de formatos gráficos, prácticamente cada aplicación para edición
de imágenes tiene el suyo. Sin embargo, los navegadores no son capaces de interpretar todos
los formatos, y además algunos tampoco son recomendables para ser utilizados en páginas
Web por el excesivo tamaño que ocupan.

Se puede decir que los dos formatos que se han impuesto para su utilización en Internet son
los formatos GIF (Graphics Interchange Format) y JPEG (Joint Photographic Expert Group).
Estos dos formatos son compatibles con todos los navegadores. Ambos formatos, a pesar de
presentar características distintas tal y como describiremos a continuación, se basan en una
compresión de la imagen original. Gracias a esta compresión, las imágenes ocupan un menor
tamaño, lo que las hace ideales para Internet. En contra de lo que se pudiera pensar, esta
compresión no influye de manera determinante en la calidad de las imágenes.

Además de estos formatos, existen otros como BMP, TIFF, PNG, PCX, WMF, etc.

Formato GIF

Fue uno de los primeros formatos basado en compresión de imágenes en aparecer. Este
formato permite almacenar gráficos con un número limitado de colores, en particular 256
colores. Por este motivo, este formato debe utilizarse para almacenar imágenes que no
contengan demasiados colores, como por ejemplo logos. Su ratio de compresión es mayor que
en el caso del formato JPEG.

22
Módulo 4
Creación de contenidos WEB

Actualmente, los formatos GIF permiten almacenar una secuencia de imágenes entrelazadas
que dan gran dinamismo a las páginas, son los llamados GIF animados, de los que
hablaremos posteriormente.

Formato JPEG

Es el formato comprimido más utilizado en la red, ya que admite una cantidad de colores muy
elevada (más de dieciséis millones de colores. Por este motivo se utiliza fundamentalmente
para almacenar fotografías.

La compresión que realiza consiste en aproximar determinados colores de los puntos de la

imagen, con la característica de que esta aproximación es inapreciable para el ojo humano.

Otra característica importante de este formato es que permite especificar el grado de

compresión. Así, si se especifica un grado de compresión muy alto, el archivo será de tamaño
reducido a costa de una pérdida de calidad. En general, se puede decir que su alta relación
calidad/tamaño es lo que ha contribuido a la popularidad de este formato en Internet. Se
indican a continuación algunos consejos para realizar diseños de páginas con calidad.

Consejos para realizar un buen diseño de página

1. MINIMIZAR EL TAMAÑO DE LOS FICHEROS DE IMÁGENES.

ƒ Determinar correctamente el formato gráfico: BMP, PNG, JPG, GIF.

- PNG, JPG y GIF: Son formatos comprimidos (ocupan menos

espacio)
- JPG: Es un formato con pérdida.

• Comprime más a base de realizar aproximaciones de color con

los puntos de la imagen.
• Bueno para trabajar con imágenes que contengan muchos
colores.

- GIF:

• Es un formato sin pérdida.

• La compresión es menor que con el formato JPG.
• Es bueno para trabajar con imágenes que contengan pocos
colores o colores lisos.

• Reducir el tamaño de la imagen "cortándola" con algún programa de diseño gráfico.

• Reducir el número de colores utilizados en la imagen. Una imagen GIF puede utilizar
hasta 256 colores.

2. AUMENTAR EL TAMAÑO DE LAS IMÁGENES MEDIANTE EL REDIMENSIONADO, CON

WIDTH Y HEIGHT.

3. REPETIR LAS MISMAS IMÁGENES EN DISTINTAS PÁGINAS.

23
Módulo 4
Creación de contenidos WEB

Cuando se carga una imagen, se almacena en el disco duro, por lo que si aparece varias
veces en una página o, incluso en varias páginas, no es necesario volver a requerírsela al
servidor.

4. EVITAR EL ABUSO Y LA SOBRECARGA DE IMÁGENES EN LAS PÁGINAS.

Debemos recordar que una buena estética no se consigue incluyendo más imágenes o
gráficos, sino por saber elegir adecuadamente los mismos y saber distribuirlos
adecuadamente.

2.3.3 Insertando imágenes.

Para insertar una imagen en un documento HTML, basta con situar la siguiente etiqueta en el
lugar donde queremos que aparezca la imagen:

<IMG SRC="[Link]">

El parámetro SRC especifica el nombre del fichero que contiene la imagen. Se recuerda que
los formatos estándar en la red son GIF y JPG. Las últimas versiones de Netscape y Explorer
admiten también el formato PNG. Veamos un ejemplo:

Ejemplo:

<HTML>

<HEAD>

</HEAD>

<BODY>

<p> Vamos a insertar una imagen</p>

<p>&nbsp;</p>
<p><img border="0" src="../Imagenes/[Link]" width="534" height="360"></p>

</BODY>

</HTML>

El código anterior mostraría la siguiente página en el navegador:

24
Módulo 4
Creación de contenidos WEB

Figura 2.8.- Insertando una imagen en la página.

Referencia de texto dentro de las imágenes

Esto es útil cuando se tiene desconectada la opción de visualización de imágenes del

navegador para que no se descargue la imagen y vaya más rápido. Consiste en añadir a la
imagen una descripción para que podamos hacernos una idea de su contenido. La forma de
hacerlo es con el atributo ALT de la etiqueta <IMG>. Este parámetro especifica el texto que se
mostrará en lugar del gráfico en aquellos navegadores que no sean capaces de mostrarlo
(como el Lynx), y cuando el usuario haya desactivado la visualización de gráficos. Algunos
navegadores muestran también este texto cuando pasamos el ratón por encima de la imagen.
Por eso, aunque algunos usuarios no lleguen a verlo nunca, conviene ponerlo siempre. De
hecho, el estádar HTML 4.0 obliga a hacerlo.

Por ejemplo:

<IMG SRC="[Link]" ALT="Fotografía del Campus">

Tooltips en imágenes

Un tooltip se asocia a una imagen de la misma manera que a un párrafo: por medio del atributo
TITLE (de la etiqueta <IMG>)

<IMG SRC="[Link]" ALT="Texto de la referencia" TITLE="Texto del tooltip">

En el ejemplo anterior, en el que insertábamos la fotografía de los molinos, si quisiéramos

añadir una tooltip, escribiríamos la siguiente línea:

25
Módulo 4
Creación de contenidos WEB

<img border="0" src="../Imagenes/[Link]" width="534" height="360" alt="Molinos

de viento">

La página que veríamos en el navegador sería la mostrada en la figura 2.9.

Figura 2.9.- Imagen con tooltip.

2.3.4 Alineación de imágenes.

La alineación de imágenes hace referencia a la posición que ocupa la imagen dentro de la

línea de texto actual. Esta puede hacerse de dos formas, con las etiquetas <P> y </P> y el
carácter de espaciado (&nbsp;), o mediante el atributo ALIGN de la etiqueta <IMG>.

• ALIGN=TOP: la parte superior de la imagen alineada con la parte superior de la línea.

• ALIGN=MIDDLE: el centro de la imagen se sitúa a la altura de la línea de texto.
• ALIGN=BOTTOM: sitúa la base de la imagen a la altura de la línea de texto.
• ALIGN=LEFT: sitúa la imagen a la izquierda, desplazando el resto del texto a la
derecha.
• ALIGN=RIGHT: sitúa la imagen a la derecha, desplazando el resto del texto a la
izquierda.

En el siguiente ejemplo se muestra el código para obtener las distintas alineaciones, y en la

figura 2.10 se presenta el resultado obtenido en el navegador.

26
Módulo 4
Creación de contenidos WEB

Ejemplo:

<HTML>

<HEAD>

</HEAD>

<BODY>

<p> Vamos a insertar imágenes con distintas alineaciones</p>

<p>&nbsp;</p>

1.- ALINEACIÓN TOP

<img border="0" src="../Imagenes/[Link]" width="167" height="115" align=top>

<p>&nbsp;</p>

2.- ALINEACIÓN BOTTON <img border="0" src="../Imagenes/[Link]" width="167"

height="115" align=botton></p>

<p>&nbsp;</p>

3.- ALINEACIÓN LEFT <img border="0" src="../Imagenes/[Link]" width="167"

height="115" align=left></p>

<p>&nbsp;</p>

<p align="right">4.- ALINEACIÓN RIGHT <img border="0"

src="../Imagenes/[Link]" width="167" height="115" align=right></p>

</p>
<p>&nbsp;</p>

2.- ALINEACIÓN MIDDLE <img border="0"

src="../FrontPage2003/Imagenes/[Link]" width="167" height="115"
align=middle></p>

<p>&nbsp;</p>

</BODY>

</HTML>

27
Módulo 4
Creación de contenidos WEB

Figura 2.10.- Alineación de imágenes.

2.3.5 Dimensión y aspecto de las imágenes.

Para modificar la dimensión y algunos aspectos de las imágenes se utilizan los siguientes
atributos de la etiqueta <IMG>:

• HEIGHT: Indica la altura de la imagen en pixels. También se puede indicar en %.

• WIDTH: Indica la anchura de la imagen en pixels. Se puede indicar también en %.
• BORDER: Fija el ancho del borde a aplicar a la imagen en pixels (BORDER=0 elimina
el borde).
• HSPACE y VSPACE: Indican, respectivamente la separación horizontal y vertical, en
pixels, a la izquierda, derecha, por encima y por debajo de la imagen, con respecto a
los elementos que la rodean.

Se pueden utilizar los atributos de escalado HEIGHT y WIDTH (que son opcionales), incluso
aunque indiquemos el tamaño original de la imagen, con el fin de que el navegador pueda
reservar espacio para las imágenes antes de que éstas sean cargadas, acelerando de esta
manera el proceso de formateado de la página.

No es conveniente realizar escalados para disminuir el tamaño original de la imagen, pues esto
ralentiza el proceso de carga de la misma. Para reducir o recortar el tamaño de las imágenes,
es preferible utilizar algún programa de diseño gráfico.

28
Módulo 4
Creación de contenidos WEB

En la figura 2.11 se puede observar una imagen a la que se ha añadido borde:

<img border="7" src="../Imagenes/[Link]" width="539" height="379" >

Figura 2.11.- Imagen con borde.

2.3.6 Fondos de página como imágenes.

Para añadir una imagen como fondo de la página se utiliza el atributo BACKGROUND de la
etiqueta <BODY>:

<BODY BACKGROUND="fichero_imagen_fondo.ext">

fichero_imagen_fondo.ext es el fichero que contiene la imagen

El navegador forma un mosaico con la imagen que contiene el fichero que indicamos a través
del atributo BACKGROUND.

Si el usuario de nuestra página tiene deshabilitada la carga de imágenes en el navegador,

tampoco verá la imagen del fondo. En su lugar aparece el fondo gris por defecto.

NOTA: Por este motivo, es conveniente indicar (mediante el atributo BGCOLOR de

<BODY>) el color del fondo que más se asemeje al de la imagen que se ha elegido para
el fondo, para que el texto que se encuentre por encima siga resaltando.

29
Módulo 4
Creación de contenidos WEB

Si el tamaño de la imagen es menor que la ventana del navegador, este crea una especie de
mosaico repitiendo la imagen para cubrir toda la ventana tal y como se muestra en la figura
2.12.

Figura 2.12.- Añadiendo una imagen como fondo de la página.

El código para obtener la página anterior es el siguiente:

<html>

<head>
<title></title>
</head>

<body background="Imagenes/[Link]">

<p align="center"> &nbsp;</p>

<p align="center"> &nbsp;</p>

<p align="center"> &nbsp;</p>

<p align="center"> &nbsp;</p>

<p align="center"> &nbsp;</p>

<p align="center"> &nbsp;</p>

<p align="center"> &nbsp;</p>

30
Módulo 4
Creación de contenidos WEB

<p align="center"> &nbsp;</p>

<p align="center"> &nbsp;</p>

<p align="center"> <b><font color="#FF0000" size="6">Insertar una imagen como fondo

de página

</font></b> </p>

<p>&nbsp;</p>

<p align="center">

</p>

</body>

</html>

La imagen utilizada como fondo de imagen y contenida en el fichero [Link] a tamaño

real es la siguiente:

Figura 2.13.- Imagen utilizada para el fondo de página.

2.3.7 Gifs animados.

Los efectos dinámicos se programan en HTML dinámico o DHTML, que es una versión
ampliada de HTML que permite, como su propio nombre indica, dar mayor dinamicidad a las
páginas. En definitiva DHTML se refiere al uso de JavaScript y otros lenguajes que permiten
hacer nuestras páginas más vistosas con efectos como intercambiar dos imágenes al pasar el
puntero entre ellas, conseguir que se escriba un texto palabra a palabra, que al cargarse o
cerrarse las páginas se produzcan determinados efectos, etc.

Hay que indicar que los efectos dinámicos solo son soportados por las versiones posteriores a
la 4.0, tanto en Explorer como en Netscape.

Los GIF animados son un formato especial de ficheros GIF que almacenan una secuencia de
imágenes que adecuadamente enlazadas provocan sensación de movimiento. Incluso se les

31
Módulo 4
Creación de contenidos WEB

puede añadir sonido MIDI. Para crear la secuencia de imágenes es necesario recurrir a
programas específicos para crear GIF animados como por ejemplo los programas GIF
Construction Set, GIF Studio o Ulead GIF Animator.

Un ejemplo de ficheros GIF con los que se puede montar un GIF animado se muestran en la
figura 2.14.

Figura 2.14.- Secuencia de imágenes de GIF animado.

Una vez creado el GIF animado, este se almacena en un fichero, y se inserta en la página
Web de la misma manera que una imagen estática, a través de la etiqueta <IMG>.

Insertar GIF animados en nuestras páginas es muy recomendable ya que aportan gran
dinamismo y ocupan muy poco espacio. Además, para visualizarlos no se requiere de ningún
tipo de programa o Plug-In adicional.

2.3.8 Mapas de imágenes.

Un mapa es una imagen que contiene múltiples enlaces a múltiples páginas. Permiten que el
usuario pueda decidir a dónde quiere ir según pulse con el ratón sobre una zona de la imagen
u otra. Se les conoce también con el nombre de zonas sensibles o regiones activas.

En la figura 2.15 se muestra un mapa de imágenes formado por cuatro rectángulos, de manera
que cada uno nos da acceso a la página Web de la Universidad indicada.

Figura 2.15.- Mapa de imágenes.

32
Módulo 4
Creación de contenidos WEB

Existen dos tipos de mapas:

• Mapas gestionados por cliente-servidor.

• Mapas gestionados por el cliente.

Mapas gestionados por cliente-servidor.

Se requieren dos programas:

• Uno del lado del cliente.

• Uno del lado del servidor.

Cuando el usuario pulsa sobre una región activa determinada del mapa, el servidor lo detecta y
actúa en consecuencia.

Mapas gestionados por el cliente

Presentan las siguientes ventajas con respecto a los anteriores:

• Se ejecutan más rápidamente, ya que se ejecutan en el navegador del

visitante y no es necesario que hagan ninguna consulta al servidor.
• Se reduce la sobrecarga de datos en el servidor.
• Se reduce el tráfico por la Red.

Pero también tienen un inconveniente: que algunos navegadores antiguos no los soportan.

Elaboración de mapas

Se deben seguir los siguientes pasos:

1. Diseñar la imagen que va a servir de mapa con algún programa de diseño

gráfico (conviene utilizar formatos GIF ó JPG)
2. Detectar las coordenadas de las regiones activas ("zonas sensibles") del
mapa.
3. Escribir el código HTML correspondiente al mapa y sus respectivas zonas
sensibles.

Zonas Sensibles

Las zonas sensibles pueden ser de tres formas distintas:

• Rectangulares
• Circulares
• Poligonales

Las coordenadas que hay que anotar en cada caso son distintas:

33
Módulo 4
Creación de contenidos WEB

¾ Rectangulares: Coordenadas del ángulo superior izquierdo (Xsup,Ysup) y del inferior

izquierdo (Xinf,Yinf)
¾ Circulares: Coordenadas (X,Y) del centro, y el radio (R)
¾ Poligonales: Coordenadas de todos los vértices del polígono (X1,Y1), (X2,Y2), (X3,Y3),
...

Definición del mapa

Las etiquetas utilizadas son:

ƒ Para definir el mapa: <MAP NAME= "Nombre_Mapa"> .. </MAP>

ƒ Para definir las zonas sensibles: <AREA>
ƒ Para indicar la imagen que actúa de mapa: <IMG>, con el atributo USEMAP: <IMG
SRC="Imagen_Mapa.ext" USEMAP= "#Nombre_Mapa">

Atributos de la etiqueta <AREA>

• SHAPE: Define la forma geométrica de la zona sensible. Los valores que puede tomar
son:

o SHAPE="rect"
o SHAPE="circle"
o SHAPE="polygon"
o SHAPE="default"

El valor "default" define el área completa del mapa. Se utiliza para definir zonas no activas.

• COORDS: Define las coordenadas de los límites de las zonas sensibles:

o SHAPE="rect" COORDS="Xsup,Ysup,Xinf,Yinf"
o SHAPE="circle" COORDS="X,Y,R"
o SHAPE="polygon" COORDS="X1,Y1,X2,Y

• HREF: Para indicar el enlace correspondiente a la zona sensible definida.

• NOHREF: No contiene valores, se utiliza para indicar que no hay enlace con ninguna otra
dirección o recurso.

Ejemplo:

<AREA SHAPE="DEFAULT" NOHREF>

• ALT: Cuando nos situamos encima de una zona sensible, el ratón cambia de forma y,
además, se nos informa de la dirección (enlace) a la que accederemos si hacemos click
con el ratón. Este atributo se utiliza para que, además del enlace, aparezca el mensaje que
nosotros indiquemos.

34
Módulo 4
Creación de contenidos WEB

Ejemplo:

<AREA SHAPE="RECT" COORDS= "40,40,100,80" HREF="[Link]"

ALT="Éste es el documento del Tema 1: Introdución al HTML">

ESQUEMA DE LA DEFINICIÓN DEL MAPA EN HTML

<MAP NAME="Nombre_Mapa">

<AREA SHAPE="Forma" COORDS="X,Y,.." HREF="Enlace" ALT="Texto identificativo">

.........................................

<AREA SHAPE="Default" NOHREF>

</MAP>

<IMG SRC="Fichero_Imagen_Mapa" USEMAP="#Nombre_Mapa">

De esta manera, el código HTML de la página mostrada en la figura 4.8 es el siguiente:

<HTML>

<HEAD>

</HEAD>

<BODY>

<p align="center"><map name="FPMap0">

<area href="[Link] shape="rect" coords="2, 4, 272, 197">
<area href="[Link] shape="rect" coords="271, 4, 544, 201">
<area href="[Link] shape="rect" coords="1, 197, 273, 393">
<area href="[Link] shape="rect" coords="274, 200, 544, 393">
</map>
<img border="0" src="Imagenes/[Link]" width="545" height="394"
usemap="#FPMap0"></p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>

</BODY>

</HTML>

35
Módulo 4
Creación de contenidos WEB

Consejos a considerar cuando nuestra página contenga mapas

Hay que tener en cuenta que pudiera darse el caso de que el usuario del mapa disponga de un
navegador que no soporta mapas. Por esta razón, conviene:

ƒ Colocar, al lado del mapa, enlaces simples de texto.

ƒ Añadir enlaces con imágenes al lado del mapa.

Existen multitud de herramientas para la elaboración de mapas que generan el código HTML
de forma automática. Por ejemplo:

WEB HOTSPOT ([Link]

36
Módulo 4
Creación de contenidos WEB

2.4 HIPERVÍNCULOS.

2.4.1 Introducción.

Los hipervínculos son la característica más importante del lenguaje de programación HTML,
pues permiten "saltar" de unas páginas a otras. Son, por tanto, la utilidad básica del hipertexto,
que nos permite indicar zonas de texto o imágenes que, si son seleccionados por el lector del
documento, nos trasladan a otros documentos o otras zonas del documento actual.

Un hiperenlace está formado por tres elementos:

o DESTINO: Indica el destino al que se dirige al usuario que haga click en el enlace.
Puede ser una imagen, una película, otra página, un lugar dentro de la misma o de
otra página (un "ancla"), un documento de texto, etc.
o RÓTULO: Es lo que ve el usuario y sobre lo que hace click para acceder a algún
otro sitio, fichero, imagen, etc. Puede ser cualquier elemento HTML: no tiene por
qué ser necesariamente texto, sino que podemos usar encabezados, imágenes,
etc.
o OBJETIVO: Determina el lugar en el que se visualizará el destino (una determinada
ventana o una ventana nueva) Normalmente se ignora o se deja a elección del
navegador.

Los hipervínculos pueden definirse dentro de cualquier elemento HTML: listas, párrafos de
texto, tablas, formularios,...

Cuando el rótulo del hiperenlace es un texto, éste suele aparecer resaltado sobre el texto
normal, en color azul y subrayado. En el caso de las imágenes, si tienen definido un borde,
este aparecerá resaltado en color azul. Es posible cambiar el color de los hipervínculos
mediante los atributos de <BODY>.

La mayoría de los navegadores cambian el aspecto del cursor cuando éste pasa sobre una
zona "sensible" (un hiperenlace), y en la parte baja de la pantalla se indica el hiperenlace que
se activará si se pulsa en dicha zona.

El texto que define el hiperenlace debe ser explicativo del documento al que hacemos
referencia: debemos evitar referencias específicas que hagan al texto poco legible. Igualmente,
deberá concordar con el texto del párrafo donde se englobe el hiperenlace, evitando el uso de
frases como "pulse aquí".

Por ejemplo:

"Puede encontrar mas información sobre vacas pulsando aquí"

podría sustituirse por:

"Disponible más información sobre vacas"

El usuario que lea este texto ya sabrá, al verlo resaltado, que debe pulsar ahí si desea acceder
a esa información complementaria.

37
Módulo 4
Creación de contenidos WEB

Utilizaremos los hipervínculos para dividir de forma conveniente la información, pues

conviene evitar que los documentos HTML sean excesivamente largos. Para ello, podemos
dividirlos en distintos documentos, a los que se puede acceder por medio de hipervínculos ( a
partir de un índice temático, por ejemplo).

Además de enlaces con el servicio http, podremos utilizar cualquiera de los servicios de
Internet que se pueden expresar mediante una dirección URL. Es posible, por tanto, indicar
enlaces a servidores FTP, GOPHER o de NEWS, indicando como URL aquélla que identifica
al servidor al que queremos acceder.

Es importante indicar el nombre completo de la máquina a la que se accede -es decir, el

nombre y el dominio- para asegurarnos de que el destino del hiperenlace sea accesible a
todos los usuarios, independientemente del lugar desde el que éstos se conecten (ya sea
desde nuestra red local o desde una máquina externa).

Para crear un hipervínculo se utiliza la etiqueta <A>..</A>.

<A HERF="[Link]">Pulsa aquí para acceder a la Universidad de Alcalá</A>

2.4.2 Tipos de hipervínculos.

Se pueden crear hasta tres tipos diferentes de hipervínculos, tal y como se muestra en la
siguiente tabla:

TIPOS DE HIPERVÍNCULOS

• ENLACES AL PRINCIPIO DE OTRO DOCUMENTO HTML.

• ENLACES A UNA DETERMINADA POSICIÓN DEL MISMO DOCUMENTO.

• ENLACES A UNA DETERMINADA POSICIÓN DE OTRO DOCUMENTO HTML.

2.4.3 Hipervínculos al principio de otro documento HTML.

Es el método más simple y sencillo de crear hipervínculos. Utiliza la etiqueta <A>..</A> con la
siguiente estructura:

<A HREF=URL>Descripción_Vínculo</A>

El texto indicado entre las etiquetas de comienzo (<A>) y de fin (</A>) se presentará de forma
resaltada, y en el caso de seleccionar dicho texto, el documento actual cambiará por el fichero
especificado en la URL. Entre las etiquetas del hiperenlace, se puede incluir también
cualquiera de las etiquetas que existen en HTML cambiar el aspecto del texto afectado por el
hiperenlace.

38
Módulo 4
Creación de contenidos WEB

Igualmente, se puede indicar una imagen como hiperenlace: para ello, entre las etiquetas <A>
y </A>, debemos indicar la inclusión de la imagen:

<A HREF="URL"><IMG SRC="[Link]"> Puede haber texto </A>

En este caso, el borde de la imagen aparecerá resaltado para indicar que es un hiperenlace.

2.4.4 Hipervínculo dentro de la página.

Este tipo de hipervínculos se utiliza cuando la extensión de la página es considerable, con el

fin de facilitar al visitante el acceso a cada sección de esta.

Para crear un hipervínculo a una posición dentro de la misma página, los pasos a seguir son
los siguientes:

• Crear una marca de acceso en el punto al que se desea acceder, de la siguiente manera:

<A NAME="Nombre_Referencia">Texto del ancla</A>

• De esta forma indicamos los puntos del documento que son accesibles directamente.
Estos puntos reciben el nombre de "elementos ancla". A cada ancla se le dará un nombre
diferente, que será el que después se utilice para referenciarlo. El texto que define a la
etiqueta no tendrá ningún tipo de resalte, y solo se utiliza como punto de destino del
hiperenlace.

• En otro lugar del mismo documento, crear el enlace a esa marca:

<A HREF="#Nombre_Referencia"> Descripción_Vínculo </A>

• Así creamos un enlace a la zona del documento actual que se había marcado con la
etiqueta indicada. De esta forma, se puede acceder a puntos determinados o secciones de
un documento de forma directa.

• La utilidad principal es la creación de índices en documentos largos: al comienzo del

documento se especifica el índice con enlaces a las distintas anclas, y dentro del
documento se indica el comienzo de cada apartado con el ancla que lo define.

• También es posible acceder a un ancla de un documento externo. En este caso en el

documento HTML destino, al que por ejemplo llamamos [Link], que contiene las
marcas escribimos:

<A NAME="Nombre_Referencia">Texto del ancla</A>

En el documento HTML que contiene los hipervínculos, al que podríamos denominar

[Link], hacemos referencia a las anclas o marcas del otro documento mediante el código:

<A HREF="[Link]#Nombre_Referencia"> Descripción_Vínculo </A>

39
Módulo 4
Creación de contenidos WEB

Como se puede observar, además de indicar el nombre del ancla se indica el nombre del
fichero que la contiene.

Ejemplo:

a) Enlace a una determinada posición dentro de la misma página:

<A HREF="[Link]#Primero"> Tema 1 </A>

b) Enlace a una determinada posición de otra página:

<A HREF="[Link] Tema 1 </A>

2.4.5 Hipervínculo a una determinada posición de otro documento HTML.

Básicamente, se crean igual que los enlaces a una posición del mismo documento, con la
diferencia de que ahora, en la referencia, se indica (mediante una URL) la localización del
fichero que contiene la marca a la que se desea acceder.

Los pasos a seguir son los siguientes:

• Crear una marca de acceso en el punto del segundo documento al que se desea acceder,
de la siguiente manera:

<A NAME="Nombre_Referencia"></A>

• En el primer documento, crear el enlace a esa marca:

<A HREF="Localización_Fichero#Nombre_Referencia"> Descripción_Vínculo </A>

2.4.6 Imágenes como hipervínculos.

Suele ser común incluir hiperenlaces dentro de las imágenes. En este caso, por defecto, el
navegador le pone un borde a la imagen para indicar que efectivamente es un enlace. A pesar
de ser una opción muy práctica, en muchas ocasiones resulta bastante antiestética. Por ello,
conviene alterar el grosor del borde de la imagen, o incluso eliminarlo por medio del atributo
BORDER (BORDER=0).

Las imágenes juegan un papel fundamental en el diseño de páginas Web, pero debemos
saber cómo utilizarlas, con el fin de optimizar el proceso de carga de las mismas.

Para insertar una imagen como hipervínculo procedemos de manera muy similar que con el
texto. En definitiva insertamos la imagen entre las etiquetas de hipervínculo <A>..</A>, de la
siguiente manera:

40
Módulo 4
Creación de contenidos WEB

<A HREF="dirección destino"><IMG SRC="fichero_imagen">Texto hipervínculo</A>

Un posible ejemplo es el siguiente:

Ejemplo:

<A HREF="[Link]"><IMG SRC="imagen_logo_uah.jpg">Enlace U. de Alcalá</A>

2.4.7 Mejorando el aspecto de los hipervínculos.

Para mejorar el aspecto de los hipervínculos tenemos varias alternativas, por ejemplo
podemos añadirles tooltips ó utilizar imágenes tal y como se describió en el apartado anterior.

• Añadirles tooltips:

<P><A HREF="#Tema1" TITLE="Éste es el Tema 1 de la asignatura"> Tema 1 </A></P>

• Añadir alguna imagen al texto del hipervínculos, o bien hacer que el propio hipervínculos
sea una imagen:

<P><A HREF="[Link]"> <IMG SRC="[Link]"> Mi página Web </A></P>

Además del aspecto, se pueden mejorar los hipervínculos añadiéndoles nuevas

funcionalidades tal y como se describe en los siguientes puntos.

Etiqueta <LINK>

Sólo se usa en la cabecera de los documentos, y no tiene ningún efecto. Su utilidad consiste
en especificar relaciones con otros documentos, relaciones que permitirán, posteriormente, a
otros programas localizar todo tipo de documentos interrelacionados.

La sintaxis es la siguiente:

<LINK REL=relación HREF=URL>,

donde "relación" expresa una relación de un determinado tipo.

• ALTERNATE: Indica la localización de un documento similar alternativo (por ejemplo,

una traducción a otro idioma)
• STYLESHEET: Indica la localización de un fichero de estilos aplicables al documento.
• CONTENTS: Indica la localización de un documento que contiene una tabla de
contenidos del grupo de documentos al que pertenece el actual.
• START, NEXT, PREV: Indican la localización del primero, siguiente y anterior de los
documentos de la colección.

41
Módulo 4
Creación de contenidos WEB

Dirigir enlaces a ventanas determinadas

Se consigue con el atributo TARGET="título", siendo "título" el título de la nueva ventana

donde se visualizará la página correspondiente.

<A HREF="[Link]" TARGET="Tema 1: Introducción a HTML">

Teclas de acceso directo como hipervínculos

Se hace con el atributo ACCESSKEY="carácter":

<A HREF="[Link]" ACCESSKEY="W"> TEMA 1 </A> (ctrl-W)

Cambiar el color de los enlaces

Con el atributo LINK de la etiqueta <BODY>, indicamos el color que tienen los enlaces de la
página:

<BODY LINK=""#******>

Para cambiar el color de dichos enlaces, se usan tres atributos de <BODY>:

• LINK: Para cambiar el color de los enlaces que todavía no han sido visitados.
• VLINK: Para cambiar el color de los enlaces que ya han sido visitados.
• ALINK: Para cambiar el color de un enlace cuando el usuario hace click sobre él.

Para finalizar, algunos consejos a considerar a la hora de crear hipervínculos.

Consejos para la creación de hipervínculos

ƒ Evitar un número excesivo de hipervínculos en nuestros documentos.

ƒ Crear hipervínculos descriptivos de términos técnicos.

ƒ Crear hipervínculos descriptivos de personas y organizaciones.

ƒ Intentar que los enlaces contengan una descripción breve pero precisa y descriptiva.

ƒ Comprobar la apertura y cierre de todas las etiquetas: si omitimos el cierre de alguna

etiqueta, algunos navegadores pueden provocar resultados inesperados.

Como anexo a este capítulo, se indican algunas notas relacionadas con el formato de las
direcciones URL.

42
Módulo 4
Creación de contenidos WEB

ANEXO: Formato de las direcciones URL

Las siglas URL son el acrónimo de "Uniform Resource Locator" (que en castellano quiere
decir: "localizador uniforme de recursos"), y es el sistema que permite localizar y acceder, de
forma sencilla, a cualquier recurso de la Red, desde un navegador de la WWW.

Con la WWW se pretende unificar el acceso a la información de servicios que antes eran
incompatibles entre sí, para que todos los servicios de Internet sean accesibles a través de
la WWW. De esta forma, desde un mismo programa se puede tener acceso a todos los
recursos de un modo uniforme, y permite que los documentos HTML incluyan enlaces a
otras fuentes de información en servicios como FTP, gopher, WAIS, etc ...

Todos los sitios Web disponen de una "dirección URL", que es una dirección particular
mediante la cual los usuarios pueden acceder a la información contenida en ellos.

Utilización y formato

Las direcciones URL se utilizarán para definir el documento de destino de los hipervínculos,
para referenciar las imágenes y cualesquiera otros ficheros que deseemos incluir dentro de un
documento HTML. Cada elemento presente en Internet tiene una dirección URL que lo
define, ya se encuentre en un servidor de la WWW, FTP, gopher o las News.

El formato de una URL será de la forma:

servicio://[Link]:puerto/camino/fichero

1. Servicios

• http: ("HyperText Transport Protocol") Es el protocolo utilizado para transmitir

documentos de hipertexto. Todas las páginas escritas en HTML que estén ubicadas en
servidores Web, deberán ser referenciadas mediante este servicio. El servicio http
indicará siempre conexión a un servidor de la WWW.

• https: ("HyperText Transport Protocol Secure") Es el protocolo para la conexión a

servidores seguros de la WWW. Estos servidores pertenecen, normalmente, al ámbito
comercial, y utilizan encriptación para evitar que los datos enviados sean
interceptados por terceros. Suele tratarse de datos como números de tarjetas de
crédito, datos personales, claves de acceso, etc.

• ftp: ("File Transfer Protocol") Es el protocolo de transferencia de ficheros, y se utiliza

cuando la información a la que se desea acceder se encuentra en un "servidor ftp". Por
defecto, se accederá a un servidor anónimo (mediante el usuario "anonymous"). Si
disponemos de un nombre de usuario en ese servidor ftp, se usará:

[Link]

y luego habrá que introducir la clave de acceso.

• gopher, wais: En cualquiera de estos servicios de localización de información, se

indicará el directorio para localizar el recurso concreto.

43
Módulo 4
Creación de contenidos WEB

• news: Accede al servicio de news (grupos de noticias), siempre y cuando el

navegador sea capaz de presentar este servicio (no todos los navegadores lo
soportan). Se indicará el servidor de news y, como camino, el grupo de noticias al que
se desea acceder:

ne[Link]

• telnet: Es una emulación de terminal remoto, para conectarse a una máquina

multiusuario, y se utiliza para acceder a cuentas públicas (como, por ejemplo, la de
biblioteca). Lo normal es llamar a una aplicación externa que realice la conexión. En
este caso, se indicará la máquina y el "login" o "nombre de usuario":

telnet://[Link]@login.

• mailto: Se utiliza para enviar correo electrónico. No todos los navegadores son
capaces de dar este servicio. En este caso, sólo se indicará la dirección de correo
electrónico del destinatario:

[Link]

2. Maquina y dominio

En "[Link]" indicaremos el servidor que nos proporciona el recurso. En este caso,

se utilizará el esquema IP para identificar la máquina (el servidor), mediante el nombre de la
máquina y el dominio.

Un ejemplo de dominio sería:

[Link],

y un nombre válido de máquina sería:

[Link]

Es muy importante indicar siempre el dominio, ya que algunos usuarios se conectarán a

nuestras páginas desde servidores externos a nuestra red local, y si no indicamos el
dominio, las URL's que especifiquemos no podrán ser seguidas por los navegadores externos.

Si en lugar de "[Link]" utilizamos simplemente "www2", nuestro sitio Web será

perfectamente accesible desde cualquier máquina de nuestra red local. Sin embargo, si fuese
referenciado desde una red con distinto dominio, la máquina "www2" sería la máquina llamada
así en el dominio remoto, si es que existe, que no es la que deseamos referenciar.

3. Puerto

El puerto TCP es opcional y lo normal es no ponerlo si el puerto es el mismo que utiliza

normalmente el servicio. Sólo se utilizará cuando el servidor utilice un puerto distinto al puerto
por defecto.

44
Módulo 4
Creación de contenidos WEB

4. Camino

El camino es la ruta de directorios que hay que seguir para encontrar el documento que se
desea hacer referencia. Para separar los subdirectorios se utiliza la barra de UNIX (/), que se
usa por convenio por ser este tipo de máquinas las más utilizadas como servidores. El nombre
de los subdirectorios y del fichero referenciado puede ser de más de ocho caracteres, y se
tendrá en cuenta la diferencia entre mayúsculas y minúsculas.

La extensión de los ficheros también es importante, ya que gracias a ella el servidor sabe qué
tipo de documento es al que se desea acceder, e indica al cliente (navegador) el modo en que
debe tratar dicho documento. Para definir los tipos de documentos se utilizan los tipos MIME.
Las extensiones más normales con sus tipos correspondientes son:

• TEXT/HTML (extensión .html ó .htm): documento HTML.

• TEXT/PLAIN (extensión .txt): texto plano. Es la opción que el navegador toma por
defecto.
• IMAGE/GIF (extensión .gif): imagen con formato GIF.
• IMAGE/JPEG (extensión .jpg ó .jpeg): imagen con formato JPG.

Los navegadores realizan una acción para cada tipo de fichero, y sólo los que sean del
tipo TEXT/HTML serán mostrados como documentos HTML. En el caso de que el tipo
no sea conocido por el cliente, se considerará por defecto como un documento de texto
normal (TEXT/PLAIN)

Si no se indica un fichero y sólo referenciamos un directorio, accederemos a la página

HTML por defecto de ese directorio. En el servidor están definidos unos ficheros para
ser usados cuando no se indica un fichero concreto, y suelen llamarse "[Link]" ó
"[Link]". En el caso de que no exista este fichero por defecto, se mostrará un
listado de todos los documentos que forman el directorio. Este fichero es la página
inicial ("home page") del servidor o del espacio Web.

Url's absolutas y relativas

Para definir una URL podemos utilizar direcciones absolutas o relativas:

Por dirección absoluta entendemos una dirección URL completa, es decir, del tipo:

[Link]

En una dirección relativa, hay parte de la dirección URL que no especificamos: todo aquello
que no pongamos se tomará de la URL del documento que contiene el hipervínculos.

Por ejemplo, si no indicamos el servidor, se considerará el actual, y si sólo indicamos un

fichero html, se considerará que se encuentra en el mismo servidor y el mismo directorio que
el documento que lo referencia.

Una URL relativa comenzará siempre por un nombre de directorio o por un fichero, ya que
en este caso se asume que el servicio y el servidor - ([Link] - son los
mismos del documento actual.

45
Módulo 4
Creación de contenidos WEB

Las direcciones URL relativas pueden comenzar de alguna de las siguientes maneras:

• Por una barra /, para indicar que el camino del fichero se especifica desde el
directorio raíz del servidor.
• Por dos puntos y una barra ../, que significa subir una posición en la estructura de
directorios. Se considerará, pues, a partir del directorio anterior al actual.
• Por un nombre de fichero o directorio, considerándose éste a partir del directorio
actual.

Es una buena costumbre utilizar direcciones relativas, ya que, además de ahorrarnos tiempo
de escritura, nos permite cambiar la página de directorio o de servidor sin necesidad de
cambiar todos los enlaces, haciendo, por tanto, al documento más "portable".

46
Módulo 4
Creación de contenidos WEB

2.5 TABLAS.

2.5.1 Introducción.

Las tablas son uno de los elementos más interesantes en HTML. Se puede definir una tabla
como un conjunto de celdas agrupadas en filas y columnas. Las celdas de una tabla pueden
contener distintos elementos como texto, imágenes, etc.

Las tablas son, posiblemente, la manera más clara de organizar la información en un

documento HTML. También es el modo más adecuado de maquetar texto y gráficos de forma
más controlada que con los parámetros ALIGN.

2.5.2 Definición de una tabla en HTML.

Las tablas se definen de la siguiente manera: en primer lugar, se establecen las

características de la tabla; a continuación, las características de cada fila y, por último, las
de cada celda.

La definición de una tabla en HTML se realiza mediante el uso de las siguientes etiquetas:

ƒ Para indicar el inicio y el final de la tabla:

<TABLE BORDER>..</TABLE>

ƒ El atributo BORDER es opcional, y se utiliza para indicar si queremos que aparezca el

borde que delimita cada celda.
ƒ
ƒ Para delimitar filas:

<TR>..</TR>

ƒ La etiqueta </TR> es opcional.

ƒ Para delimitar columnas:

<TD>..</TD>

ƒ La etiqueta </TD> es opcional.

47
Módulo 4
Creación de contenidos WEB

ESQUEMA DE UNA TABLA EN HTML

<TABLE BORDER>

<TR>

<TD>Columna 1 de la primera fila</TD>

<TD>Columna 2 de la primera fila</TD>

............

</TR>

<TR>

<TD>Columna 1 de la segunda fila</TD>

<TD>Columna 2 de la segunda fila</TD>

............

</TR>

</TABLE>

Por ejemplo, una tabla con 2 filas y 3 columnas se declara del siguiente modo:

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

<TR>
<TD>2,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>

</TABLE>

Con este código, el navegador mostraría la siguiente página:

48
Módulo 4
Creación de contenidos WEB

Figura 2.16.- Tabla de 2 filas y tres columnas.

Como se puede observar, esta tabla no tiene muy buen aspecto. Quedaría mejor con unos
bordes, con un color de fondo, con mayor espacio entre celdas, o mayor anchura de las
mismas, etc. Éstas son las cosas que podemos cambiar con los atributos de las etiquetas
<TABLE>, <TR> y <TD>.

2.5.3 Atributos de las tablas.

Como se indicaba en el apartado anterior, los atributos de las tablas nos van a permitir
modificar su aspecto. Se definen a continuación los principales.

Como indicar los tipos de borde

Con el atributo BORDER=n de la etiqueta <TABLE>, donde "n" es un número que indica el
grosor del borde en pixeles. Si no se escribe este atributo, la tabla se imprime sin bordes.

Encabezados

Los encabezados son las celdas situadas en la primera fila y en la primera columna. Por
defecto, el texto de estas celdas aparecerá en negrita y centrado.

La etiqueta utilizada para delimitar las celdas del encabezado es <TH>: se sustituye <TD> por
<TH> en las celdas del encabezado. Los atributos de la etiqueta <TH> son los mismos que los
de la etiqueta <TD>.

49
Módulo 4
Creación de contenidos WEB

Ejemplo:

<TABLE BORDER>

<TR>

<TH>LUNES

<TH>MARTES

<TR>

<TD>INGLÉS

<TD>FRANCÉS

</TABLE>

En el navegador visualizaríamos la siguiente página:

Figura 2.17- Tabla con encabezados.

Título de la tabla

El título de una tabla se define por medio de la etiqueta <CAPTION>, que se sitúa después de
la etiqueta <TABLE> que indica el inicio de la tabla. Esta etiqueta admite sólo un parámetro,
ALIGN, que, por defecto, es igual a "top". Si lo definimos como "bottom", el título se colocará
al final de la tabla en lugar de al comienzo.

50
Módulo 4
Creación de contenidos WEB

Ejemplo:

<TABLE BORDER>

<CAPTION>HORARIO IDIOMAS</CAPTION>

<TR>

<TH>LUNES

<TH>MARTES

<TR>

<TD>INGLÉS

<TD>FRANCÉS

</TABLE>

La etiqueta <CAPTION> permite utilizar las etiquetas de estilos (negrita, cursiva, etc.). En la
figura 2.18 se puede el aspecto de la página correspondiente al código HTML del ejemplo
anterior.

Figura 2.18.- Tabla con título.

Ancho y alto de las tablas

Para indicar el alto y el ancho de una tabla se utilizan los atributos HEIGHT y WIDTH de la
etiqueta <TABLE>, respectivamente. Estos dos parámetros (alto y ancho) se pueden indicar
en pixels o en % relativo al tamaño de la pantalla:

51
Módulo 4
Creación de contenidos WEB

<TABLE BORDER HEIGHT=75% WIDTH=80%>

NOTA: Cuando la altura y la anchura se especifican en % en lugar de en pixels, la tabla

se adapta al tamaño de la ventana del navegador, si es que ésta se cambia de tamaño.

Ancho y alto de las celdas

En este caso se utilizan los atributos HEIGHT y WIDTH de la etiqueta <TD> (ó <TH>, si se
trata de celdas del encabezado), e igualmente se pueden indicar en pixels o en % relativo al
tamaño de la tabla:

<TD HEIGHT=75% WIDTH=80%>

NOTA: HTML no permite especificar diferentes tamaños para celdas pertenecientes a

una misma columna, ni diferentes alturas para celdas pertenecientes a la misma fila.

Espacio entre celdas

Lo especificamos mediante los atributos CELLSPACING y CELLPADDING de la etiqueta

<TABLE>:

• CELLSPACING: Indica el espacio entre celda y celda.

• CELLPADDING: Indica el espacio entre el borde de la celda y el texto que hay en su

interior.

Ejemplo:

<TABLE HEIGHT=75% WIDTH=80% CELLSPACING=10 CELLPADDING=5>

Alineación del contenido de las celdas

Se consigue con los atributos ALIGN y VALIGN de la etiqueta <TD>:

• ALIGN="alineación": Para definir la alineación horizontal, siendo "alineación" uno de

los valores: CENTER, LEFT ó RIGHT.

• VALIGN="alineación_vertical": Para definir la alineación vertical, donde

"alineación_vertical" debe ser uno de los siguientes: TOP, MIDDLE ó BOTTOM.

Instar una tabla dentro de una celda. Tablas anidadas.

El código HTML requerido para anidar tablas es el siguiente:

52
Módulo 4
Creación de contenidos WEB

<TABLE BORDER>

<TR>

<TD>Países Europeos

<TD><TABLE BORDER>

<TR><TD>España

<TD>Madrid

<TR><TD>Francia

<TD>París

<TR><TD>Reino Unido

<TD>Londres

</TABLE>

<TR>

.............

</TABLE>

El resultado del código anterior sería el mostrado en la figura 2.19.

Figura 2.19.- Tablas anidadas.

53
Módulo 4
Creación de contenidos WEB

NOTA: El uso de tablas dentro de celdas resulta muy confuso. Hay, incluso,
navegadores que no pueden manejarlas.

2.5.4 Tablas e imágenes.

En las celdas de una tabla podemos insertar imágenes. También podemos definir una imagen
de fondo para una tabla o para una celda o fila completa.

Insertar una imagen dentro de una celda

Para insertar una imagen en una celda basta con incluir la etiqueta <IMG SRC="[Link]">
entre las etiquetas <TD>..</TD>:

<TD><IMG SRC="[Link]"></TD>

Se muestra a continuación un código de ejemplo:

<div align="center">

<TABLE BORDER height="110">

<TR>
<TD>
<p align="center"><b><font size="5"><font color="#FF0000">ÁGUILA</font>

</font></b>
<TD>
<p align="center"><b><font size="5"><font color="#FF0000">CEBRA</font>

</font></b>
<TD>
<p align="center"><b><font size="5" color="#FF0000">CIERVO</font></b>

<TD>
<p align="center"><b><font size="5" color="#FF0000">LEÓN</font></b>

<TR>
<TD>
<img border="0" src="Imagenes/[Link]" width="163" height="246">

<TD>
<img border="0" src="Imagenes/[Link]" width="279" height="191">

<TD>
</TD><img border="0" src="Imagenes/[Link]" width="210" height="312">

<TD>

54
Módulo 4
Creación de contenidos WEB

<img border="0" src="Imagenes/[Link]" width="168" height="247">

</TABLE>

</div>

Con este código, en el navegador se mostraría la página de la figura 2.20:

Figura 2.20.- Tabla con imágenes insertadas en celdas.

Imagen de fondo de una tabla

Se puede añadir una imagen de fondo a la tabla con el atributo

BACKGROUND="Nombre_Fichero_Imagen" dentro de la etiqueta <TABLE>.

Ejemplo:

<TABLE width=80% BACKGROUND="[Link]">

NOTA: Si la imagen es menor que las dimensiones de la tabla, el navegador la repite a

modo de mosaico.

Imagen de fondo en una celda o en una fila completa

Igual que para el caso de la tabla, se establece con el atributo BACKGROUND="#******" de

las etiquetas <TD> y <TR> respectivamente.

55
Módulo 4
Creación de contenidos WEB

Ejemplos:

<TD BACKGROUND="[Link]">

<TR BACKGROUND="[Link]">

2.5.1 Fusión de celdas.

Para fusionar celdas, se utilizan los atributos ROWSPAN y COLSPAN de las etiquetas <TD> y
<TH>:

• ROWSPAN=n: Indica que esa celda se extiende "n" filas.

• COLSPAN=n: Indica que esa celda se extiende "n" columnas.

Ejemplo: <TD ROWSPAN=3>

Un código que combina filas y columnas en una tabla de cuatro filas y cuatro columnas es el
siguiente:

<table border="5" width="97%">

<tr>
<td >&nbsp;</td>
<td >&nbsp;</td>
<td >&nbsp;</td>
<td rowspan="4" >&nbsp;</td>
</tr>

<tr>
<td width="219">&nbsp;</td>
<td colspan="2" rowspan="2">&nbsp;</td>
</tr>

<tr>
<td width="219">&nbsp;</td>
</tr>

<tr>
<td width="219">&nbsp;</td>
<td width="247">&nbsp;</td>
<td>&nbsp;</td>
</tr>

</table>

56
Módulo 4
Creación de contenidos WEB

Con este código en el navegador visualizamos la página de la figura 2.21.

Figura 2.21.- Tabla con celdas combinadas.

57
Módulo 4
Creación de contenidos WEB

2.6 MARCOS.

2.6.1 Introducción.

Un marco (ó "frame") es una zona o sector de espacio de trabajo que puede actuar de
forma independiente al resto del documento HTML. A todos los efectos, a los marcos se les
puede considerar como páginas Web independientes, aunque coexistan dentro de la misma
ventana. Cada marco tendrá sus propios bordes y barras de desplazamiento. Así, una página
Web con marcos se divide, en la práctica, en varias páginas independientes.

En la figura 2.22 se presenta un ejemplo de página con dos marcos. Cada marco contiene una
página, el de la izquierda contiene una página índice, y el de la derecha se utiliza para mostrar
los contenidos de la página seleccionada en el índice.

Figura 2.22.- Página con dos marcos.

La utilidad de los marcos consiste en organizar mejor los contenidos de los documentos
HTML para facilitar la navegación a los usuarios.

La aplicación típica de los marcos es crear índices de contenidos, tal y como se puede
observar en el ejemplo de la figura 2.22.

Para utilizar marcos necesitamos crear un documento HTML específico, que denominamos
"documento de definición de marcos", en el que especificaremos el tamaño y la posición de
cada marco, así como el documento HTML que contiene cada uno de los marcos.

58
Módulo 4
Creación de contenidos WEB

2.6.2 Definición de marcos en HTML.

Los pasos que se deben seguir para definir un marco, son los siguientes:

PASOS A SEGUIR PARA DEFINIR MARCOS

• Saber el número de marcos que vamos a definir en el documento.

• Diseñar y dimensionar la distribución de los marcos en el documento. En definitiva crear
el documento que contiene la definición de marcos.
• Definir el contenido de cada marco, y por tanto diseñar las páginas que van a contener.

Crear el documento que contiene la definición de marcos

Para crear el documento que contiene la definición de marcos, las etiquetas que se utilizan
son: <FRAMESET>..</FRAMESET> y <FRAME SRC="Fichero_PaginaHTML">. El atributo
SRC indica la dirección URL del documento HTML que ocupará el marco. También
disponemos de la etiqueta <NOFRAMES> ... </NOFRAMES>, mediante la cual especificamos
lo que verá el usuario en el supuesto (cada vez más raro) de que su navegador no soporte
marcos. Las versiones de Explorer y Netscape superiores a la 4.0 soportan marcos.

Para definir la orientación y el tamaño de los marcos, se utilizan los atributos COLS y ROWS
de la etiqueta <FRAMESET>:

ƒ COLS: Permite la definición de marcos distribuidos verticalmente.

ƒ ROWS: Permite la definición de marcos distribuidos horizontalmente.

<FRAMESET COLS="m1,m2,m3,............">
<FRAMESET ROWS="f1,f2,f3,................">

Tanto m1,m2,m3.... como f1,f2,f3.... indican el porcentaje de pantalla que ocupa cada marco,
con lo que la suma de todos los coeficientes nunca podrá superar el 100%.

El tamaño de los marcos se puede definir de dos formas:

ƒ En % relativo al tamaño de la pantalla.

ƒ En valores absolutos: <FRAMESET ROWS="150,450"> (no aconsejable). En este

caso, se puede utilizar un "*" como comodín.

Ejemplo:

<FRAMESET COLS="200,*,400,*">

En este ejemplo, se definen cuatro marcos, y se indica que los marcos primero y tercero
ocupan 200 y 400 pixels, respectivamente, y el segundo y el cuarto se reparten el resto a
partes iguales.

59
Módulo 4
Creación de contenidos WEB

Indicadas las etiquetas más importantes necesarias para crear marcos, veamos un ejemplo de
código HTML para la definición de marcos, en particular se definen dos marcos verticales que
ocupan uno el 25 y el otro el 75% de la pantalla:

Ejemplo:

<HTML>

<HEAD>

<TITLE>Ejemplo de creación de un marco</TITLE>

</HEAD>

<FRAMESET COLS="25%,75%">

<FRAME SRC="[Link]" NAME="indice">

<FRAME SRC="[Link]" NAME="principal">

<NOFRAMES>

<P>Lo sentimos, sólo puedes ver esta página si tu navegador tiene capacidad
para visualizar marcos</P>

</NOFRAMES>

</FRAMESET>

</HTML>

Los ficheros "[Link]" y "[Link]" son dos ficheros HTML con la estructura
clásica.

Como se puede observar en el ejemplo anterior, la cabecera de una página de definición de

marcos es similar a la de un documento normal, pero el habitual <BODY> es sustituido por un
<FRAMESET>. Con <FRAMESET> se divide la ventana actual (ya sea la general o un marco)
en varias ventanas definidas por uno de los parámetros COLS ó ROWS (explicados más
abajo) En éstos, separados por comas, se definen el número de marcos y el tamaño que
tendrá cada uno de ellos.

Dentro de <FRAMESET>, mediante la etiqueta <FRAME>, se definen cada uno de los marcos
asignándoles un nombre (mediante NAME) y especificando qué fichero HTML le corresponde
a cada uno (mediante SRC).

En el caso de que creemos la estructura de los marcos y no tengamos diseñadas las páginas
que se van a alojar en ellos, en el ejemplo anterior los ficheros "[Link]" y "[Link]",
el navegador mostraría lo siguiente:

60
Módulo 4
Creación de contenidos WEB

Figura 2.23.- Página con dos marcos. Las páginas a alojar en cada marco no están
disponibles.

En el ejemplo anterior, si las páginas "[Link]" y "[Link]" estuvieran diseñadas se

mostrarían la primera en el marco de la izquierda, y la segunda en el de la derecha, tal y como
se mostró en la figura 2.22.

Cuidado!!!!!!!!!

En la página del marco NO hay etiqueta <BODY>

Enlaces entre marcos

El ejemplo de la figura 2.22 se desea que funcione de la siguiente manera, cuando el usuario
haga clic sobre un hipervínculo del índice contenido en el marco de la izquierda, en el marco
de la derecha se debe mostrar el contenido de la página asociada a dicho hipervínculo. Esta
acción se denomina enlazar marcos.

Para ello se utiliza el atributo NAME de las etiquetas <FRAME> y <FRAMESET>, y el atributo
TARGET de la etiqueta <A> que contiene el hipervínculo del índice.

Cuando el atributo NAME acompaña a la etiqueta <FRAME>, su ámbito es local a un marco

determinado, mientras que si acompaña a la etiqueta <FRAMESET>, afecta a todos los
marcos declarados.

• NAME="Nombre_Ventana": Asocia un nombre a un marco, para que, posteriormente,

podamos hacer referencia a él.

61
Módulo 4
Creación de contenidos WEB

• TARGET="Nombre_Ventana": Esta etiqueta va en el documento HTML cargado en el

marco. Sirve para enlazar los contenidos de un marco con el marco de destino, al que
previamente se le ha asociado un nombre con el atributo NAME.

Para comprender esto mejor, analicemos un ejemplo:

Página que va a contener el marco de la

izquierda
Página que contiene la definición de
marcos <HTML>

<HEAD>

<HTML> <TITLE>Marco Índice. Fichero

"[Link]" </TITLE>
<HEAD>
</HEAD>
<TITLE>Documentos con
marcos</TITLE> <BODY>

</HEAD> <P><A HREF="[Link]"

TARGET=Principal">Mis datos</A>
<FRAMESET COLS ="20%,80%">
<P><A HREF="[Link]"
<FRAME SRC="[Link]"> TARGET=Principal">Aficiones</A>

<FRAME SRC="[Link]" <P><A HREF="[Link]

NAME="Principal"> TARGET=Principal">Música</A>

</FRAMESET> <P><A HREF="[Link]

TARGET=Principal">Libros</A>
</HTML>
</BODY>

</HTML>

Como se observa, el atributo TARGET indica, en el fichero de la página que contiene el marco
índice, el marco de destino en el que se van a visualizar las páginas asociadas a los
hipervínculos que constituyen el índice. Los marcos de destino son referenciados a través del
nombre que se le ha asignado en su definición mediante el atributo NAME de la etiqueta
FRAME.

Anidamiento de marcos

Se pueden "anidar" marcos, es decir, encajar marcos dentro de otros marcos. El código HTML
necesario para ello sería el siguiente:

62
Módulo 4
Creación de contenidos WEB

<HTML>

<HEAD>

<TITLE>Documentos con marcos anidados</TITLE>

</HEAD>

<FRAMESET ROWS=10%,*">

<FRAME SRC="[Link]">

<FRAMESET COLS="15%,*">

<FRAME SRC="[Link]">

<FRAME SRC="[Link]">

</FRAMESET>

</FRAMESET>

</HTML>

El resultado mostrado en la ventana del navegador para el código anterior se presenta en la

figura 2.24.

Figura 2.24.- Marcos anidados.

63
Módulo 4
Creación de contenidos WEB

2.6.3 Atributos de los marcos.

En este apartado se describen otros atributos de las etiquetas <FRAME> y <FRAMESET>.

Algunos de estos atributos se muestran en la siguiente tabla.

• BORDER: Fija la anchura del borde del marco en pixels (aplicable a <FRAME> y
<FRAMESET>)
• FRAMEBORDER=0: Suprime la barra de separación entre marcos (aplicable a
<FRAME> y <FRAMESET>)
• NORESIZE: Indica que el marco no se puede redimensionar.
• SCROLLING="auto/yes/no": Para mostrar (o no) una barra de desplazamiento en un
marco. La opción por defecto es "auto", que deja la decisión al navegador.
• MARGINHEIGHT=numero: Aplicado a <FRAMESET>, controla la separación entre
marcos, en altura. Aplicado a <FRAME>, permite cambiar los márgenes verticales
dentro de un marco. Se representa en pixels.
• MARGINWIDTH=numero: Aplicado a <FRAMESET>, controla la separación entre
marcos, en anchura. Aplicado a <FRAME>, permite cambiar los márgenes horizontales
dentro de un marco. Se indica en pixels.

64
Módulo 4
Creación de contenidos WEB

2.7 HOJAS DE ESTILOS.

2.7.1 Introducción.

Las hojas de estilos permiten asignar, de una sola vez, varias propiedades relacionadas
con el aspecto (estilo), a los elementos de una página marcados con una etiqueta en
particular.

Por ejemplo, se pueden mostrar todos los encabezados H1 con un tamaño, fuente y color
particulares.

Ventajas e inconvenientes

Se indican a continuación las principales ventajas e inconvenientes de la utilización de las

hojas de estilo.

Ventajas de utilizar estilos

• Ahorran tiempo.
• Los estilos son muy fáciles de cambiar: sólo hay que realizar modificaciones en un único
documento.
• Es más difícil cometer errores.
• Se pueden utilizar estilos junto con JavaScript.
• Facilitan la creación de un formato común para todas las páginas Web.

Inconvenientes de las hojas de estilo

• La principal desventaja es que ningún algunos navegadores no las soportan

completamente (no la soportan Internet Explorer 5 y Netscape 4).
• Su complejidad requiere un esfuerzo para su aprendizaje.

2.7.2 Sintaxis de los estilos.

Un estilo es una definición que se crea con un nombre de etiqueta (H1, P, etc) y una o más
definiciones que indican el aspecto que mostrarán los contenidos de dichas etiquetas (como
pueden ser: color, tamaño de texto, tipo de fuente, etc.).

Cada definición contiene una propiedad, seguida de dos puntos (:), y uno o más valores.

Por ejemplo la siguiente definición indica que todas las cabeceras H1 tienen una fuente de
tamaño 12, y su color de texto es rojo.

Ejemplo:

H1 {font-size: 12pt; color:red}

65
Módulo 4
Creación de contenidos WEB

2.7.3 Creando hojas de estilo en HTML.

Se pueden crear o definir hojas de estilos de tres formas distintas, según se desee que su
ámbito de aplicación sea uno u otro:

• DEFINICIÓN DE ESTILOS EN SECCIONES AISLADAS.

• DEFINICIÓN DE ESTILOS POR BLOQUES.
• DEFINICIÓN DE ESTILOS GLOBALES EN UN DOCUMENTO.

Se comenta a continuación cada uno de estos métodos.

Definición de estilos en secciones aisladas.

Se realiza con el atributo STYLE: este atributo permite modificar la apariencia de cualquier
documento de texto dentro de un documento HTML.

Ejemplo:

<H1 STYLE="margin-left: 0.5in; margin-right: 0.5in; color:red; font-family: Arial">

TEMA 1: INTRODUCCIÓN

</H1>

Definición de estilos por bloques.

Se realiza por medio de la etiqueta <DIV>..</DIV>. Ésta permite definir las propiedades de
apariencia de un documento HTML de una forma global. Los documentos que se obtienen
cuando se utiliza esta etiqueta están bastante "limpios" de etiquetas y muy bien
estructurados.

Las propiedades definidas con esta etiqueta afectan únicamente a las zonas de código
comprendidas entre la etiqueta de apertura (<DIV>) y la de cierre (</DIV>)

La etiqueta <DIV> se puede anidar. Veamos el siguiente ejemplo:

Ejemplo:

<HTML>

<HEAD>

<TITLE>Página índice</TITLE>

</HEAD>

<BODY>

66
Módulo 4
Creación de contenidos WEB

<DIV STYLE="margin-left: 0.5in; margin-right">

<H1 STYLE="color:red; font-family: Arial">Título</H1>

<P STYLE="color: green; font-family: Arial"> /*Texto del párrafo*/ </P>

</DIV>

</BODY>

</HTML>

Al interpretar este código, el navegador presenta la siguiente página:

Figura 2.25.- Hojas de estilos.

Definición global de estilos en un documento.

Se realiza por medio de la etiqueta <STYLE>..</STYLE>. Ésta permite definir el estilo para
toda una página en un único punto. El estilo se define dentro de la cabecera del documento.
Hay que tener cuidado y no confundir la etiqueta <STYLE> con el atributo del mismo nombre.

Ejemplo:

<HTML>

<HEAD>

67
Módulo 4
Creación de contenidos WEB

<TITLE>Página índice</TITLE>

<STYLE TYPE="text/css">

[bloque de instrucciones de estilo]

</STYLE>

</HEAD>

<BODY>

........................

</BODY>

</HTML>

Dentro de la sección de estilos, se pueden modificar los estilos usados por defecto por el
navegador para cada una de las etiquetas HTML, o incluso para otras nuevas:

Ejemplo:

<STYLE TYPE="text/css">

B {font-family: Courier; background:red}

BODY {background:grey; font-size:10pt; font-family:Arial; margin-left:0.5in; margin-

right:0.5in}

H1 {background:blue; font-size:14pt; font-weight:bold; color:red}

TIMES {font-family:Times} (Ésta es una etiqueta creada, no existente en HTML)

</STYLE>

Enlace de varios documentos a una misma hoja de estilos.

El asociar varios documentos a una misma hoja de estilos facilita las futuras modificaciones de
formato y apariencia de todos los documentos que se asocian simultáneamente a esa hoja de
estilos.

Si queremos asociar varias páginas a una misma hoja de estilos, lo que tenemos que hacer es
situar las hojas de estilos en ficheros externos. La extensión del fichero externo que contiene
la página de estilos ha de ser ".ccs"

68
Módulo 4
Creación de contenidos WEB

POSIBLE CONTENIDO DE UN FICHERO .CSS:

B {font-family: Courier; background:red}

BODY {background:grey; font-size:10pt; font-family:Arial; margin-left:0.5in; margin-

right:0.5in}

H1 {background:blue; font-size:14pt; font-weight:bold; color:red}

TIMES {font-family:Times}

En la cabecera, pondríamos algo así:

<HEAD>

<LINK REL=STYLESHEET HREF="[Link]" TYPE="text/css">

<TITLE>Título</TITLE>

</HEAD>

En este ejemplo, "[Link]" sería el fichero que contiene la hoja de estilos.

Resumiendo, las hojas de estilos son una herramienta muy potente para programar
páginas Web. Sin embargo, la utilización de estilos es bastante compleja, y el
programador debe decidir cuándo le merece la pena hacer uso de los estilos, y cuándo
es mejor no utilizarlos.

69
Módulo 4
Creación de contenidos WEB

2.8 FORMULARIOS.

Un formulario es un conjunto de elementos que permite a los usuarios de una página Web
comunicarse con el servidor de procedencia de dicha página, utilizando el correo
electrónico.

2.8.1 Elementos de un formulario.

Los elementos que pueden aparecer en un formulario son los siguientes:

• CUADROS DE TEXTO.
• ÁREAS DE TEXTO.
• CASILLAS DE VERIFICACIÓN.
• BOTONES DE OPCIÓN.
• CUADRO DE GRUPO.
• LISTAS DESPEGABLES.
• BOTONES DE COMANDO.

En la figura 2.26 se muestra el aspecto de estos elementos:

Figura 2.26.- Elementos de un formulario.

Los formularios son una herramienta muy utilizada en las páginas Web, que nos permite
recibir datos del usuario sobre todo tipo de cosas: opiniones, datos personales,
aficiones, ...

2.8.2 Definición de formularios.

Para definir un formulario se utiliza la etiqueta <FORM>...</FORM>. La estructura del

formulario sería la siguiente:

70
Módulo 4
Creación de contenidos WEB

• ETIQUETA DE APERTURA DE FORMULARIO: <FORM>.

• CUERPO DEL FORMULARIO. SE AÑADEN LOS COMPONENTES QUE LO FORMAN.
• BOTÓN DE ENVÍO Y/Ó BORRADO.
• ETIQUETA DE CIERRE: </FORM>.

Veamos a continuación algunos atributos interesantes de la etiqueta <FORM>.

Atributos de la etiqueta <FORM>

• ACTION: Para indicar la dirección de correo a la que se debe enviar el formulario.

• METHOD: Para indicar cómo debe enviarse la información.

• ENCTYPE: Formato en el que se envía la información (por ejemplo, ASCII)

Por ejemplo:

<FORM ACTION=[Link] METHOD="POST" ENCTYPE="TEXT/PLAIN">,

donde "nombre@[Link]" es nuestra dirección de correo. Otro ejemplo sería:

FORM ACTION="[Link] METHOD="GET" ENCTYPE="TEXT/PLAIN">

Se definen a continuación los códigos HTML requeridos para definir cada uno de los
elementos que forman los formularios.

Cuadros de texto

Los cuadros de texto solo pueden contener una línea, su definición se realiza con la etiqueta
<INPUT>. La longitud de texto predefinida es de 20 caracteres.

Atributos de la etiqueta <INPUT>

ƒ TYPE: Para indicar que el elemento que se está declarando es un cuadro de texto.

ƒ NAME: Sirve para identificar el cuadro de texto.

ƒ SIZE: Para indicar la longitud del texto.

ƒ VALUE: Para escribir un valor por defecto.

Los atributos TYPE y NAME son obligatorios, mientras que SIZE y VALUE son
opcionales:

<INPUT TYPE="TEXT" NAME="Nombre_Cuadro_Texto">

71
Módulo 4
Creación de contenidos WEB

Listas despegables

Para definir listas despegables se utiliza la etiqueta <SELECT>..</SELECT>, y para definir sus
opciones la etiqueta <OPTION>.

• ETIQUETA DE APERTURA: <SELECT>

• OPCIONES DE LA LISTA: <OPTION>
• ETIQUETA DE CIERRE: </SELECT>

Atributos de la etiqueta <SELECT>

• NAME: Variable de identificación del objeto en el formulario.

• MULTIPLE SIZE=NUM: Para permitir selección múltiple.

Atributos de la etiqueta <OPTION>

• VALUE: Para asociar un valor a los elementos de la lista (es opcional)

• SELECTED: Para indicar la opción por defecto.

Ejemplo de lista:

<P>Seleccione publicación</P> <BR>

<SELECT NAME="PUBLI" MULTIPLE SIZE="2">

<OPTION VALUE="LI">LIBRO

<OPTION VALUE="RE">REVISTA

<OPTION VALUE="CA">CATÁLOGO

</SELECT>

Botones de radio

Se utiliza la etiqueta <INPUT>

Atributos de la etiqueta <INPUT>

• TYPE: Para indicar el tipo de objeto.

• NAME: Variable de identificación del objeto en el formulario.

• VALUE=VAL: Para asignar el valor a cada opción.

• CHECKED: El botón donde se defina aparece seleccionado por defecto (es obligatorio
en los botones de radio)

72
Módulo 4
Creación de contenidos WEB

Ejemplo de botones de radio:

<P>Seleccione publicación</P> <BR>

<INPUT TYPE="RADIO" NAME="PUBLI" VALUE="LI" CHECKED>LIBRO

<INPUT TYPE="RADIO" NAME="PUBLI" VALUE="RE">REVISTA

<INPUT TYPE="RADIO" NAME="PUBLI" VALUE="CA">CATÁLOGO

Casillas de verificación

También se utiliza la etiqueta <INPUT>. En las casillas de verificación, se pueden marcar

varias opciones, o ninguna.

Atributos de la etiqueta <INPUT>

• TYPE: Para indicar el tipo de objeto.

• NAME: Variable de identificación del objeto en el formulario.
• VALUE=VAL: Para asignar el valor a cada opción (es opcional)
• CHECKED: El botón donde se defina aparece seleccionado por defecto (es opcional)

Ejemplo de casillas de verificación:

<P>Seleccione publicación</P> <BR>

<INPUT TYPE="CHECKBOX" NAME="PUBLI1">LIBRO

<INPUT TYPE="CHECKBOX" NAME="PUBLI2" VALUE="RE">REVISTA

<INPUT TYPE="CHECKBOX" NAME="PUBLI3">CATÁLOGO

Otra forma de hacer esto mismo es darles el mismo nombre (NAME), pero distinto valor
(mediante VALUE)

Áreas de texto

Las áreas de texto, a diferencia de los cuadros de texto, pueden contener varias líneas. Para
definir áreas de texto disponemos de la etiqueta <TEXTAREA>

Atributos de la etiqueta <TEXTAREA>

• NAME: Variable de identificación del objeto en el formulario (es imprescindible)

• ROWS=NUM-FILAS: Para indicar las líneas de texto.

• COLS=NUM-COLS: Para indicar el número de caracteres por línea.

73
Módulo 4
Creación de contenidos WEB

Ejemplo de una caja de texto:

<P>Comentarios</P> <BR>

<TEXTAREA NAME="COMENTARIO" ROWS=5 COLS=35>Texto</TEXTAREA>

Botones de comando

Se utiliza la etiqueta <INPUT>. Es obligatorio poner, al menos, un botón de comando: el de

"enviar".

Atributos de la etiqueta <INPUT>

• TYPE: Variable de identificación del objeto en el formulario. Puede tomar los valores:
"SUBMIT" (enviar datos del formulario) y "RESET" (borrar datos)

• VALUE: Para indicar la etiqueta que muestra el botón..

Ejemplos de botones de comando:

<INPUT TYPE="SUBMIT" VALUE="Enviar cuestionario">

<INPUT TYPE="RESET" VALUE="Borrar datos">

OBSERVACIÓN: Los formularios no se pueden anidar.

Cuadros de grupo

Los cuadros de grupo son elementos que nos permiten mejorar el aspecto estético del
formulario. Nos permite agrupar elementos que guarden algún tipo de relación. Para definirlos
se utilizan las etiquetas <FIELDSET>..</FIELDSET>. Para indicar el título del cuadro se utiliza
la etiqueta <LEGEND>.

El atributo STYLE de la etiqueta <FIELDSET> nos permite indicar el grosor de la línea del
cuadro.

Ejemplo de cuadros de grupo:

<fieldset style="padding: 2">

<legend>Cuadro de grupo</legend>

</fieldset>

Por último, indicar que información se recibe cuando un usuario completa los campos del
formulario y nos lo envía.

Información recibida de un formulario

Cuando se reciben los datos de un formulario, recibimos el nombre asociado a cada objeto del
formulario, junto con el valor escrito o seleccionado por el usuario.

74
Módulo 4
Creación de contenidos WEB

Ejemplo de datos recibidos de un formulario:

USUARIO=PEPE

PUBLI=RE

Una vez estudiado la forma de definir el formulario y los elementos que lo forman, se muestra
a modo de ejemplo el código HTML de la página mostrada en la figura 2.26.

Ejemplo de definición de formulario y elementos que lo forman (código de la página de la

figura 2.26):

<html>

<head>

<Title> TABLA QUE CONTIENE UN FORMULARIO </Title>

</head>

<body>

<form method="POST" action= >

<p><input type="text" name="T1" size="20">Cuadro de texto</p>

<p><textarea rows="2" name="S1" cols="20"></textarea>Área de texto</p>

<p><input type="checkbox" name="C1" value="ON">Casilla de verificación</p>

<p><input type="radio" value="V1" checked name="R1">Botón de opción</p>

<legend>Cuadro de grupo</legend>

<p><select size="1" name="D1"></select> Lista despegable</p>

<p><input type="button" value="Botón" name="B3"> Botón de comando</p>

<p>&nbsp;</p>

<p align="right"><input type="submit" value="Enviar"

name="B1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<input type="reset" value="Restablecer" name="B2"></p>

75
Módulo 4
Creación de contenidos WEB

</form>

</body>

</html>

2.8.3 Presentación de formularios.

Para finalizar un consejo, una buena forma de presentar formularios es incrustarlos en tablas.
Las tablas nos permiten distribuir fácilmente los elementos o campos que forman el formulario.

El formulario de la siguiente figura se encuentra integrado en una tabla, que como se ha

indicado facilita enormemente la alineación y ordenación de los elementos que lo forman.

Figura 2.27- Ejemplo de tabla conteniendo un formulario.

El código HTML de la página mostrada en la figura 2.27 es el siguiente:

Ejemplo de tabla conteniendo un formulario:

<HTML>

<HEAD>

<TITLE> TABLA QUE CONTIENE UN FORMULARIO </TITLE>

<style type="text/css">

76
Módulo 4
Creación de contenidos WEB

table{color:#0000ff;font-family:"comic sans ms";font-size:12pt;}<!--Estilos

de esta página-->

<!--Estos estilos podrían ir también en la un fichero de estilos .css-->

</style>

</HEAD>

<BODY>

<!--Se edita el formulario-->

<form method="POST" name="informacion"

action="[Link]

<!--Se crea la tabla que contiene el formulario -->

<table width="622" border=0>

<tr>

<td colspan="2">

<h1>Información de contacto</h1><br>

</td>

</tr>

<tr>

<td colspan="2"><br></td>

</tr>

<tr>

<td align= "right"> Nombre*:</td>

<td>

<input type="text" name="NOMBRE"><br>

</td>

</tr>

<tr>

77
Módulo 4
Creación de contenidos WEB

<td align= "right">

Edad:

</td>

<td>

<input type="text" name="EDAD"><br>

</td>

</tr>

<tr>

<td align= "right">

Ciudad*:

</td>

<td>

<input type="text" name="CIUDAD"><br>

</td>

</tr>

<tr>

<td align= "right"> Código Postal*: </td>

<td>

<input type="text" name="CPOSTAL"><br>

</td>

</tr>

<tr>

<td align= "right">

Teléfono de contacto:

</td>

78
Módulo 4
Creación de contenidos WEB

<td>

<input type="text" name="TELEFONO"><br>

</td>

</tr>

<tr>

<td align= "right">

Correo electr&oacute;nico:*

</td>

<td>

<input type="text" name="CORREO"><br>

</td>

</tr>

<tr>

<td align= "right">

¿Cómo nos conoció?

</td>

<td>

<select name="CONOCIÓ"><!--Lista de Selección

Desplegable -->

<option>Por anuncios de prensa</option>

<option>Por un anuncio de TV</option>

<option>Por un anuncio de radio</option>

<option>A través de un conocido</option>

<option>A través de internet</option>

<option>Otras</option>

79
Módulo 4
Creación de contenidos WEB

</select><br>

</td>

</tr>

<tr>

<td colspan="2">

<center>(*)Datos Obligatorios</center>

</td>

</tr>

<tr>

<td colspan="2">

<center><!--Se crean los botones y se centran-->

<input type="submit" name="enviar"

value="Enviar">

<input type="reset" name="borrar" value="Borrar

Formulario">

</center>

</td>

</tr>

</table>

</form>

</BODY>

</HTML>

80
Módulo 4
Creación de contenidos WEB

2.9 ELEMENTOS MULTIMEDIA.

2.9.1 Introducción.

Como se ha visto hasta ahora, las posibilidades multimedia que permite el lenguaje HTML se
limitan a insertar imágenes entre párrafos de texto, mostrar una imagen como fondo del
documento, modificar los colores del fondo y de los distintos textos, y poco más. Con las
instrucciones básicas de HTML que hemos estudiado, esto es lo máximo que podemos
conseguir, y la posibilidad de presentar vídeo y sonido en un documento HTML queda limitada
a la capacidad de navegador del usuario, y a la configuración de dicho navegador.

La forma básica de incluir, en un documento HTML, un fichero con un formato no reconocido

por el navegador, es incluirlo como destino de un hiperenlace. De esta forma, cuando el
usuario haga click sobre dicho hiperenlace, el programa navegador llamará a una aplicación
externa que trate ese tipo de ficheros. El navegador tiene, pues, definida una lista aplicaciones
que trabajan con los formatos más comunes de ficheros de vídeo, audio o imágenes. Esta
opción es poco operativa ya que, si bien permite acceder a esos tipos de ficheros, no permite
incluirlos como parte del documento.

SOLUCIONES APORTADAS POR ALGUNOS NAVEGADORES

Internet Explorer de Microsoft incluye una serie de etiquetas y atributos que permiten el uso
de elementos multimedia. Sin embargo, este conjunto de etiquetas y atributos no es
estándar, por lo que no será posible verlos en máquinas con un S.O. distinto de Windows, ni
tampoco en máquinas con otros navegadores.

Otra aproximación la ha realizado Netscape con la inclusión de los "Plug-in's", que son
programas que se añaden al navegador de Netscape y que permiten tratar diversos tipos
de ficheros. De esta forma, se pueden insertar estos ficheros dentro de una página HTML,
permitiendo mostrar vídeo en distintos formatos (MPEG, AVI, MOV), interpretar sonido en
varios formatos (AU, MID), incluir ficheros de Adobe Acrobat (formato PDF), mostrar
ficheros VRML, etc... El principal problema es que estos plug-in's no son estándar, ni están
realizados por el mismo fabricante, ni son todos de libre distribución, y, además, hasta el
momento, sólo son válidos para PC´s con Windows. Además, la correcta visualización del
documento dependerá de que el usuario tenga instalado el plug-in correspondiente en su
navegador. En la última versión de Netscape, se incluyen, por defecto, plug-in´s para
audio, vídeo y VRML, por lo que, cuando se extienda el uso de este navegador, se podrá
asegurar la correcta reproducción de este tipo de ficheros.

2.9.2 Formatos de sonido.

En el caso del sonido, los tipos de archivos más comúnmente utilizados son:

Archivos MIDI (Musical Instruments Digital Interface): Este tipo de archivo contiene
notas musicales. A diferencia de otros formatos, en los archivos MIDI no se almacena la

81
Módulo 4
Creación de contenidos WEB

onda sonora digitalizada, sino las instrucciones para obtenerla. Los archivos MIDI se
crearon originalmente para interconectar instrumentos musicales. Para crear este tipo de
archivos es necesario tener algunos conocimientos musicales, desde Internet se pueden
descargar múltiples programas gratuitos para crear archivos MIDI. También pueden crearse
a partir de un sintetizador o instrumento musical electrónico con salida MIDI.

Archivos WAV: Es el formato estándar de Microsoft para los ficheros de sonido. Se pueden
crear ficheros WAV con un micrófono, la tarjeta de sonido del ordenador y la aplicación
grabadora de sonidos de Windows que puede encontrar en
Programas>Accesorios>Entretenimiento>Grabadora de sonidos. El principal inconveniente
de este formato es el gran tamaño que ocupa, si bien su calidad de sonido es elevada.

Archivos AU: Formato estándar de Unix para los archivos de sonido.

Archivos Real Audio: Son archivos de sonido utilizados por programas como Real Player
que se utiliza sobre todo para escuchar grabaciones de programas de radio.

Archivos AIFF: Formato estándar para los sistemas Macintosh y Silicon Graphics.

Archivos MP3: Es el formato más popular para la distribución de música comprimida.

Surgen como consecuencia del excesivo tamaño que ocupan los archivos WAV. A pesar
del nivel de compresión (1:13), la calidad que proporcionan es elevada. Para obtener
archivos MP3 a partir de WAV puede utilizar cualquiera de las múltiples aplicaciones
gratuitas disponibles en Internet, por ejemplo BpowerAMP. La aplicación Windows Media es
también capaz de reproducir este tipo de archivos.

2.9.3 Formatos de video.

En lo que respecta al video, hay que decir que resulta de gran utilidad en numerosas
ocasiones en las que se intenta representar de forma fidedigna distintas situaciones. Su
principal inconveniente el de siempre, el excesivo tamaño de los archivos que almacenan
video. Si decidimos insertamos videos en nuestras páginas, se deberá de tratar de que sean
secuencias de muy corta duración, de lo contrario el tiempo de descarga puede llegar a ser tan
excesivo que puede provocar la huida despavorida de los visitantes.

Los formatos más habitualmente utilizados para almacenar video en Internet son los
siguientes:

Archivos AVI: Es el formato estándar de Windows para video. Es el utilizado por el

reproductor Windows Media Player. A pesar de ser un formato de Windows, existen
aplicaciones para Macintosh capaces de reproducir este formato. Se puede decir que es el
formato más extendido y conocido para el almacenamiento de video.

Archivos MPEG (Moving Picture Experts Groups): Es el formato utilizado en la

distribución de películas en CD, DVD, televisión digital, etc. Son ficheros en los que se
almacena el video comprimido, se puede decir que son los equivalentes al formato MP3 en

82
Módulo 4
Creación de contenidos WEB

sonido, pero para video. A pesar de su alto nivel de compresión, su calidad es bastante
[Link]án también muy extendidos en Internet.

Archivos QuickTime: Este tipo de archivos fue desarrollado por Apple para los Macintosh,
si bien existen aplicaciones para PC como el QuickTimerPlayer que permite visualizar sin
problemas este tipo de archivos, y que además es gratuita
([Link] . Estos archivos tienen extensiones .mov y .qt.

Archivos Real Video: Son archivos diseñados para la transmisión de video en tiempo real
a través de Internet, con la peculiaridad de que la descarga y la reproducción es
simultánea. Para reproducir este tipo de archivo necesitamos la aplicación Real Player, que
al igual que QuickTimerPlayer, es gratuita ([Link]

Para crear los archivos de video, tenemos varias alternativas que van desde utilizar una
cámara de video digital con la que obtendremos videos digitales de una gran calidad, pasando
por una tarjeta digitalizadora que nos permita digitalizar nuestros videos obtenidos con
cámaras analógicas, hasta utilizar una simple WebCam que no ofrece una gran calidad pero
que para distribuir videos por Internet puede ser suficiente.

2.9.4 Insertando sonido y video.

Se describen a continuación los métodos utilizados para insertar video y sonido, dependiendo
del navegador.

Extensiones multimedia de Internet Explorer

Este navegador permite mostrar vídeo en formato AVI, así como reproducir sonido de
fondo, de una forma sencilla. Para ello, aporta una nueva etiqueta (<BGSOUND>) y un nuevo
atributo ("DYNSRC") a la etiqueta de mostrar imágenes (<IMG>):

Reproducción de audio: etiqueta <bgsound>

Su sintaxis es la siguiente:

<BGSOUND SRC="Fichero_de_sonido" LOOP="valor">,

donde "valor" puede ser un número entero (n) ó "INFINITE". El atributo LOOP indica cuántas
veces se ejecutará la pieza musical: en caso de haber especificado un número, la pieza se
escuchará ese número de veces, y si el valor de LOOP es "infinite", se escuchará de forma
indefinida.

Esta etiqueta se incluye una única vez en el documento HTML que deseemos que tenga
música de fondo, y en el atributo SRC se indica el fichero de audio que debe reproducirse
(mediante su dirección URL).

El fichero de audio puede ser de uno de los siguientes formatos:

WAV, AU ó MIDI (.mid)

83
Módulo 4
Creación de contenidos WEB

Reproducción de video: Atributo DYNSRC de <IMG>

Su sintaxis es la siguiente:

<IMG DYNSRC="Fichero_de_video" LOOP="valor" CONTROLS START="valor">

En este caso, se introduce un nuevo atributo para la etiqueta <IMG>, que sustituye al atributo
SRC que utilizábamos para insertar imágenes. En caso de aparecer aquél en la etiqueta
<IMG>, en lugar de mostrar una imagen, se muestra un vídeo en formato AVI (formato de
vídeo de Windows). Dicho atributo nuevo es DYNSRC, e indica la dirección URL del fichero
(de vídeo) que se mostrará en ese lugar del documento.

Podemos utilizar todos los atributos que ya conocemos de la etiqueta <IMG>. Así, podemos
definir distintas alineaciones y colocaciones del fichero con respecto al texto, variar el
tamaño del vídeo con los atributos HEIGHT y WIDTH, etc.

Además, se introducen unos atributos nuevos, que sólo pueden ser aplicados al vídeo:

ƒ el atributo LOOP, que indica el número de veces que se mostrará el vídeo. Al igual
que para el sonido, puede tomar dos tipos de valores: un número entero (n), ó "INFINITE"
ƒ el atributo CONTROLS, que indica si se mostrarán o no los botones de control (que
permitirán detener la reproducción, rebobinar, reanudar la reproducción, etc)
ƒ el atributo START, que indica si la secuencia de vídeo comenzará al abrir el fichero
(START="FILEOPEN") o cuando se pase el cursor del ratón por encima
(START="MOUSEOVER").

Podemos indicar, incluyendo el atributo SRC de la etiqueta <IMG>, una imagen para que se
muestre de manera alternativa al fichero de vídeo. Esto es conveniente para asegurarnos de
que siempre aparezca algo en ese espacio del documento: en caso de no poder mostrar el
vídeo (por tratarse de otro navegador, por ejemplo), aparecerá una imagen, que habremos
escogido relacionada con el tema del vídeo. Así, los atributos DYNSRC y SRC pueden
aparecer juntos en una misma etiqueta <IMG>: tiene preferencia el primero, y si no se puede
mostrar el vídeo por alguna razón, entonces aparecerá la imagen especificada en SRC.

Los plugins de Netscape Navigator

Un "plug-in" es un programa que extiende las capacidades del navegador de Netscape de

una forma específica, aportándole, por ejemplo, la capacidad de mostrar vídeo, sonido,
ficheros con formatos distintos a los habituales (como pueden ser los ficheros PDF,
presentaciones de ASAP, ficheros VRML, etc ...).

En la actualidad, no existe un conjunto estándar de plug-in's para cada tipo de ficheros, sino
que existen diversas aplicaciones, realizadas por diferentes fabricantes, y no todas ellas son
de libre distribución. Se puede asegurar que todas las aplicaciones serán compatibles entre
ellas, y si en una página se hace referencia, por ejemplo, a un fichero de sonido en formato
.wav, éste podrá ser oído por todos aquellos usuarios que tengan un plug-in para este tipo de
ficheros.

Para que un fichero multimedia que aparece incluido en una página sea visible por el
usuario, se debe tener instalado el plug-in correspondiente que trata ese tipo de ficheros.

84
Módulo 4
Creación de contenidos WEB

Por lo tanto, se recomienda hacer un uso moderado de los plug-in´s utilizando ficheros que
sean de formatos comunes y un uso complementario en una página, ya que muchos usuarios
no podrán verlos. Es aconsejable incluir un enlace en el que se referencie el fichero
multimedia; de esta forma, el usuario podrá seguir el enlace y ver el fichero en un visualizador
externo, si lo posee.

Existe una instrucción que permite incluir cualquier tipo de archivos dentro de un
documento HTML. Se trata de la instrucción <EMBED>:

Insertar ficheros: Etiqueta <EMBED>

Esta instrucción permite la inclusión de cualquier tipo de fichero en la posición del documento
HTML que se especifique. Su funcionalidad es similar a la de <IMG> para incluir imágenes. En
esta ocasión, para que pueda mostrarse el fichero, el usuario deberá tener instalado el plug-in
adecuado que trata los ficheros de ese tipo.

El formato de esta nueva instrucción es el siguiente:

<EMBED SRC="Fichero" WIDTH="valor" HEIGHT="valor">

En el atributo SRC se indica la dirección URL del fichero que se quiere mostrar. Mediante los
atributos WIDTH y HEIGHT, indicaremos el tamaño (la anchura y la altura, respectivamente)
que tendrá en objeto insertado. Estos dos últimos son opcionales, y se pueden expresar en
pixels ó en tanto por ciento del tamaño de la ventana del navegador.

El fichero podrá ser un fichero de vídeo, de audio, una imagen con un formato distinto a los
que se tienen por defecto, un fichero de presentaciones, etc...

Como ya se ha indicado, dicho archivo sólo podrá ser visto por el usuario si éste posee el
plug-in correspondiente que trata ese tipo de ficheros. En ese caso, el fichero se incluirá en
la zona del documento que se indicó (de este modo, podemos insertar, dentro de un
documento HTML, películas de vídeo o incluir sonido de fondo) En caso contrario, se mostrará
un mensaje de error indicando al usuario que debe disponer de dicho plug-in para poder
consultar el documento de forma correcta.

85