Débugue tes humanités
Séance 08 - Fabriquer des pages web
Plan de la séance
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
- 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éé - indiquez que la couleur de votre titre de niveau 1 doit être rouge avec la propriété
color
- enregistrez votre fichier
- modifier votre fichier HTML précédent pour que la feuille CSS puisse être appelée
- affichez votre fichier HTML dans votre navigateur web préféré
- écrire/maintenir du HTML : la fausse bonne idée
- pour des documents simples : Markdown (+ YAML)
- Pandoc et ses templates
- 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
- créez un fichier
mon-template.html
avec votre éditeur de texte - reprenez la structure de votre fichier HTML précédent
- créez un fichier Markdown avec votre texte, pensez à ajouter un entête avec le titre de votre document
- indiquez les variables utiles dans votre template
- générez votre fichier HTML avec la commande précédemment présentée
- affichez cette page dans votre navigateur préféré
Débugue tes humanités
CC BY-SA Chaire de recherche du Canada sur les écritures numériques — antoine.fauchie@umontreal.ca