Support Dev Web HTML5 CSS3 JS
Transféré par
Aurelien tamouSupport Dev Web HTML5 CSS3 JS
Transféré par
Aurelien tamouTraduit automatiquement
Machine Translated byparGoogle
AFCINEWSOFT
SOUTIEN AUX COURS
HTML5
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5
Introduction
Historique 6
Organismes de normalisation 7
Définition de HTML5 8
Principe du HTML5 8
Quand choisir HTML5/CSS3 8
Le balisage
Structure d'une page 10
Contenu et nouvelle balise 11
Exemple : utiliser de nouveaux éléments 14
Résumé de l'étiquette
Nouveaux articles 26
Nouveaux attributs 26
Modifications des balises et des attributs 29
Obsolescence des attributs 30
Les formes
34
Composants d'un formulaire
Espace réservé, requis, modèle et validation 35
Les nouveaux types <input> 39
2
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5
CSS 3
50
Préfixe du navigateur
Les frontières 50
Les ombres 52
54
Transparence et opacité
55
Des origines multiples
57
Les dégradés
Les transformations 60
Transitions 62
Les animations 65
Multimédia
Audio 72
Vidéo 74
3
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5
4
Traduit automatiquement
Machine Translated byparGoogle
Google
Introduction au HTML 5
Introduction
Historique
Organismes de normalisation
Définition de HTML5
Principe du HTML5
Quand choisir HTML5/CSS3
5
Traduit automatiquement
Machine Translated byparGoogle
Google
INTRODUCTION HTML 5
Historique
• 1962 : l’US Air Force ordonne la création d’un réseau de communications militaires capable de résister à une attaque nucléaire.
• 1964 : Paul Baran crée un réseau de type toile, évitant ainsi un système central vulnérable.
• 1969 : ARPANET est créé pour relier 4 universités, indépendamment d'un objectif militaire. (Présentation publique en
1972)
• 1971 : 1er courrier électronique. Le caractère @ est déjà présent. (Amélioré en 1972 avec une boîte aux lettres dotée d'un
système d'archivage, de tri et de « redirection »)
• 1976 : Déploiement du protocole TCP (débuté en 1972) permettant la transmission de paquets et la gestion des
erreurs. Il sera scindé en 2 protocoles en 1978 : TCP/IP
• 1980 : Tim Bernerslee et Robert Caillau développent un système de navigation hypertexte. (ancêtre des navigateurs)
• 1984 : Mise en place du système de nommage DNS. (Domain Name System) Il s'agit d'un service qui traduit un nom
de domaine en plusieurs types d'informations qui lui sont associées, notamment les adresses IP de la machine portant ce
nom.
• 1986 : Création du langage SGML (Standard General Markup Language) pour structurer divers contenus, considéré
comme le premier langage de balisage.
• 1991 : Tim Bernerslee développe le protocole HTTP (Hyper Text Transfer Protocol) et le langage HTML (Hyper Text
Markup Language). Naissance du World Wide Web (WWW).
• 1996 :
o 1ère spécification HTML 2.0 par le W3C (World Wide Web Consortium). HTML 1.0 n'a jamais
réellement existé.
o Apparence du CSS (Cascade Style Sheet) créé par Hâkon Wium Lie.
• De 1997 à 1999 :
o Spécifications HTML 3.2, 4.0 et 4.01
ou spécification CSS 2.0
o Création de XML (eXtensible Markup Language)
• 2000 : Le W3C lance XHTML 1.0, celuici a exactement le même contenu que html 4.01 la différence est dans la syntaxe,
xhtml a suivi les règles de xml. Par exemple tous les attributs d'une balise sont maintenant exprimés uniquement en
minuscules. (cette sortie coïncide avec l'essor des navigateurs compatibles avec CSS).
• 2001 : Le W3C recommande le XHTML 1.1, celuici est entièrement en XML, cependant, il y a un gros problème : le
navigateur le plus populaire à l'époque ne peut pas l'interpréter (c'est à dire Explorer). Le W3C perd le contact avec la réalité des
publications web. Cela ne l'empêche pas de se lancer dans le XHTML 2.0, cependant, celuici présente plusieurs problèmes
techniques et ne répond toujours pas aux besoins des développeurs de l'époque.
• 2004 : scission au sein du W3C. Les représentants d'Opera, d'Apple et de Mozilla ne sont pas présents
6
Traduit automatiquement
Machine Translated byparGoogle
Google
Introduction au HTML 5
accord avec les priorités du W3C. Proposition de reprendre le développement HTML pour la création d'applications web mais celleci est rejetée.
Des représentants d'Opera (dont Ian Hickson) et d'autres forment leur propre groupe WHATWG (Web Hypertext Application Technology Working Group)
• 2006 : Tim BernersLee admet que la migration de HTML vers XML était une erreur. Quelques mois plus tard, le W3C travaille sur HTML 5 (avec espaces)
et travaille toujours sur XHTML 2.0. Le WHATWG travaille sur HTML5 (sans espaces).
• 2007 : Le W3C accepte les propositions de recommandations du WHATWG sur HTML5 (sans espaces).
• 2009 : le format XHTML 2.0 est définitivement mort
• 2012 : La spécification HTML5 doit devenir une « recommandation candidate », c’estàdire prête dans le discours normatif.
Organismes de normalisation
IETF
L'Internet Engineering Task Force, en abrégé IETF, traduit littéralement de l'anglais par « Internet Engineering Detachment »
est un groupe informel, international, ouvert à toute personne, qui participe au développement des normes Internet. L'IETF produit la plupart des nouvelles
normes Internet. L'IETF est un groupe informel, sans statut, sans membres, sans adhésion. Le travail technique est accompli dans une centaine de groupes
de travail. En fait, un groupe est généralement constitué d'une liste de courrier électronique. L'IETF tient trois réunions par an.
W3C
Le World Wide Web Consortium, en abrégé W3C, est une organisation de normalisation à but non lucratif fondée en octobre 1994 pour
promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, SPARQL, CSS, PNG, SVG et SOAP. Fonctionnant
comme un consortium international, il comprend 378 entreprises partenaires en 2012.
Le W3C a été fondé par Tim BernersLee après avoir quitté le CERN en octobre 1994. Le W3C a été fondé au MIT/LCS
(Massachusetts Institute of Technology / Laboratory for Computer Science) avec le soutien de l'agence de défense américaine DARPA et de la Commission
européenne.
QUOI DE NEUF
Le groupe de travail sur la technologie des applications hypertextes Web (ou WHATWG) est une collaboration informelle de navigateurs Web
développeurs dédiés au développement de nouvelles technologies pour faciliter l'écriture et le déploiement d'applications sur le Web.
La liste de diffusion du groupe de travail est publique et ouverte à tous. La Fondation Mozilla, Opera Software et Apple, Inc. sont les principaux contributeurs.
contributeurs.
Ce groupe de travail se limite aux technologies qu'il considère comme non représentables dans les navigateurs Web en fonction des
implémentations, et notamment celles d'Internet Explorer. Elle se présente notamment comme une réponse à la lenteur supposée du développement
des standards par le W3C et au caractère supposé trop fermé de son processus interne d'élaboration des spécifications.
Cependant, de nombreux participants à ce projet sont également des membres actifs du W3C, et le nouveau groupe de travail HTML du W3C a adopté
les propositions du WHATWG en 2007 comme base pour un futur HTML5.
7
Traduit automatiquement
Machine Translated byparGoogle
Google
INTRODUCTION HTML 5
Définition de HTML5
HTML5 est une combinaison de nouvelles balises HTML, de propriétés CSS3, de JavaScript et
plusieurs technologies liées mais structurellement distinctes de la spécification HTML5.
Principe du HTML5
• HTML5 devra prendre en charge le contenu existant (pas d’année zéro du HTML5)
• S'il existe une manière commune d'accomplir une tâche parmi les concepteurs Web (même mauvaise), elle devrait être codifiée en HTML5 (« si ce
n'est pas cassé, ne le réparez pas »).
• En cas de conflit, l'utilisateur, les concepteurs Web, les implémenteurs (dans les navigateurs), les spécificateurs et finalement la beauté du code sont
prioritaires.
Quand choisir HTML5/CSS3
Le W3C recommande désormais aux développeurs web d'utiliser HTML 5. De plus, la majorité des navigateurs semblent avoir intégré les
spécifications CSS3 et celuici est le plus à même de répondre aux nouveaux supports de diffusion web (tablettes, téléphones, etc.).
La question est plutôt de savoir quand ne pas l'utiliser. Il existe encore une majorité d'administrations qui travaillent encore avec des versions d'Internet
Explorer antérieures à la version 9.0, dans ce cas il vaut mieux rester dans les recommandations du HTML 4.0.1. Pour le reste, optez pour le HTML5.
8
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 LE MARQUAGE
Le balisage
Structure d'une page
Contenu et nouvelle balise
Exemple : Utilisation des nouveaux éléments
9
Traduit automatiquement
Machine Translated byparGoogle
Google
LE MARQUAGE HTML 5
Structure d'une page
Les éléments de base
HTML5 est une amélioration de HTML4, avec des simplifications par rapport à la version XHTML. Tout document peut donc
commence par la déclaration doctype et est suivi de l'élément racine html qui inclut les éléments head et body.
Type de document
La déclaration doctype est traditionnellement utilisée pour spécifier le type de balisage du document.
Celui pour XHTML 1.0 était :
<!DOCTYPE html PUBLIC «//W3C//DTD XHTML 1.0 Transitional//FR» «http://www.w3.org/TR/ xhtml1/DTD/xhtml1
transitional.dtd»>
Celui de HTML 4.01 était :
<!DOCTYPE html PUBLIC «//W3C//DTD HTML 4.01/FR» «http://www.w3.org/TR/html4/strict. dtd» >
L'un des principes du HTML5 étant la rétrocompatibilité avec les versions plus anciennes, sa définition est
Cela se résume simplement à ceci :
<!DOCTYPE html>
HTML
L' élément <html> est l'élément racine du document. Il est le parent de tous les autres, c'estàdire <head>
et <body>. Celuici possède des attributs, dont le plus utile est lang. Il indique la langue par défaut utilisée sur la page. Cette valeur sera reconnue par les
moteurs de recherche pour leur permettre d'indexer les pages du site en les triant par langue.
<html lang= « fr » >
Tête
Cette section fournit des informations générales sur la page, telles que son titre et le codage de la page (pour la gestion des pages spéciales).
caractères). Ce sont les 2 seules informations obligatoires dans cette section.
Si la balise <title> n'a pas changé, la déclaration d'encodage a été simplifiée. Si avant nous avions :
<meta httpequiv=»ContentType» content=»text/html; charset=utf8» />
Un HTML5 :
<meta charset= « utf8 »>
10
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 LE MARQUAGE
Page HTML5 minimale
<!DOCTYPE html>
<html lang=« fr » >
<head>
<meta charset=« utf8 »>
<title>page HTML5 simple</title> </head>
<body>
<!voici le contenu de ma page html5 >
</body> </
html>
Contenu et nouvelles balises
Le contenu
Dans les versions précédentes de HTML, le contenu était divisé en deux grandes catégories, « en lignes » ou « en blocs »,
ceci est remplacé par un nouveau schéma ; les éléments HTML sont regroupés dans les catégories suivantes :
• Métadonnées de contenu
• Contenu du flux
• Contenu de la section (sectionnement)
• Contenu du titre • Phraséologie
contenu
• Contenu intégré
• Contenu interactif
Veuillez noter que certains articles peuvent apparaître dans plusieurs catégories.
Contenu des métadonnées
Les métadonnées déterminent la présentation ou le comportement du contenu de la page. Elles servent également à configurer
les relations entre ce document et d'autres (exemple : balise <meta> contenant des motsclés ou une description de la page).
Les changements apportés par HTML5 concernent les balises <link> et <script>. Concernant la balise script, il n'y a pas
il n'est plus nécessaire d'indiquer le type. Cela sera en principe considéré comme étant du javascript.
<script src= « fichier/js » ></script>
Il en va de même pour l'appel des feuilles de style, l'attribut réellement nécessaire étant le média
auquel elle s'applique :
<link rel= « feuille de style » href= « styles.css » media= « écran » />
Les différents médias : tous, imprimé, écran, télévision, audio, braille, gravé, manipulé, projection, tty
11
Traduit automatiquement
Machine Translated byparGoogle
Google
LE MARQUAGE HTML 5
Contenu en streaming
Le contenu du flux représente les éléments considérés comme constituant l'intégralité du contenu d'une page Web.
Le flux est généralement du texte ou un fichier intégré tel qu'une image ou une vidéo.
Cette catégorie comporte plusieurs nouveaux éléments :
• entête : spécifie une introduction ou un groupe d'éléments de navigation pour le document.
• footer : définit le pied de page d'un article ou d'un document. Contient généralement le nom de l'auteur, la date de rédaction du document et/
ou ses coordonnées.
Exemple : voir l'exemple complet sur la page suivante
• figure : définit les images, les diagrammes, les photos, le code, etc.
• figcaption : légende pour la balise <figure>.
Exemple : Création du document 00figure.html
Entre les balises <body> , insérez le code suivant :
<figure >
<img src=»assets/images/hitchcock.jpg» alt=»Alfred Hitchcock» /> <figcaption>Photo
promotionnelle du film <strong>Les Oiseaux</strong></figcaption>
</figure>
• canvas : permet d'afficher des éléments graphiques, il faut utiliser un script pour l'animer.
Exemple : ces balises feront l'objet d'un chapitre complet
Contenu de la section
Il s'agit d'une nouvelle catégorie. Le W3C décrit cette catégorie comme « définissant la portée de
Entêtes et pieds de page”. Le contenu d'une section est un sousensemble du contenu d'un flux. Il contient 4 nouveaux éléments HTML5 :
• section : définit les sections d'un document. Tels que les chapitres, les entêtes, les pieds de page,
page ou toute autre section du document.
• article : partie indépendante du site, comme un commentaire.
• à côté : associé à la balise qui le précède. Il peut être utilisé par exemple pour faire référence à
vers des sujets supplémentaires ou pour définir un terme spécifique. • nav : définit une section
dans la navigation. Il contient des liens utiles pour la navigation
Exemple : voir l'exemple global
Contenu de l'entête
Contient tous les éléments d'entête standard tels que <h1>, <h2> , etc.
HTML5 inclut l'élément :
• hgroup : permet de définir des groupes de titres. Celuici ne peut contenir que les éléments de
<h1> à <h6>. Il est principalement utilisé pour définir un plan, une table des matières.
Exemple : Création du document 01hgroup.html
Entre les balises <body> , insérez le code suivant :
12
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 LE MARQUAGE
<hgroup>
<h1>La vie des castors</h1>
<h2>...ou l'aventure passionnante d'une espèce en voie de disparition</h2> </
hgroup>
Contenu de la phrase
Ce contenu est le texte du document, y compris tout passage mis en évidence à l'intérieur de celuici.
d'un paragraphe. Nouvelles balises HTML5 :
• marque : définit un texte marqué.
Exemple : Création du document 02mark.html.
Entre les balises <body> , insérez le code suivant :
<p>L'avantage d'avoir de <strong>bonnes</strong> chaussures de randonnée devient <em>extrêmement</em> évident
<mark>après 3 jours de randonnée</mark>.</p>
Contenu intégré
Le contenu intégré importe une autre source dans la page, comme une image, une musique ou une vidéo. Ce contenu contient
nouvelles balises HTML5 qui offrent une alternative à FLASH :
• audio : pour définir un son, tel que de la musique ou d’autres flux audio.
• vidéo : insérer du contenu vidéo en streaming.
• piste : Insérer un soustitre (au format WebVTT) à une vidéo affichée avec la balise vidéo.
• embed : définit le contenu intégré, tel qu'un plugin.
Exemple : Ce contenu fait l'objet du chapitre 7
Contenu interactif
L'une des balises les plus basiques, <a>, est considérée comme un élément interactif au même titre que les
éléments de formulaire tels que <textarea> ou <button>.
La balise <a> subit une profonde mutation. En effet, si dans les versions précédentes cette balise
est considéré comme en ligne :
Accueillir !
<h2><a href= http://www.afci.fr> AFCI NEWSOFT </a></h2> <p><a href= http://
www.afci.fr> formation microinformatique diplomate 3d web pao bureautique
cocher infographie vidéo centre de formation informatique diplôme internet web </a></p>
En HTML5, il est possible d'encapsuler plusieurs éléments dans un seul élément <a>.
Exemple : Création du document 03a_custom.html.
Entre les balises <body> , insérez le code suivant :
13
Traduit automatiquement
Machine Translated byparGoogle
Google
LE MARQUAGE HTML 5
<a href= http://www.afci.fr> <h2>
AFCI NEWSOFT </h2>
<p>formation en microinformatique diplomate 3d web pao bureautique infographie video centre de
formation informatique diplomate internet web.</p>
</a>
Exemple : Utilisation des nouveaux éléments
Création de page modèle
Dans cette partie, nous allons créer une page modèle que nous utiliserons à nouveau dans les prochains exercices. Elle contiendra un entête simple
comprenant une image ainsi qu'un titre et un soustitre.
Entête du document
Corps du document
Création du fichier html de base : modele_page.html (encodage UTF8 (sans BOM))
<!DOCTYPE html>
<html lang=« fr » > <head>
<meta charset= « utf8 »>
<title>Modèle de page HTML5</title> </head> <body>
</
corps> </
html>
Création de la feuille de style associée : assets/ css/ base.css
@charset « utf8 »;
/* Document CSS */ corps
{ police : normal 90% « Trebuchet MS », Verdana, » Lucida Grande », Tahoma, Arial, Helvetica, SansSe
rif;
couleur: #444;
14
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 LE MARQUAGE
arrièreplan : #f4f4f4 ;
remplissage : 0 0 2em
0 ; marge : 0 ;
}
Nous devons maintenant joindre cette feuille de style à notre page HTML. Dans l'entête de notre page, insérez le lien suivant : <link rel=»stylesheet»
href=»assets/
css/base.css» media=»screen» /> Enregistrez et visualisez le résultat.
La balise <header> :
La balise <header> (ainsi que <footer>) a été créée pour donner au créateur et au développeur un balisage sémantique plus précis
options inhérentes à la structure d'un document. Ces balises donnent une indication plus précise du contenu d'une section (auparavant elle était
contenue dans un <div> dont l'id permettait de connaître son contenu ex : <div id="header">).
Dans le corps du document HTML :
<corps>
<entête>
<img src=»assets/images/thumbnail.png» alt=»logo» /> <h1>HTML5</
h1> <h2>Modèle de page
exercice</h2> </header> </body>
Dans la feuille de style :
entête { couleur : #ee662a ;
arrièreplan : blanc ;
bordure inférieure : 2 px en pointillés #ccc ; marge : 0 ;
rembourrage : 0,8 em ;
entête
h1{ taillepolice: 4em;
épaisseurpolice: normal;
marge: 0;
}
entête
h2{ tailledepolice: 1.5em;
fontweight:bold;
marge: 0 0 2.5em 10em; couleur:
#e74b25;
15
Traduit automatiquement
Machine Translated byparGoogle
Google
LE MARQUAGE HTML 5
entête
img{ float:gauche; margedroite:3em;
}
Si vous enregistrez le document et le visualisez dans les navigateurs les plus récents, il n'y a aucun problème (Opera, Safari, Chrome et IE9).
Cependant, si vous essayez de l'afficher dans un navigateur plus ancien, il ne reconnaît pas la balise d'entête (voir l'application ietester).
Correction d'IE
Pour palier à cette erreur, nous allons procéder en 2 étapes : Création du
feuille de style associée : assets/ css/ correctif_balise.css
@charset « utf8 »;
/* Document CSS */
entête, section, côté, navigation, pied de page, figure, figcaption{ display:block;
Créez ensuite un document javascript : assets/ js/ correctif.js
// Document JavaScript
document.createElement('header');
document.createElement('footer');
document.createElement('nav');
document.createElement('aside');
document.createElement('section');
document.createElement('figure');
document.createElement('figcaption');
Finalement, il ne nous reste plus qu'à inclure ces 2 nouveaux fichiers dans l'entête de notre document :
<link rel=»stylesheet» href=»assets/css/correctif_balise.css» media=»écran» /> <script src=»assets/js/correctif.js»></script>
Enregistrez et visualisez le résultat.
Nous avons maintenant notre document de référence pour tous nos exercices.
Exemple d'architecture de site :
Dans l'exemple suivant, nous allons maintenant créer une page HTML contenant tous les
nouvelles balises.
Création du fichier html : 04architectureSite.html à partir de la page modele_page.html
Création de la feuille de style associée : assets/css/styles_architecture.css
Modifiez ensuite le titre de la page HTML (« architecture du site ») et incluez la nouvelle feuille CSS :
<link rel=»stylesheet» href=»assets/css/styles_architecture.css» media=»écran» />
16
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 LE MARQUAGE
Le contenu de la page sera défini comme suit :
entête
Non
de côté
entête article
temps
figure + légende de la figure
de côté
marque
pied de page
pied de page
La balise <nav> :
Nous allons maintenant créer notre menu de navigation. Sous la balise </header> , incluez le code suivant :
17
Traduit automatiquement
Machine Translated byparGoogle
Google
LE MARQUAGE HTML 5
<nav>
<ul>
<li><a href=»#»>ACCUEIL</a></li> <li><a
href=»#»>A PROPOS</a></li>
<li><a href=»#»>DIAPORAMA</a></li>
<li><a href=»#»>CONTACT</a></li>
</ul>
</nav>
Nous définissons maintenant dans la feuille de style associée : styles_architecture.css
/* navigation */
navigation
{ couleur d'arrièreplan:#f2662a;
hauteur:35px;
}
navigation
li{ float:left;
width:140px;
height:35px;
backgroundcolor:black; text
align: center; border
left: 1px blanc uni; borderright: 1px
blanc uni; lineheight:35px; liststyle:none;
navli
a{ couleur:blanc;
décorationdetexte:aucune;
affichage:bloc;
}
navli
a:hover{ couleur d'arrière
plan:#f0462b; couleur:#ebebea;
Enregistrez et visualisez le résultat.
Il existe une alternative à la balise <nav> qui est la balise <menu>. Cependant celleci avait été déclarée obsolète pour XTHML. Celleci est
censée permettre la création rapide de menus déroulants, cependant les navigateurs gèrent très peu cette balise, d'autant qu'il est possible d'obtenir le
même effet avec des listes à puces et des feuilles de style.
La balise <section> :
18
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 LE MARQUAGE
entête
Non
section
Une section est définie comme un regroupement thématique de contenu. Dans notre exemple, ce sera notre conteneur principal.
Ajoutons le contenu de notre section à la page d'architecture (utilisez des textes lorem ipsum pour remplir celleci). Après la balise </nav>
<section>
<h2>Mission du HTML5</h2>
<p>Lorem ipsum … bibendum.</p>
<p>Quisque … arcu.</p>
<h2>Quoi de neuf ?</h2> <p>Par David,
posté le 5 septembre 2012</p> <img src=»assets/
images/categorie.jpg» alt=»Les contenus HTML5» /> <p>Les différents cônes HTML5</
p> <p>Donec … ante.</p> <p>Fusce … elit.</p> <p>Quisque
… purus.</p> </
section>
Puis définition en CSS associé
/* section */
section
{ largeur: 600px;
float: gauche;
sections p, h1, h2
{ marge gauche : 20 px ;
marge droite : 20 px ;
}
19
Traduit automatiquement
Machine Translated byparGoogle
Google
LE MARQUAGE HTML 5
section h2
{ marge supérieure : 15 px ;
Enregistrez et visualisez le résultat.
Nous pouvons simplement remarquer que la section se comporte de la même manière qu'un <div>.
La balise <footer> :
Après la balise de section, nous ajoutons un pied de page à l'ensemble du document.
<pied de page>
<p>Copyright AFCI NEWSOFT 2012</p> <p>En vous inscrivant ou en
utilisant ce site, vous acceptez notre accord d'utilisation et notre politique de confidentialité.</p> </footer>
Le CSS associé :
pied de page { clair : les
deux ; largeur :
400 px ; marge gauche :
20 px ; taille de
police : 10 px ; arrièreplan : #f2f2f2 url(fichier :../images/footer_background.jpg) pas de répétition à gauche ; hauteur : 118 px ;
remplissage
supérieur : 10 px ;
bordure supérieure : #e2e2e2 solide 2 px ;
bordure inférieure : #e2e2e2 solide 2 px ;
Enregistrez et visualisez le résultat.
La balise <article> :
La définition du W3C précise qu'il s'agit d'une composition autonome, indépendante du reste, dans un document, une application ou un site, et qu'elle
est en principe distribuable ou réutilisable en ellemême. Il peut s'agir par exemple d'un post dans un forum, d'un article de presse, d'une entrée, d'un blog, d'un
commentaire soumis par un utilisateur ou de tout autre contenu autonome.
Le concept clé est qu'un article est un contenu en soi. Il peut être facilement republié dans
différents contextes. Elle peut être multidiffusée sous différents formats, comme un flux RSS, dans un email, via des applications mobiles.
Localisez le 2ème <h2> au milieu de votre <section> et entourez ce contenu avec la balise article.
20
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 LE MARQUAGE
<article>
<h2>Quoi de neuf ?</h2>
<p><small>© copyright 2012 AFCI NEWSOFT.</small></p> </article>
En HTML5, un article peut avoir son propre entête et pied de page
<article>
<entête>
<h2>Quoi de neuf ?</h2>
<p>Par David, posté le 05 septembre 2012</p> </header>
<pied de page>
<p>© copyright 2012 AFCI NEWSOFT</p> </footer> </
article>
Et dans le fichier CSS
/* article */
article
entête { arrièreplan : aucun ;
hauteur : auto ;
bordure inférieure : aucun ;
} entête de l'article
h2{ couleur:noir;
marge:0;
entête de l'article p{ couleur:
gris; marge:
0;
} article
pied de page { arrièreplan : aucun ;
hauteur : auto ;
bordure:aucune;
} pied de page de l'article p{ police
taille:10px;
Enregistrez et visualisez le résultat.
21
Traduit automatiquement
Machine Translated byparGoogle
Google
LE MARQUAGE HTML 5
La balise <aside> :
Cette balise peut être utilisée de 2 façons. L'une est le placement classique d'une barre latérale dans une page Web. La seconde est un
zone de contenu complémentaire et non indépendante à l'intérieur d'une <section>.
1er cas :
Dans votre document HTML après la balise </nav>
<aside id=»main_aside»>
<h3>Dernières recommandations</h3> <p>Rien
… egestas.</p> <p>Tout… gratuitement.</p>
p> </aside>
En CSS :
/* à part */
#main_aside{ marge
haut : 15 px ;
flotteur : gauche ;
largeur : 300 px ; couleurarrièreplan : #378059 ;
rembourrage : 7 px ;
couleur : blanc ;
Enregistrez et visualisez le résultat.
2ème cas :
Dans la section <article> juste avant le 2ème grand paragraphe, ajoutez le code suivant <aside id=»article_aside»>
<h3>Plus d'infos ?</h3> <p>Lisez les
recommandations du W3C.
<a href=»#»>Lien.</a></p> </aside>
En CSS :
#article_aside{ float: gauche;
largeur:
12em; /* 1 em est la hauteur de caractère de la police utilisée, unité relative */ background: #F9A890; padding: 10px; margin: 0 10px;
22
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 LE MARQUAGE
#article_aside
h3{ couleur:#378059;
marge:5px 0 5px 0;
} #article_aside
p{ marge: 0;
}
Enregistrez et visualisez le résultat.
La balise <figure> :
Parmi les nouveaux éléments, certains donnent plus de sens à nos pages Web. Par exemple, <figure> et <figcaption> nous permettent
pour identifier les images et les légendes associées dans notre contenu.
Dans la partie <article> localisez la balise image et modifiez le contenu pour l'obtenir.
<figure>
<img src=»assets/images/categorie.jpg» alt=»Contenus HTML5» />
<figcaption>Les différents contenus HTML5</figcaption> </
chiffre>
En CSS :
/*figure */
figure
{ float: droite;
bordure: 1px gris uni;
remplissage: 0,25em;
marge: 0 1,5em 1,5em 0;
}
figcaption{ texte
align:center; police: italique 0,9em Géorgie, « Times New Roman », Times, serif;
}
Enregistrez et visualisez le résultat.
La balise <time> :
Au début de <article>, nous pouvons trouver une date de publication. Le problème avec ce format
c'est qu'il n'est pas indiqué dans un format lisible par un système informatique. HTML5 ajoute l'élément <time> .
L'attribut datetime est formaté selon l'année, le mois et le jour. S'il n'est pas obligatoire, il sera reconnu par un système informatique.
De plus, si le contenu est publié, il est également possible d'ajouter l'attribut pubdate.
<p>Par David, publié le <time datetime="20120905" pubdate>5 septembre 2012</time></
23
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5
24
Traduit automatiquement
Machine Translated byparGoogle
Google
RÉSUMÉ DES BALISES HTML 5
Résumé de l'étiquette
Nouveaux articles
Nouveaux attributs
Modifier les balises et les attributs
Obsolescence des attributs
25
Traduit automatiquement
Machine Translated byparGoogle
Google
RÉSUMÉ ÉTIQUETÉ HTML 5
Nouveaux articles
• section : définit les sections d'un document. Tels que les chapitres, les entêtes, les pieds de page,
ou toute autre section du document.
• article : partie indépendante du site, comme un commentaire.
• à côté : associé à la balise qui le précède.
• entête : spécifie une introduction ou un groupe d'éléments de navigation pour le document.
• footer : définit le pied de page d'un article ou d'un document. Contient généralement le nom de l'auteur, la date de publication du document
écrites et/ou leurs coordonnées.
• nav : définit une section dans la navigation.
• figure : définit les images, les diagrammes, les photos, le code, etc.
• figcaption : légende pour la balise <figure>.
• audio : pour définir un son, tel que de la musique ou d’autres flux audio.
• vidéo : insérer du contenu vidéo en streaming.
• piste : Insérer un soustitre (au format WebVTT) à une vidéo affichée avec la balise vidéo.
• embed : définit le contenu intégré, tel qu'un plugin.
• marque : définit un texte marqué.
• compteur : Permet d'utiliser des mesures avec un minimum et un maximum connus, pour afficher une jauge.
•
progress : définit une barre de progression sur la tâche en cours d'exécution.
• heure : définit une date ou une heure, ou les deux. Cette balise a été abandonnée en
octobre 2011 au profit de la balise data 2 avant d'être réintroduite3.
• canvas : permet d'afficher des éléments graphiques, il faut utiliser un script pour l'animer.
• commande : définit un bouton.
• détails : spécifie des détails supplémentaires qui peuvent être masqués ou affichés sur demande. • keygen : permet de générer une clé
(sécurisé).
• sortie : représente le résultat d’un calcul.
• ruby, rt et rp : annotations Ruby.
Nouveaux attributs
Pour la balise <a> :
• média : permet de spécifier pour quel média ou appareil il est optimisé.
• type : définit le MIME de l'URL cible.
Pour la balise <area> :
• hreflang : spécifie la langue de l'url.
26
Traduit automatiquement
Machine Translated byparGoogle
Google
RÉSUMÉ DES BALISES HTML 5
• média : permet de spécifier pour quel média ou appareil il est optimisé.
• rel : indique la relation entre le document actuel et la cible
URL. • type : définit le MIME de l'URL cible.
Pour la balise <button> :
• autofocus : indique que le bouton doit avoir le focus pendant le chargement de la page.
• formulaire : spécifie à quel formulaire appartient le bouton.
• formaction : Spécifie où envoyer les données du formulaire lorsqu'un formulaire est soumis. Remplace l'attribut form action.
• formenctype : indique comment les données du formulaire doivent être codées avant d'être envoyées à un serveur.
veur. Remplace l'attribut enctype du formulaire.
• formmethod : définit comment envoyer les données du formulaire.
• formnovalidate : s'il est présent, indique que le formulaire ne doit pas être validé lors de son envoi.
• formtarget : spécifie où ouvrir/exécuter l'action.
Pour la balise <fieldset> :
• nom : définit le nom du fieldset.
• désactivé : désactive le fieldset.
• form : définit la forme du fieldset.
Pour la balise <form> :
• autocomplete : saisie semiautomatique.
• novalidate : si présent le formulaire n'est pas validé lors de la soumission.
Pour la balise <html> :
• manifest : URL pour déclarer des fichiers (manifest) pour une utilisation hors ligne.
Pour la balise <iframe> :
• sandbox : Spécifie les restrictions sur le contenu de l'iframe
• seamless : indique que l'iframe doit être parfaitement intégré au document.
• srcdoc : le code HTML du document affiché dans l'iframe.
Pour la balise <input> :
• autocomplete : saisie semiautomatique.
• autofocus : définit la mise au point lorsque la page se charge. • formulaire : spécifie lequel
formulaire auquel appartient le champ. • formaction : remplace « l'action » du formulaire
attribut. Spécifie l'URL vers laquelle envoyer les champs.
données de formulaire.
• formenctype : remplace l'attribut « enctype » du formulaire. Indique comment les données du formulaire
doit être codé avant d'être envoyé au serveur.
27
Traduit automatiquement
Machine Translated byparGoogle
Google
RÉSUMÉ ÉTIQUETÉ HTML 5
• formmethod : remplace l'attribut « method » du formulaire. Définit la méthode HTTP pour l'envoi du formulaire.
données à l'URL.
• formnovalidate : remplace l'attribut « novalidate » du formulaire. S'il est présent, le champ de saisie ne doit pas être validé lors de
soumis.
• formtarget : remplace l'attribut « target » du formulaire. Spécifie la fenêtre cible utilisée lorsque le
le formulaire est soumis.
• hauteur : définit la hauteur.
• liste : Désigne une « liste de données » contenant des options prédéfinies pour le champ de saisie.
• max : Indique la valeur maximale du champ de saisie.
• min : Indique la valeur minimale du champ de saisie.
• multiple : Si présent, l'utilisateur peut saisir plusieurs valeurs.
• motif : définit un motif.
• espace réservé : une indication pour aider les utilisateurs à remplir le champ de saisie.
• obligatoire : indique que la valeur du champ de saisie est obligatoire pour soumettre le formulaire.
• étape : indique l’intervalle entre les valeurs.
nouveaux types:
• date et heure
• datetimelocal
• date
• mois
• semaine
• temps
• nombre
•
gamme
• email
• URL
• recherche
• couleur
Pour la balise <link> :
• tailles : définit la taille, la hauteur et la largeur.
Pour la balise <menu> :
• label : Libellé visible dans le menu.
• type : définit le type de menu à afficher. La valeur par défaut est « liste ».
Pour la balise <meta> :
• charset : définit le jeu de caractères pour l'encodage de la page.
28
Traduit automatiquement
Machine Translated byparGoogle
Google
RÉSUMÉ DES BALISES HTML 5
Pour la balise <ol> :
• inversé : s'il est présent, modifie l'ordre d'affichage.
Pour la balise <script> :
• async : définit si le script doit être exécuté de manière asynchrone ou non.
Pour la balise <select> :
• autofocus : active la mise au point sur cet élément.
• formulaire : définit un ou plusieurs formulaires pour le « select ».
Pour la balise <style> :
• Scoped : si présent, le style est appliqué uniquement au parent et aux enfants.
Pour la balise <textarea> :
• autofocus : focalise l'élément de zone de texte.
• dirname : Spécifie le nom de la zone de texte. •
formulaire : définit un ou plusieurs formulaires pour la zone de texte.
• maxlength : nombre maximal de caractères.
• placeholder : définit une astuce pour aider l'utilisateur.
• obligatoire : indique que la valeur dans le champ de saisie est obligatoire.
• wrap : définit la manière dont le texte est affiché dans la zone de texte.
En plus des attributs globaux qui s'appliquent à toutes les balises :
• contenu modifiable
• menu contextuel
• données*
• déplaçable
• caché
• on* (gestionnaires d'événements)
• vérification orthographique
Modifications des balises et des attributs
Cette section est vide, insuffisamment détaillée ou incomplète. Votre aide est la bienvenue !
Les balises suivantes sont supprimées car leurs effets étaient purement représentatifs, ce qui est le rôle du CSS.
• police de base,
• grand,
• centre,
29
Traduit automatiquement
Machine Translated byparGoogle
Google
RÉSUMÉ ÉTIQUETÉ HTML 5
• police de caractères,
• grève,
• tt,
• dans
Les balises frame, frameset et noframes ont également été supprimées ; elles étaient déjà dé
obsolètes car elles créaient des problèmes d’accessibilité et de convivialité pour l’utilisateur final.
Les balises suivantes sont également supprimées :
•
l'acronyme n'est plus inclus car il créait beaucoup de confusion ;
• l’applet est remplacée par un objet ;
• isindex, car il peut être remplacé en utilisant des contrôleurs de forme ;
• dir est déconseillé au profit de ul
Enfin, noscript n'est fourni que dans la version HTML, il n'est pas inclus dans la version XML.
Obsolescence des attributs
• jeu de caractères
• coordonnées
• tour
• forme
Sur l'étiquette de zone
• nohref
Sur l'étiquette de la tête
• nohref
Sur la balise html
• version
Sur la balise iframe
• bureau long
Sur la balise img
• bureau long
• nom (préférer l'attribut id)
Sur la balise de lien
• jeu de caractères
• tour
• cible
Sur la balise meta
30
Traduit automatiquement
Machine Translated byparGoogle
Google
RÉSUMÉ DES BALISES HTML 5
• schéma
Sur l'étiquette de l'objet
• archive
• classide
• base de code
• déclarer
• attendre
Sur la balise param
• taper
• type de valeur
Sur l'étiquette TD
• axe
•
portée
Sur la balise th
31
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5
32
Traduit automatiquement
Machine Translated byparGoogle
Google
FORMULAIRES HTML 5
Les formes
Composant d'un formulaire
Espace réservé, requis, modèle et validation
Les nouveaux types <input>
33
Traduit automatiquement
Machine Translated byparGoogle
Google
FORMULAIRES HTML 5
Les formulaires sont parmi les exemples les plus anciens et les plus connus d'interactivité sur le Web. L'élément FORM a été
introduit dans HTML en 1993, et les contrôles associés font partie de l'environnement quotidien de l'utilisateur.
Les nouveaux composants HTML5 ajoutent des fonctionnalités que les concepteurs de sites Web incorporaient traditionnellement par
d'autres moyens, tels que JavaScript ou Flash. Il est courant dans un formulaire de rendre tel ou tel champ obligatoire, afin de vérifier son
contenu avant de soumettre un formulaire.
Ces fonctionnalités sont désormais intégrées au HTML5.
Composant d'un formulaire
Nous allons créer un formulaire simple pour recevoir un prénom et un nom :
A partir du modèle de page créé précédemment, insérer le formulaire suivant Création du fichier html :
chap_4/05formulaire_simple.php (attention à l'extension) à partir du
page modele_page.html Insérer
après la balise </header>
<div id=»wrap»>
<form id=»mon_formulaire» action=»» method=»post»> <label
for=»nom»>Nom : </label><input type=»text» name=»nom» id=»nom» /> <br/> <label for=»firstname»>Prénom :</
label><input type=»text» name=»firstname»
id=»prénom» />
<br/>
<input type=»submit» value=»Valider» /> </form>
</div>
Dans le fichier CSS de base : assets/ css/ base.css ajouter
/* formulaire */
#wrap
{ remplissage : 0 3em 3em 3em ;
marge:auto;
}
La balise de formulaire contient 3 attributs :
• id : permet d'associer un style CSS ou servira d'identifiant pour le traitement (js ou autre)
• action : spécifie l'agent qui traite le formulaire. Cette valeur est l'URL qui pointe vers un script
serveur, cela récupère les valeurs et effectue le traitement
• méthode : (post/get) spécifie le mode d'envoi des données, ici POST.
Ensuite, nous avons deux éléments <input> de type texte, ceuxci représentent les champs dans
qui capteront les valeurs des internautes. Ils ont 2 attributs supplémentaires :
• identifiant
• nom
Ces 2 attributs doivent toujours être présents afin de faciliter le traitement des informations qui
c'est soit en javascript soit en PHP. (On peut remarquer que ça a la même valeur)
34
Traduit automatiquement
Machine Translated byparGoogle
Google
FORMULAIRES HTML 5
Et enfin, il y a un dernier élément <input> , celuici étant de type soumettre. C'est celuici qui donnera l'ordre de
envoyer le formulaire au serveur lorsque nous cliquons dessus.
Nous avons maintenant le minimum requis pour avoir un formulaire.
Nous allons encore personnaliser un peu notre formulaire en ajoutant l' élément <fieldset>
vous permettant de regrouper des éléments de formulaire et de leur ajouter une légende.
<ensemble de champs>
<legend> Informations personnelles </legend> <label for=»nom»>Nom : </
label><input type=»text» name=»nom» id=»nom» /> <br/> <label
for=»prenom»>Prénom : </label><input type=»text» name=»prenom» id=»prenom» /> </fieldset>
Ensuite dans le css :
#mon_formulaire
{ marge supérieure :
5 px ; remplissage :
10 px ; largeur : 400 px ;
#mon_formulaire
étiquette { float :
gauche ; taille de police : 13 px ; largeur : 110 px ;
Il est à noter que la balise <form> s'enrichit de 2 nouveaux attributs :
• autocomplete : (on/off) permet de lancer la complétion semiautomatique
• novalidate : (on/off) Si présent, le formulaire n'est pas validé lors de la soumission
Espace réservé, obligatoire, modèle et validation
HTML5 introduit de nombreuses nouvelles fonctionnalités pour les formulaires afin d'améliorer la prise en charge des saisies et les contrôles disponibles pour l'utilisateur.
Plusieurs attributs faciles à implémenter améliorent la prise en charge des formulaires, tout en éliminant le besoin de JavaScript.
Espace réservé
placeholder est un attribut qui vous permet de saisir un texte indicatif par défaut dans un champ de formulaire.
Modifier la page : 05simple_form.php
Ajoutez l'attribut placeholder sur chaque champ de saisie
<label for=»name»>Nom :</label><input type=»text» name=»name» id=»name» placeholder=»votre nom» /><br/>
35
Traduit automatiquement
Machine Translated byparGoogle
Google
FORMULAIRES HTML 5
<label for=»prenom»>Pré;nom : </label><input type=»text» name=»prenom» id=»prenom» placeholder=»votre pré;nom» /><br/
>
Enregistrer et visualiser le résultat
L'attribut placeholder peut être placé sur les éléments :
• <input> : de type texte, recherche, mot de passe, url, tél, email
• <zone de texte>
Compatibilité:
Firefox 4.0+, Opera 11.01+, Chrome 3.0+, Safari 3.0+, ie 10+
Il est bien sûr possible de styliser cet élément, cependant le flou actuel nous oblige à utiliser des pseudoclasses :
webkitinputplaceholder{} // safari
// Firefox
mozplaceholder{}
Actuellement, les styles applicables à l'espace réservé sont très limités, ils se concentrent principalement sur
silencieusement sur les styles de texte :
• Décoration de texte
• Style de police
• Couleur
Dans le fichier CSS :
/* Firefox */
#mon_formulaire entrée : mozplaceholder {
couleur : rouge ;
/*safari*/
#mon_formulaire input::webkitinputplaceholder {
couleur : rouge ;
Alternatives
Tous les navigateurs ne se comportent pas de la même manière : compréhension de l'attribut, possibilité de modifier les styles via CSS, etc.
• jQuery Placeholder : permet l'attribution du comportement de l'espace réservé ainsi qu'un
Classe CSS pour standardiser la méthode de sélection.
• https://github.com/NV/placeholder.js : propose une alternative compatible jQuery ou purement JavaScript.
Champs obligatoires
L'attribut required rend obligatoire le remplissage d'un champ et bloque la validation.
du formulaire si l'un des champs (concernés par cet attribut) n'a pas été renseigné.
36
Traduit automatiquement
Machine Translated byparGoogle
Google
FORMULAIRES HTML 5
Page d'édition : chap_4/05formulaire_simple.php
Ajoutez l' attribut requis à chaque champ de saisie <label
for=»name»>Nom : </label><input type=»text» name=»name» id=»name» placeholder=»votre nom»
requis=»obligatoire « /><br/> <label
for=»firstname»>Prénom : </label><input type=»text» name=»firstname» id=»firstname»
placeholder=»votre prénom» required=»obligatoire « /><br/>
L'attribut placeholder peut être placé sur les éléments :
• <input> : de type texte, recherche, mot de passe, url, tél, email, date, datetime, datetimelocal, mois,
semaine, heure, numéro, case à cocher, radio, fichier
• <zone de texte>
Compatibilité:
Firefox 4.0+, Opera 9.5+, Chrome 3.0+, c'estàdire 10+
Nous pourrons appliquer un CSS au champ de saisie pour indiquer qu'il est obligatoire.
[obligatoire]
{ bordure : 1 px orange uni ; }
Enregistrer et visualiser le résultat
Il est également possible de modifier l'affichage du message obligatoire, l'exemple cidessous modifiera celui de
le navigateur Chrome :
[type=»texte»]::webkitvalidationbubblearrow { couleur
d'arrièreplan : #f4f4f4 ; bordure :
1 px solide #D8000C ; largeurde
bordure : 1 px 0 0 1 px ; ombre
deboîte : aucun ;
} [type=»texte»]::webkitvalidationbubbleicon
{ affichage:none;
} [type=»texte»]::webkitvalidationbubblemessage { arrièreplan :
#f4f4f4 ; bordure : 1 px
solide #D8000C ; couleur :
#D8000C ; taille de
police : 100 % ;
ombre de la boîte : 0 1 px 5 px #bbb ;
ombre du texte : 0 1 px 0 #fff ;
} [type=»texte»]::webkitvalidationbubblemessage::before { contenu :
« Téléphone : « ;
}
37
Traduit automatiquement
Machine Translated byparGoogle
Google
FORMULAIRES HTML 5
Modèles et validation à la volée
Champs obligatoires qui ne sont pas complétés ou qui ne suivent pas une certaine règle de syntaxe définie par le type de formulaire ou par le modèle
attribut , bloquer le processus d'envoi des données du formulaire.
Cette validation à la volée permet à l'utilisateur d'être informé très rapidement de ses erreurs et de les corriger étape par étape.
étape grâce aux indications fournies par les infobulles situées sous chacun des champs invalides.
Certains modèles par défaut existent pour certains types de champs, tels que les champs de type
email ou url par exemple. Nous aborderons ces nouveaux types dans le prochain chapitre.
Cependant, il est possible de créer vos propres modèles en utilisant des expressions régulières.
Exemple : <input type="text" pattern="[AF][09]{5}" />
Ce champ attend une valeur numérique d'au moins 5 chiffres précédés d'une lettre majuscule com
pris entre A et F. Si le format n'est pas respecté, le navigateur en informe l'utilisateur.
Dans notre fichier nous allons ajouter un nouveau champ permettant la saisie d'un code. Celuici
devra répondre au critère de l'exemple précédent :
<label for=»code»>Code : </label><input type=»text» name=»code» id=»code» pattern=»[AF][09] {5}» />
L'attribut pattern peut être placé sur les éléments :
• <input> : de type texte, recherche, mot de passe, url, tél, email
CSS3 fournit deux pseudoclasses : :valid et :invalid pour marquer clairement les champs comme... valides et invalides.
il est alors possible de remplacer les styles par défaut appliqués à ces éléments par les navigateurs, qui diffèrent :
• Firefox attribue la propriété boxshadow (rouge) au champ.
• Internet Explorer utilise la propriété bordercolor (rouge).
• Chrome et Opera n'ajoutent aucun style, mais se concentrent plutôt sur le premier champ erroné
Modifier CSS et ajouter
:valide
{boxshadow: 0 0 2px 1px vert;
}
Enregistrer et tester sur Firefox
Compatibilité:
Firefox 4.0+, Opera 9.5+, Chrome 3.0+, c'estàdire 10+
38
Traduit automatiquement
Machine Translated byparGoogle
Google
FORMULAIRES HTML 5
Les bibliothèques JavaScript comme complément
Pour rattraper le retard des anciens navigateurs en termes de compatibilité avec les nouvelles fonctionnalités introduites par HTML5 pour les formulaires,
certaines solutions basées sur JavaScript existent. Il s'agit de charger une bibliothèque qui va détecter si le navigateur ne reconnaît pas les attributs mentionnés, ou les
nouveaux types de champs, et tenter de les simuler dynamiquement avec JavaScript si nécessaire.
La prise en charge des navigateurs Web est très inégale et variée. Comme il s'agit de fonctionnalités disparates, il est très possible qu'un navigateur relativement
L'ancienne version supporte un attribut mais pas un autre et vice versa selon le moteur de rendu, ou encore qu'un type spécifique pour <input> est ignoré. Il
n'est donc pas possible de déclarer dans l'état actuel du parc de navigateurs que tous les apports des formulaires HTML5 sont supportés par une version
spécifique, même si de nombreux progrès ont été réalisés.
Alternatives pour émuler les fonctionnalités des formulaires HTML5 avec JavaScript
Ces bibliothèques sont communément appelées polyfills dans la version originale et prennent parfois en charge
compte des navigateurs très anciens (jusqu'à Internet Explorer 6). Dans les cas d'utilisation les plus simples, il suffira d'inclure le fichier JavaScript dans la
page courante à l'aide de la balise <script>.
• H5F : fournit un support pour les nouvelles fonctionnalités des formulaires HTML5 pour les navigateurs plus anciens. (http://www.thecssninja.com/
javascript/H5F)
• H5Validate : fournit un support pour les validations. (http://ericleads.com/ h5validate)
• Webforms 2 : inclut l'émulation de certains attributs (modèle, requis, autofocus),
nouveaux types pour <input> et méthodes JavaScript pour connaître l'état de validation. https://github.com/westonruter/
formulaires web2
• html5Widgets : inclut une gamme de contrôles supplémentaires (sélecteur de date/calendrier pour les champs de date), la gestion des attributs
et de la plage obligatoires, des motifs, de l'autofocus, des espaces réservés, etc., et des éléments de sortie. https://github.com/zoltandulac/
Widgets HTML5
Les nouveaux types <input>
HTML5 apporte plus d'une douzaine de nouveaux types, que nous découvrirons ou redécouvrirons
la liste et la description pour chacun d'eux.
Les tests suivants seront principalement effectués sur Opera, Safari, Chrome
Le gars comme ça
Il s'agit d'une variante d'un champ texte. De plus, aucun format spécifique n'est attendu par le navigateur. Il n'y a donc pas de modèle spécifique
cela vérifierait si au moins un numéro est saisi.
Cependant, sur certains navigateurs de smartphones, comme Safari pour iOS par exemple,
La saisie du numéro de téléphone est facilitée par le passage à un clavier de type numérique.
Créer la page : chap_4/06formulaire_typeTel.php
Le navigateur ne propose pas cette vérification, un contrôle plus précis grâce à l'attribut pattern également
ce contrôle côté serveur sera nécessaire.
Pour effectuer ce type de vérification, vous aurez besoin d'une expression régulière pour détecter une
39
Traduit automatiquement
Machine Translated byparGoogle
Google
FORMULAIRES HTML 5
numéro de téléphone local ou international.
motif = "^((\+\d{1,3}(| )?\(?\d\)?(| )?\d{1,5})|(\(?\d{2,6}\)?))(| )?(\d{3,4})(| )?(\d{4})(( x| ext)\d{1,5}) {0,1}$"
<form id=»mon_formulaire» action=»» method=»post»> <label
for=»champ1»>Tél.</label> <input type=»tel»
id=»champ1» required> <em>(sans motif)</em><br /> <label for=»champ2»>Tél.</label> <input
type=»tel» id=»champ2» motif=»^((\+\d{1,3}
(| )?\(?\d\)?(| )?\d{1,5})|(\(?\d{2,6}\)?))(|
)?(\d{3,4})(| )?(\d{4})(( x| ext)\d{1,5}){0,1}$» requis> <em>(avec motif)</em><br />
<input type=»submit» value=»Valider» /> </form>
Compatibilité:
Navigation : Firefox 4.0+, Opera 9.5+, Chrome 3.0+, c'estàdire 10+
Tél. : Firefox, Chrome, Opera (Android 4), Safari (iOS 3.1), Android Browser 3.1
Le type d'URL
En apparence, ce champ ressemble au type de texte. Cependant, cette fois, le navigateur s'attend à
un format très spécifique qui doit respecter un modèle de type d'URL.
Tous les types d'URL sont autorisés (ftp://, mailto:, http://, etc.). Par défaut, sur Opera, lorsque vous ne précisez pas le type de protocole,
le navigateur ajoute automatiquement le type http://, ce qui valide nécessairement le format attendu pour ce champ.
Créer la page : chap_4/07formulaire_typeURL.php
<form id=»mon_formulaire» action=»» method=»post»>
<label for=»champ1»>Votre site Web</label>
<input type=»url» id=»champ1» valeur requise=»http://»> <br/>
<input type=»submit» value=»Valider» /> </form>
Compatibilité:
Navigation : Firefox 4.0+, Opera 9.5+, Chrome 3.0+, c'estàdire 10+
Tél. : Firefox, Chrome, Opera (Android 4), Safari (iOS 3.1), Android Browser 3.1
Le type de courrier électronique
Toujours très proche du type texte, ce champ est équivalent au type url, seul le format attendu change.
Ce champ attend au moins un caractère (caractère non accentué, y compris les séparateurs)
tirets ou traits de soulignement) suivis d'un @ suivi à son tour d'un caractère.
Exemple d'entrée invalide : é@ç
Exemples d'entrées valides : @_ ,
f@r
40
Traduit automatiquement
Machine Translated byparGoogle
Google
FORMULAIRES HTML 5
Là encore, le clavier du SmartPhone compatible avec ce type de champ de formulaire vous présentera un clavier adapté incluant le symbole @.
Créer la page : chap_4/08formulaire_typeEmail.php
<form id=»mon_formulaire» action=»method=»post»> <label
for=»champ1»>Votre email</label> <input
type=»email» id=»champ1» required> <br /> <input
type=»submit» value=»Valider» /> </form>
Compatibilité:
Navigation : Firefox 4.0+, Opera 9.0+, Chrome 6.0+, ie 10+, Safari 5+
Tél. : Firefox, Chrome, Opera (Android 4), Safari (iOS 3.1), Android Browser 3.1
Le type date, heure et datetime
Champ de type date
Ce champ, visuellement similaire au type de texte, permet d'activer une aide au remplissage
(type datepicker ) présent uniquement sur certains navigateurs et différent de l'un à l'autre.
Le contenu attendu est une date du calendrier grégorien au format RFC3339 sans spécifier la date.
fuseau horaire, mais le champ accepte un contenu vide ou mal formaté sans renvoyer d'erreur.
La liste des attributs compatibles est la suivante :
nom, désactivé, formulaire, type, saisie semiautomatique, autofocus, liste, min, max, étape (chiffre entier), lecture seule,
requis, valeur, modèle ainsi que les attributs classiques, événement et xml.
Créer la page : chap_4/09formulaire_typeDate.php
<form id=»mon_formulaire» action=»09form_typeDate.php» méthode=»poster»>
<label for=»champ1»>Votre date</label> <input type=»date»
id=»champ1» required> <br /> <input
type=»submit» value=»Valider» /> </form>
Compatibilité:
Nav. : Firefox 4.0+, Opera 9.0+, Chrome 6.0+, ie 10+, Safari 5+ Tél. :
Firefox, Chrome, Opera (Android 4), Safari (iOS 3.1), Android Browser 3.1 Champ de type temps
Ce type de champ permet de saisir une heure, avec plus ou moins de précision. Le format
attendu est le même que pour le champ de type date, sans localisation (fuseau horaire).
La liste des attributs compatibles est très similaire, seul l'attribut step permet un float ici. Comme le champ date, ce type de
champ
déclenche l'affichage d'une sorte de sélecteur
41
Traduit automatiquement
Machine Translated byparGoogle
Google
FORMULAIRES HTML 5
vous permettant d'incrémenter ou de décrémenter la valeur du champ minute par minute.
Ce comportement peut être observé sur Safari et Opera sous la forme suivante.
Créer la page : chap_4/10formulaire_typeTime.php
<form id=»mon_formulaire» action=»10form_typeTime.php» méthode=»poster»>
<label for=»champ1»>Heure de réveil</label> <input type=»time»
id=»champ1» name=»time»> <br /> <input
type=»submit» value=»Valider» /> </form>
Compatibilité:
Navigation : Firefox 4.0+, Opera 10.6+, Chrome 16, ie 10+, Safari 5+
Tél. : Firefox, Chrome, Opera (Android 4), Safari (iOS 3.1), Android Browser 3.1
champ de type datetime
Ce type de champ est une combinaison des deux types date et heure. Il permet donc de saisir une date et une heure précises
dans le même champ (visuel), dans le cas de Safari, et dans deux champs distincts dans le cas d'Opera.
datetime fournit un fuseau horaire qui est spécifié en dehors des champs dans Opera et directement intégré dans le champ dans Safari
(« Z » ici équivaut à « UTC »).
Créer la page : chap_4/11formulaire_typeDateTime.php
<form id=»mon_formulaire» action=»11form_typeDateTime.php» méthode=»poster»>
<label for=»champ1»>Prochain RDV</label> <input
type=»datetime» name=»datetime» id=»champ1»><br /> <input type=»submit»
value=»Valider» /> </form>
Compatibilité:
Navigation : Firefox 4.0+, Opera 10.6+, Chrome 16, ie 10+, Safari 5+
Tél. : Firefox, Chrome, Opera (Android 4), Safari (iOS 3.1), Android Browser 3.1
Champ de type datetimelocal
Ce type de champ est très proche du type datetime, la seule différence étant l'absence de précision.
fuseau horaire sion.
Les informations visuelles fournies par les champs de formulaire sont similaires à la date et à l'heure, moins « UTC » et « Z » pour Opera et Safari,
respectivement.
Créer la page : chap_4/12formulaire_typeDateTimeLocal.php
<form id=»mon_formulaire» action=»12formulaire_typeDateTimeLocal.php« method=»post»> <label for=»champ1»>Prochain
RDV</label> <input type=»datetime» name=»datetime»
id=»champ1»><br /> <input type=»submit» value=»Valider» />
42
Traduit automatiquement
Machine Translated byparGoogle
Google
FORMULAIRES HTML 5
</form>
Compatibilité:
Navigation : Firefox 4.0+, Opera 10.6+, Chrome 16, ie 10+, Safari 5+
Tél. : Firefox, Chrome, Opera (Android 4), Safari (iOS 3.1), Android Browser 3.1
Champ de type semaine
Le type de champ semaine vous permet de saisir une semaine dans une année. Il attend donc une for
tapis de type 2012W05 qui correspond à l'année et au numéro de semaine qui y figure.
La liste des attributs compatibles reste la même que pour le type date.
Créer la page : chap_4/13formulaire_typeSemaine.php
<form id=»mon_formulaire» action=»13form_typeWeek.php» méthode=»poster»>
<label for=»champ1»>Semaine </label> <input type=»week»
id=»champ1» name=»week»> <br /> <input
type=»submit» value=»Valider» /> </form>
Compatibilité:
Navigation : Firefox 4.0+, Opera 10.6+, Chrome 16, ie 10+, Safari 5+
Tél. : Firefox, Chrome, Opera (Android 4), Safari (iOS 3.1), Android Browser 3.1
Champ de numéro de type
Le type de champ numérique permet de saisir une valeur numérique. Le champ de formulaire se transforme alors en une sorte de boîte permettant
l'incrémentation et la décrémentation d'une valeur numérique initiale (0 par défaut), lorsque la prise en charge du navigateur est terminée.
Créer la page : chap_4/14formulaire_typeNumber.php
<form id=»mon_formulaire» action=»14formulaire_typeNumber.php» method=»post»>
<label for=»champ1»>Code postal </label> <input type=»Numéro»
id=»champ1» name=»cp»> <br /> <input
type=»submit» value=»Valider» /> </form>
Il est possible d'ajouter un attribut step pour spécifier un pas d'incrément. Mais aussi pour
fixer un minimum et un maximum.
Créer la page : chap_4/14formulaire_typeNumber_Bis.php
<form id=»mon_formulaire» action=»14formulaire_typeNumber_Bis.php» method=»post»> <label for=»champ1»>Nb bits </
label> <input type=»semaine» id=»champ1»
name=»numéro» step=»8» min=»0» max=»64 «> <br /> <input
type=»submit» value=»Valider» /> </form>
43
Traduit automatiquement
Machine Translated byparGoogle
Google
FORMULAIRES HTML 5
Compatibilité:
Navigation : Firefox 4.0+, Opera 10.6+, Chrome 16, ie 10+, Safari 5+
Tél. : Firefox, Chrome, Opera (Android 4), Safari (iOS 3.1), Android Browser 3.1
Champ de type de plage
Ce champ propose un contenu évalué approximatif.
Bien que la position du curseur puisse être convertie numériquement (par défaut, la valeur la plus basse est 0, la plus élevée 100),
l'utilisateur n'a pas de repère numérique, seule la position du curseur est un index. La valeur la plus haute est à gauche (deviezvous la
deviner ?) pour un sens de lecture ltr (de gauche à droite) bien sûr !
Si vous avez l'habitude de basculer entre la lecture rtl et ltr en raison de votre polyglotisme, cet affichage approximatif pourrait vous
poser des problèmes (cela reste une hypothèse), d'autant plus que le curseur est placé au milieu par défaut.
Créer la page : chap_4/15formulaire_typeRange.php
<form id=»mon_formulaire» action=»15form_typeRange.php» méthode=»poster»>
<label for=»champ1»>Niveau </label> <input
type=»range» id=»champ1» name=»range»><br /> <input type=»submit»
value=»Valider» /> </form>
Possibilité d'une valeur de départ, d'un max, d'un min et d'un pas d'incrément
<form id=»mon_formulaire» action=»15form_typeRange.php» méthode=»poster»>
<label for=»champ1»>Niveau </label> <input
type=»range» id=»champ1» name=»range» value=»15» max=»50» min=»0» step=»5»><br /> <input
type=»submit»
value=»Valider» /> </form>
Compatibilité:
Navigation : Firefox 4.0+, Opera 11+, Chrome 10, ie 10+, Safari 5+
Tél. : Firefox, Chrome, Opera (Android 4), Safari (iOS 3.1), Android Browser 3.1
Champ de couleur type
Ce type permet de transformer le champ en une palette de couleurs.
La valeur attendue est une couleur au format hexadécimal (un dièse suivi de 6 caractères alphanumériques).
valeurs mériques comprises entre A et F, et 0 et 9).
Actuellement seul Opera 11+ permet l'affichage de cette palette, avec un nombre limité de couleurs, proposant, via un bouton "Autre...",
d'étendre la palette et un colorpicker permettant de composer une palette de couleurs personnalisée temporaire.
D'autres navigateurs affichent un simple champ de texte, il n'est pas possible de fournir un modèle contrôlant la valeur saisie par
l'utilisateur, car cet attribut n'est pas compatible avec ce type.
44
Traduit automatiquement
Machine Translated byparGoogle
Google
FORMULAIRES HTML 5
Créer la page : chap_4/16formulaire_typeColor.php
<form id=»mon_formulaire» action=»16formulaire_typeColor.php» method=»post»> <libellé
for=»champ1»>Couleur </label> <input
type=»couleur» id=»champ1» name=»couleur» value=»#fad345»> <input type=»submit»
valeur=»Valider» /
> </form>
Compatibilité:
Navigation : Firefox 4.0+, Opera 11+, Chrome 10, ie 10+, Safari 5+
Tél. : Firefox, Chrome, Opera (Android 4), Safari (iOS 3.1), Android Browser 3.1
L'élément de sortie
Ce nouvel élément représente la somme d'un calcul.
Il accepte comme attributs : pour, nom et forme.
La valeur de l'attribut for de l'élément <output> prend les valeurs des identifiants de chaque champ
<input> nécessaire pour le calcul.
L'attribut form de <output> prend la valeur de l'id du formulaire qui comprend les différents champs utilisés
pour le calcul.
Ce dernier point est important car l’élément de sortie n’est pas nécessairement interne au formulaire.
Créer la page : chap_4/17formulaire_typeOutput.php
45
Traduit automatiquement
Machine Translated byparGoogle
Google
FORMULAIRES HTML 5
<form action=»17formulaire_typeOutput.php» method=»post» id=»tva_form» onsubmit=»ttc.value = ht.value * (1 + tva.value/
100); return false;»> <p>
<label for=»t_ht»>Tarif HT</label><input type=»number» name=»ht» id=»t_ht»> &euro;
</p>
<p>
<label for=»t_tva»>TVA</label><input type=»number» name=»tva» id=»t_tva» value=»19.6»>
%
</p>
<p>
Tarif TTC :
<output for=»t_ht t_tva» name=»ttc» form=»tva_form»></output> &euro;
</p>
<button>valider</button>
</form>
Compatibilité:
Navigation : Firefox 4.0+, Opera 11+, Chrome 10, ie 10+, Safari 5+
Tél. : Firefox, Chrome, Opera (Android 4), Safari (iOS 3.1), Android Browser 3.1
L'élément Keygen
Cet élément nécessite un certain bagage technique pour comprendre et maîtriser ses usages.
Essayons de résumer les points principaux.
<keygen> est utilisé pour générer un ensemble de clés pour crypter et décrypter des informations (enregistrement
stockées dans une base de données ou transmises d'un serveur à un autre, par exemple).
Le jeu est équivalent à une paire de clés, l'une dite publique, l'autre dite privée. La clé privée est stockée localement, tandis que la clé publique est
envoyée au serveur. Différents niveaux de chiffrement existent et correspondent à un niveau de sécurité plus ou moins élevé.
L'attribut keytype
Lié à l'élément keygen, cet attribut permet de renseigner le type de clé attendu. Pour le moment, le seul
qui existe est le type RSA (Rivest, Shamir et Adleman, les inventeurs de la méthode de cryptage).
<keygen keytype=»rsa» nom=»clé»>
L'attribut défi
Cet attribut ajoute une chaîne envoyée avec la clé publique.
<keygen keytype=»rsa» challenge=»sel_de_mer» name=»key»>
Créer la page : chap_4/18formulaire_typeKeygen.php
46
Traduit automatiquement
Machine Translated byparGoogle
Google
FORMULAIRES HTML 5
<p class=»hint»>Génération d'une clé. Le niveau peut être augmenté grâce au <code>challenge</code>
attribut.</p> <form action=»element
keygen.php» méthode=»post»>
<p>
<label for=»email»>Email au personnel</label> <input type=»e
mail» name=»email» id=»email»>
</p>
<p>
<label for=»secu»>Sécurisation</label> <keygen
type=»secu» nom=»secu» id=»secu»>
</p>
<br /><br />
<button>Tayst</button> </
forme>
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js»></script>
<script type=»texte/javascript»> $
(fonction() {
$(«form p+p»).after('<p><label for=»plusplus»>Ajouter un «challenge» ?</label><input type=»checkbox» name=»plusplus»
id=»plusplus» /></p>'); $(«#plusplus»).live('change', function() {
si($(this).filter(':checked').length==1) { var date = nouvelle
Date(); $
(«#secu»).attr('challenge', date.getTime());
(«#secu»).after('<span class=»moreplus»> ++'); }else { $
(«#secu»).removeAttr('challenge'); $
(«.moreplus»).remove();
};
});
}); </script>
47
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5
48
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 CSS 3
CSS 3
Préfixe du navigateur
Les frontières
Les ombres
Transparence et opacité
Des origines multiples
Les dégradés
Les transformations
Transitions
Les animations
49
Traduit automatiquement
Machine Translated byparGoogle
Google
CSS 3 HTML 5
Préfixe du navigateur
Aujourd'hui, nous sommes dans une situation intermédiaire ; toutes les nouvelles fonctionnalités CSS3 ont été définies par le W3C, mais elles ne sont pas encore
a été implémenté directement dans les navigateurs.
Cependant, certains navigateurs ont développé leurs propres règles CSS3 ; cellesci ont également été utilisées dans les recommandations du W3C.
Pour cette raison, il sera nécessaire de donner une définition CSS spécifique pour chaque navigateur
et que la page HTML doit toujours être testée sur le plus grand nombre de navigateurs.
Safari webkit Microsoft ms
Mozilla moz Chrome chrome
Les frontières
Dans CSS 2.1, il est possible de définir des styles de bordures, mais cela ne répond pas à toutes les attentes des concepteurs. Très souvent, ils
il fallait faire des bords arrondis ou des blocs avec des bordures très spécifiques et la seule solution était de placer une image en arrièreplan. Dans ce
cas, le contenu devait s'adapter au contenant (problème s'il est changeant).
Avec CSS3, il est possible de définir ces types de bordures.
Créez le document : chap_5/01bordure.html à partir de la page modele_page.html Incluez les éléments suivants
code après la balise d'entête :
<à part>
<div id=»introductioncontent»>
<h2>CSS3 du jour</h2>
<p>J'ai besoin de boire de l'eau.</p>
</div>
</aside>
Création de la feuille de style associée : assets/
css/ styles_bordure.css
#introduction
content{ largeur:400px;
arrièreplan:#F9A890;
marge:20px 0 0 20px; bordure:
2px #f2662a solide; remplissage:10px;
}
50
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 CSS 3
Rayon de bordure
Ajoutons des bords arrondis dans le CSS :
#introductioncontenu{
...
rayon de la bordure : 24 px ;
...
Enregistrer et visualiser le résultat
Cette propriété est utilisée sur la plupart des nouveaux navigateurs. Cependant, sur les versions plus anciennes, cette propriété n'est pas appliquée. Sur les versions plus anciennes
navigateurs, nous devrons ajouter 2 propriétés supplémentaires traitant ce que l'on appelle généralement les préfixes de fournisseurs.
#introductioncontenu{
...
webkitborderradius:24px; mozborder
radius:24px; oborderradius:24px; ms
borderradius:24px;
...
Dans le cas précédent, le bord arrondi a été ajouté à tous les coins, mais il est possible de traiter des bords spécifiques :
Dans le fichier CSS modifié, le rayon de la bordure :
#introductioncontenu{
...
rayon de la bordure : 24px 48px 24px 48px
...
Enregistrer et visualiser le résultat
Nous avons créé jusqu’à présent des bords joliment arrondis. , mais nous pouvons changer le rayon x et y
En CSS
#introductioncontenu{
...
rayon de bordure : 48 px/24 px ; /* x / y */ webkit
borderradius : 48 px/24 px ; mozborderradius : 48 px/
24 px ; oborderradius : 48 px/24 px ; msborder
radius : 48 px/24 px ;
...
51
Traduit automatiquement
Machine Translated byparGoogle
Google
CSS 3 HTML 5
Image de bordure
Afin de pouvoir utiliser la propriété Borderimage, nous allons commenter le borderradius
et nous augmenterons la taille de la bordure.
Dans le fichier CSS, le borderradius a été supprimé et l'image de bordure a été ajoutée :
#introduction
contenu { bordure: 20px #f2662a
solide; bordureimage: url(../images/borderbg.png) 33%; /* cas particulier
de navigateur */ webkitborderimage: url(../
images/ borderbg.png) 33%; mozborderimage: url(../ images/ borderbg.png) 33%; o
borderimage: url(../ images/
bordurebg.png) 33%; msborderimage: url(../ images/ borderbg.png) 33%;
La valeur 33% indique la position où l'image doit être
coupé par rapport à sa hauteur et à sa largeur.
Enregistrer et afficher.
Vous pouvez voir que les bords centraux sont étirés. Pour cela
motif à répéter, ajouter dans le css :
#introductioncontenu{
....
borderimage: url(../images/borderbg.png) 33% repeat; /* cas particulier du
navigateur */ webkitborderimage:
url(../ images/ borderbg.png) 33% repeat; mozborderimage: url(../ images/ borderbg.png) 33%
repeat; oborderimage: url(../ images/
borderbg.png) 33% de répétition ; msborderimage : url(../ images/ borderbg.png)
33% de répétition ;
...
Les ombres
Nouvelle propriété CSS3 : ombre sur une boîte et sur du texte. Pour cela, rien de plus simple.
Créer le document : chap_5/02ombrage.html à partir de la page 01ombrage.html
Modifiez ensuite le ccs pour obtenir assets/css/styles_ombrage.css :
#introduction
contenu { largeur : 400 px ;
arrièreplan : #F9A890 ;
marge : 20 px 0 0 20 px ; bordure : 2 px #f2662A solide ;
52
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 CSS 3
rembourrage : 10 px ;
boîteombre:15px 10px;
webkitboîteombre:15px 10px; moz
boîteombre:15px 10px; oboîte
ombre:15px 10px; msboîte
ombre:15px 10px;
}
Les 2 paramètres sont obligatoires, ils indiquent le décalage vers la droite puis le décalage vers le bas.
Il est possible d'ajouter un troisième paramètre afin de modifier le flou (x et y) du dégradé de l'ombrage.
boîteombre : 15px 10px 20px ;
Enfin, il existe un 4ème paramètre pour définir la couleur de l'ombre.
boîteombre : 15px 10px 20px #ccc;
Afin d'étendre cette propriété au plus grand nombre de navigateurs nous devons nous appuyer sur les moteurs Webkit et Moz.
Pour s'adapter à Internet Explorer IE8
<![si lte IE 8]>
<style type=»text/css»>
#introductioncontenu
zoom : 1 ;
filtre : progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135,
Strength=6);
}
</style>
<![endif]>
Pour ajouter une ombre à un texte, utilisez la propriété textshadow.
Modification de la feuille de style associée : assets/css/base.css pour ajouter une ombre au titre.
entête h1{
...
texteombre : 1 px 1 px 2 px #999 ;
webkittextombre : 1 px 1 px 2 px #999 ; moz
textombre : 1 px 1 px 2 px #999 ; otext
ombre : 1 px 1 px 2 px #999 ; mstext
ombre : 1 px 1 px 2 px #999 ;
}
53
Traduit automatiquement
Machine Translated byparGoogle
Google
CSS 3 HTML 5
Transparence et opacité
Il existe plusieurs possibilités pour créer de l'opacité. La première consiste à définir une couleur via rgba.
Dans un nouveau document chap_5/03transparence.html (page modele_page.html )
<div class=»rgba»>
<h1>RGBA</h1> </div>
.rgba
{ largeur : 200px ;
hauteur : 75px ;
bordure : #000 4px solide ;
marge : 20px ;
} .rgba h1
{ alignement du texte : centre ;
épaisseur de la police :
gras ; taille de la police : 24 px ;
Nous ajoutons au titre h1
couleur:rgba(228,76,39,0.5);
Enregistrez et visualisez le résultat.
Nous allons maintenant utiliser la propriété d'opacité . Dans la page HTML, ajoutez le code suivant :
<div class=»opacity»>
<h1>OPACITÉ</h1>
</div>
Ensuite dans la feuille de style
.opacité
{ largeur : 200 px ;
hauteur : 75 px ;
bordure : #000 4 px solide ;
marge : 20 px ;
couleur d'arrièreplan : #FFF ;
ombre de la boîte : 8 px 8 px 8 px ;
webkitboxshadow : 8 px 8 px 8 px ; mozbox
shadow : 8 px 8 px 8 px ; oboxshadow :
8 px 8 px 8 px ; msboxshadow :
8 px 8 px 8 px ;
}
54
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 CSS 3
.opacité h1
{ alignement du texte :
centre ; poids de la
police : gras ; taille de
la police : 24 px ; couleur : rgb (228, 76, 39) ;
}
Ajoutons la propriété suivante au div opcity :
opacité : 0,5 ;
Enregistrez et visualisez le résultat.
Nous allons maintenant utiliser les propriétés rgba et opacity en conjonction avec la propriété dropshadow.
Dans le corps de la page HTML :
<div class=»dropshadow»> <h1>
OMBRE PORTÉE </h1> </div>
Ensuite dans la feuille de style
dropshadow
{ largeur: 200px;
hauteur: 75px;
bordure: #000 4px solide;
marge: 20px;
couleurd'arrièreplan: #FFF; box
shadow: 8px 8px 8px rgba(0,0,0,0.5); webkitboxshadow:
8px 8px 8px rgba(0,0,0,0.5); mozboxshadow: 8px 8px 8px
rgba(0,0,0,0.5); oboxshadow: 8px 8px 8px rgba(0,0,0,0.5); ms
boxshadow: 8px 8px 8px rgba(0,0,0,0.5);
.dropshadow h1
{ alignement du texte :
centre ; poids de la
police : gras ; taille
de la police : 24 px ; couleur : rgb (228, 76, 39) ;
}
Enregistrez et visualisez le résultat.
Des origines multiples
Backgroundimage est un outil essentiel dans CSS2.1, mais il était limité à une seule image.
CSS3 étend cette capacité à plusieurs images.
55
Traduit automatiquement
Machine Translated byparGoogle
Google
CSS 3 HTML 5
Nouveau document : chap_5/04bg_multiple.html & nouvelle feuille de style : assets/css/styles_bg_multiples.css.
Nous ajoutons un fond dégradé via une image :
corps { imaged'arrièreplan: url(../images/bg1.png);
Donnant le résultat suivant :
Sans options, celuici se répète verticalement et horizontalement. Ajoutons maintenant un 2ème
image en arrièreplan comme suit :
corps{ imaged'arrièreplan: url(../images/bg1.png),url(../images/bg2.png) ;
On peut remarquer que les 2 fonds se chevauchent indépendamment et ont leur vie propre.
Ajoutons une 3ème image :
corps{ imaged'arrièreplan: url(../images/bg1.png),url(../images/bg2.png), url(../images/bg3.png) ;
Et ainsi de suite…
Il est important de noter que si les images sont toutes en arrièreplan, elles ne sont pas
pas tous sur le même plan. La 1ère image mentionnée est celle qui est la plus éloignée et celle indiquée en dernier est la
celui qui est le plus proche de nous.
Il est également possible de définir la position de l'une des images d'arrièreplan. Dans l'exemple qui
Ensuite, nous allons placer un dégradé de chaque côté :
corps { image d'arrièreplan : url(../images/bg4.png),url(../images/bg5.png); arrièreplan
répéter : répétery ; positionarrièreplan :
en haut à gauche, en haut à droite ;
56
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 CSS 3
Les dégradés
Les propriétés précédentes n'offrent que la possibilité de créer une couleur de fond unie. Si nous voulions intégrer un dégradé
Pour créer notre site web, nous avons dû utiliser l'image de fond à laquelle nous avons associé une image développée dans un logiciel comme
Photoshop. Avec CSS3 et la propriété background, nous pourrons créer nos dégradés directement dans nos pages, évitant ainsi de charger une image via
le réseau.
Nous pouvons obtenir deux types de dégradés : linéaires, horizontaux ou verticaux, centrés ou non, avec deux ou plusieurs couleurs.
Nouveau document : chap_5/05degrade.html & nouvelle feuille de style : assets/css/styles_degrade.css.
Création des conteneurs de dégradé dans la page HTML :
<div id=»simple»>
Dégradé simple </
div>
<div id="angulaire">
Dégradé angulaire </
div>
<div id="circulaire">
Dégradé circulaire </
div>
<div id="répétitif">
Dégradé répétitif </div>
<div id=»rgba»>
<h1>Dégradé RGBA</h1> </div>
div{ hauteur:75px;
largeur:400px;
marge:20px;
alignement du
texte:centre; bordure: 2px #f2662a
solide; taille de
police:20px; poids de police:gras;
Dégradé simple
Pour obtenir des dégradés linéaires, la syntaxe à utiliser est : background : lineargradient(top|left,
couleur 1 X%, couleur 2 Y%, ... couleur N z%) ;
ou sur la propriété backgroundimage. Dans le fichier CSS
57
Traduit automatiquement
Machine Translated byparGoogle
Google
CSS 3 HTML 5
#simple{ backgroundimage:lineargradient(top, white,black); background
image:mozlineargradient(top,white,black); backgroundimage:o
lineargradient(top,white,black); backgroundimage:mslinear
gradient(top,white,black); backgroundimage:webkitlinear
gradient(top,white,black);
}
On peut remarquer que le seul navigateur sur lequel le dégradé ne s'applique pas est IE.
Cependant, n'oubliez pas d'indiquer sa valeur de toute façon au cas où cette propriété finirait par être implémentée.
Si nous voulions que le dégradé linéaire soit appliqué horizontalement, nous remplacerions simplement la valeur supérieure par celle de gauche.
Dégradé angulaire
Le dégradé ne se limite pas à une application verticale ou horizontale.
horizontal d'une couleur à une autre.
#angulaire{ backgroundimage:lineargradient(45deg, blanc, vert, noir);
backgroundimage: mozlineargradient(45deg, blanc, vert, noir); backgroundimage: olinear
gradient(45deg, blanc, vert, noir); backgroundimage: mslineargradient(45deg, blanc,
vert, noir); backgroundimage:webkitlineargradient(45deg, blanc, vert, noir);
Dégradé radial
Pour créer un arrièreplan en dégradé radial, nous avons toujours les propriétés background ou backgroundimage :
arrièreplan : radialgradient(début, forme, col1 X%, col2 Y%);
Valeur de départ :
haut, milieu, en bas à gauche, centre, droite exemple : en haut à droite (le cercle commence en haut à droite)
Il est également possible d'indiquer directement une position précise en indiquant un pourcentage 60%
40% (à 60% de hauteur et 40% de largeur).
Valeur pour le formulaire :
Il est d'abord composé des motsclés cercle ou ellipse pour la forme ellemême et des motsclés suivants pour sa
extension:
couverture : occupe toute la surface du récipient.
côté le plus proche : associé au cercle, le dégradé est circulaire et s'arrête du côté le plus proche de son
centre. Avec l'ellipse, elle s'étend sur toute la surface.
closercorner : Le dégradé s'étend jusqu'au coin le plus proche de son conteneur.
58
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 CSS 3
côté le plus éloigné : le dégradé s'étend jusqu'au côté le plus éloigné de son conteneur.
farthestcorner : Le dégradé s'étend jusqu'au coin le plus éloigné de son conteneur.
contenir : la forme circulaire ou elliptique est entièrement contenue dans le récipient.
Dans le fichier CSS, définissez le dégradé radial suivant :
#circulaire{ backgroundimage: radialgradient(centre supérieur, couverture circulaire, blanc,
#111); backgroundimage: mozradialgradient(centre supérieur, couverture circulaire, blanc, #111); background
image: oradialgradient(centre supérieur, couverture circulaire, blanc, #111); backgroundimage:
msradialgradient(centre supérieur, couverture circulaire, blanc, #111); backgroundimage:webkit
radialgradient(centre supérieur, couverture circulaire, blanc, #111);
}
Dégradés répétitifs
Pour répéter un effet de dégradé, définissez simplement la valeur suivante sur l'arrièreplan (ou l'image d'arrièreplan)
propriété : X% définissant la surface restante
arrièreplan : dégradé linéaire répétitif (en haut | gauche, couleur 1 X %, couleur 2 Y %, ...) ;
arrièreplan : repeatingradialgradient(début, forme, col1 X%, col2 Y%);
#repetitif{ backgroundimage: repeatinglineargradient(gauche, blanc 80%, noir, blanc); backgroundimage:
mozrepeatinglineargradient(gauche, blanc 80%, noir, blanc); backgroundimage: orepeatinglinear
gradient(gauche, blanc 80%, noir, blanc); backgroundimage: msrepeatinglineargradient(gauche,
blanc 80%, noir, blanc); backgroundimage: webkitrepeatinglineargradient(gauche, blanc 80%, noir,
blanc);
}
Dégradé RGBA
Nous pouvons ajouter des couleurs RGBA pour obtenir un effet de transparence dans les dégradés, ce qui leur donne une certaine
profondeur.
Dans l'exemple suivant, le dégradé transparent est appliqué au style <h1>, ce qui permet à l'image
arrièreplan du conteneur à rendre visible :
#rgba
h1{ hauteur:75px; marge:0;
backgroundimage:lineargradient(top, rgba(147,185,196,0.9),rgba(110,124,140,0.9)); backgroundimage:webkit
lineargradient(top,rgba(147,185,196,0.9),rgba(110,124,140,0.9)); backgroundimage:mozlinear
gradient(top,rgba(147,185,196,0.9),rgba(110,124,140,0.9)); backgroundimage:mslinear
gradient(top,rgba(147,185,196,0.9),rgba(110,124,140,0.9)); backgroundimage:olinear
gradient(haut,rgba(147,185,196,0.9),rgba(110,124,140,0.9));
}
59
Traduit automatiquement
Machine Translated byparGoogle
Google
CSS 3 HTML 5
Les transformations
Les transformations CSS nous permettront de faire pivoter, de mettre à l'échelle ou de tordre un élément de notre page. De même, il est possible de définir un
perspective afin de simuler une position ou une animation dans l'espace 3D.
Transformation 2D
Nouveau document : chap_5/06transformation.html & nouvelle feuille de style : assets/css/transformation.css.
<div id=»wrap»>
<div class=»transformation»> <img
src=»assets/images/hitchcock.jpg» /> </div> </div>
#wrap{ largeur:80px;
margedroite:10px;
#transformation{ float:right;
margin:10px; border:
20px solid #fff; borderradius:
10px; transform: rotate(5deg); webkit
transform: rotate(5deg); moz
transform: rotate(5deg); 0
transformer : rotation(5deg); mstransform : rotation(5deg);
}
Si nous avions voulu modifier les proportions du div nous aurions appliqué :
transform: scale(1.5) > 1.5 représente la valeur 150%, à taille normale un objet vaut 1 (100%)
Transformation 3D
Les rotations
rotate3d(x,y,z,angle) : spécifie une rotation 3D autour de l'axe défini par le vecteur (x,y,z).
rotateX(angle) : spécifie une rotation autour de l'axe X.
rotateY(angle) : spécifie une rotation autour de l'axe Y. rotateZ(angle) :
Spécifie une rotation autour de l'axe Z. Équivalent à rotate(angle) en 2D.
Les traductions
translate3d(x,y,z) : spécifie une translation 3D.
60
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 CSS 3
translateZ(z) : spécifie une translation sur l'axe Z.
Changements d'échelle
scale3d(x,y,z) : spécifie un changement d'échelle 3D.
scaleZ(z) : spécifie un changement d'échelle sur l'axe Z.
Matrice
matrix3d(une matrice 4x4) : spécifie une matrice de transformation. Par défaut, toutes les fonctions
les transformations sont converties à l'aide d'une matrice, mais cela est transparent pour nous.
Perspective
perspective(numéro) : spécifie la profondeur de la perspective.
Il est possible d'appliquer plusieurs transformations différentes sur un même élément HTML. Pour cela, séparez les
différentes fonctions avec un espace. Attention cependant, les fonctions sont appliquées dans l'ordre dans lequel elles sont écrites, et donc l'effet
final peut varier (par exemple, une rotationX de 45deg + une rotationY de 45deg n'est pas équivalente à une rotationY de 45deg + une rotationX de
45deg).
Nouveau document : chap_5/06transformationbis.html & nouvelle feuille de style : assets/css/
transformation.css.
Nous créons une boîte rouge contenue dans un autre div
<div id=»scene3D»>
<div id=»red»></div> </
div>
#rouge{ largeur:300px;
hauteur:300px;
arrièreplan:rouge; }
#scene3D{ marge:auto; largeur:300px; hauteur:300px;
}
J'applique une rotation de 45° sur l'axe X (axe horizontal)
#rouge{
...
transformer: rotateX(45deg); webkit
transform: rotateX(45deg); moztransform:
rotateX(45deg); otransform:
rotateX(45deg); mstransform:
rotateX(45deg);
}
61
Traduit automatiquement
Machine Translated byparGoogle
Google
CSS 3 HTML 5
La transformation provoque un aplatissement de la forme, ce qui est tout à fait normal. Pour obtenir une impression 3D (de profondeur), la
il faut préciser la perspective. Mais cela doit être précisé sur le contenant de notre boîte rouge.
#scène3D{
...
perspective:500px;
webkitperspective:500px; moz
perspective:500px; o
perspective:500px; ms
perspective:500px;
Enregistrez et visualisez le résultat. Essayez d'ajouter du texte.
Transitions
Les transformations que nous venons de réaliser sont immédiatement exécutées dans les navigateurs. Les nouvelles fonctionnalités CSS3 permettent une transition
à réaliser dans des transformations, ce qui donne un effet visuel intéressant. Il est défini comme suit :
transitionproperty : prop1, prop2 ... propN : Liste des propriétés sur lesquelles la transition est appliquée.
transitionduration: Ns : durée de la transition en secondes.
transitiontimingfunction : value : Type de fonction de transition. Les valeurs peuvent être :
linéaire : vitesse constante du début à la fin
accélération : la vitesse de transition augmente
easingout : la vitesse de transition diminue
easeinout : la vitesse de transition est lente au début et à la fin
transitiondelay : Ns : temps d'attente avant de déclencher la transition
Il est possible de définir toutes ces informations sur une seule ligne définie comme suit : transition : prop || durée || fonction ||
retard
Pour notre premier exemple nous allons appliquer notre transition sur un élément ayant une transformation précise à savoir un lien : a vers
a:hover. Et pour ce faire, nous allons l'appliquer sur le menu de navigation de notre exemple : Ouvrez le fichier CSS assets/css/styles_structure.css et ajoutez la transition
suivante :
nav li a{
...
propriétédetransition : arrièreplan ;
duréedetransition : 1 s ;
fonction de synchronisation de transition : easeout ; délai de
transition : 0 s ;
62
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 CSS 3
webkittransitionproperty:background; webkittransition
duration:1s; webkittransition
fonction de synchronisation : facilitation ; webkittransitiondelay : 0 s ;
otransitionproperty:background; otransition
duration:1s; o
fonction de synchronisation de transition : facilitation ; otransition
delay : 0 s ;
moztransitionproperty:background; moztransition
duration:1s; moz
fonction de synchronisation de transition : facilitation ; moztransition
delay : 0 s ;
}
Enregistrez et visualisez le résultat.
On peut remarquer qu'en survolant les menus la couleur passe du noir à l'orange progressivement. Attention, la
la définition de la transition dans ce cas est placée dans la propriété du lien et non dans le lien survolé.
Dans l'exemple suivant, nous allons définir un diaporama et lorsque nous survolons chaque vignette, nous effectuons une transition
vers une rotation et une nouvelle échelle.
Créer un nouveau document chap5/07transition.html ainsi que la feuille de style assets/css/
styles_diaporama.css.
Dans la page html insérez le diaporama :
<div id=»diaporama»> <ul
classe=»galerie»>
<li><a href=»#»><img src=»assets/images/thumb_1.png» /></a></li> <li><a href=»#»><img src=»assets/
images/thumb_2.png» /></a></li> <li><a href=»#»><img src=»assets/images/thumb_3.png» /></a></li> <li><a
href=»#»><img src=»assets/
images/thumb_4.png» /></a></li> <li><a href=»#»><img src=»assets/images/
pouce_5.png» /></a></li> <li><a href=»#»><img src=»assets/images/pouce_6.png» /
></a></li> <li><a href=»#»><img src=»assets/images/thumb_7.png» /></a></li> <li><a href=»#»><img
src=»assets/images/thumb_8.png» /></a></li> <li><a href=»#»><img src=»assets/images/
thumb_9.png» /></a></li>
</ul>
</div>
#diaporama{ float:gauche; padding:20px;
}
63
Traduit automatiquement
Machine Translated byparGoogle
Google
CSS 3 HTML 5
ul.galerie
li{ float:left;
margin:0, 10px;
padding: 10px;
border: 1px solid #ddd; list
style:none;
} ul.galerie li a
img{ float:gauche; largeur:100px
}
Enregistrez et visualisez le résultat.
Définition d'une image de survol
ul.galerie li a:hover img{ /*
grossissement */ webkit
transform: scale(1.5) rotate(10deg); moztransform: scale(1.5)
rotate(10deg); otransform: scale(1.5) rotate(10deg); ms
transform: scale(1.5) rotate(10deg); transform:
scale(1.5) rotate(10deg); /* ombre */ webkit
boxshadow: 4px
4px 10px rgba(0,0,0,0.5); mozboxshadow: 4px 4px 10px rgba(0,0,0,0.5);
oboxshadow: 4px 4px 10px rgba(0,0,0,0.5); msboxshadow: 4px 4px 10px
rgba(0,0,0,0.5); boxshadow: 4px 4px 10px rgba(0,0,0,0.5);
Application de la transition
ul.galerie li a img{ /*
transition */
webkittransition: webkittransform 0,2 s d'entréesortie; moztransition:
moztransform 0,2 s d'entréesortie; otransition: o
transformer 0,2 s en entréesortie ; transition : transformer 0,2 s en
entréesortie ;
64
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 CSS 3
Les animations
La différence entre les animations et les transitions CSS n'est pas immédiatement apparente, car les deux propriétés créent un
illusion de mouvement. Dans le chapitre précédent, la transition est déclenchée par le survol d'un menu ou d'une image, donc réalisée par un
événement utilisateur. En aucun cas on ne peut préciser un numéro de déclenchement ; par exemple : faire clignoter trois fois un lien au survol, ici ce
n'est pas une transition que l'on utilisera mais une animation.
Pour réaliser une animation nous devrons placer dans les propriétés de l'objet animé :
animationname : nom de l'animation
animationduration : durée de l'animation
animationiterationcount : nombre de fois que l'animation est exécutée
animationtimingfunction : type de fonction d'animation
linéaire : vitesse constante du début à la fin
accélération : la vitesse de transition augmente
easingout : la vitesse de transition diminue
easeinout : la vitesse de transition est lente au début et à la fin
animationdelay : Temps d'attente avant l'exécution de l'animation.
Une fois ces paramètres définis, nous devrons définir l'animation ellemême
@ nom_animation{
depuis {
définition de la position de départ
X% {
définition de la position X% de l'animation. La position X% n'est pas obligatoire mais est très utile lorsque vous
je souhaite réaliser une animation en boucle ou la rotation d'un objet pour lui donner une direction.
à{
définition de la position d'arrivée
}
L'effet BOUNCE
Dans l'exemple suivant, nous allons animer une icône en boucle avec un effet « Bounce ».
Créez un nouveau document chap5/08animation.html ainsi que la feuille de style assets/css/styles_
animation.css.
65
Traduit automatiquement
Machine Translated byparGoogle
Google
CSS 3 HTML 5
<div id=»icoList»>
<div id=»icoChrome»></div> <div
id=»icoMoz»></div> <div
id=»icoIE»></div> <div
id=»icoOpera»></div> <div
id=»icoSafari»></div> </div>
Appliquez ensuite le CSS suivant :
#icoList{ marge : 20 px auto 0 auto ;
remplissage :
10 px ; bordure : 1 px solide
#CCC ; largeur :
230 px ; hauteur : 40 px
} #icoList
div{ position:relative;
largeur:32px;
hauteur:32px;
bordure:0;
flotteur:gauche;
marge:7px;
} #icoChrome{ arrièreplan:url('../images/chrome1.png');
}
#icoMoz{ arrièreplan:url('../images/firefox1.png');
} #icoIE{ arrièreplan:url('../images/ie1.png');
} #icoOpera{ arrièreplan:url('../images/opera1.png');
}
#icoSafari{ arrièreplan:url('../images/safari1.png');
}
Nous allons maintenant définir l'effet de rebond sur l'icône Opera. Appelez d'abord l'animation
#icoOpéra
...
/* appel animation */
animation : rebond 0,7 s ease infinite ;
66
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 CSS 3
webkitanimation: rebond 0,7 s facilité infinie; o
animation: rebond 0,7 s facilité infinie; moz
animation: rebond 0,7 s facilité infinie; ms
animation: rebond 0,7 s facilité infinie;
} @keyframes
rebondit{ de
{top: 0px;} 50%
{top: 10px;} à {top: 0px;}
} @webkitkeyframes
rebondit{ de
{top: 0px;} 50%
{top: 10px;} à {top: 0px;}
} @okeyframes
rebondissent{ de
{top: 0px;} 50%
{top: 10px;} à {top: 0px;}
} @mozkeyframes
rebondit{ de
{top: 0px;} 50%
{top: 10px;} à {top: 0px;}
} @mskeyframes
rebondit{ de
{top: 0px;} 50%
{top: 10px;} à {top: 0px;}
}
Enregistrez et visualisez le résultat.
Notre animation est ajoutée : elle dure 0,7 seconde, avec une méthode d'accélération facile et
manière infinie . Il est possible d'ajouter cette animation sur chaque icône avec un délai de lancement : exemple
pour icomoz : animation : bounce 0.7s easeinout infinite 0.1s ;
Curseur « Photos en boucle »
Pour créer le curseur, nous utiliserons une <section> de type conteneur qui affichera uniquement certaines images.
Les images seront placées au coeur d'une liste que nous déplacerons à un rythme régulier.
Afin de donner l'effet « photos en boucle », nous allons lister 6 images puis copier les 3 premières
images à la fin du diaporama à déplacer (9 images au total).
Créez un nouveau document chap5/08animationslider.html ainsi que la feuille de style assets/css/
styles_animation_slider.css.
Dans la page HTML, ajoutez le code suivant
67
Traduit automatiquement
Machine Translated byparGoogle
Google
CSS 3 HTML 5
<section id=»galerie»> <ul
class=»slider»>
<li><img src=»assets/images/thumb_1.png» /></li> <li><img src=»assets/
images/thumb_2.png» /></li> <li><img src=»assets/images/thumb_3.png» /
></li> <li><img src=»assets/images/thumb_4.png» /></li> <li><img
src=»assets/images/thumb_5.png» /></li> <li><img src=»assets/images/
thumb_6.png» /></li> <li><img src=»assets/images/thumb_1.png» /></
li> <li><img src=»assets/images/thumb_2.png» /></li> <li><img
src=»assets/images/thumb_3.png» /></li>
</ul>
</section>
Appliquez ensuite le CSS suivant :
#galerie{ largeur:200px;
hauteur:100px;
bordure:1px solide #CCC;
marge:20px auto 0px auto;
#galerie .slider{ affichage : tableau ; largeur : 1 260 px ; rembourrage gauche : 25 % ;
} #galerie .slider
li{ affichage : cellule
de
tableau ; largeur :
140 px ; hauteur : 70 px ; style de liste : aucun ;
} #galerie .slider li
img{ margin
top:7px; display: inlineblock;
}
Enregistrez et visualisez le résultat.
68
Traduit automatiquement
Machine Translated byparGoogle
Google
HTML 5 CSS 3
Pour masquer le curseur en dehors de la section : ajoutez au CSS :
#galerie{
...
débordement:caché;
}
Ensuite, nous allons définir l'animation comme suit
@keyframes
slideAnim{ de,11%,à {marginleft:140px;}
15%,26%{marginleft:280px;} 30%,41%
{marginleft:420px;} 45%,56%{margin
left:560px;} 65%,76%{margin
left:700px;} 80%,91%{margin
left:840px;} 99,99%{marginleft:980px;}
Au début de l'animation (à partir de) on décale le slide de 140px (ce qui correspond à la largeur d'un <ul> contenant l'image, ce qui permet
d'afficher l'image #2 en premier. A 11% de l'animation la position du slider est toujours à 140px, ce qui donne l'impression d'une image fixe
pendant un peu plus de 2 secondes, puis entre 11% et 15% le slider glisse de 140px à 280px puis garde cette position jusqu'à 26% de l'animation
et ainsi de suite.
A 99,99% la position 980px correspond visuellement à la même position que 140px. Juste avant la fin de l'animation, on déplace tout le bloc
vers la position de départ très rapidement (de 0,01% dans ce cas). Cela provoque un chevauchement d'images invisible à l'œil nu. L'animation
recommence donc depuis le début, mais on a l'impression qu'elle continue...
Il ne nous reste plus qu'à placer l'animation dans le slider :
#galerie .slider{
...
animation : slideAnim 20s accélération 0s infini ; webkit
animation : slideAnim 20s accélérationsortie 0s infini ; mozanimation :
slideAnim 20s accélérationsortie 0s infini ; msanimation :
slideAnim 20s accélérationsortie 0s infini ; oanimation :
slideAnim 20s accélérationsortie 0s infini ;
}
Il ne reste plus qu'à définir nos images clés pour tous les navigateurs :
@webkitkeyframes slideAnim{
de,11%,à {marginleft:140px;} 15%,26%
{marginleft:280px;} 30%,41%{margin
left:420px;} 45%,56%{margin
left:560px;} 65%,76%{marginleft:700px;}
69
Traduit automatiquement
Machine Translated byparGoogle
Google
CSS 3 HTML 5
80 %, 91 % {marge gauche : 840 px ;}
99,99 % {marge gauche : 980 px ;}
}
@mozkeyframes slideAnim { de, 11 %,
à {marginleft:140px;} 15 %, 26 % {margin
left:280px;} 30 %, 41 % {margin
left:420px;} 45 %, 56 % {margin
left:560px;} 65 %, 76 % {margin
left:700px;} 80 %, 91 % {margin
left:840px;} 99,99 % {marginleft:980px;}
} @mskeyframes slideAnim { de, 11 %,
à {marginleft:140px;} 15 %, 26 % {margin
left:280px;} 30 %, 41 % {margin
left:420px;} 45 %, 56 % {margin
left:560px;} 65 %, 76 % {margin
left:700px;} 80 %, 91 % {margin
left:840px;} 99,99 % {marginleft:980px;}
} @okeyframes slideAnim { de, 11 %,
à {marginleft:140px;} 15 %, 26 % {margin
left:280px;} 30 %, 41 % {margin
left:420px;} 45 %, 56 % {margin
left:560px;} 65 %, 76 % {margin
left:700px;} 80 %, 91 % {margin
left:840px;} 99,99 % {marginleft:980px;}
Enregistrez et visualisez le résultat.
70
Traduit automatiquement
Machine Translated byparGoogle
Google
Multimédia HTML 5
Multimédia
Audio
Vidéo
71
Traduit automatiquement
Machine Translated byparGoogle
Google
Multimédia HTML 5
Depuis l'arrivée de Youtube et Dailymotion, il est devenu courant aujourd'hui de regarder des vidéos sur des sites Web.
Il faut dire que l’arrivée du haut débit a contribué à démocratiser les vidéos sur le Web.
Cependant, jusqu'à présent, aucune balise HTML ne permettait de gérer la vidéo. Il fallait donc utiliser un plugin,
comme Flash. Encore aujourd'hui, Flash reste de loin le moyen le plus utilisé pour regarder des vidéos sur Youtube, Dailymotion, Vimeo et ailleurs.
Mais utiliser un plugin présente de nombreux inconvénients : on dépend de ceux qui gèrent le plugin (en l'occurrence, la société Adobe,
propriétaire de Flash), on ne peut pas toujours contrôler son fonctionnement, il y a parfois des failles de sécurité.
Au final, c'est
assez lourd.
C'est pourquoi deux nouvelles balises standards ont été créées en HTML5 : <video> et <audio>
La lecture audio
La balise <audio> que nous allons découvrir est reconnue par tous les navigateurs récents, y compris
Internet Explorer à partir de la version 9 (IE9).
En théorie, il suffit d'un simple tag pour diffuser un son sur notre page.
Créez un nouveau document chap6/01audiofile.html.
<audio src=»test.mp3»></audio>
Enregistrez et visualisez le résultat.
En théorie, rien ne se passe. En fait, le navigateur ne fait que télécharger les informations
des informations générales sur le fichier (on parle de métadonnées) mais rien de spécial ne se produira.
Afin de pouvoir écouter le fichier audio, nous allons ajouter un attribut supplémentaire à la balise :
autoplay : la musique sera jouée dès le chargement de la page. Évitez d'en abuser, c'est généralement agaçant d'arriver sur un
site qui joue la musique toute seule !
<audio src=»test.mp3» autoplay=»lecture automatique»></audio>
Enregistrez et visualisez le résultat.
La musique démarre mais l'utilisateur n'a aucun contrôle dessus, et la musique peut rapidement devenir dérangeante pour
lui. Il peut simplement changer de site.
Nous allons indiquer au navigateur que nous souhaitons afficher les commandes du lecteur audio :
contrôles : pour ajouter les boutons « Play » , « Pause » et la barre de défilement. Cela peut sembler
essentiel et vous vous demandez peutêtre pourquoi il n’est pas présent par défaut, mais certains sites Web préfèrent créer leurs propres
boutons et contrôler la lecture avec JavaScript.
<audio src=»test.mp3» autoplay=»lecture automatique» controls =»contrôles» ></audio>
Enregistrez et visualisez le résultat.
Les boutons par défaut sont définis par les navigateurs, ce qui donne une apparence différente selon le navigateur.
Pour une harmonie entre les navigateurs, vous souhaiterez peutêtre définir le vôtre
72
Traduit automatiquement
Machine Translated byparGoogle
Google
Multimédia HTML 5
boutons.
<audio id=»player» src=»test.mp3»></audio> <div>
<button onclick=»document.getElementById('player').play();»>Lecture</button> <button
onclick=»document.getElementById('player').pause();»>Pause</button> <button
onclick=»document.getElementById('player').volume+=0.1;»> Augmenter le volume</button> <button
onclick=»document.getElementById('player').volume=0.1;»> Diminuer le volume</button> </div>
Enregistrez et visualisez le résultat.
Il est également possible que pour la musique de fond de notre site nous souhaitions écouter notre fichier audio en masse :
boucle : la musique sera jouée en boucle.
<audio src=»test.mp3» autoplay=»lecture automatique» controls=»controls» loop=»boucle»></audio>
Enregistrez et visualisez le résultat.
Lors du chargement de la page, nous ne souhaitons peutêtre pas démarrer la musique mais souhaitons qu'elle soit chargée en arrièreplan
sans que l'utilisateur ne puisse s'en apercevoir. C'est le rôle de l'attribut preload :
preload : indique si la musique peut être préchargée dès le chargement de la page ou non.
l'attribut peut prendre les valeurs :
auto (par défaut) : le navigateur décide de précharger toute la musique, uniquement
métadonnées ou rien du tout.
métadonnées : charge uniquement les métadonnées (durée, etc.).
aucun : pas de préchargement. Utile si vous ne voulez pas gaspiller de bande passante sur votre site.
Vous ne pouvez pas forcer le préchargement de la musique, c'est toujours le navigateur qui décide.
Les navigateurs mobiles, par exemple, ne préchargent jamais de musique pour économiser de la bande passante (le temps de chargement est long sur un mobile).
Il reste maintenant à corriger les différentes erreurs générées par les nombreux navigateurs.
Tout d'abord, nous remarquons que le format .mp3 n'est pas reconnu par Firefox, mais il reconnaît le format .ogg.
<audio controls=»contrôles» >
<source src=»BigBuck.ogg» type=»audio/ogg» /> <source
src=»BigBuck.mp3» type=»audio/mpeg» /> </audio>
Enregistrez et visualisez le résultat.
Bien sûr, il existe encore des versions plus anciennes d'IE qui ne reconnaissent pas le lecteur audio.
La solution sera d'insérer un Flash et en dernier recours un lien pour télécharger la chanson.
73
Traduit automatiquement
Machine Translated byparGoogle
Google
Multimédia HTML 5
<audio controls=»contrôles» >
<source src=»BigBuck.ogg» type=»audio/ogg» /> <source
src=»BigBuck.mp3» type=»audio/mpeg» /> <object type=»application/x
shockwaveflash» data=»player.swf?soundFile=BigBuck.mp3»
<param name=»movie» value=»player.swf?soundFile=BigBuck.mp3» > <a
href=»BigBuck.mp3»>Télécharger la chanson</a>
</objet> </
audio>
Enregistrez et visualisez le résultat.
Lecture vidéo
La balise <video> que nous allons découvrir est reconnue par tous les navigateurs récents, y compris
repris d'Internet Explorer à partir de la version 9 (IE9).
Il suffit d'une simple balise <video> pour insérer une vidéo dans la page :
Créez un nouveau document chap6/02videofile.html.
<vidéo src=»BigBuck.mp4» contrôles largeur=»360» hauteur=»240»></ vidéo>
Enregistrez et visualisez le résultat.
D'une manière générale, la balise <video> est similaire à la balise <audio> et possède les mêmes attributs et les mêmes problèmes liés au
format.
contrôles : pour ajouter les boutons Play Pause et la barre de défilement. Cela peut sembler indispensable, mais certains sites Web
,
préfèrent créer leurs propres boutons et contrôler la lecture avec JavaScript. Pour nos besoins, cela sera plus que suffisant !
largeur : pour modifier la largeur de la vidéo.
hauteur : pour modifier la hauteur de la vidéo.
boucle : la vidéo sera jouée en boucle.
lecture automatique : la vidéo sera lue dès le chargement de la page. Encore une fois, évitez d'en abuser, c'est
généralement agaçant d'arriver sur un site qui lance quelque chose tout seul !
preload : indique si la vidéo peut être préchargée dès le chargement de la page ou non. Cet attribut
peut prendre les valeurs :
auto (par défaut) : le navigateur décide de précharger la vidéo entière, uniquement les métadonnées ou rien du tout.
métadonnées : charge uniquement les métadonnées (durée, dimensions, etc.).
aucun : Pas de préchargement. Utile si vous souhaitez éviter de gaspiller de la bande passante sur votre site.
Nous pouvons ajouter un dernier attribut :
poster : image à afficher à la place de la vidéo jusqu'au lancement de celleci. Par défaut, le navigateur prend la première image de la vidéo
mais, comme il s'agit souvent d'une image noire ou d'une image peu représentative de la vidéo, je vous conseille d'en créer une !
74
Traduit automatiquement
Machine Translated byparGoogle
Google
Multimédia HTML 5
<commandes vidéo largeur=»360» hauteur=»240» poster=»poster320.jpg»> <source
src=»BigBuck.ogg» type=»vidéo/ogg» /> <source
src=»BigBuck.mp4» type=»vidéo/mp4» /> <h1><a
href=»BigBuck.mp4»>Charger la vidéo</h1> </vidéo>
Enregistrez et visualisez le résultat.
L'un des principaux atouts de pouvoir gérer directement notre vidéo dans notre page HTML
c'est la possibilité de lui appliquer du CSS.
Dans notre fichier HTML, placez une balise <div> autour de la balise <video>.
<div id=»wrap» >
<contrôles vidéo largeur=»360» hauteur=»240» poster=»poster320.jpg»>
...
</vidéo> </
div>
Créer un nouveau document CSS assets/css/styles_video.css
#wrap{ float:right;
width:360px;
height:240px;
padding:20px;
background:#fff;
margin:20px 30px;
boîteombre:8px 8px 8px rgba(0,0,0,0.33); bordure
rayon:10px;
webkittransform: rotation(5deg); moz
transform: rotation(5deg); otransform:
rotation(5deg); mstransform:
rotation(5deg); transform:
rotation(5deg);
}
75
Traduit automatiquement
Machine Translated byparGoogle
Google
Vous aimerez peut-être aussi
- Formation HTML, CSS, JavaScript 2024-2025Pas encore d'évaluationFormation HTML, CSS, JavaScript 2024-202586 pages
- Support - Initiation Programmation Web - 2024-2025Pas encore d'évaluationSupport - Initiation Programmation Web - 2024-2025131 pages
- Balises HTML5 et listes déroulantesPas encore d'évaluationBalises HTML5 et listes déroulantes141 pages
- Introduction au développement HTML5Pas encore d'évaluationIntroduction au développement HTML5101 pages
- Support - Initiation Programmation Web1 - 2021-2022100% (1)Support - Initiation Programmation Web1 - 2021-2022129 pages
- Introduction au HTML et ses balisesPas encore d'évaluationIntroduction au HTML et ses balises23 pages
- Introduction à HTML5 et son historiquePas encore d'évaluationIntroduction à HTML5 et son historique63 pages
- HTML5 de La Page Web à  L'application Web - 2e à ©dition100% (1)HTML5 de La Page Web à  L'application Web - 2e à ©dition255 pages
- Introduction au HTML5 pour débutantsPas encore d'évaluationIntroduction au HTML5 pour débutants86 pages
- Chapitre 2 - Cours - Tech - Web - 2024 - 241016 - 214759Pas encore d'évaluationChapitre 2 - Cours - Tech - Web - 2024 - 241016 - 214759153 pages
- Introduction à HTML et CSS pour CMSPas encore d'évaluationIntroduction à HTML et CSS pour CMS61 pages
- Introduction au HTML et Mise en LignePas encore d'évaluationIntroduction au HTML et Mise en Ligne107 pages
- Introduction au Design et Développement WebPas encore d'évaluationIntroduction au Design et Développement Web71 pages
- Introduction à HTML5 et CSS3 : Balisage et Formulaires0% (1)Introduction à HTML5 et CSS3 : Balisage et Formulaires53 pages
- Introduction au HTML5 et ses balisesPas encore d'évaluationIntroduction au HTML5 et ses balises19 pages
- Fiches Cours HTML5, CSS3 Et JAVASCRIPT 3STI (Henchiri Sghaier Lycée Ibn Sina Gafsa)Pas encore d'évaluationFiches Cours HTML5, CSS3 Et JAVASCRIPT 3STI (Henchiri Sghaier Lycée Ibn Sina Gafsa)29 pages
- Introduction à la Programmation WebPas encore d'évaluationIntroduction à la Programmation Web43 pages
- 2 HTML Support Etudiant Version 3 SMI 2015 NFAOUIPas encore d'évaluation2 HTML Support Etudiant Version 3 SMI 2015 NFAOUI73 pages
- Introduction au HTML et ses BalisesPas encore d'évaluationIntroduction au HTML et ses Balises34 pages
- Devoir d'informatique PCD - Nov 2024Pas encore d'évaluationDevoir d'informatique PCD - Nov 20243 pages
- Corrigé Info Devoir 2 TA4 Lycée de HaPas encore d'évaluationCorrigé Info Devoir 2 TA4 Lycée de Ha5 pages
- Corrigé Info Devoir 2 6e Lycée de HaPas encore d'évaluationCorrigé Info Devoir 2 6e Lycée de Ha2 pages
- Devoir Informatique: Algorithmes et CPas encore d'évaluationDevoir Informatique: Algorithmes et C7 pages
- Tableau Synthèse de la Loi de Finances 2024Pas encore d'évaluationTableau Synthèse de la Loi de Finances 202413 pages
- Règlement Intérieur des Assises NationalesPas encore d'évaluationRèglement Intérieur des Assises Nationales4 pages
- Chapitre 2 - Enregistrements Et FichiersPas encore d'évaluationChapitre 2 - Enregistrements Et Fichiers10 pages
- Umeci 2025 Cours D'introduction Au Droit Commercial GeneralPas encore d'évaluationUmeci 2025 Cours D'introduction Au Droit Commercial General58 pages
- Hepato-Gastro-Enterologie QCM - PDF - Hépatite - CirrhosePas encore d'évaluationHepato-Gastro-Enterologie QCM - PDF - Hépatite - Cirrhose133 pages
- Contrôle Interne des Ventes-ClientsPas encore d'évaluationContrôle Interne des Ventes-Clients8 pages
- Ouvrir Jonathan - Dos Santos - CV 2024Pas encore d'évaluationOuvrir Jonathan - Dos Santos - CV 20241 page
- Migne. Patrologia Latina Tomus LXXIV.Pas encore d'évaluationMigne. Patrologia Latina Tomus LXXIV.707 pages
- Document de Synthese J00061233839 v2Pas encore d'évaluationDocument de Synthese J00061233839 v24 pages
- AP Expertises Reparations AutomobilePas encore d'évaluationAP Expertises Reparations Automobile5 pages
- Contrôle Continu de Diagnostic Auto LT SAVPas encore d'évaluationContrôle Continu de Diagnostic Auto LT SAV4 pages
- Comptabilisation des Actifs IncorporelsPas encore d'évaluationComptabilisation des Actifs Incorporels2 pages
- 301-A09 Lab02 Exercices Edition ControlLogix100% (2)301-A09 Lab02 Exercices Edition ControlLogix24 pages
- ? 15 Questions de Conversation - Le BénévolatPas encore d'évaluation? 15 Questions de Conversation - Le Bénévolat2 pages
- Levaluation Du Climat Social Dans Les enPas encore d'évaluationLevaluation Du Climat Social Dans Les en86 pages
- Calcul et Analyse des Coûts CompletsPas encore d'évaluationCalcul et Analyse des Coûts Complets24 pages
- Evolution Des Effectifs Au Ministère de La Transition Écologique Et SolidairePas encore d'évaluationEvolution Des Effectifs Au Ministère de La Transition Écologique Et Solidaire9 pages
