Manual HTML

Autora: Lola Cárdenas Luque [email protected] Última actualización: 7 de noviembre de 2000 Este curso pertenece a la web:

http://rinconprog.metropoliglobal.com/

Curso de HTML Lola Cárdenas Luque

http://rinconprog.metropoliglobal.com - 2 -

Curso de HTML

Este curso pretende servir de iniciación/ampliación sobre el lenguaje de especificación de marcas HTML, tan de moda hoy en día, para diseñar documentos del web.

Por el momento, estos son los capítulos que han ido apareciendo:

Capítulo 1 Nociones básicas y estructura de un documento HTML

Capítulo 2 Formateo del texto

Capítulo 3 Listas y algunas extensiones de directivas vistas

Capítulo 4 URL's y Enlaces

Capítulo 5 Tablas

Capítulo 6 Frames

Capítulo 7 Formularios

Capítulo 8 Tipos MIME e inclusión de otros medios

Capítulo 9 Imágenes Sensibles

Capítulo 10 Applets Java

Ultima modificación: 7 de noviembre de 2000 Autor: Lola Cardenas Luque



Curso de HTML

1. Nociones básicas y estructura de un documento HTML

HTML (HyperText Markup Language) no es más que un lenguaje basado en marcas para la especificación de documentos que usan el protocolo de transmisión de hipertexto (http) del WWW.

Todos los documentos HTML tienen un formato de texto llano (no es más que ASCII puro y duro), lo que quiere decir que con cualquier editor podemos crearlos. También existen programas más sofisticados que te permiten crearlos de forma visual (luego se encargan ellos de grabar los archivos correspondientes), pero si te decantas por ahí, este NO es tu curso, aunque, bien mirado, el saber no ocupa lugar O;-)

Esto es para quien use el Edit, el NotePad, el vi... o quien quiera retocar a mano algo de lo que haya hecho con un editor visual de estos WYSIWYG que tanto están de moda por ahí. Vamos, para todos O;)

Por o tra parte, si queremos incluir imágenes (más adelante veremos cómo), también necesitaremos de algún programa de dibujo y retoque para crearnos nuestras imágenes. Además, ha de poder grabarlas en formato GIF o JPG (o en formato PNG; HTML 4.0 lo reconoce).

Por supuesto, necesitamos un programa cliente para visualizar las páginas, como los famosos Netscape e Internet Explorer (aunque no son los únicos).

Para especificar la apariencia de la información que queremos mostrar en nuestras páginas, partimos pues de la base de un documento ASCII con todo el contenido de la información que se va a incluir en la página, y, posteriormente, se da formato a los mismos usando códigos o directivas especiales que regulan su apariencia.

Me explico: tú escribes el texto que quieres poner en la página. Esta es la base de que partes. Una vez que lo tienes, piensas, "veamos, la primera línea quiero que salga en negrita, el tercer párrafo en cursiva, aquí quiero una afoto, no me vendría mal poner un link en este apartado..." Y entonces te pones manos a la obra con los códigos de formateo.

Seguramente no lo harás así (yo no lo hago así), si no que directamente escribirás las directivas y el texto a medida que haces el trabajo.

Estas directivas tienen una forma un tanto especial que muy pronto te serán familiares: están encerrados por los símbolos < > Por ejemplo, <HEAD> es una directiva HTML.

En la especificación del HTML hay numerosos códigos de formato, que normalmente se usan por parejas delimitando la parte del documento que se ve afectado por su acción. Si los códigos van por parejas, la manera de distinguir cuándo empiezas de cuándo acabas es porque, en los que significan "final", el código va entre </ >

Por ejemplo, el código I significa cursiva (de "Italic"). Si quieres que algo te salga en cursiva, pones:

<I> Lo que ponga es este trozo me sale en cursiva </I> y lo que ponga en este otro no.

Con lo que obtienes:

Lo que ponga es este trozo me sale en cursiva y lo que ponga en este otro no.

<I> significa: "empieza la cursiva" </I> significa: "acaba la cursiva"



No todas las directivas van emparejadas: hay algunas acciones de formato que sólo tienen efecto en el sitio en el que se ponen. Aquí sólo necesitamos poner un código de formato.

Por ejemplo, el código HR significa "Horizontal Rule", así, si ponemos en algún punto

<HR>

veremos en el navegador, como resultado, una línea horizontal "incrustada" con el fondo de la página.

Es un ejemplo de directiva NO emparejada.

Al navegador le es indiferente, a la hora de interpretar tu documento HTML, el que pongas las directivas en minúsculas que en mayúsculas. Mi sugerencia es que las pongas en mayúsculas, así como que indentes un poquito el texto, para que te resulte legible y no te cueste situarte en posteriores modificaciones y/o actualizaciones.

Debes tener presente, además, que los espacios, tabuladores, retornos de carro, etc, no tienen efecto sobre el formato del texto. Existen directivas para poder hacer estas cosas.

Antes de empezar, un consejo: no uses caracteres cuyo código ASCII esté por encima del 127, como acentos, eñes, ¿, ¡ y otros. Si quieres que aparezcan en la página, ya se explicará cómo hacerlo. Hay navegadores que si se encuentran con uno de estos caracteres, no lo entienden, y en su lugar salen caracteres extraños.

Y ahora, ya, entramos en materia.

Estructura de un documento HTML

Para no liar a los programas clientes Web (cada uno identifica el tipo de documento de una forma, bien mirando la extensión, bien buscando identificadores), indicaremos de forma *explícita* que el documento es de tipo HTML. Para eso tenemos las directivas <HTML> y </HTML>, que las pondremos al principio y al final del archivo, respectivamente. Además, el estándar dice que debe ponerse una cabecera ANTES de esta directiva, que dependerá de la versión de HTML que vayas a usar. Por ejemplo, si quieres usar la versión 4.01 de HTML, la cabecera será: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Todos los documentos HTML constan de DOS partes fundamentales; la CABECERA y el CUERPO. En la cabecera indicamos datos sobre nuestro documento, y en el cuerpo está el documento que queremos que salga en el navegador.

Cabecera

Es todo lo que haya entre las directivas <HEAD> y </HEAD>. Dentro de ella, podemos especificar varias cosas, como el título de la página.

Esto lo conseguimos escribiéndolo entre las directivas <TITLE> ... </TITLE>. Por ejemplo, si ponemos

<TITLE> Esto es un ejemplo </TITLE>

en la barra de título del navegador aparece la frase "Esto es un ejemplo" Si, además, alguien guarda tu página dentro de su "bookmark" (libro de marcas, o libreta de direcciones), lo que haya en la directiva TITLE será lo que se almacenará como título de la página. Si no especificas título alguno, sólo guardará la dirección de tu página.

Hay otros elementos que pueden incluirse en la cabecera, pero quedan para más adelante, cuando se hayan introducido unos pequeños conceptos previos.



Cuerpo

Es todo lo que hay entre las directivas <BODY> ... </BODY> Aquí es donde escribimos nuestra página web, dándole la apariencia que queramos.

Veamos algunas cosas que podemos hacer con el texto.

Por ejemplo, centrarlo. Para ello, usamos las directivas <CENTER> ... </CENTER> Así, lo siguiente:

<CENTER> Este texto sale centrado </CENTER>

produce como resultado:

Este texto sale centrado

También podemos querer producir un salto de línea, o de párrafo, pues, como hemos dicho antes, al navegador le da igual que pongas

Estoy probando con los saltos de linea

él mostrará

Estoy probando con los saltos de linea

Para producir un salto de línea, tenemos la directiva <BR>. Esta es una de esas directivas que no tiene pareja. Así, lo siguiente:

Sigo probando <BR> con los saltos <BR> de linea

da como resultado:

Sigo probando con los saltos de linea

Por otro lado, si queremos producir un salto de párrafo, lo haremos con la directiva <P>. Por ejemplo, con las siguientes líneas:

Ahora estoy probando <BR> con los saltos de parrafo <P> Sigo escribiendo en otro parrafo :-)

nos da como resultado:

Ahora estoy probando con los saltos de parrafo

Sigo escribiendo en otro parrafo :-)

Otra cosa interesante e importante son los encabezados para las secciones. En el lenguaje HTML se definen 6 niveles de encabezados, numerados del 1 al 6, según tamaños decrecientes.

Aparecen usando tipos de letra más grandes o enfatizados que el texto normal del documento, salvo los niveles 5 y 6, que normalmente aparecen con un tamaño inferior al del texto normal.

Por ejemplo:

<H1> Encabezado más grande </H1>

producirá una salida como:

Encabezado más grande

Veamos los distintos encabezados:

Encabezado de nivel 1






Por último: para estructurar nuestro documentos, puede ser útil poner comentarios que no aparezcan en la página, en los que anotemos algo que nos sea de utilidad. Esto lo podemos hacer con el uso de la directiva 

Por ejemplo:  no mostrará nada en el navegador.

En la siguiente entrega haré una clasificación de acciones que pueden hacerse para dar formato al texto y a los párrafos.

Todo lo dicho sobre la estructura de un documento HTML lo podemos resumir en el siguiente esquema:

Esquema de la estructura de un documento HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML>

<HEAD>  <TITLE> </TITLE> </HEAD>

<BODY>  </BODY>

</HTML>

Con esto ya podeis ir empezando a hacer vuestras páginas web. Animo, no es difícil ;-)

Como ejercicio, podeis hacer una página sencilla que tenga como título "Mi primera pagina web", con una cabecera de nivel 2 en la que ponga "Primera prueba", a continuación una línea horizontal, y un texto a vuestra elección, que conste de DOS párrafos (creo que queda claro que estoy pidiendo un salto de párrafo ;)), uno de los cuales debe aparecer centrado.



Curso de HTML

2. Formateo del texto

Empezamos nuestra segunda entrega viendo todas las opciones que tenemos para formatear el texto:

Encabezados de secciones

Este punto ya lo vimos en la pasada entrega. Se trata de las directivas <Hn>...</Hn> , donde n es un número natural del 1 al 6.

Formato de caracteres

Para esto, vamos a hablar un poco de los dos tipos de estilos que tenemos en HTML: el estilo lógico y el estilo físico.

Con el estilo lógico se da formato al texto según su semántica, con el estilo físico se especifica cuál debe ser exactamente la apariencia final del texto.

