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 un éditeur de code.
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 un cours dédié.
Au fil de ce cours-ci, les 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.
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, cette méthode était un moyen très pratique de 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 recommandais 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
Depuis le moment où ce cours a été rédigé, les choses ont changées. Brackets a été abandonné par son éditeur (Adobe). Le logiciel a été repris par une nouvelle équipe de développeurs et Brackets est devenu Phoenix Code, communément nommé Phoenix.
Les captures d'écran ci-dessous sont toujours celles effectuées avec Brackets.
Ouvrir un dossier
Il est très utile de pouvoir accéder avec Brackets/Phoenix à tous les fichiers du site. Pour cela, choisissez le dossier du site “pangrammes” avec Brackets/Phoenix (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
Vous allez observer la structure du site “pangrammes”, en focalisant votre attention sur les principales balises :
- <html> et </html>
- <head> et </head>
- <body> et </body>
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 :
- La structure d'une page HTML, sur graphizm.fr/greta
- Comment faire un site Web (à partir de zéro), sur w3schools.com
Affichez le code source des pages Web simples que je vous consultez (en particulier les documents HTML que je vous transmets comme par exemple le document que vous êtes en train de lire. Repérez les principaux éléments HTML.
Copiez le code depuis votre navigateur et collez-le dans un nouveau fichier édité avec Brackets/Phoenix 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 Shotzio pour annoter des captures d'écran. Vous pouvez me transmettre vos captures d'écran, accompagnées de vos remarques et questions.
Un exercice de mise en pratique
Vous trouverez sur graphizm.fr un petit TP, intitulé Ma couleur préférée, conçu pour manipuler le code source. Le site proposé fonctionne comme le site “pangrammes”. Les consignes sont placées sous le texte dédié à la couleur préférée.