Introduccin Qu es el HTML? El HTML ( HiperText Markup Language ) es el lenguaje utilizado para representar documentos en la WWW (World Wide Web).

Adems de texto normal incluye tambin, elementos multimedia (grficos, vdeo, audio) y existen enlaces (links) que permiten saltar a otras partes del documento o a otro sitio cualquiera de Internet. Otra caracterstica muy importante de este lenguaje es que es portable, es decir, se pueden visualizar las pginas con cualquier sistema operativo y, por supuesto tambin crearlas. En la actualidad (noviembre 1999), Netscape y Microsoft siguen sin ponerse de acuerdo en el estndar del lenguaje. Microsoft ha asumido las directrices del ww3, pero no as Netscape, que implementa etiquetas propias, de modo que las pginas no se visualizan igual en el Navigator y en el Explorer. Las etiquetas constituyen la filosofa de este lenguaje. Por medio de ellas se pueden controlar los elementos tipogrficos del texto: tipo, color y tamao de las fuentes, el estilo ( negrita, cursiva, etc ), as como tambin la inclusin de tablas, listas, formularios, la insercin de fotos, sonidos, fondos, los enlaces mencionados anteriormente. etc. Las etiquetas se pueden modificar por medio de sus atributos, stos son del tipo atributo="valor" y se colocan detrs del nombre de la etiqueta El nombre de la etiqueta y sus atributos se colocan entre los smbolos < y > y normalmente se usan dos, una de inicio y otra final, para conseguir el efecto deseado. Por ejemplo si escribimos <FONT COLOR="#ff0000" size="2">El texto se ver rojo y en tamao un poco menor de lo normal </font> Se ver como El texto se ver rojo y en tamao un poco menor de lo normal El uso de estas etiquetas, y por ende el aprendizaje del HTML, no es difcil. Precisamente el objetivo de esta pequea gua es servir de introduccin y referencia de las caractersticas ms usadas del HTML Cmo empiezo a escribir HTML? Para comenzar tan slo necesitas un editor de texto para escribir las pginas y un navegador para visualizarlas. El editor no debe formatear el texto. Usa el Bloc de notas ( Notepad ) en Windows 95 o 98. Se carga muy rpido y adems es el programa que se abrir por defecto desde el navegador. Las etiquetas y sus atributos se pueden escribir en maysculas o minsculas. El lenguaje ignora, tambin, los espacios en blanco seguidos, donde slo cuenta uno de ellos. Una vez que hayas escrito una pgina, gurdala en un fichero con extensin .htm o .html. Cuando hagas doble click sobre l se abrir el navegador y te mostrar la pgina. Para ver el contenido de los ficheros anteriores (los acabados en htm o html ) con el Bloc de notas

puedes crear un acceso directo al mismo en la carpeta "SendTo" del directorio "Windows" y te aparecer como opcin en "Enviar a " cuando hagas click con el botn dereho del ratn sobre el fichero. Otro modo es abrir el fichero con el Explorer y luego, con el cursor colocado sobre el texto (no sobre imgenes ) pulsar el botn derecho y elegir "Ver cdigo fuente". En el Comunicator tambin se puede "Ver el origen" pero en un visor propio que no permite modificar el texto Ten cuidado con el nombre de los ficheros, pues los servidores donde se alojan las pginas s distinguen maysculas de minsculas y no es lo mismo Inicio.htm que inicio.htm Qu necesito para crear una pgina Web? Lo primero que debes tener claro es qu contenidos va a tener tu pgina. Por ejemplo, si vas a hacer una pgina sobre tu Instituto, qu vas a poner?: las enseanzas que se cursan, los proyectos que estis llevando a cabo, un poco de historia del pueblo o ciudad donde est enclavado el centro, las actividades extraescolares que realiza el centro, etc. Una vez decidido esto qu necesitas?. De entrada, el doble de tiempo que calcules para realizarla. Adems necesitars: Un navegador. Aunque hay ms, parece que el Explorer y el Netscape son los mejores. Un editor de Html (que bien puede ser el que viene con los navegadores) o bien escribir todo el cdigo a mano. Hacer las fotos que vas a poner y escanearlas ( esto suele llevar bastante tiempo si no se ha hecho antes) Puedes hacerlo en el CPR. Un programa grfico para retocar las imgenes, mira en la pgina de imgenes. Espacio en un servidor que albergue la pgina. Si tienes cuenta en el PNTIC puedes subir unos 250 KB, que son suficientes para una pgina sencilla Un programa para subir la pgina al servidor, puede ser el WS_FTP que localizars en http://www.ipswitch.com Dar de alta la pgina en algunos buscadores (Alta Vista, Ol, etc) y tambin en el PNTIC si la pgina est relacionada con la educacin. Si no haces esto, solamente podrn visitar tu pgina quienes conozcan la direccin exacta. Y sobretodo bastante tiempo para el mantenimiento de la pgina: comprobar los enlaces, actualizar las fotos, el contenido, etc. Estructura bsica de un documento HTML

Todos los documentos Html tienen la estructura que se muesta a continuacin, aunque la etiqueta <body> puede ser sustituida por <frameset> para un tipo de pginas que dividen la ventana del navegador en varios cuadros (frames).

<HTML> <HEAD> <TITLE>Ttulo de la pgina</TITLE> ... </HEAD>

<BODY> Aqu ira el contenido de la pgina </BODY> </HTML> Vamos a analizar ms detenidamente las distintas secciones que componen la pgina Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo: <meta name="description" content="Informacin sobre el Centro,las enseanzas que se pueden cursar, los departamentos didcticos"> <meta name="keywords" content="educacin,enseanza,instituto, profesores, alumnos"> En este caso las etiquetas le indican a los buscadores el contenido de nuestras pginas (description) y algunas palabras clave (keywords) para su localizacin. La cabecera es la seccin comprendida entre <head> y </head>. En ella se encuentra necesariamente el ttulo (entre las etiquetas <title> y </title>). El ttulo de la pgina debe describir su contenido por ejemplo: <TITLE>Colegio Pblico de Villaman - mbito de Influencia - </TITLE> no valdra en cambio <TITLE>Pgina de Inicio</TITLE> ya que esto no dice nada por si solo Dentro de la cabecera tambin se suele incluir cdigo en JavaScript, que se reconoce porque va comprendido entre las etiquetas <script language="JavaScript"> <!-Aqu ira el cdigo

