Vous êtes sur la page 1sur 86

Faculté des Sciences Juridiques

Université Jendouba Économiques et de Gestion

Développement Web: Initiation HTML 5

Manel Ben Sassi

Université de Jendouba, FSJSEG


bensassi.manel@gmail.com

1 / 86
Sommaire

1 Les langages du web

2 Initiation HTML 5
Introduction
HTML 5, Quoi de neufs ?
Les volets principaux
Traitement du texte
Les objets multimédia
Des formulaires améliorés
Les graphiques sous HTML5

3 Bibliographie

2 / 86
Les langages du web

Les langages du web

3 / 86
Les langages du web

Les Langages du web

Pour créer un site web, on utilise au moins deux langages : le HTML et le


CSS. Il en existe d’autres mais ces deux suffisent. Il est important de bien
les distinguer et de comprendre leur utilité respective.
I HTML
I CSS
I Autres Langages
I Outils du web

4 / 86
Les langages du web

Le HTML

HTML signifie HyperText Markup Language.


C’est un langage sémantique.
Il sert à définir chaque élément de la page, indiquer leur sens, leur
importance et leur hiérarchie : titre, paragraphe, menu, lien, image,
etc.
La sémantique est importante pour permettre aux navigateurs et aux
moteurs de recherche de "comprendre" la page.

5 / 86
Les langages du web

Le CSS

CSS signifie Cascade Style Sheet


C’est un langage de présentation.
Il sert à appliquer un style graphique aux éléments définis par le
HTML : police, couleur, taille de caractère, espacement, marges, etc.
La présentation permet de rendre le code HTML lisible par un être
humain.
On pourrait en théorie se passer du CSS.

6 / 86
Les langages du web

Le CSS

une page HTML issue de Wikipédia, sans CSS.

7 / 86
Les langages du web

Le CSS

la même page HTML, cette fois-ci mise en forme grâce au CSS

8 / 86
Les langages du web

Le CSS

la même page HTML, cette fois-ci avec un code CSS adapté aux
petits écrans !

9 / 86
Les langages du web

D’autres Langages

I Javascript permet de créer des animations ou gérer l’interaction entre


l’utilisateur et la page.
I PHP, ASP, .. sont des langages de programmation permettent de
générer dynamiquement des pages HTML.
I MySQL ou PostgreSQL sont des langages qui permettent de dialoguer
avec une base de données.

10 / 86
Les langages du web

Les outils du web

Il existe de nombreux outils, certains très onéreux, pour créer un site web.
En réalité, de simples éditeurs de texte comme le Bloc-notes de Windows
ou TextEdit sur Mac suffisent. Pour s’en convaincre :

I Ouvrir un éditeur de texte.


I Inscrire un texte quelconque, par exemple "Bonjour".
I Enregistrer le fichier avec une extension ".html", par exemple
"test.html".
I Ouvrir le fichier dans un navigateur web.
I Nous avons créé notre première page web !

11 / 86
Initiation HTML 5

Initiation HTML5

12 / 86
Initiation HTML 5 Introduction

HTML5 n’est pas ...

Tout d’abord, je suis convaincu que parmi vous certains se disent :

Ou encore ...

Voire ...

13 / 86
Initiation HTML 5 Introduction

HTML 5 est ...

HTML 5 n’est pas un nouveau langage ! !

HTML 5 est ...


Une évolution de l’HTML 4.01 (et de l’XHTML 1.0), ⇒ Tout ce que
vous savez faire en HTML reste valide.
L’ajout d’une multitude de nouvelles fonctionnalités au langage HTML
ainsi qu’au Javascript.
est le fruit des travaux de l’organisation mondiale W3C (World Wide
Web Consortium) et du WHATWG (Web Hypertext Application
Technology Working Group), le groupe constitué de développeurs des
navigateurs tels que Mozilla, Opera ou Apple.
14 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Quoi de neufs ?

Les objectifs principaux :


I Les nouveaux traits se baseront sur html, css , XML et Javascript.
I Réduire les besoins des éléments externes (flash).
I Améliorer le traitement des erreurs.
I Plus de balises pour remplacer les scripts
I HTML 5 est indépendant du type d’appareil.
I Le processus de développement doit être observable par le public.

15 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Les nouveautés dans le code HTML 5

Un allégement du code : Certaines balises ont été simplifiées afin


d’alléger le code

Figure – Auparavant, on pourrait avoir ...

Figure – Maintenant, HTML 5...

16 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Les nouvelles balises sémantiques

1 Stockage local
2 Traitement de texte
3 composants du formulaire
4 Audio vidéo
5 Canevas

17 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

Les Balises.. un petit rappel

<balise> le contenu défini </balise>

Les balises entourent le contenu qu’elles définissent.


Elles sont composées d’un mot entouré des symboles < et >.
Elles fonctionnent la plupart du temps par deux : balise ouvrante et
balise fermante (précédée de /).

18 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

Traitement du texte en HTML 5

19 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Traitement du texte

Headings HTML offre 6 niveaux d’en-têtes (headings) : <h1> (Le


plus grand), <h2>, <h3> <h4> (par défaut), <h5> et <h6> (le
plus petit)
Paragraphes et retours à la lignes

20 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Polices à espacement fixe

Le contenu d’un élément <pre> es écrit avec une police à espacement fixe
et préserve de plus à la fois les espaces et les retours à la ligne.

21 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Eléments un peu spéciaux

<dfn> indique que vous introduisez un terme spécial ou nouveau,


typiquement rendu en italique.
<address> indique une adresse postale, habituellement à la fin d’un
document, ou encore une adresse de contact (créateur d’une
page web)
<abbr> indique une abréviation ; si possible, à accompagner d’un
attribut title
<blockquote> contient une citation ou une référence à une autre source ;
souvent utilisé pour inclure des titres de livres, films ou
chansons.
<q> insère une courte citation (à l’intérieur d’une phrase) d’une
autre source.

preuve

22 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

Exercice

1 Pour avoir une police à espacement fixe, on utilise : a) <pre> b) <b>


c) <tt> d) CSS

23 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

Exercice

1 Pour avoir une police à espacement fixe, on utilise : a) <pre> b) <b>


c) <tt> d) CSS
2 Pour mettre du texte en gras, on utilise : a) <b> b) <em> c)
<strong> d) CSS

24 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

Exercice

1 Pour avoir une police à espacement fixe, on utilise : a) <pre> b) <b>


c) <tt> d) CSS
2 Pour mettre du texte en gras, on utilise : a) <b> b) <em> c)
<strong> d) CSS
3 Est-ce que ce qui suit est bien formé ?
<p> Je suis <em> content < /p>< /em>

25 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

Exercice

1 Pour avoir une police à espacement fixe, on utilise : a) <pre> b) <b>


c) <tt> d) CSS
2 Pour mettre du texte en gras, on utilise : a) <b> b) <em> c)
<strong> d) CSS
3 Est-ce que ce qui suit est bien formé ?
<p> Je suis <em> content < /p>< /em>
4 Est-ce que ce qui suit est bien formé ?
<h1> Programmation Web </h1>
<h2> HTML <h2>
<p> Il faut respecter la syntaxe </p>

26 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

Un autre Exercice

Est-ce que ce qui suit est bien formé ?

1 <adresse> Toto, rue des géants de la frite, Trouville </adresse>

27 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

Un autre Exercice

Est-ce que ce qui suit est bien formé ?

1 <adresse> Toto, rue des géants de la frite, Trouville </adresse>


2 <p><abbr title="Mademoiselle">Mlle </abbr>< /p>

28 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Traitement de texte

Un exemple de rendu ... Partie Edition

29 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Traitement de texte

Un exemple de rendu ... Partie Affichage sur un client web

30 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : La balise article


Qui représente une portion de la page qui garde un sens même
séparée de l’ensemble de la page(comme un article de blog par exemple)

31 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : La balise header

Qui indique que l’élément est une en-tête

32 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : La balise mark


Est un surligneur de texte. Il marque un passage spécifique, que l’on
souhaite mettre en valeur d’une façon particulière, pour attirer l’attention.

33 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : La balise figure


C’est une unité de contenu ⇒ sert de conteneur dans lequel s’insèrent
divers éléments comme des images, des schémas, des vidéos, des tableaux
ou encore des blocs de code.

34 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : La balise figcaption


<figcaption> : Un titre pour le conteneur, son enplacement
peut-être avant ou après la balise figure

L’objectif est de lier ce contenu à une légende (facultatif)


35 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : La balise footer

<footer> indique que l’élément est un pied-de-page

36 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

Exercice

1 Quelle est la signification de la balise <article> ?


2 Quelle balise pour mettre du texte dans un conteneur ?
3 Existe-t-il une ou des balise(s) pour désigner pied et entête de
l’article ?

37 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

Les objets multimédia en HTML 5

38 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

Exemple Balise : Object

la balise <Object>

Intégrer un élément ou un fichier externe (vidéo, audio, flash, pdf ...).


Le support des éléments dépend du navigateur.

39 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

Balise Object : pdf

la balise <Object> : un fichier pdf

40 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

Balise Object : Audio

la balise <Object> : un fichier audio

41 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

Exemple Balise : Flash

Un objet flash dans la page HTML

42 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : progresse

43 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : MultiMedia - video

Cette balise intègre directement un lecteur vidéo dans la page, avec des
boutons Lecture, Pause, une barre de progression, du volume ...

44 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Les balises MultiMedia - audio

Cette balise est l’équivalent de la balise video mais pour l’audio. Avec
l’attribut facultatif autoplay, le son sera joué automatiquement dès le
chargement de la page.

45 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Les URL et les hyperliens


Les hyperliens
Les hyperliens permettent au visiteur de naviguer entre des sites web
distants en cliquant sur des mots, phrases et images.
Pour créer un lien vers un autre document, utiliser l’élément <a>. La
syntaxe minimale pour son utilisation est :

<a href="URL"></a>

Il est de bon usage de :


Rendre le contenu de vos liens concis et précis
Utiliser l’attribut title comme information contextuelle lorsque
l’utilisateur passe sur le lien

46 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Les URL et les hyperliens

Les URL
URL Uniform Resources Locator
La syntaxe générale :
protocol ://user :pass@host :port/path ?query]anchor

47 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Les URL et les hyperliens


Les anchres⇒ Jeter l’ancre pour faire des liens dans la même page web.
Les étapes à suivre :
1 Il faut tout d’abord jeter l’anchre

2 Il faut ensuite créer des liens vers les anchres :

Figure – 3 manières pour définir l’anchre

3 Si on a plusieurs ancres dans une page ...


1 On place des ancres invisibles dans le code, aux endroits adhoc : <a
name="il-faut-aller-ici" id="il-faut-aller-ici"></a>
2 On crée les liens vers ces ancres en ajoutant ] devant leur nom : <a
href="]il-faut-aller-ici"> Cliquez ici </a>
48 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

Les formulaires en HTML5

49 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires


L’élément clef pour définir un formulaire <form>

50 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires


L’élément clef pour définir un formulaire <form>

51 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires


Le formulaire est principalement constitué de
I Action spécifie où envoyer les données du formulaire ; la valeur est une
URL correspondant à une page/programme sur une serveur web.
I onsubmit et onreset peuvent être utilisées pour lancer une procédure
de contrôle (e.g. avec Javascript) quand l’utilisateur clique sur un
bouton de type submit ou reset
I method spécifie la méthode à employer pour envoyer les données ; cela
peut être "get" ou "post".

⇒ POST ou GET ?

⇒ Est ce qu’on peut avoir des formulaires imbriqués ?

52 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires


Le formulaire est principalement constitué de
I Action spécifie où envoyer les données du formulaire ; la valeur est une
URL correspondant à une page/programme sur une serveur web.
I onsubmit et onreset peuvent être utilisées pour lancer une procédure
de contrôle (e.g. avec Javascript) quand l’utilisateur clique sur un
bouton de type submit ou reset
I method spécifie la méthode à employer pour envoyer les données ; cela
peut être "get" ou "post".

⇒ POST ou GET ?

⇒ Est ce qu’on peut avoir des formulaires imbriqués ?

GET Les paramètres sont passés en claire par l’URL. Leurs longueurs
sont limités
POST Les informations passent en cachette (personal and sensitive
information). La longueur est illimité. 53 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires


Les éléments du formulaire : Nous avons une variété de type pour la
balise input...

54 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires

La balise input de type url et adresse mail ...

55 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires


La balise input de type tel ... pour le développement mobile

Figure – Affichage sur un IOS

Figure – Affichage sur un Système Android

56 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires

Questions ...
Combien de types champs de saisie existent en HTML ?

57 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires

Questions ...
Combien de types champs de saisie existent en HTML ?
3 types — ⇒ Lesquels ?

58 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires

Questions ...
Combien de types champs de saisie existent en HTML ?
3 types — ⇒ Lesquels ?
1 Champ de saisie (simple- ligne) avec la balise input et le type text
2 Champ mot-de-passe en utilisant l’élémentinput avec l’attribut type
fixé à la valeur password
3 Zone de saisie (multi-ligne) en utilisant l’élément <textarea>
Combien y a t-il de façon pour insérer un bouton ?

59 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires

Questions ...
Combien de types champs de saisie existent en HTML ?
3 types — ⇒ Lesquels ?
1 Champ de saisie (simple- ligne) avec la balise input et le type text
2 Champ mot-de-passe en utilisant l’élémentinput avec l’attribut type
fixé à la valeur password
3 Zone de saisie (multi-ligne) en utilisant l’élément <textarea>
Combien y a t-il de façon pour insérer un bouton ?
Il existe 3 manières ... il faut les chercher ...

60 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires

Questions ...
Combien de types champs de saisie existent en HTML ?
3 types — ⇒ Lesquels ?
1 Champ de saisie (simple- ligne) avec la balise input et le type text
2 Champ mot-de-passe en utilisant l’élémentinput avec l’attribut type
fixé à la valeur password
3 Zone de saisie (multi-ligne) en utilisant l’élément <textarea>
Combien y a t-il de façon pour insérer un bouton ?
Il existe 3 manières ... il faut les chercher ...

button, type=submit, type=button

61 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires

Le champ mot-passe
Un tel composant est crée avec l’élément <input> dont l’attribut type
vaut "password ". Le champ masque les caractères tapés en les remplaçant
par un point ou une astérisque

Question
Comment la valeur est transmise au serveur ? Sécurisé ?

62 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires

Les attributs d’évènements permettent d’associer un scripte


(programme) à un évènement (e.g., un clic de souris ou l’appui d’une
touche).
L’élément <body> accepte les évèments suivants : onload, onunload
Les évènements associés aux formulaires sont : onfocus, onblur,
onsubmit, onreset, onselect, onchange

63 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires

Exemple ... à détailler

64 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires

Les composants cachés


Pour passer de l’information entre différentes pages sans que l’utilisateur ne
le voie, vous pouvez utiliser un composant caché. Un tel composant est
créé avec <input> dont l’attribut type est fixé à "hidden"

Les fieldset et Legend


Pour de grands formulaires, les éléments <fieldset> et <legend> peuvent
aider à grouper les composants :
<fieldset> crée une bordure
<legend> ajoute une légende
65 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires

Pouvez-vous interpréter ce formulaire ? ... Dessinez-le

66 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires

Les attributs important de la balise input :


Certains composants de formulaire peuvent porter les attributs
disabled, readonly, required
Placeholder : attribut permet de placer une indication au niveau de
certains éléments <input>, disparaissant dès que l’utilisateur entre
une information.

67 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires

D’autres attributs intéressants pour la balise form :


autocorrect pour la correction automatique (on/off).
autocapitalize pour la mise en majuscule automatique (on/off).
spellcheck (true/false)
autofocus permet de placer le focus sur un controle sur un seul
<input> donné.
autocomplete permet d’éviter l’auto-completion lorsque cela est
sensible (login, etc.) ; valeurs on/off.

68 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires


Questions :
Comment peut-on limiter le nombre de caractère saisie à 40 dans un
input de type "text"

69 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires


Questions :
Comment peut-on limiter le nombre de caractère saisie à 40 dans un
input de type "text"
<input type="text" name="firstname" size="40">.

70 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires


Questions :
Comment peut-on limiter le nombre de caractère saisie à 40 dans un
input de type "text"
<input type="text" name="firstname" size="40">.
Comment asssigner une valeur par défaut au input text précedent ?

71 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires


Questions :
Comment peut-on limiter le nombre de caractère saisie à 40 dans un
input de type "text"
<input type="text" name="firstname" size="40">.
Comment asssigner une valeur par défaut au input text précedent ?
<input type="text" name="firstname" value="Med" size="40">.

72 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires


Questions :
Comment peut-on limiter le nombre de caractère saisie à 40 dans un
input de type "text"
<input type="text" name="firstname" size="40">.
Comment asssigner une valeur par défaut au input text précedent ?
<input type="text" name="firstname" value="Med" size="40">.
Comment assigner une indication à une réponse dans une input de
type texte ?

73 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires


Questions :
Comment peut-on limiter le nombre de caractère saisie à 40 dans un
input de type "text"
<input type="text" name="firstname" size="40">.
Comment asssigner une valeur par défaut au input text précedent ?
<input type="text" name="firstname" value="Med" size="40">.
Comment assigner une indication à une réponse dans une input de
type texte ?
A l’aide de l’attribut placeholder

74 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires


Questions :
Comment peut-on limiter le nombre de caractère saisie à 40 dans un
input de type "text"
<input type="text" name="firstname" size="40">.
Comment asssigner une valeur par défaut au input text précedent ?
<input type="text" name="firstname" value="Med" size="40">.
Comment assigner une indication à une réponse dans une input de
type texte ?
A l’aide de l’attribut placeholder
"Comment mettre un compteur de pas égal à 3 ?"

75 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires


Questions :
Comment peut-on limiter le nombre de caractère saisie à 40 dans un
input de type "text"
<input type="text" name="firstname" size="40">.
Comment asssigner une valeur par défaut au input text précedent ?
<input type="text" name="firstname" value="Med" size="40">.
Comment assigner une indication à une réponse dans une input de
type texte ?
A l’aide de l’attribut placeholder
"Comment mettre un compteur de pas égal à 3 ?"
<input type="number" name="points" step="3">

76 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires


Questions :
Comment peut-on limiter le nombre de caractère saisie à 40 dans un
input de type "text"
<input type="text" name="firstname" size="40">.
Comment asssigner une valeur par défaut au input text précedent ?
<input type="text" name="firstname" value="Med" size="40">.
Comment assigner une indication à une réponse dans une input de
type texte ?
A l’aide de l’attribut placeholder
"Comment mettre un compteur de pas égal à 3 ?"
<input type="number" name="points" step="3">
Comment peut-on définir un interval de valeur ?

77 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires


Questions :
Comment peut-on limiter le nombre de caractère saisie à 40 dans un
input de type "text"
<input type="text" name="firstname" size="40">.
Comment asssigner une valeur par défaut au input text précedent ?
<input type="text" name="firstname" value="Med" size="40">.
Comment assigner une indication à une réponse dans une input de
type texte ?
A l’aide de l’attribut placeholder
"Comment mettre un compteur de pas égal à 3 ?"
<input type="number" name="points" step="3">
Comment peut-on définir un interval de valeur ?
Possible avec les deux types number et date et les attributs minet
max ... A vous de jouer ! un exemple ?
78 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires

D’autres attributs intéressants pour la balise input : pattern


Permet de spécifier une expression régulière à la valeur assignée au
type input.
Avant l’envoie du formulaire la chaine saisie est contrôlée (checked)
Cet attribut est valable sur les input de type de text, search, url, tel,
email et password
Par convention d’usage, il est recommandé d’utilisé "tittle" pour
décrire cette expression régulière !

79 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Éléments de formulaires

Validation du formulaire ..

Un test de validation est effectué à chaque soumission (bouton submit)


pour tout controle ayant l’attribut required Pour une validation instantanée
(c’est à dire, dès que l’utilisateur quitte un champ), il faut utiliser
Javascript.

Remarque
Pour désactiver (temporairement) la validation au niveau d’un formulaire, il
faut utiliser novalidate au niveau de l’élément <form> ou au niveau du
bouton submit.

80 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

Les graphiques en HTML 5

81 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Canvas

Cette balise est probablement la plus prometteuse de toutes, puisqu’il s’agit


d’une surface sur laquelle il est possible de tracer des formes et de les
animer. En résumé . . . C’est dans cette zone que sont réalisées des
animations ou des jeux.

82 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Canvas

Ce qu’on pourrait faire .... avec <canvas>

83 / 86
Initiation HTML 5 HTML 5, Quoi de neufs ?

HTML5 : Google Maps

C’est une API JavaScript qui permet d’attirer l’attention de visiteur en :


Lui suggérant des annonces ou des publicités
Adaptant la langue du site
Visualisant l’itinéraires depuis là où se trouve le visiteur
Les étapes pour intégrer une carte
I Il faut définir la zone (largeur et hauteur) dans une division (⇒ Pensez
à<div>)
I Créer une fonction "JavaScript" pour définir les Propriétés de la carte
(La position à afficher par défaut, le zoom, les types d’affichage de la
carte : terrain, satellite, ...)
I Pour afficher, la fonctionnalité de la carte est fournie par une
bibliothèque JavaScript qu’il faut importer.

84 / 86
Bibliographie

Références Bibliographiques

85 / 86
Bibliographie

Références Bibliographiques

1 HTML5 et CSS3 Cours et exercices corrigés,Jean Engels, Edition


Eyrolles, 2012
2 CSS avancées : Vers HTML5 et CSS3, Raphaël Goetter, 2me Edition,
Eyrolles, 2012
3 CSS3 : Pratique du design web, H. Giraudel et R. Goetter, Edition
Eyrolles, 26 février 2015

86 / 86