1. INTRODUCTION

2. STRUCTURE D'UNE PAGE HTML

3. FOND D'UNE PAGE HTML

A. Une Couleur

B. Une Image

4. LE TEXTE

A. Le Type

B. La Couleur

C. La Taille

D. Le Style

5. LES IMAGES

6. LES LIENS

A. Les Targets

B. Les Image-Maps

7. LA MISE EN PAGE

8. LES FRAMES

9. LES TABLEAUX

10. LES META TAGS

11. LES CARACTERES SPECIAUX

12. LES LISTES

13. LES CHEMINS RELATIFS

14. BARRES DE SEPARATION

CONCLUSION

4. LE TEXTE

        Le texte est défini par plusieurs paramètre qui sont : le type de police, le style, la couleur et la taille. Tous ces paramètres sont définis à l'aides d'arguments dans la balise <FONT>. La balise de texte est :

<FONT ARGUMENT="paramètre">Ecrivez ici votre texte</FONT>

        A. Le type de la police

        Le type de la police est très important puisque c'est l'apparence principale du texte. L'argument est : FACE="nom_de_la_police"

Exemple : <FONT FACE="Arial">Bonjour, comment ça va ?</FONT>

        nom_de_la_police : peut prendre le nom de n'importe quelle police. Par contre, il faut penser que celui qui verra la page n'aura pas forcément la même police que celui qui a fait sa page. Il ne faut pas mettre de police de caractère trop rares !!! De plus, certaines polices disponibles sous Windows n'existent pas sur d'autres plateformes, Linux par exemple, et vice-versa. Le lecteur de votre page verra donc le texte avec une police par défaut, ce qui rendra votre pas moins unie, car le texte ne sera pas accordé avec le reste.

Voici quelques polices disponibles sous Windows et Nescape 4 :
 

        B. La Couleur

        La couleur du texte est définie par un argument dans la balise <FONT>. Elle peut prendre n'importe quelle couleur, du moment que le code de la couleur est héxadécimal, avec 6 caractères (cf. Tableau). L'argument de couleur est COLOR="#couleur". Il est à insérer dans la balise <FONT>. La couleur du texte doit être bien en contraste avec la couleur du fond de la page, sous peine de rendre votre page difficile à lire, donc à favoriser la fuite du lecteur ! Il ne faut pas écrire de cette couleur ! Une petite astuce pour lire des textes durs à lire : séléctionnez tout le texte, comme ça, il apparaitra blanc sur fond bleu foncé, donc facile à lire !

Exemple : <FONT COLOR="#FF0000">Texte de couleur rouge</FONT>

        C. La Taille
 
         La taille de la police est elle aussi importante. Elle ne doit pas être trop petite pour que le texte soit lisible, mais elle ne doit pas être trop grosse pour que la lecteur ne soit pas obligé de manoeuvrer l'ascenseur trop souvent. La taille du texte peut être déninie de 2 manières différentes :

            1°) Un argument dans la balise <FONT> qui exprime une taille de la police par rapport à une taille standard. C'est dans ce cas l'argument SIZE="+taille" où taille est un chiffre entre 0 et 10, représentant un agrandissement de la police pas défaut.

Exemple : <FONT SIZE="+3">Texte en gros</FONT>

            2°) Une balise indépendante représentant un accroissement de la taille de la police par défaut. Il faut en fait écrire la balise <BIG> (et bien sûr </BIG à la fin) autant de fois que l'on veut augmenter la taille du texte d'une unité.

Exemple : (l'équivalent de l'exemple précédent) <FONT><BIG><BIG><BIG>Texte en gros</BIG></BIG></BIG></FONT>

    Les 2 méthodes sont équivalentes, elle sont comprises par Netscape et IE sans problèmes.

        D. Le Style

       Le style de la police est par exemple ceci, ou ceci ou encore ceci. Chaque style a sa propre balise qu'il faut ajouter. Il est défini indiféremment de la police elle-même. Vous pouvez bien sûr cumuler les options de style avec tous les autres arguments de la police, voir avec d'autres options de style.

