temarioanacleto2

 

El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi infinita. Pero esta información debe estar ordenada de alguna forma de manera que sea posible encontrar lo que se busca. La unidad básica donde está almacenada esta información son las páginas Web. Estas páginas se caracterizan por contener texto, imágenes, animaciones... e incluso sonido y video.

Una de las características más importantes de las páginas Web es que son hipertexto. Esto quiere decir que las páginas no son elementos aislados, sino que están unidas a otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar sobre un texto (texto al que llamaremos de ahora en adelante activo) de una página para navegar hasta otra página. Será cuestión del programador de la página inicial decidir que palabras o frases serán activas y a donde nos conducirá pulsar sobre ellas.

En algunos ambientes se discute que el World Wide Web ya no es un sistema hipertexto sino hipermedia. Los que defienden el cambio se apoyan en que aunque en sus orígenes el WWW constaba únicamente de texto en la actualidad es un sistema principalmente gráfico y se puede hacer que las zonas activas sean, no sólo texto, sino imágenes, videos, botones,... en definitiva cualquier elemento de una página. Aún así, el término original no ha sido reemplazado todavía y por tanto será el empleado a lo largo de esta obra.

Aunque al principio el texto predominaba en el WWW, en la actualidad las imágenes son mayoría como podemos observar en una de las principales webs del proyecto KDE.

Características del lenguaje HTML.

Pero empecemos ya con lo que nos interesa. ¿Cómo se hace una página Web? Cuando los diseñadores del WWW
se hicieron esta pregunta decidieron que se debían cumplir, entre otras, las siguientes características:


• El Web tenía que ser distribuido: La información repartida en páginas no muy grandes enlazadas entre sí.

• El Web tenía que ser hipertexto y debía ser fácil navegar por él.

• Tenía que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo...) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS,...).

• Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y rápido.

Estas características son las que marcaron el diseño de todos los elementos del WWW incluida la programación de páginas Web. Como respuesta a todos estos requisitos se creo el lenguaje HTML (HiperText Markup Language), cuyas siglas significan "lenguaje hipertexto de marcas".

Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página web con diferentes tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes, formularios interactivos, etc.

Qué se necesita para crear una página web.

Un editor de texto simple, como el block de notas de Windows, es todo lo necesario para crear una página Web.

Una de las características de este lenguaje más importantes para el programador es que no es necesario ningún programa especial para crear una página Web. Gracias a ello se ha conseguido que se puedan crear páginas con cualquier ordenador y sistema operativo. El código HTML, como hemos adelantado en el párrafo anterior, no es más que texto y por tanto lo único necesario para escribirlo es un editor de texto como el que acompañan a todos los sistemas operativos: edit™ en MS-DOS, block de notas en Windows,vi™en UNIX, etc. Por supuesto estos no son los únicos editores de texto que pueden ser usados, sino cualquier otro. También se puede usar procesadores de texto, que son editores con capacidades añadidas, compo pueden ser Microsoft Word™ o WordPerfect™ pero hay que tener cuidado porque en ocasiones hacen traducciones automáticas del código HTML que no siempre son deseadas. En estos dos últimos casos, también hay que tener en cuenta que deberemos guardar el archivo en modo texto.



Una vez hemos escrito el código deberemos guardar el archivo (con formato de texto) con la extensión .html ( o .htm en MS-DOS, Windows 3.1 o cualquier otro sistema que sólo acepte tres letras en la extensión. Los siguientes son nombres válidos de archivos que contengan código HTML: index.html, index.htm,principal.html,
PRINCIPAL.htm, etc...

NOTA: Si el editor o procesador de textos usado para crear la página obliga a usar la extensión .txt al guardar el archivo en modo texto, deberemos guardarlo con esta extensión, por ejemplo como index.txt, y posteriormente

cambiar el nombre del archivo desde fuera del programa a index.html o index.htm . Para ello usaremos el comando rename en MS-DOS; en Windows 3.1 lo haremos mediante el administrador de archivos y en Windows 95 con el explorador. En otros entornos, como Linux, es mas raro que se de esta situación.

ATENCIÓN: El World Wide Web es un sistema que diferencia las mayúsculas de las minúsculas. Es un error común llamar a un archivo index.html y luego referirse a él como Index.html. Aunque en nuestro ordenador puede funcionar al publicarlo seguramente no lo hará. Por esta razón es una norma general usar siempre minúsculas para los nombres de los archivos html.

Últimamente han aparecido nuevas alternativas que facilitan la programación de páginas Web. Son los editores HTML. Podemos dividir estos editores en dos grupos:

• Asistentes: ayudan a crear el código HTML e incluyen plantillas de código prefabricadas, por ejemplo HotDog™ (Win), HomeSite™(Win),HTML Editor™ (Mac), Quanta™ (Linux, KDE) o Bluefish™, (Linux, GNOME).

• Conversores: son programas con otra función que la de la programación Web pero que permiten convertir a
HTML. Son ejemplos de conversores Microsoft Word ™,Quark XPress™ y PageMaker™.

• Editores WYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes): estos editores permiten crear páginas web sin escribir código HTML como si se tratase de un programa de dibujo por ordenador. Algunos ejemplos de este tipo de editores son Macromedia Dreamweaver™, HotMetal™ o Microsoft Frontpage™.

Algunos editores WYSIWYG permiten, además, modificar el código HTML directamente.

Algunas razones para usar HTML.

Todos estos editores HTML tipos pueden ser de gran ayuda y tienen sus ventajas e inconvenientes, pero la experiencia demuestra que conocer el lenguaje HTML ofrece bastantes ventajas:


• Seremos capaces de aprovechar todas las características de este lenguaje, incluso las más nuevas.

• Aunque se use inicialmente un editor WYSWYG tendremos los conocimientos suficientes para modificar posteriormente el código que éste ha creado. Así se pueden corregir errores o incluir etiquetas no soportadas por el editor.

• No dependeremos de la disponibilidad de una herramienta concreta para poder crear páginas web. Con un simple editor de textos será suficiente.

El principal problema de usar editores conversores y WYSIWYG es la necesidad de trabajar con dos archivos- fuentes por separado, por un lado el archivo del editor y por otro el archivo del código HTML una vez generado, lo que nos complica la vida a la hora de realizar cambios en nuestro Web. Sin embargo su utilidad es innegable y su combinación con un buen conocimiento del lenguaje HTML nos convertirá en unos grandes programadores de páginas Web capaces de realizar creaciones impactantes visualmente y de gran calidad técnica.

HTML es un lenguaje descriptivo.

Probablemente el lector ha usado alguna vez un procesador de texto (Abiword™, Microsoft Word ™ o KWord™) o un programa de descripción de páginas (QuarkXPress™). Con este tipo de aplicaciones el usuario tiene un control total sobre los elementos del documento: se le puede decir al programa "pon este texto con este tamaño", "sitúalo a 1 cm. del borde", "usa este sangrado para los párrafos", etc... Con HTML el programador no tiene este tipo de control sobre los elementos que incluirá en su página. El objetivo de este lenguaje será simplemente describir cómo es una página de manera que examinando esa descripción el navegador del usuario final sea capaz de mostrarlo de la mejor manera posible. Con HTML podremos indicarle al navegador que este es un titular, aquí comienza un párrafo, estos son elementos de una lista, etc. posteriormente el navegador decidirá como mostrar esos elementos.

Los navegadores en modo texto como Lynx también pueden mostrar páginas Web gracias al carácter descriptivo de HTML.

¿Por qué funciona así? En un principio esta característica del HTML puede resultar molesta para el creador de la página, que no puede saber como será vista su página más que de una forma aproximada. Sin embargo es fundamental para conseguir que el World Wide Web pueda ser navegado con cualquier tipo de ordenador (dicho con otras palabras, que el WWW sea multiplataforma). Debemos tener en cuenta que no todos los sistemas operativos son gráficos, que incluso usando un mismo sistema operativo existen diferentes resoluciones de pantalla, ... Por esta razón el lenguaje necesario para crear páginas debe ser descriptivo y como consecuencia tras crear una página el programador debe ver como es mostrada con varios navegadores distintos como Netscape Navigator™ o Microsoft Internet Explorer™ incluyendo algún navegador de texto como Lynx™.

Pero una consecuencia más importante aún de esta característica, es que ha permitido que aparezcan navegadores vocales, que leen las páginas en vez de mostrarlas. Gracias a ello personas ciegas también han podido disfrutar del WWW. Es más, esta misma tecnología esta siendo usada para los nuevos navegadores embarcados en coches que leen la página al conductor para que no se distraiga.

NOTA: Una vez creada una página es recomendable probar nuestra página, no sólo con varios navegadores, sino también con varias resoluciones de pantalla distintas como por ejemplo: 640x480, 800x600 y 1024x768. Si existe la posibilidad de probarlo además con un navegador vocal, mucho mejor aún.

Un buen ejemplo de este carácter descriptivo es la definición de titulares, también llamados encabezados, en HTML. Vamos a adelantarnos un poco en esta introducción para mostrar este ejemplo, en él se muestra como poner el titular de una página:


<h1>Bienvenido a la página de La Super Editorial</h1>


Con este código estamos describiendo el texto Bienvenido a la página de La Super Editorial como el texto de máxima importancia en nuestra página, es el titular. En los navegadores más usados como el Netscape Navigator™ o el Microsoft Internet Explorer™ este titular será mostrado como un texto en negrita y de tamaño grande (el tamaño más grande posible). Sin embargo repetimos una vez más que existen navegadores como pueden ser Lynx
™ o Emacs-W3™ que son bastante usados por la comunidad académica y universitaria que sólo pueden mostrar texto y no pueden variar el tamaño de la letra. Por esta razón la etiqueta <h1> no dice que el texto que encierra debe ser de tal tamaño o si debe ser negrita o no. Esta etiqueta sólo le dice que este texto es el más importante de la página, el titular. Sabiendo esto el navegador que funcione en modo texto puede resaltar dicho titular con los medios de que dispone, como por ejemplo poniéndolo en mayúsculas o usando distintos sangrados.

También podemos encontrar ventajas de la descripción mirando al futuro. Imaginemos que la informática evoluciona hasta tal punto que los monitores de dentro de unos años pueden mostrar objetos en tres dimensiones. Sería muy interesante que el titular de nuestra página fuese en 3-D de manera que resaltase lo máximo posible. Pues bien, si lo hemos definido como cabecera principal (y no como letra de tamaño 20 puntos y en negrita, por ejemplo) el navegador sabe que queremos que ese texto sea el más importante y puede actuar de manera inteligente poniéndolo automáticamente en tres dimensiones, ¡sin que nosotros hayamos cambiado una sola línea de nuestro código! Parece interesante ¿no?

Una vez a quedado claro cual es el espíritu de HTML, hay que decir que últimamente se han introducido métodos para conseguir un mayor control sobre las páginas. Estos métodos permiten controlar aspectos como el tamaño de la letra la disposición (aproximada) de imágenes y texto de manera que se facilita la labor del programador. Pero hay que tener siempre en mente que siempre habrá ligeras diferencias entre como verán las páginas unos usuarios u otros y no debemos pretender poder controlar la presentación y diseño de nuestra página hasta el mínimo detalle.

Las bases de HTML.

Una vez repasadas unas nociones básicas de HTML y de la programación de páginas Web en general entraremos de lleno en la programación con este lenguaje. Pronto nos daremos cuenta de la sencillez de este lenguaje lo que le convierte en un lenguaje muy fácil de aprender y que nos permitirá crear páginas con mayor facilidad aún.

Las órdenes de este lenguaje estarán formadas por unos comandos llamados etiquetas que pueden tener o bien la siguiente estructura:

<NOMBRE_ETIQUETA>

O bien esta otra:


<NOMBRE_ETIQUETA> TEXTO </NOMBRE ETIQUETA>


Como vemos, la primera estructura está formada por una única instrucción y la segunda por dos: una que marca el inicio de la etiqueta y otra que marca el final, con texto entre ambas.


Por ejemplo, para indicarle al navegador que queremos que pinte una línea horizontal debemos escribir:

<hr>

Así de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los símbolos menor que (<) y mayor que (>), todas las instrucciones de HTML deben ir encerradas entre estos dos símbolos.

Pero las etiquetas no se limitan a indicar ordenes tan sencillas, estas órdenes tienen en ocasiones parámetros. Por ejemplo la etiqueta <hr> tal y como lo hemos hecho anteriormente daría lugar a la línea que vemos en la figura 1.5, es decir le dice al navegador que dibuje una línea horizontal en la pantalla. Esta línea tiene un grosor predeterminado y un ancho variable en función del tamaño de la ventana del navegador.

Uso básico de una etiqueta HTML sin ningún tipo de parámetros. Ejemplo usando la etiqueta <hr> para crear una línea horizontal.

Sin embargo hay muchas formas de pintar una línea y sería deseable poder elegir detalles tales como la anchura y el grosor que va a tener dicha línea. Para especificar este tipo de detalles se crearon los atributos de las etiquetas. Este nuevo elemento se introduce en una etiqueta de la siguiente manera:

<etiqueta atributo="valor">

Es decir, en primer lugar ponemos el nombre de la etiqueta, después el nombre del atributo seguido por un signo igual y posteriormente el valor que queramos darle a ese atributo encerrado entre comillas una etiqueta puede tener tantos atributos como se deseen y en ocasiones son necesarios para que la etiqueta tenga algún significado.

En nuestro ejemplo de la línea horizontal existe un atributo llamado SIZE, que significa tamaño en inglés, que permite controlar el grosor de la línea que será dibujada en pantalla. Veamos un ejemplo, en la figura 1.6 podemos ver la línea horizontal con diferentes grosores.

Las etiquetas tienen atributos para cambiar aspectos del efecto que producen. En este ejemplo vemos como se puede cambiar el grosor de una línea con el atributo SIZE.

El valor que toma el atributo size determina el número de puntos de pantalla o pixeles que debe ocupar, en grosor, la línea. En posteriores capítulos estudiaremos en detalle la etiqueta <hr> y todos sus atributos.

