La semaine dernière, nous avons eu des émotions fortes avec notre première page web. C'était excitant certes, mais peut-être un peu décevant aussi. À vrai dire, avouons que c'était franchement plat : pas de couleurs, pas d'images, rien qui bouge. Une vraie page web d'université hongroise datant de 1994!

Aujourd'hui, nous allons changer le monde : nous allons mettre un peu de couleurs et de mise en forme et briser la monotonie du texte noir sur fond gris! Artistes, à vos claviers!

Oui madame, vous pouvez changer votre taille! Ou du moins celle de votre texte… Il s'agit encore une fois d'une ancre HTML (on se souvient de notre dernière leçon?) qui paramètre le texte qui s'y trouve. Voici un exemple :

Pour ce faire, il faut utiliser l'ancre : <font size=6> </font> L'argument " size " peut être de valeur 1 à 7. Encore une fois, c'est facile, non?

Vous n'aimez pas la couleur de votre texte? Changez pour le rouge et répétez après-moi : " je le mérite bien! "

Pour ce faire, il faut utiliser l'ancre : <font color=RED> </font> L'argument " color " peut être un mot comme RED, BLUE, YELLOW, etc pour les couleurs primaires, mais vous pouvez également insérez des codes hexadécimaux pour toutes les couleurs, le logiciel Web Expert, que nous avons vu la semaine dernière, permet de choisir une couleur dans la palette et d'insérer automatiquement son code hexadécimal. Par exemple, le code du noir est #000000 et celui du blanc est #FFFFFF.

Une des merveilles du HTML, c'est que certaines ancres peuvent contenir plus d'un arguments. C'est le cas de <FONT> qui peut paramètrer la couleur et la taille en même temps :

Ha oui! J'allais presque oublier. Vous pouvez même changer les couleurs de toute la page : le fond, le texte par défaut, etc. Vous faites tout ça avec l'ancre BODY que nous avons vu la semaine dernière. BODY peut prendre plusieurs arguments, que voici :

Amusez-vous! Mais tâchez de rester lisibles! La semaine prochaine, comme nous parlerons d'images, nous verrons comment utiliser une image comme fond de page web. Youppi!

La semaine prochaine nous verrons comment utiliser efficacement les tables en HTML, ce sera une belle occasion de faire de la mise en page avancée. Mais cette semaine, nous allons nous contenter d'aligner le texte.

Le HTML fait ce qu'on appelle du ligne à ligne, c'est à dire qu'il aime bien s'occuper d'une ligne à la fois (après tout, c'est sa façon de voir le monde!). Mais il vous est possible de faire de la mise en forme de paragraphe. Vous vous souvenez de mon exemple de la semaine dernière avec les ancres <BR>? Voici ce que ça donne avec des paragraphe entier :

<P> Exaudi, domine, deprecationem meam, ne deficiat anima mea sub disciplina tua, neque deficiam in confitendo tibi miserationes tuas, quibus eruisti me ab omnibus viis meis pessimis, ut dulcescas mihi super omnes seductiones, quas sequebar, et amem te validissime, et amplexer manum tuam totis praecordiis meis, et eruas me ab omni temptatione usque in finem. </P>

<P> Ecce enim tu, domine, rex meus et deus meus, tibi serviat quidquid utile puer didici, tibi serviat quod loquor et scribo et lego et numero quoniam cum vana discerem, tu disciplinam dabas mihi et in eis vanis peccata delectationum mearum dimisisti mihi. didici in eis multa verba utilia; sed et in rebus non vanis disci possunt, et ea via tuta est, in qua pueri ambularent. </P>

Vous avez devinez que P est pour Paragraphe, bravo! Maintenant, supposons que vous voulez voir le deuxième paragraphe être aligné à droite (tous les goûts sont dans la nature…), voici ce qu'il faudrait ajouter à l'ancre <P> du deuxième paragraphe :

<P ALIGN=RIGHT> Ecce enim tu, domine, rex meus et deus meus, tibi serviat quidquid utile puer didici, tibi serviat quod loquor et scribo et lego et numero quoniam cum vana discerem, tu disciplinam dabas mihi et in eis vanis peccata delectationum mearum dimisisti mihi. didici in eis multa verba utilia; sed et in rebus non vanis disci possunt, et ea via tuta est, in qua pueri ambularent. </P>

et le résultat serait le suivant :

Ecce enim tu, domine, rex meus et deus meus, tibi serviat quidquid utile puer didici, tibi serviat quod loquor et scribo et lego et numero quoniam cum vana discerem, tu disciplinam dabas mihi et in eis vanis peccata delectationum mearum dimisisti mihi. didici in eis multa verba utilia; sed et in rebus non vanis disci possunt, et ea via tuta est, in qua pueri ambularent.

Naturellement, l'argument " align " peut prendre les valeurs suivantes : RIGHT, LEFT, CENTER.

Si vous voulez mettre une portion de texte en retrait, la fonction HTML est très simple, il suffit d'ajouter un <BLOCKQUOTE> </BLOCKQUOTE> et voilà! Vous pouvez bien sûr mettre plus d'un <BLOCKQUOTE> pour accentuer le retrait. Exemple :

<BLOCKQUOTE><BLOCKQUOTE> Ecce enim tu, domine, rex meus et deus meus, tibi serviat quidquid utile puer didici, tibi serviat quod loquor et scribo et lego et numero quoniam cum vana discerem, tu disciplinam dabas mihi et in eis vanis peccata delectationum mearum dimisisti mihi. didici in eis multa verba utilia; sed et in rebus non vanis disci possunt, et ea via tuta est, in qua pueri ambularent. </BLOCKQUOTE></BLOCKQUOTE>

Ecce enim tu, domine, rex meus et deus meus, tibi serviat quidquid utile puer didici, tibi serviat quod loquor et scribo et lego et numero quoniam cum vana discerem, tu disciplinam dabas mihi et in eis vanis peccata delectationum mearum dimisisti mihi. didici in eis multa verba utilia; sed et in rebus non vanis disci possunt, et ea via tuta est, in qua pueri ambularent.

Ouf! Je suis très essoufflé, pas vous? Je vous laisse la-dessus car je courre donner une conférence sur… la conception de page web! Quelle journée! Quelle semaine! Quelle décennie! Je vous demande d'installer Paint Shop Pro avant le cours de la semaine prochaine, nous allons jouer avec les images!