CURSO DE HTML

Esta pgina se actualiz el:

En este sitio encontrars un curso, al que aadiremos una leccin semanal, de HTML. Mi objetivo es ensearte, primero a crear pginas sencillas, pero que a la vez sean atractivas, para ir complicandolas progresivamente.

A continuacin se presenta un curso bsico HTML, el cual se inicia con la creacin de pginas sencillas, pero a la vez atractivas, para ir progresivamente aumentando la dificultad. El presente curso parte de cero, asumiendo que el lector carece de algn conocimiento previo del lenguaje HTML.
INTRODUCCION AL HTML UNA PAGINA BASICA FONDOS REFERENCIAS ORGANIZACION DEL TEXTO LISTAS TABLAS FRAMES FORMULARIOS TEXTO EN MOVIMIENTO Y

MUSICA MAPAS REGLAS DE ESTILO

Introduccin a HTML
Aprender a programar en HTML es considerablemente diferente de aprender a desarrollar software en otros lenguajes de programacin. El lenguaje HTML es un lenguaje interpretado y permite dar indicaciones precisas al programa cliente, en este caso los "browsers", o mas bien los conocidos navegadores, de cmo debe presentarse el documento en pantalla. Este documento es el que, en la World Wide Web (WWW), conocemos como hipertexto. Un documento hipertexto no se compone nicamente de texto, pues tambin contiene relaciones con otros documentos. Con el paso del tiempo este concepto se ampli aun mas haciendo que los enlaces no solo sean de texto, sino que se complementan con informacin en otros formatos, como grficos, sonidos, vdeo, etc. El resultado es un documento que podamos prcticamente llamar multimedia. El concepto bsico es que los documentos tienen referencias a otros documentos, estn donde estn, bien en un equipo local en uno remoto. Estos enlaces pueden ser palabras, frases e incluso imgenes. En 1989, Tim Berners Lee propuso disear un sistema de unificacin del acceso a todos los datos que posea el Centro Europeo para la Investigacin Nuclear. Se comenz as a desarrollar una plataforma de tipo hipertexto y un protocolo de comunicaciones que se denomin HTTP (Hyper Text Transfer Protocol), que permitira a todos los cientficos del CERN, consultar cualquier informacin de cualquier tema, aunque se encontrase diseminada en los diferentes ordenadores, tanto del propio centro, como en los ordenadores de las diferentes instituciones que colaboraban con el CERN. El sistema alcanz un xito enorme, tanto es as que se comenz a definir un lenguaje de creacin de documentos estructurados que vino a llamarse HTML (Hyper Text Markup Language).

Los principales temas tratados en este capitulo son los siguientes:

Software necesario de desarrollo y visualizacin . Principios esenciales del lenguaje HTML. Plantilla de un documento HTML. Etiquetas bsicas.

Software Necesario de desarrollo y visualizacin

Un documento HTML es simplemente un fichero ASCII, en el que se incluye un texto que se quiere mostrar en pantalla, por lo que no se necesita nada ms que un editor normal que nos permita salvar el fichero en formato ASCII, no obstante programas como Microsoft Word ya vienen preparados para escribir documentos HTML. Existe en el mercado software que ayuda a construir las paginas Web, aliviando el trabajo de escribir cdigo, pero siempre hay que retocar el cdigo resultante por lo que es necesario el conocer el lenguaje HTML a fondo, si es que se quiere llegar a realizar buenas pginas. A continuacin mencionaremos el software necesario para el desarrollo de una pagina Web.

Programas de tratamiento de imgenes tipo Paint Shop Pro, Corel Draw, Image Composer o similar. En este libro se efectuarn todas las imgenes con Paint Shop Pro, o con Image Composer. Editor, el que emplearemos aqu ser Word de Microsoft Office. Navegador o "browser", para ver los resultados de las paginas que se hagan.(Nestcape Navigator, Nestcape Comunicator o Internet Explorer). Dado que no todos los navegadores se comportan ante una instruccin de HTML de la misma forma, se advertir de las excepciones, por lo que no utilizaremos un nico navegador.

Los programas de tratamiento de imgenes se utilizaran para crear botones, banners, animaciones y retocar todas las imgenes que se utilizan en una pagina Web. El editor se utilizar para escribir el cdigo HTML, y por ultimo los navegadores nos servirn para ver el trabajo realizado. Es importante antes de empezar a trabajar, crear distintas carpetas que guarden cada una de los distintos elementos que compondrn nuestra pagina Web, por ejemplo:

Imgenes: Almacenaremos aqu todas las imgenes que vamos a utilizar. Fondos : Guardaremos todos los fondos que vayamos creando. Botones : Todo tipo de botones. Banners : Los banners que vayamos a utilizar. En la figura 1-1 se muestra el aspecto de la ventana del entorno de trabajo de Microsoft Word cuando se abre por primera vez. Desde la ventana principal se tiene acceso a un cierto numero de componentes de edicin y programacin . La mayora de los principales componentes se irn describiendo segn vaya avanzando a lo largo de este libro. Figura 1-1. La ventana principal de Microsoft Word.

Principios esenciales del lenguaje HTML

Adems de ser un texto ASCII, el lenguaje HTML se caracteriza por la necesidad de introducir unos comandos o etiquetas llamadas "Tags" que indican al programa cliente ("browser") como se debe visualizar el documento en la pantalla. Por medio de estas etiquetas se definen los distintos elementos que componen la imagen. Estos comandos se escriben entre los smbolos "<" y ">", yendo en parejas usualmente, como veremos mas adelante. El formato general, por tanto, de estos "tags" es el siguiente:

<AAA> Inicio de un comando o "tag". </AAA> Cierre de ese mismo comando o "tag".

El comando puede estar en maysculas o en minsculas siendo indiferente cual de ellas se utilicen, quedando a gusto del autor cual utilizar Todo aquello que escribamos entre estas dos etiquetas se ver afectado por ellas El nombre de los ficheros escritos en HTML deben tener como extensin .html. En el sistema operativo DOS su extensin es .htm.

Plantilla de un documento HTML

Para empezar, un documento HTML debe estar entre las siguientes dos etiquetas: <html>

Documento

</html> Todo documento de HTML se divide en dos zonas principales, una los encabezamientos y el cuerpo del documento la otra. El encabezamiento viene encerrado por las etiquetas <head> </head> Dentro de este encabezamiento podemos incluir el titulo de nuestra pgina, que no obstante no veremos en la pantalla del "browser", pero si alguien

aade a sus "bookmarks" la direccin de nuestra pgina ser lo que ver. El titulo debe ser breve pero descriptivo, mas adelante veremos tambin algunos trucos que nos servirn para que las "araas " de los buscadores incluyan la direccin de nuestra pgina. Este titulo deber ir encerrado entre las etiquetas <title> </title> En el cuerpo del documento va encerrado todo aquello que deseamos que aparezca en la pantalla (texto, imgenes, botones, direcciones, etc.). El cuerpo del documento estar por tanto encerrado entre los siguientes "tags" <body> </body>. Por lo tanto ya tenemos la plantilla bsica de un documento HTML, quedando esta de la siguiente forma: Etiqueta de Inicio <html> de Documento HTML. Etiqueta de inicio <head> de encabezamiento. Etiquetas de <title> TITULO principio y final de </title> ttulo. Etiqueta de final </head> de encabezamiento. Etiqueta de <body> comienzo del cuerpo. Etiquetas que conforman la pagina Etiqueta de final </body> del cuerpo.

Etiqueta de final </html> de Documento HTML. Plantilla de documento HTML.

La identacin no es necesaria, es mas, se podra haber escrito todas las etiquetas en una misma lnea, nicamente se ha empleado aqu por claridad y as lo haremos a lo largo de este libro.

Etiquetas Bsicas
A continuacin damos una lista de las etiquetas (tags) bsicas, sin los atributos que pueden incluirse en ellas y que se describirn cuando se haga la definicin de la siguiente etiqueta.

Encabezados <Hn>texto</Hn>

n equivale a un numero entero comprendido entre 1 y 6. Siendo 1 el de mayor tamao, es decir, el cuerpo de letra es el mas grande y, si se utiliza 6, la letra es muy pequea.

Prrafos y bloques de texto <P>texto</P>

Inicio y final de prrafo.

<PRE>texto</PRE>

Respeta el bloque de texto, tal y como se ha escrito con espacios y tabuladores.

<BLOCKQUOTE>texto</BLOCKQUOTE>

Esta etiqueta incluye citas en un bloque separado de la pantalla.

Centrado de texto <CENTER>texto</CENTER>

Centra todo lo que est dentro de ella, independientemente que sea texto imgenes. Hay que advertir aqu que no la soportan todos los navegadores, aunque si los mas conocidos.

Aspecto de los caracteres <B>texto</B>

El texto entre estas dos etiquetas aparecer en negrita.

<I>texto</I>

El resultado de esta etiqueta produce un texto en itlica.

<U>texto</U>

Se subraya el texto entre las dos tags. No lo reconocen todos los "browsers".

<TT>texto</TT>

Esta etiqueta hace que el texto se vea en formato teletipo.

<BLINK>texto</BLINK>

El texto se ve parpadeante.

Lneas y saltos de lnea. <HR>

Con esta etiqueta se consigue una lnea horizontal, que se extiende a todo lo ancho de la pantalla. Esta etiqueta no necesita marca de cierre.

<BR>texto</BR>

El resultado es un salto forzado a la lnea siguiente. Con estas etiquetas ya estamos en disposicin de hacer una pagina Web, como veremos en el siguiente captulo.

Una pgina bsica

Ya pensaras que no bamos a empezar nunca con la construccin de tu pgina, pues ya ves todo llega, aunque antes tengo que hacerle unas recomendaciones y advertencias. Cuando escribimos en un tratamiento de textos y queremos cambiar de lnea, estamos acostumbrados a apretar la tecla intro o return y ya est, pues bien en HTML no es as, cuando escribimos el texto que deseamos que aparezca en pantalla, este se acomoda a ella, sin pulsar ninguna tecla. Si lo que deseamos es separar el texto en diferentes prrafos se debe utilizar la etiqueta <P>, que segn algunos autores no tiene etiqueta de cierre, pero este autor la ha puesto siempre y no ha pasado nada. Algo ms a tener en cuenta, existen limitaciones al escribir el texto, como se puede figurar, al depender el lenguaje HTML de etiquetas encerradas entre los signos "<" y ">", si necesitramos emplear estos caracteres como parte del texto, dara lugar a errores de sintaxis, ya que el "browser" podra interpretarlos como etiquetas, en lugar del texto que queremos, por lo que se definen de la siguiente forma: &LT; en &GT; en &AMP en ; &QUO en T; lugar de < lugar de > lugar de & lugar de "

Se debe resaltar que todos estos smbolos comienzan por el & y terminan siempre con ;. Existen cdigos para representar las letras de distintos idiomas, cdigos que se darn mas adelante. Bien, dicho lo anterior, vamos con el primer ejemplo, pngase ante la pantalla, arranque Word, elija documento nuevo, en blanco y teclee el siguiente texto:

<HTML> <HEAD> <TITLE>Primera Pagina Web</TITLE> </HEAD> <BODY> <CENTER><H2>Mi primera p&aacute;gina Web</H2></CENTER> <H3>Mi nombre es AAAAAAAAAA</H3><HR> <P>Esta es mi primera p&aacute;gina WEB y estoy utilizando las instrucciones dadas hasta aqu&iacute;</P> <P>El texto que va a continuaci&oacute;n estar&aacute; en negritas <B>Este texto est&aacute; en negrita</B> y este no lo est&aacute;</P> </BODY> </HTML>

Como se puede observar en el cdigo anterior se han empleado los siguientes nuevos smbolos: &aac en sustitucin de la "". ute; &iacu en sustitucin de la "". te; &oac en sustitucin de la ". ute: A continuacin siga las instrucciones siguientes, se han incorporado las figuras correspondientes para que pueda seguir los pasos que se van a dar hasta visualizar su pagina Web por primera vez. Si quieres ver las imagenes haz click sobre ellas. Para regresar al documento pulsa el botn de retroceso en tu navegador. Despliegue el men Archivo, elija guardar como...

Figura 2-1 Salvado del documento A continuacin ver la siguiente pantalla:

Figura 2-2. Guardar como Texto MS-DOS. Una vez haya efectuado los anteriores pasos abra Internet Explorer, Navigator o Netscape Comunicator, elija trabajar sin conexin a la red.

Figura 2-3. Trabajar sin conexin a la red.

En el men Archivo seleccione Abrir...

Figura 2-4. Abrir.

Elija examinar, busque en el directorio donde haya guardado el fichero anterior y acepte.

Figura 2-5. Buscar fichero.

Tu documento se debe ver como se muestra a continuacin.

Figura 2-6: Pagina vista en Internet Explorer Bien, ha funcionado?, enhorabuena!, ya estamos en el camino correcto, como ejercicios te propongo que modifiques el tamao de la letra, por medio de los tags, correspondientes, <Hn> </Hn>, recuerda?.

Insertar Imgenes

Como un "site" Web sin imgenes es como un jardn sin flores, vamos a insertar una en su recin creada pgina. Es obvio que ya no se volvern a repetir las instrucciones de guardar, abrir el navegador, ni visualizar, ya que entiendo que han quedado suficientemente claras y comprendidas. Elija la imagen que desea insertar, si no tiene ninguna, le sugiero que utilice la imagen sunset.gif que podr encontrar dentro de la pgina Imgenes y la copie en el directorio de trabajo. La estructura de la etiqueta que sirve para incluir imgenes en una pgina Web es la siguiente:

<IMG SRC="imagen.gif">

Por si te ayuda a memorizar el comando, te dir que significa el extrao cdigo que aparece mas arriba. IMG = Abreviatura de IMaG. (Imagen en ingls). SRC = Abreviatura de SouRCe. (Fuente en ingles.) Con esta etiqueta indicamos que se debe cargar una imagen contenida en un fichero de nombre "imagen.gif", es obvio que este nombre se debe sustituir por el nombre del fichero que nosotros deseamos que aparezca. Entre las "" debemos incluir la direccin del fichero adems de su nombre, en el caso de que est en el mismo directorio que la pgina, no es necesario.

ATRIBUTOS

Dentro de esta etiqueta se pueden incluir otros atributos, como:

ALT="descripcin"

Con este comando se introduce una descripcin, lo mas breve posible, a poder ser una palabra, indicativa del contenido de la imagen. Se debe incluir por dos razones, si un navegador est configurado como texto nicamente , no podr ver la imagen, pero por lo menos se har una idea de lo que representa, y la otra razn mas importante es que si dicha imagen sirve como enlace a otro documento, dicho navegador no podra acceder nunca a ese enlace.

BORDER=n

Donde n es el tamao, en pixels, del borde que deseamos que tenga la imagen, si ponemos 0, no llevar borde. En el caso de que la imagen sea un enlace a otra pgina o de cualquier otro tipo la imagen se ver rodeada de un borde del color que se hayan definido los enlaces, obviamente si hemos puesto 0 no aparecer ningun borde. Existen dos tpos de ficheros para guardar imgenes :

GIF. JPG o JPEG.

Existen dos clases de ficheros GIF, segun la capacidad de conseguir colores transparentes o no. El formato GIF 87a no es capaz de crear colores transparentes, es el GIF 89a el idneo para guardar ficheros con trasparencia. Y te preguntars para que sirven los colores transparentes?, bien, pues si te fijas en las imagenes siguientes vers la diferencia:

Imagen con fondo transparente

Imagen sin fondo transparente

Como puedes observar en la imagen de la izquierda se ven los peces del fondo, sin embargo en la derecha un fondo blanco los oculta. En resumen un color transparente, es un color que en la pgina Web no se v, y deja ver lo que est debajo. Por lo tanto el programa que utilices, para manejar graficos, debe ser capaz de trabajar con el formato anteriormente mencionado, yo te recomiendo el Paint Shop Pro.

ALIGN="aaaaaa"

Donde aaaaa puede tomar los siguientes valores: TOP : Alinea el texto del titulo con la imagen en la zona superior. MIDDLE : Alinea el texto del titulo con la imagen en la zona media de la imagen.

BOTTOM : Alinea el texto del titulo con la imagen en la zona inferior. Los navegadores ms modernos como Navigator o Internet Explorer permiten que el texto pueda rodear a la imagen.

