Atributos de etiquetado HTML

 

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

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

Vamos a configurar el elemento “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>

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

<button>Hazme clic!</button>

Vamos a darle estilo al botón:

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

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.

Antes de continuar indagando en los atributos de etiquetados, quiero dejarte saber que este es el segundo escrito en la cual explico lo básico de HTML. También, puedes ver una versión de este escrito en inglés aquí. Los demás escritos sobre HTML son: HTML para principiantes (versión en inglés)Anidar etiquetas HTML (versión en inglés).

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

Atributos de etiquetado especificos

Como sugiere el nombre, los atributos específicos son 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 con 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>), área de texto (textarea></textarea>) y menú (<menu></menu>). Por otro lado, el atributo desactivar no puede ser utilizado con una etiquetas de encabezado tipo h3 (<h3></h3>), por ejemplo.

Atributos de etiquetado globales

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

Vamos a referirnos al botón configurado anteriormente. Estilo (style) es el atributo global utilizado en la configuración del botón. El atributo tiene sus 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.

Usaremos 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 novatas (link aquí) con los recursos que utilizo a diario cuando escribo código.

Recuerda siempre, la practica y la paciencia te hará mejor programadora.

¡Gracias por leer!

Puedes obtener notificaciones de nuevos artículos directamente a tu buzón electrónico registrándote en el siguiente enlace

Artículos relacionados

Los siguientes artículos de CTRL-Y están relacionados a este escrito. ¡Deberías de echarles un vistazo!

Punto aparte – Una lista de reproducción para tí

Este artículo fué escrito mientras escuchaba la discografía de Warpaint en Spotify. Warpaint es, definitivamente, una de mis bandas favoritas de 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.

Listado de reproducción This is Warpaint preparada por Spotify

Leave a Reply

Your email address will not be published.