L'histoire de votre premier site web

Créer un site web professionnel nécessite beaucoup de travail. C'est

pourquoi, si vous débutez, nous vous encourageons à commencer par
quelque chose de simple. Vous n'allez pas bâtir un nouveau Facebook dès
le départ mais il n'est pas bien compliqué de mettre en ligne votre propre
site web. C'est par là que nous allons démarrer.

En parcourant les articles listés ci-dessous, vous pourrez créer votre

première page web et la mettre en ligne. Allons-y !

Installer les outils de base

Beaucoup d'outils sont disponibles afin de construire un site web. Si vous
débutez, vous serez peut-être perturbé par la quantité d'éditeurs de code,
de frameworks ou encore d'outils de tests disponibles. Dans cet article nous
décrivons, pas à pas, comment installer les seuls outils strictement
nécessaires afin de développer un site web.

Dans cet article, nous allons vous montrer les outils dont vous aurez besoin pour
développer un site web simple, ainsi que comment les installer.

Quels outils utilisent les professionnels ?

 Un ordinateur. Ça peut sembler évident pour certains, mais certains
d'entre vous lisent cet article depuis leur téléphone ou un terminal de
bibliothèque. Pour du dévelopement web sérieux, il est préférable d'investir
dans un ordinateur de bureau (Windows, Mac ou Linux).
 Un éditeur de texte, pour y écrire du code. Cela peut être un éditeur
gratuit (ex : Atom, VS Code, Notepad++, gedit ou Text Wrangler), ou un
éditeur de texte commercial (Sublime Text, ou Coda) ou un éditeur hybride
(Dreamweaver).
 Un navigateur web, pour y tester le code. Les navigateurs les plus
utilisés sont Firefox, Chrome, Opera, Safari et Internet Explorer.
 Un éditeur graphique, comme GIMP ou Photoshop, pour construire
les images de vos pages web.
 Un serveur web, utilisé pour publier des sites web sur votre intranet.
Les plus connus sont Apache, IIS, Nginx, Lighttpd.
 Un langage serveur tel que PHP pour générer des pages web
dynamiques.
 Un système de gestion de base de données. à l'instar
de MySQL  permettant de stocker, d'organiser et de récupérer des
données.
 Un gestionnaire de versions, pour collaborer sur les projets avec un
équipe, partager du code, des fichiers et pour éviter les conflits d'édition. À
ce jour, Git est l'outil le plus connu et la plateforme en ligne GitHub est
 également très populaire et permet de publier des projets logiciels gérés
avec Git.
 Un programme FTP, pour uploader les pages web vers un serveur
et leur donner une visibilité publique. Il existe une grande quantité de
programmes de ce genre comme Cyberduck, Fetch et FileZilla.
 Un système d'automatisation, comme Grunt, pour automatiser les
tâches répetitives, comme, par exemple, minimiser le code et lancer des
tests.
 Des templates (modèles), bibliothèques, framework, etc. pour
accélérer le développement de functionnalités fréquentes.
 Et encore plus !

De quels outils ai-je besoin tout de suite ?

Cette liste peut paraître effrayante. heureusement vous pouvez vous lancer
dans le dévelopement web sans rien savoir de tout cela. Dans cet article
nous allons vous présenter le minimum : un éditeur de texte et quelques
navigateurs web modernes.

Installer un éditeur de texte

Vous avez probablement un éditeur de texte basique sur votre ordinateur.
Par défaut Windows propose Bloc-Notes, OS X propose TextEdit. Pour les
distributions Linux cela varie. Ubuntu propose gedit par défaut.
Pour le développement web, vous pouvez probablement faire mieux que
Notepad ou TextEdit. Nous vous recommandons de commencer
avec Notepad++ pour Windows ou Text Wranglerpour Mac. Ils sont tous les
trois gratuits et plus complets que Bloc-Notes et TextEdit. Vous pouvez
également utiliser un éditeur disponible sur Windows, macOS et
Linux : Atom ou VS Code

Intaller un navigateur moderne

Pour l'instant, nous n'installerons que quelques navigateurs pour y tester
notre code. Choisissez votre système d'exploitation en dessous et cliquez
sur les liens pour télécharger les installateurs correspondants à vos
navigateurs favoris :

 Linux : Firefox, Chrome, Opera.
 Windows : Firefox, Chrome, Opera, Internet Explorer (si vous utilisez
Windows 8 ou une version supérieure, vous pouvez installer IE 10 ou une
version supérieure, sinon vous devriez choisir un navigateur alternatif)
 Mac : Firefox, Chrome, Opera, Safari (Safari est proposé sur iOS et
OS X par défaut)
 Avant de continuer, vous devriez installer au moins deux de ces
navigateurs et les avoir sous la main pour les tests. En effet, tous les
navigateurs ne comprennent pas ou n'interprètent pas certains languages
de la même façon. Même si la tendance actuelle dirige vers une «
normalisation » du comportement des navigateurs, il serait dommage de
n'avoir testé votre site que sur l'un d'entre eux. Ce n'est qu'une mesure de
sécurité de plus mais elle est nécessaire pour s'assurer que tous les
visiteurs de votre futur site pourront y accéder sans problème !

Quel sera l'aspect de votre site ?

Avant de commencer à écrire le code de votre site web, vous devez d'abord
le concevoir. Quelles informations choisissez-vous de mettre en avant,
quelles fontes (polices) et quelles couleurs utiliser ? Dans cet article, nous
vous proposons une méthode simple pour planifier au mieux le contenu et
le design de votre site.
Commençons par le commencement : planifier
Avant de faire quoi que ce soit, vous avez besoin d'idées. Qu'est-ce que
votre site web devrait faire ? Un site web peut pratiquement faire tout ce
que vous voulez mais pour votre premier essai, vous devriez garder les
choses simples. Nous allons commencer par créer une simple page web
avec un en-tête, une image, et quelques paragraphes.

Pour commencer, posez vous ces questions :

1. De quoi parle votre site web ? Aimez-vous les chiens, New York,
ou Pacman ?
2. Quelles informations allez-vous présenter sur le sujet ? Écrivez
un titre et quelques paragraphes, et trouvez une image que vous aimeriez
mettre sur votre page.
3. De quoi a l'air votre site web, dans des termes de plus haut niveau.
Quelle sera la couleur de l'arrière plan ? Quelle sorte de police est
appropriée : formelle, cartoon, gras et criard, subtile ?
Note : Des projets complexes nécessitent des lignes directrices (guidelines) détaillées
qui précisent tous les détails de couleurs, de polices, d'espacement entre les éléments
de la page, un style d'écriture adapté, et ainsi de suite. Ceci est parfois appelé un
guide de design ou une charte graphique, vous pouvez en voir un exemple avec les
lignes directrices utilisées pour Firefox OS.

Esquisse de votre concept

Ensuite, prenez un crayon et du papier et faite une esquisse de l'apparence
que vous souhaitez de votre site. Pour votre première et simple page web,
il n'y a pas beaucoup à esquisser, mais vous devriez prendre l'habitude de
le faire dès maintenant. Cela aide vraiment, et vous n'avez pas à être Van
Gogh !

Note: Même sur les sites web réels et complexes, l'équipe de design commence par
faire des esquisses sur papier, puis des maquettes numériques en utilisant un éditeur
graphique ou des technologies Web.
Les équipes Web intègrent souvent un designer graphique et un designer
d'expérience-utilisateur (UX). Les designers graphiques, bien sûr, regroupent les
visuels du site web. Les designers UX ont un rôle un peu plus abstrait qui consiste à
s'occuper de la manière dont les utilisateurs expérimenteront et interagiront avec le
site web.

Choix de vos composants

À ce stade, il est bon de commencer à regrouper le contenu qui apparaitra
peut-être sur votre page web.

Texte
 Vous devriez encore avoir vos paragraphes et votre titre puique vous y
avez songé un peu plus tôt. Gardez les à proximité.

Couleur du thème
Pour choisir une couleur, utilisez une palette de couleurs et trouvez une
couleur que vous aimez. Quand vous cliquez sur une couleur, vous verrez
un étrange code à six caractères comme #4BE8D3. Ceci est appelé un code
hexadécimal et il représente votre couleur. Copiez le code dans un endroit
sûr pour l'instant.

Images
Pour choisir une image, allez sur Google Images et cherchez une image qui
convient.
1. Quand vous avez trouvé l'image que vous voulez, cliquez sur l'image.
2. Appuyez sur le bouton Afficher l'image.
3. Sur la page suivante, faites un clic-droit sur l'image (Ctrl + clic sur
Mac), choisissez Enregistrer l'image sous, et choisissez un endroit sûr pour
sauvegarder votre image. Alternativement, copiez l'adresse de l'image
depuis la barre d'adresse de votre navigateur pour une utilisation
prochaine.
Note : La plupart des images sur le Web, dont celles dans Google Images, sont
protégées. Pour réduire votre probabilité de commettre une violation de droits
d'auteurs, vous pouvez utiliser le filtre de licence de Google. Tout simplement 1)
cliquez sur Outils de recherche, 2) ensuite sur Droits d'usage et 3)
sélectionnez Réutilisation et modification autorisée.
 Police
Pour choisir une police :

1. Allez sur Google Fonts et faites défiler la page jusqu'à en trouver une

que vous aimez. Vous pouvez aussi utiliser les contrôles sur la gauche pour
filtrer plus précisément les résultats.
2. Cliquez sur le bouton Add to collection à côté de la police que vous
voulez.
3. Cliquez sur le bouton Use dans le panneau en bas de la page.
4. Sur la page suivante, faites défiler la page jusqu'aux sections 3 et 4,
et copiez les lignes de code que Google vous donne dans votre éditeur de
texte pour les garder pour plus tard.
 
Gestion des fichiers

Un site web contient plusieurs types de fichiers (texte, code, styles, media,
etc.). Construire un site web revient à créer une structure où l'ensemble de
ces fichiers peuvent interagir les uns avec les autres. Dans cet article, nous
détaillerons cette problématique tout en expliquant comment donner une
structure cohérente à votre site web.
Où placer votre site web sur votre ordinateur ?
Lorsque vous travaillez sur votre site web sur votre propre ordinateur, tous
les fichiers liés au site devraient être présents dans un dossier dont le
contenu reflète la structure des fichiers sur le serveur. Ce dossier peut être
n'importe où sur votre ordinateur, l'idéal étant qu'il soit simple à retrouver,
 par exemple sur votre Bureau ou dans votre dossier personnel, voire à la
racine du disque dur.

1. Sélectionnez un endroit où enregistrer vos projets de sites web. À cet

emplacement, créez un dossier appelé projets-web (vous pouvez utiliser le
nom que vous souhaitez). C'est dans ce dossier que vous placerez vos
différents projets de sites web.
2. À l'intérieur de ce dossier, créez un autre dossier pour y enregistrer
votre premier site web. Vous pouvez appeler ce dossier site-test ou avec le
nom que vous voulez.
Un rapide aparté sur la casse et l'espacement
Vous aurez remarqué que les exemples utilisés pour les noms des dossiers
ou des fichiers étaient tous en minuscules et sans espace. Il est
généralement conseillé d'avoir des noms sans majuscule et sans espace
car :

1. De nombreux ordinateurs, notamment les serveurs web, sont

