Xhtml et CSS

XHTML ? CSS ? C'est quoi ça ?
Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de simplement taper le texte qu'il y aura dans son site, il faut aussi savoir placer ce texte, insérer des images, faire des liens etc...
Pour expliquer à l'ordinateur ce que vous voulez, il va falloir utiliser un langage qu'il comprend.

Il existe des langages qui servent à créer des programmes, comme le C++ ou encore le Java. Ces langages sont néanmoins complexes et destinés à des personnes qui ont déjà quelques connaissances en informatique.
Les langages XHTML et CSS, eux, servent précisément à créer des sites web, et ils ont été créés de manière à être simples à utiliser. Mon rôle sera de vous apprendre à vous en servir.

Bon, mais pourquoi apprendre 2 langages pour créer un site web ? Un seul n'aurait pas suffit ?

C'est vrai que, quand je vous dis que vous allez apprendre 2 langages à la fois, vous vous demandez si ce n'est pas déjà trop pour vous.
Pas d'inquiétude, vous allez vous rendre compte au fur et à mesure que tout a été très bien pensé. Chacun de ces 2 langages sert à faire quelque chose de précis, et les deux se complètent naturellement pour au final donner un site web :

* XHTML : c'est l'abréviation de eXtensible HyperText Markup Language. Entre nous, si vous ne retenez pas ce que ça veut dire, ça ne vous empêchera pas de dormir
Ce langage XHTML, c'est celui avec lequel vous taperez le contenu de votre site web. Il contient des informations logiques : vous direz par exemple "Ceci est mon titre, ceci est mon menu, là c'est le texte principal de la page, là il y a une image etc etc...".

Vous avez peut-être entendu parler aussi du HTML. En fait, le XHTML et le HTML se ressemblent beaucoup et peuvent tous les deux être utilisés pour créer des pages web. Ils sont quasiment identiques. Le XHTML fonctionne cependant sur des règles un peu plus strictes que le HTML.
En bref, si vous savez programmer en XHTML, alors vous savez programmer en HTML. C'est pour cela que nous étudierons XHTML dans ce cours.

* CSS : c'est l'abréviation de Cascading Style Sheets ("Feuille de style"). Ce langage nous sert uniquement à présenter la page web. C'est en CSS que l'on dira : "Mes titres sont en rouge et sont soulignés, mon texte est dans la police arial, mon nom est centré, mon menu a un fond blanc..." etc etc.
Grâce à ce langage, nous allons pouvoir créer rapidement et simplement la mise en page de votre site. Nous pourrons ainsi lui donner une belle présentation, sans pour autant être des experts en graphisme (et ça tombe bien, parce que côté graphisme je suis carrément nul )


En résumé, on se sert de :

* XHTML pour écrire le contenu de nos pages web.
* CSS pour présenter ce contenu.


Ces langages sont donc complémentaires, l'un ne va pas sans l'autre. Si vous retenez que XHTML sert à taper le contenu, et CSS à présenter ce contenu, alors croyez-moi : vous avez déjà compris 95% du principe !

Dans la première partie de ce cours pourtant, on ne va pas parler de suite de CSS. On ne va faire que du XHTML, parce que c'est par là qu'il faut commencer.
Sans CSS, vous allez donc pouvoir faire vos premières pages web. Elles seront assez moches, mais patience... Une fois que vous arriverez à la partie II de ce cours, on introduira le CSS, et vous allez voir tout d'un coup vos pages web s'embellir (presque) sans effort

L'éditeur
Une question que vous devez certainement vous être déjà posée, c'est : "De quel logiciel je vais avoir besoin pour créer mon site web ?"

En fait, des logiciels qui permettent de créer un site web, il y en a des tonnes.
Mais pourquoi aller chercher un logiciel payant et compliqué, alors que vous avez déjà tout ce qu'il faut chez vous ?

Eh oui, accrochez-vous bien parce que... il s'agit de Bloc-Notes !

Image utilisateur

Croyez-moi si vous voulez, mais ce logiciel suffit amplement à créer un site web !
Si vous avez un Mac, vous avez certainement un logiciel similaire : un éditeur de texte tout simple.

Bon, en théorie donc, Bloc-Notes suffit. C'est avec lui que j'ai réalisé mon premier site web (en fait, il s'agit de ce site, le Site du Zér0, j'en ai fait qu'un seul )
Mais avec un peu de recherche, j'ai découvert un logiciel vraiment utile et qui aide pas mal en colorant automatiquement le code XHTML / CSS.

Ce logiciel est simple, en français et gratuit. Il s'appelle Notepad++, et je vous invite à le télécharger :

Page de téléchargement de Notepad++
Prenez la version avec installeur (.exe) et non le .zip


Notez qu'il n'est pas indispensable de prendre Notepad++, si vous gardez Bloc-Notes vous pouvez très bien vous en sortir. Mais bon, comme Notepad++ est gratuit et qu'il va un peu vous aider, ça serait dommage de s'en priver.

Si vous êtes sous Mac OS, sachez qu'il existe de nombreux éditeurs du même genre pour les Mac. Je peux vous recommander Smultron.
Sous Linux, les éditeurs ne manquent pas. Vous avez d'ailleurs sûrement déjà vim ou emacs installé.


Lorsque vous aurez installé Notepad++, je vous conseille de faire la manipulation suivante : allez dans le menu "Langages" et choisissez "HTML". Cela permettra au logiciel de savoir que l'on va taper du XHTML.

Lorsque vous utiliserez le logiciel, il colorera votre code comme ça :

Image utilisateur


Pour l'instant, ne vous préoccupez pas de savoir ce que signifie tout ce charabia que vous pouvez voir. C'était juste pour vous donner un aperçu de ce à quoi servait ce logiciel.

Bien, maintenant que nous sommes au point et que nous avons notre éditeur de pages web, nous allons pouvoir parler du dernier élément indispensable (que vous avez déjà là encore) : le navigateur.
Les navigateurs
Savez-vous ce qu'est un navigateur ?
Cela peut paraître évident pour certains, mais comme je vous avais promis qu'on partait de Zér0 (après tout c'est le principe de ce site), je vais expliquer rapidement ce que c'est pour ceux qui ne seraient pas sûrs...

