Initiation au HTML

Université Abdelmalek Essaadi

Faculté des Sciences et Techniques
Tanger

Cours du Pr. A. AZMANI

Cours pour les troncs communs

Cours du Pr. A. AZMANI 1

 I.1 Qu'est-ce qu'une page web ?

Document numérique accessible via Internet, affiché dans un navigateur web.

Une page web est :

• Identifiée par une adresse (URL : Uniform Resource Locator, l'adresse unique d'une ressource sur Internet, comme
une page web, une image ou une vidéo, indiquant au navigateur où et comment y accéder)
• Stockée sur un serveur
• Affichée à l'utilisateur sous forme visuelle (texte, images, boutons, etc.)
HTML
I. Introduction Une page web peut contenir :
I.1 Page web • Texte, Images, Boutons, Formulaires
• Audio et Vidéo
• Des liens pour naviguer vers d'autres pages
=> Un site web est un ensemble de pages web reliées entre elles par des liens.

Cours du Pr. A. AZMANI - Module : Digital Skills

 I.2 Fonctionnement Client – Serveur

Les ordinateurs connectés au Web jouent généralement deux rôles : client ou serveur.

Client
• L'appareil de l'utilisateur (ordinateur, smartphone, tablette)
• Le logiciel d'accès au Web (navigateur : Chrome, Firefox, Edge)
• Exemples de clients :
• Un ordinateur connecté au Wi-Fi
HTML • Un téléphone connecté au réseau mobile

I. Introduction
I.2 Client-Serveur Serveur
• Ordinateur connecté en permanence à Internet
• Stocke les fichiers du site web (HTML, CSS, JavaScript, images…)

Cours du Pr. A. AZMANI - Module : Digital Skills

 Interaction client – serveur
Au niveau le plus simple, Le fonctionnement du Web repose sur l’échange suivant :

1. Le client envoie une requête au serveur lorsqu’un utilisateur saisit une adresse ou clique sur un lien
2. Le serveur vérifie que l'URL demandée correspond à un fichier existant.
3. Si c'est le cas, Le serveur répond aux requêtes des utilisateurs par l’envoi des documents demandés
HTML 4. Si le fichier demandé n’existe pas ou ne peut pas être traité, le serveur web envoie un message d’erreur au
navigateur, le plus courant étant l’erreur 404 « Page non trouvée », souvent personnalisée par les sites.
I. Introduction 5. Le client reçoit la réponse contenant les fichiers de la page web.
I.2 Client-Serveur 6. Le navigateur interprète les fichiers reçus :
• Il analyse le HTML pour comprendre la structure de la page,
• Applique le CSS pour le style,
• Exécute le JavaScript pour le comportement et l’interactivité.
7. Enfin, le navigateur affiche la page web à l’utilisateur.

Cours du Pr. A. AZMANI - Module : Digital Skills

 I.3 Introduction à HTML

Définition
• HTML = HyperText Markup Language = langage de balises pour l'hypertexte
• L’hypertexte correspond aux liens qui connectent les pages web entre elles, au
sein d’un même site ou entre différents sites, formant ainsi la « toile » du Web.
• Définit la structure et le contenu d'une page web
• Décrit un texte au navigateur si c’est un titre, paragraphe, tableau, liste, texte
important…
• Compilé/interprété par le navigateur
HTML
I. Introduction
HTML + CSS + JavaScript
I.3 HTML
D'autres technologies sont utilisées avec HTML
• CSS : présentation visuelle (couleurs, tailles, mise en page)
• JavaScript : fonctionnalités interactives

Cours du Pr. A. AZMANI - Module : Digital Skills

 Création d'une première page HTML
Outils nécessaires
a. Éditeur de texte : permet d’écrire le code HTML.
• Visual Studio Code (recommandé) : offre une coloration de
code, auto-complétions, extensions utiles ( comme Live Server ),
interface claire et moderne.
• Installation de VS Code :
1. Aller sur le site officiel [Link]
2. Télécharger la version adaptée à votre système (Windows,
macOS ou Linux)
HTML 3. Installer le logiciel en suivant les étapes proposées
I. Introduction
b. Navigateur web : Chrome, Firefox, Edge
Outils & 1ère page
• Le navigateur permet d’afficher la page HTML.
• C’est lui qui interprète le code HTML et le transforme en
éléments graphiques (texte, images, liens…).
• Exemples de navigateurs :
• Google Chrome
• Mozilla Firefox
• Microsoft Edge

