SlideShare une entreprise Scribd logo
Les bases de HTML 5
1
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
3
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
5
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)
<meta charset="utf-8" />
 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.
<!-- Ceci est un commentaire -->
16
Les paragraphes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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>
<meta charset="utf-8" />
<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>
<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>
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>
Donne le résultat suivant dans le navigateur :
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>
Donne le résultat suivant dans le navigateur :
23
Les listes
 Liste ordonnée <ol> </ol>
Exemple :
<ol>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ol>
Donne le résultat suivant dans le navigateur :
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>
Donne le résultat suivant dans le navigateur :
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>
Donne le résultat suivant dans le navigateur :
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
37
Images MAP
38
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
41
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>
<!-- Placez ici le contenu de l'en-tête de votre page -->
</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>
<!-- Placez ici le contenu du pied de page -->
</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
48
<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
50
<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
52
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
54
<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>
<!-- Placez ici des informations complémentaires -->
</aside>
 Il peut y avoir plusieurs blocs <aside> dans la page.
55
56
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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
58
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>
<meta charset="utf-8" />
<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
Exemple :
69
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
Exemple
71
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
Les objets de formulaire
75
76
77
78
79
80
Exemple 1
Exemple 2
<!DOCTYPE html> <head>
<meta charset="utf-8" />
<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 =&gt;
<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
82
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>
<meta charset="utf-8" />
<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>
<meta charset="utf-8" />
<title>vidéo</title>
</head>
<body>
<video src="Sintel.ogv" controls width="600"></video>
</body>
</html>
88

Contenu connexe

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

Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
tanokouakouludovic
 
Chapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfChapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdf
YassineZARIOUH
 
Atelier template
Atelier templateAtelier template
Atelier template
Pierre Sempé
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
BrahimKarimi
 
Chapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdfChapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdf
AnouAr42
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
Abdoulaye Dieng
 
Cours html5
Cours html5Cours html5
Cours html5
Abdelmonem NAAMANE
 
Html
HtmlHtml
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
TECOS
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation web
MOHAMMED MOURADI
 
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3
Stephane PERES
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
Erwan Tanguy
 
cours Php
cours Phpcours Php
cours Php
mohamednacim
 
Netpathie apprendre-le-html-en-15-minutes
Netpathie apprendre-le-html-en-15-minutesNetpathie apprendre-le-html-en-15-minutes
Netpathie apprendre-le-html-en-15-minutes
Netpathie
 
Cours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptxCours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptx
Mounir Gouiouez
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidoc
cdi-0450786k
 
CreativeLab Html5 workshop
CreativeLab Html5 workshopCreativeLab Html5 workshop
CreativeLab Html5 workshop
Creative-Lab
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
TECOS
 

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

Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
Chapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfChapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdf
 
Atelier template
Atelier templateAtelier template
Atelier template
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
 
Chapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdfChapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdf
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
 
Cours html5
Cours html5Cours html5
Cours html5
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Chapitre1
Chapitre1 Chapitre1
Chapitre1
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation web
 
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
cours Php
cours Phpcours Php
cours Php
 
Netpathie apprendre-le-html-en-15-minutes
Netpathie apprendre-le-html-en-15-minutesNetpathie apprendre-le-html-en-15-minutes
Netpathie apprendre-le-html-en-15-minutes
 
Cours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptxCours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptx
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidoc
 
CreativeLab Html5 workshop
CreativeLab Html5 workshopCreativeLab Html5 workshop
CreativeLab Html5 workshop
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 

Dernier

1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire
NadineHG
 
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
Editions La Dondaine
 
Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024
Friends of African Village Libraries
 
Chap1 Généralités sur les réseaux informatiques.pdf
Chap1 Généralités sur les réseaux informatiques.pdfChap1 Généralités sur les réseaux informatiques.pdf
Chap1 Généralités sur les réseaux informatiques.pdf
TimogoTRAORE
 
Zineb Mekouar.pptx Écrivaine marocaine
Zineb Mekouar.pptx   Écrivaine  marocaineZineb Mekouar.pptx   Écrivaine  marocaine
Zineb Mekouar.pptx Écrivaine marocaine
Txaruka
 
