HTML en Arroz y Habichuelas

 

Parte 1 de la Serie HTML “Fácil” a lo Boricua

“Fácil” a lo Boricua es el título de una serie de artículos que intenta explicar HTML de una manera fácil. Cada parte de la serie se titula con una frase diferente utilizada por los puertorriqueños, o boricuas, para expresar facilidad. Explicar algo “…en arroz y habichuelas” significa explicar de manera en que cualquier persona lo puede entender.

Nota: En algún punto de este artículo, vas a necesitar Notepad (PC) ó TextEdit (Mac) para practicar un ejercicio corto. Mantén eso en mente y a la mano.

¿Alguna vez haz apretado una combinación de caracteres en el teclado de la computadora y muestra una pantalla adicional en el navegador web que se asimila a lo siguiente?:

imagen-referencia
Impresión de pantalla de mi inspector

Aunque nunca hayas visto esta pantalla en tu vida, esta pantalla es una de las herramientas esenciales para el desarrollo de páginas web. Es muy importante que te familiarizes con ella. Esta pantalla es conocida como el inspector de una página web, o simplemente inspector.

Hay 3 formas de accesar el inspector de una página:

  1. Haz click derecho en cualquier elemento (texto, imagen, butón, etc.) de la página web.
  2. Selecciona “Inspeccionar” (PC) ó “Inspeccionar elemento” (Mac) .
  3. Pulsar simultáneamente Ctrl-Shift-C (Windows) ó Cmd-Opción-C (Mac OS y Linux).
  4. Elegir la opción de Inspector en el menú de Developer (puede aparecer como sub menu de Vista en Mac).

Si te fijas en el lado izquierdo del inspector hay unas líneas que comienzan y terminan con letras o palabras dentro de los símbolos “<” y “>”. Estos, son elementos del lenguaje de marcado de hipertexto ó HTML (por sus siglas en inglés).

Este es el primer escrito, de una serie de ellos, en la cual me dedicaré a explicar de forma sencilla lo básico de HTML. Desde su definición de forma generalizada hasta crear una página con estilos incluidos.

¿Qué es HTML?

Según los docmentos web de MDN, la palabra hipertexto se refiere a enlaces que conectan páginas web entre sí, sea en el mismo sitio web, o en diferentes sitios web.

También MDN sugiere que HTML, en cuanto a marcado se refiere, denota lo que son los textos, botones, menus, imágenes, videos, y demás elementos que contiene una página web.

Así que, en arroz y habichuelas, HTML describe la estructura de la página web. Además de que le interpreta al navegador web cómo se visualiza el documento.

¿Cómo se estructura HTML?

Las letras y palabras que están entre medio de un “<” y “>” son los tags de HTML. Los tags son los que denotan el tipo de elemento que esta localizado en el documento. Un ejemplo sencillo es:

<p>Mi gata come mucho.</p>
(1)        (2)        (3)
  1. El tag de apertura ” <p> ” denota que el principio de un elemento tipo párrafo estará localizado en esa pocisión del documento.
  2. Mi gata come mucho.” es el contenido del elemento tipo párrafo.
  3. El tag de clausura “</p>” denota que el final de un elemento tipo párrafo esta localizado en esa pocision del documento.

Si te preguntas, “¿cómo sé que el elemento es de tipo párrafo?”, la respuesta se encuentra en las letras y palabras que estan entre los símbolos “<” “>”. En el ejemplo anterior, la letra p es la que denota que el elemento es un párrafo. La letra p es de párrafo (ó paragraph en inglés).

Existen multiples tipos de tags. La estructura más básica de un documento web en HTML se ve de la siguiente forma:

<html>
    <head>
        <title>Título de página web</title>
    </head>
    <body>Contenido de página web</body>
</html>

Ahora te toca a tí

Es hora de que abras Notepad (PC) o TextEdit (Mac OS). Aunque Notepad o TextEdit no son los mejores editores de texto para escribir código, lo puedes usar como principiante para ir soltando esa habilidad de escribir máquina.

