 |
Vendredi 06 juin 2025 - 12:20 |
| Translate |
|
| Rubriques |
| Réseaux sociaux |
|
| Liste des jeux Amiga |
|
| Trucs et astuces |
|
| Glossaire |
|
| Galeries |
|
| Téléchargement |
|
| Liens |
|
| Partenaires |
|
| A Propos |
|
| Contact |
|
|
|
Le mois dernier, faute de place, seule la première partie du cours a été publiée. C'est donc ce mois-ci que nous verrons comment formater le texte. Nous verrons aussi comment modifier les caractéristiques globales d'une page, notamment les couleurs du texte et l'image de fond. Et comme cadeau "bonus", nous verrons aussi les listes...
La couleur
Il est très facile d'écrire en <B>gras</B> (bold) ou en <I>italique<I>. Mais en fait, les recommandations (site 3) sont de préférer les modifications logiques de votre texte aux modifications physiques, donc d'utiliser plutôt <STRONG> que <B> et choisir <EM> (emphasize) au lieu de <I>... A vous de décider !
Il n'est pas beaucoup plus compliqué d'écrire en <FONT COLOR=red>rouge</FONT> mais cela n'est pas compatible avec tous les navigateurs, surtout pour des couleurs plus rares. Le plus simple est d'indiquer la couleur en RVB (rouge, vert, bleu). Pour cela, il faut simplement savoir compter en hexadécimal ou trouver quelques petits utilitaires. Prenons la méthode manuelle et simple :
- 1. Trouvez une fenêtre de requête de palette - par exemple dans un programme de dessin - et créez la couleur désirée, puis lisez les valeurs indiquées pour les trois couleurs rouge, vert et bleu.
- 2. Personnellement, j'ai créé un orange qui est indiqué comme 15, 9, 0 par la fenêtre de requête. Mais dans d'autres cas, les nombres ne vont pas de 0 à 15, notamment dans de meilleurs modes d'écran ou comme ici sur Internet où ces nombres vont de 0 à 255. Dans ce cas, 15 devient 255, 9 devient environ 144 et 0 reste 0.
- 3. On convertit en hexadécimal : 255 = $ff, 144 = $90, 0 = $00.
- 4. Cela nous permet donc d'écrire en orange : <FONT COLOR="#ff9000">orange</FONT> !
L'alignement
Pour aligner le texte de votre page, ou n'importe quel autre objet, il existe <DIV ALIGN=xxx>, un ordre de formatage des paragraphes qui prend pour valeurs "LEFT", "CENTER" ou "RIGHT". Par exemple :
|
<DIV ALICN=CENTER> Titre centré </DIV> <DIV ALIGN=LEFT> Suivi d'un texte aligné à gauche... </DIV> |
Il existe une version plus connue de cette balise sous la forme <CENTER>...</CENTER>.
Taille
Si vous savez déjà comment modifier la taille du texte de manière logique avec les balises <H1>...<H&>, sachez qu'il existe une méthode pour modifier la taille visuellement, au milieu du texte. Il s'agit de la balise <FONT SIZE=[+/-]nn> que vous pouvez utiliser de deux façons faciles à comprendre avec cet exemple :
|
Ceci est l'écriture normale. Mais on peut écrire <FONT SIZE=+1>un peu plus grand</FONT>, ou même <FONT SIZE=-1>un peu moins grand</FONT> ou alors carrément <FONT SIZE=6>décider directement de la taille</FONT>. <P>Facile, non ?</P> |
Vous l'aurez compris, un "+" ou un "-" indiquent un changement par rapport à la taille de base, alors que la valeur sans signe indique directement la taille absolue désirée. Les tailles valides vont de 1 à 7 et la taille par défaut est de 3. La figure 1 (sous Unix, pour changer) montre le résultat des commandes des cours HTML n°2 et 3.
Vous pouvez même faire clignoter du texte (ne marche pas avec tous les navigateurs), mais ceci est à utiliser parcimonieusement, car c'est vite agaçant ! On peut faire <BLINK></BLINK> du texte !
Certaines balises peuvent se révéler utiles, par exemple <PRE></PRE> qui prend le texte comme préformaté et l'affiche tel quel avec les retours à la ligne et autres.
Il y a aussi la possibilité de définir des indices avec <SUB></SUB> ou exposants avec <SUP></SUP>. On peut aussi écrire du texte tracé avec <STRIKE></STRIKE>.
Image de fond et couleurs : comment faire ?
Pour ajouter une image de fond sur votre page, rien de plus simple, la balise <BODY> se trouvant sur votre page doit se transformer en :
| <BODY BACKGROUND="images/fond.GIF" BGCOLOR="#A020F0" TEXT="#FFFFFF" LINK="#FF0000" VLINK="#900000" ALINK="#900000"> |
Cela vous permet d'indiquer l'image de fond avec BACKGROUND="url", mais aussi la couleur par défaut du fond de la page (avant que l'image n'apparaisse ou si le visiteur ne veut pas la charger) grâce à BGCOLOR="". Vous devez aussi indiquer les couleurs désirées pour le texte (TEXT) de la page, les liens pas encore visités (LINK), visités (VLINK) et la couleur des liens lorsque l'on clique dessus (ALINK). Les couleurs sont à donner en RVB, comme on l'a vu plus haut. Vous devez indiquer toutes les valeurs de <BODY> ou aucune mais un mélange entre valeurs données et valeurs par défaut risque d'être explosif. ;-)
Conseils
Si vous n'avez pas encore vu de pages illisibles à cause du fond, sur Internet, je peux vous promettre que vous en verrez, car ce n'est pas rare. S'il est facile d'éviter de mal choisir les couleurs s'il n'y a pas d'image de fond, dès que vous mettrez une image, vous verrez que cela devient beaucoup plus difficile.
Pour certaines images de fond, aucune couleur ne peut rendre lisible le texte se trouvant dessus. Il faut donc très bien choisir l'image de fond. Une bonne chose est d'éviter les contrastes, ou une couleur proche de celle du texte.
Un bon conseil est de décider avant tout si la page sera constituée d'un texte sombre sur fond clair ou le contraire, et de créer ou choisir le fond de la page en conséquence...
Les listes
Vous aurez quand même appris quelque chose de concret ce mois-ci ; en effet, vous aurez régulièrement besoin de listes. La plus simple est la liste non numérotée (unnumbered list) et les listes de type menu "<MENU>" et répertoire "<DIR>" sont à peu près semblables :
|
<UL> <LI>200g de haricots <LI>50g de beurre <LI>1/2 oignon </UL> |
Il existe donc aussi les listes numérotées (ordered lists) :
|
<OL> <LI>Faire revenir les oignons dans le beurre <LI>Ajouter les haricots </OL> |
Un dernier type est la liste de définitions :
|
<DL> <DT>HTML <DD>Hypertext markup Language <DT>WWW <DD>World Wide Web </DL> |
Jetez un oeil à la figure 2 et vous comprendrez tout !
Si vous désirez en savoir plus sur une commande, je ne saurais trop vous conseiller les pages de références inclues dans AWeb si vous le possédez (Menu Aide/Documentation) ou d'aller sur les nombreux sites dédiés à l'HTML sur Internet. Évitez les sites moins sérieux et préférez les sites "officiels" qui privilégient un HTML plus standard (voir sites 2 et 3). Vous trouverez aussi les fichiers donnés en exemple dans l'article sur ma page personnelle (voir site 1).
Le mois prochain, nous verrons les très utiles tableaux ; ce sera beaucoup plus intéressant et les résultats bien plus variés et agréables à l'oeil que tout ce que nous avons vu jusqu'à présent...
Sites intéressants
[1] www.amiganews.com/dbucher/.
[2] www.cwru.edu/help/introHTML/.
[3] www.w3.org/.
[4] trace.wisc.edu/docs/html_guidelines/htmlgide.htm.
|
