developpement web HTML & CSS web Sémantique

20/02/2023
1
Développement Web avancé
Chapitre 1 : HTML5 et CSS3
20/02/2023
Qu'est ce que le HTML5 ?
20/02/2023 2
♦ Le HTML5 (HyperText Markup Language 5) est la dernière révision majeure
d'HTML qui est un langage de balisage permettant de structurer le contenu de
documents hypertextuels.
♦ Le HTML5 reprend les grands principes d’HTML et améliore certains aspects.
Parmi les nouveautés apportées :
- Un nouveau doctype simplifié.
- La suppression des balises et attributs de présentation.
- De nouvelles balises sémantiques ou d’organisation.
- De nouvelles balises audio et vidéo qui ne nécessitent plus l’appel à des plugins
dédiés.
- Nombreuses nouveautés pour les formulaires comme les curseurs ou les
calendriers et la prise en charge de façon native par les navigateurs de la
validation des données.
- …
Le document HTML5 minimum
20/02/2023 3
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Titre de la page</title>
</head>
<body>

</body>
</html>
<iframe></iframe>
<ol></ol>
<ul></ul>
<li></li>
<dl></dl>
<dt></dt>
<dd></dd>
<form></form>
<input />
<button></button>
<textarea></textarea>
<select></select>
<option></option>
<fieldset></fieldset>
<legend></legend>
<br />
<hr />
<sub></sub>
<sup></sup>
<a></a>
<img />
<map></map>
<area />
<i></i>
<b></b>
<table></table>
<caption></caption>
<tr></tr>
<th></th>
<td></td>
<html></html>
<head></head>
<body></body>

<title></title>
<meta />
<link />
<script></script>
<style></style>
<hx></hx> (x : de 1 à 6)
<p></p>
<pre></pre>
<div></div>
<span></span>
20/02/2023 4
Rappel de quelques balises d’HTML5

20/02/2023
2
Balises sémantiques d’HTML5
20/02/2023 5
♦ Les balises sémantiques décrivent la nature de certains éléments du contenu d’une
page. Ces derniers pourront ainsi être plus facilement récupérés et réutilisés par des
moteurs de recherche.
♦ Les anciennes balises sémantiques :
Le HTML5 a hérité des anciennes balises sémantiques du HTML 4.0 :
- <cite> … </cite> : affiche une citation. Par défaut cette citation est affiché en
italique.
- <q> … </q> : affiche une citation. Cette fois, le contenu devrait être affiché par
défaut entre guillemets.
- <strong> ... </strong> : définit un texte important. Par défaut, son contenu est
affiché en gras.
- <em> … </em> : marque un texte sur lequel on veut insister. Par défaut, son
contenu est affiché en italique.
- <abbr> … </abbr> : signale une abréviation.
Ex : <abbr title="Kilogramme">KG<abbr>
- <address> … </address> : affiche une adresse de contact. Son contenu est affiché
par défaut en italique. Aucun lien vers cette adresse n’est effectué par cette balise.
Ex : <address title="Contact" > ESTO <br />
<a href="mailto:esto.webmaster@ump.ma" >Contact mail</a><br />
Adresse : BP 473 Complexe universitaire Al Qods Oujda <br />
Tel : +212 36 500 224
</address>
- <var> … </var> : contient une variable. Par défaut, son contenu est affiché en
italique.
Ex : <p>Une équation : <var>x</var> = <var>y</var> + 2 </p>
20/02/2023 6
- <code> … </code> : définit un code informatique, un script ou une partie de
script. Par défaut, son contenu est affiché dans une police à espacement fixe.
- <samp> … </samp> : met en évidence un texte d’exemple. Par défaut, son
contenu est affiché dans une police à espacement fixe.
Ex : <p>Déclaration et initialisation d'une variable en JavaScript :
<code> var nomVariable=valeur;</code> <br />
Exemple : <samp>var i=2;</samp></p>
- <dfn> … </dfn> : donne la définition d’un terme. Par défaut, cette définition est
affichée en italique.
Ex : <p>L'abbréviation W3C a pour signification <dfn>World Wide Web
Consortium</dfn></p>
20/02/2023 7
♦ Les nouvelles balises d’organisation :
Ces balises d’organisation sont plutôt destinées au concepteur de la page afin qu’il
puisse distinguer plus aisément des portions de code.
1- Les balises <header>, <nav>, <footer> et <aside> :
▪ La majorité des pages existantes sur la toile, comportent les éléments suivants :
- Un en-tête de page avec, par exemple, un logo, une bannière, le nom du site, un
slogan ou un champ de recherche.
- Les outils de navigation, indispensables pour la consultation des différentes parties
du site.
- Une partie consacrée au contenu.
- Une zone annexe qui permet d’apporter des éléments accessoires au contenu
proprement dit, comme une publicité.
- Un pied de page avec par exemple des liens de contact, le nom de l’auteur, le plan
du site, les règles d’accessibilité, etc.
Ce qui visuellement peut prendre les formes suivantes :
20/02/2023 8

20/02/2023
3
En-tête de page
Pied de page
Navigation Contenu
En-tête de page
Pied de page
Navigation
Contenu
En-tête de page
20/02/2023
Navigation
Pied de page
Apart
Contenu
▪ HTML5 a créé de nouvelles balises pour permettre d’identifier plus clairement ces
grandes parties du design de la page. Ainsi :
- <header> … </header> regroupent les éléments de l’en-tête de la page. Cette
balise peut remplacer les <div id="header"> que l’on rencontre fréquemment.
- <nav> … </nav> indique les éléments d’un menu de navigation.
- <footer> … </footer> signale les éléments de pied de page. Cette balise peut
remplacer les <div id="footer"> que l’on rencontre fréquemment.
- <aside> … </aside> avertit qu’il s’agit d’informations complémentaires au
contenu.
<header>
20/02/2023
<nav>
<footer>
<aside>
Contenu
2- Les balises <section> et <article> :
▪ Le contenu principal peut à son tour être organisé en diverses parties :
- <section> … </section> détermine une partie du contenu de la page se rapportant à un
thème déterminé.
- <article> … </article> définit un contenu indépendant du document qui possède une
identité à part entière dans la page comme l’article d’un blog, un post dans un forum ou
un produit dans un site commercial.
Remarque : Rien n’interdit de mettre des <nav> dans des <footer>, des <header> dans des
<section>, des <header> dans des <article>,… Pour que ces balises atteignent leur
objectif, elles doivent être utilisées avec modération.
<aside>
<aside>
<aside>
<header>
<section>
<article>
<section>
<nav>
<footer>
<header>
20/02/2023
<aside>
<nav>
<section>
<article>
<article>
<article>
<footer>
Exercice 1 :
20/02/2023

