Hoy vamos a realizar una pequeña una introducción en la estructura básica de un sitio web. Vamos a crear un primer documento en formato HTML con una herramienta de editor de texto como por ejemplo el Notepad++ que es gratuita y muy completa. Normalmente el primer archivo de una página web se le nombra como “index.html” o “inicio.html” pero puedes ponerle el nombre que prefieras. Esto es así porque muchos servidores ya toman el index como página principal de tu sitio sin necesidad de tocar las configuraciones.

Con la página creada con la extensión que hemos comentado (.html) ya podremos comenzar a editar. Otra opción es abrir una página en blanco en el Notepad++ y buscar el lenguaje indicado en la sección del menú “lenguajes” y ya te ayudará con el código de ese lenguaje y te pondrá la extensión de ese lenguaje cuando guardes el archivo.

Todas las páginas web en HTML5 tienen la siguiente estructura interna, que no es visible:

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Titulo</title>
  </head>
  <body>
    **********(( CONTENIDO ))**********
  </body>
</html>

La parte visible de la web, por llamarlo así, se encontrará en **********(( CONTENIDO ))********** y tendrá una forma parecida a la de la siguiente imágen.

estructura básica

Y también habrá que darle una estructura interna para que los buscadores sepan que zona es la que corresponde.

Comenzamos por el encabezado encapsulado en la etiqueta “header” que es la zona donde va el logo y dónde se puede meter algo de publicidad. Se corresponde con la zona azul de arriba.

A continuación el menú encapsulado con la etiqueta “navbar” (zona estrecha amarilla justo debajo del menú) y debajo del menú todo el contenido de la web que se divide en la parte izquierda de la foto, con cuadros azules donde iría el contenido de la web y la parte derecha, coloreada de color rojo el “sidebar” o barra lateral.

Para terminar, la zona estrecha amarilla de abajo corresponde con el pie o “footer” donde pondremos cosas de interés y los créditos de nuestra web.

Siguiendo con mi sitio web

Una vez realizada la estructura, podemos realizar una copia y crear otro fichero igual, pero con nombre diferente, esta vez le pondremos el nombre “nosotros.html” dónde hablaremos de nosotros.

Toda la estructura coincidirá excepto la parte del contenido (las tres cajas azules) que tendrán el contenido que queramos mostrar en dicha página. La barra lateral también se puede modificar o incluso eliminar si así corresponde. La cabecera, el menú y el footer serán iguales en todo el sitio web por lo que conviene guardar una copia de la que iremos sacando las copias sucesivas sin tener que borrar el contenido de dicha página.

Todas las páginas que creemos se irán enlazando en el menú o como mucho en una zona de la página principal o barra lateral bien visible. En caso contrario, los usuarios no podrán aterrizar en dicha página.

De esta forma comienzas a crear mas y mas archivos de html para hacer completar tu sitio web sin embargo como vaya creciendo y se precises otras cosas será necesario ir agregando máxima funcionalidad como una base de datos, subirlo a un servidor para publicarlo y una serie de archivos de PHP para hacer tareas que no permiten los ficheros .html, .cc y .js cómo mandar o recibir correos o interactuar con la BBDD.