En la figura 1.6 vemos que el valor numérico que le damos al atributo size no va entrecomillado, por ejemplo en <hr size=5>. En HTML no es necesario entrecomillar los valores de los atributos cuando están formados únicamente por números [0-9], letras [a-z, A-Z], guiones y puntos. En todo caso es muy recomendable incluir las comillas siempre. De esta forma no tenemos que preocuparnos de cuando ponerlas y cuando no y a la vez cumplimos el nuevo estándar XHTML. Para los curiosos adelantaremos que XHTML es idéntico a HTML pero con algunas restricciones adicionales del mundo de XML.

Antes de empezar con el código HTML básico conviene hacer saber al lector que aunque en todos los ejemplos usados hasta ahora las etiquetas usadas estaban escritas en mayúsculas en realidad es indiferente el uso de estas o de minúsculas. Sin embargo las mayúsculas son de uso común para que sea más fácil distinguirlas del texto y por tanto seguiremos usando este convenio a lo largo del curso.

En los ejemplos también usaremos distinto sangrado (alineación de los párrafos) para los diferentes elementos del código para mostrar los niveles de anidamiento. Este sangrado no es necesario y el lector puede optar por ignorarlo si decide copiar los ejemplos para verlos en su navegador, sin embargo facilita la lectura del código y no afecta al modo en que los objetos de nuestra página serán mostrados.

Primeros pasos con HTML.


Conocidas ya las principales características de HTML estamos listos para aprender sus principales etiquetas y para crear nuestra primera página.

Estructura de una página.

Todo documento HTML está formado por los bloques que podemos apreciar en la figura 2.1. Pasemos a explicar cada uno de ellos.

Figura 2.1. Estructura de bloques de un documento HTML.

En primer lugar deberemos especificar que el archivo de texto que estamos escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de la etiqueta <html> al principio y al final de la página respectivamente:


<html>
Código de la página
</html>


El código de la página esta formado a su vez por dos grandes bloques, la cabecera y el cuerpo.

La cabecera de la página está delimitada por las instrucciones de inicio y fin de la etiqueta head. Estas instrucciones deben estar dentro de la etiqueta HTML de la siguiente manera:


<html>
<head>
Elementos de la cabecera
</head>
... Resto de código de la página ...
</html>


En la cabecera de la página se introduce toda aquella información que afectará a toda la página. En un principio esta información se limitará al título. Este título se indicará con la etiqueta title usando la siguiente sintaxis:

<html>
<head>
<title>Mi primera página WEB</title>
</head>
</html>


El resultado de ver esta página con nuestro navegador es el que se observa en la figura 2.2. Como vemos, el área de la pantalla donde suele estar la página está todavía vacía, pero si nos fijamos en la cabecera de la ventana del navegador vemos que el título a pasado de ser Microsoft Internet Explorer ™ a "Mi primera página WEB - Microsoft Internet Explorer™". Es decir el título que le demos a nuestra página con la etiqueta <TITLE> pasará a ser el título de la ventana del navegador.

Figura 2.2. El título de la página es mostrado en la parte superior de la ventana del navegador.

Además cuando un usuario vea nuestra página y decida incluirla en su lista de webs preferidos con la opción agregar a favoritos del menú Favoritos del navegador (en este caso el explorer) añadirá el nombre que le hemos dado a nuestra página en dicho menú, tal y como podemos apreciar en la figura 2.3. Aunque el nombre con el que se almacena un Favorito puede ser cambiado por el usuario, si hemos puesto un buen título, lo suficientemente descriptivo a cada una de nuestras páginas le evitaremos esa molestia.

Figura 2.3. Cuando los navegantes incluyan nuestra página a su menú de favoritos en su menú aparecerá el título que le hayamos dado a nuestra página con la etiqueta <TITLE>

Es importante resaltar que nada de lo que se ponga en la cabecera de la página será mostrado en la zona del navegador dedicada a mostrar el contenido, es decir, en la zona que vemos en blanco en la figura 2.2.

Esto nos induce a pensar que existe otra forma de indicar como será el contenido de la página, pues así es: el cuerpo es el siguiente gran bloque de nuestro documento HTML, éste quedará delimitado por la etiqueta body. En su interior introduciremos todos aquellos elementos de los que queremos que conste nuestra página como pueden ser testo, imágenes, tablas, etc. Conociendo la etiqueta body podemos ampliar el ejemplo anterior para que incluya texto.

<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
Hola a todos, como han deducido por el titulo esta es la primera pagina web que hago, espero que les
guste. Fdo. Jorge
</body>
</html>


En la figura 2.4 podemos apreciar como muestra el Internet Explorer™ este código. Como vemos todo el texto que hemos escrito entre las instrucciones de inicio y fin forman ahora el cuerpo de nuestra página.


Figura 2.4. En esta figura observamos la zona de la ventana en la que los navegadores mostrarán el texto que pongamos en el cuerpo de la página.


NOTA: Es posible que aunque no incluyamos las etiquetas html o body nuestras páginas sean visualizadas con algunos navegadores. Sin embargo no debemos confiarnos ya que lo más seguro es que con el resto de navegadores no se vean bien. Por esta razón es muy recomendable usar ambas etiquetas tal y como se ha descrito.

Una vez que ya sabemos insertar contenido en una página pasaremos a estudiar las diferentes etiquetas que sirven para darle formato a ese contenido.

Los encabezados.

Usualmente un documento tiene, además de texto llano, una serie de encabezados o titulares. Para ello el lenguaje
HTML posee una serie de etiquetas que permiten disponer de titulares de hasta 6 niveles de importancia.

Estas etiquetas son: <h1>, <h2>, <h3>, <h4>, <h5> y <H6>. La letra "h" al principio del nombre de estas etiquetas provien de la abreviatura de la palabra inglesa heading que significa encabezado. Siguiendo a la hache hay un número del uno al seis que indica la importancia del titular siendo el más importante el uno y el menos importante el seis. En la figura 2.5 se puede ver un ejemplo de cómo muestra las cabeceras Internet Explorer™.

Figura 2.5. Distintos tipos de encabezados vistos con Microsoft Internet Explorer™.

El código usado en este ejemplo es el siguiente:

<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>

NOTA: Los encabezados empiezan siempre en una línea nueva y el texto que les sigue comenzará en la línea siguiente. Además el navegador podrá mostrar un espacio vertical adicional entre el encabezado y el texto anterior y posterior.

En él observamos que todos los titulares están en negrita y el tamaño de la fuente usada para cada encabezado va decreciendo conforme decrece la importancia del titular. Pero hay que tener en cuenta, tal y como comentábamos en la introducción, que este es sólo un ejemplo y que otros navegadores pueden mostrar estos encabezados de manera diferente.

Por otro lado los navegadores más usados hoy en día son el Internet Explorer™ y el Netscape Navigator™ y es normal prestarles una atención especial (aunque no exclusiva). Y en la figura 2.6 podemos apreciar cómo con este último se muestra los encabezados de una manera prácticamente idéntica. Por esta razón podemos estar casi seguros de que los usuarios verán los encabezados de la forma mostrada en ambas figuras.

Figura 2.6. Distintos tipos de encabezados vistos con Netscape Navigator

Hay que destacar que los encabezados de h1 a h4 pueden ser usados como títulos ya que los navegadores suelen usar un tamaño de letra mayor que el habitual para mostrarlos. Sin embargo los encabezados h5 y h6 suelen ser mostrados con letra más pequeña aún que el texto y por esta razón se usan como notas a pie de página o comentarios de poca importancia.

El ejemplo mejorado.

Ahora que sabemos usar encabezados los utilizaremos para mejorar ligeramente nuestra página. En la figura 2.7 podemos ver cómo se muestran las modificaciones.

Figura 2.7. Ejemplo de página Web con dos tipos de encabezados y dos párrafos.

Esta página ha sido creada con el siguiente código:


<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
<h1>Mi primera página WEB</h1>
<h2>Bienvenida</h2>

Hola a todos, como han deducido por el titulo esta es la primera pagina web que hago, espero que les guste. 

<h2>Proposito</h2>

En esta página iré practicando con los conocimientos que adquiera en el curso de HTML

</body>
</html>


Conclusión.

Ya sabemos mucho sobre la programación de páginas. Conocemos las principales características del lenguaje HTML y qué es necesario para crear un Web. Hemos aprendido además las bases del lenguaje y hemos creado nuestra primera página de ejemplo, con texto y en cabezados, y la hemos puesto un título.

En la siguiente entrega realizaremos la primera página web completa, con párrafos, imágenes e hiperenlaces. Aprenderemos también a alinear el texto a los dos lados de la página y a combinar esta alineación con la inclusión de imagenes. Igualmente veremos cómo es posible crear enlaces a distintos puntos de una página así como a otras páginas o puntos concretos de estas.

La primera página Web

Jorge Ferrer
Victor García
Versión 1.0

Copyright Jorge Ferrer y Victor García. Se otorga permiso para copiar, distribuir y/o modificar este doc- umento bajo los términos de la Licencia de Documentación Libre GNU, Versión 1.1 o cualquier otra ver- sión posterior publicada por la Free Software Foundation. Puede consultar una copia de la licencia en: http://www.gnu.org/copyleft/fdl.html

Tras un primer capítulo en el que hemos aprendido lo sencillo que es crear una página Web con el lenguaje HTML avanzamos en este segundo explicando las etiquetas más usadas a la hora de crear páginas y terminaremos elaborando la nuestra propia.

Hasta ahora hemos creado algunas páginas sencillas en HTML en las que fuimos capaces de introducir encabeza- dos y párrafos sencillos. En este capítulo aprenderemos una serie de etiquetas con las que tendremos conocimien- tos suficientes para elaborar una página profesional. Los temas que serán cubiertos en este capítulo son: párrafos en HTML, la etiqueta center, cómo insertar imágenes y cómo crear enlaces hipertexto.

Párrafos en HTML.

Ha llegado el momento de aprender a introducir un texto en una página web, pero antes es necesario comprender cómo será interpretado este texto. Cuando un navegador lee el código HTML de una página y lo interpreta para mostrar la página, todos los espaciados múltiples, tabulados o saltos de línea que se haya incluido en los textos serán interpretados como un único espacio. Esta característica suele sorprender (e incluso molestar) al principio, pero es innegable que esta forma de actuar es necesaria y concuerda con el carácter descriptivo de HTML.

La mejor manera de habituarse es probar, para ello proponemos los siguientes ejemplos de código que serán mostrados de la misma forma por el navegador aunque algunos contengan saltos de línea, otros tabulados entre las palabras, etc.


<h1>El conductor del coche le pregunto si se encontraba mal</h1>

<h1>
El conductor del coche le preguntó si se encontraba mal
</h1>

<h1>
El conductor del coche
le pregunto si se encontraba mal </h1>


En estos ejemplos podemos observar diversos saltos de línea y separaciones en el texto, sin embargo el navegador mostrará un solo espacio entre las palabras y producirá saltos de línea donde sea necesario en función del tamaño de la ventana. Las figuras 2.1 y 2.2 son ejemplos de cómo muestra el Explorer™ los códigos anteriores para diferentes tamaños de ventana.


Figura 2.1. Uso básico de una etiqueta HTML sin ningún tipo de parámetros. Ejemplo usando la etiqueta <hr> para crear una línea horizontal.

Conocida esta característica es momento de adentrarse en las distintas etiquetas que permiten tener un mayor control sobre el texto de nuestras páginas.

Saltos de línea.

En ocasiones puede ser conveniente introducir un punto y aparte cuando estamos escribiendo un texto. En HTML para hacer esto puede usarse la etiqueta <br>. Cuando el navegador se encuentra con esta etiqueta provoca un salto de línea y sigue mostrando el contenido de la página. Veamos un ejemplo:


Estaba internándose en lo desconocido. <br>
Durante todo el trayecto hasta Woodfield no dejó de pensar en los aspectos económicos, con el temor de estar cometiendo...


En este texto podemos observar cómo tras el primer punto era necesario un cambio de línea, por lo que hemos usado <br>.

Cómo se insertan párrafos.

Un párrafo es un conjunto de frases sobre un mismo asunto. En HTML para demarcar un párrafo se usa la etiqueta <p>, situándose la instrucción de inicio <p> al comienzo del párrafo y la instrucción de fin </p> tras la última frase. Entre ellas pueden insertarse tantos saltos de línea como se deseen así como muchos otros elementos HTML. A continuación se muestra un ejemplo:


<p>
Estaba internándose en lo desconocido.
</p>
<p>
Durante todo el trayecto hasta
Woodfield no dejó de pensar en los aspectos económicos, con el

Figura 2.2. Las etiquetas tienen atributos para cambiar aspectos del efecto que producen. En este ejemplo vemos como se puede cambiar el grosor de una línea con el atributo ’size’

temor de estar cometiendo...
</p>

Otra opción hubiera sido crear un único párrafo e insertar un salto de línea tras la primera frase:

<p>
Estaba internándose en lo desconocido.
<br>
Durante todo el trayecto hasta
Woodfield no dejó de pensar en los aspectos económicos, con el temor de estar cometiendo...
</p>


En la figura 2.3 se puede observar la diferencia entre los dos ejemplos en Explorer™. Puede observarse que en general los navegadores dejan un espacio vertical antes y después de cada párrafo, algo que no ocurre con los saltos de línea.

Figura 2.3. Ejemplo de un párrafo con un salto de línea y la división del mismo texto en dos párrafos.

Uso incorrecto de la etiqueta  p.

La etiqueta p es usada en muchas páginas de forma incorrecta. El error consiste en emplearla simple- mente para introducir un espacio (vertical) entre líneas. La forma adecuada es introducir las instrucciones de inicio y fin para marcar el comienzo y el fin de un párrafo.

Espacio entre líneas.

Para introducir un espacio vertical entre líneas debe usarse la etiqueta <br>. Si se ponen varias seguidas no se mostrará más espacio, pero esto puede solucionarse insertando entre las etiquetas la cadena " ". Por ejemplo para insertar tres líneas en blanco puede usarse:


<br> &nbsp;
<br> &nbsp;
<br> &nbsp;


El atributo ’align’ en la etiqueta <p> permite especificar la alineación del párrafo. Puede tener tres valores: "center", "left" y "right", para obtener un párrafo centrado, alineado a la izquierda o alineado a la derecha respectivamente. En la figura 2.4 se muestra el párrafo del código anterior con los tres tipos de alineación.

Figura 2.4. Con el atributo ’align’ se pueden crear párrafos alineados a la derecha, centrados o alineados a la izquierda.

Líneas horizontales para separar párrafos.

Si lo que se necesita es separar dos secciones diferentes de una página, ya sea texto o no, puede emplearse una nueva etiqueta: <hr>. Su nombre proviene del inglés Horizontal Rule (línea horizontal). Esta etiqueta está formada por una única instrucción y provoca que el navegador inserte una línea horizontal como la mostrada en la figura 2.3 que separaba los dos párrafos que se estaban comparando. Existen cuatro atributos que permiten modificar su apariencia. Estos son:

•’align’: Permite cambiar la alineación de la línea. Puede tomar tres valores:"left", "center" y
"right" para conseguir alineación a la izquierda, centro y derecha respectivamente.

•’noshade’: ’noshade’, que en inglés significa sin sombra, existe porque algunos navegadores gráficos como Navigator™ o Explorer™ muestran las líneas horizontales con un efecto tridimensional con sombra. Al incluir este atributo se elimina este efecto de manera que el navegador sólo mostrará una línea horizontal negra.

•’size’: Con este atributo se puede controlar el grosor de la línea. Como valor de este atributo se debe especificar el valor deseado en pixeles (puntos de pantalla).

•’width’: Este atributo permite especificar el ancho de la línea. El valor puede ser dado de una manera absoluta, especificando el ancho en pixeles (por ejemplo width=100) o de manera relativa respecto al ancho de la ventana del navegador usando porcentajes (por ejemplo width="90%"). Es más que recomendable usar este último sistema de manera que obtengamos un resultado apropiado independientemente del tamaño que cada usuario quiera dar a la ventana de su navegador.

Estos atributos pueden ser usados conjuntamente para combinar sus efectos. En la figura 2.5 podemos ver el efecto de cada uno por separado en Explorer™ junto con los valores empleados en cada caso.

Figura 2.5. Con los nuevos atributos de la etiqueta <hr> podemos controlar el ancho, grosor alineamiento y sombra de la línea horizontal.

La etiqueta <blockquote>... </blockquote>

Otra etiqueta relacionada con el formato de párrafos en HTML es <blockquote>, que consta de una instrucción de inicio y una de fin y que indica que el párrafo que encierra es un texto parafraseado. Al usar esta etiqueta el navegador mostrará el texto en u nuevo párrafo con márgenes a la izquierda y a la derecha. En la figura 2.6 puede verse un uso típico de esta etiqueta.

No abusar de las líneas horizontales.

Es conveniente no usar mucho las líneas horizontales, limitándolas al comienzo y fin de la página. La razón de esto es que las líneas en medio de la página dificultan la lectura de esta. Si se desea separar secciones un espacio vertical del tamaño adecuado es más efectivo.

Figura 2.6. La etiqueta <blockquote> es usada para insertar bloques de texto que citan a otro autor. Los navegadores suelen introducir un sangrado en este texto.

Que se corresponde con el código:

Mi poema favorito es aquel de Federico García Lorca que reza:
<blockquote>
Mi corazón, como una sierpe<br> se ha desprendido de su piel,<br> y aquí la miro entre mis dedos<br> llena de heridas y de miel<br>
</blockquote>

La etiqueta <address>... </address>

Muy relacionada con la anterior, es la etiqueta <address>, que en inglés significa dirección. Esta etiqueta está compuesta, igualmente, por dos instrucciones y se usa para incluir información sobre el autor de una página WEB o elementos relacionados. Puede encontrarse un ejemplo de su uso en las coletillas existentes al final de muchas páginas en las que se incluye información variada para el usuario como puede ser, además del autor, la fecha de la última modificación, la fecha actual, la URL de la página, etc. como se muestra en la figura 2.7.

Figura 2.7. En esta página se observa como al final de la página se han incluido datos de los autores y de la página. Para ello se ha usado la etiqueta <address>.

La etiqueta <center>... </center>

Acabamos de ver una serie de etiquetas que permiten cambiar de línea, crear distintos tipos de párrafos o insertar líneas que les separen. También hemos visto que alguna de las etiquetas utilizadas tienen el atributo ’align’ que permite indicar el alineamiento.

En ocasiones puede ser muy útil indicar que algún texto, imagen o algún otro elemento de la página debía ser centrado. Sin embargo no todas las etiquetas tienen el atributo ’align’. La solución es emplear una nueva etiqueta: center. Ésta está compuesta por una instrucción de inicio y una de fin de manera que todo lo que quedaba entre ellas, fuese lo que fuese, estuviese centrado. Por ejemplo en el ejemplo del verso de Lorca podemos centrarlo escribiendo:


Mi poema favorito es aquel de Federico García Lorca que reza:
<center>

<blockquote>
Mi corazón, como una sierpe <br> se ha desprendido de su piel,<br> y aquí la miro entre mis dedos<br> llena de heridas y de miel <br>
</blockquote>
</center>

Y el resultado obtenido hubiese sido el de la figura 2.8

Figura 2.8. Con la etiqueta <center> es posible centrar cualquier elemento de nuestra página como por ejemplo el verso de Lorca de la figura 2.6.

Nota

Actualmente existen alternativas mejores que la etiqueta center para especificar el alineamiento. En particular la etiqueta div y las hojas de estilo en cascada que serán tratadas a lo largo de este curso.

Cómo insertar imágenes en una página.

En el cuarto capítulo de la obra trataremos con detalle el mundo de las imágenes en el WWW y aprenderemos todas las posibilidades gráficas que ofrece. En este capítulo aprenderemos, como introducción, a insertar imágenes para dar mas vida a nuestra página.

La etiqueta usada para insertar imágenes es: <img >. Esta etiqueta está compuesta por una única instrucción y por tanto </img> no existe y su uso está prohibido. Podemos insertar una imagen en medio de una frase como si fuese una palabra más de ella y será mostrada por el navegador a continuación del texto (o cualquier otro elemento anterior) como podemos ver en el ejemplo de la figura 2.9.

Figura 2.9. Al insertar una imagen esta se entremezcla con el texto. Cuando la imagen es pequeña se crean interesantes efectos como este.

En ella se puede observar como hemos insertado una flecha en medio de la frase y después de la imagen hemos seguido escribiendo. Aunque podemos crear este efecto con imágenes de todos los tamaños no es recomendable hacerlo con aquellas que tengan una altura mucho mayor que la del texto.

Para insertar una imagen en una página WEB necesitamos tenerla en un archivo aparte. Existen multitud de formatos para almacenar una imagen en un archivo: BMP, GIF, JPEG, XPM, XBM, PNG, TIFF, etc. cada uno de los cuales tienen unas características. El formato elegido en el World Wide Web es el formato GIF que distingue a sus archivos porque tienen la terminación “.gif”. Podríamos decir que todos los navegadores son capaces de mostrar las imágenes incluidas en este formato. Los navegadores en modo texto suelen proporcionar métodos para ver las imágenes usando algún programa visor externo. Un segundo formato que se ha introducido en el WWW y que es soportado por la gran mayoría de los navegadores (incluyendo al Explorer™ y al Navigator ™) es el JPEG. Este formato es especialmente útil para las fotos ya que es capaz de comprimir este tipo de imagen de manera que ocupen hasta 4 veces menos que las imágenes con formato GIF. Los archivos que contienen imágenes con formato JPEG suelen tener la terminación “.jpg”.

Una vez tenemos la imagen en un archivo aparte es hora de escribir el código HTML que nos permitirá insertarla en la página. Como hemos comentado usamos la etiqueta <img> y para indicar el nombre del archivo usamos el atributo ’src’. En el ejemplo de la figura 2.9 el código usado para insertar la flecha es:


Pulsa en la flecha <img src="flecha1.gif"> para pasar a la
página siguiente.


Cómo crear enlaces hipertexto.

Una vez visto como introducir distintos tipos de texto y párrafos así como insertar imágenes en una página, lo único que queda por aprender para ser capaces de crear una página Web bastante completa son los enlaces hipertexto. Con ellos se pueden activar frases o palabras de la página para que al pulsar sobre ellas se salte a cualquier otra página de Internet que decidamos.

Estos enlaces hipertexto (en inglés links) no son más que unas zonas (habitualmente palabras o frases) especiales
de nuestro texto que ofrecen la posibilidad de pulsar sobre ellas para ir a otras páginas. El concepto del hipertexto no es nuevo, la mayoría de los lectores lo habrán usado ya en la ayuda de Windows™ o en otros muchos sistemas, lo realmente novedoso que ofrecen estos enlaces en el WWW es la posibilidad de pulsar y navegar hasta páginas que se encuentren en el otro extremo de la tierra. El navegante puede moverse de España a Japón con una única pulsación sobre el texto adecuado. En seguida se verá lo sencillo que es incluir esta impresionante tecnología en una página web.

Los enlaces pueden clasificarse en dos tipos, los internos o locales y los externos:

1.-Los enlaces internos son aquellos que enlazan las páginas que componen un mismo sitio web (web site). Todas estas páginas estarán (generalmente) en el mismo servidor WWW, y por tanto estarán también en el mismo ordenador. Por esta razón sólo será necesario indicar en nuestro código el nombre del archivo donde está la página que queremos enlazar y el directorio en el que se encuentra. Un ejemplo dirección de un enlace interno es:

/hobbies/index.html

2. Los enlaces externos permiten saltar desde una página hasta otra puede estar en cualquier otro lugar del mundo en otro servidor web. Al crear estos enlaces es necesario especificar la dirección completa de Internet (la URL) de la página que queremos enlazar. Por ejemplo:


http://www.otroservidor.com/hobbies/index.html


Por último, cabe resaltar que aunque la mayoría de las veces los links se usan para enlazar una páginas con otras también pueden usarse con imágenes, sonido, vídeo y prácticamente cualquier tipo de fichero.
ertexto.

La etiqueta <a>... </a>.

Esta etiqueta, de nombre sencillo, es la que va a permitir incluir en las páginas enlaces hipertexto. Su atributo ’href’ permite indicar cual es la página a la que debe saltar el usuario al pulsar sobre el texto adecuado. El texto del enlace será aquel que se introduzca entre la instrucción de inicio y la instrucción de final de la etiqueta y debe ser resaltado por el navegador para que el usuario sepa que puede pulsar en él. La estructura de un link es:


<a href="dirección_URL">
Texto que será sensible (hipertexto)
</a>


Los navegadores gráficos como Netscape Navigator ™y Microsoft Internet Explorer ™ resaltan este texto mostrándolo de un color diferente y subrayándolo, además el cursor cambiará al situarlo sobre el texto. Los navegadores que funcionan en modo texto como Lynx™ resaltan los enlaces hipertexto cambiando el color del texto y de su fondo.

Veamos un ejemplo sencillo del uso de enlaces. Se ha creado un sitio web personal con 2 páginas. La página principal se encuentra en el archivo index.html y se quiere que en ella haya un enlace a otra página donde se han escrito sobre los hobbies del creador del sitio web y que se encuentra en el archivo hobbies.html. El enlace podría ser algo así:


También puedes conocer mis <a href="hobbies.html">hobbies</a>

Anclas.

Un ancla es una marca que se sitúa en un punto determinado de una página. Posteriormente se podrá crear un enlace a ese ancla de manera que al pulsar sobre el texto apropiado en vez de saltar a otra página se salta al lugar donde esté el ancla, es decir, ya no se va al comienzo de la página como con los enlaces vistos hasta ahora. Dicho de otra forma usando anclas es posible que un enlace apunte al lugar concreto de una página que se desee.

Creando anclas.

Para crear anclas usamos, al igual que para crear enlaces, la etiqueta <a>, sin embargo no debe confundirse el lector porque aunque ambos elementos estén relacionados y se use la misma etiqueta para crearlos las funciones de cada uno son radicalmente diferentes. Las anclas sólo son marcas y son invisibles cuando visualizamos la página con el navegador. Por esta razón las anclas no definen ningún texto activo.

A pesar de ello es habitual encontrar texto entre las instrucciones de inicio y de fin como en el siguiente ejemplo:


<a name="nombreAncla">Comienzo</a>


Este texto no tiene ningún significado especial y será interpretado por los navegadores de igual forma que el texto de alrededor.

Como se ha adelantado en el ejemplo anterior, al crear anclas no se emplea el atributo ’href’. En su lugar se usa otro llamado ’name’. Con este atributo se da un nombre al ancla que luego nos servirá para referirse a ella.

Un ejemplo donde la utilidad de las anclas se hace evidente es en aquellas páginas en las que nos encontramos una lista ordenada alfabéticamente. Si la lista es muy larga moverse hasta la letra S, por ejemplo puede hacerse molesto. Pero usando anclas el autor de la página puede incluir todas las letras al principio de manera que si se pulsa sobre una letra se salta al lugar de la lista donde empiecen las entradas de la letra S.

En este caso se detallan todas las secciones del Web ordenadas alfabéticamente. Al principio de la página hay un listado con todas las letras del abecedario de manera que al pulsar sobre una letra vas al lugar de la página donde están las secciones que empiezan con esa letra. ¿Cómo se hace esto? Es muy sencillo, el proceso consta de dos pasos:


1. Primero hay que insertar el ancla en el lugar de la página donde se quiere poder saltar. Tomando como ejemplo una una página web que contiene un diccionario se emplearía el siguiente código:


...
<a name="S">
</a>
Salud
Santa Claus
Seguridad
...


2. En segundo lugar se crea un enlace al principio de la página un que apunte al ancla. En este ejemplo el código usado es:


<a href="#S">S
</a>


En este ejemplo al pulsar sobre la letra S se salta directamente al lugar de la página donde se encuentra la palabra salud, que es la primera de las que comienzan con “S”, que es el efecto deseado. Para especificar que el enlace apunta a un ancla se ha incluido un signo # seguido del nombre del ancla.


La etiqueta FONT.

Las etiquetas de los apartados anteriores permiten modificar ciertos aspectos de la apariencia del texto de una página, pero ¿es suficiente?. Cuando el WWW se hizo más y más popular y la apariencia de las páginas comenzó a adquirir la importancia actual se hizo evidente que no.

Para poder controlar en mayor medida aún la apariencia del texto se creó la etiqueta FONT. A continuación se explicarán sus virtudes, aunque cabe destacar que actualmente existe una alternativa mejor: las hojas de estilo en cascada o CSS que será tratada en los últimos capítulos del curso.

Cambiando el tamaño del texto.

La etiqueta FONT permite tener un gran control sobre el tamaño de un texto. Este tamaño se especifica con su atributo SIZE y afectará al texto que encierren la instrucción de inicio (<FONT SIZE="">) y de fin (</FONT>).

La forma de especificar el tamaño del texto consistirá en darle el valor deseado al atributo SIZE, si bien hay dos formas de hacerlo:


1. La primera de ellas es indicar un tamaño absoluto de 1 a 7. Correspondiendo 7 al tamaño mayor y 1 al menor. El tamaño por defecto del texto es el equivalente al número 3. Veamos un ejemplo:


Esto es texto normal
<FONT SIZE="6">
y esto es grande
</FONT>

2. La segunda consistirá en indicar un tamaño relativo respecto al que haya por defecto. Por ejemplo, para poner un tamaño 6 y suponiendo un tamaño por defecto 3 se usaría:


Texto de tamaño 3
<FONT SIZE="+3">
Tamaño 6
</FONT>


Es necesario hacer notar que el aumento de tamaño se tomará siempre respecto al que se tenga por defecto (y que será 3 mientras el usuario no cambie las preferencias de su navegador), por tanto anidando varias etiquetas FONT no se irá aumentando el tamaño del texto como ocurría con la etiqueta BIG. Por ejemplo:

D1
Texto normal (tamaño 3),
<FONT SIZE="+1">
Texto de tamaño 4 ,
<FONT SIZE="+1">
este texto sigue teniendo tamaño 4
</FONT>
</FONT>


Cambiando el color del texto.

Con otro atributo de la etiqueta FONT: COLOR se puede cambiar el color del texto con la misma facilidad con la que hasta ahora se ha cambiado su tamaño. En un principio la única forma de indicar un color consistía en usar un código hexadecimal de la siguiente manera:


<FONT COLOR="#RRGGBB">


Dónde hay que sustituír RR por dos números hexadecimales que indican la cantidad de rojo (desde 00 que es ausencia de color a FF que es máxima cantidad de color), GG por otros dos que indican la cantidad de verde y BB por dos que indican la cantidad de azul. Combinando estos tres colores en diferentes proporciones se pueden crear hasta 16 millones de colores. Este sistema suele parecer ligeramente complicado en un principio, pero con la práctica o con ayuda de herramientas gráficas de selección de colores se convierte en un método bastante sencillo e increíblemente potente

Existe un segundo método de indicar el color que sin duda le resultará al lector más sencillo. Este método consiste en poner como valor de COLOR el nombre del color en inglés. Los colores aceptados son:

Black (negro)
White (blanco)
Green (verde)
Maroon (marron rojizo)
Olive (verde oliva)
Navy (azul marino)
Purple (violeta)
Red (rojo)
Yellow (amarillo)
Blue (azul)
Teal (verde azulado)
Lime (verde lima)
Aqua (azul claro)
Fuchsia (fusia)
Silver (gris claro)

Aunque además de estos existen otros valores, no son soportados en todos los navegadores.

Y la forma de usarlas queda clara en el siguente ejemplo:


<H1>
<FONT COLOR="FUCHSIA">
Colores en el Web
</FONT>
</H1>
ya podemos decir que sabemos poner colores en las páginas Web,
<FONT COLOR="green">
verde
</FONT>,
<FONT COLOR="blue">
azul
</FONT>
<FONT COLOR="red">
rojo
</FONT>,
etc. Ninguno se nos resiste.

Acentos y otros caracteres especiales.

Algunos caracteres distintos de los habituales en los lenguajes anglosajones son considerados en el mundo de la informática como caracteres especiales. Dentro de estos se incluyen las letras acentuadas ni la letra eñe.

En los últimos años se ha avanzado mucho en conseguir que cualquier ordenador pueda leer todos los caracteres de todos los idiomas. En concreto es ya poco habitual que no se soporten los caracteres latinos. En cualquier caso es interesante saber que HTML ofrece mecanismos para insertar estos y otros caracteres especiales en aquellos sistemas donde no están soportados.

Sugerencia:

Una regla mnemotécnica para recordar qué caracteres son considerados especiales por HTML es la siguiente : " Si se puede escribir un carácter pulsando sobre una sola tecla del teclado o usando como ayuda las teclas MAYÚSCULAS o ALT-GR entonces ese carácter es válido". En el teclado español hay que hacer tres excepciones: la letra ’ñ’ y los símbolos ’¿’ y ’¡’ que no son válidas.

El mecanismo ofrecido por HTML consiste en unos códigos especiales que todos los navegadores pueden entender. A estos códigos se les llama entidades de caracteres o con el nombre inglés: character entities. Todos estos códigos comienzan por el símbolo ’&’ (ampersand) y terminan con el símbolo ’;’ (punto y coma). Puede distinguirse entre dos tipos:


** Entidades de caracteres con nombre: son aquellas en las que los símbolos ’&’ y ’;’ se pone el nombre (o abreviatura) asignado a ese carácter. Sólo existen para los caracteres especiales más usados.




** Entidades de caracteres numéricas: en este tipo de entidades entre ’&’ y ’;’ se escribe el número asignado a ese carácter en el estándar ISO-Latin-1 precedido de una almohadilla: ’#’. Este tipo de entidades son menos usadas que las anteriores aunque tienen la ventaja de abarcar cualquier letra posible en cualquier idioma.




Entidades de caracteres para caracteres españoles.

Sin duda, en España los caracteres considerados cómo especiales en el resto del mundo que más se usan son los acentos, la letra eñe y los símbolos de apertura de interrogación (¿) y admiración (¡). En la tabla siguiente se puede ver un un listado con dichos caracteres en los que mostramos las entidades de caracteres con nombre y numéricas que tienen asociados.




Listas en HTML.

Junto con los párrafos y los encabezados, las listas son uno de los elementos HTML más comúnmente usados en las páginas web. En un momento sabremos, no sólo crear listas, sino crear varios estilos de estas, una para cada ocasión.

El lenguaje HTML define los siguientes tipos de listas:


• Numerada u ordenada.

• No ordenada.

• Listas de glosario o de definición.

• Menús.

• Usadas con párrafos cortos.

• Listas de directorio.

Pronto sabremos como crear cada una de ellas y cuando es conveniente usar una u otras, y comprobaremos, una vez más, la gran sencillez del lenguaje HTML una vez nos hemos habituado a él.

Etiquetas necesarias para crear listas.

La forma de crear listas difiere ligeramente de los elementos HTML vistos hasta ahora, ya que consta de dos pasos. Primero hay que definir el tipo de lista y después deben insertarse cada uno de los elementos de lista.

Al crear una lista deberemos indicar su inicio y su fin. Para empezar la lista usaremos la instrucción de inicio de la etiqueta de esa lista. Existe una etiqueta para cada tipo distinto de lista, por ejemplo, para crear una lista no ordenada será necesario usar la etiqueta UL (su instrucción de inicio será <UL>). Una vez hemos abierto la lista deberemos insertar, como hemos dicho antes, cada uno de los elementos de lista. Para ello usaremos una nueva etiqueta (o dos en algún caso) que dependerá del tipo de lista. En el caso de la lista no ordenada los elementos se introducen con la etiqueta de una única instrucción LI, por ejemplo:


Yo practico:
<UL>
<LI>Fútbol
<LI>Baloncesto
<LI>Tenis
<LI>etc.
</UL>

El último paso, que ya hemos anticipado en este ejemplo, será cerrar la lista, para lo cual usaremos la instrucción de fin de UL: </UL>.

Y a todo esto, ¿dónde está la diferencia?. Pues bien, la diferencia es la etiqueta LI (En otras listas se usará también LI o alguna etiqueta similar, como luego veremos). La etiqueta UL no tiene ningún significado por sí sola, necesita a LI. Y por otro lado LI no puede ser usada como una etiqueta independiente sino que debe ir dentro de UL. Por esta razón en ocasiones se suele llamar a LI subetiqueta.


Listas ordenadas.

Este tipo de listas numera los elementos de lista en el orden en el que se han introducido en el código HTML. La numeración se realiza con números empezando por el 1.

Nota: Las últimas extensiones de HTML permiten elegir entre distintos tipos de numeración para las listas ordenadas. Estas extensiones serán cubiertas en un capítulo posterior.

Este tipo de listas queda delimitado por la etiqueta <OL>...</OL> (OL: Ordered List, Lista ordenada), y cada elemento se inserta, al igual que en el caso de listas no ordenadas, con la etiqueta <LI>. Ejemplo:

Un buen equipo adaptado a las nuevas tecnologías consta de:
<OL>
<LI>CPU rápida
<LI>Impresora a color de buena definición.
<LI>Altavoces y cámara de vídeo.
<LI>Módem de velocidad 28K o superior.
</OL>


El navegador automáticamente numera los elementos de lista. Si en algún momento queremos insertar un nuevo elemento entre los existentes usando, de nuevo, <LI>, se realiza automáticamente una renumeración de los elementos de la lista.

Creación de comentarios en HTML.

Para crear un comentario no se usa una etiqueta, aunque es una estructura parecida. En primer lugar ponemos una cadena que indica el comienzo del comentario: <!--, esto es, el símbolo menor que, seguido del símbolo fin de exclamación y de dos guiones, todo ello sin espacios entre ellos. Todo el texto que le siga será parte de comentario, que terminará cuando insertemos la cadena de fin: --> , dos guiones y el símbolo mayor que. La estructura de un comentario es por tanto:


<!--Esto es un comentario-->


Suele ser recomendable dejar un espacio entre ambas cadenas y el texto anterior y posterior, tal y como acabamos de mostrar.

Veamos algunos ejemplos prácticos de comentarios:


<!--Aquí comienza el cuerpo de la página-->
<!--Cambiar este párrafo para que se entienda mejor-->
<!--Debería añadir más enlaces en esta página-->

Usando color en el WWW.

Existen diversas etiquetas y atributos en HTML que permiten cambiar el color de los elementos de una página o incluso el color del fondo de esta. Pero antes de ver estas etiquetas es necesario explicar algunas cosas sobre como usar el color en las páginas Web.

En el tercer capítulo ya adelantamos, cuando aprendimos a dar color al texto, que existían dos métodos para indicar el color, estos métodos son:


• Usar un número hexadecimal que identifica a ese color, por ejemplo #FF0000 ser refiere al color rojo.

• Usar uno de los nombres (en inglés) predeterminados por los navegadores para los colores más usados, por ejemplo para poner, al igual que antes, el color rojo usaríamos: ’red’.

Por supuesto para el programador es mucho más sencillo aprenderse los nombres de los colores en inglés que no un código hexadecimal que nos resulta mucho más extraño. Sin embargo usar nombre de colores tiene algunas limitaciones. Por un lado sólo abarca unos pocos colores y por otro tiene el inconveniente de que no todos los navegadores son capaces de entenderlos, mientras que sí entienden el código hexadecimal. Aun así podemos encontrar 16 colores que son entendidos por gran parte de los navegadores y por supuesto también Netscape Navigator™ y Explorer™ (Guenos en esos tiempos ahora ya existen mas exploradores MozillaFireFox, Google Chrome ) que son los más usados.




Para construir el código de un color se usa un método que podemos comparar con el de un pintor con una paleta de tan sólo tiene 3 colores y los mezcla para conseguir el resto de los que necesita para pintar un cuadro. En el código usado por el lenguaje HTML estos tres colores son el rojo, el verde y el azul, es decir, se usa la paleta RGB (Red, Green, Blue). Para crear todos los colores se usan mezclas de estos en distintas cantidades. Estas cantidades se indican con un número del 0 al 255, correspondiendo el 255 a la máxima cantidad de color posible. Si ponemos cero de todos los colores obtendremos el color negro, si ponemos 255 de todos obtendremos el blanco. Para crear amarillo, por ejemplo, podemos mezclar 255 de rojo, 255 de verde y nada de azul; y si en vez de poner 255 de rojo y verde ponemos 230 de cada obtendremos un amarillo más oscuro.

Sin embargo todavía queda una complicación y es que el número tendremos que ponerlo en hexadecimal.

Nota: Un código hexadecimal está basada en una numeración que está compuesta por 16 símbolos en lugar de
10 como el sistema decimal. Estos 16 símbolos son 1, 2, 3, 4, 5, 6, 7, 8, 9, A (10), B (11), C (12), D (13), E (14) y F (15). Por ejemplo, el siguiente número, el 16, se escribe en hexadecimal: ’10’, mientras que el número hexadecimal ’1F’se corresponde con el 31 decimal.

Usando el código hexadecimal podemos indicar la cantidad de color del 0 al 255 con sólo dos dígitos (del 0 al
FF), y una vez que nos hemos acostumbrado no resulta tan complicado.

Nota: Afortunadamente existen editores HTML que ponen automáticamente el número hexadecimal de los colores. También existen programas independientes como HTMLib Colour Wizard™ que permite indicar color en decimal o incluso seleccionarlo de una paleta y él te genera el código HTML.

Color de fondo.

Para cambiar el color de fondo de nuestras páginas usaremos un nuevo atributo de la, ya conocida, etiqueta BODY. El nuevo atributo se llama BGCOLOR y debe ser añadido a la etiqueta BODY existente:


<body bgcolor="#RRGGBB">



Por ejemplo para crear una página con el fondo de color azul podemos usar:


<body bgcolor="#0000FF">

O bien:

<body bgcolor="Blue">


Color del texto y Links.

Igual que se puede cambiar el color del fondo de la página se puede cambiar el color de su texto. Para ello se usan cuatro nuevos atributos de la etiqueta BODY. Lo primero que deberemos hacer es pensar en el color y el código de este, y una vez lo tengamos cambiaremos el color del texto usando:


TEXT Sirve para controlar el color que tendrá el texto normal de la página, es decir todo aquel que no sea un enlace hipertexto. Su valor por defecto es negro.

LINK Permite cambiar el color con el que son mostrados los enlaces hipertexto o links de la página. Su valor por defecto es azul.

VLINK Permite cambiar el color por defecto de los links visitados (Visited LINK). Los links visitados de una página son aquellos que ya hemos seleccionado alguna vez. El valor por defecto de estos enlaces es morado.

ALINK Sirve para controlar el color de los enlaces activos (Active LINK). El significado de enlace activo varía en función del navegador. Para Netscape™ un enlace activo es aquel sobre el que se ha pulsado con el ratón pero todavía no se ha soltado. El color por defecto de los links activos es el rojo.

Vistas todas las etiquetas pasemos a crear un ejemplo, para él seleccionaremos un color de pantalla negro, texto blanco, enlaces verdes, enlaces visitados verde azulado y enlaces activos rojos. El código usado es por tanto:


<body bgcolor="#000000" text="#FFFFFF" link="#00FF00" vlink="#008080" alink="#FF0000">


Imágenes de fondo.

Las posibilidades que nos ofrece el lenguaje HTML para cambiar la apariencia de una página no se limitan a cambiar los colores, también se pueden poner imágenes ya sean dibujos o fotos como fondo de una página. Las imágenes deberán estar en formato GIF o JPEG al igual que las imágenes normales que aprendimos anteriormente.

Para incluir una imagen de fondo deberemos usar el atributo BACKGROUND de la etiqueta BODY. Como habrá podido comprobar el lector a estas alturas dentro de esta etiqueta se engloban todos los parámetros que cambian las características globales de la Web, es decir aquellas que afectan a toda la página.

El funcionamiento de BACKGROUND es idéntico al del atributo SRC de la etiqueta IMG, esto es, deberemos indicar como valor el nombre de la imagen, junto con su ruta de directorios (path) si es necesario o bien la dirección completa de Internet (URL) si no se encuentra en nuestro sitio Web.

Veamos un primer ejemplo de una página con una imagen de fondo, para ello usamos el siguiente código en el que hemos usado la imagen fondo1.jpg que se encuentra en el mismo directorio que la página donde está el código:

<body background="fondo1.jpg">

Las imágenes que insertemos como fondo de la página serán mostradas en mosaico, es decir, se replicará la imagen tanto horizontal como verticalmente hasta ocupar todo el área de la página. Por esta razón no todas las imágenes quedan bien como fondo de una página Web. De hecho se recomienda que sólo se usen dos tipos de imágenes:


• Imágenes con pocos colores que muestran un logo sobre un relleno sólido y que interfiere poco con el contenido de la página. En la Web de la figura 5.5 podemos ver un ejemplo de este tipo de imágenes en la que no se aprecian los bordes de la imagen al ser el fondo de esta de un solo color sólido.

• Imágenes especiales cuyos bordes encajan perfectamente y parece que todo del fondo es una única imagen. La imagen de la figura 5.4 es un ejemplo de ello ya que su tamaño real es de 90x90 pixeles. En la figura 5.6 vemos esa imagen por sí sola. Es difícil apreciar que los bordes encajarán cuando se creen las réplicas, de hecho ese efecto debe ser hecho con programas especiales.

Sugerencia: No use imágenes demasiado oscuras o con demasiados colores como fondo de la página. Si aún así debe usarla utilice los atributos TEXT, LINK, VLINK y ALINK de la etiquetas BODY para poner colores de texto que permitan que el texto sea legible.


Insertando Imágenes.

Recordemos que para insertar una imagen en una página Web era imprescindible guardarla en un archivo independiente del documento HTML. Dicho archivo podía contener la imagen en varios formatos, siendo los de mayor uso GIF y JPEG que pueden ser vistos con la práctica totalidad de navegadores. Cuando tenemos una imagen con estos formatos suelen tener la extensión .gif en el caso del formato GIF y .jpg o .jpeg en el caso de imágenes JPEG.

Atención

Algunas aplicaciones de retoque de imágenes guardan las imágenes GIF y JPEG con la extensión en mayúsculas (.GIF, .JPEG). Esta terminación es válida, pero los nombres de los archivos que contienen imágenes, igual que los de los documentos HTML, son sensibles a mayúsculas/minúsculas y por tanto
.gif no es lo mismo que .GIF con lo que al referirnos al archivo debemos escribir su nombre y terminación respetando las mayúsculas y minúsculas. Si las hemos confundido cuando probemos las páginas en el ordenador local probablemente funcionen, pero dejarán de hacerlo cuando las publiquemos, es decir, cuando las pongamos en el servidor Web.

Nota: El formato de una imagen es el código usado para almacenarla en un archivo. Los formatos simples simplemente guardan una tabla con el color de cada punto de pantalla (pixel) de la imagen. Sin embargo si guardamos una imagen grande con este formato ocupará demasiado. Por esta razón se crearon formatos más complicados basados en complejas fórmulas matemáticas, que consiguen reducir el tamaño de la imagen. GIF y JPEG son ejemplos de estos formatos. Los navegadores usan la extensión (los tres/cuatro últimos caracteres tras un punto) de los archivos para averiguar el formato en que están codificadas, si cambiamos manualmente esa extensión no tendrán esa información y la imagen no podrá ser visualizada.

Es importante resaltar cambiando la extensión de una imagen no cambiamos el formato de dicha imagen, pero podemos dejarla inútil.

Una vez tenemos la imagen en un archivo aparte (por ejemplo img.gif) con el formato adecuado insertamos la imagen usando la etiqueta IMG de la siguiente manera:


<img src="img.gif">


Como ya comentamos, esta etiqueta consta de una única instrucción. Pero aunque sólo vimos uno de sus atributos,
SRC, contiene muchos más que iremos estudiando a lo largo del capítulo.


Creación de tablas HTML.

Con su aparición las tablas y revolucionaron el diseño de las páginas web. Las tablas eran una herramienta perfecta para organizar datos de manera ordenada, pero su utilidad no se queda ahí, ya que escondiendo los bordes podremos usarlas también para definir la estructura de las páginas. En este capítulo aprenderemos todas las etiquetas y atributos que existen en el lenguaje HTML estándar para la creación de tablas y realizaremos numerosos ejemplos y ejercicios para ir cogiendo práctica, que es, al fin y al cabo, lo más importante a la hora de sacar el máximo partido a las tablas.

Armados con nuestros conocimientos sobre la etiqueta TABLE y después de haber realizado unos cuantos ejemplos simples para practicar, dedicaremos el resto del capítulo a la realización de dos prácticas. Con ellas nos daremos cuenta de las grandes posibilidades que nos ofrecen las tablas en el diseño de páginas Web.

Con lo que hemos visto hasta ahora la disposición de los elementos de una página web es aún harto difícil. Tras estudiar los métodos de alineamiento empezamos a adquirir un mayor control sobre ellos, pero sin duda fueron las tablas las que van a darnos una mayor flexibilidad para decidir la disposición de los elementos en una página. En un principio las tablas pueden servir para mostrar una serie de datos de una manera ordenada, tal y como estamos acostumbrados a ver en numerosas situaciones, sin embargo las tablas en la web tienen una utilidad aún mayor. Podemos hacer que toda nuestra página, o una parte de ella, sea una tabla e ir colocando los diferentes elementos de los que conste en sus celdas. De esta forma sabremos con gran precisión donde estamos colocándolas.

Cómo se crea una tabla.

Para crear las tablas será necesario usar una nueva etiqueta: TABLE, que significa, en inglés, tabla. Esta etiqueta consta de instrucción de inicio, <TABLE> , e instrucción de fin, </TABLE> . Entre ambas debemos introducir otras tres etiquetas, que definirán la estructura de la tabla. Estas etiquetas son:


• TR: La etiqueta Table Row nos permitirá insertar filas en la tabla. La tabla tendrá tantas filas como apariciones de esta etiqueta haya entre <TABLE> y </TABLE>. La instrucción de inicio de TR, <TR>, marca el comienzo de la línea, la instrucción de fin, </TR%gt;, marca su final. La instrucción de fin es optativa, si no se usa se considera que una línea ha acabado cuando comienza otra o cuando acaba la tabla. Entre el comienzo y el fin de la línea debemos insertar las celdas de la tabla.

• TH: Este es el primero de los dos tipos de celdas existentes en el lenguaje HTML. El nombre de la etiqueta proviene del inglés Table Header, encabezado de tabla. Al igual que la etiqueta anterior el comienzo del encabezado viene dado por la instrucción de inicio, <TH> y finaliza con la instrucción de fin, </TH>, o con el comienzo de otra celda. En general entre el comienzo y el fin se suele insertar texto, que será mostrado en negrita o subrayado y centrado.

• TD: Este es el segundo tipo de celda de las tablas HTML. El nombre de la etiqueta, Table Data (Datos de tabla), nos induce a pensar que su función será introducir todos los datos que queramos en las celdillas definidas de esta forma. Y así será, de hecho podemos insertar cualquier elemento de HTML: imágenes, listas, texto formateado e incluso otras tablas. La diferencia de esta celda con la anterior es pequeña, y su existencia separada sólo tiene sentido si consideramos el carácter descriptivo del HTML. En la práctica la diferencia principal es que el texto de los encabezados de tabla aparecerá resaltado y centrado y el de las celdas normales (TD) no.


Nota: El uso de las instrucciones de fin de TR, TD y TH es, como hemos dicho, optativo. Sin embargo en las primeras versiones del lenguaje HTML era obligatorio usarlas y por esta razón algunos navegadores antiguos las necesitan para poder entender las tablas. Es por ello que nuestra recomendación es usar siempre dichas instrucciones de fin para seguir con nuestro objetivo de llegar a la mayor cantidad de público posible.

Con una mera descripción de las etiquetas es difícil entender por completo como se crean tablas en HTML, así que vamos a ver unos ejemplos.

Para empezar crearemos una tabla sencilla de dos filas y dos elementos. Vayamos por pasos:


1. En primer lugar ponemos la instrucción de inicio y fin de la etiqueta TABLE dejando un espacio entre ellas para insertar posteriormente el resto de etiquetas:


<TABLE>
...Otras etiquetas...
</TABLE>

2. A continuación insertamos las filas. La tabla que nos hemos propuesto crear consta de dos filas. Por tanto debemos usar la etiqueta TR dos veces. Lo que insertemos en la primera (entre la instrucción de inicio y la instrucción de fin) será el contenido de la primera fila y lo que insertemos en la segunda será el contenido de la segunda fila:



<TABLE>

<TR> </TR> <TR> </TR>
</TABLE>



3. El tercer paso será definir el contenido de cada fila. Como nos habíamos propuesto que la tabla tuviese dos columnas en cada fila debemos insertar dos celdas en cada una. Como hemos explicado antes, para crear una celda debemos usar la etiqueta TD. Entre la instrucción de inicio y la instrucción de fin de está etiqueta será donde insertaremos el verdadero contenido de la tabla. En este primer ejemplo sencillo será simplemente texto, pero puede ser cualquier otro elemento web como imágenes o listas. Volviendo a nuestro ejemplo, para cada fila debemos escribir el siguiente código:



<TR>

<TD> Columna1 </TD> <TD> Columna2 </TD>
</TR>



Nota: En los ejemplos que veremos a lo largo de este curso sangraremos las etiquetas a distintos niveles para que sea más sencillo saber que etiquetas están dentro de otras. No es necesario realizar esto para que el código funcione, de hecho podríamos escribir el código en una sola línea y también funcionaría, pero si es recomendable ya que nos facilita mucho su lectura.

4. El cuarto paso es ponerlo todo junto, repitiendo el código anterior para cada fila. El código final de la tabla será:


<TABLE>
<TR>
<TD>
Fila1,Columna1
</TD>
<TD>
Fila1,Columna2
</TD>
</TR>
<TR>
<TD>
Fila2,Columna1
</TD>
<TD>
Fila2,Columna2
</TD>
</TR>
</TABLE>

Borde de las tablas.

El siguiente paso en el aprendizaje de las tablas consiste en añadirles un borde. Esto es tan sencillo como añadir un nuevo atributo a la instrucción de inicio de la etiqueta TABLE. El atributo del que hablamos es BORDER, que significa borde en inglés. Este atributo puede tomar un valor en pixeles que representa el grosor del borde a mostrar. Si incluimos BORDER sin ningún valor es equivalente a BORDER="1" Repitamos el segundo de los ejemplos vistos antes pero añadiéndole un borde de grosor 5.



<TABLE BORDER="5">
<TR>
<TH>
Encabezado1
</TH>
<TH>
Encabezado2
</TH>
<TH>
Encabezado3
</TH>
</TR>
<TR>
<TD>
Fila1,Columna1
</TD>
<TD>
Fila1,Columna2
</TD>
</TR>
<TR>
<TD>
Fila2,Columna1
</TD>
<TD>
Fila2,Columna2
</TD>
</TR>
</TABLE>



Insertar un título para la tabla.


El siguiente elemento importante a destacar en las tablas y del que todavía no hemos hablado es el título. Este será un texto que acompaña a la tabla podrá estar situado encima o debajo de ella. Para insertarlo haremos uso de una nueva etiqueta: CAPTION (que se puede traducir al español como título), que deberá ser usada entre las instrucciones <TABLE> y </TABLE >, de la siguiente manera:



<TABLE>
<CAPTION> Titulo de la tabla </CAPTION>
... Código de la tabla ...
</TABLE>



El texto que servirá de título será insertado entre las instrucciones de inicio y fin. Este texto podrá ser formateado por otras etiquetas siempre y cuando sean de nivel de texto, esto es, que su inclusión no provoque un salto de línea. Esto, desgraciadamente, excluye a los encabezados (H1 ,H2, etc.), pero no a las etiquetas de nivel de texto o a FONT.