// --> </SCRIPT> El cuerpo (body) del documento html es normalmente lo ms importante. Es aqu donde debemos colocar el contenido de nuestra pgina: texto, fotos, etc. El cuerpo est delimitado por las etiquetas <body> y </body> La etiqueta <body> suele contener algunos atributos, a saber: BGCOLOR parmetro usado para especificar el color de fondo de la pgina. El color se define como una terna de nmeros (#rrggbb) en base hexadecimal en el orden rojo, verde, azul (Red, Green, Blue). Tambin se puede usar el nombre en ingls de los colores predefinidos en los navegadores. Sintaxis: <BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue> Una buena ayuda para la seleccion de colores con #rrggbb la puedes encontrar en: Paleta de Colores TEXT, parametro usado para definir el color del texto por omision. Su formato es el mismo que el de BGCOLOR. Si no se pone nada es negro. LINK, VLINK, ALINK, parmetros usados para especificar el color por omision de: texto con enlace, enlace ya visitado y enlace activo. Los colores por omision son LINK=blue, VLINK=purple y ALINK=red. El formato es el mismo que BGCOLOR. BACKGROUND, parmetro usado para especifica la ruta y nombre de archivo (URL) de la imagen que ser usanda como fondo del documento. Esta se ver como mosaico para cubrir toda la ventana si es pequea (lo habitual). Sintaxis: <BODY BACKGROUND="ruta/archivo.gif"> Es conveniente especificar la ruta de modo relativo, esto quiere decir que si cambiamos el directorio completo donde estn nuestras pginas, desde C:\ a C:\webs por ejemplo, la ruta especificada debe seguir siendo vlida. Por ejemplo si la pgina desde la que hacemos el enlace se encuentra en el directorio Aprendiendo Html y queremos poner como fondo la imagen fondo.gif, que se encuentra en gifs, se debe poner: <BODY BACKGROUND="gifs/fondo.gif">

Si la pgina estuviese en ejemplos se pondra: <BODY BACKGROUND="../gifs/fondo.gif"> Fjate en ../ pues es lo que indica al navegador que debe acudir al directorio superior

Formatos del texto

El texto del documento se puede modificar de muchas formas, vamos a ver las ms usuales: Ttulos Los ttulos o encabezamientos se emplean al comienzo de una seccin. Las etiquetas que se usan son: Etiqueta <h1> Ttulo </h1> <h2> Ttulo </h2> <h3> Ttulo </h3> <h4> Ttulo </h4> <h5> Ttulo </h5> <h6> Ttulo </h6> Estilos de fuentes Como ves en la tabla es muy sencillo conseguir los efectos deseados, solamente tienes que colocar el texto entre las etiquetas adecuadas. Etiqueta

Se ve Ttulo Ttulo Ttulo Ttulo Ttulo Ttulo

Se ve

<B>Texto en Negrita</b> <I>Itlica</i> <B><I>Negrita e Itlica</i></b> <U>Subrayado</u> <EM>Enfatizado</em> <STRONG>Fuerte</strong> <CODE>Code Texto</code> <CITE> Citation Text</cite>

Texto en Negrita Itlica Negrita e Itlica Subrayado Solo Explorer Enfatizado Fuerte Code Texto Citation Text

<KBD>Keyboard Text</kbd> <SAMP>Sample Text</samp> <TT>Teletype Text</tt> <VAR>Variable Element Text</var> <BIG>Texto grande</big> <SMALL>Texto pequeo</small> <SUB>Subindice</SUB> <SUP>Superndice</SUP> <BLINK> Texto intermitente</blink> <STRIKE>Texto tachado</STRIKE>

Keyboard Text Sample Text Teletype Text Variable Element Text Texto grande Texto pequeo
Subndice

Solo Explorer Solo Explorer

Superndice

Texto intermitente Solo Netscape Texto tachado

Algunas etiquetas funcionan solamente con alguno de los navegadores, tenlo en cuenta si las usas.

Tamao de fuentes

El tamao de las fuentes se puede especificar de dos maneras, una de ellas por medio de un nmero del 1 al 7 (de ms pequeo a ms grande) del siguiente modo <font size=1> Esta es la letra ms pequea que se puede conseguir </font> que se ver como Esta es la letra ms pequea que se puede conseguir Otra forma es por medio de una referencia relativa: <font size="+1"> Esto es igual que poner size=4 </font> que se ve como Esto es igual que poner size=4 El tamao por defecto es el 3 Tipos de fuentes El tipo de fuente es un atributo de FONT y tiene la siguiente sintaxis <font face="Courier">Eso se ver en la fuente Courier</font> que se ve como: Eso se ver en la fuente Courier Color de las fuentes Es otro atributo de FONT. Mira en la pgina de colores para saber cmo se especifican los colores. La sintaxis es la siguiente: <font size=2 face="MS Sans Serif" color="navy">Como ves se pueden poner varios atributos separados por un espacio</font> que se ver as: Como ves se pueden poner varios atributos separados por un espacio Prrafos y bloques Para definir y separar bloques de texto se emplean una serie de etiquetas que definen los prrafos, texto preformateado o bloques con significado especial como direcciones o citas. Etiquetas de bloques: <P> Se utiliza para que los prrafos queden separados por una lnea en blanco. Si solo quieres escribir un punto y aparte debes usar <BR>. Las marcas inicial y final son <P> y </P>. La etiqueta <P> admite los atributos: ALIGN="left" , ALIGN="right" , ALIGN="center" y ALIGN="justify" para alinearlo a la izquierda, a la derecha, centrarlo o justificarlo totalmente. Por defecto est alineado a la izquierda.

<PRE> El texto insertado entre las marcas <PRE> y </PRE> ser visualizado por el navegador respetando el formato con el que fue escrito en el fichero fuente HTML. Esta etiqueta es muy til para escribir ms de un espacio o para hacer pequeas tablas <ADDRESS> empleada para indicar que un texto representa una direccin o una firma. Generalmente se presenta en cursiva y tabulado. <BLOCKQUOTE> Se representa con tabulaciones a la izquierda y derecha. Toda los prrafos de esta pgina estn entre las etiquetas <BLOCKQUOTE> y </BLOCKQUOTE>, de ese modo se consigue que el texto se presente con mrgenes a ambos lados. <BR> Este elemento slo tiene marca inicial e indica un salto de lnea, es decir un punto y aparte sin separar el prrafo. Esta etiqueta no tiene su correspondiente de cierre <HR> Se emplea para representar una lnea horizontal. Tampoco tiene pareja de cierre. Se pueden emplear los atributos ALIGN="left" , ALIGN="right" , para alinearla a la izquierda o a la derecha. Por defecto aparece centrada WIDTH="66%" SIZE="3", para especificar el ancho en % y el alto en pxels COLOR="#0000FF" , para especificar el color Listas

