Se verá:

Esto es una frase.

Asimismo tampoco se respetan las tabulaciones, retornos de carro etc... Para ello existen una serie de órdenes que indican estos códigos. Las ordenes <PRE> y </PRE> obliga al navegador a visualizar el texto tal y como ha sido escrito, respetando tabulaciones, espacios, retornos de carro, etc..

Ejemplo:

<PRE> Este texto ha Sido

Preformateado.</PRE>

Se verá:

Este texto ha Sido

Preformateado.

Para indicar un salto de línea se utiliza la orden <BR> y para un cambio de párrafo (deja una línea en blanco en medio) se utiliza la orden <P>.

Ejemplo:

Esto es un salto de línea <BR> y esto es <p>un salto de párrafo

Se verá:

Esto es un salto de línea
Y esto es

un salto de párrafo

 La orden <P> puede usarse también como orden "cerrada" <P> y </P> indicando de esta manera los atributos de un párrafo en concreto. Cuando se usa de esta manera tiene el parámetro align que indica al navegador la forma de "justificar" el párrafo. Los valores posibles de este parámetro son LEFT, RIGHT y CENTER, estando aun en estudio el valor JUSTIFY.

Ejemplo:

<P Align = right>Este es un ejemplo de un párrafo de texto justificado a la derecha.</P>

<P Align = center>Este es un ejemplo de párrafo de texto centrado.</P>

Se verá:

Este es un ejemplo de un párrafo de texto justificado a la derecha.

Este es un ejemplo de párrafo de texto centrado.

La orden <HR> muestra una línea horizontal de tamaño determinable que sirve para separar párrafos o temas. Tiene los siguientes parámetros opcionales :

align  posición

Alinea la línea a la izquierda (left), a la derecha (right) o la centra (center).

noshade  

No muestra sombra, evitando el efecto en tres dimensiones.

size   número

Indica el grosor de la línea en pixeles.

width num / %

Indica el ancho de la línea en tanto por ciento en función del ancho de la ventana del navegador. También se puede especificar un número que indicaría el ancho de la línea en pixeles.

Ejemplo:

<HR align = center size = 20 width = 50%>

Se verá:

La orden <HR> sin ningún parámetro mostraría una línea horizontal que ocuparía todo el ancho de la página. Estas líneas sencillas son las que ves en este manual para separar las diferentes secciones.

ATRIBUTOS DEL TEXTO.

Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias órdenes. Algunas de ellas no son reconocidas por determinados navegadores de Internet, es por ello que según el navegador que este Ud. Este utilizando, verá el resultado correctamente o no.

Por otro lado la orden <FONT></FONT> nos permite variar el tamaño, el color, y el tipo de letra de un texto determinado. Utiliza para ello los parámetros size, bgcolor y face.

size valor

Da al texto un tamaño en puntos determinado.

size +/- valor

Da al texto un tamaño tantas veces superior (+) o inferior (-) como indique el valor.

color "código de color"

Escribe el texto en el color cuyo código se especifica.

face "nombre de font"

Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en el ordenador que "lee" la pagina se usara el font predeterminado del navegador.

Ejemplo: <FONT size = +2 color = "#FF0000 face = "Arial"> Texto de prueba </FONT>

Se verá: Texto de prueba

Existen otras órdenes que realizan las mismas operaciones que las antes vistas en tos del texto.

Para incluir comentarios en la página Web se utiliza la orden <!-- -->.

Ejemplo: <!-- Esto es un comentario sobre mi página Web -->

Los comentarios no serán mostrados por el navegador y son útiles para realizar anotaciones en el documento HTML que nos indiquen lo que estamos haciendo en una determinada parte del documento. Asimismo veremos mas adelante que la orden de comentario nos será de utilidad para incluir código JavaScript en nuestra página Web.

CABECERAS.

En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaños de letra) por medio de las órdenes <H1><H2><H3><H4><H5> y <H6>. El texto que escribamos entre el inicio y el fin de la orden será el afectado por las cabeceras. La cabecera <H1> será la que muestre el texto en mayor tamaño.

Ejemplo:
<h1>Cabecera tipo 1</h1>
<h2>Cabecera tipo 2</h2>
<h3>Cabecera tipo 3</h3>
<h4>Cabecera tipo 4</h4>
<h5>Cabecera tipo 5</h5>
<h6>Cabecera tipo 6</h6>

Se verá:
Cabecera tipo 1

Cabecera tipo 2

Cabecera tipo 3

Cabecera tipo 4

Cabecera tipo 5

Cabecera tipo 6

Las cabeceras provocan un salto de línea, aunque no se le indique.

LISTAS.

