La langage HTML

Bien des livres et des sites de référence, vous parlerons mieux que moi des prompts et de la syntaxe du langage HTML.
Mon but est d'apporter quelques trucs pour agrémenter simplement vos pages.

Nous voulons toujours plus, plus d'images, plus d'effets spéciaux, mais il ne faut pas oublier les utilisateurs qui ont des petites machines, des portables, des GSM et surtout les non voyants qui utilisent un termial braille pour visiter vos belles pages.

Cette course effrénée fait le jeux des éditeurs, des disributeurs de logiciel et des constructeurs de machines et mémoires. Apprenons à rester simple dans nos présentations, les visiteurs y gagnerons dans leur temps de chargement et un maximum de machines pourront consulter vos sites.

Ceci dit, rien ne vous empêche d'avoir de l'originalité et d'utiliser des artifices pour étonner vos visiteurs.

Index

Remarques
Structure de base
Chargement automatique
 Ce déplacer dans une page
Boutons d'info
Boutons de navigation
 Curseur
Fin du document

Remarques

Lorsque nous surfons sur le Web, on trouve souvent des pages qui sont trop chargées. Trop de couleurs, trop de texte par page et beaucoups d'images trop longues à charger.

Il faut apprendre à rester sobre pour que l'impression première reste légère et que la page reste lisible. Il faut penser aux malvoyants, aux machines lentes, les stations portables et autres machines de poche raccordées à un téléphone portable.

Evitez les images de fond qui rendent illisiblent vos textes.

Utilisez seulement des images compressées aux formats .GIF ou .JPG

Ne mettez pas trop d'animations sur une seule page.

Utilisez plusieurs browsers pour tester vos pages, vous serez surpris des différences. Noubliez pas le fameux Lynx en mode texte toujours très utilisé.

Haut de la page

Structure de base de la page HTML 

<HTML> // type de document

<HEAD> // entête et définitions
	<TITLE>Mon document</TITLE> // titre
	. . . .
	. . . . // définitions
</HEAD>

<BODY>
	. . . .
	corps de la page affichée
	. . . .
	. . . .
</BODY>
</HTML>
Le document HTML se compose de trois parties.

  • L'ensemble du document de type HTML.

  • Une entête HEAD avec ses définitions.

  • Un corps BODY du document avec le contenu de votre présentation.
Dans la partie <HEAD> se trouve les balises <TITLE>Mon document</TITLE> Le 'Mon document' est le titre qui va apparaître dans la barre de titre de la fenêtre de votre navigateur.
Haut de la page

Chargement automatique 

<HEAD>
. . . .
<META http-equiv=refresh content="3; url=art.htm">
. . . .
. . . .
. . . .
</HEAD>
Voici comment introduire simplement un démarrage automatique sur une page HTML.

Dans la partie HEAD introduisez le texte du listing ci-contre.
Le nombre indique les secondes

Exemples:

Une page de bienvenue affichée x secondes avant votre home page.

Vos pages ont changé d'emplacement, départ après x secondes sur le nouvel URL.

Raffraichissement de votre page qui affiche une image saisie par votre caméra.

Haut de la page

Déplacement dans une page 

<BODY>
<A NAME="debut"></A>
. . . .
. . . .
Retour au <A HREF="#debut">début</A>
. . . .
. . . .
. . . .
Autre page <A HREF="suite#milieu">milieu</A>
. . . .
. . . .
</BODY>
Pour se déplacer dans une page, il suffit de donner un lien sur un emplacement de la page courante. Il faut pour celà mettre une balise avec un nom; par exemple au début de votre page, comme dans l'exemple de gauche.

Vous pouvez aussi pointer sur une autre page, mais dans son chapitre "milieu". Vous préciserez alors dans votre link, le nom de la page(suite) et son point de connection(milieu).

En pratiquant ainsi, le lecteur, peut sauter dans le texte, sans tout faire défiler.

Vous pouvez sauter au début de cette page avec le mot en hypertexte ou avec une image (la flèche jaune à droite).

Haut de la page

Un message d'info avec un bouton 


<FORM>
<INPUT type="button" name="bout1" value=" Information "
onClick="alert('\nBonjour\nVive le langage HTML')">
</FORM>
Dans le corps de votre page vous pouvez simplement ajouter un ou plusieurs boutons pour donner des informations complémentaires sur le sujet traité.
Remarque : le \n donne un saut de ligne dans le texte.

Les boutons sont souvent utilisés dans les formulaires.

Haut de la page

Boutons de commande 


<FORM>
  <INPUT type="button"
            name="b1"
            value=" Haut de page "
            onClick = location="#html">
  <INPUT type="button"
            name="b2"
            value=" Bas de page  "
            onClick = location="#bas">
  <INPUT type="button"
            name="b3"
            value=" Home page "
            onClick = location="homepage.htm">
</FORM>


//-->
</SCRIPT>
Il est parfois intéressant de mettre des boutons pour la navigation. Ils seront placés en bas de pages ou sur le côté. Ceux-ci sont très faciles à réaliser en langage HTML.
Haut de la page

Curseur 


<B style="cursor:help">MON TEXTE SENSIBLE<B>

<B style="cursor:move">MON TEXTE SENSIBLE<B>
Vous pouvez changer la forme de votre curseur selon sa position, passez votre souris sur les textes ci-dessous.

MON TEXTE SENSIBLE 1

MON TEXTE SENSIBLE 2

Vous pouvez utiliser aussi pour le curseur, les mots suivants: crosshair, hand, move, text, pointer, resize, wait.
Bien entendu, ceci pour une utilisation sous Windows. Cela limite donc cet artifice à une utilisation sur vos fichiers Intranet.

Ne fonctionne bien que sur IE.

Haut de la page

[Home Page][Programmation]

Jean-Pierre Perroud
Switzerland
Dernière mise à jour le 15 11 2007