Marcel Bosc
Introduction Web
Université Paris-13 Département informatique IUT de Villetaneuse
2010-2011
1ère année, cours - 2/5
table des matières
rappels et précisions
programmation coté client CSS - sélecteurs
Affichage HTML
interactions client serveur
1ère partie
rappel : page html simple
client machine site.org
navigateur
internet
serveur web (logiciel)
protocole http protocole http
très simplifié...
bonjour site.org, je voudrais
la page page.html
ok, voici la page, au format html 1
2
requêtes - autres fichiers
<html>
<head>
<link href="style.css" .../>
</head>
<body>
<h2>Un titre!</h2>
<p>bla bla
<img src="photo.jpg" .../>
</p>
</body>
</html>
fichiers :
● page.html
● style.css
● photo.jpg page.html
client
(navigateur)machine
internet
requêtes - autres fichiers
page.html apache
photo.jpg
site.org
affichage
page.html
http://site.org/photo.jpg
photo.jpg apache
6
http://site.org/page.html 1
2 photo.jpg
nécessaire pour afficher!
3
5 4
même chose pour fichiers:
CSS, javascript, flash, ...
requêtes - autres fichiers
exemple : yahoo.com : 49 requêtes
firebug : net firebug : net firebug : net firebug : net
html : 40 Ko html : 40 Ko
image : 4 Ko image : 4 Ko
image : 11 Ko image : 11 Ko
nombre de requêtes
performance : vitesse de chargement de la page + requêtes = + long
● concaténation CSS
● concaténation JS
● concaténation Images (sprites) exemple : sprites
CSS:background-position
4 images
1 image
développement : fichier local
client machine site.org
navigateur
internet
serveur web (logiciel)
très simplifié...
page.html
file:///home/toto/page.html
client site.org
navigateur
internet
très simplifié...
hébergement web classique
serveur web
affichage 4
html page.html
2apache
~/travail/page.html
http://site.org/page.html 1
3
serveur ftp
développeur
0
client
votre poste de TP
machine aquanux
navigateur
intranet
très simplifié...
développement à l'IUT
serveur web
affichage 5
html
serveur de fichiers page.html
page.html 2apache
~/public_html/page.html
http://aquanux/~10612/page.html 1
4
3
0
développement à l'IUT
url : file:///home/usager/123/exemple/page.html
fichier : ~/public_html/page.html fichier : ~/exemple/page.html
url : http://aquanux/~123/page.html
!
ne pas confondre local et serveur!répertoire spécial répertoire spécial
droits d'accès (groupe www):
chmod g+r page.html
local
serveur
Divers
3ème partie
Visiteurs d'un site web
site.org
page.html
moteur de recherche navigateur
mal voyant
autres « robots » images,
couleurs, taille de texte,
...
images, couleurs, taille de texte,
....
<h1>Bonjour</h1>
HTML
h1 {
font-size : 200%;
}
CSS
« Ce texte ("Bonjour")
est un titre important » « Les titres importants sont affichés en grand »
Séparation du fond et de la forme
fond forme
moteur de recherche mal voyant
autres « robots »
(contenu, sens, structure) (présentation, apparence)
contenu et structure logique mise en forme
html css
● html simple et facile à maintenir
● séparation de métiers (graphiste / dev. web)
● html compréhensible par - malvoyants
- moteurs de recherche - autres logiciels
● présentation facile à changer
<h1>Pingouins</h1>
<p>Les pingouins sont des oiseaux...</p>
<p style="font-size:200%">
Pingouins</p>
<p>Les pingouins sont des oiseaux...</p>
titre???
titre???
Séparation du fond et de la forme
Moteurs de recherche
google.com
toto.orgtiti.com
xyz.net
1 2 3
« cinéma paris »
crawl indexation recherche
résultats
Recherche, référencement
Arriver dans les premiers résultats ! PageRank
« importance » de chaque page
plus de liens vers une page
meilleur PageRank
CSS - sélecteurs
3ème partie
Rappels
<h1>Ceci est un titre</h1>
<p>
Un paragraphe de texte avec un
<a href="page2.html">lien</a> vers une autre page. Les mots suivants
<strong>sont importants</strong>
</p>
h1 {
font-size: 200%;
}
strong
{ color: red;
}
Feuille de style:
sélecteur: quels éléments ont veut affecter
"h1" tous les éléments de type h1
HTML
".toto" tous les éléments ayant class="toto"
Rappels : sélecteurs
p {color: red;}
<h1>Un essai</h1>
<h2>Titre section-1</h2>
<p id="para1">bla bla bla bla</p>
<h2 class="actu">Titre section-2</h2>
<p>bli bli bli bli bli</p>
<h2>Titre section-3</h2>
<p>Qu'est qu'on s'amuse!</p>
<h2 class="actu">Titre section-4</h2>
<p>abc def ghi jkl mno</p>
<h2 class="actu">Titre section-5</h2>
.actu {color: blue;}
#para1 {color: green;} #unID
nombalise
.
uneClassedéfinition
sélecteur {
proprieté1: valeur1;
proprieté2: valeur2;
...
}
table
#principal table.actu
table a, .urgent a
background-color width
margin définition
exemples
green 10em
30px 20px
sélecteurs : descendants
p
a a
img strong
img
id="intro"
p img
sel1 sel2
espace
sélectionne les sel2 qui sont des
descendants de sel1
exemples:
les "img" descendants d'un "p"
#intro img les "img" descendants de l'élément ayant id="intro"
sélecteurs : d'une classe
sel.maclasse
point, pas d'espace
sélectionne les sel dont l'attribut classe est maclasse
class="maclasse"
<h2>Titre section-1</h2>
<p class="actu">bla bla bla bla</p>
<h2 class="actu">Titre section-2</h2>
<p class="actu">bla bla bla bla</p>
<h2 class="actu">Titre section-4</h2>
<p>abc def ghi jkl mno</p>
<h2 class="actu">Titre section-5</h2>
h2.actu
sélecteurs multiples
sel1, sel2, sel3
virgule
les propriétés/valeurs s'appliquent à la fois
à sel1, sel2 et sel3
<h1>titre</h1>
<h2>petit titre</h2>
<h3>sous titre</h3>
<p>abc</p>
<p class="important">xyz</p>
.important,h3,h2 {
color: red;
}
autres sélecteurs
● E > F : p > .important
● E:first-child : p:first-child
● E:hover : tr:hover
exemples
Attention: problèmes compatibilité navigateurs syntaxe
http://www.w3.org/TR/CSS21/selector.html
priorités
<p>
<strong id="id1" class="c1">xyz</strong>
</p>
les sélecteurs plus spécifiques sont
prioritaires
strong {color: red; } p strong {color: green; } .c1 {color: yellow;}
strong.c1 {color: blue; } p strong.c1 {color: black; }
#id1 {color: white; } p #id1 {color: orange;}
firebug:
color: black;
color: white;
Boites / HTML
3ème partie
Type de boite : display
inline: a, img, strong, span ...
block: p, h1, div ...
inline: dans le flux du texte block: occupe toute la ligne
Titre
exemple lien important, h2
p
a strong inline
block
.lienMenu {
display: block;
}
Changer:
HTML : élément « div »
div: élément block pour
regrouper plusieurs éléments inline ou block
exemples:
<div id="principal">
<h2>bla bla</h2>
<p>bla bla bla</p>
<h2>bla bla</h2>
<p>bla bla bla</p>
</div>
texte principal d'une page:
<div id="navigation">
<h2>Sites amis</h2>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
block navigation d'une page:
(souvent : id ou class)
HTML : élément « span »
div: élément inline pour
regrouper plusieurs éléments inline
exemples:
<span class="tel">
01.49.40.12.34
</span>
<span class="date">
1/1/2010
</span>
regrouper du texte:
(souvent : id ou class)
formulaire : exemple simple
<form method="get" action="search.php">
<p>
<input type="text" name="terms" />
<input type="submit" value="rechercher" />
</p>
</form>
2 1
1 2
form.html simplifié...
formulaire : exemple 2
<form method="get" action="search.php">
<p>
<label for="terms" >termes à chercher:</label>
<input type="text" name="terms" id="terms"/>
<br/>
<input type="checkbox" name="fr" id="fr"/>
<label for="fr">en francais?</label>
<br/>
<input type="submit" value="rechercher" />
</p>
</form>
2 1
5 3
4
1 2
3 4
5 form.html
L'avenir : CSS 3
● nouveaux sélecteurs
● coins arrondis : border-radius
● dégradés : gradient
● ombres
● plusieurs images de fond
● transparences
● ...
Problèmes de compatibilité: ie5,6,7,8
http://www.quirksmode.org
L'avenir : HTML 5
● <video> <audio>
● <canvas> : dessiner en js
● <article> <section> <header> ... : structurer doc.
● formulaires : champs date, heure, email...
● SVG
● ...
Positionnement
4ème partie
Positionnement
flux normal (inline, block) float
absolute
3 algorithmes :
.exemple2 {
float: left;
}
.exemple3 {
position: absolute;
}
p, a, h1 ...
positions ordinaires
Float
img{ float: right; }
<p>bla <img src="p.png".../> bla bla bla bla... </p>
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
normal
Position : absolute
img{ position: absolute;}
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
normal
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
position: absolute ... les éléments sont retirés du flux normal. On peut les placer ou on veut.
Position : absolute
img {
position: absolute ; top: 20px ;
right: 40px;
}
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
normal
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
20px
40px
containing block
Exemple de mise en page
entete
principal barre
<body>
<div id="entete" >...</div>
<div id="principal">...</div>
<div id="barre" >...</div>
</body>
body {width: 750px;}
#principal {
float: left;
width: 500px;
}
#barre {
float: right;
width: 250px;
}
simplifié...
ce document est distribué librement :
sous licence GNU FDL :
http://www.gnu.org/copyleft/fdl.html
les originaux sont disponibles aux formats OpenOffice et powerpoint http://www-info.iutv.univ-paris13.fr/~bosc
