Ejemplo de construcción de página web y maquetación

Página: ejemplo.html (esta página será guardada en la carpeta raíz del proyecto web)

Se invoca archivo externo

llamado maquetación.css
que se crea en la carpeta css
del proyecto web

Se crea distintos DIV para empezar a

diferentes divisiones o contenedores
dentro de la página web. Cada div tiene un
nombre de ID único.

El resultado de la página web será:

 Guía de colores (RGB, HEXADECIMAL)

https://htmlcolorcodes.com/es/

https://html-color-codes.info/codigos-de-colores-hexadecimales/
 ICONOS:

http://fontello.com/
 Aplicación de maquetación - css

Construcción del archivo maquetación.css (será guardado en la carpeta css del proyecto web)

Esto es para hacer un reset al cargue css. Diferentes navegadores

utilizan diferentes márgenes predeterminados, causando sitios de
forma diferente por los márgenes. El * significa "todos los elementos"
(un selector universal), de modo que se ajuste a todos los elementos a
tener márgenes cero, y cero de relleno.

Se hace al llamado del primer DIV que se creó en el HTML y invoca

con su ID=”contenedor”, para llamar los IDs se usa el #. Luego se
empieza a dar propiedades con sus valores pertinentes como: ancho,
alto, color fondo, el margen, centrado auto, y el relleno.

Repetimos lo mismo con el siguiente DIV, y agregamos el border

radius, el valor en %, px o em:

em: se define como el valor del tamaño de fuente para una fuente
determinada. Si el tamaño de fuente de un elemento es 14 píxeles,
entonces para ese elemento, 1em es igual a 14 píxeles.

px : píxeles, tamaño relativo al dispositivo de visualización. Depende

del navegador.

%: Estos se usan sobre todo para definir anchos flexibles. Por ejemplo,
cuando queremos que las imágenes se adapten al 100% del ancho del
contenedor, cuyo tamaño puede variar dependiendo de la media
query aplicada. O simplemente para crear un layout flexible.

El resultado del contenedor es:

Resultado del margin auto:

Resultado del padding (se observa una separación del border gris de los titulos:

El resultado del header el alto, fondo, border y margen es:

Repetir las propiedades

para el div nav, el div
contenido y el Footer
El resultado del nav es:

El resultado del contenido es:

El resultado del footer es:

Observe que el footer se alcanza a salir del contenedor general, es decir del principal. Para eso hay
que hacer en el div del contenido que estaba en 50% , reducirlo a 43%:

Modificar los porcentajes en

el header, contenido y footer
 Repetir las propiedades
para el div section

El resultado del section es:

El resultado del aside es:

Observe que aparece debajo del section y debe quedar al frente, para esto se utiliza la propiedad
float, en donde el aside debe quedar a la derecha (right).
El resultado del float es:

Agregue al section y al aside las propiedades

float y margin.

Float: posiciona una caja moviéndola todo lo

posible a la izquierda o derecha de su posición
original.
Agregue la siguiente línea en el div
del contenido. Para alinearlo con el
footer y header.

También agregue el margin en los div

section y aside.
 Agregando más elementos en HTML (artículos)

Observe que en el html se tiene para los artículos definidos por CLASS en lugar de ID, la clase
permito llamar a un grupo elemento del mismo tipo invocarlos con un mismo nombre para que
todo reciban la mismas propiedades.

En el css para invocar una clase es punto (.) y el nombre de la clase:

El resultado será:

Finalmente, si desea quitar el fondo de div de contenido y el contenedor, elimine las líneas
background o márquela como un comentario /* */. El resultado será: