Débugue tes humanités Saison 3a
Séance 01 - Les langages de balisage
De Markdown à HTML et XML. Le balisage sémantique.
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. — roch.delannay@umontreal.ca ; giulia.ferretti@umontreal.ca ; louis-olivier.brassard@umontreal.ca
Bienvenue ! #
Tour d’écrans
Qu’est-ce que un langage de balisage ?
Les formats de balisage sémantique
Lire, éditer et convertir
Créer une page web, du markdown vers HTML
Pour cette première séance nous vous proposons de découvrir les enjeux de cette formation ainsi que les différentes séances au programme.
1. Tour d’écrans en 3 questions #
votre nom
ce que vous faites cette année
le projet ou l’initiative numérique qui vous intéresse en ce moment
2. Qu’est-ce que un langage de balisage ? #
Le traitement numérique du texte #
Avec l’utilisation des logiciels de bureautique, on observe une confusion entre structure et mise en forme
Deux paradigmes pour les éditeurs de texte:
WYSIWYG What You See Is What You Get
WYSIWYM What You See Is What You Mean
La structure sémantique permet de :
se repérer dans le texte
automatiser le traitement
Exercice #
Baliser le texte d’un article avec du markdown
Lien vers l’article : ici
Lien vers le texte brut à baliser : ici
identifier le titre, sous-titre
référence (plus compliqué)
titre en italique
citation
Markdown #
créé en 2004
langage léger
lisible par les humains
Les balises de Markdown #
niveaux de titre, paragraphe, citation longue, listes
texte en gras, soulignée, italique
lien, image, tableau
commentaire
HTML #
Hypertext Markup Language
créé en 1993
conçu pour les liens entre les documents (hyperlinks )
cinquième version (en 2008), s’adapte à l’évolution du Web
Tableau d’équivalence avec Markdown
Les balises HTML #
<html>
<head>
<meta charset="utf-8">
<title>Titre dans l'onglet</title>
</head>
<body>
<h1>Titre</h1>
<p>Ceci contient un paragraphe.</p>
</body>
<html>
Pour consulter le code source (HTML) de l’article Sens Public : view-source: + https://www.sens-public.org/articles/1600/ dans le navigateur
XML #
Extensible Markup Language
crée en 1998
conçu pour la structuration stricte de données
l+es informations sont validées par des schémas
Démo sur Oxygen, un éditeur de texte pour XML
4. Lire, éditer et convertir #
Les lecteurs de textes balisés #
Tous ces formats sont des fichiers .txt “augmentés” par des balises
Un navigateur est capable de lire tous ces formats:
Avec toujours la possibilité d’afficher uniquement le texte brut (code source)
Les éditeurs #
éditeurs de fichiers txt : Notepad ou textEdit
éditeurs de code : Atom, VS Code ou VS Codium
coloration syntaxique
terminal, git
éditeurs de markdown : Zettlr, Typora, HedgeDoc
fonctionnalités plus avancées et interface ergonomique pour l’écriture
export vers d’autres formats
éditeurs XML
permet la validation des schéma
autocomplétion et vue auteur
La conversion entre langages de balisage #
Niveaux de langage : MD < HTML < XML
de gauche à droite : on maintient l’information et il faut généralement ajouter des balises
de la droite vers la gauche : il est probable de perdre de l’information
Des logiciels permettent de convertir automatiquement les contenus, comme Pandoc par exemple. Certains sont intégrés dans les éditeurs.
5. Créer une page Web, du markdown vers HTML #
Installation :
Atelier #
Écrire un contenu en .md sur HedgeDoc
L’exporter en HTML
L’ouvrir et l’éditer dans VS Code
Lancer LiveServer pour une prévisualisation instantanée
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. — roch.delannay@umontreal.ca ; giulia.ferretti@umontreal.ca ; louis-olivier.brassard@umontreal.ca