Définition du Cours CPTIC 176

Exercice du cours :

Le contenu de cet exercice guidé est fourni sur le WEB, par souci de cohérence entre les moyens employés et la matière enseignée. Seul un court mémo, (fil conducteur), est distribué sous forme papier.

Ce document, de même que tous les documents fournis par les nombreux liens inclus peuvent être imprimés.

- Un cours de référence sur Home Page et la création de pages web est maintenu à jour sur le site du CPTIC, 

- F. Lombard a produit quelques (!) documents remarquables depuis plusieurs années :

- Voir aussi les excellentes notes et remarques de B.Gisin sur ces cours

Index

  1. Introduction au HTML
  2. Présentation et préparation de l'exercice
  3. Notions de texte et de mise en forme
  4. Gestion des images
  5. Création de tableaux
  6. Gestion des liens
  7. Album photo
  8. Images réactives
  9. Notion de modèles
  10. Cadres (frames)
  11. Transfert sur le serveur
  12. Un zeste de javascript
  13. Quelques notions sur les sons
  14. Ressources générales sur la production de sites WEB
  15. Bouquet final

1. Introduction au HTML

Référence sur le cours "La création de pages web, introduction".

Référence sur le cours "La création de pages web, bases du html" et Fiche info du Club Internet "Introduction au Format HTML"


2. Présentation et préparation de l'exercice

Vous avez pris des documents, vous êtes donc prêt à réaliser un bout de site personnel. Avant toute chose, réfléchissez bien à la structure de votre site, à la navigation, faites un petit croquis. Créez ensuite un dossier sur votre poste (dans Users sur PC, dans Documents sur Mac) et commencez à élaborez vos pages.

Vous n'avez pas pris de documents : nous avons donc préparé du matériel pour que vous puissiez réaliser un site sur l'Australie.

word pour PC

word pour Mac

appleworks pour PC

appleworks pour Mac


3. Notions de texte et de mise en forme

Vous allez copier le texte d'un document Word ou Appleworks et le coller dans une nouvelle page Home Page.
Vous le mettrez en forme (enrichissement et coloration, etc.)

Pour ce faire, procéder de la façon suivante :

Le résultat de votre travail sera nommé australie.html.

Si vous avez le temps, créer la page generalites.html (pas de caractère accentué !).

Prenez l'habitude de garder ouvert votre traitement de textes et le logiciel Home Page;
vous éviterez ainsi les temps fastidieux de chargement des logiciels qui fracturent votre rythme de travail.

Remarques :


4. Gestion des images

Pour placer une image dans la première page, il y a plusieurs possibilités :

Sauvegarder votre page australie.html.

Complétez la page generalites.html avec ses images, ainsi que la page histoire.html.

Remarques :


5. Création de tableaux

Les tableaux sont utilisés, dans les pages HTML, pour :

Pour entraîner la première utilisation des tableaux, il suffit de compléter la page generalites.html en ajoutant les données tabulées du bas de page.

