IMPRIMIR El Lenguage HTML

Tema N1
Diseo de pginas web (HTML)

Toda la internet est compuesta por pginas web, entonces para crear y disear una pgina web debemos aprender
el lenguaje HTML.
Para ello Utilizaremos Las siguientes herramientas:
Un editor de texto, por ejemplo BLOCK DE NOTAS que esta instalada por defecto en Windows, existen otros
editores como NOTE PAD, SUBLIME TEXT.
Un navegador de internet, por ejemplo el clsico INTERNET EXPLORER que tambin est instalada por
defecto en Windows, existen otros navegadores como MOZILLA FIREFOX,GOOGLE CHROME, OPERA, etc.
1. Qu es HTML?
HTML es el acrnimo de HyperText Markup Language (Lenguaje de Marcado de
Hipertexto) y es el lenguaje que se utiliza para crear las pginas web. Este Lenguaje
utiliza cdigos llamados etiquetas.
ETIQUETAS
HTML est compuesto por un conjunto de instrucciones o comandos conocidos con el
nombre de etiquetas, las cuales tiene la funcin de mostrar dentro de un navegador de
Internet todos aquellos elementos que conforman la pgina web, los cuales son textos,
imagen, videos, animaciones, sonidos, etc.
Las etiquetas de HTML pueden ser de dos tipos, cerradas o abiertas.

Las etiquetas cerradas son aquellas que tienen una palabra clave que indica el principio de la orden y otra que
indica el final. Entre la etiqueta inicial y la final se pueden encontrar otras etiquetas.
Las etiquetas cerradas estn compuestas de la siguiente forma:
<NOMBRE_ETIQUETA>.Aqu va el contenido....</NOMBRE_ETIQUETA>
Etiqueta de apertura
Etiqueta de cierre
Las etiquetas cerradas incluyen el carcter / antes de la palabra clave para indicar el final de la misma. Ejemplo de
etiquetas cerradas:
<CENTER> Una pgina ejemplo </CENTER>
Entre la etiqueta inicial y la final se pueden encontrar otras etiquetas.
Las etiquetas abiertas constan de una sola palabra clave. Ejemplo de etiquetas abiertas:
<HR>
Una etiqueta puede contener en su interior "atributos". Estos atributos se indican a continuacin de la palabra clave
de la etiqueta. Ejemplo de etiqueta con atributos:
<BODY bgcolor="#FF00FF"> </BODY>
2. ESTRUCTURA DE UN DOCUMENTO HTML

