HTML 5

Programmation Web1 Chapitre 3
HTML5
Le langage HTML5 est développé depuis 2010 est une amélioration du langage HTML4. Il
s’agit d’une combinaison de nouvelles balises HTML, de propriété CSS3, de JavaScript et de
plusieurs technologies associées mais structurellement séparées.
STRUCTURE D’UN DOCUMENT HTML5 :

Un des principes d’HTML5 étant la rétrocompatibilité avec les anciennes versions, sa
définition se résume à un simple <!doctype html>
Ce doctype doit être inséré en début de chaque page ; il indique au navigateur quel type de
HTML le fichier est déclaré.
L'élément html sera inséré juste après le doctype et fermé à la fin
L’En-tête de la page web

L’en-tête d’un document se situe donc entre les balises <head> et </head>. Dans l’en-tête,
aucune ligne de code ne sera affichée par le navigateur. Il sert uniquement à fournir des
informations relatives à votre document au navigateur.
<!DOCTYPE html>
<html>
<head>

</head>

</html>
Les balises META
La structure sémantique du HTML 5

<section>
Une section est un regroupement thématique de contenu, généralement avec un titre.
Il permet de définir les grandes sections d'un document comme les chapitres, les en-têtes et
pied-de-page, ou toute autre section dans un document.
<section>
<h1>WWI</h1>
<p>La première guerre mondiale s’est déroulée entre 1914 et 1918 </p>
</section>
<article>
Un article représente un texte indépendant, une portion de contenu, comme un article de
journal, un blog ou un forum. Il donne un sens en lui même en le lisant indépendamment du
reste du site.
<article>
<h1>Quel est la conséquence de la guerre</h1>
<p>Un désastre total puis des millions de morts et de réfugiés.</p>
</article>
<header>
spécifie un en-tête d'une section OU d'un document
L'élément <header> doit être utilisé comme un conteneur pour le contenu d'introduction.
On peut avoir plusieurs <header> dans un seul document.
<article>
<header>
<h1>Quel est la conséquence de la guerre</h1>
<p>Un désastre total puis des millions de morts et de réfugiés.</p>
</header>
<p>la guerre touchait tout le globe terrestre</p>
</article>
<footer>
spécifie un pied de page d'un document ou d'une section et doit contenir des informations sur
l'auteur du document, le droit d'auteur, les liens vers les conditions d'utilisation, des
informations de contact
<footer>
<p>posté par: nom d’auteur </p>
<p>
Contact: <a href="mailto:auteur@yahoo.fr"> envoyer un mail </a>.</p>

</footer>
<nav>
définit un ensemble de liens de navigation.
<nav>
<ul>
<li><a href="index.php">Page d'accueil</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</nav>
<aside>
Définit un contenu tangentiel à part le contenu principal, il est placé dans une barre latérale
<aside>
<h1>Archives</h1>
<ul>
<li><a href="/archives/07/">juillet 2019/a></li>
<li><a href="/archives/06/">Juin 2019</a></li>
<li><a href="/archives /05/">Mai 2019</a></li>

</ul>
</aside>
<figure> et <figcaption>
L'élément <figure>est utilisé pour regrouper des éléments tels que des images ou des vidéos avec
leur légende <figcaption> dans le but d'ajouter une explication visuelle à une image:
<figure>
<img src="amphitheatre.jpg" alt="Amphitheatre de Jem" width="304" height="228">
<figcaption>Fig1. Les monuments historiques de la Tunisie</figcaption>
</figure>
Remarque :
Toutes ces balises sont apparues en HTML5. Elles permettent aux moteurs de recherche de
bien comprendre le rôle des informations de la page et de référencer au mieux les parties les
plus importantes.
Un corps de base en HTML5 ressemblera donc souvent à :
<body>
<header></header>
<nav></nav>
<main>
<article>
<header></header>
<section></section>
<section></section>
<aside></aside>
</article>
</main>
<aside></aside>
</body>
LES NOUVEAUX TYPES DE <INPUT>

