The Web Design Group

FAQ de la création HTML : Effets de présentation


Cette liste des questions les plus fréquemment posées est tenue à jour par WDG et a été mise à jour pour la dernière fois le 15 Juillet 2000. (La présente traduction date de Janvier 2001). Elle peut être trouvée aux adresses suivantes :

La traduction en hollandais de ce document est disponible également :

La présente traduction française se trouve sur :

Si vous souhaitez contribuer à cette FAQ, merci d'envoyer un message à <darin@htmlhelp.com>. Toutes les personnes qui ont participé à cette FAQ sont listées à la fin.

N'hésitez pas à contacter le traducteur pour signaler une imprécision, une erreur de traduction, une faute de français que vous pourrez trouver dans ce document : <cedrik.rousseau@insa-rouen.fr>

Index

6. Effets de présentations

  1. Comment créer une barre de séparation de paragraphe personalisée?
  2. Comment personnaliser les points décoratifs d'une liste à puces?
  3. Comment mettre en place un compteur de passage?
  4. Comment inclure la date et l'heure courante dans une page Web?
  5. Comment faire défiler du texte dans la barre d'information?
  6. Comment aligner à droite du texte ou des images?
  7. Comment éliminer les espaces entre/autour de mes images?
  8. Comment indenter la première ligne de chaque paragraphe?
  9. Comment indenter tout un doucument ou un paragraphe?
  10. Comment éliminer les marges autour de la page?
  11. Comment implémenter un saut de page?
  12. Comment spécifier des polices de caractère dans une page Web?
  13. Comment spécifier des couleurs?
  14. Comment changer la couleur d'un bloc de texte?
  15. Comment définir des images d'arrière-plan?
  16. Comment obtenir une image de fond qui ne défile pas?
  17. Comment faire pour que l'image de fond ne se répète pas?
  18. Comment définir une icône personalisée pour les favoris?

Section 6: Effets de présentations

6.1. Comment créer une barre de séparation de paragraphe personalisée?

Pourquoi ne pas créer vous même une barre avec un outil de traitement d'image puis l'inclure simplement en tant qu'image :

<P ALIGN=center><IMG SRC="custom-line.gif" ALT="--------------------"></P>

(Avec un champ ALT en forme de barre, les visiteurs ne chargeant pas les images pourront néanmoins comprendre celle-ci)

Si vous voulez en savoir plus sur les barres horizontales et les CSS1 regardez sur <URL:http://ppewww.ph.gla.ac.uk/~flavell/www/hrstyle.html>.

6.2. Comment personnaliser les points décoratifs d'une liste à puces?

Il existe plusieurs méthodes, aucune n'étant complétement satisfaisante :

6.3. Comment mettre en place un compteur de passage?

Un compteur est un petit script qui augmente un nombre à chaque fois qu'on accède au document situé sur le serveur.

Avant d'installer un compteur sur votre page vous devez savoir que le décompte est très imprécis. En effet, il ne sera pas tenu compte des visites quand le document est dans la mémoire cache d'un proxy, ce qui arrive très souvent. Certains compteurs dépendent du chargement d'une image, ils ne pourront donc prendre en compte un visiteur en mode texte.

Tous les serveurs Web enregistrent les traces des accès aux documents stockés sur le serveur. Ces traces (logs) peuvent être traitées pour calculer le nombre d'accès -relatif- à un document sur une longue période. A vous de voir si vous souhaitez réellement donner cette information à vos visiteurs dans la mesure où ils ne seront peut-être pas capable de relativiser ce nombre. Malheuresement, tous les fournisseurs d'espace Web ne donnent pas accès aux traces du serveur... renseignez-vous !

Yahoo peut vous indiquer une liste importante de services de compteur :

http://dir.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Programming/Access_Counters/

Une discussion au sujet des limitations des statistiques sur le traffic Web se trouve sur : <URL:http://www.cranfield.ac.uk/docs/stats/>

6.4. Comment inclure la date et l'heure courante dans une page Web?

