Creation Sites Web 2-1 - HTML - Introduction

HC Hervé Chappert 1
Sommaire
Chapitre : Les bases du HTML
Partie : Introduction
A. Structure d’une page HTML
B. Fonctionnement des balises
HC Bases du HTML / Introduction 2

A – Structure d’une page HTML
Toutes les pages Web sont organisées en deux parties :
1. La partie en-tête (head)

Dans cette partie on va trouver :
• des informations techniques sur la page (à destination des
navigateurs des clients)
• Des informations pour les moteurs de recherche
• Le titre visible de la page
2. La partie corps (body)

Dans cette partie on va écrire :
• ce qui va s’afficher dans le navigateur du client
• Des informations pour structurer la page
On n’écrit plus d’indications de mise en forme (Elles sont écrites en CSS)
HC Bases du HTML / Introduction / A – Structure d’une page 3

Pour structurer sa page et donner des indications aux navigateurs, le HTML place
ses « ordres » et ses « indications » dans des balises.
Par exemple, pour dire au navigateur que la partie « body » commence ici, on va
simplement écrire :
<body>
Les balises sont placées entre les signes « < > »
Pour lui dire que la partie body est terminée on va écrire :
</body>
Pour écrire la fin de la balise on fait précéder son nom du signe « / »

La majorité des balises en HTML ont une balise de fermeture (ou de fin).
<html> </html>
<head> </head>
…
Certaines balises n’ont pas de balise de fermeture. Par exemple, la balise pour
aller à la ligne :
<br>
On ne peut pas donner l’ordre « fin d’aller à la ligne » ... Il n’y a donc pas de balise
</br>
Depuis le HTML 5, on doit écrire ces balises orphelines ainsi :

<br />
Pour bien montrer que ce n’est pas une erreur qu’il n’y ait pas de balise de fin et
que l’on utilise une balise auto-fermante

La structure d’une page en HTML est donc la suivante :
<html>
<head>
Informations techniques et titre de page

</head>
<body>
Votre page à afficher
</body>
</html>
Pour chaque page, il n’y a qu’un seul <body> et qu’un seul <head>
Voir vidéo « HTML 1 » sur https://www.youtube.com/c/hervechappert

B – Fonctionnement des balises HTML
Il est très important de bien « imbriquer les balises » car cela risque de poser des
problèmes d’interprétation au navigateur.
…
<body>
<h1> Mon cours</h1>
<strong> Structure du <em> HTML </strong> </em>
…
…
<body>
<h1> Mon cours</h1>
<strong> Structure du <em> HTML </em></strong>
…
Dans le 1er exemple les balises <strong> et <em> se chevauchent, ce qui est
interdit par le W3c
HC Bases du HTML / Introduction / B – Fonctionnement des balises 7

Il y a environ 150 balises HTML (en paires ou auto-fermantes) qui permettent de
bien structurer le contenu de sa page Web.
Il y a aussi deux éléments spéciaux :

1. Le DOCTYPE
Le doctype (type de document) permet de dire au navigateur que vous
écrivez en HTML et de précisez sa version. Si vous ne mettez pas, le
navigateur traitera votre code comme de « l’ancien code » (avant la
normalisation du HTML)
<!DOCTYPE HTML> (Doctype pour du HTML 5)
2. Les commentaires
Ils permettent d’annoter votre code HTML sans perturber le navigateur

En HTML 4.01 le doctype était :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Une balise importante du bloc <head> est la balise <meta> :
Cette balise donne des informations importantes aux navigateurs et aux moteurs
de recherche. Elle fonctionne avec des attributs.
Les attributs des balises apportent des informations complémentaires et ne se

mettent qu’à la suite de la balise ouvrante (pas dans la balise fermante).
Un des attributs intéressant de la balise <meta> est charset qui va indiquer au

