Développement Web

coté Client

Partie 1 :
Langage HTML

1
[Link]
Définitions

2
[Link]
 Définitions : Le Web
• Le terme utilisé pour désigner : World Wide Web, ou WWW.

• Un système hypertexte fonctionnant grâce au réseau informatique mondial

Internet.

• Inventé par Tim Berners-Lee à la fin des années 1980, afin de

rendre possible la consultation, via un navigateur, des pages

d’applications (sites Internet) web.

[Link] 3
 Définitions : Le Web
• Le WWW n’est qu’une application (logiciel) !!! : un aspect entre plusieurs
aspects d’applications dédiés à être utilisées avec Internet à savoir les
applications de partage de fichiers, les applications de courrier électronique …

[Link] 4
 Définitions : Application Web
• Appelée aussi Site web est un ensemble de pages web et de ressources reliées
par des hyperliens, défini et accessible par une adresse web,

• Hébergée sur un serveur web accessible via le réseau mondial internet.

• L'ensemble des applications web constituent le World Wide Web.

• Exemples des applications Web:

• Yahoo (1994)

• Google (1998)

• Wikipédia (2001)

• Facebook (2004)
[Link] 5
• …..
Définitions : NavigateurWeb
• Appelé Web Browser en anglais est un logiciel informatique qui permet
à un utilisateur d’afficher le contenu des pages web.

• Il existe de nombreux navigateurs web, pour toutes sortes de matériels,

Les plus utilisés à l'heure actuelle sont: Google Chrome, Mozilla Firefox,
Internet Explorer/Edge , Safari, Opera,…

[Link] 6
Définitions : Serveur Web
• En tant que machine : ordinateur connecté à Internet qui héberge des
données / fichiers et qui gère les requêtes provenant des navigateurs
des internautes.

• En tant que logiciel : logiciel permettant de faire fonctionner et de

rendre public un site ou une application web. Les plus connus sont

Apache IIS NGINX LIGHTTPD

[Link] 7
HTML : Histoire d’un
langage

8
[Link]
HTML: Hyper Text Markup Language
• Langage du Web, n’est pas un langage de programmation !!!

• Langage de balisage qui indique au navigateur comment structurer les

pages web visitées.

• Composé d'une série de balises permettant d’envelopper différentes

parties du contenu pour les faire apparaître d'une manière bien
déterminée.
• Les débutants dans le domaines de la conception de sites Web
entendent souvent le mot «balises» et se demandent ce que cela
signifie et pourquoi cela est différent du de ce qu’on appelle le «code».

[Link] 9
HTML: Hyper Text Markup Language
• L’expression langage de balisage vient du processus de marquage
manuscrit . Les instructions pour imprimantes étaient dérivées avec des
marges faites à la main.
• Un langage de balisage est conçu pour traiter, définir et présenter du
texte.
• HTML est le langage de balisage standard et le plus couramment utilisé.
• Son rôle est de gérer et organiser le contenu en décrivant la structure
des pages Web,

[Link] 10
HTML: Hyper Text Markup Language
• En HTML, les balises sont utilisées pour définir des structures de texte,

• Les balises et les éléments sont délimités à l’aide des caractères < et >,

• Les navigateurs sont responsables du rendu du contenu de la page Web

grâce à ces balises,

• Dans les premiers jours du développement Web, toutes les balises de

contenu et de style étaient présentes dans un langage encombrant (et
souvent compliqué).

[Link] 11
HTML: Hyper Text Markup Language
• Au fil du temps, le W3C a décidé qu’il était nécessaire de séparer le
contenu du style, ce qui a conduit à la création de feuilles de style,

• De nos jours, les tags utilisés pour définir le style d’un document (p. Ex.
FONT) sont devenus obsolètes.

• Les gens ont préféré utiliser les feuilles de style car plus pratiques.

• Seules les balises de définition de contenu (par exemple H1) constituent

le code HTML de base.

[Link] 12
HTML: Hyper Text Markup Language
• Exemple: Une balise spécifique peut:

• Transformer une partie du contenu en un lien vers une autre page sur le Web,

• mettre des mots en italique

• Exemple : Soit le contenu texte suivant

Chers TDIs et TDMs. Ceci est un test

On va s’amuser à envelopper les parties de ce contenu par quelques balises du

langage HTML.

[Link] 13
HTML: Historique
• Apparu en 1991 lors du lancement du Web, HTML est le standard
pour la création des sites web.
• Plusieurs versions ont connu le jour:
•

[Link] 14
HTML: De HTML à HTML5
• HTML5 a été publié dans le but principal d’améliorer le World Wide Web
pour les développeurs et les utilisateurs,

• C’est principalement un langage de balisage, mais il a ajouté une couche

de fonctionnalités au HTML original et a éradiqué une partie de la
rigueur qui était présente dans le XHTML.

• Chaque jour, de nouvelles fonctionnalités sont ajoutées à HTML5.

• La principale différence entre HTML et HTML5 est que l’audio et la vidéo

ne sont pas intégrées dans le HTML alors que ceux-ci sont intégrés à
HTML5.
[Link] 15
HTML : Eléments de
base

16
[Link]
HTML: Les balises
• Une page HTML doit contenir des balises qui sont invisibles à l’écran.

• Leurs rôle est d’indiquer à la machine comment afficher les différentes

