■ Principales elementos de la estructura de un sitio web
• Header
El header es el encabezado de la página, se situa en la parte superior y es lo primero que ve el usuario al entrar al sitio web, generalmente en el header se colocan cosas como el logo de la página, el título, el menú de navegación, las opciones de inicio de sesión, entre otras cosas.
• Main
El main es el cuerpo de sitio web, situado abajo del header, el main alberga el contenido principal de la página, puede estar dividido en varias secciones como una columna de menus nav, una columna más amplia central que es donde se presenta el contenido principal que bien puede ser un section un div, y una columna para mostrar contenidos adicionales llamada aside. Estas secciones no son obligatorias, dependen del tipo de sitio web y de lo que se quiera mostrar en el mismo.
• Footer
Es el pie de página, es la sección localizada en la parte inferior de la página web que contiene información menos importante que las secciones anteriores, en él se pueden poner información relacionada con la página web, sus autores, datos de contacto, entre otros.
Estos elementos vistos en la página web lucen de esta forma:
Figura 1
Esta solo es una 'plantilla' típica de cómo estructurar el sitio, ya que puede hacerse de muchas formas dependiendo de lo que se quiera mostrar y cómo se quiera mostrar, algunas plantillas son más acordes para ciertas cosas y otras plantillas son más adecuadas para otras.
■ Pasando a HTML
Para crear un sitio como el de la imagen anterior es necesario agregar los elementos contenedores en la sección del body del HTML, éstos contenedores son: header, main, nav, section, aside y footer.
Un elemento contenedor como los mencionados y como article o div, son áreas definidas de la página web que nos permiten acomodar otros elementos en ellas, elementos como textos, botones, campos de entrada, imágenes, animaciones, etc., y por ello es que primero debemos estructurar la página web con ellos para después cargarlos de información.
La estructura anterior en HTML (omitiendo el contenido del <head>) quedaría de la siguiente forma:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadatos, hojas de estilo y scripts -->
</head>
<body>
<header>
<h1>HEADER</h1>
</header>
<main>
<nav>
<h1>NAV</h1>
</nav>
<section>
<h1>SECTION</h1>
</section>
<aside>
<h1>ASIDE</h1>
</aside>
</main>
<footer>
<h1>FOOTER</h1>
</footer>
</body>
</html>
Pero si nos limitamos solo al HTML el sitio no tendría estilos viendose así:
Ahí es donde entra el uso de CSS, ya que aunque es posible darle estilo al sitio en el mismo HTML mediante los llamados "estilos en línea", que no es más que un "CSS" incrustado en los elementos diciéndoles cómo queremos que se vean, esta no es la mejor forma de hacerlo ya que nos obliga a reescribir las reglas para cada elemento y esto hace que el HTML se vaya volviendo ilegible o difícil de entender, por ejemplo para lograr que sitio se vea como la figura 1 sin usar archivos CSS, el HTML severía así:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header style="
background-color: darkorchid;
text-align: center;
height: 100px;
margin: 5px;
">
<h1 style="
color: white;
padding-top: 20px;
">HEADER</h1>
</header>
<main style="display: flex;">
<nav style="
background-color: darkorchid;
text-align: center;
height: 380px;
margin: 5px;
width: 200px;
">
<h1 style="
color: white;
padding-top: 150px;">NAV</h1>
</nav>
<section style="
background-color: darkorchid;
text-align: center;
height: 380px;
margin: 5px;
width: 505px;
">
<h1 style="
color: white;
padding-top: 150px;">SECTION</h1>
</section>
<aside style="
background-color: darkorchid;
text-align: center;
height: 380px;
margin: 5px;
width: 250px;
">
<h1 style="
color: white;
padding-top: 150px;">ASIDE</h1>
</aside>
</main>
<footer style="
background-color: darkorchid;
text-align: center;
height: 100px;
margin: 5px;
">
<h1 style="
color: white;
padding-top: 20px;
">FOOTER</h1>
</footer>
</body>
</html>
HTML con estilos en línea
Mientras que si usamos un archivo para el CSS, el código HTML no se vería afectado, solo se enlazaría en el <head> la hoja de estilos (archivo .css):
<link type="text/css" rel="stylesheet" href="css/estilos.css">
Y los estilos quedarían en ella de la siguiente forma:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header,
footer {
background-color: darkorchid;
text-align: center;
height: 100px;
margin: 5px;
}
header h1,
footer h1 {
color: white;
padding-top: 20px;
}
main {
display: flex;
}
main nav,
main section,
main aside {
background-color: darkorchid;
text-align: center;
height: 380px;
margin: 5px;
}
main nav {
width: 200px;
}
main section {
width: 505px;
}
main aside {
width: 250px;
}
main nav h1,
main section h1,
main aside h1 {
color: white;
padding-top: 150px;
}
Dejando el HTML como lo teníamos originalmente y solo con en link a la hoja de estilos:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Se enlaza la hoja de estilos -->
<link type="text/css" rel="stylesheet" href="css/estilos.css">
</head>
<body>
<header>
<h1>HEADER</h1>
</header>
<main>
<nav>
<h1>NAV</h1>
</nav>
<section>
<h1>SECTION</h1>
</section>
<aside>
<h1>ASIDE</h1>
</aside>
</main>
<footer>
<h1>FOOTER</h1>
</footer>
</body>
</html>
HTML sin estilos en línea
Haciendo que el código sea más claro y legible, ya que lo tendríamos seccionado y para realizar modificaciones simplemente iríamos al archivo donde esté el elemento a modificar, ya sea el HTML o el CSS por separado.