Los títulos de la tabla serán mostrados por defecto en la parte superior de esta, pero la etiqueta CAPTION permite el uso de un atributo (cuyo nombre nos resultará familiar), ALIGN , que nos permitirá elegir que dichos títulos sean mostrados como pie de la tabla. El atributo ALIGN, puede tomar dos valores top y bottom. El primero de ellos, top, significa en inglés arriba o parte superior y su efecto será que el título sea mostrado encima de la tabla. Bottom, por su parte puede ser traducido como abajo o parte inferior. El uso de este atributo provocará el efecto antes comentado: el título será mostrado al pie de la tabla. El siguiente código es un ejemplo del uso este tipo de alineamiento del título:



<TABLE>

<CAPTION ALIGN="bottom"> Pie de la tabla </CAPTION>
... Código de la tabla ...
</TABLE>



A continuación veremos un ejemplo completo de tabla con título. Es necesario resaltar dos aspectos de este ejemplo. El primero es que aunque usemos ALIGN="top" para el título, en realidad no es necesario, ya que este es el alineamiento que aparece por defecto. El segundo es que para resaltar el título nos hemos ayudado de las etiquetas BIG y B que ya conocemos, algo perfectamente válido dentro de la etiqueta CAPTION.

Un ejemplo de inclusión de un encabezado es el siguiente:



<TABLE>
<CAPTION ALIGN="top">
<BIG>
<B>
Tabla de ejemplo
</B>
</BIG>
</CAPTION>
<TR>
<TD>
Fila1,Columna1
</TD>
<TD>
Fila1,Columna2
</TD>
<TR>
<TD>
Fila2,Columna1
</TD>
<TD>
Fila2,Columna2
</TD>
</TABLE>
Faltan muchos temas sobre tablas.... pero los incluire ... Atte: Anacleto.


Frames, las ventanas llegan al WWW.

Una de las extensiones usadas más habitualmente el WWW son los marcos o frames. A algunos programadores les horroriza la idea de que sus páginas tengan frames, otros no entienden como han podido vivir sin ellos hasta ahora. Pero, lo que está claro es que existen páginas web donde se ha demostrado que al menos en ciertos casos un buen uso de frames mejora mucho la experiencia del navegante.

En este capítulo se explica cómo usarlos y usarlos bien. Entre las características avanzadas se verá cómo anidar framesets para crear estructuras complejas, cómo manejar y ocultar los bordes y cómo decidir en qué frame debe mostrarse el resultado de un enlace.

Creación de páginas con frames.

El hecho de usar frames no sólo cambia por completo la apariencia de nuestra página, sino que también cambia el proceso de su realización. Si hasta ahora los Webs estaban formados por un único documento HTML donde estaba el contenido, al usar frames será necesario un documento HTML para definir la estructura de la página (número de frames a usar y disposición de estos), y posteriormente tantos documentos HTML extra como frames tengamos para insertar su contenido.




En este caso serán necesarios 4 documentos HTML. El primero simplemente contiene el código que le indica al navegador el número de frames de la página, su tamaño, su posición y el nombre de los archivos donde está el contenido de los 3 frames, a este documento HTML le llamaremos documento de definición de frames . Los otros
3 documentos HTML tienen el contenido de cada uno de los tres frames y deben ser creados de la misma manera que hemos venido creando los documentos HTML hasta ahora, eso sí, hay que tener en cuenta que ese contenido será mostrado en un espacio reducido (el del frame correspondiente) y no en toda la ventana del navegador.

Creación del documento de definición de frames.

La estructura del documento de definición de frames es parecida a la estructura de las páginas creadas hasta ahora. La principal diferencia será que este documento no tendrá contenido y por tanto no debe usarse la etiqueta BODY. A cambio ha de usarse una nueva etiqueta: FRAMESET. Esta será la etiqueta clave en la creación de los frames.


La etiqueta FRAME.

La etiqueta usada para insertar el contenido en las filas, columnas o divisiones en general, hechas con la etiqueta FRAMESET, es FRAME. Esta etiqueta debe ser usada una vez por cada una de las divisiones que hallamos creado. Cada una de estas veces debemos usar un atributo, SRC, que servirá para indicar el documento HTML donde se encuentre el contenido que queremos insertar en esa división:


<FRAME SRC="docum.htm">


Esta etiqueta consta de una única instrucción, es decir la instrucción de fin </FRAME> no existe, y debe ser insertada entre la instrucción de inicio y la instrucción de fin de la etiqueta FRAMESET.

Otro de los atributos más importantes de la etiqueta FRAME es NAME. Con este atributo le daremos un nombre al frame para poder referirnos posteriormente a él con el atributo TARGET o con los lenguajes de script. La forma de usar este atributo es:


<FRAME SRC="docum.htm" NAME="primer_frame">


Si posteriormente queremos crear un enlace a este frame desde otro de la misma página no tendremos más que escribir:


<A HREF="otro.htm" TARGET="primer_frame">


Con los conocimientos adquiridos hasta ahora en este capítulo, junto con lo que ya sabemos, estamos en disposición de crear nuestra primera página completa con frames.

Página completa con frames.

El primer paso será crear el documento de definición de frames. Abrimos nuestro editor y creamos un nuevo archivo. En este caso lo llamaremos index.htm y escribimos en él el siguiente código:



<HTML>

<HEAD>
<TITLE>
Primera página con frames
</TITLE>
</HEAD>

<FRAMESET COLS="20%,80%">
<FRAME SRC="izquierd.htm">
<FRAME SRC="derecha.htm">
</FRAMESET>
</HTML>


Con esto tendremos una página que dividirá la ventana del navegador en una columna izquierda y otra derecha que ocupan el 20% y el 80% del ancho respectivamente. El contenido de cada una de estas columnas estará en los archivos izquierda.htm y derecha.htm. El siguiente paso será la creación de estos archivos. Volvemos a abrir un archivo nuevo en nuestro editor y le llamamos izquierd.htm. En este archivo podemos escribir todo el código HTML que queramos siempre teniendo en cuenta sus limitadas dimensiones. Para empezar podemos escribir:


<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#99FF99">
<H1>
Frame izquierdo
</H1>
Este frame podría servir de índice:
<UL>
<LI>Tema 1
<LI>Tema 2
<LI>Tema 3
</UL>
</BODY>
</HTML>

A continuación abrimos otro archivo nuevo y le llamamos derecha.htm. El código a incluir en este tercer documento HTML será:


<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>
Este es el frame Derecho
</H1>
<P>
En este frame podría ir el contenido principal del Web.
</P>
</BODY>
</HTML>

El último paso será visualizar el documento de definición de frames, index.htm, con el navegador que prefiramos. Por supuesto se podría ver cada uno de los documentos HTML por separado, y de hecho suele ser muy útil hacerlo

Atributos de la etiqueta FRAME.

Además del atributo SRC y NAME, la etiqueta FRAME tiene otros que nos permitirán modificar algunas características de los frames. Todos los atributos que veremos a continuación han sido aceptados en el estándar HTML 4.0.


• SCROLLING: Usando este atributo podemos controlar la aparición o no de barras de desplazamiento. Los valores que puede tomar este atributo son:



• SCROLLING="auto": Este es el valor por defecto y provoca que el navegador sólo inserte barras de desplazamiento si el contenido del frame ocupa más del espacio dedicado para él.

• SCROLLING="yes": Las barras de desplazamiento aparecerán siempre.

• SCROLLING="no": Las barras de desplazamiento no aparecerán nunca. Hay que tener mucho cuidado si usamos esta opción porque si la página ocupa más que el espacio de la ventana dedicado al frame la información que no quepa en un principio no podrá ser vista.


• NORESIZE: Por defecto los usuarios pueden mover los bordes de los frames sin más que situar el ratón sobre ellos y arrastrarlos. Si incluimos este atributo en la etiqueta FRAME evitaremos que el borde de ese frame pueda ser movido. Es necesario notar que este atributo no toma ningún valor.

• MARGINHEIGHT: Ajusta el margen superior que debe respetar el contenido de ese frame. El tamaño debe ser dado en pixeles.

• MARGINWIDTH: Ajusta el margen lateral que debe respetar el contenido del frame. Al igual que antes, el margen debe ser dado en pixeles.

Para terminar vamos a ver un ejemplo del uso de todos ellos:

<FRAMESET COLS="110,*" ROWS="110,*">

<FRAME NAME="Imagen" SRC="cuadrado.gif" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="No" FRAMEBORDER="No"

<FRAME SRC="f2.htm"

<FRAME SRC="rect.gif" SCROLLING="no">

<FRAME SRC="f4.htm" MARGINWIDTH="100" MARGINHEIGHT="100"

</FRAMESET>

Vídeos, Sonido y Multimedia.

Animaciones, vídeos, música, sonidos, y mucho más son los nuevos contenidos que encontramos cada vez más a menudo en el World Wide Web. Todo con los objetivos de hacer un web más atractivo o emplearlo como nuevo medio de distribución de arte. Sin embargo es importante tener cuidado para no hacer páginas web que sólo puedan ser vistas en determinados navegadores.

En los últimos años la informática ha conocido lo que se ha convenido a llamar la revolución multimedia, cada vez es más fácil encontrar CD-ROMs con multitud de imágenes, vídeos, animaciones tridimensionales, juegos con una calidad gráfica y sonora impactante y mucho más. Esta revolución también ha salpicado a Internet y en concreto al World Wide Web. Sin embargo los contenidos multimedia dejan de ser divertidos cuando tenemos en cuenta las velocidades actuales de la Red de Redes y los problemas de incompatibilidad entre distintas plataformas (distintos ordenadores y/o sistemas operativos). El gran potencial del contenido multimedia en el WWW consiste en el gran interés que provoca, pero por en los que a Internet se refiere debe limitarse a pequeños ficheros de sonido o vídeo. Afortunadamente con un poco de ingenio esto no será problema para crear efectos muy atractivos.

Cuando hablamos de multimedia en páginas Web debemos diferenciar entre los contenidos multimedia externos y los contenidos denominados inline. Esta diferenciación es muy similar a la que hicimos con las imágenes, con el término inline nos referimos a todos los elementos que se incluyen en la misma página Web, junto con el texto, listas, encabezados, etc. Las imágenes o ficheros multimedia externos se enlazarán a esta página de manera que serán bajados cuando los navegantes seleccionen el enlace apropiado. La gran pregunta es ¿cuál debo usar?. Para responder a esta pregunta veamos las principales ventajas de cada uno:


Multimedia inline Su gran ventaja es que aparece directamente junto con el resto de elementos de la página y esto es mucho más cómodo para los navegantes.

Multimedia externa Nos permitirá incluir muchos más formatos de sonido, vídeo y cualquier otro fichero multimedia, ya que si el navegador no lo entiende llamará a alguna aplicación que le ayude. Estas aplicaciones auxiliares pueden ser configuradas por el usuario del navegador.

La conclusión puede ser que en general podemos incluir contenido multimedia inline siempre y cuando esté en un formato entendido por los navegadores y no ocupe demasiado tiempo de carga (es decir que su tamaño en bytes sea pequeño). En caso de ser un archivo grande o de un formato no soportado por los navegadores debemos usar multimedia externa.


Etiqueta BGSOUND - Sonidos Inline.

Microsoft Internet Explorer™ también ha introducido una nueva etiqueta para posibilitar la inclusión de sonido en las páginas Web. Este sonido será cargado junto con la página y empezará a ser tocado sin requerir ninguna acción

por parte del usuario. Para incluir un sonido de fondo como éste debemos usar la etiqueta BGSOUND. Veamos un ejemplo:


<BGSOUND SRC="sinfonia_5.au">


Esta etiqueta no producirá ningún efecto visual en la página, simplemente si empezará a reproducirse el sonido de fondo. Los usuarios de otros navegadores no serán perjudicados por la inclusión de este atributo, simplemente no podrán oír el sonido.

El resto de atributos son:


• LOOP: Al igual que con el vídeo este atributo permite controlar el número de veces que el fichero de sonido será reproducido. Si usamos LOOP="-1" se reproducirá repetidamente hasta que el navegante abandone la página.

• BALANCE: (Sólo Internet Explorer 4.0™ o posterior) Este atributo permitirá al programador Web cambiar el balance de sonidos estéreo. Puede tomar un valor entre -10000 y 10000. El efecto de cada uno de los dos extremos dependerá de la configuración del navegante, pero en cualquier caso ambos significarán que el sonido se oirá únicamente por uno de los dos altavoces. Con los valores intermedios controlamos el balance en uno u otro.

• TITLE: (Sólo Internet Explorer 4.0™ o posterior). Con este atributo damos un título al sonido. Este título es solo informativo y no se mostrará ningún indicativo visual.

• VOLUME: (Sólo Internet Explorer 4.0™ o posterior). El volumen con el que se reproducirá el sonido puede ser controlado gracias a este atributo que puede tomar un valor entre -10000 y 0. Si usamos VOLUME="0" (máximo volumen) el sonido se reproducirá al 100% de la configuración actual del usuario. Usando un valor menor el volumen bajará, no hay ninguna forma usando HTML de aumentar el volumen por encima de la configuración elegida en su ordenador por cada persona.


Nota

Es muy importante no poner un sonido que pueda resultar molesto a los visitantes de nuestras páginas, ya que con ello conseguiremos que las abandonen rápidamente para dejar de oírlo.

Microsoft Internet Explorer™ soporta tres formatos de sonido inline:


• AU: El formato de Sun ™ que usa la codificación u-law.

• WAV: Muestras de sonido específicas para Windows™.

• MIDI: Estos ficheros deben tener la extensión .mid.

Hay que tener mucho cuidado a la hora de incluir sonidos en nuestras páginas, ya que en general este tipo de ficheros son de gran tamaño y pueden incrementar enormemente el tiempo de carga. Por otro lado no es recomendable que sea reproducido más de una vez, ya que la repetición cansará a los visitantes

Etiqueta MARQUEE - Marquesinas animadas.

Cuando de HTML se trata, una marquesina animada consiste en una línea de texto que se desplaza por la pantalla de izquierda a derecha, de derecha a izquierda o en ambas direcciones alternativamente. La etiqueta específica de Internet Explorer™ MARQUEE nos permitirá crear este tipo de marquesina con gran facilidad y rapidez. No serán necesarias imágenes ni vídeos. Tal y como ocurría con las dos extensiones que acabamos de ver, la etiqueta MARQUEE sigue siendo específica de Explorer™ y no es soportada por ningún otro navegador ni ha sido aceptada por el estándar HTML 4.0

