INTRODUCCIN Conocer HTML es de gran importancia para los programadores de pginas Web ya que con este lenguaje podemos

combinar textos, sonidos e imgenes de acuerdo a nuestra necesidad y creatividad, a la vez que ello constituye una de las vas ms usadas en Internet para la divulgacin de informacin. La Web es en la actualidad un rea de amplio contenido multimedia y el HTML ha tenido numerosos estndares desde su creacin buscando la forma de adaptarse a las exigencias crecientes de Internet. Existen muchos materiales que orientan el aprendizaje del lenguaje HTML. Usted puede encontrarlos en Internet o cualquier otro lugar. Este artculo pudiera resultar un documento ms, sin embargo, el autor consideran que no lo es, porque adems de las orientaciones necesarias para que usted aprenda, tiene un enfoque concntrico de dichas orientaciones con reiteracin de los ejemplos ilustrativos, integrados de forma tal, que no permiten el conocimiento aislado de los elementos que componen este lenguaje y que lo hacen mucho ms didctico que cualquier otro documento similar elaborado con la intencin de ensear. De manera que el objetivo es ofrecer un material que conduzca a quien lo utilice, por un camino certero y muy rpido en el aprendizaje de HTML sin necesidad de asistir a clases. No se pretende abordar en esta primera parte, todos los aspectos que contiene el HTML para no hacer extremadamente extenso el material, por lo que habr una segunda parte aunque, siempre sin agotar todos los aspectos, sino utilizando aquellos que resultan ms importantes para que usted pueda adentrarse en la problemtica fundamental de este importante lenguaje.

2|Pgina

UNIDAD 01
1)

DEFINICIN DE HTML:
Comencemos definiendo que es HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de informacin relacionadas, y con inserciones multimedia (grficos, sonido...) La descripcin se basa en especificar en el texto la estructura lgica del contenido (ttulos, prrafos de texto normal, enumeraciones, definiciones, citas, etc) as como los diferentes efectos que se quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un grfico determinado) y dejar que luego la presentacin final de dicho hipertexto se realice por un programa especializado (como Mosaic, Netscape, Internet Explorer, Mozilla, Opera, etc.).

2)

NAVEGADORES COMPATIBLES:
Como hemos dicho, el navegador instalado en el ordenador del usuario es el que interpreta el cdigo HTML de la pgina que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma pgina de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador. Los navegadores de hoy en da pretenden ser compatibles con la ltima versin de HTML. Es necesario realizar extensiones de los navegadores para que puedan ser compatibles con esta ltima versin. Dos de los navegadores que continuamente estn realizando extensiones son Internet Explorer y Netscape Navigator, que realizan extensiones incluso antes de que se establezcan los estndares, intentando incluir las nuevas funciones incluidas en los borradores. Los navegadores tienen que ser compatibles con la ltima versin HTML para poder interpretar el mayor nmero posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretenda la etiqueta no queda reflejado en la pgina. Para realizar las extensiones de estos navegadores se aaden nuevos atributos a las etiquetas ya existentes, o se aaden nuevas etiquetas. Como resultado a estas extensiones, habrn pginas cuyo cdigo podr ser interpretado completamente por todos los navegadores, mientras que otras, al incluir nuevos atributos o etiquetas del borrador de la ltima versin de HTML, solo podrn ser interpretadas en su totalidad en los navegadores ms actualizados. En este ltimo caso tambin puede ocurrir que alguna etiqueta de la pgina solamente pueda ser interpretada por un navegador concreto, y otra etiqueta por un navegador diferente al anterior, por lo que nunca sera visualizada en su totalidad por ningn navegador. Uno de los retos de los diseadores de pginas web es hacer las pginas ms atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades para que el mayor nmero de internautas vean sus pginas tal como las ha diseado.

3)

EDITORES:

Un editor es un programa que nos permiten redactar documentos. Hoy en da existen un gran nmero de editores que permiten crear pginas web sin la necesidad de escribir ni una sola lnea de cdigo HTML. Estos editores disponen de un entorno visual, y generan automticamente el cdigo de las pginas. Al poder ver en 3|Pgina

todo momento cmo quedar la pgina en el navegador, se facilita la creacin de las pginas, y el uso de mens permite ganar rapidez. Estos editores visuales pueden generar en ocasiones cdigo basura, es decir, cdigo que no sirve para nada, en otras ocasiones puede ser ms efectivo corregir directamente el cdigo por lo que resulta necesario saber HTML para poder depurar el cdigo de nuestra pginas. Algunos de los editores visuales con los que podrs crear tus pginas web son Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, de los cuales algunos tienen la ventaja de ser gratuitos. Es aconsejable comenzar utilizando una herramienta lo ms sencilla posible, para tener que insertar nosotros mismos el cdigo HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algn editor visual posteriormente, y depurar el cdigo cuando fuera necesario. Para crear pginas web escribiendo directamente el cdigo HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona Windows. A lo largo de este curso vamos a trabajar con el Bloc de notas para crear nuestras pginas, ya que se trata de un editor de textos muy sencillo de manejar, que nos permitir crear pginas a travs del cdigo HTML. 4)

ETIQUETAS:
Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. La etiqueta de comienzo est delimitada por los caracteres < y >. Est compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten aadir ciertas propiedades. Su sintaxis es: <identificador atributo1 atributo2 ...> Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos. La etiqueta de final est delimitada por los caracteres </ y >. Est compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador> Cada uno de los elementos de la pgina se encontrar entre una etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepcin de algunos elementos que no necesitan etiqueta de cierre. Tambin es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre.

5)

DISEANDO LA PAGINAS WEB EN EL BLOC DE NOTAS:

1. INGRESARNDO AL BLOC DE NOTAS: a) Hacer un clic BIM en el botn inicio b) Deslizar el puntero hasta la opcin Todos los programas c) Deslizar el puntero hasta la opcin Accesorios d) Hacer un clic BIM en la opcin Bloc de notas

4|Pgina

2. CONFIGURACIN DEL SITO WEB: a) Para una buena administracin se recomienda crear una carpeta o directorio es una unidad la cual no este congelada, para ello ingresar al Explorador de Windows para desde all realizar la creacin de una nueva carpeta, pude usted asignar el nombre que mas le convenga, por ejemplo PAGINA1, la carpeta esta contenido con todos los elementos que se utilicen en la pgina web, como imgenes, videos, sonido y otros de vital importancia. 3. GRABAR CON FORMATO HTML: a) Una vez escrito la informacin se necesita grabar dicha contenido b) Hacer un clic BIM en la opcin Archivo c) Hacer un clic BIM en la opcin Guardar d) Escribir el nombre del archivo con la extensin HTM

4. GRABAR EL ARCHIVOS POR UNA Y MAS VECES: a) Al momento de ir elaborando y alimentado con informacin nuestra pginas los elementos existentes en el bloc de notas debern ser actualizados o grabados en forma constante, entes de ejecutar la pagina diseada. b) Realizar la siguiente combinacin de teclas CTRL + G (puede repetir esta opcin) 5. VISUALIZAR LA PAGINA EN EL INTERNET EXPLORER: a) Ubicar el archivo que guardamos en el bloc de notas con el nombre de pagina.htm b) Se recomienda utilizar el explorador de Windows para su ubicacin. c) Una vez ubicado el archivo, hacer dos clics con el BIM sobre el icono del archivo. d) A continuacin se muestra la pgina (en este caso estar vaca debido a que an no se a ingresado informacin en el lenguaje HTML) 6. PARTES DE LA VENTANA DE NUESTRA PGINA:

5|Pgina

a) Una vez ejecutado el icono de nuestra pagina se muestra la siguiente imagen en la que indicaremos algunas partes importantes:

6) ESTRUCTURA DE UNA PGINAS: El lenguaje HTML desarrolla sus documentos a base de una serie de rdenes o comandos comnmente llamados "etiquetas". Las etiquetas se escriben entre corchetes angulares. <XXX> Este es el inicio de una etiqueta. </XXX> Este es el cierre de una etiqueta. Las letras de la etiqueta pueden estar en maysculas o minsculas, indiferentemente. Por claridad, se usarn en este manual solamente las maysculas. Lo que haya entre ambas etiquetas estar influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas <HTML> y </HTML>: <HTML> [Todo el documento] </HTML> LA CABECERA: La cabecera del documento y su etiqueta en ingls sera <head></head>. Escrbalas entre las dos etiquetas de apertura y cierre que ya tiene en el block de notas. El resultado hasta el momento en el block de notas sera: <html> <head> MI PRIMERA WEB </head> </html>

6|Pgina

TITULO DE LA PGINA: Como la cabecera del documento se refiere al ttulo es por eso que las etiquetas usan la palabra en ingls <title></title>. Estas etiquetas del ttulo se sitan entre las dos etiquetas de cabecera y as tendremos en el block lo siguiente: <html> <head> MI PRIMERA WEB </head> <title> APRENDIENDO HTML </title> </html> El resultado sera:

CUERPO O CONTENIDO DE LA PGINA: <body></body>. Si recordamos que la pgina contiene dos elementos: encabezamiento y cuerpo ello nos permite razonar que debemos ubicar las etiquetas del cuerpo a partir del cierre de la etiqueta de encabezamiento, o sea, despus de </head> y as tendramos: <html> <head>

<title>APRENDIENDO HTML </title> </head> <body></body> </html> De todas formas, si guardamos lo que hasta ahora hemos escrito en el block y actualizamos la pgina, esta seguir en blanco porque aun no hemos hecho nada en el cuerpo (body) del documento.

7) MANEJO DE ETIQUETAS: 1. TAMAO DE LETRA (H): Permite asignar tamao al texto segn la aplicacin de H1 . H6, como se vera en el siguiente ejemplo: <html> <head> <title> APRENDIENDO HTML </title> 7|Pgina

</head> <body> <H1> MI PRIMERA WEB </H1> </html> El resultado sera: </body>

2. CENTRAR TEXTO: Tal vez sera mucho ms elegante centrar el ttulo y lo podramos ubicar de esta forma a partir de <body> con la etiqueta <center> pero, desde luego, poniendo la etiqueta del cierre </center> inmediatamente despus del cierre de</h1> y nos quedara de esta forma: <html> <head> <title> APRENDIENDO HTML </title> </head> <body> <H1><center> MI PRIMERA WEB </center></H1> </body> </html> Lo vemos en el bloc y en el resultado en las siguientes imgenes:

8|Pgina

3. INSERTA UNA LINEA HORIZONTAL: Si deseamos aadir una lnea despus del ttulo para una mayor esttica podemos utilizar la etiqueta <hr> que quiere decir horizontal rules en ingls y no tiene cierre porque no afecta el texto. Agrguela despus de </center> y antes de </body>. Guarde y abra nuevamente la pgina para ver el efecto. Agregar la etiqueta al fina de la lnea de H1

Esta etiqueta presenta dos opciones adicionales los cuales se pueden utilizar de la siguiente manera <Hr SIZE = ? WIDTH= ?> Donde: SIZE= (valor de 1 a 10) WIDTH= (valor en porcentaje de 0% a 100%) Ejemplo de aplicacin:

9|Pgina

4. INSERTANTO PRRAFOS: Ahora sera conveniente comenzar a escribir el primer prrafo. La etiqueta es <p> y cerrar el prrafo con </p> Quedando de la siguiente manera nuestra pgina:

Cuando queramos dejar un espacio entre un prrafo y otro utilizamos <br> que quiere decir break o romper. Quedara as

10 | P g i n a

5. FORMATO DE TEXTO: Ya con lo que usted ha aprendido respecto a apertura y cierre de las etiquetas podr hacer muchas otras cosas ms respecto a formato de texto. Algunas de estas etiquetas seran: <b><b/> texto resaltado <i></i> texto en itlico o cursiva <u></u> texto subrayado <pre></pre> fuente de espaciado fijo similar a la del tipo Courier. <blockquote></blockquote> pone el texto con una sangra hacia dentro del margen.  texto en sup ndice  texto en sub ndice A continuacin veremos el primer ejemplo: al primer prrafo le asignaremos texto resaltado y al segundo prrafo le aplicaremos subrayado e inclinado, nuestro ejemplo quedara de las siguiente manera:

11 | P g i n a

A continuacin insertamos los otros formatos segn el siguiente ejemplo:

12 | P g i n a

6. COLOR DE TEXTO: Ahora si usted desea poner en rojo la palabra escritorio del segundo prrafo deber hacerlo de la forma siguiente: <font color=red>escritorio</font>. Hagmoslo as y ver el resultado. Aplicaremos a la primera lnea de texto el color rojo y a las dems otros colores:

13 | P g i n a

7. TAMAO DE TEXTO: En el nuevo estndar HTML 3.2 se admite el atributo SIZE para cambiar el tamao de las fuentes: <FONT SIZE=5> Texto en tamao 5 </FONT>

Texto en tamao 5
<FONT SIZE=6> Texto en tamao 6 </FONT>

Texto en tamao 6
Los tamaos del texto van, de menor a mayor, del 1 al 7. El tamao normal (o tamao base) es el 3. Se puede tambin cambiar relativamente con respecto a este tamao normal. <FONT SIZE=-1> Texto algo menor </FONT> Texto algo menor <FONT SIZE=+1> Texto algo mayor </FONT>

Texto algo mayor

<FONT SIZE=+2> Texto an mayor </FONT>

Texto an mayor
Se puede cambiar incluso el tamao base para toda la pgina, poniendo al comienzo del documento (a continuacin de la etiqueta <BODY>) esta etiqueta que cambiara el tamao base de 3 a 5: <BASEFONT SIZE=5> 14 | P g i n a

8. TIPO DE FUENTE: Esto se consigue con el atributo FACE="Nombre de la fuente". Por ejemplo, para forzar a que el texto adopte la fuente Verdana, pondramos: <FONT FACE="Verdana">Este texto se ver con la fuente Verdana</FONT> Que resulta: Este texto se ver con la fuente Verdana (quien no tenga instalada esta fuente, no notar nada de particular) Se pueden indicar en el atributo varias fuentes distintas, separadas por una coma. Si falla la primera, entonces el texto adopta la forma de la segunda, y as sucesivamente. Si fallan todas, el texto adopta entonces la fuente por defecto. As, por ejemplo: <FONT FACE="Impact, Arial">Este texto se ver con la fuente Impact, o en su defecto con Arial</FONT> Que resulta: Este texto se ver con la fuente Impact, o en su defecto con Arial (quien no tenga instaladas ninguna de las dos fuentes, tampoco notar nada de particular) Por lo dicho anteriormente, es decir, que este atributo no es estndar y que depende adems de las fuentes instaladas en el ordenador del usuario, no es conveniente basar el diseo de una pgina exclusivamente en un tipo de fuente. Hay que tener en cuenta que el tamao de las letras vara mucho de una fuente a otra (vase los ejemplos empleados de fuentes Verdana e Impact). Ejemplo prctico Vamos a aumentar el tamao de la fuente de las frases "Mis aficiones" y "Mis pginas favoritas" del ejemplo prctico del captulo anterior (mipag5.html). Para ello, cargamos este fichero y englobamos dichas frases dentro de la etiqueta: <FONT SIZE=+3> y </FONT> 9. APLICANDO MARQUESITAS A UN TEXTO: Finalmente abordaremos otro interesante elemento de las pginas: las marquesinas o textos en movimiento. Para ello, volvamos al principio de la pgina donde ubicamos la lnea de separacin <hr>. Si ponemos otra <hr> tendremos dos lneas. Ahora entre esas dos lneas pondremos la marquesina con las etiquetas <marquee></marquee> y en el centro el letrero que diga: Pgina creada por y agrguele su nombre. Compruebe y ver su marquesina en movimiento. Ahora usted puede agregarle colores, tamao etc. Sin embargo, hay otros atributos que pueden utilizarse que la modifican: <marquee width=100% height=10%> <font color=red>IESPPH-COMPUTACIN 2011 </marquee>. Comprubelo y ver. Tambin puede utilizar<marquee behavior=alternate> que hace que el texto se mueva a un lado y otro sin desaparecer. Si utilizamos behavior=slide aparece por un lado, se desplaza hasta llegar al otro extremo, y se para ah. El efecto contrario y por defecto es el scroll. 15 | P g i n a

