EL LENGUAJE HTML
ÍNDICE
Primera parte: Los primeros pasos en HTML
1- INTRODUCCIÓN
2- ESTRUCTURA DE UN DOCUMENTO HTML
3- COLOR EN HTML
4- PÁRRAFOS
5- TÍTULOS
6- ALINEACIÓN DE LOS ELEMENTOS
7- LÍNEAS HORIZONTALES
8- FUENTE
9- INSERCIÓN DE IMÁGENES
10- CARÁCTERES ESPECIALES
Segunda Parte: HTML intermedio
1012131415-
LISTAS
ENLACES
TABLAS
COMBINACÓN DE ELEMENTOS (Tablas, listas, enlaces e imágenes)
ALGUNAS INDICACIONES SOBRE RUTAS Y DIRECTORIOS
Tercera Parte: HTML avanzado
16171819202122-
MULTIMEDIA CON HTML
MARCOS
IMÁGENES SENSIBLES (MAPAS DE IMÁGENES)
FORMULARIOS
HTML DINÁMICO
TRUCOS EN HTML
ALGUNOS TRUCOS EN JAVASCRIPT
PRIMERA PARTE:
PRIMEROS PASOS EN HTML
1- INTRODUCCIÓN
El lenguaje HTML (Hyper Text Markup Language) es un lenguaje que describe el
formato de un documento por medio de una etiquetas, esto es, palabras
reservadas del lenguaje comprendidas entre los símbolos <>.
Las etiquetas pueden ser de tres tipos:
 Pareadas: siempre aparece una etiqueta de inicio y una etiqueta de final.
La etiqueta de final siempre es como la de inicio salvo que va precedida por
el símbolo /. Por ejemplo: <H1> Esto es un título </H1>
 Sin parear: se utilizan para indicar la inserción de algún elemento como
una imagen, salto de línea, etc.
 Opcionales: son etiquetas pareadas en las que no es necesario emplear la
etiqueta de final, ya que el final de un elemento viene dado por el comienzo
de otro, como ocurre en los párrafos, etc. Ejemplo: <P>Aquí comienza un
párrafo.<P>Y aquí otro.</P>
Las etiquetas pueden contener en su interior atributos, que modifican de alguna
forma el comportamiento “por defecto” de la etiqueta. Los atributos no pueden en
la etiquetas de final. A los atributos se le debe especificar un valor característico
dentro de una lista de posibilidades que depende del atributo. Se le asigna como
atributo=”valor”. Ejemplos:
 <P align=”left”>
 <IMG src=”foto.gif”>
 <HR noshade>
Algunas etiquetas pueden llevar o no atributos, en otros casos, como la etiqueta de
inserción de imagen, algunos atributos son obligatorios.
HTML no distingue entre mayúsculas y minúsculas pero, por claridad a la hora de
leer y entendernos, escribiremos los nombres de las etiquetas en mayúsculas y los
atributos en minúsculas.
2- ESTRUCTURA DE UN DOCUMENTO HTML
Un documento de HTML es un fichero de texto plano (sin formato), como los que
escribimos con el bloc de notas que utiliza una serie de etiquetas para indicar la
estructura y el formato de la información que contiene.
Para que un navegador reconozca que un fichero contiene información HTML se le
debe dar un nombre que termine con la extensión “.html” o “.htm”.
Consta de dos partes, el encabezado y el cuerpo del documento y su estructura
general es la siguiente:
<HTML>
<HEAD>
.........................
</HEAD>
<BODY>
.........................
</BODY>
</HTML>
Toda la información va entre las etiquetas <HTML> de inicio y </HTML> de final. El
encabezado se encuentra entre las etiquetas <HEAD> y </HEAD>, mientras que el
cuerpo del documento va comprendido entre <BODY> y </BODY>.
El encabezado
En el encabezado del documento se puede incluir muchas cosas, pero nosotros sólo
vamos a ver el título de la página. Cuando hablamos de título de la página nos
referimos al que aparece en la barra azul del explorador (barra de título). Es muy
importante no confundir este título con los títulos que pongamos en los textos que
escribamos en nuestra página.
La etiqueta que utilizaremos para poner títulos es una etiqueta pareada:
<TITLE> ..... </TITLE>
Por ejemplo, un encabezado podría ser:
<HEAD>
<TITLE> Mi primera Web </TITLE>
</HEAD>
La etiqueta <BODY>
</BODY>
Toda la información que queremos que aparezca en la página la debemos incluir en
el cuerpo del documento. Este comienza con la etiqueta <BODY> y termina con
</BODY>.
La etiqueta <BODY> admite varios atributos entre los que destacan los siguientes:




background: para poner una imagen de fondo.
bgcolor: para poner un color de fondo.
text: para elegir el color del texto.
link, vlink y alink: para elegir el color de los enlaces, los enlaces visitados
y los enlaces marcados.
Con todo esto podemos escribir nuestra primera página Web. Sería algo así:
<HTML>
<HEAD>
<TITLE> Mi primera Web </TITLE>
</HEAD>
<BODY>
Aquí va el texto que queremos poner.
</BODY>
</HTML>
3- COLOR EN HTML
Existen muchos elementos en una página Web para los que podemos especificar el
color: fondo, texto, enlaces, etc. La forma más sencilla de especificar el color es
mediante el nombre del color en inglés y entre comillas. Por ejemplo, si queremos
que el anterior documento tenga el fondo azul y el texto blanco, cambiaremos la
línea de <BODY> por:
<BODY bgcolor=”blue” text=”white”>
Este es el resultado:
Con la segunda forma de especificar el color podemos dar cualquier color. Se basa
en un código de 6 números o letras precedidos por el símbolo #, de los cuales el
primer par nos dan la intensidad de rojo, el segundo par la intensidad de verde y
el tercer par la intensidad de azul. Variando la cantidad de rojo, verde y azul
podemos obtener cualquier color. Las intensidades siguen el orden: 0, 1, 2, 3, 4,
5, 6, 7, 8, 9, a, b, c, d, e, f.
Ejemplos: negro = #000000, blanco = #ffffff, rojo = #ff0000, verde = #00ff00,
azul = #0000ff.
Muestras:
#ee7455
#2299ee
#8877bb
#555555
#553300
#eeee00
#997700
#777777
Si nos fijamos en los dos grises nos damos cuenta de que si queremos un color más
oscuro debemos disminuir la numeración, mientras que si lo que queremos es un
color más claro deberemos aumentarla.
4- PÁRRAFOS
Para introducir texto en un documento HTML es suficiente, como vimos en el primer
ejemplo, con escribirlo entre las etiquetas <BODY> y </BODY>. No obstante, si
queremos que el texto se presente de una forma ordenada, hemos de utilizar
párrafos.
Para especificar el comienzo de un párrafo se utiliza la etiqueta pareada <P> ...
</P>. Dado que el final de un párrafo suele coincidir con el inicio de otro, la
etiqueta de final, en la mayoría de los casos, la podemos olvidar.
El uso de la etiqueta <P> nos va a permitir alinear el texto a la derecha, izquierda o
centrado. Esto se hace con el atributo align, que puede tomar los valores left,
right, center.
Por ejemplo, el documento:
<HTML>
<HEAD>
<TITLE> Mi primera Web </TITLE>
</HEAD>
<BODY>
<P>Aquí comienza el primer párrafo del documento que estoy escribiendo.
<P align=center>Este otro párrafo está centrado
<P align=right>Este está alineado a la derecha
</BODY>
</HTML>
da el siguiente resultado:
En algunos casos nos interesará separar los párrafos más de una línea. No podemos
utilizar varias etiquetas <P> seguidas porque el navegador las interpreta como una
sola. Para este caso hemos de utilizar la etiqueta de salto de línea <BR>.
Por ejemplo:
<HTML>
<HEAD>
<TITLE> Párrafos en HTML </TITLE>
</HEAD>
<BODY>
<P>Aquí comienza el primer párrafo del documento que estoy escribiendo.
<P align=center>Este otro párrafo está centrado.
<P align=right><BR><BR>Este está alineado a la derecha y más separado.
</BODY>
</HTML>
da el siguiente resultado:
5- TÍTULOS
Cuando hablamos de títulos en HTML nos referimos a los encabezados del
documento y las secciones que contiene.
Los títulos se indican con la etiqueta pareada <Hn> ...... </Hn>. La n hemos de
sustituirla por un número de 1 a 7 que nos indica la importancia del título. <H1>
será el más importante y, por tanto, el de mayor tamaño y <H7> el menos
importante y de menor tamaño.
Los títulos admiten también el atributo align con los mismos valores que en el caso
de los párrafos.
Ejemplo:
<HTML>
<HEAD>
<TITLE> Títulos en HTML </TITLE>
</HEAD>
<BODY>
<H1 align=center>Este es el título principal centrado</H1>
<H2 align=right> Este es el subtítulo alineado a la derecha</H2>
<H3>Este es el segundo subtítulo</H3>
</BODY>
</HTML>
Esto da el resultado:
Es muy importante cerrar las etiquetas de título, ya que de lo contrario, todo
lo que escribamos a continuación será interpretado como parte del título. Por
ejemplo, el siguiente código en el que no hemos cerrado <H1>:
<HTML>
<HEAD>
<TITLE> Títulos en HTML </TITLE>
</HEAD>
<BODY>
<H1 align=center>Este es el título principal centrado
<H2 align=right> Este es el subtítulo alineado a la derecha</H2>
<P>Aquí escribiré el texto que deseo que aparezca en mi página Web.
</BODY>
</HTML>
produce el siguiente resultado:
Esto ocurre porque se ha interpretado el texto como parte del título.
6- ALINEACIÓN DE LOS ELEMENTOS
Ya hemos visto cómo podemos alinear algunos elementos como párrafos y títulos
mediante el atributo align. Este atributo también servirá para la alineación de otros
elementos como imágenes y tablas.
Para centrar elementos también existe la etiqueta paread <CENTER> .......
</CENTER>, que centra cualquier elemento que se encuentre entre la etiqueta de
inicio y la de final.
Por ejmplo:
<HTML>
<HEAD>
<TITLE> Alineación en HTML </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Título del Documento</H1>
<H2> (subtítulo)</H2>
<P>Aquí escribiré el texto que deseo que aparezca en mi página Web. No es
necesario que, por el momento se excesivamente largo.
</CENTER>
</BODY>
</HTML>
produce el siguiente resultado:
7- LÍNEAS HORIZONTALES
Las líneas horizontales nos sirven para separar secciones del documento y, con ello,
dar un aspecto más profesional al mismo.
Las líneas se introducen mediante la etiqueta <HR>, la cual admite los siguientes
atributos:




size: marca el grosor de la línea. El menor valor es 1 y el valor por defecto
2.
width: marca la anchura horizontal de la línea en píxeles o en porcentaje de
la página. Por defecto es todo el ancho de pantalla.
align: igual que en en los casos anteriores especifica la alineación de la
línea y puede ser left, right o center. Si no se especifica nada, las líneas
están centradas.
noshade: muestra una líneas sólida sin apariencia tridimensional.
Ejemplo:
<HTML>
<HEAD>
<TITLE> Líneas horizontales en HTML </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Título del Documento</H1>
<H2> (subtítulo)</H2>
</CENTER>
<HR size=4>
<P>Aquí escribiré el texto que hemos separado de título y subtítulo por una línea
horizontal que ocupa toda la pantalla y que es mas gruesa de lo normal.</P>
<HR width=60% align=left>
<P>Este segundo párrafo lo hemos separado del primero mediante una línea que
sólo ocupa el 60% de la pantalla y está alineada a la izquierda.
</BODY>
</HTML>
8- FUENTE
Hasta el momento, hemos estado utilizando el tipo, tamaño y color de letra que
aparece en el navegador por defecto. Esta letra es Times New Roman de tamaño 12
y en negro.
Ya vimos en el apartado del color cómo podemos modificar el color de la letra de
TODO el documento. Lo hacíamos con el atributo text de la etiqueta <BODY>. Pero,
¿cómo modificamos solamente una troza de texto?
Para modificar la letra de un documento utilizaremos la etiqueta pareada <FONT>
.... </FONT> que alterará SÓLO el texto que se encuentre entre la etiqueta de
inicio y de final.
Esta etiqueta admite los atributos:



color: especifica el color del texto.
size: especifica el tamaño del texto de 1 (más pequeño) a 7.
face: especifica el tipo de letra. Podemos utilizar cualquier tipo de letra que
se encuentre en la carpeta WINDOWS/Fonts/ y que vaya marcada con una
O.
Por ejemplo:
<HTML>
<HEAD>
<TITLE> Texto en HTML </TITLE>
</HEAD>
<BODY text=brown>
<CENTER>
<H1>Título del Documento</H1>
<H2> (subtítulo)</H2>
</CENTER>
<P>Hasta este párrafo (incluido), el texto tiene el color que hemos especificado en
la etiqueta BODY. </P>
<FONT size=4><P>En este párrafo sigo con el mismo tipo de letra y el mismo
color pero ahora un poco mayor.</FONT>
<FONT color=red size=1><P>Este tercer párrafo tiene letra de color rojo y más
pequeña.</FONT>
<FONT color=cyan face="chiller" size=5><P>Este cuarto párrafo tiene otro tipo
letra llamado chiller, color azul claro y es un poquito más grande.</FONT>
</BODY>
</HTML>
Existen otras formas de modificar el texto: la letra negrita, cursiva (itálica),
subrayado, etc. Esto siempre se consigue mediante etiquetas pareadas que
resumimos en el siguiente cuadro:
Etiqueta
<B> </B>
<I> </I>
<U> </U>
<SUB> </SUB>
<SUP> </SUP>
Texto
Texto
Texto
Texto
Texto
Descripción
en negrita
en cursiva
subrayado
como subíndice
como superíndice
Por ejemplo, si queremos escribir:
“El microprocesador es una de las partes fundamentales del ordenador”
El fragmento de código sería:
“El <B>microprocesador</B> es una de la partes fundamentales del ordenador”
Si queremos combinar efectos como, por ejemplo:
“Ayer terminé de leer Las aventuras de Huckelberry Finn”
El fragmento de código sería:
“Ayer terminé de leer <B>Las aventuras de <I>Huckelberry Finn</I></B>”
Observemos el anidamiento de las etiquetas: la etiqueta <I> va dentro de la
etiqueta <B>, es decir, se abre después y se cierra antes, de modo que la acción
de la etiqueta <B> recae sobre todo el texto, incluido el que esta entre las
etiquetas <I> de inicio y final, que actúan sólo sobre el texto que incluyen entre
ellas. Más adelante, veremos más ejemplos de anidamiento.
9- INSERCIÓN DE IMÁGENES
Existen dos formas de incluir imágenes en un documento HTML. La primera es
mediante un enlace al fichero gráfico que contiene la imagen. Veremos más
adelante cómo se realizan enlaces.
La segunda forma que es la que va a hacer posible que la imagen forme parte de
un documento con título, texto, etc., es mediante le etiqueta <IMG>.
La etiqueta <IMG> presenta los siguientes atributos:









src: contiene la ruta de acceso a la imagen, incluyendo su nombre. ES
OBLIGATORIO.
alt: asigna un texto descriptivo relacionado con la imagen.
align: controla la alineación de la imagen
height: especifica la altura de la imagen a insertar en píxeles o en
porcentaje de pantalla (recomendado).
width: especifica la anchura de la imagen a insertar en píxeles o en
porcentaje de pantalla (recomendado).
border: fija la anchura del borde que rodeará a la imagen. Por defecto no
tiene (valor 0).
hspace: fija la distancia horizontal en píxeles entre la imagen y cualquier
otro elemento (texto, otra imagen, etc.).
vspace: fija la distancia vertical en píxeles entre la imagen y cualquier otro
elemento (texto, otra imagen, etc.).
usemap: lo veremos más adelante.

imap: lo veremos más adelante.
Ejemplo: el código:
<HTML>
<HEAD>
<TITLE> Imágenes en HTML </TITLE>
</HEAD>
<BODY >
<CENTER>
<H1>Título del Documento</H1>
<H2> (subtítulo)</H2>
</CENTER>
<HR>
<FONT size=5>
<P><IMG src=”cortado.jpg” align=right width=30%>
Este párrafo rodea a la foto del cortado que se alinea a la derecha con respecto al
texto. El tamaño de la imagen ha sido reducido a una anchura del 30% de la
pantalla para que no sea excesivamente grande.
<p>He aumentado el tamaño de la letra del documento para no tener que estar
inventándome tonterías a la hora de escribir. Cuando el texto sobre pasa la imagen,
vuelve a ocupar toda la pantalla del navegador.
</FONT>
</BODY>
</HTML>
da el siguiente resultado:
10- CARÁCTERES ESPECIALES
Para terminar esta primera parte vamos a ocuparnos de cómo introducir algunos
símbolos en HTML. Estos símbolos son caracteres especiales que se introducen por
medio de un código. Los más utilizados son los siguientes:
Carácter
<
“
ó
Ñ
Código
&lt;
&quot;
&oacute;
&Ntilde;
Carácter
>
á
ú
®
Código
&gt;
&aacute;
&uacute;
&reg;
Carácter
&
é
Á
@
Código
&amp;
&eacute;
&Aacute;
&copy;
Carácter
#
í
ñ
Espacio
Código
&#35;
&iacute;
&ntilde;
&nbsp;
SEGUNDA PARTE:
HTML INTERMEDIO
11- LISTAS
Las listas o listados nos sirven para enumerar opciones, crear índices o menús,
presentar apartados de un documento, etc.
En HTML existen 4 tipos de listas: listas desordenadas, listas ordenadas,
menús y listas de elementos cortos. Veremos las dos primeras:


Listas desordenadas: cada apartado de la lista incluye una marca (un
punto grande, un cuadradito, etc.) y un margen. Las listas desordenadas se
representan mediante la etiqueta <UL> ...... </UL>, que admite el
atributo type. Este atributo indica la marca de párrafo que se utilizará y
puede tomar los valores “circle”, “disc” o “square”.
Listas ordenadas: cada apartado de la lista incluye un elemento de orden
(un número o una letra.) y un margen. Las listas desordenadas se
representan mediante la etiqueta <OL> ...... </OL>, que admite el
atributo type. Este atributo indica la numeración que se utilizará y puede
tomar los valores “A”, “a”, “I”, “i”, “1”.
Para cualquier tipo de lista, cada uno de los apartados se indica con la etiqueta de
tipo opcional <LI> ..... </LI>,
Ejemplo:
<HTML>
<HEAD>
<TITLE> Listas en HTML </TITLE>
</HEAD>
<BODY >
Temario del curso (ordenado):
<OL type=”a”>
<LI>Tema 1</LI>
<LI>Tema 2</LI>
<LI>Tema 3</LI>
<LI>Tema 4</LI>
<LI>Tema 5</LI>
</OL>
Temario del curso (desordenado):
<UL type=”square”>
<LI>Tema 1</LI>
<LI>Tema 2</LI>
<LI>Tema 3</LI>
<LI>Tema 4</LI>
<LI>Tema 5</LI>
</UL>
</BODY>
</HTML>
Las listas pueden aparecer anidadas, esto es, una dentro de otra. Realmente, la
sublista se encuentra dentro de uno de los apartados de la primera lista. Veamos
un ejemplo en que anidamos una lista desordenada dentro de una ordenada:
<HTML>
<HEAD>
<TITLE> Listas en HTML </TITLE>
</HEAD>
<BODY >
Temario del curso (ordenado):
<OL type=”1”>
<LI>Tema 1</LI>
<UL type=”circle”>
<LI>apartado 1</LI>
<LI>apartado 2</LI>
<LI>apartado 3</LI>
</UL>
<LI>Tema 2</LI>
<LI>Tema 3</LI>
<LI>Tema 4</LI>
<LI>Tema 5</LI>
</OL>
</BODY>
</HTML>
12- ENLACES
Los enlaces entre documentos son lo que hacen de HTML un lenguaje potente.
Hasta el momento no hemos hecho nada que no pueda hacerse con un editor de
texto ordinario. Pero los enlaces van a permitirnos conectar diferentes secciones de
un mismo documento, documentos diferentes o, incluso ir de un documento a un
apartado específico de otro. Además, los enlaces no tienen que ser sólo a
documentos de texto, pueden relacionar también ficheros de imagen, sonido, vídeo.
La etiqueta para establecer cualquier enlace es la etiqueta pareada <A> .....
</A>. Los atributos que incluye y su uso depende mucho del tipo de enlace, así
que lo iremos viendo poco a poco.
Comenzaremos por incluir en el documento un enlace a la dirección de correo
electrónico. Un enlace al e-mail tiene la siguiente estructura:
<ADDRESS><A href=”mailto:dirección de correo”>Enlace</A></ADDRESS>
Por ejemplo:
<HTML>
<HEAD>
<TITLE> Enlace a e-mail </TITLE>
</HEAD>
<BODY >
Escribe un e-mail a: <ADDRESS><A href=”mailto:rmedrano@csvf.net”>Roberto
Medrano</A></ADDRESS>
</BODY>
</HTML>
Los enlaces a una página o dirección de la World Wide Web son más
sencillos. En este caso no utilizamos la etiqueta <ADDRESS> ..... </ADDRESS>,
sino que escribimos la dirección en el valor del atributo href. Por ejemplo:
<HTML>
<HEAD>
<TITLE> Enlace a Web </TITLE>
</HEAD>
<BODY >
Si quieres ir a Google haz click <A href=”http://www.google.com”>aquí</A>.
</BODY>
</HTML>
El texto que escribimos entre la etiqueta <A> de inicio y la etiqueta </A> de final,
es lo que aparece en nuestra página como elemento interactivo para pinchar y que
nos lleve al enlace. Veremos más adelante que podemos utilizar también imágenes.
Los enlaces a una sección del documento implican el uso de, al menos, dos
etiquetas de enlace. Necesitamos una etiqueta para dar nombre a la sección y
otra para enlazar con la sección.
Por ejemplo, veamos este documento llamado “museos de cordoba.html”1:
1
Este documento es parte de un trabajo realizado por Ana María Campos Fernandez de 1º de E.S.O. del
curso 2003-2004.
En el documento, a cada sección se le ha puesto un nombre, justo delante del título
de la sección:
<a name="bellasartes"></a>
EL MUSEO DE BELLAS ARTES
<P>Situado en la bellísima plaza del Potro, el Museo de ....
En la parte de arriba se escriben los enlaces a cada una de las secciones:
<a href="#bellasartes">Museo Bellas Artes</a><br>
<a href="#naranjasylimones">Museo Naranjas y Limones</a><br>
<a
href="#alcazardelosreyescristianos">Museo
Alcázar
de
los
Reyes
Cristianos</a><br>
<a
href="#torrefortalezadelacalaorra">Museo
Torre
Fortaleza
de
la
Calahorra</a><br>
<a href="#madinat">Museo de Maninat Al-zahra</a><br>
Vemos que el enlace tiene la misma estructura que un enlace a Web pero la
“dirección” que escribimos en el atributo href es el nombre de la sección precedido
del símbolo #, que indica que la dirección se refiere a un parte del documento en el
que estamos trabajando.
Para crear un enlace a una sección de otro documento procedemos de forma
similar. Imaginemos que desde el documento llamado “Inicio.html” queremos ir a la
sección del Museo de Bellas Artes dentro del documento “museos de cordoba.html”.
Los pasos que hemos de realizar son los siguientes:


Damos nombre a las secciones del documento “museos de cordoba.html”, si
no lo tienen ya, tal y como vimos antes.
En el documento “Inicio.html” creamos un enlace similar a los que
creábamos antes para hacer referencia a una sección dentro del documento.
La diferencia es que, ahora, hemos de especificar el nombre del archivo (y la
ruta si no se encuentra en el mismo directorio, aunque eso lo veremos más
adelante) “museos de cordoba.html” delante del símbolo #. Es decir, en el
documento “Inicio.html” escribimos algo así:
<HTML>
<HEAD>
<TITLE> Enlace a sección de otro documento</TITLE>
</HEAD>
<BODY >
Vamos a ver la sección de museos de Córdoba que trata del <A
href=”museos de cordoba.html#bellasartes”>Museo de Bella Artes</A>.
</BODY>
</HTML>
El documento “Inicio.html” queda de la siguiente forma:
Al pinchar en el enlace obtenemos:
13- TABLAS
HTML nos permite crear tablas que nos van a servir no sólo para organizar el texto
en filas y en columnas, si no que también nos va a permitir insertar imágenes y
ordenarlas.
Una tabla se define mediante la etiqueta pareada <TABLE> ..... </TABLE>, en
cuyo interior se describen las filas y las columnas de la misma.
Las filas se representan con la etiqueta opcional <TR> ..... </TR> y son los
bloques básicos, es decir, que son lo primero que se especifica y las columnas se
definen dentro de cada fila.
Las columnas se definen, dentro de cada fila, mediante la etiqueta opcional <TD>
..... </TD>. Existe también un tipo de columna especial, la de encabezado (le de
los títulos de las columnas) que se puede especificar con la etiqueta opcional <TH>
..... </TH>, que produce un formato especial.
Además, se le puede poner un título o comentario de tabla mediante la etiqueta
pareada <CAPTION> ..... </CAPTION>. Esta etiqueta sólo puede aparecer una
vez dentro de cada tabla.
Ejemplo:
<HTML>
<HEAD>
<TITLE> Tablas en HTML </TITLE>
</HEAD>
<BODY >
Esta tabla muestra algunos gastos de una familia de 4 miembros:
<TABLE>
<CAPTION>Gastos Mensuales</CAPTION>
<TR>
<TH>Mes</TH>
<TH>Alimentación</TH>
<TH>Luz/Gas/Agua</TH>
<TH>Transporte</TH>
</TR>
<TR>
<TD>Enero</TD>
<TD>250</TD>
<TD>120</TD>
<TD>200</TD>
</TR>
<TR>
<TD>Febrero</TD>
<TD>230</TD>
<TD>135</TD>
<TD>190</TD>
</TR>
</TABLE>
</BODY>
</HTML>
En el ejemplo anterior, la tabla no tiene ningún borde que la diferencie del resto del
documento. Esto será útil en algunos casos. No obstante, si queremos que aparezca
el borde, debemos utilizar el atributo border dentro de la etiqueta <TABLE>. El
valor que puede tomar este atributo es 0 (si no aparece) o valores de 1 a 7 según
el grosor que queramos.
Por ejemplo, la tabla anterior con borde, sería igual pero la etiqueta <TABLE>
quedaría:
<TABLE border=1>
lo que produce el resultado:
Existen otros atributos, tanto de la etiqueta <TABLE> como de las etiquetas de fila
y de columna, que nos permiten modificar la apariencia de la tabla:
Etiqueta
Atributo
<TABLE>
border
cellpadding
cellspacing
width
align
<CAPTION>
align
<TR>
align
valign
<TD> y <TH>
align
valign
Función
Fijar ancho del borde de la
tabla
Fija la distancia (en píxeles)
entre el borde de la celda y su
contenido
Fija la anchura (en píxeles) de
las líneas de división de la tabla
Controla la anchura horizontal
de la tabla, en píxeles o en
porcentaje de pantalla
Controla la alineación de la
tabla con respecto a otros
elementos de la página
Fija la posición del título con
respecto de la tabla
Alineación horizontal del texto
en la fila
Alineación vertical del texto en
la fila
Alineación horizontal del texto
en la columna
Alineación vertical del texto en
la columna
colspan
Indica el número de columnas
que ocupará esta celda
rowspan
Indica el número de filas que
ocupará esta celda
nowrap
Obliga al explorador a no
romper las líneas de texto que
contenga la celda
width
Determina el ancho de la celda,
en píxeles o en porcentaje.
Valores
de 0 a 7
cualquier valor
positivo
cualquier valor
positivo
cualquier valor
positivo (con %
si indicamos
porcentaje)
left, right
top (arriba) o
bottom (abajo)
left, center,
right
top, bottom,
middle, baseline
left, center,
right
top, bottom,
middle, baseline
cualquier valor
positivo mayor
que 2 y menor
que el número
total de
columnas
cualquier valor
positivo mayor
que 2 y menor
que el número
total de filas
cualquier valor
positivo (con %
si indicamos
porcentaje)
Además, las etiquetas <TABLE>, <TR> y <TD> admiten el atributo bgcolor, que
permite cambiar el fondo de la tabla, columna, fila, etc., según la etiqueta sobre la
que se aplique. Lo mismo ocurre con el atributo background si queremos poner
una imagen de fondo en la tabla o en algunas de sus celdas.
Vamos a ver unos ejemplos:
1- En este primer ejemplo vamos a ver el color en las celdas y la alineación de
tabla y de texto.
<HTML>
<HEAD>
<TITLE> Tablas en HTML </TITLE>
</HEAD>
<BODY >
Esta tabla muestra algunos gastos de una familia de 4 miembros:
<BR><BR>
<TABLE border=2 align=center>
<CAPTION>Gastos Mensuales</CAPTION>
<TR bgcolor=”#88aa88” align=center>
<TH>Mes</TH>
<TH>Alimentación</TH>
<TH>Luz/Gas/Agua</TH>
<TH>Transporte</TH>
</TR>
<TR bgcolor=cyan align=right>
<TD align=left>Enero</TD>
<TD bgcolor=red>250</TD>
<TD>120</TD>
<TD>200</TD>
</TR>
<TR bgcolor=cyan align=right>
<TD align=left>Febrero</TD>
<TD>230</TD>
<TD>135</TD>
<TD>190</TD>
</TR>
</TABLE>
</BODY>
</HTML>
2- En este ejemplo vamos a dejar la tabla alienada a la izquierda de un texto y
le vamos a dejar espacio entre el borde de la celda y su contenido así como
con respecto al texto de fuera.
<HTML>
<HEAD>
<TITLE> Tablas en HTML </TITLE>
</HEAD>
<BODY >
<font size=4>
<p>Como la tabla esta alineada a la izquierda, el texto la pasará por la derecha.
<TABLE border=2 bgcolor=cyan align=left cellpdding=8 cellspacing=4>
<CAPTION align=bottom>Gastos Mensuales</CAPTION>
<TR bgcolor=”#88aa88” align=center>
<TH>Mes</TH>
<TH>Alimentación</TH>
<TH>Luz/Gas/Agua</TH>
<TH>Transporte</TH>
</TR>
<TR align=right>
<TD align=left>Enero</TD>
<TD>250</TD>
<TD>120</TD>
<TD>200</TD>
</TR>
<TR align=right>
<TD align=left>Febrero</TD>
<TD>230</TD>
<TD>135</TD>
<TD>190</TD>
</TR>
</TABLE>
<p>En cuanto escribamos detrás de la tabla.
<P>Si nos fijamos, el cambio de tamaño del texto no ha afectado al texto dentro
de la tablas, si no, sólamente, al texto de fuera.</font>
</BODY>
</HTML>
3- Por último, vamos a ver cómo cambiar el texto en una tabla y hacer que una
columna (fila) ocupe el espacio de varias:
<HTML>
<HEAD>
<TITLE> Tablas en HTML </TITLE>
</HEAD>
<BODY >
<TABLE border=2 bgcolor=cyan align=left cellpdding=8>
<CAPTION align=bottom>Gastos Mensuales</CAPTION>
<TR bgcolor=”#88aa88” align=center>
<TH><font size=4 face="verdana">Mes</TH>
<TH>Alimentación</TH>
<TH>Luz/Gas/Agua</TH>
<TH>Transporte</TH>
</TR>
<TR align=right>
<TD align=left>Enero</TD>
<TD>250</TD>
<TD colspan=2>320</TD>
</TR>
<TR align=right>
<TD align=left>Febrero</TD>
<TD>230</TD>
<TD>135</TD>
<TD>190</TD>
</TR>
</TABLE>
</BODY>
</HTML>
14- COMBINACIÓN DE ELEMENTOS
Hemos aprendido ya mucha cosas sobre HTML: estructura y formato del texto,
enlaces, imágenes, listas, tablas, etc. Por el momento cada cosa la hemos visto por
separado. Sin embargo, lo interesante de HTML es la combinación de todos los
elementos para producir documentos más vistosos e interesantes.
Para combinar elementos es necesario insertar unas etiquetas dentro del campo de
acción de otra, es decir, entre las etiquetas de inicio y final de la primera.
Estudiaremos con más detenimiento este concepto de anidamiento de etiquetas.
En este apartado veremos sólo algunos ejemplos, pero que ilustrarán las
posibilidades que existen y que podemos explotar con un poquito de imaginación.
1. Menú de enlaces.
En ocasiones, puede interesarnos tener un listado de opciones, es decir, un menú,
que nos permita seleccionar el apartado de la página que queremos visitar o
simplemente que nos presente un listado de enlaces a páginas de Internet. Esto se
puede hacer creando una lista (ordenada o desordenada) en la que cada punto sea
un enlace. Veamos un ejemplo:
<HTML>
<HEAD>
<TITLE> Menú de opciones </TITLE>
</HEAD>
<BODY >
Esta es una lista de buscadores en Internet:
<UL type=disc>
<LI><A href="http://www.google.com">Google</A></LI>
<LI><A href="http://www.yahoo.com">Yahoo</A></LI>
<LI><A href="http://www.altavista.com">Altavista</A></LI>
<LI><A href="http://www.lycos.es">Lycos</A></LI>
</UL>
</BODY>
</HTML>
2. Enlace con imagen.
En muchas páginas de Internet encontramos imágenes que hacen la función de
enlace, bien a la misma foto pero más grande, bien a cualquier otra página.
Veamos un ejemplo:
El documento que contiene el enlace sería:
<HTML>
<HEAD>
<TITLE> Enlace con foto </TITLE>
</HEAD>
<BODY >
Haz click sobre la imagen para verla en grande:<BR><BR>
<center>
<A href="fotogrande.html"><IMG src="doscafes.jpg" width=50></A>
</center>
</BODY>
</HTML>
Fijémonos que la foto aparece rodeada de un borde azul, lo cual indica que es un
enlace. Cuando pinchamos sobre la foto, vamos al siguiente documento que
contiene la imagen en grande:
El código de este documento es el que sigue:
<HTML>
<HEAD>
<TITLE> Enlace con foto </TITLE>
</HEAD>
<BODY >
<center>
<IMG src="doscafes.jpg" width=300></A>
</center>
</BODY>
</HTML>
Hemos fijado el tamaño de la imagen en píxeles para evitar que cambie de tamaño
al hacer la ventana más grande. Podríamos haber hecho un enlace directo a la
imagen, pero esto nos impediría controlar el tamaño y la alineación de la imagen.
Es decir, si en el primer documento cambiamos la línea del enlace por:
<A href="doscafes.jpg"><IMG src="doscafes.jpg" width=50></A>
al pinchar en la foto enlace, nos lleva a lo siguiente:
3. Tablas de fotos.
En una página Web en la que queremos mostrar fotos, es habitual hacerlo en forma
de tabla para conseguir una mejor organización y un aspecto más elegante. Existen
muchos programas que realizan automáticamente la tarea con indicar simplemente
el número de filas y columnas y el tamaño de la tabla (Dreamweber, Frontpage,
PhotoBase, etc.) pero todos ellos esconden un código HTML como el que nosotros
vamos a ver ahora:
Vamos a crear una tabla con cuatro fotos con el siguiente código:
<HTML>
<HEAD>
<TITLE> Tabla con fotos </TITLE>
</HEAD>
<BODY >
<H1 align=center>Álbum de Fotos<H1>
<HR>
<TABLE align=center border=1>
<TR>
<TD><IMG src="doscafes.jpg" width=100></TD>
<TD><IMG src="cafe.jpg" width=100></TD>
</TR>
<TR>
<TD><IMG src="movil.jpg" width=100></TD>
<TD><IMG src="orejas.jpg" width=100></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Hemos fijado la anchura de las imágenes en píxeles, para evitar que cambien de
tamaño al variar el tamaño de la ventana. Evidentemente, el problema es que si no
todas las fotos tienen el mismo formato, en la tabla aparecen espacios en blanco
para completar el espacio que queda en la celda al pertenecer a una fila en la que
hay un imagen más alta. Para evitar esto tenemos dos soluciones:
Reordenar “manualmente” las imágenes, es decir, cambiar el código anterior de
forma que las fotos con el mismo formato estén en la misma fila:
Podemos fijar también la altura de las imágenes, aunque esto nos deformará
alguna o todas las fotos:
<IMG src="doscafes.jpg" width=100 height=80>
En el caso de que tengamos fotos cuyos formatos conocemos de antemano, lo
mejot es planificar un poco y utilizar el primer método.
En el caso que se tenga que preparar una tabla para fotos que van a venir después,
es mejor el segundo método, ya que, como veremos en el siguiente apartado,
podemos utilizar la tabla para poner pequeñas fotos-enlace que nos lleven a la
imagen más grande. En este caso no importa un poco de deformación.
En cualquier caso, si las fotos las va a hacer uno mismo, es bueno llevar en la
cabeza que las vamos a poner en la Web y utilizar como máximo dos formatos, uno
horizontal y otro vertical, a la hora de sacar las fotos. Esto nos simplifica mucho el
trabajo después.
4. Tabla de fotos con enlace.
Veamos como podemos convertir la tabla anterior en una tabla de pequeñas fotosenlace que nos lleven a una imagen mayor de la misma foto. Al pinchar, el
navegador no irá a el fichero de imagen directamente, si no, tal como hicimos
anteriormente, nos llevará a un fichero .html que contendrá la imagen
correspondiente. Estos ficheros que contendrán las imágenes, llevarán el mismo
nombre que la imagen que contienen salvo por la extensión .html en lugar de .jpg.
El código para esta tabla (dejamos que las fotos se deformen), será:
<HTML>
<HEAD>
<TITLE> Tabla con fotos </TITLE>
</HEAD>
<BODY >
<H1 align=center>Álbum de Fotos<H1>
<HR>
<TABLE align=center border=1>
<TR>
<TD><A href="doscafes.html"><IMG src="doscafes.jpg" width=100
height=80></A>
<TD><A href="cafe.html"><IMG src="cafe.jpg" width=100 height=80></A>
</TR>
<TR>
<TD><A href="movil.html"><IMG src="movil.jpg" width=100 height=80></A>
<TD><A href="orejas.html"><IMG src="orejas.jpg" width=100
height=80></A>
</TR>
</TABLE>
</BODY>
</HTML>
Vemos como aparecen los bordes azules indicando que estamos ante una imagen
que es un enlace:
Vemos el código de uno de los archivos que contienen las imágenes (movil.html):
<HTML>
<BODY >
<center>
<IMG src="movil.jpg" width=300></A>
</center>
</BODY>
</HTML>
15- ALGUNAS INDICACIONES SOBRE RUTAS Y DIRECTORIOS
En ocasiones, al abrir una de nuestras páginas con el explorador, es posible que las
imágenes que hemos insertado no se nos muestren y, en su lugar, aparece un
cuadradito con una cruz como el de la figura:
También es posible que los enlaces no funcionen correctamente, es decir, que
cuando los pinchemos no aparezca la página que queremos sino un mensaje de
error.
Existen dos posibles razones para que esto ocurra: el nombre del archivo imagen o
de destino del enlace por un lado; y la ruta de acceso al archivo por otro.
En cuanto a los nombres de los archivos, son muy comunes los siguientes
errores:

No incluir la extensión del archivo. En Windows, todos los ficheros tienen
una extensión (los de Word son .doc, los de bloc de notes .tex o .html, etc.).
La extensión es como el apellido del archivo, nos indica a qué familia
pertenece. Lo necesitamos para identificarlo ya que archivos de diferentes
familias pueden tener el mismo nombre y diferenciarse solo en la extensión
(apellido). Por ejemplo, si queremos poner un enlace a un archivo de
nombre imágenes que hemos creado con bloc de notas y que hemos
guardado como página Web (.html), no es suficiente con escribir:
<A href=”imágenes”>Mis imágenes</A>
Deberemos incluir la extensión (además de no dejarnos loas tildes):
<A href=”imágenes.html”>Mis imágenes</A>

Escribir incorrectamente la extensión (.html) del archivo al grabarlo. Cuando
grabamos por primera vez un documento HTML con bloc de notas, nos
aparece un cuadro de diálogo como el siguiente:
Es importante no dejar espacios entre el nombre del archivo, el punto y la
extensión, sobre todo entre el punto y la extensión (html) ya que de lo
contrario, el explorador ni siquiera reconocerá el documento como una
página Web.

En cuanto a los archivos de imagen es corriente el hecho de confundir las
extensiones (.jpg, .bmp, .gif) de los archivos. Para saber con seguridad la
extensión de un archivo, si visualizamos los archivos con el explorador en
modo mosaico, los archivos .jpg muestran un icono con un barquito en una
puesta de sol, los archivos .bmp muestran un pincel y los archivos .gif
muestran un cuadradito rojo, un circulito azul y un triangulito amarillo, tal y
como en la siguiente figura:

Cuando bajamos una imagen de Internet podemos cometer el error de
escribir nombre y extensión. Esto es un error, ya que la imagen ya tiene su
propio formato y la extensión que le demos no será sino parte del nombre.
Es decir, si queremos bajar una imagen de un paisaje que se llama
pj000103.gif y al guardarla le ponemos escribimos el nombre paisaje.jpg, la
imagen que habremos guardado, incluida la extensión se llamará
paisaje.jpg.gif. Esto nos producirá errores al insertarla en algún documento
HTML. Si queremos cambiar la extensión, hemos de cambiar el formato,
pero eso no está dentro del objetivo de estas notas.
La segunda fuente de error más frecuente a la hora de incluir una imagen o un
enlace, es la ruta de acceso al mismo. Hasta el momento, hemos trabajado
suponiendo que todos los archivos que utilizamos (imágenes, archivos de texto,
etc.) se encontraban localizados en la misma carpeta. ¿Qué ocurre si esto no es
así? Lo normal es que, antes o después, nos aparezcan los citados errores con los
enlaces y las imágenes.
Para asegurarnos que un enlace funciona o que una imagen aparece en nuestra
página Web, hemos de especificar la ruta de acceso al archivo. La ruta de acceso no
es más que la estructura de carpetas (directorios) que hemos de seguir para llegar
hasta el archivo que queremos incluir, ya directamente (imagen) o mediante un
enlace.
Para explicar de forma sencilla cómo funcionan las rutas vamos a suponer que
estamos en la siguiente situación. Hemos creado una carpeta llamada “MisHTML”
dentro de la carpeta “Mis Documentos”. Además, todas las imágenes con las que
vamos a trabajar, están dentro de una carpeta que hemos creado dentro de
“MisHTML” que hemos llamado “fotos”. Vamos a definir ahora que es una carpeta (o
directorio) padre y una carpeta hijo (subdirectorio)

