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>Tercero, 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 al darle 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. Se configuró el 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) y Anidar etiquetas HTML (versión en inglés).
Atributos de etiquetado especificos
Como sugiere el nombre, los atributos específicos son específicos para el elemento denotado.
Usando de ejemplo el botón configurado, ¿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. Un ejemplo de etiquetas de encabezado son los tipo h3 (<h3></h3>).
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, 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 utilizados comúnmente.
Aunque este artículo no discute CSS es importante mencionar que las clases y los ids son utilizados en CSS como selectores.
¡Hora de practicar!
Es momento que abras 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.
Usaremos los atributos de etiquetado para ocultar el botón y alinear el texto de encabezado al lado derecho del documento.
….. y violá
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 asombrosa por intentarlo.
Tienes más conocimiento 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 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. También, puedes referirte a mi artículo “Recursos para programadoras novatas (link aquí)”. En ese artículo detallo los recursos que utilizo a diario cuando escribo código.
Recuerda 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!
- HTML para Principiantes
- HTML: Anidar etiquetas
- Recursos para programadoras de web novatas
- Estados HTTP Puerto Rico
- Las partes generales del lenguaje de programación
- ¿Qué es el motor de renderizado?
- Aprende a programar: Bajando el pedestal de programación
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.