Support de Cours - M104 Web Statique 26-11-2024 v2

Office de la Formation Professionnelle et de la
Promotion du Travail
M104
Développer des sites Web
statiques
Y.OUBOURZIZ
PLAN
1. Créer une page web en HTML
2. Implémenter une page web statique

3. Mettre en forme une page web avec les
feuilles de style CSS
4. Maîtriser Bootstrap
5. Héberger un site Web
Créer une page
web en HTML
I. Introduction au langage HTML
II. Utiliser l'environnement de développement
III. Définir des éléments basiques d'une page HTML
4
1– Historique de l’HTML
 Le World Wide Web (WWW), ou simplement le Web, est un immense réseau de pages et de documents
interconnectés, accessibles via Internet. Il constitue le moyen le plus répandu pour partager et rechercher de
l'information.
• Ressources et liens : Chaque élément accessible sur le Web, qu'il s'agisse de texte, d'images, de vidéos ou
d'autres types de fichiers, est appelé une ressource. Ces ressources sont liées entre elles grâce à des liens
hypertextes (ou hyperliens), qui permettent de naviguer d'une page à l'autre.
• URL : Chaque ressource possède une adresse unique appelée URL (Uniform Resource Locator). Cette URL sert
à l'identifier et à la retrouver sur le Web.
• HTML : Les documents du Web sont principalement écrits en HTML (HyperText Markup Language). Ce langage
de balisage permet de structurer le contenu et de créer les liens hypertextes.
5
• Modèle client-serveur : Le Web fonctionne selon un modèle client-serveur.
• Les serveurs sont des ordinateurs qui stockent les pages Web et les mettent à disposition.
• Les clients sont les ordinateurs des utilisateurs (ordinateurs, smartphones, tablettes). Un
navigateur Web (comme Chrome, Firefox, Safari) est un logiciel installé sur le client qui
permet de demander des pages aux serveurs et de les afficher à l'écran.
Figure 1 A: les navigateurs les plus utilisés

Figure 1 B : Serveurs
6
• Le web a connu une grande évolution depuis son apparition :
Source : https://www.wddonline.com/2016/09/27/history-world-wide-web/
7
• Évolution Langage HTML
Période Événement clé Impact

Premier langage pour structurer les pages
1990-1992 Création d'HTML 1
web
Netscape Navigator popularise

1994 Prolifération de balises de présentation
HTML
1995-1996 HTML 2.0 Standardisation des bases
1997 HTML 3.2 et 4.0 Introduction des tables, styles et scripts
2000-2006 XHTML Plus de rigueur et d'interopérabilité
2007 à
HTML 5 Multimédia, applications web, sémantique
aujourd'hui
8
2– W3C
• Le rôle du W3C
Le World Wide Web Consortium (W3C) est une organisation internationale qui a pour mission de définir les
règles de base du Web. En d'autres termes, le W3C établit les normes que doivent respecter tous les sites
web pour garantir :
 L'accessibilité: Tous les utilisateurs, quel que soit leur matériel ou leur logiciel, doivent pouvoir
accéder à l'information.
 L'interopérabilité: Les différentes pages web doivent pouvoir s'afficher correctement sur tous les
navigateurs.
 La pérennité: Les contenus web doivent rester accessibles et compréhensibles dans le temps.
Pourquoi ces normes sont-elles importantes ?
Imaginez un monde où chaque navigateur interprète le code d'un site web de manière différente. Le résultat
? Un véritable chaos où certaines pages s'afficheront correctement sur un navigateur, mais seront illisibles
sur un autre.
Le rôle du W3C est justement d'éviter cette situation en définissant des standards communs. Ces
standards permettent :
• Une meilleure cohérence: Les données, les formats et les fonctionnalités sont les mêmes partout.
• Une meilleure compréhension: Les machines (navigateurs, moteurs de recherche) peuvent mieux
interpréter le contenu des pages.
• Une plus grande facilité de développement: Les développeurs n'ont pas à réinventer la roue à
chaque fois.
Figure 3 : logo du W3C

9
3– Propriétés des navigateurs
• Le rôle d’un navigateur
• Récupérer le code (généralement écrit en HTML, PHP, JavaScript ou d'autres langages de

programmation Web), à partir du serveur, puis l’interpréter et le restituer sous forme de page Web
graphique pour l'affichage.
• Interpréter l'adresse d'un site web (URL) et gérer les requêtes client / Serveur.
• Faciliter le développement et le test des pages Web..
• Le fonctionnement d’un navigateur
En utilisant le navigateur Web, l'utilisateur envoie une requête dite

"Requête HTTP" au serveur qui héberge le site web.
• Le serveur Web reçoit la requête de l'utilisateur qui contient l'adresse IP
du serveur, le port sur lequel tourne le serveur Web, la ressource
demandée et la méthode avec laquelle on exploite cette ressource.
• Le navigateur reçoit la page web demandée sous forme de code appelé :
Figure 4 : Communication client-serveur web en HTTP [4]
"code HTML" et l'interprète pour afficher des objets visuels.
Qu'est-ce que sont les outils de développement ?

1
0
3– Propriétés des navigateurs
• Le fonctionnement d’un navigateur
• Requête HTTP
Figure 4 : Communication client-serveur web en HTTP [4]

1
1
4– Architecture Client / serveur
• Définition d’un SE Client :

• Un système d'exploitation client est destiné à une machine «autonome», qui est exploitée par un seul utilisateur. Chaque système
d'exploitation, tels que Windows ou MacOS, est destiné à fonctionner sur son matériel spécifique.
• Certains ordinateurs autonomes peuvent avoir plusieurs systèmes d'exploitation qui fonctionnent dans une configuration dual boot,
qui permet à l'utilisateur de travailler sur des programmes complexes, si nécessaire.
• Un client peut être un système d'exploitation ou un logiciel conçu pour produire des demandes qui doivent être traitées par le
serveur. Le système client accède au serveur pour les demandes via un réseau. C’est le modèle Client/serveur illustré dans la Figure 23.
Architecture du Modèle Client/Serveur
Architecture Centralisée
1
2
• Catégories d’un SE Client :

• Il existe plusieurs catégorie de systèmes d’exploitation, Les clients peuvent être classés en trois groupes :
• Client Leger : c’est un SE qui ne peut pas intervenir dans le traitement des données et affiche simplement les résultats traités
par le serveur.
• Client Lourd : c’est un SE qui traite la plupart des données par lui-même.
• Client hybride : c’est un SE qui incorpore les caractéristiques des deux autres groupes. Il peut y avoir plusieurs ordinateurs
clients joints et connectés à un seul serveur. Ceci est fait pour faciliter l'accès aux ressources stockées sur le serveur.
https://zeetim.com/fr/quest-ce-quun-client-leger/
1
3
• Exemple de SE Client Windows et Linux

• La table 2 énumère des exemple des clients des SE Windows et Linux
Exemples des Clients Exemples des Clients Linux

Windows
Windows 95 Ubuntu
Windows 98 Debian
Windows vista Centos
Windows XP Redhat
Windows 8 Fedora
Windows 10 Open SUSE
Windows 11 Kali
Table 3 : Exemples des SE Client Windows et linux

1
4
• Définition d’un SE serveur :

• Un serveur est un système d'exploitation utilisé pour authentifier et traiter les demandes faites par les
systèmes clients. Le système client peut faire des demandes pour plusieurs types d'informations différentes allant
des pages Web aux ensembles de données. Le serveur répond à ces demandes et traite les informations
nécessaires.
• Exemples de SE serveur Windows et Linux
• La table 4 et 5 présentent une liste d’exemples des systèmes d’exploitation Windows et Linux.
Exemples des Exemples des

Serveurs Windows Serveurs Linux
Windows NT Ubuntu
Windows Server 2000 Debian
Windows Server 2003 Centos
Windows Server 2008 Redhat
Windows Server 2012 Fedora
Windows Server 2016 Open SUSE
Windows Server 2019 Arch Linux
Windows Server 2022 Table 5 : Exemple des SE Client linux

Table 4 : Exemple des SE Client Windows
Créer une page
web en HTML

1
6
I. Utiliser l'environnement de développement
1– Utilisation de Visual Studio Code
Ce que vous allez apprendre dans la séance prochaine :
• Utiliser Visual Studio Code comme éditeur de

code
• Installer des extensions de VS Code
1
7
Le logiciel Visual studio Code
• Visual Studio Code est un logiciel gratuit développé par Microsoft. Il fonctionne sous différents systèmes : Windows, Linus, Mac OS.
VS Code permet l’édition, la correction, le débogage et l’exécution du code source dans plusieurs langages informatiques : Visual Basic,
JavaScript, XML, Python, HTML, CSS, ….
VS code offre :
• Une présentation sophistiquée du code.
• Une auto-complétion du code source.
• Un ensemble d'extensions permettant de simplifier la programmation.
• La détection du langage de programmation par l'extension du fichier.
Figure 5 : Logo du logiciel VS Code [5]
[5] https://code.visualstudio.com/
1
8
Pour installer les extensions

Terminal pour écrire les commandes
Explorateur des fichiers
Figure 6 : Environnement de travail de VS Code

1
9
Les extensions de VS Code

• Les extensions de Visual Studio Code permettent d’accélérer le développement et favorisent le partage entre les
membres de l’équipe de développement. Le modèle
• d'extensibilité riche de VS Code permet aux «auteurs d'extensions» ainsi qu’aux utilisateurs d’intégrer facilement à
l’environnement de développement de VS code.
• Parmi les extensions connues de VS code [6] :
• Bracket Pair Colorizer : Cette extension permet d'identifier la correspondance entre des caractères et des couleurs.
• Better Comments : donne la possibilité de personnaliser la police et l'opacité des commentaires
• Snippets : Un snippet est un modèle qui peut être inséré dans un document. Il est inséré par une commande ou par
un texte déclencheur.
• CSS Peak : Permet de visualiser les ID et les classes CSS dans les fichiers html à partir des fichiers CSS respectifs
• GitLens : permet de découvrir rapidement qui, pourquoi et quand une ligne ou un bloc de code a été modifié.
Autrement dit, permet de remontez dans l'histoire pour mieux comprendre comment et pourquoi le code a évolué.
[6] https://marketplace.visualstudio.com/VSCode
2
0
Écrivez un mot clé et taper "Entrer" pour voir

