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 Se ve
<h1> Ttulo </h1>
Ttulo
<h2> Ttulo </h2>
Ttulo
<h3> Ttulo </h3>
Ttulo
<h4> Ttulo </h4>
Ttulo
<h5> Ttulo </h5>
Ttulo
<h6> Ttulo </h6>
Ttulo
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
<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>
<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>
Texto en Negrita
Itlica
Negrita e Itlica
Subrayado Solo Explorer
Enfatizado
Fuerte
Code Texto
Citation Text
Keyboard Text
Sample Text
Teletype Text
Variable Element Text
Texto grande
Texto pequeo

Subndice
Solo Explorer

Superndice
Solo Explorer
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 se ver como
<ul>
<li>Primer trmino de la lista
<li>Segundo trmino
<li>Tercer trmino
</ul>
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 se ver como
<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>
Primer trmino de la lista
o Sublista
o Otro elemento
o 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
<ol type=i>
<li >Primer trmino de la lista
<li >Segundo trmino
<li>Tercer trmino
<li>Cuarto
<li>Quinto
</ol>
i. Primer trmino de la lista
ii. Segundo trmino
iii. Tercer trmino
iv. Cuarto
v. Quinto
Listas de definicin
Estas listas se forman con el elemento que se define y su definicin. Las etiquetas son <DL> y </DL>
los elementos y sus definiciones. Un ejemplo:

escribimos en html se ver como
<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>
Trmino 1
Definicin del elemento 1
Trmino 2
Definicin del elemento 2
Trmino 3
Definicin del elemento 3

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: abercian@pntic.mec.es"> abercian@pntic.mec.es </A>
que se ve como abercian@pntic.mec.es 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: Visualizamos
<TABLE >
<TR>
<TD>1 </TD> <TD> 2 </TD>
</TR> <TR>
<TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE>
1 2
3 4
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: Visualizamos
<TABLE BORDER="3" CELLSPACING="5"
WIDTH="150">
<TR>
<TD>1 </TD> <TD> 2 </TD>
</TR> <TR>
<TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE>
1 2
3 4
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: Visualizamos
<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>
</TR>
<TR BGCOLOR="#6D8FFF>
<TD>Esto est con un fondo azul</TD>
<TD align="right" valign="bottom">Y esto tambin</TD>
</TR>
</TABLE>
Este es el ttulo
Esta es la celda
de la 1 fila y
de la 1
columna
Esta es de la 1
fila y de la 2
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:tulogin@tuservidor.pntic.mec.es" 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 tulogin@tuservidor.pntic.mec.es 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:
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
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:
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:tu@direccion.es" 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>
Pulsa aqu para ver cmo queda

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.
Puedes ver un ejemplo ms de frames aqu
Publicar en la Web

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 ana@acacia.pntic.mec.es 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.