Une page Web

Créer une page Web

Les sites Web sont généralement créés grâce à des logiciels relativement chers (DreamWeaver, FrontPage,...), mais le simple bloc-notes permet de créer de belles pages ergonomiques pour autant que l'on connaisse bien le langage HTML.

Nous utiliserons donc le bloc-notes.

Vous y avez accès dans le menu "Démarrer" → "Programmes" → "Accessoires" → "Bloc-notes".

Ouvrez le bloc-notes, et vous obtenez une fenêtre vide avec un petit nombre de commandes spartiates: c'est le bloc-notes!

Construire une page Web

Une page Web est constituée de 3 zones:

une zone HTML qui englobe toute la page
une zone HEAD qui correspond à la tête
- qui ne contiendra aucun élément à afficher
- qui contiendra différents éléments spéciaux tels que
  - le titre de la page (qui apparaîtra dans le navigateur, mais pas dans la page)
  - le copyright éventuel
  - un résumé du site
  - les mots clés
  - des indications pour les moteurs de recherche
  - des informations concernant les styles
  - des entêtes java
  - ...
une zone BODY qui contiendra tous les éléments affichés dans la page.

Vous pouvez taper ces différents éléments dans votre fenêtre du bloc-notes (pas ce qui est écrit en vert). Faites-le maintenant en utilisant le multi-fenêtrage de votre ordinateur.

<HTML>
<HEAD>
Contenu de la tête (rien d'affichable)
</HEAD>
<BODY>
Contenu du corps de la page (tout ce qui sera affiché)
</BODY>
</HTML>

Observez qu'une balise ouvrante (délimitée par les crochets "<" et ">") est généralement complétée, tôt ou tard, par sa balise fermante (balise souvent identique délimitée aussi par les crochets mais complétée du signe "/", ce qui donne les délimiteurs "</" et ">").

Tapez maintenant quelques mots dans le corps du texte de votre (première?) page Web

Sauvegarder une page Web

Attention: veillez préalablement à avoir créé votre répertoire racine dans l'espace "Projets" → "Sites6ett" → "espace à votre login" → "Racine".

Vous pouvez sauvegarder votre page grâce au menu "Fichier" → "Enregistrer".

Vous obtiendrez alors la fenêtre de sauvegarde standard dans laquelle vous ferez attention de sauvegarder votre fichier au bon endroit.

Mais attention, vous devez

sélectionner le type "Tous les fichiers" (voir schéma ci-dessous)
donner un nom qui se terminera par ".html" ou ".htm"
qui contiendra
- aucun accent, cédille,...
- aucun élément de ponctuation (point d'interrogation, apostrophe, virgule, point,...)
- aucun espace
- en résumé, uniquement les caractères suivants:
  - le caractère "_"

De plus, comme votre site sera stocké sur "un vrai serveur", la prise en compte des minuscules et majuscules aura une importance capitale :), notamment dans les références des hyperliens et des images.

Si vous voulez que cette page soit la page qui s'ouvre d'office quand on accèdera au répertoire, vous devez l'appeler "index.html" ou "index.htm" ou "default.html" ou "default.htm". Naturellement, il ne peut exister qu'un seul fichier portant ce nom dans chaque répertoire sous peine de créer des conflits d'ouverture.

Afficher une page Web

Le plus simple est d'aller directement double-cliquer sur son icône.

Mettez vos différentes fenêtres en veille (ne les fermez pas, ce serait une grande perte de temps), allez dans le dossier dans lequel vous venez de sauver votre page HTML et double-cliquez dessus. Votre navigateur par défaut va s'ouvrir et afficher la page en question.

Modifier une page Web

La modification d'une page Web se fait toujours en 5 étapes (on suppose que le bloc-notes est ouvert avec le texte de la page en question et que le navigateur est en train de l'afficher: vous constatez une erreur...):

Dans la barre de commutation (en dessous de l'écran), cliquez sur le bouton représentant le bloc-notes (la page du bloc-notes apparaît alors à l'écran)
Effectuez les modifications voulues dans le texte de la page
Enregistrez les modifications grâce au menu "Fichier" → "Enregistrer"
Dans la barre de commutation (en dessous de l'écran), cliquez sur le bouton représentant la page Web (la page Web apparaît alors à l'écran)
cliquez sur le bouton de mise à jour ou rafraîchissement de la page, et le tour est joué.

Il est temps maintenant d'essayer les différents types de balises que vous trouverez dans les chapitres précédents.

Bon travail.

◊ ◊ ◊