Chapitre 2 HTML5 Version 0 PDF

Les bases de HTML 5
Le fonctionnement des sites web

 Avec le navigateur, vous pouvez consulter n'importe quel
site web.
 Exemples :
 Les langages HTML et CSS sont à la base du

fonctionnement de tous les sites web.
 C'est le navigateur web qui fera la traduction entre ces
langages informatiques et ce qu’on voit s'afficher à l'écran.
 L'ordinateur se base sur ce qu'on lui a expliqué en HTML
et CSS pour savoir ce qu'il doit afficher, comme le montre
la figure suivante :
HTML et CSS : deux langages pour créer un site web
 HTML (HyperText Markup Language) :

 il a fait son apparition dès 1991 lors du lancement du Web.
 Son rôle est de gérer et organiser le contenu.
 C'est donc en HTML qu’on écrit ce qui doit être affiché sur la
page : du texte, des liens, des images…
 CSS (Cascading Style Sheets, aussi appelées Feuilles de

style) :
 le rôle du CSS est de gérer l'apparence de la page web
(agencement, positionnement, décoration, couleurs, taille du
texte…).
 Ce langage est venu compléter le HTML en 1996.
Les versions de HTML
 HTML 1 : c'est la toute première version créée par Tim Berners-Lee en 1991.
 HTML 2 : la deuxième version du HTML apparaît en 1994 et prend fin en 1996 avec
l'apparition du HTML 3.0. C'est cette version qui posera en fait les bases des versions
suivantes du HTML. Les règles et le fonctionnement de cette version sont donnés par le
W3C (tandis que la première version a été créée par un seul homme).
 HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de nombreuses

possibilités au langage comme les tableaux, les applets, les scripts, le positionnement du
texte autour des images, etc.
 HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de

HTML 4.01). Elle apparaît pour la première fois en 1998 et propose l'utilisation de frames
(qui découpent une page web en plusieurs parties), des tableaux plus complexes, des
améliorations sur les formulaires, etc. Mais surtout, cette version permet pour la
première fois d'exploiter des feuilles de style.
 XHTML : signifie eXtensible HyperText Markup Language, c'est à dire langage de balises
hypertexte extensible. XHTML se fonde sur la syntaxe définie par XML.
 HTML 5 : c'est la dernière version. Encore assez peu répandue, elle fait beaucoup parler
d'elle car elle apporte de nombreuses améliorations comme la possibilité d'inclure
facilement des vidéos, un meilleur agencement du contenu, de nouvelles fonctionnalités
pour les formulaires, etc.
Les balises
 Les pages HTML sont représentées de ce qu'on appelle

des balises.
 Celles-ci sont invisibles à l'écran pour les visiteurs, mais
elles permettent à l'ordinateur de comprendre ce qu'il
doit afficher.
 Les balises sont entourées de « chevrons », c'est-à-dire
des symboles < et >, comme ceci : <balise>
Les balises en paires
 Elles s'ouvrent, contiennent du texte, et se ferment plus

loin.
 Exemple :
<title>Ceci est un titre</title>
 On distingue une balise ouvrante (<title>) et une balise
fermante (</title>) qui indique que le titre se termine.
 Cela signifie pour l'ordinateur que tout ce qui n'est pas
entre ces deux balises n'est pas un titre.
Les balises orphelines
 Ce sont des balises qui servent le plus souvent à insérer

un élément à un endroit précis.
 Il n'est pas nécessaire de délimiter le début et la fin.
 Exemple :
<image />
<br/>
Les attributs
 Les attributs sont un peu les options des balises.

 Ils viennent les compléter pour donner des informations
supplémentaires.
 L'attribut se place après le nom de la balise ouvrante et a le
plus souvent une valeur de cette façon :
<balise attribut="valeur" />
 Exemple :
<img src="photo.jpg" />
L'ordinateur comprend alors qu'il doit afficher l'image
contenue dans le fichier photo.jpg.
Structure de base d'une page HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre de la page</title>
</head>
<body>
</body>
</html>
La page HTML
 <!DOCTYPE html>
 La toute première ligne s'appelle le doctype.
 Elle est indispensable car c'est elle qui indique qu'il s'agit bien
