Les liens hypertextes en HTML HTML01

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.

Définition :
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 ;
  • Un titre de niveau 2 ;
  • Un paragraphe ;
  • Un titre de niveau 2 ;
  • Un paragraphe.

À l’intérieur du premier paragraphe, ajoutez trois liens hypertextes pointant vers les trois sites web suivant :

Ajoutez un titre sur les trois liens hypertextes avec l’attribut title.

Sous quelle forme s’affichent les titres ?

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/

Pour chacun des liens hypertextes, ajoutez un attribut permettant de les ouvrir dans un nouvel onglet.

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

Pour chacune des lignes de la liste insérez un lien hypertexte permettant d’afficher la page correspondante.

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.

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 ».

Téléchargez une image sur Internet et placez-la dans votre dossier racine en la renommant correctement.

Attention
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 la renommant correctement.

Insérez un lien hypertexte sur chacun des deux paragraphes vers le fichier correspondant.

Ajoutez les attributs adaptés pour compléter les deux liens hypertextes.

Correction de l’exercice

Vous pouvez télécharger la correction de l’exercice ci-dessous :

Cela peut vous intéresser :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.