les extensions disponibles
Figure 7 : Installation des extensions dans VS Code

Créer une page
web en HTML

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. Types de chemin d’accès
7. Liens en HTML
8. Balises multimédia (images, audio, vidéo)
9. Tableaux en HTML
10. Balises de structuration
III. Définir les éléments basiques d’une page HTML
1– Normes W3C
Les normes du W3C

• 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 des balises doivent être indiqués
Validation du code HTML avec W3C Validator : http://validator.w3.org/
23
2
4
2– Squelette d’une page HTML
• HTML
Le fait que les codes utilisés pour structurer, configurer et formater une page web soient appelés HyperText Markup
Language (HTML en abrégé), en bref:
• HyperTexte : Une référence oblique aux liens qui sont la caractéristique définissante des pages web.
• Markup : Les instructions qui spécifient comment le contenu d'une page web doit être affiché dans le navigateur.
• Language : L'ensemble des codes qui comprennent toutes les possibilités de balisage pour une page.
Mais même si le nom HTML est intimidant, les codes utilisés en HTML sont loin d'être difficiles à apprendre. Il n'y en
a qu'un petit nombre, et dans de nombreux cas, ils sont même logiques !"
2
5
• Squelette d’une page Web
• La structure de base d'un document HTML est assez simple à comprendre. Elle se compose de
quelques éléments clés qui définissent la structure globale de la 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 ➍ Contient tout ce que
HTML nous voulons afficher
dans la fenêtre du
navigateur
Figure 8 : Structure minimale d’un document html

2
6
Notion de balise
• Les éléments HTML sont les blocs de construction de base de la page web. Ils sont définis par des
balises.
• 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
start tag End tag
Figure 9 : Forme d’une balise HTML
2
7
• Notion d’encapsulation
Les balises doivent être correctement encapsulées :
<p>
<p> <b>
<b> Paragraphe
Paragraphe </p>
</b> </b>
</p>
Exemple 1 : Code correct Exemple 2 : Code incorrect
div
<div> div racine
<h1>titre</h1> h1
<h2>un sous titre</h2>
<p>un paragraphe avec h2
<em>des mots importants</em> h1 h2 p nœud
pour terminer avec une image p
<img src="logo.gif" alt="un logo"/> em
</p>
</div> img em img feuille
Exemple 3 : Code correct Figure 10 : Encapsulation des balises HTML

2
8
Les types d’éléments HTML

• Il existe deux types d'éléments : bloc (bloc) et en ligne (inline)
• Les éléments « bloc » s'étendent en largeur pour remplir totalement l'espace offert par son
conteneur. Par défaut, la boîte devient aussi large que son conteneur, occupant 100% de l'espace
disponible. Le nouvel élément bloc commence dans une nouvelle ligne.
• Les éléments « inline » se suivent en ligne
Bloc Inline
h1 img span a
p Figure 12 : Exemples d’éléments « inline »
div
Figure 11 : Exemples d’éléments « bloc »

2
9
• 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>
<input> <kbd> <label> <map> <object> <output> <q>
<samp> <script> <select> <small> <span> <strong> <sub>
<sup> <textarea> <time> <tt> <var>
3
0
3– Balises de base
Rappel:
<!DOCTYPE html>
<html>
<head>

<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>
<body>

</head>
</html>
Figure 13 : Structure générale d’une page HTML

3
1
• Structure de base d'une page HTML: L’entête du document HTML
Balise racine :
<!DOCTYPE html>
• Déclaration Doctype (aucune balise de fin).

• Obligatoire pour que les pages s’affichent correctement.
• Peut être écrite en majuscules ou minuscules.
• Cette balise spécifie la version du langage HTML (HTML5 dans notre cas).
Balise principale :
<html lang="en" dir="rtl" >
</html>
• Délimite le document HTML.

• L’attribut lang spécifie la langue de la page.
• L'élément racine d'une page web. Peut spécifier un certain nombre de métadonnées comme la langue et
l'orientation de la page.
3
2
• Structure de base d'une page HTML: L’entête du document HTML
 Section Head :
• C'est l'élément entête qui contient les métadonnées d'une page web. Cet
élément n’est pas visible sur la page web (informations sur la page).
• Exemple :
<head> </head>
 Section Body :
• C'est l'élément qui contient tous les composants visibles de la page web : les textes,
les paragraphes, les images, les tableaux, les animations…
• Exemple :
<body> </body>
3
3
 La balise <meta>
• Les métadonnées meta sont des données (informations) sur les données. La balise <meta> fournit
des métadonnées sur le document
• HTML. Les métadonnées ne seront pas affichées sur la page, mais seulement interprétables par les
machines.
Exemples de balises meta :
 Spécifie le format d'encodage du contenu.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 Cet élément est indispensable pour avoir une page web responsive (qui s'adapte à la taille de l'écran
utilisé).
<meta name="author " content=" x y z ">

<meta name="description " content=" Cours web ">
<meta name="keywords " content=" HTML,CSS,JavaScript ">
 Ces éléments fournissent des informations sur le document html (utilisées par les moteurs de
recherche)
3
4
 La balise <title>
• Définit le texte à afficher sur la barre du titre.
Exemples de balises title :
<title>Mon document</title>
Figure 14 : Titre du document HTML
 La balise <link>
 Utilisée pour relier un document HTML à des ressources externes (CSS, icônes, etc.).
 Placée dans la section <head> du document.
 <link> est une balise autonome (pas de balise de fermeture).
 rel (Relation) : Spécifie le type de relation entre le document HTML et la ressource. Exemples : stylesheet, icon, manifest, etc.
  href
Exemples de (Hyperlink
balises lnk : Reference) : Contient l'URL de la ressource externe.
Obligatoire pour indiquer le fichier lié (ex. CSS, favicon).
<link rel="stylesheet" href="style.css">
 type (Type MIME) : Définit le type de contenu de la ressource. Exemple : text/css pour les fichiers CSS.
 media : Spécifie les dispositifs pour lesquels la ressource est conçue.
 Exemples : screen, print, ou des requêtes spécifiques comme (max-width: 600px).

3
5
 La balise <link>
 Utilisée pour relier un document HTML à des ressources externes (CSS, icônes, etc.).
 Placée dans la section <head> du document.
 <link> est une balise autonome (pas de balise de fermeture).
 Exemples de balises lnk :
<link rel="stylesheet" href="style.css">
 Les attribues :
 rel (Relation) : Spécifie le type de relation entre le document HTML et la ressource.

 Exemples : stylesheet, icon, manifest, etc.
 href (Hyperlink Reference) : Contient l'URL de la ressource externe.
 Obligatoire pour indiquer le fichier lié (ex. CSS, favicon).
 type (Type MIME) : Définit le type de contenu de la ressource.
 Exemple : text/css pour les fichiers CSS.
 media : Spécifie les dispositifs pour lesquels la ressource est conçue.
 Exemples : screen, print, ou des requêtes spécifiques comme (max-width: 600px).
3
6
Exemple d’une page HTML vide
<!DOCTYPE html>
<html lang="fr" dir="rtl">
<head>
<title>Mon document</title>
</head>
<body>

</body>
</html>
3
7
Balise Fonction principale Exemple

<html> Racine de tout document HTML. <html>...</html>
Contient des métadonnées sur la page (titre, encodage, liens
<head> <head><title>Ma page web</title></head>
vers des fichiers CSS, etc.).
<title> Définit le titre de la page, affiché dans l'onglet du navigateur. <title>Mon titre de page</title>
Fournit des métadonnées supplémentaires sur la page <meta name="description" content="Une description
<meta>
(description, mots-clés, viewport, etc.). de ma page">
<body> Contient le contenu visible de la page (textes, images, etc.). <body><h1>Mon premier titre</h1></body>
<h1> à <h6> Définissent les niveaux de titre (h1 étant le plus important). <h1>Titre principal</h1>
<p> Définit un paragraphe. <p>Ceci est un paragraphe.</p>
<a href="https://www.exemple.com">Visiter mon
<a> Crée un lien hypertexte vers une autre page.
site</a>
<img> Insère une image. <img src="image.jpg" alt="Une belle image">

<ul> Crée une liste non ordonnée. <ul><li>Item 1</li><li>Item 2</li></ul>
<ol> Crée une liste ordonnée. <ol><li>Premier item</li><li>Deuxième item</li></ol>
<li> Définit un élément de liste. <li>Un élément de liste</li>
<table><tr><th>En-tête</th></tr><tr><td>Cellule
<table> Crée un tableau.
1</td><td>Cellule 2</td></tr></table>
<tr> Définit une ligne dans un tableau. <tr><td>Données</td></tr>
<td> Définit une cellule de données dans un tableau. <td>Données</td>
3
8
Les paragraphes en HTML

• La balise <p> désigne un nouveau paragraphe
• L'attribut "title" permet d'afficher un infobulle quand la souris survole le paragraphe
Exemple de déclaration d’un paragraphe :

<p title="infobulle sur le paragraphe">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Enim tortor at auctor urna. Dignissim enim sit amet venenatis.
Varius sit amet mattis vulputate enim. Urna et pharetra pharetra massa massa.
</p>
3
9
Les paragraphes en HTML

• les balises HTML de gestion du texte
• <strong> : Définit un texte important, généralement affiché en