Con frecuencia se usan listas en los documentos. El lenguaje HTML incorpora unas listas con vietas sencillas o tambin letras o nmeros. Para dar ms vistosidad a las pginas, se suelen emplear tambin imgenes que se colocan delante de cada prrafo. Vamos a ver algunas de las posibilidades que tenemos. Listas con vietas desordenadas He aqu el ejemplo ms sencillo de una de estas listas: escribimos en html <ul> <li>Primer trmino de la lista <li>Segundo trmino <li>Tercer trmino </ul> se ver como

Primer trmino de la lista Segundo trmino Tercer trmino

Como ves, la lista se declara con la etiqueta <UL> y finaliza con el cierre de la misma </UL>. Tambin podemos modificar las vietas por medio del atributo TYPE= circle, disc o square (crculo, disco o cuadrado) y aadir sublistas. escribimos en html <ul> <li type= disc>Primer trmino de la lista <ul> <li>Sublista <li>Otro elemento </ul> <li type=circle>Segundo trmino <li type=square>Tercer trmino </ul> se ver como

Primer trmino de la lista

o o

Sublista Otro elemento

Segundo trmino Tercer trmino

Otro atributo interesante es compact para reducir el espacio entre los elementos Listas con vietas ordenadas Estas listas se caracterizan porque aparecen nmeros o ciertos caracteres que ordenan sus elementos. La etiqueta usada es <OL> junto con su correspondiente de cierre </OL>. El atributo TYPE toma ahora los valores 1, a, A, i, I. Un ejemplo de estas listas es el siguiente escribimos en html se ver como i. ii. iii. iv. v. Primer trmino de la lista Segundo trmino Tercer trmino Cuarto Quinto

<ol type=i> <li >Primer trmino de la lista <li >Segundo trmino <li>Tercer trmino <li>Cuarto <li>Quinto </ol>

Listas de definicin Estas listas se forman con el elemento que se define y su definicin. Las etiquetas son <DL> y </DL> para la lista y <dt> y <dd> para los elementos y sus definiciones. Un ejemplo:

escribimos en html

se ver como Trmino 1 Definicin del elemento 1 Trmino 2 Definicin del elemento 2 Trmino 3 Definicin del elemento 3

<dl> <dt >Trmino 1 <dd>Definicin del elemento 1 <dt>Trmino 2 <dd>Definicin del elemento 2 <dt>Trmino 3 <dd>Definicin del elemento 3 </dl>

Enlaces

Probablemente la caracterstica que ms ha influido, junto con las imgenes, en el espectacular desarrollo de la Web hayan sido los enlaces (links). Un enlace aparece generalmente como un texto azul subrayado y cuando situamos el cursor sobre l se transforma en una mano con el dedo ndice extendido. Si pulsamos sobre el enlace saltamos a otra parte del documento, a otro documento situado en cualquier lugar, o incluso se abre el programa de correo para enviar un mensaje a la direccin indicada. En general los enlaces tienen la siguiente estructura <A HREF="URL"> Texto del enlace</A> El texto del enlace es lo que se visualizar en el navegador. La URL es la direccin donde apunta el enlace y puede ser de estos tipos: Enlace a otro lugar del mismo documento En este caso la URL se sustituye por un marcador en la misma pgina. El marcador puede ser texto colocado en el lugar al que queremos saltar. No importa lo que sea ya que no se ver. Veamos un ejemplo para saltar al inicio de esta pgina. Escribiramos en el lugar desde el que queremos saltar: <A HREF="#inicio"> Ir al Inicio</A> Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta: <A NAME="inicio"> </A>

Una vez escrito esto y guardada la pgina veramos al abrirla con el Navegador Ir al Inicio Al pulsar sobre ella nos llevara al principio de la pgina ya que fue all donde coloqu el marcador Enlace a otra pgina local En este caso la URL se dar de forma relativa (igual que para poner un fondo a la pgina). Por ejemplo si tenemos dos pginas en el mismo directorio pagina1.htm y pagina2.htm y queremos poner un enlace desde la pagina1.htm a la pagina2.htm debemos escribir <a href="pagina2.htm">Ir a pagina2</a> Con esto es suficiente, no hay que crear ningn marcador a no ser que quieras ir a un sitio concreto de la pagina2.htm. En ese caso tendras que poner en el sitio adonde quieres llegar de la pagina2.htm <a name="sitio"></a> y en la pagina1.htm <a href="pagina2.htm#sitio>Ir a sitio de la pgina 2</a> Las palabras forma relativa, al principio de esta seccin, constituyen un enlace de este ltimo tipo Enlace a una direccin de Internet Ahora la URL debe darse de forma absoluta, tal como la ves en la ventana de direccin del navegador, es decir: <A HREF="http://centros4.pntic.mec.es/ies.de.cistierna">IES Cistierna</A> te llevara a la pgina de entrada del IES Cistierna

Enlaces usando imgenes Con frecuencia se emplean imgenes como enlaces. A veces son enlaces a las mismas imgenes con ms resolucin, como en el caso de fotos. Otras veces nos llevan a una localizacin cualquiera. Para que una imagen sea un enlace hay que colocarla en el lugar del texto del enlace, si adems queremos que vaya a otra imagen, sta la debemos poner en el lugar de la URL. Veamos unos ejemplos Supongamos para ello, que la estructura de nuestras pginas es la indicada en la imagen. Si escribo en la pgina actual localizada en Aprendiendo Html <A HREF=" #inicio"><img src="gifs/imagen.gif"></A> obtengo una imagen que al pulsarla me lleva al inicio de esta pgina,

exactamente como esta: Para que una imagen sea un enlace a otra imagen se debe escribir: <a href="gifs/sky.jpg"><img src="gifs/ojo.gif" ></a>

que da como resultado

Enlace con una direccin de correo Este es un enlace un poco diferente, veamos un ejemplo <A HREF="mailto: [email protected]"> [email protected] </A> que se ve como [email protected] y que si lo pulsas se abre el programa de correo que tengas configurado, con la direccin en el campo correspondiente Enlace con un grupo de noticias Como antes la sintaxis es un poco diferente <A HREF="news://news.pntic.mec.es/"> Mira en las noticias del MEC para encontrar profesores colgados</A> que se vera Mira en las noticias del MEC para encontrar profesores colgados Enlace para descargar un fichero En la URL se poner la ruta donde est el fichero. Por ejemplo, para descargar un fichero de nombre guiahtml.zip se debe poner <A HREF="../zip/guiahtml.zip">guiahtml.zip</A> que se vera as guiahtml.zip. Si pulsas sobre l se abrir una ventana avisndote de una descarga de archivos y preguntndote qu deseas hacer Enlace que se abre en una nueva ventana Si quieres que la pgina que enlazas aparezca en una nueva ventana del navegador, solamente tienes que poner target="nombre" como atributo del enlace, es decir: <a href="index.htm" target="nueva">Indice</a>

