Curso completo de HTML - Practica 4 - Pagina Web con una estructura creada con tablas
(126 opiniones)
Curso gratis de
Jorge Ferrer, Víctor García y Rodrigo García - 23 de Febrero de 2006
Paso 6 - Contenido gráfico
La apariencia de un Web es uno de los aspectos más importantes en la creación de este. Por ello dedicamos un largo capítulo 5 a él. Ahora es el momento de poner en práctica de nuestros conocimientos. A la hora de insertar gráficos tenemos dos posibilidades:
-
Crear nuestros propios gráficos usando un programa de dibujo vectorial y/o un programa de retoque fotográfico. Esta es, sin duda, la mejor de las dos opciones, pero también es la que lleva más tiempo así como varios programas y amplios conocimientos de su uso por parte del creador de los gráficos. Por esta razón es común recurrir a la segunda de las posibilidades.
-
Crear nuestros propios gráficos usando un programa de dibujo vectorial y/o un programa de retoque fotográfico. Esta es, sin duda, la mejor de las dos opciones, pero también es la que lleva más tiempo así como varios programas y amplios conocimientos de su uso por parte del creador de los gráficos. Por esta razón es común recurrir a la segunda de las posibilidades.
En nuestro caso vamos a optar por la segunda opción. Hemos usado algunos gráficos del clipart que acompaña a Microsoft FrontPage, en concreto al tema Travel.Posteriormente hemos retocado alguno de estos gráficos con Paint Shop Pro(podríamos haber usado cualquier otro programa de retoque fotográfico, pero hemos elegido este por ser shareware). Usando este programa hemos creado una especie de botones (tranque servirán como enlace a las distintas páginas de la Web. Ahora ya podemos escribir el código usado:
<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/tranvha1.jpg" WIDTH=136 HEIGHT=48 BORDER=0 ALT="Viajes a su medida"></A>
<A HREF="mes.htm"><IMG SRC="img/tranvha2.jpg" WIDTH=136 HEIGHT=48 BORDER=0 ALT="Ofertas del Mes"></A>
<A HREF="superofe.htm"><IMG SRC="img/tranvha3.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...
|
|
También podíamos usar una tabla de tres filas dentro de esta celda para tener un mayor control sobre la disposición de los botones, poniendo cada uno en una de las filas. Dejamos la realización de esta mejora como ejercicio para el lector. |
Paso 7 - Cambiar el fondo y color del texto
Hemos elegido usar una imagen de fondo, y como esta imagen es oscura debemos además cambiar el color del texto y los enlaces. Todo ello lo hacemos con los atributos de la etiqueta BODY:
<BODY LINK="#FED354" VLINK="#EDB301" ALINK="#FFFF00" BGCOLOR="#335142" TEXT="#71AC84" BACKGROUND="img/tratilea.jpg">
|
Este código deberemos usarlo en todas y cada una de las páginas. En él hemos usado el atributo BGCOLOR para poner un color de fondo similar al color de la imagen, de esta forma si hay algún problema con la imagen el color de fondo especificado se usará en su lugar y la página no perderá mucho.
Paso 8 - Realización del resto de las páginas
Lo que queda es ya muy similar a lo que llevamos hecho. Usando la plantilla creada en el paso 4 y ciertas imágenes (aunque invitamos al lector a crear las suyas) no nos será difícil. Para que sea más fácil ahí van algunas pistas:
-
En las figuras 6.33, 6.34 y 6.35 hemos ido mostrando el resultado final de estas páginas.
-
Para la página mes.htm hemos creado 5 nuevos botones para cada uno de los viajes y los hemos situado en la columna de la derecha de la segunda tabla, tal y como habíamos planeado.
-
Igualmente hemos creado botones para la página medida.htm.
-
El último comentario es que para el archivo SuperOFE.htm al final suprimimos la segunda de las tablas por ser innecesaria. En esta página usamos la tabla creada en la práctica 3.
Paso 9 - Retoques, pruebas, revisión y mantenimiento
El último paso es el más largo de todos y consta de varias tareas. En primer lugar se pueden retocar las imágenes para que queden mejor y/o ocupen menos se puede aumentar el tamaño de la primera letra de cada párrafo (como hemos hecho nosotros) y en definitiva cualquier mejora del aspecto de las páginas. Después hay que hacer pruebas de la página. Son especialmente importantes las pruebas con otros navegadores, con varias resoluciones de pantalla (600x480 y 800x600 especialmente) y con distintas cantidades de colores, en concreto debemos ver si con 256 colores los gráficos todavía se ven bien.
Si este fuese un sitio Web real deberíamos además deberíamos realizar continuas revisiones de las páginas y mantener un contenido actualizado constantemente.
Una vez hemos creado el Web completo podemos tomarnos un descanso y enseñar las páginas a nuestros conocidos. Sin duda es como para estar orgullosos de lo que ya somos capaces de hacer. De ahora en adelante aprenderemos los aspectos más avanzados, y a la vez más interesantes, del lenguaje HTML.
- 1 - Introducción al lenguaje HTML
- 2 - Primeros pasos con HTML
- 3 - Parrafos en HTML
- 4 - Cómo insertar imagenes en una pagina
- 5 - Cómo crear enlaces hipertexto
- 6 - PRÁCTICA 1: La pagina web de "La chistera"
- 7 - Anclas (I)
- 8 - Anclas (II)
- 9 - Formato de texto
- 10 - La etiqueta FONT
- 11 - Texto preformateado
- 12 - Acentos y otros caracteres especiales
- 13 - Listas en HTML (I)
- 14 - Listas en HTML (II)
- 15 - Comentarios en HTML
- 16 - Practica 2: Un sitio web completo
- 17 - Usando color en el WWW
- 18 - Cómo cambiar la apariencia de una pagina
- 19 - Imagenes en las paginas Web (I)
- 20 - Imagenes en las paginas Web (II)
- 21 - Imagenes en las paginas Web (III)
- 22 - Cómo cambiar la apariencia de las imagenes
- 23 - Alternativas a las imagenes inline (I)
- 24 - Alternativas a las imagenes inline (II)
- 25 - Mejoras en las imagenes
- 26 - Cómo se crea una tabla HTML (I)
- 27 - Cómo se crea una tabla HTML (II)
- 28 - Alineamiento de tablas
- 29 - Alineamiento de celdas y filas
- 30 - Ancho de tablas y celdas
- 31 - Celdas que abarcan varias filas o columnas
- 32 - Margenes y separación de celdas
- 33 - Anidamiento
- 34 - Practica 3 - Tabla de Datos
- 35 - Practica 4 - Pagina Web con una estructura creada con tablas
- 36 - Practica 4 - Pagina Web con una estructura creada con tablas
- 37 - Practica 4 - Pagina Web con una estructura creada con tablas
- 38 - Estandares y extensiones del lenguaje HTML (I)
- 39 - Estandares y extensiones del lenguaje HTML (II)
- 40 - Extensiones a las listas (I)
- 41 - Extensiones a las listas (II)
- 42 - Alineamiento
- 43 - La etiqueta META
- 44 - Otras etiquetas del lenguaje HTML 3.2
- 45 - El atributo TARGET
- 46 - La etiqueta BASE
- 47 - Creación de paginas con frames
- 48 - Creación del documento de definición de frames (I)
- 49 - Creación del documento de definición de frames (II)
- 50 - Pagina completa con frames
- 51 - Atributos de la etiqueta FRAME
- 52 - Compatibilidad: NOFRAME
- 53 - Anidamiento de framesets
- 54 - Bordes de los frames
- 55 - Valores especiales del atributo TARGET
- 56 - Practica 5: Web de Los Alpes con frames
- 57 - Frames flotantes
- 58 - Sonido vídeo y otros ficheros externos
- 59 - Multimedia Inline (I)
- 60 - Multimedia Inline (I)
- 61 - Plug-ins y objetos incrustados
- 62 - Java en las Paginas Web
- 63 - Inserción de Applets Java (I)
- 64 - Inserción de Applets Java (II)
- 65 - Inserción de Applets Java (III)
- 66 - ActiveX, la tecnología del futuro
- 67 - Formularios en HTML
- 68 - Controles de Formularios (I)
- 69 - Controles de Formularios (II)
- 70 - Controles de Formularios (III)
- 71 - Controles de Formularios (IV)
- 72 - Otros controles
- 73 - Practica 6-Formulario para "Los Alpes"
- 74 - COMO USAR LOS DATOS DE UN FORMULARIO
- 75 - Envío De Ficheros Usando Formularios
|
Wikis relacionados con 'Curso completo de HTML - Practica 4 - Pagina Web con una estructura creada con tablas'
