GÉNÉRALITÉS

Définitions

Un fichier informatique est un ensemble de données constitué d’une séquence de bits, soit une séquence de 0 et de 1. La convention pour stocker les données dans un fichier détermine le format de celui-ci.

(Source : Bibliothèque et archives nationales du Québec)

Le format désigne la nature d’un fichier informatique et permet d’identifier le type de
logiciels nécessaire à sa lecture. Chaque fichier porte une extension généralement en
trois lettres qui indique le type de format. Exemple : titre_fichier.pdf. Plus
précisément, un format est un ensemble de règles formelles qui définissent comment
structurer, donner forme à quelque chose.

(Source : Xyoos)

Format et langage

Attention à la confusion entre format et langage informatique. Si le format est un ensemble de règles formelles, le langage est un format mis en œuvre par l’écriture. Les règles formelles sont traduites en règles d’écriture.
Exemple : On peut mettre un texte au format html et l’écrire en langage html. Mais tous les formats ne sont pas associés à un langage. Le format TEXT (.txt) existe ; toutefois, il n’y a pas de langage TEXT.

(Source : Arthur Perret, Cours sur le format texte)

Format et logiciel

Un logiciel est un ensemble de programmes informatiques couplés à une interface qui permet d’interagir facilement avec le logiciel. On attribue aux logiciels une licence d’utilisation qui peut être plus ou moins ouverte.
Un programme informatique est une suite d’instructions que la machine exécute. Il a deux caractéristiques :

• des étapes : à chaque instruction il est possible de connaître l’instruction suivante.
• une fin : la dernière instruction demande l’arrêt du programme.

Logiciel et format sont très liés. Le but du format est de structurer des informations avec des spécifications techniques pour que des machines, des programmes ou des logiciels puissent dialoguer.
De plus, certains logiciels sont créés pour lire un type de format. C’est le cas de Microsoft Word qui est programmé pour produire et ne lire que des fichiers au format .doc.
D’autres logiciels, plus ouverts, peuvent produire et/ou lire plusieurs types de format (par exemple, le logiciel VLC pour les formats audio et vidéo).

Typologie des formats

• Format ouvert : Sa description est publique. Aucune disposition légale ne s’oppose à sa libre utilisation. Il est interopérable : possibilité d’utiliser plusieurs logiciels pour le créer, le lire, le modifier.Il peut être normalisé par un organisme de normalisation comme ISO, AFNOR, W3C.
• Format fermé : Sa description est secrète ou des dispositions légales peuvent en restreindre l’utilisation. Il est souvent associé à un seul logiciel.
• Format propriétaire : Ses spécifications techniques appartiennent à l’entreprise qui l’a créé. Il peut être ouvert ou fermé.
• Format standard : Format dont la grande popularité le rend standard. Mais il n’est pas normalisé.
• Format conteneur : Il contient et fait fonctionner ensemble plusieurs types de données. Exemple : données audio + données vidéo + données sous-titre dans un conteneur vidéo comme MP4 ou MOV.

Le format idéal

Il est :

• Ouvert
• Normalisé (si possible)
• Facile à transformer (migration)
• Indépendant (vis-à-vis d’autres formats, d’un matériel particulier, d’une entreprise)
• Compatible (avec de nombreux logiciels et systèmes d’exploitation)
• Largement diffusé

Le poids du fichier

Le bit est l’unité de mesure minimale en informatique. Il ne peut exprimer que deux valeurs (0 ou 1).
Il est notamment utilisé pour exprimer la vitesse de connexion à l’internet (bps).

L’octet (1 octet = 8 bits). C’est l’unité mesurant la taille ou le poids d’un fichier informatique. Sa mission : stocker un caractère (chiffre, lettre, symbole,…).
Unité de petite taille, plus souvent exprimée en Ko, Mo, Go.

Conversion des unités de mesures :

• Kilooctet (Ko) = 1000 octets
• Mégaoctet (Mo) = 1000 Ko
• Gigaoctet (Go) = 1000 Mo
• Teraoctet (To) = 1000 Go
• Petaoctet (Po) = 1000 To
• Exaoctet (Eo) = 1000 Po
• Zettaoctet (Zo) = 1000 Eo
• Yottaoctet (Yo) = 1000 Zo

