From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../css_basics/index.html | 287 ++++++++++++++ .../dealing_with_files/index.html | 113 ++++++ .../how_the_web_works/index.html | 111 ++++++ .../html_basics/index.html | 230 ++++++++++++ .../learn/getting_started_with_the_web/index.html | 62 ++++ .../installing_basic_software/index.html | 76 ++++ .../javascript_basics/index.html | 412 +++++++++++++++++++++ .../publishing_your_website/index.html | 128 +++++++ .../the_web_and_web_standards/index.html | 171 +++++++++ .../what_will_your_website_look_like/index.html | 110 ++++++ 10 files changed, 1700 insertions(+) create mode 100644 files/fr/learn/getting_started_with_the_web/css_basics/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/html_basics/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html (limited to 'files/fr/learn/getting_started_with_the_web') diff --git a/files/fr/learn/getting_started_with_the_web/css_basics/index.html b/files/fr/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..c547529be9 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,287 @@ +--- +title: Les bases des CSS +slug: Apprendre/Commencer_avec_le_web/Les_bases_CSS +tags: + - Apprendre + - CSS + - Code CSS + - Débutant + - Styles + - Web +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}}
+ +
+

Les CSS (Cascading Style Sheets en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web. Les bases des CSS présentent ce qu'il faut savoir pour commencer. Nous répondrons à des questions comme : Comment rendre mon texte rouge ou noir ? Comment faire apparaître mon contenu à tel endroit de l'écran ? Comment décorer ma page web avec une image ou une couleur d'arrière-plan ?

+
+ +

Donc, que sont les CSS, réellement ?

+ +

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 fichiers et Les bases du 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. +
  2. Sauvegardez index.html puis chargez-le dans votre navigateur. Vous devriez obtenir quelque chose comme :
    3. +
+ +

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Si le texte de votre paragraphe s'affiche en rouge, félicitations ! Vous venez d'écrire votre premier CSS fonctionnel !

+ +

Anatomie d'une règle CSS

+ +

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

+ +

Diagramme expliquant les différents éléments d'une déclaration CSS

+ +

Cette structure s'appelle un ensemble de règles (ou seulement « 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, color est 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 couleurs que red pour la propriété color).
+
+ +

Les autres éléments importants de la syntaxe sont :

+ + + +

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 appliquer à tous 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 sélecteurCe qu'il sélectionneExemple
Sélecteur d'élément (parfois appelé « sélecteur de balise » ou « sélecteur de type »)Tous les éléments HTML d'un type donné.p
+ sélectionne tous les <p>
Sélecteur d'IDL'élément d'une page qui possède l'ID fourni (pour une page HTML donné, on ne peut avoir qu'un seul élément pour un ID donné).#my-id
+ sélectionne <p id="my-id"> ou <a id="my-id">
Sélecteur de classeLes éléments d'une page qui sont de la classe donnée (pour une page donnée, il est possible d'avoir plusieurs éléments qui partagent une même classe)..my-class
+ sélectionne <p class="my-class"> et <a class="my-class!">
Sélecteur d'attributLes éléments de la page qui possèdent l'attribut donné.img[src]
+ sélectionne <img src="monimage.png"> mais pas <img>
Sélecteur de pseudo-classeLes éléments donnés mais uniquement dans un certain état (par exemple quand on passe la souris dessus).a:hover
+ sélectionne <a> mais uniquement quand le pointeur de la souris est au-dessus du lien.
+ +

Il existe plein d'autres sélecteurs, pour tous les découvrir, 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.

+ +
    +
  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. +
  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. +
  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) : + 
    html {
+  font-size: 10px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut  */
+  font-family: 'Open Sans', sans-serif; /* cela devrait être le reste du résultat obtenu à partir de Google fonts */
+}
    + +
    +

    Note: Tout ce qui est entre /* et */ dans un document CSS est un commentaire  de CSS.  Le navigateur l'ignorera dans le rendu du code. C'est un endroit commode pour écrire des notes à propos de ce que vous faites.

    +
    +
    4. +
  4. Ensuite, fixons les tailles des différents textes contenus dans le corps du HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, et {{htmlelement("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 : + 
    h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
    +
    5. +
+ +

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 :

+ +

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

+ +

Boîtes, boîtes, encore et toujours des boîtes

+ +

Vous verrez rapidement qu'avec les CSS, tout tourne autour de boîtes : définir leurs tailles, leurs couleurs, leurs positions, etc. Les éléments HTML d'une page peuvent, pour la plupart, être vus comme des boîtes placées les unes sur les autres.

+ +

a big stack of boxes or crates sat on top of one another

+ +

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 :

+ + + +

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

+ +

Dans cette section, nous utilisons aussi :

+ + + +

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.

+ +

Mettre en forme le corps de page

+ +
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 :

+ + + +

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 {{htmlelement("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 :

+ + + +

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 utiliser 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) :

+ +

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

+ +

Si vous êtes bloqué·e quelque part, vous pouvez toujours comparer votre travail avec le code final de cet exemple disponible sur GitHub.

+ +

Dans cet article, nous n'avons fait qu'effleurer les bases de CSS. Pour continuer et en apprendre plus, vous pouvez vous rendre sur la page Apprendre CSS.

+ +

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..b2dc72e8de --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,113 @@ +--- +title: Gérer les fichiers +slug: Apprendre/Commencer_avec_le_web/Gérer_les_fichiers +tags: + - Création site + - Débutant + - Fichiers + - Guide + - HTML + - Site Web + - Theorie +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}}
+ +
+

Un site web est composé de nombreux fichiers : contenu textuel, code, feuilles de styles, contenus média, etc. Lors de la construction d'un site web, ces fichiers doivent être organisés et rangés sur votre ordinateur afin qu'ils puissent interagir les uns avec les autres et que le contenu s'affiche correctement. Une fois que c'est fait, vous pourrez alors téléverser ces fichiers sur un serveur. Gérer les fichiers aborde certains problèmes auxquels vous devez faire attention pour mettre en place une organisation judicieuse des fichiers de 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ù stocker vos projets de sites web. Là, créez un nouveau dossier appelé projets-web (ou similaire). C'est l'endroit où vivront vos divers projets de sites web.
    2. +
  2. À l'intérieur de ce premier dossier, créez un autre dossier pour y enregistrer votre premier site web. Vous pouvez l'appeler site-test (ou plus imaginatif).
    3. +
+ +

Un rapide aparté sur la casse et l'espacement

+ +

Vous remarquerez tout au long de cet article que nous vous demandons de nommer les dossiers et les fichiers totalement en minuscules et sans espace. Voici la raison :

+ +
    +
  1. Nombre d'ordinateurs, notamment des 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 à site-test/monimage.jpg, cela peut ne pas fonctionner.
    2. +
  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 à celui de deux fichiers. Certains serveurs remplaceront les espaces dans le nom du fichier par « %20 » (le code de caractère pour représenter les espaces dans les URI), ce qui cassera tous vos liens. Il est préférable de séparer les mots avec des tirets, plutôt que des soulignés : mon-fichier.html vs. mon_fichier.html.
    3. +
+ +

La réponse la plus simple est d'utiliser le trait d'union (-) pour les noms de fichiers. Le moteur de recherche de Google traite le tiret comme un séparateur de mots, mais n'opère pas de même pour le souligné (_). Pour ces raisons, il est préférable d'écrire les noms des fichiers et dossiers en minuscules sans espaces, les mots étant séparés par des tirets, à moins d'être sûr de ce que vous faites. Cela vous permettra d'éviter certains problèmes en chemin, plus tard.

+ +

Quelle structure mettre en place pour votre site web ?

+ +

Cela dit, regardons la structure que le site de test devrait avoir. Les éléments retrouvés quasiment dans tout projet de site web sont un fichier HTML d'index, des dossiers pour les images, les scripts et les feuilles de style. Créons‑les maintenant :

+ +
    +
  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. Avec votre éditeur de texte, créez un fichier nommé index.html puis enregistrez‑le dans votre dossier site-test.
    2. +
  2. un dossier images : ce dossier contiendra toutes les images utilisées pour votre site. Créez un dossier nommé images dans votre dossier site-test.
    3. +
  3. un dossier styles : ce dossier contiendra le code des CSS utilisé pour la mise en forme du contenu (par exemple pour définir les couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier nommé styles dans votre dossier site-test.
    4. +
  4. un dossier scripts : ce dossier contiendra le code JavaScript 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 nommé scripts dans votre dossier site-test.
    5. +
+ +
+

Note : Sur Windows, vous aurez peut être des problèmes pour voir le nom des fichiers en entier. En effet, Windows possède une option, activée par défaut : Masquer les extensions pour les types de fichiers connus. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant   Options des dossiers..., en enlevant la coche de Masquer les extensions pour les types de fichier connus puis en cliquant sur OK. Pour des informations propres à votre version de Windows, recherchez sur le Web !

+
+ +

Les chemins de fichiers

+ +

Pour que les fichiers puissent converser entre eux, il faut préciser le chemin pour les trouver — en résumé, la route qu'un fichier doit connaître pour situer l'autre fichier. Nous allons illustrer cela avec un peu de HTML dans index.html pour que la page affiche l'image choisie dans l'article « Quel aspect pour votre site web ? ».

+ +
    +
  1. Copiez l'image précédemment choisie dans votre dossier images.
    2. +
  2. Ouvrez le fichier index.html et insérez le code suivant exactement comme indiqué. Ne vous préoccupez pas de sa signification pour le moment — nous verrons les structures plus en détail par la suite. + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ma page de test</title>
+  </head>
+  <body>
+    <img src="" alt="Mon image de test">
+  </body>
+</html>
    +
    3. +
  3. La ligne qui contient <img src="" alt="Mon image de test"> correspond au code HTML qui insère une image dans la page. Il faut indiquer au HTML là où l'image se trouve. 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 à utiliser est images/votre‑fichier‑image. Par exemple, si l'image est nommée firefox‑icon.png, le chemin sera images/firefox-icon.png.
    4. +
  4. Insérez le chemin vers le fichier image dans le code HTML, entre les guillemets dans src="".
    5. +
  5. Sauvegardez votre fichier HTML puis chargez la page dans votre navigateur (il suffit de double-cliquer sur le fichier). Vous devriez obtenir une nouvelle page web affichant l'image !
    6. +
+ +

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

+ +

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

+ + + +

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 : « \ ») et non des barres obliques (slash : « / »), par exemple C:\windows. Cela n'intervient pas en HTML — même si vous développez votre site sur Windows, vous devez toujours utiliser des barres obliques  (« / ») dans votre code..

+
+ +

Autre chose ?

+ +

C'est tout ce qu'il y a à faire pour le moment en ce qui concerne les fichiers. Votre arborescence de fichiers devrait ressembler à cela :

+ +

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html new file mode 100644 index 0000000000..bc98c99021 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -0,0 +1,111 @@ +--- +title: Le fonctionnement du Web +slug: Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web +tags: + - Apprendre + - Client + - DNS + - Débutant + - HTTP + - IP + - Infrastructure + - Serveur + - TCP + - Web +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +
{{LearnSidebar}}
+{{PreviousMenu("Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}
+ +
+

Cet article illustre, de façon simplifiée, ce qui se passe quand une page web s'affiche dans un navigateur, sur votre ordinateur ou votre téléphone.

+
+ +

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.

+ +

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 ils interagissent :

+ +

+ + + +

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, il y a une maison qui correspond au client. De l'autre côté,  un magasin correspondant au serveur, et dans lequel vous souhaitez acheter quelque chose.

+ +

+ +

En plus du client et du serveur, nous devons aussi mentionner :

+ + + +

Donc que se passe-t-il, exactement ?

+ +

Lorsque vous saisissez une adresse web dans votre navigateur (dans notre comparaison, c'est comme aller au magasin) :

+ +
    +
  1. le navigateur demande au DNS l'adresse réelle du serveur contenant le site web (vous trouvez l'adresse du magasin).
    2. +
  2. le navigateur envoie une requête HTTP au serveur pour lui demander d'envoyer une copie du site web au client (vous allez au magasin et vous passez commande). Ce message, et les autres données envoyées entre le client et le serveur, sont échangés par l'intermédiaire de la connexion internet en utilisant TCP/IP.
    3. +
  3. si le serveur accepte la requête émise par le client, le serveur envoie un message « 200 OK » au client qui signifie : « Pas de problème, tu peux consulter ce site web, le voici ». Ensuite le serveur commence à envoyer les fichiers du site web au navigateur sous forme d'une série de petits morceaux nommés "paquet" (le magasin vous livre les produits et vous les ramenez chez vous).
    4. +
  4. le navigateur assemble les différents morceaux pour recomposer le site web en entier puis l'affiche sur votre écran (les produits sont à votre porte —  des nouveaux trucs tout neufs, génial !).
    5. +
+ +

Des explications sur le DNS

+ +

Les vraies adresses Web ne sont pas les chaînes agréables et mémorisables que vous tapez dans votre barre d'adresse pour trouver vos sites Web favoris, mais des suites de chiffres. Ces suites de chiffre sont des nombres spéciaux qui ressemblent à ceci : 63.245.208.195.

+ +

Ce sont des {{Glossary("IP Address", "adresses IP")}} ; elles représentent un endroit unique sur le Web. Par contre, elles ne sont pas très faciles à retenir (n'est‑ce pas ?). C'est pour cela que le système des noms de domaine (DNS) a été conçu. Les serveurs DNS sont des serveurs spéciaux qui font correspondre une adresse web saisie dans le navigateur (par exemple « mozilla.org ») avec l'adresse réelle (IP) du serveur du site.

+ +

Il est possible d'atteindre directement les sites web en utilisant leurs adresses IP. Pour aller sur le site de Mozilla, vous pouvez saisir 63.245.215.20 dans la barre d'adresse d'un nouvel onglet de votre navigateur.

+ +

A domain name is just another form of an IP address

+ +

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 de nombreux utilisateurs puissent consulter la même page web au même moment. Si les sites web étaient envoyés en un seul gros morceau, un seul utilisateur pourrait le télécharger à un moment donné (les autres devraient attendre leur tour), ce qui rendrait le web beaucoup moins pratique à utiliser et beaucoup moins performant.

+ +

Voir aussi

+ + + +

Crédit

+ +

Photo de rue : Street composing, par Kevin D.

+ +

{{PreviousMenu("Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/html_basics/index.html b/files/fr/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..b486e94905 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,230 @@ +--- +title: Les bases du HTML +slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML +tags: + - Apprendre + - Bases HTML + - Code HTML + - Débutant + - HTML + - Site Web +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Gérer_les_fichiers", "Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web")}}
+ +
+

HyperText Markup Language (HTML) est le code utilisé pour structurer une page web et son contenu. Par exemple, le contenu de votre page pourra être structuré en un ensemble de paragraphes, une liste à puces ou avec des images et des tableaux de données. Comme le suggère le titre, cet article vous fournit les bases de compréhension du HTML et de ses fonctions.

+
+ +

Qu'est-ce que HTML, réellement ?

+ +

HTML n'est pas un langage de programmation. C'est un langage de balises qui définit la structure de votre contenu. HTML se compose d'une série d'{{Glossary("element", "éléments")}}, utilisés pour entourer, ou envelopper, les diverses parties du contenu pour les faire apparaître ou agir d'une certaine façon. Les {{Glossary("tag", "balises")}} entourantes peuvent être rendues par un mot ou une image lien hypertexte vers quelque chose d'autre, un texte en italique, une police plus grande ou plus petite, et ainsi de suite. Par exemple, avec la ligne de contenu suivante :

+ +
Mon chat est très grincheux
+ +

Si vous souhaitez que cette ligne reste ainsi, nous indiquerons qu'il s'agit d'un paragraphe en l'entourant des balises paragraphe :

+ +
<p>Mon chat est très grincheux</p>
+ +

Anatomie d'un élément HTML

+ +

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

+ +

Diagramme décrivant la structure d'un élément HTML

+ +

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, soit l'endroit à partir duquel celui-ci prend effet. Pour notre exemple, cela indique le début du paragraphe.
    2. +
  2. La balise fermante : ici on a également des chevrons et le nom de l'élément, auxquels on ajoute une 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. Oublier la balise fermante est une erreur courante de débutant et peut conduire à de curieux résultats.
    3. +
  3. Le contenu : C'est le contenu de l'élément. Ici, c'est simplement du texte.
    4. +
  4. L'élément : Il est composé de la balise ouvrante, de la balise fermante et du contenu.
    5. +
+ +

Les éléments peuvent aussi avoir des « attributs », ce qui ressemble à :

+ +

Diagramme explicitant un attribut

+ +

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. +
  2. Un nom (le nom de l'attribut), suivi d'un signe égal « = » ;
    3. +
  3. Des guillemets anglais (") pour encadrer la valeur de l'attribut.
    4. +
+ +

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 très grincheux, vous pouvez placer le mot « très » dans un élement {{htmlelement("strong")}}, signifiant que le mot sera fortement mis en relief :

+ +
<p>Mon chat est <strong>très</strong> grincheux.</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 {{htmlelement("p")}}, puis l'élément {{htmlelement("strong")}}. Nous devrons donc fermer l'élément {{htmlelement("strong")}} d'abord, puis l'élement {{htmlelement("p")}}. Le code suivant est incorrect :

+ +
<p>Mon chat est <strong>très grincheux.</p></strong>
+ +

Les éléments doivent être ouverts et fermés correctement de façon à ce qu'ils soient clairement à l'intérieur ou à l'extérieur les uns des autres. S'ils se chevauchent, le navigateur essaiera de choisir la meilleure option, qui ne sera peut-être pas ce que vous vouliez dire et pourrait conduire à des résultats inattendus. Donc ne le faites pas !

+ +

Les éléments vides

+ +

Certains éléments n'ont pas de contenu. Ces éléments sont appelés éléments vides. Prenons l'élément {{htmlelement("img")}} présent dans notre fichier HTML :

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

Cet élément contient deux attributs mais les balises ouvrante <img> et fermante </img> sont remplacées par une balise auto-fermante <img /> et il n'y a aucun 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 :

+ + + +

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). Il contient un texte descriptif de l'image à l'intention des utilisateurs qui ne peuvent pas voir l'image, car :

+ +
    +
  1. ils sont mal-voyants. Les utilisateurs handicapés visuellement utilisent souvent des outils nommés lecteurs d'écrans pour lire le texte de cet attribut ;
    2. +
  2. quelque chose s'est mal passé et l'image n'a pas pu être affichée. Par exemple, modifiez volontairement le chemin dans votre attribut src et faites qu'il soit incorrect. Si vous enregistrez et rechargez la page, vous verrez quelque chose comme ceci à la place de l'image :
    3. +
+ +

Mon image de test

+ +

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 de feu entourant la Terre ».

+ +

Essayez d'améliorer le texte alternatif pour l'image maintenant.

+ +
+

Note : Pour plus d'informations sur l'accessibilité, vous trouverez 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 permettent 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 : {{htmlelement("h1")}}–{{htmlelement("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 {{htmlelement("img")}} dans votre document HTML.

+ +

Les paragraphes

+ +

Comme expliqué auparavant, les éléments {{htmlelement("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 d'emplettes). La balise utilisée pour ces listes est l'élément {{htmlelement("ul")}} (ul signifie unordered list liste non-ordonnée en anglais)
    2. +
  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 {{htmlelement("ol")}} (ol signifie ordered list liste ordonnée en anglais)
    3. +
+ +

Chaque élément d'une liste est balisé avec un élément {{htmlelement("li")}} (list item).

+ +

Par exemple, si on souhaite modifier un paragraphe en une liste :

+ +
<p>Mozilla est une communauté mondiale composée de technologues, chercheurs, bâtisseurs travaillant ensemble... </p>
+ +

On pourrait faire :

+ +
<p>Mozilla est une communauté mondiale composée de </p>
+
+<ul>
+  <li>technologues</li>
+  <li>chercheurs</li>
+  <li>bâtisseurs</li>
+</ul>
+
+<p>travaillant 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 {{htmlelement("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. +
  2. Encadrez le texte dans un élément <a> : + 
    <a>Manifeste Mozilla</a>
    +
    3. +
  3. Fournissez un attribut href pour l'élément <a>, de cette façon : + 
    <a href="">Manifeste Mozilla</a>
    +
    4. +
  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>
    +
    5. +
+ +

Attention à ne pas oublier la partie avec https:// ou http:// qui représente le protocole utilisé, au début de l'adresse. Une fois que vous avez créé un lien, testez votre page et cliquez dessus pour vous assurer 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 à hypertext reference 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) :
+
+ A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

+ +

Si vous êtes bloqué, n'hésitez pas à comparer votre travail avec l'exemple fini disponible sur GitHub.

+ +

Dans cet article, nous n'avons fait qu'effleurer la surface de HTML. Pour en apprendre plus sur HTML, vous pouvez vous rendre sur la page Apprendre HTML.

+ +

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Gérer_les_fichiers", "Apprendre/Commencer_avec_le_web/Les_bases_CSS","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/index.html b/files/fr/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..88479469c9 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/index.html @@ -0,0 +1,62 @@ +--- +title: Commencer avec le Web +slug: Apprendre/Commencer_avec_le_web +tags: + - CSS + - Conception + - Débutant + - Guide + - HTML + - Index + - Theorie + - Web + - publication +translation_of: Learn/Getting_started_with_the_web +--- +
{{LearnSidebar}}
+ +
+

Commencer avec le Web est une suite concise d'articles vous présentant la pratique du développement web. Vous installerez les outils nécessaires pour construire une simple page web et publier votre code.

+
+ +

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 commencer.

+ +

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.

+ +

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 polices de caractères et quelles couleurs utiliser ? Dans cet article, nous vous proposons une méthode simple pour planifier au mieux le contenu et la conception de votre site.

+ +

Gestion des fichiers

+ +

Un site web contient plusieurs types de fichiers (texte, code, feuilles de styles, multimedia, etc.). Construire un site web revient à créer une structure dans laquelle 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.

+ +

Les bases de HTML

+ +

Hypertext Markup Language (HTML) correspond au code que vous utiliserez pour structurer les différents contenus en ligne. Par exemple, le contenu sera‑t‑il un ensemble de paragraphes, ou une liste à puces ? Y aura‑t‑il des images insérées ? Aurai‑je une table de données ? Sans vous submerger, Les bases du HTML vous donne assez d'informations pour que vous soyez un familier du HTML.

+ +

Les bases des CSS

+ +

Les Cascading Stylesheets (CSS) (« feuilles de styles en cascade ») reçoivent le code à utiliser pour mettre en forme votre site Web. Par exemple, voulez‑vous que le texte soit en noir ou en rouge ? Où le contenu doit‑il être placé sur l'écran ? Quelles devront être les images de fond et les couleurs utilisées pour décorer votre site web ? « Les bases des CSS » vous apprendra tout ce dont vous avez besoin pour commencer.

+ +

Les bases de JavaScript

+ +

JavaScript est le langage de programmation à utiliser pour ajouter des fonctionnalités interactives dans vos sites Web, par exemple des jeux, les événements déclenchés lorsqu'un bouton est pressé ou lorsque des données sont entrées dans un formulaire, des effets de style dynamiques, des animations, etc. Les bases de JavaScript vous offrent un aperçu des possibilités de ce puissant langage et vous montre comment commencer à l'utiliser.

+ +

Publier votre site web

+ +

Une fois votre code écrit et la structure des fichiers organisée, vous devez tout mettre en ligne pour permettre son accès aux autres. Publier votre site Web décrit comment mettre en ligne votre site web avec un effort minimum.

+ +

Le fonctionnement du Web

+ +

Une succession d'opérations complexes, dont vous n'avez pas forcément à vous soucier, intervient chaque fois que vous accédez à votre site Web favori. Le fonctionnement du Web décrit ce qui se passe lorsque vous affichez un site web sur votre ordinateur.

+ +

Voir aussi

+ +

Le Web démystifié : une grande série de vidéos expliquant les fondamentaux du Web, visant à parfaire des débutants dans le développement Web. Créée par Jérémie Patonnier.

diff --git a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..0a7ad53559 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,76 @@ +--- +title: Installation des outils de base +slug: Apprendre/Commencer_avec_le_web/Installation_outils_de_base +tags: + - Apprendre + - Débutant + - Navigateurs + - Outils + - Setup + - Web + - Éditeurs de texte +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +
{{LearnSidebar}}
+{{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}}
+ +
+

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

+
+ +

Quels outils utilisent les professionnels ?

+ + + +

De quels outils ai-je besoin tout de suite ?

+ +

Cette liste peut paraître effrayante, mais heureusement vous pouvez vous lancer dans le développement 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 Notepad et macOS, TextEdit. Pour les distributions Linux cela varie. Ubuntu propose gedit par défaut.

+ +

Pour le développement web, vous trouverez surement mieux que Notepad ou TextEdit. Nous vous recommandons de commencer avec Visual Studio Code,  qui est un éditeur libre offrant des aperçus en direct et des conseils de code.

+ +

Installer un navigateur moderne

+ +

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

+ + + +

Avant de continuer, vous devriez installer au moins deux de ces navigateurs et les préparer pour les tests.

+ +

Note: Internet Explorer n'est pas compatible avec les dernières améliorations proposées par le Web. Il est possible que votre projet ne fonctionne pas sur ce navigateur. Vous n'avez généralement pas à vous soucier de rendre vos projets Web compatibles avec celui-ci, car très peu de personnes l'utilisent encore. Mais pour certains besoins spécifique, il faudra rendre votre projet compatible.

+ +

Installer un serveur web local

+ +

Certains projets Web ont besoin d'être lancés sur un serveur Web pour fonctionner correctement. Vous pouvez trouver ces explications ici: Comment installer en local un serveur de tests ?

+ +

{{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.html b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..05d0540779 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,412 @@ +--- +title: Les bases de JavaScript +slug: Apprendre/Commencer_avec_le_web/Les_bases_JavaScript +tags: + - Apprendre + - Code JavaScript + - Débutant + - JavaScript + - Web +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}
+ +
+

JavaScript est un langage de programmation qui ajoute de l'interactivité à votre site web (par exemple : jeux, réponses quand on clique sur un bouton ou des données entrées dans des formulaires, composition dynamique, animations). Cet article vous aide à débuter dans ce langage passionnant et vous donne une idée de ses possibilités.

+
+ +

Qu'est le JavaScript, réellement ?

+ +

{{Glossary("JavaScript")}} (« JS » en abrégé) est un langage de {{Glossary("Dynamic programming language", "programmation dynamique")}} complet qui, appliqué à un document {{Glossary("HTML")}}, peut fournir une interactivité dynamique sur les sites Web. Il a été inventé par Brendan Eich, co-fondateur du projet Mozilla, de la Mozilla Foundation et de la Mozilla Corporation.

+ +

JavaScript est d'une incroyable flexibilité. Vous pouvez commencer petit, avec des carrousels, des galeries d'images, des variations de mises en page et des réponses aux clics de boutons. Avec plus d'expérience, vous serez en mesure de créer des jeux, des graphiques 2D et 3D animés, des applications complètes fondées sur des bases de données et bien plus encore !

+ +

JavaScript est plutôt compact tout en étant très souple. Les développeurs ont écrit de nombreux outils sur le cœur du langage JavaScript, créant des fonctionnalités supplémentaires très simplement. Parmi ces outils, il y a :

+ + + +

Comme cet article est une introduction simplifiée à JavaScript, nous n'allons pas compliquer les choses à ce stade en entrant dans les détails sur les différences entre le coeur du langage JavaScript et les différents outils cités plus haut. Vous pourrez entrer dans ces détails plus tard grâce à notre centre d'apprentissage JavaScript, et le reste du MDN.

+ +

Ci-dessous nous allons vous présenter quelques aspects du coeur du langage, et vous pratiquerez aussi en manipulant les fonctionnalités des API navigateur. Amusez-vous !

+ +

Un exemple « hello world »

+ +

Le paragraphe précédent laisse entrevoir quelque chose de passionnant, et cela l'est vraiment — JavaScript est une technologie web parmi les plus dynamiques. Une fois que vous commencerez à être autonome en JavaScript, vous entrerez dans une nouvelle dimension de puissance et créativité.

+ +

Cependant, être à l'aise avec JavaScript est plus dur que de l'être avec HTML ou CSS. Vous pourrez démarrer petit et continuer à travailler par petites étapes de façon soutenue. Pour commencer, nous allons vous montrer comment ajouter un JavaScript basique à votre page, en créant un exemple « Hello world ! » (la norme en matière d'exemples de programmation de base).

+ +
+

Important : Si vous rejoignez cette série d'articles en cours de route, téléchargez cet exemple de code et utilisez‑le comme point de départ.

+
+ +
    +
  1. Tout d'abord, allez sur votre site de test et créez un nouveau dossier nommé « scripts » (sans guillemets). Ensuite, dans le nouveau dossier scripts que vous venez de créer, créez un nouveau fichier appelé main.js. Sauvegardez-le dans votre dossier scripts.
    2. +
  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. +
  3. Cet élément a le même rôle que l'élément {{htmlelement("link")}} pour le CSS — il applique le code JavaScript à la page, de sorte qu'il puisse avoir de l'effet sur le HTML (en même temps que le CSS et autres sur la page).
    4. +
  4. Maintenant ajoutez le code suivant dans main.js : + 
    let myHeading = document.querySelector('h1');
+myHeading.textContent = 'Bonjour, monde !';
    +
    5. +
  5. Assurez-vous que les fichiers HTML et JavaScript soient enregistrés puis chargez index.html dans votre navigateur. Vous devriez obtenir quelque chose comme :
    6. +
+ +
+

Note : La raison pour laquelle nous avons placé l'élément {{htmlelement("script")}} en bas du fichier HTML est que le HTML est chargé par le navigateur dans l'ordre dans lequel il apparaît dans le fichier. Si le JavaScript est chargé en premier et qu'il est supposé affecter le HTML en dessous, il pourrait ne pas fonctionner, car le JavaScript serait chargé avant le HTML sur lequel il est supposé travailler. Par conséquent, placer JavaScript près du bas de la page HTML est souvent la meilleure stratégie.

+
+ +

Que s'est-il passé ?

+ +

Le texte du titre a été changé en «Bonjour, monde ! » en utilisant JavaScript. Pour cela, on a utilisé une fonction appelée {{domxref("Document.querySelector", "querySelector()")}} pour obtenir une référence sur l'en‑tête et la stocker dans une variable appelée myHeading. C'est assez proche de ce qu'on a fait avec les sélecteurs CSS. Lorsqu'on souhaite manipuler un élément, il faut d'abord le sélectionner.

+ +

Ensuite, nous fixons à « Bonjour, monde ! » la valeur de la propriété {{domxref("Node.textContent", "textContent")}} de la variable myHeading (elle représente le contenu du titre).

+ +
+

Note : Les deux fonctions que vous avez utilisées ci-dessus font partie de l'API Document Object Model (DOM), qui vous permet de manipuler les documents.

+
+ +

Les bases du JavaScript en accéléré

+ +

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 êtes en bonne voie de pouvoir programmer à peu près n'importe quoi !

+ +
+

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 {{Glossary("Variable", "variables")}} sont des conteneurs dans lesquels on peut stocker des valeurs. Pour commencer, il faut déclarer une variable avec le mot-clé let en le faisant suivre de son nom :

+ +
let myVariable;
+ +
+

Note : Un point-virgule en fin de ligne indique là où se termine l'instruction ; ce n'est impérativement requis que si vous devez séparer des instructions sur une même ligne. Toutefois, certains pensent qu'il est de bonne pratique de les mettre à la fin de chaque instruction. Il y a d'autres règles à propos de leur emploi ou non‑emploi — voyez Guide des points‑virgule en JavaScript pour plus de détails.

+
+ +
+

Note : Vous pouvez utiliser (quasiment) n'importe quel nom pour nommer une variable, mais il y a quelques restrictions (voyez cet article sur les règles de nommage des variables). Si vous avez un doute, vous pouvez vérifier le nom de votre variable pour voir s'il est valide.

+
+ +
+

Note : JavaScript est sensible à la casse — myVariable est une variable différente de myvariable. Si vous avez des problèmes dans votre code, vérifiez la casse  !

+
+ +

Une fois une variable déclarée, vous pouvez lui donner une valeur :

+ +
myVariable = 'Bob';
+ +

Vous pouvez faire les deux opérations sur une même ligne si vous le souhaitez :

+ +
let myVariable = 'Bob';
+ +

Vous retrouvez la valeur en appelant simplement la variable par son nom :

+ +
myVariable;
+ +

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

+ +
let myVariable = 'Bob';
+myVariable = 'Étienne';
+ +

Notez que les variables peuvent contenir des types différents de données :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableExplicationExemple
{{Glossary("String", "Chaîne de caractères")}}Une suite de caractères connue sous le nom de chaîne. Pour indiquer que la valeur est une chaîne, il faut la placer entre guillemets.let myVariable = 'Bob';
{{Glossary( "Number" ,"Nombre")}}Un nombre. Les nombres ne sont pas entre guillemets.let myVariable = 10;
{{Glossary( "Boolean" ,"Booléen")}}Une valeur qui signifie vrai ou faux. true/false sont des mots-clés spéciaux en JS, ils n'ont pas besoin de guillemets.let myVariable = true;
{{Glossary( "Array" ,"Tableau")}}Une structure qui permet de stocker plusieurs valeurs dans une seule variable. +

let myVariable = [1,'Bob','Étienne',10];
+ Référez‑vous à chaque élément du tableau ainsi : myVariable[0], myVariable[1], etc.

+
{{Glossary( "Object" ,"Objet")}}À la base de toute chose. Tout est un objet en JavaScript et peut être stocké dans une variable. Gardez cela en mémoire tout au long de ce cours.let myVariable = document.querySelector('h1'); tous les exemples au dessus sont aussi des objets.
+ +

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, comme personnaliser un message de bienvenue ou changer l'image affichée dans une galerie.

+ +

Commentaires

+ +

Il est possible d'intégrer des commentaires dans du code JavaScript, de la même manière que dans les CSS :

+ +
/*
+Tout ce qui est écrit ici est entre commentaires.
+*/
+ +

Si votre commentaire tient sur une ligne, vous pouvez utiliser deux barres obliques pour indiquer un commentaire :

+ +
// Voici un commentaire
+ +

Opérateurs

+ +

Un {{Glossary("operator","opérateur")}} est un symbole mathématique qui produit un résultat en fonction de deux valeurs (ou variables). Le tableau suivant liste certains des opérateurs les plus simples ainsi que des exemples que vous pouvez tester dans votre console JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OpérateurExplicationSymbole(s)Exemple
AdditionUtilisé pour ajouter deux nombres ou concaténer (accoler) deux chaînes.+6 + 9;
+ "Bonjour " + "monde !";
Soustraction, multiplication, divisionLes opérations mathématiques de base.-, *, /9 - 3;
+ 8 * 2; // pour multiplier, on utilise un astérisque
+ 9 / 3;
AssignationOn a déjà vu cet opérateur : il affecte une valeur à une variable.=let myVariable = 'Bob';
ÉgalitéTeste si deux valeurs sont égales et renvoie un booléen true/false comme résultat.===let myVariable = 3;
+ myVariable === 4;
Négation , N'égale pas +

Renvoie la valeur logique opposée à ce qu'il précède ; il change true en false, etc. Utilisé avec l'opérateur d'égalité, l'opérateur de négation teste que deux valeurs ne sont pas égales.

+ 		!, !== +

L'expression de base est vraie, mais la comparaison renvoie false parce que nous la nions :

+ +

let myVariable = 3;
+ !(myVariable === 3);

+ +

On teste ici que "myVariable n'est PAS égale à 3". Cela renvoie false, car elle est égale à 3.

+ +

let myVariable = 3;
+ myVariable !== 3;

+
+ +

Il y a nombre d'autres opérateurs à explorer, mais nous nous en tiendrons à ceux-là pour le moment. Voir Expressions et opérateurs pour la liste complète.

+ +
+

Note : Mélanger les types de données peut conduire à d'étranges résultats lors des opérations, donc prenez soin de vous référer correctement à vos variables et d'obtenir les résultats attendus. Par exemple, entrez "35" + "25" dans votre console. Pourquoi n'obtenez-vous pas le résultat attendu ? Parce que les guillemets ont transformé les nombres en chaînes, et donc vous avez concaténé deux chaînes au lieu d'additionner deux nombres. Si vous entrez 35 + 25, vous obtiendrez le bon résultat.

+
+ +

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 iceCream = 'chocolat';
+if (iceCream === 'chocolat') {
+  alert("J'adore la glace au chocolat !");
+} else {
+  alert("Ooooh, mais j'aurais préféré au chocolat.");
+}
+ +

L'expression contenue dans if ( ... ) correspond au test — Ici, on utilise l'opérateur d'égalité (décrit plus haut) pour comparer la variable iceCream avec la chaîne de caractères chocolat pour voir si elles sont égales. Si cette comparaison renvoie true, le premier bloc de code sera exécuté. Sinon, le premier bloc est sauté et  c'est le code du second bloc, celui présent après  else, qui est exécuté.

+ +

Fonctions

+ +

Les {{Glossary("Fonction", "fonctions")}} sont un moyen de compacter des fonctionnalités en vue de leur réutilisation. Quand vous avez besoin de la procédure, vous pouvez appeler une fonction, par son nom, au lieu de ré‑écrire la totalité du code chaque fois. Nous avons déjà utilisé des fonctions plus haut, par exemple :

+ +
    +
  1. + 
    let myVariable = document.querySelector('h1');
    +
    2. +
  2. + 
    alert('Bonjour !');
    +
    3. +
+ +

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 prennent souvent des {{Glossary("Argument", "arguments")}} — bouts de données dont elles ont besoin pour faire leur travail. Ils sont placés entre 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, mais vous devez donner une chaîne comme argument pour indiquer à la fonction ce que l'on souhaite écrire dans cette fenêtre.

+ +

La bonne nouvelle est que vous pouvez définir vos propres fonctions — par exemple, vous pouvez écrire une fonction toute simple qui prend deux arguments et les multiplie :

+ +
function multiply(num1,num2) {
+  let result = num1 * num2;
+  return result;
+}
+ +

Vous pouvez déclarer cette fonction dans la console avant de l'utiliser plusieurs fois :

+ +
multiply(4, 7);
+multiply(20, 20);
+multiply(0.5, 3);
+ +
+

Note : L'instruction return indique au navigateur qu'il faut renvoyer la variable result 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 {{Glossary("Portée", "portée")}} (pour en savoir plus, lisez cet article).

+
+ +

É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 déclenchent du code en réponse. Le meilleur exemple est l'événement cliquer, déclenché par le navigateur quand vous cliquez sur quelque chose avec la souris. À titre de démonstration, saisissez ces quelques lignes dans la console, puis cliquez sur la page en cours :

+ +
document.querySelector('html').addEventListener('click', 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 (sans nom) qui contient le code à exécuter quand l'utilisateur clique.

+ +

On pourra noter que :

+ +
document.querySelector('html').addEventListener('click', function() {});
+ +

est équivalent à :

+ +
let myHTML = document.querySelector('html');
+myHTML.addEventListener('click', 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.

+ +

Ajouter un changeur d'image

+ +

Dans cette section, nous allons incorporer une autre image au site en utilisant quelques fonctionnalités de l'API DOM et un peu de JavaScript pour alterner entre les deux images lorsqu'on clique sur l'image affichée.

+ +
    +
  1. Tout d'abord, trouvez une autre image à afficher sur le site. Assurez‑vous qu'elle soit de même taille que la première, ou le plus possible approchante.
    2. +
  2. Enregistrez cette image dans votre dossier images.
    3. +
  3. Renommez cette image « firefox2.png » (sans les guillemets).
    4. +
  4. Dans le fichier main.js, entrez ce code JavaScript (si votre code « Bonjour, monde » est toujours là, supprimez‑le) : + 
    let myImage = document.querySelector('img');
+
+myImage.addEventListener('click', function() {
+    let mySrc = myImage.getAttribute('src');
+    if (mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute('src', 'images/firefox2.png');
+    } else {
+      myImage.setAttribute('src', 'images/firefox-icon.png');
+    }
+});
    +
    5. +
  5. Sauvegardez tous les fichiers puis chargez index.html dans le navigateur. Maintenant, si vous cliquez sur l'image, elle doit changer pour l'autre !
    6. +
+ +

Dans cet exemple, nous utilisons une référence vers l'élement {{htmlelement("img")}} grâce à la variable myImage. Ensuite, nous égalons la propriété du gestionnaire d'événement onclick de cette variable à une fonction sans nom (une fonction anonyme). Maintenant chaque fois que cet élément est cliqué :

+ +
    +
  1. nous récupèrons la valeur de l'attribut src de l'image.
    2. +
  2. nous utilisons une structure conditionnelle pour voir si la valeur de src est égale au chemin de l'image originale : +
      +
    1. si c'est le cas, nous changeons la valeur de src et indiquons le chemin vers la seconde image, forçant le chargement de cette image dans l'élément {{htmlelement("img")}}.
      2. +
    2. si ce n'est pas le cas (ce qui signifie que l'image a déjà été changée), la valeur de src revient à sa valeur initiale.
      3. +
    +
    3. +
+ +

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 le sauvegarderons avec l'API Web Storage. Nous ajouterons également une option pour pouvoir changer l'utilisateur et le message d'accueil si besoin.

+ +
    +
  1. Dans le fichier index.html, ajoutons la ligne suivante avant l'élément {{htmlelement("script")}} : + + 
    <button>Changer d'utilisateur</button>
    +
    2. +
  2. Dans le fichier main.js, ajoutons le code suivant à la fin du fichier. Cela fait référence au nouveau bouton ajouté et à l'élément de titre puis enregistrons ces références dans des variables : + 
    let myButton = document.querySelector('button');
+let myHeading = document.querySelector('h1');
    +
    3. +
  3. Ajoutons maintenant les fonctionnalités pour avoir ce message d'accueil personnalisé (cela ne servira pas immédiatement mais un peu plus tard) : + 
    function setUserName() {
+  let myName = prompt('Veuillez saisir votre nom.');
+  localStorage.setItem('nom', myName);
+  myHeading.textContent = 'Mozilla est cool, ' + myName;
+}
    + Cette fonction utilise la fonction prompt() qui affiche une boîte de dialogue, un peu comme alert() sauf qu'elle permet à l'utilisateur de saisir des données et de les enregistrer dans une variable quand 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 myName qui contient le nom saisi par l'utilisateur. Enfin, on utilise la propriété textContent du titre pour lui affecter un nouveau contenu.
    4. +
  4. 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 : + 
    if (!localStorage.getItem('nom')) {
+  setUserName();
+} else {
+  let storedName = localStorage.getItem('nom');
+  myHeading.textContent = 'Mozilla est cool, ' + storedName;
+}
    + Ce bloc utilise l'opérateur de négation (NON logique, représenté avec le !) pour vérifier si le navigateur possède une donnée enregistrée appelée nom. Si non, la fonction setUserName() est appelée pour créer cette donnée. Si elle existe (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, comme nous le faisons dans  setUserName().
    5. +
  5. 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 setUserName(). Ce bouton permet à l'utilisateur de modifier la valeur s'il le souhaite: + 
    myButton.addEventListener('click', function() {
+  setUserName();
+});
+
    +
    6. +
+ +

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 cliquer sur 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) :

+ +

+ +

Si vous êtes bloqué, n'hésitez pas à comparer votre travail et vos fichiers avec ceux disponibles sur GitHub qui correspondent à notre modèle finalisé.

+ +

Au fur et à mesure de cet article, nous n'avons fait qu'effleurer la surface de JavaScript. Si vous avez envie d'en savoir plus sur JavaScript, vous pouvez utiliser notre Guide JavaScript.

+ +

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html new file mode 100644 index 0000000000..c4997f9cdf --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -0,0 +1,128 @@ +--- +title: Publier votre site web +slug: Apprendre/Commencer_avec_le_web/Publier_votre_site_web +tags: + - Apprentissage + - Codage + - Débutant + - FTP + - GitHub + - Google App Engine + - Learn + - Web + - publier + - serveur web +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}
+ +
+

Une fois que vous avez fini d'écrire le code et d'organiser les fichiers qui composent votre site, vous devez mettre le site en ligne, ainsi d'autres personnes pourront le trouver. Cet article décrit comment mettre votre extrait de code en ligne avec peu d'efforts.

+
+ +

Quelles sont les options ?

+ +

La publication d'un site web n'est pas une chose simple, essentiellement du fait qu'il y a multiples façons de le faire. Dans cet article, notre objectif n'est pas de documenter toutes les méthodes possibles. Nous discuterons plutôt des avantages et des inconvénients des trois principales stratégies du point de vue d'un débutant,  puis nous vous présenterons une méthode actuellement fonctionnelle.

+ +

Trouver un hébergement et un nom de domaine

+ +

Si vous voulez un contrôle total sur la publication de votre site web, alors vous aurez probablement besoin de dépenser de l'argent pour acheter :

+ + + +

De nombreux sites professionnels sont mis en ligne de cette façon.

+ +

En plus, vous aurez besoin d'un programme {{Glossary("FTP", "File Transfer Protocol (FTP)")}} (voir Combien ça coûte : les logiciels pour plus de détails) pour faire un transfert réel des fichiers du site web sur le serveur. Les programmes FTP varient beaucoup, mais généralement, vous devrez vous connecter sur le serveur web en utilisant des identifiants fournis par votre société d'hébergement (par ex., nom d'utilisateur, mot de passe, nom d'hôte). Le logiciel utilisé pour FTP affiche alors vos fichiers locaux et les fichiers présents sur le serveur dans deux fenêtres, ainsi vous pouvez les transférer dans les deux sens :

+ +

+ +

Suggestions pour trouver hébergement et domaines

+ + + +

Utiliser un outil en ligne comme GitHub ou Google App Engine

+ +

Certains outils vous permettent de publier votre site web en ligne :

+ + + +

À la différence de la plupart des hébergements, ces outils sont d'utilisation gratuite, mais vous n'avez accès qu'à un ensemble limité de fonctionnalités.

+ +

Utiliser un EDI web tel que Thimble

+ +

Il existe un certain nombre d'applications web qui émulent un environnement de développement de site web, vous permettant de saisir du HTML, des CSS et du JavaScript, puis d'afficher le résultat de ce code tel qu'il le serait sur un site web —  le tout dans un seul onglet de navigateur. De façon générale, ces outils sont très simples, très utiles pour apprendre, gratuits (pour les fonctionnalités de bases), et ils hébergent votre page finie à une adresse unique. Cependant, les fonctionnalités de base sont passablement limitées, et les applications ne fournissent habituellement pas d'espace d'hébergement pour des ressources (comme des images).

+ +

Faites des essais avec certains de ces exemples et voyez lequel vous aimez le mieux :

+ + + +

+ +

Publier via GitHub

+ +

Maintenant, nous allons vous montrer comment publier facilement votre site via les pages GitHub.

+ +
    +
  1. Pour commencer, inscrivez-vous sur GitHub et vérifiez votre adresse e-mail.
    2. +
  2. Ensuite, créez un dépôt dans lequel vous placerez vos fichiers.
    3. +
  3. Sur cette page, dans le champ Repository name, entrez username.github.io : username est votre nom d'utilisateur. Ainsi, par exemple, notre ami bobsmith entrera bobsmith.github.io.
    + Également, cochez Initialize this repository with a README, puis cliquez sur Create repository.
    4. +
  4. Ensuite, glissez-déposez le contenu du dossier de votre site Web dans votre référentiel, puis cliquez sur Commit changes. +
    +

    Note : Assurez-vous que votre dossier comporte bien un fichier index.html.

    +
    +
    5. +
  5. Maintenant, naviguez jusqu'à username.github.io pour voir votre site web en ligne. Par exemple, pour le nom d'utilisateur  chrisdavidmills, allez à  chrisdavidmills.github.io. +
    +

    Note : Cela peut prendre quelques minutes avant que votre site web soit actif. S'il ne fonctionne pas immédiatement, attendez quelques minutes, puis essayez à nouveau.

    +
    +
    6. +
+ +

Pour en savoir plus, voyez GitHub Pages Help.

+ +

Lectures pour approfondir

+ + + +

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}

+ +
+
+

Dans ce module

+ + +
+
diff --git a/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html new file mode 100644 index 0000000000..9db46369dd --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html @@ -0,0 +1,171 @@ +--- +title: Le web et ses normes +slug: Apprendre/Commencer_avec_le_web/The_web_and_web_standards +tags: + - Apprendre + - Débutant + - Front-end + - Normes Web + - Standards Web + - Web +translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards +--- +

{{learnsidebar}}

+ +

Cet article apporte des connaissances générales sur le Web — Comment il est né, quelles sont les technologies usuelles du web, comment interagissent-elles ensemble, pourquoi "développeur web" est un excellent choix de carrière, et quels types de bonnes pratiques pourrez-vous apprendrez au fil de ce cours.

+ +

Une brève histoire du web

+ +

Nous allons passer très rapidement sur ce sujet puisqu'il existe de nombreux articles (plus) détaillés de l'histoire du web, vers lesquelles nous pourrons créer des liens un peu plus loin (si cela vous passionne, vous pouvez également rechercher "histoire du web" dans votre moteur de recherche favori et regarder ce que vous trouverez.)

+ +

À la fin des années 60, l'armée américaine a développé un réseau de communication nommé ARPANET. On peut le considérer comme un précurseur du Web puisqu'il travaillait sur la commutation de paquets et constituait la première implémentation de la suite de protocoles TCP/IP. Ces deux technologies forment la base de l'infrastructure sur laquelle est construit Internet

+ +

En 1980, Tim Berners-Lee (souvent abrégé TimBL) a écrit un programme nommé ENQUIRE, basé sur le concept de liens entre différents points. Cela vous dit quelque chose ?

+ +

Avance rapide jusqu'en 1989, où TimBL a écrit Information Management: A Proposal et HyperText at CERN; Ces deux ouvrages fournissent tout le contexte du fonctionnement du Web. Ils ont bénéficié d'une renommé forte, suffisante pour convaincre les patrons de TimBL de le laisser aller de l'avant et de créer un système hypertexte global.

+ +

À la fin des années 90, TimBL avait créé tout le nécessaire pour faire fonctionner une première version du web — HTTP, HTML, le premier navigateur, qui s'appelait WorldWideWeb, un serveur HTTP et quelques pages web à lire.

+ +

Les années suivantes ont vu l'explosion du web, avec la sortie de nombreux navigateurs, la mise en place de milliers de serveurs web et la création de millions de pages web. Ce résumé est très simpliste mais nous vous avions promis qu'il serait bref.

+ +

Un dernier point important à évoquer est la fondation en 1994 par TimBL du World Wide Web Consortium (W3C), une organisation rassemblant des représentants de plusieurs entreprises du numérique pour travailler ensemble à la définition de normes pour les technologies du web. D'autres technologies ont ensuite vu le jour comme le CSS et le JavaScript, et le web a commencé à ressembler à ce que nous connaissons aujourd'hui.

+ +

Les standards du Web

+ +

Les normes Web sont les technologies que nous utilisons pour créer des sites Web. Ces normes existent sous forme de longs documents techniques appelés spécifications, qui détaillent exactement comment la technologie doit fonctionner. Ces documents ne sont pas très utiles pour apprendre à utiliser les technologies qu'ils décrivent (c'est pourquoi nous avons des sites comme MDN Web Docs), mais sont plutôt destinés à être utilisés par des ingénieurs logiciel pour implémenter ces technologies (généralement dans des navigateurs Web).

+ +

Par exemple HTML Living Standard décrit exactement comment le HTML (tous les éléments HTML ainsi que les APIs associées et d'autres technologies proches) devraient être implémentées.

+ +

Les standards Web sont définies par des organisations de normalisation — des institutions qui invite des groupes de personnes de différentes compagnies technologiques à se réunir et s'entendre sur la manière dont les technologies devraient fonctionner pour satisfaire au mieux tous les cas de figure. W3C est le plus connu des organismes de normalisation, même si d'autres existent également, comme le WHATWG (à l'origine de la modernisation du langage HTML), ECMA (qui publie les normes ECMAScript, sur lesquelles est basé JavaScript), Khronos (qui publie des standards pour les graphismes 3D, comme WebGL), et d'autres encore.

+ +

Normes "ouvertes"

+ +

L'un des aspects clés des normes Web, sur lequel TimBL et le W3C se sont immédiatement mis d'accord, est que le Web (et les technologies Web) devraient être libres d'utilisation et de contribution, et non pas freinées par des brevets ou des licences. Par conséquent, n'importe qui peut écrire gratuitement du code pour créer un site Web, et n'importe qui peut contribuer au processus de création de normes et d'écriture de spécifications.

+ +

Le fait que les technologies Web soient créées librement, en collaboration entre de nombreuses entreprises différentes, signifie qu'aucune entreprise ne peut les contrôler, ce qui est une excellente chose. Vous ne voudriez pas qu'une seule entreprise décide soudainement de rendre payant l'intégralité du Web ou de publier une nouvelle version de HTML que tout le monde doive acheter pour continuer à créer des sites Web, ou pire encore, ne décide simplement qu'elle n'est plus intéressée par le Web et l'éteindre.

+ +

Cela permet au Web de rester une ressource publique librement accessible.

+ +

Ne cassez pas le web

+ +

Une phrase qu'on entend souvent à propos des normes web ouvertes est "Ne cassez pas le web" ("don't break the web") — Cela signifie que toute nouvelle technologie Web introduite devrait être rétrocompatible avec ce qui l'a précédée (donc que les anciens sites Web continueront de fonctionner), et compatible avec l'avenir (les technologies futures seront à leur tour compatibles avec ce que nous avons actuellement). En parcourant les explications présentés ici, vous découvrirez comment un travail de conception et d'implémentation bien pensé rend cela possible.

+ +

Être développeur web, c'est bien

+ +

L'industrie du Web est un secteur très attractif si vous êtes à la recherche d'un emploi. Les derniers chiffres publiés estiment le nombre actuel de développeurs Web dans le monde à environ 19 millions, un nombre qui devrait au moins doubler au cours de la prochaine décennie. Le secteur connaissant dans le même temps une pénurie de compétences, y a-t-il un meilleur moment pour apprendre le développement Web?

+ +

Ce n'est cependant pas juste des jeux et de l'amusement - la création de sites Web est une tâche qui se complexifie avec le temps, et vous devrez consacrer du temps à l'étude de plusieurs technologies différentes, de nombreuses méthodes et bonnes pratiques à connaître et tous les cas de figure classiques que vous serez appelé à mettre en œuvre. Vous aurez besoin de quelques mois pour vraiment entrer dans le sujet, puis vous devrez continuer à apprendre afin de maintenir vos connaissances à jour avec tous les nouveaux outils et fonctionnalités qui apparaissent sur le Web, et continuer à pratiquer afin de perfectionner votre travail.

+ +

La seule constante est la variation.

+ +

Cela vous semble difficile ? Pas d'inquiétude, notre objectif est de vous donner toutes les bases pour débuter, ce qui vous facilitera la suite. Une fois que vous aurez accepté le changement permanent et l'inconstance du Web, vous commencerez à vous amuser. En tant que membre de la communauté Web, vous aurez tout un réseau de contacts et de ressources web pour vous aider, qui vous aideront à profiter des possibilités créatives du web.

+ +

Vous êtes désormais un créateur du numérique. Profitez de l'expérience et trouvez votre gagne-pain.

+ +

Vue d'ensemble des outils Web modernes

+ +

Il existe plusieurs technologies à maîtriser si vous souhaitez devenir développeur Web front-end, que nous décrirons brièvement dans cette section. Pour une explication plus détaillée de la façon dont certains d'entre eux interagissent, lisez notre article Le fonctionnement du web.

+ + + +

Vous êtes probablement en train de lire ces mots à l'aide d'un navigateur web (à moins que vous ne l'ayez imprimé ou que vous utilisiez un outil d'accessibilité comme un lecteur d'écran). Les navigateurs web sont des logiciels que les gens utilisent pour naviguer sur le web, comme Firefox, Chrome, Opera, Safari, Edge.

+ +

HTTP

+ +

Hypertext Transfer Protocol, ou HTTP, est un protocole de communication permettant aux navigateurs web de communiquer avec des serveurs web (qui hébergent les sites web). Une conversation type ressemble à quelque chose comme

+ +
"Bonjour Serveur Web. Peux-tu me fournir les fichiers requis pour afficher bbc.co.uk"?
+
+"Bien sûr Navigateur Web - Les voilà"
+
+[Télécharge les fichiers et affiche la page]
+ +

La véritable syntaxe des messages HTTP (appelés requêtes et réponses) ne ressemble pas vraiment à une conversation humaine, mais cela permet d'en avoir un aperçu.

+ +

HTML, CSS et JavaScript

+ +

HTML, CSS, et JavaScript sont les trois principales technologies utilisées pour créer un site web:

+ + + +

Outils

+ +

Une fois que vous maîtriserez les technologies "brutes" qui permettent de construire des pages web (comme HTML, CSS, et JavaScript), vous rencontrerez rapidement divers outils permettant de faciliter ou d'accélerer votre travail. On peut citer comme exemples :

+ + + +

Langages et frameworks « côté serveur »

+ +

HTML, CSS et JavaScript sont des langages "front-end" (ou « côté client »), ce qui signifie qu'ils sont exécutés par le navigateur pour produire un rendu visuel du site web à destination des utilisateurs.

+ +

Il existe une autre catégorie de langages appelés langages "back-end" (ou « côté serveur »), qui s'exécutent sur le serveur avant que le résultat ne soit envoyé au navigateur pour être affiché. Une utilisation typique d'un langage côté serveur consiste à extraire des données d'une base de données et à générer du HTML pour les contenir avant d'envoyer le résultat au navigateur pour que celui-ci l'affiche à l'utilisateur.

+ +

On peut citer comme exemples ASP.NET, Python, PHP, ou NodeJS.

+ +

Les bonnes pratiques du web

+ +

Nous avons rapidement évoqué les technologies utilisées pour créer des sites web et nous allons désormais parler des bonnes pratiques à employer pour s'assurer que vous utilisez ces outils de la meilleure manière possible.

+ +

Lorsque l'on réalise du développement web, la principale cause d'incertitude provient du fait que l'on ne sache pas quelle combinaison de technologies va être utilisée par chacun des utilisateurs du site web:

+ + + +

Ne sachant pas comment vos utilisateurs vont interagir avec votre site, vous devez le concevoir de manière défensive — rendre votre site web aussi flexible que possible, de façon à ce que chacun des utilisateurs mentionnés puissent y accéder, même s'ils n'auront pas la même interaction. En bref, nous essayons de rendre le web accessible à tous, autant que possible.

+ +

Vous rencontrerez les concepts suivants à un moment donné de vos études.

+ + + +

Voir aussi

+ + diff --git a/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html new file mode 100644 index 0000000000..8fbe02c8ab --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,110 @@ +--- +title: Quel sera l'aspect de votre site web ? +slug: Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site +tags: + - Apprendre + - Composition + - Conception + - Débutant + - Planification + - Polices de caractères +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Installation_outils_de_base","Apprendre/Commencer_avec_le_web/Gérer_les_fichiers","Apprendre/Commencer_avec_le_web")}}
+ +
+

Quel sera l'aspect de votre site web ? parle de planifier et concevoir (design), travaux à faire avant d'écrire du code. Voici les questions que cela comprend : « Quelles informations mon site web offrira-t-il ? », « Quelles polices de caractères et quelles couleurs souhaité-je ? » et « Que fait mon site web ? ».

+
+ +

Commençons par le commencement : planification

+ +

Avant de faire quoi que ce soit, vous avez besoin d'idées. Qu'est-ce que votre site web doit-il réellement faire ? Un site web peut pratiquement faire tout ce que vous voulez, mais pour un premier essai, vous devez 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 va parler mon site web ? Aimez-vous les chiens, New York ou Pacman ?
    2. +
  2. Quelles informations vais-je présenter sur le sujet ? Écrivez un titre et quelques paragraphes, et trouvez une image que vous aimeriez mettre sur votre page.
    3. +
  3. Quelle sera l'apparence de mon site web, en simple termes de survol ? Quelle sera la couleur de l'arrière plan ? Quelle sorte de police de caractères est appropriée : formelle, dessin animé, grasse et lourde, subtile ?
    4. +
+ +
+

Note : Les projets complexes nécessitent des lignes directrices (guidelines) détaillées précisant tout : couleurs, polices, espacement entre éléments de la page, style d'écriture adapté, etc. Ceci est parfois appelé un guide de conception ou une charte graphique, vous pouvez en voir un exemple dans Firefox OS Guidelines.

+
+ +

Esquisse de votre concept

+ +

Ensuite, prenez un crayon et du papier et faites une esquisse de l'apparence souhaitée pour votre site. Pour une 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 — vous n'avez pas à être Van Gogh !

+ +

+ +
+

Note : Même sur les sites web réels et complexes, l'équipe de conception commence par faire des esquisses sur papier, puis des maquettes numériques en utilisant un éditeur graphique ou des techniques Web.

+ +

Les équipes Web intègrent souvent un concepteur graphique et {{Glossary("UX", "user-experience")}} (UX). Les concepteurs graphiques, bien sûr, regroupent les visuels du site web. Les concepteurs UX ont un rôle un peu plus abstrait qui consiste à s'occuper de la manière dont les utilisateurs découvriront et interagiront avec le site web.

+
+ +

Choix de vos ressources

+ +

À ce stade, il est bon de commencer à regrouper les contenus qui apparaitront peut-être sur votre page web.

+ +

Texte

+ +

Vous devriez encore avoir vos paragraphes et votre titre puisque 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 #660066. 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. +
  2. Appuyez sur le bouton Afficher l'image.
    3. +
  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 enregistrer l'image. Ou bien, copiez l'adresse web de l'image depuis la barre d'adresse de votre navigateur pour une utilisation ultérieure.
    4. +
+ +

+ +

+ +
+

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'auteur, vous pouvez utiliser le filtre de licence de Google. Tout simplement 1) cliquez sur Outils de recherche, puis  2) Droits d'usage :

+ +

+
+ +

Police de caractères

+ +

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. +
  2. Cliquez sur l'icône « + » (ajouter) à côté de la police que vous voulez.
    3. +
  3. Cliquez sur le bouton « * Family Selected » dans le panneau en bas de la page (« * » dépend du nombre de polices sélectionnées).
    4. +
  4. Sur la fenêtre contextuelle suivante, vous pouvez copier les lignes de code que Google vous donne dans votre éditeur de texte pour les garder pour plus tard.
    5. +
+ +

+ +

+ +

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Installation_outils_de_base", "Apprendre/Commencer_avec_le_web/Gérer_les_fichiers","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + -- cgit v1.2.3-54-g00ecf