Cours du Pr. A. AZMANI - Module : Digital Skills

 Création d'une première page HTML
Méthode 1 : VS Code + Live Server
(recommandée)
• Installer l'extension Live Server dans VS Code (c’est une
extension de VS Code qui permet d’exécuter une page
HTML automatiquement dans le navigateur.)
• Installation de Live Server :
1. Ouvrir Visual Studio Code
2. Aller dans l’onglet Extensions 3. Rechercher Live Server

HTML
I. Introduction
Outils & 1ère page

4. Cliquer sur Installer

Cours du Pr. A. AZMANI - Module : Digital Skills

 Exécution de la page HTML :

1. Créer un dossier (exemple : MonPremierSite) 5. Écrire le code HTML dans le fichier

2. Ouvrir Visual Studio Code 6. Faire un clic sur Go Live en bas à droite sur l’interface
3. Dans VS Code, cliquer sur Fichier
4. Ouvrir un dossier et sélectionner le dossier créé

HTML
I. Introduction
 La page s’ouvre automatiquement dans le
Outils & 1ère page
navigateur.
 Toute modification (après enregistrement)
est affichée sans recharger la page.
 Live Server ne fonctionne que sur des fichiers
HTML enregistrés (.html).

Cours du Pr. A. AZMANI - Module : Digital Skills

 Création d'une première page HTML

Méthode 2 : Classique
1. Créer un fichier texte vide (.txt)
2. Renommer le fichier en changeant l’extension .txt par .html (exemple : [Link])
3. Ouvrir le fichier avec un éditeur de texte (ex : VS Code)
4. Écrire le code HTML
5. Double-cliquer sur le fichier ou faire clic droit → Ouvrir avec → Navigateur
HTML Cette méthode est simple et idéale pour débuter, mais nécessite de recharger manuellement la page après chaque
modification.
I. Introduction
Outils & 1ère page

Cours du Pr. A. AZMANI - Module : Digital Skills

 Structure d'un fichier HTML
Un document HTML respecte une structure bien définie, comprise par le navigateur :

• <!DOCTYPE html> : directive obligatoire (mode standard)

Sans <!DOCTYPE html>, le navigateur utilise le quirks mode (un mode de
rendu ancien pouvant provoquer des problèmes d’affichage. ).
• <html> : racine du document, contient tous les éléments
• Un document HTML se divise en deux parties principales :
• <head>
HTML • <body>
I. Introduction • La partie <head> est utilisé pour :
Structure HTML • Définir le titre de la page
• Lier des fichiers externes
• Déclarer des métas-données
• La partie <body> contient le contenu visible de la page web (texte, images,
liens, etc.).

 Cette structure est indispensable et sera présente dans tous les fichiers HTML.

Cours du Pr. A. AZMANI - Module : Digital Skills

 II.1 Balise vs Élément
Balise
• Mot-clé entouré de < > :
• Exemple : <p>, </p>
• Balises doubles : ont une ouverture + fermeture
• Exemple : <html></html>
• Balises auto-fermantes / éléments vides : ont seulement une balise ouvrante, et n’ont pas de balise de fermeture.
• Exemple : <br/>, <hr/>, <img/>

Élément
HTML • balise ouvrante + contenu + balise fermante (si elle existe)
II. Notions de
base
Balise vs Élément

Cours du Pr. A. AZMANI - Module : Digital Skills

 II.1 Balise vs Élément
Types de balises
• Block : largeur 100% de l'écran (ex: <p>, <h1>, <div>)
• Inline : largeur égale à son contenu (ex: <span>, <a>, <img>)

HTML
II. Notions de Inspection sur le navigateur (clic droit sur l’élément sur le navigateur + cliquer sur inspecter + survoler les éléments dans
base l’onglet Elements)
Balise vs Élément

Éléments vides courants

• <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track>, <wbr>

Cours du Pr. A. AZMANI - Module : Digital Skills

 II.2 Balises imbriquées (Nested tags)