Capacité de stockage moyenne des appareils :

• ordinateur : de 500 Go à 4 To
• clé USB : de 8 à 200 Go
• disquette : 1,4 Mo

Poids moyen des types de fichier

• fichier texte : 50 Ko
• fichier audio : 4 Mo
• fichier image : 6 Mo
• fichier vidéo : 700 Mo

Quelques questions à se poser en matière de format

• Quelles données vais-je utiliser pendant ma recherche ?
• Quels formats de fichiers puis-je utiliser ?
• Quels logiciels vais-je employer pour traiter/analyser mes données ?
• Quels formats d’entrée ces logiciels acceptent-ils ?
• Comment vais-je stocker mes données pendant la recherche ?
• Sur quel appareil (disque dur, serveur de l’université, cloud, etc…) ?
• Quelle est la capacité de stockage de cet appareil ?
• Que vais-je faire de mes données à la fin de ma recherche ?
• Comment vais-je les archiver ?
• Sur quel support/entrepôt : personnel, institutionnel ?
• Quels formats de fichier sont acceptés sur ces supports, ces entrepôts ?

Sources & ressources

FORMATS AUDIO, VIDÉO & IMAGES

Formats audio

Le critère de qualité audio est le débit à la seconde ou kbit/s.
Il se calcule en fonction de la résolution : 16 bits, 24 bits, 32 bits, etc. et de la fréquence d’échantillonnage : 44,1 kHz
Plus ces chiffres sont élévés, plus la qualité est bonne mais pas forcément perceptible par l’oreille humaine.
Comparaison avec la qualité CD : 16 bits, 44,1kHz.
Attention : l’enregistrement d’origine détermine la qualité de l’audio.

Codec : permet d’encoder (compression) et de décoder (décompression) des flux audio => Contenu. Exemples de codecs : Vorbis, FLAC, ALAC, AC3, OPUS, AAC, WMA, ATRAC.
Format conteneur : permet de stocker des flux audio (ou vidéo) => Boîte. Exemple de formats conteneurs : WAV/WAVE, AIFF, OGG, ASF, CAF, AU.

La combinaison d’un codec et d’un format conteneur donne un format audio.
Parfois codec et conteneur portent le même nom (FLAC).

• Format sans compression :
• PCM (= CD)
• Formats de compression sans perte (lossless) – même qualité sonore que le CD :
• FLAC (ouvert)
• ALAC (Apple)
• Shorten
• WMA Lossless
• ATRAC Advanced & lossless
• Formats de compression avec perte (lossy), irréversibles :
• MP3
• AAC (Apple)
• WMA
• OGG VOBIS (ouvert)
• OPUS
• AA
• ATRAC
• AC-3

Ex : le format conteneur WAV peut contenir des flux MP3, etc. Le plus souvent, il contient de l’audio sans réduction de données (PCM).
Convertir un format MP3 en format WAV n’améliore pas la qualité sonore.

Formats vidéo

• Codecs : permet d’encoder (compression) et de décoder (décompression) des flux audio et vidéo => contenu. Exemples de codecs : M-JPEG, AVCHD, DNXHD, H.264/H.265, OGG Theora, ProRes.
• Formats Conteneur : permet de stocker des flux audio, vidéo, des sous-titres, des métadonnées => boîte. L’extension du fichier indique le conteneur (ex : .mov). Exemples de formats conteneurs : MP4, AVI, MOV, MXF, 3DP, 3G2, MTS/M2TS/TS Matroska.

La combinaison d’un codec et d’un format conteneur donne un format vidéo.
ex. : MP4 H.264 ou Mov ProRes.

Il existe deux types de formats de compression vidéo :

• Formats de compression IntRA-trame
• Compressent les images individuellement.
• Souvent de meilleure qualité
• Formats orientés production
• => Codecs utilisés : M-JPEG, ProRes, DNxHD/DNxHR
• Formats de compression intER-trame
• Stockent certaines images entièrement et en compressent d’autres.
• Donnent des fichiers plus petits
• Formats orientés diffusion
• => Codecs utilisés : H.262, H.264, H.265, OGG Theroa, MPEG-2

Formats images

Définition : une image numérique c’est une image acquise, créée, traitée ou stockée sous forme binaire.

