Buscar este blog

viernes, 26 de noviembre de 2010

2.5. MANIPULAR OBJETOS Y FORMULARIOS EN UNA PAGINA WEB.


Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, hacer suscripciones a un boletín o revista que editemos, etc.
Una vez el usuario rellena los datos y pulsa el botón para enviar el formulario se arrancará un programa que recibirá los datos y hará el tratamiento correspondiente (una base de datos por ejemplo).
Aquí vamos a ver cómo crear el formulario básico, (insertar campos y botones en el formulario y validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones de programación, ya sea en SQL, en Java Script o en otro lenguaje de programación.
Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús
desplegables, y botones.
Elementos de formulario
Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción Objetos de formulario. A través de esta opción se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la página. Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, así como algunas de sus propiedades.
Campo de texto y Área de texto: Permiten añadir un cuadro de texto. El Campo de texto solo permite escribir una línea al usuario, mientras que el Área de texto permite escribir varias. Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades. También es posible definirlo como Contraseña. A continuación tienes un ejemplo de cada uno de estos tres tipos.

A través del inspector de propiedades es posible asignar también el ancho del cuadro de texto, el número máximo de líneas o caracteres, y el valor inicial del cuadro.

Botón: Es el botón tradicional. El botón puede tener asignadas tres opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores).

También es posible cambiar el texto del botón, a través del campo Etiqueta del inspector de propiedades.

Casilla de verificación: Es un cuadrito que se puede activar o desactivar. Puede asignársele el estado inicial como Activado o como Desactivado
 


 Botón de opción: Es un pequeño botón redondo que puede activarse o desactivarse. Si hay varios del mismo formulario, solo puede haber uno activado. Cuando se activa uno, automáticamente se desactivan los demás.


¿Cuál es más inteligente?

o  ºEl niño
o   ºEl joven

Lista/Menú: Una lista o menú es un elemento de formulario que lleva asociada una lista de opciones. Los elementos se añaden a través de botón Valores de lista del inspector de propiedades. Cuando se trata de un menú, solo es posible elegir uno de los
elementos, pero si se trata de una lista, a través de Selecciones puede permitirse que se seleccionen varios simultáneamente.

Etiqueta: Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda saber qué datos ha de introducir en cada uno de ellos.

Crear formularios: 

Puedes crear formularios a través del menú Insertar, opción Formulario. Una vez creado un formulario, este aparecerá en la ventana de Dreamweaver como un recuadro formado por líneas rojas discontinuas, similar al de la imagen de siguiente.

 
Dentro de dicho formulario se podrán insertar los elementos de formulario, que como ya sabes puedes insertarlos a través del menú Insertar, opción Objetos de formulario.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.

Validar formularios 

La validación de formularios sirve para hacer que Java script valide el formulario antes de que se envíe el formulario, para que en el caso de que haya campos del formulario que sean obligatorios, tengan que rellenarse antes de poder enviarse.

 











Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puedeabrir a través del menú Ventana, opción Comportamientos, o pulsando Mayús+ F3.

2.4. ESTABLECER VINCULOS E HIPERVINCULOS.


Normalmente se les llama enlaces.- Consisten en líneas de texto o imágenes que se encuentran dentro de ciertos documentos, generalmente en páginas web, y que permiten acceder a otros documentos. Estos enlaces establecen conexiones con otras páginas en Internet para que el
navegador pueda visualizarlas. Cuando se hace click sobre un enlace, el navegador abrirá automáticamente la página de información a la que hace referencia.
Para definir un enlace es necesario marcar con la etiqueta <a> el objeto del cual va a partir dicho enlace. Dicha directiva debe incluir el parámetro href="url" para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <a href="url">, y después cerrar con
</a>. Por ejemplo, si queremos que el texto "pulse aquí para visitar la NASA" nos conduzca a la "home page" de la NASA, debemos escribir en nuestro texto HTML: 

<a href="http://www.nasa.gov/">Pulse aquí para visitar a la NASA</a>
Que se vería de esta forma: 

Pulse aquí para visitar a la NASA
Si queremos que el texto "Foto" nos lleve a una imagen tenemos que escribir:
<a href="imagen.gif">Foto</a> entonces al hacer clic en el texto Foto nos abrirá la
imagen.gif.
También se puede ir a otro enlace por medio de una imagen. Lo único que se debe hacer es cambiar el texto por una imagen: 

