You are on page 1of 39

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

Introduccin a la Web y al lenguaje HTML

Qu es la Web?
La Web es el nombre con el que popularmente nos referimos a la World Wide Web. La World Wide Web es un sistema de informacin no lineal implementado mediante ordenadores. Pero qu es un sistema de informacin no lineal? La humanidad ha evolucionado utilizando sistemas de informacin lineal a los que estamos plenamente acostumbrados. Estos sistemas se caracterizan por presentar la informacin de un modo secuencial (lineal). Por ejemplo, en un libro se presenta la informacin segn el orden elegido por el autor. El lector no puede decidir qu informacin desea recibir, pues est obligado a seguir el orden preestablecido. Podemos concretar an ms este ejemplo particularizndolo para los apuntes que esta leyendo. Imagine que, leyendo esta introduccin a los sistemas de informacin no lineales, se siente interesado por saber cul es el origen de estos sistemas. Si el autor ha decidido no incluir esta informacin en los apuntes, usted no podr resolver su duda. No obstante, siempre tiene la opcin de buscar esta informacin en un libro o de preguntrselo al propio autor. En este caso estara utilizando un sistema de informacin no lineal. Tambin est utilizando un sistema de informacin no lineal cuando lee el ndice de un libro para averiguar a qu pgina debe acudir para obtener la informacin que desea. Nota: El origen de los sistemas de informacin no lineal se remonta a 1588. Un libro publicado en Pars en este ao describe un artilugio con forma de rueda de paletas en el que cada una de las paletas sirve de bandeja para colocar un libro abierto. El usuario puede girar la rueda para pasar de un libro a otro en busca de informacin relacionada. Por ejemplo, si leyendo un libro encuentra una palabra cuyo significado desconoce, slo tiene que girar la rueda para acceder a una bandeja en la que haya colocado un diccionario, leer la definicin y, posteriormente, volver a girar la rueda para seguir leyendo. La Web es como una enorme biblioteca repleta de libros en la que los propios autores se han preocupado de establecer relaciones entre la informacin que aportan y otras informaciones relacionadas, que pueden encontrarse en el mismo libro o en los de otros autores. Estas relaciones se denominan hipervnculos y, siguiendo esta misma analoga, los libros seran las pginas o sitios web. En la Web existen aplicaciones denominadas buscadores, a las que los usuarios pueden acudir para indicar un tema de inters (mediante una palabra o frase clave) y obtener una lista de hipervnculos relacionados con ese tema concreto. Estas aplicaciones son capaces de generar estas listas de hipervnculos de forma automtica, analizando el contenido de las pginas que est publicadas en la Web. Una diferencia fundamental entre la Web y una biblioteca tradicional es que los libros/pginas Web no estn todos almacenados en una misma ubicacin geogrfica, sino que se encuentran alojadas en ordenadores distribuidos por todo el mundo y que estn conectados entre s mediante Internet.

1
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

Cmo funciona la Web?


El sistema World Wide Web est basado fundamentalmente en dos tipos de aplicaciones: las aplicaciones cliente y las aplicaciones servidor. Las aplicaciones servidor residen normalmente en los propios ordenadores en los que estn almacenadas las pginas web y son los encargados de enviar estas pginas a los usuarios que las solicitan. Las aplicaciones cliente o navegadores son las que utilizamos para solicitar y visualizar las pginas web. Cada ordenador conectado a Internet tiene asignado un nombre nico que lo diferencia de los dems. Este nombre se denomina direccin IP y suele expresarse como un cuarteto de ternas de dgitos separadas por puntos, como 195.75.86.66. Para solicitar una pgina web a un servidor tenemos que conocer la direccin del ordenador en la que se est ejecutando, adems del propio nombre de la pgina. Una vez conocido estos datos slo tenemos que formular la peticin desde nuestro navegador. Esta peticin puede adoptar una forma tan simple como: direccin_IP/nombre_de_la_pgina_web Por ejemplo, 129.42.18.103/index.html. Nota: La sintaxis completa para solicitar una pgina web es: http://direccin_ip:nmero_de_puerto/nombre_de_la_pgina_web Todas las comunicaciones a travs de Internet deben adaptarse a ciertas normas preestablecidas denominadas genricamente protocolos. Existe un protocolo creado especficamente para la Web denominado http, que es precisamente el prefijo que utilizamos al inicio de la peticin para indicar que deseamos hacer uso de este protocolo. En un mismo ordenador pueden estar funcionando simultneamente aplicaciones servidor de distinto tipo (no slo servidores Web), como servidores de correo electrnico, servidores FTP, servidores de chat (IRC), servidores de aplicaciones p2p (peer to peer), ... Todas estas aplicaciones pueden estar compartiendo eventualmente una misma conexin a Internet del ordenador, de modo que al recibir una peticin a travs de esa conexin debe existir algn elemento que indique cul de ellas debe hacerse cargo de contestarla. Este elemento es el nmero de puerto. Cada aplicacin servidor tiene asignado un nmero de puerto diferente. Los servidores web suelen utilizar el puerto 80. Nota: Como recordar las direcciones IP de los ordenadores puede resultar bastante complicado, se ha desarrollado un sistema, denominado DNS (domain name service), que asigna a cada direccin IP un nombre ms sencillo. Este sistema est basado en aplicaciones servidor, denominadas servidores DNS, capaces de convertir un nombre en su correspondiente direccin IP. Si realizamos una peticin de una pgina web mediante el nombre del ordenador (ms concretamente del dominio), en lugar de mediante su direccin IP, el navegador tendr que recurrir a un servidor DNS para averiguar la direccin IP correspondiente al nombre indicado. Las aplicaciones servidor DNS suelen utilizar el puerto 53.

2
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

Qu es HTML?
HTML son las siglas de HyperText Markup Language, o lenguaje de marcas de hipertexto. Este lenguaje est compuesto por un conjunto de marcas que indican al navegador cmo debe mostrar el contenido de una pgina Web. Por ejemplo, existen marcas que indican que un texto es un ttulo, o que ciertos datos deben presentarse en forma de tabla. Las etiquetas HTML siempre empiezan con el signo menor que (<) y siempre terminan con el signo mayor que (>). Por ejemplo, una etiqueta HTML es <H1>, que indica al navegador que el texto que viene a continuacin debe mostrarse como un ttulo (heading) de nivel 1. Adems, las etiquetas HTML suelen utilizarse por parejas: etiqueta de inicio-etiqueta de final. La etiqueta de inicio indica a partir de dnde debe aplicarse un estilo de visualizacin, y la etiqueta de fin (o etiqueta de cierre) indica dnde debe dejar de aplicarse ese estilo. Las etiquetas de fin son idnticas que las de inicio, pero con el signo cociente (/) a continuacin del signo menor que. Por ejemplo, la etiqueta de cierre de <H1> es </H1>. Algunas etiquetas poseen atributos que permite configurar su comportamiento. Por ejemplo, la etiqueta <H1> admite el atributo ALIGN, que sirve para definir la alineacin horizontal del ttulo. Los valores que admite este atributo son CENTER (centro), LEFT (izquierda) y RIGHT (derecha).

Estructura general de una pgina HTML


Las pginas HTML se almacenan en archivos de texto que suelen utilizar la extensin .htm o .html. Estos archivos pueden crearse con cualquier editor de textos, como el Bloc de notas. La primera etiqueta que debe aparecer en una pgina web es <HTML>; y la ltima es su etiqueta de cierre correspondiente: </HTML>. Todas las pginas web estn divididas en dos secciones: La cabecera o head. Contiene informacin general sobre la pgina, como su ttulo, el nombre de la aplicacin que se ha utilizado para desarrollarla, el nombre del autor, ... Esta informacin normalmente no se muestra en el navegador. La cabecera de una pgina web est delimitada por las etiquetas <HEAD></HEAD>. El cuerpo o body. Es la informacin que realmente se muestra en el navegador. El cuerpo de una pgina web est delimitado por las etiquetas <BODY></BODY>.

3
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

La cabecera
Dentro de la cabecera de una pgina web pueden utilizarse las siguientes etiquetas: <TITLE></TITLE>: Contiene el ttulo de la pgina. Este ttulo suele mostrarse en la barra de ttulo del navegador. <META>: Esta etiqueta es una de las excepciones que no posee etiqueta de cierre. Se utiliza habitualmente para definir el contenido de ciertas variables relacionadas con la pginas web, como el nombre del autor, la descripcin de la pgina, ... Para definir estos valores se utilizan los parmetros NAME (nombre de la variable) y CONTENT (contenido de la variable) de la etiqueta <META>. Los nombres de variables ms utilizados son: o o o o author (autor) description (descripcin) editor (aplicacin utilizada para desarrollar la pgina) keywords (palabras clave que permiten a los buscadores indexar su contenido).

A continuacin se muestra un ejemplo de pgina web con cabecera:


<HTML> <HEAD> <TITLE>Mi primera pgina web</TITLE> <META NAME=author CONTENT=Juan Flix Mateos> <META NAME=description CONTENT=Primer ejemplo de introduccin a HTML> <META NAME=editor CONTENT=Manual> <META NAME=keywords CONTENT=HTML curso cabecera> </HEAD> <BODY> </BODY> </HTML>