parties du contenu.

• Exemple: indiquer à la machine le titre de la page, le corps de la page, la nature de

l’affichage …

• Les balises (historiquement) sont divisées en balises orphelines et

balises en pairs.

• Balises orphelines : exemple <br/> pour le retour à la ligne

• Balises en pair : exemple <i> texte</i> pour un affichage en mode italique du texte
entre les deux pairs [Link] 17
HTML: Les balises
Exemples :

1. Créer un fichier, nommer le « [Link] »

!!Attention

à l’extension

du fichier !!

[Link] 18
HTML: Les balises
Exemples :

2. Dans le fichier, ajouter le contenu suivant:

3. Exécuter le fichier dans le navigateur :

[Link] 19
HTML: Les balises
Exemples :

3. Modifier le contenu en ajoutant la balise en pair <b> … </b>

• Exécuter le fichier dans le navigateur :

[Link] 20
HTML: Les balises
Exemples :

3. Modifier le contenu en ajoutant la balise en pair <i> …</i>

• Exécuter le fichier dans le navigateur :

[Link] 21
HTML: Les balises
Exemples :

4. Combiner les deux balises :

• Exécuter le fichier dans le navigateur :

[Link] 22
HTML: Les attributs
• Des propriétés de balises

• Leurs rôle est de donner des indications supplémentaires aux

balises.

• La syntaxe est assez simple:

• <balise attribut="valeur">………</balise>

• Ou bien <balise attribut="valeur"/>

[Link] 23
HTML: Anatomie d’une page HTML
• La déclaration <! DOCTYPE html>
définit ce document comme HTML5

• L'élément <html> est l'élément racine

d'une page HTML

• L'élément <head> contient des méta-

informations sur le document

• L'élément <title> spécifie un titre

pour le document

• L'élément <body> contient le contenu

visible de la page

[Link] 24
HTML: Les paragraphes
• Les paragraphe en HTML sont définis à l’aide de la balise <p>.
• L’attribut align définit le type d’alignement du paragraphe

Balise ouvrante Balise fermante

<p align="center"> ceci est un paragraph </p>

Valeur de
attribut l’attribut élément p

[Link] 25
HTML: Les paragraphes
• Exemple :
Soit le fichier html avec le
contenu suivant:

[Link] 26
HTML: Les paragraphes
• Exemple :
Le rendu dans le navigateur est le suivant :

[Link] 27
HTML: Les paragraphes
• Exemple :
Si on rajoute les balises
<p>..</p>

[Link] 28
HTML: Les paragraphes
• Exemple :
Le rendu dans le navigateur est le suivant :

[Link] 29
HTML: Les paragraphes
• Exemple :
Si on rajoute l’attribut
align à la premiére balise
<p align="center">..</p>

[Link] 30
HTML: Les paragraphes
• Exemple :
Le rendu dans le navigateur est le suivant

[Link] 31
HTML: Les titres
• <h1>: Titre de niveau 1
Exemple:
• <h2> : Titre de niveau 2

• <h3> : Titre de niveau 3

Résultat:
• <h4> : Titre de niveau 4

• <h5> : Titre de niveau 5

• <h6> : Titre de niveau 6

[Link] 32
HTML: Les listes
 <ul>: Liste à puces, non Exemple :
numérotée Résultat:

 <ol> :Liste numérotée

 <li> : Élément de la liste à

puces
 <dl> : Liste de définitions
 <dt>: Terme à définir
 <dd> : Définition du terme
[Link] 33
 HTML: Les images
• Les images HTML sont définis avec la balise <img>.
• Les attribut:
• src : le fichier source
• alt : le texte alternative
• width, and height : les dimensions de l’image

• Exemple
<img src="cheminRelatif/[Link]" alt="texte" width="120" height="142" />

[Link] 34
 HTML: Les tableaux Exemple:

• Les différentes balises liées aux tableaux

• <table> : Tableau
• <caption> : Titre du tableau
• <thead> : Section de l'en-tête du tableau
• <tbody> : Section du corps du tableau
• <tfoot> : Section du pied du tableau
• <tr> : Ligne de tableau
• <th> : Cellule d'en-tête
• <td> : Cellule

[Link] 35
 HTML: Les tableaux Exemple:
<TABLE border=6>
<TR>
• Les principaux attributs de l’element Table:
<TD>A</TD>
• Border : pour spécifier l'épaisseur de la bordure <TD>B</TD>
</TR>
extérieure
<TR> <TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>

[Link] 36
 HTML: Les tableaux Exemple:
<TABLE border=6
• Les principaux attributs de l’element Table: cellpadding=20>
<TR>
• Cellpadding : pour spécifier l'espace entre bordures et <TD>A</TD>
<TD>B</TD>
contenu des cellules
</TR>
<TR> <TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>

[Link] 37
 HTML: Les tableaux Exemple:
<TABLE border=6
cellspacing=12>
• Les principaux attributs de l’element Table:
<TR>
• Cellspacing : pour spécifier l’epaisseur des bordures <TD>A</TD>
<TD>B</TD>
entre cellules
</TR>
<TR> <TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>

[Link] 38
 HTML: Les tableaux Exemple:
<TABLE border=6
cellspacing=12
• Les principaux attributs de l’element Table:
cellpadding=20>
• Cellspacing : pour spécifier l’epaisseur des bordures <TR>
<TD>A</TD>
entre cellules
<TD>B</TD>
</TR>
<TR> <TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>

[Link] 39
 HTML: Les tableaux Exemple:
<TABLE border=6
cellspacing=12
• Les principaux attributs de l’element Table:
cellpadding=20 width=80%>
• Width : permet de déterminer quelle proportion de <TR>
<TD>A</TD>
la largeur de la fenêtre doit être occupée
<TD>B</TD>
</TR>
<TR> <TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>

[Link] 40
 HTML: Les tableaux Exemple:
<TABLE border=6
cellspacing=12
• Les principaux attributs de l’element Table:
cellpadding=20 width=50%
• Height: permet de déterminer quelle proportion Height=50%>
<TR>
de la hauteur de la fenêtre doit être occupée
<TD>A</TD>
<TD>B</TD>
</TR>
<TR> <TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>

[Link] 41
 HTML: Les tableaux Exemple:
<TABLE border=1>
• Les principaux attributs de l’element TD: <TR>
<TD>A</TD> <TD>B</TD>
• colspan: permet d’indiquer que la cellule courante <TD>C</TD> <TD>D</TD>
<TD>E</TD>
s’étend sur plusieurs colonnes.
</TR>
<TR>
<TD>F</TD> <TD>G</TD>
<TD colspan=3>H</TD>
</TR>
</TABLE>

[Link] 42
 HTML: Les tableaux Exemple:
<TABLE border=1>
<TR>
• Les principaux attributs de l’element TD:
<TD>A</TD> <TD>B</TD>
• rowspan: permet d’indiquer que la cellule <TD>C</TD> <TD>D</TD>
<TD rowspan=2>E</TD>
courante s'étend sur plusieurs lignes..
</TR>
<TR>
<TD>F</TD> <TD>G</TD>
<TD>H</TD><TD>I</TD>
</TR>
</TABLE>

[Link] 43
 HTML: Les tableaux
• Les principaux attributs de l’element TD:
Exemple:
<TABLE border=1>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
<TD>E</TD>
</TR>
<TR>
<TD rowspan=2>F</TD> <TD>G</TD> <TD colspan=3>H</TD>
</TR>
<TR>
<TD>I</TD> <TD>J</TD>
<TD colspan=2 rowspan=2>K</TD>
</TR>
<tr> <td> L</td><td>M</td><td>N</td></tr></TABLE>
[Link] 44
 HTML: Les tableaux
Exemple:
• Les principaux attributs applicables aux <TABLE border=1 width=50%
height=50%>
éléments TR et TD: <TR>
• Align : pour l’alignement horizontal, il peut prendre les valeurs:
<TD>A</TD> <TD
• Right align=center>B</TD> </TR>
• Center <TR>
• Left <TD>C</TD> <TD align=left>D</TD>
</TR>
<TR>
<TD align=right>E</TD> <TD>F</TD>
</TR>
</TABLE>

[Link] 45
 HTML: Les tableaux
Exemple:
• Les principaux attributs applicables aux <TABLE border=1 width=50%
height=50%>
éléments TR et TD: <TR>
• valign : pour l’alignement vertical, il peut prendre les valeurs: <TD>A</TD> <TD
• top (en haut) valign=top>B</TD> </TR>
• middle (centré verticalement) <TR>
• bottom (en bas) <TD>C</TD> <TD
valign=middle>D</TD>
</TR>
<TR>
<TD valign=bottom>E</TD>
<TD>F</TD>
</TR>
</TABLE>

[Link] 46
 HTML: Les tableaux
Exemple:
• L’élément CAPTION: <TABLE border=1>
• Permet de placer une légende au dessus ou au dessous d’un <CAPTION align=bottom>
tableau selon que l’attribut align a la valeur top ou bottom Légende
</CAPTION>
<TR>
<TH>A</TH>
<TH>B</TH>
</TR>
<TR>
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>

[Link] 47
 HTML: Les tableaux
Exemple:
• L’élément CAPTION: <TABLE border=1>
• Permet de placer une légende au dessus ou au dessous d’un <CAPTION align=top>
tableau selon que l’attribut align a la valeur top ou bottom Légende
</CAPTION>
<TR>
<TH>A</TH>
<TH>B</TH>
</TR>
<TR>
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>

[Link] 48
 HTML: Les tableaux
• Exercices d’application
• Exercice 1:
Ecrire le script HTML permettant d’assurer le rendu suivant:

[Link] 49
 HTML: Les tableaux
• Exercices d’application
• Solution :

<table>
<tr>
<td colspan="2"> 2 cellules fusionnées horizontalement </td>
</tr>
<tr> <td>la la</td> <td>la la</td> </tr>
</table>

[Link] 50
 HTML: Les tableaux
• Exercices d’application
• Exercice 2:
Ecrire le script HTML permettant d’assurer le rendu suivant:

[Link] 51
 HTML: Les tableaux
• Exercices d’application
• Solution :

<table>
<tr>
<td rowspan="2"> 2 cellules fusionnées verticalement </td>
<td>la la </td>
</tr>
<tr>
<td>la la </td>
</tr>
</table>

[Link] 52
 HTML: Les tableaux
• Exercices d’application
• Exercice 3:
Ecrire le script HTML permettant d’assurer le rendu suivant:

[Link] 53
 HTML: Les tableaux
• Exercices d’application
• Solution :

<TABLE border=3>
<tr> <td rowspan="3">3 cellules fusionnées </td>
<td>1A</td> <td>2A</td> <td>3A</td> <td>4A</td> </tr>
<tr>
<td>1B</td> <td>2B</td> <td>3B</td> <td>4B</td>
</tr>
<tr>
<td>1C</td> <td>2C</td> <td>3C</td> <td>4C</td>
</tr>
<tr>
<td>cellule non fusionnée</td> <td>1D</td> <td>2D</td> <td>3D</td> <td>4D</td>
</tr>
</TABLE>

[Link] 54
 HTML: Les tableaux
• Exercices d’application
• Exercice 4:
Ecrire le script HTML permettant d’assurer le rendu suivant:

[Link] 55
 HTML: Les tableaux
• Exercices d’application
• Solution :

<TABLE border=3>
<tr>
<td rowspan="2">Filiéres</td>
<td colspan="2" align=center>Performances</td>
</tr>
<tr>
<td>Nombre de groupes </td>
<td>Nombre de stagiaires</td>
</tr>
<tr>
<td>TDI</td>
<td align=center>8</td>
<td align=center>500</td>
</tr>
</TABLE>

[Link] 56
 HTML: Les tableaux
• Exercices d’application
• Exercice 5:
Ecrire le script HTML permettant d’assurer le rendu suivant:

[Link] 57
 HTML: Les tableaux
• Exercices d’application
• Solution :

<TABLE border=2>
<tr> <td colspan="2" rowspan="2"> case sur 2 cellules horizntales et 2 cellules verticales </td>
<td>C_H1 </td>
</tr>
<tr>
<td>C_H2 </td>
</tr>
<tr>
<td>C_V1</td>
<td>C_V2 </td>
<td>C_V3 </td>
</tr>
</TABLE>

[Link] 58
 HTML: Les balises de mise en valeur
• Pour mettre un texte en valeur, on peut utiliser une des balises suivantes :

• <u> texte </u> : pour souligner le texte

• <i> texte</i> : pour incliner le texte

• <b> texte</b> : pour mettre le texte en gras

• <strong> texte </strong>et <em> texte </em> : pour afficher le texte en

valeur (par defaut, le navigateur affiche le texte en gras).

• <mark> texte </mark> : permet de faire ressortir visuellement le texte.

[Link] 59
HTML: Les liens
• Les liens sont introduits à l’aide de la balise <a>.

• Deux types de liens existent:

• Liens internes: on utilise un chemin relatif,

• 3 cas de liens relatifs :

• Même dossier : href = « [Link] »

• Sous-dossier : href = « sous_dossier/[Link] »

• Dossier parent : href=« ../[Link] »

[Link] 60
HTML: Les liens

[Link] 61
HTML: Les liens
• Les liens sont introduits à l’aide de la balise <a>.

• Si le navigateur trouve la page en question, elle s’ouvre dans

l’onglet de la page courante pour ouvrir le nouveau lien dans un
nouvel onglet, on ajoute l’attribut tagret="_blank"
• Exemple:
<a href=“……” target=“_blank”> ……………………………………….</a>

[Link] 62
 HTML: Les liens internes
• Exemple:
MyApp

• Soit l’arborescence de l'App web suivante: [Link]

d0

[Link]
[Link]
d1
[Link]

[Link] 63
 HTML: Les liens internes
• Exemple:

• [Link]

<p align=center>L'histoire de l'Univers décrit l'évolution de l’Univers en s’appuyant sur la théorie

scientifique du <a href="[Link]">Big Bang</a> et les recherches en cosmologie et
astronomie.</p><p align=left>En date de 2019, les meilleures mesures suggèrent que les évènements
initiaux remontent à entre 13,7 et 13,8 milliards d’années1,[Link] pratique, on divise l’évolution de l’Univers
depuis cette date jusqu'à nos jours en plusieurs ères. Les premières ères sont celles de <a
href="d1/[Link]">l'univers primordial</a>, encore assez mal comprises aujourd’hui. </p><p
align=right>Elles se déroulent aux environs de la première seconde suivant le Big Bang, durée pendant
laquelle l’Univers était tellement chaud que l’énergie des particules dépassait celle obtenue de nos jours
dans un accélérateur de <a href="../[Link]">particules</a>.</p><p>De ce fait, alors que les
caractéristiques de base de cette ère ont été étudiées dans la théorie du Big Bang, les détails relèvent
largement de travaux de déductions.</p>

[Link] 64
HTML: Les liens externes
• Liens externes: on spécifie un chemin absolu. La valeur de l’attribut href
est l’adresse du site.

• Exemple:
<a href=“[Link] target=“_blank”> un autre onglet
pour Google?</a>

[Link] 65
HTML: Les liens
• Lien vers une ancre
• Une ancre est une sorte de point de repère qu’on peut mettre dans une
page HTML lorsqu'elles sont très longues.
En effet, il peut alors être utile de faire un lien amenant plus bas dans la
même page pour que le visiteur puisse sauter directement à la partie qui
l'intéresse.

• Pour créer une ancre, il suffit de rajouter l'attribut id à n’importe quelle

