Les liens et les images
Le Web - SNT Seconde
Les liens et les images
Objectifs
- Comprendre la syntaxe HTML pour créer des liens hypertextes (balise <a>)
- Maîtriser l'insertion et la mise en forme basique d'images (balise <img>)
- Appliquer des chemins relatifs et absolus pour référencer des fichiers
Introduction
Imaginez créer votre propre page web pour présenter votre passion, un club ou un projet. Pour qu'elle soit utile et attrayante, elle doit permettre de naviguer vers d'autres ressources et d'intégrer des visuels. Aujourd'hui, nous allons apprendre à créer ces ponts (les liens) et à insérer des images, les deux piliers d'une page web interactive et esthétique.
Comment structurer et enrichir une page web en créant des liens hypertextes et en intégrant des images de manière efficace ?
Les liens hypertextes : la toile du Web
Un lien hypertexte (ou hyperlien) est un élément cliquable qui permet de passer d'une page web à une autre, ou à une autre ressource. C'est le principe fondateur du 'Web'. En HTML, on utilise la balise <a> (pour 'anchor' ou ancre). L'attribut principal est `href` (hypertext reference) qui contient l'URL de destination. Par exemple : <a href="https://www.education.gouv.fr">Site du Ministère</a> créera un lien vers ce site. On distingue deux types de chemins dans `href` : les chemins absolus (une adresse web complète commençant par http:// ou https://) et les chemins relatifs (un chemin depuis le fichier actuel, comme `../images/photo.jpg` ou `page2.html`). Les liens peuvent aussi cibler des sections précises d'une même page grâce à l'attribut `id`. Il est crucial de fournir un texte de lien clair et descriptif pour l'accessibilité.
Points clés
- Balise <a> avec attribut `href` pour définir la destination
- Distinction entre chemins absolus (URL complète) et relatifs (chemin local)
- Importance du texte du lien pour l'utilisateur et l'accessibilité
Les images : enrichir le contenu visuel
Les images rendent une page web attractive et illustrative. En HTML, on les insère avec la balise orpheline <img> (elle n'a pas de balise fermante). Deux attributs sont OBLIGATOIRES : `src` (source) qui indique le chemin vers le fichier image (comme pour `href`), et `alt` (texte alternatif) qui décrit l'image si elle ne peut s'afficher ou pour les lecteurs d'écran. Exemple : <img src="logo.png" alt="Logo du collège">. On peut aussi contrôler la taille avec les attributs `width` (largeur) et `height` (hauteur) en pixels, mais il est souvent préférable de le faire en CSS pour plus de flexibilité. Il est important d'utiliser des images aux formats adaptés au web (JPEG pour les photos, PNG pour les graphiques avec transparence, WebP moderne) et de bien les organiser dans un dossier (ex: /images) pour une arborescence propre du projet.
Points clés
- Balise <img> avec attributs obligatoires `src` et `alt`
- Le texte `alt` est crucial pour l'accessibilité et le référencement
- Utilisation de formats d'image adaptés (JPEG, PNG, WebP) et gestion de l'arborescence
Applications pratiques : créer une page à propos de soi
Mettons cela en pratique. Vous allez créer un dossier 'mon_site' contenant un fichier `index.html` et un sous-dossier `images`. Dans `index.html`, structurez une page simple avec un titre. Insérez une photo de vous ou d'un avatar (que vous placerez dans le dossier `images`) en utilisant un chemin relatif : `src="images/mon_avatar.jpg"`. Puis, créez deux liens. Le premier, un lien absolu vers le site de votre série préférée sur une plateforme de streaming. Le second, un lien relatif vers une autre page que vous créerez (`hobbies.html`) où vous présenterez vos passions. Sur la page `hobbies.html`, placez un lien pour revenir à la page d'accueil (`index.html`). Testez la navigation entre vos pages locales et le lien externe. Observez comment le navigateur interprète les chemins relatifs.
Points clés
- Organisation des fichiers dans une arborescence logique (dossier images)
- Utilisation conjointe de chemins relatifs pour les ressources locales et absolus pour les sites externes
- Création d'une navigation simple entre plusieurs pages HTML
À retenir
Les liens (<a href="...">) et les images (<img src="..." alt="...">) sont des éléments fondamentaux du HTML. Les liens permettent la navigation et créent la 'toile' du web, tandis que les images enrichissent visuellement le contenu. La maîtrise des chemins relatifs (pour les ressources du projet) et absolus (pour les ressources externes) est essentielle pour structurer un site web cohérent.
- Un lien se crée avec <a href="URL">texte</a> et une image avec <img src="chemin" alt="description">.
- Toujours remplir l'attribut `alt` des images pour une accessibilité numérique de base.
- Les chemins relatifs lient les fichiers de votre projet, les chemins absolus pointent vers d'autres sites web.
