HTML

Le langage HTML
Sommaire général
Chapitre 1 : Introduction
Chapitre 2 : Mise en forme
Chapitre 3 : Les liens
Chapitre 4 : Les images
Chapitre 5 : Les tableaux
Chapitre 6 : Les formulaires
2
Chapitre I : Introduction
 I.1 Principes de publication
 I.2 Concepts fondamentaux
 I.3 Navigateurs
 I.4 L’HTML
 I.5 Les balises
 I.6 Conseils et conventions
 I.7 Comment faire?
 I.8 Syntaxe
 I.9 Les extensions
3
Les bases
Principes de publication
Concepts fondamentaux
Navigateurs
L’HTML
I.1: Principes de publication Les balises

Conseils et conventions
Comment faire?
Syntaxe
 Un site est Les extensions
• Réalisé par un concepteur

• Hébergé sur un serveur
• Consulté par des utilisateurs
 Le site est déposé par le concepteur chez l’hébergeur
 Site web : ensemble de pages web
 Page web : un document HTML+ documents utilisés (ex:
images, sons, vidéo, etc.)
Conception d’un site = réalisation d’un ensemble de pages

connectées entre elles par des liens hypertextes
4
Les bases
L’HTML
Navigateurs
I.2: Concepts fondamentaux Les balises

Comment faire?
Syntaxe
Les extensions
 HTML est le langage du web. 2 concepts
 se cachent derrière HTML :
• Hypertexte : façon d’inter-relier des documents
multimédias
• Balises: façon d’indiquer le formatage des éléments
Mise en forme décrite par des fichiers de style CSS

5
Les bases
L’HTML
Navigateurs
I.3: L’HTML Les balises

Comment faire?
Syntaxe
Les extensions
 HTML : HyperText Markup Language

 Langage de description de pages web
 Un document HTML est
• un fichier texte, construit suivant une syntaxe précise
• structuré par des balises
• interprété (visualisé) dans un navigateur (Mozilla Firefox, Internet
Explorer, Safari, etc.)
• créé dans un éditeur de pages web (FrontPage, Dreamweaver,…) ou
tout éditeur de texte (bloc-notes, wordpad, jedit)
6
Les bases
L’HTML
Navigateurs
I.3: L’HTML Les balises

Comment faire?
Syntaxe
Les extensions
Code HTML Page Web
Pour voir le code HTML d'une page :

Menu Affichage / Code source
7
Les bases
L’HTML
Navigateurs
I.4: Navigateurs Les balises

Comment faire?
Syntaxe
 Logiciel destiné à consulter des pages du web : Firefox, Safari, Les extensions
 Internet Explorer…
 Ils savent lire les documents html ou htm, et éventuellement adapter l’affichage
aux différents media :
• Moniteurs (écran), Imprimante, etc.
• Code source HTML (idéal pour apprendre les techniques des autres)

 Que fait un navigateur qui rencontre un document d’un type inconnu ?
• Il recherche un plugin <=> une extension lui apprenant à ouvrir ce type de
fichier
• Ou il exécute l’application qui correspond
 Pour faire votre site web :
• Il faut un hébergeur pour avoir un serveur web
• Un logiciel d’édition de texte
• Un logiciel FTP (File Transfer Protocol) client (ou SSH comme putty) pour
communiquer avec le serveur (avec ssh de manière sécurisée)
8/34
Les bases
L’HTML
Navigateurs
I.5: Les balises (ou tags) Les balises

Comment faire?
Syntaxe
Les extensions
 Une balise est un mot clé encadré par 2 chevrons

 < et > et Correspondent à des informations sur la page web ou sur
une zone de la page
 La plupart des balises vont par paire:
• La balise initiale
• La balise terminale (la même que celle du début, mais le chevron
< est remplacé par </ )
 Exemple: <HEAD></HEAD>
 Certaines balises initiales renferment des valeurs particulières,
appelées attributs, qui précisent des paramètres
 Exemples:
• <a href="http://www.developpez.com/"></a>
• <img src=« logo.jpg">
 Zone d'action de la balise : entre la balise ouvrante et la balise
fermante
9
Les bases
L’HTML
Navigateurs
I.6: Conseils & conventions Les balises

Comment faire?
Syntaxe
 Document HTML = document échangé sur Internet Les extensions
• Penser à la taille :
• du fichier HTML !
(plus il est gros, plus cela prend de temps de transfert)
• des éléments présents dans le fichier (images, sons,
vidéos, …)
 Lisibilité (pour faciliter la maintenance)

• Indenter les lignes
• Balises HTML en majuscules pour mieux les distinguer du
corps du texte.
10
Les bases
L’HTML
Navigateurs
HTML : Exemple à ne pas suivre Les balises

Comment faire?
Syntaxe
Les extensions
<html><head><title>Exemple de fichier HTML</title></head>

<body><h1>Exemple de fichier HTML</h1>
<p>Ceci est un exemple de fichier <a
href="http://www.w3c.org/HTML">HTML</a></p>
Un fichier HTML peut contenir :
<ul>
<li>le texte destin é à être lu;
<li>des indications de formatage :
<ol>
<li> caractès <b>gras</b>, <i>italiques</i>, ...
<li> niveaux de sections,
<li> listes, ...
</ol>
<li>des liens <A HREF="essai.html">hypertextes</a> (ancre + URL) ;
<li>des incrustations d'images
<img src="http://www.univ-metz.fr/ulogo.gif" align=middle>
</ul>
</body>
</html>
11
Les bases
Structures principales d’un document Concepts fondamentaux