WIDTH="nnn"

Donde nnn es el ancho que queremos dar a la imagen en pixels.

HEIGHT="nnn"

Donde nnn es el alto que queremos que tenga la imagen en pixels. Es importante el poner estos atributos, ya que al conocerlos el navegador reserva el espacio para la imagen y mientras la carga, sigue mostrando el texto, con lo que, quien este viendo nuestra pgina puede leerlo y no aburrirse, mientras se cargan las imagenes. A continuacin vamos a incluir una imagen en la pgina que habiamos construido anteriormente. Las etiquetas que iremos aadiendo son de color azul para que las puedas distinguir facilmente de lo escrito anteriormente.

<HTML> <HEAD> <TITLE>Primera Pagina Web</TITLE> </HEAD> <BODY> <CENTER><H2>Mi primera p&aacute;gina Web</H2></CENTER> <H3>Mi nombre es AAAAAAAAAA</H3><HR> <P>Esta es mi primera p&aacute;gina WEB y estoy utilizando las instrucciones dadas hasta aqu&iacute;</P> <P>El texto que va a continuaci&oacute;n estar&aacute; en negritas <B>Este texto est&aacute; en negrita</B> y este no lo est&aacute;</P>

<P>Aqu&iacute; vamos a a&ntilde;adir una imagen</P> <CENTER><IMG SRC="pp_hole.gif" ALT="Pantera Rosa" WIDTH="130" HEIGHT="85" BORDER="2" ALIGN="TOP">Pantera Rosa</CENTER> </BODY> </HTML>

Nuestra pgina se ver ahora de la siguiente manera:

Fig 2-7: Nueva Pgina vista en Internet Explorer Bien, imagino que habrs hecho tu primera obra de arte, te sugiero que practiques con los diversos tags que has aprendido hasta ahora. La semana que viene adornaremos nuestra pgina con fondos, efectuaremos enlaces y alguna cosa ms.

Fondos y enlaces con otras pginas.

En este captulo veremos la manera de poner fondos a nuestras pginas. El fondo estandard de las pginas Web, es de color gris, y lo podemos cambiar de dos maneras distintas:

Con un color uniforme. Con una imagen, como la pgina que estas viendo.

Para cambiar el fondo con un color uniforme necesitamos emplear la etiqueta, situada al principio del documento, <BODY> . A la que aadiremos el comando:
BGCOLOR="#RRVVAA"

BGCOLOR= Es una abreviatura de BackGroundCOLOR, que en castellano significara Color de Fondo. Bien la etiqueta completa quedara de la siguiente forma: <BODY BGCOLOR="#RRVVAA">
ATRIBUTOS

Los atributos que lleva este comando sgnifican lo siguiente:

RR= Es

un numero en hexadecimal que indica la cantidad de color rojo que contiene el fondo. VV= Es un numero en hexadecimal que indica la cantidad de color verde que contiene el fondo. AA= Es un numero en hexadecimal que indica la cantidad de color azul que contiene el fondo.

Recuerda que los numeros en hexadecimal tienen 16 digitos que son: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Es decir el 00 corresponde a la ausencia del color y el FF es la maxima saturacin del color que se trate. Para que quede claro te expondr los siguientes ejemplos y luego pondr una tabla con los colores mas normales. #FFFFFF corresponde al Blanco. #000000 corresponde al Negro. #FF0000 Color Rojo (primario). #00FF00 Color Verde (primario).

#0000FF Color Azl (primario).

OTROS COLORES
Plateado Gris Fucsia Prpura Verde oscuro Oliva Verde Azulado Azl Marino Agua Marina Amarillo #C0C0C0 #808080 #FF00FF #800080 #008000 #808000 #008080 #000080 #00FFFF #FFFF00

Rojo oscuro #800000

Como puedes observar hemos conseguido los colores cambiando la cantidad de cada componente, debes tener en cuenta que para hacer un color ms oscuro debes reducir el numero de su componente, si lo que quieres es hacer un tono ms suave debes cambiar los componentes de los otros dos colores a numeros mas altos, en una cantidad igual, con lo que los hars ms claros. Te sugiero que hagas prcticas para que veas como se consiguen los colores. Para completar la etiqueta <BODY> en cuanto a colores se refiere vamos a ver una serie de atributos ms que podemos colocar con el fin de enriquecer nuestras pginas. Si podemos cambiar el color del fondo, pero no pudieramos cambiar los colores del texto y de los enlaces, podra suceder que fuera imposible leer

nada, al ser los dos colores iguales o muy parecidos, es por esto, por lo qu esta etiqueta se complementa con los siguientes atributos o comandos:
ATRIBUTOS

Los atributos son los siguientes:

TEXT="#RRVVAA"

Con este comando, que va incluido dentro de la etiqueta <BODY>, se cambia el color del texto entero de la pgina. El cdigo de colores es el mismo que el explicado anteriormente.
LINK="#RRVVAA"

Cambia el color de los enlaces en la pgina, que por defecto es "#0000FF", es decir azul.
VLINK="#RRVVAA"

Cambia el color de los enlaces visitados. (VisitedLINK).

ALINK="#RRVVAA"

Cambia el color de los enlaces activos. (ActiveLINK). Tambien podemos poner una imagen como fondo, bien en formato GIF JPEG, esta imagen se repetir por toda la pgina, una imagen vale ms que mil palabras, y como ejemplo solo tienes que mirar esta pgina, en la que ves repetido hasta la saciedad al dichoso pescadito, por cierto que no tiene segundas intenciones, lo digo por lo de "PEZ". Bien, fuera de bromas, para incluir una imagen en nuestra pgina tendremos que utilizar, dentro de la ya conocida etiqueta <BODY> un comando ms. Este comando es el siguiente:
BACKGROUND="imagen.tip"

Donde tip significa el tipo de fichero de imagen y puede tomar los valores GIF o JPG. Es obvio que se pueden aadir todos los comandos anteriores de color de texto, enlaces e incluso color de fondo, propiedad esta que nos viene muy bien para prever, la costumbre del navegante que tiene la opcin de cargar imagenes deshabilitada, con lo que no podra ver la imagen de fondo y solo

veria el color Gris, de la pgina por defecto. Lo que debemos hacer es poner dentro de la etiqueta <BODY> los dos comandos, el de imagen de fondo y el de color de fondo, en este orden. En el de color de fondo pondremos un color uniforme de fondo parecido al color general de la imagen. La etiqueta completa en cuanto a colores e imagenes se refiere quedara de la siguiente manera:
<BODY BACKGROUND="image.gif" BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#FF00FF" ALINK="#FF0000">

Como siempre vamos a efectuar unos cambios en nuestra pgina de prueba, que seran los siguientes: Cambiaremos el fondo a color amarillo, incluiremos el fondo clsico numero 1, para el texto emplearemos el color rojo oscuro, los enlaces sern de color verde oscuro, y tanto los enlaces visitados, como los activos los dejaremos los colores por defecto, aunque pondremos su cdigo de color.

<HTML> <HEAD> <TITLE>Primera Pagina Web</TITLE> </HEAD> <BODY BACKGROUND="Backgd01.jpg" BGCOLOR="#FFFF00" TEXT="#800000" LINK="#008000" VLINK="#FF00FF" ALINK="#FF0000"> <CENTER><H2>Mi primera p&aacute;gina Web</H2></CENTER> <H3>Mi nombre es AAAAAAAAAA</H3><HR> <P>Esta es mi primera p&aacute;gina WEB y estoy utilizando las instrucciones dadas hasta aqu&iacute;</P> <P>El texto que va a continuaci&oacute;n estar&aacute; en negritas <B>Este texto est&aacute; en negrita</B> y este no lo est&aacute;</P> <P>Aqu&iacute; vamos a a&ntilde;adir una imagen</P> <CENTER><IMG SRC="pp_hole.gif" ALT="Pantera Rosa"

WIDTH="130" HEIGHT="85" BORDER="2" ALIGN="TOP">Pantera Rosa</CENTER> </BODY> </HTML>

Nuestra pgina quedar de la siguiente manera

Fig 3-1: Pgina vista en Internet Explorer

Bueno, por hoy ya est bien, te aconsejo que cuando navegues por la red, captures los fondos que te gusten y los guardes, aprenders mucho de ellos.

