Este documento proporciona instrucciones paso a paso para crear un formulario HTML y aplicarle estilos CSS utilizando el entorno de desarrollo NetBeans. El objetivo es que los estudiantes aprendan a construir formularios en HTML y añadirles formato con hojas de estilo externas, habilidades que podrán aplicar en su proyecto final. El documento guía al estudiante a través de 7 pasos para crear las capas, añadir los campos del formulario en HTML y vincular una hoja de estilos CSS para dar formato a las

1. Material 1.
Materia Desarrollo de aplicaciones web.
Objetivo General. El alumno, al finalizar la unidad I, será competente para
construir un sitio web estático con XHTML, CSS y JavaScript; a
través de prácticas, situaciones reales propuestas por el
docente y obtener una calificación de 8.0 o más de un examen
práctico evaluado de acuerdo con la rúbrica B.
Unidad. Fundamentos de Sitios Web.
Tema. Lenguaje XHTML
Objetivo de la
práctica.
El alumno creara un formulario HTML aplicando un estilo
utilizando el entorno de desarrollo de NetBeans 6.9.
Material de Apoyo. o Introducción a HTML.pdf
o Introducción a CSS.pdf
Instrucciones.- A continuación se muestra una tabla en la cual se explica la creación de un
formulario en HTML agregando un estilo con CSS, sigue la práctica paso a paso para que logres
el resultado esperado.
Actividad 1: Practica guiada.
1.-Crea un proyecto PHP en
NetBeans con el nombre de
formEstilo
2.-Dentro del proyecto, crea una
página HTML con el nombre
formulario.
3.-Agrega dentro del cuerpo de la
página dos capas con el nombre
de “Principal” y “formulario.”
<div id="principal">
<div id="formulario">
</div>
</div>
4.-Dentro de la capa “formulario”
agrega 5 cajas de texto con las
etiquetas de nombre, A. Paterno,
A. Materno, Teléfono y Dirección.
También debes agregar un
submit como se muestra en el
código.
<form method="" action="">
<center>
<table>
<tr><td>Nombre</td>
<td><input type="text" size="20"</td></tr>
<tr><td>A. Paterno</td>
<td><input type="text" size="20" </td></tr>
<tr><td>A. Materno</td>
<td><input type="text" size="20" </td></tr>
<tr><td>Dirección</td>
<td><input type="text" size="20" </td></tr>
<tr><td>Teléfono</td><td>
<input type="text" size="20" </td></tr>
<tr><td colspan="2" align="center">
<input type="submit" value="Enviar"></td></tr>
</table>
</center>

2. </form>
5.- Crea un archivo CSS con el
nombre “estilo.css” y agrega en
el siguiente código para dar
presentación a las capas creadas
en HTML.
#principal{
width: 80%;
height: 100%;
position: absolute;
left: 10%;
background-color: #ffffff;
}
#formulario{
width: 50%;
height: 100%;
position: absolute;
left: 25%;
background-color: #cecff1;
}
6.-Agrega dentro de la cabecera
de la página la siguiente línea
para enlazar la hoja de estilo con
el HTML.
<link rel="StyleSheet" type="text/css" href="estilo.css">
7.- Ejecuta tu página.
8.- El resultado debe ser el
parecido a lo siguiente.
Resultados: Al terminar la práctica aprenderás a crear formularios en HTML y aplicar estilo
mediante un archivo externo, estos conocimientos los podrás aplicar para crear tu proyecto
final de la asignatura.
Bibliografía.
A continuación te presento dos links con los que puedes ampliar la información acerca de esta
actividad.
http://librosweb.es/
http://programando.la/
https://www.dropbox.com/sh/bqlwdfdv5mka6e7/HJBsZlKKET