Para la creación de las páginas web, ya no solo necesitamos herramientas o etiquetas que nos coloque el texto de forma vertical. La estética y la usabilidad se han convertido en algo fundamental a la hora de realizar nuestros sitios.
Por ello es necesario trabajar con contenedores donde colocar la información, maquetando el sitio para poder dar estructura al contenido. Y al mismo tiempo indicar cual será su comportamiento frente al resto de elementos.
CSS define tres mecanismos para posicionar las cajas de cada elemento HTML:
- Fixed: Posiciona el elemento en una posición fija.
- Absoluto: posicionamiento que consiste en extraer por completo el elemento de su posicionamiento normal y colocarlo en la posición indicada respecto de su elemento padre.
- Relative: referente a la posición que ocuparía normalmente. Deja un hueco en dicha posición.
- Static: es el posicionamiento que se utiliza por defecto, coloca verticalmente los elementos uno debajo de otro. No tienen en cuenta los top, right, bottom y left.
Propiedad top, right, bottom, left
Pala los elementos que están con posicionamiento relativo, realiza un desplazamiento del elemento a partir de su borde superior/derecho/inferior/izquierdo.
En el caso de ser absoluto, el desplazamiento del elemento desde los bordes del elemento que lo contiene (el padre).
En cualquiera de los dos casos, si el desplazamiento se indica en forma de porcentaje, se refiere al porcentaje sobre la anchura (propiedades right y left) o altura (propiedades top y bottom) del elemento.
Propiedad Float
El posicionamiento float es uno de los más utilizados en la composición de las páginas. Una caja posicionada con la propiedad float, se colocar (si tiene espacio) a la derecha o izquierda de sus elementos hermanos.
Ejemplo:
|
1 2 3 4 5 |
img { float: left; } |
Propiedad Overflow
Los contenidos que se encuentran dentro de un elemento suelen ajustarse automáticamente, pero en ocasiones necesitamos que el elemento recorte lo que muestra o nos proporciones o barras de scroll.
CSS dispone de la propiedad overflow para controlar la forma en la que se visualizan los contenidos que sobresalen de sus elementos.
Propiedad Z-index
Además de la posición horizontal y vertical, CSS permite asignar una posición tridimensional a cada caja del documento. La posición de las cajas se controla mediante un eje Z.
Ejemplo
|
1 2 3 4 5 6 7 |
div { position: absolute; } #caja1 { z-index: 5;} #caja2 { z-index: 15; } #caja3 { z-index: 25; } |
Con las propiedades css podemos combinar todos las reglas que hemos visto en este apartado, lo que nos da la posibilidad de crear estructuras para realizar nuestras páginas.
HTML5 semántico
En HTML5 se han creado nuevas etiquetas para indicar quien es quien en nuestra página.
Nuevas etiquetas para la estructura:
<header>
Para indicar la cabeza de nuestra web, donde colocaremos los logos, banners, sliders….
Tambien lo usaremos para indicar dentro de un articulo la zona del titular.
<hgroup>
permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en el sitio.
<nav>
Igual que <header>, <nav> está diseñado para que ahí coloques la botonera de navegación principal. Puedes colocar cualquier etiqueta dentro para la realización del menú, aunque lo re-
comendado es usar listas <ul>.
<section>
Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts. En un video de youtube, habría un section para el video, uno para los datos del ideo, otro para la zona de comentarios.
<article>
Define zonas únicas de contenido independiente. En el home de un blog, cada post sería un article..
<aside>
Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un blog, obviamente el aside es la barra lateral de información. En el home de un pe-
riódico, puede ser el área de indicadores económicos, bibliografía, fuentes …
<footer>
En este bloque pondremos el pie de la pagina, con los elementos que consideremos, direcciones, enlaces a redes sociales, etc.
Recuerda:
Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando necesites una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico.
Usa las etiquetas semánticas de HTML5 solo donde sean necesarias.