L’HTML
Navigateurs
HTML Les balises

Comment faire?
Document HTML Syntaxe

Les extensions
 <HTML>
<HEAD>
 <TITLE>Exemple de document HTML</TITLE> Entête
 </HEAD>

 <BODY>
 <H1>Mon 1er document HTML</H1>
Corps
 <P>
 Ceci est un document HTML avec un lien hypertexte sur mon
 <A HREF="http://www.univ-evry.fr/">Université</A>.
 </P>
 </BODY>
 </HTML>
12
Les bases
L’HTML
Navigateurs
I.7: Comment faire ? Les balises

Comment faire?
Syntaxe
Les extensions
 Un simple éditeur de texte permet de créer une page
 On sauvegarde la page avec l’extension .html ou .htm
 Ensuite on l’ouvre, « à côté » avec un navigateur
 Puis on commence le cycle édition/correction :
• Modifier/éditer la page
• L’afficher,
• Recommencer jusqu’à satisfaction
 Remarque : certain éditeur de textes peuvent fournir un mode
spécial d’édition pour les pages HTML et il existe de nombreux
éditeurs spécialisés pour HTML .
 Remarque : ne pas utiliser Microsoft Word pour générer de
pages HTLM ; le code généré est immonde
13
Les bases
L’HTML
Navigateurs
I.8 : syntaxe générale Les balises

Comment faire?
Syntaxe
 <HTML> ‘ début d’un document Html Les extensions
</HTML> ‘ fin d’un document Html

<HEAD> ‘ début de la zone d’en tête
</HEAD> ‘ fin de la zone d’en tête
<TITLE> ‘ début du titre de la page
</TITLE> ‘ fin du titre de la page
<BODY> ‘ début du document proprement dit
</BODY> ‘ fin du document proprement dit
 Les balises ne sont pas sensibles à la casse : <HTML>
équivalent à <Html> qui est équivalent à <html>
 Commentaires : 
14
Les bases
L’HTML
Navigateurs

Comment faire?
Syntaxe
 A vous de jouer : Les extensions
• Ouvrez le bloc notes et tapez ces lignes :

Voir résultat
• <HTML>
<HEAD>
<TITLE>Document Html minimum</TITLE>
</HEAD>
<BODY>Hello world !</BODY>
</HTML>
• Enregistrez le document avec l’extension .Html ou .Htm
• Ouvrez le navigateur
• Afficher le document avec le menu Fichier/Ouvrir
• Observez le résultat
15
Les bases
L’HTML
Navigateurs

Comment faire?
Syntaxe
 Tag <BODY> : Les extensions
• la couleur de fond : BGCOLOR="#RRVVBB"

• la couleur du texte : TEXT="#RRVVBB"
• la couleur des liens : LINK="#RRVVBB"
• la couleur des liens lors de sélections :
VLINK="#RRVVBB"
• la couleur des liens déjà visités : ALINK="#RRVVBB "
• Image en fond : BACKGROUND="image.gif"
16
Les bases
L’HTML
Navigateurs
I.9 : les extensions Les balises

Comment faire?
Syntaxe
 L’extension indique à l’ordinateur que c’est Les extensions
une page web

 Quelques extensions :
• .htm
• .html
• .asp : Active Server Page (nécessite un serveur web)
• .php3,.php4,.php : pour les pages en PHP (nécessite un
serveur web)
 Page d’accueil : index.html ou index.htm
17
Chapitre II : Mise en forme
 II.1 Les caractères
 II.2 Les paragraphes
 II.4 Les titres
 II.5 Les listes
 II.6 Division graphique
18
Mise en forme
Le s caractères
Les paragraphes
II.1 Les caractères

Les titres
Les listes
Division graphique
Les styles
Gras : <B> … </B>
Italique : <I> ... </I>
Souligné : <U> … </U>
Taille de la police par défaut

Possibilité de fixer la taille de police d’une page web
<BASEFONT SIZE="taille"> (avec 1  taille  7)
Si cette balise n'est pas utilisée, la taille par défaut des

caractères est fixée à 3.
19
Mise en forme
Le s caractères
Les paragraphes

Les titres
Les listes
Division graphique
Spécification d’une police locale

<FONT FACE="police1[,police2,…] SIZE="s|+s|-s"
COLOR="#RRVVBB"> ...
</FONT>
FACE : la première police installée est utilisée.

Ne proposer que des polices dont on est sûr qu'elles sont
disponibles sur l'ordinateur de consultation :
Arial/Helvetica
Times New Roman/Times
SIZE : taille de la police

1 … 7 (taille absolue)
+1, +2... (taille relative par rapport à la valeur par défaut)
20
Mise en forme
Le s caractères
Les paragraphes

Les titres
Les listes
Division graphique
Remarque sur les balises <FONT>

Elles peuvent être imbriquées :
<FONT SIZE="..."> …
<FONT SIZE="... ">
...
</FONT>
...
</FONT>
Permet de changer des paramètres ponctuellement

(couleur ou taille)
21
Mise en forme
Le s caractères
Les paragraphes

