Fonctions avancées

Dans cette page nous suvolerons des fonctions qui sont détaillées plus avant aillieur dans le Site, vous povez vous reporter à la page de garde.

Les images animées.
Les images cliquables ou mapées
Les détails de la balise <HEAD>
Les formulaires
Les Javascripts
Les applets Java

 

Les images animées qui agrémentent les pages Web sont des images GIF, composées un peu comme les dessins animés, par des logiciels conçus à cet effet.

Des Gifs animées sont disponibles sur le Web. Vous pouvez aussi en créer vous-même assez facilement grâce à de petits programmes comme Microsoft Gif Animator, Gif Construction Set, Cel Assembler ou Animation Shop de Paint Shop PRO.

A utiliser avec modération. Cela fatigue les yeux !

 

Les images cliquables sont divisées en zones sur lesquelles il est possible de cliquer et d'ouvrir ainsi une page située à une adresse (URL) déterminée. On apppelle aussi cette propriété l'hypergraphique par rapport à l'hypertexte.

Ici aussi de petits logiciels comme Mapedit, Map This, CrossEye, Web Hotspots... vous seront d'une grande utilité.

Les balises seront :

- pour l'image :

<IMG SRC="image.gif" USEMAP="#nom">

- pour les zones cliquables :

<MAP NAME="nom">

<AREA SHAPE=RECT COORDS="X1,Y1,X2,Y2" HREF="URL">

...

</MAP>

Image MAP

Sans pour l'instant entrer dans les détails. voici une image où en cliquant sur la lettre B, le fichier B.htm sera ouvert et en cliquant sur la lettre C, ce sera au tour du fichier C.htm.

Image MAP

Le code source est :

<BODY>

<IMG SRC="ABC.gif" USEMAP="#Alpha">

<MAP NAME="Alpha">

<AREA SHAPE=RECT COORDS="40,10,60,40" HREF="B.htm">

<AREA SHAPE=RECT COORDS="70,10,95,45" HREF="C.htm>

</MAP>

</BODY>

 

Nous avons été très bref lors de l'étude de la balise <HEAD>. En plus de l'élément <TITTLE>(titre), l'en-tête de votre page contient bien d'autres informations importantes qui intéressent le navigateur.

Le tag META sera particulièrement utile pour faire reconnaître votre page par les robots de recherche du genre AltaVista.

<META NAME="description" CONTENT="description de votre page">

Cette balise indique au robot de recherche que le contenu de CONTENT est la description de votre page Html, contenu qu'il pourra afficher comme résultat d'une recherche d'un utilisateur.

<META NAME="keywords" CONTENT="mot-clé, mot-clé, mot-clé, ...">

Cette balise indique au robot de recherche que le contenu de CONTENT est une série de mots-clés qui définira plus finement votre page. Il peut être utile de prévoir quelques mots-clés en anglais si vos pages sont en français.

<META NAME="HTTP-EQUIV="refresh" CONTENT="x; URL="adresse">

Ce tag qui fait plutôt partie des trucs et astuces de Html, appellera automatiquement une autre page (située à l'URL indiquée) après un délai de x secondes. Utilisé par exemple dans un frame, le rafraîchissement de la page permettra d'afficher à intervalle régulier différentes informations (publicitaires ou autres). Effet sans l'air assuré.

Il existe encore d'autres balises d'en-tête que vous découvrirez au fil de votre utilisation du langage Html.

Avec les formulaires, le langage Html vous ouvre la porte de l'interactivité. Votre interlocuteur pourra remplir un champ de saisie de texte ou d'autres objets interactifs comme des cases à cocher. Ces données seront transmises au serveur, par exemple à votre adresse électronique (Mail).

Les formulaires peuvent prendre la forme

- d'une ligne de texte

- d'une fenêtre de texte

- de boutons radio

- de cases à cocher

- d'un menu déroulant

A la suite du ou des formulaires, il y aura un bouton dont la fonction sera d'envoyer les messages (par exemple à votre adresse électronique).

factice factice

 

Jusqu'à présent, nous n'avons que publié des pages sur le Web. Avec Javascript et Java, nous allons découvrir les éléments pour programmer sur le Web. Javascript est un ensemble de codes (scripts) directement incorporés dans Html, qui permet de faire réaliser au browser certaines fonctions déterminées. Pour autant que le navigateur le permette bien entendu pas de problème avec les dernières versions 3,4 et 5

A titre d'exemple, on peut aisément faire apparaître avec Javascript un petit message du genre "Attention!" lorsque l'utilisateur clique sur un bouton.

 

Le code est assez simple :

<HTML>

<HEAD>

<SCRIPT language="JavaScript">

<--! Hiding

function hello() {

alert("Attention!");

}

// -->

</SCRIPT>

</HEAD>

<BODY>

...<input type=button name="" value=" Pour le test " onClick="hello()">...

</BODY>

</HTML>

On peut aussi réaliser en Javascript des choses plus complexes sans un long apprentissage (et sans compilateur). De façon très schématique Javascript serait une version étendue de Html ou une version simplifiée de Java.

Vous trouverez sur le Web des petites applications que vous pouvez modifier légèrement (en changeant le texte par exemple) pour les inclure dans vos pages.

 

Java est quant à lui un langage de programmation à part entière développé par Sun Microsystems. Il est nettement plus lourd et compliqué que Javascript mais également beaucoup plus puissant. Ce qui ouvre des perpectives immenses à l'évolution future des pages Html.

Java est donc un langage orienté objet (proche de C++) qui permet de compiler des programmes exécutables mais aussi de petites applications, indépendantes de toute plate-forme, appelées des applets. Ces applets, pourvu que le navigateur sache les interpréter, sont exécutées en local sur la machine affichant le document.

Si vous ne vous sentez pas une âme de programmeur. Cela ne vous empêchera pas d'utiliser des applets Java. Vous en trouverez sur le Net, avec leurs sources et paramètres. Il suffit de lancer une recherche avec comme critère "Java Applet".

Attention Javascipt et Java peuvent faire planter le système de votre lecteur!

Cette intégration des applets est réalisée par le tag <APPLET>...</APPLET>

Voici un exemple d'application (graphique) Java

J'aimerais ajouter que les applets Java (mais c'est une appréciation toute personnelle) sont assez lentes et ralentissent fortement le site.

 

Réalisez votre Site

 

Fichier C Fichier B