Page précédente
Le B A BA du Html tout à la main
 I ème partie
Page suivante

Note : Dans les exemples que je donne, le source de la page est sur un fond gris (un peu comme quand vous faites view-source avec Netscape) alors que le resultat que cela doit donner est dans un tableau d'une autre couleur (noir en général). A noter pour les curieux qui regarderaient dans les sources des présentes pages html : j'ai été obligé de tricher légerement pour faire croire que j'affichai une page html dans une autre page Html, mais en fait j'utilise des tableaux (voir IIIè partie)

Regles de nommage

    Tout d'abord, une page html peut avoir n'importe quel nom avec le suffixe .html ou .htm. Cette dernière a été mise en place à cause des nom de fichiers sous DOS ou Win3.x qui ont un suffixe de 3 caractères. Personellement, je prefère le .html. Attention dans vos nom de fichier a bien tenir compte des minuscules et majuscules, en effet, si cela n'a pas d'importance quand vous testez chez vous sous Windows ou si votre hebergeur est sous NT, sous Unix les noms de fichiers sont sensibles à la "casse" c'est à dire aux majuscules/minuscules. Une bonne habitude à prendre est de toujours employer des noms de fichiers et de repertoire en minuscule, ça évite les problèmes. De même, évitez les nom de fichier à rallonge du style Ma_home_page_a_moi_tout_seul_personellement.html, c'est plus parlant, peut-être, mais certains serveurs peuvent limiter la longueur des noms de fichier. 10 ou 12 caractères est un maximum. Pour en terminer avec les noms de fichier, tous les caractères spéciaux sont à proscrire sauf l'underscore '_'. Donc, pas d'accents ni d'espace.


Structure générale de la page Html

    Une page Html est composée d'une entète et d'un corp
    L'entète de la page Html à la structure suivante : 
      
<HTML>
<HEAD>
<TITLE> ceci est un titre </TITLE>
<META NAME="...." CONTENT=".....">
</HEAD>
    Le titre est le texte qui apparaitra dans la barre de la fenêtre du browser. Par exemple, dans la présente page, j'ai mis Le B A BA du html tout à la main dans l'entète de la page.
    Le marqueur META permettent de donner certaines informations. Les plus utiles sont certainement des informations qui seront prises par les moteurs de recherches : Une description de la page et des mots-clefs la décrivant : 
      <META NAME="Description" CONTENT="Présentation du Html">
<META NAME="Keywords" CONTENT="HTML, didactitiel, guide, debutant">
    A noter que l'on peut mettre des commentaires dans une pages html. Ces commentaire doivent être compris entre <!-- et --> 
      <!-- Ceci est un commentaire      -->
    Le corps de la page commence par un marqueur BODY qui permet de definir les couleurs implicites de la page ainsi qu'une éventuelle image de fond . La syntaxe générale du tag est la suivante : 
    <BODY BACKGROUND="UrlImageFond" BGCOLOR="couleur" TEXT="couleur" VLINK="couleur" LINK="couleur">
    "UrlImageFond" est l'url d'une image qui servira de fond d'écran à la page. BGCOLOR est la couleur de fond de la page, TEXT, la couleur du texte, LINK, la couleur des liens hypertextes et VLINK la couleurs des liens déjà visités.
    Les couleurs sont indiqués sous la forme #RRGGBB (Rouge/Vert/Bleu) mais la plupart des browser accepte le nom de la couleur. Voir la liste des couleurs disponibles.

    Par exemple si vous tapez quelque-chose du style : 

    <BODY BGCOLOR=CYAN TEXT=GREEN LINK=BLACK VLINK=BLACK>