que se ver como Indice An hay ms tipos de enlaces, pero stos son los ms importantes Imgenes

La etiqueta para incluir una imagen es la siguiente: <IMG SRC="URL"> (no tiene etiqueta de cierre) donde URL es la direccin de la imagen. La URL puede ser relativa o absoluta. Unos ejemplos aclararn este concepto: <IMG SRC="gifs/nido.gif"> se ver como: . Esta es una direccin relativa.

<IMG SRC="http://spaceart.com/solar/raw/sat/saturn4.jpg"> insertara en el lugar del documento donde hubieras puesto la etiqueta una bonita foto de Saturno con dos de sus lunas (Tetis y Dione), siempre que estuvieras conectado a Internet. Esta es una direccin absoluta, ya que la direccin no depende del directorio donde est ubicada la pgina que la contiene. Atributos de IMG Los atributos de la imagen pueden ser los siguientes: ALT="Texto que aparece al situar el cursor sobre la imagen" Tambin muestra este mismo texto en caso de que el navegador no cargue la imagen. ALIGN= Nos indica la posicin de la imagen respecto del texto. Despus del signo igual, pueden ir los valores: TOP si queremos que el texto est alineado con la parte superior de la imagen MIDDLE alinea el texto con la parte central de la imagen BOTTOM alinea el texto con la parte inferior de la imagen LEFT alinea la imagen a la izquierda de la pgina forzando la colocacin del texto en la parte derecha y arriba RIGHT alinea la imagen en la derecha de la pgina forzando la colocacin del texto en la parte izquierda y arriba. Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se pueden emplear las siguientes extensiones de la etiqueta <br>:

<br clear =left > Busca el primer margen libre (clear) a la izquierda. <br clear = right> Busca el primer margen libre a la derecha. <br clear =all > Busca el primer margen libre a ambos lados. WIDTH=80, HEIGTH=100 Indican la anchura y altura de la imagen en pxels, en este caso 80x100 pxels.

Si especificamos las dimensiones de las imgenes, las pginas se cargan ms rpido, debido a que el navegador reserva el espacio para ellas y sigue cargando el texto BORDER=2 Aade un borde, a modo de marco, a la imagen. En este caso de 2 pxels. HSPACE=10 , VSPACE=15 Especifican el espacio horizontal y vertical que separa la imagen del texto que la rodea, en este caso 10 pxels horizontales y 15 verticales Formatos de imgenes Existen muchos formatos para guardar imgenes que tienen diferentes extensiones bmp, tiff, dib, wmf, etc. En internet se usan bsicamente dos: GIF y JPG. Ambos formatos comprimen las imgenes para reducir su tamao, de este modo se asegura una transferencia ms rpida por la red. Esto es importante, ya que si la imagen se tarda en cargar, es posible que el visitante de nuestra pgina la abandone por ello. En los casos en que es necesario poner una imagen con una resolucin elevada para ver los detalles, es mejor colocar una imagen pequea y usarla como enlace que nos conduzca a la imagen final. De ese modo el visitante ya sabe la imagen que va a cargar y puede ser ms paciente. Esto se hace como vimos en la pgina de enlaces <a href="URL de la imagen final"><img src="URL de la imagen que se ve con la pgina"></a> Formato GIF El formato GIF usa 256 colores y se emplea sobretodo con imgenes pequeas como iconos. No se suele usar con fotos porque da ms calidad el formato JPG. Aunque el formato GIF no tiene prdidas de calidad en la compresin, es decir muestra la imagen tal como es en formato bmp por ejemplo, pero reduciendo su tamao considerablemente. Tiene dos caractersticas que lo hacen muy atractivo para el diseo de las pginas Web. Una de ellas, es que uno de sus colores se puede hacer transparente (en el subformato Gif89a), no mostrndose en la pantalla. Si se elige el color que bordea el motivo principal da la sensacin de que la imagen tiene la forma de ese motivo ( en realidad todas las imgenes son rectangulares).

Puedes ver ese efecto en las pequeas imgenes que adornan este manual. Para hacer transparente un color hay que usar editores de imgenes, como por ejemplo: LView en http://www.lview.com (Shareware, 21 das de prueba, 1.36 Mb) Paint Shop Pro en http://www.jasc.com (Shareware, 30 das, 3.1 Mb) o el ms profesional Adobe Photoshop Otra caracterstica, es que se pueden ensamblar varias imgenes, que se muestran como si fuera una sola, de modo que da la sensacin de movimiento. Estas imgenes se llaman Gifs animados y como ves tambin se pueden hacer transparentes. Hay programas especficos para hacer Gifs animados, algunos son: GIF Construction Set en http://www.mindworkshop.com/alchemy/gifcon.html (1.46 Mb, Shareware) WWW Gif Animator en http://stud1.tuwien.ac.at/~e8925005/ (277 Kb, Shareware) Tambin puedes encontrar imgenes ya creadas de todos los tipos en algunas pginas de Internet, que son como bibliotecas de imgenes. Puedes mirar en Icon Bazaar (http://www.iconbazaar.com/) Rose's Backgrounds Archive (http://www.wanderers2.com/rose/animate.html) Free graphics wonderland (http://www.jetlink.net/~gini/) Rainfrog's Web Art (http://www.rainfrog.com/webart) Fairy's Free Icons (http://www.dewa.com/freeicon) GIF Animation Designs (http://www.webpromotion.com/stock.html Icon Gallery (http://cool.deu.net/galerie/icon/menue_noframe.htm) Over the Rainbow (http://www.geocities.com/SiliconValley/Heights/1272/rainbow.html) Formato JPG El formato JPG usa 16.7 millones de colores, por lo que se emplea con imgenes de alta resolucin. Con este formato se obtiene un grado de compresin ms alto que con el GIF y adems sta se puede regular: Cuanto mayor sea la compresin, ms prdida de calidad, respecto de la imagen original. De hecho cada vez que abrimos y guardamos de nuevo una imagen en formato JPG, distorsionamos un poco la imagen. Todas las fotos de buena calidad usan este formato. Imgenes entrelazadas (GIF) y progresivas (JPG) Cuando se carga una imagen normal en el navegador, ste va mostrndola de arriba a abajo . Se puede conseguir que se visualize por capas. En la primera capa vemos la imagen de un modo borroso y luego se va haciendo cada vez ms ntida. Esto tiene la ventaja de que se da uno cuenta

