Définition du Cours CPTIC 80

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, un 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 (11.2000).

Index

  1. Introduction au HTML
  2. Création d'une ou deux pages pages de texte structuré
  3. Mise en place d'images
  4. Utilisation de tableaux (création éventuelle d'autres pages)
  5. Ajouts de liens dans les pages (à l'intérieur du document, vers une autre page et vers d'autres sites)
  6. Transfert du dossier de site
  7. Quelques ressources pour progresser.
  8. Final


Introduction :

Référence sur le cours "La création de pages web, introduction" : Un peu de réflexion ...

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"

Dans Netscape, choisir une page simple (celle-ci par exemple) activer le menu : View /Page source.

Ne pas s'affoler !!!


Une page simple :

Prenez le texte du document (ici un document ClarisWorks ou word) de départ :

Ouvrir le document Madagascar, version Appleworks ou Word, copier le texte, ouvrir ensuite Home Page, coller le texte (on pourrait aussi Exporter depuis l'application, mais les filtres de conversion font presque tous un travail lamentable et surtout impossible à modifier après).

Ajoutez un titre.
Ajoutez des sous-titres.
Mettez quelques éléments en gras, en italique.

Créez une liste numérotée (par exemple une Table des matières au début), observez la différence entre les modes :

  1. édition  et
  2. prévisualisation 

Donnez le Titre de la page (Options du document, onglet paramètres).

Sauvez votre page. Dans les préférences de Home page on règle les valeurs par défaut. Ouvrez-la avec Netscape et aussi avec Explorer. Observez l'effet, notez les éventuelles différences.

Sauvez votre document dans un dossier réservé à votre site ( site_nom par exemple), 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 Madagascar version 1).

Si vous avez le temps, créez une page jeux à partir du document ClarisWorks/Word "jeux"

Référence sur le cours "La création de pages web, Les bases de Home Page et Mise en page du texte"


Images :

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

Définir les propriétés de l'image (taille, bordure, alignement, etc). Voir Fiche info du Club Internet Intégrer les images dans ses pages WEB.
Faites de même pour d'autres images.

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

Créez un dossier images dans votre dossier de site pour les y ranger.

Il y a une bibliothèque d'images nombreuses fournie avec Home Page : Menu File, Bibliothèques, Ouvrir... Ouvrir bibliothèque.

N'oubliez pas de cliquer le bouton regrouper  pour copier près de votre document HTML le(s) éventuels fichiers image issu(s) de bibliothèque(s). Choisissez l'option dossier multimédia nommé comme ci-dessus images.

Si vous avez le temps, Complétez la page jeux avec deux images, ce qui devrait donner quelque chose comme (Page jeux).

Référence sur le cours "La création de pages web, Images et Bibliothèques "


Tableaux :

Créez une 2ème page (par exemple à partir du document ClarisWorks/Word "artisanat")

Créez un tableau vierge ou en important des données tabulées. Testez ensuite les différentes possibilités d'édition du tableau et des cellules, notamment la largeur (automatique, en pixels, en pourcentage), l'espacement, la justification, la couleur, l'insertion d'images, l'insertion d'images en fond de tableau ou de cellules, la suppression de lignes et de colonnes, la gestion des cellules vides, etc (voir Fiche info du Club Internet Des tableaux dans ses pages web).

Sauvez votre page.

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

Explorez comment les tableaux peuvent permettre d'obtenir des mises en page assez précises en réalisant une troisième page, par exemple d'après le document ClarisWorks/Word "musique", en vue d'obtenir quelque chose dans le genre de ceci : (sans tableau : page Musique, version 1 / avec tableau : page Musique, version 2 )

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


 Liens dans le document et vers d'autres documents :

Créez des liens entre vos documents html (par exemple entre la première page et la page sur l'artisanat). Utilisez différentes façons de le faire.

Créez un lien depuis la page madagascar vers le site du guide de Madagascar (http://www.madagascar-guide.com). Ce lien peut être mis sur l'image de la carte.

Etablissez des liens de navigation à l'intérieur du document madagascar, permettant à partir de la table des matières d'atteindre les différentes parties de la page. Cela passe par la pose préalable d'ancres (attention à la contrainte liées aux caractères).

Vous pouvez aussi importer une flèche (par exemple avec une image d'un  bouton flèche trouvé dans les exemples fournis avec Home Page ou dans les Bibliothèques) et mettre un lien qui permette de remonter en haut du document depuis le bas de chaque chapitre.

Créez un lien pour le courrier (mailto: nom@machin.com)

Document de F. Lombard "Comment créer des liens dans un document HTML"

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

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


Transfert du dossier de site

Nous ne verrons pas ici le transfert ftp vers un serveur, ce qui souvent pose de très nombreux problèmes, surtout en fin d'après-midi. Nous réserverons ce point pour le séminaire 176.
Par contre, nous testerons localement le site, en le transférant, comme dans une classe, vers une autre machine.

Testez d'abord tous les liens en actionnant le bouton Prévisualiser dans Navigator ou dans Explorer
 
Copiez ensuite votre site dans le dossier prévu de la zone Echanges du serveur.

Rapatriez votre site vers une autre machine et testez le !

N'oubliez pas qu'une page HTML ne contient pas d'images et que celles-ci doivent se trouver à côté. Pensez aussi au nom des fichiers, des ancres, des images qui ne doivent contenir aucun caractère exotique (accent, espace, ...). Eviter aussi si possible les majuscules.

Votre site fonctionnera peut-être très bien en local,
mais lorsqu'il se trouvera hébergé sur un serveur,
il en ira peut-être autrement :
ces règles concernant les noms sont absolues.

 


Quelques ressources pour progresser.

Internet est truffé de ressources remarquables sur le WEB-même. Mais il faut connaître le WEB pour les trouver.
Le problème est de sortir de cette sorte de cercle infernal.

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

Autres références :


Final

Si vous avez posé vos pages (regroupées dans un dossier site-nom) dans le dossier prévu de la zone Echanges du serveur, elles seront sauvegardées en fin de journée.

 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; attention à celles qui sont issues des bibliothèques. La fonction "regrouper" rendra ici de précieux services.

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

Rendez-vous bientôt cours 176 pour la suite : créer un site WEB !

 

counter A. Sartoretti et Ch.Oïhénart 21.10.2002

Merci à F.Lombard