Les éléments HTML peuvent en contenir d'autres. Tous les documents HTML sont composés d'éléments imbriqués.
• <html> contient tout le document
• <body> est à l'intérieur de <html>
• <h1> et <p> sont à l'intérieur de <body>

HTML
II. Notions de
base
Imbrication & Head

Cours du Pr. A. AZMANI - Module : Digital Skills

 II.3 Les fondamentaux du HTML : des balises clés
II.3.1 Head – Balise <title>
• Définit le titre affiché dans la barre du titre de l'onglet du navigateur
• Toujours utilisé à l’intérieur de l’élément <head> de la page
• Important pour le SEO : les moteurs de recherche l'utilisent pour déterminer l'ordre d'affichage des pages dans les
résultats de recherche

HTML
II. Notions de
base
Imbrication & Head
• Conseils : titre long et descriptif, 50-60 caractères max
• Placer les mots-clés importants au début du titre

Cours du Pr. A. AZMANI - Module : Digital Skills

 II.3.2 Head – Liaison avec fichiers externes

HTML Cette ligne sert à lier un fichier CSS à une page HTML : l’attribut rel="stylesheet" indique qu’il s’agit d’une feuille de
style, et href précise son chemin, permettant au navigateur d’appliquer les styles à la page.
II. Notions de
base
Imbrication & Head

 Cette balise permet d’importer un fichier JavaScript

 src="[Link]" indique le fichier JavaScript à charger
 JavaScript sert à rendre la page interactive (clics, animations, formulaires, etc.)

Cours du Pr. A. AZMANI - Module : Digital Skills

 II.3.3 Méta-données et <style>
Balises <meta>
Les métadonnées HTML sont des informations à propos d’un document HTML qui ne s’affichent pas directement sur la
page web, mais qui sont utilisées par les navigateurs, les moteurs de recherche et d’autres services web pour
comprendre et traiter le contenu.

HTML
II. Notions de
base La balise <meta description> par exemple fournit le texte affiché sous le titre dans les moteurs de recherche.
Méta-données

Cours du Pr. A. AZMANI - Module : Digital Skills

 II.3.3 Méta-données et <style>
Élément <style>
• Contient du CSS appliqué directement dans la page
• À placer dans <head>

HTML
II. Notions de
base
Méta-données

• Il est préférable de placer vos styles dans les feuilles de style externes via <link> pour
mieux organiser et maintenir le code.

Cours du Pr. A. AZMANI - Module : Digital Skills

 II.3.4 Paragraphes : <p>…</p> II.3.5 Titres : <h1>…<h6>
• Sert à définir un paragraphe — balise double, type • 6 niveaux de titre : <h1> (le plus haut) à <h6> (le plus faible)
block • Balises doubles et Blocks
• Utiliser une balise <p> par paragraphe de texte
Bonnes pratiques
• La mise en forme (espacement, retour à la ligne) doit • Un seul <h1> par page HTML
être gérée avec CSS • Respecter l'ordre (ne pas commencer par un <h2> puis un <h1>)
• Utiliser les titres pour la structure sémantique, pas pour le style
• Intégrer des mots-clés pertinents dans vos titres

HTML
II. Notions de
base
Paragraphes & Titres

Cours du Pr. A. AZMANI - Module : Digital Skills

 II.4 Les attributs
Tous les éléments HTML peuvent avoir des attributs.
• Fournissent des informations supplémentaires sur les éléments
• Toujours spécifiés dans la balise de début
• Écrits sous forme de paires nom/valeur : nom="valeur"
• Certains sont spécifiques à des éléments (src, href), d'autres peuvent êtres utilisés sur presque tous les éléments
HTML (id, class)

HTML
II. Notions de
base
Attributs &
Commentaires II.5 Les commentaires
• Non affichés dans le navigateur, aucun impact sur le rendu
• Utilisés pour expliquer le code ou désactiver temporairement du contenu

Cours du Pr. A. AZMANI - Module : Digital Skills

 III.1 Intégrer une image
• Élément <img> — balise vide (auto-fermante), type Inline
• Attribut obligatoire : src qui indique le chemin vers l'image

