Extensible Hypertext Markup Language/Introduction

**Introduction**
Leçon : Extensible Hypertext Markup Language

Chapitre n^o 1
Retour au	Sommaire
Chap. suiv. :	Première page

En raison de limitations techniques, la typographie souhaitable du titre, « Extensible Hypertext Markup Language : Introduction
Extensible Hypertext Markup Language/Introduction », n'a pu être restituée correctement ci-dessus.

Entrée en matière

Bonjour à toutes et à tous, et bienvenue dans ce cours consacré au langage XHTML !
Internet, quelle belle invention ! On peut visiter une pléiade de sites web, on peut… ah mais justement, les sites web, parlons-en.
Ne vous êtes-vous jamais demandé comment ces derniers étaient réalisés ? Ne vous est-il jamais arrivé de penser "tiens, j'aimerais bien avoir mon site moi aussi…" ? Oui ? Ahah, j’en étais sure ! Mais je devine également que vous vous êtes souvent demandé "oui mais… comment on crée un site web ? Avec quoi ?", n'est-ce pas ?
Eh bien, c’est votre jour de chance ! Vos questions vont enfin obtenir des réponses.

Tout d’abord, sachez qu'un site web est réalisé à l'aide de ce que l’on appelle populairement un "langage de programmation". Plus concrètement, il s'agit bien souvent d’un "langage de balisage".
Le plus utilisé, vous en avez très certainement déjà entendu parler; Il s'agit du HTML.
Ce dernier (bien que toujours utilisé) n'est plus recommandé. Il a donc cédé sa place (officiellement tout du moins) au XHTML, plus propre.
C'est donc avec celui-ci que vous allez apprendre à créer votre site. Enfin…. c’est avec lui que vous allez apprendre à créer la structure du site plus exactement, car pour la mise en page (et le rendre ainsi plus attrayant), il vous faudra recourir au langage CSS.

Bon, j’espère ne pas vous avoir trop embrouillé(e)(s) avec cette entrée en matière. Voyons donc sans plus attendre le matériel dont vous allez avoir besoin pour coder votre site (eh oui, pour ceux qui ne le sauraient pas, un site ça se "code" ).

L'outillage du nouveau webmaster

Alors alors alors … D'après vous, comme ça au hasard, de quoi allez-vous avoir besoin ?
Oulala ! Mais non vous n'y êtes pas ! Nul besoin d’outils complexes, coûtant les yeux de la tête ! Non non, vous allez rire : il vous faut juste un éditeur de texte (Ne confondez pas avec un logiciel de traitement de texte comme Microsoft Word ou OpenOffice). Oui vous m'avez bien lue : un éditeur de texte, comme le Bloc-note par exemple (pour les utilisateurs de Windows).

L'éditeur de texte

Bon, quitte à apprendre à coder, autant mettre toutes les chances de notre côté non ? Du fait, je vous déconseille malgré tout de recourir au Bloc-notes. Pourquoi ? Tout simplement parce qu’il ne colore pas la syntaxe.

Ah, pardons, je dois probablement vous parler chinois.
Afin d’éviter un long discours, je vais vous proposer deux extraits de code, qui parleront sans doute d'eux-mêmes.

 <!-- EXTRAIT DE CODE n<sup>o</sup>1 -->
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
 <head>
 <title>Code Source</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <meta http-equiv="Content-Language" content="fr" />
 <link rel="stylesheet" type="text/css" media="screen" href="design.css" />
 </head>
 <body>
     <div id="corps">
          <h1>Mon premier code source</h1>
               <p>
                    Bonjour à tous !
                    Vous êtes probablement en train (pour la plupart) de lire votre premier code source. Félicitations !
               </p>
     </div>
 </body>
 </html>

 <!-- EXTRAIT DE CODE n<sup>o</sup>}2 -->
 <!Doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
 <head>
 <title>Code Source</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <meta http-equiv="Content-Language" content="fr" />
 <link rel="stylesheet" type="text/css" media="screen" href="design.css" />
 </head>
 <body>
     <div id="corps">
          <h1>Mon premier code source</h1>
               <p>
                    Bonjour à tous !
                    Vous êtes probablement en train (pour la plupart) de lire votre premier code source. Félicitations !
               </p>
     </div>
 </body>
 </html>

Alors ? Je suppose que cela vous saute aux yeux n'est-ce pas ?
Eh oui, alors que le second dispose d’une syntaxe colorée (permettant ainsi une lecture plus aisée et plus rapide), le premier, lui, n'en a pas. Le Bloc-notes de Windows ne dispose pas d’une option de coloration syntaxique.
Remarquez, la coloration n'a rien de vital, c’est simplement que lorsque vous aurez un grand nombre de lignes de code à parcourir, elle vous facilitera grandement la lecture.

Donc, si vous utilisez Windows, je vous conseille le logiciel Notepad++ (libre et gratuit).

Pour les utilisateurs de Linux, il existe un bon nombre de logiciels gratuits disposant d’une coloration syntaxique. Pour ma part, je suis sous la distribution Ubuntu, et j'utilise le logiciel Kate. La coloration syntaxique du second exemple est d'ailleurs tirée de cet éditeur de texte.

Enfin, pour les utilisateur de Mac OS X, il existe les logiciels Jedit et Smultron, qui sont eux aussi libres.

J'oubliais ! Si tout comme moi vous disposez encore d’un Macintosh tournant sous le système Mac OS Classic (OS 9 et ses prédécesseurs), je ne connais aucun éditeur de texte comprenant une option de coloration syntaxique. Du reste, le système commençant à dater, le X.H.T.M.L n'y est pas supporté à ma connaissance (navigateurs trop anciens).

Les navigateurs

Bien, maintenant que vous avez choisi votre éditeur de texte, il ne vous reste plus qu’à télécharger un ou deux autres navigateurs Web.
J'en entends déjà qui se demandent pourquoi. Eh bien, sans trop rentrer dans les détails, disons que tous les navigateurs n'interprètent pas les langages de balisage de la même manière.
Du fait, il est important de tester vos pages sous différents navigateurs, afin de vous rendre compte du rendu final sur chacun d'eux.

Pour les utilisateurs de Windows, vous disposez par défaut d'Internet Explorer.
Je vous conseille fortement d'installer, en plus, les navigateurs Firefox et Opera (ce dernier étant le plus respectueux des standards du W.3.C).
Pour les utilisateurs de Linux, Firefox fera très bien l'affaire tout comme Safari sous Mac OS X.

Internet Explorer ne respectant pas toujours les standards du web, il pourra être nécessaire de tester vos pages avec celui-ci afin de vous assurer de leur compatibilité avec tous les navigateurs. Sous Linux, vous pouvez utiliser ie4linux par exemple.

Dès que vous aurez en votre possession les outils dont nous venons de parler, direction le Premier Chapitre, où vous attend, entre autres, votre premier devoir (facile, et facultatif, je vous rassure ).

Bonus

Image examinée par Firebug sur Commons.

Afin de gagner du temps, il est aussi possible d'afficher directement l'XHTML des sites visités, avec des outils comme Firebug pour Firefox.

En effet, sur passage de souris en haut le module affiche en bas la description de l’objet rencontré, et vice-versa.

Extensible Hypertext Markup Language

Sommaire

Première page