4. PRÁCTICA 1: La página web de "La chistera"

4.1. La propuesta

En esta primera práctica de la obra se propone crear un sitio Web REAL poniendo en práctica los conocimientos adquiridos hasta ahora. En él incluiremos imágenes, varios titulares párrafos de texto de distinto tipo y enlaces hipertexto a otras páginas.

En la figura 2.12 se muestra una captura de un navegador visitando la página tal y como debe quedar al final. Se propone al lector intentar imitar la apariencia de esta página usando únicamente las etiquetas HTML explicadas hasta ahora.

Figura 2.12. La práctica 1 propone realizar un página a partir de lo mostrado en esta figura.

Para empezar a realizar la página debe abrirse un editor de textos o de HTML (es indiferente). Algunos ejemplos de programas que pueden servir son notepad, emacs, vi, HomeSite, etc. Una vez abierto se puede empezar a escribir la página tal y como se ha explicado, comenzando por la cabecera y siguiendo con el resto de la página. A continuación se muestran las primeras líneas que podría contener el archivo a modo de elemplo:

	<html>
	<head>
	<title>
	La chistera - Humor y magia
	</title>
	</head>
	<body>
      

Tras escribir el código debe guardarse con terminación ".html" y ya está lista para ser visualizada con cualquier navegador. Tras abrir éste hay que seleccionar la opción Archivo/Abrir...Examinar... (o similar) y elegir el archivo en el que habíamos guardado la página. En ese momento debe mostrarse en pantalla la página creada. Lo habitual es tener que realizar cambios en el código HTML, volver al navegador, volver a hacer cambios y así hasta que se obtiene el resultado deseado. ¡suerte!

4.2. La solución

En esta primera práctica se va a mostrar a continuación el código completo de la página resultado. Por supuesto, conviene intentarlo antes de mirarlo. También hay que tener en cuenta que no hay un único resultado y es posible que un código ligeramente diferente de lugar a una página prácticamente idéntica al verla con el navegador.

	<html>

	<head>
	<title>
	La chistera - Humor y magia
	</title>
	</head>

	<body>
	<center>
	<h1>
        <img src="imagenes/chistera.gif">
        LA CHISTERA - Humor y magia
	</h1>
	</center>
	<h2>
	Quienes somos
	</h2>
	<p>La chistera es un grupo de artistas 
	dedicados al mundo de la magia, la comedia y el espectáculo. 
	Entre nosotros podrás encontrar humoristas, magos, showmen,
	etc.</p> 
	<p>Si usted o su empresa necesita crear 
	un espectáculo y no quiere quedar decepcionado no dude en 
	escribirnos AHORA MISMO. Nuestra dirección es:</p>
	<center>
	chistera@chistera.es
	</center>
	<h2>
	Un ejemplo de nuestro repertorio
	</h2>
	<p>Cada día le mostramos ejemplos 
	distintos de nuestro amplísimo y novedoso repertorio de chistes:
	<blockquote>
	Era un tío tan gafe, tan gafe, que se sentó en un pajar y se 
	clavó la aguja.
	</blockquote>
	<blockquote>
	Doctor, Doctor, ¿cuanto tiempo me queda de vida? 
	<br>
	5... 4... 3... 2... 
	</blockquote>
	</p>
	<h2>
	Enlaces a páginas relacionadas
	</h2>
	<p>
	<a href="http://www.ciudadfutura.com/areirse
	  ">¡A Reírse Toca, ¡Ja, ja, ja!
	</a>: Si te aburres, estás deprimido, 
	o simplemente quieres reír, pásate por mi página y disfrutarás 
	de los más de 110 chistes que tiene. ¡Con posibilidad de enviar 
	tú el tuyo! 
	<p>
	<a
	  href="http://www.geocities.com/BourbonStreet/Delta/3543/"
	  >1er Concurso de feos por 
	Internet</a>: 1er Concurso de Feos por 
	Internet participa y gana tu premio. </p>
	<p>
	<a
	  href="http://www.geocities.com/Hollywood/8620">Albert
	Grau's Web</a> 
	: En esta pagina encontrarás un listado de dichos 
	populares, y las 50 cosas que se deberían cambiar para mejorar 
	la vida terrícola de nuestro querido planeta Tierra
	</p>
	<hr size="5">
	<address>
	Página creada por el equipo de programación Web de LA CHISTERA
	<br> Ultima actualización: 32-12-1997 ;-)
	</address>
	</body>
	</html>
      

Nota

Una vez hemos comprobado que con nuestro navegador habitual la página es mostrada correctamente conviene probarla con otros incluyendo alguno en modo texto (Lynx) y diferentes tamaños de pantalla. A veces las diferencias serán sorprendentes.