El funcionamiento de esta etiqueta es muy sencillo, consta de una instrucción de inicio y otra de fin, entre ellas debemos escribir el texto que queremos que se desplace. Por ejemplo:



<MARQUEE>
Me estoy moviendo
</MARQUEE>



Si visualizamos este código con Internet Explorer™veremos aparecer el texto “Me estoy moviendo” por la derecha de la pantalla y desplazarse hacia la izquierda hasta llegar al borde izquierdo de la pantalla. Entonces volvería a aparecer de nuevo por la derecha y así indefinidamente. Es difícil plasmar con una figura el movimiento de la marquesina, por esta razón hemos incluido todos los ejemplos de esta sección en el en el archivo marquee.htm [extra/marquee.htm]. Además en la figura 10.8 hemos capturado una página con este código en siete instantes de tiempo consecutivos para que el lector pueda hacerse una idea del funcionamiento de la marquesina animada


Cómo cambiar el comportamiento.

Como hemos comentado antes, cuando creamos una marquesina el texto se desplaza de derecha a izquierda desapareciendo totalmente antes de volver a mostrarse por la derecha. Este efecto continúa indefinidamente lo

suficientemente despacio para posibilitar su lectura. Este comportamiento, dirección, número de repeticiones y velocidad de movimiento puede ser modificado con 5 atributos de la etiqueta MARQUEE:


• BEHAVIOR: Este atributo nos permite cambiar el comportamiento del texto y puede tomar tres valores. BEHAVIOR="scroll" es el valor por defecto y consiste en el efecto de desaparecer por un lado y aparecer por el otro. Si usamos BEHAVIOR="slide" el texto tiene un comportamiento similar pero para en cuanto llega al borde derecho. La última opción es BEHAVIOR="alternate", en este caso el texto aparecerá igualmente por la derecha, pero una vez llegue al borde izquierdo rebotará y volverá hacia la derecha donde volverá a rebotar repitiendo este comportamiento indefinidamente. Los ejemplos 5 y 6 de la página de ejemplos marquee.htm [extra/marquee.htm] muestran estas dos últimas posibilidades.

• DIRECTION: Con este atributo podemos controlar la dirección de desplazamiento del texto cuando este es de tipo SCROLL. Puede tomar dos valores: LEFT (izquierda) y RIGHT (derecha) siendo el primero el valor por defecto (movimiento de derecha a izquierda). En el ejemplo 7 del archivo antes mencionado podemos ver un ejemplo de este atributo.

• LOOP: Determina cuantas veces se repetirá el desplazamiento del texto por la pantalla. Por ejemplo con SCROLL="4" el texto se desplazará por la pantalla únicamente 4 veces, mientras que si usamos SCROLL="-1" o bien SCROLL="infinity" seguirá desplazándose indefinidamente.

• SCROLLAMOUNT: Aunque haya sensación de movimiento el texto se desplaza a pequeños saltos. Este atributo determina el número de pixeles que debe desplazarse el texto en cada uno de ellos. Junto con el siguiente atributo podemos controlar la velocidad del movimiento. Si ponemos un valor alto el texto se moverá más rápidamente pero con saltos más bruscos (ejemplos 8 y 9).

• SCOLLDELAY: Determina el tiempo de espera entre cada uno de los saltos. Este tiempo debe estar dado en milisegundos. Valores mayores también provocan mayor rapidez y brusquedad. Experimentando con SCROLLAMOUNT y SCROLLDELAY encontraremos la combinación con la que satisfacemos nuestras necesidades de velocidad y suavidad de desplazamiento (ejemplos 10 y 11).

Etiqueta EMBED- Como usar los plug-ins.

El siguiente paso será insertar en nuestra página, usando código HTML, el objeto que queremos que sea usado por el plug-in. El propio navegador al darse cuenta que no es capaz de mostrar ese objeto el mismo buscará entre la lista de plug-ins que tiene instalados y llamará a aquel que es capaz de tratar con el objeto. Desgraciadamente si no lo encuentra mostrará un mensaje o un icono indicativo que puede resultar molesto para el navegante.

El termino elegido para denominar a estos objetos es embedded objects, es decir, objetos incrustados. La etiqueta HTML con la que insertamos este tipo de objetos es EMBED.

El atributo SRC nos permitirá indicar el nombre y dirección del archivo tal y como hacíamos con las imágenes. (src: especifica la ubicación de origen "URL" del archivo SWF que se debe cargar).

Otros atributos usados en multitud de ocasiones son WIDTH y HEIGHT con los que podemos controlar la anchura y altura del objeto respectivamente. Un ejemplo típico de inserción de un objeto para plug-in podría ser:



<EMBED SRC="pelicula.mov" WIDTH="120" HEIGHT="180">



Este objeto aparecerá en su propia línea y centrado en la ventana del navegador. Además de los tres vistos la etiqueta EMBED tiene una serie de atributos opcionales que varían enormemente entre los diferentes plug-ins. Todos ellos constan del nombre de un parámetro y su valor. Por ejemplo para el plug-in de vídeo QuickTime™ nos encontramos, con el parámetro LOOP="TRUE". Para averiguar los atributos concretos deberemos leer la documentación concreta de cada plug-in.

Formularios en HTML.

No es necesario navegar mucho tiempo por Internet para encontrar páginas Web en las que se piden datos a los navegantes. Quizá las primeras páginas que hicieron uso de esta posibilidad fueron las de los sistemas de búsqueda. Los formularios usados en estos sistemas son, en general, bastantes sencillos, únicamente es necesario un elemento, conocido como caja de texto, donde sea posible introducir la palabra o frase que deseamos buscar.

Un buen ejemplo de este tipo de uso. En ella vemos la página principal de Tower Communications se ofrece una caja de texto donde el usuario debe introducir una cadena de texto que desea buscar. Después debe pulsar sobre el botón ENVIAR, tras lo cual se mandará la información al servidor Web que la procesará y responderá enviando la información encontrada. Más adelante en la sección ’Como usar los datos de un formulario’ veremos como es posible recoger y procesar esta información, pero por ahora nos centraremos en la creación y en el diseño de los formularios

Para crear un formulario el lenguaje HTML proporciona la etiqueta FORM. Al contrario que la mayoría de etiquetas que hemos visto en los últimos capítulos ésta existe desde la especificación HTML 2.0 y por tanto es entendida prácticamente por cualquier navegador existente actualmente, por lo que puede ser usada con total libertad.

Esta etiqueta consta de una instrucción de inicio, <FORM>, y una instrucción de fin, </FORM>, entre las cuales podremos insertar todos los controles que deseemos. Dicho esto podemos crear nuestra primera página con un formulario. En ella adelantaremos uno de los controles más usados y sobre el que ya hemos hablado antes: la caja de texto. Un poco más adelante la trataremos más en detalle, pero la usaremos en este ejemplo para hacernos una idea de cómo se crea un formulario en una página Web. Para empezar, como siempre que creamos una página nueva, creamos un archivo nuevo en nuestro editor de texto o nuestro editor HTML. En él debemos insertar el siguiente código:


<HTML>
<HEAD>
<TITLE>Formulario de ejemplo</TITLE>
</HEAD>
<BODY>
<H1>FORMULARIO DE EJEMPLO</H1>
<FORM>
Introduzca su nombre: <INPUT TYPE="Text">
</FORM>
</BODY>
</HTML>


Guardamos el archivo con un nombre de nuestra elección y lo abrimos con el navegador.



Controles de Formularios.

Todos los controles que pueden usarse a la hora de crear un formulario permitirán al navegante insertar informa- ción. Unas veces esta información consistirá en la inserción de un texto, que podrá ser de una sola línea o varias y que podrá estar oculto o no. En otras ocasiones se ofrecerá entre una serie de opciones entre las que simplemente hay que elegir una o varias. Todo ello se podrá realizar de diferentes formas que ahora mismo comenzamos a estudiar.

Para empezar vamos a ver una serie de controles todos los cuales se crean con la etiqueta INPUT. Para diferenciar entre unos controles y otros se hará uso del atributo TYPE que puede tomar los siguientes valores: text, password, radio, checkbox, submit, image, reset, file y hidden. Además del atributo TYPE, esta etiqueta consta de algunos más cuya función variará del tipo de control estemos insertando, es decir, en función del valor del atributo TYPE. Uno común a todos es NAME, ya mencionado, con el que damos un nombre al control, y que es recomendable usarlo siempre. Otro también común a todos será ALIGN, que explicaremos con las cajas de texto.

Una vez hecho este comentario, podemos empezar a estudiar cada uno de los tipos de control uno a uno.

Cajas de texto.

Ya hemos introducido antes las cajas de texto. Como resumen recordaremos que para insertar este tipo de control en una página Web se usa la etiqueta INPUT (esta misma etiqueta será la utilizada para insertar la mayoría de controles), con TYPE="text". Es decir:


<FORM>
<INPUT TYPE="text">
</FORM>


Si nuestra intención es insertar más de un control será conveniente darle un nombre a la caja de texto. Para ello usaremos, tal y como hacíamos con el botón de envío, el atributo NAME:


<FORM>
<INPUT TYPE="text" NAME="mitexto">
</FORM>


Como podemos apreciar la etiqueta INPUT consta de una única instrucción. Ya hemos visto los atributos TYPE y NAME que existe siempre en la etiqueta INPUT. Cuando insertamos una caja de texto, es decir, cuando ponemos TYPE="text" existen otros dos:


SIZE: Determina la anchura de la caja de texto. El valor por defecto de este atributo es 20 caracteres, esta es la longitud de los ejemplos que veíamos en las figuras 12.3 a 12.6. En ocasiones convendrá decrementar o incrementar este valor por defecto, pero en todo caso siempre será conveniente mantener un valor menor de 50 caracteres de manera que la caja de texto quepa en la mayoría de pantallas. Un problema adicional que dificulta una correcta elección del tamaño de la caja es que este tamaño será considerado de distinta forma por los distintos navegadores y más aún si estos son de distintos sistemas operativos. En la figura 12.7 podemos ver una serie de cajas de texto de diferentes tamaños y las diferencias entre Internet Explorer™ y Netscape™ Navigator™ al mostrar el mismo código.

MAXLENGTH: Con este atributo limitamos el número máximo de caracteres que pueden ser escritos en una caja de texto. El valor de este atributo puede ser mayor o menor que el especificado en SIZE, y que es totalmente independiente. Si es mayor cuando lleguemos al final de la caja de texto los nuevos caracteres que insertemos irán desplazando hacia la izquierda a los primeros, que dejarán de estar a la vista (OJO, esto no quiere decir que sean borrados). Para entender el funcionamiento es mejor comprobarlo in situ con unos ejemplos. Recomendamos al lector que pruebe a visualizar los siguientes códigos, y que intente escribir una frase algo larga en cada uno de ellos:


<INPUT TYPE="text" SIZE="20" MAXLENGTH="20">
<INPUT TYPE="text" SIZE="20" MAXLENGTH="5">
<INPUT TYPE="text" SIZE="20" MAXLENGTH="40">


Por último queda decir que si no usamos el atributo MAXLENGTH el número de caracteres que pueden introducirse en la caja de texto no tendrá límite.

VALUE: Sirve para especificar un texto que debe aparecer por defecto en la caja de texto, antes de que el usuario escriba nada. Este texto suele ser, en general, o bien instrucciones o bien la respuesta más probable. Veamos un ejemplo que ilustra estos dos casos:


<FORM>
<P>Nombre:<INPUT TYPE="text" VALUE="Introduzca aquí su
nombre"> ←-
<P>¿Le gusta nuestro Web? <INPUT TYPE="text" VALUE="Si,
muchísimo"> ←-
</FORM>


Botones de elección.

Estos controles reciben también el nombre de botones de radio, como traducción directa de su denominación inglesa radio buttons y porque en general los navegadores suelen darles una forma circular. Para insertar un botón de elección usaremos de nuevo la etiqueta INPUT, pero esta vez el valor del atributo TYPE será radio:


<FORM>
<INPUT TYPE="radio">
</FORM>


Este tipo de controles tiene dos estados o posiciones: seleccionado (ON) o no seleccionado (OFF), estando inicialmente todos en la posición OFF. También es posible especificar que un botón determinado esté seleccionado inicialmente insertando el atributo CHECKED en la etiqueta INPUT de la siguiente manera:


<INPUT TYPE="radio" CHECKED>


Los botones de elección suelen ser insertados en los formularios en grupos, dando al usuario la posibilidad de elegir entre una serie de opciones. Cuando pulsamos sobre un botón de radio le pasamos a la posición ON y permanecerá en ese estado hasta que pulsemos en otra opción del mismo grupo. Esto es así porque entre los botones de radio de un mismo grupo sólo uno de ellos puede estar seleccionado, por tanto cuando seleccionamos uno, aquel que estuviese seleccionado previamente dejará de estarlo.

Para indicar que una serie de botones de elección pertenecen a un mismo grupo debemos incluir el mismo valor en el atributo NAME en todos ellos. Además debemos usar el atributo VALUE para dar un nombre distinto a cada uno de los botones. Veamos un ejemplo:


Indique el tipo de música que más le guste:
<FORM>
<P><INPUT TYPE="radio" NAME="musica" VALUE="Jazz">Jazz
<P><INPUT TYPE="radio" NAME="musica" VALUE="Pop">Pop
<P><INPUT TYPE="radio" NAME="musica" VALUE="Rock">Rock
<P><INPUT TYPE="radio" NAME="musica" VALUE="Country">Country
</FORM>

Cajas de selección.

Las cajas de selección guardan ciertos parecidos con los botones de radio, pero además permitirán seleccionar varias opciones en una lista. Al igual que dichos botones tienen dos posiciones, seleccionados o no seleccionados, estando en esta última posición inicialmente, a no ser que hayamos usado el atributo CHECKED. Cada caja de selección es independiente del resto, y por tanto el valor del atributo NAME debe ser diferente en cada una.

