Comenzamos a crear nuestra primera página web utilizando HTML básico, y para ello es fundamental elegir un editor de texto plano adecuado. Aunque podemos usar el bloc de notas que trae Windows, existen opciones más específicas para programadores, como Programers Notebook, que nos ofrece funcionalidades útiles como numeración de líneas, saltos automáticos y, lo más importante, coloreado de sintaxis para distinguir las palabras clave de HTML. Sin embargo, cualquier editor plano servirá, siempre que al guardar el archivo solo contenga texto sin formatos adicionales, ya que editores como Word o LibreOffice añaden información extra que puede confundir al navegador.
En HTML, todo se estructura mediante etiquetas, que son fragmentos de texto encerrados entre los símbolos menor que < y mayor que >. Por ejemplo, <html> es una etiqueta que indica el inicio de un documento HTML. Algunas etiquetas requieren una apertura y un cierre, como <strong> para texto en negrita, que se escribe con una etiqueta de apertura <strong> y una de cierre </strong>. El contenido que coloquemos entre ambas aparecerá en negrita. Otras etiquetas, como la de imágenes <img>, son únicas y no necesitan cierre; en HTML5 se suelen cerrar con una barra antes del símbolo mayor, por ejemplo <img />.
Un elemento esencial que debemos incluir al inicio de nuestro documento es la declaración <!DOCTYPE html>. Esta etiqueta especial, que comienza con una exclamación, indica al navegador que estamos usando HTML5, el estándar actual. Esto es crucial porque determina cómo el navegador interpretará el contenido. Si omitimos esta declaración, el navegador podría entrar en un modo de compatibilidad extraño, procesando la página de forma incorrecta. Por eso, siempre debemos incluirla para asegurar que nuestra página se renderice correctamente en navegadores modernos.
Después de la declaración DOCTYPE, abrimos la etiqueta <html>, que engloba todo el contenido de la página. Dentro de ella, encontramos dos secciones principales: <head> y <body>. La etiqueta <head> es la cabeza del documento, donde colocamos información técnica y metadatos, como el título de la página, que se define con la etiqueta <title>. Este título no se muestra dentro del contenido visible de la página, sino que aparece en la pestaña del navegador o en la barra de título.
Por otro lado, la etiqueta <body> contiene el contenido visible para los usuarios. Aquí es donde escribimos el texto, imágenes y demás elementos que queremos mostrar. Para estructurar el texto, usamos etiquetas como <p>, que indica un párrafo. Por ejemplo, si escribimos:
<p>Buenos días a todos los que estáis leyendo esto</p>
el navegador mostrará ese texto como un párrafo, con un salto de línea y un espacio antes y después, según el estilo predeterminado.
Una vez que hemos escrito nuestro código HTML con la estructura básica —la declaración DOCTYPE, la etiqueta <html>, el <head> con su <title>, y el <body> con uno o varios párrafos— podemos guardar el archivo con extensión .html. Es importante usar esta extensión para que el sistema operativo y el navegador reconozcan el archivo como una página web. Aunque existen extensiones antiguas como .htm, lo recomendable es usar .html.
No necesitamos subir el archivo a un servidor para verlo; basta con abrirlo directamente en cualquier navegador moderno, como Google Chrome, Firefox o Microsoft Edge. Al abrirlo, veremos el título en la pestaña del navegador y el contenido del cuerpo en la ventana principal. Es importante mencionar que si usamos Internet Explorer, debemos asegurarnos de tener la versión 9 o superior, ya que las versiones anteriores no soportan bien HTML5 y podrían mostrar problemas.
En resumen, hemos aprendido a crear un documento HTML básico que incluye las etiquetas fundamentales para estructurar una página web sencilla. Estas son: la declaración <!DOCTYPE html>, la etiqueta <html> que envuelve todo, el <head> donde colocamos el <title>, y el <body> donde escribimos el contenido visible, usando etiquetas como <p> para los párrafos. Con esta base, podemos empezar a construir páginas web y, en futuras sesiones, iremos incorporando más etiquetas y funcionalidades para enriquecer nuestros proyectos.