INTRODUCCIÓN:
El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags). Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Todo el documento HTML debe estar entre las etiquetas
<HTML> y </HTML>:
<HTML> [Todo el documento] </HTML>
El documento en sí está dividido en dos zonas principales:
• El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>. Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal, como el título del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás cuando agreguen nuestra página a sus favoritos, por ejemplo.
• El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>. Dentro del cuerpo están todos los elementos que queremos que aparezca en la página (texto, imágenes, etc.)
Por tanto, la estructura queda de esta manera:
<HTML>
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY>
[Aquí van las etiquetas que visualizan la página]
</BODY>
</HTML>
Lo mínimo que se necesita para crear y ejecutar un documento HTML es un editor de texto (como el block de notas) y un explorador web (como el IE). No olvidar que al guardar el archivo en el editor, su extensión debe ser .HTM o .HTML.
Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla se acomoda a ella, sin que tengamos que pulsar Enter.
Nombres de los Archivos:
Un sitio del Web es en realidad un conjunto de archivos, bien sea de texto (los documentos HTML), bien sea binarios (imágenes, sonidos, etc.) que vamos a colocar en un servidor, para que sean accesibles a quien quiera visitarlos. Pero debido a que la mayoría de los servidores están basados en sistemas Unix (aunque crecientemente se van utilizando otros sistemas), es muy conveniente, para evitarnos problemas al instalar nuestros ficheros en el servidor, considerar una particularidad referente a los nombres de los ficheros.
En los sistemas más utilizados para confeccionar las páginas del Web (Windows, Mac) es indiferente la utilización de las mayúsculas y minúsculas en los nombres de los achivos. Es decir, es lo mismo Indice.html que INDICE.HTML o que indice.html Pero esto no es así en los sistemas Unix, en donde los ejemplos anteriores se corresponderían a tres nombres distintos.
Si no se tiene esto en cuenta, puede ocurrir, por ejemplo, que una referencia que se haga en un documento HTML al fichero Indice.html resulte en un error de que no existe tal fichero debido a que en realidad se llama indice.html Para evitar estos posibles problemas es muy conveniente tomar estas medidas desde que se comienza la confección de una página del Web:
• Utilizar exclusivamente las minúsculas para nombrar los documentos HTML, y todos aquellos que forman parte de la web (imágenes, sonido, etc).
• Todas las referencias que se hagan dentro de un documento HTML a otros documentos o archivos deben hacerse también siempre en minúsculas.
• Evitar los espacios en los nombres de archivos; usar el guión bajo.
Algunos servidores exigen además de lo anteriormente indicado que los documentos HTML tengan la extensión .html en lugar de la de .htm Si es así, además de nombrar a los archivos con dicha extensión, no olvidarse de hacer las referencias dentro de los documentos también con esta extensión.
ETIQUETAS:
• Para párrafos: se usa la etiqueta <P>, (que en la versión 6 del IE se cierra con </P>, no así en la 5 o anteriores). Deja un espacio entre cada párrafo.
• Para separar un mismo párrafo en varias partes: <BR> sin cerrarla. No deja espacio entre las partes divididas.
• Para obtener varias líneas en blanco, se usan ambas: <BR> <P>, una por cada línea a generar.
• Si se necesita separar palabras con más de un espacio:   sin usar los signos < y >(non-breaking space).
• Cabeceras: <H1> y </H1>, <H2> y </H2>, etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1.
• Centrado: <CENTER> </CENTER> (no la soportan todos los navegadores). Centra todo lo que esté dentro de ella, ya sea texto, imágenes, etc.
• Separadores (horizontal rules): <HR> (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha como la pantalla.
• <HR WIDTH=75%> Ocupa el 75% de su anchura (width) normal.
• <HR WIDTH=300> Tiene una anchura de 300 pixels.
• <HR WIDTH=50% ALIGN=RIGHT> Alinear a la derecha.
• <HR SIZE=20> Para variar su espesor.
• <HR NOSHADE> Para que sea una línea sólida.
• Estilo Negrita: <B> </B> (bold).
• Estilo Cursiva: <I> </I> (italic).
• Superíndice: <SUP> </SUP>
• Subíndice: <SUB> </SUB>
• Listas sin orden (unordered lists): sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Aparecen viñetas sencillas. Su estructura es la siguiente:
<UL>
<LI> Una cosa
<LI> Otra cosa
</UL>
• Listas ordenadas (ordered lists): sirven para presentar cosas en un orden determinado. Su estructura es muy similar a la anterior. Aparecerá un número correlativo para cada cosa.
<OL>
<LI> Primera cosa
<LI> Segunda cosa
</OL>
• Comentarios no visibles en la pantalla: se consiguen encerrando dichos comentarios entre <!-- y -->
• Enlaces (Links): La característica que más ha influido en el éxito del Web ha sido, aparte la de su carácter multimedia, la posibilidad de unir los distintos documentos por medio de enlaces de hipertexto.
En general, los enlaces tienen la siguiente estructura:
<A HREF="xxx"> yyy </A>
Donde:
• xxx es el destino del enlace (Obsérvese las comillas).
• yyy es el marcador, o sea el texto indicativo en la pantalla del enlace (con un color especial y generalmente subrayado)
Vamos a distinguir cuatro tipos de enlaces:
Enlaces dentro de la misma página:
En el caso de documentos muy extensos, nos puede interesar dar un salto desde una posición a otra determinada.
<A HREF="#marca"> YYY </A>
En este caso, el destino del enlace (que sería el sitio dentro de la página a donde queremos saltar) se sustituye por #marca (la palabra marca puede ser cualquier palabra que queramos). Lo que hemos llamado antes YYY es el marcador (palabras subrayadas) que aparecerán en la pantalla.
Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta:
<A NAME="marca"> </A>
Por ejemplo, si quiero saltar desde aquí a la pantalla final, pongo la siguiente etiqueta:
<A HREF="#final"> Pulsa para ir al final</A>
Y en el final del documento he puesto esta otra etiqueta:
<A NAME="final"> </A>
Enlaces con otra página nuestra:
<A HREF="mipag2.html"> Ir a la Página 2 </A>
Estamos suponiendo que la página en la que estamos escribiendo esta etiqueta y la otra página a la que queremos saltar están en el mismo directorio. Si la página a la que queremos saltar está, p. ej. en el subdirectorio subdir, entonces en la etiqueta tendría que haber puesto "subdir/mipag2.html". Y a la inversa, si queremos saltar desde una página a otra que está en un directorio anterior, en la etiqueta tendríamos que haber puesto "../mipag2.html". Esos dos puntos hace que se dirija al directorio anterior.
Enlaces con una página fuera de nuestro sistema:
Es necesario conocer su dirección completa, o URL (Uniform Resource Locutor).
<A HREF="http://www.netscape.com/"> Página inicial de Netscape </A>
Enlaces con una dirección de email:
<A HREF="mailto: dirección de email"> Texto del enlace </A>
Ejemplo:
<A HREF="mailto: [email protected]">Envía un email a Francisco Arocena</A>
Imágenes:
<IMG SRC="imagen.gif"> Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quiere cargar una imagen llamada imagen.gif (o el nombre que tenga). La imagen debe estar en la misma carpeta que la página, sinó se debe usar “/”, como en los enlaces.
Dentro de la etiqueta se pueden añadir otros comandos, tal como ALT, para colocar un texto alternativo (una palabra o una frase breve).
<IMG SRC="imagen.gif" ALT="descripción">
A la imagen se le puede agregar un titular y alinearlo arriba (TOP), en medio (MIDDLE) o abajo (BOTTOM) del lado de la imagen. Para ello se añade el comando ALIGN a la etiqueta, de la siguiente manera:
<IMG SRC="isla.gif" ALIGN=TOP> Titular alineado arriba
Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra página. Aquí al formato del enlace se le anida la imagen, la cual funcionará como marcador del enlace:
<A HREF="mipag2.html"> <IMG SRC="hombre.gif"> </A>
La imagen queda rodeada de un rectágulo del color normal en los enlaces. Para quitarlo, agregar dentro del tag IMG BORDER=0
Fuentes:
Para cambiar la fuente de los textos, se usa <FONT> </FONT> En la etiqueta de apertura, se especifica qué se quiere modificar de dicha fuente (el tamaño, el tipo, el color):
• Tamaño: <FONT SIZE=5> Texto en tamaño 5 </FONT> Los tamaños del texto van, de menor a mayor, del 1 al 7. El tamaño normal es el 3. Se puede cambiar incluso el tamaño base para toda la página, poniendo a continuación de la etiqueta <BODY> <BASEFONT SIZE=5>
• Tipos de las fuentes: <FONT FACE="Verdana"> Este texto se verá con la fuente Verdana</FONT> Los navegadores utilizan por defecto Times New Roman. Quien no tenga la fuente Verdana instalada, por ejemplo, verá el texto en Times New Roman.
• Color: <FONT COLOR="#XXYYZZ"> Texto en color </FONT>
Donde:
• XX es un número indicativo de la cantidad de color rojo
• YY es un número indicativo de la cantidad de color verde
• ZZ es un número indicativo de la cantidad de color azul
Estos números están en hexadecimal. El número menor es el 00 y el mayor el FF. Así, por ejemplo, el color rojo es el #FF0000, porque tiene el máximo de rojo y cero de los otro dos colores .
Los colores primarios son:
o #FF0000 - Rojo
o #00FF00 - Verde
o #0000FF - Azul
Otros colores son:
o #FFFFFF - Blanco
o #000000 - Negro
o #FFFF00 - Amarillo
Fondos:
Se puede cambiar el fondo de dos maneras distintas:
1. Con un color uniforme: <BODY BGCOLOR="#XXYYZZ">
Se pueden elegir los colores del texto y de los enlaces, añadiendo a la etiqueta los siguientes comandos:
<BODY BGCOLOR="#XXYYZZ" TEXT="#XXYYZZ" LINK="#XXYYZZ" VLINK="#XXYYZZ" ALINK="#XXYYZZ">
Donde:
TEXT - color del texto
LINK - color de los enlaces
VLINK - color de los enlaces visitados
ALINK - color de los enlaces activos (el que adquieren en el momento de ser pulsados)
2. Con una imagen: <BODY BACKGROUND="imagen.gif">
Se pueden combinar ambos; si la imagen no se puede cargar, toma el color de fondo:
<BODY BACKGROUND="nubes.jpg" BGCOLOR="#CCFFFF">
Alineación y dimensionado de imágenes:
1. Para alinearla: <IMG SRC="doom.gif" ALIGN=RIGHT>
2. Para cambiar su tamaño en ambas dimensiones: <IMG SRC="isla.gif" WIDTH=120 HEIGHT=94> Se corre el riesgo de deformar la imagen. Para que esto no ocurra y se respeten sus proporciones, solamente se debe usar uno de ellos: o WIDTH, o HEIGHT. La otra dimensión se ajusta a la que fue modificada.
Tablas:
La etiqueta general, que engloba a todas las demás es <TABLE> y </TABLE>. Es decir:
<TABLE>
[resto de las etiquetas]
</TABLE>
Para ver los bordes:
<TABLE BORDER>
[resto de las etiquetas]
</TABLE>
Para formar cada fila (row) de la tabla, se usa <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla.
<TR>
[etiquetas de las distintas celdas de la primera fila]
</TR>
En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son <TD> y </TD>, que engloban el contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces como celdas queremos que haya en esa fila.
<TD> celda1</TD>
<TD>celda2</TD>
Ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas. Dentro de cada celda vamos a poner un texto indicativo de la posición de dicha celda:
<TABLE BORDER>
<TR>
<TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD>
</TR>
</TABLE>
Se puede añadir un titular (caption) a la tabla:
<CAPTION> Titular de Tabla </CAPTION>
El atributo BORDER pone por defecto un borde de espesor igual a la unidad. Pero se puede hacer que este borde sea tan grueso como queramos, poniendo:
<TABLE BORDER=5>
Normalmente, el contenido de una celda está alineado a la izquierda. Pero se puede cambiar:
<TD ALIGN=CENTER> Al centro </TD> <TD ALIGN=RIGHT> A la derecha </TD>
El alineamiento por defecto en el sentido vertical es en el medio. También se puede cambiar:
<TD VALIGN=TOP> Arriba </TD> <TD VALIGN=BOTTOM> Abajo </TD>
o Para cambiar el ancho y el alto de la tabla:
<TABLE WIDTH=60%> <TABLE HEIGHT=200>
Como se ve, se puede usar el % que va a ocupar con respecto al ancho de la pantalla, o una medida en pixels.
o Color de fondo en toda la tabla:
<TABLE BGCOLOR="#00FF00">
o Color de fondo en una celda:
<TD BGCOLOR="#00FF00"> celda1</TD>
o Imágenes de fondo en las tablas:
<TABLE BACKGROUND="nubes.jpg">
o Separación entre las celdas de una tabla:
<TABLE BORDER CELLSPACING=20>
o Separación entre el borde y el contenido dentro de las celdas: <TABLE BORDER CELLPADDING=20>
Sonidos:
Una página del Web puede tener sonidos incorporados, bien sea como un fondo sonoro que se ejecuta automáticamente al cargar la página, o como una opción para que la active el propio usuario.
Fondo sonoro: <BGSOUND SRC="fichero_de_sonido" LOOP=n>
El archivo de sonido puede estar en formato .mid o .wav. LOOP sirve para especificar el número (n) de veces que se debe ejecutar el archivo Si se escoje el número n=-1 o se pone LOOP=infinite, el sonido se ejecutará indefinidamente. Se puede omitir este atributo, y entonces el fichero se ejecutará una sola vez.
Activación del sonido por el propio usuario: Consiste en poner un enlace a un archivo de sonido, de tal manera, que al pulsarlo se ejecute.
Ejemplo:
Escucha esta <A HREF="prv89.mid">musica</A>
Al pulsar el enlace se activa, en una ventana aparte, el programa que ejecuta el sonido.
• Para ejecutar videos y animaciones:
<EMBED SRC=”archivo.avi”> </EMBED>
Marquesinas (Marquees):
Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto. La etiqueta básica es:
<MARQUEE> Texto que se desplaza </MARQUEE>
En este caso el comportamiento de la marquesina es el que tiene por defecto: ocupa todo el ancho de la pantalla, tiene la altura de una línea y el texto se desplaza lentamente de derecha a izquierda.
Para ajustar la anchura y altura:
<MARQUEE WIDTH=50% HEIGHT=60> Cambiamos el ancho y el alto </MARQUEE>
Para cambiar la alineación del texto: Se coloca ALIGN seguido de TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo).
Ejemplo:
<MARQUEE WIDTH=50% HEIGHT=60 ALIGN=BOTTOM>¡Hola! </MARQUEE>
BEHAVIOR (Comportamiento): Sirve para definir de cómo se va a efectuar el desplazmiento del texto. Si es igual a SLIDE, aparece por un lado y se desplaza hasta llegar al otro extremo, y se para ahí. Si es igual a ALTERNATE se desplaza alternativamente hacia un lado y otro, siempre dentro de los límites de la marquesina.
Ejemplo:
<MARQUEE BEHAVIOR=ALTERNATE>Este texto rebota</MARQUEE>
Para cambiarle el color de fondo:
<MARQUEE BGCOLOR="#FF7070"> Esta marquesina tiene un fondo de color rosa </MARQUEE>
Para modificar la dirección del texto:
<MARQUEE DIRECTION=RIGHT> Este texto se dirije hacia la derecha</MARQUEE>
Para definir la cantidad de desplazamiento del texto en cada movimiento de avance:
<MARQUEE SCROLLAMOUNT=50> Doy saltos grandes </MARQUEE>
Para definir el tiempo entre cada movimiento de avance (en milisegundos):
<MARQUEE SCROLLDELAY =200> Espero mucho entre cada salto </MARQUEE>
Cuanto mayor es el número más lento avanza.
Formularios:
Permiten que los demás nos envíen la información directamente a nosotros o bien a nuestro servidor, en donde hemos instalado un programa que procese esta información. Constituyen la forma de comunicación entre los usuarios y los webmasters.
Existen dos formas: por medio de un enlace a nuestra dirección de email, con lo que recibiríamos un email con los datos ingresados en texto plano (la forma más fácil). La otra posibilidad es que hubiéramos instalado en nuestro servidor un programa especial para procesar esos datos, y que incluso pudiera devolver automáticamente al usuario algún tipo de información. Para conseguir esto, los formularios necesitan ejecutar programas o scripts por medio del CGI (Common Gateway Interface).
El CGI permite a los formularios ser procesados por programas escritos en cualquier lenguaje, aunque los más usados en Internet son ASP, PHP, PERL y C.
Estructura de un formulario:
1. Etiqueta de inicio:
<FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Donde:
o ACTION indica la acción que se debe efectuar y que es que los datos sean enviados por email a la dirección indicada (Si usáramos CGI, indicaríamos su localización en el servidor, que habitualmente es el directorio cgi-bin).
o METHOD=POST indica que los datos serán enviados por correo a la dirección de email, nada más pulsar el botón de envío.
o ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las recibamos como un archivo de texto, perfectamente legible y sin codificar.
2. Cuerpo del formulario, con los distintos elementos para poder introducir los datos.
Elementos para introducir los datos:
Los datos se ingresan por medio de la etiqueta: <INPUT TYPE="xxx" NAME="yyy" VALUE="zzz">
Donde:
o xxx es la palabra que indica el tipo de introducción.
o yyy es el nombre que le asignamos nosotros a la variable de introducción del dato.
o zzz es la palabra asociada a un elemento.
Introducción por medio de texto (una línea): Acá xxx=text. El atributo VALUE aquí no se usa.
Escribe tu apellido: <INPUT TYPE="text" NAME="Apellido">
Por defecto el cuadro de texto que aparece posee una longitud de 20 caracteres. Se puede variar incluyendo en la etiqueta el atributo SIZE="número".
El usuario puede introducir el número de caracteres que quiera. Se puede limitar esto, incluyendo en la etiqueta el atributo MAXLENGTH="número".
<INPUT TYPE="text" NAME="Apellido" SIZE="10" MAXLENGTH="12">
También se puede hacer que el texto introducido no sea reconocible, es decir que todos los caracteres se representen por asteriscos.
<INPUT TYPE="password" NAME="Apellido" SIZE="10" MAXLENGTH="12">
Introducción por medio de texto (múltiples líneas)
Escribe tus comentarios: <br>
<TEXTAREA NAME="yyy" ROWS="número" COLS="número"> </TEXTAREA>
Introducción por medio de menús: Para que el usuario elija entre varias opciones que le presentamos nosotros.
¿Cuál es tu color preferido? <BR>
<SELECT NAME="ColorPreferido">
<OPTION>Rojo
<OPTION>Verde
<OPTION>Azul
<OPTION>Amarillo
</SELECT>
Casillas de confirmación (checkbox): Para que el usuario confirme una opción determinada.
<INPUT TYPE="checkbox" NAME="Lista"> Sí, deseo ser incluido en la lista de correo.
Si queremos que la casilla aparezca inicialmente checkeada se debe agregar el atributo CHECKED dentro de la etiqueta. <INPUT TYPE="checkbox" NAME="Lista" CHECKED>
Botones de radio: Para que el usuario elija una única opción entre varias,
¿Cuál es tu sistema operativo preferido? <BR>
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="PC" CHECKED> PC
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Mac"> Mac
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Unix"> Unix
Tener en cuenta que el nombre de todos los botones debe ser el mismo, para que puedan trabajar en conjunto.
3. Botones de envío y de borrado.
Botón de envío de los datos: <INPUT TYPE="submit" VALUE="Enviar datos">
Botón de borrado de los datos: <INPUT TYPE="reset" VALUE="Borrar datos">
4. Etiqueta de cierre </FORM>
• Frames (Marcos)
Es un procedimiento del lenguaje HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de páginas diferentes, pues incluso cada una de ellas pueden tener sus propias barras deslizadoras. Una de sus características más
importantes es que pulsando un enlace situado en un frame, se puede cargar en otro frame una página determinada. Esto se utiliza frecuentemente para tener un frame estrecho en la parte lateral (o superior) con un índice del contenido en forma de diferentes enlaces, que, al ser pulsados cargan en la ventana principal las distintas páginas. De esta manera se facilita la navegación entre las páginas, pues aunque se vaya pasando de unas a otras, siempre estará a la vista el índice del conjunto.
Documento de definición de los frames
Lo primero que tenemos que hacer es crear un documento HTML en el que definiremos cuántas zonas va a haber, qué distribución y tamaño van a tener, y cuál va ser el contenido de cada una de ellas. En el ejemplo que vamos a desarrollar, la página va a tener dos frames distribuidos en columnas (es decir, uno al lado del otro, en vez de uno encima del otro, lo que sería una distribución en filas). Con respecto al tamaño, haremos que el primero (el del izquierda) ocupe el 20% del ancho de la pantalla, y el otro, el 80% restante. Y con respecto al contenido, el frame de la izquierda va a contener un documento HTML que va a servir de índice de lo que veamos en el otro (y que vamos a llamar mipagind.html), y el de la derecha otro documento HTML que va a servir de página de presentación (al que llamaremos mipagpre.html).
Todo lo anterior se refleja en el siguiente documento HTML:
<HTML>
<HEAD>
<TITLE>Mi pagina con frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="mipagind.html">
<FRAME SRC="mipagpre.html" NAME="principal">
</FRAMESET>
</HTML>
En vez de utilizar la etiqueta BODY, que sirve para delimitar lo que se va a ver en la pantalla, se hace uso de la etiqueta FRAMESET (definir los frames). En este caso, con la etiqueta <FRAMESET COLS="20%, 80%"> se define que va a haber dos frames y que van a ir en columnas. Si hubiéramos querido que fueran en filas, habríamos puesto ROWS (filas, en inglés). También se define el espacio en anchura que van a ocupar cada uno de ellos en la pantalla. Se ha puesto como porcentajes del total, pero se podría también haber puesto una cifra absoluta, que representaría el número de pixels a ocupar.
Ya se ha definido el número de frames, su distribución y su tamaño, pero falta por definir el contenido de cada frame. Esto se hizo con las etiquetas:
<FRAME SRC="mipagind.html">
<FRAME SRC="mipagpre.html" NAME="principal">
El contenido del primer frame (el de la izquierda) será el documento mipagind.html y el del segundo (el de la derecha) será el documento mipagpre.html.
En la etiqueta del segundo se ha incluido el atributo NAME="principal", pero no así en el primero. El motivo es que se necesita dar un nombre al segundo frame, pues, como veremos a continuación, en el documento del primer frame va a haber unos enlaces que van a ir dirigidos hacia él. En este caso sólo tenemos dos frames, pero podría haber más, y es necesario distinguirlos unos de otros. Y el primero no necesita nombre, pues no va a haber enlaces en el segundo dirigidos hacia él.
A este documento le vamos a llamar mipagina.html, pero todavía no lo vamos a guardar, pues falta por añadir algo que veremos más adelante.
Documentos HTML de cada frame
Necesitamos ahora confeccionar el documento HTML de cada uno de los frames. Recuérdese que son como páginas independientes, que pueden tener cada una su propio fondo, etc., y todo lo que queramos añadir en ellos y que hemos aprendido hasta ahora.
Documento del frame de la izquierda: Va a tener un fondo amarillo, y va a contener dos enlaces dirigidos al frame de la derecha. Además, como muestra de que se puede añadir cualquier cosa en un frame, vamos a incluir este logo animado (glogoan2.gif):
<HTML>
<HEAD>
<TITLE> Indice </TITLE>
</HEAD>
<BODY BGCOLOR="#FFBB00">
<P><A HREF="mipagpre.html" TARGET="principal"> Presentación </A>
<P><A HREF="mipag13.html" TARGET="principal"> Mi página </A>
<P><IMG SRC="glogoan2.gif">
</BODY>
</HTML>
Dentro de las etiquetas de los enlaces podemos observar algo nuevo, y es el atributo TARGET (en inglés: destino), que sirve para hacer que al ser activado el enlace no se cargue en el propio frame, sino en otro, precisamente en el que hayamos llamado con ese nombre en el documento de definición de los frames. En nuestro caso, le hemos dado el nombre de "principal" al frame de la derecha, y es por tanto ahí donde se van a cargar los documentos HTML.
Guardamos este documento con el nombre de mipagind.html. Además, capturamos la imagen glogoan2.gif, y la guardamos junto con el documento.
Documento del frame de la derecha: Va a tener un fondo negro, y va a contener solamente un texto.
<HTML>
<HEAD>
<TITLE> Presentacion </TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#0000FF">
<CENTER>
<FONT SIZE=3>
<P>ESTA ES LA VERSION
<BR><FONT COLOR="#FF0000">CON FRAMES</FONT>
<BR>DE MI PAGINA
</FONT>
</CENTER>
</BODY>
</HTML>
Guardamos este documento con el nombre de mipagpre.html
¿Qué ocurriría con los navegadores que no soportan los frames? Al desconocer las etiquetas FRAMESET y FRAME del documento de definición, no podría ejecutarlo y no podría cargar la página. Para estos casos está prevista la etiqueta <NOFRAMES> y </NOFRAMES>. Se añaden al final del documento de definición de los frames, y se pone entre ambas lo que queremos que vean los que acceden con un navegador que no soporta frames. Puede incluso ser el código HTML de una página completa (lo que normalmente va entre las etiquetas <BODY> y </BODY>.)
<NOFRAMES>
Estas utilizando un navegador que no soporta frames.
<P>Pulsa para visitar mi <A HREF="mipag13.html"> página</A>.
</NOFRAMES>
Frames sin bordes: Se deben incluir el atributo FRAMEBORDER=0 dentro de la etiqueta FRAMESET. No todas las versiones de los navegadores lo implementan.
Para que también desaparezcan los huecos de separación entre frames hay que añadir otros dos atributos (el primero es para el Explorer y el segundo para el Netscape): FRAMESPACING=0 y BORDER=0. con lo que la etiqueta completa quedaría:
<FRAMESET FRAMEBORDER=0 FRAMESPACING=0 BORDER=0 COLS="xx, yy">
Atributos de la etiqueta </FRAME>
o SRC="dirección". Esta dirección puede ser la de un documento HTML o cualquier otro recurso del Web (o URL). Con este atributo se indica lo que se cargará inicialmente en el frame. Si no se le pone este atributo, el frame aparecerá vacío, aunque tendrá las dimensiones asignadas.
o NAME="nombre_de_la_ventana". Se usa para asignar un nombre a un frame. De esta manera se podrá "dar en el blanco" (en inglés, target) en esta página, desde un enlace situado en otra página. Es decir, que pulsando en otra página un enlace, se cargará en ésta, tal como hemos
visto en el ejemplo. Este atributo es opcional. Por defecto, todas las ventanas carecen de nombre. Los nombres que se escojan deben comenzar por un carácter alfanumérico (una letra o un número).
o MARGINWIDTH="número". Se utiliza cuando se quiere controlar el ancho de los márgenes dentro de un frame. El número representa los pixels de los márgenes. Este atributo es opcional.
o MARGINHEIGHT="número". Igual que el anterior, pero referido a los márgenes en altura.
o SCROLLING="yes|no|auto". Se utiliza para decidir si el frame tendrá o no una barra de desplazamiento. Si se elije "auto", será el navegador quien decida si la tendrá o no. Este atributo es opcional. Su valor por defecto es "auto".
o NORESIZE. Es un indicador para que la ventana no se pueda re-dimensionar por parte del usuario. Es un atributo opcional. Por defecto, todos los frames son re-dimensionables.
o FRAMEBORDER="no". Elimina el borde en un frame, pero si se quiere que se elimine completamente, también hay que ponérselo al frame contiguo. Si se quiere eliminar los bordes de todos los frames, se debe colocar en la etiqueta FRAMESET, como hemos visto anteriormente.
El atributo TARGET
En el ejemplo hemos visto que, como queríamos que los enlaces situados en el frame de la izquierda surtieran efecto no en él mismo, sino en otro frame, teníamos que poner dentro de cada enlace el atributo TARGET="principal", siendo "principal" el nombre que habíamos dado al segundo frame, en el documento de definición de frames. Es decir, hemos utilizado este atributo de esta manera:
TARGET="nombre_dado_a_otro_frame".
Los nombres los ponemos nosotros. Pero hay unos nombres reservados (es decir, que no se pueden usar para denominar a un frame), que hacen que este atributo efectúe unas funciones especiales.
o TARGET="_blank". Hace que se abra una nueva copia del navegador, y el enlace activado se carga en ella, a pantalla completa. Es decir, tendríamos dos copias del navegador (Netscape, Explorer, etc.) funcionando a la vez.
o TARGET="_self". Hace que el enlace se cargue en el propio frame.
o TARGET="_top". Hace que el enlace se cargue a pantalla completa, suprimiendo todos los frames, pero sin que se cargue una nueva copia del navegador. Este es particularmente útil.
El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags). Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Todo el documento HTML debe estar entre las etiquetas
<HTML> y </HTML>:
<HTML> [Todo el documento] </HTML>
El documento en sí está dividido en dos zonas principales:
• El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>. Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal, como el título del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás cuando agreguen nuestra página a sus favoritos, por ejemplo.
• El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>. Dentro del cuerpo están todos los elementos que queremos que aparezca en la página (texto, imágenes, etc.)
Por tanto, la estructura queda de esta manera:
<HTML>
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY>
[Aquí van las etiquetas que visualizan la página]
</BODY>
</HTML>
Lo mínimo que se necesita para crear y ejecutar un documento HTML es un editor de texto (como el block de notas) y un explorador web (como el IE). No olvidar que al guardar el archivo en el editor, su extensión debe ser .HTM o .HTML.
Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla se acomoda a ella, sin que tengamos que pulsar Enter.
Nombres de los Archivos:
Un sitio del Web es en realidad un conjunto de archivos, bien sea de texto (los documentos HTML), bien sea binarios (imágenes, sonidos, etc.) que vamos a colocar en un servidor, para que sean accesibles a quien quiera visitarlos. Pero debido a que la mayoría de los servidores están basados en sistemas Unix (aunque crecientemente se van utilizando otros sistemas), es muy conveniente, para evitarnos problemas al instalar nuestros ficheros en el servidor, considerar una particularidad referente a los nombres de los ficheros.
En los sistemas más utilizados para confeccionar las páginas del Web (Windows, Mac) es indiferente la utilización de las mayúsculas y minúsculas en los nombres de los achivos. Es decir, es lo mismo Indice.html que INDICE.HTML o que indice.html Pero esto no es así en los sistemas Unix, en donde los ejemplos anteriores se corresponderían a tres nombres distintos.
Si no se tiene esto en cuenta, puede ocurrir, por ejemplo, que una referencia que se haga en un documento HTML al fichero Indice.html resulte en un error de que no existe tal fichero debido a que en realidad se llama indice.html Para evitar estos posibles problemas es muy conveniente tomar estas medidas desde que se comienza la confección de una página del Web:
• Utilizar exclusivamente las minúsculas para nombrar los documentos HTML, y todos aquellos que forman parte de la web (imágenes, sonido, etc).
• Todas las referencias que se hagan dentro de un documento HTML a otros documentos o archivos deben hacerse también siempre en minúsculas.
• Evitar los espacios en los nombres de archivos; usar el guión bajo.
Algunos servidores exigen además de lo anteriormente indicado que los documentos HTML tengan la extensión .html en lugar de la de .htm Si es así, además de nombrar a los archivos con dicha extensión, no olvidarse de hacer las referencias dentro de los documentos también con esta extensión.
ETIQUETAS:
• Para párrafos: se usa la etiqueta <P>, (que en la versión 6 del IE se cierra con </P>, no así en la 5 o anteriores). Deja un espacio entre cada párrafo.
• Para separar un mismo párrafo en varias partes: <BR> sin cerrarla. No deja espacio entre las partes divididas.
• Para obtener varias líneas en blanco, se usan ambas: <BR> <P>, una por cada línea a generar.
• Si se necesita separar palabras con más de un espacio:   sin usar los signos < y >(non-breaking space).
• Cabeceras: <H1> y </H1>, <H2> y </H2>, etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1.
• Centrado: <CENTER> </CENTER> (no la soportan todos los navegadores). Centra todo lo que esté dentro de ella, ya sea texto, imágenes, etc.
• Separadores (horizontal rules): <HR> (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha como la pantalla.
• <HR WIDTH=75%> Ocupa el 75% de su anchura (width) normal.
• <HR WIDTH=300> Tiene una anchura de 300 pixels.
• <HR WIDTH=50% ALIGN=RIGHT> Alinear a la derecha.
• <HR SIZE=20> Para variar su espesor.
• <HR NOSHADE> Para que sea una línea sólida.
• Estilo Negrita: <B> </B> (bold).
• Estilo Cursiva: <I> </I> (italic).
• Superíndice: <SUP> </SUP>
• Subíndice: <SUB> </SUB>
• Listas sin orden (unordered lists): sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Aparecen viñetas sencillas. Su estructura es la siguiente:
<UL>
<LI> Una cosa
<LI> Otra cosa
</UL>
• Listas ordenadas (ordered lists): sirven para presentar cosas en un orden determinado. Su estructura es muy similar a la anterior. Aparecerá un número correlativo para cada cosa.
<OL>
<LI> Primera cosa
<LI> Segunda cosa
</OL>
• Comentarios no visibles en la pantalla: se consiguen encerrando dichos comentarios entre <!-- y -->
• Enlaces (Links): La característica que más ha influido en el éxito del Web ha sido, aparte la de su carácter multimedia, la posibilidad de unir los distintos documentos por medio de enlaces de hipertexto.
En general, los enlaces tienen la siguiente estructura:
<A HREF="xxx"> yyy </A>
Donde:
• xxx es el destino del enlace (Obsérvese las comillas).
• yyy es el marcador, o sea el texto indicativo en la pantalla del enlace (con un color especial y generalmente subrayado)
Vamos a distinguir cuatro tipos de enlaces:
Enlaces dentro de la misma página:
En el caso de documentos muy extensos, nos puede interesar dar un salto desde una posición a otra determinada.
<A HREF="#marca"> YYY </A>
En este caso, el destino del enlace (que sería el sitio dentro de la página a donde queremos saltar) se sustituye por #marca (la palabra marca puede ser cualquier palabra que queramos). Lo que hemos llamado antes YYY es el marcador (palabras subrayadas) que aparecerán en la pantalla.
Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta:
<A NAME="marca"> </A>
Por ejemplo, si quiero saltar desde aquí a la pantalla final, pongo la siguiente etiqueta:
<A HREF="#final"> Pulsa para ir al final</A>
Y en el final del documento he puesto esta otra etiqueta:
<A NAME="final"> </A>
Enlaces con otra página nuestra:
<A HREF="mipag2.html"> Ir a la Página 2 </A>
Estamos suponiendo que la página en la que estamos escribiendo esta etiqueta y la otra página a la que queremos saltar están en el mismo directorio. Si la página a la que queremos saltar está, p. ej. en el subdirectorio subdir, entonces en la etiqueta tendría que haber puesto "subdir/mipag2.html". Y a la inversa, si queremos saltar desde una página a otra que está en un directorio anterior, en la etiqueta tendríamos que haber puesto "../mipag2.html". Esos dos puntos hace que se dirija al directorio anterior.
Enlaces con una página fuera de nuestro sistema:
Es necesario conocer su dirección completa, o URL (Uniform Resource Locutor).
<A HREF="http://www.netscape.com/"> Página inicial de Netscape </A>
Enlaces con una dirección de email:
<A HREF="mailto: dirección de email"> Texto del enlace </A>
Ejemplo:
<A HREF="mailto: [email protected]">Envía un email a Francisco Arocena</A>
Imágenes:
<IMG SRC="imagen.gif"> Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quiere cargar una imagen llamada imagen.gif (o el nombre que tenga). La imagen debe estar en la misma carpeta que la página, sinó se debe usar “/”, como en los enlaces.
Dentro de la etiqueta se pueden añadir otros comandos, tal como ALT, para colocar un texto alternativo (una palabra o una frase breve).
<IMG SRC="imagen.gif" ALT="descripción">
A la imagen se le puede agregar un titular y alinearlo arriba (TOP), en medio (MIDDLE) o abajo (BOTTOM) del lado de la imagen. Para ello se añade el comando ALIGN a la etiqueta, de la siguiente manera:
<IMG SRC="isla.gif" ALIGN=TOP> Titular alineado arriba
Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra página. Aquí al formato del enlace se le anida la imagen, la cual funcionará como marcador del enlace:
<A HREF="mipag2.html"> <IMG SRC="hombre.gif"> </A>
La imagen queda rodeada de un rectágulo del color normal en los enlaces. Para quitarlo, agregar dentro del tag IMG BORDER=0
Fuentes:
Para cambiar la fuente de los textos, se usa <FONT> </FONT> En la etiqueta de apertura, se especifica qué se quiere modificar de dicha fuente (el tamaño, el tipo, el color):
• Tamaño: <FONT SIZE=5> Texto en tamaño 5 </FONT> Los tamaños del texto van, de menor a mayor, del 1 al 7. El tamaño normal es el 3. Se puede cambiar incluso el tamaño base para toda la página, poniendo a continuación de la etiqueta <BODY> <BASEFONT SIZE=5>
• Tipos de las fuentes: <FONT FACE="Verdana"> Este texto se verá con la fuente Verdana</FONT> Los navegadores utilizan por defecto Times New Roman. Quien no tenga la fuente Verdana instalada, por ejemplo, verá el texto en Times New Roman.
• Color: <FONT COLOR="#XXYYZZ"> Texto en color </FONT>
Donde:
• XX es un número indicativo de la cantidad de color rojo
• YY es un número indicativo de la cantidad de color verde
• ZZ es un número indicativo de la cantidad de color azul
Estos números están en hexadecimal. El número menor es el 00 y el mayor el FF. Así, por ejemplo, el color rojo es el #FF0000, porque tiene el máximo de rojo y cero de los otro dos colores .
Los colores primarios son:
o #FF0000 - Rojo
o #00FF00 - Verde
o #0000FF - Azul
Otros colores son:
o #FFFFFF - Blanco
o #000000 - Negro
o #FFFF00 - Amarillo
Fondos:
Se puede cambiar el fondo de dos maneras distintas:
1. Con un color uniforme: <BODY BGCOLOR="#XXYYZZ">
Se pueden elegir los colores del texto y de los enlaces, añadiendo a la etiqueta los siguientes comandos:
<BODY BGCOLOR="#XXYYZZ" TEXT="#XXYYZZ" LINK="#XXYYZZ" VLINK="#XXYYZZ" ALINK="#XXYYZZ">
Donde:
TEXT - color del texto
LINK - color de los enlaces
VLINK - color de los enlaces visitados
ALINK - color de los enlaces activos (el que adquieren en el momento de ser pulsados)
2. Con una imagen: <BODY BACKGROUND="imagen.gif">
Se pueden combinar ambos; si la imagen no se puede cargar, toma el color de fondo:
<BODY BACKGROUND="nubes.jpg" BGCOLOR="#CCFFFF">
Alineación y dimensionado de imágenes:
1. Para alinearla: <IMG SRC="doom.gif" ALIGN=RIGHT>
2. Para cambiar su tamaño en ambas dimensiones: <IMG SRC="isla.gif" WIDTH=120 HEIGHT=94> Se corre el riesgo de deformar la imagen. Para que esto no ocurra y se respeten sus proporciones, solamente se debe usar uno de ellos: o WIDTH, o HEIGHT. La otra dimensión se ajusta a la que fue modificada.
Tablas:
La etiqueta general, que engloba a todas las demás es <TABLE> y </TABLE>. Es decir:
<TABLE>
[resto de las etiquetas]
</TABLE>
Para ver los bordes:
<TABLE BORDER>
[resto de las etiquetas]
</TABLE>
Para formar cada fila (row) de la tabla, se usa <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla.
<TR>
[etiquetas de las distintas celdas de la primera fila]
</TR>
En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son <TD> y </TD>, que engloban el contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces como celdas queremos que haya en esa fila.
<TD> celda1</TD>
<TD>celda2</TD>
Ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas. Dentro de cada celda vamos a poner un texto indicativo de la posición de dicha celda:
<TABLE BORDER>
<TR>
<TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD>
</TR>
</TABLE>
Se puede añadir un titular (caption) a la tabla:
<CAPTION> Titular de Tabla </CAPTION>
El atributo BORDER pone por defecto un borde de espesor igual a la unidad. Pero se puede hacer que este borde sea tan grueso como queramos, poniendo:
<TABLE BORDER=5>
Normalmente, el contenido de una celda está alineado a la izquierda. Pero se puede cambiar:
<TD ALIGN=CENTER> Al centro </TD> <TD ALIGN=RIGHT> A la derecha </TD>
El alineamiento por defecto en el sentido vertical es en el medio. También se puede cambiar:
<TD VALIGN=TOP> Arriba </TD> <TD VALIGN=BOTTOM> Abajo </TD>
o Para cambiar el ancho y el alto de la tabla:
<TABLE WIDTH=60%> <TABLE HEIGHT=200>
Como se ve, se puede usar el % que va a ocupar con respecto al ancho de la pantalla, o una medida en pixels.
o Color de fondo en toda la tabla:
<TABLE BGCOLOR="#00FF00">
o Color de fondo en una celda:
<TD BGCOLOR="#00FF00"> celda1</TD>
o Imágenes de fondo en las tablas:
<TABLE BACKGROUND="nubes.jpg">
o Separación entre las celdas de una tabla:
<TABLE BORDER CELLSPACING=20>
o Separación entre el borde y el contenido dentro de las celdas: <TABLE BORDER CELLPADDING=20>
Sonidos:
Una página del Web puede tener sonidos incorporados, bien sea como un fondo sonoro que se ejecuta automáticamente al cargar la página, o como una opción para que la active el propio usuario.
Fondo sonoro: <BGSOUND SRC="fichero_de_sonido" LOOP=n>
El archivo de sonido puede estar en formato .mid o .wav. LOOP sirve para especificar el número (n) de veces que se debe ejecutar el archivo Si se escoje el número n=-1 o se pone LOOP=infinite, el sonido se ejecutará indefinidamente. Se puede omitir este atributo, y entonces el fichero se ejecutará una sola vez.
Activación del sonido por el propio usuario: Consiste en poner un enlace a un archivo de sonido, de tal manera, que al pulsarlo se ejecute.
Ejemplo:
Escucha esta <A HREF="prv89.mid">musica</A>
Al pulsar el enlace se activa, en una ventana aparte, el programa que ejecuta el sonido.
• Para ejecutar videos y animaciones:
<EMBED SRC=”archivo.avi”> </EMBED>
Marquesinas (Marquees):
Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto. La etiqueta básica es:
<MARQUEE> Texto que se desplaza </MARQUEE>
En este caso el comportamiento de la marquesina es el que tiene por defecto: ocupa todo el ancho de la pantalla, tiene la altura de una línea y el texto se desplaza lentamente de derecha a izquierda.
Para ajustar la anchura y altura:
<MARQUEE WIDTH=50% HEIGHT=60> Cambiamos el ancho y el alto </MARQUEE>
Para cambiar la alineación del texto: Se coloca ALIGN seguido de TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo).
Ejemplo:
<MARQUEE WIDTH=50% HEIGHT=60 ALIGN=BOTTOM>¡Hola! </MARQUEE>
BEHAVIOR (Comportamiento): Sirve para definir de cómo se va a efectuar el desplazmiento del texto. Si es igual a SLIDE, aparece por un lado y se desplaza hasta llegar al otro extremo, y se para ahí. Si es igual a ALTERNATE se desplaza alternativamente hacia un lado y otro, siempre dentro de los límites de la marquesina.
Ejemplo:
<MARQUEE BEHAVIOR=ALTERNATE>Este texto rebota</MARQUEE>
Para cambiarle el color de fondo:
<MARQUEE BGCOLOR="#FF7070"> Esta marquesina tiene un fondo de color rosa </MARQUEE>
Para modificar la dirección del texto:
<MARQUEE DIRECTION=RIGHT> Este texto se dirije hacia la derecha</MARQUEE>
Para definir la cantidad de desplazamiento del texto en cada movimiento de avance:
<MARQUEE SCROLLAMOUNT=50> Doy saltos grandes </MARQUEE>
Para definir el tiempo entre cada movimiento de avance (en milisegundos):
<MARQUEE SCROLLDELAY =200> Espero mucho entre cada salto </MARQUEE>
Cuanto mayor es el número más lento avanza.
Formularios:
Permiten que los demás nos envíen la información directamente a nosotros o bien a nuestro servidor, en donde hemos instalado un programa que procese esta información. Constituyen la forma de comunicación entre los usuarios y los webmasters.
Existen dos formas: por medio de un enlace a nuestra dirección de email, con lo que recibiríamos un email con los datos ingresados en texto plano (la forma más fácil). La otra posibilidad es que hubiéramos instalado en nuestro servidor un programa especial para procesar esos datos, y que incluso pudiera devolver automáticamente al usuario algún tipo de información. Para conseguir esto, los formularios necesitan ejecutar programas o scripts por medio del CGI (Common Gateway Interface).
El CGI permite a los formularios ser procesados por programas escritos en cualquier lenguaje, aunque los más usados en Internet son ASP, PHP, PERL y C.
Estructura de un formulario:
1. Etiqueta de inicio:
<FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Donde:
o ACTION indica la acción que se debe efectuar y que es que los datos sean enviados por email a la dirección indicada (Si usáramos CGI, indicaríamos su localización en el servidor, que habitualmente es el directorio cgi-bin).
o METHOD=POST indica que los datos serán enviados por correo a la dirección de email, nada más pulsar el botón de envío.
o ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las recibamos como un archivo de texto, perfectamente legible y sin codificar.
2. Cuerpo del formulario, con los distintos elementos para poder introducir los datos.
Elementos para introducir los datos:
Los datos se ingresan por medio de la etiqueta: <INPUT TYPE="xxx" NAME="yyy" VALUE="zzz">
Donde:
o xxx es la palabra que indica el tipo de introducción.
o yyy es el nombre que le asignamos nosotros a la variable de introducción del dato.
o zzz es la palabra asociada a un elemento.
Introducción por medio de texto (una línea): Acá xxx=text. El atributo VALUE aquí no se usa.
Escribe tu apellido: <INPUT TYPE="text" NAME="Apellido">
Por defecto el cuadro de texto que aparece posee una longitud de 20 caracteres. Se puede variar incluyendo en la etiqueta el atributo SIZE="número".
El usuario puede introducir el número de caracteres que quiera. Se puede limitar esto, incluyendo en la etiqueta el atributo MAXLENGTH="número".
<INPUT TYPE="text" NAME="Apellido" SIZE="10" MAXLENGTH="12">
También se puede hacer que el texto introducido no sea reconocible, es decir que todos los caracteres se representen por asteriscos.
<INPUT TYPE="password" NAME="Apellido" SIZE="10" MAXLENGTH="12">
Introducción por medio de texto (múltiples líneas)
Escribe tus comentarios: <br>
<TEXTAREA NAME="yyy" ROWS="número" COLS="número"> </TEXTAREA>
Introducción por medio de menús: Para que el usuario elija entre varias opciones que le presentamos nosotros.
¿Cuál es tu color preferido? <BR>
<SELECT NAME="ColorPreferido">
<OPTION>Rojo
<OPTION>Verde
<OPTION>Azul
<OPTION>Amarillo
</SELECT>
Casillas de confirmación (checkbox): Para que el usuario confirme una opción determinada.
<INPUT TYPE="checkbox" NAME="Lista"> Sí, deseo ser incluido en la lista de correo.
Si queremos que la casilla aparezca inicialmente checkeada se debe agregar el atributo CHECKED dentro de la etiqueta. <INPUT TYPE="checkbox" NAME="Lista" CHECKED>
Botones de radio: Para que el usuario elija una única opción entre varias,
¿Cuál es tu sistema operativo preferido? <BR>
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="PC" CHECKED> PC
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Mac"> Mac
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Unix"> Unix
Tener en cuenta que el nombre de todos los botones debe ser el mismo, para que puedan trabajar en conjunto.
3. Botones de envío y de borrado.
Botón de envío de los datos: <INPUT TYPE="submit" VALUE="Enviar datos">
Botón de borrado de los datos: <INPUT TYPE="reset" VALUE="Borrar datos">
4. Etiqueta de cierre </FORM>
• Frames (Marcos)
Es un procedimiento del lenguaje HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de páginas diferentes, pues incluso cada una de ellas pueden tener sus propias barras deslizadoras. Una de sus características más
importantes es que pulsando un enlace situado en un frame, se puede cargar en otro frame una página determinada. Esto se utiliza frecuentemente para tener un frame estrecho en la parte lateral (o superior) con un índice del contenido en forma de diferentes enlaces, que, al ser pulsados cargan en la ventana principal las distintas páginas. De esta manera se facilita la navegación entre las páginas, pues aunque se vaya pasando de unas a otras, siempre estará a la vista el índice del conjunto.
Documento de definición de los frames
Lo primero que tenemos que hacer es crear un documento HTML en el que definiremos cuántas zonas va a haber, qué distribución y tamaño van a tener, y cuál va ser el contenido de cada una de ellas. En el ejemplo que vamos a desarrollar, la página va a tener dos frames distribuidos en columnas (es decir, uno al lado del otro, en vez de uno encima del otro, lo que sería una distribución en filas). Con respecto al tamaño, haremos que el primero (el del izquierda) ocupe el 20% del ancho de la pantalla, y el otro, el 80% restante. Y con respecto al contenido, el frame de la izquierda va a contener un documento HTML que va a servir de índice de lo que veamos en el otro (y que vamos a llamar mipagind.html), y el de la derecha otro documento HTML que va a servir de página de presentación (al que llamaremos mipagpre.html).
Todo lo anterior se refleja en el siguiente documento HTML:
<HTML>
<HEAD>
<TITLE>Mi pagina con frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="mipagind.html">
<FRAME SRC="mipagpre.html" NAME="principal">
</FRAMESET>
</HTML>
En vez de utilizar la etiqueta BODY, que sirve para delimitar lo que se va a ver en la pantalla, se hace uso de la etiqueta FRAMESET (definir los frames). En este caso, con la etiqueta <FRAMESET COLS="20%, 80%"> se define que va a haber dos frames y que van a ir en columnas. Si hubiéramos querido que fueran en filas, habríamos puesto ROWS (filas, en inglés). También se define el espacio en anchura que van a ocupar cada uno de ellos en la pantalla. Se ha puesto como porcentajes del total, pero se podría también haber puesto una cifra absoluta, que representaría el número de pixels a ocupar.
Ya se ha definido el número de frames, su distribución y su tamaño, pero falta por definir el contenido de cada frame. Esto se hizo con las etiquetas:
<FRAME SRC="mipagind.html">
<FRAME SRC="mipagpre.html" NAME="principal">
El contenido del primer frame (el de la izquierda) será el documento mipagind.html y el del segundo (el de la derecha) será el documento mipagpre.html.
En la etiqueta del segundo se ha incluido el atributo NAME="principal", pero no así en el primero. El motivo es que se necesita dar un nombre al segundo frame, pues, como veremos a continuación, en el documento del primer frame va a haber unos enlaces que van a ir dirigidos hacia él. En este caso sólo tenemos dos frames, pero podría haber más, y es necesario distinguirlos unos de otros. Y el primero no necesita nombre, pues no va a haber enlaces en el segundo dirigidos hacia él.
A este documento le vamos a llamar mipagina.html, pero todavía no lo vamos a guardar, pues falta por añadir algo que veremos más adelante.
Documentos HTML de cada frame
Necesitamos ahora confeccionar el documento HTML de cada uno de los frames. Recuérdese que son como páginas independientes, que pueden tener cada una su propio fondo, etc., y todo lo que queramos añadir en ellos y que hemos aprendido hasta ahora.
Documento del frame de la izquierda: Va a tener un fondo amarillo, y va a contener dos enlaces dirigidos al frame de la derecha. Además, como muestra de que se puede añadir cualquier cosa en un frame, vamos a incluir este logo animado (glogoan2.gif):
<HTML>
<HEAD>
<TITLE> Indice </TITLE>
</HEAD>
<BODY BGCOLOR="#FFBB00">
<P><A HREF="mipagpre.html" TARGET="principal"> Presentación </A>
<P><A HREF="mipag13.html" TARGET="principal"> Mi página </A>
<P><IMG SRC="glogoan2.gif">
</BODY>
</HTML>
Dentro de las etiquetas de los enlaces podemos observar algo nuevo, y es el atributo TARGET (en inglés: destino), que sirve para hacer que al ser activado el enlace no se cargue en el propio frame, sino en otro, precisamente en el que hayamos llamado con ese nombre en el documento de definición de los frames. En nuestro caso, le hemos dado el nombre de "principal" al frame de la derecha, y es por tanto ahí donde se van a cargar los documentos HTML.
Guardamos este documento con el nombre de mipagind.html. Además, capturamos la imagen glogoan2.gif, y la guardamos junto con el documento.
Documento del frame de la derecha: Va a tener un fondo negro, y va a contener solamente un texto.
<HTML>
<HEAD>
<TITLE> Presentacion </TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#0000FF">
<CENTER>
<FONT SIZE=3>
<P>ESTA ES LA VERSION
<BR><FONT COLOR="#FF0000">CON FRAMES</FONT>
<BR>DE MI PAGINA
</FONT>
</CENTER>
</BODY>
</HTML>
Guardamos este documento con el nombre de mipagpre.html
¿Qué ocurriría con los navegadores que no soportan los frames? Al desconocer las etiquetas FRAMESET y FRAME del documento de definición, no podría ejecutarlo y no podría cargar la página. Para estos casos está prevista la etiqueta <NOFRAMES> y </NOFRAMES>. Se añaden al final del documento de definición de los frames, y se pone entre ambas lo que queremos que vean los que acceden con un navegador que no soporta frames. Puede incluso ser el código HTML de una página completa (lo que normalmente va entre las etiquetas <BODY> y </BODY>.)
<NOFRAMES>
Estas utilizando un navegador que no soporta frames.
<P>Pulsa para visitar mi <A HREF="mipag13.html"> página</A>.
</NOFRAMES>
Frames sin bordes: Se deben incluir el atributo FRAMEBORDER=0 dentro de la etiqueta FRAMESET. No todas las versiones de los navegadores lo implementan.
Para que también desaparezcan los huecos de separación entre frames hay que añadir otros dos atributos (el primero es para el Explorer y el segundo para el Netscape): FRAMESPACING=0 y BORDER=0. con lo que la etiqueta completa quedaría:
<FRAMESET FRAMEBORDER=0 FRAMESPACING=0 BORDER=0 COLS="xx, yy">
Atributos de la etiqueta </FRAME>
o SRC="dirección". Esta dirección puede ser la de un documento HTML o cualquier otro recurso del Web (o URL). Con este atributo se indica lo que se cargará inicialmente en el frame. Si no se le pone este atributo, el frame aparecerá vacío, aunque tendrá las dimensiones asignadas.
o NAME="nombre_de_la_ventana". Se usa para asignar un nombre a un frame. De esta manera se podrá "dar en el blanco" (en inglés, target) en esta página, desde un enlace situado en otra página. Es decir, que pulsando en otra página un enlace, se cargará en ésta, tal como hemos
visto en el ejemplo. Este atributo es opcional. Por defecto, todas las ventanas carecen de nombre. Los nombres que se escojan deben comenzar por un carácter alfanumérico (una letra o un número).
o MARGINWIDTH="número". Se utiliza cuando se quiere controlar el ancho de los márgenes dentro de un frame. El número representa los pixels de los márgenes. Este atributo es opcional.
o MARGINHEIGHT="número". Igual que el anterior, pero referido a los márgenes en altura.
o SCROLLING="yes|no|auto". Se utiliza para decidir si el frame tendrá o no una barra de desplazamiento. Si se elije "auto", será el navegador quien decida si la tendrá o no. Este atributo es opcional. Su valor por defecto es "auto".
o NORESIZE. Es un indicador para que la ventana no se pueda re-dimensionar por parte del usuario. Es un atributo opcional. Por defecto, todos los frames son re-dimensionables.
o FRAMEBORDER="no". Elimina el borde en un frame, pero si se quiere que se elimine completamente, también hay que ponérselo al frame contiguo. Si se quiere eliminar los bordes de todos los frames, se debe colocar en la etiqueta FRAMESET, como hemos visto anteriormente.
El atributo TARGET
En el ejemplo hemos visto que, como queríamos que los enlaces situados en el frame de la izquierda surtieran efecto no en él mismo, sino en otro frame, teníamos que poner dentro de cada enlace el atributo TARGET="principal", siendo "principal" el nombre que habíamos dado al segundo frame, en el documento de definición de frames. Es decir, hemos utilizado este atributo de esta manera:
TARGET="nombre_dado_a_otro_frame".
Los nombres los ponemos nosotros. Pero hay unos nombres reservados (es decir, que no se pueden usar para denominar a un frame), que hacen que este atributo efectúe unas funciones especiales.
o TARGET="_blank". Hace que se abra una nueva copia del navegador, y el enlace activado se carga en ella, a pantalla completa. Es decir, tendríamos dos copias del navegador (Netscape, Explorer, etc.) funcionando a la vez.
o TARGET="_self". Hace que el enlace se cargue en el propio frame.
o TARGET="_top". Hace que el enlace se cargue a pantalla completa, suprimiendo todos los frames, pero sin que se cargue una nueva copia del navegador. Este es particularmente útil.