Manipuler le code source
avec l'éditeur Brackets

Ce cours va vous permettre de vous familiariser avec la structure d'un site Web et le code source d'une page HTML. Concrètement, vous allez manipuler le code source d'un site simple, de telle sorte que vous puissiez commencer à vous familiariser avec le langage HTML et l'éditeur de code Brackets.

Voir le site "pangrammes"

Télécharger les éléments à manipuler

Le dossier du site "pangrammes" est mis à votre disposition. Téléchargez le dossier du site et décompressez l'archive zippée (utilisez WinRar sur PC). Placez le dossier "pangrammes" sur le bureau de votre poste de travail puis ouvrez-le.

En double-cliquant sur le fichier "index.html", vous ouvrez cette page avec le navigateur par défaut de votre poste de travail. Examinez attentivement l'url affichée alors par votre navigateur. Vous consultez le site "pangrammes" en local et non sur le Web. Répondez à cette question : s'agit-il, en local et sur le Web, du même fichier index.html ?

Nous allons commencer par identifier les dossiers et fichiers contenus dans le dossier du site. Pour vous aider, des explications vous sont données sur graphizm.fr/greta/fcs/contenu-dossier-page-web.

Au fil de ce cours, des captures d'écrans commentées vous apportent les précisions dont vous avez besoin. Pour mieux examiner les captures d'écran, n'hésitez pas à les ouvrir dans un nouvel onglet ou une nouvelle fenêtre. Agrandissez les images si nécessaire.

Capture d'écran du code source affiché par le navigateur

Afficher le code source dans son navigateur

Pour voir le code source d'une page Web, allez dans le menu de votre navigateur, vous y verrez une option qui permet d'afficher le code source. Sous macOS, le raccourci cmd‑alt‑u permet d'obtenir cet affichage. Sous Windows, le raccourci est ctrl‑u.

Quand la création de sites Internet a commencé à se populariser, c'était un moyen très pratique pour voir comment étaient faites les pages Web. Les Web designers débutants copiaient sans scrupule les lignes de codes des experts du Web. Aujourd'hui encore de nombreuses personnes utilisent la fonction Afficher le code source pour apprendre à construire des pages Web.

Utiliser l'éditeur de code Brackets

Pour manipuler le code source d'une page HTML je vous recommande d'utiliser Brackets, un éditeur de code gratuit et simple à prendre en main. Pour en savoir plus sur cet outil, consultez l'article Personnaliser Brackets, sur graphizm.fr/greta

Capture d'écran du code source affiché dans Brackets

Ouvrir un dossier

Il est très utile de pouvoir accéder avec Brackets à tous les fichiers du site. Pour cela, choisissez le dossier du site "pangrammes" avec Brackets (Fichier > Ouvrir un dossier > Ouvrir) mais n'ouvrez pas le dossier dans la fenêtre de sélection !

Quand vous avez sélectionné "pangrammes" cliquez sur le bouton "Ouvrir", en bas à droite. Ne cliquez pas deux fois sur "pangrammes" sinon vous ne pourrez ouvrir que les fichiers ou les dossiers situés DANS le dossier "pangrammes" !

Identifier la structure HTML

Capture d'écran du code source affiché dans Brackets

➜ Vous allez observer la structure du site "pangrammes", en focalisant votre attention sur les principales balises HTML :

Les flèches grises, situées à proximité des numéros de ligne, vont vous aider à obtenir une vision simple de la structure. Actionnez-les pour simplifier l'affichage des lignes de code.

Il est inutile, dans un premier temps, d'essayer de comprendre à quoi servent chacune des lignes de code. Si je vous montre une page Web utilisant des scripts pour afficher une animation, cela rend la page un peu complexe. Il existe des pages plus simples mais, pour le moment, cela nous permet de repérer la manière dont les grandes "boîtes" HTML sont disposées et comment les fichiers sont reliés les uns aux autres.

Vous devez être capable de repérer dans le code source la manière dont s'articule les différentes parties schématisées ci-dessous.

Approfondir la question

Pour mieux appréhender la structure d'une page Web, voici une ressource en ligne à exploiter le moment venu :

D'une manière générale, affichez le code source des pages Web que vous consultez (en particulier celui des fiches que je vous transmets...). Repérez les principaux éléments HTML et entraînez-vous à lire l'essentiel du code sans vous perdre dans les détails.