Avec des inclusions coté serveur. Renseignez vous sur la syntaxe des SSI de votre serveur. Notez que cela affichera l'heure locale du serveur, pas celle du client. De plus si la page est mise en mémoire cache sur un proxy, cette indication deviendra rapidement obsolète. Il est possible d'afficher l'heure locale du client à l'aide de JavaScript; mais honnêtement, à quoi bon? Il y a fort à parier pour que votre visiteur ait déjà un moyen de savoir l'heure qu'il est!

Si vous avez l'intention d'afficher l'heure qu'il est sur vos pages à l'aide d'un CGI, n'oubliez pas que cela prendra des ressources supplémentaires, ralentira la vitesse de chargement de la page et provoquera des problèmes lors de la mise en cache.

6.5. Comment faire défiler du texte dans la barre d'information.

Ceci n'est pas une question HTML; c'est réalisable en JavaScript. Le mieux est de trouver une page qui le fait déjà et de copier le code source.

Cependant beaucoup gens trouve qu'un texte défilant est encore pire qu'un texte clignotant, de plus cela supprime les informations que la barre est supposée afficher empêchant ainsi les gens de savoir où va un lien... Utiliser donc cette fonctionalité avec énormément de modération.

6.6. Comment aligner à droite du texte ou des images?

Vous pouvez utiliser l'attribut ALIGN=right sur des paragraphes, divisions et en-têtes juste comme vous utilisez ALIGN=center pour créer des paragraphes centrés ou autres. Ceci alignera votre texte à droite causant une marge gauche irrégulière.

Peut-être voulez vous en fait un texte justifié dans lequel les deux marges sont alignées et donc toutes les lignes de la même longueur.(Ceci est parfois appelé à tort "justifié à droite".) Cette présentation peut-être suggérée dans une feuille de style CSS1 avec text-align:justify, ou en HTML 4 avec l'attribut -déconseillé- align="justify". (Avant de faire ceci, un avertissement: bien que le texte justifié puisse faire joli, une analyse sur des facteurs humains montre que le texte aligné à gauche et irrégulier à droite est le plus facile à lire et à comprendre.)

Pour les images, vous pouvez utiliser le marqueur <IMG ALIGN=right SRC="..." ALT="..."> placé avant le texte. L'image s'affichera en marge droite et le texte remplira l'espace libre autour. Pensez à utilisez <BR CLEAR=right> ou <BR CLEAR=all> pour marquer la fin du texte qui doit se comporter ainsi. Pour plus d'explications, avec des exemples : <URL:http://www.awpa.asn.au/html/images.html>.

6.7. Comment éliminer les espaces entre/autour de mes images?

Si vos images sont à l'intérieur d'un tableau, assurez-vous de mettre les attributs BORDER, CELLSPACING et CELLPADDING à 0. Un espace supplémentaire peut aussi être créé par des espaces autour de la balise <IMG>. Par exemple, remplacez ceci :

<TD ...>
<IMG SRC=... ALT=...>
<IMG SRC=... ALT=...>
</TD>

par cela :

<TD ...><IMG SRC=... ALT=...><IMG SRC=... ALT=...></TD>

D'après les dernières spécifications, les deux devraient être équivalents. Cependant, les navigateurs ne respectent pas en général pas les spécifications dans ce cas-là.

6.8. Comment indenter la première ligne de chaque paragraphe?

Il vous faut utiliser une feuille de style avec la règle suivante :

P { text-indent: 5% }

Allez voir <URL:http://www.htmlhelp.com/reference/css/> pour plus d'information sur les feuilles de styles.

6.9. Comment indenter tout un doucument ou un paragraphe?

Utilisez une feuille de style pour déclarer une marge à gauche.

  /* Marge pour tout le document  */

  BODY { margin-left: 20% }



  /* Marge pour le bloc de texte donc CLASS="indent" */

  .indent { margin-left: 15% }

Allez voir <URL:http://www.htmlhelp.com/reference/css/> pour plus d'information sur les feuilles de styles.

6.10. Comment éliminer les marges autour de la page?

La meilleure façon de faire ça est de suggérer des marges avec une feuille de style. Les CSS utilisent la propriété margin pour spécifier des marges. Plus d'information sur les marges en CSS sur : http://www.htmlhelp.com/reference/css/box/margin.html.

Avec des extensions HTML propriétaires, vous pouvez spécifier des marges pour certains navigateurs. Internet Explorer 3 et ultérieur comprend les attributs TOPMARGIN et LEFTMARGIN (marge supérieure et marge gauche). A partir d'Internet Explorer 4, les attributs BOTTOMMARGIN et RIGHTMARGIN (marge inférieure et droite) sont également reconnus. Netscape (version 4 et suivantes) comprend quant à lui les attributs MARGINWIDTH et MARGINHEIGHT (largeur et hauteur de marge). La plupart des autres navigateurs ignoreront ces extensions propriétaires.

Pour plus d'efficacité, les CSS et les extensions HTML peuvent être combinées. Ceci marchera dans la quasi totalité des situations :

<body marginheight="0" topmargin="0" vspace="0" marginwidth="0" leftmargin="0" hspace="0" style="margin:0">

Plus d'informations sur les marges : <URL:http://www.hut.fi/u/jkorpela/www/margins.html >

On peut également noter que Netscape laisse toujours de la place pour une barre de défilement sur la droite, mais ne dessine la barre que quand le document est assez long. Si le document ne nécessite pas de déroulement, ça laisse une "marge" à droite qui ne peut être enlevée.

6.11. Comment implémenter un saut de page?

Les sauts de page sont possibles avec les CSS de niveau 2 mais ne sont supportés que par les navigateurs les plus récents. Aller voir sur <URL:http://www.w3.org/TR/REC-CSS2/page.html#page-breaks> pour des informations sur les sauts de page CSS2.

En général, les sauts de page ne sont pas appropriés pour des documents HTML car ce qui donne un beau saut de page sur votre écran avec votre police et votre résolution donnera un saut de page inadapté chez moi.

Si vous avez besoin de générer une copie bien formatée de vos documents HTML, peut-être avez vous besoin d'outils mieux adaptés que la fonction imprimer de votre navigateur. Par exemple, html2ps génère des documents PostScript à partir de document HTML et HTML Scissor est conçu pour découper correctement vos pages HTML à l'aide de commentaires spéciaux.

6.12. Comment spécifier des polices de caractère dans une page Web?

Si vous souhaitez que vos lecteurs puissent voir votre page avec une police précise, la meilleure façon est d'utiliser une feuille de style. Les feuilles de style utilisent la propriété font-family pour spécifier des polices. Pour plus d'information sur cette fonctionnalité des CSS, rendez vous sur : http://www.htmlhelp.com/reference/css/font/font-family.html

En HTML, l'élément BASEFONT peut être utilisé pour suggérer des polices pour le document tout entier. Cet élément affecte tout le document. Davantages d'information à ce sujet sur : http://www.htmlhelp.com/reference/html40/special/basefont.html

L'élément FONT en HTML peut également être utilisé pour suggérer une police précise. L'attribut FONT doit être répété à l'intérieur de chaque élément de type block puisqu'il ne peut contenir que des élément de type texte. L'utilisation de l'élément FONT apporte de nombreux problèmes d'utilisation et d'accessibilité. (voir http://www.mcsr.olemiss.edu/~mudws/font.html). Plus d'infos sur FONT : http://www.htmlhelp.com/reference/html40/special/font.html.

Qu'il spécifie des polices par CSS ou avec HTML, l'auteur d'une page court le risque que le système du lecteur possède une police du même nom mais qui soit complétement différente. Par exemple, la police nommée "Chicago" peut être tantôt une jolie police traditionelle, tantôt un ensemble de caractères spéciaux...

Ainsi, les créateurs de pages HTML doivent soit utiliser des polices (ou groupe de polices similaires) qui sont largement répandues, soit fournir des polices dynamiques pour leurs lecteurs. Les utilisateurs qui n'ont pas les polices spécifiques installées ou qui ne télécharge pas les polices dynamiques fournies verront une police par défaut. Evidemment, certains navigateurs utiliseront parfois une police de remplacement moins lisible.

Netscape et Microsoft ont développé des formats concurrents pour les polices dynamiques. TrueDoc marche sur les versions 4 et suivantes de Navigator ainsi que sur Internet Explorer (4 et +) muni d'un plugin. OpenType fonctionne uniquement sur IE 4 (et +). Pour des infos sur TrueDoc (et l'outil de création des polices Web), voir : http://www.truedoc.com/webpages/intro/

Pour des infos sur OpenType : http://www.microsoft.com/typography/web/

Todd Fahrner développe le sujet dans "Beyond the FONT tag: Practical HTML text styling" à <http://style.metrius.com/font_size/livetext.html>

6.13. Comment spécifier des couleurs?

Si vous souhaitez que vos lecteurs puissent voir votre page avec une couleur précise, la meilleure façon est d'utiliser une feuille de style. Les feuilles de style utilisent les propriétés color et background-color pour spécifier les couleurs du texte et de l'arrière plan. Pour plus d'information sur cette fonctionnalité des CSS, rendez vous sur : http://www.htmlhelp.com/reference/css/color-background/color.html
(texte) et http://www.htmlhelp.com/reference/css/color-background/background-color.html (fond)

En HTML, vous pouvez spécifier des couleurs avec les attributs TEXT, LINK (lien), VLINK (lien visité), ALINK (lien actif), et BGCOLOR (couleur du fond) de l'élément BODY. Si l'un de ces attributs est utilisé, alors tous devraient être utilisés pour s'assurer que les couleurs par défaut de l'utilisateur n'interfèrent pas avec ceux spécifiés par l'auteur. Voici un exemple :

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#000080">

Davantages d'informations au sujet de l'élément BODY à : http://www.htmlhelp.com/reference/html40/html/body.html

6.14. Comment changer la couleur d'un bloc de texte?

La meilleure façon est d'utiliser un marqueur de structure adéquat et de suggérer la couleur désirée avec une feuille de style. Si vous voulez spécifier une couleur pour seulement certaines parties d'un élément, alors vous pouvez utiliser une classe pour définir quelles parties sont spéciales. L'exemple CSS suivant définit que le texte spécial sera vert sur fond blanc :

EM.special { color: green; background: white; }

Ensuite, au cours de la page web, cette ligne fait apparaitre le texte spécial en vert :

texte standard <EM CLASS="special"> texte spécial </EM> texte standard

Rendez vous sur http://www.htmlhelp.com/reference/css/ pour plus d'informations sur les CSS.

