HTML: Atributos de etiquetado

 

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.

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.

Copia el siguiente código. Conocimos este código por primera vez en HTML para principiantes.

<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.

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 *