HTML es un Mamey

 

Parte 2 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. “Es un mamey” significa “es fácil”.

Nota: En algún punto de este artículo, requerirás utilizar un editor de texto como Notepad (PC) ó TextEdit (Mac) para hacer un ejercicio de programación. Ten eso en mente y en mano.

¡Wepa lector(a)! Sé que me tomó un largo tiempo 😔, pero estoy de regreso con la Parte 2 de la serie HTML Fácil a lo Boricua 🥳.

En esta segunda parte se discutirá sobre los atributos de las etiquetas de HTML. También culminará con un ejercicio práctico de HTML usando como punto de partida el código escrito en la Parte 1 de la serie.

No pretendo que recuerdes el código de la Parte 1. Así que te tengo cubierta(o) 😉. Puedes copiar el siguiente código, ó, puedes hacer clic en este enlace para acceder el artículo Parte 1: HTML en arroz y habichuelas en su totalidad.

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

Vamos a retomar lo que sabemos sobre HTML hasta ahora.

En la Parte 1 de la serie HTML Fácil a lo Boricua, aprendimos que HTML es un lenguaje de marcado de hipertexto para documentos de la web. Aprendimos que HTML tiene una estructura que require etiquetas que denotan los elementos del documento web. Incluso, vimos como lucen las etiqueta de HTML en el navegador.

Continuemos con las etiquetas de HTML mientras aprendemos sobre los atributos.

Atributos de HTML

El lenguaje español usa adjetivos y adverbios para describir sujetos y verbos respectivamente. Los atributos se comportan de manera similar en los lenguajes de programación.

Los atributos de HTML son palabras que proveen información adicional sobre el comportamiento o configuración del elemento. Existen dos tipos de atributos: atributos globales y atributos específicos.

Aunque sus nombres describen el propósito de cada tipo de atributo, vamos a configurar el elemento del botón para demostrar cómo los atributos contribuyen a la denotación del elemento. No te preocupes, no tienes que escribir algo durante la descripción de este ejemplo. Sólo continúa leyendo 👀.

Primero, vamos a incluir las etiquetas de inicio y final que denotan un botón.

<button></button>
Figura 1: Presentación de la etiqueta de un botón sin atributos

Nota: Los botones se pueden denotar utilizando otras etiquetas pero utilicé <button></button> para propósitos de demostración.

Segundo, vamos a añadir algún texto de instrucciones dentro del botón.

<button>Hazme clic!</button>
Figura 2: Presentación de la etiqueta de botón con texto entre etiquetas.

Yo no sé tú pero en este punto pensé en darle estilo al botón. Vamos a:

  • Modificar la forma de rectángulo a círculo.
  • Añadir color de fondo.
  • Modificar el color y tamaño de texto.
  • Modificar ancho y largo.
<button
  style=“border-radius: 50%;
  color: #fff;
  font-size: 16px;
  width: 100px;
  height: 100px;
  background-color: #000;”
>
    ¡Hazme clic!
</button>
Figura 3: Presentación de la etiqeuta de botón con texto entre etiquetas y un poco de estilo.

Ahora, cuando haces clic en el botón se ve así.

¿Notaste el contorno azul? Significa que el botón esta enfocado. Dado a que el botón se puede enfocar cuando se le da clic, se puede asumir que el botón esta activo. Así que, ¡vamos a desactivar el botón!

<button
  disabled
  style=“background-color: #000;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  width: 100px;
  height: 100px;”
>
    ¡Hazme clic!
</button>

Este ejercicio es un ejemplo de una configuración de botón simple. La configuración incluye de estilo y funcionalidad.

Atributos especificos

Como sugiere el nombre, los atributos específicos son atributos que específicos para el elemento denotado.

Si nos referimos al botón configurado en la sección anterior, ¿puedes identificar cuáles de las configuraciones son especificas para el botón?

Es la funcionalidad.

¿A qué me refiero con la funcionalidad? El botón tiene el atributo de desactivar (disabled) igual a cierto (true). Esto significa que el usuario no puede interactuar on el botón, como observamos anteriormente.