Par exemple : <FONT FACE="Arial" SIZE="+2" COLOR="#000000"><B>Voici un texte en GRAS</B></FONT>

      Voici les 3 styles de police :
 

5. LES IMAGES

        Les images sont des agréments indispensables pour faire une page attractive, car elles mettent de la fantaisie et de l'intéractivité dans la page. Pour inclure une image, il ne faut qu'une balise de début qui comportera une série d'arguments, comme la taille de l'image, l'image source (l'image à afficher).

Script de num4, afficher une image :

        La balise <IMG> permet de déclarer que ce qui est contenu dans cette balise sera une image.

        Les arguments :

            SRC="image" : indique l'image qui sera affichée. image représente n'importe quelle image jpeg ou gif, y compris les gifs animés.

            WIDTH="largeur" : indique la largeur de l'image qui va être affichée. Si vous ne mettez pas cet argument, la largeur de l'image sera la largeur pas défaut de l'image. largeur représente la largeur de l'image en pixels. Pour connaître la largeur de l'image, il faut ouvrir cette image dans n'importe quel navigateur web. Il vous indique ensuite, dans la barre de titre "image largeur x hauteur". Il ne vous reste ensuite plus qu'à recopier le nombre indiqué.

            HEIGHT="hauteur" : indique la hauteur de l'image qui va être affichée. Les mêmes règles que pour la largeur de l'image s'appliquent à la hauteur.

            BORDER="epaisseur" : Si l'image est un lien, indique la largeur de la bordure autour de l'image. Si cet argument est omis, l'épaisseur de la bordure sera de 1 pixel. epaisseur représente un chiffre qui signifie l'épaisseur du bord de l'image. Cet argument ne s'applique QUE si l'image est un lien.

            ALT="message" : indique le message qui apparait à côté du curseur de la souris lorsqu'il ne bouge pas pendant quelques secondes.

6. LES LIENS

        Un lien est très important sur Internet. Il est aussi souvent nommé "link". Créer un lien est très facile, il suffit de mettre la balise <A> avant le début du lien et de mettre </A> à la fin. Il faut ensuite insérer quelques paramètres dans la balise de début <A>, pour indiquer l'action à effectuer lors du clic sur le lien.

Exemples : 1°) <A HREF="http://www.multimania.com/creationsite/">Ceci est un lien vers mon site</A>

                                                                             Ceci est un lien vers mon site

                    2°) <A HREF="mailto:creationsite@multimania.com">Ceci est un lien vers mon email</A>

                                                                             Ceci est un lien vers mon email

                    3°) <A HREF="mailtocreationsite@multimania.com?subject=Bonjour !!!">Ceci est un lien vers mon email avec un sujet déjà tapé</A>

                                                                             Ceci est un lien vers mon email avec un sujet déjà tapé.

        L'argument HREF indique la cible, la page vers laquelle on sera amené en cliquant sur le lien. Pour cela, il suffit de mettre le nom de votre page, en respectant bien les majuscules et les minuscules.

        Si vous voulez créer un lien qui dirige l'internaute vers un nouveau message avec votre E-Mail déjà entré, vous pouvez utiliser la commande mailto: à la place d'une page HTML classique comme dans la 2ème exemple.. Pour que le sujet de mette automatiquement, utilisez la commande ?subject= en plus, comme dans le 3ème exemple.

        Si vous voulez qu'en cliquanst sur ce lien, le lecteur puisse télécharger un fichier, il suffit de mettre le nom de fichier à télécharger comme paramètre de l'argument HREF.

        ATTENTION : SI LA PAGE QUE VOUS SOUHAITEZ FAIRE CONTIENT DES FRAMES, VEUILLEZ LIRE CECI : Cas Particulier

            A. Les Targets

        Si vous voulez créer un lien vers un autre endroit de la page (plus bas par exemple), il faut d'abord créer ce qu'on appelle une "target" (cible). Ensuite, il faut écrire un lien vers cette cible, ce qui fera descendre (ou monter) la page à cet endroit.