sensibles à la casse. Par exemple, si vous placez une image pour votre site
à l'emplacement site-test/MonImage.jpg et que, dans un autre fichier, vous
faites référence à test-site/monimage.jpg, cela ne fonctionnera pas.
2. Les navigateurs, les serveurs web et les différents langages de
programmation ne gèrent pas tous les espaces de la même façon. Par
exemple, si vous utilisez un espace dans le nom du fichier, certains
systèmes considèreront que le nom du fichier correspond en fait aux noms
de deux fichiers. Certains serveurs remplaceront les blancs dans le nom du
fichier avec « %20 » (le code de caractère pour représenter les espaces
dans les URI) : ce qui cassera tous vos liens. Pour cette raison, il est
préférable d'utiliser des tirets ou des tirets bas (underscores) : mon-
fichier.html ou mon_fichier.html.
Pour ces raisons, il est préférable d'écrire les noms des fichiers et dossiers
en minuscules et sans espace à moins que vous soyez sûr-e de ce que
vous faites. Cela vous permettra d'éviter certains problèmes.

Quelle structure mettre en place pour votre site web ?

Cela dit, regardons la structure que notre site devrait avoir. Il y a certains
éléments qu'on retrouve quasiment dans tous les sites web : un fichier
d'index HTML, des dossiers pour les images, les scripts et les feuilles de
styles. Nous allons donc commencer par créer :

1. index.html : Ce fichier contiendra généralement le contenu de votre

page d'accueil, c'est-à-dire le texte et les images que les gens verront
lorsqu'ils arriveront sur votre site. Dans votre explorateur de fichier ou dans
 votre éditeur de texte, créez un fichier nommé index.html puis enregistrez le
dans votre dossier site-test.
2. Un dossier images : Ce dossier contiendra les différentes images
utilisées pour votre site. Créez un répertoire nommé images à l'intérieur de
votre dossier site-test.
3. Un dossier styles : Ce dossier contiendra le code CSS utiliser pour
mettre en forme le contenu de votre site (par exemple pour définir les
couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier
appelé styles à l'intérieur de votre dossier site-test.
4. Un dossier scripts : Ce dossier contiendra le code JavaScript qui est
utilisé pour ajouter des fonctionnalités interactives sur votre site (par
exemple, des boutons qui permettent de charger des données lorsqu'on
clique dessus). Créez un dossier appelé scripts à l'intérieur de votre
dossier site-test.
Note : Sur Windows, vous aurez peut être des problèmes pour voir le nom entier des
fichiers. En effet, Windows possède une option, activée par défaut, qui Masque les
extensions pour les types de fichiers connus. Cette option peut être désactivée en
allant dans l'explorateur Windows puis dans l'option Options des dossiers..., il faut
alors décocher la case Masquer les extensions pour les types de fichier connus puis
valider en cliquant sur OK. Pour plus d'informations sur votre version de Windows,
n'hésitez pas à utiliser votre moteur de recherche favori !

Les chemins de fichiers

Pour que les fichiers puissent communiquer et s'utiliser les uns les autres, il
faut fournir un chemin vers les fichiers qu'on souhaite utiliser. Nous allons
illustrer cela avec un peu de HTML que nous allons écrire
dans index.html pour que la page affiche l'image qu'on a choisie dans
l'article « Quel sera l'aspect de votre site web ? ».
1. Copiez l'image que vous avez choisie dans votre répertoire images.
2. Ouvrez le fichier index.html avec votre éditeur de texte puis insérez le
code suivant. Ne vous préoccupez pas trop du contenu pour le moment,
nous verrons ce que ça signifie par la suite.
3. <!DOCTYPE html>
4. <html>
5. <head>
6. <meta charset="utf-8">
7. <title>Ma page de test</title>
8. </head>
9. <body>
10. <img src="" alt="Mon image de test">
11. </body>
</html>
12. La ligne qui contient <img src="" alt="Mon image de test"> correspond au
code HTML qui insère une image dans la page. Pour que cela fonctionne, il
faut que nous indiquions où l'image se situe dans le code HTML. Cette
image est à l'intérieur du dossier images et ce dossier se situe dans le même
dossier qu'index.html. Pour parcourir l'arborescence des fichiers
 depuis index.html jusqu'à l'image, le chemin qu'on utilisera sera images/votre-
fichier-image. Par exemple, si vous avez une image nommée firefox-
icon.png, le chemin à utiliser sera images/firefox-icon.png.
13. Insérez le chemin vers le fichier image dans le code HTML, entre les
guillemets dans src="".
14. Sauvegardez votre fichier HTML puis chargez la page dans votre
navigateur (il suffit de double-cliquer sur le fichier dans votre explorateur).
Vous devriez obtenir une nouvelle page web, qui affiche votre image !

Quelques règles générales à propos des chemins de fichier :

 Pour utiliser un fichier qui est dans le même répertoire que le fichier
HTML, il suffit d'utiliser le nom du fichier pour le chemin (par exemple mon-
image.jpg).
 Pour faire référence à un fichier dans un sous répertoire, on écrira le
nom du répertoire, suivi d'une barre oblique (slash) suivi du nom du fichier.
Par exemple : mon-sous-repertoire/mon-image.jpg.
 Pour faire référence à un fichier qui se situe dans le
répertoire parent par rapport au fichier HTML, il faut écrire deux points. Par
exemple, si votre fichier index.html se situe dans un sous-dossier de site-
test et que mon-image.jpg se situe à l'intérieur de site-test, vous pouvez faire
référence à votre image mon-image.jpg depuis index.html en écrivant ../mon-
image.jpg.
 Ces différentes règles peuvent être combinées autant que nécessaire
: par exemple ../sous-dossier/autre-sous-dossier/mon-image.jpg .
Pour le moment, c'est tout ce qu'il y a à savoir.

Note : Le système de fichiers Windows utilise des barres obliques inversées

(backslash: « \ ») pour organiser les fichiers au lieu d'utiliser des barres obliques (slash
: « / ») avec par exemple C:\windows. Cela n'a pas d'importance pour développer un
site web, même sur Windows, les fichiers Web utilisent des barres obliques simples
(« / ») et ce sont toujours elles qu'il faudra utiliser.

Autre chose ?
C'est tout ce qu'il y a à faire pour le moment en ce qui concerne les fichiers.
Votre arborescence de fichier devrait ressembler à cela :
Les bases de HTML
Hypertext Markup Language (HTML) correspond au code que vous
utiliserez pour structurer les differents contenus en ligne. Il vous permet de
créer des paragraphes, des images, des tableaux et bien d'autres choses
encore. Cet article vous donnera les bases du langage sans pour autant
vous faire crouler sous le poids d'informations inutiles.
Qu'est-ce que HTML ?
HTML n'est pas, à proprement parler, un langage de programmation. C'est
un langage de balisesutilisé pour fournir la structure et le sens du contenu
qu'on souhaite avoir sur un site web. Il se compose de
différents éléments qu'on assemble autour des différentes parties du
contenu pour lui fournir un sens. Les balises qui entourent un mot ou une
image peuvent former un lien hypertexte, mettre le texte en italique, etc.
Par exemple, avec la ligne de contenu suivante :
Mon chat est fâché
 Si vous souhaitez indiquer que ce texte fait partie d'un paragraphe, on le
placera dans un élément de paragraphe (<p>) :
<p>Mon chat est fâché</p>

Anatomie d'un élément HTML

Regardons de plus près cet élément paragraphe :

Les composants principaux de notre élément sont :

1. La balise ouvrante : celle-ci se compose du nom de l'élément (ici « p

»), entre deux chevrons. Cela indique le début de l'élément, où l'endroit à
partir duquel celui-ci prend effet. Pour notre exemple, cela indique le début
du paragraphe.
2. La balise fermante : ici on a également des chevrons et le nom de
l'élément, auxquels on ajoute un barre oblique avant le nom de l'élément.
Cela indique la fin de l'élément. Pour notre exemple, cela indique la fin du
paragraphe.
3. Le contenu : C'est le contenu de l'élément, ici c'est simplement du
texte.
4. L'élément : Il est composé de la balise ouvrante, de la balise
fermante et du contenu.
Les éléments peuvent aussi avoir des « attributs », ce qui ressemble à :

Les attributs contiennent des informations supplémentaires qui portent sur

l'élément et qu'on ne souhaite pas afficher avec le contenu. Dans cet
exemple, l'attribut class permet d'utiliser un nom pour identifier l'élément et
ce nom pourra être utilisé plus tard pour la mise en forme ou autre chose.
Un attribut doit toujours avoir :

1. Un espace entre l'attribut et le nom de l'élément ou l'attribut

