M104

Développer des sites web

statiques

M104
Développer des sites web statiques
 01 Créer une page web en HTML
Introduction au langage HTML
Utiliser l'environnement de développement
Définir des éléments basiques d'une page HTML
SOMMAIRE 02 Implémenter une page web statique
Réaliser une page web statique
Intégrer des formulaires dans une page web
03 Mettre en forme une page web avec les
feuilles de style CSS
Introduire le CSS
Utiliser les propriétés CSS
Manipuler le positionnement
Adapter une page web au dispositif d’affichage
Créer des animations
Adapter des templates HTML/CSS avec un site Web
04 Maîtriser Bootstrap
Intégrer Bootstrap
Maitriser les classes CSS de base
Utiliser les composants Bootstrap
05 Héberger un site Web
Déployer en intranet
Déployer en ligne
 PARTIE 1
Créer une page web en HTML

Dans ce module, vous allez :

• Découvrir l’historique du web et du langage HTML

• Manipuler les outils de création d’une page web

• Connaître et manipuler les éléments de base d'une page web

20 heures
 CHAPITRE 1
INTRODUCTION AU LANGAGE HTML

Ce que vous allez apprendre dans ce chapitre :

• L’historique de l’HTML

• La mission du W3C

• L’utilisation des navigateurs

2 heures
 CHAPITRE 1
INTRODUCTION AU LANGAGE HTML

1. Historique de l’HTML
2. Rôle du W3C
3. Propriétés des navigateurs
 CHAPITRE 01 INTRODUCTION
AU LANGAGE HTML
Historique de l’HTML

M104
Développer des sites web statiques
 Historique de l’HTML

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

Le World Wide Web (WWW)

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

Le World Wide Web (WWW)

Le World Wide Web, ou simplement le Web, est un service

d’Internet qui permet de partager et de rechercher des
informations.

C’est la partie d’Internet que nous utilisons le plus souvent à

travers un navigateur (comme Brave ,Chrome, Firefox ou Edge).

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

2. Les ressources du Web

Sur le Web, on trouve des ressources, c’est-à-dire différents types de
contenus numériques :
✓ du texte,
✓ des images,
✓ des vidéos,
✓ des sons,
ou encore d’autres types de fichiers.
Chaque ressource est identifiée par une adresse unique appelée URL
(Uniform Resource Locator).

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

3. Les liens hypertextes

Les pages web sont souvent reliées entre elles grâce à des liens
hypertextes (ou hyperliens).
Quand on clique sur un lien, on est dirigé vers une autre page ou un autre
document.
C’est ce qui rend le Web interconnecté et facile à naviguer.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

4. Le langage du Web : HTML

Les pages web sont écrites en HTML (HyperText Markup Language).

C’est un langage de balisage qui permet de structurer le texte, d’insérer
des images, des vidéos, des liens, etc.

<h1>Titre</h1> affiche un grand titre sur une page web.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

5. Le fonctionnement client-serveur

Le Web fonctionne selon un modèle client-serveur :

Le serveur est un ordinateur ou programme qui stocke les pages

et les envoie à ceux qui les demandent.

Le client est un programme (souvent un navigateur) qui

demande ces pages au serveur.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

❑ Tu écris une adresse (URL) dans ton navigateur.

❑ Le navigateur (client) envoie la demande au serveur du
site.
❑ Le serveur renvoie la page demandée.
❑ Le navigateur affiche la page à l’écran.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

Historique
du Web

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

1980
[Link] débuts – L’idée du
Web

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

1. Les débuts – L’idée du Web (1980)

Tim Berners-Lee

Tout commence en 1980, au CERN (Organisation

européenne pour la recherche nucléaire), en Suisse.
Un chercheur britannique nommé Tim Berners-Lee
avait remarqué un problème :
les chercheurs du monde entier avaient du mal à
échanger leurs travaux et documents scientifiques.
8 June 1955 (age 70)

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

Les débuts – L’idée du Web (1980)

Pour résoudre cela, il a proposé un système simple de partage d’informations

entre ordinateurs connectés.

Ce système allait permettre à plusieurs chercheurs de :

✓ publier leurs documents,
✓ accéder depuis d’autres lieux,
✓ naviguer facilement d’un document à un autre grâce à des liens hypertextes.

C’est ainsi que l’idée du World Wide Web (le « réseau mondial ») est née.
Le but principal : rendre l’accès à l’information rapide et universel.
M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

1990
La naissance du Web moderne

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

En 1990, Tim Berners-Lee s’associe à Robert Cailliau, ingénieur belge également au CERN.
Ensemble, ils développent les outils essentiels du Web :

✓ le HTML (HyperText Markup Language) → le langage utilisé pour créer les pages web,
✓ le HTTP (HyperText Transfer Protocol) → le protocole de communication entre les
ordinateurs,
✓ le premier navigateur web, appelé WorldWideWeb.

À cette époque, Tim Berners-Lee publie le premier document HTML, appelé "balises
HTML", contenant 18 balises de base (comme <p>, <h1>, <a>, etc.).
Ces balises servaient à structurer le contenu des pages web.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

3. L’évolution du Web

Depuis sa création, le Web a énormément évolué :

Période Évolution principale
Apparition des premiers sites web publics. Le Web
1991 – 1995
devient accessible à tous -→ 1.0.
Naissance du Web 2.0 : les utilisateurs peuvent
1995 – 2005
interagir (forums, blogs, réseaux sociaux).
Explosion des contenus multimédias (vidéos,
2005 – 2020
musique, e-commerce, applications web).
Vers un Web intelligent (Web 3.0) basé sur
Aujourd’hui
l’intelligence artificielle et les données connectées.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

Élément Détail

Inventeur du Web

Collaborateur clé

Année d’idée initiale

Année de réalisation

Premier langage du Web

But du projet

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

• Le web a connu une grande évolution depuis son apparition :

1989 1990 1991 1996

Invention du Tim Berners- Lancement Publication
www (Tim Lee développe du 1er site du langage
Berners-Lee) le HTML web CSS

mi
2015 2010 2000s 1998
Déploiement de Apparition du
la mise à jour
Adaptation Lancement
terme officel de
«mobile- “sponsive Web
du mobile
friendly» par Google
Design”
Google

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

Évolution Langage HTML

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

Le HTML (HyperText Markup Language) est le langage

de base du Web, créé pour structurer et afficher des
pages web dans un navigateur.

Depuis sa première version, il a connu plusieurs étapes

importantes d’évolution.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

HTML 1.0 (1990 – 1992) : la première version

C’est la première version du HTML, créée par Tim Berners-Lee.

Elle permettait simplement de :

❑structurer du texte (titres, paragraphes, listes),

❑insérer des liens hypertextes (<a>),
❑afficher quelques images.

À cette époque, le Web était très simple : pas de couleur, pas de mise en
forme, seulement du texte et des liens.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

2. HTML 2.0 (1995 – 1996) : vers la standardisation

Le HTML 2.0 a été la première version officielle reconnue par les

organismes du Web.
Il a ajouté :

✓ la gestion des formulaires (<form>, <input>, <select>),

✓ une meilleure compatibilité entre navigateurs.

C’est à partir de là que les pages ont pu commencer à interagir avec

l’utilisateur

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

HTML 3.2 et 4.0 (1997) : présentation interactivité

•En 1997, le W3C (World Wide Web Consortium) publie HTML 3.2, qui introduit :

✓ les tables (<table>),

✓ le centrage du texte,
✓ de nouveaux éléments de mise en forme.

Puis, fin 1997, HTML 4.0 apporte de grandes améliorations :

✓ la prise en charge des styles CSS,

✓ les scripts JavaScript,
✓ les frames
✓ et l’intégration d’objets multimédias
M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

5. HTML 5 (2007 – à nos jours) : le Web moderne

Le HTML5 est la version actuelle et la plus puissante.

Il a complètement transformé le Web avec :

✓ la lecture intégrée des vidéos et sons sans plugins (<video>,

<audio>),
✓ les animations et jeux grâce à <canvas>,
✓ les applications interactives avec JavaScript,
✓ une compatibilité totale avec les mobiles et tablettes.
M104
Développer des sites web statiques
• CHAPITRE 1
• INTRODUCTION AU LANGAGE HTML

1. Historique de l’HTML
2. Rôle du W3C
3. Propriétés des navigateurs
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

Le W3C est une organisation internationale sans but lucratif qui fixe les règles et
standards du web.

Son rôle est de rendre le web accessible à tous, compatible entre les
navigateurs et durable dans le temps.

Grâce au W3C, les sites web suivent les mêmes normes, ce qui assure une bonne
communication, un affichage correct sur tous les appareils et une meilleure
qualité du web.

Sans ces standards, chaque navigateur fonctionnerait différemment, ce qui

rendrait le web ^;lm
M104
Développer des sites web statiques
 CHAPITRE 1
INTRODUCTION AU LANGAGE HTML

1. Historique de l’HTML
2. Rôle du W3C
3. Propriétés des navigateurs
 Partie 01 : Créer une page web en HTML CHAPITRE 01 Introduction au langage HTML

Figure 3 : Communication client-serveur web en HTTP [4]

M104
Développer des sites web statiques
 CHAPITRE 2
UTILISER L’ENVIRONNEMENT DE
DÉVELOPPEMENT POUR PRODUIRE DU HTML

Ce que vous allez apprendre dans ce chapitre :

• Utiliser Visual Studio Code comme éditeur de code

• Installer des extensions de VS Code

1 heure
 Partie 01 : Créer une page web en HTML CHAPITRE 02 Utiliser l’environnement de développement pour produire du HTML

Visual Studio
Code (VS Code)

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 02 Utiliser l’environnement de développement pour produire du HTML

Visual Studio Code (VS Code)

Visual Studio Code est un éditeur de code développé par

Microsoft, gratuit et très populaire chez les programmeurs.
Il permet de créer, modifier, corriger et tester du code
informatique dans plusieurs langages de programmation, comme

HTML, CSS, JavaScript, Python, XML, Visual Basic, etc.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 02 Utiliser l’environnement de développement pour produire du HTML

Les principaux avantages de

VS Code :

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 02 Utiliser l’environnement de développement pour produire du HTML

Présentation sophistiquée du code

•Le code est affiché de manière claire et colorée (coloration
syntaxique), ce qui aide à distinguer facilement les éléments du
langage (balises, variables, fonctions, etc.).

•Cela rend la lecture et la compréhension du code beaucoup plus

simples.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 02 Utiliser l’environnement de développement pour produire du HTML

Auto-complétion du code source

•VS Code peut proposer automatiquement la suite du

code pendant que vous écrivez (par exemple, il complète
une balise HTML ou une fonction JavaScript).

Cette fonction fait gagner du temps et réduit les erreurs.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 02 Utiliser l’environnement de développement pour produire du HTML

Extensions et modules complémentaires

•Vous pouvez installer des extensions (petits outils ajoutés à VS

Code) pour améliorer ses fonctionnalités.

•Par exemple : des extensions pour travailler plus facilement

avec Python, Git…

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 02 Utiliser l’environnement de développement pour produire du HTML

Détection automatique du langage de programmation

•VS Code reconnaît le type de fichier que vous ouvrez grâce à

son extension (exemple : .html, .py, .js).

•Cela lui permet d’adapter la coloration et les suggestions selon

le langage utilisé.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 02 Utiliser l’environnement de développement pour produire du HTML

Les extensions de VS Code

Visual Studio Code est un éditeur de code que l’on peut facilement
personnaliser.
On peut y ajouter des extensions pour ajouter des outils, gagner
du temps, mieux travailler en équipe et adapter l’environnement
à ses besoins.
Grâce à son système flexible, tout le monde peut créer ou utiliser
des extensions pour améliorer VS Code.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 02 Utiliser l’environnement de développement pour produire du HTML

Bracket Pair Colorizer

Colore les parenthèses, crochets et accolades correspondants avec des couleurs différentes.
Utile pour repérer facilement les blocs de code imbriqués.

Better Comments
Permet d’ajouter des commentaires avec des couleurs et styles distincts selon leur type
(note, avertissement, question, TODO…).
Rend le code plus lisible et la communication dans l’équipe plus claire.

Snippets
Ce sont des modèles de code réutilisables (exemples : une boucle for, une structure HTML,
etc.).

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 02 Utiliser l’environnement de développement pour produire du HTML

CSS Peak
Permet de cliquer sur une classe CSS dans le code HTML pour voir directement où elle est
définie dans le fichier CSS.

Icons (VS Code Icons)

Ajoute des icônes personnalisées pour les fichiers et dossiers selon leur type.

GitLens
Améliore l’intégration de Git dans VS Code : affiche qui a modifié chaque ligne, quand, et
pourquoi.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 02 Utiliser l’environnement de développement pour produire du HTML

Écrivez un mot clé et taper "Entrer" pour voir

les extensions disponibles

