Académique Documents
Professionnel Documents
Culture Documents
Dynamiques
Luc Brun
Creation
de pages Web Dynamiques p.1/75
Place du HTML
GET http://www.
monssite.com
HTTP 1.0
Contenttype: text/html
<html>
.....
Creation
de pages Web Dynamiques p.2/75
Place du HTML
CGI
GET http://www.
monssite.com
HTTP 1.0
Contenttype: text/html
<html>
.....
Creation
de pages Web Dynamiques p.2/75
Place du HTML
php asp python ....
GET http://www.
monssite.com
HTTP 1.0
CGI
HTML
CSS
JavaScript
Creation
de pages Web Dynamiques p.2/75
Intrt du Cours
php asp python ....
JavaScript
HTML
CSS
Creation
de pages Web Dynamiques p.3/75
HTML
Langage balises : <b>toto< /b>toto en
gras.
Forte parent avec XML (HTML+XML
XHTML) :
Toute balise ouverte doit tre ferme,
Une balise ne dlimitant rien se ferme elle
mme (exemple : <br/ >)
Creation
de pages Web Dynamiques p.4/75
Creation
de pages Web Dynamiques p.5/75
La section head
<head>
<title>Un exemple de section head</title>
<link rel="stylesheet" type="text/css"
href="mon_css.css"/>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1"/>
<meta name="keywords" content="html,head"/>
<meta name="author" content="Luc Brun"/>
<meta name="description"
content="description de la section head"/>
</head>
Creation
de pages Web Dynamiques p.6/75
Les textes
Jeu de caractre par dfaut : ASCII. Codage
des accents par des squences de caractres
( é ;) (Cf. Tab.2.1)
langage non wyswig (blanc :   ; retour
la ligne : <br/ >).
viter de coder la mise
en forme dans la structure du
texte.
Creation
de pages Web Dynamiques p.7/75
Modification de polices
Explicite :
<b> : gras ;
<i> : italique
<u> : soulign
Logique :
<big>, <small> : tailles,
<strong>, <em>(emphase) : mise en
vidence.
Creation
de pages Web Dynamiques p.8/75
Titres, lignes
Titres : <hx> avec x {1, . . . , 6}
<h1> titre de niveau 1,
<h6> titre de niveau 6,
Lignes horizontales : <hr/ >
Creation
de pages Web Dynamiques p.9/75
Paragraphes
Balise <p> avec comme principal attribut
align {lef t, center, right}.
Utilisez des pagraphes plutt que des sauts de
lignes (<br/ >).
Creation
de pages Web Dynamiques p.10/75
Divisions
Balise <div> permet de regrouper un ensemble
de textes/balises. Permet daffecter des
proprits un ensemble de balises :
<div align="right">
<p>un premier paragraphe</p>
<p> et un second</p>
<p>tous alignés
à droite</p>
</div>
Tous aligns droite : Concept dhritage.
Creation
de pages Web Dynamiques p.11/75
Les listes
liste non numrotes (balise<ul>) ou
numrotes (balise<ol>) :
item : <li>contenu< /li>
type : type de liste (tables 2.2 et 2.3)
liste de description : balise <dl> (description
list)
titre item <dt></dt>
description de litem <dd></dd>
Creation
de pages Web Dynamiques p.12/75
Les tableaux
Trois balises :
table : dlimite une table,
tr : dlimite une ligne,
td : dlimite une cellule.
Possibilits de cellules multi-lignes, multicolonnes, de slection de fond de tables, de
lignes, de cellules. Tables de taille fixes/variables.
Creation
de pages Web Dynamiques p.13/75
Les liens
Change lurl de la page.
<a href="url"> lien</a> affiche lien et
change lurl courante pour celle spcifie lors
dun clic sur le texte. Lurl peut tre un lien vers :
un serveur : www.ismra.fr
une page www.ismra.fr/annuaire.html
une application CGI www.ismra.fr/toto.cgi (voir
plus loin)
une adresse mail : mailto :toto@ismra.fr
La zone dlimite par <a></a> peut tre du
texte, une image. . .
Creation
de pages Web Dynamiques p.14/75
Les ancres
Permet de positionner une marque (une ancre)
dans une page HTML. Des liens peuvent tre
positionns sur cette ancre.
Syntaxe :
<a href="identifiant"/>
Liens sur lancre :
<a href="page.html#identifiant">
Lien
</a>
Creation
de pages Web Dynamiques p.15/75
Les images
Inclus une image : Syntaxe :
<img src="logo_ensicaen.jpg"
width="2cm" height="3cm"
align="left" hspace="5mm"
alt="Logo de L EnsiCaen"/>
Possibilit de spcifier la largeur (width), hauteur(height), lalignement, lespacement (hspace,
vspace), la bordure (border) et le texte avant chargement (alt) (Cf. Tab. 2.6).
Creation
de pages Web Dynamiques p.16/75
Creation
de pages Web Dynamiques p.17/75
Creation
de pages Web Dynamiques p.18/75
Les cadres
Dcoupe la fentre du navigateur en sous
fentres (frames).
Exemple :
<frameset cols="200,*">
<frame src="menu.html" name="menu"/>
<frame src="main.html" name="main"/>
</frameset>
Liens dans les frames :
<a href="loisirs.html" target="main">
Mes loisirs</a>
De moins en moins utilis.
Creation
de pages Web Dynamiques p.19/75
Les formulaires
Permet lutilisateur de rentrer des informations
par le biais de balises spcifiques. Trois
attributs :
action : nom du CGI ou de programme devant
traiter les informations,
method : mthode de passage des
paramtres (GET ou POST)
enctype : codage du document.
Creation
de pages Web Dynamiques p.20/75
Creation
de pages Web Dynamiques p.21/75
La balise select
Code un menu options :
Syntaxe :
<select name="un_menu">
<option> 1er choix.</option>
<option> 2eme choix.</option>
</select>
Attributs : name, size (nb dlments simultanments affichs), multiple (slection de plusieurs
lments).
Creation
de pages Web Dynamiques p.22/75
La balise textarea
Saisie dune zone de texte.
Syntaxe :
<textarea name="saison"
rows="10" cols="40">
Lhivers :
L
et
e :
</textarea>
Attributs : name, rows (nb ligne), cols (nb colonnes)
Creation
de pages Web Dynamiques p.23/75
Les CSS
Cascading Style Sheets : Permet de modifier
lapparence de balises
Permet une claire diffrenciation entre :
le contenu,
la structure,
la prsentation.
Fondamental !
Creation
de pages Web Dynamiques p.24/75
Feuille de style
Feuille de style : ensemble de rgles spcifiant la
mise en forme de certaines balises.
Structure dune rgle :
proprit
h1
?
valeur
{ color : red ; }
slecteur
dclaration
Creation
de pages Web Dynamiques p.25/75
Les slecteurs
Spcifie la ou les balises qui vont utiliser les
dclarations.
Slecteur simple : nom de balise.
h1
{
color: red;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
Creation
de pages Web Dynamiques p.26/75
Creation
de pages Web Dynamiques p.27/75
Creation
de pages Web Dynamiques p.28/75
Liaison HTML-CSS
Les feuilles internes
<head>
<style type="text/css">
<!-p { text-align: justify; }
--!>
</style>
</head>
Les balises < !- - !> permettent aux vieux navigateurs dignorer les feuilles de style.
Creation
de pages Web Dynamiques p.29/75
Liaison HTML-CSS
Les feuilles internes
<head>
<link rel="stylesheet"
type="text/css" href="ma_feuille.css"/>
</head>
ou
<head><style type="text/css">
@import url("feuille.css")
</style></head>
Sutilise en complment des feuilles externes.
Creation
de pages Web Dynamiques p.30/75
Liaison HTML-CSS
Les feuilles locales
<body>
<p style="text-align: justify;
color: red;"> Mon paragraphe</p>
</body>
Permet de rajouter localement une dclaration.
Creation
de pages Web Dynamiques p.31/75
Liaison HTML-CSS
Les feuilles utilisateur
Lutilisateur peut imposer des styles pour certaines balises (gnrallement menu prfrences).
Utile pour les mal voyants.
Creation
de pages Web Dynamiques p.32/75
Creation
de pages Web Dynamiques p.33/75
Hritage
Document HTML arbre dinclusion.
dclarations shritent de pre en
<html>
<html><head>
Les
fils.
<title> ma page</title>
<head>
<body>
</head><body>
<h1> Ma page </h1>
<title> <h1><div>
<div class="menu">
<ul>
<ul>
<li> un item</li></ul>
</div></body></html>
<li>
Creation
de pages Web Dynamiques p.34/75
Les tailles
Tailles de botes, de polices, dimages. . .
Units absolues :
mm minimtres pc pica (1pica=12pt)
cm centimtres pt points
in
inches
px pixel
Unit relative : %
font-size : 50% : dernire taille de police,
width : 10% : largeur de la bote englobante
(ex fentre)
Creation
de pages Web Dynamiques p.35/75
Tailles de polices
Units relatives
xx-large
x-large
large
large
large
medium normal
small
small
x-small + small
xx-small encore + small
large
Creation
de pages Web Dynamiques p.36/75
Les couleurs
proprit concernes (color, background).
Spcification du nom (aqua, black. . .) Voir
Table 3.5
Spcification de la valeur (R,G,B) par #rgb
avec r, g, b [0, f ].
Creation
de pages Web Dynamiques p.37/75
Alignement de texte
text-indent
text-align
Indentation de paragraphe.
justify, align,left,right et
none
margin-left
marge gauche
margin-right
marge droite
margin-top
marge du haut
margin-bottom marge du bas
margin
top right bottom left
Creation
de pages Web Dynamiques p.38/75
Formatage de botes
padding
margin
border
Creation
de pages Web Dynamiques p.39/75
Positionnement de botes
proprits impliqus : position, left, top, right,
bottom.
Valeurs de position :
static : par dfaut (les uns sous les autres),
absolute : coordonnes fentres,
fixed : idem absolute, insensible au scroll,
relative : positionnement relatif.
Voir page HTML
Creation
de pages Web Dynamiques p.40/75
Botes flottantes
Alignement gauche (float : left ;) ou droite
(float :right ;) du bloc parent.
Voir page Web.
Creation
de pages Web Dynamiques p.41/75
Gestion de la profondeur
proprit position possibilit de Recouvrement.
Gestion des recouvrements : proprit z-index.
En cas de recouvrement la bote de z-index le
plus lev est affiche.
Creation
de pages Web Dynamiques p.42/75
Les listes
Essentiellement trois proprits :
1. list-style-type : type de liste que lon
compte manipuler (disc, circle, decimal. . .)
2. list-style-image : spcifie une image
la place des puces
ul {list-style-image: url(mon_item.jpg)
list-style-type: circle;}
3. list-style-position
{inside,outside}
Creation
de pages Web Dynamiques p.43/75
JavaScript
Avantage :
Excut sur le navigateur du client
Inconvnients :
Excut sur le navigateur du client
Varie beaucoup en fonction des navigateurs
des versions
Surtout utilis pour de petits effets (apparition/disparition/dplacement de blocs) et la vrification des formulaires.
Creation
de pages Web Dynamiques p.44/75
Variables
Dclaration explicite de variable : var i.
Si en dehors de fonction : variable globale,
sinon variable locale.
Dclaration implicite toto="titi" ; :
variable globale.
Creation
de pages Web Dynamiques p.45/75
Linstruction if
if (condition) {instruction} ou
if (condition) {instruction} else
{instruction}
On peut tendre : if (condition)
{instruction} else if (condition)
{instruction}. . .
Creation
de pages Web Dynamiques p.46/75
Linstruction switch
switch (val) {
Instruction 1 est excut
si val=val1, Instruction 2 si
case val1:
val=val2. . ..
instruction1
Si aucun test nest vrai le
break;
bloc dinstruction par dcase val2:
faut est excut.
instruction2
break;
. . .
default:
instruction par defaut.
break;
}
Creation
de pages Web Dynamiques p.47/75
Creation
de pages Web Dynamiques p.48/75
Creation
de pages Web Dynamiques p.49/75
Creation
de pages Web Dynamiques p.50/75
Creation
de pages Web Dynamiques p.51/75
Les tableaux
var tab_vide=new Array();
var tab_10 =new Array(10);
var tab_init=new Array(val1,val2);
Tableaux 5 5 :
var mat=new Array(5);
var i,j;
for(i=0;i<mat.length;i++)
mat[i]=new Array(5);
Tableau associatif :
tab[email]="toto@titi.fr" ;
Creation
de pages Web Dynamiques p.52/75
Creation
de pages Web Dynamiques p.53/75
Creation
de pages Web Dynamiques p.54/75
Les fonctions
function nom(parametres)
{
instructions
[return valeur]
}
Passage des arguments par valeur,
Return non obligatoire (procdure)
Creation
de pages Web Dynamiques p.55/75
Creation
de pages Web Dynamiques p.56/75
Creation
de pages Web Dynamiques p.57/75
Creation
de pages Web Dynamiques p.58/75
La classe String
var toto="titi";
var titi=new String(); // chaine vide
concatnation : +
Liens avec la classe Math :
eval()
: eval("4+5") 9.
parseInt()
: conversion en entier
parseFloat() : conversion en float
toString()
: conversion en String
Creation
de pages Web Dynamiques p.59/75
La classe image
var mon_img=new Image();
mon_img.src=Images/mon_image.gif;
Prcharge au chargement de la page.
affichage : proprit src des balises <img>.
img.src=mon_img.src
Implique le changement dynamique de limage.
Creation
de pages Web Dynamiques p.60/75
La classe Date
ma_date = new Date();
Possibilit de spcifier une date ou de prendre la
date systme (Table 4.6)
getDate()
jour du mois
getDay()
jour de la semaine
getFullYear()
anne sur 4 chiffres
getHours(),getMinutes() heure, minutes
getMonth()
mois
Autres fonctions (Table 4.7) et exemples (pages
HTML)
Creation
de pages Web Dynamiques p.61/75
Creation
de pages Web Dynamiques p.62/75
Creation
de pages Web Dynamiques p.63/75
window
document
anchors[] links[] images[] applets embeds
forms[]
elements[]
Creation
de pages Web Dynamiques p.64/75
Recherche par Id
Fonction : document.getElementById
Prise en compte des navigateurs :
function getobj(id)
{
if(document.layers)
return document.id; // Netscape 4.x
// Netscape 6.x IE 5.x
if(document.getElementById)
return document.getElementById(id)
if(document.all)
return id; // IE 4.x
}
Creation
de pages Web Dynamiques p.65/75
Creation
de pages Web Dynamiques p.66/75
Creation
de pages Web Dynamiques p.67/75
Les CGI
Common Gateway Interface :
Protocole de communication entre le serveur
Web et des applications.
De plus en plus supplant par PHP, Applet
Java.
Garde tout son intrt pour de grosses
applications.
Creation
de pages Web Dynamiques p.68/75
Creation
de pages Web Dynamiques p.69/75
Principales variables
REQUEST_METHOD : type de passage de la
chane de paramtres (GET, POST),
QUERY_STRING : valeur de la chane
daffectations (mode GET),
CONTENT_LENGTH : longueur de la chane
daffectation.
Creation
de pages Web Dynamiques p.70/75
Creation
de pages Web Dynamiques p.71/75
Envoi de donnes
Content-type: type mime
contenu du document
type mime a priori quelconque gnralement :
text/plain : ascii ou
text/html : html.
Attention la ligne vide entre Content-type et le
contenu.
Creation
de pages Web Dynamiques p.72/75
Les Cookies
Affectations de variables stockes chez
lutilisateur. Permet :
De stocker des informations de pages en
pages sur un mme site,
didentifier un utilisateur,
deffectuer des statistiques sur les accs des
utilisateurs.
Creation
de pages Web Dynamiques p.73/75
Creation
de pages Web Dynamiques p.74/75
Creation
de pages Web Dynamiques p.75/75