Mise en ligne : Filezilla WEB01

Cette exercice porte sur la mise en ligne de fichiers avec le logiciel Filezilla. Il s’agit d’effectuer des manipulations de fichiers et d’observer le résultat en ligne.

Consignes de l’exercice

Créez un dossier pour stocker votre site sur le bureau (ou dans l’espace Documents) de votre ordinateur. Ce dossier sera le dossier racine local de votre site.

Dans le dossier racine local, créez une page HTML avec la structure suivante :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Titre de la page</title>
	</head>
	<body>

	</body>
</html>

Enregistrez la page HTML sous le nom mise_en_ligne_exo1.html en prenant soin de bien placer votre fichier dans le dossier racine local.

Complétez la page HTML mise_en_ligne_exo1.html avec le contenu suivant :

  • Un titre de niveau 1
  • Un paragraphe

Ouvrez la page mise_en_ligne_exo1.html dans un navigateur en local.

Afficher la solution

Solution :

Ouvrez votre dossier racine local et double-cliquez sur le fichier mise_en_ligne_exo1.html pour l’ouvrir dans votre navigateur.

Observez attentivement le contenu du champ adresse de votre navigateur. Que remarquez-vous ? Consultez ensuite les explications ci-dessous.

Afficher la solution

Solution :

  • L’adresse ne commence pas par le protocole http:// ou https://. Sur la plupart des navigateurs l’adresse commence par le protocole file:/// ce qui est normal puisque votre page n’est pas en ligne mais en local sur votre ordinateur. Si l’adresse n’affiche ni l’un ni l’autre, l’adresse doit vraisemblablement commencer par une lettre (qui peut changer), par exemple C:\ correspondant à un disque dur ou F:\ à une clé USB.
  • L’adresse est composée du chemin d’accès complet au fichier sur votre propre machine. Ce chemin d’accès sera donc probablement différent sur un autre ordinateur.
  • Le nom du fichier est indiqué explicitement tout à la fin de l’adresse.

À l’aide du client FTP Filezilla, mettez en ligne la page mise_en_ligne_exo1.html :

  1. Connectez-vous à votre espace d’hébergement ;
  2. Naviguez dans le dossier permettant de publier du contenu (généralement www ou public) de votre espace distant ;
  3. Déposez le fichier.

Avec votre navigateur, consultez la version en ligne de la page mise_en_ligne_exo1.html.

Afficher la solution

Solution :

Pour consulter votre page web en ligne, vous devez saisir manuellement l’adresse de votre page web dans le champ de votre navigateur réservé à cet effet.

Par exemple : http://jcrego.alwaysdata.net/mise_en_ligne_exo1.html

Observez attentivement le contenu du champ adresse de votre navigateur. Quelles sont les différences et les points communs entre l’adresse de la question 8 et celle de la question 6 ?

Afficher la solution

Solution :

  • La seconde adresse commence généralement par le protocole http:// il s’agit donc bien d’une adresse Internet classique (ou distante). Sur certains navigateurs, le protocole http:// est masqué par défaut. Pour vous en assurer, vous pouvez le rajouter manuellement et valider avec la touche Entrée, la page devrait se recharger et le protocole sera masqué à nouveau.
  • L’adresse est composée du nom de domaine du serveur (ex : alwaysdata.net).
  • Comme pour un fichier local, le nom du fichier est indiqué explicitement tout à la fin de l’adresse.

Modifiez la page mise_en_ligne_exo1.html pour y ajouter un paragraphe contenant le texte de votre choix.

Remplacez la page en ligne par la nouvelle que vous venez de modifier et consultez vos modifications en ligne.

Affichez le contenu de votre dossier racine local. Est-ce que les extensions de fichiers sont visibles ? Consultez l’explication ci-dessous.

Afficher les explications

Extensions de fichier :

L’extension d’un fichier est l’indication à la fin du nom d’un fichier permettant d’indiquer à quel type de fichier nous avons affaire. Les pages web doivent normalement se terminer par l’extension de fichier .html. Il est indispensable de voir les extensions de fichiers lorsque vous construisez un site web. Vous devez systématiquement connaître l’extension exacte de vos fichiers afin d’être en mesure, par exemple, de distinguer les fichiers avec l’extension .jpeg ou .jpg qui sont toutes les deux valides ou encore .html et .htm.

Par défaut, les extensions de fichiers sont masquées sur Windows et Mac Os X. Ce qui peut évidemment nous poser problème…

Seulement si les extensions de fichiers n’étaient pas visibles à la question précédente, paramétrez votre système d’exploitation pour affichez les extensions de fichiers (.jpg, .png par exemple) .

Afficher la procédure à suivre

Procédure à suivre :

