HTML, Javascript, XHTML & Css

design graphique / web design
// HTML, Javascript
XHTML & CSS

version 1.0
date
28 / 04 / 2010
auteur
Loc Swiny
contact
mr@sweeen.com
HTML, Javascript, XHTML & CSS
// sommaire
HTML
01.
Introduction au langage HTML
02.
Introduction aux principes gnraux du webdesign et premire maquette
03.
HTML, les bases
04.
La balise <BODY>
05.
Texte / alignement, formatage, listes
06. Liens
07.
Images & Map
08. Tableaux
09.
Frames & I-Frames
10. Formulaires
11.
Rcapitulatif des balises les plus courantes
JAVASCRIPT
13.
Introduction au Javascript
14.
Menus dynamiques
15. Popup
16.
Full screen
17.
Restriction daccs au contenu
XHTML
18.
Introduction au XHTML
CSS
// page. 03
// page. 06
// page. 11
// page. 15
// page. 16
// page. 24
// page. 27
// page. 32
// page. 36
// page. 40
// page. 46
// page. 47
// page. 50
// page. 54
// page. 57
// page. 58
// page. 59
19.
Introduction et principe de base
20. Slecteurs
21. Proprits
22.
Cascades et conflits dhritage
23. Positionnement
24.
Feuille de style pour limpression
25.
Trucs & astuces
// page. 64
// page. 68
// page. 72
// page. 81
// page. 82
// page. 91
// page. 92
LEXIQUE GENERAL
// page. 97
01. Introduction au langage HTML
I.
HISTORIQUE
II.
qui utilise le html ?
III.
apprendre le html
01. Introduction au HTML
Le HTML ou HyperTexte Markup Language est le langage de publication utilis sur le World Wide Web.
Trs facile matriser, il sagit tout simplement dun langage balises (tags" au format ASCII), dlimites entre
crochets et affines dans leur formes par des attributs ; ces instructions places dans un simple fichier texte au
format .html (ou .htm) sont ensuite interprtes par les diffrents navigateurs pour en faire apparaitre le contenu sur
votre cran
I. HISTORIQUE
Cest Tim Berners-Lee qui a crit et dvelopp ce langage pour rpondre aux besoins du systme dchange
dinformations quil venait dinventer : le World Wide Web.
Pour expliciter physiquement ces changes entre machine, un protocole spcifique a t mis en place, cest le HTTP
(Hyper Text Transfert Protocol) ; moyen simple et efficace daccder sur un rseau des documents lis entre eux
par des hyperliens.
Ecrits en HTML, les documents senchanent les uns les autres par un simple clic de souris et sont transports
jusquau lecteur grce au protocole HTTP.
Un leger point historique...
1991 / HTML 1.0
Le language HTML voit le jour au au CERN (Centre dtudes et de recherches nuclaires) situ prs de Genve.
Il y a peu de balises : on peut cependant insrer des images, crer des liens hypertextes, mais tout cela en noir, sur
un fond gris, et sans interface graphique !
1995 / HTML 2.0
Cette norme voit apparatre des possibilits de mise en page avec des tableaux.
1996 / HTML 3.0
De nouvelles balises et de nouveaux attributs sont insres. Listes, Cartes cliquables, Frames...
1998 / HTML 4.0
Outre de nouvelles commandes (I-Frames), un nouveau principe rvolutionnaire de mise en page sparant le fond et
la forme est mis en place, ce sont les feuilles de style en cascade (css / cascading style sheet).
2000 / XHTML
Mise jour majeure du langage qui devient XHTML. Cest lavnement du Web 2.0.
2010 / HTML 5.0 (?)
La mise en place dune nouvelle standardisation du langage XHTML est prvue pour la nouvelle dcennie venir.
Que nous rserve telle ?!
II. qui utilise le html ?

Avant darriver au stade de produit fini permettant la consultation par linternaute des informations quil contient, la
vie dun site Internet se construit en suivant plusieurs tapes dont la construction HTML nest quun des jalons.
Dans le process moderne de la construction dun produit de communication interactive, ce sont les intgrateurs,
situs juste aprs les infographistes et juste avant les developpeurs (ingnieurs informaticiens responsables de
limplmentation des fonctions dynamiques du produit) qui sont en charge de la construction des pages HTML.
Ils y incluent textes, images, documents flash, sons et vidos en fonction des recommandations graphiques des
studios cratifs et cest eux tout particulirement que lon demande une excellente connaissance du code.
01. Introduction au HTML
III. apprendre le html

Si vous navez jamais consult le code source dune page HTML, connectez-vous sur une page avec votre
navigateur favori et consultez son fichier source" (Affichage/Source, ou Afficher la source" avec le clic droit de la
souris lorsque le pointeur est sur la page).
De par sa structure des plus lmentaire ainsi que par sa simplicit physique, apprendre le HTML pour integrer un
ensemble de pages web et les rendre cohrentes entre elles ne ncessite aucune comptence en terme de langage
de programmation.
On peut crire du HTML avec un diteur de texte de base (Notepad, ou Simple Text), ou en utilisant un traitement de
texte condition denregistrer le fichier au format texte seulement", avec lextension .html.
On peut galement utiliser des diteurs interface dintgration accompagne de type Dreamweaver, mais il est
toutefois recommand de bien connatre la base du langage pour les utiliser correctement afin den optimiser les flux
de production.
A larrive, la phase la plus dlicate de la construction dun produit de communication interactive ne rside pas
dans son intgration mais plus dans la comprhension et lapplication des process et mthodes qui vont rendre sa
cration plus fonctionnelle, fluide et efficace.
Ce que nous allons voir ensemble...
02. Introduction auw principes

gnraux du webdesign & premire
maquette
I.
GENERALITES
II.
un peu dordre et de mthode
III.
le contenu
IV. larchitecture
1. Arborescence
2. Liens
3. Modularit
V.
la forme
1. Zoning
2. Format technique
3. Format visuel

02. Introduction au webdesign
I. GENERALITES
Avant de se lancer dans lhabillage graphique ou mme lintgration dun produit, il convient de rflchir sa finalit
et den dfinir le contenu, larchitecture, et la forme gnrale...
Pour ce faire des outils sont votre disposition : le brief cratif, le benchmark de referencement sectoriel, une
bonne connaissance de la typologie, des contraintes dintgration et de larchitecture de linformation des sites
internet (cf. Methodologie des metiers du design interactif).
Ajoutez lensemble un gout prononc pour la culture design et ses publications, votre curiosit naturelle, une
bibliothque de sources graphiques bien fournie (images bitmap & vectorielles, fontes, brosses photoshop...) et un
peu de talent... mais noubliez jamais quau dbut tout commence toujours par une page blanche et un stylo pour
esquisser vos premires recherches.
II. un peu dordre et de mthode

Avant mme denvisager toute activit productive, prenez le temps dadopter une logique de traitement et
dordonnancement de vos dossiers de travail. Travailler avec une nomenclature de classification redondante vous
permettra de gagner un temps prcieux lors du dveloppement de projets futurs.
Bien quen la matire il nexiste aucune rgle pr-tablie, il vous est conseill dadopter la nomenclature suivante :
# production
# anne
# n de dossier_nom du client
# admin
tous documents de travail fournis ou cres (brief, benchmark, charte graphique etc...)
# logos docs .jpg basse dfinition en racine
# eps
docs illustrator
# psd
docs photoshop
# maquette
docs .jpg en racine
# psd
docs photoshop
# print docs .jpg basse dfinition en racine
# indd
docs indesign
# eps
docs illustrator
# pdf
docs exports au format pr-print
# psd
docs photoshop
# sources
# images
docs images (.jpg, .tiff, .png, etc...)
# flash
docs .fla et .swf
# textes
docs redactionnels (.txt, .doc, etc...)
# web
docs .html finaux
# arborescence variable (cf. IV. larchitecture)
Quitte optimiser votre process de developpement, vous pouvez mme crer un rpertoire _dossier type"
contenant les dossiers pr-cres que vous naurez plus qua dupliquer er renommer la cration de tout nouveau
projet
III. le contenu
La dfinition du contenu de tout produit de communication interactive est certainement un des points les plus
important dgager en amont du projet. Cest sa dfinition exhaustive qui vous permettra de calibrer correctement le
contenu de chaque rubrique et donc de le valoriser de faon la plus efficace possible.
Il nest en effet rien de plus dsagrable consulter quune page au contenu mal calibr, soit parce que trop vide"
soit parce que trop riche" en information. Une bonne dfinition des contenus donnera vos visiteurs lenvie de
revenir sur votre produit, cest donc une phase de construction ne surtout pas ngliger.
Matrisez le sujet abord : Mme si vous ntes pas familier du produit trait, prenez le temps de vous
renseigner sur ce dernier, vous serez pr la suite plus laise lorsquil sagira darchitecturer linfo.
Dgagez les principales rubriques : Soyez mme de proposer un rubriquage le plus cohrent possible
par rapport au produit traiter ; ce faisant en devancant la demande du client vous eviterez lecueil dune
arborescence mal quilibre.
Prparez vos sources : Runissez et contrlez textes, paragraphes, orthographe, images, contenus
interactifs... plus vous aurez une vision complte de la quantit de contenu integrer, plus votre produit sera
cohrent et efficace.
IV. larchitecture
Sous peine de courir trs vite la catastrophe (dans le cas de produits la profondeur consquente et/ou
volutive) et de perdre un temps prcieux lors de la phase dintgration, dgagez au plus tt larchitecture physique
(arborescence) de votre site.
1. Prparez larborescence de votre site.

Dans le dossier web". Il sagit en fait de la cration/localisation physique des dossiers qui vont accueillir vos pages.
A linstar de votre dossier de travail une bonne nomenclature de dnomination de toute arborescence est essentielle
laccompagnement dun travail propre et clair.
# web

index.html
fichier html de la page daccueil

style.css
feuille de style du produit

javascript.js
moteurs javascript du produit
# images
dossier des images communes TOUTES les pages du site (fonds, navigation, etc...)

# nom de rubrique_01 dossier de la rubrique
index.htm fichier html de la page de la rubrique
# images
dossier des images communes la rubrique UNIQUEMENT

# nom de rubrique_02 dossier de la rubrique
# images

# etc...

dossier de la rubrique
# images
NB : En raison des standards referentiels (google et autres moteurs de recherche), votre premire page (page
daccueil, homepage, ...), doit se nommer index.html. Il est de plus prfrable que les noms de vos pages dossiers
ne dpassent pas 8 caractres.
2. Spcifiez les liens vers vos diffrentes pages.

Pour bien visualiser la navigation entre les pages de votre produit, rien ne vaut un bon croquis qui vous permettra de
formaliser correctement cette dernire lorsque vous la formaliserez physiquement dans votre code (cf. Methodologie
des metiers du design interactif / 08. Architecture de linformation).
3. Modularit du produit.
En fonction de sa profondeur et/ou de la commande client, pensez architecturer votre produit pour quil puisse, au
cas chant, accueillir de nouvelles rubriques. Dans cette optique votre maquette se doit de ne pas tre trop rigide"
graphiquement parlant.
V. la forme
1. Zoning
Afin de faciliter lintgration du code avec un diteur html, nhsitez pas raliser un gabarit structurant de votre
future maquette faisant apparaitre le zoning" de votre produit ; ceci galement dans le but daffecter aux lments
des ctes en pixels pour une mise en page soigne.
Dessinez un premier croquis de votre produit
Spcifiez les ctes en pixels
2. Format technique
Le developpement dun produit de communication interactive, de par la finalit de son support de diffusion (cran) ne
senvisage pas de la mme manire quun produit imprim.
Voii un rappel des diffrences principales prendre en considration lors de la cration de la maquette :
(cf. Methodologie des metiers du design interactif / 09. Contraintes html des projets de communication interactive)
3. Format visuel
A contrario de ldition de documents destins limprimerie (dans un format fixe donc), lun des paramtres les plus
importants prendre en compte lors de la construction dun produit de communication interactive est la modularit
du support final.
En effet, dans lunivers de la cration interactive vous allez vous heurter la modularit de...
La multiplicit des plateformes
La multiplicit des systme dexploitation
La multiplicit navigateurs
La diversit des dfinitions dcrans
MAC / PC
MAC OS X / WINDOWS XP, Vista, Seven / LINUX
OPERA / SAFARI / FIREFOX / INTERNET EXPLORER 6, 7, 8
1024x768 / 1152x864 / 1280x1024 / 1600x1200
... pour ne citer que les paramtres les plus importants considerer. Nous aurions p aussi citer la puissance des
connexions proposes par les fournisseurs daccs ou bien encore la qualit daffichage des couleurs lcran et la
puissance des machines.
Il est donc essentiel lors de la cration dune interface de penser tout ces paramtres pour viter de vous
confronter un conflit (voir une impossibilit) dintgration dlment lors de la dcoupe de ce dernier.
Pour eviter les migraines, et dans le cadre de la construction dun produit classique diffusion dinformation verticale
(ceci excluant de facto les formats et exprimentation plus exotiques) il est conseill de travailler partir dun gabarit
au format max de 1600x1200 pixels incluant une zone utile" centre de 1000 pixels de large.
1600
1000
1200
10
03. HTML, les bases
I.
introduction
II.
LE squelette dune page
1. Len tte / HEAD
2. Le corps / BODY
III. les balises
1. Gnralits
2. Balises BLOC vs. INLINE
IV.
les attributs
V.
quelques regles simples pour dbuter
11
03. HTML, les bases
I. introduction
Comme nous lavons vu dans le premier chapitre, le HTML est un langage de description qui pour formater et
mettre en page ses contenus utilise des balises (tags) dlimites entre crochets et affines dans leur formes par des
attributs. A laide de ces attributs et des valeurs insres, vous allez dfinir la forme de votre texte (gras, italique,
polices...), inclure des images, des animations, de la vido, du son, et des liens vers dautres pages... qui seront
ensuite interprtes par les diffrents navigateurs pour en faire apparaitre le contenu sur votre cran
II. LE squelette dune page

Une page HTML est divise en deux parties : len-tte (HEAD) et le corps (BODY) de la page...
<html>

<head>

<title> Le titre de la page</title>

</head>

<body>
<font face="arial" size="1">texte</font>

</body>
</html>
1. Len tte / HEAD

Invisible lcran, cette partie regroupe toutes les informations ncessaires un bon affichage de votre page par les
diffrents navigateurs Internet. Dans cette partie vont se joindre :
La balise <title> : Pour le titre de la page
<title>titre de la page</title>
Les balises <meta> : Aussi appelles meta-balises". Principalement utilises pour lindexation et le
rfrencement des sites par les moteurs de recherche, ces dernires sont devenues facultatives, voire
obsoltes. Les seules balises absolument ncessaires une page sont TITLE et DESCRIPTION.
<meta title="nom du site">
<meta description="description du site">
Le character set : HTML etant optimis pour une utilisation en langue anglaise (langage nutilisant pas
daccent), il vous est plus que fortement conseill dappliquer une mta balise de dfinition dalphabet
prenant en compte ces derniers sous peine dtre condamn les signigfier physiquement dans le code
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Lappel des feuilles de style :
<style type="text/css">...</style> pour un style interne la page et appliqu une balise de type inline
<link rel="stylesheet" type="text/css" href="monstyle.css"> pour une feuille de style externe la page
Lappel des javascript : Utilis pour les parties dynamiques de votre page

<script src="javascript.js" type="text/javascript" charset="iso-8859-1"></script>
2. Le corps / BODY
Cest la partie o, toujours grce lutilisation des balises, vous intgrerez les diffrents lments de votre page
visibles lcran : texte, hyperliens, images, animations, vido, son...
12
03. HTML, les bases
III. les balises

1. Gnralits
Les balises sont des squences de caractres interprtes par les navigateurs Web. Lorsque lon regarde
le contenu dune page HTML, on repre assez facilement les balises HTML, ce sont les portions de texte
semblables celle-ci :
<B>ceci est du gras</B>
Une balise est facilement identifiable, elle est constitue dun mot (ou plusieurs dans certain cas) encadre
par les signes infrieur < et suprieur >.
La plupart des balises doivent tre fermes.
La majorit des balises servent la mise en page (texte en gras, tableaux...), mais toutes ne sont pas
ddies la mise en page des documents, en effet, le HTML permet par exemple de donner des informations
sur le document lui mme (informations qui ne seront pas affiches), dappeler des fichiers externes comme
des images, des animations Flash, des sons...
Etant donn que cest un langage de description, il nest pas sensible la casse, en effet on peut aussi bien
crire :
<B>mot en gras</B> que <b>mot en gras</b>

Bien que la dfinition de cette notion soit un peu prmature ce stade (nous y reviendrons lorsque nous aborderons
lutilisation des CSS), il sagit dune notion essentielle prendre en considration.
Dans limmdiat gardez en memoire quil y a deux type de balises :
les balises de type BLOC : dont le dveloppement vertical est gnralement ddi aux dfinitions structurelles des
contenus de votre page (listes, tableaux, etc...)
<TABLE>
<TR>
<TD>
</TD>
</TR>
</TABLE>
les balises de type INLINE : dont le dveloppement horizontal est gnralement ddi aux dfinitions dapparence
des contenus de votre page (images, textes, etc...)
<FONT SIZE="1" COLOR="black"><I><B>texte</B></I></FONT>
13
03. HTML, les bases
IV. les attributs