20/02/2023
4
Exercice 1 :
20/02/2023
20/02/2023
♦ Nouvelles balises pour la structuration d’un tableau :
Le HTML5 prévoit des balises pour structurer de façon logique le contenu d’un tableau.
Ces balises sont :
▪ <thead> : pour regrouper les informations concernant l’en-tête du tableau comme par
exemple le titre et l’intitulé des colonnes.
▪ <tbody> : pour le corps du tableau, soit l’ensemble des données de celui-ci.
▪ <tfoot> : pour le contenu de bas de page comme par exemple des remarques ou une
légende.
Remarques :
- Ces divisions logique n’affectent en rien la présentation par défaut du tableau mais elles
peuvent être reprises par des propriétés de style pour agrémenter la présentation du
tableau.
- La balise <tfoot> doit se situer avant la balise <tbody> de sorte que le navigateur puisse
prévoir le pied de page avant la réception des lignes de données.
Exemple :
Dans le <head> de la page HTML:
<style>
table {border-collapse: collapse}
td,th {border: 2px solid black;}
thead {background-color: orange}
tfoot {font-style: italic}
</style>
Dans le <body> de la page HTML:
<table>
<thead>
<tr><th>Produit</th><th>Prix</th></tr>
</thead>
<tfoot>
<tr><td>total</td><td>6000</td></tr>
</tfoot>
<tbody>
<tr> <td>PC</td> <td>5000</td></tr>
<tr> <td>Imprimante</td><td>1000</td></tr>
</tbody>
</table>
20/02/2023 20/02/2023

20/02/2023
5
20/02/2023
♦ De nouvelles balises sémantiques :
Le HTML5 introduit également d’autres nouvelles balises sémantiques.
▪ La balise <mark> :
- Cette balise met en évidence une partie du texte. Le contenu
de cette balise est surligné sur fond jaune.
- Ex :
<p> <mark>HTML5</mark> a remplacé le HTML4.</p>
▪ La balise <time> :
-Cette balise définit une date et|ou une heure. L’attribut facultatif datetime indique la
date et l’heure selon la représentation numérique internationale de la norme ISO8601.
- Ex :
<p>Rendez-vous le <time datetime="2020-12-30">30 décembre</time>.</p>
<p>On peut faire l'examen <time>demain</time> ?</p>
<p>Connexion le <time datetime="2020-10-01T10:42:00">1 octobre à 10:42</time></p>
20/02/2023
▪ La balise <meter> :
- Cette balise représente une mesure scalaire dans un intervalle connu. Il est possible de
définir au niveau de la plage de valeurs une valeur basse ("low") en dessous de laquelle
les mesures sont considérées comme faibles et une valeur haute ("high") au dessus de
laquelle les mesures sont considérées comme élevées. Ces deux indicateurs permettent
également de conditionner la couleur d'affichage (rouge, jaune ou verte) de la jauge.
- Cette balise possède six attributs :
• value : la valeur courante de la mesure. Cet attribut est obligatoire.
• min : la valeur minimale que peut prendre la mesure. (Sa valeur par défaut est 0)
• max : la valeur maximale que peut prendre la mesure. (Sa valeur par défaut est 1)
• low : la valeur maximale en dessous de laquelle la mesure est considérée comme basse.
• high : la valeur minimale à partir de laquelle la mesure est considérée comme haute.
• optimum : la valeur idéale pour la mesure.
- Ex :
<p>Le score de Amin est de <meter value="5" min="0" max="20" low="8" high="18" optimum="19.5"></meter> sur 20.<br />
Le score de Najat est de <meter value="14" min="0" max="20" low="8" high="18" optimum="19.5"></meter> sur 20.<br />
Le score de Said est de <meter value="19" min="0" max="20" low="8" high="18" optimum="19.5"></meter> sur 20.</p>
20/02/2023
▪ La balise <figure> :
- Cette balise peut être utilisée pour regrouper des éléments tels que des images, des
vidéos, des diagrammes, des fragments de code ou même du texte qui viennent en
illustration du contenu principal.
- La balise <figcaption>, utilisée conjointement à la balise <figure>, fournit une légende
aux éléments ainsi regroupés.
- Ex :
<figure>
<img src="einstein.jpg" alt="Einstein" width="170" height="100">
<figcaption>Fig.1 - Le physicien Einstein</figcaption>
</figure>
20/02/2023

