¿Qué es HTML Para qué sirve y cómo funciona?

¿Qué es HTML, para qué sirve y cómo funciona? Es momento de explorar a fondo qué es HTML y cómo puedes usarlo para crear páginas web de manera sencilla. En esta entrada, conoceremos los fundamentos de HTML y nos adentraremos en sus elementos y etiquetas esenciales.

Definición de HTML

HTML (por sus siglas en ingles, HyperText Markup Language), es un lenguaje de marcado que nos permite hacer la estructura de una página web. Tenemos que aclarar que HTML no es un lenguaje de programación, pues carece de mecanismos para ejecutar cálculos, repeticiones o condiciones, lo que sí es, es un lenguaje de marcado. Es un lenguaje que le indicará al navegador web qué tipo de elemento es el que está en la estructura de una página web.

¡Perfecto! Ahora veremos lo que necesitamos para empezar en html.

¿Cómo funciona HTML?

Para que me entiendas, los navegadores web, como Firefox 🦊, Chrome 🌐, Safari 🧭, Opera 🎭, etc., se encargan de leer e interpretar el código HTML con el que están hechas las páginas web y finalmente mostrar un contenido entendible para el usuario que visita dicha página.

Entonces, cuando accedes a cualquier página web mediante cualquier navegador, el navegador prácticamente pide al servidor donde está alojada dicha página web que le envíe el documento HTML 📄. El servidor envía el documento HTML, el navegador lo recibe, lo lee 📖, lo interpreta y muestra el contenido al usuario final 👤.

Así pues, HTML es prácticamente la base de Internet 🌐 y debes aprenderlo. Es tan sencillo que puedes dominarlo en muy poco tiempo ⏳, dependiendo de cuánto practiques y tu entusiasmo. Con este curso puedes aprenderlo en un par de días 📆; para convertirte en un experto dependerá de ti y de cuánto practiques.

Muchos me dirán: «Pero he escuchado o visto que las páginas web se hacen con lenguajes de programación como PHP 📜, JavaScript 💻 y CSS 🎨.»

¡Espera! 🛑 Es cierto, en esos casos, PHP o JavaScript generan el código HTML dinámicamente, pero al final del día, lo que se entrega al navegador es HTML. Así que es muy importante que lo aprendas. Ah, y si no entiendes qué es PHP, JavaScript o CSS, no te preocupes, lo veremos en su momento; por ahora, no debe preocuparnos.

¿Qué necesitamos para programar con HTML?

1. Para empezar a escribir código HTML necesitamos un editor de código como puede ser: sublime text, notepad, visual studio code,  CoffeCup Free Editor, entre otros e incluso el famoso bloc de notas. Para escribir código HTML nos servirá hasta el editor más básico y sencillo.
2. Por otro lado necesitamos un navegador web que nos servirá para visualizar el resultado de nuestro código HTML en la pantalla.

¡Muy bien!

Cuando creamos un documento HTML debemos guardarlo con la extensión  .html o .htm para que el navegador pueda ejecutarlo como tal.

Entonces te toca a ti ahora mismo hacer lo siguiente:

Lista completa de pasos para empezar a programar en HTML

1. Abrir tu editor de código.
2. Crear un documento y guardarlo con la extensión .html o .htm, por ejemplo: proyecto.html en minúsculas.
3. Ahora que tienes guardado el documento, ábrelo con tu navegador web preferido, pero seguro que el navegador te muestra un documento en blanco, y es que aún no tenemos contenido, nada de código en nuestro archivo o documento HTML.
4. Ahora tenemos abierto nuestro documento HTML con el editor, en este caso bloc de notas, y por otro lado ese mismo documento lo tenemos abierto con nuestro navegador web.
5. Empezamos a escribir código html en el documento que acabamos de crear.

Entonces ¡manos a la obra!, pero antes termina esta lección.

¿Cómo indicamos mediante código  HTML al navegador el tipo de elemento que constituye a la página web?

Muy fácil, lo hace mediante etiquetas, etiquetas de apertura y  etiquetas de cierre. Así pues existen muchísimas etiquetas HTML para indicar qué elemento es, si es un título, un encabezado, un subtítulo, un párrafo, imagen o lo que sea.

Por ejemplo, para indicar un párrafo se utiliza la etiqueta <p> de la siguiente manera:

<p> MI PRIMER PÁRRAFO </p>

Siempre es esa forma: <etiqueta> contenido </etiqueta>

Como podemos ver la etiqueta se abre con los signos menor y mayor y la etiqueta de cierre también pero además  contiene un slash (/), seguido de la etiqueta y finalmente el cierre.

Siempre será en esa forma; hay excepciones y lo veremos. Las etiquetas ya son predefinidas y solo nos queda aprenderlas.

Otro ejemplo: Para indicar que un elemento es un SUBTITULO se utiliza la etiqueta <h2>

<h2> Este es un subtítulo</h2>

Conclusión de la introducción a HTML

En conclusión, al crear una página web con HTML, ¿cómo le indicamos a un navegador que un elemento debe mostrarse como un título, subtítulo o párrafo? ¿Cómo especificamos que un elemento es una imagen y cuál imagen es? ¿Cómo señalamos que un elemento es un formulario? ¿Cómo le decimos al navegador que un párrafo debe estar en negrita, cursiva, o tener un color o tipo de letra específico? ¿Cómo le indicamos que un elemento es un enlace cuyo texto es “haz clic aquí” y cómo especificamos a dónde debe apuntar ese enlace?

Todo esto, y mucho más, se lo indicamos al navegador mediante código HTML, utilizando etiquetas y atributos. ¡Pronto lo veremos!

Además, HTML5, la versión más reciente de HTML, nos permite agregar más elementos como audios, videos, barras de progreso, formas geométricas, animaciones, y mucho más. También aprenderemos sobre esto en su momento.

Así que, ¡ya sabes de qué se trata esto! Ahora nos toca desmenuzar HTML para entenderlo completamente.

Muy sencillo, ¿verdad? En conclusión, HTML utiliza etiquetas para indicar el tipo de cada elemento. En la próxima lección, veremos cómo hacerlo correctamente en un documento HTML.

¡Vamos!