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

Paso 3 - Estructura de la página principal

El siguiente paso consistirá en dar la estructura a las páginas y aquí es donde empezamos a poner en práctica nuestros conocimientos sobre tablas. Por ahora vamos a centrarnos en crear la página principal, index.htm. En la figura 6.28 veíamos cómo planeamos colocar los distintos elementos. Es hora de escribir el código necesario para llevar esa planificación a la práctica. Serán necesarias dos tablas ambas de una fila y dos columnas.

 <TABLE ALIGN="center">
  <TR>
  <TD><!-- Logo --></TD>
  <TD><!-- Los alpes --></TD>
  </TR>
  </TABLE>
  <TABLE WIDTH="100%">
  <TR>
  <TD><!-- Opciones --></TD>
  <TD><!-- texto --></TD>
  </TR>
  </TABLE>
       

La primera de las tablas la hemos centrado usando el atributo ALIGN. La segunda nos convendrá que ocupe todo el ancho posible, por lo que usamos WIDTH="100%". Después de la segunda tabla simplemente pondremos datos relacionados con la elaboración de la página (dirección Webmaster, Copyright, fecha actualización, etc.). A este tipo de información incluida generalmente al final de las páginas se le denomina en ocasiones coletilla. A continuación podemos ver el código de nuestra coletilla.

 <ADDRESS>
  <SMALL>
  Web realizado por: <FONT COLOR="#EDB301">TowerWeb</FONT>
  <BR>
  Copyright © 1998 Los Alpes - Agencia de viajes<BR>
  Última actualización: 9 de marzo de 1998
  </SMALL>
  </ADDRESS>
       

En la figura 6.31 vemos el resultado de este código. En esta figura vemos un adelanto de la imagen de fondo y color del texto que más adelante incluiremos en la página, además hemos incluido un texto adicional (sólo en la página principal) para animar a los visitantes a hacer sugerencias sobre la página.

Como vemos, hemos usado la etiqueta SMALL para que el texto de la coletilla sea menor que el del resto de la página.

Esta coletilla la repetiremos en cada una de nuestras páginas, y posteriormente iremos cambiando la fecha de la última actualización en cada una individualmente.

Paso 4 - Estructura del resto de páginas

La disposición de los elementos Web en el resto de páginas será muy similar a la de la página principal. En este caso crearemos en primer lugar una página con el código que deben compartir todas las páginas del sitio Web y lo guardaremos en un archivo de nombre plantilla.htm. Para crear el resto de páginas usaremos como base el código de este archivo, que será: el código base que escribimos en el paso 2 más:

 <TABLE ALIGN="center">
  <TR>
  <TD><!-- Logo --></TD>
  <TD><!-- Los alpes --></TD>
  </TR>
  <TR>
  <TD><!-- Opciones --></TD>
  </TR>
  </TABLE>
  <TABLE WIDTH="100%">
  <TR>
  <TD><!-- Secciones --></TD>
  <TD><!-- texto --></TD>
  </TR>
  </TABLE>
       

También podremos añadir una coletilla con datos sobre la página Web al igual que hacíamos en el caso de la página principal.

Paso 5 - Contenido de la página principal

Terminada la planificación y una vez creada la estructura de las páginas ahora es cuando empezaremos a ver los resultados de nuestro trabajo. Empezaremos poniéndole contenido a la página principal. En este momento recuperamos el código que escribimos en el paso 3 y empezamos a rellenar las celdas de las tablas. Empezamos con la primera tabla. En la celda de la derecha ponemos el logo de Los Alpes y en la de la derecha ponemos el letrero. Como en ambos casos debemos insertar imágenes usamos la etiqueta IMG de la siguiente manera:

 <CENTER>
  <TABLE ALIGN="center">
  <TR>
  <TD><IMG SRC="img/logo.gif" WIDTH=90 HEIGHT=99 ALT="[LOGO]"></TD>
  <TD><IMG SRC="img/losalpes.gif" WIDTH=440 HEIGHT=99 ALT="LOS ALPES - Agencia de Viajes"></TD>
  </TR>
  </TABLE>
  </CENTER>
       

Es el momento de rellenar la segunda de las tablas. La columna de la derecha la planeamos para insertar el texto de la página. En ella insertamos una breve descripción de la Agencia de viajes Los Alpes para darla a conocer (podremos ver este texto completo en la figura 6.32). A continuación ponemos las direcciones de las sedes en Madrid y Barcelona de los Alpes. Si recordamos en la práctica 2 usamos la etiqueta PRE para introducir dichas direcciones. Ahora podemos usar las tablas para conseguir el mismo efecto y con mejores resultados:

 <TABLE WIDTH="100%">
  <TR>
  <TD><!-- Opciones --></TD>
  <TD><!-- texto -->
  <P>La agencia de viajes Los Alpes goza de un gran prestigio en el mundo de los ...
  <TABLE BORDER="1" CELLSPACING=5>
  <TR><TD>
  <STRONG><U>MADRID</U></STRONG><BR>
  C/JOSE ACANA, 9 BAJO<BR>
  28333 MADRID<BR>
  TELF. 921 99 39<BR>
  FAX. 921 99 38<BR>
  </TD><TD>
  <STRONG><U>BARCELONA</U></STRONG><BR>
  C/ALBERTO BUSQUETS,13 QUINTO A<BR>
  08333 BARCELONA<BR>
  TELF. 933 33 23<BR>>
  FAX. 933 33 24<BR></TD></TR>
  </TABLE>
  </TD>
  </TR>
  </TABLE>
       

Ya podemos dar por terminada la columna de la derecha de la página principal. La columna de la izquierda tendrá enlaces a las distintas páginas del sitio Web y volveremos sobre el código usado en el paso 6 al hablar del contenido gráfico. Por ahora podemos ver un adelanto de cómo va a quedar esta página principal mostrado en la figura 6.32.