iune initiation au développement web avec des exemples pratiques .pdf

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 :
2

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.
4

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.
6

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>
7

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.
8

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 />
9

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 :
<image nom="photo.jpg" />
L'ordinateur comprend alors qu'il doit afficher l'image
contenue dans le fichier photo.jpg.
10

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>
11

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
12

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.
13

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,
OEM 775,Windows-1253…
 Une seule cependant devrait être utilisée aujourd'hui autant
que possible : UTF-8.
 Cette méthode d'encodage permet d'afficher sans aucun
problème pratiquement tous les symboles de toutes les
langues.
14

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.
15

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.

16

Les paragraphes
<!DOCTYPE html>
<html>
<head>
<title>Paragraphes</title>
</head>
<body>
<p>Bonjour et bienvenue sur mon site !</p>
</body>
</html>
 Rq : Pour Sauter une ligne il faut utiliser une deuxième balise
<p> car ça ne sert à rien de taper Entrée.
17

La balise <br />
 C'est une balise orpheline qui sert juste à indiquer qu'on
doit aller à la ligne.
 On doit obligatoirement la mettre à l'intérieur d'un
paragraphe.
 <p> </p> : pour organiser son texte en paragraphes.
 <br /> : pour aller à la ligne.
18

Exemple
<!DOCTYPE html>
<html>
<head>
<title>Essais de sauts de ligne</title>
</head>
<body>
Ceci est un <br /> exemple <p> avec les balises P et BR </p>
</body>
</html>
19

Les titres
 En HTML on a le droit d'utiliser six niveaux de titres
différents.
<H6>Titre de niveau 6</H6>
20

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 :
21

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>
22

Les listes
 Liste non ordonnée <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>
23

Les listes
 Liste ordonnée <ol> </ol>
Exemple :
<ol>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ol>
24

Les listes
 Liste de définition <dl> </dl>
Exemple :
<dl>
<dt></dt> <dd></dd>
<dt></dt> <dd></dd>
<dt></dt> <dd></dd>
</dl>
25

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>
26

Un lien vers une autre page du même site
27

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.
28

 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>
29

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>
30

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>
31

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.
32

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>
33

 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>
34

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.
35

 la balise MAP peut vous permettre de définir sur la même image,
différentes zones cliquables qui vous renverront vers des estinations
variées.
 Pour cela, vous devez utiliser l'option USEMAP avec la balise IMG
pour indiquer que vous définissez une image cliquable.
<IMG SRC = "image_cliquable.gif" USEMAP =
"#nom_map">
 Ensuite vous devez ouvrir la map "nom_map" en indiquant les
différentes coordonnées des zones cliquables :
<MAP NAME = "nom map"> Description des zones
cliquables </MAP>
36
Images MAP

<map name="ordinateur">
< area shape="RECT" coords=" 97,81,123,97" href="souris.html"
alt="Souris" >
<area shape="CIRCLE" coords=" 56,32,37" href="moniteur.html"
alt="Moniteur" >
<area shape="RECT" coords=" 100,9,147,78" href="uc.html"
alt="Unité centrale" >
<area shape="RECT" coords=" 4,71,88,95" href="clavier.html"
alt="Clavier" >
<area shape="DEFAULT" href="defaut.html">
</map>
<IMG SRC="ordinateur.gif" ALT="Figure d’un ordinateur"
USEMAP="#ordinateur">
39
Images MAP

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>.
40

Les balises structurantes de HTML5
42

<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>
43

 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>
44

<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>
45

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>
46

<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>
47

<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>
49

<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>
51

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 class="titre-article">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>
53

<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.
55

Exemple
<!DOCTYPE html>
<html>
<head>
<title>Le Site Web</title>
</head>
<body>
<header>
<h1>Thème 1</h1>
<h2>Carnets de voyage</h2>
</header>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">CV</a></li>
</ul>
</nav>
<section>
<aside>
<h1>News</h1>
<p>Dernières Actualités</p>
</aside>
<article>
<h1>un grand voyage</h1>
<p>(texte de l'article)</p>
</article>
</section>
<footer>
<p>Copyright Tous droits réservés<br />
<a href="#">contact !</a></p>
</footer>
</body>
</html>
57

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 />
59

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
60

Exemple 1 :
<div>0000000<div>111111</div>222222</div>
s'affiche ainsi:
0000000
111111
222222
Exemple 2 :
<span>0000000<span>111111</span>222222</span>
s'affiche ainsi:
0000000111111222222
61

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>.
62

Nom Age Ville
Hajer 21 ans Tunis
Ahmad 22 ans Sfax
Malek 20 ans Gabes
Amina 19 ans Djerba
tr
(ligne)
td
(cellules) th
(cellules titres)
Exemple :
La liste des étudiants
63

<!DOCTYPE html>
<html>
<head>
<title>tableau simple</title>
</head>
<body>
<table border="1">
<caption>La liste des étudiants</caption>
<tr>
<th>Nom</th>
<th>Age</th>
<th>Ville</th>
</tr>
<tr>
<td>Hajer</td>
<td>21 ans</td>
<td>Tunis</td>
</tr>
<tr>
<td>Ahmad</td>
<td>22 ans</td>
<td>Sfax</td>
</tr>
<tr>
<td>Malek</td>
<td>20 ans</td>
<td>Gabes</td>
</tr>
<tr>
<td>Amina</td>
<td>19 ans</td>
<td>Djerba</td>
</tr>
</table>
</body>
</html>
64

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.
65

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>.
66

Nom Age Ville
Hajer 21 ans Tunis
Ahmad 22 ans Sfax
Malek 20 ans Gabes
Amina 19 ans Djerba
Nom Age Ville
tbody
(corps
du
tableau)
thead
(entête du tableau)
Exemple :
La liste des étudiants
tfoot
(pied du tableau)
67

<table border="1">
<caption>La liste des étudiants</caption>
<thead>
<tr>
<th>Nom</th>
<th>Age</th>
<th>Ville</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Nom</th>
<th>Age</th>
<th>Ville</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Hajer</td>
<td>21 ans</td>
<td>Tunis</td>
</tr>
<tr>
<td>Ahmad</td>
<td>22 ans</td>
<td>Sfax</td>
</tr>
<tr>
<td>Malek</td>
<td>20 ans</td>
<td>Gabes</td>
</tr>
<tr>
<td>Amina</td>
<td>19 ans</td>
<td>Djerba</td>
</tr>
<tbody>
</table>
68

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.
70

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 internautes.
 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,...).
73

 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.
74

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>
81

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 OggVorbis 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.
83

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.
84

Exemple
<!DOCTYPE html>
<head>
<title>Audio</title>
</head>
<body>
<audio src="in the gallery.mp3" controls></audio>
</body>
</html>
85

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 leWeb sont :
 H.264 : l'un des plus puissants et des plus utilisés, mais il n'est pas 100%
gratuit.
 OggTheora : un codec gratuit et libre de droits, mais moins puissant que
H.264. Il est bien reconnu sous Linux mais, sousWindows, 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.
86

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.
87

Exemple
<!DOCTYPE html>
<head>
<title>vidéo</title>
</head>
<body>
<video src="Sintel.ogv" controls width="600">⁪</video⁪⁪>
</body>
</html>
88

iune initiation au développement web avec des exemples pratiques .pdf

Recommandé

Recommandé

Contenu connexe

Similaire à iune initiation au développement web avec des exemples pratiques .pdf

Similaire à iune initiation au développement web avec des exemples pratiques .pdf (20)

Dernier

Dernier (14)

iune initiation au développement web avec des exemples pratiques .pdf