Chemin de l'image
• Exemple d’image dans le même dossier que la page HTML

HTML • Exemple d’image dans un sous-dossier images

III. Images
Intégrer une image

• Exemple d’image via une URL absolue

Cours du Pr. A. AZMANI - Module : Digital Skills

 III.1 Intégrer une image
Attributs importants
• alt : texte alternatif permet de décrire l’image sous forme de texte lorsque celle-ci ne peut pas s’afficher

• width / height : définir la largeur et la hauteur d’une image, Si la page n'est pas encore chargée, ces attributs réservent un espace
pour l’image pendant le chargement

HTML
III. Images
Intégrer une image

=> Il vaut mieux redimensionner les images avec un éditeur avant de les utiliser, et non en HTML, sinon utilisez plutôt le CSS pour
ajuster leur taille.
• title : affiche une info-bulle au survol

Cours du Pr. A. AZMANI - Module : Digital Skills

 • srcset : permettent au navigateur de choisir l’image la plus adaptée selon la taille de l’écran et l’espace disponible.
définit la liste d'images avec leur largeur intrinsèque (w)

Avant chaque virgule, on spécifie :

HTML • Un nom de fichier image
• Espace
III. Images • Largeur intrinsèque en pixels ; (w) est un descripteur de largeur indiquant la taille réelle de l'image, qui peut être
Srcset & loading trouvée en examinant les propriétés du fichier image sur l'ordinateur.

• Loading : indique si le navigateur doit charger une image immédiatement ou différer le chargement des images situées
hors de l’écran (par exemple lorsque l’utilisateur fait défiler la page).
• Ses valeurs sont :

• loading='eager' : chargement immédiat (défaut)

• loading='lazy' : chargement différé jusqu'à ce que l'image soit visible
Utile pour les longues pages avec beaucoup d'images.

Cours du Pr. A. AZMANI - Module : Digital Skills

 III.2 Les formats d'image
• APNG — animations sans perte (meilleur que GIF)
• AVIF — hautes performances (images et animations)
• GIF — images et animations simples
• JPEG — compression avec perte (photos statiques, le + utilisé)
• PNG — compression sans perte, meilleure qualité que JPEG, supporte la transparence
• SVG — vectoriel, précis à toutes les échelles
• WebP — statique et animé, recommandé (meilleures performances)

Conseil pratique
HTML • Vérifier la compatibilité navigateur sur des sites comme [Link]
III. Images
Formats d'image

Cours du Pr. A. AZMANI - Module : Digital Skills

 IV.1 Les liens en HTML : Balise <a> • L’attribut target indique où ouvrir le document, il peut
• Sert à afficher un lien vers une autre page, prendre l’une des valeurs suivantes :
position différente dans la même page, email… • _self : Valeur par défaut. Ouvre le document dans
• Balise double, type inline la même fenêtre ou le même onglet.
• _blank : Ouvre le document dans une nouvelle
IV.2 Attribut href fenêtre ou un nouvel onglet.
• Attribut obligatoire : indique la destination du lien

HTML
IV. Les Liens • « texte de lien » ici est la partie visible à
l’utilisateur, en cliquant, elle envoie l’utilisateur
Balise <a>
au contenu visé. • Le premier lien ouvre une page locale ([Link]) dans le
même onglet grâce à target="_self".
• Le deuxième lien ouvre un site externe (Google) dans un
IV.3 Attribut target nouvel onglet avec target="_blank".
• Le troisième lien utilise mailto: pour envoyer un email
• Par défaut, la page liée s’ouvre dans la fenêtre (ou
via le logiciel de messagerie.
l’onglet) actuelle du navigateur. Pour modifier ce
• Le dernier lien est une ancre qui permet de naviguer
comportement, vous devez spécifier une autre
vers une section de la même page avec l’identifiant
cible pour le lien. « presentation ».

Cours du Pr. A. AZMANI - Module : Digital Skills

 IV.4 Utiliser une image comme lien
Placer la balise <img> à l'intérieur de la balise <a>.

• Cliquer sur l'image redirige vers l'URL du lien

IV.5 Attribut title

HTML • Fournit des informations supplémentaires sur le lien
• Affiché en info-bulle au survol de la souris
IV. Les Liens
Image lien & title

