Le tuto indispensable ...

Nombre de messages : 173 Date d'inscription : 13/04/2007

Guildeux, guildeuses, après un débat sur le forum officier (houhou), j'ai eu le feu vert par les officiers pour faire un petit tutorial sur les thèmes XHTML, CSS, et PHP. En gros, tout ce qui sert à créer un site.
Un peu de culture géna
érale en plus ne vous fera pas de mal, je vous l'assure Smile

.

Chapitre 1

Bon, commençons, mais pour comprendre tout ça, il y a quelques prérequis, pour vous y repérer dans mes tutos et savoir écouter, il faudra :

S

Bon, mais vous allez me dire, Oui mais ca va m'encomber en logiciels ! Combien de dizaines ?! Ca va être impossible a gérer.
Et je vous réponds, pas du tout ! Pour créer votre site web, il vous suffit du logiciel ...... Bloc Notes !!!

Le tuto indispensable ... 5518

Et oui c'est possible. Et si vous êtes sur Mac, il y a surement l'équivalent.
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. C'est le logiciel Notepad. Je vous conseille vivement de le télécharger !
Page de téléchargement de Notepad++
Bon, sous Mac, il doit y avoir le même genre de logiciel comme Smultron. Sous Linux, les éditeurs ne manquent pas.Vous avez d'ailleurs sûrement déjà vim ou emacs installé.
Bon, revenons a Notepad ++. 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, et vous vous y retrouverez plus au niveau des couleurs.

Parlons des languages, il y a deux types de languages principaux pour créer un site Web. Le XHTML et le CSS. Le XHTML dira "Tiens je veux un carré ici, un paragraphe là, et ici je veux le titre. Quand au CSSn il dira, je veux que tous les titres soit en rouge, que mon paragraphe soit au centre, bref au designe de votre site, le CSS servira.

Parlons un peu des navigateurs, il existe plusieurs navigateurs :

La liste est longue, mais je vous ai cité les principaux.
Je vais vous présenter deux d'entre eux:

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é.
Oui mais voilà, ce logiciel est à la traîne.
Côté XHTML, ok ça va il suit. Mais dès qu'il s'agit de faire du CSS, vous allez voir qu'il ne connaît pas tout, et que parfois il l'affiche différemment des autres navigateurs... ce qui est assez ennuyeux.
La version présentée ci-dessus est la dernière en date (Internet Explorer 7). Cependant, la version précédente (Internet Explorer 6) est toujours largement utilisée par de nombreux internautes qui ne se sont pas mis à jour :
En résumé, les versions les plus utilisées d'Internet Explorer (abrégé "IE") sont :

Les deux ont des lacunes, mais comme vous pouvez vous en douter, IE 6 est le pire parce que c'est le plus vieux.
Seulement voilà, on ne peut pas faire d'un coup de baguette magique que toutes les personnes qui ont Internet Explorer utilisent un navigateur plus récent (quoique des fois, on aimerait :p)
Le problème est que IE est le seul navigateur vraiment à la bourre, tous les autres fonctionnent de la même manière et suivent les mêmes règles.
Pour pouvoir faire correctement du XHTML / CSS, il est indispensable que vous ayez un autre navigateur en plus d'Internet Explorer.
Je vais vous présenter celui qui, à mon goût, est le meilleur : Mozilla Firefox.
Mozilla Firefox est un programme gratuit et disponible en français. Il va nous être aussi utile car, comme tous les autres sauf IE, il est à jour et va vous permettre de profiter des dernières possibilités du CSS.
En fait, quand on crée un site web aujourd'hui, on a généralement 2 navigateurs ouverts en même temps : Firefox, car il indique comment la page s'affiche sur tous les autres navigateurs... et Internet Explorer, qui est un cas particulier, il faut parfois faire des retouches pour que ça fonctionne aussi sur ce navigateur.

Voici à quoi ressemble Mozilla Firefox :

Le tuto indispensable ... 5530

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 Wink

Cliquez sur le lien ci-dessous pour télécharger Firefox équipé de la Google Toolbar pour vos recherches :

Téléchargez Firefox muni de la barre d'outils Google.

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 Smile

Outre le fait qu'il affiche les pages web correctement (ce qui doit être une raison à elle seule suffisante pour vous décider à changer de navigateur), Firefox dispose de fonctionnalités très intéressantes :

* 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 :

Le tuto indispensable ... 5531

Bref, en ce qui me concerne j'ai adopté Firefox, et je fais en sorte d'en parler au maximum autour de moi.
Non pas que j'aie une dent envers Internet Explorer, pas du tout. Mais vous allez bientôt vous rendre compte dans ce cours du retard qu'il a, et de la nécessité d'avoir un navigateur à jour comme Firefox quand on crée un site web aujourd'hui.

Et voici quelques questions sur l'ensemble du cours, répondez y et comparez vos réponses ....

Quels sont les 2 langages qu'on utilise pour créer un site web ?

* XSML et CSS
* XHTML et CSS
* XHTLM et CSS

Lequel de ces logiciels ne permet pas de créer des pages web ?

* Bloc-notes
* Internet Explorer
* Notepad++

Laquelle de ces phrases pourrait correspondre à du XHTML et non pas à du CSS ?

* Le menu est à droite et fait 230 pixels de large
* Le titre est écrit en gras, sur fond bleu clair, et il est souligné
* Le titre de la page est "Photos de mon excursion au Sahara"

Quel est le principal défaut de Internet Explorer qui va nous gêner ?

* Il ne connaît que le HTML et pas le XHTML
* Il ne connaît pas certaines possibilités du CSS et en affiche mal d'autres
* Il contient un virus extrêmement dangereux qui s'activera le jour de Noël

Réponses :

Quels sont les 2 langages qu'on utilise pour créer un site web ?
La bonne réponse était : XHTML et CSS
Explications : Ne commencez pas à tout mélanger Wink

Lequel de ces logiciels ne permet pas de créer des pages web ?
La bonne réponse était : Internet Explorer
Explications : Internet Explorer est un navigateur qui permet de VOIR les pages web, pas de les créer.

Laquelle de ces phrases pourrait correspondre à du XHTML et non pas à du CSS ?
La bonne réponse était : Le titre de la page est "Photos de mon excursion au Sahara"
Explications : Le XHTML permet de dire quel est le contenu de la page, et si ce contenu est un titre, du texte, une citation etc... Le CSS lui, permet de mettre en forme ce texte : on pourra donc lui dire de s'aligner à droite, d'être écrit en vert sur fond bleu etc etc...

Quel est le principal défaut de Internet Explorer qui va nous gêner ?
La bonne réponse était : Il ne connaît pas certaines possibilités du CSS et en affiche mal d'autres
Explications : Il ne connaît pas certaines possibilités du CSS et en affiche mal d'autres
C'est le CSS qui est assez mal compris par Internet Explorer et qui nous posera quelques soucis... Mais nous apprendrons à les contourner.

Ainsi se termine notre premier chapitre Smile

On n'a fait que se préparer, voir de quoi on allait parler, et télécharger les programmes qui nous seront utiles.
Le blabla s'arrête là, dans le prochain chapitre on commence à rédiger notre première page en XHTML !