Objectifs
Savoir créer un site web composé de plusieurs fichiers HTML
Savoir intégrer dans une page HTML des liens vers d'autres pages et vers des images
Introduction
Durée : 45 minutes
Environnement de travail : éditeur HTML
Pré-requis : connaître les bases de la syntaxe HTML (html, head, body, p)
Site web
Un site web est composé d'un ensemble de pages HTML et de ressources (comme les images).
Un site web réside dans un dossier qui contient toutes les pages et ressources.
On trouve en général à la racine de ce dossier un fichier index.html qui est la première page visualisée par l'utilisateur.
On organise le reste du contenu dans des sous-dossiers.
Exemple :
./public_html/mon_site/
index.html
/img
nicecat.png
baddog.png
/html
animals.html
cats.html
dogs.html
contact.html
Images (img)
Définition :
Pour ajouter une image :
on dépose le fichier de cette image à côté de la page HTML au format PNG ou JPG ;
on ajoute une balise
<img>dans le fichier HTML qui fait référence au fichier ajouté.
Syntaxe :
<img src="nom_du_fichier" title="Titre de l'image">
Exemple :
Fichiers présents dans le dossier :
monfichier.htmlmonimage.png
<!DOCTYPE html><html lang="fr">
<head>
<title>Unlearned</title>
<meta charset="utf-8">
</head>
<body>
<h1>Mimi & Eunice : Unlearned</h1>
<img src="monimage.png" title="Unlearned"/>
<p>Source : mimiandeunice.com</p>
</body>
</html>
Exercice
Rendez vous sur la page : https://grisebouille.net/hexadecimal-et-boby-lapointe afin de récupérer l'image ci-après (clic droit, enregistrer l'image) :
tsq_017_hexadecimal_et_boby_lapointe.png.
Créez une page HTML contenant cette image, en oubliant pas d'intégrer un titre et de créditer l'auteur Gee et de rappeler la licence Creative Commons BY SA.
<!DOCTYPE html><html lang="fr">
<head>
<title>Une BD de Gee</title>
<meta charset="utf-8">
</head>
<body>
<h1>Hexadécimal et Boby Lapointe</h1>
<img src="tsq_017_hexadecimal_et_boby_lapointe.png" title="Unlearned"/>
<p>par Gee, licence CC BY-SA</p>
</body>
</html>
Hyperliens externes (a href)
Définition :
La balise a permet de déclarer un lien web entre la page au sein de laquelle elle est située et une autre page HTML ciblée par l'attribut href.
Syntaxe :
<a href="url_page_cible">Texte du lien</a>
Exemple : Lien externe vers une page du même serveur et du même dossier
<a href="page1.html">Ceci est un lien vers le fichier page1.html</a>
Exemple : Lien externe vers une page du même serveur et d'un autre dossier
<a href="dir2/page2.html">Ceci est un lien vers le fichier page2.html situé dans le dossier dir2</a>
Exemple : Lien externe vers un autre serveur
<a href="https://aswemay.fr">Ceci est un lien vers le site aswemay.fr</a>
Exemple : Lien externe vers une page d'un autre serveur
<a href="https://aswemay.fr/co/live.html">Ceci est un lien vers la page live.html situé dans le dossier co du site aswemay.fr</a>
Exercice
Soit les deux références bibliographiques ci-après :
ADEME. « Transition(s) 2050 - Synthèse : Choisir maintenant, agir pour le climat », 2022. https://librairie.ademe.fr/cadic/6529/transitions2050-synthese.pdf.
IPCC. « IPCC Sixth Assessment Report : Summary for Policymakers (Climate Change 2022: Impacts, Adaptation and Vulnerability) », 2022. https://www.ipcc.ch/report/ar6/wg2/.
Écrivez un fichier HTML mobilisant une liste pour afficher ces deux références. Ajoutez des liens rendre cliquables les deux URL. Ajoutez un titre "Bibliographie du changement climatique".
<!DOCTYPE html><html lang="fr">
<head>
<title>Bibliographie du changement climatique</title>
<meta charset="utf-8">
</head>
<body>
<h1> Bibliographie du changement climatique </h1>
<ol>
<li> ADEME. « Transition(s) 2050 - Synthèse : Choisir maintenant, agir pour le climat », 2022. https://librairie.ademe.fr/cadic/6529/transitions2050-synthese.pdf.</li>
<li> IPCC. « IPCC Sixth Assessment Report : Summary for Policymakers (Climate Change 2022: Impacts, Adaptation and Vulnerability) », 2022. https://www.ipcc.ch/report/ar6/wg2/. </li>
</ol>
</body>
</html>
Hyperliens internes (id)
Définition :
Toute balise HTML peut se voir doter d'un attribut id qui doit être unique dans la page.
Cet attribut permet de faire référence à l'élément HTML auquel il est associé.
Syntaxe :
<balise id='some_string'>...</balise>
Attention :
Un id ne doit pas contenir de blancs (espaces, tabulation...).
On évite les caractères non-ASCII (accents...).
On préfère des chaînes simples à retenir et à écrire, pour éviter les erreurs de saisie.
Méthode :
Il est possible d'utiliser la balise a pour créer un lien vers un autre élément de la même page identifié par un id : on utilise le caractère #.
Syntaxe :
<a href='#some_id'>...</a>
Exemple :
<!DOCTYPE html><html>
<body>
<p> ... </p>
<p> <a href='#b80d1380'> Ceci est un lien interne </a> vers le paragraphe d'id b80d1380. </p>
<p> ... </p>
<p id='b80d1380'> Ceci est le paragraphe d'id b80d1380. </p>
</body>
</html>
Méthode :
Il est possible de faire référence à un id situé sur une autre page du même serveur ou d'un autre serveur.
Exemple : Lien externe vers une ancre d'une autre page d'un autre serveur
<a href="https://aswemay.fr/co/040011.html#XtDyklUQCWh2Qb93bZsc6b">Plus de numérique, est-ce que ça rend plus heureux ?</a>
Exercice
Créez le fichier HTML suivant.
<!DOCTYPE html><html lang="fr">
<head>
<title>Lier</title>
<meta charset="utf-8">
</head>
<body>
<p> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. </p>
<p> La balise a permet de lier deux blocs d'une page entre eux. </p>
<p> In eleifend aliquet laoreet. Sed sed mi eu diam porta condimentum. Nam id ex urna. Aenean vitae purus sollicitudin, accumsan neque et, finibus purus. Duis a pulvinar erat. Sed eu ex at massa aliquam imperdiet quis eget ipsum. Maecenas tempus nisi id nisi fermentum, eget sodales nunc blandit. Aenean placerat semper augue, sit amet tincidunt nunc vestibulum ac. Aenean interdum sed elit at rutrum. Etiam venenatis massa urna, quis gravida mauris placerat non. Sed vulputate auctor urna in vestibulum. In porta consequat quam, auctor molestie justo vehicula at. Curabitur at rhoncus urna, at ultrices ipsum. Nulla vehicula ex eget enim imperdiet, sit amet tempus enim feugiat. </p>
<p> Nulla posuere vestibulum mauris. Phasellus tincidunt faucibus velit, nec cursus dui congue a. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vel porttitor velit. Phasellus non diam tellus. Etiam bibendum interdum tellus, sit amet rutrum metus iaculis non. Praesent condimentum eleifend eros quis commodo. Nam porta consequat ligula, sed feugiat libero pulvinar et. Duis a odio dapibus, tempor dolor sit amet, iaculis purus. Suspendisse scelerisque condimentum lacus, in elementum quam consequat a. Duis lectus ipsum, sagittis et arcu id, eleifend posuere nibh. Nulla facilisi. Nunc quis aliquet eros. Phasellus scelerisque lobortis auctor. </p>
<p> Lier : Attacher, fixer au moyen d'un lien. (TLFi) </p>
</body>
</html>
Faites en sorte que le premier lier situé dans le second paragraphe fasse un lien vers le second lier situé dans le dernier paragraphe.
<!DOCTYPE html><html lang="fr">
<head>
<title>Lier</title>
<meta charset="utf-8">
</head>
<body>
<p> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. </p>
<p> La balise a permet de <a href='#lier'> lier </a> deux blocs d'une page entre eux. </p>
<p> In eleifend aliquet laoreet. Sed sed mi eu diam porta condimentum. Nam id ex urna. Aenean vitae purus sollicitudin, accumsan neque et, finibus purus. Duis a pulvinar erat. Sed eu ex at massa aliquam imperdiet quis eget ipsum. Maecenas tempus nisi id nisi fermentum, eget sodales nunc blandit. Aenean placerat semper augue, sit amet tincidunt nunc vestibulum ac. Aenean interdum sed elit at rutrum. Etiam venenatis massa urna, quis gravida mauris placerat non. Sed vulputate auctor urna in vestibulum. In porta consequat quam, auctor molestie justo vehicula at. Curabitur at rhoncus urna, at ultrices ipsum. Nulla vehicula ex eget enim imperdiet, sit amet tempus enim feugiat. </p>
<p> Nulla posuere vestibulum mauris. Phasellus tincidunt faucibus velit, nec cursus dui congue a. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vel porttitor velit. Phasellus non diam tellus. Etiam bibendum interdum tellus, sit amet rutrum metus iaculis non. Praesent condimentum eleifend eros quis commodo. Nam porta consequat ligula, sed feugiat libero pulvinar et. Duis a odio dapibus, tempor dolor sit amet, iaculis purus. Suspendisse scelerisque condimentum lacus, in elementum quam consequat a. Duis lectus ipsum, sagittis et arcu id, eleifend posuere nibh. Nulla facilisi. Nunc quis aliquet eros. Phasellus scelerisque lobortis auctor. </p>
<p id='lier'> Lier : Attacher, fixer au moyen d'un lien. (TLFi) </p>
</body>
</html>