Diseña y Programa Tu Primer Sitio en Pasos Fáciles de Entender

() translation by (you can also view the original English article)

En este tutorial, vamos a diseñar y programar nuestro primer sitio web en pasos simples, fáciles. Este tutorial fue escrito para principiantes con la esperanza de que le dará las herramientas necesarias para escribir sus propias páginas web compatibles con los últimos estándares! Es una nueva semana; ¡tal vez es hora de aprender una nueva habilidad!

Paso 1 - Qué Estamos Haciendo

Vamos a diseñar y programar este sencillo sitio web. Un diseño espectacular, no es, pero va a ser muy eficaz para la enseñanza básica en técnicas de programación.

Paso 2 - Preparación

Lo que necesitas

Este tutorial fue escrito asumiendo que nunca has programado un sitio web antes, o que sólo lo has hecho un par de veces. Sin embargo, para completar este tutorial, necesitarás lo siguiente:

Photoshop o un editor de imágenes similar
Un editor de código (más sobre esto más adelante)
Comprensión básica de cómo funciona el html, etiquetas y sintaxis básica. Para ponerse al día, revisa el recurso oficial en w3 Schools, donde puedes aprender todos los fundamentos necesarios para este tutorial.
Lo mismo para css, debes entender cómo trabajan ñps selectores y estar familiarizado con las propiedades básicas. Una vez más, el mejor recurso aquí es w3 Schools
Un navegador, obviamente. Estoy usando Firefox, y si deseas que tu sitio se vea como mis capturas en cada paso, tu también deberías.

Diseño

Estamos haciendo una página web muy simple, con cuatro elementos básicos: encabezado, contenido, sidebar y pie de página, el diseño se va a ver algo como esto:

Es una buena idea bocetar el diseño antes de empezar, ya sea en papel o en Photoshop, para optimizar tu flujo de trabajo y organizar tus ideas.

Paso 3 - Comenzar

Abre un reluciente, nuevo documento de Photoshop, por ejemplo, de 1000px por 1200px. Podemos siempre recortarlo más tarde. Lo estoy haciendo bastante estrecho ya que estoy trabajando en una laptop, pero no dudes en hacerlo más ancho si quieres más espacio para trabajar.

Ahora, no voy a entrar en el debate sobre resoluciones de pantalla y anchos de página web óptimas aquí. Todo lo que necesitas saber es que el contenido de nuestra página va a ser 800px de ancho, y que eso está bien. Así, en nuestro documento de 1000px de ancho , vamos a arrastrar las guías en las marcas de 100 y 900px para ajustar el ancho. Nuestro diseño tiene una barra lateral, y he decidido hacerla un tercio del ancho de la página. Dos tercios de 800 son unos 530, así que vamos a poner una guía más en 630px. También pondremos un color de fondo agradable de #ebe8e8.

Paso 4 - Encabezado

Coge la herramienta rectángulo y dibuja una caja azul grande, en la parte superior del documento, la mía es de 170px de alta y el color es #23b6eb. A continuación dibuja una barra gris oscura delgada, en la parte superior de la página, yo he usado el color #5d5a5a

Paso 5 - Resaltar

Ahora vamos a añadir un poco de efectos de iluminación sobre el área del encabezado azul. Crea una máscara de recorte encima de la capa azul, luego agarra un pincel grande y suave (de 400px ancho) y elije un color un poco más ligero que el fondo azul.

Ahora pulse ligeramente la punta del pincel justo debajo de la barra, en el centro del documento. Manténlo sutil y trata de no dejar que el color más claro llegue a los bordes de la página (esto será claro más adelante). Y configura el modo de fusión en la pantalla.

Paso 6 - Barra de Navegación

Ahora vamos a agregar otra barra a la parte inferior de la azul, podemos hacerla gris, pero vamos a añadir una superposición de degradado, así que no importa.

En el panel de estilos de capa, añade un gradiente de #e2e3e4 a #bebdbd a 90grados.

Paso 7 - Pie de Página

A continuación, vamos a dibujar un cuadro gris en la parte inferior de la página, elegí un color un poco más oscuro que el gris de la barra en la parte superior.

Paso 8 - Logo

Fondo

Para el logo vamos a dibujar un rectángulo y añadir otro punto de anclaje en el extremo, luego arrástralo hacia el lado. Para eliminar el redondeo, haz opción-clic en el punto.

A continuación, agrega algunos estilos de capa: una superposición de degradado y un trazo de 1px: gradiente de #aec457 a #cdf399

Texto

Ahora para el texto: grande y en negrita.

Fuente: Myriad Pro
Estilo: Negrita
Tamaño: 60px
Color: #36809a

Para darle cierta profundidad, añade una sombra interior:

Paso 9 - Lema

Acabo de añadir en un eslogan breve a continuación:

Fuente: Arial
Estilo: negrita
Tamaño: 30pt
Color: #e4dfdf

Paso 10 - Navegación

Escribe escribe en los enlaces de navegación bonito y grande, expándelos hacia afuera y dales espacio de manera uniforme.

Fuente: Arial
Estilo: negrita
Tamaño: 30pt
Color: #676666

Paso 11 - Contenido Principal

Momento para pegar algún contenido ficticio. He usado un pequeño encabezado, que será h2 y el más pequeño será un link h3 al html ipsum.

Haz los cuadros de texto sobre la anchura de los 2 primeros tercios de la página. Estilos de texto:

Encabezado H2:

Fuente: Arial
Estilo: Negrita
Tamaño: 36pt
Color: #0e5d7a

Encabezado H3:

Fuente: Arial
Estilo: negrita
Tamaño: 24pt
Color: #444444

Párrafo:

Fuente: Arial
Estilo: Normal
Tamaño: 14pt
Color: #595858

Las fechas en "Novedades" van a estar envueltas en una etiqueta pequeña, la fuente es la mismo que en el párrafo, pero de 12pt. He copiado la noticia dos veces, porque soy perezoso.

Paso 12 - Barra Lateral

Enlaces

A continuación dibuja un rectángulo delgado sobre nuestra región lateral, de color #d4d6d3, con un trazo de 1 px con color #bebdbd

Llena la barra lateral con algo más de contenido ficticio, puedes conseguir los iconos gratuitos que he utilizado aquí. Las fuentes son:

Encabezados H3:

Fuente: Arial
Estilo: Normal
Tamaño: 24pt
Color: #044055

Elementos de la lista:

Fuente: Arial
Estilo: Normal
Tamaño: 18/14pt
Color: #373737

Botón

A continuación vamos a añadir un botón de "Únete a nuestro equipo" por debajo de los enlaces de colaboradores. El botón es solo un rectángulo con el mismo gradiente del logo y un #c7c7c7 de color de trazo de 1px. El texto es:

Fuente: Arial
Estilo: Normal
Tamaño: 24pt
Color: #434343

Paso 13 - Pie de Página

Para acabar la maqueta, sólo tienes que añadir un poco de texto simulado de derechos de autor, o lo que quieras, al pie de página. La fuente es:

Fuente: Arial
Estilo: Normal
Tamaño: 14pt
Color: #e0e2e2

Y eso es todo para el diseño de la página, no es nada especial, pero su sencillez hará más fácil que sigas el resto del proceso.

Cortando el PSD

Ahora que ya tenemos nuestro precioso PSD terminado, es tiempo de desmenuzarlo en trozos que podemos utilizar. La idea aquí es utilizar tan pocas imágenes como sea posible y hacerlas tan pequeñas como sea posible. Está bien, así que empecemos con el encabezado. Queremos que se extienda a través de toda la pantalla, no importa qué tan amplia sea. Para ello, vamos a agarrar una pequeño pedazo del encabezado y vamos a repetirlo a través de la pantalla una y otra vez, sin importar qué tan ancho sea.

Paso 14 - La Herramienta de Corte

Ahora probablemente no has usado la herramienta de corte antes, pero es realmente muy simple. Sólo te permite cortar el archivo en pedazos minúsculos que se pueden exportar para la web.

Encabezado

Así que, vamos a seguir adelante y coge un trocito de nuestro encabezado. Haga clic y arrastre para crear el segmento, al igual que la herramienta marco rectangular. Ten cuidado de tomar un pedazo del lado de la imagen, para que no agarres algo de la parte resaltada.

Ahora que tenemos esta pequeña banda, podemos repetirla a lo largo del eje x. El área resaltada, sin embargo, no es repetible, así que tenemos que cortar todo. Corta la sección del encabezado entre las dos guías que denotan nuestro ancho de 800px.

Pie de Página

Utilizamos el mismo proceso exacto para cortar el pie de página, agarra un pedazo delgado del pie de página.

Todo lo demás

Sólo necesitamos un par de imágenes más: los iconos de "subscribe" y el botón de "Únete a nuestro equipo".

Debido a que los iconos y el logo son de forma irregular, vamos a guardarlos como archivos .png transparentes, así que regresamos y los agarramos por separado.

Bueno, para cortar el botón, podemos utilizar la misma técnica como con el encabezado y el pie de página, pero esta vez solo nos falta la un pedazo fino. Cuando hagas el corte, asegúrate de no incluir el trazo de 1px, (vamos a añadirlo más adelante) puede que necesites hacer un zoom muy acercado de esto.

Paso 15 - Exportación para la Web

Ahora que ya tenemos nuestras imágenes en pedazos, vamos a guardarlos como archivos JPEG optimizados y ponerlos en un lugar útil.

Ve a archivo/guardar para web y dispositivos... En la ventana emergente, manten pulsada la tecla Mayús y haz clic para seleccionar cada una de las piezas (una vez más, puedes acercarlo) Verifica que el menú desplegable "preset" se establece en JPEG-alta, desmarca el "convertir a srgb" y haz clic en "guardar"

En la siguiente ventana que aparece, elege un nombre y una ubicación para tus imágenes, yo voy a guardarlas en el escritorio por el momento.

Asegúrate de que se ha fijado en "imágenes", "por defecto" y "sólo los cortes seleccionados"

A continuación, comprueba la ubicación en la que guardaste tus archivos. En lugar de ver las imágenes individuales, sólo encontrarás una carpeta llamada "imágenes" donde se encuentran todas tus fotos. El equipo dará a cada imagen un número, lo cual no es muy útil. Comprueba que tienes las imágenes correctas, luego nombralas adecuadamente.

Ahora, de vuelta a los molestos iconos y el logotipo. Asegúrate de ocultar todas las capas de fondo, luego reanuda con la herramienta de corte y corta agradables cajas pequeñas alrededor de cada icono y el logo.

Ahora vamos por el mismo proceso de exportación para la web como hicimos con el JPEG, sólo que esta vez no olvides seleccionar PNG-24 en el menú desplegable "preset", y que el cuadro de «transparencia» esté activado. Cambia los nombres de estos archivos también, y la carpeta de imágenes parecer algo así:

Bueno, eso es todo, hemos terminado de cortar nuestro psd y tenemos todas las imágenes que necesitamos. No cierres Photoshop todavía, ya que, todavía tendremos que seleccionar colores, fuentes, dimensiones, etcetera.

Parte 3 - HTML

Paso 16 - Comenzando

Bueno, tiempo para sumergirse en un html. Lo primero que vas a necesitar es un editor de código de algún tipo. Esto es a menudo de preferencia personal.
pero te recomiendo comenzar con uno de versión libre. Para Mac y PC, recomiendo el Komodo edit como primer editor de código. Tiene un montón de características que son ideales para principiantes y usuarios avanzados.
Una de las mejores características es el verificador de sintaxis, que es como el revisar la ortografía en los procesadores de texto, que identifican y explica pequeños errores.
Para PC, hay muchas más opciones, con ninguna de las cuales estoy muy familiarizado, pero revisa el artículo de Andrew Burgess 22 editores código fantásticos para Windows

En este tutorial vamos a utilizar Komodo edit, pero los principios son los mismos en cada editor.

Paso 17 - Establecer Nuestras Carpetas

Lo primero es lo primero, debemos establecer un lugar para todos los archivos relacionados con nuestro sitio. Crear una carpeta para tu sitio web, la mía se llama "MySite", dentro de esta carpeta, crea otra carpeta que contenga las imágenes que recortamos.
Nombra esta carpeta "images". Ahora abrimos nuestro editor de código, esta parte será un poco diferente dependiendo de qué software utilizas:
Si lo estás haciendo en Komodo, selecciona "crear nuevo proyecto" y guarda o mueve el archivo .kpf a la carpeta "MySite". Al abrir el archivo, el explorador de archivos en el lado de Komodo debe mostrar el contenido de la carpeta.
A continuación, haga clic derecho en el archivo del proyecto y desplázate para "agregar" y seleccionar "nuevo archivo". En la ventana que aparece, selecciona "html(xhtml)" y nombra el archivo "index.html".

