Dveloppement Web : HTML5 et

CSS3

SAGAR Samya
 Introduction

2 SAGAR Samya
Gnralits sur le langage HTML (1)
HTML 5 (HyperText Markup Language) est un langage de balisage (dit aussi
langage de marquage) qui permet de structurer le contenu des pages web
dans diffrents lments.
Historiquement, les langages de balisage sont issus du langage SGML
(Standard Generalized Markup Language) cr en 1986 pour structurer des
contenus trs divers.
Ce langage sest rvl trop complexe pour tre appliqu tel quel au Web, do la
ncessit den crer une version allge respectant les mmes principes essentiels.
Linventeur du HTML (1992), Tim Berners-Lee, lavait conu lorigine
comme un outil de structuration des contenus, principalement textuels, et
non pas pour crer des prsentations diversifies.
Ce sont les dveloppements successifs, lessor populaire du Web et la concurrence
acharne entre Netscape et Microsoft pour semparer du march des navigateurs, qui
ont dtourn HTML de sa vocation premire avec lajout dlments de prsentation
qui navaient rien y faire.
Voulant faire mieux que lautre, chacun des deux grands a empil des couches
superflues sur HTML.
3 SAGAR Samya
Gnralits sur le langage HTML (2)
Il faut galement reconnatre que lentre du Web dans le grand public ncessitait
de rpondre une demande dinterfaces graphiques plus esthtiques.
Labsence dun langage particulier ddi uniquement la prsentation poussait
effectivement les webmestres utiliser tous les moyens pour crer des prsentations
visuelles agrables.
Lapparition de CSS (Cascading Styles Sheets), cr en 1996 par Hkon Wium Lie,
aurait d rsoudre le problme du dtournement de HTML de sa destination
premire.
Mais les mauvaises habitudes taient prises et la facilit faisait le reste.
Lapparition de HTML 4, et particulirement de sa version strict associe lemploi
systmatique de CSS 2 (publi en 1998), pouvait apporter une solution efficace ce
problme.
Limpossibilit pour le W3C de trouver un consensus entre les diteurs de
navigateurs et les crateurs de moteurs de recherche pour faire voluer XHTML a
conduit un Groupe indpendant, le WHATWG (Web Hypertext Application
Technology Working Group) dirig par Ian Hickson (aujourdhui chez Google !),
entamer le dveloppement de HTML 5.

4 SAGAR Samya
HTML et CSS : deux langages pour
crer un site web (1)
HTML (HyperText Markup Language) : il a fait son
apparition ds 1991 lors du lancement du Web. Son rle
est de grer et organiser le contenu. C'est donc en HTML
que vous crirez ce qui doit tre affich sur la page : du
texte, des liens, des images
Vous direz par exemple : Ceci est mon titre, ceci est mon
menu, voici le texte principal de la page, voici une image
afficher, etc. .
CSS (Cascading Style Sheets, aussi appeles Feuilles de
style) : le rle du CSS est de grer l'apparence de la page
web (agencement, positionnement, dcoration, couleurs,
taille du texte).
Ce langage est venu complter le HTML en 1996
5 SAGAR Samya
 HTML et CSS : deux langages pour
crer un site web (2)

HTML
(sans CSS)

HTML
Et CSS

6 SAGAR Samya
Les versions de HTML
HTML 1 : c'est la toute premire version cre par Tim Berners-Lee en 1991.
HTML 2 : la deuxime version du HTML apparat en 1994 et prend fin en 1996
avec l'apparition du HTML 3.0. C'est cette version qui posera en fait les bases des
versions suivantes du HTML. Les rgles et le fonctionnement de cette version sont
donns par le W3C (tandis que la premire version a t cre par un seul
homme).
HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de
nombreuses possibilits au langage comme les tableaux, les applets, les scripts, le
positionnement du texte autour des images, etc.
HTML 4 : il s'agit de la version la plus rpandue du HTML (plus prcisment, il
s'agit de HTML 4.01). Elle apparat pour la premire fois en 1998 et propose
l'utilisation de frames (qui dcoupent une page web en plusieurs parties), des
tableaux plus complexes, des amliorations sur les formulaires, etc. Mais surtout,
cette version permet pour la premire fois d'exploiter des feuilles de style (CSS)
HTML 5 : c'est LA dernire version. Elle fait beaucoup parler d'elle car elle
apporte de nombreuses amliorations comme la possibilit d'inclure facilement des
vidos, un meilleur agencement du contenu, de nouvelles fonctionnalits pour les
formulaires, etc.
7 SAGAR Samya
Les versions de CSS
CSS 1 : ds 1996, on dispose de la premire version du CSS.
Elle pose les bases de ce langage qui permet de prsenter sa
page web, comme les couleurs, les marges, les polices de
caractres, etc.
CSS 2 : apparue en 1999 puis complte par CSS 2.1, cette
nouvelle version de CSS rajoute de nombreuses options. On
peut dsormais utiliser des techniques de positionnement trs
prcises, qui nous permettent d'afficher des lments o on le
souhaite sur la page.
CSS 3 : c'est la dernire version, qui apporte des
fonctionnalits particulirement attendues comme les
bordures arrondies, les dgrads, les ombres, etc.

8 SAGAR Samya
HTML en pratique (1)
Trs concrtement, un document HTML, lors de son
criture, est un simple fichier texte dont certaines
parties portent une signification particulire,
On appelle le balisage (markup).
Le balisage dfinit ainsi une suite structure imbrique
dlments qui constitue le document.
Un lment est une suite dentits HTML dlimite par des
tiquettes (tags) et reprsentant une unit structurelle du
document :
titre, liste, paragraphe, texte mis en vidence, citation, etc.
HTML dfinit quels sont les lments existants, leurs
attributs et les rgles dimbrication de ces lments.
9 SAGAR Samya
HTML en pratique (2)
Les entits
On appelle entit SGML une unit textuelle. Sa plus simple
expression est un caractre non spcial, cest--dire nimporte lequel
sauf <, >, & et quelques autres qui dpendent de la DTD utilise.
Mais une entit peut tre aussi constitue par une squence de
caractres entoure par les dlimiteurs & et ; qui est remplace par
un autre texte permettant ainsi dabrger un document en
remplaant certaines squences longues et frquentes par une
abrviation plus courte.
Dans HTML les entits complexes servent plutt coder les
caractres spciaux qui ont une signification particulire ou bien des
caractres internationaux lorsque lon veut assurer une stricte
conformit avec le jeu de caractres ASCII

10 SAGAR Samya
HTML en pratique (3)
Les tiquettes (balises ou tags) et les lments
On appelle balises (tags) les dlimiteurs des lments HTML.
Un lment est, la plupart du temps, dlimit par une balise initiale (start-
tag) de la forme <tag> et une balise finale (end-tag) de la forme </tag>.
Certains lments comme
BR (saut de ligne) nont pas dtiquette finale.
Dautres comme P (paragraphe),
LI (liste) ont des tiquettes finales optionnelles.
Les lments simbriquent les uns lintrieur des autres suivant des
rgles dfinies par le langage.

<H1>Ceci est un titre de niveau1 </H1>

Texte
Etiquette de dbut (Contenu de llment)
Etiquette de fin

11 SAGAR Samya
HTML en pratique (4)
Les attributs
Les attributs permettent de modifier par dfaut dune balise, ou bien de
spcifier des informations indispensables (comme ladresse dune image
intgre la page, ou bien celle dun lien externe).
Pour chaque lment seuls certains attributs sont autoriss.
La valeur donne aux lments doit figurer entre guillemets ou
apostrophes et ne doit pas contenir de guillemets, apostrophes ou signes >
qui doivent, le cas chant, tre remplacs par les entits HTML
quivalentes.
<balise attribut1="Valeur1" attribut2="Valeur2" attribut3="Valeur3">
Exemple : Cet lment porte le nom de lien hypertexte. On y reconnat
ltiquette initiale <A> dans laquelle on trouve lattribut href qui porte la
valeur est http://www.essths.tn/.
<A href=http://www.essths.tn/>Serveur de lmes</a>

12 SAGAR Samya
HTML en pratique (5)
Les commentaires
Un document HTML peut contenir des commentaires qui
seront ignors par lanalyseur lors de la visualisation. Les
commentaires sont signals par les dlimiteurs SGML spciaux:
<!-- et -->

<!-- Ceci est un commentaire -->

Un commentaire peut staler sur plusieurs lignes (les retours

la ligne sont autoriss lintrieur dun commentaire).

13 SAGAR Samya
Rgles de base HTML
Un document bien form
Un document HTML doit respecter certaines rgles simples:
Les lments et les attributs sont insensibles la casse.
Par exemple, <body> et <BODY>
Les lments non vides doivent avoir une balise douverture et une balise de
fermeture.
Les lments vides ne comportent quune seule balise et il est plus correct
de les terminer par les caractres /> prcds dun espace pour marquer la
fin de llment.
Par exemple, <br />

Les lments ne doivent pas se chevaucher et donc obir au principe premier

