Para maquetar una página web necesitamos dos herramientas fundamentales:
Un editor de texto. Yo uso SublimeText.
Un navegador web.

Antes de empezar es el momento de echar un rápido vistazo de nuevo al wireframe que realizamos previamente:

wireframe

En este boceto están definidas claramente tres partes en nuestro sitio:
Cabecera
Contenido
Pie

Cada una de ellas corresponderá a un div (sección) dentro de nuestro HTML. (Si en este punto no sabes que es un div, te recomiendo esta lectura antes de seguir con el tutorial.) Una vez entendido este concepto podemos empezar a teclear en nuestro archivo HTML.

Recomiendo tener siempre una plantilla base.html que podría ser como la que muestro a continuación:

En esta página podrás entender a qué corresponde cada una de las etiquetas.

Si copias y pegas esta misma estructura en tu editor de texto, lo guardas como index.html y lo abres desde un navegador, comprobarás que tu página web ya funciona.

Puedes ver la demostración aquí.

Volvemos entonces al principio para maquetar nuestro sitio web. Dijimos que está estructurada en tres grandes bloques a los que hemos llamado cabecera, contenido y pie. Nuestro archivo HTML quedaría de la siguiente manera:

Aquí apreciamos que los 3 divs que componen la página los he metido dentro de otro al que he llamado “contendor_global“. ¿Por qué? Pues como vemos en la página que estamos maquetando, el contenido de la misma aparece centrado en la pantalla y no alineado a la izquierda o a la derecha. Por eso colocamos todo el interior dentro de un bloque que los contiene a todos, de este va a depender que centremos el todo.

Ahora vamos a comenzar a introducir el código CSS y vamos comprobando poco a poco que la página está funcionando.

Este archivo deberá guardarse con una extensión .css. y será enlazado desde index.html de la siguiente manera:

Quedando siempre entre las etiquetas <head> y </head>, ahora, nuestro index.html queda así:

 

Visualiza el ejemplo o descarga el archivo.


  1. pasar de PSD a HTML y CSS | definiendo los pasos
  2. pasar de PSD a HTML y CSS | recorte y optimización de imágenes para web
  3. pasar de PSD a HTML y CSS | maquetando una web desde cero
  4. pasar de PSD a HTML y CSS | maquetar un menu
  5. pasar de PSD a HTML y CSS | introducir un vídeo de vimeo o youtube
  6. pasar de PSD a HTML y CSS | crear varias columnas en html y css
  7. pasar de PSD a HTML y CSS | maquetar el pie de página

 

Una Respuesta

  1. Aitor

    Increíble tutorial, llevo días aprendiendo a programar y con esta página me resulta tan rápido adquirir conocimientos que estoy disfrutando al máximo!!
    Muchas gracias por tu trabajo.

    Responder

Hacer Comentario

Su dirección de correo electrónico no será publicada.