Cours du Pr. A. AZMANI - Module : Digital Skills

 IV.6 Comprendre les URL et les chemins
IV.6.1 URL — Uniform Resource Locator
• Chaîne de caractères indiquant l'emplacement d'une ressource sur le Web
• Exemple : [Link]

IV.6.2 Notion de chemin (path)

• Indique où se trouve un fichier dans l'arborescence (structure de dossiers) du site

IV.6.3 Exemple de structure de répertoire

HTML • creating-hyperlinks est la racine du site

• [Link] est généralement la page d’accueil
IV. Les Liens • [Link] est une autre page du site
URL & Chemins • projects et pdfs sont des sous-dossiers

 Lier des fichiers dans le même dossier

Si vous êtes dans [Link] (à la racine) et que vous

souhaitez créer un lien vers [Link], il suffit
d’indiquer le nom du fichier, car il se trouve dans le même
dossier.

Cours du Pr. A. AZMANI - Module : Digital Skills

  Lier vers un sous dossier
Pour créer un lien vers projects/[Link] depuis
[Link] (racine), il faut descendre dans le dossier
projects.

 Remonter dans un dossier parent

Si vous êtes dans projects/[Link] et que vous voulez créer un lien vers
pdfs/[Link], vous devez :
• Remonter d’un niveau (.. signifie : remonter au dossier parent)
• Entrer dans le dossier pdfs

HTML
 Chemins plus complexes
IV. Les Liens Il est possible de combiner plusieurs montées et descentes dans des URL complexes si nécessaire
URL & Chemins
IV.6.4 Fragments (ancres)
• Il est possible de créer un lien vers une partie précise d’un document HTML, appelée fragment de document
a. Définir une cible avec id

Pour créer un fragment, il faut d’abord attribuer un attribut id

unique à l’élément vers lequel on souhaite pointer.
On utilise le plus souvent des titres de section.

Cours du Pr. A. AZMANI - Module : Digital Skills

 b. Créer un lien vers un fragment d’un autre c. Créer un lien vers un fragment dans le même
document document
Le nom de l’id à la fin de l’URL, précédé du symbole # Utiliser uniquement le fragment :

HTML IV.6.5 URL absolues vs URL relatives IV.6.6 Liens mailto:

IV. Les Liens URL absolue • Il est possible de créer un lien qui ouvre le client de messagerie de
URL & Chemins l’utilisateur.
• Indique l’emplacement complet d’une ressource sur le
Web
• Contient protocole + nom de domaine + chemin complet
• Exemple : [Link]
• Fonctionne indépendamment de l'emplacement du
fichier courant
URL relative
• Dépend de l'emplacement du fichier courant mailto: sans adresse ouvre un nouveau message sans
• Exemple : href="pdfs/[Link]" (depuis le même dossier) destinataire

Cours du Pr. A. AZMANI - Module : Digital Skills

 V. Structurer l'information avec les listes
Sur le Web, on distingue 3 types de listes : non ordonnées,
ordonnées, de description.

V.1 Listes non ordonnées (<ul>) V.2 Listes ordonnées (<ol>)

• Utilisées quand l'ordre des éléments n'a pas d'importance • Utilisées quand l'ordre est important (étapes,
• <ul> : unordered list : pour définir la liste instructions)
• <li> : pour chaque élément • <ol> : ordered list : pour définir la liste
• Rendu : puces (•) • <li> : pour chaque élément
• Rendu : numéros (1. 2. 3.)
HTML
V. Les Listes
<ul> et <ol>

Cours du Pr. A. AZMANI - Module : Digital Skills

 V.3 Imbrication de listes V.4 Listes de description (<dl>)
• Associe un terme à une ou plusieurs descriptions
• Imbriquer une liste dans une autre (sous-étapes,
• Idéales pour : définitions, glossaires, Q/R, paires clé–valeur
choix)
• Placer un <ul> ou <ol> à l'intérieur d'un <li> • <dl> : description list : conteneur
• <dt> : terme (description term)
• <dd> : description (description definition)
• Un même terme peut avoir plusieurs <dd>

HTML
V. Les Listes
Imbrication & <dl>