M104
Développer des sites web statiques
 CHAPITRE 3
DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE
PAGE HTML

Ce que vous allez apprendre dans ce chapitre :

• Les balises HTML permettant de concevoir une page Web

statique

• Les balises de structuration des pages web

17 heures
 CHAPITRE 3
DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE
PAGE HTML

1. Normes W3C
2. Squelette d’une page HTML
3. Balises de bases (contenu)
4. Couleurs
5. Listes en HTML
6. Liens en HTML
7. Balises multimédia (images, audio, vidéo)
8. Tableaux en HTML
9. Balises de structuration
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

W3C est chargé de promouvoir la compatibilité des technologies du World Wide

Web telles que HTML, XML, RDF, CSS,PNG, SVG, …
Parmi les normes W3C concernant HTML on cite :

• Les balises <html>, <head>, <title>, et <body> sont obligatoires

• Les éléments doivent être correctement imbriqués
• Les éléments doivent toujours être fermés
• Les éléments HTML doivent être en minuscules
• Les documents HTML doivent avoir un élément racine
• Les noms d'attributs doivent être en minuscules
• Les valeurs des attributs doivent être indiqués

Validation du code HTML avec W3C Validator: [Link]

M104
Développer des sites web statiques
 CHAPITRE 3
DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE
PAGE HTML

1. Normes W3C
2. Squelette d’une page HTML
3. Balises de bases (contenu)
4. Couleurs
5. Listes en HTML
6. Liens en HTML
7. Balises multimédia (images, audio, vidéo)
8. Tableaux en HTML
9. Balises de structuration
 03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE
HTML
Squelette d’une page HTML

Squelette d’une page Web

Déclaration du type de document

(HTML 5)

Contient des informations descriptives sur le

document

Élément racine qui contient tous les

éléments du document HTML

Contient tout ce que nous voulons

afficher dans la fenêtre du
PARTIE 1

navigateur

Figure 7 : Structure minimale d’un document html

Copyright - Tout droit réservé - OFPPT 50

 03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE
HTML
Squelette d’une page HTML

Notion de balise

• Une balise est un élément de texte encadrée par les caractères inférieur (<) et supérieur (>)
• Une balise correspond à un élément du code HTML d'une page web (un objet, une mise en forme, ..)
• Une balise a généralement la forme suivante :

<balise attribut=valeur>Contenu</balise>

Balise ouvrante On change ces valeurs pour modifier l'apparence de l'objet Balise fermante
PARTIE 1

Figure 8 : Forme d’une balise HTML

Copyright - Tout droit réservé - OFPPT 51

 03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE
HTML
Squelette d’une page HTML

Notion d’encapsulation
Les balises doivent être correctement encapsulées :
<p>
<p> <b>
<b> Paragraphe
Paragraphe </p>
</b> </b>
</p> div

Exemple 1 : Code correct Exemple 2 : Code incorrect

<div> div
<h1>titre</h1>
h1 div racine
<h2>un sous titre</h2>
<p>un paragraphe avec
<em>des mots importants</em> h2
pour terminer avec une image nœud
PARTIE 1

h1 h2 p
<img src="[Link]" alt="un logo"/> p
</p> em
</div>
img em img feuille

Exemple 3 : Code correct Figure 9 : Encapsulation des balises HTML

Copyright - Tout droit réservé - OFPPT 52

 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

<!DOCTYPE html>
<html>
<head>
<title>TITRE1</title>
</head>
<body>
<h1>WELCOME TO MY FIRST WEB PAGE</h1>
</body>
</html>

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Élément Description Rôle

<!DOCTYPE html>

<html>

<head>

<title>

<body>

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Élément Description Rôle

Déclaration du type de Informe le navigateur du
<!DOCTYPE html>
document standard HTML utilisé
<html> Racine du document Englobe tout le contenu
Contient les métadonnées,
<head> Partie non visible
titre, liens CSS...

Affiché dans l’onglet du

<title> Titre de la page
navigateur
<body> Partie visible Contenu affiché sur la page

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Les types d’éléments HTML

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

1. Les éléments de type bloc (block)

❑Ils occupent toute la largeur de la page ou du

conteneur où ils se trouvent.
❑Ils commencent toujours sur une nouvelle ligne.
❑Exemple : <div>, <p>, <h1>, <section>, etc.

Ils servent à structurer la page (titres, paragraphes,

sections...).

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Les éléments en ligne (inline)

❑Ils n’occupent que la place nécessaire à leur contenu.
❑Ils ne commencent pas sur une nouvelle ligne : ils se placent à côté des
autres éléments.
❑Exemple : <span>, <a>, <strong>, <img>, etc.

Ils servent à ajouter des petits éléments dans une phrase.

M104
Développer des sites web statiques
 03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE
HTML
Squelette d’une page HTML

Les types d’éléments HTML

Éléments de niveau bloc en HTML :

<address> <article> <aside> <blockquote> <canvas> <dd> <div>

<dl> <dt> <fieldset> <figcaption> <figure> <footer> <form>
<h1> - < H6> <header> <hr> <li> <main> <nav> <noscript>
<ol> <p> <pre> <section> <table> <tfoot> <ul>
<video>

Éléments de niveau inline en HTML :

<a> <abbr> <acronym> <b> <bdo> <big> <br>

<button> <cite> <code> <dfn> <em> <i> <img>
PARTIE 1

<input> <kbd> <label> <map> <object> <output> <q>

<samp> <script> <select> <small> <span> <strong> <sub>
<sup> <textarea> <time> <tt> <var>

Copyright - Tout droit réservé - OFPPT 59

 CHAPITRE 3
DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE
PAGE HTML

1. Normes W3C
2. Squelette d’une page HTML
3. Balises de bases (contenu)
4. Couleurs
5. Listes en HTML
6. Liens en HTML
7. Balises multimédia (images, audio, vidéo)
8. Tableaux en HTML
9. Balises de structuration
 03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE
HTML
Balises de base

Rappel:
<!DOCTYPE html>
<html>
<head>
<!-- en-tête du document -->
<meta charset=«UTF-8»>
<meta name=«description» content=«………….»>
<meta name=«keywords» content=«………….»>
<meta name=«author» content=«………….»>
<meta name=«viewport» content=«width=device-width, initial-scale=1.0»>
<meta http-equiv=«refresh» content=«30»>
<title>….</title>
</head>
PARTIE 1

<body>
<!-- corps du document-->
</head>
</html> Figure 12 : Structure générale d’une page HTML

Copyright - Tout droit réservé - OFPPT 61

 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Élément Description Rôle

Déclaration du type de Informe le navigateur du
<!DOCTYPE html>
document standard HTML utilisé
<html> Racine du document Englobe tout le contenu
Contient les métadonnées,
<head> Partie non visible
titre, liens CSS...

Affiché dans l’onglet du

<title> Titre de la page
navigateur
<body> Partie visible Contenu affiché sur la page

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

La balise <meta> en HTML

La balise <meta> sert à donner des informations sur la page web.

Ces informations ne s’affichent pas à l’écran, mais elles sont lues par les
navigateurs et les moteurs de recherche (comme Google).

On appelle ces informations des métadonnées

M104
Développer des sites web statiques
 03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE
HTML
Squelette d’une page HTML

Notion de balise

• Une balise est un élément de texte encadrée par les caractères inférieur (<) et supérieur (>)
• Une balise correspond à un élément du code HTML d'une page web (un objet, une mise en forme, ..)
• Une balise a généralement la forme suivante :

<balise attribut=valeur>Contenu</balise>

Balise ouvrante On change ces valeurs pour modifier l'apparence de l'objet Balise fermante
PARTIE 1

Figure 8 : Forme d’une balise HTML

Copyright - Tout droit réservé - OFPPT 64

 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

<meta charset="UTF-8">

Indique que la page utilise l’encodage UTF-8 (permet d’afficher

correctement les caractères, comme les accents : é, à, ô…).

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Charset Description Utilisation typique

Recommandé pour tous les sites modernes,
UTF-8 Unicode (8 bits par caractère variable) supporte tous les caractères, y compris
accents et symboles internationaux.
Pour les pages contenant uniquement des
ISO-8859-1 (ou Latin-1) Codage pour l’Europe occidentale caractères européens (anglais, français,
espagnol…).
Remplace les symboles manquants de Latin-1,
ISO-8859-15 Variante de ISO-8859-1 avec l’euro (€)
utile pour l’Europe occidentale moderne.
Anciennement utilisé sur les sites Windows,
Windows-1252 Codage Windows pour l’Europe occidentale similaire à ISO-8859-1 mais avec quelques
caractères supplémentaires.
Pour certains documents spécialisés ou
UTF-16 Unicode 16 bits systèmes nécessitant 16 bits par caractère.
Moins utilisé pour le web.
Seulement lettres anglaises, chiffres et
ASCII Codage basique sur 7 bits
symboles de base. Très limité.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Rend la page responsive, c’est-à-dire

qu’elle s’adapte à la taille de l’écran.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

<meta name="author" content="Nom de l’auteur">

Indique qui a créé la page web.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

<meta name="description" content="Cours de HTML pour débutants">

Résume le contenu de la page, souvent

visible dans les résultats de recherche Google.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

<meta name="keywords" content="HTML, CSS, site web">

Donne des mots-clés pour aider les moteurs

de recherche à comprendre le sujet de la page

M104
Développer des sites web statiques
RÉALISÉ ET ANIMÉ PAR :
ElHAIBA RAIGAT 01:21
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content=" MR 104">
<meta name="description" content="Cours PYTHON">
<meta name="keywords" content=" python,programming, formation, débutant">
<title>python course web page</title>
</head>
<body>
<h1>python course chapter 1</h1>
</body>
M104
</html>
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Tu es en train de créer une page web intitulée “Mon premier site HTML”.
Tu veux que cette page :

❑ affiche correctement les caractères spéciaux (comme les accents),

❑ s’adapte à tous les écrans (ordinateur, tablette, téléphone),
❑ indique que l’auteur est Bill Gates,
❑ ait une courte description : Cours d’initiation au HTML,
❑ et contienne les mots-clés : HTML, web, formation, débutant.
-------------------------------------------------------------------------------------------------------------
Écris les balises <meta> que tu placerais dans la partie <head> du document
HTML.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content=" Bill Gates">
<meta name="description" content="Cours d’initiation au HTML">
<meta name="keywords" content="HTML, web, formation, débutant">
<title>Mon premier site HTML</title>
</head>

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Les paragraphes en HTML

<p title="infobulle sur le paragraphe">text here</p>

Balise <p> :
1. Sert à créer un nouveau paragraphe dans une page web.
2. Chaque fois que tu écris <p>…</p>, le texte entre ces balises sera considéré
comme un paragraphe séparé.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

<p title="infobulle sur le paragraphe">text here</p>

Attribut title :

❑ Permet d’ajouter une info-bulle (tooltip) qui s’affiche

quand la souris survole le paragraphe.

❑ Utile pour donner une explication supplémentaire ou un

détail sans encombrer le texte visible.
M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML
Durée est

10 MIN Tu crées une petite page web présentant trois thèmes :

Mathématiques, Informatique, et Web.
Tu veux que chaque thème soit dans un paragraphe séparé et que
Temps restant l’utilisateur voie une info-bulle quand il passe la souris dessus,
expliquant brièvement le thème.

05:21 Crée trois paragraphes <p> pour les trois thèmes.

Utilise l’attribut title pour ajouter une courte explication pour

chaque thème :

❑ Mathématiques : "Étude des nombres, formes et structures"

❑ Informatique : "Science du traitement automatique de l’information"
QuickLab ❑ Web :"Ensemble de sites et services accessibles via Internet"
activer la réflexion et la
créativité. M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

<p title="Étude des nombres, formes et structures">

Les mathématiques permettent de comprendre les nombres, les formes et les relations entre eux.
Elles servent à résoudre des problèmes dans de nombreux domaines.
</p>

<p title="Science du traitement automatique de l’information">

L’informatique est la science qui traite l’information de manière automatique.
Elle permet de créer des programmes et d’utiliser les ordinateurs efficacement.
</p>

<p title="Ensemble de sites et services accessibles via Internet">

Le Web regroupe des millions de sites et de services accessibles dans le monde entier.
Il facilite le partage d’informations et la communication entre les utilisateurs.
</p>

M104
Développer des sites web statiques
 03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE
HTML
Balises de base

Les titres en HTML

Il existe 6 niveaux de titres (headers) en HTML. Les balises <h1>, <h2>, …<h6> permettent l'affichage de ces titre.

Exemple Niveau1
Niveau2
<h1>Niveau1</h1>
<h2>Niveau2</h2> Niveau3
<h3>Niveau3</h3>
<h4>Niveau4</h4> Niveau4
<h5>Niveau5</h5>
<h6>Niveau6</h6> Niveau5
Niveau6
PARTIE 1

