Cours

INTRODUCTION AU HTML
Introduction au HTML
Bienvenue dans le monde du code ! L'année dernière, des millions
d'apprenants de notre communauté ont commencé avec
HTML. Pourquoi? 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
frontal. Si c'est la première fois que vous touchez au code, nous sommes ravis
de ce que vous êtes sur le point de créer.
Alors, qu'est-ce que le HTML exactement ? HTML fournit une structure au

contenu apparaissant sur un site Web, tel que des images, du texte ou des
vidéos. Faites un clic droit sur n'importe quelle page sur Internet, choisissez
"Inspecter", et vous verrez HTML dans un panneau de votre écran.
HTML signifie 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 le texte brut qui est enveloppé
dans des éléments HTML.
 Un hypertexte est un texte affiché sur un ordinateur ou un appareil qui
permet d'accéder à d'autres textes par le biais de liens, également
appelés hyperliens . Vous avez probablement cliqué sur quelques
hyperliens sur votre chemin vers ce cours Codecademy.
Apprendre le HTML est la première étape dans la création de sites Web, mais
même un peu de connaissances peut vous aider à injecter des extraits de code
dans des modèles de newsletter, de blog ou de site Web. Au fur et à mesure
que vous continuez à apprendre, 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 du contenu de base sur une page, comme du texte,
des images et des vidéos. Ne vous inquiétez pas si les sites Web ont l'air laids
- nous ne faisons que commencer.
Instructions
1.
Dans l'éditeur de code à droite, saisissez votre nom entre <h1>et </h1>, puis
appuyez sur Exécuter .
Anatomie HTML
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 affiche un élément de paragraphe HTML. Comme

nous pouvons le voir, l'élément paragraphe est composé de :
 Une balise ouvrante ( <p>)
 Le contenu (texte "Hello World!")
 Une balise fermante ( </p>)
Une balise et le contenu qui la sépare s'appellent 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) - une unité de contenu dans

un document HTML formé 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 chevron 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 fermantes ont une barre oblique ( /) à
l'intérieur, juste après le crochet gauche.
Instructions
Étudiez le diagramme de droite pour en savoir plus sur l'anatomie de la

syntaxe HTML. Lorsque vous avez terminé, passez à l'exercice suivant.
Le corps
L'un des principaux éléments HTML 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 a un corps, de nombreux types de contenu différents, y
compris du texte, des images et des boutons, peuvent être ajoutés au corps.
<body>
<p>What's up, doc?</p>
</body>
Instructions
1.
Ajoutez un corps à votre page Web à l'aide de l' <body>élément.
2.
Ajoutez le code suivant entre vos balises body 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 : Bien que certains navigateurs puissent également afficher du
contenu en dehors des balises body pour tenir compte des erreurs
occasionnelles dans votre code HTML, tous les navigateurs ne le font pas ! La
meilleure façon de vous assurer que tout votre code HTML s'affiche de la
même manière dans tous les navigateurs est de vous assurer que vos
éléments restent dans les balises body d'ouverture et de fermeture.
Structure HTML
HTML est organisé comme une collection de relations d'arbres
généalogiques. 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. L'élément enfant est dit 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 space barre) pour une meilleure lisibilité.
Puisqu'il peut y avoir plusieurs niveaux d'imbrication, cette analogie peut être
étendue aux petits-enfants, 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 .
Prenons 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' <div>élément. Les
éléments <h1>et <p>sont des enfants de l' <div>élément. Étant donné que les
éléments <h1>et <p>sont au même niveau, ils sont considérés comme des frères
et sont tous deux des petits-enfants de l' <body>élément.
Comprendre la hiérarchie HTML est important car les éléments enfants

peuvent hériter du comportement et du style de leur élément parent. Vous en
apprendrez plus sur la hiérarchie des pages Web lorsque vous commencerez à
creuser dans CSS.
Instructions
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>
Rubriques
Les titres en HTML sont similaires aux titres des autres types de médias. Par
exemple, dans les journaux, les grands titres sont généralement utilisés pour
capter l'attention du lecteur. D'autres fois, les titres sont utilisés pour décrire le
contenu, comme le titre d'un film ou d'un article éducatif.
HTML suit un schéma similaire. En HTML, il existe six en-têtes ou éléments

d'en-tête différents . Les titres peuvent être utilisés à diverses fins, comme les
sections de titre, les articles ou d'autres formes de contenu.
Voici la liste des éléments d'en-tête disponibles en HTML. Ils sont classés de la

plus grande à la plus petite taille.
1. <h1>— utilisé pour les titres principaux. Tous les autres titres plus petits
sont utilisés pour les sous-titres.
2. <h2>
3. <h3>
4. <h4>
5. <h5>
6. <h6>
L'exemple de code suivant utilise un titre destiné à capter l'attention d'un

