Pour le moment, il faut dire que nos pages html ne sont pas très belles, et qu'elles mériteraient mieux. C'est le but de ce chapitre : embellir vos pages html par tous les moyens...
Nous verrons tout d'abord comment agrandir les caractères, puis ensuite vous verrez des attributs de texte (gras, souligné...). Après, vous pourrez aligner du texte et à la fin, vous saurez choisir une police de caractère (mais ce n'est pas très conseillé, vous verrez pourquoi).
Voilà en gros ce que vous saurez faire, et vous verrez que votre page donnera alors bien plus envie d'être lue.
On a 2 moyens de donner la taille des caractères. Ces 2 moyens s'appliquent :
Taille des titres
On utilise ce moyen pour les titres et son utilisation n'en est pas très complexe.
On a le choix entre 6 tailles pour les titres, et on utilise chaque fois un tag différent. Le tag commence toujours par "h", qui est suivi d'une taille entre 1 et 6 (1 étant la plus grande, 6 la plus petite). Par exemple : <h4>.
A partir de maintenant, pour les exemples, je ne mettrai plus tout le corps de la page html. Vous savez que tout se mettra entre les 2 <body> (sauf indication contraire). Regardez cet exemple-ci et essayez-le :
<h1>Taille 1</h1><br> <h2>Taille 2</h2><br> <h3>Taille 3</h3><br> <h4>Taille 4</h4><br> <h5>Taille 5</h5><br> <h6>Taille 6</h6>
Taille du texte
Pour donner la taille du texte, on utilise le tag <font> (que nous aurons l'occasion de revoir). Ajoutez-lui l'attribut size et précisez-le par la taille de votre choix de 1 à 7 (par contre, ici, 5 est plus petit que 6).
Exemple :
<font size="1">Taille 1</font><br> <font size="2">Taille 2</font><br> <font size="3">Taille 3</font><br> <font size="4">Taille 4</font><br> <font size="5">Taille 5</font><br> <font size="6">Taille 6</font><br> <font size="7">Taille 7</font>
Si vous désirez définir une taille pour tout le texte (celle par défaut est 2), utilisez le tag <basefont> juste après <body>. Précisez <basefont size="x">, et remplacez x par la valeur de votre choix.
Explications concernant les attributs de texte
Ci-après seront développés les attributs de texte logiques et physiques. A priori, ces mots ne devraient pas vous évoquer grand-chose. Et peut-être vous font-ils peur (il n'y a pas de honte !) ?
N'ayez crainte, voici quelques explications.
Un attribut de texte logique laisse au navigateur le choix de la manière avec laquelle il va présenter le texte. On ne dit pas qu'un texte est gras, mais qu'il est "fort". Le navigateur interprètera à sa manière le tag. C'est une vieille méthode un peu démodée, à éviter si vous ne voulez pas avoir de surprises...
Elle peut être cependant intéressante, vous verrez cela plus tard.
Un attribut de texte physique, vous l'aurez compris, impose au navigateur une certaine mise en forme. Vous serez ainsi certain que votre texte s'affichera en italique par exemple.
Voici un tableau indiquant le nom des tags (que vous ne devez pas oublier de fermer), et l'effet qu'ils donnent :
| Tag | Effet |
|---|---|
| <b> | Gras |
| <i> | Italique |
| <u> | Souligné |
| <sub> | Texte en indice |
| <sup> | Texte en exposant |
| <small> | Pour écrire en plus petit que la taille normale |
| <big> | Pour écrire en plus gros que la taille normale |
| <s> |
Ce sont les tags les plus employés. Petit exemple :
<big>N'oubliez pas !</big><p> Votre chien peut être <i>malade !</i> Il devrait être <u>impératif</u> de l'emmener <b>régulièrement</b> chez un vétérinaire <sub>(comme moi !)</sub>Evitez tout de même de surcharger votre page en attributs de texte. Regardez ce que celle-ci donne :
Voici la liste de la plupart des attributs de texte logiques. Rappelez-vous que le résultat une fois affiché ne sera peut-être pas celui que vous attendez !
| Tag | Effet (en général) |
|---|---|
| <strong> | Mise en valeur forte des caractères (souvent gras) |
| <em> | Autre mise en valeur (souvent italique) |
| <cite> ou <blockquote> | Utilisés pour les citations (souvent italique) |
| <code> | Pour présenter du code source |
| <samp> | Prévu pour les exemples |
| <kb> | |
| <dfn> | Pour les définitions |
Ces tags n'ont plus une grande importance sur le web, alors il vaut mieux les éviter. Mais rien ne vous empêche de les ressuciter !
Autre exemple, qui ne s'affichera sûrement pas de la même manière d'un navigateur à l'autre :
Je cite :<cite> 43% des maladies des chevaux sont dûes à une mauvaise hygiène</cite> Et c'est<strong> important !</strong><p> Ajoutez cela sur votre liste des bonnes résolutions de l'année 3144 : <dfn>Hygiène : Chose importante à respecter</dfn>
Pour aligner le texte, je vous conseille fortement d'utiliser le tag <div>, parce qu'il s'applique à tous types d'objets (images, texte, vidéo...). C'est donc pour des raisons de simplicité.
Il faut ajouter au tag <div> l'attribut "align" que vous préciserez par le type d'alignement. Les trois types d'alignement sont :
Exemple :
<div align="left">A gauche</div><br> <div align="center">Centré</div><br> <div align="right">A droite</div>
Noter cependant que les tags <left>, <center> et <right> fonctionnent aussi.
Ce doit être votre éternelle question sur le net : "Mais que fait la police ???". Il faut d'abord que vous sachiez ceci :
Tout le monde évite de faire des fantaisies avec les polices. Et c'est pour une raison bien simple : imaginez un seul instant que l'internaute qui lit votre page web ne possède pas les polices que votre site utilise ! Le résultat à l'affichage sera alors tout à fait innatendu car le navigateur
choisira une police neutre en remplacement, telle Arial.
Donc, à éviter. Mais le tag existe bel et bien, alors je vous le donne quand même...
On utilise encore le tag <font>, comme pour la taille. Mais cette fois-ci, on ajoute l'attribut "face", que l'on précise par le nom de la police. Exemple :
<font face="Mistral">Mauvaise écriture</font><br> <font face="Signature">TRES mauvaise écriture</font><br> <font face="Wingdings" size="10">N</font>
Vous remarquerez que si vous ne possédez pas une ou plusieurs polices, le texte s'affiche dans une autre police.
Utilisez une de ces 3 polices, beaucoup de monde doit les avoir :
Voilà !
Vous venez de voir de nombreux moyens d'embellir votre site. A partir de maintenant, en combinant plusieurs tags, vous devriez pouvoir montrer une page web plus facile à lire et plus claire à tous les internautes. On sentira déjà que vous savez manier le html.
Mais votre site doit manquer de couleurs. Pas de problème ! Le prochain chapitre va colorer votre page web !