« Extensible Hypertext Markup Language/Introduction » : différence entre les versions

Contenu supprimé Contenu ajouté

Intégrés

Version du 22 avril 2007 à 21:06

Entrée en matière

Bonjour à toutes et à tous, et bienvenue dans ce cours consacré au langage X.H.T.M.L !
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 H.T.M.L.
Ce dernier (bien que toujours utilisé) n'est plus recommandé. Il a donc cédé sa place (officiellement tout du moins) au X.H.T.M.L, 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 C.S.S.

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.
Oui vous m'avez bien lue: un éditeur de texte, comme le Bloc-note par exemple (pour les utilisateurs de Windows).
Il va également vous falloir des navigateurs internet.

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°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" /></nowiki>


<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 !<br />
                   Vous êtes probablement en train (pour la plupart) de lire votre premier code source. Félicitations !
              </p>
    </div>
</body>


</html>

<!-- EXTRAIT DE CODE N°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 !<br />
                   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++ (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 gratuits.

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 internet.
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 et Mac OS X, vous n'avez qu'à installer également les deux navigateurs dernièrement cités.

Bien, ce sera tout pour ce "chapitre" (qui n'en est pas vraiment un en fait ) !

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

Si vous avez des questions, n'hésitez surtout pas à me joindre. Vous pouvez le faire en me laissant un message sur ma page de discussion.

« Extensible Hypertext Markup Language/Introduction » : différence entre les versions