ouvert, dernier ferm.
Tous les attributs doivent avoir une valeur incluse entre guillemets ("). Les
diffrents attributs du mme lment doivent tre spars par au moins un
espace.

14 SAGAR Samya
Lenvironnement de travail
On utilise l'diteur de texte pour crer un fichier ayant
l'extension .html (par exemple : test.html). Ce sera notre
page web.
Exemple diteur de texte (Notepad++, jEdit, vim).
Ce fichier peut tre ouvert dans le navigateur web
simplement en faisant un double-clic dessus.
Le navigateur web est un programme qui permet d'afficher des
sites web. Il lit les langages HTML et CSS pour savoir ce qu'il
doit afficher.
Il existe de nombreux navigateurs web diffrents : Google Chrome,
Mozilla Firefox, Internet Explorer, Safari, Opera
Chacun affiche un site web de manire lgrement diffrente des
autres navigateurs.
15 SAGAR Samya
Structure des documents HTML

16 SAGAR Samya
Structure de base d'une page HTML
La structure divise le document en deux parties :
en en-tte dlimit par llment HEAD
et le corps du document limit par llment BODY.
Llment <HTML> est llment racine.
C'est la balise principale du code. Elle englobe tout le contenu
de votre page.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Titre du Document</TITLE>
</HEAD>

<BODY>
... Le corps du document avec le balisage appropri ...
</BODY>
</HTML>
17 SAGAR Samya
En-tte de document HEAD (1)
Llment HEAD contient des informations
administratives propos du document mais qui ne font
pas strictement partie de ce dernier.
Elles ne sont donc gnralement pas reprsentes par le
visualiseur dans le corps du document.

A lintrieur de llment HEAD on trouve divers autres

lments.
tite, meta, style, link, script

18 SAGAR Samya
En-tte de document HEAD (2)
Titre du document (TITLE)
Il sagit en fait du seul lment qui soit obligatoire dans un document
HTML.
Il donne un titre au document ou plus exactement une dnomination.
En effet le contenu de cet lment nest pas reprsent dans le corps du
document.
Les visualiseurs graphiques laffichent usuellement sur la barre de fentre
et lutilisent comme titre si vous insrez le document dans votre liste de
marque-pages (bookmarks).

19 SAGAR Samya
En-tte de document HEAD (3)
Meta-information, aide lindexage (META)
Llment META est un lment gnrique permettant de spcifier des
meta-informations propos du document.
Cet lment comprend essentiellement deux attributs qui sont :
name : Nom de la meta-information ;
Content : Valeur de la meta-information
Par exemple on peut ainsi spcifier lauteur du document
<META name=Author content=Oscar Figueiredo>

Une autre utilisation trs importante de cet lment consiste donner

une description du document ainsi quune liste de mots cls. Ce type
dinformation est en effet mis profit par les outils dindexage
automatique pour assurer une meilleure indexation
<HEAD>
<META name=description content=Un cours sur le langage HTML>
<META name=keywords content=cours HTML, prsentation WWW>
</HEAD>
20 SAGAR Samya
En-tte de document HEAD (4)
Il existe deux types de commande META:
<META NAME="paramtre" CONTENT="Attribut">
paramtre attribut description
author nom de l'auteur dsigne l'auteur de la page
copyright informations de copyright informations concernant les droits d'auteur.
description la description de votre page Utilis par les moteurs de recherche.
La description de votre page apparatra lors de l'affichage
du rsultat de recherche.
expires "never" ou "date d'expiration" permet aux robots d'indexer la page
geography ville, code postal, pays identifie gographiquement la localit.
keywords mot-clef-1, mot-clef-2, etc Utilis par les moteurs de recherche.
Votre page sera accessible grce aux mots-clefs choisis par
vos soins (maximum de 1000 caractres). Les mots-clefs
sont spars par des virgules. Vous pouvez utiliser
plusieurs langues en indexant les mots en franais, en
anglais, etc ... par exemple : "biologie, biology".
resource-type document
robots "all" ou "none" indique aux robots d'indexer ou non cette page
subject sujet de la page spcifie le sujet de votre page

<META HTTP-EQUIV="paramtre" CONTENT="Attribut">

paramtre attribut description
refresh x; URL="adresse" rafrachit votre page toutes les "x" secondes.
Si URL est absent c'est cette mme page qui est rafrachie.
Si URL existe alors la page change indique dans
URL="adresse".sera charge.
Ceci permet de constituer un diaporama.

21 SAGAR Samya
En-tte de document HEAD (5)
Feuille de style incluse (STYLE)
Depuis la version 4.0, HTML permet dinclure une ou plusieurs feuilles
de style (voir les feuilles de styles plus loin dans le cours) lintrieur du
document HTML au moyen de llment STYLE.
Script (SCRIPT)
Cette balise permet d'introduire un script (un petit programme
permettant l'utilisation d'effets dynamiques dans la page). Elle admet un
attribut "requis", type, qui indique son... type (par exemple,
type="text/javascript"). L'attribut language est obsolte.
Cette balise admet d'autres attributs, comme src, qui indique l'URL du
fichier o se trouve le script.
Fichiers lis (LINK)
Cette balise permet de spcifier les URLs de fichiers lis dune manire
ou dune autre au document.

22 SAGAR Samya
Corps de document BODY
Le corps du document contient la suite dlments constituant
le document proprement dit :
en-ttes de chapitres, paragraphes, listes, tableaux,
Ces diffrents lments sont regroups logiquement et dcrits
dans les sections suivantes du cours.
Les attributs de la balise <BODY>
BACKGROUND : Un URL dsignant une image servant de toile de fond au
document ;
BGCOLOR : Une couleur utiliser comme fond de document ;
TEXT : Une couleur utiliser pour le texte du document ;
LINK : Une couleur utiliser pour mettre en vidence les hyperliens ;
VLINK : Une couleur utiliser pour les liens dj visits. ;
ALINK : Une couleur utiliser pour les liens activs.

23 SAGAR Samya
Le prologue DOCTYPE
Il est important (quoique non obligatoire) de dfinir sur la
premire ligne du document la version du langage utilise.
Cette dfinition de version sert essentiellement aux outils
de validation qui permettent de vrifier la syntaxe dun
document.
Ceci se fait au moyen dune formule SGML normalise
Dans HTML5 <!DOCTYPE html>
Plus complexe dans les versions html ultrieurs.
Exemple HTML4 strict: <!DOCTYPE HTML
PUBLIC -//W3C//DTD HTML 4.0//EN>

24 SAGAR Samya
 Mise en forme de texte

25 SAGAR Samya
Formatage logique (1)
Titre et sous-titre
Il s'agit ici des titres qui s'afficheront dans la page (et non dans
la barre de titre comme la balise <title> prcdemment) : ce
sont les en-ttes de sections ou paragraphes.
Il existe six niveaux de titres d'importance dcroissante : <h1>,
<h2>, <h3>, <h4>, <h5>, <h6>.
Exemple et code source avec chaque balise TITRE

<h6>Titre de niveau 6</h6>

<h5>Titre de niveau 5</h5>
<h4>Titre de niveau 4</h4>
<h3>Titre de niveau 3</h3>
<h2>Titre de niveau 2</h2>
<h1>Titre de niveau 1</h1>

26 SAGAR Samya
Formatage logique (2)
Paragraphes
La balise <p>
Un paragraphe est dlimit par les balises <p> et </p>.
La balise <p> provoque un saut de ligne avant le paragraphe.
Un paragraphe ne peut en contenir un autre (le navigateur les interprte
comme des paragraphes successifs...).
Attributs de la balise <p> Attribut Valeur(s)
Left (par dfaut)
right
align
center
justify
Rupture de ligne: la balise <br>
Force un retour en dbut de ligne suivante l'intrieur d'un mme
paragraphe. La balise fermante est facultative.
Attributs de la balise <br> Attribut Effet Valeur(s)
rpartit le texte
all
autour d'une image
clear left
flottante ou d'un
right
autre objet
27 SAGAR Samya
Formatage logique (3)
Les balises <div> et <span>
Ces balises jouent un rle particulier. Elles permettent de
dcouper l'information en units logiques, et sont fortement
utilises avec des feuilles de style.
Par exemple, on peut scinder un document HTML avec deux balises
<div> en deux parties, une prsentant... une table des matires, et
l'autre prsentant un contenu de cours.
La balise <span> permet quant elle une structuration interne un
paragraphe. Par exemple, on peut indiquer un changement
momentan de langage utilis avec l'exemple suivant:
<p> Hamlet a dit <span lang="en"> "To be or not to
be" </span>. </p>

28 SAGAR Samya
Formatage logique (4)
Autres balises
Balise Signification
<em> emphasis

<strong> fort

<cite> citation brve

<dfn> dfinition

<code> extrait de programme

<samp> sample: chantillon

<kbd> Keyboard(clavier)

<var> variable ou argument

<abbr> abrviation

<acronym> acronyme

<sub> subscript/indice

<sup> superscript/exposant

<pre> preformatted

29 SAGAR Samya
Formatage logique (5)
La balise <hr>
Destine sparer diffrentes parties d'un document au moyen d'un
trait horizontal de longueur et d'paisseur variables, et gnralement
pourvu d'un ombrage. Il s'agit d'un conteneur vide dont la balise
fermante est facultative (et mme jamais utilise en HTML).
Cette balise possde des attributs, mais leur emploi est dconseill par
le W3C :
attribut effet valeur(s)
boolen, sa prsence seule supprime
noshade suppression de l'ombrage
l'ombrage
left (valeur par dfaut)
right
align alignement
center
justify
size paisseur du trait nombre en pixels
en pixels ou en pourcentage de la fentre
width largeur du trait
du navigateur (ajouter le symbole %)

