Ecole des Sciences de l’Information
Pr Boubker Sbihi
Année 2023
1
Plan
1. Introduction
2. Langage HTML
3. Listes
4. Tableaux
5. Cadres
6. Formulaires
2
Définition
Le Hypertext Markup Language est un
langage hypertexte de balisage créé et
utilisé pour écrire des pages Web.
3
Historique
4
Structure
Le HTML permet d'utiliser des marques de
début et de marques d'arrêt pour délimiter
une partie du texte.
La balise d'ouverture porte le même nom que
la balise de fermeture en lui ajoutant un /.
5
Exemple
Par exemple, pour délimiter un paragraphe,
on utilise :
Une balise d'ouverture <p>
Une autre de fermeture </p>.
6
Balises sans fermeture
Notons bien que certaines balises ne se
ferme pas comme :
La balise de retour à la ligne <br>
La balise d'image <img>
La balise de séparation horizontale <hr>
7
Fichier HTML
Une page HTML est un simple fichier texte avec
l’extension HTM ou encore HTML, contenant des
balises
Il ne fait pas la distinction entre les majuscules et les
minuscules comme c’est le cas pour le Java et le C.
C’est un document HTML qui se trouve toujours
entre les étiquettes <html> et </html>
Composition d’un Fichier HTML
Il se compose d'une balise HTML
<HTML> et </html>
Il se compose d'une tête
<HEAD>
........
</HEAD>
9
L’entête
La balise <head> </head> permet de définir
différentes informations comme :
Le titre est inclut entre <title> et </title>
○ Des informations de recensements : META,
○ Des fonctions javascript
○ Des feuilles de style (CSS).
10
Composition d’un Fichier HTML
D'un titre
<TITLE>
.......
</TITLE>
Et d'un corps
<BODY>
........
</BODY>
11
Première page HTML
<HTML>
<HEAD>
<TITLE>
< -- ! Exemple de commentaire - ->
Premier exemple d’un document HTML
</TITLE>
</HEAD>
<BODY>
Bonjour
</BODY>
</HTML>
12
Tailles en HTML
<h1> Titre 1
<h2> Titre 2
<h3> Titre 3
<h4> Titre 4
<h5> Titre 5
<h6> Titre 6
13
Mise en forme
<B> Gras
<I> Italique
<U> Souligné
<S> barré
<Sup> exposant
<Sub> indice
<BR> saut de ligne
14
La Balise Font
Elle possède trois attributs:
Size
Color
Align
15
La Balise HR
Le <HR>permet d’insérer des lignes
pour séparer des paragraphes.
16
Les attributs de HR
size : Epaisseur de la ligne
width : Largeur de la ligne
Align : Alignement : left - center - right
Noshade : Retire l'ombre
17
Les listes
Il existe trois types de listes :
Les listes non ordonnées
Les listes ordonnées
Les définitions
18
Les listes
Liste ordonnée
<ol>
<li> Lundi </li>
<li> Mardi </li>
</ol>
Liste non ordonnée
<ul>
<li> Lundi </li>
<li> Mardi </li>
</ul>
Définition
<dl>
<dt> Semaine </dt>
<dd> Lundi </dd>
<dd> Mardi </dd>
</dl>
19
Les listes
Liste ordonnée
<ol>
<li> Lundi </li>
<li> Mardi </li>
</ol>
Liste non ordonnée
<ul>
<li> Lundi </li>
<li> Mardi </li>
</ul>
Définition
<dl>
<dt> Semaine </dt>
<dd> Lundi </dd>
<dd> Mardi </dd>
</dl>
20
Liens hypertextes
Pour créer des Liens hypertextes, il faut définir le nom
du document dans la commande A HREF
Exemple distant :
<A HREF="http://www.google.com">Google</A>
Exemple local :
<A HREF="index.htm">Page d’accueil </A>
21
Liens hypertextes
Pour créer des Liens hypertextes, il faut définir le nom
du document dans la commande A HREF
Exemple distant :
<A HREF="http://www.google.com">Google</A>
Exemple local :
<A HREF="index.htm">Page d’accueil </A>
22
Signet
Pour créer un signet on doit ajouter le code
suivant à l’ endroit ou on veut créer un signet :
<a name="signet1">
Et puis lorsque je veux l’appeler je mets le code
suivant j’ajoute :
<a name="signet1" href="#signet1">
23
Exemple de code de Signet
<body><p>
<a name="signet1” href="#signet1">
Bonjour</a></p>
<p><a name="signet1"></a>Bonsoir</p>
</body>
24
Formats d’images
HTML donne la possibilité d'insérer
des images dans une page WEB.
Il y a deux formats très répandus sur
le WEB, il s'agit du JPEG et du GIF.
25
Insertion d’images
Pour inclure une image, on utilise cette étiquette
<IMG src="nom du fichier image.GIF>
Image </IMG>
Pour créer une rupture de ligne :
<BR clear=all>
26
Tableaux
Pour mettre les pages web en forme,
il faut utiliser les tableaux. Pour cela
on utilise quatre balises :
27
Tableaux
<table> : Cette balise permet de créer le tableau
<tr> : Ajout d'une ligne dans le tableau
<th> : Création d'une ligne de titre
<td> : Ajout d'une colonne dans le tableau
28
Code d’un Tableau
<table border=0 summary="">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>3</td>
</tr>
</table>
29
Fusionnement
Pour fusionner une ligne : rowspan
Pour fusionner une colonne colspan
30
Fusionnement
1
2 3 4
<table border=1>
5
<tr> <td colspan="3" align=center> 1</td> </tr>
<tr> <td rowspan="2" align=center>2</td>
<td align=center>3</td> <td align=center>4</td> </tr>
<tr> <td colspan="2" align=center>5</td> </tr>
</table>
31
Cadres
Les cadres permettent de diviser une fenêtre de navigateur en
plusieurs sous-fenêtres.
Chaque sous-fenêtre peut afficher un document HTML
diffèrent.
Un document qui définit des cadres n'a pas la partie BODY.
Cette partie est remplacée par la partie FRAMESET.
32
Cadres
<FRAMESET ROWS=« X%,Y%">
Pour fusionner la page en deux ligne avec X+Y=100%
<FRAMESET COLS =« X%, Y%, Z%">
Pour fusionner la page en trois colonnes avec X+Y+Z=100%
<FRAME NAME="Page" SRC=" fichier1.html">
Pour appeler la partie fusionnée
33
Cadres :exemple
<HTML>
<HEAD>
<TITLE> Exemple de cadres </TITLE>
</HEAD>
<FRAMESET ROWS="15%,*">
<FRAME NAME="Pageh" SRC=" fichier1.html">
<FRAMESET COLS ="35%, 35%, 30%">
<FRAME NAME="pageg" SRC="fichier2.html">
<FRAME NAME="pagec" SRC=" fichier3.html">
<FRAME NAME="paged" SRC="http://www.esi.ac.ma/index.html ">
</FRAMESET>
</FRAMESET>
</HTML>
34
Formulaires
Les formulaires sont un ensemble de champs (boutons radio,
cases à cocher, lignes de texte, champs de texte...) qui se
termine par un bouton de validation.
Ils permettent aux visiteurs de participer de façon active au
site qu'ils visitent.
En HTML, un formulaire se trouve entre les balises <form> et
</form>.
35
Formulaires
La balise HTML <FORM> doit contenir deux attributs
indispensables.
ACTION qui définit la destination où sont envoyées les donnés, en
règle générale c'est un script en javascript, php ou asp...
METHOD qui définit la méthode d'envoi (POST et GET).
<FORM> ne doit pas contenir une autre balise <FORM>.
Une page HTML peut contenir plusieurs formulaires.
36
Formulaires
La balise HTML <FORM> doit contenir deux attributs
indispensables.
ACTION qui définit la destination où sont envoyées les donnés, en
règle générale c'est un script en javascript, php ou asp...
METHOD qui définit la méthode d'envoi (POST et GET).
<FORM> ne doit pas contenir une autre balise <FORM>.
Une page HTML peut contenir plusieurs formulaires.
37
Formulaires
Comme exemple on utilisera l'attribut METHOD de type "post" et l'attribut
Nous l'écrirons :<FORM ACTION="mailto:[email protected]" METHOD="post"
ENCTYPE="text/plain">
ENCTYPE précise la méthode de codification (format d'envoi) qui va être utilisé
pour l'envoi en METHOD="POST".
"Text/plain" est la valeur qui doit être utilisé lorsque les informations sont
envoyées par courrier électronique, ce qui est le cas car l'action est de type
"mailto ".
38
Les radios
Le bouton radio permet de faire un choix sur un ensemble de
propositions ou plusieurs choix sur un ensemble de propositions.
Le bouton radio s'écrit :
<INPUT type="radio" name="nom" value="Nom_du_choix">
Type : définit la forme de la balise <INPUT> qui est une "radio".
Name donne le nom de la radio.
Value c'est la valeur de la sélection.
39
Exemple de radio
Comme exemple de 3 radios, on peut donner le code suivant :
<form action="index.htm " method="post">
<input type="radio" name="op1" value="francais"> francais<br>
<input type="radio" name="op1" value="anglais"> anglais<br>
<input type="radio" name="op1" value=
"arabe"> arabe<br>
</form>
40
Les Sélections : Listes
Le bouton radio permet de faire plusieurs choix sur un ensemble de
propositions.
Le bouton sélection commence par select et se termine par /select puis il faut
ajouter la balise option pour chaque sélection comme le montre le code suivant :
<SELECT name="Nom_selection" size="1" multiple>
<OPTION value="choix" > Choix 1 </option>
</select>
Name donne le nom de la sélection
Size détermine le nombre d'options visibles.
41
Exemple de Sélection
<SELECT name="Nom_selection" size="1" multiple>
<OPTION value="choix" > Choix 1 </option>
<OPTION value="choix" > Choix 2 </option>
<OPTION value="choix" > Choix 3 </option>
</SELECT>
42
Textes
Il existe deux types de champs de texte :
Le champ simple d'une ligne (type texte),
Le champ multi-lignes (type area).
43
Textes
Le code et le suivant pour inserer un texte :
<INPUT type="text" name="nom" value="Texte" size="5">
Type définit la forme de la balise <INPUT>, donc pour une zone de texte simple
et si type= "Passwd" le mot ne sera pas afficher sur l’écran.
Name donne un nom au champ texte.
Value définit le texte mis au départ dans le champ
Size correspond à la longueur du champ
44
Textes
<form action="index.htm " method="post">
Texte de type ligne de texte
<Input TYPE="text" NAME="text_input" VALUE="une ligne de texte">
Texte de type mot de passe
<Input TYPE="passwd" NAME="passwd_input" VALUE="mot de
passe">
</form>
45
Textes Areas
Les textes areas sont des textes ou on peut mettre un paragraphe
Comme exemple de 3 cases à cocher, on peut donner le code
suivant :
<TEXTAREA name="nom" cols="10" rows="2"></TEXTAREA>
COLS correspond à la longueur du champ (nombre de colonnes)
ROWS correspond à la hauteur du champ (le nombre de ligne).
46
Textes Areas
Comme exemple d’un texte area avec 10 colonnes et 3 lignes, on peut donner
le code suivant :
<TEXTAREA COLS=10 ROWS=3 NAME="textarea_input">
Ceci est un exemple d'un
espace de texte dont la largeur
est 40 caractères et
la longueur 5 lignes
</TEXTAREA>
47
Les checkbox
Il est important de faire la différence entre le bouton radio
et la case à cocher.
La case à cocher permet de faire plusieurs choix en
même temps.
48
Les checkbox
La case à cocher s'écrit :
<INPUT type="checkbox" name="nom" value="choix">
Type définit la forme de la balise <INPUT>, c'est "checkbox".
Name donne un nom à la case.
Value est la valeur de la sélection.
49
Les checkbox
Comme exemple de 3 cases à cocher, on peut donner le code suivant :
<INPUT TYPE="checkbox" NAME="Fr" VALUE="yes" checked>
Français
<INPUT TYPE="checkbox" NAME="An" VALUE="yes" checked>
Anglais
<INPUT TYPE="checkbox" NAME="Ar" VALUE="yes" checked>
Arabe
50
Les boutons
Dans un formulaire vous devez avoir obligatoirement deux
boutons.
Un bouton pour réinitialiser le formulaire :
<INPUT type="reset" name="nom" value="Rétablir">
Un bouton pour envoyer le formulaire :
<INPUT type="submit" name="nom" value="Envoyer">
51
Les boutons
Type définit pour ces deux boutons l'action à exécuter :
- reset pour réinitialiser
- submit pour envoyer.
52
Les boutons
Dans un formulaire, il ne peut y avoir qu'un seul bouton envoi et réinitialise.
Comme exemple de boutons avec HTML, on peut avoir :
<INPUT TYPE="submit" NAME="submit_input" VALUE="SUBMIT">
Bouton de type "remise à zéro"
<INPUT TYPE="reset" NAME="reset_input" VALUE="RESET">
Bouton de type "image"
<INPUT TYPE="image" NAME="image_input" SRC="http://imagr.gif ">
53
Exemple de formulaire
<html>
<head>
<title>Exemple formulaire </title>
</head>
<body>
<form method="POST“ submit=“code.asp”>
<p><input type="checkbox" name="C1" value="ON">case à cocher</p>
<p><input type="radio" value="V1" checked name="R1">Radio</p>
<p><select size="1" name="D1">
<option selected value="Element 1 ">Element 1</option>
<option>Element 2</option>
<option>Element 3</option>
</select> liste</p>
<p><input type="button" value="Bouton" name="B3"></p>
<p><input type="file" name="F1" size="20"></p>
<p><textarea rows="2" name="S1" cols="20"></textarea></p>
<p><input type="text" name="T1" size="20"><input type="submit" value="Envoyer" name="B1">
<input type="reset" value="Rétablir" name="B2"></p>
</form>
</body>
</html>
54
