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

Une page de Wikiversité, la communauté pédagogique libre.
Contenu supprimé Contenu ajouté
B-nux (discussion | contributions)
Ligne 14 : Ligne 14 :


Tout d'abord, sachez qu'un site web est réalisé à l'aide de ce que l'on appelle populairement un "[[w:Langage de programmation|langage de programmation]]". Plus concrètement, il s'agit bien souvent d'un "[[w:Langage de balisage|langage de balisage]]".<br />
Tout d'abord, sachez qu'un site web est réalisé à l'aide de ce que l'on appelle populairement un "[[w:Langage de programmation|langage de programmation]]". Plus concrètement, il s'agit bien souvent d'un "[[w:Langage de balisage|langage de balisage]]".<br />
Le plus utilisé, vous en avez très certainement déjà entendu parler; Il s'agit du [[Hypertext Markup Language|H.T.M.L]].<br />
Le plus utilisé, vous en avez très certainement déjà entendu parler; Il s'agit du [[Hypertext Markup Language|HTML]].<br />
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.<br />
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.<br />
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 [[Cascading Style Sheet|langage C.S.S]].
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 [[Cascading Style Sheet|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" {{clin}}).
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" {{clin}}).




==L'outillage du nouveau webmaster==
==L'outillage du nouveau webmaster==

Version du 25 juillet 2007 à 13:56

Début de la boite de navigation du chapitre
Introduction
Icône de la faculté
Chapitre no {{{numéro}}}
Leçon : XHTML
Chap. préc. :Sommaire
Chap. suiv. :Première page
fin de la boite de navigation du chapitre
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" Clin d'œil).

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°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, Firefox fera tres bien l'affaire tout comme Safari sous Mac OS X.




Bien, ce sera tout pour ce "chapitre" (qui n'en est pas vraiment un en fait Image logo représentant un un smiley souriant) !

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


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.