<a href="http://www.altavista.com"><img src="Logo.jpg"></a>
Si se quiere hacer un link para que nos manden un E-Mail se debe hacer de la siguiente manera: 

<a href="mailto:pfravioli@fibertel.com.ar">Mandame un Email</a>
Entonces cuando se haga clic sobre esta palabra Mandame un Email se abrirá (por defecto) el Microsoft Outlook Express con la dirección del destinatario ya escrita.

2.3. UTILIZAR ETIQUETAS EN UNA PAGINA WEB.


Un documento HTML ha de estar delimitado por la etiqueta< HTML> y</HTML>. Dentro de este documento, podemos asimismo distinguir dos partes principales:

El encabezado, delimitado por<head> y</head> donde colocaremos etiquetas de índole  informativo como por ejemplo el titulo de nuestra página.

El cuerpo, flanqueado por las etiquetas<body> y</body>, que será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.

El resultado es un documento con la siguiente estructura:
<HTML>
<Head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero que son importantes para catalogarla: Titulo,
Palabras clave,...
</Head>
<Body>
Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el navegador: Texto e imágenes
</Body>
</HTML>
Con todo lo que conocemos ya sobre HTML podemos construir una página web que ya tiene
Bastante sentido. Vemos un ejemplo a continuación.
<Html>
<Head>
<Title>Elaboración de Páginas Web</title>
</head>
<Body>
<p><b>Bienvenido,</b></p>
<p>Estás en la página <b>Elaboración de Páginas Web de Tercer Semestre</b>.</p>
<p>Aquí aprenderás de manera personal a realizar tu pagina web.</p>
</body>
</html>
Cómo ya hemos dicho el HTML es un lenguaje de marcas (etiquetas). Así todo nuestro texto Estará encerrado entre etiquetas: Una etiqueta de inicio y una etiqueta de fin.
Funcionan de la siguiente manera:
<Etiqueta> inicio de una etiqueta
</Etiqueta> el cierre de una etiqueta.
Algunas etiquetas, que iremos viendo a lo largo del manual, no llevan etiqueta de cierre, en ese caso se cierra, dentro de la propia etiqueta, tal y cómo vemos a continuación.
<etiqueta /> Los elementos que no llevan etiqueta de cierre, se cierran en la misma etiqueta de apertura, por ejemplo: <br />
Las etiquetas deben de ir siempre en minúsculas. Encontrarás muchas páginas WEB en las que las etiquetas están en mayúsculas, hasta el HTML 4.0 era indiferente la utilización de minúsculas o mayúsculas y muchos autores utilizaban las mayúsculas por claridad.
Todo lo que vaya entre dos etiquetas HTML se verá afectado por éstas, por ejemplo:

<h1>Esto es un encabezado</h1>
<p>Pero esto no, esto es un párrafo</p>
Estas son algunas de las etiquetas más utilizadas:
< HTML>marcan el inicio y el final de una página web< /HTML>
< title>establece un titulo para la pagina< /title>
< body bgcolor="">establece un color de fondo para la pagina
< body background="">establece una imagen de fondo para la pagina < body
text="">establece el color de letra en la pagina
< h1>establece un encabezado en la pagina< /h1> < hr>agrega una línea separadora
Etiquetas de texto
< b>pone el texto en negrita
< i>pone el texto en cursiva< /i>
< Font color="">cambia el color de texto
< Font size="">cambia el tamaño del texto
< Font face=""> cambia el tipo de letra < Font color=""size=""face=""> cambia el color el
Tamaño y el tipo de letra< /Font>
Etiquetas de enlace
< aref0"">texto< /a>añade un enlace utilizado la palabra texto
< ahref="">< img src="">< /a>añade un enlace utilizando una imagen
Etiquetas de imagen
< img src="">permite añadir una imagen a la pagina
< img src=""align0"top">alinea el titulo de la imagen en la parte superior < img src=""align="middle">alinea el titulo de la imagen en la parte de en medio < img src=""align"bottom"> alinea el titulo de la imagen en la parte inferior