enseguida, del tema de la imagen y si no es lo que buscas, puedes interrumpir la descarga. Se puede conseguir en los dos formatos y es una caracterstica muy conveniente en las imgenes web Ejemplos Esta imagen tiene los atributos: align=left , hspace=10 , width=250 , hight=170 , border=1 , alt="Mono" y como quiero que despus de estos comentarios el texto salte debajo de la imagen escribo: <br clear=all> Como ves, sto est debajo de la foto Esta otra tiene los atributos: align=right , hspace=1 , border=5 , alt=" Aguila" width=250 , height=165. Tambin debera de escribir <br clear=all > para que el final de pgina aparezca en su sitio. Como no lo hago queda a la izquierda de la imagen. Fjate en el borde Multimedia

De un modo similar a como se inserta una imagen se puede insertar un fichero de sonido o de vdeo. Sonido de fondo al cargar la pgina En este caso la etiqueta depende del navegador, ya que se implementa de forma diferente en el Explorer y el Netscape. Los formatos ms usados son mid (para temas musicales sin voces) , wav y au. Netscape La etiqueta bsica para que se cargue el fichero de msica con la pgina, sin intervencin del usuario, es en Netscape (siendo obligatorio especificar el tamao): <EMBED SRC="gifs/derroche.mid" WIDTH=144 HEIGHT=30>

En Netscape se ver para WIDTH=160 HEIGHT=70 como: La etiqueta EMBED tiene multitud de atributos, he aqu algunos. AUTOSTART= FALSE (por defecto) y TRUE. Este ltimo hace que suene inmediatamente despus de cargar la pgina sin necesidad de pulsar el botn.

HIDDEN=TRUE, oculta la consola y slo tiene este valor . Como no se podra activar el sonido pulsando el botn, suene al cargar la pgina LOOP=FALSE ,TRUE(por defecto),N para oir el fichero una vez, infinitas o el nmero que especifiquemos en N CONTROLS=SMALLCONSOLE, aparece una consola pequeita Si pones esta etiqueta, las versiones ms recientes del Explorer (desde la 4.0) tambin la interpretan correctamente, salvo LOOP. El Explorer lee el fichero una vez para LOOP=0 y lo repite indefinidamente para N igual a otro valor cualquiera.

Explorer El Explorer ofrece menos posibilidades para manejar estos ficheros. La etiqueta bsica para que se cargue la msica con la pgina es: <BGSOUND SRC="fichero de sonido" LOOP= n INFINITE> donde n es el nmero de veces que se oye el fichero: 1, 2, 3 ... o infinitas

Recuerda que slo funciona en el Explorer Sonido de fondo en los dos navegadores Si deseas que suene la msica al cargar la pgina con los dos navegadores debes escribir las etiquetas para ambos. Es decir debes poner: <bgsound src="../gifs/houston.mid"> <embed src="../gifs/houston.mid" Hidden="true" > para que suene una vez o bien: <BGSOUND SRC="../gifs/cantina.wav" LOOP=infinite> <EMBED SRC="../gifs/cantina.wav" WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="true" HIDDEN="true"> para que se ejecute indefinidamente.

Aqu tienes algunos ejemplos de pginas con sonidos. Una vez cargadas utiliza el botn derecho del ratn para ver el cdigo fuente (el origen en Netscape).

Pgina que carga sonido de fondo ( mid ) en los dos navegadores (suena una sola vez) Pgina que carga sonido de fondo ( wav ) en los dos navegadores (se repite una vez tras otra)

Sonido desde un enlace en la pgina Si no quieres que se cargue la msica con la pgina, algo que llega a resultar bastante pesado a veces, debes poner un enlace al fichero de sonido, lo que funciona con ambos navegadores: Netscape y Explorer. Escucha Derroche de Ana Beln Tambin puedes poner cualquier otro tipo de ficheros de sonido, como mp3, que comprime hasta 12 veces la msica, sin prdida apreciable de calidad. Vdeo El gran problema de los ficheros de vdeo es su tamao, ya que unos pocos segundos pueden representar varios Mb (mega bytes) de tamao. Probablemente en el futuro se ir generalizando su uso, ya que aumentar la velocidad en la Red. Los formatos que se emplean son variados: avi, mpeg, ram, mov, etc, que pueden reproducir a la vez sonido y vdeo. Los ficheros avi y mpeg se reproducen con el Reproductor Multimedia de Windows, pero los dems necesitan visores propios que se deben instalar previamente. Por ejemplo los ficheros ram se visualizan con Real Player, los mov con Quick Time, etc. Son los llamados plug-in En Netscape, la etiqueta es muy parecida a la de sonido, siendo obligatorio especificar tambin las dimensiones: <EMBED SRC="video.avi" HEIGHT=300 WIDTH=400 AUTOSTART=false LOOP=false> En explorer debes llamar al fichero con un enlace <A HREF="gifs/jordan.avi">Mira el vdeo de Jordan</A> lo que abrir el programa asociado al tipo de vdeo elegido cuando lo pulses. En el Netscape tambin puedes hacer esto mismo.

Si quieres probar aqu tienes un bonito aterrizaje del Columbia (para verlo necesitas estar conectado a internet y ojo que son 708 KB) STS-87 Columbia Landing (240x180 MPEG 708K) Tablas

Una tabla bsica Las tablas se usan con profusin en las pginas Web, muchas veces debido a que son el nico instrumento con el que se cuenta, para asegurarse que las cosas estarn en su sitio. Para definir una tabla se usan las etiquetas: <TABLE> y </TABLE> son las etiquetas donde est contenida la tabla <TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera) <TD> y </TD> sealan una celda. La tabla se va definiendo declarando una fila y a continuacin las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo nmero de celdas. La tabla (2x2) ms sencilla que podemos hacer es la siguiente Escribimos: <TABLE > <TR> <TD>1 </TD> <TD> 2 </TD> </TR> <TR> <TD>3 </TD> <TD> 4</TD> </TR> </TABLE> Visualizamos

12 34

El resultado no es muy brillante, pero vamos a ir viendo las distintas posibilidades que tenemos para mejorarlo. Atributos de la etiqueta TABLE Todos los atributos son opcionales BORDER="4". Indica el tamao del borde en pxels, en este caso 4. Si no se indica nada carece de borde