Enlaces con otras pginas.

Con lo que llevamos visto hasta ahora ya somos capaces de formatear documentos de una forma similar a como se hace en cualquier programa de tratamiento de textos, pero no es esto lo que hace atractivo al WWW, sino la capacidad de hipertexto, es decir la capacidad de saltar de un documento a otro, aunque el otro documento est en el extremo opuesto del globo terrqueo. Lo que comunmente se denomina "navegar". De cara al usuario, estos enlaces aparecen como un texto subrayado de distinto color. Tambien pueden ser imagenes con un borde de distinto color

o no, en cualquier caso cuando el puntero del ratn pasa por ellos adquiere distinta forma de lo habitual. Podemos considerar tres tipos diferentes de enlaces o referencias:

Enlaces Locales. Enlaces internos en un documento. Enlaces a documentos HTML externos.

Enlaces locales.
Vamos a ver la forma de incluir enlaces locales, estos enlaces son ficheros almacenados en nuestro servidor y en directorios muy cercanos al del documento que contiene el enlace. La etiqueta para establecer un enlace en general es <A> y su etiqueta de cierre es </A> A la que aadiremos el comando:
HREF="hhhhhhhh.tttt"

La forma completa de esta directiva es:

<A HREF="hhhhhhhh.tttt">Texto enlace</A> ATRIBUTOS

Los atributos que lleva este comando significan lo siguiente:

hhhhhhhh= Nombre

del documento o pgina HTML. Si estas trabajando con W95, puedes utilizar nombres largos, como tus pginas normalmente estarn en un servidor Unix, recuerda que es "case sensitive", es decir, estos dos nombres no se refieren al mismo fichero: File1 y file1. tttt= Tipo del documento o pgina HTML. Si trabajas en W95 o Unix este ser html o en otros casos htm. Texto enlace= Este ser el texto que quieres que aparezca subrayado e indicar el enlace.

Todo lo anterior queda mejor explicado con un ejemplo. Supongamos que tienes en tu servidor dos pginas, la que nos ha servido de ejemplo hasta ahora y otra que la llamas pagina2.htm. Este ser el codigo

que emplearemos para que quien este viendo nuestra pgina pueda ir a la segunda:
<A HREF="pagina2.htm">Mi segunda pgina</A>

Como siempre vamos a efectuar unos cambios en nuestra pgina de prueba, incluyendo una referencia a nuestra segunda pgina:

<HTML> <HEAD> <TITLE>Primera Pagina Web</TITLE> </HEAD> <BODY BACKGROUND="Backgd01.jpg" BGCOLOR="#FFFF00" TEXT="#800000" LINK="#008000" VLINK="#FF00FF" ALINK="#FF0000"> <CENTER><H2>Mi primera p&aacute;gina Web</H2></CENTER> <H3>Mi nombre es AAAAAAAAAA</H3><HR> <P>Esta es mi primera p&aacute;gina WEB y estoy utilizando las instrucciones dadas hasta aqu&iacute;</P> <P>El texto que va a continuaci&oacute;n estar&aacute; en negritas <B>Este texto est&aacute; en negrita</B> y este no lo est&aacute;</P> <P>Aqu&iacute; vamos a a&ntilde;adir una imagen</P> <CENTER><IMG SRC="pp_hole.gif" ALT="Pantera Rosa" WIDTH="130" HEIGHT="85" BORDER="2" ALIGN="TOP">Pantera Rosa</CENTER> <P><CENTER>Mi <A HREF="pagina2.htm">segunda pagina</A>...</CENTER></P> </BODY> </HTML>

Debes observar que he dejado fuera de la etiqueta la palabra "Mi ", "..." te pongo las comillas para que veas en el primer caso que hay un espacio en blanco y en el otro por uniformidad. Estas comillas no forman parte del

cdigo. El motivo es que solo se subrrayarn, y sern enlace las palabras "segunda pagina". Bien, nuestra pgina quedar as.

Fig 4-1: Pgina vista en Internet Explorer

Si te ds cuenta en nuestra pgina se ha aadido un texto en verde y subrayado que es el vinculo a nuestra segunda pgina. Pero no siempre ocurre que los documentos esten en el mismo directorio, es ms, nos puede interesar, si lo que queremos hacer es un "site " temtico, crear subdirectorios en nuestro directorio principal con el fin de tener nuestros documentos ordenados. Supongamos que nuestro documento, pagina2.htm, est en un subdirectorio llamado dir1, pues bien para referenciar nuestra pgina 2 debemos modificar la referencia de la siguiente forma:
<A HREF="dir1/pagina2.htm">Mi segunda pgina</A>

Lo vamos a complicar un poquito mas, supongamos que al final del documento pagina2.htm queremos incluir una referencia para volver a nuestra pgina de siempre, pues bien la nueva referencia quedara as:
<A HREF="../mipagina.htm">Mi primera pgina</A>

Debes observar que el directorio raiz (representado por /) no tiene por que ser el directorio raiz del sistema, ni el de un disco determinado, unicamente se refiere al directorio que te ha asignado tu proveedor como propio.

Enlaces internos en un documento.

(ir a Enlaces Externos) No utilices este enlace hasta que hayas leido el apartado.

Cuando un documento es muy largo o bien dividido en secciones claramente identificables, es bastante habitual el insertar referencias a distintos puntos de dicho documento. En este caso vamos a ver como queda el comando para la nueva aplicacin, recordemos que el formato de enlace era:
<A HREF="hhhhhhhh.tttt">Texto enlace</A>

Sustituiremos "hhhhhhhh.tttt" por "#marca" donde marca puede ser la palabra que deseemos. Lo veremos ms claro con un ejemplo, supongamos que queremos poner un enlace al comienzo del documento, la etiqueta entonces quedar de la siguiente forma:
<A HREF="#inicio">Ir al principio</A>

Y en el principio del documento debemos poner la siguiente etiqueta:

<A NAME="inicio"></A>

Es decir, la primera etiqueta sera la orden de ir a un sitio determinado y la segunda es el sitio. Es posible combinar los dos metodos que llevamos estudiados hasta aqu. Supongamos que de nuestra pgina ejemplo queremos saltar al medio de nuestra pgina 2, entonces utilizaremos la siguiente etiqueta:
<A HREF="pagina2.htm#medio">Mi segunda pgina</A>

y en el medio de la pgina 2 habremos puesto la siguiente etiqueta:

<A NAME="inicio"></A>

Para que veas el efecto haz click en el enlace siguiente y te llevar al principio de este apartado: Ir a ENLACES INTERNOS para volver aqu pulsa el enlace que encontrars all.

Enlaces Externos
Si queremos enlazar con una pgina que este fuera de nuestro sistema, debemos dar la direccin completa o URL (Uniform Resorce Locator).

Antes de meternos de lleno explicar lo que son las URL. Son basicamente cadenas de texto que comienzan por el protocolo que se utiliza para acceder a los ficheros o recursos. Si estos son accesibles como pginas Web, que utilizan el protocolo HTTP, estas empezaran por "http:". Igualmente las direcciones pueden empezar por "ftp:" o "gopher:", por citar las dos ms comunes, entre otras. Despues de este prefijo se introduce la direccin Internet de la mquina que contiene el fichero o recurso. Una direccin en Internet es un nmero que se asigna a cada mquina y que garantiza que es nico, es decir no hay otra mquina que tenga el mismo nmero. Un ordenador puede estar definido en Internet con la direccin: 194.179.196.2 Debido a que esta serie de numeros resulta extraa y dificil de recordar, existe un sistema que nos permite dar nombres a los ordenadores que componen Internet, estos nombres son lo que llamamos direcciones Web y tienen el siguiente esquema: www.redestb.es Que significan todas estas letras?. La palabra "es", se refiere al mximo nivel de organizacin en Internet. En este caso se refiere a un ordenador situado en Espaa (es). La palabra "redestb" se refiere a un ordenador llamado "redestb", dentro del dominio "es". El sistema tambien garantiza que este nombre sea nico. La ultima palabra que nos queda es "www", que significa una subdivisin de la maquina "redestb" que suministra pginas Web, tambien podra haber figurado "ftp" (File Transfer Protocol) si actuara como servidor de ficheros. Supongamos que queremos hacer un enlace con Microsoft, su URL es http://www.microsoft.com entonces la etiqueta que debemos poner ser la siguiente:
<A HREF="http://www.microsoft.com">Enlace con MICROSOFT</A>

Es importante en estos enlaces respetar como estan escritos, ya que los servidores Unix diferencian entre maysculas y minsculas.

Existe un enlace ms, que es el modo de que te puedan enviar un mensaje a tu direccin de correo, con el siguiente formato:
<A HREF="mailto:direccion@decorreo">Texto Enlace</A>

Observa que en el "Texto Enlace" he puesto mi direccin de correo, esto lo he hecho porque hay algunos navegadores que no identifican esta directiva y si hubiera puesto otra cosa como " A. De Angel", quien estuviera viendo la pgina se quedara sin saber la direccin de correo y no podra mandar sus comentarios. Bueno ya tienes todos los elementos para hacer una pgina sencilla, la semana que viene comenzaremos con tcnicas avanzadas.

Organizacin del texto.

Con lo que llevamos visto hasta ahora ya somos capaces de construir una pgina operativa aceptable, y nos hemos divertido viendo como nuestra pgina iba tomando forma. A partir de ahora. lo que vamos a ver es menos espectacular, pero conseguiremos una mejor apariencia y quizs con menor trabajo. Algunas de las etiquetas las hemos visto ya, pero en este captulo las desarrollamos ms ampliamente. En esta leccin veremos los siguientes apartados: 1. 2. 3. 4. 5. 6. Alineacin deltexto. Parrafos y saltos de linea. Divisin de lineas. Estilos de texto. Cabeceras. Separadores.

Alineacin del Texto.

Como ya dijimos en un captulo anterior, estamos acostumbrados, cuando trabajamos con un programa de tratamiento de textos, a dar a latecla intro oreturn y que nos salte de linea. En HTML esto no es as, por lo que debemos indicar estos saltos de lnea por medio de directivas especiales. Es decir aunque nuestro texto tenga retornos que lo dividan en varias lneas esto no se ver as a menos que este incluidas dentro de las directivas correspondientes.

Por defecto, el texto aparecer siempre alineado a la izquierda y sin justificar. Cuando una linea no cabe entera, la divisin se hace por palabra completa. Una vez dicho esto vamos a ver la primera directiva.
<CENTER>

texto, imagen, tabla </CENTER>

Esta directiva permite centrar el texto, imagenes y tablas contenidas entre su etiqueta de apertura y su etiqueta de cierre. Veamos un ejemplo:
<P>Este parrafo no tiene etiqueta center</P><BR> <CENTER>Este otro si la tiene</CENTER>

Con lo que veriamos lo siguiente: Este parrafo no tiene etiqueta <center>. Este otro parrafo si la tiene Otra directiva dedicada a la alineacin, en HTML 3.2 es la siguiente:
<DIV ALIGN="AAAAAAA"> texto, etc</DIV>

Donde "AAAAAAA" puede ser cualquiera de los siguientes atributos:

Center : Alineacin al centro. Left : Alineacin a la izquierda. Right : Alinecin a la derecha.

Con lo que la etiqueta quedara de alguna de las siguientes formas:

<DIV ALIGN="CENTER">texto, etc</DIV> Lo que hubiera entre el cierre se alineara al centro. <DIV ALIGN="LEFT">texto, etc </DIV> Lo contenido se alineara a la izquierda. <DIV ALIGN="RIGHT">texto, etc</DIV> Se alineara a la derecha.

Para terminar de ver las etiquetas de alineacin veremos por ultimo una conocida nuestra la etiqueta que delimita un parrafo.
<P ALIGN="AAAAAAA"> texto</P>

Donde "AAAAAAA" puede ser cualquiera de los siguientes atributos:

Center : Alineacin al centro. Right : Alinecin a la derecha.

Con lo que la etiqueta quedara de alguna de las siguientes formas:

<P ALIGN="CENTER">texto</P> Lo que hubiera entre el cierre se alineara al centro. <P="RIGHT">texto</P> Se alineara a la derecha.

Como se puede observar he eliminado el atributo que alineara el texto a la izquierda porque es lo que esta etiqueta hace por defecto.

Parrafos y saltos de linea.

En HTML, el salto de linea simple se logra con la etiqueta <BR>, esta etiqueta es vacia y por lo tanto no tiene cierre. La otra etiqueta que provoca un salto de linea, mayor que la anterior es <P> etiqueta ya conocida por lo dicho en el parrafo anterior. Solo hay que hacer una advertencia, no se puede ampliar un espacio a base de etiquetas <P> sin ningun contenido porque cuando estan vacias se resumen a una sola. El unico truco que podemos efectuar es utilizar la entidad especial &nbsp; que representa a un espacio sin ruptura y encerrarlo entre la etiqueta <P> de esa manera podriamos encadenar varios parrafos vacios. Por ejemplo, supongamos que queremos dejar el espacio equivalente a dos parrafos vacios, entonces empleariamos el siguiente cdigo:
<P>&NBSP;</P><P>&NBSP;</P>

y con ello habrmos logrado nuestro objetivo.

Divisin de lneas.
HTML todavia es incapaz de ajustar el texto. Es decir si el final de una lnea coincide con la mitad de una palabra, lo que hace el Navegador es enviar dicha palabra a la linea siguiente. Al margen del estandard Microsoft y Netscape en sus respectivos navegadores implementan la directiva <NOBR>. Esta directiva lo que hace es delimitar un area de texto que no se divide aunque alcance el final de lnea. Esta directiva se puede utilizar cuando en una pgina Web estamos dando algun tipo de informacin que no nos interesa que se vea cortada, por ejemplo en el caso de que estemos poniendo un comando de ordenador, y no queremos que se vea alterado para una ms facil comprensin del lector. Microsoft y Netscape implementan adems la directiva <WBR> que indica los puntos en donde puede dividirse un bloque delimitado por <NOBR>.

Estilos del texto.

Con lo que llevamos visto, todava no somos capaces de modificar la apariencia del texto. La etiqueta que nos va a permitir efectuar estas transformaciones es <FONT>. De todas maneras antes de meternos de lleno con esta etiqueta vamos a diferenciar dos clases de estilos: 1. Estilos fsicos. Son aquellos que ya estamos acostumbrados a ver en los tratamientos de textos y ya hemos mencionado algunos de ellos anteriormente y son los siguientes:
<B>Texto</B> Negrita. <I>Texto</I> Itlica. <U>Texto</U>Subrayado <TT>Texto</TT>Texto de Terminal <STRIKE>Texto</STRIKE>Texto tachado <BIG>Texto</BIG>Aumenta el tamao de la letra <SMALL>Texto</SMALL>Disminuye el tamao de la letra <SUB>Texto</SUB>Inserta un subindice A2 <SUP>Texto</SUP>Inserta un superindice 23

El efecto de tododos ellos se acumula. Por ejemplo si dentro de un bloque en negita, se incluye uno en cursiva, el texto aparecer con los dos estilos, es decir estar en cursiva y negrita. 2. Estilos lgicos. Existen multitud de estilos por lo que daremos aqu los mas usuales.
<STRONG>Texto</STRONG>Fuerte, marcado, <EM>Texto</EM>Enfatizado,similar a Italica <KBD>Texto</KBD>Teclado,similar a TT

similar a negrita

El tamao y el color del texto es el establecido por el usuario en la configuracin de su navegador, que podemos modificar por el atributo text de la etiqueta <BODY>. El tamao base es el 3 en una escala, que va de menor a mayor tamao de letra, de 7. Como podeis observar el criterio es el inverso de las etiquetas <Hn> donde el <H1> era la de mayor tamao. Veamos los atributos que tiene la etiqueta <FONT>. Su forma general ser la siguiente:
<FONT SIZE="n" COLOR="#RRVVAA" FACE="nombre1,nombre2,...,nombren"> y su etiqueta de cierre es </FONT>

Veamos ahora que significan cada uno de los atributos expuestos arriba. No es necesario especificar nada mas que el que se quiera cambiar.
<FONT SIZE="n"> donde n es igual al tamao (1 a 7).

