Vous êtes sur la page 1sur 53

Formation en Dveloppement WEB

[Le Web Statique]


HTML, CSS, et JavaScript

Formation en Dveloppement WEB

10/03/2015

Plan Le WEB statique


1-Les bases du WEB
Lhistoire du Web
Les bases de HTML
Les bases de CSS
Les bases de JavaScript
2-Le HTML 5
Vue densemble
HTML 5 vs XHTML1.1
Navigation et Support
lments et Attributs
Les formulaires
Audio et Vidos
Les canevas

3-Le CSS 3
Vue densemble
Les principales proprits de CSS 3
Les prfixes de navigateur
Les transitions
Les bordures
Les arrire-plans multiples
4-jQuery Ecrire moins et faire Plus
Premiers pas avec jQuery
Les Slecteurs
Le vnements
Les Effets
Ajax / json
La bibliothque jQuery UI

Formation en Dveloppement WEB

10/03/2015

Plan Le WEB dynamique


Partie 1 PHP : Les bases de PHP

Partie 2 PHP : Les aspects avancs

PHP : Raisons du succs


Traitement des sessions
Langages concurrents de PHP
Les expressions rgulires
PHP : Historique
Scurits des applications web
Structure dun script PHP
TP : Langage PHP partie 2
Les types de donnes et variables
Tests conditionnels, Les boucles et les
Partie 3 PHP : Les Concepts Orient Objet
Fonctions
Classe et Objet
Tableaux scalaires et Tableaux
La visibilit
multi-dimentionnel
Lhritage
Etape dexploitation des formulaires
Classe abstraite
Rcupration des paramtres
Interface
Architecture MySQL
La srialisation des objets
PHP et MySQL
TP : Langage PHP partie 3
PHP MyAdmin
Les fichiers : lecture, criture, dplacement et
suppression
TP : Langage PHP partie 1

Formation en Dveloppement WEB

10/03/2015

Plan Le WEB dynamique avanc


Framework Symfony2

Architecture MVC
Architecture de Symfony2
Les bundles
Routing dans Symfony2
Contrleur
Templating avec Twig
Les formulaires dans Symfony2
Scurit et gestion des utilisateurs
Linternationalisation et la localisation
Dploiement des applications

Formation en Dveloppement WEB

10/03/2015

Lvolution du Web et de HTML


Lre du Web 1.0(90s) s'est construite autour
d'une forme pyramidale. Les webmasters
rdigent et envoient des informations vers les
internautes sans que ces derniers puissent
rellement interagir avec le site web.
Lre du Web 2.0(2000s) les usagers entrent
dans un mode actif : au fur et mesure de leur
navigation, les utilisateurs ajoutent du contenu,
et contribuent a la richesse des sites web.
Le web de lavenir ou Le web 3.0 est un
concept en pleine volution qui a fait son
apparition dans les annes 2008.

Formation en Dveloppement WEB

10/03/2015

Lvolution du Web et de HTML


Le langage HTML1.0 a t dvelopp initialement
par Tim Berners-Lee(1989), Il a rapidement connu un
vif succs grce au navigateur Mosaic.

La spcification HTML 2.0 (RFC 1866 de novembre


1995) a vu le jour sous le contrle de lIETF
(Internet Engineering Task Force)
Le groupe de travail HTML du W3C (World Wide Web
Consortium) diffuse en janvier 1997 la spcification HTML
3.2, qui apporte plusieurs amliorations et modifications

HTML 4, un progrs immense. Ses principales innovations


concernent linternationalisation, laccessibilit, les tableaux, les
documents composs, les feuilles de style, et les scripts.
HTML5 est la dernire rvision majeure d'HTML
disponible depuis 2011, Le W3C vise une finalisation
de la spcification en 2014

Formation en Dveloppement WEB

10/03/2015

Fonctionnement du web
Le Protocole HTTP
Le protocole de transfert hypertexte http (HyperText Transfer Protocol), de la
couche application du modle OSI (Open Systems Interconnection), est le
langage commun entre logiciels clients (navigateurs) et serveurs Web.
Il est utilis pour la plupart des transactions du Web : requte d'une ressource,
envoi de donnes d'un formulaire, navigation...
Communication entre navigateur et serveur
La communication entre le navigateur et le serveur se fait en deux temps :

Formation en Dveloppement WEB

10/03/2015

Fonctionnement du web
Communication entre navigateur et serveur
Requte du navigateur(Client)
Soit l'URL demande par un utilisateur :
http://www.serveur.ma/. Voyons quoi ressemble
la requte du navigateur au serveur
GET / HTTP/1.1
Accept: image/gif, image/jpeg, */*
Accept-Language: en-US
Accept-encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT)
Host: www.serveur.me
Connection: Keep-Alive

Formation en Dveloppement WEB

10/03/2015

Fonctionnement du web
Communication entre Client et Serveur

GET / HTTP/1.1
Accept: image/gif, image/jpeg, */*
Accept-Language: en-US
Accept-encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT)
Host: www.serveur.me
Connection: Keep-Alive

Ligne par ligne, cette requte veut dire :


1. Il s'agit d'une requte GET, associe la version 1.1 du protocole HTTP. Cette requte
permet de rcuprer une ressource. Il en existe d'autres : HEAD (informations sur la
ressources uniquement), POST (on fournit des informations au serveur),... Le slash qui
suit GET indique l'URL absolue de la ressource.
2. Le client peut rcuprer en particulier des images gif et jpeg, mais en fait n'importe
quel autre type MIME (des en-ttes dcrivant le contenu du message en utilisant un
codage */* exemple: text/plain, multipart/mixed).
3. Le langue de prfrence.
4. Le client sait interprter une rponse qui serait compresse avec GZIP.
5. Le navigateur est MSIE 5.01 !
6. Rappelle l'adresse littrale du serveur.
7. La connexion restera ouverte aprs cette requte, jusqu' ce que le client demande de
la clturer.
Formation en Dveloppement WEB

10/03/2015

Fonctionnement du web
Communication entre navigateur et serveur
Rponse du serveur
La rponse du serveur sera par exemple la
suivante :
HTTP/1.1 200 OK
Date: Sun, 14 Apr 2004 09:30:12 GMT
Server: Apache-/1.3.6 (Unix)
Last-Modified: Sun, 14 Oct 2003 09:29:32 GMT
ETag: "57d44-122-3cb64bfc"
Accept-Ranges: bytes
Content-Length: 278
Connection: Close
Content-Type: text/html

Formation en Dveloppement WEB

10/03/2015

Fonctionnement du web
Communication entre navigateur et serveur

HTTP/1.1 200 OK
Date: Sun, 14 Apr 2004 09:30:12 GMT
Server: Apache-/1.3.6 (Unix)
Last-Modified: Sun, 14 Oct 2003 09:29:32 GMT
ETag: "57d44-122-3cb64bfc"
Accept-Ranges: bytes
Content-Length: 278
Connection: Close
Content-Type: text/html

Ligne par ligne, cette requte veut dire :


1. Le serveur rpond lui aussi en HTTP 1.1, avec un message OK, associ au code 200.
404 Not Found; il y en a d'autres : 302 Moved Temporarily, 401 Unauthorized, 500
Server error,...
2. La date actuelle du serveur par rapport l'heure de Greenwich (GMT).
3. Le logiciel serveur est Apache 1.3.6 sous Unix.
4. La date de dernire modification de document.
5. Un tag d'entit, c'est un numro unique qui identifie la ressource sur le serveur, et
est aussi utilis pour exploiter des donnes en cache.
6. Le serveur peut renvoyer des contenus binaires.
7. La taille en octets du document HTML qui suit...
8. La connexion sera ferme aprs l'envoi des donnes.
9. un document de type MIME text/html, donc un fichier HTML qui est envoy.
10. Enfin, le code HTML.
Formation en Dveloppement WEB

10/03/2015

Les bases de HTML

Les bases de HTML


HyperText Markup Language

Formation en Dveloppement WEB

10/03/2015

Les bases de HTML - Introduction


Le langage HTML (HyperText Markup Language) est un langage de balisage (dit aussi
langage de marquage), dvelopp initialement par Tim Berners-Lee il permet de
structurer le contenu des pages web dans diffrents lments (en-ttes, paragraphes,
listes, liens hypertextes, etc..).
Il peut tre cr et trait par de nombreux outils, depuis des diteurs de texte simples
jusqu des outils ddis sophistiqus WYSIWYG (What You See Is What You Get).
En HTML, chaque lment doit tre renferm dans un lment.

Formation en Dveloppement WEB

10/03/2015

Les bases de HTML - Les lments et attributs


En HTML, chaque lment un nom dtermin et la liste des lments utilisables est
limitative et clairement dfinie dans la DTD (Document Type Definition) lie la version
utilise du langage.
quelques exceptions prs, un lment HTML a la structure suivante :
<nom_element> Contenu </nom_element>

Formation en Dveloppement WEB

10/03/2015

Les bases de HTML - Les lments et attributs


Les caractristiques de chaque lment peuvent tre prcises par des informations
complmentaires que lon dsigne en tant quattributs de llment.
Les attributs dun lment sont toujours dfinis dans la balise douverture et doivent tre
spars les uns des autres par au moins une espace, Chaque attribut doit avoir une valeur.
La prsence de certains attributs est obligatoire dans quelques lments particuliers.
La syntaxe conforme dun lment ayant des attributs est donc la suivante :

<nom_element attribut1="valeur1" attribut2="valeur2" > Contenu </nom_element>

Formation en Dveloppement WEB

10/03/2015

Les bases de HTML - Les attributs de base


Dans leur quasi-totalit, les lments disponibles en HTML ont en commun un ensemble
dattributs ayant chacun le mme rle. Ces attributs se rpartissent en trois catgories.

Les attributs courants (noyau): id, class, title, style


Ils sappliquent quasiment tous les lments

Les attributs dinternationalisation: lang, dir

Il permet de dcrire la langue et le sens de lecture du contenu

Les attributs de gestion dvnements: Ces attributs permettent de grer les vnements
dont un lment peut tre le sige et qui sont crs par lutilisateur. Leur contenu est un script
cot client

Formation en Dveloppement WEB

10/03/2015

Les bases de HTML - Structure gnrale dun document HTML

Formation en Dveloppement WEB

10/03/2015

Les bases de HTML - Structure gnrale dun document HTML

Nous retrouvons bien dans cet exemple la structure arborescente dun document
HTML valide.
Llment racine, au sens XML du terme, est <html>, et il inclut les lments <head>
et <body>. Llment <head> contient llment <title>, qui est obligatoire, et
llment <body>, qui ne doit pas tre vide (ce qui est vident). Du point de vue
hirarchique, <html> est bien le parent ou lanctre de tous les autres.

Formation en Dveloppement WEB

10/03/2015

Les bases de HTML - Structure gnrale dun document HTML


Llment racine <html>
Cest llment <html> qui est llment racine du document, au sens XML du terme.
Cest donc lui qui est le parent de tous les autres lments
Len-tte dun document : llment <head>
Llment <head> englobe un certain nombre dinformations utiles au bon affichage de
la page web. Ces informations sont contenues dans six lments diffrents qui ont
chacun un rle bien dtermin. Il sagit des lments <base>, <link>, <meta>, <script>,
<style> et <title>
Le corps du document : llment <body>
Llment <body> est le conteneur de lensemble des lments textuels et graphiques
dune page web.

Les commentaires
Comme tout code informatique dailleurs, pour en permettre une meilleure
comprhension, en particulier quand on souhaite le relire un certain temps aprs lavoir
crit. Exemple : <!--votre commentaire-->
Formation en Dveloppement WEB

10/03/2015

Les bases de HTML Votre premire page HTML


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ma premiere page HTML</title>
</head>
<body>
<h1>Bonjour tout le monde!</h1>
<hr color="red" />
</body>
</html>

Formation en Dveloppement WEB

10/03/2015

Les bases de HTML Les titres


Niveaux de titre
Le langage HTML dfinit 6 niveaux de titre (en anglais heading), afin de dfinir une
structuration hirarchique des paragraphes dans un texte :

Formation en Dveloppement WEB

10/03/2015

Les bases de HTML Paragraphes


Paragraphes
Le langage HTML considre les paragraphes comme des blocs de texte. Les navigateurs
rpartissent au mieux leur contenu dans la fentre.
Espaces
A l'intrieur d'un paragraphe, les espaces, tabulations comptent pour un seul espace.
La mise en page par blocs de texte est ralise par l'intermdiaire de la paire de balises
<p> et </p>. Cette balise accepte n'importe lequel des attributs vus prcdemment.
Retour chariot
Le retour chariot (retour la ligne simple) est ralis grce la balise<br>.
On peut aussi insrer une ligne horizontale grce la balise <hr>.

Formation en Dveloppement WEB

10/03/2015

Les bases de HTML Les Liste s(UL LI - OL LI - DL DT DD)


Une liste est un paragraphe structur contenant une suite d'articles. Le langage HTML
dfinit trois types de listes :
La liste non ordonne ;
La liste ordonne ;
La liste de dfinition.
Liste simple non ordonne
Une liste doit tre encadre par le conteneur UL et chaque item doit tre introduit par la
balise LI. Le conteneur provoque une tabulation.
Syntaxe :
<UL>
<LI>item n1</LI>
<LI>item n2</LI>
<LI>item n3</LI>
</UL>

Par dfaut, les puces d'une liste non ordonne sont


des disques pleins. On peut les modifier avec
l'attribut TYPE qui peux prendre les valeurs : square
(carr plein), circle (cercle), disc (rond plein).

Formation en Dveloppement WEB

10/03/2015

Les bases de HTML Les Liste s(UL LI - OL LI - DL DT DD)


Liste ordonne
Une liste ordonne doit tre encadre par le conteneur OL et chaque item doit tre
introduit par la balise LI.
La numrotation est par dfaut les chiffres arables. On peut en changer avec l'attribut
TYPE qui peut prendre les valeurs suivantes : [1,a,A,i,I].
La numrotation d'une liste ordonne commence par dfaut par le premier lment du
type de la numrotation choisie. Mais on peut contraindre la numrotation commencer
au ime lment grce l'attribut START.

Syntaxe :
<OL TYPE="i" START="8">
<LI>item n1</LI>
<LI>item n2</LI>
<LI>item n3</LI>
</OL>

Formation en Dveloppement WEB

10/03/2015

Les bases de HTML Les Liste s(UL LI - OL LI - DL DT DD)


Liste de termes avec dfinitions
Une telle liste est encadre par le conteneur DL et contient une liste de termes spcifis
par la balise DT. Un terme ayant lui-mme une liste de dfinitions chacune introduite par la
balise DD.
Syntaxe :
<DL>
<DT>terme n1
<DD>dfinition n1</DD>
<DD>dfinition n2</DD>
</DT>
<DT>terme n2</DT>
<DD>dfinition n1</DD>
</DL>

Formation en Dveloppement WEB

10/03/2015

Les bases de HTML Les images


On insert une image dans une page HTML avec la balise <IMG> dont les attributs sont

NAME : le nom de l'image (ncessaire pour le JavaScript) SRC : l'adresse (relative ou


absolue) de l'image, WIDTH : sa largeur en pixels ou en pourcentage, HEIGHT : sa hauteur
en pixels ou en pourcentage, BORDER : son ventuelle bordure en pixels (=2 par dfaut
lors d'un lien, sinon 0), ALT : un commentaire plac dans le cadre en attendant son
chargement et constitutif d'une bulle lors du passage de la souris, ALIGN : alignement,
HSPACE : marge horizontale entre l'image et les autres lments (texte, image...) en pixels,
VSPACE : marge verticale en pixels.
<IMG SRC="images/logo.gif NAME="logo-html" WIDTH=161 HEIGHT=68 ALT="Le point
sur les balises HTML" BORDER=1 ALIGN="right" HSPACE=20>

Formation en Dveloppement WEB

10/03/2015

Les bases de HTML Liens hyper-texte


Un lien hyper-texte : C'est un lment graphique ou textuel d'une page web qui sous
l'action d'un clic de souris commande le chargement d'une autre page dans le navigateur.

La balise de base
La balise <A> qui a pour attributs HREF : l'adresse de destination et TARGET : le cadre de
destination (facultatif). Les lments situs l'intrieur (texte, images) renverront vers une
page sous l'action d'un clic. De plus, lorsque la souris survole un lien, son apparence change
d'une flche a une main.
Syntaxe : <A HREF="adresse_destination">Texte_ou_image__cliquer</A>
Les liens internes
Lorsqu'on dsire crer une page volumineuse, il est prfrable d'insrer un menu avec des
liens hyper-texte internes la page (comme pour cette page). Pour cela on utilise la mme
balise mais cette fois l'adresse de destination est un mots cl prcd du signe musical
dise #. Et il faudra, au sein de la page insrer une balise marqueur dont l'identifiant sera ce
mot cl pour qu'un clic de souris sur le lien se dirige vers ce marqueur.

Formation en Dveloppement WEB

10/03/2015

Les bases de HTML Les tableaux


En premier lieu pour mettre en forme des tableaux de donnes mais aussi et surtout pour
mettre en page son propre site web. En effet, on a tous eu besoin d'crire du texte sur

plusieurs colonnes, d'aligner des paragraphes avec des images... En HTML, la balise
<TABLE> permet de faire de la vritable mise en page. Mais avec l'apparition des blocs
DIV et des feuilles de styles, on peut dsormais s'en passer.
<TABLE>
<TR>
<TD>une seule cellule</TD>
</TR>
</TABLE>

Formation en Dveloppement WEB

10/03/2015

Les bases de HTML Les cadres


Pourquoi les cadres ?

Un site qui retient l'attention c'est un site sur lequel il est trs ais de naviguer et de
prendre des repres. Il faut donc que l'internaute soit capable de se dplacer rapidement
de page en page et de revenir plus tard trs facilement au mme endroit. Pour cela, il est

ncessaire d'offrir des menus efficace qui puissent permettre vos visiteurs de se balader
sur vos pages. La technique la plus utilise pour cela, et la plus simple : c'est les cadres.
Qu'est-ce qu'un cadre ?

Un cadre est une zone de la fentre associe un fichier HTML. On utilise au minimum
deux cadres dans une fentre, l'un associ au menu et l'autre aux documents.
<FRAMESET COLS="30%,70%">
<FRAME NAME="sommaire" SRC="sommaire.php3">
<FRAME NAME="article" SRC="article1.php3">
</FRAMESET>
Formation en Dveloppement WEB

10/03/2015

Les bases de HTML TP Ralisation dun CV


Travail a faire:

Ralisation dun CV sous forme dune page WEB, avec un Index des lments constituant le
CV.
Elments constituant le CV:
Menu (index)
Informations personnelles avec photo
Formation
Expriences professionnelles

Formation en Dveloppement WEB

10/03/2015

Les bases de CSS

Les bases de CSS


Cascading Style Sheets

Formation en Dveloppement WEB

10/03/2015

Les bases de CSS


La cration de styles CSS (Cascading Style Sheets ou feuilles de style en cascade) est le
complment indispensable du langage HTML. Ce procd correspond parfaitement la

sparation du contenu et de la prsentation sur laquelle nous avons plusieurs fois insist
en dcrivant les diffrents lments HTML. Dune part, cette sparation permet dallger
les pages en centralisant les dfinitions des styles en un point unique, une seule dfinition
pouvant sappliquer un grand nombre dlments. Dautre part, elle facilite galement la
maintenance et lvolution des sites par voie de consquence.

Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - Intgrer une feuille de style externe


C'est la faon de faire la plus courante : dans l'lment <head> on ajoute un lment
<link> :
<head>
<style type="text/css" media="screen">
@import url(styles.css);
</style>
...OU...
<link rel="stylesheet" type="text/css" href="fichier.css" media="screen" />
</head>
le fichier CSS est un simple fichier texte qui contient le code CSS qui s'appliquera toute

la page. L'utilisation de cette balise permet trs facilement d'utiliser une feuille de style
pour plusieurs documents HTML.

Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - Dfinir une feuille de style selon le mdia


CSS permet de diffrencier la prsentation d'un mme document HTML en fonction du
mdia vis:
l'cran d'ordinateur de bureau
la projection en grand cran
au rendu sur l'cran rduit d'un mobile ou PDA
l'impression papier
Les principales valeurs de type de mdia sont, pour celles qui sont actuellement
supportes par les navigateurs:
all : quel que soit le mdia de sortie (reconnu par tous les navigateurs Web
traditionnels)
screen : crans d'ordinateur de bureau (reconnu par tous les navigateurs Web
traditionnels)
print : pour l'impression papier (reconnu par tous les navigateurs Web traditionnels)
handheld : crans de trs petite taille (mobiles, PDA. Cependant, de nombreux
navigateurs pour mobiles reconnaissent galement le type de mdia screen)
projection : quand le document est projet (Opera en mode plein cran)
Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - Les rgles gnrales


Une dclaration de style comporte plusieurs parties, selon lordre suivant :
Un slecteur qui va dterminer quel lment et ventuellement dans quelles

conditions va sappliquer le style.


La dclaration des proprits que lon veut voir appliques llment slectionn. Elle
doit tre incluse entre des accolades ouvrante ({) et fermante (}).
Dans ces accolades doivent apparatre une ou plusieurs proprits dtermines chacune
par un mot-cl propre CSS suivi du caractre deux-points (:), puis de la valeur attribue
cette proprit.
SELECTEUR{
Propriet1: Valeur1;
Propriet2: Valeur2;
Propriet3: Valeur3;
}
Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - Les slecteurs


Une des grandes richesses de CSS est la multiplicit des possibilits de slection des
lments auxquels on veut attribuer un style donn. Cette trs grande diversit permet en

effet dappliquer un style aussi facilement tous les lments, en une seule ligne de code.
De plus, la combinaison de plusieurs slecteurs dans la mme dclaration ouvre la voie
une quasi-infinit de combinaisons, propres rpondre tous les besoins, mme les plus
complexes.

Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - Les slecteurs


Slectionner un seul lment
Il sagit de la slection la plus simple, puisque le slecteur est constitu du nom de

llment sans les caractres de dbut < et de fin de balise />.


Nous crivons par exemple :

p {color : yellow ; background-color :blue;}

Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - Les slecteurs


Slectionner plusieurs lments
Nous pouvons trs facilement appliquer le mme style plusieurs lments diffrents en

les numrant et en les sparant par une virgule dans le slecteur:

h1,div,p {color : black ; background-color : red;}

Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - Les slecteurs


Le slecteur universel
Pour appliquer un style tous les lments, nous utiliserons le slecteur universel * avant la

dfinition dune ou plusieurs proprits. Par exemple, pour que la couleur du fond de tous
les lments soit le jaune, nous crirons :

*{background-color : yellow;}

Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - Les slecteurs


Les classes
Nous avons vu que tous les lments HTML possdent lattribut class. Ce dernier permet

dappliquer un style dfini dans une classe un lment dont lattribut class se voit
attribuer le nom de cette classe. Pour crer une classe, le slecteur est constitu du nom
choisi pour la classe prcd dun point (.)
.NomClass {color : red;}
<p class="NomClass">Texte contenu du paragraphe</p>

Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - Les slecteurs


Slecteur didentifiant l'attribut id
Pratiquement, chaque lment peut avoir un attribut id qui doit tre unique dans une page

donne. Nous pouvons crire un style qui ne sera applicable qu llment dont lid a une
valeur prcise en donnant cette valeur au slecteur (comme pour une classe) et en le faisant
prcder du caractre dise (#).
#bleu {color: white; background-color: blue;}
<p id=" bleu">Texte contenu du paragraphe</p>

Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - Les slecteurs


Les slecteurs dattributs
Il est galement possible dappliquer un style un lment dtermin ds quil possde un

attribut donn, quelle que soit la valeur de cet attribut. Pour appliquer ce slecteur, le nom
de llment doit tre suivi du nom de lattribut plac entre crochets ([) et (]). En dfinissant
le style suivant :
h2[title][id]{background-color: yellow;}
<h2 id=" bleu title= titre en bleu">Texte contenu du titre</h2>
<h2 id=" T2>Texte contenu du titre</h2>

Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - Les slecteurs


Les slecteurs de valeur dattribut
Le slecteur prcdent applique un style un lment par la seule prsence dun attribut

prcis. Pour affiner ce systme, nous pouvons galement appliquer un style un lment
condition que tel attribut ait une valeur prcise en utilisant la syntaxe suivante :
element [attribut="valeur"] {Dfinition du style;}
h2[title= titre en bleu"]{background-color: yellow;}

<h2 id=" bleu title= titre en bleu">Texte contenu du titre</h2>


<h2 id=" T2>Texte contenu du titre</h2>

Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - Les slecteurs


Les slecteurs contextuels parent-descendant
Plutt que de dfinir un style pour toutes les occurrences dun lment, nous pouvons

souhaiter ne lappliquer quen fonction de sa position relative par rapport un autre dans la
hirarchie des lments de la page. Ce type de slecteur est dit contextuel.
element_parent element_enfant {Dfinition des styles;}

ul li {background-color: #EEE; color: black;}

Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - Les slecteurs


Les slecteurs parent-enfant directs
Nous pourrons prciser le slecteur prcdent en nappliquant quun style un lment

condition quil soit un enfant direct dun autre lment. Pour oprer ce type de slection, il
faut utiliser la syntaxe :
element_parent > element_enfant {Dfinitions des styles;}

div > span{color: red; background-color: #EEE;}

Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - Les slecteurs


Les Pseudo-classes et pseudo-lments
Les pseudo-classes et les pseudo-lments permettent dattribuer un style une partie

abstraite dun document non identifiable dans cette hirarchie, par exemple le premier
caractre ou la premire ligne dun paragraphe.
Dautres pseudo-classes permettent dattribuer un style un document en fonction des
actions prvisibles mais non dtermines de lutilisateur final, par exemple le fait de placer
son curseur sur un lien ou un composant de formulaire.

Les pseudo-classes applicables aux liens: a:visited {color: red;}


Les pseudo-classes dynamiques: input:focus{backgroundcolor: blue;}
Pseudo-classes diverses: span:firsthild {background-color: red; color: white;}
Les pseudo-lments: first-letter, qui permet daffecter un style la premire lettre du
contenu dun lment indiqu avant ce slecteur.
Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - La dclaration !important


Chaque dclaration de style peut revtir un caractre de plus grande importance par
rapport une autre dclaration concernant le mme lment et la mme proprit qui
comporte une valeur diffrente. Ces deux dclarations peuvent entrer en conflit au
moment de la cration de la prsentation par le navigateur. Pour donner cette importance
un style, il faut insrer la dclaration dimportance laide du mot-cl !important.

Dans lexemple suivant :


*{color: black !important; background-color: yellow;}
div{color: blue; background-color: white;}

Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - Les units


Toutes les proprits CSS peuvent prendre une valeur dans un domaine particulier propre
chacune delle. En dehors des nombreux mots-cls existants, nous allons faire ici
linventaire des diffrents types de valeurs parmi les plus gnrales que lon retrouve pour
un grand nombre de proprits.

Les units de longueur

Les couleurs

Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - Les units


Les units de longueur
Elles sappliquent aussi bien la taille dune police qu la largeur dune bordure ou la
hauteur dun lment.
Elles sexpriment par un nombre entier ou dcimal selon les cas, suivi dune unit.
Les units de mesure relatives
Px: Valeur en pixels. La dfinition d'un pixel tant "96 pixels/pouce", le pixel n'est pas
forcment recommand dans tous les cas (cf. les remarques prcdentes).
Em: Valeur par rapport la hauteur em d'une police. 1 em correspond 100% de la taille en
cours de la police, 1.2 em 120 %, 0.8 em 80%Son usage est donc limit aux polices.
Ex: Valeur par rapport la hauteur x d'une police. Assez pauvrement implmente, donc
viter.
%: Valeur en pourcentage. L'lment dfinit prendra un pourcentage donn de la taille de son
lment parent.

Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - Les units


Les units de mesure absolues: elles sont recommandes quand les caractristiques
physiques (mesurables) du mdia sont connues.
Cm: Valeur en centimtres. Risque d'affichage diffrent sur plusieurs crans. En effet, les
rglages et rsolutions sont tellement varis que ce qui semble correspondre 1 cm sur un
cran donn pourra tre beaucoup plus grand ou plus petit sur un autre.

Mm: Valeur en millimtres. Mme remarque que pour les centimtres.


In: Valeur en pouces (inches). Mme remarque que pour les centimtres.
Pt: Valeur en point. Le point est une mesure typographique utilise par les imprimeurs
(d'o les "points par pouce" de certaines rsolutions) et les traitements de texte. Ici encore,
les remarques des centimtres s'appliquent.
Pc: Valeur en picas. Un autre terme de typographie, et donc, du fait de son origine "papier",
les remarques prcdentes tiennent.
Formation en Dveloppement WEB

10/03/2015

Les bases de CSS - Les couleurs


Une valeur de couleur sexprime en mettant en uvre lune des manires suivantes :
Un mot-cl parmi une liste limitative des couleurs. Tous les mots-cls sont en anglais,
par exemple black, yellow qui correspond des couleurs connues ; dautres sont plus
fantaisistes comme whitesmoke.
Un code hexadcimal de couleur bas sur les composantes RGB dune couleur dans le

systme additif. Chaque composante prend une valeur qui va de 0 FF, et lensemble
doit tre prcd du caractre dise (#), par exemple #F4C5A8. Il est possible de ne
prciser que trois nombres hexadcimaux de 0 F, par exemple #FC5, les navigateurs
convertissant ces valeurs par rplications (la couleur note #FC5 est interprte comme
#FFCC55).

Formation en Dveloppement WEB

10/03/2015

Les bases de HTML TP amlioration du CV


Travail a faire:

Modifier le CV ralis avec du HTML, en spcifiant un style pour chaque section.


Un fichier style pour les lments suivants:
Menu
Informations personnelles avec photo
Formation
Expriences professionnelles

Formation en Dveloppement WEB

10/03/2015

Formation en Dveloppement WEB

10/03/2015