Si usas otro editor, el proceso debe ser similar, pero los fundamentos son los mismos: es necesario crear un archivo index.html, y debe estar en la carpeta "MySite" junto con la carpeta de imágenes.

Paso 18 - Configurar nuestro archivo index.html

Lo primero que debemos hacer es declarar el tipo de documento, la codificación de caracteres y crear la etiquetas html. Muchos editores hacen esto por ti, pero si no, debe ser algo así:

1	<?xml version="1.0" encoding="UTF-8"?>
2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4	</html>

entre las etiquetas html, tenemos una sección de "head", que contiene todo tipo de información importante sobre el sitio que no aparece dentro del cuerpo del sitio.
Para nosotros, en este punto todo lo que va a contener es el título de la página, como esta:

1	<head>
2	<title>MySite</title>
3	</head>

por debajo del head, lógicamente, añadimos el cuerpo, que también figura dentro de las etiquetas <html> Bueno, hasta ahora tenemos:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <title>MySite</title>
  </head>
  <body>
     <!-- content goes here -->
  </body>
</html>

Esta es la configuración de una página básica, puedes guardar en algún lugar este clip para su uso futuro.
¿Recuerdas cuando dijimos que tendríamos encabezado, contenido, sidebar y secciones de pie de página?
Bien, ahora cada uno de ellos va a ser dentro de su propio<div>y se les dará una identificación apropiada.</div>

<body>
    <div id="header">
    </div><!--end header -->
    
    <div id="content">
    </div><!--end content-->
    
    <div id="sidebar">
    </div><!--end sidebar-->
   
    <div id="footer">
    </div><!--end footer-->
    
</body>

Nota: es una buena idea, sobre todo al empezar, añadir comentarios a cada div así podrás mantener el control de la jerarquía de los divs.

¿Ahora vamos a echar otro vistazo a nuestro psd - recuerdas cómo queriamos que los cortes del pie de página y encabezado se repitieran indefinidamente hacia fuera a los lados?
Vamos a necesitar una manera de dejar que estos elementos se extiendan, pero al mismo tiempo, necesitamos que el contenido principal ("contenido" "barra lateral")
esté contenido dentro de un ancho especificado en el centro de la pantalla.

Para manejar esto, necesitamos una gran div con nuestros elementos de expansión y un div para contener el contenido principal.
También deberíamos notar que el texto de pie de página se centra demasiado, así que tenemos que repetir el mismo proceso para el pie de página.
Para ello, es preciso envolver algunos divs alrededor de los que ya tenemos. Tenemos dos secciones básicas, la sección principal y la sección de pie de página.
Cada una va a ser contenida dentro de un div grande, sin reglas, con una anchura no especificada,
y el contenido de cada div será envuelto en divs individuales que especifican ancho y centrado.

Queremos utilizar las mismas reglas para el contenido principal y pie de página, así que en vez de (o además) de los ids específicos, tendrán clases específicas,
que significa que se pueden crear un conjunto de reglas para definir todos los div con la misma clase.

Así que el contenido principal va a ser envuelto dentro de un div con el id "main" y se envuelverá el pie de página en un div con el id "footer". Si ayuda a visualizar la estructura, aquí está un diagrama:

Y el marcado se ve así:

<body>
    <div id="main">
        <div id="header">
        </div><!--end header -->
    
        <div id="content">
        </div><!--end content-->
    
        <div id="sidebar">
        </div><!--end sidebar-->
        
    </div><!--end main--> 
   
    <div id="footer">
    </div><!--end footer-->
    
</body>

Ahora envolvemos cada sección en un div contenedor, con la clase de "container".

 
<div id="main">
    <div class="container">
         <div id="header">
         </div><!--end header -->
    
         <div id="content">
         </div><!--end content-->
    
         <div id="sidebar">
         </div><!--end sidebar-->
            
    </div><!--end main container--> 
</div><!--end main-->
        
<div id="footer">
    <div class="container">
    </div><!--end footer container--> 
</div><!--end footer-->

Sé que todos estos divs de envoltura parecen redundantes, pero se vuelven relevantes cuando empezamos a estilizar la página.

Paso 19 - Agregar Contenido

Ahora que está establecida la estructura de nuestra página, podemos empezar a añadir contenido, de arriba a abajo. Aquí está un resumen de los elementos html que componen nuestra página:

Cabecera

En la parte superior tenemos el encabezado, y en el encabezado tenemos 3 elementos principales: un logotipo, un eslogan y un menú de navegación.
Así que vamos a crear un div para nuestra cabecera, y para mantener las cosas claras, a poner el logo y el eslogan en su div.

 
<div id="header">
	<div id="logo">
    	</div>
	<div id="tagline">
    	</div>
</div><!--end header -->

Porque es el título más importante de la página, el Logo va dentro de una etiqueta <h1></h1>. Tenemos más opciones para el eslogan, dependiendo de qué tan relevante es para tu sitio. En este caso, estoy utilizando una etiqueta <h3></h3>.

Para la navegación, una práctica habitual es colocar los elementos del menú dentro de una lista desordenada, con cada elemento de la lista que contenga una etiqueta de ancla.
Así que tenemos:

1	<div id="header">
2	<div id="logo">
3	<h1>Logo</h1>
4	</div>
5	<div id="tagline">
6	<h3>And a little tagline, too.</h3>
7	</div>
8	<ul id="menu">
9	<li><a href="#">Home</a></li>
10	<li><a href="#">About</a></li>
11	<li><a href="#">Portfolio</a></li>
12	<li><a href="#">Contact</a></li>
13	</ul>
14	</div><!--end header -->

Nota: el valor "href" en las etiquetas de ancla normalmente especifica a dónde van los enlaces, pero en este caso, el símbolo de numeral sólo significa "vincular arriba."

Contenido principal

Mirando a nuestra área de contenido principal, contamos con 4 diferentes tipos de estilos: un título grande en la parte superior, uno más pequeño,
e incluso uno más pequeño para los títulos de los artículos de noticias, además de algunos párrafos y las pequeñas fechas en las noticias.
Vamos a llamar a estos<h2>,<h3>,<h4>,<p>, y <small>, respectivamente. Ahora es sólo una cuestión de pegar tu contenido, lo que no es muy divertido, pero es bastante fácil.

<div id="content">
        <h2>Lorem ipsum, Dolor sit</h2>
    	<h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3>
    	<p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel. 
    		Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl. 
    		Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. 
   	    	Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempus vel.  </p>
    	<p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel. 
    		Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl. 
   	    	Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit, 
		gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. </p>
    <div id="news">
    	<h3>Latest Updates</h3>
    	<h4>Vestibulum id nulla eu sapien pellentesque</h4>
    	<small>June 1, 2009</small>
    	<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu, 
        	facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales. 
   	    	Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>
   	<h4>Vestibulum id nulla eu sapien pellentesque</h4>
   	<small>June 1, 2009</small>
   	<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu, 
   	   	facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales. 
      	Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>
    </div><!--end news-->
</div><!--end content-->

He agregado etiquetas de anclaje con el valor "Leer más" al final de cada noticia.

Barra lateral

En la barra lateral ahora. La barra lateral tiene tres elementos, cada uno de los cuales se envuelve en su propio div.
Cada div que contendrá un encabezado <h3> y una lista desordenada y cada elemento de la lista otra vez contendrá una etiqueta de ancla.
Así que adelante y copia y pega el texto, y debe quedar algo así:

<div id="sidebar">
                <div id="subscribe">
                    <h3>Subscribe!</h3>
                    <ul>
                        <li><a href="#">Subscribe via RSS</a></li>
                        <li><a href="#">Get Email Updates</a></li>
                        <li><a href="#">Follow us on Twitter</a></li>
                    </ul>
                </div>
                <div id="popular">
                    <h3>Popular Items</h3>
                    <ul>
                        <li><a href="#">Lorem ipsum dolor site amet</a></li>
                        <li><a href="#">Ulvinar tincidunt, Mauris id</a></li>
                        <li><a href="#">Lorem ipsum dolor site amet</a></li>
                        <li><a href="#">Proin tempor erat sit tene</a></li>
                    </ul>
                </div>
                <div id="contributors">
                    <h3>Contributors</h3>
                    <ul>
                        <li><a href="#">John Smith, freelance writer</a></li>
                        <li><a href="#">Jack McCoy, designer</a></li>
                        <li><a href="#">Lenny Briscoe, editor</a></li>
                        <li><a href="#">John Smith, martketing</a></li>
                    </ul>
                    <a href="#">Join Our Team</a> 
                </div>
            </div><!--end sidebar-->

Pie de página

También podemos poner el pie de página antes de comprobarlo en el navegador, sólo debería tomar un segundo.
Cabe destacar que los símbolos que deseas utilizar en el texto tiene códigos especiales en html, por ejemplo, el símbolo de copyright está codificado como ©

<div id="footer">
        <div class="container">
            <p>Copyright © 2009  MySite <br />
            All Rights Reserved</p>
        </div><!--end footer container--> 
    </div><!--end footer-->

Y eso es todo para el marcado, vamos a echar un vistazo:

¿se ve bastante bien, no? Bueno, no, no todavía. Pero contiene toda la información que necesitamos y está listo para ser estilizado.

Parte cuatro - CSS

Paso 20 - Añadir CSS

Ahora, aquí es donde la magia sucede.
Crea un nuevo archivo en la carpeta del sitio y lo llamas "style.css".
Ahora necesitamos una manera de decirle al navegador que este archivo css pertenece a nuestro archivo de index.html, así que lo vinculamos a él con la etiqueta "link href". Pon esta línea de código en la sección <head>, bajo el título.

1	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

Ahora nuestro archivo html puede acceder a nuestro archivo css, por lo que cualquier modificación que realicemos en el css afectará el archivo html.

Paso 21 - Limpieza Básica

Hay un par de cosas feas sobre de nuestro sitio que se pueden arreglar de inmediato: queremos cambiar la fuente predeterminada, queremos el contenido a 800px de ancho y centrado y queremos deshacernos de todos esos espacios entre los elementos.

En primer lugar, vamos a elegir una fuente para todo el texto dentro del cuerpo de la página que se mostrará a menos que se especifique lo contrario:

1	body { font-family: Arial, Helvetica, sans-serif; }

A continuación, vamos a definir el ancho y los márgenes de nuestro div de clase de "container".

1	.container {
2	width: 800px;
3	margin: 0 auto;
4	}

la propiedad margen: auto 0 significa que no existe margen en la parte superior, y que estará automáticamente centrada horizontalmente.
Vamos a echar un vistazo.

Mucho mejor. El siguiente paso va a hacer que las cosas se vean mucho peor, pero quédate conmigo.

Reset CSS

Todos los navegadores utilizan relleno por defecto y valores de margen para cada elemento, que hacen que páginas sin estilo se vean bien, pero para nosotros se entrometen en el camino de nuestros propios estilos.

Para deshacerse de todos estos márgenes desordenados, vamos a usar un reset de css muy sencillo , que es sólo una regla que se deshace del relleno por defecto y los márgenes en los elementos que estamos utilizando. Pon esto en la parte superior del archivo css:

1	'
2	body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }

Ahora echemos un vistazo:

Paso 22 - Encabezado

¡Muy bien, así todo está aplastado hacia arriba y listo para que lo manipulemos! Ahora tenemos que empezar a añadir nuestros propios estilos, otra vez, de arriba a abajo.
Hagamos la parte difícil del camino primero: ajustando las imágenes de fondo para el encabezado.

Comenzamos con el pedazo repetible que tomamos del encabezado. La imagen repetida va a estar dentro del div "principal", que tiene un ancho definido. Necesitamos dejar saber al navegador donde está la imagen y qué hacer con ella (repeat no-repeat) para establecer una imagen de fondo, usamos la propiedad "background" y especificamos la ubicación de la imagen o 'url': en nuestro caso, la imagen está en nuestra carpeta de imágenes, por lo que especificaremos la ubicación como esta:

1
2	url (images/header_slice.jpg)

luego especificamos que queremos que se repita a lo largo del eje x:

1	#main {
2	background: url(images/header_slice.jpg) repeat-x;
3	}

Mira esto:

impresionante, ¿verdad? Prueba estirando tu navegador, simplemente sigue y sigue... Pero todavía estamos perdiendo el punto resaltado en la barra azul, y ya que cortamos una parte de 800px de nuestra cabecera, podemos ponerlo dentro de nuestro "container". El problema es que tenemos dos de esos (uno para el div principal, uno para el pie de página) así que tenemos que especificar que queremos que el div con la clase "container" que se encuentra dentro del div con id "principal"
establecezca la imagen de la misma manera que antes, pero esta vez tenemos que especificar "no-repeat":

1	#main .container {
2	background: url(images/header.jpg) no-repeat;
3	}

Echa un vistazo:

¡excelente! el punto culminante está ubicado justo donde queremos y se mezcla con los lados repetitivos.

Paso 23 - Reemplazo del Logo de Imagen

¿Nuestro logo es bastante complicado, correcto? Estamos utilizando una imagen como fondo y una fuente no-html con una sombra interior. No podemos hacer eso en css, así que tenemos que reemplazar el texto con una imagen.
"por qué no solo poner la imagen en lugar de la línea <h1>?"
puedes preguntar. Bueno, en internet, el encabezado <h1> es básicamente el 'nombre' de tu página, e importante, es que los poderosos robots (google) exploran esta propiedad en su búsqueda de palabras clave. Si no tienes un encabeza <h1>tu sitio podría llamarse kalamazoo, pero no subiría en la búsqueda de la palabra exacta.
Hay otras varias técnicas que tienen sus ventajas sobre ésta, (ver aquí, especialmente la técnica #8) pero esta es la más simple y la técnica más adecuada para esta situación.

Así que, para solucionar este problema, utilizamos una tortuosa técnica llamada "sustitución de la imagen" para usar la imagen que nosotros queramos, manteniendo el en cabezado <h1> en nuestro marcado. En primer lugar, vamos a agregar la imagen como fondo al div #logo.

1	#logo {
2	background: url(images/logo.png) no-repeat;
3	}

Si te fijas en tu navegador, verás que nuestro logo ha sido cortado en la mitad. Esto es porque nosotros no le hemos dado ningún espacio, podemos solucionarlo mediante la especificación de las dimensiones de la imagen:

#logo {
    background: url(images/logo.png) no-repeat;
    height: 84px;
    width: 235px; 
}

Mejor, pero todavía tenemos el texto <h1> original en nuestro camino, pero podemos arreglarlo! Todos lo que vamos a hacer es establecer el valor text-indent en algo ridículo, como - 9999px, por fuera de la página, por lo que nadie nunca lo verá, excepto los robots de motores de búsqueda.

1	#logo h1 {
2	text-indent: -9999px;
3	}

ahora echa un vistazo, y nuestra imagen del logo felizmente se pone donde solían estar nuestros h1. Pero todavía se ve bastante mal, todo encogido hasta la parte superior allí. Cuando queremos mover un elemento desde su posición original en la página, podemos utilizar las propiedades de margen y el relleno. Vamos a probar ambos para ver la diferencia

En primer lugar, vamos a intentar añadir un margen a la parte superior de la etiqueta h1. Podemos encontrar qué tan grande hacerlo con la herramienta regla en Photoshop.

1	#logo h1 {
2	text-indent: -9999px;
3	margin-top: 40px;
4	}

¡Uy! Hemos conseguido mover el logo, pero tomó la página entera con él! Vamos a intentar ajustar el padding en su lugar:

1	#logo h1 {
2	text-indent: -9999px;
3	padding-top: 40px;
4	}

Ahora echa un vistazo, y la maldita cosa regresó a donde comenzó. Esto es porque la propiedad de margen mueve el elemento entero, pero el padding solo mueve el contenido del elemento, dejando el fondo donde está. Por lo tanto, si nuestra pantalla fuera, digamos, 19999px de amplia, veríamos nuestro paria encabezado <h1> bajar 40px, pero esto no es por lo que íbamos.

Así que, para mover la imagen de fondo del logotipo, tenemos que mover el div por encima de él, porque el div completo del logo es el contenido del div del header. vamos a probarlo:

#logo h1 {
    text-indent: -9999px;
}

#header {
    padding-top: 40px; 
}

¡Mucho mejor! Ahora nuestro logotipo parece como está en el psd, en exactamente el lugar correcto. Si solamente pudieramos solucionar ese eslogan...

Paso 24 - Flotando el Eslogan

Así que ahora tenemos que encontrar una manera de poner ese eslogan al lado del logo. El problema es que, los elementos html naturalmente se apilan verticalmente, empujándose el uno al otro hacia arriba y abajo de la página.
Tenemos algunas opciones para solucionar este problema, pero voy a utilizar los floats, que son un poco complicado, pero en serio muy útiles una vez los dominas.

Bueno, ¿qué es un float? Bueno, eso es complicado. Básicamente, cuando pones un elemento como 'float', éste se pega al lado de una página o un elemento y también se lo lleva fuera del "flujo" normal de la página. ¿Confundido? Permítanme demostrar.

#logo {
    background: url(images/logo.png) no-repeat;
    height: 84px;
    width: 235px;
    float: left; 
}

Bueno, como se puede ver, logramos sacar nuestro eslogan al lado, pero se llevó el menú de navegación con él.
Lo pienso de esta manera: un elemento normal (por ejemplo, un div o un encabezado h1 o una imagen), aunque sea muy pequeño, invisiblemente ocupa todo el espacio al lado de él, como una barra horizontal grande.

Por esta razón todos los demás elementos se quedan debajo de él, en lugar de aliarse para arriba al lado. Cuando flotas un elemento, quitas todo el espacio extra al lado y lo restringes sólo al espacio que directamente toma, permitiendo que otros elementos se envuelvan alrededor de él.
Ahora que ya sabes cómo funcionan los floats, ¿cómo podemos arreglar nuestra situación actual? En primer lugar, tenemos que aislar el eslogan en un float propio, por lo que también estará fuera del "flujo normal" de la página:

1	#tagline {
2	float: left;
3	}

Echa un vistazo en el navegador y míralo, lo hemos empeorado. ¡Ahora los elementos de menú se envuelven alrededor de nuestro eslogan! Lo que necesitamos aquí es restaurar el flujo normal del documento después de los elementos flotados. Hay dos formas de hacer esto, pero estamos utilizando el método más directo. Vuelve a tu archivo index.html y añade un div nuevo bajo nuestros divs flotados. En lugar de agregar una clase o id a este div, vamos a darle un estilo (sí, es un estilo, pero sólo uno pequeño) clear: both.

<div id="header">
    <div id="logo">
    	<h1>Logo</h1>
    </div>
    <div id="tagline">
    	<h3>And a little tagline, too.</h3>
    </div>

<div style="clear:both"></div>

Guardar el archivo html y comprueba en tu navegador: verás el eslogan afuera al lado de la insignia, con el menú debajo. Ahora todo lo que tenemos que hacer es poner el eslogan en forma y ponerlo donde corresponde. Vamos a empezar copiando los estilos de fuentes de Photoshop:

1	#tagline h3 {font-size: 30px; color: #e4dfdf; }

y agregue un poco de relleno en la parte superior e izquierda:

#tagline {
    float: left;
    padding-top: 20px;
    padding-left: 20px; 
}

Echa un vistazo: ahora estamos llegando a algún lugar!

Paso 25 - Barra de Navegación

Ahora tenemos que poner nuestro menú de navegación en línea recta. Lo primero es lo primero, sin embargo, vamos estilizar las fuentes así podemos espaciar las cosas en consecuencia. Cuando estilizas la fuente de las etiquetas de anclaje, debes especificar no solo que haces referencia a los elementos de la lista, sino a las anclas dentro de ellos. Estamos especificando nuestra lista desordenada, por lo que podemos hacer frente a los otros por separado. También necesitamos eliminar el subrayado y los bullet points.

ul#menu {
    list-style: none; 
}

ul#menu li a {
    font-size: 30px;
    color: #676666;
    text-decoration: none; 
}

Genial, ahora, necesitamos encontrar una manera de obtener todos nuestros enlaces en una fila. ¿Cómo? ¡Más floats! Vamos a establecer que los elementos de la lista floten a la izquierda, para que cada elemento se pegue uno al lado de otro.

1	ul#menu li {
2	float: left;
3	}

Si nos fijamos en el navegador, notarás el mismo problema que teníamos antes flotando artículos: los otros elementos se envuelve alrededor de él. Al igual que antes, podemos insertar nuestro div justo después de la lista desordenada.

1	<ul id="menu">
2	<li><a href="#">Home</a></li>
3	<li><a href="#">About</a></li>
4	<li><a href="#">Portfolio</a></li>
5	<li><a href="#">Contact</a></li>
6	</ul>
7	<div style="clear:both"></div>
8	</div><!--end header -->

Todos los artículos de la lista deben estar ahora en línea, ahora sólo tenemos que espaciarlos y mover el menú un poco hacia abajo. Asi que primero mide la distancia desde la base del logo a la cima del texto del menú, y tendrás 55px.
el primer item tiene cerca de 30px a la izquierda de nuestra guía, establezcamos el padding del elemento de la lista en 30px a la izquierda.

ul#menu {
    list-style: none;
    padding-top: 55px; 
}

ul#menu li {
    float: left;
    padding-left: 30px; 
}

Todavía tenemos que poner más espacio entre cada elemento, si medimos el espacio en el psd, es cerca de 105px, pero puesto que ya tenemos 30px de padding entre cada uno, sólo tenemos que añadir 75px de paading a la derecha de cada artículo.

ul#menu li {
    float: left;
    padding-left: 30px;
    padding-right: 75px; 
}

Y por último, admiremos nuestro trabajo:

¡Perfecto! Nuestro menú es como el psd. ¡Vamos sobre el contenido!

Paso 26 - Contenido

Zona Superior

Lo primero que vamos a hacer aquí es fijar todas las fuentes, para que podamos ver el espacio que tenemos para trabajar. sólo conecta la info de la fuente desde Photoshop:

#content h2 {
    font-size: 36px;
    color: #015878; 
}

#content h3 {
    font-size: 24px;
    color: #444444;
}

#content h4 {
    font-size: 18px;
    color: #373737;
    font-weight: normal; 
}

#content p {
    font-size: 14px;
    color: #595858; 
}

#content small {
    font-size: 12px;
    color: #373737; 
}

#content a {
    color: #0f6c8d;
    font-weight: bold;
    text-decoration: none; 
}

Obtenemos algo como esto:

En este punto se puede observar que no hemos establecido aún un color de fondo para el área de contenido. Esto es porque... Lo olvidé. Así que lo vamos a hacer ahora, ¿vamos?

1	body {
2	font-family: Arial, Helvetica, sans-serif;
3	background: #ebe8e8;
4	}

Bien, ahora estamos listos para agregar algún padding para espaciar todo hacia fuera.
en primer lugar, la distancia desde la parte inferior del menú de navegación a la parte superior del encabezado h2 es de 25px:

#content h2 {
    font-size: 36px;
    color: #015878;
    padding-top: 25px; 
}

A continuación, la distancia desde la parte inferior del encabezado h2 hacia la parte superior del encabezado h3 es también alrededor de 25px, así que repite básicamente el mismo código:

#content h3 {
    font-size: 24px;
    color: #444444;
    padding-top: 20px; 
}

Ahora, la distancia desde la parte inferior del encabezado h3 hacia la parte superior del primer párrafo es de cerca de 45px, pero si establecemos el padding-top a 40px, también acabaremos con 40px de relleno entre los dos párrafos. Puesto que los párrafos son sólo cerca de 20px aparte, necesitamos dividir el padding en la parte superior e inferior: Añade 20px de padding en la parte inferior del encabezado h3 en el fondo y 20px de padding en la parte superior del párrafo.

#content h3 {
    font-size: 24px;
    color: #444444;
    padding-top: 20px;
    padding-bottom: 20px; 
}

#content p {
    font-size: 14px;
    color: #595858;
    padding-top: 20px; 
}

Comprueba los resultados:

Sección de noticias

El espacio es un poco diferente en la sección de noticias, en primer lugar, tenemos que bajar la página un poco. También hay demasiado relleno debajo del encabezado h3, así que vamos a quitar un poco.
También necesitamos reducir el padding por encima de los párrafos, y añadir algo de padding entre las dos noticias.

#news {
    padding-top: 10px; 
}

#news h3 {
    padding-bottom: 10px; 
}

#news p {
    padding-top: 10px;
    padding-bottom: 14px; 
}

Que tiene este aspecto:

Allí, ahora todo lo que tenemos que hacer es sacar la barra lateral al lado y hemos terminado el contenido principal.

Paso 27 - Flotando la Barra Lateral

En primer lugar, debemos establecer el ancho de la sección contenido:

1	#content {
2	width: 510px;
3	}

Ahora, para sacar la barra lateral, una vez más usaremos flotadores, establecer el área de contenido y el sidebar para que floten a la izquierda.

#content {
    width: 510px;
    float: left; 
}

#sidebar {
    float: left; 
}

Si revisas el navegador, notarás que nuestro texto de pie de página se ha enrollado alrededor de la barra lateral. Sabemos cómo lidiar con este problema por ahora: sólo tenemos que añadir nuestro pequeño div que limpia el marcado:

<div id="contributors">
	<h3>Contributors</h3>
	<ul>
		<li><a href="#">John Smith, freelance writer</a></li>
		<li><a href="#">Jack McCoy, designer</a></li>
		<li><a href="#">Lenny Briscoe, editor</a></li>
		<li><a href="#">John Smith, martketing</a></li>
	</ul>
	<a href="#">Join Our Team</a> 
</div>
</div><!--end sidebar-->
<div style="clear:both"></div>

</div><!--end main container--> 

</div><!--end main-->

Bien, el siguiente paso es copiar los estilos de fuente de nuestro psd para la barra lateral:

#sidebar h3 {
    font-size: 24px;
    color: #044055;
    font-weight: normal;
}

#sidebar ul li a {
    font-size: 14px;
    color: #393838; 
}

Recuerda que para estilizar la fuente de los enlaces en una lista desordenada, necesitamos hacer referencia a la etiqueta de ancla, más que en el elemento de la lista en sí mismo.
Ahora, si miramos nuestro psd otra vez, notaremos que el texto de los elementos de lista en el widget de "subscribe" es ligeramente más grande que en el resto de la barra lateral. Para solucionar esto, tenemos que apuntar a la lista desordenada específica, así que tenemos que añadir un valor de id a la ul suscrita en nuestro marcado:

1	<ul id="subscribe">
2	<li><a href="#">Subscribe via RSS</a></li>
3	<li><a href="#">Get Email Updates</a></li>
4	<li><a href="#">Follow us on Twitter</a></li>
5	</ul>

Entonces podemos referirnos a él en nuestro css:

1	ul#subscribe li a {
2	font-size: 18px;
3	}

Ahora necesitamos estilizar nuestro panel lateral: Añadir padding, márgenes, fondos y bordes. Primero vamos a deshacernos de los bullets:

1	#sidebar ul {
2	list-style: none;
3	}

OK por lo que todavía va de la manera equivocada,vamos a arreglar esto añadiendo márgenes en la parte superior e izquierda. Cuando medimos en el psd, medimos hasta donde comienza el borde de la barra lateral.

#sidebar {
    float: left;
    margin-left: 55px;
    margin-top: 35px;
}

Ahora para el fondo: por debajo de la propiedad margin-top, agrega las propiedades de fondo y borde:

1	background: #d4d6d3;
2	border: 1px solid #BEBDBD;

A continuación añadimos 15 px de padding a todos los lados:

1	padding: 15px;

Y luego agregamos el padding a nuestros estilos de texto para espaciar nuestro menú:

#sidebar h3 {
    font-size: 24px;
    color: #044055;
    font-weight: normal;
    padding-bottom: 20px;
    padding-left: 15px;
}

#sidebar ul {
    list-style: none;
    padding-bottom: 25px;
}

#sidebar ul li a {
    font-size: 14px;
    color: #393838; 
}

ul#subscribe li {
    padding-bottom: 5px; 
}

ul#subscribe li a {
    font-size: 18px; 
}

Nuestro panel lateral ya se ve casi perfecto, sólo necesitamos añadir los iconos en la sección de suscribirse y estilizar la etiqueta de anclaje "únetenos".

Ok, así que vamos a hacer que esos íconos funcionen. Agregar imágenes a una lista desordenada puede parecer confuso, pero si tomas las cosas paso a paso, tiene perfecto sentido. Pero es un poco tedioso.
Para empezar, vamos a tener que hacer espacio para los iconos. Vamos a definirlas como imágenes de fondo, por lo que si utilizamos la propiedad padding para moverlas sobre los elementos de lista un poco, las imágenes no se verán afectados. Los iconos son cerca de 26px de ancho, así que vamos a añadir algún relleno a la izquierda de los elementos de la lista:

1	ul#subscribe li {
2	padding-bottom: 5px;
3	padding-left: 30px;
4	}

Ahora necesitamos una manera de tratar cada elemento de la lista independientemente, por lo que vamos a añadir algunos id en el marcado:

1	<ul id="subscribe">
2	<li id="rss"><a href="#">Subscribe via RSS</a></li>
3	<li id="email"><a href="#">Get Email Updates</a></li>
4	<li id="twitter"><a href="#">Follow us on Twitter</a></li>
5	</ul>

Ahora añadimos imágenes de fondo para cada elemento de la lista:

li#rss {
    background: url(images/rss_icon.png) no-repeat; 
}

li#email {
    background: url(images/email_icon.png) no-repeat; 
}

li#twitter {
    background: url(images/twitter_icon.png) no-repeat; 
}

En este momento se me ocurrió que quizás era un poco demasiado grande para los enlaces 18px, así que reduje a una menos dramática 16px, que me permitió añadir un poquito más de padding a la izquierda sin que se extendiera la barra lateral.

1	ul#subscribe li {
2	padding-bottom: 5px;
3	padding-left: 35px;
4	}

¡Nuestra pequeña barra lateral está casi lista! Ahora estilicemos nuestro botón:

Es necesario apuntarle al botón, así que vamos a añadir una clase al marcado: (estoy usando una clase en lugar de un identificador esta vez, lo cual es una práctica común, como hipotéticamente podríamos añadir más botones más adelante)

1	<a href="#" class="button">Join Our Team</a>

Asi que arreglemos el estilo del texto y agreguémoslo en nuestro recorte repetido del fondo:

a.button {
    color: #393838;
    text-decoration: none;
    background: url(images/button_slice.jpg) repeat-x; 
}

como puedes ver, nuestra imagen de fondo está ahí, pero sólo aparece directamente detrás del texto, necesitamos darle espacio para difundirlo hacia fuera. Primero, vamos a darle un margen para ponerlo en el centro de la barra lateral:

1	margin-left: 30px;

y agregar algo de padding a cada lado para que nuestro botón se extienda:

1	padding: 13px 23px;

Esta es una manera corta de escribir las propiedades del padding, y es completamente aceptable, e incluso atrevida ya que ahorra espacio. En este caso, especifica 13px de padding arriba y en la parte inferior y 23px de padding a la izquierda y a la derecha.

¡el botón se ve muy bien, pero oops! movido a la derecha 23px, así que vamos a reducir nuestro margen un poco para compensar:

1	margin-left: 14px;

Ahora sólo démosle espacio debajo añadiendo padding al div de la barra lateral entera:

#sidebar {
    float: left;
    margin-left: 55px;
    margin-top: 35px;
    background: #d4d6d3;
    border: 1px solid #BEBDBD;
    padding: 15px 15px 30px 15px;  
}