Ce sont les spcifications particulires de chaque balise (dont nous verrons la liste affrente chacune lorsque
abord). Ils permettent de modifier leffet de la balise ou prcisent son action.
Les attributs figurent aprs le nom des balises dans les < > ; ils sont spars par des espaces et leur valeur est
indique entre guillemets.
<font face="arial" size="1" >texte</font>
Dans cet exemple concernant une ligne de texte, cette dernire a reu une balise de dfinition de police de caractre
font qui elle-mme a reu un attribut de famille face et de taille size
V. quelques regles simples pour dbuter

Pratiquement toutes les balises vont par paire (balises douverture et de fermeture)
par exemple : <b> et </b>
Ecrivez vos balises en minuscules, cela peut faciliter le transfert de votre code vers le XHTML
Essayer darer votre code au maximum en utilisant la tabulation de votre clavier chaque implementation
descendante de code (cf. exemple de squelette de page au dbut de ce dossier)
14
04. La balise <BODY>
Structure fondatrice des lments qui seront visibles sur votre page, la balise <BODY> est mme de recevoir un
certain nombre dattributs dont certains sont incontournables
balise
attribut
valeurs
effet
<body>
topmargin
leftmargin
pixel
pixel
dfinit les marges haute et basse de la page (pour I.E)

dfinit les marges gauche et droite de la page (pour I.E)
marginwidth
marginheight
pixel
pixel
dfinit les marges haute et basse de la page

dfinit les marges gauche et droite de la page
bgcolor
hexadecimale
dfinit la couleur du fond
background
url relatif
url absolu
dfinit la source relative de limage de fond

dfinit la source absolue de limage de fond
style
background-repeat: no-repeat; dfinit la non rptition du bkg (css intgre)

dfinit la rptition du bkg sur laxe X (css intgre)
background-repeat: x;
dfinit la rptition du bkg sur laxe Y (css intgre)
background-repeat: y;
bgproperties
fixed
dfinit si la capacit du fond scroller avec la page
scroll
yes / no / auto
dfinit la prsence de la barre de scroll sur la page
text
hexadecimale
dfinit la couleur du texte pour la page
link
alink
vlink
hexadecimale
hexadecimale
hexadecimale
dfinit la couleur des liens pour la page

dfinit la couleur des liens actifs pour la page
dfinit la couleur des liens visits pour la page
<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#aaaaaa" background="images/

bkg.jpg" style="background-repeat:no-repeat;" bgproperties="fixed" link="#ff0000" alink="#33FF00"
vlink="#FF9900" >
15
05. Le texte
I.
Les styles
II.
Les accents
III.
Les en ttes
IV.
Les paragraphes
V.
Alignement / FERRAGE
VI.
Les lignes horizontales
VII. Les listes

1. Les listes non numrotes
2. Les listes numrotes
16
05. Le texte
Au sein dune page HTML le texte simplmente dans le <body> de cette dernire. Ce dernier se doit dtre bien
entendu lui aussi cod. Voici les codes de mise en page de texte les plus courant
I. Les styles
gras
<b> ou <strong>
<strong>texte</strong>
italique
<I> ou <em>
<em>texte</em>
soulign
<u>
<u>texte</u>
exposant
<sup>
11<sup>e</sup> sicle
indice
<sub>
H<sub>2</sup>O
Bien entendu, les styles peuvent se cumuler pour une mme portion de texte.
Dans ce cas, lordre de dfinition des balises de style importe peu.
gras & italique <em> et <strong>
<em><strong>texte<strong></em>
ou
<strong><em>texte</em><strong>
II. Les accents

Mme si lutilisation judicieuse dun character set Europen (grant les les accents) plac en meta balise dans votre
header est cens vous eviter ce genre de dsagrment... il faut savoir que dans labsolu les accents se codent !
il se peut donc que vous ayez besoin de coder un accent au format ascii ou dutiliser un caractre spcial. Pour ce
faire, le principe est le suivant commencez par & puis la lettre accentuer puis le codage de laccent et terminez par
un point virgule.
Ainsi pour : vous crirez é
Ci-dessous un tableau rcapitulatif des principaux codes :
é
espace forc

è
€
à
£
ô
¥
â
©
ï
®
ü
™
œ
°
ç
«
õ
"
»
Pour une liste plus exhaustive des charactres spciaux :

http://www.commentcamarche.net/contents/html/htmlcarac.php3
17
05. Le texte
III. Les en ttes

Utiliss pour le titrage, ils changent la taille des caractres et gnrent un retour la ligne automatique.
h1
<h1>titre</h1>
h2 <h2>titre</h2>
h3
<h3>titre</h3>
h4
<h4>titre</h4>
h5 <h5>titre</h5>
h6 <h6>titre</h6>
IV. Les paragraphes

Un document lu, cest avant tout un document ar : il faut donc diviser le contenu de votre texte en plusieurs
paragraphes.
En terme de gestion du texte, les retours la ligne dans le code, de mme que les sauts de ligne et les tabulations ne
sont pas pris en compte. Il faudra donc les signifier par des balises spcifiques ddis.
Lorsque vous dveloppez vos pages, il existe deux balises qui permettent dobtenir, soit un saut de ligne, soit le
commencement dun nouveau paragraphe.
La balise <p> exprime le dbut dun paragraphe et gnre un double espace.
La balise de fermeture </p> est facultative
La balise <br> effectue un retour la ligne et gnre un simple espace.
<br> est une balise orpheline et donc ne se ferme pas..
V. Alignement / Ferrage
Pour ferrer un ou plusieurs bloc de texte, on appliquera lattribut align soit aux en-ttes, soit au paragraphe.
En labsence de lune ou lautre de ces balises il est toujours possible de ferrer un texte en utilisant la balise
universelle <div>...
balise
attribut
valeurs
effet
<Hx>
<p>
<div>
align
left
right
center
justify
aligne le texte sur la marge de gauche

aligne le texte sur la marge de droite
centre le texte entre les marges
justifie le texte

ferrage avec en-tte :
<h1 align="center">titre</h1>
ferrage avec paragraphe :
<p align="left">texte</p>
ferrage avec balise universelle : <div align="justify">texte</div>
NB : Par dfaut, comme toujours, lalignement du texte se fait sur la gauche.
18
05. Le texte
VI. Les lignes horizontales

Utiliser des lignes ou des filets horizontaux est trs pratique pour sparer les diffrentes parties de votre document.
Cette mthode sobtient avec la balise <hr> et ne ncessite pas de balise de fermeture.
Elle possde plusieurs attributs :
balise
attribut
valeurs
effet
<hr>
align
left
right
center
aligne la ligne horizontale gauche

aligne la ligne horizontale droite
aligne la ligne horizontale au centre
width
pixel, %
dfinit la largeur de la ligne
size
de 1 10
dfinit lpaisseur de la ligne
color
hexadecimale dfinit la couleur de la ligne (uniquement I.E)
noshade sans
sil est prsent, leffet dombre 3D est annul

<hr width="200" align="left" color="#ff0000" noshade>
VII. LISTES
La liste est une balise de type bloc relativement facile mettre en place en html. On en distingue deux type.
Toutefois, nous verrons par ailleurs que ce formatage sera gr de faon plus complte avec les CSS
1. Les listes non numrotes <ul>

Avec <ul> pour unordered list"
les lements apparaissant entre les balises <li>
2. Les listes numrotes <ol>

Avec <ol> pour ordered list"
les lements apparaissant entre les balises <li>
balise
attribut
valeurs
effet
<ul>
type
disc
circle
square
puce
cercle
carr
<ol>
sans
type
sans
I
A
a
chiffres arabes par dfaut

chiffres rommains
lettres alphabtiques majuscules
lettres alphabtiques minuscules
<ul type="disc">
<li>premier</li>
<li>deuxime</li>
</ul>
<ol type="a">
<li>premier</li>
<li>deuxime</li>
</ol>
19
06. Les liens
I.
GENERALITES
II.
DENOMINATIFS DES FICHIERS ET DOSSIERS
III.
LIENS RELATIFS
IV.
LIENS ABSOLUS
V. liens internes la page

VI.
CAS particulier, lattribut MAIlto"
20
06. Les liens
I. GENERALITES
A lintrieur de votre document, la balise <a> permet dtablir un lien hypertexte (lessence mme du Web) vers un
autre document ou encore vers lextrieur (vers un autre site web).
Tout ce qui se trouve entre la balise <a> et </a> sera considr un lien et apparatra par dfaut soulign lcran.
balise
attribut
valeurs
effet
<a>
href
url relatif
url absolu
dfinit la source relative du document

dfinit la source absolue du document
target
_self
_blank
_parent
appelle la page cible dans le cadre dappel

appelle la page cible dans une nouvelle fentre
appelle la page cible dans le cadre parent
(de niveau immdiatement suprieur)
appelle la page cible dans la fentre hte
(par-dessus le FRAMESET)
_top
title
variable dfinir
dfinit une description du lien

(identique lattribut ALT pour une image)
name
variable dfinir
dfinit une identit au lien
style
variable dfinir
dfinit une feuille de style
<a href="fichier.html" title="nomdufichier" target="_blank">texte</a>
II. DENOMINATIFS DES FICHIERS ET DOSSIERS

Les noms de vos fichiers et de vos dossiers vont constituer vos urls ; sachant que cest un des premiers endroits
que les moteurs de recherche vont analyser pour trouver les mots-cls, il est judicieux de choisir des noms de
dossiers en rapport avec le contenu de vos pages.
Par exemple une page portfolio, aura plus de chances dtre trouve si lurl est portfolio/index.htm que 02/index.htm
Les accents, les espaces et les caractres de ponctuation sont INTERDITS dans les noms de dossiers et de
fichiers, il est nanmoins possible dinclure des tirets et des tirets bas (underscore).
Il est recommand de nutiliser que des minuscules, car une fois vos pages sur un serveur, les urls deviennent
sensibles la casse.
index.htm" NEST PAS la mme chose que INDEX.htm"
21
06. Les liens
III. LIENS RELATIFS

Lorsquon cre des liens il faut indiquer le chemin du fichier.
Si on se trouve dans le mme rpertoire, il suffit dindiquer le nom de la page.
<a href="ficher.html">texte</a>
Si le fichier se trouve dans un autre dossier, il faut indiquer le chemin daccs au fichier.
En cas darborescence descendante
<a href="dossier/fichier.html">texte</a>
En cas darborescence montante
<a href="../index.html">texte</a>
Ici ../ permet de remonter dun niveau dans larborescence.
En cas darborescence 2 niveaux
<a href="../../index.html">texte</a>
Pour aller dun fichier qui se trouve dans un dossier vers un fichier qui se trouve dans un autre dossier, il
faut monter larborescence pour redescendre.
<a href="../dossier/fichier.html">texte</a>
Ici ../ permet de sortir du dossier en cours, puis il faut redescendre dans larborescence et indiquer dans quel
dossier on veut aller.
IV. LIENS ABSOLUS

Gnralement lorsque lon cherche placer un lien vers un site externe celui qui est en cours de dveloppement, il
faut indiquer ce dernier dans sa version complte et conforme au protocole HTTP (ou autre). Le principe de cration
des liens absolus est le mme que pour les liens relatifs.
<a href="http://www.google.com">texte</a>
V. liens internes la page

Les liens internes permettent de se dplacer lintrieur dun mme fichier html sans que le visiteur soit oblig de
faire scroller" la fentre du navigateur. Lutilisateur va donc cliquer sur un lien et il sera amen vers la destination du
lien interne.
Pour cela deux tapes sont ncessaires :
Dfinir la cible de destination du lien grace lattribut name
<a name="haut">texte</a>
et associer ce mme nom de destination au lien prcd dun diese.
<a href="#haut">lien vers le haut de la page</a>
Il nest pas ncessaire, dans ce cas prcis, de mettre un texte ou une image, entre les balises douverture et de
fermeture, mais le nom ne doit pas contenir despaces, ni daccents, ni de caractres spciaux.
22
06. Les liens
VI. cas particulier, lattribut MAIlto"

Cas particulier parmis les attributs de la balise <a>. Il sagit dun lien de messagerie qui fait apparatre le client de
messagerie du navigateur (Outlook Express pour IE par exemple).
<a href="mailto:nom@url.com">Contact</a>
Pour prdfinir lobjet du mail vous pouvez rajouter ?subject= au corps de lattibut...
<a href="mailto:nom@url.com?subject=lobjet de votre mail">Contact</a>
23
07. Les images
I. balise <img> et attributs

II.
Les cartes cliquables (ou map)
24
07. Les images
I. balise <img> et attributs

Pour afficher une image dans une page HTML on utilise la balise <img> assortie de ses attributs affrents, dont les
plus courants sont prsents ci aprs
Gnralement les lments graphique dune mme page sont stocks dans le repertoire images" dune mme
rubrique.
balise
attribut
valeurs
effet
<img>
src
url relatif ou absolu dfinir
dfinit la source relative ou absolue du document
name
variable dfinir
dfinit une identit limage
width
pixel
dfinit la largeur de limage
height
pixel
dfinit la hauteur de limage
align
left
right
top
middle
bottom
dfinit le positionnement de limage dans lespace
alt
variable dfinir
dfinit une description de limage
border
pixel
dfinit un cadre limage
bordercolor
hexadecimale
dfinit une couleur au cadre de limage
hspace
pixel
dfinit lespace horizontal entre limage et le contenu
vspace
pixel
dfinit un espace vertical entre limage et le contenu
<img src="images/nom.jpg" name="statue" width="75" height="100" border="0" alt="image">
25

II.
07. Les images
Les cartes cliquables (ou map)
Il sagit de dfinir des zones sensibles (donc cliquables) dans une image.
Il faut alors calculer les coordonnes de ces zones.
Il est possible de faire des zones carres ou rectangulaires, des cercles et des polygones.
Ici un carr, un cercle et un polygone...
Les coordonnes du carr/rectangle sont les coordonnes x et y des coins suprieurs gauche et infrieur droit.
ici : 198, 5, 297, 221
Les coordonnes du cercle sont celles du centre et du rayon.
ici : 119, 73, 65
Les coordonnes du polygone sont les points x et y de chaque point.
ici : 4,169, 51, 179, 102, 198, 131, 211, 144, 222, 5, 219
Dans la page il faut la fois dcrire la carte...
<map name="lecture">
<area shape="rect" coords="198,5,297,221" href="fleurs.html">
<area shape="circle" coords="119,73,65" href="jeune_fille.html">
<area shape="poly" coords="4,169,51,179,102,198,131,211,144,222,5,219" href="journal.html">
</map>
... et dans lappel dimage, relier limage ce code :
<img src="lire.jpg" width="300" height="225" border="0" usemap="#lecture">
NB : Il est possible de rajouter lattribut alt sur chacune des zones.
26
08. Les tableaux
I. generalits
II.

TABLEAUX AVEC FUSION

1. Lattribut colspan
2. Lattribut rowspan
2. Les attributs colspan & rowspan
27
08. Les tableaux
I. generalits
La balise <table> permet dinsrer un tableau votre page et cest lune des balises les plus utilises.
En effet les tableaux permettent une meilleure prsentation des informations, nombreux sont les sites qui utilisent les
tableaux pour obtenir une mise en page de type journal.
La cration des tableaux se passe essentiellement autour de 3 balises :
<table>
<tr>
<td>
le corps du tableau
une ligne du tableau
une cellule du tableau
Bien entendu, toutes ces balises doivent tres fermes pour indiquer la fin du tableau, dune ligne ou dune cellule.
<table>
<tr>
<td>
cell1
</td>
</tr>
</ table >
balise
attribut
valeurs
effet
<table>
cellpadding
cellspacing
pixel
pixel
dfinit lespace entre le bord du tableau et les cellules

dfinit lespace entre les cellules
width
height
pixel / pourcentage
pixel / pourcentage
dfinit la largeur du tableau

dfinit la hauteur du tableau
bgcolor
background
dfinit la couleur de fond du tableau

hexadecimale
url relatif ou absolu dfinir dfinit une image en arrire plan du tableau
border
bordercolor
bordercolorlight
bordercolordark
pixel
hexadecimale
hexadecimale
hexadecimale
dfinit la taille de la bordure

dfinit la couleur de la bordure
dfinit la couleur aux points culminants de la bordure
dfinit la couleur de lombre de la bordure
width
height
pixel / pourcentage
pixel / pourcentage
dfinit la largeur de la cellule

dfinit la hauteur de la cellule
bgcolor
background
dfinit la couleur de fond de la ligne et/ou de la cellule

hexadecimale
url relatif ou absolu dfinir dfinit une image en arrire plan de la cellule
align
valign
left / center / right

top / middle / bottom
dfinit lalignement horizontal du contenu

dfinit lalignement vertical du contenu
colspan
rowspan
unit numrique
unit numrique
dfinit la fusion de 2 cellules adjacentes sur une ligne

