Création de documents sur un serveur WWW

Transcription

1 Création de documents sur un serveur WWW Support de travaux pratiques I. La création de pages Web par le codage direct en HTML page 2 II. La création de pages Web à l aide d un éditeur WYSIWYG : Netscape Communicator page 9 III. Le transfert des pages créées sur un serveur WWW page 14 IV.Utilisation de quelques fonctions évoluées sur les pages html page 15 Création de documents Web Page 1

2 I. La création de pages Web par le codage direct en HTML Pour créer une page WWW, il nous faut : Un logiciel pour visionner la future page : Communicator de Netscape par exemple (comme client Web). Un logiciel pour créer la page en HTML : n importe quel traitement de texte peut convenir. Nous prendrons Notepad (Bloc-Notes), par exemple. Les pages seront, dans un premier temps, faites localement sur le PC de travail et enregistrées sur disquettes (éventuellement sur disque dur), puis, dans un second temps, transférées sur le site de l ESID (serveur de l Université) afin que toute personne connectée à Internet puisse alors consulter les Quelques mots sur le langage HTML HTML (HyperText Markup Language) est un langage de balisage. Cela veut dire nous allons donner des attributs et des propriétés à chaque élément que nous insérerons dans notre page. Il peut s agir d une lettre, d un mot, d une phrase ou plus mais également d une image. Ces attributs définissent généralement la disposition de notre élément (centré, aligné à gauche ou à droite) ou sa forme (taille, gras, italique, etc.) Les espaces n ont généralement pas d importance pas plus que les majuscules ou les minuscules dans le codage HTML. Par contre, les caractères diacritiques de la langue française ( codés selon une table fournie en annexe. Le codage des caractères diacritiques commence toujours par un & et se termine toujours par un ;. Ainsi, la lettre é se code é et la lettre è se code è. Lors de l'écriture de votre texte, vous pouvez soit taper chaque caractère diacritique de cette façon, soit les laisser dans leur forme "naturelle". Une fois le texte achevé, utiliser la commande Remplacer de la plupart de traitements de texte (non présente dans Notepad). Notez cependant, que la plupart des nouveaux clients Web peuvent se passer de ce type de codage et sont à même de reconnaître les signes diacritiques afin de les convertir normalement. La plupart des balises se reconnaissent (et se différencient) du texte normal car elles sont placées entre les signes < et >. Ainsi, si on insère la balise suivante : <P> nous aurons pour résultat un saut de paragraphe. La plupart des balises ont un début et une fin. Elles permettent à l'élément situé entre ces balises de recevoir l'attribut correspondant. Ainsi, pour que le mot 'important' de la phrase suivante soit affiché nous devrons alors coder de cette manière : Il est important de le comprendre! Il est <B>important</B> de le comprendre! Le mot «important» est placé entre deux balises. Celle du début de la mise en gras <B> et celle de la fin de la mise en gras </B>. Nous pourrions très bien utiliser les balises <I> et </I> pour obtenir un texte en italique. Création de documents Web Page 2

3 Certaines balises sont utilisées comme marqueurs délimitant différentes parties du document HTML, comme par exemple : <HTML> ; indique le format du fichier (non indispensable pour la plupart des clients Web). </HTML> <HEAD> ; cette balise permet de positionner le début et la fin de l'entête d'une page. </HEAD> C'est ici que viendront se placer, par exemple, certains scripts (javascripts). Mais également les "METADATAS". Ces éléments sont décrits dans le cours <BODY> ; balise marquant le début du corps du document (le texte que va lire l'usager). </BODY> Mais voyons comment se présente un document HTML, appelé aussi "page Web". Dans l exemple ci-dessous, à gauche, le codage en html et à droite son résultat sur l écran une fois la page sauvegardée puis chargée avec Netscape : <HTML> <HEAD> <TITLE>Test</TITLE> </HEAD> <BODY> <H1>Bonjour!</H1> <HR> Cette page est un test. Nous l avons faite afin d illustrer notre propos sur le langage HTML. Remarquez que cette phrase ne comporte aucun accent. <BR>Au paragraphe suivant, nous placerons donc quelques accents pour indiquer comment les coder correctement en HTML. <P> La langue française n est pas dépourvue d accentutations. <P> <HR> <I>Genève, le 30 avril 1997.</I> </BODY> </HTML> Création de documents Web Page 3