30 SAGAR Samya
Formatage physique : Mise en forme de
la police (1)
Police par dfaut
Les navigateurs utilisent par dfaut une police proportionnelle : Times Roman sur les
Macintosh, et Times New Roman sur les PC. En tant qu'utilisateur (surfeur !), il vous
est possible de modifier cette police par dfaut. Cela rend la tche des dveloppeurs
de site d'autant plus ardue...
La balise <font>
Cette balise est dconseille, utiliser plutt les feuilles de style. Pour modifier une
partie du texte, on crira par exemple :
<font face="Verdana, Arial, Helvetica, sans-serif" size="5" color="red">
mon exemple </font>
Qui produira l'effet suivant de couleur rouge :
Les attributs de la balise <font> :
L'attribut face : sa valeur est une liste de polices spares par des virgules, c'est la premire de
cette liste prsente sur le navigateur qui sera utilise. Il est recommand de spcifier en dernier lieu
une famille de polices dite "gnrique" (nous y reviendrons dans la partie sur le CSS).
L'attribut size : Il existe 7 tailles, la taille par dfaut est 3. On peut spcifier une taille relative
l'aide d'un incrment sign, par exemple size="+2", size="-1".
L'attribut color : A l'aide d'un nom de couleur ou d'un code RGB.

31 SAGAR Samya
Formatage physique : Mise en forme de
la police (2)
Autres balises
Balise Signification

<b> gras

<i> italique

<tt> tltype: police pas fixe

<big> taille suprieure la taille

courante

<small> taille infrieure la taille

courante

<s> ou <strike>

<u> underline/soulignement

La balise <center> permet de centrer son contenu. Il est recommand

d'utiliser plutt l'attribut align="center" ou, mieux, une feuille de style.
<blockquote>, prvu pour des citations de plusieurs lignes, cette balise
permet de produire un effet d'indentation sur les deux marges latrales.
32 SAGAR Samya
Les entits de caractres
HTML utilise la codification ASCII qui ne comporte aucun caractre accentu. Il faut
donc dfinir une convention de codage supplmentaire pour faire apparatre ces
caractres. Caractre Abrviation Caractre Abrviation
&agrave; &acirc;
Une entit de caractre
&auml; &aelig;
dbute par "&", et finit par ";".
&eacute; &egrave;
Exemple le "" est cod "&eacute;". &ecirc; &euml;
&ugrave; &ucirc;
&uuml; &ouml;
&iuml; &icirc;
&ccedil; &oelig;
Les caractres rservs
Les caractres comme "<", ">" et "&" ont une signification spcifique : le infrieur dsigne
le dbut d'une balise, etc. Cods tels quels, le navigateur est incapable de les faire
apparatre. Il a donc fallu leur adjoindre une codification supplmentaire : "<" est cod &lt;,
">" est cod &gt;, "&" est cod &amp;.
L'entit &nbsp;
Ce caractre permet d'interdire la csure entre deux mots, par exemple :
"100&nbsp;&euro;" ou d'ajouter des blancs contigus.
33 SAGAR Samya
Codage de la couleur (1)
HTML propose deux faons de coder une couleur :
Par son nom
Il existe une liste de couleurs reconnues par la plupart des navigateurs.
(tableau de couleurs) Il en existe d'autres.
Cependant, le rendu de ces couleurs dpend parfois fortement du navigateur
et de la plateforme utilise.
Par le triplet RGB
Toute couleur peut tre dcompose en trois couleurs : rouge, vert, bleu
(Red, Green, Blue d'o RGB) d'intensit convenable. Cette intensit est
exprime en un nombre compris entre 0 et 255. Ce nombre est cod en
hexadcimal : il est alors compris entre 0 et FF.
Par exemple, #BA1B85 code une intensit de BA (186) pour le rouge, 1B (27)
pour le vert, 85 (133) pour le bleu.

34 SAGAR Samya
Codage de la couleur (2)
Les seize couleurs simples

35 SAGAR Samya
 Les liens hypertexte

36 SAGAR Samya
Dfinitions : Ancres et liens hypertexte
Un lien hypertexte HTML tablit une relation oriente entre une source et
une destination. Un lien est exprim par un lment A ou LINK.
LINK ne peut intervenir que dans len-tte dun document lintrieur dun
lment HEAD alors que A ne peut intervenir que dans le corps du document
lintrieur de llment BODY.
Une des extrmits du lien est dfinie par llment lui-mme (la source du lien),
lautre extrmit tant dfinie par lattribut href de llment (A ou LINK).
Toute extrmit de lien identifie une ressource atteignable sur le World Wide Web :
un document, une position lintrieur dun document, une image, une squence
vido, etc.

On appelle ancre ou point dancrage une zone lintrieur dun document

pouvant contenir plusieurs lments et pouvant tre utilise comme extrmit dun
lien.

Note: Il est interdit dimbriquer des liens ou des ancres

37 SAGAR Samya
La balise <a>
Attributs de la balise <a>
Attribut Effet Valeur(s)
URL (voir ci-dessous).
Hypertexte REFerence, dsigne l'adresse valeur de l'attribut name (nom) de
href atteindre par le navigateur l'ancre atteindre dans la mme page
Internet prcde du caractre #.
name tiquette de l'ancre chane de caractres
dfinit une touche du clavier. La
accesskey combinaison "ALT + touche" a le mme touche du clavier
effet que le clic sur le lien.
fixe la position de l'lment dans l'ordre
tabindex squentiel des tabulations.
valeur numrique entire

target (voir la partie sur les frames)

title Une rapide description du lien Une chane de caractres.

shape (voir la partie sur les images ractives)

coords (voir la partie sur les images ractives)

Un script excuter quand le curseur est

onfocus,onblur positionn sur le lien (onfocus), ou Une chane de caractres.
bien qu'il le quitte (onblur).

38 SAGAR Samya
Diffrents types de liens (1)
Le lien externe et l'adresse absolue
Des liens pointant vers un autre site. Il va falloir lancer une
requte sur l'ensemble de la toile pour que le serveur qui
possde la page demande puisse l'envoyer via l'Internet, au
client demandeur.
Il suffit ainsi didentifier le document distant par sont adresse
URL.
Exemple :

consulter <a href=http://www.essths.tn>le site

de lESSTHS </a>

39 SAGAR Samya
Diffrents types de liens (2)
Le lien interne et l'adresse relative
Des liens pointant vers une autre page d'un mme serveur. Lors
du fonctionnement de ce lien, le navigateur charge une nouvelle
page situe sur le mme serveur. La syntaxe employe sera alors
relative la page en cours.
Ressource situe dans le mme rpertoire que la page
d'appel
La valeur prise par l'attribut href est simplement le nom du fichier, par
exemple href="index.html".
Ressource situe dans un sous-rpertoire du rpertoire
contenant la page d'appel
Il suffit de citer la suite des sous-rpertoires jusqu'au fichier ressource,
par exemple href="archives/2001/18072001.html".

40 SAGAR Samya
Diffrents types de liens (3)
Ressource situe dans un rpertoire contenant la page
d'appel
Il faut remonter successivement chaque rpertoire par "../". Dans cet
exemple, le rpertoire vis est le suprieur hirarchique de 2me
rang (le grand-pre) : href="../../index.html".

Ressource situe dans un rpertoire situ dans une

branche latrale
Il faut remonter au rpertoire commun par "../" puis redescendre la
bonne branche, par exemple
href="../../produits/convecteurs/rh1200x.html".

41 SAGAR Samya
Diffrents types de liens (4)
Ancre situ dans la mme page dappel
Les ancres sont construites grce llment A muni de lattribut name (ou
bien par lattribut id support par la plupart des lments). Les ancres
permettent de donner un nom un endroit prcis du document afin de
pouvoir y faire rfrence dans un lien.
Pour dfinir un point de branchement : <A name="tiquette"> nom
<A>
Pour faire le lien : <A href="#tiquette"> aller la
partie nom <A>
Concatner une URL et une ancre intra-page
Pour accder directement une section donne d'une autre page donne, il
suffit de concatner l'URL avec la valeur du paramtre name l'aide du
symbole #, par exemple:
<A href="index.html#tablematieres"> retour au
sommaire <A>.
Remarque importante: privilgier l'adresse relative
42 SAGAR Samya
Liens vers des ressources utilisant
d'autres protocoles
Courrier lectronique
L'utilisation de protocole mailto:... provoque l'ouverture de l'application
correspondant au courrier sous Internet Explorer ou sous Netscape.
lien e-mail sans sujet : href="mailto:A.Talon@dupuis.fr"
lien e-mail avec sujet :
href="mailto:A.Talon@dupuis.fr?subject=marsupilami"
lien e-mail avec sujet et texte dans le corps du message :
href="mailto:A.Talon@dupuis.fr?subject=marsupilami?body=longueur_
queue"
lien e-mail avec sujet, envoy deux personnes :
href="mailto:A.Talon@dupuis.fr?cc=Lefuneste@dupuis.fr?subject=mar
supilami"
FTP
Provoque l'ouverture d'une application FTP.
lien externe vers un serveur FTP : href="ftp://ftp.jussieu.fr".
lien externe vers un serveur de news : href="news:news.u-psud.fr". Il est alors
demand au visiteur, le cas chant, s'il veut s'abonner ce serveur de news.
43 SAGAR Samya
Lien vers d'autres objets
Le systme d'exploitation recherchera de lui-mme, selon
l'extension du fichier, quelle application permet de
l'exploiter.
S'il n'a jamais fait l'association, il proposera l'utilisateur de
l'tablir lui-mme.
Vous pouvez galement proposer un fichier (.EXE ou
.ZIP) en tlchargement...
Exemple
<a href="site.zip"> Tlchargement du
site </a>

44 SAGAR Samya
 Les listes

45 SAGAR Samya
Notion de liste
Apparue, car elle permet de structurer simplement un
ensemble de donnes.
HTML offre de nombreux lments permettant de construire
des listes ou des numrations.
Ces listes peuvent tre gnralement imbriques les unes dans
les autres.
Les 3 types fondamentaux de listes sont :
la liste simple UL o chaque terme de la liste est prcd dun point ou
dun signe similaire ;
la liste ordonne OL o les termes sont prcds dun numro
dordre ;
la liste de dfinitions DL o chaque terme, dsign par llment DT
peut-tre accompagn dune dfinition dsigne par llment DD.

46 SAGAR Samya
Listes puces
C'est le type de liste le plus simple.
Elle s'introduit en utilisant la balise <ul>, qui signifie
Unordered List. Les lments de la liste sont
dclars par la balise <LI>.
Attributs de la balise <UL>

Attribut Effet Valeur(s)

disc (dfaut)
Le type de signe afficher devant
type chaque entre de la liste circle
square

47 SAGAR Samya
Listes numrotes
Ce type de listes est ordonn.
Elle s'introduit en utilisant la balise <ol>, qui signifie Ordered
List. Les lments de la liste sont galement dclars par la
balise <li>.
La "numrotation" peut se faire de cinq manires diffrentes,
cela tant spcifi par la valeur de l'attribut type. Elle peut
dbuter n'importe quelle position (par exemple 2...), grce
la valeur de l'attribut obsolte start.
Attributs de la balise <OL>
Attribut Effet Valeur(s)
1 (par dfaut)
a
type choix du type de numrotation A
i
I
start numro de dbut de liste selon le type, un numro ou une lettre

48

SAGAR Samya
La balise <li>
Cette balise sert dlimiter un lment de liste UL ou
OL. Ltiquette finale est facultative.
LI peut contenir des lments de type texte, de type
bloc, des listes, des formulaires, des tableaux ainsi que A,
IMG, HR, BR, etc
Attributs de la balise <LI>
Attribut Effet Valeur(s)
Les valeurs possibles sont les
mmes que
Le type de signe ou de
type numrotation utiliser.
celles autorises pour l'attribut
TYPE de llment dans lequel
se trouve llment LI
Le nombre utiliser (dans une
liste OL). Analogue au rle de selon le type, un numro ou
VALUE lattribut start de la balise une lettre
OL

49 SAGAR Samya
Liste de dfinitions
<DL> Une liste de dfinitions. Ne peut contenir quune
squence dlments DT et DD.
<DT> Un terme dfinir. L'tiquette finale est facultative.
Contient des lments de type texte et A, IMG, BR, etc.
<DD> Une dfinition. L'tiquette finale est facultative.
Contient des lments de type texte, de type bloc, des
listes, des formulaires des tableaux ainsi que A, IMG, HR,
BR, APPLET, MAP.

50 SAGAR Samya
Exemple

51 SAGAR Samya
 Les tableaux dans une page
Web

52 SAGAR Samya
Structure des tableaux (1)
Crs au dpart pour prsenter des tables de donnes, les tableaux sont
trs vite devenus un moyen efficace de prsentation claire et ordonne.
Ils permettent, par exemple, de faire de manire souple du multi colonne. Mais il
est toujours prfrer les solutions utilisant les feuilles de style pour contrler la
mise en page.
Usuellement un tableau est constitu de lignes et de colonnes. Ce nest pas
tout fait le cas en HTML. Un tableau HTML est compos de
cellules organises en ranges.
Llment TABLE dfinit le tableau. A lintrieur de cet lment, une
succession dlments TR (Table Row) dfinit les ranges, elles-mmes
composes dlments TD et TH dfinissant les cellules proprement
dites.
TD (Table Data) dfinit une cellule simple alors que TH (Table Heading)
dfinit une cellule de titre pour la ligne et/ou la colonne o elle apparat.
Il est galement possible de fournir une lgende au tableau.

53 SAGAR Samya
Structure des tableaux (2)Exemple
...
<TABLE>
<CAPTION>Titre du Tableau</CAPTION>
<TR>
<TH>Titre Colonne 1
<TH>Titre Colonne 2
<TH>Titre Colonne 3
</TR>
<TR>
<TD>Objet 1
<TD>Objet 2
<TD>Objet 3
</TR>
</TABLE>
...

Un tel tableau est reprsent de la faon suivante :

Titre du Tableau
Titre Colonne 1 Titre Colonne 2 Titre Colonne 3
Objet 1 Objet 2 Objet 3

54 SAGAR Samya
Structure des tableaux (3)
Un tableau se dclare grce la balise <table>. Cette
balise peut avoir plusieurs balises-enfants. La plupart sont
facultatives, mais si elles sont prsentes, elles doivent
tre utilises dans cet ordre :
<caption>
<col> ou <colgroup>
<thead>
<tfoot>
<tbody>

Remarque : les tableaux peuvent tre imbriqus

55 SAGAR Samya
 La balise <table> (1)
Attribut Effet Valeur
summary donne un rapide rsum du contenu du tableau. Cela amliore une chane de caractres
l'accessibilit de la page.
width largeur du tableau une longueur, qui peut s'exprimer en nombre de pixels (ex :
WIDTH="200") ou en pourcentage de la largeur de la fentre du
navigateur(ex :
WIDTH="50%").
border paisseur de la bordure extrieure en pixel (par dfaut, 0, sans bordure)
frame Prsence de l'encadrement extrieur du tableau. Void: aucune
(rien voir avec la balise <frame>, que l'on verra dans la partie above: haut seulement
sur les cadres). below: bas seulement
hsides: haut et bas
vsides: gauche et droite
lhs: gauche seulement
rhs: droite seulement
box: sur les 4 cts
border: sur les 4 cts aussi
rules comme l'attribut frame, mais pour l'encadrement intrieur none: aucun
groups: seulement entre les groupes de lignes (<thead>, <tbody> et
<tfoot>) et les groupes de colonnes (<colgroup> et <col>)
rows: entre les lignes
cols: entre les colonnes
all: partout (valeur par dfaut)

