Cours autotutoral : Créer des pages WEB facilement.

(Partie I ; se poursuit avec le cours Gérer un site WEB facilement

Principe de cet exercice :

Exercice guidé il n'est fourni que par le WEB, par souci de cohérence entre les moyens employés et la matière enseignée.

Il peut bien sûr être imprimé, de même que tous les documents fournis par les nombreux liens inclus. Aucune documentation papier n'est fournie autrement, que chacun se sente libre d'imprimer ce qu'il juge nécessaire. Nous pensons que cela mène en fait à moins de gaspillage de papier.

Index

1. Comprendre
2. Créer une page simple contenant du texte, une structure et une mise en forme simple.
3. Ajouter dans votre page quelques images et un tableau. Créer une deuxième page.
4. Ajouter à votre page quelques liens à l'intérieur du document, vers votre deuxième page, et vers d'autres sites.
5. Quelques ressources pour progresser.
6. Suite du cours

Comprendre :

Comprendre ce qu'est HTML.

Dans Firefox, choisir une page simple (celle-ci par exemple) sélectionner l'option Code source de la page dans le menu Affichage.

Ne pas s'affoler.

Référence sur le le code HTML :

• Introduction

Une page simple :

Prendre le texte du document (ici en format .txt) de départ :

• Via le WEB : Tout le dossier des documents de départ (texte et images)

Ouvrir le logiciel KompoZer (menu Démarrer, puis Programmes, sélectionner ensuite Nvu et encore Nvu)

• Dans le cas où vous n'avez pas KompoZer à disposition, il est possible de le télécharger ici.

Copier tout le texte et le coller dans KompoZer (Coller sans mise en forme dans le menu Edition). On pourrait aussi Exporter depuis l'application, mais les filtres de conversion font presque tous un travail lamentable et surtout impossible à modifier après). Vous constatez que l'ensemble du texte a été copié.

Attribuer le style Titre 1 au titre un titre.

Idem pour les sous-titres.

Mettre quelques éléments en gras, en italique.

Créer une liste numérotée (par exemple une Table des matières au début)

Donner le Titre de la page (Titre et propriétés de la page dans le menu Format).

C'est ce nom-là qui apparaîtra dans la barre de titre de Firefox. (Tout en haut de la fenêtre)

Sauver votre page (bouton Enregistrer) 

Ouvrir la page avec Firefox (Aperçu dans le navigateur dans le menu Fichier ou bouton Navigateur). Observer l'effet, noter les éventuelles différences.

Sauver votre document dans un dossier réservé à votre site, avec un nom qui soit tout de suite compatible avec les serveurs possibles.
(Quelques consignes de nommage).

Vous devriez avoir quelque chose dans le genre de ceci (Page 1 version 1).

Images :

Créer un dossier images dans votre dossier de site pour ranger les images que vous allez utiliser sur vos pages.

Ne pas oublier de placer le(s) éventuel(s) fichier(s) image dans le dossier images, près de votre document HTML.

Copier les images dans ce dossier images.

Intégrer chaque image dans KompoZer (sélectionner l'emplacement dans la page, cliquer l'icône Image et puis cliquer sur Parcourir... pour sélectionner l'image.

Définir les propriétés de l'image.

(voir Comment introduire des images dans votre page WEB)

Tableaux :

Ajouter un tableau.

voir Comment utiliser les tableaux.

Ajuster la taille des cellules, leur espacement, leur couleur de fond etc.

Sauver votre page.

Vous devriez avoir quelque chose dans le genre de ceci (Page 1 version 2).

Créer une 2ème page, par exemple à partir de ces fichiers (texte et image)

Explorer comment les tableaux peuvent permettre d'obtenir des mises en page assez précise en réalisant une deuxième page.

Vous devriez avoir quelque chose dans le genre de ceci (page 2 Artisanat).

Si possible, faire aussi une page 3, par exemple à partir de ces fichiers (texte et image), en vue d'obtenir quelque chose dans le genre de ceci : (page 3 Musique)

Liens dans le document et vers d'autres documents :

Rendre active la table des matières ; créer des liens vers chaque élément défini dans la table. Créez un renvoi vers le haut de la page depuis le bas de chaque chapitre (par exemple avec une image d'un bouton flèche).Comment créer des liens dans la page et vers d'autres pages ?

Créez un lien vers une autre page (Votre 2ème page (celle-ci) dans notre exemple).

Etablir un ou plusieurs liens vers une page WEB sur Internet. Par exemple vers : le guide de madagascar

Vous devriez avoir quelque chose dans le genre de ceci (Page 1 version 3).

Final

 Tester les liens externes en les vérifiant directement sur la page en cliquant sur le bouton Navigateur.

Créer une page d'entrée sur votre site :

Allez sur le serveur à l'adresse de votre site, pour les étudiants iTIC TECFA :

Trouvez votre adresse ici : http://home.etu.unige.ch/~login_etudiant) trouvez la page modèle qui est prévue pour vous.

La page modèle doit s'appeler index.htm. C'est le point d'entrée sur votre site. Ouvrir la page dans KompoZer (PUBLIC.WWW dans votre espace personnel H: de l'Université ou avec le client SFTP depuis chez vous) et modifiez-la à votre goût, créez des liens vers vos pages. Puis, sauvez la page et observez la page sur votre browser.

Poser sur le serveur

Si possible, travaillez votre document directement sur le serveur.

Si cela n'est pas possible, sauvez votre travail, envoyez-le à vous-même par courrier électronique (E-mail) ou conservez-le sur disquette si vous pratiquez encore ce support...

N.B. Pensez à prendre tous vos fichiers : les images aussi.

La suite de ce cours est ici : Partie II gérer un site WEB !