Cours HTML

Cration de pages Web
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
Place du HTML
CGI
GET http://www.
monssite.com
HTTP 1.0
Contenttype: text/html
<html>
.....
Creation
Place du HTML
php asp python ....
GET http://www.
monssite.com
HTTP 1.0
CGI
HTML
CSS
JavaScript
Creation
Intrt du Cours
php asp python ....
JavaScript
HTML
CSS
Creation
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
Structure dun document HTML

Deux sections :
head : Dfinitions gnrales sur le document :
Informations non affiches,
body : corps du document.
textes,
tableaux,
listes ( puce, numrotes),
images. . .
Creation
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
Les textes
Jeu de caractre par dfaut : ASCII. Codage
des accents par des squences de caractres
( &eacute ;) (Cf. Tab.2.1)
langage non wyswig (blanc : &nbsp ; retour
la ligne : <br/ >).
viter de coder la mise
en forme dans la structure du
texte.
Creation
Modification de polices
Explicite :
<b> : gras ;
<i> : italique
<u> : soulign
Logique :
<big>, <small> : tailles,
<strong>, <em>(emphase) : mise en
vidence.
Creation
Titres, lignes
Titres : <hx> avec x {1, . . . , 6}
<h1> titre de niveau 1,
<h6> titre de niveau 6,
Lignes horizontales : <hr/ >
Creation
Paragraphes
Balise <p> avec comme principal attribut
align {lef t, center, right}.
Utilisez des pagraphes plutt que des sauts de
lignes (<br/ >).
Creation
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
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
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
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
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
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
Les images clicables (1/2)

Permet de spcifier un lien sur certaines parties
dune image. Syntaxe :
<map name="id map">
<area shape="nom forme"
coords="liste coords" href="lien"/>
.
.
</map>
shape {rect, circle, polygon}
Creation
Les images clicables (2/2)

Valeurs de coords :
rect (x1 , y1 , x2 , y2 ) coins haut et bas,
circle (x, y, R),
polygon (x1 , y1 , . . . , xn , yn ) liste des points du
polygone.
Utilisation :
<img src="url" usemap="id map"/>
Creation
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
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
Les balises input

<input type="type" name="nom">
type
: type dinput
name
: nom de variable
value
: valeur par dfaut
checked
: slection par dfaut
size
: nb de caractres
maxlength : nb max. de caractres
type {text, password, image, checkbox, radio,
submit, reset}
Creation
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
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
Les CSS
Cascading Style Sheets : Permet de modifier
lapparence de balises
Permet une claire diffrenciation entre :
le contenu,
la structure,
la prsentation.
Fondamental !
Creation
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
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
Les slecteurs vnements

Les dclarations sappliquent sur un type de
balise lors de certains vnements ou tat.
Exemple :a :hover {color : red ; }
Principaux
vnements
:focus prise de focus par un
texinput ou textarea
:hover passage de la souris
sur un lien
:link
lien pas encore visit
:visited lien cliqu
Creation
Les diffrents types de slecteurs

simple : a{ } ,
vnement : a:hover { } ,
contextuel : p a{ } ,
groups : a,p,h1 { }
de classe : .intro { }
didentifiant : #titre { }
Voir pages HTML
Creation
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
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
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
Liaison HTML-CSS
Les feuilles utilisateur
Lutilisateur peut imposer des styles pour certaines balises (gnrallement menu prfrences).
Utile pour les mal voyants.
Creation
Les feuilles en cascades

Conflits entre plusieurs rgles :La dernire rgle
lue a la priorit
1. Utilisateur,
2. locales,
3. internes/externes : dernire rgle lue
(positionnement de balises),
4. conflit dans une mme feuille : dernire rgle
lue.
Creation
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
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
Tailles de polices
Units relatives
xx-large
x-large
large
large
large
medium normal
small
small
x-small + small
xx-small encore + small
large
em 1em taille de la police prcdente
Creation
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
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
Formatage de botes
padding
margin
border
border : border-width, border-style,

border-color ou border width, style color.
padding : haut droite bas gauche.
margin : idem que prcdemment.
voir page HTML
Creation
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
Botes flottantes
Alignement gauche (float : left ;) ou droite
(float :right ;) du bloc parent.
Voir page Web.
Creation
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
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
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
Variables
Dclaration explicite de variable : var i.
Si en dehors de fonction : variable globale,
sinon variable locale.
Dclaration implicite toto="titi" ; :
variable globale.
Creation
Linstruction if
if (condition) {instruction} ou
if (condition) {instruction} else
{instruction}
On peut tendre : if (condition)
{instruction} else if (condition)
{instruction}. . .
Creation
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
Les boucles (1/4)

Boucle for : for(init ;cond ;incr)
exemple
var sum=0;
for(i=0;i<10<i++)
sum+=i;
Creation
Les boucles (2/4)

Boucle While :
while(cond){instruction}
exemple :
sum=0;
i=0;
while(i<10)
{
sum+=i;
i++;
}
Creation
Les boucles (3/4)

Boucle Do-while :
do {instruction} while(cond) ;
exemple :
sum=0;
i=0;
do
{
sum+=i;
i++;
}
while(i<10);
Creation
Les boucles (4/4)

Les squences dchapement
return
: sort de la boucle et de la
fonction.
break
: sort de la boucle
continue : passe litration suivante
Creation
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
Manipulation de tableaux (1/2)

Concat
concatne plusieurs tableaux.

Tableau.join()
conversion en chane
Tableau.pop()
supprime dernier lment
Tableau.push
ajoute un ou plusieurs lments
Tableau.reverse() inverse lordre des lments du tableau.
Tableau.shift()
supprime le premier lment du tableau.
Creation
Manipulation de tableaux (2/2)

Tableau.slice()
Tableau.sort()
Tableau.unshift
Tableau.toString()
partie dun tableau.

trie
ajoute en tte de tableau
concatne les objets de
larray en une String.
Tableau.valueOf
retourne la valeur de lobjet
Array .
Tableau.splice(i,nb,[val1,]) substitue les
lments en position i i+nb du tableau par les
vali . Renvoi les lments supprims.
Creation
Les fonctions
function nom(parametres)
{
instructions
[return valeur]
}
Passage des arguments par valeur,
Return non obligatoire (procdure)
Creation
Les botes de dialogue

confirm(Message) : Afficher un message/une
information,
alert(Message) : Afficher un message
dalerte,
val=prompt(Message,defaut) : Afficher un
message et saisir une valeur.
Creation
Les classes (1/2)

var toto=new fonction([params]);
fonction : constructeur de lobjet.
function aire()
{ return this.largeur*this.hauteur;}
function Rectangle(x,y)
{// creation du champ largeur
this.largeur=x;
// creation du champ hauteur
this.hauteur=y;
// creation de la methode aire
this.aire=aire;
}
Creation
Les classes (2/2)

Utilisation des classes :
mon_rect=new Rectangle(10,10);
document.write("largeur, hauteur, aire"+
mon_rect.largeur+mon_rect.hauteur+
mon_rect.aire());
Ajout dynamique de mthodes :
classe.prototype.methode=fonction
exemple :
Rectangle.prototype.perimetre=perimetre
Creation
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
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
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
Insertion de code Javascript (1/2)

Syntaxe :
Balise <script></script>.
Deux syntaxes :
<script type="text/javascript"
src="mon_fichier.js"></script>
ou
<script type="text/javascript">
mon code.
</script>
Possibilit de combiner
Creation
Insertion de code JavaScript (2/2)

Lieu dinsertion
Insertion pour excution diffre : Dans la
balise <head>. Code excut sur demande
(appel de fonction, instanciation de classe)
Insertion pour excution directe Dans la
balise <body>. Excut au chargement de
la page.
Raction vnements (onclick,
onblur. . .Table 4.9)
Possibilit de combiner
Creation
Hirarchie des objets

window
self,
frames[] location history
window,
parent,
plugins[] mimeTypes[] top
navigator
window
document
anchors[] links[] images[] applets embeds
forms[]
elements[]
Creation
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
Recherche par nom et balise
Recherche par nom (attribut name) :

document.getElementsByName("nom");
Recherche par nom de balise :
document.getElementsByTagName("balise");
Creation
Recherche par classe

function getElementbyClass(classname)
{
var inc=0;
var elt=new Array();
var alltags=document.all;
if(! alltags)
alltags=document.getElementsByTagName("*");
for (i=0; i<alltags.length; i++)
if (alltags[i].className==classname)
elt.unshift(alltags[i]);
return elt;
}
Creation
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
Rcupration des paramtres

Paramtres : liste daffectation variable=valeur.
Chane daffectations.
var1=val1&var2=val2. . .
mthode POST : Le serveur envoi la chane
daffectations sur lentr standard de
lapplication.
mthode GET : Positionnement de la chane
daffectation dans la variable denvironnement
QUERY_STRING.
Creation
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
Dcodage des affectations

Un exemple en shell.
ifs=$IFS
IFS="&"
set $QUERY_STRING
IFS=$ifs
for egal in $*
do
echo "$egal <br/>"
done
Creation
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
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
Positionnement des Cookies

Content-type: text/html
Set-Cookie: var=val;
contenu du document
Possibilit de rpter la ligne Set-Cookie pour
positionner plusieurs variables. La ligne vide
marque le dbut du document.
Options :
date dexpiration (expires),
serveurs ayant accs au Cookie (domain),
Zones du serveur ayant accs au Cookie
(path),
Creation
Lecture des Cookies

Variable HTTP_COOKIE.
var1=val1;va2=val2;. . .
Lecture similaire celle de QUERY_STRING.
Creation

Cours HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cours HTML

Uploaded by

Copyright:

Available Formats

Cration de pages Web

Structure dun document HTML

Les images clicables (1/2)

Les images clicables (2/2)

Les balises input

Les slecteurs vnements

Les diffrents types de slecteurs

Les feuilles en cascades

em 1em taille de la police prcdente

border : border-width, border-style,

Les boucles (1/4)

Les boucles (2/4)

Les boucles (3/4)

Les boucles (4/4)

Manipulation de tableaux (1/2)

concatne plusieurs tableaux.

Manipulation de tableaux (2/2)

partie dun tableau.

Les botes de dialogue

Les classes (1/2)

Les classes (2/2)

Insertion de code Javascript (1/2)

Insertion de code JavaScript (2/2)

Hirarchie des objets

Recherche par nom et balise

Recherche par nom (attribut name) :

Recherche par classe

Rcupration des paramtres

Dcodage des affectations

Positionnement des Cookies

Lecture des Cookies

You might also like