Programmation des Sites Web

Deuxième Année ENSIMAG

ENSIMAG 2000 - 2001

James L. Crowley

Séance 2

6 octobre 2000

Plan :

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

Exemple de la syntaxe HTML (S2.1.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>
<!-- Commentaire -->
</HTML>

Structure d'un document HTML

<HTML>  	<!-- Début de document HTML -->
<HEAD>		<!--  Définition de l'en-tête -->
...
</HEAD>
<BODY>		<!--Définition du corps -->
...
</BODY>
</HTML>  	<!-- Fin du document 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>
<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 &amp; 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 >   <-- Bleu -->
	<BODY	BGCOLOR=#FFFFFF >   <-- blanc -->

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">

exemple file S2.2.html 

<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&eacute;</U><BR>
This is <BIG> Big</BIG> <BR>
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> .xxxxx

exemple file S2.3.html

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>

exemple file S2.3.html :

	
<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>

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

 

Exemple S2.4.html de tableaux

<TABLE BORDER>
<TR>
<TH>jour de la semaine</TH>
<TH>montant</TH>
<TH>Total cumul&eacute;</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>

 

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 ]">

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, x-

bitmap, 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

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

Forms

interrogation de l'utilisateur avant de fournir des documents par remplissage d'un questionnaire :

Syntaxe : <FORM ACTION ="URN" 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.

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 Champs de saisie texte

    PASSWD Champs de saisie texte caché

    SUBMIT Bouton de soumission du formulaire

    RESET Bouton de remise à zéro du formulaire

    CHECKBOX Bouton à cocher

    RADIO Bouton à cocher de type radio

    HIDDEN Champs invisible

Autres:

    SELECT Menu déroulant

    TEXTAREA Champs de saisie texte multi-ligne

    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 nom symbolique.

    ROWS Nombre de lignes de la zone texte.

    COLS Nombre de colonnes de la zone texte.

Exemple de formulaire (source)

exemple file S2.5.html


<H2>Exemple de questionnaire</H2>
<P>Veuillez remplir ce questionnaire:
<FORM METHOD=get ACTION="form.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>
</!-- Commentaire -->
</BODY>
</HTML>

joelle.html?name=Jean+Dupont&sexe=male&age=cat3&city=Grenoble&other=