Hola de nuevo, hoy hablaré del lenguaje HTML. Sus siglas quieren decir HyperText Markup Language (Lenguaje de marcado de hipertexto), y viene a ser un lenguaje de marcado o maquetación para estructurar contenido en una página web. Por decirlo de una forma simple, es el lenguaje que entienden los navegadores. Es la forma que tenemos de decirle qué es cada trozo de texto o elemento que añadimos a la página web. En este artículo veremos la sintaxis básica y hasta crearemos nuestra primera web totalmente funcional. No nos liaremos con historia o detalle técnicos, para eso puedes visitar su página de la Wikipedia.

Bien, lo primero que debemos saber es que para escribir HTML necesitamos como mínimo, igual que para cualquier otro lenguaje, un editor de texto plano (Bloc de notas, TextEdit, Kwrite, etc.) para editar texto sin formato. No podemos usar software ofimático como Microsoft Word, etc.  También podemos -y debemos- usar editores de código, específicos para escribir lenguajes de programación. Éstos nos añaden muchas funcionalidades imprescindibles como el resaltado de sintaxtis, o lo que es lo mismo, que nos ponga el código con colores y sea mucho más fácil distinguir qué es cada elemento. Hay muchos para elegir: Sublime Text, Notepad++, Atom, Visual Studio Code, etc. Yo utilizo Atom, es Open Source, multiplataforma, está creado por la gente de GitHub, y va genial.

Para crear un documento HTML simplemente creamos en nuestro explorador de archivos un archivo '.txt' y lo renombramos a '.html'. Otra forma es abrir un editor de código y Guardar como archivo '.html'.

Por defecto, el sistema operativo nos abre los archivos HTML con el navegador web, pero si queremos editarlos debemos abrir ese archivo con el editor de código.

Esto es un ejemploe de una etiqueta HTML totalmente funcional. Como puedes ver, este lenguaje está formado por etiquetas que debemos abrir y cerrar. Estas etiquetas no se muestran el navegador, pero sirven para indicarle al navegador qué es cada elemento y, en consecuencia, cómo debe mostrarlo. En medio de la etiqueta introducimos o bien otras etiquetas, o el contenido que sí queremos que se muestre en la pantalla.

<etiqueta>contenido</etiqueta>

Como dije, podemos colocar etiquetas dentro de otras etiquetas, y crear así una web semántica y bien estructurada. Como ves en el ejemplo anterior, cuando colocamos una etiqueta dentro de otra (etiqueta padre y etiqueta hijo), es una buena práctica tabularla o identarla para que sea muy simple visualmente saber cómo está estructurado el documento.

Cuando creamos un nuevo documento HTML la primera etiqueta que debemos escribir, y que será padre de todas, es <html>. Inmediatamente dentro de esta, introducimos las etiquetas <head> y <body>. Todo lo que colocamos dentro del head no se muestra en el navegador. Es donde, por decirlo de alguna manera, indicaremos los ajustes de nuetro documento HTML.

See the Pen HTML Básico by Iván Barcia (@barcia) on CodePen.

Dentro del body sí va todo lo que queremos mostrar en la pantalla. Hay muchísimas etiquetas HTML -las acabarás sabiendo de memoria- que poco a poco iremos viendo en este blog. En el ejemplo superior, usamos sólo 3 de las etiquetas más básicas: La <h1> para mostrar un título, la <p> para mostrar un párrafo, y la <a> para mostrar un enlace a otra página. Te habrás fijado que la etiqueta <a> tiene más texto dentro de la propia etiqueta. Eso se llama atributo, y dependiendo de cada etiqueta podemos usar unos u otros. Por ejemplo, el tributo href en la etiqueta a es imprescindible, pues indica la URL a la que nos dirigirá el enlace.

Bueno, ya hemos visto por encima los aspectos más básicos del lenguaje HTML, en posteriores entradas veremos más en profundidad todos los aspectos del lenguaje de maquetación de la web.

Si tienes alguna duda escríbela en los comentarios.

¡Saludos!