From e26d24940b2234a1a5e63b19d19d298bf36354e2 Mon Sep 17 00:00:00 2001 From: julieng Date: Sun, 14 Nov 2021 14:30:32 +0100 Subject: move *.html to *.md --- .../html_basics/index.html | 229 --------------------- .../html_basics/index.md | 229 +++++++++++++++++++++ 2 files changed, 229 insertions(+), 229 deletions(-) delete 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/html_basics/index.md (limited to 'files/fr/learn/getting_started_with_the_web/html_basics') 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 deleted file mode 100644 index b0a4bab53f..0000000000 --- a/files/fr/learn/getting_started_with_the_web/html_basics/index.html +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: Les bases du HTML -slug: Learn/Getting_started_with_the_web/HTML_basics -tags: - - Apprendre - - Bases HTML - - Code HTML - - Débutant - - HTML - - Site Web -translation_of: Learn/Getting_started_with_the_web/HTML_basics -original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML ---- -
{{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.

- -
-

Note : 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/html_basics/index.md b/files/fr/learn/getting_started_with_the_web/html_basics/index.md new file mode 100644 index 0000000000..b0a4bab53f --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/html_basics/index.md @@ -0,0 +1,229 @@ +--- +title: Les bases du HTML +slug: Learn/Getting_started_with_the_web/HTML_basics +tags: + - Apprendre + - Bases HTML + - Code HTML + - Débutant + - HTML + - Site Web +translation_of: Learn/Getting_started_with_the_web/HTML_basics +original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML +--- +
{{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.

+ +
+

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

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