d'une page web HTML.
 Ce n'est pas vraiment une balise comme les autres car elle
commence par un point d'exclamation.
 <html> … </html>
 C'est la balise principale du code. Elle englobe tout le contenu
de la page
L'en-tête <head> et le corps <body>
 Une page web est constituée de deux parties :

 L'en-tête <head> :
 cette section donne quelques informations générales sur la page comme
son titre, l'encodage (pour la gestion des caractères spéciaux), etc.
 Cette section est généralement assez courte.
 Les informations que contient l'en-tête ne sont pas affichées sur la page,
ce sont simplement des informations générales à destination de
l'ordinateur.
 Le corps <body> :
 c'est là que se trouve la partie principale de la page.
 Tout ce qui sera écrit ici sera affiché à l'écran.
L'encodage (charset)

 Cette balise indique l'encodage utilisé dans votre fichier .html.
 L'encodage indique la façon dont le fichier est enregistré.
 C'est lui qui détermine comment les caractères spéciaux vont
s'afficher (accents, idéogrammes chinois et japonais, caractères
arabes, etc.).
 Il y a plusieurs techniques d'encodage comme : iso-8859-1 pour
dire table de caractères "Europe de l'Ouest" , utf-8 pour dire
table de caractères UNICODE.
 Cette méthode d'encodage permet d'afficher sans aucun
problème pratiquement tous les symboles de toutes les
langues.
Le titre principal de la page
<title> … </title>
 C'est le titre de la page.
 Toute page doit avoir un titre qui décrit ce qu'elle contient.
 Il est conseillé de garder le titre assez court (moins de 100
caractères en général).
 Le titre ne s'affiche pas dans la page mais en haut de celle-ci
càd dans l'onglet du navigateur.
Les commentaires
 Un commentaire en HTML est un texte qui sert

simplement de mémo.
 Il n'est pas affiché.
 Il n'est pas lu par l'ordinateur.
 Cela ne change rien à l'affichage de la page.


Les paragraphes
 La balise <p> définit un paragraphe.

 L’élément p crée automatiquement un espace avant et après lui.
 L’espace est appliqué automatiquement par le navigateur.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Paragraphes</title>
</head>
<body>
<p>Bonjour et bienvenue sur mon site !</p>
</body>
</html>
La balise <br />
 La balise <br> insère un saut de ligne unique. Elle permet
un retour à la ligne sans séparer le paragraphe.
 La balise <br> est une balise vide, ce qui signifie qu’elle
n’a pas de balise de fermeture
Exemple :
<p>Ce paragraphe contient <br />un saut de ligne.</p>
Les titres
 En HTML on a le droit d'utiliser six niveaux de titres

différents.
<h6>Titre de niveau 6</h6>

La mise en valeur
 Mettre un peu en valeur : utiliser la balise <em>

</em>.
 Mettre bien en valeur : on utilise la balise <strong>
</strong>
 Exemple :
<p>Ce texte est mis en évidence <em> avec em </em> et
celui-là <strong> avec strong</strong> </p>
Donne le résultat suivant dans le navigateur :
Marquer le texte
 La balise <mark> permet de faire ressortir visuellement

une portion de texte.
 L'extrait n'est pas forcément considéré comme important
mais on veut qu'il se distingue bien du reste du texte.
 Exemple :
<p>Ce texte est mis en évidence <mark> avec mark
</mark> </p>
Les listes ordonnées
 <ol> </ol>
<li> </li> délimite un élément de la liste (un numéro).
Exemple :
<ol>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ol>
Les listes non ordonnées
 <ul> </ul>
<li> </li> délimite un élément de la liste (une puce).
Exemple :
<ul>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ul>
Les listes de descriptions
 L'élément <dl> représente une liste de descriptions sous la forme
d'une liste de paires associant des termes et leurs définitions.
 Ces termes sont fournis par des éléments <dt>.
 Leurs descriptions ou définitions sont fournis par des éléments
<dd>.
 On utilisera par exemple cet élément pour implémenter un
