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’]
[/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’]
[/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″]
Te animo a que continúes con esta genial web!
Gracias Joan
Justamente ahora estoy escribiendo unos artículos.
En breve estarán publicados.
Saludos!!!
Cristian
Buen aporte!
Hasta ahora utilizaba las tablas para dar formato a la web
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
Muy bien explicado ! la verdad estan muy piola los articulos..
Gracias Dani.
Cualquier duda que tengas sobre maquetacion, posteala aqui y la responderé con gusto.
Saludos!
Cristian
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
Gracias maestro, lo has hecho fácil para entender, gracias por el artículo y esperamos que puedas seguir enseñándonos.
por nada
Saludos!
Cristian
Muy facil de entender,la verdad que nunca pense que fuera tan facil 🙂
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
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
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
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!
Gracias por tu explicación y lo sencillo que haces ver estas tareas.
Muy buen aporte y excelente explicación
Gracias!!
excelente tus aportes ..animo y dios te bendiga .gracias por compartir tus conocimientos tan desinteresadamente
Por nada Nelson
Me alegra haber ayudado.
Saludos!
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 …
Gracias Mauro
Exacto: si a un div no le otorgas medidas de ancho, toma el ancho de su contenedor mas proximo.
Saludos!
Cristian
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.
Victor
Asegurate que la ruta desde donde lee el archivo CSS, es correcta.
Sino enviame lo que has hecho y lo reviso.
Saludos!
Cristian
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…
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
Muchas Gracias, me ha ido genial. Pero ahora no consigo centrarlas verticalmente :/
Silvia
Busca en el blog, aqui hay mucha info sobre centrado y trabajo con DIVs.
Saludos!
Cristian
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
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
oye soy nuevo en el dreamweaver y no se donde esta el archivo CSS donde se modifica
Juanito
El archivo CSS debes buscarlo dentro de los archivos de tu sitio web.
Saludos
Cristian
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.
Amigo
Eso lo tienes que hacer directamente con Javascript o tambien con las pseudo-clases :hover de CSS.
Saludos!
Cristian
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
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
Genial! me sirvió mucho ahorita con los proyectos de la prepa, ¡gracias!
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.
Por nada amigo, me alegra mucho que te haya servido.
Gracias por tus comentarios.
🙂
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
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 .
¡Muchas gracias! Me sirvió de mucho, veré el próximo artículo. 🙂
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
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
ME GUSTARIA SABER POR QUE LE AGREGA FONT A LOS DIVS
Paula, a que te refieres con FONT?? no hay font en los divs.
Excelente, muy bien explicado, Me gustria saber la diferencia entre crear Div’s y los apartados seccion, articulo, footer, etc.- gracias de ante mano
Basicamente es lo mismo, pero con la aparicion de HTML5 debemos intentar usar la etiquetas mas semanticas y descriptivas SECTION, FOOTER, HEADER etc etc.