HTML
HyperText Markup Language
2
Historique
` 1989-1992
1989 1992 : Aboutissant à un premier HTML (version 0)
` 1993 : HTML 1.0 et création du navigateur MOSAIC.
` 1995 : HTML 2.0 (insertion d’images, de tableaux, de listes
et de formulaires) puis HTML 3.0 (pas de consensus)
` 1996 : HTML 3.2 (liens sur images, applet Java, JavaScript)
` 1997 : HTML 4.0 (frames, feuilles de style, intégration de
documents multimédias))
`1999 : HTML 4.01; depuis 2000 XHTML prend la relève
2007 à nos jours : HTML5 et abandon du XHTML 2
3
Introduction
` HTML n’est pas un langage de programmation.
` C’est un langage descriptif qui décrit la structure et la
présentation des documents dans le Web.
` HTML est un hypertext, il est capable de relier des
documents entre eux.
` Ces documents peuvent être de même type (HTML) ou non.
` Ces liens peuvent se faire par le biais de protocoles identiques
(HTTP) ou d’autres comme FTP, NEWQ, etc.
4
HTML: Structure
` La structure générale d’un document HTML est la
suivante:
<HTML> : Tout document HTML commence par cette balise
<!-- Commentaire --> : Il est ignoré lors de la mise en forme
<HEAD>
text header - éléments décrivant et caractérisant le document
(typiquement le titre <TITLE> titre du document</TITLE>)
</HEAD>
<BODY>
text body - Le contenu du document,
document lequel peut être composé
de paragraphes, de titres, liens, etc.
/ O
</BODY>
</HTML>
5
HTML: Exemple1
<html>
<head>
<title> Mon premier document HTML</title>
</head>
<body>
Bonjour tout le monde !
</body>
</html>
6
HTML: Mise en Forme
Format titre <Hn> … </Hn> Formatage en titre
Stylees des ccaractèrres
avec n entre 1 et 6
Gras <B> … </B> Début et fin de zone
<STRONG> … en gras
</STRONG>
/STRONG
Souligné <U> … </U> Début et fin de zone
en souligné
Italique <I> … </I> Début et fin de zone
<EM> … </EM> en italique
Taille de caractère <FONT SIZE=?> Début et fin de zone
…</FONT> avec une taille (SIZE)
Rééglages des
entre 1 et 7
ccaractèrres
P li de
Police d caractère
tè <FONT FACE="?
FACE "? "> Début et fifin d
Déb de zone
…</FONT> en police
Couleur de <FONT Début et fin de zone
caractère COLOR="#$$$$$$"> en couleur
…</FONT>
7
HTML: Codage couleurs et polices
` Codage de quelque couleurs
Bleu #0000FF Vert #00FF00
Blanc #FFFFFF Violet #8000FF
Rouge #FF0000 Jaune #FFFF00
Gris clair #C0C0C0 Noir #000000
` Codage de quelque polices
Arial Arial Georgia Georgia
Arial Black Arial Black Impact Impact
Comic Sans MS Comic Sans MS Times New Roman Times New Roman
Courier New Courier New Trebuchet MS Trebuchet MS
8
HTML: Exemple2
<HTML>
<HEAD>
<TITLE> Deuxième Page HTML </TITLE>
</HEAD>
<BODY>
texte simple<BR>
<B>texte en gras</B> <BR>
<STRONG>texte en gras</STRONG> <BR>
<I>texte en italique</I><BR>
<EM>texte en italique</EM><BR>
<B><I>texte en gras et en italique</I></B> <BR>
<FONT SIZE=5>texte</FONT>
SIZE 5>t t </FONT>
<FONT COLOR="#0000FF">en bleu</FONT> <BR>
<FONT face="Arial Black">texte en Arial Black</FONT>
<! C'est
<!--C est fini-->
fini >
</BODY>
</HTML>
9
HTML: Mise en Forme
Au paragraphe <P> …. </P> Nouveau paragraphe
Réglaages des
A la ligne <BR> Aller à la ligne
paraggraphes
Alignement <DIV ALIGN=? > … Aligner: LEFT |
</DIV> CENTER | RIGHT |
JUSTIFY
Centrage <CENTER></CENTER> Centrer paragraphe et
même caractère
Changement de <BODY BGCOLOR=?> Modifier la couleur du
Réglaages
ond
couleur </BODY> fond
du Fo
Chargement d’une <BODY BACKGROUND Affichage d.une image
image ="url_image"> </BODY> comme fond de la page
Traçage d’un
T d’ <HR SIZE=?
SIZE ? WIDTH=?
WIDTH ? Tracer un trait à travers
Forrmatage
trait ALIGN=?> la page
Conservation de la <PRE> Conserver le formatage
mise en forme du texte délimité par
cette Balise
10
HTML: Mise en Forme
Liste non <UL> … </UL> Ouverture et fermeture d’une liste non
ordonnée ordonnée
Liste ordonnée <OL TYPE= ? Start= Ouverture et fermeture d’une liste
?> … </OL> ordonnée ,
- TYPE pour définir la numérotation, 1
pour chiffre, A (resp. a) pour
Strructuraation
alphabétique majuscule (resp.
minuscule), I (resp. i) pour romain
majuscule (resp. minuscule);
- START pour définir la valeur de départ
Elément de liste <LI> Affichage de l’élément de la liste
Liste descriptive <dl> - dl: Ouverture et fermeture de la liste
<dt> … </dt> (On nn'utilise
utilise pas la balise li pour les
<dd> … </dd> éléments)
</dl> - dt : Le terme à décrire
- dd: La description du terme
11
HTML: Exemple3
<HTML>
<HEAD> <TITLE> Example p de liste </TITLE> </HEAD>
<BODY>
<!– Liste non ordonnée-->
<UL>
<LI> Génie Informatique 1 </LI>
<LI> Génie Informatique 2 </LI>
<LI> Génie Informatique 3 </LI>
</UL>
<!—Liste ordonnée -->
<OL TYPE=I START=1>
<LI> Language
L C </LI>
<LI> JAVA </LI>
<LI> .NET </LI>
</OL>
</BODY>
</HTML>
12
Les liens
` Liens
Point d'ancrage <A NAME="***">...</A> Ceci est une cible
Lien vers une ancre <A HREF="#***">...</A> Lien vers la cible ***
dans la même page dans la même page
Lien vers une ancre <A HREF=
HREF="URL#***">
URL# >...</A>
</A> Lien vers la cible ***
dans une autre page dans une autre page
` C l
Couleurs
Couleur de lien <BODY LINK="#$$$$$$">
Lien visité <BODY VLINK="#$$$$$$">
Lien actif <BODY ALINK="#$$$$$$">
13
Les images
<IMG …> La balise principale des images
Src= "…" Précise la source et la source de l’mage
Alt =“… " Indique la hauteur et la largeur de l’image à afficher
width=? Indique la hauteur et la largeur de l’image à afficher
height=?
g ((en ppixels).
)
border=? par défaut, le navigateur affiche un cadre de 1 pixel
d'épaisseur autour de l'image. 0 signifie qu'il n'y a pas de
cadre (en pixels).
vspace/hspace=? Spécifie un espace entre l'image et le texte (en pixels).
align="left/center/right" Alignement de l’image sur la page
14
Les images
<HTML>
<HEAD> </HEAD>
<BODY>
<IMG src=“enis.gif“ border=5
align=center
width=130 height= 120
vspace=40 hpace=30>
</BODY>
</HTML>
15
Les tableaux
Définition du tableau <TABLE> Début et fin du tableau
</TABLE>
Définition d’une ligne <TR> </TR> Début et fin de la ligne
Définition d
d’une
une cellule <TD> </TD> Début et fin de cellule
<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
Bordure de cadre <TABLE border=?> </TABLE>
<TABLE
TABLE border=3>
b d 3
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
16
Les tableaux
L'espace entre les cellules ou <TABLE cellspacing=?>
l'épaisseur des lignes du quadrillage
L'enrobage des cellules ou <TABLE cellpadding=?>
l'espace entre le bord et le contenu
La largeur
g de la table <TABLE width=?> en ppixels
<TABLE width=%> en pourcentage
Largeur d'une cellule <TD width=?> en pixels
<TD width
width=%>
%> en pourcentage
Fusion de lignes <TD rowspan=?>
Fusion de colonnes <TD colspan=?>
17
Les tableaux
` Exemple1:
<CENTER><TABLE width=60% border=1>
<TR> <TD colspan=3>cellule 1</TD> </TR>
<TR> <TD width=33%>cellule 1</TD> <TD width=33%>cel 2</TD>
<TD width=34%>3</TD> </TR>
</TABLE></CENTER>
18
Les tableaux
` Exemple2:
<CENTER><TABLE width=60% border=1>
<TR>
<TD width=33% rowspan=2>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
id h 34%>3</TD>
</TR>
<TR>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
</TABLE></CENTER>
19
Les frames
` On utilise les frames pour diviser l'écran en plusieurs fenêtres
` Zone avec des fenêtres
<FRAMESET>Début de zone avec des fenêtres.
</FRAMESET>Fin de zone avec des fenêtres
` Agencement des fenêtres
<FRAMESET ROWS="...">Fenêtres horizontales
<FRAMESET COLS="...">Fenêtres verticales
` Remarque :
<FRAMESET></FRAMESET> remplace
<BODY></BODY>
Vous pouvez indiquer si la fenêtre doit ou non posséder une
b
barre d
de défilement.
défil <FRAME SCROLLING="yes/no/auto
SCROLLING " / /
20>
Les frames
<HTML>
<FRAMESET ROWS="25%,75%">
<FRAME SRC=“haut.html" NAME="haut">
<FRAMESET COLS="*,2*">
<FRAME SRC="gauche.html“ NAME="basgauche">
<FRAME SRC=“droite.html“ NAME="basdroite">
</FRAMESET>
</FRAMESET>
</HTML>
21
Les formulaires
Les formulaires peuvent prendre la forme :
d'une ligne de texte
d’une zone de texte
d’un bouton radio
de cases à cocher
d'un menu de sélection
Ils se décrivent entre les balises <FORM> </FORM>
22
Les formulaires: Ligne de texte
<INPUT TYPETYPE="text"
"t t" NAME="Nom
NAME "N du
d champ"
h " VALUE="texte
VALUE "t t
initial" SIZE=longueur …>
INPUT La balise principale du formulaire
TYPE="text" Préciser le type du texte. La valeur “texte”est la valeur par défaut.
(
(facultatif)
)
NAME Préciser le nom du champ (utile pour la programmation).
VALUE Donner un texte visible au champ.
SIZE Fixer la longueur visible du champ (éventuellement son contenu défile
vers la gauche).
MAXLENGTH Limiter le nombre de caractères pouvant être entrés dans le champ.
champ
23
Les formulaires: Ligne de texte
<HTML>
<BODY>
<FORM>
Texte à saisir : <INPUT type="text" name="nom"
SIZE="50" MAXLENGTH="50">
</FORM>
</BODY>
</HTML>
/HTML
24
Les formulaires: Mot de passe
` Lorsqu’il s'agit d'un mot de passe, on utilise le composant dont
l type est TYPE=PASSWORD.
le TYPE PASSWORD
<HTML>
<BODY>
<FORM>
` Code Entrez votre mot de passe :
` <INPUT TYPE="password" MAXLENGTH=5>
</FORM>
</BODY>
</HTML>
25
Les formulaires: Zone de saisie
<TEXTAREA NAME="..." ROWS= ... COLS= ...> Texte affiché par
défaut </TEXTAREA>
<TEXTAREA> … </TEXTAREA> Introduire une zone de texte multilignes et non
plus une simple ligne de texte.
NAME définir le nom de la zone du texte
ROWS Préciser le nombre de lignes de la fenêtre de
saisie.
saisie
COLS Préciser le nombre de colonnes.
26
Les formulaires: Zone de saisie
<HTML>
<BODY>
<FORM>
FORM
<TEXTAREA name="nom" rows=4 cols=40 >
Valeur par défaut</TEXTAREA>
</FORM>
</BODY>
</HTML>
27
Les formulaires: Liste de sélection
<SELECT> … </SELECT>Permettre un choix dans une liste de plusieurs options
présentées sous forme de liste déroulante.
NAME Définir le nom du formulaire.
SIZE Détermine le nombre d'éléments de liste affichée dans la
boite d'entrée.
size="1" est optionnel car "1" est la valeur par défaut.
<OPTION SELECTED> Sélectionner cette option par défaut
<SELECT MULTIPLE> Autoriser à sélectionner plusieurs options dans la liste
28
Les formulaires: Liste de sélection
` Exemple1
<FORM>
<SELECT name="nom" size="1">
<OPTION>lundi
<OPTION>
<OPTION>mardidi
<OPTION>mercredi
<OPTION>jeudi
OPTION jeudi
<OPTION>vendredi
</SELECT>
</FORM>
29
Les formulaires: Liste de sélection
` Exemple2
<FORM>
<SELECT name="nom" size="3">
<OPTION>lundi
<OPTION selected>mardi
<OPTION>mercredi
<OPTION >jeudi
<OPTION>vendredi
</SELECT>
</FORM>
30
Les formulaires: Bouton d’option
d option
` Les boutons d'option, aussi appelés boutons radio, ont comme
articularitéé qu'une
' seule option à la fois
f peut être
ê activéeé
(le "ou " exclusif).
<FORM>
<INPUT type="radio" name="nom du groupe" value="valeur du
bouton
bouton">
</FORM>
TYPE ="radio" Produire des boutons radio.
NAME="nom" Grouper l'ensemble des boutons avec le même nom.
VALUE " "
VALUE="..." Chaque bouton
Ch b t radio di doit
d it posséder
éd une valeur
l spécifique
é ifi
pour différencier les options.
CHECKED Permetre de présélectionner un bouton radio (optionnel).
31
Les formulaires: Bouton d’option
d option
<FORM>
<INPUT type= "radio" name="tarif" value="jour"> Tarif de jour
<INPUT
INPUT type= "radio"
" di " name="tarif"
" if" value="nuit">
l " i" T Tarif
if dde nuit
i
<INPUT type= "radio" name="tarif" value="week-end"> Tarif de
week end
week-end
</FORM>
32
Les formulaires : Case à cocher
<FORM>
<INPUT type="checkbox" name="nom" value="valeur attachée
au Bouton " CHECKED>
</FORM>
<TYPE ="checkbox"
checkbox > Produire une boite à cocher.
cocher
NAME=".." s'il y a plusieurs boites, chaque case doit avoir un
nom spécifique.
CHECKED Cocher par défaut la boite .
33
Les formulaires: Case à cocher
<FORM>
<INPUT type="checkbox" name="choix1" value="1"> glace vanille
<INPUT type="checkbox"
" " name="choix2"
" " value="2">
" " chantilly
<INPUT type="checkbox" name="choix3" value="3"> chocolat chaud
<INPUT type="checkbox"
" h kb " name="choix4"
" h i 4" value="4">
l "4"> bi
biscuit
i
</FORM>
34
Les formulaires: Bouton de commande
` Avec l'introduction des langages de scripts (Javascript et
VBscript)) l'usage
' du bouton de commande présente
é un intérêt
éê
certain
<FORM>
<INPUT type="button" name="nom" value= "Bouton de test"
onclick="alert('Test
onclick= alert( Test réussi !!')">
)>
</FORM>
35
Les formulaires : Submit et Reset
` Le bouton Submit a la tâche spécifique de transmettre toutes
les informations
f contenues dans le formulaire
f à l'URL
' désignée
é é
dans les attributs ACTION et METHOD du tag <FORM>.
<FORM>
<INPUT TYPE="submit" NAME="nom" VALUE="texte du bouton">
</FORM>
` Le bouton Reset permet d'annuler les modifications apportées
aux contrôles d’un
d un formulaire et de restaurer les valeurs par
défaut.
<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE="texte du bouton">
</FORM>
36
Exercice
37
Solution
38
