Les notions de bases de l'informatique.

En guise de préambule je tiens à préciser que ce chapitre n'est pas essentiel à la création de votre site Web, toutefois nous allons aborder des notions importantes qui permettront de mieux comprendre le fonctionnement et les bases de l'informatique.

Voici les notions que nous allons aborder

La mise en page de votre texte brut.

Ici nous allons vous permettre de rendre votre site plus agréable pour vous ( et pour ceux qui iront voir le code source de votre page ) et vous permettre de vous y retrouver dans les longues pages que vous écrirez.

L'indentation

C' est la première chose qui est apprise dans tout les cours d'informatique, un site mal indenté et vous êtes sûr qu'au bout d'une dizaine de lignes vous ne saurez plus ou vous en êtes.

Qu'est ce qu'une indentation ?
L'indentation est l'action qui permet d'ajouter des caractères de tabulation dans un fichier texte. ( dixit wikipedia )
En clair c'est une façon d'organiser votre texte à l'aide de tabulations.
Vous aurez souvent des blocs à écrire sous une même balise, il est alors préférable d'ouvrir votre balise de créer une sorte de marge qui décalera tout votre texte. une fois le texte saisit vous fermerez votre balise dans la marge. Ainsi imaginons que vous avez plusieurs balises ouvertes, vous aurez ainsi autant de marges que de balises ouvertes.

Un exemple ?

Faites un clique droit sur cette page et sélectionner "afficher la source" sous Internet Explorer ou encore "code source de la page" sous mozilla. Vous avez sous les yeux le code qui a permit de créer la page que vous êtes entrain de lire. Regardez la balise body puis la balise p. Cette mise en page vous permettra aussi de ne pas oublier de fermer vos balises ou encore d'éviter d'ouvrir deux fois la même balise. Comprenez vous alors l'interêt de l'indentation ?
(Au passage vous aurez apprit à regarder le code HTML d'une page Web ;) )

Les commentaires

N'hésitez pas à bourrer votre code de commentaire
rappel : tout ce que vous mettrez entre "<!--" et "-->" ne sera pas prit en compte, vous pourrez y marquer n'importe quoi.
Regardez le nombre de commentaire que j'ai mit dans cette page (clique droit afficher source), ça me permet même de mettre en valeur, d' encadrer, de mettre des post it quand je relirai mon code et caetera.

L'arborescence.

L'arborescence en général.

Si vous ne connaissez pas ce terme il va falloir très vite vous familiariser avec lui. Pour mettre votre site en ligne vous devrez tout connaître.
Une arborescence permet d'organiser les données en mémoire ou sur disque, de manière logique et hiérarchisée.
Et dans arborescence, il y a arbre !
Vous l'aurez comprit ça marche tout pareil qu'un arbre généalogique, à ceci prêt qu'on ne va pas classer des enfants mais des dossiers !
Voici comment marche votre PC, si vous vous trouvez sur Windows (désolé pour les autres, mais le principe reste le même !)
En bas de votre arbre, le tronc commun est votre poste de travail.
Ensuite se répartissent plusieurs disques dur (C: D: E:... ), d'éventuels lecteurs et caetera de la manière suivante :
shéma arborecence
Nous allons travailler dans les disques dur, mais tout marchera de la même façon avec les lecteurs.
Bien entendu, vos noms de dossiers ne s'appellent pas A1, C3, A213 mais des noms comme mes documents, photo, musique...
A chaque dossier correspond donc un chemin, et vous pourrez aisément le retrouver en faisant un clique droit sur le fichier puis propriété, regardez alors dans emplacement.
Votre chemin commencera toujours par une lettre suivi de : . C'est la racine du disque dur dans lequel vous vous trouvez, le plus courant est C: .
par exemple le chemin du dossier A213 dans notre exemple de tout a l'heure sera C:\A\A2\A21\A213 ce qui signifie aller dans le disque dur C: puis dans le fichier A puis dans A2 puis dans A21 puis dans A213.
Voila pour le principal !

L'arborescence dans un site Web.

Une page HTML est bourrée de lien, d'images, et fait très souvent appel à d'autres éléments extérieurs qui parfois ne se trouveront pas dans le même dossier.
On ne va pas parler des liens et des images en particulier mais juste de la manière d'accéder aux dossiers où ils se trouvent.

Première chose très importante. Sous Windows les dossiers sont séparés par des anti-slash (\), l'html les séparera par des slashs (/)

Les extensions possibles.