El cuerpo
Ya sabemos que el cuerpo de una pgina web es el contenido que realmente se muestra en la ventana del navegador. Todo este contenido debe estar delimitado por la etiqueta <BODY></BODY>. Esta etiqueta posee los siguientes atributos de inters: BACKGROUND=...: Es el nombre de una imagen que se utiliza a modo de tesela para crear un mosaico en el fondo de la pgina web. BGCOLOR=...: Indica el color que se desea asignar al fondo de la pgina web. Los colores en HTML pueden definirse mediante su nombre o mediante los valores hexadecimales de sus componentes roja, verde y azul. En la siguiente tabla se recogen algunas de estas definiciones: Nombre del color Black Silver Gray White Maroon Red Valor hexadecimal equivalente #000000 #C0C0C0 #808080 #FFFFFF #800000 #FF0000 4
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML Purple Fuchsia Green Lime Olive Yellow Navy Blue Teal Aqua #800080 #FF00FF #008000 #00FF00 #800000 #FFFF00 #000080 #0000FF #008080 #00FFFF

Juan Flix Mateos

TEXT=...: Indica el color del texto que aparece en la pgina. LINK=...: Indica el color de los hipervnculos que aparecen en la pgina. ALINK= : Indica el color que adopta un hipervnculo cuando se hace clic sobre l, es decir, cuando se activa. VLINK=...: Indica el color del que se muestran los hipervnculos cuyo destino ya se ha visitado.

Comentarios
Dentro del cuerpo de una pgina web podemos incluir notas que aclaren ciertos aspectos del cdigo pero que no se muestren en el navegador. Estas notas se denominan comentarios y se crean mediante la etiqueta <!--...-->. Un ejemplo de comentario podra ser el siguiente:
<!-----------------------A partir de este punto empieza la seccin dedicada a mis aficiones ------------------------------>

Texto
En el cuerpo de una pgina web aparecen bsicamente dos tipos de textos: Ttulos. Se crean con los pares de etiquetas <H1></H1>,<H2></H2>,..., <H6></H6>, siendo los ttulos de nivel 1 los de mayor importancia y los de nivel 6 los de menor importancia. El nico atributo que aceptan estas etiquetas es ALIGN, que sirve para indicar la alineacin horizontal del texto y cuyos valores pueden ser CENTER, LEFT y RIGHT. No obstante, dentro de las etiqueta <Hn> pueden anidarse otras etiquetas que definan de forma expresa otros aspectos del texto, como su tipo de letra, o su color. Estas etiquetas que definen expresamente el aspecto de un texto se tratarn al final de esta misma seccin. En cierta forma, las etiquetas <Hn> especifican un aspecto de forma relativa, pues indican la importancia de un ttulo pero no ordenan al navegador cmo debe mostrarlo con exactitud, es decir, no indican con qu tipo de letra ni con qu tamao debe mostrarse cada ttulo, pero s que un ttulo de nivel 1 debe mostrarse de un modo ms relevante que otro de nivel 2.

5
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

Prrafos. Se crean con el par de etiquetas <P></P>. Al igual que las etiquetas de ttulo, slo admite el parmetro ALIGN, pero tambin pueden anidarse en su interior etiquetas que definen un aspecto de forma expresa.

A continuacin se muestra el aspecto de los distintos niveles de ttulo en Internet Explorer:


<html> <head> <TITLE>Ttulos de nivel</TITLE> </head> <body> <H1>Ttulo <H2>Ttulo <H3>Ttulo <H4>Ttulo <H5>Ttulo <H6>Ttulo </body> </html> de de de de de de nivel nivel nivel nivel nivel nivel 1</H1> 2</H2> 3</H3> 4</H4> 5</H5> 6</H6>

Dentro de cualquier texto podemos introducir un salto de lnea mediante la etiqueta <BR>. Esta etiqueta carece de etiqueta de cierre. Es importante destacar que la etiqueta <BR> empieza una lnea nueva pero sin cambiar de estilo. Por ejemplo, si la utilizamos anidada dentro de un prrafo, iniciar una nueva lnea del mismo prrafo, pero no un nuevo prrafo. En la siguiente figura se aprecia mejor esta diferencia.
<html> <head> <TITLE>Lnea nueva</TITLE> </head> <body> <P>Al caer la noche, el hombre con el<BR> sombrero de ala ancha se separ del<BR> resto disimuladamente.<BR> No advirti que le estbamos observando<BR> desde el balcn.</P> </body> </html>

6
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML


<html> <head> <TITLE>Prrafo nuevo</TITLE> </head> <body> <P>Al caer la noche, el hombre con el<BR> sombrero de ala ancha se separ del<BR> resto disimuladamente.</P> <P>No advirti que le estbamos observando<BR> desde el balcn.</P> </body> </html>

Juan Flix Mateos

A continuacin se resumen algunas otras etiquetas, que al igual que las <Hn>, indican qu tipo de informacin contiene un texto, pero no cmo debe mostrarse exactamente. Estas etiquetas se denominan etiquetas de estilos lgicos. <ADDRESS></ADDRESS>: Indica que el texto contenido entre estas etiquetas es una direccin postal. <CITE></CITE>: Indica que el texto contenido entre estas etiquetas es una cita de otro texto. Suele utilizarse en combinacin con <BLOCKQUOTE>. <BLOCKQUOTE></BLOCKQUOTE>: Contiene el texto de la cita. <DFN></DFN>: Entre estas etiquetas se incluye un trmino cuya definicin aparece en el propio texto. <CODE></CODE>: Indica que el texto incluido entre estas etiquetas es un cdigo de programacin. <SAMP></SAMP>: Indica que el texto incluido entre estas etiquetas es una respuesta del ordenador. <KBD></KBD>: Indica que el texto incluido entre estas etiquetas debe ser introducido por el usuario en el ordenador. <EM></EM>: Indica que nos interesa enfatizar el texto incluido entre estas etiquetas. <STRONG></STRONG>: Indica un nivel de nfasis superior al de <EM></EM>.

A continuacin se muestran ejemplos de todas estas etiquetas:


<html> <head> <TITLE>Direcciones postales</TITLE> </head> <body> <P>Pueden dirigirme sus postales a la direccin:</P> <ADDRESS>Departamento de programacin aplicaca<BR> C/ Maqueda, 56<BR> Madrid (28045) </ADDRESS> </body> </html>

7
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML


<html> <head> <TITLE>Citas</TITLE> </head> <body> <P>Podemos calcular la longitud<BR> de la hipotenusa por aplicacin<BR> del <CITE>teorema de Pitgoras</CITE> <BLOCKQUOTE>La hipotenusa al cuadrado<BR> es igual a la suma de los <BR> cuadrados de los catetos</BLOCKQUOTE> </P> </body> </html>

Juan Flix Mateos

<html> <head> <TITLE>Definiciones</TITLE> </head> <body> <P>Se define <DFN>sistema holnomo</DFN><BR> como aqul cuyas ligaduras son integrables.</P> </body> </html>

<html> <head> <TITLE>Interaccin con el ordenador</TITLE> </head> <body> <P>Copie el siguiente programa BASIC<BR><BR> <CODE>set cateto1=2<BR> set cateto2=3<BR> hipotenusa=sqrt(cateto1^2+cateto2^2)<BR> print "hipotenusa=",hipotenusa</CODE><BR><BR> y ejectero escribiendo <KBD>RUN</KBD><BR><BR> El ordenador mostrar:<BR><BR> <SAMP>hipotenusa=3.605551275</SAMP> </P> </body> </html>

8
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML


<html> <head> <TITLE>nfasis</TITLE> </head> <body> <P><EM>Quiero enfatizar este texto</EM><BR> <STRONG>y ste an ms</STRONG></P> </body> </html>

Juan Flix Mateos

Para concluir esta seccin vamos a explicar algunas etiquetas que definen de forma expresa cmo debe mostrarse un texto. Estas etiquetas se denominan etiquetas de estilos fsicos. <I></I>. Indica que el texto contenido entre estas etiquetas debe mostrarse en cursiva. <B></B>. Indica que el texto contenido entre estas etiquetas debe mostrarse en negrita. <U></U>. Indica que el texto contenido entre estas etiquetas debe mostrarse en subrayado. <STRIKE></STRIKE>. Indica que el texto contenido entre estas etiquetas debe mostrarse tachado. <SUB></SUB>. Indica que el texto contenido entre estas etiquetas debe mostrarse como un subndice. <SUP></SUP>. Indica que el texto contenido entre estas etiquetas debe mostrarse como un superndice. <TT></TT>. Indica que el texto contenido entre estas etiquetas debe mostrarse con una fuente monoespaciada (o fuente de tipo teletipo), es decir, con una fuente en la que todos los caracteres ocupen el mismo espacio. <FONT></FONT>. Esta etiqueta permite indicar la fuente, el tamao y el color con el que queremos mostrar el texto contenido entre las etiquetas. Para especificar estas caractersticas disponemos de los siguientes atributos: o FACE=...: Sirve para indicar la fuente que queremos utilizar. Como no sabemos qu fuentes tiene instaladas en su ordenador la persona que visita nuestra pgina, podemos especificar varias fuentes separadas por comas. o SIZE=...: Slo admite los valores del 1 al 7, que corresponden a tamaos predefinidos en cada navegador, siendo 1 el ms pequeo y 7 el ms grande. o COLOR=...: Sirve para especificar el color del texto. o STYLE=...: Admite el sub-atributo FONT-SIZE, con el que se puede especificar un tamao exacto en puntos. A continuacin se muestran ejemplos de todas estas etiquetas:

9
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML


<html> <head> <TITLE>Estilos fsicos</TITLE> </head> <body> <P><I>Texto en cursiva</I><BR> <B>Texto en negrita</B><BR> <U>Texto subrayado</U><BR> <STRIKE>Texto tachado</STRIKE><BR> </body> </html>

Juan Flix Mateos

<html> <head> <TITLE>Super y subndices</TITLE> </head> <body> <P>La frmula qumica<SUP>1</SUP> del agua es:<BR> H<SUB>2</SUB>O.<BR> <SUP>1</SUP>Libro de qumica</P> </body> </html>

<html> <head> <TITLE>Fuentes</TITLE> </head> <body> <P><FONT face="futura black bt,Arial" size="3" color="blue"> Texto azul de tamao 3<BR> <FONT size="5" color="red"> Texto rojo de tamao 5<BR> <FONT STYLE="font-size: 40pt" COLOR="black"> Texto negro de 40 puntos</FONT> </P> </body> </html>

<html> <head> <TITLE>Fuente monoespaciada</TITLE> </head> <body> <P align="center"><TT><FONT color="green"> 0<BR> 000<BR> 00000<BR> 0000000<BR> 000000000<BR> 00000000000<BR> 0000000<BR> 000000000<BR> 00000000000<BR> 0000000000000<BR> 000000000000000<BR>

10
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML


<FONT color="maroon"> 0000<BR> 0000<BR> 0000<BR> </FONT></TT></P> </body> </html>

Juan Flix Mateos

Listar ordenadas y de boliches


En HTML es muy sencillo crear listas tanto numeradas como de boliches. En primer lugar tenemos que indicar qu tipo de lista queremos crear, para lo que disponemos de las siguientes etiquetas: <OL></OL>: Se utiliza para listas ordenadas. Admite dos atributos: START y TYPE. START indica qu valor queremos asignar al primer elemento de la lista, este valor deber indicarse siempre en numeracin arbica. TYPE indica el tipo de numeracin que queremos utilizar y admite los valores que se recogen en la siguiente tabla: Valor 1 I i A a Estilo Numeracin arbica Numeracin romana en maysculas Numeracin romana en minsculas Letras maysculas Letras minsculas Ejemplo 1, 2, 3, 4, ... I, II, III, IV, ... i, ii, iii, iv, ... A, B, C, D, ... a, b, c, d, ...

<UL></UL>: Se utiliza para listas no ordenadas. Esta etiqueta slo ofrece el parmetro TYPE, que sirve para indicar el tipo de boliche que queremos utilizar. Los valores posibles para este parmetro son DISC (crculo), CIRCLE (circunferencia) y SQUARE (cuadrado).

Una vez indicado el tipo de lista, ya slo tendremos que anidar en el interior de las etiquetas anteriores los elementos de la lista. Cada elemento debe escribirse entre las etiquetas <LI></LI>. Una caracterstica interesante de las listas es que se pueden anidar unas dentro de otras, como se muestra en el siguiente ejemplo:
<html> <head> <TITLE>Listas</TITLE> </head> <body> <H3>Los ros de Espaa</H3> <UL type="circle"> <LI>Vertiente cantbrica</LI> <OL start=1 type="I"> <LI>Bidasoa</LI> <LI>Nervin</LI> <LI>Naln</LI> </OL> <LI> Vertiente atlntica</LI> <OL start=4 type="I"> <LI>Mio</LI> <LI>Duero</LI> <LI>Tajo</LI> <LI>Guadalquivir</LI>

11
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML


</OL> </UL> </body> </html>

Juan Flix Mateos

Reglas
Las reglas son lneas horizontales que podemos insertar en nuestras pginas web para indicar visualmente un cambio de seccin. Para crear una regla tenemos que utilizar la etiqueta <HR>. Esta etiqueta ofrece los siguientes atributos: size: Indica la altura de la regla en pxeles. width: Indica la longitud de la regla. Puede expresarse en pxeles o como un porcentaje del tamao de la ventana del navegador. En este ltimo caso hay que preceder el valor del signo tanto por ciento (%). align: Establece la alineacin de la regla y admite los valores LEFT (izquierda), CENTER (centro) y RIGHT (derecha). noshade: Este parmetro no requiere ningn valor y se utiliza para anular el efecto de relieve de la regla.

A continuacin se muestran varios ejemplos de reglas.


<html> <head> <TITLE>Reglas</TITLE> </head> <body> Regla normal <HR> size=3, width=50 <HR size="3" width="50" align="left"> size=8, width=50% <HR size="8" width="50%" align="left"> height=8, width=50%, noshade <HR size="8" width="50%" align="left" noshade> </body> </html>

Imgenes
Ya sabemos que la etiqueta <BODY> nos ofrece el atributo BACKGROUND para que podamos utilizar una imagen a modo de tesela creando un mosaico que cubra todo el fondo de la ventana del explorador. Los formatos de imagen ms utilizados en pginas HTML son JPG y GIF, aunque a lo largo del curso tendremos ocasin de comprobar que existen otros formatos ms avanzados (como el PNG). A continuacin se muestran dos ejemplos de fondos creados con mosaicos.

12
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML


<html> <head> <TITLE>Fondos</TITLE> </head> <body background="ladrillo.jpg"> <H2 align="center">Pared de ladrillo</H4> </body> </html>

Juan Flix Mateos

<html> <head> <TITLE>Fondos</TITLE> </head> <body background="libreta.jpg"> <H2 align="center">Libreta</H4> </body> </html>

No debemos olvidar que la imagen de fondo se repite como una tesela, pudiendo provocar problemas como el que se muestra a continuacin:

Este defecto puede corregirse mediante la utilizacin de hojas de estilos en cascada. Aunque este tema escapa a nuestros objetivos actuales, vamos a mostrar aqu un sencillo ejemplo que corrige la situacin anterior.
<html> <STYLE TYPE="text/css"> <!-BODY {background-repeat: repeat-y} --> </STYLE> <head> <TITLE>Fondos</TITLE> </head> <body background="libreta.jpg" > <H2 align="center">Libreta</H4> </body>

13
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML


</html>

Juan Flix Mateos

En este caso, el resultado sera el que se muestra a continuacin (se observa que la imagen se repite verticalmente, pero no horizontalmente).

Otros posibles valores que podemos asignar a la propiedad background-repeat son: no-repeat: Para que la imagen se muestre slo una vez, sin formar un mosaico. repeat-x: Para que la imagen se repita slo horizontalmente.

Adems de esta forma de insertar una imagen de fondo, HTML nos ofrece la etiqueta <IMG> para colocar cualquier imagen en el cuerpo de la pgina web. Esta etiqueta posee los siguientes parmetros: SRC: Indica el nombre del archivo que contiene la imagen que deseamos insertar. ALIGN: Este atributo indica la alineacin de la imagen respecto de la lnea base de texto en la que se encuentra o respecto de la ventana del navegador. Los valores posibles son RIGHT (coloca la imagen ajustada al borde derecho de la ventana del navegador), LEFT (coloca la imagen junto al borde izquierdo de la ventana del navegador), TOP (ajusta el borde superior de la imagen con la lnea base de la lnea de texto), BOTTOM (ajusta el borde inferior de la imagen con la lnea base de la lnea de texto), MIDDLE (ajusta el centro vertical de la imagen con la lnea base de la lnea de texto). La lnea base de una lnea de texto es la lnea imaginaria sobre la que se apoyan los caracteres; la letra b est apoyada en la lnea base, mientras que el rabillo de la letra p est por debajo de la lnea base. ALT: Indica qu texto queremos mostrar en la pgina web mientras termina de descargarse la imagen, en navegadores que tienen desactivada la opcin de mostrar las imgenes o en navegadores que muestran mensajes de texto al colocar el puntero sobre una imagen. WIDTH: Indica el ancho en pxeles de la imagen. Es aconsejable utilizar esta opcin para que el navegador sepa cunto espacio horizontal debe reservar para la imagen y pueda colocar correctamente el resto de los elementos de la pgina mientras termina de descargar el archivo de la imagen. HEIGHT: Indica la altura de la imagen en pxeles.

14
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

HSPACE: Indica cuntos pxeles en blanco queremos dejar a los lados de la imagen. VSPACE: Indica cuntos pxeles en blanco queremos dejar por encima y por debajo de la imagen. LOWSRC: Indica el nombre de un archivo que contiene la misma imagen pero con menor resolucin. De este modo, el navegador puede mostrar rpidamente esta versin en baja resolucin mientras termina de descargar la imagen final (que tiene mejor calidad).

A continuacin se muestran algunos ejemplos de estos atributos:


<html> <head> <TITLE>Imgenes</TITLE> </head> <body> <P>Alineacin TOP<IMG src= "patito.jpg" align="top"> de una imagen respecto a una lnea de texto</P> </body> </html>

<html> <head> <TITLE>Imgenes</TITLE> </head> <body> <P>Alineacin BOTTOM<IMG src="patito.jpg" align=" BOTTOM "> de una imagen respecto a una lnea de texto</P> </body> </html>

<html> <head> <TITLE>Imgenes</TITLE> </head> <body> <P>Alineacin MIDDLE<IMG src="patito.jpg" align="MIDDLE"> de una imagen respecto a una lnea de texto</P> </body> </html>

15
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML


<html> <head> <TITLE>Imgenes</TITLE> </head> <body> <P>Alineacin LEFT<IMG src= "patito.jpg" align="LEFT"> de una imagen respecto a una lnea de texto</P> </body> </html>

