Publication sur Internet

Transcription

1 SÉANCE 3 Publication sur Internet 3.1 Edition d un site en HTML Les différents types de documents Les documents présents sur Internet peuvent être de différents formats. Le format HTML est le premier tant d un point de vue historique que d un point de vue du taux d utilisation. Flash est un format permettant de réaliser des animations. Ces animations vont d un simple déplacement de formes géométriques à de véritables dessins animés. Les animations Flash sont souvent intégrées dans des pages HTML. Le format PDF (Portable Document Format) a été développé par la société Adobe avec comme objectif d être le format utilisé pour le transfert de document destiné à l impression. Avec l explosion d Internet, ce format s est naturellement généralisé lorsqu il s agit de distribuer sous forme numérique des documents papier Le format HTML Le HTML (Hypertext Markup Language) est le langage permettant de développer des pages Internet. S il est possible d utiliser des logiciels évolués pour concevoir des pages HTML (cf. NVU), une grande force du HTML c est qu on peut aussi créer des pages Web avec un simple éditeur de texte (fourni avec tout système d exploitation). Les documents HTML sont composés de textes " bruts " et de balises qui définissent la mise en forme. La notion de balise Le HTML n est pas un langage de programmation, Une page HTML est donc un simple fichier texte contenant des balises (parfois appelées marqueurs ou repères) permettant de mettre en forme le texte, les images, etc. Une balise est une commande (un nom) encadrée par le caractère inférieur (<) et le caractère supérieur (>) par exemple "<H1>". Les balises HTML sont généralement présentes par paire afin d agir sur les éléments qu elles encadrent. La première est appelée "balise d ouverture" (parfois balise ouvrante) et la seconde "balise de fermeture" (ou fermante). La balise fermante est précédée du caractère / : <marqueur> Votre texte formatté </marqueur> Ainsi les balises <b> et </b> permettent de mettre en gras le texte qu elles encadrent : Exemple : <b> Ce texte est en gras </b> 1

2 Les balises HTML peuvent parfois être uniques : la balise <br> représente par exemple un retour à la ligne. Pour autant, afin d être le plus proche possible du standard XHTML (beaucoup plus stricte que le standard HTML), il est conseillé d utiliser la notation suivante : <br />. Les balises HTML ont la particularité de pouvoir être imbriquées de manière hiérarchique afin de permettre le cumul de leurs propriétés. En contrepartie le chevauchement de balises n est pas toléré par le standard HTML. Exemple : <i><b>cours d HTML</b>unité libre</i> L exemple ci-dessus donne le résultat suivant : Cours d HTML unité libre. En contrepartie l exemple cidessous n est pas correct : Exemple : <i><b> Cours d HTML </i> unité libre </b> Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des propriétés supplémentaires à la balise à laquelle il appartient. Les attributs se présentent la plupart du temps comme une paire clé-valeur, sous la forme cle="valeur", mais certains attributs sont parfois une seule clé. Voici un exemple d attribut pour la balise <p> (balise définissant un paragraphe) permettant de spécifier que le texte doit être aligné sur la droite : <p align="right">exemple de paragraphe</p> Chaque balise peut comporter un ou plusieurs attributs, chacun pouvant avoir (aucune,) une ou plusieurs valeurs. La structure d un document HTML Un document HTML est composé de deux sections. La première est l en-tête qui contient les éléments généraux Ç Ì È ÀÌÅÄÈÍ ÄÁ ¹»»Ï»» Ì ÀÌÅÄ º¼ÌÖ Ò Ø ÓÒ Ð»» Æ à la page, comme le titre du document qui apparaît en haut du navigateur. La seconde section ØÑÐ est le corps qui contient le document a proprement parler (textes, images, formulairesě). L en-tête est définit avec la balise <head> et le corps par la balise <body>. En plus le document HTML doit être inclus dans la balise <html>.» Ø ØÐ Ì ØÖ Ù ÓÙÑ ÒØ»Ø ØÐ Un exemple d une page complète : Ó Ý» Ó Ý» ØÑÐ Å ÔÖ Ñ Ö Ô ÀÌÅÄ Le titre de la page est défini par la balise <title>. La première ligne " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> " défini le type de document. Elle n est pas obligatoire en HTML, mais elle permet au navigateur de savoir que le fichier est conforme à la spécification HTML. Le corps du document La balise <body> contient le corps du document. C est par cette balise qu on définit des propriétés générales au document comme la couleur de fond. Les attributs de cette balise sont : bgcolor : définit la couleur du fond de l écran, 2

3 text : définit la couleur du texte, link : définit la couleur des liens, vlink : définit la couleur des liens déjà visités, alink : définit la couleur des liens activés, c est à dire quand le pointeur de la souris passe au-dessus, background : définit l image (gif ou jpeg) à utiliser comme fond d écran, leftmargin : définit la largeur de la marge de gauche en pixels, topmargin : définit la largeur de la marge du haut en pixels. La mise en forme du texte Gras La balise pour mettre du texte en gras est <b>texte à mettre en gras</b>. Exemple : Du texte normal, <b>et du texte en gras</b> Du texte normal, et du texte en gras. Italique La balise pour mettre du texte en gras est <i>texte à mettre en italique</i>. Exemple : Du texte normal, <i>et du texte en italique</i> Du texte normal, et du texte en italique Souligné La balise pour souligner du texte est <u>texte à souligner</u>. Exemple : Du texte normal, <u>et du texte souligné</u> Du texte normal, et du texte souligné La balise <font> La balise <font> permet de spécifier la police de caractères à utiliser. On peut notamment choisir la couleur du texte, la taille du texte ou le type de police. <font color="[une couleur]" size="[un nombre]" face="[une ou des police(s)]"> L attribut color, définit la couleur de la police, on peut utiliser les noms de couleur en anglais ou en Hexadécimal. Size définit la taille de la police. Face définit le type de la police, exemple : Comic Sans MS, Verdana, Times New Roman, Arial. Les paragraphes Pour définir un paragraphe, il suffit de mettre son texte entre les balises <p> et </p>. Il est possible d aligner les paragraphes à gauche (left), au centre (center), à droite (right) ou de les justifier (justify). Pour cela on utilise l attribut align dans la balise <p>. Exemples : <p align="left">paragraphe Ø ÜØ Ø ÙÖÐ ÔÖ Ñ Ö Ð Ò º Ø ÐÙ Ù º aligné à gauche<p>. ÈÓÙÖ ÙØ ÖÙÒ Ð Ò Ð ÙØÙØ Ð ÖÙÒ Ð º Les sauts de lignes Si dans le fichier HTML on saute une ligne, on remarque que la page affichée par le navigateur ne possède pas le saut de ligne. Pour indiquer qu on souhaite sauter une ligne il faut utiliser la balise <br>. Comme cette balise n englobe pas d autre information, on peut utiliser la syntaxe de fermeture rapide, c est à dire : <br />. Exemple : Ce texte est sur la première ligne. Et celui ci aussi. <br /> Pour sauter une ligne, il faut utiliser une balise. Et le résultat : Les liens La syntaxe d un lien hypertexte est la suivante : <a href="fichier cible.html">mon texte</a> Dans le document le lien sera visible avec le message " Mon texte ", et si l on clique sur le lien, le fichier ouvert sera " fichier cible.html ". L attribut href définit le document ciblé par le lien. Ce document peut être soit interne, c est-à-dire une autre page HTML dans le site en cours, soit externe, c est-à-dire un autre site Internet. Il est possible d ouvrir le lien dans une nouvelle fenêtre, pour cela on utilise l attribut target avec la valeur "_blank". Exemple : <a href="fichier cible.html" target="_blank">ouverture d une nouvelle fenêtre</a> Si l on veut accéder à une section particulière d un document HTML, on peut définir une ancre. La syntaxe est la suivante : <a name="nom de l ancre"></a> Ensuite pour appeler l ancre dans un lien la syntaxe est : <a href="#nom de l ancre "> Accès à la section </a> On peut aussi appeler l ancre depuis un autre document : <a href="fichier.html#nom de l ancre "> Accès à la section </a> Remarque : une ancre est invisible dans le navigateur. Le fichier ciblé par le lien peut être de n importe quel type. C est le navigateur qui sait reconnaître ou non le type de fichier. 3

