Syntaxe des principaux tags
pour l'écriture en HTML


Combien de fois, pour un simple guillemet oublié ou pour l'oubli d'un espace, n'ai-je pas recherché durant de longs moments l'erreur qui chamboulait complètement ma page...
J'ai donc pensé qu'il était judicieux de proposer ce qui suit, en annexe de la formation à l'écriture en html.

Voici une page récapitulant la syntaxe des principaux tags pour l'écriture en langage HTML.



       Dans mes explications, j'utiliserai l'expression (Esp) pour signifier un espace.

       J'ai classé les tags en quatre chapitres :
                   *
tags de formatage
                   * tags d'insertion
                   * tags liés à un tableau
                   * tags de frames


       Comment faire pour éditer des pages sur votre serveur ?
C'est ici !



Les tags de formatage

<BR>
Pour revenir à la ligne ou sauter une ligne...
Il est inutile de fermer ce tag !
<U>. . . </U>
Ce qui sera écrit entre les 2 tags sera souligné.
<I>. . . </I>
Ce qui sera écrit entre les 2 tags sera en italique.
<B>. . . </B>
Ce qui sera écrit entre les 2 tags sera en gras.
<SPAN(Esp)STYLE="background:(Esp)(nom de la couleur)">. . . </SPAN>
Ce qui sera écrit entre les 2 tags sera surligné de la couleur indiquée.
<MARQUEE>. . . </MARQUEE>
Ce qui sera écrit entre les 2 tags sera défilera de droite à gauche de l'écran.
<FONT(Esp)COLOR="(couleur)">. . . </FONT>
Ce qui sera écrit entre les 2 tags sera écrit de la couleur indiquée.
<FONT(Esp)SIZE=+(1 ou plus)>. . . </FONT>
ou
<FONT(Esp)SIZE=(1 à 7)>. . . </FONT>
Ce qui sera écrit entre les 2 tags sera plus ou moins gros selon le nombre indiqué.
<H(de 1 à 6)>. . . </H>
Ce qui sera écrit entre les 2 tags sera plus ou moins gros selon le nombre indiqué
A noter qu'une seule grosseur de caractère sera possible par ligne affichée.
<CENTER>. . . </CENTER>
Ce qui sera écrit entre les 2 tags sera centré dans la page ( ou dans la cellule, s'il s'agit d'un tableau ).
<P(Esp)ALIGN=(left ou right)>. . . </P>
Ce qui sera écrit entre les 2 tags sera aligné à gauche ou à droite.
&#160;
Il n'y a pas de tag ici. Il s'agit en effet d'un petit espace ( un "mini-retrait" pouvant être répété à loisir... ).
<UL>. . . </UL>
Ce qui sera écrit entre les 2 tags sera en retrait.
<LI>...</LI>
Il s'agit d'une puce ( carré, cercle, rond... ) marquant un paragraphe.
Le tag /LI n'est pas indispensable, mais c'est plus conforme de le mettre...

retour en haut de la page




Les tags d'insertions

(Esp)BGCOLOR="(couleur)"
Placer cette expression à l'intérieur du tag BODY ( ou du tag TABLE ).
Cette indication définit une couleur de fond de page ( ou de tableau ).
(Esp)BACKGROUND="(chemin d'un fichier)"
Placer cette expression à l'intérieur du tag BODY ( ou du tag TABLE ).
Cette indication permet d'insérer une image en fond de page ( ou de tableau ).
(Esp)BGPROPERTIES=FIXED
Placer cette expression à l'intérieur du tag BODY ( ou du tag TABLE ).
Cette indication permet de fixer l'image de fond quand l'utilsateur monte ou descend l'ascenseur.
<BGSOUND(Esp)SRC="(chemin du fichier son)">
Cette indication permet d'insérer une musique qui jouera à l'ouverture de la page.
(Esp)LOOP=(1 ou plus ou INFINITE)
Placer cette expression à l'intérieur du tag BGSOUND.
Cette indication précise le nombre de répétitions du morceau de musique. Par défaut, le fichier son ne s'exécute qu'une seule fois.
<IMG(Esp)SRC="(chemin du fichier image)">
Il s'agit du tag d'insertion d'une image ( en format gif ou jpg ).
(Esp)ALT="(commentaire)"
Placer cette expression à l'intérieur du tag IMG.
Quand le curseur s'attarde sur l'image, le texte apparaît.
Intéressant : si l'image ne s'ouvre pas, c'est le commentaire qui apparaît.
<A(Esp)HREF="(chemin d'une page html)">. . . </A>
Il s'agit d'un lien vers une autre page du même site.
<A(Esp)HREF="http://(adresse d'un site)">. . . </A>
Il s'agit d'un lien vers l'index d'un autre site.
( Je précise que les sites s'ouvrent en général par leur page nommée : index.html ).
<A(Esp)HREF="mailto:(adresse email)">. . . </A>
Ce lien hypertexte ouvrira un nouveau message sur la messagerie de l'internaute à l'adresse indiquée.
Il suffira, pour l'internaute, d'écrire et d'envoyer son message.
<A(Esp)NAME="(nom de l'ancre)">. . . </A>
Il s'agit d'un repère à un endroit précis de la page, appelé ancre.
Le tag ci-dessous va permettre " d'appeler " cette ancre, c'est à dire que la page va se ré-afficher de façon à ce que cet endroit précis se situe exactement tout en haut de l'écran.
<A(Esp)HREF="#(nom de l'ancre)">. . . </A>
Il s'agit du lien qui va "appeler " une ancre dans la même page ( voir ci-dessus ).
<A(Esp)HREF="(chemin d'une page HTML)#(nom de l'ancre)">. . . </A>
Il s'agit du lien qui va "appeler " une ancre dans une autre page du même site.
<!>
Rien n'apparaîtra sur la page web.
Il s'agit d'un commentaire réservé à la source de la page et qui permet de clarifier cette source en y insérant ainsi des " titres de chapitres ".

retour en haut de la page




Les tags liés à un tableau

<TABLE>. . . </TABLE>
Commande l'ouverture et fermeture d'un tableau.
<TR>. . . </TR>
Commande l'ouverture d'une ligne ( une rangée ) dans un tableau.
<TD>. . . </TD>
Commande l'ouverture d'une cellule dans une rangée.
(Esp)BORDER=(nombre)
Placer cette expression à l'intérieur du tag TABLE.
Permet l'existence d'un quadrillage avec l'indication de son épaisseur.
(Esp)BORDERCOLOR="(couleur)"
Placer cette expression à l'intérieur du tag TABLE.
Indique la couleur du quadrillage.
(Esp)BORDERCOLORLIGHT="(couleur)"
(Esp)BORDERCOLORDARK="(couleur)"
Placer cette expression à l'intérieur du tag TABLE.
Donne un effet d'ombrage à la bordure.
(Esp)CELLPADDING=(nombre)
Placer cette expression à l'intérieur du tag TABLE.
Permet d'insérer une distance entre le bord et le contenu des cellules du tableau.
(Esp)WIDTH=(nombre ou pourcentage)
Placer cette expression à l'intérieur du tag TABLE.
Précise la largeur du tableau.
(Esp)HEIGHT=(nombre ou pourcentage)
Placer cette expression à l'intérieur du tag TABLE.
Précise la hauteur du tableau.
<CAPTION(Esp)VALIGN=TOP>. . . </CAPTION>
A placer immédiatement sous le tag TABLE.
Donne un titre au tableau.
<CAPTION(Esp)VALIGN=BOTTOM>. . . </CAPTION>
A placer immédiatement avant le tag /TABLE.
Donne une légende au tableau.
(Esp)ALIGN=LEFT
(Esp)ALIGN=CENTER
(Esp)ALIGN=RIGHT
A placer dans le tag TD.
Permet l'alignement horizontal dans une une cellule.
(Esp)VALIGN=TOP
(Esp)VALIGN=MIDDLE
(Esp)VALIGN=BOTTOM
A placer dans le tag TD.
Permet l'alignement vertical dans une cellule.
(Esp)COLSPAN=(nombre)
A placer dans le tag TD.
Permet de fusionner un nombre donné de cellules horizontalement.
(Esp)ROWSPAN=(nombre)
A placer dans le tag TD.
Permet de fusionner un nombre donné de cellules verticalement.

retour en haut de la page




Les tags de frames

<FRAMSET(Esp)ROWS="(pourcentage) ,(pourcentage)"> ). . . </FRAMSET>
Remplace le tag BODY.
Cette expression définit deux frames horizontaux et précise leur pourcentage respectif.
<FRAMSET(Esp)COLS="(pourcentage) ,(pourcentage)"> . . . </FRAMSET>
Remplace le tag BODY.
Cette expression définit deux frames verticaux et précise leur pourcentage respectif.
<FRAME(Esp)SRC=" (chemin d'une page html)">
Recherche le fichier de la page qui s'affichera dans ce frame.
(Esp)TARGET="_self"
Placer cette expression à l'intérieur d'un tag A HREF ( lien hypertexte ).
Le lien s'ouvrira dans le même frame que le lien.
(Esp)TARGET="_blank"
Placer cette expression à l'intérieur d'un tag A HREF ( lien hypertexte ).
Le lien s'ouvrira dans une nouvelle fenêtre du navigateur.
(Esp)TARGET="_top"
Placer cette expression à l'intérieur d'un tag A HREF ( lien hypertexte ).
Le lien s'ouvrira dans toute la fenêtre du navigateur, et les frames disparaissent.

retour en haut de la page




éditer
une page ou un dossier
sur le serveur


       * Ouvrir le programme "FTP Explorer".
"FTP" est un logiciel qui permet le transfert de fichiers vers votre serveur ( upload ). C'est un outil très simple d'utilisation que vous pouvez télécharger gratuitement à l'adresse suivante :
http://www.ftpx.com.

       * Cliquer sur "Connecter".

       * Entrer le Nom et le Mot de passe ( que vous aurez choisis ).

       * Placer les deux fenêtres de "FTP" et de l'Explorateur sur l'écran.
             (en dimensions réduites)

       * Glisser les fichiers et les dossiers de l'"Explorateur" vers "FTP".
             (ATTENTION : Vérifier que les carrés bleus de la zone de progression s'affichent bien, sinon, il faut recommencer le "glisser")

       * Toujours vérifier le résultat sur Internet, en ayant soin de rafraîchir ("F5") la page si elle était précédemment chargée.

retour en haut de la page




Si vous n'avez jamais "sauté le pas" d'écrire une page HTML, osez :
Vous vous apercevrez que c'est beaucoup moins compliqué que ça en a l'air, et, qui sait? vous prendrez peut-être goût à créer vous-mêmes votre site personnel...
Et dans ce cas, prévenez-moi car je serai heureux d'insérer un lien vers vous dans le site des Pages de Dadaillou !)

Je ne peux vous souhaitez que d'y prendre autant de plaisir que j'y prends moi-même...