lecteur. Il utilise le plus grand en-tête disponible, l'élément d'en-tête principal :
<h1>BREAKING NEWS</h1>
Instructions
1.
Maintenant que vous savez comment structurer les éléments HTML, nous
passerons le reste de la leçon à créer un site Web informatif en utilisant
certains des éléments HTML les plus courants. Nous avons ajouté quelques
éléments pour vous aider à démarrer, mais vous rédigerez vous-même le reste
de la page.
Sous le <h3>titre indiquant Features, ajoutez un <h2>titre indiquant Habitat.

Bloqué? Avoir un indice
2.
Sous le Habitattitre, ajoutez un <h3>titre indiquant Countries with Large Brown Bear
Populations.
3.
Sur la ligne suivante, ajoutez un autre <h3>titre indiquant Countries with Small Brown
Bear Populations.
4.
Enfin, sur la ligne suivante, ajoutez un <h2>titre indiquant Media.
Deux
L'un des éléments les plus populaires en HTML est l' <div>élément. <div>est
l'abréviation de "division" ou un conteneur qui divise la page en sections. Ces
sections sont très utiles pour regrouper des éléments dans votre code HTML.
<body>
<div>
<h1>Why use divs?</h1>
<p>Great for grouping elements!</p>
</div>
</body>
<div>s n'ont pas intrinsèquement de représentation visuelle, mais ils sont très
utiles lorsque nous voulons appliquer des styles personnalisés à nos éléments
HTML. <div>s nous permettent de regrouper des éléments HTML pour
appliquer les mêmes styles à tous les éléments HTML à l'intérieur. Nous
pouvons également styliser l' <div>élément dans son ensemble. Vous pouvez
voir comment cela peut être fait dans le cours Learn CSS .
<div>Les s peuvent contenir du texte ou d'autres éléments HTML, tels que des
liens, des images ou des vidéos. N'oubliez pas de toujours ajouter deux
espaces d'indentation lorsque vous imbriquez des éléments à l'intérieur
de <div>s pour une meilleure lisibilité.
Instructions
1.
Sous le <h1>titre qui indique The Brown Bear, ajoutez une <div> balise d'ouverture.
Placez la </div>balise fermante après l' <h3>élément qui dit Features.
N'oubliez pas d'utiliser votre space barre pour ajouter deux espaces
d'indentation lorsque vous imbriquez des éléments.
2.
Au-dessus de l' <h2>élément qui dit Habitat, ajoutez une <div>balise d'ouverture.
Fermez la </div>balise après l' <h3>élément qui dit Countries with Small Brown Bear
Populations.
3.
Au-dessus de l' <h2>élément qui dit Media, ajoutez une <div>balise d'ouverture.
Placez la </div>balise de fermeture juste au-dessus de la </body>balise de

fermeture.
Les attributs
Si nous voulons développer la balise d'un élément, nous pouvons le faire en
utilisant 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 est vraiment utile lorsque vous
utilisez un élément plus d'une 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
1.
Ajoutez un idattribut avec la valeur "introduction"à la <div>balise qui se trouve sous
l' The Brown Bear <h1>en-tête.
2.
Ajoutez un idattribut avec la valeur "habitat"à la <div>balise d'ouverture qui a
le Habitat <h2>titre comme enfant.
3.
Ajoutez un idattribut avec la valeur "media"à la <div>balise d'ouverture qui a
le Media <h2>titre comme enfant.

Cours

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours

Transféré par

Droits d'auteur :

Formats disponibles

INTRODUCTION AU HTML

Alors, qu'est-ce que le HTML exactement ? HTML fournit une structure au

HTML signifie Langage de balisage hypertexte :

 Un langage de balisage est un langage informatique qui définit la

Le diagramme de droite affiche un élément de paragraphe HTML. Comme

Une balise et le contenu qui la sépare s'appellent un élément HTML. Il existe

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

 Élément HTML (ou simplement, élément) - une unité de contenu dans

Étudiez le diagramme de droite pour en savoir plus sur l'anatomie de la

Ajoutez le code suivant entre vos balises body d'ouverture et de fermeture :

Prenons un exemple plus compliqué qui utilise de nouvelles balises :

Comprendre la hiérarchie HTML est important car les éléments enfants

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

HTML suit un schéma similaire. En HTML, il existe six en-têtes ou éléments

Voici la liste des éléments d'en-tête disponibles en HTML. Ils sont classés de la

L'exemple de code suivant utilise un titre destiné à capter l'attention d'un

Sous le <h3>titre indiquant Features, ajoutez un <h2>titre indiquant Habitat.

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

Au-dessus de l' <h2>élément qui dit Habitat, ajoutez une <div>balise d'ouverture.

Au-dessus de l' <h2>élément qui dit Media, ajoutez une <div>balise d'ouverture.

Placez la </div>balise de fermeture juste au-dessus de la </body>balise de

Un attribut couramment utilisé est le id. Nous pouvons utiliser l' idattribut pour

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

Vous aimerez peut-être aussi