Les titres
Les listes
Division graphique
Exemple 1 :
<HTML>
<HEAD>
<TITLE>Partie 2 - Exemple 1 : texte en gras</TITLE>
</HEAD>
<BODY>
Boire ou <b>conduire</b>il faut <b>choisir</b>
</BODY>
</HTML>
Exemple 2 :
<HTML>
<HEAD>
<TITLE>Partie 2 - Exemple 3 : texte souligné</TITLE>
</HEAD>
<BODY>
<u>Boire</u> ou <u>conduire</u> il faut choisir
</BODY>
</HTML>
22
Mise en forme
Le s caractères
Les paragraphes

Les titres
Les listes
Division graphique
Exemple 3 :
<HTML>
<HEAD>
<TITLE>Partie 2 - Exemple 4 : tag font-couleur</TITLE>
</HEAD>
<BODY>
Test de couleur du tag font (en vert)
<font color=“green”> avec les noms</font>
<font color=“#00FF00” > en hexadécimal</font>
</BODY>
</HTML>
Exemple 4 :
<HTML>
<HEAD>
<TITLE>Partie 2 - Exemple 6 : tag font-police</TITLE>
</HEAD>
<BODY>
<font face=Arial>Texte en Arial</font><br>
<font face=Comic Sans MS>Texte en Comic Sans MS </font><br>
<font face=Verdana>Texte en Verdana</font><br>
<font face=Arial,Verdana,Comic Sans MS>Plusieurs polices au cas ou …</font><br>
</BODY>
</HTML>
23
Mise en forme
Le s caractères
Les paragraphes
II.2 Les paragraphes

Les titres
Les listes
Division graphique
<CENTER> … </CENTER>
Centre les éléments inclus entre la balise ouvrante et la
balise fermante
<JUSTIFY> … </JUSTIFY>
Justifie les éléments inclus entre la balise ouvrante et la
balise fermante
À utiliser avec prudence !
<BR>
Pas de balise fermante !
Retour à la ligne
<BR><BR> : 2 retours à la ligne = 1ligne d'espacement
24
Mise en forme
Le s caractères
Les paragraphes
II.2 Les paragraphes

Les titres
Les listes
Division graphique
<P ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"> … </P>
Alignement des paragraphes situés

<P ALIGN=…> et </P>
Pour passer (ou sauter) une ligne, utiliser des <BR>
Possibilité d’utiliser une balise ouvrante SANS balise fermante

<P>
équivaut à <BR><BR>
Autre équivalence :
<P ALIGN="CENTER"> ... </P>
équivaut à <CENTER> </CENTER>
25
Mise en forme
Le s caractères
Les paragraphes
II.2 Les titres

Les titres
Les listes
Division graphique
<H1> … </H1>, <H2> … </H2>, <H3> … </H3>,

<H4> … </H4>, <H5> … </H5>, <H6> … </H6>
Titres de différents niveaux

<H1> : titre de 1er niveau, affichage le plus grand
<H2> : un peu plus petit
… : de plus en plus petit, jusqu’à
<H6> : titre du plus petit niveau
Remarques
De moins en moins usité
Utilisation des mises en forme de paragraphe pour réaliser la
même chose
26
Mise en forme
Le s caractères
Les paragraphes
II.2 Les listes

Les titres
Les listes
Division graphique
<UL> ... </UL>

Marqueur de début et de fin d’une liste à puces
<OL> ... </OL>
Marqueur de début et de fin d’une liste numérotée
<LI>
Marqueur des éléments d’une liste
Pas de balise fermante !
Provoque l'affichage d’une puce ou d’un chiffre selon le contexte
Remarque
Les listes sont imbriquables
27
Mise en forme
Le s caractères
Les paragraphes
II.2.1 Option des listes à puces

Les titres
Les listes
Division graphique
Forme de la puce
Suivant le niveau d'imbrication, les puces sont différentes
Par défaut, on obtient :
 pour le 1er niveau (le 4ème, le 7ème, …)
 pour le 2ème (le 5ème, le 8ème, …)
 pour le 3ème (le 6ème; le 9ème, …)
Option TYPE="disc|circle|square" dans <UL>