• acquise par des machines telles que : scanner, appareil photo, caméscope numérique
• créée par des programmes informatiques
• traitée par des outils informatiques (modifications de taille, couleur, ajout ou suppression d’éléments, de filtre).
• stockée sur un support informatique (disque dur, clé USB, serveur, etc.)
• L’image peut être numérisée ou nativement numérique.
• Il y a deux types d’images numériques : les images matricielles et les images vectorielles.

Image matricielle.
Elle est composée d’une grille dont chaque case ou pixel a une couleur propre. Plus il y de pixels, plus la qualité est bonne.

• Les + : haute définition des couleurs et de la luminosité, chaque pixel peut être retouché.
• Les – : perte de qualité en cas d’écrasement ou d’étirement de l’image, la compression peut causer une perte de qualité, taille de fichier plus élevée, vectorisation difficile.
• Les formats : TIFF, JPG, JPEG, PNG, BMP, MNG, TGA, OpenEXR, FITS

Image vectorielle. C’est une image numérique composée de formes géométriques individuelles, chacune définie par des attributs de couleur, taille, position.

• Les + : possibilité d’écraser ou d’étirer l’image sans perte de qualité, compression sans perte, taille de fichier plus faible, possibilité de retouche sur-mesure, facile à convertir en image matricielle (rastérisation).
• Les – : pas adaptée aux images complexes ou en haute définition, l’enregistrement nécessite une rastérisation.
• Les formats : SVG, VML, SWF, AI, EPS, DXF, CDR, WMF, Silverlight.

Arrêt sur l’IIIF – International Image Interoperability Framework.

Il s’agit d’une communauté et d’un ensemble de spécifications techniques visant à créer un cadre technique d’interopérabilité pour la diffusion d’images haute résolution sur le Web.
Depuis plusieurs années, les bibliothèques numériques se multiplient. Elles mettent à disposition sur le Web une masse de plus en plus importante de reproductions (manuscrits, imprimés, cartes, documents d’archives, photographies, etc.). Toutefois, la création de ces entrepôts d’images s’est effectuée sans véritable coordination technique. Il en résulte que :

• chaque entrepôts fonctionne en silo, il n’y a pas d’interopérabilité.
• chaque institution a développé son propre visualiseur ce qui est coûteux à concevoir et à maintenir et rend chaque application unique.
• l’utilisateur doit donc s’adapter à chaque application, à son environnement et son interface de consultation propre.

Face à ce constat, le IIIF entend favoriser l’interopérabilité des bibliothèques numériques, et ainsi enrichir et faciliter l’expérience utilisateur en terme de visualisation et de manipulation des images.
Exemples d’usages permis par le cadre technique d’IIIF :

• Annoter une carte numérisée disponible sur un site web, mais à l’aide d’un outil d’annotation développé sur un autre site web.
• Créer une collection d’images issues de plusieurs sources
• Inspecter et comparer les mains de manuscrits issus de différents entrepôts numériques.

l’IIIF développe des API partagées. Elle les implémente dans des logiciels. Elle expose des contenus interopérables sur le web.
Il existe 4 API IIIF stables :

• API Image. Elle spécifie une syntaxe qui s’applique à deux requête pour une même image : la requête de l’image elle-même (fichier image) ; la requête d’informations techniques sur l’image (fichier JSON)
• API Presentation. Elle spécifie les informations nécessaires à la présentation d’un objet numérique dans une interface de visualisation. Son but est d’améliorer l’expérience utilisateur. Elle joint la structure et les métadonnées à un objet et définit comment elles apparaissent dans un visualiseur
• API “content search”. Elle spécifie la manière dont se fait la recherche au sein du contenu textuel associé à un document numérique représenté selon les principe de l’API Presentation (dans la transcription ou l’OCR du texte par exemple).
• API Authentification. Elle définit à quel endroit ou par qui les images peuvent être vues. Elle définit des scenarii d’interaction entre un client et des systèmes d’authentification.

LES FORMATS TEXTES

Le format texte ou texte brut ou plaintext