Veamos un ejemplo para entenderlo mejor: queremos que una frase sea una definición (estilo lógico). Cada navegador dará una apariencia concreta a dicha frase según lo que tenga en sus opciones sobre cómo ha de ser el texto de una definición; la mayoría de las veces, esta frase aparecerá en cursiva. Sin embargo, podemos indicar directamente que la frase ha de aparecer en cursiva; esto será el estilo físico.

Otro ejemplo: los encabezados, de los que ya hablamos, son formatos lógicos, lo que quiere decir que su apariencia final dependerá de la configuración del navegador.

Pongo a continuación las distintas directivas de formato de texto, según el estilo sea lógico o físico:

Formatos físicos:

Nombre / tipo Códigos

Negrita <B> ... </B>

Cursiva <I> ... </I>

Subrayado <U> ... </U>

Teletipo (fuente paso fijo) <TT> ... </TT>

Tachado <STRIKE> ... </STRIKE>

Formatos lógicos:

Nombre / tipo Códigos

Cita <CITE> ... </CITE>

Código <CODE> ... </CODE>

Definición <DFN> ... </DFN>

Enfasis <EM> ... </EM>

Grueso <STRONG> ... </STRONG>

Palabra clave <KEY> ... </KEY>

Caracteres especiales



Para poder incluirlos, usamos unos códigos especiales precedidos por el símbolo &. Estos códigos se llaman secuencias de escape; entre ellos, tenemos secuencias que representan algunos caracteres españoles. Veamos una tabla con unos cuantos de ellos:

Secuencia de escape Carácter

á á é é

í í ó ó

ú ú ñ ñ

É É

à à ä ä

î î ç ç

< <

> > & &

" " ESPACIO

¿ ¿

¡ ¡

Las secuencias de escape DEBEN estar siempre en MINUSCULAS y ACABAR EN PUNTO Y COMA, aunque haya navegadores que las reconozcan en mayúsculas y sin punto y coma.

Formato de párrafos

Códigos no pareados

Estos ya los vimos en la pasada entrega, son:

Párrafo: <P> Retorno de carro: <BR> Línea horizontal: <HR>

Códigos pareados

Preformato: <PRE> ... </PRE>

Con esto, indicamos que el texto que incluyamos entre estas directivas ha de aparecer TAL CUAL aparece en el archivo html, respetando tanto las tabulaciones como los espacios en blanco y los retornos de carro. El texto aparecerá representado con una fuente no TrueType.

Podemos, por ejemplo, hacer tablas con la ayuda de estas directivas, aunque no muy vistosas.

Bloque de texto: <BLOCKQUOTE> ... </BLOCKQUOTE>

Nos permite sangrar el texto hacia la derecha. Podemos anidarlos.

Sobre anidamiento de directivas



Como más de alguno habreis imaginado, de alguna manera podremos conseguir, por ejemplo, texto en negrita y cursiva, o negrita, cursiva y subrayado, u otras combinaciones. Esto lo podemos conseguir anidando las directivas. Para ello, hemos de tener en cuenta que hemos de cerrar en último lugar la que hayamos abierto primero.

Por ejemplo:

<B><I> Este texto sale en negrita y en cursiva</I></B>

dará lugar a la aparición en el navegador de lo siguiente:

Este texto sale en negrita y en cursiva

O también podemos hacer:

<U><B><I> Texto en negrita, cursiva y subrayado </I></B></U>

cuya salida en el navegador es:

Texto en negrita, cursiva y subrayado

Pero no podemos intercalar códigos de forma alterna, ya que cada navegador lo interpretará como quiera, consiguiendo un efecto que no queremos. Por poner un ejemplo, podeis probar qué efecto conseguis con IExplorer y Netscape con este trozo de texto:

<B> Texto con <I> un formato </B> incorrecto </I>

Lo normal sería que la palabra "incorrecto" apareciera sin negrita y en cursiva, pero esto no es así. Como podeis comprobar, aparece lo siguiente:

Texto con un formato incorrecto

Y esto es todo en cuanto al formato del texto :)

En la próxima entrega, ya hablamos de listas y algunas extensiones al formato estándar.




Curso de HTML

3. Listas y algunas extensiones de directivas vistas

LISTAS

En HTML, tenemos tres tipos de listas: no numeradas, numeradas y listas de definiciones. De la misma manera que con la mayoría de las directivas vistas, para indicar el principio y el fin de una lista, usaremos directivas pareadas. Además, para indicar que vamos a empezar con un elemento nuevo de la lista, tenemos una directiva no pareada. Vamos a verlos, para que quede más claro.

Listas no numeradas

Vienen delimitadas por las directivas <UL> ... </UL>, y al principio de cada elemento, usaremos la directiva <LI>. Por defecto, cada elemento viene marcado con un círculo.

Listas numeradas

Vienen delimitadas por las directivas <OL> ... </OL>, y al principio de cada elemento, usaremos la directiva <LI>. Por defecto, la numeración es con números (valga la redundancia).

Listas de definición

Vienen delimitadas por las directivas <DL> ... </DL>. Las listas de definición constan de pares de elementos del tipo nombre -definición. En cada par nombre-definición se usan dos directivas específicas:

<DT> se antepone al nombre del término, y <DD> se antepone a la correspondiente definición.

Podemos anidar listas, aunque estas sean de distintos tipos. Podemos, también, cambiar la forma de los elementos de una lista.

Por ejemplo, en las listas no numeradas, en lugar de que aparezca un círculo, podemos elegir entre un círculo, un cuadrado y un disco. Para ello, dentro de la directiva <UL> añadimos la opción TYPE, siendo los posibles valores DISC, SQUARE y CIRCLE.

Ejemplo de lista no numerada:

<UL TYPE="SQUARE"> <LI> Elemento 1 de la lista. <LI> Elemento 2 de la lista. </UL>

Con esto, obtendremos como resultado:

• Elemento 1 de la lista. • Elemento 2 de la lista.

En las listas numeradas, podemos elegir cómo será la numeración: si con números, letras (mayúsculas o minúsculas) o romama (también mayúsculas o minúsculas). Además, podemos elegir el valor de inicio de la numeración.

Para la numeración arábiga (los números de toda la vida) no hay que especificar nada.

Para la numeración alfanumérica:

• Mayúsculas: Añadimos TYPE="A" en la directiva <OL> • Minúsculas: Añadimos TYPE="a" en la directiva <OL>

Para la numeración romana:

• Mayúsculas: Añadimos TYPE="I" en la directiva <OL> • Minúsculas: Añadimos TYPE="i" en la directiva <OL>

Y para elegir el valor de inicio, añadimos START="valor_de_inicio" en la directiva <OL>.

Veamos un ejemplo en el que voy a aprovechar para anidar listas :)

<UL TYPE="SQUARE"> <LI> Soy el elemento 1 <OL TYPE="A" START="3">  <LI> Soy el elemento 1.1 <LI> Soy el elemento 1.2 </OL> <LI> Soy el elemento 2 <LI> Soy el elemento 3 <UL TYPE="DISC"> <LI> Soy el elemento 3.1 <UL TYPE="CIRCLE"> <LI> Soy el elemento 3.1.1 <LI> Soy el elemento 3.1.2 </UL> <LI> Soy el elemento 3.2 <OL START="42"> <LI> Soy el elemento 3.2.1 <LI> Soy el elemento 3.2.2 </OL> </UL> </UL>

Con todo esto, obtendremos la siguiente salida en el navegador:

• Soy el elemento 1 C. Soy el elemento 1.1 D. Soy el elemento 1.2

• Soy el elemento 2 • Soy el elemento 3

o Soy el elemento 3.1 § Soy el elemento 3.1.1 § Soy el elemento 3.1.2

o Soy el elemento 3.2

42. Soy el elemento 3.2.1 43. Soy el elemento 3.2.2

Para no perderse con las directivas que hemos abierto y las que nos hayamos podido dejar abiertas, lo mejor es escribir el documento con una cierta sangría, para localizar enseguida a los "desparejados".

Por último, veamos un ejemplo de lista de definición:



<DL> <DT> Primera palabra <DD> Definicion de la primera palabra <DT> Segunda palabra <DD> Definicion de la segunda palabra <DT> Tercera palabra <DD> Definicion de la tercera palabra <DT> Cuarta palabra <DD> Definicion de la cuarta palabra </DL>

que nos da como resultado visible:

Primera palabra Definicion de la primera palabra

Segunda palabra Definicion de la segunda palabra

Tercera palabra Definicion de la tercera palabra

Cuarta palabra Definicion de la cuarta palabra

Y con todo esto, podemos dar por concluído el tema de las listas :)

Extensiones de etiquetas ya vistas

Extensión de las líneas horizontales

Podemos controlar la apariencia de las líneas horizontales generadas con la directiva <HR>. Para ello, disponemos de las siguientes opciones:

WIDTH: Nos permite especificar el ancho de la línea horizontal, bien en pixels, bien en % de la ventana del navegador. Es más recomendable este último sistema, pues no sabemos cuántos pixels va a tener la ventana del navegador de las personas que accedan a nuestras páginas. Por ejemplo, podemos usar:

<HR WIDTH=70%>

<HR WIDTH=347>

ALIGN: Nos permite alinear a la derecha o a la izquierda las líneas, pues, por defecto, los navegadores las centran. Para alinear a la izquierda, pondremos ALIGN=LEFT, y para alinear a la derecha, pondremos ALIGN=RIGHT. Un ejemplo que combina esta opción con la anterior es:

<HR WIDTH=50% ALIGN=RIGHT>

SIZE: Nos permite especificar el grosor de la línea en pixels. Podemos usarlo (por ejemplo):

<HR SIZE=4>

NOSHADE: Desaparece el sombreado de la línea, dándole un aspecto sólido.

Páginas con imágenes de fondo

Podemos usar una imagen GIF o JPG como imagen de fondo de una página web, para ello, tenemos la opción BACKGROUND, que la usaremos dentro de la directiva <BODY>. Por ejemplo:

<BODY BACKGROUND="mifondo.gif">  </BODY>

Recordad que no todo el mundo tiene activada la carga de imágenes en el navegador, y que si el fondo es muy grande, podría tardar mucho en cargar, con la consiguiente desesperación del usuario.

Para subsanar que la gente no tenga activada la carga de imágenes, una alternativa es usar un color de fondo para la página lo más parecido a la imagen de fondo que vayamos a poner. Esto lo hacemos usando lo siguiente:

Especificación de colores de fondo y texto

