HTML Historia y breves Conceptos, primeras líneas de código.

¿Alguna vez se preguntaron como se crean las páginas web? ¿O como funcionan? Yo también me hice esa pregunta en algún momento y fue cuando empece a investigar y conocer un poco más acerca del desarrollo web, es por eso que hoy empezaré con una mini serie en la cual les traeré un contenido de temas respecto al Desarrollo Web.

Primero debemos tener claro que para la creación de una página web en la parte visual se utilizan tres tecnologías principales las cuales son HTML, CSS y JavaScript, empezaremos primero por la estructura que es HTML, vamos a conocer un poco la historia de HTML y luego conoceremos las etiquetas más usadas para posteriormente ponerlas en práctica.

Breve Resumen de la historia

En 1989 el científico británico Tim Berners Lee busco una manera para poder comunicarse con otros científicos a través de la web, a sus inicios de su creación, tuvo que presentar su proyecto en una propuesta con el nombre de WorldWideWeb, el cual fue aprobado y publicado de modo oficial en 1991. Pasaron algunos años donde intentaron nombrar a HTML como un estándar oficial, no fue entonces hasta 1993 donde se nombró a HTML como un estándar oficial y se crearon grupos de trabajo para empezar con nuevas versiones, el cual fue nombrado como la World Wide Web Consortium que a día de hoy se encargan de implementar los estándares y el soporte de HTML, el fundador de la organización fue Tim Berners Lee, en el año 1995 se sacó la versión 2.0 y desde ahí empezaron a trabajar en diferentes versiones a lo largo de los años.
En el 2014 se sacó la versión final de HTML que es la versión 5.2 que viene con muchas etiquetas que ayudan a la hora de estructurar la página web, desde que HTML está publicada en cada versión agregaron más etiquetas y mejores formas de uso, ahora HTML se puede aprender de una manera más fácil e intuitiva.

Hora de escribir código

Podría decirles que primero debemos configurar el entorno para empezar a escribir código, que lo fundamental sería un IDE (Entorno de Desarrollo integrado) o un editor de texto, pero empezaremos con un algo muy simple que un editor de texto que no tendremos que descargar algún programa y se irán adaptando de una manera más fácil es por eso que este caso usaremos CodePen es muy usado y muy fácil de usar.

• Primero vamos al siguiente link el cual nos llevara a la siguiente página que es el editor CodePen no hace falta iniciar sesión | Codepen
• Luego nos ubicamos en la zona izquierda y nos iremos a la opción de Start Coding

• Tendremos la siguiente interfaz, a mí me gusta mucho como se ve de esta manera, pero si gustan pueden cambiar la interfaz.

HTML tiene una estructura básica, pero este editor ya la trae de manera que solamente debemos escribir etiquetas y seguro te preguntaras que son etiquetas o en inglés (tags) es una manera de decirle al HTML que queremos que dicha etiqueta se describa de una manera que el navegador pueda entenderla y es lo que veremos a continuación, le decimos al HTML quiero que esta etiqueta sea un título y el navegador la va a leer como un título esto hace que el HTML sea más ordenado y más legible a la hora de crear nuestro código y cumplimos con los estándares, es por eso que hay muchas etiquetas, pero no te abrumes solamente debes aprender las básicas que son las que utilizaras día a día la sintaxis de una etiqueta es la siguiente <etiqueta>contenido dentro</etiqueta> nota que yo cierro y abro las etiquetas es porque en HTML existen dos tipos de etiquetas las etiquetas que se abren y se cierran y las etiquetas que solamente se abren y no tienen cierres, les dejaré un documento para que puedan profundizar más el tema, lo que si debemos tener cuidado, ya que debemos saber que hay algunas etiquetas que deben cerrar para que el contenido quede adentro y no se salga, puesto que esto nos generaría un problema de igual forma la mayoría de los editores de texto nos ayudan con esto automáticamente nos cierran las etiquetas que deben cerrarse y con las que no se cierran las deja por defecto.

Nuestras primeras etiquetas

Conoceremos algunas etiquetas básicas quiero aclarar que existen muchas más etiquetas que en otros post iremos viendo.

Etiqueta h1-h6

Es un título o en inglés heading, de ahí proviene el h, con ella podemos indicar los títulos que tendrán la página web, siendo h1 el de mayor relevancia y de mayor tamaño, al h6 que es del menor relevancia y de menor tamaño aunque les adelanto que el tamaño luego se puede cambiar. También es bueno saber que solo debemos usar un h1 por cada página, ya que usar más de un h1 sería una mala práctica, los títulos tienen un papel importante, puesto que normalmente el usuario siempre mira el título a lo que está haciendo referencia luego del h1, los más usados son el h2 y el h3, el resto de títulos casi no los usaremos
<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>

Etiqueta p

Un párrafo hace referencia a algún texto que queremos describir siempre que vayamos a escribir un texto que creemos que es un párrafo debemos hacerlo dentro de la etiqueta p así el navegador sabe que es un párrafo y ayuda más a un buen estándar.
<p> Estoy describiendo este texto como un párrafo </p>

Etiqueta a

Una de las etiquetas más poderosas nos lleva a una dirección de alguna página web o de una ubicación de internet dependiendo que dirección hayamos usado, su sintaxis es la siguiente;

<a href="https://hive.blog/trending/my"> Haz click acá </a>

En este caso la etiqueta contiene href=" " o lo conocemos como un atributo, eso va en muchas etiquetas y existen diferentes atributos, pero este en específico no están diciendo que dentro de él va a contener la dirección de la URL y cuando el usuario de click en la etiqueta lo llevara a la dirección correspondiente, y dentro de la etiqueta escribimos lo que queremos que le aparezca al usuario ejemplo; haz click acá. Existe un atributo para que cuando demos click en el enlace nos abra la dirección en otra pestaña y así no nos saca de la página, pero luego cuando hablemos de atributos lo estaremos viendo

Etiqueta ul - ol / li

Las siguientes etiqueta nos permiten hacer una lista, la etiqueta ul o lista desordenada, es decir que no tiene un orden en específico, a diferencia de la etiqueta ol, que si es una lista ordenada y muy importante siempre debemos escribir el li que serian de alguna manera lo que estará dentro de la lista, la sintaxis debe ser la siguiente:

Si queremos hacer una lista desordenada

<ul>
  <li>Lista desorneda</li>
  <li>Lista desorneda</li>
  <li>Lista desorneda</li>
</ul>

Si queremos hacer una lista ordenada.

<ol>
  <li>Lista ordenada</li>
  <li>Lista ordenada</li>
  <li>Lista ordenada</li>
</ol>

De esta forma esteremos creando una lista

Muy bien, esto no es todo, es el principio de muchas etiquetas, pero sé que puede ser un poco agotador el ver tantas etiquetas, así que hasta los momentos dejaremos las etiquetas por el día de hoy y mejor vamos a poner en práctica lo que vimos.

Muy bien, ya escribimos nuestras primeras, líneas de código, si se ve algo feo, pero recuerda que HMTL es un lenguaje estructura, luego con el lenguaje de diseño todo se verá más bonito, Muchas gracias si llegaste hasta el final y cuéntame que te pareció y alguna sugerencia y si tienes alguna duda no olvides dejar en los comentarios les estaré dejando dos enlaces a unas documentaciones donde pueden encontrar todo lo relacionado acerca de este tema.

• La Mozilla Developer podremos buscar todo lo relacionado con el Desarrollo Web e incluso tienen guías para ir aprendiendo, sin duda es de las mejores opciones | Mozilla Developer

• En HTML Reference podrás buscar todas las etiquetas de HMTL y te dan un pequeño concepto de para qué sirven cada una. | HTML Reference

Imagen de portada creada en Canva
| Link img
| Link Logo HTML