Un fichier au format texte (.txt) ne contient que des caractères textuels (par opposition aux pixels et aux sons).
C’est un méta-format utilisable pour créer des fichiers dans toutes sortes de formats plus spécifiques comme les formats html, markdown, xml, ou TeX.
Un fichier au format texte ne contient pas de mise en forme, ni de mise en page. On ne peut choisir ni la police de caractère, ni la taille, ni la couleur. On ne peut pas gérer les interlignes, les sauts de pages, les marges, etc.
Ce format peut servir à écrire du texte scientifique mais aussi des programmes informatiques.
Il fonctionne avec un type de logiciel, l’éditeur de texte (Notepad ++ ou TextEdit).
Un caractère peut être une lettre, un chiffre, un signe de ponctuation, un symbole, etc.

Arrêt sur l’encodage

Les caractères sont traduits/encodés en octets. L’éditeur de texte décode ces octets pour afficher les caractères correspondants. Cette encodage peut prendre plusieurs formes.
Le codage ASCII : le premier et le plus basique, établi à partir de l’anglais, il ne comprend que 128 caractères.
Il ne permet pas de coder les caractères accentués ni les autres alphabets et systèmes d’écritures.
Pour cela, on utilise le codage UTF-8 qui code tous les caractères Unicode (des milliers) et qui inclut le codage ASCII.
En ouvrant une page web, si on tombe sur ce genre de chose “caractères “, ça signifie qu’il y a un problème de codage. La page est encodée avec un type de codage et notre navigateur essaie de la décoder en suivant un autre type de codage.
Quand on utilise un éditeur de texte, privilégier l’UTF-8.
Bon à savoir : Comme l’ASCII est le plus largement partagé, quand on nomme un fichier, il faut éviter les espaces, les caractères spéciaux et accentués.

Le format texte enrichi

A l’inverse du texte brut, le format texte enrichi contient la mise en page et la mise en forme. Ce type de format s’obtient en utilisant un logiciel de traitement de texte, du type Word ou OpenOffice Writer (.doc, .odt, .docx). Ces types de formats ont été conçus pour une utilisation bureautique. Ils sont moins adaptés à l’écriture scientifique et de plus en plus critiqués par les chercheurs.

Les principales critiques :

• conviennent peu à l’écriture scientifique
• inadaptés à la communication sur le web
• certains formats sont propriétaires (.doc.)
• Ils sont plus lourds que le format TEXT (.txt)
• Risque pour l’usager de confondre rendu graphique et structure du texte => la structure à un sens ; le niveau des titres témoigne du processus de raisonnement.

WYSIWYG : What you see is what you get. Logiciels dont l’interface donne à voir à l’écran le document tel qu’il sera publié. Les traitements de texte sont des WYSIWYG.

Arrêt sur le format PDF

Le PDF “Portable Document Format” est un format de diffusion. Il permet la lecture d’un fichier texte en préservant sa mise en page et sa mise en forme quel que soit le logiciel ou le système d’exploitation. Format normalisé, il est très utilisé pour la transmission et l’archivage des documents.
Le PDF peut être créé à partir d’un éditeur de texte ou d’un traitement de texte. Dans ce cas, il est nativement numérique. Il peut également être créé à partir de l’image numérisée d’un texte. Dans ce cas, il y a deux sortes de PDF :

• Le PDF qui correspond à la simple image numérisée. Dans ce cas, il est impossible de sélectionner une partie du texte numérisé.
• Le PDF dont l’image numérisée a reçu un traitement de reconnaissance de caractères (OCR). Autrement dit, on ajoute une couche de texte à l’image numérisée. Dans ce cas, il est possible de sélectionner un extrait du texte.

Plaidoyer en faveur du texte brut

• Léger en termes de stockage
• Format libre, utilisable avec des logiciels libres
• Garantit une certaine pérennité
• Interopérable
• Adapté à la gestion des versions
• Permet de se concentrer sur la structure du texte

SOURCES ET RESSOURCES

Généralités :

Les ressources institutionnelles françaises :

• CINES : Centre informatique national de l’enseignement supérieur
  Plateforme d’archivage de l’enseignement supérieur. Il fournit un tableau des formats acceptés et un outil de vérification de l’éligibilité des fichiers à l’archivage.
  Le site,
  la page de l’outil FACILE.
• Le rapport technique produit par la BnF sur les formats à privilégier dans une optique d’archivage et de pérennité :
  Caron (Bertrand), Formats de données pour la préservation à long terme : la politique de la BnF, Rapport technique, Paris, BnF, 2021.
  Site,
  document.