Este otro <marquee scrollamount=50> que define la cantidad de desplazamiento del texto en cada movimiento de avance, expresado en pxeles. Cuanto mayor es el nmero, ms rpido avanza. El opuesto es el scrolldelay=nmero que define el tiempo entre cada movimiento de avance, expresado en milisegundos. Cuanto mayor es el nmero, ms lento avanza. Hay otro, loop que especifica el nmero de veces que aparecer el texto. Es indefinido por defecto. Hspace y vspace definen, respectivamente, la separacin en sentido horizontal o vertical del texto que est fuera de la marquesina. Otra posibilidad con <marquee bgcolor=yellow ocualquier otro color para crearle un fondo a la marquesina. Tambin <marquee direction=right> para que el texto se mueva hacia la derecha ya que trae por defecto el left izquierdo. 8)

APLICACIN DE VINETAS:
Vamos a trabajar sin ms prembulos: <ul> abre un listado de vietas <li> primer miembro de la lista <li> segundo miembro de la lista. Etc. </ul> cierra el listado de vietas Puede tambin anidarse una lista dentro de la otra lista. Por ejemplo, si abre <ul> despus del primer miembro obtiene una lista debajo de ese primer miembro de la otra lista. Al terminar esa sub-lista debe cerrarla</ul> <ol> abre una lista numrica <li> primer nmero de la lista <li> segundo nmero de la lista. Etc. <ol> cierra la lista numrica. Aqu tambin puede anidar otra lista utilizando el procedimiento anterior. <dl> abre lista de definiciones <dt> palabra a definir (definition term) <dd> para la definicin del trmino (definition definition) <dl> cierra la lista de definiciones &lt; escribe el smbolo < (less than, menor que) &gt; escribe el smbolo > ( greater than, mayor que) &amp; escribe el smbolo & (ampersand) &quot; escribe doble comillas (double quotation) Ejemplo prctico En el procesador de textos copiamos: 16 | P g i n a

<HTML> <HEAD> <TITLE> Mi pagina del Web - 2 </TITLE> </HEAD> <BODY> <CENTER> <H1> Mis aficiones </H1> </CENTER> <HR> <UL> <LI> El cine <LI> El deporte <UL> <LI> Natacin <LI> Baloncesto </UL> <LI> La msica </UL> <OL> <LI> El rock <LI> El jazz <LI> La msica clsica </OL> </BODY> </HTML> 9)

ENLACE CON OTRAS PGINAS - HIPERVINCULOS:

La caracterstica que ms ha influido en el espectacular xito del Web (o tela de araa) ha sido, aparte la de su carcter multimedia, la posibilidad de unir los distintos documentos repartidos por todo el mundo por medio de enlaces hipertexto. Estructura de los enlaces En general, los enlaces tienen la siguiente estructura: <A HREF="xxx"> yyy </A> donde xxx es el destino del enlace (obsrvese las comillas). yyy es el texto indicativo en la pantalla del enlace (con un color especial y generalmente subrayado) Tipos de enlaces Vamos a distinguir cuatro tipos de enlaces: 1. Enlaces dentro de la misma pgina 2. Enlaces con otra pgina nuestra 3. Enlaces con una pgina fuera de nuestro sistema 4. Enlaces con una direccin de e-mail 1. Enlaces dentro de la misma pgina A veces, en el caso de documentos (o pginas) muy extensos, nos puede interesar dar un salto desde una posicin a otra determinada.

17 | P g i n a

En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace, en este caso el sitio dentro de la pgina a donde queremos saltar, se sustituye por #marca (la palabra marca puede ser cualquier palabra que queramos). Lo que hemos llamado antes YYY es la palabra (o palabras) que aparecern en la pantalla en color (en forma de hipertexto). Su estructura es, entonces: <A HREF="#marca"> YYY </A> Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta: <A NAME="marca"> </A> Por ejemplo, si quiero saltar desde aqu a la pantalla final, pongo la siguiente etiqueta: <A HREF="#final"> Pulsa para ir al final</A> Que resulta como: Pulsa para ir al final (Puedes comprobar cmo salta a la pantalla final) Y en el final del documento he puesto esta otra etiqueta: <A NAME="final"> </A> 2. Enlaces con otra pgina nuestra Puede ser que tengamos una sola pgina. Pero lo ms frecuente es que tengamos varias pginas, una inicial (o principal) y otras conectadas a ella, e incluso entre ellas mismas. Supongamos que queremos enlazar con la pgina creada en el ejemplo del captulo anterior, que la hemos llamado mipag2.html. En este caso, simplemente sustituimos lo que hemos llamado XXX (el destino del enlace) por el nombre del fichero: <A HREF="mipag2.html"> Ejemplo del captulo 2 </A> Que resulta como: Ejemplo del captulo 2 (Puedes comprobar cmo carga esa pgina) Si queremos que vaya a un sitio concreto de otra pgina nuestra en vez de ir al principio de la pgina, adonde va por defecto, en ese sitio tenemos que colocar una marca (vase la seccin anterior), y completar el enlace con la referencia a esa marca. Lo veremos con el siguiente ejemplo: Quiero poner un enlace desde aqu al captulo 4, pero a un sitio concreto, donde he puesto la marca <A NAME="alinear"></A>. Entonces la etiqueta tiene que ser: <A HREF="cap4.html#alinear"> Capitulo 4 </A> Que resulta: Capitulo 4 (Obsrvese cmo al pulsar el enlace salta al captulo 4, pero no al comienzo, sino a donde yo quiero que lo haga) Una observacin importante: Estoy suponiendo que la pgina en la que estoy escribiendo esta etiqueta y la otra pgina a la que quiero saltar estn en el mismo directorio. Porque pudiera ocurrir que he organizado mi sitio del Web con un directorio principal, y otros subdirectorios auxiliares. Si la pgina a la que quiero saltar est, por ejemplo, en el subdirectorio subdir, entonces en la etiqueta tendra que haber puesto "subdir/mipag2.html". Y a la inversa, si quiero saltar desde una pgina a otra que est en un directorio anterior, en la etiqueta tendra que haber puesto "../mipag2.html". Esos dos puntos hace que se dirija al directorio anterior. Obsrvese que se debe utilizar el smbolo / para indicar los subdirectorios, y no este otro \, que es propio nicamente de Windows. 18 | P g i n a

Si nos queremos evitar todas estas complicaciones, podemos tener todo junto en un nico directorio, pero esto tiene el inconveniente de que est todo ms desordenado, y sean ms difciles de hacer las futuras modificaciones. 3. Enlaces con una pgina fuera de nuestro sistema Si queremos enlazar con una pgina que est fuera de nuestro sistema (es decir, que est en un servidor distinto al que soporta nuestra pgina), es necesario conocer su direccin completa, o URL (Uniform Resource Locator). El URL podra ser, adems de la direccin de una pgina del Web, una direccin de ftp, gopher, etc. Una vez conocida la direccin (o URL), lo colocamos en vez de lo que hemos llamado anteriormente xxx (el destino del enlace). Si queremos enlazar con la pgina de Netscape (cuyo URL es: http://home.netscape.com/), la etiqueta sera: <A HREF="http://home.netscape.com/"> Pgina inicial de Netscape </A> Que dara como resultado: Pgina inicial de Netscape Es muy importante copiar estas direcciones correctamente (respetando las maysculas y minsculas, pues los servidores UNIX s las distinguen) 4. Enlaces con una direccin de email En este caso, sustituimos lo que se ha llamado antes xxx (el destino del enlace) por mailto: seguido de la direccin de e-mail. La estructura de la etiqueta es: <A HREF="mailto: direccin de email"> Texto del enlace </A> Un ejemplo de esto est al final de la pgina principal de este manual. Podra haber puesto: Comentarios a <A HREF="mailto: farocena@lander.es">Francisco Arocena</A> Que resultara: Comentarios a Francisco Arocena Pero hay algunos navegadores que no reconocen este tipo de enlace, y lo veran de esta manera: Comentarios a Francisco Arocena y no tendran ningn medio de conocer la direccin de e-mail. Por lo tanto, es ms seguro poner algo as como: Comentarios a Francisco Arocena en <A HREF="mailto: farocena@lander.es">farocena@lander.es</A> Que resulta: Comentarios a Francisco Arocena en farocena@lander.es Es decir, es conveniente, por la razn dicha anteriormente, poner tambin en el texto del enlace la direccin de e-mail. Ejemplo prctico 19 | P g i n a

En el procesador de textos copiamos: <HTML> <HEAD> <TITLE> Mi pagina del Web - 3 </TITLE> </HEAD> <BODY> <CENTER> <H1> Mis paginas favoritas </H1> </CENTER> <HR> Estas son mis paginas favoritas: <P><A HREF="http://home.netscape.com"> Netscape </A> <BR> <A HREF="http://www.microsoft.com"> Microsoft </A> <BR> <A HREF="http://www.yahoo.com"> Yahoo! </A> </BODY> </HTML> Guardamos el fichero de texto con el nombre mipag3.html y lo cargamos en el navegador. 10)

INSERTANDO IMAGENES:
La etiqueta que nos sirve para incluir imgenes en nuestras pginas del Web es muy similar a la de enlaces a otras pginas, que hemos visto en el captulo anterior. La nica diferencia es que, en lugar de indicar al programa navegador el nombre y la localizacin de un documento de texto HTML para que lo cargue, se le indica el nombre y la localizacin de un fichero que contiene una imagen. La estructura de la etiqueta es: <IMG SRC="imagen.gif"> Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quiere cargar una imagen llamada imagen.gif (o el nombre que tenga). Dentro de la etiqueta se pueden aadir otros comandos, tal como ALT <IMG SRC="imagen.gif" ALT="descripcin"> Con el comando ALT se introduce una descripcin (una palabra o una frase breve) indicativa de la imagen. Este comando, que en principio se puede omitir, es en beneficio de los que accedan a nuestra pgina con un programa navegador en forma de texto slo. Ya que no son capaces de ver la imagen, por lo menos pueden hacerse una idea sobre ella. Pero no es slo por esto. Hay casos, como veremos ms adelante, en los que se utiliza una imagen como enlace a otra pgina. Si se omitiera este comando, los que utilizan dichos navegadores no podran de ninguna manera acceder a esas pginas. Con respecto a la localizacin del fichero de esa imagen, se puede decir aqu lo mismo que en el captulo anterior referente a los enlaces. Si no se indica nada especial, como en el caso que se ha expuesto, quiere decir que el fichero imagen.gif est en el mismo directorio que el documento HTML que estamos escribiendo. Si no es as, se siguen los mismos criterios que los indicados para los enlaces. Al igual que una pgina con la que queremos enlazar puede estar fuera de nuestro sistema (en cuyo caso haba que indicar su URL o direccin completa), podemos cargar una imagen que no est en nuestro sistema siguiendo el mismo mtodo, es decir, indicar en la etiqueta el URL completo de la imagen. Aunque esto no es muy aconsejable, pues alargara innecesariamente el tiempo de carga de nuestra pgina.

20 | P g i n a

Las imgenes deben estar guardadas en un formato de fichero especial llamado GIF. (Hay tambin otro formato ms avanzado, del que se hablar ms adelante). Este formato GIF almacena las imgenes con un mximo de 256 colores, en forma comprimida. Hay programas grficos (como el Paint Shop Pro para el PC, o el Graphic Converter para el Mac) que nos permiten guardar las imgenes en este formato, adems de cumplir otras muchas tareas de manipulacin de las mismas. Un aspecto muy importante a tener en cuenta es el tamao de las imgenes, pues una imagen grande supone un fichero grande, y esto puede resultar en un tiempo excesivo de carga, con el consiguiente riesgo de que quien est intentando cargar nuestra pgina se canse de esperar, y desista de ello. Para elegir la posicin de la imagen con respecto al texto hay distintas posibilidades. La ms sencilla es colocarla entre dos prrafos, con un titular a un lado. Los navegadores ms actuales (como el Netscape Navigator y el Microsoft Internet Explorer) permiten que el texto pueda rodear a la imagen (como se ver ms adelante, en el Captulo 8). De momento nos vamos a limitar a escoger la posicin del titular con respecto a la imagen (si es que queremos ponerle un titular, claro est). Se puede poner arriba, en medio o abajo del lado de la imagen. Para ello se aade el comando ALIGN a la etiqueta, de la siguiente manera: <IMG SRC="isla.gif" ALIGN=TOP> Titular alineado arriba

Titular alineado arriba <IMG SRC="isla.gif" ALIGN=MIDDLE> Titular alineado en medio

Titular alineado en medio <IMG SRC="isla.gif" ALIGN=BOTTOM> Titular alineado abajo

Titular alineado abajo Vanse las extensiones de Netscape de esta etiqueta en el Captulo 8 Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra pgina. Para estos casos se utilizan generalmente imgenes pequeas (iconos), aunque se puede usar cualquier tipo de imagen. Segn vimos en el captulo anterior, la estructura general de un enlace es: <A HREF="xxx"> yyy </A> 21 | P g i n a

donde xxx era el destino del enlace e yyy el texto del enlace (o ms generalmente hablando, lo que aparece en la pantalla como el enlace; en el captulo anterior era un texto, y en ste va a ser una imagen). En este caso sustituimos xxx por el nombre del fichero de la pgina a la que queremos acceder. Y en lugar de yyy ponemos la etiqueta completa de la imagen (que queda as englobada dentro de la etiqueta del enlace). Como ejemplo vamos a utilizar la imagen (mipag2.html): (hombre.gif) para acceder al ejemplo prctico del captulo 2