précédent (s'il y a plusieurs attributs)
2. Un nom (le nom de l'attribut), suivi d'un signe égal « = »
3. Des quotes (") pour encadrer la valeur de l'attribut
Imbriquer des éléments
Vous pouvez placer des éléments au sein d'autres éléments, c'est ce qu'on
appelle l'imbrication. Par exemple, si vous souhaitez montrer que votre
chat est vraiment fâché, vous pouvez placer le mot « vraiment » dans dans
un élement <strong>, ce qui signifie que le mot sera mis en avant :
<p>Mon chat est <strong>vraiment</strong> fâché.</p>
Toutefois il faut faire attention à ce que les éléments soient bien imbriqués
les uns dans les autres. Dans l'exemple précédent, on ouvre l'élément <p>,
puis l'élément <strong>. Plus loin, on ferme l'élément <strong> puis on ferme
l'élement <p>. Si on utilise le code suivant, ce sera incorrect :
<p>Mon chat est <strong>vraiment fâché.</p></strong>
Les éléments doivent être ouverts et fermés correctement, s'ils se
chevauchent, le navigateur essaiera de choisir la meilleure option, qui ne
sera peut être pas le résultat attendu. En un mot, mieux vaut imbriquer les
éléments correctement pour éviter les déconvenues.

Les éléments vides

Certains éléments n'ont pas de contenu. Ces éléments sont
appelés éléments vides. Si on considère l'élément <img> présent dans notre
fichier HTML :
<img src="images/firefox-icon.png" alt="Mon image test">
Cet élément contient deux attributs mais il n'y a pas de balise
fermante </img>  ni de contenu interne. En effet, l'élément image
n'embarque pas de contenu, son but est d'intégrer une image dans la page
HTML, à l'endroit où l'élément est placé.

Anatomie d'un document HTML

Pour l'instant nous avons vu quelques éléments HTML de base. Pris
séparément, ils ne sont pas très utiles. Regardons comment les combiner
pour créer une page HTML complète. Nous allons repartir de l'exemple
contenu dans le fichier index.html (qu'on a créé dans l'article Gérer les
fichiers) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ma page de test</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="Mon image de test">
</body>
</html>
Cet exemple contient :
 <!DOCTYPE html> — le doctype. Au début de HTML, dans les années
1991-1992, les doctypes étaient utilisés pour faire référence à des
ensembles de règles qu'on pouvait utiliser pour dire qu'un document était
du HTML « valide » et détecter les erreurs de balisage. Cependant, ceux-ci
ne sont plus utilisés aujourd'hui et sont juste présents pour s'assurer que la
page puisse fonctionner y compris sur les anciens navigateurs. Pour le
moment, c'est tout ce qu'il y a à savoir à propos des doctypes.
 <html></html> — l'élément <html>. Cet élément encadre tout le contenu
de la page. Cet élément est parfois appelé l'élément racine.
 <head></head> — l'élément <head>. Cet élément est utilisé comme un
container pour toutes les choses qui font partie de la page HTML mais qui
ne sont pas du contenu affiché. C'est dans cet élément qu'on mettra des
mots-clés, une description de la page qui apparaîtra sur les moteurs de
recherche, les liens vers les fichiers CSS à utiliser pour la mise en forme,
les déclarations des jeux de caractères (character sets) à utiliser et ainsi de
suite.
 <body></body> — l'élément <body>. Cet élément est celui qui
contient tout le contenu que vous souhaitez afficher pour qu'il soit vu par les
visiteurs : cela peut être du texte, des images, des vidéos, des jeux, etc.
 <meta charset="utf-8"> — Cet élément définit le jeu de caractères qui
devrait être utilisé pour le document et indique que c'est utf-8. utf-8
regroupe l'ensemble des caractères connus utilisés dans les différents
langages humains. Généralement utf-8 permet de gérer n'importe quel
texte que vous pourriez utiliser sur la page. C'est pour cette raison qu'on
utilise ce jeu de caractères car il permet de couvrir l'extrême majorité des
cas.
 <title></title> — Cet élément définit le titre de votre page. C'est ce
titre qui apparaîtra sur l'onglet lorsque la page sera chargée. C'est
également ce titre qui sera utilisé pour décrire la page lorsque vous la
placez dans vos marques-pages.
Images
Regardons à nouveau l'élément image :

<img src="images/firefox-icon.png" alt="Mon image de test">

Comme on l'a vu auparavant, cet élément permet d'intégrer une image
dans la page, à l'endroit où l'élément apparaît. L'image utilisée est définie
via l'attribut src (pour source) qui contient le chemin vers le fichier de
l'image.
Nous avons aussi utilisé l'attribut alt (pour alternatif) qui contient un texte
qui permet de décrire l'image et qui peut être utilisé par les utilisateurs qui
ne peuvent pas voir l'image :
1. car ils sont mal-voyants. Les utilisateurs qui sont handicapés
visuellement utilisent généralement des lecteurs d'écrans qui lisent le texte
de cet attribut pour que l'utilisateur puisse comprendre de quoi il s'agit.
2. car quelque chose s'est mal passé et que l'image n'a pu être affichée.
Par exemple, cela peut se produire si le chemin vers l'image est incorrect :
essayez de modifier le chemin contenu dans votre attribut src pour voir ce
que ça donne. Si le chemin est bien incorrect, vous devriez obtenir quelque
chose comme :

Le point important qu'il faut retenir est que l'attribut est utilisé
pour décrire l'image. Le texte contenu dans cet attribut doit fournir
suffisamment d'informations pour que le lecteur puisse savoir ce que
l'image représente. Par exemple, le texte que j'utilise « Mon image de test »
n'est pas bon du tout. Une meilleure solution serait de mettre « Le logo
Firefox, qui représente un renard avec une queue de feu autour de la Terre
».
En fonction de votre image, améliorez le texte alternatif pour qu'il
décrive l'image correctement.
Note : Pour plus d'informations sur l'accessibilité, vous pouvez utiliser la
section Accessibilité de MDN.

Baliser le texte
Dans cette section, nous verrons quelques-uns des éléments HTML de
base pour baliser le texte.

Les titres
Les éléments de titre permette de définir certains textes comme des titres
ou sous-titres pour le contenu. D'une certaine façon, ceux-ci fonctionnent
comme pour un livre : on a le titre du livre (le plus important) puis les titres
des différents chapitres et parfois des sous-titres au sein de ces chapitres.
HTML contient des éléments pour 6 niveaux de titres : <h1>–<h6>. La plupart
du temps, 3-4 niveaux suffisent amplement :
<h1>Mon titre principal</h1>
<h2>Mon titre de section</h2>
<h3>Mon sous-titre</h3>
<h4>Mon sous-sous-titre</h4>
Vous pouvez ajouter un titre adapté à votre page avec un de ces éléments.
Vous pouvez le placer au dessus de l'élément <img> dans votre document
HTML.

Les paragraphes
Comme expliqué auparavant, les éléments <p> sont utilisés pour contenir
des paragraphes de texte. Vous les utiliserez fréquemment pour placer du
texte sur une page :
<p>Voici un paragraphe</p>
 Ici, vous pouvez ajouter le texte que vous avez choisi lorsque vous
avez décidé à quoi ressemblera votre site web. Vous pouvez placer
votre texte dans un ou plusieurs paragraphes, directement sous
l'élément <img>.

Les listes
Une grande partie du contenu sur le Web est présente sous forme de listes.
HTML a donc des éléments utilisés pour représenter ces listes. Le balisage
des listes contient toujours au moins deux éléments. Les types de listes
utilisés fréquemment sont les listes ordonnées et les listes non-ordonnées :

1. Les listes non-ordonnées sont des listes pour lesquelles l'ordre des

éléments n'a pas d'importance (par exemple une liste de courses). La
balise utilisée pour ces listes est l'élément <ul> (ul signifie unordered list qui
signifie liste non-ordonnée en anglais)
2. Les listes ordonnées sont des listes pour lesquelles l'ordre des
éléments est important (par exemple une recette). La balise utilisée pour
ces listes est l'élément  <ol> (ol signifie ordered list qui signifie liste
ordonnée en anglais)
Chaque élément d'une liste est balisé avec un élément <li>.
Par exemple, si on souhaite modifier un paragraphe en une liste :

<p>Mozilla est une communauté mondiale composée de technologues, penseurs,

constructeurs qui travaillent ensemble... </p>
On pourrait faire :

<p>Mozilla est une communauté mondiale composée de </p>

<ul>
<li>technologues</li>
<li>penseurs</li>
<li>constructeurs</li>
</ul>

<p>qui travaillent ensemble...</p>

Essayez d'ajouter une liste ordonnée ou non-ordonnée sur votre page.
Vous pouvez l'ajouter après l'image.
Les liens
Les liens sont très importants, ce sont eux qui font que le web est
une toile sur laquelle on peut naviguer de page en page. Pour créer un
lien, il suffit d'utiliser l'élément <a> (le a est un raccourci pour « ancre »).
Pour transformer du texte en un lien, suivez ces étapes :
1. Choisissez un texte (ici nous travaillerons avec le texte « Manifeste
Mozilla ».
2. Encadrez le texte dans un élément <a> :
 <a>Manifeste Mozilla</a>
3. Fournissez un attribut href pour l'élément <a>, de cette façon :
<a href="">Manifeste Mozilla</a>
4. Dans cet attribut, ajoutez le lien vers le site vers lequel vous voulez
diriger les utilisateurs :
<a href="https://www.mozilla.org/fr/about/manifesto/">Manifeste Mozilla</a>
Attention à ne pas oublier la partie avec https:// ou http:// qui représente
le protocoleutilisé, au début de l'adresse. Une fois que vous avez créé un
lien, testez votre page et cliquez dessus pour vous assurez qu'il fonctionne
correctement.
href peut sembler un peu étrange à première vue. Une explication sur l'origine du
nom pourra vous aider à mieux vous en souvenir : href correspond
à hypertextreference en anglais, ce qui signifie « référence hypertexte » en français.

Si ce n'est pas déjà fait, vous pouvez ajouter un lien sur votre page
grâce à ces informations.
Conclusion
Si vous avez suivi les différentes instructions de cette page, vous devriez
obtenir une page qui ressemble à celle-ci (vous pouvez également la voir
ici) :
Les bases de CSS
 Les Cascading Stylesheets, souvent désignées par l'acronyme CSS et
qu'on peut nommer en français par « feuilles de style en cascade »,
permettent d'ajouter du style à votre site web. Les règles CSS permettent
de définir, par exemple :
 la couleur d'un texte ;
 L'endroit où le contenu devrait être affiché sur l'écran ;
 quelles devront être les images de fond ou les couleurs utilisées pour
décorer votre site web.
Cet article vous apprendra tout ce dont vous avez besoin pour commencer.
Qu'est-ce que CSS ?
De la même façon que HTML, CSS n'est pas vraiment un langage de
programmation. C'est un langage de feuille de style, c'est-à-dire qu'il
permet d'appliquer des styles sur différents éléments sélectionnés dans un
document HTML. Par exemple, on peut sélectionner tous les éléments
d'une page HTML qui sont paragraphes et afficher leurs textes en rouge
avec ce code CSS :
p {
color: red;
}
Faisons un essai : copiez ces trois lignes de code CSS dans un nouveau
fichier dans votre éditeur de texte, puis sauvegardez le fichier sous le
nom style.css dans votre répertoire styles.
Pour que cela fonctionne, il faut appliquer le CSS au document HTML,
sinon la mise en forme décrite dans le fichier CSS n'affectera pas
l'affichage de la page HTML dans la navigateur. Si vous n'avez pas suivi
toutes les étapes pour arriver ici, vous pouvez lire l'article gérer les
fichierset les bases de HTML pour savoir par où commencer.
1. Ouvrez votre fichier index.html et copiez la ligne suivante quelque part
au sein de l'élément head (c'est-à-dire entre les balises <head> et </head>) :
<link href="styles/style.css" rel="stylesheet" type="text/css">
2. Sauvegardez index.html puis chargez-le dans votre navigateur. Vous
devriez obtenir quelque chose comme :
Si le texte de votre paragraphe s'affiche en rouge, félicitations ! Vous venez
d'écrire votre premier CSS qui fonctionne !

Anatomie d'une règle CSS

 Regardons un peu plus en détails ce que nous avons écrit en CSS :

Cette structure s'appelle un ensemble de règles (généralement, on

appelle ça une « règle »). Les différentes parties se nomment :
Sélecteur
C'est le nom de l'élément HTML situé au début de l'ensemble de
règles. Il permet de sélectionner les éléments sur lesquels appliquer
le style souhaité (en l'occurence, les éléments p). Pour mettre en
forme un élément différent, il suffit de changer le sélecteur.
Déclaration
C'est une règle simple comme color: red; qui détermine
les propriétés de l'élément que l'on veut mettre en forme.
Propriétés
Les différentes façons dont on peut mettre en forme un élément
HTML (dans ce cas, colorest une propriété des éléments p). En CSS,
vous choisissez les différentes propriétés que vous voulez utiliser
dans une règle CSS.
Valeur de la propriété
À droite de la propriété, après les deux points, on a la valeur de la
propriété. Celle-ci permet de choisir une mise en forme parmi
d'autres pour une propriété donnée (par exemple, il y a d'autres
couleur que red pour la propriété color).
Les autres éléments importants de la syntaxe sont :

 Chaque ensemble de règles, à l'exception du sélecteur, doit être

entre accolades ({}).
 Pour chaque déclaration, il faut utiliser deux points (:) pour séparer la
propriété de ses valeurs.
 Pour chaque ensemble de règles, il faut utiliser un point-virgule (;)
pour séparer les déclarations entre elles.
Ainsi, si on veut modifier plusieurs propriétés d'un coup, on peut utiliser
plusieurs déclarations dans une seule règle en les séparant par des points-
virgules :

p {
color: red;
width: 500px;
border: 1px solid black;
}
Sélectionner plusieurs éléments
Il est aussi possible de sélectionner plusieurs types d'éléments pour tous
leur appliquer une même règle. Il suffit de placer plusieurs sélecteurs,
séparés par des virgules. Par exemple :

p,li,h1 {
color: red;
}

Les différents types de sélecteurs

Il y a différents types de sélecteurs. Dans les exemples précédents, nous
n'avons vu que les sélecteurs d'élément qui permettent de sélectionner
les éléments HTML d'un type donné dans un document HTML. Mais ce
n'est pas tout, il est possible de faire des sélections plus spécifiques. Voici
quelques-uns des types de sélecteur les plus fréquents :
Nom du
Ce qu'il sélectionne Exemple
sélecteur
Sélecteur
d'élément
(parfois appelé «
Tous les éléments HTML p
sélecteur de sélectionne tous les <p>
d'un type donné.
balise » ou «
sélecteur de
type »)

L'élément d'une page qui

possède l'ID fourni (pour #mon-id
une page HTML donné, sélectionne <p id="mon-
Sélecteur d'ID
on ne peut avoir qu'un id"> ou <a id="mon-id">
seul élément pour un ID
donné).

Les éléments d'une page

qui sont de la classe
.ma-classe
donnée (pour une page
Sélecteur de sélectionne <p class="ma-
donnée, il est possible
classe classe">et <a class="ma-
d'avoir plusieurs classe">
éléments qui partagent
une même classe).

Sélecteur Les éléments de la page img[src]

d'attribut qui possèdent l'attribut sélectionne <img
donné. src="monimage.png">mais
 Nom du
Ce qu'il sélectionne Exemple
sélecteur
pas <img>

Les éléments donnés a:hover

mais uniquement dans sélectionne <a> mais
Sélecteur de uniquement quand le
un certain état (par
pseudo-classe pointeur de la souris est au-
exemple quand on passe
la souris dessus). dessus du lien.
Il existe plein d'autres sélecteurs, pour les découvrir tous, vous pouvez lire
notre guide sur les sélecteurs.
Les polices (fontes) et le texte
Maintenant que nous avons vu quelques bases de CSS, ajoutons quelques
règles et informations à notre fichier style.css pour que notre exemple soit
réussi. Tout d'abord, améliorons les polices et le texte.
Note : Vous verrez qu'il y a également un commentaire qui explique ce que « px »
signifie. Dans un document CSS, tout ce qui est placé entre /* et */ est un
commentaire CSS : le navigateur l'ignore. C'est dans les commentaires qu'on peut
écrire des notes pour mieux expliquer le but de ce qu'on fait (par exemple cela pourra
vous aider quand vous relirez votre code dans quelques mois).

1. Pour commencer, revenez quelques étapes en arrière et récupérez

