Introduction au HTML : Introduction au HTML

Introduction au HTML

4 minutes

Bienvenue dans le monde du code ! L'année dernière, des millions d'apprenants de notre communauté
ont commencé avec HTML. Pourquoi ? Le HTML est le squelette de toutes les pages Web. C'est souvent
le premier langage appris par les développeurs, les spécialistes du marketing et les concepteurs et il est
au cœur du travail de développement front-end. Si c'est la première fois que vous touchez au code, nous
sommes impatients de voir ce que vous êtes sur le point de créer.

Mais qu'est-ce que le HTML exactement ? Le HTML fournit une structure au contenu qui apparaît sur un
site Web, comme des images , du texte ou des vidéos . Faites un clic droit sur n'importe quelle page sur
Internet, choisissez « Inspecter » et vous verrez le HTML dans un panneau de votre écran.

HTML signifie HyperText Markup Language (langage de balisage hypertexte) :

Un langage de balisage est un langage informatique qui définit la structure et la présentation du texte
brut.

En HTML, l'ordinateur peut interpréter du texte brut enveloppé dans des éléments HTML .

L'hypertexte est un texte affiché sur un ordinateur ou un appareil qui permet d'accéder à d'autres textes
via des liens , également appelés hyperliens . Vous avez probablement cliqué sur quelques hyperliens
pour accéder à ce cours Codecademy.

Apprendre le HTML est la première étape de la création de sites Web, mais même un peu de
connaissances peuvent vous aider à injecter des extraits de code dans des modèles de newsletter, de
blog ou de site Web. Au fur et à mesure de votre apprentissage, vous pouvez superposer HTML avec CSS
et JavaScript pour créer des sites Web visuellement attrayants et dynamiques. Mais pour l'instant, nous
allons nous concentrer sur la façon d'ajouter et de modifier le contenu de base d'une page, comme du
texte, des images et des vidéos. Ne vous inquiétez pas si les sites Web sont laids, nous ne faisons que
commencer.

Instructions

Point de contrôle 1 franchi

1.

Dans l’éditeur de code à droite, saisissez votre nom entre <h1>et </h1>, puis appuyez sur Exécuter .
Cela devrait ressembler à ceci :

<h1>Richard Hendricks</h1>

Le nom devrait apparaître dans le navigateur à droite après avoir appuyé sur Exécuter .

Introduction au HTML : Anatomie du HTML

Image

Diagramme d'éléments HTML

1. Anatomie HTML

Le HTML est composé d' éléments . Ces éléments structurent la page Web et définissent son contenu.
Voyons comment ils sont écrits.

Le diagramme de droite montre un élément de paragraphe HTML. Comme nous pouvons le voir,
l'élément de paragraphe est composé de :

Une balise d'ouverture ( <p>)

Le contenu (texte « Hello World ! »)

Une balise de fermeture ( </p>)

Une balise et le contenu qui l'entoure sont appelés un élément HTML. Il existe de nombreuses balises
que nous pouvons utiliser pour organiser et afficher du texte et d'autres types de contenu, comme des
images.

Passons rapidement en revue chaque partie de l'élément illustré :

Élément HTML (ou simplement élément) : unité de contenu dans un document HTML formée par des
balises HTML et le texte ou le média qu'il contient.

Balise HTML — le nom de l'élément, entouré d'un crochet angulaire ouvrant ( <) et fermant ( ).>

Balise d'ouverture : la première balise HTML utilisée pour démarrer un élément HTML. Le type de balise
est entouré de crochets angulaires ouvrants et fermants.

Contenu — Les informations (texte ou autres éléments) contenues entre les balises d'ouverture et de
fermeture d'un élément HTML.

Balise de fermeture : la deuxième balise HTML utilisée pour terminer un élément HTML. Les balises de
fermeture contiennent une barre oblique ( /), directement après le crochet angulaire gauche.

Instructions
Étudiez le diagramme à droite pour en savoir plus sur l'anatomie de la syntaxe HTML. Lorsque vous avez
terminé, passez à l'exercice suivant.

2. Le corps

5 minutes

L'un des éléments HTML clés que nous utilisons pour créer une page Web est l' élément body . Seul le
contenu à l'intérieur des balises body d'ouverture et de fermeture peut être affiché à l'écran. Voici à
quoi ressemblent les balises body d'ouverture et de fermeture :

<body>

</body>

Une fois que le fichier possède un corps, de nombreux types de contenu différents, notamment du
texte, des images et des boutons, peuvent être ajoutés au corps.

<body>

<p>What's up, doc?</p>

</body>

Instructions

Point de contrôle 1 activé

1 . Ajoutez un corps à votre page Web à l’aide de l’ <body>élément.

Les instructions de l'étape 2 du point de contrôle ne sont pas disponibles tant que les étapes
précédentes ne sont pas terminées

2 . Ajoutez le code suivant entre vos balises d’ouverture et de fermeture :

<p>"Life is very short and what we have to do must be done in the now." - Audre Lorde</p>

Remarque : certains navigateurs peuvent également restituer du contenu en dehors des balises body
pour corriger les erreurs occasionnelles dans votre code HTML, mais tous les navigateurs ne le font pas !
La meilleure façon de garantir que tout votre code HTML s'affiche de la même manière dans tous les
navigateurs est de veiller à ce que vos éléments restent à l'intérieur des balises body d'ouverture et de
fermeture
3. Structure HTML

5 minutes

Le HTML est organisé comme une collection de relations d'arbre généalogique. Comme vous l'avez vu
dans le dernier exercice, nous avons placé <p>des balises dans <body>des balises. Lorsqu'un élément est
contenu dans un autre élément, il est considéré comme l' enfant de cet élément. On dit que l'élément
enfant est imbriqué à l'intérieur de l' élément parent .

<body>

<p>This paragraph is a child of the body</p>

</body>

Dans l'exemple ci-dessus, l' <p>élément est imbriqué à l'intérieur de l' <body>élément. L' <p>élément
est considéré comme un enfant de l' <body>élément, et l' <body>élément est considéré comme le
parent. Vous pouvez également voir que nous avons ajouté deux espaces d'indentation (à l'aide de la
spacebarre) pour une meilleure lisibilité.

Comme il peut y avoir plusieurs niveaux d'imbrication, cette analogie peut être étendue aux petits-
enfants, aux arrière-petits-enfants et au-delà. La relation entre les éléments et leurs éléments ancêtres
et descendants est connue sous le nom de hiérarchie .

Considérons un exemple plus compliqué qui utilise de nouvelles balises :

<body>

<div>

<h1>Sibling to p, but also grandchild of body</h1>

<p>Sibling to h1, but also grandchild of body</p>

</div>

</body>

Dans cet exemple, l' <body>élément est le parent de l' élément. Les éléments et sont <div>tous deux des
enfants de l' élément. Étant donné que les éléments et sont au même niveau, ils sont considérés comme
des frères et sœurs et sont tous deux des petits-enfants de l' élément.<h1><p><div><h1><p><body>

Il est important de comprendre la hiérarchie HTML, car les éléments enfants peuvent hériter du
comportement et du style de leur élément parent. Vous en apprendrez davantage sur la hiérarchie des
pages Web lorsque vous commencerez à vous intéresser au CSS.

Instructions
Point de contrôle 1 activé

1 . Ajoutez le paragraphe ci-dessous en tant qu’enfant de l’ divélément.

<p>This paragraph is a child of the div element and a grandchild of the body element</p>

4. Rubriques

8 minutes

Les titres en HTML sont similaires à ceux des autres types de médias. Par exemple, dans les journaux, les
gros titres sont généralement utilisés pour attirer l'attention du lecteur. Dans d'autres cas, les titres sont
utilisés pour décrire un contenu, comme le titre d'un film ou d'un article pédagogique.

Le HTML suit un modèle similaire. En HTML, il existe six titres différents , ou éléments de titre . Les titres
peuvent être utilisés à diverses fins, comme titrer des sections, des articles ou d'autres formes de
contenu.

Voici la liste des éléments d'en-tête disponibles en HTML. Ils sont classés du plus grand au plus petit en
termes de taille.

<h1>— utilisé pour les titres principaux. Tous les autres titres plus petits sont utilisés pour les sous-
titres.

<h2>

<h3>

<h4>

<h5>

<h6>

L'exemple de code suivant utilise un titre destiné à capter l'attention du lecteur. Il utilise le titre le plus
long disponible, l'élément de titre principal :

<h1>BREAKING NEWS</h1>

Instructions

Point de contrôle 1 activé