WIDTH="5" o WIDTH="50%". Es el ancho de la tabla, puede especificarse en valor absoluto (5 pxels) o como un porcentaje (50% del ancho disponible) CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2 CELLPADDING="5". Es el espacio entre el contenido de las celdas y el borde de las mismas, por defecto es 1 ALIGN=" left", "right", "center". Alinea la tabla a la izquierda , derecha o en el centro. Otro ejemplo Escribimos: <TABLE BORDER="3" CELLSPACING="5" WIDTH="150"> <TR> <TD>1 </TD> <TD> 2 </TD> </TR> <TR> <TD>3 </TD> <TD> 4</TD> </TR> </TABLE> Atributos de las etiquetas de fila y celda Las etiquetas que soportan las filas y las celdas son WIDTH="30". Ancho de toda la fila o celda. Tambin se puede dar en % ALIGN=" left", "right", "center". Alinea el contenido a la izquierda, derecha o centro VALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, en medio o abajo BGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o fila COLSPAN=3. Especifica el nmero de columnas que abarca la fila ROWSPAN=2. Especifica el nmero de filas que abarca la columna Tercer ejemplo. Fijate en la etiqueta TH, que sustituye a TR, resalta su contenido con negrita, por eso se usa para los ttulos Escribimos: <TABLE BORDER="3" CELLSPACING="5" WIDTH="200"> <TH COLSPAN=2 BGCOLOR="#6D8FFF> Este es el ttulo</TH> <TR align="center"> <TD>Esta es la celda de la 1 fila y de la 1 columna</TD> <TD> Esta es de la 1 fila y de la 2 columna</TD> Visualizamos Visualizamos

1 3

2 4

Este es el ttulo Esta es la celda Esta es de la 1 fila y de la de la 1 fila y 2 columna de la 1

</TR> <TR BGCOLOR="#6D8FFF> <TD>Esto est con un fondo azul</TD> <TD align="right" valign="bottom">Y esto tambin</TD> </TR> </TABLE>

columna Esto est con un fondo azul Y esto tambin

Como ves, se pueden ir modificando los comandos bsicos para obtener la tabla que deseemos. Es frecuente no escribir las etiquetas de cierre de fila y celda, los navegadores presentan la tabla igual y nos ahorramos unas cuantas pulsaciones de teclas. Otros usos de las tablas Como dijimos, las tablas son a veces la mejor manera de asegurarnos que cada cosa est en su sitio. En esos casos toda la pgina es una tabla invisible y los distintos elementos aparecen colocados en el sitio exacto mediante el uso de filas, columnas, sus dimensiones y alineamientos, el espacio entre las mismas, etc. Normalmente el ancho de esas tablas es de alrededor de 600 pxels para que la presentacin sea similar en todos los monitores. Hay muchos ejemplos de este uso, sobretodo en las pginas diseadas por profesionales, observa sino la de El Pais o la de Microsoft Como inconvenientes sealar que las tablas impiden el deslizamiento uniforme de la ventana, cuando se desplaza con la barra y el tamao de la pgina aumenta considerablemente.

Mapas sensibles

Los mapas sensibles son imgenes que presentan mltiples enlaces segn la zona donde se site el cursor. Para conseguir esto se divide la imagen en zonas mediante las coordenadas de las mismas. Procedimiento Primero conseguimos una imagen y la declaramos como mapa, en este caso con el nombre de directorio <IMG SRC="gifs/mapa.gif USEMAP="#directorio"> Abrimos el mapa recin creado <MAP NAME="directorio">

Definimos las zonas del mapa y los enlaces que le asignamos a cada una. <AREA SHAPE="forma de la zona" COORDS="coordenadas" HREF="URL asignada" ALT="comentario"> Cerramos el mapa </MAP> Valores de SHAPE y COORDS Los valores que pueden tomar la forma y las coordenadas son: RECT. Rectngulo o cuadrado COORDS="x,y,u,v" donde x,y son las coordenadas del vrtice superior izquierdo del rectngulo y u,v es el vrtice inferior derecho. El origen de coordenadas 0,0 es el vrtice superior izquierdo CIRCLE. Crculo COORDS="x,y,z", donde x,y es el cetro de la circunferencia y z el radio POLY. Lnea poligonal cerrada COORDS="X,x, Y,y, Z,z...,X,x", donde los pares X,x, Y,y, etc representan los vrtices del polgono. El primero coincidir con el ltimo. DEFAULT. La zona no referenciada anteriormente Para hallar las coordenada necesitars un editor de imgenes, como los sealados en la pgina de imgenes. Si te empeas tambin puedes hacerlo a ojo, siempre que la imagen no sea muy complicada, ya que cuando pulsas la zona en el navegador aparece definida un instante. Ejemplo Vamos a crear un mapa sensible con una imagen capturada del explorador de Windows95. Para hacerlo pulsa la tecla Imprimir Pantalla (Print Screen SysRq) y luego pega la imagen capturada con cualquier editor de imgenes. El Paint que viene con Windows 95 y 98 no vale ya que, aunque captua la pantalla, luego no puedes guardar la imagen en formato gif o jpg. Usa el Adobe Photoshop, el Paint Shop Pro o el Corel. Vamos a crear un mapa que nos podra servir como men en la pgina principal. Para conseguir el mapa de la izquierda hemos escrito <IMG SRC="gifs/mapa.gif" USEMAP="#directorio" ALIGN="left" HSPACE=20> <MAP NAME="directorio">

<AREA SHAPE="RECT" COORDS="0,0,94,22" HREF="colores.htm"> <AREA SHAPE="RECT" COORDS="0,22,94,39" HREF="comienzo.htm"> <AREA SHAPE="RECT" COORDS="0,39,94,56" HREF="enlaces.htm"> <AREA SHAPE="RECT" COORDS="0,56,94,73" HREF="estructura.htm"> <AREA SHAPE="RECT" COORDS="0,73,94,90" HREF="formatos.htm"> <AREA SHAPE="RECT" COORDS="0,90,94,107" HREF="imagenes.htm"> <AREA SHAPE="RECT" COORDS="0,107,94,124" HREF="index.htm"> <AREA SHAPE="RECT" COORDS="0,124,94,141" HREF="listas.htm"> <AREA SHAPE="RECT" COORDS="0,141,94,158" HREF="mapas.htm"> <AREA SHAPE="RECT" COORDS="0,158,94,175" HREF="publicar.htm"> <AREA SHAPE="RECT" COORDS="0,175,94,192" HREF="tablas.htm"> <AREA SHAPE="RECT" COORDS="0,175,94,214" HREF="frames.htm"> </MAP> No te asustes con tanto nmero, fjate en las regularidades que presentan. La 1 columna y la 3 indican donde empieza y donde acaba horizontalmente. La 2 y la 4 lo hacen en sentido vertical. Cualquiera de los programas citados anteriormente te indican las coordenadas de cualquier punto de una imagen. Fjate tambin que la etiqueta inicial <IMG SRC...> es una etiqueta de imagen y como tal acepta todos sus atributos. Formularios

