Práctica 2 - Creando páginas Web

1. Objetivos

En esta práctica veremos cómo crear páginas HTML. Emplearemos los elementos más comunes: texto, imágenes, tablas, formularios...

2. Introducción

No es necesario ningún tipo de editor especial para crear páginas HTML. Las páginas HTML son simples ficheros de texto ASCII. Editando directamente el fichero ASCII tendremos un mayor control sobre la página que empleando un editor de HTML comercial y entenderemos mejor cómo funciona la sintaxis de HTML.

Dado que los ficheros han de ser de texto ASCII lo mejor es emplear un editor sencillo de con o sin interfaz gráfico amigable (vi, pico, emacs, nedit, etc en Linux). Si se emplea un procesador de texto como Microsoft Word, StarOffice u otros hemos de recordar grabar el fichero como Texto o Solo texto. Si no el procesador de texto empleará algún formato propio que le permite guardar información especial (como por ejemplo qué letras están en negrita), formato que no entenderá el navegador Web.

3. Configuración del Apache para servir directorios de usuarios

En la práctica sobre configuración de Apache vimos cómo especificar el directorio raiz de las páginas Web. Podemos configurar más directorios para ser servidos, asociándolos normalmente a usuarios. Para ello se supone que tenemos una serie de directorios que son los HOME de los usuarios, donde el directorio tiene el mismo nombre que la cuenta del usuario (típico esquema en máquinas UNIX aunque podrían colocarse estos directorios fuera de los HOME). Le podemos indicar al Apache que cuando lleguen solicitudes hacia http://servidor/~auser/ sirva los ficheros de dentro del directorio del usuario auser/dirdewebs.

Vea cómo hacerlo en:
http://httpd.apache.org/docs/2.0/howto/public_html.html

Cambie la configuración de su servidor Web para que vuelva a servir solo los ficheros de /opt3/lir/lirXY/apache/htdocs por el puerto 8080, retirando los Virtual Hosts. Configúrelo para que sirva páginas web del directorio www dentro del HOME de cada usuario lirXY. Pruébelo creando ese directorio en su HOME y colocando ahí las páginas que va a crear a continuación. La primera página será el index.html

4. Páginas Web a crear

Vamos a crear tres páginas HTML enlazadas entre sí. El aspecto de las páginas debe ser el siguiente:

1. Página principal:
   Esta página se sirve por defecto al solicitar http://localhost:8080/~lirXY/practica2
   
   
2. Página de guiones de prácticas:
   
   
3. Página de formulario para prácticas
   
   

Deben intentar crear unas páginas Web lo más parecidas posible a las presentadas: tablas, tamaños de letras, sombreados, enlaces, bordes, alineamientos, etc. Para ello emplee elementos estándar HTML (no use elementos o tags deprecated). Para estar seguro que el código HTML sigue el estándar use las opciones "Validate by File Upload" o "Validate by Direct Input" del validador del W3C http://validator.w3.org/

A continuación resaltamos algunas características de las páginas.

A. Página principal

Elementos reseñables:

1. Texto justificado y con sangría.
2. Una lista ordenada numerada.
3. Un enlace a la segunda página.
4. Un enlace a la tercera página.
5. Al pinchar aquí se intenta enviar un mensaje de correo electrónico a esa dirección.
6. Esto es un encabezado, use un elemento apropiado para él.
7. Esto es un encabezado de nivel inferior al anterior, use un elemento apropiado para él.

B. Página de clases

1. Estos elementos son imágenes. El borde rojo no es parte de la imagen sino que está creado mediante estilos. Emplee unas imágenes cualesquiera que se ajusten.
2. Este enlace lleva de vuelta a la página principal.

C. Página de formulario para prácticas

1. De nuevo recuerde fijarse en los justificados, sangrados, etc.
2. Toda esta zona tiene una imagen repetida de fondo.
3. Aquí no caben más que los 8 dígitos del DNI.
4. Atención a los textos pequeños e inclinados.
5. Aquí solo caben los 5 dígitos del NIA.
6. Este desplegable contiene una lista de todos los grupos de prácticas disponibles (lir01 a lir10) y no hay uno seleccionado por defecto.
7. Solo se puede seleccionar uno y por defecto viene seleccionado el Miércoles.
8. Al pinchar se vuelve a la página principal sin enviar el contenido del formulario.

Además al pulsar el botón del formulario se enviará su contenido mediante el método POST al script nuevogrupo.php

Notas: El marco de las imágenes de las páginas en este documento representa parte de la ventana del navegador, las páginas no están enmarcadas por un borde negro de 2 píxeles. Hay partes del texto de las páginas que van en color.

Pueden usar el siguiente código como base para los HTMLs (tanto los de hoy como los del resto de prácticas):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>titulo de la pagina</title>
<style type="text/css">
<!--
/* Aqui van los estilos */
-->
</style>
</head>
<body>
<!-- Aqui va el contenido -->
</body>
</html>

Checkpoint
Muestren al profesor de prácticas estas páginas servidas desde su HOME. Tengan en cuenta que se comprobará que cumplen con el estándar (sea el estándar HTML que hayan seleccionado) para su valoración.

5. Conclusiones

Hemos creado unas páginas HTML lo cual nos ha permitido tomar contacto con el lenguaje, sus capacidades y limitaciones. En las siguientes prácticas necesitaremos crear páginas HTML dado que serán el interfaz con el usuario.