Plan de la séance

  1. HTML : baliser le texte
  2. CSS : mettre en forme (mais pas que)
  3. Écrire du HTML sans écrire du HTML
  4. Les templates Pandoc

1. HTML : baliser le texte #

  • pourquoi des balises ?
  • quelle version de HTML ?
  • un format pérenne ?

<!doctype html>
<html lang="fr">
  <head>
	  <title>Ma page</title>
	</head>
	<body>
	<p>Du texte.</p>
</html>

1. HTML : baliser le texte

Exercice #

  • ouvrez un éditeur de texte (VSCode, Codium, Atom, Vim, etc.)
  • créez un fichier ma-page.html
  • renseignez un titre avec une balise <h1>
  • ajoutez quelques renseignements sur cette page dans une balise <details>
  • écrivez quelques lignes avec la balise <p>
  • enregistrez votre fichier puis ouvrez-le avec votre navigateur favori

2. CSS : mettre en forme (mais pas que) #

  • appliquer une mise en forme à partir d’une sémantique
  • des règles imbriquées
  • un langage de programmation

p {
  text-align: right;
}


<!doctype html>
<html lang="fr">
  <head>
	  <link rel="stylesheet" href="styles.css">
	  <title>Ma page</title>
	</head>
	<body>
	<p>Du texte.</p>
</html>

2. CSS : mettre en forme (mais pas que)

Exercice

  1. créez un fichier styles.css avec votre éditeur de texte que vous placez au même niveau que votre fichier HTML précédemment créé
  2. indiquez que la couleur de votre titre de niveau 1 doit être rouge avec la propriété color
  3. enregistrez votre fichier
  4. modifier votre fichier HTML précédent pour que la feuille CSS puisse être appelée
  5. affichez votre fichier HTML dans votre navigateur web préféré
## 3. Écrire du HTML sans écrire du HTML
  • écrire/maintenir du HTML : la fausse bonne idée
  • pour des documents simples : Markdown (+ YAML)
  • Pandoc et ses templates
## 4. Les templates Pandoc
  • le principe des templates
  • le système clé/valeur
  • des templates dans des templates

4. Les templates Pandoc

Utiliser un template Pandoc

  • afficher le template par défaut : pandoc -D html
  • les variables importantes :
    • $title$
      • $body$
  • pour appeler un template avec Pandoc : pandoc -f markdown -t HTML --template=mon-template.html mon-fichier.md -o mon-fichier-resultat.html

4. Les templates Pandoc

Exercice

  1. créez un fichier mon-template.html avec votre éditeur de texte
  2. reprenez la structure de votre fichier HTML précédent
  3. créez un fichier Markdown avec votre texte, pensez à ajouter un entête avec le titre de votre document
  4. indiquez les variables utiles dans votre template
  5. générez votre fichier HTML avec la commande précédemment présentée
  6. affichez cette page dans votre navigateur préféré

Débugue tes humanités