• Rapport définissant 9 critères d’évaluation des formats dans une optique de préservation à long terme. Il présente aussi les politiques de plusieurs institutions en matière de formats (BnF, British Library, Library of Congress, etc.) :
  Caron (Bertrand), Humbert (Marion), Jolly (Anne-Flora), et al., Définir une politique de formats : les neuf critères essentiels, Rapport de recherche, Association Aristote, 2020.
  Lien
• Référentiel général d’interopérabilité produit par le site numérique.gouv.fr donne des informations sur les formats permettant l’interopérabilité. Il a été officialisé par arrêté en avril 2016.
  Page dédiée,
  document.
• Tableau produit par Doranum (réseau Urfist + Inist-CNRS) distinguant les formats ouverts et les formats fermés de tous les types de fichiers : audio, vidéo, image, texte, tableau, présentation, archivage, etc.
  Lien

Les ressources institutionnelles étrangères :

• BanQ (Bibliothèque et archives nationales du Québec) a publié un guide de recommandation des formats à utiliser qui date de 2020.
  Lien
• CECO : le Centre suisse de coordination pour l’archivage à long terme des documents électroniques décrit les différents types de formats et fournit des recommandations sur les formats à adopter.
  Lien
• La présentation très complète et détaillée des différents formats de fichiers de la bibliothèque du Congrès.
  Lien
• Et son guide des formats recommandés.
  Lien
• OASIS, Organization for the Advancement of Structured Information Standards : institution centrée sur la normalisation des formats de fichiers.
  Lien
• PRONOM : Ressource en ligne produite par les archives nationales du Royaume-Uni. Elle fournit un registre d’informations techniques sur les formats de fichier, les logiciels qui les lisent et les produisent. Possibilité de faire une recherche par format ou par logiciel.
  Lien

Sitographie

• Arthur Perret, Cours sur le format texte. Lien
• File-extensions : catalogue de toutes les extensions de fichiers existantes et leur description. Les extensions sont classées en plusieurs catégories. Pour chaque extentions, les logiciels permettant leur lecture, création, modification, etc. sont indiqués.
  Lien
• Pin Format : groupe national de travail et de réflexion sur les formats de fichier affilié à l’association Aristote. Il réunit des institutions telles que le CINES, la BnF, l’INA et des ministères (Culture, Armée, Europe et Affaires étrangères).
  Lien
• Le manuel de préservation numérique du groupe Pin Format qui définit les questions à se poser en matière de choix de format.
  Lien
• Un wiki consacré aux formats de fichier.
  Lien
• Xyoos

Format audio, vidéo et image :

• Caron (Bertand), Formats de données pour la préservation à long terme : la politique de la BnF. [rapport technique],
  BnF, 2021, p. 29.
  Lien
• Tardieu (Julien), Prise de son en SHS, Tutoriel MATE-SHS, 20 décembre 2018.
  Lien
• Pour comprendre rapidement la différence entre signal analogique et signal numérique : Espace des Sciences, Interview de Michel Cabaret, France Bleu Armorique.
  Lien
• Pour une initiation aux formats d’images, voir le site du Lycée Blaise Pascal de Clermont-Ferrand.
  Lien
• Pour plus d’informations, consulter les ressources du module “formats de fichier – généralités”.
• Pour plus d’information sur le IIIF voir la page documentation de Biblissima.
  Lien

Format texte:

• Arthur Perret, Cours sur le format texte.
  Lien
• Ensemble de cours sur l’écriture et la publication numérique en SHS de la Chaire de
  recherche du Canada sur les écritures numériques.
  Lien
• Pour une approche plus détaillée de l’encodage, voir la présentation de Christian Queinnec.
  Lien
• Pour une approche critique du format PDF, voir le billet d’Arthur Perret.
  Lien
• BU de l’Université de Montréal, Vidéo de présentation des formats.
  Lien

synthèse rédigée par Pauline Leplongeon, mise en ligne par Stella Mulas, stagiaires sur le projet EVEille en 2022 et 2023

Internet vs Web

