Cours HTML 5
HyperText Markup Language 5
[Link] SAIDANI
Année universitaire: 2019-2020
Objectifs
Apprendre à créer des pages en langage HTML 5
Connaître les principaux apports de HTML5 par rapport à ses
prédécesseurs
[Link] 2
Introduction
1 Le navigateur effectue une requête spécifiée à travers l’URL
2 Le serveur retourne un flot typé de données
3 Le navigateur interprète le flot de données et l’affiche
[Link] 3
Introduction
1991 HTML first published
1995 HTML 2.0
After HTML 4.01 was released, focus
shifted to XHTML and its stricter standards.
1997 HTML 3.2
1999 HTML 4.01 XHTML 2.0 had even stricter standards
than 1.0, rejecting web pages that did not
2000 XHTML 1.0 comply. It fell out of favor gradually and
was abandoned completely in 2009.
2002
- XHTML 2.0
HTML5 is much more tolerant and can
2009 handle markup from all the prior versions.
Though HTML5 was published officially in 2012, it
2012 HTML5
has been in development since 2004.
[Link] 4
Introduction
INSA - ASI TechnoWeb : HTML5 5/32
• Un fichier HTML/XHTML est un fichier texte (cf. protocole HTTP)
contenant des balises appelant des commandes, dont l’action est
limitée au texte contenu entre la balise de début et la balise de fin.
• Extension HTML : .htm ou .html ; XHTML : .xhtml
• Balise de début : <commande>
• Balise de fin : </commande>
• Balise auto-fermante : <commande/>
• Commentaires : <!--Ceci est un commentaire-->
Remarques:
• Les retours chariot, successions d’espaces et/ou de tabulations ne
sont pas pris en compte.
Toute balise ouverte doit être fermée !
[Link] 5
Introduction
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
</head>
<body>
<p>HTML5 is fun!</p>
</body>
</html>
[Link] 6
Structure d’un document HTML5
<header> l’en-tête
<footer> le pied-de-page
<nav> les principaux liens de navigation
Menus du application
<section> les parties thématiques de la page
<aside> les informations complémentaires
<article> Un article provenant d'une autre page
[Link] 7
Structure d’un document HTML5
[Link] 8
Structure d’un document HTML5
<header>
La plupart des applications web possèdent en général une en-tête.
On y trouve le plus souvent
un logo
une bannière
le slogan de votre application…
[Link] 9
Structure d’un document HTML5
[Link] 10
Structure d’un document HTML5
<footer>
À l'inverse de l'en-tête, le pied de page se trouve en général
tout en bas du document.
On y trouve des informations comme
des liens de contact,
le nom de l'auteur
les mentions légales, etc...
[Link] 11
Structure d’un document HTML5
[Link] 12
Structure d’un document HTML5
<nav>
Regrouper tous les principaux liens de navigation du
application.
Par exemple le menu principal de votre application
[Link] 13
Structure d’un document HTML5
[Link] 14
Structure d’un document HTML5
<section>
La balise <section> sert à regrouper des contenus en fonction
de leur thématique.
Elle englobe généralement une portion du contenu au centre
de la page.
[Link] 15
Structure d’un document HTML5
[Link] 16
Structure d’un document HTML5
<aside>
La balise <aside> est conçue pour contenir des informations
complémentaires au document que l'on visualise.
Ces informations sont généralement placées sur le côté
[Link] 17
Structure d’un document HTML5
[Link] 18
Structure d’un document HTML5
<article>
Englober une portion généralement autonome de la page.
C'est une partie de la page qui pourrait ainsi être reprise sur
un autre application.
Les actualités
articles de journaux ou de blogs
[Link] 19
Structure d’un document HTML5
[Link] 20
Les bases du language
Les titres
Six grandeurs sont disponibles
1 pour le plus grand et 6 pour le plus petit
Par défaut la balise ajoute une ligne vide
[Link] 21
Les bases du language
Les paragraphes
Un texte gagne en lisibilité lorsqu’il est divisé
en différents paragraphes
<p>..</p> chaque paragraphe est précédé et suivi
d’un saut de ligne
[Link] 22
Les bases du language
Les listes
<ol> : liste numérotée; <ul>: liste non-numérotée
<dl> : liste de définition utilisé pour présenter des
glossaires
[Link] 23
Les bases du language
Les liens
<a href=« destination du lien »> texte de lien </a>
Un endroit de la page en cours
<a name="nom">c'est ici </a>
<a href="#nom">En haut </a>
Une autre page du site
<a href="adresse_de_la_page_a_visiter">Une autre
page</a>
Une adresse électronique
<a href="[Link]
Un fichier téléchargeable
<a href="[Link]">Version PDF</a>
[Link] 24
Les bases du language
Les images
<img src="adresse du fichier image" alt="texte associé" />
Exemple
<img src= " [Link]" alt="Voici le sigle de l’FSB"/>
[Link] 25
Les bases du language
Les tableaux
Eléments
‣ <table> ... </table> élément général
‣ <tr> ... </tr> table row
‣ <td> ... </td> table cell
‣ <th> ... </th> table header
‣ <caption> ... </caption> table caption
[Link] 26
Les bases du language
Les tableaux
Fusion horizontale (fusion de colonnes)
<td colspan="2">1</td>
Fusion verticale (fusion des lignes)
<td rowspan="2">1</td>
[Link] 27
Les bases du language
Les tableaux – exercice
[Link] 28
Nouvelle sémantique HTML5
Balise Description
Meter Définit une unité de mesure
Progress Définit une progression
Élément graphique permettant d'afficher des données récupérées
Datagrid sur une Base de Données.
Utilisation très simple et rendu final agréable.
Time Définit une unité de temps
Svg Définit une image vectorielle
29
[Link]
Nouvelle sémantique HTML5
Balise Description
Menu Définit un menu en liste
Command Définit un bouton de commande
Définit un contenu extérieur (audio, vidéo …)
Embed
Figure Définit un groupe d’élément multimédia
Details Définit les détails d’un élément
30
[Link]
Nouvelle sémantique HTML5
Balise Description
Signale une conversation.
Dialog Contient des éléments dt que l'on utilise pour identifier un
locuteur, et des éléments dd qui contiennent les paroles du locuteur.
Mark Employée pour mettre en avant une partie d'un contenu en
appliquant un style surligné jaune sur le texte qu'elle décrit.
wbr Définit un saut de ligne possible.
31
[Link]
Les nouveaux éléments de média
Balise Description
<audio> Définit un contenu audio
<video> Définit une vidéo
Définit de multiples ressources pour les médias <video> et
<source>
<audio>
Définit un conteneur pour une application externe ou un
<embed>
contenu interactif (un plug-in)
Définit des pistes de texte pour les médias <video> et <audio>
<track> Insére un sous-titre (au format Web Video Text Tracks
(WebVTT) WebVTT) à une vidéo affichée avec la balise video
[Link] 32
Les nouveaux éléments de média
Exemple Balise Video
[Link] 33
Les éléments supprimés ou dépréciés en
HTML5
<acronym> <applet> <basefont>
<big> <center> <dir>
<font> <frame> <frameset>
<noframes> <strike> <tt> <u>
[Link] 34
[Link] 35
Les formulaires en HTML5
Déclaration des formulaires
<form> … </form>
Déclaration des éléments du formulaire
<input type=« type »/>
[Link] 36
Les formulaires en HTML5
Ligne de texte
<input type="text" name="Mon chapms">
Attributs
Name="nom" essentiel pour accéder à ce champ que ce soit en
javascript ou en PHP
Size="x" la longueur de la ligne de texte (par défaut=20)
Maxlength="x" définit le nombre maximal que l’utilisateur peut
entrer
Value="texte" une valeur par défaut
<input type="text" size="25" maxlength="5" value="entrer des
infos/>
[Link] 37
Les formulaires en HTML5
zone de texte
<textarea> … </textarea>
Attributs
Name="nom "
Rows="x" et Cols="y" fixent la hauteur et le nombre
de lignes
<textarea row="4" cols="25"> Inserer du texte…
</textarea>
[Link] 38
Les formulaires en HTML5
liste de sélection
<select> … </select>
Les différents choix proposés :
<option> … </option>
L’utilisateur a la possibilité de faire qu’un seul choix
<form>
Paiement par:
<select>
<option> Visa Premier </option>
<option> Visa Business </option>
<option> American Express
</option>
<option> Mastercard </option>
</select>
</form>
[Link] 39
Les formulaires en HTML5
liste de sélection
Attributs de <select>
Name="nom"
Size="x" définit x éléments de la liste visibles
Multiple="multiple " l’utilisateur a la possibilité de
sélectionner plusieurs choix
L’utilisateur doit maintenir [CTrL] du clavier enfoncée et
cliquer sur les différents éléments avec la souris
Disabled= "disabled" désactive la liste de sélection
Attributs de <option>
Selected="selected" sélectionner un élément de la liste
[Link] Value="valeur" cette valeur est invisible à l’utilisateur
40
Les formulaires en HTML5
boutons de choix unique
Boutons radio où un seul bouton pourra être activé
<input type="radio" />
Attributs
Name="nom" est un attribut obligatoire et doit avoir la même valeur
pour l’ensemble du groupe des choix
Checked= "checked" pour activer un bouton par défaut
Value= "valeur" pour attribuer une valeur à chaque bouton
<form>
<p> Fromage ou dessert: <br/>
<input type="radio" name="repas"/>
Fromage <br/>
<input type="radio" name="repas"
checked="checked"/> Dessert </p>
</form>
[Link] 41
Les formulaires en HTML5
boutons de choix multiples
• Cases ou carré à cocher (check box)
<input type="checkbox" />
Attributs
Name="nom" est obligatoire et prendra des noms différents pour
chacune des cases
Checked= "checked" pour activer un bouton par défaut
Value= "valeur" pour attribuer une valeur à chaque case
<form>
<p> Competences techniques: <br/>
<input type="checkbox" name="j" checked="checked"/> Java <br/>
<input type="checkbox" name="c"/> C/C++ <br/>
<input type="checkbox" name="r"/> Ruby on Rails <br/> </p>
[Link] 42
Les formulaires en HTML5
bouton d’envoie
Boutons Par un clic sur le bouton d’envoi, les données du formulaire
seront transmises selon les spécifications de l’attribut action de la balise
<input type="submit" />
Attributs
Name="nom"
Value= "valeur" ce qui va être indiqué sur le bouton
Par défaut IE: « Soumettre la requête »
Par défaut Firefox: « Envoyer »
Disabled="disabled" permet de désactiver un bouton d’envoi
<form action="[Link]">
<p> <input type="submit"/> <br/>
<input type="submit" value="cliquer
moi!"/></p>
</form>
[Link] 43
Les formulaires en HTML5
• Pour personnaliser le bouton d’envoi
<boutton type =« submit »> … </button>
– Tout ce qui se trouve entre les balises sert de bouton (texte, image,
etc.)
<form>
<button type="submit">
Enoyer
<img src=« [Link] »/>
</button>
</form>
[Link] 44
Les formulaires en HTML5
Mots de passe
• L’affichage des puces ou des astérisques pour les mots de passe
<input type=« password » />
Il protège uniquement contre la regard indiscret d’autres personnes
Attributs
Name="nom"
Size="x" détermine la taille de la ligne de texte
Maxlength="x" limite le nombre de caractères du mot de passe
<form action="[Link]">
mot de passe :
<input type="password"
maxlength="8" />
</form>
[Link] 45
Les formulaires en HTML5
Les nouveaux champs
<input type="datetime">
<input type="text" list="list">
<datalist id="list">
<option value="Mr">
...<input<input type="number">
type="range">
<input type="url">
<input
</datalist> type="email">
Et encore…
[Link] 46
Les formulaires en HTML5
Organisation
• Dans le cas de formulaires longs et complexes, il sera
parfois utile de regrouper graphiquement certains
éléments, pour mieux organiser la page et améliorer la
lisibilité .
<fieldset> … </fieldset> regroupe les éléments
<legend> … </legend> fournit une légende au
regroupement effectué et elle se place directement
après la balise <fieldset> ouvrante .
[Link] 47
Les formulaires en HTML5
Organisation
<form> <fieldset>
<legend> Mentions obligatoires : </legend>
Nom: <input type="text" size="20" /> <br/>
Prenom: <input type="text" size="40" /> <br/>
</fieldset>
<fieldset>
<legend> Mentions facultatives : </legend>
Adresse email: <input type="text" size="20" /> <br/>
</fieldset> </form>
[Link] 48
Merci pour votre attention
[Link] 49