Créer une page en HTML (1)

• Les préparatifs
• Méthode de travail
  
• Premiers éléments de code HTML
• Nom des fichiers
• Chemin d'accès
• Format des fichiers image

 

Une page web, un site perso, c'est très simple à réaliser.

Le but de cette page est d'indiquer les instructions de base nécessaires à la conception d'une page web.

J'ai aussi réalisé une page pour créer son site avec Dreamweaver 2 (voir)

 

HTML et XHTML :

Le XHTML est la nouvelle norme succédant au HTML.
En pratique, il y a peu de différences entre les deux.

Quelques changements :

- Toutes les balises doivent avoir une fermeture. Cela concerne :
le retour de ligne = <br> devient <br /> (ne pas oublier l'espace avant le /)
les images = <img src="images.jpg"> devient <img src="images.jpg" />

- Toutes les balises doivent être écrites en caractères minuscules.

- La balise <b> (= bold = gras) est remplacée par la balise <strong> quand il s'agit de marquer un mot ou passage important (particulièrement utile pour la consultation des pages par les mal-voyants).

Pour plus d'informations, voir la page :
http://openweb.eu.org/articles/html_au_xhtml/

 

Les préparatifs...

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

La page d'accès d'un site Internet s'appelle toujours : index.htm ou index.html

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

Pas à pas :

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.

2 Créer la page index.htm :

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

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.

3 Tester la page index.htm :

Afin de vérifier que tout fonctionne...

 

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 (ou l'éditeur de pages HTML), 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 :

2 Pour visualiser les modifications :

 

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 spéciaux (:, /, $, etc.),
- pas de caractères accentués (é, è, ç, à, etc.),
- pas d'espace (ou utiliser le caractère "_"),
- utiliser, de préférence, des noms de 8 caractères maximum pour une meilleure compatibilité.
Penser que les pages doivent pouvoir être consultées par n'importe quel navigateur (Internet Explorer, Netscape, Opera, etc.) sous n'importe quel système d'exploitation (Windows, Macintosh, Linux...)

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, les fichiers image sont des fichiers .gif ou jpg

Il sera préférable d'indiquer les dimensions de l'image dans le code HTML (voir), ainsi qu'une description de l'image.
Cela se fera facilement avec un éditeur de page HTML, comme Dreamweaver :

L et H : dimensions de l'image,
Src : chemin d'accès de l'image,
Sec : description de l'image.

Vérifier la taille d'une image avant de l'inclure dans une page :

- une image de 4 Ko mettra 1 seconde à s'afficher avec une connexion par modem,
- une image de 20 Ko mettra 5 secondes,
- etc.

 

Créer des images "cliquables"

Au lieu de placer une image de grande taille sur une page web, on peut :
- créer une "miniature" de cette image avec un logiciel comme IrfanView (voir plus bas),
- placer un lien hypertexte sur cette image.
Ainsi, en cliquant sur l'image miniature, on affiche l'image en taille réelle.

Exemple :

Code HTML :

Remarquer :
- le lien hypertexte (a) englobant l'image affichée (img),
- les deux images : img1090.jpg et img1090p.jpg et le "p" pour "petit" les différenciant.

 

Il ne faut pas redimensionner l'affichage de l'image en modifiant les dimensions affichées dans la balise SRC.
Ceci pour deux raisons :
- l'image "rapetissée" sera toujours chargée dans sa version en grandeur réelle,
- le navigateur devra recalculer la dimension de l'image pour l'adapter aux dimensions désirées.

 

On devra souvent, recadrer, redimensionner ou modifier le format des images ou photos utilisées. On utilisera un logiciel prévu à cet effet :

Logiciels disponibles :

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

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

The Gimp : Logiciel freeware très complet. 5.91 Mo.
XNview : Freeware également, et de bonne qualité. 1.8 Mo.
http://www.gratilog.net/xoops/modules/mydownloads/singlefile.php?cid=207&lid=644

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).