Figure 14 : les titres en HTML

Copyright - Tout droit réservé - OFPPT 79

 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Tu crées une petite page web présentant un site éducatif sur trois matières : Mathématiques,
Informatique, et Web.

Chaque matière doit avoir un titre clair et un paragraphe descriptif avec une info-bulle.

1. Crée un titre principal <h1> pour le nom du site : "Mon site éducatif".
2. Pour chaque matière, utilise un titre <h2> suivi d’un paragraphe <p>.
3. Chaque paragraphe doit contenir au moins deux phrases décrivant le thème.
4. Ajoute l’attribut title à chaque paragraphe pour fournir une info-bulle :

• Mathématiques → "Étude des nombres, formes et structures"

• Informatique → "Science du traitement automatique de l’information"
• Web → "Ensemble de sites et services accessibles via Internet"

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

<h1>…</h1>
<h2>…</h2>
<p title="…">…</p>
<h2>…</h2>
<p title="…">…</p>
<h2>…</h2>
<p title="…">…</p>

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

<body>
<h1>Mon site éducatif</h1>
<h2>Mathématiques</h2>
<p title="Étude des nombres, formes et structures">
Les mathématiques sont la science qui étudie les nombres, les formes et les structures.</p>
<h2>Informatique</h2>
<p title="Science du traitement automatique de l’information">
L'informatique étudie le traitement automatique de l'information. Elle permet de développer des
logiciels</p>
<h2>Web</h2>
<p title="Ensemble de sites et services accessibles via Internet">
Le Web est un ensemble de sites et services accessibles via Internet. </p>
</body>

M104
Développer des sites web statiques
 Durée
Défi : mini-page web
15 MIN
Consignes :
Temps restant [Link]ée une page HTML complète avec les éléments
suivants :
[Link] titre principal <h1>
[Link] sous-titres <h2> pour des sections de ton choix
[Link] paragraphes <p> avec info-bulles (title)
expliquant chaque section
[Link] au moins une balise <meta> pour le charset
et une autre pour la description de la page

QuickLab
activer la réflexion et la
créativité. Ton code doit être lisible et structuré correctement.
RÉALISÉ ET ANIMÉ PAR :
ElHAIBA RAIGAT 00:00
Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Les listes en HTML

Les listes sont utiles pour apporter de la clarté et de l’ordre aux documents web.
En HTML, il est possible de définir trois types de listes : les listes ordonnées, les listes non
ordonnées, et les listes de définition.

Les balises et les attributs utilisées sont:

• Balise ul : définir une liste non ordonnée

• Balise ol : définir une liste ordonnée
• Balise dl : définir une liste de définition
• Balise li : définir un élément de liste
• L'attribut "type" permet de préciser le type de numérotation utilisée pour présenter la
liste
• L'attribut "value" permet d'initialiser le numéro courant par la valeur souhaitée
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Les listes en HTML

En HTML, il existe trois types de listes :

<ul>
[Link] non ordonnée (<ul>)
<li>Pomme</li>
<li>Banane</li>
C’est une liste où l’ordre n’a pas
<li>Orange</li>
d’importance.
</ul>
Les éléments sont marqués par des puces (●)
par défaut.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Les listes en HTML

Les listes servent à organiser les informations de manière claire et
ordonnée dans une page web.
<ul> définir une liste non ordonnée

<li>Pomme</li>définir un élément de liste

<li>Banane</li>
<li>Orange</li>

</ul>

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Liste ordonnée (<ol>)

C’est une liste numérotée, utile quand l’ordre est important (comme des
étapes ou un classement).

<ol> définir une liste ordonnée

<li>Préparer les ingrédients</li>
<li>Faire cuire</li>
<li>Servir</li>
</ol>

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

L’attribut type

L’attribut type permet de changer le style de numérotation (1, A, a, I, i).

Exemple :

<ol type="A">
<li>HTML</li>
<li>CSS</li>
</ol>

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

L’attribut value
L’attribut value permet de démarrer la numérotation à partir d’un
nombre choisi.

<ol start="5">
<li>Chapitre 5</li>
<li>Chapitre 6</li>
</ol>

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Liste de définition (<dl>)

Sert à présenter des termes et leurs définitions, un peu comme un dictionnaire.

<dl>
<dt>HTML</dt>
<dd>Langage utilisé pour créer des pages web.</dd>
<dt>CSS</dt>
<dd>Langage utilisé mettre en forme les pages</dd>
</dl>

<dl> : signifie Definition List (liste de définitions).

<dt> : signifie Definition Term (terme à définir).
<dd> : signifie Definition Description (description du terme).

M104
Développer des sites web statiques
 03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE
HTML
Les listes

Les listes ordonnées et non ordonnées :

<ul>
<li>Élément1</li>
Exemple de liste non ordonnée <li type="circle">Élément2</li>
<li type="square">Élément3</li>
</ul>
Figure 15 : Liste non ordonnée

<ol>
<li type="I">Élément1</li>
<li type="i">Élément2</li>
Exemple 1 de liste ordonnée <li type="A">Élément3</li>
<li type="a">Élément4</li>
</ol>
Figure 16 : Liste ordonnée 1

<ol>
PARTIE 1

<li>Élément1</li>
<li>Élément2</li>
Exemple 2 de liste ordonnée <li value="1">Élément3</li>
<li>Élément4</li>
</ol>
Figure 17 : Liste ordonnée 2

Copyright - Tout droit réservé - OFPPT 92

 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

liste_dé[Link]

HTML
Langage utilisé pour créer des pages web.
CSS
Langage utilisé pour mettre en forme les pages web.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

liste_dé[Link]
<ul>
<li>Élément1</li>
<li type="circle">Élément2</li>
<li type="square">Élément3</li>
<ol>
</ul>
<li>Élément1</li>
<ol> <li>Élément2</li>
<li type="I">Élément1</li> <li value="1">Élément3</li>
<li type="i">Élément2</li> <li>Élément4</li>
<li type="A">Élément3</li> </ol>
<li type="a">Élément4</li>
</ol>

M104
Développer des sites web statiques
 QuickLab est une séquence innovante intégrée
au cours, conçue pour tester et renforcer les
compétences des stagiaires à travers des
exercices pratiques et chronométrés. Chaque
QuickLab transforme un concept théorique en
challenge concret, avec des problèmes
activer la réflexion et la créativité. réalistes et stimulants à résoudre dans un temps
limité.

Les stagiaires sont encouragés à :

• Appliquer immédiatement les notions apprises.
• Résoudre des problèmes réels avec créativité et rigueur.
• Développer rapidité, précision et autonomie.
• Se confronter à des mini-projets qui simulent des situations professionnelles

QuickLab rend l’apprentissage vivant et interactif, favorisant la créativité, l’esprit critique et l’auto-
évaluation, tout en gardant les stagiaires engagés et motivés pendant le cours.
 M104
Durée

1h10min
4 200 secondes

Temps restant Crée ton premier article

00:00 scientifique en HTML
DEFI 001

activer la réflexion et la créativité.

 CHAPITRE 3
DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE
PAGE HTML

1. Normes W3C
2. Squelette d’une page HTML
3. Balises de bases (contenu)
4. Les couleurs
5. Listes en HTML
6. Liens en HTML
7. Balises multimédia (images, audio, vidéo)
8. Tableaux avec du HTML
9. Balises de structuration
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

La balise <a> — Le lien hypertexte

La balise <a> (pour anchor, ancre en anglais) est utilisée pour

créer un lien hypertexte.

Un lien hypertexte, c’est un texte ou un élément cliquable qui

permet à l’utilisateur d’aller vers une autre page web, un autre
endroit dans la même page, ou même d’ouvrir un e-mail.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

<a href="[Link] sur Google</a>

M104
Développer des sites web statiques
Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Les principaux attributs :

•Href: indique l’adresse ou la destination du lien.
Exemple : href="[Link]" ou href=[Link]

•Title: affiche une info-bulle quand la souris survole le lien.

Exemple :

•Target: indique où le lien va s’ouvrir.

Les principales valeurs sont :
• _self : ouvre dans la même page (par défaut)
• _blank : ouvre dans une nouvelle fenêtre ou un nouvel onglet
• _parent : ouvre dans le cadre parent si on utilise des frames
 03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE
HTML
Les liens

Exemples de liens
Lien vers un autre document HTML(Lien relatif)

<a href="[Link]" title="Page cible">Cliquer ici pour aller à la page</a>

Lien vers une url (Lien absolu)

<a href="[Link] title="OFPPT">Site officiel de l'OFPPT</a>

Un lien qui s'ouvre dans une nouvelle fenêtre

<a href="https ://[Link]/" title="OFPPT" target="_blank">Site officiel de l'OFPPT</a>

Lien vers un emplacement dans le même document (Lien interne)

<!– Cible du lien-->

<h1 id="haut">titre de la page </h1>
PARTIE 1

…
<!– Lien -->
<a href="#haut">haut de la page </a>

Copyright - Tout droit réservé - OFPPT 101

 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Lien vers un e-mail :

La balise <a> peut aussi ouvrir le logiciel de messagerie :

<a href="[Link] un mail</a>

Cela ouvre directement la boîte d’envoi d’un mail vers l’adresse donnée.

M104
Développer des sites web statiques
 03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE
HTML
Les liens

Exemples de liens

Lien hypertexte sur une image

<a href="http ://[Link]/" title="Bootstrap">

<img src="../../images/[Link]" width="150" height="151"
alt="Bootstrap" class="img-responsive" />
</a>
PARTIE 1

Copyright - Tout droit réservé - OFPPT 103

[Link]
 Lien_image.html

<a href="http ://[Link]/" title="Bootstrap">

<img src="../../images/[Link]" width="150"
height="151"
alt="Bootstrap" class="img-responsive" />
</a>
Crée une page HTML nommée Tp_liens.html contenant les éléments suivants :
Temps
restant : 54:00
5. Lien vers le haut de la page :
[Link] principal : Ajoute une ancre en haut avec id="haut" puis un
<h1>Mes différents types de liens</h1> lien en bas qui remonte à cette ancre.
- Texte du lien : Retour en haut

2. Lien externe : 6. Lien sur une image :

Crée un lien vers le site officiel de l’OFPPT, ouvrant dans une L’image (par exemple le logo de Bootstrap) doit être
nouvelle fenêtre. cliquable et rediriger vers [Link]
- Texte du lien : Visiter le site de l’OFPPT - Taille : 150x150 px
- Astuce : utilise target="_blank" - Texte alternatif : Logo Bootstrap

3. Lien interne : 7. Lien pour envoyer un mail :

Crée un lien vers une autre page nommée [Link]. Crée un lien qui ouvre le logiciel de messagerie avec
- Texte du lien : Page de contact l’adresse suivante :
[Link]
- Texte du lien : Envoyez-moi un mail
 Les balises multimédia
images, audio, vidéo

M104
Développer des sites web
statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

La balise <img> en HTML

La balise <img> permet d’insérer une image dans une page web.
C’est une balise orpheline, c’est-à-dire qu’elle ne possède pas de balise fermante.

Les attributs les plus utilisés :

❑src : (source) indique le chemin de l’image à afficher.

Exemple : src="images/[Link]"
❑alt : (alternatif) définit un texte de remplacement si l’image ne s’affiche pas.
Ce texte est aussi lu par les outils d’accessibilité.
❑width et height : définissent la largeur et la hauteur de l’image (en pixels).
Exemple : width="200" height="100"
❑title (optionnel) : affiche un texte au survol de l’image.

M104
Développer des sites web statiques
 [Link]

<body>
<h1>Insertion images dans une page HTML</h1>

<h1>Image locale </h1>

<img src="[Link]" alt="Logo de l'OFPPT" width="160" height="100">
----------------------------------------------------------------------------------------

<h1>Image depuis Internet </h1>

<img src="[Link]
alt="cmc" width="160" height="100">

---------------------------------------------------------------------------------------
<h1>Image avec un titre</h1>
<img src="[Link]" alt="Logo HTML" title="Langage HTML5" width="120"
height="120">

</body>
[Link]
 00:00
Temps
Objectif : Savoir insérer correctement des images dans une page HTML. restant :

Objectif :
Créer une page de login fictive avec des liens et des images cliquables, pour
pratiquer les balises <a> et <img>.

Contexte : Liens :
Vous êtes chargé de créer la page d’accueil d’un site avec : •Inscription : lien vers [Link]
•Une image/logo cliquable qui redirige vers la page •Mot de passe oublié : lien vers [Link]
d’accueil. •Contact admin : lien mail
[Link]
•Des liens vers les pages Inscription et Mot de passe oublié.
•Retour en haut : ancre et lien pour remonter.
•Un lien mail pour contacter l’administrateur.
•Un lien pour remonter en haut de la page.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

La balise : <picture>

La balise <picture> sert à afficher différentes images selon l’écran ou

