■ Estructura visual del sitio web con HTML y CSS

■ 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.

Para que cada elemento aparezca con su nombre usé elementos tipo título h1 y h2, en el caso de estos elementos, ya que son jerárquicos, es decir, un h1 tiene más peso que un h2 y así sucesivamente hasta h6, la regla dice que solo debe usarse un elemento h1 por página, ya que este es el encabezado más importante que contiene la palabra clave principal de la página misma que ayuda a Google a entender de qué trata la página, optimizando su posicionamiento, mientras que los h2 en adelante son subtítulos que pueden utilizarse varias veces según aplique.

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>

                <h2>NAV</h1>

            </nav>

            <section>

                <h2>SECTION</h1>

            </section>

            <aside>

                <h2>ASIDE</h1>

            </aside>

        </main>

        <footer>

            <h2>FOOTER</h1>

        </footer>

    </body>

</html>

Pero si nos limitamos solo al HTML el sitio no tendría estilos viéndose así:

■ CSS

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;

            ">

                <h2 style="

                    color: white;

                    padding-top: 150px;">NAV</h2>

            </nav>

            <section style="

                background-color: darkorchid;

                text-align: center;

                height: 380px;

                margin:  5px;

                width: 505px;

            ">

                <h2 style="

                    color: white;

                    padding-top: 150px;">SECTION</h2>

            </section>

            <aside style="

                background-color: darkorchid;

                text-align: center;

                height: 380px;

                margin:  5px;

                width: 250px;

            ">

                <h2 style="

                    color: white;

                    padding-top: 150px;">ASIDE</h2>

            </aside>

        </main>

        <footer style="

            background-color: darkorchid;

            text-align: center;

            height: 100px;

            margin:  5px;

        ">

            <h2 style="

                color: white;

                padding-top: 20px;

            ">FOOTER</h2>

        </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 h2 {

    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 h2,

main section h2,

main aside h2 {

    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>

                <h2>NAV</h2>

            </nav>

            <section>

                <h2>SECTION</h2>

            </section>

            <aside>

                <h2>ASIDE</h2>

            </aside>

        </main>

        <footer>

            <h2>FOOTER</h2>

        </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.

■ Estructura básica HTML, CSS y JS

■ Estructura básica HTML

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Mi sitio web</title>

        <!-- Enlaces a CSS y JS -->

    </head>

    <body>

        <!-- Cuerpo del Sitio Web -->

    </body>

</html>

La mayoría de los elementos de HTML, no todos, se manejan bajo la estructura etiqueta de apertura y etiqueta de cierre:

<etiqueta [propiedades]>

    cuerpo del elemento

</etiqueta>

■ Estructura básica CSS

elemento_HTML {

    // reglas

}

id {

    // reglas

}

class {

    // reglas

}

elemento_HTML elemento_hijo {

    // reglas

}

Para seleccionar dos ó más elementos deben separarse por comas:

elemento_1, elemento_2 {

    // reglas

}

■ Esctructura JS

A diferencia de otros lenguajes, JS no tiene una estructura tan estricta como tal, simplemente se escriben las instrucciones, ejemplo:

console.log("Bienvenido")

■ Integrando CSS y JS

Como se había mencionado antes, los archivos JS y CSS se integran al HTML en el apartado de <head>.

Si por ejemplo se tuvieran los siguientes archivos en la ruta especificada:

Ruta: proyecto / css

estilos.css

Ruta: proyecto / scripts

funciones.js

Estos se integrarían al HTML de la siguiente forma:

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Mi sitio web</title>

        <!-- Enlaces CSS -->

              <link type="text/css" rel="stylesheet" href="proyecto/css/estilos.css">

        <!-- Enlaces JS -->

        <script src="proyecto/scripts/funciones.js"></script>

    </head>

    <body>

        <!-- Cuerpo del Sitio Web -->

        <!-- Enlaces JS* -->

        <script src="proyecto/scripts/funciones.js"></script>

    </body>

</html>

* En el caso de los scripts pueden integrarse fuera del head en el body de la página, ya que en algunos casos éstos deben integrarse al final del body para que los elementos que los usan los reconozcan.

■ HTML CSS & JS

Hoy en día los sitios web para funcionar de la forma en que lo hacen emplean en su construcción un conjunto diverso de herramientas que, dependiendo de la complejidad del sitio, puede ser muy amplio.

Pero de entre ese conjunto de herramientas hay algunas que son las básicas para que un sitio cumpla con los requerimientos actuales para ser funcional y estas herramientas son:

• HTML
• CSS
• JavaScript

Escribir el sitio solo utilizando HTML no es suficiente, ya que aunque si bien se le podría dar estilo desde el mismo HTML no sería una forma muy viable de hacer puesto que muchos estilos se usan repetidamente a lo largo del sitio y hacerlo de esta forma nos obligaría a estar reescribiendolos cada que los necesitáramos, cosa que no pasaría si nos apoyamos de CSS.

■ ¿Qué es CSS?

Mientras que HTML es el "lenguaje" que nos permite estructurar el sitio web, CSS es un lenguaje que se centra en el estilo de esa web, significa "Cascading Style Sheets" o en español "Hojas de Estilo en Cascada". Este lenguaje trabaja directamente con HTML, CSS nos permite dictar las reglas de cómo queremos que luzcan los elementos de HTML en pantalla, ya sea un div, un button, una table, etc.; y es completamente reutilizable.

Por ejemplo si en nuestra página web tenemos varios div, podemos definir el tamaño de ellos, la forma en que se acomodan, el color, cuántos serán visibles, entre muchas otras características mediante CSS, estas características solo se definen una vez y se pueden aplicar a todos o determinados div según nosotros le digamos.

■ ¿Qué es JavaScript?

JS es un lenguaje de programación orientado a sitios web, ahora construir un sitio con HTML y CSS no es suficiente ya que dichas herramientas solo nos permiten configurar la estructura del sitio y la apariencia del mismo, hasta cierto punto estática; JS por otro lado ayuda a que el sitio web se vuelva dinámico e interactivo como por ejemplo controlando el contenido que se muestra, incrustando animaciones, agregando acciones que el usuario puede realizar, conectarse con un servidor, una base de datos, etc., por lo que integrar JS a nuestras páginas web es casi necesario.

■ ¿Cómo se integran estas dos herramientas al sitio web?

Dentro de la estructura HTML del sitio web, hay una sección llamada "head", esta se encuentra en la parte superior, el head aunque no es una sección visible contiene información que es muy importante para la página web como lo son los metadatos (palabras clave, información del autor, idioma del sitio, conjunto de caracteres, entre otros) y todos los enlaces a hojas de estilo CSS y scripts que la página utilice para funcionar correctamente.

Dado que tanto el código de CSS como el de JS se debe manejar en archivos independientes al HTML, estos deben ser enlazados para que HTML sepa que existen y pueda utilizarlos, dentro del head esto se hace de la siguiente forma:

• Archivos CSS

<link type="text/css" rel="stylesheet" href="<ruta y nombre del archivo"/>

• Archivos JS

<script src="ruta y nombre del archivo"></script>