World Wide Web

le langage HTML

et FrontPage

 

 

Eric Lapaille
eric @netline.be

 

 


 

Table des Matières

Définition________________________________________________________________________________________ 4

Historique________________________________________________________________________________________ 5

URL ou Universal Resource Locator_______________________________________________________________ 6

Quelques programmes navigateurs domaine public et shareware_________________________________ 8

Dos_____________________________________________________________________________________________ 8

Windows_________________________________________________________________________________________ 8

Macintosh________________________________________________________________________________________ 8

Email____________________________________________________________________________________________ 8

HTML_____________________________________________________________________________________________ 9

Notre première page HTML__________________________________________________________________________ 9

En-tête__________________________________________________________________________________________ 10

Titre___________________________________________________________________________________________ 11

Corps du document________________________________________________________________________________ 11

Commentaires____________________________________________________________________________________ 12

DocType________________________________________________________________________________________ 13

<Hx> Headings </Hx>_____________________________________________________________________________ 13

Séparateurs______________________________________________________________________________________ 13

Pointeurs vers autres documents.______________________________________________________________________ 13

Listes___________________________________________________________________________________________ 14

Images__________________________________________________________________________________________ 14

STYLE__________________________________________________________________________________________ 14

TEXTE PREFORMATE_____________________________________________________________________________ 15

CITATIONS______________________________________________________________________________________ 15

ADRESSE_______________________________________________________________________________________ 15

Caractères spéciaux_______________________________________________________________________________ 18

TABLE__________________________________________________________________________________________ 19

TR Table Row____________________________________________________________________________________ 26

TD Table Data TH Table Header______________________________________________________________________ 26

TFOOT, TBODY___________________________________________________________________________________ 29

Les couleurs_____________________________________________________________________________________ 31

Frames_________________________________________________________________________________________ 36

Frameset________________________________________________________________________________________ 36

Frame__________________________________________________________________________________________ 38

BASE___________________________________________________________________________________________ 44

META__________________________________________________________________________________________ 44

ISINDEX________________________________________________________________________________________ 48

ImageMap_______________________________________________________________________________________ 48

Formulaires et masques de saisie______________________________________________________________________ 49

Form___________________________________________________________________________________________ 49

Textarea________________________________________________________________________________________ 61

Select__________________________________________________________________________________________ 62

Où tester ses masques ?_____________________________________________________________________________ 64

Tutorials________________________________________________________________________________________ 64

Eléments de style pour la publication électronique______________________________________________ 66

Taille___________________________________________________________________________________________ 66

Consistance______________________________________________________________________________________ 66

Indépendance par rapport au navigateur_______________________________________________________________ 66

Lisibilité________________________________________________________________________________________ 66

Relocation_______________________________________________________________________________________ 66

Date et Signature_________________________________________________________________________________ 66

Les fichiers images_________________________________________________________________________________ 67

Erreurs classiques_________________________________________________________________________________ 67

HTTP_____________________________________________________________________________________________ 69

GET____________________________________________________________________________________________ 70

HEAD__________________________________________________________________________________________ 70

POST___________________________________________________________________________________________ 70

PUT____________________________________________________________________________________________ 71

Codes de statut et d'erreur du protocole HTTP___________________________________________________________ 71

CGI______________________________________________________________________________________________ 74

CGI Environment Variables__________________________________________________________________________ 77

Programmation HTML avec Java_________________________________________________________________ 82

ActiveX__________________________________________________________________________________________ 84

VBScript_________________________________________________________________________________________ 87

JAVASCRIPT :______________________________________________________________________________________ 91

Active Server Pages___________________________________________________________________________ 94

Cascading Style Sheet___________________________________________________________________________ 96

Push,  XML , CDF , OSD______________________________________________________________________________ 97

XML___________________________________________________________________________________________ 97

CDF___________________________________________________________________________________________ 97

OSD____________________________________________________________________________________________ 98

Netcaster________________________________________________________________________________________ 99

Le Protocole S-HTTP_____________________________________________________________________________ 101

Le Protocole SSL________________________________________________________________________________ 102

Front Page 2000________________________________________________________________________________ 105

Quelles différences existe-t-il entre Microsoft FrontPage 98 et Microsoft FrontPage 2000 ?________________________ 110

Appendice A Caractères accentués_____________________________________________________________ 115

Appendice B Code ISO Latin 1____________________________________________________________________ 117

Bibliographie__________________________________________________________________________________ 120

 


 

Définition

 

World Wide Web, littéralement la toile d'araignée d'envergure mondiale, est un vaste système distribué d'informations de type hypertexte. On l'appelle aussi en abrégé Web, WWW ou W3.

 

Avec le déluge d'informations récemment publiées sur Internet et centrées sur le World Wide Web, une erreur classique est de croire qu'Internet et WWW sont synonymes. Même si WWW est devenu la principale cause de trafic sur Internet, il faut se rappeler qu'Internet désigne le moyen physique de véhiculer des données tandis que le World Wide Web est une collection de standards et de protocoles utilisés pour l'accès aux informations disponibles sur Internet.

La définition officielle du World Wide Web est la suivante : "a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents".

 

World Wide Web est devenu un immense service d'information mondial, un système hypertexte global où l'information est distribuée aux quatre coins du monde par des ordinateurs communiquant au moyen des mêmes protocoles. Dans un système hypertexte, certains mots ou images d'un document renvoient à d'autres informations contenues dans d'autres documents distants. Le simple fait de pointer et cliquer avec la souris sur un de ces hyperliens provoque l'affichage du nouveau document qui lui-même contient des pointeurs vers d'autres informations et ainsi de suite à l'infini.

 

Avec un tel système hypertexte, il n'y a plus une façon unique de parcourir un document comme c'est le cas d'un livre. L'utilisation est plus interactive, chaque lecteur sautant d'un document à l'autre au fil des hyperliens qui l'intéresse. L'allégorie de la mer revient systématiquement : on navigue sur Internet, on surfe sur le Web en passant de vague en vague, on utilise un programme navigateur (les anglo-saxons parlent de browser et au Québec, il est question de fureteur).

 

World Wide Web repose sur trois standards:

·       URL, pour nommer et repérer les pièces d'informations disséminées sur le réseau. L'URL agit comme les pages jaunes du bottin téléphonique. L’URL désigne l'adresse d'un serveur Internet et des ressources qu'il offre à la communauté.

·       HTTP le protocole de transfert de données entre machines baptisé HTTP c'est-à-dire HyperText Transfert Protocol.

·       HTML le langage de description de page

Historique

 

Tout a commencé au CERN de Genève, le fameux laboratoire de recherche nucléaire. Tim Berners-Lee y introduit en mars 1989 un projet de système hypertexte qui permettrait à la communauté des physiciens de s'échanger aisément des informations. La première version du World Wide Web ne fit son apparition au CERN qu'en mai 1991 tandis qu'il fallut attendre janvier 1992 pour une version destinée au grand public.

 

Le projet n'obtint pas directement du succès car ces premiers outils étaient difficiles à installer et  configurer, la documentation étant elle-même publiée au format HTML.

 

Le premier client Web en mode texte apparut en 1992 à l'Université du Kansas. Il s'agit de Lynx, toujours aussi populaire.

 

Tout démarra vraiment en février 1993 quand Marc Andreessen, un étudiant du National Center for Supercomputing Applications (NCSA) de l'Université d'Illinois annonça Mosaic, un navigateur Web sous X Window. Mosaic attira tout de suite l'attention de la communauté Internet car il était simple à utiliser et supportait d'autres protocoles comme Gopher et FTP. La consécration date de fin 1993 quand apparurent des versions Macintosh et Windows. Mosaic est vite devenu synonyme de Web de la même manière qu'on parle de bic pour un stylo-bille ou de kleenex pour des mouchoirs en papier.

En 1993, apparurent aussi Cello, un autre navigateur Web réalisé à l'Université Cornell, httpd, le serveur Web du NCSA ainsi que les premiers serveurs pour Windows NT et Macintosh.

 

L'utilisation privée de Mosaic ou de son nom est tout à fait libre mais couverte par un copyright. De plus en plus de compagnies ont acquis une licence auprès de NCSA pour une utilisation commerciale de Mosaic. C'est le cas par exemple de Quarterdeck, Santa Cruz Operation, Spry ou Spyglass. Microsoft a son browser dans le futur Plus Pack de Windows 95, IBM a son WebExplorer sous Warp et sous Windows, Novell promet son Corsair, il y a des navigateurs qui apparaissent dans tous les logiciels commerciaux : Internet Chameleon, SuperTCP Pro, Internet in A Box, B&W TCP/IP, IBM Connexion for Windows, OnNet, NetCruiser et les autres.

 

Une partie de l'équipe de développement originale du NCSA Mosaic a fondé une société commerciale articulée autour des logiciels clients et serveurs World Wide Web. Marc Andreesen, concepteur original, s'est associé à Jim Clark, transfuge de Silicon Graphics, pour fonder Mosaic Communications rebaptisée ensuite Netscape. Netscape s'impose de plus en plus comme un standard de fait en tant que logiciel de navigation client.

 

Début 1995, on estimait à 30000 le nombre de serveurs WWW, ce nombre doublant tous les 53 jours. Le nombre d'utilisateurs du Web était à la même époque estimé à 4 millions sur un total de 20 millions d'utilisateurs d'Internet.


 

URL ou Universal Resource Locator

 

Un URL fournit une méthode standardisée pour localiser un document et n'importe quel type de ressources sur Internet. Un URL est toujours représenté sous le format protocole://machine.domaine[:port]/[chemin_d'accès]

 

Les protocoles acceptés sont les suivants :

- http pour Hyper Text Transport Protocol

- file pour un fichier local

- ftp pour un transfert de fichier via FTP

- gopher pour le système de navigation de l’Université du Minnesota

- WAIS pour une recherche sur le Wide Area Indes System

- telnet pour se connecter en mode texte à un serveur distant

- news pour accéder à une conférence de type Usenet newsgroup

 

Notez qu'on peut également recourir au mot clé mailto pour avoir accès au courrier électronique mais dans ce cas, les deux // ne sont pas utilisés. Pour envoyer un message électronique à l'auteur, il faudra utiliser mailto:elapaille@bix.com et non mailto://elapaille@bix.com comme dans les autres cas.

Une convention est d’appeler webmaster la personne qui a la charge d’administrer un site W3. Pour que les utilisateurs puissent lui signaler des problèmes de liens périmés, de documents incorrects, il est classique de publier l’adresse du webmaster en fin de la page de garde. Exemple : mailto:webmaster@wweb.com

 

Pour des fichiers locaux sur des machines MS-DOS, s’il est nécessaire de donner un chemin d’accès complet, il faut utiliser le slash au lieu du backslash et trois / au lieu de deux après le mot file. Exemple file:///c:/rtfm/default.html

 

Pour des transferts FTP, le nom d’utilisateur sera par défaut anonymous. Pour spécifier un autre nom d’utilisateur et un mot de passe, on peut écrire l’URL comme suit ftp://[nom[:password]@]/host/past/file.

Exemple : ftp://elapaille:tintin@liege.rtfm.be/logiciel/test.zip

 

Notez que le nom du protocole est toujours en minuscules à l'exception de WAIS. Certains programmes navigateurs, comme Lynx ou NCSA Mosaic, n'acceptent pas le nom du protocole en majuscules même si d'autres le tolèrent. Par contre, le nom de la machine où se trouve le document peut être donné en minuscules, majuscules ou un mélange des deux.

 

La machine serveur peut être représentée par un nom de domaine ou par une adresse IP même si cette dernière méthode est peu recommandable vu son manque de souplesse.

 

Le numéro du port et les deux points qui le précèdent sont facultatifs. S'ils ne sont pas mentionnés, le numéro de port par défaut est utilisé. Voici les ports les plus fréquents :

echo                7

discard             9

systat              11

daytime             13

netstat             15

qotd                17

chargen             19

ftp                 21

telnet              23

smtp                25

time                37

rlp                 39

nameserver          42

whois               43

domain              53

mtp                 57

tftp                69

gopher              70

rje                 77

finger              79

http                82

link                87

supdup              95

hostnames           101

ns                  105

pop2                109

pop3                110

sunrpc              111

auth                113

sftp                115

uucp-path           117

nntp                119

 

Le port est une abstraction utilisée par les protocoles de transports Internet pour permettre plusieurs connexions simultanées sur un même hôte.

 

Le slash final après le nom de la machine serveur n'est pas obligatoire mais nous recommandons de le conserver et d'écrire http://www.rtfm.be/ plutôt que http://www.rtfm.be

 

Si la page HTML n’est pas mentionnée, le serveur WWW ouvrira par défaut une page default.html sous Unix ou default.htm sous MS-Dos.

 

Certains caractères spéciaux comme l'espace, les tabulations, le retour chariot, le dièse ou le point d'interrogation sont acceptés à condition d'être représentés sous la forme d'un signe % suivi du code ASCII du caractère exprimé en hexadécimal. L'espace, code ASCII 32 en décimal, devient ainsi %20 en hexadécimal.


 

Quelques programmes navigateurs domaine public et shareware

 

Dos

·       DosLynx ftp://ftp2.cc.ukans.edu/pub/WWW/DosLynx

 

Windows

·       Cello ftp://ftp.law.cornell.edu/pub/LII/Cello

·       InternetWorks ftp://ftp.booklink.com

·       WinWeb ftp://ftp.einet.net/einet/pc/winweb

·       NCSA Mosaic ftp://ftp.ncsa.uiuc.edu/Web/Mosaic

·       Netscape ftp://ftp.netscape.com/Netscape (39 $)

·       SlipKnot ftp://ftp.netcom.com/pub/pbrooks/slipknot (29$)

 

Macintosh

·       Samba ftp://ftp.w3.org/pub/www/bin/mac/old

·       MacWeb ftp://ftp.einet.net/einet/mac/macweb

·       NCSA Mosaic ftp://ftp.ncsa.uiuc.edu/Web/Mosaic

·       Netscape ftp://ftp.netscape.com/Netscape (39 $)

 

Email

Il est même possible d’obtenir des pages HTML par courrier électronique en envoyant un email à

·       listproc@www0.cern.ch

Si le corps du message contient la commande  send <URL>, vous recevrez par courrier le document réclamé avec une liste des documents repris à l’intérieur de manière à procéder à des requêtes supplémentaires

Si le corps du message contient deep <URL> , vous recevrez tous les documents cités dans l’URL spécifié.

Exemple : mailto:listproc@www0.cern.ch avec le message send http://info.cern.ch

 

·       webmail@curia.ucc.ie avec dans le corps du message help

 


 

 

 

HTML

 

HTML signifie Hyper Text Markup Language. Le terme markup se réfère aux marques, aux annotations manuscrites placées par l'auteur sur un document pour préciser à l'imprimeur comment il doit être présenté. Avec l'apparition des ordinateurs et des photos-composeuses, ces marques ont été intégrées dans le texte mais chaque matériel de photocomposition réclamait son propre langage "markup". Au début des années 80, le CGA (Graphics Communications Association) a mis au point le premier langage markup généralisé baptisé GenCode. Au même moment, un comité de normalisation ANSI publiait le standard Generalized Markup Language (GML). En décembre 1986, les deux comités ont unis leurs efforts pour définir le standard SGML (Standard Generalized Markup Language) accepté par l'ISO (International Standard Organization) sous le numéro 8879.

 

Le SGML est un standard ouvert qui n'est lié ni à une plate-forme, ni à un constructeur. Les fichiers SGML sont stockés sous forme de simples textes ASCII et peuvent donc être utilisés par n'importe quelle machine.

 

Le langage SGML est extrêmement pratique pour réaliser des publications à la demande. Le but est de pouvoir, à partir d'un document de base unique, publier différentes versions s'adressant à des publics différents.

 

SGML est un langage de description de données qui divise un document en deux parties : le DTD (Data Type Definition) et les données elles-mêmes. Le DTD est une sorte de dictionnaire qui décrit les différents "tags" acceptés dans le document et les relations qui les unissent. Le corps du document contient les données délimitées par les "tags" définis dans le DTD.

 

Le langage HTML n'est qu'une instance du langage SGML définie par un DTD spécifique. Un document HTML est un simple fichier texte ASCII qui contient des "tags" HTML. Sur un serveur Unix, un document HTML porte généralement l'extension .html tandis que sur les PC, limités à des noms de fichiers de type 8.3, l'extension est .htm.

 

La notion essentielle à bien comprendre avant de se lancer dans la création de pages HTML est que comme tous les langages “markup”, HTML ne se soucie pas de l’apparence d’un document mais bien de sa structure. Chaque navigateur World Wide Web représentera différemment des objets HTML comme la ligne horizontale ou le titre.  L’HTML n’imposera jamais une police de caractères, une taille de police ou une largeur d’écran. C’est au navigateur de choisir en fonction de la station d’accueil, de la résolution d’écran, des polices disponibles. Il faudra donc toujours veiller à essayer les pages HTML nouvellement réalisées avec plusieurs navigateurs.

Une autre notion à garder en tête est que le langage HTML est en constante évolution, chaque navigateur s’adaptant plus ou moins rapidement à cette évolution.

 

Chaque commande du langage HTML débute par un “<“ et se termine par un “>“. Les commandes peuvent s’écrire en minuscules ou majuscules bien qu’on utilise généralement les caractères majuscules par souci de lisibilité.

Notre première page HTML

Nous n'avons besoin d'aucun logiciel spécialisé pour créer notre première page HTML. Un simple éditeur texte comme Notepad peut faire l'affaire.

Créons par exemple une page très simple contenant le minimum d'informations autorisé et qui nous servira de canevas pour la suite. Encodons ceci

<HTML>

    <HEAD>

        <TITLE>

            My title

        </TITLE>

    </HEAD>

    <BODY>

        The body of my document

    </BODY>

</HTML>

Le contenu des balises peut être tapé en minuscules ou en majuscules sans importance. Le texte peut être tapé au kilomètre sans mise en page particulière. Si nous avons opté pour une mise en page avec indentation, c'est pour mieux visualiser les balises imbriquées et pour localiser plus aisément les balises de début et de fin . Une balise manquante est de la sorte plus rapidement détectée. La plu part des éditeurs HTML vous offriront une vision du code en plusieurs couleurs, le bleu étant ici réservé aux balises et le noir au texte proprement dit.

Sauvons ce document avec l'extension .htm ou .html mais surtout pas .txt. Ouvrons un navigateur tel Internet Explorer ou Netscape et chargeons le document que nous venons de réaliser.

Le résultat donne ceci

Vous voyez que le contenu de la balise <Title> est reprise dans la barre de titre du navigateur tandis que le contenu de <body> apparaît dans le corps du document. Rétrécissons la largeur de notre navigateur jusqu'à ce qu'elle soit inférieure à la taille de notre phrase "the body of my document". Vous voyez que le navigateur se charge automatiquement de la mise en page du texte en fonction de la largeur disponible.

Passons maintenant en revue les balises découvertes grâce à ce premier exercice

HTML

Chaque document HTML devrait débuter en s’identifiant comme tel, le tag <HTML> tout au début du texte et la commande </HTML> à la fin

En-tête

L’en-tête du document est réservé aux meta-informations (les informations relatives au document) comme son titre. Ces meta-informations doivent être placées entre les tags <HEAD> de début et </HEAD> de fin. Même si l’en-tête est optionnel, il est important de l’inclure dans un document pour éviter que le logiciel serveur n’ait à balayer tout le document pour y retrouver l’information recherchée.

Dans l’en-tête, on trouvera les commandes suivantes

1.        TITLE (la seule véritablement essentielle)

2.        ISINDEX

3.        BASE : pointe sur un répertoire de référence exemple <base href="http://WWW.BEST.BE">

4.        LINK

5.        NEXTID

6.        META

Titre

<TITLE> Mon titre </TITLE>

Chaque document HTML, pour être correct, doit disposer d'un titre. Le titre apparaît le plus souvent dans la barre de titre du navigateur Web. Son but est de pouvoir identifier le document dans un ensemble plus large comme un index WAIS par exemple. Le titre d’un document HTML sert aussi lorsqu’un navigateur World Wide Web dispose d’une fonction "hotlist" ou "bookmark" pour fournir un accès rapide à vos documents favoris.

Le titre est limité à 64 caractères y compris les espaces et ne doit normalement contenir que les 128 premiers caractères ASCII (pas de caractères accentués)

Corps du document

Le corps du document, ce qui sera effectivement affiché par le navigateur Web, est balisé par les commandes <BODY> et </BODY>. Voici donc à quoi ressemblera un document minimal :