Un documento de HTML es un archivo de texto (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 informacin que contiene.
Para que un navegador reconozca que un fichero contiene informacin HTML se le debe dar un nombre que termine
con la extensin .html o .htm.
Consta de dos partes, la cabecera y el cuerpo del documento y su estructura general es la siguiente:
Toda la informacin va entre las etiquetas <HTML> de inicio y </HTML> de final. La cabecera se encuentra entre las
etiquetas <HEAD> y </HEAD>, mientras que el cuerpo del documento va comprendido entre <BODY> y </BODY>.
-
LA CABECERA
En el encabezado del documento se puede incluir muchas cosas, pero nosotros slo vamos a ver el ttulo de la
pgina. Cuando hablamos de ttulo de la pgina nos referimos al que aparece en la barra azul del explorador (barra
de ttulo). Es muy importante no confundir este ttulo con los ttulos que pongamos en los textos que escribamos en
nuestra pgina.
Existen dos partes fundamentales la cabecera del documento que son:
<HEAD> </HEAD>
<TITLE> </TITLE>
-
CUERPO DEL DOCUMENTO HTML
Toda la informacin que queremos que aparezca en la pgina 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
<HTML>
color de los enlaces, los enlaces
<HEAD>
visitados y los enlaces marcados.
<TITLE> Mi primera Web </TITLE>
Ejemplo 1: Crearemos una pgina Web
</HEAD>
Primero: En el Bloc de notas escriba el
siguiente cdigo.
<BODY BGCOLOR=YELLOW>
Aqu va el texto que queremos poner.
</BODY>
</HTML>
Segundo: Crea una carpeta donde guardaras la pgina web.

Tercero: Retorna la block de notas y procede a guardar con el nombre Ejemplo1.html
Cuarto: Procedemos a probar la pgina web, abriendo la misma con cualquier navegador de internet en este caso
internet Explorer.
El resultado se muestra a continuacin:
3. TEXTO EN HTML
Para insertar texto en un pgina web, HTML tiene varias etiquetas para cada tipo de texto ya sea ttulos, prrafos,
frases, etc.
TTULOS-ENCABEZADOS
Cuando hablamos de ttulos en HTML nos referimos a los encabezados del documento y las secciones que contiene.
Tambin podemos crear diferentes tamaos de encabezados, ttulos o subttulos por ejemplo para sealar los
distintos encabezados tenemos las siguientes etiquetas:
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
Ejemplo:
Este es el resultado:
Es muy importante cerrar las etiquetas de ttulo.

Guarde el ejemplo de encabezados o ttulos con el nombre de Ejemplo2.html
PRRAFOS
Cuando llegamos al final de la lnea de texto, ste saltar automticamente a la lnea siguiente, pero si queremos
crear prrafos separados por una lnea en
<HTML>
blanco utilizaremos la etiqueta:
<HEAD>
<TITLE> Prrafos</TITLE>
</HEAD>
<BODY>
<P>Esto es un prrafo dentro de una pgina Web.</P>
<P> Esto es otro prrafo que est separado del anterior
por una lnea en blanco.</P>
</BODY>
</HTML>
<P></P>
Por ejemplo, el documento:
Verifique el resultado guardando con el nombre de

Ejemplo3.html y abriendo con un navegador de internet.
ALINEACION DE CONTENIDOS.-
Para alinear un prrafo o ttulo hay que especificar

el atributo ALIGN de la siguiente manera:
<H1 ALIGN=Valores>.....</H1>
<P ALIGN=Valores>..</P>
Los posibles valores para el atributo ALIGN son:
LEFT / RIGHT / CENTER / JUSTIFY
<HTML>
<HEAD>
<TITLE> Parrafos</TITLE>
</HEAD>
<BODY >
<h1 align="right">Este un titulo en lado derecho</h1>
<center><h2>Este un subtitulo en el centro</h2></center>
<center><p>Este parrafo esta en el centro.</p></center>
<p align="LEFT">Este parrafo esta en la izquierda.</p>
<p align="center">Este parrafo esta en el centro.</p>
<p align="right">Este parrafo esta en el derecha.</p>
<p align="justify">Este parrafo esta justificado.</p>
</BODY>
</HTML>
Tambin se puede utilizar la etiqueta <CENTER>

para centrar un ttulo, subtitulo, prrafo o
cualquier contenido.
<center><h2>Este un subtitulo en el centro</h2></center>
<center><p>Este parrafo esta en el centro.</p></center>
Guarde el ejemplo de la derecha con el nombre de Ejemplo4.html
SALTO DE LINEA Y SEPARADOR HORIZONTAL

Para conseguir que las lneas de texto no sean continuas, utilizaremos la etiqueta <BR>.
Como tambin podemos insertar un separador horizontal para separar entre ttulos, subttulos y prrafos <HR>.
Las etiquetas <BR> Y<HR> se las considera etiquetas abiertas
Por ejemplo:
Este sera el resultado
<HTML>
<HEAD>
<TITLE>SALTOS DE LINEA-SEPARADOR</TITLE>
</HEAD>
<BODY >
<BR>
<BR>
<h1>Curso HTML</h1>
<HR>
<BR>
<BR>
<BR>
<h2>Curso PHP</h2>
<HR>
<BR>
<BR>
<BR>
<p>Inscribete ya......! </p>
</BODY>
</HTML>
Guarde
el
ejemplo de arriba con el nombre de Ejemplo5.html

4. FORMATO DE TEXTO
Se puede aplicar los siguientes formatos al texto:
<B> TEXTO EN NEGRITAS </B>
<I> TEXTO EN CURSIVAS </I>
<U> TEXTO SUBRAYADO </U>
<BIG> TEXTO GRANDE </BIG>
<SMALL> TEXTO PEQUEO </SMALL>
<SUP> TEXTO EN SUPERINDICE </SUP>
<SUB> TEXTO EN SUBINDICE </SUB>
Por ejemplo:
Resultado:
Complete
las
etiquetas
faltantes
y Guarde
el
ejemplo
de arriba
con
el
nombre
de
Ejemplo6.html
TIPO DE FUENTE
<FONT></FONT>
Esta etiqueta admite varios atributos: tamao de fuente, tipo de fuente aadiremos a esta etiqueta el atributo
size=Nmero del tamao de la letra.
Los tamaos de letras van, de menor a mayor, del 1 al 7. Si dentro del cuerpo del documento escribimos lo siguiente:
<FONT SIZE=5>Tamao 5</FONT>
El tamao por defecto es el 3 y podemos cambiar el texto con respecto a este tamao base utilizando -1 para un
tamao algo menor, +1 para un tamao algo mayor que el 3 y +2 para un tamao an mayor.
<FONT>el tamao base </FONT>
<FONT SIZE=-1>menor</FONT>
<FONT SIZE=+1>mayor</FONT>
<FONT SIZE=+2>grande 5</FONT>
Ejemplo:
Complete las etiquetas faltantes y Guarde el ejemplo

con el nombre de Ejemplo7.html
Resultado:
dearriba

TIPOGRAFIA-ATRIBUTO FACE
Define el tipo de letra con el atributo FACE agregada a la etiqueta FONT. Por ejemplo:
<font face="Comic Sans MS,arial,verdana">Este texto tiene otra tipografa</font>
Verifique el resultado guardando

nombre de Ejemplo8.html
5. LISTAS CON VIETAS
LISTAS-DESORDENADAS
Para poner una lista con vietas se utilizarn las siguientes etiquetas:
Ejemplo:
<UL>
<LI>
<LI>
<LI>
</UL>
Resultado:
Pruebe el ejemplo guardando con el nombre de Ejemplo9.html
LISTAS-ORDENADAS O ENUMERADAS
Son como las vietas pero estn numeradas. Se usa la etiqueta:
<OL>
</OL>
Ejemplo:
Pruebe el ejemplo guardando con el nombre de

Ejemplo10.html
Hay varios tipos de numeracin para lo cual se utiliza el atributo TYPE:
Resultado:
con
el
Ejemplo:
Resultado:
Pruebe el ejemplo guardando con
el nombre de Ejemplo11.html
LISTAS ANIDADAS
Son vietas de varios niveles que pueden combinar diferentes tipos de vietas.
Ejemplo:
Resultado:

Ejemplo12.html
6. INSERCIN DE IMGENES
Para insertar imgenes en una pgina web se usa la etiqueta.
<IMG>
Los atributos posibles para esta etiqueta son:
SRC
ALT
WIDTH
HEIGHT
BORDER
ALIGN
VSPACE, HSPACE
Para insertar una imagen en una pgina usamos la etiqueta img junto con el atributo src.
<img src=poster.jpg />
<img src = imgenes/poster.jpg />
Ejemplo:
Resultado:
<HTML>
<HEAD>
<TITLE>CURSO HTML: IMAGENES</TITLE>
</HEAD>
<BODY >
<H1 align="center">Imagenes en la
pagina web</H1>
<p>Insertar imagenes en una pagina
web es sencillo</p>
<img src="imagenes/poster.jpg">
<p>solo tenemos que usar la
etiqueta IMG</p>
</BODY>
</HTML>

Ejemplo13.html
REDUCIR AMPLIAR Y A LINEAR IMAGENES

Para reducir y ampliar una imagen se utiliza los atributos width y height; para a linear se utiliza los atributos:
ALIGN
<HTML>
<HEAD>
<TITLE> Imgenes en HTML </TITLE>
</HEAD>
<BODY >
<CENTER><H1>Ttulo del Documento</H1><H2>(subttulo)</H2></CENTER>
<HR>
<FONT size=5><P><IMG src=cortado.jpg align=right width=30%>
Este prrafo rodea a la foto del cortado que se alinea a la derecha con respecto al texto.
El tamao de la imagen ha sido reducido a una anchura del 30% de la pantalla para que no sea
excesivamente grande.
<p>He aumentado el tamao de la letra del documento para no tener que estar inventndome
tonteras a la hora de escribir. Cuando el texto sobre pasa la imagen, vuelve a ocupar toda
la pantalla del navegador.
</FONT>
</BODY>
</HTML>
Para alinear una imagen en el lado derecho dentro de una pgina web se usa el valor RIGHT en el atributo ALIGN
EJEMPLO:
<IMG SRC=imagen.jpg
ALIGN=right>
Y a la vez si tuviramos texto, este rodea la imagen
.
De igual manera para alinear hacia la izquierda usamos el valor LEFT en el atributo ALIGN.
EJEMPLO:
<IMG SRC=imagen.jpg
ALIGN=left>
TAMAO DE IMAGEN:
Para modificar el tamao de la imagen que insertemos en la pgina web usamos el
atributo WIDTH que es el ancho de la imagen y HEIGHT es el alto de la imagen,
dando valores numricos en unidad de medida llamada pixeles (px).
EJEMPLO:
<IMG src="imagen.jpg"
align="right" width=200px height=400px>
En este ejemplo modificamos el tamao de la imagen, dando un ancho de 200 pixeles y

una altura de 400 pixeles.
Esta es la forma esttica, porque si reducimos el tamao de la ventana del navegador la
imagen se mantiene en su tamao asignado. Pero existe la forma dinmica, es decir si
reducimos la ventana del navegador, tambin la imagen se reduce, esto se realiza dando
valor en porcentaje en el atributo WIDTH.
EJEMPLO:
<IMG src=cortado.jpg align=right width=30%>
En este ejemplo la imagen tomara el tamao de 30 % de La ventana del navegador.
MARGENES DE LA IMAGEN:
<HTML>
<HEAD>
<TITLE> Imgenes en HTML </TITLE>
</HEAD>
<BODY >
<CENTER>
<H1>Ttulo del Documento</H1>
<H2> (subttulo)</H2>
</CENTER>
<HR>
<FONT size=5>
<P><IMG src=cortado.jpg align=right width=30%>
Este prrafo rodea a la foto del cortado que se alinea a la derecha con respecto al texto. El tamao de la imagen ha
sido reducido a una anchura del 30% de la pantalla para que no sea excesivamente grande.
<p>He aumentado el tamao de la letra del documento para no tener que estar inventndome tonteras 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- CARCTERES ESPECIALES

Para terminar esta primera parte vamos a ocuparnos de cmo introducir algunos smbolos en HTML. Estos smbolos
son caracteres especiales que se introducen por medio de un cdigo. Los ms utilizados son los siguientes:
Carcter
<
Cdigo
<
"
ó
Ñ
Carcter
>
Cdigo
>
á
ú
®
Carcter
&
Cdigo
&
é
Á
©
Carcter
#
Espacio
Cdigo
#
í
ñ

SEGUNDA PARTE:
11- LISTAS
Las listas o listados nos sirven para enumerar opciones, crear ndices o mens, presentar apartados de un
documento, etc.
En HTML existen 4 tipos de listas: listas desordenadas, listas ordenadas, mens 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 prrafo 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 nmero 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 numeracin 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 especfico de
otro. Adems, los enlaces no tienen que ser slo a documentos de texto, pueden relacionar tambin ficheros de
imagen, sonido, vdeo.
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 direccin de correo electrnico. Un enlace al e-mail
tiene la siguiente estructura:
<ADDRESS><A href=mailto:direccin 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 pgina o direccin de la World Wide Web son ms sencillos. En este caso no utilizamos la
etiqueta <ADDRESS> ..... </ADDRESS>, sino que escribimos la direccin 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
pgina como elemento interactivo para pinchar y que nos lleve al enlace. Veremos ms adelante que podemos
utilizar tambin imgenes.
Los enlaces a una seccin del documento implican el uso de, al menos, dos etiquetas de enlace. Necesitamos
una etiqueta para dar nombre a la seccin y otra para enlazar con la seccin.
Por ejemplo, veamos este documento llamado museos de cordoba.html 1:
1 Este documento es parte de un trabajo realizado por Ana Mara Campos Fernandez de 1 de E.S.O. del curso
2003-2004.
En el documento, a cada seccin se le ha puesto un nombre, justo delante del ttulo de la seccin:
<a name="bellasartes"></a>
EL MUSEO DE BELLAS ARTES
<P>Situado en la bellsima plaza del Potro, el Museo de ....
En la parte de arriba se escriben los enlaces a cada una de las secciones:
<a
<a
<a
<a
<a
href="#bellasartes">Museo Bellas Artes</a><br>

href="#naranjasylimones">Museo Naranjas y Limones</a><br>
href="#alcazardelosreyescristianos">Museo Alczar de los Reyes Cristianos</a><br>
href="#torrefortalezadelacalaorra">Museo Torre Fortaleza de la Calahorra</a><br>
href="#madinat">Museo de Maninat Al-zahra</a><br>
Vemos que el enlace tiene la misma estructura que un enlace a Web pero la direccin que escribimos en el atributo
href es el nombre de la seccin precedido del smbolo #, que indica que la direccin se refiere a un parte del
documento en el que estamos trabajando.
Para crear un enlace a una seccin de otro documento procedemos de forma similar. Imaginemos que desde el
documento llamado Inicio.html queremos ir a la seccin 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 crebamos antes para hacer referencia a
una seccin 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 ms adelante) museos de
cordoba.html delante del smbolo #. Es decir, en el documento Inicio.html escribimos algo as:
<HTML>
<HEAD>
<TITLE> Enlace a seccin de otro documento</TITLE>
</HEAD>
<BODY >
Vamos a ver la seccin de museos de Crdoba 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 slo para organizar el texto en filas y en columnas, si no que
tambin nos va a permitir insertar imgenes 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 bsicos, 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 tambin un
tipo de columna especial, la de encabezado (le de los ttulos de las columnas) que se puede especificar con la
etiqueta opcional <TH> ..... </TH>, que produce un formato especial.
Adems, se le puede poner un ttulo o comentario de tabla mediante la etiqueta pareada <CAPTION> .....
</CAPTION>. Esta etiqueta slo 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>Alimentacin</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 ningn 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 segn el grosor que
queramos.
Por ejemplo, la tabla anterior con borde, sera igual pero la etiqueta <TABLE> quedara:
<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
<TABLE>
Atributo
border
cellpadding
cellspacing
width
align
<CAPTION>
align
<TR>
align
valign
<TD> y <TH>
align
valign
Funcin
Fijar ancho del borde de la tabla
Fija la distancia (en pxeles) entre
el borde de la celda y su contenido
Fija la anchura (en pxeles) de las
lneas de divisin de la tabla
Controla la anchura horizontal de
la tabla, en pxeles o en porcentaje
de pantalla
Controla la alineacin de la tabla
con respecto a otros elementos de
la pgina
Fija la posicin del ttulo con
respecto de la tabla
Alineacin horizontal del texto en
la fila
Alineacin vertical del texto en la
fila
Alineacin horizontal del texto en
la columna
Alineacin vertical del texto en la
columna
colspan
Indica el nmero de columnas que