Para especificar un color de fondo, tenemos el parámetro BGCOLOR de la directiva <BODY>:

<BODY BGCOLOR="#rrggbb">  </BODY>

donde rrggbb es un triplete de valores en hexadecimal que nos permite especificar la intensidad de las componentes roja (red), verde (green) y azul (blue) que tendrá el documento como color de fondo.

Por ejemplo, FF0000 es rojo, 00FF00 es verde, 0000FF es azul, XXXXXX son tonos de grises, FFFFFF es blanco, 000000 es negro, FFFF00 es amarillo, FF00FF es magenta y 00FFFF es cian.

Tenemos, además, otros parámetros que nos permiten cambiar el color del texto, que son:

TEXT: Nos permite cambiar el color del texto normal LINK: Nos permite cambiar el color de los enlaces ALINK: Nos permite cambiar el color de los enlaces al activarse VLINK: Nos permite cambiar el color de los enlaces visitados

Podemos usar todos estos parámetros de forma conjunta, por ejemplo, podemos hacer:

<BODY BACKGROUND="1.gif" BGCOLOR="#F4F4C4" TEXT="#0000FF" LINK="#FF0000" ALINK="#00FF00" VLINK="#0000FF">  </BODY>

Tamaño de las fuentes de texto

Podemos cambiar el tamaño de la fuente de texto mediante la directiva <FONT> ... </FONT> y el parámetro SIZE, esto sólo afectará al texto que vaya entre las directivas FONT.

Por ejemplo, podemos poner:

<FONT SIZE=5> Este texto se verá un poco más grande que el original </FONT> pero este ya no, este ya se verá a su tamaño original.

cuya salida en el navegador será:

Este texto se verá un poco más grande que el original pero este ya no, este ya se verá a su tamaño original.

El tamaño por defecto de las fuentes de texto es 3. De todas formas, NO ES RECOMENDABLE USAR FONT, pues se está tomando otra dirección (hojas de estilo) para hacer estas cosas.

Si queremos que el cambio afecte a todo el documento, utilizamos la directiva <BASEFONT> justo a continuación de la directiva <BODY>, por ejemplo, así:

<BODY> <BASEFONT SIZE=8>  </BODY>

aunque si hay algún trozo de texto que queramos con otro tamaño, podemos hacerlo con la correspondiente directiva <FONT> ... </FONT>

Ahora ya hay más elementos con los que sugerir algún ejercicio, a ver que piense... vale, ahí va.

En la barra del navegador puede aparecer el título que querais. Ya en el cuerpo del documento, con una cabecera de nivel 1 le poneis algún título. Escribid algunos párrafos usando las cosas vistas en la pasada entrega sobre el formato del texto, poned algún "smily" con las directivas <TT> ... </TT> para ver el efecto, poned una imagen de fondo y un color de fondo para la página, haced una lista de vuestras aficciones favoritas (o de lo que se os ocurra), separad cosas que no tengan mucho que ver con líneas horizontales modificadas al gusto con las opciones vistas... y si poneis más cosas, pues mejor :)

Con todo esto, finaliza esta entrega del cursito de HTML, nos vemos en la próxima con el tema de URL's y enlaces.



Curso de HTML

4. URL's y Enlaces

Nota Previa: Los enlaces puestos aquí de ejemplo no tienen por qué existir en la realidad, están puestos sólo para ilustrar el tema de enlaces.

Llegamos por fin a un punto que tiene más interés de lo que en principio tiene poner una página más o menos "mona" y "apañada".

¿Qué pasaría si fuera demasiado larga y la tuviéramos que dividir en varias páginas? ¿Cómo nos las apañamos para poder ir de una página a otra?

Pues eso tiene fácil solución, y será lo que veremos en esta entrega, es decir, vamos a hablar de... URL's Y ENLACES

Dentro de nuestro documento podemos hacer referencia a otros documentos que existan en la red. ¿Cómo? Usando una notación especial: los URL. Esto son las siglas de Uniform Resource Locator o, en cristiano, "localizador de recursos uniforme -universal" O:)

Esto viene a ser una generalización de lo que entendemos por archivo, pero no ya en nuestro ordenador, si no en toda la red, aunque por medio del URL podemos acceder a más recursos en la red, no sólo archivos.

La forma de escribirse que tienen los URL es la siguiente (seguro que os suena):

servicio://nombre_servidor[:puerto]/ruta_acceso/nombre_archivo

Por partes:

Servicio es el servicio al que queremos acceder. Puede ser nuestro archiconocido http (hyper text transfer protocol), pero no es el único, tenemos también, entre otros, ftp (file transfer protocol), news, gopher, telnet, mail...

Puerto es un dato opcional (yo creo que nadie lo pone) que hace referencia al extremo lógico de conexión que usa el servidor para comunicarse con el cliente. Si no recuerdo mal, para http el puerto es 80, pero esto no hace falta que lo pongais ;)

Al respecto de la ruta de acceso, hay que decir dos cosas: podeis poner la dirección IP de la máquina (esos numeritos que nadie se sabe de memoria) o bien nombres más "humanos" como www.yahoo.com y similares ;)

La forma de escribir la ruta de acceso es la que se usa en los sistemas UNIX; esto es importante saberlo, por dos cosas. Primero, porque la barra que separa directorios no es '\', si no que es '/'. Segundo, porque una mayúscula NO ES LO MISMO que una minúscula, y esto es importante tenerlo en cuenta para todo aquél que trabaje bajo MSDOS o bajo Windows. No es lo mismo querer bajarse el archivo 'Imagenes.zip' que el archivo 'imagenes.zip', ¿de acuerdo? ;)

Muy bien, pues ahora que ya sabemos qué es eso del URL, vamos a ver por qué nos interesa. Es fácil, para poder ENLAZAR páginas entre sí, enlaces a archivos, etc...

¿Y cómo enlazamos la primera página de mi web con la segunda? ¿Y si lo que quiero es, dentro de una misma página enlazar una palabra con una sección que está varios párrafos más abajo?

Pues para eso, tenemos lo que se conoce bajo el nombre de ANCLAS (o "anchors", en inglés, 'of course' ;) ). ¿Y cómo se usan? Bueno, no se trata de robarla a algún barco y luego tirarla a la pantalla, se



podría romper, eso si es que puedes levantar el ancla. En realidad, es más sencillo que todo eso, lo podemos hacer con unas simples directivas ;) Se trata de una directiva emparejada, la siguiente:

<A> ... </A>

Para usarlas, hay que saber que tenemos dos tipos de anclas: las llamadas anclas de REFERENCIA, y las llamadas anclas NOMINALES.

Las anclas de REFERENCIA nos sirven para indicar un enlace a otro documento, imagen, archivo... que no forma parte de nuestro documento html. Para indicar el destino del enlace, tenemos que añadir la palabra HREF a la directiva <A>, de la siguiente forma:

<A HREF="URL archivo destino">

Ummm... nos ha salido la palabra URL... si releemos lo que pone sobre el tema, nos encontramos con que la sintaxis de los URL son

servicio://nombre_servidor[:puerto]/ruta_acceso/nombre_archivo

así, uniéndolo todo, si, por ejemplo, queremos enlazar con una página, escribiríamos lo siguiente:

<A HREF="http://www.micasa.es/mi_directorio/mipagina2.html"> Pulsa aquí para acceder a la segunda página</A>

Vemos también otra cosa: entre las directivas <A> ... </A> hay escrito un texto. Si ponemos esto, en el navegador sólo vamos a ver lo siguiente:

Pulsa aquí para acceder a la segunda página

además, lo vemos de otro color: esto lo hace el navegador para que sepas que ahí tienes un enlace; vimos en el pasado número cómo cambiar ese color, y también puede cambiarse desde las opciones del navegador. Por si fuera poco, cuando pases con e l ratón sobre ese texto, verás que cambia de forma, usualmente sale una mano, si pinchas sobre el enlace, irás a parar a la página que estuviera especificada tras HREF.

¿Y si no es un documento web? Pues pueden pasar varias cosas, dependiendo del tipo de archivo que sea: si es una imagen (GIF o JPEG), se cargará en el navegador, si es un archivo comprimido el navegador nos dará la opción de guardarlo... y otras cosas que todos sabemos porque ya hemos viajado mucho por la red ;)

Por otro lado, las anclas NOMINALES nos sirven para especificar puntos específicos (valga la "redun" ;) ) dentro de una página, puntos a los que luego podemos hacer referencia mediante un ancla de referencia.

Voy a explicar esto con un ejemplo: suponed que teneis un documento que, *necesariamente*, ha de tener 1000 líneas en la misma página, y que cuenta con 4 apartados en los que hablais, qué sé yo, de informática, cerveza, música y módems.

Vamos a suponer que quereis, al principio de la página, poner unos enlaces, a modo de índice, desde los que se puede acceder a cada sección de la página. Veamos la estructura:



<HTML> <HEAD> </HEAD> <BODY> <OL> <LI> <A HREF="#seccion1">De informatica,</A> <LI> <A HREF="#seccion2">cerveza,</A> <LI> <A HREF="#seccion3">musica</A> <LI> <A HREF="#seccion4">y modems</A> </OL> <A NAME="seccion1">De informatica</A> <! texto> <A NAME="seccion2">cerveza</A> <! texto> <A NAME="seccion3">musica</A> <! texto> <A NAME="seccion4">y modems</A> <! texto> </BODY> </HTML>

La parte que pone <A NAME="nombre"> ... </A> ES el ancla NOMINAL. Simplemente, ponemos un nombre a partir del cual podemos referirnos mediante un <A HREF>. Este nombre "de sección", si lo quereis así, no aparece en el navegador. Por sí sola, el ancla nominal no hace nada; es cuando, gracias al <A HREF>, podemos acceder a esa sección delimitada por nosotros.

Notad una diferencia: dentro de <A NAME>, el nombre lo hemos puesto tal cual; sin embargo, dentro de <A HREF> hemos puesto un '#' delante, ¿por qué?

Bueno, imaginad que queremos referirnos a la seccion "deportes", pero que está en otra página que no es la nuestra. ¿Cómo lo escribimos? ¿Ponemos <A HREF="www.pepe.com/varios/doc.htmldeportes">, así, todo junto? Recordad que la forma de escribir la ruta de acceso es estilo UNIX, así que ese nombre de archivo es completamente válido (y otros mucho más exóticos), así que se pondría a buscar ese archivo, con el consiguiente error. Para eso está el carácter '#', para poder distinguir el nombre de la sección de la dirección de la página. Así, lo que tendríamos que poner es:

<A HREF="www.pepe.com/varios/doc.html#deportes">

y arreglado :)

Ya he comentado antes que http no es el único servicio que la red nos ofrece, todos conocemos muchos otros, como las news, el correo electrónico, gopher, etc...

Si, por ejemplo, queremos que al pinchar sobre un enlace, se nos abra el programa de correo para enviar un mensaje a una dirección que especifiquemos, lo podemos hacer (por ejemplo), así:

<A HREF="mailto:[email protected]">Puedes enviar un mensaje de correo a mi direccion, [email protected]</A>

cuya salida en el navegador es:

Puedes enviar un mensaje de correo a mi direccion, [email protected]

Los dos puntos son OBLIGATORIOS para poder separar el mailto de la dirección. No hay por qué poner la dirección de email como parte del texto que aparezca en el navegador, pero suele hacerse para que quien visite nuestra página pueda ver antes la dirección.

También podemos querer abrir un archivo en una ventana nueva del navegador: suponed que teneis una página "pagina1.html" y quereis que la siguiente, "pagina2", se abra en otra ventana, para eso tenemos, dentro de la directiva <A> ... </A> el parámetro TARGET, que lo usaremos como sigue:



<A HREF="pagina2.html" TARGET="_blank">Pagina siguiente </A>

Del parámetro TARGET hablaré cuando nos enfrentemos (creo que dentro de dos entregas) a los famosos FRAMES.

Este ejemplo me viene bien, además, para una cosa: ¿no os habeis fijado que, detrás de HREF, no he escrito la dirección entera (ej., léase http://www.pepe.com/pagina2.html) si no sólo la página? Sólo es necesario poner la dirección completa cuando nos referimos a OTRA MAQUINA, pero, dentro de la misma máquina, podemos refe rirnos localmente a los documentos, y poner cosas como "pagina3.html" o "varios/deportes.html", en lugar de "http://www.pepe.com/pagina3.html" o "http://www.pepe.com/varios/deportes.html" cada vez :)

Ahora que ya sabemos lo que significa URL y cómo hacer enlaces, vamos a volver a un punto que me dejé pendiente en la primera entrega, cuando hablé de qué cosas pueden ir dentro de las directivas ... .

Directorio base para búsquedas de ficheros

¿Esto qué demonios es?

Bueno, calma :-D

Lo que significa es que, si dentro de <HEAD> ... </HEAD> ponemos la directiva <BASE HREF="URL_base">, la dirección URL_base será tomada como dirección sobre la cual buscar documentos.

Sé que la he liado más, pero vereis como ahora con este ejemplo ya no os parecerá tan "raro" lo que he escrito.

Imaginaos que teneis toda vuestra información en un directorio llamado "la_informacion_necesaria_para_mi_pagina". Suponed que quereis poner unos cuantos enlaces a documentos o imágenes que tengáis en ese directorio. Tendríais que poner, cada vez, por ejemplo

"la_informacion_necesaria_para_mi_pagina/image.gif" o también

"la_informacion_necesaria_para_mi_pagina/doc1.html"

Si en la cabecera poneis la directiva

<BASE HREF="la_informacion_necesaria_para_mi_pagina">

a partir de ahora sólo tendreis que poner en los enlaces "image.gif", o "doc1.html", con lo que nos ahorramos un considerable esfuerzo tecleando.

Sin embargo, esto tiene una pequeña pega, y es cuando queramos hacer referencia a un documento que NO ESTE en nuestro directorio. Usada con sabiduría, esta directiva sería usada en páginas que sólo tuvieran referencias internas (pocas veces, la verdad), y sería olvidada el resto de veces :)

Más cosas que podemos poner en la cabecera. La directiva <META>. La usaremos con dos finalidades, principalmente.

Una de ellas es dar información relativa al autor del documento, así como palabras clave de búsqueda para los sistemas de búsqueda de información en servidores WWW. Esto lo hacemos de la siguiente forma:



<META NAME="author" CONTENT="nombre_de_autor"> <META HTTP-EQUIV="keywords" CONTENT="palabra1,palabra2">

Obviamente, se puede poner más palabras clave ;)

La otra finalidad es usarla de temporizador, así, pasado un cierto tiempo, que especificamos nosotros, en segundos, se cargará en el navegador otra página cuya dirección especificamos. Esto se consigue de esta forma:

<META HTTP-EQUIV="refresh" CONTENT="nseg;URL=pagina_siguiente">

Por ejemplo, si ponemos, dentro de <HEAD> ... </HEAD> :

<META HTTP-EQUIV=refresh" CONTENT="20;URL=www.pepe.com/index.html">

al cabo de 20 segundos, en el navegador se abrirá la página "index.html".

Esto es lo que quería añadir al apartado de la cabecera de un documento HTML. Es que si no hablaba antes de URL's y enlaces, podía quedar un poco en el aire ;)

Y ahora vamos a otro punto que seguro que os interesa. Ya sabemos cómo dejar el texto precioso e impecable, cómo referenciarlo a otros textos aún más preciosos e impecables, pero, una vez más, el ser humano no sabe contener sus ansias de querer más, y se dijo: "¿Y cómo pongo una 'afoto' en mi página web?"

Pues de eso vamos a hablar ahora: de INCLUSION DE IMAGENES EN UN DOCUMENTO HTML.

Es tan simple como poner la siguiente directiva NO emparejada:

<IMG SRC="URL_imagen" ALT="texto">

Una vez más, dentro de la misma máquina, no tenemos que poner toda la dirección, sólo el nombre de la imagen :)

Con el parámetro ALT, lo que hacemos es mostrar un texto alternativo, por si hay gente que tenga la carga de imágenes desactivada (por motivos de acelerar la carga), por si se está accediendo desde un navegador en modo texto como pueda serlo Lynx, o por si se trata de un navegador diseñado para ciegos.

Podemos, además, especificar dónde alinear la imagen, por medio del parámetro ALIGN, que puede tomar los valores TOP, MIDDLE y BOTTOM (arriba, medio, abajo ;) )

El parámetro ALIGN admite dos valores más: RIGHT y LEFT; esto se hace para que el texto fluya por el lado que dejan libres las imágenes.

No es obligatorio poner ALIGN dentro de <IMG>

Un uso de las imágenes es ponerlas en mitad de un ancla de referencia; si, por ejemplo, ponemos:

<A HREF="pagina.html"><IMG SRC="delante.gif"></A>

nos aparece la imagen resaltada, y si nos ponemos sobre ella, podemos pincharla para acceder al enlace.

Tenemos los parámetros WIDTH y HEIGHT, con los que podemos especificar el tamaño exacto, en pixels, que ocupará nuestra imagen.



El parámetro BORDER nos permite especificar el grosor del marco que aparece alrededor de la imagen cuando la ponemos dentro de un ancla de referencia; si ponemos BORDER=0, la imagen aparece sin marco.

Con HSPACE y VSPACE definimos un marco invisible que rodea a la imagen; esto se hace con el fin de separar la imagen del texto que la rodea.

Por último, tenemos LOWSRC="imagenalternativa", que hace que el navegador cargue primero esta imagen, que se supone que es como la original pero a menor resolución, y luego ya carga la imagen que queremos.

Con estas extensiones, nuestra directiva <IMG> nos quedaría de la siguiente forma:

<IMG SRC="imagen" LOWSRC="imagen2" ALT="Nombre" ALIGN=alineado WIDTH=x HEIGHT=y HSPACE=x VSPACE=y BORDER=n>

Y eso es todo por ahora; nos vemos en la siguiente entrega, en la que hablaré de TABLAS. Como veis, ya empezamos a tener muchos ingredientes con los que hacer páginas web :)

Bueno, va, para finalizar, os dejo un ejercicio:

Dos páginas, cada una de ella con tres secciones, enlazadas entre sí (incluídas las secciones) mediante imágenes. Por supuesto, podeis usar las cosas que hemos visto en las pasadas entregas ;)




Curso de HTML

5. Tablas

Vamos a hablar ahora de cómo crear TABLAS en nuestros documentos HTML. Las tablas pueden servirnos para organizar la información que queramos mostrar en un página web, pero también pueden usarse, con una buena elección de sus parámetros, para hacer algún pequeño truquito que haga nuestra página un poco más vistosa. Pondré uno de ejemplo al final de esta exposición.

Para señalar el comienzo y el fin de una tabla, tenemos las directivas <TABLE> ... </TABLE>. Dentro de <TABLE> podemos especificar una serie de parámetros para modificar el aspecto de nuestra tabla; estos son:

CELLSPACING=n, con n un natural. Nos permite modificar el espacio que se debe insertar entre las celdas de una tabla.

CELLPADDING=n, con n natural. Nos permite modificar el espacio que debe existir entre los bordes de cada celda y los elementos que hay en ella incluídos.

BGCOLOR="#rrggbb" nos permite especificar el color de fondo de la tabla, escrito en la forma en que se explicó cuando se habló de cómo cambiar el color de fondo de una página.

BORDER=n, con n natural. Nos permite especificar el grosor en pixels del marco de la tabla. Con BORDER=0 tendremos una tabla sin marco.

WIDTH=n, con n natural. Nos permite especificar, en pixels o en porcentaje, el ancho que tendrá nuestra tabla dentro de la página.

Vale, muy bonito, y ahora, ¿cómo nos las apañamos para ir poniendo filas y/o columnas a la tabla, que es lo que me interesa?

Bueno, pues, para empezar, dentro de las directivas delimitadoras de la tabla, para marcar que vamos a comenzar con una fila nueva, tenemos la directiva <TR>. A partir de ella, comienza una nueva fila.

Cada vez que queramos poner una celdilla, tendremos que usar la directiva <TD>. A continuación de ella, pondremos todo el contenido HTML que queramos: texto, imágenes, enlaces, listas, más tablas... La celdilla termina cuando la cerramos con </TD>

Tenemos otra directiva para poner celdillas, <TH>, pero con la particularidad que <TH> es especial para los encabezados: el texto que pongamos a partir de ella aparecerá resaltado.

Tanto <TD> como <TH> y <TR> admiten los siguientes parámetros de alineamiento:

Alineamiento horizontal: ALIGN= CENTER,RIGHT o LEFT Alineamiento vertical: VALIGN= TOP, MIDDLE o BOTTOM

