Débugue tes humanités Saison 2
Séance 08 - Fabriquer des pages web
Introduction à HTML et CSS, conversions à partir de Markdown avec Pandoc.
Chaire de recherche du Canada sur les écritures numériques, Bibliothèque des lettres et des sciences humaines, Ouvroir d'histoire de l'art et de muséologie numérique. — antoine.fauchie@umontreal.ca
Plan de la séance #
HTML : baliser le texte
CSS : mettre en forme (mais pas que)
Écrire du HTML sans écrire du HTML
Les templates Pandoc
Cette séance est dédiée à la découverte du langage HTML.
Attention, il s’agit d’une courte introduction qui permet de comprendre comment créer une page HTML, et non d’une formation exhaustive sur la question qui mériterait plusieurs jours.
1. HTML : baliser le texte #
pourquoi des balises ?
quelle version de HTML ?
un format pérenne ?
Les langages de balisage sont anciens, HTML dérive du format SGML et permet de structurer l’information pour qu’elle puisse être interprétée par un navigateur web.
C’est un langage de balisage non léger , contrairement à Markdown qui lui est léger, car les balises sont nombreuses et ne permettent pas une lecture fluide par les humains.
Il y a eu plusieurs version successives de HTML, et notamment des versions XHTML qui héritaient des propriétés XML.
La version actuelle de HTML est HTML5, un standard très permissif qui accepte les erreurs.
À noter qu’un document HTML doit toujours avoir un DOCTYPE permettant d’indiquer le format utilisé, exemple avec une page HTML au format HTML5 :
<!doctype html>
<html lang="fr">
<head>
<title>Ma page</title>
</head>
<body>
<p>Du texte.</p>
</body>
</html>
Il y a quelques règles à respecter pour écrire en HTML :
les balises sont déterminées pas le standard, il n’est pas possible de personnaliser les balises ;
les balises sont imbriquées, elles ne doivent se chevaucher, exemple de ce qu’il ne faut pas faire : <p><em>du texte</p></em>.
Un document HTML peut contenir un entête, c’est-à-dire une partie qui décrit la page et qui peut par exemple permettre d’indiquer un certain nombre de métadonnées.
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
appliquer une mise en forme à partir d’une sémantique
des règles imbriquées
un langage de programmation
Le langage CSS est aussi ancien que HTML, CSS signifie Cascading Style Sheets ou feuilles de style en cascade.
L’objectif est de pouvoir attribuer une mise en forme à des éléments HTML.
Ces deux langages sont donc pensés pour aller ensemble.
Il s’agit de la séparation structure et mise en forme, fond et affichage graphique, même si dans les faits CSS permet de faire bien d’autres choses.
En terme de principe, le développement de CSS est très intéressant : ce langage est développé par niveaux, et chaque nouveau niveau doit intégrer le précédent.
Ainsi, chaque nouvelle version doit prendre en compte la précédente, c’est ce qu’on appelle la rétrocompatibilité.
Si il n’y a aucun doute que HTML est un langage de programmation (si vous doutez vous pouvez découvrir cette vidéo ,
Concrètement un fichier CSS ressemble à cela :
p {
text-align: right;
}
Chaque élément est décrit selon des propriétés définies dans le standard CSS.
Il est aussi possible de créer des attributs (et leur valeur) dans le langage HTML, de spécifier des propriétés CSS sur ces attributs.
La feuille style peut soit être intégrée dans le fichier HTML à l’intérieur d’une balise <style>p { text-align: right;}</style> ou via un fichier appelé ainsi :
<!doctype html>
<html lang="fr">
<head>
<link rel="stylesheet" href="styles.css">
<title>Ma page</title>
</head>
<body>
<p>Du texte.</p>
</html>
Ici le fichier styles.css doit être placé dans le même dossier que le fichier HTML.
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é
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 :
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é
La commande Pandoc :pandoc -f markdown -t HTML --template=mon-template.html mon-fichier.md -o mon-fichier-resultat.html