HTML: 🤩🥱¿Qué es y como se relaciona con el CSS y JavaScript?

Sin duda, la digitalización de las empresas está cambiando el mercado como lo conocemos. Pues, este proceso imparable está transformando todos los sectores a un ritmo cada vez más acelerado. Esto puede darse gracias a las nuevas estrellas del mercado, los programadores. Siendo los especialistas en HTML, Python, y JavaScript, entre otros, como los más cotizados y buscados en el mercado.

Abarcar todo sobre la programación llevaría demasiado tiempo, así que hoy solo nos centraremos en el lenguaje HTML. Así que haremos una pequeña analogía para ver que hace este lenguaje.

Siempre qué debemos encarar un nuevo proyecto, siempre tenemos qué arrancar por el principio. — Por ejemplo, cuando queremos construir una casa. Para hacerla correctamente, primero debemos colocar la estructura, luego le podemos pintar las paredes, y finalmente los mubles y funcionalidades.

Este ejemplo se asemeja mucho al lenguaje de programación, siendo el HTML la estructura, el CSS la pintura, y el JavaScript las funcionalidades.

Por esta razón el HTML es el lenguaje de programación es fundamental del mundo web. Pues, este lenguaje es la base de todas las páginas de internet, y conocerlo es crucial para poder entender el funcionamiento de las mismas. En definitiva, el HTML, es una valiosa herramienta.

Conocer el correcto funcionamiento de nuestras herramientas pueden brindarnos una ventaja competitiva frente a quienes no lo hacen. Y a su vez, podrían ayudarnos a generar oportunidades para emprender.

¡Sin más qué añadir, vamos a por el post!

¿Qué es el HTML?

El HTML es un lenguaje de programación ampliamente utilizado en el mundo web. Sus siglas en inglés significan Hypertext Markup Language, el cual, podría significar Lenguaje de marcaje de hipertexto.

Volviendo a la creación de páginas web, para ello, el lenguaje HTML utiliza dos tipos de contenidos, los tags «marcadores» y los atributos. Estos elementos son, en definitiva, lo qué nos va a mostrar cómo se va a ver un contenido web en el navegador.

Acá es donde entra el hipertexto, el cual refiere a un texto con bloques interconectados, que contienen párrafos, imágenes, y demás multimedia. Pero, también estos hipertextos pueden tener rutas a otros hipertextos, los cuales, son conocidos cómo hipervínculos, hyperlinks, o simplemente links.

¿Cómo nace el HTML?

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN propuso un nuevo sistema de “hipertexto” para compartir documentos. Cómo dato de color, Tim Berners-Lee también es uno de los creadores de la World Wide Web.

En cuanto a los estándares oficiales HTML son el HTML 2.0, el HTML 3.2, el HTML 4.0, el HTML 4.01 y el HTML 5.

El HTLM 5 es la última especificación oficial y se espera que continúe evolucionando a lo largo de los próximos años. El XHTML, una forma más avanzada del HTML que se suponía iba a sustituir a este. Pero, ~~pasaron cosas,~~ y a día de hoy podemos considerar que ha quedado integrado dentro del HTML 5

Como podemos ver, el HTML pasó por diversas versiones hasta ser lo qué es hoy. Gracias a este proceso, se convirtió en la base para blogs, e-commerce, redes sociales y todo tipo de páginas accesibles desde un navegador web.

¿Cuáles son los elementos HTML que podemos usar?

Bueno, no vamos a ver todos en un post, porque nos llevaría demasiado tiempo, pero si veremos los principales elementos que competen a un blog.

Para ello, tenemos qué recordar qué los tags requieren ser identificados con signos: <tag>. Este es un ejemplo de marcador de apertura. Entonces, sí hay uno de apertura, cómo norma general, debe haber un marcador de cierre. El cual utiliza una barra, cómo se puede ver en este ejemplo: </tag>.

Ahora toca ver unos ejemplos qué podemos utilizar en blogs.

1. Párrafos

El tag <p> debe abrirse y cerrarse para definir un párrafo. El párrafo es aquel texto se encuentra conformado por un conjunto de oraciones.

<p>Ejemplo de Párrafo con sus respectivas etiquetas de apertura y cierre.</p>

2. Encabezado o Heading

Los heading tag, encabezados, o simplemente etiquetas h, son tags qué ayudan con la jerarquía de las secciones del texto.

Estas etiquetas H, tienen distintas jerarquías qué van desde la H1, hasta la H6. Siendo la H1 el título principal del contenido, y normalmente hay uno solo por URL; el H2 es el subtítulo principal; el H3 es el subtítulo secundario; las H4, H5, y H6, son etiquetas menores qué tienen poca relevancia a nivel SEO, pero sirven para organizar los textos.

Veamos un ejemplo de párrafos y encabezados:

<h1>Título principal</h1>

  <p>Primer párrafo que sirve cómo introducción.</p>

<h2>Primer subtitulo H2</h2>

  <p>Primer párrafo del subtítulo H2</p>

  <p>Otro párrafo del primer H2.</p>

<h2>Segundo título H2</h2>

  <p>Primer párrafo del segundo subtítulo.</p>

  <p>Segundo párrafo del segundo subtítulo.</p>

<h2>Tercer título H2</h2>

  <p>Párrafo del tercer título.</p>

 <h3>Subtítulo menor del tercer título H2</h3>

   <p>Parágrafo del subtítulo H3</p>

 <h3>Otro subtítulo menor del tercer título H2</h3>

   <p>Último párrafo del subtítulo</p>

3. Imágenes

El marcador de las imágenes es uno de esos tags que no requiere una etiqueta de cierre. Además, tiene la particularidad de poder utilizar un atributo obligatorio, conocido cómo <src>, y otro accesorio <alt>. Entonces, la Syntax de las imágenes son algo así:

<img src="url" alt="alternatetext">

Ahora veremos un ejemplo solo con el atributo <src>, y otro con el atributo <src> y el <alt>.

<img "src=https://tupacbruch.com/wp-content/tupacbruch.jpg">

El cual puede «y debería» tener una atributo alt, qué sirve para ponerle un nombre alternativo a dicha imagen.

<img src="https://tupacbruch.com/wp-content/tupacbruch.jpg" alt="tupac bruch home">

4. Ancla o enlace

El tag de anclaje define un enlace a otra página. El atributo «href» determina el destino de este link.

<a href="https://tupacbruch.com/google-seo-marketing/">50 Elementos a comprobar en un checklist SEO</a>

5. Lista ordenada

Se muestra una lista ordenada con elementos numerados. Cada elemento debe estar etiquetado con el tag <li> (elemento de la lista), la cual debe ser aclarada sí está ordenada <ol> o desordenada <ul>.

<ol>
  <li>SEO on page</li>
  <li>SEO off page</li>
  <li>Contenido</li>
</ol>

6. Lista desordenada

El tag de lista desordenada muestra los elementos como puntitos sin orden, también conocidos cómo bulletpoints.

<ul>
  <li>SEO Black Hat</li>
  <li>SEO Grey Hat</li>
  <li>SEO White Hat</li>
</ul>

7. Tabla

El tag de la tabla muestra información en forma de filas y columnas. Dentro del tag <table>, usamos los tags <tr> para representar las filas, <th> para representar los encabezados y <td> para representar cada celda.

<table>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  
    <tr>
      <td>Lionel</td>
      <td>Messi</td>
    </tr>
  
    <tr>
      <td>Luis</td>
      <td>Suárez</td>
    </tr>
  
    <tr>
      <td>Ney</td>
      <td>Mar (?)</td>
    </tr>
  </table>

8. Comentarios en HTML <! – ->

Usamos este tag para escribir algún comentario que ayude a comprender el código.

Entonces, lo escrito entre los marcadores <! – -> no se mostrará al usuario, y sirve solo para dejar una anotación por sí necesitás recordar algo en el futuro. Esto es muy útil en especial cuando más de un desarrollador trabaja con el mismo código.

<p>O HTML es fundamental para quién desee crear un sitio en la web.</p> <!– Este es un párrafo en HTML –>.

9. Línea de quiebre

El elemento HTML line break o línea de quiebre se crea con el código <br>. Este tag produce un salto de línea en el texto, el cual es útil para escribir y generar un salto dentro del mismo párrafo. Se usa mucho en poemas, direcciones, o donde se requiera de divisiones para esquematizar el contenido.

En este caso, utilicé una canción de Elvis ~~que estoy tratando de tocar con la guitarra~~ como ejemplo:

Love me tender, love me sweet <br>
Never let me go <br>
You have made my life complete <br>
And I love you so

¿Cómo es la estructura básica de un documento HTML?

Recién vimos algunos elementos sueltos para crear un código HTML, pero ahora, toca ponerlos en un contexto. Al igual que cualquier estándar web, debe seguir algunas reglas para generar estos códigos.