Dentro de <TD> y <TH> podemos, también, usar los siguientes parámetros:

COLSPAN=n, n natural. Nos sirve para fusionar las celdas de varias COLUMNAS contiguas, siendo n el número de columnas que se van a fusionar en una sola celda.

ROWSPAN=n, n natural. Esta nos sirve para fusionar las celdas de varias FILAS contiguas, con n el número de filas que se van a fusionar en una sola celda.



El parámetro BGCOLOR puede usarse globalmente para toda la tabla, pero también puede especificarse en las celdas deseadas dentro de la correspondiente directiva <TH> o <TD>. Lo mismo sucede con los parámetros WIDTH y HEIGHT.

Por último, hay que señalar que podemos darle un título a la tabla, entre las directivas <CAPTION> ... </CAPTION>, que DEBEN ir JUSTO A CONTINUACION de la directiva <TABLE>. Si le ponemos ALIGN=TOP, el título saldrá encima de la tabla, y si ponemos ALIGN=BOTTOM, el título saldrá debajo de la tabla.

Vamos a ver un ejemplo y su salida, ejemplo en el que usaremos todas las posibilidades aquí mencionadas sobre el manejo de tablas:

<HTML> <HEAD> <TITLE>Ejemplo de Tabla</TITLE> </HEAD> <BODY> <CENTER> <! Asi centramos la tabla> <TABLE BORDER=2 CELLSPACING=2 CELLPADING=2> <CAPTION ALIGN=BOTTOM>Mi primera tabla</CAPTION> <TR> <TH BGCOLOR="#FFFFFF"> Encabezado 1 </TH> <TH BGCOLOR="#FFFFFF"> Encabezado 2 </TH> <TH BGCOLOR="#FFFFFF"> Grafico </TH> </TR> <TR> <TD COLSPAN=2 ALIGN=RIGHT> Aqui se han fusionado las dos primeras columnas y, ademas, el texto se ha alineado a la derecha. </TD> <TD ROWSPAN=2 ALIGN=CENTER> Aqui se han fusionado esta fila con la de abajo y, ademas, texto e imagen se han alineado al centro <BR> <IMG SRC="logo.gif"> </TD> </TR> <TR> <TD> Elemento 1 </TD> <TD> Elemento 2 </TD> </TR> </TABLE> </CENTER> <! No nos olvidemos de quitar el centrado> </BODY> </HTML>

Cuya salida es:

Encabezado 1 Encabezado 2 Grafico

Aqui se han fusionado las dos primeras columnas y, ademas, el texto se ha alineado a la derecha.

Elemento 1 Elemento 2

Aqui se han fusionado esta fila con la de abajo y, ademas, texto e imagen se han alineado al

centro

Mi primera tabla

Un "truquito" que se suele hacer con tablas es poner en una tabla los enlaces de acceso a las páginas anterior y siguiente a la página que se está leyendo, usando, además, imágenes para dichos enlaces. Por ejemplo, suponed que teneis un gráfico que se llama "ant.gif", otro que se llama "sig.gif", y un tercero que se llama "volver.gif". Suponed que estais dentro de una página que se llama "tema5.htm", que la página anterior se llama "tema4.htm", la siguiente "tema6.htm", y la página principal es "temas.htm". Con el siguiente código, al final de la tabla, podemos hacer un vistoso acceso a nuestros enlaces:

<CENTER>



<TABLE BORDER=0 WIDTH=30%> <TR> <TD WIDTH=15% ALIGN=LEFT> <A HREF="tema4.htm"><IMG SRC="ant.gif" BORDER=0></A> </TD> <TD WIDTH=70% ALIGN=CENTER> <A HREF="temas.htm"><IMG SRC="volver.gif" BORDER=0></A> </TD> <TD WIDTH=15% ALIGN=RIGHT> <A HREF="tema6.htm"><IMG SRC="sig.gif" BORDER=0></A> </TD> </TR> </TABLE> </CENTER>

Y esto es todo respecto a las tablas, nos vemos en la próxima entrega, en la que hablaremos de FRAMES, o MARCOS.

Como ejercicio, podeis hacer vosotros alguna tabla que reúna información, alguna imagen, enlaces... en fin.. lo que se os ocurra :-)




Curso de HTML

6. Frames

Frames o marcos; se trata de dividir la pantalla del navegador en varias subventanas más pequeñas, pudiendo contener cada una de ellas una página HTML distinta. Cada uno de los marcos tendrá un URL determinado, y sus propias barras de desplazamiento.

Definición de marcos

Los marcos nos van a cambiar completamente la estructura de nuestro documento HTML. Lo que se hace es, en un documento HTML, definir cuántos marcos vamos a tener, cuánto van a ocupar en la pantalla, dónde los vamos a poner, y qué documento HTML va a contener cada uno. Aparte, se escribe cada documento HTML en un fichero distinto. La novedad es que, dentro del documento en el que definimos los marcos, la directiva <BODY> es eliminada, siendo sustituida por la directiva (también pareada) <FRAMESET>. Como es una directiva pareada, debemos cerrarla al terminar de definir los marcos, al igual que cerrábamos la directiva <BODY>.

Esta directiva puede tener UNO de los dos parámetros siguientes:

COLS="lista_de_valores" (los marcos serán dispuestos en columnas)

o bien

ROWS="lista_de_valores" (los marcos serán dispuestos en filas)

Alguna manera habrá de decir que queremos 5 marcos, y que ocupen, respectivamente, el 10%, 10%, 10%, 10% y 60% (el resto) de la ventana del navegador, bueno, pues esto lo conseguimos precisamente en "lista_de_valores".

Si queremos que sean 4 marcos, dispuestos en columna, ocupando, respectivamente, el 20%, 10%, 20% y 50% de la ventana del navegador, pondríamos COLS="20%,10%,20%,50%". O, si no nos acordamos de sumar para ver qué ocupa el último, podemos poner COLS="20%,20%,20%,*"

* significa "tan grande como la ventana", en este caso, tan grande como el resto de ventana que queda para él.

También podemos decir exactamente cuántos pixels ha de ocupar cada marco. Poniendo, por ejemplo COLS="100,300", tendremos dos columnas, una de 100 pixels y la otra de 300.

Resumiendo, la directiva <FRAMESET> tiene la forma siguiente:

<FRAMESET [COLS="lista_de_valores"] [ROWS="lista_de_valores"]>

Los corchetes [ ] indican únicamente que son opcionales exclusivas, o ponemos una, o ponemos la otra, pero una de las dos debe ponerse. Como podreis suponer, es un poco tonto poner un marco sin añadir COLS o ROWS... :-D



Especificación del contenido de los marcos

Bien, ya sabemos cuántos marcos queremos, y cuánto queremos que ocupen en la ventana del navegador, pero ahora... ¿cómo decimos en cada uno de ellos qué documento HTML se ha de cargar, si en la directiva <FRAMESET> sólo hay cabida para un parámetro?

Para las peculiaridades de cada marco, dentro de <FRAMESET> ... </FRAMESET>, utilizaremos la directiva no pareada <FRAME>, una por cada marco, en la que podemos usar los siguientes parámetros:

SRC="nombre_del_documento" : aquí pondremos el nombre del documento que queremos colocar dentro del marco.

NAME="nombre_ventana" : con esto, asignamos un nombre con el que referenciar al marco, de forma que pueda ser el destino de enlaces situados en otros marcos.

MARGINWIDTH="valor" : especifica el margen lateral en pixels; esto nos sirve para separar un poco el texto del marco, para que no quede excesivamente pegado al borde.

MARGINHEIGHT="valor" : especifica el margen vertical en pixels, teniendo la misma finalidad que el parámetro anterior.

SCROLLING="[yes][no][auto]" : si tenemos un documento que ocupe más de lo que nos permite la pantalla, podemos querer que aparezcan barras de desplazamiento para ver qué hay más abajo o más a la derecha. Si elegimos la opción YES, las barras de desplazamiento estarán siempre activas, aunque no sea necesario. Si elegimos la opción NO, las barras de desplazamiento no se activarán aunque la página no quepa en la ventana, con lo que habrá parte del documento no visible. Si elegimos la opción AUTO, las barras sólo se activarán si son necesarias. Si no decimos nada, el valor por defecto es AUTO.

NORESIZE: evita que se pueda redimensionar el marco por el arrastre del ratón en las barras que separan los marcos.

Con lo que nuestra directiva <FRAME> presenta el aspecto:

<FRAME SRC="nombre_doc" NAME="nombre" MARGINWIDTH="n" MARGINHEIGHT="m" SCROLLING="[yes][no][auto]" NORESIZE>

¿Y cómo la usamos?

Nada como un ejemplo para deja r claras las cosas: en este ejemplo, voy a crear dos marcos dispuestos en fila, uno de ellos contendrá el documento "pepe.html" y el otro el documento "juan.html". Veamos cómo podría quedar el documento de especificación de los marcos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>Prueba de Frames</TITLE> </HEAD> <FRAMESET ROWS="30%,*"> <FRAME SRC="pepe.html" NAME="pepe" MARGINWIDTH="2" MARGINHEIGHT="2" SCROLLING="yes" NORESIZE> <FRAME SRC="juan.html" NAME="juan" MARGINWIDTH="2" MARGINHEIGHT="2" SCROLLING="yes" NORESIZE> </FRAMESET> </HTML>

Y sólo nos queda escribir los documentos pepe.html y juan.html para terminar con la faena :)

Los frames son relativamente nuevos, y no todos los navegadores son capaces de visualizarlos. Para que estos navegadores puedan leer la información de nuestro documento, debemos incluirla entre las directivas <NOFRAMES> ... </NOFRAMES>, por ejemplo, poniendo un enlace a la página principal. Estas directivas las pondremos tras cerrar </FRAMESET>, y antes de cerrar </HTML>

Una nota importante: si el navegador no soporta marcos, y ponemos las directivas <NOFRAMES> ... </NOFRAMES>, en alguna parte debe aparecer <BODY> ... </BODY>, para que sepa el navegador cuál es el cuerpo del documento. Bien, pues si esto lo hacemos, por ejemplo, así:

<NOFRAMES> <BODY> Su navegador <B>no soporta</B> frames. Para acceder a la pagina principal, <A HREF="pag1.html">pulse aqui</A> </BODY> </NOFRAMES>