Una carpeta padre es la carpeta que contiene a aquella en la que estamos
trabajando. Así pues, la carpeta “Mis Documentos” es padre de nuestra
carpeta “MisHTML”, al igual que lo es de otras carpetas (“Mis Imágenes”,

“Mis vídeos”, etc.). Del mismo modo, la carpeta “MisHTML” es una carpeta
padre de la carpeta “fotos”.
Una carpeta hijo (o subdirectorio) es una carpeta que está incluida dentro
de aquella con la que estamos trabajando. Así, “fotos” es carpeta hijo de
“MisHTML” que, a su vez, es carpeta hijo de “Mis Documentos”.
Una nota obvia pero importante: una carpeta puede tener muchos hijos
(subcarpetas) pero sólo puede tener un padre.
Bien, veamos ahora como hemos de utilizar las rutas para acceder a los
documentos:

En el caso en que estemos creando una página Web en “MisHTML” y
queramos incluir en ella una imagen que se puede llamar paisaje1.jpg que
se encuentre dentro de la carpeta hijo “fotos”, cambiaremos el valor del
atributo src incluyendo el camino que hemos de seguir hasta llegar a ese
archivo imagen, es decir, en lugar de escribir <IMG src=”paisaje1.jpg”>,
deberemos poner:
<IMG src=”fotos/paisaje1.jpg”>
Si dentro de la carpeta “fotos” hubiésemos creado una carpeta hija llamada
“paisajes”, dentro de la cual se encontrara nuestra imagen, deberíamos
escribir:
<IMG src=”fotos/paisajes/paisaje1.jpg”>
Es decir, escribimos el nombre de las carpetas (separados por la barra “/”)
en las que hay que ir entrando para llegar hasta el archivo imagen.

Para los enlaces ocurre lo mismo. Imaginemos que creamos una carpeta hija
dentro de “MisHTML” llamada “Gastronomía”. Creamos en ella una página
Web llamada paella.html con la receta de la paella. Para establecer un
enlace a este archivo desde otro que se encuentre en “MisHTML”, deberemos
escribir la ruta:
<A href=”Gastronomía/paella.html”>La paella</A>
Si el archivo paella.html lo hemos creado dentro de una carpeta llamade
“arroces” hija de la carpeta “Gastronomía”, para establecer el anterior
enlace desde “MisHTML” deberemos escribir:
<A href=”Gastronomía/arroces/paella.html”>La paella</A>

Cuando queremos establecer un enlace a un archivo que se encuentra en el
la carpeta padre debemos utilizar también la ruta adecuada. Por ejemplo,
imaginemos que queremos insertar una imagen que se encuentra en “Mis
Documentos” y que hemos llamado imagen1.jpg en un archivo que estamos
creando en “MisHTML”. Hemos de indicar al explorador que debe buscar la
imagen en le directorio (carpeta) padre del que nos encontramos. Esto se
realiza mediante el símbolo “..”, es decir, escribiremos:
<IMG src=”../imagen1.jpg”>
Si, en lugar de encontrarse en “Mis Documentos”, el archivo imagen1.jpg se
encuentra en un directorio hijo de “Mis Documentos” distinto a nuestro
directorio de trabajo, hemos de indicárselo a continuación. Por ejemplo, si se
encontrase dentro de “Mis Imágenes”, escribiríamos:
<IMG src=”../Mis Imágenes/imagen1.jpg”>
TERCERA PARTE:
HTML AVANZADO
16- MULTIMEDIA CON HTML
En la actualidad, existen herramientas para desarrollo multimedia de páginas Web
(Flash, etc.) que consiguen resultados verdaderamente profesionales. Si bien los
documentos HTML con características multimedia suelen implementarse con este
tipo de herramientas, resulta interesante y, en cierto modo imprescindible, conocer
cómo se realiza con HTML puro y duro.
Por multimedia entendemos aquellos sistemas de comunicaciones que usan varios
medios combinados para la difusión de la información. Estos medios pueden ser:
hipertexto, imágenes, sonido, música, vídeo, etc.
A continuación veremos los formatos de imagen, audio y vídeo utilizados más
frecuentemente:
Tipo
Imagen
Formato
jpg
gif
bmp
Sonido
midi
wav
Real Audio
au
mp3
Vídeo
avi
mpeg
Quick Times (MOV)
Descripción
Formato con compresión que permite
buenas resoluciones.
Utiliza como máximo 256 colores, idóneo
para dibujos y animaciones.
Imagen de mapa de bits, inconveniente
de tamaño, pero óptimo para fotografía
de alta definición.
Formato de secuencia, dispone de
canales para cada instrumento. Suelen
crearse a partir de un sintetizador o un
instrumento musical electrónico con
salida MIDI
Nativo de los SO Windows
Utilizado por programas como Real
Player, radio y emisiones diversas a
través de Internet.
Nativo de sistemas tipo Unix.
Muy popular y utilizado por programas
como WimAmp; se suele utilizar para
distribuir música por la Red.
Nativo de los SO Windows, también se
conoce como Video for Windows.
Formato estandarizado por la ISO y
empleado en la distribuciópn de películas
en CD, DVD, TV digital ...
También conocido como QT, desarrollado
por Apple para sus ordenadores Mac.
Existen drivers para PC.
REPRODUCCIÓN DE SONIDO
En cuanto a la reproducción de sonidos en un navegador, podemos distinguir dos
casos:
1. Fondos sonoros.
2. Sonidos activados por el usuario.
Hasta ahora, habíamos visto cómo incluir color o imágenes en el fondo de pantalla.
Vamos a ver ahora cómo podemos añadir un fondo musical a tus creaciones que
haga la visita a tu página Web más agradable.
Consejo: No conviene abusar de este recurso. Una página con fondo sonoro puede
resultar cargante, e incluso irritante, si no se pone un poco de cuidado.
Los fondos sonoros son considerados horteras por una buena parte de
los usuarios de la Red. Si vas a utilizar un fondo sonoro en una página
Web, procura que no sea excesivamente largo, ni repetitivo, sino más
bien, como un elemento de entrada, un logotipo sonoro.
El modo de implementar fondos depende del Navegador que estemos utilizando,
aquí lo vamos a ver para el Internet Explorer.
Fondos sonoros en Internet Explorer
Internet Explorer utiliza la etiqueta <BGSOUND> para crear fondos sonoros,
aunque, a partir de la versión 4.0 se reconoce también la etiqueta pareada
<EMBED> ... </EMBED>, que se usa también en otros navegadores (Netscape) y
tiende a convertirse en el estándar.
La sintaxis básica de la etiqueta <BGSOUND> es la siguiente:
<BGSOUND src=”nombredelfichero”>
Donde nombredelfichero es el nombre (incluida la extensión) y la ruta completos
del fichero de sonido a escuchar. El formato del fichero normalmente será MIDI
(.mid), MP3 (.mp3) o WAVEFORM (.wav).
Opcionalmente, la etiqueta <BGSOUND> admite el atributo loop que indica el
número de veces que se desea repetir la pieza musical o el sonido. Puede tener un
valor natural (entero positivo) o el valor infinite que repetirá el sonido mientras
tengamos abierta la página Web.
Fondo sonoro mixto
Existe la posibilidad de combinar los dos tipos de etiquetas de modo que se pueda
escuchar el fondo sonoro tanto si se utiliza Netscape, como si se utiliza Internet
Explorer. Para ello, se puede hacer de la etiqueta pareada <NOEMBED> ...
</NOMEBED>. Por ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplo de fondo sonoro mixto </TITLE>
</HEAD>
<BODY>
<H1> Fondo sonoro para Internet Explorer </H1>
<EMBED src=”Blues.wav” height=60 width=135>
<NOEMBED>
<BGSOUND src=”Blues.wav” loop=infinite>
</NOEMBED>
</BODY>
</HTML>
Si este documento se visualiza con una versión anterior a la 4.0 de Internet
Explorer, las etiquetas <EMBED>, <NOEMBED> y </NOEMBED> serán ignoradas y
el fichero imagine.mp3 se podrá escuchar mediante el uso de <BGSOUND>. Para
una versión posterior a la 4.0, la etiqueta <EMBED> será reconocida y todo aquello
que se encuentre entre las etiquetas <NOEMBED> y </NOEMBED> se pasará por
alto. Curiosamente, Internet Explorer 4.0 o superior mostrará una consola de
sonido, como la de la figura.
Sonidos activados por el usuario
Para que el usuario pueda activar un sonido haciendo clic sobre un enlace,
realizamos un enlace al archivo de sonido de la misma forma que hacíamos los
enlaces a los archivos de imagen o de texto. Por ejemplo:
<HTML>
<HEAD>
<TITLE> Sonido activado por enlace </TITLE>
</HEAD>
<BODY>
<H1> Enlace a archivo de sonido </H1>
<A href=”Imagine.mp3”>Escuchar Imagine</A>
</BODY>
</HTML>
Al hacer clic sobre el enlace se comienza a reproducir el archivo:
MARQUESINAS2
Las marquesinas nos permiten presentar texto en movimiento. Una marquesina no
es otra cosa que una zona de pantalla que contiene texto, y este texto se desplaza
de un lado a otro.
Para definir marquesinas se utiliza la etiqueta pareada <MARQUEE> ....
</MARQUEE>. La sintaxis básica de una marquesina es la siguiente:
<MARQUEE> Texto que se desplaza </MARQUEE>
2
Las Marquesinas funcionan únicamente con Internet Explorer. En Netscape, el texto aparece fijo.
La etiqueta <MARQUEE> admite los siguientes atributos:
Atributo
height, width
align
bgcolor
behavior
direction
loop
scrolldelay
scrollmount
Descripción
Indican el tamaño de la marquesina,
especificando la altura y la anchura en
número de píxeles o bien en porcentaje de
pantalla
Indica la alineación del texto que rodea a la
marquesina.
Modifica el color de fondo de la marquesina.
El color debe especificarse mediante el
código #RRGGBB
Especifica el comportamiento del texto de la
marquesina, es decir, de qué formase va a
desplazar.
Sirve para especificar la dirección de
desplazamiento del texto de la marquesina
Indica el número de veces que el texto se
desplazará de un lado a otro. El valor
predeterminado es infinito
Indica el tiempo que el texto emplea en
desplazarse en cada movimiento, expresado
en milisegundos
Indica el número de píxeles recorridos por el
texto en cada movimiento. Un valor de 20
indicará que el texto de la marquesina se irá
desplazando de 20 en 20 píxeles hasta llegar
al otro extremo de la marquesina.
Valores
Valor numérico o porcentaje
top, bottom, middle
Cualquier valor del código
alternate, scroll, slide
left, right
Valor numérico, infinito
Valor numérico entero
Valor numérico entero
VÍDEO EN INTERNET EXPLORER
La inclusión de vídeo en Internet Explorer puede hacerse de forma sencilla: basta
con utilizar la etiqueta <IMG> que ya conocemos. Lo único que cambia son los
atributos que acompañan a dicha etiqueta. En lugar del atributo src, el atributo
obligatorio ahora será dynsrc. Por ejemplo:
<IMG dynsrc=”FichVideo”>
Además, tenemos otros atributos opcionales:




Loop
Height, Width
Controls: Muestra la consola de vídeo con los controles para parar, pausar,
rebobinar, etc.
Start: Puede adoptar dos valores: fileopen indica que el fichero de video
comenzará a ejecutarse al cargarse la página Web donde se halle.
mouseover indica que el fichero de vídeo se ejecutará cuando el usuario
sitúe el puntero del ratón sobre el cuadro de vídeo.
Por ejemplo:
<HTML>
<HEAD>
<TITLE> Vídeo en HTML </TITLE>
</HEAD>
<BODY>
<img dynsrc="PHTO0023.avi" start=mouseover width=240 height=200>
</BODY>
</HTML>
Cuando cargamos la página Web, obtenemos:
Al pasar el ratón sobre el cuadro de vídeo:
17- MARCOS
Los marcos permiten dividir una página Web en varias páginas, de forma que
cada una puede mostrar una página HTML distinta.
Utilizaremos principalmente los marcos para ver el índice de un documento y desde
él, mediante enlaces, cargar las diferentes secciones de ese índice en la parte
principal de la ventana. Es decir, lo que realmente estamos haciendo es crear, no
una página Web, sino un sitio Web. Un sitio Web es una colección de páginas que
tratan sobre un tema común unidas entre sí mediante enlaces, un índice, etc. En la
actualidad, casi todas las páginas que visitamos en Internet, son sitios Web más
que páginas, ya que esta estructura de sitio Web permite presentar la información
de una forma más ordenada que si ponemos todo en la misma página.
Para crear los marcos, hemos de cambiar completamente la estructura general del
documento HTML. La etiqueta <BODY> ... </BODY> desaparece y es sustituida por
la etiqueta <FRAMESET> ... </FRAMESET>.
La etiqueta <FRAMESET> admite dos atributos. El atributo rows especifica el
número de marcos fila en los que se dividirá la página. El atributo cols especifica el
número de marcos columna. Los valores que pueden tomar son número enteros,
tantos por ciento y el valor “*”, que especifica que el marco sea tan grande como la
ventana. Por ejemplo:
<HTML>
<HEAD>
<TITLE> Marcos en HTML </TITLE>
</HEAD>
<FRAMESET cols="25%,75%">
<FRAME src="win.gif">
<FRAME src="linuxorg.gif">
</FRAMESET>
</HTML>
Como vemos, hemos utilizado, dentro de la etiqueta <FRAMESET>, una nueva
etiqueta denominada <FRAME>. Esta etiqueta nos permite especificar el contenido
de cada uno de los marcos. Admite los siguientes atributos:
Atributo
src
name
marginwidth
marginheight
scrolling
noresize
Descripción
Nombre (y ruta si es necesario) del documento que se
quiere colocar dentro del marco.
Asigna un nombre al marco de forma que pueda ser el
destino de enlaces situados en otros marcos.
Especifica el margen lateral en píxeles.
Especifica el margen superior e inferior en píxeles.
Si un documento es más largo que el marco, aparecen
unas barras de desplazamiento. Este atributo permite
desactivar o automatizar su aparición.
Evita que el tamaño de los marcos sea alterado
Los marcos pueden anidarse, es decir, podemos definir, por ejemplo, unos marcos
fila dentro de un marco columna y viceversa. No obstante, debe tenerse mucho
cuidado con esto ya que puede complicar mucho la estructura de la página y
dificultar su lectura.
Ejemplo:
<HTML>
<HEAD>
<TITLE> Marcos en HTML </TITLE>
</HEAD>
<FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME src="linuxorg.gif">
<FRAME src="linuxorg.gif">
</FRAMESET>
<FRAMESET rows="33%,33%,33%">
<FRAME src="win.gif">
<FRAME src="win.gif">
<FRAME src="win.gif">
</FRAMESET>
</FRAMESET>
</HTML>
En el código anterior, en primer lugar, hemos dividido la página en dos columnas,
cada una de las cuales ocupa el 50% de la misma. A continuación, hemos dividido
la primera de las columnas en dos marcos fila, en cada uno de los cuales hemos
insertado el archivo de imagen linuxorg.gif. La segunda columna, por el contrario,
la hemos dividido en 3 marcos fila, cada uno de los cuales ocupa el 33% de la
página y muestra el archivo de imagen win.gif.
El resultado se muestra en la siguiente figura:
Vamos a ver ahora cómo podemos utilizar los marcos para crear una página en la
que tengamos un índice con el cual podamos cargar diferentes secciones
(diferentes páginas) en un marco principal. Es decir, vamos a crear menús que
actualizan un marco distinto al que se pulsa. Veámoslo con un ejemplo:
En los ejemplos anteriores, los archivos que hemos cargado en los diferente marcos
eran simplemente archivos de imagen que incluíamos dentro de la etiqueta
<FRAME>, mediante el atributo src. Ahora vamos a crear una página con dos
marcos en cada uno de los cuales se cargará una página Web: en la primera, que
ocupará un 25% de la pantalla, aparecerá un menú con enlaces a los diferentes
apartados; en la segunda página aparecerá una página principal y, al hacer clic
sobre los enlaces del menú, las diferentes secciones se cargarán en este segundo
marco.
Por supuesto, para que las páginas se carguen, hay que crearlas previamente. Lo
primero que haremos es crear el archivo indice.html que contiene los enlaces a los
diferentes apartados. Es el siguiente:
<html>
<body bgcolor="#888899" link="#886600" vlink="#90FF00">
<br>
<br>
<br><br>
<b>
<font size=3 face="Chiller" color="#0077CC">
<a href="portada.html" target="principal">PORTADA</a><br><br>
<a href="historia.html" target="principal">HISTORIA</a><br><br>
<a href="museos.html" target="principal">MUSEOS</a><br><br>
<a href="monumentos.html" target="principal">MONUMENTOS Y EDIFICIOS </a><br><br>
<a href="personajes.html" target="principal">PERSONAJES ILUSTRES</a><br><br>
<a href="gastronomia.html" target="principal">GASTRONOMIA</a><br><br>
<a href="fotos.html" target="principal">&Aacute;LBUM DE FOTOS</a><br><br>
</font>
</b>
</body>
</html>
De aquí, todo nos es conocido salvo el atributo target que explicaremos un poco
más adelante. Fijémonos que para cada sección hemos puesto un enlace a un
archivo que contendrá la información referente a ese apartado. Todos estos
archivos (portada.html, historia.html, museos.html, etc.) hemos de crearlos
independientemente. Veamos, por ejemplo, el código del fichero portada.html que
será el que nos sirva de página principal:
<html>
<body bgcolor="#888899" text="white">
<br>
<center><font face="Century Gothic" size=30>BIENVENIDOS A LA WEB DE VALENCIA</font>
<br>
<font face="Informal Roman" size=5>Por: Roberto Medrano San&iacute;a</font><br><br>
<IMG SRC="../imagenes/hemisfericmuseo.jpg" width="60%" alt="ArtesyCiencias"></center>
<br>
<font face="Informal Roman" size=4>
Bienvenidos! En esta p&aacute;gina intentaremos explicar mediante fotos y textos
c&oacute;mo es y c&oacute;mo se vive en nuestra ciudad: su historia, sus monumentos
m&aacute;s importantes, personajes importantes que nacieron o vivieron en ella y mucho
m&aacute;s.... Gracias por su visita!
</body>
</html>
Antes de pasar a la definición de los marcos veamos estas dos páginas por
separado:
Ahora, una vez creados los archivos de todos los apartados, hemos de crear el
fichero que define los marcos, que llamamos marcos.html:
<html>
<head>
<title>Valencia</title>
</head>
<FRAMESET COLS="25%,75%" border=0>
<FRAME SRC="indice.html" scrolling=no noresize>
<FRAME SRC="portada.html" NAME="principal" marginwidth=2 border=0 noresize>
</FRAMESET>
</html>
Si visualizamos el archivo marcos.html obtenemos lo siguiente:
Fijémonos en las novedades del código marcos.html:
Hemos utilizado el atributo border, que ya conocíamos de las tablas, asignándole
el valor 0 para que nuestra página tenga aspecto de continuidad, es decir, que no
se muestren las líneas de separación entre los marcos. Esto da un aspecto más
profesional a nuestra página.
En la etiqueta <FRAME> que inserta el archivo del índice en el primer marco,
hemos incluido los atributos scrolling=no y noresize, para evitar que aparezca la
barra de desplazamiento cuando la ventana del navegador es demasiado pequeña
para ver todo el índice (así obligamos al usuario a mantener un tamaño mínimo de
ventana) e impedir que el tamaño del texto se haga más pequeño al disminuir la
ventana.
En la etiqueta <FRAME> que inserta el archivo de la portada en el segundo marco,
hemos incluido el atributo marginwidth=2 que deja 2 píxeles de margen entre el
límite del marco y el texto, evitando así que este se pueda juntar con el del primer
marco.
Además, en la etiqueta <FRAME> que inserta el archivo de la portada en el
segundo marco, hemos incluido el atributo NAME=”principal”. Es decir, al segundo
marco le hemos puesto un nombre que nos permite identificarlo. Esto es lo que
permite realizar un enlace desde el archivo indice.html que se encuentra en el
primer marco, de forma que podemos cargar cualquiera de los archivos de las
secciones en este segundo marco. Esto lo hacíamos mediante el atributo target. Si
recordamos uno de los enlaces del índice:
<a href="historia.html" target="principal">HISTORIA</a>
podemos observar que tenemos un enlace al apartado de Historia, que se cargará
en el marco llamado principal (el segundo marco) cuando hagamos un clic sobre la
palabra HISTORIA del primer marco.
Veamos la página que aparece al cliquear sobre HISTORIA. Como vemos, en el
segundo marco, aparece el nuevo archivo mientras que el índice se mantiene en el
primero, lo cual nos permite seguir navegando por nuestro sitio Web con
comodidad. La palabra HISTORIA en color distinto nos indica el apartado en que
nos encontramos:
18- IMÁGENES SENSIBLES (MAPAS DE IMÁGENES)
Las imágenes sensibles son imágenes que contienen zonas activas que actúan
como enlaces, es decir, en función de la zona de la imagen en que se pinche, se
activa un enlace a un documento u otro.
Para crear un mapa de imagen, necesitamos una imagen (en el ejemplo que vamos
a utilizar es la imagen mapa_sensible.bmp) sobre la que definiremos un mapa
mediante el uso de la etiqueta pareada <MAP> ... </MAP>. Esta etiqueta,
contiene como único atributo name=”nombre”, donde “nombre” indica el nombre
del mapa que estamos creando.
Cada una de las zonas activas de la imagen se definen entre las etiquetas <MAP> y
</MAP> mediante el uso de la etiqueta sin parear <AREA>, cuyos atributos son:
Atributo
href
alt
shape
coords
Descripción
Especifica el archivo que se cargará al pulsar sobre esa
zona activa.
Asigna un texto descriptivo relacionado con la zona
Especifica la forma que tendra la zona activa, puede ser
circle, rect, o poly
Especifica las coordenadas de la zona. Su formato
depende del valor de shape
Según el valor del atributo shape, las coordenadas del atributo coords, se
especifican como podemos ver en la tabla siguiente:
shape
circle
rect
poly
coords
x, y, R; donde (x, y) son las coordenadas del centro del
círculo y R su radio
x1, y1, x2, y2; (x1, y1) son las coordenadas del vértice
superior izquierdo y (x2, y2) las coordenadas del vértice
inferior derecho.
X1, y1, x2, y2, .... , xn, yn; donde los pares de
coordenadas (x, y) son las coordenadas de los vértices
del polígono. Las coordenadas del último punto (xn, yn)
deben ser las mismas que las del primero (x1, y1) para
cerrar la figura.
Para aclarar todo esto, es mejor verlo con un ejemplo:
<HTML>
<HEAD>
<TITLE> Imágenes Sensibles en HTML </TITLE>
</HEAD>
<BODY>
<MAP NAME="mapa1">
<AREA href="ing.html" ALT="square" SHAPE="rect" COORDS="30,39,128,96">
<AREA href="esp.html" ALT="círculo" SHAPE="circle" COORDS="206,71,42">
<AREA href="fra.html" ALT="triangle" SHAPE="poly" COORDS="138,126,192,203,74,202,138,126">
</MAP>
<CENTER>
<H1> Ejemplo de Enlaces con Mapa Sensible </H1>
<IMG src="mapa_sensible.bmp" usemap="#mapa1" border=0>
</CENTER>
</BODY>
</HTML>
Entre las etiquetas <MAP> y </MAP> es dónde definimos las zonas activas y los
archivos a que se cargarán al activar el enlace, creando el mapa que llamamos
mapa1. Cuando insertamos la imagen, el uso del atributo usemap nos permite
hacer actuar el mapa1 sobre la imagen que estamos insertando.
Veamos el resultado:
En el ejemplo que hemos puesto, la imagen elegida sobre la que actúa el mapa,
mapa_sensible.bmp, es una imagen que hemos creado a partir de las imágenes de
las banderas de las cuales disponíamos previamente (aunque hemos recortado la
imagen de la bandera de España y de Francia).
Podríamos haber creado los enlaces de una forma más sencilla, insertando las
banderas en una tabla como imágenes-enlace, ahorrándonos así la complicación del
mapa sensible:
<HTML>
<HEAD>
<TITLE> Imágenes Sensibles en HTML </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Ejemplo de Enlaces con Tabla </H1>
</CENTER>
<TABLE align=center>
<TR>
<TD><A href="inga.html"><IMG src="bandera_Inglaterra.gif" width=100 ALT="square"></A>
<TD><A href="espa.html"><IMG src="bandera_espana.jpg" width=100 ALT="square"></A>
<TR>
<TD colspan=2 align=center><A href="fraa.html"><IMG src="francia2.gif"width=100 ALT="square">
</A>
</TABLE>
</BODY>
</HTML>
¿Qué sentido tiene entonces utilizar un mapa sensible? La respuesta es que con una
mapa de imagen podemos crear todos los enlaces con una sola imagen, mientras
que si lo realizamos con enlaces-imagen, necesitamos una imagen para cada
enlace, con el consiguiente consumo de memoria. En segundo lugar, con un mapa
de imagen, podemos utilizar cualquier zona de cualquier imagen como zona activa
con la forma que queramos darle. Sólo necesitamos paciencia. Por último, en
algunos casos, no es posible simular el mapa de imagen con una tabla de enlaces.
Esto ocurre cuando las distintas zonas que queremos activar están contenidas en
una imagen global y, además tienen formas geométricas complicadas. Podemos
ilustrar todo esto mediante el siguiente ejemplo3:
<HTML>
<body
bgcolor="#000000"
marginheight="8">
text="#733A1A"
leftmargin="8"
topmargin="8"
marginwidth="8"
<FONT size=4 color=white face="verdana">
Seleccione su idioma, select its language, choisissez sa langue.
</FONT><br><br>
<center>
<MAP name="zona3paises">
<AREA
href="fra.html"
alt="Francia"
shape="polygon"
coords="106,162,103,166,103,176,100,178,91,178,91,183,87,187,80,186,75,181,72,184,75,191,71,19
6,64,197,58,192,57,192,55,193,45,195,46,198,50,200,51,202,54,205,69,214,71,216,72,223,74,224,79
,229,80,236,79,239,77,241,77,247,76,248,76,260,74,270,74,264,78,267,83,270,88,272,95,270,104,27
3,115,275,116,273,116,266,121,263,140,263,147,266,154,259,153,253,152,251,150,244,148,244,148
,241,151,241,151,227,148,226,146,228,143,229,144,224,151,215,151,211,157,211,159,199,159,193,
153,189,150,188,148,188,146,186,144,185,143,184,139,182,139,180,134,180,132,178,127,177,127,1
72,123,170,118,169,114,167,107,163">
<AREA
href="ing.html"
alt="Inglaterra"
shape="polygon"
coords="61,44,55,44,50,46,42,46,40,60,32,64,29,69,35,73,31,77,36,81,31,89,37,87,40,89,36,96,38,9
7,43,94,46,96,43,104,47,108,56,109,59,114,62,116,63,130,58,130,46,130,52,136,52,143,40,151,44,5
3,49,152,55,156,58,156,62,164,65,154,63,159,58,162,50,159,48,165,38,175,43,175,48,172,51,172,54
,173,57,168,64,166,69,169,76,166,87,166,99,159,94,156,104,146,103,139,96,135,92,137,89,165,91,1
30,87,123,88,120,66,89,64,88,59,87,59,84,68,75,73,60,56,60,53,61,54,58,51,56,51,53,55,53,62,45">
<AREA
href="esp.html"
alt="España"
shape="polygon"
coords="73,264,65,264,63,264,56,264,55,265,49,265,47,264,41,261,24,260,27,260,16,262,15,265,49,
265,47,267,8,268,10,176,10,280,15,279,16,282,24,281,28,280,30,281,30,285,32,284,33,287,26,294,2
8,300,26,302,27,305,27,306,26,308,21,308,26,315,23,322,27,326,21,333,23,336,27,335,31,336,37,34
6,39,346,43,343,47,342,55,340,68,339,76,332,80,331,81,326,86,320,85,309,88,305,97,292,106,288,1
17,281,117,274,112,276,107,276,104,274,101,274,99,271,95,270,93,272,87,271,85,270,74,264">
<area shape="default" nohref>
</map>
<CENTER>
<IMG src="mapa.jpg" usemap="#zona3paises">
</CENTER>
</BODY>
</HTML>
3
Este ejemplo, salvo algunas modificaciones para adaptarlo al texto, fue realizado por Javier Ibañez
Cruz, 3º de E.S.O. del curso 2003-2004.
19- FORMULARIOS
En el lenguaje HTML se define un mecanismo que permite un intercambio de
información directo entre el cliente y el servidor, son los conocidos formularios o
FORMS. Mediante estos formularios, el usuario puede introducir información
seleccionando elementos, activando botones, escogiendo elementos de menús o
introduciendo texto en cuadros de diálogo.
Los formularios se crean mediante la etiquetas <FORM> ... </FORM>, siendo
necesario introducir atributos especiales y otros códigos en el cuerpo del formulario.
Los formularios se pueden dividir en dos tipos, según el método de procesamiento
de la información recibida.