dfinit la fusion de 2 cellules adjacentes sur une colonne
<tr> &
<td>
28
08. Les tableaux
En principe, la hauteur et la largeur dune cellule sadaptent automatiquement aux donnes (texte ou image),
nanmoins, vous pouvez dfinir une hauteur et une largeur pour un tableau ou une cellule ; lespacement des cellules
et la taille des bordures peut tre aussi paramtrs.
Gardez lesprit que
La taille du tableau se dtermine en pixels ou en pourcentage.
La taille fixe a pour avantage de garder la mise en page, la taille en pourcentage sadaptera la taille de
lcran mais risque de modifier la mise en page.
La taille des cellules sadapte leur contenu.
<table cellspacing="0" cellpadding="0" width="100" height="100" bgcolor="#33cccc" border="0">
<tr bgcolor="#99ffff">

<td align="left" valign="top" width="50" height="50" bgcolor="#996666">

cell 1
</td>

<td align="right" valign="top" width="50" height="50">

cell 2
</td>
</tr>
<tr>

<td align="left" valign="bottom" width="50" height="50">

cell 3
</td>

<td align="right" valign="bottom" width="50" height="50">

cell 4
</td>
</tr>
</table>
29
08. Les tableaux
II. tableaux avec fusion

Les lignes et cellules dun tableau peuvent tres fusionns, afin dobtenir des zones de mise en forme de contenu
modulables et adaptes aux besoins dune maquette.
Cette fusion est ralis avec les attributs colspan et rowspan.
Pour fusionner 2 cellules adjacentes sur une ligne, lattribut COLSPAN est requis
Pour fusionner 2 cellules adjacentes sur une colonne ", lattribut ROWSPAN est requis
1. Lattribut COLSPAN
Sur une ligne : La ligne du haut stend sur 2 cellules
<TABLE width="100" border="1">
<TR>

<TD colspan="2">cell 1</TD>
</TR>
<TR>

<TD>cell 2</TD>

<TD>cell 3</TD>
</TR>
</TABLE>
cell 1
cell 2
cell 3
Sur plusieurs lignes : La ligne du haut stend sur 2 cellules mme chose pour la ligne du bas
<TR>

</TR>
<TR>

<TD>cell 2</TD>

<TD>cell 3</TD>
</TR>
<TR>

</TR>
cell 1
cell 2
cell 3
cell 4
</TABLE>
2. Lattribut ROWSPAN
La 1e ligne comporte la cellule 1 qui stend sur 3 ranges de colonne". Le terme colonne" ntant pas tout fait
exact syntaxiquement parlant puisquil sagit en fait dun ensemble de cellules situes les unes sous les autres
<TR>

<TD rowspan="2">cell 1</TD>

<TD>cell 2</TD>
</TR>
<TR>

<TD>cell 3</TD>
</TR>
</TABLE>
cell 1
cell 2
cell 3
30
08. Les tableaux
3. Les attributs COLSPAN et ROWSPAN

Comme vous pouvez vous en douter, les attributs colspan et rowspan peuvent sutiliser conjointement dans une
mme construction tabiulaire.
Nanmoins prenez garde la complxit syntaxique que de telles architectures peuvent engendrer.
En fonction de ce que vous choisirez de construire ou une logique et une ecriture irrprochable ( dfaut une bonne
dose daspirine) seront requises.
<TR>

<TD rowspan="4">cell 1</TD>

<TD colspan="3"> cell 2</TD>
</TR>
<TR>

<TD> cell 3</TD>

<TD> cell 4</TD>

<TD> cell 5</TD>
</TR>
<TR>


<TD> cell 7</TD>
</TR>
<TR>

<TD> cell 8</TD>

</TR>
</TABLE>
cell 1
cell 2
cell 3
cell 4
cell 6
cell 8
cell 5
cell 7
cell 9
31
09. Les frames & I-frames
I. generalits

1. Quest ce que les frames ?

2. Comment ca marche ?

3. Les attributs ROWS & COLS

4. Les liens appliqus aux frames

5. Compatibilit des navigateurs
III.
LES I-FRAMES
32
09. Les frames
I. generalits
1. Quest ce que les frames ?
Auparavant les navigateurs ne pouvaient afficher quun seul fichier HTML, mais on peut dsormais diviser en
plusieurs zones la page affiche. Ces zones ou fentres ou encore cadres se nomment frame.
Les frames sont apparues avec la version 3.0.dHTML et mme si bon nombre de Webmasters les utilisaient, elles
ntaient pas une composante officielle du langage.
Aprs quelques annes dutilisation intensives dans la fin de la priode pr web 2.0, les frame sont tombs en
disgrace pour des raisons doptimisation des protocoles de referencement. Elles ne sont donc presque plus utilises
aujourdhui.
Il nen reste pas moins que lorsquutilises avec parcimonie et bon escient, elles sont toujours un outil fort pratique.
2. Comment ca marche ?
Dans une page dindex, la balise <frameset> prend la place de la balise <body> ; cest elle qui dans un premier
temps va dfinir les cadres, quils soient verticaux ou horizontaux, ainsi que leurs dimensions (en % ou en pixels).
Voici deux exemples parmis les plus courants ainsi que leur code source...
Deux frame horizontales
<html>
<head>

<title>page avec frames</title>
</head>

<frameset cols="20,80">

<frame src="zone1.htm" name="zone1">

</frameset>
</html>
affichage
zone 1
zone 2
construction
frameset
zone 1
zone 2
Deux frame horizontales et deux frames verticales

<html>
<head>

</head>
affichage

<frameset rows="20,80">

<frameset cols="20,80">
</frameset>
</frameset>
</html>
construction
zone 1
zone 2
zone 3
frameset
zone 1
frameset
zone 2
zone 3
Bien entendu, la famille des balises <frame> va se voir enrichie par un certain nombre dattributs qui vont spcifier le
comportement de ces dernires.
33
balise
attribut
valeurs
effet
pixel / pourcentage
pixel / pourcentage
dfinit un format de frameset vertical

dfinit un format de frameset horizontal
frameborder
border
bordercolor
yes / no
pixel
hexadecimale
dfinit une bordure de frameset

dfinit la taille dune bordure de frameset
dfinit la couleur dune bordure de frameset
framespacing
pixel
dfinit lespace entre les cadres dun frameset
src
name
url relatif ou absolu dfinir dfinit la source relative ou absolue des frames
dfinit une identit chaque frame
variable dfinir
frameborder
border
bordercolor
yes / no
pixel
hexadecimale
dfinit une bordure de frame

dfinit la taille dune bordure de frame
dfinit la couleur dune bordure de frame
marginwidth
marginheight
pixel
pixel
dfinit la largeur des marges interieures dune frame

dfinit la hauteur des marges interieures dune frame
scrolling
yes / no / auto
dfinit lautorisation dattribution dune scrollbar
noresize
attribut sans valeur
interdit le redimenssionement manuel dune frame
<frameset> cols
rows
<frame>
09. Les frames
<html>
<head>

</head>

<frameset cols="20,80" frameborder="no" framespacing="10">

<frame src="zone1.htm" name="zone1" frameborder="no" scrolling="no" noresize>

<frame src="zone2.htm" name="zone2" frameborder="no" scrolling="auto" noresize>
</frameset>
</html>
3. Les attributs ROWS & COLS

rows et cols dfinissent le type de cadre, qui peut tre horizontal (rows/range) ou vertical (cols/colonnes).
Ils prennent une serie de valeurs spares par des virgules. Ces valeurs sont exprimes en pourcentage (valeurs
relatives) ou plus gnralement en pixel (valeurs absolues).
Une valeur exotique", ltoile (*) fera sajuster automatiquement la colonne ou la range concerne sur lespace
maximum laiss par les autre dans lensemble de frame.
<frameset cols="50,*">
4. Les liens appliqus aux frames

Normalement, les pages appeles par des liens saffichent dans la frame o les liens ont t activs, mais lattribut
de lien target permet dappeler un cadre par son nom dfini avec lattribut name.
<a href="index.htm" target="zone1">lien</a>
34
09. Les frames
5. Compatibilit des navigateurs

Mme si il est de plus en plus rare de trouver des navigateurs non compatibles, il faut nanmoins ne pas ngliger cet
aspect, sous peine de se passer de quelques visiteurs.
La technique consiste utiliser la balise <noframes> qui permet de spcifier un texte HTML en version normale.
Entre ces balises il faut donc, thoriquement, dvelopper un deuxime site : vous pouvez pour simplifier le travail
prciser des regrets polis et insrer des liens vers les sites officiels des navigateurs pour que le visiteur opte pour une
mise jour.
<frameset rows="20,80">


</frameset>
<noframes>
<body>

Dsol mais ce site utilise la technique des frames. Merci de faire la mise jour de votre navigateur.
</body>
</noframes>
III. LES I-FRAMES

La technique des cadres locaux sobtient avec la balise <iframe> elle permet dinsrer une fentre nimporte quel
endroit de votre document. Cette fentre fera rfrence un autre document HTML.
La balise <iframe> doit tre insre dans le corps de votre document, cest--dire entre <body> et </body>.
Elle a les mmes attributs que la balise <frame> plus les attributs width et height
balise
attribut
valeurs
effet
<iframe>
src
name
url relatif ou absolu dfinir dfinit la source relative ou absolue dune iframe
dfinit une identit chaque iframe
variable dfinir
width
height
pixel
pixel
dfinit la largeur dune iframe

dfinit la hauteur dune iframe
frameborder
border
bordercolor
yes / no
pixel
hexadecimale
dfinit une bordure

dfinit la taille dune bordure
dfinit la couleur dune bordure
marginwidth
marginheight
pixel
pixel
dfinit la largeur des marges interieures

dfinit la hauteur des marges interieures
scrolling
yes / no / auto
noresize
interdit le redimenssionement manuel
<iframe src="pageinterne.html" width="200" height="200" frameborder="0"></iframe>
35
10. Les formulaires
I. generalits
II.

CREATION
1. Method
2. Action
3. Enctype
III. les objets de formulaire

1. Champ de texte

2. Boutons radio (radiobox)

3. Cases cocher (checkbox)

4. Liste droulante

5. Boite de dialogue

6. Boutons
36
10. Les formulaires
I. generalits
Les formulaires permettent avant tout de faire ragir votre visiteur, de linviter laisser ses impressions, ses
commentaires.
La cration des formulaires se ralise grce plusieurs champs, dans lesquels le visiteur va entrer une information
ou opter pour un choix. Linformation est ensuite envoye, laide de scripts, sur le serveur qui vous hberge puis
renvoye, dans la plupart des cas, sur ladresse lectronique de votre choix.
II. CREATION
Nous traitons ici la structure du formulaire en html, lenvoi des donnes se faisant par .
La balise ddi aux formulaires est <form>. Elle possde 3 attributs :
method : method="post" (la plus courante)
action : action="mailto:nom@url" (si vous envoyez votre formulaire par email)
enctype : enctype="text/plain"
1. Method
2 valeurs sont proposes :
POST pour un formulaire classique
GET pour (par exemple) dfinir un moteur de recherche sur votre site
2. Action
Adresse le formulaire vers lURL du script CGI (fourni par le serveur qui hberge vos pages), qui accepte linformation
et vous le retourne suivant les paramtres dfinis.
Les valeurs les plus couramment utilises sont :
mailto:nom@url" : Pour lenvoi du formulaire par le logiciel de messagerie de votre visiteur.
/cgi-bin/mailer" : Pour lenvoi du formulaire par le script CGI de votre hbergeur
3. Enctype
Cet attribut spcifie le format des donnes envoyes, dans le cas o un protocole nimposerait pas de format prcis.
Il possde plusieurs valeurs dont :
text/plain" : Valeur utilise dans le cas dun formulaire classique
multipart/form-data" : Valeur utilise dans le cas o le formulaire comprendrait un fichier attach.
Ci-dessous un exemple de code complet :
<form method="post" action="mailto:bob@gmail.com?subject=mes questions en html" enctype="text/plain">
...
</form>
37
10. Les formulaires
balise
attribut
valeurs
effet
<form>
method
action
enctype
post
mailto:nom@url
text/plain
dfinit le format du formulaire

dfinit laction de transmission des donnes
dfinit le format des donnes transmises
<input>
type
dfinit le type de champ de saisie (texte ou bouton)
size
maxlength
name
value
text / radio / checkbox

submit / reset
pixel
pixel
variable dfinir
variable dfinir
<select>
name
variable dfinir
dfinit lidentit dun ou de plusieurs champs
<textarea>
name
cols
rows
variable dfinir
pixel
pixel
dfinit le contenu du champ lors de la rception

dfinit la largeur du champ
dfinit la hauteur du champ
dfinit le nombre de caractres visibles dans le champ

dfinit le nombre de caractres maximum la saisie
III. les objets de formulaire

1. Champ de texte
Il permet de laisser une courte information (nom, prnom, etc...)
<input type="text" size="20" maxlength="40" name="nomduchamp">
2. Boutons radio (radiobox)

Ils ne permettent quun seul choix.
<input type="radio" name="abonnement" value="oui">oui
<input type="radio" name="abonnement" value="non">non
oui
non
3. Cases cocher (checkbox)

Elles permettent un ou plusieurs choix.
<input type="checkbox" name="interet" value="musique">musique
<input type="checkbox" name="interet" value="danse">danse
<input type="checkbox" name="interet" value="informatique">informatique
musique
danse
informatique
38
10. Les formulaires
4. Liste droulante
Elle permet de dfinir un menu choix multiple.
<select name="pays">
<option>france</option>
<option>allemagne</option>
<option>espagne</option>
<option>italie</option>
</select>
france
5. Boite de dialogue
Elle permet dcrire des commentaires sans limitation de nombre de caractres.
<textarea cols="20" rows="4" name="commentaires">vos commentaires</textarea>
6. Boutons
Pour envoyer le formulaire et annuler les donnes inscrites dans le formulaire
<input type="submit" name="submit" value="envoyer">
<input type="reset" name="reset" value="annuler">
Envoyer
Annuler
Voici un exemple de formulaire, format dans un tableau :
39
11. Recapitulatif des balises les plus

courantes
I. body
II. texte
III.
TITRE / PARAGRAPHE
IV.
TRAIT HORIZONTAL
V. listes
VI. liens
VII. images
VIII. tableaux
IX. frames
X. i-frames
XI. formulaires
40
11. Recap des balises
I. BODY
balise
attribut
valeurs
effet
<body>
topmargin
leftmargin
pixel
pixel
dfinit les marges haute et basse de la page (pour I.E)

dfinit les marges gauche et droite de la page (pour I.E)
marginwidth
marginheight
pixel
pixel
dfinit les marges haute et basse de la page

dfinit les marges gauche et droite de la page
bgcolor
hexadecimale
dfinit la couleur du fond
background
url relatif
url absolu
dfinit la source relative de limage de fond

dfinit la source absolue de limage de fond
style
background-repeat: no-repeat; dfinit la non rptition du bkg (css intgre)

dfinit la rptition du bkg sur laxe X (css intgre)
background-repeat: x;
dfinit la rptition du bkg sur laxe Y (css intgre)
background-repeat: y;
bgproperties
fixed
dfinit si la capacit du fond scroller avec la page
scroll
yes / no / auto
dfinit la prsence de la barre de scroll sur la page
text
hexadecimale
dfinit la couleur du texte pour la page
link
alink
vlink
hexadecimale
hexadecimale
hexadecimale
dfinit la couleur des liens pour la page

dfinit la couleur des liens actifs pour la page
dfinit la couleur des liens visits pour la page
II. texte
balise
attribut
valeurs
effet
<b> / <strong>
<i> / <em>
<u>
<sup>
<sub>
/
/
/
/
/
/
/
/
/
/
gras
italique
soulign
exposant
indice
III. TITRE / PARAGRAPHE

balise
attribut
valeurs
effet
<H1>...<H6>
<p>
<div>
align
left
right
center
justify
aligne le texte sur la marge de gauche

aligne le texte sur la marge de droite
centre le texte entre les marges
justifie le texte
41
IV. TRAIT HORIZONTAL

balise
attribut
valeurs
effet
<hr>
align
left
right
center
aligne la ligne horizontale gauche

aligne la ligne horizontale droite
aligne la ligne horizontale au centre
width
pixel, %
dfinit la largeur de la ligne
size
de 1 10
dfinit lpaisseur de la ligne
color
hexadecimale
dfinit la couleur de la ligne (uniquement I.E)
noshade
sans
sil est prsent, leffet dombre 3D est annul
balise
attribut
valeurs
effet
<ul>
type
disc
circle
square
puce
cercle
carr
<ol>
sans
type
sans
I
A
a
chiffres arabes par dfaut

chiffres rommains
lettres alphabtiques majuscules
lettres alphabtiques minuscules
V. listes
VI. liens
balise
attribut
valeurs
effet
<a>
href
url relatif
url absolu
dfinit la source relative du document

dfinit la source absolue du document
target
_self
_blank
_parent
appelle la page cible dans le cadre dappel

appelle la page cible dans une nouvelle fentre
appelle la page cible dans le cadre parent
(de niveau immdiatement suprieur)
appelle la page cible dans la fentre hte
(par-dessus le FRAMESET)
_top
title
variable dfinir
dfinit une description du lien

(identique lattribut ALT pour une image)
name
variable dfinir
dfinit une identit au lien
style
variable dfinir
dfinit une feuille de style
42
VII. images
balise
attribut
valeurs
effet
<img>
src
url relatif ou absolu
dfinit la source relative ou absolue du document
name
variable dfinir
dfinit une identit limage
width
height
pixel
pixel
dfinit la largeur de limage

