martes, 30 de julio de 2013

Formulario <form>

Fecha: Julio-31-2013
Asignatura: Tecnología e Informática.
Formación en Valor: Alegría.
Núcleo Integrador: Formularios <Form> - Atributos.
Objetivo: Identificar y aplicar los atributos de los formularios..

Un formulario es un elemento que permite recoger datos introducidos por el usuario.
Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.
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.
Los formularios se insertan a través de las etiquetas <form> y </form>. Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario. la etiqueta <form>tiene los siguientes atributos:

Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios, para introducir pedidos a través de la red, tienen multitud de aplicaciones.

Los formularios se insertan a través de las etiquetas <form> y </form>. Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario. la etiqueta <form>tiene los siguientes atributos:

El atributo action indica una dirección de correo electrónico a la que mandar el formulario, o la dirección del programa que se encargará de procesar el contenido del formulario.

El atributo enctype indica el modo en que será cifrada la información para su envío. Por defecto tiene el valor application/x-www-form-urlencoded.

El atributo method indica el metodo mediante el que se transferirán las variables del formulario. Su valor puede ser get o post.

El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan consultas sobre una base de datos.

El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos.

Se recomienda utilizar el valor post.

Ejercicio: Copie y pegue esta código en un documento (Bloc de Notas) y grabe el archivo como formulario.html

<html>
 <head> <title> Formularios en paginas Web </title></head>
<body>
<H1>ENCUESTA DEL COLEGIO EUCARISTICO</H1><BR>
<form action="mailto:mi_correo@gmail.com" method="post" enctype="text/plain" >
Escriba las observaciones que tenga sobre el colegio <BR>
<textarea name="Observaciones" cols="60" rows="3">Escribe tus observaciones</textarea>
 <BR>
<input name="boton" type="submit" value="Enviar">
</form>
</body>
</html>


Debe aparecer la siguiente información:

Llene la observación y luego de clic sobre el botón ENVIAR.

Nota: Si tiene cuenta con gmail. puede notar que al dar clic en el botón ENVIAR, se activa el correo y muestra la información capturada. lista para enviar al correo.

miércoles, 10 de julio de 2013

Fecha: Julio 10 de 2013
Asignatura: Tecnología e Informática.
Formación en Valor: Lealtad.
Núcleo Integrador: Marcos <Frameset> - Atributos.
Objetivo: Conocer y aplicar los atributos de la etiqueta <Frameset>


Marcos <frameset>

Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.
Cuando se insertan las etiquetas <frameset> y </frameset> no hay que insertar las etiquetas <body> y </body>, ya que el cuerpo del documento será el cuerpo de las páginas que se carguen en cada uno de los marcos del conjunto de marcos.

Las etiquetas <noframes> y </noframes> se utilizan para que su contenido sea visualizado en aquellos navegadores que no soportan los marcos.
Para indicar qué documento se cargará en cada uno de los marcos habrá que insertar la etiqueta <frame> por cada uno de los marcos de la ventana. Estas etiquetas estarán entre las etiquetas <frameset> y </frameset>, y no necesitan etiqueta de cierre.

Taller: Desarrolle un sitio web con 5 páginas (Puede copiar y pegar la información).


1. Desarrolle una página Web con el nombre de INDEX.HTML (en el Bloc de Notas), debe tener la siguiente información:
<html>
<head>
<title>Pagina Principal de Betsauro Palomino Diaz</title>
</head>
<frameset rows="*" cols="200,*"  border="1" framespacing="0">
  <frame src="MARCO_IZQUIERDO.html" name="Frame_Izquierdo" scrolling="No" noresize="noresize">
  <frameset rows="80,*"  border="1" framespacing="0">
    <frame src="MARCO_SUPERIOR.html" name="Frame_Superior" scrolling="No" noresize="noresize">
    <frame src="Marco_Principal.html" name="Frame_Principal">
  </frameset>
</frameset>
<noframes>
<body>
 Esta Pagina no soporta Marco de Paginas
</body>
</noframes>
</html>
2. Desarrolle una página Web con el nombre de MARCO_IZQUIERDO.HTML (en el Bloc de Notas), debe tener la siguiente información:
<html>
<head>
<title></title>
</head>
<body background="Fondo_bpd.jpg" >
 <p align="center"><font color="Blue" size="3"><b>LISTA DE<br>
   OPCIONES</b></font></p>
 <p>1.<a href="Datos_Personales.html" target="Frame_Principal"> TEMA 1</a></p>
 <p>2.<a href="Estudios.html" target="Frame_Principal">TEMA 2</p>
 <p align="center"><a href="Marco_Principal.html" target="Frame_Principal"> Pagina Principal </p>
</body>
</html>
3. Desarrolle una página Web con el nombre de MARCO_PRINCIPAL.HTML (en el Bloc de Notas), debe tener la siguiente información:
<html>
<head>
<title></title>
</head>
<body>
<center>
 ESCRIBA EL TEXTO DEL TEMA PRINCIPAL
</center>
</body>
</html>

4. Desarrolle una página Web con el nombre de MARCO_SUPERIOR.HTML (en el Bloc de Notas), debe tener la siguiente información:
<html>
<head>
<title></title>
<body background="Imagen_Fondo.jpg">
<center>
    <font color="red" size="6" face="Monotype Corsiva">
       <b>Pagina Oficial </b>
    </font>
</center>
</body>
</html>

NOTA: Se debe crear dos archivos mas de tipo bloc de notas y grabarlos con estos nombres:
Datos_Personales.html
Estudios.html

El archivo principal es INDEX.HTML  el cual al momento de ejecutar (DOBLE CLIC SOBRE EL ARCHIVO) se muestran todas las páginas en diferentes marcos, el resultado es el siguiente:
TALLER:
DESARROLLE UN SITIO WEB PARA UNA EMPRESA CON LAS SIGUIENTES CARACTERÍSTICAS:
1. MENÚ DEL LADO IZQUIERDO.
2. TITULO EN MOVIMIENTO.
3. EN LA VENTANA PRINCIPAL DEBE TENER INFORMACIÓN DE PUBLICIDAD SOBRE SU EMPRESA Y LOS PRODUCTOS QUE ESTA VENDE.
4. DEBE TENER COMO MÍNIMO 6 PÁGINAS.
5. UTILICE EL EJEMPLO DEL TALLER ANTERIOR COMO GUÍA