Curso básico de HTML: ¿Qué es HTML?

Página 1: ¿Qué es HTML?

¿Qué es HTML?

Las siglas HTML significan Lenguaje de Marcas de Hipertexto (HyperText Markup Language, en inglés). Aquí te contamos un poco más:

Imagina que estás construyendo una casa. Con el terreno listo, lo primero que haces es armar la estructura, es decir, las columnas, techos y paredes.

Aunque todavía no puedes vivir en ella, tienes una idea más aproximada de cómo se verá y cómo estarán distribuidos los espacios.

Precisamente, el HTML funciona como la estructura principal de una página web. Es la base que necesitas para construir y añadir más información a tu sitio.

El HTML es un lenguaje informático conocido como lenguaje de marcas. La mayoría de las páginas web que ves en internet están construidas con sus etiquetas y códigos, entre muchas cosas más.

¿Qué son los elementos HTML?

Así como la estructura de una casa está compuesta por piezas individuales como los ladrillos y el cemento, un documento HTML también se compone de elementos más pequeños. Mira algunos ejemplos:

<p>Esto es un elemento</p>

A su vez, cada elemento HTML se compone de etiquetas que, en el ejemplo anterior, son los símbolosy , ubicados a ambos lados. Actúan como un contenedor en el que la etiqueta  marca el inicio de un elemento, mientras que la etiqueta  señala el cierre, y el contenido es el texto que hay entre ambas.

Por ejemplo, en la imagen de abajo aparecen las etiquetas  y , las cuales indican que se trata de un párrafo. Sin embargo, al cargar ese código en un navegador, las etiquetas no se verán en la pantalla, solo será visible el texto "Esto es un elemento".

¿Por qué pasa esto? Para tu navegador las etiquetas son sólo instrucciones que debe seguir. Por eso, toma el texto que hay en la mitad y lo muestra según la indicación.

En esta caso, la etiqueta indica que es un párrafo, así que añade un pequeño espacio por encima y por debajo del texto, y permite que ocupe líneas enteras, como los párrafos de un libro impreso.

Los elementos HTML tienen un aspecto muy sencillo, necesitan de otro tipo de lenguaje llamado CSS para darles un diseño más atractivo.

¡Llegó el momento de practicar!

Observa este grupo de elementos de párrafo:

<p>Esto es un párrafo</p>
<p>Acá tienes otro párrafo</p>
<p>¡Y uno más! Aquí tienes varios párrafos unidos</p>

Ahora, añade este código HTML en la caja de texto que aparece abajo y selecciona el botón "Ver resultado". Asegúrate de escribir las etiquetas exactamente, pero siéntete libre de cambiar el texto que hay en su interior.

Verás que el HTML se traduce en tres líneas de texto con un poco de espacio entre cada una de ellas. Además, las etiquetas y  no se ven en la pantalla, pero están ahí, detrás de escena, diciéndole a tu navegador lo que debe mostrar.

Elementos anidados

Al inicio de esta página, te explicamos que un elemento HTML funciona como un contenedor en el que puedes guardar textos. Pero, si quieres añadir otro elemento HTML dentro de él lo puedes hacer, estos se conocen como elementos anidados.

Imagina que quieres poner en cursiva una de las palabras de un párrafo. Para lograrlo debes usar el elemento HTML  a cada lado de la palabra que elegiste. ¡Y claro! También tendrás que ponerlo dentro del elemento párrafo, así:

<p>Este es un párrafo con una <i>palabra</i> en cursiva.</p>

Aquí, el párrafo contiene tanto el texto, como un elemento en cursiva. Al cargar el código en el navegador se verá así:

¡Hazlo tú mismo!

Añade el código HTML que te mostramos anteriormente en la caja de texto que aparece abajo y haz clic en el botón "Ver resultado". Como siempre, siéntete libre de cambiar el texto de la mitad, pero ten cuidado al escribir las etiquetas, estas deben ser exactamente las mismas.

Verás una línea de texto donde sólo "palabra" está en cursiva. Prueba un poco ubicando las etiquetas y alrededor de una palabra diferente, o elige un grupo de palabras. Lo que pongas dentro de esas etiquetas deberá aparecer en cursiva.

¿Cómo se usa el HTML en una página web?

Una página web es una colección de elementos HTML escritos en un documento. Así se ve el HTML de una página web muy sencilla:

<h1>¡Bienvenido a mi blog!</h1>
<p><i>2 de septiembre de 2021</i></p>
<p>Siempre he escuchado que las mejores ideas surgen en los momentos que menos imaginas. Yo llevo semanas, meses, esperando que las ideas me encuentren, pero no se me ocurre nada. ¿Qué debo hacer?</p>

La mayoría de las sitios en línea que visitas diariamente tienen más elementos. Incluso, algunos son requeridos por los navegadores para poder mostrar las páginas tal como quieres que se vean.

Pero no te preocupes por eso en este momento. Lo más importante es tener en cuenta que un documento HTML es un archivo, como cualquier otro, que puedes encontrar en tu ordenador. Por ejemplo, puedes guardar el código anterior en tu disco duro y nombrarlo "website.html":

En la siguiente página te explicamos cómo guardar un archivo HTML en tu computador.

Después, puedes hacer doble clic para abrirlo con un navegador web, de la misma manera que se abre un documento de Word en Microsoft Word. Cuando el navegador abre el archivo, utiliza el HTML que has escrito como instrucciones para saber lo que debe mostrar en la pantalla.

Así mismo funcionan las páginas web. Cuando escribes una dirección web en tu barra de búsqueda o haces clic en un enlace, envías una petición a un ordenador en otro lugar, el cual se encarga de enviarte una respuesta en forma de documento HTML.

Rápidamente, tu navegador lee ese archivo y te muestra lo que tanto estás buscando. Haz clic aquí para abrir el ejemplo como una página web real. Debería verse así, en una pestaña o ventana nueva:

Ahora, ¡sigue estos pasos!

Paso 1:

Haz clic derecho en cualquier parte de la página que acabas de abrir.

Paso 2:

Busca la opción Ver código de la fuente de la página y selecciónala.

Si no encuentras la opción, es posible que el navegador que estés utilizando la tenga ubicada en otro lado. Te recomendamos usar Google Chrome para aprovechar al máximo estos ejercicios.

Paso 3:

Deberá abrirse otra pestaña o ventana que te mostrará el HTML de la página. Algo así:

Cómo explorar el código HTML de una página

Al hacer este ejercicio con la mayoría de las páginas web que visitas, encontrarás un HTML más complejo y lleno de etiquetas. No importa lo elaboradas que sean, la base sigue siendo el lenguaje HTML.

¿Qué esperas para crear tu primer código HTML? En la siguiente página te contamos cómo puedes hacerlo.