<A HREF="mipag2.html"><IMG SRC="hombre.gif"></A> que da como resultado: Pulsando la imagen comprobamos cmo efectivamente enlaza con la pgina deseada. Obsrvese adems que la imagen est rodeada de un rectgulo del color normal en los enlaces. Si no se desea que aparezca ese rectngulo, hay que incluir dentro de la etiqueta de la imagen el atributo BORDER=0, es decir: <A HREF="mipag2.html"><IMG SRC="hombre.gif" BORDER=0></A> que da como resultado: Posicionando el cursor sobre esta ltima imagen, comprobamos que acta tambin como enlace aunque carezca del rectngulo de color. Esto puede resultar ms esttico, pero se corre el riesgo de que el usuario no se d cuenta de que la imagen sirve de enlace. Tambin podemos utilizar una imagen para enlazar con otra imagen. En este caso sustituimos xxx (el destino del enlace) con el nombre del fichero de la imagen a la que queremos acceder e yyy (lo que aparece en pantalla como el enlace) por la etiqueta completa de la imagen que queremos que aparezca en la pantalla como el enlace de la otra. Supongamos que queremos enlazar con la imagen isla.gif por medio de esta otra imagen: <A HREF="isla.gif"><IMG SRC="casa.gif"></A> Que da como resultado: Por ltimo, otra posibilidad es la de utilizar un texto para enlazar con una imagen. En este caso sustituimos xxx (el destino del enlace) con el nombre del fichero de la imagen a la que queremos acceder e yyy (lo que aparece en pantalla como el enlace) por el texto. Supongamos que queremos enlazar con la imagen isla.gif por medio del texto "un paraso tropical": <A HREF="isla.gif"> un paraso tropical </A> Que da como resultado: un paraso tropical Se pueden capturar las imgenes que aparecen en pantalla, con objeto de guardarlas permanentemente en nuestro disco duro. En los navegadores ms actuales se hace pulsando sobre la imagen con la tecla derecha del ratn, con lo que se obtiene un men en el que est la posibilidad de guardar la imagen. (casa.gif):

22 | P g i n a

Un tipo de imgenes del que se hace abundante uso y que sirven para mejorar la presentacin de la pgina son los iconos, botones, barras separadoras, etc. A pesar de su tamao o forma, son imgenes como cualquier otra. Por ejemplo, vamos a capturar de una pgina un botn dorado. Colocamos el puntero del ratn justo en el botn, y pulsamos la tecla derecha. Si nuestro navegador implementa esta caracterstica, aparece un men en el que est la posibilidad de guardar esta imagen (boton.gif). Lo hacemos, en el mismo directorio en el que va a estar nuestro documento. Para utilizarlo en el comienzo de una lnea, escribiramos en el sitio correspondiente: <IMG SRC="boton.gif> Esta linea esta precedida por un boton dorado. Que resulta:

Esta linea esta precedida por un boton dorado.

Podemos hacer lo mismo con una barra separadora (barra.gif). La capturamos, la guardamos y escribimos: <CENTER> <IMG SRC="barra.gif> <BR>Esta linea esta debajo de una barra separadora. </CENTER> Que resulta:

Esta linea esta debajo de una barra separadora. Ejemplo prctico Primeramente es necesario capturar las tres imgenes que se han utilizado en este captulo: isla.gif, hombre.gif y casa.gif y guardarlas en el mismo directorio en el que se guardar el fichero de texto que se va a crear a continuacin, junto con los de los captulos anteriores. En el procesador de textos copiamos: <HTML> <HEAD> <TITLE> Mi pagina del Web - 4 </TITLE> </HEAD> <BODY> <CENTER> <H1> Mi pagina del Web </H1> </CENTER> <HR> Esta es mi pagina del Web. No es muy extensa, pero tiene todos los elementos basicos. Espero que os guste. Poco a poco le ire anadiendo mas cosas interesantes. <P> <A HREF="mipag2.html"> <IMG SRC="hombre.gif"> </A> Mis aficiones <P> <A HREF="mipag3.html"> <IMG SRC="casa.gif"> </A> Mis paginas favoritas <CENTER> <H3> Un lugar ideal para mis vacaciones </H3> <IMG SRC="isla.gif" ALT="isla"> </CENTER> </BODY> </HTML> 11)

INSERTANDO UN SEPARADOR HORIZONTAL:

23 | P g i n a

Un ejemplo de ampliacin de una etiqueta que ha sido recogida en el nuevo estndar HTML 3.2 es la del separador <HR>, con las que se puede modificar su apariencia y posicionamiento: <HR WIDTH=75%>

Ocupa el 75% de su anchura (width) normal. <HR WIDTH=300>

Tiene una anchura de 300 pixels. Se puede alinear a la izquierda: <HR WIDTH=50% ALIGN=LEFT> O a la derecha: <HR WIDTH=35% ALIGN=RIGHT> Se puede variar su espesor: <HR SIZE=20>

Tambin se puede hacer que sea una lnea slida, no embutida sobre el fondo: <HR NOSHADE>

12)

INSERTANDO FONDO DE LA PAGINAS:

Se puede cambiar el fondo de dos maneras distintas: 1. Con un color uniforme 2. Con una imagen Fondos con un color uniforme Se consigue aadiendo el comando BGCOLOR a la etiqueta <BODY> (situada al principio del documento), de la siguiente manera: <BODY BGCOLOR="#XXYYZZ"> donde:

24 | P g i n a

XX es un nmero indicativo de la cantidad de color rojo YY es un nmero indicativo de la cantidad de color verde ZZ es un nmero indicativo de la cantidad de color azul Estos nmeros estn en numeracin hexadecimal. Esta numeracin se caracteriza por tener 16 dgitos (en lugar de los diez de la numeracin decimal habitual). Estos dgito son: 0123456789ABCDEF Es decir, que en nuestro caso, el nmero menor es el 00 y el mayor el FF. As, por ejemplo, el color rojo es el #FF0000, porque tiene el mximo de rojo y cero de los otro dos colores . Los colores primarios son: #FF0000 - Rojo #00FF00 - Verde #0000FF - Azul Otros colores son: #FFFFFF - Blanco #000000 - Negro #FFFF00 - Amarillo Para hacer un color ms oscuro, hay que reducir el nmero de su componente, dejando los otros dos invariables. As, el rojo #FF0000 se puede hacer ms oscuro con #AA0000, o an ms oscuro con #550000. Para hacer que un color tenga un tono ms suave (ms pastel), se deben variar los otros dos colores hacindolos ms claros (nmero ms alto), en una cantidad igual. As, podemos convertir el rojo en rosa con #FF7070. Podemos hacer nuestros propios experimentos, pero si desea, existen pginas del Web en las que se pueden elegir los colores directamente y otras donde nos podemos bajar pequeos programas que controlan los colores que ponemos en nuestra web. Colores del texto y de los enlaces Si no se variasen los colores habituales del texto y de los enlaces (negro y azul, respectivamente), podra ocurrir que su lectura contra un fondo oscuro fuese muy dificultosa, o incluso imposible, si el fondo fuese precisamente negro o azul. Para evitar esto, se pueden escoger los colores del texto y de los enlaces, aadiendo a la etiqueta (si se desea) los siguientes comandos: TEXT - color del texto LINK - color de los enlaces VLINK - color de los enlaces visitados ALINK - color de los enlaces activos (el que adquieren en el momento de ser pulsados) Los cdigos de los colores son los mismos que los que se han visto anteriormente. La etiqueta, con todas sus posibilidades, sera:

25 | P g i n a