Comenzamos con la declaración <!DOCTYPE html> para informar al navegador web que el documento en cuestión es un HTML.

Luego abrimos un tag <html>, que tendremos que cerrar al final, así </html>.

Entonces, en su interior agregamos <head>, que debe contener los metadatos de la página (datos sobre datos), como el título que aparecerá en la pestaña del navegador <title>, llamadas a archivos externos y otras que son cruciales para un trabajo de SEO, como las meta tags.

Es importante incluir la tag <meta charset = ”utf-8 ″> para que el navegador muestre correctamente ciertos caracteres que usamos en español, como los acentos o la virgulilla.

Finalmente, abrimos el tag <body>, donde agregamos la parte del documento HTML que contiene los elementos visibles para el usuario.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=»utf-8″>
      <title>El meta-título va acá</title>
  </head>

  <body>
    <h1>El título principal acá</h1>
        <p>Este es un ejemplo de párrafo</p>
      <h2>Título secundario</h1>
        <p>Párrafo del título secundario</p>
  </body>
</html>

¿Cómo crear tu primer código HTML?

Para crear código HTML, solo necesitas de un editor de texto simple, cómo el bloc de notas de Windows; y un navegador web para ejecutar el código, cómo Firefox o Safari, para ejecutar el código creado.

Aunque se puede crear código con un simple bloc de notas, lo recomendable es utilizar un programa especializado, como Visual Studio Code.

En este programa podrás crear un archivo .html. En dicho archivo generaremos nuestro código, y para ejecutarlo, debemos abrirlo desde el navegador.

<! DOCTYPE HTML>
<html>
  <head>
    <meta charset=»utf-8″>
      <title>El meta-título va acá</title>
  </head>

  <body>
    <h1>El título principal acá</h1>
        <p>Este es un ejemplo de párrafo</p>
      <h2>Título secundario</h1>
        <p>Párrafo del título secundario</p>
  </body>
</html>

Del HTML al CSS y al JavaScript

Bien, ya tuvimos una visión general del HTML, el cual es la estructura de toda una web. Pero, el HTML por sí solo no tiene estilo, es muy genérico el resultado, para auxiliarnos con esto, tenemos al CSS.

El CSS es la herramienta que permite configurar fuentes, colores, alineaciones, entre otros, para los distintos códigos HTML.

¿Qué es el CSS?

CSS es un acrónimo en inglés que significa Cascading Style Sheets, en español sería algo así cómo hojas de estilo en cascada.

Aunque, sí bien es posible usar estilos dentro de un código HTML, se recomienda el uso de uno o más archivos CSS individuales. Esto hace que el código sea más organizado, pues aísla la estructura del estilo.

El CSS se basa en selectores y declaraciones con propiedades y valores. Es decir, elegimos los elementos HTML a los que queremos aplicar los estilos y declaramos cuáles serán las propiedades de estos componentes.

Ahora veremos un CSS personalizado para un determinado párrafo. En este, simplemente definiremos tres atributos, el color, la fuente, y el tamaño de la fuente utilizada, en píxeles.

p {

color: white;

font-family: Calibri;

font-size: 15px;

}

¿Qué es el JavaScript?

Hay otra etapa de desarrollo web, que se dedica a crear comportamientos dinámicos, hablo de justamente, el JavaScript. El JS, no debe confundirse con Java a secas, pues son cosas distintas.

El JavaScript es propiamente un lenguaje de programación, y es quién permite una mayor interactividad de la página y una mejor experiencia del usuario.

Aquí podemos elegir qué sucede cuando se hace una acción dentro de cierta parte de la página, presiona una tecla, desplaza la página y más. Las aplicaciones son numerosas y dependen básicamente de la creatividad del desarrollador.

Incluso JavaScript es ideal para aquellos que desean aprender a programar, ya que la sintaxis del lenguaje es dentro de todo, simple. Además, es posible realizar pruebas inmediatas viendo el resultado de su código directamente en el navegador web.

Conclusión

Bueno, ¡llegamos al final! Conocer el HTML tiene su gran relevancia en los tiempos digitales que corren. Es cierto, no pudimos tocar todos los temas HTML en este post, pero al menos pudimos hacer un pequeño tour para despertar la curiosidad.

Espero que el post te haya servido para comprender lo básico del HTML. Por otra parte, quiero dejarte un enlace aquí debajo, con un regalo de 25 dólares para que puedas hacer un nuevo sitio en WordPress.

¡Nada para añadir! ¡Hasta la próxima!