Organización de archivos y directorios
Para trabajar eficientemente con recursos en un proyecto web, es fundamental comprender la estructura de carpetas. El directorio raíz es la carpeta principal del proyecto que contiene todos los archivos y subcarpetas.
Rutas de archivos
Existen dos formas principales de referenciar archivos en HTML:
Ruta relativa: Indica la ubicación del recurso con respecto al documento HTML actual. Utiliza la barra diagonal / como separador.
./— Directorio actual../— Subir un nivel en la jerarquía../../assets/foto.png— Subir dos niveles y acceder a una carpeta
Ruta absoluta: Especifica la ubicación completa del recurso, ya sea desde la raíz del sistema o mediante una URL completa.
C:\\proyectos\\web\\recursos\\icono.svghttps://ejemplo.com/media/banner.jpg
Elemento de enlace: la etiqueta <a>
La etiqueta <a> permite crear hipervínculos para navegar entre páginas o secciones dentro de un sitio web.
<a href="destino" target="modo_apertura">Contenido clicable</a>
Atributos prinicpales:
href— Define la URL de destino (atributo obligatorio)target— Controla cómo se abre el enlace:_self(misma ventana) o_blank(nueva ventana)
Ejemplo de enlaces externos
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Enlaces externos</title>
</head>
<body>
<h3>Sitios de referencia</h3>
<a href="https://www.mozilla.org" target="_blank">Mozilla</a>
<a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a>
</body>
</html>
Tipos de enlaces
Enlace interno: Conecta páginas dentro del mismo sitio web usando rutas relativas.
<a href="contacto.html">Página de contacto</a>
Enlace vacío: Útil como marcador de posición durante el desarrollo.
<a href="#">Funcionalidad pendiente</a>
Enlace de descarga: Cuando el atributo href apunta a un archivo comprimido o ejecutable, el navegador lo descarga automáticamente.
<a href="documentacion.zip">Descargar documentación</a>
Enlace sobre elementos multimedia: Cualquier elemento HTML (imágenes, tablas, contenido de audio o video) puede envolverse con <a> para hacerlo interactivo.
<a href="https://www.ejemplo.com">
<img src="recurso_grafico.png" alt="Logo institucional">
</a>
Ejemplo completo
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Demostración de enlaces</title>
</head>
<body>
<h3>Enlaces externos</h3>
<a href="https://www.mozilla.org" target="_blank">Mozilla</a>
<a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a>
<h3>Enlace interno</h3>
<a href="servicios.html">Nuestros servicios</a>
<h3>Enlace vacío</h3>
<a href="#">Próximamente</a>
<h3>Enlace de descarga</h3>
<a href="manual_usuario.pdf">Descargar manual</a>
<h3>Elemento clicable</h3>
<a href="https://www.ejemplo.com">
<img src="grafico.jpg" alt="Imagen enlazada">
</a>
</body>
</html>
Enlaces de anclaje (anchor links)
Los enlaces de anclaje permiten desplazarse rápidamente a una sección específica dentro de la misma página.
Paso 1: En el enlace, establecer el atributo href con el formato #identificador.
<a href="#capitulo-dos">Ir al capítulo 2</a>
Paso 2: En el destino, agregar un atributo id con el mismo nombre usado en el enlace.
<h2 id="capitulo-dos">Capítulo 2: Contenido avanzado</h2>