Internet est antérieur au web, il s’agit de l’infrastructure et du réseau matériel de télécommunication qui relie des ordinateurs, des réseaux entre eux et qui permet le transfert de données. L’Internet utilise des câbles, notamment sous-marins, pour effectuer ces opérations de transfert.
Internet est le support de plusieurs services dont le web, les messageries électroniques, ou encore le FTP (pour échanger des fichiers entre ordinateurs). Aujourd’hui, beaucoup de ces services utilisent le web ce qui explique pourquoi on a tendance à confondre web et internet.
Toutefois, il existe encore des usages d’internet qui n’utilisent pas le web. Par exemple, les données du SUDOC (les notices bibliographiques des documents) qui sont transférées aux logiciels de gestion des bibliothèques, et ensuite visibles sur leur catalogue en ligne ne passent pas par le web.

Le web

Le web a été créé entre en 1989 et 1991 par Tim Berners-Lee avec l’aide de Robert Cailliau au Conseil européen pour la recherche nucléaire (CERN). Il s’est servi des technologies existantes : internet, les ordinateurs et les liens hypertextes. Il invente le navigateur, un logiciel permettant de naviguer au sein d’une collection de documents, des pages, reliées entre elles par des liens hypertextes.

W3C

En 1994, Tim Berners-Lee créé le Word Wide Web Consortium ou W3C qui se donne pour mission de structurer et de suivre l’évolution du web de façon à ce qu’il reste un outil libre, unique, utilisable par tous. Il produit notamment des recommandations sur l’évolution des langages web. Ainsi le html est un langage standardisé maintenu et développé par le W3C (voir ci-après pour plus de précisions sur le html).

Comment fonctionne le web ? Client, serveur et site

Le web fonctionne sur un système de clients et de serveurs.
Le client est l’ordinateur de l’utilisateur. Il est connecté à un internet et utilise un logiciel d’accès au web autrement dit, un navigateur (comme Firefox, Safari, Google Chrome).
Le serveur est un ordinateur qui stocke un site web ou des données brutes.
Un site web est lui-même composé de pages web. Concrètement un site web est un ensemble de fichiers qu’on peut classer en deux catégories :

• les fichiers de code c’est-à-dire les fichiers écrits en html, css et autres langages, chaque fichier html correspond à une page web.
• les fichiers ressources comme un fichier image, un fichier son ou vidéo, un fichier PDF qui apparaissent sur les pages web.

Quand un client accède à une page web, une copie de la page est en fait téléchargée depuis le serveur et envoyée au client dont le navigateur affiche la page dans une version lisible par l’humain.

Adresse web, URL et adresse IP

Chaque page web a une adresse web ou URL qui permet de la localiser. Cette URL est une suite de caractères alphanumérique facilement lisible par l’oeil humain. ELle correspond en fait à une adresse IP qui prend la forme d’une suite de chiffres. Les correspondances entre les URL et les adresse IP sont stockées dans des serveurs spéciaux, les DNS (Domain Name System). Ainsi, quand l’utilisateur saisit une adresse ou URl dans un navigateur, celui-ci va chercher l’adresse IP correspondante dans une DNS. Puis, il envoie une requête HTTP au serveur qui stocke la page, de façon à en obtenir une copie.

Le protocole HTTP/HTTPS

HTTP signifie : Hypertext Transfer Protocol. C’est un protocole de communication entre client et serveur. Il a été inventé par Tim Bernes-Lee.
HTTPS est la version sécurisée du protocole HTTP. Il garantit la confidentialité des données envoyées par l’utilisateur et lui permet d’authentifier un site. HTTPS est très utilisé aujourd’hui, notamment pour accéder aux sites marchands et bancaires.
Dans le protocole HTTP, différentes méthodes existent pour préciser des types de requêtes différents qui sont envoyées au serveur. Ce dernier exécute alors la requête.
Voici quelques méthodes :

• GET sert à demander à récupérer une ressource (page, données)
• HEAD sert à récupérer uniquement les métadonnées de la ressource (notamment ce qui se trouve dans le header d’une page html. voir ci-après).
• POST sert à transmettre des données à une ressource pour un traitement. Cela peut signifier la création ou la modification de ressources.
• PUT sert à ajouter ou remplacer une ressources sur un serveur.
• PATCH sert à modifier partiellement une ressource
• DELETE sert à supprimer une ressources

(Source : Wikipédia, Hypertext Transfer Protocol)

