Creando la estructura HTML de tu página (uso de DIVs)

La correcta creación de la estructura HTML, es sin duda la base de la maquetación web, a convertir un PSD a HTML. Es fundamental que este proceso esté correctamente realizado.

En  este artículo,  aprenderáa como armar profesionalmente la estructura HTML de tus páginas web, y que las mismas sean 100% compatibles con cualquier navegador web.

Realizaremos esto con las etiquetas <div>

En artículos anteriores te comentaba de la importancia que tiene poder visualizar imaginariamente las secciones que componen tu página web, antes de comenzar con la codificacion HTML.
Esto es de GRAN valor cuando uno desea convertir un Psd a Html, correctamente.
(si no recuedas o no leiste el artículo, te pido que lo hagas ahora antes de continuar)

Te voy a explicar aquí, la forma correcta de armar la estructura Html, en esas secciones.

Estas secciones que definiste mentalmente analizando tu diseño, las pasaremos al documento HTML con la ayuda de las etiquetas <div>. Con las mismas tendremos un control TOTAL sobre la colocación de los distintos elementos dentro de nuestra página.

Los DIVs <div>
Una etiqueta <div> define un bloque donde incluiremos información dentro de nuestro documento. A este bloque definido con la etiqueta <div> le asignaremos por medio del CSS, las propiedades de posición, tamaño, color, etc etc.

La forma de definir un bloque con la etiqueta <div> dentro de nuestro documento HTML, es tan simple como:
[sourcecode language=’html’]

[/sourcecode]
Vamos a hacer un ejemplo REAL de maquetacion web, creando los bloques <div> de las secciones que descubrimos en nuestro documento, cuando hicimos el análisis de las mismas con la «Visualización Mental»

Para este ejemplo, elegí al azar una plantilla web extraida del sitio www.templatemonster.com:

Y aqui he hecho MI visualización mental de las secciones del documento:

Ahora bien, vamos a realizar nuestro estructurado de las secciones con las etiquetas <div>.
Para ello abrimos un nuevo documento HTML con las etiquetes basicas (html, header, title y body), y dentro del <body> colocaremos un primer <div> llamado «contenedor», que tiene la función de contener todos los otros bloques del documento.
Luego, dentro del bloque «contenedor», colocamos los bloques (divs) uno debajo del otro, siempre de arriba hacia abajo, asignándole a cada uno, un identificador «id» con el nombre del bloque que hayamos elegido.
Nuestro codigo HTML quedaría entonces así:
[sourcecode language=’html’]

Estructurado de DIVs



[/sourcecode]
El identificador «id» de cada apertura de bloque <div>,  nos servirá para luego aplicarle por medio del CSS, las propiedades de alto, ancho, posición, color, etc etc.

Aplicando propiedades a los DIVs, con CSS
Ahora aplicaremos las propiedades de tamaño y posición a nuestros bloques DIVs, y con esto tendremos la estructura lista para comenzar a volcar los contenidos dentro de los sectores o bloques.

Creamos un nuevo archivo y lo guardamos con el nombre de «estilos.css».
Luego abrimos el archivo HTML donde estan nuestros DIVs y linkemos a nuestro CSS, colocando dentro del HEAD del documento Html,  la siguiente linea:

<link href=»estilos.css» rel=»stylesheet» type=»text/css»>

Por lo que nuestro HTML quedaría asi:
[sourcecode language=’html’]

Estructurado de DIVs

Texto para #slices
Texto para #cuerpo



[/sourcecode]
NOTA: Fíjate, que dentro de cada bloque le agregue un pequeño texto para podamos observarlo en el ejemplo terminado.

Ahora volvemos a nuestro archivo CSS y definiremos las medidas de cada bloque DIV, el tamaño y un color para que lo podamos observar en el ejemplo terminado.
Para ello debemos definir las propiedades de cada bloque, comenzando con el signo «#», seguido del nombre de identificador ID que le dimos al bloque elegido, luego abrimos la llave «{«, colocamos las propiedades una por linea finalizando con «;», y para cerrar colocamos la otra llave «}».
[sourcecode language=’css’]

#menu {
height: 52px;
width: 968px;
background-color: #00F;
}

#slices {
height: 359px;
width: 968px;
background-color: #FF0;
}

#cuerpo {
height: 700px;
background-color: #C60;
}

#contenedor {
width: 968px;
}

#footer {
height: 50px;
width: 968px;
background-color: #C09;
}
[/sourcecode]
Aqui solamente coloqué propiedades de alto (height), ancho (width) y color de fondo (banckground-color) de cada bloque, las cuales debes obtener midiendo cada bloque de tu diseño con cualquier programa de edición de imágenes como Photoshop, y con el mismo programa podemos obtener el color de fondo que le queremos dar al bloque. (aqui solo le puse color de fondo para que los podamos ver)

Finalizado esto, guarda los 2 documentos.

LISTO !!!!
Has estructurado tu documento !!!!
Aqui te dejo los archivos para que puedas verlos y practiques con ellos:

Ahora solo queda volcar los contenidos de texto e imágenes, dentro de cada bloque DIV y tu pagina estará lista !!!
Esto lo veremos en el próximo articulo.

Si quieres aprender todo lo referente a maquetación web profesional con HTML y CSS, te recomiendo que accedas al curso completo:
[product id=»2826″]

Cursos de desarrollo web:

[featured_products per_page="12" columns="4"]

Diseñador y Programador Web Full-Stack especializado en PHP / MySQL / Laravel / Wordpress / HTML5 / CSS3 / JS.

46 thoughts on “Creando la estructura HTML de tu página (uso de DIVs)

    1. psd a html paso a paso Post author Reply

      Gracias Joan
      Justamente ahora estoy escribiendo unos artículos.
      En breve estarán publicados.

      Saludos!!!
      Cristian

      1. Cristian - PSD a HTML Paso a Paso Post author Reply

        Asi es Alex.
        Las tablas ya no se utilizan mas para dar estructura a un documento HTML, se utilizan los DIVs u otras etiquetas de HTML5.
        Pero las tablas solo sirven para formatear datos de estilo tabular como listas.
        Saludos!
        Cristian

    1. psd a html paso a paso Post author Reply

      Gracias Dani.
      Cualquier duda que tengas sobre maquetacion, posteala aqui y la responderé con gusto.

      Saludos!
      Cristian

    2. psd a html paso a paso Post author Reply

      Muchas gracias Dani.
      Mi interés es ayudar a la gente con este tema de la maquetación web.

      Escribeme si tienes alguna duda.
      Saludos!
      Cristian

  1. Anonimo Reply

    Gracias maestro, lo has hecho fácil para entender, gracias por el artículo y esperamos que puedas seguir enseñándonos.

  2. Gallo Reply

    Siempre he maquetado con tablas, y uso mucho la opcion de tablas expandidas, esto me resulta visualmente muy grafico y puedo entender y manipular facilmente la estructura. PERO… estoy interesado en comenzar a maquetar con div, pero no encuentro una opcion como tienen las tablas (tablas expandidas), para poder visualizar los div facilmente y poder manipularlos. Hay algo asi, o como debo hacer. se aceptan sugerencias, ya que intento trabajar con div, pero enseguida se arma un gran merengue y se desordena todo

    1. Cristian (PSD a HTML) Post author Reply

      Hola Gallo
      Dejame decirte que el problema que tienes, es el mismo problema que tuvimos todos a la hora de empezar a trabajar con los DIVs.
      El tema es que tienes que hacer un cambio de mentalidad.
      No tienes que maquetar de forma visual, sino que lo tienes que hacer pensando en estructura de cajas.

      Esto lo vemos en detalle dentro del Curso Completo de Maquetación Web.

      Igualmente busca aqui en el blog, que en algun momento escribí unos articulos sobre la estructuración de un documento web.
      Eso puede ayudarte.

      Saludos!
      Cristian

  3. Goytortua Reply

    Buen aporte y lo más importante con un lenguaje claro y ejemplos que nos facilita la vida a las personas que apenas empezamos, gracias, espero me puedas mandar unas sugerencias para mi pagina

  4. Juan Carlos Reply

    Muy bueno! He tratado de descargar el ejemplo pero no termino de ver dnd pinchar para bajar el fichero, al pegar el código de ejemplo las líneas numéricas me matan! Y de momento no encuentro expresión regular para solucionar esto con notepad ++, : )

    Mucho ánimo y a seguir con estas buena iniciativa! Para los que venimos del mundo de sistemas esto nos ayuda mucho!

    Salu2!

  5. Mauro Reply

    Simple y concreto me gusto leer el articulo, soy programados y estoy estudiando un poco de divs y html5 porque quiero salir de las tablas, es OBSOLETO YA. Te pregunto en la hoja de estilo para el box #cuerpo NO LE OTORGAS VALORES PARA EL WIDTH, por defecto tomaría el limite de #contenedor ?

    gracias …

    1. Cristian (PSD a HTML) Post author Reply

      Gracias Mauro
      Exacto: si a un div no le otorgas medidas de ancho, toma el ancho de su contenedor mas proximo.
      Saludos!
      Cristian

  6. Victor Reply

    Buenas noches Cristian, estoy intentando hacer funcionar los ejemplos y no hay forma, solamente se me muestran los textos sin formato alguno, parece que no se carga el fichero css. Me gustaría que me indicaras cual puede ser el problema ya que he probado con firefox y con explorer y ninguno funciona.

    Gracias y saludos.

    1. Cristian (PSD a HTML) Post author Reply

      Victor
      Asegurate que la ruta desde donde lee el archivo CSS, es correcta.

      Sino enviame lo que has hecho y lo reviso.
      Saludos!
      Cristian

  7. Jesse Reply

    Hola, he empezado apenas en esto y tengo que maquetar un diseño con el logo, menu y un pequeño footer en todo el lado izquierdo y solo derecha de contenido, se puede? La página no es comun, no tiene cabecera ni pie como las tipicas paginas…

    1. Cristian (PSD a HTML) Post author Reply

      Hola Jesse
      Si por supuesto que se puede.
      Para lograrlo debes manejar correctamente los DIVs y sus propieades CSS.
      Y luego detalles como los altos de las columnas, etc etc.

      Si no tienes experiencia en maquetacion, te recomiendo el Curso «PSD a HTML Paso a Paso«.
      Alli aprenderás TODO lo referente a maquetacion web profesional.

      Saludos!
      Cristian

    1. Cristian (PSD a HTML) Post author Reply

      Silvia
      Busca en el blog, aqui hay mucha info sobre centrado y trabajo con DIVs.
      Saludos!
      Cristian

  8. Marko Reply

    Muy bien estimado Cristian excelente tu explicación sobre todo el tema de maquetacion web, personalmente he usado siempre tables, pero por cuestiones de trabajo empece con el tema de los divs.
    Nuevamente muchas gracias por tu valioso aporté

    Cordiales saludos
    Marko

    1. Cristian (PSD a HTML) Post author Reply

      Por nada Marko
      Las tablas aun sirven para algunas cosas , como para organizar datos tabulares.
      Pero hoy en dia hay que maquetar 100% con DIVs para que el sitio sea escalable y legible en cualquier dispositivo.

      Saludos!
      Cristian

    1. Cristian (PSD a HTML) Post author Reply

      Juanito
      El archivo CSS debes buscarlo dentro de los archivos de tu sitio web.

      Saludos
      Cristian

  9. Hunter_2k1 Reply

    esta perfecto todo el material que estas presentando… en lo personal en la parte que mas se me complica la existencia es la creacion de menus dinamicos, que contengan una posicion fija, que cambien la img de fondo cuando pasas el mouse y que cambie cuando selecciones una pagina especifica.

    1. PSD a HTML Paso a Paso Post author Reply

      Amigo
      Eso lo tienes que hacer directamente con Javascript o tambien con las pseudo-clases :hover de CSS.

      Saludos!
      Cristian

  10. Fabian Torres Reply

    Cristian en el curso de psd a html, mostras en detalle todo como armar una página completa o el homepage de un sitio y su página de estilos.css y como se vincula, la pregunta es a las otras páginas del sitio se las vincula también a este estilos.css o se hace otro css para cada página?, se entiende?
    La idea es hacer una estructura con slide para el home y otra para las páginas interiores.
    gracias

    Fabián

    1. PSD a HTML Paso a Paso Post author Reply

      Fabian
      Es recomendable que utilices un solo archivo CSS linkeado a todas las paginas.
      Asi cuando tengas que modificar algo, solo lo modificas una sola vez en 1 archivo.

      Saludos!
      Cristian

  11. PARAKE LO KIEREN Reply

    Gracias hermano, saludos desde Colombia, este articulo sobre DIVs me soluciono muchas dudas, te felicito y luego te molestare con algunas preguntas, hasta pronto y adelante con este bonito proyecto.

    1. Cristian - PSD a HTML Paso a Paso Post author Reply

      Por nada amigo, me alegra mucho que te haya servido.
      Gracias por tus comentarios.
      🙂

  12. GRACIELA Reply

    Christian he seguido tus tutoriales y mi duda es sobre la creacion de una pagina de aterrizaje que ya tengo lista en codigo html pero tengo problema para colocar la informacion del autorespondedor terminarla. Espero puedas ayudarme

  13. Jorge Pilataxi Reply

    Muy bueno, eso es lo que estaba buscando pero las tablas ya quedaran al olvido. También quisiera de la estructura básica de php, java, android .

  14. Lennin Reply

    Me gustaria saber que reglas correctas usar para las clases DIV y hacer que esto ocupe un 100 % de la pantalla, como por ejemplo encerrarlas en un «wrapper» y que siempre se ajusten al ancho de la pantalla, saludos gracias

    1. Cristian Carrera Post author Reply

      Lennin
      A modo simple te comento que debes usar «width: 100%» pero lo que quieres hacer no es algo que se realice con una simple regla.
      Debes maquetar la estructura correctamente para que luego el sitio se adapte.

      Si no sabes como trabajar correctamente con DIVs y CSS para generar una estructura consistente, te recomiendo mi curso completo de maquetacion PSD a HTML Paso a Paso.
      Alli enseño todo lo referente a maquetacion web profesional con HTML y CSS.

      Si ya sabes maquetar de forma correcta y consistente, y buscas realizar sitios que se adapten a cualquier pantalla, debes trabajar con diseño responsivo. Para ello te recomiendo mi cursos Responsive Design desde Cero.
      Alli enseño todo lo referente a como crear sitios web que se adapten a todas las pantallas y dispositivos móviles.
      Saludos!
      Cristian

  15. William Jhon Reply

    Excelente, muy bien explicado, Me gustria saber la diferencia entre crear Div’s y los apartados seccion, articulo, footer, etc.- gracias de ante mano

    1. Cristian Carrera Post author Reply

      Basicamente es lo mismo, pero con la aparicion de HTML5 debemos intentar usar la etiquetas mas semanticas y descriptivas SECTION, FOOTER, HEADER etc etc.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.