0% ont trouvé ce document utile (0 vote)

0 vues291 pages

Tutoriel HTML

HTML, ou Hyper Text Markup Language, est le langage de balisage standard pour créer des pages Web, décrivant leur structure à l'aide d'éléments. Un document HTML commence par une déclaration de type et comprend des balises comme <html>, <head>, et <body> pour organiser le contenu visible. Les éléments HTML peuvent être imbriqués et incluent des balises pour les titres, paragraphes, liens et images, chacun pouvant avoir des attributs pour fournir des informations supplémentaires.

Transféré par

vertinakims

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

0% ont trouvé ce document utile (0 vote)

0 vues291 pages

Tutoriel HTML

Transféré par

vertinakims

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Introduction au HTML

HTML est le langage de balisage standard pour la création de pages Web.

Qu'est-ce que HTML ?

• HTML signifie Hyper Text Markup Language
• HTML est le langage de balisage standard pour la création de pages Web
• HTML décrit la structure d'une page Web
• HTML se compose d'une série d'éléments
• Les éléments HTML indiquent au navigateur comment afficher le contenu
• Les éléments HTML étiquettent des éléments de contenu tels que « ceci est un
titre », « ceci est un paragraphe », « ceci est un lien », etc.

Un document HTML simple

Exemple
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Exemple expliqué
• La <!DOCTYPE html>déclaration définit que ce document est un document HTML5
• L' <html>élément est l'élément racine d'une page HTML
• L' <head>élément contient des méta-informations sur la page HTML
• L' <title>élément spécifie un titre pour la page HTML (qui est affiché dans la
barre de titre du navigateur ou dans l'onglet de la page)
• L' <body>élément définit le corps du document et constitue un conteneur pour
tout le contenu visible, tel que les titres, les paragraphes, les images, les
hyperliens, les tableaux, les listes, etc.
• L' <h1>élément définit un grand titre
• L' <p>élément définit un paragraphe

Qu'est-ce qu'un élément HTML ?

Un élément HTML est défini par une balise de début, du contenu et une balise de fin :

< tagname > Le contenu va ici... < /tagname >

L' élément HTML est tout, de la balise de début à la balise de fin :

< h1 > Mon premier titre < /h1 >

< p > Mon premier paragraphe. < /p >

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

Remarque : Certains éléments HTML n'ont aucun contenu (comme l'élément <br>). Ces
éléments sont appelés éléments vides. Ils n'ont pas de balise de fin !

SUPPRIMER LES PUBLICITÉS

Navigateurs Web
Le but d'un navigateur Web (Chrome, Edge, Firefox, Safari) est de lire des documents
HTML et de les afficher correctement.

Un navigateur n'affiche pas les balises HTML, mais les utilise pour déterminer comment
afficher le document :

Structure de la page HTML

Vous trouverez ci-dessous une visualisation de la structure d’une page HTML :

<html>
<tête>
<title>Titre de la page</title>

</head>
<corps>
<h1>Ceci est un titre</h1>

<p>Ceci est un paragraphe.</p>

<p>Ceci est un autre paragraphe.</p>

</body>

</html>
Remarque : Le contenu de la section <body> s'affichera dans un navigateur. Le
contenu de l'élément <title> s'affichera dans la barre de titre du navigateur ou dans
l'onglet de la page.

Historique HTML
Depuis les débuts du World Wide Web, il existe de nombreuses versions de HTML :

Year Version

1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML

1993 Dave Raggett drafted HTML+

1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2

1999 W3C Recommendation: HTML 4.01

2000 W3C Recommendation: XHTML 1.0

2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

2014 W3C Recommendation: HTML5

2016 W3C Candidate Recommendation: HTML 5.1

2017 W3C Recommendation: HTML5.1 2nd Edition

2017 W3C Recommendation: HTML5.2

Ce tutoriel suit la dernière norme HTML5.

Éditeurs HTML

Un simple éditeur de texte est tout ce dont vous avez besoin pour apprendre le
HTML.

Apprendre le HTML avec Notepad ou

TextEdit
Les pages Web peuvent être créées et modifiées à l’aide d’éditeurs HTML
professionnels.

Cependant, pour apprendre le HTML, nous recommandons un éditeur de texte simple

comme Notepad (PC) ou TextEdit (Mac).

Nous pensons que l’utilisation d’un éditeur de texte simple est un bon moyen
d’apprendre le HTML.

Suivez les étapes ci-dessous pour créer votre première page Web avec Notepad ou
TextEdit.

Étape 1 : Ouvrir le Bloc-notes (PC)

Windows 8 ou version ultérieure :

Ouvrez l' écran de démarrage (le symbole de fenêtre en bas à gauche de votre écran).
Tapez « Bloc-notes » .

Windows 7 ou version antérieure :

Ouvrez Démarrer > Programmes > Accessoires > Bloc-notes

Étape 1 : Ouvrir TextEdit (Mac)
Ouvrir le Finder > Applications > TextEdit

Modifiez également certaines préférences pour que l'application enregistre

correctement les fichiers. Dans Préférences > Format > sélectionnez « Texte brut ».

Ensuite, sous « Ouvrir et enregistrer », cochez la case « Afficher les fichiers HTML sous
forme de code HTML au lieu de texte formaté ».

Ouvrez ensuite un nouveau document pour placer le code.

Étape 2 : Écrire du code HTML

Écrivez ou copiez le code HTML suivant dans le Bloc-notes :

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
PUBLICITÉ

SUPPRIMER LES PUBLICITÉS

Étape 3 : Enregistrer la page HTML

Enregistrez le fichier sur votre ordinateur. Sélectionnez Fichier > Enregistrer sous dans
le menu Bloc-notes.

Nommez le fichier « [Link] » et définissez l’encodage sur UTF-8 (qui est l’encodage
préféré pour les fichiers HTML).
Conseil : Vous pouvez utiliser l'extension de fichier .htm ou .html. Il n'y a aucune
différence ; c'est à vous de choisir.

Étape 4 : affichez la page HTML dans votre

navigateur
Ouvrez le fichier HTML enregistré dans votre navigateur préféré (double-cliquez sur le
fichier ou faites un clic droit et choisissez « Ouvrir avec »).

Le résultat ressemblera à ceci :

Éditeur en ligne W3Schools : « Essayez-le

vous-même »
Avec notre éditeur en ligne gratuit, vous pouvez modifier le code HTML et visualiser le
résultat dans votre navigateur.

C'est l'outil idéal pour tester rapidement du code. Il propose également un codage
couleur et permet d'enregistrer et de partager du code :

Exemple
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Cliquez sur le bouton « Essayez-le vous-même » pour voir comment cela

fonctionne.

Espaces W3Schools
Si vous souhaitez créer votre propre site Web et enregistrer votre code en ligne, essayez
notre créateur de site Web gratuit , appelé W3schools Spaces :
Exemples de base HTML

Dans ce chapitre, nous montrerons quelques exemples HTML de base.

Ne vous inquiétez pas si nous utilisons des balises que vous n’avez pas encore
connues.

Documents HTML
Tous les documents HTML doivent commencer par une déclaration de type de
document : <!DOCTYPE html>.

Le document HTML lui-même commence par <html>et se termine par </html>.

La partie visible du document HTML est comprise entre <body>et </body>.

Exemple
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

La déclaration <!DOCTYPE>
La <!DOCTYPE>déclaration représente le type de document et aide les navigateurs à
afficher correctement les pages Web.
Il ne doit apparaître qu'une seule fois, en haut de la page (avant toutes les balises
HTML).

La <!DOCTYPE>déclaration n'est pas sensible à la casse.

La <!DOCTYPE>déclaration pour HTML5 est :

<!DOCTYPE html>

Titres HTML
Les en-têtes HTML sont définis avec les balises <h1>to .<h6>

<h1>définit le titre le plus important. <h6>définit le titre le moins important :

Exemple
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

SUPPRIMER LES PUBLICITÉS

Paragraphes HTML
Les paragraphes HTML sont définis avec la <p>balise :

Exemple
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Liens HTML
Les liens HTML sont définis avec la <a>balise :

Exemple
<a href="[Link] is a link</a>

La destination du lien est spécifiée dans l' hrefattribut.

Les attributs sont utilisés pour fournir des informations supplémentaires sur les
éléments HTML.

Vous en apprendrez davantage sur les attributs dans un chapitre ultérieur.

Images HTML
Les images HTML sont définies avec la <img>balise.

Le fichier source ( src), le texte alternatif ( alt) width, et heightsont fournis comme
attributs :

Exemple
<img src="[Link]" alt="[Link]" width="104" height="142">

Comment afficher la source HTML

Avez-vous déjà vu une page Web et vous êtes-vous demandé : « Hé ! Comment ont-ils
fait ça ? »

Afficher le code source HTML :

Dans une page HTML, appuyez sur Ctrl+U ou faites un clic droit dessus et sélectionnez
« Afficher le code source ». Un nouvel onglet contenant le code source HTML de la page
s'ouvrira.

Inspecter un élément HTML :

Faites un clic droit sur un élément (ou une zone vide) et choisissez « Inspecter » pour
voir de quoi il est composé (vous verrez à la fois le code HTML et le code CSS). Vous
pouvez également modifier le code HTML ou le code CSS à la volée dans le panneau
« Éléments » ou « Styles » qui s'ouvre.
Éléments HTML

Un élément HTML est défini par une balise de début, du contenu et une balise de
fin.

Éléments HTML
L' élément HTML est tout, de la balise de début à la balise de fin :

< tagname > Le contenu va ici... < /tagname >

Exemples de quelques éléments HTML :

< h1 > Mon premier titre < /h1 >

< p > Mon premier paragraphe. < /p >

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

Remarque : Certains éléments HTML sont vides (comme l'élément <br>). Ces éléments
sont appelés éléments vides. Ils n'ont pas de balise de fin !
Éléments HTML imbriqués
Les éléments HTML peuvent être imbriqués (cela signifie que les éléments peuvent
contenir d'autres éléments).

Tous les documents HTML sont constitués d’éléments HTML imbriqués.

L'exemple suivant contient quatre éléments HTML ( <html>, <body>, <h1> et <p>) :

Exemple
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Exemple expliqué
L' <html>élément est l'élément racine et il définit l'ensemble du document HTML.

Il a une balise de début <html>et une balise de fin </html>.

Ensuite, à l'intérieur de l' <html>élément, il y a un <body> élément :

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

L' <body>élément définit le corps du document.

Il a une balise de début <body>et une balise de fin </body>.

Ensuite, à l'intérieur de l' <body>élément il y a deux autres éléments : <h1>et <p>:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

L' <h1>élément définit un titre.

Il a une balise de début <h1>et une balise de fin </h1>:

<h1>My First Heading</h1>

L' <p>élément définit un paragraphe.

Il a une balise de début <p>et une balise de fin </p>:

<p>My first paragraph.</p>

SUPPRIMER LES PUBLICITÉS

Ne sautez jamais la balise de fin

Certains éléments HTML s'afficheront correctement, même si vous oubliez la balise de
fin :

Exemple
<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>
Cependant, ne vous y fiez jamais ! Des résultats inattendus et des erreurs peuvent
survenir si vous oubliez la balise de fin.

Éléments HTML vides

Les éléments HTML sans contenu sont appelés éléments vides.

La <br>balise définit un saut de ligne et est un élément vide sans balise de fermeture :

Exemple
<p>This is a <br> paragraph with a line break.</p>

Le HTML n'est pas sensible à la casse

Les balises HTML ne sont pas sensibles à la casse : <P>signifie la même chose que <p>.

La norme HTML n'exige pas de balises minuscules, mais le W3C recommande les
minuscules en HTML et exige les minuscules pour les types de documents plus stricts
comme le XHTML.

Chez W3Schools, nous utilisons toujours des noms de balises en minuscules.

Exercice?
Vrai ou faux. Les éléments vides doivent avoir une balise de fermeture.

Vrai

FAUX
Référence des balises HTML
La référence des balises W3Schools contient des informations supplémentaires sur ces
balises et leurs attributs.

Tag Description

<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

Pour une liste complète de toutes les balises HTML disponibles, visitez notre référence
de balises HTML .
Attributs HTML

Les attributs HTML fournissent des informations supplémentaires sur les éléments
HTML.

Attributs HTML
• Tous les éléments HTML peuvent avoir des attributs
• Les attributs fournissent des informations supplémentaires sur les éléments
• Les attributs sont toujours spécifiés dans la balise de début
• Les attributs sont généralement présentés sous forme de paires nom/valeur,
comme : nom="valeur"

L'attribut href
La <a>balise définit un lien hypertexte. L' hrefattribut spécifie l'URL de la page vers
laquelle le lien pointe :

Exemple
<a href="[Link] W3Schools</a>

Vous en apprendrez davantage sur les liens dans notre chapitre Liens HTML .

L'attribut src
La <img>balise permet d'intégrer une image dans une page HTML. L' srcattribut spécifie
le chemin d'accès à l'image à afficher :
Exemple
<img src="img_girl.jpg">

Il existe deux manières de spécifier l'URL dans l' src attribut :

1. URL absolue : Lien vers une image externe hébergée sur un autre site web.
Exemple : src="[Link] .

Remarques : Les images externes peuvent être protégées par des droits d'auteur. Si
vous n'obtenez pas l'autorisation de les utiliser, vous risquez d'enfreindre les lois sur le
droit d'auteur. De plus, vous ne pouvez pas contrôler les images externes ; elles peuvent
être soudainement supprimées ou modifiées.

2. URL relative : Lien vers une image hébergée sur le site web. Ici, l'URL n'inclut pas le
nom de domaine. Si l'URL commence sans barre oblique, elle sera relative à la page
actuelle. Exemple : src="img_girl.jpg". Si l'URL commence par une barre oblique, elle
sera relative au domaine. Exemple : src="/images/img_girl.jpg".

Conseil : Il est presque toujours préférable d’utiliser des URL relatives. Elles ne seront
pas endommagées si vous changez de domaine.

Les attributs de largeur et de hauteur

La <img>balise doit également contenir les attributs widthet height, qui spécifient la
largeur et la hauteur de l'image (en pixels) :

Exemple
<img src="img_girl.jpg" width="500" height="600">

L'attribut alt
L'attribut obligatoire altde la <img> balise spécifie un texte alternatif pour une image, si
celle-ci ne peut être affichée pour une raison quelconque. Cela peut être dû à une
connexion lente, à une erreur dans l' srcattribut, ou à l'utilisation d'un lecteur d'écran.
Exemple
<img src="img_girl.jpg" alt="Girl with a jacket">

Exemple
Voyez ce qui se passe si nous essayons d’afficher une image qui n’existe pas :

<img src="img_typo.jpg" alt="Girl with a jacket">

Vous en apprendrez plus sur les images dans notre chapitre Images HTML .

SUPPRIMER LES PUBLICITÉS

L'attribut style
L' styleattribut est utilisé pour ajouter des styles à un élément, tels que la couleur, la
police, la taille, etc.

Exemple
<p style="color:red;">This is a red paragraph.</p>

Vous en apprendrez davantage sur les styles dans notre chapitre Styles HTML .

L'attribut lang
Vous devez toujours inclure l' langattribut à l'intérieur de la <html>balise pour déclarer la
langue de la page web. Ceci est destiné à faciliter la recherche et l'utilisation par les
moteurs de recherche et les navigateurs.

L'exemple suivant spécifie l'anglais comme langue :

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Les codes pays peuvent également être ajoutés au code langue de l' lang attribut. Ainsi,
les deux premiers caractères définissent la langue de la page HTML, et les deux derniers
le pays.

L'exemple suivant spécifie l'anglais comme langue et les États-Unis comme pays :

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

Vous pouvez voir tous les codes de langue dans notre Référence de code de langue
HTML .

L'attribut du titre
L' titleattribut définit des informations supplémentaires sur un élément.

La valeur de l'attribut title s'affichera sous forme d'info-bulle lorsque vous passerez la
souris sur l'élément :

Exemple
<p title="I'm a tooltip">This is a paragraph.</p>
Nous suggérons : toujours utiliser des
attributs en minuscules
La norme HTML n’exige pas de noms d’attributs en minuscules.

L'attribut title (et tous les autres attributs) peut être écrit en majuscules ou en
minuscules comme title ou TITLE .

Cependant, le W3C recommande des attributs minuscules dans HTML et exige des
attributs minuscules pour des types de documents plus stricts comme XHTML.

Chez W3Schools, nous utilisons toujours des noms d'attributs en minuscules.

Nous suggérons : toujours citer les valeurs

d'attribut
La norme HTML n'exige pas de guillemets autour des valeurs d'attribut.

Cependant, le W3C recommande les guillemets dans HTML et exige des guillemets
pour les types de documents plus stricts comme XHTML.

Bien:
<a href="[Link] our HTML tutorial</a>

Mauvais:
<a href=[Link] our HTML tutorial</a>

Il est parfois nécessaire d'utiliser des guillemets. Cet exemple n'affichera pas
correctement l'attribut « title », car il contient un espace :

Exemple
<p title=Description of W3Schools>
Chez W3Schools, nous utilisons toujours des guillemets autour des valeurs d'attribut.

Guillemets simples ou doubles ?

Les guillemets doubles autour des valeurs d'attribut sont les plus courants en HTML,
mais des guillemets simples peuvent également être utilisés.

Dans certaines situations, lorsque la valeur de l'attribut elle-même contient des

guillemets doubles, il est nécessaire d'utiliser des guillemets simples :

<p title='John "ShotGun" Nelson'>

Ou vice versa :

<p title="John 'ShotGun' Nelson">

Résumé du chapitre
• Tous les éléments HTML peuvent avoir des attributs
• L' hrefattribut de <a>spécifie l'URL de la page vers laquelle le lien mène
• L' srcattribut de <img>spécifie le chemin vers l'image à afficher
• Les attributs widthet de fournissent des informations sur la taille des
imagesheight<img>
• L' altattribut de <img>fournit un texte alternatif pour une image
• L' styleattribut est utilisé pour ajouter des styles à un élément, tels que la couleur, la
police, la taille, etc.
• L' langattribut de la <html>balise déclare la langue de la page Web
• L' titleattribut définit des informations supplémentaires sur un élément

Exercice?
Laquelle des syntaxes suivantes est correcte pour utiliser un attribut HTML ?
<img src='img_girl.jpg'>

Référence d'attribut HTML

Une liste complète de tous les attributs de chaque élément HTML est répertoriée dans
notre : Référence des attributs HTML .
Titres HTML

Les en-têtes HTML sont des titres ou des sous-titres que vous souhaitez afficher
sur une page Web.

Exemple

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Titres HTML
Les en-têtes HTML sont définis avec les balises <h1>to .<h6>

<h1>définit le titre le plus important. <h6>définit le titre le moins important.

Exemple
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Remarque : les navigateurs ajoutent automatiquement un espace blanc (une marge)

avant et après un titre.

Les titres sont importants

Les moteurs de recherche utilisent les titres pour indexer la structure et le contenu de
vos pages Web.

Les utilisateurs parcourent souvent une page en se basant sur ses titres. Il est important
d'utiliser des titres pour illustrer la structure du document.

<h1>Les titres doivent être utilisés pour les titres principaux, suivis <h2>des titres, puis des
titres moins importants <h3>, et ainsi de suite.

Remarque : Utilisez les titres HTML uniquement pour les titres. N'utilisez pas de titres
pour mettre du texte en GRAND ou en gras .

Titres plus grands

Chaque titre HTML possède une taille par défaut. Vous pouvez toutefois spécifier la
taille de n'importe quel titre avec l' styleattribut, via la font-sizepropriété CSS :

Exemple
<h1 style="font-size:60px;">Heading 1</h1>

SUPPRIMER LES PUBLICITÉS

Exercice?
Lequel des en-têtes suivants est l’en-tête le plus grand et le plus important ?

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

Référence des balises HTML

La référence des balises W3Schools contient des informations supplémentaires sur ces
balises et leurs attributs.

Tag Description

<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

Pour une liste complète de toutes les balises HTML disponibles, visitez notre référence
de balises HTML .
Paragraphes HTML

Un paragraphe commence toujours sur une nouvelle ligne et constitue

généralement un bloc de texte.

Paragraphes HTML
L' <p>élément HTML définit un paragraphe.

Un paragraphe commence toujours sur une nouvelle ligne et les navigateurs ajoutent
automatiquement un espace blanc (une marge) avant et après un paragraphe.

Exemple
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Affichage HTML
Vous ne pouvez pas être sûr de la manière dont le HTML sera affiché.

Des écrans grands ou petits et des fenêtres redimensionnées créeront des résultats
différents.

Avec HTML, vous ne pouvez pas modifier l'affichage en ajoutant des espaces
supplémentaires ou des lignes supplémentaires dans votre code HTML.

Le navigateur supprimera automatiquement tous les espaces et lignes supplémentaires

lors de l'affichage de la page :

Exemple
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>

SUPPRIMER LES PUBLICITÉS

Règles horizontales HTML

La <hr>balise définit une rupture thématique dans une page HTML et est le plus souvent
affichée sous la forme d'une règle horizontale.

L' <hr>élément est utilisé pour séparer le contenu (ou définir un changement) dans une
page HTML :

Exemple
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

La <hr>balise est une balise vide, ce qui signifie qu'elle n'a pas de balise de fin.
Sauts de ligne HTML
L' <br>élément HTML définit un saut de ligne.

À utiliser <br>si vous souhaitez un saut de ligne (une nouvelle ligne) sans commencer un
nouveau paragraphe :

Exemple
<p>This is<br>a paragraph<br>with line breaks.</p>

La <br>balise est une balise vide, ce qui signifie qu'elle n'a pas de balise de fin.

Le problème du poème
Ce poème s'affichera sur une seule ligne :

Exemple
<p>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

Solution - L'élément HTML <pre>

L' <pre>élément HTML définit un texte préformaté.
Le texte à l'intérieur d'un <pre>élément est affiché dans une police à largeur fixe
(généralement Courier) et préserve à la fois les espaces et les sauts de ligne :

Exemple
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>

Exercice?
Vrai ou faux. Les paragraphes HTML commencent toujours sur une nouvelle ligne.

Vrai

FAUX

Référence des balises HTML

La référence des balises W3Schools contient des informations supplémentaires sur les
éléments HTML et leurs attributs.

Tag Description
<p> Defines a paragraph

<hr> Defines a thematic change in the content

<br> Inserts a single line break

<pre> Defines pre-formatted text

Pour une liste complète de toutes les balises HTML disponibles, visitez notre référence
de balises HTML .
Styles HTML

L'attribut HTML styleest utilisé pour ajouter des styles à un élément, tels que la
couleur, la police, la taille, etc.

Exemple
Je suis rouge

Je suis bleu

Je suis grand

L'attribut de style HTML

La définition du style d'un élément HTML peut être effectuée avec l' styleattribut.

L'attribut HTML stylea la syntaxe suivante :

La propriété est une propriété CSS. La valeur est une valeur CSS.

Vous en apprendrez davantage sur CSS plus tard dans ce tutoriel.

Couleur d'arrière-plan
La propriété CSS background-colordéfinit la couleur d'arrière-plan d'un élément HTML.
Exemple
Définir la couleur d'arrière-plan d'une page sur bleu poudre :

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

Exemple
Définir la couleur d'arrière-plan pour deux éléments différents :

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>

<p style="background-color:tomato;">This is a paragraph.</p>

</body>

SUPPRIMER LES PUBLICITÉS

Couleur du texte
La colorpropriété CSS définit la couleur du texte d'un élément HTML :

Exemple
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Polices
La font-familypropriété CSS définit la police à utiliser pour un élément HTML :

Exemple
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Taille du texte
La font-sizepropriété CSS définit la taille du texte d'un élément HTML :

Exemple
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Alignement du texte
La text-alignpropriété CSS définit l'alignement horizontal du texte pour un élément
HTML :

Exemple
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

Résumé du chapitre
• Utiliser l' styleattribut pour styliser les éléments HTML
• Utiliser background-colorcomme couleur d'arrière-plan
• Utiliser colorpour les couleurs du texte
• Utiliser font-familypour les polices de texte
• Utiliser font-sizepour les tailles de texte
• Utiliser text-alignpour l'alignement du texte
Formatage de texte HTML

HTML contient plusieurs éléments permettant de définir un texte ayant une

signification particulière.

Exemple
This text is bold

This text is italic

This is subscript and superscript

Éléments de formatage HTML

Les éléments de formatage ont été conçus pour afficher des types de texte spéciaux :

• <b>- Texte en gras

• <strong>- Texte important
• <i>- Texte en italique
• <em>- Texte souligné
• <mark>- Texte marqué
• <small>- Texte plus petit
• <del>- Texte supprimé
• <ins>- Texte inséré
• <sub>- Texte en indice
• <sup>- Texte en exposant

Éléments HTML <b> et <strong>

L'élément HTML <b>définit un texte en gras, sans aucune importance supplémentaire.

Exemple
<b>This text is bold</b>

L'élément HTML <strong>définit un texte d'importance majeure. Son contenu est

généralement affiché en gras.

Exemple
<strong>This text is important!</strong>

SUPPRIMER LES PUBLICITÉS

Éléments HTML <i> et <em>

L'élément HTML <i>définit une partie de texte dans une autre tonalité ou ambiance. Le
contenu est généralement affiché en italique.

Astuce : Le <i>tag est souvent utilisé pour indiquer un terme technique, une phrase
d'une autre langue, une pensée, un nom de navire, etc.

Exemple
<i>This text is italic</i>

L'élément HTML <em>définit le texte mis en valeur. Le contenu à l'intérieur est

généralement affiché en italique.

Astuce : un lecteur d'écran prononcera les mots <em> avec emphase, en utilisant
l'accentuation verbale.

Exemple
<em>This text is emphasized</em>

Élément HTML <small>

L' <small>élément HTML définit un texte plus petit :

Exemple
<small>This is some smaller text.</small>

Élément HTML <mark>

L'élément HTML <mark>définit le texte qui doit être marqué ou mis en évidence :

Exemple
<p>Do not forget to buy <mark>milk</mark> today.</p>

Élément HTML <del>

L'élément HTML <del>définit le texte supprimé d'un document. Les navigateurs barrent
généralement le texte supprimé :

Exemple
<p>My favorite color is <del>blue</del> red.</p>

Élément HTML <ins>

L'élément HTML <ins>définit un texte inséré dans un document. Les navigateurs
soulignent généralement le texte inséré :

Exemple
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

Élément HTML <sub>

L'élément HTML <sub>définit le texte en indice. Ce texte apparaît un demi-caractère en
dessous de la ligne normale et est parfois affiché dans une police plus petite. Il peut être
utilisé pour les formules chimiques, comme H₂O :

Exemple
<p>This is <sub>subscripted</sub> text.</p>

Élément HTML <sup>

L'élément HTML <sup>définit le texte en exposant. Ce texte apparaît un demi-caractère
au-dessus de la ligne normale et est parfois affiché dans une police plus petite. Il peut
être utilisé pour les notes de bas de page, comme WWW [1] :

Exemple
<p>This is <sup>superscripted</sup> text.</p>

Exercice?
Deux des éléments HTML suivants mettent le texte en gras, lesquels ?
<em>et<b>

Éléments de formatage de texte HTML

Tag Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines a part of text in an alternate voice or mood

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

Pour une liste complète de toutes les balises HTML disponibles, visitez notre référence
de balises HTML
Éléments de citation et de
citation HTML

Dans ce chapitre, nous allons passer en revue les éléments

HTML <blockquote>, <q>, <abbr>, <address>, <cite>, et .<bdo>

Exemple
Here is a quote from WWF's website:

For 60 years, WWF has worked to help people and nature thrive. As the world's leading
conservation organization, WWF works in nearly 100 countries. At every level, we collaborate
with people around the world to develop and deliver innovative solutions that protect
communities, wildlife, and the places in which they live.

HTML <blockquote> pour les citations

L'élément HTML <blockquote>définit une section citée à partir d'une autre source.

Les navigateurs indentent généralement <blockquote>les éléments.

Exemple
<p>Here is a quote from WWF's website:</p>
<blockquote cite="[Link]
For 60 years, WWF has worked to help people and nature thrive. As the
world's leading conservation organization, WWF works in nearly 100
countries. At every level, we collaborate with people around the world to
develop and deliver innovative solutions that protect communities,
wildlife, and the places in which they live.
</blockquote>
HTML <q> pour les citations courtes
La <q>balise HTML définit une courte citation.

Les navigateurs insèrent normalement des guillemets autour de la citation.

Exemple
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>

SUPPRIMER LES PUBLICITÉS

HTML <abbr> pour les abréviations

La balise HTML <abbr>définit une abréviation ou un acronyme, comme « HTML »,
« CSS », « M. », « Dr. », « ASAP », « ATM ».

Le marquage des abréviations peut fournir des informations utiles aux navigateurs, aux
systèmes de traduction et aux moteurs de recherche.

Astuce : utilisez l’attribut de titre global pour afficher la description de

l’abréviation/acronyme lorsque vous passez la souris sur l’élément.

Exemple
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>
HTML <adresse> pour les informations de
contact
La balise HTML <address>définit les coordonnées de l'auteur/propriétaire d'un document
ou d'un article.

Les informations de contact peuvent être une adresse e-mail, une URL, une adresse
physique, un numéro de téléphone, un identifiant de réseau social, etc.

Le texte de l' <address>élément est généralement rendu en italique et les navigateurs

ajouteront toujours un saut de ligne avant et après l' <address>élément.

Exemple
<address>
Written by John Doe.<br>
Visit us at:<br>
[Link]<br>
Box 564, Disneyland<br>
USA
</address>

HTML <cite> pour le titre de l'œuvre

La balise HTML <cite>définit le titre d'une œuvre créative (par exemple un livre, un
poème, une chanson, un film, une peinture, une sculpture, etc.).

Remarque : Le nom d’une personne n’est pas le titre d’une œuvre.

Le texte de l' <cite>élément est généralement rendu en italique .

Exemple
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
HTML <bdo> pour le remplacement
bidirectionnel
BDO signifie Bi-Directional Override.

La <bdo>balise HTML est utilisée pour remplacer la direction actuelle du texte :

Exemple
<bdo dir="rtl">This text will be written from right to left</bdo>

Exercice?
Lequel des éléments suivants n’est PAS un élément de citation (en fait, pas du tout un
élément HTML) ?

<q>

<quote>

Éléments de citation et de citation HTML

Tag Description
<abbr> Defines an abbreviation or acronym

<address> Defines contact information for the author/owner of a document

<bdo> Defines the text direction

<blockquote> Defines a section that is quoted from another source

<cite> Defines the title of a work

<q> Defines a short inline quotation

Commentaires HTML

Les commentaires HTML ne sont pas affichés dans le navigateur, mais ils peuvent
vous aider à documenter votre code source HTML.

Balise de commentaire HTML

Vous pouvez ajouter des commentaires à votre source HTML en utilisant la syntaxe
suivante :

Notez qu'il y a un point d'exclamation (!) dans la balise de début, mais pas dans la balise
de fin.

Remarque : les commentaires ne sont pas affichés par le navigateur, mais ils peuvent
vous aider à documenter votre code source HTML.

Ajouter des commentaires

Avec les commentaires, vous pouvez placer des notifications et des rappels dans votre
code HTML :

Exemple

<p>This is a paragraph.</p>

Masquer le contenu
Les commentaires peuvent être utilisés pour masquer du contenu.

Cela peut être utile si vous masquez temporairement du contenu :

Exemple
<p>This is a paragraph.</p>

<p>This is a paragraph too.</p>

Vous pouvez également masquer plusieurs lignes. Tout ce qui se trouve entre « »  sera masqué.

Exemple
Masquer une section de code HTML :

<p>This is a paragraph.</p>

<p>This is a paragraph too.</p>

Les commentaires sont également utiles pour déboguer le code HTML, car vous pouvez
commenter les lignes de code HTML, une par une, pour rechercher des erreurs.

SUPPRIMER LES PUBLICITÉS

Masquer le contenu en ligne

Les commentaires peuvent être utilisés pour masquer des parties au milieu du code
HTML.

Exemple
Masquer une partie d'un paragraphe :

<p>This  is a paragraph.</p>

Couleurs HTML

Les couleurs HTML sont spécifiées avec des noms de couleurs prédéfinis ou avec
des valeurs RVB, HEX, HSL, RGBA ou HSLA.

Noms des couleurs

En HTML, une couleur peut être spécifiée en utilisant un nom de couleur :

Tomate

Orange

DodgerBlue

Vert de mer moyen

Gris

Bleu ardoise
Violet

Gris clair

HTML prend en charge 140 noms de couleurs standard .

Couleur d'arrière-plan
Vous pouvez définir la couleur d’arrière-plan des éléments HTML :

Bonjour le monde

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Exemple
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Couleur du texte
Vous pouvez définir la couleur du texte :

Bonjour le monde
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.

Exemple
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

SUPPRIMER LES PUBLICITÉS

Couleur de bordure
Vous pouvez définir la couleur des bordures :

Bonjour le monde
Bonjour le monde
Bonjour le monde
Exemple
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Valeurs de couleur
En HTML, les couleurs peuvent également être spécifiées à l'aide de valeurs RVB, de
valeurs HEX, de valeurs HSL, de valeurs RGBA et de valeurs HSLA.

Les trois éléments <div> suivants ont leur couleur d'arrière-plan définie avec les valeurs
RVB, HEX et HSL :

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Les deux éléments <div> suivants ont leur couleur d'arrière-plan définie avec des
valeurs RGBA et HSLA, qui ajoutent un canal Alpha à la couleur (ici, nous avons une
transparence de 50 %) :

rgba(255, 99, 71, 0,5)

hsla(9, 100 %, 64 %, 0,5)

Exemple
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
Exercice?
Vous souvenez-vous des noms de couleurs HTML légales ? Laquelle des couleurs suivantes est
légale ?

Pomme

Banane

Tomate

En savoir plus sur les valeurs de couleur

Vous en apprendrez davantage sur RVB , HEX et HSL dans les prochains chapitres.

Couleurs HTML RVB et RGBA

Une valeur de couleur RVB représente les sources de lumière ROUGE, VERTE et
BLEUE.

Une valeur de couleur RGBA est une extension de RVB avec un canal Alpha
(opacité).

Valeurs de couleur RVB

En HTML, une couleur peut être spécifiée comme une valeur RVB, en utilisant cette
formule :
rgb ( rouge, vert , bleu )

Chaque paramètre (rouge, vert et bleu) définit l'intensité de la couleur avec une valeur
comprise entre 0 et 255.

Cela signifie qu'il y a 256 x 256 x 256 = 16777216 couleurs possibles !

Par exemple, rgb(255, 0, 0) s'affiche en rouge, car le rouge est défini sur sa valeur la plus
élevée (255) et les deux autres (vert et bleu) sont définis sur 0.

Un autre exemple, rgb(0, 255, 0) s'affiche en vert, car le vert est défini sur sa valeur la
plus élevée (255) et les deux autres (rouge et bleu) sont définis sur 0.

Pour afficher le noir, définissez tous les paramètres de couleur sur 0, comme ceci : rgb(0,
0, 0).

Pour afficher le blanc, définissez tous les paramètres de couleur sur 255, comme ceci :
rgb(255, 255, 255).

Exemple

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

Expérimentez en mélangeant les valeurs RVB ci-dessous :

rgb(255, 99, 71)

ROUGE

255

VERT

BLEU

71
PUBLICITÉ

SUPPRIMER LES PUBLICITÉS

Nuances de gris
Les nuances de gris sont souvent définies à l’aide de valeurs égales pour les trois
paramètres :

Exemple
rgb(60, 60, 60)

rgb(100, 100, 100)

rgb(140, 140, 140)

rgb(180, 180, 180)

rgb(200, 200, 200)

rgb(240, 240, 240)

Valeurs de couleur RGBA

Les valeurs de couleur RGBA sont une extension des valeurs de couleur RVB avec un
canal Alpha - qui spécifie l'opacité d'une couleur.

Une valeur de couleur RGBA est spécifiée avec :

rgba( rouge, vert , bleu, alpha )

Le paramètre alpha est un nombre compris entre 0,0 (entièrement transparent) et 1,0
(pas transparent du tout) :

Exemple

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

Expérimentez en mélangeant les valeurs RGBA ci-dessous :

rgba(255, 99, 71, 0,5)

ROUGE
255

VERT

BLEU

ALPHA

0,5

Couleurs HTML HEX

Une couleur hexadécimale est spécifiée avec : #RRGGBB, où les entiers

hexadécimaux RR (rouge), GG (vert) et BB (bleu) spécifient les composants de la
couleur.

Valeurs de couleur HEX

En HTML, une couleur peut être spécifiée à l'aide d'une valeur hexadécimale sous la
forme :

# rrggbb

Où rr (rouge), gg (vert) et bb (bleu) sont des valeurs hexadécimales comprises entre 00

et ff (identiques au nombre décimal 0-255).

Par exemple, #ff0000 s'affiche en rouge, car le rouge est défini sur sa valeur la plus
élevée (ff) et les deux autres (vert et bleu) sont définis sur 00.

Un autre exemple, #00ff00 s'affiche en vert, car le vert est défini sur sa valeur la plus
élevée (ff) et les deux autres (rouge et bleu) sont définis sur 00.
Pour afficher le noir, définissez tous les paramètres de couleur sur 00, comme ceci :
#000000.

Pour afficher le blanc, définissez tous les paramètres de couleur sur ff, comme ceci :
#ffffff.

Expérimentez en mélangeant les valeurs HEX ci-dessous :

#ff6347

ROUGE

VERT

BLEU

Exemple

#ff0000

#0000ff

#3cb371
#ee82ee

#ffa500

#6a5acd

SUPPRIMER LES PUBLICITÉS

Nuances de gris
Les nuances de gris sont souvent définies à l’aide de valeurs égales pour les trois
paramètres :

Exemple

#404040

#686868
#a0a0a0

#bebebe

#dcdcdc

#f8f8f8

Couleurs HTML HSL et HSLA

HSL signifie teinte, saturation et luminosité.

Les valeurs de couleur HSLA sont une extension de HSL avec un canal Alpha
(opacité).

Valeurs de couleur HSL

En HTML, une couleur peut être spécifiée à l'aide de la teinte, de la saturation et de la
luminosité (HSL) sous la forme :

hsl( teinte , saturation , luminosité )

La teinte est un degré sur la roue chromatique de 0 à 360. 0 est rouge, 120 est vert et
240 est bleu.
La saturation est une valeur en pourcentage. 0 % signifie une nuance de gris et 100 %
est la couleur complète.

La luminosité est également une valeur en pourcentage. 0 % est noir et 100 % est blanc.

Expérimentez en mélangeant les valeurs HSL ci-dessous :

hsl(0, 100%, 50%)

TEINTE

SATURATION

100%

LÉGÈRETÉ

50%

Exemple

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Saturation
La saturation peut être décrite comme l’intensité d’une couleur.

100% est une couleur pure, sans nuances de gris.

50% c'est 50% gris, mais on peut toujours voir la couleur.

0% est complètement gris ; vous ne pouvez plus voir la couleur.

Exemple

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

SUPPRIMER LES PUBLICITÉS

Légèreté
La luminosité d'une couleur peut être décrite comme la quantité de lumière que vous
souhaitez donner à la couleur, où 0 % signifie pas de lumière (noir), 50 % signifie 50 %
de lumière (ni foncé ni clair) et 100 % signifie une luminosité totale (blanc).

Exemple

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

Nuances de gris
Les nuances de gris sont souvent définies en définissant la teinte et la saturation sur 0,
et en ajustant la luminosité de 0 % à 100 % pour obtenir des nuances plus foncées/plus
claires :

Exemple

hsl(0, 0%, 20%)

hsl(0, 0%, 30%)

hsl(0, 0%, 40%)

hsl(0, 0%, 60%)

hsl(0, 0%, 70%)

hsl(0, 0%, 90%)

Valeurs de couleur HSLA

Les valeurs de couleur HSLA sont une extension des valeurs de couleur HSL, avec un
canal Alpha - qui spécifie l'opacité d'une couleur.

Une valeur de couleur HSLA est spécifiée avec :

hsla( teinte, saturation , luminosité, alpha )

Le paramètre alpha est un nombre compris entre 0,0 (entièrement transparent) et 1,0
(pas transparent du tout) :

Expérimentez en mélangeant les valeurs HSLA ci-dessous :

hsla(0, 100%, 50%, 0,5)

TEINTE

SATURATION

100%

LÉGÈRETÉ

50%

ALPHA

0,5

Exemple

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

Styles HTML - CSS

CSS signifie feuilles de style en cascade.

Le CSS permet de gagner beaucoup de temps. Il permet de contrôler la mise en

page de plusieurs pages web simultanément.

CSS = Styles et couleurs

M a n i p u l e r l e t e x t e

C o u l e u r s , b o î t e s

Qu'est-ce que CSS ?

Les feuilles de style en cascade (CSS) sont utilisées pour formater la mise en page d'une
page Web.

Avec CSS, vous pouvez contrôler la couleur, la police, la taille du texte, l'espacement
entre les éléments, la façon dont les éléments sont positionnés et disposés, les images
d'arrière-plan ou les couleurs d'arrière-plan à utiliser, les différents affichages pour
différents appareils et tailles d'écran, et bien plus encore !

Astuce : Le terme « cascading » signifie qu'un style appliqué à un élément parent

s'appliquera également à tous les éléments enfants de ce parent. Ainsi, si vous définissez
la couleur du corps du texte sur « bleu », tous les titres, paragraphes et autres éléments
de texte du corps du texte auront la même couleur (sauf indication contraire) !
Utilisation de CSS
Le CSS peut être ajouté aux documents HTML de 3 manières :

• En ligne - en utilisant l' styleattribut à l'intérieur des éléments HTML

• Interne - en utilisant un <style>élément dans la <head>section
• Externe - en utilisant un <link> élément pour créer un lien vers un fichier CSS externe

La méthode la plus courante pour ajouter du CSS consiste à conserver les styles dans
des fichiers CSS externes. Cependant, dans ce tutoriel, nous utiliserons des styles
internes et en ligne, car cela est plus facile à démontrer et à tester par vous-même.

CSS en ligne
Un CSS en ligne est utilisé pour appliquer un style unique à un seul élément HTML.

Un CSS en ligne utilise l' styleattribut d'un élément HTML.

L'exemple suivant définit la couleur du texte de l' <h1>élément sur bleu et la couleur du
texte de l' <p>élément sur rouge :

Exemple
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

SUPPRIMER LES PUBLICITÉS

CSS interne
Un CSS interne est utilisé pour définir un style pour une seule page HTML.

Un CSS interne est défini dans la <head>section d'une page HTML, au sein
d'un <style>élément.

L'exemple suivant définit la couleur du texte de TOUS les <h1>éléments de cette page
sur bleu et la couleur du texte de TOUS les <p>éléments sur rouge. De plus, la page
s'affichera avec un arrière-plan « bleu poudre ».

Exemple
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS externe
Une feuille de style externe est utilisée pour définir le style de nombreuses pages HTML.

Pour utiliser une feuille de style externe, ajoutez un lien vers celle-ci dans
la <head>section de chaque page HTML :

Exemple
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

La feuille de style externe peut être écrite dans n'importe quel éditeur de texte. Le fichier
ne doit contenir aucun code HTML et doit être enregistré avec l'extension .css.

Astuce : avec une feuille de style externe, vous pouvez modifier l’apparence d’un site
Web entier en modifiant un seul fichier !

Couleurs, polices et tailles CSS

Nous allons ici présenter quelques propriétés CSS fréquemment utilisées. Vous en
apprendrez davantage ultérieurement.

La propriété CSS colordéfinit la couleur du texte à utiliser.

La propriété CSS font-familydéfinit la police à utiliser.

La propriété CSS font-sizedéfinit la taille du texte à utiliser.

Exemple
Utilisation des propriétés CSS color, font-family et font-size :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Bordure CSS
La borderpropriété CSS définit une bordure autour d'un élément HTML.

Astuce : vous pouvez définir une bordure pour presque tous les éléments HTML.

Exemple
Utilisation de la propriété de bordure CSS :

p {
border: 2px solid powderblue;
}

Rembourrage CSS
La propriété CSS paddingdéfinit un remplissage (espace) entre le texte et la bordure.

Exemple
Utilisation des propriétés de bordure et de remplissage CSS :

p {
border: 2px solid powderblue;
padding: 30px;
}

Marge CSS
La propriété CSS margindéfinit une marge (espace) à l'extérieur de la bordure.

Exemple
Utilisation des propriétés de bordure et de marge CSS :

p {
border: 2px solid powderblue;
margin: 50px;
}

Lien vers CSS externe

Les feuilles de style externes peuvent être référencées avec une URL complète ou avec
un chemin relatif à la page Web actuelle.
Exemple
Cet exemple utilise une URL complète pour créer un lien vers une feuille de style :

<link rel="stylesheet" href="[Link]

Exemple
Cet exemple renvoie vers une feuille de style située dans le dossier html du site Web
actuel :

<link rel="stylesheet" href="/html/[Link]">

Exemple
Cet exemple renvoie vers une feuille de style située dans le même dossier que la page
actuelle :

<link rel="stylesheet" href="[Link]">

Vous pouvez en savoir plus sur les chemins de fichiers dans le chapitre Chemins de
fichiers HTML .

Résumé du chapitre
• Utiliser l' styleattribut HTML pour le style en ligne
• Utiliser l' <style>élément HTML pour définir le CSS interne
• Utilisez l' <link>élément HTML pour faire référence à un fichier CSS externe
• Utilisez l' <head>élément HTML pour stocker les éléments <style> et <link>
• Utiliser la colorpropriété CSS pour les couleurs du texte
• Utiliser la font-familypropriété CSS pour les polices de texte
• Utiliser la font-sizepropriété CSS pour les tailles de texte
• Utiliser la borderpropriété CSS pour les bordures
• Utiliser la propriété CSS paddingpour l'espace à l'intérieur de la bordure
• Utiliser la propriété CSS marginpour l'espace en dehors de la bordure

Astuce : vous pouvez en apprendre beaucoup plus sur CSS dans notre tutoriel CSS
Liens HTML

On trouve des liens dans presque toutes les pages web. Ils permettent aux
utilisateurs de cliquer pour naviguer d'une page à l'autre.

Liens HTML - Hyperliens

Les liens HTML sont des hyperliens.

Vous pouvez cliquer sur un lien et accéder à un autre document.

Lorsque vous déplacez la souris sur un lien, la flèche de la souris se transforme en une
petite main.

Remarque : Un lien ne doit pas nécessairement être du texte. Il peut s'agir d'une image
ou de tout autre élément HTML.

Liens HTML - Syntaxe

La <a>balise HTML définit un lien hypertexte. Sa syntaxe est la suivante :

<a href="url">link text</a>

L'attribut le plus important de l' <a> élément est l' hrefattribut, qui indique la destination
du lien.

Le texte du lien est la partie qui sera visible pour le lecteur.

En cliquant sur le texte du lien, le lecteur sera redirigé vers l'adresse URL spécifiée.

Exemple
Cet exemple montre comment créer un lien vers [Link] :

<a href="[Link] [Link]!</a>

Par défaut, les liens apparaîtront comme suit dans tous les navigateurs :

• Un lien non visité est souligné et bleu

• Un lien visité est souligné et violet
• Un lien actif est souligné et rouge

Astuce : les liens peuvent bien sûr être stylisés avec CSS, pour obtenir un autre look !

Liens HTML - L'attribut cible

Par défaut, la page liée s'affiche dans la fenêtre de navigateur actuelle. Pour modifier ce
paramètre, vous devez spécifier une autre cible pour le lien.

L' targetattribut spécifie où ouvrir le document lié.

L' targetattribut peut avoir l'une des valeurs suivantes :

• _self- Par défaut. Ouvre le document dans la même fenêtre/onglet où il a été cliqué.
• _blank- Ouvre le document dans une nouvelle fenêtre ou un nouvel onglet
• _parent- Ouvre le document dans le cadre parent
• _top- Ouvre le document dans le corps entier de la fenêtre

Exemple
Utilisez target="_blank" pour ouvrir le document lié dans une nouvelle fenêtre ou un
nouvel onglet du navigateur :

<a href="[Link] target="_blank">Visit W3Schools!</a>

URL absolues vs URL relatives

Les deux exemples ci-dessus utilisent une URL absolue (une adresse Web complète)
dans l' hrefattribut.

Un lien local (un lien vers une page du même site Web) est spécifié avec une URL
relative (sans la partie « [Link] ») :

Exemple
<h2>Absolute URLs</h2>
<p><a href="[Link]
<p><a href="[Link]

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/[Link]">CSS Tutorial</a></p>

SUPPRIMER LES PUBLICITÉS

Liens HTML - Utiliser une image comme lien

Pour utiliser une image comme lien, il suffit de mettre le <img> tag à l'intérieur du <a>tag
:

Exemple
<a href="[Link]">
<img src="[Link]" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Lien vers une adresse e-mail

Utilisez- [Link] à l'intérieur de l' hrefattribut pour créer un lien qui ouvre le
programme de messagerie de l'utilisateur (pour lui permettre d'envoyer un nouvel e-
mail) :