Cours du Pr. A. AZMANI - Module : Digital Skills

 VI.1 Audio
• L'élément <audio> intègre un contenu sonore dans une page
• Attribut src : chemin vers le fichier audio
• Attribut controls : affiche lecteur (lecture, pause, volume)

HTML Autre méthode d’utilisation : avec <source>

Vous pouvez à la place de src utiliser l'élément <source> à l'intérieur du bloc audio pour définir l'audio à intégrer.
VI. Multimédia
Audio

Attributs principaux
• autoplay : lecture automatique (bloquée si son non muet dans la plupart des navigateurs)
• loop : lecture en boucle
• muted : démarre en mode muet
Cours du Pr. A. AZMANI - Module : Digital Skills
 VI.2 Vidéo
• L'élément <video> intègre un contenu vidéo dans une page
• Attribut src : chemin vers le fichier vidéo
• Attribut controls : affiche lecteur (lecture, pause, volume, plein écran)

HTML Utilisation avec plusieurs formats

• Le navigateur lit le premier format compatible
VI. Multimédia
Vidéo

Attributs principaux
• loop : lecture en boucle
• muted : coupe le son (nécessaire pour autoplay)
• autoplay : lecture automatique (autorisé uniquement si muted)
• poster : image affichée avant le chargement de la vidéo
Cours du Pr. A. AZMANI - Module : Digital Skills
 VII.1 Éléments sémantiques vs Non Éléments SÉMANTIQUES
sémantiques • Définissent clairement le type de contenu qu'ils
contiennent
Éléments NON sémantiques • Exemples : <img>, <table>, <article>, <header>,
• Ne donnent aucune information sur le contenu <footer>, <nav>…
• <div> : conteneur bloc (regrouper des éléments, • Rôle compréhensible sans lire le contenu interne
appliquer CSS)
Un élément sémantique décrit clairement sa signification
• <span> : conteneur inline (cibler/styliser une partie
à la fois pour le navigateur et pour le développeur.
de texte)

HTML
VII. Sémantique
Sémantique vs Non-
sémantique

Cours du Pr. A. AZMANI - Module : Digital Skills

 VII.2 Éléments sémantiques HTML
Éléments disponibles : <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>,
<section>, <summary>, <time>

<section>
• Regroupement thématique de contenu (chapitres, intro, contact…)

<article>
• Contenu indépendant et autonome (billet de blog, commentaire, article)

<header>
HTML • Contenu d'introduction ou liens de navigation, peut contenir <h1>-<h6>, logo

VII. Sémantique <footer>

Structurer une page • Pied de page : copyright, contact, liens. Plusieurs <footer> possibles par page

<nav>
• Ensemble de liens de navigation principaux

<aside>
• Contenu annexe, indirectement lié au contenu principal (barre latérale)

<figure> et <figcaption>
• <figure> : contenu autonome : image, diagramme, code
• <figcaption> : légende du contenu de <figure>
Cours du Pr. A. AZMANI - Module : Digital Skills
 VII.3 Balises de style vs Balises sémantiques
Balises de mise en forme (non sémantiques)
En HTML, il existe plusieurs balises permettant de modifier l’apparence d’un texte.
• <b> : texte en gras
• <i> : texte en italique
• <u> : texte souligné
• <s> : texte barré

Ces balises modifient l'apparence mais n'ont aucune signification sémantique.

HTML
Balises sémantiques
VII. Sémantique
HTML propose également des balises qui modifient l’apparence tout en donnant du sens au contenu :
Style vs Sémantique
• <strong> : texte important
• <em> : emphase (texte à lire avec insistance)
• <ins> : texte ajouté dans une version révisée
• <del> : texte supprimé ou devenu obsolète

La présence de ces balises fournit une information supplémentaire au navigateur, aux moteurs de recherche et aux
technologies d’assistance.

En HTML moderne : utiliser les balises sémantiques pour le sens, CSS pour l'apparence visuelle.
Cours du Pr. A. AZMANI - Module : Digital Skills
 VIII. Les Formulaires
Un formulaire HTML collecte les données saisies par l'utilisateur, puis les envoie à un serveur.

VIII.1 L'élément <form>