aparecerá en el navegador que no soporte marcos la frase

Su navegador no soporta frames. Para acceder a la pagina principal, pulse aqui

y cuando pulsemos sobre "pulse aqui", accederemos a pag1.html (por ejemplo), la página principal que nos anunciaba el creador de la página.

Referencias entre marcos: uso de TARGET en las anclas

Un uso frecuente de los marcos es tener uno más bien estrecho a la izquierda con un índice de materias, lleno de enlaces a los diversos temas, con la intención de que al pulsar sobre los enlaces, aparezca en el marco de la derecha el contenido del tema escogido.

Ahora veremos el uso del parámetro NAME de la directiva <FRAME> :)

Voy a explicarme con un ejemplo.

Tenemos dos marcos dispuestos en columna, uno a la izquierda y otro a la derecha. En el de la izquierda tenemos un documento que se llama "izq.html" y es el que contiene los enlaces a los temas. En el de la derecha tenemos un documento que se llama "der.html", de presentación a la página, y ahí será donde aparecerán los documentos de los temas que escojamos.

Veamos primero el documento de definición de marcos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML>  <HEAD> <TITLE>Prueba de Frames y Enlaces</TITLE> </HEAD> <FRAMESET COLS="30%,*"> <FRAME SRC="izq.html" NAME="indice"> <FRAME SRC="der.html" NAME="principal"> </FRAMESET> <NOFRAMES> <BODY> Su navegador <B>no soporta</B> frames. Para acceder a la pagina principal, <A HREF="noframes.html">pulse aqui</A> </BODY> </NOFRAMES> </HTML>

Y vamos ahora a ver cómo quedarían los correspondientes documentos "izq.html", "der.html" (el documento "noframes.html" queda a gusto del consumidor ;) ).

Empezamos con "izq.html":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML>  <HEAD> </HEAD> <BODY> <A HREF="tema1.html" TARGET="principal">Tema 1</A> <BR> <A HREF="tema2.html" TARGET="principal">Tema 2</A> <BR> <A HREF="tema3.html" TARGET="principal">Tema 3</A> </BODY> </HTML>

Y ya en "der.html" ponemos lo que nos apetezca, sabemos que, en cuanto pulsen sobre uno de los enlaces, en el marco derecho se cargará el tema que hayamos elegido.

Notar que dentro del ancla hemos incluido el parámetro TARGET, y le hemos dicho que como destino coja "principal" ¿Quién es "principal"? Es el nombre que le habíamos dado al marco derecho :)

Anidamiento de marcos

Los marcos pueden anidarse, dando lugar a estructuras complejas. Debe tenerse mucho cuidado con esto. Por una parte, la lectura de la página puede complicarse bastante. Por otra, podemos hacer referencia a un enlace en un marco, y que este enlace, a su vez, tenga marcos, marcos que se crearían en ese marco en el que estaba referenciado el enlace.

Para evitar problemas de ese tipo, con TARGET podemos usar uno de los siguientes valores (son constantes NAME especiales) a la hora de hacer referencia a un marco:

_BLANK carga el documento en una ventana nueva _SELF carga el documento sobre el actual

_PARENT carga el documento sobre el documento padre

_TOP carga el documento sobre el nivel superior

Veamos un ejemplo de cómo podemos anidar marcos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>Prueba de Frames ANIDADOS</TITLE> </HEAD> <FRAMESET COLS="50%,*">  <FRAMESET ROWS="50%,*">  <FRAME SRC="pru1.html" NAME="uno">  <FRAME SRC="pru2.html" NAME="dos">  </FRAMESET>  <FRAMESET ROWS="33%,33%,*">  <FRAME SRC="pru3.html" NAME="tres">  <FRAME SRC="pru4.html" NAME="cuatro">  <FRAME SRC="pru5.html" NAME="cinco">  </FRAMESET>  </FRAMESET>  </HTML>

Esto nos dividirá la pantalla de esta forma:



Y con esto termina nuestra entrega sobre frames. En la próxima, hablaré de formularios.

Un consejo si usais frames: probad bien las páginas antes de subirlas al servidor, para comprobar que no se os haya escapado algún detalle con los enlaces o que os hayais liado con un excesivo anidamiento.




Curso de HTML

7. Formularios

Todos hemos visto (y rellenado) algún formulario en alguna web que solicitaba nuestros datos, por ejemplo, gente que pide sugerencias para sus páginas y te da una serie de opciones a elegir, cuando rellenamos los datos para un redirector de correo, sitios en los que tenemos que introducir algunas claves para acceder a datos sobre alguna gestión que hayamos hecho, como el estado de una beca, o para ver nuestras notas en la web de la universidad... en fin, una infinidad de usos posibles.

Tanto los formularios como los CGI fueron creados con la idea en mente de romper lo estático de la relación con un servidor web: nos da la página, y punto, no podemos interactuar con él. Sin embargo, con los formularios ya podemos enviar información al servidor, información que será procesada y después será el servidor quien nos envíe una respuesta.

En este capítulo vamos a ver cómo hacer formularios.

Para crear un formulario, usaremos la directiva pareada <FORM> ... </FORM>, como ya sabeis, todo lo que haya ahí dentro será un formulario. Dentro de FORM tenemos que especificar algunos atributos:

ACTION="URL_cgi o mailto:emilio@com" METHOD="metodo" NAME="nombre"

Los dos primeros son obligatorios, el tercero, recomendado si vais a usar JavaScript.

Así, se nos queda:

<FORM ACTION="URL_cgi o mailto:emilio@com" METHOD="metodo" NAME="nombre"> .... </FORM>

El parámetro ACTION nos sirve para especificar el URL del programa CGI que procesará los datos que envía el formulario, o bien para especificar una dirección de correo electrónico a la que llegarán los datos. Sobre cómo llegan hablaremos cuando hable de CGI.

METHOD se usa para decir qué método seguimos para enviar la información al programa CGI. Hay dos posibilidades, GET y POST.

Si lo enviamos con METHOD=GET, entonces, el programa CGI recibirá los datos en la variable de entorno QUERY_STRING. Sin embargo, si lo enviamos con METHOD=POST, el programa CGI recibirá los datos por la entrada estándar (stdin). Tanto el contenido de QUERY_STRING como el de stdin (STandarD INput) es una lista de variables (los campos del formulario) y los valores introducidos por el usuario, que deberán ser analizados por el programa CGI. Ya ampliaremos este punto en la próxima entrega.

El parámetro NAME nos sirve para asignarle un nombre al formulario con el que podremos referirnos si utilizamos alguna función JavaScript que necesite algo de ese formulario (por ejemplo, antes de enviar un formulario, una función que compruebe si los campos necesarios están rellenos y notifique un error si faltar alguno).

Cada uno de los elementos del formulario viene definido en una directiva <INPUT TYPE="tipo">, donde tipo será el tipo de elemento del formulario. En todo formulario debe haber, obligatoriamente, un elemento especial, el objeto SUBMIT, que, como podeis imaginar, será el botoncito de "Enviar". No es obligatorio, aunque también se pone por si el usuario quiere modificar completamente los datos, el elemento RESET, que es el botoncito de "Borrar".



Dentro de INPUT tenemos muchos parámetros, uno que es OBLIGATORIO (salvo para SUBMIT y RESET) es el parámetro NAME, pues en él se guardará el nombre de la variable a donde irán a parar los valores que nosotros elijamos. Si no hay variable donde meter datos, no podremos tener un formulario muy útil.

Vamos ya a ve r de qué elementos disponemos en nuestros formularios:

Cuadros de entrada de texto

Se trata del elemento por defecto, si no indicamos ninguno en TYPE. Aún así, podemos poner TYPE="text". Mediante el parámetro SIZE del código INPUT podemos especificar el tamaño de la entrada del cuadro de texto (i.e., las columnas). Podemos, además, limitar la entrada del número de caracteres de texto mediante el parámetro MAXLENGHT.

Tenemos pues, que su estructura básica es:

<INPUT TYPE="TEXT" SIZE=n MAXLENGHT=m NAME="nombre">

Cuadros de texto multilínea

Los delimitamos por los códigos pareados <TEXTAREA> ... </TEXTAREA> Por defecto, tenemos 4 líneas de 40 caracteres. Esto podemos modificarlo mediante los parámetros ROWS (filas) y COLS (columnas, es deci, número de caracteres). Si escribimos algún texto entre <TEXTAREA> y </TEXTAREA>, este aparecerá por defecto en el cuadro de entrada.

Estructura básica:

<TEXTAREA ROWS=n COLS=m NAME="nombre"> Texto por defecto </TEXTAREA>

Entrada de claves

Para ello tendremos que especificar PASSWORD en el parámetro TYPE de la directiva INPUT. Los caracteres que entremos serán ocultos apareciendo en su lugar asteriscos.

Su estructura básica es:

<INPUT TYPE="PASSWORD" NAME="nombre">

Casillas de verificación

Tenemos que poner CHECKBOX en el parámetro TYPE de INPUT. Esta casilla podrá estar marcada o no. Tenemos, además, que usar los atributos NAME (para ponerle un nombre a la variable) y VALUE (que recogerá el valor de la variable). Si no está marcada la casilla, no se envía información al servidor. Si está marcada, se envía el nombre de la variable y su valor.

Si queremos usar varias casillas formando un grupo, tendremos que poner a todas el mismo nombre en NAME. Así, se enviará la misma variable con varios valores.

Estructura básica:

<INPUT TYPE="CHECKBOX" NAME="nombre" VALUE="valor">



Botones de radio

Estos van siempre en grupo (como la Guardia Civil O:-D ), y son autoexcluyentes, es decir, sólo se puede seleccionar uno de ellos a la vez. Para decir que queremos un botón de radio, pondremos RADIO en el parámetro TYPE de INPUT. No debemos olvidar rellenar los parámetros NAME y VALUE. Si queremos tener varios botones de radio que hagan referencia a lo mismo (por ejemplo, elegir sexo: o eres hombre o eres mujer, al menos, por término medio %-D ), habrá que poner el mismo nombre en NOMBRE. El servidor puede tener problemas si recibe datos de botones de radio y ninguno está activado. Podemos activar uno (que sirva de opción por defecto) usando el parámetro CHECKED.

Con esto, la e structura básica es:

<INPUT TYPE="RADIO" NAME="nombre" VALUE="valor" [CHECKED]>

Listas desplegables