Auguste Herbin.pptx Peintre français
Auguste   Herbin.pptx Peintre   françaisAuguste   Herbin.pptx Peintre   français
Auguste Herbin.pptx Peintre français
Txaruka
 
1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif
NadineHG
 

Dernier (7)

1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire
 
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
 
Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024
 
Chap1 Généralités sur les réseaux informatiques.pdf
Chap1 Généralités sur les réseaux informatiques.pdfChap1 Généralités sur les réseaux informatiques.pdf
Chap1 Généralités sur les réseaux informatiques.pdf
 
Zineb Mekouar.pptx Écrivaine marocaine
Zineb Mekouar.pptx   Écrivaine  marocaineZineb Mekouar.pptx   Écrivaine  marocaine
Zineb Mekouar.pptx Écrivaine marocaine
 
Auguste Herbin.pptx Peintre français
Auguste   Herbin.pptx Peintre   françaisAuguste   Herbin.pptx Peintre   français
Auguste Herbin.pptx Peintre français
 
1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif
 

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

  • 1. Les bases de HTML 5 1
  • 2. 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
  • 3. 3
  • 4. 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
  • 5. 5
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. L'encodage (charset) <meta charset="utf-8" />  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
  • 15. 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
  • 16. 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. <!-- Ceci est un commentaire --> 16
  • 17. Les paragraphes <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <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
  • 18. 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
  • 19. Exemple <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <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
  • 20. Les titres  En HTML on a le droit d'utiliser six niveaux de titres différents. <H6>Titre de niveau 6</H6> <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> 20
  • 21. 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
  • 22. 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> Donne le résultat suivant dans le navigateur : 22
  • 23. 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> Donne le résultat suivant dans le navigateur : 23
  • 24. Les listes  Liste ordonnée <ol> </ol> Exemple : <ol> <li>Fraises</li> <li>Framboises</li> <li>Cerises</li> </ol> Donne le résultat suivant dans le navigateur : 24
  • 25. Les listes  Liste de définition <dl> </dl> Exemple : <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> 25
  • 26. 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> Donne le résultat suivant dans le navigateur : 26
  • 27. Un lien vers une autre page du même site 27
  • 28. 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
  • 29.  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
  • 30. 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
  • 31. 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> Donne le résultat suivant dans le navigateur : 31
  • 32. 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
  • 33. 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
  • 34.  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
  • 35. 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
  • 36.  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
  • 39. <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
  • 40. 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
  • 41. 41
  • 43. <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> <!-- Placez ici le contenu de l'en-tête de votre page --> </header> 43
  • 44.  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
  • 45. <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> <!-- Placez ici le contenu du pied de page --> </footer> 45
  • 46. 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
  • 47. <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
  • 48. 48
  • 49. <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
  • 50. 50
  • 51. <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
  • 52. 52
  • 53. 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
  • 54. 54
  • 55. <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> <!-- Placez ici des informations complémentaires --> </aside>  Il peut y avoir plusieurs blocs <aside> dans la page. 55
  • 56. 56
  • 57. Exemple <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <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
  • 58. 58
  • 59. 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
  • 60. 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
  • 61. 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
  • 62. 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
  • 63. 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
  • 64. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <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
  • 65. 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
  • 66. 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
  • 67. 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
  • 68. <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
  • 70. 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
  • 72. 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
  • 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
  • 74. Les objets de formulaire 75
  • 75. 76
  • 76. 77
  • 77. 78
  • 78. 79
  • 80. Exemple 2 <!DOCTYPE html> <head> <meta charset="utf-8" /> <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 =&gt; <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
  • 81. 82
  • 82. 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
  • 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
  • 84. Exemple <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>Audio</title> </head> <body> <audio src="in the gallery.mp3" controls></audio> </body> </html> 85
  • 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
  • 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
  • 87. Exemple <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>vidéo</title> </head> <body> <video src="Sintel.ogv" controls width="600"></video> </body> </html> 88