Con este atributo se modifica el tamao de la letra. Se puede especificar en numeros absolutos o en relativos, veamos dos ejemplos:
<FONT SIZE="5"> Cambia el tamao al tamao 5 <FONT SIZE="+1"> Cambia el tamao al inmediatamente superior a la unidad de base..

Veamos el siguiente atributo:

<FONT COLOR="#RRVVAA"> donde RRVVAA es el ya conocido cdigo de colores.

As el siguiente ejemplo cambiara el color de la letra a rojo:

<FONT COLOR="#FF0000">

Para cambiar la familia de fuentes utilizamos el atributo <FACE>, veamos como se hace:
<FONT FACE="nombre1,nombre2"> donde nombre1, nombre2 son el nombre de la fuente.

No es necesario poner dos o mas nombres, el navegador intentar presentar el texto con los fonts puestos en primer lugar, si no estuvieran disponibles utilizaria los del segundo lugar y as sucesivammente, en caso de que no tuviera ninguno utilizara el definido por defecto.
<FONT FACE="Comic Sans MS,Arial"> <FONT FACE="Comic Sans MS">

En el primer ejemplo el navegador intentara con los fonts del primer nombre, y de no encontrarlos, intentara con fonts de la familia Arial. En el segundo, intentaria presentar el documento con el tipo de letra Comic Sans MS, de no existir ese tipo lo representara con la que tuviera definida por defecto.

Cabeceras
No nos vamos a extender mucho aqu ya que lo hemos visto en otro captulo, solo mencionar que como habreis observado cuando se utiliza una cabecera, el texto aparece en negrita, y no hace falta insertar ninguna etiqueta del tipo <P> ni <BR> por que salta de linea cuando se cierra.

Solo recordaremos que el formato es:

<Hn> </Hn> Donde n es un numero, entre 1 y 6, que indica el nivel y tamao de mayor a menor.

Separadores.
Aunque en un cpitulo anterior ya vimos el separador <HR>, aqu daremos su formato completo:
<HR SIZE="n" WIDTH="nn" ALIGN="aaaaa" NOSHADE>

Veamos lo que significa cada atributo y su cometido:

SIZE="n"

Con este atributo, donde n es un nmero en pixels , modificamos el grosor de la barra horizontal. Veamos un ejemplo:
<HR SIZE="4" ALIGN="CENTER">

Que nos d lo siguiente:

WIDTH="nn"

Se emplea para indicar la anchura que debe tener en la ventana del navegador, se puede indicar en pixeles o en tanto por ciento.
<HR WIDTH="50%" ALIGN="CENTER">

ALIGN="aaaaaa"

Con este atributo indicamos su alineacin, aaaaaa puede ser "left", alinear a la izquierda, "rigth" alinear a la derecha y "center", estar centrada.
<HR WIDTH="50%" ALIGN="LEFT">

NOSHADE

Elimina el efecto de sombra y tridimensional que tiene la barra.

<HR WIDTH="50%" ALIGN="LEFT" NOSHADE>

Bien, la semana que viene veremos como hacer listas y tablas.

Organizacin del texto.

No, no te has equivocado al pinchar el enlace y te has ido al captulo anterior, ni yo he vuelto a repetir la misma leccin, unicamente es que lo que vamos a ver a continuacin es una forma mas sofisticada de organizar el texto dentro de una pgina Web. En esta leccin veremos los siguientes apartados: 1. Listas desordenadas. 2. Listas ordenadas. 3. Listas de definiciones. Para haceros una idea, lo que acabais de leer, es un ejemplo de lista ordenada.

Listas desordenadas.
A estas listas se las llama tambien "bulleted list", por el "bullet" o punto que antecede a cada elemento. La lista se delimita con las siguientes directivas de apertura y cierre: <UL>...</UL> y cada elemento de la lista viene contenido entre las siguientes etiquetas: <LI>Elemento de la lista</LI> Veamos un ejemplo: <H3>Ejemplo de Lista</H3> <UL> <LI>Barcelona</LI> <LI>Cordoba</LI> <LI>Madrid</LI> </UL> Espero que no se enfade nadie, estan puestas por orden alfabtico. Este ejemplo se ver de la siguiente forma:

Figura 6-1
Estas listas admiten el atributo TYPE con las siguientes opciones: TYPE="aaaaaaaa" Donde "aaaaaaaa" puede ser: "disc" = Inserta el disco relleno que aparece en el ejemplo. "square" = Inserta un cuadrado. "circle" = Inserta un circulo. Si este atributo lo aadimos a la etiqueta <UL> se vern afectados todos los elementos de la lista, si por el contrario, lo aadimos a la etiqueta <LI> solo se ver afectado ese elemento de la lista. Vamos a ver un ejemplo de los tres: <H4>Ejemplo de Disc</H4> <UL TYPE="DISC"> <LI>Barcelona</LI> <LI>Cordoba</LI> <LI>Madrid</LI> </UL> <H4>Ejemplo de SQUARE</H4> <UL TYPE="SQUARE"> <LI>Barcelona</LI> <LI>Cordoba</LI>

<LI>Madrid</LI> </UL> <H4>Ejemplo de Circle</H4> <UL TYPE="CIRCLE"> <LI>Barcelona</LI> <LI>Cordoba</LI> <LI>Madrid</LI> </UL> Que veremos de la siguiente forma, bueno no exactamente, porque en el ejemplo he formateado el documento, para que se vieran las tres juntas en horizontal:

Figura 6-2

Listas ordenadas.
Este tipo de listas se delimitan con las etiquetas de apertura y cierre siguientes: <OL>...</OL> y cada elemento de la lista, como la anterior, viene contenido entre las siguientes etiquetas: <LI>Elemento de la lista</LI>

Este tipo de listas admiten los siguientes atributos: Atributos START="n" Donde "n" es un nmero que indica a partir de que nmero va a empezar la lista TYPE="1" Indica orden numrico. TYPE="a" Indica orden alfabetico con minsculas. TYPE="A" Indica orden alfabetico con maysculas. TYPE="i" Indica orden numrico con numeros romanos en minsculas. TYPE="I" Indica orden numrico con numeros romanos en maysculas. Sean del tipo que sean, el navegador interpretar el numero que se indica en START adaptandole al tipo del que sea la lista. En el caso de que el atributo START se quiera aplicar a una etiqueta <LI>, en lugar de START se pondr VALUE y afectar a los elementos de la lista que vengan a continuacin. Veamos algunos ejemplos para entender su funcionamiento: <H4>Numeros</H4> <OL START="1" TYPE="1"> <LI>Barcelona</LI> <LI>Cordoba</LI> <LI>Madrid</LI> </OL> <H4>Minusculas</H4> <OL START="3" TYPE="a"> <LI>Barcelona</LI> <LI>Cordoba</LI> <LI>Madrid</LI> </OL> <H4>Mayusculas</H4> <OL START="1" TYPE="A"> <LI>Barcelona</LI> <LI>Cordoba</LI> <LI>Madrid</LI> </OL> <H4>Numeros romanos minusculas</H4> <OL START="215" TYPE="i"> <LI>Barcelona</LI> <LI>Cordoba</LI> <LI>Madrid</LI> </OL>

<H4>Numeros romanos mayusculas</H4> <OL START="1" TYPE="I"> <LI>Barcelona</LI> <LI>Cordoba</LI> <LI>Madrid</LI> </OL> Veamos como se vera el cdigo anterior en el navegador:

Figra 6-3

Listas de definicin.
Las listas de definicin son listas a dos niveles, cada elemento se descompone en un nombre que ocupara la primera lnea y una definicin que ocupara las siguientes. Este tipo de lista est delimitado por la directiva <DL>...</DL>, el ttulo por <DT>TITULO</DT> y la definicin por <DD>DEFINICIN</DD> Veamos un ejemplo:

<H4>Lista de Definicion</H4> <DL> <DT><B>Catalunya</B></DT> <DD>Barcelona</DD> <DT><B>Andalucia</B></DT> <DD>Cordoba</DD> <DT><B>Madrid</B></DT> <DD>Madrid</DD> </DL> Ejemplo que veremos as: Lista de Definicion Catalunya Barcelona Andalucia Cordoba Madrid Madrid Con esto terminamos los principales tipos de listas. En el siguiente captulo veremos las tablas y como formatear el texto con ellas, no he tenido mas remdio que hacerlo as porque esta pgina pesa mucho y sera interminable el tiempo de carga, si aadiesemos las tablas. En el plazo de dos das se incorporar el capitulo donde hablamos de tablas