Permet de choisir la forme de la puce
Taper les valeurs en minuscules !
Internet Explorer ne les applique pas si elles sont tapées en
majuscules : - (
28
Mise en forme
Le s caractères
Les paragraphes
II.2 Les listes

Les titres
Les listes
Division graphique
Exemple 5 :
<HTML>
<HEAD>
<TITLE>Partie 2 - Exemple 15 : modification des puces</TITLE>
</HEAD>
<BODY>
<ul>
<li> Introduction
<li type="disc"> Mise en forme
<li type="square"> Les images
<li type="circle"> Trucs et astuces
</ul>
</BODY>
</HTML>
29
Mise en forme
Le s caractères
Les paragraphes
II.2.2 Option des listes numérotées

Les titres
Les listes
Division graphique
Option START="NombreDeDépart" dans <OL>

Permet de démarrer la numérotation à une valeur spécifique
(NombreDeDépart) autre que 1
Option TYPE="i|I|a|A|1" dans <OL>

Permet de changer le type de numérotation :
i  chiffres romains minuscules i, ii, iii, iv, ...
I  chiffres romains majuscules I, II, III, IV, ...
a  lettres minuscules a, b, c, d, ...
A lettres majuscules A, B, C, D, ...
1  chiffres arabes (option par défaut) 1, 2, 3, 4, ...
30
Mise en forme
Le s caractères
Les paragraphes
II.2.3 Les listes descriptives

Les titres
Les listes
Division graphique
ASCII
jeu de caractères qui assigne des valeurs numériques
standard aux lettres, chiffres et signes de ponctuation
EPS
format de description de fichiers PostScript
 <dl> : ouvre une liste descriptive et englobe :

• <dt> : item (doit être < une ligne)
• <dd> : description de l’item
31
Mise en forme
Le s caractères
Les paragraphes
II.2.3 Les listes descriptives

Les titres
Les listes
Division graphique
Exemple :
Voir résultat
<HTML>
<HEAD>
<TITLE>Partie 2 - Exemple 17 : listes descriptives</TITLE>
</HEAD>
<BODY>
<dl>
<dt>ASCII</dt><dd>jeu de caractères qui assigne
des valeurs numériques standard aux lettres, chiffres et
signes de ponctuation </dd>
<dt>EPS</dt><dd>
format de description de fichiers
PostScript </dd>
</dl>
</BODY>
</HTML>
32
Mise en forme
Le s caractères
Les paragraphes
Les titres
II.3 Division graphique Les listes

Division graphique
<HR SIZE="s"
WIDTH="w|w%"
ALIGN="LEFT|CENTER|RIGHT"
COLOR="#RRVVBB"
NOSHADE >
SIZE : épaisseur en pixel de la ligne
WIDTH : largeur de la ligne.

Peut s'exprimer en valeur absolue (pixels) ou en valeur
relative (pourcentage de la largeur de la fenêtre)
ALIGN : alignement à gauche|au centre|à droite dans la fenêtre (à

utiliser si la ligne ne fait pas toute la largeur de la fenêtre)
33
Mise en forme
Le s caractères
Les paragraphes
Les titres
II.3 Division graphique Les listes

Division graphique
<HR>
Utilisée sans option, cette balise produit une ligne grise
ombrée de 1 pixel d'épaisseur faisant toute la largeur de la
fenêtre
Attention, options particulières à certains navigateurs !
COLOR="#RRVVBB"
Option valable avec Internet Explorer
Permet de spécifier la couleur de la ligne
NOSHADE
Option valable avec Netscape
Permet de désactiver l'ombrage de la ligne
34
Chapitre III : Les liens
 III.1 Introduction
 III.2 Syntaxe
 III.3 Les attributs d’un lien
 III.4 Les ancres
 III.5 Appels de fichiers
35
Les liens
Introduction
Syntaxe
Attributs d’un lien
III.1 : Introduction Les ancres

Appels de fichiers
http://.../accueil.html
Accueil
Bla bla …
Menu
http://.../accueil.html + Accueil
http://.../cours.html + Cours
http://.../cv.html + CV
http://.../recherche.html
+ Recherche
http://.../liens.html
+ Liens
temps
36
Les liens
Introduction
Syntaxe
III.2 : Syntaxe Les ancres

Appels de fichiers
 Syntaxe Html :
Voir résultat
• <a href="monfichier.html">Mon lien</a>
• Tag <a>, </a>
Exemple 1 :
<HTML>
<HEAD>
<TITLE>Partie 3 - Exemple 1 : les liens</TITLE>
</TITLE>
</HEAD>
<BODY>
<a href="test.html">Lien vers test</a>
</BODY>
</HTML>
37
Les liens
Introduction
Syntaxe
III.3 : les attributs d’un lien Les ancres

Appels de fichiers
 href : chemin d’accès de la page à

appeler
 title : le texte qui apparaît dans l’info bulle
 target : définit la cible de la page
 style : définit le style du lien grâce aux feuilles

de style
 autres arguments avec Javascript
38
Les liens
Introduction
Syntaxe
III.4 : les attributs d’un lien Les ancres

Appels de fichiers
Voir résultat
Exemple 2 :
<HTML>
<HEAD>
<TITLE>Partie 3 - Exemple 2 : les attributs</TITLE>
</TITLE>
</HEAD>
<BODY>
<a href="test.html title"=“lien vers test.html”
target=_blank style=text-decoration:overline>
Lien vers test</a>
</BODY>
</HTML>
39
Les liens
Introduction
Syntaxe
III.5 : les ancres internes Les ancres

Appels de fichiers
 définit un lieu précis dans une page

 Syntaxe : <a name=“monancre”></a>
• lien vers une ancre : <a href=“#monancre”>Cliquez

ici pour rejoindre l’ancre</a>
• Toujours un diese devant le nom de l’ancre
• possibilité d’appeler une ancre d’un autre fichier :
<a href=“monfichierhtml#monancre”>Cliquez ici pour
rejoindre l’ancre</a>
40
Les liens
Introduction
Syntaxe
III.6 : Appels de fichiers Les ancres

Appels de fichiers
 Possibilité d’appeler plusieurs types

de fichier :
• Html : <a href=“monfichier.html”>Cliquez ici</a>
• Image : <a href=“image.jpg”>Cliquez ici</a>
• Une ancre : <a href=“#ancre”>Cliquez ici</a>
• Pgme à télécharger : <a
href=“programme.exe”>Télécharger</a>
• adresse électronique : <a
href=“mailto:monemail@yahoo.fr”>Envoyez moi un
mail</a>
41
Chapitre IV : Les images
 IV.1 Introduction
 IV.2 Syntaxe
 IV.3 Les attributs
 IV.4 Exemple
 IV.5 Les images mappées
42
Les images
Introduction
Syntaxe
Les attributs
IV.1 : introduction Exemple

Images mappées
 Les formats utilisés :

• JPEG : offre un très bon taux de compression,
d’autant plus que l’on peu moduler ce taux pour
obtenir des images de plus ou moins bonne qualité
• GIF : offre un taux de compression moins bon et
une palette de couleur plus restreinte.
 Images : coûteux à télécharger (penser au
texte de remplacement)
 Stocker des images dans des répertoires
séparés
43
Les images
Introduction
Syntaxe
Les attributs
IV.2 : syntaxe Exemple

Images mappées
 <img src="Adresse de l’image">

 L’image ne fait pas partie de votre document,
le browser va la chercher sur le serveur
 Préciser taille et hauteur de l’image pour une
meilleur fluidité d’affichage
 Image comme ancre : <a
href="lien.html"><img src="image.jpeg"></a>
44
Les images
Introduction
Syntaxe
Les attributs
IV.3 : les attributs Exemple

Images mappées
 src : chemin de l’accès de l’image à

appeler
 title : le texte qui apparaît dans l’info-bulle
 id : donne une identification à l’image
 style : définit les styles des images avec les

feuilles de style
 border : définit la taille de la bordure
 vspace : définit l’espace vertical entre l’image

et le texte
45
Les images
Introduction
Syntaxe
Les attributs

Images mappées
 hspace : définit l’espace horizontal entre

l’image et le texte
 align : définit l’alignement
• soit absbottom,absmiddle, baseline, bottom, left, right, texttop,
middle, top
 width : définit la largeur en pixels de l’image
 height : définit la hauteur en pixels de l’image
 alt : définit le texte qui apparaîtra si l’image ne se
s’affiche pas
 name : définit le nom de l’image (Servlets, PHP,…)
46
Les images
Introduction
Syntaxe
Les attributs

Images mappées
Texte …
vspace
IMAGE
height
width border
hspace
47
Les images
Introduction
Syntaxe
Les attributs
IV.5 : exemple Exemple

Images mappées
<html> Voir résultat

<head>
<title> Partie 4_1 : Exemple d’utilisation d’images </title>
</head>
<body>L'image originale :
<br>
<img src="Genius.gif"
alt="Coyote"
border="5"
align="middle"> Mais c'est coyote !
<br>
alt="Coyote"
border="1"
width="100"
align="top"> Mais il est tout petit coyote !
<br>
alt="Coyote"
border="1"
width="200"
height="100"
align="bottom"> Il est tout bizarre maintenant !
<br>
Un coyote dont la taille varie en fonction de la largeur de la page !
alt="Coyote"
border="1"
width="50%">
<br>
</body>
</html>
48
Les images
Introduction
Syntaxe
Les attributs
IV.6 Les images mappées Exemple

Images mappées
 Image constituée de plusieurs endroits

cliquables
 Syntaxe :
<img src="image.jpeg" usemap="#image1">

<map name="image1">
définition
appel
49
Les images
Introduction
Syntaxe
Les attributs

Images mappées
 Tag <map> : Contient des éléments de

bloc optionnels et des éléments area pour
définir les zones
 Elément area :
• Attribut shape pour la forme à définir
• Attribut coord pour les coordonnées des points
caractérisant la forme
• Attribut href pour l'url associée
• Attribut nohref="nohref" pour une zone sans lien
50
Les images
Introduction
Syntaxe
Les attributs

Images mappées
 Attribut shape définit la forme de la

zone cliquable :
• default pour la région entière
• rect pour définir un rectangle
• circle pour définir un cercle
• poly pour définir un polygone
 Voir logiciel pour le découpage
51
Les images
Introduction
Syntaxe
Les attributs

Images mappées
• <area shape="rect" coords=“x1,y1,x2,y2"

href="page.html">
x1,y1 :
calculé par
rapport au
coin
supérieur
gauche
x2,y2
52
Les images
Introduction
Syntaxe
Les attributs

Images mappées
• <area shape="circ" coords=“x1,y1,R"

href="page1.html">
R : rayon
x1,y1 :
centre du
cercle
53
Les images
Introduction
Syntaxe
Les attributs

Images mappées
• <area shape="poly"coords="x1,y1,x2,y2,…,xn,yn"
href="page2.html">
x2,y2
x4,y4
x1,y1
x3,y3
x6,y6
Refermer le
polygone
x5,y5
54
Les images
Introduction
Syntaxe
Les attributs

Images mappées
Exemple 2 : Voir résultat

<html>
<head>
<title> Partie 4_2 : Images mappées </title>
</head>
<body>
<img src="Genius.gif" usemap="#image1">
<map name="image1">
<area shape="circ" coords="170,100,10"
href="javascript:alert('Vous êtes sur le nez')">
<area shape="rect" coords="70,5,110,90"
href="javascript:alert('Vous êtes sur une oreille')">
</map>
</body>
</html>
55
Chapitre V : Les tableaux
 V.1 Introduction
 V.2 Structure générale
 V.3 Détails
56
Les tableaux
Introduction
Structure générale
V.1 : Introduction Détails
3 types d’éléments imbriqués

<TABLE> … </TABLE> : ouverture et fermeture du tableau
<TR> … </TR> : ouverture et fermeture de ligne (Row)
<TD> … </TD> : ouverture et fermeture de cellule (Data)
Remarques
Ne jamais oublier les balises de fermeture
 le tableau pourrait être désordonné, voire ne pas s'afficher.
Les tableaux sont imbricables
Les tableaux servent énormément !
Ils servent à la mise en page :
texte en colonne,
création de menus verticaux sur le coté de la fenêtre).
57
Les tableaux
Introduction
V.2 : Structure générale d'un tableau Détails
(1) le tableau commence par la balise <TABLE>

