HTML

Traitement de Données Semi-Structurées - TDSS
HTML5
Sani KOUMOI MOUHAMAM
IFNTI L1
23 Avril 2023
Table des matières
1 Historique
2 HTML et XHTML
3 HTML5 et XHTML5
Nouvelles API, nouveaux éléments et nouveaux attributs
Suppression de certains éléments et d’attributs
Le rôle de HTML5 et Types de logiciels dans sa manipulation
4 Organiser son texte
Les paragraphes et les titres
Mettre en valeur
Les listes
Les liens
Les Image
5 Fonctionnalités évoluées
Tableaux
Formulaire
Audio/Vidéo
6 Élément de section
Historique HTML et XHTML HTML5 et XHTML5 Organiser son texte Fonctionnalités évoluées Élément de section
Historique
HTML 1 : c’est la toute première version créée par Tim Berners-Lee en 1991.
HTML 2 : la deuxiè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 règles et le fonctionnement de cette
version sont donnés par le W3C (tandis que la première version a été créée par
un seul homme).
HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de
nombreuses possibilité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 répandue du HTML (plus précisément, il
s’agit de HTML 4.01). Elle apparaı̂t pour la première fois en 1998 et propose
l’utilisation de frames (qui découpent une page web en plusieurs parties), des
tableaux plus complexes, des améliorations sur les formulaires, etc. Mais surtout,
cette version permet pour la première fois d’exploiter des feuilles de style, notre
fameux CSS !
HTML 5 : c’est la dernière version. Encore assez peu répandue, elle fait
beaucoup parler d’elle car elle apporte de nombreuses améliorations comme la
possibilité d’inclure facilement des vidéos, un meilleur agencement du contenu,
de nouvelles fonctionnalités pour les formulaires, etc. C’est cette version que
nous allons découvrir ensemble.
Sani KOUMOI MOUHAMAM 3 / 41
Après la publication du HTML 4, en 1998, le W3C décida qu’il ne ferait plus évoluer
HTML. Le futur, d’après eux (et les acteurs de ce livre), était représenté par XML :
HTML fut donc figé dans sa version 4.01 et une nouvelle spécification, appélée
XHTML, vit le jour. XHTML est une version XML de HTML : elle exige par
conséquent le respect des règles syntaxiques de XML (valeurs des attributs
systématiquement entre guillemets, utilisation de marqueurs autofermants, etc.). Il en
existe deux variantes (en fait trois si vous tenez compte des frames HTML, qui ont
disparu de HTML 5) : XHTML transitionnel et XHTML strict, la première ayant été
conçue pour faciliter le passage de HTML vers le standard que représente la seconde
variante. En 2006, le W3C admit qu’il avait été peut-être un trop optimiste quand au
passage à XML (et, par extension, à XHTML 2.0). En 2009, le W3C cessa ses travaux
sur XHTML 2.0 et redirigea ses ressoursces vers HTML 5 : il devint alors clair que
HTML5 avait gagné la bataille des philosophies.

Définition - Selon wikipedia, HTML c’est :
L’HyperText Markup Language, généralement abrégé HTML, est le langage de

balisage conçu pour représenter les pages web. C’est un langage permettant d’écrire
de l’hypertexte, d’où son nom. HTML permet également de structurer
sémantiquement et logiquement et de mettre en forme le contenu des pages, d’inclure
des ressources multimédias dont des images, des formulaires de saisie et des
programmes informatiques. Il permet de créer des documents interopérables avec des
équipements très variés de manière conforme aux exigences de l’accessibilité du web. Il
est souvent utilisé conjointement avec le langage de programmation JavaScript et des
feuilles de style en cascade (CSS). HTML est initialement dérivé du Standard
Generalized Markup Language (SGML).