cellspacing marge entre cellules conscutives en pixels

cellpadding marge entre le bord et le contenu de la cellule en pixels
align position du tableau dans la fentre. Cet attribut est obsolte en center
HTML 4.01 strict. left
right
bgcolor couleur de fond du tableau. Cet attribut est obsolte en nom de couleur ou triplet RGB
HTML 4.01 strict.
COLS Le nombre de colonnes du tableau. Il est prfrable dutiliser les Un nombre.
lments
COLGROUP et COL pour indiquer cette information
56 SAGAR Samya
La balise <table> (2)
Remarques :
Certains de ces attributs sont lis ;
ainsi si border="0", alors frame="void" et rules="none".

Par dfaut la taille du tableau s'ajuste son contenu. C'est

cette gestion particulire de la taille qui fait du tableau un
moyen trs utile de prsentation.

57 SAGAR Samya
La balise <caption>
Cette balise est facultative, et ne peut tre prsente
qu'une seule fois dans le tableau.
Son rle est de donner une lgende au tableau,
plus complte que le court rsum de l'attribut summary.

Attribut Effet Valeur

TOP : haut du tableau

align Alignement relativement au tableau.
BOTTOM : bas du tableau.

58 SAGAR Samya
Groupements de colonnes et ranges (1)
<col> et <colgroup>
Le rle fondamental de ces balises est de dfinir des
groupements de colonnes.

<col> permet plusieurs colonnes de partager les

mmes attributs. C'est un lment vide.
<colgroup> permet de regrouper un ensemble de
colonnes en une seule unit logique, et d'appliquer par
exemple un style cet ensemble de colonnes.
<colgroup> le fait de manire plus "structurelle".