Para insertar una caja de selección debemos usar de nuevo la etiqueta INPUT, pero esta vez con
TYPE="checkbox". Veamos un ejemplo de uso de este tipo de controles:


Indique su profesión (escoja todas las que procedan):
<FORM>
<P><INPUT TYPE="checkbox" NAME="medico">Médico
<P><INPUT TYPE="checkbox" NAME="programador" CHECKED>Programador
<P><INPUT TYPE="checkbox" NAME="abogado">Abogado
<P><INPUT TYPE="checkbox" NAME="ingeniero">Ingeniero
<CENTER><INPUT TYPE="submit" VALUE="Enviar"></CENTER>
</FORM>


Pulsando sobre cada caja de selección se cambia de seleccionado a no seleccionado, independientemente de la posición del resto. En el código podemos apreciar que es posible indicar que una caja de selección esté seleccionada por defecto.
sdfasdf

Botón de borrado.

La mayoría de los controles anteriores permitían al usuario introducir una serie de datos o elegir entre una serie de opciones. Inicialmente las cajas de texto aparecían vacías, a no ser que hubiésemos usado el atributo VALUE para asignarles por defecto. Igualmente los botones de elección y cajas de selección aparecían en posición de no seleccionados a no ser que hubiésemos indicado lo contrario usando el atributo CHECKED. Una vez a cargado la página con el formulario en blanco o con unas opciones por defecto el navegante puede actuar sobre los controles y modificar sus valores (en esto se basa la interactividad). Pero quizás en algún momento decida que quiere dar marcha atrás y recuperar los datos que aparecieron al principio. Con este fin existe en el lenguaje HTML un control que permite borrar los datos actuales de todos los campos del formulario y restablecer los valores por defecto, si es que los había. Este control recibe el nombre de botón de borrado o botón de reseteado (reset button
). La creación de este control es muy sencilla. De nuevo usaremos la etiqueta INPUT, esta vez con TYPE="reset":



<INPUT TYPE="reset">



Este código provocará la aparición de un botón como el botón de envío con un texto por defecto que indica su función. Por ejemplo Internet Explorer 4.0™ muestra el mensaje ’Restablecer’. Este texto dependerá del navegador que usen los visitantes de nuestra página, y dado que esto no siempre es deseable podemos usar el

atributo VALUE, al igual que hacíamos con el botón de envío, para especificar el texto que prefiramos. Veamos un ejemplo algo más completo:



<H2>
<FONT COLOR="#8080FF">
Formulario de identificación
</FONT>
</H2>

<FORM>

<P>Introduzca su nombre:
<INPUT TYPE="text" NAME="nombre" VALUE="Introduzca su Nombre" SIZE="30">
<P>Sexo:
<INPUT TYPE="RADIO" NAME="sexo" VALUE="hombre" CHECKED>Hombre
<INPUT TYPE="RADIO"
NAME="sexo" VALUE="mujer">Mujer
<P>Comentarios:
<INPUT TYPE="text" NAME="comentarios" SIZE="40">
<P>
<INPUT TYPE="submit" VALUE="Enviar">
<INPUT TYPE="reset" VALUE="Restablecer">
</FORM>

Botón genérico.

Para completar la colección de botones de los formularios, nos encontramos con la posibilidad de insertar un botón genérico, es decir, que no tiene ninguna función definida, sino la que nosotros queramos darle. Para insertar un botón genérico usaremos la etiqueta INPUT con TYPE="button":



<INPUT TYPE="button" VALUE="Pulseme">



Las acciones que debe llevar a cabo este botón al ser pulsado sólo pueden indicarse con lenguajes de script como JavaScript o VBScript y no con HTML estándar. Para insertar el código de estos lenguajes se usa el atributo ONCLICK:




<INPUT TYPE="button" VALUE="Texto del botón" ONCLICK="código de script">




No todos los navegadores soportan los lenguajes de script, y por tanto el botón genérico debe ser considerado como una extensión. Si lo usamos debemos ser conscientes que únicamente los navegadores que soporten el script usado podrán hacer uso suyo.


Applets de Java™ y Controlesv ActiveX™ .


Java™ en las Páginas Web.

Hasta ahora hemos visto una serie de métodos que nos permiten incluir sonido, vídeo y otros contenidos multimedia así como multitud de archivos de diferentes formatos en una página Web. Al insertar alguno de estos objetos conseguimos incluso tener cierta interactividad con el visitante de las páginas y gracias a ellos quedan cubiertas gran parte de nuestras necesidades, pero seguimos teniendo algunas limitaciones. Gracias al lenguaje Java™ podremos insertar contenido multimedia con mucha mayor libertad y, lo que es más importante, conseguiremos interactividad completa con los navegantes.

Java™ es un lenguaje de programación desarrollado por la empresa Sun Microsystems. En la actualidad esta misma empresa se encarga, junto con otras empresas asociadas, de su desarrollo. En la página Java™.sun.com,  podemos encontrar gran cantidad de recursos relacionados con Java™, incluyendo tutoriales, libros o código algunos de los cuales se distribuye gratuitamente. Centrándonos en el lenguaje, éste es muy similar a los usados para realizar las aplicaciones que usamos habitualmente en nuestros ordenadores (Word™, Netscape, Explorer™ o el propio Windows™). La gran diferencia de Java™ con respecto a otros lenguajes consiste en la posibilidad de hacer pequeños programas y ejecutarlos desde una página Web. Estos programas reciben el nombre de applets Cada día hay más páginas en Internet que los usan consiguiendo lo que hasta hace poco era imposible. En la página de Gamelan(www.Gamelan.com) podemos encontrar gran cantidad relacionada con la tecnología Java™, en la figura 11.2 podemos ver una muestra de esta página. En una de sus páginas de su nueva ubicación: www.developer.com/directories/pages/dir.Java™.sites.html nos ofrecen un listado de las mejores Webs que podemos encontrar hoy en día que usen la tecnología Java™, es muy recomendable visitar alguna de ellas para hacernos una idea real de lo que puede llegar a conseguirse usando este excelente lenguaje.

Inserción de Applets Java™.

De ahora en adelante consideraremos que ya tenemos un applet, bien porque lo hemos programado nosotros mismos, bien porque estamos usando un applet de distribución gratuita, es hora de aprender a insertarlo en nuestra página Web. Para ello usaremos una nueva etiqueta: APPLET. Esta etiqueta está formada por una instrucción de inicio, <APPLET>, y una instrucción de fin, </APPLET>.

Nota: La etiqueta APPLET fue introducida por Netscape en la versión 2.0 de Navigator™ fruto de un acuerdo con Sun para soportar la tecnología Java™. Todos sus navegadores posteriores también la soportan. El otro gran navegador, Microsoft Internet Explorer™, soporta la tecnología Java™ desde la versión 3.0. En cuanto al estándar se refiere, esta etiqueta se incluye en la especificación HTML 3.2, aunque no podemos asegurar que los navegadores posteriores que respetan la norma HTML 3.2 soporten la tecnología Java™, simplemente entienden la etiqueta, pero no son capaces de ejecutar un applet.

La inserción de un applet en una página es similar a la inserción de una imagen, a lo cual ya estamos muy acostumbrados. Deberemos especificar el archivo donde se encuentra el applet y las dimensiones (anchura y altura) que este debe ocupar en la página. Al igual que ocurría con las imágenes el applet se introducirá en el lugar exacto donde indique su código, si es necesario se insertará entre el texto, pero no pasará a una nueva línea, como sucedía con las marquesinas, si no lo indicamos específicamente (con la etiqueta <BR>). Para indicar el archivo en el que se encuentra el applet usaremos el atributo CODE y para especificar la anchura y altura en pixeles usaremos WIDTH y HEIGHT respectivamente. En resumen, para insertar un applet debemos usar el siguiente código en cualquier lugar de la página:


<APPLET CODE="nombre_applet.class" WIDTH="ancho" HEIGHT="alto">
</APPLET>


Los tres atributos que hemos usado deben incluirse obligatoriamente siempre que insertemos un applet. Esto parece obvio con el atributo CODE, ya que no se podría insertar el applet sin indicar donde está, pero resulta más extraño con los atributos WIDTH y HEIGHT. Aun así, si no especificamos el tamaño que debe ocupar el applet en la página no será mostrado ni ejecutado por el navegador. Debemos estar muy atentos a este detalle ya que hasta ahora estos dos atributos eran totalmente optativos y por ello es un error común olvidarlos y no ser capaz de descubrir porqué no funciona el applet.

Y aquí vemos como insertar un applet de ejemplo:


<HTML>
<HEAD>
<TITLE>Applet sonoro</TITLE>
</HEAD>
<BODY>
<APPLET CODE="SoundExample.class" WIDTH=450 HEIGHT=50></APPLET>
</BODY>
</HTML>


Aviso: Los applets de Java™ son sensibles a las mayúsculas y a las minúsculas, si no ponemos el nombre del archivo exactamente igual, incluyendo mayúsculas o minúsculas, no hubiera funcionado. Por ejemplo, si hubiéramos escrito CODE="soundexample.class" el código anterior no hubiera funcionado. Este es un ejemplo muy común por lo que debemos tener cuidado.

Pasemos a explicar que ocurre cuando el navegador se encuentra con el código anterior. En primer lugar busca el archivo SoundExample.class en la misma dirección URL y en el mismo directorio donde se encuentre la página actual y lo baja a nuestro ordenador (este es un ejemplo en el que ambos archivos ya están en nuestro ordenador, con lo que este paso no sería necesario). Mientras reserva un rectángulo, con las dimensiones especificadas por los atributos WIDTH y HEIGHT, donde será mostrado el applet. Una vez ha llegado el archivo anterior el navegador llama a lo que se conoce como máquina virtual Java™ (también llamada JVM, Java™ Virtual Machine) que pasará a ejecutar el applet. A partir de ese momento el applet se ejecutará como cualquier otro programa de nuestro ordenador, aunque lo hará en el interior de la página Web. De esta forma cuando nuestro cursos este dentro del rectángulo de 450x50 creado el control pasará al applet y si pulsamos los botones el propio applet será el encargado de realizar las acciones oportunas. La Máquina Virtual Java™ implementa además ciertas medidas de seguridad para que el applet no pueda, por ejemplo, borrar nuestro disco duro. Una vez conocemos el funcionamiento de los applets podemos adentrarnos más a fondo en las diferentes características de estos que pueden ser modificadas con el lenguaje HTML.

Diferencias entre JavaScript y Java.

El lenguaje de programación JavaScript, desarrollador por Netscape, Inc., no forma parte de la plataforma Java.

JavaScript no crea applets ni aplicaciones independientes. En su forma más habitual, JavaScript está en documentos HTML y puede proporcionar niveles de interactividad en las páginas web que no se pueden conseguir con HTML simple.
Diferencias clave entre Java y JavaScript

***** Java es un lenguaje de programación OOP, mientras que Java Script es un lenguaje de scripts OOP.
***** Java crea aplicaciones que se ejecutan en una máquina o explorador virtual, mientras que el código JavaScript sólo se ejecuta en un explorador.
***** El código Java necesita compilación, mientras que el código JavaScript está en todo el texto.
***** Necesitan diferentes plugins.


ActiveX™, la tecnología del futuro.

La, denominada, tecnología ActiveX™ desarrollada por Microsoft hizo su aparición en Internet con el navegador Internet Explorer™ 3.0. Su objetivo es similar al de los plug-ins, insertar objetos de diferente tipo en una página Web, aunque va mucho más allá al añadir mayores posibilidades de interacción y comunicación con programas externos. Existen páginas en Internet que basan toda su presentación en controles ActiveX™ para crear Webs realmente impactantes. En la figura 11.10 vemos la página de ForecastX que ofrece el parte meteorológico en tiempo real usando esta novedosa tecnología.

Etiqueta OBJECT - Inserción de un applet Java™.

El objetivo actual del Web Consortium es que la etiqueta OBJECT conviva por un tiempo con la etiqueta APPLET para sustituirla más adelante. Hoy en día el uso de la etiqueta OBJECT no está muy extendido con lo que la forma más segura de insertar un applet sigue siendo usando la etiqueta APPLET, sin embargo la siguiente generación de navegadores permitirá también el uso de OBJECT que acabará siendo el único método aceptado y como buenos programadores nosotros debemos estar preparados.

Para poder llevar a cabo todas las funciones de la etiqueta APPLET también es posible usar la etiqueta <PARAM> para especificar parámetros para los applets u otros objetos que los necesiten. Aunque esta etiqueta debe ser insertada entre <OBJECT> y </OBJECT> no será ignorado por los navegadores que entiendan esta etiqueta.

Además la etiqueta PARAM tiene dos nuevos atributos al ser usada en el interior de OBJECT, estos son:

VALUETYPE="...": Este atributo especifica que tipo de valor recibirá el parámetro. Hay tres posibles valores:

Data: El valor especificado será pasado al objeto como una cadena de carac- teres. Este es el valor por defecto y antes de la existencia del atributo VALUETYPE era la única posibilidad.

Ref: El valor especificado es una dirección URL que indica donde están almacenados los valores para dicho parámetro. La dirección debe ser pasada tal cual al objeto.

Object: El valor es el nombre de otro objeto del mismo documento prece- dido del símbolo ’#’.

TYPE="tipo_mime": Este atributo especifica el tipo mime del valor asignado a este atributo con VALUE.

Exceptuando estas diferencias, el funcionamiento es idéntico. Por ejemplo, para insertar el applet del segundo de nuestros ejemplos (’El saludo de Duke’) usando la etiqueta OBJECT debemos escribir:

<OBJECT codetype="application/octet-stream" classid="Java™:Animator.class" width=55 height=68
ALT="Lo siento, no puede ver el applet">
<PARAM NAME="imagesource" VALUE=".">
<PARAM NAME=ENDIMAGE VALUE=10>
<PARAM NAME=PAUSE VALUE=100>
<PARAM NAME=PAUSES VALUE="2500|100|100|100|100|100|100|100|100|100">
<IMG SRC="T5.gif" WIDTH=55 HEIGHT=68 ALT="Duke te saluda">
</OBJECT>

Continuara...