Juan Flix Mateos

<html> <head> <TITLE>Imgenes</TITLE> </head> <body> <P>Alineacin RIGHT<IMG src="patito.jpg" align="RIGHT"> de una imagen respecto a una lnea de texto</P> </body> </html>

<html> <head> <TITLE>Imgenes</TITLE> </head> <body> <P>En este ejemplo hemos dejado <BR> un poco <IMG src= "patito.jpg" hspace="20" vspace="0" align="top"> de espacio horizontal y nada de espacio en los bordes superior e inferior de la imagen.</P> </body> </html>

Hipervnculos
Un hipervnculo es cualquier elemento (texto o imagen) sobre el que el usuario puede hacer clic para acceder a informacin relacionada. En esta seccin vamos a aprender a crear hipervnculos a otras pginas web, hipervnculos a posiciones concretas dentro de la misma pgina web e hipervnculos a direcciones de correo electrnico. En todos estos casos utilizaremos la etiqueta <A></A> o etiqueta de creacin de anclas. Un ancla es una posicin de la pgina web a la que podemos asignar un nombre mediante el atributo NAME de esta etiqueta. Un ancla puede actuar como origen de un hipervnculo, es decir, como lugar sobre el que tenemos que hacer clic para acceder a otra posicin, o como destino de un hipervnculo, es decir, como posicin a la que se accede al hacer clic sobre otro hipervnculo. Si deseamos que un ancha acte como origen de un hipervnculo tendremos que utilizar el atributo HREF de la etiqueta <A></A> para especificar su destino. Este atributo acepta como valores los siguientes elementos: 16
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

Direcciones de otras pginas web. Nombres de otros anclas. Direcciones de correo electrnico.

Nota: La etiqueta <A></A> nos ofrece el atributo TARGET para que podamos especificar como destino del hipervnculo el nombre de un marco, como tendremos ocasin de comprobar cuando estudiemos los conjuntos de marcos. En el siguiente ejemplo hemos creado un sencillo ancla que sirva como origen de un hipervnculo a otra pgina web.
<html> <head> <TITLE>Anclas</TITLE> </head> <body> <P>Haga clic <A title="Visiteme" href="www.mipagina.com">aqu</A> para acceder a mi pgina web.</P> </body> </html>

Nota: Observe que hemos utilizado el atributo TITLE de la etiqueta <A></A> para indicar el mensaje de texto que queremos que aparezca cuando el usuario coloque el puntero sobre el hipervnculo. A continuacin se muestra un ejemplo en el que existen varios anclas que sirven como origen de hipervnculos que conducen a otros anclas dentro de la misma pgina web.
<html> <head> <TITLE>Anclas</TITLE> </head> <body> <A name="inicio"><H1>Pars</H1></A> <UL type="square"> <LI>Foto 1: Haga clic <A href="#foto1">aqu</A></LI> <LI>Foto 2: Haga clic <A href="#foto2">aqu</A></LI> <LI>Foto 3: Haga clic <A href="#foto3">aqu</A></LI> <LI>Foto 4: Haga clic <A href="#foto4">aqu</A></LI> </UL> <H3>La torre Eiffel</H5> <A name="foto1"><IMG SRC="0075.jpg" width="500"></A> <P><A href="#inicio">Volver</A></P> <H3>La plaza de la concordia</H5> <A name="foto2"><IMG SRC="0084.jpg" width="500"></A> <P><A href="#inicio">Volver</A></P> <H3>El Louvre</H5> <A name="foto3"><IMG SRC="0089.jpg" width="500"></A> <P><A href="#inicio">Volver</A></P> <H3>El Sena</H5> <A name="foto4"><IMG SRC="0090.jpg" width="500"></A> <P><A href="#inicio">Volver</A></P> </body> </html>

17
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

Lo ms destacable de este ejemplo es que hemos tenido que utilizar el smbolo # en el valor del atributo HREF para indicar que el destino es el nombre de un ancla y no una direccin web. Existe la posibilidad de especificar como destino un ancla de una pgina web diferente a la que contiene el hipervnculo. Para hacerlo slo tenemos que utilizar la siguiente sintaxis en el valor del atributo HREF: nombre_de_la_pgina_web#nombre_del_ancla Por ejemplo: <A href=www.mipgina.com#foto1> La ltima tcnica que vamos a tratar en esta seccin es la creacin de un hipervnculo a una direccin de correo electrnico. En este caso utilizaremos la siguiente sintaxis para el valor del atributo HREF: mailto:direccion_de_email Por ejemplo:
<html> <head> <TITLE>Anclas</TITLE> </head> <body> <P>Haga clic <A href= "mailto:jfmateos@lycos.es">aqu</A> para enviarme un mensaje de correo electrnico.</P> </body> </html>

Tablas
En HTML, las tablas se usan con dos finalidades muy diferentes; por un lado sirven para mostrar informacin tabulada como cabra esperar, pero tambin tienen una utilidad menos evidente: crear la distribucin de los contenidos (textos, imgenes, ...) de

18
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

una pgina web. Mediante tablas se pueden crear composiciones tan interesentes como la que se muestra en la siguiente figura.

