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 progressivement vous puissiez vous familiariser avec le langage HTML et l'éditeur de code Brackets.

Voir le site "pangrammes"

Préparation

Le dossier du site "pangrammes" est mis à votre disposition. Téléchargez le dossier du site et décompressez l'archive zippée. 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 ?

Cliquez et maintenez la pression pour afficher la réponse

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.

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" !

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 :

Les flèches grises, à proximité des numéros de ligne, vont vous aider à obtenir une vision simple de la structure.

Il est inutile, dans un premier temps, d'essayer de comprendre à quoi servent chacune des lignes de code. Je vous montre une page Web utilisant des scripts pour afficher une animation, elle est donc un peu complexe. Soyez rassurés, il existe des pages plus simples. Pour le moment, cela nous permet de repérer la manière dont les grandes "boîtes" HTML sont disposées dans le code source.

Étudiez la question

Pour mieux appréhender la structure d'une page Web, voici des ressources en ligne à exploiter :

Affichez le code source des pages Web que je vous invite à consulter (en particulier les fiches que je vous transmets ou le document que vous êtes en train de lire. Repérez les principaux éléments HTML.

Copiez le code depuis votre navigateur et coller-le dans un nouveau fichier édité avec Brackets que vous nommerez "index.html", dans un dossier que vous nommerez comme vous le souhaitez.

Observez, modifiez, faites des constats, des déductions, posez-vous des questions. Utilisez Skitch pour annoter des captures d'écran. Vous pouvez me transmettre ces captures d'écran, accompagnées de vos remarques et questions.

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

Une étude de cas

Pour aller encore plus loin, je vous invite à consulter le code source de la page intitulée Les Pignols'Arts. Vous allez examiner attentivement le code source et identifier la structure HTML de cette page. Vous reconnaîtrez sans peine les balises les plus fréquement utilisées. Des commentaires ont été placés au fil du code pour vous apporter des explications sur quelques procédés mis en œuvre dans le code.

Vous pouvez modifier avec Brackets le code des fichiers index.html et pignols.css, vous pourrez ainsi observer les changements visibles lors du rafraîchissement de la page dans votre navigateur. Pour cela, téléchargez les fichiers du site. Faites ensuite les changements désirés et sauvegardez vos modifications. Si vous souhaitez retrouver les fichiers originaux, téléchargez-les à nouveau !

Essayez d'imprimer cette page Web (cmd-P, dans Chrome) pour constater la présence des bordures sur fond blanc et un changement de style demandé pour l'affichage du mot PIGNOLS. Cela a été programmé à la fin de la feuille de style "pignols.css"

Capture d'écran de la page Web intitulée Les Pignols'Arts

Un exercice de mise en pratique

Vous trouverez sur graphizm.fr/greta/fcs un petit TP (quasi dirigé...) pour manipuler le code source.

Quand vous aurez terminé le petit TP proposé, pensez à transmettre votre travail à votre formateur. Transmettez le dossier complet, compressé au format .zip. Prenez soin de mentionner vos noms et prénoms dans le site à personnaliser (... il y a un endroit prévu pour cela). Pensez aussi à ajouter vos initiales au nom du dossier transmis ;-)