Existen tres tipos de listas, numeradas, sin numerar y de definición. Las listas numeradas representarán los elementos de la lista numerando cada uno de ellos segun el lugar que ocupan en la lista. Para este tipo de lista se utiliza las órdenes <OL> </OL>. Cada uno de los elementos de la lista irá precedido de la orden <LI>. La orden <OL> puede llevar los siguientes parámetros :

start num

Indica que número será el primero de la lista. Si no se indica se entiende que empezará por el nœmero 1.

type tipo

Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista ordenada numéricamente.

Los tipos posibles son :

Las listas sin numerar representan los elementos de la lista con un "topo" o marca que antecede a cada uno de ellos. Se utiliza la orden <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los elementos. La orden <UL> puede contener el parámetro type que indica la forma del "topo" o marca que antecede a cada elemento de la lista. Los valores de type pueden ser disk, circle o square, con lo que el topo o marca puede ser un disco, un círculo o un cuadrado.

Las listas de definición muestran los elementos tipo Diccionario, o sea, término y definición. Se utiliza para ellas las órdenes <DL> y </DL>. El elemento marcado como término se antecede de la orden <DT>, el marcado como definición se antecede de la orden <DD>.

Existen otros dos tipos de listas menos comunes. Las listas de Menú o Directorio se comportan igual que las listas sin numerar. La lista de Menú utiliza la orden <MENU></MENU> y los elementos se anteceden de <LI> El resultado es una lista sin numerar más "compacta" es decir, con menos espacio interlineal entre los elementos. La lista de Directorio utiliza la orden <DIR></DIR> y los elementos se anteceden de <LI>. Los elementos tienen un limite de 20 caracteres.

Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo que se consigue una estructura tipo "índice de materias".

OTROS COMANDOS BÁSICOS.

Intermitencia o parpadeo de texto

Para hacer parpadear un texto, se debe emplear las ordenes <BLINK> y </ BLINK>, pero advierto que esta Función es especifica solo de Netscape, por eso es posible que no produzca efecto en otros navegadores.

Ejemplo: <BLINK>Texto de Prueba</BLINK>

IMÁGENES.

Hasta el momento hemos visto como se puede escribir texto en una página Web, así como sus posibles formatos. Ahora veremos como incluir una imagen en nuestra página, para ello utilizaremos la orden <IMG>. Hay dos formatos de imágenes que todos los navegadores modernos reconocen. Son las imágenes GIF y JPG. Cualquier otro tipo de fichero grááfico o de imagen (BMP, PCX, CDR, etc...) no será mostrado por el navegador, a no ser que dispongas de un programa externo que permita su visualización.

La orden <IMG> tiene varios parámetros :

src "imagen"

Indica el nombre del fichero gráfico a mostrar.

alt "Texto"

Mostrara el texto indicado en el caso de que el navegador utilizado para ver la página no sea capaz de visualizar la imagen.

lowsrc "imagen"

Muestra una segunda imagen "superpuesta" sobre la primera una vez se carga la página. Este parámetro no es reconocido por la totalidad de los navegadores ya que esta en estudio su aplicación, así que en la mayoría de los casos será ignorado mostrándose solo la primera imagen (src). En Netscape muestra la imagen indicada por lowsrc en primer lugar, y posteriormente muestra la imagen indicada por src. Si las imágenes son iguales pero tienen distinta "resolución" se conseguirá un efecto tipo "Fade". Si las imágenes son de distinto tamaño la imagen indicada en src se redimensionara al tamaño indicado por la imagen indicada en lowsrc

align TOP / MIDDLE / BOTTOM

Indica como se alineará el texto que siga a la imagen. TOP alinea el texto con la parte superior de la imagen, MIDDLE con la parte central, y BOTTOM con la parte inferior.

border tamaño

Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un borde que será visible cuando la imagen forme parte de un Hyperenlace.

height tamaño

Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.

width tamaño

Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.

hspace margen

Indica el numero de espacios horizontales, en puntos, que separarán la imagen del texto que la siga y la anteceda.

vspace margen

Indica el número de puntos verticales que separaran la imagen del texto que le siga y la anteceda.

ismap / usemap

Indica que la imagen es un MAPA. Veremos estos parámetros mas adelante en este manual.

La imagen a mostrar puede encontrase en el mismo lugar (URL) que la página Web. Si este no fuera el caso, el nombre de la imagen ha de contener la URL donde se encuentre la imagen.

Ejemplo:

<IMG src = " http://www.microsoft.com/iexplorer.gif">

Veamos varios ejemplos "jugando" con los tamaños de la imagen, así como comprobando la alineación de los textos. (Recuerde que en función del navegador que Ud. utilice pueden verse o no los efectos de cada parámetro).

ENLACES.