navigateur quel jeux de caractères vous utilisez. Pour faire apparaitre les accents
sur les lettres c’est très important.
Il faut bien sûr que votre éditeur soit dans le même jeux de caractère.
Un jeu de caractère universel est UTF-8.
On aura donc la balise (orpheline) suivante :
<meta charset=‘UTF-8’ />

Travail à faire :
1. Voir vidéo « HTML 2 » sur https://www.youtube.com/c/hervechappert
2. Lire les explications complémentaires sur :

https://developer.mozilla.org/fr/Apprendre/HTML/Balises_HTML
3. Faire les exercices des vidéos 1 & 2

Il est possible de faire un minimum de mise en forme avec le HTML, même si cela
est en principe réservé au CSS…
Par exemple la balise <font> admet 3 attributs pour modifier du texte :
On va donc écrire par exemple :

1. Size …
2. Face <font size=‘’+2’’ color=‘’red’’ face=‘‘Algerian’’>
3. Color Bonjour
</font>
…
Le W3c fournit un outil pour tester si le HTML écrit respecte bien la syntaxe :
https://validator.w3.org/
Voir vidéo « HTML 3 » sur https://www.youtube.com/c/hervechappert et corriger

l’exercice 2 J

HC Hervé Chappert 12
Creative Commons:
• Attribution
• Pas d’Utilisation Commerciale
• Pas de Modification
Under the following terms:
Attribution — You must give appropriate credit, provide a link to the

license, and indicate if changes were made. You may do so in any
reasonable manner, but not in any way that suggests the licensor endorses
you or your use.
NonCommercial — You may not use the material for commercial purposes.
NoDerivatives — If you remix, transform, or build upon the material, you

may not distribute the modified material.

Creation Sites Web 2-1 - HTML - Introduction

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

Creation Sites Web 2-1 - HTML - Introduction

Transféré par

Droits d'auteur :

Formats disponibles

HC Hervé Chappert 1

A. Structure d’une page HTML

B. Fonctionnement des balises

HC Bases du HTML / Introduction 2

Toutes les pages Web sont organisées en deux parties :

1. La partie en-tête (head)

2. La partie corps (body)

HC Bases du HTML / Introduction / A – Structure d’une page 3

Les balises sont placées entre les signes « < > »

Pour lui dire que la partie body est terminée on va écrire :

Pour écrire la fin de la balise on fait précéder son nom du signe « / »

HC Bases du HTML / Introduction / A – Structure d’une page 4

Depuis le HTML 5, on doit écrire ces balises orphelines ainsi :

HC Bases du HTML / Introduction / A – Structure d’une page 5

Informations techniques et titre de page

Votre page à afficher

Voir vidéo « HTML 1 » sur https://www.youtube.com/c/hervechappert

HC Bases du HTML / Introduction / A – Structure d’une page 6

HC Bases du HTML / Introduction / B – Fonctionnement des balises 7

Il y a aussi deux éléments spéciaux :

En HTML 4.01 le doctype était :

HC Bases du HTML / Introduction / B – Fonctionnement des balises 8

Les attributs des balises apportent des informations complémentaires et ne se

Un des attributs intéressant de la balise <meta> est charset qui va indiquer au

Un jeu de caractère universel est UTF-8.

On aura donc la balise (orpheline) suivante :

<meta charset=‘UTF-8’ />

HC Bases du HTML / Introduction / B – Fonctionnement des balises 9

1. Voir vidéo « HTML 2 » sur https://www.youtube.com/c/hervechappert

2. Lire les explications complémentaires sur :

3. Faire les exercices des vidéos 1 & 2

HC Bases du HTML / Introduction / B – Fonctionnement des balises 10

Par exemple la balise <font> admet 3 attributs pour modifier du texte :

On va donc écrire par exemple :

Voir vidéo « HTML 3 » sur https://www.youtube.com/c/hervechappert et corriger

HC Bases du HTML / Introduction / B – Fonctionnement des balises 11

Under the following terms:

Attribution — You must give appropriate credit, provide a link to the

NoDerivatives — If you remix, transform, or build upon the material, you

Vous aimerez peut-être aussi