59 SAGAR Samya
Groupements de colonnes et ranges (2)
<col> et <colgroup>
Les attributs communs <col> et <colgroup>.
Attribut Effet Valeur(s)
span Nombre de colonnes regrouper un nombre
une longueur, qui peut s'exprimer en nombre
width Largeur de chaque colonne de pixels, en pourcentage, ou bien par
exemple width="0.5*", en proportion relative
top: alignement en haut de la cellule
middle: alignement au milieu de la cellule
(valeur par dfaut)
valign alignement vertical
bottom: alignement en bas de la cellule
baseline: alignement sur la ligne du bas dela
cellule
left (valeur par dfaut)
right
center
align alignement horizontal
justify
char: l'alignement se fait sur un caractre
particulier
un caractre. La valeur par dfaut est celle du
sparateur dcimal dfini par l'attribut de
langage lang, savoir le "." pour la langue par
spcifie quel caractre doit servir de base
char dfaut, et le "," si l'attribut dfinit le franais
pour l'alignement comme langue (lang="fr"). Il n'est pas
demand aux navigateurs de supporter cet
attribut.
spcifie le dcalage en position
charoff horizontale impos au caractre un nombre.
d'alignement.
60 SAGAR Samya
Groupements de colonnes et ranges (3)
<col> et <colgroup> Exemples
Si on doit spcifier que quarante colonnes dans un tableau doivent tre
alignes droite, au lieu d'crire...
<colgroup>
<col width="20">
<col width="20">
... 20 lments col au total...
</colgroup>
... on peut se contenter d'crire...
<colgroup span="40" width="20">
</colgroup>
Quand il est ncessaire d'identifier une unique colonne sur ces quarante, par
exemple la dernire, on peut regrouper sous la forme...
<colgroup width="20">
<col span="39">
<col valign="top">
</colgroup>

61 SAGAR Samya
Groupements de colonnes et ranges (4)
Structure du contenu
Les balises <thead> et <tfoot>
Le rle de ces balises est de contenir les informations
ncessaires l'entte et au bas du tableau.
Il s'agit essentiellement des titres de colonnes.
Ces balises contiennent des lignes (voir le paragraphe
consacr la balise <tr> pour plus de dtails). Il est possible,
pour peu que l'on ait dclar la balise <thead>
(respectivement <tfoot>), de dupliquer l'entte
(respectivement le bas) d'un tableau en cas de saut de page.
Les attributs de ces balises sont les attributs d'alignement
des cellules (valign, align, char et charoff).

62 SAGAR Samya
Groupements de colonnes et ranges (5)
Structure du contenu
La balise <tbody>
Son rle est de dfinir le corps mme d'un tableau.
En dupliquant plusieurs <tbody> au sein d'un mme
tableau, on peut dfinir plusieurs composantes structurelles
d'apparences et de formats diffrents.
Les attributs de cette balise sont les attributs d'alignement
des cellules (valign, align, char et charoff).

63 SAGAR Samya
 Tableaux complexes (1)
Un certain nombre dattributs permettent de contrler plus
avant laspect du tableau.
En particulier, les attributs rowspan et colspan des lments TH
et TD permettent de crer des tableaux plus complexes en spcifiant
des cases qui stendent sur plusieurs ranges ou colonnes.
Exemple ...
On note que Vgtaux, bien quoccupant <TABLE>
<TR>
deux lignes ne doit apparatre, dans le code HTML, <TH ROWSPAN=2>Vgtaux
que dans la dfinition de la premire ligne. <TD>Fruits</TR>
<TR><TD>Fleurs </TD></TR>
Plusieurs points importants : </TABLE>
des cases de tableau peuvent tre vides ; ...

la dfinition ne doit pas provoquer de est reprsent de la faon suivante :

chevauchement de cases ;
Fruits
des tableaux peuvent tre imbriqus. Vgtaux
Fleurs

64 SAGAR Samya
Tableaux complexes (2) Les lignes
balise <tr>
Cette balise permet de dfinir une ligne dans le
tableau.
Les attributs de cette balise sont
les attributs d'alignement des cellules : valign, align,
char et charoff;
l'attribut bgcolor, dont la fonction est de spcifier la
couleur de fond de la ligne;
Elle peut contenir une ou plusieurs balises <th> ou
<td>.

65 SAGAR Samya
Tableaux complexes (3) Les balises
<td> et <th>
Ces balises acceptent les mmes contenus, ainsi que
les mmes attributs.
Cependant, <th> doit tre utilis pour indiquer des
cellules destines tre des enttes de colonnes.
Ces balises peuvent contenir peu prs tous les
types d'lments, y compris les <div> et les <p>.

66 SAGAR Samya
 Tableaux complexes (4) Les balises <td> et <th>
Attribut Effet Valeur(s)
abbr fournit un abrg du contenu de la cellule une chane de caractres
indique quelle catgorie appartient la
axis une chane de caractres
cellule.
renvoi (aux) l'identifiant(s) de la cellule
"header" associe. Cela permet un agent
headers une liste d'indentifiants (spars par des espaces)
vocal de prsenter le type de contenu de
la cellule avant le contenu proprement dit.
row: s'applique la ligne courante
col: s'applique la colonne courante
indique quel est le jeu de cellules auquel la rowgroup: s'applique l'ensemble du <thead>, <tfoot> ou
scope
cellule "header" courante s'applique <tbody> courant
colgroup: s'applique au groupe de colonnes courant (spcifi
par les balises <colgroup> ou <col>)
un nombre. La valeur par dfaut est 1. Si rowspan="0", la
nombre de lignes concernes par la balise cellule s'applique l'ensemble des lignes, depuis la ligne
rowspan
courante. courante jusqu' la dernire dans le <thead>, <tfoot> ou
<tbody> courant.
un nombre. La valeur par dfaut est 1. Si rowspan="0", la
nombre de colonnes concernes par la
colspan cellule s'applique l'ensemble des colonnes, depuis la ligne
cellule courante.
courante jusqu' la dernire du <colgroup>.
left (valeur par dfaut)
right
align alignement horizontal center
justify
char: l'alignement se fait sur un caractre particulier
67 SAGAR Samya
 Tableaux complexes (5) Les balises <td> et <th>
Attribut Effet Valeur(s)
un caractre. La valeur par dfaut est celle du sparateur
dcimal dfini par l'attribut de langage attr, savoir le "."
spcifie quel caractre doit servir de
char pour la langue par dfaut, et le "," si l'attribut dfinit le
base pour l'alignement
franais comme langue (attr="fr"). Il n'est pas demand aux
navigateurs de supporter cet attribut.
spcifie le dcalage en position
charoff horizontale impos au caractre un nombre.
d'alignement.
top: alignement en haut de la cellule
middle: alignement au milieu de la cellule (valeur par dfaut)
valign alignement vertical
bottom: alignement en bas de la cellule
baseline: alignement sur la ligne du bas de la cellule

empche le retour la ligne automatique

nowrap dans les cellules quand le bord de la valeur unique: nowrap
fentre du navigateur est atteint.

bgcolor couleur de fond de la cellule nom de couleur ou triplet RGB

width largeur de la cellule. nombre de pixels ou pourcentage

height hauteur de la cellule. nombre de pixels ou pourcentage

68 SAGAR Samya
Les images dans une page Web

69 SAGAR Samya
Les formats du Web
Pour limiter le temps de chargement, on s'est efforc trs tt d'utiliser des
formats d'images conduisant des fichiers de taille rduite. Les mthodes
reposent sur la compression de l'information transmettre.
Trois formats principaux sont accepts par la plupart des navigateurs.
Format GIF, GIF pour Graphic Interchange Format. Elle ne tolre pas plus
de 256 couleurs (2^8). C'est un format de compression sans perte, qui
est trs utilise pour le stockage et le transfert d'images.
Format JPEG, JPEG pour Joint Photographic Experts Group. Comme son
nom l'indique, JPEG a t dvelopp pour les images photographiques.
Ce format convient aux images obtenues partir de scanner ou d'un
appareil photo numrique. Mais il est dconseill pour les schmas et les
bannires.
Format PNG, pour Portable Network Graphics. Il s'agit d'un nouveau
format libre de tous droits, qui devrait supplanter GIF.

70 SAGAR Samya
La balise <img> (1)
Usage :
La balise <img> est le moyen le plus simple d'insrer une image dans
une page Web mais on pourra aussi lui prfrer la balise <object>
qui est d'un usage beaucoup plus gnral et qui permet d'insrer
d'autres objets multimdia.
Syntaxe minimale :
La balise fermante est facultative : de fait elle est toujours omise. La
syntaxe minimale est :
<img src="monimage.gif" alt="courte description">

L'attribut src comme SouRCe attend pour valeur une URL relative ou absolue.
L'attribut alt donne une courte description texte de l'image, qui peut s'afficher
fugacement au survol de la souris.

71 SAGAR Samya
 La balise <img> (2)
Attribut Effet Valeur(s)
src o trouver l'image afficher. Cet attribut est requis. une URL (relative ou absolue).
tiquette affiche la place de l'image si par exemple l'utilisateur a
alt une chane de caractres.
dsactiv l'affichage des images.
Renvoie vers un fichier contenant une "longue" description de
l'image. Permet d'amliorer l'accessibilit en offrant aux
longdesc une URL
malvoyants la possibilit de consulter une description dtaille
d'une image riche en information.
Largeur et hauteur rserves par le navigateur pour l'image dans la
nombre de pixels ou en
page Web. Permet de rserver cette place mme si l'image n'est
width et height pourcentage de la fentre du
pas encore charge. Par dfaut ces valeurs sont celles de l'image
navigateur.
(voir paragraphe suivant).
ismap Indique qu'il s'agit d'une image ractive "server-side" un boolen
usemap Indique qu'il s'agit d'une image ractive "cient-side" un boolen
left (valeur par dfaut)
right
Dtermine la position de l'image par rapport au texte qui top: l'alignement se fait par
l'entoure. L'image peut suivre le flot du texte ou tre enveloppe rapport au sommet de l'image.
align
par ce texte. Par dfaut la valeur est bottom. Cet attribut est bottom: l'alignement se fait par
obsolte en HTML strict. rapport au bas de l'image.
middle: l'alignement se fait par
rapport au centre de l'image.
paisseur de la bordure entourant l'image. Par dfaut zro. On ne
border un nombre
peut pas en choisir la couleur.
Dfinit une marge autour de l'image. hspace dfinit une marge
hspace 72
et vspace SAGAR Samya un nombre de pixels
droite et gauche. vspace dfinit une marge avant et aprs l'image.
La balise <figure>
En HTML5, on dispose de la balise <figure>.
<figure>
<img src="images/blocnotes.png" alt="Bloc-Notes"/>
</figure>
Une figure est le plus souvent accompagne d'une lgende. On utilise la balise
<figcaption> l'intrieur de la balise <figure>
<figure>
<img src="images/blocnotes.png" alt="Bloc-Notes" />
<figcaption>Le logiciel Bloc-Notes</figcaption>
</figure>
La balise <figure> a un rle avant tout smantique. Cela veut dire
qu'elle indique l'ordinateur que l'image a du sens et qu'elle est importante
pour la bonne comprhension du texte. Cela peut permettre un programme
de rcuprer toutes les figures du texte et de les rfrencer dans une table
des figures, par exemple.
73 SAGAR Samya
 Les feuilles de style (CSS 3)

74 SAGAR Samya
Gnralits (1)
Principe
l'origine le langage HTML est conu pour structurer le
document (titre, citation, exemple, adresse...)
qualifiant la nature du contenu
non pour prsenter le texte (gras, italique, en retrait, gros caractre...).
Au fil du temps, les crateurs de navigateurs se sont loigns
de ce point de dpart pour en arriver dfinir un langage de
prsentation.
Avec les feuilles de style, le consortium du W3C revient
cette conception initiale :
le HTML structure le texte,
La feuille de style le reprsente.

75 SAGAR Samya
Gnralits (2)
Concept
Dans un document d'une certaine importance, il arrive
frquemment que l'on attribue certains lments des
caractristiques de mise en forme identiques.
Par exemple, les noms de chapitres seront mis en police Arial, en
gras et en couleur bleue.
On peut imaginer que l'on puisse donner cette dfinition de mise
en forme un nom soit "titre" et qu' chaque nouveau chapitre, plutt
que d'crire chaque fois le nom du titre et puis de devoir le mettre
en Arial, gras, bleu, l'on puisse dire l'ordinateur, nom du chapitre
mais dans la mise en forme que j'ai dfini sous le nom de "titre".

Cette dfinition de mise en forme particulire, on va l'appeler feuille de

style.
76 SAGAR Samya
Gnralits (3)
Utilit et avantages
Sparation du contenu et de la mise en forme.
Cohsion de la prsentation tout au long du site avec les feuilles de style externes.
Modifier l'aspect d'un page ou d'un site sans en modifier le contenu et cela en quelques
lignes plutt que de devoir changer un grand nombre de balises.
Un "langage" neuf, comprhensible, simple et logique par rapport au Html et ses
diffrentes versions.
Une faon d'criture concise et nette par rapport au Html qui devient vite fouillis.
Rduire le temps de chargement des pages.
Palier certaines insuffisances du langage Html (contrle des polices, contrle de la
distance entre les lignes, contrle des marges et des indentations (sans devoir utiliser
de tableaux ou de balise <DD>...) et ainsi augmenter la crativit des crivains du Web.
Permettre le positionnement au pixel prs du texte et/ou des images sans passer par
les "layers".
En revanche, le support des feuilles de style, mme s'il est maintenant largement
rpandu parmi les navigateurs, laisse parfois dsirer.
77 SAGAR Samya
Gnralits (4)
Dfinition
CSS - Cascading Style Sheets, ou encore Feuille de style en
cascade.
Ce mot "cascade" fait rfrence la mthode de rsolution des conflits :
puisqu'on peut placer plusieurs feuilles de style dans un mme document (en
lien, dans le head, en ligne dans la balise) les instructions de style successives
peuvent s'opposer. Les ordres de style arrivent donc "en cascade".
Comment rsoudre les conflits ?
Comme pour le HTML : le dernier qui parle a raison. On aura donc la hirarchie :
feuille de style extrieure << feuille de style dans le head << style en attribut dans
la balise

Les spcifications des feuilles de style sont une

recommandation du consortium W3C depuis 1996.
La dernire version est celle du level 3

78 SAGAR Samya
Feuille de style interne (1)
Cest lincorporer de styles l'intrieur d'une page.
Soit :
A l'intrieur des balises <HEAD></HEAD>
Cette faon de procder est de loin la plus commune et la plus
logique. D'abord parce que les balises HEAD contiennent des
informations pour le browser et les feuilles de style appartiennent
celles-ci. Ensuite parce que l'on rejoint ainsi l'essence mme des
feuilles de style qui est de sparer les lments de mise en forme du
contenu.
A l'intrieur des balises <BODY></BODY>
Cette faon de faire nous parat illogique et peu conforme l'esprit
des feuilles de style qui est de dfinir un style dtermin valable pour
la globalit du document. Mais elle existe pour quelques utilisations
spcifiques
79 SAGAR Samya
 Feuille de style interne (2)
A l'intrieur des balises <HEAD></HEAD>
La balise <STYLE> avertit le navigateur que l'on <HTML>
va utiliser des feuilles de style. <HEAD>
L'attribut type="text/css" (obligatoire) informe <STYLE type="text/css">
que ce qui suit est du texte et qu'il s'agit de <!--
La ou les feuille(s)de style
cascading style sheets (css).
-->
La balise Html de commentaires <!-- ... --> </STYLE>
empche que les browsers qui ne connaissent </HEAD>
pas les feuilles de style, tentent d'interprter <BODY> (...) </body>
ces instructions. Les informations l'intrieur </html>
des tags de commentaires seront ignores par ces browsers.
Pour vos propres commentaires propos des feuilles de style, on utilisera la convention
dsormais classique (C, C++, Javascript...) de /* commentaires */.
L'attribut media permet de spcifier le type de media auquel la feuille de style est destine :
screen, la valeur par dfaut; tty, pour les "vieux" systmes d'affichage police de caractre fixe (comme
Lynx); tv, pour les afficheurs de type tlvision avec une faible rsolution; projection, pour les
projecteurs; handheld, pour les afficheurs de poche (avec un petit cran monochrome et une faible bande
passante); print, pour les imprimantes; braille, pour les "afficheurs" braille; aural, pour les navigateurs
synthse vocale; all, pour tous les systmes d'affichage.
80 SAGAR Samya
 Feuille de style interne (3)
A l'intrieur des balises <BODY></BODY>
<HTML>
<BODY>
<H1 style="font-family: Arial; font-style: italic"> blabla </H1>
</BODY>
</HTML>

Signalons :
que le style Arial, italique n'affectera que cette seule balise H1.
que la syntaxe est lgrement diffrente de la prcdente.
que l'criture : <STYLE type="text/css">H1 {font-family: Arial; font-
style: italic }</STYLE> fonctionne aussi.

81 SAGAR Samya
 Feuille de style externe
Dfinir une prsentation de style valable pour plusieurs pages et mme pour
toutes les pages d'un site.
En crant une page externe qui regroupera toutes les feuilles de style, et en reliant chaque
page cette page de style.
<HTML>
On cre d'abord, dans le rpertoire du site, <HEAD>
un fichier avec l'extension .css soit styles.css
-- Les diffrentes feuilles de style --
</HEAD>
qui contiendra toutes les feuilles de style. <BODY> (...) </body>
</html>
Ensuite, on cre une page normale soit
page1.html (ici dans le mme rpertoire que le fichier styles.css).
La balise <LINK> avertit le
<HTML>
Browser qu'il faudra raliser <HEAD>
un lien. <LINK rel=stylesheet type="text/css" href="styles.css">
L'attribut rel=stylesheet </HEAD>
(sans s et sans guillemets) prcise qu'il y trouvera une feuille de style externe.
L'attribut type="text/css" prcise que l'information est du texte et du genre cascading
style sheets (css).
L'attribut classique de lien href=" ... " donne le chemin d'accs (ou URL) et le nom du
fichier lier.
82 SAGAR Samya
 Dfinition dun style (1)
Syntaxe Une feuille de style est une suite de rgles.
slecteur {
proprit_de_style1:valeur1;
proprit_de_style2:valeur2;
...
proprit_de_styleN:valeurN;
}

Une rgle a donc deux parties :

Un slecteur;
Une dclaration ; c'est une suite de paires proprit:valeur spares par un point
virgule, le tout plac entre accolades.
Les proprits de style sont entoures par des "{" et pas des [ ou des parenthses.
Le couple "proprit de style/valeur" est spar par un double-point (:).
Chaque couple "proprit de style/valeur" est spar par un point-virgule (;).
Il n'y a pas de limite pour le nombre de couples "proprits de style/valeur".
L'espace entre proprits de style et valeur n'est pas obligatoire mais aide fortement la
lisibilit du code source.
On peut attribuer plusieurs valeurs une mme proprit. Dans ce cas, on sparera les
diffrentes valeurs par des virgules.
83 SAGAR Samya
 Dfinition dun style (2) Slecteurs simples
Balise
Il s'agit du slecteur le plus simple possible.
p
{
text-align: justify;
color: black;
}

On peut attribuer un mme style plusieurs balises (spares par des virgules).
H1, H2, H3 {font-family: Arial; font-style: italic}

h2, h3, ul
{
text-align: center;
color: green;
}

Dans cet exemple, tous les titres de niveaux 2 et 3 et les listes seront centrs et
de couleur verte.

84 SAGAR Samya
 Dfinition dun style (3) Slecteurs simples
Classe
On dsire parfois affecter des styles diffrents une mme balise.
balise.nom_de_classe {proprit_de_style: valeur}

Affecter un mme style diffrentes balises.

.nom_de_classe {proprit_de_style:valeur}

L'emploi du point (.) devant le nom de classe est indispensable.

Pour appeler l'effet de style dans le document, on ajoute le nom de la classe la balise en
utilisant lattribut class. L'attribut class est un attribut qui peut apparatre dans n'importe
quelle balise. <balise class="nom_de-classe"> .... </balise>
Exemple:
Je souhaite mettre ce qui est important dans le texte en gras et en bleu. Je cre la classe .essentiel :
.essentiel { font-weight: bold; font-color: #000080 }

<P class="essentiel"> ... blabla ... </P>

Et dans le document Html, <H1 class="essentiel">Titre 1</H1>
il suffit d'appeler la classe .essentiel <TABLE><TR><TD
quand cela se rvle ncessaire : class="essentiel">cellule</TD></TD>...
85 SAGAR Samya
 Dfinition dun style (4) Slecteurs simples
Identifiant
Les ID fonctionnent exactement comme les classes. L'attribut id est un attribut
qui peut aussi apparatre dans n'importe quelle balise.
La trs grande diffrence avec l'attribut class est qu'une valeur de id ne peut tre
prise qu'une seule fois dans toute la page Web. C'est un identifiant : par nature,
sa valeur est unique.
La syntaxe est :
#nom_de_ID {proprit_de_style:valeur}

Et pour l'appeler :
<balise id="nom_de_ID"> .... </balise>

86 SAGAR Samya
 Dfinition dun style (5) Slecteurs simples

<p id="monpar">Ceci est un paragraphe #monpar, #monimage

d'introduction</p> {
<table id="montableau"> color: red; border: solid 0.5em blue;
<tr> }
<td>Et voici</td> #montableau
<td id="cellule12">un</td> {
<td>tableau</td> background-color: fuchsia;
</tr> }
<tr> #monimage
<td id="cellule21">de deux {
lignes</td> background-color: yellow;
<td>et</td> }
<td id="cellule23">trois #cellule12
colonnes</td> {
</tr> color: orange;
</table> }
<ol id="maliste"> #maliste
<li>Et ceci</li> {
<li id="item2">est une</li> background-color: yellow; color:
<li>liste</li> orange;
</ol> }
<img src="images/chapeaurond.gif" #item2, #cellule21
alt="Vive la Bretagne!" height="20" {
width="40" id="monimage"> font-variant: small-caps;
font-style: oblique;
87 } SAGAR Samya
 Dfinition dun style (6) Slecteurs complexes
Slecteur contextuel
h2 em {color: blue;}

Cette rgle ne s'appliquera que sur le contenu des balises <em> lorsqu'elles
seront elles-mmes l'intrieur d'un titre de niveau 2 (<h2>). En paraphrasant : la
consigne s'applique aux balises <em> dans le contexte d'une balise <h2>.
Syntaxe : les slecteurs simples sont spars par des espaces. L'enchssement
est possible avec tous les types de slecteurs, balise, identifiant, classe.
.copyright h4 {color: blue;}
#toto b {font-size: large;}
ul ul {list-style: lower-alpha;}

Les regroupements (signifis par le sparateur virgule) restent possibles :

h1 b, h2 b, b em
{
color: yellow;
}

88 SAGAR Samya
 Dfinition dun style (7) Slecteurs complexes
Pseudo-classes
Nous allons prendre l'exemple des liens. Un lien peut tre dans trois
tats diffrents :
actif (lors du clic de la souris) ;
a:link
visiter ; { color: blue;
dj visit. font-style: italic; }

Pour les ancres <a>, on appelle

a:visited
pseudo-classes ces 3 tats possibles. { color: green;
Ce sont des classes prdfinies. font-weight: bold; }

a:active
{ text-decoration: overline; }
La syntaxe est donc
[selecteur]:[pseudo-classe] {declaration}

89 SAGAR Samya
 Dfinition dun style (8) Slecteurs complexes
Pseudo-lments
CSS dcrit plusieurs pseudo-lments :
first-line modifie le style de la premire ligne d'un paragraphe.
first-letter modifie le style de la premire lettre d'une phrase.
first-child modifie le style du premier lment-enfant du slecteur
courant.
after modifie le style de ce qui suit l'lment.
before modifie le style de ce qui prcde l'lment.
Les trois derniers sont peu ou pas supports.

90 SAGAR Samya
<SPAN> et <DIV> (1)
Utilit
Penser un systme pour "dconnecter" certains
morceaux de paragraphe ou plusieurs paragraphes de
cette logique d'criture avec des feuilles de style.
Ce sont respectivement les balises SPAN et DIV qui
craient ainsi des petits blocs particuliers dans le
document sans devoir repasser par les lments
structurels du Html classique.
Notons que SPAN et DIV s'utilisent toujours avec les
classes et les ID.

91 SAGAR Samya
<SPAN> et <DIV> (2)
SPAN
La balise <SPAN> ... </SPAN> permet d'appliquer des
styles des lments de texte d'un paragraphe ou si vous
prfrez un morceau de paragraphe.
<HTML>
<HEAD>
<STYLE type="text/css">
.element{font-size: x-large; color: navy}
</STYLE>
</HEAD>
<BODY>
<P>Un monde de <SPAN class=element>gants</SPAN>.</P>
</BODY>
</HTML>

92 SAGAR Samya
<SPAN> et <DIV> (3)
DIV
La balise <DIV> ... </DIV> permet de regrouper
plusieurs paragraphes ou si vous prfrez, de dlimiter une
zone comportant plusieurs paragraphes.
<HTML>
<HEAD>
<STYLE type="text/css">
.zone{font-size: x-small}
</STYLE>
</HEAD>
<BODY>
<DIV class=zone>
<P>Commentaire :</P>
<P>N'oubliez pas l'attribut class!</P>
</DIV>
</BODY> </HTML>
93 SAGAR Samya
Positionner avec CSS (1)
Position absolue ou relative
La position absolue {position: absolute} se dtermine
par rapport au coin suprieur gauche de la fentre du
browser.
Les coordonnes de ce point sont top=0 et left=0.
Les coordonnes d'un point s'expriment en pixels, de
haut en bas pour top et de gauche droite pour left.
Prcisons que l'on utilisera presque toujours le positionnement
absolu car plus facile et plus sr.

94 SAGAR Samya
Positionner avec CSS (2)
Positionner du texte
Plaons en position absolue le texte "Publication Html" 50
pixels du haut de la fentre (top) et 150 pixels gauche
(left). <HTML>
<HEAD>
<STYLE type="text/css"> <!--
.pub { position: absolute; top: 100px; left: 25px;
color: yellow; font-size: x-large;
font-weight: bold;} -->
</STYLE>
</HEAD>
<BODY>
<DIV class=pub> Publication Html </DIV>
</BODY>
</HTML>

95 SAGAR Samya
Positionner avec CSS (3)
Positionner une image
Plaons l'image htmlplus.gif en position absolue 50
pixels de haut de la fentre (top) et 100 pixels gauche
(left). Les dimensions de l'image sont width=242 et
height=84.
<HTML>
<BODY>
<span style="position: absolute; top: 50px;
left: 100px; width: 242px; heigth: 84px;">
<IMG src="htmlplus.gif">
</span>

</BODY>
</HTML>

96 SAGAR Samya
 Units (1)
Syntaxe
Il ne faut laisser aucun blanc entre le nombre et l'unit.
Une longueur peut tre prcde d'un signe + ou
Units absolues de longueur
Unit Notation Conversion
h1 { margin: 0.5in;}
inch (pouce) in 1in=2,54cm
h2 { line-height: 3cm;}
centimtre cm
h3 { word-spacing: 4mm;}
millimtre mm h4 { font-size: 12pt;}
point pt 1pt=1/72in=0,352778mm h5 { font-size: 1pt; }
pica pc 1pc=12pt=4,233mm

Le point et le pica sont utiliss pour la taille des

caractres.
97 SAGAR Samya
 Units (2)
Units relatives de longueur
Unit Notation Conversion
1em est la hauteur d'un caractre (si la hauteur d'un h1{margin: 0.5em;}
em em caractre est fixe par l'auteur 10pt alors
1em=10pt, si elle est fixe 12pt alors 1em=12pt). h2{line-height:1ex;}
x-height ex 1ex est la taille de la lettre 'x' minuscule.
h3{font-size:15px; }
1pixel (picture element) : le plus petit lment sur
pixel px un cran d'ordinateur.Elle dpend de l'cran et de
son paramtrage.

Pourcentages
C'est une fraction de la longueur d'un autre lment : largeur
de l'cran, hauteur des caractres ou toute autre grandeur
dpendant du contexte.
L'interligne des paragraphes vaut 120% p {line-height:
120%;}
de la hauteur des caractres, tandis que
les cellules de classe gauche occuperont 33% td.gauche {width:
de la largeur du tableau o elles se trouvent. 33%;}

98 SAGAR Samya
Units (3)
Couleurs
Les couleurs se codent de la mme manire qu'en HTML,
mais il est galement possible de spcifier explicitement
le codage RGB :
une des seize couleurs standard : aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white et yellow.
#rrggbb (par exemple, #00cc00).
#rgb (par exemple, #0c0).
rgb(x1,x2,x3), o x1, x2 et x3 sont des entiers compris entre 0 et 255
inclus (par exemple rgb(33,45,127)).
rgb(x%,y%,z%) o x, y et z sont des nombres compris entre 0.0 et 100.0
inclus (par exemple rgb(56%,33%,0%)).

99 SAGAR Samya
 html 5 et les nouvelles balises

100 SAGAR Samya

<header> : l'en-tte
La plupart des sites web possdent en gnral un en-tte, appel
header en anglais. On y trouve le plus souvent un logo, une bannire,
le slogan de votre site
Ces informations sont placer lintrieur de la balise <header>

<header>
<!-- Placez ici le contenu de l'en-tte de votre
page -->
</header>

L'en-tte peut contenir tout ce que vous voulez : images, liens,

textes
Il peut y avoir plusieurs en-ttes dans votre page. Si celle-ci est
dcoupe en plusieurs sections, chaque section peut en effet avoir
son propre <header>.
101 SAGAR Samya
<footer> : le pied de page
l'inverse de l'en-tte, le pied de page se trouve en
gnral tout en bas du document.

On y trouve des informations comme des liens de

contact, le nom de l'auteur, les mentions lgales, etc.

<footer>
<!-- Placez ici le contenu du pied de page -->
</footer>

102 SAGAR Samya

<nav> : principaux liens de navigation
La balise <nav> doit regrouper tous les principaux liens
de navigation du site. Vous y placerez par exemple le
menu principal de votre site.
Gnralement, le menu est ralis sous forme de liste
puces l'intrieur de la balise <nav>.

<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

103 SAGAR Samya

<section> : une section de page
La balise <section> sert regrouper des contenus en
fonction de leur thmatique. Elle englobe gnralement
une portion du contenu au centre de la page.

<section>
<h1>Ma section de page</h1>
<p>Bla bla bla bla</p>
</section>

104 SAGAR Samya

<aside> : informations complmentaires
La balise <aside> est conue pour contenir des
informations complmentaires au document que l'on
visualise.
Ces informations sont gnralement places sur le ct
(bien que ce ne soit pas une obligation).
<section>
<h1>Ma section de page</h1>
<p>Bla bla bla bla</p>
</section>

Il peut y avoir plusieurs blocs <aside> dans la page.

105 SAGAR Samya

<article> : un article indpendant
La balise <article> sert englober une portion
gnralement autonome de la page.
C'est une partie de la page qui pourrait ainsi tre reprise
sur un autre site. C'est le cas par exemple des actualits
(articles de journaux ou de blogs).
<article>
<h1>Mon article</h1>
<p>Bla bla bla bla</p>
</article>

106 SAGAR Samya

107 SAGAR Samya
 <!DOCTYPE html>
<html> <head> <meta charset="utf-8" />
<title>Zozor - Le Site Web</title> </head>
Exemple <body>
<header>
<h1>Zozor</h1>
<h2>Carnets de voyage</h2>
</header>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">CV</a></li>
</ul>
</nav>
<section>
<aside>
<h1> propos de l'auteur</h1>
<p>C'est moi, Zozor ! Je suis n un 23 novembre
2005.</p>
</aside>
<article>
<h1>Je suis un grand voyageur</h1>
<p>Bla bla bla bla (texte de l'article)</p>
</article>
</section>
<footer>
<p>Copyright Zozor - Tous droits rservs<br />
<a href="#">Me contacter !</a></p>
</footer>
108 </body> </html> SAGAR Samya
balises multimdia (1)
Il est possible de placer directement de la vido dans les
pages laide de la balise <video>.
Attention, il faut prvoir les sources en 3 formats (mp4,
ogg, webm). et il faut mettre le nom du fichier vido et le
type afin davoir une totale compatibilit
(ex : zlack.mp4video.mp4 ou c-dicount-export.webmvp8.ogg).
Les vidos doivent avoir des dimensions (largeur, hauteur)
multiple de 16 pour lencodage en mp4.
Lencodage peut seffectuer avec miro converter :
http://www.mirovideoconverter.com/
Attention il faut renommer le fichier ogg lextension par
dfaut est .ogv remplacer par .ogg.
109 SAGAR Samya
balises multimdia (2)
Les attributs de la balise <video>.
Attribut Effet Valeur(s)
afin de boucler sur tous les
onended navigateurs
this.play()

lancement automatique de
autoplay votre vido
boolen

controls afficher la barre de lecture boolen

afficher une image avant le

poster URL
lancement de la vido

<video width="400" height="300" autoplay

onended="this.play()"
controls poster="images/poster.jpg"></video>

110 SAGAR Samya

balises multimdia (3)
Intgration de son (.mp3) avec la balise <audio>.
Pour diffuser de la musique ou n'importe quel son, il existe de
nombreux formats:
MP3 : C'est l'un des plus vieux, mais aussi l'un des plus compatibles (tous
les appareils savent lire des MP3), ce qui fait qu'il est toujours trs utilis
aujourd'hui.
AAC : utilis majoritairement par Apple sur iTunes, c'est un format de
bonne qualit. Les iPod, iPhone et autres iPad savent les lire sans
problme.
OGG : le format Ogg Vorbis est trs rpandu dans le monde du logiciel
libre, notamment sous Linux. Ce format a l'avantage d'tre libre, c'est--
dire qu'il n'est protg par aucun brevet.
WAV (format non compress) : vitez autant que possible de
l'utiliser car le fichier est trs volumineux avec ce format. C'est un
peu l'quivalent du Bitmap (BMP) pour l'audio.
111 SAGAR Samya
La balise <canvas>
Il sagit dune balise dterminant une zone dans la page.
Il est possible laide de scripts (notamment javascript
ou ajax) de dessiner des formes dans cette zone et de les
animer ce qui peut permettre de la ralisation
danimations complexes ou de jeux.
Il est noter que la balise canvas peut tre couple au
standard WebGL de rendu graphique 3D.

112 SAGAR Samya

 Gestion CSS 3

113 SAGAR Samya

Introduction
Il faut ajouter dans votre CSS, la proprit suivante, afin que les navigateurs
affichent les balises html5 :
article, aside, details, figcaption, figure, footer,
header, hgroup, menu, nav, section, video
{ display:block;}
Les proprits CSS3 permettent dimplmenter des styles graphiques
jusqualors inaccessibles. Nanmoins, d aux diffrents types de navigateurs,
il est ncessaire de dclarer les proprits plusieurs fois dans vos css afin
de pouvoir tre compatible sur la plupart des navigateurs.
Chaque navigateur choisit de prendre en charges certaines proprits, aussi
pour vous assurer quelles seront interprtes par tous les navigateurs, il faudra
utiliser les prfixes et toujours spcifier la valeur non prfixe en dernier de
manire sassurer dune compatibilit prenne lorsque les navigateurs
volueront dans leur gestion des rgles ccs3.
Les prfixes Prfixe Navigateur
-webkit- Google Chrome 10 et + ainsi que pour Apple Safari 5.1 et +
-moz- firefox 3.6 et +
-ms- ie10 et +
114 Opra 11.10 et +
SAGAR Samya
-o-
 Les solutions graphiques (1)
Les dgrads
gradient est une proprit de background-image.
background-image: linear-gradient([param1], [param2 param3],
[param4 param5]);
Gestion des paramtres :
param1 : Il sagit de la position de dpart du dgrad (la position darrive est forcment
loppos de celle de dpart. Il est tout fait possible de combiner deux positions dpart,
par exemple top left, loppos sera donc bottom right).
param2 : Il sagit de la dclaration de la couleur de dpart du dgrad.
param3 : Il sagit du pourcentage correspondant ltendue de la couleur.
Attention, Il est noter que les param 2 et 3 ne sont pas spars par des virgules.
param4 : Il sagit dans un dgrad deux couleurs de la seconde composante du dgrad.
param5 : Il sagit de ltendu de la couleur dclare en param3.
background: -moz-linear-gradient(top, #b8988b 50%, #3b3036
100%);
background: -webkit-gradient(linear, left top, left bottom,
from(#b8988b), to(#3b3036));
115 SAGAR Samya
Les solutions graphiques (2)
Les coins arrondis
La proprit border-radius permet dsormais darrondir les
coins des diffrentes balises html de contenu.
Son utilisation est trs simple, il faut bien sr pour une bonne
compatibilit la dclarer laide des diffrents prfixes prvus
cet effet.
Par dfaut la proprit attend quatre paramtres qui
correspondent la valeur de rayon du coin en pixel. Les
paramtres se dclarent dans le sens des aiguilles dune
montre ce qui donne lordre suivant :
top-left, top-right, bottom-right, bottom-left

116 SAGAR Samya

117 SAGAR Samya