Este es el último elemento que nos queda por cubrir en la sección dedicada a los formularios.

Tenemos que usar la directiva pareada <SELECT>...</SELECT> para mostrar una lista de opciones que usa un menú desplegable. Cada una de las opciones la pondremos en una directiva <OPTION>. En la directiva OPTION disponemos del parámetro VALUE, que será el valor que tome la variable indicada en NAME de SELECT.

Los parámetros de SELECT son:

NAME: Especifica el nombre de la variable. Es obligatorio. SIZE: Determina el número de opciones visibles inicialmente. MULTIPLE: Permite seleccionar varias opciones.

Si no se usa el parámetro VALUE de la directiva OPTION, el servidor recogerá como dato el texto ofrecido al usuario.

Por tanto, la estructura básica de SELECT es:

<SELECT NAME="nombre"> <OPTION VALUE="opcion1">Descripcion para el usuario .... <OPTION VALUE="opcionN">Descripcion para el usuario </SELECT>



Y ahora, para aclarar todo este trabalenguas, nada como un ejemplito clarificador que nos de un poco de luz en todo esto. Veamos, yo quiero ofrecer un formulario similar a este:

PREINSCRIPCION EN EL CURSO DE VISUAL C/C++

Nombre:

Apellidos:

NIF: Numero de telefono:

Direccion de e-mail:

Sexo: Hombre Mujer

Estudios:

Primaria

Bachillerato

Formacion Profesional

Diplomado

Licenciado, Ingeniero, Arquitecto

Introduzca los motivos que le llevaron a elegir este curso:

Mis motivos han sido los siguientes:

¿Como supiste de la existencia de este cursillo? Vi publicidad

ENVIAR

BORRAR



Para ello, introduciré el código siguiente: <HTML> <HEAD> <TITLE> Ejemplo de formulario </TITLE> </HEAD> <BODY> <H2>PREINSCRIPCION EN EL CURSO DE VISUAL C/C++</H2> <FORM ACTION="mailto:[email protected]" METHOD="POST"> Nombre:<INPUT TYPE="TEXT" NAME="nombre" SIZE=20><P> Apellidos:<INPUT NAME="apellidos" SIZE=30><P> NIF:<INPUT NAME="nif" SIZE=9 MAXLENGHT=9> Numero de telefono:<INPUT NAME="telefono" SIZE=10 MAXLENGHT=10><P> Direccion de e-mail:<INPUT NAME="email" SIZE=30><P> Sexo:<INPUT TYPE="RADIO" NAME="sexo" VALUE="hombre" CHECKED>Hombre <INPUT TYPE="RADIO" NAME="sexo" VALUE="mujer">Mujer<P> Estudios:<BR> <INPUT TYPE="CHECKBOX" NAME="estudios" VALUE="primaria">Primaria<BR> <INPUT TYPE="CHECKBOX" NAME="estudios" VALUE="bachiller"> Bachillerato<BR> <INPUT TYPE="CHECKBOX" NAME="estudios" VALUE="fprof">Formacion Profesional<BR> <INPUT TYPE="CHECKBOX" NAME="estudios" VALUE="dipl">Diplomado<BR> <INPUT TYPE="CHECKBOX" NAME="estudios" VALUE="univsup">Licenciado, Ingeniero, Arquitecto<P> Introduzca los motivos que le llevaron a elegir este curso: <TEXTAREA ROWS=6 NAME="motivos">Mis motivos han sido los siguientes: </TEXTAREA> <P> ¿Como supiste de la existencia de este cursillo?<BR> <SELECT NAME="losupe"> <OPTION VALUE="publi">Vi publicidad <OPTION VALUE="amigos">Me lo dijo un amigo <OPTION VALUE="casual">Pura casualidad <OPTION VALUE="interes">Estaba interesado </SELECT> <P> <INPUT TYPE="SUBMIT" VALUE="ENVIAR"> <INPUT TYPE="RESET" VALUE="BORRAR"> </FORM> </BODY> </HTML>

Para el caso de los formularios nada mejor que un ejemplo que lo cubriera todo para ayudar a terminar de entender todo. Espero que lo hayais entendido bien, si no es así, ya sabeis, preguntad :)




Curso de HTML

8. Tipos MIME e inclusión de otros medios

Hasta el momento, lo que hemos visto es que, al hacer un enlace, lo poníamos apuntando a o tro documento HTML, bien en el servidor local o en un servidor remoto. Sin embargo, como todos sabeis, en un documento HTML podemos apuntar hacia muchas otros tipos de archivo, como por ejemplo, imágenes, vídeo, sonido... siendo el único requisito que esos archivos puedan almacenarse en el disco local de la máquina en la que estamos usando el navegador.

Para poder llevar a cabo esto, va a ser necesario que dispongamos en nuestra máquina de unas aplicaciones externas que sean capaces de manejar tipos específicos de archivos recibidos por el navegador. Nuestro navegador debe identificar el contenido de los archivos y ser capaz de tratarlos mediante el uso de los programas externos.

Esto se hace asociando las posibles extensiones de los archivos a unos tipos estándar, que se denominan tipos MIME (Multipurpose Internet Mail Extensions).

Veamos una tabla con algunos de los tipos MIME estándar:

Tipo MIME Extensión estándar Extensión DOS

Image/Gif .gif .gif

Image/Jpeg .jpeg .jpg

Image/Tiff .tiff .tif

PostScript .eps .ps .eps .ps

Text/HTML .html .htm

Sound/Au .au .snd .au .snd

Sound/Wave .wav .wav

Video/Mpeg .mpeg .mpg .mpe

Video/AVI .avi .avi

Así pues, la identificación del tipo MIME estándar se hace a partir de la extensión del archivo recibido. Una vez conocido este tipo, el cliente web (por ejemplo, el navegador) consulta una tabla interna en la que le viene especificado el tipo de acción a tomar al recibir un determinado tipo MIME. Esta tabla la define el propio usuario del cliente web en las opciones de configuración, especificando qué aplicaciones externas o visores han de activarse para cada tipo MIME (si no os lo creeis, buscad en las opciones de vuestro navegador y vereis como sí que os encontrais con la tabla que digo).

Ventaja de las aplicaciones externas: gran flexibilidad para el navegador que las incorpore. Así, el navegador será capaz de visualizar archivos PostScript, vídeos, documentos PDF... según las opciones que cada uno haya especificado en su navegador.

Enlazar a un documento multimedia sigue un proceso idéntico al de enlazar a un documento HTML. Por ejemplo, si queremos hacer un enlace a un archivo PS, haremos:

<A HREF="http://la.direccion.que.sea/documento.ps">Aqui tenemos un enlace a un archivo PS</A>



Una vez que el archivo esté en nuestro disco local, se identificará su tipo estándar MIME a partir de su extensión (recordad la tabla de arriba) y se lanzará la aplicación que nosotros hayamos asociado a dicha extensión, abriendo el archivo al cual apuntaba el enlace.

En caso de que el navegador no identifique el archivo, no sabrá qué aplicación externa usar, pero no pasa nada, puesto que nos ofrecerá siempre la opción de grabar el archivo en nuestro disco. Una vez tengamos ese archivo cuyo tipo no reconoce, ya haremos nosotros con él lo que toque.

Inclusión de otros medios en un documento HTML

Aparte de esta solución "casera" para poder abrir otro tipo de archivos mientras estamos en la red, actualmente se están haciendo esfuerzos dirigidos a posibilitar una mayor y mejor integración de medios como el sonido y el video dentro del propio documento HTML, y que no sean otros programas quienes deban visualizarlo.

Para esto, ha de ser el propio navegador quien soporte el formato en cuestión. Se ha propuesto una nueva directiva para la introducción de estos medios; dicha directiva es la directiva no pareada <EMBED>. Se usa de forma similar a como usamos la directiva <IMG>:

<EMBED SRC="URL_del_archivo">

Tiene algunos parámetros, a saber:

• LOOP : Puede ser TRUE o FALSE; le decimos si queremos que el video o audio ha de ejecutarse de forma cíclica (TRUE) o si sólo se ejecuta una vez (FALSE).

• AUTOSTART : También puede tomar los valores TRUE o FALSE. Si le decimos TRUE, la ejecución del archivo comenzará automáticamente, y si es FALSE, pues no.

• CONTROLS : Para indicar si queremos que aparezca una barra de controles para manejar la ejecución de un archivo.

• HSPACE, VSPACE; se usan para definir los márgenes entre la representación del medio y el resto del documento.

Por ejemplo, si queremos incluir un vídeo QuickTime que comience su ejecución de forma automática y nos ofrezca una barra de controles, haríamos algo como esto:

<EMBED SRC="video.mov" AUTOSTART="TRUE" CONTROLS="TRUE">




Curso de HTML

9. Imágenes Sensibles

Una imagen sensible es una imagen que contiene zonas activas que actúan como enlaces; según la zona activa de la imagen que pulsemos, se activa un enlace hacia un documento o hacia otro.

Por ejemplo: vamos a suponer que en nuestra página web estamos anunciando cocinas, y tenemos una foto grande de una cocina que es la estrella de nuestras ventas, con el propósito de que al pulsar sobre la parte de la imagen de los armarios, el navegante acceda a una página con información más detallada sobre ellos; o al pulsar sobre la parte de la imagen de la pila de fregar los platos acceda a una página con más información sobre la pila de fregar...

Lo que tenemos que hacer, será definir unas zonas (las zonas activas) sobre las cuales queremos que el navegante, al pinchar sobre ellas, acceda a la página en cuestión.

Supongo que la pregunta que me hareis inmediatamente es: ¿y eso cómo se hace?

Bueno, pues de esto vamos a tratar en este capítulo :)

Para crear una imagen sensible, lo primero que tenemos que tener creado es la imagen :-D

Después, tendremos que definir las zonas activas mediante la especificación de las coordenadas de rectángulos, círculos y otros polígonos que cubran dichas zonas.

A partir de aquí, tenemos dos posibilidades. Se trata de decidir quién va a procesar la imagen sensible: el servidor, o el cliente web.

Si las procesa el servidor, ha de almacenarse en este un archivo especial con las coordenadas de cada región activa y el correspondiente URL del enlace al que apunten. A este archivo le llamamos archivo -mapa de la imagen.