Exemple de code HTML
<html>
<head>
<title>sans titre< /title>
<meta http-equiv=”content-type” content=”text/html ;charset=utf-8” / >
< /head>
<body>
<p>
<h1> Titre < /h1>
Je suis un paragraphe
< /p>
< /body>
< /html>
Une page web est constituée de deux parties :
L’en-tête <head> : cette section donne quelques informations générales sur la
page comme son titre (balise title), l’encodage (pour la gestion des caractères
spéciaux), etc. Cette section est généralement assez courte. Les informations
que contient l’en-tête ne sont pas affichées sur la page, ce sont simplement des
informations générales à destination de l’ordinateur. Elles sont cependant très
importantes.
Le corps <body> : c’est là que se trouve la partie principale de la page. Tout ce
que nous écrirons ici sera affiché à l’écran. C’est à l’intérieur du corps que nous
écrirons la majeure partie de notre code.
Exemple de code XHTML
Comme nous l’avons dit, le W3C voulait une version XML de HTML qui est XHMTL.
La différence est qu’un code XHTML peut être vérifier sur le plan syntaxe car il
respecte toutes les régles syntaxiques de XML. Voici un exemple de code
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN”
”http ://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http ://www.w3.org/1999/xhtml” xml :lang=”en” lang=”en”>
<head>
<title>sans titre< /title>
<meta http-equiv=”content-type” content=”text/html ;charset=utf-8” / >
< /head>
<body>
<p>
<h1> Titre du paragraphe < /h1>
Je suis un paragraphe
< /p>
< /body>
< /html>

Définition - Selon wikipedia

HTML5 (HyperText Markup Language 5) est la dernière révision majeure du
HTML(format de données conçu pour représenter les pages web). Cette version a été
finalisée le 28 octobre 2014. HTML5 spécifie deux syntaxes d’un modèle abstrait défini
en termes de DOM : HTML5 et XHTML5. Le langage comprend également une
couche application avec de nombreuses API, ainsi qu’un algorithme afin de pouvoir
traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C en
mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en
parallèle sur le même document afin de maintenir une version unique de la technologie.
Le W3C clôt les ajouts de fonctionnalités le 22 mai 2011, annonçant une finalisation
de la spécification en 2014, et encourage les développeurs Web à utiliser HTML 5 dès
ce moment. Fin 2016, la version 5.1 est officiellement publiée et présente plusieurs
nouveautés qui doivent faciliter le travail des développeurs d’applications Web2.
Couche application
HTML5 n’est pas seulement un langage. Il contient également une couche application
et un algorithme pour les mauvaises écritures syntaxique (Ex : <p> <h1> Titre
< /p>< /h1>). La partie application est composée de huit nouvelles API qui
pourront aider à créer des applications web et qui peuvent être utilisées ensemble avec
de nouveaux éléments introduits pour les applications.

Nouvelles API et Nouveaux éléments de HTML5

API
une API de dessin 2D utilisée avec la nouvelle balise canvas
une API pour jouer des vidéos et des sons/musiques utilisée avec les nouvelles
balises video et audio
une API utilisée pour les applications hors-lignes
une API d’édition en combinaison avec le nouvel attribut contenteditable
une API de drag and drop en combinaison avec l’attribut draggable
une API qui permet l’accès à l’historique de navigation et permet aux pages
d’en ajouter pour prévenir les problèmes de bouton retour-en-arrière.
Éléments
main : définit le contenu principal de la page, il doit être unique dans la page.
header : spécifie une introduction, ou un groupe d’éléments de navigation pour
le document.
footer : définit le pied de page d’un article ou un document. Contient
généralement le nom de l’auteur, la date à laquelle le document a été écrit et /
ou ses coordonnées.
nav : définit une section dans la navigation.
Nouveaux attributs de HTML5
Attributs
media : permet de spécifier pour quel média ou appareil il est
optimisé.(balise a)
type : définit le MIME de la cible URL. (balise a)
form : spécifie à quel formulaire le bouton appartient. (balise
button)
manifest : URL de déclaration (manifest) des fichiers pour un
usage hors ligne. (balise html)
etc ...

Suppression de certains éléments et d’attributs
Élimination de certains éléments et d’attributs
Élément
basefont
big
center
font
etc ...
Attributs
charset (balise a)
accept (balise form)
profile (balise head)
version (balise html)
etc ...

Le rôle de HTML5 et Types de logiciels dans sa manipulation
Importance de HTML5 et Types de logiciels
Importance de HTML5
HTML5 permet de réaliser des sites web (une page constituée de texte, d’image, des
ressources multimédias et des liens vers d’autres pages) et des applications web
(application au même titre que les applications bureau mais utilisées en ligne que ça
soit intranet ou internet).
Types de logiciels dans la manipulation de HTML5