balise qui va alors servir de repère.

[Link] 66
HTML: Les liens
• Exemple :
<h1 id= "ancre"> Introduction</h1>
• Ensuite, on crée un lien comme d'habitude, mais cette fois l'attribut href
contiendra un dièse (#) suivi du nom de l'ancre.
• Exemple :
<a href= "#ancre"> retour à l’introduction</a>

• Remarque : On peut créer un lien pour une ancre dans une autre page en
utilisant la syntaxe suivante :
• <a href= "[Link]#ancre"> retour à l’introduction</a>

[Link] 67
HTML: Les liens
• Lien pour télécharger un fichier
• Pour proposer à l’internaute de télécharger un fichier, il suffit d’indiquer à
l’attribut href le nom du fichier à télécharger (éventuellement, on indique le
chemin du fichier) :

• Exemple :
<a href="[Link]"> Telechargement</a>

[Link] 68
HTML: Les liens
• Lien pour envoyer un e-mail :

• Pour permettre à un lien d’envoyer un mail, il suffit d’affecter la valeur

mailto :adressemail à l’attribut href :

• Exemple :
<a href="mailto :jakjoudw@[Link]">
un mail de votre part me fera plaisir </a>

[Link] 69
HTML: Les liens
• Lien pour afficher une infobulle :
• Pour afficher une infobulle au survol du lien, il suffit d’ajouter à la balise a
l’attribut title avec la valeur qu’on souhaite afficher dans l’infobulle:

<a href="[Link]" title="Allez-y !!"> cliquer ici </a>

[Link] 70
 HTML: Autres balises

• <div> définit une division ou une section dans un document HTML.

• <span> utilisée pour regrouper des éléments en ligne dans un document.

• <div> et <span> sont souvent utilisés comme conteneurs pour d'autres

éléments HTML pour les styliser avec CSS ou pour effectuer certaines

tâches avec JavaScript. (Voir aprés)

[Link] 71
 HTML: Autres balises
Eléments block
• Les balises de type block:
p
• Commencent sur une nouvelle ligne,
h1, h2, h3…
• Occupent toute la largeur disponible,
• Peuvent être imbriqués les uns dans les autres et peuvent contenir header, footer…
des élément de type inline.
ol, ul, dl

table

div

[Link] 72
 HTML: Autres balises
• Les balises de type inline: Eléments inline
• Ne commencent pas sur une nouvelle ligne,
• Occupent seulement la largeur nécessaire, strong
• Peuvent contenir d’autres éléments de type inline mais pas
d’éléments de type block.
em

del
a

img

Span

small
[Link] 73
 HTML: Autres balises
• Les balises de type inline:
Eléments inline
• strong :
Même si les navigateurs mette le contenu entre <strong> strong
</strong> en gras, sert donc à marquer des éléments qui ont une
forte importance, un caractère sérieux ou un caractère insistant,
em
• em:
Les navigateurs l'affichent en italique, son but n'est pas d'indiquer del
une mise en forme particulière ,
a

img
• del :
Permet de dire qu'un élément a été supprimé. Par défaut, les Span
navigateurs rendent le texte en barré.
small
[Link] 74
 HTML: Autres balises
• Les balises de type inline: Eléments inline

• small:
strong
Représente les choses moins importantes (telles que les petites lignes
d'un contrat). Sur un site e-commerce, on verra par exemple une offre :
em

del
a

img

Span

small
[Link] 75
HTML 5 : que la force
manifeste!!

76
[Link]
 HTML 5: Pourquoi?
• Comme mentionné précédemment, le plus grand avantage que HTML5 est qu’il dispose d’un

support audio et vidéo de très bonne qualité.

• HTML5 supporte les formats d’image vectorielles spécialement SVG (on le verra dans la partie

technologies XML). Alors qu’en HTML, l’utilisation d’images vectorielles n’était possible

qu’avec certaines technologies comme Flash, Silver-light,..,

• HTML 5 supporte egalement MathML (on en parlera dans la partie XML)

• HTML5 a des règles d’analyse plus poussées (similaires à ceux du langage XML)

[Link] 77
 HTML 5: Pourquoi?
• HTML 5 permet au scripts Javascript de s’executer nativement dans un navigateur Web (grâce à

l’API JS), tandis que HTML exécute JavaScript dans un thread d’interface du navigateur (Vous vous

souvenez de la notion de Thread  !!)

• HTML5 prend en charge de nouveaux types de contrôles de formulaire : les dates et heures, les e-

mail, les numéros, les plages (range), les téléphones, les url, les champ de recherche etc (on verra

tout ceci en detail),

• De nouveaux éléments ont été introduits en HTML 5. Les plus importants sont: footer, header,

article, aside, audio, data, datalist, embed, figcaption, figure, hgroup, bdi, canvas, keygen, time ,

mark, meter, nav, progress, rp, rt,…

[Link] 78
 HTML 5: Structure?
• La structure la plus simple d’une page web en HTML5 (on l’a déjà abordé) sera composé d’au
minimum 4 Balises :

• La Balise indiquant le doctype

• La balise <html> en tout début et en tout fin de document

• Les balises <head> et </head> renfermant des informations utiles au navigateur mais non
affiché

• Les balises <body> et </body> qui comme leur nom l’indique comporte le corps de votre
page
• Un certain nombres de balises sémantiques qui structurent le document

[Link] 79
 HTML 5: Structure?
• La structure la plus simple d’une page web en HTML5 sera composé d’au
minimum 4 Balises :

• La Balise indiquant le doctype

• La balise <html> en tout début et en tout fin de document

• Les balises <head> et </head> renfermant des informations utiles au

navigateur mais non affiché

• Les balises <body> et </body> qui comme leur nom l’indique

comporte le corps de votre page
• Un certain nombres de balises sémantiques qui structurent le
document

[Link] 80
 HTML 5: Structure?
• document

[Link] 81
 HTML 5: les balises sémantiques
• Un des plus gros apport de l'HTML5 a été l'arrivée de balises sémantiques
concernant le layout des pages – autrement dit les balises qui définissent la
structure globale de la page:

section, article, aside, header, footer,

nav, figure, figcaption et main

[Link] 82
 HTML 5: les balises sémantiques
• Main :

• Représente le contenu principal d'une page ou application. Il ne doit y

en avoir qu'une seule par page, donc pas deux fois main dans le même
document.
<!DOCTYPE html> <html><head> <title>Utilisation de main</title> </head>
<body>
<header> L’entête du site <nav> <a href="/">Home</a> </nav> </header>
<main>
<article> <h1>Mon super article</h1> <p>Bla bla bla</p> </article>
<aside> <p>Plus d'infos</p> </aside>
</main>
<footer>Copyright 2020_2021</footer>
</body>
</html> [Link] 83
 HTML 5: les balises sémantiques
• Section:
• Représente une portion ou section générique d'un document, c’est un
regroupement thématique du contenu

• Article:
• Un peu plus précis que section, il est plus spécifique. Ainsi, on trouvera
assez souvent des balises articles dans des balises section bien que
l’inverse est possible
• On pense à un journal ou on y trouve une section sport avec plusieurs
articles sur le sport (foot ball, tennis, cyclisme,….)

[Link] 84
 HTML 5: les balises sémantiques
<section>

<article>

<h1>HTML5 expliqué</h1> …

</article>

<article>

</article>

</section>

[Link] 85
 HTML 5: les balises sémantiques
• Nav:

• Utilisée pour afficher les liens de navigation et avant tout pour indiquer
qu'il y a un menu.

• Aside:

• Utilisée pour afficher des compléments d'informations, ou des contenus

pas forcément en relation avec la page, par exemple dans le cas où on
veut afficher une publicité ou encore un menu de navigation
secondaire.

[Link] 86
 HTML 5: les balises sémantiques
• Header:

• En-téte de la page.

• Footer:

• Pied de la page.

[Link] 87
 TRAVAIL A FAIRE EN ASYNCHRONE
• Faire une recherche sur les différentes version du langage HTML

• Chercher les balises suivantes:

• Time / Canvas/ Audio / Video /Figure / figcaption /Download /Target

• Voir le fichier M203_TRavailAsynchrone_LangageHTML

[Link] 88
Langage HTML
TP 1 : Langage HTML_ Notions de base

89
[Link]
Langage HTML
Les formulaires

90
[Link]
HTML : Les formulaires
Ensemble d’éléments (zones de texte, listes,.. ) permettant de récupérer des
données auprès des internautes sus forme de :
 Questionnaire

 Sondage

 renseignements personnels (adresse, email…)

 Zone privée (mot de passe)

 Menus, choix de rubriques, choix de liens…

 Zone de texte pour forums, blogs, livre d'or…

 …
[Link] 91
HTML : Les formulaires
o Création du formulaire: balise <FORM>
<FORM ACTION="script" METHOD="post" NAME ="nom_form">
…
</FORM>
o Tel que:
o NAME : nom du formulaire
o ACTION : désigne l'adresse du script qui va traiter les données envoyées par le biais du
formulaire. (un script php ou asp par exemple).
o METHOD: méthode d’envoi des données GET ou POST
o GET : données du form envoyées avec l’URL du script (limitée)
o POST: données du form envoyées séparément de l’URL (recommandée)
o Pour envoyer le formulaire, il suffit de d’ajouter un bouton de type submit
créé par la balise <INPUT>

[Link] 92
HTML : Les formulaires
 Création des éléments du formulaire: balise <INPUT>
 Attributs:
 NAME : nom du champ

 SIZE : largeur du cadre réservé au champ

 MAXLENTH: longueur du texte

 TYPE : (text, password, radio, checkbox, submit, reset, file, …)

 VALUE : La valeur du champ

[Link] 93
HTML : Les formulaires
 Création des éléments du formulaire: balise <INPUT>

 Type : le type de champ. Il peut prendre plusieurs valeurs :

 ="text" pour entrer du simple texte

 ="hidden" pour un champ caché non visible par le visiteur

 ="password" pour entrer un mot de passe

 ="submit" pour créer un bouton qui exécute l'action du formulaire.

 ="reset" pour créer un bouton qui vide le formulaire. Les valeurs d'origine du formulaire
sont remises en place.

 ="button" pour créer un bouton simple.

 …

[Link] 94
HTML : Les formulaires
 Création des éléments du formulaire: balise <INPUT>
Exemple

<form action=« [Link]" method="post" enctype="text/plain">

<input type="hidden" name="intro" value="Voici les infos récoltées via la formulaire : ">
Entrez votre prénom : <input type="text" name="prenom"> <br>
Entrez votre nom : <input type="text" name="nom" size="25"> <br>
Entrez un mot de passe : <input type="password" name="pass" size=10 maxlenght=10>
<br><br>
<input type="submit" value="Envoyer" name="submit">
<input type="reset" value="Effacer les données" name="reset">
</form>

[Link] 95
HTML : Les formulaires
 Création des éléments du formulaire: balise <INPUT>
 Listes des choix :

 "checkbox" : case à cocher. avec un nom et une valeur. Si la case doit être cochée,
il faut rajouter dans la balise le mot suivant : 'checked'.

Exemple :

<input type="checkbox" name=" langage1" value="C#" checked>

<input type="checkbox" name=" langage1" value="java">

C#:  Java: 

[Link] 96
HTML : Les formulaires
 Création des éléments du formulaire: balise <INPUT>
 Listes des choix :
"radio" : Bouton radio.

Exemple

<label for="mr"> Mr</label> <input type="radio" name="civilite" value="Mr">

<label for="mme"> Mme</label> <input type="radio" name="civilite " value="Mme">
<label for="mlle"> Mlle</label> <input type="radio" name="civilite " value="Mlle">

Mme :  Mlle :  Mr : 

[Link] 97
HTML : Les formulaires
 Création des éléments du formulaire: Liste déroulante <SELECT>…</SELECT>
 Attributs : name, size (spécifie le nombre d'éléments visibles)…
 <option> et </option> : ajoute un élément à la liste déroulante créée avec un
select. On lui donne une valeur grâce à son attribut "value".
 On sélectionne une seule valeur, sauf si on rajoute le mot clé "MULTIPLE" comme
attribut de select
<select name="modules">
<option value="m08">Bases de données</option>
<option value=" m09">Developpement des applications
client/serveur</option>
<option value=" m10">Developpement des applications Web coté
client</option>
<option value=" m11">Developpement des applications Web coté
serveur</option>
<option value=" m12"> Developpement des applications Mobiles</option>
</select> [Link] 98
HTML : Les formulaires
 Création des éléments du formulaire: Liste déroulante <SELECT>…</SELECT>
 Attributs : name, size (spécifie le nombre d'éléments visibles)…
 <option> et </option> : ajoute un élément à la liste déroulante créée avec un
select. On lui donne une valeur grâce à son attribut "value".
 On sélectionne une seule valeur, sauf si on rajoute le mot clé "MULTIPLE" comme
attribut de select

<select name="modules">
<option value="m08">Bases de données</option>
<option value=" m09">Developpement des applications
client/serveur</option>
<option value=" m10">Developpement des applications Web coté
client</option>
<option value=" m11">Developpement des applications Web coté
serveur</option>
<option value=" m12"> Developpement des applications Mobiles</option>
</select>

[Link] 99
HTML : Les formulaires
 Création des éléments du formulaire: Liste déroulante <SELECT>…</SELECT>
 Attributs : name, size (spécifie le nombre d'éléments visibles)…
 <option> et </option> : ajoute un élément à la liste déroulante créée avec un
select. On lui donne une valeur grâce à son attribut "value".
 On sélectionne une seule valeur, sauf si on rajoute le mot clé "MULTIPLE" comme
attribut de select
<select name="modules" multiple="yes">
<option value="m08">Bases de données</option>
<option value=" m09">Developpement des applications
client/serveur</option>
<option value=" m10">Developpement des applications Web coté
client</option>
<option value=" m11">Developpement des applications Web coté
serveur</option>
<option value=" m12"> Developpement des applications Mobiles</option>
</select> [Link] 100
 HTML : Les formulaires
 Création des éléments du formulaire: Liste déroulante <SELECT>…</SELECT>
 Attributs : name, size (spécifie le nombre d'éléments visibles)…
 <option> et </option> : ajoute un élément à la liste déroulante créée avec un
select. On lui donne une valeur grâce à son attribut "value".
 On sélectionne une seule valeur, sauf si on rajoute le mot clé "MULTIPLE" comme
attribut de select

<select name="modules" multiple="yes">

<option value="m08">Bases de données</option>
<option value=" m09">Developpement des applications
client/serveur</option>
<option value=" m10">Developpement des applications Web coté
client</option>
<option value=" m11">Developpement des applications Web coté
serveur</option>
<option value=" m12"> Developpement des applications
Mobiles</option>
</select>
[Link] 101
HTML : Les formulaires
 Création des éléments du formulaire: Zones de textes <TEXTAREA>…</TEXTAREA>
 On peut en spécifier la taille avec "rows" (nombre de lignes) et "cols" (nombre de
colonnes).

 Exemple :

<textarea name="texte" cols=40 rows=5>

Bonjour TDIs, ceci est un test d’ajout de l’element TEXTAREA au formulaire.

Cet element permet de saisir du texte sur plusieurs lignes !!

Interessant non?!

</textarea>

[Link] 102
HTML : Les formulaires
Exemple

[Link] 103
HTML5 : Les formulaires
• HTML 5 apporte une quantité importante de nouveautés sur les
formulaires de saisie

• les principaux apports concernent les types d'entrées:

• Saisie du temps,

• Nouveautés dans la saisie du Text

• Couleur, mail, telephone, url,

• ….

[Link] 104
HTML5 : Les formulaires
Saisie du Temps:

• Datetime : pour heure et date,

• Datetime-local : pour heure et date au format local,

• Date : pour date seulement,

• Month : pour mois seulement,

• Week : pour semaine seulement,

• Time : pour heure/minute/secondes seulement.

[Link] 105
HTML5 : Les formulaires
Saisie du Temps:

• Exemples

• <input type="date" value="1989-12-22"/>

• <input type="time" value="20:30:05" max="23:00"/>

• Remarque
• L'attribut value permet de positionner le calendrier à une heure donnée au format ISO : hh:mm:ss

[Link] 106
HTML5 : Les formulaires
Saisie de valeurs numériques:

• number : pour un nombre

• range: pour un nombre compris entre deux limites,

• Exemples

<input type="number" value="12"/>

<input type="range" value="23.5" min="2.9" max="40.4"/>

[Link] 107
HTML5 : Les formulaires
Saisie d’adresse mail:

• email: pour un courrier électronique,

•L'attribut pattern permet de définir une expression régulière de filtrage.

•L'attribut multiple indique si plusieurs adresses peuvent être entrées (séparées par ,),

•L'attribut placeholder donne une chaîne de caractères contenant des indications pour le

remplissage du champ.

•Exemple
<input type="email" value="jakjoudw@[Link]" placeholder="veuillez indiquer
un E-mail valide" />

[Link] 108
HTML5 : Les formulaires
Saisie d’autres types de valeurs:

• url: pour une URL,

• search: pour effectuer une recherche,

• tel: pour saisir un numero de téléphone.

• Exemples

• <input type="tel" pattern="^[0-9]{10}$"/><-- numéro à 10 chiffres -->

<input type="url" pattern="^[Link] URL HTTP -->

• <input type="search" pattern="[a-z]*"/> <-- des minuscules -->

[Link] 109
HTML5 : Les formulaires
Saisie d’autres types de valeurs:

• color: pour saisir une couleur,

• Exemple

<input type="color" value="#FFDD88"/> <-- par défaut orange -->

[Link] 110
<input type="file" id="docpicker" >

HTML5 : Les formulaires

Saisie d’autres types de valeurs:

• File: transfert de fichier qui crée un champ composé d’une zone de texte pour taper le
chemin d’accès au fichier et d’un bouton de sélection de fichier dont l’intitulé fixe est
Sélectionner, qui permet au visiteur de rechercher le fichier à transférer sur son
ordinateur

• Exemple

<input type="file" name="fichier"

accept=".doc,.docx,application/msword,application/[Link]-
[Link]"/>

[Link] 111
HTML5 : Les formulaires
Saisie d’autres types de valeurs:

• File: transfert de fichier qui crée un champ composé d’une zone de texte pour taper le
chemin d’accès au fichier et d’un bouton de sélection de fichier dont l’intitulé fixe est
Sélectionner, qui permet au visiteur de rechercher le fichier à transférer sur son
ordinateur

• Exemple

<input type="file" name="fichier" accept="image/*" />

[Link] 112
HTML5 : Les formulaires
Exercices

1. Créez un formulaire permettant la saisie d’un nom avec un maximum de 25 caractères,

d’un mot de passe de huit caractères et d’un e-mail de 40 caractères. Ajoutez des boutons
d’envoi et de réinitialisation.

2. Créez un formulaire de saisie de texte de 15 lignes et une largeur de 60 caractères.

Ajoutez des boutons d’envoi et de réinitialisation.

3. Créez deux groupes de boutons radio. Le premier pour le choix de la nationalité avec les
choix Marocaine, Egyptienne, Algérienne, Tunisienne et Autres, et le second pour saisir le
diplôme obtenu le plus élevé avec les choix TS, Licence Pro, Master Pro . Saisir
également le nom et l’e-mail. Ajoutez des boutons d’envoi et de réinitialisation.

[Link] 113
HTML5 : Les formulaires
Exercices

4. Créez un formulaire comprenant un seul groupe de champs (<fieldset> )ayant pour titre
Adresse client, et qui contient cinq zones de saisie de texte dont les étiquettes (labels)
(<label> ) sont nom, prénom, adresse, ville et code postal. Ajoutez un bouton d’envoi.

5. Créez un questionnaire pour recruter un developpeur web, comprenant les cases à cocher
avec les labels suivants : XHTML, CSS, PHP, JavaScript et MySQL ainsi que es zones de
textes pour le nom et le téléphone. Changer les cases à cocher pour utiliser une liste de
selection à choix multiples

6. Créez un formulaire de transfert de fichiers destinés à l’envoi de document compressés aux

formats ZIP vers le serveur.

[Link] 114
HTML5 : Les formulaires
Exercices

7. Créez un formulaire complet dont le but est de

permettre la saisie de tous les éléments constitutifs
d’un CV pour le recrutement d’un informaticien
(nom, prénom, adresse, domaines de compétences
…) comme indiqué . Utiliser des fieldset et des
tableaux pour organiser les éléments

[Link] 115
HTML5 : Les formulaires
• Webographie

•Présentation et démonstration des balises date :

[Link]
•Les entrées des formulaires HTML :
[Link]
•Pour tester les expressions régulières :
[Link]

[Link] 116