Con esto, cuando el usuario pincha en una zona concreta de la imagen, se transmiten las coordenadas del punto al servidor, el servidor las dirige a un programa CGI que gestiona las imágenes sensibles. El programa CGI consulta el archivo-mapa de la imagen y determina a qué zona activa pertenecen las coordenadas dadas por el servidor, con lo que se obtiene el URL asociado a esa zona y devuelve al cliente web (al navegador) el documento especificado en dicho URL.

Prácticamente todos los servidores disponen de este programa CGI para procesar la imagen sensible, por lo que no será necesario que nosotros nos hagamos el nuestro.

Sin embargo, esta forma de proceder tiene dos grandes inconvenientes. El primero es que el "ciudadano de a pie" no tiene acceso a los servidores para dejar el archivo-mapa de la imagen. El segundo es que se recarga innecesariamente de peticiones al servidor, ya que este debe procesar todas las coordenadas que envían los clientes web como respuesta a las acciones realizadas por los usuarios.

Debido a estas pegas, se propuso una técnica para poder procesar las imágenes sensibles. Lo que se hace es definir en el propio documento HTML que tiene a la imagen, todos los datos que permitan definir las zonas activas de dicha imagen. Así, las coordenadas se procesan localmente en el cliente web, con lo que se evitan los dos problemas anteriormente citados.

Bueno, bueno, vamos ya a ver cómo definimos las imágenes sensibles :)

Para ello, no tenemos más que usar el parámetro USEMAP en la directiva <IMG> de la forma siguiente:

<IMG SRC="archivo" USEMAP="nombre_archivo_mapa"> donde nombre_archivo_mapa se escribe de la misma forma que los enlaces nominales (¿recordais qué era aquello de las anclas nominales?). Así, podemos hacer referencia a un mapa que esté definido en el mismo documento, haciendo:

<IMG SRC="archivo" USEMAP="#mapa"> o podemos ponerlo haciendo referencia a otro documento HTML en el que tengamos definido el mapa como sigue:

<IMG SRC="archivo" USEMAP="nombre_archivo.html#mapa">

Si lo hacemos de la última forma, tiene la ventaja de que podemos poner en un mismo documento HTML las especificaciones de varias imágenes sensibles. Esto es útil, por ejemplo, a la hora de hacer modificaciones; siempre será mejor saber dónde tenemos el archivo de mapas que no ir buscando uno a uno en todos nuestros documentos HTML a ver dónde teníamos guardado ese mapa... ;-)

Claro, tenemos que definir el mapa :)

Pues el mapa lo definimos entre la directiva pareada <MAP> ... </MAP> Cada una de las zonas se define en una directiva no pareada <AREA>. El esquema de definición de un mapa es el siguiente:

<MAP NAME="mapita_number_one"> <AREA SHAPE="tipo_forma" COORDS=x1,y1,x2,y2 [HREF="doc.html|NOHREF]>  </MAP>

Cosas que hay que comentar:

En el parámetro SHAPE especificamos la forma de la región activa. Los valores admisibles son rect, circle y poly.

En el parámetro COORDS tenemos que especificar las coordenadas de la región activa. Estas coordenadas dependen del tipo de región.

Si es un rectángulo (SHAPE=rect), será COORDS=x1, y1, x2, y2 siendo (x1, y1) la esquina superior izquierda y (x2, y2) la esquina inferior derecha.

Si es un círculo (SHAPE=circle), será COORDS=x, y, r siendo (x,y) el centro del círculo y r el radio.

Si es un polígono (SHAPE=poly), en COORDS pondremos tantos pares de coordenadas como vértices tenga el polígono.

Tenemos también una opción exclusiva: [HREF="doc.html"|NOHREF]

Si ponemos HREF="doc.html", hacemos referencia al documento que se cargará en el navegador cuando pulsemos sobre esa zona.

Y si ponemos NOHREF, querrá decir que no ha de hacerse nada al pulsar sobre esa zona. De todas formas, esto no es necesario, puesto que las zonas que no hayamos definido como activas se consideran por defecto como NOHREF.

Como ejercicio podeis hacer lo que he comentado arriba: una página en la que anuncieis una cocina, y al pulsar sobre ciertas zonas de la cocina vayamos a otra página en la que se nos de más detalles sobre ese aspecto concreto de la cocina :)

Fácil, ¿no? :)



Por si alguien todavía tiene dudas, que entre en esta página, en la que podrá ver un ejemplo de una imagen sensible en acción.

Ejemplo de imagen sensible

MasterMind: Un juego para nostálgicos

Aquí teneis una imagen de mi versión del juego MasterMind. Pulsando sobre cada una de las zonas se os describirá para que sirven.

Dentro de HREF se puede especificar, o bien una dirección de un documento HTML, o bien una función JavaScript, que debe ser llamada poniendo delante (como en este ejemplo) javascript:

Para más detalles, no hay como estudiar el código de esta página.

Volver al curso


Curso de HTML

10. Applets Java

Java es un lenguaje de programación similar al C++, con todas las ventajas que proporciona la programación orientada a objetos y sin algunos de los inconvenientes que tiene el lenguaje C++ (o, al menos, eso dicen quienes programan en él). Es un lenguaje pensado para ser independiente de la plataforma sobre la que se vaya a ejecutar el programa.

Sin embargo, sobresale como característica que lo hace distinto del resto de lenguajes de programación el que Java puede crear programas pequeñitos (los famosos applets) que pueden ser activados desde cualquier página HMTL.

Aprender a usar este lenguaje es, sobre todo para quien no sepa nada de POO, complicado al principio, y puede que el tiempo que haya que invertir para hacer aplicaciones que podríamos incluir en nuestra página web no merezca la pena el esfuerzo. Esto lo digo porque cuando uno le echa una miradita, descubre que en Java TODO son clases, no se puede definir ni una función de forma independiente a un objeto, cosa que sí se puede hacer en C++, y esta visión de la programación puede desconcertar a los recién llegados.

Por ello tenemos los applets, como solución para aquel desarrollador de páginas web que quiere incluir en la suya la funcionalidad de programas Java, pero sin tener que aprender a programar en este lenguaje (muchos de los desarrolladores web ni siquiera saben programar, no son más que maquetadores que trabajan con Word y luego exportan, ni tan sólo conocen la sintaxis del HTML, así que imaginad el esfuerzo que les supondría).

Nosotros vamos a ver un poco por encima en qué consiste el hacer un programa Java:

Primero escribimos los fuentes con un editor ASCII cualesquiera (léase EDIT, VI,... O;) ). Después los compilamos con un compilador (cuyo nombre es javac), y así obtenemos las clases. Estas clases son programas compilados que luego tiene que ejecutar la máquina virtual Java (la famosa Java Virtual Machine que, no sé por qué, me recuerda a un fragmento de la película Airbag... si, lo dejo O:) ), junto con algunas librerías de enlace dinámico.

Java primero se compila a un formato llamado ByteCode (lenguaje binario de la Java Virtual Machine). Después hay que pasarlo al lenguaje máquina de la máquina real sobre la que se ejecuta. Por ello decimos que Java es un lenguaje compilado e interpretado. Primero lo compilamos con javac, y luego la JVM se encarga de interpretarlo en la máquina sobre la que corra.

Los applets son programas más o menos pequeños en formato ByteCode (precompilados, podíamos llamarlos). Tienen la extensión .class o .cla para MS-DOS.

Para ver applets Java es necesario usar un navegador que sea "Java Compatible", es decir, que tenga una máquina virtual Java para poder ejecutar los ByteCode.

La forma de incrustar un applet en nuestra web es análoga a cómo incluimos una imagen. Para ello, disponemos de la directiva pareada <APPLET> ... </APPLET>:

<APPLET CODE= WIDTH= HEIGHT= [CODEBASE=] [ALT=] [NAME=] [ALIGN=] [VSPACE=] [HSPACE=]> <PARAM NAME= VALUE=>  Codigo alternativo para un navegador que no tenga Java o lo tenga desactivado </APPLET>

Los parámetros obligatorios son:

CODE : Nombre de la clase principal

WIDTH : Anchura inicial HEIGHT : Altura inicial

Parámetros opcionales:

CODEBASE : URL base del applet (por defecto es el del documento) ALT : Texto alternativo

NAME : Nombre de la instancia

ALIGN : Justificado del applet (LEFT, RIGHT, CENTER) VSPACE : Espaciado vertical

HSPACE : Espaciado horizontal

En el web tenemos disponible un applet que se llama ImageLoop (no sé su dirección, pero os prometo que existe), que sirve para incorporar animaciones a las páginas web. Veamos, como ejemplo, cómo incrustarlo en nuestro documento. Para ello, tendremos que tenerlo en la misma dirección en la que tenemos nuestra web, y una serie de ficheros con los que hacer la animación, cuyo nombre obligatorio es t1.gif, t2.gif, ... hasta el número que especifiquemos en el parámetro cuyo nombre es NIMGS. PAUSA es la pausa en milisegundos que ha de haber entre imagen e imagen.

El código para incrustarlo será:

<APPLET CODE="ImageLoopItem" WIDTH=80 HEIGHT=90> <PARAM NAME=NIMGS VALUE=10> <PARAM NAME=IMG VALUE=DUKE> <PARAM NAME=PAUSE VALUE=100> Su navegador no soporta Java  </APPLET>

Sin embargo, los applets Java tienen una serie de inconvenientes que es necesario tener en cuenta a la hora de plantearse incorporarlos a una página.

El más importante es que, como se trata de un fichero independiente, y a veces no son tan pequeños como debieran, tenemos que esperar el tiempo que toque para que se carguen. El siguiente problema que tienen (cuando todos tengamos un Pentium a 500 MHz el problema dejará de existir, es más, cuando algunos tengamos un Pentium... O:) ) es que son LENTOS. Si tienen que ser independientes de la plataforma, no pueden ser programados a bajo nivel (lo que siempre implica velocidad), sino que debe usarse un lenguaje de alto nivel. Además, como debe interpretarse on-line...

Lo que puede hacerse con el applet que antes os he mencionado también puede hacerse con JavaScript. Aunque no todo lo que puede hacerse con Java se puede hacer con Javascript (como bien lógico parece, pues Java es mucho más que los applets).

En definitiva, la decisión última siempre queda a cargo de quien diseña la página. Lo que yo recomiendo es equilibrar. Es decir, ¿cómo puedo hacer esperar menos a quie n ve mi página, pero sin perder toda la funcionalidad que quiero dar a mi web?

Manual HTML

Documents

Transcript of Manual HTML