dfinit la hauteur de limage
align
left
right
top
middle
bottom
dfinit le positionnement de limage dans lespace
alt
variable dfinir
dfinit une description de limage
border
bordercolor
pixel
hexadecimale
dfinit un cadre limage

dfinit une couleur au cadre de limage
hspace
vspace
pixel
pixel
dfinit lespace horizontal entre limage et le contenu

dfinit un espace vertical entre limage et le contenu
VIII. tableaux
balise
attribut
valeurs
effet
<table>
cellpadding
cellspacing
pixel
pixel
dfinit lespace entre le bord du tableau et les cellules

dfinit lespace entre les cellules
width
height
pixel / pourcentage
pixel / pourcentage
dfinit la largeur du tableau

dfinit la hauteur du tableau
bgcolor
background
dfinit la couleur de fond du tableau

hexadecimale
url relatif ou absolu dfinir dfinit une image en arrire plan du tableau
border
bordercolor
bordercolorlight
bordercolordark
pixel
hexadecimale
hexadecimale
hexadecimale
dfinit la taille de la bordure

dfinit la couleur de la bordure
dfinit la couleur aux points culminants de la bordure
dfinit la couleur de lombre de la bordure
width
height
pixel / pourcentage
pixel / pourcentage
dfinit la largeur de la cellule

dfinit la hauteur de la cellule
bgcolor
background
dfinit la couleur de fond de la ligne et/ou de la cellule

hexadecimale
url relatif ou absolu dfinir dfinit une image en arrire plan de la cellule
align
valign
left / center / right

top / middle / bottom
dfinit lalignement horizontal du contenu

dfinit lalignement vertical du contenu
colspan
rowspan
unit numrique
unit numrique
dfinit la fusion de 2 cellules adjacentes sur une ligne

dfinit la fusion de 2 cellules adjacentes sur une colonne
<tr> &
<td>
43
IX. frames
balise
attribut
valeurs
effet
pixel / pourcentage
pixel / pourcentage
dfinit un format de frameset vertical

dfinit un format de frameset horizontal
frameborder
border
bordercolor
yes / no
pixel
hexadecimale
dfinit une bordure de frameset

dfinit la taille dune bordure de frameset
dfinit la couleur dune bordure de frameset
framespacing
pixel
dfinit lespace entre les cadres dun frameset
src
name
url relatif ou absolu dfinir dfinit la source relative ou absolue des frames
dfinit une identit chaque frame
variable dfinir
frameborder
border
bordercolor
yes / no
pixel
hexadecimale
dfinit une bordure de frame

dfinit la taille dune bordure de frame
dfinit la couleur dune bordure de frame
marginwidth
marginheight
pixel
pixel
dfinit la largeur des marges interieures dune frame

dfinit la hauteur des marges interieures dune frame
scrolling
yes / no / auto
noresize
interdit le redimenssionement manuel dune frame
<frameset> cols
rows
<frame>
X. i-frames
balise
attribut
valeurs
effet
<iframe>
src
name
url relatif ou absolu

dfinir
variable dfinir
dfinit la source relative ou absolue dune iframe

dfinit une identit chaque iframe
width
height
frameborder
border
bordercolor
marginwidth
marginheight
pixel
pixel
yes / no
pixel
hexadecimale
pixel
pixel
dfinit la largeur dune iframe

dfinit la hauteur dune iframe
dfinit une bordure
dfinit la taille dune bordure
dfinit la couleur dune bordure
dfinit la largeur des marges interieures
dfinit la hauteur des marges interieures
scrolling
yes / no / auto
interdit le redimenssionement manuel
noresize
44
XI. formulaires
balise
attribut
valeurs
effet
<form>
method
action
enctype
post
mailto:nom@url
text/plain
dfinit le format du formulaire

dfinit laction de transmission des donnes
dfinit le format des donnes transmises
<input>
type
dfinit le type de champ de saisie (texte ou bouton)
size
maxlength
name
value
text / radio / checkbox

submit / reset
pixel
pixel
variable dfinir
variable dfinir
<select>
name
variable dfinir
<textarea>
name
cols
rows
variable dfinir
pixel
pixel

dfinit la largeur du champ
dfinit la hauteur du champ
dfinit le nombre de caractres visibles dans le champ

dfinit le nombre de caractres maximum la saisie
45
12. Balises obsoltes
Avec la migration effective dHTML vers le format XHTML, il existe un grand nombre de balises et/ou dattributs qui
sont aujourdhui considres comme obsoltes car pour la plupart remplaces par du formatage en CSS.
Certaines disparaissent, dautres ont changes de syntaxe ; Suivant les recommandations du W3C, il est prfrable
de ne plus les utiliser.
Quelques exemples :
<b> ...</b> pour du gras est remplac par <strong>...</strong>
<i> ...</i> pour litalique est remplac par <em>...</em>
<font size="1"> ...</font> pour changer la taille du texte. Il y avait 7 tailles de texte, 1,2,3,4,5,6 et 7.
<font color="#000000"> ...</font> pour changer la couleur du texte. Choix de couleur en valeur hexadcimal.
<font face="Verdana, Arial,sans-serif"> ...</font> pour changer la police du texte en donnant une liste de police.
De mme, quelques attributs trouveront leurs quivalence au sein des mmes CSS (notament les attributs de la
balise <BODY>) :
ALIGN
WIDTH
HEIGHT
BORDER
BACKGROUND
BGCOLOR
HSPACE et VSPACE
LINK, VLINK, ALINK
46
13. Javascript
I. introduction
II.
Quest ce que le Javascript ?
III.
JAVA ou Javascript ?
IV.
A quoi ressemble un code Javascript ?
47
13. Javascript
I. introduction
Je ne saurai trop le rpter comme nous lavons voqu en dbut danne le but de ces leons nest pas de vous
transformer en ingnieur informaticien.
Lobjectif de cette partie est de vous dgrossir laspect quelque peu rbarbatif dune approche du langage Javascript
et de vous transmettre quelques unes des utilisations les plus utiles que vous aurez utiliser dans la construction de
vos architectures les plus courantes.
II. Quest ce que le Javascript ?

Le Javascript (ne pas confondre avec JAVA) est un langage informatique de type dynamique qui vous sera utile pour
amliorer la prsentation et linteractivit de vos pages Web.
Dynamique ?
Jusquici, toutes vos pages HTML taient statiques. Cela veut dire que le visiteur pouvait consulter votre site, mais
pas plus. Grce un langage dynamique, le visiteur peut lui-mme modifier" ou interagir sur certains lments de
votre site.
Trs utile pour traiter les vnements occasionns par un internaute sur une page web, le Javascript permet la mise
en place de menus dynamiques, douvrir et/ou fermer des fentres pop-up", de forcer une fentre de navigateur
souvrir en plein cran, et bien plus encore
III. JAVA ou Javascript ?

Ne pas confondre ces deux langages totalement diffrents. JAVA est un langage beaucoup plus complexe que
Javascript notamment parce que son code source est compil avant son excution ce qui assure notamment la
confidentialit de ce dernier (on naccde pas au code en faisant clic droit Afficher la source !!!).
Et a veut dire quoi, compil ? Une fois compil, le script ne peut plus tre modifi moins dtre dcompil. Un
script compil voit sa source cache.
A linverse, le Javascript et le HTML sont interprts, cest--dire que le code source sera visible et le fichier ne sera
pas compress".
Retenez qu part les syllabes java" qui reviennent dans les deux noms ces deux codes nont rien en commun.
48
13. Javascript
IV. A quoi ressemble un code Javascript ?

Il sagit de balises que lon place gnralement entre les balises <head> et <body> dune page html, mais que lon
peut placer presque partout.
JavaScript sintgre directement dans votre page HTML entre les deux balises <script> et </script>.
De plus, afin de solliciter linterprteur JavaScript, on prcise dans la balise ouvrante : <script langage="JavaScript">
<html>
<head>
<title>Mon premier script !</title>
</head>
<script type="text/javascript" langage="JavaScript">>

</script>
<body>
</body>
</html>
Une autre solution dincrmentation consiste externaliser le moteur" de votre script.
Pour ce faire, il vous faut crer la racine du site une simple page au format .js (script.js par exemple) qui accueillera
la partie du code script.
Il ne restera plus qua appeller" cette partie depuis votre page html en utilisant la ligne de code suivante (toujours
place entre le header et le body) :
<script src="script.js" type="text/javascript" charset="iso-8859-1"></script>
49
14. Javascript / menus dynamiques
I.
Navi simple
II.
Navi dynamique

1. onmouseout, on mouseover
2. onmouseout, on mouseover multiple
3. onmouseout, on mouseover, onclick (2 images)
4. onmouseout, on mouseover, onclick (3 images)
50
14. JS / Menus dynamiques
I. Navi simple
Il sagit dune construction qui vous est prsent familire.
Un tableau faisant apparatre les divers lments bitmap dune mme navigation avec la dfinition des balises de lien
<A HREF="#"><img src="images/navi_01.jpg" border="0"></A>
II. Navi dynamique

1. onmouseout, on mouseover
Pour rendre ce mme menu dynamique par lutilisation du langage Javascript il faudra dabord placer entre le header
et le body de la page la balise javascript suivante :
<script language="JavaScript">
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf(?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_nbGroup(event, grpName) { //v3.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
}}
} else if (event == over") {
document.MM_nbOver = nbArr = new Array();
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : args[i+1];
}
} else if (event == out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == down") {
if ((nbArr = document[grpName]) != null)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
img.src = img.MM_dn = args[i+1];
}}
}
</script>
51
PAS DE PANIQUE !
Mme si cette balise et ses attributs peuvent vous sembler dune approche quelque peu barbare, ne vous inquitez
pas de cette dernire. Il sagit tout simplement du moteur " de votre script et ce dernier a t gnr par fireworks.
Vous naurez JAMAIS intervenir dessus, gardez juste en mmoire que son incrmentation est ncessaire au bon
fonctionnement de votre menu dynamique
Une fois ce moteur mis en place (en interne o en externe), la premire chose faire pour rendre actif les diffrents
lments bitmap (les images) de votre navigation va tre dans la balise <img> de donner un attribut de nom chacun
de ces derniers (en gnral le mme que limage concerne) :
<A HREF="#"><img name="navi_01" src="images/navi_01.jpg" border="0"></A>
Attention cet attribut sera unique pour chaque image.
Ltape suivante sera de dfinir les attributs de changement dtat de vos images, pour cela nous utiliserons les
attributs onMouseOut et onMouseOver que nous placerons dans la balise <a> aprs lattribut href.
<A HREF="#" onMouseOut="MM_nbGroup(out);" onMouseOver="MM_nbGroup(over,navi_01,images/navi_01_
f2.jpg,images/navi_01_f2.jpg,1);">
Notez bien que si lattribut onMouseOut est strictement invariable, lattribut onMouseOver devra faire lobjet de
modifications rcurrentes pour chaque image concerne.
Tout dabord la mise lquivalent de lattribut name " appel par le code javascript
onMouseOver="MM_nbGroup(over,navi_01,images/navi_01_f2.jpg,images/navi_01_f2.jpg,1);"
Puis lappel de la deuxime image qui apparatra lors du passage de la souris sur limage
onMouseOver="MM_nbGroup(over,navi_01,images/navi_01_f2.jpg,images/navi_01_f2.jpg,1);"
2. onmouseout, on mouseover multiple

Pour ce cas de figure qui peut savrer trs pratique loccasion il sagit tout simplement de doubler lappel dimage
au sein du onMouseOver
<A HREF="#" onMouseOut="MM_nbGroup(out);" onMouseOver="MM_nbGroup(over,navi_01,image
s/navi_01_f2.jpg,images/navi_01_f2.jpg,navi_04,images/navi_01_f2.jpg,images/navi_01_
f2.jpg,1);"><img name="navi_04" src="images/navi_01.jpg" border="0"></A>
Attention ! Notez bien que pour viter la confusion dans lappel de limage, Javascript demande ce que lappel de
limage concerne ne soit pas le mme que la premire appele, do lintrt de la dfinition dun attribut name "
unique chaque image.
f2.jpg,images/navi_01_f2.jpg,navi_04,images/navi_01_f2.jpg,images/navi_01_f2.jpg,1);"><img name="navi_04"
src="images/navi_01.jpg" border="0"></A>
52
3. Navi dynamique / onmouseout, on mouseover, onclick (2 images)