1 .Maintenant que vous savez comment structurer les éléments HTML, nous allons consacrer le reste de
la leçon à la création d'un site Web informatif à l'aide de certains des éléments HTML les plus courants.
Nous avons ajouté quelques éléments pour vous aider à démarrer, mais vous rédigerez le reste de la
page par vous-même.
Sous le <h3>titre qui dit Features, ajoutez un <h2>titre qui dit Habitat.

Pour créer un titre, entourez votre texte de balises d'ouverture et de fermeture de titre . Par exemple,
pour créer un titre indiquant « Mon site », écrivez ce qui suit :<h1>

<h1>My Site</h1>

5. Divisé

7 minutes

L'un des éléments les plus populaires du HTML est l' <div>élément ., <div>qui signifie « division » ou «
conteneur » et qui divise la page en sections. Ces sections sont très utiles pour regrouper les éléments
de votre HTML.

<body>

<div>

<h1>Why use divs?</h1>

<p>Great for grouping elements!</p>

</div>

</body>

<div>Les s n'ont pas de représentation visuelle intrinsèque, mais ils sont très utiles lorsque nous
souhaitons appliquer des styles personnalisés à nos éléments HTML. <div>Ils nous permettent de
regrouper des éléments HTML pour appliquer les mêmes styles à tous les éléments HTML qu'ils
contiennent. Nous pouvons également styliser l' <div>élément dans son ensemble. Vous pouvez voir
comment cela peut être fait dans le cours Apprendre le CSS .

<div>Les s peuvent contenir n'importe quel texte ou d'autres éléments HTML, tels que des liens, des
images ou des vidéos. N'oubliez pas d'ajouter toujours deux espaces d'indentation lorsque vous
imbriquez des éléments à l'intérieur de <div>s pour une meilleure lisibilité.

Instructions

Point de contrôle 1 activé

1 . Sous le <h1>titre indiquant The Brown Bear, ajoutez une <div> balise d’ouverture.

Placez la </div>balise de fermeture après l' <h3>élément qui dit Features.

N'oubliez pas d'utiliser votre spacebarre pour ajouter deux espaces d'indentation lorsque vous
imbriquez des éléments.

Assurez-vous d'imbriquer le contenu à l'intérieur des <body>balises :

<body>

<div>This div is nested</div>

</body>

Pour mettre en retrait, appuyez deux fois sur votre spacebarre pour ajouter deux espaces devant votre
contenu.

Code

Sortir

menu de navigation

6. Attributs

7 minutes

Si nous souhaitons étendre la balise d'un élément, nous pouvons le faire à l'aide d'un attribut. Les
attributs sont du contenu ajouté à la balise d'ouverture d'un élément et peuvent être utilisés de
différentes manières, de la fourniture d'informations à la modification du style. Les attributs sont
constitués des deux parties suivantes :

Le nom de l'attribut

La valeur de l'attribut

Un attribut couramment utilisé est le id. Nous pouvons utiliser l' idattribut pour spécifier un contenu
différent (tel que <div>s) et il est vraiment utile lorsque vous utilisez un élément plusieurs fois. idLes s
ont plusieurs objectifs différents en HTML, mais pour l'instant, nous allons nous concentrer sur la façon
dont ils peuvent nous aider à identifier le contenu de notre page.

Lorsque nous ajoutons un idà un <div>, nous le plaçons dans la balise d'ouverture :

<div id="intro">

<h1>Introduction</h1>

</div>
Instructions

Point de contrôle 1 activé

1 .Ajoutez un idattribut avec la valeur "introduction"à la <div>balise qui se trouve sous le The Brown
Bear <h1>titre.

Lorsque nous ajoutons un idattribut à un élément HTML, nous le plaçons dans la balise d'ouverture :

<div id="summary">

Les instructions de l'étape 2 du point de contrôle ne sont pas disponibles tant que les étapes
précédentes ne sont pas terminées

2 . Ajoutez un idattribut avec la valeur "habitat"à la <div>balise d’ouverture qui a le Habitat <h2>titre
comme enfant.

Les instructions de l'étape 3 du point de contrôle ne sont pas disponibles tant que les étapes
précédentes ne sont pas terminées

3 . Ajoutez un idattribut avec la valeur "media"à la <div>balise d’ouverture qui a le Media <h2>titre
comme enfant.