
# Exercice: Machiavel

Votre mission est de transférer le contenu d'un document PDF vers une page Web.

![Machiavel](images/machiavel_256.webp)

1. Créer le site `machiavel` dans votre espace de travail sur le disque D:
   1. Créer un dossier nommé `machiavel`
   2. Ouvrir le dossier `machiavel` dans _VSCode_.
   3. Créer l'arborescence du site :
      1. Dans _VSCode_, ajouter un dossier nommé `images` (au pluriel).
      2. Ajouter un dossier nommé `css`.
      3. Ajouter un fichier nommé `index.html`.
   4. Télécharger les fichiers : <a href="css/style.css" target="_blank" download>`📥︎ style.css`</a> et <a href="images/machiavel_256.webp" target="_blank" download>`📥︎ images/machiavel_256.webp`</a> les placer dans les bons dossiers.
   5. Ajouter le code d'une page vierge :
      1. S'assurer que l'extension du fichier est bien `.html`.
      2. Taper le texte : `!` puis appuyer sur la touche tabulation ` ↹ ` qui se trouve à gauche de la touche ` Q `.
      4. Changer `lang="en"` pour `lang="fr"`
      5. Mettre le titre "**Machiavel**" dans l'élément title.
      6. Ajouter la ligne de code suivante dans le `<head>` pour lier la feuille de style CSS : 
			```html
			<link rel="stylesheet" href="css/style.css">
			```
2. Récupérer le fichier de travail : [`📥︎ machiavel.pdf`](machiavel.pdf). S'assurer de le sauvegarder dans le dossier du site.
3. Ouvrir le document `machiavel.pdf` en double-cliquant sur le fichier et l'analyser un peu
   - Repérer les différents niveaux de titre
   - Repérer les paragraphes standards
   - Repérer les paragraphes spéciaux
   - Repérer les portions de texte particulières
4. Copier le contenu textuel provenant du PDF et le coller dans le `<body>` de la page HTML.
5. Faire le découpage sémantique du contenu de la page. C'est à dire, ajouter les balises nécessaires pour donner un sens au contenu sans se soucier de la mise en forme. Faire attention à l'indentation des balises.
6. Pour conclure, ajouter au début du `<body>` l'image de Machiavel:
   1. Ajouter une balise `<figure>`.
   2. Dans la balise `<figure>`, ajouter une balise `<img>` et une balise `<figcaption>`.
   3. Dans la balise `<img>`, ajouter les attributs `src` et `alt` :
	  - `src` : le chemin relatif vers l'image (le fichier `images/machiavel_256.webp`)
	  - `alt` : une description textuelle de l'image (exemple : "Portrait de Machiavel réalisé après sa mort")
   4. Dans la balise `<figcaption>`, ajouter le texte : "Portrait de Machiavel réalisé après sa mort"
7. Sauvegarder le fichier `index.html`.