Cmo se hace un formulario? He aqu los elementos bsicos para la realizacin de un formulario Abrir y cerrar un formulario <FORM ACTION="mailto:[email protected]" METHOD="post" ENCTYPE="text/plain"> ... </FORM> Entre las etiquetas anteriores deben ir todas las etiquetas que generan los botones, casillas, campos, etc. y tambin todas las etiquetas de HTML que permitan dar forma al formulario (tablas, colores, etc)

El atributo ACTION nos indica la direccin de correo a la cual se van a enviar los datos del formulario. As pues debes sustituir [email protected] por tu direccin de correo. Los atributos METHOD y ENCTYPE indican cmo se transferirn los datos (post, correo) y la codificacin del texto El atributo HIDDEN no mostrar el campo en la pgina web, aunque s enviar su contenido. Entrada de texto de una lnea <INPUT TYPE="text" SIZE="25" NAME="Nombre"> Esta etiqueta produce un campo similar al que se muestra debajo, para introducir texto (en este caso el nombre), de una longitud de 25 caracteres.

Cuando nos llegue al buzn de correo el texto de este campo aparecer asociado a la palabra que pongamos en NAME (en este caso a Nombre) Puede incluirse otro atributo opcional VALUE="Pon aqu tu nombre", en este caso aparecera Pon aqu tu nombre dentro del campo Entrada de texto de varias lneas <TEXTAREA NAME="comentario" ROWS=3 COLS=50> Introduzca aqu sus comentarios </TEXTAREA> Este cdigo producira el siguiente resultado:
Introduzca aqu sus comentarios

Lista de opciones o men desplegable <SELECT NAME="estudios"> <OPTION SELECTED> ESO <OPTION> Bachillerato <OPTION> Ciclos Formativos <OPTION> Garanta Social </SELECT> Que producira un campo similar al siguiente:

ESO

donde ESO aparece seleccionada por defecto. Una variante de las listas de opciones son los mens con barras de desplazamiento <SELECT NAME="americanos" SIZE=6> <OPTION>Espaa <OPTION>Mxico <OPTION>Argentina <OPTION>Costa Rica <OPTION>Panam <OPTION>Belice <OPTION>Honduras <OPTION>Bolivia <OPTION>Chile <OPTION>Paraguay </SELECT> que da como resultado una entrada del tipo
Espaa Mxico Argentina Costa Rica Panam Belice

Si en la etiqueta <SELECT ...> introducimos el atributo MULTIPLE: nos est permitido efectuar selecciones mltiples. <SELECT NAME="menu" SIZE=6 MULTIPLE> Casillas de verificacin o Checkboxes < INPUT TYPE="checkbox" NAME="nivel" VALUE="eso"> ESO <BR> < INPUT TYPE="checkbox" NAME="nivel" VALUE="bachiller"> Bachillerato <BR> < INPUT TYPE="checkbox" NAME="nivel" VALUE="primaria"> Primaria <BR Nos permite elegir entre varias posibilidades una o ms casillas. Recibiremos como dato el valor de la casilla sealada, asociada en este caso a nivel. Producira un resultado como el siguiente: ESO Bachillerato Primaria Botones de radio o de opcin

< INPUT TYPE="radio" NAME="sexo" VALUE="hombre" CHECKED> Hombre < INPUT TYPE="radio" NAME="sexo" VALUE="mujer" > Mujer Similar al anterior, con la diferencia de que solo nos permite seleccionar una de las opciones mostradas, se utiliza para mostrar opciones excluyentes entre si. Luce como: Hombre Mujer Botones envo y borrado Se utilizan las siguientes etiquetas para hacer los botones de Enviar y Borrar < INPUT TYPE="submit" VALUE="Enviar"> < INPUT TYPE="reset" VALUE="Borrar"> Producirn uno botones como estos:
Enviar Borrar

Cuando presionemos "Enviar" se transferir el contenido de los campos a la direccin de correo indicada, por lo que necesitamos estar conectados a Internet para comprobarlo. Si presionamos Borrar se borrar el contenido de los campos Ejemplo Sustituye los campos necesarios para colocarlo en tu pgina <form action="mailto:[email protected]" method="post" enctype="text/plain"> <center><table bgcolor="#cccccc" border="0" cellpadding="6" cellspacing="0" width="400"> <tr> <td align="right" valign="top"><b>Nombre</b></td> <td><input type="text" size="25" name="Nombre"> </td> </tr> <tr> <td align="right" valign="top"><b>E-mail</b></td> <td><input type="text" size="25" name="e-mail"> </td> </tr> <tr> <td align="right" valign="top"><b>Especialidad</b></td> <td><input type="text" size="25" name="Especialidad"> </td> </tr> <tr>

<td align="right" valign="top"><b>Centro de destino</b></td> <td><input type="text" size="25" name="Centro"> </td> </tr> <tr> <td align="right" valign="top"><b>Provincia</b></td> <td><input type="text" size="25" name="Provincia"> </td> </tr> <tr> <td align="right" valign="top"><b>Pulsa una vez</b>&nbsp; <b>&gt;</b> </td> <td align="center">&nbsp; <input type="submit" name="Enviar datos" value=" Enviar "><input type="reset" value="Borrar" name="B1"> </td> </tr> </table> </center> </form> Frames

Los frames (marcos o cuadros) permiten dividir la ventana en varias ms pequeas, de modo que en cada una de ellas se cargua una pgina html distinta. Las versiones ms antiguas de los navegadores no tienen implementada esta caracterstica, por lo que no podrn verlos. Sintaxis Los frames se declaran con la etiqueta <FRAMESET>, que debe ser colocada antes de la etiqueta <BODY>. Si no se cumple este requisito, la etiqueta se ignorar. Un ejmplo sencillo es el siguiente: (puedes ver el ejemplo real pulsando aqu) <HTML> <HEAD><TITLE> Ttulo de la pgina </TITLE></HEAD>

<FRAMESET ROWS=75,*>

<FRAME SRC="frames1.htm" > <FRAME SRC="frames2.htm" >

</FRAMESET>

<NOFRAMES> <BODY> Lo siento,su navegador no soporta frames. Pulse <a href="frames1.htm>aqu </A> para acceder a los contenidos de estas pginas. </BODY> </NOFRAMES>