glossaire.
Exemple :
<dl>
<dt>HTML5</dt>
<dd>Langage de structuration</dd>
<dt>CSS</dt>
<dd>Langage de mise en page, design</dd>
</dl>
Créer des liens
 Pour faire un lien, la balise que nous allons utiliser est très
simple à retenir : <a>.
 Il faut lui ajouter un attribut, href, pour indiquer vers
quelle page le lien doit conduire.
Exemple :
<a href="page.html">Page</a>
Un lien vers une autre page du même site
Un lien vers une ancre
 Une ancre est une sorte de point de repère que vous pouvez
mettre dans vos pages HTML lorsqu'elles sont très longues.
 Il s’agit d’un lien interne.
 Les liens internes permettent de se déplacer à l'intérieur d'un
fichier HTML, sans que le visiteur soit obligé de faire
"scroller" la fenêtre.
 Le visiteur va donc cliquer sur un lien et il sera amené vers
l'ancre.
 Pour cela deux étapes sont nécessaires :
 Définir la cible d'un lien (l'ancre)
 et associer ce même lien à cette ancre.
 Pour créer une ancre :
 il suffit de rajouter l'attribut id à une balise qui va alors servir
de repère.
 On peut utiliser l'attribut id pour donner un nom à l'ancre.
 Cela nous servira ensuite pour faire un lien vers cette ancre.
Exemple :
<a id="top"></a>
 Ensuite, il suffit de créer un lien comme d'habitude, mais
cette fois l'attribut href contiendra un dièse (#) suivi du
nom de l'ancre. Exemple :
<a href="#top">top</a>
Liens externes
 Les liens externes commencent comme les autres liens, c'est à dire avec
la balise <a href="...."> et le reste de la syntaxe varie.
 Lien externe vers un site http
Exemple :
<a href=http://www.meteo.tn>La météo</a>
 Lien externe vers un serveur FTP
Exemple :
<a href="ftp://ftp.isetsf.rnu.tn">FTP ISET Sfax</a>
 Lien externe vers un serveur de news (mais pour que ce lien soit
valide il faut que le visiteur soit abonné à ce serveur de news)
Exemple :
<a href="news:news.site">Serveur de news</a>
 Note : Avec un lien externe on peut proposer un fichier (.exe ou .zip)
en téléchargement
Exemple :
<a href="util.exe">Télécharger le fichier</a>
Un lien qui affiche une infobulle au survol
 On peut utiliser l'attribut title qui affiche une bulle d'aide

lorsqu'on pointe sur le lien.
 Cet attribut est facultatif.
Exemple :
<a href="page.html" title="Cliquer ici pour aller à la page
suivante">Suivant</a>

Un lien pour envoyer un e-mail
 On peut créer un lien e-mail pour que la messagerie

paramétrée par défaut du visiteur se lance automatiquement.
 Pour cela on utilise des liens de type mailto
Exemple :
<a href="mailto:nom@provider.com">nom@provider.com</a>
 Si on clique sur le lien, un nouveau message vide s'ouvre, prêt
à être envoyé à l’adresse e-mail indiquée.
Insertion d'une image
 La balise qui va nous permettre d'insérer une image est <img /> .
 La balise doit être accompagnée de deux attributs obligatoires :
 src : il permet d'indiquer où se trouve l'image que l'on veut insérer.
 alt : cela signifie « texte alternatif ». Càd un texte qui décrit ce que
contient l'image.
 Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être
téléchargée (cela arrive), ou dans les navigateurs de personnes non-
voyantes .
 Cela aide aussi les moteurs de recherche pour les recherches
d'images.
Exemple :
<p>
Voici une photo que j'ai prise lors de mes dernières vacances à la
montagne : <br />
<img src="images/montagne.jpg" alt="Photo de montagne" />
</p>
 L'attribut permettant d'afficher une bulle d'aide est le même que pour
les liens : il s'agit de title.
 Cet attribut est facultatif.
Exemple :
<p>
Voici une photo que j'ai prise lors de mes dernières vacances à la
montagne : <br />
<img src="montagne.jpg" alt="Photo de montagne" title="Belle
montagne !" />
</p>
Miniature cliquable
 Si l’image est très grande, il est conseillé d'en afficher la miniature sur le
