Les liens et les images sont deux des ressources les plus courantes que vous ajouterez à vos pages Web. Il est donc essentiel de savoir comment les traiter correctement.
Chaque site Web doit référencer certaines ressources, qu’il s’agisse d’images, de fichiers ou d’autres pages Web. Décider comment lier à d’autres fichiers est extrêmement important pour s’assurer que les navigateurs les localisent correctement.
Vous pouvez créer un lien vers des ressources à l’aide d’une URL relative ou absolue. Cela s’applique à la fois aux fichiers locaux sur un ordinateur et aux URL basées sur un protocole accessibles sur le Web.
Comment utiliser un chemin d’URL absolu
Une URL absolue contient le chemin d’accès complet à un emplacement de fichier particulier. Des exemples de ceux-ci incluent le chemin d’accès complet aux fichiers sur votre ordinateur :
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Un autre exemple inclut une URL de protocole complète, que vous pouvez utiliser pour identifier une ressource à envoyer sur Internet. Le plus souvent, ceux-ci commencent par “https” ou “http”:
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
L’URL absolue contient toutes les informations requises pour localiser le fichier ou la ressource auquel vous tentez d’accéder. Ceci est nécessaire si vous créez un lien vers un site externe.
- Créer un site Web simple en HTML en créant un nouveau dossier et en ajoutant deux nouveaux fichiers appelés index.html et styles.css.
- Dans index.htmlajoutez du code HTML pour créer un site Web de base :
<!DOCTYPE html>
<html lang="en">
<head>
<title> My Website </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<h1> My Website </h1>
<p> Welcome to my website. </p>
</div>
</body>
</html> - Dans styles.cssajoutez du style à la page Web.
body {
font-family: Arial, Helvetica, sans-serif;
}.container {
display: flex;
flex-direction: column;
align-items: center;
}.mb28 {
margin-bottom: 28px;
} - Dans index.htmlajoutez une balise à l’intérieur de la div du conteneur et ajoutez l’URL absolue du site principal de Google (https://www.google.com).
<a href="https://www.google.com" class="mb28">Google.com</a> - Vous pouvez également accéder aux images en ligne en utilisant le chemin absolu complet vers le fichier stocké. Vous pouvez également prendre des mesures supplémentaires pour vous assurer que vous avez ajouté des images réactives à votre HTML page web.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3870&q=80" alt="Cute bird photo" class="mb28" width="900" height="600"> - Clique sur le index.html fichier pour l’ouvrir dans un navigateur et afficher l’image récupérée à partir de son emplacement externe.
- À partir du dossier racine de votre site Web, créez un nouveau dossier pour stocker les images, appelé Images. Dans le dossier, ajoutez une nouvelle image et donnez-lui un nom, tel que CuteBird.jpg.
- Identifiez le chemin absolu vers le fichier image que vous venez d’ajouter. Vous pouvez le faire en le trouvant dans le chemin de navigation de l’application de gestion de fichiers de votre système d’exploitation. Vous devrez également ajouter le nom du fichier à la fin du chemin. Par exemple, “C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg”
- Dans index.htmlremplacez votre balise d’image par une nouvelle image qui utilise le chemin absolu pointant vers le CuteBird.jpg fichier stocké sur votre ordinateur. N’oubliez pas d’ajouter le préfixe file:// pour indiquer une ressource de système de fichiers local. Sous Unix et macOS, vous pouvez ensuite ajouter le chemin absolu que vous avez identifié à l’étape précédente. Sous Windows, vous devrez remplacer les barres obliques inverses par des barres obliques et ajouter une barre oblique supplémentaire avant la lettre de lecteur, par exemple :
<img src="file:///C:/Users/Sharl/Desktop/Website/Images/CuteBird.jpg" alt="Cute bird photo" class="mb28" width="900" height="700">
- Clique sur le index.html fichier pour l’ouvrir dans un navigateur et afficher l’image stockée sur votre ordinateur.
Comment utiliser un chemin d’URL relatif
Une URL relative ne stocke qu’une partie de l’URL ou du chemin et est généralement relative à l’emplacement du fichier ou de la section actuelle d’un site Web.
Dans l’exemple ci-dessus, pour accéder à Logo.ico de index.html en utilisant une URL relative, vous utiliseriez le chemin “Images/Icons/Logo.ico”. D’autres exemples incluent:
- Pages/Oiseau1.html
- Images/CuteBird.jpg
- styles.css
Lorsque vous utilisez la même structure de dossiers sur un autre ordinateur, le site Web pourra toujours récupérer le fichier. Lors du routage sur le Web, au lieu d’utiliser le lien complet tel que “https://example.com/about”, vous pouvez utiliser le routage relatif à la place :
- /sur
- /Contactez
- /projets/clients-locaux
Vous pouvez utiliser une URL relative pour créer des liens ou des images de référence dans votre page Web HTML.
- À l’intérieur de la racine du répertoire de votre site Web, créez un nouveau dossier appelé pages.
- Dans le nouveau dossier Pages, créez un nouveau fichier appelé Oiseau1.html.
- Peupler Oiseau1.html avec le code HTML pour créer la page.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bird 1 </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<link rel="stylesheet" href="../styles.css" />
</head>
<body>
<div class="container">
<h1> Coffee </h1>
<p> Coffee is a sweet bird who loves to game! </p>
</div>
</body>
</html> - À l’intérieur du conteneur div, ajoutez une balise d’image et utilisez une URL relative pour créer un lien vers le CuteBird.jpg image.
<img src="../Images/CuteBird.jpg" alt="Cute bird photo" class="mb28" width="900" height="700"> - Dans le index.html fichier, supprimez le contenu existant à l’intérieur du conteneur div. Remplacez-le par un seul un balise qui utilise un lien relatif pour ouvrir le Oiseau1.html dossier.
<div class="container">
<h1> My Website </h1>
<p> Welcome to my website. </p>
<a href="Pages/Bird1.html" class="mb28">Bird 1: Coffee</a>
</div> - Clique sur le index.html fichier pour l’ouvrir dans un navigateur, puis cliquez sur le nouveau lien pour accéder à Oiseau1.html.
Accès aux fichiers à l’aide de liens URL absolus ou relatifs
Vous pouvez maintenant déterminer la différence entre les URL absolues et relatives. Vous pouvez maintenant prendre des précautions supplémentaires pour vous assurer que vos ressources sont toujours récupérées.
Vous devez également toujours vous assurer que tous les liens auxquels vos utilisateurs peuvent accéder sont sûrs et sécurisés.
— to news.google.com
Jeu de briques
Snake
Pacman
Bubble