4 Création pas-à-pas d une page d accueil d un service d information documentaire 1. Travaillez dans un répertoire (dossier) de votre PC que vous nommerez ESID98 sur le bureau. 2. Ouvrez Notepad ou tout autre traitement de texte. 3. Recopiez le texte ci dessous, sans les commentaires de la deuxième colonne. <HTML> <HEAD> <TITLE>Service documentaire...</title> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H1>Service documentaire...</h1> <HR> <IMG SRC="livre.gif" ALIGN=LEFT> <UL> <LI><A HREF="#INTRO">Présentation du service</a> <LI><A HREF="acquisitions.htm">Liste des acquisitions</a> <LI><A HREF=" Actualités internationales</a> </UL> <P> <HR> <P> Bienvenue sur notre site WWW! <A NAME="INTRO"> <H3>Présentation de notre service</h3> Notre service... -bla <HR> <A HREF="mailto:bidon@mail.site.ch">Nous écrire</a> <I>XY / GENEVE, le 22 mai 1997</I> </BODY> </HTML> balise non-obligatoire pour la plupart des clients Web. Remplacez les... par le nom que vous désirez (sans accents). TITLE sert à donner un nom à la fenêtre. C'est également son contenu qui sera repris dans le bookmark de l'usager.remarquez l imbrication des balises HEAD dans TITLE. Nous rajoutons à la balise BODY, la commande BGCOLOR pour donner une couleur de fond à notre document, ici en blanc 1 'Service documentaire...' sera écrit au format le plus grand possible <H1> Avec <HR>, nous tirons un trait horizontal Insertion dans le document d'une image dont le fichier se nomme livre.gif <UL> marque le début d'une liste (non ordonnée). Saut sur le milieu de la page 2 Lien vers un autre fichier, du même répertoire, qui se nomme acquisitions.html Lien sur un autre serveur Web. La balise <LI> sert à mettre une "puce" esthétique à chaque début de ligne </UL> marque la fin de la liste dont chaque élément commençait par <LI> Une ligne est tirée <HR> entre deux sauts de paragraphe <P> Placez un texte quelconque en veillant à la conversion des accentuations : eacute; è = è à = à etc... Pour la suite des codages, se référer à la liste fournie en annexe. Nous plaçons la balise "INTRO" pour notre 1 er lien au début de cette page La taille des titres de paragraphe vont de <H1> (la plus grande) à <H6> (la plus petite des tailles). Idem pour le texte libre que précédemment Vous pouvez utiliser la balise <P> pour faire des sauts de paragraphe ou utiliser la balise <BR> pour effectuer des retours de ligne. Si l'usager clique sur le texte Nous écrire il pourra nous envoyer un message à l'adresse bidon@mail.site.ch pour autant que son navigateur soit configuré. Remplacez XY par vos initiales Nous indiquons la fin du corps de ce document </BODY> Nous avons commencé par <HTML>, nous terminons par </HTML> 4. Sauvegardez ce fichier, au format txt, dans le répertoire ESID98 en le nommant: welcome.htm ou welcome.html selon le PC sur lequel vous travaillez (".htm" pour Windows 3.11 ou ".html" pour Windows 95). 1 FF FF FF sont les valeurs en hexadécimal représentant les trois composantes des couleurs de base (rouge, vert et bleu). Ces valeurs vont de 0 (zéro) à FF. Si 00 00, nous aurions un fond de page noir. Si ces trois composantes étaient FF 00 00, nous aurions un fond de page de couleur rouge intense. 2 Remarquez la présence du symbole #. Il signifie qu'avec ce lien, nous pointerons à un autre endroit de cette même page, là où sera placé la balise <A NAME="INTRO"> Création de documents Web Page 4