4 Les images Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l excès car les images peuvent impliquer un temps de chargement assez long et peuvent dans certains cas nuirent à la lisibilité. La balise <img> du langage HTML permet d insérer des images dans une page HTML. L image peut être située sur le même serveur que la page dans laquelle elle est insérée mais également sur un autre serveur en spécifiant son URL complète. Seuls les formats d images suivants sont acceptés en standard dans les spécifications du W3C : Les images JPEG (.JPG) : les images ayant un grand nombre de couleurs seront bien compressées, c està-dire qu elles prendront moins de place, donc nécessiteront un temps de chargement moindre. Les images PNG : Leur taille est faible dans le cas d images avec peu de couleurs avec des tons uniformes, ce format permet en outre d avoir des images entrelacées (qui s affichent progressivement) avec une profondeur de couleurs de 24 bits et des images dont on définit une couleur comme transparente. Les images GIF : Elles possèdent les mêmes atouts que les images PNG, si ce n est que le format GIF est limité à 256 couleurs maximum et que ce format n est pas totalement libre. Les attributs de la balise <img> sont les suivant : src : Indique l emplacement de l image (il est obligatoire) align : Spécifie l alignement de l image par rapport au texte adjacent. Il peut prendre les valeurs: TOP, MIDDLE, et BOTTOM (au-dessus, au milieu et en-dessous) alt : Permet d afficher un texte alternatif lorsque l image ne s affiche pas. title : Permet d afficher une infobulle lors du survol de l image par le curseur. width : Permet de spécifier la largeur de l image. height : Permet de spécifier la hauteur de l image. Exemple : <img src="image.jpg" alt="une belle image" width="100" height="50"/> L image insérée sera " image.jpg " avec une largeur de 100 pixels et une hauteur de 50 pixels. Dans le cas où l image ne pourrait pas être affichée, le texte " une belle image " sera affichée. Les tableaux On peut avoir besoin de présenter des informations de manière structurée. Pour cela on peut utiliser les tableaux. Les tableaux sont définis comme étant des suites de lignes. Le tableau est encadré par les balises Ø Ð ÓÖ Ö ½ <table> et </table>. Le titre du tableau est encadré par <caption> </caption>. Chaque ligne est encadrée ÔØ ÓÒ Ì ØÖ ÙØ Ð Ù» ÔØ ÓÒ par <tr> </tr> (Table Row, traduisez par ligne du tableau). Les cellules d en-tête sont encadrées par <th> ØÖ </th> (pour Table Header : En-tête de tableau) et les cellules de valeur sont encadrées par <td> </td> (Table Data: Donnée de tableau). Ø Ì ØÖ ¾»Ø Ø Ì ØÖ ½»Ø Exemple Ø Ì ØÖ»Ø : ØÖ»ØÖ»ØÖ Ø ÐÐÙÐ ½»Ø Ø ÐÐÙÐ ¾»Ø Ø ÐÐÙÐ»Ø»Ø Ð 4

5 Titre 1 Titre 2 Titre 3 Cellule 1 Cellule 2 Cellule 3 Table 3.1: Titre du Tableau Et le résultat : La balise <table> possède des attributs qui sont (liste non exhaustive) : align : l alignement du tableau sur la page, border : la taille de la bordure, si 0 il n y a pas de bordure, cellpadding : espacement entre le contenu d une cellule et son encadrement, cellspacing : épaisseur de la grille intérieure. Les formulaires Les formulaires interactifs permettent aux auteurs de pages Web de dialoguer avec leurs lecteurs, un peu comme les coupons-réponse que l on trouve dans les magazines. Le lecteur saisit des informations en remplissant des champs ou en cliquant sur des boutons, puis appuie sur un bouton de soumission (submit) pour l envoyer à une url, c est-à-dire de façon générale à une adresse ou à un script CGI (Common Gateway Interface, traduisez "Interface de passerelle généralisée") stocké sur un serveur et écrit dans un langage de programmation comme un shell UNIX, PERL, TCL, Applescript, etc. Pour définir un formulaire on utilise la balise <form>. Cette balise permet de regrouper plusieurs éléments de formulaire. Les attributs sont : method : indique la méthode d envoi utilisée (POST ou GET), action : définit l action à faire lors de la soumission du formulaire, généralement action indique une URL. enctype : définit le format des données, dans le cas où le formulaire contient des fichier il faut mettre cette attribut à " multipart/form-data ". La balise <form> constitue en quelque sorte un conteneur permettant de regrouper des éléments qui vont permettre à l utilisateur de choisir ou de saisir des données, ensemble de données qui seront envoyées à l URL indiqué dans l attribut action de la balise <form> par la méthode indiquée par l attribut method. Il est possible d insérer n importe quel élément HTML de base dans une balise <form> (textes,boutons,tableaux,liens,...) mais il est surtout intéressant d insérer des éléments interactifs. Ces éléments interactifs sont : La balise <input> : un ensemble de boutons et de champs de saisie, La balise <textarea> : une zone de saisie, La balise <select> : une liste à choix multiples. La balise <input> est la balise essentielle des formulaires, car elle permet de créer un bon nombre d éléments "interactifs". La syntaxe de cette balise est la suivante: <input type="nom du champ" value="valeur par défaut" name="nom de l élément"> L attribut name est essentiel car il permettra au script CGI de connaître le champ associé à la paire nom/valeur, c est-à-dire que le nom du champ sera suivi du caractère "=" puis de la valeur entrée par l utilisateur, ou dans le cas contraire de la valeur par défaut repérée par l attribut value. L attribut type permet de préciser le type d élément que représente la balise <input>, voici les valeurs que ce champ peut prendre : checkbox: il s agit de cases à cocher pouvant admettre deux états: checked (cochée) et unchecked (non cochée). Lorsque la case est cochée la paire nom/valeur est envoyée au CGI, hidden: il s agit d un champ caché. Ce champ non visible sur le formulaire permet de préciser un paramètre fixe qui sera envoyé au CGI sous forme de paire nom/valeur, 5

6 file: il s agit d un champ permettant à l utilisateur de préciser l emplacement d un fichier qui sera envoyé avec le formulaire. image: il s agit d un bouton de soumission personnalisé, dont l apparence est l image située à l emplacement précisé par son attribut src, password: il s agit d un champ de saisie, dans lequel les caractères saisis apparaissent sous forme d astérisques afin de camoufler la saisie de l utilisateur, radio: il s agit d un bouton permettant un choix parmi plusieurs proposés (l ensemble des boutons radios devant porter le même attribut name). La paire nom/valeur du bouton radio sélectionné sera envoyée au CGI. Un attribut checked pour un des boutons permet de préciser le bouton sélectionné par défaut, reset: il s agit d un bouton de remise à zéro permettant uniquement de rétablir l ensemble des éléments du formulaire à leurs valeurs par défaut, submit: il s agit du bouton de soumission permettant l envoi du formulaire. Le texte du bouton peut être précisé grâce à l attribut value, text: il s agit d un champ de saisie permettant la saisie d une ligne de texte. La taille du champ peut être définie à l aide de l attribut size et la taille maximale du texte saisi grâce à l attribut maxlength. La balise <textarea> permet de définir une zone de saisie plus vaste par rapport à la simple ligne de saisie que propose la balise <input>. Cette balise possède les attributs suivants: cols: représente le nombre de caractères que peut contenir une ligne rows: représente le nombre de lignes name: représente le nom associé au champ, c est le nom qui permettra d identifier le champ dans la paire nom/valeur readonly: permet d empêcher l utilisateur de modifier le texte entré par défaut dans le champ value: représente la valeur qui sera envoyée par défaut au script si le champ de saisie n est pas modifié par une frappe de l utilisateur. La balise <select> permet de créer une liste déroulante d éléments (précisés par des balises <option> à l intérieur de celle-ci). Les attributs de cette balise sont: name: représente le nom associé au champ, c est le nom qui permettra d identifier le champ dans la paire nom/valeur disabled: permet de créer une liste désactivée, c est-à-dire affichée en grisée Ç Ì È ØÑÐÈÍ ÄÁ ¹»»Ï»» Ì ÀÌÅÄ º¼½ÌÖ Ò Ø ÓÒ Ð»» Æ size: représente le nombre de lignes dans la liste (cette valeur peut être plus grande que le nombre ØÑÐ d éléments effectifs dans la liste) multiple: marque la possibilité pour l utilisateur de choisir plusieurs champs dans la liste.» Ó Ý Ö Ö Ø ØÐ Ò Ö Ö»Ø ØÐ Exemple de formulaire ÓÖÑ Ø ÓÒ Ñ ÐØÓ ØÓØÓºØ Ø ÙÒ Ú¹ØÓÙÖ º Ö Ñ Ø Ó ÔÓ Ø ÒØÝÔ Ø ÜØ»ÔÐ Ò ¾ Ô Ò ÒÚ ÒÙ Ð Ô ³ Ò Ö ÔØ ÓÒÐ³Í Ä Ö Ò ÓÖÑ Ø ÕÙ Ò Ú Ù µ 6

7 Ö» ¾ ÆÓÑ ÒÔÙØÚ ÐÙ Ø Ô ÞÚÓØÖ ÒÓÑ Þ ¼ Ñ ÜÐ Ò Ø ¾ ØÝÔ Ø ÜØ» Ô Ò Ö Ö Ë Ü ÒÔÙØÒ Ñ Ü Ú ÐÙ À ØÝÔ Ö Ó ÀÓÑÑ Ð ØÒ Ñ ÓÔØ ÓÒÚ ÐÙ ½ ÖÓ Ø»ÓÔØ ÓÒ ÒÔÙØÒ Ñ Ü Ú ÐÙ ØÝÔ Ö Ó ÑÑ Ö Ö Ë³ Ò Ö Ö» Ð Ø ÓÔØ ÓÒÚ ÐÙ Ë Ò Ð³ Ò Ò ÙÖ Ø ÙØÖ»ÓÔØ ÓÒ ÓÔØ ÓÒÚ ÐÙ ¾ Ä ØØÖ ØÈ Ý ÓÐÓ»ÓÔØ ÓÒ Ö Ö ÉÙ³ Ø ÕÙ ÚÓÙ ØØ Ò Þ Ð³Í Ð Ö ÒÔÙØÒ Ñ Ò Ö ÔØ ÓÒ ¾Á Ú ÐÙ ¾Á ØÝÔ ÓÜ ¾Á Ø ÜØ Ö Ò Ñ ÓÑÑ ÒØ Ö ÖÓÛ ÓÐ ¾¼ ÁÒ Ö Þ ÚÓØÖ Ñ»Ø ÜØ Ö ÒÔÙØÒ Ñ Ò Ö ÔØ ÓÒ ¾Á Ú ÐÙ Í ØÝÔ ÓÜ Í Ð Ö ÒÔÙØÚ ÐÙ ÒÚÓÝ Ö ØÝÔ Ù Ñ Ø Ö ÒÔÙØÚ ÐÙ Ö ØÝÔ Ö Ø» ÓÖÑ» Ó Ý» ØÑÐ CHAPTER 3. PUBLICATION SUR INTERNET ÛÛÛº ÐÐ ØÑÐºÓÑ ÛÛÛºÓÑÑ ÒØ Ñ Ö ºÒ Ø» ØÑÐ» ÒØÖÓº ØÑ Figure 3.1: Page Principale Liens utiles 3.2 Edition d un site en WYSIWYG Prise en main de NVU NVU (prononcé N-view) est un logiciel de conception de pages HTML de type WYSIWYG (What You See Is What You Get), c est à dire que lorsque vous construisez votre document, vous le voyez exactement comme il sera vu au final. Ainsi vous pouvez créer un document HTML sans pour autant avoir à connaître le HTML. Au lancement du logiciel, vous obtenez la fenêtre suivante : Nvu s ouvre directement avec une page vierge. Avant de commencer quoi que ce soit, commençons par expliquer cette fenêtre pour pouvoir l utiliser. Tout en haut, nous trouvons les options concernant les objets, sur la gauche, le gestionnaire de site et sur la droite la fenêtre principale. Via la fenêtre principale, on peut naviguer sur notre page selon quatre onglets, un onglet "Normal" qui permet de structurer notre page, un onglet "Balises HTML" pour visualiser les balises crées, un onglet "<HTML> Source" pour visualiser le source de notre page et un onglet "Aperçu". Pour insérer des objets, à notre page, il suffit de cliquer sur l objet désiré, de remplir toute les caractéristiques le concernant et de le disposer sur notre page Les Objets Le Texte L ajout de texte à un document HTML est très simple, il suffit de sélectionner la fenêtre principale et de saisir au clavier le message à afficher. Le texte peut être formaté, c est-à-dire avoir une font, une taille et un style bien spécifique. Les options de format sont accessibles depuis la barre d outils. 7

8 Figure 3.2: Page Principale Figure 3.3: Onglet Edition Figure 3.4: Barre d outils pour le texte 8

9 Les images Avec NVU il est très facile d insérer une image au sein d une page. Pour cela il suffit de cliquer sur l icône "Image" et une boite de dialogue apparaît. Figure 3.5: Propriétés pour une image Emplacement de l image indique où se trouve le fichier contenant l image, le bouton parcourir permet de choisir l image via une interface. L option L URL est relative à l emplacement de la page indique que le chemin d accès est relatif au lieu d être absolu. Cette option est très importante et elle doit être cochée pour que l image soit visible en ligne. Dans le cas contraire, l image sera cherchée sur le disque local de l utilisateur et il y a peu de chance qu elle y soit présente. Vignette donne le message à afficher lorsque la souris est au-dessus de l image. Texte alternatif donne le message à écrire dans le cas où l image ne pourrait pas être affichée. Ce champ est très utile car pour des personnes aveugles qui utiliseraient un terminal braille, elles pourraient avoir un descriptif de l image. L onglet Dimensions permet de changer la taille de l image lors de l affichage (i.e. le fichier original n est pas modifié). Apparence offre des options pour modifier des paramètres d affichage. Enfin Lien permet de définir l image comme étant un lien hypertexte. Les liens hypertextes et les ancres L une des forces du Web est l utilisation des liens hypertexte (ou hyperlien). Un lien est un objet qui si l on clique dessus permet d accéder à une autre section de la page en cours ou même une page Internet totalement extérieure. Les ancres définissent un point d entée dans un document HTML. Par exemple si votre page contient plusieurs section, vous pouvez définir une ancre pour chaque section et ainsi construire une table des matières qui vous permettra d aller directement vers n importe quelle section. Pour ajouter un lien hypertexte, il suffit de cliquer sur l icône "Lien" et la boite de dialogue suivante s ouvre : Le premier champ à remplir correspond au texte qui sera visible sur le document. Le second indique la page HTML vers laquelle le lien pointe, c est aussi dans ce champ qu on spécifie vers quelle ancre. Si l ancre n est pas précisée, le lien pointe le début du document. Si des ancres sont définies dans le document courant, on peut en choisir une on faisant défiler la liste (bouton symbolisant la flèche vers le bas). Pour indiquer l ancre concernée si le lien pointe vers un autre document, il faut rajouter " #nom de l ancre " à la fin du champ. La définition d une ancre se fait via l icône "Ancre". Il suffit ensuite de donner un nom à l ancre, l ancre est insérée au niveau de la position du curseur. NB : Il est possible de définir une image comme étant un lien hypertexte. 9

10 Figure 3.6: Propriétés pour un Lien Les Tableaux Les tableaux sont des objets très utiles qui permettent aux utilisateurs d organiser leurs données dans des structures tabulaires complexes. Les tableaux peuvent contenir des listes, des paragraphes, des formulaires, des images, du texte préformaté ou d autres tableaux. L insertion d un tableau se fait grâce à l icône "Tableau". Figure 3.7: Propriétés pour un Tableau Il suffit ensuite de choisir le nombre de lignes et de colonnes qui composeront notre tableau puis de valider. Le tableau est inséré, il ne reste plus qu à remplir les cellules. Il est possible de faire fusionner les cellules entre elles. Pour cela, cliquer sur les cellules à fusionner en gardant la touche ctrl enfoncé, puis faites un clique droit et choisissez " Fusionner les cellules sélectionnées ". Pour accéder aux propriétés d une cellule, faites un clique droit sur la cellule en question, puis " Propriétés cellule ". Les propriétés permettent de changer la taille des cellules ainsi que l alignement des objets à l intérieur. 3.3 Publication d un site La publication d un site se fait via le protocole FTP "File Transfer Protocol" (protocole de transfert de fichiers). Le FTP est dédié à l échange informatique de fichiers sur Internet. Il permet, depuis un ordinateur, de copier des fichiers depuis ou vers un autre ordinateur du réseau, d administrer un site web, ou encore de 10

11 supprimer ou modifier des fichiers sur cet ordinateur. Il existe différente manière de transférer un site Web. Nous allons en voir deux en particulier : celui intégré au logiciel NVU et FileZilla Utilisation de NVU Le transfert vers le serveur est facilité puisque NVU intègre son propre module de FTP, ce qui évite de recourir à un autre logiciel. Le transfert d un page web se fait grâce à l icône "Publier". Il suffut juste de connaître son nom d utilisateur, son mot de passe et son serveur de publication. Figure 3.8: Boîte de Dialogue pour le transfert FTP 11

12 3.3.2 Utilisation de FileZilla La fenêtre principale de FileZilla se présente sous la forme suivante : Figure 3.9: Page Principale de FileZilla Dans cette fenêtre on y trouve une barre de connexion rapide (partie haute de la fenêtre principale), le site local, (partie gauche), le site distant (partie droite) et La File d Attente de Transfert (partie basse). La Barre de Connexion Rapide vous permet de vous connecter rapidement aux sites FTP sans avoir à créer un profile de site pour cela il suffit de connaître tous les paramètres adéquats. Le site Local correspond au dossier actuel de votre machine dans l arborescence correspondante. Le site Distant affiche tous les fichiers accessibles du répertoire actuel sur le serveur FTP auquel vous êtes connecté. Notez la présence du dossier ".." dans tous les cadres. Ce dossier vous permet de remonter au dossier parent du répertoire actuel. En haut se trouve un menu déroulant du dossier actuel. La File d Attente de Transfert affiche l état de tout les fichiers entrant/sortant de/vers le serveur FTP. Cette liste peut être affiché/cachée à l aide du bouton de la barre d outils. Ce qui suit vous donne un aperçu rapide sur la façon d utiliser FileZilla. Par défaut, vous n avez pas à configurer FileZilla, et vous pouvez donc commencer à travailler directement avec le programme. Pour publier une page, il faudra suivre les étapes suivantes : 1. Connexion à un serveur FTP 2. Parcourir le serveur 3. Parcourir votre machine 4. Transférer les fichiers Connexion à un serveur FTP Pour vous connecter à un serveur FTP, entrez l adresse du serveur dans la champ de texte Adresse de la barre de Connexion Rapide. Entrez le port du serveur dans la champ Port, 21 pour FTP. Si les Nom d utilisateur/ Mot de passe sont requis, entrez les dans le champ approprié. Cliquez sur Connexion rapide ou appuyez sur Enter pour vous connecter au serveur. 12

13 Figure 3.10: Barre de Connexion Rapide Parcourir le serveur Après une tentative de connexion réussie, une liste des fichiers et dossiers apparaît dans le cadre de droite de la fenêtre principale. Vous pouvez changer de dossier actuel en double-cliquant sur un dossier ou en entrant le nom du dossier dans le champ et en appuyant sur Enter. Vous pouvez aussi faire un clic droit sur un dossier de la liste et sélectionner Ouvrir dans le menu contextuel pour changer de dossier actuel. Vous remarquerez un dossier ".." affiché dans tous les cadres de répertoires. Ce dossier vous permet de remonter au dossier parent du dossier actuel. Le but ici est de choisir le bon dossier de dépôt. Parcourir votre machine Parcourir votre machine se fait de la même façon que pour le serveur. Il n y a qu une seule différence: les dossiers de votre machine sont agencés sous forme d une arborescence pour un parcours plus rapide. Pour changer le dossier actuel, aussi bien sur votre machine que sur le serveur, sélectionnez simplement un élément dans l arborescence appropriés. Transférer les fichiers Vous pouvez envoyer sur le serveur ou recevoir un fichier en double-cliquant dessus. Il sera ajouté à la File d Attente de Transferts et le transfert démarrera automatiquement. Pour transférer des dossiers et/ou des fichiers multiples, sélectionnez les et faites un clic droit sur la sélection. Vous pourrez alors cliquez sur Charger sur le Serveur. Vous pouvez aussi faire glisser les fichiers d un cadre et les déposer dans l autre. Pour ajouter des fichiers à la file d attente pour qu ils soient transférés ultérieurement, sélectionnez les et cliquez sur Ajouter à la File d Attente à partir du menu déroulant. Vous pouvez aussi faire glisser ces fichiers directement dans le cadre de la file d attente. Cliquez sur le bouton de la barre d outils pour lancer le transfert "Traiter la File d Attente" représenter par une flêche et le sigle "FA". 13