Premières pages

Environnement de travail

Si ce n'est pas déjà le cas, préparez votre environnement de travail, en suivant les instructions de la partie Utilisation du TP précédent.

Première page web

Comme pour le précédent site web, nous allons d'abord créer une page pour chacun des personnages de votre site web, avant de créer la page d'accueil, et enfin de personnaliser l'apparence.

1. Dans le dossier content, créez deux sous-dossiers blog et pages.
2. Dans ce dossier blog, créez un fichier au nom du premier personnage de votre site web, d'extension .md (par exemple theano.md pour Theano)).

3. Adaptez le texte suivant dans votre fichier :

   title: Théano
   
   Théano est une mathématicienne de l'antiquité.
   

   La première partie du fichier contient les métadonnées (des informations à propos de la page). Seul le titre est obligatoire. Vous pouvez aussi utiliser :

   • date: 2018-11-30 : la date de publication ;
   • slug: theano : un court texte (quelques mots, voir un seul, séparés par des tirets) utilisé dans l'URL de votre article ;
   • summary: Mathématicienne de l'antiquité. : un résumé de l'article (dans un TP ultérieur, c'est ce résumé qui apparaîtra sur la page d'accueil de votre site web, pour inviter le lecteur à lire l'article pour en savoir davantage) ;
   • authors: louis : la liste des auteurs de l'article, séparés par des virgules ;
   • tags: math, antiquité : une liste d'étiquettes, utilisées pour classer votre article.

   La seconde partie est l'article en lui-même, c'est-à-dire le texte qui apparaîtra à l'écran, au format Markdown (qui sera décrit dans la partie suivante). À ce stade, laissez une simple phrase : cette partie sera complétée dans la suite de ce TP.

4. Générez à nouveau votre site web (commande pelican dans le terminal). Rechargez la page de votre navigateur : votre article doit apparaître.

5. Avec le navigateur de fichier, regardez le contenu du dossier output : il doit contenir un ensemble de fichiers HTML. Ce sont les fichiers qui ont été générés à partir de vos fichiers markdown. Ouvrez output/index.html avec votre éditeur de texte pour voir le code HTML produit.

D'autres pages

1. Créez une seconde page web (toujours dans le dossier content/blog) pour votre second personnage.
2. Dans le dossier content/pages, créez une page apropos.md qui ait comme titre Mentions légales, et comme contenu vos coordonnées (réelles ou fictives, puisque dans ce TP, ce site web ne sera pas publié).

Mise en forme

Le langage Markdown est « un langage de balisage léger [dont le but est] d'offrir une syntaxe facile à lire et à écrire »¹.

Recréer les pages des personnages de votre précédent site web (celui réalisé dans le TP précédent) avec cette nouvelle méthode, en utilisant les éléments de mise en forme suivants.

Paragraphes

Un paragraphe est simplement du texte compris entre deux sauts de ligne.

Ceci est un paragraphe.

Ceci est un autre paragraphe.

Titres

Les titres sont précédés de #, pour marquer leur profondeur.

# Titre principal

## Sous-titre

### Sous-sous-titre

Un paragraphe.

## Un autre sous-titre

Un autre paragraphe.

Emphase

Entourez les mots ou groupe de mots importants avec des *, ** (ou _ et __) :

• *Ce mot* est en italique.
• **Celui-ci** est en gras.
• ~~Celui-là~~ est barré.

Listes

Les listes sont des suites de lignes commençant par * ou - (pour les listes non numérotées), ou 0. (pour les listes numérotées).

Une liste non numérotée :

- Un élément.
- Un autre élément

Une liste numérotée :

0. Un premier élément.
32. Le deuxième.
7. Remarquez que les numéros n'ont aucune importance : les éléments seront finalement correctement numérotés.

Liens

La syntaxe générale pour les liens est [texte affiché](adresse). Cela donne :

• lien externe : [Wikipédia](http://fr.wikipedia.org) crée un lien vers Wikipédia ;
• lien interne : [Hypatie]({filename}/blog/hypatie.md) crée un lien vers la page générée par le fichier blog/hypatie.md.

Images

Insérer une image se fait avec la syntaxe ![Titre de l'image](Nom du fichier), par exemple ![Hypatie]({attach}/blog/hypatie.jpg) pour insérer comme une image le fichier content/blog/hypatie.jpg.

Tableau

Les tableaux sont représentés en utilisant les caractères | et -.

|           | Théano             | Hypatie            |
|-----------|--------------------|--------------------|
| Époque    | 4ᵉ siècle avant JC | 4ᵉ siècle après JC |
| Naissance | Crotone            | Alexandrie         |

Le code précédent produit ce tableau :

Évaluation

Complétez la fiche d'évaluation, copiez votre travail (intégralité du répertoire de travail) dans le dossier partagé, rendez-moi la fiche d'évaluation, et passez au TP suivant.