3. La estructura

HTML esta basado en una estructura de etiquetas o tags para construir una pagina web como vimos en el punto anterior, a continuación vamos a conocer los tags imprescindibles para montar la estructura base de una pagina web.

Todo archivo HTML debe ir entre las etiquetas siguientes, las cuales delimitan el principio y el fin del documento:

<html>......</html>

Los tag «head» indican la cabecera de la pagina, donde se definen todos los ajustes que no visibles y que afectan al documento, seguido del tag «body» en dónde incluiremos el contenido que queramos mostrar, ya sea texto, imágenes, enlaces…

Visto esto ya podemos establecer la estructura base de un documento HTML.

<html>
    <head>

    </head>
    <body>

    </body>
</html>

Lo siguiente que debemos hacer es darle un titulo a nuestro documento haciendo uso de la etiqueta «title«, dicha etiqueta debe definirse dentro del tag «head«:

<html>
    <head>
        <title>Mi primera página HTML</title>
    </head>
    <body>
        <p align="center">Hola Mundo!</p>
    </body>
</html>

Usando el editor

Ha llegado el momento de usar nuestro editor, he basado este manual en el uso de Visual Studio Code, ya que personalmente lo considero el mejor.

Cada vez que queremos crear un pagina nueva, deberemos abrir nuestro editor y nos dirigimos al menú «Archivo«, dentro de este selecciona «Nuevo archivo«.

Para definir el formato del archivo, regresamos al menú «Archivo» y esta vez seleccionaremos la opción «Guardar como«, en la ventana emergente le asignaremos el nombre que queramos a nuestro archivo y en el desplegable «Formato» seleccionamos HTML, guardamos y ya podemos comenzar. Tenemos que asegurarnos de que el nombre de nuestro archivo termine en .html de lo contrario nuestro navegador no lo interpretará como HTML sino como texto.

Desde el menú «Archivo» también podemos abrir archivos ya existentes para modificarlos.

Te recomiendo que vayas guardando los archivos de los ejemplos que vayamos realizando en una carpeta para poder tenerlos a mano y ordenados.

Mi primera página web

Con lo que has aprendido hasta el momento ya podemos comenzar y que crees tu primera página web desde cero. Primero debes crear un archivo en el editor al que le daremos de nombre «index.html«. El nombre de archivo «index» se trata de un nombre reservado, que se usa para definir la que sería la pagina principal o portada dentro de cada carpeta.

Ahora escribiremos el siguiente código y guardamos:

<html>
    <head>
        <title>Mi primera página web</title>
    </head>
    <body>
        <p align="center">Hola, estas en la portada.</p>
        <p align="center">Esta es mi primera pagina web</p>
    </body>
</html>

Ahora puedes hacer doble clic sobre el archivo «index.html» para abrirlo desde tu navegador y ver tu primera página web.

Normas básicas para nombres de archivo y carpetas

Cuando creamos un archivo o una carpeta, si su finalidad es la web, deberemos respetar las siguientes normas para evitar posibles errores en un futuro:

Minúsculas: todos los nombres de archivo y carpetas hay escribirlos en minúscula.

Símbolos o tildes: nunca debemos usar acentos o símbolos en los nombres de archivo o carpeta, limítate a usar solamente letras y números en minúscula.

Separaciones: si necesitas separar palabras en los nombres, nunca uses espacios, en vez de estos utiliza guion medio «» o guion bajo «_«, ejemplo: mi_primera-pagina.html

Con estas normas básicas en los archivos, nos garantizamos que los navegadores pueden leer estos sin problemas, además de que nos ayuda a estar seguros de como hemos escrito su nombre.