 |
 |
|||
 |
|
 |
||
 |
 |
 |
|
 |
|
ProgrammixDiffusion Me Contacter |
||
|
|
|
|
|
|
XHTMLChapitre 00 Chapitre 01 Chapitre 02 Chapitre 03 |
||
|
|
|
|
|
|||||||||||||||||||||||||
|
Chapitre 02 : Mise en forme du texte
A présent, vous savez réaliser une page de base... Mais, vraiment de base ! Car, il faut dire qu'écrire du texte noir sur une page blanche ne va pas marquer vos visiteurs plus que cela ! Nous allons donc nous amuser un petit peu dans ce chapitre, uniquement avec le texte. Et encore, nous ne verrons pas tout de suite l'utilisation des couleurs, ce qui fera l'objet du prochain chapitre.
Au cas où votre texte s'étale sur plusieurs paragraphes, il peut se passer quelque chose d'étrange concernant la mise en page... Regardez plutôt...
La mise en page à l'air plutôt correcte, n'est-ce pas ? Eh bien, regardez le résultat ( ici ). Une petite surprise vous y attend. Pourquoi un tel résultat ? Il faut savoir que le XHTML
oublie les retours à la ligne, les tabulations et autres alinéas
lors de la compilation (la transformation du code tel que vous l'avez tapé
en code compréhensible par votre ordinateur). Ce qui explique cette affreuse
mise en page !
Il s'agit d'une balise toute simple : <p>. C'est elle qui vous permet de différencier vos différents paragraphes. Ouvrez-la quand vous commencez un paragraphe, et fermez-la quand vous terminez celui-ci. Ce qui donne (je n'ai pas tout recopié) :
Comme vous pouvez le constater, il est tout à fait possible d'en mettre plusieurs à la suite. Quant à l'imbrication de plusieurs paragraphes les uns dans les autres, c'est possible aussi. Mais, évitez d'en imbriquer de trop les uns dans les autres... Ne serait-ce que pour la lisibilité du code. Regardons à présent le résultat de ce que nous venons de faire grâce à ce lien : ici. Au moins, maintenant, c'est un peu plus espacé.
Mais, on pourrait remarquer que les noms des auteurs sont toujours accolés à la citation. Il serait préférable de le mettre à la ligne. C'est le rôle de la balise <br/>. Remarquez le slash final qui indique que c'est une balise solitaire. Ainsi, notre code devient :
Ce qui donne la page suivante : lien.
Pour sauter une ligne, vous pouvez théoriquement mettre plusieurs <br/> à la suite. Mais, autant utiliser les paragraphes dans ce cas. Votre code sera plus clair. Cependant, les noms ne sont toujours pas sur la gauche ! Qu'à cela ne tienne ! Examinons ensemble les balises d'alignements !
Je ne vous ai pas tout dit concernant la balise de paragraphe... Eh oui, elle peut en effet admettre un attribut. Celui-ci est l'attribut align. Il permet de placer votre texte soit à gauche de la page (valeur left), soit à droite (valeur right), soit au centre (valeur center). Dans notre cas, où nous voulons que le nom de l'auteur apparaisse à droite, ce sera :
Pour des raisons esthétiques, il vaut mieux enlever le retour à la ligne : en effet, le changement de paragraphe en comprend déjà un. Attention à ne pas oublier les guillemets pour la valeur de align. Cela donne la page suivante : lien.
A présent, nous voulons (ou du moins, je veux) mettre
le titre « La Mathématique » un peu plus en valeur...
Pour cela, pourquoi ne pas l'écrire plus gros que le reste de la page
? C'est ainsi que nous allons utiliser les balises <hN> où
N désigne un nombre entier naturel entre 1 et 6.
Cette famille de balises modifie l'importance accordée aux éléments compris entre les deux balises ouvrante et fermante. Plus on se rapproche de 1, plus le texte est important. Et inversement si on s'en éloigne. D'où la transformation du code ainsi que les résultats de celle-ci : <!-- L'ordre des balises a son importance : on ouvre p, puis h1 ; on ferme h1, puis p. --> <p> <h1> La Mathématique </h1> </p> <p> La Mathématique, science toute puissante au coeur de toute chose, est souvent critiquée, parfois adulée... Découvrons ensemble quelques points de vue de personnages plus ou moins connus... </p> Pour visualiser les effets de ces modifications, c'est ici. Une remarque importante pour la programmation XHTML : l'imbrication de balises différentes doit se faire avec prudence : l'ordre d'ouverture et de fermeture de celles-ci a en effet son importance. Il faut toujours respecter le schéma A B /B /A, et non pas A B /A /B. Regardez l'exemple ci-dessus pour avoir une illustration de ceci.
Désolé pour ces mauvais jeux de mots... Je voulais tout simplement
parler des balises italiques et grasses...
Amusez-vous à mettre tout le texte en forme comme il faut pour vous entraîner à l'utilisation de ces nouvelles balises. Et, essayer de souligner le titre, grâce à la balise de soulignement <u>. Au final, vous devriez obtenir cette page : lien.
Cela ne nous servira pas beaucoup dans notre cas, mais il peut arriver que vous ayez à écrire des puissances ou des indices (si vous faîtes un site de chimie par exemple). Certes, il y a toujours possibilité d'écrire des chiffres du genre 5^4, mais c'est relativement peu esthétique. Pour les exposants, c'est la balise <sup> tandis que pour les indices, il s'agit de <sub>. Un petit exemple qui n'a plus rien à voir avec ce qui précède, et qui plaira sûrement à tous les chimistes :
Pour voir le résultat : ici.
Pour insérer du texte avec une légère marge sur la droite,
il est possible d'utiliser cette balise. Il n'y a pas énormément
de choses à dire sur celle-ci, si ce n'est qu'il est possible d'en imbriquer
plusieurs les unes dans les autres.
Et ainsi, vous verrez s'afficher sous vos yeux ébahis (j'en fais pas un petit peu trop là ?) : lien. On verra plus tard pour la traduction. En effet, là n'est pas le but de ce chapitre. Mais, si des latinistes veulent s'amuser...
Cette balise est très peu utilisée... Je la place dans ce chapitre surtout à titre d'exemple, histoire que vous sachiez qu'elle existe. Un acronyme est une abréviation comme C.A.F., P.D.G., S.N.C.F., etc... La langue française regorge de telles abréviations. Pour s'y retrouver, vous pouvez proposer à vos visiteurs la traduction de ceux-ci, sans surcharger votre page. Pour cela, il suffit d'utiliser la balise : <acronym>. Elle prend comme argument title la signification de cette acronyme. Un exemple :
Vous affichera (sauf si vous êtes sous Internet Explorer) : ceci. Comme vous pouvez le constater, l'acronyme est souligné en pointillé (sauf sous IE...). Et, si l'internaute pose son curseur de souris dessus, il apparaît une petite bulle dans laquelle s'affiche la signification de cet acronyme. Pas mal, non ?
Dans cette dernière partie, nous allons voir comment changer la police d'écriture de notre texte (ou la font en anglais). Il s'agit en fait de la manière dont est écrit votre page. Quelques exemples de polices : Voici la
police Verdana. Pour modifier la police, on utilise la balise suivante :
Un petit exemple :
Inutile de chercher, il n'y a pas de lien pour cet exemple. Pourquoi ? Car cela n'apporterait pas grandchose... Remarquez qu'ici, j'ai mis deux polices différentes. Pourquoi ? Il existe de très nombreuses polices de par le monde. Et, tout Internaute ne les possède pas toutes. Que se passerait-il si vos visiteurs ne possédaient pas la police que vous avez choisie ? Eh bien, ce sera la police par défaut, définie par le navigateur, qui sera utilisée. Pas terrible pour l'esthétique... Donc, veillez à ne pas choisir de police trop exotique... Voici une petite liste des fonts que vous pouvez utiliser librement, car présentes sur quasiment toute machine (on ne se moque pas de l'exemple... :) :
Une petite précision, qui je pense est inutile à apporter (quoique...) : éviter d'utiliser la police Webdings... Ce n'est pas que c'est un peu incompréhensible, mais un petit peu quand même... Enfin, tant que nous y sommes, il est possible de modifier la taille de la police utilisée, grâce à l'argument size. Celui-ci prend comme valeur des entiers naturels compris entre 1 et 7.
Pour finir, voici ce que j'appelle la tour des tailles : Taille 1 Taille 2 Taille 3 Taille 4 Taille 5 Taille 6 Taille 7
Pas mal de nouvelles notions dans ce chapitre, n'est-ce pas ? Digérez tout cela, et on se donne rendez-vous dans le prochain. Pensez à vos crayons de couleurs : nous allons faire du coloriage... :)
|
||||||||||||||||||||||||||
|
|
Télécharger ce chapitre au format *.pdf en cliquant 
IntroductionSite optimisé pour un affichage en 1024 * 780.
Toute reproduction partielle ou totale de ce site est soumise aux conditions indiquées dans la rubrique "Diffusion".
Hébergement : www.developpez.com, que je remercie pour la qualité de ses services.
Webmaster et designer : Sethpolma