Créer sa page en HTML I

Il faut tout d'abord, créer un dossier à l'intérieur de Mes documents.
A l'intérieur de ce dossier, on crée :
- un sous-dossier (pour recevoir les images),
- une première page que l'on nommera index.htm.

C'est l'armature minimale et indispensable pour la création d'une page web.

Contenu du dossier site

Dans le champ Adresse, remarquer que l'on est à l'intérieur du dossier site.
A l'intérieur de ce dossier, on a le dossier images, et le fichier index.htm.

Prendre l'habitude d'utiliser des caractères minuscules pour nommer pages et dossiers. Pas de caractères spéciaux, et pas d'espaces.

1 Créer les dossiers :

Il faut d'abord créer un nouveau dossier à l'intérieur duquel on enregistrera la page, et tous les éléments constitutifs de cette page.
En même temps, on créera un sous-dossier images.

1 Créer le dossier site :
- double-cliquer sur Mes documents,
- cliquer avec le bouton droit à l'intérieur de la fenêtre,
- sélectionner "Nouveau" puis "Dossier",
- renommer le dossier : site

2 Créer le dossier images :
- double-cliquer sur site,
- créer un dossier à l'intérieur,
- renommer le dossier : images

2 Créer la page index.htm :

On peut déjà créer un "embryon" de page, qu'on modifiera ultérieurement :

1 Ouvrir le Bloc-notes :
- menu Démarrer, Programmes, Accessoires, Bloc-notes.

2 Copier-coller le texte suivant :

<HTML>
<HEAD>
<TITLE>Ma page</TITLE>
</HEAD>
<BODY>
<P>bonjour</P>
</BODY>
</HTML>

3 Enregistrer le document :
- menu Fichier, Enregistrer...,
- aller dans le dossier site,
- nommer le document : index.htm.

C'est l'extension .htm qui détermine le format du document.
C'est grâce à cette extension que celui-ci pourra être ouvert avec Internet Explorer.

Voici donc l'armature du site créée :
- un fichier index.htm, qui donnera accès aux autres pages créées ensuite, à l'aide de liens hypertexte.
- un dossier images, qui contiendra les images, logos, bandeaux qui orneront les pages.

On peut déjà :
- double-cliquer sur le fichier index.htm
... et constater que son contenu s'affiche bien à l'intérieur d'une fenêtre d'Internet Explorer.

Méthode de travail :

Pour travailler sur une page, ou l'ensemble d'un site, il faut :
- accéder au contenu du site (pages et dossier),
- modifier le document en cours,
- visualiser les modifications.

On aura donc les trois fenêtres suivantes :
- le dossier site : pour ouvrir les documents,
- le Bloc-notes, pour modifier la page en cours,
- Internet Explorer, pour visualiser les modifications.

On cliquera sur les trois boutons de la barre des tâches...

Créer un raccourci du dossier site sur le Bureau pour pouvoir y accéder facilement.

1 Pour modifier le fichier index.htm :

- sélectionner la fenêtre site, - cliquer avec le bouton droit sur index.htm, - sélectionner edit dans le menu contextuel.
Le document index.htm s'ouvre dans le Bloc-notes.

2 Pour visualiser les modifications :

- enregistrer le document index.htm,
- sélectionner la fenêtre site,
- double-cliquer sur index.htm.
Le document index.htm s'ouvre dans Internet Explorer.

Les fois suivantes :
- enregistrer le document index.htm,
- sélectionner la fenêtre Internet Explorer,
- cliquer sur Actualiser (ou appuyer sur F5).

Premiers éléments de code HTML :

Il y a quelques points essentiels qu'il faut connaître avant tout. Car c'est souvent la cause des problèmes qu'on rencontre...

Nom des fichiers :

Le fichier de base du site doit s'appeler obligatoirement : index.htm ou index.html

Pour les autres pages et tous les autres fichiers (image, son, etc.) :
- utiliser des caractères minuscules (lettres ou chiffres), éviter les majuscules.
- pas de caractères accentués (é, è, ç, à, etc.)
- pas d'espace (ou utiliser le caractère "_").

Chemin d'accès :

Au minimum, on disposera de deux dossiers :
- 1 - un dossier site, contenant l'ensemble des fichiers et dossiers du site,
- 2 - un dossier images, placé à l'intérieur du dossier site, et contenant les images du site.

Normalement :
- toutes les pages web crées seront à l'intérieur du dossier site,
- toutes les images seront à l'intérieur du dossier images.

Pour tout fichier placé directement dans le dossier site (comme index.htm), il n'y aura pas de problème d'accès. On dit que le fichier est placé à la racine du site.

Par contre, pour afficher une image placée à l'intérieur du dossier images, il faudra préciser son chemin d'accès :
exemple, pour une image nommée dessin.gif : images/dessin.gif

Format des fichiers image :

Afin de limiter la taille de ses pages, et donc d'accélérer leur chargement, il faudra bien choisir le format des fichiers image (voir) :

- JPG ou JPEG : quand il s'agira de photos,
- GIF : quand il s'agira de dessins au nombre de couleurs limité (256 couleurs).

Sur ce site, tous les fichiers image sont des fichiers .gif

Il sera préférable d'indiquer les dimensions de l'image dans le code HTML (voir), ainsi qu'une description de l'image.

Logiciels disponibles :

Paint Shop Pro : Shareware très complet pour dessiner et travailler sur des images.
http://www.jasc.com/

IrfanView (Iview) : Programme gratuit, en anglais mais simple à utiliser. Il permet de redimensionner ou de changer le format des fichiers images.
http://www.irfanview.com/

On peut bien sûr utiliser Paint livré avec Windows...
On peut télécharger des fichiers images sur des sites spécialisés (voir).