domingo, 20 de mayo de 2012

PRACTICA 8: “CREACION DE FORMULARIOS”

<html>
<head><title>PRACTICA 8: FORMULARIOS </title></head>
<body>

<h1><center><font color="red"> FORMULARIOS </font> </center> </h1>
<hr>

<P> Los formularios mas sencillos se pueden crear utilizando solamente 2 etiquetas FORM e INPUT <br>
La etiqueta FORM encierra todos los contenidos del formulario (botones, cuadros de texto, listas desplegables <br>
entre otros) y la etiqueta INPUT permite definir varios tipos diferentes de elementos como los botones y los cuadros de texto.</p>

<p> <font color="blue"> Formulario sencillo definido con las etiquetas form e input </font></p>

<form action="http://www.librosweb.es/maneja_formulario.php" method="post">
Escribe tu nombre:
<input type="text" name="nombre" value="" />

<br>

<input type="submit" value="Enviar" />
</form>


<h2><center><font color="red"> <u>Elementos de un formulario</u> </font> </center> </h2>
 <hr>

<p> <font color="blue">Ejemplo de la etiqueta input atributo type=TEXT </font><br>
CUADRO DE TEXTO</p>

 Nombre <br>
<input type="text" name="nombre" value="" />

 <hr>
<p> <font color="blue">Ejemplo de la etiqueta input atributo type=PASSWORD </font><br>
CUADRO DE CONTRASEÑA</p>

 Contraseña <br>
<input type="password" name="contrasena" value="" />

<hr>
<p> <font color="blue">Ejemplo de la etiqueta input atributo type=CHECKBOX </font><br>
CASILLAS DE VERIFICACION "CHECKBOX"</p>
Puestos de trabajo buscados <br/>
<input name="puesto_directivo" type="checkbox" value="direccion"/> Dirección <br>
<input name="puesto_tecnico" type="checkbox" value="tecnico"/> Técnico <br>
<input name="puesto_empleado" type="checkbox" value="empleado"/> Empleado <br>

 <hr>
<p> <font color="blue">Ejemplo de la etiqueta input atributo type=RADIO </font><br>
RADIOBUTTON</p>
Sexo <br/>
<input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre
<input type="radio" name="sexo" value="mujer" /> Mujer

<hr>
<p> <font color="blue">Ejemplo de la etiqueta input atributo type=SUBMIT </font><br>
BOTON DE ENVIO DE FORMULARIO</p>
 <input type="submit" name="buscar" value="Buscar" />

 <hr>
<p> <font color="blue">Ejemplo de la etiqueta input atributo type=RESET </font><br>
BOTON DE RESETEO DEL FORMULARIO</p>
<input type="reset" name="limpiar" value="Borrar datos del formulario" />

<hr>
<p> <font color="blue">Ejemplo de la etiqueta input atributo type=FILE </font><br>
FICHEROS ADJUNTOS</p>
Fichero adjunto
<input type="file" name="adjunto" />

<br>
<P>Si se incluye un control para adjuntar archivos, es obligatorio añadir el atributo enctype en la <br>
etiqueta FORM del formulario. El valor del atributo enctype debe ser multipart/form-data, <br>
por lo que la etiqueta FORM de los formularios que permiten adjuntar archivos siempre es:<br>

 form action="..." method="post" enctype="multipart/form-data" <BR>
...

<BR>
/form
</P>

<hr>
<p> <font color="blue">Ejemplo de la etiqueta input atributo type=BUTTON </font><br>
BOTON</p>
<input type="button" name="guardar" value="Guardar Cambios" />

<hr>
<h2> NOTA:</h2>
<p> Recuerde que todos los elementos deben de ir encerrados en la etiqueta FORM respectivamente de apertura y de cierre.</p>

</body>
</html>

PRACTICA 7: “MANEJO DE TABLAS”

<html>
<head> <title> practica 7: TABLAS </title>
</head>
<body>

