Sei sulla pagina 1di 28

PGINA WEB CON UNA ESTRUCTURA

CREADA CON TABLAS

SITIO WEB

Es el momento de realizar la prctica del HTML, en ella desarrollaremos el sitio Web de


la agencia de viajes Los Alpes.

El sitio Web constar de un total de cuatro pginas, y contar con contenido grfico.

Adems usaremos las tablas tanto para insertar datos como para controlar la disposicin
de los elementos de las pginas.

PASO 1 - PLANIFICACIN

En todo proceso de creacin y diseo de pginas Web el primer paso a llevar a cabo
ser la planificacin, antes incluso de escribir la primera lnea de cdigo. En esta
planificacin deberemos

PASO 1 - PLANIFICACIN
1.
2.
3.
4.
5.

6.

Fijar cuales son nuestros objetivos con la creacin las pginas


Pensar que tipo de personas visitarn nuestra pgina para
adaptar su contenido a ellas.
Planear el contenido que queremos incluir en las pginas.
Planificar la estructura general del sitio Web y la informacin que
debe haber en cada una de las pginas.
Disear la disposicin de los elementos en cada una de las
pginas. En general la pgina principal ser ligeramente distinta
al resto pero debe mantener suficientes similitudes.
Lo ms probable es que existan otras tareas a llevar a cabo
especficas del Web en concreto que estemos realizando.

Para la realizacin de las tareas cuarta y quinta debemos ser


conscientes de los conocimientos y herramientas con los que
contamos para no proponernos objetivos irrealizables. Tener un
buen conocimiento del lenguaje HTML, como ocurre en nuestro
caso, nos permitir eliminar muchas limitaciones que aparecen
en este punto de la planificacin.

TAREA 1

Nuestro objetivo ser que las personas que visiten las pginas 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 compaa.

TAREA 2

Todo tipo de personas podrn acceder a nuestras pginas por lo que ser conveniente
que puedan ser vistas con cualquier navegador.

TAREA 3

En las pginas informaremos sobre el prestigio de la agencia y sus ofertas de viajes ms


atrayentes.

TAREA 4

La pgina principal dar informacin 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 pginas: la
principal y tres pginas de contenido que estarn adems interconectadas entre s.

TAREA 4

TAREA 5

Es hora de disear la disposicin de los elementos en cada una de las pginas.Usando


tablas para insertar el contenido tendremos una gran libertad en la colocacin de los
distintos elementos de la pgina. Para la estructura de la pgina 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 podemos ver un boceto de
cmo quedar la pgina. Las lneas azules discontinuas representan los bordes de las
tablas que necesitaremos usar.

TAREA 5

TAREA 5
Boceto
de
la
disposicin de los
elementos del resto de
pginas.
Aunque conserva un
parecido con la pgina
principal hay algunos
cambios.

PASO 2 - CDIGO BSICO.

En primer lugar ejecutamos nuestro editor texto o editor de HTML favorito, ya sea el bloc
de notas, el editor HTML de DreamWeaver o cualquier otro, y creamos un archivo nuevo

PASO 2 - CDIGO BSICO.

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 cdigo -->
</BODY>
</HTML>

PASO 3 - ESTRUCTURA DE LA PGINA


PRINCIPAL.

El siguiente paso consistir en dar la estructura a las pginas y aqu es donde


empezamos a poner en prctica nuestros conocimientos sobre tablas. Por ahora vamos
a centrarnos en crear la pgina principal, index.htm. Es hora de escribir el cdigo
necesario para llevar esa planificacin a la prctica. Sern necesarias dos tablas ambas
de una fila y dos columnas.

PASO 3 - ESTRUCTURA DE LA PGINA


PRINCIPAL.
<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>

PASO 3 - ESTRUCTURA DE LA PGINA


PRINCIPAL.

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 usamosWIDTH="100%". Despus
de la segunda tabla simplemente pondremos datos relacionados con la elaboracin de la
pgina (direccin Webmaster, Copyright, fecha actualizacin, etc.). A este tipo de
informacin incluida generalmente al final de las pginas se le denomina en
ocasiones coletilla. A continuacin podemos ver el cdigo de nuestra coletilla.

PASO 3 - ESTRUCTURA DE LA PGINA