Vamos a hacer un ejercicio que te hará sentir poderosa (so). Es un ejercicio sencillo pero creo que motiva a seguir practicando a escribir HTML.

Nota: Sugiero que leas este articulo titulado Los mejores editores gratuitos de HTML, CSS y JavaScript (2019) para que te orientes en cuál es el mejor editor de código para tí.

Copia y pega el siguiente código en la nueva página del editor de texto que tengas abierto:

<html>
    <head>
        <title>Hoy es que es</title>
    </head>
    <body>
        <h3>¡A escribir máquina!<h3>
        <button>Vamo' Allá</button>
    </body>
</html>

Luego de copiar y pegar, ASEGÚRATE que la siguiente configuración está establecida en el documento antes de guardar:

  1. El texto sea guardado sin formato (“Plain Text” en inglés).
  2. Codificación sea Unicode (UTF-8).

Guarda el documento con la extensión .html en cualquier archivo fácil de accesar en tu computadora.

Es MUY IMPORTANTE que guardes el documento con extensión .html (tipo de documento sea html).

Localiza el documento en tu computadora y ábrelo.

Si tu documento no abrió automáticamente en un navegador web:

  1. Haz click derecho encima del ícono del documento .html, y escoge la opción de abrir el documento en tu navegador de preferencia. Se supone que el documento abra en el navegador escogido.
  2. Si la opción anterior no funciona, puedes copiar la dirección de la localizacón del documento en la computadora y la pegas en el input de direcciones web del navegador web.

Ahora ve a tu navegador web a observar el documento HTML que creaste.

Nota: Si aún ves los tags cuando abres el navegador web, pasa a la sección Aún veo los tags en el navegador web de este artículo.

¡CHAN CHAN! Se supone que puedas observar algo similar a lo siguiente:

Documento HTML creado

Como podrás notar, lo que observas en una página web es el contenido que esta dentro de los tags.

En el ejemplo que acabas de crear, puedes ver que el contenido del tag de <title> </title> esta localizado en la pestaña de la pantalla. Por lo que ahora entiendes que ese tag representa el titulo localizado en la pestaña del documento web.

También podemos observar el contenido del tag de <h3></h3> dado a que es un tag referente al encabezamiento tipo 3. Por último, el tag de <button></button> denota un botón en conjunto con su contenido (información textual en el botón).

Aún veo los tags en el navegador web

Pero, si al abrir el documento en el navegador web, se ve el código del mismo modo que lo escribiste en el editor de texto (los tags son visibles), repite los pasos anteriores para identificar la falla.

Dicho sea de paso, puedes aplicar las estrategias que explico en el artículo Cómo practicar la resolución de problemas para el desarrollo web sin escribir código para encontrar la falla.

Nota: Si identificas que falta algún paso en las instrucciones, o se pueden explicar mejor, por favor déjame saber en los comentarios para hacer los cambios necesarios 😅.

Practica, practica practica

Poderoso, ¿no? Aunque posiblemente aún no entiendas un pepino lo que estas haciendo, poco a poco le irás cogiendo el piso.

En mi experiencia personal, se me ha echo más fácil entender código cuando veo cómo funciona el código. Copio un código que consigo buscando en internet, y juego con él haciendo todo tipo de cambio para ver cómo se comporta.

En este caso, puedes seguir añadiendo distintos tipos de tags para que veas cómo se denotan los diferentes elementos.

El próximo escrito de esta serie, utilizará el mismo documento con extensión .html que creaste aquí. Así que no lo borres para que no tengas que volver a crearlo para continuar.

Punto aparte

Este artículo lo escribí escuchando la lista de canciones This is Boards of Canada en Spotify. Tiene casi la discografía completa de la banda Boards of Canada. Esta banda se compone de un duo de hermanos escoseses, Michael Sandinson y Marcus Eoin. Ellos tocan música electronica con tempo lento, ambient y ciertos elementos de psicodelia y hip hop.

Listado de canciones de Boards of Canada creada por Spotify

¡Hasta la próxima! 😉

Leave a Reply

Your email address will not be published. Required fields are marked *