5 5. A l'aide de Netscape, nous allons rapatrier l'image pages.gif du serveur vers notre PC. Pour cela, veuillez taper l'adresse suivante depuis le Navigateur: L'image d'un livre animé apparaîtra. Pour copier cette image sur le disque dur de votre PC: a. Cliquez sur l'image avec le bouton droit de la souris. Un menu s'affichera devant vous. b. Sélectionnez l'option : 'Save this image as' (Sauvegarder cette image sous). c. Cliquez avec le bouton gauche de la souris. d. Sauvegardez cette image dans le répertoire ESID98 sous le nom de livre.gif 6. Il s'agit maintenant de créer un fichier qui contiendra la liste des acquisitions de votre service: a. Avec Notepad (ou tout autre traitement de texte) créez un fichier que vous nommerez acquisitions.htm (ou.html). Vous le sauvegarderez également dans le répertoire ESID98. b. Remplissez-le avec des notices bibliographiques que vous aurez copiées à cette adresse : c. Convertissez les accents diacritiques (facultatif). d. Faites une sauvegarde (comme indiqué au point a.). Votre premier site WWW vient d'être créé! Visionnez-le à l aide de Netscape, en utilisant la commande ouvrir fichier (open file). Sélectionnez votre répertoire et ouvrez le fichier welcome.htm (ou.html). Faites quelques tests, puis essayez d'y apporter quelques modifications comme celles qui sont proposées ci-dessous : Changez le texte de vos pages. Rapatriez une autre image dans votre répertoire. Faites la apparaître à la place de livre.gif Rapatriez une autre image que vous ajouterez aux images précédentes. Placez un lien dans la liste des acquisitions qui pointe sur la page d'accueil (fichier welcome.html). Faites des liens sur d'autres sites étrangers. Insérez la balise <PRE> au tout début du fichier des acquisitions et </PRE> à la fin. N'oubliez pas que pour faire vos modifications vous devrez revenir sur le traitement de texte utilisé, faire vos corrections, sauvegarder, revenir dans Netscape et actualiser votre page en cliquant sur le bouton Reload (Actualiser) afin que Netscape puisse prendre en compte les modifications apportées. Le langage HTML ne se limite pas aux seules balises décrites précédemment. D'excellents sites sur Internet vous proposent une documentation complète sur la programmation en HTML. Une sélection de ces sites ainsi que d'autres conseils vous sont proposés sur la page WWW suivante : Création de documents Web Page 5

6 ANNEXE 1 : La liste alphabétique de toutes les balises HTML 3.2 ADDRESS - Zone d'une adresse ou signature APPLET - Applet JAVA AREA - Zone interactive dans une imagemap A - Ancrage BASE - Localisation des documents par défaut BASEFONT - Taille des polices par défaut BIG - Grand BLOCKQUOTE - Ajout de marge BODY - Corps du document BR - Retour de ligne B - Gras CAPTION - Titre d'un tableau CENTER - Centré CITE - Zone d'une citation CODE - Zone pour du code (informatique) DD - Définition DFN - Zone pour une définition DIR - Directory DIV - Division logique DL - Liste de définition DT - Titre de définition EM - Italique FONT - Modification de police FORM - Définition d'un formulaire H1 - Titre niveau 1 H2 - Titre niveau 2 H3 - Titre niveau 3 H4 - Titre niveau 4 H5 - Titre niveau 5 H6 - Titre niveau 6 HEAD - Entête de document HR - Ligne horizontale HTML - Document HTML IMG - Images INPUT - codification d'objet pour formulaire. ISINDEX -Statut d'index au document I - Italique KBD - Entrée de clavier LINK - Structure du site LI - Elément d'une liste de termes MAP - Imagemap client MENU - Menu d'une liste d'éléments META - Meta-information OL - Liste numérotée OPTION - Définition d'entrée dans un liste de choix PARAM - Paramètre pour un applet JAVA PRE - Texte préformaté P - Paragraphe SAMP - Zone d'un exemple SCRIPT - Script en ligne SELECT - Sélection de liste SMALL - Petit STRIKE - Barré STRONG - Gras STYLE - Information sur le style SUB - Subscript SUP - Superscript TABLE - Tables TD - Cellule d'une table TEXTAREA - Zone de texte libre TH - Titre de colonne/ligne TITLE - Titre du document TR - Ligne d'une table TT - Teletype UL - Liste non numérotée U - Soulignement VAR - Zone d'une variable Création de documents Web Page 6

