DEV Community

fullsnacker
fullsnacker

Posted on

¿Qué es HTML, cómo se usa y con que se come?

HTML significa Hyper*Text **MarkupL*anguage (O lenguaje de marcado de hipertexto).

Tal vez has oído hablar de otros lenguajes de marcado como XML (E*xtensible **Markup **Language - Lenguaje de Marcado Extensible) o **YML* (Yet Another Markup Language - Otro lenguaje de marcado más).

Sin importar el navegador que usas (Chrome, Safari o Firefox), tienen un solo propósito y es interpretar sus archivos. Como los archivos HTML,CSS y JavaScript del sitio web que debe mostrarse.

Por ejemplo, aquí tenemos un poco de código HTML que dice que nuestro sitio web debe tener un título llamado “Mi Sitio” y en el cuerpo debe haber un encabezado que diga “Hola Mundo!”.

<html>
   <head>
       <title>Mi Sitio</title>
   </head>
   <body>
       <h1>Hola Mundo!</h1>
   </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Felicidades! Con esto ya has hecho tu primer sitio web!

Si pasamos ese código a nuestro navegador, lo abrirá y lo mostrará así con el título del sitio web generalmente en la barra superior y ese H1 o ese “gran encabezado” que aparece en el cuerpo de nuestro sitio web.

Image description

Para poder practicar fácilmente con HTML, podemos usar un sitio llamado codepen.io. Puedes registrarte en el sitio de forma gratuita con tu cuenta de mail, twitter, facebook o github (Recomendado)

Una vez iniciada la sesión, como puedes ver se te permite ingresar HTML, CSS y JavaScript.

Image description

Los tres tipos de archivos se interpretarán y se mostrarán debajo como su sitio web.

Image description

Ahora vamos a necesitar algún texto con el que trabajar o tener algo a lo que podamos darle estructura.

Si vas a La Isla Del Tesoro, podrás ver el libro “LA ISLA DEL TESORO“.

Como puedes ver, el libro se encuentra como texto sin formato. Tiene todos sus textos, pero absolutamente ninguna estructura.

Copiando la primera parte del libro a nuestro editor en codepen, podemos darle formato utilizando los tags de HTML como se muestra aqui debajo (Haz click en “HTML” para ver el código)

En el próximo artículo, revisaremos la anatomía de los tags de HTML!

Top comments (0)