Cabecera

Una estructura web común o típica, normalmente tiene una cabecera arriba del todo donde suele situarse el título o nombre de la web, a menudo con un diseño o alguna imagen.

Eso es lo que vamos a hacer, pero primero, es conveniente y recomendable crear un contenedor.

El contenedor será un <div> donde introduciremos todos los elementos.

 

Digamos que es una caja con unas medidas para delimitarnos el tamaño de la web y facilitarnos la organización.

 

 

notepad

 

 

Le ponemos un color de fondo para visualizarlo, un ancho fijo en píxeles y un alto de 100%, que será el total de lo que vemos en el navegador.

Si no pusiéramos márgenes, aparecería alineado a la izquierda.

Podríamos darle un margen izquierdo para centrar el contenedor, pero mejor que eso, podemos centrarlo automáticamente, dando los valores auto a los márgenes izquierdo y derecho. (Líneas 5 y 6).

Nuestro código HTML sería tan solo crear un div con nuestro id:

 

<div id="contenedor"></div>

 

Y este sería el resultado:

 

 

 

 

Tenemos nuestro contenedor, ya podemos comenzar a introducir elementos.

Vamos con la cabecera, de la misma forma, creamos su regla:

 

 

notepad

 

 

Poniendo el ancho al 100% nos aseguramos de que ocupe el ancho total del contenedor (siempre que ese elemento div esté dentro del mismo), luego le hemos dado un alto fijo y le ponemos una imagen de fondo con background-image.

Os dejo la imagen por si queréis utilizarla en pruebas.

Creamos la cabecera en HTML:

 

 

notepad

 

 

Ya tenemos nuestra cabecera dentro del contenedor, veamos el resultado:

 

 


 

Contenidos que te pueden interesar
Este sitio usa cookies para personalizar el contenido y los anuncios, ofrecer funciones de redes sociales y analizar el tráfico. Ninguna cookie será instalada a menos que se desplace exprésamente más de 400px. Leer nuestra Política de Privacidad y Política de Cookies. Las acepto | No quiero aprender cursos gratis. Sácame