site.
 Ajouter ensuite un lien sur cette miniature pour que les visiteurs
puissent afficher l'image en taille originale.
<p> <a href="img/montagne.jpg"> <img src="img/montagne_mini.jpg"

alt="Photo de montagne" title="Cliquez pour agrandir" /></a> </p>
 On les place toutes les deux dans un dossier appelé par exemple img.
 On affiche la version montagne_mini.jpg sur la page et on crée un lien
vers montagne.jpg pour que l'image agrandie s'affiche lorsqu'on clique
sur la miniature.
Les figures
 Ce sont des éléments qui viennent enrichir le texte pour

compléter les informations de la page.
 Les figures peuvent être de différents types : images, codes
source, citations, etc.
 En HTML5, on dispose de la balise <figure> </figure>.
Exemple :
<figure> <img src="blocnotes.png" alt="Bloc-Notes" />
<figcaption>Le logiciel Bloc-Notes</figcaption>
</figure>
 Pour ajouter une légende, utilisez la balise <figcaption> à
l'intérieur de la balise <figure>.
Exemple 1
<figure>
<img src="logo.jpg" alt="Logo bloc notes" width="300" height="250" />
<figcaption>Le logiciel Bloc-Notes</figcaption>
</figure>
Exemple 2
<figure>
<img src= "oiseau1.jpg" alt="Happy dog" width="100" height="125" />
<img src="oiseau2.jpg" alt="Happy dog" width="100" height="125" />
<img src="oiseau3.jpg" alt="Happy dog" width="100" height="125" />
<figcaption>Des oiseaux de l’australie</figcaption>
</figure>
Les balises structurantes de HTML5
<header> : l'en-tête
 La plupart des sites web possèdent en général un en-tête,

appelé header en anglais.
 On y trouve le plus souvent un logo, une bannière, le
slogan du site…
 On devrait placer ces informations à l'intérieur de la
balise <header> </header>
<header>

</header>
 Exemple 1 :
<header>
<h1>Le titre le plus important de la page</h1>
</header>
 Exemple 2 :
<article>
<header>
<h1>Titre de cet article</h1>
</header>
<p>......</p>
</article>
<footer> : le pied de page
 À 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.
<footer>

</footer>
Exemple :
<footer>
<ul>
<li>droits d’auteur</li>
<li>carte du site</li>
<li>contactez-nous</li>
<li>retour au début de la page</li>
</ul>
</footer>
<nav> : principaux liens de navigation
 La balise <nav> doit regrouper tous les principaux liens de

navigation du site.
 On y place par exemple le menu principal du site.
 Généralement, le menu est réalisé sous forme de liste à puces
à l'intérieur de la balise <nav> :
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<article> : un article indépendant
 La balise <article> sert à 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 site.
 C'est le cas par exemple des actualités (articles de
journaux ou de blogs).
Exemple :
<article>
<h1>Mon article</h1>
<p>..............</p>
</article>
<section> : une section de page
 La balise <section> sert à regrouper des contenus en

fonction de leur thématique.
 Une section distingue un bloc logique de contenu.
 Elle peut elle-même se subdiviser en plusieurs sections et
être constituée d’un en-tête, d’un pied, et d’une
navigation.
Exemple :
<section>
<h1>Ma section de page</h1>
<p>…………….</p>
</section>
Exemple
<section>
<article>
<header>
<h1>Partie 1 du sujet</h1>
</header>
<p> Descriptif 1 </p>
<footer>
<time datetime="2012-09-01"
pubdate="pubdate">Publié le 01/09/2012</time>
</footer>
</article>
<article>
<header>
<h1>Partie 2 du sujet</h1>
</header>
<p> Descriptif 2 </p>
<footer>
<time datetime="2012-09-02"
pubdate="pubdate">Publié le 02/09/2012</time>
</footer>
</article>
</section>
49
<aside> : informations complémentaires
 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é
(bien que ce ne soit pas une obligation).
<aside>

</aside>
 Il peut y avoir plusieurs blocs <aside> dans la page.
