Cours HTML

Le langage HTML
Sommaire gnral
Chapitre 1 : Introduction
Chapitre 2 : Mise en forme
Chapitre 3 : Les liens
Chapitre 4 : Les images
2
Chapitre 4 : Les images
Chapitre 5 : Les tableaux
Chapitre 6 : Les frames
Chapitre 7 : Les formulaires
Chapitre 8 : Les feuilles de style
Chapitre I : Introduction
I.1 Principes de publication
I.2 Concepts fondamentaux
I.3 Navigateurs
I.4 LHTML
3
I.4 LHTML
I.5 Les balises
I.6 Conseils et conventions
I.7 Comment faire?
I.8 Syntaxe
I.9 Les extensions
I.1: Principes de publication
Un site est
Ralis par un concepteur
Hberg sur un serveur
Consult par des utilisateurs
Le site est dpos par le concepteur chez lhbergeur
Les bases
Principes de publication
Concepts fondamentaux
Navigateurs
LHTML
Les balises
Conseils et conventions
Comment faire?
Syntaxe
Les extensions
Le site est dpos par le concepteur chez lhbergeur
Site web : ensemble de pages web
Page web : un document HTML+ documents utiliss (ex:
images, sons, vido, etc.)
Conception dun site = ralisation dun ensemble de pages
connectes entre elles par des liens hypertextes
4
I.2: Concepts fondamentaux
HTML est le langage du web. 2 concepts
se cachent derrire HTML :
Hypertexte : faon dinter-relier des documents
multimdias
Balises: faon dindiquer le formatage des lments
Les bases
LHTML
Navigateurs
Les balises
Comment faire?
Syntaxe
Les extensions
Balises: faon dindiquer le formatage des lments
Mise en forme dcrite par des fichiers de style CSS
5
I.3: LHTML
HTML : HyperText Markup Language
Langage de description de pages web
Un document HTML est
Les bases
LHTML
Navigateurs
Les balises
Comment faire?
Syntaxe
Les extensions
un fichier texte, construit suivant une syntaxe prcise
structur par des balises
interprt (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
I.3: LHTML
Code HTML
Page Web
Les bases
LHTML
Navigateurs
Les balises
Comment faire?
Syntaxe
Les extensions
Pour voir le code HTML d'une page :
Menu Affichage / Code source
7
I.4: Navigateurs
Logiciel destin consulter des pages du web : Firefox, Safari,
Internet Explorer
Ils savent lire les documents html ou htm, et ventuellement adapter laffichage
aux diffrents media :
Moniteurs (cran), Imprimante, Carte son, etc.
Code source HTML (idal pour apprendre les techniques des autres)
Les bases
LHTML
Navigateurs
Les balises
Comment faire?
Syntaxe
Les extensions
8/34
Que fait un navigateur qui rencontre un document dun type inconnu ?

Il recherche un plugin <=> une extension lui apprenant ouvrir ce type de
fichier
Ou il excute lapplication qui correspond
Pour faire votre site web :
Il faut un hbergeur pour avoir un serveur web
Un logiciel ddition de texte
Un logiciel FTP (File Transfer Protocol) client (ou SSH comme PSCP ou
putty) pour communiquer avec le serveur (avec ssh de manire scurise)
I.5: Les balises (ou tags)
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 mme que celle du dbut, mais le chevron
Les bases
LHTML
Navigateurs
Les balises
Comment faire?
Syntaxe
Les extensions
La balise terminale (la mme que celle du dbut, mais le chevron
< est remplac par </ )
Exemple: <HEAD></HEAD>
Certaines balises initiales renferment des valeurs particulires,
appeles attributs, qui prcisent des paramtres
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
I.6: Conseils & conventions
Document HTML = document chang sur Internet
Penser la taille :
du fichier HTML !
(plus il est gros, plus cela prend de temps de transfert)
des lments prsents dans le fichier (images, sons,
vidos, )
Les bases
LHTML
Navigateurs
Les balises
Comment faire?
Syntaxe
Les extensions
vidos, )
Lisibilit (pour faciliter la maintenance)
Indenter les lignes
Balises HTML en majuscules pour mieux les distinguer du
corps du texte.
10
HTML : Exemple ne pas suivre
<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 :
Les bases
LHTML
Navigateurs
Les balises
Comment faire?
Syntaxe
Les extensions
<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
Document HTML
Structures principales dun document
HTML
Entte
<HTML>
<HEAD>
<TITLE>Exemple de document HTML</TITLE>
</HEAD>
Les bases
LHTML
Navigateurs
Les balises
Comment faire?
Syntaxe
Les extensions
Corps
<BODY>
<H1>Mon 1er document HTML</H1>
<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
I.7: Comment faire ?
Un simple diteur de texte permet de crer une page
On sauvegarde la page avec lextension .html ou .htm
Ensuite on louvre, ct avec un navigateur
Puis on commence le cycle dition/correction :
Modifier/diter la page
Les bases
LHTML
Navigateurs
Les balises
Comment faire?
Syntaxe
Les extensions
Modifier/diter la page
Lafficher,
Recommencer jusqu satisfaction
Remarque : certain diteur de textes peuvent fournir un mode
spcial ddition pour les pages HTML et il existe de nombreux
diteurs spcialiss pour HTML .
Remarque : ne pas utiliser Microsoft Word pour gnrer de
pages HTLM ; le code gnr est immonde
13
I.8 : syntaxe gnrale
<HTML> dbut dun document Html
</HTML> fin dun document Html
<HEAD> dbut de la zone den tte
</HEAD> fin de la zone den tte
<TITLE> dbut du titre de la page
Les bases
LHTML
Navigateurs
Les balises
Comment faire?
Syntaxe
Les extensions
14
<TITLE> dbut du titre de la page
</TITLE> fin du titre de la page
<BODY> dbut 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 : 
A vous de jouer :
Ouvrez le bloc notes et tapez ces lignes :
<HTML>
<HEAD>
<TITLE>Document Html minimum</TITLE>
</HEAD>
<BODY>Hello world !</BODY>
Voir rsultat
Les bases
LHTML
Navigateurs
Les balises
Comment faire?
Syntaxe
Les extensions
15
<BODY>Hello world !</BODY>
</HTML>
Enregistrez le document avec lextension .Html ou .Htm
Ouvrez le navigateur
Afficher le document avec le menu Fichier/Ouvrir
Observez le rsultat
Tag <BODY> :
la couleur de fond : BGCOLOR="#RRVVBB"
la couleur du texte : TEXT="#RRVVBB"
la couleur des liens : LINK="#RRVVBB"
la couleur des liens lors de slections :
Les bases
LHTML
Navigateurs
Les balises
Comment faire?
Syntaxe
Les extensions
16
VLINK="#RRVVBB"
la couleur des liens dj visits : ALINK="#RRVVBB "
Image en fond : BACKGROUND="image.gif"
I.9 : les extensions
Lextension indique lordinateur que cest
une page web
Quelques extensions :
.htm
.html
Les bases
LHTML
Navigateurs
Les balises
Comment faire?
Syntaxe
Les extensions
17
.html
.asp : Active Server Page (ncessite un serveur web)
.phtml,.php3,.php,.php4 : pour les pages en PHP
(ncessite un serveur web)
.cgi : pour les fichiers CGI (ncessite un serveur web)
.pl : pour les fichiers perl (ncessite un serveur web)
.shtml : pour les servlets (ncessite un serveur web)
Page daccueil : index.html ou index.htm
Chapitre II : Mise en forme
II.1 Le texte
II.2 Les titres
II.3 Les paragraphes
II.4 Les alignements
Introduction
Mise en forme
Les liens
Les images
Les listes
Les tableaux
Les frames
Les formulaires
18
II.5 Les listes
II.6 Division graphique
II.7 Divers
II.1.1 texte en gras
Texte normal, texte en gras
Tags : <B> </B>
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
Voir rsultat
Exemple 1 :
<HTML>
19
<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>
II.1.2 texte en italique
Texte normal, texte en italique
Tags : <em> </em> <i> </i>
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
Voir rsultat
Exemple 2 :
<HTML>
<HEAD>
20
<HEAD>
<TITLE>Partie 2 - Exemple 2 : texte en italique</TITLE>
</HEAD>
<BODY>
<em>Boire</em> ou <em>conduire</em>
il faut <em> choisir </em>
</BODY>
</HTML>
II.1.3 : texte soulign
Texte normal, texte soulign
Tags : <u> </u>
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
Voir rsultat
Exemple 3 :
<HTML>
<HEAD>
21
<HEAD>
<TITLE>Partie 2 - Exemple 3 : texte soulign</TITLE>
</HEAD>
<BODY>
<u>Boire</u> ou <u>conduire</u> il faut choisir
</BODY>
</HTML>
II.1.4 : le tag <font>
Tags : <font> </ font >
Tag puissant :
Choix de la couleur du texte
Choix de la taille du texte
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
22
Choix de la police
Plus lassociation avec les feuilles de styles
Syntaxe :
<font color= couleur" size= taille" face=" police(s)" >
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
Voir rsultat
Attributs :
Color :
Dfinit la couleur de la police
Noms en Anglais ou valeurs hexadcimal
23
Exemple 4 :
<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 hexadcimal</font>
</BODY>
</HTML>
Attributs :
Size :
Dfinit la taille de la police
7 tailles : 1,2,3,4,5,6,7
Taille par dfaut : 3
Voir rsultat
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
Exemple 5 : Exemple 5 :
24
</HTML>
Exemple 5 :
<HTML>
<HEAD>
<TITLE>Partie 2 - Exemple 5 : tag font-taille</TITLE>
</HEAD>
<BODY>
<font size=1>Taille 1</font><br> 
<font size=2>Taille 2 </font><br>
</BODY>
</HTML>
Attributs :
Face :
Dfinit la police du texte
Dfinir plusieurs spares par des virgules (si la police nexiste pas
chez linternaute, le navigateur prendra la seconde puis la troisime, )
Police par dfaut : Times New Roman
Voir rsultat
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
25
Police par dfaut : Times New Roman
Exemple 6 :
<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>
II.1.5 : augmenter ou diminuer la taille
de police
Tag <big> : augmente la taille dun cran
Tag <small> : diminue la taille dun cran
Voir rsultat
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
</TITLE>
Exemple 7 :
<HTML>
<HEAD>
<TITLE>Partie 2 - Exemple 7 : augmenter taille de la police</TITLE>
26
</TITLE> <TITLE>Partie 2 - Exemple 7 : augmenter taille de la police</TITLE>
</HEAD>
<BODY>
<font size=4>Texte en taille 4<br>
<big>Texte en taille 5<br>
<big>Texte en taille 6<br>
</font>
</BODY>
</HTML>
II.2 : les titres
Tag : <h_numtitre> </h_numtitre>
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
Voir rsultat
<HTML>
<HEAD>
<TITLE>Partie 2 - Exemple 8 : Les titres</TITLE>
27
</HTML>
<TITLE>Partie 2 - Exemple 8 : Les titres</TITLE>
</HEAD>
<BODY>
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>
</BODY>
</HTML>
II.3 : les paragraphes
Tag : <p> </p>
Dfinit un nouveau paragraphe
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
Voir rsultat
Exemple 9 :
<HTML>
<HEAD>
<TITLE>Partie 2 - Exemple 9 : les paragraphes</TITLE>
28
<TITLE>Partie 2 - Exemple 9 : les paragraphes</TITLE>
</HEAD>
<BODY>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
<p>Paragraphe 4</p>
</BODY>
</HTML>
II.4 : les alignements
Il existe 4 alignements :
gauche
Centrer
A droite
Justifi
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
29
Justifi
Alignement dfinit dans lattribut align dans un
paragraphe :
Align=left (par dfaut)
Align=center
Align=right
Align=justify
II.4 : les alignements
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
Voir rsultat
Exemple 10 :
<HTML>
<HEAD>
<TITLE>Partie 2 - Exemple 10 : les alignements</TITLE>
</HEAD>
<BODY>
<p align= left >Alignement gauche</p>
<p align= center >Alignement centr</p>
<p align= right >Alignement droite</p>
<p align= justify >Alignement justifi Alignement justifi Alignement justifi
30
<p align= justify >Alignement justifi Alignement justifi Alignement justifi
Alignement justifi
Alignement justifi Alignement justifi Alignement justifi Alignement justifi Alignement
justifi
justifi
justifi
justifi
justifi </p>
</BODY>
</HTML>
II.5.1 : les listes numrotes
liste ordonne : <ol> </ol>
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
Voir rsultat
Exemple 11 :
<HTML>
<HEAD>
<TITLE>Partie 2 - Exemple 11 : les listes</TITLE>
</HEAD>
<BODY>
31
<BODY>
<ol>
<li> Introduction
<li> Mise en forme
<li> Les images
<li> Trucs et astuces
</ol>
</BODY>
</HTML>
pour commencer une nouvelle liste partir dun chiffre choisi
Voir rsultat
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
Exemple 13 :
<HTML>
<HEAD>
<TITLE>Partie 2 - Exemple 13 : les listes</TITLE>
</HEAD>
<BODY>
<ol>
32
pour imposer la valeur : <li value="98">
<ol>
<li> Introduction
</ol>
<ol start="10">
<li> Mise en forme
<li> Les images
</ol>
</BODY>
</HTML>
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
Prcision : attribut type de <ol>
Valeur 1 : chiffres arabes
Valeur A : lettre majuscule
Valeur a : lettre minuscule
Valeur I : chiffres romains
33
Valeur I : chiffres romains
Valeur i : chiffres romains minuscules
Exemple : pour commencer F
<ol type=A start =6>
II.5.2 : les listes non numrotes
liste non ordonne : <ul> </ul>
Voir rsultat
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
Exemple 14 :
<HTML>
<HEAD>
<TITLE>Partie 2 - Exemple 14 : les listes non ordonnes</TITLE>
</HEAD>
34
</HEAD>
<BODY>
<ul>
<li> Introduction
<li> Mise en forme
<li> Les images
</ul>
</BODY>
</HTML>
Modification des puces : <li type="">
Voir rsultat
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
Exemple 15 :
<HTML>
<HEAD>
<TITLE>Partie 2 - Exemple 15 : modification des puces</TITLE>
</HEAD>
35
</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>
Insertion dimages : <ul style ="">
Voir rsultat
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
</TITLE>
Exemple 16 :
<HTML>
<HEAD>
<TITLE>Partie 2 - Exemple 16 : insertion dimages</TITLE>
</HEAD>
36
</HEAD>
<BODY>
<ul style="list-style-image:url("note.gif")">
<li>Introduction
<li>Mise en forme
<li>Les images
<li>Trucs et astuces
</ul>
</BODY>
</HTML>
II.5.3 : les listes descriptives
ASCII
jeu de caractres qui assigne des valeurs numriques
standard aux lettres, chiffres et signes de ponctuation
EPS
format de description de fichiers PostScript
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
37
<dl> : ouvre une liste descriptive et englobe :
<dt> : item (doit tre < une ligne)
<dd> : description de litem
II.5.3 : les listes descriptives
Voir rsultat
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
Exemple 17 :
<HTML>
<HEAD>
<TITLE>Partie 2 - Exemple 17 : listes descriptives</TITLE>
</HEAD>
<BODY>
<dl>
38
<dl>
<dt>ASCII</dt><dd>jeu de caractres qui assigne
des valeurs numriques standard aux lettres, chiffres et
signes de ponctuation </dd>
<dt>EPS</dt><dd>
format de description de fichiers
PostScript </dd>
</dl>
</BODY>
</HTML>
II.6 Division graphique
Balise <Hr>
Dessine un trait sur toute ou partie de la page
Attributs :
Size : paisseur du trait
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
39
Size : paisseur du trait
Width : longueur du trait (en % ou en pixels)
Align : ds le cas dune longueur < 100%
Noshade : permet de supprimer leffet de relief du
trait
II.7 Divers
Balise <pre>
Respecte mise en page du code source
Voir rsultat
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
Exemple 18 :
<HTML>
<HEAD>
40
<TITLE>Partie 2 - Exemple 18 : balise <pre></TITLE>
</HEAD>
<BODY>
<pre>
+-------+--------+-----------+--------+-----------+
| Lundi | Mardi |Mercredi | Jeudi |Vendredi |
+-------+--------+-----------+--------+-----------+
| | | | | |
| | | | | |
+-------+--------+-----------+--------+-----------+
</pre>
</BODY>
</HTML>
Tag <Body> :
la couleur de fond : BGCOLOR="#RRVVBB"
la couleur du texte : TEXT="#RRVVBB"
II.7 Divers
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
41
VLINK="#RRVVBB"
la couleur des liens dj visits :
ALINK="#RRVVBB "
Image en fond : BACKGROUND="image.gif"
II.7 Divers
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
Le tag <div> : mot Division
un bloc l'intrieur de la page
Syntaxe : <div>Mon texte</div>
Bloc peut contenir :
42
Bloc peut contenir :
du texte,
des liens,
des images,
des tableaux,
...
II.7 Divers
Mise en forme
Le texte
Les titres
Les paragraphes
Les alignements
Les listes
Division graphique
Divers
Exemple 19 :
<html>
<head>
<title>Partie 2 - Exemple 19 : Mon premier bloc</title>
Voir rsultat
43
<title>Partie 2 - Exemple 19 : Mon premier bloc</title>
</head>
<body>
<div align="left" style=" position:absolute ;
left:50;top:100">Bonjour Monde !</div>
</body>
</html>
Chapitre III : Les liens
III.1 Introduction
III.2 Syntaxe
III.3 Les attributs dun lien
III.4 Les ancres
44
III.4 Les ancres
III.5 Appels de fichiers
III.1 : Introduction
Les liens
Introduction
Syntaxe
Attributs dun lien
Les ancres
Appels de fichiers
Accueil
Bla bla
http://.../accueil.html
45
temps
Menu
+ Accueil
+ Cours
+ CV
+ Recherche
+ Liens
http://.../accueil.html
http://.../cours.html
http://.../cv.html
http://.../recherche.html
http://.../liens.html
III.2 : Syntaxe
Syntaxe Html :
<a href=monfichier.html>Mon lien</a>
Tag <a>, </a>
Les liens
Introduction
Syntaxe
Attributs dun lien
Les ancres
Appels de fichiers
Voir rsultat
Exemple 1 :
<HTML>
46
</TITLE>
<HTML>
<HEAD>
<TITLE>Partie 3 - Exemple 1 : les liens</TITLE>
</HEAD>
<BODY>
<a href=test.html>Lien vers test</a>
</BODY>
</HTML>
III.3 : les attributs dun lien
href : chemin daccs de la page
appeler
title : le texte qui apparat dans linfo bulle
target : dfinit la cible de la page
Les liens
Introduction
Syntaxe
Attributs dun lien
Les ancres
Appels de fichiers
47
target : dfinit la cible de la page
style : dfinit le style du lien grce aux feuilles
de style
autres arguments avec Javascript
III.4 : les attributs dun lien
Les liens
Introduction
Syntaxe
Attributs dun lien
Les ancres
Appels de fichiers
Voir rsultat
</TITLE>
Exemple 2 :
<HTML>
<HEAD>
<TITLE>Partie 3 - Exemple 2 : les attributs</TITLE>
</HEAD>
48
</HEAD>
<BODY>
<a href=test.html title=lien vers test.html
target=_blank style=text-decoration:overline>
Lien vers test</a>
</BODY>
</HTML>
III.5 : les ancres internes
Les liens
Introduction
Syntaxe
Attributs dun lien
Les ancres
Appels de fichiers
dfinit un lieu prcis dans une page
Syntaxe : <a name=monancre></a>
lien vers une ancre : <a href=#monancre>Cliquez
ici pour rejoindre lancre</a>
49
ici pour rejoindre lancre</a>
Toujours un diese devant le nom de lancre
possibilit dappeler une ancre dun autre fichier :
<a href=monfichierhtml#monancre>Cliquez ici pour
rejoindre lancre</a>
III.6 : Appels de fichiers
Les liens
Introduction
Syntaxe
Attributs dun lien
Les ancres
Appels de fichiers
Possibilit dappeler plusieurs types
de fichier :
Html : <a href=monfichier.html>Cliquez ici</a>
Image : <a href=image.jpg>Cliquez ici</a>
50
Une ancre : <a href=#ancre>Cliquez ici</a>
Pgme tlcharger : <a
href=programme.exe>Tlcharger</a>
adresse lectronique : <a
href=mailto:ngardan@yahoo.fr>Envoyez moi un
mail</a>
Chapitre IV : Les images
IV.1 Introduction
IV.2 Syntaxe
IV.3 Les attributs
IV.4 Exemple
51
IV.4 Exemple
IV.5 Les images mappes
IV.1 : introduction
Les formats utiliss :
JPEG : offre un trs bon taux de compression,
dautant plus que lon peu moduler ce taux pour
obtenir des images de plus ou moins bonne qualit
GIF : offre un taux de compression moins bon et
Les images
Introduction
Syntaxe
Les attributs
Exemple
Images mappes
52
GIF : offre un taux de compression moins bon et
une palette de couleur plus restreinte.
Images : coteux tlcharger (penser au
texte de remplacement)
Stocker des images dans des rpertoires
spars
IV.2 : syntaxe
<img src="Adresse de limage">
Limage ne fait pas partie de votre document,
le browser va la chercher sur le serveur
Prciser taille et hauteur de limage pour une
Les images
Introduction
Syntaxe
Les attributs
Exemple
Images mappes
53
Prciser taille et hauteur de limage pour une
meilleur fluidit daffichage
Image comme ancre : <a
href="lien.html"><img src="image.jpeg"></a>
IV.3 : les attributs
Les images
Introduction
Syntaxe
Les attributs
Exemple
Images mappes
src : chemin de laccs de limage
appeler
title : le texte qui apparat dans linfo-bulle
id : donne une identification limage
54
id : donne une identification limage
style : dfinit les styles des images avec les
feuilles de style
border : dfinit la taille de la bordure
vspace : dfinit lespace vertical entre limage
et le texte
Les images
Introduction
Syntaxe
Les attributs
Exemple
Images mappes
hspace : dfinit lespace horizontal entre
limage et le texte
align : dfinit lalignement
soit absbottom,absmiddle, baseline, bottom, left, right, texttop,
middle, top
55
middle, top
width : dfinit la largeur en pixels de limage
height : dfinit la hauteur en pixels de limage
alt : dfinit le texte qui apparatra si limage ne se
saffiche pas
name : dfinit le nom de limage (Servlets, PHP,)
Les images
Introduction
Syntaxe
Les attributs
Exemple
Images mappes
IMAGE
vspace
Texte
56
IMAGE
border
hspace
width
height
IV.5 : exemple
Les images
Introduction
Syntaxe
Les attributs
Exemple
Images mappes
Voir rsultat
<html>
<head>
<title> Partie 4_1 : Exemple dutilisation dimages </title>
</head>
<body>
L'image originale : <br>
<img
src="Genius.gif"
alt="Coyote"
border="5"
align="middle"> Mais c'est coyote ! <p>
<br>
<img
src="Genius.gif"
alt="Coyote"
57
alt="Coyote"
border="1"
width="100"
align="top"> Mais il est tout petit coyote ! <p>
<br>
<img
src="Genius.gif"
alt="Coyote"
border="1"
width="200"
height="100"
align="bottom"> Il est tout bizarre maintenant ! <p>
<br>
Un coyote dont la taille varie en fonction de la largeur de la page !
<img
src="Genius.gif"
alt="Coyote"
border="1"
width="50%">
<br>
</body>
</html>
Image constitue de plusieurs endroits
cliquables
Syntaxe :
<img src="image.jpeg" usemap="#image1">
Les images
Introduction
Syntaxe
Les attributs
Exemple
Images mappes
58
<img src="image.jpeg" usemap="#image1">
<map name="image1">
dfinition
appel
Tag <map> : Contient des lments de
bloc optionnels et des lments area pour
dfinir les zones
Elment area :
Les images
Introduction
Syntaxe
Les attributs
Exemple
Images mappes
59
Elment area :
Attribut shape pour la forme dfinir
Attribut coord pour les coordonnes des points
caractrisant la forme
Attribut href pour l'url associe
Attribut nohref="nohref" pour une zone sans lien
Attribut shape dfinit la forme de la
zone cliquable :
default pour la rgion entire
rect pour dfinir un rectangle
Les images
Introduction
Syntaxe
Les attributs
Exemple
Images mappes
60
circle pour dfinir un cercle
poly pour dfinir un polygone
Voir logiciel pour le dcoupage
<area shape="rect" coords=x1,y1,x2,y2"
href="page.html">
Les images
Introduction
Syntaxe
Les attributs
Exemple
Images mappes
x1,y1 :
61
x1,y1 :
calcul par
rapport au
coin
suprieur
gauche
x2,y2
<area shape="circ" coords=x1,y1,R"
href="page1.html">
Les images
Introduction
Syntaxe
Les attributs
Exemple
Images mappes
62
x1,y1 :
centre du
cercle
R : rayon
<area shape="poly"coords="x1,y1,x2,y2,,xn,yn"
href="page2.html">
Les images
Introduction
Syntaxe
Les attributs
Exemple
Images mappes
x2,y2
63
x1,y1
x3,y3
x4,y4
x5,y5
x6,y6
Refermer le
polygone
Voir rsultat
Les images
Introduction
Syntaxe
Les attributs
Exemple
Images mappes
Exemple 2 :
<html>
<head>
<title> Partie 4_2 : Images mappes </title>
</head>
<body>
<img src="Genius.gif" usemap="#image1">
64
<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>
Chapitre V : Les tableaux
V.1 Introduction
V.2 Tableau simple
V.3 On complique
V.4 Dtails
65
V.4 Dtails
V.5 Ajout d objets
V.6 Divers
V.1 : Introduction
Moyen simple de structurer linfo
Les cellules peuvent accueillir nimporte quel objet
(texte, listes, images, liens hypertexte, lments de
formulaire,)
Tag : <table> </table>
Les tableaux
Introduction
Tableau simple
On complique
Dtails
Ajout d objets
Divers
66
Tag : <table> </table>
A savoir par coeur:
Le tag <tr> dfinit une ligne.
Le tag <td> dfinit une colonne.
<tr>
<tr>
<td>
<tr>
<tr>
<td> <td>
<td> <td>
V.2 : Un tableau simple
Voir rsultat
Les tableaux
Introduction
Tableau simple
On complique
Dtails
Ajout d objets
Divers
Exemple 1 :
<html>
<head>
<title>Partie 5 - Exemple 1 : Premier tableau</title>
</head>
<body>
67
<body>
<table>
<tr>
<td>colonne1</td>
<td>colonne2</td>
</tr>
</table>
</body>
</html>
V.3 : On complique un peu
Voir rsultat
Les tableaux
Introduction
Tableau simple
On complique
Dtails
Ajout d objets
Divers
Exemple 2 :
<html>
<head>
<title>Partie 5-Exemple 2 : on complique</title>
</head>
<body>
<table>
<tr>
<tr>
<td>Pedro</td>
<td>14</td>
<td>5</td>
<td>12</td>
</tr>
<tr>
<td>Roberta</td>
68
<tr>
<td>Etudiant</td>
<td>Moy. 1er trimestre</td>
<td>Moy. 2eme trimestre</td>
<td>Moy. 3eme trimestre</td>
</tr>
<tr>
<td>Lagaffe</td>
<td>10</td>
<td>8</td>
<td>11</td>
</tr>
<td>Roberta</td>
<td>6</td>
<td>18</td>
<td>10</td>
</tr>
</table>
</body>
</html>
V.4.1 : Tag <Table> </Table>
Dfinition du tableau
cellules
BORDER
WIDTH
Les tableaux
Introduction
Tableau simple
On complique
Dtails
Ajout d objets
Divers
69
Titre
CAPTION
CELLSPACING
CELLPADDING
V.4.2 : Tag <Tr> </Tr>
Dfinit une ligne du tableau
Alignements : align (horizontal), valign(vertical)
Syntaxe : <tr valign=center align=left><td>1</td></tr>
top
Les tableaux
Introduction
Tableau simple
On complique
Dtails
Ajout d objets
Divers
70
center
left
top
bottom
V.4.3 : Tag <Td> </Td>
dfinit une colonne du tableau
Alignements : align (horizontal), valign(vertical)
Syntaxe : <tr align=left><td>10<td
align=center>10<td=right>10</tr>
Les tableaux
Introduction
Tableau simple
On complique
Dtails
Ajout d objets
Divers
71
left
center right
V.4.4 : Fusion de cellule
Rowspan : fusion de lignes
Colspan : fusion de colonnes
Syntaxe : <tr align=center><td
colspan=2></td><td>A</td><td>B</td><td>C</td></tr>
<tr align=center><td rowspan=2
colspan=2>10<td><td>D</td><td>E</td><td>F</td></tr>
<tr align=center><td>G</td><td>H</td><td>I</td></tr>
<td>
<td>
<td> <td> <td> <td>
Les tableaux
Introduction
Tableau simple
On complique
Dtails
Ajout d objets
Divers
72
<tr>
<tr>
<tr>
rowspan=2
colspan=2
V.4.4 : Exemple : la fusion de cellule
Voir rsultat
Les tableaux
Introduction
Tableau simple
On complique
Dtails
Ajout d objets
Divers
Exemple 3 :
<table width="100%" border="1">
<tr>
<td> </td>
<td> </td>
<td colspan="3"> </td>
</tr>
<tr>
<td rowspan="3"> </td>
<td> </td>
<td> </td>
<td> </td>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3"> </td>
<td> </td>
73
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="3" rowspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<td> </td>
<td> </td>
<td colspan="3" rowspan="3"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
V.5 : Ajout dimage dans les cellules
Voir rsultat
Les tableaux
Introduction
Tableau simple
On complique
Dtails
Ajout d objets
Divers
Exemple 4 :
<html>
<head>
<title>Partie 5 - Exemple 4 : Image dans une cellule</title>
</head>
<body>
<table border="1" bordercolor="black" cellspacing="0" cellpadding="0">
74
<table border="1" bordercolor="black" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="blue" align=center><font color="white">Le coyote</td>
</tr>
<tr>
<td><img src="genius.gif"></td>
</tr>
</table>
</body>
</html>
V.6 Divers
Tag <TH> : identique <td> mais texte
Considr comme texte den-tte (centr-gras)
Tag <CAPTION> : titre en haut ou en bas du
tableau (Align=top ou Align=bottom)
Les tableaux
Introduction
Tableau simple
On complique
Dtails
Ajout d objets
Divers
75
tableau (Align=top ou Align=bottom)
Attribut Bgcolor : dans le tag <table>, <tr>
ou <td> permet de dfinir la couleur dun
tableau, dune cellule ou dune ligne.
Attribut Nowrap pour <td> : empche de
diviser le texte de la cellule en plusieurs lignes
Chapitre VI : Les frames
VI.1 Introduction
VI.2 Syntaxe
VI.3 Exemple
VI.4 Attributs
Introduction
Mise en forme
Les liens
Les images
Les tableaux
Frames
Les formulaires
76
VI.4 Attributs
VI.5 Divers
VI.6 Exemple
VI.I Introduction
Frames/Iframes
Introduction
Syntaxe
Exemple
Attributs
Divers
Exemple
Frame = cadre
Division de lcran du navigateur en plusieurs
zones
77
Mise en page correspond plusieurs fichiers
Html diffrents
Chaque zone possde un nom unique
VI.2 Syntaxe
Tag : <frameset> </frameset>
Possibilit dexprimer la taille :
En pourcentage
En pixel
Frames/Iframes
Introduction
Syntaxe
Exemple
Attributs
Divers
Exemple
78
Frame verticale et/ou horizontale
Verticale : cols
Horizontale : rows
VI.3 Comprendre grce un exemple
Exemple 1 :
<html>
<head>
<title>Partie 6 Exemple 1 : Frame</title>
<frameset cols="100,*" frameborder="10">
<frameset> et </frameset> sont dfinis
dans les tags <head> et </head>
et non entre <body> et </body>
Frames/Iframes
Introduction
Syntaxe
Exemple
Attributs
Divers
Exemple
Voir rsultat
79
<frame src="monfichierHtml1.html" name="menu">
<frame src="monfichierHtml2.html" name="corps">
</frameset>
</head>
<body>
</body>
</html>
<frameset> qui dfinit des frames verticales
.
<frameset> qui dfinit des frames verticales
(avec l'attribut cols), les dimensions des frames,
la premire fait 100 pixels et la seconde prend le reste.
On a aussi, l'attribut frameborder qui dfinit
la taille de la bordure.
VI.3 Comprendre grce un exemple
<frame src="monfichierHtml1.html" name="menu">
Fichier source Nom de la frame
Frames/Iframes
Introduction
Syntaxe
Exemple
Attributs
Divers
Exemple
80
Fichier source Nom de la frame
Obligatoire pour quun lien apparaisse dans une autre frame :
Exemple : <a href="page_html.html" target="frame2">Mon lien</a>
Tag <target = "frame2" >
VI.4 Attributs du tag frame
Src Dfinit le chemin d'accs de la frame insrer
Marginwidth Dfinit l'espacement horizontal entre la bordure et le
contenue de la frame
Marginheight Dfinit l'espacement vertical entre la bordure et le
contenue de la frame
Scrolling Active l'affichage de la barre de dfilement, yes pour
"toujours", no pour "non" mme s'il y en a besoin et auto,
Frames/Iframes
Introduction
Syntaxe
Exemple
Attributs
Divers
Exemple
81
"toujours", no pour "non" mme s'il y en a besoin et auto,
c'est le navigateur qui dcide s'il y en a besoin
Noresize S'il est mit dans le tag, il est impossible de redimensionner
la frame avec la souris, cet attribut n'a pas de valeur
Borderwidth ? Dfinit la taille de la bordure de la frame
Name Dfinit le nom de la frame
Bordercolor Dfinit la couleur de la bordure
Frameborder Active l'affichage de la bordure, No ou 0 pour dsactiver,
yes pour activer
Lang Dfinit la langue de la frame
VI. 5 Divers
Tag <noframes> </noframes> :
Permet dindiquer lutilisateur si son navigateur
reconnat ou non les frames
Tag <base> :
Si vous avez bp de liens dans une frame, pour viter
Frames/Iframes
Introduction
Syntaxe
Exemple
Attributs
Divers
Exemple
82
Si vous avez bp de liens dans une frame, pour viter
dcrire target="frame" chaque fois
rajouter la ligne <base target="frame2"> entre les
tags <head> et </head>
Target existants : _blank, _parent, _top
VI.6 Exemple
Frames/Iframes
Introduction
Syntaxe
Exemple
Attributs
Divers
Exemple
Exemple 2 :
<html>
<head>
<title> Partie 6-Exemple 2 : Exemple de cadres </title>
</head>
<frameset cols="20%,80%">
Voir rsultat
83
<frameset cols="20%,80%">
<frame src="fichier/menu.html" name="menu">
<frame src="fichier/accueil.html" name="contenu">
</frameset>
<noframe>
Le navigateur ne prend pas en charge les frames
</noframe>
</html>
Chapitre VII : Les formulaires
VII.1 Introduction
VII.2 La mthode Get
VII.3 La mthode Post
VII.4 Lattribut Action
84
VII.5 Ouvrir et fermer un formulaire
VII.6 Elments dun formulaire
VII.1 Introduction
Zones de dialogue avec lutilisateur
Zones de texte, de cases cocher, des listes
de choix
Interface de saisie qui ncessite un traitement
(voir cours de Php)
Les formulaires
Introduction
La mthode Get
La mthode Post
Lattribut Action
Ouvrir et fermer
un formulaire
Elments
85
(voir cours de Php)
Un formulaire est dfini entre les tags
<form> et </form>
Attribut method dfinit la mthode denvoie
des donnes
Deux mthodes : Get et Post
VII.2 La mthode Get
Mthode par dfaut
<form method= "get" action="/cgi-
bin/programme.cgi"> quivaut <form
action="/cgi-bin/programme.cgi">
Les formulaires
Introduction
La mthode Get
La mthode Post
Lattribut Action
Ouvrir et fermer
un formulaire
Elments
86
La mthode Get place les donnes dans la
chane de requte QUERY_STRING
Inconvnients de Get : URL confuse, limitation
de la taille des donnes, mthode moy.
scurise, utilise pour les petits formulaires
VII.3 La mthode Post
Mthode un peu plus complique
Place pas les donnes dans la
QUERY_STRING mais une variable
denvironnement (CONTENT_LENGTH)
Les formulaires
Introduction
La mthode Get
La mthode Post
Lattribut Action
Ouvrir et fermer
un formulaire
Elments
87
Avantages de Post :
Peut envoyer un grand nombre de donnes
Pas dURL confuse
Elments envoys cachs
Les formulaires
Introduction
La mthode Get
La mthode Post
Lattribut Action
Ouvrir et fermer
un formulaire
Elments
Method : faon dont les donnes sont envoyes
Action : dfinit avec quoi les donnes sont
envoyes (voir cours Php)
Trois valeurs !
mailto:monadressemail@yahoo.fr
88
mailto:monadressemail@yahoo.fr
Un programme cgi : /cgi-bin/programme.cgi
Une page en ASP, PHP, JSP,
Envoi dun mail par un formulaire : <form
mailto:grt.ensak@gmail.com method= "post" >
VII.5 Ouvrir et fermer un formulaire
Un formulaire commence toujours par les
balises suivantes :
<form action="votreadresse@votrefournisseur.com"
method"=post">

Les formulaires
Introduction
La mthode Get
La mthode Post
Lattribut Action
Ouvrir et fermer
un formulaire
Elments
89

</form>
L'attribut action dfinit le document ou
l'adresse o les donnes du formulaire seront
transmises, et method dfinit la mthode
d'envoie (GET ou POST).
VII.6 Elments dun formulaire
Tag de dfinition des lments
<INPUT type="text" size="x" maxlength="m"
name="label" value="texte">
Attributs :
Les formulaires
Introduction
La mthode Get
La mthode Post
Lattribut Action
Ouvrir et fermer
un formulaire
Elments
90
Attributs :
size longueur de la zone du texte ;
maxlength nombre de caractres maximal autoris
;
name identification ;
value pour inscrire un texte dans le champ.
VII.6.1 Boite de saisie simple
Zone ou on peut taper du texte
<input type="text" name="nom" size="25">
L'attribut type dfinit le type de l'lment, name
donne le nom de l'lment, size sa longueur en
pixel.
Les formulaires
Introduction
La mthode Get
La mthode Post
Lattribut Action
Ouvrir et fermer
un formulaire
Elments
91
pixel.
VII.6.2 Cases cocher et boutons radio
Case cocher :
<input type="checkbox" name="nom" value="valeur">
Bouton radio :
<input type="radio" name="nom2" value="valeur2">
Voir rsultat
Les formulaires
Introduction
La mthode Get
La mthode Post
Lattribut Action
Ouvrir et fermer
un formulaire
Elments
Exemple 1 :
Cours disponibles :<br><br>
92
<br><br> <input type="radio" name="nombre" value="1">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> <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>
VII.6.3 Listes
Permet un choix multiple
Syntaxe :
<SELECT NAME="nomdelaliste" [SIZE] [MULTIPLE]>
<OPTION VALUE="valeur1">Choix1
Les formulaires
Introduction
La mthode Get
La mthode Post
Lattribut Action
Ouvrir et fermer
un formulaire
Elments
93
<OPTION VALUE="valeurX" [SELECTED]>ChoixX
</SELECT>
VII.6.3.1 Liste simple
Exemple 2 :
<select name="cours">
Voir rsultat
Les formulaires
Introduction
La mthode Get
La mthode Post
Lattribut Action
Ouvrir et fermer
un formulaire
Elments
94
<option value="java">Java</option>
<option value="catia">Catia V5</option>
<option value="html">Html</option>
<option value="Algo">Algorithme</option>
</select>
VII.6.3.2 Liste
Voir rsultat
Les formulaires
Introduction
La mthode Get
La mthode Post
Lattribut Action
Ouvrir et fermer
un formulaire
Elments
Exemple 3 :
<select name="cours" size="4">
95
<option value="java">Java</option>
<option value="html" selected>Html</option>
</select>
VII.6.3.3 Liste choix multiples
Voir rsultat
Les formulaires
Introduction
La mthode Get
La mthode Post
Lattribut Action
Ouvrir et fermer
un formulaire
Elments
Exemple 4 :
<select name="cours" size="4" multiple>
96
<option value="java" selected>Java</option>
<option value="html" selected>Html</option>
</select>
VII.6.4 Zone de textes
Tag <textarea>, </textarea>
<textarea name="nom" cols="15" rows="5">
</textarea>
cols dfinit la longueur de la bote de texte et rows
sa largeur.
Les formulaires
Introduction
La mthode Get
La mthode Post
Lattribut Action
Ouvrir et fermer
un formulaire
Elments
97
sa largeur.
VII.6.5 Boutons d'envoi et de
rinitialisation de formulaire
Syntaxe :
<input type="submit" value="Valider !">
<input type="reset" value="Effacer">
Submit : envoie des donnes du formulaire vers sa
destination (celle indique dans l'attribut action de la
Les formulaires
Introduction
La mthode Get
La mthode Post
Lattribut Action
Ouvrir et fermer
un formulaire
Elments
98
destination (celle indique dans l'attribut action de la
balise form),
Reset : efface contenu du formulaire
Pour remplacer le bouton par une image : <INPUT
type="image" src="url image" alt="texte">
Valider Effacer
VII.6.6 Bote de saisie masque
Type= " password" : Mot de passe
<INPUT type="password" size="x" maxlength="m"
name="label" value="texte">
Attributs identiques ceux de type="text"
Les formulaires
Introduction
La mthode Get
La mthode Post
Lattribut Action
Ouvrir et fermer
un formulaire
Elments
99
VII.6.7 Slecteur de fichier
Type : "file"
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 :
Voir rsultat
Les formulaires
Introduction
La mthode Get
La mthode Post
Lattribut Action
Ouvrir et fermer
un formulaire
Elments
100
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>
VII.6.8 Elment Button
<BUTTON type="submit / reset / button" name="label"
value="texte" >
texte, code HTML
</BUTTON>
Les formulaires
Introduction
La mthode Get
La mthode Post
Lattribut Action
Ouvrir et fermer
un formulaire
Elments
101
Nom <INPUT type="text"><BR>
Prnom <INPUT type="text"><BR>
Mot de passe <INPUT type="password"><BR>
<BUTTON type="submit">
<IMG src="soumettre.jpg" align="center">
<BR>cliquez-moi !!!
</BUTTON>
VII.6.8 Donnes caches
Permet denvoyer des donnes caches
au serveur linsu de lutilisateur
Les formulaires
Introduction
La mthode Get
La mthode Post
Lattribut Action
Ouvrir et fermer
un formulaire
Elments
102
<INPUT type="hidden" name="label"
value="texte">
Ajout au formulaire avant l'envoi des
donnes.
Chapitre VIII : Les feuilles de style
VIII.1 Introduction
VIII.2 Syntaxe CSS
VIII.3 Classes de style
VIII.4 Attribut class
103
VIII.5 Sous classe de style (ID)
VIII.6 Utilisation dune sous-classe de style
VIII.7 Divers
VIII.8 Dfinition dans des fichiers externes
VIII.9 Utilisation ponctuelle de style
VIII.1 Introduction
CSS : Cascading Style Sheets
Permet rutilisation de styles de manire
modulaire
Balise <style> entre <head> et </head> :
Feuilles de style
Introduction
Syntaxe CSS
Classes de style
Attribut class
Sous classe de style (ID)
Utilisation dune
sous-classe de style
Divers
Dfinition dans
des fichiers externes
Utilisation ponctuelle
104
Balise <style> entre <head> et </head> :
Dfinit une zone contenant dfinition des styles
Indiquer le mode de description utilis grce type:
text/css : description la norme CSS
text/javascript : description en langage JavaScript
VIII.2 Syntaxe CSS
Par exemple :
<STYLE Type="text/css">
Mot-cl
valeur
Zone de
style
De type CSS
Feuilles de style
Introduction
Syntaxe CSS
Classes de style
Attribut class
Utilisation dune
Divers
Dfinition dans
105
P {font-size : 16pt ; color : blue;}
</STYLE>
Df. dun
Style pour
les
paragraphes
Df. dun
Style tjrs
entre
accolades
VIII.2 Syntaxe CSS
Par exemple :
Voir rsultat
Feuilles de style
Introduction
Syntaxe CSS
Classes de style
Attribut class
Utilisation dune
Divers
Dfinition dans
Exemple 1 :
<html>
<head>
<title>Partie 8 Exemple 1 : Feuilles de style</title>
<style type="text/css">
106
P {font-size:16pt;color:blue;}
</style>
</head>
<body>
Texte qui n'est pas dans un paragraphe
<p>
Texte dans un paragraphe
Application du style
</p>
</body>
</html>
VIII.2 Syntaxe CSS : mots-cl
nom
qualificatif
Tiret de
sparation
Feuilles de style
Introduction
Syntaxe CSS
Classes de style
Attribut class
Utilisation dune
Divers
Dfinition dans
107
font - weight
font - size
Tout lment de structure Html peut
avoir un style particulier (<h1>,<p>,<cite>,)
Mais style pour un paragraphe sapplique
tous les paragraphes
Feuilles de style
Introduction
Syntaxe CSS
Classes de style
Attribut class
Utilisation dune
Divers
Dfinition dans
108
tous les paragraphes
Pour affiner :
Adjoindre autant de classe particulires pour un
lment
Gnrer des classes pour nimporte quelle balise
Par exemple :
.blanc{color:white}
code.rouge{color:red}
Feuilles de style
Introduction
Syntaxe CSS
Classes de style
Attribut class
Utilisation dune
Divers
Dfinition dans
109
code.rouge{color:red}
p.grasbleu{
color:blue;
font-weight:bold;
}
</style>
Permet daffecter une classe spcifique
une balise
Reoit en paramtre le nom de la classe
Exemple dutilisation :
Feuilles de style
Introduction
Syntaxe CSS
Classes de style
Attribut class
Utilisation dune
Divers
Dfinition dans
110
Exemple dutilisation :
<p class=blanc>Paragraphe en blanc</p>
<body class=grasbleu>.</body>
VIII.5 Sous-classe de style (ID)
Comment faire si lon souhaite deux couleurs
dans un mme paragraphe ?
Dfinit un modificateur
Feuilles de style
Introduction
Syntaxe CSS
Classes de style
Attribut class
Utilisation dune
Divers
Dfinition dans
111
Dfinit un modificateur
Indicateur de
dfinition dun ID
.maclasse{color=blue;font-size=15pt;font-weight=italic;}
#rouge{color:red}
</style>
Nom de lID
classe
VIII.6 Utilisation dune sous classe de
style
Attribut ID
Syntaxe : <p class=maclasse id=rouge>
Peut tre utilis seul ou pour raliser une exception dans
une classe
Voir rsultat
Feuilles de style
Introduction
Syntaxe CSS
Classes de style
Attribut class
Utilisation dune
Divers
Dfinition dans
<html>
112
<html>
<head>
<title>Partie 8 Exemple 2 : Feuilles de style</title>
.maclasse{color=blue;font-size=15pt;font-weight=bold;}
#rouge{color:red}
</style>
</head>
<body>
<p class=maclasse>texte en 15 pt, bleu et gras</p>
<p class=maclasse id=rouge>texte en 15 pt, gras mais en rouge</p>
<p id=rouge>police par dfaut mais en rouge</p>
</body>
</html>
VIII.7 Divers
Application de style un bloc entier :
<div class=maclasse>bloc</div>
<span class=maclasse>bloc</span>
Groupement :
Feuilles de style
Introduction
Syntaxe CSS
Classes de style
Attribut class
Utilisation dune
Divers
Dfinition dans
113
H1,H2,H3 {color : blue}
Style dans un contexte :
H3 CITE {color : blue}
Hritage des styles :
<h1 class=maclasse>Il est <b>6</b> heures</h1>
VIII.8 Dfinition dans des fichiers
externes
Objectif feuilles de style : appliquer des styles
un ensemble de page Web
Recopier dans chaque pages Web les
Feuilles de style
Introduction
Syntaxe CSS
Classes de style
Attribut class
Utilisation dune
Divers
Dfinition dans
114
Recopier dans chaque pages Web les
dfinitions des styles : pnible
Possibilit de dcrire les diffrentes classes,
id, dans un fichier externe
VIII.8.1 Le fichier de style
Ne contient pas de balise <style>
Commentaires : /* */
Ouvrir le bloc-notes
Exemple :
Voir rsultat
Feuilles de style
Introduction
Syntaxe CSS
Classes de style
Attribut class
Utilisation dune
Divers
Dfinition dans
115
Exemple :
Enregistrez en messtyles.css
/*Exemple de fichier de style*/
.maclasse{color=blue;font-size=15pt;font-STYLE:italic;}
#rouge{color:red}
VIII.8.2 Utilisation des fichiers externes
Solution 1 : Balise Link
Syntaxe : <link rel=stylesheet type=text/norme
href=url_du_fichier_style>
Attribut rel= stylesheet : indique que lon utilise une
feuille de style
Voir rsultat
Feuilles de style
Introduction
Syntaxe CSS
Classes de style
Attribut class
Utilisation dune
Divers
Dfinition dans
116
Attribut type : choix des deux normes de dfinitions
des styles (text/css ou text/javascript)
Attribut href : URL du fichier externe contenant les
styles
Solution 2 : Balise <style>
Syntaxe : <style type=text/norme
src=url_du_fichier_style> </style>
VIII.8.2 Utilisation des fichiers externes
Voir rsultat
<html>
<head>
<title>Partie 8 Exemple 3 :
Feuilles de style</title>
<link rel="stylesheet"
type="text/css" href="style.css">
.style1{
color:black;
font-family:Arial;
font-size:14px;
}
a:visited{
color:blue;
Exemple8_3.html
Style.css
Feuilles de style
Introduction
Syntaxe CSS
Classes de style
Attribut class
Utilisation dune
Divers
Dfinition dans
117
type="text/css" href="style.css">
</head>
<body class="style1">
<p>
Tous les lments de
cette page obissent aux
lois de la feuille de style.
Avec des magnifiques
<a href="#">liens</a>
</p>
</body>
</html>
color:blue;
font-family:Arial;
text-decoration:underline;
}
a:hover{
color:white;
font-family:Arial;
text-decoration:none;
background-color:#6477B8;
}
a:active{
color:black;
font-family:Arial;
text-decoration:underline;
}
VIII.9 Utilisation ponctuelle de style
Possibilit dutiliser ponctuellement des styles
Attribut style :
<p style="font-size=50;color=red">Mon texte</p>
Feuilles de style
Introduction
Syntaxe CSS
Classes de style
Attribut class
Utilisation dune
Divers
Dfinition dans
118
<p style="font-size=50;color=red">Mon texte</p>
Bibliographie
Julien Gardeux, Langage HTML
Frdric Gava, Initiation aux technologies
de linformation
Philippe Chalat, Daniel Charnay, HTML et
119
Philippe Chalat, Daniel Charnay, HTML et
JavaScript , Editions Eyrolles
Emmanuel Nauer, HTML
http://www.w3.org (version anglaise)

Cours 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

Cours HTML

Transféré par

Droits d'auteur :

Formats disponibles

Le langage HTML

Que fait un navigateur qui rencontre un document dun type inconnu ?

Vous aimerez peut-être aussi