le résultat de Google Fonts enregistré quelque part. Ensuite, ajoutez
l'élément <link ... > quelque part au sein de head dans le
fichier index.html (c'est-à-dire quelque part entre les balises <head> et </head>).
Ça devrait ressembler à :
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'
type='text/css'>
2. Ensuite, supprimez la règle existante dans votre fichier style.css.
Cette règle était pratique pour tester mais afficher du texte en rouge n'est
pas la meilleure des mises en forme.
3. Ajoutez les lignes suivantes à leur place, en remplaçant la ligne
avec modèle avec la ligne fournie par Google Fonts qui contient font-
family (font-family représente la (ou les) police(s) qu'on veut utiliser pour le
texte). Ce premier ensemble de règles définit une police de base et sa taille
pour toute la page (<html> est l'élément parent de tous les éléments de la
page, tous les éléments contenus dans la page hériteront donc de la
même font-size et font-family) :
4. html {
5. font-size: 10px; /* px signifie 'pixels': la taille de base pour la
police est désormais 10 pixels de haut */
6. font-family: modèle: cela devrait être le reste du résultat obtenu à
partir de Google fonts
}
7. Ensuite, fixons les tailles des différents textes contenus dans le corps
du HTML (<h1>, <li>, et <p>). Nous allons également centrer le texte du titre
et donner une taille de ligne et un espacement de caractère entre les lettres
pour que le contenu du corps (body) du document soit plus lisible :
8. h1 {
9. font-size: 60px;
10. text-align: center;
11. }
12.
13. p, li {
14. font-size: 16px;
15. line-height: 2;
16. letter-spacing: 1px;
}
Vous pouvez ajuster ces valeurs en px comme vous voulez pour que le
style obtenu soit celui que vous souhaitez. Vous devriez obtenir quelque
chose comme ça :
 Boîtes, boîtes, encore et toujours des boîtes
Vous verrez rapidement qu'en CSS, tout tourne autour de boîtes : définir
leurs tailles, leurs couleurs, leurs positions, etc. La plupart des éléments
HTML d'une page peuvent être vues comme des boîtes placées sur les
autres.

C'est pour cette raison que l'architecture de CSS est principalement basée
sur un modèle de boîtes. Chacun de ces blocs prend un certain espace sur
la page, de cette façon :
 padding, l'espace autour, proche du contenu (par exemple, l'espace
autour du texte d'un paragraphe) (en français, on pourrait traduire cela par
du « rembourrage » mais le terme padding étant communément utilisé
lorsqu'on parle de CSS, on continuera à utiliser ce terme)
 border, la ligne qui est juste autour du padding (en français cela
correspond à la bordure)
 margin, l'espace extérieur, autour de l'élément (en français cela
correspond à la marge)
 Dans cette section, nous utiliserons :

 width (lalargeur de l'élément)
 background-color, la couleur derrière le contenu de l'élément et
son padding
 color, la couleur du contenu de l'élément (généralement du texte)
 text-shadow, affiche une ombre portée sur le texte à l'intérieur de
l'élément
 display, définit le mode d'affichage d'un élément (on ne s'en occupera
pas cette propriété pour le moment)
Allons-y : ajoutons un peu plus de CSS à notre page ! Continuez d'ajouter
ces nouvelles règles à la suite des autres. N'ayez pas peur d'expérimenter
et de tester différentes valeurs pour voir ce qu'elles font.

Changer la couleur de la page

html {
background-color: #00539F;
}
Cette règle permet de définir la couleur utilisée en arrière plan pour toute la
page. Vous pouvez ici utiliser la valeur que vous aviez choisie lors de la
conception de votre site.
 Comment mettre en forme le corps de la page (<body>)
body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
Occupons-nous de l'élément body. Cet ensemble de règles contient
plusieurs déclarations, étudions les une par une :
 width: 600px; — cette déclaration impose une largeur de 600 pixels
pour le corps de la page.
 margin: 0 auto; — Ici on a deux valeurs pour la propriété. Lorsqu'on
utilise deux valeurs sur une propriété comme margin ou padding, la première
valeur est utilisée pour le haut et le bas de l'élémént (dans ce cas : 0) et la
seconde valeur est utilisée pour les côtés gauche et droit (la
valeur auto qu'on utilise ici est une valeur spéciale qui divise l'espace
horizontal disponible en parts égales entre la gauche et la droite. Il est
aussi possible d'utiliser un, trois ou quatre valeurs, pour plus d'informations,
voir cet article qui explique comment cela fonctionne.
 background-color: #FF9500; — comme on l'a vu auparavant, cela permet
de définir la couleur utilisée en arrière-plan. Ce code couleur correspond à
un rouge orangé qui sera utilisé pour le corps de la page, cela permettra
d'avoir un contraste avec le bleu foncé utilisé pour l'élément html. N'hésitez
pas à modifier cette valeur pour voir ce que ça donne, vous pouvez
utiliser white ou une autre valeur si vous préférez.
 padding: 0 20px 20px 20px; — ici on a quatre valeurs pour
le padding afin de créer un peu d'espace autour du contenu. On n'a donc
aucun espace pour le padding en haut du corps de la page, on a 20 pixels
à gauche, en bas et à droite. Dans l'ordre, les valeurs correspondent au
haut, à la droite, au bas et à la gauche.
 border: 5px solid black; — cette déclaration permet d'utiliser une
bordure pleine, large de 5 pixels pour entourer tout le corps de la page.

Positionner le titre et le mettre en forme

h1 {
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px black;
}
Vous avez du remarquer qu'il y a un espace horrible en haut du corps de la
page. Cela est dû au fait que les navigateurs appliquent un style par
défaut à l'élément <h1> (entre autres), même quand vous n'avez défini
aucune règle CSS ! À première vue, on pourrait penser que c'est une
mauvaise idée et que ce n'est pas au navigateur de décider de la mise en
 forme. Toutefois, il est préférable que n'importe quelle page, même celles
qui n'utilisent pas de CSS, puissent être lisibles et que le lecteur puisse
distinguer un titre d'un paragraphe. Pour se débarrasser de cet espace, on
« surcharge » le style par défaut avec une marge nulle grâce à margin: 0;.
Ensuite, nous ajoutons 20 pixels de padding en haut et en bas du titre et on
prend la même couleur pour la police que celle utilisée pour l'arrière-plan
de html.
Une propriété intéressante qu'on a utilisé ici est text-shadow. Cette propriété
permet d'applique une ombre au contenu de l'élément. La déclaration utilise
quatre valeurs :
 La première correspond au décalage horizontal, exprimé en pixels,
de l'ombre par rapport au texte. Autrement dit, plus la valeur est élevée,
plus l'ombre porte loin. Une valeur négative déplace l'ombre vers la gauche.
 La deuxième valeur correspond au décalage vertical entre l'ombre et
le texte. Autrement dit, plus la valeur est élevée, plus l'ombre va vers le
bas. Une valeur négative déplace l'ombre vers le haut.
 La troisième valeur correspond au rayon de flou pour l'ombre,
exprimé en pixel. Autrement dit, plus la valeur est élevée, plus l'ombre sera
floue.
 La quatrième valeur définit la couleur utilisée pour l'ombre.
Là aussi, n'hésitez pas à expérimenter et à essayer différentes valeurs pour
voir ce que ça donne.

Centrer l'image
img {
display: block;
margin: 0 auto;
}
Dernière chose : on va centrer l'image pour que ce soit plus joli. On pourrait
utilise margin: 0 auto comme on l'a fait avant mais on a besoin d'autre chose.
L'élément body est un élément de bloc, cela signifie qu'il prend de l'espace
et qu'on peut lui appliquer des marges et d'autres valeur pour l'espacement.
En revanche, les images sont des éléments inline (ce qu'on pourrait
traduire par « en ligne »), ce qui signifie qu'on ne peut pas leur appliquer
ces valeurs d'espacement. Pour pouvoir appliquer des marges sur l'image
comme pour un bloc, on utilise display: block; pour que l'image se comporte
comme un élément de bloc.
Note : C'est tout à fait normal si vous ne comprenez pas complètement display:
block; et les différences entre bloc et inline. Ça viendra plus tard, une fois que vous
aurez plus utilisé CSS. Les différentes valeurs qu'on peut utiliser pour display sont
expliquées sur la page de référence de la propriété display.

Conclusion
Si vous avez suivi les différentes étapes de cet article, vous devriez obtenir
une page qui ressemble à celle-ci (vous pouvez aussi voir notre version
finale ici) :
 Les bases de JavaScript
JavaScript est un langage de script qu'on peut utiliser afin d'enrichir les
fonctionnalités d'un site web. Cela peut correspondre, entre autres, aux
actions entrainées par l'appui sur une touche dans un jeu vidéo, ou les
effets de style dynamique lors du remplissage d'un formulaire.

Cet article vous offrira un aperçu des possibilités offertes par ce puissant

langage et vous montrera bien sûr comment commencer à l'utiliser.
Qu'est-ce que JavaScript ?
JavaScript (souvent abrégé en « JS ») est un langage de programmation
qui peut interagir avec un document HTML pour le rendre dynamique. Ce
langage a été inventé par Brendan Eich qui est le co-fondateur du projet
Mozilla, de la fondation Mozilla et de la corporation Mozilla.
JavaScript peut être utilisé pour créer de nombreuses fonctionnalités. Pour
commencer, il peut être utilisé pour réaliser des galeries d'images, des
transformations pour l'affichage de la page, des réactions à des clics des
utilisateurs. Utilisé de façon avancée, JavaScript vous permettra même de
créer des jeux vidéo, des graphiques animés en 2D ou en 3D, des
applications qui utilisent des bases de données et plus encore !

JavaScript est plutôt compact et très flexible. Les développeurs ont écrit de
nombreux outils qui reposent sur JavaScript afin de pouvoir exploiter des
fonctionnalités supplémentaires  très simplement. Parmi ces outils, on
retrouve :

 Les Application Programming Interfaces (plus communément

appelées API) sont intégrées aux navigateurs web et permettent de
manipuler le HTML, de définir les styles CSS, de manipuler un flux vidéo
depuis la webcam de l'utilisateur, de générer des graphiques en 3D, etc.
 Les API « tierces » développées en dehors des navigateurs
permettent aux développeurs d'intégrer des fonctionnalités d'autres sites
dans leur site (par exemple de Twitter ou Facebook).
 Les frameworks et bibliothèques tierces qui peuvent être utilisées
avec votre code permettent de rapidement mettre en œuvre des sites et
des applications.

L'exemple du « hello world »

La section précédente semble vraiment excitante, JavaScript est l'une des
technologies web les plus puissantes et créatives. Une fois que vous
commencerez à être autonome en JavaScript, vous verrez une nouvelle
dimension s'ouvrir pour vos sites web.
 Cependant, JavaScript est plus complexe et moins accessible que HTML
ou CSS. Il faudra progresser, étape par étape, en commençant par des
petits projets. Pour commencer, nous allons utiliser JavaScript de façon
vraiment basique pour affiche « Hello world!», pouvant se traduire par «
Coucou le monde ! » (c'est une « tradition » que de commencer à
développer avec un langage en écrivant un programme qui affiche « Hello
world », voir d'autres exemples sur Wikipédia).
Important : Si vous rejoignez cette série d'articles en cours de route, téléchargez cet
exemple de code pour l'utiliser comme point de départ.

1. Pour commencer, dans le dossier scripts, créez un fichier

appelé main.js.
2. Ensuite, dans votre fichier index.html, ajoutez l'élément suivant sur
une nouvelle ligne avant la balise fermante </body> :
<script src="scripts/main.js"></script>
3. Cet élément a le même rôle que l'élément <link> pour CSS : il permet
d'utiliser le fichier qui contient le code JavaScript pour l'appliquer sur la
page afin qu'il puisse interagir avec le HTML, le CSS et le reste de la page.
4. Dans le fichier main.js, ajoutez les lignes suivantes :
5. let monTitre = document.querySelector('h1');
monTitre.textContent = 'Hello world!';
6. Assurez-vous que les fichiers HTML et JavaScript soient enregistrés
puis chargez index.html dans votre navigateur. Vous devriez obtenir quelque
chose comme :

Note : Nous avons mis l'élément <script> presque à la fin du fichier HTML, plus

précisément à la fin de l'élément body. Pourquoi ? Cela permet en fait que JavaScript
soit chargé après le reste du HTML et que l'utilisateur ait une page fonctionnelle
même si le JavaScript n'a pas encore été chargé. Si l'élément script avait été placé
avant et que le code JavaScript devait interagir avec le contenu HTML à venir, cela ne
fonctionnerait pas et l'utilisateur verrait une page cassée.

Que s'est-il passé ?

Le texte de votre titre a été changé en « Hello world! » en utilisant
JavaScript. Pour cela, on a utilise une fonction appelée querySelector() qui
fait référence à l'élément de titre et qui le stocke dans une variable
appelée monTitre. C'est assez proche de ce qu'on a fait en CSS avec les
sélecteurs. Lorsqu'on souhaite manipuler un élément, il faut d'abord le
sélectionner.
Après, on modifie la valeur de la propriété textContent de la variable monTitre,
cette propriété représente le contenu de l'élément. Dans notre exemple, on
modifie le contenu de l'élément avec "Hello world!".
Rapide introduction aux bases de JavaScript
Nous allons explorer les fonctionnalités de base de JavaScript pour que
vous puissiez mieux comprendre comment il fonctionne. Ces fonctionnalités
sont communes à la plupart des langages de programmation, si vous
comprenez ces éléments en JavaScript, vous serez plus à l'aise pour
découvrir un autre langage et développer avec.

Important : Tout au long de cet article, vous pouvez saisir les lignes de code dans
votre console JavaScript pour voir ce qui se passe. Pour plus de détails sur les
consoles JavaScript, vous pouvez lire Découvrir les outils de développement présents
dans le navigateur.

Variables
Les variables sont des conteneurs dans lesquels on peut stocker des
variables. Pour commencer, il faut déclarer une variable avec le mot-
clé let suivi du nom qu'on souhaite utiliser pour la variable :
let maVariable;
Note : En JavaScript, les lignes de code doivent terminer par un point-virgule pour
indiquer que c'est la fin de la ligne. Si vous n'ajoutez pas les points-virgules en fin de
ligne, vous pourrez avoir des comportements inattendus, voire des erreurs.

Note : Vous pouvez utiliser (quasiment) n'importe quel nom pour nommer une
variable. Il y a quelques restrictions sur ces noms qui sont expliquées dans cet article.

Note : JavaScript est sensible à la casse, cela signifie que maVariable sera considéré

comme un nom différent de mavariable. Si vous avez des problèmes sur les noms de
variables dans votre code, vérifiez la casse que vous utilisez !

Note : Vous verrez parfois des variables déclarées avec le mot-clé var. Avec les
versions récentes de JavaScript, il est conseillé d'utiliser le mot-clé let. Si votre code
doit supporter des navigateurs anciens (IE < 11), let n'étant pas supporté, vous
devrez utiliser var.

Une fois que vous avez déclaré une variable, vous pouvez lui donner une
valeur :
maVariable = 'Bob';
Pour utiliser la valeur plus loin dans le code, il suffit de faire appel à la
variable en utilisant son nom :

maVariable;
Lorsque vous créez une variable et que vous lui donnez une valeur, vous
pouvez le faire sur une seule ligne :

let maVariable = 'Bob';

Une fois qu'on a donné une valeur à une variable, on peut la changer plus
loin :

let maVariable = 'Bob';

maVariable = 'Patrick';
Les variables sont réparties en différents types de données :
Variabl
Explication Exemple
e
Une chaîne de texte.
Pour déclarer une chaîne
String de caractères, il faut let maVariable = 'Bob';
placer la valeur entre des
quotes (').

Un nombre. Les nombres

Nombre let maVariable = 10;
n'ont pas de quote.

Un valeur qui signifie vrai

ou faux. true/false sont
des mots-clés spéciaux
Booléen let maVariable = true;
en JavaScript, il n'est pas
nécessaire d'utiliser des
quotes.
let maVariable =
Une structure qui permet [1,'Bob','Patrick',10];
de stocker plusieurs On peut ensuite utiliser chaque
Tableau membre du tableau en
valeurs dans une seule
variable. utilisant maVariable[0], maVariable[1],
etc.

Objet Un objet peut être let maVariable =

document.querySelector('h1');
n'importe quoi. Un objet
est un ensemble de
propriétés qui peut être
enregistré dans une
 Variabl
Explication Exemple
e
variable. C'est la
structure la plus utilisée
et la plus flexible.
Pourquoi a-t-on besoin de variables ? Et bien parce qu'elles sont
essentielles à la programmation. Si les valeurs ne pouvaient pas changer,
on ne pourrait rien faire de dynamique. Par exemple, on ne pourrait pas
personnaliser un message de bienvenue ou changer l'image affichée dans
une galerie.

Les commentaires
De la même façon qu'en CSS, il est possible d'intégrer des commentaires
dans du code JavaScript :

/*
Voici un commentaire qui peut être sur plusieurs lignes
*/
Si votre commentaire tient sur une ligne, vous pouvez utiliser deux barres
obliques pour indiquer un commentaire :

// Voici un commentaire

Les opérateurs
Un opérateur est un symbole mathématique qui produit un résultat en
fonction de plusieurs valeurs (la plupart du temps on utilise deux valeurs et
un opérateur). Le tableau suivant liste certains des opérateurs les plus
simples ainsi que des exemples que vous pouvez tester dans votre console
JavaScript.
Opérateur Explication Symbole(s) Exemple
Il peut être utilisé pour
calculer la somme de 6 + 9;
Somme /
deux nombres ou pour + "Coucou " +
Concaténation concaténer (coller) deux "monde !";

chaînes ensemble.
9 - 3;
Soustraction, 8 * 2; // pour
Les opérations multiplier, on
multiplication, -, *, /
mathématiques de base. utilise une
division astérisque
9 / 3;
 Opérateur Explication Symbole(s) Exemple
On a déjà vu cet
Opérateur opérateur : il permet =
let maVariable =
d'affectation d'affecter une valeur à 'Bob';
une variable.

Il permet de tester si deux

valeurs sont égales et il let maVariable =
Opérateur 3;
renvoie un ===
maVariable ===
d'identité booléen true/falsecomme 4;
résultat.
let myVariable =
3;
!(myVariable ===
3);
Souvent utilisé avec
On teste ici
l'opérateur d'égalité,
Opérateur de "maVariablen'est
l'opérateur de négation
PAS égale à
négation et est l'équivalent, en
!, !== 3". Cela
opérateur JavaScript, d'un NON
renvoie false,
d'inégalité logique (il transforme la
car elle est
valeur true en false et vice
égale à 3.
versa) let maVariable =
3;
maVariable !==
3;

Il y a plein d'autres opérateurs mais nous nous en tiendrons à ceux-là pour

le moment. Si vous voulez avoir la liste complète, vous pouvez vous rendre
sur la page qui détaille les expressions et les opérateurs.
Note : Attention lorsque vous utilisez les opérateurs, si vous utilisez différents types
de données avec un même opérateur, le résultat que vous obtiendrez pourra vous
surprendre. Pour voir ce que ça donne, essayez de voir le résultat fourni par "35" +
"25" en utilisant cette instruction dans votre console. Pourquoi obtient-on ce résultat ?
Parce que les nombres sont entourés de guillemets et sont donc considérés comme
des chaînes de caractères, on obtient donc une chaîne concaténée. Si vous utilisez 35
+ 25, vous obtiendrez le bon résultat.

Les structures conditionnelles

Les structures conditionnelles sont des éléments du code qui permettent de
tester si une expression est vraie ou non et d'exécuter des instructions
différentes selon le résultat. La structure conditionnelle utilisée la plus
fréquemment est if ... else. Par exemple :
let parfumGlace = 'chocolat';
if (parfumGlace === 'chocolat') {
 alert("J'adore la glace au chocolat !");
} else {
alert("J'aurai préféré du chocolat.");
}
L'expression contenue dans if ( ... ) correspond au test qu'on souhaite
effectuer. Ici, on utilise l'opérateur d'identité pour comparer la
variable parfumGlace avec la chaîne de caractères "chocolat" et voir si elles
sont égales. Si cette comparaison renvoie true, le premier bloc de code
sera exécuté. Sinon, c'est le code du second bloc, celui présent
après  else qui sera exécuté.

Les fonctions
Les fonctions permettent d'organiser des fonctionnalités qu'on souhaite
pouvoir réutiliser. Par exemple, si on veut exécuter deux fois la même
action, plutôt que de recopier le code, on pourra écrire une fonction une fois
puis l'utiliser aux deux endroits souhaités. Nous avons déjà utilisé des
fonctions :
1. let maVariable = document.querySelector('h1');
2. alert('Coucou !');
Ces fonctions (querySelector et alert) sont disponibles dans le navigateur et
vous pouvez les utiliser où bon vous semble.
Si vous voyez quelque chose qui ressemble à un nom de variable et qui est
suivi de parenthèses, c'est probablement une fonction. Les fonctions
peuvent utiliser des argumentspour effectuer leurs calculs. Les arguments
sont placés entre les parenthèses, séparés par des virgules s'il y en a
plusieurs.
Par exemple, la fonction alert() fait apparaître une fenêtre de pop-up dans
la fenêtre du navigateur et on peut utiliser un argument pour indiquer à la
fonction ce qu'on souhaite écrire dans cette fenêtre.
En plus des fonctions déjà existantes, vous pouvez définir vos propres
fonctions ! Par exemple, vous pouvez écrire une fonction toute simple qui
prend deux arguments et qui renvoie le résultat de la multiplication :

function multiplier(num1,num2) {
let résultat = num1 * num2;
return résultat;
}
Vous pouvez déclarer cette fonction dans la console avant de l'utiliser
plusieurs fois :

multiplier(4,7);
multiplier(20,20);
multiplier(0.5,3);
Note : L'instruction return indique au navigateur qu'il faut renvoyer la
variable résultat en dehors de la fonction afin qu'elle puisse être réutilisée par
ailleurs. Cette instruction est nécessaire car les variables définies à l'intérieur des
 fonctions sont uniquement disponibles à l'intérieur de ces fonctions. C'est ce qu'on
appelle une portée (pour en savoir plus, vous pouvez lire cet article).

Les événements
Pour qu'un site web soit vraiment interactif, vous aurez besoin
d'événements. Les événements sont des structures de code qui « écoutent
» ce qui se passe dans le navigateur et qui permettent de déclencher des
actions lorsque quelque chose de particulier se passe. Le meilleur exemple
est l'événement de clic, qui est déclenché lorsque l'utilisateur clique sur
quelque chose dans le navigateur. Pour voir ce que ça donne en pratique,
saisissez ces quelques lignes dans la console puis cliquez sur la page sur
laquelle vous êtes :
document.querySelector('html').onclick = function() {
alert('Aïe, arrêtez de cliquer !!');
}
Il existe plein de méthodes pour « attacher » un événement à un élément.
Dans cet exemple, nous avons sélectionné l'élément HTML concerné et
nous avons défini un gestionnaire onclick qui est une propriété qui est égale
à une fonction anonyme (elle n'a pas de nom) qui contient le code à
exécuter quand l'utilisateur clique.
On pourra noter que :

document.querySelector('html').onclick = function() {};

est équivalent à :

let maHTML = document.querySelector('html');

maHTML.onclick = function() {};
La première syntaxe est simplement plus courte.

Booster notre site web

Maintenant que nous avons vu quelques bases en JavaScript, nous allons
ajouter quelques fonctionnalités intéressantes à notre site pour voir ce qu'il
est possible de faire.

Pouvoir changer l'image en cliquant dessus

Dans cette section, nous allons ajouter une autre image au site et ajouter
un peu de JavaScript pour alterner entre les images lorsqu'on clique sur
l'image affichée.

1. Tout d'abord, trouvez une deuxième image que vous souhaiteriez

afficher sur votre site. Essayez de prendre une image de même taille.
2. Enregistrez cette image dans votre dossier images.
3. Dans le fichier main.js, entrez ce code JavaScript (si votre code «
Coucou le monde » est toujours là, vous pouvez le supprimer) :
4. let monImage = document.querySelector('img');
5.
6. monImage.onclick = function() {
7. let maSrc = monImage.getAttribute('src');
8. if(maSrc === 'images/firefox-icon.png') {
9. monImage.setAttribute ('src','images/firefox2.png');
10. } else {
11. monImage.setAttribute ('src','images/firefox-icon.png');
12. }
}
13. Sauvegardez les différents fichiers puis chargez index.html dans votre
navigateurs. Quand vous cliquez sur l'image, cela devrait désormais passer
à la deuxième !
Dans cet exemple, nous utilisons une référence vers l'élement img grâce à
la variable monImage. Ensuite, on définit une fonction anonyme qui doit être
utilisée comme gestionnaire d'événement onclick. Cette fonction définit ce
qui se passe à chaque fois qu'on clique sur l'élément de l'image :
1. On récupère la valeur de l'attribut src de l'image.
2. On utilise une structure conditionnelle pour voir si la valeur de src est
égale au chemin de l'image originale :
1. Si le chemin est égal, on change la valeur de src pour utiliser le
chemin de la deuxième image, ce qui force cette image à être chargée
dans l'élément <image>.
2. Si le chemin est différent (ce qui signifie que l'image a déjà été
changée), on modifie la valeur de src pour aller chercher la première image
et l'afficher.

Ajouter un message d'accueil personnalisé

Continuons en ajoutant encore un peu de code pour changer le titre de la
page afin d'inclure un message d'accueil personnalisé pour le visiteur du
site. Ce message d'accueil sera conservé quand l'utilisateur quittera le site
et s'il y revient. Nous ajouterons également une option pour pouvoir
changer l'utilisateur et le message d'accueil si besoin.

1. Dans le fichier index.html, ajoutez la ligne suivante avant

l'élément <script> :
<button>Change user</button>
2. Dans le fichier main.js, ajoutez le code suivant à la fin du fichier. Cela
fait référence au nouveau bouton qu'on vient d'ajouter et à l'élément de titre
puis enregistre ces références dans des variables :
3. let monBouton = document.querySelector('button');
let monTitre = document.querySelector('h1');
4. Ajoutons maintenant les fonctionnalités pour avoir ce message
d'accueil personnalisé (ça ne servira pas immédiatement mais un peu plus
tard) :
5. function définirNomUtilisateur() {
6. let monNom = prompt('Veuillez saisir votre nom.');
7. localStorage.setItem('nom', monNom);
8. monTitre.textContent = 'Mozilla est cool, ' + monNom;
}
Cette fonction utilise la fonction prompt() qui permet d'afficher une boîte de
dialogue. Elle fonctionne de façon semblable à alert() sauf qu'elle permet à
l'utilisateur de saisir des données et d'enregistrer ces données dans une
variable lorsque l'utilisateur clique sur OK.Dans notre exemple, nous
demandons à l'utilisateur de saisir son nom. Ensuite, nous appelons une
API appelée localStorage. Cette API permet de stocker des données dans le
navigateur pour pouvoir les réutiliser ultérieurement. Nous utilisons la
fonction setItem() de cette API pour stocker la donnée qui nous intéresse
dans un conteneur appelé 'nom'. La valeur stockée ici est la valeur de la
variable monNom qui contient le nom saisi par l'utilisateur. Enfin, on utilise la
propriété textContent du titre pour lui affecter un nouveau contenu.
9. Ajoutons ensuite ce bloc if ... else. Ce code correspond à l'étape
d'initialisation car il sera utilisé la première fois que la page est chargée par
l'utilisateur :
10. if(!localStorage.getItem('nom')) {
11. définirNomUtilisateur();
12. } else {
13. let nomEnregistré = localStorage.getItem('nom');
14. monTitre.textContent = 'Mozilla est cool, ' + nomEnregistré;
}
Ce bloc utilise l'opérateur de négation (NON logique) pour vérifier si le
navigateur possède une donnée enregistrée appelée nom. Si non (ce qui
correspond au cas où c'est la première visite de l'utilisateur), la
fonction définirNomUtilisateur() est appelée pour créer cette donnée. Si cette
donnée est déjà enregistrée (ce qui correspond au cas où l'utilisateur est
déjà venu sur la page), on la récupère avec la méthode getItem() et on
définit le contenu de textContent pour le titre avec une chaîne suivie du nom
de l'utilisateur (c'est équivalent à ce qu'on fait dans  définirNomUtilisateur()).
15. Enfin, on associe le gestionnaire onclick au bouton. De cette façon,
quand on clique sur le bouton, cela déclenchera l'exécution de la
fonction définirNomUtilisateur(). Ce bouton permettra à l'utilisateur de
modifier la valeur s'il le souhaite:
16. monBouton.onclick = function() {
17. définirNomUtilisateur();
}
Récapitulons : la première fois que l'utilisateur viste le site, il sera invité à
saisir un nom d'utilisateur. Ce nom sera utilisé pour afficher un message
d'accueil personnalisé. Si l'utilisateur souhaite changer son nom, il peut
utiliser le bouton. En supplément, le nom est enregistré pour plus tard grâce
à l'API localStorage, cela permet à l'utilisateur de retrouver son nom, même
s'il a fermé la page et/ou le navigateur et qu'il revient plus tard !
Conclusion
Si vous avez suivi les étapes détaillées sur cette page, vous devriez obtenir
un résultat semblable à celui-ci (vous pouvez aussi voir la version que nous
avons obtenue ici) :
 Publier votre site web
Une fois votre code écrit et la structure des fichiers organisée, vous devez
tout mettre en ligne afin que les gens puissent y accéder. Cet article décrit
comment mettre en ligne un site web en un minimum de temps.
uelles sont les différentes options ?
La publication d'un site web n'est pas un sujet simple. Cela est dû au fait
qu'il existe de nombreuses façon pour publier un site. Dans cet article, nous
ne documenterons pas toutesles méthodes. En revanche, nous
discuterons des avantages et des inconvénients des différentes stratégies.
Nous détaillerons ensuite une méthode qui devrait convenir dans la
majorité des cas pour un premier projet.

L'hébergement et le nom de domaine

Si vous souhaitez complètement contrôler votre site web, vous aurez
probablement besoin de payer pour :

 L'hébergement : cela correspond à l'espace, loué par une société

d'hébergement, disponible sur un serveur web. Vous pourrez utiliser cet
espace pour y placer vos fichiers et le serveur web fournira le contenu aux
utilisateurs qui visitent le site.
 Un nom de domaine : cela correspond à l'adresse avec laquelle les
visiteurs pourront accéder à votre site web : www.mozilla.org, ou www.bbc.co.uk.
Il est possible de louer un nom de domaines à un bureau
d'enregistrement.
La plupart des sites professionels sont publiés de cette façon.

En parallèle, vous aurez besoin d'un client FTP (pour File Transfer

Protocol ou protocole de transfert de fichiers) (pour plus de détails,
voir Combien ça coûte : les logiciels) pour transférer les fichiers depuis
votre ordinateur vers le serveur web. Les différents programmes utilisés
pour FTP varient mais, généralement, il faut se connecter avec des
identifiants fournis par la société d'hébergement (ces identifiants sont
généralement composés d'un nom d'utilisateur, d'un mot de passe et d'un
nom de domaine sur lequel est situé le serveur). Le logiciel utilisé pour FTP
affichera ensuite vos fichiers locaux d'une part et les fichiers présents sur le
serveur d'autre part. Vous pourrez utiliser ces deux parties pour transférer
vos fichiers d'une machine à l'autre :
 Conseils sur l'hébergement et les noms de domaines

 Le but de cet article n'est en aucun cas de promouvoir certaines

sociétés d'hébergement plutôt que d'autres. Pour trouver différentes
sociétés d'hébergement et de noms de domaine, vous pouvez utiliser votre
moteur de recherche préféré. Tous bureaux d'enregistrement permettent de
rechercher le nom de domaine que vous voulez utiliser.
 Il se peut que votre fournisseur d'accès Internet fournisse un service
d'hébergement limité pour un petit site web. Les fonctionnalités offertes
seront limitées mais pour un premier projet ça peut être amplement
suffisant ! N'hésitez pas à les contacter pour savoir si ce service est
disponible.
 Il existe des services gratuits tels
que Neocities, Blogspot et Wordpress. Là aussi, vous en aurez pour votre
argent mais certains de ses services peuvent convenir pour un premier
projet. Pour la plupart de ces services, il n'est pas nécessaire d'utiliser FTP,
vous pourrez uploader les fichiers via une interface web.
 Certaines des sociétés fournissent le nom de domaine et
l'hébergement dans un même package.
 Utiliser un outil en ligne comme GitHub ou Dropbox
Certains outils vous permettent de publier votre site web en ligne :

 GitHub est un site de « gestion de versions collaborative » qui permet

de stocker en ligne des « dépôts » manipulés avec le système de gestion
de versions Git. Vous pouvez collaborer sur des projets logiciels et y
stocker des projets open source (ce qui signifie que tout le monde pourra
trouver les fichiers que vous publiez sur GitHub, les utiliser et améliorer
votre projet. Vous pouvez aussi faire de même avec les autres projets
présents sur GitHub. Cela permet de participer à différents projets et
communautés, Git est un système de gestion de versions très populaire.
GitHub possède une fonctionnalité très utile pour l'hébergement que sont
les pages GitHub. Ces pages vous permettent d'exposer une page web
dont le code est présent sur GitHub.
 Dropbox est un système de stockage de fichiers qui permet de
sauvegarder des fichiers sur le Web afin qu'ils soient disponibles sur
différents appareils. Si les fichiers sont disponibles de façon publique,
n'importe qui pourra y accéder. Si le dossier publique contient des fichiers
web, Dropbox servira le site web automatiquement. Pour plus
d'informations, voir comment héberger des sites web avec Dropbox.
À la différence d'un environnement hébergé, ces outils sont gratuits mais
disposent d'un ensemble de fonctionnalités limitées.

Utiliser un IDE web tel que Thimble

Il existe plusieurs applications web qui émulent un environnement de
développement web qui permet de saisir du HTML, CSS et JavaScript et de
voir le résultat affiché sous la forme du site web. Tout ça en une seule
fenêtre ! De façon générale, ces outils sont simples d'utilisation, très utiles
pour apprendre et ils sont gratuits (pour les fonctionnalités de bases). Ils
permettent en plus d'afficher la page web finie avec une adresse donnée.
Cependant, les fonctionnalités de base sont plutôt limitées et ne permettent
pas de charger des ressources comme des images.

Voici les quelques IDE que vous pouvez essayer. Choisissez celui qui vous
convient le mieux :

 JSFiddle
 Thimble
 JSBin
Publier un site via GitHub
 Nous avons vu différentes options. Désormais, nous allons voir en détails
comment publier un site sur une page GitHub. Encore une fois, cette
méthode n'est pas nécessairement la meilleure pour votre projet ou en
général mais elle est :

 gratuite
 simple
 applique des compétences qui pourront vous être utiles par la suite.

Mise en place basique

1. Pour commencer, installez Git sur votre machine. C'est l'outil sur
lequel GitHub est basé.
2. Ensuite, inscrivez-vous sur GitHub.
3. Une fois que vous êtes inscrit, connectez-vous sur github.com avec
votre nom d'utilisateur et votre mot de passe.
4. Ensuite, il faut créer un dépôt dans lequel vous placerez vos fichiers.
Pour ce faire, cliquez sur le bouton + en haut à droite sur la page d'accueil
GitHub puis sélectionnez New Repository.
5. Sur cette page, dans le champ Repository name box,
entrez username.github.io, où username correspond à votre nom
d'utilisateur. Si, par exemple, votre nom d'utilisateur est jeanbiche, le nom
sera jeanbiche.github.io.
6. Cliquez sur Create repository, cela devrait afficher la page suivante :

Uploader vos fichiers sur GitHub

 Nous allons utiliser la ligne de commande pour placer notre dépôt sur
GitHub. Une invite en ligne de commande permet de saisir des commandes
au clavier pour créer des fichiers et de lancer des programmes (plutôt que
de cliquer sur une interface utilisateur avec des boutons). Une interface en
ligne de commandes ressemble à ça :

Note : Si vous préférez avoir une interface graphique et éviter l'interface en ligne de
commande, vous pouvez utiliser une interface graphique pour Git pour faire la
même chose.
Chaque système d'exploitation possède un outil de ligne de commande :
 Windows : Invite de commande qui peut être lancé en appuyant sur
la touche Windows, tapez « Invite de commande » et sélectionnez le dans
la liste. Attention, Windows possèdent des conventions différentes de Linux
et OS X. Les commandes pourront être légèrement différentes.
 OS X : Terminal qui peut être lancé depuis Applications > Outils.
 Linux : Généralement, il est possible de lancer un terminal avec Ctrl
+ Alt + T. Si ça ne fonctionne pas, vous pouvez chercher Terminal dans le
menu principal.
 Cela peut sembler un peu effrayant à première vue. Ne vous en faites pas.
Le terminal est en fait utilisé pour envoyer des commandes à l'ordinateur
une fois qu'on appuie sur Entrée.

1. Placez vous dans votre répertoire site-test (si votre répertoire a un

nom différent, remplacez le nom avec celui que vous utilisez). Pour aller
dans un répertoire, on utilisera la commande cd (qui
signifie « change directory » qui signifie « changer de répertoire »). Si votre
répertoire s'appelle site-test et qu'il est sur votre bureau :
cd Bureau/test-site
2. Une fois que vous êtes dans ce répertoire, saisissez cette commande
qui indique à git de créer un dépôt dans ce répertoire :
git init
3. Ensuite, sur le site GitHub, sur la page, allez dans la section …or
push an existing repository from the command line, vous devriz avoir deux
lignes de code. Copiez la première ligne dans votre terminal/invite et
appuyez sur Entrée. La commande devrait ressembler à :
git remote add origin https://github.com/jeanbiche/jeanbiche.github.io.git
4. Ensuite, tapez ces deux commandes suivantes en appuyant sur
Entrée pour chacune. Ces commandes permettent d'indiquer à git qu'il faut
gérer les fichiers contenus dans le répertoire et de préparer la connexion
entre le dépôt qui est sur GitHub et le dépôt qui est sur votre ordinateur.
5. git add --all
git commit -m 'adding my files to my repository'
6. Enfin, on envoie le code sur GitHub grâce à la deuxième commande
qui était listée à l'étape 3 :
git push -u origin master
7. Pour voir si cela a bien fonctionné, allez sur jeanbiche.github.io dans
votre navigateur. Votre site devrait être en ligne ! Vous pouvez envoyer
l'adresse du site par e-mail à vos amis pour leurs montrer votre talent !
Note : Si vous êtes bloqué, la page GitHub Pages pourra vous être d'une aide
précieuse.

En savoir un peu plus sur GitHub

Si vous souhaitez apporter d'autres changements à votre page puis les
publier sur GitHub, vous aurez simplement besoin de modifier les fichiers
comme précédemment. Une fois les fichiers modifiés et sauvegardés, vous
pouvez utiliser les commandes suivantes (en appuyant sur Entrée à chaque
fois) pour publier vos modifications sur GitHub :

git add --all

git commit -m 'Mes modifications étaient...'
git push
Le message présent sur la ligne git commit -m peut être remplacé avec un
message qui décrit plus précisément les changements que vous avez
apportés.
Le but de cet article n'est pas de découvrir GitHub en profondeur mais
d'utiliser quelques commandes pour publier ce site. Pour en savoir plus,
vous pourrez utiliser le site GitHub Help.
Conclusion
Après ces différentes étapes, vous devriez disposer d'un site web,
disponible en ligne, accessible à une adresse donnée. Félicitations !
 Le fonctionnement du Web
Une succession d'opérations complexes se produit chaque fois que vous
accédez à un site. Cet article décrit ce qui se passe lorsque vous affichez
un site web dans votre navigateur et explique certaines étapes que vous
pourriez ne pas soupçonner.
Ces éléments théoriques ne sont pas strictement nécessaires pour
commencer à faire du développement web dans un premier temps.
Cependant, ils seront plus qu'utiles pour mieux comprendre comment le
Web fonctionne en arrière-plan et vous aideront à mieux développer par la
suite.

Des clients et des serveurs

Les ordinateurs qui se connectent au Web sont appelés des clients et
des serveurs. Voici un diagramme simplifié qui illustre comment ces deux
interagissent :

 Les clients correspondent aux appareils connectés sur Internet,

utilisés par les personnes qui utilisent des sites web (par exemple, votre
ordinateur connecté par Wi-Fi ou votre téléphone connecté sur le réseau
mobile) et aux logiciels utilisés pour consulter les pages Web (par exemple
les navigateurs comme Firefox ou Chrome).
 Les serveurs sont des ordinateurs qui stockent des pages web, des
sites ou des applications. Lorsqu'un appareil « client » souhaite accéder à
une page web, une copie de la page est téléchargée depuis le serveur vers
le client, la machine utilisée affiche alors le contenu dans le navigateur web
de l'utilisateur.

Les autres composants du Web

 Le client et le serveur ne sont pas les seuls éléments qui interviennent. Il y
a beaucoup d'autres composants que nous allons décrire dans la suite de
cet article.

Faisons un parallèle entre le Web et une rue. D'un côté de la rue, on a une
maison qui correspond au client. De l'autre côté, on a un magasin, qui
correspond au serveur, et dans lequel on souhaite acheter quelque chose.

En plus du client et du serveur, on pourra croiser :

 La connexion Internet : celle-ci permet d'envoyer et de recevoir des

données sur le Web. Dans notre métaphore, elle correspond à la rue qui
relie la maison et le magasin.
 TCP/IP : Transmission Control Protocol / Internet Protocol (qui
correspondent chacun, en français à : protocole de contrôle de
transmission et protocole Internet) sont des protocoles qui définissent
comment les données sont transférées à travers le Web. Pour notre
métaphore, cela correspond au moyen de transport comme une voiture ou
un vélo, ou vos deux pieds.
 DNS : Domain Name System (ce qui correspond à « système de
noms de domaines ») est un système qui ressemble à un annuaire pour les
sites web. Lorsque vous tapez une adresse dans votre navigateur, le
 navigateur utilise le DNS avant de récupérer le site web. En effet, le
navigateur a besoin de savoir sur quel serveur le site web est situé pour
pouvoir envoyer des requêtes HTTP au bon endroit (voir ci-après). Pour
notre métaphore, cela correspond à chercher l'adresse du magasin dans
lequel on souhaite se rendre.
 HTTP : Hypertext Transfer Protocol (pour « protocole de transfert
hypertexte ») est un protocole d'application qui définit le langage avec
lequel les clients et les serveurs communiquent. C'est la langue que vous
utilisez pour demander les produits dont vous avez besoin.
 Les fichiers : Un site web est composé de différents fichiers qui
peuvent être vus comme les différentes parties des produits que vous
achetez au magasin. Ces fichiers peuvent être rangés dans deux
catégories :
o Les fichiers de codes : Les sites web utilisent principalement
HTML, CSS et JavaScript (nous découvrirons d'autres technologies plus
tard).
o Le fichiers matériels : Ces fichiers représentent tous les
matériaux qui sont utilisés pour faire un site web : les images, les
musiques, les vidéos, les PDF, etc.
Que se passe-t-il quand on accède à une page ?
Lorsque vous saisissez une adresse web dans votre navigateur, voici ce
qui se passe :

1. Le navigateur demande au DNS l'adresse réelle du serveur qui

contient le site web (vous trouvez l'adresse du magasin).
2. Le navigateur envoie une requête HTTP au serveur pour lui
demander de lui envoyer une copie du site web (vous allez au magasin et
vous passez commande). Ce message, ainsi que les autres données
échangées entre le client et le serveur, sont échangées en utilisant TCP/IP.
3. Si le serveur accepte la requête émise par le client, le serveur envoie
un message « 200 OK » au client. D'une certaine façon cela signifie : « Pas
de problème, tu peux consulter ce site web, le voici ». Ensuite le serveur
commence à envoyer des paquets de données qui contiennent les
morceaux des différents fichiers du site (le magasin accepte de vous fournir
les produits puis vous les ramenez chez vous).
4. Le navigateur assemble les différents fragments pour recomposer le
site web en entier puis l'affiche sur votre écran (vous avez ramené les
produits et vous pouvez les utiliser :)).

Des explications sur DNS

Les vraies adresses utilisées sur le Web ne sont pas les mots que vous
utilisez dans votre barre du navigateur pour retrouver vos sites web favoris.
Derrière ces mots se cachent des adresses qui ressemblent plutôt à
63.245.217.105.

C'est ce qu'on appelle une adresse IP. Une adresse IP est censée
représenter un endroit unique sur le Web. Par contre, ça n'est pas très
pratique pour s'en souvenir. C'est pour ça que le système de noms de
domaine a été conçu. Les serveurs DNS sont des serveurs un peu
spéciaux qui permettent de faire la correspondance entre l'adresse que
vous saisissez dans votre navigateur (par exemple « mozilla.org ») et
l'adresse réelle (l'adresse IP) du serveur qui contient le site.

Il est tout à fait possible d'accéder aux sites web en utilisant leurs adresses
IP. Pour aller sur Wikipédia, vous pouvez taper 208.80.154.224 dans la barre
d'adresse de votre navigateur. Voici un autre exemple avec Google :

Des explications sur les paquets

Un peu plus haut dans l'article, nous avons utilisé le terme « paquet » pour
décrire le format avec lequel les données étaient envoyées depuis le
serveur vers le client. Qu'est-ce que cela signifie ? Pour simplifier, lorsque
des données sont envoyées sur le Web, elles sont envoyées en milliers de
petits morceaux afin que plusieurs utilisateurs puissent consulter la même
page web au même moment. Si les sites web étaient envoyés en un seul
gros morceau, les utilisateurs ne pourrait télécharger qu'un seul site à la
fois, ce qui rendrait le Web beaucoup moins pratique à utiliser et beaucoup
moins performant.

Le fonctionnement d’internet

L'Internet est l'épine dorsale du Web : il s'agit de l'infrastructure technique

qui sous-tend le Web. De façon simple, l'Internet est un vaste réseau
d'ordinateurs qui communiquent les uns avec les autres.

L'histoire des débuts de l'Internet est quelque peu nébuleuse. Tout aurait
commencé dans les années 1960 par un projet de recherche subventionné
 par le département de la Défense des États-Unis. L'Internet serait ensuite
devenu, dans les années 1980, une infrastructure publique grâce au
soutien de nombreuses universités publiques et entreprises privées. Les
diverses technologies qui sous-tendent l'Internet ont évolué au fil du temps,
mais son fonctionnement de base a, quant à lui, peu changé. L'Internet
demeure un moyen de relier tous les ordinateurs entre eux et de s'assurer
que ce lien perdure, peu importe les problèmes qui pourraient toucher le
réseau.
Pédagogie active
 How the internet Works in 5 minutes : Une vidéo d'une durée de
5 minutes réalisée par Aaron Titus afin d'expliquer les rudiments du
fonctionnement de l'Internet. (en anglais seulement)
Allons plus loin

Un réseau de base
Pour que deux ordinateurs puissent communiquer entre eux, ils doivent être
liés soit par un lien physique (généralement par un câble Ethernet), soit
sans fil (par exemple, via WiFi ou Bluetooth). Tous ces types de connexions
sont possibles sur les ordinateurs modernes.
Note : À partir de maintenant, nous ne parlerons que de connexions physiques, mais
sachez que les explications ci-dessous sont tout aussi valides pour les réseaux sans fil.

Un réseau comme celui illustré ci-haut n'est pas limité à deux ordinateurs.
Vous pouvez y connecter autant d'ordinateurs que vous le souhaitez, mais
le tout se complique très rapidement. Ainsi, si vous voulez relier, disons, dix
ordinateurs entre eux, vous aurez besoin de 45 câbles et de neuf prises sur
chaque ordinateur!
Afin de résoudre ce problème, chaque ordinateur du réseau est relié à un
petit ordinateur bien spécial que l'on appelle routeur. Ce routeur n'a qu'une
seule fonction : tout comme un signaleur de gare de train, il s'assure que
les messages transmis par un ordinateur donné se rendent au bon
ordinateur destinataire. Ainsi, pour envoyer un message à l'ordinateur B,
l'ordinateur A transmet d'abord le message au routeur, qui s'assure alors de
transférer le message à l'ordinateur B et non à l'ordinateur C.
Vous voyez donc que lorsque nous ajoutons un routeur dans notre
structure, notre réseau de dix ordinateurs ne requiert alors que de dix
câbles, d'une prise par ordinateur et d'un routeur de 10 ports.
Un réseau de réseaux
Jusqu'ici tout est beau, mais comment fait-on pour relier des centaines, des
milliers ou même des millards d'ordinateurs entre eux ? Bien évidemment,
un seul routeur ne pourrait suffire pour tant de connexions. Cependant, si
vous avez lu attentivement, vous aurez constaté qu'un routeur n'est en
réalité qu'un ordinateur. Serait-ce alors possible de lier deux routeurs ? Oui,
absolument, et en voici le résultat!
En liant les ordinateurs à des routeurs, puis les routeurs entre eux, nous
avons la capacité d'étendre le réseau indéfiniment.
Un tel réseau s'apparente de près à ce que nous appelons l'Internet, mais il
y a un élément manquant. Ce réseau a été conçu pour répondre à nos
besoins personnels, mais d'autres réseaux existent également. Vos amis,
vos voisins et plein d'autres gens peuvent avoir leurs propres réseaux
d'ordinateurs. Cependant, il vous est plutôt impossible de brancher des
câbles entre votre maison et le reste de la planète, alors que faire ? Eh
bien, il se trouve que votre maison est déjà câblée et liée aux réseaux
électrique et téléphonique. L'infrastructure téléphonique, qui lie déjà votre
maison au reste de la planète, répond parfaitement à nos besoins. Afin de
lier notre réseau à l'infrastructure téléphoique, nous devons utiliser un
appareil spécialisé appelé modem. Ce modem convertit l'information de
notre réseau en information décodable par l'infrastructure téléphonique et
vice-versa.
Notre réseau est donc lié à l'infrastructure téléphonique. La prochaine étape
consiste alors à transmettre avec succès nos messages au réseau cible. À
cette fin, nous allons lier notre réseau à un Fournisseur d'accès à Internet
(FAI). Un FAI est une entreprise qui gère des routeurs qui sont liés entre
eux et qui ont des droits d'accès aux routeurs d'autres FAI. Le message
transmis par notre réseau est ainsi transporté à travers le réseau de FAI
afin d'atteindre le réseau cible. Voilà en quoi consiste l'Internet : il s'agit de
toute cette infrastructure de réseaux (dans les schémas suivants, ISP
signifie FAI, c'est le terme anglais pour fournisseur d'accès).
Localiser un ordinateur
Lorsque nous souhaitons transmettre un message à un ordinateur, nous
devons préciser de quel ordinateur il s'agit. Par conséquent, chaque
ordinateur lié à un réseau possède une adresse unique appelée « adresse
IP » (où « IP » signifie Internet Protocol) qui sert à localiser l'ordinateur.
Cette adresse est composée d'une série de nombres séparés par des
points, par exemple : 192.168.2.10  ou de lettres et de chiffres séparés par
deux points. 2001:0db8:85a3:0000:0000:8a2e:0370:7334.
C'est une méthode très efficace pour les ordinateurs, mais les humains ont
un peu plus de difficulté à retenir de telles adresses numériques. Afin de se
faciliter la tâche, un libellé alphabétique, appelé nom de domaine, est
souvent associé aux adresses IP. Par example, google.com est le nom de
domaine associé à l'adresse IP 173.194.121.32. L'utilisation d'un nom de
domaine est ainsi le moyen le plus facile d'atteindre un ordinateur via
l'Internet.

L'Internet et le web
Vous aurez peut-être constaté que lorsque nous naviguons sur le Web
avec un navigateur Web, nous utilisons un nom de domaine pour rejoindre
un site web. Est-ce donc dire qu'Internet et Web réfèrent à une seule et
même notion ? La réponse n'est pas si simple. Comme nous l'avons vu,
l'Internet est une infrastructre technique qui lie des milliards d'ordinateurs
entre eux. Parmi ces ordinateurs, certains ordinateurs (appelés serveurs
Web) peuvent transmettre des messages décodables par les navigateurs
Web. Ainsi, l'Internet est une infrastructure, alors que le Web est un service
utilisant l'infrastructure de l'Internet. Il importe de mentionner que d'autres
services utilisent l'infrastructure de l'Internet, comme le courriel et IRC.