Chaker BEN MAHMOUD
Introduction
Années 1990 : HTML est créé par Tim Berner-Lee au Centre
Européen de Recherche Nucléaire (CERN)
1995 : HTML 2.0 normalisation par l’IETF 1
1996 : HTML 3.2 ajout des tables, des applets (Java), etc.
1998 : HTML 4.01 ajout des feuilles de styles, des frames,
etc.
2000 : XHTML 1.0 reformulation de HTML 4 en XML 1.0
2002-2006 : XHTML 2.0 en cours de spécification
2008-maintenant : HTML5
Normalisation par le W3C depuis 1996.
Page 2
Principe de fonctionnement
Page 3
Principe de fonctionnement
Page 4
HTML
Page 5
Langages à balises
Page 6
Organisation d’une page HTML
Le contenu d’une page HTML est compris entre deux balises HTML
Une page HTML est composée de deux parties : ’HEAD’ et ’BODY’
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
Page 7
DOCTYPE
Permet au navigateur de savoir quelle version de HTML (ou
XHTML) est utilisée sur la page,
Obligatoire pour valider une page (validateur W3C)
Page 8
HTML
Permet de spécifier la langue de traitement du document
global
– Indexation dans la bonne langue par les moteurs de recherche
– Synthèse vocale
– Vérification orthographique des formulaires
Page 9
Head : entête
Détermine l’entête du document et contient les méta-informations
Page 10
Balise Meta
<meta charset="UTF-8"/> : permet de définir l’encodage de
caractère de la page (à mettre directement sous le <head>)
<meta name="description" content="description pour le
référencement"/>
=> affiché dans les résultats de recherche,
<meta name="author" content=""/>
<meta name="Keywords" content="motcle1, motcle3”/>
Page 11
Le corps : Body
<body>
informations qui vont s’afficher dans le
navigateur
</body>
Page 12
Le corps : Body
Élément bloc (div) : élément précédé et suivi d’un saut de ligne.
Il forme une boite dans lequel est inclus du texte ou d’autres
éléments. Exemples : les paragraphes, les tableaux, ...
Élément inline (span) : élément qui s’insère dans le fil du texte et
ne peut contenir que du texte ou d’autres éléments inlines.
Exemples : les éléments typographiques italique, gras, ...
Élément auto-fermant : élément qui est une balise ouvrante et
fermante à la fois. Elle n’a donc pas de contenu. Ce sont soit des
balises de type bloc, soit de type inline.
Syntaxe : <balise> ou <balise/>
Exemples : saut de ligne, séparation horizontale ...
Page 13
Balises avec des attributs
Dans certains cas, les seules balises ne suffisent pas. Il faut
généralement y ajouter des attributs.
• <tag attribute="value" >...</tag>
• <tag attribute="property:value;" >...</tag>
• <tag att1="v1" att2="v2" >...</tag>
Page 14
Comment organiser notre body
Page 15
Comment organiser notre body
Page 16
Comment organiser notre body
Page 17
Comment organiser notre body
Page 18
Comment organiser notre body
Lien pour télécharger un fichier :
<a href="monfichier.zip">Download</a>
Lien pour ouvrir une nouvelle fenˆetre :
<a href="http://enig.tn" target="_blank">cliquer ici</a>
Page 19
Comment organiser notre body
Page 20
Comment organiser notre body
Balise de formatage
Page 21
Comment organiser notre body
Page 22
Comment organiser notre body
Les Listes : Principe général
– Un élément liste contient des élément items
Listes classiques
– Liste à puces
• <ul> ... </ul> (unordered list) Liste ordonnée
• <ol> ... </ol> (ordered list) Item de list
• <li> ... </li>
– Liste de définitions
• Conteneur <dl> ... </dl>
• Terme de définition <dt> ... </dt>
• Description de définition (= définition elle-même) <dd> ... </dd>
Page 23
Comment organiser notre body
Page 24
Comment organiser notre body
Page 25
Comment organiser notre body
Page 26
Comment organiser notre body
<TABLE >
<CAPTION> Titre</CAPTION>
<TR>
<TH> Titre A1 </TH>
Titre
<TH> Titre A2 </TH>
<TH> Titre A3 </TH> Titre A1 Titre A2 Titre A3 Titre A4
<TH> Titre A4 </TH> Titre B1 Valeur B2 Valeur B3 Valeur B4
</TR>
<TR>
<TH> Titre B1 </TH>
<TD> Valeur B2 </TD>
<TD> Valeur B3 </TD>
<TD> Valeur B4 </TD>
</TR>
</TABLE>
Page 27
Comment organiser notre body
• On peut accompagner la balise <TABLE>
des attributs suivants pour jouer sur les
cellules:
•BORDER
•CELLSPACING
•CELLPADDING
•WIDTH , HEIGHT
•COLSPAN , ROWSPAN
•ALIGN , VALIGN
•BACKGROUND ,BGCOLOR
Page 28
Comment organiser notre body
• L’attribut BORDER permet de dessiner des bords
au tableau, valeur s’exprime en pixel
– si BORDER=0 bords invisibles à l’affichage
• Image d'arrière plan
– <TABLE background="nom_image">
• Couleurs du fond et des bords
– <TABLE bgcolor="couleur">
– <TABLE bordercolor="couleur">
• Positionnement du tableau dans la page
– <TABLE align="left|center|right">
Page 29
Comment organiser notre body
• Espacements
– Distance en pixels entre les bords et le contenu des
cellules
• <TABLE Cellpadding="nb_pixels">
– Distance entre les cellules du tableau en pixels
• <TABLE Cellspacing="nb_pixels">
<TABLE cellpadding =6
cellspacing =4>
<TR> <TD>ALI</TD>
<TD>LOTFI</TD>
</TR>
<TR> <TD>MED</TD>
<TD>YOSRA</TD>
</TR>
</TABLE>
Page 30
Comment organiser notre body
• fixer la taille du tableau
– par défaut, la taille est calculée par le navigateur
en fonction du contenu des cellules et de la taille
de la fenêtre
– Largeur fixée
• <TABLE width="nb_pixels ou %">
taille en pixels ou %par rapport à la fenêtre
– Hauteur fixée
• <TABLE height ="nb_pixels ou %">
Page 31
Comment organiser notre body
• Attributs communs aux lignes et cellules
– alignement horizontal du contenu dans une
cellule ou une ligne
• <TR align="left|center|right">…</TR>
• <TD align="left|center|right">…</TD>
– Couleurs d'arrière plan d'une cellule ou d'une
ligne
• <TR bgcolor="couleur ou #RRVVBB">..</TR>
• <TD bgcolor="couleur ou #RRVVBB">..</TD>
– Largeur et hauteur d'une cellule
• <TD width="pixels|%" height="pixels|%">
Page 32
Comment organiser notre body
Fusions de cellules
• Définit le nombre de colonnes sur lesquelles s'étend une
cellule
– <TD Colspan="nombre">…</TD> :
Nombre de cellules à fusionner sur une ligne
• Définit le nombre de lignes sur lesquelles s'étend une cellule
– <TD Rowspan="nombre">…</TD> :
Nombre de cellules à fusionner sur une colonne
• Ces fusions doivent être cohérentes par rapport au lignes et
colonnes du tableau
Page 33
Comment organiser notre body
Page 34
Les Formulaires
Les formulaires interactifs permettent aux auteurs de
pages Web de doter leur page web d'éléments interactifs
permettant par exemple 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,J2EE,…
<form method="post" action="traitement.php">
Page 35
Les Formulaires
<form method="post" action="traitement.php">
Trois éléments de base :
La balise INPUT : un ensemble de boutons et de champs de saisie
La balise TEXTAREA : une zone de saisie
La balise SELECT : une liste à choix multiples
Page 36
Les Formulaires
• La balise INPUT est la balise essentielle des
formulaires, car elle permet de créer un bon nombre
d'éléments "interactifs".
• La syntaxe de cette balise est la suivante :
<INPUT type ="Nom champ" value ="Valeur défaut"
name ="Nom de l'élément" >
• L'attribut type permet de préciser le type d'élément
que représente la balise INPUT, voici les valeurs
que ce champ peut prendre : text, Checkbox,
hidden, file, image, password, radio, reset, submit
Page 37
Les Formulaires
• La balise <input type="text" ... > permet à l'utilisateur de
saisir une ligne de texte. Elle a les attributs suivants :
Name : Définit le nom de la donnée (obligatoire)
Size : Définit la taille visible du champ en nombre de
caractères
Maxlength : Taille maximale de caractères autorisés
Value : Définit le texte par défaut à l'intérieur du champ
• A noter que la valeur type peut avoir plusieurs valeurs
dont: Password : Code secret
• Exemple d'un champs de saisie et son code source :
<input type ="text" name = "Uti"
size =40 maxlength =40 value ="vide" >
Page 38
Les Formulaires
Exemple :
• <input type=“checkbox” name=”choix” value=”cas1”> Cas 1
• <input type=“checkbox” name=”choix” value=”cas2”> Cas 2
• <input type=“checkbox” name=”choix” value=”cas3”> Cas 3
• <input type=“Radio” name=”choix1” value=”cas1”> Cas 1
• <input type=“Radio” name=”choix1” value=”cas2”> Cas 2
• <input type=“Radio” name=”choix1” value=”cas3”> Cas 3
Page 39
Les Formulaires
<select name="liste">
<option value="Choix 1"> Choix 1 </option>
<option value="Choix 2" Selected> Choix 2
</option>
<option value="Choix 3"> Choix 3 </option>
</select>
<select name="liste" size =3 multiple>
<option value="Choix 1"> Choix 1 </option>
<option value="Choix 2" Selected> Choix 2
</option>
<option value="Choix 3"> Choix 3 </option>
</select>
Page 40
Les Formulaires
• La soumission (envoyer) ou la remise à zéro
(recommencer) d'un formulaire se fait, une fois de
plus, avec la balise <input> type, ayant ici deux
autres valeurs :
submit : Envoi le formulaire vers le serveur
reset : Remet à zéro les choix du formulaire
• Les légendes inscrites sur les boutons peuvent être
modifiées avec l'attribut value.
<input value="Envoyer" type="submit">
Page 41
Les Formulaires
Page 42
Les Formulaires
HTML5
Les listes de données (datalist) = liste déroulante + zone de saisie
Page 43
Les Formulaires
Les listes déroulantes (le regroupement) :
Page 44
Les Formulaires
Page 45
Les Formulaires
• L’élément <fieldset>...</fieldset> permet de définir un
regroupement dans un formulaire.
• L’élément <legend>...</legend> permet de donner une légende à
un fieldset.
• L’élément <label>...</label> permet de définir une étiquette.
• Attribut for indique champs décrit (attribut id)
• Utile sur les radio et checkbox : augmente la surface
d’activation
Page 46
Les Formulaires
Page 47
Les Formulaires
Page 48
Les fichiers audios
La balise <audio> définit un flux ou streaming audio(musique).
Attribut Valeur Description
autoplay autoplay Indiquez si la lecture doit se lancer automatiquement
Indiquez si les boutons de controls (lecture, arret …) doivent
controls controls
apparaitre
Indiquez si le fichier doit redémarrer (boucle) lorsque sa lecture
loop loop
est terminé
Auto, none
preload Indiquez si et comment les fichiers seront pré-chargés
metadata
src url Indiquez l’adresse de voter fichier audio
Page 49
Les fichiers videos
La balise <video> définit un flux ou streaming vidéo(film).
Attribut Valeur Description
autoplay autoplay Indiquez si la lecture doit se lancer automatiquement
Indiquez si les boutons de controls (lecture, arret …) doivent
controls controls
apparaitre
Indiquez si le fichier doit redémarrer (boucle) lorsque sa lecture
loop loop
est terminé
Auto, none
preload Indiquez si et comment les fichiers seront pré-chargés
metadata
src url Indiquez l’adresse de voter fichier audio
Page 50