20/02/2023
6
▪ Les balises <details> et <summary> :
- La balise <details> définit des détails ou un contenu accessoire. La balise <summary>
fournit un résumé de ces éléments accessoires.
- Par défaut, seul le texte de la balise <summary> est visible. Au clic sur ce dernier, le
contenu de la balise <details> devrait apparaître.
- Attribut open de l'élément <details> : Si cet attribut est présent, les détails sont exposés à
l'utilisateur dès le chargement.
- Ex :
<details>
<summary >Le HTML5</summary>
<p>Le HTML5 est la dernière révision majeure d'HTML. </p>
<p>Cette version a été finalisée le 28 octobre 2014.</p>
</details>
20/02/2023
Balises multimédia d’HTML5
20/02/2023
♦ Les balises <audio> et <video> sont utilisées respectivement pour intégrer des fichiers
sons et des vidéos dans un document HTML.
♦ Ces deux balises peuvent contenir plusieurs sources (balise <source>) introduites avec
l'attribut src. Le navigateur décidera lequel utiliser. Du contenu alternatif peut aussi être
ajouté pour les navigateurs ne supportant pas cette fonctionnalité.
♦ Syntaxe :
<audio>
<source src="fichier.mp3">
<source src="fichier.ogg">
…
<a href="fichier.mp3"> … </a>
</audio>
<video [width="…" height= "…"]>
<source src="fichier.mp4">
<source src="fichier.webm">
…
<a href="fichier.mp4"> … </a>
</video>
♦ Les attributs des balises <audio> et <video> :
– controls : affiche la barre de contrôle (lecture, pause, volume, temps écoulé)
– autoplay : démarrage automatique
– loop : lecture en boucle
– preload : none (pas de préchargement), metadata (préchargement des métadonnées
attachées au fichier) ou auto (laisse le navigateur décider).
Nouveautés HTML5 pour les formulaires
♦ Les formulaires ont bien évolués avec les nouveautés d'HTML5. L'introduction de
nouveaux types de champs sémantiques et de nouveaux outils pour la validation de la
saisie simplifie le travail du développeur qui était jusque là obligé de palier à ces
manques bien souvent avec du JavaScript.
♦ Les nouveaux types de champs :
▪ Ligne de texte d’adresse email : <input type="email"> Ex
: Email : <input type="email" name="mail" required>
<input type="submit" value="Envoyer">
Remarque : si l'attribut multiple est indiqué, la valeur peut être une liste d'adresses
électroniques séparées par des virgules. Chaque blanc situé avant et après chaque adresse
sera retiré.
▪ Ligne de texte d’url : <input type="url">
Ex : Taper l'URL de votre site : <input type="url" name="web" required>
<input type="submit" value="Envoyer">
15/12/2020 23
20/02/2023
▪ Ligne de texte avec liste de suggestions :
- La balise <datalist> ajoutée à une ligne de texte ouvre une liste de suggestion d’encodage
au focus de celle-ci. L’utilisateur peut retenir une suggestion ou encoder une valeur de
son choix.
- La balise <datalist> est reliée à la ligne de texte par un identifiant id qui renvoie à l’attribut
list de celui-ci. Cette balise contient une liste de balises <option> reprenant les
suggestions d’encodage. Ces balises <option> doivent toujours posséder un attribut
value.
- Syntaxe : <datalist id="… " >
<option value="… " ></option>
<option value= " … " ></option>
...
</datalist>
- Ex : Choisir un fruit : <br /> <input type="text" size="30" list="fruits">
<datalist id="fruits"> <option value="Orange"></option>
<option value="Pomme"></option>
<option value="Poire"></option>
<option value="Prune"></option>
</datalist>
15/12/2020 24
20/02/2023

20/02/2023
7
▪ Ligne de texte de format numérique : <input type="number">
Cette balise a des attributs spécifiques :
▪ min : indique la valeur minimale du compteur.
▪ max : indique la valeur maximale du compteur.
▪ step : détermine le pas d’avancement à chaque pression de la souris sur la flèche ▲ ou ▼.
▪ value : la valeur de départ du compteur.
Ex : Nombre d'articles (conditionnées par 2) : <br />
<input type="number" name="n" min="2" max="12" step="2" value="2">
15/12/2020 25
20/02/2023
▪ Ligne de texte de format de date : <input type="date">
Cette balise fait apparaître automatiquement un calendrier où l’utilisateur aura le choix dans
la date. Elle se décline sous plusieurs formes :
▪ <input type="date"> : la plus générale. Elle permet de sélectionner l’année,
le mois et le jour.
▪ <input type="month"> : pour le mois et l’année.
▪ <input type="week"> : pour une semaine déterminée. Ex
: Exemple de date : <input type="date" name="d"><br />
Exemple de month : <input type="month" name="m"><br />
Exemple de week : <input type="week" name="w">
15/12/2020 26
20/02/2023
▪ Ligne de texte de format horaire : <input type="time">
Cette balise a les attributs suivants :
▪ min : permet de fixer une heure de départ (minimale) .
▪ max : permet de fixer une heure de fin (maximale).
▪ step : détermine le pas d’avancement (en seconde).
▪ value : la valeur de départ de l’heure.
Ex : Livraison de la pizza à :
<input type="time" min="11:00" max="22:00" step="600" value="11:00">
▪ Ligne de texte de format date et heure : <input type="datetime-local">
Ex : Exemple de datetime : <input type="datetime-local" name="dt">
15/12/2020 27
20/02/2023
▪ Ligne de texte de téléphone : <input type="tel">
Étant donné que les numéros de téléphone peuvent avoir des formats différents, aucune
vérification n’est effectuée par le navigateur. Il est possible d’appliquer un format
particulier en utilisant l’attribut pattern (voir plus loin).
▪ Ligne de texte de recherche : <input type="search">
L’aspect de ce champ de texte sera géré par le navigateur.
Ex : Recherche :
<input type="search"><input type="submit" value="Go">
▪ Ligne de texte de couleur : <input type="color">
Ex : Choisir une couleur : <input type="color">
15/12/2020 28
20/02/2023

20/02/2023
8
▪ Les curseurs : <input type="range">
▪ min : indique la valeur minimale du curseur.
▪ max : indique la valeur maximale du curseur.
▪ step : détermine le pas d’avancement.
▪value : la valeur de départ du curseur.
Ex : Quantités commandées : <br />
<input type="range" name="curseur" min="1" max="5" value="3" step="1" />
15/12/2020 29
20/02/2023
▪ Visualisation du résultat d’un calcul : <output for="…" name="…" ></output>
La balise <output> est un élément utilisable au sein de formulaires pour afficher le résultat
d'un calcul (souvent en JavaScript) à partir de champs saisissables par l'utilisateur. Ce
champ est en lecture seule et s'actualise dès que l'une des valeurs sur laquelle le calcul se
base change (en utilisant par exemple le gestionnaire d’événement oninput).
▪ for : indique la liste des identifiants des éléments qui participent au calcul (les séparer
par des espaces).
▪ name : spécifie le nom de la balise <output>.
▪form : spécifie l'identifiant du formulaire auquel l'élément output appartient.
Ex : <form oninput="o.value=a.value*b.value">
<input type="number" name="a" id="a" value="2"> *
<input type="number" name="b" id="b" value="3"> =
<output name="o" for="a b">6</output>
</form>
15/12/2020 30
20/02/2023
15/12/2020 31
♦ Quelques nouveaux attributs introduits par HTML5 :
▪ L’attribut autofocus :
- Donne le focus à l'élément au chargement de la page.
- Cet attribut peut être appliqué aux balises input, select, textarea et button.
▪ L’attribut placeholder :
- Donne une indication à l'utilisateur sur le type de donnée à entrer.
- La valeur de l'attribut placeholder est affichée jusqu'à ce que le champ prenne le focus
ainsi qu'à la perte du focus si le champ est vide. S'applique aux balises input et textarea.
▪ L’attribut required :
- Indique que le champ est obligatoire.
- Il sert essentiellement pour les vérifications côté navigateur sans utiliser JavaScript.
▪ L’attribut minlength :
- Indique le nombre minimal de caractères que l’utilisateur doit saisir dans le champ.
20/02/2023
15/12/2020 32
▪ L’attribut readonly :
- Indique que la valeur attribuée à la ligne de texte ne pourra être modifiée par l’utilisateur.
▪ L’attribut autocomplete :
- Cet attribut permet d'activer la saisie semi-automatique : le navigateur va
automatiquement compléter par des valeurs que l'utilisateur a entré auparavant.
- Cet attribut est ignoré si la valeur de l'attribut type est hidden, checkbox, radio, file, ou
que l'élément est un bouton (button, submit, reset, image).
- Les valeurs possibles sont :
off : L'utilisateur doit entrer la valeur de manière explicite et/ou le document fourni sa
propre méthode d'auto-complétion. Le navigateur ne complète pas l'entrée.
on : Le navigateur peut compléter automatiquement la valeur en se basant sur des valeurs
que l'utilisateur a rentré précédemment.
- Exemple :
Recherche : <input type="search" name="search" autocomplete="on" />
20/02/2023

