Un certain nombres d'attributs peuvent être utilisés avec la la balise <HR> :
* SIZE (en nombre : 1, 2, etc.) permet de définir la taille de la "ligne".
* WIDTH (en pixels ou en pourcentage) permet de spécifier la taille (longueur) de la ligne.
* ALIGN (left, center, right) : je crois que l'attribut est assez clair :).
* NOSHADE : supprime l'ombre sous la ligne.
* COLOR (nom de la couleur (navy, white, etc.) ou valeur #rrggbb) spécifie... la couleur, quelle surprise !
Pour afficher une image en fond de page, on utilise l'attribut BACKGROUND de la balise <BODY> : <BODY BACKGROUND="truc.gif"> permettra d'afficher l'image truc.gif en fond de page. Attention, - comme pour les liens ! - à bien spécifier si nécessaire le chemin d'accès à l'image que tu veux mettre en fond.
Enfin, l'attribut de la balise <IMG> qu'il fallait trouver était ALT (pour "alternative text") qui permet d'afficher dans l'emplacement réservé à l'image un texte pour ceux qui ont désactivé l'affiche des images dans leur navigateur. Le même texte (attention de ne pas non plus en écrire un roman !) s'affichera si l'image n'est pas disponible sur le serveur: erreur au niveau du code source dans le nom ou l'adresse du fichier image, oubli d'upload de l'image etc.
Ca y est, maintenant tu disposes des outils nécessaires pour réaliser une page web complète... alors....
- Tous les noms de fichiers doivent être en minuscules et sans espace (l'adressage sur le Web étant très sensible) ;
- Les images doivent être de taille modeste afin d'accélérer le chargement de la page ; (cf. fluidité de l'affichage)
- Ne pas oublier de bien utiliser le tag <TITLE> afin que son contenu soit explicite.
- Penser à placer un lien permettant aux visiteurs de contacter le webmaster.
La difficulté n'est pas tant dans l'écriture de la page (sous réserve d'avoir bien assimilé les leçons précédentes... en cas de problème, de questions, il ne faut pas hésiter à utiliser la zone tchatche dédiée au HTML !) que dans la définition de son contenu et dans la précision de sa réalisation : on s'adresse maintenant potentiellement au monde entier, d'où la nécessité de bien penser cette page et de prendre son temps.
Certains caractères comme ¥ ou ¢ peuvent être nécessaires sur ta page, de même d'ailleurs que les caractères accentués peuvent l'être sur des pages écrites à partir de claviers non accentués. On utilise pour ces caractères un code (ou entité) numérique (peu pratique) ou alphabétique (il décrit le caractère de façon à peu près claire ce qui le rend plus commode). Par exemple, pour afficher ¥ on peut utiliser ¥ (entité alphabétique) ou ¥ (entité numérique). Ci-dessous tu trouveras un petit tableau des principaux caractères spéciaux et de l'entité alphabétique correspondante, si certains te manquent, n'hésite pas à me contacter.
N.B. : Je conseille d'utiliser les entités pour taper les caractères accentués afin d'être sûr que ceux-ci s'afficheront parfaitement.
D'après une fiche de Didier
La fluidité de l'affichage est un élément important à prendre en compte en raison de la lenteur d'Internet: tout le monde ne dispose pas d'une liaison câble ou ADSL.... Cette fluidié dépend de plusieurs paramètres dont, à ce niveau, la taille des fichiers graphiques. Il n'est pas rare de devoir patienter devant une page blanche, le temps que les images se chargent ! Beaucoup de surfeurs n'ont pas cette patience et zappent...
Les indications qui suivent nécessitent un logiciel de dessin récent ; Paint Shop Pro (PSP ci-après) version US servira d'exemple, à toi d'adapter les explications à ton logiciel ou de télécharger celui-ci (30 jours gratuits).
Après avoir ouvert le fichier image dans PSP, trois paramètres sont à contrôler d'urgence :
1 - la dimension de l'image
2 - le nombre de couleurs utilisées
3 - le format de compression
Nous avons vu que les options width et height permettaient d'ajuster l'image à sa taille d'affichage... mais il est ridicule de charger une image énorme pour l'afficher en vignette !
Il faut donc d'abord penser à recadrer le cas échéant l'image avec l'outil "crop". Puis, dans le menu Image/Item/Resize, un dialogue apparaît avec 3 modes de définition des dimensions :
1 - Pixel size pour définir au pixel (point de l'écran) près
2 - Percentage of Original pour redimensionner proportionnellement
3 - Actual/Print Size pour définir les dimensions en pouces (inch) ou en cm
Ne pas oublier de cocher la case Maintain ratio of afin de ne pas déformer l'image.
Cette opération ne prend que quelques secondes, mais quel impact souvent sur la taille du fichier !
N.B.: Ceci ne dispense nullement d'utiliser width et height qui indiqueront au navigateur quelle place réserver à l'image sur la page et éviteront un premier affichage saccadé.
Autant dans le cas d'une photo, le nombre de couleurs est important (quelques milliers) et n'acceptera pas de modification, autant pour un dessin ceci est variable.
Le codage de la couleur d'un point prend plus ou moins de place selon le nombre maximum de couleurs (palette) que l'on souhaite utiliser : 2 (noir et blanc), ... 16 ? ... 256 ?
Dans le menu Colors, commence par rechercher le nombre actuel de couleurs utilisées par l'image (item Count Colors Used). Ensuite à toi de décider quelle valeur utiliser (item Decrease Color Depth) en faisant quelques essais (attention à ne pas faire de sauvegardes intempestives qui causeraient la perte du fichier initial). Un peu d'expérience devrait te permettre de "sentir" que telle image peut ou non n'utiliser qu'un certain nombre de couleurs.
Comme nous l'avons vu dans la leçon 4, les deux formats les plus répandus sur Internet sont GIF et JPG (ou JPEG).
1 - JPEG est un format de compression avec pertes, c'est à dire que l'image est simplifiée lors de sa compression. Cette simplification est variable selon le taux choisi : plus elle est grande, moins l'image sera bien définie mais plus elle sera "légère" en Ko ! Ce format est utilisé généralement pour les images ayant un nombre de couleurs important (photos,...). Il suffira de faire quelques essais pour déterminer le taux qui convient.
2 - GIF est un format de compression sans perte, mais n'est applicable qu'à 256 couleurs maximum ! Il permet de plus la transparence ou l'animation.
Quelques remarques pour améliorer encore la fluidité.
- Réutiliser au maximum les images: elles ne seront téléchargées qu'une seule fois du serveur, même si elle apparaissent sur des pages différentes. Le navigateur ira ensuite les rechercher dans le dossier "Temporary Internet Files" du visiteur, ce qui est beaucoup plus rapide.
- Organiser les images sur la page en plaçant les plus légères au début et les plus lourdes à la fin: elles auront le temps de se charger pendant que votre visiteur regardera les premières. Un texte (pas trop long quand même) en haut de page laissera encore un peu plus de temps.
- Découper les très grosses images en plusieurs morceaux qui se chargeront l'un après l'autre, animant ainsi un peu la page pour retenir l'attention du visiteur.
Nous l'avons vu dans la leçon 2, les couleurs peuvent être indiquées soit par leur nom, soit par leur valeur hexadécimale. Voici un petit tableau (à cliquer pour l'avoir en plus grand et plus lisible !) récapitulatif de 140 des couleurs.
Phoebe 30/04/2001
www.ASP-PHP.net