h2><center> <font color="red"> Tablas </font></center></h2>
<hr>
<p> Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio.
<br>
<br>Ejemplos:
<br>

<TABLE BORDER=3 CELLPADDING=10>
<TD>
Texto en una celda.
</TD>
</TABLE>

<br>

<TABLE BORDER=2 CELLPADDING=5>
<TD> Celda 1 </TD>
<TD> Celda 2 </TD>
</TABLE>

<br>

<TABLE BORDER=5 CELLPADDING=8>
<TD> Celda 1 </TD>
<TD> Celda 2 </TD>
<TR>
<TD> Celda 3 </TD>
<TD> Celda 4 </TD>
</TABLE>

<br>

<TABLE BORDER=5>
<TH ALIGN=RIGHT>Nombre</TH>
<TH> Significado </TH>
<TR>
<TD> HTML </TD>
<TD> Hyper Text Markup Language </TD>
</TABLE>

<br>

<TABLE BORDER=2>
<TH bgcolor="cyan"> Plataforma </TH>
<TH COLSPAN=2 bgcolor="silver">Navegador</TH>
<TR>
<TD>Unix </TD>
<TD ROWSPAN=2>utilizar</TD>
<TD>Mosaic<BR>Lynx</TD>
</TR>
<TR>
<TD>Windows 95</TD>
<TD>Netscape<BR>
 Explorer</TD>

</body>
</html>


PRACTICA 6: “INSERCION DE IMAGENES”

<html>
<head>
<title>practica 6: IMAGENES</title>
</head>
<body>

<hr>
<h2><center> <font color="red"> Agregar imágenes </font></center></h2>
<hr>

<p> Para agregar una imagen digite img src="?", remplazando el signo de interrogacion (?) con la ubicacion de la imagen. Los tipos de imágenes más utilizados en la WWW son GIF o JPEG

<br> Ejemplo:</br> </p>
<IMG SRC="C:\bebe.jpg" width="178" height="180">
<br>

<p><img src="C:\mono.jpg" alt="Mono" align="left" border="1" hspace="10" width="250" height="170"></font>

Esta imagen tiene los atributos: <font color="#0000FF">align=left , hspace=10 , width=250 , hight=170 , border=1 , alt=&quot;Mono&quot;</font> y como quiero que después de estos comentarios el texto salte debajo de la imagen escribo:<br>

<font color="#0000FF">&lt;br clear=all&gt;</font><font   size="2"><br>
<br clear="all">
</font>

Como ves, esto está debajo de la foto</p>

<br>
<p><img src="C:\aguila.jpg" alt="Aguila" align="right" border="5" hspace="1" width="250" height="165">Esta otra tiene los atributos: <font color="#0000FF">align=right , hspace=1 , border=5 , alt=&quot; Aguila&quot; width=250 , height=165</font>. También debería de escribir<font color="#0000FF"> &lt;br clear=all &gt;</font> para que el final de página aparezca en su sitio. Como no lo hago queda a la izquierda de la imagen. Fíjate en el borde</p>
<br>

</body>
</html>

PRACTICA 5: “AGRUPAMIENTO DE ELEMENTOS MEDIANTE LISTAS Y MARQUESINAS”

<html>
<head>
<title> PRACTICA 5 </title>
</head>
<body>

<hr>
<h2><center> <font color="red"> Listas </font></center></h2>
<hr>

<p> Una lista es un párrafo estructurado que contiene una serie de elementos. HTML define tres tipos de listas:
<ul>
            <li>Listas ordenadas</li>
            <li>Listas no ordenadas</li>
            <li>Listas de definiciones</li>
</ul>

<dl>
<dt> Listas ordenadas.
<dd> Puede crear una lista ordenada para mostrar itemes en un orden específico, como un conjunto de instrucciones o una tabla de contenidos.
<dt> Listas no ordenadas.
<dd> Puede crear una lista desordenada para mostrar itemes que no siguen un orden particular, como una lista de productos o sitios web.
<dt> Listas de definiciones.
<dd> Puedes crear una lista de definición para mostrar términos y sus significados. Este tipo de lista es ideal para un glosario, como es en este caso.
</dl>

 <p > Un ejemplo de listas ordenadas sería el siguiente.</p>
<hr width="20%" size="5" align="left">
<h4> Tabla de contenidos </h4>

 <ol>
<li> Introducción.
<li> Historial de la compañía
<li> Declaración de intenciones
<li> Productos ofrecidos
<li> Metas futuras
<li> Conclusión
</ol>

<hr width="20%" size="5" align="left">
<hr>


<hr>
<h2><center> <font color="red"> Texto en movimiento </font></center></h2>
<hr>

 <p> Podemos tener texto en movimiento gracias a las marquesinas, mediante la etiqueta marquee. Algunas de las propiedades de la marquesina más destacadas son:
<br>
<br><b>direction </b> - Dirección de la marquesina:

<blockquote>
<br>left - Hacia la izquierda
<br>right - Hacia la derecha
<br>down - Hacia abajo
<br>up - Hacia arriba
</blockquote>
<br><b>behavior</b> - Indica el tipo de marquesina:
<blockquote>
<br>scroll - Se desplaza repetidamente
<br>alternate - Se desplaza de un lado al otro
<br>slide - Se desplaza repetidamente
</blockquote>

<br><b>height </b>- Anchura de la marquesina
<br><b>width </b>- Altura de la marquesina
<br> Ejemplos: </p>

<Marquee> Esto es un texto en marquesina </Marquee>

<Marquee bgcolor=”#808000”>Esto es un texto en marquesina con color de fondo</Marquee>

<Marquee direction=right>Esto es un texto en marquesina de izquierda a derecha</Marquee>

<Marquee behavior=alternate>Esto es un texto en marquesina que se desplaza de un lado a otro</Marquee>

<marquee direction="up" height="200" width="100%" onmouseout="this.start()" onmouseover="this.stop()"> Texto desplazandose </marquee>

<p> Este ejemplo crea una marquesina vertical que se  para al pasar el mouse por encima, utiliza las funciones marquesina.start() y marquesina.stop() para arrancar y parar la marquesina y los eventos onmouseover y onmouseout para detectar la posición del mouse.</p>

<marquee bgcolor="#006699" behavior="alternate" direction="right"><b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b> </marquee>

<hr>

Practica 4: “VÍNCULOS”

<html>
<head> <title> practica 4: vínculos </title>
</head>
<body>

<hr>
<font color="red" size="10"> <center> VINCULOS </center> </font>
<hr>

 <p> <u> 1. Crear un vínculo externo hacia una dirección de página web  </u></p>
<a href="http://www.google.com"> Ir a google </a>

 <p> <u> 2. Crear un vínculo de imagen </u></p>
<a href="http://www.google.com"> <img src="C:\Users\ANA\Desktop\hola.jpg"> </a>

<p> <u> 3. Crear un vínculo dentro de una misma página </u>
<br> Ejemplo: </p>
<p> Pasos a seguir para construir una casa sencilla para pájaros </p>
 <p> PASO UNO: Preparación.
<br> <a href="#paso2"> PASO DOS: Cortar, taladrar y ensamblar </a></p>
 <p> PASO UNO: Preparación
<br> 1) Decida qué tipo de ave desea tener, considera las dimensiones de la casa.
<br> 2) Compre madera.
<br> 3) Asegúrese de tener las herramientas necesarias.
<p><a name="paso2"> </a> PASO DOS: Cortar, taladrar y ensamblar
<br> 1) Corte las tablas para que tengan las dimensiones correctas.
<br> 2) Seleccione la tabla que será el frente y taladre un orificio.
<br> 3) Con cuidado ensamble las tablas para completar la casa.

 <p> <u> 4. Crear un vínculo de correo electrónico  </u></p>
<a href="mailto:ana.velazquez@chih.conalep.edu.mx"> Envíeme un correo electrónico </a>

</body>
</html>