l’appareil utilisé (ordinateur, tablette, téléphone…).

Le navigateur choisit automatiquement la meilleure image selon :

•la taille de l’écran (large ou petite),

•le type d’appareil (mobile, PC, etc.),
•le format d’image qu’il peut lire (JPEG, png, etc.).

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

<picture>
<source srcset="[Link]" media="(min-width: 600px)">
<img src="[Link]" alt="image par défaut">
</picture>

•<source> : définit une image alternative qui sera affichée si la condition

est remplie (ici, si l’écran fait au moins 600px de large).

•<img> : image par défaut, utilisée si aucune condition ne correspond.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Insertion d’images dans une page HTML

tp-image
[Link]éez un dossier nommé "tp-image" sur votre ordinateur.
2.À l’intérieur de ce dossier, créez un fichier nommé
[Link].
[Link] le même dossier, ajoutez trois images : [Link] [Link]

[Link]
[Link] [Link] [Link]

[Link]

Vous pouvez utiliser n’importe quelles images, mais elles doivent avoir ces noms

M104
Développer des sites web statiques
 [Link]

<body>
<h2>Image qui change selon la taille de l’écran</h2>

<picture>
<source srcset="[Link]" media="(min-width: 700px)">
<source srcset="[Link]" media="(min-width: 400px)">
<img src="[Link]" alt="Image par défaut" width="300">
</picture>

<p>Redimensionne la fenêtre du navigateur pour voir l’image changer !</p>

</body>

Observer comment l’image s’adapte quand on réduit ou agrandit la fenêtre.

 Atelier pratique : Crée ton propre musée en HTML
Temps
restant : 00:00
Chaque stagiaire doit créer son propre musée virtuel, en utilisant uniquement les balises HTML vues en cours (pas de
CSS, ni de nouvelles balises).
L’objectif est de structurer une mini-application web de 3 pages avec des liens, des images et du texte bien organisés.

Consignes
[Link] un thème qui te passionne :
Exemple : musée du football, musée de l’économie, musée de l’informatique, musée de l’art, musée des inventions, etc.
[Link]ée 3 pages HTML :
1. Page 1 : Accueil
1. Contient le nom du musée (dans un <h1>).
Utilise uniquement les balises et attributs
2. Une courte description du musée (<p>). appris :
3. Un logo ou une image principale (<img>). <html>, <head>, <meta>, <title>, <h1>…<h6>, <p>,
4. Un lien pour entrer dans le musée (<a>). <a>, <img>, <ul>, <ol>, <dl>, <li>, <span>, les
2. Page 2 : Galerie / Liste des articles attributs href, src, alt, title, width, height, target.
1. Contient une liste d’articles ou d’objets du musée (titres et images).
2. Chaque article doit être cliquable (lien <a>) vers sa page de description.
3. Page 3 : Détail d’un article
1. Contient le titre de l’article, une image, et une description (historique, utilité, faits intéressants…).
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

La balise <audio> en HTML

L’élément <audio> sert à insérer et lire un son ou une

musique directement dans une page web.
Principaux attributs :
•controls :
Cet attribut affiche les boutons de contrôle (lecture , pause , volume).
Sans controls, l’utilisateur ne pourrait pas interagir avec le son.

•autoplay : Lance automatiquement la lecture du son dès que la page se charge.

Cependant, certains navigateurs bloquent cette option pour éviter les sons automatiques non désirés.

M104
Développer des sites web statiques
[Link]

<audio controls autoplay>

<source src="[Link]" type="audio/ogg">
<source src="son.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas la
balise "audio".
</audio>
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

La balise <video> en HTML

L’élément <video> sert à insérer une vidéo directement dans une

page web.

Grâce à cette balise, l’utilisateur peut regarder une vidéo sans

quitter le site et sans avoir besoin d’un lecteur externe.

M104
Développer des sites web statiques
[Link]

<video width="320" height="240" controls autoplay>

<source src="film.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Votre navigateur ne supporte pas la balise "video".
</video>
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

La balise <iframe>

La balise <iframe> (inline frame) permet d’afficher dans une page

web le contenu d’une autre page web, ou une vidéo en ligne,
comme celles de YouTube.
Elle sert à intégrer (insérer) un autre site, une carte, ou une vidéo à l’intérieur d’une page HTML.
C’estsert
Elle comme si tu ouvrais
à intégrer une petiteun
(insérer) fenêtre
autre dans ta page,
site, uneetcarte,
que cette
oufenêtre montreàune
une vidéo autre paged’une
l’intérieur web.
page HTML.

C’est comme si tu ouvrais une petite fenêtre dans ta page, et que cette fenêtre
montre une autre page web.

M104
Développer des sites web statiques
[Link]

<iframe width="640" height="360"

src="[Link]
</iframe>

Le mot “embed” dans l’adresse signifie que c’est un lien préparé

pour être intégré.
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

La balise <object>

La balise <object> est utilisée pour insérer (intégrer) dans une page web
différents types de fichiers ou d’objets externes, comme :
• des pages HTML,
• des fichiers PDF,
Elle sert à intégrer (insérer) un autre site, une carte, ou une vidéo à l’intérieur d’une page HTML.
• C’est
descomme
images,
si tu ouvrais une petite fenêtre dans ta page, et que cette fenêtre montre une autre page web.
• des vidéos, ou même des applications interactives (ex : animations
anciennes en Flash).
C’est une balise polyvalente : elle permet d’afficher presque tout type de
contenu dans une page web.

M104
Développer des sites web statiques
[Link]

Exemple 1 : intégrer une page HTML dans une autre page

<object data="data/[Link]" type="text/html"

width="300" height="200">
alt : <a href="data/[Link]">[Link]</a>
</object>
[Link]

Exemple 2 : intégrer un fichier PDF

<object data="data/[Link]" type="application/pdf"

width="300" height="200">
alt : <a href="data/[Link]">Ouvrir le fichier PDF</a>
</object>
Ma mini
Plateforme Multimédia
 Le centre de formation souhaite lancer une plateforme interne de partage multimédia pour ses stagiaires.
Chaque stagiaire doit concevoir une page prototype de cette plateforme.
L’objectif est de montrer comment une simple page HTML peut présenter des contenus interactifs sans aucune aide externe.

Consignes
Crée une page web personnelle appelée :
plateforme_tonNom.html
Cette page doit représenter ta propre plateforme multimédia (comme un mini-YouTube, un mini-Spotify ou un
musée interactif) ,Sois créatif et professionnel — imagine que tu présentes ton projet à une entreprise !

