Chapitre Initiation HTML 5

Faculté des Sciences Juridiques
Université Jendouba Économiques et de Gestion
Développement Web: Initiation HTML 5
Manel Ben Sassi
Université de Jendouba, FSJSEG

[email protected]
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
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
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
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
Traitement du texte en HTML 5
19 / 86
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
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
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
Exercice
1 Pour avoir une police à espacement fixe, on utilise : a) <pre> b) <b>

c) <tt> d) CSS
23 / 86
Exercice

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

c) <tt> d) CSS
<strong> d) CSS
3 Est-ce que ce qui suit est bien formé ?
<p> Je suis <em> content < /p>< /em>
25 / 86
Exercice

c) <tt> d) CSS
<strong> d) CSS
<p> Je suis <em> content < /p>< /em>
<h1> Programmation Web </h1>
<h2> HTML <h2>
<p> Il faut respecter la syntaxe </p>
26 / 86
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
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
HTML5 : Traitement de texte
Un exemple de rendu ... Partie Edition
29 / 86
HTML5 : Traitement de texte
Un exemple de rendu ... Partie Affichage sur un client web
30 / 86
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
HTML5 : La balise header
Qui indique que l’élément est une en-tête
32 / 86
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
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
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
HTML5 : La balise footer
<footer> indique que l’élément est un pied-de-page
36 / 86
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
Les objets multimédia en HTML 5
38 / 86
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
Balise Object : pdf
la balise <Object> : un fichier pdf
40 / 86
Balise Object : Audio
la balise <Object> : un fichier audio
41 / 86
Exemple Balise : Flash
Un objet flash dans la page HTML
42 / 86
HTML5 : progresse
43 / 86
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
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
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
Les URL
URL Uniform Resources Locator
La syntaxe générale :
protocol ://user :pass@host :port/path ?query]anchor
47 / 86

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
Les formulaires en HTML5
49 / 86
HTML5 : Éléments de formulaires

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

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

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

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

Les éléments du formulaire : Nous avons une variété de type pour la
balise input...
54 / 86
La balise input de type url et adresse mail ...
55 / 86

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
Questions ...
Combien de types champs de saisie existent en HTML ?
57 / 86
Questions ...
3 types — ⇒ Lesquels ?
58 / 86
Questions ...
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
Questions ...
Il existe 3 manières ... il faut les chercher ...
60 / 86
Questions ...
Il existe 3 manières ... il faut les chercher ...
button, type=submit, type=button
61 / 86
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
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
Exemple ... à détailler
64 / 86
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
Pouvez-vous interpréter ce formulaire ? ... Dessinez-le
66 / 86
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
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

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

Questions :
<input type="text" name="firstname" size="40">.
70 / 86

Questions :
Comment asssigner une valeur par défaut au input text précedent ?
71 / 86

Questions :
<input type="text" name="firstname" value="Med" size="40">.
72 / 86

Questions :
Comment assigner une indication à une réponse dans une input de
type texte ?
73 / 86

Questions :
type texte ?
A l’aide de l’attribut placeholder
74 / 86

Questions :
type texte ?
"Comment mettre un compteur de pas égal à 3 ?"
75 / 86

Questions :
type texte ?
<input type="number" name="points" step="3">
76 / 86

Questions :
type texte ?
Comment peut-on définir un interval de valeur ?
77 / 86

Questions :
type texte ?
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
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
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
Les graphiques en HTML 5
81 / 86
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
HTML5 : Canvas
Ce qu’on pourrait faire .... avec <canvas>
83 / 86
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

Chapitre Initiation HTML 5

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre Initiation HTML 5

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapitre Initiation HTML 5

Transféré par

Droits d'auteur :

Formats disponibles

Faculté des Sciences Juridiques

Université Jendouba Économiques et de Gestion

Développement Web: Initiation HTML 5

Manel Ben Sassi

Université de Jendouba, FSJSEG

1 Les langages du web

Les langages du web

Les Langages du web

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

HTML signifie HyperText Markup Language.

CSS signifie Cascade Style Sheet

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

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

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

Les outils du web

I Ouvrir un éditeur de texte.

HTML5 n’est pas ...

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

HTML 5 est ...

HTML 5 n’est pas un nouveau langage ! !

HTML 5 est ...

HTML5 : Quoi de neufs ?

Les objectifs principaux :

HTML5 : Les nouveautés dans le code HTML 5

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

Figure – Auparavant, on pourrait avoir ...

Figure – Maintenant, HTML 5...

HTML5 : Les nouvelles balises sémantiques

Les Balises.. un petit rappel

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

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

Traitement du texte en HTML 5

HTML5 : Traitement du texte

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

HTML5 : Polices à espacement fixe

HTML5 : Eléments un peu spéciaux

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

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

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

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

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

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

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

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

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

HTML5 : Traitement de texte

Un exemple de rendu ... Partie Edition

HTML5 : Traitement de texte

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

HTML5 : La balise article

HTML5 : La balise header

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

HTML5 : La balise mark

HTML5 : La balise figure

HTML5 : La balise figcaption

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

HTML5 : La balise footer

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

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