MODULE:
APPLICATIONS
HYPERMEDIA
Partie I: langage HTML 5
CFP Agadir Formateur: Adnan ET-TAYEB [email protected]
2 Sommaire
Introduction
Structure d’une page crée en HTML5
Mise en forme du texte
Les listes
Les liens
Les images et les figures
Les tableaux
Les formulaires
Les éléments audio et vidéo
Introduction
3
Le langage HTML :
HyperText Markup Language
A été inventé en 1991,
Permet de créer des sites web statiques,
Gère et organise le contenu des page web,
La dernière version de ce langage est HTML5.
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Structure de base d'une page HTML5
4
<! DOCTYPE html>
<html>
<head>
<!-- L'en-tête ici -->
<meta charset ="utf -8" />
<title >Titre </title >
</ head>
<body>
<!-- Le corps ici -->
</ body>
</ html>
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Structure de base d'une page HTML5
5
<! DOCTYPE html > indique qu'il s'agit bien d'une page web HTML5
Entre <html > et </html > on met le contenu de la page
Dans l’ L'en-tête: entre <head> et </head> on met les informations générales sur la
page comme
Son titre entre <title> et </title>
L'encodage (pour la gestion des caractères spéciaux):
<meta charset ="utf -8" />
Le corps de la page web est mis entre <body> et </body>
Entre <!-- et --> on met les commentaires
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Mise en forme du texte
6
<p> Paragraphe </p>
<br /> Sauter une ligne
<h1>titre très important </h1>
<h2> titre important</h2>
<h3> sous titre</h3>
<h4> titre moins important</h4>
<h5> titre encore moins important</h5>
<h6> titre pas important <h6>
<em> texte en italique</em>
<strong>texte important</strong>
<mark> texte pertinent (n’est pas, forcément, important) </mark>
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Les listes
7
<strong>Liste non ordonnée des langues</strong>
<ul>
<li>Arabe</li>
<li>Français</li>
<li>Anglais</li>
</ul>
<strong>Liste ordonnée des langages de programmation</strong>
<ol>
<li>C</li>
<li>C++</li>
<li>C#</li>
</ol>
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Les liens absolus et relatifs
8
<a href ="http :// www.site.com">lien vers www.site.com </a>
<a href ="page2.html">lien sur une page située dans le même dossier</a>
<a href =" nom_sous_dossier/page.html "> lien sur une page située dans le sous
dossier </a>
<a href =" ../page.html"> lien sur une page située dans le dossier parent </a>
<a href ="#introduction">Aller vers l' introduction </a>
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Les liens absolus et relatifs
9
<a href ="langage_html.html#introduction" title ="cours HTML">Aller vers l'
introduction au langage HTML </a>
L’attribut : title ="cours HTML" permet d’afficher une infobulle au survol du lien. Cette
infobulle contient l’information : "cours HTML"
<a href =" http :// www.site.com" target =" _blank “>lien qui ouvre le site
www.site.com dans une nouvelle fenetre</a>
<a href =" mailto : [email protected]">Envoyez - moi un email !</a>
<a href =" cours. zip">Télécharger le cours</a>
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Insérer des images et des figures
10
<img src=" dossier/nom_image.jpg" alt=" Description de l’mage " title = " Description
de l’mage " />
src=" dossier/nom_image.jpg " : Chemin absolu ou relatif vers l’image
alt=" Description de l’mage " : Indique un texte alternatif si l’image ne peut pas être
téléchargée.
title = " Description de l’mage " : Affiche une infobulle au survol de l’image
Si l’image n’apporte aucune information placez la dans un paragraphe, sinon placez la
dans une figure.
<figure >
<img src="chemin vers image1" alt= " texte alternatif" />
<img src="chemin vers image2" alt= " texte alternatif" />
<figcaption > Légende </ figcaption >
</ figure >
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Insérer un tableau
11
<table> <!– tableau de 2 lignes et 3 colonnes -->
<tr> <!– première ligne -->
<td>Cellule 11</td> <!– première cellule -->
<td>Cellule 12</td> <!– deuxième cellule -->
<td>Cellule 13</td> <!– troisième cellule -->
</tr>
<tr> <!– deuxième ligne -->
<td>Cellule 21</td>
<td>Cellule 22</td>
<td>Cellule 23</td>
</tr>
</table>
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Insérer un tableau
12
<table> <!-- tableau de 2 lignes et 3 colonnes -->
<tr> <!-- première ligne -->
<td colspan="2" >Cellules 11 et 12 fusionnées</td>
<!-- première et deuxième cellule de la ligne 1 fusionnées -->
<td rowspan ="2" >Cellule 13 et 23 fusionnées</td>
<!-- première et deuxième cellule de la colonne 3 fusionnées -->
</tr>
<tr> <!– deuxième ligne -->
<td>Cellule 21</td>
<td>Cellule 22</td>
</tr>
</table>
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Les formulaires
13
Un formulaire est une zone interactive de la page web, dans laquelle on peut
saisir des informations (nom, mot de passe, date de naissance, pays …).
<form method ="post" action ="page.php">
<!-- Label lié à la zone de texte ‘nom’ -->
<label for="nom">Votre nom </label>
<!-- Zone de texte pour saisir le nom -->
<input type ="text" name="nom" id="nom" placeholder="votre nom"
maxlength="10" size ="30" autofocus required />
<!-- Autres balises-->
</form >
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Les formulaires
14
method ="post" : Mode d'envoi des données
action="page.php" : Page vers laquelle on sera redirigé après cliquer sur le bouton
d’envoi du formulaire et qui traitera les informations.
id="nom" :L’identifiant du champ est ‘nom’
type ="text" :Le champ ‘nom’ est une zone de texte
maxlength="10" :La nombre maximal des caractères est 10
size ="30" :La taille du champ est 30
placeholder="votre nom": Indication sur le contenu du champ
autofocus : Dès le chargement de la page, le curseur se placera dans ce champ
Required : Indique au navigateur que ce champ est obligatoir
Pour donner une valeur par défaut au champ on utilise l’attribut: value ="valeur"
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Les formulaires
15
Zone de mot de passe
<input type ="password" name ="mdp" id="mdp" />
Zone de texte multiligne
<textarea name="name" id="id" rows ="2" cols="40" >Texte ici</textarea>
Case à cocher (un ou plusieurs choix)
<input type ="checkbox" name = "chb1" id= "chb1" checked="checked" />
<!-- Label lié à la case à cocher ‘cb1’ -->
<label for="chb1">Choix 1</ label >
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Les formulaires
16
Zone d’option (un seul choix)
<input type ="radio" name ="rd1" value ="options" id="option1" />
<label for="option1">Option 1</label >
<br />
<input type ="radio" name ="rd1" value ="options" id="option2" />
<label for="option2">Option 2</label >
Il faut mettre le même nom (name ="rd1") dans les deux options pour que le
navigateur sache qu’il s’agit d’un groupe.
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Les formulaires
17
Zone de sélection (liste déroulante)
<select name ="groupe" id="groupe">
<option value ="0">Veuillez choisir</ option >
<optgroup label="TDI"><!--groupe 1 -- >
<option value ="tdi11" selected="selected">TDI 1 A </ option >
<option value ="tdi12">TDI 1 B </ option >
</optgroup>
<optgroup label="TRI"><!--groupe 2 -- >
<option value ="tri11" selected="selected">TRI 1 A </ option >
<option value ="tri12">TRI 1 B </ option >
</optgroup>
</select >
L’attribut ‘value’ permet d’identifier le choix de visiteur.
L’option par défaut est l’option ayant l’attribut ‘selected’.
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Les formulaires
18
Zone de saisie d’une adresse E-mail
<input type="email" />
Zone de saisie d’une adresse absolue (URL)
<input type="url" />
Zone de saisie de numéro de téléphone
<input type ="tel" />
Zone de saisie des nombres
<input type="number" min="200" max="222" step="10" />
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Les formulaires
19
Zone de saisie d’une date
<input type ="date" />
Zone de saisie de l’heure
<input type ="time" />
Zone de saisie d’une semaine
<input type ="week" />
Zone de saisie du mois
<input type ="month" />
Zone de saisie de date et heure
<input type ="datetime" />
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Les formulaires
20
Champ de recherche
<input type ="search" />
Insertion d’un curseur
<input type=“range" min="200" max="222" value="210" step="10" />
Insertion d’un champ couleur
<input type ="color" value="#00FF00" />
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Les formulaires
21
Regroupement des champs d’un formulaire
<form method ="post" action ="page.php">
<fieldset>
<legend>Titre du groupe 1</legend>
Liste des champs du groupe 1
</fieldset>
<fieldset>
<legend>Titre du groupe 2</legend>
Liste des champs du groupe 2
</fieldset>
…
</form>
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Les formulaires
22
Les type des boutons:
Bouton pour exécuter des action sur la page (en JavaScript)
<input type ="button" value =" Valider " />
Bouton pour remettre le formulaire à zéro
<input type ="reset" value =" Annuler" />
Bouton pour envoyer les données à page indiquée dans l’attribut action
<input type ="submit " value =" Envoyer " />
Bouton d’envoie présenté sous forme d’image
<input type ="image" src ="nom de l’image" />
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Insertion d'un élément audio
23
<audio src="son.mp3" controls>
Ici on met un texte alternatif qui sera affiché si le navigateur ne comprend pas la
balise ‘audio’ ou le format ‘mp3’.
</audio>
L’attribut controls Permet d’ajouter les boutons Lecture , Pause et la barre
de défilement.
Utiliser cette deuxième méthode pour donner au navigateur la possibilité de
choisir automatiquement le format qu'il reconnaît.
<audio controls >
<source src="son.mp3" ></ source >
<source src="son.ogg" ></ source >
</audio>
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
Insertion d'un vidéo
24
<video src=" video. webm "
controls
poster =" video.jpg"
width ="600 ">
</ video >
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2020/2021