Contenu attendu dans la page :

[Link] Audio :
1. Un ou plusieurs fichiers son avec <audio> (ex : fond
[Link]-tête (header) :
musical, bruitage, podcast...).
1. Titre de ta plateforme (ex. “MusicZone”, “EduTube”, “ArtPlayer”…) 2. Utiliser les attributs controls et autoplay.
2. Brève description de son but (en paragraphe <p>)
[Link] Ressources :
[Link] Images : 1. Un fichier PDF ou page HTML intégrée avec <object>
1. Une ou deux images avec <img> ou <picture> (selon la taille d’écran).
(par exemple : une “fiche de présentation” ou un “guide
2. Ajoute une info-bulle (title) sur chaque image.
utilisateur”).
[Link] Vidéos :
[Link] et liens :
1. Une vidéo insérée avec <video> ou intégrée avec <iframe> (ex : une
1. Une liste <ul> ou <ol> des “catégories de contenus” ou
vidéo YouTube éducative ou inspirante).
“types de médias”.
2. Si la vidéo ne s’affiche pas, un message alternatif doit apparaître. 2. Un lien <a> vers une autre page ou ressource (ex.
contact, à propos, chaîne YouTube...).
Les tableaux en HTML
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

La balise <table> : créer un tableau en HTML

La balise <table> sert à organiser les informations sous forme de tableau

(lignes et colonnes), comme dans un tableau Excel.

C’est pratique pour

Elle sert à intégrer afficher
(insérer) : site, une carte, ou une vidéo à l’intérieur d’une page HTML.
un autre
C’est comme si tu ouvrais une petite fenêtre dans ta page, et que cette fenêtre montre une autre page web.

• des listes d’employés,

• des emplois du temps,
• des prix, des notes, ou toute autre donnée structurée.

M104
Développer des sites web statiques
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Structure de base d’un tableau

Un tableau HTML est construit étape par étape à l’aide de plusieurs balises :

Balise Signification Rôle

<table> Table Conteneur principal du tableau
<tr> Table Row Crée une ligne dans le tableau
<td> Elle sert à intégrer (insérer) un autre site, une carte, ou une vidéo à l’intérieur d’une page HTML.
Table Data Crée une cellule de données (le contenu)
C’est comme si tu ouvrais une petite fenêtre dans ta page, et que cette fenêtre montre une autre page web.
<th> Table Header Crée une cellule d’en-tête (le titre des colonnes)

<caption> Caption Donne un titre au tableau

Définit la largeur de la bordure (optionnel, pour rendre visible le
border Attribut
cadre)

M104
Développer des sites web statiques
[Link]

<table border="1">
<caption align="bottom">Liste des employés</caption>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Âge</th>
</tr>
<tr>
<td>ENAANAI</td>
<td>Adil</td>
<td>40</td>
</tr>
<tr>
<td>SAFIR</td>
<td>Laila</td>
<td>32</td>
</tr>
<tr>
<td>HAMIM</td>
<td>Mohamed</td>
<td>39</td>
</tr>
</table>
 Atelier pratique : Crée ton propre musée en HTML Temps restant : 00:00
Créer un tableau HTML complet et lisible, sans utiliser de CSS, pour présenter des données réelles selon un thème choisi
librement par le stagiaire

Consignes : Structure ton tableau

Choisis un thème qui t’intéresse parmi ces idées : 1. Un titre clair avec <caption>
2. Une ligne d’en-tête avec <th>
1. Classement d’un championnat sportif (ex : 3. Au moins 4 lignes de données
football, basket, e-sport…) 4. Une bordure visible (border="1")
2. Tableau de performances d’une équipe 5. (Facultatif) Un attribut align pour placer
informatique ton titre en haut ou en bas
3. Tableau de ventes mensuelles d’une
entreprise
4. Notes de stagiaires dans un module
5. Top 5 des films préférés
6. Classement des artistes les plus écoutés
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Espacement entre les cellules

Quand on crée un tableau en HTML, on peut régler les espaces à l’intérieur et entre les cellules :

❑ cellspacing : règle l’espace entre les cellules (l’espace vide entre deux cases du tableau).

❑ cellpadding : règle l’espace entre le texte et le bord de la cellule (l’intérieur de la case).

M104
Développer des sites web statiques
table_cell.html

<table border="1" cellspacing="10" cellpadding="5">

<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
</table>
 Partie 01 : Créer une page web en HTML CHAPITRE 03 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML

Fusion de cellules

Parfois, on veut qu’une cellule occupe plusieurs colonnes ou plusieurs lignes.

On utilise alors :

❑ colspan pour fusionner des colonnes.

❑ rowspan pour fusionner des lignes.

colspan rowspan

CELLULE1 CELLULE2 CELLULE3

CELLULE2 CELLULE3 CELLULE4 CELLULE1 CELLULE4 CELLULE5

CELLULE5 CELLULE6 CELLULE7 CELLULE6 CELLULE7

M104
Développer des sites web statiques
[Link]

<table border="1" width="60%">

<tr>
<td colspan="3">Cellule 1 (fusionne 3
colonnes)</td>
</tr>
<tr>
<td>Cellule 2</td>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
[Link]

<table border="1" width="60%">

<tr>
<td rowspan="2">Cellule 1 (fusionne 2 lignes)</td>
<td>Cellule 2</td>
<td>Cellule 3</td>
</tr>
<tr>
<td>Cellule 4</td>
<td>Cellule 5</td>
</tr>
</table>
 Atelier pratique : Tableau des notes des stagiaires Temps restant : 00:00
Créer un tableau HTML qui présente les résultats d’un module de formation avec fusion de cellules, espacements et
entêtes.

Consignes : Structure ton tableau

1. Crée un tableau avec bordures, cellspacing et

cellpadding.
2. Ajoute un titre au tableau avec <caption>.
3. La première ligne contient les en-têtes : Nom,
Prénom, Notes (fusion de 2 colonnes), Moyenne.
4. La deuxième ligne précise les sous-en-titres des notes
: Théorie et Pratique.
5. Remplis le tableau avec 3 stagiaires et leurs notes.
6. Pour un stagiaire absent, fusionne les colonnes des
notes et affiche "Absent" centré.
7. Ajoute une ligne finale pour la moyenne générale, en
fusionnant les colonnes du texte.
 #00B0F0
M104
#70AD47

#E02774
#FFC000
 <td rowspan=3> <td>
<tr> </tr>

<tr> <td></td> <td></td> </tr>

<tr> <td></td> <td></td> </tr>