Las etiquetas que utilizaremos para crear tablas son las siguientes: <TABLE></TABLE>: Indica el principio y el final de la tabla. Sus atributos son los siguientes: o BORDER: Admite como valor un nmero que indica el tamao de los bordes exteriores e interiores de la tabla expresados en pxeles. o CELLSPACING: Admite como valor un nmero que indica (en pxeles) la distancia de separacin entre los bordes de celdas adyacentes. o CELLPADDING: Admite como valor un nmero que indica (en pxeles) la distancia desde el borde de cada celda hasta su contenido. o BGCOLOR: Su valor es el nombre del color (o su expresin hexadecimal precedida del signo #) que se utilizar como fondo de la tabla. o WIDTH: Indica la anchura de la tabla, que puede expresarse en pxeles o como un valor porcentual (colocando el signo % a continuacin del valor). o ALIGN: Indica la alineacin de la tabla respecto a la ventana del navegador. Admite los siguientes valores: LEFT (izquierda), RIGHT (derecha) o CENTER (centro). <TR></TR>: Indica el principio y el final de una fila dentro de la tabla. Sus parmetros son los siguientes: o ALIGN: Indica la alineacin horizontal del contenido de las celdas respecto de los bordes laterales de las propias celdas. Admite los valores LEFT, CENTER o RIGHT. o VALIGN: Indica la alineacin vertical del contenido de las celdas respecto de los bordes superior e inferior de las propias celdas. Admite los valores TOP, MIDDLE y BOTTOM. <TD></TD>: Indica el principio y el fin de cada celda dentro de una fila. Sus atributos son los siguientes: o BGCOLOR: Indica el color del fondo de la celda. 19
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

o WIDTH: Indica el ancho de la celda en pxeles o como un porcentaje del ancho total de la tabla (en este caso debe colocarse el signo % detrs del valor). o HEIGHT: Indica la altura en pxeles de la celda. Todas las celdas de una fila estn obligadas a tener la misma altura. o ROWSPAN: Sirve para indicar cuntas filas de la tabla ocupar la celda. Este atributo permite simular la combinacin de varias celdas en una sola. o COLSPAN: Sirve para indicar cuntas columnas de la tabla ocupar la celda. Este atributo permite simular la combinacin de varias celdas en una sola. o ALIGN: Indica la alineacin horizontal del contenido de la celda respecto de los bordes laterales de la propia celda. Admite los valores RIGHT, CENTER y LEFT. Este parmetro tiene prioridad sobre el equivalente de la etiqueta <TR></TR>, pero slo sobre la celda a la que se aplica. o VALIGN: Indica la alineacin vertical del contenido de la celda respecto de los bordes superior e inferior de la propia celda. Admite los valores TOP, MIDDLE y BOTTOM. Este parmetro tiene prioridad sobre el equivalente de la etiqueta <TR></TR>, pero slo sobre la celda a la que se aplica. <TH></TH>: Indica el principio y el final de una celda de encabezado de columna o de fila. Sus atributos son los mismos que los de la etiqueta <TD></TD>. <CAPTION></CAPTION>: Sirve para incluir una descripcin de la tabla al principio o al final de la misma. La posicin exacta de la descripcin se especifica mediante el atributo ALIGN, que acepta los valores TOP o BOTTOM.

A continuacin se recogen varios ejemplos en los que se pone de manifiesto el funcionamiento de las etiquetas anteriores y de sus atributos:
<html> <head> <TITLE>Tablas</TITLE> </head> <body> <TABLE ALIGN="CENTER" WIDTH="300" BORDER="10"> <TR> <TD>Celda 1.1</TD> <TD>Celda 1.2</TD> <TD>Celda 1.3</TD> </TR> <TR> <TD>Celda 2.1</TD> <TD>Celda 2.2</TD> <TD>Celda 2.3</TD> </TR> <TR> <TD>Celda 3.1</TD> <TD>Celda 3.2</TD> <TD>Celda 3.3</TD> </TR> </TABLE> </body> </html>

20
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML


<html> <head> <TITLE>Tablas</TITLE> </head> <body> <TABLE ALIGN="CENTER" WIDTH="300" BORDER="10" CELLSPACING="10"> <TR> <TD>Celda 1.1</TD> <TD>Celda 1.2</TD> <TD>Celda 1.3</TD> </TR> <TR> <TD>Celda 2.1</TD> <TD>Celda 2.2</TD> <TD>Celda 2.3</TD> </TR> <TR> <TD>Celda 3.1</TD> <TD>Celda 3.2</TD> <TD>Celda 3.3</TD> </TR> </TABLE> </body> </html> <html> <head> <TITLE>Tablas</TITLE> </head> <body> <TABLE ALIGN="CENTER" WIDTH="300" BORDER="10" CELLPADDING="10"> <TR> <TD>Celda 1.1</TD> <TD>Celda 1.2</TD> <TD>Celda 1.3</TD> </TR> <TR> <TD>Celda 2.1</TD> <TD>Celda 2.2</TD> <TD>Celda 2.3</TD> </TR> <TR> <TD>Celda 3.1</TD> <TD>Celda 3.2</TD> <TD>Celda 3.3</TD> </TR> </TABLE> </body> </html> <html> <head> <TITLE>Tablas</TITLE> </head> <body> <TABLE ALIGN="CENTER" WIDTH="300" BORDER="10"> <TR> <TD colspan=2>Celda 1.1</TD> <TD>Celda 1.3</TD> </TR> <TR> <TD>Celda 2.1</TD> <TD>Celda 2.2</TD> <TD>Celda 2.3</TD> </TR> <TR> <TD>Celda 3.1</TD> <TD>Celda 3.2</TD> <TD>Celda 3.3</TD> </TR> </TABLE> </body> </html>

Juan Flix Mateos

21
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML


<html> <head> <TITLE>Tablas</TITLE> </head> <body> <TABLE ALIGN="CENTER" WIDTH="300" BORDER="10"> <TR> <TD rowspan=2>Celda 1.1</TD> <TD>Celda 1.2</TD> <TD>Celda 1.3</TD> </TR> <TR> <TD>Celda 2.2</TD> <TD>Celda 2.3</TD> </TR> <TR> <TD>Celda 3.1</TD> <TD>Celda 3.2</TD> <TD>Celda 3.3</TD> </TR> </TABLE> </body> </html> <html> <head> <TITLE>Tablas</TITLE> </head> <body> <TABLE ALIGN="CENTER" WIDTH="200" BORDER="1"> <TR VALIGN="TOP" ALIGN="CENTER"> <TD> <P><A <P><A <P><A <P><A <P><A </TD> <TD> <P><A href="#1">1</A></P> <P><A href="#2">2</A></P> <P><A href="#3">3</A></P> </TD> </TR> <TR VALIGN="MIDDLE" ALIGN="LEFT"> <TD> <P><A href="#1">1</A></P> <P><A href="#2">2</A></P> <P><A href="#3">3</A></P> <P><A href="#4">4</A></P> <P><A href="#5">5</A></P> </TD> <TD> <P><A href="#1">1</A></P> <P><A href="#2">2</A></P> <P><A href="#3">3</A></P> </TD> </TR> </TABLE> </body> </html> <html> <head> <TITLE>Tablas</TITLE> </head> <body> <TABLE ALIGN="CENTER" WIDTH="300" BORDER="1"> <TR> <TH></TH> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> href="#1">1</A></P> href="#2">2</A></P> href="#3">3</A></P> href="#4">4</A></P> href="#5">5</A></P>

Juan Flix Mateos

22
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML


<TR> <TH>Rubn</TH> <TD>300</TD> <TD>500</TD> <TD>400</TD> </TR> <TR> <TH>Ana</TH> <TD>350</TD> <TD>600</TD> <TD>500</TD> </TR> <CAPTION ALIGN="TOP">Informe trimestral</CAPTION> </TABLE> </body> </html> <html> <head> <TITLE>Tablas</TITLE> </head> <body> <TABLE ALIGN="CENTER" WIDTH="300" BORDER="1"> <TR> <TD>Celda 1.1</TD> <TD>Celda 1.2</TD> </TR> <TR> <TD>Celda 2.1</TD> <TD>Celda 2.2</TD> <TD>Celda 2.3</TD> </TR> <TR> <TD>Celda <TD>Celda <TD>Celda <TD>Celda 3.1</TD> 3.2</TD> 3.3</TD> 3.4</TD>

Juan Flix Mateos

</TR> <CAPTION ALIGN="TOP">Nmero de celdas desigual</CAPTION> </TABLE> </body> </html> <html> <head> <TITLE>Tablas</TITLE> </head> <body> <TABLE ALIGN="CENTER" WIDTH="400" BORDER="1"> <TR> <TD>Celda 1.1</TD> <TD>Celda 1.2</TD> </TR> <TR> <TD> <TABLE ALIGN="CENTER" WIDTH="100%" BORDER="1"> <TR> <TD>Celda 2.1.1</TD> <TD>Celda 2.1.2</TD> <TD>Celda 2.1.3</TD> </TR> <TR> <TD>Celda 2.2.1</TD> <TD>Celda 2.2.2</TD> <TD>Celda 2.2.3</TD> </TR>

23
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML


</TABLE> </TD> </TR> <TR> <TD>Celda 3.1</TD> <TD>Celda 3.2</TD> </TR> <CAPTION ALIGN="TOP">Tablas anidadas en tablas</CAPTION> </TABLE> </body> </html>

Juan Flix Mateos

Nota: La anidacin de tablas dentro de otras tablas (como se muestra en el ejemplo inmediatamente anterior) es un recurso muy utilizado para crear la estructura general de pginas web.

Marcos
Los marcos son un recurso que permite establecer la estructura general de una pgina web. Los marcos son como ventanas dentro de una pgina web, y cada una de estas ventanas puede mostrar, a su vez, una pgina web diferente. El procedimiento general para utilizar marcos es el siguiente: 1. Crear una pgina web en la que exclusivamente se definen las caractersticas de los marcos (su tamao y posicin) y las direcciones de las pginas web que se desean mostrar en cada uno de ellos. Crear las pginas web que se desean mostrar en cada uno de los marcos. Estas pginas son como cualquier otra pgina web; no poseen ningn rasgo diferenciador por el hecho de ser pginas que se van a mostrar dentro de marcos.

2.

Las etiquetas de las que disponemos para definir la estructura general de los marcos son: <FRAMESET></FRAMESET>: Permite dividir la ventana del navegador o un marco en filas o columnas de marcos. Obsrvese que se ha indicado en filas o en columnas, pues con una misma etiqueta <FRAMESET> no podemos dividir la ventana del navegador (u otros marcos) en filas y columnas de nuevos marcos. <FRAME>: Permite indicar qu pgina web deseamos mostrar en cada uno de los marcos y otras caractersticas propias de cada marco. Esta etiqueta no requiere etiqueta de cierre.

A continuacin se recogen los atributos de la etiqueta <FRAMESET></FRAMESET>: BORDER: Indica el grosor en pxeles de los bordes de los marcos. FRAMEBORDER: Permite mostrar u ocultar el borde de los marcos. El valor 0 indica que no se mostrarn los bordes, mientras que el valor 1 indica qu si se mostrarn. COLS: Define el ancho de los marcos en que queremos dividir la ventana del navegador o un marco concreto (e implcitamente, tambin define el nmero de marcos que contendr la fila). Para definir estos anchos podemos indicar un valor absoluto en pxeles, un valor relativo en porcentaje, o el valor *, que indica que se utilice todo el espacio no ocupado por los dems marcos. 24
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

ROWS: Define el alto de los marcos en que queremos dividir la ventana del navegador o un marco concreto (e implcitamente, tambin define el nmero de marcos que contendr la columna). Para de finir estos altos podemos indicar un valor absoluto en pxeles, un valor relativo en porcentaje, o el valor *, que indica que se utilice todo el espacio no ocupado por los dems marcos.

A continuacin se recogen los atributos de la etiqueta <FRAME>: NAME: Indica el nombre que deseamos asignar al marco. Este nombre es imprescindible si queremos que el destino de un hipervnculo se muestre dentro de un marco concreto de la pgina, pues es el nico atributo del que disponemos para diferenciar unos marcos de otros. SRC: Indica la direccin de la pgina web que se desea mostrar dentro del marco. FRAMEBORDER: Al igual que el atributo correspondiente de la etiqueta <FRAMESET>, sirve para mostrar u ocultar el borde de este marco en concreto. El valor de este atributo prevalece sobre el correspondiente de la etiqueta <FRAMESET>. El valor 0 indica que no se mostrarn los bordes, mientras que el valor 1 indica qu si se mostrarn. MARGINHEIGHT: Indica el alto (en pxeles) de los mrgenes que deseamos dejar en la parte superior e inferior del marco. MARGINWIDTH: Indica el ancho (en pxeles) de los mrgenes que deseamos dejar en los laterales del marco. NORESIZE: Este atributo no acepta ningn valor. Su presencia indica que queremos negar al usuario la posibilidad de cambiar el tamao de los marcos arrastrando sus bordes. SCROLLING: Sirve para incluir o no una barra de desplazamiento si el contenido de la pgina web indicada mediante el atributo SRC no cabe dentro del marco. Los valores que admite son YES (muestra siempre la barra de desplazamiento), NO (no muestra nunca la barra de desplazamiento) y AUTO (muestra la barra de desplazamiento slo si es necesario).

A continuacin se muestran varios ejemplos de utilizacin de los atributos anteriores:


<html> <head> <TITLE>Marcos</TITLE> </head> <FRAMESET ROWS="50%,50%"> <FRAME NAME="superior" SRC="superior.html"> <FRAME NAME="inferior" SRC="inferior.html"> </FRAMESET> </html>

25
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML


<html> <head> <TITLE>Marcos</TITLE> </head> <FRAMESET ROWS="80%,*"> <FRAME NAME="superior" SRC="superior.html"> <FRAMESET COLS="50%,*"> <FRAME NAME="inferiorIzda" SRC="inferiorIzda.html"> <FRAME NAME="inferiorDcha" SRC="inferiorDcha.html"> </FRAMESET> </FRAMESET> </html> <html> <head> <TITLE>Marcos</TITLE> </head> <FRAMESET ROWS="33%,33%,*"> <FRAMESET COLS="25%,25%,25%,*"> <FRAME SRC="1.html"> <FRAME SRC="2.html"> <FRAME SRC="3.html"> <FRAME SRC="4.html"> </FRAMESET> <FRAMESET COLS="80%,20%"> <FRAME SRC="5.html"> <FRAMESET ROWS="25%,25%,25%,*"> <FRAME SRC="6.html"> <FRAME SRC="7.html"> <FRAME SRC="8.html"> <FRAME SRC="9.html"> </FRAMESET> </FRAMESET> <FRAME SRC="10.html"> </FRAMESET> </html>

Juan Flix Mateos

Nota: Obsrvese que en los ejemplos anteriores no se ha utilizado la etiqueta <BODY>, pues la pgina en la que se definen los marcos no posee realmente ningn contenido, sino simplemente una distribucin que ser ocupada por los contenidos presentes en otras pginas web. Anteriormente hemos aprendido cmo crear hipervnculos con la etiqueta <A>. Sin embargo, en aquel momento omitimos deliberadamente la explicacin de uno de los parmetros de esta etiqueta: TARGET. Este parmetro sirve para indicar que queremos mostrar el destino del hipervnculo en un marco concreto, en lugar de ocupando toda la ventana del navegador. En el siguiente ejemplo se pone de manifiesto el funcionamiento de este atributo. Marcos.html
<html> <head> <TITLE>TARGET</TITLE> </head> <FRAMESET ROWS="20%,80%"> <FRAME SRC="titulo.html"> <FRAMESET COLS="20%,80%"> <FRAME SRC="menu.html"> <FRAME NAME="contenido" SRC="intro.html"> </FRAMESET> </FRAMESET> </html>

26
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML Titulo.html


<HTML> <BODY> <IMG SRC="misAficiones.JPG"> </BODY> </HTML>

Juan Flix Mateos

Menu.html

<HTML> <BODY> <UL> <LI>Bicicleta de montaa</LI> <LI><A HREF="fotografia.html" TARGET="contenido">Fotografa</A></LI> </UL> </BODY> </HTML>

Fotografia.html

<HTML> <BODY> <IMG SRC="nikon.JPG"> </BODY> </HTML>

A pesar de la evidente flexibilidad de los marcos, no gozan de excesiva popularidad debido, entre otras causas, a las siguientes: Al utilizar los botones Atrs y Adelante del navegador para visualizar pginas ya visitadas, los resultados pueden nos ser los esperados si estamos navegando por un sitio web desarrollado con marcos. Al aadir un sitio con marcos a nuestra lista de favoritos estamos creando una referencia a la pgina de marcos, pero no a los contenidos de esos marcos. La impresin de las pginas con marcos no siempre produce los resultados esperados.

Mapas de imagen
Los mapas de imgenes son imgenes en las que podemos identificar zonas concretas para que acten como hipervnculos. Para que una imagen cualquiera se comporte como un mapa de imagen tenemos que incluir el atributo USEMAP dentro de su etiqueta <IMG>. Este atributo acepta como valor el nombre que asignemos a una seccin especial que tendremos que crear dentro de la pgina web para definir las zonas de la imagen que deseamos que acten como hipervnculo. Esta seccin especial se delimita 27
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

con la etiqueta <MAP></MAP>, y en su interior se incluyen etiquetas <AREA> para definir la forma, posicin y destino de las zonas de la imagen que actuarn como hipervnculos. La etiqueta <MAP></MAP> posee un nico atributo llamado NAME. Este atributo acepta como valor el nombre que deseemos asignar al mapa de imagen y que, como ya hemos indicado anteriormente, debe coincidir con el especificado en el atributo USEMAP de la etiqueta <IMG> (en este caso debe aparecer precedido del signo #). Los atributos de la etiqueta <AREA> son los siguientes: SHAPE: Indica la forma de la zona que queremos definir como hipervnculo. Los valores que admite este atributo son RECT (rectngulo), POLYGON (polgono), CIRCLE (crculo) y DEFAULT (que engloba todo el espacio que no pertenece a ninguna de las dems zonas). COORDS: Indica la posicin de la zona que queremos definir como hipervnculo mediante sus coordenadas expresadas en pxeles. Si la forma es un polgono, tendremos que especificar las coordenadas de cada uno de los vrtices; si es un rectngulo tendremos que especificar las coordenadas de dos vrtices diagonalmente opuestos; y si la forma es un crculo tendremos que especificar las coordenadas de su centro y su radio. HREF: Indica el destino del hipervnculo. NOHREF: Indica que no debe realizarse ninguna accin al hacer clic sobre esta zona.

El siguiente ejemplo aclara cmo se crea en la prctica un mapa de imagen.


<html> <head> <TITLE>Mapa de imagen</TITLE> </head> <BODY> <MAP name="coordenadas"> <AREA shape="POLYGON" COORDS="50,0,100,100,0,100" HREF="triangulo.html"> <AREA shape="CIRCLE" COORDS="150,150,50" HREF="circulo.html"> <AREA shape="RECT" COORDS="200,200,300,300" HREF="rectangulo.html"> <AREA shape="DEFAULT" NOHREF> </MAP> <IMG src="mapa.jpg" usemap="#coordenadas" border="0"> </BODY> </html>

Nota: Obsrvese que en este ejemplo hemos utilizado el atributo BORDER de la etiqueta <IMG> (que no haba sido mencionado anteriormente) para eliminar el borde que aparece, por defecto, alrededor de todas las imgenes que actan como hipervnculos.

Caracteres especiales
Para mostrar ciertos caracteres en una pgina web es necesario recurrir a sus entidades HTML o a sus cdigos ISO Latin-1. Por ejemplo, para mostrar el nombre de la ciudad Dsseldorf podramos utilizar cualquiera de las dos expresiones siguientes: 28
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

Entidad HTML: D&uuml;sseldorf Cdigo ISO Latin-1: D&#252;sseldorf.

En la siguiente tabla se recogen algunas de las entidades HTML y de los cdigos ISO Latin-1 ms utilizados.
CARCTER ESPECIAL "
(Est aqu! Aunque no lo vea)

ENTIDAD &iexcl; &iquest; &quot; &laquo; &raquo; &nbsp; &amp; &cent; &copy; &divide; &gt; &lt; &middot; &para; &plusmn; &pound; &reg; &sect; &yen; &aacute; &Aacute; &agrave; &Agrave; &acric; &Acirc; &aring; &Aring; &atilde; &Atilde; &auml; &Auml; &aelig; &AElig; &ccedil; &Ccedil; &eacute;

CDIGO &#161; &#191; &#34; &#171; &#187; &#160; &#38; &#162; &#169; &#247; &#62; &#60; &#181; &#183; &#182; &#177; &#163; &#174; &#167; &#165; &#225; &#193; &#224; &#192; &#226; &#194; &#229; &#197; &#227; &#195; &#228; &#196; &#230; &#198; &#231; &#199; &#233;

& > <

29
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

&Eacute; &egrave; &Egrave; &ecirc; &Ecirc; &euml; &Euml; &iacute; &Iacute; &igrave; &Igrave; &icirc; &Icirc; &iuml; &Iuml; &ntilde; &Ntilde; &oacute; &Oacute; &ograve; &Ograve; &ocirc; &Ocirc; &oslash; &Oslash; &otilde; &Otilde; &ouml; &Ouml; &szlig; &uacute; &Uacute; &ugrave; &Ugrave; &ucirc; &Ucirc; &uuml; &Uuml; &yuml;

&#201; &#232; &#200; &#234; &#202; &#235; &#203; &#237; &#205; &#236; &#204; &#238; &#206; &#239; &#207; &#241; &#209; &#243; &#211; &#242; &#210; &#244; &#212; &#248; &#216; &#245; &#213; &#246; &#214; &#223; &#250; &#218; &#249; &#217; &#251; &#219; &#252; &#220; &#255; &#180;

30
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

&#96;

Uno de los caracteres especiales ms utilizados es &nbsp; o &#160 (espacio no separable). Este carcter indica que no se puede partir una lnea justo delante o detrs de l. En el siguiente ejemplo hemos utilizado este carcter para unir cada boliche (grfico) a su opcin evitando que pueda quedar el boliche al final de una lnea y la opcin al principio de la siguiente. Sin usar &nbsp;
<html> <head> <TITLE>NBSP</TITLE> </head> <BODY> <H1><IMG src="diana.gif"> <A href="url1">Tiro con arco</A> <IMG src="diana.gif"> <A href="url2">Tiro con carabina</A></H1> </BODY> </html>

Usando &nbsp
<html> <head> <TITLE>NBSP</TITLE> </head> <BODY> <H1><IMG src="diana.gif">&nbsp;<A href="url1">Tiro&nbsp;con&nbsp;arco</A> <IMG src="diana.gif">&nbsp;<A href="url2">Tiro&nbsp;con&nbsp;carabina </A></H1> </BODY> </html>

Formularios
Los formularios HTML no son sino el equivalente en la Web de los formularios que estamos acostumbrados a rellenar en la vida real. Estos formularios estn compuestos por controles de distintos tipos, como cuadros de texto, listas de opciones excluyentes, listas de opciones no excluyentes, etc. Una ventaja interesante de los formularios HTML sobre sus equivalentes de la vida real es que podemos procesarlos automticamente. Por ejemplo, si hacemos una encuesta mediante un formulario, podemos contabilizar los votos en un sentido u otro de forma automtica. Este procesamiento automtico del formulario se denomina accin. En la siguiente figura se muestra un ejemplo sencillo de formulario HTML.

31
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

Otra cualidad interesante de los formularios HTML es que estn perfectamente integrados con ciertos lenguajes de programacin, como JavaScript, de modo que no tenemos que esperar al final para procesar todo el formulario de una vez, sino que podemos crear formularios dinmicos que pueden interactuar con el usuario a medida que este los rellena (por ejemplo, indicndole que ha introducido un nmero de tarjeta de crdito no vlido, o recordndole que se ha olvidado de rellenar algn campo). Para crear un formulario dentro de una pgina web simplemente tenemos que utilizar la etiqueta <FORM></FORM>. Los atributos de esta etiqueta son los siguientes: NAME: Contiene el nombre del formulario. Este nombre puede ser necesario para aplicar hojas de estilo (CSS) al formulario o para hacer referencia a l desde guiones JavaScript. ACTION: Indica la ruta de acceso al programa (tambin denominado agente de procesamiento) que se va a encargar de procesar el formulario. Por ejemplo, puede contener la ruta de acceso a un programa PHP que se encargue de contabilizar los votos de una encuesta y almacenarlos en una base de datos, o una instruccin para enviar el contenido del formulario por correo electrnico a una direccin determinada (en este caso, el valor de ACTION seguira la sintaxis mailto:direccin_de_email. METHOD: Indica qu mtodo debe utilizarse para enviar el formulario al agente. Existen dos posibilidades: GET y POST. GET enva el contenido del formulario en la propia ruta de acceso al agente, utilizando el signo ? como separador. Por el contrario, el mtodo POST enva los datos de forma independiente. Normalmente los servidores web tienen limitada la longitud de las direcciones URL, por lo que con el mtodo GET no puede enviarse una cantidad de datos exagerada. Como norma general, suele utilizarse el mtodo GET cuando la informacin del formulario no se utiliza para modificar otra informacin (por ejemplo, para realizar una bsqueda en una base de datos), y el mtodo POST cuando la informacin del formulario si se utiliza para modificar otra informacin (por ejemplo, se almacena la informacin del usuario en una base de datos). ENCTYPE: El contenido del formulario llega al servidor como un flujo de informacin (sea cual sea el mtodo utilizado: GET o POST). El servidor es capaz de reconocer ciertos tipos de datos (como imgenes, vdeos, sonidos, ...) gracias a que tiene configurados los tipos MIME (o tipos de medios). Esta configuracin de tipos MIME indica al servidor cmo debe tratar cada tipo de informacin. Mediante el atributo ENCTYPE indicamos al servidor qu tipo de datos le estamos enviando a travs del formulario. Algunos valores posibles son: o application/x-www-form-urlencoded: Es el valor que se aplica por defecto, pero no es vlido cuando se envan archivos junto con el formulario. o multipart/form-data: Indica al servidor que el formulario contiene distintos tipos de datos (como textos, imgenes, ...) y le advierte para que los identifique mediante los tipos MIME que tenga configurados. o text/plain: El contenido del formulario se enva al servidor como texto plano, sin ningn tipo de formato. Esta opcin suele ser interesante cuando la accin del formulario es enviarse por correo electrnico en lugar de ser procesado por un agente de procesamiento. 32
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

Los tipos de controles de los que disponemos para crear formularios HTML son los siguientes: Botones de accin. Sirven para enviar el formulario al agente, eliminar del formulario toda la informacin introducida por el usuario o ejecutar algn guin del lado del cliente (por ejemplo, un guin JavaScript que basndose en los datos introducidos por el usuario calcule la mensualidad de una hipoteca). En HTML se pueden crear botones sencillos que a lo sumo contengan una imagen, y botones con contenido que pueden tener en su interior cualquier otro elemento (animaciones, vdeos, ...). Para enviar la informacin del formulario al servidor tenemos que incluir en el propio formulario un botn de accin especial denominado botn submit. Existe otro tipo de botn de accin especial, denominado reset, que al ser pulsado devuelve todos los controles a su estado inicial. Casillas de activacin. Permiten indicar al usuario si desea seleccionar una opcin, con independencia de que adems desee seleccionar otras. Botones de opcin. Permiten seleccionar al usuario una, y slo una, opcin de un grupo de posibilidades. Cuadros de texto. Son casillas en las que el usuario puede escribir datos, como su nombre o el nmero de su tarjeta de crdito. Estos cuadros de texto pueden estar compuestos por una o ms lneas. Adems, existen unos cuadros de texto especiales, denominados cuadros de contrasea, en los que no se muestran los caracteres escritos por el usuario, sino un carcter nico (por ejemplo, un asterisco), para evitar que la informacin pueda ser leda por terceras personas que se encuentren alrededor del usuario. Selectores de archivos. Permiten al usuario seleccionar un archivo de su propio equipo para enviarlo junto con el formulario. Controles ocultos. Son datos que el creador de la pgina web puede insertar en el formulario para que sean procesados por el agente, pero sin que se muestren en pantalla. Por ejemplo, imaginemos que hemos creado una pgina web que permite a cada usuario crearse un lbum de fotografas. En un campo oculto del formulario podemos indicar el tamao mximo de archivo que queremos que el usuario est autorizado a subir al servidor. Este campo puede ser ledo por un agente PHP que se encargar de aceptar o rechazar la fotografa en funcin de su tamao. Cuadros de listas desplegables y desplazables. Cuando tenemos que mostrar muchas opciones al usuario para que elija una o ms de ellas, en lugar de hacerlo mediante casillas de activacin o botones de opcin, suele ser preferible utilizar un cuadro de lista desplegable, para evitar que el formulario sea demasiado extenso. Estos cuadros de lista pueden ser de dos tipos: desplegables o desplazables. En los cuadros de lista desplegables slo se muestra una opcin, y el usuario tiene que hacer clic sobre un botn que hay a su derecha para desplegar una lista con todas las dems opciones disponibles. En los desplazables, se muestra un nmero determinado de opciones y el usuario puede utilizar una barra de desplazamiento para acceder al resto de las opciones disponibles.

Para la creacin de los controles disponemos de las siguientes etiquetas:

33
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

<INPUT>: Permite crear cuadros de texto de una sola lnea, casillas de activacin, botones de opcin, botones de accin, selectores de archivos y controles ocultos. <BUTTON></BUTTON>: Slo permite crear botones de accin, pero dentro de estos botones puede incluirse cualquier tipo de contenido, como imgenes. <SELECT> </SELECT>, <OPTION> </OPTION> y <OPTGROUP> </OPTGROUP>: Permite crear cuadros de lista desplegables o desplazables en los que el usuario puede seleccionar una o ms opciones. <TEXTAREA></TEXTAREA>: Permite crear cuadros de texto de ms de una lnea.

En la siguiente figura se muestran todos los tipos de controles que podemos insertar en un formulario (excepto el control oculto, pues ya hemos comentado que estos controles no se muestran en la ventana del navegador):

34
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

A continuacin vamos a explicar los atributos de cada una de las etiquetas con las que crearemos los controles: <INPUT>. Con esta etiqueta se pueden crear todos los tipos de controles, excepto los cuadros de texto con varias lneas, los cuadros de lista (desplegables y desplazables) y los botones con contenido (aunque admite asignar una imagen a los botones de tipo submit). <INPUT> no requiere etiqueta de cierre y sus atributos son los siguientes: o TYPE: Indica el tipo de control que deseamos crear. Los valores que admite este atributo son: TEXT (para crear un cuadro de texto), PASSWORD (para crear un cuadro de contrasea), CHECKBOX (para crear una casilla de activacin), RADIO (para crear un botn de opcin), SUBMIT (para crear un botn de accin de tipo submit), IMAGE (para crear un botn de accin de tipo submit que contenga una imagen), RESET (para crear un botn de accin de tipo reset), BUTTON (para crear un botn de accin genrico), FILE (para crear un control de seleccin de archivo) y HIDDEN (para crear un control oculto). o NAME: Indica el nombre del control. Este nombre es til para identificar el control mediante lenguajes de programacin del lado del cliente (como JavaScript) y del lado del servidor (como PHP). Todos los botones de opcin que sean excluyentes deben tener el mismo nombre. o VALUE: Indica el valor/contenido inicial del control. o CHECKED: Este parmetro no requiere ningn valor y se utiliza para indicar si un control de tipo casilla de activacin o botn de opcin debe mostrarse inicialmente seleccionado. o SIZE: Indica el tamao del control. Si se trata de un control de tipo texto o contrasea, este tamao se expresa en nmero de caracteres; por el contrario, para todos los dems tipos de controles, el tamao se expresa en pxeles. o MAXLENGTH: Indica el nmero mximo de caracteres que puede contener un control de tipo cuadro de texto o contrasea. Tenga en cuenta que este valor puede ser mayor que el del atributo SIZE. o SRC: Indica la ruta de acceso a la imagen que se utilizar en el botn de tipo submit si el atributo TYPE tiene asignado el valor IMAGE. o TABINDEX: Este parmetro admite como valor un nmero entero que indica el orden de tabulacin del control dentro del formulario. Podemos pasar de un control a otro de los formularios pulsando la tecla TABULADOR y este parmetro establece el orden de navegacin dentro de los controles. <BUTTON></BUTTON>: Esta etiqueta nos permite crear botones de accin con cualquier tipo de contenido. Los botones creados con <INPUT> slo pueden contener una etiqueta (indicada mediante el valor del atributo VALUE) y, a lo sumo, una imagen si se trata de un botn de tipo submit. Sin embargo, la etiqueta <BUTTON></BUTTON> delimita el contenido de todo lo que queramos incluir en el botn utilizando las etiquetas HTML habituales, como <IMG>. Los atributos de esta etiqueta son: o NAME: Indica el nombre del control. 35
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

o VALUE: Indica el valor que se enva al servidor al pulsar el botn de tipo submit. En este caso, a diferencia de lo que ocurre con los botones creados con <INPUT>, el atributo VALUE no indica el contenido del botn. o TYPE: Indica qu tipo de botn queremos crear. Los valores posibles son: BUTTON (crea un botn de accin normal), SUBMIT (crea un botn de accin de tipo submit) o RESET (crea un botn de accin de tipo reset). o TABINDEX: Indica el orden de tabulacin del botn dentro del formulario. <TEXTAREA></TEXTAREA>: Este control sirve para crear cuadros de texto con varias lneas. Sus atributos son los siguientes: o NAME: Indica el nombre del control. o ROWS: Indica el nmero de filas de texto que se mostrarn en el cuadro de texto. o COLS: Indica el nmero de caracteres que se mostrarn en cada fila de texto. o READONLY: Indica que el usuario no puede modificar el contenido del control. Puede resultar til para mostrar grandes cantidades de informacin, como contratos. Si el contenido del control excede al nmero de lneas definido en ROWS, aparece una barra de desplazamiento. o TABINDEX: Indica el orden de tabulacin del control dentro del formulario. <SELECT></SELECT>: Esta etiqueta se utiliza para delimitar un cuadro de lista (desplegable o desplazable). Sus atributos son los siguientes: o NAME: Indica el nombre del control. o SIZE: Indica el nmero de opciones que se mostrarn dentro del control. En un cuadro de lista desplegable este valor debe ser 1. o MULTIPLE: Este atributo no requiere ningn valor e indica que el usuario puede seleccionar ms de una opcin del cuadro de lista (para seleccionar opciones no adyacentes tendr que mantener pulsada la tecla CONTROL mientras hace clic sobre cada una de ellas, mientras que para seleccionar opciones adyacentes podr hacer clic sobre la primera de ellas y mantener pulsada la tecla MAYS mientras hace clic sobre la ltima de las opciones). o TABINDEX: Indica el orden de tabulacin del control dentro del formulario. <OPTION></OPTION>: Esta etiqueta se utiliza para crear cada una de las opciones que se mostrarn dentro de un cuadro de lista delimitado por la etiqueta <SELECT></SELECT>. Sus atributos son los siguientes: o SELECTED: Este atributo no requiere ningn valor e indica que la opcin debe estar inicialmente seleccionada.

36
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML

Juan Flix Mateos

o VALUE: Indica qu valor se enviar al agente de procesamiento si est seleccionada la accin cuando se pulsa el botn de tipo submit. <OPTGROUP></OPTGROUP>: Esta etiqueta simplemente sirve para agrupar varias opciones relacionadas bajo un mismo ttulo, de modo que resulte ms sencillo para el usuario localizar una opcin concreta. Su nico atributo de inters para nosotros es: o LABEL: Indica el ttulo bajo el que se englobarn todas las opciones creadas con la etiqueta <OPTION></OPTION> y anidadas dentro de la etiqueta <OPTGROUP></OPTGROUP>. En los siguientes ejemplos se pone se manifiesto el funcionamiento de todas estas etiquetas y atributos. Formulario sencillo que se enva por correo electrnico
<HTML> <BODY> <FORM action="mailto:destino@url.com" method="post" enctype="text/plain"> <P>Nombre:<INPUT name="nombre" type="text"></P> <INPUT type="submit" value="Enviar por e-mail"> </FORM> </BODY> </HTML>

El mensaje de correo electrnico que se enviara a la direccin destino@url.com sera:


nombre=Juanfe

Los tres tipos de cuadros de texto (normales, de contrasea y multilnea)


<HTML> <BODY> <FORM action="mailto:url@url.com" method="post" enctype="text/plain"> <P>Nombre:<INPUT name="nombre" type="text"></P> <P>Contrasea:<INPUT name="contrasea" type="password"></P> <TEXTAREA name="consulta" rows="3" cols="30">--Esquiba aqu su consulta--</TEXTAREA> <P><INPUT type="submit" value="Enviar por e-mail"></P> </FORM> </BODY> </HTML>

El mensaje de correo electrnico que se enviara a la direccin url@url.com sera:


nombre=Juan Flix contrasea=juanfe

37
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML


consulta=Cmo se enva un formulario por correo electrnico?

Juan Flix Mateos

Casillas de activacin y botones de opcin


<HTML> <BODY> <FORM action="mailto:url@url.com" method="post" enctype="text/plain"> <P>Seleccione sus aficiones:</P> <P><INPUT name="MB" type="checkbox" value="S">Bicicleta de montaa</P> <P><INPUT name="FO" type="checkbox" value="S">Fotografa</P> <P><INPUT name="LE" type="checkbox" value="S">Lectura</P> <P>Indique su profesin:</P> <P><INPUT name="profesin" type="radio" value="ES">Estudiante</P> <P><INPUT name="profesin" type="radio" value="FU">Funcionario</P> <P><INPUT name="profesin" type="radio" value="DE">Desempleado</P> <P><INPUT type="submit" value="Enviar por e-mail"></P> </FORM> </BODY> </HTML>

El mensaje de correo electrnico que se enviara a url@url.com sera:


MB=S LE=S profesin=FU

Botones de accin
<HTML> <BODY> <CENTER> <FORM action="mailto:url@url.com" method="post" enctype="text/plain"> <P>Botones creados con &lt;INPUT&gt;:</P> <P><INPUT name="BotonNormal" type="BUTTON" value="Botn normal"></P> <P><INPUT name="BotonReset" type="RESET" value="Restituir formulario"></P> <P><INPUT name="BotonSubmit" type="SUBMIT" value="Enviar Formulario"> <P><INPUT name="BotonImagen" type="IMAGE" value="Botn con imagen" src="diana.gif"></P> <P>Botones creados con &lt;BUTTON&gt;: <P><BUTTON name="BotonNormal2" value="BN2" type="BUTTON"> <P>Dentro de un botn de tipo &lt;BUTTON&gt;<BR> podemos incluir todo tipo de elementos HTML:<BR> <UL> <LI>Primer elemento</LI> <LI>Segundo elemento</LI> <UL> <LI>2.1</LI><LI>2.2</LI>

38
Versin 1.2.0

Introduccin a la Web y al lenguaje HTML


</UL> </UL> <TABLE border="1"> <TR> <TD>1.1</TD> <TD>1.2</TD> </TR> <TR> <TD>2.1</TD> <TD>2.2</TD> </TR> </TABLE> <IMG src="boton.gif"> </BUTTON> </FORM> </CENTER> </BODY> </HTML>

Juan Flix Mateos

Cuadros de lista (desplegables y desplazables)


<HTML> <BODY> <CENTER> <FORM action="mailto:url@url.com" method="post" enctype="text/plain"> <P>Cuadro de lista desplegable</P> <P><B>Indique su edad:</B></P> <SELECT name="desplegable" size="1"> <OPTION value="<15">&lt;15</OPTION> <OPTION value="15a20">15-20</OPTION> <OPTION value="21a30">21-30</OPTION> <OPTION value="31a40" SELECTED>31-40 </OPTION> <OPTION value="41a50">41-50</OPTION> <OPTION value="51a60">51-60</OPTION> <OPTION value="61a70">61-70</OPTION> <OPTION value="71a80">71-80</OPTION> <OPTION value=">80">&gt;80</OPTION> </SELECT> <P>Cuadro de lista desplazable</P> <P><B>Indique sus aficiones:</B></P> <SELECT name="desplazable" size="5" MULTIPLE> <OPTGROUP label="Naturaleza"> <OPTION value="Senderismo"> Senderismo</OPTION> <OPTION value="Escalada"> Escalada</OPTION> <OPTION value="Natacin"> Natacin</OPTION> </OPTGROUP> <OPTGROUP label="Tecnologa"> <OPTION value="Fotografa"> Fotografa</OPTION> <OPTION value="Informtica"> Informtica</OPTION> <OPTION value="Imagen">Imagen</OPTION> </OPTGROUP> </SELECT> <P><INPUT type="SUBMIT" value="Enviar"> </FORM> </CENTER> </BODY> </HTML>

El mensaje de correo electrnico que se enviara a url@url.com sera:


desplegable=21a30 desplazable=Senderismo desplazable=Natacin

39
Versin 1.2.0

You might also like