Tutorial HTML (suite)

 

Les tailles:

Les tailles que vous spécifiez, si elles sont sans unité, sont en pixels. Par exemple, width="60". On peut aussi mettre une unité, par exemple: width="12cm" (guère employé), ou un pourcentage de la largeur de la fenêtre: width="100%", ou aussi une taille de ligne (en hauteur), employé seulement dans les styles; exemple: "margin-top: 3em".

Lorsque vous insérez une image (avec IMG), il vaut mieux prendre pour habitude de toujours spécifier sa taille (en pixels), ce qui a pour effet de réserver la taille avant que l'image soit finie de charger (plus esthétique, sinon on voit le reste se décaler). Pour cela, consulter l'image sous un logiciel de dessin ou de visualisation d'image. Exemple:
<IMG SRC="cathedr.jpg" ALT="Cathédrale de Milan" WIDTH="132" HEIGTH="78">
On peut bien sûr mettre d'autres tailles que celles de l'image ce qui aura pour effet de la zoomer/réduire. Toutefois ce n'est parfois pas très esthétique; on préfère la réduire sous un logiciel de dessin, d'autant plus que ça réduira la taille du fichier image, donc le délai de chargement.

 

Caractères spéciaux:

Certaines séquences de caractères équivalent à des caractères spéciaux. Par exemple:
&nbsp;espace insécable
&lt;<
&gt;>
&quot;"
&amp;&
&eacute;é
&Eacute;É
&Egrave;È
&Ecirc;Ê
&Ccedil;Ç
&ntilde;ñ
&aelig;æ
&aring;å
&oslash;ø
&copy;©
&euro;
&deg;°
&frac12;½
&plusmn;±
&sup3;³
&raquo;»
&szlig;ß
Pour voir toutes les entités définies dans HTML, cliquer ici.

&#nnn; caractère de code numéro nnn, par exemple:
&#338;Œ
&#339;œ
&#169;©
&#230;æ
&#1602;ق
&#137;
&#153;
&#133;
Pour voir tous les codes nnn possibles, cliquer ici.

L'espace insécable est souvent utilisé. Exemple:
Louis&nbsp;XIV
Mettez 3&nbsp;kg
<P>&nbsp;</P> ligne blanche pour espacer

 

Dimensionner les tableaux:

Lorsque vous faites un tableau, certains navigateurs ne font pas correspondre sa largeur à celle de toute la page. De même, vous voudriez parfois qu'une colonne occupe plus de la largeur de l'image que vous y mettez, etc... Voici comment faire.
<TABLE width="100%"> (tableau: force à occuper toute la largeur)
  <TD width=160 align="left"> (1ère colonne)
  <IMG SRC="images/hagia2.jpg" WIDTH=149 HEIGHT=137> (notre image)
  </TD> (fin de la 1ère colonne)
  <TD> (2ème colonne: elle occupera le reste)
  <P>La cathédrale fut construite...</P> (texte)
  </TD> (fin de la 2ème colonne)
</TABLE> (fin du tableau)
Le fait d'avoir dimensionné la 1ère colonne légèrement plus large que l'image (qui sera cadrée à gauche) assurera un espace entre l'image et le texte (ici: de 11 pixels).

La cathédrale Sainte-Sophie fut construite par l'empereur romain d'orient Justinien en 532, afin de calmer les esprits suite à la sédition Nikka. La cathédrale, achevée en 537, est judicieusement située à côté de l'hippodrome, d'où a démarré cette guerre civile. Justinien a aussi fait de grands travaux législatifs: le code justinien (à partir des lois écrites par Théodose), que de nombreux pays reprendront, dont la France.

Pour avoir des espaces dans les tableaux, il y a d'autres solutions :
  <TD width=10> (réserve une colonne de 10 pixels de large)
  &nbsp; (un blanc, car il faut mettre quelque chose pour que la colonne (vide) se fasse)
  </TD> (fin de colonne)
ou bien:
<TABLE cellspacing=10>

