Programmation des Sites Web

Transcription

ENSIMAG 2
Conception des Site Web
Programmation des Sites Web
Deuxième Année ENSIMAG
ENSIMAG 2000 - 2001
James L. Crowley
Séance 2
6 octobre 2000
Plan :
Le Langage HTML........................................1
Structure d'un document HTML...........................................2
Formulaires HTML ............................................................9
CGI : Common Gateway Interface.....................13
Formulaires HTML ............................................................14
Exemple d'un Script pour un html dynamique.......................15
Execution d'un script par une ficher HTML..........................16
PERL................................................................................17
Organisation :
Les notes et les exemples sont disponibles surs :
http://www-prima.imag.fr/Prima/Homepages/jlc/Courses/2000/ENSI2.IHM2000
Le Langage HTML
HTML : Hyper Text Markup Language.
Langage de création et de description des documents hypermédia.
Fournit un ensemble de commandes de formatage.
Syntaxe HTML
<balise attributs> contenu </balise>
- balise ( en anglais: "tag") est un mot clé du langage associant une
propriété particulière au contenu de la balise
- le contenu représente du texte, des images ou d'autres balises
2-1
ENSIMAG 2
- </balise> est une étiquette précisant la fin de la balise
Exemple de la syntaxe HTML
<HTML>
<TITLE>Ma photo</TITLE>
<HR>
<H1>Ceci est ma photo</H1>
<IMG SRC="jim.gif">
<BR>
La photo de <A HREF="joelle.html">ma femme</A>

</HTML>
Structure d'un document HTML
<HTML>

<HEAD>

...
</HEAD>
<BODY>

...
</BODY>
</HTML>

Balises de l'en-tête
<TITLE> définit le titre du document, utilisé par les butineurs (browsers)
comme titre de la fenêtre.
<META> contient un Méta informations - Une description du document qui peut
servir pour l'indexation et la composition automatique de catalogues.
<SCRIPT> définit un script exécuté avec le document
<BASE> définit l' URL de référence du document, utilisé par les liens relatifs
<LINK> indique une relation du document avec d'autres documents
<STYLE> définit le style de formatage du document
Exemples de balises de l'en-tête
<HEAD>
2-2
ENSIMAG 2
<BASE HREF="http://www-prima.imag.fr/Prima/jlc.html">
<LINK REL=Previous HREF="intro.html">
<LINK REL=Next HREF="mime.html">
<LINK REL=ToC HREF="toc.html">
<META NAME="AUTHOR" CONTENT="Jim CROWLEY">
<META NAME="GENERATOR" CONTENT="Adobe PageMill 2.0 Mac">
<META HTTP-EQUIV=Expires CONTENT="Mon, 04 Jan 01
10:00:00GMT">
<TITLE>HTML & Formulaires</TITLE>
</HEAD>
Attributs de la balise <BODY>
BACKGROUND="image_name" définit une image comme fond d'écran.
BGCOLOR=#rrggbb couleur RGB du fond.
TEXT=#rrggbb couleur RGB du texte.
LINK=#rrggbb couleur RGB des hyper liens.
VLINK=#rrggbb couleur RGB des hyper liens déjà visités.
exemple :
<BODY BGCOLOR=#0000F0 >
<BODY BGCOLOR=#FFFFFF >
<-- Bleu -->
<-- blanc -->
2-3
ENSIMAG 2
Structure du corps
- Hiérarchie à 6 niveaux : <H n > ... </H n >
- Paragraphes : <P> ... </P>
Attribut de <H n > et <P> :
ALIGN=" type " avec type = left , right ou justify
Mise en forme du texte (styles logiques)
<PRE> ... </PRE> Affiche du texte pré-formaté, police à chasse fixe.
<EM> ... </EM> Mise en valeur du texte.
<STRONG> ... </STRONG> Mise en valeur du texte.
<CODE> ... </CODE> Texte de type code
<CITE> ... </CITE> Texte provenant d'une citation.
<ADDRESS> ... </ADDRESS> Adresse.
Mise en forme du texte (styles physiques)
<B> ... </B>
gras.
<I> ... </I>
italique.
<CITE>...</CITE>
donne aussi en italique
<TT> ... </TT>
Texte à chasse fixe.
(un texte formaté avec une police à espacement constant)
<U> ... </U>
souligné.
<BIG> ... </BIG>
plus gros
<SMALL> ... </SMALL> plus petit
<SUB> ... </SUB> en indice et plus petit.
<SUP> ... </SUP> en exposant et plus petit.
<FONT> ... </FONT> les attributs définissent la taille, la police
exemple
This is <FONT SIZE="+2">Big</FONT SIZE="+2">
exemples :
<BR>
<TT>Ceci est de chasse fixe</TT><BR>
<B>Ceci est Gras</B><BR>
<U>Ceci est souligné</U><BR>
<U>Ceci est souligné</U><BR>
This is <BIG> Big</BIG> <BR>
2-4
ENSIMAG 2
Ceci n'est pas une <FONT SIZE="+2">PIPE</FONT SIZE="+2"><BR>
Listes
Listes non ordonnées
<UL>... </UL>
Ajout d'un élément : <LI> .
exemple :
I like
<UL>
<LI>Skiing
<LI>Cycling
<LI>Flying
<LI>Reading
</UL>
variantes : <UL TYPE=disc> ,
<UL TYPE=circle>
ou
<UL TYPE=square> .
Listes ordonnées
<OL> ... </OL>
variantes :
<OL TYPE=a>
<OL TYPE=I>
<OL TYPE=i>
<OL TYPE=1>
<UL>
<LI>Skiing
<LI>Cycling
<LI>Flying
<LI>Reading
<OL TYPE=a>
<LI>History of Science
<LI>History of Technology
<LI>History of Mathematics
</OL>
</UL>
2-5
ENSIMAG 2
Lexiques ( Listes de définition )
<DL> ... </DL>
Ajout d'un terme à définir : <DT> .
Ajout d'une définition :
<DD> .
Exemple de lexique
<DL>
<DT>Octet
<DD>Mot de huit bits
<DT>kiloOctet
<DD>1024 octets
<DD>8192 bits
</DL>
Tableaux (balises de base)
<TABLE>...</TABLE> commande principale pour ouvrir une zone de tableaux.
<TR>...</TR>
Commande pour définir une rangée
<TD>...</TD>
Commande pour définir les données d'une rangée
<TH>...</TH>
Commande pour définir une rangée d'en-tête
Exemples de tableaux
<TABLE BORDER>
<TR>
<TH>jour de la semaine</TH>
<TH>montant</TH>
<TH>Total cumulé</TH>
</TR>
<TR>
<TD>Lundi</TD><TD>456 FF</TD><TD>456 FF</TD>
</TR>
<TR>
<TD>Mardi</TD><TD>200 FF</TD><TD>656 FF</TD>
</TR>
</TABLE>
2-6
ENSIMAG 2
Ancres hypertextes
ancre : partie de texte ou objet marquant un hyper lien
Syntaxe : <A attribut >...</A>
<A HREF="xxx.html"> Nom </A>
Le photo de <A HREF="joelle.html">ma femme</A>
insère un pointeur nommé objet vers la référence dest
<A NAME=" dest "> objet </A>
enregistre dest comme point d'accès à l'intérieur du document HTML et sur l'objet
exemple:
<A HREF="#LIKES">Stuff I like</A>
...et plus loin..
<A NAME="LIKES">I Like</A>
ou bien
<A HREF="#top">Debut du page</A>
et au bas de page
<A NAME="top"></A>
Diverses balises
<BR> Force un saut de ligne
<HR> Ligne horizontale
<MATH>...</MATH> Formule mathématique
<HR>
<MATH>d=ax+by+c</MATH>
<!-- ... > Commentaire invisible
<META HTTP-EQUIV="refresh" CONTENT=" t ; [URL= url ]">
2-7
ENSIMAG 2
rafraîchissement de l'écran après t secondes. url spécifie le fichier à ouvrir.
Images
Syntaxe : <IMG attribut >
SRC=" url image " spécifie l'URL de l'image (formats : gif, xbitmap, jpeg)
exemple : <IMG SRC="jim.gif">
ALT=" texte " spécifie le texte à afficher à la place de l'image
ALIGN=" type " alignement du texte par rapport au texte l'entourant
( type = bottom, top middle, left, right )
HEIGHT=" taille "
WIDTH=" taille " taille de l'image
ISMAP / USEMAP l'image est une image réactive .
Images réactives :
• Navigation par le biais de carte
• Utilisation de l'attribut ISMAP (ou USEMAP ) de là balise <IMG>
• Lien avec une url définissant les caractéristiques de l'image
Images réactives USEMAP
Définition d'une carte <MAP NAME=" nommap "> ... </MAP>
Contenu de la balise
<MAP> <AREA SHAPE="type" HREF="url" COORDS=" x,y,... ">
Type des zones SHAPE COORDS
rect ax,ay,bx,by
circle ax,ay,R
poly x1,y1,x2,y2,...
Images réactives ISMAP
Définition d'une carte par le lien sur l'image définissant la description de
l'image et passé au programme imagemap
2-8
ENSIMAG 2
Contenu du fichier méthode URL x1,y1 x2,y2 ... xn,yn de description où
méthode correspond à rect , circle ou poly .
Exemple d'images réactives USEMAP
<IMGSRC="mapimg.gif "USEMAP="#Face">
<MAPNAME="Face">
<!RectangleBUTTON>
<AREASHAPE="rect" HREF="page1.html" COORDS="140,20,180,60">
<!TriangleBUTTON>
<AREASHAPE="poly" HREF="page2.html"
COORDS="80,100,220,90,200,150">
<!CircleBUTTON>
<AREASHAPE="circle" HREF="page3.html" COORDS="80,100,60">
</MAP>
Exemple d'images réactives ISMAP
<A HREF="/cgi-bin/imagemap/path/mapimg">
<IMG SRC="mapimg.gif" ISMAP">
</A>
Le fichier mapimg contient :
rect page1.html 140,20,180,60
poly page2.html 80,100,220,90,200,150
circle page3.html 80,100,60
Formulaires HTML
HTML : documents statiques.
formulaires :documents dynamiques.
interrogation de l'utilisateur avant de fournir des documents par remplissage d'un
questionnaire :
Balise FORM
Syntaxe : <FORM ACTION =" url " METHOD=" méthode ">
url identifie le programme utilisé pour traiter le formulaire.
méthode définit la méthode à employer pour transmettre au
serveur l'information recueillie dans les champs du formulaire.
2-9
ENSIMAG 2
GET les données sont ajoutées à l'URL.
POST les données sont envoyées dans le corps du message.
Éléments de formulaire
sous-types de INPUT
TEXT
PASSWD
SUBMIT
RESET
CHECKBOX
RADIO
HIDDEN
Champs de saisie texte
Champs de saisie texte caché
Bouton de soumission du formulaire
Bouton de remise à zéro du formulaire
Bouton à cocher
Bouton à cocher de type radio
Champs invisible
Autres:
SELECT
TEXTAREA
Menu déroulant
Champs de saisie texte multi-ligne
2-10
ENSIMAG 2
Définition d'un élément INPUT
Syntaxe : <INPUT attributs >
TYPE Type de l'entrée ( TEXT , PASSWD , CHECKBOX , ... )
NAME nom symbolique
SIZE nombre de caractères (physique) ( TEXT ou PASSWD )
MAXLENGTH nombre de caractères autorisés
CHECKED Le bouton CHECKBOX ou RADIO est sélectionné par défaut
VALUE Valeur de TEXT ou PASSWD par défaut
Valeur du bouton CHECKBOX ou RADIO quand sélectionné
Etiquette du bouton SUBMIT ou RESET
Définition d'un élément SELECT
Syntaxe :
<SELECT attributs >
<OPTION attributs > Premiére option.
<OPTION attributs > Seconde option.
...
</SELECT>
Attributs de <SELECT> :
NAME
nom symbolique.
SIZE
si 1 alors menu déroulant
sinon taille de la liste.
MULTIPLE Sélection multiple si l'attribut est présent.
Attribut de <OPTION> : SELECTED
si l'attribut est présent, l'option est sélectionnée .
Définition d'un élément TEXTAREA
Syntaxe :
<TEXTAREA attributs >
texte par défaut
</TEXTAREA>
Attributs :
NAME
ROWS
nom symbolique.
Nombre de lignes de la zone texte.
2-11
ENSIMAG 2
COLS
Nombre de colonnes de la zone texte.
Exemple de formulaire (source)
<H2>Exemple de questionnaire</H2>
<P>Veuillez remplir ce questionnaire:
<FORM METHOD=get ACTION="joelle.html">
<P>Nom: <input name="name" size="48">
<P>Sexe:
<input name="sexe" value="male" type=radio CHECKED>M
<input name="sexe" value="female" type=radio>F
<P>Age: <input name="age" value="cat1" type=radio> 15-20
<input name="age" value="cat2" type=radio CHECKED> 20-30
<input name="age" value="cat3" type=radio> tres vieux
<P>Villes dans lesquelles vous avez reside:
<UL PLAIN>
<LI><input name="city" type=checkbox value="Paris"> Paris
<LI><input name="city" type=checkbox value="Grenoble">
Grenoble
<LI>Autres <textarea name="other" cols=48 rows=4></textarea>
</UL><HR>
<CENTER>
<INPUT TYPE=SUBMIT Value="Valider le questionnaire">
<INPUT TYPE=RESET Value="Reinitialiser">
</CENTER></FORM>
/joelle.html
joelle.html?name=Jean+Dupont&sexe=male&age=cat3&city=Grenoble&other=
2-12
ENSIMAG 2
CGI : Common Gateway Interface
Le "Common Gateway Interface" est un protocole qui permet au page html
d'exécuter les programmes. Ceci autorise les possibilités illimitées aux pages html.
Serveur
(Apache)
Script
(ccgi-bin/..)
Form.html
Submit
Serveur
Reponse
Call CGI
CGI Script
Reponse
2-13
ENSIMAG 2
Formulaires HTML
On peut exécuter un script à partir d'un page html via l'usage d'un formulaire.
Syntaxe de la balise FORM : <FORM ACTION ="script.cgi" METHOD="get">
script.cgi identifie le programme utilisé pour traiter le formulaire.
méthode définit la méthode à employer pour transmettre au serveur l'information
recueillie dans les champs du formulaire.
Les scripts cgi sont installés dans un répertoire cgi-bin du serveur.
..[serveur]/cgi-bin/script.cgi
L'ENSIMAG a fait un lien "soft" dans le cgi-bin vers chaque membre du cours :
cgi-bin/jlc
->
~jlc/cgi-bin
Il faut que les programmes en cgi-bin soient executable par tout le monde!
Fait le commande :
cd cgi-bin
chmod a+x *
//
//
aller au repertoire
all have access executable
Exemple d'une communication d'un client vers un serveur :
GET /cgi-bin/script.cgi HTTP/1.0
Accept: www/source
Accept: text/html
Accept: image/gif
User-Agent: Lynx/2.4 libwww/2.14
From: [email protected]
Une réponse de cgi pourrait être
HTTP/1.0 200 OK
Date: Thursday, 24 February 2000
Server: Apache 1.24
Mime-version: 1.0
content-type: text/html
content-length: 200
16:24:00
GMT
2-14
ENSIMAG 2
Exemple d'un Script pour un html dynamique.
Un script peux créer une page dynamique .
Considère le page HTML:
<HTML>
<TITLE>HTML Dynamique</TITLE>
<BODY
BGCOLOR=#FFFFFF >
<FORM ACTION ="/cgi-bin/s3.2.cgi">
<H1>Genere du html dynamic:</H1>
<INPUT TYPE=SUBMIT Value="Do it">
</FORM>
</BODY>
</HTML>
Soit le script s2.1.cgi installé en cgi-bin.
#!/usr/local/bin/perl
# script name : s3.2.cgi
print "Content-type: text/html", "\n\n";
print "<HTML>" , "\n";
print "<TITLE>Exemple d'une html dynamique</TITLE>" , "\n";
print "<BODY>" , "\n";
print "<H1>Merci!</H1>" , "\n";
print "</BODY>" , "\n";
print "</HTML>" , "\n";
exit(0);
2-15
ENSIMAG 2
Execution d'un script par une ficher HTML
Script
(ccgi-bin/..)
Serveur
Form.html
Call CGI
Submit
CGI Script
Reponse
Serveur
Reponse
Requete
de la Formulaire
Retour du formulaire
Remplissage
de la formulaire
Renvoie
au CGI
Renvoie au
Utilisateur
Client
Serveur
Script
CGI
2-16
ENSIMAG 2
PERL
Le scripte s3.2.cgi est écrit en PERL : Practical Extraction and Report Language
Un langage de script développé en 1986 par Larry Wall.
PERL est très populaire chez les ingénieurs système et Web.
PERL est un langage adapté pour manipuler nombres, textes, fichiers
et répertoires, réseau et programmes,
PERL est une langage "interprété". Sa syntaxe est inspirée de C, shell, awk, sed.
PERL dispose des opérateurs bien adaptés au traitement des requêtes de html.
Mais, on aura pu utiliser n'importe quel langage. Il suffit que la programme
soit accessible au serveur.
Le premier ligne doit être une "shebang" commande.
Le shell UNIX interpret cette ligne comme la specification de l'interpréter
Le commande print envoie un texte au STDOUT.
Pour un scripte CGI, STDOUT est dirigé vers l'interpréteur HTML.
Types de Variables en PERL
$variable
scalar - un valeur numérique ou une chaîne
@variable
array - une liste de valeurs indexé par les entiers
%variable
hash - Une liste de valeurs indexé par les clefs symboliques
&variable
subroutine - Une scripte en perl
*variable
typeglob - un type de donnée déclaré
exemples :
Scalars
$number = 10;
Arrays:
@table = ("first", "second", "third");
$table[0] = "first"
Hashes
%weekdays = ("sun" => "dimanche", "mon" => "lundi", "tue" => "mardi")
ou bien
2-17
ENSIMAG 2
$weekdays("wed") = "Mercredi";
Les chaînes entourées des marques de quotation " " sont interprétés
Si on les entoure des "single-quotes" ` ` ou ' ' ils sont conservées..
Par exemple :
$variable = "value";
print "Value is $variable", "\n";
print 'Variable is $variable', "\n";
Execution:
Value is value
Variable is $variable
2-18

Programmation des Sites Web

Transcription

Documents pareils

Exercices PHP

INTERNE TT Internet - Intranet

Le langage HTML

Solution n°2 pour quitter le PC virtuel - Ensiwiki

Plan de formation TÉLÉCONSEILLER

Mini mémento HTML. Rappel: Les codes HTML sont insensibles à la

Télécharger la brochure

HTML – Les formulaires

[IMAGE] Course Name: Solutions aux problÃ¨mes courants en matiÃ

Html et html5 1 - pierre