Clase Práctica #2 HTML y CSS. Objetivos: Continuar el trabajo con elementos del leguaje HTML. Formularios. Crear hojas de estilo en cascada para un sitio web, y estilos específicos de una página web. Bibliografía: 1. Deitel & Deitel. e-business & e-commerce. How to program. Capítulos 9, 10. p.259-317, Capítulo 19, p. 589-614. 2. Hernán Ruiz, Marcelo. Programación Web Avanzada. Capítulos 2 y 4. Colección: Manuales USERS. Editorial: MP Ediciones. Buenos Aires, Argentina. ISBN: 987-526-115-7. Introducción En la clase pasada estudiamos otros aspectos de la programación en HTML. Conocimos los formularios, y cómo estos permiten recolectar información a través de los elementos que lo componen. Estudiamos también las diferentes formas de crear estilos y la utilidad de estos para concentrar en un solo lugar la especificación de cómo se verán nuestras etiquetas HTML. En esta actividad práctica aplicaremos los contenidos recibidos, para implementar algunas páginas del sitio que comenzamos a desarrollar en la clase anterior. Desarrollo 1. Se desea continuar la implementación del sitio de la clase anterior, cuya estructura de directorios es la que se muestra en la figura 1. Figura 1. Estructura de directorios del sitio Noticias. 1.1 Proponga las variantes al código html de la página index.html para que se muestre como aparece en la figura 2, con viñetas en cada uno de los titulares. a. Escriba las reglas del estilo incluido en esa página que quite el subrayado de todos los vínculos dentro de los elementos LI de la lista de noticias.
Enlace a formcontactar.html Enlaces a kyoto.html books.html p4_homework.html respectivamente Figura 2. Página index.html 1.2 Proponga el código html de la página formcontactar.html para que se muestre como en la figura 3. a) Cree un selector propio de nombre text a incorporar al fichero global.css, de manera que se puedan definir textos en azul, con letra Verdana u otra de la familia sans-serif y tamaño de letra 12 px. Aplique el selector creado a las etiquetas del formulario. b) Cree un estilo a aplicar al hipervínculo Regresar, de manera tal se muestre azul en estado normal, cuando el mouse pase por encima del texto, la letra sea cursiva, y cuando la página se haya visitado se muestre roja. Aplique el estilo al enlace. Al dar clic en Enviar la información será enviada a la página contactar_accion.php, que será la encargada de enviar el mensaje y los datos de la persona que escribe. Al dar clic en Limpiar, deben limpiarse los datos del formulario.
Figura 3. Página formcontactar.html 1.3. Proponga el código html de la página formregistrarse.html para que se muestre como en la figura 4. Figura 4. Página formregistrarse.html.
Al dar clic en Enviar, la información será enviada a la página registrarse_accion.php, que será la encargada de almacenar en la base de datos, un nuevo registro correspondiente a este usuario. Al dar clic en Limpiar, deben limpiarse los datos del formulario. Solución 1.1 Página index.html <html> <head> <title>noticias del día</title> <style> LI A {text-decoration:none; </style> </head> <body> <p align="left"><font color="#000066" size="4" face="verdana, Arial, Helvetica, sansserif">noticias del día</font></p> <ol> <li><a href="noticias/kyoto.html">firman más de 100 países el Protocolo de Kyoto</a></li> <li><a href="noticias/books.html">continúa la Feria del Libro por las provincias occidentales</a></li> <li><a href="noticias/p4_homework.html">hoy se darán a conocer los requisitos de la tarea de P4</a></li> </ol> <hr> <p><font size="2" face="verdana, Arial, Helvetica, sans-serif"><a href="usuario/ formcontactar.html ">Contáctenos</a></font></p> </body> </html> 1.1 a) <style> LI A {text-decoration:none; </style> 1.2 Página formcontactar.html <html> <head> <title>contáctenos</title> <link href="../css/global.css" rel="stylesheet" type="text/css">
</head> <body> <form name="frmcontactar" method="post" action=" contactar_accion.php "> <table width="200" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000099"> <td><div align="center"><font size="2" face="verdana, Arial, Helvetica, sansserif"><strong>contáctenos</strong></font></div></td> <td><table width="200" border="0" cellspacing="0" cellpadding="0"> <td colspan="2"></td> <td class="text" align="right">nombre:</td> <td><input name="tfdnombre" type="text" id="tfdnombre"></td> <td class="text" align="right">email:</td> <td><input name="tfdemail" type="text" id="tfdemail"></td> <td valign="top" class="text" align="right">mensaje:</td> <td><textarea name="textarea"></textarea></td> <td colspan="2"> </td> <td colspan="2" align="center"> <input name="btnsubmit" type="submit" id="btnsubmit" value="enviar"> <input name="btnreset" type="reset" id="btnreset" value="limpiar"> </td> </table></td> </table> </form> <p align="center"><a href="../index.html">regresar</a> </p> </body> </html> 1.2 a).text { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000066; 1.2 b)
a:link { color: #000066; a:hover { font-style: italic; a:visited { color: #FF0000; 1.3. Página formregister.html <html> <head> <title>registro de usuario</title> <link href="../css/global.css" rel="stylesheet" type="text/css"> </head> <body> <div align="center" class="text">complete sus datos en el formulario siguiente</div> <form id="frmusuario" name="frmusuario" method="post" action="registrarse_accion.php"> <table width="400" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000099"> <td align="center" class="text"><strong>datos del nuevo usuario </strong></td> <tr class="titular"> <td><table width="420" border="0" align="center"> <td width="215" align="right" class="text">nombre y apellidos:</td> <td width="186" class="text"><input name="tfdnombreapell" type="text" id="tfdnombreapell" size="30" /></td> <td align="right" class="text">sexo:</td> <td class="text"><select name="sltsexo" id="sltsexo"> <option>seleccione</option> <option>femenino</option> <option>masculino</option> </select> </td> <td align="right" class="text">email:</td> <td class="text"><input name="tfdemail" type="text" id="tfdemail" /> </td> <td align="right" class="text">contraseña:</td> <td class="text"><input type="password" name="tfdpassword" /> </td> <td align="right" class="text">confirme su contraseña: </td>
<td class="text"><input name="tfdpassconfirm" type="password" id="tfdpassconfirm" /> </td> <td align="right" class="text">recibir boletín diario de noticias </td> <td class="text"><label> <input name="chkrecibir" type="checkbox" id="chkrecibir" value="checkbox" /> </label></td> <td align="right" class="text"><input name="btnenviar" type="button" id="btnenviar" value="enviar" /></td> <td class="text"><input name="btnlimpiar" type="reset" id="btnlimpiar" value="limpiar" /> </td> </table></td> </table> </form> </body> </html> 2. Escriba las reglas de un CSS que le permita definir el tamaño de los textos como 1.5 mayor que la letra base del sistema, y que además los muestre en color azul. Incorpore este estilo en el fichero del ejercicio anterior. Solución <STYLE>.redstyle {font-size: 1.5em ; color: blue; </STYLE> 3. Escriba la regla que permita que la etiqueta EM, en vez de definir que un texto está en letra cursiva, establezca que se subraye. Incorpore este estilo en el fichero del ejercicio anterior. Solución <STYLE> EM {text-decoration: underline; font-style: normal; </STYLE> Conclusiones En esta clase práctica se crearon páginas que incluían listas, así como formularios para recolectar información de los usuarios. Con este propósito se utilizaron algunos de los elementos propios de los formularios, en función de la información a captar. Además se crearon estilos dentro de un documento web, así como estilos definidos en un archivo externo, reutilizable en todas las páginas del sitio. Motivación para la próxima clase En la próxima clase conoceremos qué es el DOM, y cómo trabajar con él. Además estudiaremos elementos básicos de la programación en JavaScript.