Dans un tableau, pour aligner le haut d'un paragraphe avec le haut d'une photo, on mettra pour la colonne à aligner:
  <TD valign="top">
ou aligner en bas:
  <TD valign="bottom">
ou aligner à droite:
  <TD align="right">
ou centrer le contenu:
  <TD align="center">
Voir l'aide sur TABLE et TD pour plus de possiblités (cadres, couleurs...)

Lorsqu'un tableau comporte une ligne regroupant plusieurs lignes ou une colonne regroupant plusieurs colonnes, on emploie l'attribut ROWSPAN ou COLSPAN dans la commande TD. Exemples:

<TABLE border>
<TR>
  <TD rowspan="2">Embrasse 2 lignes</TD>
  <TD>Première</TD>
  <TD>ligne</TD>
</TR>
<TR>
  <TD>Deuxième</TD>
  <TD>ligne</TD>
</TR>
</TABLE>
Embrasse 2 lignes Première ligne
Deuxième ligne
<TABLE border>
<TR>
  <TD colspan="2">Embrasse 2 colonnes</TD>
</TR>
<TR>
  <TD>Première</TD>
  <TD>Deuxième</TD>
</TR>
<TR>
  <TD>col.</TD>
  <TD>col.</TD>
</TR>
</TABLE>
Embrasse 2 colonnes
Première Deuxième
col. col.

On peut aussi bien sûr imbriquer des tableaux...

 

Autres commandes:

La balise <U> sert à souligner.
La balise <CENTER> sert à centrer un objet (paragraphe, image...)
La balise <MARQUEE> sert à faire un texte déroulant sur le côté; exemples:
Coucou !
F
La balise <BLOCKQUOTE> sert à faire un paragraphe en retrait (citation)
La balise <SUP> sert à mettre en exposant (ex: 2ème)
La balise <SUB> sert à mettre en indice (ex: X0)
L'attribut bgproperties="fixed" dans BODY sert à mettre l'image de fond en fixe (au lieu de se dérouler avec le texte).
La balise <KBD> sert à afficher un texte en police fixe (idem: <TT>)
Les balises <SMALL> et <BIG> affichent le texte en petit ou grand.
La balise <DL> sert à indenter un bloc de texte.

La balise <!-- sert à introduire un commentaire (fermé par -->). On en profite pour y mettre du langage non-HTML comme des enrichissements JavaScript ou CSS (style) par exemple.