L'élément FONT en HTML peut également être utilisé pour suggérer une police précise. L'attribut FONT doit être répété à l'intérieur de chaque élément de type block puisqu'il ne peut contenir que des élément de type texte. L'utilisation de l'élément FONT apporte de nombreux problèmes d'utilisation et d'accessibilité. (voir http://www.mcsr.olemiss.edu/~mudws/font.html). Plus d'infos sur FONT : http://www.htmlhelp.com/reference/html40/special/font.html.

6.15. Comment définir des images d'arrière-plan?

Pour faire en sorte d'afficher une image de fond, la meilleure méthode est de suggérer le fond avec une feuille de style. Les CSS utilisent la propriété background-image pour spécifier une image de fond. Pour plus d'information sur background-image en CSS allez voir sur http://www.htmlhelp.com/reference/css/color-background/background-image.html

En HTML, vous pouvez spécifier une image de fond (le motif sera répété) avec l'attribut BACKGROUND de l'élément BODY. Par exemple :

<body background="imagefile.gif" bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#000080">

Pour des infos sur l'élément BODY, voir : http://www.htmlhelp.com/reference/html40/html/body.html

Si vous spécifiez une image de fond, vous devriez également définir des couleurs de texte, de lien et de fond (comme répondu à la question "Comment spécifier des couleurs?") car les couleurs par défaut de l'utilisateur pourraient ne pas fournir un contraste suffisant en regard de votre image de fond. La couleur de fond, quant à elle, sera utilisée par ceux qui ne chargent pas les images.

6.16. Comment obtenir une image fixe en fond d'écran?

Une image de fond fixe reste inchangée quand l'utilisateur fait défiler la page verticalement.

Utilisez une feuille de style avec la règle suivante :

body { color: black; background: white url(image.gif) fixed }

Il faut noter que la propriété fixed utilisée dans cet exemple n'est reconnu que par Internet Explorer 3 et suivants, et Netscape Navigator 5 et suivants. En revanche, l'attribut propriétaire BGPROPERTIES=fixed n'est supporté que par Internet Explorer.

6.17. Comment faire pour que l'image de fond ne se répète pas?

Utiliser une feuille de style avec la règle suivante :

body { color: black; background: white url(image.gif) no-repeat }

6.18. Comment définir une icône personalisée pour les favoris?

Il s'agit d'une fonction introduite par Internet Explorer 5. Par défaut, le navigateur fait une requête sur un fichier nommé "favicon.ico" au même niveau d'arborescence que le document ajouté aux favoris. Si le fichier n'existe pas, alors il fait une autre tentative, cette fois sur le répertoire racine de votre site. Le créateur de la page peut spécifier un chemin différent pour le fichier icône avec une élément lien de cette façon : <LINK REL="SHORTCUT ICON" HREF="/pathname/filename.ico">

L'image doite être de 16 par 16 pixels, dans le format d'icône Windows. Si votre programme de manipulation d'image préféré ne gère pas se fomat, vous pouvez utilser un outil tel que le générateur d'icône libre en Java situé sur <URL:http://www.favicon.com/> pour créer ou convertir votre icône.

Pour davantages d'informations, voire <URL:http://msdn.microsoft.com/workshop/Author/dhtml/howto/ShortcutIcon.asp> ou rechercher "favicon.ico" sur <URL:http://msdn.microsoft.com/workshop/essentials/versions/ICPIE5.asp>

 


Pour des rajouts ou des oublis dans cette FAQ, merci de contacter <darin@htmlhelp.com> (en anglais) ou <cedrik.rousseau@insa-rouen.fr> (en français)

Toutes les informations ici présentes ont été compilées à l'origine par les membres du Web Design Group, principalement Arnoud "Galactus" Engelfriet, John Pozadzides, et Darin McGrew. La traduction hollandaise de cette FAQ a été réalisée par Rijk van Geijtenbeek, tandis que la traduction française à été faite par Cédrik Rousseau dans le cadre de l'UV traduction de FAQ du département ASI de l'INSA Rouen.

Des compléments ont été apportés par Boris Ammerlaan, Martin Atkins, Lori Atwater, Alex Bell, Stan Brown, Roger Carbol, Alex Chapman, Jan Roland Eriksson, Jon Erlandson, Mark Evans, Peter Evans, Alan Flavell, Rijk van Geijtenbeek, Lucie Gelinas, Bjoern Hoehrmann, Tina Marie Holmboe, Cliff Howard, Thomas Jespersen, Peter Jones, Nick Kew, Jukka Korpela, Simon Lee, Nick Lilavois, Neal McBurnett, Glen McDonald, Dan McGarry, Ken O'Brien, Timothy Prodin, Steve Pugh, Liam Quinn, Colin Reynolds, Kai Schätzl, Doug Sheppard, Sue Sims, Toby Speight, Warren Steel, Ian Storms, Peter Thomson, Daniel Tobias, and Diane Wilson.

Merci tout le monde

 


Home, Reference, FAQs, Tools, Design, Feature Article, BBS, Links

Copyright © 1996-1999. Web Design Group All rights reserved.