</HTML> EL atributo ROWS (filas) es el que define el nmero y el tamao de los frames, en este caso dos filas, de 75 pxels la primera y el resto de la ventana la segunda. Tambin se puede dividir en columnas mediante COLS El tamao de los frames se puede especificar de ms formas: COLS=*,5* dos columnas, la segunda cinco veces mayor que la primera COLS=150,*,150 tres colunmas, la primera y tercera de 150 pxels, la segunda ocupa el resto. ROWS=20%,80% dos filas que ocupan el 20 % y el 80 % del espacio respectivamente. Las etiquetas NOFRAMES y BODY solamente se usan por cortesa, de hecho se pueden suprimir. Las etiquetas FRAME SRC="frames.htm" cargan las pgina indicadas en el frame correspondiente. Tambin es posible anidar frames, llamando a una pgina que tenga de nuevo frames o bien declarndolo explicitamente. Un ejemplo de esto ltimo es el que aparece abajo (el real aqu ) <FRAMESET COLS=20%,*>

<FRAME SRC="frames1.htm">

<FRAMESET ROWS=20%,*> <FRAME SRC="frames2.htm">

<FRAME SRC="frames3.htm"> </FRAMESET>

</FRAMESET> Este cdigo divide la ventana en dos columnas, la primera del 20 % del ancho total, y la segunda queda dividida a su vez en dos filas, siendo la primera de ellas un 20 % del total

El atributo TARGET Lo ms interesante de los frames es la posibilidad que tienen de interactuar entre si, es decir pulsar un enlace en el frame 1 y cargar el contenido en el frame 2. Para conseguir esto hay que darle un nombre a los frames y luego indicar en el enlace donde se va a cargar mediante el atributo TARGET. Veamos un ejemplo <HTML> <HEAD><TITLE> Frames --Ejemplo 3--</TITLE></HEAD>

<FRAMESET COLS=150,*>

<FRAME SRC="frames4.htm" NAME=margen> <FRAME SRC="frames5.htm" NAME=principal>

</FRAMESET>

</HTML> Los enlaces de la pgina frames4.htm , que es la que se carga en el margen izquierdo,se escriben de la forma: <A HREF="frames1.htm" TARGET=principal>Frame 1 </A> Hay ciertos valores reservados para TARGET, estos son

TARGET=_top, hace que la pgina se cargue en la ventana completa del navegador. TARGET=_self, hace que la pgina se cargue en la misma ventana del frame actual. TARGET=_parent, hace que la pgina se cargue en el frame "padre", del que desciende el actual TARGET=_blank, hace que la pgina se cargue en una nueva ventana. TARGET=nombre, hace que la pgina se cargue en el frame llamado nombre. Si no existe se carga en una ventana nueva Atributos de FRAME En los frames se pueden modificar algunas de sus caractersticas por medio de las etiquetas que siguen: SCROLLING= yes, no , auto . Indica si el frame llevar siempre, nunca o cuando lo necesite, barra de deslizamiento vertical BORDERCOLOR="color" . Indica el color del borde MARGINWIDTH=n . Indica el margen horizontal, tanto derecho como izquierdo, en pxels MARGINHEIGHT=n . Indica el margen vertical, tanto superior como inferior, en pxels NORESIZE . Indica que el frame no se puede redimensionar. Si no se pone este atributo colocando el cursor en el borde del frame, permitira su deslizamiento Atributo de FRAMESET FRAMEBORDER=yes, no . Indica si los frames tendrn bordes o no.

ltimos consejos
Existen ciertas normas que se deben seguir a la hora de realizar una pgina Web. No son obligatorias, pero si convenientes. Carga rpida. Las pginas no deben superar, incluidos los elementos grficos, ms de 30 o 40 Kb. Puede admitirse que la pgina principal o alguna otra sean un poco ms grandes. El texto que haya en una pgina no debe ocupar ms de dos o tres pantallas, en caso de que as sea, es mejor dividirlo. Disear para mquinas menos potentes Hay que tener en cuenta que la mayora de los ordenadores trabajan con 640x480 pxels de resolucin de pantalla, por lo que si se incluyen imgenes, tablas o elementos ms anchos, no se visualizarn completamente. Del mismo modo, tampoco hay que abusar de los Applets Java. Son muy bonitos pero sobrecargan en exceso los ordenadores de los usuarios.

Actualizaciones Es conveniente incluir una pgina donde indique las novedades, de ese modo los visitantes habituales sabrn dnde deben mirar. Indica tambin la fecha de actualizacin de las pginas al final de las mismas. E-mail Debes incluir siempre una direccin e-mail para que te puedan enviar mensajes, comentarios, opiniones, etc (respndelos con prontitud ). Si la pgina es sobre el Centro tambin es conveniente poner la direccin y el telfono real. Enlaces Al menos debes incluir enlaces a pginas de contenido similar al de la tuya. Por ejemplo a otros Colegios e Instituciones educativas, si haces una pgina sobre tu centro. De esta manera aseguras que los visitantes encuentren ms fcilmente lo que buscan y por cortesas tambin pondrn enlaces hacia tu pgina.

Cmo pongo la pgina en el servidor?

Supongamos que ya has creado tu pgina. Probablemente no ser una sola, sern varias y puede que tambin existan directorios dentro de ella. No obstante esto no tiene mucha importancia para "subirla" al servidor Supongamos tambin que vas a subirla a un ordenador del PNTIC con el programa WS_FTP, que puedes descargar y usar de forma gratuita siempre que seas un profesor. Con otros programas se hace de modo similar.

WS_FTP
Cuando arrancas el programa te aparece una pantalla similar a la que aparece a la derecha, en la que tienes que rellenar los campos como se indican en la misma. La mquina donde vamos a subir la pgina es acacia (ya sabes que hay distintos servidores que tienen nombres de rboles: olmo, sauce, roble, etc), que est en el Programa de Nuevas Tecnologas (pntic) del Ministerio de Educacin y Cultura (mec) en Espaa (es). El nombre de usuario

ficticio sera ana y como ves la contrasea aparece con asteriscos. La direccin de correo de Ana sera [email protected] ya que la palabra que precede al smbolo arroba es el nombre de usuario o login y coincide con User ID

Una vez que has completado esta pantalla pulsa Aceptar. Te aparecer otra pantalla, como la debajo de este texto, dividida en dos ventanas; la de la izquierda se corresponde con tu ordenador y la de la derecha el directorio que tienes asignado en acacia. Sitate en el directorio o fichero que quieras transferir pulsando sobre l a la izquierda, y sobre public html a la derecha y pulsa sobre el smbolo -->. Los ficheros o directorios que hayas seleccionado sern transferidos al servidor. Ahora slo te resta comprobarlo accediendo a tu pgina a travs de Internet. Comprueba que los enlaces funcionan correctamente.