Conseils techniques : comment utiliser XML/HTML/CSS

30/04/2013 / Nick Ruffilo

© Publishing Perspectives, 2013.

Niveau de difficulté : Basique

Cet article est conçu pour les débutants, mais n’importe quel utilisateur de HTML peut tirer profit des concepts que nous développons ici.

Définissons les termes

Le XML – langage de balisage extensible – permet de stocker des données de façon structurée, grâce à l’utilisation de tags ou balises. Une balise est simplement un mot encadré par < >. Ainsi, <book> est une balise de livre et <title>, une balise de titre.

Le HTML – langage de balisage d’hypertexte – constitue une structure XML spécifique et bien définie. Pour le dire en peu de mots, il s’agit d’une liste de balises spécifiques avec une signification prédéterminée.

Le CSS – feuilles de style en cascade – est un ensemble spécifique et bien défini d’attributs de présentation. Ces attributs s’appliquent au marquage HTML pour définir comment celui-ci sera présenté à l’utilisateur.

Le XHTML – une version stricte de HTML qui doit respecter tous les standards XML – est en fait la même chose que le HTML, à cela près que, s’il manque une balise de fin, le contenu ne sera pas interprété correctement, alors qu’en HTML, le navigateur fermera souvent les yeux et complètera la balise à notre place.

Les bases du HTML et pourquoi il est important que nous le connaissions tous

Le HTML est le langage du web – du moins en ce qui concerne la présentation de contenu. Les sites web, les livres électroniques et de nombreuses applications dépendent d’une manière ou d’une autre du HTML. Bien que nous n’ayons jamais à écrire manuellement en HTML, il est extrêmement important d’en connaître le potentiel et les limites.

Toutes les balises de HTML présentent un début et une fin. Le début s’écrit <balise> et la fin, </balise>. Tout ce qui se trouve au milieu désigne la valeur de la balise.

Je classifierai les balises HTML selon les groupes suivants – la liste n’étant en aucun cas exhaustive – je ne cite ici que les balises les plus usuelles :

– Les balises de présentation. Ces balises modifient la manière dont se présente le texte: <b> ou <strong> convertit le texte en gras. <i> ou <em>, le convertit en italique, la balise <img> permettant pour sa part d’insérer une image.

– Les balises de regroupement. Ces balises désignent des contenus regroupés de façon logique ou sémantique. <p> regroupe les contenus dans un même paragraphe, <h1> <h2> <h3> … <h6> désignent différents niveaux de titre.

– Les balises de structure. Ces balises ne sont pas visibles pour l’utilisateur, mais elles contiennent des métadonnées correspondant au document, ou en définissent la structure. La balise <head> définit le titre du document –qui doit se trouver dans l’en-tête-, <body> définit le corps du contenu – c’est-à-dire ce qui est visible pour le lecteur.
– Les balises de contrôle. Ces balises définissent l’interaction du document. La balise <a> définit un lien ou une destination – permettant d’appliquer un lien à une partie spécifique du document.

– Les commentaires. Les commentaires sont des codes que le système ignore mais qui servent à celui qui lit le code à comprendre ce qui est en train de se passer. Les commentaires commencent par <!-‍- et se terminent par -‍->.

– Autres. Il existe d’autres balises comme <script> et <style>, qui nous permettent de définir javascript, CSS et d’autres éléments qui ne sont pas HTML, mais contrôlent tout de même le mode de présentation du contenu ou la manière dont on peut interagir avec lui.

Attributs et valeurs

J’ai expliqué auparavant que ce qui se trouve à l’intérieur d’une balise est sa valeur. Une balise peut également avoir des attributs : ils se distinguent de la valeur et sont placés dans la balise d’ouverture. Une étiquette dotée d’un attribut a la forme suivante : <balise attribut =“valeur de l’attribut”>valeur de la balise</balise>.

Une balise habituelle est l’identifiant (ID) qui assigne un nom unique à cette même balise. Par exemple : <p id=“premier_paragraphe”>Mon premier paragraphe</p>.

Structure du document

Tout document en HTML aura la structure suivante. J’utiliserai le code <!-‍- -‍-> pour ajouter des commentaires :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <!-‍- Cela dit au navigateur ou au programme que le document est en HTML et qu’il utilise la structure XML xhtml11.dtd -‍->
<html>
<head>
<title>Mon document HTML</title>
<!-‍- le javascript et les fichiers CSS seront inclus dans le document, ici -‍->
</head>
<body>
<!-‍- Le contenu du corps entrera dans cette section. Tout ce qui sera inclus ici sera visible -‍->
<p>Ceci est mon premier et unique paragraphe.</p>
</body>
</html>

Plutôt simple, non? Une caractéristique fantastique des navigateurs web, c’est qu’ils offrent la possibilité de visualiser le code source d’une page d’un simple clic droit de la souris. Cela nous révèlera le code HTML de la page que nous visitons. Sur la plupart des pages actuelles, le code est interprété par un script logé dans le serveur – comme le HTML que vous êtes en train de lire en ce moment et qui a été généré par WordPress. C’est en général quelque chose d’assez complexe, mais qui suit la logique que j’ai expliquée antérieurement. Cela fait 20 ans que j’ai appris le HTML – et javascript – et j’y suis arrivé grâce à la touche « voir le code source ».

