Los enlaces y las imágenes son dos de los recursos más comunes que agregará a sus páginas web, por lo que es clave saber cómo abordarlos correctamente.
Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado.
Cada sitio web necesita hacer referencia a ciertos recursos, ya sean imágenes, archivos u otras páginas web. Decidir cómo vincular a otros archivos es extremadamente importante para garantizar que los navegadores los localicen correctamente.
Puede vincular a los recursos mediante una URL relativa o absoluta. Esto se aplica tanto a los archivos locales en una computadora como a las URL basadas en protocolos a las que se accede a través de la web.
Cómo utilizar una ruta de URL absoluta
Una URL absoluta contiene la ruta completa a una ubicación de archivo en particular. Ejemplos de estos incluyen la ruta completa a los archivos en su computadora:
- archivo:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- archivo:///C:/Usuarios/Marca/Documentos/Música/Grabación.mp3
Otro ejemplo incluye una URL de protocolo completo, que puede usar para identificar un recurso para enviar por Internet. Por lo general, estos comienzan con "https" o "http":
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
La URL absoluta contiene toda la información necesaria para localizar el archivo o recurso al que intenta acceder. Esto es necesario si está enlazando a un sitio externo.
- Crea un sitio web simple en HTML creando una nueva carpeta y agregando dos nuevos archivos llamados índice.html y estilos.css.
- En índice.html, agregue código HTML para crear un sitio web básico:
<!DOCTYPE html>
<idioma html="es">
<cabeza>
<título> Mi sitio web </title>
<juego de caracteres meta="UTF-8">
<metanombre="mirador" contenido="ancho = ancho del dispositivo, escala inicial = 1">
<enlace rel="hoja de estilo" href="estilos.css" />
</head>
<cuerpo>
<clase div="envase">
<h1> Mi sitio web </h1>
<pag> Bienvenidos a mi sitio web. </pag>
</div>
</body>
</html> - En estilos.css, agregue algo de estilo a la página web.
cuerpo {
familia tipográfica: Arial, Helvetica, sans-serif;
}.envase {
pantalla: flexible;
dirección de flexión: columna;
alinear elementos: centro;
}.mb28 {
margen inferior: 28px;
} - En índice.html, agrega un etiqueta dentro del contenedor div y agrega la URL absoluta al sitio principal de Google ( https://www.google.com).
<un href="https://www.google.com" clase="mb28">Google.com</a> - También puede acceder a las imágenes en línea usando la ruta absoluta completa al archivo almacenado. También puede tomar medidas adicionales para asegurarse de haber agregado imágenes sensibles a su HTML Página web.
<img origen="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=formato&ajuste = cultivo&w=3870&q=80" alt="Linda foto de pájaro" clase="mb28" ancho ="900" altura="600"> - Clickea en el índice.html archivo para abrirlo en un navegador y ver la imagen recuperada de su ubicación externa.
- Desde la carpeta raíz de su sitio web, cree una nueva carpeta para almacenar imágenes, llamada Imágenes. Dentro de la carpeta, agregue una nueva imagen y asígnele un nombre, como pajarito.jpg.
- Identifique la ruta absoluta al archivo de imagen que acaba de agregar. Puede hacerlo encontrándolo en la ruta de navegación de la aplicación de administrador de archivos de su sistema operativo. También deberá agregar el nombre del archivo al final de la ruta. Por ejemplo, "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
- En índice.html, reemplace su etiqueta de imagen con una nueva imagen que use la ruta absoluta que apunta a la pajarito.jpg archivo almacenado en su computadora. Recuerde agregar el prefijo file:// para indicar un recurso del sistema de archivos local. En Unix y macOS, puede agregar la ruta absoluta que identificó en el paso anterior. En Windows, deberá reemplazar las barras diagonales inversas con barras diagonales y agregar una barra diagonal adicional antes de la letra de la unidad, por ejemplo:
- Clickea en el índice.html archivo para abrirlo en un navegador y ver la imagen almacenada en su computadora.
Cómo utilizar una ruta de URL relativa
Una URL relativa solo almacena parte de la URL o la ruta y, por lo general, es relativa a la ubicación del archivo o la sección actual de un sitio web.
En el ejemplo anterior, para acceder logo.ico de índice.html usando una URL relativa, usaría la ruta "Images/Icons/Logo.ico". Otros ejemplos incluyen:
- Páginas/Pájaro1.html
- Imágenes/PájaroLindo.jpg
- estilos.css
Cuando usa la misma estructura de carpetas en otra computadora, el sitio web aún podrá recuperar el archivo. Al enrutar a través de la web, en lugar de usar el enlace completo como " https://example.com/about", en su lugar, puede usar el enrutamiento relativo:
- /about
- /contact
- /projects/local-clients
Puede usar una URL relativa para crear enlaces o imágenes de referencia dentro de su página web HTML.
- Dentro de la raíz del directorio de su sitio web, cree una nueva carpeta llamada Paginas.
- Dentro de la nueva carpeta Páginas, cree un nuevo archivo llamado pájaro1.html.
- Poblar pájaro1.html con código HTML para crear la página.
<!DOCTYPE html>
<idioma html="es">
<cabeza>
<título> pájaro 1 </title>
<juego de caracteres meta="UTF-8">
<metanombre="mirador" contenido="ancho = ancho del dispositivo, escala inicial = 1">
<enlace rel="hoja de estilo" href="../estilos.css" />
</head>
<cuerpo>
<clase div="envase">
<h1> Café </h1>
<pag> ¡El café es un pájaro dulce al que le encanta jugar! </pag>
</div>
</body>
</html> - Dentro del contenedor div, agregue una etiqueta de imagen y use una URL relativa para vincular al pajarito.jpg imagen.
<img origen="../Imágenes/PájaroLindo.jpg" alt="Linda foto de pájaro" clase="mb28" ancho ="900" altura="700"> - En el índice.html archivo, elimine el contenido existente dentro del contenedor div. Reemplácelo con uno solo a etiqueta que utiliza un enlace relativo para abrir el pájaro1.html archivo.
<clase div="envase">
<h1> Mi sitio web </h1>
<pag> Bienvenidos a mi sitio web. </pag>
<un href="Páginas/Pájaro1.html" clase="mb28">Pájaro 1: Café</a>
</div> - Clickea en el índice.html archivo para abrirlo en un navegador y haga clic en el nuevo enlace para navegar a pájaro1.html.
Ahora puede determinar la diferencia entre URL absolutas y relativas. Ahora puede tener especial cuidado para asegurarse de que sus recursos siempre se recuperen.
También debe asegurarse siempre de que todos los enlaces a los que pueden acceder sus usuarios sean seguros y protegidos.