Exemple
<!DOCTYPE html> <section>
<html> <aside>
<head> <h1>News</h1>
<meta charset="utf-8" /> <p>Dernières Actualités</p>
<title>Le Site Web</title> </aside>
</head> <article>
<body> <h1>un grand voyage</h1>
<header> <p>(texte de l'article)</p>
<h1>Thème 1</h1> </article>
<h2>Carnets de voyage</h2> </section>
</header> <footer>
<nav> <p>Copyright Tous droits
<ul> réservés<br />
<li><a <a href="#">contact
href="#">Accueil</a></li> !</a></p>
<li><a href="#">Blog</a></li> </footer>
<li><a href="#">CV</a></li> </body>
</ul> </html>
</nav>
52
Les balises de type block et inline
 block :
 Une balise de type block sur la page web crée automatiquement un
retour à la ligne avant et après.
 La page web sera en fait constituée d'une série de blocs les uns à la
suite des autres.
 Aussi, il est possible de mettre un bloc à l'intérieur d'un autre.
Ex : <p> , <h1>, <footer>
 inline :
 Une balise inline ne crée pas de retour à la ligne, le texte qui se
trouve à l'intérieur s'écrit donc à la suite du texte précédent, sur la
même ligne.
 Une balise de type inline se trouve obligatoirement à l'intérieur d'une
balise block.
Ex : <a>, <em>, <img />
Les balises universelles
 Il existe deux balises génériques, ces deux balises sont

des conteneurs qui sont destinés à structurer le contenu.
 La seule différence entre les deux est que l'une d'elle est
inline et l'autre est block :
 <span></span> (inline) :
 n'introduit pas de saut de lignes.
 Et sert surtout à associer un style à une partie d'un texte,
 <div></div> (block) :
 introduit un saut de ligne.
 Et sert à ordonner le contenu de la page
Exemple 1 :
<div>0000000</div><div>111111<div></div>222222</div>
s'affiche ainsi:
0000000
111111
222222
Exemple 2 :
<span>0000000<span>111111</span>222222</span>
s'affiche ainsi:
0000000111111222222
Un tableau simple
 <table> </table> C'est la balise qui permet d'indiquer le

début et la fin d'un tableau.
 <tr> </tr> : indique le début et la fin d'une ligne du tableau.
 <td> </td> : indique le début et la fin du contenu d'une
cellule.
 <th> </th> : indique le début et la fin du contenu d'une
cellule titre.
 En HTML, un tableau se construit ligne par ligne. Dans chaque
ligne (<tr>), on indique le contenu des différentes cellules
(<td> ou <th>).
 Rq : Pour ajouter un titre pour le tableau, il faut utiliser la

balise : <caption> </caption>.
Exemple :
td
(cellules) th
(cellules titres)
La liste des étudiants
Nom Age Ville

tr Hajer 21 ans Tunis
(ligne) Ahmad 22 ans Sfax
Malek 20 ans Gabes
Amina 19 ans Djerba
<!DOCTYPE html> <tr>
<html> <td>Ahmad</td>
<head> <td>22 ans</td>
<meta charset="utf-8" /> <td>Sfax</td>
<title>tableau simple</title> </tr>
</head> <tr>
<body> <td>Malek</td>
<table border="1"> <td>20 ans</td>
<caption>La liste des étudiants</caption> <td>Gabes</td>
<tr> </tr>
<th>Nom</th> <tr>
<th>Age</th> <td>Amina</td>
<th>Ville</th> <td>19 ans</td>
</tr> <td>Djerba</td>
<tr> </tr>
<td>Hajer</td> </table>
<td>21 ans</td> </body>
<td>Tunis</td> </html>
</tr>
58
Un tableau structuré
 Les tableaux structurés sont de deux types :

 Pour des tableaux, il est possible de les diviser en trois parties :
 En-tête ;
 Corps du tableau ;
 Pied de tableau.
 Pour certains tableaux, il se peut qu’on a besoin de fusionner
des cellules entre elles.
Diviser un tableau
 Si le tableau est assez gros, on aura tout intérêt à le

découper en plusieurs parties.
 Pour cela, il existe des balises HTML qui permettent de
définir les trois « zones » du tableau :
 l'en-tête (en haut) : il se définit avec les balises
<thead></thead> ;
 le corps (au centre) : il se définit avec les balises

<tbody></tbody> ;
 le pied du tableau (en bas) : il se définit avec les balises

<tfoot></tfoot>.
Exemple :
thead
(entête du tableau)
La liste des étudiants
Nom Age Ville

tbody Hajer 21 ans Tunis
(corps Ahmad 22 ans Sfax
du
Malek 20 ans Gabes
tableau)
Amina 19 ans Djerba
Nom Age Ville
tfoot
(pied du tableau)
<table border="1"> <tbody>
<caption>La liste des étudiants</caption>
<tr>
<td>Hajer</td>
<thead> <td>21 ans</td>
<tr> <td>Tunis</td>
<th>Nom</th> </tr>
<tr>
<th>Age</th> <td>Ahmad</td>
<td>Sfax</td>
</tr> </tr>
</thead> <tr>
<tfoot> <td>Malek</td>
<td>20 ans</td>
<tr> <td>Gabes</td>
<th>Nom</th> </tr>
<tr>
<th>Age</th>
<td>Amina</td>
</tr> <td>Djerba</td>
</tr>
</tfoot>
</tbody>
</table>
62
Fusionner un tableau
 Il existe deux types de fusion :
 La fusion de colonnes :
 La fusion s'effectue horizontalement.
 On utilisera l'attribut colspan.
 La fusion de lignes :
 La fusion s'effectuera verticalement.
 On utilisera l'attribut rowspan.
 Il faut donner une valeur à l'attribut (que ce soit colspan
ou rowspan) pour indiquer le nombre de cellules à
fusionner entre elles.
Exemple
<TABLE border="1">
<CAPTION>Tester quelques paramètres</CAPTION>
<TR> <TH rowspan="2"> </TH> <TH colspan="2">Moyenne </TH>
<TH rowspan="2">Age<BR/>moyen </TH> </TR>
<TR> <TH> Taille </TH> <TH>Poids </TH> </TR>
<TR><TH>Masculin</TH><TD>1.6 </TD> <TD>75 </TD><TD>70</TD> </TR>
<TR><TH>Féminin </TH> <TD>1.5 </TD><TD>65 </TD> <TD>60</TD> </TR>
</TABLE>
Les formulaires
 Les formulaires interactifs permettent aux auteurs de pages Web de