Tablas.
Las tablas sirven para presentar la informacin de una manera ordenada. Dentro de las celdas de las tablas podremos incluir alguno de los elementos siguientes: texto, listas, imagenes, hiperenlaces, otras tablas, elementos de formulario y cualquier otro elemento que se nos ocurra. Adems nos serviran para formatear el texto que aparezca en nuestra pgina. Veamos, pues, la estructura general de una tabla.

Estructura.
Como sabeis, una tabla se compone de filas y columnas, que al cruzarse componen las celdas. Para definir una tabla necesitamos una etiqueta principal para comenzar la estructura y otras etiquetas para definir los bloques restantes. Veamos someramente la estructura bsica de una

tabla. 1. Etiqueta principal que marca el comienzo de la tabla. <TABLE> 2. Etiqueta de comienzo de nueva fila. <TR> 3. Etiqueta de definicin de celda. <TD> y su cierre </TD>. Estas etiquetas las repetiremos tantas veces como celdas tenga la fila. 4. Etiqueta de cierre de fila. </TR>. Se repetirn los puntos del 2 al 4 tantas filas como tenga la tabla. 5. Etiqueta de fin de tabla. </TABLE> Con estas simples etiquetas ya estamos en condiciones de definir una tabla, veamos un ejemplo: <CENTER><TABLE> <TR> <TD><B>Fila 1,Columna 1</B></TD> <TD><B>Fila 1,Columna 2</B></TD> <TD><B>Fila 1,Columna 3</B></TD> </TR> <TR> <TD><B>Fila 2,Columna 1</B></TD> <TD><B>Fila 2,Columna 2</B></TD> <TD><B>Fila 2,Columna 3</B></TD> </TR> </TABLE> </CENTER> Que se ver de la siguiente forma: Fila1,Columna 1 Fila2,Columna 1 Fila1,Columna 2 Fila2,Columna 2 Fila1,Columna 3 Fila2,Columna 3

Veamos a continuacin, los principales parmetros que podemos utilizar en cada uno de los bloques que hemos visto: <TABLE>...</TABLE> Esta etiqueta sirve para crear la tabla y tiene los siguientes

parmetros:

BORDER="n". Donde n es un nmero que nos sirve para definir el espesor del marco de la tabla, si no lo especificamos, su valor por defecto es cero, no se ver el marco, efecto que se v en el ejemplo anterior donde solo se ve texto, alineado en columnas. Si lo que queremos es formatear un documento no pondremos este atributo. El numero se expresa en pixeles. CELLPADDING="n". "n" es un nmero que define el espacio que va a rodear al texto en cada una de las celdas. Su valor est en pixeles. Por defecto su valor es de 1 pixel. CELLSPACING="n". Sirve para definir la separacin entre celdas, su valor por defecto es de 2 pixeles. No es lo mismo que aumentar el tamao del borde. Combinando ambos se pueden obtener efectos curiosos e interesantes. BGCOLOR="#RRVVAA". Este atributo ya es un viejo conocido nuestro pues lo vimos cuando hablamos del color de fondo en la pgina Web. Su significado es el mismo solo que aplicado al fondo de la tabla. BACKGROUND="imagen.typ". Solo funciona cuando se v la pgina en el Internet Explorer. <CAPTION>Texto</CAPTION> debajo de la etiqueta principal, nos sirve para aadir un ttulo a la tabla. WIDTH="nnn". Con este atributo definimos el ancho que debe tener la tabla, se puede dar en pixeles o en tanto por ciento, mi consejo es que utiliceis tanto por ciento, ya que todos no tenemos configurado la resolucin de pantalla en los mismos valores, utilizando el % nos aseguramos que sea cual sea la resolucin la tabla tendr la misma apariencia. HEIGTH="nnn". Con los mismos condicionantes que el anterior, nos define la altura que tendr la tabla.

<TR>...</TR> Estas etiquetas vimos que definian cada una de las filas que componian la tabla. Los atributos que se pueden utilizar aqu son lo siguientes:

VALIGN="aaaaa". Donde "aaaaa" puede tomar los valores siguientes : TOP, BOTTOM, MIDDLE. TOP alinea el texto de todas las celdas que componen la misma fila, si en alguna de ellas no se especifica otra cosa, arriba. BOTTOM lo alinea abajo, y

MIDDLE en el medio. Como se puede observar esta es una alineacin vertical del texto. ALIGN="aaaaa". "aaaaa" puede tomar los valores, LEFT, RIGTH, CENTER. Se utiliza para alinear el texto en el sentido horizontal de las celdas, y significan respectivamente, izquierda, derecha y centro.

<TD>...</TD> Ya sabemos que estas etiquetas delimitan el contenido de cada una de las celdas. En las tablas el ajuste es automtico, la anchura de una celda est definida por el texto mas largo definido en una celda de la misma columna, sin embargo podemos utilizar varios parmetros para cambiar el tamao, veamos cuales son:

VALIGN="aaaaa". Identico al caso anterior pero aplicado a una sola celda. ALIGN="aaaaa". Identico al caso anterior pero aplicado a una sola celda. COLSPAN="n". Donde n es un nmero que define el ancho de una celda como multiplo de la columna bsica. Lo utilizaremos cuando queramos que una celda abarque varias columnas, obviamente en sentido horizontal. ROWSPAN="n". Igual que la anterior pero en el caso de que una celda se extienda en vertical, sobre un nmero determinado de filas. NOWRAP. Se utiliza para que el navegador coloque todo el texto que contiene la celda en una linea, sin cortarlo en varias lineas como hace por defecto. <TH>...</TH>. Este no es un parametro, ni un atributo, simplemente sustituye a la etiqueta utilizada para definir las celdas, en el caso de que queramos poner una celda cabecera con el texto centrado y en negrita. Admite no obstante todos los parmetros mencionados anteriormente.

Os recomiendo que en vuestro navegador veais el cdigo de esta pgina y vereis como se utilizan las tablas para formatear una pgina. Con esto terminamos las tablas, al final del curso en un apartado que se denominar trucos y consejos, veremos algunos trucos de empleo de tablas. Practicad con las tablas todo lo que podais, pues es uno de los

elementos mas utiles e importantes del HTML y que nos permite mostrar unas pginas limpias y ordenadas. En el siguiente captulo veremos los Frames y seguramente comenzaremos con formularios.

Frames.
En este captulo vamos a ver un elemento que no forma parte del estandard de HTML pero desde que Netscape lo divulg esta muy extendido en la Web. Los "frames" son elementos que facilitan la divisin de una ventana, y ahora no hablo de pgina, sino de la ventana que ves en el navegador, en varias reas dedicadas a visualizar pginas diferentes..

Frames.
Es una forma muy extendida y de la que se mantiene una controversia constante sobre la conveniencia o no de su utilizacin. Cada ventana que se abre se comporta, en principio, como un visualizador distinto, es como si dispusierais de tantos navegadores como ventanas, insertos dentro de vuestro navegador. Incluso en la impresin, si quereis imprimir una pgina Web que tenga "frames" solo se imprimir el que est activo en ese momento. Adems no todos los navegadores los soportan, por lo que si los utilizais debeis prever la forma para que la pgina pueda ser vista por estos. Para ver como se hacen y trabajan los "frames" vamos, primero a efectuar dos pginas, que llamaremos pagina1 y pagina2, con el siguiente contenido: Pagina1 <HTML> <HEAD> <TITLE>Pagina1</TITLE> </HEAD> <BODY> <H1>Pagina 1</H1> </BODY> </HTML> Pagina2

<HTML> <HEAD> <TITLE>Pagina2</TITLE> </HEAD> <BODY> <H1>Pagina 2</H1> </BODY> </HTML> En principio definir un "frame" es muy sencillo, basta definir por medio de la directiva <FRAMESET>, sustituyendo a la seccin <BODY>. En esta directiva se especifican las areas y tamaos por medio de los atributos COLS y ROWS. Para definir el contenido de cada "frame" utilizaremos la etiqueta <FRAME SRC="DOCUMENTO.HTML">, con lo que asociamos a un frame determinado ese documento HTML, veamos un ejemplo: <HTML> <HEAD> <TITLE>Frames</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME SRC="Pagina1.htm"> <FRAME SRC="Pagina2.htm"> </FRAMESET> </HTML> Que se ver de la siguiente forma:

Figura 8-1

Vamos a continuacin, a explicar cada una de las directivas con sus parmetros correspondientes: <FRAMESET>...</FRAMESET> Esta etiqueta nos permite definir si los frames van a ser horizontales o verticales, el tamao de los mismos y algunos atributos mas. Veamos los atributos que se le puede aadir:

ROWS="fila1,fila2,fila3...filan". Este atributo sirve para dividir la pantalla en secciones horizontales, Fila1, Fila2, etc. son una lista de valores separados por comas que indican que tamao tendr su correspondiente separacin horizontal. Estos valores se pueden definir de tres formas, en pixeles, en porcentaje, y con el simbolo *, que significa que es un valor relativo y el frame correspondiente ocupar el espacio que reste en la pantalla. Si hay mas de un frame con asterisco, el espacio sobrante se repartir en partes iguales entre ellos. Si colocamos un numero delante del asterisco ese frame tendr n veces mas espacio que los otros con asterisco. COLS="col1,col2,col3...coln". Este atributo sirve para dividir la pantalla en secciones verticales y se utiliza de igual forma que el anterior pero referido a las columnas. FRAMEBORDER="n". Sirve para definir la barra de separacin entre frames, donde n es un valor en pixeles, si es cero el borde desaparece. FRAMESPACING="n". Sirve para definir la separacin entre frames, donde n es un valor en pixeles, si es cero el borde desaparece. Este atributo es valido para el Internet Explorer. BORDER="n". Igual que el anterior, Solo funciona cuando se v la pgina en Netscape.

Veamos un ejemplo con nuestras dos pginas: <HTML> <HEAD> <TITLE>Frames</TITLE> </HEAD> <FRAMESET ROWS="30%,*" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0">

<FRAME SRC="Pagina1.htm"> <FRAME SRC="Pagina2.htm"> </FRAMESET> </HTML> Aunque no lo he representado , he cambiado el color del fondo en la pgina 2 para que el efecto sea mas patente.

Figura 8-2 En este caso se ha anulado, tanto el borde como la separacin entre frames. Como podeis observar en el primer ejemplo, existe otra etiqueta que he utilizado y todava no hemos definido, esa etiqueta es <FRAME>. En lineas generales, si observais detenidamente, los frames tienen muchas analogias con las tablas. Bien veamos que podemos hacer con esta etiqueta y para que sirve. La etiqueta <FRAME> con sus atributos, se coloca tantas veces como Frames hayamos definido en <FRAMESET>. Los atributos que podemos definir son los siguientes:

SRC="url". Donde URL es la direccin de un documento HTML o de cualquier otro recurso de la WEB. Si no se coloca este atributo el frame estar vacio. NAME="nombre del frame". Aqui podemos dar un nombre al frame, lo que nos permitir referirnos a el y convertirse en el destino de cualquier hiperenlace, como veremos mas adelante. MARGINWIDTH="n". Donde n es un numero en pixeles que nos

sirve para definir la anchura de los margenes del frame. MARGINHEIGTH="n". Igual que el anterior pero en altura. SCROLLING="yes,no,auto". Con este atributo definimos si el frame va a tener o no una barra deslizadora. Si ponemos "yes" el frame siempre tendr barra deslizadora aunque no la necesite, "no", nunca tendr barra, y "auto" ser el navegador el que decida si la lleva o no. NORESIZE. Este atributo no lleva ningun parametro e indica al navegador que no debe permitir al usuario cambiar el tamao del frame. FRAMEBORDER="no". Igual que en la directiva anterior sirve para eliminar el borde, pero aqui de un solo frame.

Los frames se pueden anidar, es decir despues de una directiva <FRAME> podemos poner una directiva <FRAMESET> que afectaria a dicho frame subdividiendole. Ahora nos podemos preguntar que hacemos cuando queremos prever el caso del navegador que no admita frames, pues existe una directiva para ese caso que veremos a continuacin: <NOFRAMES>...</NOFRAMES> Esta directiva se coloca despues de la etiqueta de cierre de <FRAMESET> y entre ellas podemos poner, bien un aviso, o todo un documento HTML completo con las etiquetas <BODY> y </BODY> incluidas, aunque lo normal es poner un aviso de que esa pgina utiliza frames y un hiperenlace a una pgina alternativa que no los utilice. Ya hemos visto como se realiza un documento que utiliza frames, ahora veremos como se puede relacionar los distintos frames entre si. Es decir que al pinchar sobre un hiperenlace en un frame determinado, aprezca el documento en otro. Esto es lo que hace tiles a los frames para generar una barra de mens siempre presente. Para ello se emplea el siguiente atributo especial: TARGET="nombre de frame". Este atributo permite definir el nombre del frame que recibir el documento del hiperenlace. Es decir si ponemos la siguiente etiqueta <A HREF="pagina1.htm" TARGET="frame1">Opcion 1</A> situada en un frame del navegador conseguimos que al pinchar en Opcin 1 aparezca el documento pagina1.htm en el frame1 siempre que hallamos definido con el atributo NAME el nombre de los frames en la correspondiente etiqueta

<FRAME>. Los parametros especiales que se pueden utilizar, aparte de cualquier nombre, son los siguientes:

TARGET="_blank". Obliga al navegador a crear una copia a pantalla completa. Tendremos as dos navegadores, aunque esta ventana no tiene nombre y no se podr utilizar como destino de otro hiperenlace. TARGET="_self". Es el defecto si no ponemos target, el documento se carga sobre el mismo frame que contiene el enlace. TARGET="_top". Hace que el enlace se cargue a pantalla completa, suprimiendo todos los frames, pero sin crear una copia del navegador. Este lo debemos utilizar siempre que la pgina a la que llamemos pertenezca a otro servidor y sea independiente de nuestra pgina Web. El comentario anterior es un consejo y no una imposicin, es decir no lo exige el atributo en s, pero si forma parte de las buenas costumbres, pues si no lo hacemos as, parece que queremos anclar a nuestro visitante en nuestra pgina, aparte de lo molesto que resulta el cargar a lo mejor una pgina que tambien utiliza frames. TARGET="_parent". Cuando se hace un anidamiento de frames se crea una jerarquia, por lo que al hacer uso de este atributo desaparece la jerarquia inferior y el hiperenlace se muestra en el frame jerarquicamente superior.

Veamos un ejemplo de utilizacin de frames. Vamos a hacer una pgina dividida en dos columnas, una ocupar el 20% de la pantalla y la otra el resto. La primera ser un menu que al pinchar en un enlace se mostrar una pagina en el frame mas grande. Primero efectuaremos la pgina que nos v a servir de menu y pondremos dos opciones para que muestre las dos pginas de los ejemplos anteriores. Pgina del Men <HTML> <HEAD> <TITLE>Menu</TITLE> </HEAD> <BODY> <CENTER><A href="Pagina1.htm" TARGET="frame2">Pagina

1</A></CENTER> <CENTER><A href="Pagina2.htm" TARGET="frame2">Pagina 2</A></CENTER> </BODY> </HTML> Haremos una pgina de introduccin: Pgina de introduccin <HTML> <HEAD> <TITLE>Ejemplo</TITLE> </HEAD> <BODY> <CENTER><H2>Ejemplo de Frames</H2></CENTER> </BODY> </HTML> A continuacin vamos a ver como definimos la pgina de frames: <HTML> <HEAD> <TITLE>Frames</TITLE> </HEAD> <FRAMESET COLS="20%,*"> <FRAME SRC="Menu.htm" NORESIZE> <FRAME SRC="Ejemplo.htm" NAME="frame2"> </FRAMESET> </HTML> Cuando cargueis en el navegador la pgina donde se definen los frames vereis la siguiente figura:

Figura 8-3 Y si pinchais en el enlace correpondiente a la Pgina 2, debereis ver:

Figura 8-4 Efectuad todas las pruebas que se os ocurran, hasta dominar el uso de los frames. Como ejercicio os dejo que aadais al men la forma de volver a la pagina principal donde aparece Ejemplo de Frames. Con esto terminamos los frames. En el siguiente captulo veremos los formularios.