1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
---
title: Introduction au HTML
slug: Learn/HTML/Introduction_to_HTML
tags:
- Codage
- HTML
- Introduction au HTML
- Landing
- Liens
- Structure
- Texte
- head
- sémantique
translation_of: Learn/HTML/Introduction_to_HTML
original_slug: Apprendre/HTML/Introduction_à_HTML
---
<div>{{LearnSidebar}}</div>
<p>Dans son cœur, {{glossary("HTML")}} est un langage vraiment simple, composé d'éléments appliquables à des fragments de texte dans un document pour leur donner un sens différent (est-ce un paragraphe ? est-ce une liste à puces ? est-ce une partie de tableau ?), pour structurer un document en sections logiques (a‑t‑il un en-tête ? est-il sur trois colonnes ? a-t-il un menu de navigation ?) et pour intégrer du contenu comme images ou vidéos dans une page. Ce module est une introduction aux deux premiers concepts ; il présente les notions fondamentales et la syntaxe à connaître pour comprendre le HTML.</p>
<h2 id="Prérequis">Prérequis</h2>
<p>Il n'y a pas besoin de connaissances préalables en HTML pour parcourir ce module, mais vous devez au moins être familier des ordinateurs et d'une utilisation passive du Web (càd. juste le parcourir et consommer son contenu). Vous devriez avoir un environnement de travail en place tel que détaillé dans <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">cet article</a> et comprendre comment créer et gérer des fichiers tel qu'expliqué dans <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">cet autre article</a> — ces deux articles font partie du module <a href="/fr/docs/Learn/Getting_started_with_the_web">Démarrer avec le Web</a> qui s'adresse aux débutants.</p>
<div class="note">
<p><strong>Note :</strong> Si vous travaillez sur un ordinateur, tablette ou autre appareil sur lequel il n'est pas posssible de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code grâce à des outils en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
</div>
<h2 id="Guides">Guides</h2>
<p>Ce module contient les articles suivants vous permettant de parcourir toute la théorie des bases du HTML ; il vous donnera amplement l'occasion de tester vos compétences.</p>
<dl>
<dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML</a></dt>
<dd>Cet article porte sur les fondements du HTML pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour attiser votre intérêt.</dd>
<dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></dt>
<dd><code>head</code> dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML grâce des CSS), des liens aux favicons et des méta-données (auteur du document, mots-clés décrivant le document, etc.).</dd>
<dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Les concepts fondamentaux du HTML liés au texte</a></dt>
<dd>Un des rôles principaux du HTML est de donner un sens au texte (on dit aussi <strong>sémantiser</strong>), afin que le navigateur sache comment l'afficher correctement. Cet article montre comment utiliser le HTML pour fractionner un bloc de texte en une structure avec titres et paragraphes, ajouter des marques d'emphase ou d'importance à des mots, créer des listes, etc.</dd>
<dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Créer des hyperliens</a></dt>
<dd>Les hyperliens sont vraiment importants — ce sont eux qui tissent la toile du Web. Cet article montre la syntaxe requise pour faire un lien et expose les meilleures pratiques concernant les liens.</dd>
<dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">La mise en forme avancée du texte</a></dt>
<dd>Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article<a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"> Les concepts fondamentaux du HTML liés au texte</a>. Les éléments abordés ici sont moins connus mais tout aussi utiles. Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.</dd>
<dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">La structure d'un document et d'un site web</a></dt>
<dd>De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.</dd>
<dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer du code HTML</a></dt>
<dd>Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider.</dd>
</dl>
<h2 id="Évaluations">Évaluations</h2>
<p>Les exercices suivants vous permettront de tester votre compréhension des bases du HTML couvertes dans les guides ci‑dessus.</p>
<dl>
<dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Utiliser les bons éléments pour une lettre</a></dt>
<dd>Tôt ou tard, nous apprenons tous à écrire une lettre ; cet exemple est utile pour tester vos compétences en mise en forme de texte. L'exercice consiste à baliser une lettre.</dd>
<dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Organiser la structure d'une page</a></dt>
<dd>Dans cette évaluation, vous devrez organiser la structure d'une page simple avec un en-tête, un pied de page, un menu de navigation, un contenu principal et une barre latérale.</dd>
</dl>
<h2 id="Voir_également">Voir également</h2>
<dl>
<dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Web literacy basics 1</a></dt>
<dd>Un excellent cours de la fondation Mozilla qui évoque et teste un grand nombre de compétences évoquées dans le module « Introduction à HTML ». Les apprenants peuvent s'y familiariser avec la lecture, l'écriture et la participation au Web dans ce module en six parties. Découvrez les fondations du Web à travers la production et la collaboration.</dd>
</dl>
|
