Aprendizaje activo: Añadir atributos a un elemento
Otro ejemplo de un elemento es <a>. Esto significa _ancla_. Una ancla puede convertir el texto que encierra en un hipervínculo. Las anclas pueden tener varios atributos, pero varios son como sigue:
href
El valor de este atributo indica la dirección web a la que se quiere que apunte el enlace, que será hacia donde nos lleve el navegador cuando se haga clic sobre el elemento. Por ejemplo, href="https://www.mozilla.org/".
title
El atributo title añade información adicional sobre el enlace, como puede ser el título de la página que vinculas. Por ejemplo, title="La página de inicio de Mozilla". Esta información aparecerá cuando se le pase el ratón por encima.
target
El atributo target especifica el contexto de navegación que va a usar para mostrar el enlace. Por ejemplo, target="_blank" abrirá el enlace en una nueva pestaña. Si quieres mostrar el enlace en la pestaña activa, simplemente omite este atributo.
Edita la línea de abajo en el área de Entrada para convertirlo en un enlace a tu sitio web favorito.
- Añade el elemento <a>.
- Añade el atributo href y el atributo title.
- Especifica el atributo target para abrir el enlace en una nueva pestaña.
Los cambios se actualizarán inmediatamente en la zona de _Salida_. Deberías ver un enlace que mostrará el contenido del atributo title cuando pases el ratón encima, y que te llevará a la dirección web indicada por el atributo href cuando hagas clic. Recuerda que debes incluir un espacio entre el nombre del elemento y cada atributo.
Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si te quedas realmente atascado, pulsa el botón Mostrar la solución para ver la solución.
Atributos booleanos
En ocasiones puedes ver atributos escritos sin valor. Esto está permitido. Estos se denominan atributos booleanos. Los atributos booleanos solo pueden tener un valor, que generalmente es el mismo que el nombre del atributo. Por ejemplo, considera el atributo disabled, que puedes asignar a los elementos de entrada del formulario. (Usa esto para deshabilitar los elementos de entrada del formulario para que el usuario no pueda realizar entradas. Los elementos desactivados suelen tener una apariencia atenuada). Por ejemplo:
.png "carbon(24).png")
De manera abreviada, también es posible escribirlo como se describe a continuación (además, se ha incluido un elemento de entrada de formulario no desactivado como referencia, para dar una idea más precisa de lo que sucede):
.png "carbon(25).png")
Como referencia, el ejemplo anterior también incluye un elemento de entrada de formulario no deshabilitado. El HTML del ejemplo anterior produce este resultado:
Omitir comillas en valores de atributos
Cuando observas diferentes páginas web, puedes encontrarte con todo tipo de estilos de etiquetado extraños, que incluyen valores de atributos sin comillas. Esto se permite en ciertas circunstancias, pero interrumpirá la edición en otras. Por ejemplo, si volvemos a revisar el ejemplo del enlace, sería posible escribir una versión básica con solo el atributo href, así:
.png "carbon(26).png")
Sin embargo, las cosas no funcionarán cuando a este estilo se añada el atributo title:
 1.png "carbon(27) 1.png")