La balise <PRE> sert à introduire un texte Ascii pur et dur dont on respectera tous les sauts de ligne (sans avoir à introduire des <P> ou <BR>. Aucune mise en forme ne sera faite et ça s'affichera en police fixe.

La balise <BGSOUND> (dans l'en-tête <HEAD>) sert à mettre un son dans la page. Il ne sera exécuté qu'1 fois lors du chargement, sauf si on met l'attribut "loop=nnn". Comme pour un motif graphique (fond d'écran), on peut avoir un tout petit son et le répéter à l'infini. Par exemple:
<BGSOUND src="sons/bird.wav" loop="infinite">

La balise <EMBED> sert à insérer un objet quelconque: un son (sous Firefox/Netscape, car BGSOUND n'est reconnu que par Internet Explorer), une animation Flash, un clip vidéo, etc... Cette balise appelle le plug-in concerné, c'est-à-dire l'application chargée de "jouer" l'objet. Exemple:
<EMBED src="images/anim.swf" align="left">
<NOEMBED>
Animation en Flash; veuillez télécharger le plug-in proposé.
</NOEMBED>
En fait, tout ça va être normalisé, et on emploiera les balises <OBJECT> ou <APPLET> pour insérer un objet quelconque.

Utiliser la balise EMBED plutôt que BGSOUND pour un son peut être aussi utile dans le cas suivant: voir apparaître une barre de volume et surtout un bouton d'arrêt lorsqu'on donne une dimension (s'emploie comme pour une image). Exemple:
<EMBED width="200" height="20" src="sons/sardane.mid" align="right">
Cette commande accepte en plus les attributs autostart="false" et hidden="true", bien pratiques...
Voici quelques essais avec les commandes OBJECT et EMBED. C'est plutôt délicat...

Les commandes DEL et INS servent à biffer modifier un texte.

 

Les listes:

Pour faire des listes à puces ou numérotées, on utilise UL ou OL, et LI.
<UL> (début d'une liste à puces)
  <LI>1ère rubrique</LI> (rubriques...)
  <LI>2ème rubrique</LI>
  <LI>3ème rubrique</LI>
</UL> (fin de la liste à puces)
  • 1ère rubrique
  • 2ème rubrique
  • 3ème rubrique
Pour une liste numérotée, il suffit d'employer OL au lieu de UL.
On peut bien sûr modifier les puces ou les numéros avec des attributs, et imbriquer les listes.

 

Les styles:

Les "recommandations" veulent que dorénavant, on tende à distinguer dans les pages HTML le fond de la forme. On regroupera tout ce qui est forme dans des feuilles de style, communes à toutes les pages d'un même site. Ceci évite donc des répétitions entre ces pages. Les styles sont dans un langage autre que le HTML: le langage CSS.

En savoir plus...

 

Les frames:

Parfois, l'écran est partagé en 2 moitiés, qu'on peut dérouler de façon indépendante. Ce sont des "frames" (cadres ou panneaux en français). Par exemple, on met un menu dans la moitié gauche, ou dans la moitié du haut, et le contenu de la rubrique sélectionnée (page HTML) s'affiche dans l'autre moitié.

Pour cela il faut faire (au moins) 3 fichiers HTML:

C'est la page principale (FRAMESET) qui dessine les moitiés et y charge les fichiers. Regardez tranquillement ces exemples sous éditeur, et observez leur interaction.

Vous voyez qu'un clic dans le frame gauche affiche la page dans le frame droit. C'est le but de l'attribut TARGET, après avoir nommé le frame, ce qui est fait dans la page principale (ici recettef.htm). Exemple:
<FRAMESET cols="25%, 75%">
<frame src="recettes.htm">
<frame src="rec00.htm" name="main">
</FRAMESET>

Dans le petit fichier, table des matières, destiné à s'afficher à gauche (recettes.htm), on crée les liens ainsi:
<A HREF="rec05.htm" target="main">

Vous voyez que dans le frame de gauche, on est obligé de mettre à chaque lien "target=main". Pour s'éviter cela, on peut factoriser avec l'instruction suivante en mettant avant les liens concernés:
<BASE target="main">

Il faut aussi pourvoir sortir du FRAMESET. Par exemple, si vous faites (dans un des frames) un bouton "retour" qui affiche une page totalement différente, il ne faut pas que cette page s'affiche dans le frame courant (droite ou gauche) mais détruise le FRAMESET. Pour cela, on écrit dans le lien <A HREF="..." target="_parent">

Remarques:

 

Ouvrir un lien dans une autre fenêtre

Que ce soit une image ou une page HTML, si on veut l'ouvrir dans une autre fenêtre lorsqu'on clique dessus, il suffit de mettre target="_blank" dans la balise A. Exemples:

Voir le <A href="http://www.ign.fr" target="_blank">site</A>
Carte de France <A href="images/carte.jpg" target="_blank"><IMG src="images/icone.jpg"></A>

 

Mapper une image:

Par défaut, un lien se déclenche sur une zone rectangulaire; typiquement le contour de l'image si celle-ci est un lien. On veut parfois faire des zones de liens circulaires, ou quelconques, selon une zone de l'image. Dans ce cas, on se sert des commandes MAP et AREA. Il faut faire suivre une liste de coordonnées écran qui décrivent le contour de cette zone. C'est assez dur à faire, et c'est un des rares cas où on a vraiment besoin d'un logiciel de création de pages Web, par exemple Adobe PageMill. Exemple:
<MAP NAME="nom">
<AREA SHAPE="poly" COORDS="x,y,..." HREF="toto.htm">
</MAP>
L'on peut aussi par exemple faire une barre d'outils, avec une seule image et différentes zones rectangulaires appelant les différents liens. Exemple:
<MAP NAME="barre">
<AREA SHAPE="RECT" COORDS="1,1,110,50" HREF="html.htm">
<AREA SHAPE="RECT" COORDS="111,20,250,78" HREF="html2.htm">
<AREA SHAPE="RECT" COORDS="251,1,448,50" HREF="javascri.htm">
<AREA SHAPE="RECT" COORDS="320,45,390,78" HREF="xml.htm" ALT="Notions XML">
</MAP>
<IMG SRC="images/toolbar.gif" USEMAP="#barre" border=0 width=450 height=80>
Ce qui donne:
Tutorial HTML Tutorial HTML (suite) Essais Javascript Notions XML
C'est une image horizontale 450x80 pixels dans laquelle on a dessiné 4 rectangles actifs (on peut bien sûr la chiader plus que je l'ai fait...). Promenez la souris dessus et observez la ligne d'état en bas. Cliquez...

On peut aussi dessiner des zones plus compliquées que des rectangles, comme des cercles (SHAPE="CIRCLE"), ou des formes quelconques (SHAPE="POLY"). Ces dernières sont définies avec une suite de coordonnées. Dans ce cas, on peut avantageusement utiliser un éditeur HTML comme Adobe PageMill ou FrontPage, ou DreamWeaver etc... qui offrent un crayon pour définir ces formes (plutôt que de tâtonner pour estimer ces coordonnées, quoique ce soit faisable car la forme apparaît en tiretés). On peut aussi s'aider d'un logiciel de dessin comme Paint qui affiche les coordonnées du crayon, ou d'Adobe Photoshop.
Exemple:
<IMG SRC="images/ignlogo.gif" USEMAP="#contour" border=0 width=178 height=177>
<MAP NAME="contour">
<AREA SHAPE="POLY"
COORDS="18,0,18,72,0,80,0,103,30,134,116,175,175,62,129,25,105,32,105,0"
HREF="ign.htm">
</MAP>
Ce qui donne:

Note pour Photoshop: très pratique: on crée un calque de l'image détourée, puis on passe sous ImageReady, et là on crée une carte-image à partir du calque (menu Calque). Puis dans l'onglet "carte-image", on sélectionne Polygone, puis la finesse (ex: 80%). On remplit éventuellement les champs HREF et ALT, puis on enregistre une copie optimisée de tout ça (crée l'image GIF et le code HTML avec les précieuses coordonnées du contour). Voir autre exemple avec zones cliquables.

 

Formulaires:

Une page HTML peut contenir un formulaire, c'est-à-dire des zones où l'utilisateur peut entrer du texte au clavier, son numéro de carte bleue, cocher des options, cliquer des boutons, dérouler et choisir dans une liste, ce qui rend la page interactive, comme par exemple pour un sondage, une inscription, un achat ou une recherche. Ensuite l'utilisateur clique sur un bouton Envoyer pour envoyer effectivement ces informations à un serveur, ou par mail.

Un serveur est un programme (souvent appelé cgi.bin) qui traite les informations qu'il reçoit (et envoie éventuellement une réponse). La rédaction d'un tel programme est assez complexe. Restons plutôt côté client avec les formulaires.

La commande INPUT saisit du texte et le stocke dans une variable (ici: "ville"):
<INPUT name="ville" size="20">
Cette commande accepte aussi d'autres types que du texte: boutons radio, cases à cocher, mot de passe, boutons. Exemple pour mot de passe:
<INPUT type="password" name="motPasse" size="8">

La commande TEXTAREA permet de saisir toute une zone de texte:
<TEXTAREA NAME="address" ROWS=4 COLS=30>
IGN
2, avenue Pasteur
94160 St-Mandé
</TEXTAREA>

Les commandes SELECT et OPTION permettent de sélectionner dans une liste déroulante:
<SELECT NAME="parfum">
<OPTION>Vanille
<OPTION>Fraise
<OPTION>Rhum raisin
<OPTION>Pêche et orange
</SELECT>

...ou dans une liste non déroulante:
<SELECT NAME="parfum" SIZE="4">
<OPTION>Vanille
<OPTION SELECTED>Fraise
<OPTION>Rhum raisin
<OPTION>Pêche et orange
</SELECT>
Remarque: on ajouterait l'attribut MULTIPLE à SELECT si on autorisait un choix multiple.

Il y a aussi les boutons "radio" et "cases à cocher" (testez la différence) -
remarques- :
<INPUT type="radio" name="marie" value="1" checked>Marié<br>
<INPUT type="radio" name="marie" value="0">Célibataire<br>
<INPUT type="checkbox" name="enf" value="1">Enfants<br>
<INPUT type="checkbox" name="anim" value="1">Animaux<br>
Marié
Célibataire
Enfants
Animaux

Le formulaire devra avoir au moins un bouton (INPUT ou BUTTON) avec l'attribut type="submit" afin de déclencher l'envoi; le BUTTON permet de mettre une image (attention, BUTTON n'est pas reconnu par les vieux navigateurs):
<INPUT type="submit" value="Envoyer">
<BUTTON type="submit">Envoyer</BUTTON>
<BUTTON type="submit">
<IMG src="images/btok.gif" alt="OK">
</BUTTON>

Enfin, les balises <FORM> et </FORM> englobent le formulaire. C'est dans la balise FORM qu'on spécifie où envoyer les informations: soit à un programme CGI (méthode GET), soit à une adresse email (méthode POST). On y définit bien sûr avec l'attribut ACTION où envoyer ces informations. Exemples:
<FORM action="http://xxx/cgi.bin" method="GET">
...
... tous les INPUT concernés par ce formulaire...
...
</FORM>
ou bien:
<FORM action="mailto:toto.untel@adresse.fr?subject=sondage" method="POST" ENCTYPE="text/plain">
...
</FORM>
Dans le 1er cas, il vous faudra écrire un programme CGI, dans le 2ème il vous faudra assumer toutes les arrivées de emails à chaque fois qu'un utilisateur cliquera sur le bouton "submit".
On peut aussi traiter un formulaire avec du JavaScript (et construire ainsi une page Web interactive).

La méthode GET envoie les paramètres à la queue-leu-leu au bout de l'URL mentionnée en action. Ainsi, lorsqu'on fait SUBMIT, apparaît par exemple dans la ligne d'état:
http://monsite/mapage.htm?parfum=Vanille&nom=Eric&marie=1&motPasse=hector
Par défaut, <FORM> tout seul utilise l'URL de la page courante comme action et GET comme méthode. L'URL (que ce soit une page HTML ou un programme) doit donc analyser cette ligne de paramètres et les traiter.


On peut aussi habiller un lien avec un bouton, en utilisant un formulaire minuscule:
<FORM ACTION="html.htm" METHOD=GET>
<INPUT TYPE="submit" VALUE="Tutorial HTML">
</FORM>

On utilise aussi les boutons simples (de type "button"), par exemple pour déclencher une action Javascript:
<FORM>
<INPUT type="button" value="Voir source"
onclick="window.location='view-source:'+window.location.href">
</FORM>

Plus complexe: comment récupérer l'information choisie dans un formulaire (menu) pour ouvrir une nouvelle page:
<FORM name="ff"
onclick='window.location.href=
document.ff.ll.options[document.ff.ll.selectedIndex].value'>
<SELECT NAME="ll" size="6">
  <OPTION value="html.htm"> page sur HTML
  <OPTION value="html2.htm"> page sur HTML (2)
  <OPTION value="javascri.htm"> Javascript
  <OPTION value="style.htm"> styles CSS1
  <OPTION value="xml.htm"> page sur XML
  <OPTION value="embed.htm"> inclusions d'objets
</SELECT>
</FORM>

Explication: chaque option a une valeur qui est la page à lancer. On donne à la fois un nom au formulaire (ff) et à la liste (ll) pour pouvoir accéder au contenu de celle-ci, et récupérer l'élément choisi. Ce dernier est:
document.ff.ll.options[document.ff.ll.selectedIndex].value
options[] est le tableau des options de la liste ll qui fait partie du formulaire ff qui fait partie du document courant.
selectedIndex (de cette même liste) vaut le numéro de la rubrique sélectionnée (0=premier).
.value permet d'accéder à la valeur de l'option sélectionnée.
Dans un gestionnaire onClick(), on modifie l'URL du document de la fenêtre en celui sélectionné. Cette méthode court-circuite le fonctionnement GET/SUBMIT/ACTION du formulaire.
Voir Javascript sur plus d'explications sur ces gestionnaires et ces objets imbriqués.

 

Problèmes d'accents:

Normalement, il n'y a pas de problèmes avec les caractères accentués. Lorsque vous tapez un é sous éditeur Windows, il apparaîtra bien, même sous Mac, Internet Explorer ou Netscape, car c'est le jeu "ISO Latin 1" (codé ISO-8859-1, et commun à toute l'Europe).

Il existe cependant 2 solutions si vous craignez que vos caractères accentués n'apparaissent pas bien:

Remarque: si par exemple vous voulez voir s'afficher correctement un vieux texte tapé sous MS-DOS, et si vous ne voulez pas changer tous les caractères accentués, vous pouvez le faire en ajoutant une en-tête avec une ligne META qui utilise comme charset 437 ou IBM437 (ou 850 ce qui revient à peu près au même), ou de même mac pour un texte accentué MacIntosh. Insérez par exemple ces quelques lignes au début (ça marche avec IE mais pas Mozilla):

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=IBM437">
<TITLE>Mon joli texte sorti du grenier</TITLE>
</HEAD>
<body bgcolor=#DDDDDD>
<pre>

De même, si vous voulez voir correctement un texte accentué tapé sous Mac, il faut mettre dans l'en-tête:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=macintosh">

Vous pouvez voir les noms de tous les jeux de caractères officiels ici.
(lien externe: cette adresse ou à celle-là).

La chaîne entre guillemets après l'attribut CONTENT= s'appelle un code MIME. C'est le moyen de décrire le codage d'un fichier, texte, image, HTML, son, etc... fait initialement pour le mail.
(lien externe: cette adresse).

L'autre solution si vous avez un texte accentué DOS est de l'encadrer par:
<FONT face="MS LineDraw"> et </FONT>
à supposer que vous ayez la police MS LineDraw sur votre ordinateur (une des rares à suivre le codage IBM-PC 437), l'autre inconvénient étant que vous n'avez pas le choix de la police.

 

Des formats graphiques:

Comme on l'a vu à la page précédente, les images doivent avoir un format graphique reconnu par le navigateur, par exemple JPEG, GIF, ou le récent format PNG.

Ces formats, contrairement au TIFF ou au BMP, sont des formats avec compression irréversible, c'est-à-dire avec une légère perte d'information, peu visible à l'œil, mais conséquente sur la taille du fichier.

Typiquement, le format JPEG autorise une fidélité allant de 1 à 100%, paramétrable lors de la confection du fichier. La compression procède par association plus ou moins marquée de couleurs proches entre pixels voisins. Aussi un fichier JPEG avec un taux de fidélité inférieur à 50% fera apparaître des effets de dégradés souvent visibles (par exemple sur un ciel bleu), ou de "vaguelettes" autour des objets (ce qui rend encore plus flou un objet fin). Personnellement, j'utilise du JPEG à 80% pour stocker mes photos (quasiment aucune perte, afin de pouvoir les travailler), et pour le Web 60% semble un bon compromis.

JPEG 1%
JPEG 5%
JPEG 10%
JPEG 20%
JPEG 50%
JPEG 80%
Sacrada Familia, Espagne

Le format GIF (plus spécialement GIF89a) permet d'enregistrer une couleur de fond, dite de "transparence". Par exemple l'image suivante, normalement rectangulaire, mais où l'on voit bien le contour de l'écusson. Ici, la couleur de transparence est définie au blanc; on choisit simplement une couleur qui n'apparaisse pas dans l'image proprement dite. Les pixels "transparents" doivent avoir pile cette couleur.

images/oc.gif

Le format GIF offre aussi une compression plus performante et un meilleur rendu que le JPG pour des couleurs constantes et tranchées, par exemple des images artificielles (qui ont un petit nombre de couleurs); ex: logo, drapeau, rubriques de menu, etc... Le format GIF permet aussi de faire des animations.
pc.gif

Mais n'oubliez pas que pour un site Web, ce sont les images et leur rapidité de chargement, c'est-à-dire leur petite taille, qui rendent une page attractive. Pensez à tous ceux qui sont connectés par un modem externe et n'ont pas forcément ADSL. Exemple: liaison modem 56K = 56000 bits/s = 7 Ko/s. Une image de 100 Ko (grosse donc) sera chargée en 14 secondes; l'utilisateur impatient et/ou volage est à la limite de passer à tout autre chose... Réciproquement, une imagette de 7 Ko sera chargée en 1 seconde seulement. Il faut donc constamment faire un compromis entre la perfection et la performance.

 

Je voudrais un compteur:

C'est bien pratique, une fois que votre site est livré au public, d'avoir un compteur sur votre page indiquant le nombre de visiteurs. Pour cela, prévoyez par exemple de le mettre en bas de la page principale (index.htm). Inscrivez-vous à un site qui gère les compteurs, par exemple www.compteur.com (c'est gratuit). Choisissez votre style de compteur et sa dimension. Faites-y référence dans votre page ainsi (en mettant dans l'ID votre numéro d'inscription et dans num le numéro de votre compteur):
<SCRIPT SRC="http://www.compteur.com/cpt?ID=xxxxxx&num=1"></SCRIPT>
Il s'affichera puis s'incrémentera dès que vous chargez la page.

 

Une icône dans le marque-page:

Beaucoup de pages Web ont une petite icône indiquée dans la barre d'adresse, la barre personnelle, le marque-page (favoris) ou l'onglet. Pour cela, faites une image 16x16 pixels, sauvez-la par exemple au format PNG, et mettez dans l'en-tête de votre page (entre les lignes <HEAD> et </HEAD>) l'instrution suivante:

<link rel="shortcut icon" type="image/png" href="toto.png">

 

Faire de votre page HTML une application:

Quand on ouvre normalement une page HTML, on lance ce qui s'appelle un navigateur, c'est-à-dire une certaine application, qui est Internet Explorer, ou Netscape (ou autre moins connu), dans laquelle votre page est chargée en tant que donnée.

Grâce à Windows (merci Bill ), votre page HTML peut devenir elle-même une application, sans pour cela démarrer une application tierce, c'est-à-dire que votre fichier HTML peut directement être exécuté par Windows.

Pour cela, il suffit de lui donner l'extension ".hta" au lieu de ".htm". Faites l'essai...

Un fichier texte étant un fichier HTML particulier, on peut très bien aussi renommer un ".txt" en ".hta".

En fait, "HTA" signifie "HTML Application". Il est documenté dans le site Microsoft, rubrique HTA. On peut personnaliser le "look" de la fenêtre avec la balise HTA:APPLICATION dans l'en-tête du HTML. Examinez cet exemple: remarques sur les boutons radio, un peu plus haut.

Remarque, cet exemple peut vous faire peur, c'est normal: il faut se méfier de tout exécutable de provenance inconnue. Enregistrez-le sur votre disque et regardez-le tranquillement sous éditeur. Vous verrez qu'il est inoffensif (car pur HTML, pas bien méchant...), et pourrez alors l'exécuter en toute confiance. Si vous exécutez la copie (en double-cliquant dessus), éditez-le avant et préfixez le nom de l'icône et du papier peint avec l'adresse absolue de mon site (ex: background="http://perso.libertysurf.fr/eric.hurtebis/images/fondpap.jpg")

 

Des questions ou commentaires ?

N'hésitez pas:


Retour


Mise à jour: