HTML 5

MODULE:
SITES WEB STATIQUES
Partie I: langage HTML 5
CFP Agadir Formateur: Adnan ET-TAYEB Adnan.et-tayeb@ofppt.ma

2 Sommaire
Introduction
Le langage HTML
XHTML
HTML5
Structure d’une page crée en HTML5
Les formulaires
Autres éléments
Introduction
3
Le Web:
 Le client demande un fichier, le serveur lui donne le fichier
tel qu'il est stocké: processus statique
 HTML, CSS, Javascript …
 Le serveur peut aussi générer un fichier en fonction de la
demande du client: processus dynamique
 Asp.net (ou php …)
 Utilisation d’une base de données
Pour lire les pages web on utilise les versions les plus
récentes des navigateurs pour avoir une meilleur
compatibilité.
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

HTML
4
Le langage HTML :
HyperText Markup Language

A été inventé en 1991,
Permet de créer des sites web statiques,
Gère et organise le contenu des page web,
La spécification Html4 est publiée en décembre 1997
La spécification xhtml 1 (publié en 2000) est une reformulation
du html 4
La dernière version de ce langage est HTML5.

HTML
5
Balises:
Un fichier HTML doit comporter au minimum ces 4

balises:
 <html> .. </html> Délimite le début et la fin du document
<head> . . </head> Entête du document
 <title> . .</title> Titre du document
 <body> . . </body>Corps du document

HTML
6
Autres Balises:
 <ul> . . </ul> Liste non triée, liste à puces
 <ol> . . </ol> Liste triée, liste à numéros
 <li> . . </li> Elément de la liste
 <B>..</B> gras
 <I> .. </I> italique
 <U> .. </U> souligné
 <img> . . </img> Insère une image
 <a> . . </a> lien
 <table> . . </table> tableau
 <tr> . . </tr> ligne d'un tableau
 <td> . . </td> cellule d'un tableau

HTML - Mise en forme du texte
7
<p> Paragraphe </p>

<br /> Sauter une ligne
<h1>titre très important </h1>
<h2> titre important</h2>
<h3> sous titre</h3>
<h4> titre moins important</h4>
<h5> titre encore moins important</h5>
<h6> titre pas important <h6>
<em> texte en italique</em>
<strong>texte important</strong>
<mark> texte pertinent (n’est pas, forcément, important) </mark>

HTML - Les listes
8
<strong>Liste non ordonnée des langues</strong>

<ul>
<li>Arabe</li>
<li>Français</li>
<li>Anglais</li>
</ul>
<strong>Liste ordonnée des langages de programmation</strong>

<ol>
<li>C</li>
<li>C++</li>
<li>C#</li>
</ol>

HTML - Les listes
9
<strong>Liste non ordonnée des langues</strong>

<ul>
<li>Arabe</li>
<li>Français</li>
<li>Anglais</li>
</ul>

HTML - Les liens absolus et relatifs
10
<a href ="http :// www.site.com">lien vers www.site.com </a>
<a href ="page2.html">lien sur une page située dans le même dossier</a>
<a href =" nom_sous_dossier/page.html "> lien sur une page située dans le sous
dossier </a>
<a href =" ../page.html"> lien sur une page située dans le dossier parent </a>
<a href ="#introduction">Aller vers l' introduction </a>

HTML - Les liens absolus et relatifs
11
<a href ="langage_html.html#introduction" title ="cours HTML">Aller vers l'

introduction au langage HTML </a>
L’attribut : title ="cours HTML" permet d’afficher une infobulle au survol du lien. Cette
infobulle contient l’information : "cours HTML"
<a href =" http :// www.site.com" target =" _blank “>lien qui ouvre le site
www.site.com dans une nouvelle fenetre</a>
<a href =" mailto : tec.dev.com@gmail.com">Envoyez - moi un email !</a>
<a href =" cours. zip">Télécharger le cours</a>

Insérer un tableau
12
<table> <!– tableau de 2 lignes et 3 colonnes -->

<tr> <!– première ligne -->
<td>Cellule 11</td> <!– première cellule -->
<td>Cellule 12</td> <!– deuxième cellule -->
<td>Cellule 13</td> <!– troisième cellule -->
</tr>
<tr> <!– deuxième ligne -->
<td>Cellule 21</td>
<td>Cellule 22</td>
<td>Cellule 23</td>
</tr>
</table>

Insérer un tableau
13
<table> 

<tr> 
<td colspan="2" >Cellules 11 et 12 fusionnées</td>

<td rowspan ="2" >Cellule 13 et 23 fusionnées</td>

</tr>
<tr> <!– deuxième ligne -->
<td>Cellule 21</td>
<td>Cellule 22</td>
</tr>
</table>

XHTML
14
Différence entre HTML 4 et XHTML:
XHTML 1.0 (Extensible HyperText Markup Language

) est le successeur de HTML c’est une transposition
en syntaxe XML de HTML 4. La différence se joue donc
uniquement sur la syntaxe, qui est plus rigoureuse en
XML (et donc en XHTML 1.0) qu'en HTML 4. Aucune
fonctionnalité n’a été ajoutée ni retirée.
XHTML 1.0 est devenu une recommandation du
W3C en 2000

XHTML
15
En XHTML:
 Toute balise ouvrante doit être fermée, et les balises dites «vides»
sont écrites avec une barre oblique finale (exemple: <br />).
 Les noms des balises et des attributs sont écrits en minuscules.
 Les valeurs des attributs sont encadrés par des 'quotes' (apostrophes
droites) ou des "double quotes" (guillemets droits).
 Chaque attribut doit avoir une valeur (pas d'attribut vide
comme checked, qui doit être écrit checked="checked").
 Les éléments HTML doivent être correctement imbriqués
(<strong><span>contenu</span></strong>
et pas
<strong><span>contenu</strong></span>).

XHTML
16
Exemple en XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exemple XHTML 1.0</title>
</head>
<body>
<ul>
<li>Tous les éléments doivent être explicitement balisés.</li>
<li>Les balises fermantes ne sont obligatoires.</li>
<li>Les noms d'éléments et d'attributs <em class="important">doivent</em> être en
minuscules.</li>
<li>Tous les attributs doivent avoir une valeur explicite <input type="checkbox"
checked="checked" value="..." />.</li>
<li>Les guillemets sont <em class="important">toujours</em> obligatoires autour des
valeurs d'attribut.</li>
<li>Les éléments vides doivent être fermés <img src="i.png" alt="i"/>.</li>
</ul></body></html>

XHTML
17
<DOCTYPE… :
C’est la ligne de déclaration du type de document, qui indique
au navigateur:
 Dans quel type de HTML la page a été écrite (identificateur
de la version) .
 Le document spécifiant les propriétés de chaque élément,
balises et attributs, de ce type de HTML (l'URL de la ‘document
type declaration’ (DTD))
Ces doctypes servent avant tout à faire passer nos pages

au validateur du consortium W3C afin de vérifier qu'on n'a
pas fait d'erreur sur la syntaxe du HTML

XHTML
18
Déclaration de Type de Documents en XHTML :
 XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML 5
19
En 2009 le W3C a officiellement annoncé l'abandon

du développement du XHTML 2 afin de se consacrer
entièrement à son nouveau successeur : le HTML 5.
Ainsi:
 on peut de nouveau employer minuscule et majuscules dans l’écriture des
balises.
 le Code est plus simple.
 Des éléments Media plus riches
 API de géolocalisation HTML5 rendent
l'emplacement, directement disponible pour les application basée sur un
navigateur compatibleHTML5.
 Apparition des balises nouvelles (exemple :<canvas> qui permet de créer
des objets programmés en javascript).

HTML5
20
HTML5:
 HTML5 remplacer la technologie Flash que nous utilisons depuis
des années pour tout ce qui touche à l’animation sur internet:
lecteurs vidéo comme YouTube
Flash est une technologie propriétaire qui appartient à
Adobe, tandis que HTML5 est géré par l’organisme mondial
W3C.
Le W3C ou World Wide Web Consortium existe depuis
1994, c’est l’organisme international qui développe des
standards pour le Web afin que les gens puissent communiquer
efficacement à travers Internet,

HTML5
21
Avec l'apparition du html 5, de nouvelles balises

apparaitront qui n'existent pas en html 4 ni en XHTML 1:
 Les balises de structuration:
 <header></header>
 <section></section>
 <article></article>
 <nav> </nav>
 Les balises d'application web
 <video> (pour implémenter une vidéo),
 <canvas>(pour dessiner)

HTML5
22
En HTML4 on utilisent la balise div

Exemple:
<div id="nav"> </div>
<div class="header"></div>
<div id="footer"></div>
Les balise: section article, nav,

aside, header, footer segmentent des
portions du document et ont une
signification particulière pour un
navigateur ou un moteur d'indexation

HTML5
23
<header> remplace <div

id="header">
<nav> <div id="menu">
L'élément aside revêt le rôle de barre

latérale,
l'élément section est appelé pour
regrouper le contenu principal
l'élément footer est destiné au pied-de-
page
Remarque : Ces balises ne sont

reconnues par Internet Explorer que
depuis sa version 9 (IE9)

HTML5
24
Compatibilité des navigateurs avec HTML5:
Le principal problème avec l'HTML5 est que seuls

les navigateurs modernes le supportent.
Can i use it - site qui montre la compatibilité de chaque
navigateur des options du HTML5
les éléments multimédia doivent être compressé selon de
multiples formats afin d'être compatible avec la plupart des
navigateurs. Ainsi, on utilise mp3 pour les navigateurs Safari et
Chrome et ogg pour les navigateurs Mozilla (Firefox)…

HTML5
25
Elément audio

Structure de base d'une page HTML5
26
<! DOCTYPE html>

<html>
<head>

<meta charset ="utf -8" />
<title >Titre </title >
</ head>
<body>

</ body>
</ html>

Structure de base d'une page HTML5
27
<! DOCTYPE html > indique qu'il s'agit bien d'une page web HTML5
Entre <html > et </html > on met le contenu de la page
Dans l’ L'en-tête: entre <head> et </head> on met les informations générales sur la
page comme
 Son titre entre <title> et </title>
 L'encodage (pour la gestion des caractères spéciaux):
<meta charset ="utf -8" />
Le corps de la page web est mis entre <body> et </body>
Entre  on met les commentaires

Insérer des images et des figures
28
<img src=" dossier/nom_image.jpg" alt=" Description de l’mage " title = " Description
de l’mage " />
src=" dossier/nom_image.jpg " : Chemin absolu ou relatif vers l’image
alt=" Description de l’mage " : Indique un texte alternatif si l’image ne peut pas être
téléchargée.
title = " Description de l’mage " : Affiche une infobulle au survol de l’image
Cas d’image avec légende:

<figure >
<img src="chemin vers image1" alt= " texte alternatif" />
<img src="chemin vers image2" alt= " texte alternatif" />
<figcaption > Légende </ figcaption >
</ figure >

Les formulaires
29
Un formulaire est une zone interactive de la page web, dans laquelle on peut
saisir des informations (nom, mot de passe, date de naissance, pays …).
<form method ="post" action ="page.php">


<label for="nom">Votre nom </label>

<input type ="text" name="nom" id="nom" placeholder="votre nom"
maxlength="10" size ="30" autofocus required />

</form >

Les formulaires
30
method ="post" : Mode d'envoi des données

action="page.php" : Page vers laquelle on sera redirigé après cliquer sur le bouton
d’envoi du formulaire et qui traitera les informations.
id="nom" :L’identifiant du champ est ‘nom’
type ="text" :Le champ ‘nom’ est une zone de texte
maxlength="10" :La nombre maximal des caractères est 10
size ="30" :La taille du champ est 30
placeholder="votre nom": Indication sur le contenu du champ
autofocus : Dès le chargement de la page, le curseur se placera dans ce champ
Required : Indique au navigateur que ce champ est obligatoir
Pour donner une valeur par défaut au champ on utilise l’attribut: value ="valeur"

Les formulaires
31
Zone de mot de passe

<input type ="password" name ="mdp" id="mdp" />
Zone de texte multiligne

<textarea name="name" id="id" rows ="2" cols="40" >Texte ici</textarea>
Case à cocher (un ou plusieurs choix)

<input type ="checkbox" name = "chb1" id= "chb1" checked="checked" />

<label for="chb1">Choix 1</ label >

Les formulaires
32
Zone d’option (un seul choix)
<input type ="radio" name ="rd1" value ="option1" id="option1" />

<label for="option1">Option 1</label >
<br />
<input type ="radio" name ="rd1" value ="option2" id="option2" />
<label for="option2">Option 2</label >
Il faut mettre le même nom (name ="rd1") dans les deux options pour que le
navigateur sache qu’il s’agit d’un groupe.

Les formulaires
33
Zone de sélection (liste déroulante)
<select name ="groupe" id="groupe">

<option value ="0">Veuillez choisir</ option >
<optgroup label="TDI"><!--groupe 1 -- >
<option value ="tdi11" selected="selected">TDI 1 A </ option >
<option value ="tdi12">TDI 1 B </ option >
</optgroup>
<optgroup label="TRI"><!--groupe 2 -- >
<option value ="tri11" selected="selected">TRI 1 A </ option >
<option value ="tri12">TRI 1 B </ option >
</optgroup>
</select >
L’attribut ‘value’ permet d’identifier le choix de visiteur.
L’option par défaut est l’option ayant l’attribut ‘selected’.

Les formulaires
34
Zone de saisie d’une adresse E-mail

<input type="email" />
Zone de saisie d’une adresse absolue (URL)

<input type="url" />
Zone de saisie de numéro de téléphone

<input type ="tel" />
Zone de saisie des nombres

<input type="number" min="200" max="222" step="10" />

Les formulaires
35
Zone de saisie d’une date

<input type ="date" />
Zone de saisie de l’heure

<input type ="time" />
Zone de saisie d’une semaine

<input type ="week" />
Zone de saisie du mois

<input type ="month" />
Zone de saisie de date et heure

<input type ="datetime" />

Les formulaires
36
Champ de recherche
<input type ="search" />
Insertion d’un curseur

<input type=“range" min="200" max="222" value="210" step="10" />
Insertion d’un champ couleur

<input type ="color" value="#00FF00" />

Les formulaires
37
Regroupement des champs d’un formulaire

<form method ="post" action ="page.php">
<fieldset>
<legend>Titre du groupe 1</legend>
Liste des champs du groupe 1
</fieldset>
<fieldset>
<legend>Titre du groupe 2</legend>
Liste des champs du groupe 2
</fieldset>
…
</form>

Les formulaires
38
Les type des boutons:
Bouton pour exécuter des action sur la page (en JavaScript)

<input type ="button" value =" Valider " />
Bouton pour remettre le formulaire à zéro

<input type ="reset" value =" Annuler" />
Bouton pour envoyer les données à page indiquée dans l’attribut action
<input type ="submit " value =" Envoyer " />
Bouton d’envoie présenté sous forme d’image

<input type ="image" src ="nom de l’image" />

Insertion d'un élément audio
39
<audio src="son.mp3" controls>

Ici on met un texte alternatif qui sera affiché si le navigateur ne comprend pas la
balise ‘audio’ ou le format ‘mp3’.
</audio>
L’attribut controls Permet d’ajouter les boutons Lecture , Pause et la barre
de défilement.
Utiliser cette deuxième méthode pour donner au navigateur la possibilité de

choisir automatiquement le format qu'il reconnaît.
<audio controls >
<source src="son.mp3" ></ source >
<source src="son.ogg" ></ source >
</audio>