(2) puis vient la balise <TR> qui débute la première ligne du tableau
(3) puis on trouve une balise <TD> qui ouvre la première cellule de
données
(3 bis) Le texte (ou l'image) contenu dans cette
cellule est tapé et mis en forme
(4) la cellule est fermée par </TD>
Les étapes (3), (3bis) et (4) sont répétées autant de fois qu'il y a de
cellules dans la ligne
(5) puis la ligne est fermée par </TR>
les étapes (2) à (5) sont répétées autant de fois qu'il y a de lignes
dans le tableau
(6) le tableau est terminé par la balise </TABLE>
58
Les tableaux
Introduction
V.3 <TABLE> ... </TABLE> Détails
<TABLE WIDTH="w|w%"
BORDER="b"
CELLPADDING="cp"
CELLSPACING="cs">
WIDTH="w|w%"
Largeur du tableau exprimée en pixel ou en pourcentage de la
largeur de la fenêtre (à utiliser avec prudence).
BORDER="b"
Largeur de l'encadrement du tableau et des cellules exprimée en
pixels.
Si une cellule est vide, il n'apparaît pas.
59
Les tableaux
Introduction
V.3 <TABLE> ... </TABLE> Détails
CELLPADDING="cp"
Marge intérieure de chaque cellule (en pixels).
CELLSPACING="cs"
Espacements horizontal et vertical entre les cellules
du tableau
60
Les tableaux
Introduction
V.3 Les lignes : <TR> … </TR> Détails
<TR ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"
VALIGN="TOP|MIDDLE|BOTTOM">
ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"
Alignement horizontal du contenu de toutes les cellules de la ligne :
LEFT  à gauche (attribut par défaut)
CENTER  au centre
RIGHT  à droite
JUSTIFY  justifié (à utiliser avec prudence !)
VALIGN="TOP|MIDDLE|BOTTOM">
Alignement vertical du contenu de toutes les cellules de la ligne :
TOP  haut de la cellule
MIDDLE  centre verticalement (attribut par défaut)
BOTTOM  bas de la cellule
61
Les tableaux
Introduction
V.3 Les cellules : <TD> … </TD> Détails
<TD ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"
VALIGN="TOP|MIDDLE|BOTTOM"
COLSPAN="c"
ROWSPAN="r"
WIDTH="w|w%">
ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"
Alignement horizontal cellule par cellule (cf. <TR> …
</TR>).
VALIGN="TOP|MIDDLE|BOTTOM"
Alignement vertical cellule par cellule (cf. <TR> … </TR>).
62
Les tableaux
Introduction
WIDTH="w|w%"
Largeur de la cellule en pixels ou en pourcentage de la largeur du
tableau.
A spécifier une seule fois dans le tableau (ie pour une seule ligne)
car elle détermine la largeur de la colonne dont fait partie la
cellule.
Quand cette option est omise, la largeur des cellules est calculée par
rapport à celle du tableau, aux espacements et la largeur de la
cellule contenant le plus de texte, colonne par colonne).
Remarques
Veiller à avoir le même nombre de cellules pour chaque ligne du
tableau (en fusionner éventuellement).
Si une cellule sur une ligne est vide, y mettre quand même un
espace insécable ( )
63
Les tableaux
Introduction
COLSPAN="c"
Nombre de cellules fusionnées à l'horizontal.
Permet de disposer du texte au dessus de plusieurs
colonnes.
Pour que le tableau s'affiche correctement, il faut que ligne
par ligne, le nombre de cellules soit le même. Dans ce
cas où une cellule est une cellule fusionnée (avec un
COLSPAN), elle compte pour autant de cellule que la
valeur du COLSPAN.
ROWSPAN="r"
idem pour
les fusions à la verticale
64
Les tableaux
Introduction
V.3 Un exemple de tableau complexe Détails
65
Chapitre VI : Les formulaires
 VI.1 Introduction
 VI.2 La méthode Get
 VI.3 La méthode Post
 VI.4 L’attribut Action
 VI.5 Ouvrir et fermer un formulaire
 VI.6 Eléments d’un formulaire
