Trucsweb.com

Trucsweb.com

HTML

Introduction au HTML

RDFFav

Formation - 2. Les fichiers et l’encodage

Tout fichier ouvert par un navigateur est un fichier texte. Peu importe le format, la feuille de style CSS, le document HTML.Formation - 2. Les fichiers et l’encodage

Cette formation est inutile si vous utilisez un site hébergé par WordPress ou autre gestionnaire (CMS) de site Web en ligne.
Fichier texte et rien d’autre
Formation - Introduction

Tout fichier ouvert par un navigateur est un fichier texte. Peu importe le format, la feuille de style CSS, le document HTML, XHTML ou XML, le ICalendar, les contacts vCard et Foaf, les flux RSS, RDF, Atom, etc. Si le navigateur peut lire un fichier PDF ou Excel, c’est qu’un plugiciel est au préalable installé par le navigateur. Par exemple un Flash, qui demande une mise à jour par heure!! Même les langages serveur comme l’ASP ou le PHP sont écrits dans un fichier texte. Code qui sera intercepté par le serveur qui retournera, une fois interprété, une chaine de caractère HTML au navigateur.

Il y a bien sûr d’autres formats, pour les images, pour le SVG, la vidéo, le MP3, etc. Mais le code et la programmation seront toujours et exclusivement en format texte. C’est pourquoi il suffit d’un Bloc-Notes pour programmer une page Web.


UTF-8 versus l’entité HTML

Le fichier HTML est un détail important le plus ignoré. Il n’était pas rare, avant les CMS, de voir des sites Web avec des caractères bizarres. Il faut savoir que dès ses balbutiements, et même si l’encodage UTF-8 existait déjà, le Web a été construit par le monde anglophone qui ignorait ce type d’encodage au profit des vieux jeu de caractères Windows. Encore aujourd’hui, on retrouve une mauvaise compréhension de l’encodage même par les spécialistes. UltraEdit, mon éditeur préféré, vient tout juste de passer au vrai Unicode, en 2016!!

Pourquoi? D’une part parce que l’encodage UTF-8 double l’espace de stockage nécessaire! Et ensuite parce que le web a utilisé dès le début une patch! Les entités HTML (exemple le « é = &ecute; ») véritable panacée pour l’encodage. Je constatais, pas plus tard qu’hier, qu’un générateur de favicon populaire (Realfavicongenerator.net) utilisait encore les entités HTML dans son code généré pour les accents francophones. Lire « Encodage Unicode versus UTF-8 dans un monde ASCII » pour plus de détail.

Même s’il est vrai que ça fonctionne toujours et que c’est plus simple à première vue d’utiliser les entités HTML, il faut savoir qu’une fois que l’on comprend le fichier UTF-8, c’est absolument inutile. En effet, il suffit de sauver le texte en UTF-8 pour utiliser tout caractère sans aucun problème, 100% des navigateurs sont en mesure de bien interpréter l’UTF-8.

Encodage UTF-8

Et pourtant c’est si simple. Il y a deux étapes importantes :

  1. Ajouter dans le code HTML, le plus haut possible dans l’entête (<head>), la balise méta « charset » avec la valeur « UTF-8 ».

    <!doctype html>
    <html>
      <head>
        <title>Trucsweb.com - Allo le monde!</title>
        <meta charset="utf-8" />
      </head>
      <body>
        <h1>Allo le monde!</h1>
      </body>
    </html>
    
  2. Sauvegarder ensuite le fichier texte avec l’encodage UTF-8.

    Fichier Bloc-notes UTF-8

    N’utilisez jamais UTF-16 (Unicode), encore moins UTF-32. Et si vous êtes contraint d’utiliser ANSI, vous devrez spécifier avec la balise méta « charset » le jeu de caractères Latin-1 (charset="ISO-8859-1"). Mais ce jeu de caractères doit au préalable être installé par le navigateur. Chose improbable dans le cas d’un navigateur à l’étranger qui remplacera inévitablement les accents par des caractères bizarres...
encodage des fichiers JavaScript et feuilles de styles CSS

Il existe aussi une manière d’indiquer au navigateur que le fichier JavaScript ou CSS utilise l’encodage UTF-8. Beaucoup plus rare sinon quasiment inutilisé par 99% des sites Web, cette méthode est d’ailleurs très mal supportée encore aujourd’hui. Ajoutez sur la première ligne du document le code suivant :

@charset "UTF-8"; 
Type de fichier et extension
Pour un navigateur, tout fichier texte a le même type, peu importe que ce soit un fichier TXT, HTML, CSS, XML, XSL, CSV, FOAF, etc. Pour savoir comment l’interpréter, il utilise bêtement l’extension. Or donc, vous pouvez sauvegarder un texte avec l’extension « .txt » et le navigateur affichera son contenu sans aucun problème.
  1. Tapez « Allo le monde » dans un fichier;
  2. Sauvez-le avec l’extension « .txt », par exemple « exemple.txt »;
  3. Ouvrez le fichier dans un navigateur avec le résultat suivant :
    Fichier
    Firefox - Ouvrir un fichier
    Résultat
    Firefox - Fichier texte

Bien entendu, le navigateur n’interpréta pas le HTML dans un fichier texte. Ici un exemple avec le mot « monde » en caractère gras avec la balise <b> :

Résultat
Firefox - Fichier texte avec HTML

Pour que le navigateur interprète votre HTML, vous devez sauvegarder le fichier avec l’extension .html (ou .htm). Entrez ce code dans un fichier vierge et sauvegardez-le avec l’extension « .htm » :

Allô le <b>monde!</b>

Avec le résultat suivant :

Résultat
Firefox - Fichier HTML avec HTML

Comme on peut voir, sans aucune structure HTML, ni balise « charset », le navigateur interprète le HTML en se basant sur l’extension « .html » et vous pouvez même ajouter un accent circonflexe sur l’« ô » et il sera bien reproduit par la plupart des navigateurs modernes à cause de l’encodage UTF-8 du fichier.

Conclusion de la formation
  1. Tout fichier ouvert par un navigateur est un fichier texte;
  2. Sauvegardez vos fichiers avec l’encodage UTF-8;
  3. Indiquez l’encodage à l’aide de la balise meta « charset »;
  4. En portant une attention sur l’extension selon le type de fichier, par exemple avec l’extension « .html ».


Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    10/10 sur 1 revues.
           Visites : 8274 - Pages vues : 8348
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @