Maintenant que nous sommes équipés pour coder, nous allons devoir créer un environnement pour y mettre nos fichiers.
En ce qui concerne le HTML et le CSS, vous pouvez coder où vous voulez sur votre ordinateur. Je vous invite donc à créer un dossier par projet, dans lequel vous allez retrouver les fichiers de votre site internet.
Créez donc un dossier nommé : Mon premier site.
À l'intérieur, vous allez trouver 3 dossiers et 2 fichiers :
- un dossier nommé images,
- un dossier nommé fonts,
- un dossier nommé js,
- un fichier nommé index.html,
- un fichier nommé style.css.
Notre arborescence de fichiers.
Le dossier images
Ce dossier va contenir toutes les images de votre site.
Attention ! Il est important de mettre les images dans ce dossier. Si vous voulez utiliser une image de votre bibliothèque de photos, copiez-la et collez-la dans ce dossier.
En effet, si vous laissez votre photo ailleur sur votre disque dur, lors de la mise en production celle-ci ne sera pas mise en ligne et les internautes ne pourront pas la voir !
Le dossier fonts
Ce dossier contiendra les polices de caractère utilisées sur votre site internet. En effet, les internautes n'ont pas forcement les mêmes polices d'installées que vous. Pour qu'ils puissent voir la même chose que vous sans avoir à installer de nouvelles fonts, nous allons les mettre à disposition sur notre site.
Le dossier js
Ce dossier contiendra les codes en javascript de votre site. Nous ne verrons pas dans ces cours comment coder en JS, mais vous allez rapidement en avoir besoin ;)
Le fichier index.html
Il s'agit de la page d'accueil de votre site.
Attention ! Il est important de nommer ce fichier index. Il s'agit d'une norme, tous les serveurs cherchent en premier un fichier nommé comme ça. S'il n'y en a pas, un message d'erreur apparaîtra.
Notez l'extension de fichier .html
Tous nos fichiers de code HTML auront cette extension.
Pour créer ce fichier :
- Ouvrez SubliText 3.
-
Créez une nouvelle page avec
Ctrl + N
. -
Enregistrez cette page avec
Ctrl + S
. - Dans la boite de dialogue qui vient d'être ouverte, sélectionnez le dossier Mon premier site et nommez le index.html.
Le fichier style.css
Il s'agit du fichier dans lequel nous allons coder en CSS.
Il est important de noter que le HTML et le CSS ne se codent pas dans le même fichier.
Pour créer ce fichier, la manipulation est la même :
- Ouvrez SubliText 3.
-
Créez une nouvelle page avec
Ctrl + N
. -
Enregistrez cette page avec
Ctrl + S
. - Dans la boite de dialogue qui vient d'être ouverte, sélectionnez le dossier Mon premier site et nommez le style.css.