66
Les formulaires
Introduction
La méthode Get
La méthode Post
VI.1 Introduction L’attribut Action

Ouvrir et fermer
un formulaire
 Zones de dialogue avec l’utilisateur Eléments
 Zones de texte, de cases à cocher, des listes

de choix
 Interface de saisie qui nécessite un traitement
(voir cours de Php)
 Un formulaire est défini entre les tags
<form> et </form>
 Attribut method définit la méthode d’envoie
des données
 Deux méthodes : Get et Post
67
Les formulaires
Introduction
La méthode Get
La méthode Post
VI.2 La méthode Get L’attribut Action

Ouvrir et fermer
un formulaire
Eléments
 Méthode par défaut
 <form method= "get"
action="proramme.php"> équivaut à <form
action="programme.php">
 La méthode Get place les données dans la
chaîne de requête QUERY_STRING
 Inconvénients de Get : URL confuse, limitation
de la taille des données, méthode moy.
sécurisée, utilisée pour les petits formulaires
68
Les formulaires
Introduction
La méthode Get
La méthode Post
VI.3 La méthode Post L’attribut Action

Ouvrir et fermer
un formulaire
Eléments
 Méthode un peu plus compliquée
 Place pas les données dans la
QUERY_STRING mais une variable
d’environnement (CONTENT_LENGTH)
 Avantages de Post :