Voici encore quelques balises de base que nous pouvons introduire dans notre exemple pour l'améliorer

<!doctype html public "-//IETF//DTD HTML//EN">

<HTML>

    <HEAD>

        <TITLE>

            My title

        </TITLE>

    </HEAD>

    <!--- comment separator -->

    <BODY>

    The body of my document<BR>

    Here I use BR for a carriage return<P>

    Here I use P for a new parahgraph

    <H1>title level 1</H1>

    <H2>title level 2</H2>

    <H3>title level 3</H3>

    <H4>tille level 4 </H4>

    <H5>title level 5 </H5>

    <H6>title level 6 </H6>

    </BODY>

</HTML>

Nous obtenons le résultat suivant

Commentaires

Les commentaires peuvent être placés n’importe où dans un document HTML à condition de ne pas être imbriqués. Ils sont placés entre les chaînes de caractère <!--- et -->.

Example <!--- this is a comment -->

DocType

DocType est une directive SGML permettant d’identifier un document comme étant de type HTML Cette commande est facultative. La plupart des navigateurs n’en ont pas besoin même s’il est de bon ton pour un éditeur HTML de placer en tête de document une commande de type :

<!doctype html public "-//IETF//DTD HTML//EN">

<Hx> Headings </Hx>

Le langage HTML reconnaît six niveaux de headings : titres hiérarchiques numérotés de 1 à 6. Le niveau le plus élevé est le 1, le plus petit est le 6.

 

Séparateurs

Contrairement à tous les autres systèmes de traitement de texte, le retour de chariot n'a aucune valeur en HTML. C'est le navigateur Web lui-même qui définira le passage à la ligne en fonction de facteurs comme la taille des polices de caractères, la largeur de la fenêtre de visualisation etc. De même, plusieurs espaces dans un document HTML seront ramenés à un seul. La seule façon de forcer le passage à la ligne et de commencer un nouveau paragraphe est d'utiliser le tag <P>

Pour un simple passage à la ligne, utiliser la commande <BR> pour line break.

Pour une ligne horizontale de séparation, utiliser la commande <HR>

Depuis la version 3.0 du HTML, pour faire varier la largeur de la ligne, on utilise le code suivant: <HR WIDTH=75%> .

Cela donne une ligne de 75% de la largeur de l'écran (selon la largeur de la fenêtre choisie par l'usager).

Pour faire varier l'épaisseur de la ligne: <HR SIZE="5"> donne une ligne d'épaisseur 5:

Pour générer plusieurs espaces entre des mots, il faut utiliser un code spécial &nbsp;

Le & désigne le début d'un caractère spécial "numbering space" se terminant par un point-virgule.

 

Pointeurs vers autres documents.

Grâce au langage HTML, vous pouvez créer un hyperlien vers un document local, un document distant ou un signet dans ces deux types de documents.

Anchor

L'hyperlien est créé par l'utilisation du tag <A> pour "anchor" ou ancre.

La syntaxe complète est <A HREF="document">text</A>

où document désigne le document vers lequel on pointe et text représente le texte qui sera affiché pour représenter le lien hypertexte. Le mot "text" apparaîtra souligné en bleu et le curseur se changera en une petite main lorsqu'on passera au-dessus du mot avec la souris.

<A HREF="#bookmark"> crée un lien vers un signet dans le même document.

<A NAME="bookmark"> crée un signet

Listes

Listes numérotées ou Ordered (numbered) lists

<OL>
 
  <LI> oranges
 
  <LI> prunes
 
  <LI> cerises
 
</OL>

Listes non numérotées ou Unordered lists

 <UL>
 
  <LI> pommes
 
  <LI> poires
 
  </UL>

Images

<IMG ATTRIBUTES>
ATTRIBUTES :
ALIGN=alignement top, middle ou bottom.
ALT="text" texte alternatif si le navigateur ne supporte pas les images
WIDTH="x"
HEIGTH="y"
ISMAP
SRC="URL"

La commande <IMG> va nous permettre de placer des images de type GIF ou JPEG dans notre document HTML. C'est une des rares balises HTML à ne pas être associée à une balise de fin. </IMG> n'existe donc pas.

Pour spécifier où se trouve l'image à inclure nous devons utiliser l'attribut SRC="" pointant vers l'URL de l'image comme suit

<IMG SRC=http://www.best.be/inside/nl/gif/inside20/insidenl.gif width=50" height="50" >

Si nous voulons modifier la taille originale de l'image il suffit de spécifier sa largeur et/ou sa hauteur avec les attributs "width" et "height". Il est toujours important d'utiliser l'attribut Alt="text" pour donner une représentation en mode texte de l'image le temps qu'elle soit chargée. Le texte inclus dans Alt apparaîtra sous forme d'infos bulles lorsque vous passerez sur l'image avec la souris.

STYLE

Logique

  • Emphase: <EM>Emphase</EM>
  • Citations: <CITE>Citations</CITE>
  • Variable name: <VAR>Variable name </VAR>
  • Strong Emphase: <STRONG>Strong Emphase</STRONG>
  • Code Source : <CODE>Code Source </CODE>
  • Litteral Caracters <SAMP>Litteral caracters</SAMP>
  • Keyboad Input: <KBD>keyboard input</KBD>
  • Definitions: <DFN>Definitions</DFN>
  • strikes: <STRIKE>Strikes</STRIKE>

Physique

  • Italics: <I>Italic</I>
  • Bold: <B>Bold</B>
  • Underline: <U>Underline</U>
  • TeleType: <TT>Typewriter</TT>

 

TEXTE PREFORMATE

  <PRE>
    #####  ######  #    #   #####
#    #  #  ##
#    #####     ## #
#    #   ## #
#    #  #  ##
#    ######  #    #     #
  </PRE>

 

CITATIONS

<BLOCKQUOTE>
"citation entre guillemets"
</BLOCKQUOTE>

ADRESSE

<ADDRESS>  email   </ADDRESS>

 

Reprenons toutes ces nouvelles balises dans un exemple

<HTML>

    <HEAD>

        <TITLE>My title</TITLE>

    </HEAD>

    <BODY>

    <IMG SRC=http://www.best.be/inside/nl/gif/inside20/insidenl.gif width="100" height="150" alt="logo best">

    <BR>preformated text

<PRE>

*

***

*****

*******

*

CITATIONS</PRE>

<BLOCKQUOTE>

"quotation"

</BLOCKQUOTE>

ADRESSE

<ADDRESS> email </ADDRESS><br>

STYLE<br>

Logical

· Emphase: <EM>Emphase</EM> <br>

· Citations: <CITE>Citations</CITE> <br>

· Variable name: <VAR>Variable name </VAR><br>

· strong Emphase: <STRONG>strong emphase</STRONG><br>

· Source code : <CODE>Source code</CODE><br>

· litteral caracters <SAMP>litteral caracters </SAMP><br>

· keyboard input: <KBD>keyboard input</KBD><br>

· Definitions: <DFN>Definitions</DFN><br>

· strike: <STRIKE>strike</STRIKE><p>

Physical <br>

· Italic: <I>Italic</I><br>

· Bold: <B>Bold</B><br>

· TeleType: <TT>Fixed font typewriter style</TT><br>

. Underline: <U>Underline</U>

</BODY>

</HTML>

qui donnera ceci

 

Caractères spéciaux

Le gros problème du langage HTML est de ne pas supporter les caractères ASCII au-delà de 128. Cela veut dire que je ne peux pas taper directement un é accent dans le code de ma page HTML mais que je dois remplacer cette lettre par un code spécial constitué comme suit:

  • le & ( et commercial) pour marquer le début d'un caractère spécial
  • la lettre à accentuer en minuscules ou en majuscules
  • le type d'accent ( circonflexe, aigu, grave, tilde)
  • le ; pour marquer la fin du caractère spécial

Un é deviendra donc &eacute;

Le texte à encoder devient vite illisible puisque la phrase ci dessus devient

Le gros probl&egrave;me du langage HTML est de ne pas supporter les caract&egrave;res ASCII au del&agrave; de 128

Heureusement Netscape et Internet Explorer acceptent les accents dans le texte mais il est toujours préférable d'encoder proprement vos accents comme le recommande le standard HTML

Puisque les &, les <, les >, les " sont utilisés par le langage HTML, il faudra aussi les remplacer par des caractères spéciaux respectivement &amp; (ampersand) &lt; (less than) &gt; (greater than) &quot; (quote)

 

.

 


TABLE

Dans les premières versions du langage HTML, le positionnement d'éléments en tableaux relevait du cauchemar. Il a fallu attendre la version 3.0 pour enfin voir apparaître la balise <TABLE>. Les tables permettent de diviser l'espace visible du navigateur en zones rectangulaires et de remplir ces zones avec des objets (textes, images, couleurs) permettant un contrôle amélioré de la position de ces objets. Le début et la fin du tableau sont balisés par les marqueurs <table> et </table>. Entre les deux, on place une séquence d'éléments décrivant les diverses parties du tableau : en-tête, pied du tableau, rangées et cellules.

L'ordre de cette séquence d'éléments est important et doit contenir :

  • au moins le marqueur CAPTION
  • éventuellement une ou plusieurs balises COL ou COLGROUP
  • au moins un marqueur THEAD
  • au moins un TFOOT
  • au moins un TBODY
  • sinon au moins un élément de type TR

Partons du cas le plus simple, un tableau composé d'une seule rangée incluant deux cellules

Il faut d'abord créer le tableau avec <TABLE>, définir une nouvelle rangée avec <TR> ( Table Row) et dans cette rangée, créer autant de couples <TD></TD> qu'il n'y a de colonnes dans la rangée. On termine la rangée avec <TR> puis la table avec </TABLE>. Le tableau ainsi constitué aura une largeur calculée en fonction de la taille du plus gros des objets inclus entre les marqueurs <TD></TD>.

 

<TABLE>

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

</TABLE>

 

A l'intérieur d'une cellule, tout est possible, comme placer plusieurs lignes de texte (terminées par <BR> ou <P> ), choisir la couleur des caractères et du fond , créer des hyperliens, placer des images, d'autres tables, etc...

 

Pour ajouter une légende à cette table, nous pouvons utiliser le marqueur <CAPTION> qui accepte comme paramètres ALIGN=, et comme valeurs, TOP, BOTTOM, LEFT, RIGHT (haut, bas, gauche, droite) pour agir sur le placement de la légende.

 

<TABLE>

<CAPTION align="left">Legend</CAPTION>

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

</TABLE>

 

Les attributs pour la balise <TABLE> sont les suivants

 

<TABLE LANG="..." DIR=ltr|rtl ID="..." CLASS="..." ALIGN=left|right|center|justify|bleedleft|bleedright WIDTH="..." COLS=number BORDER="..." FRAME=void|above|below|hsides|lhs|rhs|vsides|box|border RULES=none|basic|rows|cols|all CELLSPACING="..." CELLPADDING="..." CLEAR=left|right|all|"..." NOFLOW UNITS=en|relative|pixels COLSPEC="..." DP="..." NOWRAP></TABLE>

 

Examinons les plus importants

 

WIDTH

 

Plutôt que d'être imposée par la taille des objets inclus dans ses cellules, un tableau peut avoir une largeur définie grâce à l'attribut <TABLE WIDTH="x"> avec x représentant une largeur absolue exprimée en pixels ou bien s'il est suivi d'un signe "%" d'une largeur exprimée en pourcentage de la largeur de la fenêtre de navigation.

 

Si l'attribut WIDTH n'est suivi d'aucune valeur, cela correspond à la valeur par défaut de 100% de la largeur de la fenêtre.

 

Pour les maniaques, il est même possible de définir la largeur d'un tableau en

·         pt=points

  • pi=picas
  • in=inches
  • cm=centimeters
  • mm=millimeters
  • em=em units
  • px=screen pixels.

 

Voici ce que donnera l'exemple de code suivant

<TABLE border ="1" width="80%">

<caption >80%</caption >

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

</TABLE>

<p>

<TABLE border ="1" width="15cm">

<caption> 15 cm</caption >

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

</TABLE>

<p>

<TABLE border ="1" width="150">

<caption> 150 pixels</caption >

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

</TABLE>

<p>

<TABLE border ="1" width="150pi">

<caption> 150 picas</caption >

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

</TABLE>

ALIGN

 

L'attribut ALIGN permet de spécifier la position relative du tableau par rapport à la fenêtre du navigateur :

left

right

center

justify

 

COLS

 

L'attribut COLS spécifie le nombre total de colonnes de la table et aide le navigateur à afficher plus rapidement l'aspect initial du tableau puisque l'attribut COLS n'oblige plus le navigateur à compter tous les <TD> du tableau jusqu'au bout avant de pouvoir afficher le tableau. Il vous faut néanmoins rester logique et avoir une valeur pour COLS qui corresponde au nombre de <TD> de vos rangées.

 

BORDER

 

L'attribut BORDER permet de contrôler la taille du cadre entourant chaque cellule et le tableau. L'attribut BORDER avec comme valeur 0 affiche un tableau sans cadre. L'unité standard est le pixel mais peut être également exprimée en points, picas, cm, mm ou inches. Si l'unité est suffixée par le signe "%"

 

L'exemple

<TABLE border ="1" >

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

</TABLE>

 

<TABLE border ="10" >

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

</TABLE>

 

donnera ceci

 

RULES

 

L'attribut RULES permet d'opter pour la présence ou non des barres séparant lignes et colonnes du tableau. Il accepte les valeurs none, basic, rows, cols, all . Rules = none supprime donc toutes lignes entre cellules et colonnes, rules = rows n'affiche que les lignes horizontales etc.

 

<TABLE border ="1" rules=all>

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

<TR>

<TD>Cell 3</TD>

<TD>Cell 4</TD>

</TR>

</TABLE>

<br>

<TABLE border ="1" rules=none>

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

<TR>

<TD>Cell 3</TD>

<TD>Cell 4</TD>

</TR>

</TABLE>

 

SUMMARY

N'oubliez pas qu'il existe aussi des navigateurs en mode texte pour mal voyants par exemple. Pour ces navigateurs non visuels, l'attribut SUMMARY= permet de laisser un commentaire alphanumérique décrivant contenu et structure de la table.

FRAME