Exemple
<a href="[Link] email</a>

Bouton comme lien

Pour utiliser un bouton HTML comme lien, vous devez ajouter du code JavaScript.

JavaScript vous permet de spécifier ce qui se passe lors de certains événements, comme
un clic sur un bouton :

Exemple
<button onclick="[Link]='[Link]'">HTML Tutorial</button>

Astuce : apprenez-en plus sur JavaScript dans notre didacticiel JavaScript .

Titres des liens

Cet titleattribut fournit des informations supplémentaires sur un élément. Ces
informations sont généralement affichées sous forme d'info-bulle lorsque la souris
survole l'élément.

Exemple
<a href="[Link] title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
En savoir plus sur les URL absolues et les
URL relatives
Exemple
Utilisez une URL complète pour créer un lien vers une page Web :

<a href="[Link] tutorial</a>

Exemple
Lien vers une page située dans le dossier html du site Web actuel :

<a href="/html/[Link]">HTML tutorial</a>

Exemple
Lien vers une page située dans le même dossier que la page actuelle :

<a href="[Link]">HTML tutorial</a>

Vous pouvez en savoir plus sur les chemins de fichiers dans le chapitre Chemins de
fichiers HTML .

Résumé du chapitre
• Utiliser l' <a>élément pour définir un lien
• Utilisez l' hrefattribut pour définir l'adresse du lien
• Utilisez l' targetattribut pour définir où ouvrir le document lié
• Utilisez l' <img>élément (à l'intérieur <a>) pour utiliser une image comme lien
• Utilisez le [Link] à l'intérieur de l' hrefattribut pour créer un lien qui ouvre le
programme de messagerie de l'utilisateur

Balises de lien HTML

Tag Description

<a> Defines a hyperlink

Liens HTML - Différentes couleurs

Un lien HTML s'affiche dans une couleur différente selon qu'il a été visité, qu'il n'a
pas été visité ou qu'il est actif.

Couleurs des liens HTML

Par défaut, un lien apparaîtra comme ceci (dans tous les navigateurs) :

• Un lien non visité est souligné et bleu

• Un lien visité est souligné et violet
• Un lien actif est souligné et rouge

Vous pouvez modifier les couleurs de l'état du lien en utilisant CSS :

Exemple
Ici, un lien non visité sera vert et non souligné. Un lien visité sera rose et non souligné.
Un lien actif sera jaune et souligné. De plus, au survol d'un lien (a:hover), il deviendra
rouge et souligné.

a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}

a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>

SUPPRIMER LES PUBLICITÉS

Boutons de lien
Un lien peut également être stylisé sous forme de bouton, en utilisant CSS :

Ceci est un lien

Exemple
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}
</style>

Pour en savoir plus sur CSS, consultez notre tutoriel CSS .

Balises de lien HTML

Tag Description

<a> Defines a hyperlink

Pour une liste complète de toutes les balises HTML disponibles, visitez notre référence
de balises HTML .

Liens HTML - Créer des signets

Les liens HTML peuvent être utilisés pour créer des signets, afin que les lecteurs
puissent accéder à des parties spécifiques d'une page Web.

Créer un signet en HTML

Les signets peuvent être utiles si une page Web est très longue.

Pour créer un signet, créez d’abord le signet, puis ajoutez-y un lien.

Lorsque le lien est cliqué, la page défile vers le bas ou vers le haut jusqu'à
l'emplacement contenant le signet.

Exemple
Tout d’abord, utilisez l’ idattribut pour créer un signet :

<h2 id="C4">Chapter 4</h2>

Ensuite, ajoutez un lien vers le signet (« Aller au chapitre 4 »), depuis la même page :

Exemple
<a href="#C4">Jump to Chapter 4</a>

Vous pouvez également ajouter un lien vers un signet sur une autre page :

<a href="html_demo.html#C4">Jump to Chapter 4</a>

SUPPRIMER LES PUBLICITÉS

Résumé du chapitre
• Utilisez l' idattribut (id=" value ") pour définir des signets dans une page
• Utilisez l' hrefattribut (href="# value ") pour créer un lien vers le signet

Exercice?
Quel attribut HTML est utilisé pour créer un signet ?
L' bookmarkattribut

L' anchorattribut

L' idattribut

Balises de lien HTML

Tag Description

<a> Defines a hyperlink

Images HTML

Les images peuvent améliorer la conception et l’apparence d’une page Web.

Exemple
<img src="pic_trulli.jpg" alt="Italian Trulli">

Exemple
<img src="img_girl.jpg" alt="Girl in a jacket">

Exemple
<img src="img_chania.jpg" alt="Flowers in Chania">

Syntaxe des images HTML

La <img>balise HTML est utilisée pour intégrer une image dans une page Web.

Les images ne sont pas techniquement insérées dans une page web ; elles sont liées à
des pages web. La <img>balise crée un espace réservé à l'image référencée.

La <img>balise est vide, elle contient uniquement des attributs et n'a pas de balise de
fermeture.

La <img>balise a deux attributs obligatoires :

• src - Spécifie le chemin d'accès à l'image

• alt - Spécifie un texte alternatif pour l'image

Syntaxe
<img src="url" alt="alternatetext">
L'attribut src
L'attribut obligatoire srcspécifie le chemin (URL) vers l'image.

Remarque : Lorsqu'une page web se charge, c'est le navigateur qui récupère l'image du
serveur web et l'insère dans la page. Par conséquent, assurez-vous que l'image reste
bien à sa place sur la page web, sinon vos visiteurs verront une icône de lien brisé.
L'icône et le alttexte s'affichent si le navigateur ne trouve pas l'image.

Exemple
<img src="img_chania.jpg" alt="Flowers in Chania">

SUPPRIMER LES PUBLICITÉS