Si vous souhaitez quune image clique faisant apparatre son deuxime tat reste apparente sur votre barre de
navigation vous allez devoir utiliser lattribut onClick lintrieur de votre balise <a> la suite des deux prcdents
attributs
f2.jpg,images/navi_01_f2.jpg,1);" onClick="MM_nbGroup(down,navbar1,navi_01,images/navi_01_
Cest cet attribut qui dfinira quelle image reste affiche aprs laction.
Attention ! Dans le cas prsent, lattribut Javascript navbar1 est le dnominatif de votre barre de navigation. Le
script global prendra donc en considration tous les autres lments utilisant ce mme attribut comme faisant partie
de la mme navigation.
4. Navi dynamique / onmouseout, on mouseover, onclick (3 images)

Si vous souhaitez quune image clique fasse apparatre un troisime tat il vous suffira de changer lappel de limage
afficher dans ce mme attribut onClick
<A HREF="#" onMouseOut="MM_nbGroup(out);" onMouseOver="MM_nbGroup(over,navi_01,images/
navi_01_f2.jpg,images/navi_01_f2.jpg,1);" onClick="MM_nbGroup(down,navbar1,navi_01,images/navi_01_
NB : Pour plus de facilit de comprhension de votre code lorsque vous lincrmenterez, il vous est conseiller de
normer lappellation de vos diffrentes images selon le protocole suivant
Pour onMouseOut
Pour onMouseOver
Pour onClick
>
>
>
image_01.jpg
image_01_f2.jpg
image_01_f3.jpg
53
15. Javascript / popup
I.
Quest ce quune POPUP ?
II.
Attributs
III.

Ouverture dune popup simple

1. avec javascript spar
2. avec javascript inclu
IV.
Fermeture dune popup
54
15. JS / Popup
I. Quest ce quune POPUP ?

A linstar dune fentre de navigateur qui souvrirait suite la dfinition dun attribut de target _blank dans une balise
daction, une pop up est une fentre de navigateur paramtrable qui souvre lextrieur de la page consulte.
La dfinition de ses diffrents paramtres va faire lobjet de lutilisation du langage Javascript.
II. Attributs
attribut
valeurs
effet
width
height
pixel
pixel
dfinit la largeur de la fentre

dfinit la hauteur de la fentre
left
top
pixel
pixel
dfinit la position horizontale sur lcran

dfinit la position verticale sur lcran
location
directories
history
status
toolbar
menubar
scrollbars
fullscreen
resizable
yes / no
yes / no
yes / no
yes / no
yes / no
yes / no
yes / no
yes / no
yes / no
dfinit laffichage de la barre dadresse

dfinit laffichage de la barre de dossiers
dfinit laffichage de la barre dhistorique
dfinit laffichage de la barre de statut
dfinit laffichage de la barre doutils
dfinit laffichage de la barre de menu
dfinit laffichage des ascenseurs
dfinit louverture de la fentre en plein cran
dfinit le redimensionnement de la fentre
III. Ouverture dune popup simple

Il existe plusieurs mthodes pour ouvrir une fentre popup.
La premire mthode fait appel un code spar de la balise daction, la seconde est incluse dans cette mme
balise.
1. avec javascript spar

Avant de dfinir votre action il faudra placer ce code entre le header et le body de votre page
<script language="javascript">
function OpenPopup(POP)
{
window.open (POP,popup,width=300,height=200,directories=no,history=no,status=no,toolbar=no,menubar=no,scro
llbars=no,resizable=no);
}
</script>
Ce code dfinira lappel la popup ainsi que ses diffrents attributs
ensuite via un onClick " il ny a plus qu faire appel au code sus dfini lors de ltablissement du lien :
<A HREF="#" onclick="javascript:OpenPopup(popup.htm);"><img src="images/btn.jpg" border="0"></A><br>
55
15. JS / Popup
2. avec javascript inclu

La mthode est similaire la premire sauf que cette fois ci nous allons inclure directement le code javascript
lintrieur de la balise <a>
<A HREF="#" onclick="javascript:window.open(popup.htm,popup,width=300,height=200,toolbar=no,directories=n
o,status=no,menubar=no,scrollbars=no,history=no,resizable=no);"><img src="images/btn.jpg" border="0"></A>
Ces deux mthodes fonctionnent aussi bien avec du texte quavec une image
Attention : Il est noter toutefois que lutilisation de la premire mthode est plus indique lorsquil sagit dappeler
une popup depuis un document flash.
Dans ce cas de figure le code action script utiliser sur le bouton concrn sera :
on (release) {
getURL(javascript:OpenPopup(popup.htm);");
}
IV. Fermeture dune popup

Dans la fenetre concerne et sans ajout de code spar il suffira dinclure un onClick circonstanci la dfinition de
laction
<a href="#" onClick="javascript:parent.close();"><img src="images/btn.jpg" border="0"></a>
56
16. Javascript / fullscreen
Trs simple dutilisation et trs pratique pour forcer " louverture dune page en plein cran
ATTENTION : Nonobstant que ce script ne fonctionne quavec IE, il nest pas toujours trs apprci par les
internautes qui peuvent y voir une agression manifeste de leurs habitudes de consultation de pages Internet.
Inclure ce code entre le header et le body :

<script language="JavaScript">

function fullscreen(){

window.open(fenetre.htm","","fullscreen=yes, scrollbars=auto")
}
</script>
Puis lors de la dfinition de votre lien faites appel la fonction scripte :
<A HREF="#" onClick="fullscreen()">APPEL DE FENETRE FULL SCREEN</A>
57
17. Javascript / restriction daccs

au contenu
Trs pratique utiliser avec des clients aux tendances paranoaques
Inclure ce code entre le header et le body :

<SCRIPT language="JavaScript">
<!-
var message=" Copyright, All rights reserved.";

function click(e) {

if (document.all) {

if (event.button==2||event.button==3) {
alert(message);

return false;
}
}

if (document.layers) {

if (e.which == 3) {
alert(message);

return false;
}
}
}

if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;

// -->
</SCRIPT>
Ce dernier invalidera " les options de rcupration dlment du bouton droit de la souris.
Bien entendu cette option nempchera en rien un utilisateur averti daller rcuprer la source via loption affichage/
source du menu de son navigateur et de rcuprer ce qui lintresse au sein de la page.
58
18. Introduction au XHTML
I.
GENERALITES
II. le DOCTYPE / DTD

1. Quest ce que cest ?

2. Les differentes DTD

3. Choisir sa DTD
III. la balise <html>
IV. les regles decriture
1. Gnralits
2.1 Positionnement par dfaut des balises
2.2 Imbrications et embotements
V.
balises <div> & <span>
VI.
en resum
59
I. GENERALITES
Ce chapitre expose les rgles dcriture qui caractrisent XHTML par rapport HTML. Ces rgles garantissent une
meilleure adaptabilit de vos pages aux futurs dveloppement du Web et aux volutions des navigateurs et des outils
de visualisation utiliss (tlphones mobiles, PDA etc...) ainsi quune plus grande facilit de mise jour et de mise
aux normes daccessibilit.
XHTML prsente les mms balises et attributs que HTML. Bien quils soient accpts par XHTML et les navigateurs,
certains lments sont dconseills parce que dfavorables laccssibilit et aux tendances modernes.
Signalons que ces recommandations qui, sans tre imposes par le langage, constituent en quelque sorte des rgles
de bon sens.
Ce mme bon sens qui implique ces recommandations... mais sans dogmatisme.
II. le DOCTYPE / DTD

1. Quest ce que cest ?
Le Doctype", la Dclaration de Type de Document (souvent appel DTD) est une dclaration qui figure en tte
dun fichier .htm pour informer le navigateur du type de document dont il sagit. Elle prvient en premier lieu si le
langage utilis est HTML ou XHTML. Dans le cas de HTML on peut se passer du doctype, les paramtrtes par dfaut
sont suffisants. Dans le cas de XHTML en revanche, le doctype est indispensable car il agit sur la faon dont les
navigateurs respectent les normes daffichage des contenus et notament les feuilles de style CSS.
2. Les differentes DTD

HTML4.01 transitionel
<!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd">
HTML4.01 strict
<!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd">
HTML4.01 frameset
<!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN" http://www.w3.org/TR/html4/frameset.dtd">
XHTML1.0 strict
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML1.0 transitionel
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML4.01 frameset
<!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN" http://www.w3.org/TR/xhtml1/frameset.dtd">
3. Choisir sa DTD
De faon gnrale utilisez de prfrence XHTML1.0 Strict, cest a priori la plus adapte vos besoins.
Cest aussi la plus facile utiliser et apprendre.
Si vous utilisez des iframe ou un attribut target, utilisez XHTML1.0 transitional.
Si vous voulez utiliser les frameset et frame, utilisez la DTD XHTML1.0 frameset.
Pour plus dinformation sur les DTD et leurs finalits dutilisation :
http://www.alsacreations.com/article/lire/560-DTD-comment-choisir.html
60
III. la balise <html>

En fait, un fichier XHTML est un fichier XML. Il faut donc dfinir ce quon appelle son espace des noms. Cela se fait
dans la balise <html> qui scrit :
<html xmlns="http://www.w3.org/1999/xhtml">
La balise <html> a aussi deux paramtres facultatifs qui prcisent la langue utilise. Pour XML anglais, avec un
contenu franais, on crira :
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="fr">
IV. les regles decriture

1. Gnralits
Nous venons de voir deux diffrences entre HTML et XHTML ; la ncessit du DOCTYPE et celle du paramtre xmlns
dans <html>. De fait, il ny en a pas beaucoup dautres.
Tout ce que nous avons vu dans les chapitres prcdents fonctionne aussi bien en HTML quen XHTML car nous
avons obi peu de choses prs aux rgles dcriture de XHTML.
Voii ces rgles :
Majuscules et minuscules
HTML est indiffrent aux deux alors quXHTML exige des minuscules pour toutes les balises et attributs. Pour les
valeurs des attributs cest selon ; pour une dsignation de fichier, il faut suivre la forme du nom tel quil a t cre.
Balises de fermeture
En html certaines balises de fermeture sont facultatives, tandis que dautres sont obligatoires. En XHTML toutes les
balises de fermeture sont obligatoires.
Balises clibataires
Une balise clibataire comme <br> scrit dsormais <br />
Valeurs des attributs
En XHTML toute valeur dattribut doit tre entre guillemets si la valeur ne contient pas despaces ou de caractres
spciaux.
Paramtres bolens
Certains paramtres jouent uniquement par leur prsence en HTML.
Par exemple, <input type="checkbox checked"> installe dans un formulaire une case coche par dfaut.
En XHMTL il faut crire <input type="checkbox" checked="checked">
61

Une autre distinction entre les lments est celle faire entre BLOC et EN LIGNE.
Chaque balise se caractrise par une double identit :
Une structure HTML qui na intrinsquement aucun rapport avec laffichage de llment.
Son rendu sur les navigateurs (affichage, positionnement, comportement) dfini par dfaut selon le bon vouloir de
chaque navigateur et modifiable laide des CSS.
Pour y voir plus clair, les diffrentes balises qui composent une page html ont t classes :
Les balises de type BLOC
BODY, DIV, Paragraphes (P), en-ttes (H1 H6), tableaux (TABLE) Ces lments se placent ncessairement les uns
en dessous des autres, commencent une nouvelle ligne et forcent le suivant faire de mme. Ils servent distinguer
les parties entires de texte.
Les balises de type INLINE
Il sagit par exemple de A, B, I, SPAN, les images... Elles ne forcent jamais de retour la ligne et peuvent tre
lenfant de nimporte quel autre lment. Elles sont prvues pour rester dans le texte et lenrichir (lien hypertexte,
renforcement, emphase, etc.).
La comprhension de la structure des balises va avoir de nombreuses implications par la suite, et paradoxalement
cest souvent un sujet peu connu des webmasters.
Au niveau le plus basique retenons simplement que des balises de type bloc peuvent contenir dautres balises de
type bloc et des balises de type inline et quune balise possde un rendu CSS qui na pas forcment de rapport
avec sa structure HTML.
Les balises ont toutes par dfaut une valeur de rendu CSS particulire selon quelles seront du type bloc ou inline.
Il est particulirement important de comprendre que :
De leur structure HTML vont dpendre les imbrications et embotements autoriss.
De leur rendu CSS vont dpendre leurs comportements, positionnements, affichages, etc.
2.1 Positionnement par dfaut des balises
Les balises de type bloc se placent toujours lune en dessous de lautre par dfaut (comme un retour chariot).
Par exemple, une suite de paragraphes <p> ou les lments dune liste <li>.
Par ailleurs, une balise bloc occupe automatiquement, par dfaut, toute la largeur disponible dans son conteneur.
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
Les balises de type inline se placent toujours lun ct de lautre afin de rester dans le texte.
Par exemple, le renforcement dune partie de texte laide de la balise <b>.
<b><i>texte</I> autre texte</b>
Ce texte va safficher sur une seule ligne (aucun retour la ligne) car les lments qui le composent sont de rendu
CSS en-ligne".
62

2.2 Imbrications et embotements
En rgle gnrale
Une balise de type bloc peut contenir une (ou plusieurs) balise bloc et/ou inline (sauf exception).
Une balise de type inline ne peut contenir QUE une (ou plusieurs) balise inline.
Par exemple, la balise <div> (type bloc) englobe les deux paragraphes (type bloc).
<div>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
</div>
Par contre, nous naurions pas pu crire :
<span>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
</span>
car la balise <span> (dont la structure est inline) nest pas autorise contenir des lments de structure bloc
comme les paragraphes.
NB : Les balises inline se distinguent elles mmes en deux parties : les balises remplacs et les non remplacs
Les balises remplacs sont les seuls qui possdent des dimensions (width, height) par dfaut.
Il sagit des balises <img>, <input>, <textarea>, <select> et <object>.
Les balises non remplacs nont pas de dimension proprement parler par dfaut (elles noccupent que la place
minimum ncessaire leur contenu).
Cest le cas des lments <strong>, <em>, <span>, etc
V. balises <div> & <span>

Ces deux balises permettent de structurer la page. Elles permettent de dlimiter une partie de la page qui peut ainsi
recevoir un nom et des spcifications de mise en forme. Elles sont faites pour cela.
<div> est de type bloc et peut regrouper dautres balises du mme type comme des balise en ligne.
<span> est une balise en ligne. Elle ne peut dlimiter quun fragment de texte.
VI. en resum
XHTML est le nouveau standard dintgration. Il est une passerelle vers les futures versions.
XHTML interagit facilement avec les autres langages drivs de XML.
Ayant des rgles plus strictes, XHTML vous conduit crer des pages plus cohrentes et qui fonctionnent mieux.
XHTML 1.0 est accpt par les anciens navigateurs. En outre, les nouveaux navigateurs respectent mieux les
normes CSS avec lui.
XHTML permet de crer des pages pour les PDA, les tlphones, les lecteurs dcran pour malvoyants etc...
XHTML saccorde parfaitement avec les fichiers CSS et il vous incitera viter les balises de prsentation pour
rserver la mise en forme aux styles ; ce qui facilitera la prise en compte des problmes daccssibilit dans vos
pages.
63
19. CSS / Introduction et principe de

base
I.
GENERALITES
1. Pourquoi utiliser des feuilles de style ?

2. Avantages des feuilles de style

3. Quest-ce quun style " ?
II. regles et syntaxe
1. Comment crit on en CSS ?

2. Ou placer les CSS ?

3. Structure

4. Units de longueur
64
19. CSS / Introduction
I. GENERALITES
Au dbut
tait HTML, conu pour donner de linformation
puis des balises de prsentation de style sont apparues comme <b> et <font>
ensuite les tableaux ont t crs pour insrer des donnes tabulaires.
MAIS
avec la varit actuelle de navigateurs qui ne respectent pas ncessairement les standards initialement cres par
le W3C, on passe aujourdhui plus de temps vrifier que les affichages soient identiques sur plusieurs navigateurs,
voire plusieurs versions du mme navigateur qu crer son code.
Cest pourquoi sont apparues les feuilles de style ou CSS (Cascading Style Sheet), qui sont une nouvelle tentative
de standardisation des langages dintgration initi par le W3C pour aboutir un affichage identique sur toutes les
configurations matrielles de la terre conforme aux dsirs de lauteur.
1. Pourquoi utiliser des feuilles de style ?

Les CSS permettent de dcrire la prsentation dune page web et remplacent donc avantageusement lancienne
mthode, qui consistait utiliser ces fameuses balises, attributs et autres tableaux. Elles permettent de centraliser
toute la mise en forme et davoir peu de frais une mise en page cohrente; elles sont notamment utilises pour
dfinir les couleurs, les polices, le rendu, et dautres caractristiques lies la prsentation dun document.
Lobjectif est donc de bien sparer la structure (crite en HTML ou similaire) de la prsentation (en CSS) du
document. Pour un unique contenu plusieurs affichages sont donc possibles. (cf. http://www.csszengarden.
com/)
Dans le cas de sites disposant dune arborescence consquente, il peut tre intressant de crer une feuille pour les
bases (polices, couleurs arrire-plan, etc) puis des feuilles complmentaires pour chaque division du site.
Cette sparation fournit un certain nombre de bnfices, permettant damliorer laccessibilit, de changer plus
facilement de structure et de prsentation, et de rduire la complexit de larchitecture dun document.
2. Avantages des feuilles de style

La structure du document et la prsentation sont grs dans des fichiers spars.
La conception dun document se fait dans un premier temps sans se soucier de la prsentation, ce qui permet
dtre plus efficace.
La prsentation est uniformise, les documents (pages html) font rfrence la (aux) mme(s) feuille(s) de styles.
Un mme document peut donner le choix entre plusieurs feuilles de style (css dimpression ou de lecture lcran).
Le code HTML est considrablement rduit en taille et en complexit, puisquil ne contient plus de balises de
prsentation, il est donc plus rapide afficher.
3. Quest-ce quun style " ?

Les proprits des styles regroupent diffrentes valeurs, telles que les choix de police, de taille de couleur
appliquer aux diffrents lments dune page, ainsi toutes les balises HTML pourront tre positionns, dcors,
dimensionns...
Cest ce que font les CSS : dfinir ces valeurs dans la page html laide dun code spar en utilisant les balises
comme <h1> </h1> qui de base en possde une taille et une graisse non modifiable mais qui est compltement
redfinissable en css.
65
II. regles et syntaxe

1. Comment crit on en CSS ?
Le langage CSS est trs simple, et le mieux est de commencer par un exemple.
En HTML, pour dfinir un lment de texte en gras, vous avez pris lhabitude de placer les balises <b> et </b>
<b>texte</b>
Puis avec lvolution des standards vous avez crit
Voici comment dans le cas dune application directe, le langage CSS va interprter la mme requte :
<p style=font-weight: bold;>texte</p>
Le point-virgule la fin sert sparer les proprits, comme par exemple :
<p style=font-weight: bold; color: red;>texte</p>
Mais sil ne sagissait que de remplacer une syntaxe par une autre, lintrt des CSS serait nul.
Il existe donc plusieurs faons dutiliser ces dernires
2. Ou placer les CSS ?

Dans une balise html dans le corps du document
<h1 style=font-size:15px ; color:#555 ;>Titre</h1>
Dans len-tte dun document (balise <head>)
<style type="text/css">
...
</style>
Dans un fichier externe reli au doc html laide dune balise <link> (dans len-tte galement)
<link rel="stylesheet" type="text/css" href="style.css" />
Pour crer ce fichier, laide dun diteur de texte standard (notepad ou simple text), enregistrez un nouveau
document portant lextension .css.
Bien entendu aucune balise html ne figurera dans ce fichier.
Ces deux mthodes peuvent dailleurs tre utilises ensemble pour un mme document. Dans ces conditions, si elles
se contredisent, cest la feuille crite directement dans le document qui prdomine.
En gnral, prvoyez davoir une feuille de style dans un fichier spar pour dfinir la prsentation de tout un site, par
la suite rajoutez ce qui est ncessaire dans chaque page.
Nb: Il est possible de mettre des commentaires presque nimporte o dans une feuille de style CSS en les encadrant
de /* et */
66

3. Structure
Toutes les CSS ont la mme structure
1. Slecteur: balise html, classe ou ID
2. Proprits: les identifiants (quivalents des balises)
3. Valeurs: les donnes de la proprit (quivalents des attributs)
La paire proprit/valeur est appele : dfinition
<p slecteur = proprit : valeur;>titre</p>
<p style=font-size : 11px; >titre</p>
ou
slecteur
{
proprit: valeur;
}
p
{
font-size : 11px;
}
4. Units de longueur
Units de longueur relatives ( lobjet parent) :
Units de longueur absolues :
px
%
em
ex
mm
cm
in
pt
pc
pixel
pourcentage
largeur de police
hauteur police
millimtres
centimtres
pouces
point =1/72 de pouces
pica = 12points
67
20. CSS / Les slecteurs
I. les 3 types de selecteurs

1. Les slecteurs HTML

2. Les CLASS

3. Les ID
II. les pseudo classes
1. Pseudo classes de lien

2. Pseudo classes de lien personnalise
II. regroupement de selecteurs
68
I. les 3 types de selecteurs

La dfinition des slecteurs va dcider quel(s) lment(s) une rgle sapplique
On trouve 3 types de slecteurs :
1. Les slecteurs html qui offrent la possibilit de redfinir les balises html en css
2. Les CLASS qui sont des rgles librement choisies applicables nimporte quelle balise html.
3. Les ID qui sont similaires aux classes mais qui sappliquent quune seule fois pour un lment donn.
1. Les slecteurs HTML

Nous lavons vu dans le prcdent dossier thorique. Il sagit en fait dun simple changement de syntaxe.
devient
<p style=font-weight : bold;>texte</p>
2. Les CLASS
Nimporte quel balise peut se voir attribuer le slecteur CLASS, qui va servir faire le lien avec une feuille de style, de
mme que plusieurs balises peuvent utiliser le mme slecteur CLASS.
Ainsi, pour un paragraphe, on crira: <p class="exemple"> que lon couplera avec la dfinition de CSS :
p.exemple
{
font-family: sans-serif;
}
Tous ces paragraphes apparatront dans une police diffrente
Le slecteur CLASS sutilise souvent en conjonction avec les balises <div> et <span>, qui deviennent ainsi des
balises tout faire... Supposons que je veuille mettre un filet bleu gauche de mes exemples. Je peux crire:
p.exemple
{
border-left: solid blue 2px;
}
Mais si je fais ainsi, je ne peux pas mettre un exemple de plusieurs paragraphes, parce que le filet bleu serait
interrompu dans lespace entre les paragraphes ; je ne peux pas non plus mettre une numration ou une table dans
lexemple. Il vaut mieux alors crire:
div.exemple
{
border-left: solid blue 2px;
}
Et crire en corrlation sur la page html:
<div class="exemple">
<p>Ici mon exemple.</p>
<p>Il peut faire plusieurs paragraphes</p>
</div>
Je peux galement utiliser .exemple comme slecteur, qui sappliquera alors tous les lments de classe
exemple", quel que soit leur type, et me laisse ainsi la libert dcrire <p class="exemple"> dans les cas simples, et
de recourir un div dans les cas plus compliqus.
69
3. Les ID
Dune certaine manire ID est un slecteur redondant : tout ce quon peut faire avec on peut en faire autant voire plus
avec CLASS.
Mais ID a son utilit car il dfinit un lment de manire unique dans lensemble des balises : un document HTML
valide ne devrait ainsi pas comporter deux lments avec le mme ID. De fait, ID est le slecteur idal ds quil sagit
de positionner un lment au sein de linterface, dans le cas ou deux lments ne devraient logiquement pas avoir la
mme position dans linterface.
Ainsi, pour un paragraphe, on crira <p id="exemple"> que lon couplera avec la dfinition de CSS :
#exemple
{
font-family: sans-serif;
}
Enfin une balise pouvant disposer dun ID et dune (ou plusieurs) CLASS (ID disposant dune prsance
hirarchique sur CLASS) peut permettre de prciser un lment particulier au sein dun ensemble de CLASS.
<p id="titre" class="texte rouge gras"></p>
Ajoutons que JavaScript peut manipuler les balises avec un ID.
Enfin, rappelons pour terminer quau sein de la CSS, les ID sont dfinis avec le signe dise (#nom) et les CLASS
avec un point (.nom).
II. les pseudo classes

1. Pseudo classes de lien
En terme de CSS la dfinition de certaines fonctionnalits, en particulier les liens, dispose dun traitement spcial
Il sagit de les redfinir de la manire suivante et dans lordre :
a:link {proprits}
a:visited {proprits}
a:hover {proprits}
a:active {proprits}
pour les liens par dfaut

pour les liens visits
pour les liens survols
pour les liens actifs
et la classique dfinition de lien dans la page html

<a href="fichier.html">link</a>
Les proprits applicables ces pseudo-classes sont les mmes que ceux applicables au texte : typo, couleur, taille,
arrire-plan etc... plus la dcoration", cest--dire soulignement, barre au-dessus, barr, clignotant (sauf dans IE).
nb : Lorsque souhait, il est necessaire de preciser la disparition du soulignement par defaut des liens...
a:link {text-decoration : none; }
Autres choix pour text-decoration
none
pas de soulignement
underline
soulignement
line-through
barr
overline
un trait au-dessus
underline overline
un trait en dessous et un trait au-dessus
Pour appliquer les mmes paramtres plusieurs tats de liens, sparer les slecteurs par une virgule.
a:link, a:visited {color: #000000, text-decoration:none}
70
2. Pseudo classes de lien personnalise

Il se peut que vous vouliez, dans une mme page, des liens qui se comportent diffremment. Par exemple pour
diffrencier les liens internes des liens externes de votre produit.
Il faut alors utiliser la fois les pseudo-classes : a:link, a:visited, a:hover, a:active ET une classe personnalise.
Nous allons donc cumuler les deux. Par exemple si je choisis des paramtres propres aux liens externes du site, je
peux imaginer une classe personnalise que je nommerai : .lienext"
Cela donnera dans le css
a.lienext:link {proprits}
a.lienext:visited {proprits}
a.lienext:hover {proprits}
a.lienext:active {proprits}
Puis dans le html, il sera impratif dappliquer la classe ainsi cre
<a href="fichier.html" class="lienext" />link</a>
Il existe encore quelques autres pseudo-classes, mais elles sont souvent mal reconnues par les navigateurs, et moins
utiles.
II. regroupement de selecteurs

Lune des grandes forces des slecteurs CSS est leur capacits se combiner les uns avec les autres, ainsi on
pourra retrouver ces groupements sous plusieurs formes :
une , entre 2 slecteurs signifie lapplication dune mme dfinition aux slecteurs
h1, h2, h3 {proprits}
un espace entre 2 slecteurs signifie la descendance
p h1 {proprits} (tous les h1 de ce p seront affects)
un > signifie la filiation directe
p> h1 {proprits} (descendance directe pre/fils)
un + signifie ladjacence
h3 + p {proprits} (correspond au premier paragraphe qui suit une en-tte h3)
nb: Parent-enfant" ou filiation directe" = un niveau au-dessous
Descendance" = deux niveaux ou plus sparent les lments.
71
21. CSS / Les proprits
I. generalits
II. proprietes du texte
III. proprietes des listes
IV. proprietes des couleurs
V. proprietes des arrieres plans
VI. proprietes des blocs bordures et marges
VI. proprietes pour body
72
I. generalits
Les proprits des slecteurs indiquent lapparence que les lments doivent prendre et permettent de changer
normment daspects de la prsentation de ces derniers.
Cest en utilisant conjointement ces dernires, que la mise en page de votre contenu va prendre forme.
Police taille, style, couleur.
Texte
alignement, casse, interlignage, espace entre les mots et les lettres
Couleur
exprime en valeur hexadcimale
Arrire-plans
couleur ou images.
Blocs, bordures et marges largeur, hauteur, style, paisseurs, couleurs, remplissage.
Interface
puces, indentation, curseur, ascenseurs.
Positionnement
emplacement exact sur lcran.
Affichage et visibilit
si un lment apparat et comment.
Impression
comment dfinir laspect de la page limpression.
II. proprietes du texte

1. polices de caractre
Lutilisation de CSS fait compltement disparatre lusage de lantique lment <font>.

proprits
valeurs
effet
font-style:
font-variant:
font-weight:
font-size:
font-family:
normal / italic / oblique

normal / small-caps
normal / bold
xx-small / x-small / small / medium / large / x-large / xx-large / valeur
serif / sans-serif / monospace / cursive / fantasy / verdana / arial / times
Italique
Petites capitales
Gras
Taille
Famille de caractre
Exemple dapplication pour une CSS inclue la page HTML :

.font
{
font-style
: normal;
font-variant
: normal;
font-weight
: normal;
font-size
: small;
font-family
: sans-serif;
}
</style>
RACCOURCI : Avec font: il est possible de spcifier plusieurs proprits dun coup. Il faut alors placer la suite et
dans lordre les ventuels style, variante, graisse, taille, et famille.
.font
{
font : normal normal normal small sans-serif;
}
</style>
73
Cas particuliers :
Pour font-size: qui prend une valeur descriptive (xx-small, x-small, small, medium, large, x-large, xx-large), ou une
valeur relative la taille actuelle (larger, smaller ou un pourcentage) ; cependant attention linterprtation de ces
valeurs par les diffrents navigateurs.
Pour viter de mauvaises surprises on prfrera utiliser une valeur fixe exprime en pixels
Pour font-family: comme tout le monde n pas toutes les polices du monde, il est possible den indiquer
plusieurs, spares par des virgules (les noms comportant des espaces doivent tre mis entre guillemets).
Ceci dit, CSS dfinit des familles gnriques, serif, sans-serif, monospace, cursive et fantasy... il est conseill de
toujours mettre une famille gnrique en dernier recours.
2. texte
proprits
valeurs
effet
text-align:
line-height:
text-indent:
text-transform:
text-decoration:
word-spacing:
letter-spacing:
left / right / center / justify

normal / pourcentage / valeur
nombre / pourcentage
none / capitalize / lowercase / uppercase
none / underline / overline / line-trough / blink
valeur / valeur ngative
valeur / valeur ngative
Alignement
Interlignage
Indentation
Capitales
Autres
Intermots
Interlettrage
.font
{
text-align
: left;
line-height
: normal;
text-indent
: inherit;
text-transform : none;
text-decoration : none;
word-spacing : inherit;
letter-spacing : inherit;
}
Cas particuliers :
Pour text-decoration:

- La valeur Blink" nest pas oprationnelle avec IE

- Il est possible de donner plusieurs dcorations en les sparant par un espace
.font
{
text-decoration : underline overline;
}
74
III. proprietes des listes

proprits
valeurs
effet
list-style-type:
none / disc / circle / square

decimal / upper-alpha / lower-alpha / upper-roman / lower-roman
Liste non numrote

Liste numrote
list-style-image: (url);
url
Appel dune image
Nous avons dj vu dans les prcdents cours comment crer une liste en HTML (cf. p.16 / 05 - le texte)
Pour mmoire
Listes non numrotes
Listes numrots
<ul> <ol>
<li>premier <li>premier
<li>deuxime <li>deuxime
</ul> </ol>
Avec CSS nous agirons de mme, ceci prs que nous ignorerons les paramtres de calibrage HTML
Pour ce faire nous dfinirons la dclaration de classe pour les lments UL ou OL de la page dans notre feuille de
style en sachant que les proprits de ces derniers seront hrites par les LI
ul
{
list-style-type : disc;
}
Bien entendu si plusieurs listes diffrentes doivent apparatre dans une mme page, il sera alors ncessaire de
dclarer une classe nominative
.liste
{
list-style-type : square;
}
En cas dappel une image, nous utiliserons la syntaxe suivante
ul
{
list-style-image : url(images/btn.gif);
}
75

IV. proprietes des couleurs
proprits
valeurs
effet
color:
RVB dcimale / hexadecimale / nominative
Couleur du texte
La couleur se rgle avec color: et peut sindiquer de plusieurs manires:

Soit en dfinissant une couleur RVB dcimale en utilisant des valeurs allant de 0 255 ou en pourcentage
.fontcolor
{
color: rgb(0,0,0);
}
Soit en dfinissant une couleur hexadcimale (16 millions de couleurs) en indiquant les valeurs RVB dune couleur
selon la notation #RRVVBB, emprunte au HTML, o RR, VV et BB reprsentent respectivement un nombre entre 00
et FF pour le Rouge, le Vert et le Bleu.
En CSS il est possible de raccourcir ce code en #RVB. Chaque lettre double peut tre indique une seule fois.
.fontcolor
{
color: #000000;
}
Soit en utilisant le tableau nominatif des couleurs standard
Attention: Si vous souhaitez utiliser cette mthode, gardez lesprit que le standard CSS ne garanti que laffichage
des 16 couleurs dfinies ci aprs (ce qui est peu).
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow
.fontcolor
{
color: black;
}
76
V. proprietes des arrieres plans

A prsent, voyons comment le CSS va agir sur les arrires plans il va tre possible dagir sur la couleur, la dfinition
dune image, sa rptition et son scrolling ainsi que sur son positionnement au sein de la page.
proprits
valeurs
effet
background-color:
background-image:
background-repeat:
background-attachment:
background-position:
transparent / hexadecimal;
none / url
no-repeat / repeat-x / repeat-y
scroll / fixed
left / right / center / top / bottom / pixel / pourcentage
Couleur
Image
Img repetition
Img scrolling
Img positionnement
.bkg
{
background-color
: transparent;
background-image
: url(images/bkg-base.jpg);
background-repeat
: no-repeat;
background-attachment: fixed;
background-position : left top;
}
Raccourci : avec background: il est possible de spcifier plusieurs proprits dun coup.
Il faut alors placer la suite et dans lordre les ventuels couleurs, images, rptitions, scrolling et position.
.bkg
{
background: transparent url(images/bkg-base.jpg) no-repeat fixed left top;
}
77
VI. proprietes des blocs bordures et marges

Un BLOC ou une BOITE (un paragraphe, un titre, une table) dfinie par sa largeur et, cas chant, sa hauteur est
entour de trois zonesde lintrieur vers lextrieur:
Largeur et hauteur : width et height
Ces deux proprits permettent dajuster la largeur et la hauteur dun bloc. Attention toutefois utiliser height avec
parcimonie, le contenant dun bloc tant toujours prioritaire sur la dfinition de la valeur.
proprits
valeurs
effet
width:
height:
auto, pourcentage, valeur;

auto, pourcentage, valeur;
Largeur
Hauteur
La marge extrieure ou margin

proprits
valeurs
effet
margin-top:
margin-right:
margin-bottom:
margin-left:
auto / pourcentage / valeur

Marge ext. haute

Marge ext. droite
Marge ext. basse
Marge ext. gauche
La marge intrieure ou padding

proprits
valeurs
effet
padding-top:
padding-right:
padding-bottom:
padding-left:

Marge int. haute

Marge int. droite
Marge int. basse
Marge int. gauche
La bordure ou border
En utilisant les proprits de type border-ct-, il est possible dintervenir sur chacun dentre eux sparment
mais il est largement prfrable dutiliser border tout court.
proprits
valeurs
effet
border-width:
border-color:
border-style:
thin / medium / thick / valeur

rgb / hexadecimale / nominative
none / solid / dotted / dashed / double / groove / ridge / inset / outset
Epaisseur
Couleur
Style
border-top-_:
border-right-_:
border-bottom-_:
border-left-_:
variable dfinir
variable dfinir
variable dfinir
variable dfinir
Bord haut
Bord droit
Bord bas
Bord gauche
78
Donc, pour un mme bloc dfini, nous obtiendrons...

.bloc
{
width
height
: auto;
: auto;
padding-top : auto;
padding-right : auto;
padding-bottom: auto;
padding-left : auto;
margin-top
: auto;
margin-right : auto;
margin-bottom : auto;
margin-left
: auto;

border-width : 1px;
border-color : black;
border-style
: solid;
}
Raccourci : Les caractristiques de bloc permettent de spcifier leurs proprits respectives dun coup.
Il faut alors les placer la suite et dans lordre (dans le sens des aiguilles dune montre, en partant de midi)
.bloc
{
width
height
padding
margin
border
}
: auto;
: auto;
: auto auto auto auto;
: auto auto auto auto;
: 1px black solid;
Dans le cas de padding: et margin: si on ne met que deux longueurs elles dfinissent les marges haute et basse
dune part et gauche et droite dautre part si on nen met quune, les quatre marges sont gales.
79
VI. proprietes pour body

Maintenant que nous avons vu la plupart des proprits les plus importantes des CSS, il est utile de souligner
quafin de faciliter lintgration des lments les plus rcurrents de votre page, nombre dentre elles sont directement
applicables la balise body de cette dernire!
body
{
font
: normal normal normal 12px sans-serif;
text-align
: justify;
line-height
: normal;
text-indent
: inherit;
text-transform : none;
text-decoration : none;
word-spacing : inherit;
letter-spacing : inherit;
color
: #000;
background

margin
padding
}
: transparent url(images/bkg.jpg) repeat-y center top;

: 0;
: 0;
80
22. CSS / Cascades et conflits

dhritage
Comme nous lavons vu dans les gnralits, une feuille de style scrit dans le langage appel CSS, pour
Cascading Style Sheet. Le terme cascading souligne une proprit importante du langage; ses caractristiques de
prsentations se propagent en cascade dun lment ses fils.
Pour mmoire
Le style en ligne lemporte sur la feuille de style interne
La feuille de style interne lemporte sur la feuille de style externe.
Mais aussi
Les ID lemportent sur les CLASS
Les CLASS lemportent sur les slecteurs contextuels, pseudo-class et pseudo elements
On peut aussi considrer limportance des CSS en fonction des valeurs de leurs spcificits qui ont pour effet de
donner une importance diffrente chaque rgle.
ID : spc. 100 / CLASS : spc. 10 / Slecteur contextuels : spc. 1 / Rgles hrites : spc. 0
Quest ce que lhritage?

Cest le mcanisme par lequel les styles sappliquent un lment, mais aussi ses descendants.
Prenons exemple sur la structure dune page html
En haut de la hirarchie se trouve la balise html qui contient la balise body qui contient dautres lments Si
html est lascendant de lensemble (aussi appel lment racine), body est lascendant de tout ce que montre le
navigateur.
Mme si quelques proprits ne sont pas hrits (comme border par exemple), la plupart du temps pour optimiser le
code beaucoup de paramtres hritent de leur parent par dfaut (la couleur darrire plan du body sera la mme pour
toutes les couleurs darrire-plan de la page) sauf si une dclaration contradictoire est faite ensuite
NB: En CSS, si vous souhaitez quun lment prenne le dessus sur tout le reste, il faut alors utiliser le paramtre de
rgle importante", cest--dire que cette dernire doit tre suivie de !important.
P.dark {color:#333 !important;}
81
23. CSS / Positionnements
I. generalits
II.
BOIte de type bloc
III. boite de type en ligne

IV. positions

1. Positionnement relatif
2. Positionnement absolu
3. Positionnement fixe
4. Position flottante
4.1 Gnralits
4.2 Dbordement et spacer
4.3 Une variante du spacer <hr />
V. conclusion
82
I. generalits
Par dfaut, les navigateurs affichent les botes issues du document html dans lordre du flux normal.
Pour reprsenter le positionnement en flux normal, on peut imaginer le navigateur parcourant (logiquement) la page
de code HTML du dbut la fin et retranscrivant son contenu au fur et mesure des balises rencontres.
Comme dans la lecture dun texte, il procde verticalement, commenant en haut de lcran pour aller jusquen
bas, et horizontalement de gauche droite, sur la totalit de lespace disponible et ncessaire en largeur comme
en hauteur.
II. BOIte de type bloc
III. boite de type en ligne
Par dfaut, les botes de type bloc seront affiches

dans une succession verticale.
Par dfaut, les botes de type en-ligne sont affiches dans

une succession horizontale.
Les principales balises crant des botes bloc sont :
Les principaux lments crant des botes en ligne sont :
La balise div
Le paragraphe p
Les titres h1, h2, h3, h4, h5, h6
Les listes et lments de liste ul, ol, li
Llment span
Le lien a
Limage img
Les emphases em et strong
Prenons par exemple deux blocs diffrencis par leur

couleur :
Prenons par exemple deux portions de texte diffrencies

par leur couleur :
HTML
HTML
<p class="jaune">Une bote jaune</p>

<p class="verte">Une bote verte</p>
<p>
<span class="jaune">Une bote jaune</span>
<span class="verte">Une bote verte</span>
</p>
CSS
CSS
.jaune
{
margin-left
: auto;
margin-right
: auto;
width : 200px;
background-color
: #ffff00;
}
.jaune
{
margin-left
: auto;
margin-right
: auto;
width : 200px;
background-color
: #ffff00;
}
.verte
{
margin-left
: auto;
margin-right
: auto;
width : 200px;
background-color
: #00ff00;
}
.verte
{
margin-left
: auto;
margin-right
: auto;
width : 200px;
background-color
: #00ff00;
}
83
IV. position
proprits valeurs
effet
position:
static
relative
absolute
fixed
inherit
Positionnement habituel (par defaut) de llment

Positionnement par rapport llment prcdent
Positionnement par rapport aux bords de la page, dfile avec page
Positionnement par rapport aux bords de la page, ne dfile pas avec page
Mme valeur que celle de llment parent
left:
top:
bottom:
right:

Les proprits left, top, bottom, right

Surtout utilises avec le positionnement absolute, ces quatre proprits dfinissent lemplacement dun lment par
rapport llment parent. Elles dplacent llment sans changer ses dimensions.
Ne confondez pas avec les proprits Margin qui elles modifient les dimensions de llment.
1. Positionnement relatif
Le positionnement relatif permet dinscrire un contenu en flux normal, puis de le dcaler horizontalement et/
ou verticalement. Le contenu suivant nest pas affect par ce dplacement qui peut donc entraner des
chevauchements.
HTML
<p>
Lorem
<span class="jaune">bote en position relative</span>
ipsum dolor.
</p>
CSS
.relative
{
position: relative;
bottom: 5px;
background-color: #ffff00;
}
Pour illustrer le risque de chevauchement, ajoutons un dcalage vers la droite :
CSS
. relative_decale
{
position: relative;
bottom: 5px;
left: 3em;
background-color: #ffff00;
}
84
2. Positionnement absolu
Le positionnement absolu retire totalement du flux le contenu concern : sa position est dtermine par rfrence
aux limites du conteneur.
Celui-ci peut-tre :
Le bloc conteneur initial, dfaut de bote positionne, cest dire le plus souvent la fentre du navigateur.
Une bote elle-mme positionne (position relative ou absolue).
Ceci savre trs utile en particulier pour :
Placer les menus de navigation en fin de page, pour amliorer laccessibilit de votre site en donnant un accs
immdiat son contenu dans les navigateurs textes, tout en les faisant apparatre en haut de page ou encore dans
une colonne pour les navigateurs graphiques.
Crer plusieurs colonnes au positionnement indpendant de lordre dans lequel elles se trouvent en HTML.
HTML
<div class="verte">
<p>Lorem ipsum</p>
<p class="jaune">Bote jaune en position absolue</p>
</div>
CSS
.verte
{
position : relative;
background-color
: #00ff00;
}
.jaune
{
position : absolute;
top : 10px;
right : 10px;
background-color
: #ffff00;
}
Invitablement, la bote en position absolue recouvre le contenu de notre paragraphe.
Pour lviter, dotons la bote conteneur verte dun remplissage suprieur suffisant :
CSS
.verte
{
padding-top
}
: 10px;
85
Nous pourrions aussi bien fixer la largeur de la bote jaune et doter le texte de la bote verte dun remplissage droite:
CSS
.verte
{
padding-right
}
: 10px;
.jaune
{
width : 10px;
}
Utilisation : une mise en page trois colonnes

La position absolue offre donc une alternative aux flottants pour raliser des mises en pages plusieurs colonnes. Le
cas typique est celui des trois colonnes dont voici le code :
HTML
<div class=" gauche">
</div>
<div class=" centre">
</div>
<div class="droite">
</div>
CSS
.gauche
{
width
position
top
left
border
}
.centre
{
margin
padding
border
}
.droite
{
width
position
top
right
border
}
: 15%;
: absolute;
: 5px;
: 5px;
: 1px solid black;
: 5px 20%;
: 0px 10px;
: 1px solid black;
: 15%;
: absolute;
: 5px;
: 5px;
: 1px solid black;
86
3. Positionnement fixe
La seule diffrence avec le positionnement absolu tient au fait que llment fix reste en place mme si la page
dfile avec lascenseur.
nb : IE6 ne reconnait pas encore ce mode de positionnement...
4. Position flottante

4.1 Gnralits
proprits valeurs
float:
effet
none / left / right
Une bote flottante est retire du flux normal et place le plus droite ou le plus gauche possible dans son
conteneur. Le contenu suivant cette bote flottante scoule le long de celle-ci, dans lespace laiss libre.
HTML
<p class="jaune">Une bote jaune flottant</p>
<p class="verte">Une bote verte dot dun contenu
plus long</p>
CSS
.jaune
{
width : 100px;
background-color
: #ffff00;
float : right;
}
.verte
{
background-color
}
: #00ff00;
Le navigateur place tout dabord la bote jaune, aligne sur le bord droit de cette partie de notre page, puis reprend le
cours normal du flux dans lespace laiss libre sa gauche pour afficher la bote verte.
Le flux occupe tout lespace disponible, la bote verte reprend donc toute la largeur de la page sitt passe la limite
infrieure de la bote flottante jaune.
Dans les navigateurs nappliquant pas la feuille de style (navigateurs texte ou non conformes aux standards), la
bote flottante sera simplement inscrite en flux normal avant la bote qui la suit.
87
4.2 Dbordement et spacer
Reprenons notre exemple, mais inversons les contenus: celui de la bote flottante jaune est prsent plus long que
celui de la bote verte :
HTML
<p class="jaune">Une bote jaune flottante dote dun
contenu plus long</p>
<p class="verte">Une bote verte</p>
CSS
Idem
La bote flottante, plus longue que la bote verte, dborde verticalement plus bas que celle-ci.
La solution le spacer (appliqu un lger changement de structure)
Il consiste inclure dans la bote verte (place dans une balise <div> prcdant la jaune) un lment bloc au contenu
fictif dot de la proprit clear; qui lui interdit dtre adjacent une bote flottante.
HTML
<div class="verte">
<p class="jaune">Une bote jaune flottant dot dun
<p>Une bote verte</p>
<div class="spacer"></div>
</div>
CSS
Idem +
.spacer
{
clear : both;
}
Le spacer, ne pouvant se placer ct du bloc flottant, se trouve dcal plus bas que celui-ci.
proprits valeurs
clear:
effet
none / both / left / right
88
4.2 Une variante du spacer <hr />

Le dfaut du spacer est dintroduire dans le code HTML un contenu fictif des fins de prsentation
Lorsque la bote adjacente la bote flottante est suivie dune coupure logique dans votre page (nouvelle section de
texte), il est prfrable dassocier la proprit clear un contenu rel.
La ligne horizontale cre par la balise <hr /> peut jouer avantageusement ce rle :
HTML
<div class="verte">
<hr>
</div>
CSS
Idem +
hr
{
clear
}
: both;
Vous pouvez toutefois rendre la balise invisible tout en la laissant agir sur le flux laide de la proprit visibility:
hidden;
HTML
<div class="verte">
<hr>
</div>
CSS
Idem +
hr
{
clear : both;
visibility: hidden;
}
89
Une utilisation des flottantes: les vignettes

On obtient une srie de vignettes pouvant accueillir par exemple des images, les liens dun menu de navigation,
etc (ou encore permettant de raliser une mise en page en colonnes) en crant une srie de botes flottantes
places dans une bote conteneur servant dlimiter lespace visuel o saffichent les botes flottantes. Elle sadapte
automatiquement la largeur daffichage disponible : faute de place droite, une bote flottante sera replace la
ligne.
HTML
<div>

<p class="flottante">bote verte 1</p>


etc
</div>
CSS
.conteneur
{
width : 100%;
}
.flottante
{
width : 100px;
margin : 2px;

background-color
: #00ff00;
float : left;
}
V. conclusion
Le positionnement CSS donne donc toute libert dans la mise en page.
Compare lutilisation des tableaux, cette technique offre des avantages essentiels :
Gestion de la prsentation partir dun document unique pour un nombre quelconque de pages?
Stricte sparation du contenu et de la prsentation, do un contenu mieux structur, dnu de balisage superflu.
Meilleure accessibilit, le contenu pouvant tre organis correctement dans les navigateurs non graphiques, tout en
tant librement dispos dans les navigateurs graphiques.
Elasticit des mises en page obtenues, qui sadaptent plus facilement aux diffrentes configurations des utilisateurs
(taille de la zone daffichage, rglages de tailles de caractres).
Effets graphiques nouveaux, tels le recouvrement en position fixe/absolue.
90
24. CSS / Feuilles de style pour

limpression
Il est possible de dire au navigateur dutiliser une feuille de style pour laffichage sur le web et une diffrente pour
limpression papier.
Pour ce il suffit de crer une premire feuille de style externe pour laffichage sur le web et de la relier la page html
dans len-tte comme suit :
<link rel=stylesheet type=text/css href=ecran.css>
Ensuite, il faut crer une deuxime feuille de style externe pour laffichage lors de limpression (enlever les barres de
navigation, les images inutiles, mettre une couleur de police noire ) et la relier la page html comme ceci :
<link rel=stylesheet type=text/css media=print href=print.css>
Lorsque lutilisateur demandera imprimer la page, ou mme faire un aperu avant impression, cest cette feuille
de style qui sera prise en compte.
91
25. CSS / Trucs & astuces
I. appliquer deux classes une balise

II. fontes specifiques
III.
Pallier le problme de la largeur de bote dans IE PC
IV.
Centrer les lments dans la page, horizontalement
V.
Centrer le contenu dune page en position absolue
VI.
Coloration des ascenseurs dans les pages (PC seulement)
VII. Empcher la coloration des ascenseurs dans les pages

(PC seulement)
VIII. Faire dfiler des images horizontalement dans un div
IX.
Faire des ombres portes sur vos botes
92
25. Trucs et astuces
I. appliquer deux classes une balise

Il est possible dappliquer une ou plusieurs classes une balise HTML.
Il suffit de sparer les noms des classes par un espace, le tout entre guillemets.
<p class="titre bordure">
II. fontes specifiques

Vous voulez absolument vos titres (par exemple) dans une police trs spcifique que trs peu dutilisateurs verront
car ils nauront pas la police en question. La seule solution est donc une image
<h1>Mon titre </h1>
h1
{
background
height
}
: url(titreimage.gif) no-repeat;
: hauteur de limage;
III. Pallier le problme de la largeur de bote dans IE PC

Dans IE 6 PC la bordure et le remplissage sont lintrieur de llment, alors que dans les autres navigateurs ils sont
lextrieur de llment.
<div id="box">...</div>
#box
{
width
border
padding
}
: 100px;
: 5px;
: 20px
Donc la bote fera 150px (100px + 2 fois 5px des bordures + 2 fois 20 px de remplissage) dans IE6 PC et 100px dans
les autres.
Une solution simple consiste donner la largeur de la bote de 150px, et lintrieur dutiliser un <div> qui lui aura les
paramtres de remplissage et bordure.
<div id="box">
<div>
...
</div>
</div>
#box
{
width
}
#box div
{
border
padding
}
: 150px
: 5px;
: 20px
93
IV. Centrer les lments dans la page, horizontalement

Il faut donner aux marges de droite et gauche les proprits : auto;
Rajouter : text-align:center; dans llment conteneur, ici le BODY.
Cependant lattribut text-align est hrit.
Pour pallier ce problme, remettez un text-align:left; dans llment du contenu.
body
{
margin
padding
text-align
}
: 50px 0px;
: 0px;
: center;
#Content
{
width : 500px;
margin
: 0px auto;
text-align
: left;
padding
: 15px;
border
: 1px dashed #333;
background-color
: #eee;
}
V. Centrer le contenu dune page en position absolue

Lastuce est dutiliser une marge gauche ngative: position:absolute; left:50%;
Puis la marge gauche est dfinie loppos de la moiti de la largeur de la bote : margin-left:-266px;
body
{
Margin :0px;
Padding :0px;
}
#Content
{
position : absolute;
left : 50%;
width : 500px;
margin-top
: 50px;
margin-left
: -266px;
padding
: 15px;
border
: 1px dashed #333;
background-color
: #eee;
}
VI. Coloration des ascenseurs dans les pages (PC seulement)

body, html
{
scrollbar-face-color
scrollbar-shadow-color
scrollbar-highlight-color
scrollbar-3dlight-color
scrollbar-darkshadow-color
scrollbar-track-color
scrollbar-arrow-color
}
: #000000;
: #000000;
: #000000;
: #000000;
: #000000;
: #000000;
: #000000;
94
VII. Empcher la coloration des ascenseurs dans les pages (PC seulement)
body, html
{
scrollbar-face-color
scrollbar-shadow-color
scrollbar-highlight-color
scrollbar-3dlight-color
scrollbar-darkshadow-color
scrollbar-track-color
scrollbar-arrow-color
}
: ThreeDFace !important;
: ThreeDDarkShadow !important;
: ThreeDHighlight !important;
: ThreeDLightShadow !important;
: ThreeDDarkShadow !important;
: Scrollbar !important;
: ButtonText !important;
VIII. Faire dfiler des images horizontalement dans un div
<div id="boite">

<div id="image">

<img src="image.jpg" width="100" height="67">

<img src=" image.jpg" width="100" height="67">



</div>
</div>
#boite
{
margin : 0;
padding
: 0px;
height : 87px;
width : 309px;
background-color
: #fff;
overflow
: auto;
white-space
: nowrap;
}
#image
{
display : inline;
height : 100px;
padding
: 0px;
}
95
IX. Faire des ombres portes sur vos botes
Dans le html, le <div>externe correspond lombre. Elle devra avoir une couleur lgrement plus fonce que linterne
<div class=ombre>

<div class=contenu>

Le contenu de ma bote ici<br />
</div>
</div>
#ombre
{
background-color
margin
padding
}
#contenu
{
background-color
border
margin
padding
}
: #ccc;
: 3em 0 3em 5em;
: 1,5em;
: #ffd;
: thin solid #999;
: -3em 0 0 -3em;
: 1.5em;
96
26. Lexique gnral
Accessibilit web
Laccessibilit web cest mettre le web et ses services la disposition de tous les individus, quel que soit leur
matriel ou logiciel, leur infrastructure rseau, leur langue maternelle, leur culture, leur localisation gographique, ou
leurs aptitudes physiques ou mentales.
Rendre les sites web accessibles, autorise, en thorie, laccs linformation, aux services (rservation de billet
de train, de place de concerts, dachats en ligne...) pour les personnes en situation de handicap temporaire ou
permanent ainsi que pour toutes les personnes ges. Le consortium W3C tablit des standards trs prcis pour
sassurer de laccessibilit du web.
Agence web
Agence de communication multimdia, spcialise dans le conseil, la conception, lintgration et le dveloppement
dapplications web. Les agences web constituent une nouvelle forme de prestataires de services : elles regroupent
des personnes spcialises dans des activits telles que la conception de sites web, le marketing relationnel, le
dveloppement et lintgration dapplications de commerce lectronique.
Une agence web peut prendre en charge tout ou partie dun projet Internet. Issue du monde du service et de la
communication, elle se caractrise par lexprience acquise et les mthodologies appliques. Elle veut rpondre
lensemble des nouveaux besoins rencontrs par les entreprises qui dveloppent une stratgie daffaires
lectroniques. Elle offre gnralement trois comptences : un ple conseil, un ple ingnierie en charge de la
ralisation du site et enfin un ple communication.
Bande passante
La bande passante correspond la quantit maximale de donnes quune voie de communication peut transmettre
par seconde. Elle est calcule en bits par seconde (bit/s), cest--dire en se servant dune unit qui mesure aussi le
dbit et la vitesse de transmission des donnes. La bande passante peut devenir ainsi une indication de vitesse et de
dbit. Cest pour cela que, dans certains contextes, on remplace en anglais le terme bandwidth par throughput et, en
franais, le terme bande passante par dbit.
Base de donnes
Une base de donnes est un ensemble structur et organis permettant le stockage de grandes quantits
dinformations afin den faciliter lexploitation (ajout, mise jour, recherche de donnes). Une base de donnes se
traduit physiquement par un ensemble de fichiers sur disque.
97
26. Lexique gnral
CSS (Cascading Style Sheets)

Le langage CSS (Cascading Style Sheets : feuilles de style en cascade) est utilis pour dcrire la prsentation dun
document structur crit en HTML ou en XML, et cest le World Wide Web Consortium (W3C) qui en a la direction.
CSS est utilis pour dfinir les couleurs, les polices, le rendu, et dautres caractristiques lies la prsentation dun
document. Lobjectif est de bien sparer la structure (crite en HTML ou similaire) et la prsentation (en CSS) du
document.
Cette sparation fournit un certain nombre de bnfices, permettant damliorer laccessibilit, de changer plus
facilement de structure et de prsentation, et de rduire la complexit de larchitecture dun document.
Enfin, CSS permet de sadapter aux caractristiques du rcepteur. HTML ne dcrit que larchitecture interne, et CSS
dcrit tous les aspects de la prsentation. CSS peut dfinir couleur, police, alignement de texte, taille, position, mais
aussi le formatage non visuel, comme la vitesse laquelle le document doit tre lu par des lecteurs de texte.
Ainsi, les avantages des feuilles de style sont multiples :
La structure du document et la prsentation sont grs dans des fichiers spars.
La conception dun document se fait dans un premier temps sans se soucier de la prsentation, ce qui permet
dtre plus efficace.
Dans le cas dun site Internet, la prsentation est uniformise : Les documents (pages html) font rfrence la (aux)
mme(s) feuille(s) de styles. Cette caractristique permet de plus un relookage rapide.
Un mme document peut donner le choix entre plusieurs feuilles de style (impression ou lecture lcran par
exemple).
Certains navigateurs web permettent daccder facilement un choix de feuilles de style.
Le code HTML est considrablement rduit en taille et en complexit, puisquil ne contient plus de balises de
prsentation.
Design graphique
Procd de cration et de dveloppement dune ou de plusieurs images visant harmoniser lenvironnement visuel
propos lusager. Le design demande de la recherche, du modelage, des ajustements et du re-design.
Design interactif
Procd de cration et de dveloppement graphique, audio, textuel et anim dune prsentation visant crer une
interactivit entre lusager et le systme propos. Ce faisant, le site web ou le logiciel prend constemment en compte
les actions de linteracteur, et produit ainsi un contenu ou ralise un objectif.
Design web
Le design web dsigne la cration du support visuel destination dun site web. Il sagit dune phase prpondrante
dans la conception dun tel site. Lidentit dun site web aprs tre conceptualise sera transforme en lignes de
code et images pour safficher dans un fureteur web.
Comme pour linfographie et le graphisme, le design web na pas encore acquit son indpendance part entire
comme activit artistique. Les raisons sont nombreuses, autant que les affinits quelle exige ; le design web
concerne la cration de la charte graphique, linterface et la navigation du site, larborescence. Ce qui demande de
nombreuse comptence en graphisme, programmation, animation.
Lobjet du design web est de valoriser limage du propritaire du site par le biais dlments graphiques afin den
renforcer son identit visuelle, nanmoins plusieurs contraintes lie lergonomie rduisent les possibilits. Un
site doit avant tout rpondre aux attentes des utilisateurs. Gnralement un compromis doit tre trouv entre le
graphisme et la sobrit ncessaires la lecture et la navigation.
98
26. Lexique gnral
Formulaire web
En informatique, un formulaire est un espace de saisie dans linterface utilisateur, pouvant comporter plusieurs zones,
ou champs " : on peut y saisir du texte, cocher des cases, effectuer un choix dans une liste de termes prdfinis,
appuyer sur des boutons, etc. Ces zones de saisie assurent linteractivit entre le client (par exemple, le navigateur
de linternaute) et le serveur (par exemple, la machine qui hberge les pages web sur internet).
Les boutons des formulaires permettent de lancer des actions prdfinies par lauteur des pages. Ces actions sont
des scripts (javascript, PHP, Perl, CGI...) qui envoient les donnes saisies au serveur. Ce dernier les traite et renvoie
une rponse lutilisateur via la page web.
HTML
Langage de balisage de texte qui permet la cration de documents hypertextes affichables par un navigateur Web.
Le langage HTML est une application de la norme ISO-SGML (Standard Generalized Markup Language) et a t
dfini par le CERN (Centre europen de recherche nuclaire).
HTTP
Le Hypertext Transfer Protocol, abrg HTTP, littralement protocole de transfert hypertexte ", est un protocole
de communication informatique client-serveur dvelopp pour le World Wide Web. Il est utilis pour transfrer les
documents (document HTML, image, feuille de style, etc.) entre le serveur HTTP et le navigateur Web lorsquun
visiteur consulte un site Web.
HTTPS (Secured) est la variante du HTTP scuris avec les protocoles SSL ou TLS. Il permet au visiteur de
vrifier lidentit du site auquel il accde grce un certificat dauthentification. Il permet galement de chiffrer
la communication. Il est gnralement utilis pour les transactions financires en ligne : commerce lectronique,
banque en ligne, courtage en ligne, etc.
Interactivit
Linteractivit est la composante grce laquelle un logiciel ou un site internet prend constamment en compte les
actions de linteracteur.
Linteractivit est souvent associe aux technologies permettant des changes homme-machine o la conduite et le
droulement de la situation est li a des processus de rtroaction, de collaboration, de coopration entre les acteurs
qui produisent ainsi un contenu, ralisent un objectif, ou plus simplement modifient et adaptent leur comportement.
Elle distingue une communication interactive qui sopposerait une communication sens unique, sans raction du
destinataire, sans feedback.
Interface
Une interface permet dchanger des informations entre lutilisateur humain et la machine. Pour que cette
communication soit la plus simple possible, on utilise diffrents lments.
Les priphriques dentre, comme le clavier, la souris, ou le scanner permettent lhomme de donner des
renseignements ou des ordres la machine. Les priphriques de sortie comme lcran, des diodes ou limprimante
permettent la machine de rpondre aux ordres et dafficher des informations.
99
26. Lexique gnral
Internet
Internet est le nom donn au rseau informatique mondial, reposant sur le systme dadresses global des protocoles
de communication TCP/IP (Transmission Control Protocol/Internet Protocol) et qui rend accessible au public des
services comme le courrier lectronique et le World Wide Web.
Lusage courant fait rfrence Internet de diffrentes manires. Outre les recommandations officielles, il nest pas
rare de rencontrer les termes suivants : le Net " ou le net ", Internet ", lInternet ", le rseau des rseaux " ou
plus simplement le rseau " ou le Rseau " dclin parfois en Le rseau ".
Certains termes sont utiliss tort pour faire rfrence Internet, par exemple : la Toile ", le web " ou le Web "
(the Web en anglais), mais cela dsigne le Web et non pas Internet. Cette confusion entre web et net existe aussi en
anglais.
Intranet
Rseau informatique priv, lintrieur dune organisation, qui utilise les protocoles de communication et les
technologies du rseau Internet.
Un intranet est un rseau priv ne contenant en fait quun seul site. Par analogie avec site Internet (ou site Web),
correspondant au site public dun organisme ou dune entreprise accessible sur le rseau Internet, on utilise parfois
site intranet pour parler du site priv accessible uniquement linterne par le personnel dun organisme ou dune
entreprise.
JavaScript
JavaScript est un langage de programmation de type script, utilisant les objets, principalement utilis dans les pages
Web.
JavaScript a t cr en 1995 par Brendan Eich pour Netscape Communications Corporation. Il est apparu pour la
premire fois dans les versions btas de Netscape Navigator 2.0.
Dabord appel LiveScript, il a t rebaptis JavaScript et est dcrit comme un complment Java dans un
communiqu de presse commun de Netscape et Sun Microsystems, dat du 4 dcembre 1995. Cette initiative a
contribu crer auprs du public une certaine confusion entre les deux langages, proches syntaxiquement mais
pas du tout dans leurs concepts fondamentaux, qui perdure encore aujourdhui.
Le propos de JavaScript est de manipuler de faon simple des objets, au sens informatique, fournis par une
application hte.
JavaScript est aujourdhui dfini par la norme ECMA-262, aussi connue sous lappellation ECMAScript. La troisime
dition dECMA-262 parue en 1999 correspond la version 1.5 de JavaScript. Son implmentation par Microsoft
porte quant elle le nom de JScript. Il est question dune version JavaScript 1.6 supporte par la version 1.5 de
Firefox.
Du code JavaScript peut tre intgr directement au sein des pages Web, pour y tre excut sur le poste client.
Cest alors le navigateur Web qui prend en charge lexcution de ces petits bouts de programmes appels scripts.
Gnralement, JavaScript sert contrler les donnes saisies dans des formulaires HTML, ou interagir avec le
document HTML via linterface DOM, fournie par le navigateur (on parle alors parfois dHTML dynamique). Il est aussi
utilis pour raliser des services dynamiques, parfois futiles ou strictement cosmtiques.
100
26. Lexique gnral
Langage de programmation
Langage artificiel comprenant un ensemble de caractres, de symboles et de mots rgis par des rgles qui
permettent de les assembler, utilis pour donner des instructions un ordinateur.
Lune des principales qualits dun langage de programmation est la portabilit qui permet un logiciel dvelopp
dans un langage de programmation grande portabilit, de fonctionner sur diffrents types de systmes
informatiques.
Le terme langage de programmation " recouvre une vaste panoplie, allant du langage machine form dinstructions
binaires, aux langages de haut niveau dont la forme se rapproche des langages naturels.
Lien hypertexte
Connexion activable la demande sur le web, reliant des donnes textuelles ayant une relation de complmentarit
les unes avec les autres, et ce, o quelles se trouvent dans Internet.
Dans les pages Web, la prsence dun lien hypertexte est signale visuellement par son ancre qui peut tre une
partie de phrase ou un mot souligns ou de couleur diffrente de celle du texte, ou encore une image, une icne, un
graphique.
Navigateur web
Logiciel client capable dexploiter les ressources hypertextes et hypermdias du Web ainsi que les ressources
dInternet dans son ensemble, qui permet donc la recherche dinformation et laccs cette information.
Internet Explorer, Mozilla Firefox, Netscape Communicator et Opera sont des exemples de navigateurs Web.
Protocole FTP
Protocole de transfert de fichiers qui permet de tlcharger une copie de donnes choisies par linternaute, dun
ordinateur un autre, selon le modle client-serveur.
Les donnes tlcharges peuvent prendre la forme de logiciels, de fichiers de toute nature (textes, graphiques,
images, sons, etc.).
Le sigle FTP est galement utilis pour dnommer les applications qui fonctionnent selon le protocole FTP, ainsi que
les transferts effectus grce ce protocole.
Rfrencement
Le rfrencement est lensemble des techniques qui permettent dinscrire un site dans les moteurs de recherche,
les rpertoires ou dans les annuaires. Le rfrencement est souvent associ avec le positionnement qui, quant lui,
reprsente lart doptimiser la place du site dans les rponses fournies par les moteurs de recherche.
Le rfrencement dun site web se fait, selon loutil de recherche, en prcisant ladresse URL du site et ladresse de
courriel du webmestre, ou en ajoutant dautres informations telles que le titre de la page daccueil, un texte descriptif,
une catgorie, quelques mots cls, etc.
101
26. Lexique gnral
URL
Chane de caractres normaliss servant identifier et localiser des ressources consultables sur Internet et y
accder laide dun navigateur.
Une adresse URL (http://www.exemple.com/ressources/fichier.html), comprend le nom du protocole de
communication (http) ou encore ftp, telnet, mailto, news, etc., des protocoles associs dautres services offerts sur
Internet ;
le nom du serveur (www.exemple.com), nom de domaine de lordinateur hbergeant la ressource demande ; le
chemin daccs la ressource (/ressources/fichier) qui permet au serveur de connatre lemplacement de la ressource
(cest--dire le rpertoire, le sous-rpertoire et le nom du fichier demand) et lextension (html) qui indique le format
dans lequel la page a t cre.
Dans une adresse URL, la barre oblique permet de spcifier un sous-rpertoire.
W3C (World Wide Web Consortium)
Le World Wide Web Consortium, abrg W3C, est un consortium fond en octobre 1994 pour promouvoir la
compatibilit des technologies du World Wide Web telles que HTML, XHTML, XML, CSS, PNG, SVG et SOAP.
Le W3C nmet pas des normes, mais des recommandations. Sa gestion est assure conjointement par le
Massachusetts Institute of Technology (MIT) aux tats-Unis, le European Research Consortium for Informatics and
Mathematics (ERCIM) en Europe (auparavant lInstitut national de recherche en informatique et en automatique
franais (INRIA)) et lUniversit Keio au Japon.
Un document W3C traverse plusieurs tapes avant de devenir une Recommandation :
Working Draft (brouillon de travail)
Last Call (dernier appel)
Proposed Recommendation (recommandation propose)
Candidate Recommendation (candidat la recommandation)
Une recommandation peut tre mise jour par errata dit sparment, jusqu laccumulation de suffisamment de
modifications ; une nouvelle version de la recommandation est alors publie (XML en est aujourdhui sa troisime
version). Parfois, une recommandation recommence le processus, comme RDF.
Le W3C publie aussi des remarques informatives qui ne sont pas destines tre traites en tant que norme. Le
consortium laisse le soin aux fabricants de suivre les recommandations.
Contrairement lOrganisation internationale de normalisation ou dautres corps internationaux de standardisation, le
W3C ne possde pas de programme de certification, et beaucoup de standards ne dfinissent pas formellement un
niveau de conformit. Ils sont ainsi souvent implants partiellement.
World Wide Web
Le World Wide Web (ou le Web, la Toile, WWW ou encore W3), littralement la toile (daraigne) mondiale ", est un
systme hypertexte public rparti sur Internet et qui permet de consulter, avec un navigateur Web, des pages Web
mises en ligne dans des sites Web. Limage de la toile vient des hyperliens qui lient les pages Web entre elles.
Le Web a rendu les mdias grand public attentifs Internet. Depuis, il est frquemment confondu avec ce dernier. Ce
nest cependant quun des systmes disponibles sur Internet, avec le courrier lectronique, Usenet, la messagerie
instantane, etc. Internet prcde le Web de nombreuses annes.
102

HTML, Javascript, XHTML & Css

Transféré par

Informations du document

Titre original

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, Javascript, XHTML & Css

Transféré par

Droits d'auteur :

Formats disponibles

design graphique / web design

HTML, Javascript, XHTML & CSS

HTML, Javascript, XHTML & CSS

01. Introduction au langage HTML

qui utilise le html ?

HTML, Javascript, XHTML & CSS

01. Introduction au HTML

II. qui utilise le html ?

HTML, Javascript, XHTML & CSS

01. Introduction au HTML

III. apprendre le html

HTML, Javascript, XHTML & CSS

02. Introduction auw principes

un peu dordre et de mthode

HTML, Javascript, XHTML & CSS

02. Introduction au webdesign

II. un peu dordre et de mthode

HTML, Javascript, XHTML & CSS

02. Introduction au webdesign

1. Prparez larborescence de votre site.

HTML, Javascript, XHTML & CSS

02. Introduction au webdesign

2. Spcifiez les liens vers vos diffrentes pages.

HTML, Javascript, XHTML & CSS

02. Introduction au webdesign

HTML, Javascript, XHTML & CSS

03. HTML, les bases

quelques regles simples pour dbuter

HTML, Javascript, XHTML & CSS

03. HTML, les bases

II. LE squelette dune page

1. Len tte / HEAD

<script src="javascript.js" type="text/javascript" charset="iso-8859-1"></script>

HTML, Javascript, XHTML & CSS

03. HTML, les bases

III. les balises

2. Balises BLOC vs. INLINE

HTML, Javascript, XHTML & CSS

03. HTML, les bases

IV. les attributs

V. quelques regles simples pour dbuter

HTML, Javascript, XHTML & CSS

04. La balise <BODY>

dfinit les marges haute et basse de la page (pour I.E)

dfinit les marges haute et basse de la page

dfinit la couleur du fond

dfinit la source relative de limage de fond

background-repeat: no-repeat; dfinit la non rptition du bkg (css intgre)

dfinit si la capacit du fond scroller avec la page

dfinit la prsence de la barre de scroll sur la page

dfinit la couleur du texte pour la page

dfinit la couleur des liens pour la page

<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#aaaaaa" background="images/

HTML, Javascript, XHTML & CSS

Les lignes horizontales

VII. Les listes

HTML, Javascript, XHTML & CSS

II. Les accents

Pour une liste plus exhaustive des charactres spciaux :

HTML, Javascript, XHTML & CSS

III. Les en ttes

IV. Les paragraphes

aligne le texte sur la marge de gauche