Curso completo de HTML - Practica 4 - Pagina Web con una estructura creada con tablas

Paso 1 - Planificación

En todo proceso de creación y diseño de páginas Web el primer paso a llevar a cabo será la planificación, antes incluso de escribir la primera línea de código. En esta planificación deberemos:

1. Fijar cuales son nuestros objetivos con la creación las páginas

2. Pensar que tipo de personas visitarán nuestra página para adaptar su contenido a ellas.

3. Planear el contenido que queremos incluir en las páginas.

4. Planificar la estructura general del sitio Web y la información que debe haber en cada una de las páginas.

5. Diseñar la disposición de los elementos en cada una de las páginas. En general la página principal será ligeramente distinta al resto pero debe mantener suficientes similitudes.

6. Lo más probable es que existan otras tareas a llevar a cabo específicas del Web en concreto que estemos realizando.

Vayamos paso por paso realizando cada una de las tareas que acabamos de nombrar:

1. Nuestro objetivo será que las personas que visiten las páginas se interesen por las ofertas y se pongan en contacto con la agencia para contratar el viaje. Un segundo objetivo será dar una buena imagen de la compañía.

2. Todo tipo de personas podrán acceder a nuestras páginas por lo que será conveniente que puedan ser vistas con cualquier navegador.

3. En las páginas informaremos sobre el prestigio de la agencia y sus ofertas de viajes más atrayentes.

4. La página principal dará información general sobre la empresa y como contactar con ella y ofrecerá enlaces para ir a las distintas secciones del sitio Web: Ofertas, Viajes a su medida y la superOferta. En total el sitio Web quedará compuesta por cuatro páginas: la principal y tres páginas de contenido que estarán además interconectadas entre sí. En la figura 6.27 podemos ver la estructura del sitio Web de Los Alpes tal y como lo hemos planeado.

   Figura 6.27. Estructura del sitio Web de Los Alpes. La página principal tendrá enlaces a las otras tres que además estarán enlazadas entre sí.

   

5. Es hora de diseñar la disposición de los elementos en cada una de las páginas. Aquí es donde más variarán las páginas con respecto a las de las prácticas anteriores. Usando tablas para insertar el contenido tendremos una gran libertad en la colocación de los distintos elementos de la página. Para la estructura de la página principal usaremos dos tablas, la primera para la cabecera con el logo e imagen de Los Alpes y la segunda para dividir el cuerpo en dos columnas. En la de la izquierda pondremos las diferentes opciones del sitio Web y a la derecha el texto. En la figura 6.28 podemos ver un boceto de cómo quedará la página. Las líneas azules discontinuas representan los bordes de las tablas que necesitaremos usar.

   Figura 6.28. Boceto de la disposición de los elementos en la página principal y las tablas que vamos a necesitar crear para conseguir esa visualización.

   

   Un buen truco para cuando creemos la estructura de un documento HTML basándonos en tablas es mantener el borde visible, BORDER="1", para asegurarnos que toma la forma que deseamos. Cuando ya sepamos que funciona bien eliminaremos el borde, BORDER="0".

   El resto de páginas serán ligeramente distintas. La tabla del encabezado tendrá una fila más con las opciones del sitio Web y con un botón para volver a la página principal. El cuerpo se dividirá en el texto (derecha), y una serie de anclas a las distintas secciones (izquierda) de ese mismo documento HTML. En la figura 6.29 podemos ver la estructura general de estas páginas.

   Figura 6.29. Boceto de la disposición de los elementos del resto de páginas. Aunque conserva un parecido con la página principal hay algunos cambios.

   

Una vez hemos creado la estructura del sitio Web y ya tenemos una idea de cómo va a ser la disposición de los elementos en el sitio Web es hora de empezar a escribir el código.

Código básico

En primer lugar ejecutamos nuestro editor texto o editor de HTML favorito, ya sea el bloc de notas, el editor HTML de FrontPage o cualquier otro, y creamos un archivo nuevo. Es recomendable crear un archivo nuevo porque aunque usaremos parte del código escrito en la práctica 2 y 3 los cambios serán significativos y modificar ese código sería algo complicado.

Una vez tenemos delante un archivo nuevo escribimos las etiquetas que definen la estructura del documento HTML:

 <HTML>
  <HEAD>
  <TITLE>Agencia de viajes LOS ALPES</TITLE>
  </HEAD>
  <BODY>
  <!-- Resto del código -->
  </BODY>
  </HTML>