ocupar esta celda
rowspan
Indica el nmero de filas que

ocupar esta celda
nowrap
Obliga al explorador a no romper

las lneas de texto que contenga la
celda
width
Determina el ancho de la celda, en

pxeles 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 nmero
total de columnas
cualquier valor
positivo mayor
que 2 y menor
que el nmero
total de filas
cualquier valor
positivo (con % si
indicamos
porcentaje)
Adems, las etiquetas <TABLE>, <TR> y <TD> admiten el atributo bgcolor, que permite cambiar el fondo de la
tabla, columna, fila, etc., segn 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 alineacin de tabla y de texto.
<HTML>
<HEAD>
</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>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>
</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>
<TH>Mes</TH>
<TH>Transporte</TH>
</TR>
<TR align=right>
<TD>250</TD>
<TD>120</TD>
<TD>200</TD>
</TR>
<TR align=right>
<TD>230</TD>
<TD>135</TD>
<TD>190</TD>
</TR>
</TABLE>
<p>En cuanto escribamos detrs de la tabla.
<P>Si nos fijamos, el cambio de tamao del texto no ha afectado al texto dentro de la tablas, si no, slamente, al
texto de fuera.</font>
</BODY>
</HTML>
3-
Por ltimo, vamos a ver cmo cambiar el texto en una tabla y hacer que una columna (fila) ocupe el espacio
de varias:
<HTML>
<HEAD>
</HEAD>
<BODY >
<TABLE border=2 bgcolor=cyan align=left cellpdding=8>
<CAPTION align=bottom>Gastos Mensuales</CAPTION>
<TH><font size=4 face="verdana">Mes</TH>
<TH>Transporte</TH>
</TR>
<TR align=right>
<TD>250</TD>
<TD colspan=2>320</TD>
</TR>
<TR align=right>
<TD>230</TD>
<TD>135</TD>
<TD>190</TD>
</TR>
</TABLE>
</BODY>
</HTML>
14- COMBINACIN DE ELEMENTOS

