ࡱ > I
D bjbj
' * ] 8 : T
d ~
" 8 D - $ k _ L L L ~
L ~ L @ z l
Guide de la Home Page
lusage de l'enseignant
Comment raliser facilement un site Internet
pour sa classe ou son tablissement scolaire.
Ce document peut tre librement reproduit et distribu tel quel au sein de la communaut ducative, sous forme de copie papier ou de fichier informatique.
Il est galement disponible en tlchargement sur le site :
http://members.tripod.com/~educaweb/
Edition possible conditionne un accord pralable de lauteur.
Contacts : educaweb@iname.com
1998 - Philippe BOSQUET
SOMMAIRE
CHAPITRE I - Un site Internet (Home Page) pour mon cole
I-1) Introduction
I-2) Le rseau Internet
I-3) Quest-ce quune page personnelle (Home Page) ?
I-4) Utilisations possibles lcole
I-5) Matriel ncessaire
I-6) Concevoir une page personnelle
6.1) Gnralits, principes
6.1.1) Organisation du site
6.1.2) Programmation : vive la mixit !
CHAPITRE II - Le langage HTML
II-1) Votre premier document HTML
II-2) Le texte, les diffrentes tailles de caractres,
la mise en page
II-3) Les couleurs
II-4) Les images
II-5) Mise en page 1 (lments de base)
II-6) Mise en page 2 (les tableaux)
II-7) Les listes
II-8) Les liens
8.1) Les liens externes
8.2) Les liens internes
CHAPITRE III - Utilisation du logiciel Composer (diteur HTML)
III-1) Prsentation et configuration de Composer
III-2) Crer un nouveau document (page web) dans Composer
2.1) Le fonctionnement de Composer
2.2) Formatage du texte
2.3) Ajouter des images
2.4) Crer des liens
2.5) Crer un tableau
III-3) Editer avec Composer une page dj existante
CHAPITRE IV - Publier son site sur Internet
IV-1) Le principe
IV-2) Sur quel serveur domicilier votre page ?
IV-3) Comment faire connatre votre page ?
CHAPITRE V - Pour aller plus loin...
V-1) Personnaliser lenvironnement graphique de votre page
V-2) Quest-ce quun GIF anim ?
V-3) Les formulaires, les compteurs
V-4) Le multi-fentrage
V-5) Le son et la vido sur Internet
V-6) Le langage Java
ANNEXES
A) Petit lexique HTML, liste des caractres accentus, codes couleurs
B) Comment tlcharger ou se procurer les logiciels cits ici ?
C) Tlcharger NETSCAPE COMMUNICATOR
D) Le carnet des bonnes adresses
CHAPITRE I
I-1) INTRODUCTION
Lobjet de ce document est de fournir des informations et des conseils pratiques tous les enseignants souhaitant se lancer dans laventure de la cration dune page personnelle pour leur tablissement scolaire ou leur classe.
Il existe sur le march une multitude douvrages traitant de ce sujet, mais leur contenu, souvent trop dense ou trop technique, a de quoi dcourager les non-spcialistes que nous sommes.
Je vais donc tenter de montrer ici que crer une page personnelle est la porte de tout enseignant motiv, ayant il est vrai une connaissance suffisante de la manipulation dun micro-ordinateur et une pratique pralable du rseau Internet.
Ce document est conu comme une mthode, raison pour laquelle je vous encourage le parcourir du dbut la fin, mme si certains lments vous sont dj connus.
Le texte se suffit lui-mme, mais vous pourrez lexploiter de faon beaucoup plus interactive en vous connectant simultanment sur le site dEducaweb (http://members.tripod.com/~educaweb) que jai cre spcialement cet effet. Vous pourrez y retrouver en ligne tous les exemples cits au cours de ce guide et de nombreuses informations pratiques concernant la cration dune page web.
Internet volue trs rapidement, des ajouts et des modifications ce document pourront donc tre disponibles en tlchargement sur la page dEducaweb.
Certains paragraphes seront prcds par les icnes suivantes, destines attirer votre attention sur :
une information dordre technique.
un conseil ou une ide dexploitation.
Les illustrations correspondent pour Macintosh (MAC) au systme OS8 (trs semblable au systme 7.x dans sa prsentation) et Windows 95 pour les ordinateurs Pc (PC).
I-2) LE RESEAU INTERNET
Internet est en fait un vaste rseau dordinateurs connects entre-eux. Le rseau peut-tre compar une immense toile daraigne, do son nom anglais,
le Web.
En utilisant ce rseau, les ordinateurs vont pouvoir changer des informations, pouvant contenir du texte, des images, du son ou de la vido. Lutilisateur dInternet disposera donc d une immense banque de donnes dans laquelle il pourra rechercher des renseignements sur peu prs tous les sujets.
Toutes ces informations sont stockes sur de puissants ordinateurs appels serveurs. Ces serveurs sont accessibles 24h/24 au utilisateurs du rseau. Pour y accder, il suffit de disposer dun ordinateur multimdia, dun modem, et dun logiciel appel navigateur (browser en anglais). Il faut galement prendre un abonnement auprs dun fournisseur de service Internet, qui permettra la connexion au rseau.
Concrtement, on connecte lordinateur, par lintermdiaire du modem, une prise tlphonique. Le fournisseur de service fournit un numro de tlphone et un code daccs au client. Il suffit alors lordinateur de composer ce numro pour accder au rseau. Cest par lintermdiaire du rseau tlphonique que vont circuler les informations entre votre ordinateur et le serveur de votre fournisseur de service. Depuis peu, il existe galement des possibilits de connection par cable fibre optique beaucoup plus rapide. A terme, ce mode de connection devrait se gnraliser.
Lutilisateur dInternet, en plus de son abonnement, devra payer la communication tlphonique locale au prorata du temps pass sur le rseau, et en fonction du mode de tarification en vigueur dans son pays (au forfait, comme au Etats-Unis, ou la minute, exemple franais). Ceci ne concerne videmment pas les heureux bnficiaires dune connection par cable, indpendante du rseau tlphonique.
I-3) QUEST-CE QUUNE PAGE PERSONNELLE (HOME PAGE) ?
Les informations sont stockes sur les serveurs sous forme de pages. Cette appellation tient au fait quune fois affiche lcran, la prsentation des informations ressemble la mise en page dun journal, avec titres, textes et documents iconographiques. La ressemblance sarrte cependant ici car une page Internet est un vritable document interactif, dont les mots ou les images peuvent former des liens avec dautres pages ou dautres serveurs. (Il suffit de cliquer sur ces liens, en gnral des mots souligns, pour accder dautres informations).
Un ensemble de pages est appel site. Ce site dispose dune adresse propre, qui permet aux utilisateurs dInternet dy accder. Voici par exemple ladresse du site d Educaweb :
http://members.tripod.com/~educaweb/
Ces adresses, tout comme des numros de tlphone, figurent dans des annuaires en ligne, souvent regroupes par catgorie (ducation, actualits, etc...). Il existe aussi des pages spcialises dans la recherche dadresses, appeles moteurs de recherche (adresses en annexe D).
Une page personnelle (ou site) est donc un ensemble de documents ou dinformations, mis la disposition des utilisateurs du rseau Internet. Elle peut avoir un caractre informatif, publicitaire et bien-sr.... pdagogique!
I-4) UTILISATIONS POSSIBLES A LECOLE.
Lobjet de ce document tant une approche technique et pratique du processus de fabrication dune page personnelle, je me contenterai de lister ici quelques utilisations pdagogiques possibles. Voici en outre deux ouvrages pouvant vous permettre dapprofondir le sujet :
-INTERNET A LECOLE EN FRANCE de Jean-Louis Durpaire.
CNDP/CRDP de Poitou-Charentes, collection Dossiers Hors-Srie de
lIngnierie Educative.
-APPRENDRE AVEC LE MULTIMEDIA- O en est-on?
Pdagogie RETZ- CEMEA.
Quelques pistes dexploitation :
-Compte-rendu dun projet dcole (ou de classe).
-Publication dune fiche technique (apprendre transmettre un savoir).
-Journal scolaire ou inter-tablissements.
-Echange dinformations entre deux ou plusieurs classes.
-Publication dun conte, dune histoire cre en classe.
-Etc...
A titre dexemple, visitez les pages des coles dj connectes pour y chercher des ides de ralisation, adresses disponibles en Annexe D.
Voici entre-autres ladresse du site que jai ralis pour le Collge Franco-Mexicain de Guadalajara, Mexique, qui sera cit titre dexemple plusieurs reprises dans ce guide : http://www.geocities.com/Athens/Olympus/6599
I-5) MATERIEL NECESSAIRE.
Lquipement en dur (hardware)
-Un ordinateur multimdia, de type PC (processeur 486 ou mieux Pentium, quip de Windows 95/98) ou MACINTOSH (processeur LC040 ou mieux PowerPC), quip dun cran couleur de bonne qualit et denceintes audio (incorpores ou extrieures). Pour pouvoir travailler plus confortablement, votre ordinateur devra disposer dun minimum de 16 mgas de RAM (mmoire de travail).
-Un modem dune vitesse minimum de 28.8 Kbps. (Plus la vitesse du modem est rapide, plus vite les informations arriveront votre ordinateur.) Si vous ne possdez pas encore de modem, quipez-vous dun modle au nouveau standard V90 56 Kbps, qui vous permettra dconomiser sur le temps de connection et de tlcharger des logiciels beaucoup plus rapidement.
-Un scanner de table couleur (quipement optionnel mais recommand pour pouvoir ajouter des photos ou des dessins sa page...)
Les logiciels (softwares)
Connaissant les problmes de budget pour de nombreux tablissements scolaires, je ne citerai ici volontairement que des logiciels pouvant tre tlchargs gratuitement sur Internet.
Les procdures de tlchargement et les adresses o trouver ces logiciels seront cites en annexe B, C et D.
Lutilisation de ces logiciels peut tre soit compltement gratuite (logiciels freewares), soit autorise lessai pendant un temps limit au terme duquel vous devrez en principe rtribuer directement lauteur dudit logiciel (logiciels sharewares).
Lquipement logiciel de base pour pouvoir commencer travailler est le suivant :
-Un logiciel navigateur. Deux firmes se partagent actuellement le march : Netscape avec son Navigator/Communicator et Microsoft avec son Internet Explorer.
Ces deux logiciels offrent des caractristiques trs similaires. Jai cependant choisi ici de citer Netscape Communicator titre dexemple dans ce document, car cest le logiciel que jutilise habituellement. Ce logiciel est gratuit et librement tlchargeable sur Internet. (voir annexe C).
-Un logiciel de traitement de texte, le plus simple possible, comme par exemple Simple Text pour les utilisateurs de Macintosh ou Notepad (ou Wordpad) pour les utilisateurs de PC.
-Dautres logiciels plus spcifiques seront cits en situation dans le chapitre suivant.
Note lattention des allergiques la langue anglaise:
Le logiciel Communicator a t traduit en plusieurs langues, dont le franais. Certains pourront donc stonner que jutilise ici la version anglaise. Il ne sagit pas dun choix idologique mais plutt technique. La version en anglais est souvent plus fiable car elle dispose des toutes dernires modifications et corrections apportes au logiciel, pour rgler les bugs (ou dfauts de fonctionnement) constats par les utilisateurs. Il faut souvent attendre un peu pour que la version en franais quivalente arrive sur le march.
Rien ne vous empche cependant dutiliser une version en franais, il vous faudra juste traduire les diffrents termes utiliss ici, rien de bien compliqu...
I-6) CONCEVOIR UNE PAGE PERSONNELLE.
6.1) Gnralits, principes.
6.1.1) Organisation du site.
Comme nous venons de le voir, une page personnelle (site) est constitue dun ensemble de documents pages relis entre-eux par des liens.
Avant de commencer, il est toujours utile de dfinir, crayon et papier en main, laspect et le contenu du site que lon souhaite crer. Un site doit toujours contenir une page daccueil, sur laquelle on prsentera le contenu et le sommaire interactif qui permettra daccder aux autres pages.
Le travail consistera alors concevoir chaque document individuellement, pour ensuite relier lensemble la page daccueil.
Si dans le cas de ldition papier (exemple dune page de journal) le texte et les documents iconographiques sont fixs sur la mme page, la logique est diffrente pour concevoir un document destin Internet : le texte et les images sont considrs par lordinateur comme des fichiers spars. (On pourra donc avoir des fichiers texte, des fichiers image et des fichiers audio ou vido).
Le corps du document sera constitu dun fichier texte, contenant le texte afficher et les instructions donnes lordinateur concernant la mise en page des fichiers images. Exemple: Va chercher les images et affiche-les au dessus et au dessous du texte que je viens de taper.
A lcran, on obtiendra alors une mise en page ressemblant en tous points celle dun document imprim.
6.1.2) Programmation : vive la mixit!
Pour concevoir un document, deux solutions soffrent vous:
- Programmer directement vos pages dans un langage de programmation, tout fait accessible au nophyte, appel HTML.
- Utiliser un logiciel diteur, au fonctionnement assez similaire un traitement de texte, qui se chargera lui-mme du travail de programmation.
La solution que je prconise est une solution mixte, essayant de concilier les avantages des deux mthodes ci-dessus nommes.
Il existe en effet dans le commerce des diteurs HTML qui en principe vous permettent de concevoir votre site sans avoir apprendre la moindre ligne de langage HTML.
Cette solution, de toute faon plus onreuse, ne vous pargnera pas le temps assez long passer pour apprivoiser le logiciel en question, et a le gros dsavantage de laisser le concepteur dun site dans lignorance totale des principes qui rgissent la conception de ses documents. En cas de problme, il est souvent beaucoup plus rapide deffectuer des modifications directement en HTML que dutiliser un diteur.
Encore une fois, il nest pas question ici de faire de vous des experts en programmation HTML, mais de vous donner les bases pour que vous puissiez vous tirer daffaire en toute circonstance.
Je vous conseille donc de raliser les quelques exercices proposs au cours de ce guide, afin de vous familiariser avec les bases du langage HTML.
Nous aurons ainsi loccasion de raliser ensemble un premier site titre dessai, celui de lcole de Cliqueville sur le Web . Par la suite, je vous proposerai une dcouverte guide de Composer, lditeur inclus dans Netscape Communicator.
Tout ceci devrait vous permettre de raliser assez rapidement votre premire page Internet, et surtout den comprendre les principes de fonctionnement. Libre vous par la suite, si vous souhaitez aller plus loin, de vous procurer un diteur plus performant, du type Adobe Page Mill ou Microsoft Front Page, ou lun des nombreux ouvrages traitant de la programmation HTML disponibles en librairie.
Je nai jamais tudi linformatique, je ne connais rien la programmation!
Rassurez-vous, moi non plus ! Les bases du langage HTML sont trs simples apprendre et le gros du travail sera effectu par le logiciel diteur. Pour ce travail, nous utiliserons le logiciel diteur Composer intgr au logiciel de navigation Netscape Communicator. Au bout de quelques semaines de pratique, vous serez capable vous-aussi de concevoir et dditer votre propre site Web!
CHAPITRE II
Dans ce chapitre, je vous propose un survol des principaux lments du langage HTML, utiliss pour concevoir une page Internet.
Chaque notion est illustre par un exercice dapplication, qui nous permettra de raliser peu peu notre site-modle, celui de lcole de Cliqueville sur le Web.
II-1) Votre premier document HTML.
Pour travailler la conception de votre site, vous naurez la plupart du temps pas besoin dtre connect Internet. Les documents conus seront stocks dans le disque dur de lordinateur. Cest seulement dans un deuxime temps que vous devrez les envoyer (tlcharger) sur un serveur afin de les rendre consultables sur Internet. (Cette procdure sera dtaille dans le chapitre IV.)
Le langage HTML.
Tous les documents publis sur le Web sont crits en langaga HTML. Il sagit dun code qui une fois lu par le logiciel de navigation (par exemple Netscape Navigator), lui permet de comprendre comment il doit afficher et organiser les informations (textes, images, etc...) sur lcran de lordinateur.
Pour crire ce code, on peut utiliser nimporte quel traitement de texte. Voici un exemple de document HTML basique:
Ecole de Cliqueville sur le Web.
Les mots entre crochets <> sont des lments de code appels balises HTML. Ce sont ces balises qui vont donner les instructions de mise en page du document lcran.
Dans lexemple ci-dessus, seul apparatra lcran le texte :
Ecole de Cliqueville sur le Web.
Voil la signification de ces balises :
(dbut de document HTML)
(dbut du corps du document, c.a.d de la zone afficher lcran)
Mon premier document (texte afficher lcran)
(fin du corps du document)
(fin de document HTML)
En HTML, il faut toujours respecter la typographie indique lintrieur des crochets de balises. Ne pas rajouter ni supprimer despaces. Vous pouvez par contre utiliser indiffrement majuscules ou minuscules pour taper ces mmes balises ( ou par exemple).
Voici un autre document :
Ecole de Cliqueville sur le Web
Cette page est encore en cours de réalisation.
Merci pour votre patience.
Signification des nouvelles balises :
(affiche au centre de lcran tout ce qui est compris entre les deux balises)
(dtermine la taille des caractres afficher entre les deux balises)
(break= passage la ligne suivante)
(trace une ligne horizontale)
Vous aurez certainement not galement laspect trange du mot ralisation. Tous les caractres accentus doivent en effet tre taps laide dun code spcifique:
Pour obtenir on doit taper é
è
à
On sy fait trs rapidement et de toutes faons vous naurez pas vous en soucier la plupart du temps car le logiciel diteur sen chargera automatiquement... (Un tableau de ces diffrents caractres accentus figure en annexe A).
Aprs ce petit expos thorique, passons dsormais la pratique ! Je vous propose de programmer le petit exemple ci-dessus.
Les procdures tant lgrement diffrentes en fonction du type de machine utilise, rapportez-vous au paragraphe qui vous intresse (MAC ou PC).
MAC/PC :
1) Allumer lordinateur.
2) Ouvrir Netscape Communicator.
(Si vous ne lavez pas encore fait, tlchargez gratuitement la version de Netscape Communicator qui correspond votre type dordinateur-procdure et adresse en annexes B et C).
3) Ouvrez maintenant le logiciel SimpleText (Mac) ou Notepad (PC). (Vous devez avoir dsormais les deux logiciels, Simple Text /Notepad et Netscape Communicator, ouverts sur votre ordinateur).
4) Dans Simple Text /Notepad, ouvrez un nouveau document et tapez intgralement le texte de notre exemple (Attention ne pas insrer despaces lintrieur des crochets de balises <>) :
Ecole de Cliqueville sur le Web.
Cette page est encore en cours de réalisation.
Merci pour votre patience.
Simple text Notepad
5) MAC : Sauvez le document, dans un nouveau dossier que vous appelerez Ecole de Cliqueville, en le nommant index.html .
PC : Sauvez le document, dans un nouveau dossier que vous appelerez Ecole de Cliqueville, au format Text Document, en le nommant index.htm :
Utilisateurs PC :
Vos documents devront toujours tre sauvegards au format Texte le plus simple possible. Si vous utilisez la place de Notepad un autre traitement de texte plus labor (Worpad ou Word par exemple), noubliez pas de reprciser ce format chaque fois que vous sauvegarderez votre document.
Tous les documents textes que vous crerez pour le Web devront porter le suffixe .html sur Mac et le suffixe . htm sur PC.
Le document appel index.html (Mac) ou index.htm (PC) constituera la page daccueil de votre site. Cest toujours celui-ci que lordinateur lira en premier quand on se connectera votre adresse.
6) MAC : Passez maintenant Netscape Communicator. Dans le menu File, slectionnez Open page in Navigator et ouvrez le document index.html que vous venez de crer en cliquant sur Open :
PC : Passez maintenant Netscape Communicator. Dans le menu File, slectionnez Open page .
Dans la fentre de dialogue, cliquez sur le bouton Navigator (Open location or file in Navigator) puis cliquez sur Choose File . Vous accderez au selecteur de fichier suivant :
Dans le dossier Ecole de Cliqueville, slectionnez le document index, que vous venez de crer avec Notepad, et cliquez sur Open:
Vous reviendrez alors la fentre de dialogue prcdente. Cliquez maintenant sur Open pour ouvrir le document dans Navigator .
MAC/PC : Voici ce que vous devriez voir lcran :
Exemple daffichage sur Mac. Le rsultat est identique sur PC dans la fentre daffichage. Seule la prsentation du logiciel Navigator (icnes et barre de menu) diffre lgrement entre les deux types de machines.
Vous venez de programmer votre premier document HTML !
Je vous conseille maintenant de crer dautres documents, en utilisant les balises HTML que vous avez dj vues, afin de vous familiariser avec la dmarche ci -dessus.
MAC : Communicator dispose dune touche Reload , qui vous permet de recharger votre fichier aprs y avoir effectu des modifications (par exemple des changements au sein de votre code HTML).
Dans certains cas, il est possible que celles-ci napparaissent pas quand vous essayez de visualiser le rsultat dans la fentre de Communicator. Ceci est d au fait que le logiciel dispose dun espace mmoire, appel mmoire cache, dans lequel il stocke les pages que vous avez dj affiches afin de pouvoir y revenir plus rapidement. Quand vous effectuez une modification dans votre code, sans changer le nom de votre fichier, il est courant que Communicator raffiche lancienne version quil a garde en mmoire. A chaque fois que vous rencontrerez ce problme, cliquez lcran sur la touche Reload tout en maintenant enfonce la touche Option du clavier de votre ordinateur. Vous obligerez ainsi Communicator afficher la version la plus rcente du fichier modifi.
Il semblerait que ce problme ne se pose pas sur la version PC.
II-2) Le texte, les diffrentes tailles de caractres, la mise en page.
Le texte que vous tapez au format HTML la capacit de sadapter automatiquement lespace disponible en largeur sur votre cran, de faon rester toujours lisible. Ceci peut-tre trs pratique mais peut aussi compltement modifier votre mise en page si on le consulte sur un cran de taille diffrente.
Voici donc quelques balises qui vous permettront de mieux dominer votre mise en page :
(passer la ligne)
votre texte
(paragraphe/fin de paragraphe : insre une ligne blanche au dbut et la fin du paragraphe encadr par les balises)
votre texte (no break : interdit le passage la ligne au milieu du texte ou des lments encadrs par les balises)
Taille des caractres:
Si vous ne spcifiez rien, votre texte saffichera lcran dans un format standard. Pour obtenir dautres tailles et types de caractres, vous devez utilser les balises suivantes :
votre texte
(H1 correspond au caractre le plus grand, H5 au plus petit)
votre texte
votre texte
votre texte
votre texte
texte en italique
texte en gras
Par exemple, si vous tapez ce petit texte HTML ...
Format h1
Format h2
Format h3
Format h4
Format h5
Format standard
Format h3 italique
Format h3 gras
...voici alors ce qui apparatra lcran :
Encore une fois, je vous encourage faire quelques essais personnels pour bien comprendre lutilisation de ces nouvelles balises.
II-3) Les couleurs.
Le format HTML vous permet aussi de dfinir la couleur de votre texte ou du fond de votre cran. Les couleurs sont dfinies elles-aussi par des codes. (Vous trouverez un tableau des principales couleurs et des codes correspondant en annexe A.)
Voici de nouveau un petit exemple dapplication avec les balises HTML correspondantes (tapez ce texte sur votre traitement de texte, et visualisez le rsultat avec Navigator):
TEXTE NOIR
TEXTE ROUGE
TEXTE BLEU
TEXTE VERT
Signification des nouvelles balises:
(couleur du fond de lcran, #FFFFFF correspondant au code couleur pour le blanc)
texte (dtermine la couleur du texte encadr entre les deux balises, #FF0000 correspondant au code couleur pour le noir)
Note: Si vous ne spcifiez aucune couleur, le texte sera crit en noir sur un fond gris.
Modifions alors notre site de rfrence. Il est bien-sr inutile de tout retaper. Ouvrez simplement dans votre traitement de texte le document index.html (ou .htm) dj cr et effectuez les modifications ncessaires.
Ecole de Cliqueville sur le Web.
Cette page est encore en cours de réalisation.
Merci pour votre patience.
Visualisez le rsultat obtenu dans Navigator, en chargeant cette nouvelle version de notre document index.html.
II-4) Les images.
Nous allons maintenant apprendre insrer une image (dessin, photo, etc...) au sein dun document HTML.
Quels types dimages puis-je utiliser pour ma page?
Il existe deux types de formats principaux lisibles par les logiciels de navigation :
-Le format GIF, gnralement utilis pour les dessins.
-Le format JPG, gnralement utilis pour les photos.
O se les procurer?
Vous pouvez bien-sr fabriquer vos propres images laide dun logiciel de dessin, mais le plus simple au dpart est de commencer par emprunter les images ou les icnes qui vous intressent directement sur le web. Il existe mme des sites spcialiss mettant votre libre disposition une banque dimages que vous pourrez utiliser sur vos page (voir en annexe C ou sur le site dEducaweb).
Voici la dmarche suivre :
1)- Connectez-vous sur Internet et allez sur le site dEducaweb.
(http://members.tripod.com/~educaweb/)
2)- Cliquez sur le lien Les images dans la page "Aide en Ligne".
3)-MAC : Cliquez sur limage Ecole de Cliqueville sans relcher le bouton de la souris.
Dans le menu qui saffiche, choisissez save this image as... puis sauvez le document ecole.gif (nom de fichier correspondant cette image) dans le dossier Ecole de Cliqueville en cliquant sur save:
-PC : Cliquez sur limage Ecole de Cliqueville avec le bouton droit de la souris, choisissez Save Image As puis sauvez le document ecole (image au format GIF) dans le dossier Ecole de Cliqueville en cliquant sur Save :
En utilisant la mme procdure, vous pourrez copier ainsi et rutiliser nimporte quelle image ou photo rencontre sur le web. (Attention cependant aux copyrights!)
Pour visualiser limage que vous venez d emprunter, retournez au menu File de Navigator :
MAC :
- Slectionnez Open page in Navigator dans le menu File .
Ouvrez le fichier image ecole.gif (que vous venez de sauvegarder dans le dossier Ecole de Cliqueville), en cliquant sur Open .
PC :
- Slectionnez Open page .
- Comme prcdemment, cliquez sur Choose File pour accder au slecteur de fichiers. Slectionnez All Files (tous types de documents) dans le menu droulant en bas de la fentre, vous verrez alors apparatre le fichier image ecole que vous venez de sauvegarder.
Slectionnez-le, cliquez sur Open pour revenir la fentre prcdente, puis retournez dans Navigator en cliquant sur de nouveau sur Open.
MAC/PC : Limage saffichera alors en haut gauche dans la fentre de Navigator :
IMPORTANT : En suivant la mme procdure, tlchargez toutes les images contenues sur la mme page du site Educaweb, nous en aurons besoin pour la suite du travail. Sauvez bien ces images dans votre dossier Ecole de Cliqueville, au mme niveau que le document index.html (MAC) / index.htm (PC).
Vous devrez toujours placer vos images au mme niveau que vos documents HTML, dans le cas contraire, elles risqueraient de ne pas safficher. Vous obtiendriez alors lcran la place de limage licne qui indique que le logiciel na pas pu trouver limage recherche.
Pour viter ce genre de problme, rangez toujours au dpart tous les lments qui concernent votre page (documents HTML, images, etc...) dans un mme dossier, sans crer de sous-rpertoires.
Insrer une image dans un document HTML .
La balise permettant dinsrer une image est la suivante:
(format gif)
ou (format jpg)
Souvenez-vous quil est important de respecter la typographie exacte lintrieur des crochets de balises, ne supprimez ou ne rajoutez aucun espace ou caractre.
Nous pouvons donc maintenant rajouter une image notre page de rfrence.
Ecole de Cliqueville sur le Web.
Cette page est encore en cours de réalisation.
Merci pour votre patience.
Modifiez votre document de dpart dans Simple Text/Notepad et visualisez cette nouvelle version du document index.html/ index.htm dans Navigator. Voici ce que vous devriez obtenir lcran :
Utiliser une image comme fond dcran.
Il est possible dutiliser une image comme fond dcran (logo, photo ou trame de type papier-peint) sur lequel viendront se superposer les lments (textes et documents iconographiques) de votre page. Si limage choisie est plus petite que la fentre de Navigator, elle sera rpte autant de fois que ncessaire pour en recouvrir toute la surface.
Linstruction utiliser est la suivante :
ou
la place de ou de
Ajoutons donc maintenant un fond dcran notre page:
Nous allons utiliser une des images (cahier.gif) que nous avons dj empruntes au site dEducaweb (cf. le dbut de ce chapitre concernant les images).
Ecole de Cliqueville sur le Web.
Cette page est encore en cours de réalisation.
Merci pour votre patience.
Voici ce que vous devriez maintenant obtenir en visualisant la page dans Navigator. Le fond dcran uniforme a t remplac par un motif de type cahier dcolier :
Attention cependant la lisibilit de votre page quand vous utilisez cette fonction! Certains fonds trop contrasts peuvent rendre le texte illisible.
II-5) Mise en page 1 (lments de base)
Il existe des balises HTML dont le rle est dorganiser lemplacement des lments les uns par rapport aux autres dans la page. Vous en trouverez ici quelques exemples.
Aligner un texte et une image :
(Dans cet exemple, notre image sappelle teacher.gif .)
votre texte
(texte droite, align en haut)
votre texte
(texte droite, align au milieu)
votre texte
(texte droite, align en bas)
votre texte
(texte gauche, align en haut)
votre texte
(texte gauche, align au milieu)
votre texte
(texte gauche, align en bas)
- Insrer une image dans un texte :
Tapez ici votre texte....
(image gauche du texte)
Tapez ici votre texte....
(image droite du texte)
- Passer une ligne :
La balise (paragraphe), insre au milieu dun texte permet dinsrer une ligne blanche, ne pas confondre avec la balise
(break) qui permet juste de passer la ligne (quivalent du retour chariot sur une machine crire).
Je passe la ligne
et jinsre une ligne blanche.
Suite du texte...
Rappel : en utilisant les balises
paragraphe et
fin de paragraphe respectivement au dbut et la fin dun paragraphe, le logiciel passera une ligne au dbut et la fin de ce paragraphe.
Dbut du paragraphe......fin du paragraphe.
- Insrer des espaces blancs :
Dans un traitement de texte, vous utilisez les fonctions de tabulation ou la barre despacement pour commencer une phrase en la dcalant par rapport au reste de votre texte (alina). On peut simuler cette fonction en insrant un code ( ) lendroit o doit figurer un espace blanc (de la largeur dun caractre).
En voici un exemple:
bonjour
bonjour
bonjour
Vous obtiendrez alors laffichage suivant dans Navigator :
bonjour
bonjour
bonjour
En utilisant le mme code, associ la balise
, vous pourrez aussi obliger le navigateur insrer une ou plusieurs lignes blanches lemplacement de votre choix :
bonjour
bonjour
Affichage correspondant:
(Les deux mots sont spars par deux lignes blanches.)
bonjour
bonjour
- Laisser une marge gauche et droite dun paragraphe:
Il vous suffit dencadrer le paragraphe choisi par les balises et
.
Paragraphe dcaler
Compltons maintenant notre site avec quelques-uns des nouveaux lments que nous venons dtudier :
Ecole de Cliqueville sur le Web.
Cette page est encore en cours de réalisation.
Merci pour votre patience.
Notre école comporte cinq classes, du CP au CM2. Nous souhaitons grâce à ce nouveau site présenter notre travail, nos projets de classe, et entrer en contact avec d'autres écoles connectées, en France comme à l'étranger.
A très bientôt.
Voici cette nouvelle version de notre page affiche dans la fentre de Navigator :
Toutes les images conues pour le web ont ncessairement une forme carre ou rectangulaire. On peut cependant obtenir laffichage des formes rondes ou reproduisant exactement les contours dun dessin en utilisant une astuce qui consiste remplir le fond du cadre dune image avec une couleur unique, qui deviendra transparente laffichage. (Le cadre autour de limage existera toujours mais il sera devenu invisible).
Ce type dimage, au format GIF, est appel GIF transparent. Le petit globe terrestre que nous venons dutiliser en est un exemple :
image relle affichage lcran
Dans ce cas prcis, nous avons dfini que la couleur noire deviendrait transparente laffichage.
On peut raliser des GIFs transparents partir de certains programmes de dessin ou laide de petites applications spcifiques, comme le programme Transparency pour Macintosh. (Voir en annexe D les adresses o se procurer ces programmes sur le web).
II.6) Mise en page 2 (les tableaux)
Les tableaux (tables en anglais) sont quasiment indispensables quand il sagit de raliser une mise en page un peu plus labore, ou requirant laffichage dun grand nombre dinformations lcran.
En effet, les instructions classiques de mise en page ont pour caractristique de rester mobiles dans lespace de la fentre, afin de sadapter la taille de votre cran. Ceci est une fonction trs intressante pour le texte, car celui-ci adaptera son formatage automatiquement en fonction de la largeur disponible dans la fentre daffichage. Par contre, elle peut totalement dsorganiser votre mise en page, en affichant par exemple des lments que vous souhaitiez aligner au dpart horizontalement, les uns en dessous des autres.
Lexemple ci-dessous illustre ce problme :
(Note : Linstruction absmiddle permet de centrer les images les unes par rapport aux autres)
Visualisation avec une fentre plein-cran:
(Les lments sont correctement aligns.)
Visualisation avec une fentre plus troite:
(Les lments ne sont plus aligns car lespace disponible nest pas suffisant.)
Pour y remdier, nous allons donc utiliser un tableau, lintrieur duquel nous allons fixer les diffrents lments de la mise en page. Le rsultat obtenu lcran sera alors indpendant de la taille de la fentre utilise.
Reprenons lexemple ci-dessus, cette fois-ci en utilisant un tableau:
Signification des nouvelles balises
- : dbut et fin du tableau
- : dfinit lpaisseur du cadre autour du tableau. Si la valeur de x est gale 0, les bords du tableau deviennent invisibles.
-
: dbut et fin de ligne dans le tableau.
- | : dbut et fin de case ou de colonne dans chaque ligne du tableau.
Voici ce que donne notre nouvel exemple dans la fentre de Navigator:
(Les bords du tableau sont apparents.)
et le mme exemple avec :
(Les bords du tableau sont invisibles.)
Mme en modifiant la largeur de la fentre daffichage, les lments restent en place, respectant la mise en page voulue lorigine. Pour pouvoir visualiser lensemble de la page, Navigator a automatiquement cre un curseur horizontal au bas de celle-ci.
Note : Pour cas simple, nous aurions pu obtenir le mme rsultat en utilisant les balises et . Le tableau ne devient indispensable que dans le cas o il sagit daligner et de fixer des lments (textes, images, etc...) la fois horizontalement et verticalement dans la page.
Syntaxe de base pour crer un tableau :
dbut du tableau, dfinition de la largeur du cadre
dbut de la premire ligne (range)
| 1re case
| 2me case
fin de la premire ligne
dbut de la deuxime ligne (range)
| 1re case
| 2me case
fin de la deuxime ligne
fin du tableau
La syntaxe HTML pour raliser des tableaux est trs complte, et quelquefois difficile matriser au dpart. Pour cette raison, je vous conseille dutiliser lditeur chaque fois que vous aurez besoin den raliser un (Paragraphe III-2-5).
Quelques balises supplmentaires seront cites en annexe A, pour ceux qui souhaitent approfondir la question. Un tutoriel (en anglais) trs bien conu est galement disponible ladresse : http://members.xoom.com/xoomhelp/tables/
II-7) Les listes
Une liste est une option de prsentation qui permet de raliser trs facilement un menu ou de prsenter des donnes sous forme de colonnes. Vous rencontrerez principalement deux types de listes sur le web : les listes numrotes et les listes non-numrotes.
Liste numrote (ordered lists):
dbut de liste numrote
- item a 1er lment
- item b 2me lment
- item c 3me lment
fin de liste numrote
Affichage dans la fentre de Navigator:
Liste non-numrote (unordered list):
dbut de liste non-numrote
- item a 1er lment
- item b 2me lment
- item c 3me lment
fin de liste non-numrote
Affichage dans la fentre de Navigator:
Ces deux types de listes comportent aussi des options, permettant den modifier la prsentation, remplacer les chiffres par des lettres ou les points par de petits cercles ou des carrs (voir en annexe A).
II-8) Les liens
Une page Internet est un document interactif. Elle contient de nombreux liens qui permettent de renvoyer un autre endroit dans le document, une autre page dans le mme site ou un site domicili sur un autre serveur.
Les liens sont donc des zones cliquables, qui peuvent tre constitues soit dun mot, soit dune image ou dune photo.
Par convention, les liens apparaissent lcran souligns quand il sagit dun mot ou dune phrase.
II-8-1) Les liens externes (vers lextrieur du site)
Dfinir un lien en HTML consiste donc associer un mot ou une image une adresse laquelle ils renvoient.
Nous allons maintenant ajouter notre page deux liens externes (cest dire renvoyant un autre site sur le web) qui renvoient la page daccueil dEducaweb, le premier partir du logo Educaweb et le deuxime partir du mot Educaweb.
Nous ajouterons aussi un type de lien particulier qui permettra denvoyer un Email au webmaster, cest dire la personne charge de la conception ou de la maintenance de la page (renvoyant ladresse Email dEducaweb dans cet exemple...)
Ecole de Cliqueville sur le Web.
Cette page est encore en cours de réalisation.
Merci pour votre patience.
Notre école comporte cinq classes, du CP au CM2. Nous souhaitons grâce à notre nouveau site présenter notre travail, nos projets de classe, et entrer en contact avec d'autres écoles connectées, en France comme à l'étranger.
A très bientôt.
Ecrivez-nous !
Site maintenu par
Educaweb
Voila laspect de notre notre page affiche dans Navigator :
Si vous dplacez la souris au dessus des liens que nous venons de crer, vous verrez apparatre au bas de lcran les adresses auxquelles ils renvoient.
Syntaxe utiliser pour crer des liens (externes)
- A partir dun mot ou dune phrase :
mot cliquable (renvoyant ladresse indique)
- A partir dun dessin ou dun photo:
Note : On peut faire disparatre le petit cadre bleu qui entoure normalement un lien image en ajoutant linstruction border=0 comme dans notre exemple :
Pour crer un lien destin envoyer un Email
partir dun lien-image:
ou partir dun lien-texte :
mots cliquables
II-8-2) Les liens internes (vers lintrieur du site)
Les textes HTML cits en exemple ici correspondent la version Mac. Ils sont strictement identiques sur PC, lexception du suffixe .html qui est videmment remplacer par .htm si vous travaillez sur ce type de machine.
Ces liens vont vous permettre de crer par exemple un index qui renverra dautres pages de votre site, et vice-versa.
Le site de lcole de Cliqueville ne comportant jusqu prsent quune seule page, nous allons donc crer maintenant deux autres pages (que nous nommerons CE1.html/CE1.htm et CM2.html/CM2.htm) , et nous relierons cet ensemble selon le schma suivant :
A laide de Simple Text/ Notepad, vous allez crer les deux documents suivants, correspondants lun la page de la classe de CE1 (CE1.html/CE1.htm) et lautre la page de la classe de CM2 (CM2.html/CM2.htm). Ces deux documents contiendront juste un titre et un lien permettant de revenir la page daccueil . Une fois taps, sauvegardez-les lintrieur du dossier Ecole de Cliqueville.
Vous remarquerez que la syntaxe HTML utiliser pour dfinir des liens internes est identique celle utilise pour les liens externes, lexception du libell de ladresse, qui consiste indiquer le nom de la page de destination, comme dans notre exemple :
Retour à la page d'accueil
Page de la classe de CE1 (CE1.html):
CLASSE DE CE1
Retour à la page d'accueil
Page de la classe de CM2 (CM2.html):
CLASSE DE CM2
Retour à la page d'accueil
Il ne nous reste plus qu ajouter notre page daccueil un index renvoyant aux pages de ces deux classes :
Page daccueil (index.html)
Ecole de Cliqueville sur le Web.
Cette page est encore en cours de réalisation.
Merci pour votre patience.
Notre école comporte cinq classes, du CP au CM2. Nous souhaitons grâce à notre nouveau site présenter notre travail, nos projets de classe, et entrer en contact avec d'autres écoles connectées, en France comme à l'étranger.
A très bientôt.
Ecrivez-nous !
Site maintenu par
Educaweb
Retournez maintenant dans Navigator et ouvrez la nouvelle page index.html/index.htm. Cliquez sur les liens pour aller sur la page des classes, puis pour revenir la page daccueil.
Ca marche!...
Flicitations, vous avez dsormais en main les lments ncessaires pour commencer laborer votre propre site. Continuez la lecture de ce petit guide pour apprendre (enfin!) utiliser lditeur HTML et tout ce qui concerne la publication de votre site sur le Web.
Ca marche pas!...
Pas de panique. Vrifiez tout dabord que les trois fichiers HTML (index.html, CE1.html et CM2.html) sont bien rangs dans le mme dossier (celui intitul Ecole de Cliqueville), si oui, vrifiez alors votre code ; il y a srement une petite erreur quelquepart dans le libell de vos liens.
CHAPITRE III
Utilisation de Composer, le logiciel daide la programmation intgr Netscape Communicator .
Ce chapitre ne constituera pas un mode demploi dtaill de ce logiciel, mais il mettra en vidence les principales fonctions utiliser pour vous simplifier le travail de programmation.
Composer est un diteur tout fait classique dans sa prsentation . Si vous disposez dun autre logiciel de ce type, vous pourrez sans trop de problmes transposer ce qui est expliqu ici pour en comprendre le fonctionnement.
III-1) Prsentation et configuration de Composer.
Pour crer un nouveau document dans Composer depuis la fentre principale de Navigator (MAC/PC), slectionnez dans le menu File : New Blank Page.
La fentre de Composer souvre alors, venant se superposer celle de Navigator.
En plus des traditionnels menus, Composer dispose de deux barres doutils en haut de lcran, semblables celles dun traitement de texte. La premire contient les fonctions ddition (copier, coller, ajouter une image, crer un tableau, etc...)
MAC :
PC :
et la deuxime les instructions de formatage pour le texte (fontes, couleurs, taille des caractres, alignement, etc...).
MAC :
PC :
Comme le disent si bien les anglo-saxons, Composer est un logiciel WYSIWYG (What You See Is What You Get), cest dire en bon franais : ce que vous voyez est ce que vous obtenez (cqvvecqvo, imprononable..!). En gros, cela veut dire que vous pourrez composer vos pages Web directement lcran, sans avoir la plupart du temps vous soucier du code HTML, un peu comme si vous criviez laide dun traitement de texte. Vous pourrez aussi utiliser les fonctions classiques de Copier/Coller pour le texte et les images.
En plaant le pointeur de la souris sur les diffrents boutons de la barre doutils, leur signification apparatra crite juste en dessous.
Commenons par configurer Composer:
Composer ne dispose pas de traitement de texte incorpor permettant de modifier le code HTML dans le texte. Nous allons donc configurer Composer de faon pouvoir utiliser automatiquement le traitement de texte extrieur (Simple Text/Notepad) qui nous permettra dagir directement sur ce code.
MAC : Dans le menu Edit, slectionnez Prfrences, vous obtiendrez alors la fentre suivante ( droite) :
b) Dans la liste des catgories gauche, slectionnez Composer puis, comme indiqu sur le document ci-dessus, crivez votre nom en face de Author Name.
c) Cliquez ensuite sur choose en face de HTML source (cadre External Editors) et selectionnez dans votre disque dur le programme simple text .
d) Aprs avoir slectionn simple text, cliquez sur open pour retourner dans la fentre prcdent, puis sur Ok pour retourner dans Composer.
PC : Dans le menu Edit, slectionnez Prfrences, vous obtiendrez alors la fentre suivante ( droite) :
b) Dans la liste des catgories gauche, slectionnez Composer puis, comme indiqu sur le document ci-dessus, crivez votre nom en face de Author Name.
c) Cliquez ensuite sur choose en face de HTML source (cadre External Editors) et selectionnez dans votre disque dur le programme Notepad .
d) Aprs avoir slectionn Notepad, cliquez sur open pour retourner dans la fentre prcdent, puis sur Ok pour retourner dans Composer.
III-2) Crer un nouveau document (page web) dans Composer.
Pour travailler, nous allons utiliser simultanment Navigator (fentre de navigation), Composer et Simple Text/Notepad.
Vous devez donc ouvrir une nouvelle page dans Navigator (New Navigator Window dans le menu File), une nouvelle page dans Composer ( New Blank Page dans le menu File) et une page blanche dans Simple Text/ Notepad (New dans le menu File).
Dcalez vos trois fentres lcran de faon pouvoir passer aisment de lune lautre par un simple clic.
Fonction de ces trois logiciels (dans le processus de programmation):
-Composer : conception et dition de la page (mise en place du texte, des images, etc...)
-Navigator : contrle de laffichage et de la mise en page pour le web
-Simple Text/ Notepad : dition et correction du code HTML (si besoin)
III-2-1) Le fonctionnement de Composer
Composer est un logiciel daide la programmation (diteur HTML), cest dire quil se chargera de rajouter les codes HTML votre document, de faon automatique et transparente. (Les codes napparatront pas lcran.)
A tout moment, vous pourrez cependant visualiser le code de votre page en utilisant Page Source dans le menu View, sans toutefois pouvoir le modifier dans cette fentre.
Premier exemple:
1) Dans la fentre de Composer, crivez Ecole de Cliqueville, tout comme vous le feriez dans un traitement de texte ordinaire.
2) Slectionnez maintenant Page Source dans le menu View. Vous obtiendrez alors, affich dans une nouvelle fentre, le code HTML suivant, gnr automatiquement par Composer et correspondant votre page :
(Version MAC)
Ecole de Cliqueville
(Version PC)
Ecole de Cliqueville
Vous reconnatrez sans problme la plupart des codes utiliss et rajouts par le logiciel, mis part tout ce qui est inclus entre les balises et , qui constitue lentte du document, et dont vous navez absolument pas vous proccuper! Il ajoutera entre-autres votre nom en tant que concepteur de la page, la version de Communicator utilise et le type de machine.
Attention cependant, vous ne pourrez dans cette fentre que visualiser le code source (HTML) de votre page, mais pas le modifier. Si vous souhaitez le faire, il vous faudra utiliser Simple Text/ Notepad, comme indiqu ci-dessous.
3) Cliquez dans le coin suprieur gauche de cette fentre pour la fermer (coin suprieur droit sur PC). Nous allons maintenant sauver le document que nous venons de crer dans Composer.
Slectionnez Save dans le menu File. Donnez un nom votre document, comme par exemple composer.html (MAC) ou composer (PC - Il est inutile ici dajouter le suffixe .htm), et cliquez sur Save.
(MAC) (PC)
(Sur la version PC, Composer vous demandera en plus de donner un titre votre page, titre qui saffichera en haut de la fentre de Navigator quand vous visualiserez celle-ci.)
4) Slectionnez HTML source dans le menu Edit partir de la fentre de Composer :
Votre document souvrira alors automatiquement dans Simple Text/Notepad. Vous pourrez maintenant effectuer les modifications suivantes dans le code HTML (centrage du titre et augmentation de la taille des caractres):
Ecole de Cliqueville
Note: Il est bien vident que ces mmes modifications pourraient facilement tre effectues directement dans Composer, il sagit juste dun exemple...
5) Sauvez la nouvelle version de composer.html /composer.htm et revenez dans la fentre de Composer, un message dalerte vous indiquera alors que le document a t modifi par un autre logiciel, et vous demandera si vous souhaitez afficher la nouvelle version.
(MAC) (PC)
Cliquez alors sur Reload (MAC) ou sur Yes (PC) et votre nouvelle page saffichera automatiquement avec les modifications que vous venez deffectuer:
6) Vrifiez maintenant laffichage dfinitif dans la fentre de Navigator. Pour ce, cliquez sur le bouton View/Preview in Navigator dans la barre doutils suprieure, ce qui aura pour effet dafficher votre page dans la fentre de Navigator, de faon identique ce que vous obtiendriez en la consultant sur le web.
Assimilez-bien cette procdure qui sera utiliser quel que soit le travail effectuer. Dans la plupart des cas simple, vous naurez pas besoin dagir directement sur le code, et vous pourrez travailler uniquement avec Composer mais noubliez pas que sagissant dun logiciel gratuit, il nest videmment pas aussi puissant que ses concurrents (Adobe Page Mill, Microsoft Front Page, etc...), qui font payer beaucoup plus chers leurs services. Dans certains cas, il sera donc indispensable de recourir la modification directe du code HTML, do lutilit de la premire partie de ce guide.
Habituez-vous donc lire le code de la page que vous venez de crer laide de Composer. Cest une excellente mthode pour dcouvrir le HTML car vous pouvez ainsi effectuer la dmarche inverse de la programmation, savoir raliser dabord (dans Composer) et tudier par la suite le code correspondant, gnr automatiquement par le logiciel.
Si vous souhaitez publier sur le web un texte dj existant, au format traitement de texte par exemple, inutile de tout retaper. Slectionnez votre texte et effectuez un copier/coller (copy and paste) dans la fentre de Composer. Votre texte sera ainsi automatiquement converti en HTML et vous naurez plus qu modifier sa mise en page le cas chant.
Passons maintenant lutilisation pratique de Composer...
III-2-2) Formatage du texte (fontes, couleurs, alignement)
Comme dans un traitement de texte classique, Composer vous permet de choisir plusieurs options de formatage de votre texte. Voici la signification des diffrents boutons :
Menu droulant, choix du standard de caractre
Choix du type de caractre (PC).
Menu droulant, choix de la taille du caractre.
Couleur du texte.
Caractre gras, italique et soulign.
Annulation des cinq fonctions prcdentes (retour laffichage standard, comme dfini par le premier menu droulant).
Liste non-numrote et liste numrote.
Tabulations.
Menu droulant, alignement du texte ( droite, au centre, gauche).
Vous pouvez bien-sr tout moment modifier votre travail, en slectionnant, un mot, une phrase ou un paragraphe entier, et en lui appliquant une nouvelle instruction de formatage.
-Pour slectionner un mot : double-cliquez sur celui-ci (il saffichera alors sur fond noir).
-Pour slectionner une ligne entire : cliquez juste avant le dbut de celle-ci.
-Pour slectionner un paragraphe : double-cliquez juste avant le dbut de celui-ci.
Une fois slectionne la partie du texte que vous souhaitez modifier, il vous suffit de cliquer sur le bouton correspondant au changement effectuer.
III-2-3) Ajouter des images
Pour ajouter une image votre document, placez votre curseur lendroit o vous souhaitez insrer cette image. Deux solutions :
- 1re solution- Chargez une image que vous avez en mmoire dans votre ordinateur (gif ou jpg). Pour ce, cliquez sur le bouton ajouter une image de la barre doutils, vous obtiendrez alors la fentre de dialogue suivante :
(MAC)
(PC)
Cliquez sur Choose File (en haut)et choisissez une image sur votre disque dur. Une fois votre image slectionne, de nombreuses prcisions peuvent tre effectues dans la fentre de dialogue, comme par exemple :
- Laffichage dune lgende prcdant laffichage de cette image au moment du chargement de la page dans Navigator. Cette lgende peut-tre un texte, ou une image de mme dimension mais dune taille de fichier moins importante (la mme image convertie en noir et blanc par exemple) qui saffichera donc plus rapidement que limage en couleur originale. (Cadre Alternative Representations sur MAC ou bouton Alt.Text/LowRes... sur PC).
- La modification de la taille de limage (Cadre Dimensions).
- Lespace blanc laisser autour de cette image (Cadre Space Around Image).
- Les fonctions dalignement et dinsertion dans un texte (Wrapped Text).
- Lutilisation de limage comme fond dcran (Page Background ou Use as background).
Les rglages effectus, cliquez sur Ok en bas de la fentre pour revenir Composer. Limage apparatra alors lendroit o vous aviez positionn votre curseur.
Vous pourrez remodifier ces rglages tout moment en double-cliquant sur votre image dans la fentre de Composer pour faire r-apparatre la fentre de dialogue.
- 2me solution - Slectionner directement une image affiche dans la fentre de Navigator et, sans relcher le bouton de la souris, faites-la glisser jusque dans la fentre de Composer.
Cette technique, appele Glisser/Dposer (Drag and Drop) vous est sans-doute dj bien connue. Elle est courante sur les systmes Macintosh et Windows 95.
Pour effectuer cette opration , vos deux fentres doivent tre lgrement dcales lcran.
Souvenez-vous que vous devez toujours sauver les images utilises sur votre page dans le mme dossier que votre document HTML.
Si vous empruntez une image directement sur le web pour la placer sur votre page, Composer se chargera lui-mme de cette opration lorsque vous sauverez votre document (Save dans le menu File).
Pour vous faciliter le travail, constituez-vous une banque dimages personnelle que vous emprunterez au hasard de vos promenades sur le web, et rangez-les dans un dossier images lintrieur de votre disque dur. Vous pourrez ainsi facilement crer de nouvelles pages, sans avoir besoin de constamment vous reconnecter pour aller chercher les images dont vous avez besoin. (Voir en annexe C comment trouver ladresse internet de quelques banques dimages dans lesquelles vous pourrez facilement trouver votre bonheur.)
Vous avez sans doute galement remarqu que Composer rajoutait automatiquement dans le code les dimensions (hauteur=height et largeur=width) de chaque image, comme par exemple :
Cette fonction trs pratique permet Navigator, qui affiche toujours le texte dune page en premier, de prvoir la place ncessaire laffichage de limage lcran, et dobtenir un affichage de la page plus fluide et plus rgulier, en particulier sur Internet o le temps de chargement dune image peut-tre assez long.
III-2-4) Crer des liens
NOTE IMPORTANTE : Les exemples suivants sont illustrs de graphiques correspondant au Macintosh. Les fonctions mentionnes se retrouveront lidentique sur PC avec uniquement une lgre diffrence au niveau de la prsentation lcran.
Pour crer un lien, vous devez auparavant slectionner un lment de votre page (texte ou image), puis cliquer sur le bouton Insert Link .
Dans cet exemple, nous allons crer un lien pour accder la page de la classe de CM2 (CM2.html/CM2.htm) au partir du texte Classe de CM2 :
Liens internes et externes (internal and external links)
Tapez dans le fentre de Composer les mots Classe de CM2 et slectionnez-les.
Cliquez sur le bouton Insert Link . Vous accderez alors la fentre de dialogue suivante :
Sous Linked text, vous verrez apparatre le mot ou le nom de limage selectionne pour le lien, cliquez sur le bouton Choose file pour slectionner dans votre disque dur la page concerne : CM2.html dans le dossier Ecole de Cliqueville.
Pour crer un lien externe, vous devrez taper directement ladresse correspondante (commenant par http://www...)dans la zone de saisie.
(Le bouton Remove link permet lui de supprimer un lien existant.)
Quand vous avez termin, cliquez sur OK pour revenir Composer.
Cibles (targets)
Les cibles sont des types de liens particuliers qui permettent daccder non une autre page mais un endroit prcis de la mme page.
Dans le cas dune page contenant un texte assez long, divis en sections, vous pouvez par exemple crer un menu en haut de page renvoyant aux diffrentes sections concernes, vitant ainsi au lecteur davoir faire dfiler toute la page pour accder linformation dsire.
Dmarche suivre:
(Exemple disponible sur le site dEducaweb ladresse :
HIPERVNCULO http://members.tripod.com/~educaweb/cibles.html http://members.tripod.com/~educaweb/cibles.html)
1) Tapez votre document dans Composer (ou effectuez un copier/coller avec un texte dj existant).
2) Insrer les cibles dans votre texte (ttes de paragraphes par exemple).
Pour ce, placez votre curseur lendroit choisi, puis cliquer sur le bouton Insert target . Vous obtiendrez la fentre de dialogue suivante :
Donnez un nom votre cible (Target Name) puis cliquez sur OK.
3) Faites de mme pour les autres cibles.
4) Crez un menu en haut de page, reprenant par exemple le titre des paragraphes.
5) Affectez ensuite un lien chaque titre dans le menu. Pour ce, slectionnez votre premier titre et cliquez sur le bouton Insert link . Comme dans lexemple ci-dessous, affectez alors dans la fentre de dialogue votre lien sa cible, cliquez sur OK et rptez lopration avec les autres liens.
6) Sauvez votre page et visualisez-l dans Navigator pour tester le fonctionnement de vos liens. (Les cibles resteront apparentes lcran dans Composer mais seront invisibles dans Navigator.)
(Aperu de la page termine dans Composer)
III-2-5) Crer un tableau
La fonction de cration de tableau est mon sens une des plus utiles de Composer car elle permet dconomiser un temps important de programmation, et offre de nombreuses options intressante pour la prsentation de vos documents.
1) Placez votre curseur lendroit o vous souhaitez insrer un tableau et cliquez sur le bouton Insert table . Vous obtiendrez alors une fentre de dialogue dont je vais dtailler les principales fonctions.
- Choix du nombre de ranges et du nombre de colonnes du tableau:
Prsentation gnrale :
- Epaisseur du cadre (Border Line Width). Si cette case nest pas coche, les bords du tableau seront invisibles.
Si vous ne cochez pas cette case, le cadre du tableau sera invisible dans Navigator.
- Espacement entre les cases (Pixel Spacing Between Cells)
- Espace laisser entre le contenu de la case (texte ou image) et les bords de celle-ci (Pixel Padding Within Cells)
- Alignement dans la page ( gauche, au centre, droite)
- Espace prvu pour donner un titre au tableau, au dessus ou au dessous de celui-ci (Include Caption)
- Largeur du tableau, en % de la largeur de la fentre daffichage de Navigator (Table Width)
- Hauteur minimum du tableau (Min. Table Height)
Colonnes de mme largeur (Equal Column Widths) :
(La touche Extra Html permet de rajouter manuellement des balises
non-gres par Composer.)
Choix du fond du tableau :
- Choix dune couleur (cliquer dans la case blanche)
- Choix dune image (cliquer sur Choose file)
Valider en cliquant sur Insert :
2) Une fois ces premiers rglages effectus, vous obtenez dans la fentre de Composer un tableau vide, ressemblant celui-ci :
3) Vous pouvez ensuite remplir les diffrentes cases, en positionnant votre curseur lintrieur de la case choisie:
- En tapant directement votre texte (vous pouvez utiliser toutes les options de formatage, alignement, fontes, couleurs, listes, du logiciel).
- Ou en insrant une image en cliquant sur le bouton image de la barre doutils (suivre la procdure indique au paragraphe III-3-3).
4) Pour modifier les rglages de votre tableau, placez votre curseur nimporte quel endroit lintrieur de celui-ci et slectionnez Table Info (MAC) ou Table Properties (PC) dans le menu Format.
Vous accdez alors une fentre de dialogue, similaire celle dans laquelle vous aviez effectu les rglages prliminaires mais vous permettant en plus de spcifier des rglages individuellement pour chaque case :
Choix possibles :
- Table : rglages gnraux du tableau
- Row : rglages applicables une range entire
- Cell : rglages spcifiques une seule case (cell)
5) Si vous cliquez sur Cell, vous accdez aux rglages suivants pour la case dans laquelle est positionn votre curseur :
- Subdivisions de la case en plusieurs autres cases (Cell spans rows and columns).
- Largeur (Cell width) et hauteur minimum (Min. cell heigth).
- Positionnement horizontal et vertical du contenu de la case (texte ou image)
- Type de texte (Text)
- Choix de la couleur du fond ou dun fond-image (Cell Background).
Noubliez pas que vous pouvez rendre invisible le cadre dun tableau. Ce cadre restera cependant toujours apparent sous forme de pointills dans la fentre de Composer. Ce nest quen visualisant votre page dans Navigator que vous pourrez contrler son aspect dfinitif.
Entranez-vous raliser diffrents types de tableaux, en testant les diffrentes fonctions ci-dessus mentionnes. Leur utilisation est lun des secrets dune mise en page russie. Vous en trouverez trois exemples en cliquant sur le bouton tableaux partir de la page daccueil du site dEducaweb.
III-3) Editer avec Composer une page dj existante .
Quand une page est affiche dans la fentre de Navigator, vous pouvez tout moment la transfrer dans Composer afin de pouvoir lditer. Il vous suffit de slectionner Edit Page ou Edit Frame dans le menu File . La page est alors automatiquement sauvegarde sur votre disque dur, en mme temps que toutes les images (ou autres fichiers) quelle contient.
(MAC) (PC)
Cette fonction peut aussi vous permettre de sauvegarder en une seule fois une page que vous avez rencontre sur le web et que vous souhaitez conserver dans votre ordinateur, pour pouvoir la consulter tout moment sans avoir besoin de vous reconnecter. Son utilisation peut se rvler prcieuse dans le cadre dune exploitation pdagogique avec un groupe dlves, car elle vous permet daccder immdiatement linformation recherche, sans tre tributaire du temps de chargement sur Internet ou de lventuel impossibilit daccs au serveur vis.
Vous pouvez ainsi constituer une banque de donne personnelle sur un thme donn, que vos lves pourront exploiter hors connection. Ayez soin toutefois de sauvegarder chaque page dans un dossier spar, ou de crer des dossiers par thmes, ce qui vous permettra de retrouver plus facilement les documents recherchs.
Pour ouvrir une page directement dans Composer, slectionnez :
-MAC : Open page in Composer dans le menu File.
-PC : Open page dans le menu File . Vous devez alors slectionner votre document de la manire habituelle mais en cochant cette fois-ci le bouton Composer dans la fentre de dialogue.
MAC/PC : Encore une fois, je vous rappelle que tous les fichiers concernant votre page (document HTML, images, etc..) doivent se trouver au mme niveau dans votre disque dur pour que celle-ci puisse safficher convenablement.
Licne indique que Composer na pas pu trouver limage que votre fichier HTML lui demandait dafficher ; soit limage considre nest pas range au bon endroit, soit vous avez tout simplement oubli de la sauvegarder, do lutilit de la fonction Edit page qui vous permet coup sr de bien sauvegarder tous les fichiers rattachs une page web en mme temps que son fichier HTML.
CHAPITRE IV
Publier son site sur Internet.
Votre site ralis, vous devez imprativement tester tous vos liens (internes et externes), pour dpister dventuelles erreurs de programmation.
Cette tape effectue, il vous faut maintenant lui chercher un hbergement sur un serveur afin de le rendre accessible aux autres usagers du web.
IV-1) Le principe.
Vous avez maintenant en mmoire dans votre ordinateur un ensemble de fichiers (textes html, images, etc...) qui constituent votre nouvelle page web. Pour permettre aux usagers dInternet dy accder, vous allez devoir transfrer votre travail sur un serveur.
Une fois le choix du serveur effectu (voir IV-2), celui-ci vous attribuera un espace mmoire (en fait un dossier, auquel vous pourrez accder laide dun mot de passe personnel), un nom dutilisateur (User ID) et une adresse personnelle correspondant votre page, du type : Http://www.nomduserveur.com/~Cliqueville.
Cette adresse pourra tre plus ou moins longue, en fonction du serveur choisi, et plus ou moins facile mmoriser. (Dans le domaine, la palme de la longueur revient sans aucun doute au serveur Geocities...)
Vous devrez alors transfrer vos fichiers depuis votre ordinateur jusqu votre dossier sur le serveur, en utilisant un logiciel particulier appel FTP.
FTP (Fast Transfert Protocol) est un standard de connexion rapide permettant le transfert ais dune quantit importante dinformations, sous forme de fichiers. Ce standard a donc en fait donn son nom aux logiciels qui permettent de grer cette connexion.
Ce standard tant diffrent du Http, que vous utilisez habituellement pour accder aux pages web, ladresse pour accder au serveur FTP est gnralement modifie de la faon suivante (exemple pour Geocities):
- Http://www.geocities.com permet de se connecter la partie Web de ce serveur.
- ftp.geocities.com permet de se connecter la partie FTP de ce serveur.
MAC : Utilisation du logiciel FTP Fetch pour Macintosh
(Vous devez bien-sr auparavant tlcharger le logiciel Fetch, adresse en annexe D).
1) Connectez-vous Internet.
2) Ouvrez le logiciel Fetch. Vous devriez accder la fentre suivante (si non, slectionnez New connection dans le menu File) :
3) Remplissez alors les cases par vos donnes personnelles (fournies par votre serveur lors de votre inscription), par exemple:
- Host (adresse FTP du server) ftp.geocities.com
- User ID (nom dutilisateur) cliqueville
- Password (mot de passe) fantomas
- Directory (rpertoire)... laisser en blanc, le plus gnralement, ou remplir le cas chant suivant les indications fournies par le serveur. (Cet exemple ne contient videmment que des donnes fictives...)
4) Cliquez sur Ok. La fentre suivante vous permet de visualiser le contenu de votre dossier sur le serveur, et de raliser les oprations de transfert (ou de suppression) de fichiers.
Si vous y accdez pour la premire fois, ce dossier doit normalement tre vide. Il peut aussi contenir suivant les cas un document index.html , automatiquement gnr par le serveur lors de votre inscription, que vous pourrez remplacer par celui de votre page.
5) Validez la fonction Automatic (comme sur limage prcdente) et commencez transfrer vos fichiers en cliquant sur le bouton Put File. Vous accderez alors un selecteur de fichier qui vous permettra de selectionner dans votre disque dur le fichier que vous souhaitez envoyer sur le serveur :
Cliquez sur Open et slectionnez dans le menu droulant de la fentre suivante le format qui convient : Text pour les fichiers HTML et Raw Data pour les fichiers image (Gif ou Jpg).
Il ne vous reste plus qu cliquer sur OK pour envoyer ce fichier sur le serveur.
6) Rptez alors la mme opration pour tous les autres fichiers de votre page.
7) En cas de besoin, vous pourrez effectuer distance des oprations directement sur le serveur, comme par exemple effacer un fichier (Delete Directory or File dans le menu Remote), modifier son nom (Rename Directory or File dans ce mme menu), etc...
8) Pour tlcharger un fichier depuis le serveur vers votre ordinateur, il suffit de selectionner dans la fentre de Fetch le fichier transfrer puis de cliquer sur le bouton Get File . Une fentre souvrira alors vous demandant o vous souhaitez le sauvegarder dans votre disque dur.
9) Comme pour la plupart des logiciels sur MAC, vous pouvez obtenir un mode demploi plus dtaill du logiciel en slectionnant Fetch Help dans le menu Help.
PC : Utilisation du logiciel WS_FTP pour Windows 95
(Vous devez bien-sr auparavant tlcharger le logiciel WS_FTP , adresse en annexe D).
1) Connectez-vous Internet.
2) Ouvrez le logiciel WS_FTP. Dans la fentre qui saffiche, remplissez alors les cases avec vos donnes personnelles (fournies par le serveur), par exemple : (Les donnes suivantes sont videmment fictives...)
- Profile Name : slectionner WS_FTP32
- Host Name/Address(adresse FTP du server) ftp.geocities.com
- Host Type : slectionner Automatic Detect
- User ID (nom dutilisateur) Cliqueville
- Password (mot de passe) Fantomas
Ncrivez rien dans les autres cases pour le moment.
3) Cliquez sur Ok. La connection avec le serveur est tablie. La fentre de droite vous permet de visualiser le contenu de votre dossier sur le serveur (remote system), celle de gauche, de visualiser le contenu dun dossier sur le disque dur de votre ordinateur (Local System).
Si vous accdez pour la premire fois au dossier que vous a attribu le serveur aprs votre inscription, celui-ci doit normalement tre vide. Il peut aussi contenir suivant les cas un document index.htm , automatiquement gnr par le serveur, que vous pourrez remplacer par celui de votre page.
4) Slectionnez dans la fentre de gauche le dossier dans lequel vous avez sauvegard les lments de votre page et ouvrez-le de faon afficher son contenu.
5) Cochez la case Auto (slection automatique du type de fichier, texte-format ASCII ou image-format Binary) envoyer.
Vous pouvez maintenant commencer transfrer vos fichiers depuis votre ordinateur vers le serveur, en slectionnant dans la fentre de gauche celui que vous souhaitez transfrer (ecole.gif dans cet exemple) puis en cliquant sur le bouton envoyer . Une petite fentre souvrira alors pour vous donner des informations sur le transfert en cours.
6) Rptez lopration pour tous les autres fichiers de votre page.
7) En cas de besoin, vous pourrez effectuer distance des oprations directement sur le serveur, comme par exemple effacer un fichier (bouton Delete), modifier son nom (bouton Rename), etc...
8) Pour tlcharger un fichier depuis le serveur vers votre ordinateur, il suffit de le slectionner (fentre de droite) puis de cliquer sur le bouton retour .
9) Vous pourrez accder un mode demploi complet du logiciel en cliquant sur le bouton Help (au bas de la fentre). En anglais dans le texte...
Fonction Publish de Composer :
Le logiciel Composer dispose aussi dune fonction Publish, qui permet denvoyer un ou plusieurs fichiers sur le serveur. Cette fonction est cependant loin dtre aussi efficace quun vritable logiciel FTP.
IV-2) Sur quel serveur domicilier votre page ?
Plusieurs socits, la plupart domicilies aux Etats-Unis, proposent un hbergement gratuit sur leur serveur. Le lieu importe peu puisque le ct magique dInternet est de permettre un accs quasi-immdiat linformation, quelle que soit la distance parcourir.
En thorie, laccs devrait tre plus rapide si vous domiciliez votre site dans le pays dans lequel vous exercez, encore faut-il y trouver un espace dhbergement gratuit. La procdure gnrale utiliser sera de toute faon identique quel que soit votre choix, les spcificits de chaque serveur vous seront expliques sur leur page daccueil. Si vous ntes pas laise avec langlais, choisissez plutt un site franais... cela peut sembler logique ! Certains fournisseurs daccs Internet peuvent aussi offrir un espace gratuit pour hberger une page.
Le serveur Geocities (www.geocities.com), domicili aux Etats-Unis, offre des fonctions trs intressantes permettant de grer son site distance (sans avoir passer par un logiciel FTP), directement depuis la fentre de votre logiciel de navigation. Il peut cependant se montrer assez lent car trs frquent, et ladresse des pages (dsigne par un nombre) est difficile mmoriser.
Dans le mme style, mais ne bnficiant pas de fonctions de gestion en ligne aussi pousses, vous pouvez aussi domicilier gratuitement votre page sur les serveurs Tripod (www.tripod.com) ou Xoom (www.xoom.com).
Un des seuls serveurs franais offrant gratuitement ce service ce jour est le serveur Cegetel (www.cegetel.edu), uniquement destin la communaut ducative. Les abonns de Club Internet (fournisseur daccs Internet en France) peuvent aussi bnficier dun espace gratuit pour domicilier leur page.
En cherchant sur le web, il est possible que vous puissiez trouver dautres serveurs dhbergement car il sagit dun domaine en pleine volution. Vous y trouverez gnralement des tas de conseils et daides pour raliser votre page (souvent en anglais malheureusement...).
Revers de la mdaille : ces serveurs tant gratuits, il faudra supporter la publicit quils ne manqueront pas de vous envoyer votre adresse Email ou les crans publicitaires quils pourront afficher en mme temps que votre page (inconvnient relativement minime cependant relativement au service rendu). Si vraiment la publicit vous ennuie, vous devrez alors chercher un hbergement payant, vous de voir, selon vos moyens...
Procdure gnrale suivre pour obtenir un espace dhbergement gratuit:
1) Connectez-vous Internet et rendez-vous sur la page daccueil dun des serveurs mentionns ci-dessus.
2) Chercher le lien qui vous permettra daccder au formulaire dinscription.
3) Remplissez le formulaire. Vous devrez fournir une adresse Email ( laquelle vous sera retourne un mot de passe ncessaire pour accder votre emplacement sur le serveur) et un nom dutilisateur. Choisissez bien votre nom dutilisateur car cest souvent celui qui apparatra dans ladresse de votre page. Par exemple sur Tripod, ladresse de votre page sera :
http://members.tripod.com/~nom dutilisateur/
4) Une fois que vous aurez reu un Email confirmant votre inscription et votre mot de passe, vous pourrez alors commencer transfrer vos fichiers sur le serveur en utilisant un logiciel FTP, comme expliqu dans le chapitre prcdent.
IV-3) Comment faire connatre votre page ?
Pour rendre publique ladresse de votre page, vous devrez linscrire sur les diffrents annuaires et moteurs de recherche. Cette procdure est gnralement assez facile : il suffit de se rendre sur la page considre et de remplir un formulaire dinscription. Elle peut cependant se montrer assez fastidieuse, vu le nombre dannuaires et moteurs de recherche existants sur le web.
Certains sites offrent heureusement une excellente alternative, savoir un seul formulaire dinscription remplir pour plusieurs annuaires. Ce service est souvent payant mais en cherchant bien, il en existe aussi de gratuits.
En voici un qui fonctionne bien pour les principaux annuaires francophones :
Le rfrenceur SAM, ladresse http://sam.acorus.fr/referenceur/index.htm
CHAPITRE V
Pour aller plus loin...
Ce chapitre est destin ceux qui, une fois ayant assimil les notions de programmation basiques contenues dans ce guide, veulent aller plus loin ou souhaitent tout simplement comprendre le fonctionnement de certains lments rencontrs sur le web, qui nont pas encore t abords ici.
Je me contenterai, faute de place et ceci ntant pas lobjectif initial de ce guide, de citer quelques techniques frquemment utilises dans la conception dune page web, pour orienter vos recherches vers une documentation plus labore : un des nombreux ouvrages dj publis sur la question ou directement sur Internet (voir en annexe C ladresse des sites-ressources).
V-1) Personnaliser lenvironnement graphique de votre page.
Utiliser des graphiques emprunts dautres cest bien, mais crer ses propres icnes, boutons, logos, etc..., cest encore mieux!
Tout concepteur de page aura un jour ou lautre envie dapporter une touche plus personnelle son travail, et devra ncessairement se plonger dans lunivers de la DAO (dessin assist par ordinateur).
Bonne nouvelle : sans vouloir rivaliser avec les professionnels, il existe de nombreux sharewares librement tlchargeables sur le web qui permettent de raliser rapidement et avec un peu de pratique, les dessins et autres objets graphiques qui agrmenteront votre page (adresses en Annexe D).
- Pour Macintosh, la rfrence dans le domaine est certainement le logiciel Graphic Converter, qui outre des fonctions labores de conversion dun format graphique un autre, dispose de fonctions de dessin et ddition de photos trs intressantes et relativement simples matriser.
- Pour PC, on peut citer le logiciel Paint Shop Pro, qui offre des caractristiques assez similaires et que vous pouvez essayer librement pendant 60 jours (Prfrez la version 4 la version 5, car cette dernire se bloquera en cas de non-paiement au bout des 60 jours.). Vous pouvez aussi utiliser le petit logiciel de dessin fourni avec Microsoft Windows 95.
Paralllement, lacquisition dun scanner vous permettra de digitaliser des dessins ou des photos, afin de les intgrer vos pages.
Il existe de nombreux formats graphiques mais les seuls utilisables universellement sur Internet sont les formats GIF et JPG. Si vous dcidez dutiliser pour votre page un graphique cod dans un autre format, vous devrez auparavant imprativement le convertir dans un de ces deux formats.
Pensez aussi ne pas intgrer de fichiers graphiques trop importants dans vos pages car ils peuvent en retarder de faon importante le temps de chargement.
Pour rduire la taille dun fichier image, vous pouvez essayer den rduire la dfinition (nombre de pixels par pouce) et le nombre de couleurs. Le format JPG permet dafficher jusqu 16 millions de couleurs diffrentes, alors quune photo peut gnralement tre affiche sur le web en 256 couleurs sans perdre trop en qualit.
Les principaux logiciels de dessin et de traitement dimages permettent de raliser facilement ce genre dopration.
V-2) Quest-ce quun GIF anim ?
Peut-tre avez vous dj rencontr un de ces petits graphiques anims qui envahissent les pages web depuis quelques temps ; il sagissait certainement dun GIF anim (animated GIF en anglais).
Comme son nom lindique, cest un type particulier de graphique au format GIF, conu sur le principe du dessin anim : plusieurs dessins, lgrement diffrents les uns des autres, sont enchans rapidement, donnant ainsi limpression de mouvement.
Comme pour tout graphique sur le web, il est possible de le sauvegarder pour le rutiliser o bon vous semblera. (La procdure suivre est la mme que pour nimporte quelle autre image, voir paragraphe II-4.)
On peut aussi crer ses propres GIFs anims en utilisant de petits programmes comme GIF builder, pour Macintosh ou WWW Gif Animator pour PC.
V-3) Les formulaires et les compteurs.
Les formulaires :
Les formulaires (forms en anglais) sont utiliss pour raliser des inscriptions ou des commandes en ligne, des enqutes ou des applications de type Livre dOr.
Il comportent souvent des boutons, des menus droulants et des zones de saisie de texte. Ils sont assez complexes mettre en oeuvre car ils font appel des codes HTML particuliers et des scripts CGI, programmes annexes rsidant sur le serveur et souvent inaccessibles aux non-professionnels, ou au langage Java.
Certains serveurs vous permettent cependant dutiliser des formulaires de faon simplifie.
Le serveur gratuit Geocities (http://www.geocities.com) vous permet par exemple de raliser assez simplement un Livre dOr sur lequel vos visiteurs peuvent laisser un message pour commenter votre site.
(Voir par exemple le Livre dOr du site du CFM de Guadalajara:
http://www.geocities.com/Athens/Olympus/6599).
Les compteurs :
Il est aussi trs frquent de rencontrer sur le web des compteurs dont le rle est de comptabiliser le nombre de visiteurs reus sur chaque page.
Pour crer un compteur, vous devrez gnralement ajouter une liste dinstructions HTML en bas de votre document index.html. Ce code vous sera fourni par le serveur qui vous hberge . Vous devrez donc vous renseigner auprs de celui-ci pour savoir si il offre cette possibilit et pour connatre la procdure suivre. (Cette information est gnralement disponible sur sa page daccueil).
V-4) Le multi-fentrage (frames).
Il est possible de diviser la fentre daffichage dun logiciel de navigation en plusieurs autres fentres (appeles panneaux, ou frames en anglais), pour permettre par exemple de placer une barre de menu sur la gauche et un espace daffichage correspondant sa droite.
Le principe en est le suivant :
- Chaque cadre est considr comme une page indpendante, pouvant tre ralise dans Composer. Dans lexemple ci-dessus, nous aurions donc deux documents HTML, lun appel menu.html (barre de menu) et lautre contenu.html (zone daffichage).
- Le format et lemplacement lcran de ces deux cadres sera fix par le document index.html, qui ne contiendra alors que des informations de mise en page.
Pour ceux qui souhaitent se lancer dans laventure, un exemple est disponible sur le site dEducaweb (lien "Les cadres (frames)" sur la page "aide en ligne") ainsi que le code source rutiliser. Le serveur Xoom offre en outre une excellente mthode (en anglais) pour apprendre raliser ce genre de prsentation : http://members.xoom.com/xoomhelp/frames/
V-5) Le son et la vido sur Internet.
Peu peu, les fichiers audio et vido envahissent le petit monde du web, de faon souvent encore peu convaincante pour lutilisateur moyen. Ceci sexplique par la taille importante de ces fichiers, ncessitant une connection trs rapide pour y accder en un temps raisonnable.
La cration de fichiers vido pour le web est encore une affaire de spcialistes, mais on peut inclure assez facilement de petits fichiers audio une page, en enregistrant partir dun micro connect votre ordinateur. L encore, diffrents formats peuvent tre utiliss. Le plus courant est le format WAV, bien connu des utilisateurs de PC mais incompatible avec le Macintosh. Le format AU peut tre par contre lu sans problme sur ces deux types de machines. Dautres formats comme le format Real Audio (RA) requirent lutilisation dun logiciel lecteur spcifique, tlcharger en plus de Communicator.
De nombreux sharewares permettent denregistrer, de manipuler et de convertir les fichiers audio. Vous en trouverez quelques-uns en annexe D.
Une fois ralis votre fichier son, vous pouvez linclure votre page laide du code suivant (utilisable quel que soit le format utilis):
Celui-ci affichera lcran un bouton sur lequel vous pourrez cliquer pour couter le fichier indiqu (chanson.au pour cet exemple).
V-6) Le langage Java.
Larrive du langage Java a cr une petite rvolution sur Internet, en permettant des applications interactives trs pousses, telles que des formulaires interactifs, des feuilles de calculs, des affichages dynamiques, etc...
Ce langage, fonctionnant en complment du HTML, est malheureusement inaccessible qui ne possde pas de bonne bases en programmation informatique. Des notions qui dpassent donc largement le cadre de ce guide...
ANNEXES
A) Petit lexique HTML , liste des caractres accentus, codes couleurs.
Balises HTML:
Vous retrouverez ici classes par ordre alphabtique les balises HTML cites dans le guide, un rappel de leur utilisation et leurs options possibles.
lien texte Lien partir dun mot
Lien partir dune image (avec encadrement)
Lien partir dune image (sans encadrement)
lien texte Lien permettant denvoyer un message une adresse Email
texte Texte en gras
texte
Dcalage du texte dun bloc vers la droite
Dbut et fin du corps du document
Couleur du fond de lcran
Utilisation dune image comme fond dcran
Passer la ligne
texte Afficher au centre (texte ou image)
texte Couleur du texte
Entte du document (gnre automatiquement par lditeur)
Ligne horizontale standard (sparateur)
Ligne horizontale plus paisse (2 pixels)
Ligne horizontale sans ombre (trait plein)
Dbut et fin de document HTML
texte Texte en italique
Affiche une image (x=largeur de limage en pixels, y= hauteur de limage en pixels)
texte Texte align avec le haut de limage
ALIGN=middle>texte Texte align avec le milieu de limage
ALIGN=bottom>texte Texte align avec le bas de limage
Alignement de deux images par leurs centres
texte... Texte encadrant une image situe sur sa gauche
ALIGN=right>texte... Texte encadrant une image situe sur sa droite
texte Elment faisant partie dune liste
ligne de texte Interdit la passage la ligne au milieu de la ligne encadre par les deux balises.
Dbut et fin de liste numrote
Affiche des lettres min. la place des chiffres
TYPE=A> Affiche des lettres maj. la place des chiffres
Dbut et fin de paragraphe (force le navigateur passer une ligne avant et aprs celui-ci)
Dbut et fin de tableau
Rend invisible le cadre du tableau
WIDTH=90%> Dfinit en pourcentage la largeur globale du tableau par rapport la fentre daffichage du navigateur
| Dbut et fin du contenu dune case du tableau
| Aligne le contenu de la case sur la droite
ALIGN=center> Centre le contenu de la case
ALIGN=right> Aligne le contenu de la case sur la gauche
Dfinit une valeur fixe (x, en pixels) pour la largeur de la case
| Dfinit en pourcentage la largeur de la case par rapport au reste du tableau
| Interdit un passage la ligne non-volontaire au milieu dune case (oblige le navigateur respecter la mise en page des lments placs lintrieur de cette case)
|
Dbut et fin dune range dans un tableau (chaque range pouvant contenir plusieurs cases)
Aligne le contenu de chaque case sur la droite
ALIGN=center> Centre le contenu de chaque case
ALIGN=right> Aligne le contenu de chaque case sur la gauche
Dbut et fin de liste non-numrote
Dessine un disque avant chaque item de la liste
TYPE=circle> Dessine un cercle avant chaque item de la liste
TYPE=square> Dessine un carr avant chaque item de la liste
Code HTML des caractres spciaux et accentus:
Rappel : vous devez taper intgralement ces codes la place du caractre devant tre affich lcran.
à ç
â ñ
é < <
è > >
ê & &
î "
ï ©
ô
ù
û
Code HTML des principales couleurs:
Vous pourrez trouver la liste complte des couleurs disponibles ladresse suivante:
http://xoom.com/xoom/helpcenter/essential/colors
texte blanc
texte bleu marine
texte bleu
texte bleu ciel
texte vert fonc
texte vert
texte vert clair
texte jaune
texte jaune-orang
texte orange
texte rouge
texte rose
texte marron
texte marron fonc
texte noir
B) Comment tlcharger ou se procurer les logiciels cits ici ?
Si vous navez jamais tlcharg de logiciel partir dInternet, il faudra tout dabord vous familiariser avec la procdure. Si cela na plus de secrets pour vous, passez ces quelques lignes...
De nombreux serveurs vous permettent de tlcharger des logiciels, freewares ou sharewares en ligne. Cette procdure peut demander beaucoup de temps, en fonction de la taille du logiciel et de la rapidit de votre modem (comptez presque deux heures pour le tlchargement de Communicator avec un modem 28.8 ..!).
Certains logiciels peuvent tre fournis en version dfinitive, dautres lessai pour une priode de 30 60 jours, au terme de laquelle ils cesseront de fonctionner si vous navez pas pay la somme demande (en gnral peu leve pour les sharewares). Nombre dentre-eux continuent cependant de fonctionner au terme de la priode dessai gratuite, se contentant de vous inviter payer la somme demande chaque fois que vous vous en servirez. Les concepteurs de sharewares comptent donc sur votre honntet pour fournir des logiciels performants un prix accessible. Aux utilisateurs de jouer le jeu...
Tous les logiciels tlchargeables sur le web sont compresss, de faon occuper moins de place et donc dconomiser en temps de chargement.
Le type de suffixe utilis vous indique le type de compression appliqu celui-ci, par exemple fichier. zip (PC) ou fichier.hqx (MAC).
Les plus sophistiqus peuvent se dcompresser automatiquement une fois chargs sur votre disque dur (comme les formats exe sur PC ou sea sur Mac). Pour les autres, il vous faudra utiliser un petit utilitaire de dcompression comme Winzip (dcompression des fichiers au format zip sur PC) ou StuffitExpander (dcompression des fichiers au format hqx, sit et autres formats sur Mac).
Ces deux utilitaires peuvent galement se trouver facilement sur Internet (adresses en Annexe D).
Tlchargement pratique :
1) Localisez sur Internet le logiciel dsir, correspondant votre type de machine (annexe D).
2) Cliquez sur le lien correspondant ce logiciel. Le processus de tlchargement commence alors :
- Un slecteur de fichier souvre vous demandant quel endroit dans votre ordinateur vous souhaitez sauver celui-ci. Choisissez toujours le bureau (desktop), cela vite de perdre la trace du logiciel tlcharg, en particulier sur PC (Ne riez pas, a arrive...).
- Une nouvelle fentre (indicateur de chargement) apparat alors vous indiquant la vitesse de la connection avec le serveur, le temps de chargement estim, et affichant un vu-mtre reprsentant lavance du chargement.
3) Une fois le logiciel charg, cette fentre disparat.
4) Allez sur votre bureau pour le cas chant, dcompresser le fichier avec Winzip (PC) ou StuffitExpander (Mac).
5) Tous les sharewares, une fois dcompresss, se prsentent gnralement sous la forme dun dossier comprenant le logiciel lui-mme, des fichiers annexes et une notice dutilisation sous forme de fichier Lisez-moi (Read me).
Certains disposent mme dun installeur, en particulier sur PC, vous facilitant le travail de mise en route. (Il suffit alors de lancer lapplication install.exe et de suivre pas pas les instructions donnes lcran.)
Cdroms gratuits:
De nombreux magazines informatiques proposent maintenant en cadeau un cdrom joint, contenant entre-autres bon nombre de sharewares ou certaines versions de Netscape Communicator ou de Microsoft Internet Explorer.
Pensez jeter un coup doeil chez votre marchand de journaux. Vous pourrez ainsi conomiser le temps ncessaire la recherche et au tlchargement de ces logiciels sur Internet, et allger dautant votre facture tlphonique...
C) Tlcharger Netscape Communicator.
Le logiciel Netscape Communicator est disponible en plusieurs versions et plusieurs langue. La version qui nous intresse ici est la version complte, qui intgre le logiciel Composer .
Je vous indique trois options diffrentes de tlchargement, en fonction de vos besoins et de votre situation gographique (la procdure pourra bien sr voluer si Netscape dcide de modifier la mise en page de son serveur) .
Au moment o jcris ces lignes, la version la plus rcente disponible de Communicator est la version 4.06 en anglais, ou la version 4.05 en franais.
Tlchargement de Communicator en version franaise :
(ou dans une autre langue depuis la France)
1) Connectez-vous ladresse :
http://home.netscape.com/fr/comprod/mirror/index.html
2) Vous accderez la page de tlchargement en franais :
En faisant dfiler la page, vous accderez un formulaire, dans lequel vous pourrez choisir la version de Communicator qui vous intresse en fonction de votre type de machine. En premire ligne, choisissez :
Communicator Standard- Complete Install- 4.05 (ou version plus rcente).
En cliquant sur le dernier bouton, vous accderez un ou plusieurs liens renvoyant des sites de tlchargement. Cliquez alors sur Download pour commencer le chargement.
Tlchargement de Communicator en version anglaise depuis les Etats-Unis:
(valable et assez rapide en gnral pour tous les pays du continent amricain)
1) Connectez-vous ladresse :
http://home.netscape.com/computing/download
2) Vous accderez la page suivante :
Dans le cadre Netscape Download, cliquez alors sur le lien correspondant votre type dordinateur, PC (Win 95/98/NT) ou MAC (Mac Power PC) en face de Netscape Communicator 4.06 pour lancer le processus de chargement (en face de "Give me Netscape Communicator 4.06").
Tlchargement de Communicator en version anglaise depuis les autres pays:
Le logiciel Communicator est galement disponible depuis de nombreux autres sites ltranger. En choisissant un site de tlchargement lintrieur ou limitrophe du pays dans lequel vous rsidez, vous bnficierez normalement dun temps de chargement plus rapide.
1) Connectez-vous ladresse suivante :
http://www.netscape.com/comprod/mirror/index.html
2) Vous accderez la page qui suit:
3) Dans Option 1, cliquez sur le lien Download Instructions. Le serveur slectionnera automatiquement la version de Communicator correspondante votre type dordinateur. Si ce nest pas le cas, vous devrez choisir dans le formulaire la dernire version de Communicator sous la forme Standard version- complete install.
En faisant dfiler la fentre, vous accderez la rubrique Begin Downloading :
Cliquez alors sur le bouton Download for free en dessous de Customers from other countries.
Dans la fentre suivante, choisissez le site de tlchargement le plus proche de votre zone gographique. Cliquez sur Download pour lancer le processus de chargement.
D) Le carnet des bonnes adresses.
Guides dinternet et cours de programmation HTML :
UN NOUVEAU GUIDE DINTERNET
http://www.imaginet.fr/ime/
Cours trs complet (Internet, programmation en HTML, manuel dutilisation de Netscape en franais, etc...)
BEGINNERS GUIDE TO HTML (en anglais)
http://www.ncsa.uiuc.edu/General/Internet/WWW/
HELPCENTER du site XOOM (en anglais mais remarquable, traite entre-autres de la conception de tableaux, de panneaux et du mode de connection FTP)
http://xoom.com/xoom/helpcenter/tutorial
Adresses dcoles et ressources pdagogiques:
PREMIERS PAS SUR INTERNET
http://www.imaginet.fr/momes/
TABLEAU NOIR
http://www.tableau-noir.com/
PEDAGONET
http://www.pedagonet.com/ext/fdefault.eht
Bibliothques de logiciels sharewares et freewares:
LOGITHEQUE ZDNET (PC/MAC)
http://www1.zdnet.com/fr/logi/
DOWNLOAD.COM (PC/MAC)
http://www.download.com
SHAREWARE.COM (PC/MAC)
http://www.shareware.com
TOPSOFT (PC/MAC)
http://topsoft.com
UTEXAS MAC ARCHIVE (MAC)
http://wwwhost.ots.utexas.edu/mac/main.html
Logiciels utiles:
WINZIP (dcompression, PC)
Disponible sur le site de shareware.com
STUFFIT EXPANDER (dcompression, MAC)
Disponible sur le site de UTEXAS MAC ARCHIVE
WS_FTP LE (connexion FTP, PC)
Disponible sur le site de shareware.com
FETCH (connexion FTP, MAC)
Disponible sur le site de UTEXAS MAC ARCHIVE
GIF BUILDER (gifs anims, MAC)
http://iawww.epfl.ch/Staff/Yves.Piguet/clip2gif-home/GifBuilder-F.html
SOUND MACHINE ET CONVERT MACHINE (fichiers son au format au, MAC)
http://www.kagi.com/rod/
GRAPHIC CONVERTERet TRANSPARENCY(dessin, conversion de formats et gifs transparents, MAC)
Disponibles sur le site de UTEXAS MAC ARCHIVE
REAL AUDIO (fichiers son format ra, PC/MAC)
http://www.real.com/
PAINT SHOP PRO (dessin, conversion de formats, PC), GOLDWAVE (diteur de son, PC)
Disponibles sur le site de shareware.com
WEBPAINTER (dessin et gifs anims, PC/MAC)
http://www.totallyhip.com ou sur www.shareware.com
WWW Gif Animator (gifs anims, PC)
http://stud1.tuwien.ac.at/~e8925005
WEB CONSTRUCTION KIT (Editeur HTML en franais, PC)
http://www.pierresoft.com
Hbergement gratuit :
CEGETEL (en franais)
http://www.cegetel.edu/
GEOCITIES
http://www.geocities.com
TRIPOD
http://www.tripod.com
XOOM
http://xoom.com/home/
NETTAXI
http://www.nettaxi.com
Banques graphiques:
Utiliser les moteurs de recherche pour obtenir la liste des sites offrant gratuitement des images, icnes, gifs anims, etc.., tlcharger.
Catgorie graphiques sur YAHOO
http://www.yahoo.com/Arts/Design_Arts/Graphic_Design/Web_Page_Design_and_Layout/Graphics/
Icons/
Annuaires et moteurs de recherche en franais:
VOILA
http://www.voila.fr
WEBORAMA
http://www.weborama.fr
NOMADE
http://www.nomade.fr
PAGE FRANCE
http://www.pagefrance.com
YAHOO FRANCE
http://www.yahoo.fr
EXCITE FRANCE
http://www.excite.fr
TELEFRANCE
http://www.telefrance.com
REFERENCEUR SAM (inscription simultane sur plusieurs moteurs de recherche francophones)
http://sam.acorus.fr/referenceur/index.htm
AUTOR Philippe Bosquet Pgina PGINA 64 FECHA 02/01/98 Pg FECHA 02/01/98fggh
PGINA 50
AUTOR Philippe Bosquet - 1998 Guide de Guide de la Home Page l 'usage de l'enseignant PGINA 64
7 8 m Y H I l n = > ^
9
:
Z
[
{
|
] ^ P Q R z { CJ OJ QJ CJ 5CJ OJ QJ CJ OJ QJ 5OJ QJ OJ QJ j UCJ0 OJ QJ CJ( CJH CJH OJ QJ CJ` K 7 8 e 1 m Z
&