HTML, XHTML & CSS

design graphique / web design
// HTML, Javascript
XHTML & CSS
version 1.3
date 15 / 09 / 2011
auteur Loïc Swiny
contact mr@sweeen.com
HTML, Javascript, XHTML & CSS
// sommaire
GENERALITES PRODUCTIVES ET TECHNIQUES
01. Introduction aux principes généraux du webdesign .................................... // page. 03

02. Introduction au langage HTML ....................................................................... // page. 06
HTML
03. Les bases ......................................................................................................... // page. 12

04. La balise <BODY> ........................................................................................... // page. 16
05. Texte / alignement, formatage, listes ............................................................ // page. 17
06. Liens ................................................................................................................. // page. 21
07. Images & Map .................................................................................................. // page. 24
08. Tableaux ........................................................................................................... // page. 27
09. Frames & I-Frames .......................................................................................... // page. 32
10. Formulaires ..................................................................................................... // page. 36
11. Récapitulatif des balises ................................................................................ // page. 40
JAVASCRIPT
12. Introduction au Javascript .............................................................................. // page. 46

13. Menus dynamiques ......................................................................................... // page. 49
14. Popup ............................................................................................................... // page. 53
15. Full screen ....................................................................................................... // page. 56
16. Restriction d’accès au contenu .................................................................... // page. 57
XHTML
17. Introduction au XHTML ................................................................................... // page. 58
CSS
18. Introduction et principe de base .................................................................... // page. 63

19. Cascades et conflits d’héritage ..................................................................... // page. 67
20. Sélecteurs ........................................................................................................ // page. 68
21. Propriétés ........................................................................................................ // page. 72
22. Boites et positionnement ............................................................................... // page. 81
23. Feuille de style pour l’impression .................................................................. // page. 90
24. Trucs & astuces ............................................................................................... // page. 91
LEXIQUE GENERAL .................................................................................................... // page. 96
2
01. Introduction aux principes

généraux du webdesign
I. GENERALITES
II. le contenu
IV. l’architecture

1. Arborescence
2. Liens
3. Modularité
V. la forme

1. Zoning
2. Format technique
3. Format visuel
3
HTML, Javascript, XHTML & CSS 02. Introduction au webdesign
I. GENERALITES
Vous êtes designer graphique et vous souhaitez ajouter les joies du webdesign et de l'intégration HTML aux cordes
de votre arc ?! Formidable !
Mais ne nous emballons pas.... avant de se lancer dans l’habillage graphique et à fortiori dans l’intégration d’un
produit, il convient de réfléchir à sa finalité et de définir son contenu, son architecture, et sa forme générale.
N'oubliez pas que l'un des objectifs de ce metier est de génerer du sens.
Pour ce faire, des outils sont à votre disposition : le brief créatif, le benchmark de referencement sectoriel, une
bonne connaissance de la typologie, des contraintes d’intégration et de l’architecture de l’information des sites
internet (cf. Methodologie des metiers du design interactif).
Ajoutez à l’ensemble un gout prononcé pour la culture design et ses publications, votre curiosité naturelle, une
bibliothèque de sources graphiques bien fournie (images bitmap & vectorielles, fontes, brosses photoshop...) et un
peu de talent... mais n’oubliez jamais qu’au début tout commence toujours par une page blanche et un stylo pour
esquisser vos premières rec
4
II. le contenu
La définition du contenu de tout produit de communication interactive est certainement un des points les plus
important à dégager en amont. C’est sa définition exhaustive qui vous permettra de calibrer correctement le contenu
de chaque rubrique et donc de le valoriser de façon la plus efficace possible.
Il n’est en effet rien de plus désagréable à consulter qu’une page au contenu mal calibré, soit parce que trop "vide"
soit parce que trop "riche" en information. Une bonne définition des contenus donnera à vos visiteurs l’envie de
revenir sur votre produit, c’est donc une phase de construction à ne surtout pas négliger.
• Maîtrisez le sujet abordé : Même si vous n’êtes pas familier du produit traité, prenez le temps de vous renseigner
sur ce dernier, vous serez par la suite plus à l’aise lorsqu’il s’agira d’architecturer l’info.
• Dégagez les principales rubriques : Soyez à même de proposer un rubriquage le plus cohérent possible par
rapport au produit à traiter ; ce faisant en devancant la demande du client vous eviterez l’ecueil d’une arborescence
mal équilibrée.
• Préparez vos sources : Réunissez et contrôlez textes, paragraphes, orthographe, images, contenus interactifs...
plus vous aurez une vision complète de la quantité de contenu à integrer, plus votre produit sera cohérent et efficace.
5
III. l’architecture
Sous peine de courir très vite à la catastrophe (dans le cas de produits à grande profondeur éditoriale et/ou
évolutive) et de perdre un temps précieux lors de la phase d’intégration, dégagez au plus tôt l’architecture physique
(arborescence) de votre site.
1. Préparez l’arborescence de votre site.
A l’instar de votre dossier de travail une bonne nomenclature de dénomination de l'arborescence est essentielle à
l’accompagnement d’un travail propre et clair. Si vous suivez le protocole de gestion des fichiers évoqué dans le
premier dossier du manuel "méthodologie des metiers du design interactif", la localisation physique de votre produit
se situe dans le dossier "web" de ce dernier.
# web
• index.html fichier html de la page d’accueil
• 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

# etc... dossier de la rubrique
NB : En raison des standards referentiels (google et autres moteurs de recherche), votre première page (page
d’accueil, homepage, ...), doit se nommer index.html. Il est de plus, préférable que les noms de vos pages et
dossiers ne dépassent pas 8 caractères.
2. Spécifiez les liens vers vos différentes 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 dernière lorsque vous la formaliserez physiquement dans votre code (cf. Methodologie
des metiers du design interactif / 08. Architecture de l’information).
3. Modularité du produit.
En fonction de sa profondeur et/ou de la commande client, pensez à architecturer votre produit pour qu’il puisse, au
cas échéant, accueillir de nouvelles rubriques. Dans cette optique votre maquette se doit de ne pas être trop "rigide"
graphiquement parlant.
6
V. la forme
1. Zoning
Afin de faciliter l’intégration du code avec un éditeur html, n’hésitez pas à réaliser un gabarit structurant de votre
future maquette faisant apparaitre le "zoning" de votre produit ; ceci également dans le but d’affecter aux éléments
des côtes en pixels pour une mise en page soignée.
• Dessinez un premier croquis de votre produit

• Spécifiez les côtes en pixels
900px
120px navigation principale
400px bandeau visuel
10px fil d'ariane (option)

sous navigation contenu rubrique navigation annexe
*px
150px *px 150px
10px footer > adresse / contact / mail / mentions legales / crédits
7
2. Format technique
Le developpement d’un produit de communication interactive, de par la finalité de son support de diffusion (écran) ne
s’envisage pas de la même manière qu’un produit imprimé.
Voiçi un rappel des différences principales à prendre en considération lors de la création de la maquette :
(cf. Methodologie des metiers du design interactif / 09. Contraintes html des projets de communication interactive)
3. Format visuel
A contrario de l’édition de documents imprimés (dans un format fixe), l’un des paramètres les plus importants à
prendre en compte lors de la construction d’un site est la modularité du support final. Vous allez vous heurter à ...
• La multiplicité des plateformes MAC / PC

• La multiplicité des systèmes d’exploitations MAC OS X / WINDOWS XP, Vista, Seven / LINUX
• La multiplicité navigateurs OPERA / SAFARI / FIREFOX / INTERNET EXPLORER 6, 7, 8
• La diversité des définitions d’écrans 1024x768 / 1152x864 / 1280x1024 / 1600x1200
... pour ne citer que les paramètres les plus importants. On pourrait aussi évoquer la puissance des connexions
proposées par les fournisseurs d’accès, la qualité d’affichage des couleurs à l’écran et la puissance des machines.
Il est donc essentiel lors de la création d’une interface de penser à tout ces paramètres pour éviter de vous
confronter à un conflit (voir une impossibilité) d’intégration d’élément lors de la découpe de ce dernier.
Pour eviter les migraines, et dans le cadre de la construction d’un produit classique à diffusion d’information verticale
(ceci excluant de facto les formats et expérimentation plus exotiques) il est conseillé de travailler à partir d’un gabarit
au format max de 1600x1200 pixels incluant une "zone utile" centrée de 1000 pixels de large.
1600
1200 1000
8
02. Introduction au langage HTML
I. HISTORIQUE
II. qui utilise le html ?
III. apprendre le html
9
HTML, Javascript, XHTML & CSS 02. Introduction au HTML
Le HTML ou HyperTexte Markup Language est le langage de publication utilisé sur le World Wide Web.
Très facile à maîtriser, il s’agit tout simplement d’un langage à balises ("tags" au format ASCII), délimitées entre
crochets et affinées dans leur formes par des attributs ; ces instructions placées dans un simple fichier texte au
format .html (ou .htm) sont ensuite interprétées par les différents navigateurs pour en faire apparaitre le contenu sur
votre écran…
I. HISTORIQUE
C’est Tim Berners-Lee qui a écrit et développé ce langage pour répondre aux besoins du système d’échange
d’informations qu’il venait d’inventer : le World Wide Web.
Pour expliciter physiquement ces échanges entre machine, un protocole spécifique a été mis en place, c’est le HTTP
(Hyper Text Transfert Protocol) ; moyen simple et efficace d’accéder sur un réseau à des documents liés entre eux
par des hyperliens.
Ecrits en HTML, les documents s’enchaînent les uns les autres par un simple clic de souris et sont transportés
jusqu’au lecteur grâce au protocole HTTP.
Un leger point historique...
1991 / HTML 1.0

Le language HTML voit le jour au au CERN (Centre d’études et de recherches nucléaires) situé près de Genève.
Il y a peu de balises : on peut cependant insérer des images, créer des liens hypertextes, mais tout cela en noir, sur
un fond gris, et sans interface graphique !
1995 / HTML 2.0

Cette norme voit apparaître des possibilités de mise en page avec des tableaux.
1996 / HTML 3.0

De nouvelles balises et de nouveaux attributs sont insérées. Listes, Cartes cliquables, Frames...
1998 / HTML 4.0

Outre de nouvelles commandes (I-Frames), un nouveau principe révolutionnaire de mise en page séparant 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. Avec l'inclusion des feuilles de style (CSS / cascading style
sheet) qui séparent le fond de la forme, c’est l’avènement du Web 2.0.
2010 / HTML 5.0

La mise en place d’une nouvelle standardisation du langage XHTML est prévue pour la nouvelle décennie à venir.
Que nous réserve t’elle ?!
II. qui utilise le html ?
Avant d’arriver au stade de produit fini permettant la consultation par l’internaute des informations qu’il contient, la
vie d’un site Internet se construit en suivant plusieurs étapes dont la construction HTML n’est qu’un des jalons.
Dans le process moderne de la construction d’un produit de communication interactive, ce sont les intégrateurs,
situés juste après les infographistes et juste avant les developpeurs (ingénieurs informaticiens responsables de
l’implémentation des fonctions dynamiques du produit) qui sont en charge de la construction des pages HTML.
Ils y incluent textes, images, documents flash, sons et vidéos en fonction des recommandations graphiques des
studios créatifs… et c’est à eux tout particulièrement que l’on demande une excellente connaissance du code.
10
HTML, Javascript, XHTML & CSS 02. Introduction au HTML
III. apprendre le html
Si vous n’avez jamais consulté le code source d’une 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 élémentaire ainsi que par sa simplicité physique, apprendre le HTML pour integrer un
ensemble de pages web et les rendre cohérentes entre elles ne nécessite aucune compétence 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 d’enregistrer le fichier au format "texte seulement", avec l’extension .html.
On peut également utiliser des éditeurs à interface d’intégration accompagnée de type Dreamweaver, mais il est
toutefois recommandé de bien connaître la base du langage pour les utiliser correctement afin d’en optimiser les flux
de production.
A l’arrivée, la phase la plus délicate de la construction d’un produit de communication interactive ne réside pas
dans son intégration mais plus dans la compréhension et l’application des process et méthodes qui vont rendre sa
création plus fonctionnelle, fluide et efficace.
Ce que nous allons voir ensemble...
11
03. HTML, les bases
I. introduction
II. LE squelette d’une page

1. L’en tête / HEAD
2. Le corps / BODY
III. les balises