Void [Do not render any borders]
Above [Border on top side only]
Below [Border on bottom side only]
HSides [Render horizontal borders only (top and bottom sides.)]
VSides [Render vertical borders only (left and right sides.)]
LHS [Border on left side only]
RHS [Border on right side only]
Box [Border on all four sides]
Border [Border on all four sides - just like BOX - DEFAULT

L'attribut RULES gère les séparateurs internes d'une table tandis que l'attribut FRAME s'occupe du cadre extérieur d'un tableau. La valeur FRAME=Below vous affichera par exemple un tableau dont seuls les bords inférieurs sont visibles.

CELLSPACING

Espacement entre cellules. Défaut = 2

CELLPADDING

Espacement entre le cadre et le contenu de la cellule. Défaut = 1

BGColor

L'attribut BGColor pour Background Color permet d'allouer une couleur de fond à l'ensemble des cellules d'un tableau. Il faut lui passer comme valeur un triplet RGB ( Red, Green, Blue) en hexadécimal sous forme #RRGGBB ou le nom d'une couleur.

 

(Cfr notre tableau 1)

Background

 

L'attribut background permet de sélectionner une image de fond pour l'ensemble du tableau en précisant simplement son URL du type <table background="http://www.best.be/logo.gif">

TR Table Row

 

A l'intérieur d'un tableau, le couple <TR></TR> permet de délimiter les cellules inclues dans une même rangée.

Les attributs acceptés sont:

Align

L'attribut précise l'alignement horizontal global des cellules de la rangée avec comme valeurs acceptées : Left , Center , Right

BGColor

Définit la couleur de fond d'une rangée. Valeurs : triplet RGB ou nom de couleur

BorderColor

Définit la couleur du bord interne de chaque cellule de la rangée. Valeurs : triplet RGB ou nom de couleur

BorderColorDark

Modifie la couleur de l'effet 3D appliqué au coin supérieur gauche des cellules d'une rangée. Valeurs : triplet RGB ou nom de couleur

BorderColorLight

Modifie la couleur de l'effet 3D appliqué au coin inférieur droit des cellules d'une rangée. Valeurs : triplet RGB ou nom de couleur

Char

Désigne le caractère qui va permettre d'aligner le contenu d'une rangée lors de l'apparition de sa première occurrence. La valeur par défaut est le point

NOWRAP

Permet de désactiver le comportement standard de passage à la ligne automatique et d'augmenter automatiquement la taille des cellules pour contenir la totalité des données des cellules de la rangée:

VAlign

Décrit l'alignement vertical global des cellules de la rangée. Valeurs : Top Middle Bottom Baseline

TD Table Data TH Table Header

 

TD et TH s'utilisent de la même manière : ils définissent des cellules au sein d'une rangée elle-même incluse dans une table

 

 

<table border="1" width="100%">

<tr>

<td width="50%">toto</td>

<td width="50%">tutu</td>

</tr>

<tr>

<th width="50%">titi</th>

<th width="50%">tata</th>

</tr>

</table>

 

donne ceci

 

 

Une cellule de type TH est donc une cellule ordinaire à la seule exception que les caractères sont gras au lieu d'ordinaire et que le contenu des cellules est centré au lieu d'être aligné à gauche.

Abbr

Spécifie un nom abrégé pour une cellule d'en-tête

Align

Alignement horizontal. Valeurs : Left Center Right

Background

Alloue une image de fond à une cellule

BGColor

Couleur de fond de la cellule

BorderColor

Couleur du cadre interne de la cellule

BorderColorDark

Couleur du bord supérieur

BorderColorLight

Couleur du bord inférieur droit

Char

Caractère servant à l'alignement des valeurs numériques

Colspan

Spécifie le nombre de colonnes occupées par une cellule

Dans l'exemple suivant, l'utilisation de colspan=2 pour la cellule de la deuxième rangée permet de doubler sa largeur

<table border="1" width="100%">

<tr>

<td width="50%">toto</td>

<td width="50%">tutu</td>

</tr>

<tr>

<td colspan="2">titi tata</td>

</tr>

</table>

Height

A n'utiliser qu'avec précaution car le résultat est fort variable d'un navigateur à l'autre. netscape supporte mal cet attribut qui permet de définir la hauteur d'une cellule et par conséquent la hauteur de toutes les autres cellules de la rangée.

NOWRAP

Permet de désactiver le comportement standard de passage à la ligne automatique et d'augmenter automatiquement la taille d'une cellule pour en contenir la totalité des données .

Rowspan

Précise le nombre de rangées occupées par une cellule

<table border="1" width="100">

<tr>

<td >1</td>

<td rowspan="2">2</td>

<td >3</td>

</tr>

<tr>

<td >4</td>

<td >5</td>

</tr>

</table>

VAlign

Alignement vertical du contenu de la cellule avec comme valeurs : Top Middle Bottom Baseline

Width

Largeur de la cellule exprimée en pixels ou en pourcentage de la largeur de la fenêtre du navigateur

TFOOT, TBODY

 

Tombés en désuétude, les balises TFOOT et TBODY s'utilisent comme suit

 

<table BORDER="1" COLS="4" >

<caption ALIGN="top">My caption</caption>

<thead>

<tr> <th>Header 1</th> <th>H2</th> <th>H3</th> <th>H4</th> </tr>

</thead>

<tfoot>

<tr> <th COLSPAN=4>My tfoot</th> </tr>

</tfoot>

<tbody>

<tr> <td>Beginning of my tbody</td> <td>5</td> <td>2</td> <td>5</td> </tr>

</tbody>

</table>

 


Les couleurs

Il existe différentes méthodes pour afficher ou représenter des couleurs bien précises sur ordinateur. Une d'elle est appelée la méthode RGB en anglais ou RVB pour Rouge vert Bleu en français. L'idée est d'utiliser de manière additive les couleurs fondamentales Rouge, Verte et Bleue pour créer toutes les autres couleurs du spectre. Vous pouvez imaginer ce monde RGB comme un monde orthogonal en trois dimensions avec une couleur associée à chacun des axes ou comme un ensemble de trois cercles avec intersection

100 % de rouge, 100 % de vert et 100 % de bleu donnent la couleur blanche.

0% de rouge, 0 % de vert et 0% de bleu donne le noir. Le noir n'est donc pas une couleur mais plutôt l'absence de couleur.

Pour un codage plus facile on représente 0% par la valeur 0 et 100% par la valeur 255 (codage sur 1 octet donc 8 bits => une couleur est codée sur 3 x 8bits = 24bits => 16,7 Million de couleurs)

 

Voyons maintenant une série de couleurs de base et leur découpage RGB

gris moyen 127 127 127

Rouge 255 0 0

Vert 0 255 0

Bleu 0 0 255

Jaune 255 255 0

Magenta 255 0 255

Cyan 0 255 255

A l'école primaire, l'instit vous a appris à compter en base 10. Après 1,2,3,4,5,6,7,8 et 9, vous passez à la dizaine en inscrivant 1 dans la case des dizaines et 0 dans la case des unités. Les ordinateurs et donc les informaticiens préfèrent eux travailler en base deux (binaire) avec uniquement des 0 et des 1, en base huit (octal) ou en base 16 (hexadécimal).

 

Couleurs codées selon le système RGB (Rouge, Vert, Bleu) avec des valeurs entre 0 et 255 exprimées en base hexadécimale

Blanc #FFFFFF

Rouge#FF0000

Vert   #00FF00

Bleu   #0000FF

Magenta  #FF00FF

Cyan  #00FFFF

Jaune #FFFF00

Noir   #000000

Gris   #C0C0C0

Orange    #FF7F00

Rose  #BC8F8F

 

<BODY BGCOLOR="#000000" TEXT="#F0F0F0"
LINK="#FFFF00" VLINK="#22AA22" ALINK="#0077FF">

VLINK = Visited Link

ALINK = Activated Link
texte gris sur noir, hyperlien en jaune, bleu-vert lors de l’activation et gris pâle une fois visité.

 

Et c'est justement en hexadécimal que le langage HTML représente les couleurs. En hexadécimal, on ne passe pas à la dizaine mais à la seizaine comme suit

 

Base 10 base 16

----------------

0 --> 0

1 --> 1

2 --> 2

3 --> 3

4 --> 4

5 --> 5

6 --> 6

7 --> 7

8 --> 8

9 --> 9

10 --> A

11 --> B

12 --> C

13 --> D

14 --> E

15 --> F

16 --> 10

32 -->20

48 --> 30

 

255 en décimal devient FF en hexadécimal.

Si vous devez calculer la valeur hexadécimale d'un nombre décimal par exemple 34, le travail consiste à faire des divisions entières par 16 et stocker les restes de ces divisions, jusqu'à temps que l'on trouve 0 comme résultat de division. Vous pouvez bien sûr également utiliser la calculette de Windows en mode scientifique !

Ex 34 / 16 = 2 reste 2 donc 34 en décimal devient 22 en hexa

Une fois que cette valeur est convertie en hexadécimal, on la préfixe du signe # pour signaler qu'on est en base 16. Bref, si vous voulez un fond gris dans vos tableaux, il vous faudra taper <table bgcolor="#C0C0C0">.

Heureusement, il est possible d'utiliser des noms un peu plus romantiques pour désigner les couleurs. Netscape et Internet Explorer devraient reconnaître les 140 noms suivants

  


 


Color

R

G

B

Color

R

G

B

Color

R

G

B

Color

R

G

B

aliceblue

F0

F8

FF

lightseagreen

20

B2

AA

darkslategray

2F

4F

4F

papayawhip

FF

EF

D5

antiquewhite

FA

EB

D7

lightskyblue

87

CE

FA

darkturquoise

00

CE

D1

peachpuff

FF

DA

B9

aqua

00

FF

FF

lightslategray

77

88

99

darkviolet

94

00

D3

peru

CD

85

3F

aquamarine

7F

FF

D4

lightsteelblue

B0

C4

DE

deeppink

FF

14

93

pink

FF

C0

CB

azure

F0

FF

FF

lightyellow

FF

FF

E0

deepskyblue

00

BF

FF

plum

DD

A0

DD

beige

F5

F5

DC

lime

00

FF

00

dimgray

69

69

69

powderblue

B0

E0

E6

bisque

FF

E4

C4

limegreen

32

CD

32

dodgerblue

1E

90

FF

purple

80

00

80

black

00

00

00

linen

FA

F0

E6

firebrick

B2

22

22

red

FF

00

00

blanchedalmond

FF

EB

CD

magenta

FF

00

FF

floralwhite

FF

FA

F0

rosybrown

BC

8F

8F

blue

00

00

FF

maroon

80

00

00

forestgreen

22

8B

22

royalblue

41

69

E1

blueviolet

8A

2B

E2

mediumaquamarine

66

CD

AA

fuchsia

FF

00

FF

saddlebrown

8B

45

13

brown

A5

2A

2A

mediumblue

00

00

CD

gainsboro

DC

DC

DC

salmon

FA

80

72

burlywood

DE

B8

87

mediumorchid

BA

55

D3

ghostwhite

F8

F8

FF

sandybrown

F4

A4

60

cadetblue

5F

9E

A0

mediumpurple

93

70

DB

gold

FF

D7

00

seagreen

2E

8B

57

chartreuse

7F

FF

00

mediumseagreen

3C

B3

71

goldenrod

DA

A5

20

seashell

FF

F5

EE

chocolate

D2

69

1E

mediumslateblue

7B

68

EE

gray

80

80

80

sienna

A0

52

2D

coral

FF

7F

50

mediumspringgreen

00

FA

9A

green

00

80

00

silver

C0

C0

C0

cornflowerblue

64

95

ED

mediumturquoise

48

D1

CC

greenyellow

AD

FF

2F

skyblue

87

CE

EB

cornsilk

FF

F8

DC

mediumvioletred

C7

15

85

honeydew

F0

FF

F0

slateblue

6A

5A

CD

crimson

DC

14

3C

midnightblue

19

19

70

hotpink

FF

69

B4

slategray

70

80

90

cyan

00

FF

FF

mintcream

F5

FF

FA

indianred

CD

5C

5C

snow

FF

FA

FA

darkblue

00

00

8B

mistyrose

FF

E4

E1

indigo

4B

00

82

springgreen

00

FF

7F

darkcyan

00

8B

8B

moccasin

FF

E4

B5

ivory

FF

FF

F0

steelblue

46

82

B4

darkgoldenrod

B8

86

0B

navajowhite

FF

DE

AD

khaki

F0

E6

8C

tan

D2

B4

8C

darkgray

A9

A9

A9

navy

00

00

80

lavender

E6

E6

FA

teal

00

80

80

darkgreen

00

64

00

oldlace

FD

F5

E6

lavenderblush

FF

F0

F5

thistle

D8

BF

D8

darkkhaki

BD

B7

6B

olive

80

80

00

lawngreen

7C

FC

00

tomato

FF

63

47

darkmagenta

8B

00

8B

olivedrab

6B

8E

23

lemonchiffon

FF

FA

CD

turquoise

40

E0

D0

darkolivegreen

55

6B

2F

orange

FF

A5

00

lightblue

AD

D8

E6

violet

EE

82

EE

darkorange

FF

8C

00

orangered

FF

45

00

lightcoral

F0

80

80

wheat

F5

DE

B3

darkorchid

99

32

CC

orchid

DA

70

D6

lightcyan

E0

FF

FF

white

FF

FF

FF

darkred

8B

00

00

palegoldenrod

EE

E8

AA

lightgoldenrodyellow

FA

FA

D2

whitesmoke

F5

F5

F5

darksalmon

E9

96

7A

palegreen

98

FB

98

lightgreen

90

EE

90

yellow

FF

FF

00

darkseagreen

8F

BC

8F

paleturquoise

AF

EE

EE

lightgrey

D3

D3

D3

yellowgreen

9A

CD

32

darkslateblue

48

3D

8B

palevioletred

DB

70

93

lightpink

FF

B6

C1

lightsalmon

FF

A0

7A

 

 

Cette page couleur est disponible sous http://mogwai.netline.be/forem/html/color.htm

Soyez prudents dans le choix de vos couleurs. La plupart de vos utilisateurs n'ont à leur disposition qu'une palette de 256 couleurs dont Windows et Mac OS en ont déjà exploité 40. Il ne vous reste donc qu'une palette de 216 couleurs pour Netscape ou IExplorer. En respectant cette palette de base, vous éviterez l'effet de dithering où la couleur à afficher est simulée par une trame placée sur une couleur de base

Pour obtenir cette palette de base, il suffit de respecter la convention suivante : ne choisir que des valeurs RGB dans la série 00, 33, 66, 99, CC et FF. Vous obtiendrez ainsi des couleurs pures visibles même avec les palettes les plus réduites. Retrouvez cette palette de base à l'URL http://mogwai.netline.be/forem/html/216.HTM

 

 


Frames

 

La notion de "frame", que nous baptiserons cadre en français, a mis longtemps pour faire partie des spécifications HTML. Elle a été inventée par Netscape dans la version 2.0 de son navigateur pour subdiviser la fenêtre principale du browser en une série de zones dont le contenu de certaines peut être conservé de manière constante pendant que le contenu d'autres est remplacé ou déroulé. Ces zones, ou frames, constituent un ensemble de sous-documents séparés et qui peuvent être contrôlés individuellement. Le concept de cadres a réjoui tous les metteurs en page même s'il s'écarte considérablement de la philosophie de base du langage HTML. En effet, comment voulez vous représenter des cadres dans un navigateur pensé pour les mal voyants ?

D'abord chasse gardée de Netscape, le concept de frame n'est apparu officiellement que dans la version 4 des spécifications du langage HTML.

Pour créer une page HTML constitué d'une série de sous-documents HTML, il faut d'abord faire appel à la balise "frameset" où nous allons définir l'agencement et le nombre de frames constituant la page principale.

<Frameset> viendra en lieu et place de la balise <body> qui marquait jusqu'à présent le début du corps du document.

Nous placerons ensuite une série de balises <frame> entre les balises <frameset> et </frameset>. Enfin, il ne faudra pas oublier de penser à tous ceux qui, faute d'un navigateur récent, n'auront pas accès à nos jolis cadres et qu'il faudra avertir de notre problème de compatibilité.

Frameset contrôle la mise en page des sous documents HTMl dans la fenêtre principale du navigateur. Il permet la division de la fenêtre en une série de lignes et de colonnes à la taille dynamique. Plusieurs frameset peuvent être imbriqués.

Puisque la balise <frameset> vient se substituer à l'élément <body> habituel, il a fallu penser à la compatibilité descendante et introduire la balise <body> à l'intérieur d'une balise <noframes> Les navigateurs supportant les frames ignoreront ainsi la balise <noframes> tandis que les navigateurs plus anciens allergiques aux frames ignoreront les balises <frameset>, <frame> et <noframes> pour ne retrouver que la balise <body> qu'ils attendent.

Attention, ne jouez pas de trop avec les frames. Beaucoup d'utilisateurs y sont allergiques, se plaignant par exemple de la lenteur de représentation et de la surcharge de travail à l'intérieur des navigateurs. Le cadrage des frames est trop sensible à la résolution d'écran et ne sera probablement pas idéal dans toutes les tailles d'écran.

Frameset

Chaque balise FRAMESET peut contenir des attributs ROWS et COLS, ROWS indiquant que la fenêtre sera découpée en zones horizontales tandis que COLS procède à un découpage vertical.

Si aucun des attributs ROWS et COLS n'est employé, le frameset sera constitué d'une seule ligne horizontale occupant toute la largeur de l'écran.

Voici notre premier exemple

<html>
<head>
<title>Frames Example</title>
</head>
<frameset ROWS="40,25%,*">
<frame SRC="frame1.html" NAME="frame1">
<frame SRC="frame2.html" NAME="frame2">
<frameset COLS="30%,*">
<frame SRC="frame3.html" NAME="frame3">
<frame SRC="frame4.html" NAME="frame4">
</frameset>
<noframes>
<body>
<p>This browser does not support frames.</p>
</body>
</noframes>

</frameset>
</html>

En gros, nous avons défini un premier cadre de 40 pixels de haut et un second prenant 25 % de la hauteur de la fenêtre. Le reste de la hauteur est allouée au dernier cadre qui est lui-même un frameset imbriqué constitué de deux cadres occupant respectivement 30 et 70 % de la largeur de la fenêtre. Chaque frame doit pointer sur une page HTML ordinaire. Par exemple, la page frame4.html incluse dans le frameset et visible dans l'illustration ci-dessous contient le code HTML suivant

<html>
<head>
<title>Frame 4</title>
</head>

<body>
<p align="center">4</p>
</body>

</html>

Enfin, notez la balise <body> insérée dans <noframes> qui affichera une page alternative pour les navigateurs non compatibles.

Image1.jpg (38520 bytes)

Border

Cet attribut optionnel permet de définir l'épaisseur des cadres inclus dans le frameset. Il accepte toute valeur entière correspondant à un nombre de pixels. BORDER=0 est équivalent à l'attribut NOFRAMEBORDER.

BorderColor

Tout aussi optionnel, l'attribut BorderColor définit la couleur à utiliser pour dessiner le bord des cadres. Comme nous l'avons vu dans la leçon 2, l'attribut est défini sous forme d'un triplet de valeurs RGB ou par le nom d'une couleur.

Cols

Cet attribut précise que l'espace de travail va être découpé en colonnes. Les valeurs de cet attribut sont séparées par des virgules et représentant les largeurs horizontales de chaque cadre inclus dans le frameset. Les valeurs sont exprimées en pixel ou en pourcentage de la largeur du frameset, le joker * peut également être utilisé pour occuper le reste de la largeur disponible.

FrameBorder

Cet attribut permet de décider si les cadres du frameset disposeront ou non d'un bord visible. Attention, les valeurs admises sont Yes et No chez Netscape, 1 et 0 chez Microsoft.

FrameSpacing

L'attribut FrameSpacing sert à définir l'espace entre les cadres. Il s'exprime en valeurs positives correspondant à des pixels.

 

Rows

Cet attribut définit un espace de travail découpé en lignes. Les valeurs de cet attribut sont séparées par des virgules et représentant les hauteurs de chaque cadre inclus dans le frameset. Les valeurs sont exprimées en valeurs absolues ou en pourcentage de la hauteur du frameset, le joker * peut également être utilisé pour occuper le reste de la hauteur disponible.

 

Frame

A l'intérieur d'un FRAMESET, chaque FRAME permet de définir l'URL et les attributs d'un cadre. Chaque FRAME porte un nom qui l'identifie de manière à pouvoir devenir la cible qui va accueillir le résultat d'un hyperlien.


BorderColor

Contrôle la couleur utilisée pour le bord d'un cadre. Cette valeur, un triplet RGB ou un nom de couleur annule la couleur préalablement définie dans le FRAMESET.

FrameBorder

Annulant l'instruction FRAMEBORDER du FRAMESET, cet attribut contrôle l'affichage d'une bordure autour du cadre. Les valeurs admises sont Yes et No chez Netscape, 1 et 0 chez Microsoft.

 

MarginHeight

MarginHeight offre au créateur d'une page HTML la possibilité de définir la taille en pixels des marges supérieures et inférieures du cadre.

MarginWidth

De la même manière, MarginWidth permet de contrôler la taille des marge gauches et droite du cadre courant.

Name

Très important, cet attribut va nous permettre de désigner chaque frame par un nom symbolique que nous pourrons exploiter par la suite avec l'attribut TARGET des balises A, AREA, BASE, et FORM . Le nom doit impérativement commencer par un caractère alphanumérique.

NoResize

Cet attribut s'emploie sans valeurs pour interdire à l'utilisateur de modifier la taille du cadre courant.

Scrolling

L'attribut Scrolling permet de jouer sur la présence ou non des barres de défilement horizontale et/ou verticale. Les valeurs admises sont Auto [ valeur par DEFAUT, le navigateur décide lui-même], Yes [toujours une barre de défilement] et No [jamais de scrollbar]

Src

L'attribut SRC attend comme argument l'adresse URL du document HTML à insérer dans ce cadre.


Poursuivons l'exemple de tout à l'heure avec les nouvelles instructions que nous venons de rencontrer

<html>

<head>

<title>Frames Example</title>

</head>

<frameset rows="116,48%,*">

<frame SRC="frame1.html" NAME="frame1" scrolling="yes">

<frame SRC="frame2.html" NAME="frame2" scrolling="no" noresize>

<frameset cols="30%,*">

<frame SRC="frame3.html" NAME="frame3" scrolling="auto" marginwidth="50" marginheight="50">

<frame SRC="frame4.html" NAME="frame4" bordercolor="#FF0000">

</frameset>

<noframes>

<body>

<p>This browser does not support frames.</p>

</body>

</noframes>

</frameset>

</html>

En voici le résultat

Image2.jpg (36755 bytes)

Remarquez que nous avons imposé une scrollbar dans la cadre 1 avec l'instruction scrolling="yes". L'instruction noresize dans le cadre 2 nous empêche maintenant de manipuler la taille du cadre 2. Pour la cadre 3, notre navigateur a décidé d'afficher une scrollbar et a utilsé des marges importantes suite à nos instructions scrolling="auto" marginwidth="50" marginheight="50". Enfin, notez au passage le bord rouge du cadre 4 résultant de notre commande bordercolor="#FF0000"

Noframes

FrontPage 97 générait du code <NOFRAMES> incorrect. J'ai donc vu passer une génération de graphistes ayant appris l'HTML avec FrontPage et exploitant incorrectement cette balise. De même, une erreur assez courante est le recours aux incorrects <NOFRAME> or <NO FRAMES> qui sont sans conséquence tant que notre navigateur reconnaît les frames. Evitez les phrases du genre "votre navigateur ne supporte pas les frames, cliquez ici pour en obtenir un". Certains utilisateurs préfèrent ne pas utiliser les frames ou n'ont pas la possibilité de le faire sinon ils auraient déjà acquis un navigateur plus récent. Ne les frustrez pas davantage, créez leur plutôt grâce à la balise <BODY> une page qui leur permet d'accéder à votre site quel que soit leur bon vieux Netscape 1.3 ou Explorer 2.0.

 

Frame target

Classiquement, nos cadres vont surtout nous servir à conserver à l'écran un menu immuable que nous ne devrons pas recréer pour chaque item de ce menu. Prenons le cas ci-dessous où nous optons pour la plus classique des présentations Web

 

Image3.jpg (36480 bytes)

 

Notre fenêtre du navigateur est divisée en deux cadres, le premier utilisant 12 % de la largeur totale, le second le reste de cette largeur. Notre page complète s'appelle index.htm. Elle fait appel dans le cadre de gauche baptisé "framel" à une page HTML "frameg.html". Le cadre droit , appelé "framer" accueillera dans un premier temps la page frameone.html et servira de cible à tous les hyperliens lorsque nous sélectionnerons un URL dans le cadre de gauche.

 

<html>

<head>

<title>Frames Example</title>

</head>

<frameset cols="12%,*">

<frame SRC="frameg.html" NAME="framel" scrolling="no" marginwidth="5" marginheight="5"

noresize>

<frame SRC="frameone.html" NAME="framer" scrolling="auto">

<noframes>

<body>

<p>This browser does not support frames.</p>

</body>

</noframes>

</frameset>

</html>

Notre page frameg.html contient elle ceci

<html>

<head>

<title>New Page 1</title>

</head>

<body>

<p align="left"><a href="frameone.html" target="framer"><big><big>Lien 1</big></big></a></p>

<p align="left"><a href="frametwo.html" target="framer"><big><big>Lien 2</big></big></a></p>

<p align="left">&nbsp;</p>

</body>

</html>

 

Classiquement, quand nous cliquons sur un hyperlien, son contenu remplace le contenu existant dans la même fenêtre du navigateur. Ici, avec nos cadres, nous avons désormais plusieurs documents dans une seule fenêtre et nous allons pouvoir définir vers quel cadre l'hyperlien sera redirigé en fonction du nom symbolique que nous lui avons attribué. Cette redirection sera opérée par l'attribut TARGET suivi du nom de notre cadre. Cet attribut TARGET est utilisable dans les balises A, AREA, BASE et FORM

Conventional behavior when clicking on a hyperlink or submitting a form was to have the result load on top of the current document in the browser window. With frames, we now have multiple documents in a single browser area. It makes sense to be able to address specific frames in a FRAMESET structure in such actions. The assignment of frame identity is accomplished via the NAME attribute in the FRAME tag. The addressing of these frames occurs when a user initiates an action command with a TARGET attribute that specifies the NAME of a frame to use as a destination for its action.

Le nom de cadre vers lequel pointe TARGET doit impérativement commencer par un caractère alphanumérique. Les noms commençant par un caractère de soulignement "_" sont des noms spéciaux réservés.

TARGET="_blank"

Avec cette cible spéciale, la page hyperlien sera toujours chargée dans une nouvelle fenêtre vide.

TARGET="_self"

Cette cible permet de charger le document dans la fenêtre elle-même où l'hyperlien a été sélectionné. C'est la valeur par défaut.

TARGET="_parent"

Cette cible provoque le chargement de la page dans le document qui sert de parent au FRAMESET courant. Si le document n'a pas de parent, le comportement sera identique à celui provoqué par TAREGET = "_self".

TARGET="_top"

Cette cible va faire en sorte de charger la page HTML dans le corps de la fenêtre principale et sera très pratique si votre page de cadres boucle sur elle-même.

 


 

BASE

La balise <BASE> exploite elle aussi le même attribut TARGET. <BASE> se place dans l'en-tête d'une page HTML entre <HEAD> et </HEAD>. Elle permet de fournir un point de référence pour interpréter tous les hyperliens relatifs inclus dans un document. Imaginez par exemple un lien relatif tel celui-ci

< A HREF="/pub/mypage.htm"> Ma page </A>

ou celui-ci

<IMG SRC="my.gif">

Ces liens ne sont pas absolus puisqu'ils ne mentionnent pas l'adresse du site de base mais juste un chemin d'accès relatif par rapport à la racine de ce site. Si quelqu'un sauve votre page localement en en copiant le code HTML, le lien relatif ne fonctionnera plus à moins que vous ne forciez avec la balise <BASE> le chemin absolu vers le site original.

 

Attributs

Href

L'attribut HREF suit impérativement la balise BASE pour désigner l'URL de base qui va servir à recréer un lien absolu vers vos documents

Target

L'attribut TARGET est facultatif et s'emploie de la même façon qu'avec FRAMESET

 

Example

<base HREF="http://www.foo.com" TARGET="_top">

 

META

Comme la balise <BASE>, le tag <META> s'emploie à l'intérieur de l'en-tête du document HTML entre les balises <HEAD> et </HEAD>. META est un élément extensible, contenant toujours une paire Nom/Valeur, et permettant de préciser des meta-informations sur les contenus qui vont suivre et qui vont pouvoir être exploités par le serveur ou le client HTTP.

Ses usages les plus courants sont les suivants

Client Pull:

Cette commande META va pouvoir être utilisée pour charger un document après un certain nombre de secondes en utilisant l'attribut HTTP-EQUIV et la valeur REFRESH. L'attribut CONTENT sera soit une galeux X représentant le nombre de sondes à attendre avant de réactualiser la page courante où une combinaison des valeurs X en secondes et URL de la page à charger séparés par un point virgule.

Syntaxe 1:

<meta HTTP-EQUIV="refresh" CONTENT="[N]">
Syntaxe 2:

<meta HTTP-EQUIV="Refresh" CONTENT="5; URL=http://www.foo.com/x.htm">

Dans ce deuxième exemple, la page actuelle disparaîtra automatiquement après 5 secondes au profit d'une nouvelle page http://www.foo.com/x.htm

 

 

Editor Identification:

La valeur GENERATOR est très courante dans les pages HTML et sert à désigner le type d'éditeur qui a généré le code HTML

Syntaxe: <meta NAME="GENERATOR" CONTENT="[Editor Name]">

Search Engine Identification:

Deux commandes META vont nous être très utiles pour faciliter l'indexation de nos documents par des moteurs de recherche internes ou externes.

La valeur KEYWORDS est suivie d'une liste de mots-clés, séparés par des virgules, et représentant une sélection des mots les plus importants du document.

La valeur DESCRIPTION, sera ignorée par votre navigateur, mais sera très prisée par les robots chargés d'indexer votre site et qui vont y trouver un descriptif général de votre page HTML

Syntaxe 1: <meta NAME="Keywords" CONTENT="[Search Engine Keywords]">
Syntaxe 2: <meta NAME="Description" CONTENT="[Search Engine Description]">

Browser Cache Override:

La valeur EXPIRES va permettre de donner une date de péremption à notre document. Les navigateurs ne doivent plus conserver cette page dans leur cache au-delà de la période d'expiration

Syntaxe 1: <meta HTTP-EQUIV="Expires" CONTENT="[Date Value]">

PICS Identification

 

Une commande META permet aux parents ou gestionnaires de sites d'attribuer une cote morale aux contenus
de pages Web selon la norme PICS (Platform for Internet Content Selection) avalisée par le consortium W3

Voici par exemple, la balise META trouvée sur le site www.playboy.com pour éviter à nos petits chérubins de s'encanailler sur le WEB.

<meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.rsac.org/ratingsv01.html" l gen true comment "RSACi North America Server" for "http://www.playboy.com" on "1996.05.04T06:51-0800" r (n 4 s 3 v 0 l 4))'>

 

En gros, cela signifie qu'une cote morale a été définie pour ce site par le Recreational Software Advisory Counsil en date du 4 juin 1996

Nudité 4 (maximale)

Sexualité 3

Violence 0

Crudité du langage 4

A vous maintenant de paramétrer votre navigateur pour bloquer tout accès à des pages qui dépasseraient votre seuil acceptable. Dans l'Internet Explorer 4 ou 5, choisissez le menu Tools/Internet Options puis l'onglet Contents et le bouton Content Advisor. Vous tomberez sur ceci.

Image4.jpg (39060 bytes)

Inter-page Transition Filter Effects

Une syntaxe spéciale, uniquement connue d'Internet Explorer 4 et 5, permet de placer des effets de transition entre vos pages HTML

Syntaxe:

<meta HTTP-EQUIV="[event]" CONTENT="RevealTrans(Duration=[Seconds],Transition=[Transition Type])">
avec [event] égal à Page-Enter, Page-Exit, Site-Enter, ou Site-Enter
et [Transition Type] un entier de 0 à 23 représentant un effet particulier

Exemple

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=1)>