Définition de la cible (Target) :

Il faut mettre une balise similaire à la balise de lien <A> et </A> pour la fin. L'argument transmis à cette balise est NAME="nom" où nom est le nom de la balise.

Exemple : <A NAME="Conclusion"></A>

Lien vers cette cible :

Ensuite, il faut faire un lien vers cette balise. Là, c'est la même méthode que pour faire un lien, seulement, le nom de la page sera le nom de la cible, précédé d'une dièse.

Exemple : <A HREF="#Conclusion">Aller à la conclusion</A>

        B. Les Image-Maps

        Faire un image interactive, c'est faire une image qui réagisse différemment suivant la zone au dessus de laquelle le curseur se trouve. C'est quellque chose de possible en HTML : ce sont des image-maps. En fait, il s'agit de différentes zones de l'images définies auxquelles sont associées différentes actions.

        Pour faire une image interactive, il faut d'abord créer ce qu'on appelle une MAP. C'est en fait un squelette qui servira de "délimiteur de zones". L'image ne sera donc pas changée, c'est un "cache" que l'on va appliquer dessus.

        La balise de la map est <MAP></MAP>. Ensuite, il faut mettre une nouvelle balise <AREA> (qui ne possède pas de balise </AREA> ) pour chaque zone à délimiter entre les 2 balises de la map.

Script de num5 :

        Dans la balise <MAP>, l'argument NAME donne un nom à la map qui va être définie après.

        Les balises <AREA> contiennent plusieurs arguments.

                1°) SHAPE="constante" définit la forme que va avoir la zone définie après. constante peut prendre l'un de ces 3 paramètres : RECT, une forme rectangulaire, POLY, une forme polygonale, une forme bizarre, et CIRCLE, une forme circulaire.

                2°) COORDS"X1,Y1,X2,Y2,..,.." donne les coordonnées des points délimitant la zone. Le nombre de paramètres dépends de l'argument SHAPE. Si SHAPE="RECT", alors les points (X1,Y1) et (X2,Y2) sont respectivement le coin haut gauche et le coin bas droit du rectangle, avec X1 et X2 les abcisses et Y1 et Y2 et ordonnées. Si SHAPE="POLY", alors COORDS doit avoir comme paramètre tous les points qui définissent le polygone, avec d'abord les abcisses puis les ordonnées, chaque valeur séparée des autres par une virgule.

                3°) HREF="lien" est le lien vers lequel l'internaute sera amené s'il clique sur la zone. (cf : 6. LES LIENS)

        Ensuite, il suffit d'ajouter un argument dans la balise <IMG>, à l'endroit où vois souhaitez mettre votre image. Cet argument est USEMAP="#nom_map", où nom_map est le nom de la map que vous voulez utiliser pour cette image, encore précedé d'une dièse.

        Il n'est pas très facile de créer des ImageMap manuellement, et c'est pourquoi un programme qui calculerait les coordonnées des points d'un polygone tout seul rendrait la tache beaucoup plus facile. Ce programme existe et est gratuit : map32dst.exe (Taille : 227 Ko)

7. LA MISE EN PAGE

        La mise en page du texte d'une page est très importante, puisqu'elle permet de rendre une page claire, bien structurée, ou non. La mise en page est simple, il suffit de mettre une balise <P> au début d'un paragraphe et </P> à la fin du paragraphe. On peut ensuite ajouter un argument qui alignera le texte à gauche, à droite, ou le centrera. Cet argument est ALIGN="lequel", où lequel est l'un des 3 paramètres suivants : LEFT, alignement à gauche, RIGHT, alignement à droite, ou CENTER, alignement centré.

Exemple : <P ALIGN="CENTER">Voici un texte centré sur la largeur</P>

        On peut aussi, bien sûr, ajouter un saut de ligne. C'est la balise <BR>, qui n'a pas besoin d'une balise de fin.

Exemple : Voici une ligne<BR>Et une autre ligne