Ejercicios de Enlaces (60 ejercicios) — Resueltos

Copia y pega este archivo en .html y ábrelo. Cada ejercicio incluye el código ya resuelto.

1. Enlace simple

Visitar example.com

2. Enlace que abre en nueva pestaña

Abrir en nueva pestaña

3. Enlace interno (ancla)

Ir a la sección 1

Sección 1 — Aquí está

4. Enlace mailto básico

Enviar correo

5. Enlace mailto con asunto y cuerpo

Enviar correo con asunto

6. Enlace telefónico (tel)

Llamar +34 123 456 789

7. Enlace SMS (sms)

Enviar SMS

8. Enlace con title (tooltip)

Hover para ver tooltip

9. Enlace con imagen

10. Enlace de descarga (atributo download)

Descargar archivo-ejemplo.txt

11. Enlace relativo (misma carpeta)

Ir a pagina.html

12. Enlace absoluto

Ir a OpenAI

13. Enlace con fragmento hacia ID en otra página

Ir a sección 2 en otra página

14. Enlace con target frame (legacy)

Nota: usado para marcos; hoy en desuso.

Abrir en top

15. Enlace con rel="nofollow"

Enlace nofollow

16. Varios enlaces en línea

Inicio | Contacto | Ayuda

17. Enlace dentro de lista

Elemento con enlace

18. Enlace dentro de tabla

19. Enlace con aria-label (accesibilidad)

Enlace accesible

20. Enlace con role="button"

Enlace con rol de botón

21. Enlace con nombre y accesible

Enlace con id

22. Enlace que activa un archivo .pdf

Abrir PDF

23. Enlace que apunta a un mp3

Reproducir audio

24. Enlace a un video

Ver video

25. Enlace con etiqueta `rel="noopener noreferrer"`

Seguro

26. Enlace con clase para estilos

Enlace con clase

27. Enlace con data-attribute

Enlace con data-id

28. Enlace a archivo comprimido

Descargar ZIP

29. Enlace que abre correo en webmail

Abrir Gmail

30. Enlace con `mailto:` y cc

Enviar correo con CC

31. Enlace con `tel:` y número con espacios

Llamar (con espacios)

32. Enlace con `skype:` (ejemplo)

Llamar por Skype

33. Enlace con protocolo ftp

Enlace FTP

34. Enlace con parámetros GET en URL

Buscar: term

35. Enlace con anchor y texto largo

Este es un enlace con texto largo que sirve para probar el wrapping del enlace en la página

36. Enlace dentro de un botón (no recomendado)

37. Enlace que apunta a sección oculta

Ir a oculto

38. Enlace con texto accesible y aria-hidden en icono

Enlace con icono

39. Enlace con tabindex para foco

Enlace enfocables

40. Enlace con fragment identifier complejo

Ir a Capítulo 1 - Sección 2

41. Enlace a recurso externo con protocolo https

Wikipedia

42. Enlace a recurso externo con protocolo http (legacy)

Ejemplo HTTP

43. Enlace con estilo inline para subrayado y color

Enlace verde subrayado

44. Enlace con texto alternativo largo (aria-label)

Descripción detallada

45. Enlace con atributo download y nombre sugerido

Descargar reporte

46. Enlace a un mapa (Google Maps) — ejemplo

Ver Madrid en Maps

47. Enlace que incluye parámetros encodificados

Enlace con texto codificado

48. Enlace con nombre (anchor name, legacy)

Enlace legacy

49. Enlace a secciones mediante lista de navegación

50. Enlace con fragment y scroll (solo HTML)

Ir al final de la página

Final de la página

51. Enlace con hreflang para indicar idioma

Versión en español

52. Enlace dentro de figura/figcaption

53. Enlace con meta refresh (simulado)

Nota: la meta-refresh se coloca en <head>, se muestra aquí como referencia.

54. Enlace a un feed RSS

Suscribirse al feed

55. Enlace con no-referrer

Enlace sin referer

56. Enlace a protocolo de pago (ejemplo)

Enviar Bitcoin (ejemplo)

57. Enlace a perfil social

Twitter

58. Enlace con prefijo mailto y multiple destinatarios

Enviar a varios

59. Enlace con atributo ping (notificación)

Enlace con ping

60. Enlace resumen: lista de enlaces útiles

Fin de enlaces.html. Si quieres, continúo ahora con tablas.html completo (50), frames.html (50) y formularios.html (30) — uno por mensaje.