blablabla, blabalbla , 
bblablabla, 
<a href=toto.html>lien qui ne mène nulle part</a>

    Vous obtiendrez quelque chose comme :

    blablabla, blabalbla , bblablabla, lien qui ne mène nulle part
    (Vous allez avoir un succès d'enfer avec ça :-)))

Affichage de texte

    On tapera le texte "au kilometre", le browser se chargera d'afficher le texte dans la fenêtre. Les "retour chariot" ne sont pas pris en compte comme vous pouvez le remarquer dans l'exemple précedent. Si on veux forcer un retour à la ligne, il faut utiliser le marqueur <BR>

    De même quelques marqueurs permettent de formatter un peu le texte :
    • <DD> permet de faire un retrait sur la première ligne
    • <UL> permet de mettre une marge à gauche jusqu'au prochain </UL>. Il est possible d'emboiter les <UL>
    • <DIV ALIGN="LEFT|CENTER|RIGHT"> permet de definir l'alignement du text à gauche, centré, ou à droite.
    • <LI> Permet de faire des listes


    Exemple : 
    <BODY BGCOLOR=BLACK TEXT=WHITE LINK=RED VLINK=RED>
<DD>Ici, je viens de faire un retrait sur la première ligne 
blablabla, blabla
blablabla, blablablabla
blablabla, blabla
blablabla, blablablabla blablabla, blabla
<UL>
<BR>
Là, je viens de faire une marge à gauche. 
Je remets des bla bla pour que vous le voyiez bien
<BR>
blablabla, blabla
blablabla, blablablabla
blablabla, blablablabla blablabla, blabla
<BR>Une petite liste ?
<LI>Premier bla bla
<LI>Deuxième bla bla
<LI>Et encore un bla bla
</UL>
<DIV ALIGN=CENTER>
Texte centré</DIV>
<DIV ALIGN=RIGHT>
Texte à droite</DIV>
etc...
    Ici, je viens de faire un retrait sur la première ligne blablabla, blabla blablabla, blablablabla blablabla, blabla blablabla, blablablabla blablabla, blabla

      Là, je viens de faire une marge à gauche. Je remets des bla bla pour que vous le voyiez bien
      blablabla, blabla blablabla, blablablabla blablabla, blablablabla blablabla, blabla
      Une petite liste ?
    • Premier bla bla
    • Deuxième bla bla
    • Et encore un bla bla
    Texte centré
    Texte à droite
    etc...


Changement de l'apparence des caractères

    La taille, la police et la couleur du texte sont ceux du browser, événtuellement changé par le marqueur BODY. On peux changer ces caracteristiques grace au marqueur <FONT FACE="Police" SIZE="taille" COLOR="couleur">. "Police" est la police utilisée. Attention aux problème de compatibilité entre les differentes plateformes. Arial par exemple n'est pas présent sur les machines Linux en standard . On peux mettre plusieurs polices à suivre, si le browser ne trouve pas la première, il essayera la suivante, etc.. Ainsi le couple "Arial,Helvetica" fonctionne normalement sur toutes les plateformes. "Taille" est la taille des caractères de 1 à 7 (3 en implicite). "Couleur" indique la couleur du texte.
    Ne pas oublier le mettre un marqueur </FONT> pour indiquer la fin du changement. Si on enchaine les marqueur <FONT ...> sans les fermer, cela fonctionne, mais ce n'est pas très "propre".
    Exemple : 

    <BODY BGCOLOR=BLACK TEXT=WHITE LINK=RED VLINK=RED>
<FONT SIZE=4 FACE="Helvetica,Arial">
blablabla, blabla
blablabla, blablablabla
<BR><FONT SIZE=2 COLOR=GRAY>(Vous avez remarqué, 
j'aime bien les blablabla)</FONT><BR>
blablabla, blabla
blablabla, blablablabla
</FONT>

    Cela donne :

    blablabla, blabla blablabla, blablablabla
    (Vous avez remarqué, j'aime bien les blablabla)
    blablabla, blabla blablabla, blablablabla


    La norme voudrait que tous les caractères spéciaux (accents, etc..) soit écrit sous un forme codée (é -> &eacute;). Dans la pratique, il semblerait que ce ne soit pas indispensable, sauf pour le caractère < et & traduit par &lt; et &amp;. Pour information voici la liste des codes spéciaux. A noter la présence du caractère &nbsp; qui force l'écriture d'un espace non sécable. C'est souvent utile.

    Et pour modifier l'apparence des caractères :
    • <B>....</B> Donne des caractères gras
    • <I>....</I> Donne des caractères en italique
    • <PRE>......</PRE> donne du texte en fonte fixe. Attention, avec ce marqueur, tout est affiché tel quel, même les retours à la ligne.
    • <SUP>....</SUP> Donne des caractères en haut
    • <SUB>....</SUB> Donne des caractères en bas


Dernière modif : 2 Mai 1999 http://philippe.sarcher.org/html/struct.html Philippe Sarcher