CSS - intermediate - Lección nº 8
Organizar contenido en una página web
¿De qué trata esta lección?
En esta lección organizaremos el contenido que hemos creado / aprendido. Se colocará en relación con la página y / o en relación a otros contenidos.
Con la etiqueta <div> podemos envolver varias etiquetas HTML y podemos ubicarlas juntas. Podemos alinear el contenido horizontal y verticalmente, además, podemos colocarlo delante o detrás de otro elemento. Aunque las etiquetas <div> no son los únicos elementos que pueden tener una imagen de fondo, intentaremos establecer una imagen de fondo por primera vez en esta lección.
Nueva etiqueta HTML en esta lección:
<div></div> - podemos colocar una sección del contenido de las páginas web en esta etiqueta. Usando esta etiqueta podemos posicionar y alinear contenidos más fácilmente. Otra ventaja de <div> es que podemos aplicar configuraciones de diseño específicas a una sección delimitada por ella.
Nuevas palabras clave CSS en esta lección:
position – Con esta propiedad podemos establecer la posición de un elemento en el sitio web. Esta propiedad puede tener los siguientes valores posibles: static (por defecto), relative, fixed, absolute, sticky.
top, bottom, left, right – Con estas palabras clave podemos definir la posición exacta de un elemento posicionado previamente.
z-index – Con esta propiedad podemos establecer el orden de cobertura de los elementos colocados unos sobre el otros. Solo se puede utilizar con un elemento en posición absolute (absoluta), relative (relativa) o fixed (fija).
background-image – Cada elemento HTML puede tener una imagen de fondo. Para definir la imagen necesitamos su nombre y ruta. El valor escrito en el archivo CSS tiene la forma: url(path/imagename.extension);
Guía:
Ejemplo de secciones envueltas en <div>:
La página web anterior contiene dos secciones. Ambos tienen identificadores (links y back), por lo que podemos aplicarles un diseño diferente.
En la sección links, gracias a la configuración de los colores de fondo (background-color), podemos ver que la sección se extiende de izquierda a derecha en la ventana del navegador. El color de fondo de los enlaces se utiliza solo para los textos.
Usamos una imagen de fondo para la segunda sección. La imagen es más pequeña que la sección, y no hay ajustes relacionados con eso, por lo que la imagen se repetirá. La imagen seleccionada puede repetirse, sin ser visible que no es una imagen grande (se llama fondo de pantalla).
El ancho no está establecido, la sección ocupa toda la ventana de izquierda a derecha. La altura se ajustaría al contenido: la palabra Pattern. Así es como se establece un 80% de altura: esto significa el 80% de la altura de la ventana.
Ambas secciones contienen enlaces, pero como la referencia a la etiqueta <a> está precedida por el ID de la sección, podemos formatearlas de manera diferente, sin tener que usar clases.
Guía:
Ejemplo de posicionamiento fijo:
En las imágenes de arriba, la ubicación de las secciones box1 y box2 es la predeterminada, es decir, estática, pero la sección box3 es fija (fixed). El texto fijo y el cuadro que lo contiene estarán siempre en la esquina superior derecha del navegador: exactamente a 30 píxeles de la derecha y del borde superior de la ventana. Esta posición no depende del tamaño de la ventana.
El ancho de la tercera sección no alcanza el de toda la ventana, su tamaño se ajusta al contenido.
Ejemplo de posicionamiento absoluto y relativo:
En este ejemplo, las secciones superior e inferior (box1 y box3) son estáticas, las usamos como puntos de referencia, para ver cómo se ubican las demás en relación con su posición predeterminada.
La sección con el fondo verde se coloca en posición relativa, se transfiere con 20 píxeles hacia arriba y 100 píxeles desde la izquierda. Podemos ver que el cuadro de arriba no se ve afectado por este cambio.
La posición de las cajas más pequeñas (box4) es absoluta. Originalmente se encuentra en el cuadro verde, pero al establecer el posicionamiento absoluto, definimos su ubicación relacionada con el cuadro 2: tiene 10 píxeles hacia arriba y 100 píxeles a la izquierda.
El ancho de la sección box2 se extiende hacia el borde derecho de la ventana, por lo que el ancho de la sección box4 se ajusta a su contenido.
El lugar original de los elementos establecidos en la posición relativa se deja en blanco: vea el espacio en blanco entre las dos secciones estáticas.
Guía:
En el ejemplo anterior, podemos aplicar la propiedad z-index a los tres cuadros, porque su posición es fija y se superponen. Los valores de z-index aquí son 0, 1, 2, pero también pueden ser negativos. Podemos mover elementos bajo otros elementos sin posicionar.
En esta lección organizaremos el contenido que hemos creado / aprendido. Se colocará en relación con la página y / o en relación a otros contenidos.
Con la etiqueta <div> podemos envolver varias etiquetas HTML y podemos ubicarlas juntas. Podemos alinear el contenido horizontal y verticalmente, además, podemos colocarlo delante o detrás de otro elemento. Aunque las etiquetas <div> no son los únicos elementos que pueden tener una imagen de fondo, intentaremos establecer una imagen de fondo por primera vez en esta lección.
Nueva etiqueta HTML en esta lección:
<div></div> - podemos colocar una sección del contenido de las páginas web en esta etiqueta. Usando esta etiqueta podemos posicionar y alinear contenidos más fácilmente. Otra ventaja de <div> es que podemos aplicar configuraciones de diseño específicas a una sección delimitada por ella.
Nuevas palabras clave CSS en esta lección:
position – Con esta propiedad podemos establecer la posición de un elemento en el sitio web. Esta propiedad puede tener los siguientes valores posibles: static (por defecto), relative, fixed, absolute, sticky.
top, bottom, left, right – Con estas palabras clave podemos definir la posición exacta de un elemento posicionado previamente.
z-index – Con esta propiedad podemos establecer el orden de cobertura de los elementos colocados unos sobre el otros. Solo se puede utilizar con un elemento en posición absolute (absoluta), relative (relativa) o fixed (fija).
background-image – Cada elemento HTML puede tener una imagen de fondo. Para definir la imagen necesitamos su nombre y ruta. El valor escrito en el archivo CSS tiene la forma: url(path/imagename.extension);
Guía:
- static (estático): este es el valor de posicionamiento predeterminado de los elementos en un sitio web. Los elementos con este posicionamiento no están posicionados de ninguna manera, aparecen de acuerdo con el flujo de la página.
- relative (relativo): el elemento se posiciona en relación con su posición normal.
- absolute (absoluto): el elemento se posiciona en relación con el padre más cercano con una posición declarada (excepto estática). Si ningún padre está posicionado de alguna manera, entonces es relativo al cuerpo del documento.
- fixed (fijo): el elemento se coloca en relación con la ventana del navegador y permanece en su lugar incluso en el desplazamiento de la página.
- sticky (adherido): el elemento se coloca en relación con la posición de desplazamiento.
Ejemplo de secciones envueltas en <div>:
La página web anterior contiene dos secciones. Ambos tienen identificadores (links y back), por lo que podemos aplicarles un diseño diferente.
En la sección links, gracias a la configuración de los colores de fondo (background-color), podemos ver que la sección se extiende de izquierda a derecha en la ventana del navegador. El color de fondo de los enlaces se utiliza solo para los textos.
Usamos una imagen de fondo para la segunda sección. La imagen es más pequeña que la sección, y no hay ajustes relacionados con eso, por lo que la imagen se repetirá. La imagen seleccionada puede repetirse, sin ser visible que no es una imagen grande (se llama fondo de pantalla).
El ancho no está establecido, la sección ocupa toda la ventana de izquierda a derecha. La altura se ajustaría al contenido: la palabra Pattern. Así es como se establece un 80% de altura: esto significa el 80% de la altura de la ventana.
Ambas secciones contienen enlaces, pero como la referencia a la etiqueta <a> está precedida por el ID de la sección, podemos formatearlas de manera diferente, sin tener que usar clases.
Guía:
- En el estándar más nuevo para HTML, hay etiquetas separadas para las secciones <div> utilizadas como encabezado o pie de página denominadas <header> y <footer>. Hay una etiqueta <nav> para marcar las secciones de navegación. Estas etiquetas son útiles para la interpretación automatizada (por programas) de páginas web.
- Ten cuidado al utilizar imágenes de fondo. Los textos serán más difíciles de leer, y es más difícil crear / encontrar imágenes de fondo coincidentes para diferentes secciones y colores.
- Si usamos tanto el color como la imagen como fondo, se mostrará la imagen. Si la imagen no se encuentra o no llena toda la sección, aparece el color de fondo.
- Si la imagen de fondo es más pequeña que el área a rellenar, la imagen se repite. Si es más grande, entonces se mostrará solo parcialmente. Para cambiar esto es posible que desee leer sobre las propiedades de repetición de fondo (background-repeat) y tamaño de fondo (background-size)
Ejemplo de posicionamiento fijo:
En las imágenes de arriba, la ubicación de las secciones box1 y box2 es la predeterminada, es decir, estática, pero la sección box3 es fija (fixed). El texto fijo y el cuadro que lo contiene estarán siempre en la esquina superior derecha del navegador: exactamente a 30 píxeles de la derecha y del borde superior de la ventana. Esta posición no depende del tamaño de la ventana.
El ancho de la tercera sección no alcanza el de toda la ventana, su tamaño se ajusta al contenido.
Ejemplo de posicionamiento absoluto y relativo:
En este ejemplo, las secciones superior e inferior (box1 y box3) son estáticas, las usamos como puntos de referencia, para ver cómo se ubican las demás en relación con su posición predeterminada.
La sección con el fondo verde se coloca en posición relativa, se transfiere con 20 píxeles hacia arriba y 100 píxeles desde la izquierda. Podemos ver que el cuadro de arriba no se ve afectado por este cambio.
La posición de las cajas más pequeñas (box4) es absoluta. Originalmente se encuentra en el cuadro verde, pero al establecer el posicionamiento absoluto, definimos su ubicación relacionada con el cuadro 2: tiene 10 píxeles hacia arriba y 100 píxeles a la izquierda.
El ancho de la sección box2 se extiende hacia el borde derecho de la ventana, por lo que el ancho de la sección box4 se ajusta a su contenido.
El lugar original de los elementos establecidos en la posición relativa se deja en blanco: vea el espacio en blanco entre las dos secciones estáticas.
Guía:
- Si la posición se establece en relativa, la sección puede alinearse al centro agregando el valor auto a la propiedad de margen. Es posible que necesite esta configuración si el ancho de las secciones no es del 100%.
- Un elemento con posicionamiento adhesivo (sticky), siempre está visible en la ventana, "resistiendo" el desplazamiento: se coloca relativamente hasta que alcanza un punto marcado a través del desplazamiento, después de lo cual el posicionamiento se fija. Necesitamos definir esta posición: por ejemplo top: 0; significa que se mantendrá en la parte superior de la ventana del navegador.
En el ejemplo anterior, podemos aplicar la propiedad z-index a los tres cuadros, porque su posición es fija y se superponen. Los valores de z-index aquí son 0, 1, 2, pero también pueden ser negativos. Podemos mover elementos bajo otros elementos sin posicionar.
Ejercicios
1. en el archivo index.html crea una nueva sección usando una etiqueta <div>. Su id debe ser Header, su tamaño debe ser igual al tamaño de la imagen llamada back.jpg de la carpeta de imágenes, agregue esta imagen como imagen de fondo a la sección. Alinee la sección del encabezado al centro.
Inserta el texto Coders Work en las etiquetas h1 y, a continuación, diseña lo siguiente: alinéalo en el centro de la sección, agrega un color claro (color property) y un tamaño de fuente más grande que el predeterminado (font-size property).
Copia también esta sección en los otros dos archivos HTML: debe aparecer como primer contenido en la ventana del navegador.
Ver el resultado
Inserta el texto Coders Work en las etiquetas h1 y, a continuación, diseña lo siguiente: alinéalo en el centro de la sección, agrega un color claro (color property) y un tamaño de fuente más grande que el predeterminado (font-size property).
Copia también esta sección en los otros dos archivos HTML: debe aparecer como primer contenido en la ventana del navegador.
2. inserta en la parte inferior de la página index.html, después del contenido, una nueva sección como pie de página. El id (id) para esta etiqueta <div> debe ser Footer. El ancho del pie de página debe ser 1000 píxeles y estar alineado con el centro.
Dentro de este div, inserta el siguiente texto: Tel: 1234567890 <br> Email: office@coderswork.com
En el archivo CSS, diseñe la división de pie de página como sigue: asigna un ancho de 1000 píxeles, alinea la división con el centro, otorga a esa división una imagen de fondo llamada footer.jpg, desde la carpeta de imágenes y un relleno de 20 px a la parte superior e inferior. También aquí, alinea al centro el texto que, asígnale color blanco y házlo en negrita con un tamaño de fuente más grande.
Copia esta sección a los otros dos archivos HTML.
Ver el resultado
Dentro de este div, inserta el siguiente texto: Tel: 1234567890 <br> Email: office@coderswork.com
En el archivo CSS, diseñe la división de pie de página como sigue: asigna un ancho de 1000 píxeles, alinea la división con el centro, otorga a esa división una imagen de fondo llamada footer.jpg, desde la carpeta de imágenes y un relleno de 20 px a la parte superior e inferior. También aquí, alinea al centro el texto que, asígnale color blanco y házlo en negrita con un tamaño de fuente más grande.
Copia esta sección a los otros dos archivos HTML.
3. aplica al contenido original de los tres archivos HTML una nueva sección <div>, con nombre de id Content, que debe albergar todo el contenido del cuerpo, excepto el encabezado y el pie de página. De esta manera, tendremos 3 secciones div principales en el cuerpo: el encabezado, el contenido y el pie de página.
Establece el ancho de la sección en 1000 píxeles y alinéalo con el centro.
Ver el resultado
Establece el ancho de la sección en 1000 píxeles y alinéalo con el centro.
4. coloca los enlaces (Home, Top, Website making, Tips) del inicio del archivo index.html en una sección con el id Menu y colócalo entre el encabezado y las secciones de contenido. Esta sección debe estar siempre visible en la parte superior de la ventana del navegador, incluso si nos desplazamos hacia abajo en la página.
Su ancho debe ser de 1000 píxeles, agrégale un color de fondo (background-color) y, como todas las demás secciones de la página, debería estar centrado. Además, copia este menú en los otros archivos HTML, de esta manera podremos navegar en nuestro sitio web de una página a otra.
Ver el resultado
Su ancho debe ser de 1000 píxeles, agrégale un color de fondo (background-color) y, como todas las demás secciones de la página, debería estar centrado. Además, copia este menú en los otros archivos HTML, de esta manera podremos navegar en nuestro sitio web de una página a otra.
Cuestionario
1. ¿Cuál es el valor predeterminado de la propiedad de posición?
2. ¿Cuál es la definición de fondo correcta?
3. ¿Cuál de los siguientes valores de z-index es el más seguro para ser visible?
4. Queremos colocar un texto en la esquina inferior izquierda de la ventana del navegador, y su posición no debe cambiarse desplazándose. ¿Qué valor debe tener la propiedad de posición?
Información suplementaria
Puedes leer más sobre el tema de la lección y hacer ejercicios visitando los siguientes enlaces:
https://www.w3schools.com/tags/tag_div.asp;
http://learnlayout.com/position.html;
https://www.w3schools.com/Css/css_positioning.asp;
https://css-tricks.com/absolute-positioning-inside-relative-positioning/;
https://www.w3schools.com/cssref/pr_background-image.asp.
https://www.w3schools.com/tags/tag_div.asp;
http://learnlayout.com/position.html;
https://www.w3schools.com/Css/css_positioning.asp;
https://css-tricks.com/absolute-positioning-inside-relative-positioning/;
https://www.w3schools.com/cssref/pr_background-image.asp.
