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’indication de 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’indication de 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.
Des précisions vous sont apportées sur le contenu du fichier index.html sur graphizm.fr/fcs/manipulation-code-source
En savoir plus
- Gérer les fichiers d’un site Web sur developer.mozilla.org
- 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…