Insertion d'un vidéo
40
<video src=" video. webm "

controls
poster =" video.jpg"
width ="600 ">
</ video >

HTML5 - Nouveaux éléments
41
 main : définit le contenu principal de la page, il doit être unique dans la page
 section : définit les sections dans un document. Tels que les chapitres, en-têtes, pieds
de page, ou toutes autres sections du document.
 article : partie indépendante du site, comme un commentaire.
 aside : associé à la balise qui le précède.
 header : 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 un document. Contient généralement
le nom de l'auteur, la date à laquelle le document a été écrit et / ou ses
coordonnées.

42
 nav : définit une section dans la navigation.

 figure : définit des images, des diagrammes, des photos, du code, etc.
 figcaption : légende pour la balise <figure>.
 audio : pour définir un son, comme la musique ou les autres flux audio (streaming).
 video : Insérer un contenu vidéo en streaming.
 track : Insérer un sous-titre (au format WebVTT) à une vidéo affichée avec la balise
vidéo.

43
 embed : définit un contenu incorporé, comme un plug in.

 mark : définit un texte marqué.
 meter : Permet d’utiliser les mesures avec un minimum et maximum connus, pour
afficher une jauge.
 progress : définit une barre de progression sur le travail en cours d’exécution.
 time : définit une date ou une heure, ou les deux. Cette balise a été abandonnée en
octobre 2011 en faveur de la balise data 4 avant d'être réintroduite5.

44
 canvas : utilisé pour afficher des éléments graphiques, il faut utiliser un script pour
l’animer.
 command : définit un bouton.
 details : précise les détails supplémentaires qui peuvent être masqués ou affichés
sur demande.
 keygen : permet de générer une clé (sécurisé).
 output : représente le résultat d’un calcul.
 ruby, rt et rp : annotations ruby.

HTML 5

Transféré par

Informations du document

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

HTML 5

Transféré par

Droits d'auteur :

Formats disponibles

MODULE:

SITES WEB STATIQUES

Partie I: langage HTML 5

CFP Agadir Formateur: Adnan ET-TAYEB Adnan.et-tayeb@ofppt.ma

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

HyperText Markup Language

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

Un fichier HTML doit comporter au minimum ces 4

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

<p> Paragraphe </p>

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

<strong>Liste non ordonnée des langues</strong>

<strong>Liste ordonnée des langages de programmation</strong>

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

<strong>Liste non ordonnée des langues</strong>

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

<a href ="http :// www.site.com">lien vers www.site.com </a>

<a href ="#introduction">Aller vers l' introduction </a>

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

<a href ="langage_html.html#introduction" title ="cours HTML">Aller vers l'

<a href =" mailto : tec.dev.com@gmail.com">Envoyez - moi un email !</a>

<a href =" cours. zip">Télécharger le cours</a>

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

<table> <!– tableau de 2 lignes et 3 colonnes -->

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

<table>

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

Différence entre HTML 4 et XHTML:

XHTML 1.0 (Extensible HyperText Markup Language

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

Exemple en XHTML 1.0:

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

Ces doctypes servent avant tout à faire passer nos pages

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

Déclaration de Type de Documents en XHTML :

 XHTML 1.0 Strict

 XHTML 1.0 Transitional

 XHTML 1.0 Frameset

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

En 2009 le W3C a officiellement annoncé l'abandon

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

Avec l'apparition du html 5, de nouvelles balises

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

En HTML4 on utilisent la balise div

Les balise: section article, nav,

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

<header> remplace <div

L'élément aside revêt le rôle de barre

Remarque : Ces balises ne sont

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

Compatibilité des navigateurs avec HTML5:

Le principal problème avec l'HTML5 est que seuls

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

<! DOCTYPE html>

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023

Entre <html > et </html > on met le contenu de la page

 L'encodage (pour la gestion des caractères spéciaux):

<meta charset ="utf -8" />

Le corps de la page web est mis entre <body> et </body>

Entre  on met les commentaires