<META http-equiv="Page-Exit" CONTENT="RevealTrans(Duration=2.500,Transition=6)">

Values

0

Box in

1

Box out

2

Circle in

3

Circle out

4

Wipe up

5

Wipe down

6

Wipe right

7

Wipe left

8

Vertical blinds

9

Horizontal blinds

10

Checkerboard across

11

Checkerboard down

12

Random dissolve

13

Split vertical in

14

Split vertical out

15

Split horizontal in

16

Split horizontal out

17

Strips left down

18

Strips left up

19

Strips right down

20

Strips right up

21

Random bars horizontal

22

Random bars vertical

23

Random

 

 


 

ISINDEX

 

La commande ISINDEX dans le navigateur Netscape génère la création d’une boîte de saisie de texte.

 

ImageMap

Cette section décrit l'usage d'images dont certaines zones sont des boutons "intelligents". Il suffit de choisir une image et d'identifier des zones qui correspondent à des boutons. Chaque zone sera ainsi associée à un URL.

Dans l'exemple de la moissonneuse-batteuse, si l'on clique sur certaines parties de la machine agricole, le navigateur nous amène à une ressource WWW.

Pour afficher une image de ce type, il faut taper la commande suivante:

 <A HREF="http://lilas.grr.ulaval.ca/cgi-bin/imagemap.exe/moissonbatteuse">
<img src="images/moissonbatteuse.gif" ISMAP></a>

 

Le  A HREF réfère à un programme (imagemap.exe) qui, identifiera et retournera l'URL associée à la zone sélectionnée. On doit fournir au programme  imagemap.exe une clef qui constitue en quelque sorte le nom de l'image "cartographiée". Dans l'exemple, cette clef s'appelle "moissonbatteuse". Le concepteur de documents HTML doit fournir à l'administrateur de site un fichier qui permet d'associer des zones d'usage à des URL. Pour la moissonneuse-batteuse, le fichier ressemble à ceci:


default http://lilas.grr.ulaval.ca/grrwww/moissonneuse.html

rect http://lilas.grr.ulaval.ca/grrwww/moissonneuse.html#plateformerecolte 5,140 105,270

rect http://lilas.grr.ulaval.ca/grrwww/moissonneuse.html#battage 109,127 178,186

rect http://lilas.grr.ulaval.ca/grrwww/moissonneuse.html#separation 177,97 417,145

rect http://lilas.grr.ulaval.ca/grrwww/moissonneuse.html#nettoyage 178,146 416,208

rect http://lilas.grr.ulaval.ca/grrwww/moissonneuse.html#stockage 236,14 435,77

rect http://lilas.grr.ulaval.ca/grrwww/moissonneuse.html#conduite 39,15 173,126

 

Pour établir les zones cliquables, un petit logiciel du domaine public dénommé imageMap est disponible dans l'environnement PC ou Macintosh. Ce logiciel affiche l'image choisie et permet de dessiner en superposé des rectangles, cercles ou polygones pour ensuite définir un lien URL pour chacune des zones.

Vous remarquez, dans le cas de l'exemple de la moissonneuse-batteuse, que l'image est entourée d'un carré bleu. Ce carré indique à l'usager que cette image est "clickable". Ce carré apparaît lorsqu'on utilise une image dans une commande A HREF l'associant ainsi à un fichier HTML situé ailleurs ou encore à une section ailleurs dans le document (A NAME). On peut désactiver ce carré en insérant la commande border=0 dans la commande img src de la façon suivante:


<img border=0 src="images/moissonneuse.gif">

Note: Les instructions précédentes s'appliquent aux différentes versions du serveur WWW ncsa HTTPD. Les autres serveurs peuvent utiliser des conventions différentes.


Formulaires et masques de saisie

 

Le langage HTML dispose d'un ensemble de balises destinées à gérer l'interactivité avec l'utilisateur et son programme client. Je pense à tous les boutons et masques de saisie qui permettent à l'utilisateur d'introduire des données dans une page HTML afin de les expédier vers un serveur. Livres d'or, demandes de renseignements, formulaires d'inscription, tous ont recours à une balise particulière <FORM> qui marque dans un document HTML, le début d'une zone de saisie. Entre <FORM> et son </FORM> final, nous placerons ensuite des objets tels que zone de texte, list box, radio button ou check box auxquels nous pourrons attribuer des noms, des valeurs par défaut. Entre <FORM> et </FORM>, le seul élément impératif est un bouton <INPUT> avec comme attribut <INPUT TYPE="submit"> dont l'activation déclenchera l'envoi des données vers le serveur pour traitement ultérieur. Mais voyons tout ceci en détail

Form


<form> . . . </form> sont utilisés pour la création de masques de saisie. Ils délimitent la zone d'entrée de données et fournissent en même temps de l'information sur la méthode à utiliser pour entrer en contact avec un serveur et lui transmettre les données récoltées. Un document peut contenir plusieurs éléments de formulaires à condition qu'ils ne soient pas imbriqués.

Attributs :

action:

location URL ( Universal Resource Locator) du programme qui gérera les données du masque.

method: get ou post :

méthode choisie pour l'échange de données entre client et serveur . Post est souvent préféré. GET est l'action par défaut qui ajoute le contenu du questionnaire à l'URL
Cela donnera un résultat du type action?name=value&name=value&name=value
Prenons l'exemple


<form action="http://www.data.com/program?name=value&name2=value" method="get">

<input type="submit"></form>


