Voici un petit TP pour manipuler le code source d’un site Web. Vous allez personnaliser une page HTML qui fonctionne comme la page index.html du site “Pangrammes” étudiée brièvement sur graphizm.fr/fcs/manipulation-code-source.
Le fonctionnement du site
Le type de site que vous allez manipuler est composée d’une seule page Web. En cliquant sur le bouton “EN SAVOIR PLUS”, on ouvre ce qui s’appelle une fenêtre modale. Il est possible de refermer cette fenêtre en cliquant sur la croix placée en haut à droite de la fenêtre modale. Vous avez certainement déjà rencontré ce type d’animation lors de vos navigations sur le Web.
Le modèle (ou template) de ce site a été téléchargé sur ce site : https://codyhouse.co/library . On y trouve plein de gabarits à personnaliser. Quand vous serez plus aguerris, vous pourrez utiliser ces ressources pour les personnaliser selon vos besoins 😉
Les consignes
Le modèle à personnaliser est visible à cette adresse : http://graphizm.fr/fcs/exercices-code-source/ma-couleur/.
➜ Pour réaliser l’exercice sans avoir à copier-coller le code de tous les fichiers qui composent le site « ma-couleur », je vous invite à télécharger le site complet sous la forme d’un fichier zippé.
➜ Avec l’éditeur de code Brackets, ouvrez le dossier « ma-couleur » (Fichier > Ouvrir un dossier > sélectionner le dossier > Ouvrir). Éditez le fichier « index.html » et prenez vos repères en vous rappelant ce que vous avez vu précédemment sur graphizm.fr/fcs/manipulation-code-source.
Des consignes plus détaillées vous sont données dans le fichier « index.html ». Vous pouvez les lire plus confortablement en activant l’aperçu en direct (le petit éclair en haut à droite de la fenêtre d’édition de Brackets).