Navigateur vs moteur de recherche

Attention à ne pas confondre navigateur et moteur de recherche.
“un navigateur est un logiciel qui affiche des pages web, alors qu’un moteur de recherche est un site web qui aide les utilisateurs à trouver les pages web d’autres sites web.”
On utilise un navigateur pour accéder à un moteur de recherche.
La confusion entre les deux notions tient au fait qu’en ouvrant un navigateur web, on accède souvent directement à la page d’accueil d’un moteur de recherche.
Exemple de moteur de recherche :

• Les classiques : Google, Bing,
• Les engagés : Ecosia, Lilo,
• Les protecteurs de données personnelles : Startpage, Duckduckgo, Qwant

(Source : Mdn Web Doc, Quelle différence entre une page web, un site web, un serveur web et une moteur de recherche ?)

Les langages de balisage

Ils servent à annoter du texte brut avec des informations qui sont lisibles autant par les machines que par les humains. Les annotations sont contenues dans des balises et donnent des informations sur la structure du texte brut autrement dit, sur la structure du contenu. Les balises sont interprétées par un programme informatique.
Il existe plusieurs langages de balisage : le html, le xml, le CSS, le LaTeX, la TEI, le Markdown.

Le HTML

Langage de balisage du web. Toutes les pages web sont écrites en html ce qui permet l’interopérabilité du documents présents sur le web. Une page web est contenu dans un fichier .html.
Il existe un nombre limité de balises, et ce langage est maintenu par le W3C qui décide d’intégrer de nouvelles balises.
Le html se caractérise par un système de balises ouvrantes et de balises fermantes (sauf exception comme <br/> pour le saut de ligne).
Exemple :
<h1>contenu titre</h1>.

Structure html d’une page web :
<html> <head> </head> <body> </body> </html>.

La balise <html> </html> est la balise racine qui encadre toutes les autres.

Entre les balises <head> </head> se trouvent les métadonnées qui ne s’affichent pas sur la page que lit l’internaute. Les métadonnées y sont contenues entre des balises plus spécifiques pour déterminer l’encodage, le titre de l’onglet, etc.

Entre les balises <body> </body> se situe tout ce qui est affiché sur la page web.

Cette structure est obligatoire et se retrouve sur toutes les pages web de tous les sites.
Les balises peuvent donc s’imbriquer les unes dans les autres. Une balise qui contient une autre balise est dite “parente”, la balise imbriquée est dite “enfant” ou “descendante”. Cette imbrication peut avoir des conséquences notamment lors de l’application du CSS (voir ci-après).

La structuration des balises.
Une balise peut être dotée d’un attribut, et l’attribut être doté d’une valeur.
balise + attribut + valeur de l’attribut :
<balise attribut="valeurdelattribut">.
Exemple :
<h1 class="black">, qui signifie que la balise h1 qui détermine un titre de niveau 1 (le plus gros) a un attribut de type “class” qui a lui même une valeur, “black”.
Attention, l’attribut est toujours ajoutée dans la balise ouvrante, jamais dans la balise fermante.

Les principales balises html :

• balises paragraphe :
  <p> contenu </p>.
• balise saut de ligne :
  <br/>.
• balises titre de la page (il y a 6 niveaux de titre, du h1 au h6) :
  <h1> contenu </h1>.
• balises pour mettre en gras son contenu :
  <strong> contenu </strong>.
• balises pour mettre en italique son contenu :
  <em> contenu </em>.
• balises pour faire des listes ordonnées ou numérotées :
  <ol> <li> </li> <li> </li> <li> </li> </ol>.
• balises pour faire des listes non ordonnées :
  <ul> <li> </li> <li> </li> <li> </li> </ul>.
• balise pour insérer une image. C’est une balise autofermante :
  <image/>.
  Il faut lui ajouter un attribut de type “src” et mettre le lien vers le fichier image :
  <image src="nom-du-fichier-image.jpg" />.
• balises pour insérer un lien hypertexte :
  <a> contenu avec un lien hypertexte </a>.
  Comme pour la balise image, il faut lui ajouter un attribut et sa valeur qui correspond à l’url du liens qu’on veut indiquer :
  <a href="https://www.siteavoir.com">Pour aller plus loin</a>.
  La chaîne de caractère “Pour aller plus loin” apparaîtra sur la page web avec un lien hypertexte renvoyant au site indiqué au sein de la balise.