La característica principal de una página Web es que podemos incluir Hypervinculos. Un Hypervinculo es un elemento de la página que hace que el navegador acceda a otro recurso, otra página Web, un archivo, etc.

Para incluir un Hyperenlace se utiliza las ordenes <A> y </A>. El texto o imagen que se encuentre dentro de los límites de esta orden será sensible, esto quiere decir que si pulsamos con el ratón sobre el, se realzará la función de Hypervinculo. Si el Hypervinculo esta indicado por un texto, este aparecerá subrayado y en distinto color, si se trata de una imagen, esta aparecerá con un borde rodeándola. Esta orden tiene el parámetro href que indica el lugar a donde nos llevará el Hypervinculo si lo pulsamos.

Ejemplo:

<A href = "http://www.espacio.ya.com"> Pulse para ir a la página de Espacio.ya.com</A>

Se vera:

Pulse para ir a la página de Espacio.ya.com

Lo mismo podríamos hacer con un gráfico.

Ejemplo:

Para buscar en Internet:
<A href = "http://www.ya.com/" ><IMG src = "ya.gif"></A>

Se vera:

Para buscar en Internet: http://www.ya.com

A continuación analizamos los enlaces a recursos externos y los enlaces a partes de una página (índices).

ENLACES A RECURSOS EXTERNOS.

Los recursos externos básicos que pueden visualizarse son:

Páginas HTML (http://...)
Gopher (gopher://...)
Servidores FTP (ftp://...)
News (news:...)
Imágenes (...)

En todos ellos se requieren la orden general:
<A HREF ="dirección del recurso">Texto en el que hay que picar con el ratón para acceder al recurso</A>.

ENLACES A PARTES DE UN DOCUMENTO.

Para establecer un enlace con otra parte del documento, se utiliza la expresión:

<A HREF="#referencia">Texto de enlace</A>

en la que referencia indica la marca hacia la que hay que enlazar, y texto de enlace el texto sobre el que se picará para establecer dicho enlace.

Para que la orden se ejecute correctamente, deberá existir en alguna parte del documento la expresión
<A NAME="referencia">..texto opcional..</A>, que será el destino del enlace. Por ejemplo, podemos situar al inicio de una página HTML el siguiente código:

<A NAME="m0">INDICE</A>
<UL>
<LI><A HREF="#m1">Introducción</A>
<LI><A HREF="#m2">Referencias históricas</A>
<LI><A HREF="#m3">Aspectos de interés</A>
</UL>

y después desarrollar cada uno de los aparatados:

<A NAME="m1>Introducción</A><BR> ....texto de la introducción....
<A NAME="m2">Referencias históricas</A>
....texto de las referencias históricas....
<A NAME="m3">Aspectos de interés</A>
....texto de los aspectos de interés....
<A HREF="#m0">Indice de contenidos</A>

Cada vez que se pique con el ratón el texto de la referencia (HREF), se enlazará con la sección correspondiente (NAME).

El enlace se puede realizar también hacia una parte de un documento particular. Así, la expresión:

<A HREF="main.htm#m5">...texto a picar...</A>

permite enlazar con sección m5 de la página main.htm.

TABLAS.

Ya es hora de ver otro tipo de funciones que adornaran nuestra página en esta parte del curso veremos las TABLAS, Las tablas son elemento que nos permiten representar cualquier elemento de nuestra página (texto, listas, imágenes, etc.) En diferentes filas y columnas separadas entre si. Es una herramienta muy œtil para "ordenar" contenidos de distintas partes de nuestra página.

La información contenida en una tabla estará contenida entre las órdenes:

<TABLE BORDER=n> y </TABLE>

donde BORDER=n indica el grosor del borde de la tabla. Cuando n es 0 la tabla se visualizará sin borde y a medida que dicho número se incremente, el borde será de mayor grosor.

Los parametros opcionales para esta orden son :

cellspacing num

Indica el espacio en puntos que separa las celdas que estan dentro de la tabla.

cellpadding num

Indica el espacio en puntos que separa el borde de cada celda y el contenido de esta.

width num ó %

Indica la anchura de la tabla en puntos o en porcentaje en función del ancho de la ventana del navegador. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos de las celdas.

height num ó %

Indica la altura de la tabla en puntos o en porcentaje en función del alto de la ventana del navegador. Si no se indica este parámetro, la altura se adecuará a la altura de los contenidos de las celdas.

bgcolor codigo de color

Especifica el color de fondo de toda la Tabla.

Para definir las celdas que componen la tabla se utilizan las ordenes <TD> y <TH>. <TD> indica una celda normal, y <TH> indica una celda de "cabecera", es decir, el contenido será resaltado en negrita y en un tamaño ligeramente superior al normal. Los parámetros opcionales de ambas ordenes son :

align LEFT / CENTER / RIGHT / JUSTIFY

Indica como se debe alinear el contenido de la celda, a la izquierda (LEFT), a la derecha (RIGHT), centrado (CENTER) o justificado (JUSTIFY).

valign TOP / MIDDLE / BOTTOM

Indica la alineación vertical del contenido de la celda, en la parte superior (TOP), en la inferior (BOTTOM), o en el centro (MIDDLE).

rowspan num

Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.

colspan num

Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.

width num ó %

Indica la anchura de la columna en puntos o en porcentaje en función del ancho de la ventana del navegador. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos. Este parámetro solo funciona en los navegadores modernos.

bgcolor código de color

Especifica el color de fondo del elemento de la Tabla.

Para indicar que acaba una fila de celdas se utiliza la orden <TR>. A continuación mostraremos un ejemplo de una tabla que contiene solo texto. Como se indicó anteriormente el contenido de las celtas puede ser cualquier elemento de HTML, un texto, una imagen, un Hyperenlace, una Lista, etc...

Ejemplo:
<TABLE border=0 cellspacing=2 cellpadding=2 width =80%>

<TH align = center>Buscadores

<TH align = center colspan = 2>Otros Links

<TR>

<TD align = CENTER>Ya.com

<TD align = CENTER>Supermotor.com

<TD align = CENTER>Rappelweb.com

<TR>

<TD align = CENTER>Red.ya.com

<TD align = CENTER>Finanzas.com

<TD align = CENTER>Tiendapc.com

</TABLE>

se verá:

Para que quede bien entendido les muestro otro ejemplo:

ejemplo:

<TABLE BORDER=1>
<TR><TH>Comando<TH>función
<TR><TD>TR<TD>Siguiente fila
<TR><TD>TH<TD>Encabezado en columna siguiente
<TR><TD>TD<TD>Texto en la columna siguiente
</TABLE>

se verá:

Observa como los encabezamientos de las columnas (TH) figuran en negrita y centrados, mientras que el texto de las celdas (TD) aparece sin resaltar y alineado a la izquierda.

Las celdas de una tabla pueden contener todo tipo de información: enlaces, gráficos, listas, ... Las tablas también pueden centrarse en la pantalla, utilizando las órdenes <CENTER> y </CENTER> antes y después, respectivamente, del conjunto de órdenes de la tabla.

Un œltimo ejemplo:

Ejemplo:
<CENTER>
<TABLE BORDER=0>
<TR><TH COLSPAN="2">Secciones del tutorial
<TR><TD>
<UL>
<LI>Comandos básicos
<LI>Imágenes
<LI>Enlaces
</UL>
<TD>
<UL>
<LI>Tablas
<LI>Funciones especiales
<LI>Recomendaciones
</UL>
<TR><TH COLSPAN="2">Introducción de imagenes en una tabla
<TR><TD>Logotipo de Espacio.ya.com<TD><IMG SRC="logo_espacio.gif">
<TR><TH COLSPAN="2">Acceso a otros recursos
<TR><TD>URL del portal de Ya.com Internet_Factory<TD>
<A HREF="http://www.ya.com">http://www.Ya.com </A>
</TABLE>

Se verá:

TAMAÑOS DE LETRAS.

Los tamaños de letra puede variarse a lo largo de una página con la orden:

<font size="n">.....texto.....</font>

donde n es un número entre 1 y 7, siendo 1 el tamaño menor y 7 el mayor:

<font size="1">Tamaño de letra 1</font><BR>
<font size="2">Tamaño de letra 2</font><BR>
<font size="3">Tamaño de letra 3</font><BR>
<font size="4">Tamaño de letra 4</font><BR>
<font size="5">Tamaño de letra 5</font><BR>
<font size="6">Tamaño de letra 6</font><BR>
<font size="7">Tamaño de letra 7</font><BR>

Tamaño de letra 1
Tamaño de letra 2
Tamaño de letra 3
Tamaño de letra 4
Tamaño de letra 5
Tamaño de letra 6
Tamaño de letra 7

En el caso de no querer dar un valor al tamaño a la letra el valor por defecto sera de 3.
Sin embargo, el tamaño de letra también puede moficarse incrementando o disminuyendo el tamaño que ese momento tenga la letra.
Así, la orden <FONT SIZE="+1">..... texto .....</FONT> incrementa en un tamaño el tamaño actual.
De la misma forma, la orden: <FONT SIZE="-1">..... texto .....</FONT> disminuye un tamaño.

Ejemplo:
Los tamaños <FONT SIZE="+1">de letra </FONT><FONT SIZE="+2">pueden variarse </FONT><FONT SIZE="+3"> a voluntad </FONT><FONT SIZE="+4">incrementádolos o </FONT><FONT SIZE="1"> disminuyéndolos</FONT>

Se vería:
Los tamaños de letra pueden variarse a voluntad incrementádolos o disminuyéndolos

FORMULARIOS PARA LA CAPTURA DE DATOS.

Otra de la posibilidades que proporciona HTML es la entrada de datos de los usuarios mediante un conjunto de elementos de control para luego procesarla.

En un formulario podremos solicitar diferentes datos (campos) cada uno de los cuales quedará asociado a una variable. Una vez se hayan introducido los valores en los campos, el contenido de estos será enviado a la dirección (URL) donde tengamos el programa que pueda procesar las variables. Para poder realizar este œltimo paso de procesar las variables necesitaremos realizar un programa externo en algun lenguaje de programación. A este programa externo se le suele llamar CGI (Common Gateway Interface). La creación de este tipo de programas sería tema de otro manual diferente, por lo que aquí veremos como se pueden enviar las variables a nuestra dirección de correo electrónico.

La declaración del formulario se pone entre las ordenes <FORM> y </FORM>. En el interior de la declaración se indican los elementos (variables) de entrada. Se pueden incluir todas las ordenes que se deseen dentro de estas dos pero no es posible anidar formularios entre si.

La orden <FORM> tiene los parámetros action y method.

action = "programa"

Indica el programa que va a "tratar" a las variables que se envien con el formulario. En nuestro caso enviaremos las variables por correo electrónico, con lo que el "programa" será "mailto: direccion_de_correo".

method = POST / GET

Indica el método segœn el que se transferiran las variables. POST produce la modificación del documento de destino (como en el caso de enviar por correo las variables). GET no produce cambios en el documento destino (como en el caso de una consulta a una base de datos, p.ej. una página de bœsqueda en Internet).

Campos de Entrada

Para la introducción de las variables se utiliza la orden <INPUT>. Esta orden tiene el parámetro type que indica el tipo de variable a introducir y name que indica el nombre que se le dará al campo. Cada tipo de variable tiene sus propios parámetros.

type= text name = campo

Indica que el campo a introducir será un texto. Sus parámetros son :

maxlenght = numero

Numero máximo de caracteres a introducir en el campo.

size = numero

Tamaño en caracteres que se mostrará en pantalla.

value = "texto"

Valor inicial del campo. Normalmente será " ", o sea, vació.

type = password name = campo

Indica que el campo sera una palabra de paso. Mostrará asteriscos (*) en lugar de las letras escritas. Sus parámetros opcionales son los mismos que para text.

type = checkbox name = campo

El campo se elegirá marcando una casilla. Se permite marcar varias casillas. Los valores de las casillas serán indicados por :

value = "valor"

checked

La casilla aparecera marcada por defecto.

type = radio name = campo

El campo se elegirá marcando una casilla. Solo permite marcar una sola de las casillas. Los valores de las casillas serán indicados por :

value = "valor"

type = image name = campo

El campo contendrá el valor de las coordenadas del punto de la imagen pinchado. Debe indicarse la imagen con el parámetro :

src = "fichero de imagen".

type = hidden name = campo

El usuario no puede modificar su valor, ya que el campo no es visible se manda siempre con el valor indicado por el parámetro :

value = "valor"

type = submit

Representa un botón. Al pulsar este botón la información de todos los campos se envía al programa indicado en <FORM>. Tiene el parámetro value = "texto" que indica el texto que aparecerá en el botón.

type = reset

Representa un botón. Al pulsar este botón se borra el contenido de todos los campos. El parámetro value = "texto" indica el texto que aparecerá en el botón.

Campos de Selección

Este tipo de campos despliegan una lista de opciones, entre las que debemos escoger una o varias. Se utiliza para ellos la orden <SELECT> </SELECT> . Sus parámetros son :

name = campo

Nombre del campo

size = num

Numero de opciones visibles. Si se indica 1 se presenta como un menú desplegable, se se indica mas de uno se presenta como una lista con barra de desplazamiento.

múltiple

Permite seleccionar mas de un valor para el campo.

Las diferentes opciones de la lista se indican con la orden <OPTION>. Esta orden puede incluir el parámetro selected para indicar cual es la opción por defecto. En caso de que no se especifique, se tomara por defecto la primera opción de la lista.

Areas de texto

Representa un campo de texto de múltiples líneas. Normalmente se utiliza para que se incluyan en el comentarios. La orden usada es <TEXTAREA> </TEXTAREA>, y sus parámetros :

name = campo

Nombre del campo.

cols = num.

Numero de columnas de texto visibles.

rows = num.

Numero de filas de texto visibles.

wrap = VIRTUAL / PHYSICAL

Justifica el texto automáticamente en el interior de la caja. La opción PHYSICAL envia las lineas de texto separadas en lineas físicas. La opción VIRTUAL envia todo el texto seguido.

Veamos a continuación un ejemplo de formulario utilizando todas las formas de introduccion de datos.

Ejemplo:

<FORM action = "mailto: julian@subdimension.com" method = post >
Tu Nombre:<INPUT type = text name = nombre size = 30 >
<P>
Tu Edad :
<INPUT type = radio name = edad value = "-20" > Menos de 20 años
<INPUT type = radio name = edad value = "20-40" > Entre 20 y 40 años
<INPUT type = radio name = edad value = "+40" > Mas de 40 años
<P>
<INPUT type = hidden name = lugar value = "pagina personal" >
¿Te parece útil este manual?
<SELECT name = donde >
<OPTION>Mucho </OPTION>
<OPTION>Bastante</OPTION>
<OPTION>Regular </OPTION>
<OPTION>Nada </OPTION>
</SELECT>
<P>
Tus Comentarios:
<BR>
<TEXTAREA name = comentario rows = 5 cols = 40 wrap = virtual ></TEXTAREA>
<P>
<INPUT type = submit value = "Enviar" >
<INPUT type = reset value = "Borrar" >
</FORM>

se vería:

Si rellenas este FORM y pulsas sobre el botón Enviar, (estando conectado a Internet), se generará un mensaje de correo a mi direccion de correo julian@subdimension.com. Si pulsas el boton Borrar se borraran los datos que hayas introducido en el Formulario.

Si en vez de enviar estas variables por correo electrónico, fuesen enviadas a un programa (CGI), este programa podría tratarlas y dar como respuesta una nueva página Web.

IMPORTANTE : La opcion mailto: en el parametro action de la orden <FORM> solo funciona correctamente con Netscape. En Microsoft Explorer esta opción da como resultado un correo en blanco. Para enviar un formulario por e-mail sin importar el navegador utilizado se ha de utilizar un programa externo que realize este proceso. En la pagina MAILFORM encontraras informacion de como implementar un programa externo para el envío de formularios via e-mail en tu pagina Web.

EXTENSIONES DEL HTML.

Netscape y Microsoft han añadido al estándar de HTML diversas ordenes para hacer más atractiva la visualización de las páginas Web. Veremos aquí las más interesantes y la forma de usarlas.

Estas órdenes pueden no funcionar en algún navegador de HTML, pero el uso de ellas por parte de los dos "grandes" del software para Internet hace prever que serán inmediatamente incluidas en las nuevas versiones de el resto de los navegadores.

APPLET.

La orden <APPLET></APPLET> indica la ejecución de un programa (applet) externo escrito en lenguaje JAVA. Java es un lenguaje creado por Sun Microsystems que permite realizar operaciones multimedia sin incorporar nuevas ordenes HTML. Los applets son muy variados, y cada uno de ellos realiza una tarea distinta. Hay applets para hacer que el texto se mueva dentro de la hoja, se contraiga y expanda, etc. Esta orden tiene los siguientes parámetros :

codebase URL

Dirección donde se encuentra el applet Java ( Por ejemplo http://www.ucm.es/java). Si el Applet se encuentra en el mismo lugar que la pagina Web este parámetro no es necesario.

code programa

Indica el nombre del programa (applet) Java a ejecutar.

width nœm.

height nœm.

Indican el espacio (ancho y alto) en puntos en el que el programa realizará su función.

Dentro de la orden <APPLET> se incluye la orden <PARAM> que envía al programa Java los parámetros necesarios para su funcionamiento. Esta orden suele tener como mínimo los parámetros :

name campo

Nombre de la variable a enviar.

value valor

Valor de la variable a enviar.

Veamos un ejemplo en el que se ejecuta un programa Java que permite que un texto se desplace de un lado a otro de una zona de la pantalla:

Ejemplo:

<APPLET codebase="http://www.ucm.es/java" code="Laufschrift.class" width = 350 height = 25 >
<PARAM name = bg.color value = "0,255,0">
<PARAM name = message value = "**Bienvenido a mi pagina WEB - Manual de HTML**">
</APPLET>

MARQUEE.

La orden <MARQUEE></MARQUEE> crea una marquesina con un texto en su interior que se desplaza. Funciona únicamente con Ms-Explorer. Sus parámetros son los siguientes :

align top / middle / bottom

Indica si el texto del interior de la marquesina se alinea en la zona alta (top), en la baja (bottom) o en el centro (middle) de la misma.

bgcolor "código de color"

Indica el color del fondo de la marquesina.

direction left / right

Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o hacia la derecha (right)

height núm o %

Indica la altura de la marquesina en puntos o porcentaje en función de la ventana del navegador.

width núm o %

Indica la anchura de la marquesina en puntos o porcentaje en función de la ventana del navegador.

loop núm / infinite

Indica el numero de veces que se desplazará el texto por la marquesina. Si se indica infinite, se desplazará indefinidamente.

scrolldelay núm.

Indica el número de milisegundos que tarda en reescribirse el texto por la marquesina, a mayor número mas lentamente se desplazará el texto.

Veamos un ejemplo de esta orden:

Ejemplo:

<MARQUEE bgcolor = "#FFFFFF" width = 50% scrolldelay = 0 > La página de Los Computadores</MARQUEE>

Si estas utilizando Ms-Explorer veras el efecto producido a continuación:

La pagina de Los Computadores

SONIDO DE FONDO.

Nuestra página Web puede tener un sonido que se active al entrar en la página. Esta característica de Ms Explorer utiliza la orden <BGSOUND> y tiene los siguientes parámetros :

src "fichero"

Indica el nombre del fichero que contiene el sonido (.waw, .mid).

loop num / infinite

Indica el número de veces que se reproducirá el sonido. Si se indica infinite, el sonido se reproducirá de forma continua hasta que abandonemos la página.

Un ejemplo de esta orden sería :

Ejemplo:

<BGSOUND src= "yesterday.mid" loop= infinite>

Para utilizar esta función en Netscape se utiliza la orden <EMBED>. Esta orden se utiliza realmente para "incrustar" un objeto en nuestra pagina Web. Dicho objeto puede ser un fichero de sonido, un vídeo, un gráfico BMP, etc. Tiene los siguientes parámetros :

src "fichero"

Indica el nombre del fichero que contiene el sonido (.waw, .mid) o el video (.avi).

autostart true

Si deseamos que la reproducción se inicie inmediatamente.

loop true

Incluirlo si deseamos que la reproducción no se detenga. (cuando termina, vuelve a comenzar automáticamente).

volume nœmero

Volumen al que se reproducen los ficheros de sonido.

width nœmero

height nœmero

Anchura y Altura de la representación del objeto. (Si es un sonido no es necesario este parámetro).

controls smallconsole

Visualiza una serie de controles que nos permiten iniciar la reproducción del fichero, así como realizar una pausa o detenerlo.

Un ejemplo de esta orden sería:

Ejemplo:

<EMBED src= "yesterday.mid" loop= true autostart= true volume=50 width=50 height=15 controls=smallconsole>

FRAMES.

Las frames es una técnica para subdividir la pantalla del navegador en diferentes ventanas. Cada una de estas ventanas se podrá manipular por separado, permitiéndonos mostrar en cada una de ellas una página Web diferente. Esto es muy util para, por ejemplo, mostrar permanentemente en una ventana los diferentes contenidos de nuestra página, y en otra ventana mostrar el contenido seleccionado.

Para definir las diferentes subventanas o frames se utilizan las ordenes <FRAMESET>, </FRAMESET> y <FRAME>. La orden <FRAMESET> indica como se va a dividir la ventana principal. Pueden incluirse varias ordenes <FRAMESET> anidadas con el objeto de subdividir una división u otra subdivisión. Los parámetros de <FRAMESET> son rows y cols en función de si la división de la pantalla se realiza por filas (rows) o columnas (cols). Los parámetros rows y cols se acompañan de un grupo de números que indican en puntos o en porcentaje el tamaño de cada una de las subventanas. En caso de utilizar rows los tamaños de las subventanas se entienden indicados de arriba a abajo, es decir, el primer valor será el asignado a la ventana superior, el segundo a la ventana inmediatamente inferior, etc... En el caso de cols los tamaños se aplican de izquierda a derecha.

La orden <FRAME> indica las propiedades de cada subventana. Es necesario indicar una orden <FRAME> para cada subventana creada. Los parámetros de <FRAME> son :

name = "nombre"

Indica el nombre por el que nos referiremos a esa subventana.

src = "URL"

La ventana mostrará en principio el contenido del documento HTML que se indique.

marginwidth = núm.

Indica el margen izquierdo y derecho de la subventana en puntos.

marginheight = núm

Indica el margen superior e inferior de la subventana en puntos.

scrolling = "yes / no / auto"

Indica si se aplica una barra de desplazamiento a la subventana en el caso de que la página que se cargue en ella no quepa en los límites de la subventana. el valor "yes" muestra siempre la barra de desplazamiento, "no" no la muestra nunca (la zona de la página que no quepa en la subventana no la veremos), y "auto" la muestra solo en caso de que sea necesario para poder ver la página.

noresize

Un usuario que este viendo una pagina con frames puede redimensionarla seleccionando un borde de la subventana con el cursor y desplazándolo. Si se indica este parámetro, el usuario no podrá "redimensionar" las subventanas con el navegador.

border = núm.

Indica el "borde" que separara esta frame de la siguiente. Si se indica cero (0) no se mostrara borde entre las frames, consiguiendo un efecto muy elegante, siempre y cuando el "fondo" de todas las frames sea el mismo, o sean colores sólidos.

Los navegadores que no soportan la característica de subventanas, no mostrarán nada de lo indicado con estas ordenes. Es por ello que existe una orden llamada <NOFRAMES> </NOFRAMES>. Todo los indicado entre esta orden será lo que muestren los navegadores sin capacidad para visualizar Frames. Los navegadores que soporten Frames obviaran las ordenes incluidas entre <NOFRAMES> </NOFRAMES>.

Si su navegador puede visualizar Frames tendrá en estos momentos la pantalla dividida en dos zonas independientes, en la izquierda verá el índice de materias de este manual, y en la derecha estará viendo la sección del manual que haya seleccionado. En otro caso simplemente verá la sección del manual.

La definición de las Frames debe ir antes de la definición del cuerpo de documento (<BODY>).

Veamos un ejemplo completo de Frames con comentarios :

Al usar Frames, nos encontramos con un problema. Cuando queramos mostrar una página Web debemos indicarle al navegador en que subventana queremos que se muestre. Por defecto se mostrará en la ventana donde se encuentre el enlace. Para poder escoger la subventana de destino del Hyperenlace se añade un nuevo parámetro a la orden <A href= > </A>. Este parámetro se llama target y puede tener los siguientes valores :

target "nombre _ ventana"

Muestra el Hyperenlace en la ventana cuyo nombre se indica.

target "_blank"

Abre una nueva copia del navegador y muestra el Hyperenlace en ella. (Si usamos Netscape esto provoca que tengamos funcionando dos copias del programa).

target "_self"

Se muestra el Hyperenlace en la subventana activa.

target "_parent"

El Hyperenlace se muestra en el <FRAMESET> definido anteriormente al actual. Si no hay ningœn <FRAMESET> anterior se muestra a pantalla completa suprimiendo todas las subventanas de la pantalla.

target "_top"

Suprime todas las subventanas de la pantalla y muestra el Hyperenlace a pantalla completa.

SCRIPTS.

Un Script es un programa escrito en un lenguaje distinto al HTML que se puede incluir en una página Web "tal cual". Para incluir estos programas en una página Web se utiliza la orden <SCRIPT> </SCRIPT>. Esta orden tiene el parámetro language para indicar el lenguaje de programación utilizado para el Script. El código del programa debe "ocultarse" con las órdenes de comentario de HTML <!-- --> con el objeto de que no sean mostradas por los navegadores que no reconocen la orden <SCRIPT>. Los scripts más usados suelen estar escritos en lenguaje JAVA. Este lenguaje desarrollado por Sun Microsystems permite realizar operaciones de animación y multimedia en una página Web.

La inclusión de un Script en una página Web se haría de la siguiente forma :

RECOMENDACIONES.

No Olvide, que para la construcción de páginas HTML pueden utilizarse dos tipos de programas:

• Editores de HTML
• Conversores para procesadores de texto

Cualquiera de estas opciones facilita, con mucho, la tarea de crear las páginas. No obstante considero que siempre es necesario conocer el código original, si lo que se desea es confeccionar un documento de calidad. Por dos motivos:

• Los programas o conversores, con frecuencia, no gestionan la totalidad de las órdenes.
• El resultado de la página puede no ser el esperado.

Con todo, creo que la opción del conversor es la más conveniente, además de la corrección manual en aquellos casos en los que se precise. De esta forma se puede generar el código a partir de documentos ya creados (respetando tama–os de letra, tipos de letra, etc.).

Por otra parte, una página no debe contener excesivos gráficos; pueden saturar la capacidad receptiva del usuario, a la vez que puede desistir de visitar la página por el excesivo tiempo requerido para visualizarla. No obstante, siempre son necesarios, y colocados de forma estratégica, ayudan a que el documento no sea monótono, lo que también ocasionaría la pérdida de interés del usuario.

En la medida de lo posible, los documentos no deben ser muy largos; es preferible partirlos en documentos individuales y establecer enlaces entre ellos.

Con estas premisas he confeccionado este material, que espero que te sirva y sea de tu agrado.

En cualquier caso, si necesitas más información no dudes en consultar las siguientes direcciones:

• Tutorial HTML de la Universidad Nacional de Córdoba (Argentina).
• Tutorial HTML de David (MPSnet - Mexico).
• El Taller HTML de la Universidad de Cádiz (Espa–a), y
• Los Documentos para el constructor de WWW de la Universidad de Málaga (España).