L'attribut alt
L'attribut required altfournit un texte alternatif pour une image, si l'utilisateur pour une
raison quelconque ne peut pas la visualiser (en raison d'une connexion lente, d'une
erreur dans l'attribut src ou si l'utilisateur utilise un lecteur d'écran).

La valeur de l' altattribut doit décrire l'image :

Exemple
<img src="img_chania.jpg" alt="Flowers in Chania">

Si un navigateur ne trouve pas d’image, il affichera la valeur de l’ alt attribut :

Exemple
<img src="[Link]" alt="Flowers in Chania">
Conseil : Un lecteur d’écran est un logiciel qui lit le code HTML et permet à l’utilisateur
d’« écouter » le contenu. Les lecteurs d’écran sont utiles aux personnes malvoyantes ou
souffrant de troubles de l’apprentissage.

Taille de l'image - Largeur et hauteur

Vous pouvez utiliser l' styleattribut pour spécifier la largeur et la hauteur d'une image.

Exemple
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">

Alternativement, vous pouvez utiliser les attributs widthet height:

Exemple
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Les attributs widthet heightdéfinissent toujours la largeur et la hauteur de l'image en

pixels.

Remarque : Indiquez toujours la largeur et la hauteur d'une image. Si elles ne sont pas
spécifiées, la page web risque de scintiller pendant le chargement de l'image.

Largeur et hauteur, ou style ?

Les attributs width, height, et stylesont tous valides en HTML.

Nous suggérons cependant d'utiliser l' styleattribut. Il empêche les feuilles de style de
modifier la taille des images :

Exemple
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

<img src="[Link]" alt="HTML5 Icon" width="128" height="128">

<img src="[Link]" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

Images dans un autre dossier

Si vous avez vos images dans un sous-dossier, vous devez inclure le nom du dossier
dans l' srcattribut :

Exemple
<img src="/images/[Link]" alt="HTML5
Icon" style="width:128px;height:128px;">

Images sur un autre serveur/site Web

Certains sites Web pointent vers une image sur un autre serveur.

Pour pointer vers une image sur un autre serveur, vous devez spécifier une URL absolue
(complète) dans l' srcattribut :

Exemple
<img src="[Link] alt="W3Sch
[Link]">
Remarques sur les images externes : Les images externes peuvent être protégées par
des droits d'auteur. Si vous n'obtenez pas l'autorisation de les utiliser, vous risquez
d'enfreindre les lois sur les droits d'auteur. De plus, vous ne pouvez pas contrôler les
images externes ; elles peuvent être soudainement supprimées ou modifiées.

Images animées
HTML permet des GIF animés :

Exemple
<img src="[Link]" alt="Computer
Man" style="width:48px;height:48px;">

Image comme lien

Pour utiliser une image comme lien, placez la <img>balise à l'intérieur de la <a> balise :

Exemple
<a href="[Link]">
<img src="[Link]" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>

Image flottante
Utilisez la propriété CSS floatpour laisser l'image flotter à droite ou à gauche d'un
texte :

Exemple
<p><img src="[Link]" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="[Link]" alt="Smiley

face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

Astuce : pour en savoir plus sur CSS Float, lisez notre tutoriel CSS Float .

Formats d'image courants

Voici les types de fichiers image les plus courants, qui sont pris en charge dans tous les
navigateurs (Chrome, Edge, Firefox, Safari, Opera) :

Abbreviation File Format File Extension

APNG Animated Portable Network Graphics .apng

GIF Graphics Interchange Format .gif

ICO Microsoft Icon .ico, .cur

JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp

PNG Portable Network Graphics .png

SVG Scalable Vector Graphics .svg

Résumé du chapitre
• Utiliser l' <img>élément HTML pour définir une image
• Utilisez l' srcattribut HTML pour définir l'URL de l'image
• Utilisez l' altattribut HTML pour définir un texte alternatif pour une image, si elle ne
peut pas être affichée
• Utilisez le HTML widthet heightles attributs ou le CSS widthet height les propriétés
pour définir la taille de l'image
• Utilisez la floatpropriété CSS pour laisser l'image flotter vers la gauche ou vers la droite

Remarque : Le chargement des images volumineuses prend du temps et peut ralentir

votre page web. Utilisez les images avec précaution.

Exercice?
Quel est un élément HTML correct pour ajouter une image ?

L' <image>élément

L' <img>élément

L' <media>élément

Balises d'image HTML

Tag Description

<img> Defines an image

<map> Defines an image map

<area> Defines a clickable area inside an image map

<picture> Defines a container for multiple image resources

Cartes d'images HTML

Avec les cartes d’images HTML, vous pouvez créer des zones cliquables sur une
image.

Cartes d'images
La balise HTML <map>définit une image cliquable. Une image cliquable est une image
comportant des zones cliquables. Ces zones sont définies par une ou
plusieurs <area>balises.

Essayez de cliquer sur l’ordinateur, le téléphone ou la tasse de café dans l’image ci-
dessous :
Exemple
Voici le code source HTML de la carte image ci-dessus :

<img src="[Link]" alt="Workplace" usemap="#workmap">

Comment ça marche?
L’idée derrière une carte d’image est que vous devriez pouvoir effectuer différentes
actions en fonction de l’endroit de l’image sur lequel vous cliquez.
Pour créer une carte image, vous avez besoin d'une image et d'un code HTML décrivant
les zones cliquables.

SUPPRIMER LES PUBLICITÉS

L'image
L'image est insérée à l'aide de la <img>balise. La seule différence avec les autres images
est qu'il faut ajouter un usemapattribut :

<img src="[Link]" alt="Workplace" usemap="#workmap">

La usemapvaleur commence par un hashtag #suivi du nom de la carte d'image et est

utilisée pour créer une relation entre l'image et la carte d'image.

Astuce : vous pouvez utiliser n’importe quelle image comme carte d’image !

Créer une carte d'image

Ensuite, ajoutez un <map>élément.

L' <map>élément est utilisé pour créer une carte d'image et est lié à l'image à l'aide de
l' name attribut requis :

L' nameattribut doit avoir la même valeur que l' attribut <img>de usemap.

Les zones
Ensuite, ajoutez les zones cliquables.

Une zone cliquable est définie à l'aide d'un <area>élément.

Forme
Vous devez définir la forme de la zone cliquable et vous pouvez choisir l'une de ces
valeurs :

• rect- définit une région rectangulaire

• circle- définit une région circulaire
• poly- définit une région polygonale
• default- définit toute la région

Vous devez également définir certaines coordonnées pour pouvoir placer la zone
cliquable sur l'image.

Forme="rect"
Les coordonnées sont shape="rect"fournies par paires, une pour l'axe des x et une pour
l'axe des y.

Ainsi, les coordonnées 34,44sont situées à 34 pixels de la marge gauche et à 44 pixels du

haut :
Les coordonnées 270,350sont situées à 270 pixels de la marge gauche et à 350 pixels du
haut :
Nous avons maintenant suffisamment de données pour créer une zone rectangulaire
cliquable :

Exemple
<area shape="rect" coords="34, 44, 270, 350" href="[Link]">

C'est la zone qui devient cliquable et qui renverra l'utilisateur vers la page
"[Link]" :

Forme="cercle"
Pour ajouter une zone circulaire, localisez d’abord les coordonnées du centre du cercle :

337,300
Spécifiez ensuite le rayon du cercle :

44pixels
Vous disposez désormais de suffisamment de données pour créer une zone circulaire
cliquable :

Exemple
<area shape="circle" coords="337, 300, 44" href="[Link]">

C'est la zone qui devient cliquable et qui enverra l'utilisateur vers la page "[Link]" :

Forme="poly"
Il shape="poly"contient plusieurs points de coordonnées, ce qui crée une forme formée
de lignes droites (un polygone).

Cela peut être utilisé pour créer n'importe quelle forme.

Comme peut-être une forme de croissant !

Comment pouvons-nous faire en sorte que le croissant de l'image ci-dessous devienne

un lien cliquable ?
Nous devons trouver les coordonnées x et y pour toutes les arêtes du croissant :
Les coordonnées viennent par paires, une pour l'axe des x et une pour l'axe des y :

Exemple
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329
,85,355,58,352,37,322,40,259,103,161,128,147" href="[Link]">
C'est la zone qui devient cliquable et qui renverra l'utilisateur vers la page
"[Link]" :

Image Map et JavaScript

Une zone cliquable peut également déclencher une fonction JavaScript.

Ajoutez un clickévénement à l' <area>élément pour exécuter une fonction JavaScript :

Exemple
Ici, nous utilisons l'attribut onclick pour exécuter une fonction JavaScript lorsque la zone
est cliquée :

Résumé du chapitre
• Utilisez l' <map>élément HTML pour définir une image cliquable
• Utilisez l' <area>élément HTML pour définir les zones cliquables dans la carte d'image
• Utilisez l' usemapattribut HTML de l' <img>élément pour pointer vers une image
cliquable

Images d'arrière-plan HTML

Une image d'arrière-plan peut être spécifiée pour presque tous les éléments
HTML.

Image d'arrière-plan sur un élément HTML

Pour ajouter une image d'arrière-plan sur un élément HTML, utilisez l' styleattribut
HTML et la background-imagepropriété CSS :

Exemple
Ajouter une image d'arrière-plan sur un élément <p> :

<p style="background-image: url('img_girl.jpg');">

Vous pouvez également spécifier l'image d'arrière-plan dans l' <style> élément, dans
la <head> section :

Exemple
Spécifiez l'image d'arrière-plan dans l' <style> élément :

Image d'arrière-plan sur une page

Si vous souhaitez que la page entière ait une image d'arrière-plan, vous devez spécifier
l'image d'arrière-plan sur l' <body>élément :

Exemple
Ajouter une image d’arrière-plan pour la page entière :

Exemple
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>

Pour éviter que l'image d'arrière-plan ne se répète, définissez la background-

repeatpropriété sur no-repeat.

Exemple
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>

SUPPRIMER LES PUBLICITÉS

Couverture de fond
Si vous souhaitez que l'image d'arrière-plan couvre l'intégralité de l'élément, vous
pouvez définir la background-sizepropriété sur cover.

De plus, pour vous assurer que l'élément entier est toujours couvert, définissez
la background-attachmentpropriété surfixed:
De cette façon, l'image d'arrière-plan couvrira l'intégralité de l'élément, sans étirement
(l'image conservera ses proportions d'origine) :

Exemple
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>

Étirement de l'arrière-plan
Si vous souhaitez que l'image d'arrière-plan s'étire pour s'adapter à l'élément entier,
vous pouvez définir la background-sizepropriété sur 100% 100% :

Essayez de redimensionner la fenêtre du navigateur et vous verrez que l'image s'étirera,

mais couvrira toujours l'élément entier.

Exemple
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>

Exercice?
Quelle est une propriété CSS correcte pour définir des images d’arrière-plan ?
La bgpropriété

La imagepropriété

La background-imagepropriété

En savoir plus sur CSS

À partir des exemples ci-dessus, vous avez appris que les images d’arrière-plan peuvent
être stylisées à l’aide des propriétés d’arrière-plan CSS.

Pour en savoir plus sur les propriétés d’arrière-plan CSS, étudiez notre didacticiel
d’arrière-plan CSS

Élément HTML <picture>

L'élément HTML <picture>vous permet d'afficher différentes images pour

différents appareils ou tailles d'écran.
L'élément HTML <picture>
L'élément HTML <picture>offre aux développeurs Web plus de flexibilité dans la
spécification des ressources d'image.

L' <picture>élément contient un ou plusieurs <source>éléments, chacun faisant référence

à une image différente via l' srcset attribut. Ainsi, le navigateur peut choisir l'image la
mieux adaptée à la vue et/ou à l'appareil.

Chaque <source>élément possède un mediaattribut qui définit quand l'image est la plus
appropriée.

Exemple
Afficher différentes images pour différentes tailles d’écran :

Remarque : Spécifiez toujours un <img>élément comme dernier élément enfant de

l' <picture>élément. Cet <img>élément est utilisé par les navigateurs qui ne <picture>le
prennent pas en charge ou si aucune <source>balise ne correspond.
PUBLICITÉ

SUPPRIMER LES PUBLICITÉS

Quand utiliser l'élément Image

Cet élément a deux objectifs principaux<picture> :

1. Bande passante
Si votre écran ou appareil est petit, il n'est pas nécessaire de charger un fichier image
volumineux. Le navigateur utilisera le premier <source> élément avec les valeurs
d'attribut correspondantes et ignorera les éléments suivants.

2. Prise en charge des formats

Certains navigateurs ou appareils peuvent ne pas prendre en charge tous les formats
d'image. Grâce à cet <picture>élément, vous pouvez ajouter des images de tous
formats ; le navigateur utilisera le premier format reconnu et ignorera les éléments
suivants.

Exemple
Le navigateur utilisera le premier format d’image qu’il reconnaît :

Remarque : le navigateur utilisera le premier <source>élément avec les valeurs d’attribut

correspondantes et ignorera tous <source>les éléments suivants.
Exercice?
L’un de ces éléments n’est PAS un élément HTML légal, lequel ?

L' <image>élément

L' <picture>élément

L' <source>élément

Balises d'image HTML

Tag Description

<img> Defines an image

<map> Defines an image map

<area> Defines a clickable area inside an image map

<picture> Defines a container for multiple image resources

Icône de favori HTML

Un favicon est une petite image affichée à côté du titre de la page dans l'onglet
du navigateur.

Comment ajouter un favicon en HTML

Vous pouvez utiliser l'image de votre choix comme favicon. Vous pouvez également
créer votre propre favicon sur des sites comme [Link] .

Astuce : un favicon est une petite image, il doit donc s'agir d'une image simple avec un
contraste élevé.

Une image favicon s'affiche à gauche du titre de la page dans l'onglet du navigateur,
comme ceci :

Pour ajouter un favicon à votre site web, enregistrez-le à la racine de votre serveur web
ou créez un dossier « images » dans ce répertoire. Le nom courant d'une image favicon
est « [Link] ».

Ensuite, ajoutez un <link>élément à votre fichier « [Link] », après l’ <title>élément,

comme ceci :

Exemple
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/[Link]">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Enregistrez maintenant le fichier « [Link] » et rechargez-le dans votre navigateur.

Votre onglet devrait maintenant afficher votre favicon à gauche du titre de la page.

SUPPRIMER LES PUBLICITÉS

Prise en charge du format de fichier Favicon

Le tableau suivant montre la prise en charge du format de fichier pour une image
favicon :

Browser ICO PNG GIF JPEG SVG

Edge Yes Yes Yes Yes Yes

Chrome Yes Yes Yes Yes Yes

Firefox Yes Yes Yes Yes Yes

Opera Yes Yes Yes Yes Yes

Safari Yes Yes Yes Yes Yes

Résumé du chapitre
• Utilisez l' <link>élément HTML pour insérer un favicon

Exercice?
Dans quel élément HTML le Favicon est-il défini ?

L' <img>élément

L' <body>élément

L' <link>élément

L' <style>élément

Balise de lien HTML

Tag Description
<link> Defines the relationship between a document and an external resource
Titre de la page HTML

Chaque page Web doit avoir un titre pour décrire le sens de la page.

L'élément titre
L' <title>élément ajoute un titre à votre page :

Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>

The content of the document......

</body>
</html>

Le titre est affiché dans la barre de titre du navigateur :

Qu'est-ce qu'un bon titre ?
Le titre doit décrire le contenu et la signification de la page.

Le titre de la page est essentiel pour l'optimisation des moteurs de recherche (SEO). Il
est utilisé par les algorithmes des moteurs pour déterminer l'ordre d'affichage des
pages dans les résultats de recherche.

L' <title>élément:

• définit un titre dans la barre d'outils du navigateur

• fournit un titre à la page lorsqu'elle est ajoutée aux favoris
• affiche un titre pour la page dans les résultats des moteurs de recherche

Alors, essayez de rendre le titre aussi précis et significatif que possible !

Balise de titre HTML

Tag Description

<title> Defines the title of the document

Tableaux HTML

Les tableaux HTML permettent aux développeurs Web d'organiser les données
en lignes et en colonnes.

Exemple

Company Contact Country

Alfreds Futterkiste Maria Anders Germany

Centro comercial Moctezuma Francisco Chang Mexico

Ernst Handel Roland Mendel Austria

Island Trading Helen Bennett UK

Laughing Bacchus Winecellars Yoshi Tannamuri Canada

Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Définir un tableau HTML
Un tableau en HTML est constitué de cellules de tableau à l'intérieur de lignes et de
colonnes.

Exemple
Un tableau HTML simple :

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

Cellules du tableau
Chaque cellule du tableau est définie par une balise <td>et une </td>balise.

td signifie données de table.

Tout ce qui se trouve entre <td>et </td> constitue le contenu d’une cellule de tableau.

Exemple
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>

Remarque : une cellule de tableau peut contenir toutes sortes d’éléments HTML : texte,
images, listes, liens, autres tableaux, etc.

SUPPRIMER LES PUBLICITÉS

Lignes du tableau
Chaque ligne du tableau commence par une balise <tr>et se termine par
une </tr>balise.

tr signifie ligne de tableau.

Exemple
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

Vous pouvez avoir autant de lignes que vous le souhaitez dans un tableau ; assurez-
vous simplement que le nombre de cellules est le même dans chaque ligne.

Remarque : Il arrive qu'une ligne contienne moins ou plus de cellules qu'une autre.
Vous en apprendrez plus à ce sujet dans un chapitre ultérieur.
En-têtes de tableau
Parfois, vous souhaitez que vos cellules servent d'en-têtes de tableau. Dans ce cas,
utilisez la <th>balise au lieu de la <td>balise suivante :

th signifie en-tête de tableau.

Exemple
Que la première ligne soit constituée des cellules d’en-tête du tableau :

<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

Par défaut, le texte <th>des éléments est en gras et centré, mais vous pouvez modifier
cela avec CSS.

Exercice?
Quel est le nom de balise correct pour une cellule de tableau en HTML ?
<tc>

<td>

<tr>

Balises de tableau HTML

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a <colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

Bordures de tableau HTML

Les tableaux HTML peuvent avoir des bordures de styles et de formes différents.

Comment ajouter une bordure

Pour ajouter une bordure, utilisez la borderpropriété CSS sur les éléments table, thet td:

Exemple
table, th, td {
border: 1px solid black;
}

Bordures de tableau réduites

Pour éviter d'avoir des bordures doubles comme dans l'exemple ci-dessus, définissez
la border-collapse propriété CSS sur collapse.

Cela fera que les frontières s'effondreront en une seule frontière :

Exemple
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

SUPPRIMER LES PUBLICITÉS

Style des bordures de tableau

Si vous définissez une couleur d'arrière-plan pour chaque cellule et donnez à la bordure
une couleur blanche (la même que l'arrière-plan du document), vous obtenez
l'impression d'une bordure invisible :
Exemple
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}

Bordures de table ronde

Avec la border-radiuspropriété, les bordures obtiennent des coins arrondis :

Exemple
table, th, td {
border: 1px solid black;
border-radius: 10px;
}

Sautez la bordure autour du tableau en omettant tablele sélecteur CSS :

Exemple
th, td {
border: 1px solid black;
border-radius: 10px;
}

Bordures de tableau en pointillés

Avec la border-stylepropriété, vous pouvez définir l'apparence de la bordure.

Les valeurs suivantes sont autorisées :

• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• none
• hidden

Exemple
th, td {
border-style: dotted;
}
Couleur de bordure
Avec la border-colorpropriété, vous pouvez définir la couleur de la bordure.

Exemple
th, td {
border-color: #96D4D4;
}

Tailles des tableaux HTML

Les tableaux HTML peuvent avoir des tailles différentes pour chaque colonne,
ligne ou le tableau entier.
Utilisez l' styleattribut avec les propriétés widthou height pour spécifier la
taille d'un tableau, d'une ligne ou d'une colonne.

Largeur du tableau HTML

Pour définir la largeur d'un tableau, ajoutez l' style attribut à l' <table>élément :

Exemple
Définissez la largeur du tableau à 100 % :

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Remarque : l’utilisation d’un pourcentage comme unité de taille pour une largeur
signifie quelle sera la largeur de cet élément par rapport à son élément parent, qui dans
ce cas est l’ <body> élément.

Largeur des colonnes du tableau HTML

Pour définir la taille d'une colonne spécifique, ajoutez l' style attribut sur un
élément <th>ou <td>:

Exemple
Définissez la largeur de la première colonne à 70 % :

<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

SUPPRIMER LES PUBLICITÉS

Hauteur des lignes du tableau HTML

Pour définir la hauteur d’une ligne spécifique, ajoutez l’ style attribut sur un élément de
ligne de tableau :

Exemple
Définissez la hauteur de la deuxième ligne à 200 pixels :

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

En-têtes de tableau HTML

Les tableaux HTML peuvent avoir des en-têtes pour chaque colonne ou ligne, ou
pour plusieurs colonnes/lignes.
Tobias LINUS
ÉMIL

8h00

9h00

10h00

11h00

12h00

13h00

LUN MAR ÉPOUSER JEU VEN

8h00

9h00

10h00

11h00

12h00

DÉCEMBRE

En-têtes de tableau HTML

Les en-têtes de tableau sont définis par thdes éléments. Chaque thélément représente
une cellule de tableau.

Exemple
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

En-têtes de tableau verticaux

Pour utiliser la première colonne comme en-tête de tableau, définissez la première
cellule de chaque ligne comme un <th>élément :

Exemple
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>
PUBLICITÉ

SUPPRIMER LES PUBLICITÉS

Aligner les en-têtes de tableau

Par défaut, les en-têtes de tableau sont en gras et centrés :

Prénom Nom de famille Âge

Jill Forgeron 50

Veille Jackson 94

Pour aligner à gauche les en-têtes du tableau, utilisez la text-alignpropriété CSS :

Exemple
th {
text-align: left;
}

En-tête pour plusieurs colonnes

Vous pouvez avoir un en-tête qui s'étend sur deux colonnes ou plus.

Nom Âge

Jill Forgeron 50

Veille Jackson 94

Pour ce faire, utilisez l’ colspanattribut sur l’ <th>élément :

Exemple
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Vous en apprendrez plus sur colspan et rowspan dans le chapitre Table colspan &
rowspan .

Légende du tableau
Vous pouvez ajouter une légende qui sert de titre à l’ensemble du tableau.

Économies mensuelles

Mois Économies

Janvier 100 $

Février 50 $

Pour ajouter une légende à un tableau, utilisez la <caption>balise :

Exemple
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

Remarque : la <caption>balise doit être insérée immédiatement après la <table>balise.

Rembourrage et espacement des

tableaux HTML

Les tableaux HTML peuvent ajuster le remplissage à l'intérieur des cellules, ainsi
que l'espace entre les cellules.

Avec rembourrage

Bonjour Bonjour Bonjour

Avec espacement

Bonjour Bonjour Bonjour

Tableau HTML - Remplissage des cellules

Le remplissage des cellules est l'espace entre les bords des cellules et le contenu de la
cellule.

Par défaut, le remplissage est défini sur 0.

Pour ajouter un remplissage aux cellules du tableau, utilisez la paddingpropriété CSS :

Exemple
th, td {
padding: 15px;
}

Pour ajouter un remplissage uniquement au-dessus du contenu, utilisez la padding-

toppropriété.

Ajoutez un remplissage aux autres côtés avec les propriétés padding-bottom, padding-
left, et :padding-right

Exemple
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}

Tableau HTML - Espacement des cellules

L'espacement des cellules est l'espace entre chaque cellule.

Par défaut, l'espace est défini sur 2 pixels.

Pour modifier l'espace entre les cellules du tableau, utilisez la border-spacingpropriété

CSS sur l' table élément :

Exemple
table {
border-spacing: 30px;
}

Tableau HTML Colspan et

Rowspan

Les tableaux HTML peuvent avoir des cellules qui s'étendent sur plusieurs lignes
et/ou colonnes.

NOM
AVRIL

2022

FIESTA

Tableau HTML - Colspan

Pour étendre une cellule sur plusieurs colonnes, utilisez l' colspanattribut :

Exemple
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>

Remarque : la valeur de l’ colspanattribut représente le nombre de colonnes à couvrir.

Tableau HTML - Étendue des lignes
Pour créer une étendue de cellule sur plusieurs lignes, utilisez l' rowspanattribut :

Exemple
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>

Remarque : la valeur de l’ rowspanattribut représente le nombre de lignes à couvrir.

tyle de tableau HTML

Utilisez CSS pour améliorer l'apparence de vos tableaux.

Tableau HTML - Rayures zébrées

Si vous ajoutez une couleur d'arrière-plan sur chaque autre ligne du tableau, vous
obtiendrez un joli effet de rayures zébrées.
1 2 3 4

5 6 7 8

9 10 11 12

13 14 15 16

17 18 19 20

Pour styliser chaque autre élément de ligne du tableau, utilisez le :nth-

child(even) sélecteur comme ceci :

Exemple
tr:nth-child(even) {
background-color: #D6EEEE;
}

Remarque : si vous utilisez (odd)à la place de (even), le style s'appliquera sur les lignes
1, 3, 5, etc. au lieu de 2, 4, 6, etc.

Tableau HTML - Rayures zébrées verticales

Pour créer des rayures zébrées verticales, stylisez chaque autre colonne , au lieu de
chaque autre ligne .

1 2 3 4

5 6 7 8

9 10 11 12

13 14 15 16

17 18 19 20

Définissez les :nth-child(even)éléments de données du tableau comme ceci :

Exemple
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}

Remarque : placez le :nth-child()sélecteur sur les deux théléments td si vous souhaitez

avoir le style sur les en-têtes et les cellules de tableau standard.

SUPPRIMER LES PUBLICITÉS

Combinez des rayures zébrées verticales et

horizontales
Vous pouvez combiner le style des deux exemples ci-dessus et vous aurez des rayures
sur chaque autre ligne et chaque autre colonne.

Si vous utilisez une couleur transparente, vous obtiendrez un effet de chevauchement.

Utilisez une rgba()couleur pour spécifier la transparence de la couleur :

Exemple
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}

Séparateurs horizontaux
Prénom Nom de famille Économies

Pierre Griffon 100 $

Lois Griffon 150 $

Joe Swanson 300 $

Si vous spécifiez des bordures uniquement au bas de chaque ligne du tableau, vous
aurez un tableau avec des séparateurs horizontaux.

Ajoutez la border-bottompropriété à tous trles éléments pour obtenir des séparateurs

horizontaux :

Exemple
tr {
border-bottom: 1px solid #ddd;
}
Table survolable
Utilisez le :hoversélecteur trpour mettre en surbrillance les lignes du tableau au passage
de la souris :

Prénom Nom de famille Économies

Pierre Griffon 100 $

Lois Griffon 150 $

Joe Swanson 300 $

Exemple
tr:hover {background-color: #D6EEEE;}

Groupe de colonnes de
tableaux HTML

L' <colgroup>élément est utilisé pour styliser des colonnes spécifiques d'un
tableau.
Groupe de colonnes de tableaux HTML
Si vous souhaitez styliser les deux premières colonnes d'un tableau, utilisez
les éléments <colgroup> et .<col>

LUN MAR ÉPOUSER JEU VEN ASSIS SOLEIL

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

L' <colgroup>élément doit être utilisé comme conteneur pour les spécifications de la
colonne.

Chaque groupe est spécifié avec un <col>élément.

L' spanattribut spécifie le nombre de colonnes qui reçoivent le style.

L' styleattribut spécifie le style à donner aux colonnes.

Remarque : il existe une sélection très limitée de propriétés CSS légales pour les
colgroups .

Exemple
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...

Remarque : la <colgroup>balise doit être un enfant d'un <table>élément et doit être

placée avant tout autre élément du tableau, comme <thead>, <tr>, <td> etc., mais après
l' <caption>élément, s'il est présent.
Propriétés CSS juridiques
Il n'existe qu'une sélection très limitée de propriétés CSS autorisées à être utilisées dans
le groupe de colonnes :

widthpropriété
visibilitypropriété
backgroundpropriétés
borderpropriétés

Toutes les autres propriétés CSS n'auront aucun effet sur vos tableaux.

SUPPRIMER LES PUBLICITÉS

Plusieurs éléments Col

Si vous souhaitez styliser plusieurs colonnes avec des styles différents, utilisez
plusieurs <col>éléments à l'intérieur du <colgroup>:

Exemple
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
<col span="3" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Colgroups vides
Si vous souhaitez styliser des colonnes au milieu d'un tableau, insérez un <col>élément
« vide » (sans style) pour les colonnes avant :

Exemple
<table>
<colgroup>
<col span="3">
<col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...

Masquer les colonnes

Vous pouvez masquer des colonnes avec la visibility: collapsepropriété :

Exemple
<table>
<colgroup>
<col span="2">
<col span="3" style="visibility: collapse">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Listes HTML

Les listes HTML permettent aux développeurs Web de regrouper un ensemble

d'éléments connexes dans des listes.

Exemple
Une liste HTML non ordonnée :

• Article
• Article
• Article
• Article

Une liste HTML ordonnée :

1. Premier élément
2. Deuxième élément
3. Troisième élément
4. Quatrième point

Liste HTML non ordonnée

Une liste non ordonnée commence par la <ul>balise. Chaque élément de la liste
commence par la <li>balise.

Les éléments de la liste seront marqués par des puces (petits cercles noirs) par défaut :

Exemple
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Liste HTML ordonnée

Une liste ordonnée commence par la <ol>balise. Chaque élément de la liste commence
par la <li>balise.

Les éléments de la liste seront marqués par défaut avec des numéros :

Exemple
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

SUPPRIMER LES PUBLICITÉS

Listes de descriptions HTML

HTML prend également en charge les listes de descriptions.

Une liste de description est une liste de termes, avec une description de chaque terme.

La <dl>balise définit la liste de description, la <dt>balise définit le terme (nom) et

la <dd> balise décrit chaque terme :

Exemple
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Exercice?
Quel est le nom de balise correct pour les éléments de liste ?

<item>

<list-item>

<li>

Balises de liste HTML

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

Listes HTML non ordonnées

La <ul>balise HTML définit une liste non ordonnée (à puces).

Liste HTML non ordonnée

Une liste non ordonnée commence par la <ul>balise. Chaque élément de la liste
commence par la <li>balise.

Les éléments de la liste seront marqués par des puces (petits cercles noirs) par défaut :

Exemple
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Liste HTML non ordonnée - Choisir un
marqueur d'élément de liste
La propriété CSS list-style-typepermet de définir le style du marqueur d'élément de
liste. Elle peut prendre l'une des valeurs suivantes :

Value Description

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

Disque
Exemple - Disque
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Cercle
Exemple - Cercle
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Carré
Exemple - Carré
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Aucun marqueur de liste

Exemple - Aucun
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

SUPPRIMER LES PUBLICITÉS

Listes HTML imbriquées
Les listes peuvent être imbriquées (liste dans une liste) :

Exemple
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

Remarque : un élément de liste ( <li>) peut contenir une nouvelle liste et d'autres
éléments HTML, comme des images et des liens, etc.

Liste horizontale avec CSS

Les listes HTML peuvent être stylisées de différentes manières avec CSS.

Une méthode courante consiste à styliser une liste horizontalement pour créer un menu
de navigation :

Exemple
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Astuce : vous pouvez en apprendre beaucoup plus sur CSS dans notre tutoriel CSS .

Résumé du chapitre
• Utilisez l' <ul>élément HTML pour définir une liste non ordonnée
• Utilisez la list-style-typepropriété CSS pour définir le marqueur d'élément de liste
• Utilisez l' <li>élément HTML pour définir un élément de liste
• Les listes peuvent être imbriquées
• Les éléments de liste peuvent contenir d'autres éléments HTML
• Utilisez la propriété CSS float:leftpour afficher une liste horizontalement
Listes ordonnées HTML

La balise HTML <ol>définit une liste ordonnée. Une liste ordonnée peut être
numérique ou alphabétique.

Liste HTML ordonnée

Une liste ordonnée commence par la <ol>balise. Chaque élément de la liste commence
par la <li>balise.

Les éléments de la liste seront marqués par défaut avec des numéros :

Exemple
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Liste HTML ordonnée - L'attribut Type

L' typeattribut de la <ol>balise définit le type de marqueur d'élément de liste :

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

Nombres
Nombres:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Lettres majuscules
Lettres majuscules :
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lettres minuscules
Lettres minuscules:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Chiffres romains - Majuscules

Chiffres romains majuscules :
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Chiffres romains - Minuscules

Chiffres romains minuscules :
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

SUPPRIMER LES PUBLICITÉS

Comptage de la liste de contrôle
Par défaut, une liste ordonnée commence à compter à partir de 1. Si vous souhaitez
commencer à compter à partir d'un nombre spécifié, vous pouvez utiliser
l' startattribut :

Exemple
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Listes HTML imbriquées

Les listes peuvent être imbriquées (liste dans une liste) :

Exemple
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>

Remarque : un élément de liste ( <li>) peut contenir une nouvelle liste et d'autres
éléments HTML, comme des images et des liens, etc.

Résumé du chapitre
• Utilisez l' <ol>élément HTML pour définir une liste ordonnée
• Utilisez l' typeattribut HTML pour définir le type de numérotation
• Utilisez l' <li>élément HTML pour définir un élément de liste
• Les listes peuvent être imbriquées
• Les éléments de liste peuvent contenir d'autres éléments HTML

Autres listes HTML

HTML prend également en charge les listes de descriptions.

Listes de descriptions HTML

Une liste de description est une liste de termes, avec une description de chaque terme.

La <dl>balise définit la liste de description, la balise définit le terme (nom) et la balise

décrit chaque terme : <dt> <dd>

Exemple
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Résumé du chapitre
• Utilisez l' <dl>élément HTML pour définir une liste de descriptions
• Utilisez l' <dt>élément HTML pour définir le terme de description
• Utilisez l' <dd>élément HTML pour décrire le terme dans une liste de descriptions
Exercice?
Quel est le nom de balise correct pour une liste de description ?

<dl>

<list>

Balises de liste HTML

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list
Bloc HTML et éléments en ligne

Chaque élément HTML a une valeur d'affichage par défaut, en fonction du type
d'élément dont il s'agit.

Les deux valeurs d'affichage les plus courantes sont bloc et en ligne.

Éléments au niveau des blocs

Un élément de niveau bloc commence toujours sur une nouvelle ligne et les navigateurs
ajoutent automatiquement un espace (une marge) avant et après l'élément.

Un élément de niveau bloc occupe toujours toute la largeur disponible (s'étend vers la
gauche et la droite aussi loin que possible).

Deux éléments de bloc couramment utilisés sont : <p> et <div>.

L' <p>élément définit un paragraphe dans un document HTML.

L' <div>élément définit une division ou une section dans un document HTML.

L'élément <p> est un élément de niveau bloc.

L'élément <div> est un élément de niveau bloc.

Exemple
<p>Hello World</p>
<div>Hello World</div>

Voici les éléments de niveau bloc en HTML :

< adresse >

< article >

< à part >

< blockquote >

< toile >

< dd >

< div >

< dl >

< dt >

< ensemble de champs >

< figcaption >

< figure >

< pied de page >

< formulaire >

< h1 > - < h6 >

< en-tête >

< h >

< li >

< principal >

< nav >

< noscript >

< ol >

< p >

< pré >

< section >

< tableau >

< tfoot >

< ul >

< vidéo >

Éléments en ligne
Un élément en ligne ne démarre pas sur une nouvelle ligne.

Un élément en ligne occupe uniquement la largeur nécessaire.

Il s'agit d'un élément <span> à l'intérieur d'un paragraphe.

Exemple
<span>Hello World</span>

Voici les éléments en ligne en HTML :

< a >

< abréviation >

< acronyme >

< b >

< bdo >

< grand >

< br >

< bouton >

< citer >

< code >

< dfn >

< em >

< i >

< img >

< entrée >

< kbd >

< étiquette >

< carte >

< objet >

< sortie >

< q >

< échantillon >

< script >

< sélectionner >

< petit >

< span >

< fort >

< sous >

< sup >

< zone de texte >

< temps >

< tt >

< var >

Remarque : un élément en ligne ne peut pas contenir d’élément de niveau bloc !

SUPPRIMER LES PUBLICITÉS

L'élément <div>
L' <div>élément est souvent utilisé comme conteneur pour d'autres éléments HTML.

L' <div>élément n'a pas d'attributs obligatoires, mais style, classet idsont communs.

Lorsqu'il est utilisé avec CSS, l' <div>élément peut être utilisé pour styliser des blocs de
contenu :

Exemple
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city
in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>
</div>

Vous en apprendrez davantage sur cet <div>élément dans le prochain chapitre .

L'élément <span>
L' <span>élément est un conteneur en ligne utilisé pour baliser une partie d'un texte ou
une partie d'un document.

L' <span>élément n'a pas d'attributs obligatoires, mais style, classet idsont communs.

Lorsqu'il est utilisé avec CSS, l' <span>élément peut être utilisé pour styliser des parties
du texte :

Exemple
<p>My mother has <span style="color:blue;font-
weight:bold;">blue</span> eyes and my father
has <span style="color:darkolivegreen;font-weight:bold;">dark
green</span> eyes.</p>

Résumé du chapitre
• Un élément de niveau bloc commence toujours sur une nouvelle ligne et occupe toute la
largeur disponible
• Un élément en ligne ne commence pas sur une nouvelle ligne et n'occupe que la largeur
nécessaire
• L' <div>élément est un élément de niveau bloc et est souvent utilisé comme conteneur
pour d'autres éléments HTML
• L' <span>élément est un conteneur en ligne utilisé pour baliser une partie d'un texte ou
une partie d'un document

Exercice?
Quel type d’éléments occupe toute la largeur disponible ?

Éléments de bloc

Éléments en ligne

Balises HTML
Tag Description
<div> Defines a section in a document (block-level)

<span> Defines a section in a document (inline)

Élément HTML Div

L' <div>élément est utilisé comme conteneur pour d'autres éléments HTML.

L'élément <div>
L' <div>élément est par défaut un élément de bloc, ce qui signifie qu'il prend toute la
largeur disponible et est accompagné de sauts de ligne avant et après.

Exemple
Un élément <div> occupe toute la largeur disponible :

Lorem Ipsum <div>I am a div</div> dolor sit amet.

Résultat
Lorem Ipsum

Je suis un div

douleur assise amet.

L' <div>élément n'a pas d'attributs obligatoires, mais style, classet idsont communs.

<div> comme conteneur

L' <div>élément est souvent utilisé pour regrouper des sections d'une page Web.

Exemple
Un élément <div> avec des éléments HTML :

<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>

Résultat

Londres
Londres est la capitale de l'Angleterre.

Londres compte plus de 9 millions d'habitants.

SUPPRIMER LES PUBLICITÉS

Aligner au centre un élément <div>

Si vous avez un <div>élément qui n'est pas large à 100 % et que vous souhaitez l'aligner
au centre, définissez la marginpropriété CSS sur auto.

Exemple
<style>
div {
width:300px;
margin:auto;
}
</style>

Résultat
Londres
Londres est la capitale de l'Angleterre.

Londres compte plus de 9 millions d'habitants.

Plusieurs éléments <div>

Vous pouvez avoir plusieurs <div>conteneurs sur la même page.

Exemple
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>

<div>
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 700,000 inhabitants.</p>
</div>

<div>
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has over 4 million inhabitants.</p>
</div>

Résultat

Londres
Londres est la capitale de l'Angleterre.

Londres compte plus de 9 millions d'habitants.

Oslo
Oslo est la capitale de la Norvège.

Oslo compte plus de 700 000 habitants.

Rome
Rome est la capitale de l'Italie.

Rome compte plus de 4 millions d'habitants.

Alignement des éléments <div> côte à côte

Lors de la création de pages Web, vous souhaitez souvent avoir deux <div>éléments ou
plus côte à côte, comme ceci :

Londres
Londres est la capitale de l'Angleterre.

Londres compte plus de 9 millions d'habitants.

Oslo
Oslo est la capitale de la Norvège.

Oslo compte plus de 700 000 habitants.

Rome
Rome est la capitale de l'Italie.
Rome compte plus de 4 millions d'habitants.

Il existe différentes méthodes pour aligner des éléments côte à côte, toutes intégrant un
style CSS. Nous allons examiner les méthodes les plus courantes :

Flotter
La propriété CSS floatn'était pas initialement destinée à aligner <div>les éléments côte à
côte, mais elle est utilisée à cette fin depuis de nombreuses années.

La propriété CSS floatest utilisée pour positionner et formater le contenu et permet aux
éléments d'être positionnés horizontalement plutôt que verticalement.

Exemple
Comment utiliser float pour aligner les éléments div côte à côte :

Résultat

Londres
Londres est la capitale de l'Angleterre.

Londres compte plus de 9 millions d'habitants.

Oslo
Oslo est la capitale de la Norvège.

Oslo compte plus de 700 000 habitants.

Rome
Rome est la capitale de l'Italie.

Rome compte plus de 4 millions d'habitants.

Apprenez-en plus sur float dans notre tutoriel CSS float .

Bloc en ligne
Si vous modifiez la propriété <div>de l'élément de à , les éléments n'ajouteront plus de
saut de ligne avant et après, et seront affichés côte à côte au lieu d'être les uns sur les
[Link]-block<div>

Exemple
Comment utiliser display: inline-block pour aligner les éléments div côte à côte :

Résultat

Londres
Londres est la capitale de l'Angleterre.

Londres compte plus de 9 millions d'habitants.

Oslo
Oslo est la capitale de la Norvège.

Oslo compte plus de 700 000 habitants.

Rome
Rome est la capitale de l'Italie.

Rome compte plus de 4 millions d'habitants.

Fléchir
Le module de mise en page CSS Flexbox a été introduit pour faciliter la conception
d'une structure de mise en page réactive et flexible sans utiliser de flottement ou de
positionnement.

Pour que la méthode CSS flex fonctionne, entourez les <div>éléments avec un
autre <div>élément et donnez-lui le statut de conteneur flex.

Exemple
Comment utiliser flex pour aligner les éléments div côte à côte :

Londres
Londres est la capitale de l'Angleterre.

Londres compte plus de 9 millions d'habitants.

Oslo
Oslo est la capitale de la Norvège.

Oslo compte plus de 700 000 habitants.

Rome
Rome est la capitale de l'Italie.

Rome compte plus de 4 millions d'habitants.

Apprenez-en plus sur Flex dans notre tutoriel CSS Flexbox .

Grille
Le module CSS Grid Layout offre un système de mise en page basé sur une grille, avec
des lignes et des colonnes, ce qui facilite la conception de pages Web sans avoir à
utiliser de flotteurs et de positionnement.

Cela ressemble presque à flex, mais a la capacité de définir plus d'une ligne et de
positionner chaque ligne individuellement.

La méthode de grille CSS nécessite que vous entouriez les <div>éléments avec un
autre <div>élément et que vous donniez le statut de conteneur de grille, et vous devez
spécifier la largeur de chaque colonne.
Exemple
Comment utiliser la grille pour aligner les éléments <div> côte à côte :

Résultat

Londres
Londres est la capitale de l'Angleterre.

Londres compte plus de 9 millions d'habitants.

Oslo
Oslo est la capitale de la Norvège.

Oslo compte plus de 700 000 habitants.

Rome
Rome est la capitale de l'Italie.

Rome compte plus de 4 millions d'habitants.

Apprenez-en plus sur la grille dans notre tutoriel sur la grille CSS .
Attribut de classe HTML

L' classattribut HTML est utilisé pour spécifier une classe pour un élément
HTML.

Plusieurs éléments HTML peuvent partager la même classe.

L'attribut de classe
Cet classattribut est souvent utilisé pour pointer vers un nom de classe dans une feuille
de style. JavaScript peut également l'utiliser pour accéder aux éléments portant ce nom
de classe et les manipuler.

Dans l'exemple suivant, nous avons trois <div>éléments dont l' classattribut a pour
valeur « ville ». Le <div> style de ces trois éléments sera identique, conformément à
la .city définition de style de la section « head ».

Exemple
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>

<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

Dans l'exemple suivant, nous avons deux <span>éléments dont l' classattribut a pour
valeur « note ». Les deux <span> éléments seront stylisés de la même manière,
conformément à la .note définition de style de la section « head ».

Exemple
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>

<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

Astuce : l’ classattribut peut être utilisé sur n’importe quel élément HTML.

Remarque : le nom de la classe est sensible à la casse !

Astuce : vous pouvez en apprendre beaucoup plus sur CSS dans notre tutoriel CSS .

SUPPRIMER LES PUBLICITÉS

La syntaxe de la classe
Pour créer une classe, saisissez un point (.), suivi du nom de la classe. Définissez ensuite
les propriétés CSS entre accolades {} :

Exemple
Créez une classe nommée « ville » :

<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>

Plusieurs classes
Les éléments HTML peuvent appartenir à plusieurs classes.

Pour définir plusieurs classes, séparez leurs noms par un espace, par exemple <div
class="city main">. L'élément sera stylisé selon toutes les classes spécifiées.

Dans l'exemple suivant, le premier <h2>élément appartient à la fois à la cityclasse et à

la mainclasse, et obtiendra les styles CSS des deux classes :

Exemple
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

Différents éléments peuvent partager la

même classe
Différents éléments HTML peuvent pointer vers le même nom de classe.

Dans l'exemple suivant, <h2>et <p> pointent tous deux vers la classe « ville » et
partageront le même style :

Exemple
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
Utilisation de la classe Attribute en
JavaScript
Le nom de classe peut également être utilisé par JavaScript pour effectuer certaines
tâches pour des éléments spécifiques.

JavaScript peut accéder aux éléments avec un nom de classe spécifique avec
la getElementsByClassName()méthode :

Exemple
Cliquez sur un bouton pour masquer tous les éléments portant le nom de classe
« ville » :

Ne vous inquiétez pas si vous ne comprenez pas le code dans l’exemple ci-dessus.

Vous en apprendrez davantage sur JavaScript dans notre chapitre HTML JavaScript , ou
vous pouvez étudier notre didacticiel JavaScript .

Résumé du chapitre
• L' classattribut HTML spécifie un ou plusieurs noms de classe pour un élément
• Les classes sont utilisées par CSS et JavaScript pour sélectionner et accéder à des
éléments spécifiques
• L' classattribut peut être utilisé sur n'importe quel élément HTML
• Le nom de la classe est sensible à la casse
• Différents éléments HTML peuvent pointer vers le même nom de classe
• JavaScript peut accéder aux éléments avec un nom de classe spécifique avec
la getElementsByClassName() méthode
Attribut d'identification HTML

L' idattribut HTML est utilisé pour spécifier un identifiant unique pour un
élément HTML.

Vous ne pouvez pas avoir plus d'un élément avec le même identifiant dans un
document HTML.

L'attribut id
Cet idattribut spécifie un identifiant unique pour un élément HTML. Sa valeur id doit
être unique dans le document HTML.

Cet idattribut permet de pointer vers une déclaration de style spécifique dans une
feuille de style. JavaScript l'utilise également pour accéder à l'élément portant
l'identifiant spécifique et le manipuler.

La syntaxe pour id est la suivante : saisissez un dièse (#), suivi d'un nom d'id. Définissez
ensuite les propriétés CSS entre accolades {}.

Dans l'exemple suivant, nous avons un <h1>élément pointant vers l'identifiant

« myHeader ». Cet <h1> élément sera stylisé selon la #myHeader définition de style de la
section « head » :

Exemple
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

Remarque : le nom de l'ID est sensible à la casse !

Remarque : le nom de l'ID doit contenir au moins un caractère, ne peut pas commencer
par un chiffre et ne doit pas contenir d'espaces (espaces, tabulations, etc.).

Différence entre classe et ID

Un nom de classe peut être utilisé par plusieurs éléments HTML, tandis qu'un nom
d'identifiant ne doit être utilisé que par un seul élément HTML dans la page :

Exemple
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}

/* Style all elements with the class name "city" */

.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>

<h1 id="myHeader">My Cities</h1>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

Astuce : vous pouvez en apprendre beaucoup plus sur CSS dans notre tutoriel CSS .

SUPPRIMER LES PUBLICITÉS

Signets HTML avec identifiant et liens

Les signets HTML sont utilisés pour permettre aux lecteurs d'accéder à des parties
spécifiques d'une page Web.

Les signets peuvent être utiles si votre page est très longue.

Pour utiliser un signet, vous devez d’abord le créer, puis y ajouter un lien.

Ensuite, lorsque le lien est cliqué, la page défile jusqu'à l'emplacement contenant le
signet.

Exemple
Tout d’abord, créez un signet avec l’ idattribut :

<h2 id="C4">Chapter 4</h2>

Ensuite, ajoutez un lien vers le signet (« Aller au chapitre 4 »), depuis la même page :
Exemple
<a href="#C4">Jump to Chapter 4</a>

Ou, ajoutez un lien vers le signet (« Aller au chapitre 4 »), à partir d'une autre page :

<a href="html_demo.html#C4">Jump to Chapter 4</a>

Utilisation de l'attribut id en JavaScript

L' idattribut peut également être utilisé par JavaScript pour effectuer certaines tâches
pour cet élément spécifique.

JavaScript peut accéder à un élément avec un identifiant spécifique avec

la getElementById()méthode :

Exemple
Utilisez l' idattribut pour manipuler du texte avec JavaScript :

Astuce : étudiez JavaScript dans le chapitre HTML JavaScript ou dans notre didacticiel
JavaScript .

Résumé du chapitre
• L' idattribut est utilisé pour spécifier un identifiant unique pour un élément HTML
• La valeur de l' id attribut doit être unique dans le document HTML
• L' id attribut est utilisé par CSS et JavaScript pour styliser/sélectionner un élément
spécifique
• La valeur de l' id attribut est sensible à la casse
• L' id attribut est également utilisé pour créer des signets HTML
• JavaScript peut accéder à un élément avec un identifiant spécifique avec
la getElementById() méthode
Iframes HTML

Un iframe HTML est utilisé pour afficher une page Web dans une page Web.

Syntaxe HTML Iframe

La balise HTML <iframe>spécifie un cadre en ligne.

Un cadre en ligne est utilisé pour intégrer un autre document dans le document HTML
actuel.

Syntaxe
<iframe src="url" title="description"></iframe>

Conseil : Il est recommandé de toujours inclure un titleattribut pour le <iframe>. Celui-

ci est utilisé par les lecteurs d'écran pour lire le contenu de l'iframe.

Iframe - Définir la hauteur et la largeur

Utilisez les attributs heightet widthpour spécifier la taille de l'iframe.

La hauteur et la largeur sont spécifiées en pixels par défaut :

Exemple
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe
Example"></iframe>

Ou vous pouvez ajouter l' styleattribut et utiliser le CSS heightet width les propriétés :
Exemple
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Ifr
ame Example"></iframe>

SUPPRIMER LES PUBLICITÉS

Iframe - Supprimer la bordure

Par défaut, un iframe a une bordure autour de lui.

Pour supprimer la bordure, ajoutez l' styleattribut et utilisez la borderpropriété CSS :

Exemple
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe
Example"></iframe>

Avec CSS, vous pouvez également modifier la taille, le style et la couleur de la bordure
de l'iframe :

Exemple
<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe
Example"></iframe>

Iframe - Cible pour un lien

Un iframe peut être utilisé comme cadre cible pour un lien.

L' targetattribut du lien doit faire référence à l' nameattribut de l'iframe :

Exemple
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe
Example"></iframe>

<p><a href="[Link] target="iframe_a">[Link]</a>

</p>

Résumé du chapitre
• La balise HTML <iframe>spécifie un cadre en ligne
• L' src attribut définit l'URL de la page à intégrer
• Toujours inclure un titleattribut (pour les lecteurs d'écran)
• Les attributs heightet widthspécifient la taille de l'iframe
• Utiliser border:none;pour supprimer la bordure autour de l'iframe
HTML JavaScript

JavaScript rend les pages HTML plus dynamiques et interactives.

Exemple

My First JavaScript
Click me to display Date and Time

La balise HTML <script>

La <script>balise HTML est utilisée pour définir un script côté client (JavaScript).

L' <script>élément contient soit des instructions de script, soit il pointe vers un fichier de
script externe via l' srcattribut.

Les utilisations courantes de JavaScript sont la manipulation d’images, la validation de

formulaires et les modifications dynamiques de contenu.

Pour sélectionner un élément HTML, JavaScript utilise le plus souvent

la [Link]()méthode.

Cet exemple JavaScript écrit « Bonjour JavaScript ! » dans un élément HTML avec
id="demo » :

Exemple
<script>
[Link]("demo").innerHTML = "Hello JavaScript!";
</script>
Astuce : vous pouvez en apprendre beaucoup plus sur JavaScript dans notre didacticiel
JavaScript .

Un avant-goût de JavaScript
Voici quelques exemples de ce que JavaScript peut faire :

Exemple
JavaScript peut modifier le contenu :

[Link]("demo").innerHTML = "Hello JavaScript!";

Exemple
JavaScript peut changer de style :

[Link]("demo").[Link] = "25px";
[Link]("demo").[Link] = "red";
[Link]("demo").[Link] = "yellow";

Exemple
JavaScript peut modifier les attributs :

[Link]("image").src = "[Link]";

SUPPRIMER LES PUBLICITÉS

La balise HTML <noscript>

La balise HTML <noscript>définit un contenu alternatif à afficher aux utilisateurs qui ont
désactivé les scripts dans leur navigateur ou qui ont un navigateur qui ne prend pas en
charge les scripts :

Exemple
<script>
[Link]("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
Chemins de fichiers HTML

Un chemin de fichier décrit l'emplacement d'un fichier dans la structure de

dossiers d'un site Web.

Exemples de chemins de fichiers

Chemin Description

<img src="[Link]"> Le fichier « [Link] » se trouve dans le même dossier que la pag

<img src="images/[Link]"> Le fichier « [Link] » se trouve dans le dossier images du dossie

<img src="/images/[Link]"> Le fichier « [Link] » se trouve dans le dossier images à la racine

Web actuel.

<img src="../[Link]"> Le fichier « [Link] » se trouve dans le dossier situé un niveau au

du dossier actuel

Chemins de fichiers HTML

Un chemin de fichier décrit l'emplacement d'un fichier dans la structure de dossiers d'un
site Web.

Les chemins de fichiers sont utilisés lors de la liaison à des fichiers externes, comme :

• Pages Web
• Images
• Feuilles de style
• JavaScripts

Chemins de fichiers absolus

Un chemin de fichier absolu est l'URL complète d'un fichier :

Exemple
<img src="[Link] alt="Mountain">

La balise <img> est expliquée dans le chapitre : Images HTML .

SUPPRIMER LES PUBLICITÉS

Chemins de fichiers relatifs

Un chemin de fichier relatif pointe vers un fichier relatif à la page actuelle.

Dans l'exemple suivant, le chemin du fichier pointe vers un fichier dans le dossier images
situé à la racine du site Web actuel :

Exemple
<img src="/images/[Link]" alt="Mountain">
Dans l'exemple suivant, le chemin du fichier pointe vers un fichier dans le dossier images
situé dans le dossier actuel :

Exemple
<img src="images/[Link]" alt="Mountain">

Dans l'exemple suivant, le chemin du fichier pointe vers un fichier dans le dossier images
situé dans le dossier un niveau au-dessus du dossier actuel :

Exemple
<img src="../images/[Link]" alt="Mountain">

Meilleures pratiques
Il est recommandé d’utiliser des chemins de fichiers relatifs (si possible).

En utilisant des chemins d'accès relatifs, vos pages web ne seront pas liées à votre URL
de base actuelle. Tous les liens fonctionneront sur votre ordinateur (localhost), ainsi que
sur votre domaine public actuel et vos futurs domaines publics.
HTML - L'élément Head

L'élément HTML <head>est un conteneur pour les éléments

suivants : <title>, <style>, <meta>, <link>, <script>, et <base>.

L'élément HTML <head>

L' <head>élément est un conteneur de métadonnées (données sur les données) et est
placé entre la <html>balise et la <body>balise.

Les métadonnées HTML concernent le document HTML. Elles ne sont pas affichées sur
la page.

Les métadonnées définissent généralement le titre du document, le jeu de caractères,

les styles, les scripts et d'autres méta-informations.

L'élément HTML <title>

Cet <title>élément définit le titre du document. Ce titre doit être du texte seul et
s'afficher dans la barre de titre du navigateur ou dans l'onglet de la page.

L' <title>élément est obligatoire dans les documents HTML !

Le contenu d'un titre de page est essentiel pour l'optimisation des moteurs de
recherche (SEO) ! Les algorithmes des moteurs de recherche utilisent ce titre pour
déterminer l'ordre d'affichage des pages dans les résultats de recherche.

L' <title>élément:

• définit un titre dans la barre d'outils du navigateur

• fournit un titre à la page lorsqu'elle est ajoutée aux favoris
• affiche un titre pour la page dans les résultats des moteurs de recherche
Alors, essayez de rendre le titre aussi précis et significatif que possible !

Un document HTML simple :

Exemple
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>

The content of the document......

</body>
</html>

L'élément HTML <style>

L' <style>élément est utilisé pour définir les informations de style pour une seule page
HTML :

Exemple
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>

SUPPRIMER LES PUBLICITÉS

L'élément HTML <link>
L' <link>élément définit la relation entre le document actuel et une ressource externe.

La <link> balise est généralement utilisée pour créer un lien vers des feuilles de style
externes :

Exemple
<link rel="stylesheet" href="[Link]">

Astuce : pour tout savoir sur CSS, visitez notre tutoriel CSS .

L'élément HTML <meta>

L' <meta>élément est généralement utilisé pour spécifier le jeu de caractères, la
description de la page, les mots-clés, l'auteur du document et les paramètres de la
fenêtre d'affichage.

Les métadonnées ne seront pas affichées sur la page, mais sont utilisées par les
navigateurs (comment afficher le contenu ou recharger la page), par les moteurs de
recherche (mots clés) et d'autres services Web.

Exemples
Définir le jeu de caractères utilisé :

Définir des mots clés pour les moteurs de recherche :

<meta name="keywords" content="HTML, CSS, JavaScript">

Définissez une description de votre page Web :

<meta name="description" content="Free Web tutorials">

Définir l'auteur d'une page :

<meta name="author" content="John Doe">

Actualiser le document toutes les 30 secondes :

<meta http-equiv="refresh" content="30">

Paramétrer la fenêtre d'affichage pour que votre site Web soit beau sur tous les
appareils :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Exemple de <meta>balises :

Exemple
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">

Définition de la fenêtre d'affichage

La fenêtre d'affichage est la zone visible d'une page web par l'utilisateur. Elle varie selon
l'appareil : elle sera plus petite sur un téléphone portable que sur un écran d'ordinateur.

Vous devez inclure l’ <meta>élément suivant dans toutes vos pages Web :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Cela donne au navigateur des instructions sur la façon de contrôler les dimensions et la
mise à l'échelle de la page.

La width=device-widthpartie définit la largeur de la page pour qu'elle suive la largeur de

l'écran de l'appareil (qui varie en fonction de l'appareil).

La initial-scale=1.0partie définit le niveau de zoom initial lorsque la page est chargée

pour la première fois par le navigateur.
Voici un exemple d'une page Web sans la balise méta viewport et de la même page
Web avec la balise méta viewport :

Astuce : si vous naviguez sur cette page avec un téléphone ou une tablette, vous
pouvez cliquer sur les deux liens ci-dessous pour voir la différence.

Sans la balise méta viewport

Avec la balise méta viewport

L'élément HTML <script>

L' <script>élément est utilisé pour définir des JavaScripts côté client.

Le code JavaScript suivant écrit « Bonjour JavaScript ! » dans un élément HTML avec
id="demo » :

Exemple
<script>
function myFunction() {
[Link]("demo").innerHTML = "Hello JavaScript!";
}
</script>

Astuce : pour tout savoir sur JavaScript, visitez notre didacticiel JavaScript .
L'élément HTML <base>
L' <base>élément spécifie l'URL de base et/ou la cible de toutes les URL relatives d'une
page.

La <base>balise doit avoir soit un attribut href, soit un attribut target présent, ou les
deux.

Il ne peut y avoir qu'un seul <base> élément dans un document !

Exemple
Spécifiez une URL par défaut et une cible par défaut pour tous les liens d'une page :

Résumé du chapitre
• L' <head>élément est un conteneur de métadonnées (données sur les données)
• L' <head>élément est placé entre la <html>balise et la <body>balise
• L' <title>élément est obligatoire et définit le titre du document
• L' <style>élément est utilisé pour définir les informations de style pour un seul
document
• La <link> balise est le plus souvent utilisée pour créer un lien vers des feuilles de style
externes
• L' <meta>élément est généralement utilisé pour spécifier le jeu de caractères, la
description de la page, les mots-clés, l'auteur du document et les paramètres de la
fenêtre d'affichage.
• L' <script>élément est utilisé pour définir les JavaScripts côté client
• L' <base>élément spécifie l'URL de base et/ou la cible de toutes les URL relatives d'une
page
Exercice?
Lequel des éléments suivants ne doit PAS être placé dans la headsection ?

<title>

<link>

<body>

Éléments d'en-tête HTML

Tag Description

<head> Defines information about the document

<title> Defines the title of a document

<base> Defines a default address or a default target for all links on a page

<link> Defines the relationship between a document and an external resource

<script> Defines a client-side script

<style> Defines style information for a document

Éléments et techniques de mise
en page HTML

Les sites Web affichent souvent du contenu sur plusieurs colonnes (comme un
magazine ou un journal).

Exemple

Cities
• London
• Paris
• Tokyo

London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.

Footer

Éléments de mise en page HTML

HTML comporte plusieurs éléments sémantiques qui définissent les différentes parties
d’une page Web :
• <header>- Définit un en-tête pour un document ou une section
• <nav>- Définit un ensemble de liens de navigation
• <section>- Définit une section dans un document
• <article>- Définit un contenu indépendant et autonome
• <aside>- Définit le contenu en dehors du contenu (comme une bar
• <footer>- Définit un pied de page pour un document ou une sectio
• <details>- Définit des détails supplémentaires que l'utilisateur peu
fermer à la demande
• <summary>- Définit un titre pour l' <details>élément

Vous pouvez en savoir plus sur les éléments sémantiques dans

notre chapitre Sémantique HTML .

Techniques de mise en page HTML

Il existe quatre techniques différentes pour créer des mises en page multicolonnes.
Chacune présente ses avantages et ses inconvénients :

• Cadres CSS
• Propriété CSS float
• Boîte flexible CSS
• Grille CSS

SUPPRIMER LES PUBLICITÉS

Cadres CSS
Si vous souhaitez créer votre mise en page rapidement, vous pouvez utiliser un
framework CSS, comme [Link] ou Bootstrap .
Avez-vous déjà entendu parler des Espaces W3Schools ? Vous pouvez y créer votre site
web de A à Z ou utiliser un modèle, et l'héberger gratuitement.

* aucune carte de crédit requise

Disposition flottante CSS

Il est courant de créer des mises en page web complètes à l'aide de la floatpropriété
CSS. Float est facile à maîtriser : il suffit de mémoriser le fonctionnement des
propriétés floatet . Inconvénients : les éléments flottants sont liés au flux du document,
ce qui peut nuire à la flexibilité. Pour en savoir plus sur Float, consultez notre
chapitre sur les propriétés CSS Float et Clear . clear

Exemple

Cities
• London
• Paris
• Tokyo

London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.

Footer

Mise en page CSS Flexbox

L'utilisation de flexbox garantit que les éléments se comportent de manière prévisible
lorsque la mise en page doit s'adapter à différentes tailles d'écran et à différents
périphériques d'affichage.

Apprenez-en plus sur Flexbox dans notre chapitre CSS Flexbox .

Exemple

Cities
• London
• Paris
• Tokyo

London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.

Footer

Disposition de grille CSS

Le module CSS Grid Layout offre un système de mise en page basé sur une grille, avec
des lignes et des colonnes, ce qui facilite la conception de pages Web sans avoir à
utiliser de flotteurs et de positionnement.

Apprenez-en plus sur les grilles CSS dans notre chapitre Introduction aux grilles CSS .
Conception Web HTML réactive

La conception Web réactive consiste à créer des pages Web qui s'affichent
correctement sur tous les appareils !

Une conception Web réactive s'adaptera automatiquement aux différentes tailles

d'écran et fenêtres d'affichage.

Qu'est-ce que le Responsive Web Design ?

La conception Web réactive consiste à utiliser HTML et CSS pour redimensionner,
masquer, réduire ou agrandir automatiquement un site Web, afin de le rendre attrayant
sur tous les appareils (ordinateurs de bureau, tablettes et téléphones) :

Définition de la fenêtre d'affichage

Pour créer un site Web réactif, ajoutez la <meta> balise suivante à toutes vos pages Web :
Exemple
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Cela définira la fenêtre d'affichage de votre page, ce qui donnera au navigateur des
instructions sur la façon de contrôler les dimensions et la mise à l'échelle de la page.

Voici un exemple d'une page Web sans la balise méta viewport et de la même page
Web avec la balise méta viewport :

Sans la balise méta viewport :

Avec la balise méta viewport :

Astuce : si vous naviguez sur cette page sur un téléphone ou une tablette, vous pouvez
cliquer sur les deux liens ci-dessus pour voir la différence.

SUPPRIMER LES PUBLICITÉS

Images réactives
Les images réactives sont des images qui s'adaptent parfaitement à n'importe quelle
taille de navigateur.

Utilisation de la propriété width

Si la propriété CSS widthest définie sur 100 %, l'image sera réactive et s'agrandira et se
réduira :
Exemple
<img src="img_girl.jpg" style="width:100%;">

Notez que dans l'exemple ci-dessus, l'image peut être agrandie. Dans de nombreux cas,
il est préférable d'utiliser cette max-widthpropriété.

Utilisation de la propriété max-width

Si la max-widthpropriété est définie sur 100 %, l'image sera réduite si nécessaire, mais ne
sera jamais agrandie pour être plus grande que sa taille d'origine :

Exemple
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
Afficher différentes images selon la largeur
du navigateur
L'élément HTML <picture>vous permet de définir différentes images pour différentes
tailles de fenêtre de navigateur.

Redimensionnez la fenêtre du navigateur pour voir comment l'image ci-dessous change

en fonction de la largeur :

Exemple
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="[Link]">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>

Taille du texte réactif

La taille du texte peut être définie avec une unité « vw », ce qui signifie la « largeur de la
fenêtre d'affichage ».

De cette façon, la taille du texte suivra la taille de la fenêtre du navigateur :

Bonjour le monde
Redimensionnez la fenêtre du navigateur pour voir comment la taille du texte évolue.

Exemple
<h1 style="font-size:10vw">Hello World</h1>

La fenêtre d'affichage correspond à la taille de la fenêtre du navigateur. 1vw = 1 % de la

largeur de la fenêtre. Si la fenêtre mesure 50 cm de large, 1vw correspond à 0,5 cm.

Requêtes des médias

Outre le redimensionnement du texte et des images, il est également courant d'utiliser
des requêtes multimédias dans les pages Web réactives.

Avec les requêtes multimédias, vous pouvez définir des styles complètement différents
pour différentes tailles de navigateur.

Exemple : redimensionnez la fenêtre du navigateur pour voir que les trois éléments div
ci-dessous s'afficheront horizontalement sur les grands écrans et s'empileront
verticalement sur les petits écrans :

Menu de gauche

Contenu principal

Contenu correct

Exemple
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}

.main {
float: left;
width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */

@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or
smaller */
}
}
</style>

Astuce : pour en savoir plus sur les requêtes multimédias et la conception Web réactive,
lisez notre didacticiel RWD .

Page Web réactive - Exemple complet

Une page Web réactive doit être esthétique sur les grands écrans de bureau et sur les
petits téléphones mobiles.

Avez-vous déjà entendu parler des Espaces W3Schools ? Vous pouvez y créer votre site
web de A à Z ou utiliser un modèle, et l'héberger gratuitement.

* aucune carte de crédit requise

Conception Web Réactive - Cadres

Tous les frameworks CSS populaires offrent une conception réactive.

Ils sont gratuits et faciles à utiliser.

[Link]
[Link] est un framework CSS moderne prenant en charge la conception sur ordinateur
de bureau, tablette et mobile par défaut.

[Link] est plus petit et plus rapide que les frameworks CSS similaires.

[Link] est conçu pour être indépendant de jQuery ou de toute autre bibliothèque
JavaScript.

Démo [Link]
Redimensionnez la page pour voir la réactivité !

Londres
Londres est la capitale de l'Angleterre.

C'est la ville la plus peuplée du Royaume-Uni, avec une zone métropolitaine de plus de
13 millions d'habitants.

Paris
Paris est la capitale de la France.

La région parisienne est l'un des plus grands pôles de population d'Europe, avec plus de
12 millions d'habitants.

Tokyo
Tokyo est la capitale du Japon.

C'est le centre de la région du Grand Tokyo et la zone métropolitaine la plus peuplée du

monde.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>[Link]</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="[Link]
</head>
<body>

<div class="w3-container w3-green">

<h1>W3Schools Demo</h1>
<p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>

<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>

</body>
</html>

Pour en savoir plus sur [Link], lisez notre tutoriel [Link] .

Bootstrap
Bootstrap est un autre framework CSS populaire :

Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="[Link]
[Link]" rel="stylesheet">
<script src="[Link]
[Link]"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">

<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>

<div class="container mt-5">

<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
Pour en savoir plus sur Bootstrap, consultez notre tutoriel Bootstrap .
Éléments de code
informatique HTML

HTML contient plusieurs éléments permettant de définir la saisie utilisateur et le

code informatique.

Exemple
<code>
x = 5;
y = 6;
z = x + y;
</code>

HTML <kbd> pour la saisie au clavier

L'élément HTML <kbd>permet de définir la saisie au clavier. Son contenu s'affiche dans la
police monospace par défaut du navigateur.

Exemple
Définir du texte comme entrée au clavier dans un document :

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

Résultat:

Save the document by pressing Ctrl + S

HTML <samp> pour la sortie du
programme
L'élément HTML <samp>permet de définir un exemple de sortie d'un programme
informatique. Le contenu est affiché dans la police monospace par défaut du navigateur.

Exemple
Définir un texte comme exemple de sortie d’un programme informatique dans un
document :

<p>Message from my computer:</p>

<p><samp>File not found.<br>Press F1 to continue</samp></p>

Résultat:

Message from my computer:

File not found.

Press F1 to continue

SUPPRIMER LES PUBLICITÉS

HTML <code> pour le code informatique

L'élément HTML <code>sert à définir un morceau de code informatique. Son contenu
s'affiche dans la police monospace par défaut du navigateur.

Exemple
Définir du texte comme code informatique dans un document :

Résultat:
x = 5; y = 6; z = x + y;

Conserver les sauts de ligne

Notez que l' <code>élément ne conserve PAS les espaces blancs et les sauts de ligne
supplémentaires.

Pour préserver les espaces supplémentaires et les sauts de ligne, vous pouvez placer
l' <code>élément à l'intérieur d'un <pre>élément :

Exemple
<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>

Résultat:
x = 5;
y = 6;
z = x + y;

HTML <var> pour les variables

L'élément HTML <var>sert à définir une variable en programmation ou dans une
expression mathématique. Son contenu est généralement affiché en italique.

Exemple
Définir du texte comme variable dans un document :

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>,

where <var>b</var> is the base, and <var>h</var> is the vertical
height.</p>

Résultat:

The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height.

Résumé du chapitre
• L' <kbd>élément définit la saisie au clavier
• L' <samp>élément définit un exemple de sortie d'un programme informatique
• L' <code>élément définit un morceau de code informatique
• L' <var>élément définit une variable en programmation ou dans une expression
mathématique
• L' <pre>élément définit un texte préformaté

Exercice?
Lequel des éléments suivants n’est PAS un élément HTML ?

<code>

<pre>

<kbd>

<xamp>
Éléments de code informatique HTML
Tag Description

<code> Defines programming code

<kbd> Defines keyboard input

<samp> Defines computer output

<var> Defines a variable

<pre> Defines preformatted text

Éléments sémantiques HTML

Éléments sémantiques = éléments ayant une signification.

Que sont les éléments sémantiques ?

Un élément sémantique décrit clairement sa signification à la fois pour le navigateur et
pour le développeur.

Exemples d' éléments non sémantiques : <div>et <span>- Ne dit rien sur son contenu.

Exemples d' éléments sémantiques : <img>, <table>, et <article>- Définit clairement son
contenu.

Éléments sémantiques en HTML

De nombreux sites Web contiennent du code HTML comme : <div id="nav"> <div
class="header"> <div id="footer"> pour indiquer la navigation, l'en-tête et le pied de
page.

En HTML, il existe plusieurs éléments sémantiques qui peuvent être utilisés pour définir
différentes parties d'une page Web :

• <article>
• <à part>
• <détails>
• <figcaption>
• <figure>
• <pied de page>
• <en-tête>
• <principal>
• <marque>
• <nav>
• <section>
• <résumé>
• <heure>

Élément HTML <section>

L' <section>élément définit une section dans un document.

Selon la documentation HTML du W3C : « Une section est un regroupement thématique

de contenu, généralement avec un titre. »

Exemples d' <section>utilisation d'un élément :

• Chapitres
• Introduction
• Articles d'actualité
• Coordonnées

Une page Web peut normalement être divisée en sections pour l'introduction, le
contenu et les informations de contact.

Exemple
Deux sections dans un document :
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization
working on issues regarding the conservation, research and restoration of
the environment, formerly named the World Wildlife Fund. WWF was founded
in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of
WWF originated from a panda named Chi Chi that was transferred from the
Beijing Zoo to the London Zoo in the same year of the establishment of
WWF.</p>
</section>

SUPPRIMER LES PUBLICITÉS

Élément HTML <article>

L' <article>élément spécifie un contenu indépendant et autonome.

Un article doit avoir du sens en soi et il doit être possible de le distribuer

indépendamment du reste du site Web.

Exemples d' <article>utilisation de l'élément :

• Messages du forum
• Articles de blog
• Commentaires des utilisateurs
• Fiches produits
• Articles de journaux

Exemple
Trois articles au contenu indépendant et autonome :
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008.
Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla.
Firefox has been the second most popular web browser since January,
2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in
2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

Exemple 2
Utilisez CSS pour styliser l'élément <article> :

<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}

.all-browsers > h1, .browser {

margin: 10px;
padding: 5px;
}

.browser {
background: white;
}

.browser > h2, p {

margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
<h1>Most Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in
2008. Chrome is the world's most popular web browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla.
Firefox has been the second most popular web browser since January,
2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in
2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>

</body>
</html>

Imbriquer <article> dans <section> ou vice

versa ?
L' <article> élément spécifie un contenu indépendant et autonome.

L' <section>élément définit une section dans un document.

Pouvons-nous utiliser les définitions pour décider comment imbriquer ces éléments ?
Non, ce n'est pas possible !
Ainsi, vous trouverez des pages HTML avec <section>des éléments
contenant <article>des éléments, et <article>des éléments contenant <section>des
éléments.

Élément HTML <header>

L' <header>élément représente un conteneur pour le contenu d'introduction ou un
ensemble de liens de navigation.

Un <header>élément contient généralement :

• un ou plusieurs éléments de titre (<h1> - <h6>)

• logo ou icône
• informations sur la paternité

Remarque : Vous pouvez inclure plusieurs <header>éléments dans un document HTML.

Cependant, <header>ils ne peuvent pas être placés dans un <footer>élément <address>ou
un autre <header>élément.

Exemple
Un en-tête pour un <article> :

<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural
environment,
and build a future in which humans live in harmony with nature.</p>
</article>

Élément HTML <footer>

L' <footer>élément définit un pied de page pour un document ou une section.
Un <footer>élément contient généralement :

• informations sur la paternité

• informations sur les droits d'auteur
• coordonnées
• plan du site
• liens retour en haut
• documents connexes

Vous pouvez avoir plusieurs <footer>éléments dans un même document.

Exemple
Une section de pied de page dans un document :

<footer>
<p>Author: Hege Refsnes</p>
<p><a href="[Link]
</footer>

Élément HTML <nav>

L' <nav>élément définit un ensemble de liens de navigation.

Notez que tous les liens d'un document ne doivent pas être inclus dans
un <nav>élément. L' <nav>élément est destiné uniquement aux blocs principaux de liens
de navigation.

Les navigateurs, tels que les lecteurs d'écran pour utilisateurs handicapés, peuvent
utiliser cet élément pour déterminer s'il faut omettre le rendu initial de ce contenu.

Exemple
Un ensemble de liens de navigation :

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Élément HTML <aside>

L' <aside>élément définit un contenu en plus du contenu dans lequel il est placé
(comme une barre latérale).

Le <aside>contenu doit être indirectement lié au contenu environnant.

Exemple
Afficher un contenu en plus du contenu dans lequel il est placé :

<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting
attractions, international pavilions, award-winning fireworks and seasonal
special events.</p>
</aside>

Exemple 2
Utilisez CSS pour styliser l'élément <aside> :

<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>

<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>

<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring
exciting attractions, international pavilions, award-winning fireworks and
seasonal special events.</p>
</aside>

<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>

</body>
</html>

Éléments HTML <figure> et <figcaption>

La <figure>balise spécifie le contenu autonome, comme les illustrations, les diagrammes,
les photos, les listes de codes, etc.

La <figcaption>balise définit la légende d'un <figure>élément. L' <figcaption>élément

peut être placé comme premier ou dernier enfant d'un <figure>élément.

L' <img>élément définit l'image/illustration réelle.

Exemple
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Pourquoi des éléments sémantiques ?
Selon le W3C : « Un Web sémantique permet de partager et de réutiliser les données
entre les applications, les entreprises et les communautés. »

Éléments sémantiques en HTML

Vous trouverez ci-dessous une liste de certains éléments sémantiques du HTML.

Tag Description

<article> Defines independent, self-contained content

<aside> Defines content aside from the page content

<details> Defines additional details that the user can view or hide

<figcaption> Defines a caption for a <figure> element

<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

<footer> Defines a footer for a document or section

<header> Specifies a header for a document or section

<main> Specifies the main content of a document

<mark> Defines marked/highlighted text

<nav> Defines navigation links

<section> Defines a section in a document

<summary> Defines a visible heading for a <details> element

<time> Defines a date/time

Guide de style HTML

Un code HTML cohérent, propre et ordonné permet aux autres de lire et de

comprendre plus facilement votre code.

Voici quelques conseils et astuces pour créer un bon code HTML.

Toujours déclarer le type de document

Déclarez toujours le type de document comme première ligne de votre document.

Le type de document correct pour HTML est :

<!DOCTYPE html>

Utiliser des noms d'éléments en minuscules

HTML permet de mélanger des lettres majuscules et minuscules dans les noms
d'éléments.

Cependant, nous recommandons d'utiliser des noms d'éléments en minuscules, car :

• Mélanger des noms en majuscules et en minuscules est une mauvaise idée

• Les développeurs utilisent généralement des noms en minuscules
• Les minuscules semblent plus propres
• Les minuscules sont plus faciles à taper

Bien:
<body>
<p>This is a paragraph.</p>
</body>
Mauvais:
<BODY>
<P>This is a paragraph.</P>
</BODY>

SUPPRIMER LES PUBLICITÉS

Fermer tous les éléments HTML

En HTML, vous n'êtes pas obligé de fermer tous les éléments (par exemple
l' <p>élément).

Cependant, nous recommandons fortement de fermer tous les éléments HTML, comme
ceci :

Bien:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>

Mauvais:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>

Utiliser des noms d'attributs en minuscules

HTML permet de mélanger des lettres majuscules et minuscules dans les noms
d'attributs.

Cependant, nous recommandons d'utiliser des noms d'attributs en minuscules, car :

• Mélanger des noms en majuscules et en minuscules est une mauvaise idée

• Les développeurs utilisent généralement des noms en minuscules
• Les minuscules semblent plus propres
• Les minuscules sont plus faciles à taper

Bien:
<a href="[Link] our HTML tutorial</a>

Mauvais:
<a HREF="[Link] our HTML tutorial</a>

Toujours citer les valeurs d'attribut

HTML autorise les valeurs d'attribut sans guillemets.

Cependant, nous recommandons de citer les valeurs d'attribut, car :

• Les développeurs citent généralement les valeurs d'attribut

• Les valeurs entre guillemets sont plus faciles à lire
• Vous DEVEZ utiliser des guillemets si la valeur contient des espaces

Bien:
<table class="striped">

Mauvais:
<table class=striped>

Très mauvais:
Cela ne fonctionnera pas, car la valeur contient des espaces :

<table class=table striped>

Spécifiez toujours l'alt, la largeur et la
hauteur des images
Spécifiez toujours l' altattribut pour les images. Cet attribut est important si l'image ne
peut pas être affichée pour une raison quelconque.

Définissez également toujours le format widthet l'emplacement heightdes images. Cela

réduit le scintillement, car le navigateur peut réserver de l'espace pour l'image avant son
chargement.

Bien:
<img src="[Link]" alt="HTML5" style="width:128px;height:128px">

Mauvais:
<img src="[Link]">

Espaces et signes égaux

Le HTML autorise les espaces autour des signes « égal ». Cependant, l'absence
d'espaces facilite la lecture et permet de mieux regrouper les entités.

Bien:
<link rel="stylesheet" href="[Link]">

Mauvais:
<link rel = "stylesheet" href = "[Link]">

Évitez les longues lignes de code

Lorsque vous utilisez un éditeur HTML, il n'est PAS pratique de faire défiler vers la droite
et la gauche pour lire le code HTML.

Essayez d'éviter les lignes de code trop longues.

Lignes vides et retrait

N'ajoutez pas de lignes vides, d'espaces ou d'indentations sans raison.

Pour plus de lisibilité, ajoutez des lignes vides pour séparer les blocs de code
volumineux ou logiques.

Pour une meilleure lisibilité, ajoutez deux espaces de retrait. N'utilisez pas la touche Tab.

Bien:
<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>

<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in
the United Kingdom.</p>

<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the largest
population centers in Europe.</p>

</body>

Mauvais:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater
Tokyo Area, and the most populous metropolitan area in the world.</p>
<h2>London</h2><p>London is the capital city of England. It is the most
populous city in the United Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area is one of
the largest population centers in Europe.</p>
</body>

Bon exemple de tableau :

<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>

Bon exemple de liste :

<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>

Ne sautez jamais l'élément <title>

L' <title>élément est obligatoire en HTML.

L' <title>élément:
• définit un titre dans la barre d'outils du navigateur
• fournit un titre à la page lorsqu'elle est ajoutée aux favoris
• affiche un titre pour la page dans les résultats des moteurs de recherche

Alors, essayez de rendre le titre aussi précis et significatif que possible :

<title>HTML Style Guide and Coding Conventions</title>

Omettre <html> et <body> ?

Une page HTML sera validée sans les balises <html>et :<body>

Exemple
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Cependant, nous vous recommandons fortement de toujours ajouter les

balises <html>et <body>!

L'omission <body>peut produire des erreurs dans les navigateurs plus anciens.

L'omission peut <html>également <body> faire planter les logiciels DOM et XML.

Omettre <head> ?
La balise HTML <head> peut également être omise.

Les navigateurs ajouteront tous les éléments avant <body>, à un <head> élément par
défaut.
Exemple
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Nous recommandons toutefois d'utiliser le <head>tag.

Fermer les éléments HTML vides ?

En HTML, il est facultatif de fermer les éléments vides.

Autorisé:
<meta charset="utf-8">

Également autorisé :
<meta charset="utf-8" />

Si vous souhaitez qu'un logiciel XML/XHTML accède à votre page, conservez la barre
oblique de fermeture (/), car elle est obligatoire dans XML et XHTML.

Ajoutez l'attribut lang

Vous devez toujours inclure l' langattribut à l'intérieur de la <html>balise pour déclarer la
langue de la page web. Ceci est destiné à faciliter la recherche et l'utilisation par les
moteurs de recherche et les navigateurs.
Exemple
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Métadonnées
Pour garantir une interprétation correcte et une indexation correcte des moteurs de
recherche, la langue et l'encodage des caractères doivent être définis le plus tôt possible
dans un document HTML :<meta charset="charset">

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>

Définition de la fenêtre d'affichage

La fenêtre d'affichage est la zone visible d'une page web par l'utilisateur. Elle varie selon
l'appareil : elle sera plus petite sur un téléphone portable que sur un écran d'ordinateur.

Vous devez inclure l’ <meta>élément suivant dans toutes vos pages Web :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Cela donne au navigateur des instructions sur la façon de contrôler les dimensions et la
mise à l'échelle de la page.

La width=device-widthpartie définit la largeur de la page pour qu'elle suive la largeur de

l'écran de l'appareil (qui varie en fonction de l'appareil).

La initial-scale=1.0partie définit le niveau de zoom initial lorsque la page est chargée

pour la première fois par le navigateur.

Voici un exemple d'une page Web sans la balise méta viewport et de la même page
Web avec la balise méta viewport :

Astuce : si vous naviguez sur cette page avec un téléphone ou une tablette, vous
pouvez cliquer sur les deux liens ci-dessous pour voir la différence.

Sans la balise méta viewport

Avec la balise méta viewport

Commentaires HTML
Les commentaires courts doivent être écrits sur une seule ligne, comme ceci :

Les commentaires qui s'étendent sur plusieurs lignes doivent être écrits comme ceci :

Les commentaires longs sont plus faciles à observer s'ils sont indentés de deux espaces.
Utilisation des feuilles de style
Utilisez une syntaxe simple pour créer des liens vers des feuilles de style (l' typeattribut
n'est pas nécessaire) :

<link rel="stylesheet" href="[Link]">

Les règles CSS courtes peuvent être écrites de manière compressée, comme ceci :

[Link] {font-family:Verdana;font-size:16em;}

Les règles CSS longues doivent être écrites sur plusieurs lignes :

body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}

• Placez le crochet ouvrant sur la même ligne que le sélecteur

• Utilisez un espace avant le crochet ouvrant
• Utiliser deux espaces d'indentation
• Utilisez un point-virgule après chaque paire propriété-valeur, y compris la dernière
• Utilisez des guillemets autour des valeurs uniquement si la valeur contient des espaces
• Placez la parenthèse fermante sur une nouvelle ligne, sans espaces de début

Chargement de JavaScript en HTML

Utilisez une syntaxe simple pour charger des scripts externes (l' typeattribut n'est pas
nécessaire) :

Accéder aux éléments HTML avec JavaScript

L'utilisation de code HTML « désordonné » peut entraîner des erreurs JavaScript.

Ces deux instructions JavaScript produiront des résultats différents :

Exemple
getElementById("Demo").innerHTML = "Hello";

getElementById("demo").innerHTML = "Hello";

Visitez le Guide de style JavaScript .

Utiliser des noms de fichiers en minuscules

Certains serveurs Web (Apache, Unix) sont sensibles à la casse concernant les noms de
fichiers : « [Link] » n'est pas accessible en tant que « [Link] ».

Les autres serveurs Web (Microsoft, IIS) ne sont pas sensibles à la casse : « [Link] »
est accessible sous la forme « [Link] ».

Si vous utilisez un mélange de majuscules et de minuscules, vous devez en être

conscient.

Si vous passez d'un serveur insensible à la casse à un serveur sensible à la casse, même
de petites erreurs endommageront votre site Web !

Pour éviter ces problèmes, utilisez toujours des noms de fichiers en minuscules !

Extensions de fichiers
Les fichiers HTML doivent avoir une extension .html ( .htm est autorisé).

Les fichiers CSS doivent avoir une extension .css .

Les fichiers JavaScript doivent avoir une extension .js .

Différences entre .htm et .html ?
Il n'y a aucune différence entre les extensions de fichier .htm et .html !

Les deux seront traités comme du HTML par n’importe quel navigateur Web et serveur
Web.

Noms de fichiers par défaut

Lorsqu'une URL ne spécifie pas de nom de fichier à la fin (comme
« [Link] »), le serveur ajoute simplement un nom de fichier par
défaut, tel que « [Link] », « [Link] », « [Link] » ou « [Link] ».

Si votre serveur est configuré uniquement avec « [Link] » comme nom de fichier
par défaut, votre fichier doit être nommé « [Link] » et non « [Link] ».

Cependant, les serveurs peuvent être configurés avec plusieurs noms de fichiers par
défaut ; en général, vous pouvez configurer autant de noms de fichiers par défaut que
vous le souhaitez.
Entités HTML

Les caractères réservés en HTML doivent être remplacés par des entités :

• < (inférieur à) = <

• > (supérieur à) = >

Entités de caractères HTML

Certains caractères sont réservés en HTML.

Si vous utilisez les signes inférieur à (<) ou supérieur à (>) dans votre texte HTML, le
navigateur peut les mélanger avec des balises.

Les noms d’entité ou les numéros d’entité peuvent être utilisés pour afficher les
caractères HTML réservés.

Les noms d’entités ressemblent à ceci :

&entity_name;

Les numéros d’entité ressemblent à ceci :

&#entity_number;

Pour afficher un signe inférieur à (<), il faut écrire : < ou <

Les noms d’entités sont plus faciles à retenir que les numéros d’entités.

Espace insécable
Une entité HTML couramment utilisée est l'espace insécable :
Un espace insécable est un espace qui ne se divise pas en une nouvelle ligne.

Deux mots séparés par un espace insécable restent ensemble (sans nouvelle ligne). Ceci
est pratique lorsque la séparation des mots risque d'être perturbante.

Exemples:

• § 10
• 10 km/h
• 22h

Une autre utilisation courante de l’espace insécable est d’empêcher les navigateurs de
tronquer les espaces dans les pages HTML.

Si vous écrivez 10 espaces dans votre texte, le navigateur en supprimera 9. Pour ajouter
de véritables espaces à votre texte, vous pouvez utiliser l' entité caractère .

Le trait d'union insécable ( - ) est utilisé pour définir un caractère de trait d'union (-) qui
ne se coupe pas en une nouvelle ligne.

SUPPRIMER LES PUBLICITÉS

Quelques entités de caractères HTML utiles

Result Description Name Number

non-breaking space    

< less than < <

> greater than > >

& ampersand & &

" double quotation mark " "

' single quotation mark ' '

¢ cent ¢ ¢

£ pound £ £

¥ yen ¥ ¥

€ euro € €

® registered trademark ® ®

™ trademark ™ ™

Note
Les noms d’entités sont sensibles à la casse.

Combinaison de signes diacritiques

Un signe diacritique est un « glyphe » ajouté à une lettre.

Certains signes diacritiques, comme le grave (̀) et l'aigu (́), sont appelés accents.

Les signes diacritiques peuvent être utilisés en combinaison avec des caractères
alphanumériques pour produire un caractère qui n'est pas présent dans le jeu de
caractères (codage) utilisé dans la page.

Voici quelques exemples :

Mark Character Construct Result

̀ a à à
́ a á á

̂ a â â

̃ a ã ã

̀ O Ò Ò

́ O Ó Ó

̂ O Ô Ô

̃ O Õ Õ

Il y a plus d’exemples dans le chapitre suivant.

Symboles HTML
Entités de symboles HTML
Des symboles ou des lettres qui ne sont pas présents sur votre clavier peuvent être
ajoutés au HTML à l'aide d'entités.

Pour ajouter de tels symboles à une page HTML, vous pouvez utiliser le nom de l'entité
ou le numéro de l'entité (une référence décimale ou hexadécimale) pour le symbole :

Exemple
Afficher le signe euro :

<p>I will display €</p>

<p>I will display €</p>
<p>I will display €</p>

S'affichera comme :
J'afficherai €
J'afficherai €
J'afficherai €

Quelques entités de symboles HTML

Char Number Entity Description

© © COPYRIGHT

® ® REGISTERED TRADEMARK

®
€ € EURO SIGN
€

™ ™ TRADEMARK

™

← ← LEFT ARROW

←

↑ ↑ UP ARROW

↑

→ → RIGHT ARROW

→

↓ ↓ DOWN ARROW

↓

♠ &spades; SPADE

♣ &clubs; CLUB

♥ &hearts; HEART

♦ &diams; DIAMOND

Apprendre encore plus:

Référence monétaire complète

Référence des flèches complètes

Référence complète des symboles

Quelques entités mathématiques HTML

Char Number Entity Description

∀ ∀ For all

∀

∂ ∂ Partial differential

∂

∃ ∃ There exists

∃

∅ ∅ Empty sets

∅
∇ ∇ Nabla
∇

∈ ∈ Element of

∈

∉ ∉ Not an element of

∉

∋ &ni; Contains as member

∋

∏ ∏ N-ary product

∏

∑ ∑ N-ary summation

∑

Apprendre encore plus:

Référence complète des symboles mathématiques

Référence complète des symboles

SUPPRIMER LES PUBLICITÉS

Quelques entités de lettres grecques HTML
Char Number Entity Description

Α Α GREEK ALPHA

Β Β GREEK BETA

Γ Γ GREEK GAMMA

Δ Δ GREEK DELTA

Ε Ε GREEK EPSILON

Ζ Ζ GREEK ZETA

Apprendre encore plus:

Référence grecque complète

Référence complète des symboles

Plus de symboles
Symboles monétaires

€₤₿₡₯₣₽
Symboles ressemblant à des lettres

℃℉Ω⅂⅃⅄™
Formes numériques

ⅡⅢⅥ⅛⅜⅝
Alphanumérique ci-joint

ⒶⒷ🄰🄱🅐🅑①②
Dessins de boîtes

┌┐└┘├┤┬┴
Éléments de bloc

▄▃▅▇░▒▓
Formes géométriques

▣▧▲△◐◒◧◪
Symboles divers

☊⚖⛋⚜☘
Dingbats
✀✇✈✎✔✜✱
Symboles astrologiques

☿♁♃♆☼☽☾
opérateurs mathématiques

∑∃√∏≠∞⨎∅
Symboles mathématiques

⟁⟀⟆⟮⟯⟨⟩⦀⧻⦿⧖
Mathématiques alphanumériques

𝚷𝚫𝚽𝛀𝓪𝓫𝓬𝓭
Divers techniques

⍇⍉⍾⍽⌬⌇
Symboles colorés

⌚⏩⏪☔⚽⚾

Flèches

←↑→↓⇐⇑⇒⇓
Flèches A

⟰⟱⟽⟾⟻⟼
Flèches B
⤀⤁⤺⤻⥀
Flèches C

⌬⌬⌬⌬
Symboles et flèches

⬮⬯⭅⭆
Symboles météorologiques

☀☁☂☃★☆☇☈
Symboles musicaux

⌬⌬⌬♩♪♫♬
Domino et dés

🁭🁵🂄 ⚁ ⚂ ⚄
Tuiles de Mahjong

🀀🀁🀃🀅
Symboles des cartes

♠♣♥♦🂡🂣🂨
Symboles des échecs

♔♕♘♖
Symboles Yin Yang
☯☰☱☲☮☸☣
Symboles de recyclage

♲♻♾☢
Vie et religion

⛨☮♰♀♂
Lieux et circulation

⛱⛴⛟⛐⚠
Utilisation des émojis en HTML

Que sont les émojis ?

Les émojis ressemblent à des images, mais ils n’en sont pas.

Les émojis sont des lettres (caractères) du jeu de caractères UTF-8 (Unicode) :

😄😍💗

UTF-8 couvre presque tous les caractères et symboles du monde.

Émoji Valeur
Exemples d'émojis HTML
Smileys

😀😂😊😎😜

Mains
✌✊☝✋👌

Personnes

👮🧕👦💏🤴

Bureau

📈💻📌📆📒

Lieux

⛺🌋🗽🗿🏢

Transport

🚈🚗🚢🚌🚀

Animaux

🐴🐕🐘🐻🐞

Nourriture

☕🌭🍞🍩🍣

Plantes

🌴🌳🌼🍁🥑

Fruits

🍇🍊🍏🥝🥥

Sportif

⚽🏆🤿🏋⛳

Terre et Ciel

🌐🌍🌖🌟🌞
Météo

⛅☔🌈🌂⛄

Vêtements

👚👕🎩👜👠

Audio/Vidéo

🎥🎵🎹🔊📺

Célébration

🎁🎃🎈🎓🎂

Divertissement

🎨🎪🎭🎡🎢

Symboles

💡💰🔐🔞🔔

Apprendre encore plus:

Référence complète des emojis HTML

L'attribut charset HTML

Pour afficher correctement une page HTML, un navigateur Web doit connaître le jeu de
caractères utilisé dans la page.

Ceci est spécifié dans la <meta>balise :

Caractères UTF-8
De nombreux caractères UTF-8 ne peuvent pas être saisis sur un clavier, mais ils peuvent
toujours être affichés à l'aide de nombres (appelés numéros d'entité) :

• A est 65
• B est 66
• C est 67

Exemple
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>

<p>I will display A B C</p>

</body>
</html>

Exemple expliqué
L' <meta charset="UTF-8">élément définit le jeu de caractères.

Les caractères A, B et C sont affichés par les numéros 65, 66 et 67.

Pour que le navigateur comprenne que vous affichez un caractère, vous devez
commencer le numéro d'entité par et le terminer par ; (point-virgule).

SUPPRIMER LES PUBLICITÉS

Caractères Emoji
Les émojis sont également des caractères de l'alphabet UTF-8 :

• 😄 est 128516
• 😍 est 128525
• 💗 est 128151

Exemple
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>

<h1>My First Emoji</h1>

</body>
</html>

Étant donné que les émojis sont des caractères, ils peuvent être copiés, affichés et
dimensionnés comme n’importe quel autre caractère HTML.

Exemple
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>

<h1>Sized Emojis</h1>

</body>
</html>
Codage HTML (jeux de
caractères)
L'attribut charset HTML
Pour afficher correctement une page HTML, un navigateur Web doit savoir quel jeu de
caractères utiliser.

Le jeu de caractères est spécifié dans la <meta>balise :

La spécification HTML encourage les développeurs Web à utiliser le jeu de caractères

UTF-8.

UTF-8 couvre presque tous les caractères et symboles du monde !

Apprendre encore plus:

Référence UTF-8 complète

Le jeu de caractères ASCII

ASCII a été la première norme de codage de caractères pour le Web.

Il a défini 128 caractères latins différents qui pourraient être utilisés sur Internet :

• Lettres anglaises (az et AZ)

• Chiffres (0-9)
• Quelques caractères spéciaux : ! $ + - ( ) @ < > . # ?

Le jeu de caractères ANSI

ANSI (Windows-1252) était le premier jeu de caractères Windows :

• Identique à l'ASCII pour les 127 premiers caractères

• Caractères spéciaux de 128 à 159
• Identique à UTF-8 de 160 à 255

Le jeu de caractères ISO-8859-1

Le jeu de caractères par défaut pour HTML 4 était ISO-8859-1 .

Il supportait 256 caractères :

• Identique à l'ASCII pour les 127 premiers caractères

• N'utilise pas les caractères de 128 à 159
• Identique à ANSI et UTF-8 de 160 à 255

Exemple HTML 4
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

Exemple HTML 5
<meta charset="ISO-8859-1">

Le jeu de caractères UTF-8

• Identique à l'ASCII pour les valeurs de 0 à 127
• N'utilise pas les caractères de 128 à 159
• Identique à ANSI et 8859-1 de 160 à 255
• Continue de la valeur 256 à 10 000 caractères

Apprendre encore plus:

Référence UTF-8 complète

SUPPRIMER LES PUBLICITÉS

Caractères HTML UTF-8

Latin de base

ABCD abcd 0123 ?#$%

Latin étendu

ĀĂĄ ĆĈĊ ĒĔĖĘ Ⱡ Ɽ Ɱ Ⱳ

Extensions IPA
ɖɜɣ ɘɫɛ ɱɷɞ
Super et indice

C⁰ Cⁱ C⁴ C⁵ C₆ C₇ C₈

Modificateurs d'espacement

pʰ pʱ pʲ pʳ
Signes diacritiques

àáâã èéêẽ òóôõ

Ponctuation générale

‰‱⁒‼⁇⁈⁉⁎⁑⁂
Braille

⠓⠑⠇⠇⠕ ⠺⠕⠗⠇⠙
Localisateurs de ressources
uniformes HTML

Une URL est un autre mot pour une adresse Web.

Une URL peut être composée de mots (par exemple [Link]) ou d'une
adresse IP (Internet Protocol) (par exemple [Link]).

La plupart des gens saisissent leur nom lorsqu'ils surfent, car les noms sont plus
faciles à retenir que les chiffres.

URL - Localisateur uniforme de ressources

Les navigateurs Web demandent des pages aux serveurs Web à l’aide d’une URL.

Un localisateur de ressources uniformes (URL) est utilisé pour adresser un document (ou
d'autres données) sur le Web.

Une adresse Web telle que [Link] suit ces règles

de syntaxe :

scheme://[Link]:port/path/filename

Explication:

• schéma - définit le type de service Internet (le plus courant est http ou https )
• préfixe - définit un préfixe de domaine (la valeur par défaut pour http est www )
• domaine - définit le nom de domaine Internet (comme [Link])
• port - définit le numéro de port sur l'hôte (la valeur par défaut pour http est 80 )
• path - définit un chemin sur le serveur (si omis : le répertoire racine du site)
• nom de fichier - définit le nom d'un document ou d'une ressource
Schémas d'URL courants
Le tableau ci-dessous répertorie quelques schémas courants :

Scheme Short for Used for

http HyperText Transfer Protocol Common web pages. Not encrypted

https Secure HyperText Transfer Protocol Secure web pages. Encrypted

ftp File Transfer Protocol Downloading or uploading files

file A file on your computer

SUPPRIMER LES PUBLICITÉS

Codage d'URL
Les URL ne peuvent être transmises sur Internet qu'avec le jeu de caractères ASCII . Si
une URL contient des caractères hors du jeu ASCII, elle doit être convertie.

Le codage d'URL convertit les caractères non ASCII en un format pouvant être transmis
sur Internet.
Le codage d'URL remplace les caractères non ASCII par un « % » suivi de chiffres
hexadécimaux.

Les URL ne peuvent pas contenir d'espaces. Le codage des URL remplace normalement
un espace par un signe plus (+) ou %20.

Essayez-le vous-même
Hello Günter

Si vous cliquez sur « Soumettre », le navigateur encodera l'URL de l'entrée avant qu'elle
ne soit envoyée au serveur.

Une page sur le serveur affichera l’entrée reçue.

Essayez une autre entrée et cliquez à nouveau sur Soumettre.

Exemples de codage ASCII

Votre navigateur encodera les entrées en fonction du jeu de caractères utilisé dans votre
page.

Le jeu de caractères par défaut dans HTML5 est UTF-8.

Character From Windows-1252 From UTF-8

€ %80 %E2%82%AC

® %AE %C2%AE

À %C0 %C3%80

Á %C1 %C3%81

Â %C2 %C3%82

Ã %C3 %C3%83

Ä %C4 %C3%84

Å %C5 %C3%85

Pour une référence complète de tous les encodages d'URL, visitez notre Référence
d'encodage d'URL .
HTML contre XHTML

XHTML est une version plus stricte et davantage basée sur XML du HTML.

Qu'est-ce que XHTML ?

• XHTML signifie E X tensible Hyper T ext M arkup Language
• XHTML est une version plus stricte et davantage basée sur XML du HTML
• XHTML est HTML défini comme une application XML
• XHTML est pris en charge par tous les principaux navigateurs

Pourquoi XHTML ?
XML est un langage de balisage dans lequel tous les documents doivent être balisés
correctement (être « bien formés »).

Le XHTML a été développé pour rendre le HTML plus extensible et flexible, compatible
avec d'autres formats de données (comme XML). De plus, les navigateurs ignorent les
erreurs dans les pages HTML et tentent d'afficher le site web même s'il présente des
erreurs de balisage. Le XHTML offre donc une gestion des erreurs beaucoup plus stricte.

Si vous souhaitez étudier XML, veuillez lire notre tutoriel XML .

Les différences les plus importantes avec

HTML
• <!DOCTYPE> est obligatoire
• L'attribut xmlns dans <html> est obligatoire
• <html>, <head>, <title> et <body> sont obligatoires
• Les éléments doivent toujours être correctement imbriqués
• Les éléments doivent toujours être fermés
• Les éléments doivent toujours être en minuscules
• Les noms d'attributs doivent toujours être en minuscules
• Les valeurs d'attribut doivent toujours être entre guillemets
• La minimisation des attributs est interdite

SUPPRIMER LES PUBLICITÉS

XHTML - <!DOCTYPE ....> est obligatoire

Un document XHTML doit avoir une déclaration XHTML <!DOCTYPE>.

Les éléments <html>, <head>, <title> et <body> doivent également être présents, et
l'attribut xmlns dans <html> doit spécifier l'espace de noms XML pour le document.

Exemple
Voici un document XHTML avec un minimum de balises requises :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"[Link]
<html xmlns="[Link]
<head>
<title>Title of document</title>
</head>
<body>

some content here...

</body>
</html>
Les éléments XHTML doivent être
correctement imbriqués
En XHTML, les éléments doivent toujours être correctement imbriqués les uns dans les
autres, comme ceci :

Correct:
<b><i>Some text</i></b>

Faux:
<b><i>Some text</b></i>

Les éléments XHTML doivent toujours être

fermés
En XHTML, les éléments doivent toujours être fermés, comme ceci :

Correct:
<p>This is a paragraph</p>
<p>This is another paragraph</p>

Faux:
<p>This is a paragraph
<p>This is another paragraph

Les éléments vides XHTML doivent toujours

être fermés
En XHTML, les éléments vides doivent toujours être fermés, comme ceci :
Correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="[Link]" alt="Happy face" />

Faux:
A break: <br>
A horizontal rule: <hr>
An image: <img src="[Link]" alt="Happy face">

Les éléments XHTML doivent être en

minuscules
En XHTML, les noms des éléments doivent toujours être en minuscules, comme ceci :

Correct:
<body>
<p>This is a paragraph</p>
</body>

Faux:
<BODY>
<P>This is a paragraph</P>
</BODY>

Les noms d'attributs XHTML doivent être en

minuscules
En XHTML, les noms d’attributs doivent toujours être en minuscules, comme ceci :

Correct:
<a href="[Link] our HTML tutorial</a>

Faux:
<a HREF="[Link] our HTML tutorial</a>

Les valeurs d'attribut XHTML doivent être

entre guillemets
En XHTML, les valeurs d’attribut doivent toujours être entre guillemets, comme ceci :

Correct:
<a href="[Link] our HTML tutorial</a>

Faux:
<a href=[Link] our HTML tutorial</a>

La minimisation des attributs XHTML est

interdite
En XHTML, la minimisation des attributs est interdite :

Correct:
<input type="checkbox" name="vehicle" value="car" checked="checked" />
<input type="text" name="lastname" disabled="disabled" />

Faux:
<input type="checkbox" name="vehicle" value="car" checked />
<input type="text" name="lastname" disabled />
Valider le HTML avec le validateur W3C
Mettez votre adresse Web dans la case ci-dessous :

[Link]

Vous aimerez peut-être aussi

Cours HTML-1
Pas encore d'évaluation
Cours HTML-1
71 pages
Cours HTML 2
Pas encore d'évaluation
Cours HTML 2
105 pages
Cours HTML-4
Pas encore d'évaluation
Cours HTML-4
165 pages
Cours HTML-3
Pas encore d'évaluation
Cours HTML-3
132 pages
Introduction au langage HTML pour débutants
Pas encore d'évaluation
Introduction au langage HTML pour débutants
5 pages
Code HTML pour Exposants et Éléments
Pas encore d'évaluation
Code HTML pour Exposants et Éléments
108 pages
COURS HTML Complet
Pas encore d'évaluation
COURS HTML Complet
123 pages
Introduction au langage HTML et ses versions
Pas encore d'évaluation
Introduction au langage HTML et ses versions
33 pages
Les Bases Du HTML
Pas encore d'évaluation
Les Bases Du HTML
2 pages
Introduction au Tutoriel HTML
Pas encore d'évaluation
Introduction au Tutoriel HTML
9 pages
Introduction au développement web HTML/CSS
Pas encore d'évaluation
Introduction au développement web HTML/CSS
27 pages
Introduction au développement HTML
Pas encore d'évaluation
Introduction au développement HTML
42 pages
HTML Et CSS Cours
Pas encore d'évaluation
HTML Et CSS Cours
13 pages
Introduction au Langage HTML
Pas encore d'évaluation
Introduction au Langage HTML
6 pages
Introduction au langage HTML
Pas encore d'évaluation
Introduction au langage HTML
5 pages
Introduction À HTML - Séance 1
Pas encore d'évaluation
Introduction À HTML - Séance 1
8 pages
Introduction au HTML pour débutants
Pas encore d'évaluation
Introduction au HTML pour débutants
8 pages
Introduction au langage HTML
Pas encore d'évaluation
Introduction au langage HTML
25 pages
Introduction au document HTML
Pas encore d'évaluation
Introduction au document HTML
27 pages
HTML 01 Introduction
Pas encore d'évaluation
HTML 01 Introduction
12 pages
Introduction au HTML et référencement images
Pas encore d'évaluation
Introduction au HTML et référencement images
29 pages
Introduction à HTML 5 et ses applications
Pas encore d'évaluation
Introduction à HTML 5 et ses applications
98 pages
Introduction au HTML pour débutants
Pas encore d'évaluation
Introduction au HTML pour débutants
39 pages
Introduction au langage HTML
Pas encore d'évaluation
Introduction au langage HTML
92 pages
Introduction au fichier HTML
Pas encore d'évaluation
Introduction au fichier HTML
30 pages
Introduction aux éléments HTML essentiels
Pas encore d'évaluation
Introduction aux éléments HTML essentiels
10 pages
Introduction au langage HTML
Pas encore d'évaluation
Introduction au langage HTML
28 pages
Introduction au langage HTML5
Pas encore d'évaluation
Introduction au langage HTML5
49 pages
Initiation à la programmation Web
Pas encore d'évaluation
Initiation à la programmation Web
3 pages
Introduction à HTML5 et ses éléments
Pas encore d'évaluation
Introduction à HTML5 et ses éléments
25 pages
Introduction au HTML et ses éléments
Pas encore d'évaluation
Introduction au HTML et ses éléments
36 pages
Introduction au HTML : Structure et Balises
Pas encore d'évaluation
Introduction au HTML : Structure et Balises
4 pages
Introduction au langage HTML et ses éléments
Pas encore d'évaluation
Introduction au langage HTML et ses éléments
15 pages
Balise Meta Charset en HTML
Pas encore d'évaluation
Balise Meta Charset en HTML
70 pages
Introduction au HTML et balises essentielles
Pas encore d'évaluation
Introduction au HTML et balises essentielles
2 pages
Exemple de site web statique en HTML
Pas encore d'évaluation
Exemple de site web statique en HTML
37 pages
01 HTML
Pas encore d'évaluation
01 HTML
7 pages
Introduction au langage HTML5
Pas encore d'évaluation
Introduction au langage HTML5
22 pages
Introduction à HTML et CSS pour débutants
Pas encore d'évaluation
Introduction à HTML et CSS pour débutants
21 pages
Jour01 Introduction HTML
Pas encore d'évaluation
Jour01 Introduction HTML
15 pages
Introduction au HTML et ses éléments
Pas encore d'évaluation
Introduction au HTML et ses éléments
3 pages
Introduction au langage HTML
Pas encore d'évaluation
Introduction au langage HTML
76 pages
Notions de base en HTML
Pas encore d'évaluation
Notions de base en HTML
17 pages
Cours Complet sur le HTML
Pas encore d'évaluation
Cours Complet sur le HTML
60 pages
Structure d'une page HTML
Pas encore d'évaluation
Structure d'une page HTML
18 pages
Introduction au langage HTML et balises
Pas encore d'évaluation
Introduction au langage HTML et balises
6 pages
Cours HTML Seance1
Pas encore d'évaluation
Cours HTML Seance1
21 pages
Introduction au HTML et CSS
Pas encore d'évaluation
Introduction au HTML et CSS
50 pages
Introduction au HTML et balises essentielles
Pas encore d'évaluation
Introduction au HTML et balises essentielles
9 pages
Le Codage HTML Et CSS - Partie-1
Pas encore d'évaluation
Le Codage HTML Et CSS - Partie-1
5 pages
Cours de HTML : Bases et Exercices
Pas encore d'évaluation
Cours de HTML : Bases et Exercices
25 pages
Introduction à HTML et CSS
Pas encore d'évaluation
Introduction à HTML et CSS
59 pages
Introduction au HTML et ses balises
Pas encore d'évaluation
Introduction au HTML et ses balises
13 pages
Chapitre 1 HTML
Pas encore d'évaluation
Chapitre 1 HTML
75 pages
Cours HTML pour Débutants
Pas encore d'évaluation
Cours HTML pour Débutants
6 pages
Attributs et éléments HTML essentiels
Pas encore d'évaluation
Attributs et éléments HTML essentiels
20 pages
Introduction au HTML et CSS
Pas encore d'évaluation
Introduction au HTML et CSS
8 pages
Introduction au document HTML
Pas encore d'évaluation
Introduction au document HTML
10 pages
Introduction à HTML et ses éléments
Pas encore d'évaluation
Introduction à HTML et ses éléments
7 pages
TP Algo Difference Produit Quotient
Pas encore d'évaluation
TP Algo Difference Produit Quotient
1 page
Psaumes de Protection Divine
Pas encore d'évaluation
Psaumes de Protection Divine
5 pages
Versets de Victoire de l'Ancien Testament
Pas encore d'évaluation
Versets de Victoire de l'Ancien Testament
2 pages
Fonctionnalités Essentielles de Word
Pas encore d'évaluation
Fonctionnalités Essentielles de Word
4 pages
Corrigé de l'exercice sur les nombres relatifs
Pas encore d'évaluation
Corrigé de l'exercice sur les nombres relatifs
9 pages
Cahier des charges robot vocal autonome
Pas encore d'évaluation
Cahier des charges robot vocal autonome
3 pages
Fiche de Personnages et Équipements Warhammer
Pas encore d'évaluation
Fiche de Personnages et Équipements Warhammer
12 pages
Stockage et Manipulation des Lubrifiants
Pas encore d'évaluation
Stockage et Manipulation des Lubrifiants
42 pages
L'Islam face au monde moderne
100% (2)
L'Islam face au monde moderne
30 pages
Guide d'utilisation de l'auto-radio 86A
Pas encore d'évaluation
Guide d'utilisation de l'auto-radio 86A
20 pages
Attestation d'assurance IVECO 2025
Pas encore d'évaluation
Attestation d'assurance IVECO 2025
1 page
Fiche Technique de la Génoise
Pas encore d'évaluation
Fiche Technique de la Génoise
1 page
Étude des fonctions numériques en STI
Pas encore d'évaluation
Étude des fonctions numériques en STI
10 pages
Contrôle Nettoyage Véhicules 2021
Pas encore d'évaluation
Contrôle Nettoyage Véhicules 2021
1 page
Rencontre transformative avec Dieu
Pas encore d'évaluation
Rencontre transformative avec Dieu
10 pages
Épreuves de français : Leçons 3 et 4
Pas encore d'évaluation
Épreuves de français : Leçons 3 et 4
4 pages
Les Fon Ctions Men 00 LV
Pas encore d'évaluation
Les Fon Ctions Men 00 LV
477 pages
Voyage au Cœur des Plantes Tropicales
Pas encore d'évaluation
Voyage au Cœur des Plantes Tropicales
3 pages
Chimie des Hétérocycles en Licence
Pas encore d'évaluation
Chimie des Hétérocycles en Licence
70 pages
Résolution d'équations et inéquations mathématiques
Pas encore d'évaluation
Résolution d'équations et inéquations mathématiques
5 pages
Fiche de Poste : Superviseur HSE
75% (4)
Fiche de Poste : Superviseur HSE
5 pages
Opérateurs Différentiels en Mathématiques
Pas encore d'évaluation
Opérateurs Différentiels en Mathématiques
4 pages
Bilan thermique d'un capteur solaire
Pas encore d'évaluation
Bilan thermique d'un capteur solaire
21 pages
Cours de culture cellulaire en Master
Pas encore d'évaluation
Cours de culture cellulaire en Master
54 pages
Promenade poétique en forêt
Pas encore d'évaluation
Promenade poétique en forêt
2 pages
Pièces et accessoires Cummins 6LTAA 9.3
Pas encore d'évaluation
Pièces et accessoires Cummins 6LTAA 9.3
115 pages
Grand Manifeste Gnostique du Mexique
50% (2)
Grand Manifeste Gnostique du Mexique
249 pages
Résultats financiers de COROT VENTURES
Pas encore d'évaluation
Résultats financiers de COROT VENTURES
5 pages
Anatomie et Mécanique du Système Respiratoire
Pas encore d'évaluation
Anatomie et Mécanique du Système Respiratoire
8 pages
Projet Tangaye Faso Développement
100% (1)
Projet Tangaye Faso Développement
135 pages
Émotions tumultueuses d'Ethan et Chloe
Pas encore d'évaluation
Émotions tumultueuses d'Ethan et Chloe
152 pages
Forêts : miroir de l'introspection humaine
Pas encore d'évaluation
Forêts : miroir de l'introspection humaine
2 pages
Gestion efficace des besoins clients
Pas encore d'évaluation
Gestion efficace des besoins clients
12 pages