Cet exercice concerne principalement les liens hypertextes, mais d’autres balises seront évidemment nécessaire pour effectuer l’exercice.
Avant de commencer l’exercice
Il est conseillé d’utiliser du texte de type Lorem Ipsum pour avoir du contenu textuel lors de la réalisation de cette exercice.
Le faux-texte (également appelé lorem ipsum, lipsum) est, en imprimerie, un texte sans valeur sémantique, permettant de remplir des pages lors d’une mise en forme afin d’en calibrer le contenu en l’absence du texte définitif.
Source : Article Faux-texte de Wikipédia en français, http://fr.wikipedia.org/wiki/Faux-texte
Consignes de l’exercice
Créez un dossier racine, à l’emplacement de votre choix, pour stocker la totalité des fichiers créés lors de l’exercice et nommez-le htm01-racine.
Créez une nouvelle page HTML sous le nom exo1_page1.html en prenant soin de bien placer votre fichier dans le dossier racine créé précédemment.
Saisissez la structure de base suivante dans la page que vous venez de créer :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
</head>
<body>
</body>
</html>Complétez la page HTML exo1_page1.html avec le contenu suivant :
- Un titre de niveau 1 :
<h1></h1>; - Un titre de niveau 2 ;
- Un paragraphe ;
- Un titre de niveau 2 ;
- Un paragraphe.
À l’intérieur du premier paragraphe, ajoutez trois liens hypertextes sur des portions de texte de votre choix pointant vers les trois sites web suivant :
La commande à utiliser est <a></a> à laquelle vous devez ajouter l’attribut href (référence hypertextuelle).
<a href="https://developer.mozilla.org/fr/">MDN Webdocs</a>
Ajoutez un titre sur les trois liens hypertextes en utilisant l’attribut title. Sous quelle forme s’affichent les attributs title dans le navigateur ?
La syntaxe générique d’un balise html est :
<commande attribut="valeur" attribut2="valeur2"></commande>
Vous avez déjà créé des liens sous la forme suivante :
<a href="http://www.site.com">du texte</a>
Dans cet exemple, a correspond à commande, href à attribut et http://www.site.com à valeur. En respectant le modèle, vous devez donc ajouter une seconde option.
<a href="http://www.site.com" title="Titre du lien">du texte</a>
Les attributs title s’affichent sous la forme d’étiquette au survol de la souris :
Ce qui donne donc la chose suivante pour l’exercice :
Ajoutez un lien hypertexte englobant le second titre de niveau 2 ainsi que la totalité du second paragraphe pointant vers le site https://openclassrooms.com/fr/
<a href="https://openclassrooms.com/fr/">
<h2>Sous-partie 2</h2>
<p>Nullam sollicitudin nisl vel nisi lacinia.</p>
</a>Notez que si HTML permet de mettre un lien hypertexte sur n’importe quel élément HTML, il est plutôt recommandé de placer les liens sur un texte ou une image.
Pour chacun des liens hypertextes, ajoutez un attribut permettant de les ouvrir dans un nouvel onglet.
Si vous souhaitez apprendre à coder en HTML, il va falloir apprendre à retrouver l’information par vous-même. Pour cela, il suffira d’utiliser un moteur de recherche.
Créez trois nouvelles pages HTML exo1_page2.html, exo1_page3.html et exo1_page4.html dans le dossier racine avec le contenu suivant :
- Un titre de niveau 1 différent pour chaque page.
Sur la page exo1_page2.html, ajoutez une liste à puce identique à la liste suivante en dessus du titre de niveau 1 :
- Page 2
- Page 3
- Page 4
<ul>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>Pour chacune des lignes de la liste insérez un lien hypertexte permettant d’afficher la page correspondante.
Même si cela peut paraître bizarre au premier abord, c’est normal qu’un lien pointe vers la page sur laquelle l’on se trouve. Même si le lien ne sert à rien à ce moment là, c’est très souvent le cas. Sur la plupart des pages accueil de sites web, vous avez un lien qui pointe vers l’accueil du site (la même page donc). Si ce lien n’est pas très utile, cela permet d’avoir un menu cohérent et identique sur toutes les pages du site.
Quand vous serez sur la page 2, vous aurez donc un site qui vous renvoie vers la page 2…
<ul>
<li><a href="exo1_page2.html">Page 2</a></li>
<li><a href="exo1_page3.html">Page 3</a></li>
<li><a href="exo1_page4.html">Page 4</a></li>
</ul>Copiez/collez la liste à puce sur les deux autres pages exo1_page3.html et exo1_page4.html. Ce menu vous permet donc de naviguer simplement entre les trois pages.
Créez le dossier pages dans le dossier racine.
Déplacez la page exo1_page4.html dans le dossier pages.
Le menu de navigation ne fonctionne donc plus correctement pour naviguer entre les trois pages. Corrigez donc le problème.
En fonction du fichier sur lequel vous vous trouvez, les changements seront différents. Le menu présent sur les pages exo1_page2.html et exo1_page3.html sera donc différent du menu présent sur la page exo1_page4.html.
Pour rappel, dans la syntaxe d’une adresse relative, il est nécessaire de saisir nom-du-dossier/ pour ouvrir un dossier et ../ pour sortir d’un dossier.
Voici la solution pour les fichiers exo1_page2.html et exo1_page3.html :
<ul>
<li><a href="exo1_page2.html">Page 2</a></li>
<li><a href="exo1_page3.html">Page 3</a></li>
<li><a href="pages/exo1_page4.html">Page 4</a></li>
</ul>Téléchargez une image sur Internet et placez-la dans votre dossier racine en la renommant correctement.
Les noms des fichiers ne doivent pas contenir d’espaces, de majuscules, de caractères accentués ou de caractères spéciaux !
Téléchargez n’importe quel document .pdf sur Internet et placez-le dans votre dossier racine en le renommant correctement au préalable.
Pour rechercher un fichier par format, sur Google, Bing ou Duckduckgo, vous pouvez utiliser la commande filetype.
Vous pouvez donc saisir le texte de recherche suivant : filetype:pdf
Dans la capture suivante nous cherchons des fichiers pdf qui parlent de HTML.
Créez une nouvelle page HTML exo1_page5.html dans le dossier racine avec le contenu suivant :
- Un titre de niveau 1 ;
- un paragraphe contenant le texte « lien vers une image » ;
- un paragraphe contenant le texte « lien vers un document pdf ».
Insérez un lien hypertexte sur chacun des deux paragraphes vers le fichier correspondant.
<p><a href="image.jpg">lien vers une image</a></p> <p><a href="document.pdf">lien vers un document pdf</a></p>
Ajoutez les attributs adaptés pour compléter les deux liens hypertextes.
Pour ce type de lien (qui pointe vers des fichiers image et pdf), il peut être pertinent d’ajouter un attribut target pour ouvrir les fichiers dans un nouvel onglet. Vous pouvez également en profiter pour ajouter des attributs title à vos liens.
Sauf mention contraire*, l'article Les liens hypertextes en HTML [HTML01] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons
Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.