doter leur page web d'éléments interactifs permettant un dialogue
avec les internaute.
 Le lecteur saisit des informations en remplissant des champs ou en

cliquant sur des boutons, puis appuie sur un bouton de soumission
(submit) pour l'envoyer soit à un URL, c'est-à-dire de façon générale
à une adresse e-mail ou à un script de page web dynamique tel que
PHP, ASP ou un script CGI.
 Les formulaires sont délimités par la balise :

<FORM> </FORM>, une balise qui permet de regrouper plusieurs
éléments de formulaire (boutons,champs de saisie,...).
 Le formulaire possède les attributs obligatoires suivants :
 method : cet attribut indique par quel moyen les données vont
être envoyées . Il existe deux solutions pour envoyer des
données sur le Web :
 method="get" : elle est limitée à 255 caractères et les informations
seront envoyées dans l'adresse de la page (http://…).
 method="post" : elle permet d'envoyer un grand nombre d'informations

et les données saisies dans le formulaire ne transitent pas par la barre
d'adresse.
 action : c'est l'adresse de la page ou du programme qui va
traiter les informations . Cette page se chargera d’envoyer un e-
mail avec le message, ou bien d'enregistrer le message avec tous
les autres dans une base de données. Cela ne peut pas se faire
en HTML et CSS, mais avec PHP, ASP ou un script CGI.
Les objets de formulaire
Sans
contrôle
Exemple 1
<!DOCTYPE html> <fieldset>
<head> <legend>Votre souhait</legend>
<p>
<title>Ex 1 de formulaire</title>
Votre ville choisie pour votre destination
</head>
<body> <input type="radio" name="ville"
value="Sousse" /> Sousse
<form method="post" action="">
<input type="radio" name="ville"
<fieldset>
value="Mehdia" /> Mehdia
<legend>Vos coordonnées</legend>  <input type="radio" name="ville"
Quel est votre nom ? value="Hammamet" /> Hammamet
<input type="text" name="nom" /> <input type="radio" name="ville"
Quel est votre prénom ? value="autre" /> Autre... </p>
<input type="text" name="prenom" /> <p> Si "Autre", veuillez préciser :
Quel est votre e-mail ? <textarea name="precisions" cols="40"
<input type="email" name="email" /> rows="4"></textarea> </p>
</fieldset> </fieldset>
</form> </body> </html>
Exemple 2
<!DOCTYPE html> <head>
<title>Ex 2 de formulaire</title>
</head>
<body>
<form action="">
<input type="date" name="myDate" title="Date (aaaa-mm-jj)" value="2009-01-15" />
<input type="time" name="myTime" title="Heure (hh:mn)" value="08:16" /><br/>
AutoFocus =>
<input type="number" name="myNumber" title="Nombre" value="10" min="8" max="12"
step="2"/>
<input type="range" name="myRange" title="Curseur" value="0" min="0" max="10" step="2"/>
<input type="color" name="myColor" title="Couleur en anglais" value="#666666"><br/>
<input type="email" name="myEmail" title="Courriel" value="html5demo@isetsf.tn" />
<input type="url" name="myURL" title="URL" value="http://html5demo.isetsf.tn"/><br/>
<input type="submit" value="Valider"> </form> </body> </html>
Les formats audio
 MP3 : l'un des plus compatibles, tous les appareils savent le lire.
 AAC : utilisé majoritairement par Apple sur iTunes, c'est un format