Hemos aprendido ya mucha cosas sobre HTML: estructura y formato del texto, enlaces, imgenes, listas, tablas, etc.
Por el momento cada cosa la hemos visto por separado. Sin embargo, lo interesante de HTML es la combinacin de
todos los elementos para producir documentos ms vistosos e interesantes.
Para combinar elementos es necesario insertar unas etiquetas dentro del campo de accin de otra, es decir, entre las
etiquetas de inicio y final de la primera. Estudiaremos con ms detenimiento este concepto de anidamiento de
etiquetas.
En este apartado veremos slo algunos ejemplos, pero que ilustrarn las posibilidades que existen y que podemos
explotar con un poquito de imaginacin.
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 pgina que queremos visitar o simplemente que nos presente un listado de enlaces a pginas 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 pginas de Internet encontramos imgenes que hacen la funcin de enlace, bien a la misma foto pero
ms grande, bien a cualquier otra pgina. Veamos un ejemplo:
El documento que contiene el enlace sera:
<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>
Fijmonos 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 cdigo 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 tamao de la imagen en pxeles para evitar que cambie de tamao al hacer la ventana ms grande.
Podramos haber hecho un enlace directo a la imagen, pero esto nos impedira controlar el tamao y la alineacin de
la imagen. Es decir, si en el primer documento cambiamos la lnea 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 pgina Web en la que queremos mostrar fotos, es habitual hacerlo en forma de tabla para conseguir una
mejor organizacin y un aspecto ms elegante. Existen muchos programas que realizan automticamente la tarea
con indicar simplemente el nmero de filas y columnas y el tamao de la tabla (Dreamweber, Frontpage, PhotoBase,
etc.) pero todos ellos esconden un cdigo HTML como el que nosotros vamos a ver ahora:
Vamos a crear una tabla con cuatro fotos con el siguiente cdigo:
<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
<TD><IMG
</TR>
<TR>
<TD><IMG
<TD><IMG
</TR>
</TABLE>
src="doscafes.jpg" width=100></TD>
src="cafe.jpg" width=100></TD>
src="movil.jpg" width=100></TD>
src="orejas.jpg" width=100></TD>
</BODY>
</HTML>
Hemos fijado la anchura de las imgenes en pxeles, para evitar que cambien de tamao al variar el tamao 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
ms alta. Para evitar esto tenemos dos soluciones:
Reordenar manualmente las imgenes, es decir, cambiar el cdigo anterior de forma que las fotos con el mismo
formato estn en la misma fila:
Podemos fijar tambin la altura de las imgenes, 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 mtodo.
En el caso que se tenga que preparar una tabla para fotos que van a venir despus, es mejor el segundo mtodo, ya
que, como veremos en el siguiente apartado, podemos utilizar la tabla para poner pequeas fotos-enlace que nos
lleven a la imagen ms grande. En este caso no importa un poco de deformacin.
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 mximo dos formatos, uno horizontal y otro vertical, a la hora de sacar las fotos. Esto nos
simplifica mucho el trabajo despus.
4. Tabla de fotos con enlace.

