Web 2.0

Web 2.0
O.Curé [1 ]
Contact
●
Olivier Curé
–
[email protected]
–
http://www.univ-mlv.fr/~ocure
–
Copernic 4B060
O.Curé [2 ]
Objectifs du cours
●
Développement de sites pour le Web
2.0
–
●
●
HTML, CSS, DOM, javascript et jQuery
Mashup
Introduction aux technologies du
Semantic Web (Web 3.0)
–
RDF, RDFS et OWL
O.Curé [3 ]
Organisation du cours
●
●
5 cours de 2 heures (Olivier Curé)
–
Mercredi matin 8h30-10h30 le 3/3
–
Et 10h45-12h45 les 10,17,24,31/3 et 7/4
5 TD de 2 heures (Valentin Bourgoin)
–
Mercredi 10h45 -12h45 le 3/3
–
Puis 8h30- 10h30 les 4 suivants
O.Curé [4 ]
Evaluation
●
Participation lors des TD (20%)
●
DST final le 18/12/2009 (80%)
O.Curé [5 ]
Le Web
●
Quelques informations sur le Web et
son évolution
O.Curé [6 ]
Ordre de grandeur
●
●
Ordre de grandeur :
–
1Mo : 1 gros roman
–
200à 500Mo : ce que mémorise un être humain dans sa vie.
–
900Mo : information contenue dans le génome d'une cellule humaine.
–
1To : estimation de la taille d'un HD en 2007. Toutes les conversations d'un
être humain dans sa vie au format MP3.
–
20To : bibliothèque du congrès à Washington (que le texte), 20 millions
d'ouvrages.
–
200To : archives du net en 2003 12 milliards de pages.
–
3Po : Bibliothèque du congrès scannerisée (textes + images).
–
100Eo : total du flux d'information dans le cerveau humain durant sa vie
(Von Neumann).
Eo (Exa), Zo (Zetta) et Yo (Yotta).
O.Curé [7 ]
Internet / Web
●
En 2007:
–
500 million d'adresses IP
–
1.17 milliard d'utilisateurs
–
18% de la population
–
109 million de sites Web
–
29.7 milliard de pages web
–
7.2 milliard de recherches/mois (3.9 pour
Google)
O.Curé [8 ]
Des chiffres
●
●
En 2006:
–
161 Eo (108 To) d'information ont été
créés ou répliqués dans le monde
–
C'est plus que durant les 5000 dernières
années
–
International Data Corporation (IDC)
estime une croissance 6X d'ici 2010 (soit
988Eo/an)
Le volume de l'information technique
double tous les 2 ans. Elle doublera
toutes les 72 heures en 2010.
O.Curé [9 ]
Encore des chiffres
●
●
●
2009: +de 250million d'utilisateurs sur
Facebook: équivalent du 4ème plus gros
pays au monde (entre les USA et
l'Indonésie)
Myspace, environ 185million d'utilisateurs
En moyenne, une page MySpace est
visitée 30 fois par jour pour accéder à
–
Des images (plus de 1 milliard)
–
De la musique (plus de 25 million)
–
Des vidéos (60To)
O.Curé [10 ]
Encore..
●
●
●
Facebook:
–
1.8 milliard de photos
–
31 million d'utilisateurs
–
105 nouveaux utilisateurs par jour
–
1800 applications
YouTube
–
1.7 milliard de vidéos téléchargés/mois
–
1 million de streams/jour
–
20 heures de vidéo d'upload par minute
Flickr (juin 2009)
O.Curé [11 ]
Pour finir
●
eBay dispose de 2 entrepôts de
données (data warehouse):
–
Un de plus de 2Po
●
–
SGBD parallèle (Teradata)
Un autre de plus de 6.5Po
●
50To de nouvelles données par jour
●
SGBD parallèle (Greenplum)
●
96 noeuds
●
Compression de données à 70%
O.Curé [12 ]
Quelques chiffres
●
●
« Mobile devices in America are generating something like 600
billion geo-spatially tagged transactions per day. Every
call, text message, email and data transfer handled by your
mobile device creates a transaction with your space-time
coordinate (to roughly 60 meters accuracy if there are three
cell towers in range), whether you have GPS or not. Got a
Blackberry? Every few minutes, it sends a heartbeat, creating
a transaction whether you are using the phone or not. If the
device is GPS-enabled and you’re using a location-based
service your location is accurate to somewhere between 10
and 30 meters. Using Wi-Fi? It is accurate below 10
meters. ».
Jeff Jonas (http://jeffjonas.typepad.com/)
O.Curé [13 ]
Quelques questions
●
●
●
Dans quoi stocke-t-on toutes ces
informations ?
Comment pose-t-on des questions ?
Comment développer un site web de ce
type ?
O.Curé [14 ]
Dans quoi stocke-t-on
toutes ces informations ?
●
●
Dans des bases de données
Une base de données (database) est un
ensemble structuré et cohérent de
données enregistrées avec le minimum
de redondance pour satisfaire
simultanément plusieurs utilisateurs de
manière sélective et dans un temps
opportun.
O.Curé [15 ]
Système de gestion de
base de données (SGBD)
●
●
Un ensemble de logiciels permettant la création et la
maintenance de bases de données.
Un SGBD (database Management System -DBMS) doit
permettre :
–
la description, l'organisation et la gestion des données sur
les mémoires secondaires.
–
la recherche, la sélection et la modification des données.
–
la manipulation des représentations abstraites des données,
indépendamment de leur organisation et de leur
implantation sur les supports physiques.
O.Curé [16 ]
Caractéristiques des SGBD
●
Structure (types et comportements des données).
●
Persistence des données (mémoire secondaire).
●
Accès aux données (langage déclaratif pour les requêtes,
langage procédural de programmation).
●
Performance (accès et stockage des données).
●
Partage ( accès concurrentiel et transactions)
●
Volume important de données
●
Sécurité et reprise sur pannes
O.Curé [17 ]
Modèle de données
●
●
Une BD exploite un modèle de
données. Il existe de plusieurs types.
Un modèle de données est un
ensemble de concepts permettant de
décrire la structure d'une base de
données : types de données, relations,
des contraintes, des opérations
(langage de définition et de
manipulation des données) et la
sémantique.
O.Curé [18 ]
Quelques modèles de
données
●
Evolution dans le temps :
–
système de fichiers (50s)
–
modèle hiérarchique( 60s) :IMS
–
modèle réseau (70s): Codasyl, IDMS
–
modèle relationnel (80s): Oracle, Sybase,DB2,..
–
modèle orienté objet (90s): Versant, Gemstone, O2
–
modèle objet-relationnel (90s) : Oracle, DB2,
SQLServer, PostgreSQL
–
modèle semi-structuré (hétérogénéité, XML).
–
Le modèle relationnel est le plus populaire
aujourd'hui mais de nombreuses variantes émergent
actuellement (principalement du domaine du Web:
mouvement NoSQL.
O.Curé [19 ]
Comment pose-t-on des
questions ?
●
●
●
A l'aide d'un langage de requêtes.
Ils diffèrent suivant le modèle de
données
Un langage de requêtes doit prendre en
compte 2 aspects:
–
L'expressivité (la complexité des questions
que l'on peut poser)
–
La difficulté du calcul de la réponse par
l'ordinateur
–
En simplifiant, plus le langage est expressif
O.Curé [20 ]
Comment développer un
site web de ce type ?
●
●
●
●
Emergence du web : 1992
3 générations de sites Web : statique,
dynamique et « intelligente ».
1ère génération : statique – 100%
HTML
Les autres générations exploitent
l'architecture client-serveur.
–
HTTP + CGI
–
HTTP + template + scripting
–
O.Curé [21 ]
Architectures du web
Web / Data
Processing
Technologies
Server-side
processing
Compiled
programs
Client-side
processing
Server-Side
scripts
Hybrid
Technologies
CGI Programs
Java Servlets
ASP.NET
Client-side
scripts
PERL
Compiled programs
on client workstation
Java applets
Active Server Pages
JavaScript
Cold Fusion
VBScript
Java Server Pages
ASP.NET
INTEGRATING WEB SITES AND DATABASES, By Mike
MORRISON, Joline MORRISON, and Anthony KEYS. Communications
of the ACM September 2002 / vol 45, N°9
O.Curé [22 ]
HTTP + CGI
●
●
●
●
CGI = Common Gateway Interface
Repose sur l'exécution de programmes
sur le serveur en lui passant des
arguments à travers l'URL.
Limites :
–
Montée en charge importante est difficile
–
Peu robuste.
–
Code source peu maintenable et lourd.
Exemples : Perl, Tcl, shells, etc..
O.Curé [23 ]
HTTP + modèle + langage
script serveur
●
●
●
Un modèle (template) est une page
HTML contenant du code, écrit dans un
langage script, exécuté du côté
serveur.
Propose une séparation entre le code
applicatif et la page HTML. Le serveur
est chargé de la génération du code
HTML.
Limites :
–
Caractère propriétaire des balises.
O.Curé [24 ]
Serveur de présentation
●
●
Proche de la solution précédente mais
avec une couche d'architecture plus
globale et inclusion de composants.
Deux grandes solutions sont
disponibles :
–
ASP.net (Active Server Pages)
●
●
–
ASP était la 1ère solution sur le marché.
Possibilité de développer dans de nombreux
langages (VB, C#, etc..).
J2EE : Servlets, JSP (Java Server Pages) et
O.Curé [25 ]
java beans.
Serveur d'applications
●
●
Objectif : fournir une mise en oeuvre
logique applicative sous la forme de
composants. Ces derniers doivent être
persistants et particulier à des
transactions, de manière distribuée.
Ce middleware offre des fonctions
techniques comme : l'équilibrage de
charge, la tolérance aux pannes, la
gestion de cache, service de nommage
et de localisation => fonctions vitales
dans le cadre d'applications Internet
O.Curé [26 ]
J2EE
●
●
Architecture Java reposant sur l'orienté objet (héritage,
encapsulation et polymorphisme).
Servlets, JSP, JavaBeans, JSTL (JavaServer Tag Libraries) =>
profite du modèle MVC (Modèle Vue Contrôleur).
●
Gestion des transactions (JTA).
●
Gestion des BD (JDBC).
●
Gestion des messages (JMS, JavaMail).
●
Gestion des objets distribués (RMI-IIOP).
●
Gestion de renommage des services (JNDI).
●
Solutions : BEA logic, Websphere, Enhydra, Jboss, Geronimo.
O.Curé [27 ]
Le Web
●
●
●
Le Web révolutionne l'accès à l'information.
Des millions de sites, des milliards de pages et des
technologies diverses : statique/dynamique,
internet/ intranet/extranet .
HTML est un support pour l'information distribuée à
destination des êtres humains mais n'est pas adapté
pour les applications, pourtant ce besoin devient
incontournable.
O.Curé [28 ]
Constat du Web
HTML (HyperText Markup Language) est un langage permettant
de présenter l'information à l'écran (navigateur).
Pas d'échange de données
Pas de traitement de données en dehors de l'affichage
HTML est le support du Web actuel, un Web syntaxique.
Problèmes engendrés :
Moteur de recherche
e-commerce
Publication de services
O.Curé [29 ]
Web 2.0
●
●
Le Web 2.0 a été initiée par l'apparition
de l'Ajax et d'autres solutions RIA (Rich
Internet Application).
Enrichir l'expérience de l'utilisateur:
–
Obtenir le même type de comportement
qu'avec une application standard
(desktop)
–
Une application Web non Web2:
●
Impose une approche « clic, attendre et
rafraîchir » pour les interactions avec
l'utilisateur
O.Curé [30 ]
Contraintes des appli Web
●
Interruption des opérations de l'utilisateur
–
●
●
Perte du contexte pendant le rafraichissement
–
Perte d'info sur l'écran
–
Perte de la position (scrolling)
Pas d'instantanéité du retour des actions de l'utilisateur
–
●
Attente pour obtenir la prochaine page
Contrainte d'HTML
–
●
L'utilisateur ne peut réaliser des opérations lorsqu'il attend
une réponse
Limite des éléments graphiques
Motivation des techno Rich Internet
Application (RIA)
O.Curé [31 ]
Technologies RIA
●
Applet (Java)
●
Macromedia Flash/AIR
●
Java Web start
●
DHTML
●
Ajax
●
Silverlight (plateforme Microsoft)
●
JavaFX (plateforme Java)
O.Curé [32 ]
Applet
●
●
Positifs:
–
Utilisation des API java
–
Utilisation de data streaming, manipulation graphique,
threading and GUI avancée
Négatifs:
–
Temps de chargement du code
–
Une application mal conçue peut faire planter le navigateur
O.Curé [33 ]
Macromedia Flash
●
Programmation avec ActionScript
●
Exemple d'implémentation: Flex, Lazlo (open source)
●
Positifs:
–
●
Affichage de de graphique vectoriel
Négatifs:
–
Navigateur a besoin d'un plug-in
–
ActionScript est propriétaire
O.Curé [34 ]
Java Web Start
●
Une application desktop exécutéesur le net
●
Positifs:
●
–
Expérience type desktop
–
Levier sur les techno Java
–
Opérations déconnectées possibles
–
Signature digitale des appli
–
Déploiement incrémentale
Négatifs:
–
Les vieux systèmes JRE ne fonctionnent pas.
–
Le premier temps de chargement peut être long
O.Curé [35 ]
DHTML
●
Dynamic HTML
●
DHTML = Javascript + DOM + CSS
●
Utilisé pour la création d'application interactives
●
Communication non asynchrone
●
Rafraichissement complet de la page est nécessaire
●
Raison de son succès relatif
O.Curé [36 ]
AJAX
●
●
●
DHTML avec communicationAsynchrone au travers de
XMLHttpRequest
Positifs:
–
Une bonne alternative RIA
–
Plusieurs boites à outils existent
–
Pas de plug-in nécessaire
Négatifs
–
Toujours des incompatibilités entre navigateurs
–
Difficulté à maintenir et debugger le code javascript
O.Curé [37 ]
Quelques exemples
d'applications basées AJAX
●
●
Google Maps
–
Les données de la carte sont demandées
et téléchargées de manière asynchrone en
tâche de fond
–
Les autres parties de la page ne sont pas
modifiées donc pas de perte du contexte
opérationnel
Google Suggest (fin 2004): permettre la
saisie des premières lettres du mot
recherché, d'afficher les recherches les
plus courantes.
O.Curé [38 ]
Autres utilisations d'AJAX
●
Auto complétion
–
●
●
Adresse email, nom, ville peuvent être
auto complètés lors de la saisie de
l'utilisateur
Validation des données d'un formulaire
en temps réel
–
Identifiant, codes postaux, etc.
–
Simplification de la logique de validation
(côté serveur et client)
Rafraîchissement des données
O.Curé [39 ]
1.DOM
Document Object Model
O.Curé [40 ]
Introduction DOM
●
●
●
●
W3C
Document Object Model ou Modèle
d'Objets représentant un Document
Objectif: permettre aux scripts et aux
programmes d'accéder
dynamiquement au contenu, à la
structure et à la présentation des
documents HTML ou XML et de les
mettre à jour.
C'est un interface de programmation
O.Curé [41 ]
Introduction DOM (suite)
●
Hétérogénéité:
–
La recommandation propose une interface
utilisable dans la plupart des
environnements et des applications,
indépendamment du langage de
programmation et de la plate-forme
supportant l'application.
●
O.Curé [42 ]
Normalisation
●
3 niveaux:
–
Niveau 1 (1998): spécification des objets permettant de
définir le contenu et la structure d'un document. 2 parties:
●
●
DOM Core pour les interfaces de base du DOM et leurs
applications aux documents XML
DOM HTML spécifie les interfaces applicables aux
documents HTML
–
Niveau 2 (2000) complète le niveau 1 en spécifiant le
modèle d'objets pour les feuilles de styles CSS, un modèle
de gestion des événements et support des namespaces.
–
Niveau 3 (2004) ajoute le support de Xpath, une interface
de sérialization pour XML.
O.Curé [43 ]
Exemple document XML
<catalog>
<book id="101">
<title>XML in a Nutshell</title>
<author>Elliotte Rusty Harold, W.
Scott Means</author>
<price>39.95</price>
</book>
<book id="121">
<title>Who Moved My Cheese</title>
<author>Spencer, M.D. Johnson,
Kenneth H. Blanchard</author>
<price>19.95</price>
</book>
</catalog>
O.Curé [44 ]
DOM et Ajax
●
●
Avec Ajax, particulièrement son
exploitation sur une page Web, exploite
largement le DOM.
On distingue 2 étapes:
–
trouver l'élément avec lequel on veut
travailler
–
Modifier le contenu de l'élément ou le
réorganiser
O.Curé [45 ]
Trouver un élément
●
document.getElementById()
–
Retourne un élément DOM
–
Paramètre: une chaîne de caractères
–
Trouve un élément d'une page. L'id doit
être unique.
●
document.getElementsByTagName()
●
element.getElementsByTagName()
–
Argument: une chaîne
–
Retourne une collection d'éléments
–
O.Curé [46 ]
Trouver un élément (suite)
●
●
●
element.childNodes
–
Pas d'argument, retourne une collection
d'éléments DOM
–
Trouve l'enfant immédiat d'un élément
element.parentNode
–
Pas d'argument, retourne un élément DOM
–
Trouve le parent direct
element.nextSibling / previousSibling
–
–
Pas d'argument, retourne un élément DOM
O.Curé [47 ]
Trouver un élément (fin)
●
Avec jQuery en utilisant un sélecteur
–
$()
●
●
–
Argument: une chaîne de caractères
Retourne un objet jQuery couvrant un tableau
d'éléments
Exemple:
●
●
●
$(''div'') : sélectionne tous les noeuds
correspondant à une type d'élément
$(''#maListe''): sélection par un ID unique
$(''ul#'maListe li.new''): sélecteur complexe
CSS
O.Curé [48 ]
Modifier le DOM
●
document.createElement()
–
Arg: nom d'un élément, retourne un
élément
●
document.createTextNode()
●
element.innerHTML
●
element.appendChild()
●
element.removeChild()
●
element.insertBefore()
O.Curé [49 ]
Modifier DOM avec jQuery
(suite)
●
●
$.html()
$.append(), $.prependTo(),
$.insertBefore(), $.insertAfter()
–
●
●
Insère du contenu dans un noeud
$.remove(): supprime tous les éléments
d'une page
$.empty(): vide tous les éléments d'un
ensemble
O.Curé [50 ]
2. CSS
(Cascade StyleSheet)
O.Curé [51 ]
CSS : Cascade Style Sheets
●
●
●
●
CSS = règles + feuilles de style.
Règle = état d'un aspect stylistique
d'un ou plusieurs éléments.
Feuille de style = ensemble de règles
qui s'applique à un document HTML.
Exemple : une feuille de style
comportant une unique règle :
H1 { color : blue}
O.Curé [52 ]
Introduction
●
●
●
Objectif : offrir aux concepteurs de sites Web,
un outil puissant de présentation des documents
HTML (et XML).
CSS : cascade style sheets, est une mécanisme
simple permettant d'ajouter du style aux
documents HTML.
Normes :
–
juillet 1997 : CSS 1
–
janvier 1998 : CSS 2
–
CSS 3 (en cours de validation).
O.Curé [53 ]
Versions
●
●
●
CSS 1
–
Recommendation du W3C
–
Uniquement pour HTML
–
Incomplet
CSS 2
–
Pour XML et HTML
–
Recommendation W3C actuelle
CSS 3
–
●
Toujours pas disponible
Syntaxe non XML
O.Curé [54 ]
Règle des CSS
●
Une règle est constituée de 2 parties :
- Un sélecteur (lien entre le document HTML et le
style).
- Une déclaration (une partie de la règle spécifiant une
partie de la présentation).
● Syntaxe : H1 {color : blue }
sélecteur
déclaration
● Presque tous les éléments peuvent être utilisés
comme une sélecteur (il n'y a par d'intérêt à utiliser un
élément invisible, ex : br).
● Une déclaration se décompose en propriétés et
valeurs (color est la propriété et blue est la valeur).
O.Curé [55 ]
Groupement de règles
Lorsque plusieurs sélecteurs possèdent
une même définition, il est préférable de
les regrouper.
Ex : H1, H2, H3 { font-weight : bold }
● Lorsqu'une règle possède plus d'une
propriété, on sépare les propriétés par
des ";".
Ex : H4 { color : red ; font-weight :
●
bold }
O.Curé [56 ]
Lien avec les documents
HTML
●
Il existe quatre méthodes pour attacher
une feuille de style à un document HTML.
● Appliquer
à l'ensemble du document HTML
à l'aide de la balise <style> dans l'en-tête.
● Appliquer à une balise à l'aide de la balise
<style>
● Lier le document à une feuille de style
externe à l'aide de la balise <link>
● Lier le document à une feuille de style
externe à l'aide de "@import".
O.Curé [57 ]
Style de document
●
●
Imbriquer la feuille
de style entre
commentaires pour
les navigateurs non
compatibles CSS.
Inconvénient :
Maintenance sur site
volumineux.
<html><head>
<title>essai css</title>
<style type="text/css"> <!-h1 {color : blue}
--> </style>
</head>
<body>
<h1>premier essai avec
CSS</h1>
</body>
</html>
O.Curé [58 ]
Styles en lignes
Méthode la plus simple
d'associer un style à une
balise.
● Principe : inclure un
attribut style à la balise en
plus de la liste habituelle
des propriétés et des
valeurs respectives.
●Inconvénients : code
lourd et maintenance.
●
<html>
<head>
<title>Page styles en ligne</title>
</head>
<body>
<h1 style="color : blue; font-style
:italic"> Chapitre 1</h1>
</body>
</html>
O.Curé [59 ]
Feuilles de style externes
liées
●
●
●
La balise <link> doit
apparaître dans l'entête.
L'URL de la feuille de
style peut être absolu
ou relatif à l'URL de
base du document.
Avantage :
Maintenance sur des
sites volumineux.
<html><head>
<title>page avec link</title>
<link rel="stylesheet" type="text/css"
href="styles.css">
</head>
<body>
<h1>Chapitre 1</h1>
</body>
</html>
O.Curé [60 ]
Feuilles de style importées
●
●
●
@import doit apparaître
dans la balise <style>
dans l'en-tête.
<html><head>
L'URL de la feuille de
style peut être absolu ou
relatif à l'URL de base du
document.
<style><!--
Peut aussi apparaître
dans une feuille de style
externe.
<body>
<title>page avec
@import</title>
@import url(“style.css”);
-->
</style></head>
<h1>chapitre 1</h1>
</body>
</html>
O.Curé [61 ]
Feuilles de style externe
●
●
Dans un document
texte avec extension
".css".
Réutilisation dans
plusieurs documents
HTML pour la gestion
d'une charte
graphique sur un site
contenant beaucoup
de pages
(maintenance).
BODY { background-color :
Yellow; color : Black }
H1 { font-weight : bold; color :
red}
O.Curé [62 ]
Hiérachie des styles
Ordre de priorité :
style en ligne > style de document >
@import > link
● Différence entre @import et link :
●
✗
✗
Équivalence lorsqu'une seule balise <link>
Lorsqu'il y a plusieurs feuilles externes,
@import est préférable, car il y a fusion des
styles. La feuille du dernier import est
prioritaire.
O.Curé [63 ]
Classes de style
●
●
●
Les classes de style permettent de définir plusieurs styles
différents pour une ou plusieurs balises.
On peut définir des classes régulières (attachées à une
balise) ou bien génériques (pour l'ensemble des balises).
Définition d'une classe dans une feuille de document
ou externe :
✗ Classe régulière d'un paragraphe : P.nomclasse
{propriétés : valeurs ; etc.. }
Classe générique : .nomclasse {propriétés : valeurs ; etc.. }
● Exploitation :
✗ Pour une classe régulière : <P
class="nomclasse">abc</p>.
✗ Pour une classe générique on peut utiliser les balises
<div> et <span>.
O.Curé [64 ]
Pseudo-classes
Les pseudo-classes permettent de définir
l'affichage de styles pour certains états de
balises.
● Les noms sont prédéfinis.
● Elles sont rattachées au nom de la balise par ":"
et non ".".
● Principales pseudo-classes : A:link, A:active,
A:visited, P:first-letter, P:first-line.
● Attention à la compatibilité des navigateurs avec
les pseudo-classes introduites dans CSS2
(A:hover, A:focus, :first-child, :lang).
●
O.Curé [65 ]
Identificateur
L'attribut id assigne à l’élément correspondant un
identificateur unique au sein du document.
● On peut définir des identificateurs réguliers
(attachés à une balise) ou bien génériques (pour
l'ensemble des balises).
● Définition d'un identificateur dans une feuille
de document ou externe : #jaune {color :
jaune} ou H1#bleu {color : blue}
● Exploitation : <span id="jaune">Jaune</span>
ou <H1 id="jaune">Titre bleu</H1>
●
O.Curé [66 ]
DIV et SPAN
Balises introduites dans HTML 4.
● DIV : Crée une division au sein d'un
document. Fonctionnement sur un bloc.
● SPAN : Permet de déléguer le
formatage du texte entre les balises à
une feuille de style. Fonctionnement sur
la ligne.
● Attribut « id » pour identifier une zone
● Exemple: <div id=''menu''>...</div>
●
O.Curé [67 ]
Héritage
<HTML> <HEAD><TITLE>CSS1</TITLE>
Arbre du document HTML de droite
</HEAD>
HTML
<BODY>
/
<H1>Titre 1</H1>
<P><STRONG>CSS1</STRONG> intro:</P>
<UL>
<LI>selecteurs
<LI>h₫ritage
<LI>exemple
\
HEAD
BODY
/
/
TITLE
H1
|
\
P
UL
|
/ | \
STRONG
LI LI LI
</UL> </BODY></HTML>
●
●
L'organisation interne d'un document HTML est supportée par le
DOM (Document Object Model) sous forme d'arborescence.
Les balises qui se trouvent dans une section délimitée par
d'autres balises héritent des propriétés et valeurs de la balise
mère.
O.Curé [68 ]
Propriétés sur les
caractères
element
{
font-family: Helvetica, Arial;
font-size: x-large;
font-style: italic;
font-variant: small-caps;
font-weight: 900;
font-stretch: semi-expanded
●
}
O.Curé [69 ]
Propriétés sur le texte
element
{
text-indent: 0.5in;
text-align: center;
text-decoration: underline;
text-transform: capitalize;
white-space: normal
}
O.Curé [70 ]
Propriétés sur les couleurs
element
{
color: #00FF00;
background-color: rgb(43, 43,43);
border-color: black
}
O.Curé [71 ]
Unités
Les valeurs de certaines propriétés peuvent être
exprimées dans plusieurs unités.
● Couleur : nom d'une couleur de la palette web, #rgb,
#rrggbb, rgb (0-255,0-255,0-255), rgb (0-100%,0100%,0-100%).
● Taille : on distingue deux types : relative et absolue.
✗ Relative : em, ex, px et %.
✗ Absolue : in, cm, mm, pt, pc.
●
O.Curé [72 ]
Les listes
●
2 types de liste en html: non ordonnée
(ul) et ordonnée (ol)
●
CSS permet d'ajouter du style aux listes
●
Pour ul: ul.a {list-style-type : x; }
–
●
Avec x= {circle, none, disc (défaut),
square}
Pour ol: ol.b{list-style-type: y;}
–
Y= {decimal, lower-alpha, lower-greek,
lower-roman..}
O.Curé [73 ]
Les listes (suite)
●
On peut mettre une image: ul {liststyle-image: url(''abc.png'');}
●
O.Curé [74 ]
CSS float
●
Un élément peut être déplacer vers la
gauche ou la droite et avoir d'autres
éléments l'encadrant. Utile pour les
images.
–
●
Pour annuler float, on utilise clear
–
●
Exemple : im {float: left;}
Ex: .text {clear:both;}, both indique que
l'on annule à droite et à gauche.
Valeurs possibles: {left, right, both,
none, inherit}
O.Curé [75 ]
Un point sur les propriétés
●
Les grandes classes des propriétés de CSS 1 : police de
caractères, disposition du texte, couleurs, fonds de document et
boîtes.
●
Le CSS2 étend le jeu de propriétés au positionnement des
images, effets visuels, media, etc.. L'exploitation de ces
propriétés se posent au niveau de la compatibilité des
navigateurs.
➢
Normes CSS et propriétés sur le site du w3c (www.w3c.org).
➢
Articles sur webreview (www.webreview.com), HTMLHelp, le site
css.nu (http;//css.nu).
➢
Outils : TopStyle , Style Master, CSS Validator :
http://jigsaw.w3.org/css-validator/
O.Curé [76 ]