• Il existe des balises génériques :
  <span> </span>
<div> </div>.
  Elles n’ont pas de signification sémantique à l’inverse de “h1” qui indique un titre, “p” qui indique un paragraphe, etc. Elles sont utilisées pour mettre en forme le contenu qu’elles encadrent grâce à des attributs qui seront repris dans un CSS (voir ci-après).

Ces attributs sont :

• class : renvoie au nom de la classe CSS à employer.
• id : donne un nom à la balise et permet de l’identifier. Il faut que ce nom soit unique sur la page.
• style : sert à indiquer directement le code CSS qu’on veut appliquer. Cet attribue n’est pas conseillé.

Ces attributs peuvent être utilisés dans d’autres balises et pas seulement dans “span” et “div”.

Le CSS – Cascading Style Sheet

Langage de mise en forme du contenu html maintenu par le W3C.
Sans entrer dans les détails de la mise en relation d’un fichier html avec une feuille de style css (qui intervient dans la balise <head> du fichier html), il s’agit ici de se concentrer sur les principes moteurs du css : les sélecteurs, les propriétés et les valeurs.

• Le sélecteur : c’est l’élément html sur lequel on souhaite appliquer un style.
  Par exemple, si on souhaite appliquer un style aux paragraphes, on choisit l’intitulé de la balise html du paragraphe, “p”. Si on souhaite appliquer un style aux titre de niveau 2, on prendra comme sélecteur “h2”.
  Après le sélecteur, on ajoute des accolades {} qui contiendront les propriétés et les valeurs.
  Ex : p {}.
• Les propriétés : elles indiquent quel aspect de l’élément html on souhaite mettre en forme : la taille, la couleur, la police, etc. La propriété est directement suivie d’un “deux-points” sans espace.
  Ex : css p { color: } .

On ne peut pas créer de propriété, elles sont prédéfinies, il faut donc les connaître. De nombreux sites recensent ces propriétés (voir le site du W3C ou le cours de Mathieu Nebra sur le site OpenClassrooms, Mémento des propriétés CSS).

• La valeur : elle s’applique à la propriété.
  Ex : css p { color: black } .
• Si on souhaite appliquer une autre propriété à ce sélecteur, on ajoute un point-virgule après la valeur.
  Ex : css p { color: black; } .
• Ce qui permet d’ajouter une nouvelle propriété et valeur à ce sélecteur, comme la police de caractère.
  Ex :
  css p { color: black; font-family: Arial; } .

CSS : héritage des propriétés.

Une notion fondamentale du CSS veut que tout élément html qui est imbriqué dans une balise hérite des propriétés CSS de cette balise parente.
Par exemple, si on applique la couleur bleue à une balise <div></div> qui contient des balises <p></p>, la couleur bleue s’applique aussi aux paragraphes.

Sources & ressources

• Site du CNRTL, article “Internet”.
  Lien
• Site de Aune (Nicolas), Apprendre html et CSS.
  Lien
• Site de DariahTeach, Langages de balisage et modélisation du texte.
  Lien
• Site Mdn Web Doc, Le fonctionnement du web.
  Lien
• Site Mdn Web Doc, Quelle différence entre une page web, un site web, un serveur web et une moteur de recherche ?.
  Lien
• Nebra (Mathieu), Comprendre le web, Site OpenClassrooms, mis à jour le 2 mars 2022.
  Lien
• Nebra (Mathieu), Mémento des balises html, Site OpenClassrooms, mis à jour le 25 février 2022.
  Lien
• Nebra (Mathieu), Mémento des propriétés CSS, Site OpenClassrooms, mis à jour le 25 février 2022.
  Lien
• Nebra (Mathieu), Apprenez à créer votre site web avec HTML5 et CSS3, Site OpenClassrooms, mis à jour le 25 février 2022.
  Lien
• WC3, List of CSS properties, both proposed and standard, mis à jour le 7 juillet 2022.
  Lien
• Wikipédia, Hypertext Transfer Protocol, mis à jour le 23 mai 2022.
  Lien
• Wikipédia, Langages de balisage, mis à jour le 3 janvier 2022.
  Lien