Aquí está otra vez este atajo en la propiedad: va en este orden: arriba, izquierda, abajo, derecha. Así que aquí dice 15px en todas las partes excepto la parte inferior, que debe ser 30px.

Finalmente, sólo necesitamos añadir ese borde de 1px a la clase button:

1	border: 1px solid #c7c7c7;

Y allí lo tenemos, una barra lateral!

Paso 28 - El Pie de Página

Por último, nuestro simple y pequeño pie de página. Pondremos el pie de página de la misma manera como establecimos el encabezado.
Usa un recorte repetido dentro de un div de anchura sin especificar y luego agregando el contenido dentro de un ancho fijo, centrado en el div.
Aqui es donde nuestro div .container viene bien, porque no necesitamos especificar los 800px o margin: auto esta vez, porque ya está hecho.
Vamos a empezar con el recorte que se repite:

1	#footer {
2	background: url(images/footer_slice.jpg) repeat-x;
3	}

Es un comienzo, pero es muy pequeño. Vamos a añadir algo de padding y hacer el texto blanco:

#footer {
    background: url(images/footer_slice.jpg) repeat-x;
    padding-top: 20px;
    padding-bottom:60px;
    margin-top: 40px;
    color: #fff; 
}

y toda la cosa:

Paso 29 - Pequeños Cambios

En un navegador, las cosas se ven un poco diferentes que en Photoshop, por lo que querríamos realizar algunos cambios menores. Por ejemplo, me gustaría un poco más de padding sobre el contenido principal y la barra lateral. Lo vamos a añadir en la parte inferior del menú.

1	ul#menu {padding-bottom: 50px}

También decidí que quería que el menú se alineara a la izquierda, así que voy a quitar el padding a la izquierda. Ahora los elementos están más cercanos juntos, porque teníamos un padding de 75px a la derecha y 30px a la izquierda, para un total de 105. Ahora que hemos quitado el padding izquierdo, tenemos que añadirlo a la derecha para cuadrar la diferencia:

ul#menu li {
    float: left;
    padding-right: 105px;
    width: 95px; 
}

Y el gran final:

¿Lo siguiente... espera? ¿Qué? ¿hemos terminado?
¡Hemos terminado!

Ahora sólo nos preocupamos por hacer algo de limpieza: Validación.

Paso 30 - Validación

La validación es un paso crucial en el diseño de un sitio web, no voy a entrar en las infinitas razones aquí porque este artículo lo hace por mí. Aquí solo voy a caminar a través del proceso:

Validación de HTML

Ve a w3.org Validation Service, selecciona validar por carga de archivos, selecciona el archivo index.html y haz clic en "check".
Siguiente... El momento de la verdad:

ROJO (el rojo es malo!)

No te preocupes, no es tan malo; vamos a revisar lo que pasó:
parece que sólo tengo un error:

Me pillan usando la misma etiqueta id dos veces, que podría causar una confusión grave. Puesto que tenemos un montón de estilos definidos para la ul con el id "subscribe", sólo vamos a cambiar el nombre del div en lugar de otro: vamos a llamarlo "feeds"
Ahora tenemos que comprobar que no hemos definido ningún estilo de #subscribe, y no lo hemos hecho!
Para estar seguro, vamos a cargar nuestra página para asegurarnos de que no hay cambios no intencionales.
¡Se ve bien! Ahora vamos a ejecutar la validación otra vez:

¡Un éxito! Nuestra página es XHTML válido. Puedes incluso descargar un icono si quieres presumir.

Nota: me sorprendió gratamente encontrar un único error, si no eres tan afortunado, lee la información sugerida en el w3 shcools o revisa este artículo de Glen Stansberry.

Parece que hemos terminado! Ah, pero si solo fuera así de fácil. ¡Todavía tenemos que validar el CSS!

Validación de CSS

Dirígete al validador de CSS de w3 y pasa por el mismo proceso como con el código html, sólo que esta vez selecciona el archivo style.css. Comprobando...

¡Somos válidos!

Sin embargo, conseguimos unas advertencias. Para mantenernos dentro de lo tolerante de la iglesia, ciertamente debemos prestar atención:

Son sólo unos pequeños problemas: debemos haber declarado anchos para todos nuestros artículos flotados. Una vez más, estas sugerencias son opcionales, pero es mejor escuchar las críticas constructivas.
Limpieza: nuestro eslogan, los elementos del de lista desordenada del menú y la barra lateral deben tener anchuras declarados. También queremos hacer esto sin cambiar el aspecto de la página.
Primero, el eslogan. Sólo podemos hacer una estimación aproximada en este caso, se trata de 400px de ancho.

#tagline {
    float: left;
    padding-top: 20px;
    padding-left: 20px;
    width: 400px; 
}

Y recarga: ningún cambio, excelente. A continuación, los elementos de la lista de menú. Esto es un poco más complicado: nuestra página es 800px de ancho, por lo que es la anchura total máxima de todos los elementos de la lista juntos. Si dividimos por los cuatro elementos de la lista y establecemos el ancho de 200px, los elementos se mezclan y se listan verticalmente. Esto es porque tenemos padding a ambos lados de cada elementos de la lista: 30px a la izquierda y 75px a la derecha. Resta 105 de 200, y la anchura restante es de 95px.

ul#menu li {
    float: left;
    padding-left: 30px;
    padding-right: 75px;
    width: 95px; 
}

La misma idea con la barra lateral: en primer lugar echemos un vistazo a la anchura de la zona de contenido: 510px. El resto en nuestra página de 800px es 290px, pero primero tenemos que restar todo el relleno a la izquierda y derecha: 290-30 = 260. Luego resta el margen izquierdo, y nos quedamos con 205px. Un último problema: nuestro 1px de borde, así que vamos a restar otros 2px y a establecer el ancho de la barra lateral a 203px. Compruébalo de nuevo, ningún cambio.

Excelente, si lo validamos una vez más, no hay errores, ni una advertencia!
Nuestra página web, en cuanto a estándares de la w3c es ideal.

Conclusión

Así que ahí lo tienes, un sitio web muy sencillo, bien codificado. A lo largo de este tutorial, mi esperanza es que recojas algunos conocimientos valiosos para aplicarle a tus propios diseños y ahora estás listo para empezar a programar tus propios sitios.

Síguenos en Twitter, o suscríbete a la Nettuts + RSS Feed para más tutoriales de desarrollo web diarios y artículos.