– Windows 7, Windows Vista :

  1. Ouvrez une fenêtre de l’explorateur de fichiers (ouvrez n’importe quel dossier ou fenêtre de Windows).
  2. Cliquez sur l’onglet Organiser.
  3. Sélectionnez Options des dossiers et de recherche.
  4. Cliquez sur l’onglet Affichage.
  5. Décochez la case Masquer les extensions des fichiers dont le type est connu.

– Windows 10 :

  1. Ouvrez une fenêtre de l’explorateur de fichiers (ouvrez n’importe quel dossier ou fenêtre de Windows).
  2. Ouvrez l’onglet Affichage.
  3. Cliquez sur Options.
  4. Dans la boite de dialogue qui s’affiche, ouvrez l’onglet Affichage.
  5. Dans la liste Paramètres avancés, décochez la case Masquer les extensions des fichiers dont le type est connu.
  6. Validez par OK.

– Mac Os X :

  1. Allez dans le Finder (cliquez sur le bureau).
  2. Affichez les préférences, Menu Finder / Préférences.
  3. Ouvrez l’onglet Options avancées.
  4. Cochez la case Afficher toutes les extensions de fichiers.

Récupérez une image de paysage sur Internet avec les critères suivants :

  • Image réutilisable et modifiable / Licence domaine public ou CC0.
  • Largeur de l’image supérieure à 3 000 px voire plus si possible.
Afficher la solution

Solution :

Deux manières de faire :

  1. Paramétrez les critères de recherche de Google Image ;
  2. Utilisez un site d’image libre de droit et gratuit comme http://pixabay.com. Le téléchargement d’image de grande taille nécessite un compte.

Nommez l’image mise_en_ligne_img_01 en respectant l’extension de fichier originale.

Attention !
Prenez de bonnes habitudes et ne mettez jamais d’accents, de caractères spéciaux, de majuscules ou d’espaces dans les noms de vos fichiers.

Insérez l’image dans la page mise_en_ligne_exo1.html et testez votre page en local pour vérifier que cela fonctionne bien… L’image devrait être beaucoup trop grande pour s’afficher correctement.

L’image étant trop grande, redimensionnez-la en ajoutant la propriété suivante dans l’image style="width: 400px;".

Afficher un indice

Indice :

src et style sont deux attributs possibles pour la balise <img>. Ils doivent tous les deux se mettre à l’intérieur de la balise séparés par une espace.

Afficher la solution HTML

Solution HTML :

<img src="mise_en_ligne_img_01.jpg" style="width: 400px;">

Testez votre page en local, l’image doit bien s’afficher et avoir cette fois-ci une dimension raisonnable.

Mettez à jour la page mise_en_ligne_exo1.html sur le serveur et consultez-la en ligne. L’image doit s’afficher.

Afficher un indice

Indice :

L’image ne s’affiche pas ? Vous avez bien replacé le fichier mise_en_ligne_exo1.html sur le serveur ? Ne devriez-vous pas placer autre chose sur le serveur ?

Afficher la solution

Solution :

Si votre image s’affichait bien en local mais qu’elle ne s’affiche plus sur la page distante, c’est que vous avez très probablement oublier de placer l’image sur le serveur…

Directement sur le serveur, créez un nouveau dossier images dans votre dossier racine distant et déplacez-y l’image mise_en_ligne_img_01.

