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 le site codyhouse.co, a une époque où de tels modules étaient téléchargeables librement. On y trouvait plein de gabarits à personnaliser.
➜ 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 de votre choix,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 », elles sont visibles en pied de page après avoir accédé au texte sur la couleur bleue.
Dans ce cours vous allez apprendre à identifier les composantes d’un site Web statique.
Identifier le fichier index.html
Tous les sites Web ont une page d’accueil. Cette page est généralement nommée index.html. On désigne généralement un fichier enregistré au format HTML sous le nom de page HTML ou page Web.
Une page Web est donc un document enregistré au format HTML dans lequel des informations de plusieurs types sont codées. On trouve ainsi dans une page HTML des informations se rapportant directement ou indirectement aux fichiers suivants :
la ou les feuille(s) de style associées
la ou les images insérée(s)
le ou les script(s) utilisé(s)
La ou Les feuilles de style se rapportent au codage de l’apparence d’un site. Le ou les scripts se rapportent au codage de l’animation des composants d’un site.
Chacun de ces fichier n’est pas obligatoirement associé à une page Web mais la plupart des pages publiées en intègrent un ou plusieurs (notamment les 2 premiers).
Repérer le contenu d’un dossier de site
Pour organiser l’édition et la publication des pages Web, on place de préférence ces fichiers dans des dossiers nommés de façon explicite. On utilise le plus souvent les dossiers suivants :
un dossier nommé css (ou styles) pour y placer les feuilles de style au format .css
un dossier nommé img (ou images) pour y placer les images aux formats .jpg, .png ou .gif
un dossier nommé js (ou scripts) pour y placer les scripts au format .js
Tous ces dossiers sont ensuite placés dans un dossier qu’on nomme communément dossier du site (pour le désigner entre designers et développeurs). Ce dossier porte toutefois un nom (informatiquement) et ce nom est utilisé dans l’URL du site en question.
Ce sont les noms de ces dossiers de site que vous retrouvez au bout des URL, lors de vos navigations.
Par exemple, le documents que vous allez ouvrir dans un instant est accessible à cette adresse : http://graphizm.fr/contenu-dossier-page-web/
Quel est le nom du dossier dans lequel ce document se trouve placé ?
Quel est le nom du fichier html que lit votre navigateur pour vous permettre de prendre connaissance du contenu du document ?
➜ Manipulez le document ci-dessous pour découvrir plus de détails au sujet du contenu d’un site Web.
Si d’autres ressources doivent être associées à une page Web, il est possible de créer d’autres dossiers pour les classer convenablement. Il est ainsi possible d’utiliser un dossier fonts ou fontes pour y placer des polices de caractères.
➜Affichez le code source du document ci-dessus et répondez aux questions suivantes :
Quel est le nom du dossier dans lequel se trouve le fichier intitulé style.css?
Quel est le numéro de la ligne où se trouve l’indicationde la réponse à la question précédente ?
Quel est le nom du dossier dans lequel se trouve le fichier intitulé index.js?
Quel est le numéro de la ligne où se trouve l’indicationde la réponse à la question précédente ?
Le type de page Web dont il est question ici est nommée page Web “statique” et le site qu’elle présente est nommé ”site statique”.
Cela ne signifie pas que le contenu de la page ne bouge pas. Ils s’agit d’une page HTML dont le contenu ne varie pas en fonction de la demande de l’utilisateur. On oppose les pages statiques aux pages dynamiques.
Faites une recherche sur le Web en utilisant la requête suivante : page web statique vs page web dynamique. Cela vous amènera très probablement à éclaircir plusieurs autres concepts en rapport avec la publication Web.
Manipuler le code source
Pour examiner le contenu d’un dossier de site Web, téléchargez le fichier pangrammes.zip, décompressez-le et examinez son contenu.
Comment organiser ses fichiers sur apprendre-html-et-css.com . Les nombreuses fautes d’orthographe présentes sur les pages de ce site nous montrent l’importance d’une relecture des textes avant publication…
Cliquez sur le signe (+) pour agrandir l’image.
Analysez attentivement le code présenté ci-dessous. L’affirmation qui suit est-elle exacte ?
Gérer le consentement
Pour offrir les meilleures expériences, nous utilisons des technologies telles que les cookies pour stocker et/ou accéder aux informations des appareils. Le fait de consentir à ces technologies nous permettra de traiter des données telles que le comportement de navigation ou les ID uniques sur ce site. Le fait de ne pas consentir ou de retirer son consentement peut avoir un effet négatif sur certaines caractéristiques et fonctions.
Fonctionnel
Toujours activé
L’accès ou le stockage technique est strictement nécessaire dans la finalité d’intérêt légitime de permettre l’utilisation d’un service spécifique explicitement demandé par l’abonné ou l’utilisateur, ou dans le seul but d’effectuer la transmission d’une communication sur un réseau de communications électroniques.
Préférences
L’accès ou le stockage technique est nécessaire dans la finalité d’intérêt légitime de stocker des préférences qui ne sont pas demandées par l’abonné ou l’internaute.
Statistiques
Le stockage ou l’accès technique qui est utilisé exclusivement à des fins statistiques.Le stockage ou l’accès technique qui est utilisé exclusivement dans des finalités statistiques anonymes. En l’absence d’une assignation à comparaître, d’une conformité volontaire de la part de votre fournisseur d’accès à internet ou d’enregistrements supplémentaires provenant d’une tierce partie, les informations stockées ou extraites à cette seule fin ne peuvent généralement pas être utilisées pour vous identifier.
Marketing
L’accès ou le stockage technique est nécessaire pour créer des profils d’internautes afin d’envoyer des publicités, ou pour suivre l’utilisateur sur un site web ou sur plusieurs sites web ayant des finalités marketing similaires.
