Manual HTML
Manual HTML
Descripción Breve
Colegio Panamericano zona 18
P á g i n a 1 | 88
Introducción a HTML
En su corazón, HTML es un lenguaje muy sencillo compuesto de elementos,
que se pueden aplicar a piezas de texto para darles un significado diferente
en un documento (¿Esto es un párrafo? ¿Esto es una lista con viñetas?
¿Esto es parte de una tabla?), estructura un documento en secciones lógicas
(¿Tiene una cabecera? ¿Tres columnas de contenido? ¿Un menú de
navegación?), e incrusta contenido como imágenes y vídeos en una página.
Este módulo introducirá los dos primeros de estos, e introduce conceptos
fundamentales y la sintaxis que necesitas para entender HTML.
P á g i n a 2 | 88
¿Qué es HTML?
El lenguaje de marcado de hipertexto hace parte de aquellos lenguajes
informáticos que las máquinas pueden entender y que facilitan la interacción
con el hombre. Marcándolos como tales, HTML permite definir y articular
titulares, párrafos, listas, tablas o gráficos en una web, de tal forma que
cualquier navegador que pueda interpretar el código puede mostrar
visualmente cada elemento. Mediante los metadatos, HTML también puede
proporcionar información adicional, como por ejemplo, sobre el autor. Hoy
día, y al contrario de lo que ocurría en sus inicios, HTML solo se usa para
estructurar la página internamente y no para definir su aspecto visual, algo
de lo que se ocupan lenguajes como CSS (Cascading Style Sheets).
P á g i n a 3 | 88
Declaración del tipo de documento: aquí se proporciona información sobre
la versión de HTML utilizada, como, por ejemplo: <!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
P á g i n a 4 | 88
Sintaxis del HTML
El HTML es un lenguaje que basa su sintaxis en un elemento de base al que
llamamos etiqueta. La
El resultado Será:
escribiéramos:
P á g i n a 5 | 88
El resultado sería:
El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde
colocaremos
nuestro texto e imágenes delimitados a su vez por otras etiquetas como las
que hemos visto.
P á g i n a 6 | 88
ESTRUCTURA BÁSICA DE UN
DOCUMENTO HTML
El principio esencial del lenguaje HTML es el uso de las etiquetas (tags).
Funcionan de la siguiente manera:
Lo que haya entre ambas etiquetas estará afectado por ellas. Por ejemplo,
todo el documento HTML debe estar entre las
P á g i n a 7 | 88
pues será lo que vean los demás cuando añadan nuestra página a su lista
de favoritos (o bookmark).
Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla
principal (texto, imágenes, etc.)
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
P á g i n a 8 | 88
DANDO FORMA AL TEXTO DEL
DOCUMENTO HTML
Cuando escribimos en el documento el texto que queremos que aparezca en
la pantalla, veremos que éste se acomoda a
ella, sin que tengamos que pulsar el retorno del carro. Si queremos separar
el texto en distintos párrafos debemos usar la
sí la mayoría de ellos). Nos centra todo lo que esté dentro de ella, ya sea
texto, imágenes, etc.
de cierre). Con ella se obtiene una raya horizontal tan ancha como la
pantalla, y con la apariencia de estar embutida sobre
<HTML>
<HEAD>
</HEAD>
<BODY>
<HR>
</BODY>
</HTML>
P á g i n a 10 | 88
Si queremos separar los párrafos, o cualquier otra cosa, pero sin dejar una
línea en blanco, usamos una etiqueta pensada
aparecerá como haya sido escrito y con una fuente de espaciado fijo (tipo
Courier). Se respetarán los espacios en blanco y
retornos del carro, tal como estaban en nuestro documento HTML. Es muy
apropiada para confeccionar tablas poco elaboradas y otros documentos
similares.
P á g i n a 11 | 88
máquina de escribir (typewriter). La diferencia con la anterior es que no
preformatea el texto, sino que únicamente cambia su apariencia.
párrafo está escrito entre ambas etiquetas. Deja márgenes a ambos lados,
por eso se usa para poner sangrías.
Listas
A menudo nos interesará presentar las cosas en forma de listas. Podemos
escoger entre tres tipos distintos:
* Listas de definición.
Las listas desordenadas (Unordered Lists) sirven para presentar cosas que,
por no tener un orden determinado, no necesitan ir precedidas por un
número. Su estructura es la siguiente:
<UL>
<LI> Un elemento
P á g i n a 12 | 88
<LI> Otro elemento
<LI> etc.
</UL>
Es decir, toda la lista está dentro de la etiqueta <UL> y </UL>, y luego cada
elemento va precedido de la etiqueta <LI>
(list ítem). Se puede anidar una lista dentro de otra. Por ejemplo:
<UL>
<LI> Mamíferos
<LI> Peces
<UL>
<LI> Sardina
<LI> Bacalao
</UL>
<LI> Aves
</UL>
P á g i n a 13 | 88
la anterior. La diferencia estriba en que aparecerá automáticamente un
número correlativo para cada elemento.
<OL>
<LI> etc.
</OL>
Al igual que las listas desordenadas, también se pueden anidar las listas
ordenadas.
<DL>
P á g i n a 14 | 88
<DT> Una cosa a definir
</DL>
Ejemplo
<HTML>
<HEAD>
</HEAD>
<BODY>
P á g i n a 15 | 88
<HR>
Sin un orden particular, mis <B> aficiones </B> son las siguientes:
<UL>
<LI> El cine
<LI> El deporte
<UL>
<LI> Natacion
<LI> Baloncesto
</UL>
<LI> La musica
</UL>
<OL>
<LI> El rock
<LI> El jazz
P á g i n a 16 | 88
</OL>
</BODY>
</HTML>
CARACTERES ESPECIALES
Existen algunas limitaciones para escribir el texto. Una de ellas se debe a
que las etiquetas se forman como un comando
escrito entre los símbolos < y >. Por tanto, si se quisiera escribir estos
caracteres como parte normal del texto, daría lugar
< para < (less than, menor que) & para & (ampersand)
> para > (greater than, mayor que) " para " (double quotation)
Como se ve, estos códigos empiezan siempre con el signo & y acaban
siempre con ;
lógicamente, los que más nos interesan son los propios del castellano (las
vocales acentuadas y con diéresis, la ñ y Ñ, los
signos ¿ ¡ )
ENLACES
La característica que más ha influido en el espectacular éxito de la Web ha
sido, aparte de su carácter multimedia, la posibilidad de unir los distintos
documentos repartidos por todo el mundo por medio de enlaces hipertexto.
Donde XXX es el destino del enlace (Observe las comillas). YYY es el texto
indicativo en la pantalla del enlace (con un color especial y generalmente
subrayado)
Tipos de enlaces
1. Enlaces dentro de la misma página
P á g i n a 19 | 88
lo que antes hemos llamado XXX, es decir, el destino del enlace, en este
caso el sitio dentro de la
Puede ser que tengamos una sola página. Pero lo más frecuente es que
tengamos varias páginas, una inicial (o principal) y
caso, simplemente sustituimos lo que hemos llamado XXX (el destino del
enlace) por el nombre del archivo:
P á g i n a 20 | 88
Si queremos que vaya a un sitio concreto de otra página nuestra en vez de
ir al principio de la página, adonde va por defecto, en ese sitio tenemos que
colocar una marca (ver la Enlaces dentro de la misma página), y completar
el enlace con la referencia a esa marca.
P á g i n a 21 | 88
Si nos queremos evitar todas estas complicaciones, podemos tener todo
junto en un único directorio, pero esto tiene el inconveniente de que esté
todo más desordenado, y sea más difícil hacer futuras modificaciones.
Si queremos enlazar con una página que esté fuera de nuestro sistema (es
decir, que esté en un servidor distinto al que soporta nuestra página), es
necesario conocer su dirección completa, o URL (Uniform Resource
Locator). El URL podría
P á g i n a 22 | 88
En este caso, sustituimos lo que se ha llamado antes XXX (el destino del
enlace) por mailto: seguido de la dirección de email. La estructura de la
etiqueta es:
Ejemplo
<A
HREF="mailto:president@whitehouse.gov">president@whitehouse.gov</A
>
Ejemplo
<HTML>
<HEAD>
<BODY>
<HR>
<P>
</P>
</BODY>
</HTML>
IMÁGENES
La etiqueta que nos sirve para incluir imágenes en nuestras páginas Web
es muy similar a la de enlaces a otras páginas, que
P á g i n a 24 | 88
que contiene una imagen.
<IMG SRC="imagen.gif">
Con el comando ALT se introduce una descripción (una palabra o una frase
breve) indicativa de la imagen. Este comando,
no es sólo por esto. Hay casos, como veremos más adelante, en los que se
utiliza una imagen como enlace a otra página. Si
P á g i n a 25 | 88
indica nada especial, como en el caso expuesto, quiere decir que el archivo
imagen.gif está en el mismo directorio que el documento HTML que
estamos escribiendo. Si no es así, se siguen los mismos criterios
Las imágenes deben estar guardadas en formato GIF (máximo 256 colores,
para dibujos) o en formato JPG (para imagen
fotográfica).
P á g i n a 26 | 88
medio o abajo del lado de la imagen. Para ello se añade el comando
ALIGN a la etiqueta, de la siguiente manera:
P á g i n a 27 | 88
de la etiqueta de la imagen el atributo BORDER="0", es decir:
También podemos utilizar una imagen para enlazar con otra imagen.
Supongamos que queremos enlazar con la imagen
Por ultimo, otra posibilidad es la de utilizar un texto para enlazar con una
imagen. En este caso sustituimos XXX (el destino del enlace) con el
nombre del archivo de la imagen a la que queremos acceder e YYY (lo que
aparece en pantalla como el enlace) por el texto.
Ejemplo
Un tipo de imágenes del que se hace abundante uso y que sirven para
mejorar la presentación de la página son los iconos,
P á g i n a 28 | 88
ALINEACION Y DIMENSIONADO DE
IMÁGENES
Alineación de las imágenes
Si se quiere lograr diseños fantásticos y rodear con textos los gráficos se
puede ALIGN junto con la etiqueta ya conocida
<IMG SRC= "imagen.gif">. Donde quiera que se desee que aparezca una
imagen basta con insertar:
P á g i n a 29 | 88
<BR CLEAR="all"> Busca el primer margen libre a ambos lados.
Ejemplo
Dimensionando la imagen
Los programas navegadores cuando cargan un documento HTML y
encuentran una etiqueta de una imagen, interrumpen el proceso de carga y
solicitan al servidor que le envíe dicha imagen, quedando a la espera hasta
que se complete el envío, repitiéndose este proceso con cada una de las
imágenes.
Es conveniente hacer esto con todas las imágenes, incluso con las más
pequeñas (iconos, botones, etc), para que no haya
demasiado una página, y el usuario será quien decida qué imágenes desea
cargar.
Para hacer que una imagen reducida sea el enlace con la imagen en su
tamaño original, lo conseguimos con:
P á g i n a 31 | 88
<A HREF="imagen.gif"><IMG SRC="imagen.gif" WIDTH="150"
HEIGHT="75"></A>
gráfico esta imagen, por ejemplo a 150x75, guardarla con otro nombre, y
luego hacer que la pequeña sea el enlace de la
FONDOS Y COLORES
Se puede cambiar el fondo de dos maneras distintas:
manera:
<BODY BGCOLOR="#XXYYZZ">
#FF0000, porque tiene el máximo de rojo y cero de los otros dos colores.
Los colores más simples son:
rojo #FF0000 se puede hacer más oscuro con #AA0000, o aún más oscuro
con #550000.
Para hacer que un color tenga un tono más suave (más pastel), se deben
variar los otros dos colores haciéndolos más claros
(número más alto), en una cantidad igual. Así, podemos convertir el rojo en
rosa con #FF7070.
P á g i n a 33 | 88
Colores del texto y de los enlaces
Para evitar esto, podemos escoger los colores del texto y de los enlaces,
añadiendo a la etiqueta (si se desea) los siguientes
comandos:
VLINK color de los enlaces visitados ALINK color de los enlaces activos (al
ser pulsados)
Los códigos de los colores son los mismos que los que se han visto
anteriormente.
VLINK="#XXYYZZ" ALINK="#XXYYZZ">
<BODY BACKGROUND="imagen.gif">
<BODY BACKGROUND="imagen.jpg">
Se puede añadir también a esta etiqueta todos los comandos para cambiar
los colores del texto y de los enlaces, vistos anteriormente. Esto es
imprescindible a veces para conseguir que el texto sea legible, en contraste
con el color o imagen de
fondo.
Hay que prever la posibilidad de que quien acceda a nuestra página haya
deshabilitado la carga automática de imágenes,
en cuyo caso tampoco cargaría la imagen que sirve como fondo y sólo
vería el fondo estándar. Esto podría ser muy perjudicial si hemos escogido
unos colores para el texto y los enlaces que no contrastan bien con ese
fondo. La solución a este
P á g i n a 35 | 88
problema es poner dentro de la etiqueta <BODY> los dos comandos
BACKGROUND y BGCOLOR (en este orden), teniendo cuidado en
escoger un color uniforme de fondo parecido al de la imagen.
TABLAS
Las tablas son un modo sencillo de disponer el texto en columnas o de
añadir un titular a una ilustración, pero hay más
</TABLE>
<TABLE BORDER="n">
</TABLE>
• Presenta los datos tabulados con un borde, haciendo las tablas más
atractivas, y el grosor es de n pixeles.
<TR>
</TR>
• Permite formar cada fila de la tabla. Hay que repetirla tantas veces como
filas queremos que tenga la tabla.
<TD>
</TD>
• Permite formar las celdas que contendrá cada fila. Hay que repetirlas
tantas veces como celdas deba tener la fila.
P á g i n a 37 | 88
<TH>
[encabezamiento de tabla]
</TH>
Ejemplo
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TD>fila1-celda1</TD><TD>fila1-celda2</TD><TD>fila1-celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD><TD>fila2-celda2</TD><TD>fila2-celda3</TD>
</TR>
P á g i n a 38 | 88
</TABLE>
</BODY>
</HTML>
Titular de tabla
Se puede añadir un titulo a la tabla, es decir un texto situado encima de la
tabla que indica cuál es su contenido. Se consigue con la etiqueta
<CAPTION> y </CAPTION>. Por ejemplo:
P á g i n a 39 | 88
los que van en un documento HTML, como imágenes, enlaces, etc. No hay
más que poner dentro
Ejemplos
<TABLE BORDER>
<TR>
</TR>
</TABLE>
b) Con un enlace
<TABLE BORDER>
<TR>
</TR>
</TABLE>
P á g i n a 40 | 88
Posicionamiento del contenido dentro de la
celda
Normalmente, el contenido de una celda está alineado a la izquierda. Pero
se puede cambiar esto añadiendo dentro de la
A veces nos puede convenir forzarle para que la tabla tenga unas
dimensiones totales mayores que las que le corresponden,
P á g i n a 41 | 88
tanto en anchura como en longitud. Esto se consigue añadiendo dentro de
la etiqueta de la tabla los atributos WIDTH y
<TABLE WIDTH="60%">
<TABLE HEIGHT="200">
Por ejemplo, en la primera tabla del ejemplo anterior vamos a añadir una
fila con una sola celda, que abarca a dos columnas:
O, en la misma tabla, vamos a añadir una celda en la primera fila, pero que
abarque también a la siguiente:
P á g i n a 42 | 88
<TD ROWSPAN="2"> Celda junto a 2 filas </TD>
para que una página tenga un color de fondo uniforme (según vimos en el
capítulo 7). Para ello debemos utilizar el atributo BGCOLOR="#XXYYZZ",
visto en dicho capítulo.
<TD BGCOLOR="#XXYYZZ">
[contenido de la celda]
Si, por el contrario, sólo se pone este atributo dentro de la etiqueta de una
celda concreta (<TD> o <TH>), entonces la
FORMULARIOS
La manera general para que los lectores de nuestra página se puedan
comunicar con nosotros es por medio de un enlace a
P á g i n a 45 | 88
Pero puede ser que lo que necesitemos sea solamente una respuesta
concreta a unas opciones que presentaremos nosotros
contengan los elementos necesarios para ello, tal como botones de radio,
listas de selección, cajetines de introducción de
Esos datos los podemos recibir "en bruto" en nuestro correo, con los que
confeccionaríamos manualmente dicha lista de
correo, sin necesitar ningún programa para ello. Este proceso es el que
vamos a comentar en este capítulo.
P á g i n a 46 | 88
La otra posibilidad, de la que únicamente se va a hacer esta mención, es
que hubiéramos instalado en nuestro servidor un
1. Etiqueta de inicio:
P á g i n a 47 | 88
2. Cuerpo del formulario
1. Etiqueta de inicio
El atributo ACTION indica la acción que se debe efectuar y que es que los
datos sean enviados por e-mail a la dirección
indicada. (Si hiciéramos uso del CGI, sería precisamente aquí donde
indicaríamos su localización en el servidor, que habitualmente es el
directorio cgi-bin, para que procese los datos).
Escribe tu apellido:
P á g i n a 49 | 88
</FORM>
Apellido=Ruiz
SIZE="número". Por otra parte, sea cual sea la longitud del formulario, si no
se indica nada, el usuario puede introducir el número de caracteres que
quiera. Se puede limitar, incluyendo el atributo MAXLENGTH="número".
P á g i n a 50 | 88
<INPUT TYPE="password" NAME="Apellido" SIZE="10"
MAXLENGTH="12">
</TEXTAREA>
</TEXTAREA>
P á g i n a 51 | 88
</FORM>
Una vez que el usuario haya escrito sus comentarios dentro del formulario,
y haya pulsado el botón de envío, recibiremos
<SELECT NAME="ColorPreferido">
<OPTION SELECTED>
<OPTION>Rojo
P á g i n a 52 | 88
<OPTION>Verde
<OPTION>Azul
<OPTION>Amarillo
</SELECT>
</FORM>
ColorPreferido=Azul.
visibles.
</FORM>
Lista=On
Botones de radio
Cuando queremos que el usuario elija una única opción entre varias,
podemos hace uso de los botones de radio, que se
P á g i n a 54 | 88
consiguen con la etiqueta:
</FORM>
P á g i n a 55 | 88
Si el usuario ha escogido la opción MacOS y pulsa el botón de envío,
recibiremos un e-mail suyo con el texto:
Sistema=MacOS
Escribe tu apellido:
</FORM>
Consideraciones finales
Hasta ahora hemos visto uno a uno los diferentes elementos que se
pueden utilizar. Pero no hay ningún inconveniente en
Ejemplo
<HTML>
<HEAD>
<TITLE>Libro de Visitas</TITLE>
</HEAD>
P á g i n a 57 | 88
<BODY>
<H2>Libro de visitas</H2><P>
Tu nombre:
</TEXTAREA><P>
</FORM>
<P><HR>
</BODY>
</HTML>
MAPAS
Hemos visto anteriormente dos maneras distintas de enlazar una página
con otra: por medio de un enlace de texto o por
P á g i n a 58 | 88
medio de una imagen. Pero en este último caso se hacía uso de una
imagen para enlazar a una única página.
Se puede utilizar una única imagen para enlazar con varias páginas, yendo
a una u otra según la zona en donde se pulse el
nuestra página.
Estos mapas, tienen la ventaja de poder ser utilizados por todos los
navegadores, incluso las versiones más antiguas.
P á g i n a 59 | 88
Pero tienen varios inconvenientes: No todos los servidores tienen
implementado el programa CGI necesario para que
pueda funcionar un mapa de este tipo. Además hay que conocer el tipo de
servidor (NCSA, el más común, o CERN), pues
Explorer 2.0, Mosaic 2.1, etc. Pero se puede obviar este inconveniente
suministrando enlaces alternativos para los navegadores que no
implementen este tipo de mapas.
Para crear una mapa para utilizarlo en nuestra página HTML, antes se
confecciona con un programa gráfico la imagen
P á g i n a 61 | 88
que nos va a servir como mapa.
<MAP NAME="nombre">
</MAP>
<MAP NAME="nombre">
P á g i n a 62 | 88
• Esta es la etiqueta de apertura del mapa, y en donde se define su
nombre.
• Con esta etiqueta se define el área completa del mapa, indicando que su
forma es la que tiene por defecto (default), o sea
zonas activas.
</MAP>
P á g i n a 63 | 88
• Con esta etiqueta se pide al servidor que envíe una imagen llamada
imagen.gif. Con USEMAP="#nombre" se indica
que esta imagen es el mapa definido anteriormente con ese nombre, y que
debe actuar en consecuencia a las pulsaciones
<FONT SIZE=-1>
P á g i n a 64 | 88
</FONT>
Para definir una zona activa circular es necesario conocer las coordenadas
de su centro (X,Y) y la longitud de su radio
Para definir una zona activa poligonal hay que conocer las coordenadas de
los distintos puntos (X1,Y1), (X2,Y2),
FRAMES
Frames (en inglés, marcos o cuadros) es un procedimiento del lenguaje
HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden
actuar independientemente unas de otras, como si se tratara de páginas
diferentes, pues incluso
P á g i n a 65 | 88
cada una de ellas puede tener sus propias barras deslizadoras. Los
navegadores que lo implementan son el Netscape 2.0, y
otro, en vez de uno encima del otro, lo que sería una distribución en filas).
Con respecto al tamaño, haremos que el primero (el del izquierda) ocupe el
20% del ancho de la pantalla, y el otro, el
80% restante.
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SRC="mi_indice.html">
P á g i n a 67 | 88
<FRAME SRC="mi_presentacion.html" NAME="principal">
</FRAMESET>
</HTML>
Obsérvese lo siguiente:
frames).
P á g i n a 68 | 88
<FRAME SRC="mi_indice.html">
Con esto se define que el contenido del primer frame (izquierda) sea el
documento HTML que hemos llamado
P á g i n a 69 | 88
Necesitamos ahora confeccionar el documento HTML de cada uno de los
frames. Recuérdese que son como páginas independientes, que pueden
tener cada una su propio fondo, etc., y todo lo que queramos añadir en
ellos.
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#FFBB00">
<P><A HREF="mi_presentacion.html"
TARGET="principal">Presentación</A>
<P><IMG SRC="imagen.gif">
</BODY>
</HTML>
P á g i n a 70 | 88
Dentro de las etiquetas de los enlaces podemos observar algo nuevo, y es
el atributo TARGET (en inglés: objetivo, blanco),
que sirve para hacer que al ser activado el enlace no se cargue en el propio
frame, sino en otro, precisamente en el que hayamos llamado con ese
nombre en el documento de definición de los frames.
<HTML>
<HEAD>
</HEAD>
<CENTER><FONT SIZE=+3><STRONG>
<P>Esta es la versión
<BR>de mi página
P á g i n a 71 | 88
</STRONG></FONT></CENTER>
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SRC="mi_indice.html">
</FRAMESET>
<NOFRAMES>
</NOFRAMES>
</HTML>
P á g i n a 73 | 88
La etiqueta FRAMESET, como hemos visto en el ejemplo, es la que define
la distribución, el número y tamaño de los frames. Tiene dos atributos:
COLS (columnas) y ROWS (filas):
<FRAMESET COLS="XX,YY,ZZ,...">
<FRAMESET ROWS="XX,YY,ZZ,...">
Define el tamaño de los frames, según el valor que demos a XX, YY, ZZ....
Este valor se puede expresar en un porcentaje
del ancho del pantalla (para las columnas), o del alto de la pantalla (para
las filas). Así, por ejemplo:
<FRAMESET COLS="%20,%80">
<FRAMESET ROWS="%10,%70,%20">
(la fila superior ocupará el 10% del alto de la pantalla, la del medio el 70%,
y la inferior el 20%)
P á g i n a 74 | 88
Un número absoluto que representa el número de pixels que ocupará cada
frame a lo ancho o a lo alto (según sean filas o
<FRAMESET COLS="40,600">
<FRAMESET ROWS="100,*,100">
(Habrá tres filas, la superior y la inferior de una altura de 100 pixels, y la del
medio el espacio restante).
Si hay más de un frame con *, ese espacio restante se dividirá por igual
entre ellos. Si hay un número antes del *, ese frame
P á g i n a 75 | 88
obtiene esa cantidad más de espacio relativo. Así "2*,*" daría 2/3 para el
primer frame y 1/3 para el otro.
SRC="dirección"
P á g i n a 76 | 88
atributo se indica lo que se cargará inicialmente en el frame. Si no se le
pone este atributo a la
NAME="nombre_de_la_ventana"
MARGINWIDTH="número"
MARGINHEIGHT="número"
SCROLLING="yes|no|auto"
P á g i n a 77 | 88
• Este atributo se utiliza para decidir si el frame tendrá o no una barra
deslizadora. Si se escoje "yes" tendrá siempre una
NORESIZE
FRAMEBORDER="no"
El atributo TARGET
En el ejemplo hemos visto que, como queríamos que los enlaces situados
en el frame de la izquierda surtieran efecto no en
P á g i n a 78 | 88
él mismo, sino en otro frame (el situado a la derecha), teníamos que poner
dentro de cada enlace el siguiente atributo
TARGET="nombre_dado_a_otro_frame"
Estos nombres, que los escogemos nosotros, pueden ser cualquiera, pero
con la condición que el primer caracter sea alfa numérico (letra o número).
Pero hay unos nombres reservados (es decir, que no se pueden usar para
denominar a un frame), que hacen que este atributo efectúe unas funciones
especiales. Para que cumplan su cometido, es imprescindible escribir estas
palabras reservadas
P á g i n a 79 | 88
navegador. Un error común es olvidar poner este atributo en los enlaces
que están en un frame,
otro sitio web. Esto se evita poniendo este atributo en las etiquetas de los
enlaces.
P á g i n a 80 | 88
Dos filas. La superior ocupa el 15% y la inferior el resto.
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="15%,*">
<FRAME SRC="documento_fila_superior">
<FRAME SRC="documento_fila_inferior">
</FRAMESET>
</HTML>
Como la fila inferior, en realidad, son dos columnas (con una distribución
del 20% y resto), sustituimos (anidando) la
<FRAMESET COLS="20%,*">
<FRAME SRC="documento_columna_izqda">
P á g i n a 81 | 88
<FRAME SRC="documento_columna_dcha">
</FRAMESET>
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="15%,*">
<FRAME SRC="documento_fila_superior">
<FRAMESET COLS="20%,*">
<FRAME SRC="documento_columna_izqda">
<FRAME SRC="documento_columna_dcha">
</FRAMESET>
</FRAMESET>
</HTML>
SONIDOS
Una página Web puede tener sonidos incorporados, bien sea como un
fondo sonoro que se ejecuta automáticamente al
P á g i n a 82 | 88
cargar la página, o como una opción para que la active el propio usuario.
Explorer de Microsoft
Netscape
P á g i n a 83 | 88
alojada la página Web debe tener configurados como MIME los formatos,
.MID y .WAV. Si esto no es así, aunque depositemos en el servidor nuestro
documento HTLM acompañado por el archivo de sonido, éste no se
ejecutará.
Este problema no existe, sin embargo para el Explorer, con el que no nos
tenemos que preocupar por este tema.
El atributo LOOP (en inglés, lazo) sirve para especificar el número (n) de
veces que se debe ejecutar el archivo de sonido.
P á g i n a 84 | 88
<EMBED SRC="archivo_de_sonido" WIDTH=XXX HEIGHT=YY>
estos formatos deben estar configurados como MIME por el servidor donde
esté alojada la página.
Para conseguir que la consola sea invisible hay que añadirle el atributo
HIDDEN="true".
Se puede combinar los dos tipos distintos de etiquetas para conseguir que
un fondo sonoro sea escuchado por usuarios que
P á g i n a 85 | 88
utilicen tanto el Explorer como el Netscape (siempre que éste último esté
preparado para ello). En este caso, el Explorer
de fondo, tanto por el Explorer como por el Netscape (lo hará una sola vez):
P á g i n a 86 | 88
<EMBED SRC="sonido.mid" WIDTH="200" HEIGHT="55"
AUTOSTART="true"
LOOP="true" HIDDEN="true">
Hemos visto cómo poner un sonido de fondo en una página. Hay otra
opción, mucho más sencilla, y es la de poner un enlace a un archivo de
sonido, de tal manera, que al pulsarlo se ejecute el archivo. (Ver la Capítulo
4, en el que se explica
Se puede hacer el enlace con un icono (Ver el Capítulo 5). Por ejemplo al
hacer un enlace con un icono que se llamara
P á g i n a 87 | 88
En el capítulo anterior creamos una versión con frames, en la que aparece
inicialmente en el frame de la derecha una página de presentación.
Se puede colocar a esta página una música de fondo, para que sea
ejecutada por el Explorer y el Netscape. Para ello debemos hacer lo
siguiente:
<BGSOUND SRC="sonido.mid">
P á g i n a 88 | 88