¿Por qué desactivar es un atributo específico del elemento? Porque aplica a elementos con los que el usuario puede interactuar. Algunos de estos elementos son input (<input></input>), area de texto (textarea></textarea>), menu (<menu></menu>). Por otro lado, el atributo desactivar no puede ser utilizado con etiquetas de encabezado , por ejemplo, la etiqueta h3 (<h3></h3>).

Attributos globales

Los atributos conocidos como atributos globales son aquellos que pueden ser utilizados con todos los etiquetados de HTML.

Volvamos a referirnos al botón configurado anteriormente. Estilo (style) es el atributo global utilizado en la configuración del botón. El atributo tiene su propias propiedades como el color de fondo, radio de borde, color y tamaño de texto, ancho y alto. Estas propiedades son declaraciones de estilo CSS, responsables de cambiar la apariencia del botón.

Otros ejemplos de atributos globales son clase (class), id, y oculto (hidden). Todos los elementos de HTML pueden tener clase, id, o se pueden ocultar. Este artículo de MDN Web Docs lista los atributos globales comunmente utilizados.

Nota al calce: Me leerás citando a MDN Web Docs mucho. Es porque es una muy buena fuente de referencia, especialemente para desarrollo front-end. ¡Echale un vistazo!

Aunque no estamos discutiendo CSS en este artículo, es bueno mencionar que las clases y los ids son comunmente utilizados en CSS como selectores.

Otra nota al cace: Si no tienes conocimiento de lo que es un selector de CSS, según MDN Web Docs el selector es “el elemento HTML en el que comienza la regla. Esta selecciona el(los) elemento(s) a dar estilo”. 

¡Hora de practicar!

Es momento que abras, o maximizes, tu editor de texto.

Como expliqué anteriormente, el código a utilizar como referencia para iniciar esta práctica es el código resultado de la Parte 1 de la serie HTML Fácil a lo Boricua.

Aquí un enlace del artículo completo, pero tambien puedes copar el código abajo.

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

Y aqui como de muestra el documento HTML con los etiquetados sin atributos.

Imagen capturada del documento HTML con etiquetados pero sin atributos. Este documento es el resultado de la práctica realizada en la parte 1 de la serie HTML Fácil a lo Boricua.

Vamos a usar los atributos de etiquetado de HTML para ocultar el botón y alinear el texto de encabezado al lado derecho del documento.

….. y violá

Imagen capturada del documento HTML con etiqeutados y atributos.

Trata de crear una respuesta por tu cuenta antes de mirar mi respuesta.

Obtendrás mi respuesta desplazando el cursor pasando multiples gifs.

¡Tú PUEDES resolver esto!

Lo tienes en la palma de tus manos. ¡Tú PUEDES lograrlo!

¡Tú tienes esto!

Aquí mi respuesta:

<html>
    <head>
        <title>Today is the day</title>
    </head>
    <body>
        <h3 style="text-align: right; width: 100%;">
          Let's write machine!
        <h3>
        <button hidden="true">Let's Go!</button>
    </body>
</html>

Tu eres…

… por intentarlo. Estas más alante que muchas personas que utilizan la computadora. La mayoría ni tiene idea de cómo hacer lo que acabas de hacer.

Escribir código es dificil y resulta dificil entender conceptos de primera instancia, pero si tu practicas… practicas… practicas… se te hará mas fácil. ¡No te rindas!

Utiliza el mismo código, y continúa leyendo recursos como MDN Web Docs para practicar. Escribí el artículo Recursos para programadoras(es) novatas(os) (link aquí) con los recursos que utilizo a diario cuando escribo código.

Recuerda siempre, la practica y la paciencia te hará mejor programador(a).

Punto aparte

Este artículo fué escrito mientras escuchaba la discografía de Warpaint en Spotify. Warpaint es, definitivamente, una de mis bandas favoritasde todos los tiempos. Ellas tocan rock pop psicodelico. La primera vez que las vi en vivo, estaba tan hipnotizada por su sonido y presencia en tarima, que estaba convencida de que eran unas brujas que me hechizaron durante su actuación. Su baterista, Stella, me ha inspirado a aprender a tocar batería. Échales un vistazo a continuación.

Listado de reproducción This is Warpaint preparada por Spotify

¡Hasta luego! 🙆‍♀️

Leave a Reply

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