La réalisation des tableaux de présentation de la page australie.html (et de beaucoup d'autres ...) permettra d'expérimenter la 2e utilité des tableaux.

Reprendre et compléter la page generalites.html et insérer les 2 tableaux de présentation (armoiries et drapeau).

Remarques :


6. Gestion des liens

Créer des liens entre divers documents, c'est utiliser la propriété unique de l'hyper-texte !

Il existe plusieurs genres de liens :

Il vous faut maintenant créer les divers liens (externes et internes à votre site) dans toutes les pages déjà réalisées; donc reprendre et finaliser les pages australie.html, generalites.html et histoire.html.

Remarques :


7. Album photo

Les albums photo en ligne sont devenus très populaires.
Le principe est toujours le même : une page présente des vignettes et un clic sur l'une d'entre elles permet l'affichage de l'image, taille normale.
Ceci peut se faire à la main, ou à l'aide de logiciels, tels Photoshop (Mac / PC) ou Graphic Converter (Mac).
Il faut dans ce cas fournir un dossier d'images et le logiciel s'occupe de réaliser les vignettes, la page html qui les contient et les liens entre les vignettes et les images.
Dans le cas de Photoshop, il réalise aussi des pages html comprenant les images. Il peut en outre optimiser les images.

Le dossier des fichiers de travail sur l'Australie comprend un dossier d'images (images2). Vous pouvez donc utiliser ce dossier et créer un album photo avec Photoshop (menu Fichier, Automatisation, Galerie Web Photo ...).

La page ainsi créée sera nommée galerie.html.

Elle sera liée au site sur l'Australie via la table des matières de la page australie.html.


8. Les images réactives

Les images réactives ou images à liens multiples sont des images qui peuvent servir de point de départ de liens. Dans le cadre de l'interface de navigation d'un site, cela peut être une solution intéressante.

En voici deux exemples, un dans le cadre de la iclasse des Coudriers (avec une photo de classe comme point de départ pour la présentation des élèves), l'autre utilisé tout simplement dans le cours "La création de pages Web" qui sert de bandeau de navigation (voir ci-dessous).

Dans l'exercice proposé sur l'Australie, réaliser une page contenant une image réactive (page tourisme.html)

Remarques :


9. Une page modèle pour la cohérence de son site.

Lorsque le site contient plusieurs pages avec une structure identique, on utilisera avantageusement une page modèle. Celle-ci peut contenir une zone pour le titre, un bouton de retour vers le sommaire, un bandeau de navigation, une couleur de fond, ...

Utiliser un modèle c'est :

Ce modèle peut être sauvé simplement sous un nom reconnaissable dans le dossier de site.
Il peut aussi être enregistré en tant que fichier modèle html. Dans ce cas, cette page sera enregistrée dans le dossier Modeles_pages du dossier de Home Page.
Quitter alors le logiciel.
Pour ensuite créer une nouvelle page utilisant ce modèle, il faut choisir Nouvelle ... plutôt que Nouvelle page dans le menu Fichier et choisir le modèle que l'on vient de créer.
Parcourir éventuellement les différents modèles proposés.

Créer une page modele.html et la sauvegarder.

L'utiliser pour créer de nouvelles pages (de présentation identique).

Modifier les pages déjà créées (generalites.html, histoire.html, galerie.html, tourisme.html, ...) en y ajouter les bandeaux de haut et bas de page, ainsi que la flèche permettant le retour vers le haut de la page.

Remarques :


10. Cadres (frames)

Les cadres (frames) sont en principe à éviter; mais, toutefois, il existe de bons exemples !
Dans le cas d'un site interne, cela peut permettre une navigation agréable.

Vous pouvez aisément créer des cadres, par exemple pour une partie de votre site. Ici, dans le site sur l'Australie, la page Planification de ses vacances peut être construite en utilisant des frames. On utilisera alors un assistant qui nous guidera dans tout le processus de création. Un certain nombre de précautions doivent être prises quant au choix de ce qu'on appelle les cadres-cibles, donc dans le choix du cadre où s'affichera une page lorsque l'on clique sur un lien. Les fichiers word ou clarisworks se trouvent dans le dossier  fichiers_pour_planif.
Les fichiers html peuvent aussi être directement téléchargés: archive Mac, archive PC.

Remarques :


11. Transfert des pages sur le serveur persoedu

Vous allez placer votre site sur le serveur persoedu dans un dossier à votre nom.
Vous allez donc effectuer un transfert ftp. Pour cela, vous pouvez utiliser le logiciel Home Page qui comprend un outil permettant un tel transfert ou prendre un logiciel ftp. Nous avons choisi cette solution qui nous semble poser moins de problème.
Sur Mac, le logiciel choisi est Fetch et sur PC WSFTP_LE.
Différentes informations doivent être entrées pour paramétrer le logiciel Fetch sur Mac ou WSFTP_LE sur PC. Ces programmes peuvent être librement téléchargés.
Une fois ceci réalisé, vous pouvez transférer vos fichiers et voir ensuite le résultat dans le navigateur à l'adresse http://persoedu.ge.ch/nomp (nomp devant être remplacé par vos coordonnées personnelles).

Vous ne voyez toujours que la page "en travaux", et pas vos pages ... C'est normal, car le navigateur charge, depuis votre dossier, la page welcome.html et c'est elle qu'il va afficher.

Rapatrier la page welcome.html du serveur vers le disque dur et modifier cette page. Vous y mettrez par exemple un lien pointant vers votre site sur l'Australie.

Remarques :

La page welcome sera à la racine de votre zone sur le serveur et vos différents sites seront contenus dans des dossiers spécifiques.

Liens utiles :

Rappel :


12. Un zeste de javascript

Le javascript permet de faire exécuter de petits programmes en local, sur votre machine.
Sans entrer dans les détails (voir référence ci-dessous), on peut par exemple aisément réaliser le remplacement d'une image par une autre au survol de la souris par une seule ligne (mettons 1 1/2 !).

Dans le site sur l'Australie, 2 images de flèches pour remonter en haut des pages sont fournies. Il vous faudra ensuite mettre la main dans le code (Editeur source HTML) et copier les commandes nécessaires en les adaptant selon le modèle du cours.

       

Remarques :


13. Quelques notions sur les sons

L'incorporation de sons ne devrait pas poser de problèmes, oui mais voilà, certaines des balises utilisées sont reconnues par un navigateur mais pas l'autre, et ceci depuis une certaine version. Sans parler des différences entre plates-formes et des réglages propres à chaque machine.
Pour ceux qui seraient intéressés à l'utilisation de sons, nous vous renvoyons aux ressources citées plus bas.

Vous trouverez néanmoins des fichiers sons à incorporer (dossier medias), par exemple dans la page aborigenes.html.

Remarques :


14. Ressources générales sur la production de sites WEB

Vous trouverez ci-dessous quelques références pour vous aider dans l'élaboration de vos sites.
Envisager la circulation dans votre site globalement .
Une des meilleures références, qui intègre à la fois la dimension pédagogique et la conception est le Guide de conception pédagogique et graphique d'un site éducatif sur le réseau Internet Université Laval).

Exemples nombreux pour le cours : hit-parade / musée des horreurs !

Pour des conseils de conception :

Une page de ressources (sites d'images, scripts prêts à l'emploi, tutoriels, ...).

Pour continuer à progresser, consulter également les archives du Club-internet du CPTIC.

Si vous réorganisez le site à la suite de ces réflexions, vérifiez ensuite à nouveau tous les liens.


15. Bouquet final

Sauvez tout votre site sur votre zone persoedu.

Appréciez le chemin parcouru !

N'oubliez pas de remplir la fiche d'évaluation ici (choisir le cours 176 dans le menu déroulant).


 

Ch.Oïhénart et A. Sartoretti   23.10.2003

Merci à F.Lombard