Pour écrire du code HTML5, nous avons besoin d’un éditeur de texte comme par
exemple nano, geany ou notepad, etc. Et pour visualiser votre document que vous
venez d’écrire en HTML5, il vous faut un navigateur comme par exemple firefox,
chromium ou internet explorer, etc.

Paragraphes et Titres
Paragraphes
La plupart du temps, lorsqu’on écrit du texte dans une page web, on le fait à
l’intérieur de paragraphes. Le langage HTML propose justement la balise <p> pour
délimiter les paragraphes.
<p> Je suis un paragraphe < /p>
vous pouvez plusieurs paragraphes successives sur une page ou séparés par d’autres
balise.
Titres
Lorsque le contenu de votre page va s’étoffer avec de nombreux paragraphes, il va
devenir difficile pour vos visiteurs de se repérer. C’est là que les titres deviennent
utiles. En HTML, on est verni, on a le droit d’utiliser six niveaux de titres différents.
Je veux dire par là qu’on peut dire Ceci est un titre très important , Ceci est un
titre un peu moins important , Ceci est un titre encore moins important , etc.
On a donc six balises de titres différentes :
<h1> < /h1> : signifie titre très important . En général, on s’en sert pour
afficher le titre de la page au début de celle-ci
<h2> < /h2> : signifie titre important

Paragraphes et Titres
Titres
<h3> < /h3> : pareil, c’est un titre un peu moins important (on peut dire un
sous-titre
<h4> < /h4> : titre encore moins important

<h5> < /h5> : titre pas important
<h6> < /h6> : titre vraiment, mais alors là vraiment pas important du tout. si
vous voulez)
NOTES
Attention : ne confondez pas avec la balise <title> ! La balise <title> affiche le titre
de la page dans la barre de titre du navigateur comme nous l’avons vu. Les titres
<h1> et compagnie, eux, servent à créer des titres qui seront affichés dans la page
web.

Mettre en valeur
Mettre en valeur
Pour mettre un peu en valeur votre texte, vous devez utiliser la balise de votre choix.
Les balises
<em> < /em> : elle permet de mettre le texte en italique
<strong> < /strong> : permet de mettre en gras texte
<u> < /u> : permet de surligner le texte
Exemple
<!DOCTYPE html> <html>
<head>
<meta charset=”utf-8” / >
<title>Paragraphes< /title>
< /head>
<body>
<p>
Bienvenue sur <strong>mon site< /strong>.
Je suis un <em>developpeur< /em>.
<em><strong><mark>
utilisation simultanée des trois balises < /mark>< /strong>< /em>
< /p>
< /body>
Les listes
Listes
Les listes nous permettent souvent de mieux structurer notre texte et d’ordonner nos
informations. Nous allons découvrir ici deux types de listes :
Listes non ordonnées ou listes à puces

C’est un système qui nous permet de créer une liste d’éléments sans notion d’ordre (il
n’y a pas de premier ni de dernier ).Créer une liste non ordonnée est très
simple. Il suffit d’utiliser la balise <ul> que l’on referme un peu plus loin avec < /ul>.
<ul>
<li>Togo< /li>
<li>Ghana< /li>
< /ul>
La balise <li> permet de créer les éléments d’une liste.
Listes ordonnées ou listes numérotées ou encore énumérations

