SlideShare une entreprise Scribd logo
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>
<!-- Ici le contenu de la page -->
</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.
Balises sémantiques d’HTML5
- <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
Balises sémantiques d’HTML5
- <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
Balises sémantiques d’HTML5
♦ 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
Balises sémantiques d’HTML5
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
Balises sémantiques d’HTML5
▪ 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
Balises sémantiques d’HTML5
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
Balises sémantiques d’HTML5
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.
Balises sémantiques d’HTML5
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
Balises sémantiques d’HTML5
♦ 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
Balises sémantiques d’HTML5
▪ 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
Balises sémantiques d’HTML5
▪ 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
Balises sémantiques d’HTML5
▪ 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
Nouveautés HTML5 pour les formulaires
▪ 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
Nouveautés HTML5 pour les formulaires
▪ 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
Nouveautés HTML5 pour les formulaires
▪ 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
Nouveautés HTML5 pour les formulaires
▪ 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
Nouveautés HTML5 pour les formulaires
▪ 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
Nouveautés HTML5 pour les formulaires
▪ Les curseurs : <input type="range">
Cette balise a les attributs suivants :
▪ 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
Nouveautés HTML5 pour les formulaires
▪ 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).
Cette balise a les attributs suivants :
▪ 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
Nouveautés HTML5 pour les formulaires
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
Nouveautés HTML5 pour les formulaires
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
Nouveautés HTML5 pour les formulaires
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
Nouveautés HTML5 pour les formulaires
- 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 />
<input type="submit" value="Envoyer" />
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
Nouveaux sélecteurs CSS3
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 :
Dans le <head> de la page HTML :
<style>
input[name^="nom"] {background-color: green;}
input[title*="dip"] {color: red;}
</style>
Dans le <body> de la page HTML :
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
Nouveaux sélecteurs CSS3
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 :
Dans le <head> de la page HTML :
<style>
h1 ~ p {color: red;}
</style>
Dans le <body> de la page HTML :
<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).
Nouveaux sélecteurs CSS3
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 :
Dans le <head> de la page HTML :
<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>
Dans le <body> de la page HTML :
<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
Nouveaux sélecteurs de CSS3
Exemple 2 :
Dans le <head> de la page HTML :
<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>
Dans le <body> de la page HTML :
<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
Nouveaux sélecteurs de CSS3
Exemple 3 :
Dans le <head> de la page HTML :
<style>
em:only-child {text-decoration: underline}
strong:only-of-type {background-color:lightblue}
</style>
Dans le <body> de la page HTML :
<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
Nouveaux sélecteurs CSS3
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
Nouveaux sélecteurs de CSS3
>
Exemple 1 :
Dans le <head> de la page HTML:
<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>
Dans le <body> de la page HTML:
<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 />
<input type="submit" value="Envoyer" />
</form>
20/02/2023
Nouveaux sélecteurs de CSS3
Exemple 2 :
Dans le <head> de la page HTML :
<style>
input[type*="e"]:invalid {border: solid 3px red;}
input[type*="e"]:valid {border: dotted 3px green;}
</style>
Dans le <body> de la page HTML :
<form method="post" action="traitement.php">
Nom : <input type="text" name="nom" required /><br />
Email : <input type="email" name="mail" required /><br />
<input type="submit" value="Envoyer" />
</form>
20/02/2023
20/02/2023
13
Nouveaux sélecteurs de CSS3
Exemple 3 :
Dans le <head> de la page HTML :
<style>
input:invalid+span::after { content: '✖'; padding-left: 10px; }
input:valid+span::after { content: '✓'; padding-left: 10px; }
</style>
Dans le <body> de la page HTML :
<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 />
<input type="submit" value="Envoyer" />
</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
Nouvelles propriétés CSS3
▪ 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
Nouvelles propriétés CSS3
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;
Nouvelles propriétés CSS3
Exemple :
Dans le <head> de la page HTML :
<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>
Dans le <body> de la page HTML :
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></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
Nouvelles propriétés CSS3
♦ 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
Nouvelles propriétés CSS3
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.
▪ 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)
Nouvelles propriétés CSS3
Exemple 1:
Dans le <head> de la page HTML :
<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>
Dans le <body> de la page HTML :
<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
Nouvelles propriétés CSS3
etch;
stretch;
Exemple 2:
Soit l’image border2.png :
Dans le <head> de la page HTML :
<style>
div {width: 220px; height: 80px;
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>
Dans le <body> de la page HTML :
<div><h2>HTML5 et CSS3</h2></div>
20/02/2023
20/02/2023
16
Nouvelles propriétés CSS3
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.
Nouvelles propriétés CSS3
▪ Exemple :
Dans le <head> de la page HTML :
<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>
Dans le <body> de la page HTML:
<h2>HTML5 et CSS3</h2>
<h2>JAVASCRIPT</h2>
<h2>PHP</h2>
20/02/2023
Nouvelles propriétés CSS3
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.
▪ 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)
20/02/2023
Nouvelles propriétés CSS3
▪ Exemple 1 :
Dans le <head> de la page HTML :
<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>
Dans le <body> de la page HTML:
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
15/12/2020 64
20/02/2023
20/02/2023
17
Nouvelles propriétés CSS3
▪ Exemple 2 :
Dans le <head> de la page HTML:
<style>
img {
width: 150px;
height: 100px;
box-shadow: 6px 6px 12px red;
}
</style>
Dans le <body> de la page HTML:
<img src="einstein.jpg" alt="Einstein" />
15/12/2020 65
20/02/2023
Nouvelles propriétés CSS3
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
Nouvelles propriétés CSS3
▪ Exemple :
Dans le <head> de la page HTML :
<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>
Dans le <body> de la page HTML :
<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
Nouvelles propriétés CSS3
♦ 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.
Dans le <head> de la page HTML :
<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>
Dans le <body> de la page HTML :
<div></div>
15/12/2020 68
20/02/2023
20/02/2023
18
Nouvelles propriétés CSS3
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
Nouvelles propriétés CSS3
Exemple :
Dans le <head> de la page HTML :
<style>
div {width: 345px; height: 180px;
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>
Dans le <body> de la page HTML :
<div> Il est bien admis que la détermination théorique des propriétés …</div>
15/12/2020 70
20/02/2023
Nouvelles propriétés CSS3
)
♦ 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
Nouvelles propriétés CSS3
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
Nouvelles propriétés CSS3
Exemple 1 :
Dans le <head> de la page HTML :
<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>
Dans le <body> de la page HTML :
<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
Nouvelles propriétés CSS3
Exemple 2 :
Dans le <head> de la page HTML :
<style>
img {
width: 50px;
height: 50px;
transition: width 2s linear, height 2s linear;
}
img:hover {
width: 100px;
height: 100px;
}
</style>
Dans le <body> de la page HTML :
<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

Contenu connexe

Similaire à developpement web HTML & CSS web Sémantique

Atelier template
Atelier templateAtelier template
Atelier template
Pierre Sempé
 
Cours html5
Cours html5Cours html5
Cours html5
Abdelmonem NAAMANE
 
CSS 3
CSS 3CSS 3
cours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptxcours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptx
radjadjouambi1
 
cours Cascading style sheet developpement web
cours Cascading style sheet developpement webcours Cascading style sheet developpement web
cours Cascading style sheet developpement web
YounesOuladSayad1
 
CreativeLab Html5 workshop
CreativeLab Html5 workshopCreativeLab Html5 workshop
CreativeLab Html5 workshop
Creative-Lab
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
ABDENNACEURGHANDRI1
 
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
Yves Van Goethem
 
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
Abdessattar Ettaieb
 
MMI Web Design P2
MMI Web Design P2MMI Web Design P2
MMI Web Design P2
David Raichman
 
Cours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptxCours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptx
Mounir Gouiouez
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
Benoît Simard
 
CSS
CSSCSS
CSS
adil h
 
Formation html5
Formation html5Formation html5
Formation html5
Voyelle Voyelle
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
tanokouakouludovic
 
Programmation web1partie3
Programmation web1partie3Programmation web1partie3
Programmation web1partie3
Annabi Gihed
 