<BODY BGCOLOR="#XXYYZZ" TEXT="#XXYYZZ" LINK="#XXYYZZ" VLINK="#XXYYZZ" ALINK="#XXYYZZ"> Cambio del color de una parte del texto El comando TEXT explicado anteriormente (que va englobado dentro de la etiqueta <BODY>) cambia el color de la totalidad del texto de la pgina. Tanto el Netscape Navigator 2, como el Microsoft Explorer soportan una etiqueta de color de la fuente con la que se puede cambiar slo una parte del texto: <FONT COLOR="#FF0000"> Este texto es de color rojo </FONT> Que resulta: Este texto es de color rojo Fondos con una imagen El fondo de una pgina puede ser tambin una imagen, ya sea en formato GIF o JPEG. Esta imagen se repite por toda la pgina, de una manera anloga al tapiz de Windows. La estructura de la etiqueta es: <BODY BACKGROUND="imagen.gif"> o bien: <BODY BACKGROUND="imagen.jpg"> No todos los navegadores soportan este formato Se pueden aadir tambin a esta etiqueta todos los comandos para cambiar los colores del texto y de los enlaces, vistos anteriormente. Esto es imprescindible a veces para conseguir que el texto sea legible, en contraste con el fondo. Dos ejemplos de fondos:

brickz.gif

26 | P g i n a