• Peut envoyer un grand nombre de données
• Pas d’URL confuse
• Eléments envoyés cachés
69
Les formulaires
Introduction
La méthode Get
La méthode Post
VI.4 L’attribut Action L’attribut Action

Ouvrir et fermer
un formulaire
Eléments
 Action : définit avec quoi les données sont

envoyées (voir cours Php)
 Envoi d’un mail par un formulaire : <form
mailto:monemail@gmail.com method= "post" >
70
Les formulaires
Introduction
La méthode Get
La méthode Post
VI.5 Ouvrir et fermer un formulaire L’attribut Action

Ouvrir et fermer
un formulaire
Eléments
 Un formulaire commence toujours par les
balises suivantes :
<form action="votreadresse@votrefournisseur.com"
method"=post">

</form>
 L'attribut action définit le document ou
l'adresse où les données du formulaire seront
transmises, et method définit la méthode
d'envoie (GET ou POST).
71
Les formulaires
Introduction
La méthode Get
La méthode Post
VI.6 Eléments d’un formulaire L’attribut Action

Ouvrir et fermer
un formulaire
Eléments
 Tag de définition des éléments
 <INPUT type="text" size="x" maxlength="m"
name="label" value="texte">
 Attributs :
• size longueur de la zone du texte ;
• maxlength nombre de caractères maximal autorisé
;
• name identification ;
• value pour inscrire un texte dans le champ.
72
Les formulaires
Introduction
La méthode Get
La méthode Post
VI.6.1 Boite de saisie simple L’attribut Action

Ouvrir et fermer
un formulaire
Eléments
 Zone ou on peut taper du texte
 <input type="text" name="nom" size="25">
 L'attribut type définit le type de l'élément, name
donne le nom de l'élément, size sa longueur en
pixel.
73
Les formulaires
Introduction
La méthode Get
La méthode Post
VI.6.2 Cases à cocher et boutons radio L’attribut Action

Ouvrir et fermer
un formulaire
Eléments
 Case à cocher :
• <input type="checkbox" name="nom" value="valeur">
Voir résultat
 Bouton radio :
• <input type="radio" name="nom2" value="valeur2">
Exemple 1 :
Cours disponibles :<br><br>
<input type="checkbox" name="cours" value=" html ">html<br>
<input type="checkbox" name="cours" value=" catia ">Catia V5<br>
<input type="checkbox" name="cours" value=" java ">Java<br>
<input type="checkbox" name="cours" value="cao">Cao<br><br>
Combien de versions?<br><br>
<br><br> <input type="radio" name="nombre" value="1">1
<br>
<input type="radio" name="nombre" value="2">2<br>
<input type="radio" name="nombre" value="3">3<br>
74
Les formulaires
Introduction
La méthode Get
La méthode Post
VI.6.3 Listes L’attribut Action

Ouvrir et fermer
un formulaire
Eléments
 Permet un choix multiple
 Syntaxe :
<SELECT NAME="nomdelaliste" [SIZE] [MULTIPLE]>
<OPTION VALUE="valeur1">Choix1
<OPTION VALUE="valeur2">Choix2
<OPTION VALUE="valeurX" [SELECTED]>ChoixX
</SELECT>
75
Les formulaires
Introduction
La méthode Get
La méthode Post
VI.6.3.1 Liste simple L’attribut Action

Ouvrir et fermer
un formulaire
Eléments
Voir résultat
Exemple 2 :
<select name="cours">
<option value="java">Java</option>
<option value="catia">Catia V5</option>
<option value="html">Html</option>
<option value="Algo">Algorithme</option>
</select>
76
Les formulaires
Introduction
La méthode Get
La méthode Post
VI.6.3.2 Liste L’attribut Action

Ouvrir et fermer
un formulaire
Eléments
Voir résultat
Exemple 3 :
<select name="cours" size="4">
<option value="java">Java</option>
<option value="html" selected>Html</option>
</select>
77
Les formulaires
Introduction
La méthode Get
La méthode Post
VI.6.3.3 Liste choix multiples L’attribut Action

Ouvrir et fermer
un formulaire
Eléments
Voir résultat
Exemple 4 :
<select name="cours" size="4" multiple>
<option value="java" selected>Java</option>
<option value="html" selected>Html</option>
</select>
78
Les formulaires
Introduction
La méthode Get
La méthode Post
VI.6.4 Zone de textes L’attribut Action

