Composer vos trois pages HTML

Composer vos trois pages HTML

Vous devez créer trois pages à la main en code HTML et les publier dans un dossier nommé « pfi » sur votre serveur web, en utilisant le Gestionnaire de fichiers.

Vous avez appris durant le cours comment créer des pages HTML à la main à l’aide d’un éditeur de texte comme Notepad++, puis à les téléverser sur un serveur web à l’aide du gestionnaire de fichiers. Vous avez aussi appris à créer et à modifier des pages directement sur le serveur web avec l’éditeur en ligne du gestionnaire de fichiers.

Dans le cadre de votre PFI, vous devez créer trois pages HTML à la main. Vous pouvez le faire soit en utilisant Notepad++, puis en les téléversant sur le serveur, ou vous pouvez les créer directement dans le gestionnaire de fichiers. Voici un rappel des deux méthodes.

Créer les pages avec Notepad++

  1. lancez Notepad++ et enregistrez votre première page sous le nom index.html;
  2. copiez le modèle de page présenté dans les notes de cours et collez-le dans votre document;
  3. suivez les consignes de la PFI pour créer votre contenu;
  4. utilisez les balises HTML que nous avons vues dans le cours;
  5. inspirez-vous de quelques pens tagués « HTML » sur CodePen.io au besoin;
  6. testez votre site en ouvrant votre document index.html dans Firefox ou Chrome;
  7. utiliser le raccourci clavier Ctrl+U pour vérifier s’il y a des erreurs (lignes rouges);
  8. créez vos deux autres pages en les nommant par un seul mot avec l’extention .html;
  9. assurez-vous de tester les liens de votre menu entre les trois pages;
  10. assurez-vous de bien lier vos pages à votre fichier CSS à l’aide de la balise <link rel= »stylesheet » href= »styles.css »> dans l’entête de vos trois pages.

Téléverser vos pages sur votre serveur

Une fois que vous aurez terminé vos trois pages et que vous les aurez bien testées, suivez la procédure suivante pour les téléverser sur votre serveur web :

  1. connectez-vous au cPanel de votre serveur web (billet remis en classe);
  2. cliquez sur Gestionnaire de fichier;
  3. à gauche dans votre liste de dossiers, cliquez sur public_html;
  4. en haut à gauche du menu, cliquez sur +Dossier;
  5. nommez votre dossier pfi, conformément aux consignes de la pfi;
  6. double-cliquez sur le dossier pfi pour y accéder;
  7. dans le menu, cliquez sur Charger;
  8. glissez et déposez vos trois pages HTML et votre fichier CSS dans la zone à cet effet ou cliquez sur Sélectionner un fichier pour les sélectionner un à la fois;
  9. testez vos trois pages en accédant à l’adresse utilisateur.pourleweb.ca/pfi;
  10. assurez-vous que les trois fichiers sont liés entre eux et qu’ils contiennent un lien vers votre site WordPress, situé à la racine de votre site (utilisateur.pourleweb.ca).

Créer les pages directement sur le serveur web

Pour créer vos pages directement sur le serveur web, suivez les étapes suivantes :

  1. connectez-vous au cPanel de votre serveur web (billet remis en classe);
  2. cliquez sur Gestionnaire de fichier;
  3. à gauche dans votre liste de dossiers,
  4. cliquez sur public_html;en haut à gauche du menu, cliquez sur +Dossier;
  5. nommez votre dossier pfi, conformément aux consignes de la pfi;
  6. double-cliquez sur le dossier pfi pour y accéder;dans le menu, cliquez sur +Fichier;
  7. nommez votre premier fichier index.html et cliquez sur Create New File;
  8. cliquez sur le nouveau fichier index.html, puis sur Modifier;
  9. cliquez sur Edit dans la boite de dialogue qui apparait;
  10. copiez le modèle de page présenté dans les notes de cours et collez-le dans votre document;
  11. suivez les consignes de la PFI pour créer votre contenu;
  12. utilisez les balises HTML que nous avons vues dans le cours;
  13. inspirez-vous de quelques pens tagués « HTML » sur CodePen.io au besoin;
  14. testez votre site en ouvrant votre site à l’adresse utilisateur.pourleweb.ca/pfi dans Firefox ou Chrome;
  15. utiliser le raccourci clavier Ctrl+U pour vérifier s’il y a des erreurs (lignes rouges);
  16. créez vos deux autres pages en les nommant par un seul mot avec l’extention .html;
  17. assurez-vous de tester les liens de votre menu entre les trois pages;
  18. assurez-vous de bien lier vos pages à votre fichier CSS à l’aide de la balise <link rel= »stylesheet » href= »styles.css »> dans l’entête de vos trois pages.
  19. assurez-vous que les trois fichiers sont liés entre eux et qu’ils contiennent un lien vers votre site WordPress, situé à la racine de votre site (utilisateur.pourleweb.ca);
  20. fermez les onglets contenant l’éditeur de fichier.

Des questions?

Utilisez la boite de commentaires ci-dessous pour m’en faire part. Il me fera plaisir de vous répondre et de clarifier les procédures en cas de besoin!

Laisser un commentaire