Veamos como podemos convertir la tabla anterior en una tabla de pequeas fotos-enlace 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
contendrn las imgenes, llevarn el mismo nombre que la imagen que contienen salvo por la extensin .html en
lugar de .jpg.
El cdigo 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 cdigo de uno de los archivos que contienen las imgenes (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 pginas con el explorador, es posible que las imgenes que hemos insertado
no se nos muestren y, en su lugar, aparece un cuadradito con una cruz como el de la figura:
Tambin es posible que los enlaces no funcionen correctamente, es decir, que cuando los pinchemos no aparezca la
pgina 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 extensin del archivo. En Windows, todos los ficheros tienen una extensin (los de Word son .doc,
los de bloc de notes .tex o .html, etc.). La extensin 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 extensin (apellido). Por ejemplo, si queremos poner un enlace a un archivo
de nombre imgenes que hemos creado con bloc de notas y que hemos guardado como pgina Web (.html),
no es suficiente con escribir:
<A href=imgenes>Mis imgenes</A>
Deberemos incluir la extensin (adems de no dejarnos loas tildes):
<A href=imgenes.html>Mis imgenes</A>
Escribir incorrectamente la extensin (.html) del archivo al grabarlo. Cuando grabamos por primera vez un
documento HTML con bloc de notas, nos aparece un cuadro de dilogo como el siguiente:
Es importante no dejar espacios entre el nombre del archivo, el punto y la extensin, sobre todo entre el
punto y la extensin (html) ya que de lo contrario, el explorador ni siquiera reconocer el documento como
una pgina 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 extensin 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 extensin. Esto es
un error, ya que la imagen ya tiene su propio formato y la extensin 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 extensin se
llamar paisaje.jpg.gif. Esto nos producir errores al insertarla en algn documento HTML. Si queremos
cambiar la extensin, hemos de cambiar el formato, pero eso no est dentro del objetivo de estas notas.
La segunda fuente de error ms 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 (imgenes, archivos
de texto, etc.) se encontraban localizados en la misma carpeta. Qu ocurre si esto no es as? Lo normal es que,
antes o despus, nos aparezcan los citados errores con los enlaces y las imgenes.
Para asegurarnos que un enlace funciona o que una imagen aparece en nuestra pgina Web, hemos de especificar la
ruta de acceso al archivo. La ruta de acceso no es ms 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 cmo funcionan las rutas vamos a suponer que estamos en la siguiente situacin.
Hemos creado una carpeta llamada MisHTML dentro de la carpeta Mis Documentos. Adems, todas las imgenes
con las que vamos a trabajar, estn 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
Imgenes, Mis vdeos, 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 slo 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 pgina 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 hubisemos creado una carpeta hija llamada paisajes, dentro de la cual se
encontrara nuestra imagen, deberamos 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
Gastronoma. Creamos en ella una pgina 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=Gastronoma/paella.html>La paella</A>
Si el archivo paella.html lo hemos creado dentro de una carpeta llamade arroces hija de la carpeta
Gastronoma, para establecer el anterior enlace desde MisHTML deberemos escribir:
<A href=Gastronoma/arroces/paella.html>La paella</A>
Cuando queremos establecer un enlace a un archivo que se encuentra en el la carpeta padre debemos
utilizar tambin 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 smbolo .., 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 indicrselo a continuacin. Por
ejemplo, si se encontrase dentro de Mis Imgenes, escribiramos:
<IMG src=../Mis Imgenes/imagen1.jpg>
TERCERA PARTE:
HTML AVANZADO
16- MULTIMEDIA CON HTML

En la actualidad, existen herramientas para desarrollo multimedia de pginas Web (Flash, etc.) que consiguen
resultados verdaderamente profesionales. Si bien los documentos HTML con caractersticas multimedia suelen
implementarse con este tipo de herramientas, resulta interesante y, en cierto modo imprescindible, conocer cmo se
realiza con HTML puro y duro.
Por multimedia entendemos aquellos sistemas de comunicaciones que usan varios medios combinados para la
difusin de la informacin. Estos medios pueden ser: hipertexto, imgenes, sonido, msica, vdeo, etc.
A continuacin veremos los formatos de imagen, audio y vdeo utilizados ms frecuentemente:
Tipo
Imagen
Formato
jpg
gif
bmp
Sonido
midi
wav
Real Audio
au
mp3
Vdeo
avi
mpeg
Descripcin
Formato con compresin que permite buenas
resoluciones.
Utiliza como mximo 256 colores, idneo
para dibujos y animaciones.
Imagen de mapa de bits, inconveniente de
tamao, pero ptimo para fotografa de alta
definicin.
Formato de secuencia, dispone de canales
para cada instrumento. Suelen crearse a
partir de un sintetizador o un instrumento
musical electrnico con salida MIDI
Nativo de los SO Windows
Utilizado por programas como Real Player,
radio y emisiones diversas a travs de
Internet.
Nativo de sistemas tipo Unix.
Muy popular y utilizado por programas como
WimAmp; se suele utilizar para distribuir
msica por la Red.
Nativo de los SO Windows, tambin se conoce
como Video for Windows.
Formato estandarizado por la ISO y empleado
en la distribucipn de pelculas en CD, DVD,
Quick Times (MOV)
TV digital ...
Tambin conocido como QT, desarrollado por
Apple para sus ordenadores Mac. Existen
drivers para PC.
REPRODUCCIN DE SONIDO
En cuanto a la reproduccin de sonidos en un navegador, podemos distinguir dos casos:
1.
2.
Fondos sonoros.
Sonidos activados por el usuario.
Hasta ahora, habamos visto cmo incluir color o imgenes en el fondo de pantalla. Vamos a ver ahora cmo
podemos aadir un fondo musical a tus creaciones que haga la visita a tu pgina Web ms agradable.
Consejo: No conviene abusar de este recurso. Una pgina 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 pgina Web, procura que no sea
excesivamente largo, ni repetitivo, sino ms 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 versin 4.0 se
reconoce tambin la etiqueta pareada <EMBED> ... </EMBED>, que se usa tambin en otros navegadores
(Netscape) y tiende a convertirse en el estndar.
La sintaxis bsica de la etiqueta <BGSOUND> es la siguiente:
<BGSOUND src=nombredelfichero>
Donde nombredelfichero es el nombre (incluida la extensin) 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 nmero 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 pgina 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 versin anterior a la 4.0 de Internet Explorer, las etiquetas <EMBED>,
<NOEMBED> y </NOEMBED> sern ignoradas y el fichero imagine.mp3 se podr escuchar mediante el uso de
<BGSOUND>. Para una versin 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 hacamos 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 bsica de una
marquesina es la siguiente:
<MARQUEE> Texto que se desplaza </MARQUEE>
La etiqueta <MARQUEE> admite los siguientes atributos:
Atributo
height, width
align
bgcolor
behavior
direction
loop
scrolldelay
scrollmount
Descripcin
Indican el tamao de la marquesina,
especificando la altura y la anchura en
nmero de pxeles o bien en porcentaje
de pantalla
Indica la alineacin del texto que rodea
a la marquesina.
Modifica el color de fondo de la
marquesina. El color debe especificarse
mediante el cdigo #RRGGBB
Especifica el comportamiento del texto
de la marquesina, es decir, de qu
formase va a desplazar.
Sirve para especificar la direccin de
desplazamiento del texto de la
marquesina
Indica el nmero 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 nmero de pxeles 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 pxeles hasta llegar al otro
Valores
Valor numrico o porcentaje
top, bottom, middle
Cualquier valor del cdigo
alternate, scroll, slide
left, right
Valor numrico, infinito
Valor numrico entero
Valor numrico entero
2 Las Marquesinas funcionan nicamente con Internet Explorer. En Netscape, el texto aparece fijo.
extremo de la marquesina.
VDEO EN INTERNET EXPLORER

La inclusin de vdeo 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 acompaan a dicha etiqueta. En lugar del atributo src, el
atributo obligatorio ahora ser dynsrc. Por ejemplo:
<IMG dynsrc=FichVideo>
Adems, tenemos otros atributos opcionales:
Loop
Height, Width
Controls: Muestra la consola de vdeo 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 pgina Web donde se halle. mouseover indica que el fichero de vdeo se ejecutar cuando el usuario site
el puntero del ratn sobre el cuadro de vdeo.
Por ejemplo:
<HTML>
<HEAD>
<TITLE> Vdeo en HTML </TITLE>
</HEAD>
<BODY>
<img dynsrc="PHTO0023.avi" start=mouseover width=240 height=200>
</BODY>
</HTML>
Cuando cargamos la pgina Web, obtenemos:
Al pasar el ratn sobre el cuadro de vdeo:
17- MARCOS
Los marcos permiten dividir una pgina Web en varias pginas, de forma que cada una puede mostrar una
pgina 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 pgina Web, sino un sitio Web. Un sitio Web es una coleccin de pginas que tratan sobre un tema
comn unidas entre s mediante enlaces, un ndice, etc. En la actualidad, casi todas las pginas que visitamos en
Internet, son sitios Web ms que pginas, ya que esta estructura de sitio Web permite presentar la informacin de
una forma ms ordenada que si ponemos todo en la misma pgina.
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 nmero de marcos fila en los que se
dividir la pgina. El atributo cols especifica el nmero de marcos columna. Los valores que pueden tomar son
nmero 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
Descripcin
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 pxeles.
Especifica el margen superior e inferior en pxeles.
Si un documento es ms largo que el marco, aparecen unas
barras de desplazamiento. Este atributo permite desactivar o
automatizar su aparicin.
Evita que el tamao 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
pgina y dificultar su lectura.
Ejemplo:
<HTML>
<HEAD>
<TITLE> Marcos en HTML </TITLE>
</HEAD>
<FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
</FRAMESET>
<FRAMESET rows="33%,33%,33%">
</FRAMESET>
</FRAMESET>
</HTML>
En el cdigo anterior, en primer lugar, hemos dividido la pgina en dos columnas, cada una de las cuales ocupa el
50% de la misma. A continuacin, 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 pgina y muestra el archivo de imagen win.gif.
El resultado se muestra en la siguiente figura:
Vamos a ver ahora cmo podemos utilizar los marcos para crear una pgina en la que tengamos un ndice con el cual
podamos cargar diferentes secciones (diferentes pginas) en un marco principal. Es decir, vamos a crear mens que
actualizan un marco distinto al que se pulsa. Vemoslo con un ejemplo:
En los ejemplos anteriores, los archivos que hemos cargado en los diferente marcos eran simplemente archivos de
imagen que incluamos dentro de la etiqueta <FRAME>, mediante el atributo src. Ahora vamos a crear una pgina
con dos marcos en cada uno de los cuales se cargar una pgina Web: en la primera, que ocupar un 25% de la
pantalla, aparecer un men con enlaces a los diferentes apartados; en la segunda pgina aparecer una pgina
principal y, al hacer clic sobre los enlaces del men, las diferentes secciones se cargarn en este segundo marco.
Por supuesto, para que las pginas 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">ÁLBUM DE FOTOS</a><br><br>
</font>
</b>
</body>
</html>
De aqu, todo nos es conocido salvo el atributo target que explicaremos un poco ms adelante. Fijmonos que para
cada seccin hemos puesto un enlace a un archivo que contendr la informacin referente a ese apartado. Todos
estos archivos (portada.html, historia.html, museos.html, etc.) hemos de crearlos independientemente. Veamos, por
ejemplo, el cdigo del fichero portada.html que ser el que nos sirva de pgina 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í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ágina intentaremos explicar mediante fotos y textos
cómo es y cómo se vive en nuestra ciudad: su historia, sus monumentos
más importantes, personajes importantes que nacieron o vivieron en ella y mucho
más.... Gracias por su visita!
</body>
</html>
Antes de pasar a la definicin de los marcos veamos estas dos pginas 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:
Fijmonos en las novedades del cdigo marcos.html:

Hemos utilizado el atributo border, que ya conocamos de las tablas, asignndole el valor 0 para que nuestra pgina
tenga aspecto de continuidad, es decir, que no se muestren las lneas de separacin entre los marcos. Esto da un
aspecto ms profesional a nuestra pgina.
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 pequea para ver todo el ndice (as obligamos al usuario a mantener un tamao mnimo de ventana) e
impedir que el tamao del texto se haga ms pequeo 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 pxeles de margen entre el lmite del marco y el texto, evitando as que este se pueda
juntar con el del primer marco.
Adems, 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 hacamos 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 pgina 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- IMGENES SENSIBLES (MAPAS DE IMGENES)

Las imgenes sensibles son imgenes que contienen zonas activas que actan como enlaces, es decir, en funcin 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
Descripcin
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
Segn el valor del atributo shape, las coordenadas del atributo coords, se especifican como podemos ver en la tabla
siguiente:
shape
circle
rect
coords
x, y, R; donde (x, y) son las coordenadas del centro del crculo
y R su radio
x1, y1, x2, y2; (x1, y1) son las coordenadas del vrtice
superior izquierdo y (x2, y2) las coordenadas del vrtice
inferior derecho.
poly
X1, y1, x2, y2, .... , xn, yn; donde los pares de coordenadas (x,
y) son las coordenadas de los vrtices del polgono. 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> Imgenes 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="crculo" 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 dnde definimos las zonas activas y los archivos a que se cargarn 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 acta el mapa, mapa_sensible.bmp, es una imagen
que hemos creado a partir de las imgenes de las banderas de las cuales disponamos previamente (aunque hemos
recortado la imagen de la bandera de Espaa y de Francia).
Podramos haber creado los enlaces de una forma ms sencilla, insertando las banderas en una tabla como
imgenes-enlace, ahorrndonos as la complicacin del mapa sensible:
<HTML>
<HEAD>
<TITLE> Imgenes 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. Slo 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 estn contenidas en una imagen global y, adems tienen
formas geomtricas complicadas. Podemos ilustrar todo esto mediante el siguiente ejemplo 3:
<HTML>
<body bgcolor="#000000" text="#733A1A" leftmargin="8" topmargin="8" marginwidth="8" marginheight="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,196,64,197,58,1
92,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,273,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,22
4,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,172,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,97,43,94,46,96,4
3,104,47,108,56,109,59,114,62,116,63,130,58,130,46,130,52,136,52,143,40,151,44,53,49,152,55,156,58,156,62,16
4,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,9
9,159,94,156,104,146,103,139,96,135,92,137,89,165,91,130,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="Espaa"
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,28,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,346,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,117,281,117,274,112,276,107,276,104,274,101,274,99,27
1,95,270,93,272,87,271,85,270,74,264">
<area shape="default" nohref>
</map>
3 Este ejemplo, salvo algunas modificaciones para adaptarlo al texto, fue realizado por Javier Ibaez Cruz, 3
de E.S.O. del curso 2003-2004.
<CENTER>
<IMG src="mapa.jpg" usemap="#zona3paises">
</CENTER>
</BODY>
</HTML>
19- FORMULARIOS
En el lenguaje HTML se define un mecanismo que permite un intercambio de informacin directo entre el cliente y el
servidor, son los conocidos formularios o FORMS. Mediante estos formularios, el usuario puede introducir informacin
seleccionando elementos, activando botones, escogiendo elementos de mens o introduciendo texto en cuadros de
dilogo.
Los formularios se crean mediante la etiquetas <FORM> ... </FORM>, siendo necesario introducir atributos
especiales y otros cdigos en el cuerpo del formulario. Los formularios se pueden dividir en dos tipos, segn el
mtodo de procesamiento de la informacin recibida.
Formularios dirigidos a una persona: en este tipo de formularios, la informacin es devuelta encapsulada
en un mensaje de correo electrnico que se enva a una direccin personal, normalmente la del creador de la
pgina Web.
Formularios dirigidos a un servidor: estos formularios se caracterizan porque la informacin 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 accin oportuna. Es el tipo de
formulario que encontramos en las pginas de compra/venta electrnica.
Nosotros nos centraremos en el primer tipo de formularios, ya que para el segundo tipo, es necesaria la creacin 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 envan o, si se
envan por correo electrnico, se puede indicar con mailto:direccin de correo.
method: especifica el mtodo que se usa para enviar la informacin del formulario al programa CGI. Los
mtodos pueden ser GET y POST.
enctype: este ltimo atributo suele tomar siempre el valor TEXT/PLAIN, que indica el tipo de informacin que
se va a recibir. En la mayora 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
Descripcin
Cuadro de texto
rea de texto
Lista de seleccin
Cuadro con espacio para una lnea 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
insercin de mltiples lneas.
Se presentan diversas opciones en una lista permitiendo
la seleccin de una o varias de ellas.
Casilla de verificacin
Permite la confirmacin, mediante clic con el ratn sobre

ella. Si existe ms de una en el formulario, permite la
seleccin de ms de una simultneamente. No son
mutuamente excluyentes.
Botn de radio
Similar a las casillas de verificacin, pero slo permite la

seleccin de una de ellas entre todas las dems. Son
mutuamente excluyentes.
Botn de envo
Pulsando este botn se envan los datos del formulario al

servidor o a la persona sealada.
Botn de borrado
Con este botn 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 verificacin, botones de radio, botones de
envo y de borrado, mientras que las reas de texto se insertan mediante la etiqueta pareada <TEXTAREA> ...
</TEXTAREA> y las listas de seleccin 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
Descripcin
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 tamao visible del texto.
Especifica el nmero mximo 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 botn
grfico de envio de la informacin.
Especifica el alineamiento , puede ser top, middle, bottom (por
defecto), left o right.
Valor por defecto. Muestra una lnea de texto.
Igual que text excepto que los caracteres introducidos son
mostrados como *.
Casilla de verificacin 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, slo 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 botn que inicializa los datos al programa CGI. Debe
existir siempre uno en cualquier formulario.
Define un botn que enva los datos del formulario al valor por
defecto.
Define un mtodo para poder escoger un fichero cuyo contenido
ser enviado como los datos proporcionados por el formulario.
No son visibles y proporcionan un mtodo de enviar informacin
sobre el estado, etc., al programa del CGI.
Permite definir un botn grfico.
Vamos a ver como funcionan estos elementos ms 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"
value="informatica" CHECKED>Informtica
value="tecno">Tecnologa
value="mate">Matemticas
value="caste">Castellano<BR>
value="reli">Religin
value="edufis">E. Fsica
value="natu">Ciencias Naturales
value="valen">Valenciano<BR>
value="ingles">Ingls
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 verificacin para la seleccin de la asignatura preferida. En general, si las opciones son
muchas, es preferible utilizar en su lugar las listas de seleccin, 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 nmero de elementos del men desplegable que sern visibles al mismo tiempo.
multiple: permite que se seleccionen ms de un elemento del men.
Cada uno de los elementos de la lista de seleccin son especificados por la etiqueta pareada <OPTION> ...
</OPTION>, que posee dos atributos:
value: valor de la opcin que se enviar si es seleccionado.

selected: indica que es el valor seleccionado por defecto. Pueden existir varios si la opcin multiple ha sido
seleccionada en el men.
Veamos el mismo ejemplo de antes utilizando una lista de seleccin:

<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">Informtica</OPTION>
<OPTION value="tecno">Tecnologa</OPTION>
<OPTION value="mate">Matemticas</OPTION>
<OPTION value="caste">Castellano</OPTION>
<OPTION value="reli">Religin</OPTION>
<OPTION value="edufis">E. Fsica</OPTION>
<OPTION value="natu">Ciencias Naturales</OPTION>
<OPTION value="valen">Valenciano</OPTION>
<OPTION value="ingles">Ingls</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 cdigo anterior cambiamos la lnea que contiene esta etiqueta por
<SELECT NAME="asignatura" SIZE="6" MULTIPLE>
obtenemos una lista de seleccin mltiple 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 ms
de una lnea.
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:
aadimos el siguiente trozo de cdigo al formulario anterior, despus de la lista de seleccin:
Comentarios:
<TEXTAREA name="comenta" rows="5" cols="30">
</TEXTAREA>
<BR><BR>
Informacin recibida de un formulario

Todava no sabemos cmo se muestra la informacin cuando el usuario pulsa el botn de envo y lo recibimos en
nuestra cuenta de correo electrnico, como si se tratase de un mensaje ms.
Presentacin de formularios
Los formularios que hemos ido creando hasta ahora son ms o menos complejos, pero carecen de una presentacin
profesional. La mejor forma de presentar al usuario un formulario de modo que tenga un aspecto ms elaborado es
mediante la utilizacin de tablas. Este aspecto lo trataremos ms adelante, pero veamos ahora un ejemplo:
20- DHTML
Esta seccin 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 caractersticas del mismo en unas pocas pginas, de
modo que slo veremos los aspectos ms 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 pginas Web es que pase muchas horas navegando por
Internet. Hay miles de millones de pginas 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 diseador experto es visitar las pginas ms relacionadas con los temas que le interesen y consultar los cdigos
(cuando son pblicos) para ir aprendiendo los diferentes trucos que darn un aspecto ms profesional a sus
creaciones.
Para ir abriendo boca, vamos a incluir a continuacin una serie de trucos generales que nos permitan modificar el
aspecto de nuestras pginas:
Columnas
En ocasiones nos interesar disponer el texto y las imgenes de nuestra pgina Web en forma de columnas, ya sea
por el tipo de documento que estamos creando (revista, peridico electrnico) o, simplemente, por una cuestin de
estilo.
Aunque Netscape admite actualmente la etiqueta <MULTICOL>, si queremos que nuestro pgina se vea igual en
otros navegadores debemos emplear otra forma de crear las columnas.
La forma ms sencilla de crear columnas es mediante el uso de tablas con una fila y varias columnas.
Encabezamientos laterales
Formularios con tablas anidadas
Inclusin de guas
Enlaces y ventanas
Imgenes transparentes (?)
22- ALGNUOS TRUCOS JAVASCRIPT
Alertas (Pop up windows)
Redireccionamiento automtico
Scroll automtico
Botones Interactivos
Efectos de ratn

IMPRIMIR El Lenguage HTML

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IMPRIMIR El Lenguage HTML

Uploaded by

Copyright:

Available Formats

Tema N1

Diseo de pginas web (HTML)

Las etiquetas de HTML pueden ser de dos tipos, cerradas o abiertas.

2. ESTRUCTURA DE UN DOCUMENTO HTML

CUERPO DEL DOCUMENTO HTML

background: para poner una imagen de fondo.

Segundo: Crea una carpeta donde guardaras la pgina web.

Es muy importante cerrar las etiquetas de ttulo.

Verifique el resultado guardando con el nombre de

Para alinear un prrafo o ttulo hay que especificar

Tambin se puede utilizar la etiqueta <CENTER>

SALTO DE LINEA Y SEPARADOR HORIZONTAL

Este sera el resultado

ejemplo de arriba con el nombre de Ejemplo5.html

Complete las etiquetas faltantes y Guarde el ejemplo

Verifique el resultado guardando

5. LISTAS CON VIETAS

Pruebe el ejemplo guardando con el nombre de Ejemplo9.html

Pruebe el ejemplo guardando con el nombre de

Pruebe el ejemplo guardando con el nombre de

Pruebe el ejemplo guardando con el nombre de

REDUCIR AMPLIAR Y A LINEAR IMAGENES

Y a la vez si tuviramos texto, este rodea la imagen

align="right" width=200px height=400px>

En este ejemplo modificamos el tamao de la imagen, dando un ancho de 200 pixeles y

<IMG src=cortado.jpg align=right width=30%>

En este ejemplo la imagen tomara el tamao de 30 % de La ventana del navegador.

10- CARCTERES ESPECIALES

href="#bellasartes">Museo Bellas Artes</a><br>

El documento Inicio.html queda de la siguiente forma:

Al pinchar en el enlace obtenemos:

Indica el nmero de columnas que

Indica el nmero de filas que

Obliga al explorador a no romper

Determina el ancho de la celda, en

14- COMBINACIN DE ELEMENTOS

2. Enlace con imagen.

El cdigo de este documento es el que sigue:

4. Tabla de fotos con enlace.

15- ALGUNAS INDICACIONES SOBRE RUTAS Y DIRECTORIOS

16- MULTIMEDIA CON HTML

Quick Times (MOV)

Sonidos activados por el usuario

Al hacer clic sobre el enlace se comienza a reproducir el archivo:

VDEO EN INTERNET EXPLORER

Al pasar el ratn sobre el cuadro de vdeo:

Fijmonos en las novedades del cdigo marcos.html:

18- IMGENES SENSIBLES (MAPAS DE IMGENES)

Para aclarar todo esto, es mejor verlo con un ejemplo:

Cuadro con espacio para una lnea de texto donde se

Permite la confirmacin, mediante clic con el ratn sobre

Similar a las casillas de verificacin, pero slo permite la

Pulsando este botn se envan los datos del formulario al

Con este botn se puede realizar la limpieza del

value: valor de la opcin que se enviar si es seleccionado.

Veamos el mismo ejemplo de antes utilizando una lista de seleccin:

<INPUT type="text" name="apellido2" size="14" maxlength="25"><BR><BR>

Informacin recibida de un formulario

21- TRUCOS Y COMENTARIOS

You might also like