de bonne qualité. Les iPod, iPhone et autres iPad savent les lire sans
problème.
 OGG : le format Ogg Vorbis est très répandu dans le monde du

logiciel libre, notamment sous Linux. Ce format a l'avantage d'être
libre, c'est-à-dire qu'il n'est protégé par aucun brevet.
 WAV (format non compressé) : le fichier est très volumineux

avec ce format.
Insertion d'un élément audio
 La balise <audio> </audio>

 Exemple :
<audio src="musique.mp3"></audio>
 Les attributs de la balise :
 controls : pour ajouter les boutons « Lecture », « Pause » et la
barre de défilement.
 width : pour modifier la largeur de l'outil de lecture audio.
 loop : la musique sera jouée en boucle.
 autoplay : la musique sera jouée dès le chargement de la page.
 preload : indique si la musique peut être préchargée dès le
chargement de la page ou non. Cet attribut peut prendre les
valeurs :
 auto (par défaut) : le navigateur décide s'il doit précharger
toute la musique, uniquement les métadonnées ou rien du tout.
 metadata : charge uniquement les métadonnées (durée, etc.).
 none : pas de préchargement.
Exemple
<!DOCTYPE html>
<head>
<title>Audio</title>
</head>
<body>
<audio src="in the gallery.mp3" controls></audio>
</body>
</html>
Les formats vidéo
 Le stockage de la vidéo est autrement plus complexe. On a besoin de trois

éléments :
 Un format conteneur : c'est un peu comme une boîte qui va servir à contenir
les deux éléments ci-dessous. On reconnaît en général le type de conteneur à
l'extension du fichier : AVI, MP4, MKV…
 Un codec audio : c'est le format du son de la vidéo, généralement compressé.

On vient de les voir, on utilise les mêmes : MP3, AAC, OGG…
 Un codec vidéo : c'est le format qui va compresser les images. Les principaux à
connaître pour le Web sont :
 H.264 : l'un des plus puissants et des plus utilisés, mais il n'est pas 100%
gratuit.
 Ogg Theora : un codec gratuit et libre de droits, mais moins puissant que
H.264. Il est bien reconnu sous Linux mais, sous Windows, il faut installer des
programmes pour pouvoir le lire.
 WebM : un autre codec gratuit et libre de droits, plus récent. Proposé par
Google, c'est le concurrent le plus sérieux de H.264 à l'heure actuelle.
Insertion d'une vidéo
 La balise <video⁪⁪> </video⁪⁪>

 Exemple :