7 ANNEXE 2 : LISTE DU CODAGE POUR LES CARACTERES LATINS : (source : Exemple : la ligne suivante <!ENTITY eacute CDATA "é" -- small e, acute accent --> indique que l on peut coder : é par &eacute ; ou par &#233.   <!ENTITY nbsp CDATA " " -- no-break space --> <!ENTITY iexcl CDATA " " -- inverted exclamation mark --> <!ENTITY cent CDATA " " -- cent sign --> <!ENTITY pound CDATA " " -- pound sterling sign --> <!ENTITY curren CDATA " " -- general currency sign --> <!ENTITY yen CDATA " " -- yen sign --> <!ENTITY brvbar CDATA " " -- broken (vertical) bar --> <!ENTITY sect CDATA " " -- section sign --> <!ENTITY uml CDATA " " -- umlaut (dieresis) --> <!ENTITY copy CDATA " " -- copyright sign --> <!ENTITY ordf CDATA "ª" -- ordinal indicator, feminine --> <!ENTITY laquo CDATA "«" -- angle quotation mark, left --> <!ENTITY not CDATA " " -- not sign --> <!ENTITY shy CDATA " " -- soft hyphen --> <!ENTITY reg CDATA " " -- registered sign --> <!ENTITY macr CDATA " " -- macron --> <!ENTITY deg CDATA " " -- degree sign --> <!ENTITY plusmn CDATA "±" -- plus-or-minus sign --> <!ENTITY sup2 CDATA "²" -- superscript two --> <!ENTITY sup3 CDATA "³" -- superscript three --> <!ENTITY acute CDATA " " -- acute accent --> <!ENTITY micro CDATA "µ" -- micro sign --> <!ENTITY para CDATA " " -- pilcrow (paragraph sign) --> <!ENTITY middot CDATA " " -- middle dot --> <!ENTITY cedil CDATA " " -- cedilla --> <!ENTITY sup1 CDATA "¹" -- superscript one --> <!ENTITY ordm CDATA "º" -- ordinal indicator, masculine --> <!ENTITY raquo CDATA "»" -- angle quotation mark, right --> <!ENTITY frac14 CDATA "¼" -- fraction one-quarter --> <!ENTITY frac12 CDATA "½" -- fraction one-half --> <!ENTITY frac34 CDATA "¾" -- fraction three-quarters --> <!ENTITY iquest CDATA " " -- inverted question mark --> <!ENTITY Agrave CDATA "À" -- capital A, grave accent --> <!ENTITY Aacute CDATA "Á" -- capital A, acute accent --> <!ENTITY Acirc CDATA "Â" -- capital A, circumflex accent --> <!ENTITY Atilde CDATA "Ã" -- capital A, tilde --> <!ENTITY Auml CDATA "Ä" -- capital A, dieresis or umlaut mark --> <!ENTITY Aring CDATA "Å" -- capital A, ring --> <!ENTITY AElig CDATA "Æ" -- capital AE diphthong (ligature) --> <!ENTITY Ccedil CDATA "Ç" -- capital C, cedilla --> <!ENTITY Egrave CDATA "È" -- capital E, grave accent --> <!ENTITY Eacute CDATA "É" -- capital E, acute accent --> <!ENTITY Ecirc CDATA "Ê" -- capital E, circumflex accent --> <!ENTITY Euml CDATA "Ë" -- capital E, dieresis or umlaut mark --> <!ENTITY Igrave CDATA "Ì" -- capital I, grave accent --> <!ENTITY Iacute CDATA "Í" -- capital I, acute accent --> <!ENTITY Icirc CDATA "Î" -- capital I, circumflex accent --> <!ENTITY Iuml CDATA "Ï" -- capital I, dieresis or umlaut mark --> <!ENTITY ETH CDATA "Ð" -- capital Eth, Icelandic --> <!ENTITY Ntilde CDATA "Ñ" -- capital N, tilde --> <!ENTITY Ograve CDATA "Ò" -- capital O, grave accent --> <!ENTITY Oacute CDATA "Ó" -- capital O, acute accent --> <!ENTITY Ocirc CDATA "Ô" -- capital O, circumflex accent --> <!ENTITY Otilde CDATA "Õ" -- capital O, tilde --> <!ENTITY Ouml CDATA "Ö" -- capital O, dieresis or umlaut mark --> <!ENTITY times CDATA " " -- multiply sign --> <!ENTITY Oslash CDATA "Ø" -- capital O, slash --> <!ENTITY Ugrave CDATA "Ù" -- capital U, grave accent --> Création de documents Web Page 7

8 <!ENTITY Uacute CDATA "Ú" -- capital U, acute accent --> <!ENTITY Ucirc CDATA "Û" -- capital U, circumflex accent --> <!ENTITY Uuml CDATA "Ü" -- capital U, dieresis or umlaut mark --> <!ENTITY Yacute CDATA "Ý" -- capital Y, acute accent --> <!ENTITY THORN CDATA "Þ" -- capital THORN, Icelandic --> <!ENTITY szlig CDATA "ß" -- small sharp s, German (sz ligature) --> <!ENTITY agrave CDATA "à" -- small a, grave accent --> <!ENTITY aacute CDATA "á" -- small a, acute accent --> <!ENTITY acirc CDATA "â" -- small a, circumflex accent --> <!ENTITY atilde CDATA "ã" -- small a, tilde --> <!ENTITY auml CDATA "ä" -- small a, dieresis or umlaut mark --> <!ENTITY aring CDATA "å" -- small a, ring --> <!ENTITY aelig CDATA "æ" -- small ae diphthong (ligature) --> <!ENTITY ccedil CDATA "ç" -- small c, cedilla --> <!ENTITY egrave CDATA "è" -- small e, grave accent --> <!ENTITY eacute CDATA "é" -- small e, acute accent --> <!ENTITY ecirc CDATA "ê" -- small e, circumflex accent --> <!ENTITY euml CDATA "ë" -- small e, dieresis or umlaut mark --> <!ENTITY igrave CDATA "ì" -- small i, grave accent --> <!ENTITY iacute CDATA "í" -- small i, acute accent --> <!ENTITY icirc CDATA "î" -- small i, circumflex accent --> <!ENTITY iuml CDATA "ï" -- small i, dieresis or umlaut mark --> <!ENTITY eth CDATA "ð" -- small eth, Icelandic --> <!ENTITY ntilde CDATA "ñ" -- small n, tilde --> <!ENTITY ograve CDATA "ò" -- small o, grave accent --> <!ENTITY oacute CDATA "ó" -- small o, acute accent --> <!ENTITY ocirc CDATA "ô" -- small o, circumflex accent --> <!ENTITY otilde CDATA "õ" -- small o, tilde --> <!ENTITY ouml CDATA "ö" -- small o, dieresis or umlaut mark --> <!ENTITY divide CDATA " " -- divide sign --> <!ENTITY oslash CDATA "ø" -- small o, slash --> <!ENTITY ugrave CDATA "ù" -- small u, grave accent --> <!ENTITY uacute CDATA "ú" -- small u, acute accent --> <!ENTITY ucirc CDATA "û" -- small u, circumflex accent --> <!ENTITY uuml CDATA "ü" -- small u, dieresis or umlaut mark --> <!ENTITY yacute CDATA "ý" -- small y, acute accent --> <!ENTITY thorn CDATA "þ" -- small thorn, Icelandic --> <!ENTITY yuml CDATA "ÿ" -- small y, dieresis or umlaut mark --> Création de documents Web Page 8

9 II. La création de pages Web à l aide d un éditeur WYSIWYG : Netscape Communicator La version Communicator de NS (Netscape) fonctionne sous deux modes : 1. Mode Navigator (navigation) : permet de naviguer sur le WWW comme dans les autres versions standards. 2. Mode Composer (composition) : permet d éditer et de créer des documents sur le WWW. MODE NAVIGATION Voici ce qui nous apparaît à l'écran quand nous exécutons Communicator et que nous accédons à la page d'accueil du serveur web de l'université : Une fenêtre de la page en question accompagnée d'une palette flottante. La palette flottante ci-contre permet de sélectionner une application spécifique de Communicator : Navigator pour utiliser Communicator comme un simple client WWW (cf. image ci-dessus). Mailbox pour gérer le courrier électronique ( ). Discussions pour accéder aux groupes de discussions (Newsgroups). Composer pour éditer et créer de nouvelles pages web. C'est avec ce dernier que nous travaillerons. Pour passer en mode édition, il suffit de cliquer sur ce bouton. Création de documents Web Page 9

10 MODE EDITION En cliquant sur l'icône de Composer, nous obtenons à l'écran la fenêtre suivante : Cette longue série de boutons vous indique que vous êtes passé en mode édition. Le dessin d'un crayon flèche (en haut à gauche) nous le confirme. Si nous étions restés en mode navigation, nous aurions le petit gouvernail. La barre d'état de Windows nous l'indique également : Attributs statiques Modifie le style et la police de caractère. Modifie la taille du texte sélectionné et sa couleur Modifie respectivement l aspect des caractères sélectionnés en gras, en italique et souligné. Tire une ligne de longueur et d épaisseur variable Création de documents Web Page 10

11 Insère un tableau de colonnes et de lignes variables. Il suffit de «cliquer» dans une des cellules du tableau pour y placer du texte ou de spécifier les attributs du tableau (nombre de lignes, de colonnes, espacement, etc.) : Number of rows Number of columns Table alignement Include caption above below table Border line width Cell spacing Cell padding Table width Table min. Height Equal column width Table background Use Color Use image Leave image... Extra HTML nombre de lignes. nombre de colonnes. alignement de la table intégrer la légende. au-dessus. au dessous. largeur de la bordure. espace entre les cellules. espace dans les cellules largeur de la table. hauteur min. de la table. largeurs de col. Egales fonds de la table couleur de fonds image de fonds image fixe Rajouter du code HTML Attributs dynamiques (vers un autre fichier p.ex.). Procédure : 1. Sélectionner le ou les mots qui deviendront «activables». Cliquer sur le bouton et la fenêtre suivante s ouvrira devant vous : 2. Indiquer dans la fenêtre «Link to a page location or local file», le chemin d accès éventuel mais surtout le nom de fichier sur lequel le lien s activera. Par ex. : bahamas/hotels/hilton.htm signifiera que lorsque l usager cliquera sur le texte rendu actif, NS chargera le fichier hilton.htm (une description de l hôtel Hilton) qui se trouve dans le sous-répertoire hotels qui lui-même se trouve dans bahamas. Pour éviter les erreurs de frappe, et si le fichier cible existe, cliquez sur Choose File pour sélectionner le bon fichier 3. Cliquer sur OK. A noter que pour tester la validité des liens, il faudra retourner en mode navigation (Navigator) et éventuellement recharger la page (reload). Création de documents Web Page 11

12 Place une balise dans votre document qui vous permettra de faire un lien sur le même fichier. Souvent utilisé lorsque nous avons au début un sommaire qui pointe à différents endroits du même fichier. Il suffit donc d'entrer la commande suivante : <A HREF="#Balise1">Votre texte</a> pour que l'usager, lorsqu'il cliquera sur 'Votre texte' se retrouve sur la ligne où a été placé la balise "Balise1". Image location Indiquer le chemin et le nom du fichier graphique. Text alignement and wrapping around images Aligne le texte en fonction de l image (il suffit de cliquer sur le bouton désiré). Dimensions N utiliser que si vous connaissez les dimensions exactes de l image. Permet d'accélerer le temps de chargement du texte. Alternative representations - Text : Ecrire un texte décrivant l image qui apparaîtra à l usager si ce dernier ne parvient pas ou ne veut pas Space around image Permet de donner plus d espace entre l image et le texte ainsi que de placer une bordure d épaisseur variable. Extra HTML Rajouter du code HTML supplémentaire Les autre onglets (Link, paragraph) permettent : Link : de rendre l image «cliquable» en fournissant le chemin et le nom du fichier cible. Paragraph : Appliquer un style particulier (ne pas utiliser). Autres fonctions Efface tous les attributs d un élément. Crée un nouveau document Ouvre un ancien document Sauvegarde (enregistre) le document en cours. Création de documents Web Page 12

13 Permet de transférer les documents sur le serveur WWW (non utilisé). Passe en mode navigation (browser). Utile pour contrôler le bon affichage et les fonctions d un document. A chaque changement, le programme vous propose de sauvegarder votre document. Imprime le document en cours. Effectue une recherche de mots sur le document en cours. Respectivement : Couper, Copier, Coller. Fonctions désormais classiques sous Windows. Permet une Justification à gauche, Centré, Justification à droite du texte. Respectivement : Retrait à gauche, Retrait à droite. Respectivement : Liste non numérotée (une puce est placée après chaque retour de chariot) Liste numérotée (un chiffre - un nombre ou une lettre - est placé après chaque retour de chariot). Dernières remarques : 1. Utiliser autant que possible le menu contextuel (bouton droit de la souris). 2. Pour effectuer un retour à la ligne utiliser «shift» + «ENTER» plutôt que «ENTER» tout seul. En effet «ENTER» tout seul provoque un saut de paragraphe et non un retour de ligne. 3. Un manuel plus complet est disponible aux adresses suivantes : Pour la composition de pages Pour la navigation Création de documents Web Page 13

14 III. Le transfert des pages créées sur un serveur WWW Utilisation du protocole ftp Jusqu'à présent, nos pages sont uniquement consultables localement. Pour permettre aux usagers du monde entier d'accéder à nos documents, nous devrons les transférer sur un serveur WWW. Ce dernier héberge un programme WWW-serveur qui se charge de gérer toutes les transactions entre les usagers et nos documents. Ce n'est pas le cas des PC sur lesquels nous travaillons. Pour effectuer cette opération de transfert, nous allons utiliser un programme spécifique utilisant le protocole ftp (File Transfer Protocol). Pour lancer ce programme, cliquez sur le bouton "Démarrer" puis le chemin suivant selon les menus Programmes Files OnNet32 FTP Lorsque le programme FTP est exécuté, une fenêtre de ce type devrait vous apparaître à l'écran (à droite) : En pressant sur cette icône, nous allons pouvoir établir une connexion avec le serveur qui hébergera notre site. Une autre fenêtre de ce type apparaîtra sur votre écran sur laquelle il faudra fournir les informations nécessaires afin de se connecter avec le serveur (adresse de la machine, nom et mot de passe de l'usager) : bouton CONNECT pour établir la connexion. A gauche, A droite, l'état des répertoires (haut) et des fichiers (bas) de votre disque dur l'état des répertoires (haut) et des fichiers (bas) du disque dur du serveur Au milieu, une série de boutons qui vous permet de copier les fichiers de gauche à droite c'est-à-dire de votre PC local sur celui du serveur. Attention si un fichier existant sur le serveur porte le même nom que celui de votre PC qui va être transféré, le fichier du serveur sera écrasé par celui du PC. D'autre boutons vous permettent, lorsque vous avez sélectionné un fichier (ou plusieurs à l'aide des touches CTRL ou SHIFT), de renommer (Rename) ou d'effacer (Delete) les fichiers en question. Pour des raisons de sécurité, cette étape de connexion ainsi que les transferts de fichiers de votre PC vers le serveur WWW sera faite lors du travail pratique par l'intervenant. Il suffit alors de se connecter avec Netscape sur la bonne adresse (ici, celui de l'esid) pour prendre connaissance des pages WWW qui sont désormais disponibles pour n'importe quel usager d'internet! Création de documents Web Page 14

15 IV. Utilisation de quelques fonctions évoluées sur les pages html Javascripts, Frames, Scripts CGI JAVASCRIPT "Javascript est un shell script sans héritage ni classes". Le javascript (ou script java) est un langage de programmation interprété qui est exécuté par le client Web capable de le comprendre. Un javascript est intégré dans une page html. Les commandes javascript se combinent souvent avec les balises HTML. Son avantage sur un HTML encore trop statique, c'est de pouvoir apporter la puissance que permettent les programmes sans pour autant surcharger le serveur puisqu'il est exécuté localement. Ci-dessous un exemple de page html avec du javascript (en gras) qui une fois chargée permet de convertir les degrés Celsius en Fahrenheit et vice-versa : <HTML> <HEAD> <TITLE>Exemple de script</title> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> function celtofar (form) {form.fahrenheit.value = form.celsius.value*1.8+32} function fartocel (form) { form.celsi.value = (form.fahren.value-32)/1.8 } </SCRIPT> <FORM> <INPUT TYPE ="text" NAME="celsius" SIZE=15 > <INPUT TYPE ="button" VALUE="Celsius -> Fahrenheit" ONCLICK="celtofar(this.form)"> <INPUT TYPE="text" NAME="fahrenheit" SIZE=15 > <p> </form> <form> <input type ="text" NAME="fahren" SIZE=15 > <input type = "button" value="fahrenheit -> Celsius" onclick="fartocel(this.form)"> <input type="text" NAME="celsi" SIZE=15 > </FORM> </center> </BODY> </HTML> Exercice : Intégrer un javascript sur une de vos pages en le pompant (copier/coller) depuis une des pages exemples depuis l'adresse suivante : Au lieu de convertir des degrés Celsius et Fahrenheit, utilisez votre imagination pour effectuer un autre type de conversion qui pourrait rendre service aux usagers de votre SID. Création de documents Web Page 15

16 CGI (Common Gateway Interface) Lorsque l'on veut interagir entre le client et le serveur (p.ex. le client renvoie un formulaire qui sera ou non validé par le serveur puis la confirmation sera retournée au client), il est nécessaire d'utiliser des pages dynamiques, créées en fonction de requêtes émises par l'utilisateur. Une simple page HTML statique ne suffit plus. Dans ce cas, on doit recourir à ce qu'on appelle des scripts ou programmes CGI (Common Gateway Interface) installés sur le serveur et qui s'exécutent sur le serveur. Une des applications citée en exemple est la mise en place sur le serveur d'un programme "compteur". Il se chargera de comptabiliser le nombre d'accès effectués par les usagers sur une page HTML. Nous allons pour cela utiliser le programme de comptage installé sur le serveur de l'université. Une documentation très complète mais en anglais est disponible sur le serveur WWW de l'université à l'adresse : Exercice : 1. Chargez une de vos pages html précédemment rédigée OU recopiez les balises ci-dessous : <HTML> <HEAD> <TITLE>TEST COMPTEUR</TITLE> </HEAD> <BODY> <H4> Ceci est un test de compteur</h4> <IMG SRC=" </BODY> </HTML> Enregistrez ce fichier en le nommant t.html 2. Insérez la balise suivante dans le corps de votre document (à la fin p.ex., avant la balise </BODY>) : <IMG SRC=" ATTENTION! : Remplacer TEST.html par le nom du fichier qui porte cette balise (ainsi que son chemin si le fichier sera transféré sur un serveur. 3. Charger votre page, puis réactualisez-la! Vous verrez alors le résultat. Essayer de modifier l'effet du compteur à l'aide de ses différentes options qui sont décrites dans sa FAQ à l'adresse citée plus haut. Par exemple, augmenter ou réduire le nombre de chiffres, le remettre à zéro. Que pensez-vous de ses avantages et des ses défauts? Création de documents Web Page 16

17 FRAME Les frames permettent de partager une page Web en plusieurs fenêtres indépendantes. Ce partage en plusieurs fenêtres se fait à l'aide des balises <FRAMESET> et <FRAME>. Le corps du document n'est plus délimité par la balise <BODY> mais par la balise <FRAMESET>. Exemple: <HTML> <HEAD>...bla-bla...</HEAD> <FRAMESET> <FRAME SRC="document1.html"> </FRAMESET> Ici document1.html est le fichier qui est chargé dans le ce premier "Frame". </HTML> <FRAMESET> se complète en définissant la taille de la fenêtre en largeur et hauteur à l'aide des attributs ROWS et COLS : ROWS = hauteur COLS = largeur Cette taille est définie en pixels (points sur l'écran) ou en taille relative à l'aide de pourcentages, 100% = totalité de l'écran. On peut remplacer les chiffres par l'astérisque (*) qui permet une répartition équitable sur l'écran. ROWS: représente la liste des hauteurs de chaque ligne. Le nombre de lignes est égal au nombre d'éléments présents dans la liste COLS: représente la liste des tailles respectives de chaque colonne et comme pour l'attribut ROWS, le nombre de lignes est égal au nombre d'éléments présents dans la liste séparés par des virgules <FRAMESET ROWS="*,20"> <FRAME NAME="corps" SRC="index.html" MARGINHEIGHT=12 MARGINWIDTH=12 SCROLLING = "auto" NORESIZE> <FRAME NAME="bandeau" SRC="banniere.html" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING = NO NORESIZE> </FRAMESET> <NOFRAME> Création de documents Web Page 17