gras.
• <em> : Définit un texte à mettre en évidence, généralement en
italique.
• <u> : Définit un texte souligné.
• <del> : Définit un texte barré.
• <mark> : Définit un texte mis en surbrillance (souvent utilisé pour
mettre en évidence).
• <small> : Définit un texte en plus petit.
• <big> : Définit un texte en plus grand.
• <code> : Définit un fragment de code informatique. <p> Ce texte contient différentes
<strong>balises</strong> pour manipuler le <em>texte</em>
• <dfn> : Définit un terme devant être défini dans le texte. : </p>
• <cite> : Définit une citation ou une référence à une source.
4

0
 Les titres en HTML

• Il existe 6 niveaux de titres (headers) en HTML. Les balises <h1>, <h2>, …<h6> permettent l'affichage de ces
titres.
Exemple :
<h1>Niveau1</h1>
<h2>Niveau2</h2>
<h3>Niveau3</h3>
<h4>Niveau4</h4>
<h5>Niveau5</h5>
<h6>Niveau6</h6>
Figure 15: les titres en HTML

4
1
4– Les couleurs
Les couleurs en HTML

En HTML, On peut spécifier les couleurs de 3 manières différentes :
• En utilisant la valeur Hex : HEX est un système de numérotation hexadécimale des couleurs (basé sur les chiffres
décimaux de 0 à 9 et les lettres latines A à F). La conception Web utilise le code de couleur hexadécimal sous forme
#RRGGBB : RR est le rouge, GG est le vert et BB est le bleu. Chaque fraction de couleur est comprise entre 00 et FF.
• En utilisant les noms des couleurs : Les noms des couleurs doivent être spécifiés en anglais (blue, red, etc.).
• En utilisant la valeur RGB (Red, Green, Blue) : Le code couleur RGB est représenté sous forme de 3 couples de codes en
chiffres compris entre 0 et 255. Les trois codes représentent respectivement le dosage du rouge, du vert et du bleu.
Couleurs du web :
Exemples de sites pour avoir les codes des couleurs
• https://www.w3schools.com/colors/colors_picker.asp
• https://htmlcolorcodes.com/
4

2
4– Les couleurs
Les couleurs en HTML (Exemples)

• L’attribut bgcolor : permet de préciser la couleur utilisée pour le fond du document :
<body bgcolor="#eab676">
<body bgcolor="rgb(234,182,118)">
• La balise <font> (obsolète)
<font color="FF0000">Le code #FF0000 est la même chose que la couleur rouge notée
«red».</font>
• La balise <p>
<p style="color:#8ebf42;"> C'est un texte vert</p>
4

3
4– Les couleurs
Les couleurs en HTML (Exemples)

• La balise span :
La balise <span> est un conteneur en ligne utilisé pour marquer une partie d'un texte ou une partie d'un document. Elle est
facilement stylisée par CSS ou manipulée avec JavaScript.
<span style="color:red">Le texte est maintenant en rouge.</span>
<span style="color:#556B2F">Voici le code pour le vert olive foncé.</span>
<span style="color:#745"> Le code 745 est l'abréviation de 774455.</span>
4
4
5– Les listes
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
4
5
5– 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 16 : Liste non ordonnée
<ol>
<li type="I">Élément1</li>
Exemple de liste ordonnée <li type="i">Élément2</li>
<li type="A">Élément3</li>
<li type="a">Élément4</li>
</ol>
Figure 17 : Liste ordonnée 1
<ol>
<li>Élément1</li>
Exemple de liste ordonnée
<li>Élément2</li>
<li value="1">Élément3</li>
<li>Élément4</li>
</ol>
Figure 18 : Liste ordonnée 2

4
6
5– Les listes
• Les listes de définition