nubes.jpg Hay que prever la posibilidad de que quien acceda a nuestra pgina haya deshabilitado la carga automtica de imgenes, en cuyo caso tampoco cargara la imagen que sirve como fondo y slo vera el fondo estndar de color gris. Esto podra ser muy perjudicial si hemos escogido unos colores para el texto y los enlaces que no contrastan bien con ese fondo gris. La solucin a este problema es poner dentro de la etiqueta <BODY> los dos comandos BACKGROUND y BGCOLOR (en este orden), teniendo cuidado en escoger un color uniforme de fondo parecido al de la imagen. Por ejemplo, supongamos que queremos poner como fondo la imagen nubes.jpg. Escogemos entonces un color de fondo azul claro, (p. ej. #CCFFFF). La etiqueta quedara as: <BODY BACKGROUND="nubes.jpg" BGCOLOR="#CCFFFF"> Esto tiene la ventaja adicional de que, incluso aunque no se deshabilite la carga automtica de imgenes, al cargar la pgina, lo primero que se ve es ese fondo de color uniforme, que luego es reemplazado por el de la imagen. Cmo conseguir un fondo para nuestra pgina? Tericamente, cualquier imagen puede servir como fondo, pero unas son ms apropiadas que otras. Adems, podemos querer crear un fondo nosotros mismos, o capturarlo de otras pginas. Hay miles de sitios en Internet donde podemos conseguir fondos para nuestra pgina, tanto en formato gif como jpg. Basta con teclear en un buscador fondos web o imgenes web para que nos d un resultado apetecible. Aqu tenis, por ejemplo, WebStore. Ejemplo prctico Vamos a poner como fondo la imagen nubes.jpg, junto con un fondo alternativo de color azul claro y hacer que el texto sea de color rojo oscuro, en el ejemplo prctico del captulo 6 (mipag6.html). Para ello es necesario antes capturar la imagen y guardarla en el mismo directorio en donde vamos a guardar el fichero que vamos a crear. (Si nuestro navegador no soporta el formato jpg, lo hacemos con el otro fondo, brickz.gif) Cargamos en el editor de textos mipag6.html y sustituimos la etiqueta <BODY> por esta otra: <BODY BACKGROUND="nubes.jpg" BGCOLOR="#CCFFFF" TEXT="#AA0000"> Guardamos este fichero como mipag7.html y lo cargamos en el navegador para visualizarlo. 13)

MANJO DE TABLAS:
Hasta que no se empezaron a usar las tablas, la nica manera de tabular las cosas era utilizar la etiqueta de preformateado, con la que es necesario poner manualmente los espacios en blanco para que quede todo alineado formando filas y columnas, con un resultado muy poco esttico. 27 | P g i n a

Estructura de una tabla Vamos a ver ordenadamente (de fuera hacia dentro) las etiquetas necesarias para confeccionar las tablas. 1. La etiqueta general, que engloba a todas las dems es <TABLE> y </TABLE>. Es decir: <TABLE> [resto de las etiquetas] </TABLE> Con esto se presentaran los datos tabulados, pero faltara la caracterstica que hace ms atractivas a las tablas, y es que estos datos vayan dentro de unos cajetines formados por un borde. Para esto tenemos que aadir el atributo BORDER a la etiqueta, es decir: <TABLE BORDER> [resto de las etiquetas] </TABLE> 2. En el siguiente nivel, dentro de la anterior, estn las etiquetas para formar cada fila (row) de la tabla, que son <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Es decir, para una tabla con dos filas, sera: <TR> [etiquetas de las distintas celdas de la primera fila] </TR> <TR> [etiquetas de las distintas celdas de la segunda fila] </TR> 3. En el ltimo nivel (dentro de las anteriores) estn las etiquetas de cada celda, que son <TD> y </TD>, que engloban el contenido de cada celda concreta (texto, imgenes, etc.). Hay que repetirla tantas veces como celdas queremos que haya en esa fila. Veamos un ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas. Dentro de cada celda vamos a poner un texto indicativo de la posicin de dicha celda: <TABLE BORDER> <TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD> </TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD> </TR> </TABLE> Que resulta: fila1-celda1 fila1-celda2 fila1-celda3 fila2-celda1 fila2-celda2 fila2-celda3 Filas con desigual nmero de celdas En este ejemplo hemos puesto dos filas con igual nmero de celdas. Qu pasa si ese nmero es distinto? Pues el navegador forma el nmero de filas y columnas que haga falta, dejando espacios en blanco en las filas que tengan menos celdas. Si en el ejemplo anterior eliminamos la tercera celda de la segunda fila, es decir si borramos <TD>fila2celda3</TD>, resultar: fila1-celda1 fila1-celda2 fila1-celda3 28 | P g i n a

fila2-celda1 fila2-celda2 Titular de la tabla Se puede aadir un titular (caption) a la tabla, es decir un texto situado encima de la tabla que indica cul es su contenido. Se consigue con la etiqueta <CAPTION> y </CAPTION>. Si en el ejemplo anterior aadimos la siguiente lnea: <CAPTION> Ejemplo de filas desiguales </CAPTION>, resulta: Ejemplo de filas desiguales fila1-celda1 fila1-celda2 fila1-celda3 fila2-celda1 fila2-celda2 Variando el espesor de los bordes El atributo BORDER (visto ms arriba) pone por defecto un borde de espesor igual a la unidad. Pero se puede hacer que este borde sea tan grueso como queramos, poniendo: <TABLE BORDER=nmero deseado> Si en el ejemplo anterior ponemos: <TABLE BORDER=5> Ejemplo de filas desiguales fila1-celda1 fila1-celda2 fila1-celda3 fila2-celda1 fila2-celda2 Celdas de cabecera Adems de las celdas que contienen datos normales, podemos poner, si nos conviene, celdas de cabecera (header), que se distinguen por estar el texto de dichas celdas en negrita y centrado. Esto se consigue con la etiqueta <TH> y </TH> (en vez de la normal <TD> y </TD>) Vamos a aadir, en el ejemplo anterior, una fila de estas celdas de cabecera, antes de las otras dos que ya existan: <TR> <TH>Columna 1</TH> <TH>Columna 2</TH> <TH>Columna 3</TH> </TR> Que resulta: Ejemplo de filas desiguales Columna 1 Columna 2 Columna 3 fila1-celda1 fila1-celda2 fila1-celda3 fila2-celda1 fila2-celda2 29 | P g i n a

Se pueden colocar en el sitio que se quiera, aunque lo normal es que vayan en los bordes., encabezando las columnas o las filas. Contenido de las celdas Hasta ahora, en todos los ejemplos se ha puesto un texto normal dentro de las distintas celdas. Pero se puede poner en ellas cualquier otro elemento de los que van en un documento HTML, como imgenes, enlaces, etc. No hay ms que poner dentro de la etiqueta de la celda la etiqueta correspondiente a una imagen, un enlace, etc. Ejemplo con una imagen: <TABLE BORDER=2> <TR> <TD><IMG SRC="babe.gif"></TD> </TR> </TABLE>

Ejemplo con un enlace: <TABLE BORDER=2> <TR> <TD><A HREF="index.html">Pgina principal </A></TD> </TR> </TABLE> Pgina principal Posicionamiento del contenido dentro de la celda Normalmente, el contenido de una celda est alineado a la izquierda. Pero se puede cambiar esto aadiendo dentro de la etiqueta de la celda los siguientes atributos: <TD ALIGN=CENTER> Al centro </TD> <TD ALIGN=RIGHT> A la derecha </TD> <TH ALIGN=LEFT> Cabecera a la izquierda </TH> (Recurdese que por defecto estn centradas) Ejemplos de alineamiento horizontal dentro de la celda Al centro A la derecha Cabecera a la izquierda

30 | P g i n a

El alineamiento por defecto en el sentido vertical es en el medio. Tambin se puede cambiar, aadiendo dentro de la etiqueta de la celda los siguientes atibutos: <TD VALIGN=TOP> Arriba </TD> <TD VALIGN=BOTTOM> Abajo </TD> Arriba

Abajo Variando las dimensiones de la tabla El navegador se encarga normalmente de dimensionar el tamao total de la tabla de acuerdo con el nmero de filas, de columnas, por el contenido de las celdas, espesor de los bordes, etc. A veces nos puede convenir forzarle para que la tabla tenga unas dimensiones totales mayores que las que le corresponden, tanto en anchura como en longitud. Esto se consigue aadiendo dentro de la etiqueta de la tabla los atributos WIDTH y HEIGHT igual a un porcentaje de la dimensin de la pantalla, o a una cifra que equivale al nmero de pixels. Por ejemplo, si ponemos: <TABLE WIDTH=60%> Arriba

Abajo O, si ponemos: <TABLE HEIGHT=200> Arriba

Abajo Celdas que abarcan a otras varias A veces puede interesarnos que una celda se extienda sobre otras varias. Esto se consigue aadindo dentro de la etiqueta de la celda los atributos COLSPAN=nmero para extenderse sobre un nmero 31 | P g i n a

determinado de columnas, o ROWSPAN=nmero para extenderse verticalmente sobre un nmero determinado de filas. Por ejemplo, en la primera tabla de este captulo vamos a aadir una fila con una sola celda, que abarca a dos columnas: <TR> <TD COLSPAN=2> Celda sobre 2 columnas </TD> <TR> Celda sobre 2 columnas fila1-celda1 fila2-celda1 fila1-celda2 fila2-celda2 fila1-celda3 fila2-celda3

O, en la misma tabla, vamos a aadir una celda en la primera fila. pero que abarque tambin a la siguiente: <TD ROWSPAN=2> Celda junto a 2 filas </TD> Celda junto a 2 filas Color de fondo en las tablas Podemos conseguir que las tablas tengan un color de fondo, siguiendo un procedimiento totalmente anlogo al empleado para que una pgina tenga un color de fondo uniforme (segn vimos en el captulo 7). Para ello debemos utilizar el atributo BGCOLOR="#XXYYZZ", visto en dicho captulo. Se puede conseguir: 1. Que la totalidad de la tabla tenga un color de fondo. Para ello, colocamos el atributo dentro de la etiqueta TABLE. Por ejemplo, vamos a hacer que la tabla tenga un fondo verde (#00FF00): <TABLE BORDER BGCOLOR="#00FF00"> <TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> </TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR> </TABLE> Que resulta: fila1-celda1 fila1-celda2 fila2-celda1 fila2-celda2 2. Que solamente una celda determinada tenga un color de fondo. Para ello, colocamos el atributo dentro de la etiqueta de la celda correspondiente. Por ejemplo, vamos a hacer que slo la celda 1 de la fila 1 tenga un color verde: <TABLE BORDER> <TR> <TD BGCOLOR="#00FF00">fila1-celda1</TD><TD>fila1-celda2</TD> 32 | P g i n a fila1-celda1 fila2-celda1 fila1-celda2 fila1-celda3 fila2-celda2 fila2-celda3

</TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR> </TABLE> Que resulta: fila1-celda1 fila2-celda1 fila1-celda2 fila2-celda2

3.Que la generalidad de las celdas tenga un color, pero que alguna celda tenga uno particular. El atributo del color general se coloca en la etiqueta TABLE, y el del color particular en la etiqueta de la celda en cuestin (una combinacin de los dos casos anteriores). por ejemplo, vamos a hacer que la generalidad de la tabla sea de color rojo (#FF0000), pero que la celda 1 de la fila 1 sea de color verde (#00FF00): <TABLE BORDER BGCOLOR="#FF0000"> <TR> <TD BGCOLOR="#00FF00">fila1-celda1</TD><TD>fila1-celda2</TD> </TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR> </TABLE> Que resulta: fila1-celda1 fila2-celda1 Imgenes de fondo en las tablas El Explorer de Microsoft soporta la colocacin de imgenes de fondo en el interior de las tablas, de una manera anloga a como se hace en una pgina (segn vimos en el captulo 7). Para ello debemos utilizar el atributo BACKGROUND="imagen.gif" o BACKGROUND="imagen.jpg", visto en dicho captulo. Si se utiliza dentro de la etiqueta <TABLE> la imagen en cuestin se multiplicar detrs de todas las celdas. Por ejemplo, si ponemos: <TABLE BORDER BACKGROUND="nubes.jpg"> (Se omite el resto de las etiquetas de la tabla) Obtenemos: fila1-celda1 fila2-celda1 fila1-celda2 fila2-celda2 fila1-celda2 fila2-celda2

(Con el Netscape no se ver ninguna imagen de fondo, slo con el Explorer)

33 | P g i n a

Si, por el contrario, slo se pone este atributo dentro de la etiqueta de una celda concreta (<TD> o <TH>), entonces la imagen de fondo se ver slo en esa celda, como por ejemplo: fila1-celda1 fila2-celda1 Separacin entre las celdas de una tabla Por defecto, la separacin entre las distintas celdas de una tabla es de dos pixels. Pero se puede variar esto con el atributo CELLSPACING, que se pone dentro de la etiqueta TABLE. Por ejemplo, para obtener una separacin de 20 pixels entre celdas ponemos: <TABLE BORDER CELLSPACING=20> (Se omite el resto de las etiquetas de la tabla) Con lo que se obtiene: fila1-celda2 fila2-celda2

fila1-celda1 fila2-celda1

fila1-celda2 fila2-celda2

A primera vista parece como si esto fuera lo mismo que si hubiramos aumentado el espesor de los bordes. Pero para comprobar que no es as, hagamos que en el caso anterior, tenga adems unos bordes de 5 de espesor: <TABLE BORDER=5 CELLSPACING=20> Con lo que se obtiene:

fila1-celda1 fila2-celda1

fila1-celda2 fila2-celda2

Separacin entre el borde y el contenido dentro de las celdas Por defecto, la separacin entre el borde y el contenido dentro de las celdas es de un pixel. Se puede cambiar esto con el atributo CELLPADDING, que se pone dentro de la etiqueta TABLE. Por ejemplo, para obtener una separacin de 20 pixels entre el contenido y los bordes, dentro de cada celda: <TABLE BORDER CELLPADDING=20> (Se omite el resto de las etiquetas de la tabla) Con lo que se obtiene: 34 | P g i n a

fila1-celda1

fila1-celda2

fila2-celda1

fila2-celda2

Se puede combinar este atributo con CELLSPACING (visto en el apartado anterior). Por ejemplo, una tabla con bordes de 5 de espesor, separacin entre celdas de 15 y separacin del contenido con respecto a los bordes de las celdas de 20, lo obtendramos con: <TABLE BORDER=5 CELLSPACING=15 CELLPADDING=20> (Se omite el resto de las etiquetas de la tabla) Con lo que se obtiene:

fila1-celda1

fila1-celda2

fila2-celda1

fila2-celda2

Ejemplo prctico Partiendo del ejemplo prctico del captulo anterior, mipag9.html, vamos a crear una tabla de dos filas, con una celda cada una. La primera, como cabecera, con el texto "Un lugar ideal para mis vacaciones", y la segunda con la imagen isla.gif. Adems vamos a alargar a lo ancho la tabla al 75% de la pantalla. Para ello sustituimos: <H3> Un lugar ideal para mis vacaciones </H3> <IMG SRC="isla.gif" ALT="isla"> Por lo siguiente: <P> <TABLE BORDER=5 WIDTH=75%> <TR> <TH> Un lugar ideal para mis vacaciones </TH> </TR> <TR> <TD> <IMG SRC="isla.gif" ALT="isla"> </TD> </TR> </TABLE>

35 | P g i n a

14)

INSERTANDO SONIDO:
Una pgina del Web puede tener sonidos incorporados, bien sea como un fondo sonoro que se ejecuta automticamente al cargar la pgina, o como una opcin para que la active el propio usuario. Capacidades sonoras de los navegadores Para poder escuchar los sonidos es necesario disponer, como es lgico, de una tarjeta de sonido con sus correspondientes altavoces. Pero esto no es suficiente, pues no todos los programas navegadores estn capacitados en la misma medida. Explorer de Microsoft Es el que est mejor adaptado para el sonido, pues a partir de la versin 2.0 es capaz de reproducir fondos sonoros sin necesidad de aadir nada, y no hay ninguna complicacin con los servidores, como ocurre con el Netscape. Adems, a partir de la versin 3.0 del Explorer, es incluso compatible con los plug-ins del Netscape. Fondo sonoro para el Microsoft Internet Explorer Para las versiones 2.0 en adelante, se utiliza la etiqueta: <BGSOUND SRC="fichero_de_sonido" LOOP=n> El fichero de sonido puede estar en formato .mid o .wav. El atributo LOOP (en ingls, lazo) sirve para especificar el nmero (n) de veces que se debe ejecutar el fichero de sonido. Si se escoje el nmero n=-1 o se pone LOOP=infinite, el sonido se ejecutar indefinidamente. Se puede omitir este atributo, y entonces el fichero se ejecutar una sola vez. Ejemplo 1 La etiqueta para que se ejecute el fichero prv89.mid dos veces en el Explorer es: <BGSOUND SRC="prv89.mid" LOOP=2> Este es el resultado. (Para poder orlo, hay que estar utilizando el Explorer) Fondo sonoro para el Netscape La etiqueta bsica para el Netscape es: <EMBED SRC="fichero_de_sonido" WIDTH=xxx HEIGHT=yy> donde WIDTH es la anchura y HEIGHT la altura de una consola que aparece, y que tiene diferentes teclas (play, stop, pausa, etc.). Ms adelante veremos los valores xxx e yy que debemos atribuirles. El fichero de sonido puede estar en formato .mid o .wav, pero recurdese la advertencia hecha anteriormente, de que estos formatos deben estar configurados como MIME por el servidor donde est alojada la pgina. Dentro de la etiqueta se pueden aadir los siguientes atributos opcionales: 36 | P g i n a

AUTOSTART="true" (arranca automticamente) LOOP="true" (se ejecuta ininterrumpidamente) Ejemplo 2 Vamos a ver una etiqueta para que aparezca en el Netscape una consola con sus teclas. Pulsando la tecla play se ejecutar el fichero prv89.mid. Con respecto a las dimensiones de la consola, tenemos el problema de que son distintas para los diferentes plug-ins que existen para el Netscape, y no sabemos cul de ellos estarn usando los distintos usuarios de nuestra pgina. En este ejemplo se van a poner las dimensiones de la consola del plug-in Crescendo del Netscape 2.0 (200 de ancho por 55 de alto), pero es posible que si se est utilizando otro distinto se vean zonas en blanco. La etiqueta queda de esta manera: <EMBED SRC="prv89.mid" WIDTH=200 HEIGHT=55> Ejemplo 3 Vamos a crear una etiqueta para el Netscape, en la que la consola sea invisible y el fichero se ejecute automticamente al cargar la pgina. Para conseguir que la consola sea invisible hay que aadirle el atributo HIDDEN="true". <EMBED SRC="prv89.mid" HIDDEN="true"> Activacin del sonido por el propio usuario Hasta aqu hemos visto cmo poner un sonido de fondo en una pgina. Hay otra opcin, mucho ms sencilla, y es la de poner un enlace a un fichero de sonido, de tal manera, que al pulsarlo se ejecute el fichero. (Ver el Captulo 3, en el que se explica cmo crear enlaces). Por ejemplo, vamos a poner un enlace al fichero prv89.mid: Escucha esta <A HREF="prv89.mid">msica</A> Que resulta como: Escucha esta msica Al pulsar el enlace se activa, en una ventana aparte, el programa que ejecuta el sonido. Esto es vlido para todos los navegadores, incluso las versiones ms antiguas, con la nica condicin de que se haya configurado un programa auxiliar capaz de ejecutar ficheros .mid o .wav. Se puede hacer el enlace con un icono (Ver el Captulo 4) Ejemplo Vamos a hacer un enlace con el icono sound1.gif al fichero de sonido problemo.wav:

<A HREF="problemo.wav"><IMG SRC="sound1.gif"></A> Que resulta: 37 | P g i n a

Ejemplo prctico Vamos a poner a esta pgina una msica de fondo (xfiles.mid), para que sea ejecutada por el Explorer y el Netscape. Para ello debemos seguir los siguientes pasos: 1) En el documento mipagpre.html debemos aadir entre las etiquetas </STRONG> y </FONT> (situadas al final), lo siguiente: <BR><FONT COLOR="#FF0000">Escucha la msica de fondo!</FONT> <BGSOUND SRC="xfiles.mid"> <EMBED SRC="xfiles.mid" WIDTH=2 HEIGHT=0 AUTOSTART="true"> Guardamos este documento con el nombre mippre15.html 2) El documento del frame de la izquierda mipagind.html serva de ndice de lo que se ve en el de la derecha. Como ahora se debe de ver el documento mippre15.html en vez del que estaba antes (mipagpre.html), debemos sustituir uno por otro en el documento mipagind.html, con lo que queda: <HTML> <HEAD> <TITLE> Indice </TITLE> </HEAD> <BODY BGCOLOR="#FFBB00"> <P><A HREF="mippre15.html" TARGET="principal"> Presentacin </A> <P><A HREF="mipag13.html" TARGET="principal"> Mi pgina </A> <P><IMG SRC="glogoan2.gif"> </BODY> </HTML> 3) Como han variado los nombres de los documentos de ambos frames, tenemos que reflejarlo en el documento de definicin de los frames, y que llambamos mipagina.html, con lo que dicho documento queda ahora as: <HTML> <HEAD> <TITLE>Mi pagina con frames</TITLE> </HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC="mipind15.html"> <FRAME SRC="mippre15.html" NAME="principal"> </FRAMESET> <NOFRAMES> Estas utilizando un navegador que no soporta frames. <P>Pulsa para visitar mi <A HREF="mipag13.html"> pgina</A>. </NOFRAMES> </HTML> Guardamos este documento con el nombre mipag15.html. Este es el documento principal que hay que cargar, para ver el ejemplo. Pero todava falta una cosa: tener en nuestro disco duro el fichero xfiles.mid

38 | P g i n a