PRINCIPAL.
<ADDRESS>
<SMALL>
Web realizado por: <FONT COLOR="#EDB301">TowerWeb</FONT>
<BR>
Copyright 2014 Los Alpes - Agencia de viajes<BR>
ltima actualizacin: 20 de abril de 2014
</SMALL>
</ADDRESS>

PASO 4 - ESTRUCTURA DEL RESTO DE


PGINAS.

La disposicin de los elementos Web en el resto de pginas ser muy similar a la de la


pgina principal. En este caso crearemos en primer lugar una pgina con el cdigo que
deben compartir todas las pginas del sitio Web y lo guardaremos en un archivo de
nombre plantilla.htm. Para crear el resto de pginas usaremos como base el cdigo de
este archivo.

PASO 4 - ESTRUCTURA DEL RESTO DE


PGINAS.
<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>

PASO 5 - CONTENIDO DE LA PGINA PRINCIPAL.

Terminada la planificacin y una vez creada la estructura de las pginas ahora es cuando
empezaremos a ver los resultados de nuestro trabajo. Empezaremos ponindole
contenido a la pgina principal. En este momento recuperamos el cdigo que escribimos
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 imgenes usamos la etiqueta IMG de la
siguiente manera:

PASO 5 - CONTENIDO DE LA PGINA PRINCIPAL.


<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
</TD>
</TR>
</TABLE>
</CENTER>

Viajes">

PASO 5 - CONTENIDO DE LA PGINA PRINCIPAL.

Es el momento de rellenar la segunda de las tablas. La columna de la derecha la


planeamos para insertar el texto de la pgina. En ella insertamos una breve descripcin
de la Agencia de viajes Los Alpes para darla a conocer . A continuacin ponemos las
direcciones de las sedes en Lima e Ica de los Alpes

PASO 5 - CONTENIDO DE LA PGINA PRINCIPAL.


<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>LIMA</U></STRONG><BR>
AV. AVIACION<BR>
28333 LIMA<BR>
TELF. 951 99 93 99<BR>
FAX. 951 99 93 88<BR>
</TD><TD>
<STRONG><U>ICA</U></STRONG><BR>
CALLE HUACACHINA 188<BR>
ICA<BR>
TELF. 956 33 23 33<BR>>
FAX. 956 33 24 56<BR></TD></TR>
</TABLE>
</TD>
</TR>
</TABLE>

PASO 6 - CONTENIDO GRFICO.

La apariencia de un Web es uno de los aspectos ms importantes en la creacin de este.


A la hora de insertar grficos tenemos dos posibilidades:
Crear nuestros propios grficos usando un programa de dibujo vectorial y/o un
programa de retoque fotogrfico. Esta es, sin duda, la mejor de las dos opciones,
pero tambin es la que lleva ms tiempo as como varios programas y amplios
conocimientos de su uso por parte del creador de los grficos. Por esta razn es
comn recurrir a la segunda de las posibilidades.
Obtener las imgenes de internet o bibliotecas graficas.

PASO 6 - CONTENIDO GRFICO.

tranvha1
<TABLE ALIGN="center">
<TR>
<TD><IMG SRC="img/logo.gif" WIDTH=90 HEIGHT=99 BORDER=0 ALT="[LOGO]"></TD>
<TD><IMG SRC="img/losalpes.gif" WIDTH=440 HEIGHT=99 BORDER=0 ALT="LOS ALPES - Agencia de Viajes"></TD>
</TR>
</TABLE>
</CENTER>
<TABLE CELLPADDING="10">
<TR>
<TD VALIGN="top">
<!-- Opciones -->
<A HREF="medida.htm"><IMG SRC="img/boton1.jpg" WIDTH=136 HEIGHT=48 BORDER=0 ALT="Viajes a su medida"></A>
<A HREF="mes.htm"><IMG SRC="img/boton2.jpg" WIDTH=136 HEIGHT=48 BORDER=0 ALT="Ofertas del Mes"></A>
<A HREF="superofe.htm"><IMG SRC="img/boton3.jpg" WIDTH=136 HEIGHT=48 BORDER=0 ALT="La superOFERTA"></A>
</TD>
<TD>
<!-- texto -->
<P><FONT SIZE="+2">L</FONT>a agencia de viajes Los Alpes goza de un gran prestigio en el mundo de...

Potrebbero piacerti anche