Quelques précisions importantes :
Le dossier racine distant est l’équivalent sur le serveur du dossier racine présent sur votre ordinateur. Il contient donc tous les fichiers de votre site et est qualifié de distant car accessible via Internet. Celui qui est présent sur votre ordinateur sera quant à lui qualifié de dossier racine local. Pour que tout fonctionne correctement, s’il peuvent avoir un nom différent (par exemple : dossier_racine (pour le local) et www (pour le distant), leur contenus doivent être parfaitement identiques.

Testez votre page en ligne, l’image ne doit plus s’afficher.

Dans votre dossier racine local, effectuez les modifications nécessaires afin de réglez le problème avec l’image et replacez la page html corrigée sur le serveur.

Afficher la solution

Solution :

  1. La première chose à faire et d’effectuer dans votre dossier racine local les mêmes modifications que dans votre dossier racine distant.
  2. Vous devez ensuite corriger le chemin d’accès à l’image dans votre page html.

Consultez la page en ligne. L’image doit s’afficher.

Videz le cache de votre navigateur.

Informations sur le cache :
Le cache d’un navigateur est un dossier qui stocke tous les fichiers que le navigateur télécharge lorsqu’il affiche une page web. Il est utile pour accélérer l’affichage des pages que vous consultez régulièrement.
Si vous consultez la même page web deux fois dans la même journée, votre navigateur ne téléchargera les images qu’une seule fois et récupérera celles qu’il a enregistré dans son cache lors de la première visite. La page se chargera ainsi plus rapidement.

Afficher la solution

Solution :

Solution pour vider le cache de firefox

Actualisez votre page dans le navigateur et observez le délai d’affichage de l’image.

Avez-vous remarqué un délai pour afficher l’image ?

Modifiez la page mise_en_ligne_exo1.html pour y afficher 5 fois la même image.

Mettez votre page mise_en_ligne_exo1.html à jour sur le serveur et consultez-la en ligne.

Videz à nouveau le cache de votre navigateur.

Actualisez votre page dans le navigateur et observez le délai d’affichage des images. Voyez-vous une différence par rapport à la question 25 ?

Afficher la solution

Solution :

Pour afficher une image, votre navigateur doit commencer par la télécharger. En fonction de votre vitesse de connexion à Internet et du poids de l’image, celle-ci mettra donc plus ou moins de temps à être téléchargée.

Vous avez du remarqué que si vous affichez 5 fois la même image, le fichier n’est téléchargé qu’une seul fois donc les 5 images s’afficheront en même temps.

Dans le champ adresse du navigateur, supprimez le nom du fichier à la fin de l’adresse et validez.

  1. Si vous obtenez une erreur, c’est plutôt une bonne nouvelle, cela signifie que la liste des fichiers n’est pas visible par défaut, mais vous allez devoir traiter la question suivante…
  2. Si vous n’avez pas d’erreur et que la liste des fichiers présents dans votre dossier racine distant s’affiche alors vous pouvez sauter la question suivante.

Facultatif en fonction de la question précédente. Nous allons faire une petite manipulation pour changer un paramètre du serveur, suivez scrupuleusement les consignes suivantes :

  1. Avec votre éditeur (brackets, notepad++), créez un nouveau fichier dans votre dossier racine local et nommez-le htaccess (sans extension de nom de fichier).
  2. Modifier le fichier en question pour lui ajouter EXACTEMENT le texte suivant : Options +Indexes. ATTENTION à ne pas ajouter d’espaces en trop !
  3. Enregistrez le fichier.
  4. Déposez le fichier sur le serveur dans votre dossier racine distant.
  5. Sur le serveur, renommez le fichier pour lui donner EXACTEMENT le nom suivant .htaccess (il suffit d’ajouter un point au début du nom du fichier).
  6. Vous devriez maintenant être en mesure de consulter la liste des fichiers de votre site.
  7. Si vous obtenez une erreur 500 Internal Server Error, c’est que vous avez probablement fait une erreur dans le contenu du fichier.
Afficher l’explication vidéo

Explication :

Renommez la page mise_en_ligne_exo1.html en index.html.

Mettez en ligne et consultez la page index.html.

Essayez de consulter la liste des fichiers dans votre navigateur…

Afficher l’explication

Explication :

La page index.html est toujours chargée par défaut lorsque aucune page n’est indiquée explicitement dans l’adresse URL. Quelque soit les paramètres du serveur il n’est donc plus possible de consulter la liste des fichiers du dossier.

La page d’accueil d’un site web va donc toujours s’appeler index.html (ou index.php).

Supprimez la page index.html du serveur.

Déconnectez Filezilla du serveur.

Questions facultatives…

Vous pouvez vous aider de l’article suivant pour traiter les questions suivantes Utiliser les options avancées de Filezilla.

Via le Gestionnaire de sites, enregistrez l’accès au serveur dans Filezilla. Vous devez paramétrer l’accès au serveur avec :

  • Le dossier racine de votre site comme dossier local par défaut.
  • Le dossier de votre site sur le serveur comme dossier distant par défaut.
  • Dans les options avancées, cochez la case Comparaison de dossier.

Grâce au Gestionnaire de sites connectez-vous au serveur. Si votre paramétrage est correct, vous devez avoir le dossier de votre site local à gauche et le dossier de votre site distant à droite.

Personnalisez Filezilla pour définir Notepad++ comme logiciel d’édition par défaut.

Dans la partie Site local (à gauche) de Filezilla, faites un clique droit puis choisissez l’option Afficher / Éditer sur le fichier index.html.

Modifiez le fichier pour y ajouter un paragraphe.

Basculez sur Filezilla et mettez en ligne votre fichier modifié.

Attention
Si vous éditez un fichier dans la partie de droite, la partie site distant, Filezilla vous demandera de remplacer le fichier sur le serveur. Vous pouvez donc modifier un fichier plus rapidement, mais de cette manière, vous ne gardez aucune trace de la modification de fichier sur votre ordinateur. En cas de mauvaise manipulation, vous perdez tout !

Supprimez votre site du gestionnaire de site de Filezilla.

Sauf mention contraire*, l'article Mise en ligne : Filezilla [WEB01] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.