Ahora realizaremos un pequeño tutorial en el cual usted aprenderá a crear paso a paso su propio sitio web. Para empezar haremos un diseño sencillo que contará con un header o encabezado, un menú vertical con 5 vínculos o botones, una sección para el contenido y por último un pie de página o footer. Para este tutorial no necesitará muchas imágenes, solamente la del encabezado, la cual tendrá las medidas siguientes: 600px de ancho y 100px de alto. Y una pequeña imagen para el logotipo con las siguientes medidas: 120px de ancho y 90px de alto. Estas imágenes se pueden crear con cualquier editor gráfico. Puede bajar los archivos del ejemplo desde aquí. Para ello lo primero que haremos es abrir nuestro editor de HTML y crear un documento nuevo. Este documento lo guardamos con el nombre de index.html.
Debemos tener algo así en el código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title> </title>
</head>
<body>
</body>
</html>
Dentro de las etiquetas <body></body> escribimos todo el contenido del sitio web, o sea lo que se observa al entrar a cualquier sitio web, el texto, las imágenes…etc. Lo primero que haremos es crear un contenedor para alojar dentro de este todo el contenido de nuestro sitio. Para ellos tecleamos dentro de la etiqueta <body> lo siguiente:
<div id=”contenedor”></div>
Con este código creamos una capa para alojar dentro de ella las demás capas y así poder organizar nuestro sitio mediante CSS de una forma sencilla. Las demás capas son las que tendrán el menú, el contenido…etc.
Ahora dentro de la capa contenedor copiamos lo siguiente:
<div id=”header”></div>
Esta será la capa que tendrá el encabezado con el nombre de la empresa y el logotipo. Ahora dentro de la capa header copiamos lo siguiente:
<div id=”logo”></div>
En esta capa como es evidente por su ID o nombre irá el logotipo. Ahora debajo de la capa header copiamos lo siguiente:
<div id=”menu”></div>
Debajo de esta capa vamos a colocar el contenido del sitio por lo que escribimos lo siguiente:
<div id=”contenido”></div>
Y debajo de este el footer así que tecleamos lo siguiente:
<div id=”footer”></div>
De tal forma que la terminar nos quedaría algo como esto:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title> </title>
</head>
<body>
<div id=”contenedor”>
<div id=”header”>
<div id=”logo”></div>
</div>
<div id=”menu”></div>
<div id=”contenido”></div>
<div id=”footer”></div>
</div>
</body>
</html>
Por ahora nuestro sitio está un poco desordenado, si lo desean pueden agregar la imagen del logo poniendo dentro de la capa logo el siguiente código:
<img src="images/jpg/logo.jpg" alt="Nombre de tu empresa">
Como es evidente la imagen del logo está dentro de una carpeta llamada jpg la cual está dentro de la carpeta Images.
Si compruebas como va quedando tu sitio hasta ahora verás que no está muy organizado pero esto se resolverá más tarde con el CSS. Ahora nos queda poner los elementos del menú, o sea los vínculos o botones como quieran llamarle, para ello utilizaremos listas desordenas y pondríamos lo siguiente dentro de la capa menú quedando de esta forma:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#"> Artículos</a></li>
<li><a href="#">Foro</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Contacto</a></li>
</ul>
También pueden poner dentro de la capa contenido el texto que deseen para ir llenando la página web. Y por último ponen dentro de la capa footer el texto que usted desee, en mi caso puse:
Nombredetuempresa Copyright 2006 :: Todos los derechos reservados
Bien aunque no lo parezca ya está terminada la página en HTML, pero como pueden ver el diseño está bastante desordenado, de hecho no hay ningún indicio de que se haya diseñado algo, no hay colores ni nada. Pues esto vamos a arreglarlo con el CSS…