• Utilisé pour créer un formulaire HTML destiné à la saisie des informations par l’utilisateur.
• Conteneur pour les différents types d’éléments de saisie (champs de texte, cases à cocher, boutons…)

Attributs principaux
• action : URL vers laquelle les données sont envoyées après soumission
• method : comment les données sont envoyées, il existe deux méthodes principales :
HTML
VIII. Formulaires
Méthode GET
• Données ajoutées à l'URL (visibles) sous forme de paires nom/valeur
<form>
• Pour requêtes simples ou recherches, limité à ~2048 caractères (taille max de l’URL)
• Ne pas utiliser pour données sensibles

Méthode POST
• Données envoyées dans le corps de la requête (invisibles)
• Pour formulaires sensibles ou volumineux — aucune limite de taille

Cours du Pr. A. AZMANI - Module : Digital Skills

 VIII.2 <select> — liste déroulante
• Représente un menu d'options
• Utilisée pour créer une liste déroulante

HTML
VIII. Formulaires
Quelques Attributs de <select> :
<select> & <textarea>
• name : nécessaire pour récupérer la valeur après l’envoi du formulaire.
• id : Attribut global qui définit un identifiant unique (ID) qui doit être unique dans tout le document. Son
rôle est d’identifier l’élément lors de la liaison. nécessaire pour associer la liste à un <label>.
• Les balises <option> à l’intérieur définissent les différentes options disponibles dans la liste déroulante.
• Disabled : Désactive la liste déroulante (elle n’est pas cliquable).
• Form : Associe la liste déroulante à un formulaire spécifique grâce à son id.
• Multiple : Permet de sélectionner plusieurs options en même temps.
• Required : Oblige l’utilisateur à sélectionner une option avant d’envoyer le formulaire.

Cours du Pr. A. AZMANI - Module : Digital Skills

 VIII.3 <textarea> — saisie multi-lignes
• Définit un champ de saisie de texte sur plusieurs lignes
• Peut contenir un nombre illimité de caractères
• souvent utilisé pour collecter des commentaires, des avis ou des descriptions
• Taille définie par cols (colonnes) et rows (lignes)

HTML
VIII. Formulaires
Quelques Attributs de <textarea> :
<select> & <textarea>
• name : nécessaire pour récupérer les données après l’envoi du formulaire.
• id : nécessaire pour associer la zone de texte à un <label>.
• Cols : Définit la largeur visible de la zone de texte (en nombre de caractères).
• Rows : Définit le nombre de lignes visibles de la zone de texte.
• Required : Oblige l’utilisateur à remplir la zone de texte avant l’envoi du formulaire.
• Form : Associe la zone de texte à un formulaire précis grâce à son id.
• Maxlength : Définit le nombre maximum de caractères autorisés.
• Placeholder : Affiche un texte indicatif décrivant ce que l’utilisateur doit saisir.
• Readonly : Rend la zone de texte en lecture seule (modifiable interdite, mais sélection possible).

Cours du Pr. A. AZMANI - Module : Digital Skills

 VIII.4 <input> — l'élément de saisie
• L'élément le plus utilisé des formulaires.
• Peut être affiché de différentes manières, selon la valeur de l’attribut type.
• Lorsque l’attribut type n’est pas présent, sa valeur est text.

Types principaux
type='text' — champ texte une ligne

HTML type='email' — email avec validation intégrée

VIII. Formulaires
<input> type='password' — texte masqué

type='radio' — bouton radio (une seule option)

type='checkbox' — case à cocher (une ou plusieurs options)

type='number' — chiffres uniquement

type='submit’ value= "Inscription" — bouton d'envoi

type='button' value= "Cliquez" — bouton cliquable

Cours du Pr. A. AZMANI - Module : Digital Skills
 Quelques Attributs de <input> :
