Nous découvrirons dans cette suite d’article sur les langages HTML, CSS et JavaScript, les fondamentaux de la programmation web. Ce articles ne nécessitent pas de connaissances particulières en programmation. Les notions essentielles à la réalisation de votre premier site web y seront abordées, un pas après l’autre. C’est parti !
Le web tel qu’affiché dans un navigateur Internet (Firefox, Chrome, Edge, Safari, etc.) repose sur 3 langages de programmation fondamentaux. Lorsqu’une page est affichée dans votre navigateur, ces trois langages seront quasiment toujours présents :
- HTML sert à présenter l’information brute, c’est le squelette du site
- CSS sert à styliser l’information, c’est la peau du site
- JavaScript sert à rendre l’information et le style interactifs, c’est l’âme du site
Pour se familiariser rapidement avec la syntaxe des trois langage, on peut par exemple présenter un paragraphe de texte de la manière suivante en HTML :
<p id="paragraphe">Je suis un paragraphe de texte</p>
Et personnaliser la taille du texte et sa couleur avec le CSS suivant :
p {
font-size: 20px;
color: blue;
}
Et finalement afficher un message d’alerte à l’écran lorsque l’utilisateur du site cliquera sur le paragraphe :
var p = document.getElementById("mon-paragraphe");
p.addEventListener("click", function(event) {
alert("On a cliqué sur le paragraphe !");
});
Ces trois language sont très différents, mais tous communiquent les uns avec les autres. En 2019, tous les sites utilisent l’HTML et le CSS, la plupart d’entre eux utilisent Javascript, mais il reste optionnel si les interractions ne sont pas trop avancées. Dans cette série d’articles nous aborderont essentiellement l’HTML et le CSS.
Nos outils
Pour ce tutoriel nous utiliserons deux outils, un éditeur de texte dédié à la programmation et un navigateur internet.
L’éditeur de texte
Comme le montre les exemples précédents, un site internet n’est au final constitué que de texte. N’importe quel éditeur de texte pourrait être utilisé pour développer un site Internet. L’outil Notepad de Windows, TextEdit de MacOS pourrait tout aussi bien fonctionner que ceux que nous allons utiliser, mais des éditeurs de textes dédié à la programmation existent pour faciliter la lecture du code.
Le navigateur
Nous aurons également besoin d’un navigateur Internet à jour. Il sera plus facile de travailler avec Firefox ou Chrome, mais il reste possible d’utiliser Edge si vous êtes sur Windows ou Safari sur OSX. Les navigateurs modernes mettent à disposition des outils pour tester le code de la page, ce n’a pas toujours été le cas avec les anciens navigateurs, et il n’est donc pas recommandé d’utiliser Internet Explorer pour développer !
Atom
Pour ce cours nous utiliserons le logiciel Atom. C’est un éditeur de texte gratuit et Open Source qui offre, entre autre, des outils pour le développement HTML, CSS et JavaScript. Si vous n’avez pas déjà Atom, vous pouvez le télécharger à l’adresse suivante : https://atom.io/
Une fois Atom téléchargé ouvrez le, vous verrez alors deux panneaux avec des affichages différents :
Nous n’utiliserons aucun de ces deux écrans, vous pouvez donc les fermer en cliquant sur la croix des onglets correspondant. Il ne devrait rester qu’un seul onglet “untitled”
Créer un projet
Chaque site que vous créerez dans Atom correspondra à un projet. Un projet consiste en un en ensemble de fichiers HTML et CSS organisés dans des dossiers. Commençons par créer un faux projet et ajoutons quelques fichiers textes à l’interieur. Cliquer sur “File” > “Open Folder” dans la barre de menu, puis créez un nouveau dossier “hello-atom” qui contiendra le projet. Sélectionnez ce dossier.
Vous devriez maitnenant voir le dossier “hello-atom” apparaitre dans la colonne de gauche.
Créer des fichiers
Faites un clic droit sur le dossier de la colonne de gauche puis “New File”. Un encart permettant de renseigner le nom du fichier s’ouvre alors, indiquez “page-une.html”. Répétez l’opération une seconde fois et créez un nouveau fichier “page-deux.html”. Le .html indique l’extension du fichier. Un fichier avec une extension .html n’est rien d’autre que du texte brute, dans ce cas là le .html indique juste aux autre logiciels (en l’occurence les navigateurs) comment l’interpréter. Par défaut, un fichier .html sera toujours ouvert avec un navigateur Internet.
La colonne de gauche devrait maintenant ressembler à ceci :
Le projet contient un dossier “hello-atom” possédant lui même deux fichiers “page-une.html” et “page-deux.html”. On pourrait également créer un nouveau dossier dans le dossier “hello-atom” qui contiendrait lui même des fichiers et des dossier, etc. Pour décrire cette structure de dossier et de fichier on parlera “d’arborescence”, dans le sens où la représentation de cette structure peut parfois rappeler celle d’un arbre avec plusieurs embranchements. On parle également de dossier “racine” pour décrire le premier dossier crée, celui qui contiendra tous les autres dossier. Comme pour un arbre, c’est de ce dossier que partirons toutes les ramifications du projet.
Autres éléments de jargon important à noter, on parlera souvent de la relations entre les fichiers et dossiers en termes de famille. Dans notre exemple, le dossier “hello-atom” est le dossier parent de “page-une.html” et “page-deux.html” (parent en anglais). On dit de “page-une.html” et “page-deux.html” qu’ils sont des enfants du dossier “hello-atom” (children en anglais). Les fichiers “page-une.html” et “page-deux.html” sont des frères et soeurs (sibling en anglais). Ce jargon se retrouvera également plus tard en HTML.
Organisation des panneaux
Il est souvent utile d’afficher deux extraits de code côte à côte. Atom permet de diviser l’affichage en panneaux. Si ce n ‘est pas déjà fait, ouvrez les deux fichiers “page-une.html” et “page-deux.html” en les sélectionnant dans la colonne de gauche. Une fois les deux onglet ouverts, cliquez glissez sur l’un d’eux à la droite de l’écran qui se divisera alors en deux panneaux. Avec plus de fichiers, il est possible de répéter l’opération autant de fois que voulu, vers la droite, la gauche, en haut ou en bas de l’écran selon vos préférences.