• La liste de définition est délimitée par les balises <dl> (Definition List),
• L'élément DT (Definition Title) est utilisé pour donner le titre de la définition et
l'élément DD pour donner la définition.
• Pour les deux éléments DT et DD, la balise fermante est optionnelle.
Exemple :
<dl>
<dt>Langages</dt>
<dd>C++</dd>
<dd>Java</dd>
<dd>Python</dd>
<dt>SGBD</dt>
<dd>MySQL</dd>
<dd>MS SQL Server</dd>
<dd>Oracle</dd> Figure 19 : Liste de définition
</dl>
4
7
6– Types de chemins d’accès
Chemins d’accès
• Le chemin d'accès d'un fichier (ou d'un répertoire) est une chaîne de caractères représentant une liste de noms de
répertoires séparés par des barres obliques. Cette chaine décrit la position de ce fichier (ou répertoire) dans le
système de fichiers.
• Généralement, un chemin standard peut être constitué de trois composants :

• Une lettre de volume ou de lecteur suivie du séparateur de volumes (:).
• Un nom de répertoire. Le caractère de séparation de répertoires sépare les sous-répertoires au sein de la
hiérarchie des répertoires.
• Un nom de fichier. Le caractère de séparation de répertoires sépare le chemin et le nom de fichier.
• Types de chemins d’accès :

• Le chemin absolu se rapporte toujours au dossier parent (racine).
• Le chemin relatif basé sur la structure des dossiers.
4

8
6– Types de chemins d’accès
Chemins d’accès
Exemples :
Chemin Description
C:\Documents\images\logo.png Chemin de fichier absolu à partir de la racine du lecteur C: .
\Program Files\utilities\projet.exe Chemin absolu à partir de la racine du lecteur actif.
docs\charte.pdf Chemin relatif à un fichier dans un sous-répertoire du répertoire actif.
Chemin relatif à un fichier dans répertoire qui est un pair du répertoire

..\images\logo.png
actif.
C:\Projets\html\index.html Chemin d’accès absolu à un fichier à partir de la racine du lecteur C:
C:Projets\html\index.html Chemin d’accès relatif à partir du répertoire actif du C: lecteur.

4
9
7– Les liens
La balise <a>
La balise <a> permet de créer un lien hypertexte, c'est-à-dire rendre une partie du texte active suite au clic de
l’utilisateur. Pour chaque lien on associe une adresse destination où l'utilisateur sera envoyé après son clic.
Cette balise permet également de créer des liens à l'intérieur d'un document ainsi que l'envoi d'un mail.
Les principaux attributs des liens hypertextes sont :
• href : la cible du lien
• title : affiche une info bulle sur le lien.
• Target :
_blank : ouverture de la page cible dans une nouvelle fenêtre.
_parent : ouverture de la page cible dans le cadre parent (de niveau immédiatement supérieur).
_self : (valeur par défaut), ouverture de la page cible dans le cadre d'appel.
_top : ouverture de la page cible dans la fenêtre hôte (par-dessus le FRAMESET).
5

0
7– Les liens
• Exemples de liens
• Lien vers un autre document HTML(Lien relatif)
<a href="cible.html" title="Page cible">Cliquer ici pour aller à la page</a>
• Lien vers une url (Lien absolu)
<a href="https://www.ofppt.ma/" title="OFPPT">Site officiel de l'OFPPT</a>
• Un lien qui s'ouvre dans une nouvelle fenêtre
<a href="http ://www.ofppt.ma/" title="OFPPT" target="_blank">Site officiel de l'OFPPT</a>

5
1
7– Les liens
• Exemples de liens
• Lien vers un emplacement dans le même document (Lien interne)


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

<a href="#haut">haut de la page </a>
• Lien pour envoyer un mail :
<a href="mailto:[email protected]"> Contactez-moi par email en cliquant sur ce lien</a>
• Lien hypertexte sur une image :
<a href="http ://getbootstrap.com/" title="Bootstrap">

<img src="../../images/boostrap-logo.png" width="150" height="151" alt="Bootstrap" class="img-
responsive" />
</a>
5

2
8– Les balises multimédia (images, audio, vidéo)
La balise <img>
La balise <img> permet d’insérer une image dans une page web.
• L’attribut src définit le chemin de l'image source
• l’attribut alt le texte alternatif si l'image n'est pas affichée.
• Les attributs width et height définissent la taille de l’image (en pixels)
Exemple :
<img src="../Photos/ofppt.png" alt="Image non trouvée" width="160" height="100">
<img src="https://www.ofppt.ma/themes/custom/ofppt/assets/images/logo.png" alt="Image non

trouvée" width="160" height="100">
5
3
• La balise <picture>
• L'élément HTML <picture> permet d'afficher différentes images pour différents appareils ou tailles d'écran. Le
navigateur choisira la source la plus pertinente selon :
• La disposition de la page
• L'appareil utilisé
• Les formats pris en charge
• Si aucune correspondance n'est trouvée parmi les éléments <source>, c'est le fichier défini par l'attribut src de
l'élément <img> qui sera utilisé.
Exemple :
<picture>
<source srcset="../Photos/ofppt.jpg" media="(min-width : 600px)">
<img src="..//Photos/officeFP.jpg" alt="Pas d'image" width="200px" height="140px">
</picture>
• Si la largeur de l'écran dépasse 600 px, c'est la source « ofppt.jpg » qui prend l'objet <picture>.
5

4
La balise <audio>
L'élément <audio> permet de lire un fichier audio dans la page HTML. Les attributs utilisés avec cette balise sont :
• Controls : pour afficher les boutons play, stop, preview…
• Autoplay : pour démarrer la lecture automatique de l'audio lors du chargement de la page web.
Le navigateur essaie de lire la première source. En cas d'erreur, il passe à la deuxième source. Si le navigateur ne
prend pas en charge l'élément <audio>, il affiche le
message en bas.
Exemple :
<audio controls autoplay>

<source src="son.ogg" type="audio/ogg">
<source src="son.mp3" type="audio/mpeg">Votre navigateur ne supporte pas la balise "audio".
</audio>
5

5
La balise <video>
L'élément <video> permet d'incorporer une vidéo dans une page Web. Les attributs utilisés avec cette balise sont :
• Controls : pour afficher les boutons play, stop, …
• Autoplay : pour démarrer la lecture automatique de la vidéo lors du chargement de la page web.
• Poster : spécifie une image à afficher pendant le téléchargement de la vidéo. Si cet attribut n’est pas renseigné, la première
image de la vidéo sera utilisée à sa place.
Le navigateur essaie de lire la première source. En cas d'erreur, il passe à la deuxième source. Si le navigateur ne prend pas en
charge l'élément <video>, il affiche le message en bas.
Exemple :
<video width="320" height="240" controls autoplay

poster="/images/poster.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg"> Votre navigateur ne
supporte pas la balise "video".
</video>
5
6
La balise <iframe>
La balise <iframe> permet d’afficher une vidéo
Pour ce faire, on peut utiliser l’identifiant de la vidéo pour y faire
référence dans le code HTML.
Exemple :
<iframe width="640" height="360" src="https

://www.youtube.com/embed/Ma1vSev07ug">
</iframe>
5
7
La balise <object>
L'élément <object> est une solution polyvalente pour inclure des objets génériques.
Cet élément permet aux auteurs HTML de spécifier tout ce qui est requis par un objet pour sa
présentation par un agent utilisateur.
Exemple 1 : intégrer un document HTML dans un autre document HTML
<object data = "data/test.html" type = "text/html" width = "300"

height = "200"> alt : <a href =
"data/test.html">test.html</a>
</object>
L'attribut « alt » apparaitra si le navigateur ne prend pas en charge la balise d'objet.
Exemple 2 : intégrer un document PDF dans un document HTML
<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">

alt : <a href = "data/test.pdf">test.html</a>
</object>
5
8
8– Les tableaux
La balise <table>
Pour insérer un tableau, on utilise la balise <table>.
À l’intérieur de la balise <table>, la balise <tr> (table row) signifie une ligne.
Chaque ligne est composée d’une ou plusieurs cellules de données définies par la balise <td>.
Pour l’entête du tableau, on utilise la balise <th> (table header).
L’attribut Border permet de fixer la largeur des bordures des cellules.
Exemple :
<table border="1">
<caption align="bottom">Liste des employés</caption>
<tr>
<th>Nom</th><th>Prénom</th><th>Age</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> Figure 20 : Exemple de tableau en HTML
5

9
8– Les tableaux
Espacement ses cellules

L’attribut "cellspacing" permet de définir l'espacement entre les cellules du tableau.
l'attribut "cellpadding" permet de définir l'espacement entre le contenu de la cellule et ses
bords.
Exemple :
<table border="1" cellspacing=10 cellpadding=5>
cellspacing
cellpadding
Figure 21 : Espacement des cellules du tableau

6
0
8– Les tableaux
Division des lignes et des colonnes (fusion des cellules)

Les attributs colspan et rowspan indiquent sur combien de colonnes et de lignes s'étend la cellule.
Exemple 1: On souhaite que la première cellule du tableau prenne toute la largeur de la ligne. Elle doit donc déborder
sur 3 cellules horizontales : Colspan=3
<table width=60% border=1>

<tr>
<td colspan=3>cellule 1</td>
</tr>
<tr>
<td width=33%>cellule 2</td>
<td width=33%>cel 2</td> Figure 22 : Exemple de tableau avec fusion des colonnes
<td width=34%>cel 4</td> </tr>
</table>
Exemple 2: On souhaite que la première colonne du tableau déborde sur 2 lignes : rowspan=2
<table width=60% border=1>
<tr>
<td width=33% rowspan=2>cellule 1</td>
<td width=33%>cel 2</td>
</tr>
<tr>
<td width=33%>cel 4</td> Figure 23 : Exemple de tableau avec fusion des lignes
</table>
6
1
9– Balises de structuration
• Les balises <div>

• La balise HTML <div> (ou division) est un conteneur générique : elle peut contenir n’importe quel élément HTML.
• Cet élément, de type bloc, n'a aucun effet sur le contenu ou la mise en page tant qu'il n'est pas mis en forme d'une
manière explicite (en utilisant un style CSS).
<div> est très souvent utilisé avec la mise en page CSS d'une page Web.
• Les balises <span>

• La balise <span> ne produit aucun effet visuel mais sert à appliquer un effet de style CCS aux éléments qu’elle
contient (un texte par exemple).
6
2
Les balises sémantiques

Une page web est souvent composée d'un menu, d'une sidebarre et d'un pied de page.
Tous ces ensembles peuvent (et doivent) être compris dans des balises qui vont structurer la page. Un élément
sémantique décrit clairement son sens au navigateur et au développeur.
Des exemples d'éléments non-sémantiques :
• <div> et <span> - ne disent rien sur leur contenu.
Des exemples d'éléments sémantiques :
• <form>, <table> et <img> - contenu clairement défini.
6

3

Plusieurs sites Web utilisent les balises comme : <div id="nav">, <div class="header">, ou <div id="footer">, pour indiquer les liens de
navigation, en-tête, pied de page.
HTML5 propose des éléments sémantiques permettant de définir clairement les différentes parties d'une page web :
• <header>
• <nav>
• <section>
• <article>
• <aside>
• <figure> / <figcaption>
• <footer>
• <details> / <summary>
• <mark>
• <time> Figure 24 : Les éléments sémantiques [8]
6

4

Figure 24 : Les éléments sémantiques [8]

6

5

Ordre des éléments:
Figure 24 : Les éléments sémantiques [8]

6
6
Les balises <header> et <footer>

Une page est généralement composée d'un header et d'un footer.
• Le footer reprend en général des liens vers les crédits et les mentions légales, et aussi vers certaines pages qui
ne sont pas listées dans le menu :
• Le header peut comprendre (liste non exhaustive) : un menu, un logo, des liens vers des réseaux sociaux, …
Exemples :
<header>
<h1>Titre de la partie</h1>
<p>Publié par CDC</p>
<p>Informations supplémentaires</p>
</header>
<p>....</p>
<footer>
<p>Auteur: CDC NTIC<br>
<a href="mailto:[email protected]">[email protected]</a></p>
</footer>
6
7
• La balise <nav>
• La balise <nav> (utilisée avec une balise <ul> ou <ol>) permet de spécifier les éléments de navigation de la page (le menu).
• Le menu consiste en une liste d'éléments permettant de naviguer entre plusieurs pages du même site, ou bien vers plusieurs
sections de la page.
• Exemple :
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="inscription.html">Inscription</a></li>
<li><a href="a_propos.html">À propos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
6
8
Les balises <main> et <section>

La balise <main> spécifie le contenu principal de la page web.
La balise <section> permet de segmenter le contenu en plusieurs sections.
Exemple :
<main>
<p>Texte d'introduction de mon contenu.</p>
<section>
<h2>Titre de ma section</h2>
<p>Texte de ma section.</p>
</section>
<section>
<h2>Titre de ma section</h2>
<p>Texte de ma section.</p>
</section>
</main>
6
9
La balise <article>
La balise <article> permet d'incorporer du contenu annexe, comme par exemple :
• des articles de blog,
• des produits,
• des commentaires,
• …
Exemple :
<main>
<p>Texte de mon contenu. Voilà des articles liés à ma page :</p>
<div>
<article>
<h2>Titre de mon article</h2>
<p>Texte de mon article.</p>
</article>
<article>
<h2>Titre de mon article</h2>
<p>Texte de mon article.</p>
</article>
</div>
</main>
7
0
La balise <aside>
La balise <aside> permet d'afficher du contenu qui n'a pas de rapport direct avec le contenu principal, souvent
représenté comme une sidebarre :
Exemple :
<main>
<p>Texte de mon contenu.</p>
<aside>
<p>.</p>
Texte sans rapport direct
</aside>
</main>
Utilisations courantes de <aside> :

• Publicités ou bannières promotionnelles
• Liens vers des articles ou des blogs connexes
• Widgets (météo, réseaux sociaux)
• Informations de contact
• Citations ou résumés de texte
Implémenter une
page web statique
I. Réaliser une page web statique
II. Intégrer des formulaires dans une page web
02 Implémenter une page web statique
Réaliser une page

web statique
01 - Fonctionnement d'une page web statique
Fonctionnement d’une page web

• Reprenons le schéma présenté dans la partie 1 (slide 13) :
• Lors de la consultation d'une page web statique, le serveur HTTP envoie le contenu du fichier qui contient les
composants de la page à afficher. Le navigateur interprète le contenu (sous forme de balises HTML) et l’affiche au
client.
PARTIE 2
Copyright - Tout droit réservé - OFPPT 75

7
4
En HTML, Il existe cinq façons différentes de créer des dispositions des éléments :
• Tableaux HTML (non recommandé)
• Propriété float CSS (méthode ancienne)
• Flexbox CSS
• Framework CSS (W3.CSS ou Bootstrap)
• Grille CSS
Le Responsive Web Design consiste à utiliser HTML et CSS pour redimensionner, masquer, rétrécir
ou agrandir automatiquement un site Web afin de le rendre compatible à tous les appareils
(ordinateurs de bureau, tablettes et téléphones)
7
5
Réalisation d’un site web statique avec HTML5
Exemple : Afficher différentes images en fonction de la largeur du navigateur

<picture>
<source srcset="img_smallflower.jpg" media="(max-width : 600px)">
<source srcset="img_flowers.jpg" media="(max-width : 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
NB : n’oubliez pas de mettre la balise suivante dans la balise <head>

7
6
Réalisation d’un site web statique avec HTML5
• Exemple : Taille du texte réactif

• La taille du texte peut être définie avec une unité "vw", ce qui signifie la "largeur de la fenêtre". De cette façon, la taille du texte suivra la
taille de la fenêtre du navigateur :
<h1 style="font-size :10vw">Bonjour</h1>
C’est un pourcentage
02 Implémenter une page web statique
Intégrer des formulaires

dans une page web
1. Balise <form>
2. Champs de saisie (Input, TextArea)
3. Balises de choix (RadioButton, CheckBox,
Select)
4. Balises HTML5 pour les formulaires
5. Validation automatique
6. Boutons
02 - Intégrer des formulaires dans une page web
Balise <form>
• Balise <form>
• Un formulaire est une section d'un document web qui permet à un utilisateur de fournir des informations via des
contrôles interactifs L'élément HTML <form> permet de déclarer un formulaire
• L'attribut "action" spécifie la ressource qui va recevoir les données du formulaire pour les traiter (un script)
• L'attribut "method" spécifie la méthode d'envoi des données
• On distingue deux méthodes :
 GET : permet d'envoyer les données sous forme de chaine de paramètres à travers l'URL. Les données sont visibles dans la
barre d'adresse.
 POST : permet d'envoyer les données (invisibles) à travers une requête HTTP.
Exemple :
<form action="authentification.php" method="post">

</form>
Copyright - Tout droit réservé - OFPPT 82

7
9
Champ de saisie <input>
• Champ de saisie <input>

• L'élément <input> Permet de coder différents types d'entrée pour un formulaire, selon la valeur de l'attribut type.
• Exemple :
<form action="authentification.php" method="post">

<input type="text" id="nom" name="nom">
</form>
Types d’Input HTML

<input type="button"> <input type="image">
<input type="checkbox"> <input type="month"> <input type="submit">
<input type="color"> <input type="number"> <input type="tel">
<input type="date"> <input type="password"> <input type="text">
<input type="datetime-local"> <input type="radio"> <input type="time">
<input type="email"> <input type="range"> <input type="url">
<input type="file"> <input type="reset"> <input type="week">
<input type="hidden"> <input type="search">
8
0
Champ de saisie <input>
• Champ de saisie <input>

• Type texte
Pour retourner à la
ligne
<form>
<label for="pr">Prénom :</label><br>
<input type="text" id="pr" name="pr"><br>
<label for="nf">Nom de famille :</label><br>
<input type="text" id="nf" name="nf">
</form> Figure 25 : Champ input
Type password
<form>
<label for="nomutil">Nom d'utilisateur :</label><br> Figure 26 : Champ de mot de passe
<input type="text" id="nomutil" name="nomutil"><br>
<label for="pwd">Mot de passe :</label><br>
<input type="password" id="pwd" name="pwd">
</form>
8
1
Champ de saisie <textarea>
• Champ de saisie <textarea>

• L'élément <textarea> permet d'afficher et saisir un texte en plusieurs ligne.
• Exemple :
<textarea>
L'Office de la formation professionnelle et de la promotion du travail (OFPPT) est un
opérateur public en
formation professionnelle.
</textarea>
Figure 27 : Champ textarea

8
2
Balises de choix (RadioButton)
• Type radio
Les boutons radio permettent à un utilisateur d’en sélectionner SEULEMENT UN parmi un nombre limité de choix :
<form>
<input type="radio" id="mas" name="sexe" value="Masculin">
<label for="mas">Masculin</label><br>
<input type="radio" id="fem" name="sexe" value="Féminin">
<label for="fem">Féminin</label><br>
</form> Figure 28 : Champ bouton radio
• Type number
<form>
<label for="quant">Quantité :</label>
<input type="number" id="quant" name="quant" min="0" max="100" step="10"
value="30"> Figure 29 : Champ number
</form>
8
3
Balises de choix (checkbox)
• Type checkbox
• <input type="checkbox"> définit une case à cocher.
• Les cases à cocher permettent à un utilisateur de sélectionner ZERO ou PLUS d'options d'un nombre limité de choix.
<form> J’ai un vélo

J’ai une voiture
<input type="checkbox" id="vehicule1" name="vehicule1" value="velo"> J’ai un bateau
<label for="vehicule1"> J'ai un vélo</label><br>

Figure 30 : Champ Checkbox
<input type="checkbox" id="vehicule2" name="vehicule2" value="voiture">
<label for="vehicule2">J'ai une voiture</label><br>
<input type="checkbox" id="vehicule3" name="vehicule3" value="bateau">
<label for="vehicule3"> J'ai un bateau</label>
</form>
8
4
Balises de choix (select)
• Type select
L'élément HTML <select> représente un contrôle qui fournit un menu d'options :
• L’attribut id associe un identifiant unique à la liste
• L’attribut name représente le nom du point de données associé lors de la soumission au serveur.
• L’attribut multiple spécifie si plusieurs options peuvent être sélectionnées, et size spécifie combien d'options doivent être
affichées à la fois
• L’élément <option> définit une option de la liste
Chaque élément <option> doit avoir un attribut value contenant la valeur de données à soumettre au serveur lorsque cette
option est sélectionnée. L’attribut selected sur un élément <option> le rend sélectionné par défaut lors du premier chargement de
la page.
<label for="langage">Sélectionner un langage de programmation:</label>

<select name="lg" id="langage">
<option value="">--Choisir -</option>
<option value="Python">Python</option>
<option value="CSharp">C#</option>
<option value="java">java</option>
</select>
8
5
Balises HTML5 pour les formulaires
• Type button
• Définit un bouton
<input type="button" onclick="alert('Bonjour!')" value="Clic ici!">
• Type color
• Définit un sélecteur de couleur
<form>
<label for="coulfav">Sélectionner votre couleur préférée :</label>
<input type="color" id="coulfav" name="coulfav">
</form>
• Type range
• Définit un contrôle pour entrer un nombre dont la valeur exacte n'est pas importante (comme un contrôle curseur). Plage par
défaut est de 0 à 100.
<form>
<label for="vol">Volume (entre 0 and 50) :</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
8
6
Type date
Définit un sélecteur de date. La valeur comprend l'année, le mois et le jour
<form>
<label for="anniv">Anniversaire :</label>
<input type="date" id="anniv" name="anniv">
</form>
Type time
Définit un contrôle pour saisir une heure (pas de fuseau horaire)
<form>
<label for="rdv">Sélectionner une heure :</label>
<input type="time" id="rdv" name="rdv">
</form>
Type datetime-local
Spécifie un champ de saisie de date et d'heure sans fuseau horaire
<form>
<label for="anniv">Anniversaire (date et heure) :</label>
<input type="datetime-local" id="anniv" name="anniv">
</form>
8
7
Type week
Définit un contrôle de sélection de la semaine et l’année (sans fuseau horaire)
<form>
<label for="sem">Choisir une semaine :</label>
<input type="week" id="sem" name="sem">
</form>
Type month
Définit un champ de sélection du mois et de l'année. Le format est « AAAA-MM »
<form>
<label for="anniv">Anniversaire (mois et année) :</label>
<input type="month" id="anniv" name="anniv">
</form>
8
8
Type file
Définit un champ de sélection de fichier et un bouton « Parcourir » pour les téléchargements de fichiers.
<form>
<label for="fichiers">Sélectionner un fichier :</label>
<input type="file" id="fichiers" name="fichiers">
</form>
Type email
Utilisé pour bénéficier de la possibilité de validation d'Email et de voir les boutons raccourcis d'un clavier spécifique si on utilise la page
web sur un smartphone.
<form>
<label for="email">Saisir votre email :</label>
<input type="email" id="email" name="email">
</form>
C8
o9
p
y
r
i
g
h
t
- Type tel
T
o Utilisé pour les champs de saisie qui doivent contenir un numéro de téléphone.
u
t
d <form>
r
o <label for="phone">Saisir un numéro de téléphone :</label>
i
t
r <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
é
s </form>
e
r
v Type url
é
- Utilisé pour les champs de saisie qui doivent contenir une adresse URL.
O
F <form>
P
P
T <label for="acc">Ajouter votre page d'accueil :</label>
<input type="url" id="acc" name="acc">
</form>
Type search
Définit un champ de recherche (comme une recherche dans un site ou une recherche Google.
<form>
<label for="gsearch">Recherche Google :</label>
<input type="search" id="gsearch" name="gsearch">
</form>
9
0
L'attribut value
L'attribut value spécifie une valeur initiale pour un champ d'entrée.
<form>
<label for="fil">Filière :</label><br>
<input type="text" id="fil" name="fil" value="Développement"><br>
<label for="grp">Groupe :</label><br>
<input type="text" id="grp" name="grp" value="101">
</form>
L'attribut readonly
L'attribut readonly spécifie qu'un champ d'entrée est en lecture seule.
<form>
<label for="fil">Filière :</label><br>
<input type="text" id="fil" name="fil" value="Développement" readonly><br>
<label for="grp">Groupe :</label><br>
<input type="text" id="grp" name="grp" value="101">
</form>
9
1
L'attribut maxlength
L'attribut maxlength spécifie le nombre maximum de caractères autorisés.
<form>
<label for="fname">Nom :</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN :</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
L'attribut multiple
L'attribut multiple spécifie que l'utilisateur est autorisé à saisir plusieurs valeurs. Il fonctionne avec les types d'entrée suivants : e-mail et fichier.
<form>
<label for="fichiers">Sélectionner un fichier :</label>
<input type="file" id="fichiers" name="fichiers" multiple>
</form>
9
2
L'attribut pattern
• L'attribut pattern spécifie une expression régulière par rapport à laquelle la valeur du champ de saisie est vérifiée lorsque le
formulaire est soumis.
• L'attribut pattern fonctionne avec les types d'entrée suivants : texte, date, recherche, URL, tél, e-mail et mot depasse.
<form>
<label for="code_pays">Code pays :</label>
<input type="text" id="code_pays" name="code_pays" attern="[A-Za-z]{3}" title="Code pays à trois lettres">
</form>
L'attribut placeholder
• L'attribut placeholder spécifie brièvement un indice qui décrit la valeur attendue d'un champ de saisie (une valeur d'échantillon ou une brève
description du format
attendu).
• L'attribut placeholder fonctionne avec les types d'entrée suivants : texte, recherche, URL, tél, e-mail et mot de passe.
<form>
<label for="phone">Saisir un numéro de téléphone :</label>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
9
3
L'attribut required
• L'attribut required spécifie qu'un champ de saisie doit être rempli avant de soumettre le formulaire.
• L'attribut required fonctionne avec les types d'entrée suivants : texte, recherche, URL, tél, e-mail, mot de passe, sélecteurs de date,
numéro, case à cocher, radio et fichier.
<form>
<label for="username">Nom complet :</label>
<input type="text" id="username" name="username" required>
</form>
L'attribut step
• L'attribut step spécifie les intervalles de numéros légaux pour un champ de saisie.
• L'attribut step fonctionne avec les types d'entrée suivants : number, range, date, datetime-local,
month, time et week.
Exemple : si step = "3", les nombres légaux peuvent être -3, 0, 3, 6, etc.
<form>
<label for="points">Points :</label>
<input type="number" id="points" name="points" step="3">
</form>
9
4
• L'attribut autofocus
• L'attribut autofocus spécifie qu'un champ de saisie doit automatiquement obtenir le focus lorsque la page est chargée.
<form>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Prénom :</label><br>
<input type="text" id="lname" name="lname">
</form>
• L'attribut list
• L'attribut list fait référence à un élément <datalist> qui contient des options prédéfinies pour un élément <input>.
<form>
<input list="navigateurs">
<datalist id="navigateurs">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
9
5
Validation automatique
 Types de validation des formulaires HTML

La validation d’un formulaire consiste à vérifier si les données saisies par l’utilisateur sont correctes et conformes au fonctionnement
attendu. Si ce n'est pas le cas, la page
doit émettre des messages d'erreur.
Exemples de critères de validation :
• champ de saisi obligatoire
• format de l’email ou du numéro de téléphone correct
• taille et format d’un champ de mot de passe (nombre de caractères
• présence d’un caractère spécial, lettre majuscule, …)
 Les types de validation :

La validation côté client : effectuée au niveau du navigateur, avant de soumettre les données au serveur. Cette validation peut être
mise en œuvre de deux manières :
La validation JavaScript
La validation par les fonctions intégrées dans HTML5
La validation côté serveur : opérée sur le serveur, après soumission des données ont été soumises et avant l’enregistrement des
données dans la base de données.
9
6
Validation automatique
• Validation des formulaires par les fonctions intégrées dans HTML5

1. Utilisation de l’attribut required : rendre une entrée obligatoire et empêcher la soumission du formulaire si l’entrée est vide.
2. Validation selon une expression régulière avec l’attribut pattern : utile pour valider le numéro de téléphone par exemple
3. Limitation de la taille des entrées avec les attributs minlength et maxlength (pour les champs input et textarea) et les attributs
min et max pour le champ number
4. L’attribut Novalidate du formulaire (lorsqu'il est présent) précise que les données du form ne doivent pas être validées lors de son
envoi.
9
7
Boutons
• Type submit
• <input type="submit"> définit un bouton pour soumettre des données de formulaire à un gestionnaire de formulaire.
• Le gestionnaire de formulaires est généralement une page de serveur avec un script pour le traitement des données d'entrée.
<form action="/action_page.php">
<input type="text" id="fname" name="fname"><br>
<input type="text" id="lname" name="lname"><br>
<br>
<input type="submit" value="Envoyer">
</form> Figure 31 : Bouton Submit
9
8
Boutons
• Type reset
• <input type="reset"> définit un bouton de réinitialisation qui réinitialisera toutes les valeurs du
formulaire à leurs valeurs par défaut.
<form action="/action_page.php">
<input type="text" id="fname" name="fname"><br>
<input type="text" id="lname" name="lname"><br>
<br>
<input type="submit" value="Envoyer">
<input type="reset" value="Réinitialiser">
</form> Figure 32 : Bouton reset
Mettre en forme
une page web avec
les feuilles de style
CSS
I. Présenter les éléments CSS
II. Gérer les types d’intégration du CSS
III. Utiliser les différents CSS
01 - Introduire le CSS
Présentation du CSS (Cascading Style Sheets)
 Application d’un style à un code HTML

Il existe 3 manières pour introduire le style à une balise donnée :
• Dans une balise, avec l'attribut style
• Dans l'en-tête, après la balise title (dans la partie head)
• Dans un fichier d’extension .css
La troisième méthode, basée sur l’utilisation du langage CSS dans un fichier séparé, est la
technique recommandée
1
0
1
 Présentation du CSS
 Le langage CSS (Cascading Style Sheets) est destiné à gérer le contenu et la
structure d’une page web.
 CSS permet de gérer la mise en forme du contenu d’une page : le texte (couleur,
taille, casse, etc.), les images, les tableaux, les formulaires, etc.
 CSS permet également de dimensionner et positionner les éléments
dans la page web CSS est utilisé aussi pour gérer les animations.
Figure 33 : Logo du CSS
1
0
2
Travail en Groupe
Sous-thèmes de Recherche
1. Validation des Données dans un Formulaire HTML
•Tâches :
•Explorez les attributs HTML permettant la validation de données
•Objectif : Comprendre comment s’assurer que les données saisies sont correctes
avant de les envoyer.
2. Introduction au CSS
•Tâches :
•Présentez les bases du CSS : qu'est-ce que le CSS et pourquoi il est utilisé.
•Recherchez les propriétés CSS de base
•Objectif : Avoir une vue d’ensemble du CSS et de ses propriétés de base.
3. Méthodes d’Intégration du CSS dans une Page HTML
•Tâches :
•Recherchez les différentes méthodes pour intégrer le CSS : en ligne (inline), dans la
page HTML (interne), et à partir d’un fichier externe.
•Présentez les avantages et les inconvénients de chaque méthode.
•Montrez des exemples de code pour chaque méthode.
•Objectif : Savoir comment ajouter du CSS de différentes manières et quand utiliser
chaque méthode.
4. Les Sélecteurs CSS
1
0
1
3
0
3
 Syntaxe du CSS
Une déclaration CSS a la forme suivante :
C’est l’ensemble de paramètres de mise

en forme à appliquer sur l’élément
Le sélecteur est un élément clé identifié par le sélecteur.
qui indique sur quels éléments Chaque propriété de mise en forme est
HTML vont s’appliquer les suivie de deux points et de sa valeur.
propriétés CSS définies entre { }
Exemple de propriétés : la couleur, la
taille, le style, etc.
Exemple :
 Dans cet exemple, on spécifie la couleur rouge comme couleur par défaut de tous les éléments h1.
Codification des couleurs
• Codification des couleurs (Rappel)

Les navigateurs admettent 3 méthodes possibles pour la déclaration d'une couleur :
Méthode Exemple Explication

Couleurs background-color : grey • La couleur est désignée par son nom en anglais.
nommées • Il n'y a que 16 noms de couleurs normalisés par le W3C
background-color : #808080
Couleurs en • La couleur est désignée par son code hexadécimal : les deux
hexadécimal premiers digits
• correspondent à la valeur de rouge, les deux suivants le vert et
les deux derniers le bleu
Couleurs background-color : RGB( • La couleur est définie par trois nombres décimaux qui
décomposées 128,128,128 ) peuvent prendre les valeurs de 0 à 255 indiquant
respectivement le taux de rouge, le taux de vert et le taux de
bleu.
115
1
0
5 01 - Introduire le CSS
Unités de mesure
• Les unités absolues

Les unités absolues ne sont influencées par aucune autre dimension. Elles sont utilisées pour
exprimer une longueur, comme un padding, une hauteur de bloc, la taille des caractères, etc.
• Les unités absolues sont les suivantes :
• Les pixels (px)
• Les pouces (in)
• Les centimètres (cm)
• Les millimètres (mm) div
• Les picas (pc) {
width : 150px ;
• Les points (pt)
height : 150px ;
Le pixel et le point sont les unités les plus utilisées. }
• Relation entre les unités de mesure :
• 1 in = 96 px
• 1 cm = 37,8 px
• 1 mm = 3,78 px.
1
0
6
Unités de mesure
• Les unités relatives au texte

 Les unités relatives font varier la taille d’un élément en fonction de la taille de la police ou de
l’élément parent.
 Les unités dites « relatives au texte » sont utilisées pour harmoniser les éléments d’un
design. Ces unités sont les suivantes:
• Em : proportionnelle à la taille de la police de l’élément parent ou du document. Par défaut,
1 em = 16 px si aucune taille de police n’est définie.
• Rem : fait toujours référence à la taille de la police de l’élément racine. Elle dépend du font-
size définit par défaut.
• Ex : relative à la hauteur de la police actuelle en minuscule (très rarement utilisée).
• Ch : relative à la largeur du caractère “0” (peu utilisée).
Exemple :
body {
• Le corps de la page a une taille de police de 16px.
font-size: 16px;
• Les paragraphes auront une taille de police de 1.2
}
fois la taille de la police de leur parent, soit 19.2px.
p{
font-size: 1.2em;
}
1
0
7
Unités de mesure
• Les unités relatives au viewport

 Les unités relatives au viewport permettent aux éléments de s’adapter à la taille de la
fenêtre du navigateur. Elle sont essentielles pour mettre en place un design responsive :
 La hauteur du viewport (vh) header
 La largeur du viewport (vw) {
Background-color:#f0f0f0;
 Le viewport minimum (vmin)
width : 100px ;
 Le viewport maximum (vmax) height : 100vw ;
}
• Au lieu de fixer des dimensions en pixels (qui sont fixes),

• on utilise des pourcentages de la taille du viewport.
.vw {
width: 10vw;
}
.em {
width: 10em;
}
1
0
8
Unités de mesure
 Alignement du texte
 La propriété text-align est utilisée pour définir l'alignement horizontal d'un texte. Un texte
peut être aligné à gauche ou à droite, centré ou justifié.
 l'alignement à gauche est par défaut si la direction du texte est de gauche à droite, et
l'alignement à droite est par défaut si la direction du texte est de droite à gauche
 L'exemple suivant montre le texte aligné au centre et aligné à gauche et à droite : Code CSS
Code html h1
{
<h1> Introduction to CSS</h1>
text-align : center;
<h2>Presenter les elements CSS</h2>
}
<h3>Gerer les types d\'integration du CSS</h3>
h2
{
text-align : left;
}
h3
{
text-align : right;
}
1
0
9
Positions
• Alignement du texte
• Lorsque la propriété text-align est définie sur la valeur "justify", toutes les lignes sont étirées de
manière à avoir la même largeur et les marges gauche et droite sont
• droites (texte justifié) :
<div>
<p>
Le langage CSS, ou Cascading Style Sheets, est utilisé pour
décrire la présentation d'un document écrit en HTML ou XML.
Il permet de contrôler l'apparence des éléments sur une page web,
Code html notamment en définissant des styles tels que les couleurs,
les polices et les mises en page. Grâce à CSS, les développeurs
peuvent créer des designs attrayants et responsives,
améliorant ainsi l'expérience utilisateur.
</p>
</div>
Code CSS
div
{
text-align : justify;
width: 200px;
}
1
1
0 01- Introduire le CSS
Positions
• Orientation du texte
Les propriétés direction et unicode-bidi sont utilisées pour changer la direction du texte d'un
élément :
p
• Valeurs principales pour direction : {
 ltr : De gauche à droite (left to right) direction : rtl;
 rtl : De droite à gauche (right to left) unicode-bidi : bidi-override;
}
1
1
1
Positions
 Alignement vertical
• La propriété vertical-align définit l'alignement vertical d'un élément.
img.a
{
vertical-align : baseline;
}
img.b
{
vertical-align : text-top;
}
img.c
{
vertical-align : text-bottom;
}
img.d
{
vertical-align : sub;
}
img.e
{
vertical-align : super;
}
1
1
Fonts
 Propriétés du texte en CSS3

Taille du texte : font-size
Peut être spécifiée de 4 manières :
• En pixels : ou en mm, cm.
• En valeur relative : xx-small, x-small, small, medium, large, x-large xx-large.
• En em : par exemple, 1em signifie "Taille normale", 1.3em signifie un texte de taille 1,3
fois plus grande, 0.8em signifie que votre texte aura une taille 0,8 fois plus petite.
• En % : par exemple, 100% : le texte aura une taille "normale", 130% : le texte aura une
taille correspondant à 130% de la taille normale
Exemple :
css:
html:
<h1> OFPPT-ADARISSA </h1> P {
<p> Développeur full stack</p> font-size : 25px;
}
H1 {
font-size : 20px;
}
1
1
Fonts
Propriétés du texte en CSS3

Type de la police: font-family
• C’est une suite de noms de polices.
• Cinq familles sont distinguées : serif (Times, etc.), sans-serif (Arial, Helvetica, etc.), cursive, monospace, Fantasy.
• Les polices sont associées de préférence « en pile ». Dans l’exemple suivant, si le visiteur du site n’a pas la police
Helvetica Neue sur sa machine, on passe automatiquement à la suivante et ainsi de suite.
p
{
font-family:'Helvetica Neue’, Helvetica,sans-serif;
}
@font-face
{
font-family: 'newFont'; src:
Règle @font-face : permet d’importer un font url('PARCHM.ttf');
(extension .ttf) }
p
{
font-family:'newFont';
}
1
1
4
Types d'intégration
Dans la même page HTML

• Pour intégrer une feuilles de style CSS dans une page HTML, il faut placer le code CSS
dans la balise <style>.
Exemple :
<!DOCTYPE html>
<head>
<style>
#myDiv1
{
width :
100px; height
: 100px;
border : 1px solid red;
background-color : yellow;
}
</style>
</head>
<body>
<div id="myDiv1"></div>
</body>
</html>
1
1
5
Types d'intégration
• Dans un fichier externe

• La balise <link > permet d’intégrer une feuilles de style CSS dans une page HTML. La balise <link> doit
être placée dans la balise <head>.
• Exemple :
style.css index.html
#myDiv1 <!DOCTYPE html>
{ <head>
width : 100px; <link rel="stylesheet" href="style.css">
height : 100px; </head>
border : 1px solid red; <body>
background-color : yellow; <div id="myDiv1"></div>
} </body>
</html>
1
1
6
Les sélecteurs simples
Les sélecteurs de type

• Ce sélecteur permet de cibler les éléments qui correspondent au nom indiqué. (nom de la balise)
• Exemple :
• Le sélecteur "div" permet de sélectionner tous les éléments "div" de la page web et leur appliquer le
style.
div
{
background-color : yellow;
}
1
1
7
• Les sélecteurs de classe "."

• Ce sélecteur de type « class » permet de cibler les éléments en fonction de la valeur de
leur attribut class.
Exemple :
<table border="1">
<tr><th>Nom</th><th>Prénom</th><th>Age</th></tr>
<tr class="impaire ><td>MANSOURI</td><td>Hassan</td><td>23</td></tr>
<tr><td>SAFIR</td><td>Laila</td><td>22</td></tr>
<tr class="impaire"><td>BICHRI</td><td>Karim</td><td>21</td></tr>
<tr><td>HAMIM</td><td>Mohamed</td><td>24</td></tr>
</table>
• Le code CSS suivant signifie que tous les éléments qui appartiennent à la classe "impaire" auront un
arrière-plan jaune claire.
.impaire
{
background-color : rgba(255, 255, 0, 0.2);
}
Figure 34: Exemple de classe CSS

C1
o1
p8
y
r
i
g
h
t
-
T
Les sélecteurs d'identifiant "#"
o
u  Le sélecteur de type identifiant permet de cibler un élément d'un document en fonction de la valeur
t
d
r de son attribut id. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné.
o
i
t  Exemple :
r
é
s
e <table border="1">
r
v <tr><th>Nom</th><th>Prénom</th><th>Age</th></tr>
é
- <tr><td>MANSOURI</td><td>Hassan</td><td>23</td></tr>
O <tr><td>SAFIR</td><td>Laila</td><td>22</td></tr>
F
P <tr id="sel"><td>BICHRI</td><td>Karim</td><td>21</td></tr>
P
T <tr><td>HAMIM</td><td>Mohamed</td><td>24</td></tr>
</table>
Figure 35: Exemple de ID CSS

PARTIE 3
• Le code CSS suivant signifie que l'élément de id="sel" aura un arrière plan jaune.
#sel
{
background-color : rgba(255, 255, 0, 0.2);
}
1
1
9
Les sélecteurs complexes
• Le sélecteur universel "*"

• Ce sélecteur permet de cibler tous les nœuds d'un document.
• Exemple :
 le code suivant permet de colorier tous les textes du document en marron.
*
{
color : brown;
}
1
2
● Les sélecteurs d'attribut "[ ]"

● Ce sélecteur permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.
• [attr] : cible un élément qui possède un attribut attr.
• [attr=valeur] : cible un élément qui possède un attribut attr dont la valeur est exactement valeur.
• [attr~=valeur] : cible un élément qui possède un attribut attr dont la valeur est égale à la valeurs spécifiée.
• [attr|=valeur] : cible un élément qui possède un attribut attr dont la valeur est exactement égale à valeur ou dont la valeur
commence par valeur suivi immédiatement d'un tiret.
• [attr^=valeur] : cible un élément qui possède un attribut attr dont la valeur commence par valeur.
• [attr$=valeur] : cible un élément qui possède un attribut attr dont la valeur se termine par valeur.
• [attr*=valeur] : cible un élément qui possède un attribut attr et dont la valeur contient au moins une occurrence de valeur
dans la chaine de caractères.
1
2
Les sélecteurs d'attribut "[ ]"

Exemple :
/* Les éléments <a> avec un attribut

title */ a[title] { color : purple; }
/* Les éléments <a> avec un href qui correspond à "https

://example.org" */ a[href="https ://example.org"] { color :
green; }
/* Les éléments <a> dont href contient

"example" */ a[href*="example"] { font-
size : 2em; }
/* Les éléments <a> dont href finit par ".org" */

a[href$=".org"] { font-style : italic; }
/* Les éléments <a> dont l'attribut class contient le mot logo : comportement identique
à a.logo */
a[class~="logo"] { padding : 2px; }
1
2
 Combinateur de voisin direct "+"
Ce combinateur permet de sélectionner un élément uniquement si :
• Cet élément « suit » un élément donné et que
• Les deux éléments sont les fils d'un même élément parent.
Exemple :
li :first-of-type + li h2 + p {
css: { font-style: italic;
color : red;
} }
<ul>
<li>Un</li>
 Ce code appliquera un style italique à tout
html: <li>Deux</li> paragraphe qui suit immédiatement un titre de
<li>Trois</li> niveau 2 (<h2>) et qui partage le même parent.
</ul>
• Un
Résultat : • Deux
• Trois
1
2
 Sélecteurs de voisins généraux "~"
• Le combinateur ~ permet de séparer deux sélecteurs et de cibler un élément si celui-ci

correspond au second sélecteur et est précédé (mais pas forcément voisin immédiat) d'un
autre élément correspondant au premier sélecteur qui partage le même parent.
• Les deux éléments sont des fils d'un même parent élément, voisins immédiats ou pas.
Exemple :
html: css:
<span>Ici, ce n'est pas rouge.</span> p ~ span
<p>Voici un paragraphe.</p> {
<code>Un peu de code.</code> color : red;
<span>Et un autre span.</span> }
<code>Encore du code</code>
<span>Ici aussi, c'est rouge</span>
Résultat :
Ici, ce n’est pas rouge.

Voici un paragraphe.
Un peu de code. Et un autre span. Encore du code. Ici aussi, c’est rouge
1
2
 Sélecteurs enfant ">"
• Le sélecteur enfant, représenté par le symbole >, est un propriété puissant en CSS qui permet de
cibler très précisément des éléments HTML.
• Il sert à sélectionner uniquement les éléments qui sont des enfants directs d'un autre élément.
En d'autres termes:
• Le premier élément (à gauche du >) est le parent.
• Le deuxième élément (à droite du >) est l'enfant direct de ce parent.
• Exemple :
css: html: • Résultat :
span <span>Ici, ce n'est pas rouge.</span> Ici, ce n’est pas rouge.
{ <p>Voici un paragraphe.</p>
background-color : white; <code>Un peu de code.</code> Voici un paragraphe.
} <span>Et un autre span.</span>
Un peu de code. Et un autre span. Encore du
div > span <code>Encore du code</code>
code. Ici aussi, c’est rouge
{ <span>Ici aussi, c'est rouge</span>
background-color : blue;
}
1
2
 Sélecteurs descendant " " (espace)
 Le combinateur de descendance, représenté par un blanc (ou plusieurs blancs à la suite),

permet de combiner deux sélecteurs afin de cibler les éléments qui correspondent au second
sélecteur uniquement si ceux-ci ont un élément ancêtre qui correspond au premier sélecteur.
html css:
Exemple : :<ul> li
<li> {
<div>Élément 1</div> list-style-type : disc;
<ul> }
<li>Sous-élément A</li> li li
<li>Sous-élément B</li> {
</ul> list-style-type : circle;
</li> }
<li>
<div>Élément 2</div> Résultat :
<ul>
<li>Sous-élément A</li>
• Élément 1
<li>Sous-élément B</li>
o Sous-élément A
</ul>
o Sous-élément B
</li>
• Élément 2
</ul>
o Sous-élément A
o Sous-élément B
1
2
Les sélecteurs
 Pseudo-classes
 Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état
spécifique dans lequel l'élément doit être pour être ciblé par la déclaration.
 Cet état peut être lié à l'action de l'utilisateur (comme le survol avec la souris), à un état
interne de l'élément (comme un champ de formulaire invalide) ou à un état dynamique
(comme un élément en cours d'impression).
 Exemple :
 hover permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole
l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).
1
2
Les sélecteurs (pseudo-classes)
 Liste des pseudo-classes

Sélecteur Exemple Description
: checked input :checked Sélectionne tout élément <input> coché du formulaire
: disabled input :disabled Sélectionne chaque élément <input> désactivé
: empty p :empty Sélectionne chaque élément <p> qui n'a pas d'enfant
: enabled input :enabled Sélectionne chaque élément <input> activé
: first-of-type p :first-of-type Sélectionne chaque élément <p> qui est le premier élément <p> de son parent
: in-range input :in-range Sélectionne les éléments <input> avec une valeur située dans une plage spécifiée
: invalide input :invalid Sélectionne tous les éléments <input> avec une valeur invalide
: last-child p :last-child Sélectionne tous les éléments <p> qui sont les derniers enfants de leurs parents
: last-of-type p :last-of-type Sélectionne chaque élément <p> qui est le dernier élément <p> de son parent
: not(sélecteur) :not(p) Sélectionne tous les éléments qui ne sont pas des paragraphes
: nth-child (n) p :nth-child(2) Sélectionne chaque élément <p> qui est le deuxième enfant de son parent
: nth-last-child (n) p :nth-last-child(2) Sélectionne chaque élément <p> qui est le deuxième enfant de son parent, à partir du dernier
enfant
: nth-last-of-type(n) p :nth-last-of-type(2) Sélectionne chaque élément <p> qui est le deuxième élément <p> de son parent, à partir du dernier
enfant
: nth-of-type (n) p :nth-of-type(2) Sélectionne chaque élément <p> qui est le deuxième élément <p> de son parent
: only-of-type p :only-of-type Sélectionne chaque élément <p> qui est le seul élément <p> de son parent
: only-child p :only-child Sélectionne chaque élément <p> qui est le seul enfant de son parent
: optional input :optional Sélectionne les éléments <input> sans attribut "required"
: out-of-range input :out-of-range Sélectionne les éléments <input> qui ont des valeurs en dehors d'une plage spécifiée
1
2
 Liste des pseudo-classes

Sélecteur Exemple Description
:read-only input :read-only Sélectionne les éléments <input> avec un attribut "readonly" spécifié
:read-write input :read-write Sélectionne les éléments <input> sans attribut "readonly"
:required input :required Sélectionne les éléments <input> avec un attribut "required" spécifié
root root Sélectionnez l'élément racine du document
:target #news :target Sélectionne l'élément #news actuellement actif
:valid input :valid Sélectionne tous les éléments <input> avec une valeur valide
:link a :link Sélectionne tous les liens non visités
:visited a :visited Sélectionnez tous les liens visités
:active a :active Sélectionne le lien actif
:hover a :hover Sélectionne les liens sur lesquels la souris passe
:focus input :focus électionne l'élément <input> qui a le focus
:first-letter p :first-letter Sélectionne la première lettre de chaque élément <p>
:first-line p :first-line Sélectionne la première ligne de chaque élément <p>
:first-child p :first-child Sélectionne tous les éléments <p> qui sont les premiers enfants de leurs parents
:before p :before Insérer du contenu avant chaque élément <p>
:after p :after Insérer du contenu après chaque élément <p>
:lang(it) p :lang(it) Sélectionne chaque élément <p> avec une valeur d'attribut lang commençant par "it"
1
2
 pseudo-classes
Exemple : :visited
<p><a href="https ://www.google.com">Cette page est visitée</a></p> a :visited

{
<p><a href=" https ://www.ofppt.ma">Essayez celle-ci peut-être ?</a></p> color : #00ff00;
}
Cette page est visitée
Essayez celle-ci peut-être ?
Exemple : :hover
a :hover
<p> {
<a href="#">Ce lien sera écrit sur un fond doré lors du survol.</a> background-color : gold;
}
</p>
Ce lien sera écrit sur un fond doré lors du survol.
Ce lien sera écrit sur un fond doré lors du survol.

Figure 36: Exemple de Pseudo-classe CSS
1
3
0
 pseudo-classes
.prenom :focus
 Exemple : :focus {
background : yellow;
Color : red;
<input class="prenom" value="Rouge si focus"> }
<input class="nom" value="Vert si focus">
.nom :focus
Rouge si focus Vert si focus {
background :
Rouge si focus Vert si focus yellow; color :
Figure 35: Exemple de Pseudo-class CSS
lime;
}
 Exemple : :invalid
<input type="email">
input :invalid
Avec Email faux
{
border : 2px solid red;
Avec Email juste }
Figure 37: Exemple de Pseudo-classe

CSS
CHAPITRE 2
Utiliser les propriétés CSS
I. Typographie
II. Bordures et ombres
III. Marges et padding
IV. Images
V. Couleurs de fond
VI. Background
VII. Types de positionnement (relatif, absolu, float…)
VIII. Utilisation des blocs Flex (FlexBox)

Support de Cours - M104 Web Statique 26-11-2024 v2

Transféré par

Droits d'auteur :

Formats disponibles

Support de Cours - M104 Web Statique 26-11-2024 v2

Transféré par

Informations du document

Titre original

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

Support de Cours - M104 Web Statique 26-11-2024 v2

Transféré par

Droits d'auteur :

Formats disponibles

Office de la Formation Professionnelle et de la

2. Implémenter une page web statique

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

permet de demander des pages aux serveurs et de les afficher à l'écran.

Figure 1 A: les navigateurs les plus utilisés

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

• Évolution Langage HTML

Période Événement clé Impact

Netscape Navigator popularise

Figure 3 : logo du W3C

• Récupérer le code (généralement écrit en HTML, PHP, JavaScript ou d'autres langages de

• Le fonctionnement d’un navigateur

En utilisant le navigateur Web, l'utilisateur envoie une requête dite

Qu'est-ce que sont les outils de développement ?

• Le fonctionnement d’un navigateur

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

• Définition d’un SE Client :

Architecture du Modèle Client/Serveur

• Catégories d’un SE Client :

• Exemple de SE Client Windows et Linux

Exemples des Clients Exemples des Clients Linux

Windows vista Centos

Windows 10 Open SUSE

Table 3 : Exemples des SE Client Windows et linux

• Définition d’un SE serveur :

Exemples des Exemples des

Windows Server 2000 Debian

Windows Server 2003 Centos

Windows Server 2008 Redhat

Windows Server 2012 Fedora

Windows Server 2016 Open SUSE

Windows Server 2019 Arch Linux

Windows Server 2022 Table 5 : Exemple des SE Client linux

II. Utiliser l'environnement de développement

Ce que vous allez apprendre dans la séance prochaine :

• Utiliser Visual Studio Code comme éditeur de

Figure 5 : Logo du logiciel VS Code [5]

Pour installer les extensions

Explorateur des fichiers

Figure 6 : Environnement de travail de VS Code

Les extensions de VS Code

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

Figure 7 : Installation des extensions dans VS Code

III. Définir des éléments basiques d'une page HTML

Les normes du W3C

Validation du code HTML avec W3C Validator : http://validator.w3.org/

Language (HTML en abrégé), en bref:

• Squelette d’une page Web

❸ Contient des informations

❷ Élément racine qui

Figure 8 : Structure minimale d’un document html

Exemple 1 : Code correct Exemple 2 : Code incorrect

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

Les types d’éléments HTML

p Figure 12 : Exemples d’éléments « inline »

Figure 11 : Exemples d’éléments « bloc »

• Les types d’éléments HTML

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

• Éléments de niveau inline en HTML :