Formularios dirigidos a una persona: en este tipo de formularios, la
información es devuelta encapsulada en un mensaje de correo electrónico
que se envía a una dirección personal, normalmente la del creador de la
página Web.
Formularios dirigidos a un servidor: estos formularios se caracterizan
porque la información es retornada a un programa espacial, que se
encuentra en el servidor de procedencia del documento HTML, y que procesa
los datos del formulario. en este caso, el formulario ejecuta un programa o
un script mediante el uso de CGI (Common Gateway Interface), el cual
procesa el formulario y realiza la acción oportuna. Es el tipo de formulario
que encontramos en las páginas de compra/venta electrónica.
Nosotros nos centraremos en el primer tipo de formularios, ya que para el segundo
tipo, es necesaria la creación del programa CGI, lo cual está fuera del objetivo de
este curso.
Los atributos de la etiqueta <FORM> son:



action: especifica la ruta de acceso al programa CGI que debe procesar los
datos que se envían o, si se envían por correo electrónico, se puede indicar
con mailto:dirección de correo.
method: especifica el método que se usa para enviar la información del
formulario al programa CGI. Los métodos pueden ser GET y POST.
enctype: este último atributo suele tomar siempre el valor TEXT/PLAIN, que
indica el tipo de información que se va a recibir. En la mayoría de los casos,
un fichero de texto simple en formato ASCII.
Elementos de un formulario
Un formulario puede constar de uno o varios elementos, tal y como se muestra en
la siguiente tabla:
Elemento
Cuadro de texto
Área de texto
Lista de selección
Descripción
Cuadro con espacio para una línea de texto donde
se pueden escribir cadenas de texto, con o sin
desplazamiento lateral y/o cifrado mediante
asteriscos (*).
Es muy similar a los cuadros de texto, pero para la
inserción de múltiples líneas.
Se presentan diversas opciones en una lista
permitiendo la selección de una o varias de ellas.
Casilla de verificación
Botón de radio
Botón de envío
Botón de borrado
Permite la confirmación, mediante clic con el ratón
sobre ella. Si existe más de una en el formulario,
permite la selección de más de una
simultáneamente. No son mutuamente
excluyentes.
Similar a las casillas de verificación, pero sólo
permite la selección de una de ellas entre todas las
demás. Son mutuamente excluyentes.
Pulsando este botón se envían los datos del
formulario al servidor o a la persona señalada.
Con este botón se puede realizar la limpieza del
formulario, borrando el contenido de cada
elemento, para volver a introducir nuevos datos.
La etiqueta <INPUT> sirve para insertar cuadros de texto, casillas de verificación,
botones de radio, botones de envío y de borrado, mientras que las áreas de texto
se insertan mediante la etiqueta pareada <TEXTAREA> ... </TEXTAREA> y las
listas de selección mediante <SELECT> ... </SELECT>.
La etiqueta <INPUT> puede llevar los siguientes atributos:
Atributo
type
name
value
size
maxlength
checked
src
align
text
password
checkbox
radio
submit
reset
file
hidden
image
Descripción
Selecciona el tipo de campo de entrada. Es obligatorio.
Define el nombre del identificador cuyo contenido será
enviado. Es obligatorio.
Inicializa el valor del campo.
Especifica el tamaño visible del texto.
Especifica el número máximo de caracteres en un campo
de entrada de tipo texto.
Inicializa campos de entrada de tipo checkbox o radio
buttons a su estado.
Especifica el URL para la imagen a usar en el caso de un
botón gráfico de envio de la información.
Especifica el alineamiento , puede ser top, middle, bottom
(por defecto), left o right.
Valor por defecto. Muestra una línea de texto.
Igual que text excepto que los caracteres introducidos son
mostrados como *.
Casilla de verificación con dos estados (marcada o no). Es
obligatorio el uso de VALUE para especificar el nombre de
la variable y el valor que toma esta.
Elementos que operan conjuntamente, sólo puede estar
activado uno de ellos. es obligatorio del uso de VALUE. Se
puede indicar que un valor es por defecto utilizando el
atributo checked de la etiqueta INPUT.
Define un botón que inicializa los datos al programa CGI.
Debe existir siempre uno en cualquier formulario.
Define un botón que envía los datos del formulario al valor
por defecto.
Define un método para poder escoger un fichero cuyo
contenido será enviado como los datos proporcionados por
el formulario.
No son visibles y proporcionan un método de enviar
información sobre el estado, etc., al programa del CGI.
Permite definir un botón gráfico.
Vamos a ver como funcionan estos elementos más claramente utilizando el
siguiente ejemplo:
<HEAD>
<TITLE> Formularios en HTML </TITLE>
</HEAD>
<BODY bgcolor="silver">
<CENTER>
<H1> FICHA DEL ALUMNO </H1>
</CENTER>
<FORM method="post" action="mailto:rmedrano@csvf.net" enctype="TEXT/PLAIN">
Nombre:
<INPUT type="text" name="nombre" size="14" maxlength="25"><BR>
Primer apellido:
<INPUT type="text" name="apellido1" size="14" maxlength="25"><BR>
Segundo apellido:
<INPUT type="text" name="apellido2" size="14" maxlength="25"><BR><BR>
Curso:<BR>
Primero<INPUT type="radio" name="curso" value="primero" CHECKED>
Segundo<INPUT type="radio" name="curso" value="segundo">
Tercero<INPUT type="radio" name="curso" value="tercero">
Cuarto<INPUT type="radio" name="curso" value="cuerto"><BR><BR>
Asignatura preferida:<BR>
<INPUT type="checkbox" name="asignatura"
<INPUT type="checkbox" name="asignatura"
<INPUT type="checkbox" name="asignatura"
<INPUT type="checkbox" name="asignatura"
<INPUT type="checkbox" name="asignatura"
<INPUT type="checkbox" name="asignatura"
<INPUT type="checkbox" name="asignatura"
<INPUT type="checkbox" name="asignatura"
<INPUT type="checkbox" name="asignatura"
<INPUT type="checkbox" name="asignatura"
value="informatica" CHECKED>Informática
value="tecno">Tecnología
value="mate">Matemáticas
value="caste">Castellano<BR>
value="reli">Religión
value="edufis">E. Física
value="natu">Ciencias Naturales
value="valen">Valenciano<BR>
value="ingles">Inglés
value="sociales">Ciencias Sociales<BR><BR>
<CENTER>
<INPUT type="submit" value="Enviar">
<INPUT type="reset" value="Borrar">
</CENTER>
</FORM>
</BODY>
</HTML>
El formulario que hemos creado es el siguiente:
Hemos utilizado casillas de verificación para la selección de la asignatura preferida.
En general, si las opciones son muchas, es preferible utilizar en su lugar las listas
de selección, que se definen mediante la etiqueta <SELECT> ... </SELECT>. Esto
es importante, sobre todo, cuando podemos elegir varias opciones. La etiqueta
<SELECT> tiene los siguientes atributos:



name. define el nombre del identificador cuyo contenido será enviado. Es
obligatorio.
size: define el número de elementos del menú desplegable que serán
visibles al mismo tiempo.
multiple: permite que se seleccionen más de un elemento del menú.
Cada uno de los elementos de la lista de selección son especificados por la etiqueta
pareada <OPTION> ... </OPTION>, que posee dos atributos:


value: valor de la opción que se enviará si es seleccionado.
selected: indica que es el valor seleccionado por defecto. Pueden existir
varios si la opción multiple ha sido seleccionada en el menú.
Veamos el mismo ejemplo de antes utilizando una lista de selección:
<HTML>
<HEAD>
<TITLE> Formularios en HTML </TITLE>
</HEAD>
<BODY bgcolor="silver">
<CENTER>
<H1> FICHA DEL ALUMNO</H1>
</CENTER>
<FORM method="post" action="mailto:rmedrano@csvf.net" enctype="TEXT/PLAIN">
Nombre:
<INPUT type="text" name="nombre" size="14" maxlength="25"><BR>
Primer apellido:
<INPUT type="text" name="apellido1" size="14" maxlength="25"><BR>
Segundo apellido:
<INPUT type="text" name="apellido2" size="14" maxlength="25"><BR><BR>
Curso:<BR>
Primero<INPUT type="radio" name="curso" value="primero" CHECKED>
Segundo<INPUT type="radio" name="curso" value="segundo">
Tercero<INPUT type="radio" name="curso" value="tercero">
Cuarto<INPUT type="radio" name="curso" value="cuerto"><BR><BR>
Asignatura preferida:<BR>
<SELECT NAME="asignatura" SIZE="1">
<OPTION value="informatica">Informática</OPTION>
<OPTION value="tecno">Tecnología</OPTION>
<OPTION value="mate">Matemáticas</OPTION>
<OPTION value="caste">Castellano</OPTION>
<OPTION value="reli">Religión</OPTION>
<OPTION value="edufis">E. Física</OPTION>
<OPTION value="natu">Ciencias Naturales</OPTION>
<OPTION value="valen">Valenciano</OPTION>
<OPTION value="ingles">Inglés</OPTION>
<OPTION value="sociales">Ciencias Sociales</OPTION>
</SELECT>
<BR><BR>
<CENTER>
<INPUT type="submit" value="Enviar">
<INPUT type="reset" value="Borrar">
</CENTER>
</FORM>
</BODY>
</HTML>
Si queremos permitir que se seleccionen varias opciones, hemos de utilizar el
atributo multiple de la etiqueta <SELECT>, es decir, si en el código anterior
cambiamos la línea que contiene esta etiqueta por
<SELECT NAME="asignatura" SIZE="6" MULTIPLE>
obtenemos una lista de selección múltiple como la siguiente:
En Internet Explorer, para seleccionar las diferentes opciones, hemos de mantener
la tecla CONTROL presionada y pinchar en cada una de las opciones deseadas.
Por último vamos a ver las áreas de texto, que es similar a un cuadro de texto pero
con la posibilidad de escribir más de una línea.
Las áreas de texto se definen utilizando la etiqueta pareada <TEXTAREA> ...
</TEXTAREA>. Los atributos que usa esta etiqueta son distintos a los del resto de
los elementos del formulario. Lo mejor es verlo con un ejemplo: añadimos el
siguiente trozo de código al formulario anterior, después de la lista de selección:
Comentarios:
<TEXTAREA name="comenta" rows="5" cols="30">
</TEXTAREA>
<BR><BR>
Información recibida de un formulario
Todavía no sabemos cómo se muestra la información cuando el usuario pulsa el
botón de envío y lo recibimos en nuestra cuenta de correo electrónico, como si se
tratase de un mensaje más.
Presentación de formularios
Los formularios que hemos ido creando hasta ahora son más o menos complejos,
pero carecen de una presentación “profesional”. La mejor forma de presentar al
usuario un formulario de modo que tenga un aspecto más elaborado es mediante la
utilización de tablas. Este aspecto lo trataremos más adelante, pero veamos ahora
un ejemplo:
20- DHTML
Esta sección abandona lo que es propiamente el lenguaje HTML para ocuparse de
una variante del mismo denominada DHTML (Dynamic Hypertext Markup
Language). Existen textos completamente dedicados a esta variante del HTML así
que no es posible entrar con detalle en las características del mismo en unas pocas
páginas, de modo que sólo veremos los aspectos más generales para hacernos una
idea de qué se trata y poder realizar algunas acciones con el mismo.
21- TRUCOS Y COMENTARIOS
El principal consejo que se puede dar a un creador de páginas Web es que pase
muchas horas navegando por Internet. Hay miles de millones de páginas Web en
las que los autores combinan y recombinan las etiquetas de HTML para crear
diferentes estilos, efectos, aspectos, etc. Lo mejor que puede hacer alguien que
pretenda convertirse en un diseñador experto es visitar las páginas más
relacionadas con los temas que le interesen y consultar los códigos (cuando son
públicos) para ir aprendiendo los diferentes trucos que darán un aspecto más
profesional a sus creaciones.
Para ir abriendo boca, vamos a incluir a continuación una serie de trucos generales
que nos permitan modificar el aspecto de nuestras páginas:
Columnas
En ocasiones nos interesará disponer el texto y las imágenes de nuestra página
Web en forma de columnas, ya sea por el tipo de documento que estamos creando
(revista, periódico electrónico) o, simplemente, por una cuestión de estilo.
Aunque Netscape admite actualmente la etiqueta <MULTICOL>, si queremos que
nuestro página se vea igual en otros navegadores debemos emplear otra forma de
crear las columnas.
La forma más sencilla de crear columnas es mediante el uso de tablas con una fila y
varias columnas.
Encabezamientos laterales
Formularios con tablas anidadas
Inclusión de guías
Enlaces y ventanas
Imágenes transparentes (¿?)
22- ALGNUOS TRUCOS JAVASCRIPT
Alertas (Pop up windows)
Redireccionamiento automático
Scroll automático
Botones Interactivos
Efectos de ratón
Descargar

el_lenguage_html

Creación de páginas web

Creación de páginas web

InformáticaLenguajes de ProgramaciónComputaciónHipervínculosDiseñoInternetLinksHTML (Hypertext Markup Language)Híperenlaces

Conceptos de mercadotecnia

Conceptos de mercadotecnia

ProductoPrecioMarketingEnvaseMarcaEtiquetaCiclo de vida

PRIMERA CLASE HTML

PRIMERA CLASE HTML

FormulariosTablasFramesHojas de Estilo

Etiquete en la oficina

Etiquete en la oficina

EducaciónNormasVestimentaComportamiento