<<
Exemple de HTML 
Exemple de HTML
Jeudi 8 octobre 2020, amphithéâtre Rouelle Atelier Structuration de données du Pôle Document numérique en contexte de recherche Séance inaugurale
1 Présentation
✤ pôle pluridisciplinaire et plateforme technique de la Maison de la recherche en sciences humaines (USR 3486 – CNRS / Université de Caen Normandie)
✤ conception, développement et mise en œuvre d’outils numériques et de méthodes de travail pour les programmes de recherche en sciences humaines et sociales
2 Principes
✤ approche centrée sur les données : document numérique comme outil et comme objet d’étude - permet de concentrer les efforts de veille et de recherche sur les modèles de données plutôt que sur les outils d’exploitation - facilite la production de solutions génériques pour la manipulation, l’observation et la consultation des documents - outils génériques ensuite adaptés à des problématiques scientifiques spécifiques ✤ distinction entre projets « applicatifs » et projets de « recherche » ✤ automatisation de la production des formes diffusées et des bases de connaissances ✤ respect des normes internationales (circulation des données et des outils) ✤ archivage à long terme
3 Science ouverte / FAIR DATA
4 Cycle de vie du texte
5 Méthodes et techniques (1)
✤ structuration de données scientifiques (XML – eXtensible Markup Language) (TEI – Text Encoding Initiative / EAD – Encoded Archival Description) - fabrication d’environnements de travail (XMLmind XML Editor) (développement et assemblage de modules) - développement de modules d’extension (travail collaboratif, connexion aux bases d’autorités, module de création d’environnements de travail)
✤ stockage de données scientifiques (BaseX : base de données native XML) - hébergement des données - interrogation, extraction et visualisation de données
✤ exploitation de données scientifiques - XPATH (accès), XQUERY (interrogation), XSLT (transformation)
✤ visualisation de données scientifiques - HTML – HyperText Markup Language / CSS – Cascading Style Sheets
6 Quelques projets…
7 Collaborations
BnF TGIR HumaNum IRHT
EnC CAHIER PUC CRAHAM CRDFED CITERES MASA ENS Lyon CRHQ GREYC MRSH Réseau MSH CERTIC IEJP LASLAR AEDRES MSH Sud-Est IMEC OpenEdition Identité et Subjectivité MSH Val-de-Loire BSN MAE NeDiMAH EHESS FMSH
8 eXtensible Markup Structuration de données Language (XML) en contexte de recherche
9 eXtensible Markup Language
✤ décrire les ressources numériques
✤ faciliter l’interprétation des données :
- définition des contenus et de leurs relations
- ajouter des connaissances à des éléments (annotations, informations complémentaires)
✤ automatiser les manipulations des données
10 eXtensible Markup Language
Utilisation de métadonnées
✤ données visant à définir ou à caractériser d’autres données pour les référencer et les manipuler
✤ « Les métadonnées sont des informations structurées qui décrivent, expliquent, localisent ou encore facilitent la découverte, l’utilisation ou la gestion d’une ressource d’information. »
NISO (National Information Standards Organization) Understanding metadata, 2004, ISBN: 1-880124-62-9 [http://www.niso.org/standards/resources/UnderstandingMetadata.pdf]
11 eXtensible Markup Language
Historique
✤ créé en 1998, s’impose aujourd’hui comme le format d’échange et de stockage ✤ principe : étiquetage systématique des éléments constitutifs d’un texte avec des balises de début (
12 eXtensible Markup Language
Pourquoi XML ? ✤ rapport optimal entre complexité de mise en œuvre et expressivité ✤ omniprésence - dans les outils de bureautique (.odt, .docx, etc.) - sur le web (xhtml, html5, etc.)
13 eXtensible Markup Language
Exemple de fichier XML bien formé (ou conforme)
...
14 eXtensible Markup Language
✤ objectif : définir des vocabulaires communs dans les communautés
✤ ensemble des balises utilisables pour un type ou une classe de document (thèses, CV, documentation technique, humanités, etc.)
✤ au moyen d’une DTD (Document Type Definition) ou d’un schéma XML
15 eXtensible Markup Language
Exemple de DTD : book.dtd
16 eXtensible Markup Language
Exemple de fichier XML valide et bien formé
18 Text Encoding Initiative Structuration de données (TEI) en contexte de recherche
19 Text Encoding Initiative
« The TEI is an international and interdisciplinary standard used by libraries, museums, publishers, and academics to represent all kinds of literary and linguistic texts, using an encoding scheme that is maximally expressive and minimally obsolescent. » (https://tei-c.org/).
20 Text Encoding Initiative
✤ La TEI est un ensemble de recommandations pour l’encodage des textes : « Its purpose is to provide guidelines for the creation and management in digital form of every type of data created and used by researchers in the Humanities, such as source texts, manuscripts, archival documents, ancient inscriptions, and many others. », Lou Burnard, « Introduction », What is the Text Encoding Initiative? How to add intelligent markup to digital resources, Marseille, OpenEdition Press, 2014. ✤ Créé en 1987 par 3 associations américaines : Association for Computers and the Humanities, Association for Computational Linguistics, Association for Literary and Linguistic Computing ✤ Évolution constante (Workgroups, Special Interest Groups, etc.) Maintenu par le consortium : http://www.tei-c.org ✤ Version actuelle : P5.
21 Text Encoding Initiative
La TEI propose une description des textes de sciences humaines (ou Humanités) selon des règles (syntaxe) et des concepts (sémantique) qui constituent le schéma.
❖ à plusieurs niveaux documentaires (préliminaires, corps, annexes mais aussi divisions, paragraphes, notes, citations, etc.) Elle aboutit à la production de grammaires de référence (DTD ou schémas) pour pouvoir décrire des caractères basiques et spécifiques des textes :
❖ en-tête du document (métadonnées)
❖ structure de texte par défaut
❖ ensembles de balises pour la prose, la poésie, le théâtre
❖ transcription des textes oraux
❖ dictionnaires et terminologie
❖ citations, appareil critique
❖ tables, formules, graphiques, liens, relations, etc.
22 Text Encoding Initiative
ACT I - SCENE I ACT I
SCENE I Enter Barnardo and Francisco, two Sentinels, at several doors Enter Barnardo and Francisco, two Sentinels, at several doors Barn Who's there? Fran Nay, answer me. Stand and unfold yourself. Barn Long live BARN : Long live the King! the King! Fran Barnardo? Barn He. Fran You come most carefully upon your hour. Barn Tis now struck twelve. Get thee to bed,Francisco.
23 Text Encoding Initiative
✤ La TEI crée donc un cadre pour encoder, en théorie, tout type de texte, appartenant à n’importe quelle période, en toute langue, etc.
✤ Ce qui se traduit par : - une grande généricité - une grande richesse expressive - mais aussi une très grande complexité (582 éléments)
✤ Complexe mais pas difficile à utiliser grâce à une architecture modulaire qui permet : - de choisir des ensembles d’éléments répondant aux besoins d’encodage d’un type particulier de texte - de définir des niveaux de précision selon les besoins du projet d’encodage
24 25 Text Encoding Initiative
✤ En-tête :
26 Text Encoding Initiative
En-tête (
Description bibliographique du fichier électronique (<fileDesc>) avec trois zones distinctes :
✤ Titre, auteur du fichier (
✤ Éditeur, lieu d’édition, date d’édition du fichier (
✤ Références bibliographiques des sources dont est dérivé le fichier (
Description des rapports entre un texte électronique et la ou les sources dont il dérive (
✤ Description du projet (
✤ Description des principes éditoriaux (
✤ Description quantitative du balisage (
✤ Description des révisions (
✤ Historique, nature et auteurs des révisions successives du document.
27 TEI
28 Text Encoding Initiative
Teach yourself TEI ! http://www.tei-c.org/support/learn/teach-yourself-tei/#tut-gen TEI By Example project : http://teibyexample.org/
29 Text Encoding Initiative
– Lou Burnard , « On the Hermeneutic Implications of Text Encoding », 1998 (http://users.ox.ac.uk/~lou/wip/herman.htm) – What is the Text Encoding Initiative ?, Marseille, OpenEdition Press, 2014 (http://books.openedition.org/oep/426?lang=fr)
30 Encoding Archival Structuration de données Description (EAD) en contexte de recherche
31 EAD : un vocabulaire XML
❖ Encoding Archival Description permet de structurer des descriptions de manuscrits ou de documents d’archives
❖ inspiré du modèle de la TEI
32 EAD : un vocabulaire XML
❖ pour décrire des fonds d’archives et des manuscrits
❖ pour créer des instruments de recherche en XML
❖ pour publier les instruments de recherche, les diffuser sur internet et les conserver
33 Utilisation de ce format
❖ recommandée par les Archives de France : https://francearchives.fr/fr/gerer
❖ recommandée par le ministère de la culture (et de la communication) et le ministère de l’enseignement supérieur et de la recherche pour le catalogage des manuscrits
34 Utilisation de ce format
❖ dans les services d’archives et dans les bibliothèques
❖ le CCFr manuscrits l’utilise pour les bibliothèques publiques et le réseau Calames pour les bibliothèques universitaires
❖ certaines bibliothèques exposent de l’EAD sur leurs sites propres
35 Encoding Archival Description
http://www.loc.gov/ead/
36 Un peu d’histoire
❖ projet de la bibliothèque universitaire de Californie, Berkeley en 1993
❖ choix initial du SGML
❖ première version diffusée en 1998 par la Society of American Archivists
❖ révision en septembre 2002 appelée EAD 2002
❖ depuis juin 2015 EAD 3, non utilisé en France
37 Un peu d’histoire
❖ Compatible avec la norme de description ISAD(G) : Norme générale et internationale de descriptions archivistiques
❖ Contrairement aux formats MARC, ce format permet, au-delà de la description générale d’un fonds ou d’une collection, de construire une description hiérarchisée restituant précisément l’imbrication des composants et sous-composants
38 Guide des bonnes pratiques
❖ https://www.ead-bibliotheque.fr/guide/ : rédigé par un groupe national de travail, piloté par le Service du livre et de la lecture du Ministère de la culture et de la communication et composé de représentants de la Bnf, du CCfr, des bibliothèque de lecture publique et du réseau Calames.
❖ https://www.ead-bibliotheque.fr/wp-content/uploads/2019/04/DeMArch.pdf : un groupe spécifique de l’Afnor a élaboré une recommandation définissant les règles relatives à la description des manuscrits et fonds d’archives modernes et contemporains en bibliothèque.
39 Éléments et attributs EAD
❖ 146 éléments
❖ 41 éléments génériques de texte et de mise en forme
- abbr / note / emph /…
❖ 23 éléments de métadonnées
- eadheader…
❖ 18 éléments de structure : parties liminaires, corps de l’inventaire
- archdesc / dsc / c /…
❖ 36 éléments d’informations spécifique : provenance, description physique…
- physloc / physdesc / physfacet /…
❖ 12 points d’accès (index)
- persname / subject / geogname /…
❖ 16 éléments de lien : liens internes et externes
- extref / ref / dao /… 40 Éléments et attributs EAD
❖ 116 attributs
❖ Des attributs EAD - role | label | normal | level | otherlevel | render | encodinganalog | …
❖ Des attributs de lien - associés au préfixe xlink:
❖ Quelques valeurs obligatoires - Enrichissements typographiques - Niveau de composant
41 Éléments obligatoires
<filedesc> Description de l’IR
42 Arborescence de l’EAD
43 Exemple de
Il s’agit d’un fonds dédié à l’ensemble de la famille Mauriac. Le premier ensemble s’articule autour des œuvres littéraires de François Mauriac, il contient : • des manuscrits et éditions remarquables d’œuvres majeures comme Claude, Le désert de l’amour, […]. ; • un journal intime écrit dans sa jeunesse. Le deuxième ensemble… Le fonds Mauriac commence en 1973 avec un don de Jeanne Mauriac, épouse de l’écrivain. Elle offre les manuscrits du discours que son mari a prononcé pour ses 80 ans, au Grand-Théâtre de Bordeaux en 1965 […]. Dans les années qui suivent, la famille Mauriac fait don à la Bibliothèque d’importants manuscrits littéraires et d’archives familiales […]. [Ce fonds] cohabite en Gironde avec un deuxième lieu de conservation, le Centre François Mauriac, sur la propriété familiale de Malagar devenue Maison d’écrivain. L'accès aux collections patrimoniales est soumis à une autorisation préalable. Toute publication de documents inédits doit être notifiée à l’établissement.
44 Stylage Structuration de données et traitement de texte en contexte de recherche
45 Comment produire de la donnée structurée ?!
❖ Données déjà en XML ❖ Saisie manuelle ❖ Stylage Stylage
❖ Logiciels : traitement de texte (Microsoft Word, Libre Office) ❖ Application de… styles ➡ Ensemble d’attributs/de caractéristiques de mise en forme (attributs typographiques) regroupés sous une même étiquette
★ Titre 1 (défini par défaut dans Word) : Calibri, 16pt, Couleur de police Accent 1, Espace avant 12pt, Paragraphes solidaires, Niveau 1… Intérêts…
❖ Dans un logiciel de traitement de texte…
‣ rapidité de la mise en forme ;
‣ homogénéité de la mise en forme ;
‣ efficacité de son application ;
‣ fonctions du logiciel (génération de table des matières par exemple) ;
❖ Dans une logique de structuration…
‣ un nettoyage du fichier ;
‣ un effort d’analyse de la donnée textuelle ;
‣ une pré-structuration efficace. Interface (MS Word) Interface (Libre Office) Styles
❖ de paragraphes ➡ positionnement du curseur dans le paragraphe (ou sélection de plusieurs paragraphes consécutifs) et application du style ➡ MS Word : contrôle en mode brouillon ❖ de caractères ➡ sélection de la chaîne de caractères et application du style
❖ styles Métopes* ❖ styles dits "de surcharge" Outils
❖ Modèles de stylage (.dotm) ❖ Guide de mise en forme ❖ Rechercher/Remplacer ❖ Macros de correction, de contrôle Procédure [technique] de conversion
Fichiers stylés, données de la recherche…
xslt
.fodt .xml
.docx, .doc, .odt La forme donnée au texte permet de caractériser les éléments qui constituent ce texte, de l’analyser au prisme d’une norme (Flat XML OpenDocument) et d’en déduire un prébalisage normé (TEI par exemple). Exploitation éditoriale (Métopes) Modèle de données
Fichiers stylés, données de la recherche…
.docx xslt xslt xslt
.xml .xml .xml .xml .doc
.odt
1 modèle de stylage => 1 modèle de données Exploitation recherche (1)
1 à n transformations XSLT Exploitation recherche(2)
.html
1 à n transformations XSLT
.indd Outils de conversion
❖ Série d’enregistrements et de transformations manuelle ❖ Script bash ❖ Environnement Métopes ❖ Vers des outils intégrés
- webservice
- application avec interface Aide en ligne
❖ Microsoft Word
- https://support.microsoft.com/fr-fr/office/appliquer-des-styles- f8b96097-4d25-4fac-8200-6139c8093109 ❖ Libre Office
- https://help.libreoffice.org/Writer/Styles_and_Formatting/fr ❖ Général
- https://openclassrooms.com/fr/courses/1438346-redigez- facilement-des-documents-avec-word/1440192-utilisation-des-styles Structuration de données XMLMind XMLEditor en contexte de recherche
60 XMLMind XMLEditor
Qu’est-ce qu’un éditeur XML ?
C’est un éditeur de langage à balises, avec des fonctionnalités ajoutées pour faciliter l’édition XML.
✤ menus et boutons pour les tâches courantes lors de l'édition XML ✤ sont basées sur les données fournies avec le schéma (ou la DTD) ✤ une partie de ces fonctionnalités est configurable
=> notion d’environnement
61 XMLMind XML Editor
❖ Dans le domaine de la recherche universitaire, on trouve 2 éditeurs XML majoritairement utilisés : Oxygen et XMLMind XMLEditor
❖ XML Mind XMLEditor : une version pro (payante) et une version perso (gratuite) téléchargeable à cette adresse : http://www.xmlmind.com/xmleditor/
❖ Le PDN recommande fortement la version 8 pour la version gratuite, et la version 9 pour la version payante d’XMLMind XML Editor
62 Vues latérales – accès à l’arborescence XML (gauche) et aux options de gestion des éléments et attributs (droite) 63 Vue centrale – espace d’annotation du chercheur. L’affichage est configurable selon les besoins (via CSS) 64 Des options de recherche avancée permettent de requêter la structure XML du document
65 XMLMind XML Editor
http://www.unicaen.fr/recherche/mrsh/document_numerique/outils
66 Structuration de données XPath, XSL, XQuery en contexte de recherche
67 XPath, XSL, XQuery
❖ un écosystème XML pour l’outillage - un langage de transformation XML : XSL - un langage de requêtage du XML : Xquery - un moyen de désigner les partie constitutives d’un document XML : XPath
68 Soit, par exemple, l’arbre généalogique (factice) de Jean, comte de St-Lô :
Jean (1250-1315) - comte de St-Lô [1265], comte de Coutances [1265] x Berthe (1255-1317) [1270] |-> Jean (1271-1316) - comte de St-Lô [1315] | x Mathilde (1273-1340) [1291] | |-> Pierre (1272-1345) - comte de Coutances [1315], comte de St-Lô [1316] | x Aude (1278-1300) [1294] | |-> Richard (1295-1299) | | x Anne (1284-1344) [1300] | |-> Jean (1301-1366) - comte de St-Lô [1345] | |-> Robert (1303-1362) - comte de Coutances [1345] | |-> Yves (1305-1373) - évêque d’Avranches [1338] | |-> Mathilde (1275-1330) x Roger (1260-1320) - comte de Bayeux [1270]
69
Langage grâce auquel on indique à un processeur le chemin qu’il doit suivre au sein d’une arborescence xml pour retrouver le(s) élément(s) qui nous intéresse(nt).
On peut s’en servir pour cibler des portions plus ou moins conséquentes de notre arbre selon nos besoins : sous-arbres entiers, éléments précis ou courts extraits de texte…
72 XPath
Un chemin est constitué de pas, c’est à dire autant d’étapes que nécessaire pour emmener le processeur exactement où on veut qu’il aille.
Chaque pas peut permettre de se promener dans l’arbre de façon très simple (« faire du sur place ») ou de façon très complexe (« sélectionner chaque deuxième enfant mâle d’un comte de Saint-Lô né après 1300 », par exemple).
73 Exemple 1 : un petit pas
"./nom"
(le "." représentant le point de départ de notre chemin, ici le comte Jean de Saint-Lô)
74 Exemple 2 : la femme du comte
"./conjoints/personne/nom"
75 Exemple 3 : quid de Pierre et ses 2 femmes ?
"./conjoints/personne/nom"
(ici le "." désigne Pierre, le fils puiné du comte)
76 Exemple 3 (suite) : seul son remariage m’intéresse
"./conjoints/personne[2]/nom"
Le "[2]" précise au processeur qu’il doit ignorer toutes les personnes sous la catégorie « conjoints", à l’exception de la deuxième occurrence. Si Pierre ne s’était marié qu’une fois, ce XPath ne mènerait nulle part : le processeur ne renverrait rien.
[1] [2]
77 Exemple 4 : des questions plus précises
« chaque deuxième enfant mâle né après 1300 d’un comte de Saint-Lô »
"personne[.//titre="Comte de Saint-Lô"]//enfants/ personne[@sex="M"][2][substring-before(dates, "-") > 1299]"
78 XQuery
Langage de requêtage de base de données associé à l’univers xml.
Associé à XPath, permet d’extraire, comparer, manipuler, ré-organiser, etc. les fragments pertinents d’une base de données xml.
79 Exemple 1 : lister les options possibles
Mettons par exemple qu’on veuille savoir quels titres et dignités circulent dans la famille du comte. On peut utiliser XQuery pour extraire de l’arbre toutes les valeurs possibles de l’élément "titre".
"for $i in distinct-values(//titre) return $i" renvoie : Comte de Saint-Lô Comte de Coutances Évêque d’Avranches Comte de Bayeux
80 Exemple 2 : créer un index plus complexe for $i in //titre group by $titre := $i let $titulaires := for $j in $i/ancestor::personne[1] return ($j/nom)||' ('||$j/dates)||') - Depuis :'||$j/titres/titre[.=$titre]/@from)) return ($titre, $titulaires)
renvoie :
Comte de Saint-Lô Jean (1250-1315) - Depuis : 1265 Jean (1271-1316) - Depuis : 1315 Pierre (1272-1345) - Depuis : 1316 Jean (1301-1366) - Depuis : 1345 Comte de Coutances Jean (1250-1315) - Depuis : 1265 Pierre (1272-1345) - Depuis : 1315 Robert (1303-1362) - Depuis : 1345 81 XSL-T
❖ eXtensible Stylesheet Language - Transformation ❖ feuilles de transformation du XML vers du XML ou un autre format : - XML -> XML (même vocabulaire ou autre vocabulaire) ; - XML -> txt | json | csv | html.
82 XSL : instructions
❖ élément racine :
83 XSL-T
❖ définit des règles de transformation qui permettent :
- de sélectionner des passages à extraire du document source, - de rajouter du texte, - d’utiliser le balisage du document source, ou de le modifier, - de manipuler le document source (filtrer, trier, décompter, réarranger).
84 utilité
❖ édition en XML-TEI => présentation du document comme une page web (HTML) ou un document à imprimer (PDF) ❖ base de données en XML-TEI ou XML-EAD - => calculs quantitatifs - => extractions de certaines données en tableur pour faire des graphiques - => exposition des données sous forme de page(s) web ❖ etc.
85 Exemple
86 Exemple
87 Exemple
88 Exemple
89 Structuration de données BaseX en contexte de recherche
90 BaseX
❖ Un système de gestion de base de données XML pour stocker, interroger et visualiser des documents XML ❖ Un logiciel open source et gratuit qui fonctionne sur toutes les plateformes ❖ Deux utilisations possibles : soit pour interroger directement les données grâce à son interface graphique, soit en mode client-serveur pour créer des sites internet grâce à MaX (notre moteur d’affichage XML)
91 L’interface graphique de BaseX
5
1 2
3
4
1. affichage des fichiers xml – 2. un éditeur pour écrire sa requête XQuery et qui permet de la sauvegarder – 3. une fenêtre avec le résultat de la requête – 4. une fenêtre avec les informations diverses liées à l'exécution de la requête – 5. un formulaire d’exécution de commande ou de requête 92 Deux cas d’utilisation
❖ Camille Frémont, docteure en sociologie, a utilisé BaseX dans le cadre de sa thèse « Mères lesbiennes en France : représentations du genre et pratiques de résistance à la domination ». ❖ Paul Maneuvrier-Hervieu, doctorant en histoire, a utilisé BaseX dans le cadre de sa thèse « La Normandie dans l’économie Atlantique au XVIIIe siècle ».
93 Exemple 1 : aider à l’analyse du discours
❖ Le travail de Camille est basé sur des entretiens longs et semi-directifs réalisés à partir de questions ouvertes. (36 entretiens de 1h30 à 3h, environ 1000 pages de discours) ❖ Utilisation de BaseX comme un outil d’aide à l’analyse du discours en recherche qualitative ❖ L’objectif est d’extraire des sous-corpus thématisés afin de comparer les discours de tous les entretiens ❖ Nécessité d’un retour au discours original, pour retrouver les raisonnements, les hésitations, les contradictions…
94 Titre 2
Titre 4
Titre 3
Stylage du texte 95 Ajout de thèmes sur des fragments de discours, avant de transformer le fichier au format XML
96 Création de la base de données XML et requête XQuery pour extraire les fragments de texte en fonction du thème voulu
97 Affichage du résultat dans un navigateur
98 Exemple 2 : interroger les données
❖ Le projet de thèse de Paul repose sur une enquête collective dirigée par Jean Nicolas et publiée en 2002, qui répertorie 8500 émeutes en France de 1661 à 1789 ❖ Enquête complétée par Paul avec des données collectées sur les émeutes de subsistance en Normandie de 1709 à 1817 ❖ Son objectif est de comprendre ce qui pouvait déclencher toutes ces émeutes, et comment elles se diffusaient dans le temps et dans l’espace ❖ Dans le cadre de ses travaux, il a ainsi constitué trois bases : l’une sur les émeutes avec 909 émeutes de subsistance en Normandie, une autre répertoriant 1028 cahiers de doléances, et enfin une base qui recense les jours de marchés en Normandie
99 Transformation des tableaux Excel en fichiers XML, création de la base de données et rédaction d’une requête XQuery qui permet de croiser le fichier sur les émeutes et celui sur les jours de marché.
100 Structuration de données HTML et CSS en contexte de recherche
101 Les langages HTML et CSS
❖ HTML (HyperText Markup Language), langage informatique pour créer des pages web ❖ C’est un système de balises pour mettre en forme du texte, des images, des tableaux, des liens hypertextes… ❖ CSS (Cascading Style Sheets) ou feuilles de style, permet de gérer l'apparence de la page web (positionnement, couleurs, police, etc.)
102 Du code HTML
Ceci est un titre
Ceci est une phrase avec un hyperlienCeci est un paragraphe. Suivi d’une balise image.
Mon fichier html « exemple.html »
Affichage dans le navigateur 103 Avec une css
Ceci est un titre
Ceci est une phrase avec un hyperlienCeci est un paragraphe. Suivi d’une balise image.
h1 { color:red; text-align:center; font-family: "Gill Sans Extrabold", sans- serif; } Mon fichier html « exemple.html » a { color:green; } p { margin-left:20px; } Mon fichier css « screen.css » img { width:60%; border:5px solid #000; margin-left:20px; 104 } Quelques dates…
❖ Le HTML est inspiré du SGML (Standard Generalized Markup Language), standard créé dans les années 60 et utilisé pour gérer une documentation complexe ❖ Il a été inventé par Tim Berners-Lee au tout début des années 1990, pour écrire des pages web, afin que n’importe qui, de n’importe où, puisse accéder à des ressources de façon gratuite et libre ❖ Premiers éléments étaient le titre du document, les hyperliens, la structuration du texte en titres, sous-titres, listes et texte brut ❖ 1993 : invention de la balise et des formulaires ❖ Peu à peu séparation du fond de la forme notamment grâce aux CSS qui ont été externalisées
105 ❖ La dernière version majeure de HTML est le HTML5, qui propose de nouveaux éléments comme les balises
106 ❖ Dans le cadre des ateliers des doctorants et jeunes chercheurs, nous pouvons travailler sur une version électronique des résultats de vos recherches. On construit avec vous une version HTML pour un affichage sur un navigateur ❖ Cette version électronique peut s’accompagner d’une version imprimable grâce à une CSS dédiée
107 Séances de l’Atelier à venir…
108