A) Introduction

Voilà notre premier cours ensemble, vous êtes prêts ? Bon pas de panique il n'y a rien de difficile dans ce que je vais vous raconter. Ce chapitre nous servira à aborder la création d'un site web en douceur, les petites explications nécessaires et les bases, histoire que vous compreniez mieux ce qu'est un site web et ce qui se cache derrière. J'essaierai de ne pas rentrer dans les détails les plus profonds pour pas que vous vous y perdiez ( et parce que je ne connais pas tout, donc pour ne pas vous dire de bêtises ), et c'est souvent cela qui rend certains cours des sites trop compliqués et déroutants pour nous, les débutants.

1)Qu'est-ce que le xHTML/CSS

Tout d'abord pour créer un site il faut que vous disiez à l'ordinateur ce qu'il doit faire. Si vous tapez le texte à la chaîne sans rien dire, vous imaginez le résultat, ça ne marchera pas. Oui, en effet il faut dire a l'ordinateur de mettre le texte ici, l'image là, faire un lien sur ce mot etc... Pour dire à l'ordinateur ce qu'il doit faire, il faut utiliser un langage.

Il existe beaucoup de langage informatique. Chacun a plus ou moins une tache différente: Java, C/C++, Visual Basic, Python ... servent plutôt a faire des programmes; cependant ils sont souvent assez complexes et durs à maîtriser, je vous présenterai toutefois un cours sur un langage que je maîtrise assez bien le C/C++ en essayant d'être le plus clair possible et vous facilitez la tâche. Et il y en a d'autre comme le xHTML et le CSS qui nous permettent de créer un site web. Ces langages sont très faciles par rapport à ceux que j'ai cités plus haut et ils ont été conçu dans ce but, être facile d'accès. Et bien sûr , ce sont les deux qui nous intéressent.

Je vois déjà vos têtes stupéfaites devant ce que vous venez de lire: "Quoi on va apprendre deux langages ?! Mais c'est de la folie !! Et tu dis que ça va être facile en plus ??!!" Stop, ne faites pas un pas de plus (ne dirigez pas votre pointeur vers la croix de la fenêtre). Oui on va apprendre deux langages et alors ? Je vous dis que ça va être super simple. Ces deux langages sont fait l'un pour l'autre et en final c'est comme si vous n'appreniez qu'un seul langage. Je vais vous expliquez leur concept:

-Le xHTML (eXtensible HyperText Markup Language, pour les intimes), dont vous connaissez sûrement (le grand frère le HTML), sert à dire à l'ordinateur ce qu'il y aura dans le site, et de lui expliquer à quoi correspond chaque élément: ceci est un titre, ça un paragraphe, ça un lien, ça une image etc... Bref à lui dire le contenu.

-Le CSS (Cascading Style Sheets) quant à lui sert à la mise en page du site: souligner les titres, mettre le fond en bleu, mettre les éléments importants en rouges ...

Vous voyez bien que ces deux langages sont complémentaires mais pour ne pas vous mentir, il est tout à fait faisable de faire un site sans CSS, mais c'est nettement, voire énormément plus moche, voyez cela par vous même:
Cette page sans CSS
Donc je vous apprendrai le xHTML et le CSS , et je sais que je me répète mais c'est très simple vous verrez. En résumé:
-le xHTML sert à faire le contenu du site
-et le CSS sert à faire la mise en page.

2)Quels outils a-t-on besoin?

Le logiciel dont on a besoin s'appelle un éditeur, c'est dans celui-ci que nous allons taper notre code xHTML et CSS. Et vous allez être énormément surpris lorsque je vais vous donner la réponse : Bloc Note. Et oui le fameux bloc note très pratique, facile a utiliser, et si vous êtes sous KDE, il y a Kwrite. Mais bon disons le tout de suite, mieux vaut utiliser un éditeur plus puissant, qui colorisera notre code xHTML et CSS. Vous allez voir c'est très très utile .
Alors il en existe plusieurs, deux qui sont mes coups de coeur:
-Pspad :http://www.pspad.com
-Notepad++: http://notepad-plus.sourceforge.net/fr/site.htm
Sous KDE il y a l'excellent Kate.

Tout au long du cours, j'utiliserai Notepad ++, donc je vais détailler son installation (je ne suis même pas sûr que vous ayez besoin que je détaille , mais bon on ne sait jamais).
1)Allez sur le site http://notepad-plus.sourceforge.net/fr/site.htm, puis sur l'onglet télécharger et cliquer sur le lien Télécharger les binaires de Notepad++
2)Prenez le lien qui se finit par un .exe, en l'occurrence ici c'est npp.4.1.1.Installer.exe
3)Et voilà le téléchargement commence.
4)Lancer l'installation, choisissez la langue Française > Suivant > J'accepte > Sélectionnez le répertoire dans lequel vous voulez l'installer, Suivant > Cocher: Context Menu Entry, Auto-completion Files, Plugins et si vous voulez que lorsque sous Internet Explorer vous regardez le code source celui-ci s'ouvre avec Notepad ++, cocher As default html viewer > Cliquez sur Suivant > Terminer.
Voilà on a installé Notepad ++, il est prêt et fonctionnel. C'est presque fini, il reste encore un dernier point avant que l'on ne commence à créer notre première page web .

3)Qu'est ce qu'un navigateur web?

Un navigateur web c'est ce que vous utilisez en ce moment, je parie que c'est Internet Explorer, Mozilla Firefox, ou encore peut-être Opera que vous avez. Un navigateur web permet d'afficher les pages web, il lit le code xHTML/CSS et le retranscrit à l'écran, par exemple dans le code xHTML vous lui dites que cet élément est le titre, alors le navigateur va afficher l'élément en tant que titre , c'est simple non ? Il existe plusieurs navigateurs web: - Mozilla Firefox - Internet Explorer - Opera - Netscape - Konqueror (KDE) - Sea Monkey - Safari (Mac) ...Et encore plein d'autres.

Mais vous allez me dire " Pourquoi est-ce qu'il y a autant de navigateurs web, un ne suffirait-il pas ? " Oui, bien sûr pas besoin d'avoir tout ces navigateurs web, mais il faudra choisir un parmi eux. Chacun a sa petite spécialité:
-Internet Explorer est installé automatiquement avec Windows donc la plupart des gens l'ont. La nouvelle version, la version 7 possède une bonne compatibilité avec les sites web, et de grand mis à jour du coté sécurité et autre. Mais cependant beaucoup de personnes sont encore restées sous Internet Explorer 6, et c'est là qu'il y a un problème, coté CSS il n'est pas du tout bon, il n'interprète pas le code à la perfection, de plus les images au format PNG 24 bits ne sont pas bien gérées par Internet Explorer 6, la transparence n'est pas bien affichée.

-Mozilla Firefox (gratuit bien sûr), lui, respecte tout a fait le code xHTML/CSS et le retranscrit parfaitement, les pages s'affichent plus vite, c'est pourquoi je vous conseille de le télécharger, de plus coté sécurité et anti-popup, il assure bien. Pour moi c'est le must, si vous avez déjà Internet Explorer vous pouvez toujours télécharger Mozilla Firefox, parcequ' honnêtement il vaut la peine d'être essayé, voire d'être adopté.

Pourquoi je vous dis toutes ces choses sur ces navigateurs, c'est parce que lorsque vous allez créer votre site, il faudra bien faire attention a ce qu'il soit le plus compatible avec la plupart des navigateurs web, imaginez qu'une personne qui a Internet Explorer 6 vienne dans votre site qui n'est pas bien retranscrit, la personne ne va pas s'attarder et va tout de suite changer de page. Donc c'est pourquoi je vous conseille de télécharger Mozilla Firefox en complément de Internet Explorer pour pouvoir tester votre site sur les deux navigateurs.

Voilà, ce chapitre se termine là, vous savez maintenant plus ou moins ce qu'est un site web, et dans le prochain chapitre qui vous attend on va commencer à créer notre première page web !!!!!! Allez je vous attend dans le prochain chapitre Pour finir je vous laisse un petit QCM réalisé avec E-anim, un logiciel qui permet de faire des animations en flash, je rédigerais un cours très prochainement dessus.

QCM

Les cours sont la propriété de leurs auteurs respectifs.
Toute reproduction totale ou partielle sans l'accord des auteurs est interdite.