CSS : embellissons nos contenus

Le HTML est très limité en ce qui concerne la présentation du contenu. À une époque, on utilisait l’étiquette <font> pour définir la typographie, mais cette étiquette a été retirée des spécifications HTML, bien qu’elle fonctionne encore dans la plupart des navigateurs. En pratique, toute la présentation des contenus HTML est contrôlée par CSS, qui peut être déclaré de différentes façons :

  1. De façon interne, en utilisant l’attribut « style ». Le CSS peut s’insérer directement comme dans cet exemple : <p style=“text-indent:32px;”>Ce texte présentera une indentation (un alinéa) de 32 pixels.</p>. Le document continue d’être facile à lire, mais les styles définis fonctionnent seulement à l’intérieur de cette unique balise. Le style interne n’est en général pas recommandé.
  2. En utilisant des identifiants sur la feuille de styles CSS. Mêmes si les ID doivent être uniques dans chaque fichier HTML, on peut réutiliser le même ID dans de multiples fichiers et avoir un même CSS pour chacun de ces fichiers. La déclaration de CSS sera dans ce cas: “#premier_paragraphe {text-indent: 32px;}” et le HTML sera: <p id=“premier_paragraphe”> Ce texte aura une indentation (un alinéa) de 32 píxels.</p>. L’utilisation de # dans le CSS désigne un sélecteur de ID.
  3. En sélectionnant des balises dans le CSS. Le HTML propose quelques balises sémantiques, comme <h1> <h2> <h3>…, qui définissent différents niveaux de titre. Si on utilise ces balises, on pourra définir dans CSS comment présenter les titres.

Le CSS se présentera comme ceci : h1 {font-size:48px;}

h2 {font-size: 42px;}
h3 {font-size: 36px;}
Alors que le HTML se présentera comme cela:
<h1>Gros titre (48 pixels)</h1>
<h2>Sous-titre plus petit (42 pixels)</h2>
<h3>Sous-titre encore plus petit (36 pixels)</h3>
Ainsi, chaque balise h1, h2 et h3 aura le même aspect. En même temps, le style se trouvera défini dans un simple fichier CSS, de telle sorte qu’on pourra facilement le modifier. C’est la manière de faire la plus recommandée.

4. En sélectionnant des classes dans le fichier CSS. Même si les ID sont uniques, les éléments peuvent être dotés de classes, et ces classes, être partagées. En HTML, on définit notre liste de classes – séparées par des espaces – dans la « classe » attribut. Par exemple: <p class=“texte_indenté typographie_verte”>Ce texte apparaîtra indenté et avec la typographie verte </p>. Notre déclaration de CSS devrait être :

.texte_indenté {text-indent: 36px;}
.typographie_verte{font-color: rgb ( 0, 255, 0);}

Comme on peut le voir, deux classes ont été définies et appliquées à ce paragraphe. Par le biais des classes, on peut facilement définir un autre paragraphe, situé plus loin dans le document HTML, en utilisant: <p class=“texte_indenté”> Paragraphe qui apparaîtra indenté mais pas en vert </p>.

En fait, nous pouvons combiner des sélecteurs pour devenir plus spécifiques, comme : “texte_indenté b {font-color: rgb(255,0,0);}”, cela s’appliquera à toutes les balises<b> placées à l’intérieur d’un élément de classe “texte_indenté” et fera que le texte apparaîtra en rouge. Dans un autre article, j’expliquerai en détails les utilisations avancées des sélecteurs CSS, certaines options pouvant être très complexes.

Comment lire une documentation d’interface de programmation

Au début de cet article figure un lien vers la documentation de HTML et CSS. L’un comme l’autre peuvent sembler démoralisants, tant par leur extension que par leur aspect. À vrai dire, l’information qu’on y trouve est énorme et elle est surtout adressée à des utilisateurs très spécialisés – elle sera employée par des experts qui ont besoin de vérifier que ce qu’ils écrivent en HTML fonctionne correctement. Si les termes qui figurent dans cette documentation génèrent de la confusion, la meilleure chose à faire sera de fermer cette fenêtre, d’ouvrir Google et de chercher « référence rapide de HTML » ou « référence rapide de CSS ». Il existe une grande quantité de manuels en ligne conçus pour tous les types de publics, de différents niveaux et, en général, gratuits.

 

Nick Ruffilo

A propos de l'auteur

Nick Ruffilo is the CTO of Aerbook.com, a digital publishing suite. He has been a technology entrepreneur for nearly 15 years working in publishing, finance, games, and entertainment.
  • Thomas Weiss

    C’est une bonne introduction au HTML et au CSS. En revanche, je ne suis pas sûr que l’on comprenne ce qu’est le XML et à quoi il peut servir. Dans l’édition, le XML est utilisé pour la publication multi-supports (multi device) et/ou pour l’édition de documents type catalogues et annuaires dont la mise en page est générique et dont les données peuvent provenir d’une base de données.

    Quelques liens :

    http://www.commentcamarche.net/contents/xml/xmlintro.php3 (introduction à XML)

    Ouvrage :
    XML pour l’édition : http://www.eyrolles.com/Informatique/Livre/xml-pour-l-edition-9782212126570


  • Leave a comment