Une pression sur le bouton "Submit" déclenchera l'exécution du programme "program" sur le serveur www.data.com. Le programme reçoit comme arguments à l'exécution les noms des variables et les valeurs introduites par l'utilisateur. Sous MS-DOS ou Unix, le nom du programme et ses arguments sont séparés par des espaces comme dans
copy *.* c: ou cp /etc/* /usr/bin. A cause de la syntaxe particulière propre aux URL, le nom du programme est séparé de ses arguments par un point d'interrogation tandis que les arguments sont séparés entre eux par des 'et commerciaux'

POST envoie les données sous forme de data et non d'URL
<form action="http://kuhttp.cc.edu/cgi-bin/register" method=post> . . . </form> . Les informations sont codées exactement comme dans la méthode GET mais sont envoyées sous forme de variables d'environnement lors de la transaction HTTP ( Hyper Text Transfer Protocol ) entre client et serveur.

ENCTYPE

est optionnel et dans le cas où la méthode est de type POST spécifie le type d'encodage du document.
La valeur allouée à ENCTYPE spécifie le type de média MIME utilisé pour encoder les paires nom/valeur .
La valeur par défaut est "application/x-www-form-urlencoded", les autres valeurs acceptables étant représentées sous la forme multipart/form-data

Accept-charset

Cet attribut spécifie une liste des jeux de caractères acceptables pour l'encodage des données, une virgule et ou un espace séparant chaque élément de la liste.

Name

Optionnel, cet attribut permet de donner une identification unique à un masque de saisie de manière à le référencer et le manipuler avec un langage de scripting.

Target

Utilisé conjointement avec des frames, l'attribut target permet de définir le cadre qui accueillera le résultat de la soumission des données après leur traitement par un script.
Les noms de cible commencant par un caractère de soulignement et abordés dans notre précédente leçon sur les frames sont d'application ici:
TARGET="_blank" ( hyperlien sera toujours chargée dans une nouvelle fenêtre vide)
TARGET="_self" ( charger le document dans la fenêtre elle-même où l'hyperlien a été sélectionné. )
TARGET="_parent" (chargement de la page dans le document qui sert de parent au FRAMESET courant)
TARGET="_top" (charger la page HTML dans le corps de la fenêtre principale)

Input

<input> (pas de marqueur de fin)
définit un champ de saisie où l'utilisateur peut encoder des données. A chaque champ d'input est associé une variable, une valeur et un type de donnée.

Attributs :
type

· type="text"
· type="password"
· type="checkbox" sélectionnée ou non
· type="radio" sélection exclusive
· type="submit" bouton envoyant les données au serveur
· type="reset" bouton réinitialisant les données à leurs valeurs initiales
· type = "button"
· type = "hidden"

Accesskey

L'argument AccessKey permet de placer le focus sur un élément HTML au moyen d'un raccourci clavier. Un simple caractère est communiqué comme valeur pour cet attribut.

Disabled

Un simple attribut sans argument utilisé pour signaler qu'un élément HTML est initialement inactif.

Height

Spécifie la hauteur d'un bouton exprimée en pixels

Name

Name est un attribut obligatoire qui associe un nom symbolique à un champ lors de la soumission du formulaire.

Ex <input type="checkbox" name="box1">

Tabindex

La tabulation est une méthode pour donner le focus à un élément HTML en utilisant la touche TAB. L'ordre d'activation des éléments correspond généralement à l'ordre d'apparition à l'écran mais peut être contrôlé par l'attribut TABINDEX suivi d'une valeur, les valeurs les plus petites correspondant aux éléments recevant le focus en premier lieu.

Width

Attribut spécifiant la largeur d'un bouton exprimée en pixels

value

· pour les types="text" et "password", valeur par défaut de la variable
· pour les types="checkbox" et "radio", valeur sélectionnée
· pour les types="reset" ou "submit", étiquette remplaçant les mots "submit" et "reset".

checked

sans argument, si le mot "checked" est présent, le champ est sélectionné

size

taille physique du champ de saisie "text" ou "password"     (défaut = 20)

maxlength

nombre maximal de caractères admis   

Remarques :
Les caractères de type "&", "%", ou "$" sont automatiquement traduits en forme hexadécimale, un pourcent suivi du code ASCII.
"&%$" devient "%26%25%24".

Type = "button"


BUTTON est une valeur de l'attribut TYPE pour la balise INPUT à l'intérieur de l'élément FORM. Il place un bouton dans un formulaire HTML et fait appel à du langage de scripting pour générer une action lors d'un clic sur ce bouton.

Example
<html>
<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<p><input type="button" value="My Button" name="B1" onClick="test1(this.form)">></p>
</form>
</body>
</html>
Image1.gif (5418 bytes)

TYPE = "Checkbox"


Checkbox est une valeur pour l'attribut TYPE utilisé pour opérer un choix booléen ou multiple entre différentes valeur. Par défaut, l'état d'un bouton checkbox est OFF c'est-à-dire désélectionné.

Accesskey
Checked
Optionnel, permet d'activer ou désactiver la sélection d'un checkbox.
Valeur admise : ON ou OFF
Disabled
Name
Tabindex
Type
Value

Example
<html>

<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<p><input type="checkbox" value="checkbox1" name="C1" checked>Salt<br>
<input type="checkbox" value="checkbox2" name="C1">Pepper</p>
<p><input type="submit" name="submit"> </p>
</form>
</body>
</html>

Image2.gif (5775 bytes)

Notez bien cette adresse URL chez ncsa.uiuc.edu. Elle vous permettra de tester votre formulaire et vérifier les valeurs renvoyées par chacun de ses champs. C'est ainsi que notre exemple génère la réponse suivante lorsque nous sélectionnons à la fois le sel et le poivre
Query Results
You submitted the following name/value pairs:
· C1 = checkbox1
· C1 = checkbox2
· submit = Submit Query

FILE

FILE permet d'encoder un nom de fichier lors de la saisie d'un formulaire. Pour ce faire, l'auteur d'une page HTML doit spécifier un nouvel attribut ENCTYPE pour l'élément FORM ENCTYPE="multipart/form-data"

Accept
Cet attribut spécifie les types MIME que le serveur traitant le formulaire doit gérer correctement
Accesskey
Disabled
Name
Readonly
Annonce au navigateur que le contenu du champ est en lecture seule et ne peut être modifié par l'utilisateur.
Tabindex
Type
Value

Example
<html>

<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query" ENCTYPE="multipart/form-data">
<p>Enter filename <input type="file" name="myfile"></p>
<p><input type="submit" name="submit"> </p>
</form>
</body>
</html>

Image3.gif (7520 bytes)

HIDDEN

HIDDEN désigne un champ de formulaire qui n'apparaît pas à l'écran de l'utilisateur mais qui peut servir à transmettre des informations invariables au serveur.

Name
Type

Exemple
<html>

<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<input type="hidden" name="Hidden1" value="hiddenvalue1">
<p><input type="submit" name="submit"> </p>
</form>
</body>
</html>

Dans cet exemple, le champ Hidden1 n'apparaît pas dans la fenêtre du navigateur mais permet d'envoyer la valeur "hiddenvalue1" à l'insu de l'utilisateur
Query Results
You submitted the following name/value pairs:
· Hidden1 = hiddenvalue1
· submit = Submit Query

IMAGE

Spécifie le nom d'une image qui peut être sélectionnée pour traiter un script. IMAGE agit un peu comme un champ INPUT TYPE=SUBMIT à l'exception que les coordonnées X et Y du clic dans l'image sont envoyées au serveur avec le reste des données.
Accesskey
A single, case-insensitive alphanumeric character from a browser's character set.
Align
Alignement du texte
Left - Right - Top [DEFAULT] - Texttop - Middle - Absmiddle - Baseline - Bottom - Absbottom
Alt
Text à afficher en remplacement de l'image pour les navigateurs où le mode image a été désactivé
Disabled
Height
Name
Src
Indique le fichier source de l'image en position absolue ou relative
Tabindex
Type
Usemap
Indique si cette image est associée à une "imagemap" où différentes portions de l'image renvoient à différents hyperliens
Value
Width

Example
<html>
<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<p><input src="OEIL.jpg" name="I1" width="227" height="227" alt="OEIL.jpg" type="image"></p>
</form>
</body>
</html>

Image4.gif (45668 bytes)Query Results
You submitted the following name/value pairs:
· I1.x = 76
· I1.y = 127

PASSWORD

PASSWORD désigne un champ de saisie de type TEXT où les données sont masquées par des étoiles pour préserver la confidentialité des données à l'écran.

Accesskey
Disabled
Name
Readonly
Tabindex
Value

Exemple
<html>

<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<p>Enter password <input TYPE="password" NAME="thepassword" size="20"><br>
<input type="submit"> </p>
</form>
</body>
</html>
Image5.gif (5980 bytes)Query Results
You submitted the following name/value pairs:
· thepassword = 11122222222

RADIO

RADIO est un champ de formulaire permettant d'opérer des choix exclusifs et booléens parmi un groupe d'items dont un seul à la fois est ON
Accesskey
Checked
Disabled
Name
Tabindex
Type
Value

Exemple
<html>

<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<i><p>Payment:</i> <ul>
<li><input TYPE="radio" NAME="paymethod" VALUE="mastercard"> Mastercard.</li>
<li><input TYPE="radio" NAME="paymethod" VALUE="visa" checked> Visa. </li>
<li><input TYPE="radio" NAME="paymethod" VALUE="americanexpress">American Express. </li>
</ul>
<p><input TYPE="submit">. </p>
</form>
</body>
</html>
Image6.gif (6936 bytes)Query Results
You submitted the following name/value pairs:
· paymethod = visa

RESET

Un bouton particulier qui réinitialise les champs d'un formulaire à leur valeur initiale
Accesskey
Disabled
Height
Tabindex
Value
Width

Exemple
<html>

<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<p><input TYPE="reset" VALUE="clear the form">
<input TYPE="submit">.
</p>
</form>
</body>
</html>

SUBMIT

Quand il est activé, le bouton SUBMIT envoie l'information contenue dans le formulaire au serveur chargé de traiter le script de traitement
Accesskey
Disabled
Height
Name
Tabindex
Value
Width

TEXT

TEXT désigne le champ de formulaire le plus courant : une simple ligne de texte à saisir
Accesskey
Disabled
Maxlength
Désigne le nombre de caractères maximal qui peuvent être introduits par l'utilisateur. Si l'attribut MAXLENGTH est supérieur à l'attribut SIZE, le texte déroulera dans le champ si nécessaire.
Name
Readonly
Size
Taille du masque de saisie
Tabindex
Value
Exemple
<html>

<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<p><input TYPE="text" VALUE="Zappa" NAME="text1" SIZE="10" MAXLENGTH="25"> <input TYPE="submit">. </p>
</form>
</body>
</html>

Image7.gif (6125 bytes)Query Results
You submitted the following name/value pairs:
· text1 = Zappa

Textarea

<textarea> . . . texte par defaut . . </textarea>
définit un champ rectangulaire où l'utilisateur peut encoder du texte sur plusieurs lignes

Attributs :
name
nom symbolique de la variable   
rows and cols nombre de lignes et nombre de caractères par ligne
Exemple <TEXTAREA NAME="foo" ROWS=4 COLS=40>texte défaut</TEXTAREA>


<html>

<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<p><textarea NAME="positive" ROWS="5" COLS="20"></textarea> </p>
<p><input TYPE="submit">.
</p>
</form>
</body>
</html>

Image8.gif (6774 bytes)
Query Results
You submitted the following name/value pairs:
· positive = 1st line line 2 line 3 line 4

Select


<select> . . . </select>
Liste d'items optionnels.
Requiert un tag <option> pour chaque item de la liste

Accesskey
Align

Spécifie l'alignement horizontal et vertical de la liste de sélection
Left - Right - Top - Middle - Bottom
Disabled
Multiple
Définit si plusieurs options peuvent être sélectionnées en même temps
Name
Size
Hauteur de la liste de sélection exprimée en lignes.
Tabindex

Exemple
<html>

<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="GET" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin/query">
<p><select NAME="list1" SIZE="3" MULTIPLE>
<option VALUE="opt1">option1 </option>
<option VALUE="opt2">option2 </option>
<option SELECTED VALUE="opt3">option3 </option>
</select> <input TYPE="submit">.
</p>
</form>
</body>
</html>

Image9.gif (5540 bytes)

Query Results
You submitted the following name/value pairs:
· list1 = opt2
· list1 = opt3

Notez au passage comment le contenu de votre formulaire est transformé en une adresse URL comme suit lorsque vous pressez le bouton submit

http://hoohoo.ncsa.uiuc.edu/htbin/query?list1=opt2&list1=opt3

Vous voyez que votre bouton submit fait appel à l'URL spécifiée dans <FORM ACTION=>. Le nom du script sur le serveur est séparé des autres arguments par un point d'interrogation. Ensuite chaque champ du formulaire est passé sous la forme name=value, chaque champ étant séparé par un et commercial (&)

Option


Disabled
Selected
Option sélectionnée au départ
Value

Où tester ses masques ?


· Pour METHOD="POST", essayez ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query"
· Pour METHOD="GET", essayez ACTION=
"http://hoohoo.ncsa.uiuc.edu/htbin/query"

Tutorials

http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html
Mosaic for X version 2.0 Fill-Out Form Support

http://hoohoo.ncsa.uiuc.edu/cgi/forms.html
NCSA's "Decoding FORMs with CGI" tutorial

http://ecco.bsee.swin.edu.au/text/form-tut/ft.1.html
Carlos' Forms Tutorial

http://www.webcom.com/~webcom/html/tutor/forms/
WWW Fill-out Forms Tutorial

http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/forms.html
The Information Commons Introduction to HTML: Forms

http://www.research.digital.com/nsl/formtest/
Digital Corp. HTML Form Testing

http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Programming/Forms/
Yahoo's HTML Forms section



Eléments de style pour la publication électronique

Taille

 

Gardez vos documents les plus petits possibles. Pensez au temps de chargement pour les modems les plus lents.

Consistance

Gardez une certaine consistance entre toutes les pages d’un site WWW en adoptant un fichier modèle de base qui sera utilisé pour toutes les pages HTML

Indépendance par rapport au navigateur

 

Les documents HTML ne contiennent aucune information relative aux polices et espacement ce qui lui permettra d’être correctement rendu quelle que soit la plate-forme, même un simple terminal.

 

Utilisez les listes et les headers tels qu’ils ont été pensés.

Utilisez les headers dans l’ordre sans sauter de numéro même si un numéro précis ne vous plait pas.

Ne bourrez pas votre texte de caractères blancs

Ne placez pas de phrase du type “cliquez ici” puisque l’utilisateur n’a pas nécessairement une souris

Il est important que votre document soit bien rendu quel que soit le programme client.

 

Lisibilité

 

Pour l’utilisateur

Les consignes d’application pour tout média, phrases concises, orthographe sont bien entendu d’application sur le net.

Evitez les termes vagues du style “ici” pour définir un lien.

Essayez que les hyperliens fassent partie d’une phrase complète de manière à ce que l’utilisateur comprenne bien le sens de ce lien.

Même si vos pages ont été créées dans un certain ordre, il faut toujours se rappeler que les utilisateurs les liront dans n’importe quel ordre. Evitez donc au début d’une page, toute référence à d’autres pages du style “donc”, “point suivant” etc.

 

Pour les créateurs

Le code de vos documents HTML doit être lisible pour ceux qui en assurent la maintenance. Indentez le code pour en augmenter la lisibilité. N’hésitez pas à utiliser les commentaires pour scinder des blocs d’information ou pour rappeler en en-tête du document les coordonnées du créateur, la date de création etc.

Relocation

 

Evitez de déplacer une page une fois qu’elle a été publiée électroniquement car beaucoup d’utilisateurs l’auront déjà consignée dans leur “hot list”

Date et Signature

 

Toute page HTML doit comporter une signature de façon à ce qu’on puisse contacter son auteur. Une date est également recommandée pour pouvoir juger de la fraîcheur de l’information.

 

A part le tag <ADDRESS>, une convention est de créer un lien de type “made” dans le header du document.

<HEAD>
<TITLE>Mon titre</TITLE>
<LINK REV="made" HREF="mailto:auteur@site.be">
</HEAD>

Les fichiers images

GIF

 

GIF signifie General Interchange Format, un standard de fichier image imaginé par Compuserve.

Il en existe des variantes 87 et 89. Le format 87 est plus répandu et préférable. Les images GIF sont limitées à 256 couleurs et sont comprimées ce qui les rend idéales pour des transmissions modem ou réseau.

Les images GIF sont sauvées normalement ou de manière entrelacée, des lignes séparées de manière équidistante sont stockées ensemble  La majorité des navigateurs reconnaissent ces deux formats.

Le navigateur Netscape qui décode les images incrémentale ment pendant le chargement du texte est capable d’exploiter avantageusement les images entrelacées en procurant un effet de fondu, de volet vénitien qui laisse apparaître progressivement la totalité de l’image au lieu de n’en dévoiler que les premières lignes.

 

JPEG

 

Pour des images de qualité photographique, le format JPEG a de nombreux avantages sur le format GIF. JPEG désigne le format Joint Photographic/picture ? Expert Group. Il supporte 16 millions de couleur et supporte un taux de compression variable qui permet de doser proprement le quotient qualité d’image/temps de chargement. GIF fait une compression de type “losless” sans perte d’informations alors que JPEG recourt à la compression “lossy” où vous pouvez perdre une partie de l’information de l’image au moment de sa compression. Même un taux de compression de 130:1 donne encore des images d’excellente qualité.

 

Il est très courant de trouver une petite image GIF qui sert d’hyperlien vers une image JPEG de grande taille et de meilleure qualité pour un téléchargement ultérieur.

Taille d’image

 

Pour le confort des utilisateurs Netscape, il est intéressant de profiter d’une extension à la commande IMG

de type <IMG SRC="foo.gif" WIDTH=xxx HEIGHT=yyy>

Cela permet à Netscape de connaître à l’avance la taille de l’image à télécharger, de créer un espace réservé à cette image et de continuer l’affichage simultané du texte venant après l’image.

Erreurs classiques

le slash manquant

 

Il est possible de faire une requête sur un directory d’un serveur HTTP. Le serveur pointera automatiquement sur le document index.html à condition que votre adresse URL http://www.site.org/directory/ se termine bien par un slash final.

Liens inutiles

 

Evitez les liens trop nombreux ou illogiques. Un être humain moyen s’égare dans le cyberespace après avoir surfé sur plus de sept hyperliens.

 

Style Physique et Logique

 

Imposer des styles gras, italique ou souligné, c’est imposer de la part d’un auteur HTML sa conception du document final. Si un navigateur ne sait pas rendre les caractères italiques, il pourra par contre rendre à sa manière des styles logiques comme l’emphase, la citation,

 

Ecrivez <EM> ou <CITE> au lieu de <I>

et <STRONG> plutôt que <B>

 


 

HTTP

 

HyperText Transfer Protocol ou HTTP est un protocole situé au niveau de la couche application pour la distribution d'informations hypermédia et interactives. HTTP est apparu avec le concept de World Wide Web au début des années 90. HTML décrit le contenu d'une page tandis que HTTP décrit la façon dont cette page est échangée entre un client et un serveur. La toute première version, connue comme HTTP 0.9, était un simple protocole pour le transfert d'informations brutes via Internet. HTTP/1.0, défini par la RFC 1945, a considérablement étendu la norme en permettant l'utilisation de messages similaires à MIME incluant des meta-informations sur les données transférées.

 

Le World Wide Web fonctionne à base de requêtes et réponses à ces requêtes. Un serveur Web est à l'écoute des requêtes émanant du navigateur des clients. Sa réponse peut être de trois formes : une page HTML statique stockée sur le disque dur de la machine serveur, une page HTML dynamique générée au moment du traitement de la requête ou l'affichage d'un répertoire disque. Les pages statiques sont préparées à l'avance tandis que les pages dynamiques sont crées en réponse à la requête d'un programme client.

 

 

 

 

 

Un serveur HTTP a besoin de savoir quelle information réclame le client par le biais d'un URL ou Uniform Resource Locator puis quelle action il doit entreprendre avec cette information. L'action ou méthode la plus courante est GET qui transmet simplement un document vers le client.

 

 

Méthodes      Actions

 

GET           transmet les données spécifiées dans un URL

HEAD          renvoie uniquement l'en-tête d'un document

POST          envoie une information au serveur pour traitement ultérieur

PUT           envoie une information au serveur à des fins de stockage

DELETE        supprime la ressource URL

LINK          établit une relation entre deux URL

UNLINK        supprime cette relation

OPTIONS       requête d'informations pour connaître les options disponibles

 

GET

La méthode GET peut-être conditionnelle. Elle peut inclure des options comme

n     If-Modified-Since

n     If-Unmodified-Since

n     If-Match

n     If-None-Match

If-Range header field.

 

HEAD

 

La méthode HEAD est identique à la méthode GET excepté que la réponse ne peut contenir que l'en-tête d'un document HTML et non le corps de celui-ci.

 

POST

 

La méthode POST est utilisée lorsqu'il faut fournir un bloc de données au serveur comme c'est le cas lorsqu'on remplit un formulaire via un masque de saisie.

 

PUT

 

La méthode PUT signale au serveur HTTP qu'il doit stocké un document HTML sous le nom fourni dans l'URL.

 

Si vous utilisez par exemple Internet Explorer pour réclamer à un serveur HTTP le fichier Sky.jpg, voici la requête HTTP qui va être formulée par le navigateur

 

GET sky.jpg HTTP/1.0

Accept: image/x-xbitmap, image/jpeg, image/gif

Accept-Language: en

User-Agent: Microsoft Internet Explorer/

   2.0beta [Windows 95]

Connection: Keep-Alive

Referer: http://my95/

If-Modified-Since: Sun, 21 Oct 1995 19:25:23 GMT

 

Dans cet exemple, le navigateur signale qu'il peut supporter des fichiers bitmap de type XWindows, JPEG et GIF, qu'il supporte l'anglais et que la requête émane d'une machine my95. Il s'identifie comme Internet Explorer 2 tournant sous Windows 95. Une copie de sky.jpg a déjà été transférée le 21 octobre 1995 : le fichier ne doit être à nouveau transféré qu'en cas de changements. Voici la réponse à cette requête :

 

HTTP/1.0 200 OK

Date: Sunday Sun, 21 Oct 1995 19:38:46 GMT

Server: Webster/1.0

MIME-version: 1.0

Content-type: image/jpg

Last-modified: Sun, 21 Oct 1995 8:07:14 GMT

Content-length: 3150

 

La première ligne signale que la réponse est transmise au format HTTP version 1.0 et donne un code de retour spécifiant le succès ou non de la requête. Ici, le code 200 signifie OK.

 

Codes de statut et d'erreur du protocole HTTP

A chaque requête HTTP, correspond un code de retour informant le navigateur sur le succès ou l'échec de cette requête.

 

Les codes de succès sont de type 2xx tandis que les codes d'erreurs s'échelonnent de 400 à 599. Les codes sont regroupés par centaine comme suit :

·       1xx: Informational

·       2xx: Success

·       3xx: Redirection

·       4xx: Client Error

·       5xx: Server Error

 

100       Continue : le traitement est en cours et le client doit transmettre le reste de sa requête

101       Switching Protocols : changement de protocole, passage à une autre version HTTP

200       OK

201       Created - l'URL a été créée directement. Suite à une commande POST, la réponse consiste en un URI par lequel le document créé est identifié

202       Accepted - l'URL sera créée ultérieurement. La requête a été acceptée pour traitement mais ce dernier n'a pas été finalisé.

203       Non-Authoritative Information. Information partielle en réponse à une commande GET

204       No Content - traitement réussi mais aucune information à envoyer au client. Le serveur a bien reçu la requête mais n'a pas d'informations à renvoyer. C'est généralement le cas lorsqu'un script doit être exécuté sans que le document ne soit modifié.

205       Reset Content - le client doit recharger le document

206       Partial Content

300       Multiple Choices - La ressource réclamée existe sous plusieurs formes

301       Moved Permanently. Les données demandées ont été déplacées et ont reçu un nouvel URI, cette modification étant permanente

302       Moved Temporarily. Les données réclamées ont été trouvées bien qu'elles soient définies sous un autre URL temporaire

303       See Other - l'URL demandé peut être trouvé à un autre endroit.  Suggère que le programme client utilise une autre adresse URL mais également une autre méthode

304       Not Modified - le document réclamé via un GET conditionnel n'a pas changé depuis sa dernière transmission.  Le document a été trouvé mais n'a pas été modifié depuis la date précisée dans le champ "If-Modified-Since".

305       Use Proxy

400       Bad Request - La requête est de syntaxe incorrecte ou impossible à exécuter.

401       Unauthorized - accessible uniquement après authentification

402       Payment Required.  Le client doit recommencer sa requête en précisant dans son en-tête la mention "ChargeTo".

403       Forbidden. L'utilisateur n'est pas autorisé à consulter ce document.

404       Not Found. L'URL est valide mais ne réside pas sur le serveur

405       Method Not Allowed. Méthode de requête non autorisée.

406       Not Acceptable. Requête non acceptée.

407       Proxy Authentication Required. Autorisation proxy nécessaire.

408       Request Time-out. Temps d'attente pour accéder à l'URL a expiré.

409       Conflict

410       Gone

411       Length Required

412       Precondition Failed

413       Request Entity Too Large

414       Request-URI Too Large

415       Unsupported Media Type

500       Internal Server Error. Le serveur a rencontré une condition non prévue qui l'empêche d'exécuter la requête

501       Not Implemented. Le serveur ne supporte pas la fonction demandée

502       Bad Gateway. Mauvaise passerelle d'accès.

503       Service Unavailable. Le serveur ne peut provisoirement répondre à la demande suite à un trafic important

504       Gateway Time-out. Apparaît lorsque le serveur, à son tour, fait appel à un service extérieur qui ne répond pas dans les délais impartis

505       HTTP Version not supported

Outre les messages d'erreur, le serveur HTTP transmet aux clients des informations additionnelles pour l'aider à interpréter les données. Par exemple, il transmet des données sur la version de MIME utilisée et le format du fichier qui suit.

 

Le champ Last-modified signale au programme client à quelle date l'information a été modifiée pour la dernière fois.

Le champ Location est utilisé pour rediriger le programme client vers un autre URL que l'URL original comme dans l'exemple suivant :

Location: http://www.w3.org/pub/WWW/People.html


CGI

Common Gateway Interface ou CGI est un standard qui permet l'interaction d'un serveur HTTP avec une application extérieure. Un programme répondant à la norme CGI est exécuté en temps réel au moment de la requête et produit donc des informations dynamiques comparé aux pages statiques délivrées habituellement. Classiquement, on utilise un programme CGI pour traiter des données émanant d'un formulaire, créer un document HTML au vol, interroger une base de données, exécuter un programme comptant le nombre de visiteurs etc.

 

 

Un programme CGI doit simplement se trouver dans un répertoire précis disposant de droits d'accès particuliers ( p. ex. eXecute ) de manière à ce qu'il soit exécuté au lieu d'être simplement envoyé au programme client comme à l'accoutumée. Ce répertoire porte souvent un nom parlant comme cgi-bin, cgi-shl etc.

 

 

Les langages les plus prisés pour réaliser un programme CGI sont C/C++, PERL, TCL, n'importe quel shell Unix, Visual Basic ou AppleScript. L'application peut recevoir en entrée n'importe quelle information fournie par le navigateur client et la renvoyer en retour sous forme de page HTML. On parle souvent de scripts CGI pour définir cette sorte d'application. Il doit s'agir de programme en mode texte ou console capable de rediriger des informations à partir du stdin (Standard Input) vers le stdout (Standard Output). Via stdin, le client prépare des informations pour le serveur du style Nom="Jean Dupont". Le serveur les utilise pour les placer dans des variables d'environnement. qui peuvent être exploitées par des applications CGI extérieures. Le passage de paramètres par variables d'environnement fonctionne dans pratiquement n'importe quel système d'exploitation.

 

 

CGI Environment Variables

 

Les variables suivantes sont mises à jour quelle que soit la requête client :

 

SERVER_SOFTWARE

Nom et version du programme serveur HTTP au format nom/version

SERVER_NAME

Le nom de la machine hébergeant le serveur HTTP, son adresse IP ou son alias DNS.

GATEWAY_INTERFACE

La version CGI supportée par le serveur HTTP au format CGI/revision

 

 

Les variables suivantes sont spécifiques à certains types de requête

 

SERVER_PROTOCOL

Le nom et la révision du protocole utilisé pour satisfaire la requête.

SERVER_PORT

Le port au sens TCP/IP du terme par lequel est traitée la requête.

REQUEST_METHOD

La méthode utilisée pour émettre la requête : "GET", "HEAD", "POST", etc.

PATH_INFO

Le chemin d'accès défini par le client.

PATH_TRANSLATED

La traduction de ce chemin par le serveur HTTP 

SCRIPT_NAME

Le nom du programme CGI exécuté    

QUERY_STRING

L'information, dans un URL, qui suit le point d'interrogation et qui sert d'arguments au script. Chaque argument est séparé des autres par le signe &, les blancs étant remplacés par des + et les caractères spéciaux par leur code ASCII précédé du signe %.

REMOTE_HOST

Le nom de la machine hôte réclamant l'exécution du script.

REMOTE_ADDR

L'adresse IP de la même machine hôte

AUTH_TYPE

Si le serveur supporte l'authentification de l'utilisateur, il s'agit de la méthode d'authentification utilisée pour valider cet utilisateur.

REMOTE_USER

En cas d'authentification, si le script est protégé, renvoie le nom de l'utilisateur après authentification.

REMOTE_IDENT

L'identification de l'utilisateur après une procédure de login répondant à la norme RFC 931.

CONTENT_TYPE

Lorsqu'une requête contient de l'information qui lui est attachée, (POST et PUT p. ex.) cette variable précise le format des données.

CONTENT_LENGTH

La longueur de l'information réclamée

HTTP_ACCEPT

Les types MIME tels qu'ils devront être acceptés par le client.

Format: type/subtype, type/subtype

HTTP_USER_AGENT

Le navigateur utilisé pour envoyer la requête. Format: software/version library/version.

 

Voici, à titre d'exemple, les informations renvoyées suite à l'exécution d'un script CGI sous Microsoft Internet Server 1.0

 

REMOTE_HOST                                                                  193.75.199.15

SERVER_SOFTWARE                                                        Microsoft-Internet-Information-Server/1.0

SERVER_NAME                                                                  193.75.199.2

SERVER_PORT                                                                    80

SERVER_ADMIN                                                                Not Found

REQUEST_METHOD                                                         GET

USER_AGENT                                                                     Not Found

SCRIPT_NAME                                                                   /cgi-shl/hellox.exe

QUERY_STRING

AUTH_TYPE

GATEWAY_INTERFACE                                                  CGI/1.1

REMOTE_ADDR                                                                 193.75.199.15

SERVER_PROTOCOL                                                         HTTP/1.0

PATH_INFO

PATH_TRANSLATED                                                       d:\inetsrv\root

REMOTE_IDENT                                                                Not Found

REMOTE_USER

CGI_VERSION                                                                      Not Found

REQUEST_PROTOCOL                                                      Not Found

REQUEST RANGE                                                               Not Found

CONTENT_TYPE

CONTENT_LENGTH                                                          0

CONTENT_FILE                                                                  Not Found

REFERER                                                                               Not Found

FROM                                                                                    Not Found

AUTHENTICATED_USERNAME                                   Not Found

AUTHENTICATED_PASSWORD                                   Not Found

AUTHENTICATION_METHOD                                      Not Found

AUTHENTICATION_REALM                                          Not Found

 

Un simple script sous un shell Unix peut fournir ce genre de document dynamique

 

#!/bin/sh

 

echo Content-type: text/plain

echo

echo SERVER_SOFTWARE = $SERVER_SOFTWARE

echo SERVER_NAME = $SERVER_NAME

echo GATEWAY_INTERFACE = $GATEWAY_INTERFACE

echo SERVER_PROTOCOL = $SERVER_PROTOCOL

echo SERVER_PORT = $SERVER_PORT

echo REQUEST_METHOD = $REQUEST_METHOD

echo HTTP_ACCEPT = "$HTTP_ACCEPT"

echo PATH_INFO = $PATH_INFO

echo PATH_TRANSLATED = $PATH_TRANSLATED

echo SCRIPT_NAME = $SCRIPT_NAME

echo QUERY_STRING = $QUERY_STRING

echo REMOTE_HOST = $REMOTE_HOST

echo REMOTE_ADDR = $REMOTE_ADDR

echo REMOTE_USER = $REMOTE_USER

echo CONTENT_TYPE = $CONTENT_TYPE

echo CONTENT_LENGTH = $CONTENT_LENGTH

 

Voici un simple mot de bienvenue généré au vol par un programme en langage C

 

#include <stdio.h>

void main()

{

      printf("Content-type: text/html\n\n");

printf("<html><head>\n");

      printf("<title>Bonjour</title>\n");

      printf("</head><body>\n");

      printf("<h1>Bonjour</h1>\n");

printf("</body></html>\n");

}

 

Le même programme en Perl, avec la librairie cgi-lib donne

 

#!/bin/perl

require "cgi-lib.pl";

print &PrintHeader;

print '<html>Hello World!</html>';

 

Une simple instruction writeln vous donnera le même résultat en Pascal

 

Pour saisir l'information contenue dans un masque de saisie, vous n'avez même pas besoin d'un programme CGI. Une instruction mailto peut suffire comme suit

 

<FORM METHOD="POST" ACTION="mailto:nom@hote">
Nom    <INPUT NAME="Nom" VALUE="" > <BR>
Prénom <INPUT NAME="Prenom" VALUE="" ><BR>
<INPUT TYPE="SUBMIT" VALUE="Envoyer">
</FORM>

Il est possible d'utiliser un programme CGI pour réaliser des animations en profitant d'une fonctionnalité du serveur Serveur Push et Client Pull.

·         Server Push : le serveur envoie des données comme d'habitude mais ne ferme pas la connexion et continue à diffuser d'autres infos.

·         Content-type: multipart/mixed;boundary=Frontiere
--Frontiere
Content-type:text/plain
document 1
--Frontiere
Content-type: text/plain
document 2
--Frontiere--

·         Les deux derniers tirets marquent la fin du document

Client Pull : la page HTML émise par le serveur contient des instructions de  rafraîchissement automatique. Dans une page HTML, cela donnera :

<META HTTP-EQUIV="Refresh" CONTENT="x"; URL="url">  avec x exprimant une fréquence de rafraîchissement en secondes.

Sécurité

Common Gateway Interface peut représenter un danger important pour la sécurité de vos données. Les droits d'exécution de scripts CGI doivent donc être pensés avec beaucoup de prudence. Un script CGI peut intentionnellement ou non contenir des informations sur votre système que peuvent mettre à profit des pirates. Il peut également être vulnérable à des attaques contenues dans des formulaires remplis par un utilisateur. 

Imaginons le résultat du script suivant

·         @echo off
echo Content-type: text/plain
echo.
echo %HTTP_USER_AGENT%

si la variable d'environnement HTTP_USER_AGENT vaut

xxx&del+c:\*.*


Le résultat, une fois la variable étendue, sera

echo xxx&del c:\*.*

 

Si vous n'avez pas suffisamment protégé les droits en écriture pour les utilisateurs, un bon pirate pourrait réussir à placer un fichier exécutable dans un de vos répertoires et réussir à le faire tourner simplement en donnant son URL à partir du programme navigateur. Il peut aussi exploiter des petits trucs comme introduire une très longue ligne de commande pour bourrer et dépasser l'espace mémoire alloué à la chaîne d'arguments venant de stdin. Un hack classique est d'altérer le contenu de la variable d'environnement PATH.

 


 

Programmation HTML avec Java

 

 

World Wide Web est encore jeune et ses navigateurs souffrent de lacunes. Ils ont été pensés en terme d'information statique, ne s'accommodent que de données de type texte, son ou image et se prêtent encore difficilement à la programmation dynamique. L'ambition de Sun avec sa technologie HotJava est d'insuffler une philosophie dynamique à l'information, de transférer en même temps que l'objet le module logiciel qui sera capable de le traiter, le représenter ou le visualiser. Cette philosophie est héritée en droite ligne du langage Java, également conçu par Sun, avec lequel il a été écrit.

 

Lorsqu'un navigateur traditionnel rencontre un nouveau type d'objet pour lequel il n'est pas préparé, il doit céder la main à une application extérieure ou sauver l'objet sur disque, faute d'outil de traitement adéquat. HotJava par contre peut délivrer via Internet un objet et la pièce de code nécessaire à son décodage. La même conception objet est appliquée à la gestion des protocoles de transfert de données. A côté du protocole HTTP, HotJava peut accepter dynamiquement de nouvelles formes de protocoles incluant par exemple de l'encryption. Chaque concepteur d'un protocole propriétaire peut intégrer dans un navigateur HotJava le code nécessaire à son bon fonctionnement. Si le client HotJava ne connaît pas encore le nouvel objet ou le nouveau protocole, il réclame simplement au serveur les portions logicielles requises.

 

Sun met à la disposition de tous sur http://www.sun.com un kit de développement en phase alpha incluant le browser HotJava et les spécifications du langage Java. Le kit est disponible pour stations Solaris et NT, Windows 95 et Macintosh.

 

Java est un langage orienté objet, distribué, interprété, portable, multi-thread et dynamique. Il s'agit d'une version du langage C++ qu'on aurait allégé de sa complexité formelle. Java est conçu pour la  programmation distribuée et est capable d'ouvrir et accéder des objets à distance via différents protocoles. Java utilise pour ses transferts une technique d'encryption basée sur le système de clé publique. Pour accentuer le caractère portable des données, Java utilise un format neutre de fichier objet capable d'être interprété puis utilisé sur un grand nombre de plates-formes et processeurs différents. La création d'applications incluant plusieurs processes ou threads est facilitée par la présence de primitives vouées à la synchronisation de ces threads.

 

Sans même encore écrire de code Java, il est possible d'intégrer des animations sonores et visuelles dans une page HTML sous forme d'applet. La portion de page HTML suivante est suffisante pour traiter une animation graphique ou un fichier son. Hot Java supporte déjà le son 8 kHz, 8 bits au format .au et est capable de réaliser une animation à partir d'une série de fichiers graphiques GIF.

 

   <BODY>

 

   My HelloWorld applet:

   <APP CLASS="ImageLoopItem"

   SRC="doc:/demo/"

   IMG="images/duke">

 

   </BODY>

 

   Une application complète ressemble à ceci

 

   import browser.Applet;

   import awt.Graphics;

   class HelloWorld extends Applet

   {

public void init()

{

resize(150, 25);

}

 

   public void paint(Graphics g)

{

g.drawString("Subliminal Hello world!", 50, 25);

}

   }

 

On l'appelle dans le corps d’une page HTML avec la commande <APP CLASS="HelloWorld">

 

Les opérateurs sont identiques à ceux du langage C, des librairies C pouvant aussi être ajoutées à une application Java.

 

Java est décrit à travers une machine virtuelle, un modèle abstrait et logique incluant un jeu d'instructions, un jeu de registres, un stack, un heap et une espèce de segment texte baptisé ici "method area".

 

Toute une série de classes prédéfinies permettent de jongler avec des objets de base aux noms évocateurs d'Url, Ftp, Http, telnet, smtp, nntp ou sockets. Bref, on dispose d'une librairie de classes World Wide Web très fournie et le développement d'applications Internet en est considérablement simplifié.

 

Les navigateurs Hot Java sont disponibles gratuitement sur l'Internet pour les utilisateurs individuels, tandis que les kits pour développeurs seront payants.

 

 


ActiveX

 

Toute la nouvelle stratégie de Microsoft part d'une constatation banale : le World Wide Web statique a vécu. Les pages HTML du futur se doivent d'être interactives, programmables et facilement reliables à des bases de données. Pour ce faire, Microsoft déploie une nouvelle technologie ActiveX,  qui est un prolongement distribué de ce qui s'est d'abord appelé OLE  Custom Controls puis OCX. Les Active Controls sont des objets qui répondent au Common Object Model, qui sont cross-platform et indépendants d'un langage. Ils ne s'agit donc plus d'objets propres à l'environnement Windows mais plutôt d'objets qui peuvent s'insérer dans des applications existantes ou être utilisées pour dynamiser des pages HTML. L'architecture OLE reste le concept central qui sous-tend ces Active Controls. Pour assembler ces objets entre eux, pour coordonner leur activité dans un container OLE, Microsoft a conçu tout un concept de scripting qui permet d'utiliser tout aussi bien Javascript que le tout nouveau VBscript, une variante poids plume et Internet du Visual Basic for Applications. Microsoft a enfin signé un contrat avec Sun Microsystems lui permettant d'utiliser toute la puissance du langage Java dans l'ensemble de ses produits. Un premier accord avait été annoncé en décembre 95 entre Sun et Microsoft mais n'avait jamais pu être finalisé. Microsoft a déjà étendu les fonctionnalités de Java de manière à ce qu'une classe ou une applet Java  soit automatiquement exploitable comme active control. Si vous développez une applet Java, vous pourrez donc l'exploiter via n'importe quel langage script qu'il s'agisse de VBScript, JavaScript ou même TeleScript.

 

 

Tous les Active Controls pourront également exploiter la technologie DirectX permettant de parler directement au hardware sans passer par de pénalisantes couches logicielles. Ainsi, grâce à Direct3D, n'importe quelle page Web pourra bénéficier de performances 3D optimales. Active Movie est un autre exemple d'Active Control qui fournit la synchronisation du son et de l'image dans des applications multimédia. Ni les actuels AVI, ni les fichiers QuickTime ne sont encore capables de gérer les "streams “ du standard MPEG2. Active Movie pallie cette limitation et autorise la synchronisation de services aussi variés que le son, la video et la visioconférence.

 

 

COM prend donc son envol avec l'apparition des controls ActiveX. Microsoft  s'engage désormais à ce que chaque composant qu'elle réalisera soit un objet COM et à plus long terme "cross platform". COM fournit deux choses essentielles au développeur. Il est 'versionable' et programmable. Nous pouvons interroger un objet COM pour connaître sa version, ce qu'il fait, quelle interface il supporte. Deuxièmement, un objet COM est capable de vous signaler quelles propriétés, événements et méthodes il est à même de vous délivrer.

 

Signalons au passage que Microsoft, pour une fois, semble vouloir faire d'ActiveX un vrai standard ouvert puisqu'il compte soumettre ce standard au World Wide Web  Consortium et à l'Internet Engineering Task Force.

 

Microsoft entend bien exploiter cette technologie ActiveX dans ses outils client, ses technologies serveur, ses outils, ses langages de développement de manière à embrasser tous les standards Internet. Le message est simple : en fusionnant les technologies Java et OLE, ActiveX se veut un outil universel ne se cantonnant pas au seul monde Windows mais s'ouvrant lentement mais sûrement aux systèmes Macintosh et Unix.

 

VBScript

 

VBScript, ou plus exactement Microsoft Visual Basic Scripting Extension,  c'est l'outil pensé par Microsoft, pour aisément automatiser, créer ou personnaliser des applications pour Internet. Il s'agit d'un sous-ensemble du Visual Basic entièrement compatible avec VB et Visual Basic for Applications. Il permet d'écrire du code VB résidant dans des pages HTML. Comme il s'agit d'un langage interprété, VBScript requiert un interpréteur qui pour l'instant n'existe que dans la version 3 du Microsoft Internet Explorer même si Oracle, Spyglass et NetManage ont déjà promis de suivre. VBScript supportant l'automation OLE, un script VB dans une page HTML pourra contrôler le navigateur lui-même ou bien même piloter d'autres applications comme Word ou Excel. On peut l'exploiter aussi pour gérer les propriétés et méthodes d'un objet OCX ou même d'une applet Java. VBScript n'a qu'un seul type de données appelé Variant et qui peut contenir tout type d'information numérique ou alphanumérique. Plus question donc en VBSCript d'entier, de booléen, de long ou de string. Voici à quoi ressemble le sempiternel programme Hello World écrit en VBScript et inséré dans une page HTML

 

<HTML>

   <HEAD>

                <TITLE>Mon titre</TITLE>

                <SCRIPT LANGUAGE="VBS">

                                Sub Bouton_OnClick

                                                MsgBox "General Protection Fault"

                                End Sub

                </SCRIPT>

   </HEAD>

   <BODY>

                <FORM>

                                <Input Name="Bouton" TYPE= "BUTTON" Value="Hello World">

                </FORM>

   </BODY>

</HTML>

 

 

Un tag <OBJECT> permet la gestion des OCX ou des objets Java. Microsoft a juré ses grands Dieux que le code source de VBScript serait très rapidement disponible et gracieusement sur Internet. C'est une nouvelle importante car elle signifie que n'importe quelle société tierce pourra étendre les fonctionnalités de ses applications en y ajoutant un interpréteur VisualBasic Script.

 

L’objectif de Microsoft est plutôt simple à résumer : combiner deux planches à billet, Windows et Internet. Combiner deux mondes technologiques qui n’ont pas encore de langage commun. HTTP, HTML et autres MIME d’une part, OLE, presse-papiers, documents Office d’autre part. Rendre enfin simple l’intégration d’un environnement de travail PC dans la grande matrice de réseaux qu’est Internet en créant un standard intermédiaire, une série de modules permettant aux deux mondes de s’entendre.

 

Pour contrôler l’exécution de tous ces composants OLE, tous ces plugins, il faut un langage de scripting capable de servir de colle entre toutes les pièces du puzzle. C’est le rôle du VBScript, un sous-ensemble du langage Visual Basic destiné à créer aisément des routines exécutables à partir de pages Web. Cela signifie surtout pour les programmeurs la possibilité de créer applications Windows, routines pour Microsoft Office ou pages Web dynamiques en n’emmagasinant qu’un seul et unique langage de programmation. Microsoft a bien finalisé son accord avec Sun pour supporter les classes et applets Java dans sa gamme de produits Internet mais préfère imposer son VBScript en lieu et place du JavaScript de l’ennemi juré Netscape. Microsoft le promet haut et fort : un script VBScript sera également capable de piloter ou d’exploiter des ressources Java. L’automatisation OLE est l’autre facteur clé de VBScript. VBScript peut s’employer pour manipuler directement le browser Web ou d’autres applications du bureau de travail, modifier les propriétés d’un objet OLE avec du code HTML qui ressemble à ceci :

 

<OBJECT

   ID=BtnBye

   CLASSID="{0ba686b4-f7d3-101a-993e-0000c0ef6f5e}"

   HEIGHT=30

   WIDTH=120>

</OBJECT>

 

tandis qu’il vous faudra intégrer un script VB de la sorte :

 

<script LANGUAGE="VBS">

<!--

WriteGraph

 

Sub WriteGraph

for y = 0 to 9

document.write "<H1>HelloWorld</H1><br>"

next

End Sub

 

-->

 


JAVASCRIPT :

 

Ecrire un texte défilant dans une page HTML.

Cette partie du code est dans un couple de balise SCRIPT à placer dans la partie HEAD ou dans la partie BODY.

 

<SCRIPT>

 

// mettre ici le texte de votre choix

var Texte="SCHOOL FRONTLINE  (c) 1996 ";

 

// mettre ici  la longueur de chaîne affichée qui doit

// être plus longue que Texte

var Taille=100;

 

// mettre ici le délai en milliseconde entre deux

// affichages

var Delai = 100 ;

 

// position de départ

var Position=Taille;

 

 

// variables privées

var Longueur=Texte.length;

 

function deroule()

 {

  Position -- ;

// la chaîne va se déplacer vers la gauche.

 

  var Tampon="";

// et donc la chaîne va  grossir

 

  var i ;

 

  if (Position == 0) {

    Position=Taille;

  }

  

  for ( i=0; i<Position; i++)

      {

      Tampon=Tampon + " ";

      }

 

  Tampon = Tampon + Texte.substring(0,Taille-i);

 

  window.status = Tampon;

  setTimeout("deroule()",Delai);

  }

 

</SCRIPT>

 

Il est possible et efficace de mettre un bandeau déroulant dans la zone texte d'un formulaire.

 

<SCRIPT>

 

// mettre ici le texte de votre choix

var Texte2="UNGI l'organisme de formation dans le vent ! ";

 

 

// mettre ici  la longueur de chaîne affichée qui doit

// être plus longue que Texte

var Taille2=100;

 

// mettre ici le délai en milliseconde entre deux

// affichages

var Delai2 = 100 ;

 

// position de départ

var Position2=Taille;

 

 

// variables privées

var Longueur2=Texte2.length;

 

function deroule2()

 {

  Position2  -- ;

// la chaîne va se déplacer vers la gauche.

 

  var Tampon="";

// et donc la chaîne va  grossir

 

  var i ;

 

  if (Position2 == 0) {

    Position2=Taille2;

  }

  

  for ( i=0; i<Position2; i++)

      {

      Tampon=Tampon + " ";

      }

 

  Tampon = Tampon + Texte2.substring(0,Taille2-i);

 

   document.FORM.Bandeau.value= Tampon;

  setTimeout("deroule2()",Delai2);

  }

 

</SCRIPT>

 

<CENTER><FORM NAME=FORM><INPUT SIZE=50 NAME=Bandeau></FORM>ca</CENTER>

 

 

 <BODY onLoad="setTimeout('deroule2()',50);setTimeout('deroule()',100)">

 

L'application la plus importante dans l'utilisation du langage HTML est le contrôle des masques de saisies.

<FORM> Entrez une chaîne vide : <INPUT TYPE=text1 NAME=Texte1> <INPUT TYPE=button NAME=bouton1 VALUE=Test1 onClick="test1(this.form)">

 

Entrez une adresse : <INPUT TYPE=text2 NAME=Texte2> <INPUT TYPE=button NAME=bouton2 VALUE=Test2 onClick="test2(this.form)"> </FORM>

 

Entrez un nombre : <INPUT TYPE=text3 NAME=Texte3> <INPUT TYPE=button NAME=bouton3 VALUE=Test3 onClick="test3(this.form)"> </FORM>

 

Ce qui donne ceci :

 

<SCRIPT language=JavaScript>

 

function test1(form) {

  if (form.Texte1.value == "")

    alert("entrez maintenant une chaîne non vide")

 else

   alert("entrez maintenant une chaîne vide")

 

 }

 

function test2(form) {

  if (form.Texte2.value == "" ||   

form.Texte2.value.indexOf('@', 0) == -1)

     alert("entrez une adresse");

}

 

function test3(form)

 {

   var erreur = 0 ;

   for (var i = 0; i < form.Texte3.value.length ; i++)

      {

      var chaine = form.Texte3.value.substring (i, i + 1);

      if (chaine > "0" || "9" < chaine)

         {

               erreur=1 ;

         }

      }

    if (erreur == 1 )

    {

        alert ("entrez un nombre" ) ;

    }

}

 

</SCRIPT>

 

 


Active Server Pages

<HTML>

<HEAD>

<TITLE>Sample Web Page</TITLE>

</HEAD>

<BODY>

<P>

Hello <%= Request.ServerVariables(“REMOTE_USER”) %>

The time here is <%= now %>

Your browser is <% = Request.ServerVariables(“http_user_agent”) %>

</BODY></HTML>

<HTML>

 
<HEAD>
 
<TITLE>Scripting in HTML</TITLE>
 
</HEAD>
 
<BODY>
 
<P>We will now create a variable, assign a value to it and then <BR>
 
display the value of the variable within our page</P>
 
<% strName ="steve" %>
 
<P>We have created a script variable called strName and have<BR>
 
assigned a value to it. The value is <%=strName%> </P>
 
</BODY>
 
</HTML>
<%
 
If Time > #8:00:00AM# and Time < #5:00:00PM# Then
 
   strMessage= "Get Back to Work!"
 
Else
 
   strMessage = "You should be at home, resting."
 
End If
 
%>
 
<P> Sir or Madam, <%=strMessage%> </P><!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

Cascading Style Sheet

 

<style TYPE="text/css">

<!--

a            { color: #FF0000; font-family: SerpentineDBol, arial, helvetica; font-size: 15;

               text-decoration: none }

body         { background-color: black; color: white; font-family:

               SerpentineDBol, arial, helvetica; font-style: normal;

               margin-left: 0px; margin-top: 5px }

a:link       { color: #FFFFFF; text-decoration: none }

a:visited    { color: white; text-decoration: none }

a:active

{

                color: rgb(254,0,51);

}

a:hover

{

                color: rgb(254,0,0);

}

aaaa:           { color: #ff0000; text-decoration: none }

h1           { font-size: 12pt; font-family: verdana, arial; font-weight: bold; color:

               #003063 }

-->              

</style>

 

<HTML>

<HEAD> 

    <LINK REL=STYLESHEET TYPE="text/css"

      HREF="http://style.com/cool" TITLE="Cool">

    <STYLE TYPE="text/css">

      @import "http://style.com/basic"

      H1 { color: blue }

    </STYLE>

</HEAD>

<BODY>

    <H1>Headline is blue</H1>

    <P STYLE="color: green">Green Paragraph.

</BODY>

</HTML>

 

http://www.w3.org/pub/WWW/TR/WD-css1.html

 

 

 


Push,  XML , CDF , OSD

"Push " est un terme générique qui couvre une multitude de technologies différentes mais qui reposent sur le même paradigme : pousser (push) l’information sur votre écran plutôt que d’obliger l’utilisateur à l’y tirer ( pull ). CM vous aide à créer vos premiers Push Channels avec Internet Explorer 4 et/ou Netscape Netcaster.

La technologie " push " s’inspire d’une métaphore télévisuelle : vous vous abonnez une fois pour toute à un canal d’informations que vous désirez visualiser et son contenu est périodiquement diffusé vers vous. Broadcasting, tuner, channel, voilà qu’Internet s’imprègne de la terminologie en vigueur dans le monde de la TV.

Pointcast, Marimba, Intermind, inCommon ont été les pionniers du Webcasting mais la lutte pour la standardisation des chaînes se résume de plus en plus en un combat Microsoft Internet Explorer 4 contre Netscape Communicator 4.

Microsoft a introduit dans IE4, le support de trois nouveaux standards orientés push : XML, CDF et OSD.

XML

Le World Wide Web Consortium (W3C) a introduit un nouveau standard Extensible Markup Language (XML) pour complémenter le langage HTML. En gros, HTML est pensé pour l'affichage, la représentation de données tandis que XML est pensé pour leur description. XML fournit un standard pour définir vos propres tags et balises, vos structures de données pour en faciliter l'échange en ligne.

CDF

Microsoft supporte le CDF ( Channel Definition Format) à partir d'IE4 pour gérer sa technologie push sur le Web et ses Active Channels. CDF n'est rien d'autre qu'un format de données XML particulier, XML n'étant jamais qu'un dérivé du Standard Generalized Markup Language (SGML) qui fêtera bientôt ses trente ans.

Les marqueurs CDF permettent à un éditeur de contenus sur Internet d'automatiser la distribution de l'information sous formes de chaînes d'un serveur Web vers des utilisateurs clients. Un fichier CDF contient un descriptif de la chaîne, un logo plus un planning pour son renouvellement automatique.

Créons par exemple le fichier cm.cdf suivant :

<div align="center">

<?XML version="1.0"?>
<CHANNEL HREF="http://www.compmag.com/channel/">
<TITLE>CM WebCasting</TITLE>
<ABSTRACT>This CM channel is a sample for readers</ABSTRACT>
<LOGO HREF="logo_cm.gif" STYLE="IMAGE-WIDE"/>
<LOGO HREF="logo_cm2.gif" STYLE="IMAGE"/>
<SCHEDULE STARTDATE="1997-11-23">
<INTERVALTIME DAY="1" />
<EARLIESTTIME HOUR="2" />
<LATESTTIME HOUR="6" />
</SCHEDULE>
<ITEM HREF="page1.htm">
<LOGO HREF="a.gif" STYLE="ICON"/>
<TITLE>Page 1</TITLE>
<ABSTRACT>This is the abstract description for page 1.</ABSTRACT>
</ITEM>
<ITEM HREF="page2.htm"><LOGO HREF="b.gif" STYLE="ICON"/>
<TITLE>Page 2</TITLE>
<ABSTRACT>This is the abstract description for page 2.</ABSTRACT>
</ITEM>
<ITEM HREF="scrnsave.htm"><USAGE VALUE="ScreenSaver"></USAGE></ITEM>
</CHANNEL>

</div>

La balise <?XML Version Encoding RequiredMarkupDeclaration?> sert d'instruction préliminaire pour le parser XML et contient les arguments

• Version: la version du standard XML (actuellement 1.0)
• Encoding: le jeu de caractères Unicode utilisé dans le document
• RequiredMarkupDeclaration (RMD) signale si le navigateur a besoin de lire toute la grammaire DTD avant de traiter les

<Channel> pointe sur la home page de votre chaîne, <Title> en décrit le titre et <Abstract> en donne un bref résumé. Vous aurez besoin d'un logo de 80 sur 32 pixels pour apparaître dans les Active Channels ainsi que d'une icône de 16 sur 16 pixels . La balise <schedule> spécifie qu'à partir du 23 novembre, à intervalle quotidien, l'information est mise à jour entre 2 et 6 H. La chaîne CM qui nous sert d'exemple contient deux <ITEMS> disposant eux mêmes d'un titre, d'un abstract et d'un logo. Enfin, la balise <ITEM HREF="scrnsave.htm"> définit la page à télécharger lorsque l'Active Channel est appelé dans l'économiseur d'écran.

 

Le fichier CDF est appelé à parir d'une page HTML ordinaire qui contiendra le code suivant:

<div align="center">

<html>
<head>
<title>CM Channel</title>
</head>
<body>
<A HREF="http://www.compmag.com/channel/cm.cdf">
<img src="http://www.microsoft.com/workshop/prog/ie4/channels/button.gif"
alt="Subscribe to IE4 channel">
</A>
</body>
</html>

</div>

Button.gif  est une icône Microsoft affichant un petit satellite et le texte "Add to Channels". Un clic sur cette icône activera l'exécution de myfirst.cdf

 

OSD

Le format Open Software Description (OSD) format est un dialecte de XML utilisé pour décrire des composants logiciels et faciliter leur distribution et leur mise à jour sur le Web.

<div align="center">

<SOFTPKG NAME="com.compmag.www.mygame" VERSION="1,0,0,0">
<TITLE>My Game</TITLE>
<ABSTRACT>My game by CM</ABSTRACT>
<LICENSE HREF="http://www.compmag.com/license.html" />
<IMPLEMENTATION>
<OS VALUE="WinNT"><OSVERSION VALUE="4,0,0,0"/></OS>
<OS VALUE="Win95"/>
<PROCESSOR VALUE="x86" />
<LANGUAGE VALUE="en" />
<CODEBASE HREF="http://www.compmag.com/mygame.cab" />
</IMPLEMENTATION>
</SOFTPKG>

</div>

 

Le fichier d'exemple myfirst.osd décrit le jeu "MyGame" disponible pour Windows 95 et NT 4 pour les processeurs Intel x86 en anglais dans le fichier mygame.cab.

Netcaster

La création d'une chaîne pour Netcape et son Netcaster devra passer par la réalisation d'un script Javascript inséré dans une page HTML

<SCRIPT LANGUAGE="JavaScript">
function needNetcaster()
{window.open( "http://netcaster.netscape.com/finder/need_netcaster.html"
, "need_netcaster", "width= 500, height= 400, titlebar= yes, toolbar= no, location= no, directories= no, status= yes, menubar= no, scrollbars= yes"); }
function addChannelAPI()
{
needNetcaster();
}
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.2">
var chanURL = "http://www.netline.be/netline/formations/html/cm/index.htm";
var chanName = "CM Netcast";
var chanIntervalTime = 720;
var chanMaxCacheSize = 5120;
var chanDepth = 2;
var chanActive = 1;
var chanMode = "webtop";
var chanType=1;
var getChannelObject = null;
var addChannel = null;
var nc = null;
var ncActive = 0;
var poller = null;
function activateNetcaster()
{ nc.activate(); }
function pollActive()
{
if (nc.active)
{
ncActive=1;
setTimeout(addChannelAPI,10000);
clearInterval(poller);
}
}
function netcasterSniffer()
{
if (!components["netcaster"])
{
alert("This page requires the Netcaster component.");
needNetcaster();
}
else
{
nc = components["netcaster"];
if (nc.active == false)
{
activateNetcaster();
poller=setInterval(pollActive,500);
}
else
{
ncActive = 1;
addChannelAPI();
}
}
}
function addChannelAPI()
{
if (ncActive == 0) netcasterSniffer();
else
{
nc = components["netcaster"];
import nc.getChannelObject;
import nc.addChannel;
var chan = getChannelObject();
chan.url = chanURL;
chan.name = chanName;
chan.intervalTime = chanIntervalTime;
chan.maxCacheSize = chanMaxCacheSize;
chan.depth = chanDepth;
chan.active = chanActive;
chan.mode=chanMode;
chan.type=chanType;
addChannel(chan);
}
ncActive = 0;
}
function clikImg() {}
</SCRIPT>

<A HREF="#" onClick="addChannelAPI(); clikImg(); return(false);">
<IMG NAME="ncnowimage" SRC= "http://home.netscape.com/inserts/images/ncnow.gif" WIDTH= 117 HEIGHT= 55 BORDER= 0 ALT= "Add CM Netcast Now!"> Add CM Netcast Now! </a>

<SCRIPT LANGUAGE="JavaScript1.1">
// This code helps Netscape track use of button
document.ncnowimage.src = "http://home.netscape.com/inserts/images/ncnow.gif?"+ document.location;
function clikImg() {
document.ncnowimage.src= "http://home.netscape.com/inserts/images/ncnow.gif?AddedChannelName=CM%20Netcast&AddedChannelURL= http://www.netline.be/netline/formations/html/cm/index.htm";
}
</script>

</body>
</html>

 


Le Protocole S-HTTP

Secure HTTP (S-HTTP) est une extension du protocole HTTP fournissant des services de sécurité indépendants pour la confidentialité des transactions, l'authenticité des émetteurs et récepteurs.

Le protocole fournit des fonctions de chiffrement symétrique aux clients et serveurs tout en préservant le modèle de transaction et les caractéristiques d'implémentation du HTTP. Plusieurs standards de chiffrement de messages peuvent être exploités comme PKCS-7, PEM, and PGP. S-HTTP ne réclame aucune clé publique côté client. Des transactions peuvent être directement entamées par le client sans attendre une clé.

Aucune donnée sensible n'est envoyée en clair sur le câble.

La protection du message s'articule autour de trois axes principaux :

·       signature

·       authentification

·       encryption.

Un message peut être signé, authentifié, crypté ou une combinaison des trois. Plusieurs modèles de gestion de clés sont disponibles : mot de passe secret, échange de clé publique, distribution de ticket Kerberos.

Si une signature digitale est réclamée, un certificat peut être attaché au message ou envoyé indépendamment au destinataire.

S-HTTP définit deux mécanismes de transfert de clés : l'un utilisant l'échange de clé publique, l'autre travaillant avec des clés transmises de manière externe.

L'intégrité du message et l'authenticité de l'émetteur sont vérifiés via le calcul d'un Message Authentication Code (MAC) en utilisant un secret commun.

Un message Secure HTTP consiste en une ligne de requête similaire au HTTP suivi d'une série d'en-tête de style RFC 822 suivi par un contenu encapsulé. Un code spécial distingue les transactions S-HTTP des autres transactions : 'Secure-HTTP/1.1'. Le serveur répond par une ligne :

Secure-HTTP/1.1 200 OK

PEM est la méthode d'encryption de message définie par la RFC1421. Le protocole PKCS-7 est désigné pour un canal 8 bits mais peut traverser d'autres canaux en utilisant un encodage 'BASE64'.'


Le Protocole SSL

Secure  Sockets Layer (SSL V3.0) est un protocole de sécurité fournissant une méthode pour communiquer sur Internet de manière privée. SSL est un protocole qui a été soumis au consortium W3 pour fournir une sécurité aux données transitant par des sessions TCP/IP. Il fournit trois services fondamentaux : l'encryption des données, l'authentification du serveur et l'intégrité des données à travers une session TCP/IP.

A l'initialisation d'une connexion TCP/IP, SSL permet à un client et un serveur de réaliser une "poignée de main" où ils conviennent d'un niveau de sécurité à atteindre. Après, le rôle de SSL est des plus simples. Il se contente d'encrypter et de décrypter tous les flux de données transitant par un protocole TCP/IP donné.

 

Le protocole SSL est subdivisé en deux couches. Au plus bas niveau, le SSL Record Protocol est utilisé pour l'encapsulation de différents protocoles de plus haut niveau. Un de ces protocoles de plus haut niveau, le SSL Handshake Protocol, permet au client et au serveur de s'authentifier et de négocier entre eux un algorithme et des clés d'encryption avant de s'échanger des données. SSL est conçu comme un protocole indépendant d'une application. Un protocole de plus haut niveau peut reposer de manière transparente sur le protocole SSL. Avec SSL, une connexion entre client et serveur est privée, elle repose sur une encryption établie après un handshake initial où est générée une clé secrète. Pour l'encryption des données elles-mêmes, il est fait appel à une cryptographie de type symétrique comme DES ou RC4. Par contre, pour l'authentification des tiers, il est fait appel à une cryptographie asymétrique comme RSA.

 

SSL a été pensé de manière extensible. Il peut fonctionner comme simple canevas où de nouvelles clés publiques et de nouvelles méthodes d'encryption peuvent être incorporées en fonction des besoins. Il pallie un des problèmes actuels de la cryptographie, à savoir la gourmandise CPU, en offrant une méthode de cache qui réduit le nombre de connexions nécessaires pour établir un transfert de données.

 

A tout moment, le protocole SSL conserve l'état d'une connexion et stocke une série de données :

 

·       session identifier : une séquence arbitraire d'octets choisis par le serveur pour identifier une session active

·       peer certificate  X509.v3[X509] : le certificat de la machine paire.

·       compression method : algorithme utilisé pour la compression des données avant leur encryption.

·       cipher spec : l'algorithme d'encryption (aucun, DES etc.) et l'algorithme MAC/Message  Authentication Codes  (MD5 ou SHA)     

·       master secret : un espace adressable secret de 48 octets partagé entre le client et le serveur

·       is resumable : un drapeau indiquant si la session peut être exploitée pour initialiser de nouvelles connexions.

 

L'état de la connexion inclut les éléments suivants :

    

·       server and client random : séquence d'octets choisis par le client et le serveur à chaque connexion

·       server write MAC secret : le "secret" utilisé dans la phase MAC pour l'écriture de données par le serveur.

·       client write MAC secret : idem côté client

·       server write key  : la clé d'encryption serveur - décryption client

·       client write key  : l'inverse

·       initialization vectors :

·       sequence numbers 

 

    

    

     Client                                                Server

    

     ClientHello                   -------->

                                                      ServerHello

                                                     Certificate*

                                              CertificateRequest*

                                   <--------   ServerKeyExchange*

     Certificate*

     ClientKeyExchange

     CertificateVerify*

     [ChangeCipherSpec]

     Finished                      -------->

                                               [ChangeCipherSpec]

                                   <--------             Finished

     Application Data              <------->     Application Data

 


 

 

 

 


 

Front Page 2000

 

 

Vous avez connu les premières versions de Microsoft Office contenant uniquement Word et Excel. S'y sont joints ensuite PowerPoint et Access. Office 2000, dont la parution remonte à ce 10 juin 1999,  ne contiendra pas moins de 8 logiciels : Word, Excel, Access, Power Point, Outlook, Publisher, PhotoDraw et le futur FrontPage 2000 qui fera aujourd'hui l'objet d'un test intensif

 

Toute la suite logicielle Office 2000 a pour principal objectif une meilleure intégration avec le World Wide Web.

Le standard HTML devient un format de fichier Office au même titre que les documents binaires de type .doc ou .xls. Il sera donc possible à partir de n'importe quel composant de la suite de publier sur le Web sans perdre la mise en page originale conservée grâce à la technique des CSS ( Cascading Style Sheet ).

 

Le concept de "themes" familier aux utilisateurs de FrontPage 98 a été étendu à toute la famille Office. Vous pouvez donc appliquer à votre présentation PowerPoint l'habillage graphique que vous avez conçu dans FrontPage.

 

Une nouvelle collection d'Office Web Components permet de publier directement sur un site Internet des documents bureautiques aussi classiques que la feuille de calcul, la table d'une base de données ou l'histogramme/camembert. Il est possible de placer sur le serveur HTTP gérant votre site des composants COM/ActiveX étendant les fonctionnalités de base de vos documents HTML.

 

Dès l'installation d'Office 2000, vous allez découvrir des modifications à tout votre environnement de travail Windows 98 ou NT. Un nouveau folder "Web Folder" vous permet de vous connecter à des sites distants de la même manière que vous opérez habituellement avec des dossiers locaux ou du voisinage réseau. Vous allez donc pouvoir glisser-déplacer des fichiers d'un répertoire du disque dur directement vers un site Web sans passer par la lourde épreuve d'un transfert FTP.

Il n'y a désormais plus de distinction entre les composants FrontPage Explorer et FrontPage Editor. Le passage continuel entre ces deux applications dans FrontPage 98, plutôt désarmant pour le novice, n'était pas non plus à l'abri de problèmes techniques. Frontpage 2000 se présente sous forme d'une application unique qui permet en un seul écran de manipuler la totalité d'un site ou d'éditer un de ses composants.

 

L'amélioration qui fera le plus plaisir aux puristes  n'est pas visible à l'œil nu. FrontPage conserve désormais la mise en page que vous avez attribué au document source. Fini, l'époque où Frontpage vous détruisait une page complète HTML sans le moindre backup juste parce que vous aviez oublié une parenthèse ou un crochet. Fini le temps où Frontpage vous massacrait une belle imagemap sous prétexte de la remplacer par un composant Frontpage. Rangé aux oubliettes le souvenir de FrontPage s'évertuant à créer du code illisible par un navigateur Netscape. Le programmeur HTML ne se fait plus imposer de mise en page par Frontpage, c'est lui qui décide quelle structure visuelle il va appliquer à l'ensemble du document pour s'y retrouver plus rapidement dans son enchevêtrement de balises <table><tr> et autres <td>. Une nouvelle option, piquée à la concurrence dans Hot Metal Pro, permet de visualiser les balises HTML même en mode d'édition normal/WYSIWYG : l'option "reveal tag" du menu "view" épingle les balises HTML directement sur le document final ce qui apporte beaucoup en lisibilité du document lors de sa création.

 

Un effort évident a été accompli au niveau de la publication de sites à distance. Il est enfin possible de choisir si l'on veut publier la totalité des pages d'un site ou uniquement les pages qui viennent d'être modifiées. Pour les plus paranos, il est possible de certifier la publication grâce au standard SSL ( Secure Socket Layer).

 

Où FrontPage 98 n'était qu'un simple éditeur HTML, Frontpage 2000 se veut également éditeur de pages ASP ( Active Server Pages), éditeur de script VB ou Javascript. Office 2000 est livré avec l'environnement de développement Visual Basic for Applications 6.0 fournissant exactement la même interface graphique que son grand frère VB 6.

 

Des fonctionnalités qui nous avait cruellement manqué dans les versions précédentes ont enfin été incorporées :

  • Enfin un "search & replace" qui fonctionne pour la totalité d'un site
  • Affichage du temps de téléchargement d'une page dans la barre de statut : 40 secondes à 28,8 kbps, 9 secondes en ISDN, vous visualiserez directement si votre page n'est pas trop lourde
  • Les lignes de code sont numérotées. Une " erreur javascript à la ligne 50" nous laissera donc moins perplexe.
  • La boîte affichant la liste des polices laisse apparaître pour chaque fonte un exemple de son utilisation
  • Une option "roll over style" permet de paramétrer des effets dynamiques lorsqu'on passe au-dessus d'un hyperlien en mode texte. Il vous faudra toujours recourir à Dreamweaver ou Fireworks si vous désirez le même effet sur des hyperliens graphiques, dommage.
  • La possibilité de positionner au pixel près tel ou tel élément d'une page HTML grâce à la fonction "absolute positioning" apparue avec le Dynamic HTML
  • Un "color picker" amélioré permet de sélectionner une couleur de base parmi une palette Web idéale de 216 couleurs, de capturer une couleur partout dans le document et de calculer automatiquement sa valeur hexadécimale

Une option très importante est apparue avec cette version 2000 de frontpage. Il s'agit d'une option "Compatibility" du menu "page options" qui permet de générer du code compatible avec soit Internet Explorer, soit Netscape soit WebTV. Vous pouvez de même décider si les composants ActiveX, CSS, DHTML ou les applets Java sont acceptées dans le site que vous générez. Les mêmes options de compatibilité sont disponibles côté serveur selon que vous penchez pour un serveur Microsoft IIS ou Apache.

 

Pour les programmeurs et webmasters travaillant en équipe, de nouvelles fonctions de "source control" , c'est-à-dire de gestion de projet, permettent par exemple de "locker" un fichier pendant qu'un des membres de l'équipe l'édite. Il est enfin possible de gérer le flux des documents en créant un itinéraire dans l'entreprise : création de page par un graphiste, approbation par un comité rédactionnel, transfert vers un département de juristes pour approbation avant l'envoi vers le webmaster chargé de la publication.

 

Nous avons beaucoup apprécié la génération de rapports permettant une meilleure vision d'ensemble d'un projet :

Nombre de pages, vitesse de transmission, taille des images, hyperliens cassés, pages orphelines, inventaire des fichiers etc.

 

 

De nouveaux composants Frontpage tournant côté serveur facilitent l'insertion de données dans une page Web sans connaissance préalable d'ODBC, de requêtes SQL ou du langage ASP. On peut ainsi insérer le contenu d'un formulaire directement dans une base de données.

 

L'aide en ligne est sérieusement améliorée avec un inventaire fort exhaustif des spécifications HTML, Javascript, VBA etc etc.

 

Frontpage reste un programme lourd et lent. On est quelque fois étonné des performances d'un shareware comme HomeSite 4 d'Allaire pour un simple "search & replace" par rapport à ce dévoreur de RAM qu'est Frontpage 2000.

 

Pas d'outil pour créer des effets "rollover" sur des graphiques , ni pour la création de table à partir d'une image,

pas de librairie de code javascript, les lacunes de FrontPage 2000 sont encore importantes.

 

Word a tué Word Perfect, Excel n'a fait qu'une bouchée d'123, Access a signé l'arrêt de mort de Dbase mais rassurez vous FrontPage 2000 n'est pas encore de taille à tuer PageMill, Dreamweaver, Home Site ou Hot Metal.

Attendons pour cela FrontPage 2001, l'odyssée du cyberespace !

 

 

 

Quelles différences existe-t-il entre Microsoft FrontPage 98 et Microsoft FrontPage 2000 ?

Avec le tableau synoptique suivant, découvrez de manière synthétique quelles sont les nouveautés ou les améliorations apportées à Microsoft FrontPage 2000 par rapport à la version précédente, Microsoft FrontPage 98.

 

 

Fonctionnalité

Description

Nouveauté

Placement des objets au pixel près

Placez les éléments de la page (graphismes et textes) exactement où vous le souhaitez, y compris par couches ("layer content"), grâce au placement absolu et relatif.

Amélioration

60 thèmes prêts à l’emploi

Faites votre choix parmi 60 thèmes professionnels prêts à l’emploi qui donneront un aspect homogène à votre page, vos pages ou l’ensemble de votre site.

Nouveauté

Thèmes personnalisés

Faites votre choix parmi 60 thèmes prêts à l’emploi pour ensuite les personnaliser avec vos couleurs, logos, éléments graphiques, fonds de page et puces, et obtenir la physionomie qui convient à votre site.

Amélioration

Effets d’animation DHTML multi-navigateurs

D’un simple clic, ajoutez à vos pages des effets HTML dynamique (animation, sommaires réductibles, etc.) Ces effets fonctionnent de manière avec différents navigateurs comme Netscape® Navigator 4.0 et Microsoft Internet Explorer 4.0, et de manière statique avec tous les navigateurs de version 3.

Amélioration

Outils de manipulation des couleurs améliorés

Choisissez vos couleurs personnalisées à partir d’un sélecteur ou d’une roue de couleurs, sélectionnez une couleur dans un élément graphique et ajoutez-la à vos couleurs personnalisées, ou faites votre choix dans nos jeux de couleurs coordonnées spécialement pour le Web . Les couleurs personnalisées sont disponibles partout où cela est possible, et le restent d’une session à l’autre.

Amélioration

Feuilles de style en cascade

Utilisez les feuilles de style en cascade (CSS) pour obtenir une mise en forme de page personnalisée et homogène. Avec FrontPage 2000, appliquez-les à plusieurs pages et même à tout un site.

 

1

 

Nouveauté

Préservation intégrale du code source HTML

Modifiez le HTML et les scripts existants (y compris les scripts ASP) sans rien ajouter. Importez dans FrontPage du HTML créé ailleurs, sans aucune modification. Ordre des balises ("tags") et commentaires, mise en majuscules et espaces vierges sont intégralement préservés.

Nouveauté

Insertion rapide de code en mode d’affichage HTML

Utilisez de simples boutons ou menus déroulants pour insérer du code directement en mode HTML.

Nouveauté

Mise en forme HTML personnalisée

Décidez comment mettre votre code en retrait, quelles couleurs appliquer à vos balises, que mettre en majuscules, quand utiliser les balises facultatives. Lorsque des pages sont importées ou que du nouveau code est écrit, FrontPage leur applique automatiquement ces préférences.

Nouveauté

Affichage des balises HTML en mode d’affichage Normal

Tout en restant dans le mode Normal (affichage " tel écran, telle page " - WYSIWYG), voyez sans délai l’effet des balises dans vos pages.

Amélioration

Assistant Requête de base de données

Utilisateurs dépourvus d’expérience dans le domaine des bases de données, incorporez aisément et automatiquement les requêtes de bases de données directement dans vos pages. Les données sont dynamiques, et les données actualisées sont puisées dans la base de données à chaque chargement de la page.

Nouveauté

Pages d’accès aux données ("Access Data Pages")

Incorporez aisément les bases de données Microsoft Access à vos pages Web, et donnez aux utilisateurs la possibilité d’ajouter ou modifier la base de données directement depuis leur navigateur Internet.

Nouveauté

Publication instantanée de base de données

Créez et mettez à jour une base de données aussi aisément que vous créez un formulaire, en permettant aux utilisateurs de créer une nouvelle base de données Access, ou d’en modifier une, sur la base des données de formulaire d’une page.

 

Nouveauté

Composants Web prêts à l’emploi

Insérez aisément des fonctionnalités avancées directement dans des pages Web grâce à des composants FrontPage tels que le composant Catégorie, et grâce aux composants Microsoft Office Web Feuille de calcul, Tableau croisé dynamique et Graphique.

Amélioration

Modification de codes HTML, DHTML, scripts, ASP et XML

Utilisez le mode d’affichage HTML pour afficher les pages et les scripts, et les modifier directement au format HTML, DHTML, script, ASP et XML.

Nouveauté

Microsoft Script Editor

Grâce à l’éditeur de scripts intégré, modifiez et déboguez plus rapidement vos scripts, y compris JavaScript et Visual BasicÒ , Edition Script (VB Script).

Nouveauté

Visual Basic, Edition Applications (VBA)

Bâtissez de puissantes solutions FrontPage à l’aide de VBA. Tirez parti des connaissances que vous possédez déjà, pour étendre ces solutions avec le reste des applications Microsoft Office.

Nouveauté

Modèles objet applicatifs, documentaires et Web

Développeurs, manipulez par la programmation le logiciel FrontPage, les pages Web créées sous FrontPage, et les sites Web FrontPage.

Amélioration

Intégration avec les contrôles DTC et Visual InterDevÔ

Etendez les fonctionnalités FrontPage en créant des contrôles DTC ("Design Time Controls") avec le système de développement de site Microsoft Visual InterDev.

 

 

Fonctionnalité

Description

 

Une vue synthétique du site grâce à des affichages et des états de gestion

Nouveauté

Affichage
Page

Grâce aux outils Explorateur et Editeur de FrontPage, affichez et modifiez vos pages, et gérez votre site depuis une seule et même interface conviviale.

Amélioration

Affichage
Dossiers

Affichez toutes vos pages, tous vos éléments graphiques et tous les fichiers de votre site. Réalisez ainsi une gestion rapide de vos pages, quelque soit l'endroit où elles se trouvent sur votre site. Trouvez facilement par exemple, les fichiers en doublons se trouvant dans de multiples répertoires.

Amélioration

Affichage
Rapports

Affichez rapidement vos pages, éléments graphiques et fichiers de vos sites Web, et éditez aisément des états détaillant les pages trop chargées, les fichiers non liés, les documents ajoutés ou modifiés récemment, les liens rompus, les erreurs de composants, le statut, le nom attribué, les catégories, le statut de publication ou le statut de vérification de chacun des fichiers.

Amélioration

Affichage
Navigation

Gérez aisément le fonctionnement des barres de navigation de votre site en créant rapidement des barres de navigation, en affichant aisément le plan de navigation de votre site, en conservant vos paramètres d’une session à l’autre, et en vous attardant sur certains nœuds.

Amélioration

Affichage
Liens hypertexte

Affichez de manière graphique tous les éléments liés à une page donnée ou un document Microsoft Office, et constatez visuellement la rupture de liens.

Amélioration

Affichage
Tâches

Suivez les tâches à accomplir et leur affectation ; affichez rapidement le statut, la description et la priorité des tâches.

 

Des fonctions de publication flexibles

Amélioration

Contrôle de la publication au niveau de la page

Décidez exactement des pages à charger sur le serveur en les paramétrant comme " à ne pas publier " , ou en publiant les seules pages qui ont changé.

Amélioration

Indicateur d’avancement de la publication

Un indicateur d’avancement éclaircit le déroulement du processus de publication.

Amélioration

Publication sur différents serveurs Web

Publiez aisément votre site auprès d’un fournisseur de services Internet (hébergeur) avec ou sans les extensions serveur FrontPage installées à l’aide du FTP intégré au logiciel. Les fournisseurs d’accès peuvent choisir Microsoft Windows NTÒ ou différents autres systèmes d'exploitation Unix pour leur serveur Web.

 

d'Intranets.

 

Fonctionnalité

Description

 

Automatisation des tâches routinières

Nouveauté

Composant Catégorie

Publiez des pages Web et des documents Microsoft Office dans un site Web FrontPage ; les pages seront automatiquement actualisées avec des liens à ces nouveaux documents.

Amélioration

Réparation automatique de liens hypertexte

Renommez ou déplacez une page ou un élément graphique de votre site Web FrontPage ; les liens hypertexte seront automatiquement réparés. Fonctionne même depuis Microsoft Office.

 

Des sites Web qui fonctionnent dans tous les environnements

Nouveauté

Ciblage de navigateur, de fonctions et de serveurs spécifiques

Présélectionnez les environnements à cibler (navigateur, serveur Web, extensions serveur FrontPage, ASP, DHTML, CSS, Java, script) ; FrontPage restreint automatiquement les fonctionnalités qui ne fonctionneraient pas sur les systèmes ciblés.

Amélioration

Assistant Requête de base de données

Permet à ceux qui n’ont pas d’expérience préalable en matière de bases de données d’incorporer aisément et automatiquement des requêtes de bases de données directement dans leurs pages. Les données sont dynamiques et les données à jour sont extraites de la base de données à chaque chargement de la page.

Amélioration

Excellente collaboration avec d’autres logiciels Microsoft très répandus

Utilisez la même console de gestion que Windows NT Server (MMC - Microsoft Management Consol), Microsoft Internet Information Services (IIS) et d’autres logiciels de la famille BackOfficeÒ  ; elle fait partie intégrante de Windows NT Server, Microsoft Site Server et Visual InterDev.

 

 

 

 

 

 


 

Appendice A Caractères accentués

 

Code ASCII              Code HTML         Caractère

 

34                      quot              "

     38                      amp               &

     60                      lt                <

     62                      gt                >

    128                      Ccedil            Ç

    129                      uuml             ü

    130                      Eacute            é

    131                      acirc             â

    132                      auml              ä

    133                      agrave            à

    134                      aring             å

    135                      ccedil            ç

    136                      ecirc             ê

    137                      euml              ë

    138                      egrave            è

    139                      iuml              ï

    140                      icirc             î

    141                      igrave            ì

    142                      Auml              Ä

    143                      Aring             Å

    144                      Eacute            É

    146                      AElig             Æ

    147                      ocirc             ô

    148                      ouml              ö

    149                      ograve            ò

    150                      ucirc             û

    151                      ugrave            ù

    152                      yuml              ÿ

    153                      Ouml              Ö

    154                      Uuml              Ü

    155                      oslash            ø

    157                      Oslash            Ø

    160                      aacute            á

    161                      iacute            í

    162                      oacute            ó

    163                      uacute            ú

    164                      ntilde            ñ

    165                      Ntilde            Ñ

    181                      Aacute            Á

    182                      Acirc             Â

    183                      Agrave            À

    198                      atilde            ã

    199                      Atilde            Ã

   208                      eth               ð

    209                      ETH               Ð

    210                      Ecirc             Ê

    211                      Euml              Ë

    212                      Egrave            È

    214                      Iacute            Í

    215                      Icirc             Î

    216                      Iuml              Ï

    224                      Oacute            Ó

    225                      szlig             ß

    226                      Ocirc             Ô

    227                      Ograve            Ò

    228                      otilde            õ

    229                      Otilde            Õ

    231                      thorn             þ

    232                      THORN             Þ

    233                      Uacute            Ú

    234                      Ucirc             Û

   235                      Ugrave            Ù

    236                      yacute            ý

    237                      Yacute            Ý


 

 

Appendice B Code ISO Latin 1

 

ISO Latin 1   HTML  Caractère

------------------------------------------

38           &amp;         ampersand

60           &lt;          less than

62           &gt;          greater than

192           &Agrave;      capital A, grave accent

193           &Aacute;      capital A, acute accent

194           &Acirc;       capital A, circumflex accent

195           &Atilde;      capital A, tilde

196           &Auml;        capital A, dieresis or umlaut mark

197           &Aring;       capital A, ring

198           &AElig;       capital AE diphthong (ligature)

199           &Ccedil;      capital C, cedilla

200           &Egrave;      capital E, grave accent

201           &Eacute;      capital E, acute accent

202           &Ecirc;       capital E, circumflex accent

203           &Euml;        capital E, dieresis or umlaut mark

204           &Igrave;      capital I, grave accent

205           &Iacute;      capital I, acute accent

206           &Icirc;       capital I, circumflex accent

207           &Iuml;        capital I, dieresis or umlaut mark

208           &ETH;         capital Eth, Icelandic

209           &Ntilde;      capital N, tilde

210           &Ograve;      capital O, grave accent

211           &Oacute;      capital O, acute accent

212           &Ocirc;       capital O, circumflex accent

213           &Otilde;      capital O, tilde

214           &Ouml;        capital O, dieresis or umlaut mark

216           &Oslash;      capital O, slash

217           &Ugrave;      capital U, grave accent

218           &Uacute;      capital U, acute accent

219           &Ucirc;       capital U, circumflex accent

220           &Uuml;        capital U, dieresis or umlaut mark

221           &Yacute;      capital Y, acute accent

222           &THORN;       capital THORN, Icelandic

223           &szlig;       small sharp s, German (sz ligature)

224           &agrave;      small a, grave accent

225           &aacute;      small a, acute accent

226           &acirc;       small a, circumflex accent

227           &atilde;      small a, tilde

228           &auml;        small a, dieresis or umlaut mark

229           &aring;       small a, ring

230           &aelig;       small ae diphthong (ligature)

231           &ccedil;      small c, cedilla

232           &egrave;      small e, grave accent

233           &eacute;      small e, acute accent

234           &ecirc;       small e, circumflex accent

235           &euml;        small e, dieresis or umlaut

236           &igrave;      small i, grave accent

237           &iacute;      small i, acute accent

238           &icirc;       small i, circumflex accent

239           &iuml;        small i, dieresis or umlaut

240           &eth;         small eth, Icelandic

241           &ntilde;      small n, tilde

242           &ograve;      small o, grave accent

243           &oacute;      small o, acute accent

244           &ocirc;       small o, circumflex accent

245           &otilde;      small o, tilde

246           &ouml;        small o, dieresis or umlaut

248           &oslash;      small o, slash

249           &ugrave;      small u, grave accent

250           &uacute;      small u, acute accent

251           &ucirc;       small u, circumflex accent

252           &uuml;        small u, dieresis or umlaut

253           &yacute;      small y, acute accent

254           &thorn;       small thorn, Icelandic

255           &yuml;        small y, dieresis or umlaut

 


 


Bibliographie

·       The Internet Guide for New Users
Daniel P. Dern, McGraw-Hill, ISBN: 0-07-016511 (paperback)

·       The Internet Starter Kit for the Macintosh
Adam Engst, Hayden Books, ISBN: 1-56830-064-6

·       The Internet Unleashed
Martin Moore, others, Sams Publishing, ISBN: 0-672-30466-X

·       PC Internet Tour Guide
Michael Fraase, Ventana Press, ISBN: 1-56604-084-1

·       The Whole Internet User's Guide and Catalog
Ed Krol, O'Reilly and Associates, ISBN: 1-56592-025-2

·       Zen and the Art of Internet
Brendan Kehoe, Prentice Hall, ISBN: 0-13-010778-6

·       Spinning the Web         

      Andrew Ford, International Thomson Publishing, ISBN: 1-850-32141-8

 

HTMLPrimer.html

strict-html.html

StyleGuide.html

Overview.html

HTMLQuickRef.html

HTML.dtd.html

draft-raggett-www-html-00.*

HTTP/HTTP2.html

 

World Wide Web Consortium XML Group

http://www.w3.org/pub/WWW/MarkUp/SGML/Activity

Spécifications XML 1.0

http://www.w3.org/pub/WWW/TR/WD-xml-lang-970331.html

XML FAQ

http://www.ucc.ie/xml/

Channel Definition Format

http://www.microsoft.com/standards/cdf.htm

eXtensible Markup Language

http://www.microsoft.com/standards/xml-f.htm

 

Official References

http://www.w3.org/TR/REC-html40/

The HTML 4.0 Recommendation

http://home.netscape.com/assist/net_sites/frames.html

Documentation Netscape

http://www.microsoft.com/workshop/author/html/reference/elements.htm

Internet Explorer 4.0 Tag reference

Tutorials

http://www.newbie.net/sharky/frames/menu.html

Charlton D. Rose's Netscape Frames Tutorial

http://www.spunwebs.com/sites2c/frmtutor.html

WebSpinner's Frames Tutorial

http://www.hwg.org/resources/faqs/frameFAQ.html

Matthew Miller's Frames FAQ

http://www.columbia.edu/~jll32/html/frame.html

Jay's guide to frames

http://homepages.uc.edu/~solkode/w3guide/frames.html

Dave Solko's 'All about frames'

http://www.beadsland.com/landscape/framoff/

'Whats wrong with Frames?'

http://www.bagism.com/frameshop/

Frame Shop

Other Related Links

http://www.w3.org/TR/WD-layout.html

W3C's draft for "Frame-based layout via Style Sheets