4IPDW - projet personnel.docx
4IPDW - projet personnel.docx4IPDW - projet personnel.docx
4IPDW - projet personnel.docx
TarikElMahtouchi1
 

Similaire à developpement web HTML & CSS web Sémantique (20)

Atelier template
Atelier templateAtelier template
Atelier template
 
Cours html5
Cours html5Cours html5
Cours html5
 
CSS 3
CSS 3CSS 3
CSS 3
 
cours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptxcours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptx
 
cours Cascading style sheet developpement web
cours Cascading style sheet developpement webcours Cascading style sheet developpement web
cours Cascading style sheet developpement web
 
CreativeLab Html5 workshop
CreativeLab Html5 workshopCreativeLab Html5 workshop
CreativeLab Html5 workshop
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08
 
Mmi Web Design P2
Mmi Web Design P2Mmi Web Design P2
Mmi Web Design P2
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
 
Association 2 0
Association 2 0Association 2 0
Association 2 0
 
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
 
MMI Web Design P2
MMI Web Design P2MMI Web Design P2
MMI Web Design P2
 
Cours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptxCours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptx
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
CSS
CSSCSS
CSS
 
Formation html5
Formation html5Formation html5
Formation html5
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
Programmation web1partie3
Programmation web1partie3Programmation web1partie3
Programmation web1partie3
 
4IPDW - projet personnel.docx
4IPDW - projet personnel.docx4IPDW - projet personnel.docx
4IPDW - projet personnel.docx
 

Plus de YounesOuladSayad1

652469898-TP-1-Realisation-d-Un-Cable-RJ45.pdf
652469898-TP-1-Realisation-d-Un-Cable-RJ45.pdf652469898-TP-1-Realisation-d-Un-Cable-RJ45.pdf
652469898-TP-1-Realisation-d-Un-Cable-RJ45.pdf
YounesOuladSayad1
 
CHAPITRE3_Fondements_Big_Data_MR_YARN - converted (1).pdf
CHAPITRE3_Fondements_Big_Data_MR_YARN - converted (1).pdfCHAPITRE3_Fondements_Big_Data_MR_YARN - converted (1).pdf
CHAPITRE3_Fondements_Big_Data_MR_YARN - converted (1).pdf
YounesOuladSayad1
 
Machine Learning Support Vector Machines.pdf
Machine Learning Support Vector Machines.pdfMachine Learning Support Vector Machines.pdf
Machine Learning Support Vector Machines.pdf
YounesOuladSayad1
 
les systemes d'exploitation la gestion des entrés sorties
les systemes d'exploitation la gestion des entrés sortiesles systemes d'exploitation la gestion des entrés sorties
les systemes d'exploitation la gestion des entrés sorties
YounesOuladSayad1
 
CHAPITRE 1 systeme d'exploitation environnement
CHAPITRE 1 systeme d'exploitation environnementCHAPITRE 1 systeme d'exploitation environnement
CHAPITRE 1 systeme d'exploitation environnement
YounesOuladSayad1
 
chapitre 0 systemes d'exploitation sommaire
chapitre 0 systemes d'exploitation sommairechapitre 0 systemes d'exploitation sommaire
chapitre 0 systemes d'exploitation sommaire
YounesOuladSayad1
 
initiation_a_access microsoft office access
initiation_a_access microsoft office accessinitiation_a_access microsoft office access
initiation_a_access microsoft office access
YounesOuladSayad1
 
PJ - machine learning avec scikit-learn.pdf
PJ - machine learning avec scikit-learn.pdfPJ - machine learning avec scikit-learn.pdf
PJ - machine learning avec scikit-learn.pdf
YounesOuladSayad1
 
cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024
YounesOuladSayad1
 
cours web developpement statique AJAX 2024
cours web developpement statique AJAX  2024cours web developpement statique AJAX  2024
cours web developpement statique AJAX 2024
YounesOuladSayad1
 
Gestion de projet en l'Information_compressed.pdf
Gestion de projet en l'Information_compressed.pdfGestion de projet en l'Information_compressed.pdf
Gestion de projet en l'Information_compressed.pdf
YounesOuladSayad1
 
cours les formulaires 2 microsoft access
cours les formulaires 2 microsoft accesscours les formulaires 2 microsoft access
cours les formulaires 2 microsoft access
YounesOuladSayad1
 
cours TRI selection insertion bublle sort
cours TRI selection insertion bublle sortcours TRI selection insertion bublle sort
cours TRI selection insertion bublle sort
YounesOuladSayad1
 
cours mysql machine learning SQL MYSQL 2024
cours mysql machine learning SQL MYSQL 2024cours mysql machine learning SQL MYSQL 2024
cours mysql machine learning SQL MYSQL 2024
YounesOuladSayad1
 
javascript web developpement framework web
javascript web developpement framework webjavascript web developpement framework web
javascript web developpement framework web
YounesOuladSayad1
 
developpement web framework cms developpement brute
developpement web framework cms developpement brutedeveloppement web framework cms developpement brute
developpement web framework cms developpement brute
YounesOuladSayad1
 
Programmation Web developpement dynamique
Programmation Web developpement dynamiqueProgrammation Web developpement dynamique
Programmation Web developpement dynamique
YounesOuladSayad1
 

Plus de YounesOuladSayad1 (17)

652469898-TP-1-Realisation-d-Un-Cable-RJ45.pdf
652469898-TP-1-Realisation-d-Un-Cable-RJ45.pdf652469898-TP-1-Realisation-d-Un-Cable-RJ45.pdf
652469898-TP-1-Realisation-d-Un-Cable-RJ45.pdf
 
CHAPITRE3_Fondements_Big_Data_MR_YARN - converted (1).pdf
CHAPITRE3_Fondements_Big_Data_MR_YARN - converted (1).pdfCHAPITRE3_Fondements_Big_Data_MR_YARN - converted (1).pdf
CHAPITRE3_Fondements_Big_Data_MR_YARN - converted (1).pdf
 
Machine Learning Support Vector Machines.pdf
Machine Learning Support Vector Machines.pdfMachine Learning Support Vector Machines.pdf
Machine Learning Support Vector Machines.pdf
 
les systemes d'exploitation la gestion des entrés sorties
les systemes d'exploitation la gestion des entrés sortiesles systemes d'exploitation la gestion des entrés sorties
les systemes d'exploitation la gestion des entrés sorties
 
CHAPITRE 1 systeme d'exploitation environnement
CHAPITRE 1 systeme d'exploitation environnementCHAPITRE 1 systeme d'exploitation environnement
CHAPITRE 1 systeme d'exploitation environnement
 
chapitre 0 systemes d'exploitation sommaire
chapitre 0 systemes d'exploitation sommairechapitre 0 systemes d'exploitation sommaire
chapitre 0 systemes d'exploitation sommaire
 
initiation_a_access microsoft office access
initiation_a_access microsoft office accessinitiation_a_access microsoft office access
initiation_a_access microsoft office access
 
PJ - machine learning avec scikit-learn.pdf
PJ - machine learning avec scikit-learn.pdfPJ - machine learning avec scikit-learn.pdf
PJ - machine learning avec scikit-learn.pdf
 
cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024
 
cours web developpement statique AJAX 2024
cours web developpement statique AJAX  2024cours web developpement statique AJAX  2024
cours web developpement statique AJAX 2024
 
Gestion de projet en l'Information_compressed.pdf
Gestion de projet en l'Information_compressed.pdfGestion de projet en l'Information_compressed.pdf
Gestion de projet en l'Information_compressed.pdf
 
cours les formulaires 2 microsoft access
cours les formulaires 2 microsoft accesscours les formulaires 2 microsoft access
cours les formulaires 2 microsoft access
 
cours TRI selection insertion bublle sort
cours TRI selection insertion bublle sortcours TRI selection insertion bublle sort
cours TRI selection insertion bublle sort
 
cours mysql machine learning SQL MYSQL 2024
cours mysql machine learning SQL MYSQL 2024cours mysql machine learning SQL MYSQL 2024
cours mysql machine learning SQL MYSQL 2024
 
javascript web developpement framework web
javascript web developpement framework webjavascript web developpement framework web
javascript web developpement framework web
 
developpement web framework cms developpement brute
developpement web framework cms developpement brutedeveloppement web framework cms developpement brute
developpement web framework cms developpement brute
 
Programmation Web developpement dynamique
Programmation Web developpement dynamiqueProgrammation Web developpement dynamique
Programmation Web developpement dynamique
 

Dernier

Theorie du trafic on telecommunication network
Theorie du trafic on telecommunication networkTheorie du trafic on telecommunication network
Theorie du trafic on telecommunication network
MahamaneAliSalatou
 
Webinaire BL 28_06_02_Consommation Energie.pdf
Webinaire BL 28_06_02_Consommation Energie.pdfWebinaire BL 28_06_02_Consommation Energie.pdf
Webinaire BL 28_06_02_Consommation Energie.pdf
Institut de l'Elevage - Idele
 
analyse des risques professionnelles .pptx
analyse des risques professionnelles .pptxanalyse des risques professionnelles .pptx
analyse des risques professionnelles .pptx
MhmM47
 
cours-sur-les-stations-de-pompageen génie civil.pdf
cours-sur-les-stations-de-pompageen génie civil.pdfcours-sur-les-stations-de-pompageen génie civil.pdf
cours-sur-les-stations-de-pompageen génie civil.pdf
afigloria194
 
Webinaire BL 28_06_01_robots de traite.pdf
Webinaire BL 28_06_01_robots de traite.pdfWebinaire BL 28_06_01_robots de traite.pdf
Webinaire BL 28_06_01_robots de traite.pdf
Institut de l'Elevage - Idele
 
Note agro-climatique et prairies n°5 - Juillet 2024
Note agro-climatique et prairies n°5 - Juillet 2024Note agro-climatique et prairies n°5 - Juillet 2024
Note agro-climatique et prairies n°5 - Juillet 2024
idelewebmestre
 
Etude de la faisabilité de la climatisation solaire pour l’habitat individuel...
Etude de la faisabilité de la climatisation solaire pour l’habitat individuel...Etude de la faisabilité de la climatisation solaire pour l’habitat individuel...
Etude de la faisabilité de la climatisation solaire pour l’habitat individuel...
iheberry
 
cours tres important d'hydraulique urbain.pdf
cours tres important d'hydraulique urbain.pdfcours tres important d'hydraulique urbain.pdf
cours tres important d'hydraulique urbain.pdf
cheikhmoussandiaye1
 
Webinaire BL 28_06_03_Transmissibilité.pdf
Webinaire BL 28_06_03_Transmissibilité.pdfWebinaire BL 28_06_03_Transmissibilité.pdf
Webinaire BL 28_06_03_Transmissibilité.pdf
Institut de l'Elevage - Idele
 

Dernier (9)

Theorie du trafic on telecommunication network
Theorie du trafic on telecommunication networkTheorie du trafic on telecommunication network
Theorie du trafic on telecommunication network
 
Webinaire BL 28_06_02_Consommation Energie.pdf
Webinaire BL 28_06_02_Consommation Energie.pdfWebinaire BL 28_06_02_Consommation Energie.pdf
Webinaire BL 28_06_02_Consommation Energie.pdf
 
analyse des risques professionnelles .pptx
analyse des risques professionnelles .pptxanalyse des risques professionnelles .pptx
analyse des risques professionnelles .pptx
 
cours-sur-les-stations-de-pompageen génie civil.pdf
cours-sur-les-stations-de-pompageen génie civil.pdfcours-sur-les-stations-de-pompageen génie civil.pdf
cours-sur-les-stations-de-pompageen génie civil.pdf
 
Webinaire BL 28_06_01_robots de traite.pdf
Webinaire BL 28_06_01_robots de traite.pdfWebinaire BL 28_06_01_robots de traite.pdf
Webinaire BL 28_06_01_robots de traite.pdf
 
Note agro-climatique et prairies n°5 - Juillet 2024
Note agro-climatique et prairies n°5 - Juillet 2024Note agro-climatique et prairies n°5 - Juillet 2024
Note agro-climatique et prairies n°5 - Juillet 2024
 
Etude de la faisabilité de la climatisation solaire pour l’habitat individuel...
Etude de la faisabilité de la climatisation solaire pour l’habitat individuel...Etude de la faisabilité de la climatisation solaire pour l’habitat individuel...
Etude de la faisabilité de la climatisation solaire pour l’habitat individuel...
 
cours tres important d'hydraulique urbain.pdf
cours tres important d'hydraulique urbain.pdfcours tres important d'hydraulique urbain.pdf
cours tres important d'hydraulique urbain.pdf
 
Webinaire BL 28_06_03_Transmissibilité.pdf
Webinaire BL 28_06_03_Transmissibilité.pdfWebinaire BL 28_06_03_Transmissibilité.pdf
Webinaire BL 28_06_03_Transmissibilité.pdf
 

developpement web HTML & CSS web Sémantique

  • 1. 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> <!-- Ici le contenu de la page --> </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
  • 2. 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. Balises sémantiques d’HTML5 - <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 Balises sémantiques d’HTML5 - <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 Balises sémantiques d’HTML5 ♦ 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
  • 3. 20/02/2023 3 Balises sémantiques d’HTML5 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 Balises sémantiques d’HTML5 ▪ 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 Balises sémantiques d’HTML5 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
  • 4. 20/02/2023 4 Exercice 1 : 20/02/2023 Balises sémantiques d’HTML5 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. Balises sémantiques d’HTML5 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
  • 5. 20/02/2023 5 20/02/2023 Balises sémantiques d’HTML5 ♦ 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 Balises sémantiques d’HTML5 ▪ 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 Balises sémantiques d’HTML5 ▪ 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
  • 6. 20/02/2023 6 Balises sémantiques d’HTML5 ▪ 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 Nouveautés HTML5 pour les formulaires ▪ 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
  • 7. 20/02/2023 7 Nouveautés HTML5 pour les formulaires ▪ 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 Nouveautés HTML5 pour les formulaires ▪ 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 Nouveautés HTML5 pour les formulaires ▪ 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 Nouveautés HTML5 pour les formulaires ▪ 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
  • 8. 20/02/2023 8 Nouveautés HTML5 pour les formulaires ▪ Les curseurs : <input type="range"> Cette balise a les attributs suivants : ▪ 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 Nouveautés HTML5 pour les formulaires ▪ 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). Cette balise a les attributs suivants : ▪ 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 Nouveautés HTML5 pour les formulaires 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 Nouveautés HTML5 pour les formulaires 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
  • 9. 20/02/2023 9 Nouveautés HTML5 pour les formulaires 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 Nouveautés HTML5 pour les formulaires - 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 /> <input type="submit" value="Envoyer" /> 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>
  • 10. 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 Nouveaux sélecteurs CSS3 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 : Dans le <head> de la page HTML : <style> input[name^="nom"] {background-color: green;} input[title*="dip"] {color: red;} </style> Dans le <body> de la page HTML : 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.
  • 11. 20/02/2023 11 Nouveaux sélecteurs CSS3 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 : Dans le <head> de la page HTML : <style> h1 ~ p {color: red;} </style> Dans le <body> de la page HTML : <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). Nouveaux sélecteurs CSS3 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 : Dans le <head> de la page HTML : <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> Dans le <body> de la page HTML : <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 Nouveaux sélecteurs de CSS3 Exemple 2 : Dans le <head> de la page HTML : <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> Dans le <body> de la page HTML : <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
  • 12. 20/02/2023 12 Nouveaux sélecteurs de CSS3 Exemple 3 : Dans le <head> de la page HTML : <style> em:only-child {text-decoration: underline} strong:only-of-type {background-color:lightblue} </style> Dans le <body> de la page HTML : <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 Nouveaux sélecteurs CSS3 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 Nouveaux sélecteurs de CSS3 > Exemple 1 : Dans le <head> de la page HTML: <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> Dans le <body> de la page HTML: <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 /> <input type="submit" value="Envoyer" /> </form> 20/02/2023 Nouveaux sélecteurs de CSS3 Exemple 2 : Dans le <head> de la page HTML : <style> input[type*="e"]:invalid {border: solid 3px red;} input[type*="e"]:valid {border: dotted 3px green;} </style> Dans le <body> de la page HTML : <form method="post" action="traitement.php"> Nom : <input type="text" name="nom" required /><br /> Email : <input type="email" name="mail" required /><br /> <input type="submit" value="Envoyer" /> </form> 20/02/2023
  • 13. 20/02/2023 13 Nouveaux sélecteurs de CSS3 Exemple 3 : Dans le <head> de la page HTML : <style> input:invalid+span::after { content: '✖'; padding-left: 10px; } input:valid+span::after { content: '✓'; padding-left: 10px; } </style> Dans le <body> de la page HTML : <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 /> <input type="submit" value="Envoyer" /> </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
  • 14. 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 Nouvelles propriétés CSS3 ▪ 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 Nouvelles propriétés CSS3 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; Nouvelles propriétés CSS3 Exemple : Dans le <head> de la page HTML : <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> Dans le <body> de la page HTML : <div id="id1"></div> <div id="id2"></div> <div id="id3"></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
  • 15. 20/02/2023 15 Nouvelles propriétés CSS3 ♦ 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 Nouvelles propriétés CSS3 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. ▪ 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) Nouvelles propriétés CSS3 Exemple 1: Dans le <head> de la page HTML : <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> Dans le <body> de la page HTML : <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 Nouvelles propriétés CSS3 etch; stretch; Exemple 2: Soit l’image border2.png : Dans le <head> de la page HTML : <style> div {width: 220px; height: 80px; 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> Dans le <body> de la page HTML : <div><h2>HTML5 et CSS3</h2></div> 20/02/2023
  • 16. 20/02/2023 16 Nouvelles propriétés CSS3 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. Nouvelles propriétés CSS3 ▪ Exemple : Dans le <head> de la page HTML : <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> Dans le <body> de la page HTML: <h2>HTML5 et CSS3</h2> <h2>JAVASCRIPT</h2> <h2>PHP</h2> 20/02/2023 Nouvelles propriétés CSS3 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. ▪ 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) 20/02/2023 Nouvelles propriétés CSS3 ▪ Exemple 1 : Dans le <head> de la page HTML : <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> Dans le <body> de la page HTML: <div id="id1"></div> <div id="id2"></div> <div id="id3"></div> 15/12/2020 64 20/02/2023
  • 17. 20/02/2023 17 Nouvelles propriétés CSS3 ▪ Exemple 2 : Dans le <head> de la page HTML: <style> img { width: 150px; height: 100px; box-shadow: 6px 6px 12px red; } </style> Dans le <body> de la page HTML: <img src="einstein.jpg" alt="Einstein" /> 15/12/2020 65 20/02/2023 Nouvelles propriétés CSS3 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 Nouvelles propriétés CSS3 ▪ Exemple : Dans le <head> de la page HTML : <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> Dans le <body> de la page HTML : <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 Nouvelles propriétés CSS3 ♦ 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. Dans le <head> de la page HTML : <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> Dans le <body> de la page HTML : <div></div> 15/12/2020 68 20/02/2023
  • 18. 20/02/2023 18 Nouvelles propriétés CSS3 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 Nouvelles propriétés CSS3 Exemple : Dans le <head> de la page HTML : <style> div {width: 345px; height: 180px; 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> Dans le <body> de la page HTML : <div> Il est bien admis que la détermination théorique des propriétés …</div> 15/12/2020 70 20/02/2023 Nouvelles propriétés CSS3 ) ♦ 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 Nouvelles propriétés CSS3 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
  • 19. 20/02/2023 19 Nouvelles propriétés CSS3 Exemple 1 : Dans le <head> de la page HTML : <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> Dans le <body> de la page HTML : <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 Nouvelles propriétés CSS3 Exemple 2 : Dans le <head> de la page HTML : <style> img { width: 50px; height: 50px; transition: width 2s linear, height 2s linear; } img:hover { width: 100px; height: 100px; } </style> Dans le <body> de la page HTML : <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