Maquetacion y Hojas de estilo

MAQUETACIÓN Y HOJAS DE ESTILO EN HTML
Pero, ¿que es eso de la maquetación?
En pocas palabras, maquetar una pagina web es pasar el diseño a código HTML, poniendo cada cosa en su lugar (una cabecera, un menu, etc.).
Hasta hace unos años la única manera de maquetar una página web era mediante tablas HTML (), pero esto tiene muchas desventajas y limitaciones, por eso la técnica de maquetación fueevolucionando con los años hasta llegar al punto donde no se usan tablas, si no capas (los famosos DIVs) a las que se le dan formato mediante CSS.
 
¿Capas, layouts, divs? ¿que es eso?
Las capas, layouts o divs son la misma cosa con distinto nombre jeje, para tener un concepto mental mas fuerte de lo que son, podemos imaginarlos como contenedores o bloques donde podemos meter lo que queramosdentro (imágenes, texto, animaciones, otro bloque, o todo al mismo tiempo) a los que se le asigna un ancho, alto y posición, de esta manera se van a ir posicionando consiguiendo la estructura que queremos.
veamos un ejemplo gráfico:

Como podemos ver, tenemos 3 capas estructuradas de la siguiente manera:
Capa 1: es la capa principal y contenedora
Capa 2: capa dentro de la capa contenedora 1 yalineada a la izquierda (float:left;)
Capa 3: igual que la capa 2, solo que tiene un margen con respecto a esta ultima (float:left; margin: 10px; ya veremos esto mas en detalle).
No te compliques mucho tratando de entender el concepto de golpe, ya lo vamos a ir viendo mas detenidamente durante estas lecciones.
Creando nuestro primer DIV
Recomendar lección:
En esta lección aprenderemos a crearnuestro primer DIV para maquetarlo con CSS, darle formato y aplicarle estilos.
Es hora de aprender a crear una capa, no te asustes porque no es nada del otro mundo, si seguiste todas las lecciones te será muy fácil.
 
Como crear un DIV
La forma de crear una capa DIV es así:



recuerda que todo contenido visible de la página debe ir entre las etiquetas (esto ya está explicado al comienzodel curso paso a paso).

con el código HTML completo quedaría así:


   
        MAQUETACIÓN
   

    ¡Esta es mi primera capa!




Maquetando una página Web con DIVs o Capas (layouts)
Recomendar lección:
En esta lección aprenderemos a maquetar una página web íntegramente en CSS y HTML, cada parte de ella explicada paso a paso, con ejemplos prácticos para entenderlo mejor.
A lolargo de este curso de maquetación CSS vimos los conceptos básicos para crear y poder flotar capas entre otras cosas, ahora vamos a tratar de poner en práctica lo que aprendimos para maquetar una pagina con la siguiente estructura:
 
Cabecera: acá puede ir un logo o el nombre de tu pagina web
Barra lateral: podemos poner un menu vertical con listas HTML
Contenido: donde irá el contenido de laweb
Pie de página: podemos poner lo que necesitemos, desde el copyright hasta los enlaces recomendados
La estructura deberá quedar así:
 

 
¿Listos? Comenzamos:




Maquetando con HTML

MAQUETACIÓN

#contenedor {
width: 900px;
height: 400px;
}
#cabecera {
background-color: green;
height:50px;
}
#barra-lateral {
background-color:orange;
float: left;
width:140px;
height:100%;
}
#contenido {
background-color: gray;
float:left;
width:760px;
height:100%;
}
#pie {
background-color: blue;
color:white;
}



Esta es la cabecera
Esta es la barralateral
Este es el contenido principal
Este es el pie de pagina






Maquetando con CSS
Para este ejercicio creamos 2 archivos uno con el nombres estilos.css y el otro index.html
Maquetando contenedor general con css

En esta lección de maquetación aprenderemos a maquetar el contenedor general de nuestra página web
Contenedor general...