Embed Size (px)
Citation preview
Sylvain Fankhauser & Fanny Vaucher
<h1>Génies<br> du<br> code</h1>
Génies du code
Génies du code
Apprendre à programmeren créant un site webavec Python et Django
002
Sommaire Préface 005
Recommandations 006
Pictogrammes 007
Prologue 008
1. Installation des outils 017Installation d’Atom 019Installation d’un navigateur web 021Création d’un dossier de travail 022
Les logiciels open source 024
2. Introduction au HTML 025C’est quoi le HTML ? 026Syntaxe du HTML 027Structure d’une page web 031Et les métadonnées, alors ? 034Les normes HTML 036Les liens 036Des images 038Éléments de type bloc et en ligne 040Les formulaires 040Une page un peu plus complexe 042Tableau récapitulatif des éléments 045Et maintenant ? 047
3. Du style avec CSS 051La barre de développement 056L’héritage 058Les types de sélecteurs 062Mise en pratique des sélecteurs 065Le modèle de boîte 069Une page de question plus élégante 077Et sur les petits écrans ? 079Tableau de référence des propriétés 082Pour aller plus loin 084Et maintenant ? 084
003
4. Utiliser la ligne de commande 88Ouvrir un terminal 89Tes premières commandes 91Navigation en ligne de commande 92Récapitulatif des commandes 102Et maintenant ? 102
La diversité dans le monde de l’informatique 106
5. Introduction à Python 107Installation de Python 110Utiliser Python 111Premiers pas avec Python 113Les fonctions 117Les objets 118Les méthodes 119Les variables 121 Les valeurs booléennes 125Les listes 129Les dictionnaires 132Pour aller plus loin 136Et maintenant ? 136
6. Un programme interactif avec Python 140
Un quiz basique 141Les conditions 144Tes propres fonctions 146 Les boucles 154Les dictionnaires 159Les classes 164Pour aller plus loin 171Et maintenant ? 172
004
7. Comment fonctionne le Web 176Le protocole HTTP 179Déroulement d’un cycle requête-réponse 180HTTP est un protocole sans état 185
8. Un site dynamique avec Django 192Création d’un espace de travail pour ton projet 194Installation de Django 195Création de ton projet 196Création d’une application 199La page d’accueil 202La page de question 207Démarrage du quiz 227Enregistrement des réponses 228La page de résultats 233Pour aller plus loin 239Et maintenant ? 240
9. Déploiement de ton site 247Installation de Git 249Installation du client Heroku 251Création du dépôt Git 252Création de l’application Heroku 254Adaptation du code pour le déploiement 256Définition des variables d’environnement 259Ton premier déploiement 261Remonter à la source des erreurs 264Ajouter des questions 266Faire évoluer ton projet 268Pour aller plus loin 271Et maintenant ? 272
Épilogue 276
Lexique – Index 281
Remerciements – Impressum 289
005
PréfaceGénies du code est la concrétisation du désir à la fois de combler un vide, mais aussi de proposer une méthode novatrice, originale et indépendante, d’apprentissage des bases de la programmation web.
Savoir programmer est une compétence de plus en plus utile et de plus en plus demandée dans tous les domaines d’activité. Cet ouvrage se veut accessible à toute personne s’intéressant de près ou de loin à la programmation, que ce soit par curiosité, par intérêt, ou même pour poursuivre une carrière dans ce domaine.
La programmation de sites web, en plus d’avoir une utilité concrète quasi universelle, offre l’avantage de donner des résultats visuels im-médiats ainsi qu’un tour d’horizon de plusieurs langages et techno-logies. Cette méthode propose la réalisation d’un site web de A à Z, à travers la découverte du HTML en créant des premières pages sta-tiques, du CSS en ajoutant du style à ces pages, de la ligne de com-mande et de Python en créant plusieurs programmes, et finalement du Web, de Django et du processus de déploiement, pour mettre en ligne le site alors rendu dynamique.
Né du souhait commun d’un ingénieur et d’une dessinatrice de rendre le savoir accessible et de contribuer à l’accès à l’autonomie de chacun-e, Génies du code est la symbiose de deux langages qu’a priori tout oppose, celui de la ligne de code et celui de la ligne du dessin. Il en naît un univers narratif assez personnel, à la fois rigoureux et facétieux, qui tient à montrer que la programmation est un domaine passionnant et accessible à tout le monde.
Bonne découverte !
006
Recommandations• Assure-toi d’avoir plusieurs heures devant toi lorsque tu com-mences un chapitre. L’idéal est de faire un chapitre en une seule session ;
• Avant de commencer un chapitre, installe-toi devant ton ordi-nateur. Le contenu est interactif et il est important que tu essaies d’écrire tout le code présenté et que tu fasses les différents exercices ;
• Lis attentivement les instructions, prends ton temps et fais preuve du maximum de méticulosité lorsque tu écris du code : une virgule en trop, une majuscule qui devrait être une minuscule, ou un espace qui manque sont autant de détails qui peuvent faire dysfonctionner un programme ;
• Les explications concernant des programmes spécifiques, par exemple les emplacements des menus, des boutons et des raccourcis clavier peuvent changer suivant les versions. Il est possible que les indications ne correspondent pas toujours à 100% ;
• Fais des erreurs ! Les erreurs sont une composante indissociable de la programmation. C’est important que tu les comprennes et que tu saches trouver (soit sur Internet, soit par toi-même) comment les corriger ;
• Si tu rencontres des erreurs qui ne sont pas prévues, n’hésite pas à rechercher les messages d’erreur sur Internet, ça fait partie du mé-tier ! Le site stackoverflow.com en particulier est une référence en la matière ;
• Si certains termes te sont inconnus ou si tu ne te souviens plus de leur signification, réfère-toi au lexique à la fin du livre.
007
PictogrammesTout au long de ton périple, tu rencontreras les symboles suivants, qui donnent une indication sur des passages particuliers.
Astuce Informations qui ne sont pas indispensables à la compréhension mais qui peuvent t'aider.
Code incorrect Le code présenté n'est pas correct. Inutile de l'essayer !
Point de contrôle Une version de référence du code peut être téléchargée sur https://geniesducode.com/chapitres.
Attention Le passage nécessite une attention particulière. Suis bien les indications qui sont données.
00
017
1. Installation des outils
018
Le premier outil dans ta boîte à outils c’est un éditeur de texte brut, par opposition à un éditeur de texte riche comme Word. Le terme « riche » ici n’a rien à voir avec le prix de la licence, mais parce qu’il permet d’enri-chir le texte en modifiant son apparence : couleur et taille du texte, aligne-ment, espacement, etc. En ce qui concerne le code, il s’agit uniquement de contenu, et c’est pour cette raison que tu vas utiliser un éditeur de texte brut. Tu ne pourrais pas utiliser un éditeur de texte riche, comme Word, pour éditer du code, ce serait comme utiliser un arrosoir pour jouer « Stairway to Heaven » !
Ton système possède probablement déjà un éditeur de texte brut :
• Si tu es sur Mac tu devrais avoir TextEdit (qui fait à la fois de l’édition de texte brut et de texte riche) ;
• Si tu es sur Windows, tu devrais avoir le bloc-notes ;
• Si tu es sur Linux tu as probablement déjà Gedit.
On pourrait utiliser ces outils pour écrire du code mais il existe des édi-teurs de texte spécifiquement conçus pour le code et qui offrent plein de fonctionnalités très utiles.
019
Installation d’AtomIl existe plein d’éditeurs de code différents, qui ont chacun leurs points forts et leurs points faibles, et le choix d’un éditeur se fait en général suivant des préférences personnelles, mais aussi suivant le langage de programmation utilisé. Il existe des milliers de langages de program-mation, tels que PHP, Python, JavaScript, etc, chacun ayant ses spécificités. Par exemple PHP est principalement utilisé pour faire des sites web, alors que JavaScript est uti-lisé entre autres par les navigateurs pour ajouter de l'interactivité aux pages web. En ce qui nous concerne, on va se concentrer sur trois langages, très répandus, qui te per-mettront de faire un site web : HTML et CSS, incontournables dans n’importe quel site web, ainsi que Python, qui permet entre autres de réaliser des sites web, et qui est à la fois un excellent langage pour débuter, et un langage très répandu dans le milieu professionnel.
Je te propose de commencer avec l’éditeur Atom, qui est gratuit, open source (on reparlera plus tard de ce terme) et agréable à utiliser. Par la suite, quand je mentionnerai ton « éditeur de code » ou plus simplement « éditeur », il s’agira d’Atom.
Commence par te rendre sur https://atom.io/ et clique sur le bouton Download puis installe-le :
• Si tu es sur Mac : ouvre Finder, rends-toi dans le dossier Téléchargements et double-clique sur le fichier téléchargé pour l’extraire. Déplace ensuite l’icône Atom dans le menu Applications pour l’installer. Tu peux maintenant démarrer Atom depuis le menu Applications ;
• Si tu es sur Windows : ouvre l’explorateur de fichiers, rends-toi dans le dossier Télécharge-ments, fais un clic droit sur le fichier Atom et sélectionne Exécuter en tant qu’administra-teur. Une fois l’installation terminée, tu peux démarrer Atom depuis le menu démarrer ;
●• Si tu es sur Linux : ouvre l’explorateur de fichiers, rends-toi dans le dossier Téléchargements, et double-clique sur le fichier Atom pour l’installer. Une fois l’installation terminée, tu peux démarrer Atom de-puis le menu d’applications.
020
Comme beaucoup de choses en informatique, et plus particulière-ment dans le domaine de la programmation, l’interface de cet éditeur est par défaut en anglais. Les instructions que je te donnerai se base-ront sur l’interface en anglais, et pour cette raison je te conseille de conserver l’interface en anglais pour l’instant.
Une fois que tu l’auras lancé, tu devrais voir quelque chose qui ressemble à ça (sauf que le fond sera foncé) :
Il est possible qu’à ce stade, Atom te pose plusieurs questions :
• S’il te propose d’être un URI handler tu peux répondre No, never. Si tu as répondu autre chose ce n’est pas grave, ça ne changera rien de toute façon ;
• S’il te propose de télécharger Xcode ou des outils en ligne de com-mande, réponds Plus tard.
J’ai préféré te montrer la version claire ici parce que ça ressort mieux sur papier. Si tu veux avoir cette version, clique sur le bouton Choose a Theme puis sur le bouton Open the theme picker, et sélectionne le thème appelé One Light dans les deux listes (UI Theme et Syntax Theme). L’interface de-vrait maintenant être sur fond clair.
021
Néanmoins, si à un moment donné tu préfères avoir une interface en français, tu peux suivre ces instructions :
1. Ouvre la fenêtre de préférences ;
a. Sur Mac, tu peux y accéder par le menu Atom puis Preferences ; b. Sur Windows, tu peux y accéder par le menu File puis Settings ; c. Sur Linux, tu peux y accéder par le menu Edit puis Preferences.
2. Dans le menu de gauche, clique sur Install ; 3. Écris atom-i18n dans la barre de recherche et appuie sur la touche entrée ; 4. Clique sur le bouton Install de cette extension et attends que l’exten-sion soit installée ;5. Clique sur le bouton Settings sous l’extension que tu viens d’installer ;6. Sous l’élément Language qui est lui-même sous Settings, sélec-tionne Français dans la liste ;7. Clique sur le bouton Reload qui s’affiche ;8. Youpie, ton éditeur de code est en français !
Pour revenir à la version en anglais, rends-toi dans la fenêtre de préfé-rences puis, depuis le menu de gauche Packages, désinstalle le paquet atom-i18n.
Installation d’un navigateur webLe deuxième outil dans ta boîte à outils c’est un navigateur web. Tu en as probablement déjà un sur ton ordinateur : il s’agit du programme qui te permet de consulter des sites web, ou comme on dit surfer sur Internet. Il existe plusieurs navigateurs différents, comme Firefox, Chrome, Safari ou encore Edge (qui à l’époque s’appelait Internet Explorer). Si tu utilises déjà Firefox ou Chrome, c’est parfait, tu peux passer à la suite. Sinon je te recommande de télécharger et d’installer Firefox en allant sur https://getfirefox.com/. L’avantage de Firefox et de Chrome est qu’ils ont tout un tas d’outils qui t’aideront lors du développement. Par la suite, quand je mentionnerai « ton navigateur », il s’agira de Firefox ou Chrome, suivant celui qui tu as choisi d’utiliser. Pour faire de Firefox ton navigateur par défaut, lance Firefox et dans la barre d’adresse entre about :preferences et appuie sur la touche entrée. Clique maintenant sur le bouton Définir par défaut.
022
Création d’un dossier de travailIl va te falloir un dossier dans lequel tu vas mettre toutes tes belles créa-tions. Crée un dossier nommé web (tout en minuscules) sur ton bureau, comme ça tu pourras le retrouver facilement. Ce dossier web contiendra tous les fichiers qu’on créera ensemble.
Tu peux maintenant préparer Atom pour voir directement le contenu de ce nouveau dossier web en allant dans le menu File puis Open Folder (ou juste Open sur Mac), et en sélectionnant le dossier web sur ton bureau. Ça devrait te donner quelque chose comme ça :
Je te conseille d’agrandir la fenêtre d’Atom au maximum afin d’avoir toute la place pour écrire du code. De plus, je te recommande de fermer tous les onglets actuellement ouverts en passant ta souris sur chacun des onglets et en cliquant sur l’icône en forme de croix pour que l’interface ressemble à la capture d’écran ci-dessus.
Et voilà, on peut commencer !
023
024
Les logiciels open sourceÀ moins que tu utilises Linux, la plupart des logiciels installés sur ton ordinateur sont probablement propriétaires. Ces logiciels ne sont dis-tribués que sous leur forme compilée, c’est-à-dire que leur code source n’est pas fourni, et toute modification ou redistribution est généralement interdite. À l’opposé de ce modèle, les logiciels open source mettent à disposition leur code source, et encouragent leur modification et leur redistribution. L’accès au code source offre des avantages pratiques certains, comme la possibilité d’adapter le logiciel à ses besoins ou de reprendre un projet dont le développement se serait arrêté. En plus de ces considérations pratiques, l’aspect éthique de ce modèle est probable-ment le plus intéressant, et dans ce cas on parle plus volontiers de logiciel libre : le partage de connaissances et la collaboration dans le modèle open source s’opposent aux brevets logiciels et à la mainmise d’entreprises dans le modèle propriétaire. Le logiciel n’est alors plus un simple produit commercial, mais une solution à un problème, à laquelle toute personne est invitée à apporter sa contribution. De plus, le fait de pouvoir analyser le code source d’une application est extrêmement utile pour apprendre et comprendre le fonctionnement d’un logiciel.
Ce modèle offre cependant un défi financier majeur : tous les outils que l’on va utiliser (Atom, Firefox, Python, Django) sont gratuits, comme la plupart des projets open source. Par conséquent, leur développement dépend souvent de la bonne volonté et du temps libre de leurs contri-buteurs et contributrices. Malheureusement, nombreuses sont les entreprises qui tirent bénéfice de l’utilisation de ces logiciels sans rien donner en retour, qu’il s’agisse de contributions au code source ou de contributions financières.
024
025
2. Introduction au HTML
026
Aujourd’hui tu vas apprendre le HTML, le langage à la base de toutes les pages web. La connaissance de ce langage est indispensable pour que tu sois capable de créer tes propres pages.
C’est quoi le HTML ?Quand tu te rends sur n’importe quel site web avec ton navigateur, par exemple geniesducode.com, le site envoie à ton navigateur du code qui est ensuite interprété grâce à ce qu’on appelle un moteur de rendu, qui va « traduire » le code en éléments visuels. Ce code, c’est du HTML, pour HyperText Markup Language. Tu peux le voir en allant sur n’im-porte quel site puis en faisant un clic droit sur la page et en sélec- tionnant « Voir le code source de la page », ce qui devrait te donner quelque chose qui ressemble à l’image ci-contre (→).
Bon, je sais ce que tu vas me dire : « Quoi ? Tout ça juste pour af-ficher une phrase ? ! »
Même si ça peut sembler complexe juste pour afficher une phrase, lorsque tu auras plein d’éléments sur ta page tu comprendras pourquoi c’est nécessaire. Ce langage a été créé pour que des programmes, les na-vigateurs web, puissent l’interpréter facilement. Interpréter du code, ça veut dire le lire et le transformer. Il s’agit en l’occurrence de transformer le code HTML, grâce au moteur de rendu (la moulinette, sur le dessin), en éléments visuels d’un site web : liens, boutons, formulaires, etc.
027
Syntaxe du HTMLLe langage HTML est composé d’éléments, chacun d’entre eux étant à son tour composé d’une balise d’ouverture et d’une balise de fermeture, permettant de délimiter l’élément, d’attributs (parfois), permettant d’ajou-ter des informations à l’élément, ainsi que d’un contenu (pas toujours). Concrètement, un élément HTML ressemble à ça :
Cet élément représente un paragraphe dont le texte qui va s’afficher est « Ma première page ». Je te parlerai des attributs plus tard, pour l’instant concentrons-nous sur les balises.
Les balises sont délimitées par les signes < et >. Chaque balise a une signification précise, ainsi <p> (pour paragraph) indique un para-graphe, <a> (pour anchor, en anglais, qui veut dire ancre) indique un lien, <strong> indique du texte qui sera mis en gras, <em> (pour emphasis, en anglais) indique du texte qui sera en italique et <h1> (pour heading) indique un titre de premier niveau. Il existe plein d’autres balises, mais pas de panique, la plupart des sites n’en utilisent pas plus d’une douzaine. Et puis dans ma bonté exceptionnelle j’ai pris la peine de mettre un tableau récapitulatif des balises les plus utilisées à la fin de ce chapitre.
Comme quand tu écris du français et que tu ouvres une parenthèse, on s’attend à ce que tu la fermes (la parenthèse, donc) pour que la syntaxe soit correcte. C’est pareil en HTML, où chaque ouverture de balise doit être suivie d’une fermeture de la même balise. Ainsi la balise <p> de-
vra toujours être suivie d’une balise </p> qui indiquera la fin de l’élément paragraphe. C’est très important de toujours fer-mer chaque balise, sinon il est probable que ta page ne s’affiche pas comme prévu !
028
Bon, assez de théorie, et si on regardait à quoi ça ressemble en vrai ? Suis ces étapes pour créer ta première page HTML :
1. Ouvre ton éditeur (Atom) s’il n’est pas déjà démarré ;2. Fais un clic droit 1 sur le dossier web dans la barre de gauche (s’il n’est pas là, suis les instructions du chapitre précédent, Création d’un dossier de travail) et sélectionne New File ;3. Nomme ce fichier page.html.
Dans ce document, mets ce contenu :
<p>Ma première page est fort jolie</p>
1 Si ton pavé tactile ou ta souris ne dispose que d’un seul bouton, comme c’est le cas sur Mac, tu peux effectuer une pression avec deux doigts (par exemple ton majeur et ton annulaire) pour faire un clic droit. 2 Dans un souci d’aider à faire progresser l’égalité, nous utilisons ici l’écriture inclusive, c’est-à-dire l’ensemble des attentions graphiques et syntaxiques permettant d’assurer une égalité des représentations entre les femmes et les hommes.
Parce que tout le monde fait des erreurs en écrivant du code, les extraits de code sont toujours accompagnés d’un point de contrôle qui te permettra de comparer ton code avec le mien. Quand quelque chose ne fonctionne pas comme prévu ou que tu as un doute, ne panique pas et cherche le numéro du dernier point de contrôle. Rends-toi ensuite sur https://geniesducode.com/chapitres et sélectionne le chapitre dans lequel tu te trouves en ce moment. Tu pourras alors télécharger le code du point de contrôle spécifique et l’ouvrir dans ton éditeur pour l’examiner, ce qui devrait t’aider à te remettre sur les rails. C’est pas super, ça ?
Attention par contre, je t’encourage à utiliser ces points de contrôle seulement dans les situations où tu restes bloqué-e 2 même après avoir passé du temps dessus. Pour des questions de mémorisa-tion, c’est important que tu écrives le code toi-même (pas de copier-coller !), et que tu essaies d’abord de comprendre par toi-même ce qui ne fonctionne pas avant d’avoir recours à la solu- tion.
Par contre, n’attends bien sûr pas d’avoir jeté ton ordinateur par la fenêtre avant de te référer au point de contrôle. Sans ordinateur c’est
moins pratique.
00
029
Tu remarqueras que l’onglet d’Atom indiquant le nom du fichier contient une pastille bleue. Elle indique que ton fichier n’est pas enregistré. Enregistre le fichier en appuyant sur les touches Ctrl + s, ou cmd + s si tu es sur Mac (tu pourrais aussi aller dans le menu File puis sélectionner Save mais ça prend plus de temps).
Tu verras que la pastille bleue a bien disparu, ce qui indique que toutes les modifications ont été enregistrées. Fais bien attention par la suite de toujours vérifier qu’aucun onglet n’a de pastille bleue avant d’utiliser tes fichiers, par exemple avant de les visualiser dans ton navigateur.
Ouvre maintenant le dossier web dans ton explorateur de fichiers, soit en double-cliquant sur le dossier web sur ton bureau, soit directement depuis ton éditeur en faisant un clic droit sur le fichier page.html puis :
• Si tu es sur Mac, sélectionne Show in Finder ;
• Si tu es sur Windows, sélectionne Show in Explorer ;
• Si tu es sur Linux, sélectionne Show in File Manager.
Maintenant que tu te trouves dans le dossier web, double-clique sur le fichier page.html pour l’ouvrir dans ton navigateur. Si le fichier ne s’ouvre pas dans ton navigateur, fais un clic droit dessus et sélectionne Ouvrir avec puis sélectionne ton navigateur web (Chrome ou Firefox).
Tu devrais maintenant voir le texte « Ma première page est fort jolie » s’afficher dans ton navigateur. Bravo tu as créé ta première page web, high five (ou plutôt haut cinq) ! Suivant le navigateur que tu utilises, tu remarqueras peut-être que les caractères accentués s’affichent mal. Es-saie de ne pas t’inquiéter pour ça pour l’instant, on s’en occupera plus tard.
Revenons à nos balises. Ces balises permettent de délimiter chaque élément. Ainsi, pour ajouter un deuxième paragraphe à ta page, tu ajouteras un élément <p> après l’élément existant. Retourne dans ton éditeur de code puis ajoute le code suivant à la suite du code déjà présent dans ta page (la partie en gris représente le code déjà présent dans ta page, et la partie en noir représente le code à ajouter) :
030
<p>Ma première page est fort jolie</p><p>Moi aussi je suis géniale!</p>
Enregistre le fichier, retourne dans ton navigateur et recharge la page (en cliquant sur le bouton Rafraîchir ou en appuyant sur la combinaison de touches Ctrl + r sur Windows et Linux, ou cmd + r sur Mac). Alors, qu’est-ce qui s’est passé ? Le texte « Moi aussi je suis géniale! » apparaît sur une ligne distincte puisqu’il fait partie d’un autre paragraphe.
Les éléments HTML peuvent aussi être imbriqués, c’est-à-dire qu’on peut mettre des éléments dans d’autres éléments. Tu pourrais par exemple utiliser l’élément <strong> que j’ai mentionné avant pour mettre en gras le texte « Ma première page est fort jolie ». Retourne dans ton éditeur et modifie le fichier page.html pour qu’il contienne ce code :
<p><strong>Ma première page est fort jolie</strong></p><p>Moi aussi je suis géniale!</p>
Enregistre le fichier, retourne dans ton navigateur et recharge la page. Alors ? Tu as compris ce qui se passe ? Le texte « Ma première page est fort jolie » apparaît en gras parce qu’il se trouve à l’intérieur de l’élément <strong>. Par contre le texte « Moi aussi je suis géniale ! » apparaît normalement parce qu’il n’est pas dans l’élément <strong>.
Fais bien attention à la fermeture des balises, l’ordre est important ! Puisque la balise <strong> a été ouverte à l’intérieur de la balise <p>, elle doit aussi être fermée à l’intérieur. Atom te donne aussi des repères visuels pour la fermeture des balises : en cliquant sur une balise d’ouver-ture ou de fermeture, tu remarqueras qu’Atom la souligne, ainsi que sa balise de fermeture ou d’ouverture correspondante. Le code suivant, par exemple, n’est pas valide car l’ordre de fermeture n’est pas correct :
<p><strong>Ma première page est fort jolie</p></strong><p>Moi aussi je suis géniale!</p>
02
01
031
Structure d’une page webDe par l’imbrication de ses éléments, une page HTML a une structure en arbre. Tu as sûrement déjà vu une telle structure, par exemple la classifi-cation des espèces de poissons.
Dans un document HTML, (presque tous) les éléments peuvent avoir des sous-éléments (qui se trouvent à l’intérieur d’un élément), et des frères et sœurs (qui se trouvent à côté d’un élément). Regarde le code HTML suivant (les retours à la ligne et les espaces dans ce code ne sont présents que pour des questions de lisibilité, ils sont ignorés par le navigateur, on en reparlera plus tard) :
<p> <strong>Texte en gras</strong> <em>Texte en italique</em></p>
La représentation de sa structure sous forme d’arbre est la suivante :
Les éléments <strong> et <em> sont donc des enfants de l’élément <p>, et ces deux éléments (<strong> et <em>) sont frères et sœurs.
Pour qu’une page HTML soit valide, elle doit contenir un seul élément racine, donc un seul élément qui contient tous les autres éléments, qui doit être l’élément <html>. Cet élément va à son tour contenir un élément <head> et un élément <body>, ce qui donne la structure de base suivante :
032
<html> <head></head> <body></body></html>
L’élément <head> est unique dans la page et représente la partie de méta- données. Les informations que tu mets dedans ne seront pas visibles sur ta page. Ces informations peuvent par exemple être destinées aux moteurs de recherche ou aux réseaux sociaux, ou encore indiquer des liens avec des feuilles de style, dont je te parlerai plus tard. Cet élément ne peut contenir que des éléments enfants bien spécifiques, que je te présenterai plus tard.
L’élément <body> est aussi unique dans la page et représente la partie de contenu, autrement dit tout ce qui sera visible. C’est lui qui va conte-nir la quasi-totalité des éléments de ta page. Tous les éléments qu’on a vus jusqu’à maintenant (<p>, <strong>, <em>, <a>, etc.) vont dans cet élément <body>, et pas dans l’élément <head>.
Les erreurs dans le code HTML sont assez fré-quentes. Moi-même, ça m’est arrivé plus d’une fois d’écrire du code HTML non valide, hum… En fait c’est même telle-ment fréquent que les navigateurs web sont conçus pour résister à ce genre d’erreurs et afficher du mieux qu’ils peuvent ces documents HTML considérés comme non valides.
Il existe des validateurs de code HTML que je t’encourage à utiliser, du moins tant que tu n’es pas complètement à l’aise avec ce langage. Je te recommande le validateur du W3C 3 , disponible à l’adresse http://validator.w3.org. En cliquant sur l’onglet Validate by direct input, tu pourras coller le code HTML de ta page et cliquer sur le bouton Check. Le validateur t’indiquera alors les erreurs éventuelles et la façon de les corriger.
3 Le W3C, pour World Wide Web Consortium, est une communauté internationale qui s’occupe de développer les standards liés au Web. C’est ce groupe, par exemple, qui s’occupe du standard HTML.
033
Bon, ce n’est pas une raison pour écrire des documents non valides, alors on va modifier ton document pour qu’il soit valide, en englobant tout le contenu dans un élément <body> (qui sera lui-même dans l’élément racine <html>). Retourne dans ton éditeur et modifie ta page pour qu’elle contienne le code suivant :
<html><body><p><strong>Ma première page est fort jolie</strong></p><p>Moi aussi je suis géniale!</p></body></html>
C’est mieux ! Ce code ne contient pas de balise <head>, parce qu’on n’a encore rien à mettre dedans. Mais avec toutes ces balises, ça devient diffi-cile de s’y retrouver. De façon générale, quand on écrit du code on le met sur plusieurs lignes, pour que ça soit plus lisible. Les navigateurs, quand ils interprètent du HTML, ignorent la répétition d’espaces et de retours à la ligne, donc tu peux mettre autant de retours à la ligne ou d’espaces que tu veux, ça ne va rien changer à la présentation de ta page. Le même code, sur plusieurs lignes, ressemble à ça :
<html><body><p><strong>Ma première page est fort jolie</strong></p><p>Moi aussi je suis géniale!</p></body></html>
Tu as deux possibilités pour mettre des retours à la ligne visibles dans ta page : la première possibilité, et c’est celle que tu devrais utiliser dans la plupart des cas, est de mettre ton contenu dans des paragraphes (avec l’élément <p> donc). Chaque paragraphe sera alors dans un bloc distinct. La seconde est d’utiliser des éléments <br> (pour break en anglais, qui veut dire « pause », comme dans Prison Break, « pause de prison », ou plus sérieusement comme dans line break, pour « saut de ligne »). Petite particularité : cet élément n’a pas de balise de fermeture parce qu’il n’a pas de contenu, donc tu devras écrire <p>première ligne<br>deuxième ligne</p>, sans fermer la balise <br>, et ce code HTML sera valide. Tu verras dans le prochain chapitre comment
changer l’espacement entre les éléments.
03
034
Il est possible qu’Atom ait ajouté automatiquement des espaces au début de chaque ligne. C’est ce qui s’appelle l’indentation, et elle consiste à
décaler les balises de façon logique pour mieux voir leur imbrication (et pour vérifier qu’elles sont bien toutes fermées). Puisque le HTML ignore les espaces répétés, tu peux en mettre autant que tu veux sans que ça change quoi que ce soit au rendu de ta page.
Au lieu d’appuyer comme un-e forcené-e sur la touche espace pour ali-gner les éléments, utilise la touche tabulation (● ou sur Mac), située tout à gauche de ton clavier. Chaque pression sur cette touche in-sérera un niveau d’indentation, autrement dit deux espaces. C’est bien plus pratique !
Assure-toi que le code de ta page ressemble à ça :
<html><body> <p> <strong>Ma première page est fort jolie</strong> </p> <p>Moi aussi je suis géniale!</p></body></html>
Juste en regardant le décalage de chaque ligne, on peut voir dans quel élément chaque élément est imbriqué. C’est beaucoup plus lisible, non ?
Et les métadonnées, alors ?Alors que le contenu visible de ta page se trouve dans l’élément <body>, les métadonnées se trouvent dans l’élément <head>. Cet élément <head> ne peut contenir que des éléments bien spécifiques. Par exemple l’élément <title>, qui permet de définir le titre de la page, qui apparaîtra entre autres dans l’onglet de ton navigateur et sur les moteurs de recherche. Et puisque ta page n’a pas encore d’élément <head>, il va falloir l’ajou-ter. Mets le code suivant à l’intérieur de l’élément <html>, juste avant l’élément <body> :
04
035
<html><head> <title>Oyez, oyez, voici venir ma première page</title></head><body> ...
Enregistre le fichier, retourne dans ton navigateur et recharge la page. Tu verras que l’onglet contient maintenant le titre « Oyez, oyez, voici venir ma première page ». Puisqu’il s’agit d’une métadonnée, placée dans l’élément <head> de ta page, le contenu de cet élément <title> n’est pas visible sur la page mais seulement dans l’onglet de ton navigateur.
Tu te souviens du problème d’affichage des caractères accentués que j’ai mentionné tout à l’heure, et que tu as peut-être noté sur ta liste des choses à corriger ? Eh bien il y a une autre balise de métadonnées importante, qui permet de préciser l’encodage de ta page. En informatique, il existe plusieurs systèmes d’encodage de texte, qui permettent de représenter des lettres sous une forme qui est comprise par les ordinateurs, sous forme numérique. Ce qui se passe quand ton navigateur affiche mal les caractères accentués, c’est que ton éditeur de code a enregistré le fichier dans un certain encodage, et que ton navigateur a essayé de deviner l’encodage et s’est trompé (comme dirait le dicton populaire, « errare ordinateurum est »). Bref, pour corriger le problème, il faut indiquer au navigateur quel encodage il doit utiliser en ajoutant une balise spécifique le plus tôt possible dans la partie <head> de ton document, par exemple avant la balise <title> :
<meta charset="utf-8">
Ça indiquera à ton navigateur que ta page est encodée en UTF-8. Cette balise est indispensable et tu devrais toujours la mettre dans toutes tes pages pour t’assurer qu’elles s’affichent correctement dans tous les navigateurs. Note que, comme la balise <br>, c’est une balise qui n’a pas besoin d’être fermée, étant donné qu’elle n’a pas de contenu.
05
036
Les normes HTMLHTML est un langage qui continue d’évoluer pour répondre aux nou-veaux besoins. Les navigateurs peuvent faire bien plus de choses au-jourd’hui qu’il y a dix ans ! Pour que les navigateurs sachent comment interpréter ta page, il faut leur indiquer quelle norme tu as utilisée. La plus courante pour le moment est HTML 5, et c’est donc celle qu’on va utiliser. Pour préciser à ton navigateur que ta page utilise HTML 5, il faut ajouter une définition de doctype au tout début de ta page. Pour la norme HTML 5, la définition du doctype se fait de la façon suivante :
<!DOCTYPE html>
Modifie ta page pour ajouter le doctype tout au début :
<!DOCTYPE html><html> <head> ...
À partir de maintenant, fais bien attention à ce que toutes tes pages aient au moins la définition du type de document (<!DOCTYPE html>) et du système d’encodage (<meta charset="utf-8">).
Les liensUne page web sans lien, c’est comme une journée sans soleil, c’est un peu triste, alors ajoutons un lien !
Pour créer un lien, c’est l’élément <a> qu’il faut utiliser. Retourne dans ton éditeur et mets un lien sur le texte « Moi aussi je suis géniale ! » :
<a>Moi aussi je suis géniale!</a>
Enregistre le fichier, retourne dans ton navigateur, recharge la page, essaie de cliquer sur le texte « Moi aussi je suis géniale ! » et… hum, rien ne se passe ? Ah oui ! Si tu regardes l’élément <a> que je t’ai dit de créer, tu vois qu’on a pas indiqué la destination du lien. Pour ça, on utilise les attri-buts HTML, qui permettent d’ajouter des informations sur les éléments. Par exemple, les éléments <a> doivent avoir un attribut href qui définit la cible du lien. Cet attribut est spécifique à l’élément <a>, inutile donc
06
037
d’essayer de mettre cet attribut href sur d’autres éléments, par exemple sur un élément <p>. Un attribut a un nom et une valeur et sa syntaxe est attribut="valeur". Fais bien attention de toujours mettre la valeur entre guillemets !
Retourne dans ton éditeur et ajoute l’attribut href sur l’élément <a>, afin d’indiquer la destination du lien :
<a href="https://geniesducode.com/">Moi aussi je suis géniale!</a>
Enregistre le fichier et recharge la page dans ton navigateur : tu peux maintenant cliquer sur le lien ! Fou, non ? Chaque élément dispose d’at-tributs spécifiques qui peuvent être définis dessus. Tu trouveras une liste complète des attributs sur le site Mozilla Developer Network 4 (MDN), qui est une véritable mine d’informations et que je t’encourage à consul-ter chaque fois que tu cherches de l’information sur le HTML. Une fois sur cette page, clique sur un élément (par exemple <a>) pour voir la liste des attributs disponibles.
Ça, c’était pour les liens vers d’autres sites, mais comment ça marche si on veut faire un lien vers une autre page à nous ? Au lieu de mettre une URL vers un autre site, c’est-à-dire qui commence par http://, tu peux mettre un chemin vers un fichier, par exemple page.html. Essayons tout de suite !
Dans ton éditeur, fais un clic droit sur le dossier web, sélectionne New File, et appelle cette nouvelle page page2.html. Dans ce fichier, mets le code suivant :
4 https://geniesducode.com/elements-html
07
038
<!DOCTYPE html><html><head><meta charset="utf-8"></head><body> <a href="page.html">Ma toute première page</a></body></html>
Enregistre le fichier puis ouvre cette nouvelle page dans ton navigateur (je te rappelle qu’elle se trouve dans le dossier web sur ton bureau), et cli-que sur le lien. Te voilà sur la première page ! En mettant le nom de fichier de ta page web, page.html, comme destination du lien, ça t’a bien amené-e sur cette page.
Tu pourrais ajouter un lien sur ta première page qui pointerait vers ta deuxième page (dont le nom est page2.html), comme ça tu pourrais naviguer d’une page à l’autre. Je te laisse essayer !
Des imagesUne page web sans photos de chats, ce ne serait pas une vraie page web, mais en même temps il y a déjà des chats partout, donc ajoutons une photo de poisson, pour varier un peu ! La première étape est de trouver
une image sur ton ordi- nateur, et, dans le cas où tu n’en aurais pas, d’en télécharger une sur Internet (tu en trouveras plein sur ton moteur de recherche préféré). En-registre-la dans le même dossier que ta page web
et renomme-la en poisson.jpg (ou poisson.png ou poisson.gif, garde l’extension du fichier que tu as téléchargé 5 ).
Maintenant que tu as une belle image à utiliser, il faut utiliser l’élément <img> pour insérer cette image dans la page. L’attribut src (pour source)
5 Si tu utilises Windows et que les extensions de fichiers sont masquées, je te recommande vivement de les afficher en passant par le menu Affichage de l’explorateur de fichiers.
08
09
039
permet d’indiquer le nom de fichier à insérer. Dans ton éditeur, ouvre le fichier page.html et ajoute ce nouvel élément dans l’élément <body> :
<img src="poisson.jpg">
Non, ce n’est pas un oubli ! Comme les balises <br> et <meta>, qui n’ont pas de contenu, la balise <img> est « auto-fermante », ce qui signifie qu’il ne faut pas mettre de balise de fermeture. Les deux nota-tions suivantes seraient donc fausses :<img src="poisson.jpg"></img><img>poisson.jpg</img>
Enregistre le fichier et recharge la page dans ton navigateur, tu verras la photo de poisson apparaître, youpie !
Si ça ne fonctionne pas :
• Vérifie que le fichier poisson.jpg est bien présent dans le même dossier que ta page ;
• Vérifie que le nom du fichier image que tu as mis dans le code HTML correspond exactement au nom du fichier dans le dossier (vérifie bien l’extension du nom de fichier et le respect de la casse, autrement dit des majuscules et des minuscules) ;
• Essaie d’ouvrir l’image avec un programme de visualisation d’images pour vérifier que c’est une image valide.
Si ça ne fonctionne toujours pas, réfère-toi au point de contrôle.
10
040
Éléments de type bloc et en ligneTu as peut-être remarqué que certains éléments s’affichent les uns sous les autres, comme par exemple les paragraphes (<p>), alors que d’autres s’affichent sur la même ligne, comme par exemple les liens (<a>), les images (<img>) et la mise en gras et en italique (<strong> et <em>). Les éléments comme les paragraphes, qui s’affichent les uns sous les autres, sont appelés éléments de type bloc, alors que les éléments qui s’insèrent dans le flux de texte sans créer de nouveaux blocs sont appelés éléments de type en ligne. Je t’en reparlerai plus en détail dans le chapitre suivant.
Les formulairesLes formulaires sont incontournables sur les sites web actuels. Ils permettent aux personnes qui visitent ton site d’interagir en envoyant des informations. Puisqu’un extrait de code accompagné d’une illus-tration vaut parfois mille mots, voici un exemple de formulaire avec un champ de texte, des boutons radio, et un bouton envoyer :
<form method="post" action="page2.html"> 1 <label> 2 Nom: <input type="text" name="name"> 3 </label> <p>Couleur:</p> <label> <input type="radio" name="color" value="red"> Rouge 4 </label> <label><input type="radio" name="color" value="green"> Vert</label> <label><input type="radio" name="color" value="blue"> Bleu</label> <button>Envoyer!</button> 5</form>
041
1 L’élément <form> doit englober tous les éléments du formulaire. Au moment où le bouton de type submit sera cliqué, les champs qui se trouvent dans l’élément <form> seront envoyés à la page indiquée par l’attribut action du formulaire (ici page2.html). La propriété method définit la méthode HTTP à utiliser. Je te parlerai des méthodes HTTP au chapitre 7. Les cas où tu devrais utiliser autre chose que post sont très rares, et tu peux donc toujours utiliser la valeur post.
2 L’élément <label> englobe le champ dont il est le libellé. Quand tu cliqueras sur le libellé, ton curseur se placera dans le champ corres-pondant.
3 L’élément <input> définit un champ de formulaire. Il existe plusieurs types de champs, comme les champs texte (type="text"), les cases à cocher (type="checkbox"), les boutons radio (type="radio", qui sont comme les cases à cocher mais qui per-mettent de sélectionner un seul choix). L’attribut name représente le nom du champ qui sera envoyé par ton navigateur. C’est ce qui te per-mettra de récupérer sa valeur dans la page de destination du formulaire. Attention, l’élément <input> n’a pas de balise de fermeture !
4 Un seul choix peut être coché dans un groupe de boutons radio. Pour définir un groupe de boutons radio, il faut leur donner le même attribut name. Ici puisque tous les boutons radio ont le nom color, seule une des couleurs pourra être cochée. Au moment de soumettre le formulaire, le navigateur enverra la valeur de l’attribut value du bouton radio sélectionné, autrement dit red, green ou blue.
5 Finalement, l’élément <button> définit un bouton. Un clic dessus va provoquer l’envoi du formulaire. On va avoir besoin d’un pro-gramme pour traiter les données du formulaire. On y reviendra au chapitre 8.
MDN dispose d’une documentation très complète 6 sur les éléments de formulaires, avec des aperçus de l’apparence des différents élé-ments.
6 https://geniesducode.com/formulaires-html
042
Une page un peu plus complexeTu disposes maintenant de tout ce qu’il faut pour faire une page bien charismatique ! Idéalement il faudrait qu’on trouve un projet sur lequel tu travailleras ces pro-chains jours, si possible quel- que chose d’interactif, avec des formulaires, par exemple...
Tope là pour un quiz sur les poissons !
Puisqu’on a pas toute la vie de-vant nous et que tu as encore plein de choses à découvrir, je te propose un quiz assez basique, composé de trois pages :
• une page d’accueil, où tu pré-senteras le quiz, avec un lien vers la page de question ;
• une page de question, avec un formulaire pour choisir une réponse et un bouton pour l’envoyer ;
• une page de résultats, avec un titre, une description où tu pourras com-menter le score, et un lien pour revenir à la page d’accueil.
Bref, quelque chose comme ça :
Pour l’instant, on va se contenter de créer le contenu des pages, sans en-registrer les réponses. On ajoutera cette fonctionnalité quand tu créeras ton site dynamique avec Django.
043
Pour ces trois pages fais bien attention :
• de mettre un élément <meta> pour spécifier l’encodage de chaque page ;
• de mettre un élément <!DOCTYPE html> pour spécifier la norme HTML de chaque page ;
• de fermer les balises (sauf <meta>, <br> et <input>) ;
• d’utiliser le validateur du W3C pour valider ton code 7 ;
• de vérifier que tes fichiers sont enregistrés avant de les ouvrir dans ton navigateur (vérifie l’absence de pastille bleue dans les onglets d’Atom).
Si tu es perdu-e durant l’exercice, n’hésite pas à utiliser le tableau récapi-tulatif à la fin de ce chapitre ou à te référer aux points de contrôle !
Page d’accueil
Retourne dans ton éditeur et crée un fichier nommé home.html dans ton dossier web, en faisant un clic droit sur le dossier web et en sélection-nant New File. Utilise les éléments <h1>, <p> et <a> pour que ta page ressemble à ça :
Le lien « C’est parti » devrait pointer sur la prochaine page que tu vas créer et qui va s’appeler question_detail.html.
Page de question
Retourne dans ton éditeur et crée un fichier nommé question_detail.html dans ton dossier web, en faisant un clic droit sur le dossier web et en sélectionnant New File. Cette fois, utilise les éléments <h1>, <h2>, <form>, <div> (ou <br>, pour séparer les options), <input>, <label> et <button> pour que ta page ressemble à ça (page suivante) :
7 http://validator.w3.org
11
044
Fais en sorte que le bouton envoie le formulaire sur la prochaine page que tu vas créer, qui va s’appeler results.html.
Page de résultats
Retourne dans ton éditeur et crée un fichier nommé results.html dans ton dossier web, en faisant un clic droit sur le dossier web et en sélectionnant New File. Cette fois, utilise les éléments <h1>, <h2>, <p> et <a> pour que ta page ressemble à ça :
Le lien « Réessayer » devrait pointer vers ta première page, home.html.
Si ta page s’affiche avec des accents bizarres, pas de panique ! Tu as juste oublié la balise <meta charset="utf-8">. Retourne à la partie Et les métadonnées alors ?, qui t’expliquera comment faire en sorte que ta page s’affiche correctement.
Avant de passer à la suite, assure-toi que le code des trois pages que tu as créées est valide en utilisant le validateur du W3C, et en les comparant au dernier point de contrôle. C’est très important pour la suite que tes pages aient la même structure que le point de contrôle.
12
13
045
Tableau récapitulatif des élémentsVoici une liste de quelques éléments que tu pourras utiliser sur tes pages. Cette liste n’est pas exhaustive et ne présente volontairement que des éléments et des attributs de base qui devraient te suffire au début. Pour une référence complète des éléments existants, tu peux te référer au site MDN 8 .
N’hésite pas à mettre un marque-page ici pour revenir à cette liste quand tu en auras besoin !
8 https://geniesducode.com/elements-html
MétadonnéesCes éléments ne sont valides qu’à l’intérieur de l’élément <head>.
Mise en page du texte
ÉLÉMENT C’EST QUOI ? EXEMPLES
<p> Paragraphe de texteÉlément de type bloc
<p>Paragraphe 1</p><p>Paragraphe 2</p>
<em> Texte en italique <em>Texte en italique</em>
<strong> Texte en gras <strong>Texte en gras</strong>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Titres de niveau 1 (le plus gros), 2, 3, 4, 5 et 6 (le plus petit). Élément de type bloc
<h1>Titre de niveau 1</h1><h2>Titre de niveau 2</h2>
ÉLÉMENT C’EST QUOI ? EXEMPLES
<meta> Métadonnée :Principalement utilisée pour définir l’encodage de la page. Pas de balise de fermeture
<meta charset="utf-8">
<title> Titre de la page pour les moteurs de recherche, l’onglet du navigateur et les marque-pages
<title>Ma page</title>
<link> Relation avec un document externe, notamment une feuille de style (voir chapitre 3)Pas de balise de fermeture
<link rel="stylesheet" href="style.css">
046
Autres
ÉLÉMENT C’EST QUOI ? ATTRIBUTS EXEMPLES
<a> Lien href: cible du lien <a href="https://geniesducode.com/">Génies du code </a>
<div> Bloc de contenu : utilisé pour séparer des éléments dans des blocs différents (par exemple un menu, une barre de côté, etc). Élément de type bloc
<div>Bloc 1</div><div>Bloc 2</div>
<ul> et <li> Liste à puce :<ul> représente le conteneur de liste, et chaque <li> représente un point de la listeÉlément de type bloc
<ul> <li>Élément 1</li> <li>Élément 2</li></ul>
<img> Image : pas de balise de fermeture
src: source de l’image (nom de fichier ou adresse complète)
<img src="poisson.jpg"><img src="http://…">
<br> Saut à la ligne : pas de balise de fermeture
Première ligne<br>Deuxième ligne
<span> Conteneur de texte : utilisé pour changer le style de parties spécifiques de texte(voir chapitre suivant)
<p> <span>Je suis</span> <span>géniale</span></p>
ÉLÉMENT C’EST QUOI ? ATTRIBUTS EXEMPLES
<form> Élément englobant l’ensemble des champs du formulaire
method: méthode HTTP à utiliser (tu peux toujours utiliser post).
action: page sur laquelle envoyer le formulaire.
<form method="post" action="page.html"></form>
<input> Champ de saisie :pas de balise de fermeture
type: text (champ texte), checkbox (case à cocher), radio (bouton radio).
name: nom du champ qui sera envoyé lors de la soumission du formulaire.
value: valeur initiale du champ
<input type="text"name="first_name">
<input type="radio" name="color" value="red">
<button> Bouton :permet d’envoyer un formulaire
<button> Envoyer</button>
<label> Libellé d’un champ :un clic dessus mettra le focus sur le champ cible. Doit englober le champ cible
<label> Prénom: <input type="text" name="first_name"></label>
Formulaires
047
Et maintenant ?Tu as fait un sacré boulot aujourd’hui et on a un peu tout qui commence à se mélanger dans la tête non ? C’est normal avec toutes ces nouveautés. Bon, je te l’accorde, le résultat est encore loin des jolis sites qu’on peut voir sur Internet, mais je vais te montrer comment, avec un coup de peinture, on pourra rendre tes pages fort charmantes en ajoutant des cou-leurs, en changeant la police d’écriture et plein d’autres trucs ! Pour ça on va utiliser du CSS.
048