20/02/2023
9
20/02/2023
▪ L’attribut pattern :
- Cet attribut permet de définir une expression régulière qui sera utilisée pour déterminer
si la saisie est conforme au format attendu.
- Le tableau suivant présente une liste de composants pour former une expression
régulière.
Caractère Description
[a-z] Trouve n’importe quel caractère de a à z
[0-9] Trouve n’importe quel chiffre de 0 à 9
[a-zA-Z] Trouve n’importe quel caractère de a à z ou de Aà Z
[a-z0-9_-] Trouve n’importe quel caractère de a à z, un chiffre de 0 à 9,
underscore ou un trait d’union
x{n} Trouve x exactement n fois
x{n,} Trouve x au moins n fois
x{n, m} Trouve x entre n et m fois
- Exemple 1 : ci-dessous un champ de texte qui doit contenir trois lettres majuscules
suivies de quatre chiffres. Les attributs required et pattern permettent de s'assurer que
le champ sera rempli au format souhaité lors de la soumission. Enfin, lors du survol du
champ, l'utilisateur verra apparaître un message correspondant à l'attribut title lui
indiquant le format attendu.
<input type="text" name="exemple" pattern="[A-Z]{3}[0-9]{4}"
title="Ce champ contient 3 lettres en majuscules suivies de 4 chiffres" required />
<input type="submit" value="Envoyer" />
- Exemple 2 : Numéro de téléphone marocain
<input type="tel" name="noTel" pattern="0[5-7][0-9]{8}"
title="Ce champ contient 10 chiffres avec un 0 au début suivi de 5 ou 6" required />
20/02/2023
Qu'est ce que le CSS3 ?
20/02/2023
♦ CSS (Cascading Style Sheets ) est un langage de feuilles de style
utilisé pour décrire la présentation d'un document écrit en HTML ou
XML.
♦ La version 3 de CSS (CSS3) apporte plusieurs nouveautés, comme
- de nouveaux sélecteurs
- les bords arrondis
- les bordures imagés
- les ombres
- la présentation en plusieurs colonnes d’un texte
- les transitions
- …
Rappel du syntaxe de CSS
20/02/2023
♦ Une feuille de style est composée de règles qui ont la forme suivante :
sélecteur {
propriété1: valeur1;
[propriété2: valeur2;]
…
/* commentaire */
}
♦ Il existe trois techniques pour associer des styles à un document HTML :
▪ Style en ligne : on ajoute l’attribut de style dans la balise concernée :
<balise style="prop1:val1;…"> … </balise>
▪ Style interne : on regroupe les règles de styles à l’aide de la balise de style :
<style> … </style>
▪ Style externe : on regroupe les règles de styles dans un fichier externe (d’extension
«.css») et on fait appel à ce dernier dans l’entêté du document HTML en utilisant la
balise <link> ou l’instruction @import :
- Style lié : <link rel="stylesheet" href="feuilledestyle.css">
- Style importé : <style> @import url(feuilledestyle.css); </style>

20/02/2023
10
Rappel de quelques sélecteurs CSS
20/02/2023
♦ Sélecteur universel : *
- sélectionne tous les éléments
♦ Sélecteur d’élément : E
- sélectionne tous les éléments E : <E>…</E>
♦ Sélecteur d’identification : #valeurID
- sélectionne de manière unique un élément ayant id : <balise id="valeurID">…</balise>
♦ Sélecteur de classe : .nomDeLaClasse
- sélectionne les éléments ayant une classe : <balise class="nomDeLaClasse">…</balise>
♦ Sélecteur descendant : E F
- sélectionne tout élément F qui est un descendant (enfant direct ou indirect) de l’élément E
♦ Sélecteur d’enfant : E>F
- sélectionne tout élément F qui est un enfant direct de l’élément E
♦ Sélecteur d’adjacence directe : E+F
- sélectionne l'élément F placé immédiatement après l’élément E
♦ Sélecteur de pseudo-classe des ancres : A:link, A:visited, A:hover et A:active
- permet d’appliquer un style à un lien non visité, lien visité, lien survolé avec la souris et lien
cliqué
Rappel de quelques sélecteurs CSS
20/02/2023
♦ Sélecteur d’attribut :
- E[at] : sélectionne l'élément E ayant comme attribut "at" quelles qu'en soient les valeurs
- E[at="val"] : sélectionne l'élément E ayant comme attribut "at" et dont sa valeur est égale
à "val"
- E[at~="val"] : sélectionne l'élément E ayant comme attribut "at" et dont la valeur est une
liste de valeurs séparée par des espaces et dont une de ses valeurs est égale à "val"
♦ Sélecteur de pseudo-élément :
- E:first-letter : sélectionne la première lettre de l’élément E
- E:first-line : sélectionne la première ligne de l’élément E
- E:before : insère un contenu généré avant celui de l’élément E
- E:after : insère un contenu généré après celui de l’élément E
:before et :after s’utilisent avec la propriété content et peuvent insérer du texte ou des images.
[:before {content: url(nom_de_l’image) ;} ou :before {content: "texte" ;} ]
♦ Sélecteur de pseudo-classe dynamique : E:hover, E:active et E:focus
- permet d’appliquer un style à un élément survolé avec la souris, élément cliqué et élément
qui a le focus. (E:focus est dédié principalement au formulaire et elle permet de mettre en
forme un élément de formulaire quand il obtient le focus)
Nouveaux sélecteurs CSS3
♦ Sélecteur de pseudo-élément :
CSS3 propose une nouvelle syntaxe pour les pseudo-éléments. En lieu est place du « : » il faudra
écrire « :: ». CSS3 a introduit la notation ::first-letter, ::first-line, ::before, et ::after pour
différencier les pseudo-classes et les pseudo-éléments.
Exemple :
Dans le <head> de la page HTML :
<style>
p::before {
content: "(";
font-size: 2em;
}
p::after {
content: ")";
font-size: 2em;
}
</style>
Dans le <body> de la page HTML :
<p> Les pseudo-éléments accèdent à certaines parties de l'élément pour les styler. </p>
20/02/2023
20/02/2023
♦ Sélecteur d’attribut :
- E[at^="val"] : sélectionne l'élément E ayant comme attribut "at" et dont la valeur
commence exactement par le préfixe "val"
- E[at$="val"] : sélectionne l'élément E ayant comme attribut "at" et dont la valeur finit
exactement par le suffixe "val"
- E[at*="val"] : sélectionne l'élément E ayant comme attribut "at" et dont la valeur contient
au moins une fois la sous chaîne "val"
Exemple :
<style>
input[name^="nom"] {background-color: green;}
input[title*="dip"] {color: red;}
</style>
Nom et Prénom : <input type="text" name="nomPrenom" /><br />
Diplôme : <input type="text" name="diplome" title="dernier diplôme" />
 Le 1er champ aura une couleur d’arrière-plan vert et le texte saisi dans le 2ème champ sera
rouge.

20/02/2023
11
20/02/2023
♦ Sélecteur d’adjacence indirecte : E~F
- sélectionne tous les éléments F placés après l’élément E
Exemple :
<style>
h1 ~ p {color: red;}
</style>
<h1>Math</h1>
<h2>Fonctions :</h2>
<p>Fonction linéaire : f(x) = ax+b</p>
<p>Fonction du second degré : f(x) = ax2+bx+c</p>
 Le texte du deux paragraphes sera en rouge (car ces deux paragraphes sont frères de h1).
20/02/2023
♦ Sélecteur de pseudo-classe :
- :root : correspond à l'élément racine d'un document. En HTML, :root est représenté par
l'élément <html>
- :empty : permet de cibler chaque élément qui ne possède aucun enfant, ni aucun contenu
- :not(…) : prend un sélecteur comme argument. Il sert à exclure les éléments qui sont
concernés par le sélecteur en argument
- :first-child : sélectionne le premier élément enfant
- :last-child : sélectionne le dernier élément enfant
- :nth-child(n) : sélectionne le nième élément enfant où n est un nombre ou les mots-clés even
(pairs) ou odd (impairs)
- :nth-last-child(n) : sélectionne le nième enfant en partant du dernier élément
- :first-of-type : représente le premier élément de ce type
- :last-of-type : représente le dernier élément de ce type
- :nth-of-type(n) : désigne le nième élément de ce type où n est un nombre ou les mots-clés
even (pairs) ou odd (impairs)
- :nth-last-of-type(n) : sélectionne le nième élément de ce type en partant du dernier élément
- :only-child : sélectionne un élément s'il est le seul enfant de son parent
- :only-of-type : sélectionne un élément s'il est le seul enfant de son parent qui a ce type
Nouveaux sélecteurs de CSS3
Exemple 1 :
<style>
:root {border: solid 7px red;}
:root body {border: solid 2px blue; padding:15px;}
div:empty {width: 210px; height: 30px; background-color: green;}
p:not(.test) {font-weight: bold;}
</style>
<div></div>
<div>
<h2>Développement Web</h2>
<p class="test">Ceci est le cours d'HTML5</p>
<p>Ceci est le cours de CSS3</p>
</div>
20/02/2023
Exemple 2 :
<style>
table, th, td {border: solid 1px black;}
tr:first-child {background-color: lightblue;}
/* tr:first-of-type {background-color: lightblue;} */
tr:nth-child(2), tr:last-child { background-color: yellow;}
/* tr:nth-of-type(2), tr:last-of-type { background-color: yellow;} */
</style>
<table>
<tr><th>Jour</th> <th>Matière</th></tr>
<tr><td>Lundi</td><td>HTML-CSS</td></tr>
<tr><td>Mardi</td><td>JavaScript</td></tr>
<tr><td>Mercredi</td><td>PHP</td></tr>
</table>
20/02/2023

20/02/2023
12
Exemple 3 :
<style>
em:only-child {text-decoration: underline}
strong:only-of-type {background-color:lightblue}
</style>
<h2>Qu'est ce que le <em>CSS</em> ?</h2>
<p><em>CSS</em> est un langage de feuilles de style utilisé pour décrire la
présentation d'un document <strong>HTML</strong>. </p>
<p><strong>CSS3</strong> apporte plusieurs nouveautés comme de
<strong>nouveaux sélecteurs</strong>.</p>
20/02/2023
20/02/2023
♦ Sélecteur de pseudo-classe pour les formulaires :
- :checked : permet de cibler chaque élément de formulaire qui est coché. (il concerne
les boutons radio et les cases à cocher )
- :required : permet de cibler chaque élément de formulaire qui est obligatoire.
Ce sélecteur sélectionne les éléments qui ont l'attribut HTML required
- :optional : permet de cibler chaque élément de formulaire
(acceptant l'attribut required) pour lequel l'attribut required n'est pas activé.
- :read-only : permet de cibler chaque élément de formulaire qui est en lecture seule.
Ce sélecteur sélectionne les éléments qui ont l'attribut HTML readonly
- :disabled : permet de cibler chaque élément de formulaire qui est désactivé.
Ce sélecteur sélectionne les éléments qui ont l'attribut HTML disabled
- :read-write : permet de cibler chaque élément de formulaire en lecture et écriture.
Ce sélecteur sélectionne les éléments qui n’ont pas l'attribut HTML readonly
- :valid : permet de cibler chaque élément de formulaire qui est considéré comme valide.
La validité d'un élément dépend du navigateur et du type d'élément
- :invalid : permet de cibler chaque élément de formulaire qui est considéré comme
invalide. L’invalidité d'un élément dépend du navigateur et du type d'élément
>
Exemple 1 :
<style>
:disabled {border: dotted 3px black;}
input[type*="e"]:read-write {font-weight: bold;}
input:checked {border: solid 3px red;}
:required {background-color: yellow;}
input:read-only {font-style: italic;}
</style>
<form method="post" action="test.php">
Nom et Prénom : <input type="text" name="nomPrenom" /><br /
Sexe : <input type="radio" name="s" value="F" />F
<input type="radio" name="s" value="H" />H<br />
Email : <input type="email" name="mail" required /><br />
<input type="text" size="36" value="N'oublier pas de cliquer sur le bouton !" readonly />
<input type="button" value="---" disabled />
</form>
20/02/2023
Exemple 2 :
<style>
input[type*="e"]:invalid {border: solid 3px red;}
input[type*="e"]:valid {border: dotted 3px green;}
</style>
<form method="post" action="traitement.php">
Nom : <input type="text" name="nom" required /><br />
Email : <input type="email" name="mail" required /><br />
</form>
20/02/2023

20/02/2023
13
Exemple 3 :
<style>
input:invalid+span::after { content: '✖'; padding-left: 10px; }
input:valid+span::after { content: '✓'; padding-left: 10px; }
</style>
<form method="post" action="traitement.php">
<label for="b">Quantité de bonbons à commander (par 5) :</label>
<input type="number" name="b" id="b" step="5" min="5" max="50" required />
<span></span><br />
</form>
20/02/2023
Rappel de quelques propriétés CSS
20/02/2023
Propriété Description
font-family Définit la police de caractères. Ex : h3{font-family: arial}
font-size Définit la taille de la police. Ex : p{font-size: 14pt}
font-style Définit le style de l'écriture. Ex : h2{font-style: italic}
text-transform Définit la casse du texte. Ex : p{text-transform: uppercase}
visibility Détermine si un élément est visible ou caché (hidden, visible).
Ex : p{visibility: hidden;}
text-align Définit l'alignement : à gauche, centré, … Ex : p{text-align: center}
text-indent Définit un retrait dans la première ligne. Ex : p{text-indent: 1cm}
background-color Définit la couleur de l'arrière-plan. Ex : div{background-color: red}
background-image Définit l'image de l'arrière plan.
Ex : body{background-image: url(image.gif)}
Rappel de quelques propriétés CSS
20/02/2023
Propriété Description
list-style-type Détermine le type de puce ou de numérotation. (none, disc, circle,
square, decimal, lower-alpha,…). Ex : ul{list-style-type: square}
list-style-image Permet de remplacer la puce ou la numérotation par une image.
Ex : ul{list-style-image:url(image.gif)}
border-spacing Permet de spécifier l’espacement des cellules.
Ex : table{border-spacing: 5px}
border-collapse Permet de fusionner (collapse) ou non (separate) les bordures des
cellules. Ex : table{border-collapse: collapse}
float Spécifie de quel coté de l’élément parent doit s’aligner l’élément
concerné. Ex : img{float: right}
display Permet de modifier le type de rendu d’un élément [none, inline, block,
inline-block (l'élément est une boite, mais lui-même est inséré dans le
flot en mode inline, sans retour à la ligne), …]. Ex : div{display: inline}
Rappel du modèle de boite de CSS
♦ Le modèle de mise en forme des CSS est basé sur le concept de boîte.
- Une boîte est un conteneur, une zone rectangulaire qui affiche à l’écran un contenu.
- Tout élément du HTML peut être considéré comme une boîte.
♦ Quelques propriétés des boites :
- Les dimensions : width, height
Ex : p{width: 300px; height: 100px}
- Style de la bordure : border-style
Ex : div{border-style: solid} p{border-style: dashed dotted solid double}
- Épaisseur de la bordure : border-width
Ex : p.note{border-width: 2px}
- Couleur de la bordure : border-color
Ex : div.remarque{border-color: green}
- Raccourci pour toutes les propriétés de la bordure : border
Ex : h1{ border: 5px solid red }
- Marge intérieure : padding (padding-top, padding-bottom, padding-left, padding-right)
- Marge extérieure : margin (margin-top, margin-bottom, margin-left, margin-right)
margin
content
20/02/2023
padding
border

20/02/2023
14
Nouvelles propriétés CSS3
♦ Les bords arrondis : border-radius
▪ La propriété border-radius permet d'arrondir les 4 coins d'un élément HTML.
▪ Syntaxe : border-radius: x/y;
où x et y sont une valeur ou un pourcentage. Les valeurs de x et y déterminent les
rayons horizontaux et verticaux d’un quart d’ellipse, ce qui induira la courbure de
l’angle. Voici des exemples de l’aspect des coins arrondis obtenus en fonctions de
différents rayons :
x=50px y=50px x=100px y=50px x=50px y=100px
▪ Remarque : Une seule valeur peut être indiquée. Dans ce cas, la valeur de x est
égale à la valeur de y.
20/02/2023
▪ Exemple :
<div style="width:150px; height:60px; border-style:solid; border-radius:25px"></div>
▪ Remarque : Pour implémenter cette propriété sur les versions précédentes des
navigateurs, il faut utiliser les préfixes -webkit- (Chrome, Safari), -moz- (Mozilla)
-moz-border-radius: …;
-webkit-border-radius: …;
▪ Il est possible de spécifier indépendamment un angle pour chaque extrémité.
border-top-left-radius: x y;
border-top-right-radius: x y;
border-bottom-right-radius: x y;
border-bottom-left-radius: x y;
(arrondi du coin supérieur gauche)
(arrondi du coin supérieur droite)
(arrondi du coin inférieur droite)
(arrondi du coin inférieur gauche)
où x et y sont une valeur ou un pourcentage.
20/02/2023
20/02/2023
▪ Il est également possible de définir l’arrondi de chacun des angles, à l’aide d’une écriture
raccourcie :
1) border-radius: liste valeurs / liste valeurs;
La 1ère liste de valeurs représente les rayons horizontaux des angles, la 2ème liste représente les
rayons verticaux des angles. Ex : border-radius: 7px 10px 7px 10px / 10px 7px 10px 7px;
2) border-radius: liste valeurs;
Dans ce cas les rayons horizontaux sont égaux aux rayons verticaux des angles.
- 4 valeurs. (supérieur gauche, supérieur droite, inférieur droite, inférieur gauche)
Ex : border-radius: 30px 60px 10px 100px;
- 3 valeurs. (la 1ère pour le coin supérieur gauche, la 2ème pour les coins supérieur
droite - inférieur gauche, et la dernière pour le coin inférieur droite)
Ex : border-radius: 30px 60px 10px;
- 2 valeurs. (la 1ère pour les coins supérieur gauche- inférieur droite, la 2ème pour les
coins supérieur droite - inférieur gauche). Ex: border-radius: 25px 50px;
- 1 valeur pour les quatre coins. Ex: border-radius: 20px;
Exemple :
<style>
div {width: 100px; height: 100px;}
#id1 {background-color: red; border-radius : 10px 15px 20px25px;}
#id2 {background-color: orange; border-radius: 10px 35px 0;}
#id3 {background-color: gray; border-radius: 50%;}
</style>
<div id="id1"></div>
Remarque : Si la forme de l’élément est carré, on peut former
un rond avec une valeur de border-radius de 50% .
20/02/2023

20/02/2023
15
♦ Les bordures imagées : border-image
▪ La propriété border-image permet l’utilisation d’une image pour l’appliquer à la
bordure d’un élément boîte.
▪ Cette propriété prend une image rectangulaire et la divise en 9 parties (voir la
figure). Les 8 parties du contour sont utilisées pour les coins et les cotés (les
quatre découpes des coins seront placés sur les coins de la bordure, les quatre
découpes intermédiaires rempliront les bordures sur les cotés). Le centre est
caché pour permettre l’affichage du contenu.
20/02/2023
20/02/2023
▪ Syntaxe : border-image: url(fichier_image) a b c d valeur valeur;
où
- url(fichier_image) est l’adresse de l’image.
- a, b, c et d sont la dimension d’un morceau de la grille dans les côtés de la bordure. On
peut ne signaler qu’un seul paramètre. Dans ce cas, celui-ci est appliqué pour les 4
cotés. Avec 2 paramètres, ceux-ci déterminent la dimension des cotés haut/bas et
gauche/droite. 3 paramètres, respectivement le coté haut, gauche/droite et bas. Et enfin
4 paramètres, dans l’ordre, coté haut, coté droit, coté bas et coté gauche.
- valeur soit round, repeat ou stretch
Le mot-clé round reproduit les images et redimensionne celles-ci afin qu’elles s’ajustent
exactement à la largeur et la hauteur de l’élément. Le mot-clé repeat effectue le même
travail que round mais sans ajustement. Et enfin, stretch (valeur par défaut) étire
l’image aux dimensions de la boîte.
Une seule valeur détermine les 4 cotés. Deux valeurs s’appliquent respectivement au
coté haut/bas et gauche/droit.
navigateurs, il faut utiliser les préfixes -webkit- (Chrome, Safari), -moz- (Mozilla)
Exemple 1:
<style>
div {width: 220px; height: 80px;
text-align: center;
border-width : 20px;
border-image: url(border.png) 30 30 round;
-moz-border-image: url(border.png) 30 30 round;
-webkit-border-image: url(border.png) 30 30 round;
}
</style>
<div><h2>HTML5 et CSS3</h2></div>
Si on change la valeur round par stretch on obtient l’affichage suivant :
Remarque : il est nécessaire de fixer la largeur de la bordure (border-width).
20/02/2023
etch;
stretch;
Exemple 2:
Soit l’image border2.png :
<style>
text-align: center;
border-width : 20px;
border-image: url(border2.png) 30 30 stretch;
-moz-border-image: url(border2.png) 30 30 str
-webkit-border-image: url(border2.png) 30 30
}
</style>
<div><h2>HTML5 et CSS3</h2></div>
20/02/2023

20/02/2023
16
20/02/2023
♦ Les ombres :
Avec CSS3, il est possible d’ajouter un effet d’ombre sur le texte ou sur les
éléments boîte.
1. Les ombres sur le texte : text-shadow
▪ L’ombre est définie par un décalage relatif au texte et cette définition peut
éventuellement inclure la couleur et le rayon de flou.
text-shadow: x y z couleur;
▪ Syntaxe :
où
- x y (obligatoires) définissent le décalage de l'ombre par rapport au texte.
x définit la distance horizontale. Une valeur négative placera l'ombre à gauche
du texte.
y définit la distance verticale. Une valeur négative placera l'ombre au-dessus du
texte.
- z est l’intensité du dégradé ou du flou (facultatif, par défaut 0).
- couleur est la couleur de l’ombre.
▪ Exemple :
<style>
h2:first-of-type { text-shadow: 4px 4px 1px red; }
h2:nth-of-type(2) { text-shadow: 4px 4px 3px black; color:white; }
h2:last-of-type { text-shadow: -4px -4px 3px red; }
</style>
<h2>HTML5 et CSS3</h2>
<h2>JAVASCRIPT</h2>
<h2>PHP</h2>
20/02/2023
15/12/2020 63
2. Les ombres sur les éléments boîte : box-shadow
box-shadow: x y z couleur;
▪ Syntaxe :
où
- x y (obligatoires) définissent le décalage de l'ombre.
x définit la distance horizontale. Une valeur négative placera l'ombre à gauche
de l’élément.
y définit la distance verticale. Une valeur négative placera l'ombre au-dessus de
l’élément.
- z est l’intensité du dégradé ou du flou (facultatif, par défaut 0).
- couleur est la couleur de l’ombre.
navigateurs, il faut utiliser les préfixes -webkit- (Chrome, Safari), -moz-
(Mozilla)
20/02/2023
▪ Exemple 1 :
<style>
div {background-color: lightgray; width: 200px; height: 35px; margin: 40px}
#id1 {box-shadow: 9px 9px 2px gray}
#id2 {box-shadow: 9px -9px 15px gray}
#id3 {box-shadow: -9px -9px 7px gray}
</style>
15/12/2020 64
20/02/2023