Ouvrir et fermer
un formulaire
Eléments
 Tag <textarea>, </textarea>
• <textarea name="nom" cols="15" rows="5">
</textarea>
 cols définit la longueur de la boîte de texte et rows
sa largeur.
79
Les formulaires
Introduction
VI.6.5 Boutons d'envoi et de La méthode Get
La méthode Post
réinitialisation de formulaire L’attribut Action

Ouvrir et fermer
un formulaire
Eléments
 Syntaxe :
• <input type="submit" value="Valider !">
• <input type="reset" value="Effacer">
 Submit : envoie des données du formulaire vers sa
destination (celle indiquée dans l'attribut action de la
balise form),
 Reset : efface contenu du formulaire
Valider Effacer
 Pour remplacer le bouton par une image : <INPUT

type="image" src="url image" alt="texte">
80
Les formulaires
Introduction
La méthode Get
La méthode Post
VI.6.6 Boîte de saisie masquée L’attribut Action

Ouvrir et fermer
un formulaire
Eléments
 Type= " password" : Mot de passe
 <INPUT type="password" size="x" maxlength="m"
name="label" value="texte">
 Attributs identiques à ceux de type="text"
81
Les formulaires
Introduction
La méthode Get
La méthode Post
VI.6.7 Sélecteur de fichier L’attribut Action

Ouvrir et fermer
un formulaire
Eléments
 Type : "file" Voir résultat
 Envoi d'un fichier du client vers le serveur.

• <INPUT type="file" name="label" value="texte">
• NB : le type d'encodage du formulaire doit être :
multipart/form-data.
Exemple 3 :
<form method="post" action="ajout.php3" enctype='multipart/form-data'>
<input type="file" name="fichier">
<input type="submit" name="Submit" value="Envoyer">
</form>
82
Les formulaires
Introduction
La méthode Get
La méthode Post
VI.6.8 Elément Button L’attribut Action

Ouvrir et fermer
un formulaire
Eléments
<BUTTON type="submit / reset / button" name="label"

value="texte" >
texte, code HTML
</BUTTON>
Nom <INPUT type="text"><BR>

Prénom <INPUT type="text"><BR>
Mot de passe <INPUT type="password"><BR>
<BUTTON type="submit">
<IMG src="soumettre.jpg" align="center">
<BR>cliquez-moi !!!
</BUTTON>
83
Les formulaires
Introduction
La méthode Get
La méthode Post
VI.6.8 Données cachées L’attribut Action

Ouvrir et fermer
un formulaire
Eléments
 Permet d’envoyer des données cachées

au serveur à l’insu de l’utilisateur
 <INPUT type="hidden" name="label"

value="texte">
 Ajouté au formulaire avant l'envoi des

données.
84

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

Le langage HTML

I.1: Principes de publication Les balises

 Un site est Les extensions

• Réalisé par un concepteur

Conception d’un site = réalisation d’un ensemble de pages

I.2: Concepts fondamentaux Les balises

I.3: L’HTML Les balises

 HTML : HyperText Markup Language

I.3: L’HTML Les balises

Code HTML Page Web

Pour voir le code HTML d'une page :

I.4: Navigateurs Les balises

I.5: Les balises (ou tags) Les balises

 Une balise est un mot clé encadré par 2 chevrons

I.6: Conseils & conventions Les balises

 Document HTML = document échangé sur Internet Les extensions

 Lisibilité (pour faciliter la maintenance)

HTML : Exemple à ne pas suivre Les balises

<html><head><title>Exemple de fichier HTML</title></head>

Structures principales d’un document Concepts fondamentaux

HTML Les balises

Document HTML Syntaxe

I.7: Comment faire ? Les balises

I.8 : syntaxe générale Les balises

</HTML> ‘ fin d’un document Html

I.8 : syntaxe générale Les balises

• Ouvrez le bloc notes et tapez ces lignes :

I.8 : syntaxe générale Les balises

• la couleur de fond : BGCOLOR="#RRVVBB"

I.9 : les extensions Les balises

 L’extension indique à l’ordinateur que c’est Les extensions

une page web

II.1 Les caractères

Taille de la police par défaut

<BASEFONT SIZE="taille"> (avec 1  taille  7)

Si cette balise n'est pas utilisée, la taille par défaut des

II.1 Les caractères

Spécification d’une police locale

FACE : la première police installée est utilisée.

SIZE : taille de la police

II.1 Les caractères

Remarque sur les balises <FONT>

Permet de changer des paramètres ponctuellement

II.1 Les caractères

II.1 Les caractères

II.2 Les paragraphes

II.2 Les paragraphes

<P ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"> … </P>

Alignement des paragraphes situés

Possibilité d’utiliser une balise ouvrante SANS balise fermante

II.2 Les titres

<H1> … </H1>, <H2> … </H2>, <H3> … </H3>,

Titres de différents niveaux

II.2 Les listes

<UL> ... </UL>

II.2.1 Option des listes à puces

Option TYPE="disc|circle|square" dans <UL>

II.2 Les listes

II.2.2 Option des listes numérotées

Option START="NombreDeDépart" dans <OL>

Option TYPE="i|I|a|A|1" dans <OL>

II.2.3 Les listes descriptives

 <dl> : ouvre une liste descriptive et englobe :

II.2.3 Les listes descriptives