? HTML

wf3 📝 HTML
📝 HTML
Objectifs du cours
Objectif de votre cours HTML
Quelle que soit la technologie utilisée, le langage HTML est un passage obligé du milieu du
développement web. En effet, le HTML est le ciment qui permet aux éléments d'une page internet
d'être structurés. C'est dire l'importance de ce langage et la nécessité de le connaître.
Dans ce cours HTML, vous allez apprendre à :
Créer des pages web HTML basiques

Structurer du code
Analyser et comprendre des pages web existantes
Méthodologie et pédagogie du cours HTML
Dans un but pédagogique, et a n de vous fournir la meilleure expérience d’apprentissage possible, ce

cours a été divisé en chapitres.
Vous pouvez à tout moment accéder au sommaire du cours situé à gauche de votre écran pour vous
repérer et naviguer dans le cours.
Vous avez également accès à des quizz et des exercices d’application a n de tester votre
compréhension du cours et évaluer votre progression.
En bref : tout est pensé pour faciliter un apprentissage rapide et une compréhension globale du
HTML.
Syntaxe, balises et attributs
Introduction au langage HTML
HTML (Hyper Text Markup Language) est un langage de balisage hypertexte, qui est utilisé pour créer les
pages web. Il est composé des éléments sémantiques et structurels, qui dé nissent comment des parties du
document (les titres, les paragraphes, les listes, les images etc.) doivent être présentées dans le navigateur.
Règles d'écriture des balises HTML
Les balises (nom, attribut) doivent être écrites en minuscule
Page 1 / 12
wf3 📝 HTML
Les valeurs des attributs doivent être encadrées par des guillemets : "valeur"
Il faut toujours "fermer" les balises (c'est à dire : écrire la balise fermante correspondante)
Une balise peut contenir également du texte et/ou des balises (la balise parent contient des balises
enfant)
Il faut indenter les balises enfants.
On ne peut pas fermer une balise parent sans avoir fermé la balise enfant
Mauvaise syntaxe :
<div><p>mon paragraphe</div></p>, la balise parent </div> est fermée avant la balise enfant
<p>
Syntaxe correcte :
<div><p>mon paragraphe</p></div>, la balise enfant </p> est fermée avant la balise parent
<div>
<balise ...="" attribut1="valeur1" attribut2="valeur2">

contenu de la balise
</balise>
Indentation et commentaires
L'indentation
L'indentation consiste en l'ajout de tabulations dans un code source.
Elle permet :
de simpli er l'écriture d'un code
de faciliter la recherche de bug
d'améliorer la lisibilité du code écrit
d'optimiser la collaboration entre développeurs
Le commentaire
Le commentaire est une description (une ou plusieurs phrases) rédigée par le développeur et qui ne sera pas
af chée dans la page.
En HTML, le commentaire est délimité par .
Ils permettent :
d'expliquer les décisions prises par le développeur
de noter des idées à réaliser plus tard
Page 2 / 12
wf3 📝 HTML
de donner des explications pour comprendre le code plus tard ou pour d'autres développeurs.
Exemple de code indenté et commenté
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Connexion</h1>

<div>
<form>

<div>

<label>Login</label>
<input type="text" name="login" />
</div>
<div>
<label>Password</label>
<input type="password" name="password" />
</div>
</form>
</div>

</body>
</html>
Balises fermantes
Principe des balises fermantes
Les balises de type fermantes sont les balises les plus répandues.
Elles fonctionnent par paires, comme des parenthèses : on va avoir une balise qui va « ouvrir » puis plus loin,
la balise « fermante » qui mettra n au bloc d’information. Entre ce couple de balises on insèrera le contenu.
Page 3 / 12
wf3 📝 HTML
La fermeture de la balise se fait en reprenant la balise d’ouverture et en ajoutant un / après le chevron

ouvrant <.
Par exemple :
<nom_balise> </nom_balise>
Quelques balises qui fonctionnent par paires
Le code
<p>Le texte qui constitue le paragraphe</p>

<h1>Un titre important</h1>
<div>ici le contenu d’une div</div>
<a>un lien</a>
Aperçu dans le navigateur (ici chrome):
Note
La <div> ci-dessus n’apparaît pas : pas de bordure, ni de fond. La boite crée par la div est invisible. On a besoin
de CSS si on veut lui donner une taille, une couleur, une bordure, etc.
Note 2
Le lien n’apparait pas comme un lien par défaut (bleu souligné) car dans cet exemple, le lien a besoin d’un
a ribut (href) pour fonc onner comme tel (voir ci-dessous).
A en on
pour les balises qui con ennent des a ributs, ceux-ci n’apparaissent que dans la balise ouvrante. Exemple :
<a href='#'>Un lien.</a>
Balises auto-fermantes
Comment fonctionnent les balises auto-fermantes ?
Les balises de type auto-fermantes sont des balises qui sont ouvrantes et fermantes en même temps. Cela
signi e qu'elles n'ont pas de contenu.
On ferme donc la balise en ajoutant un espace et un slash / à la n de la balise avant le symbole >.
Page 4 / 12
wf3 📝 HTML
Quelques balises auto-fermantes
<link />
<meta />
<input />
<img />
Block ou inline ?
Comment s'organisent les balises HTML ?
L’ensemble des balises HTML peut être rangé dans 2 catégories :

-Les balises de type « Inline » (en ligne)
-Les balises de type « Block » (bloc)
Les balise inline
Les balises de type inline servent à encadrer des mots, des phrases et / ou d’autres éléments « inline ».
Elles ont pour particularité d’apparaitre sur la page web à la suite les unes des autres (sur une même ligne).
Aussi, certaines propriétés css n’ont aucune in uence sur ces balises (width, margin-top et margin-bottom).
En n, leur taille dépend du contenu de ces balises.
Quelques balises de type inline
<span>coucou</span>
<a href='#'>un lien quelconque</a>
<strong>un passage important</strong>
<em>un passage assez important, avec <a href='#'>un lien</a></em>
Aperçu dans le navigateur (ici chrome)
A en on, étrangement, les images <img src="" alt=""/> sont aussi des balises Inline, elles se comportent donc
comme du texte !
Les balises block
Les balises de types block servent à créer des boîtes, délimiter des zones.
Elles peuvent contenir des balises block et / ou inline.
Elles ont pour par cularité d’apparaitre sur la page web les unes en dessous des autres.
Enfin, leur taille correspond –par défaut- à la taille de la fenêtre, ou bien du bloc qui les con ent.
Quelques balises de type block :
<div> Pour du contenu : soit des paragraphes, soit d’autres balises…</div>
Page 5 / 12
wf3 📝 HTML
<header>peut contenir images (logo) ; navigation, etc.</header>

<h1>Les titres – ce sont aussi des blocs</h1>
<p>Les paragraphes aussi, bien qu’ils contiennent des mots et des phrases,
sont des balises de type block</p>
Aperçu dans le navigateur (ici chrome)
Structure d'une page HTML

Principe de structura on d'une page HTML
Une page web, pour être valide, doit comporter un ensemble de balises :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2 grandes parties : la partie « head » et « body », toutes 2 enfant de <html>.
La partie <Head>
Dans la partie <head>, se trouvent toutes les informations sur la page : table de caractères utilisée, titre du
document, lien vers les chiers css, javascript… et d’autres balises d‘information.
Note : Ce qui est renseigné dans la balise <title> apparait dans l’onglet de votre navigateur (il sert aussi lors
de la mise en favori), et aussi et surtout pour le référencement.
Aperçu dans le navigateur (ici chrome) :
Page 6 / 12
wf3 📝 HTML
Tout le contenu informatif de la page se situera à l’intérieur de la balise <body>.

Depuis la dernière version de HTML (la 5e) on dispose de plusieurs balises pour structurer le contenu (là ou
avant, il n’y avait que la <div> qui permettait de créer des blocs d’information).
<header ></header> : En-tête du site, classiquement on retrouve le logo,

des informations communes aux autres pages du site web. La navigation
peut faire partie du header.
<nav></nav> : la balise qui contient tous les liens de navigation du
site. On trouvera classiquement une liste (<ul> la plupart du temps, mais
<ol> est possible aussi) avec des liens (<a>).
<main> </main>: cette balise est unique au sein de la page web. Elle
indique le contenu dominant et aura donc un rôle important dans le
référencement, par rapport à d’autres balises telles que <header> ou
<footer>
<article></article> et <section></section> : ces balises indiquent du
contenu thématique. Il s’agit de les utiliser en fonction de
l’information à délivrer. On les trouvera la plupart du temps dans
<main>, mais on peut les insérer dans un <header> ou un <footer>.
Attention, elles ne doivent pas servir d’éléments de mise en page ; dans ce cas, on préférera la balise <div>
(qui n’a pas de valeur sémantique).
<footer></footer> : pied de page. Même fonctionnement que <header>. Traditionnellement, on y

trouve des liens vers les mentions légales, et autres informations sur le site.
Les spéci cités du HTML 5
Notez comme le code, en plus d’être plus sémantique, devient aussi plus léger du fait d’utiliser moins
d’identi ants (et moins de div). …Et bonus : cela simpli era aussi le travail en CSS !
Exemple de page codée avant HTML 5 : Exemple de page avec HTML 5 :

<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>page de recettes</title> <title>page de recettes</title>
</head> </head>
<body> <body>
 
Page 7 / 12
wf3 📝 HTML
<div id='header'> <header>

<img src="logo.jpg" alt="logo"/> <img src="logo.jpg" alt="logo"/>
<p>Un site bien conçu avant HTML5</p> <p>Un site conçu avec HTML5</p>
</div> </header>
 
<div id="navigation"> <nav>
<ul> <ul>
<li><a href="#">Lorem</a></li> <li><a href="#">Lorem</a></li>
<li><a href="#">Veritatis</a></li> <li><a href="#">Veritatis</a></li>
<li><a href="#">Delectus</a></li> <li><a href="#">Delectus</a></li>
</ul> </ul>
</div> </nav>
 
<div id='principale'> <main>
<h1> Des recettes de cuisine</h1> <h1>Des recettes de cuisine</h1>
<div id="entrees"> <section id="entrees">
<div id="salade1"> <article id="salade1">
<p>...</p> <p>...</p>
</div> </article>
<div id="salade2"> <article id="salade2">
<p>...</p> <p>...</p>
</div> </article>
</div> </section>
<div id="plats"> <section id="plats">
<div id="lasagne"> <article id="lasagne">
<p>...</p> <p>...</p>
</div> </article>
<div id="paella"> <article id="paella">
<p>...</p> <p>...</p>
</div> </article>
</div> </section>
</div> </main>
 
<div id="footer"> <footer>
<p>© tous droits réservés - <p>© tous droits réservés -
<a href='#'>Mentions légales</a></p> <a href='#'>Mentions légales</a></p>
</div> </footer>
</body> </body>
</html> </html>
Tester
What do you want to do ?
New mail Copy
Balises media
Page 8 / 12
wf3 📝 HTML
Quelques rappels
En préambule, rappelons que tous les formats d’image ne sont pas forcément adaptés pour une utilisation
web. Les formats conseillés restent :
.jpeg (ou.jpg, c’est pareil)
.png
.gif
.svg
La différence et le choix entre ces formats va se faire en fonction de critères tels que :
a-t-on besoin de transparence ?
l'image est-elle animée ?
l’image provient-elle d’une photo (type paysage / portrait) ou d’une illustration (type aplats de couleurs /
logo…) ?
1 - La balise <img>
Balise auto-fermante, de type inline, elle a besoin de 2 attributs pour être optimale :
src et alt.
Exemple :
<img src='dossierImages/monimage.jpg' alt='description de l’image'>
L’attribut src permet d’indiquer le chemin de l’image à af cher.
Le chemin dépend de l’organisa on de vos fichiers / dossiers.

Si votre image « monImage.jpg » se trouve dans le même dossier que votre fichier .html, alors le
chemin est tout simple :
<img src='monimage.jpg' alt='description de l’image'>
Si à présent, votre image « monImage.jpg » se trouve dans un dossier « dossierImages » qui se trouve
à côté de votre fichier .html, alors le chemin devient :
Page 9 / 12
wf3 📝 HTML
<img src='dossierImages/monimage.jpg' alt='description de l’image'>
L’a ribut alt permet d’indiquer la descrip on de l’image. Elle a une triple importance.
Elle sert à l’accessibilité : grâce au texte que vous indiquerez dans l’attribut alt, les personnes
malvoyantes auront une indication de ce qui est af ché.
Elle sert à Google, qui va la référencer dans Google image grâce aux mots-clés indiqués dans la
description.
Elle sert en cas de problème lors de l’af chage de l’image (réseau, chier manquant, etc.) : si l’image ne
s’af che pas, ce sera le contenu de l’attribut alt qui apparaîtra dans la page.
2 - La balise <video>
Cette balise permet d’intégrer des contenus vidéo.

Il y a 2 façons de l’utiliser : selon si vous donnez une seule ou plusieurs sources possibles.
Pourquoi plusieurs sources ? Parce que tous les navigateurs ne sont pas d’accord sur les formats de son ou de
codec vidéo possibles.
Exemple avec une seule source

<video src='mavideo.mp4'></video>
On dispose ensuite de plusieurs attributs pour cette balise :

src : pour indiquer la source, comme pour la balise <img>. Le chemin va fonctionner de la même façon que
pour l’image (voir ci-dessus).
controls : permet d’af cher les boutons de contrôle (lecture, volume, etc.)
muted : diffuse la vidéo sans son
autoplay : lance la vidéo dès que la page est chargée (certains navigateurs désactivent cette option)
loop : permet de relancer la lecture de la vidéo une fois celle-ci terminée
Page 10 / 12
wf3 📝 HTML
En n, on peut ajouter du contenu entre les balises <video></video> : généralement du texte (<p></p>)
indiquant que le format de vidéo n’est pas pris en charge par le navigateur. (« contenu de secours » ou
« fallback »)
Exemple avec 2 sources :
<video controls>
<source src="mavideo.mp4" type="video/mp4">
<source src="mavideo.webm" type="video/webm">
<p>Votre navigateur ne prend pas en charge les formats vidéos HTML5…</p>
</video>
Les mêmes attributs pour <video>,- vus plus haut pour la balise IMG, sont disponibles.
On dispose de la balise <source> (auto-fermante) qui permet de donner plusieurs sources video.
Pour information, voici les formats vidéos web disponibles : .mov, .mp4, .avi, .wmf, . v , .webm
Recommandation
Aujourd’hui, les navigateurs convergent vers l’adoption du HTML 5 qui permet de s’affranchir de plugin de
lecture. Il est donc conseillé d’utiliser le .mp4
Pour plus d’infos sur les formats vidéos :
https://www.ionos.fr/digitalguide/sites-internet/web-design/les-formats-de- chiers-video/
3 - La balise <audio>
Elle fonctionne comme la balise vidéo et est soumise aux mêmes problématiques de formats non uniformisés
par les navigateurs…
Exemple
<audio controls>
<source src="goodVibrations.mp3" type="audio/mp3">
<source src="goodVibrations.ogg" type="audio/ogg">
<p>Votre navigateur ne prend pas en charge l'audio HTML5.</p>
</audio>
Attention, l’attribut controls devient obligatoire pour cette balise audio.
Pour plus de détails, voir :

h ps://developer.mozilla.org/fr/docs/Apprendre/HTML/Mul media_and_embedding/Contenu_audio_et_video
Tester
What do you want to do ?
New mail Copy
Page 11 / 12
wf3 📝 HTML
Pour résumer
Ce qu'il faut retenir du HTML
Le HTML est un langage de balises permettant de délivrer et de structurer l’information.

Des balises plus spéci ques arrivées avec HTML5 apportent de la sémantique (<article>, <nav>, …) ou de
nouvelles fonctionnalités (audio / video).
Respectez la syntaxe HTML (balises, attributs…) et véri ez vos pages avec l’outil de validation en ligne :
h ps://validator.w3.org/
Veillez à la clarté du code en utilisant des commentaires et une indentation correcte.
Apprenez à identi er les balises de type block et inline, pour comprendre leur af chage dans la page.
Posez-vous les questions quant à l’utilisation des balises et le sens qu’elles confèrent à votre information
(n’oubliez pas que Google –entre autres- lit votre code pour essayer de référencer correctement votre page).
La mise en page sera con ée à un autre langage : CSS.
Page 12 / 12

? HTML

Transféré par

Droits d'auteur :

Formats disponibles

? HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

? HTML

Transféré par

Droits d'auteur :

Formats disponibles

wf3 📝 HTML

Objectif de votre cours HTML

Dans ce cours HTML, vous allez apprendre à :

Créer des pages web HTML basiques

Méthodologie et pédagogie du cours HTML

Dans un but pédagogique, et a n de vous fournir la meilleure expérience d’apprentissage possible, ce

Syntaxe, balises et attributs

Introduction au langage HTML

Règles d'écriture des balises HTML

Les balises (nom, attribut) doivent être écrites en minuscule

Il faut indenter les balises enfants.

<balise ...="" attribut1="valeur1" attribut2="valeur2">

L'indentation consiste en l'ajout de tabulations dans un code source.

de simpli er l'écriture d'un code

de faciliter la recherche de bug

d'améliorer la lisibilité du code écrit

d'optimiser la collaboration entre développeurs

En HTML, le commentaire est délimité par .

d'expliquer les décisions prises par le développeur

de noter des idées à réaliser plus tard

Exemple de code indenté et commenté

La fermeture de la balise se fait en reprenant la balise d’ouverture et en ajoutant un / après le chevron

Quelques balises qui fonctionnent par paires

<p>Le texte qui constitue le paragraphe</p>

Aperçu dans le navigateur (ici chrome):

<a href='#'>Un lien.</a>

Comment fonctionnent les balises auto-fermantes ?

Quelques balises auto-fermantes

L’ensemble des balises HTML peut être rangé dans 2 catégories :

Les balise inline

Quelques balises de type inline

Aperçu dans le navigateur (ici chrome)

Les balises block

<div> Pour du contenu : soit des paragraphes, soit d’autres balises…</div>

<header>peut contenir images (logo) ; navigation, etc.</header>

Aperçu dans le navigateur (ici chrome)

Structure d'une page HTML

2 grandes parties : la partie « head » et « body », toutes 2 enfant de <html>.

Aperçu dans le navigateur (ici chrome) :

Tout le contenu informatif de la page se situera à l’intérieur de la balise <body>.

<header ></header> : En-tête du site, classiquement on retrouve le logo,

<footer></footer> : pied de page. Même fonctionnement que <header>. Traditionnellement, on y

Les spéci cités du HTML 5

Exemple de page codée avant HTML 5 : Exemple de page avec HTML 5 :

<div id='header'> <header>

What do you want to do ?

New mail Copy

L’attribut src permet d’indiquer le chemin de l’image à af cher.

Le chemin dépend de l’organisa on de vos ﬁchiers / dossiers.

<img src='monimage.jpg' alt='description de l’image'>

<img src='dossierImages/monimage.jpg' alt='description de l’image'>

Cette balise permet d’intégrer des contenus vidéo.

Exemple avec une seule source

On dispose ensuite de plusieurs attributs pour cette balise :

Exemple avec 2 sources :

Pour plus d’infos sur les formats vidéos :

Attention, l’attribut controls devient obligatoire pour cette balise audio.

Pour plus de détails, voir :

What do you want to do ?

New mail Copy