1. Généralités
2. Balises BLOC vs. INLINE
IV. les attributs
V. quelques regles simples pour débuter
12
HTML, Javascript, XHTML & CSS 03. HTML, les bases
I. introduction
Comme nous l’avons 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) délimitées entre crochets et affinées dans leur formes par des
attributs. A l’aide de ces attributs et des valeurs insérées, vous allez définir la forme de votre texte (gras, italique,
polices...), inclure des images, des animations, de la vidéo, du son, et des liens vers d’autres pages... qui seront
ensuite interprétées par les différents navigateurs pour en faire apparaitre le contenu sur votre écran…
II. LE squelette d’une page
Une page HTML est divisée en deux parties : l’en-tête (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. L’en tête / HEAD
Invisible à l’écran, cette partie regroupe toutes les informations nécessaires à un bon affichage de votre page par les
différents 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 appellées "meta-balises". Principalement utilisées pour l’indexation et le
référencement des sites par les moteurs de recherche, ces dernières sont devenues facultatives, voire
obsolètes. Les seules balises absolument nécessaires à 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 n’utilisant pas
d’accent), il vous est plus que fortement conseillé d’appliquer une méta balise de définition d’alphabet
prenant en compte ces derniers sous peine d’être condamné à les signigfier physiquement dans le code
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
• L’appel 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
• L’appel 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
C’est la partie où, toujours grâce à l’utilisation des balises, vous intégrerez les différents éléments de votre page
visibles à l’écran : texte, hyperliens, images, animations, vidéo, son...
13
III. les balises
1. Généralités
• Les balises sont des séquences de caractères interprétées par les navigateurs Web. Lorsque l’on regarde
le contenu d’une page HTML, on repère 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 constituée d’un mot (ou plusieurs dans certain cas) encadrée
par les signes inférieur < et supérieur >.
• La plupart des balises doivent être fermées.
• La majorité des balises servent à la mise en page (texte en gras, tableaux...), mais toutes ne sont pas
dédiées à la mise en page des documents, en effet, le HTML permet par exemple de donner des informations
sur le document lui même (informations qui ne seront pas affichées), d’appeler des fichiers externes comme
des images, des animations Flash, des sons...
• Etant donné que c’est un langage de description, il n’est 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 définition de cette notion soit un peu prématurée à ce stade (nous y reviendrons lorsque nous aborderons
l’utilisation des CSS), il s’agit d’une notion essentielle à prendre en considération.
Dans l’immédiat gardez en memoire qu’il y a deux type de balises :
• les balises de type BLOC : dont le développement vertical est généralement dédié aux définitions structurelles des
contenus de votre page (listes, tableaux, etc...)
<TABLE>
<TR>
<TD>
</TD>
</TR>
</TABLE>
• les balises de type INLINE : dont le développement horizontal est généralement dédié aux définitions d’apparence
des contenus de votre page (images, textes, etc...)
<FONT SIZE="1" COLOR="black"><I><B>texte</B></I></FONT>
14
IV. les attributs
Ce sont les spécifications particulières de chaque balise (dont nous verrons la liste afférente à chacune lorsque
abordé). Ils permettent de modifier l’effet de la balise ou précisent son action.
Les attributs figurent après le nom des balises dans les < > ; ils sont séparés par des espaces et leur valeur est
indiquée entre guillemets.
<font face="arial" size="1" >texte</font>
Dans cet exemple concernant une ligne de texte, cette dernière a reçu une balise de définition de police de caractère
font qui elle-même a reçu un attribut de famille face et de taille size
V. quelques regles simples pour débuter
• Pratiquement toutes les balises vont par paire (balises d’ouverture 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 d’aérer votre code au maximum en utilisant la tabulation de votre clavier à chaque implementation
descendante de code (cf. exemple de squelette de page au début de ce dossier)
15
04. La balise <BODY>
Structure fondatrice des éléments qui seront visibles sur votre page, la balise <BODY> est à même de recevoir un
certain nombre d’attributs dont certains sont incontournables
balise attribut valeurs effet

<body> topmargin pixel définit les marges haute et basse de la page (pour I.E)
leftmargin pixel définit les marges gauche et droite de la page (pour I.E)
marginwidth pixel définit les marges haute et basse de la page

marginheight pixel définit les marges gauche et droite de la page
bgcolor hexadecimale définit la couleur du fond
background url relatif définit la source relative de l’image de fond

url absolu définit la source absolue de l’image de fond
style background-repeat: no-repeat; définit la non répétition du bkg (css intégrée)

background-repeat: x; définit la répétition du bkg sur l’axe X (css intégrée)
background-repeat: y; définit la répétition du bkg sur l’axe Y (css intégrée)
bgproperties fixed définit si la capacité du fond à scroller avec la page
scroll yes / no / auto définit la présence de la barre de scroll sur la page
text hexadecimale définit la couleur du texte pour la page
link hexadecimale définit la couleur des liens pour la page

alink hexadecimale définit la couleur des liens actifs pour la page
vlink hexadecimale définit la couleur des liens visités 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" >
16
05. Le texte
I. Le CARACTERE
II. Les styles
III. Les accents
IV. Les en têtes
V. Les paragraphes
VI. Alignement / FERRAGE
VII. Les lignes horizontales
VIII. Les listes
1. Les listes non numérotées

2. Les listes numérotées
17
HTML, Javascript, XHTML & CSS 05. Le texte
Au sein d’une page HTML le texte s’implémente entre les balises "body". Ce dernier se doit d’être bien entendu lui
aussi codé. Voici les codes d'intégration de texte les plus courant…
I. Le CARACTERE

<font> face variable à définir définit la police de caractère
size em définit la taille du caractère
color hexadécimale définit la couleur du caractère
<font face="verdana" size="1" color="#ff0000">texte</font>
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> siècle
• indice <sub> H<sub>2</sup>O
Bien entendu, les styles peuvent se cumuler pour une même portion de texte.
Dans ce cas, l’ordre de définition 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
Même si l’utilisation judicieuse d’un character set Européen (gérant les les accents) placé en meta balise dans votre
header est censé vous eviter ce genre de désagrément... il faut savoir que dans l’absolu les accents se codent !
il se peut donc que vous ayez besoin de coder un accent au format ascii ou d’utiliser un caractère spécial. Pour ce
faire, le principe est le suivant commencez par & puis la lettre à accentuer puis le codage de l’accent et terminez par
un point virgule... Ainsi pour é : vous écrirez é
Ci-dessous un tableau récapitulatif des principaux codes :
é é espace forcé

è è € €
à à £ £
ô ô ¥ ¥
â â © ©
ï ï ® ®
ü ü ™ ™
œ œ ° °
ç ç " «
õ õ " »
Pour une liste plus exhaustive des charactères spéciaux :

http://www.commentcamarche.net/contents/html/htmlcarac.php3
18
III. Les en têtes
Utilisés pour le titrage, ils changent la taille des caractères et génèrent un retour à la ligne automatique.
• h1 <h1>titre</h1>
IV. Les paragraphes

Un document lu, c’est avant tout un document aéré : 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 même que les sauts de ligne et les tabulations ne
sont pas pris en compte. Il faudra donc les signifier par des balises spécifiques dédiés.
Lorsque vous développez vos pages, il existe deux balises qui permettent d’obtenir, soit un saut de ligne, soit le
commencement d’un nouveau paragraphe.
• La balise <p> exprime le début d’un paragraphe et génère un double espace.

La balise de fermeture </p> est facultative
• La balise <br> effectue un retour à la ligne et génère 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 l’attribut align soit aux en-têtes, soit au paragraphe.
En l’absence de l’une ou l’autre de ces balises il est toujours possible de ferrer un texte en utilisant la balise
universelle <div>...

<Hx> align left aligne le texte sur la marge de gauche
<p> right aligne le texte sur la marge de droite
<div> center centre le texte entre les marges
justify justifie le texte

ferrage avec en-tête : <h1 align="center">titre</h1>
ferrage avec paragraphe : <p align="left">texte</p>
ferrage avec balise universelle : <div align="justify">texte</div>
NB : Par défaut, comme toujours, l’alignement du texte se fait sur la gauche.
19
VI. Les lignes horizontales
Utiliser des lignes ou des filets horizontaux est très pratique pour séparer les différentes parties de votre document.
Cette méthode s’obtient avec la balise <hr> et ne nécessite pas de balise de fermeture.
Elle possède plusieurs attributs :

<hr> align left aligne la ligne horizontale à gauche
right aligne la ligne horizontale à droite
center aligne la ligne horizontale au centre
width pixel, % définit la largeur de la ligne
size de 1 à 10 définit l’épaisseur de la ligne
color hexadecimale définit la couleur de la ligne (uniquement I.E)
noshade sans s’il est présent, l’effet d’ombre 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 géré de façon plus complète avec les CSS…
1. Les listes non numérotées <ul>
Avec <ul> pour "unordered list"

les élements apparaissant entre les balises <li>
2. Les listes numérotées <ol>

Avec <ol> pour "ordered list"
les élements apparaissant entre les balises <li>

<ul> type disc puce
circle cercle
square carré
<ol> sans sans chiffres arabes par défaut

type I chiffres rommains
A lettres alphabétiques majuscules
a lettres alphabétiques minuscules
<ul type="disc"> <ol type="a">

<li>premier</li> <li>premier</li>
<li>deuxième</li> <li>deuxième</li>
</ul> </ol>
20
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, l’attribut "MAIlto"
21
HTML, Javascript, XHTML & CSS 06. Les liens
I. GENERALITES
A l’intérieur de votre document, la balise <a> permet d’établir un lien hypertexte (l’essence même du Web) vers un
autre document ou encore vers l’extérieur (vers un autre site web).
Tout ce qui se trouve entre la balise <a> et </a> sera considéré un lien et apparaîtra par défaut souligné à l’écran.

<a> href url relatif définit la source relative du document
url absolu définit la source absolue du document
target _self appelle la page cible dans le cadre d’appel

_blank appelle la page cible dans une nouvelle fenêtre
_parent appelle la page cible dans le cadre parent
(de niveau immédiatement supérieur)
_top appelle la page cible dans la fenêtre hôte
(par-dessus le FRAMESET)
title variable à définir définit une description du lien

(identique à l’attribut ALT pour une image)
name variable à définir définit une identité au lien
style variable à définir définit 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 c’est un des premiers endroits
que les moteurs de recherche vont analyser pour trouver les mots-clés, 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 d’être trouvée si l’url est portfolio/index.htm que 02/index.htm
• Les accents, les espaces et les caractères de ponctuation sont INTERDITS dans les noms de dossiers et de
fichiers, il est néanmoins possible d’inclure des tirets et des tirets bas (underscore).
• Il est recommandé de n’utiliser que des minuscules, car une fois vos pages sur un serveur, les urls deviennent
sensibles à la casse.
“index.htm" N’EST PAS la même chose que “INDEX.htm"
22
HTML, Javascript, XHTML & CSS 06. Les liens
III. LIENS RELATIFS
Lorsqu’on crée des liens il faut indiquer le chemin du fichier.
• Si on se trouve dans le même répertoire, il suffit d’indiquer 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 d‘accès au fichier.
• En cas d’arborescence descendante…

<a href="dossier/fichier.html">texte</a>
• En cas d’arborescence montante…

<a href="../index.html">texte</a>
Ici ../ permet de remonter d’un niveau dans l’arborescence.
• En cas d’arborescence à 2 niveaux…

<a href="../../index.html">texte</a>
• Pour aller d’un fichier qui se trouve dans un dossier vers un fichier qui se trouve dans un autre dossier, il
faut monter l’arborescence pour redescendre.
<a href="../dossier/fichier.html">texte</a>
Ici ../ permet de sortir du dossier en cours, puis il faut redescendre dans l’arborescence et indiquer dans quel
dossier on veut aller.
IV. LIENS ABSOLUS
Généralement lorsque l’on cherche à placer un lien vers un site externe à celui qui est en cours de développement, il
faut indiquer ce dernier dans sa version complète et conforme au protocole HTTP (ou autre). Le principe de création
des liens absolus est le même que pour les liens relatifs. <a href="http://www.google.com">texte</a>
V. liens internes à la page
Les liens internes permettent de se déplacer à l’intérieur d’un même fichier html sans que le visiteur soit obligé de
faire "scroller" la fenêtre du navigateur. L’utilisateur va donc cliquer sur un lien et il sera amené vers la destination du
lien interne.
Pour cela deux étapes sont nécessaires :
Définir la cible de destination du lien grace à l’attribut name

<a name="haut">texte</a>
et associer ce même nom de destination au lien précédé d’un diese.

<a href="#haut">lien vers le haut de la page</a>
Il n’est pas nécessaire, dans ce cas précis, de mettre un texte ou une image, entre les balises d’ouverture et de
fermeture, mais le nom ne doit pas contenir d’espaces, ni d’accents, ni de caractères spéciaux.
VI. cas particulier, l’attribut "MAIlto"
Cas particulier parmis les attributs de la balise <a>. Il s’agit d’un lien de messagerie qui fait apparaître le client de
messagerie du navigateur (Outlook Express pour IE par exemple).
<a href="mailto:nom@url.com">Contact</a>
Pour prédéfinir l’objet du mail vous pouvez rajouter ?subject= au corps de l’attibut...
<a href="mailto:nom@url.com?subject=l’objet de votre mail">Contact</a>
23
07. Les images
I. balise <img> et attributs
II. Les cartes cliquables (ou map)
24
HTML, Javascript, XHTML & CSS 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 afférents, dont les
plus courants sont présentés ci après…
Généralement les éléments graphique d’une même page sont stockés dans le repertoire "images" d’une même
rubrique.

<img> src url relatif ou absolu à définir définit la source relative ou absolue du document
name variable à définir définit une identité à l’image
width pixel définit la largeur de l’image
height pixel définit la hauteur de l’image
align left définit le positionnement de l’image dans l’espace

right
top
middle
bottom
alt variable à définir définit une description de l’image
border pixel définit un cadre à l’image
bordercolor hexadecimale définit une couleur au cadre de l’image
hspace pixel définit l’espace horizontal entre l’image et le contenu
vspace pixel définit un espace vertical entre l’image et le contenu
<img src="images/nom.jpg" name="statue" width="75" height="100" border="0" alt="image">
25
HTML, Javascript, XHTML & CSS 07. Les images
II. Les cartes cliquables (ou map)
Il s’agit de définir des zones sensibles (donc cliquables) dans une image.
Il faut alors calculer les coordonnées de ces zones.
Il est possible de faire des zones carrées ou rectangulaires, des cercles et des polygones.
Ici un carré, un cercle et un polygone...
Les coordonnées du carré/rectangle sont les coordonnées x et y des coins supérieurs gauche et inférieur droit.
ici : 198, 5, 297, 221
Les coordonnées du cercle sont celles du centre et du rayon.

ici : 119, 73, 65
Les coordonnées 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 décrire 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 l’appel d’image, relier l’image à ce code :
<img src="lire.jpg" width="300" height="225" border="0" usemap="#lecture">
NB : Il est possible de rajouter l’attribut alt sur chacune des zones.
26
08. Les tableaux
I. generalités
II. TABLEAUX AVEC FUSION
1. L’attribut colspan
2. L’attribut rowspan
2. Les attributs colspan & rowspan
27
HTML, Javascript, XHTML & CSS 08. Les tableaux
I. generalités
La balise <table> permet d’insérer un tableau à votre page et c’est l’une des balises les plus utilisées.
En effet les tableaux permettent une meilleure présentation des informations, nombreux sont les sites qui utilisent les
tableaux pour obtenir une mise en page de type journal.
La création des tableaux se passe essentiellement autour de 3 balises :
<table> le corps du tableau

<tr> une ligne du tableau
<td> une cellule du tableau
Bien entendu, toutes ces balises doivent êtres fermées pour indiquer la fin du tableau, d’une ligne ou d’une cellule.
<table>
<tr>
<td>
cell1
</td>
</tr>
</ table >

<table> cellpadding pixel définit l’espace entre le bord du tableau et les cellules
cellspacing pixel définit l’espace entre les cellules
width pixel / pourcentage définit la largeur du tableau

height pixel / pourcentage définit la hauteur du tableau
bgcolor hexadecimale définit la couleur de fond du tableau

background url relatif ou absolu à définir définit une image en arrière plan du tableau
border pixel définit la taille de la bordure

bordercolor hexadecimale définit la couleur de la bordure
bordercolorlight hexadecimale définit la couleur aux points culminants de la bordure
bordercolordark hexadecimale définit la couleur de l’ombre de la bordure
<tr> & width pixel / pourcentage définit la largeur de la cellule

<td> height pixel / pourcentage définit la hauteur de la cellule
bgcolor hexadecimale définit la couleur de fond de la ligne et/ou de la cellule

background url relatif ou absolu à définir définit une image en arrière plan de la cellule
align left / center / right définit l’alignement horizontal du contenu

valign top / middle / bottom définit l’alignement vertical du contenu
colspan unité numérique définit la fusion de 2 cellules adjacentes sur une ligne
rowspan unité numérique définit la fusion de 2 cellules adjacentes sur une colonne
28
En principe, la hauteur et la largeur d’une cellule s’adaptent automatiquement aux données (texte ou image),
néanmoins, vous pouvez définir une hauteur et une largeur pour un tableau ou une cellule ; l’espacement des cellules
et la taille des bordures peut être aussi paramétrés.
Gardez à l’esprit que…
• La taille du tableau se détermine en pixels ou en pourcentage.
• La taille fixe a pour avantage de garder la mise en page, la taille en pourcentage s’adaptera à la taille de
l’écran mais risque de modifier la mise en page.
• La taille des cellules s’adapte à 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
II. tableaux avec fusion
Les lignes et cellules d’un tableau peuvent êtres fusionnés, afin d’obtenir des zones de mise en forme de contenu
modulables et adaptées aux besoins d’une maquette.
Cette fusion est réalisé avec les attributs colspan et rowspan.
• Pour fusionner 2 cellules adjacentes sur une ligne, l’attribut COLSPAN est requis
• Pour fusionner 2 cellules adjacentes sur une " colonne ", l’attribut ROWSPAN est requis
1. L’attribut COLSPAN
Sur une ligne : La ligne du haut s’étend sur 2 cellules
<TABLE width="100" border="1"> cell 1

<TR>
<TD colspan="2">cell 1</TD> cell 2 cell 3
</TR>
<TR>
<TD>cell 2</TD>
<TD>cell 3</TD>
</TR>
</TABLE>
Sur plusieurs lignes : La ligne du haut s’étend sur 2 cellules même chose pour la ligne du bas
<TABLE width="100" border="1"> cell 1

<TR>
<TD colspan="2">cell 1</TD> cell 2 cell 3
</TR> cell 4
<TR>
<TD>cell 2</TD>
<TD>cell 3</TD>
</TR>
<TR>
<TD colspan="2">cell 4</TD>
</TR>
</TABLE>
2. L’attribut ROWSPAN
La 1e ligne comporte la cellule 1 qui s’étend sur 3 rangées de "colonne". Le terme "colonne" n’étant pas tout à fait
exact syntaxiquement parlant puisqu’il s’agit en fait d’un ensemble de cellules situées les unes sous les autres
<TABLE width="100" border="1"> cell 1 cell 2

<TR>
<TD rowspan="2">cell 1</TD> cell 3
<TD>cell 2</TD>
</TR>
<TR>
<TD>cell 3</TD>
</TR>
</TABLE>
30
3. Les attributs COLSPAN et ROWSPAN
Comme vous pouvez vous en douter, les attributs colspan et rowspan peuvent s’utiliser conjointement dans une
même construction tabiulaire.
Néanmoins prenez garde à la compléxité syntaxique que de telles architectures peuvent engendrer.
En fonction de ce que vous choisirez de construire ou une logique et une ecriture irréprochable (à défaut une bonne
dose d’aspirine) seront requises.
<TABLE width="100" border="1"> cell 1 cell 2

<TR>
<TD rowspan="4">cell 1</TD> cell 3 cell 4 cell 5
<TD colspan="3"> cell 2</TD> cell 6 cell 7
</TR> cell 8 cell 9
<TR>
<TD> cell 3</TD>
<TD> cell 4</TD>
<TD> cell 5</TD>
</TR>
<TR>
<TD colspan="2"> cell 6</TD>
<TD> cell 7</TD>
</TR>
<TR>
<TD> cell 8</TD>
<TD colspan="2"> cell 9</TD>
</TR>
</TABLE>
31
09. Les frames & I-frames
I. generalités

1. Qu’est ce que les frames ?
2. Comment ca marche ?
3. Les attributs ROWS & COLS
4. Les liens appliqués aux frames
5. Compatibilité des navigateurs
III. LES I-FRAMES
32
HTML, Javascript, XHTML & CSS 09. Les frames
I. generalités
1. Qu’est ce que les frames ?
Auparavant les navigateurs ne pouvaient afficher qu’un seul fichier HTML, mais on peut désormais diviser en
plusieurs zones la page affichée. Ces zones ou fenêtres ou encore cadres se nomment frame.
Les frames sont apparues avec la version 3.0.d’HTML et même si bon nombre de Webmasters les utilisaient, elles
n’étaient pas une composante officielle du langage.
Après quelques années d’utilisation intensives dans la fin de la période pré web 2.0, les frame sont tombés en
disgrace pour des raisons d’optimisation des protocoles de referencement. Elles ne sont donc presque plus utilisées
aujourd’hui.
Il n’en reste pas moins que lorsqu’utilisées avec parcimonie et à bon escient, elles sont toujours un outil fort pratique.
2. Comment ca marche ?
Dans une page d’index, la balise <frameset> prend la place de la balise <body> ; c’est elle qui dans un premier
temps va définir les cadres, qu’ils 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> affichage
<head> zone 1 zone 2
<title>page avec frames</title>
</head>
construction
<frameset cols="20,80"> frameset
<frame src="zone1.htm" name="zone1">
zone 1 zone 2
</frameset>
</html>
• Deux frame horizontales et deux frames verticales
<html> affichage
<head> zone 1
</head> zone 2 zone 3
<frameset rows="20,80"> construction

frameset
<frameset cols="20,80">
<frame src="zone2.htm" name="zone2"> zone 1
<frame src="zone3.htm" name="zone3"> frameset
</frameset>
zone 2 zone 3
</frameset>
</html>
Bien entendu, la famille des balises <frame> va se voir enrichie par un certain nombre d’attributs qui vont spécifier le
comportement de ces dernières.
33

<frameset> cols pixel / pourcentage définit un format de frameset vertical
rows pixel / pourcentage définit un format de frameset horizontal
frameborder yes / no définit une bordure de frameset

border pixel définit la taille d’une bordure de frameset
bordercolor hexadecimale définit la couleur d’une bordure de frameset
framespacing pixel définit l’espace entre les cadres d’un frameset
<frame> src url relatif ou absolu à définir définit la source relative ou absolue des frames
name variable à définir définit une identité à chaque frame
frameborder yes / no définit une bordure de frame

border pixel définit la taille d’une bordure de frame
bordercolor hexadecimale définit la couleur d’une bordure de frame
marginwidth pixel définit la largeur des marges interieures d’une frame

marginheight pixel définit la hauteur des marges interieures d’une frame
scrolling yes / no / auto définit l’autorisation d’attribution d’une scrollbar
noresize attribut sans valeur interdit le redimenssionement manuel d’une frame
<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 définissent le type de cadre, qui peut être horizontal (rows/rangée) ou vertical (cols/colonnes).
Ils prennent une serie de valeurs séparées par des virgules. Ces valeurs sont exprimées en pourcentage (valeurs
relatives) ou plus généralement en pixel (valeurs absolues).
Une valeur "exotique", l’étoile (*) fera s’ajuster automatiquement la colonne ou la rangée concernée sur l’espace
maximum laissé par les autre dans l’ensemble de frame.
<frameset cols="50,*">
4. Les liens appliqués aux frames
Normalement, les pages appelées par des liens s’affichent dans la frame où les liens ont été activés, mais l’attribut
de lien target permet d’appeler un cadre par son nom défini avec l’attribut name.
<a href="index.htm" target="zone1">lien</a>
34
5. Compatibilité des navigateurs
Même si il est de plus en plus rare de trouver des navigateurs non compatibles, il faut néanmoins ne pas négliger cet
aspect, sous peine de se passer de quelques visiteurs.
La technique consiste à utiliser la balise <noframes> qui permet de spécifier un texte HTML en version normale.
Entre ces balises il faut donc, théoriquement, développer un deuxième site : vous pouvez pour simplifier le travail
préciser des regrets polis et insérer des liens vers les sites officiels des navigateurs pour que le visiteur opte pour une
mise à jour.
<frameset rows="20,80">
</frameset>
<noframes>
<body>
Désolé 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 s’obtient avec la balise <iframe> elle permet d’insérer une fenêtre à n’importe quel
endroit de votre document. Cette fenêtre fera référence à un autre document HTML.
La balise <iframe> doit être insérée dans le corps de votre document, c’est-à-dire entre <body> et </body>.
Elle a les mêmes attributs que la balise <frame> plus les attributs width et height

<iframe> src url relatif ou absolu à définir définit la source relative ou absolue d’une iframe
name variable à définir définit une identité à chaque iframe
width pixel définit la largeur d’une iframe

height pixel définit la hauteur d’une iframe
frameborder yes / no définit une bordure

border pixel définit la taille d’une bordure
bordercolor hexadecimale définit la couleur d’une bordure
marginwidth pixel définit la largeur des marges interieures

marginheight pixel définit la hauteur des marges interieures
noresize attribut sans valeur interdit le redimenssionement manuel
<iframe src="pageinterne.html" width="200" height="200" frameborder="0"></iframe>
35
10. Les formulaires
I. generalités
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 déroulante
5. Boite de dialogue
6. Boutons
36
HTML, Javascript, XHTML & CSS 10. Les formulaires
I. generalités
Les formulaires permettent avant tout de faire réagir votre visiteur, de l’inviter à laisser ses impressions, ses
commentaires.
La création des formulaires se réalise grâce à plusieurs champs, dans lesquels le visiteur va entrer une information
ou opter pour un choix. L’information est ensuite envoyée, à l’aide de scripts, sur le serveur qui vous héberge puis
renvoyée, dans la plupart des cas, sur l’adresse électronique de votre choix.
II. CREATION
Nous traitons ici la structure du formulaire en html, l’envoi des données se faisant par .
La balise dédié aux formulaires est <form>. Elle possède 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 proposées :

POST pour un formulaire classique
GET pour (par exemple) définir un moteur de recherche sur votre site
2. Action
Adresse le formulaire vers l’URL du script CGI (fourni par le serveur qui héberge vos pages), qui accepte l’information
et vous le retourne suivant les paramètres définis.
Les valeurs les plus couramment utilisées sont :

"mailto:nom@url" : Pour l’envoi du formulaire par le logiciel de messagerie de votre visiteur.
"/cgi-bin/mailer" : Pour l’envoi du formulaire par le script CGI de votre hébergeur
3. Enctype
Cet attribut spécifie le format des données envoyées, dans le cas où un protocole n’imposerait pas de format précis.
Il possède plusieurs valeurs dont :
"text/plain" : Valeur utilisée dans le cas d’un formulaire classique

"multipart/form-data" : Valeur utilisée 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

<form> method post définit le format du formulaire
action mailto:nom@url définit l’action de transmission des données
enctype text/plain définit le format des données transmises
<input> type text / radio / checkbox définit le type de champ de saisie (texte ou bouton)
submit / reset
size pixel définit le nombre de caractères visibles dans le champ
maxlength pixel définit le nombre de caractères maximum à la saisie
name variable à définir définit l’identité d’un ou de plusieurs champs
value variable à définir définit le contenu du champ lors de la réception
<select> name variable à définir définit l’identité d’un ou de plusieurs champs
<textarea> name variable à définir définit le contenu du champ lors de la réception

cols pixel définit la largeur du champ
rows pixel définit la hauteur du champ
III. les objets de formulaire
1. Champ de texte
Il permet de laisser une courte information (nom, prénom, etc...)
<input type="text" size="20" maxlength="40" name="nomduchamp">
2. Boutons radio (radiobox)
Ils ne permettent qu’un 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
4. Liste déroulante
Elle permet de définir 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 d’écrire des commentaires sans limitation de nombre de caractères.
<textarea cols="20" rows="4" name="commentaires">vos commentaires</textarea>
6. Boutons
Pour envoyer le formulaire et annuler les données 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
I. body
II. CARACTERE / texte
III. TITRE / PARAGRAPHE
IV. TRAIT HORIZONTAL
V. listes
VI. liens
VII. images
VIII. tableaux
IX. frames
X. i-frames
XI. formulaires
40
HTML, Javascript, XHTML & CSS 11. Recap’ des balises
I. BODY

<body> topmargin pixel définit les marges haute et basse de la page (pour I.E)
leftmargin pixel définit les marges gauche et droite de la page (pour I.E)
marginwidth pixel définit les marges haute et basse de la page

marginheight pixel définit les marges gauche et droite de la page
bgcolor hexadecimale définit la couleur du fond
background url relatif définit la source relative de l’image de fond

url absolu définit la source absolue de l’image de fond
style background-repeat: no-repeat; définit la non répétition du bkg (css intégrée)

background-repeat: x; définit la répétition du bkg sur l’axe X (css intégrée)
background-repeat: y; définit la répétition du bkg sur l’axe Y (css intégrée)
bgproperties fixed définit si la capacité du fond à scroller avec la page
scroll yes / no / auto définit la présence de la barre de scroll sur la page
text hexadecimale définit la couleur du texte pour la page
link hexadecimale définit la couleur des liens pour la page

alink hexadecimale définit la couleur des liens actifs pour la page
vlink hexadecimale définit la couleur des liens visités pour la page
II. CARACTERE / texte

<font> face variable à définir définit la police de caractère
size em définit la taille du caractère
color hexadécimale définit la couleur du caractère

<b> / <strong> / / gras
<i> / <em> / / italique
<u> / / souligné
<sup> / / exposant
<sub> / / indice
III. TITRE / PARAGRAPHE

<H1>...<H6> align left aligne le texte sur la marge de gauche
<p> right aligne le texte sur la marge de droite
<div> center centre le texte entre les marges
justify justifie le texte
41
IV. TRAIT HORIZONTAL

<hr> align left aligne la ligne horizontale à gauche
right aligne la ligne horizontale à droite
center aligne la ligne horizontale au centre
width pixel, % définit la largeur de la ligne
size de 1 à 10 définit l’épaisseur de la ligne
color hexadecimale définit la couleur de la ligne (uniquement I.E)
noshade sans s’il est présent, l’effet d’ombre 3D est annulé
V. listes

<ul> type disc puce
circle cercle
square carré
<ol> sans sans chiffres arabes par défaut

type I chiffres rommains
A lettres alphabétiques majuscules
a lettres alphabétiques minuscules
VI. liens

<a> href url relatif définit la source relative du document
url absolu définit la source absolue du document
target _self appelle la page cible dans le cadre d’appel

_blank appelle la page cible dans une nouvelle fenêtre
_parent appelle la page cible dans le cadre parent
(de niveau immédiatement supérieur)
_top appelle la page cible dans la fenêtre hôte
(par-dessus le FRAMESET)
title variable à définir définit une description du lien

(identique à l’attribut ALT pour une image)
name variable à définir définit une identité au lien
style variable à définir définit une feuille de style
42
VII. images

<img> src url relatif ou absolu définit la source relative ou absolue du document
name variable à définir définit une identité à l’image
width pixel définit la largeur de l’image

height pixel définit la hauteur de l’image
align left définit le positionnement de l’image dans l’espace

right
top
middle
bottom
alt variable à définir définit une description de l’image
border pixel définit un cadre à l’image

bordercolor hexadecimale définit une couleur au cadre de l’image
hspace pixel définit l’espace horizontal entre l’image et le contenu

vspace pixel définit un espace vertical entre l’image et le contenu
VIII. tableaux

<table> cellpadding pixel définit l’espace entre le bord du tableau et les cellules
cellspacing pixel définit l’espace entre les cellules
width pixel / pourcentage définit la largeur du tableau

height pixel / pourcentage définit la hauteur du tableau
bgcolor hexadecimale définit la couleur de fond du tableau

background url relatif ou absolu à définir définit une image en arrière plan du tableau
border pixel définit la taille de la bordure

bordercolor hexadecimale définit la couleur de la bordure
bordercolorlight hexadecimale définit la couleur aux points culminants de la bordure
bordercolordark hexadecimale définit la couleur de l’ombre de la bordure
<tr> & width pixel / pourcentage définit la largeur de la cellule

<td> height pixel / pourcentage définit la hauteur de la cellule
bgcolor hexadecimale définit la couleur de fond de la ligne et/ou de la cellule

background url relatif ou absolu à définir définit une image en arrière plan de la cellule
align left / center / right définit l’alignement horizontal du contenu

valign top / middle / bottom définit l’alignement vertical du contenu
colspan unité numérique définit la fusion de 2 cellules adjacentes sur une ligne
rowspan unité numérique définit la fusion de 2 cellules adjacentes sur une colonne
43
IX. frames

<frameset> cols pixel / pourcentage définit un format de frameset vertical
rows pixel / pourcentage définit un format de frameset horizontal
frameborder yes / no définit une bordure de frameset

border pixel définit la taille d’une bordure de frameset
bordercolor hexadecimale définit la couleur d’une bordure de frameset
framespacing pixel définit l’espace entre les cadres d’un frameset
<frame> src url relatif ou absolu à définir définit la source relative ou absolue des frames
name variable à définir définit une identité à chaque frame
frameborder yes / no définit une bordure de frame

border pixel définit la taille d’une bordure de frame
bordercolor hexadecimale définit la couleur d’une bordure de frame
marginwidth pixel définit la largeur des marges interieures d’une frame

marginheight pixel définit la hauteur des marges interieures d’une frame
noresize attribut sans valeur interdit le redimenssionement manuel d’une frame
X. i-frames

<iframe> src url relatif ou absolu à définit la source relative ou absolue d’une iframe
name définir définit une identité à chaque iframe
variable à définir
width définit la largeur d’une iframe
height pixel définit la hauteur d’une iframe
pixel
frameborder définit une bordure
border yes / no définit la taille d’une bordure
bordercolor pixel définit la couleur d’une bordure
hexadecimale
marginwidth définit la largeur des marges interieures
marginheight pixel définit la hauteur des marges interieures
pixel
scrolling définit l’autorisation d’attribution d’une scrollbar
yes / no / auto
noresize interdit le redimenssionement manuel
attribut sans valeur
44
XI. formulaires

<form> method post définit le format du formulaire
action mailto:nom@url définit l’action de transmission des données
enctype text/plain définit le format des données transmises
<input> type text / radio / checkbox définit le type de champ de saisie (texte ou bouton)
submit / reset
size pixel définit le nombre de caractères visibles dans le champ
maxlength pixel définit le nombre de caractères maximum à la saisie
name variable à définir définit l’identité d’un ou de plusieurs champs
value variable à définir définit le contenu du champ lors de la réception
<select> name variable à définir définit l’identité d’un ou de plusieurs champs
<textarea> name variable à définir définit le contenu du champ lors de la réception

cols pixel définit la largeur du champ
rows pixel définit la hauteur du champ
45
12. Javascript
I. introduction
II. Qu’est ce que le Javascript ?
III. JAVA ou Javascript ?
IV. A quoi ressemble un code Javascript ?
46
HTML, Javascript, XHTML & CSS 12. Javascript
I. introduction
Je ne saurai trop le répéter… comme nous l’avons évoqué en début d’année le but de ces leçons n’est pas de vous
transformer en ingénieur informaticien.
L’objectif de cette partie est de vous dégrossir l’aspect quelque peu rébarbatif d’une 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. Qu’est ce que le Javascript ?
Le Javascript (ne pas confondre avec JAVA) est un langage informatique de type dynamique qui vous sera utile pour
améliorer la présentation et l’interactivité de vos pages Web.
Dynamique ?
Jusqu’ici, toutes vos pages HTML étaient statiques. Cela veut dire que le visiteur pouvait consulter votre site, mais
pas plus. Grâce à un langage dynamique, le visiteur peut lui-même "modifier" ou interagir sur certains éléments de
votre site.
Très utile pour traiter les événements occasionnés par un internaute sur une page web, le Javascript permet la mise
en place de menus dynamiques, d’ouvrir et/ou fermer des fenêtres "pop-up", de forcer une fenêtre de navigateur à
s’ouvrir en plein écran, et bien plus encore…
III. JAVA ou Javascript ?
Ne pas confondre ces deux langages totalement différents. JAVA est un langage beaucoup plus complexe que
Javascript notamment parce que son code source est compilé avant son exécution ce qui assure notamment la
confidentialité de ce dernier (on n’accède 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 d’être décompilé. Un
script compilé voit sa source cachée.
A l’inverse, le Javascript et le HTML sont interprétés, c’est-à-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 n’ont rien en commun.
47
HTML, Javascript, XHTML & CSS 12. Javascript
IV. A quoi ressemble un code Javascript ?
Il s’agit de balises que l’on place généralement entre les balises <head> et <body> d’une page html, mais que l’on
peut placer presque partout.
JavaScript s’intègre directement dans votre page HTML entre les deux balises <script> et </script>.
De plus, afin de solliciter l’interpréteur JavaScript, on précise 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 d’incrémentation consiste à externaliser le "moteur" de votre script.
Pour ce faire, il vous faut créer à 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 qu’a "appeller" cette partie depuis votre page html en utilisant la ligne de code suivante (toujours
placée entre le header et le body) :
<script src="script.js" type="text/javascript" charset="iso-8859-1"></script>
48
13. 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)
49
HTML, Javascript, XHTML & CSS 13. JS / Menus dynamiques
I. Navi simple
Il s’agit d’une construction qui vous est à présent familière.

Un tableau faisant apparaître les divers éléments bitmap d’une même navigation avec la définition 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 même menu dynamique par l’utilisation du langage Javascript il faudra d’abord 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>
50
PAS DE PANIQUE !
Même si cette balise et ses attributs peuvent vous sembler d’une approche quelque peu barbare, ne vous inquiétez
pas de cette dernière. Il s’agit tout simplement du " moteur " de votre script et ce dernier a été généré par fireworks.
Vous n’aurez JAMAIS à intervenir dessus, gardez juste en mémoire que son incrémentation est nécessaire au bon
fonctionnement de votre menu dynamique
Une fois ce moteur mis en place (en interne où en externe), la première chose à faire pour rendre actif les différents
éléments bitmap (les images) de votre navigation va être dans la balise <img> de donner un attribut de nom à chacun
de ces derniers (en général le même que l’image concernée) :
<A HREF="#"><img name="navi_01" src="images/navi_01.jpg" border="0"></A>
Attention cet attribut sera unique pour chaque image.
L’étape suivante sera de définir les attributs de changement d’état de vos images, pour cela nous utiliserons les
attributs onMouseOut et onMouseOver que nous placerons dans la balise <a> après l’attribut 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 l’attribut onMouseOut est strictement invariable, l’attribut onMouseOver devra faire l’objet de
modifications récurrentes pour chaque image concernée.
Tout d’abord la mise à l’équivalent de l’attribut " name " appelé par le code javascript
onMouseOver="MM_nbGroup(‘over’,’navi_01’,’images/navi_01_f2.jpg’,’images/navi_01_f2.jpg’,1);"
Puis l’appel de la deuxième image qui apparaîtra lors du passage de la souris sur l’image
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 s’avérer très pratique à l’occasion il s’agit tout simplement de doubler l’appel d’image
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 l’appel de l’image, Javascript demande à ce que l’appel de
l’image concernée ne soit pas le même que la première appelée, d’où l’intérêt de la définition d’un 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>
51
3. Navi dynamique / onmouseout, on mouseover, onclick (2 images)
Si vous souhaitez qu’une image cliquée faisant apparaître son deuxième état reste apparente sur votre barre de
navigation vous allez devoir utiliser l’attribut onClick à l’intérieur de votre balise <a> à la suite des deux précédents
attributs

f2.jpg’,’images/navi_01_f2.jpg’,1);" onClick="MM_nbGroup(‘down’,’navbar1’,’navi_01’,’images/navi_01_
C’est cet attribut qui définira quelle image reste affichée après l’action.
Attention ! Dans le cas présenté, l’attribut Javascript ‘navbar1’ est le dénominatif de votre barre de navigation. Le
script global prendra donc en considération tous les autres éléments utilisant ce même attribut comme faisant partie
de la même navigation.
4. Navi dynamique / onmouseout, on mouseover, onclick (3 images)
Si vous souhaitez qu’une image cliquée fasse apparaître un troisième état il vous suffira de changer l’appel de l’image
à afficher dans ce même 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 compréhension de votre code lorsque vous l’incrémenterez, il vous est conseiller de
normer l’appellation de vos différentes images selon le protocole suivant
Pour onMouseOut > image_01.jpg

Pour onMouseOver > image_01_f2.jpg
Pour onClick > image_01_f3.jpg
52
14. Javascript / popup
I. Qu’est ce qu’une POPUP ?
II. Attributs
III. Ouverture d’une popup simple
1. avec javascript séparé

2. avec javascript inclu
IV. Fermeture d’une popup
53
HTML, Javascript, XHTML & CSS 14. JS / Popup
I. Qu’est ce qu’une POPUP ?
A l’instar d’une fenêtre de navigateur qui s’ouvrirait suite à la définition d’un attribut de target _blank dans une balise
d’action, une pop up est une fenêtre de navigateur paramétrable qui s’ouvre à l’extérieur de la page consultée.
La définition de ses différents paramètres va faire l’objet de l’utilisation du langage Javascript.
II. Attributs
attribut valeurs effet

width pixel définit la largeur de la fenêtre
height pixel définit la hauteur de la fenêtre
left pixel définit la position horizontale sur l’écran

top pixel définit la position verticale sur l’écran
location yes / no définit l’affichage de la barre d’adresse

directories yes / no définit l’affichage de la barre de dossiers
history yes / no définit l’affichage de la barre d’historique
status yes / no définit l’affichage de la barre de statut
toolbar yes / no définit l’affichage de la barre d’outils
menubar yes / no définit l’affichage de la barre de menu
scrollbars yes / no définit l’affichage des ascenseurs
fullscreen yes / no définit l’ouverture de la fenêtre en plein écran
resizable yes / no définit le redimensionnement de la fenêtre
III. Ouverture d’une popup simple
Il existe plusieurs méthodes pour ouvrir une fenêtre popup.

La première méthode fait appel à un code séparé de la balise d’action, la seconde est incluse dans cette même
balise.
1. avec javascript séparé
Avant de définir 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 définira l’appel à la popup ainsi que ses différents attributs…
… ensuite via un " onClick " il n’y a plus qu’à faire appel au code sus défini lors de l’établissement du lien :
<A HREF="#" onclick="javascript:OpenPopup(‘popup.htm’);"><img src="images/btn.jpg" border="0"></A><br>
54
HTML, Javascript, XHTML & CSS 14. JS / Popup
2. avec javascript inclu
La méthode est similaire à la première sauf que cette fois ci nous allons inclure directement le code javascript à
l’intérieur 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 méthodes fonctionnent aussi bien avec du texte qu’avec une image…
Attention : Il est à noter toutefois que l’utilisation de la première méthode est plus indiquée lorsqu’il s’agit d’appeler
une popup depuis un document flash.
Dans ce cas de figure le code action script à utiliser sur le bouton concérné sera :
on (release) {
getURL("javascript:OpenPopup(‘popup.htm’);");
}
IV. Fermeture d’une popup
Dans la fenetre concernée et sans ajout de code séparé il suffira d’inclure un onClick circonstancié à la définition de
l’action
<a href="#" onClick="javascript:parent.close();"><img src="images/btn.jpg" border="0"></a>
55
15. Javascript / fullscreen
Très simple d’utilisation et très pratique pour " forcer " l’ouverture d’une page en plein écran…
ATTENTION : Nonobstant que ce script ne fonctionne qu’avec IE, il n’est pas toujours très apprécié 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 définition de votre lien faites appel à la fonction scriptée :
<A HREF="#" onClick="fullscreen()">APPEL DE FENETRE FULL SCREEN</A>
56
16. Javascript / restriction d’accès

au contenu
Très pratique à utiliser avec des clients aux tendances paranoïaques…

Inclure ce code entre le header et le body :
<SCRIPT language="JavaScript">

</SCRIPT>
Ce dernier " invalidera " les options de récupération d’élément du bouton droit de la souris.
Bien entendu cette option n’empêchera en rien un utilisateur averti d’aller récupérer la source via l’option affichage/
source du menu de son navigateur et de récupérer ce qui l’intéresse au sein de la page.
57
17. Introduction au XHTML
I. GENERALITES
II. le DOCTYPE / DTD
1. Qu’est ce que c’est ?

2. Les differentes DTD
3. Choisir sa DTD
III. la balise <html>
IV. les regles d’ecriture

1. Généralités
2.1 Positionnement par défaut des balises
2.2 Imbrications et emboîtements
V. balises <div> & <span>
VI. en resumé
58
HTML, Javascript, XHTML & CSS 17. Introduction au XHTML
I. GENERALITES
Ce chapitre expose les règles d’écriture qui caractérisent XHTML par rapport à HTML. Ces règles garantissent une
meilleure adaptabilité de vos pages aux futurs développement du Web et aux évolutions des navigateurs et des outils
de visualisation utilisés (téléphones mobiles, PDA etc...) ainsi qu’une plus grande facilité de mise à jour et de mise
aux normes d’accessibilité.
XHTML présente les mêms balises et attributs que HTML. Bien qu’ils soient accéptés par XHTML et les navigateurs,
certains éléments sont déconseillés parce que défavorables à l’accéssibilité et aux tendances modernes.
Signalons que ces recommandations qui, sans être imposées par le langage, constituent en quelque sorte des règles
de bon sens.
Ce même bon sens qui implique ces recommandations... mais sans dogmatisme.
II. le DOCTYPE / DTD
1. Qu’est ce que c’est ?

Le "Doctype", la Déclaration de Type de Document (souvent appelé DTD) est une déclaration qui figure en tête
d’un fichier .htm pour informer le navigateur du type de document dont il s’agit. Elle prévient en premier lieu si le
langage utilisé est HTML ou XHTML. Dans le cas de HTML on peut se passer du doctype, les paramètrtes par défaut
sont suffisants. Dans le cas de XHTML en revanche, le doctype est indispensable car il agit sur la façon dont les
navigateurs respectent les normes d’affichage 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 façon générale utilisez de préférence XHTML1.0 Strict, c’est a priori la plus adaptée à vos besoins.
C’est 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 d’information sur les DTD et leurs finalités d’utilisation :

http://www.alsacreations.com/article/lire/560-DTD-comment-choisir.html
59
III. la balise <html>
En fait, un fichier XHTML est un fichier XML. Il faut donc définir ce qu’on appelle son espace des noms. Cela se fait
dans la balise <html> qui s’écrit :
<html xmlns="http://www.w3.org/1999/xhtml">
La balise <html> a aussi deux paramètres facultatifs qui précisent la langue utilisée. Pour XML anglais, avec un
contenu français, on écrira :
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="fr">
IV. les regles d’ecriture
1. Généralités
Nous venons de voir deux différences entre HTML et XHTML ; la nécessité du DOCTYPE et celle du paramètre xmlns
dans <html>. De fait, il n’y en a pas beaucoup d’autres.
Tout ce que nous avons vu dans les chapitres précédents fonctionne aussi bien en HTML qu’en XHTML car nous
avons obéi à peu de choses près aux règles d’écriture de XHTML.
Voiçi ces règles :
• Majuscules et minuscules
HTML est indifférent aux deux alors qu’XHTML exige des minuscules pour toutes les balises et attributs. Pour les
valeurs des attributs c’est selon ; pour une désignation de fichier, il faut suivre la forme du nom tel qu’il a été crée.
• Balises de fermeture
En html certaines balises de fermeture sont facultatives, tandis que d’autres sont obligatoires. En XHTML toutes les
balises de fermeture sont obligatoires.
• Balises célibataires
Une balise célibataire comme <br> s’écrit désormais <br />
• Valeurs des attributs

En XHTML toute valeur d’attribut doit être entre guillemets si la valeur ne contient pas d’espaces ou de caractères
spéciaux.
• Paramètres boléens
Certains paramètres jouent uniquement par leur présence en HTML.
Par exemple, <input type="checkbox checked"> installe dans un formulaire une case cochée par défaut.
En XHMTL il faut écrire <input type="checkbox" checked="checked">
60
Une autre distinction entre les éléments est celle à faire entre BLOC et EN LIGNE.
Chaque balise se caractérise par une double identité :
• Une structure HTML qui n’a intrinsèquement aucun rapport avec l’affichage de l’élément.
• Son rendu sur les navigateurs (affichage, positionnement, comportement) défini par défaut selon le bon vouloir de
chaque navigateur et modifiable à l’aide des CSS.
Pour y voir plus clair, les différentes balises qui composent une page html ont été classées :
• Les balises de type BLOC
BODY, DIV, Paragraphes (P), en-têtes (H1 à H6), tableaux (TABLE)… Ces éléments se placent nécessairement les uns
en dessous des autres, commencent une nouvelle ligne et forcent le suivant à faire de même. Ils servent à distinguer
les parties entières de texte.
• Les balises de type INLINE
Il s’agit par exemple de A, B, I, SPAN, les images... Elles ne forcent jamais de retour à la ligne et peuvent être
l’enfant de n’importe quel autre élément. Elles sont prévues pour rester dans le texte et l’enrichir (lien hypertexte,
renforcement, emphase, etc.).
La compréhension de la structure des balises va avoir de nombreuses implications par la suite, et paradoxalement
c’est souvent un sujet peu connu des webmasters.
Au niveau le plus basique retenons simplement que des balises de type bloc peuvent contenir d’autres balises de
type bloc et des balises de type inline… et qu’une balise possède un rendu CSS qui n’a pas forcément de rapport
avec sa structure HTML.
Les balises ont toutes par défaut une valeur de rendu CSS particulière selon qu’elles seront du type bloc ou inline.
Il est particulièrement important de comprendre que :
• De leur structure HTML vont dépendre les imbrications et emboîtements autorisés.

• De leur rendu CSS vont dépendre leurs comportements, positionnements, affichages, etc.
2.1 Positionnement par défaut des balises
Les balises de type bloc se placent toujours l’une en dessous de l’autre par défaut (comme un retour chariot).
Par exemple, une suite de paragraphes <p> ou les éléments d’une liste <li>.
Par ailleurs, une balise bloc occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur.
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
Les balises de type inline se placent toujours l’un à côté de l’autre afin de rester dans le texte.
Par exemple, le renforcement d’une partie de texte à l’aide de la balise <b>.
<b><i>texte</I> autre texte</b>
Ce texte va s’afficher sur une seule ligne (aucun retour à la ligne) car les éléments qui le composent sont de rendu
CSS "en-ligne".
61
2.2 Imbrications et emboîtements
En règle générale…
• 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 n’aurions pas pu écrire :
<span>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
</span>
car la balise <span> (dont la structure est inline) n’est pas autorisée à contenir des éléments de structure bloc
comme les paragraphes.
NB : Les balises inline se distinguent elles mêmes en deux parties : les balises remplacés et les non remplacés
• Les balises remplacés sont les seuls qui possèdent des dimensions (width, height…) par défaut.
Il s’agit des balises <img>, <input>, <textarea>, <select> et <object>.
• Les balises non remplacés n’ont pas de dimension à proprement parler par défaut (elles n’occupent que la place
minimum nécessaire à leur contenu).
C’est le cas des éléments <strong>, <em>, <span>, etc…
V. balises <div> & <span>
Ces deux balises permettent de structurer la page. Elles permettent de délimiter une partie de la page qui peut ainsi
recevoir un nom et des spécifications de mise en forme. Elles sont faites pour cela.
<div> est de type bloc et peut regrouper d’autres balises du même type comme des balise en ligne.
<span> est une balise en ligne. Elle ne peut délimiter qu’un fragment de texte.
VI. en resumé
• XHTML est le nouveau standard d’intégration. Il est une passerelle vers les futures versions.
• XHTML interagit facilement avec les autres langages dérivés de XML.
• Ayant des règles plus strictes, XHTML vous conduit à créer des pages plus cohérentes et qui fonctionnent mieux.
• XHTML 1.0 est accépté par les anciens navigateurs. En outre, les nouveaux navigateurs respectent mieux les
normes CSS avec lui.
• XHTML permet de créer des pages pour les PDA, les téléphones, les lecteurs d’écran pour malvoyants etc...
• XHTML s’accorde parfaitement avec les fichiers CSS et il vous incitera à éviter les balises de présentation pour
réserver la mise en forme aux styles ; ce qui facilitera la prise en compte des problèmes d’accéssibilité dans vos
pages.
62
18. CSS / Introduction et principe de

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

2. Avantages des feuilles de style
3. Qu’est-ce qu’un " style " ?
II. regles et syntaxe

1. Comment écrit on en CSS ?
2. Ou placer les CSS ?
3. Structure
4. Unités de longueur
63
HTML, Javascript, XHTML & CSS 18. CSS / Introduction
I. GENERALITES
Au début…
…était HTML, conçu pour donner de l’information

…puis des balises de présentation de style sont apparues comme <b> et <font>
…ensuite les tableaux ont été créés pour insérer des données tabulaires.
MAIS…
…avec la variété actuelle de navigateurs qui ne respectent pas nécessairement les standards initialement crées par
le W3C, on passe aujourd’hui plus de temps à vérifier que les affichages soient identiques sur plusieurs navigateurs,
voire plusieurs versions du même navigateur qu’à créer son code.
C’est pourquoi sont apparues les feuilles de style ou CSS (Cascading Style Sheet), qui sont une nouvelle tentative
de standardisation des langages d’intégration initié par le W3C pour aboutir à un affichage identique sur toutes les
configurations matérielles de la terre… conforme aux désirs de l’auteur.
1. Pourquoi utiliser des feuilles de style ?
Les CSS permettent de décrire la présentation d’une page web et remplacent donc avantageusement l’ancienne
méthode, qui consistait à utiliser ces fameuses balises, attributs et autres tableaux. Elles permettent de centraliser
toute la mise en forme et d’avoir à peu de frais une mise en page cohérente ; elles sont notamment utilisées pour
définir les couleurs, les polices, le rendu, et d’autres caractéristiques liées à la présentation d’un document.
L’objectif est donc de bien séparer la structure (XHTML) de la présentation (CSS) du document.
Pour un unique contenu plusieurs affichages sont donc possibles. (cf. http://www.csszengarden.com/)
Dans le cas de sites disposant d’une arborescence conséquente, il peut être intéressant de créer une feuille pour les
bases (polices, couleurs arrière-plan, etc…) puis des feuilles complémentaires pour chaque division du site.
Cette séparation fournit un certain nombre de bénéfices, permettant d’améliorer l’accessibilité, de changer plus
facilement de structure et de présentation, et de réduire la complexité de l’architecture d’un document.
2. Avantages des feuilles de style

• La structure du document et la présentation sont gérés dans des fichiers séparés.
• La conception d’un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet
d’être plus efficace.
• La présentation est uniformisée, les documents (pages html) font référence à la (aux) même(s) feuille(s) de styles.
• Un même document peut donner le choix entre plusieurs feuilles de style (css d’impression ou de lecture à l’écran).
• Le code HTML est considérablement réduit en taille et en complexité, puisqu’il ne contient plus de balises de
présentation, il est donc plus rapide à afficher.
3. Qu’est-ce qu’un " style " ?
Les propriétés des styles regroupent différentes valeurs, telles que les choix de police, de taille de couleur à
appliquer aux différents éléments d’une page, ainsi toutes les balises HTML pourront être positionnés, décorés,
dimensionnés...
C’est ce que font les CSS : définir ces valeurs dans la page html à l’aide d’un code séparé en utilisant les balises
comme <h1> …</h1> qui de base en possède une taille et une graisse non modifiable mais qui est complètement
redéfinissable en css.
64
II. regles et syntaxe
1. Comment écrit on en CSS ?
Le langage CSS est très simple, et le mieux est de commencer par un exemple.
En HTML, pour définir un élément de texte en gras, vous avez pris l’habitude de placer les balises <b> et </b>…
<b>texte</b>
Puis avec l’évolution des standards vous avez écrit…
<strong>texte</strong>
Voici comment dans le cas d’une application directe, le langage CSS va interpréter la même requête :
<p style=“font-weight: bold;“>texte</p>
Le point-virgule à la fin sert à séparer les propriétés, comme par exemple :
<p style=“font-weight: bold; color: red;“>texte</p>
Mais s’il ne s’agissait que de remplacer une syntaxe par une autre, l’intérêt des CSS serait nul.
Il existe donc plusieurs façons d’utiliser ces dernières…
2. Ou placer les CSS ?
• Dans une balise html dans le corps du document
<h1 style=“font-size:15px ; color:#555 ;“>Titre</h1>
• Dans l’en-tête d’un document (balise <head>)
<style type="text/css">
...
</style>
• Dans un fichier externe relié au doc html à l’aide d’une balise <link> (dans l’en-tête également)
<link rel="stylesheet" type="text/css" href="style.css" />
Pour créer ce fichier, à l’aide d’un éditeur de texte standard (notepad ou simple text), enregistrez un nouveau
document portant l’extension .css.
Bien entendu aucune balise html ne figurera dans ce fichier.
Ces deux méthodes peuvent d’ailleurs être utilisées ensemble pour un même document. Dans ces conditions, si elles
se contredisent, c’est la feuille écrite directement dans le document qui prédomine.
En général, prévoyez d’avoir une feuille de style dans un fichier séparé pour définir la présentation de tout un site, par
la suite rajoutez ce qui est nécessaire dans chaque page.
Nb : Il est possible de mettre des commentaires presque n’importe où dans une feuille de style CSS en les encadrant
de /* et */
65
3. Structure
Toutes les CSS ont la même structure
1. Sélecteur : balise html, classe ou ID

2. Propriétés : les identifiants (équivalents des balises)
3. Valeurs : les données de la propriété (équivalents des attributs)
La paire propriété/valeur est appelée : définition
<p sélecteur =“ propriété : valeur;“>titre</p>

<p style=“font-size : 11px; “>titre</p>
ou
sélecteur p
{ {
propriété : valeur; font-size : 11px;
} }
4. Unités de longueur
• Unités de longueur relatives (à l’objet parent) : • Unités de longueur absolues :
px pixel mm millimètres
% pourcentage cm centimètres
em largeur de police in pouces
ex hauteur police pt point =1/72 de pouces
pc pica = 12points
66
19. CSS / Cascades et conflits

d’héritage
Avec les CSS, le terme "cascading" souligne une propriété importante du langage ; ses caractéristiques de
présentations se propagent en cascade d’un élément à ses fils.
Pour mémoire…
• Le style en ligne l’emporte sur la feuille de style interne
• La feuille de style interne l’emporte sur la feuille de style externe.
Mais aussi…
• Les ID l’emportent sur les CLASS
• Les CLASS l’emportent sur les sélecteurs contextuels, pseudo-class et pseudo elements
On peut aussi considérer l’importance des CSS en fonction des valeurs de leurs spécificités qui ont pour effet de
donner une importance différente à chaque règle.
ID : spéc. 100 / CLASS : spéc. 10 / Sélecteur contextuels : spéc. 1 / Règles héritées : spéc. 0
Qu’est ce que l’héritage ?
C’est le mécanisme par lequel les styles s’appliquent à un élément, mais aussi à ses descendants.
Prenons exemple sur la structure d’une page html…
En haut de la hiérarchie se trouve la balise html qui contient la balise body qui contient d’autres éléments… Si
html est l’ascendant de l’ensemble (aussi appelé élément racine), body est l’ascendant de tout ce que montre le
navigateur.
Même si quelques propriétés ne sont pas hérités (comme border par exemple), la plupart du temps pour optimiser le
code beaucoup de paramètres héritent de leur parent par défaut (la couleur d’arrière plan du body sera la même pour
toutes les couleurs d’arrière-plan de la page) sauf si une déclaration contradictoire est faite ensuite
NB : En CSS, si vous souhaitez qu’un élément prenne le dessus sur tout le reste, il faut alors utiliser le paramètre de
règle "importante", c’est-à-dire que cette dernière doit être suivie de !important.
P.dark {color:#333 !important;}
67
20. CSS / Les sélecteurs
I. les 3 types de selecteurs
1. Les sélecteurs HTML

2. Les CLASS
3. Les ID
II. les pseudo classes

1. Pseudo classes de lien
2. Pseudo classes de lien personnalisée
II. regroupement de selecteurs
68
HTML, Javascript, XHTML & CSS 20. CSS / Les sélecteurs
I. les 3 types de selecteurs
La définition des sélecteurs va décider à quel(s) élément(s) une règle s’applique…
On trouve 3 types de sélecteurs :
1. Les sélecteurs html qui offrent la possibilité de redéfinir les balises html en css
2. Les CLASS qui sont des règles librement choisies applicables à n‘importe quelle balise html.
3. Les ID qui sont similaires aux classes mais qui s’appliquent qu’une seule fois pour un élément donné.
1. Les sélecteurs HTML
Nous l’avons vu dans le précédent dossier théorique. Il s’agit en fait d’un simple changement de syntaxe.
<strong>texte</strong> devient… <p style=“font-weight : bold;“>texte</p>
2. Les CLASS
N’importe quel balise peut se voir attribuer le sélecteur CLASS, qui va servir à faire le lien avec une feuille de style, de
même que plusieurs balises peuvent utiliser le même sélecteur CLASS.
Ainsi, pour un paragraphe, on écrira : <p class="exemple"> que l’on couplera avec la définition de CSS :
p.exemple
{
font-family: sans-serif;
}
Tous ces paragraphes apparaîtront dans une police différente…
Le sélecteur CLASS s’utilise 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 l’espace entre les paragraphes ; je ne peux pas non plus mettre une énumération ou une table dans
l’exemple. Il vaut mieux alors écrire :
div.exemple
{
border-left: solid blue 2px;
}
Et écrire en corrélation 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 sélecteur, qui s’appliquera alors à tous les éléments de classe
"exemple", quel que soit leur type, et me laisse ainsi la liberté d’écrire <p class="exemple"> dans les cas simples, et
de recourir à un div dans les cas plus compliqués.
69
3. Les ID
D’une certaine manière ID est un sélecteur redondant : tout ce qu’on peut faire avec on peut en faire autant voire plus
avec CLASS.
Mais… ID a son utilité car il définit un élément de manière unique dans l’ensemble des balises : un document HTML
valide ne devrait ainsi pas comporter deux éléments avec le même ID. De fait, ID est le sélecteur idéal dès qu’il s’agit
de positionner un élément au sein de l’interface, dans le cas ou deux éléments ne devraient logiquement pas avoir la
même position dans l’interface.
Ainsi, pour un paragraphe, on écrira <p id="exemple"> que l’on couplera avec la définition de CSS :
#exemple
{
font-family: sans-serif;
}
Enfin… une balise pouvant disposer d’un ID et d’une (ou plusieurs) CLASS (ID disposant d’une préséance
hiérarchique sur CLASS) peut permettre de préciser un élément particulier au sein d’un 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 qu’au sein de la CSS, les ID sont définis avec le signe dièse (#nom) et les CLASS
avec un point (.nom).
II. les pseudo classes
1. Pseudo classes de lien
En terme de CSS la définition de certaines fonctionnalités, en particulier les liens, dispose d’un traitement spécial…
Il s’agit de les redéfinir de la manière suivante et dans l’ordre :
a:link {propriétés} pour les liens par défaut

a:visited {propriétés} pour les liens visités
a:hover {propriétés} pour les liens survolés
a:active {propriétés} pour les liens actifs
et la classique définition de lien dans la page html…
<a href="fichier.html">link</a>
Les propriétés applicables à ces pseudo-classes sont les mêmes que ceux applicables au texte : typo, couleur, taille,
arrière-plan etc... plus la "décoration", c’est-à-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 mêmes paramètres à plusieurs états de liens, séparer les sélecteurs par une virgule.
a:link, a:visited {color: #000000, text-decoration:none}
70
2. Pseudo classes de lien personnalisée
Il se peut que vous vouliez, dans une même page, des liens qui se comportent différemment. Par exemple pour
différencier 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 personnalisée.
Nous allons donc cumuler les deux. Par exemple si je choisis des paramètres propres aux liens externes du site, je
peux imaginer une classe personnalisée que je nommerai : ".lienext"
Cela donnera dans le css
a.lienext:link {propriétés}
a.lienext:visited {propriétés}
a.lienext:hover {propriétés}
a.lienext:active {propriétés}
Puis dans le html, il sera impératif d’appliquer la classe ainsi créée
<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
L’une des grandes forces des sélecteurs CSS est leur capacités à se combiner les uns avec les autres, ainsi on
pourra retrouver ces groupements sous plusieurs formes :
• une , entre 2 sélecteurs signifie l’application d’une même définition aux sélecteurs
h1, h2, h3 {propriétés}
• un espace entre 2 sélecteurs signifie la descendance

p h1 {propriétés} (tous les h1 de ce p seront affectés)
• un > signifie la filiation directe

p> h1 {propriétés} (descendance directe père/fils)
• un + signifie l’adjacence
h3 + p {propriétés} (correspond au premier paragraphe qui suit une en-tête h3)
nb : " Parent-enfant " ou " filiation directe " = un niveau au-dessous

" Descendance " = deux niveaux ou plus séparent les éléments.
71
21. CSS / Les propriétés
I. generalités
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
HTML, Javascript, XHTML & CSS 21. CSS / Les propriétés
I. generalités
Les propriétés des sélecteurs indiquent l’apparence que les éléments doivent prendre et permettent de changer
énormément d’aspects de la présentation de ces derniers.
C’est en utilisant conjointement ces dernières, 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 exprimée en valeur hexadécimale
Arrière-plans couleur ou images.
Blocs, bordures et marges largeur, hauteur, style, épaisseurs, couleurs, remplissage.
Interface puces, indentation, curseur, ascenseurs.
Positionnement emplacement exact sur l’écran.
Affichage et visibilité si un élément apparaît et comment.
Impression comment définir l’aspect de la page à l’impression.
II. proprietes du texte
1. polices de caractère
L’utilisation de CSS fait complètement disparaître l’usage de l’antique élément <font>.

propriétés valeurs effet
font-style: normal / italic / oblique Italique
font-variant: normal / small-caps Petites capitales
font-weight: normal / bold Gras
font-size: xx-small / x-small / small / medium / large / x-large / xx-large / valeur Taille
font-family: serif / sans-serif / monospace / cursive / fantasy / verdana / arial / times Famille de caractère
Exemple d’application 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 spécifier plusieurs propriétés d’un coup. Il faut alors placer à la suite et
dans l’ordre 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 à l’interprétation de ces
valeurs par les différents navigateurs.
Pour éviter de mauvaises surprises on préférera utiliser une valeur fixe exprimée en pixels
• Pour font-family: comme tout le monde n’à pas toutes les polices du monde, il est possible d’en indiquer
plusieurs, séparées par des virgules (les noms comportant des espaces doivent être mis entre guillemets).
Ceci dit, CSS définit des familles génériques, serif, sans-serif, monospace, cursive et fantasy... il est conseillé de
toujours mettre une famille générique en dernier recours.
2. texte

text-align: left / right / center / justify Alignement
line-height: normal / pourcentage / valeur Interlignage
text-indent: nombre / pourcentage Indentation
text-transform: none / capitalize / lowercase / uppercase Capitales
text-decoration: none / underline / overline / line-trough / blink Autres
word-spacing: valeur / valeur négative Intermots
letter-spacing: valeur / valeur négative 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 " n’est pas opérationnelle avec IE
- Il est possible de donner plusieurs décorations en les séparant par un espace
.font
{
text-decoration : underline overline;
}
74
III. proprietes des listes

list-style-type: none / disc / circle / square Liste non numérotée
decimal / upper-alpha / lower-alpha / upper-roman / lower-roman Liste numérotée
list-style-image: (‘url’); url Appel d’une image
Nous avons déjà vu dans les précédents cours comment créer une liste en HTML (cf. p.16 / 05 - le texte)
Pour mémoire…
Listes non numérotées Listes numérotés
<ul> <ol>
<li>premier <li>premier
<li>deuxième <li>deuxième
</ul> </ol>
Avec CSS nous agirons de même, à ceci près que nous ignorerons les paramètres de calibrage HTML…
Pour ce faire nous définirons la déclaration de classe pour les éléments UL ou OL de la page dans notre feuille de
style en sachant que les propriétés de ces derniers seront héritées par les LI…
ul
{
list-style-type : disc ;
}
Bien entendu si plusieurs listes différentes doivent apparaître dans une même page, il sera alors nécessaire de
déclarer une classe nominative…
.liste
{
list-style-type : square ;
}
En cas d’appel à une image, nous utiliserons la syntaxe suivante…
ul
{
list-style-image : url(‘images/btn.gif’);
}
75
IV. proprietes des couleurs

color: RVB décimale / hexadecimale / nominative Couleur du texte
La couleur se règle avec color: et peut s’indiquer de plusieurs manières :
• Soit en définissant une couleur RVB décimale en utilisant des valeurs allant de 0 à 255 ou en pourcentage
.fontcolor
{
color: rgb(0,0,0);
}
• Soit en définissant une couleur hexadécimale (16 millions de couleurs) en indiquant les valeurs RVB d’une couleur
selon la notation #RRVVBB, empruntée au HTML, où RR, VV et BB représentent 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 doublée peut être indiquée une seule fois.
.fontcolor
{
color: #000000;
}
• Soit en utilisant le tableau nominatif des couleurs standard
Attention : Si vous souhaitez utiliser cette méthode, gardez à l’esprit que le standard CSS ne garanti que l’affichage
des 16 couleurs définies ci après (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 présent, voyons comment le CSS va agir sur les arrières plans… il va être possible d’agir sur la couleur, la définition
d’une image, sa répétition et son scrolling ainsi que sur son positionnement au sein de la page.

background-color: transparent / hexadecimal; Couleur
background-image: none / url Image
background-repeat: no-repeat / repeat-x / repeat-y Img repetition
background-attachment: scroll / fixed Img scrolling
background-position: left / right / center / top / bottom / pixel / pourcentage 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 spécifier plusieurs propriétés d’un coup.
Il faut alors placer à la suite et dans l’ordre les éventuels couleurs, images, répétitions, 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) définie par sa largeur et, cas échéant, sa hauteur est
entouré de trois zones de l’intérieur vers l’extérieur :
• Largeur et hauteur : width et height
Ces deux propriétés permettent d’ajuster la largeur et la hauteur d’un bloc. Attention toutefois à utiliser height avec
parcimonie, le contenant d’un bloc étant toujours prioritaire sur la définition de la valeur.

width: auto, pourcentage, valeur; Largeur
height: auto, pourcentage, valeur; Hauteur
• La marge extérieure ou margin

margin-top: auto / pourcentage / valeur Marge ext. haute
margin-right: auto / pourcentage / valeur Marge ext. droite
margin-bottom: auto / pourcentage / valeur Marge ext. basse
margin-left: auto / pourcentage / valeur Marge ext. gauche
• La marge intérieure ou padding

padding-top: auto / pourcentage / valeur Marge int. haute
padding-right: auto / pourcentage / valeur Marge int. droite
padding-bottom: auto / pourcentage / valeur Marge int. basse
padding-left: auto / pourcentage / valeur Marge int. gauche
• La bordure ou border
En utilisant les propriétés de type border-côté-, il est possible d’intervenir sur chacun d’entre eux séparément…
mais il est largement préférable d’utiliser border tout court.

border-width: thin / medium / thick / valeur Epaisseur
border-color: rgb / hexadecimale / nominative Couleur
border-style: none / solid / dotted / dashed / double / groove / ridge / inset / outset Style
border-top-_: variable à définir Bord haut

border-right-_: variable à définir Bord droit
border-bottom-_: variable à définir Bord bas
border-left-_: variable à définir Bord gauche
78
Donc, pour un même bloc défini, nous obtiendrons...
.bloc
{
width : auto;
height : 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 caractéristiques de bloc permettent de spécifier leurs propriétés respectives d’un coup.
Il faut alors les placer à la suite et dans l’ordre (dans le sens des aiguilles d’une montre, en partant de midi)
.bloc
{
width : auto;
height : auto;
padding : auto auto auto auto;

margin : auto auto auto auto;
border : 1px black solid;
}
Dans le cas de padding: et margin: si on ne met que deux longueurs elles définissent les marges haute et basse
d’une part et gauche et droite d’autre part… si on n’en met qu’une, les quatre marges sont égales.
79
VI. proprietes pour body
Maintenant que nous avons vu la plupart des propriétés les plus importantes des CSS, il est utile de souligner
qu’afin de faciliter l’intégration des éléments les plus récurrents de votre page, nombre d’entre elles sont directement
applicables à la balise body de cette dernière !
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 : transparent url(‘images/bkg.jpg’) repeat-y center top;

margin : 0;
padding : 0;
}
80
22. CSS / "Boites" et positionnement
I. generalités
II. DES BOITES ET DU FLUX
III. BOIte de type bloc
IV. boite de type en ligne
V. positionNEMENT
1. Position relative
2. Position absolue
3. Position fixe
4. Position flottante
4.1 Généralités
4.2 Débordement et spacer
4.3 Une variante du spacer <hr />
VI. conclusion
81
HTML, Javascript, XHTML & CSS 22. CSS / Boites et positions
I. generalités
Là ou avec HTML nous utilisions des tableaux pour la mise en forme des contenus d'une page, avec CSS nous
utiliserons les les "boites". D'une formalisation aisées, elles ne sont guère plus que l'ajonction d'une propriété de
taille aux class et id
II. DES BOITES ET DU FLUX
Par défaut, les navigateurs affichent les boîtes issues du document dans l’ordre du flux normal, c'est à dire
verticalement de haut en bas de l’écran, et horizontalement de gauche à droite, sur la totalité de l’espace
disponible et nécessaire. Leur affichage sera donc différent en fonction du type (bloc ou en ligne) de ces dernières.
III. BOIte de type bloc IV. boite de type en ligne
Par défaut, les boîtes de type bloc seront affichées Par défaut, les boîtes de type en-ligne sont affichées dans
dans une succession verticale. une succession horizontale.
Les principales balises créant des boîtes bloc sont : Les principaux éléments créant des boîtes en ligne sont :
La balise div L’élément span

Le paragraphe p Le lien a
Les titres h1, h2, h3, h4, h5, h6 L’image img
Les listes et éléments de liste ul, ol, li Les emphases em et strong
Prenons par exemple deux blocs différenciés par leur Prenons par exemple deux portions de texte différenciées
couleur : par leur couleur :
HTML HTML
<p>
<p class="jaune">Une boîte jaune</p> <span class="jaune">Une boîte jaune</span>
<p class="verte">Une boîte verte</p> <span class="verte">Une boîte verte</span>
</p>
CSS CSS
.jaune .jaune
{ {
width : 200px; width : 200px;
background-color : #ffff00; background-color : #ffff00;
} }
.verte .verte
{ {
width : 200px; width : 200px;
background-color : #00ff00; background-color : #00ff00;
} }
82
V. positionNEMENT

position: static Positionnement habituel (par defaut) de l’élément
relative Positionnement par rapport à l’élément précédent
absolute Positionnement par rapport aux bords de la page, défile avec page
fixed Positionnement par rapport aux bords de la page, ne défile pas avec page
inherit Même valeur que celle de l’élément parent
left: auto / pourcentage / valeur

top: auto / pourcentage / valeur
bottom: auto / pourcentage / valeur
right: auto / pourcentage / valeur
• Les propriétés left, top, bottom, right
Surtout utilisées avec le positionnement absolute, ces quatre propriétés définissent l’emplacement d’un élément par
rapport à l’élément parent. Elles déplacent l’élément sans changer ses dimensions.
1. Position relative
Le positionnement relatif permet d’inscrire un contenu en flux normal, puis de le décaler horizontalement et/
ou verticalement. Le contenu suivant n’est pas affecté par ce déplacement qui peut donc entraîner des
chevauchements.
HTML
<p>
Lorem
<span class="jaune">boîte en position relative</span>
ipsum dolor.
</p>
CSS
.relative
{
position: relative;
bottom: 10px;
background-color: #ffff00;
}
Pour illustrer le risque de chevauchement, ajoutons un décalage vers la droite :
CSS
. relative
{
position: relative;
bottom: 10px;
left: 10px;
background-color: #ffff00;
}
83
2. Position absolue
Elle retire totalement du flux le contenu concerné, sa position est déterminée par référence aux limites du conteneur.
Celui-ci peut-être :
• Le bloc conteneur initial, à défaut de boîte positionnée, c’est à dire le plus souvent la fenêtre du navigateur.
• Une boîte elle-même positionnée (position relative ou absolue).
Ceci s’avère très utile en particulier pour créer plusieurs colonnes au positionnement indépendant de l’ordre dans
lequel elles se trouvent en HTML.
HTML
<div class="verte">
<p>Lorem ipsum…</p>
<p class="jaune">Boîte jaune en position absolue</p>
</div>
CSS
.verte
{
background-color : #00ff00;
}
.jaune
{
position : absolute;
top : 10px;
right : 10px;
background-color : #ffff00;
}
Inévitablement, la boîte en position absolue recouvre le contenu de notre paragraphe.

Pour l’éviter, dotons la boîte conteneur verte d’un remplissage supérieur suffisant :
CSS
.verte
{
padding-top : 20px;
}
84
Nous pourrions aussi fixer la largeur de la boîte jaune et doter le texte de la boîte verte d’une marge intérieure à droite
CSS
.verte
{
padding-right : 50px;
}
.jaune
{
width : 10px;
top : 10px;
right : 10px;
}
Utilisation : une mise en page à trois colonnes

La position absolue offre donc une alternative aux flottants pour réaliser 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 .centre .droite

{ { {
width : 100px; width : 100px; width : 100px;
margin : 10px 10px; margin : 10px 10px; margin : 10px 10px;
padding : 10px 10px; padding : 10px 10px; padding : 10px 10px;
position : absolute; border : 1px solid black; position : absolute;
top : 10px; } top : 5px;
left : 10px; right : 5px;
border : 1px solid black; border : 1px solid black;
} }
85
3. Position fixe
La seule différence avec le positionnement absolu tient au fait que l’élément fixé reste en place même si la page
défile avec l’ascenseur.
4. Position flottante
4.1 Généralités

float: none / left / right
Une boîte flottante est retirée du flux normal et placée le plus à droite ou le plus à gauche possible dans son
conteneur. Le contenu suivant cette boîte flottante s’écoule le long de celle-ci, dans l’espace laissé libre.
HTML
<p class="jaune">Une boîte jaune flottant</p>

<p class="verte">Une boîte verte doté d’un contenu
plus long…</p>
CSS
.verte
{
}
.jaune
{
width : 100px;
float : right;
}
Le navigateur place tout d’abord la boîte jaune, alignée sur le bord droit de cette partie de notre page, puis reprend le
cours normal du flux dans l’espace laissé libre à sa gauche pour afficher la boîte verte.
Le flux occupe tout l’espace disponible, la boîte verte reprend donc toute la largeur de la page sitôt passée la limite
inférieure de la boîte flottante jaune.
Dans les navigateurs n’appliquant pas la feuille de style, la boîte flottante sera simplement inscrite en flux normal
avant la boîte qui la suit.
86
4.2 Débordement et spacer
Reprenons notre exemple, mais inversons les contenus: celui de la boîte flottante jaune est à présent plus long que
celui de la boîte verte :
HTML
<p class="jaune">Une boîte jaune flottante dotée d’un

contenu plus long…</p>
<p class="verte">Une boîte verte</p>
CSS
Idem
La boîte flottante, plus longue que la boîte verte, déborde verticalement plus bas que celle-ci.
La solution… le spacer (appliqué à un léger changement de structure)
Il consiste à inclure dans la boîte verte (placée dans une balise <div> précédant la jaune) un élément bloc au contenu
fictif doté de la propriété clear; qui lui interdit d’être adjacent à une boîte flottante.
HTML
<div class="verte">
<p class="jaune">Une boîte jaune flottant doté d’un
<p>Une boîte verte</p>
<div class="spacer"></div>
</div>
CSS
Idem +…
.spacer
{
clear : both;
}
Le spacer, ne pouvant se placer à côté du bloc flottant, se trouve décalé plus bas que celui-ci.

clear: none / both / left / right
87
4.2 Une variante du spacer <hr />
Le défaut du spacer est d’introduire dans le code HTML un contenu fictif à des fins de présentation…
Lorsque la boîte adjacente à la boîte flottante est suivie d’une coupure logique dans votre page (nouvelle section de
texte…), il est préférable d’associer la propriété clear à un contenu réel.
La ligne horizontale créée par la balise <hr /> peut jouer avantageusement ce rôle :
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 à l’aide de la propriété visibility:
hidden;
HTML
<div class="verte">
<hr>
</div>
CSS
Idem +…
hr
{
clear : both;
visibility: hidden;
}
88
Une utilisation des flottantes : les vignettes
On obtient une série de vignettes pouvant accueillir par exemple des images, les liens d’un menu de navigation,
etc… (ou encore permettant de réaliser une mise en page en colonnes) en créant une série de boîtes flottantes
placées dans une boîte conteneur servant à délimiter l’espace visuel où s’affichent les boîtes flottantes. Elle s’adapte
automatiquement à la largeur d’affichage disponible : faute de place à droite, une boîte flottante sera replacée à la
ligne.
HTML
<div>
<p class="flottante">boîte verte 1</p>
…etc…
</div>
CSS
.conteneur
{
width : 100%;
}
.flottante
{
width : 100px;
margin : 2px;
float : left;
}
VI. conclusion
Le positionnement CSS donne donc toute liberté dans la mise en page.
Comparée à l’utilisation des tableaux, cette technique offre des avantages essentiels :
• Gestion de la présentation à partir d’un document unique pour un nombre quelconque de pages ?
• Stricte séparation du contenu et de la présentation, d’où un contenu mieux structuré, dénué 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 s’adaptent plus facilement aux différentes configurations des utilisateurs
(taille de la zone d’affichage, règlages de tailles de caractères…).
• Effets graphiques nouveaux, tels le recouvrement en position fixe/absolue.
89
23. CSS / Feuilles de style pour

l’impression
Il est possible de dire au navigateur d’utiliser une feuille de style pour l’affichage sur le web et une différente pour
l’impression papier.
Pour ce il suffit de créer une première feuille de style externe pour l’affichage sur le web et de la relier à la page html
dans l’en-tête comme suit :
<link rel=“stylesheet“ type=“text/css“ href=“ecran.css“>
Ensuite, il faut créer une deuxième feuille de style externe pour l’affichage lors de l’impression (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 l’utilisateur demandera à imprimer la page, ou même à faire un aperçu avant impression, c’est cette feuille
de style qui sera prise en compte.
90
24. CSS / Trucs & astuces
I. appliquer deux classes à une balise
II. fontes specifiques
III. Pallier le problème de la largeur de boîte dans IE PC
IV. Centrer les éléments dans la page, horizontalement
V. Centrer le contenu d’une page en position absolue
VI. Coloration des ascenseurs dans les pages (PC seulement)
VII. Empêcher la coloration des ascenseurs dans les pages

(PC seulement)
VIII. Faire défiler des images horizontalement dans un div
IX. Faire des ombres portées sur vos boîtes
91
HTML, Javascript, XHTML & CSS 24. Trucs et astuces
I. appliquer deux classes à une balise
Il est possible d’appliquer une ou plusieurs classes à une balise HTML.

Il suffit de séparer 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 très spécifique que très peu d’utilisateurs verront
car ils n’auront pas la police en question. La seule solution est donc une image
<h1>Mon titre </h1>
h1
{
background : url(titreimage.gif) no-repeat;
height : hauteur de l’image ;
}
III. Pallier le problème de la largeur de boîte dans IE PC

Dans IE 6 PC la bordure et le remplissage sont à l’intérieur de l’élément, alors que dans les autres navigateurs ils sont
à l’extérieur de l’élément.
<div id="box">...</div>
#box
{
width : 100px;
border : 5px;
padding : 20px
}
Donc la boîte 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 boîte de 150px, et à l’intérieur d’utiliser un <div> qui lui aura les
paramètres de remplissage et bordure.
<div id="box">
<div>
...
</div>
</div>
#box
{
width : 150px
}
#box div
{
border : 5px;
padding : 20px
}
92
IV. Centrer les éléments dans la page, horizontalement
Il faut donner aux marges de droite et gauche les propriétés : auto;

Rajouter : text-align:center; dans l’élément conteneur, ici le BODY.
Cependant l’attribut text-align est hérité.
Pour pallier ce problème, remettez un text-align:left; dans l’élément du contenu.
body
{
margin : 50px 0px;
padding : 0px;
text-align : center;
}
#Content
{
width : 500px;
margin : 0px auto;
text-align : left;
padding : 15px;
border : 1px dashed #333;
background-color : #eee;
}
V. Centrer le contenu d’une page en position absolue
L’astuce est d’utiliser une marge gauche négative : position:absolute; left:50%;

Puis la marge gauche est définie à l’opposé de la moitié de la largeur de la boîte : margin-left:-266px;
body
{
Margin :0px;
Padding :0px;
}
#Content
{
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 : #000000;
scrollbar-shadow-color : #000000;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000;
scrollbar-darkshadow-color : #000000;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #000000;
}
93
VII. Empêcher la coloration des ascenseurs dans les pages (PC seulement)
body, html
{
scrollbar-face-color : ThreeDFace !important;
scrollbar-shadow-color : ThreeDDarkShadow !important;
scrollbar-highlight-color : ThreeDHighlight !important;
scrollbar-3dlight-color : ThreeDLightShadow !important;
scrollbar-darkshadow-color : ThreeDDarkShadow !important;
scrollbar-track-color : Scrollbar !important;
scrollbar-arrow-color : ButtonText !important;
}
VIII. Faire défiler 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;
}
94
IX. Faire des ombres portées sur vos boîtes
Dans le html, le <div>externe correspond à l’ombre. Elle devra avoir une couleur légèrement plus foncée que l’interne
<div class=ombre>
<div class=contenu>
Le contenu de ma boîte ici<br />
</div>
</div>
#ombre
{
background-color : #ccc;
margin : 3em 0 3em 5em;
padding : 1,5em;
}
#contenu
{
background-color : #ffd;
border : thin solid #999;
margin : -3em 0 0 -3em;
padding : 1.5em;
}
95
Lexique général
Accessibilité web
L’accessibilité web c’est mettre le web et ses services à la disposition de tous les individus, quel que soit leur
matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou
leurs aptitudes physiques ou mentales.
Rendre les sites web accessibles, autorise, en théorie, l’accès à l’information, aux services (réservation de billet
de train, de place de concerts, d’achats en ligne...) pour les personnes en situation de handicap temporaire ou
permanent ainsi que pour toutes les personnes âgées. Le consortium W3C établit des standards très précis pour
s’assurer de l’accessibilité du web.
Agence web
Agence de communication multimédia, spécialisée dans le conseil, la conception, l’intégration et le développement

d’applications web. Les agences web constituent une nouvelle forme de prestataires de services : elles regroupent
des personnes spécialisées dans des activités telles que la conception de sites web, le marketing relationnel, le
développement et l’intégration d’applications de commerce électronique.
Une agence web peut prendre en charge tout ou partie d’un projet Internet. Issue du monde du service et de la
communication, elle se caractérise par l’expérience acquise et les méthodologies appliquées. Elle veut répondre
à l’ensemble des nouveaux besoins rencontrés par les entreprises qui développent une stratégie d’affaires
électroniques. Elle offre généralement trois compétences : un pôle conseil, un pôle ingénierie en charge de la
réalisation du site et enfin un pôle communication.
Bande passante
La bande passante correspond à la quantité maximale de données qu’une voie de communication peut transmettre
par seconde. Elle est calculée en bits par seconde (bit/s), c’est-à-dire en se servant d’une unité qui mesure aussi le
débit et la vitesse de transmission des données. La bande passante peut devenir ainsi une indication de vitesse et de
débit. C’est pour cela que, dans certains contextes, on remplace en anglais le terme bandwidth par throughput et, en
français, le terme bande passante par débit.
Base de données
Une base de données est un ensemble structuré et organisé permettant le stockage de grandes quantités
d’informations afin d’en faciliter l’exploitation (ajout, mise à jour, recherche de données). Une base de données se
traduit physiquement par un ensemble de fichiers sur disque.
96
HTML, Javascript, XHTML & CSS 25. Lexique général
CSS (Cascading Style Sheets)
Le langage CSS (Cascading Style Sheets : feuilles de style en cascade) est utilisé pour décrire la présentation d’un
document structuré écrit en HTML ou en XML, et c’est le World Wide Web Consortium (W3C) qui en a la direction.
CSS est utilisé pour définir les couleurs, les polices, le rendu, et d’autres caractéristiques liées à la présentation d’un
document. L’objectif est de bien séparer la structure (écrite en HTML ou similaire) et la présentation (en CSS) du
document.
Cette séparation fournit un certain nombre de bénéfices, permettant d’améliorer l’accessibilité, de changer plus
facilement de structure et de présentation, et de réduire la complexité de l’architecture d’un document.
Enfin, CSS permet de s’adapter aux caractéristiques du récepteur. HTML ne décrit que l’architecture interne, et CSS
décrit tous les aspects de la présentation. CSS peut définir 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 présentation sont gérés dans des fichiers séparés.
• La conception d’un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet
d’être plus efficace.
• Dans le cas d’un site Internet, la présentation est uniformisée : Les documents (pages html) font référence à la (aux)
même(s) feuille(s) de styles. Cette caractéristique permet de plus un relookage rapide.
• Un même document peut donner le choix entre plusieurs feuilles de style (impression ou lecture à l’écran par
exemple).
• Certains navigateurs web permettent d’accéder facilement à un choix de feuilles de style.
• Le code HTML est considérablement réduit en taille et en complexité, puisqu’il ne contient plus de balises de
présentation.
Design graphique
Procédé de création et de développement d’une ou de plusieurs images visant à harmoniser l’environnement visuel
proposé à l’usager. Le design demande de la recherche, du modelage, des ajustements et du re-design.
Design interactif
Procédé de création et de développement graphique, audio, textuel et animé d’une présentation visant à créer une
interactivité entre l’usager et le système proposé. Ce faisant, le site web ou le logiciel prend constemment en compte
les actions de l’interacteur, et produit ainsi un contenu ou réalise un objectif.
Design web
Le design web désigne la création du support visuel à destination d’un site web. Il s’agit d’une phase prépondérante
dans la conception d’un tel site. L’identité d’un site web après être conceptualisée sera transformée en lignes de
code et images pour s’afficher dans un fureteur web.
Comme pour l’infographie et le graphisme, le design web n’a pas encore acquit son indépendance à part entière
comme activité artistique. Les raisons sont nombreuses, autant que les affinités qu’elle exige ; le design web
concerne la création de la charte graphique, l’interface et la navigation du site, l’arborescence. Ce qui demande de
nombreuse compétence en graphisme, programmation, animation.
L’objet du design web est de valoriser l’image du propriétaire du site par le biais d’éléments graphiques afin d’en
renforcer son identité visuelle, néanmoins plusieurs contraintes liée à l’ergonomie réduisent les possibilités. Un
site doit avant tout répondre aux attentes des utilisateurs. Généralement un compromis doit être trouvé entre le
graphisme et la sobriété nécessaires à la lecture et la navigation.
97
Formulaire web
En informatique, un formulaire est un espace de saisie dans l’interface utilisateur, pouvant comporter plusieurs zones,
ou " champs " : on peut y saisir du texte, cocher des cases, effectuer un choix dans une liste de termes prédéfinis,
appuyer sur des boutons, etc. Ces zones de saisie assurent l’interactivité entre le client (par exemple, le navigateur
de l’internaute) et le serveur (par exemple, la machine qui héberge les pages web sur internet).
Les boutons des formulaires permettent de lancer des actions prédéfinies par l’auteur des pages. Ces actions sont
des scripts (javascript, PHP, Perl, CGI...) qui envoient les données saisies au serveur. Ce dernier les traite et renvoie
une réponse à l’utilisateur via la page web.
HTML
Langage de balisage de texte qui permet la création 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é
défini par le CERN (Centre européen de recherche nucléaire).
HTTP
Le Hypertext Transfer Protocol, abrégé HTTP, littéralement " protocole de transfert hypertexte ", est un protocole
de communication informatique client-serveur développé pour le World Wide Web. Il est utilisé pour transférer les
documents (document HTML, image, feuille de style, etc.) entre le serveur HTTP et le navigateur Web lorsqu’un
visiteur consulte un site Web.
HTTPS (Secured) est la variante du HTTP sécurisé avec les protocoles SSL ou TLS. Il permet au visiteur de
vérifier l’identité du site auquel il accède grâce à un certificat d’authentification. Il permet également de chiffrer
la communication. Il est généralement utilisé pour les transactions financières en ligne : commerce électronique,
banque en ligne, courtage en ligne, etc.
Interactivité
L’interactivité est la composante grâce à laquelle un logiciel ou un site internet prend constamment en compte les
actions de l’interacteur.
L’interactivité est souvent associée aux technologies permettant des échanges homme-machine où la conduite et le
déroulement de la situation est lié a des processus de rétroaction, de collaboration, de coopération entre les acteurs
qui produisent ainsi un contenu, réalisent un objectif, ou plus simplement modifient et adaptent leur comportement.
Elle distingue une communication interactive qui s’opposerait à une communication à sens unique, sans réaction du
destinataire, sans feedback.
Interface
Une interface permet d’échanger des informations entre l’utilisateur humain et la machine. Pour que cette
communication soit la plus simple possible, on utilise différents éléments.
Les périphériques d’entrée, comme le clavier, la souris, ou le scanner permettent à l’homme de donner des
renseignements ou des ordres à la machine. Les périphériques de sortie comme l’écran, des diodes ou l’imprimante
permettent à la machine de répondre aux ordres et d’afficher des informations.
98
Internet
Internet est le nom donné au réseau informatique mondial, reposant sur le système d’adresses 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.
L’usage courant fait référence à Internet de différentes manières. Outre les recommandations officielles, il n’est pas
rare de rencontrer les termes suivants : " le Net " ou " le net ", " Internet ", " l’Internet ", " le réseau des réseaux " ou
plus simplement " le réseau " ou " le Réseau " décliné parfois en " Le réseau ".
Certains termes sont utilisés à tort pour faire référence à Internet, par exemple : " la Toile ", " le web " ou " le Web "
(the Web en anglais), mais cela désigne le Web et non pas Internet. Cette confusion entre web et net existe aussi en
anglais.
Intranet
Réseau informatique privé, à l’intérieur d’une organisation, qui utilise les protocoles de communication et les
technologies du réseau Internet.
Un intranet est un réseau privé ne contenant en fait qu’un seul site. Par analogie avec site Internet (ou site Web),
correspondant au site public d’un organisme ou d’une entreprise accessible sur le réseau Internet, on utilise parfois
site intranet pour parler du site privé accessible uniquement à l’interne par le personnel d’un organisme ou d’une
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
première fois dans les versions bétas de Netscape Navigator 2.0.
D’abord appelé LiveScript, il a été rebaptisé JavaScript et est décrit comme un complément à Java dans un
communiqué de presse commun de Netscape et Sun Microsystems, daté du 4 décembre 1995. Cette initiative a
contribué à créer auprès du public une certaine confusion entre les deux langages, proches syntaxiquement mais
pas du tout dans leurs concepts fondamentaux, qui perdure encore aujourd’hui.
Le propos de JavaScript est de manipuler de façon simple des objets, au sens informatique, fournis par une
application hôte.
JavaScript est aujourd’hui défini par la norme ECMA-262, aussi connue sous l’appellation ECMAScript. La troisième
édition d’ECMA-262 parue en 1999 correspond à la version 1.5 de JavaScript. Son implémentation par Microsoft
porte quant à elle le nom de JScript. Il est question d’une version JavaScript 1.6 supportée par la version 1.5 de
Firefox.
Du code JavaScript peut être intégré directement au sein des pages Web, pour y être exécuté sur le poste client.
C’est alors le navigateur Web qui prend en charge l’exécution de ces petits bouts de programmes appelés scripts.
Généralement, JavaScript sert à contrôler les données saisies dans des formulaires HTML, ou à interagir avec le
document HTML via l’interface DOM, fournie par le navigateur (on parle alors parfois d’HTML dynamique). Il est aussi
utilisé pour réaliser des services dynamiques, parfois futiles ou strictement cosmétiques.
99
Langage de programmation
Langage artificiel comprenant un ensemble de caractères, de symboles et de mots régis par des règles qui
permettent de les assembler, utilisé pour donner des instructions à un ordinateur.
L’une des principales qualités d’un langage de programmation est la portabilité qui permet à un logiciel développé
dans un langage de programmation à grande portabilité, de fonctionner sur différents types de systèmes
informatiques.
Le terme " langage de programmation " recouvre une vaste panoplie, allant du langage machine formé d’instructions
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 données textuelles ayant une relation de complémentarité
les unes avec les autres, et ce, où qu’elles se trouvent dans Internet.
Dans les pages Web, la présence d’un lien hypertexte est signalée visuellement par son ancre qui peut être une
partie de phrase ou un mot soulignés ou de couleur différente de celle du texte, ou encore une image, une icône, un
graphique.
Navigateur web
Logiciel client capable d’exploiter les ressources hypertextes et hypermédias du Web ainsi que les ressources
d’Internet dans son ensemble, qui permet donc la recherche d’information et l’accès à 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 télécharger une copie de données choisies par l’internaute, d’un
ordinateur à un autre, selon le modèle client-serveur.
Les données téléchargées peuvent prendre la forme de logiciels, de fichiers de toute nature (textes, graphiques,
images, sons, etc.).
Le sigle FTP est également utilisé pour dénommer les applications qui fonctionnent selon le protocole FTP, ainsi que
les transferts effectués grâce à ce protocole.
Référencement
Le référencement est l’ensemble des techniques qui permettent d’inscrire un site dans les moteurs de recherche,
les répertoires ou dans les annuaires. Le référencement est souvent associé avec le positionnement qui, quant à lui,
représente l’art d’optimiser la place du site dans les réponses fournies par les moteurs de recherche.
Le référencement d’un site web se fait, selon l’outil de recherche, en précisant l’adresse URL du site et l’adresse de
courriel du webmestre, ou en ajoutant d’autres informations telles que le titre de la page d’accueil, un texte descriptif,
une catégorie, quelques mots clés, etc.
100
URL
Chaîne de caractères normalisés servant à identifier et à localiser des ressources consultables sur Internet et à y
accéder à l’aide d’un 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 associés à d’autres services offerts sur
Internet ;
le nom du serveur (www.exemple.com), nom de domaine de l’ordinateur hébergeant la ressource demandée ; le
chemin d’accès à la ressource (/ressources/fichier) qui permet au serveur de connaître l’emplacement de la ressource
(c’est-à-dire le répertoire, le sous-répertoire et le nom du fichier demandé) et l’extension (html) qui indique le format
dans lequel la page a été créée.
Dans une adresse URL, la barre oblique permet de spécifier un sous-répertoire.
W3C (World Wide Web Consortium)

Le World Wide Web Consortium, abrégé 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 n’émet pas des normes, mais des recommandations. Sa gestion est assurée conjointement par le
Massachusetts Institute of Technology (MIT) aux États-Unis, le European Research Consortium for Informatics and
Mathematics (ERCIM) en Europe (auparavant l’Institut national de recherche en informatique et en automatique
français (INRIA)) et l’Université 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 proposée)
• Candidate Recommendation (candidat à la recommandation)
Une recommandation peut être mise à jour par errata édité séparément, jusqu’à l’accumulation de suffisamment de
modifications ; une nouvelle version de la recommandation est alors publiée (XML en est aujourd’hui à sa troisième
version). Parfois, une recommandation recommence le processus, comme RDF.
Le W3C publie aussi des remarques informatives qui ne sont pas destinées à être traitées en tant que norme. Le
consortium laisse le soin aux fabricants de suivre les recommandations.
Contrairement à l’Organisation internationale de normalisation ou d’autres corps internationaux de standardisation, le

W3C ne possède pas de programme de certification, et beaucoup de standards ne définissent pas formellement un
niveau de conformité. Ils sont ainsi souvent implantés partiellement.
World Wide Web
Le World Wide Web (ou le Web, la Toile, WWW ou encore W3), littéralement la " toile (d’araignée) mondiale ", est un
système hypertexte public réparti sur Internet et qui permet de consulter, avec un navigateur Web, des pages Web
mises en ligne dans des sites Web. L’image de la toile vient des hyperliens qui lient les pages Web entre elles.
Le Web a rendu les médias grand public attentifs à Internet. Depuis, il est fréquemment confondu avec ce dernier. Ce
n’est cependant qu’un des systèmes disponibles sur Internet, avec le courrier électronique, Usenet, la messagerie
instantanée, etc. Internet précède le Web de nombreuses années.
101

HTML, XHTML &amp; CSS

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML, XHTML &amp; CSS

Caricato da

Copyright:

Formati disponibili

design graphique / web design

GENERALITES PRODUCTIVES ET TECHNIQUES

01. Introduction aux principes généraux du webdesign .................................... // page. 03

03. Les bases ......................................................................................................... // page. 12

12. Introduction au Javascript .............................................................................. // page. 46

17. Introduction au XHTML ................................................................................... // page. 58

18. Introduction et principe de base .................................................................... // page. 63

LEXIQUE GENERAL .................................................................................................... // page. 96

01. Introduction aux principes

1. Préparez l’arborescence de votre site.

2. Spécifiez les liens vers vos différentes pages.

• Dessinez un premier croquis de votre produit

400px bandeau visuel

10px fil d'ariane (option)

10px footer > adresse / contact / mail / mentions legales / crédits

• La multiplicité des plateformes MAC / PC

02. Introduction au langage HTML

II. qui utilise le html ?

III. apprendre le html

Un leger point historique...

1991 / HTML 1.0

1995 / HTML 2.0

1996 / HTML 3.0

1998 / HTML 4.0

2010 / HTML 5.0

II. qui utilise le html ?

III. apprendre le html

Ce que nous allons voir ensemble...

03. HTML, les bases

II. LE squelette d’une page

III. les balises

IV. les attributs

V. quelques regles simples pour débuter

II. LE squelette d’une page

1. L’en tête / HEAD

• La balise <title> : Pour le titre de la page

<meta title="nom du site">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

• L’appel des feuilles de style :

III. les balises

<B>ceci est du gras</B>

• La plupart des balises doivent être fermées.

<B>mot en gras</B> que <b>mot en gras</b>

2. Balises BLOC vs. INLINE

Dans l’immédiat gardez en memoire qu’il y a deux type de balises :

<FONT SIZE="1" COLOR="black"><I><B>texte</B></I></FONT>

IV. les attributs

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

V. quelques regles simples pour débuter

04. La balise <BODY>

balise attribut valeurs effet

marginwidth pixel définit les marges haute et basse de la page

bgcolor hexadecimale définit la couleur du fond

background url relatif définit la source relative de l’image de fond

style background-repeat: no-repeat; définit la non répétition du bkg (css intégrée)

bgproperties fixed définit si la capacité du fond à scroller avec la page

scroll yes / no / auto définit la présence de la barre de scroll sur la page

text hexadecimale définit la couleur du texte pour la page

link hexadecimale définit la couleur des liens pour la page

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

II. Les styles

III. Les accents

IV. Les en têtes

VI. Alignement / FERRAGE

HTML, XHTML & CSS

HTML, XHTML & CSS

é é espace forcé