Certains attributs de l’élément <input> ne s’appliquent qu’à certains types spécifiques. Ils permettent de limiter ou
contrôler les valeurs saisies par l’utilisateur.
• Name : donner un nom à un champ de formulaire, Ce nom est envoyé avec la valeur du champ lors de l’envoi du
formulaire, sans lui la valeur du champ n’est pas envoyée.
• id : sa valeur est utilisée comme valeur de l’attribut for de l’élément <label> afin d’associer le label au champ du
formulaire
• min/max : définissent la valeur minimale et maximale autorisée. Utilisés avec les types: date, month, week, time,
HTML datetime-local, number, range.
VIII. Formulaires • step définit l’intervalle entre les valeurs possibles : s’applique aux : date, month, week, time, datetime-local,
<input> number, range
• minlength/maxlength : nombre max et min de caractères autorisés, pour text, search, url, tel, email, password
• pattern : format obligatoire pour la valeur saisie dans un champs, la valeur du champs doit respecter ce format,
sinon le formulaire ne sera pas envoyé. Le format est définit via une expression régulière (regex)
• Placeholder : pour text, search, url, tel, email, password et number, fournit un court indice indiquant le type
d’information attendu dans le champ.
• Required : champ obligatoire, fonctionne pour la plupart des types d’input comme text, email, password, ou
checkbox

Cours du Pr. A. AZMANI - Module : Digital Skills

 VIII.5 L'élément <label>
Définit une étiquette (texte descriptif) pour les éléments de formulaire.

Utilité
• Lecteurs d'écran : le texte du label est lu quand l'utilisateur sélectionne le champ
• Facilite l'utilisation pour les zones cliquables petites
• Cliquer sur le texte du label active automatiquement le champ associé

Attribut for
• L’attribut for du <label> doit avoir la même valeur que l’attribut id du <input> afin de les lier, cette association
HTML améliore l’accessibilité et facilite l’interaction de l’utilisateur avec le formulaire (Activation lors du clic sur le texte du
VIII. Formulaires label)
<label>

Cours du Pr. A. AZMANI - Module : Digital Skills

 IX. Organiser les données avec les tableaux
L'élément <table> représente des informations sur un tableau en deux dimensions.

Éléments principaux
• <table> : conteneur du tableau
• <tr> : ligne du tableau (table row)
• <th> : cellule d'en-tête (table header) — en gras et centré
• <td> : cellule de données (table data)
• <caption> : titre du tableau
• Ces 2 attributs peuvent être ajouté à <td> pour la fusion : colspan pour la fusion des colonnes, et
rowspan pour la fusion des lignes.
HTML • Avant CSS, HTML servait à structurer et mettre en forme (ex : border, cellspacing)
IX. Tableaux • Aujourd’hui, ces attributs sont obsolètes : la mise en forme se fait avec CSS uniquement.
<table> • Dans ce cours, les attributs border et cellspacing sont utilisés juste pour rendre les tableaux lisibles.

Cours du Pr. A. AZMANI - Module : Digital Skills

 Tableau basique Utilisation de Border

HTML
IX. Tableaux Ajout de cellspacing
Exemples

Cours du Pr. A. AZMANI - Module : Digital Skills

 Fusion de lignes (rowspan)

HTML
IX. Tableaux Fusion de colonnes (colspan)
Exemples

Cours du Pr. A. AZMANI - Module : Digital Skills

 X. Bibliothèques et extensions
HTML structure le contenu. Pour des interfaces plus riches, on utilise des bibliothèques JavaScript complémentaires.

X.1 Canvas et WebGL

• <canvas> : dessiner des graphiques 2D dans le navigateur via JavaScript
• Utilisé pour animations, jeux simples, visualisations graphiques
• WebGL : technologie permettant d’afficher des graphiques 3D interactifs, sans plugins, s’appuie sur l’élément HTML
<canvas> pour afficher le rendu graphique et utilise le GPU pour de meilleures performances
• JavaScript fait le lien entre canvas et WebGL

HTML X.2 [Link]

• Bibliothèque JavaScript simplifiant l'utilisation de WebGL
X. Bibliothèques • Crée facilement des objets 3D et animations
Canvas, [Link], model- • Utilisée pour visualisations 3D et expériences immersives sur le web
viewer
X.3 <model-viewer>
• Web Component (balise HTML personnalisée) pour afficher des modèles 3D interactifs
• Plus simple que WebGL ou [Link]
• Attributs : src (GLB/glTF), auto-rotate, camera-controls, background-color

Cours du Pr. A. AZMANI - Module : Digital Skills