<video src="sintel.webm"⁪></video⁪⁪>
 Les attributs de la balise :
 poster : image à afficher à la place de la vidéo tant que celle-ci n'est pas
lancée. Par défaut, le navigateur prend la première image de la vidéo.
 controls : pour ajouter les boutons « Lecture », « Pause » et la barre de
défilement.
 width : pour modifier la largeur de la vidéo.
 height : pour modifier la hauteur de la vidéo.
 loop : la vidéo sera jouée en boucle.
 autoplay : la vidéo sera jouée dès le chargement de la page.
 preload : indique si la vidéo peut être préchargée dès le chargement de la
page ou non. Cet attribut peut prendre les valeurs :
 auto (par défaut) : le navigateur décide s'il doit précharger toute la vidéo, uniquement
les métadonnées ou rien du tout.
 metadata : charge uniquement les métadonnées (durée, dimensions, etc.).
 none : pas de préchargement.
Exemple
<!DOCTYPE html>
<head>
<title>vidéo</title>
</head>
<body>
<video src="Sintel.ogv" controls width="600">⁪</video⁪⁪>
</body>
</html>

Chapitre 2 HTML5 Version 0 PDF

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 2 HTML5 Version 0 PDF

Titre original :

Transféré par

Droits d'auteur :

Formats disponibles

Les bases de HTML 5

Le fonctionnement des sites web

 Les langages HTML et CSS sont à la base du

 HTML (HyperText Markup Language) :

 CSS (Cascading Style Sheets, aussi appelées Feuilles de

 HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de nombreuses

 HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de

 Les pages HTML sont représentées de ce qu'on appelle

 Elles s'ouvrent, contiennent du texte, et se ferment plus

 Ce sont des balises qui servent le plus souvent à insérer

 Les attributs sont un peu les options des balises.

 Une page web est constituée de deux parties :

<meta charset="utf-8" />

 Un commentaire en HTML est un texte qui sert

 La balise <p> définit un paragraphe.

 En HTML on a le droit d'utiliser six niveaux de titres

<h5>Titre de niveau 5</h5>

<h4>Titre de niveau 4</h4>

<h3>Titre de niveau 3</h3>

<h2>Titre de niveau 2</h2>

<h1>Titre de niveau 1</h1>

 Mettre un peu en valeur : utiliser la balise <em>

 La balise <mark> permet de faire ressortir visuellement

 On peut utiliser l'attribut title qui affiche une bulle d'aide

Donne le résultat suivant dans le navigateur :

 On peut créer un lien e-mail pour que la messagerie

<p> <a href="img/montagne.jpg"> <img src="img/montagne_mini.jpg"

 Ce sont des éléments qui viennent enrichir le texte pour

 La plupart des sites web possèdent en général un en-tête,

 À l'inverse de l'en-tête, le pied de page se trouve en

 La balise <nav> doit regrouper tous les principaux liens de

 La balise <article> sert à englober une portion

 La balise <section> sert à regrouper des contenus en

 La balise <aside> est conçue pour contenir des

 Il existe deux balises génériques, ces deux balises sont

 <table> </table> C'est la balise qui permet d'indiquer le

 Rq : Pour ajouter un titre pour le tableau, il faut utiliser la

Nom Age Ville

 Les tableaux structurés sont de deux types :

 Si le tableau est assez gros, on aura tout intérêt à le

 le corps (au centre) : il se définit avec les balises

 le pied du tableau (en bas) : il se définit avec les balises

Nom Age Ville

 Les formulaires interactifs permettent aux auteurs de pages Web de

 Le lecteur saisit des informations en remplissant des champs ou en

 Les formulaires sont délimités par la balise :

 method="post" : elle permet d'envoyer un grand nombre d'informations

 AAC : utilisé majoritairement par Apple sur iTunes, c'est un format

 OGG : le format Ogg Vorbis est très répandu dans le monde du

 WAV (format non compressé) : le fichier est très volumineux

 La balise <audio> </audio>

 Le stockage de la vidéo est autrement plus complexe. On a besoin de trois

 Un codec audio : c'est le format du son de la vidéo, généralement compressé.

 La balise <video⁪⁪> </video⁪⁪>

Vous aimerez peut-être aussi