Améliorer ses pages

Introduction

Cet exercice vous aidera à améliorer vos pages web. Améliorer le graphique et ainsi l'intérêt du site.

Le but de cet exercice est d'améliorer une page déjà construite pour la rendre plus belle, plus claire et de ce fait intéressante pour le lecteur:
Voici la page de départ... et la page finale.

La mise en forme du texte

Avant de toucher au texte, on peut faire une première remarque sur le titre de la page. Il n'est pas très explicite.
Il faut choisir un titre qui résume rapidement le site comme: html facile, cours sur le html. Les mots clés sont html-facile-cours. Ce site sert donc à apprendre le html facilement.

De plus ici le titre du site est donné à la fin. Résumons donc le site par ce titre est un petite phrase: Cochonsland, le site des cochons d'inde.

<TITLE>Cochonsland, le site des cochons d'inde</TITLE>

Pour améliorer le texte on va se servir des balises de mise en forme (cf. la mise en forme).

Il y a trois étapes dans cette page:

un message de bienvenue avec une légère description du site.

une définition du mot cochon d'inde.

un message invitant à entrer.

On peut déjà séparer ces étapes avec <HR>. J'utiliserai un HR avec une taille assez petite (WIDTH="100") et une grosseur de 1 pixel (size="1").
Pour bien séparer la ligne HR et le texte je la mettrai comme paragraphe.

<HR WIDTH="100" SIZE="1">

Note: Par défaut la ligne HR est centrée au milieu.
Regarder le résultat.

Le texte est plus aéré donc il donne plus envie d'être lu par le visiteur.

Cependant le dernier paragraphe serait mieux centré. Ajoutons donc ALIGN="center" ce qui donne:


Entrer maintenant dans cochonsland


Ainsi le message invitant à entrer et plus visible et le visiteur cliquera, sur ce texte pour entrer, plus facilement. (ici il n'y a pas encore de lien)
Regarder le résultat.

La police d'écran

La police par défaut n'est pas très belle. Pourquoi ne pas changer cette police en Arial ou en Comic Sans Ms ?
Note: Si le visiteurs n'a pas la police que vous avez choisi, il aura la police par défaut.

<BODY>

.....

</BODY>

Ensuite, il est préférable de mettre les mots importants en gras avec  et 
On peut aussi souligner le "Attention:" avec  et  Regarder le résultat.

Après cela on peut mettre le texte du paragraphe 3 en plus grand:

<BODY>

paragraphe1
paragraphe2
 paragraphe1

</BODY>

Regarder le résultat.

Un font pas trop lourd

Vous pouvez mettre un font d'écran d'une couleur unique ou une image. Mais ne mettez pas un font qui empêche la visibilité !

J'ai opté pour un fond uni de couleur bleu très clair.

<BODY GCOLOR="#E6E6FA">

Résultat final. Ca n'a plus grands chose à voir avec le début !

La source finale
<HTML> <HEAD> <TITLE>CochonIsland, le site des cochons d'inde</TITLE> </HEAD> <BODY BGCOLOR="#E6E6FA"> Bienvenue sur mon site. Je suis Michel, le webmaster de ce site. J'espère que ma passion vous plaira. Vous trouverez sur ce site des photos de cochons d'inde, les astuces pour qu'ils soient heureux ainsi que la manière de les éduqués... <HR WIDTH="100" SIZE="1"> Les cochons d'inde sont de petites bêtes, à poil ras ou angora, qui ont quatre pattes ! Ils se nourrissent d'aliments naturels, c'est à dire, d'herbe, de carotte, de salade, ... Attention: ils mangent beaucoup (pour ne pas dire sans arrêt) s'ils ont de la nourriture à porter de bouche. <HR WIDTH="100" SIZE="1"> Entrer maintenant dans CochonIsland </BODY> </HTML>