Le navigateur, c'est le programme qui vous permet de voir des sites web. Si vous lisez ces lignes, c'est donc que votre navigateur est ouvert et que vous l'avez sous les yeux ^^

Le travail du navigateur, c'est de lire le code XHTML / CSS que vous avez écrit, et d'afficher ce qu'il représente. Si votre code CSS dit "Les titres sont en rouge", alors le navigateur affichera les titres en rouge.

Parmi les navigateurs qui existent, citons :

* Internet Explorer
* Mozilla Firefox
* Opera
* Google Chrome
* Netscape
* Konqueror (pour Linux)
* Lynx (pour Linux)
* Apple Safari (pour Mac et Windows)
* etc...


La liste est longue, mais je vous ai cité les principaux.

Il est conseillé d'installer plusieurs navigateurs pour s'assurer que son site fonctionne correctement sur chacun d'eux. Bien entendu, il y en a beaucoup, mais je vous recommande au minimum d'avoir ces deux-là :

* Internet Explorer
* Mozilla Firefox

Internet Explorer


Image utilisateur
Le plus connu et le plus répandu de tous les navigateurs est Internet Explorer. Et je pense que j'ai très peu de chances de me tromper en disant que c'est celui que vous êtes en train d'utiliser...
Il y a une raison à cela : c'est le navigateur livré par défaut avec tous les Windows. Et comme Windows est le système d'exploitation le plus répandu... bref, pas besoin d'être un génie pour comprendre pourquoi Internet Explorer est le logiciel le plus utilisé.


IE8
Internet Explorer, le navigateur le plus répandu


La dernière version d'Internet Explorer est la 8 (on dit "IE8"). C'est un navigateur tout à fait correct, mais malheureusement ses précédentes versions sont toujours utilisées. Elles sont à la traîne et supportent très mal le CSS :

* IE 6 : livré avec Windows XP
* IE 7 : livré avec Windows Vista



Les deux ont des lacunes, mais comme vous pouvez vous en douter, IE 6 est le pire parce que c'est le plus vieux.

Image utilisateur
Internet Explorer 6, une ancienne version encore utilisée


On ne peut pas forcer les internautes à mettre à jour leur navigateur, donc il faudra apprendre à faire avec le temps que ces anciennes versions soient définitivement rayées de la carte du net.

En attendant, je vous conseille fortement d'installer un autre navigateur très utilisé si vous ne l'avez pas : Mozilla Firefox.

Mozilla Firefox


Image utilisateur
Mozilla Firefox est un programme gratuit et disponible en français.

Voici à quoi ressemble Mozilla Firefox :

Image utilisateur
Mozilla Firefox, un navigateur de plus en plus utilisé

Je vous invite vivement à télécharger Firefox. Si vous ne le faites pas maintenant, vous verrez que vous en aurez besoin après de toute manière, donc autant prendre les devants

Cliquez sur le lien ci-dessous pour télécharger Firefox :

Télécharger Firefox


Comme vous le voyez, c'est très simple. Vous avez juste à cliquer sur "Télécharger Firefox" et c'est fait.
Le logiciel est bien entendu disponible intégralement en français, mais vous pouvez aussi choisir une autre langue si vous le désirez

Firefox dispose de fonctionnalités très intéressantes qui ont depuis été reprises par Internet Explorer :

* Une barre de recherche Google est en place dès le départ
* Il bloque les popups
* Il dispose d'un gestionnaire de téléchargements très pratique
* On peut changer son apparence à volonté (il dispose d'un système de "skins")
* On peut naviguer avec des onglets.
* Pour ouvrir un nouvel onglet vide, faites Ctrl + T. Pour ouvrir un lien dans un nouvel onglet, cliquez dessus en maintenant Ctrl appuyé. C'est très très pratique !
* On peut rajouter des plugins pour lui ajouter une infinité de fonctionnalités.
Je peux déjà vous conseiller de prendre Web Developer qui ajoutera une barre d'outils qui vous sera certainement utile lorsque vous créerez votre site web. Elle ressemble à ceci :
Image utilisateur


Bref, en ce qui me concerne j'ai adopté Firefox, et je fais en sorte d'en parler au maximum autour de moi (la preuve).

Vous pouvez installer Firefox sans désinstaller Internet Explorer. Les 2 navigateurs peuvent tourner en même temps sans souci.

C'est bon, vous avez tous les logiciels qu'il faut ?
Alors ne traînons plus, on va maintenant passer à l'attaque et réaliser notre première page en XHTML. Comme je vous l'ai dit dans le chapitre précédent, il n'y aura pas de CSS pour le moment.

Et c'est partiii !