Une liste ordonnée fonctionne de la même façon, seule une balise change : il faut
remplacer <ul>< /ul> par <ol>< /ol>. À l’intérieur de la liste, on ne change rien :
on utilise toujours des balises <li>< /li> pour + délimiter les éléments.
<ol>
<li>Togo< /li>
<li>Ghana< /li>
< /ol>
Les liens
Liens
Un lien est un texte sur lequel on peut cliquer pour se rendre sur une autre page. On
peut faire un lien d’une page a.html vers une page b.html, mais on peut aussi faire un
lien vers un autre site (par exemple, http://www.alaza.tg). Dans les deux cas, nous
allons voir que le fonctionnement est le même. Il est facile de reconnaı̂tre les liens sur
une page : ils sont écrits d’une façon + différente (par défaut, en bleu et soulignés) et
un curseur en forme de main apparaı̂t lorsqu’on pointe dessus.
Exemples
<!– Lien vers un site –>
<a href=”http ://www.alaza.tg”> Side de Alaza < /a>
<!– Lien vers une page autre page de mon site –>
<a href=”page2.html> Page 2 < /a>
<!– Lien vers une autre page de mon site qui se trouve dans un autre dossier –>
<a href=”IFNTI/page2.html”> Page 2 se trouvant dans le dossier IFNTI < /a>

Les liens
Les autres types de liens
Autres types de liens

Lien pour envoyer un message : Ce type de lien permet d’envoyer un mail au
e-mail + précisé dans la valeur de l’attribut href. Attention, n’oublier pas
d’écrire ”mailto :” avant l’adresse mail.
<a href=”mailto :mkoumoi@yahoo.com”>envoie moi un mail < /a>
Lien de téléchargement : il suffit de donner comme valeur à l’attribut href, le
chemin d’accès au fichier.
<a href=”monFichier.zip”> Télécharger le fichier < /a>
NOTE
Pour afficher un infobulle sur un lien, on utilise l’attribut title dont la valeur sera le
texte que vous voulez afficher lorsque l’utilisateur pointera le souris sur le lien.

Les Image
Insertion d’une image

Insérer une image sur notre page web
Pour insérer une image, on utilise la balise img. Cette dernière doit être accompagnée
de deux attributs obligatoires :
src : il permet d’indiquer où se trouve l’image que l’on veut insérer. Vous pouvez
soit mettre un chemin absolu (ex. : http ://www.site.com/fleur.png), soit
mettre le chemin en relatif (ce qu’on fait le plus souvent). Ainsi, si votre image
est dans un sous-dossier images, vous devrez taper : src=”images/fleur.png”
alt : cela signifie texte alternatif . On doit toujours indiquer un texte
alternatif à l’image, c’est-à-dire un court texte qui décrit ce que contient
l’image. Ce texte sera affiché à la place de l’image si celle-ci ne peut pas être
téléchargée (cela arrive), ou dans les navigateurs de personnes handicapées
(non-voyants) qui ne peuvent malheureusement pas voir l’image. Cela aide
aussi les robots des moteurs de recherche pour les recherches d’images. Pour la
fleur, on mettrait par exemple : alt=”Une fleur”.
<img src=”maFleur.png” alt=”Ma fleur préférée”/ >
NOTE
Pour afficher un infobulle sur une image, on utilise l’attribut title dont la valeur sera le
texte que vous voulez afficher lorsque l’utilisateur pointera la souris sur le lien.
Tableaux
Les tableaux
Ils sont indispensables pour organiser les informations. Nous allons commencer par
construire des tableaux basiques, puis nous les complexifierons au fur et à mesure. La
balise qui permet de créer un tableau est table. Pour ajouter une ligne dans le tableau,
on utilise la balise tr. Pour mettre du contenu dans les cellules, on utilise la balise td.
La différenciation des cellules d’en-tête avec les autres se fait avec la balise th. Et
enfin la balise caption permet de un titre au tableau.
Exemple
<table>
<caption> Mon tableau < /caption>
<tr>
<th> Prénom < /th>
<th> Âge < /th>
< /tr>
<tr>
<td> Anna < /td>
<td> 25 ans < /td>
< /tr>
< /table>

Tableaux
Fusion de cellule
Dans certains tableaux complexes, vous aurez besoin de fusionner des cellules
entre elles. Pour effectuer une fusion, on rajoute un attribut à la balise <td>. Il faut
savoir qu’il existe deux types de fusion :
La fusion de colonnes (La fusion horizontale) : On utilisera l’attribut colspan

<table>
<tr>
<th> Tailleur < /th>
<th> Coordonnier < /th>
< /tr>
<tr>
<td> Anna < /td>
<td> oui < /td>
<td> non < /td>
< /tr>
<tr>
<td> Déziré < /td>
<td colspan=”2”> À la fois tailleur et Coordonnier <td>
< /tr>
< /table>
Tableaux
Fusion de cellule
La fusion de lignes (fusion verticale) : On utilisera l’attribut rowspan

<table>
<tr>
<th> Tailleur < /th>
<th> Coordonnier < /th>
< /tr>
<tr>
<td> Anna < /td>
<td rowspan=”2”> Ils sont tous les deux tailleur < /td>
<td> non < /td>
< /tr>
<tr>
<td> Déziré < /td>
<td> À la fois tailleur et Coordonnier <td>
< /tr>
< /table>

Formulaire
Formulaire : balise <form>
Toute page HTML peut être enrichie de formulaires interactifs, qui invitent vos
visiteurs à renseigner des informations : saisir du texte, sélectionner des options, valider
avec un bouton. . . tout est possible. Ceci (formulaire) se crée avec la balise form. En
attendant, nous avons un grand nombre de nouvelles balises HTML à découvrir.
Exemple
<h1> Mon formulaire < /h1>
<form>
<!– code de mon formulaire –>
< /form>

Formulaire
Comment manipuler les données du formulaire ?
On va prendre un exemple pour que les choses soient claires. Supposons que votre
visiteur vienne de taper un commentaire dans votre formulaire, par exemple un
message qu’il aimerait publier sur vos forums. Ce message doit être envoyé pour que
vous puissiez le recevoir et l’afficher pour vos autres visiteurs.
Problèmes
1 Comment envoyer le texte saisi par le visiteur ? Par quel moyen ?
2 Une fois que les données ont été envoyées, comment les traiter ? Souhaitez-vous
recevoir le message automatiquement par mail ou préférez-vous qu’un
programme se charge de l’enregistrer quelque part, puis de l’afficher sur une
page visible par tout le monde ?

Formulaire
Comment manipuler les données du formulaire ?

Réponses : ajout de deux attributs à la balise <form>
method : cet attribut indique par quel moyen les données vont être envoyées
(réponse au problème n˚1). Il existe deux solutions pour envoyer des données
sur le Web :
method=”get” : c’est une méthode en général assez peu adaptée car elle
est limitée à 255 caractères. La particularité vient du fait que les
informations seront envoyées dans l’adresse de la page (http://.\kern\
fontdimen3\font.\kern\fontdimen3\font.\kern\fontdimen3\font ;),
mais ce détail ne nous intéresse pas vraiment pour le moment. La plupart
du temps, je vous recommande d’utiliser l’autre méthode : post.
method=”post” : c’est la méthode la plus utilisée pour les formulaires car
elle permet d’envoyer un grand nombre d’informations. Les donné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 (réponse au problème n˚2). Cette page se chargera de vous
envoyer un e-mail avec le message si c’est ce que vous voulez, ou bien
d’enregistrer le message avec tous les autres dans une base de données. Cela ne
peut pas se faire en HTML et CSS, on utilisera en général un autre langage
dont vous avez peut-être entendu parler : PHP.

Formulaire
Élément du formulaire
Prenons un étudiant de IFNTI. Il a ses coordonnées qui sont nom, , date de naissance,
sexe, Nombre de frère et sœur, Tel, code secret et email. Et en plus il a des
informations personnelles par rapport à IFNTI (les UE validées et commentaire sur le
fonctionnement de IFNTI). Pour récupérer un champ, nous avons besoin de la balise
input. Et pour dire que c’est du texte qu’on veut récupérer, on donne la valeur text à
l’attribut type.
Exemple
<form method=”post” action=”traitement.php”>
<input type=”text”/ >
< /form>
Le résultat de ce code donne un champ de saisie seul. Pour avoir le libellé (Nom : ),
nous allons utiliser la balise label.
Exemple
<label> Nom < /label> : <input type=”text”/ >
< /form>

Formulaire
Nous voyons que, nous avons ce que nous voulons, mais pas totalement. Car pour
saisir, nous devons obligatoirement cliquer dans la zone de saisie. Pour avoir la
possibilité de saisir en cliquant sur le label, nous devons utiliser l’attribut for de la
balise label. Cet attribut doit avoir la même valeur que l’attribut id de la balise input.
Exemple
<label for=”nom”> Nom < /label> : <input type=”text” id=”nom”/ >
< /form>
Pour donner un nom à un élément du formulaire, on utilise l’attribut name de la balise

input. Sa valeur dépend de vous.
Exemple
<label for=”nom”> Nom < /label> : <input type=”text” id=”nom”
name=”nom”/ >
< /form>

Formulaire
Pour dire que ce champ est obligatoire, on utilise l’attribut required (sans valeur). Et
pour donner une indication sur le contenu qu’il faut écrire, on utilise l’attribut
placeholder.
Exemple
<label for=”nom”> Nom < /label> :
<input type=”text” id=”nom” name=”nom” placeholder=”Exemple : KOUMOI”
required/ >
< /form>

Formulaire
Même chose pour le champ de saisie prénom
Exemple
<label for=”nom”> Nom < /label> :
<input type=”text” id=”nom” name=”nom” placeholder=”Exemple : KOUMOI”
required/ >
<br/ >
<label for=”prenom”> Prenom < /label> :
<input type=”text” name=”prenom” id=”prenom” placeholder=”Exemple :
Azia” required/ >
< /form>
La balise <br/ > signifie aller à la ligne.

Formulaire
Maintenant nous devons récupérer la date de naissance de la personne. C’est la balise

input mais la valeur de l’attribut doit être date
Exemple
...
<label for=”dateNaissance”> Date Naissance < /label> :
<input type=”date” name=”dateNaissance” id=”dateNaissance” required/ >
< /form>

Formulaire
Pour le sexe, l’utilisateur ne fera qu’un seul choix parmi deux choses. Donc nous allons
utiliser les boutons radio.
Exemple
...
<input type=”radio” name=”sexe” id=”masculin” value=”Masculin”/ >
<label for=”masculin”> Masculin < /label>
<br/ >
<input type=”radio” name=”sexe” id=”feminin” value=”Feminin”/ >
<label for=”feminin”> Feminin < /label>
< /form>
La différence avec ce qu’on a déjà vu est que la valeur de l’attribut type est radio et
qu’on a un nouvel attribut qui est value avec pour valeur le nom du sexe.

Formulaire
Nombre de frère et soeur. La valeur de l’attribut type doit être number. Nous pouvons
limiter le nombre minimal à 0 et le nombre maximal 100
Exemple
...
<label for=”nombreFS”> Nombre de frères et sœurs < /label> :
<input type=”number” name=”nombreFS” id=”nombreFS”/ >
< /form>
Numéro de téléphone. La valeur de l’attribut type doit être tel
Exemple
...
<label for=”telephone”> Téléphone < /label> :
<input type=”tel” name=”telephone” id=”telephone”/ >
< /form>

Formulaire
Supposons que l’étudiant doit avoir un code secret. La valeur de l’attribut type doit
être password
Exemple
...
<label for=”code”> Password < /label> :
<input type=”password” name=”code” id=”code”/ >
< /form>
On suppose aussi que chaque étudiant à un e-mail. La valeur de l’attribut type doit
être email
Exemple
...
<label for=”email”> E-mail < /label> :
<input type=”email” name=”email” id=”email”/ >
< /form>

Formulaire
Vous remarquerez que lorsqu’on saisie une chose qui ne ressemble pas à un e-mail, le
navigateur dit que ce n’est pas un e-mail. Or nous n’avons pas écrit une ligne de
Javascript. C’était ce qui se faisait en HTML4. C’est une des raisons du choix de
HTML5.
Si nous remarquons bien les informations que nous voulons recupérer, elles sont
scindées en deux catégories :
les coordonnées de l’étudiant (c’est la partie qui est déjà faite)
les informations de l’étudiant par rapport à IFNTI (réalisation futur proche)
Pour que cette séparation soit visible sur le formulaire, on utilise la balise fieldset. Et
pour donner une légende (à peu près un titre), on utilise la balise legend
Exemple
<fieldset> <legend> Vos coordonnées< /legend> < /fieldset>
<fieldset> <legend> Vos informations par rapport à IFNTI < /legend>
< /fieldset>
< /form>

Formulaire
Les UE validées par l’étudiant. Ici, il est question de faire 0 ou plusieurs choix parmi
une multitude de chose. Donc ce sont des cases à cocher. Rien ne changer, sauf que la
valeur de l’attribut type doit être ”checkbox”.
Exemple
...
<fieldset>
<legend> Vos informations par rapport à IFNTI < /legend>
Cochez les UE que vous avez validées <br/ >
<input type=”checkbox” name=”dap” id=”dap”/ >
<label for=”dap”> DAP < /label>
<br/ >
<input type=”checkbox” name=”BD” id=”bd”/ >
<label for=”bd”> BD < /label>
<br/ >
<input type=”checkbox” name=”anglais” id=”anglais”/ >
<label for=”anglais”> Anglais < /label>
<br/ >
< /fieldset>
< /form>
Formulaire
Donner son avis sur le fonctionnement de IFNTI. L’avis peut être une ou plusieurs
phrases. Par conséquent il nous faut balise qui peut contenir plusieurs lignes. Cette
balise est textarea
Exemple
...
<fieldset>
<legend> Vos informations par rapport à IFNTI< /legend>
...
<label for=”avis”> Donner votre avis sur le fonctionnement de IFNTI < /label>
<textarea name=”avis” id=”avis”>< /textarea>
< /fieldset>
< /form>

Formulaire
Élément du formulaire : Bouton de validation et annulation

Il ne nous reste plus qu’à créer le bouton d’envoi. Nous utiliserons la balise input. Elle
existe en quatre versions :
type=”submit” : le principal bouton d’envoi de formulaire. C’est celui que vous
utiliserez le plus souvent. Le visiteur sera conduit à la page indiquée dans
l’attribut action du formulaire.
type=”reset” : remise à zéro du formulaire.
type=”image” : équivalent du bouton submit, présenté cette fois sous forme
d’image.
Rajoutez l’attribut src pour indiquer l’URL de l’image.
type=”button” : bouton générique, qui n’aura (par défaut) aucun effet. En
général, ce bouton est géré en JavaScript pour exécuter des actions sur la page.
Nous ne l’utiliserons pas ici.
Exemple
...
<input type=”submit” value=”Envoyer”/ >
<input type=”reset” value=”Annuler”/ >
< /form>

Audio/Vidéo
Insérer un audio sur son page web

Pour insérer un audio, on utilise la balise audio.
<audio src=”Banana-Alpha-Blondy.mp3”>< /audio>
Si vous testez ce code. . . vous ne verrez rien ! En effet, le navigateur va seulement
télécharger les informations générales sur le fichier (on parle de métadonnées) mais il
ne se passera rien de particulier. Vous pouvez compléter à la balise des attributs
suivants :
controls : pour ajouter les boutons Lecture , Pause et la barre de
défilement. Cela peut sembler indispensable, et vous vous demandez peut-être
pourquoi cela n’y figure pas par défaut, mais certains sites web préfèrent créer
eux-mêmes leurs propres boutons et commander la lecture avec du JavaScript.
width : pour modifier la largeur de l’outil de lecture audio.
loop : la musique sera jouée en boucle.
autoplay : la musique sera jouée dès le chargement de la page. Évitez d’en
abuser, c’est en général irritant d’arriver sur un site qui joue de la musique tout
seul !
preload : indique si la musique peut être préchargée dès le chargement de la
page ou non. Cet attribut peut prendre les valeurs :
auto (par défaut) : le navigateur décide s’il doit précharger toute la
musique, uniquement les métadonnées ou rien du tout.
metadata : charge uniquement les métadonnées (durée, etc.).
none : pas de préchargement.
Audio/Vidéo
Insérer une vidéo sur son page web

Pour insérer une vidéo, on utilise la balise video.
<video src=”tere-tere.mp4”>< /video>
Mais vous risquez d’être déçus si vous utilisez seulement ce code. Aucun contrôle ne
permet de lancer la vidéo. Rajoutons quelques attributs (la plupart sont les mêmes que
pour la balise <audio>) :
poster : image à afficher à la place de la vidéo tant que celle-ci n’est pas lancée.
Par défaut, le navigateur prend la première image de la vidéo mais, comme il
s’agit souvent d’une image noire ou d’une image peu représentative de la vidéo,
je vous conseille d’en créer une. Vous pouvez tout simplement faire une capture
d’écran d’un moment de la vidéo.
controls : pour ajouter les boutons Lecture , Pause et la barre de
défilement. Cela peut sembler indispensable, mais certains sites web préfèrent
créer eux-mêmes leurs propres boutons et commander la lecture avec du
JavaScript. En ce qui nous concerne, ce sera largement suffisant !
width : pour modifier la largeur de la vidéo.
height : pour modifier la hauteur de la vidéo.
loop : la vidéo sera jouée en boucle.
autoplay : la vidéo sera jouée dès le chargement de la page. Là encore, évitez
d’en abuser, c’est en général irritant d’arriver sur un site qui lance quelque chose
tout seul !
preload : indique si la vidéo peut être préchargée dès le chargement de la page
ou non. Cet attribut peut prendre les valeurs(même valeur qu’au niveau de la
balise audio) Sani KOUMOI MOUHAMAM 39 / 41
Liste récapitulatif des éléments de section HTML5

Nom Détails
Section générique regroupant un même
sujet, une même fonctionnalité, de
<section>
préférence avec un en-tête, ou bien sec-
tion d’application web
Section de contenu indépendante,
pouvant être extraite individuelle-
<article>
ment du document sans pénaliser sa
compréhension
Section possédant des liens de navigation
<nav> principaux (au sein du document ou vers
d’autres pages)
Section dont le contenu est un
complément par rapport à ce qui
l’entoure, qui n’est pas forcément
<aside>
en lien direct avec le contenu mais
qui peut apporter des informations
supplémentaires.

Liste récapitulatif des éléments de section HTML5
Nom Détails
Section d’introduction d’un article, d’une
<header> autre section ou du document entier (en-
tête de page).
Section de conclusion d’une section ou
<footer> d’un article, voire du document entier
(pied de page).

HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML

Transféré par

Droits d'auteur :

Formats disponibles

Traitement de Données Semi-Structurées - TDSS

Sani KOUMOI MOUHAMAM

Sani KOUMOI MOUHAMAM 4 / 41

Définition - Selon wikipedia, HTML c’est :

L’HyperText Markup Language, généralement abrégé HTML, est le langage de

Sani KOUMOI MOUHAMAM 5 / 41

Exemple de code HTML

Exemple de code XHTML

Sani KOUMOI MOUHAMAM 7 / 41

Définition - Selon wikipedia

Sani KOUMOI MOUHAMAM 8 / 41

Nouvelles API, nouveaux éléments et nouveaux attributs

Nouvelles API et Nouveaux éléments de HTML5

Nouvelles API, nouveaux éléments et nouveaux attributs

Nouveaux attributs de HTML5

Sani KOUMOI MOUHAMAM 10 / 41

Suppression de certains éléments et d’attributs

Élimination de certains éléments et d’attributs

Sani KOUMOI MOUHAMAM 11 / 41

Le rôle de HTML5 et Types de logiciels dans sa manipulation

Importance de HTML5 et Types de logiciels

Types de logiciels dans la manipulation de HTML5

Sani KOUMOI MOUHAMAM 12 / 41

Les paragraphes et les titres

Sani KOUMOI MOUHAMAM 13 / 41

Les paragraphes et les titres

<h4> < /h4> : titre encore moins important

Sani KOUMOI MOUHAMAM 14 / 41

Listes non ordonnées ou listes à puces

Listes ordonnées ou listes numérotées ou encore énumérations

Sani KOUMOI MOUHAMAM 17 / 41

Les autres types de liens

Autres types de liens

Sani KOUMOI MOUHAMAM 18 / 41

Insertion d’une image

Sani KOUMOI MOUHAMAM 20 / 41

La fusion de colonnes (La fusion horizontale) : On utilisera l’attribut colspan

La fusion de lignes (fusion verticale) : On utilisera l’attribut rowspan

Sani KOUMOI MOUHAMAM 22 / 41

Formulaire : balise <form>

Sani KOUMOI MOUHAMAM 23 / 41

Comment manipuler les données du formulaire ?

Sani KOUMOI MOUHAMAM 24 / 41

Comment manipuler les données du formulaire ?

Sani KOUMOI MOUHAMAM 25 / 41

Sani KOUMOI MOUHAMAM 26 / 41

Pour donner un nom à un élément du formulaire, on utilise l’attribut name de la balise

Sani KOUMOI MOUHAMAM 27 / 41

Sani KOUMOI MOUHAMAM 28 / 41

Même chose pour le champ de saisie prénom

Sani KOUMOI MOUHAMAM 29 / 41

Maintenant nous devons récupérer la date de naissance de la personne. C’est la balise

Sani KOUMOI MOUHAMAM 30 / 41

Sani KOUMOI MOUHAMAM 31 / 41

Numéro de téléphone. La valeur de l’attribut type doit être tel

Sani KOUMOI MOUHAMAM 32 / 41

Sani KOUMOI MOUHAMAM 33 / 41

Sani KOUMOI MOUHAMAM 34 / 41

Sani KOUMOI MOUHAMAM 36 / 41

Élément du formulaire : Bouton de validation et annulation

Sani KOUMOI MOUHAMAM 37 / 41

Insérer un audio sur son page web

Insérer une vidéo sur son page web

Liste récapitulatif des éléments de section HTML5