20/02/2023
17
▪ Exemple 2 :
<style>
img {
width: 150px;
height: 100px;
box-shadow: 6px 6px 12px red;
}
</style>
<img src="einstein.jpg" alt="Einstein" />
15/12/2020 65
20/02/2023
15/12/2020 66
♦ Décoration :
▪ La propriété text-decoration définit la décoration du texte.
▪ En CSS1, cette propriété n'était pas une raccourcie et avait les valeurs suivantes :
none (aucun trait « valeur par défaut »), underline (le texte est souligné), overline
(le texte a un trait au-dessus), line-through (le texte est barré en sonmilieu).
▪ En CSS3, c'est une raccourcie qui permet de paramétrer simultanément les
propriétés suivantes :
text-decoration-line spécifie le type de la décoration utilisée (none, underline,
…). Cette propriété accepte une ou plusieurs valeurs.
text-decoration-color spécifie la couleur de la décorationutilisée.
text-decoration-style spécifie le style à utiliser pour la décoration : solid (solide),
dashed (tirets), dotted (pointillé), double (double) et wavy (ondulé).
Si la valeur de l'une de ses propriétés est absente, la valeur par défaut sera définie
automatiquement. La text-decoration-line est requise.
▪ Syntaxe :
text-decoration: <text-decoration-line> [<text-decoration-color> <text-decoration-style>]
20/02/2023
▪ Exemple :
<style>
p{font-size: 25pt;}
#a {text-decoration: underline;}
#b {text-decoration: underline dashed;}
#c {text-decoration: underline dashed red;}
#d {text-decoration: green wavy underline;}
#e {text-decoration: underline overline double blue;}
</style>
<p id="a">HTML5</p>
<p id="b">CSS3</p>
<p id="c">JavaScript</p>
<p id="d">PHP</p>
<p id="e">XML</p>
15/12/2020 67
20/02/2023
♦ Les arrière-plans multiples :
▪ Le CSS3 rende possible l’affichage de plusieurs images dans un même arrière-plan en
permettant de cumuler les valeurs au sein des propriétés background-image, background-
position, background-repeat.
▪ Exemple :
Soit les images fleur1.png, fleur2.png, fleur3.png, fleur4.png.
<style>
div { width:300px; height: 200px; border: 1px solid gray;
background: url(fleur1.png) top left no-repeat,
url(fleur2.png) top right no-repeat,
url(fleur3.png) bottom right no-repeat,
url(fleur4.png) bottom left no-repeat; }
</style>
<div></div>
15/12/2020 68
20/02/2023

20/02/2023
18
15/12/2020 69
♦ Colonnes multiples :
▪ CSS3 permet de présenter un contenu en plusieurs colonnes.
▪ Syntaxe :
- column-count : entier qui détermine le nombre de colonnes dans lesquelles sera
affiché le contenu de l’élément.
- column-width : valeur qui décrit la largeur optimale de chaque colonne
(facultatif).
- column-gap : valeur qui détermine l’espace ou le padding entre les colonnes.
- column-rule : définit une bordure entre les colonnes.
▪ Remarque : Pour implémenter ces propriétés sur les versions précédentes des
navigateurs, il faut utiliser les préfixes -webkit- (Chrome, Safari), -moz-
(Mozilla)
20/02/2023
Exemple :
<style>
text-align: justify;
column-count: 2;
column-gap: 25px;
column-rule: solid 1px silver;
-moz-column-count: 2;
-moz-column-gap: 25px;
-moz-column-rule: solid 1px silver;
-webkit-column-count: 2;
-webkit-column-gap: 25px;
-webkit-column-rule: solid 1px silver; }
</style>
<div> Il est bien admis que la détermination théorique des propriétés …</div>
15/12/2020 70
20/02/2023
)
♦ Les transitions :
▪ Le principe de base d'une transition CSS3 est de permettre une transition douce entre
l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est
déclenché : - soit via une pseudo-classe telles que :hover, :focus, :active, :checked, …
- soit via JavaScript (modification d'une ou plusieurs class)
▪ Les animations se réalisent principalement à partir de quatre propriétés :
- transition-property : précise les propriétés CSS à animer (ex:width). Ces propriétés sont
précisées en les listant, séparées par des virgules. Le mot clé all (défaut) désigne toutes les
propriétés animables de l’élément.
- transition-duration : définit la durée de la transition en seconde (s) ou milliseconde (ms).
- transition-timing-function : précise la fonction de transition à utiliser
: ease : lent au début, puis rapide puis ralenti sur la fin (valeur par
défaut linear : vitesse constante sur toute la durée de l’animation
ease-in : lent au début et accélère de plus en plus vers la fin
ease-out : rapide sur le début et décélère sur la fin
ease-in-out : le départ et la fin sont lents
- transition-delay : précise l'avance ou le retard du départ de la transition. Celui-ci est exprimé
en s (seconde) ou ms (milliseconde).
15/12/2020 71
20/02/2023
15/12/2020 72
▪ La propriété CSS transition est une propriété raccourcie pour les 4 propriétés citées
plus haut. Syntaxe :
transition: <…--property> <...-duration> [<…-timing-function> <…-delay>]
▪ Utilisez les préfixes ci-dessous pour la compatibilité avec les précédents navigateurs :
-moz- pour mozilla firefox
-o- pour opera
-webkit- pour chrome et safari
-ms- pour internet explorer
Exemple :
transition: width 2s linear;
-webkit-translation: width 2s linear;
…
▪ Remarques :
- La propriété transition-duration doit être fourni, sinon la transition ne se fera pas : 0
seconde par défaut.
- La valeur par défaut de la propriété transition-delay est de 0 ce qui signifie que la propriété
devra débuter sa transition dès que sa valeur change ; les valeurs positives retardent le début
de la transition de la valeur spécifiée. Les valeurs négatives lancent l'animation
immédiatement mais à partir d'un état intermédiaire (comme si la transition avait déjà
commencé).
20/02/2023

20/02/2023
19
Exemple 1 :
<style>
a { padding: 8px; color: black; text-decoration: none;
border-bottom: solid 1px black;
transition: border 1s ease-out;
-webkit-transition: border 1s ease-out ;
-moz-transition: border 1s ease-out;
-o-transition: border 1s ease-out; }
a:hover{ border-bottom: solid 30px blue; }
</style>
<nav>
<a href="#">Accueil</a>
<a href="#">HTML5</a>
<a href="#">CSS3</a>
<a href="#">Contact</a>
</nav>
Au survol de chaque lien, la taille
de la bordure augmente via une
transition d'une durée de 1s :
20/02/2023
Exemple 2 :
<style>
img {
width: 50px;
height: 50px;
transition: width 2s linear, height 2s linear;
}
img:hover {
width: 100px;
height: 100px;
}
</style>
<img src="fleur.jpg" alt="Fleur" />
Au survol de l’image, la largeur
et la hauteur de cette dernière
augmente doucement via une
transition d'une durée de 2s :
20/02/2023

developpement web HTML & CSS web Sémantique

Contenu connexe

Similaire à developpement web HTML & CSS web Sémantique

Plus de YounesOuladSayad1

Dernier

developpement web HTML & CSS web Sémantique