De nombreux nouveaux types de champs <input> ont été introduits, tous ne sont pas encore
supportés, même par les versions les plus récentes des navigateurs
 Type="email"
E-mail : <input name="Email" type="email" placeholder="Veuillez saisir une adresse courriel

valide" >
 type="tel"
Téléphone :<input name="telephone" type="tel" placeholder="Votre téléphone" >
 type="url"
Votre site web : <input name="adresse" type="url" placeholder="votre site web" >
 type="search"
<input id="mysearch" type="search" placeholder="search">

 type="number"
quantity : <input type="number" name="quantity" min="1" max="5" />
Attributs possibles : max, min, step, value (valeur par défaut
 type="range"
<input type="range" name=“n" min="1" max="10" />
 type="color"
Select your favorite color :<input name="couleur" type="color" >
 type="datetime"
Date d'inscription : <input type="datetime" name="date_inscription">

 type="datetime-local"
Date d'inscription :<input type="datetime-local" name="date_inscription>
 type="date"
<input type="date" name="date_inscription" >
 type="month"
<input name="mois" type="month" required class="form-control">
 type="week"
Select a week :< input name="semaine" type="week" >
 type="time"
Select a time :<input name="heure" type="time" >
 Nouveaux attributs
HTML5 propose de nouveaux éléments utiles aux formulaires
 <datalist>
permet de définir des données utilisées par des formulaires (pour de la

suggestion/autocomplétion par exemple),
 <keygen>
sert à proposer un menu avec les types de cryptage supportés par le browser
<form action="demo_keygen.asp" method="get">
Username:
<input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
 placeholder
Permet d'afficher un texte indicatif dans le champ.

 required
Oblige la saisie du champ.

 list, datalist
C'est un élément de formulaire permettant de lier une liste de choix à input.
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser" />
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
</datalist>
<input type="submit" /></form>
 pattern
Les patterns ou masques de saisie permettent de contrôler le format de données saisi dans un
champ de formulaire.
Les types : email, url, tel que nous avons utilisé avant sont des patterns prédéfinies.
Exemple
Pour créer un masque qui impose la saisie d'une valeur numérique d'au moins 3 chiffres
précédés d'une lettre majuscule comprise entre A et F.En cas de non respect du format, le
navigateur vous en informera.
<form action="" method="get" name="form2">

<input name="code_secret" type="text" pattern="[A-F][0-9]{3}" class="form-control">
<input type="submit" name="Bouton2" value="Envoyer" class="btn btn-default">
</form>
I. INSERTION DE VIDEO
La balise <video> spécifie la vidéo, comme un clip vidéo ou d'autres flux vidéo.
Actuellement, il existe 3 formats vidéo pris en charge pour l'élément <video>: MP4, WebM et
Ogg:
Les attributs de <video> sont :
 src : source de la vidéo

 width et height : dimension de la vidéo. SI non spécifiés, valent la largeur et la hauteur
du fichier vidéo. Si une dimension est spécifiée seulement, le navigateur va ajuster la
taille de la dimension non spécifiée
 controls : Si cet attribut booléen est présent, le navigateur affiche ses propres contrôles
vidéo pour la lecture et le volume. Si non présent la première image est affichée
 poster : permet de spécifier une image que le navigateur utilisera alors que la vidéo est en
cours de téléchargement, ou jusqu'à ce que l'utilisateur commence la lecture de la vidéo.
Si cet attribut n'est pas spécifié, la première image de la vidéo sera utilisée à la place
 autoplay : Spécifie au navigateur de lancer la lecture de la vidéo automatiquement.
 autobuffer : spécifie au navigateur de commencer le téléchargement de la vidéo tout de
suite, en anticipant sur le fait que l'utilisateur lira la vidéo.
 loop : attribut booléen, indique de lire la vidéo en boucle.
Tous les attributs ne sont pas encore supportés par tous les navigateurs, mais les plus courants
le sont.
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
votre navigateur ne supporte pas ce tag
</video>
II. INSERTION D’AUDIO

La balise <audio> définit le son, comme la musique ou d'autres flux audio.
il existe 3 formats de fichiers pris en charge pour l'élément <audio>:
 MP3,
 Wav
 et Ogg:
La balise <audio> soutient également le attributs globaux en HTML .
Attributs : les mêmes que pour le tag vidéo à part « poster » : src, preload, autoplay, loop,
controls
Controls : Affiche les barres de navigation dans la video avec entre autres
une barre temporelle et un bouton lecture/pause.
Pour chaque navigateur, Les boutons disponibles ainsi que leur aspect peuvent différer.
Autoplay :
permet de lancer la video dès le chargement de la page.
Loop :
permet de faire tourner en boucle la séquence.
muted
assurera que la vidéo, en particulier en autoplay, sera lancée sans
le son, silencieusement. Il appartiendra alors au visiteur d'activer
le son s'il le désire.
Les méthodes sont les mêmes : play(), pause(), load()…
Les événements sont les mêmes que ceux du tag vidéo, à 99%. On parle en fait de « media
events » HTML5
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Cotre navigateur ne supporte pas l’audio tag.
</audio>
Les principaux changements en HTML 5 :

 HTML5 est largement simplifié :
 la casse des balises n'est plus stricte
 l'omission de la balise fermante est autorisée lorsqu'il n'y a pas de
 doutes sur sa position.
 En HT ML5, il est permis de ne pas encadrer les attributs par des guillemets
 possibilité d'ignorer lavaleur dans le cas des attributs booléens,

 l'insertion d'éléments multimédia
 la prise en charge des nouveaux supports du web tels que téléphones ou tablettes pour
faciliter l'affichage ou la saisie ;augmenter la structuration de l'information dans la page d
de manière à en faciliter le référencement ou la lecture par des nouveaux outils comme
les synthèses vocales.

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

HTML 5

Transféré par

Droits d'auteur :

Formats disponibles

Programmation Web1 Chapitre 3

STRUCTURE D’UN DOCUMENT HTML5 :

L’En-tête de la page web

Les balises META

La structure sémantique du HTML 5

Contact: <a href="mailto:auteur@yahoo.fr"> envoyer un mail </a>.</p>

<li><a href="index.php">Page d'accueil</a></li>

<li><a href="/archives/07/">juillet 2019/a></li>

<li><a href="/archives/06/">Juin 2019</a></li>

<li><a href="/archives /05/">Mai 2019</a></li>

Un corps de base en HTML5 ressemblera donc souvent à :

LES NOUVEAUX TYPES DE <INPUT>

E-mail : <input name="Email" type="email" placeholder="Veuillez saisir une adresse courriel

Téléphone :<input name="telephone" type="tel" placeholder="Votre téléphone" >

<input id="mysearch" type="search" placeholder="search">

quantity : <input type="number" name="quantity" min="1" max="5" />

Attributs possibles : max, min, step, value (valeur par défaut

<input type="range" name=“n" min="1" max="10" />

Select your favorite color :<input name="couleur" type="color" >

Date d'inscription : <input type="datetime" name="date_inscription">

Date d'inscription :<input type="datetime-local" name="date_inscription>

<input name="mois" type="month" required class="form-control">

Select a week :< input name="semaine" type="week" >

Select a time :<input name="heure" type="time" >

HTML5 propose de nouveaux éléments utiles aux formulaires

permet de définir des données utilisées par des formulaires (pour de la

Permet d'afficher un texte indicatif dans le champ.

Oblige la saisie du champ.

C'est un élément de formulaire permettant de lier une liste de choix à input.

<form action="demo_form.asp" method="get">

<input list="browsers" name="browser" />

<option value="Internet Explorer">

<input type="submit" /></form>

<form action="" method="get" name="form2">

Les attributs de <video> sont :

 src : source de la vidéo

<video width="320" height="240" controls>

II. INSERTION D’AUDIO

Les méthodes sont les mêmes : play(), pause(), load()…

Les principaux changements en HTML 5 :

 possibilité d'ignorer lavaleur dans le cas des attributs booléens,

Vous aimerez peut-être aussi