Utiliser le HTML
Bas Votez pour moi La lettre de Abdelaziz Page d'accueil

Balises HTML

Introduction

J'ai appris le HTML (HyperText Markup Language) presque par hasard, en installant HotDog 3.0, un shareware que j'avais trouvé sur un CD-ROM. En fait, le rôle de cette version de HotDog se limitait à traduire en balises HTML les instructions de formatage du texte, d'insertion d'images, de tableaux, l'intérêt étant de voir immédiatement les balises correspondant aux effets appliqués. A force de vouloir savoir quelle balise correspondait à quel formatage, je les ai apprises une par une !

Pour ceux qui ont déjà conçu des fichiers d'aide pour Windows (HLP), il suffit de dire que le HTML est aux pages web ce que le RTF (Rich Text Format) est aux fichiers d'aide, et un navigateur web est équivalent à Winhelp dans ce cas. Ceux qui font entière confiance à des logiciels de traitement de texte (Word par exemple) pour créer leurs fichiers RTF auront alors une confiance aveugle dans les logiciels tels que HotDog ou... Word.

Pour ceux qui ne savent pas ce que c'est qu'une balise, c'est tout simplement un code textuel mis entre les signes < et > pour dire au navigateur qu'il faut changer les attributs (couleur, taille, graisse...) du texte, qu'il faut insérer une image ou un tableau, ou encore ajouter des liens hypertexte qui transformeront la page en document interactif et dynamique. Bref pratiquement tout ce que vous voyez comme formatages, ornements ou liens sur une page web est réalisé grâce à des codes HTML ou balises (tags en anglais).

Pour voir un exemple de balise, affichez simplement le code source de la page web que vous êtes en train de visualiser (Menu Affichage puis Source de la page, ou équivalent) et vous verrez du texte dans des étiquettes entourées de < et >. Ainsi, dans la première ligne, vous verrez <html> et juste après, <head>. Ces deux balises signifient au navigateur web que ce qui va suivre est du code HTML et que la page commence par un en-tête.
En fait, pratiquement tous les formatages doivent avoir une balise de fin de format, sinon le navigateur continue d'appliquer le formatage correspondant. C'est pour cela que vous trouverez un peu plus loin </head> pour signaler la fin de l'en-tête de la page web, mais vous ne trouverez </html> qu'à la fin de la page. Un code est donc arrêté en le reproduisant avec une barre oblique /.
En vérité, le HTML, c'est presque seulement ça et c'est très simple, me direz-vous, je vous répondrai oui. Il est donc tout à fait aberrant et inconcevable de parler de "langage" et encore moins de "programmation en HTML" :-), la seule similarité entre le HTML et les langages informatiques étant la rigueur dans la syntaxe et la patience si vous tapez votre code vous-même. La rigueur est nécessaire parce qu'il faut que le code produit soit compatible avec le maximum de navigateurs web ; en effet, ceux-ci réagiront différemment aux -petites- erreurs de syntaxe que vous vous serez permis dans vos pages.

Est-il maintenant utile d'apprendre les balises HTML ? Là est une question à laquelle les éditeurs de logiciels vous répondront évidemment non. Jugez plutôt : j'avais découvert Microsoft Publisher 97 et j'avais fait mon parti de faire mon premier site web en 1997. Je l'avais commencé sur HotDog (sur lequel je voyais le code HTML, comme je l'ai dit plus haut) et j'ai donc continué sur Publisher qui, à mon grand dam, ne me permettait pas de voir le code source ! C'était uniquement du WYSIWYG (What You See Is What You Get), c'est-à dire que vous voyez le résultat final immédiatement. Pour voir mon code HTML, je devais donc ouvrir mon site web dans un navigateur et à ce moment, afficher le source et je n'aimais pas trop... Et la cerise sur le gâteau, c'est lorsque j'ai découvert que Publisher insérait beaucoup trop de balises, créait des tableaux -invisibles- quand ce n'était pas nécessaire et ainsi de suite. En fait, chaque fois que je tombais sur un éditeur HTML (Microsoft FrontPage, Netscape Composer, Microsoft Word etc.), je trouvais toujours le même problème : les fichiers HTML créés grossissaient à vue d'oeil, alors que je n'avais ajouté que quelques lignes de texte toutes bêtes. J'ai donc décidé de taper complètement mon site web, comme le site actuel d'ailleurs, à la main, sur Notepad, le bon vieux éditeur de texte de Windows, et parfois sur celui du Dos, Edit.exe ! En plus, Publisher -comme tous les éditeurs HTML- insérait sa marque, c'en était trop :-) ! Depuis, je construis mes pages exclusivement sur le Bloc-Notes et je vous encourage à le faire après quelques essais sur les logiciels qui vous mâchent le travail, dont les meilleurs sont ou bien gratuits (freeware) ou payants (shareware). Vous avez également les traitements de texte récents, les tableurs ainsi que les logiciels de P.A.O. qui traduiront vos documents en pages web d'un simple clic.

Ceci pour l'histoire. Si vous voulez donc de tels logiciels, je recommande particulièrement HotDog de Sausage Software, un shareware qui arrivera toujours à m'étonner, et FrontPage de Microsoft dont la version Express est livrée gratuitement avec Internet Explorer 4.0 et Windows 98. Mais la plupart des logiciels n'intègrent pas toutes les fonctionnalités du HTML, essayez par exemple de faire ma page d'accueil avec FrontPage Express !

Bas Votez pour moi La lettre de Abdelaziz Page d'accueil

Introduction

Balises HTML

Je vous propose ici un tour d'horizon des balises HTML avec des descriptions pratiques avec des exemples d'utilisation... pour les instructions qui en valent la peine. En effet quelques balises ne sont pas reconnues par tous les navigateurs web et certaines sont tout à fait inutiles ! Pour les descriptions officielles de toutes les balises, veuillez consulter le site web de l'organisation chargée d'actualiser le HTML, le W3C (World Wide Web Consortium).

De plus, j'ai changé d'approche dans cette nouvelle mouture de cette page. Dans la précédente version, les balises étaient présentées par ordre alphabétique, ce qui n'est pas forcément la meilleure solution pour les apprendre. Cette fois, je présente les balises selon leur ordre d'apparition dans n'importe quelle page web, ou encore selon leur importance.

Enfin, rappelez-vous : les balises s'écrivent indifférement en minuscules ou en majuscules. Et si vous comptez rendre votre code HTML compatible avec le maximum de navigateurs, notamment le très répandu Netscape Navigator, veillez scrupuleusement à respecter l'ordre d'ouverture et de fermeture des balises. En effet, si vous ouvrez une balise <x> puis une balise <y> -qui n'existent pas, il faut refermer la seconde balise avant de refermer la première, comme si vous écriviez des équations mathématiques utilisant les parenthèses, ce qui donne : </y></x>.

Il n'y a plus qu'à vous souhaiter bonne chance. Ecrivez-moi pour plus de renseignements !

<html> ... </html> : Balises globales. Tous les fichiers HTML doivent être commencés par <html> et terminés par </html>. A l'intérieur de ces délimiteurs, deux sous-ensembles forment tout fichier HTML : l'en-tête et le corps.

Les fichiers HTML se présentent comme suit :
<html>
<head>
...
</head>
<body>
...
</body>
</html>

B. Corps | C. Couleurs

A. En-tête des fichiers HTML : <head> ... </head>

L'en-tête des fichiers HTML est mis entre les délimiteurs <head> et </head> ; il peut contenir plusieurs étiquettes, dont une seule est obligatoire :
  1. <title> ... </title>
    2. Cette étiquette obligatoire définit le titre qui va apparaître dans la barre de titre du navigateur web, par exemple le titre de la page que vous consultez en ce moment est : Abdelaziz : Utiliser le HTML. Pour cela, j'ai inclus l'étiquette suivante : <title>Abdelaziz : Utiliser le HTML</title>.
  2. <meta http-equiv | name = ... content = ... >
    3. Les étiquettes meta sont facultatives, elles fournissent des informations supplémentaires qui peuvent être requises par les serveurs HTTP (qui vous relient à l'Internet) et les clients (votre navigateur web). Ces informations couvrent l'identification, l'indexation et le cataloguage du site web par les moteurs de recherche notamment.
    L'étiquette meta est suivie directement par un des paramètres http-equiv ou name, puis par le paramètre content.

    Pour plus d'informations sur les étiquettes meta, veuillez consultez Search Engine Watch. C'est également toujours intéressant de consulter le source des pages que vous trouvez en bonne position dans les moteurs de recherche ;-).

  3. <base href = ... >
    4. L'étiquette base définit l'adresse web de base ou URL pour tous les liens présents sur votre page, elle a un seul paramètre qui est obligatoire : href. Ainsi, si quelqu'un enregistre votre page sur son disque dur, chaque fois qu'il voudra utiliser un lien, le navigateur essaiera de se connecter pour afficher la page Web correspondante. L'intérêt est que l'utilisateur visualise toujours la dernière version des pages. Mais l'étiquette a un autre intérêt pour l'utilisateur : elle lui permet de retrouver l'adresse web au cas où il l'aurait égaré. Exemple : <base href = http://www.mon_serveur.com>.

    Pour les autres étiquettes d'en-tête, veuillez consultez le site web du W3C.
    Un en-tête typique pourrait être de la forme :
    <head>
    <    base href = http://www.mon_serveur.com>
    <    meta http-equiv = "Content-Type" content = "text/html ; charset = ISO-8859-1" >
    <    meta name = "author" content = "Mon_Nom, Mon_Prénom" >
    <    meta name = "description" content = "Mon univers à moi" >
    <    meta name = "keywords" content = "Moi, Univers, Monde, personne" >
    <    title>Mon titre</title>
    </    head>

A. En-tête | C. Couleurs

B. Corps des fichiers HTML : <body ... > ... </body>

Le corps des fichiers HTML contient en fait tout ce qui est visible dans le navigateur : texte, images, liens etc. et il est délimité par <body> et </body>.

2. Titres | 3. Paragraphes | 4. Texte | 5. Fontes | 6. Liens | 7. Tableaux | 8. Images | 9. Images mappées | 10. Listes | 11. Divers
  1. Attributs du corps : <body ... >
    2. L'étiquette initiale a six paramètres, tous facultatifs. Si ces paramètres ne sont pas définis, les paramètres par défaut du navigateur seront utilisés.

    Attention : Si pour une raison ou une autre, le navigateur n'affiche pas l'image d'arrière-plan spécifiée dans background et que bgcolor n'a pas été spécifié, aucun des paramètres text, link, vlink et alink ne sera pris en considération.

    Voici un exemple type de ce que peut être un étiquette body :
    <body background = MesFonds/ArrierePlan.gif text = #FFFFFF link = #0000FF vlink = #00A0FF >

    1. Corps | 3. Paragraphes | 4. Texte | 5. Fontes | 6. Liens | 7. Tableaux | 8. Images | 9. Images mappées | 10. Listes | 11. Divers
  2. Attributs de titre : <Hn [ align = left | center | right | justify] > ... </Hn>
    3. Ce sont des styles prédéfinis de titres avec retour à la ligne. n prend une valeur de 1 à 6, la valeur 1 donnant le titre le plus élevé dans la hiérarchie. Exemple :
    <H1>Titre 1</H1>
    <    H2>Titre 2</H2> donne :

    Titre 1

    Titre 2

    Le paramètre align est facultatif et prend une des quatre valeurs left, center, right ou justify pour aligner le titre respectivement à gauche, au centre, à droite ou pour le justifier sur les deux marges. La valeur par défaut est left.
    Exemple : <H6 align = center>H6 au centre</H6> donne :
    H6 au centre
    1. Corps | 2. Titres | 4. Texte | 5. Fontes | 6. Liens | 7. Tableaux | 8. Images | 9. Images mappées | 10. Listes | 11. Divers

  3. Attributs de paragraphe

    1. <p [ align = left | center | right | justify] > ... </p>

      Introduit un nouveau paragraphe avec saut de ligne, mais à condition que du texte suive la balise. En effet si on tape deux balises <p> à la suite, le navigateur ne va prendre en compte qu'un seul saut de paragraphe. Exemple : <p>Nouveau paragraphe</p> donne

      Nouveau paragraphe.

      Remarques :

      1. Le paramètre align est semblable à celui de <Hn>.
      2. Pour séparer deux paragraphes par un saut supérieur au saut engendré par <p>, il y a deux solutions : soit introduire plusieurs sauts <br> soit insérer plusieurs balises <p>, chacune d'entre elles étant suivie par l'espace obligatoire &nbsp; comme ceci :
        <p>&nbsp;
        <        p>Nouveau paragraphe après deux sauts de paragraphe.

        Ce qui donne :

         

        Nouveau paragraphe après deux sauts de paragraphe.

      3. Si on fait suivre un paragraphe par un autre, il est facultatif de clore le premier paragraphe par </p>.
    2. <br>
      3. Introduit un saut de ligne, sachant que les sauts de ligne tapés au clavier seront ignorés par votre navigateur, sauf à l'intérieur d'un texte préformaté. Il suffit d'insérer <br> pour obtenir
      un saut de ligne.
    3. <nobr> ... </nobr>
      4. Empêche le navigateur d'introduire des sauts de ligne quand le texte entre les deux balises est plus large que la fenêtre. A utiliser avec précaution !
    4. <center> ... </center>
      5. Centre le texte délimité après un saut de ligne. <center>Texte centré avec retour à la ligne</center> donne
      Texte centré avec retour à la ligne.

    1. Corps | 2. Titres | 3. Paragraphes | 5. Fontes | 6. Liens | 7. Tableaux | 8. Images | 9. Images mappées | 10. Listes | 11. Divers
  4. Attributs de texte
    5. Il faut se rappeler qu'à part dans du texte préformaté, les espaces multiples sont considérés par défaut comme une seule espace sauf si on utilise les espaces obligatoires &nbsp;.
    1. <b> ... </b>
      2. Met le texte entre les balises en gras : <b>Texte en gras</b> donne Texte en gras.
    2. <i> ... </i>
      3. Met le texte entre les balises en italique : <i>Texte en italique</i> donne Texte en italique.
    3. <u> ... </u>
      4. Souligne le texte entre les balises : <u>Texte souligné</u> donne Texte souligné.
    4. <s> ... </s>
      5. Barre le texte entre les balises : <s>Texte barré</s> donne Texte barré.
    5. <sup> ... </sup>
      6. Met le texte entre les balises en exposant : <sup>Exposant</sup> donne Exposant.
    6. <sub> ... </sub>
      7. Met le texte entre les balises en indice : <sub>Indice</sub> donne Indice.
    7. <pre> ... </pre>
      8. Affiche le texte entre les balises en caractères préformatés dans un nouveau paragraphe. C'est-à dire que les sauts de ligne tapés au clavier dans le code HTML ainsi que les espaces multiples sont pris en considération et que les caractères affichés sont à chasse (largeur) fixe : <pre>Texte préformaté avec
      saut de ligne tapé au clavier et espaces       mult i p l e s.</pre> donne 
      Texte préformaté avec
un saut de ligne tapé au clavier et espaces       mult i p l e s.
    1. Corps | 2. Titres | 3. Paragraphes | 4. Texte | 6. Liens | 7. Tableaux | 8. Images | 9. Images mappées | 10. Listes | 11. Divers
  5. Attributs de fonte : <font ... > ... </font>
    6. Cette balise a trois paramètres facultatifs appliqués au texte délimité :
    • face
      • Ce paramètre définit la police du texte et accepte plusieurs valeurs. Ces valeurs doivent être des noms conventionnels de polices et non des noms de fichiers de police. Si la première valeur est invalide (police non installée sur la machine client par exemple), le navigateur va utiliser la valeur suivante. Si aucune valeur n'est valide, le navigateur affichera le texte selon ses paramètres par défaut. Exemple : <font face = Arial,Times>Texte de fonte Arial ou Times</font> donne Texte de fonte Arial ou Times.
    • size
      • Ce paramètre définit la taille relative ou absolue du texte. La valeur est un nombre représentant la taille. Pour indiquer une taille relative par rapport à la taille du texte qui était définie avant cette étiquette, il faut ajouter un signe + ou - avant la valeur. Exemple : <font size = 2>Taille 2, <font size = +1>Taille +1, <font size = -2>Taille -2</font></font></font> donne Taille 2, Taille +1, Taille -2.
    • color
      • Ce paramètre définit la couleur du texte, la valeur doit être donnée en couleurs. Exemple : <font color = #0000FF>Texte en bleu</font> donne Texte en bleu.

    Remarque : Ces trois paramètres peuvent être évidemment combinés entre eux. Exemple : <font face = Arial,Times color = #0000FF>Texte de fonte Arial ou Times en bleu</font> donne Texte de fonte Arial ou Times en bleu.

    1. Corps | 2. Titres | 3. Paragraphes | 4. Texte | 5. Fontes | 7. Tableaux | 8. Images | 9. Images mappées | 10. Listes | 11. Divers
  6. Liens hypertextuels : <a ... > ... </a>
    7. La balise <a> est à la base du concept d'hyperlien. Elle permet de définir du texte comme un lien hypertexte mais aussi la destination de ce lien. Elle possède plusieurs paramètres mais je vous en propose seulement trois, parmi lesquels il est obligatoire de spécifier href ou name.

    • href
      • Ce paramètre définit du texte comme un lien hypertexte. Quand l'utilisateur clique sur ce lien, il peut accéder à l'adresse spécifiée dans la valeur de href. Cette adresse peut être une partie de la même page web, une autre page web sur la même machine ou encore une autre machine d'un réseau informatique.

      Le principe d'attribution d'une valeur à href repose sur le concept d'URL (Uniform Resource Locator) : c'est une adresse composée de plusieurs éléments.

      1. Protocole
        2. C'est le type de machine ou de réseau sur lequel se trouve la destination du lien hypertexte. Les protocoles les plus courants sont http:// et ftp://.
        On n'utilise en général le protocole dans href que si la destination du lien utilise un protocole ou une machine différents. On parle alors de chemin absolu.
      2. Hôte
        3.  C'est le nom de la machine sur lequel se trouve la destination du lien hypertexte. Tout hôte a une extension, dont la plus courante est .com.
        On n'utilise en général l'hôte dans href que si la destination du lien se trouve sur une machine différente. De toute manière, l'utilisation de l'hôte implique celle du protocole. Il s'agit dans ce cas d'un chemin absolu.
      3. Chemin
        4. Le chemin désigne toujours l'arborescence (absolue ou relative) dans la machine nécessaire pour trouver la destination du lien hypertexte.
        Quand on veut accéder à des pages web sur la même machine, on a souvent besoin de descendre ou de remonter dans l'arborescence. On n'utilise dans ce cas ni protocole ni hôte et on parle de chemin relatif.
        Pour descendre dans l'arborescence, il faut utiliser après chaque répertoire le signe /. Pour remonter dans l'arborescence, il faut utiliser le signe ../.
        Le chemin doit être écrit exactement comme il est défini sur la machine hôte. Si le chemin comporte des lettres en majuscules, il ne faut pas les écrire en minuscules.
      4. Fichier
        5.  C'est la destination du lien hypertexte. Les fichiers doivent être écrits exactement comme ils sont définis sur la machine hôte. Si le nom du fichier comporte des lettres en majuscules, il ne faut pas les écrire en minuscules.
      5. Cible
        6. C'est un emplacement spécifique dans le         fichier destination du lien hypertexte. La cible est la dernière partie d'un URL, elle est précédée du signe #. Elle est définie dans le fichier destination en utilisant le paramètre name.

      Exemples :

      1. http://www.mon_serveur.com/Archives1999/Archives_Mars.htm#Infos est un URL dont le protocole est http://, l'hôte est mon_serveur.com, le chemin est /Archives1999/, le fichier est Archives_Mars.htm et la cible est #Infos. Quand le protocole et l'hôte sont présents dans l'URL, on parle d'URL absolu car l'adresse est complète et que toutes ses parties sont indiquées.

      2. ../Archives1998/Archives_Janvier.htm est un URL dont le chemin est ../Archives1998/ et le fichier est Archives_Janvier.htm. C'est pour indiquer au navigateur une page web (Archives_Janvier.htm) se trouvant dans un répertoire (Archives1998) se trouvant dans un même niveau hiérarchique que le répertoire (Archives1999) contenant la page actuelle (Archives_Mars.htm). On parle d'URL relatif car l'adresse est incomplète et que seules les parties différentes des parties de l'adresse actuelle sont indiquées.

      Ainsi <a href = index.html >Ma page d'accueil</a> donne Ma page d'accueil.

      Autres types de liens :

      • mailto: ...
        • Ce lien permet d'ouvrir le logiciel de composition de messages électroniques pour envoyer un message. En plus des adresses de courrier électronique A (To), Copie Conforme (Carbon Copy ou CC) et Copie Conforme Invisible (Blind Carbon Copy ou BCC), on peut aussi spécifier plusieurs éléments du message, notamment son Objet (Subject) et son Corps (Body) grâce aux signes ? pour le premier élément et & pour les suivants.

        Ainsi <a href = "mailto:abdelaziz.bennouna@techno.net.ma?subject=Votre Objet&cc = adresse@aucun.com&body = Le corps de votre message">Ecrivez-moi !</a> donne Ecrivez-moi !.

      • Liens de téléchargements
        • Pour télécharger un fichier au lieu de l'ouvrir avec le navigateur web, il faut en général utiliser le protocole ftp:// (File Transfer Protocol). Mais si le fichier est un exécutable (extension .exe) ou une archive zip (extension .zip), on peut utiliser le protocole http://. Dans tous les cas, si un serveur ftp est disponible, il est recommandé d'utiliser le protocole ftp:// pour tous les liens de téléchargements.

        Exemples :

        1. <a href = ftp://ftp.mon_serveur.com/Archives/Exemple.doc>Télécharger le document exemple</a> permet de télécharger un document Word.
        2. <a href = http://www.mon_serveur.com/Archives/Exemple.zip>Télécharger l'archive exemple</a> permet de télécharger une archive zip.
      • Liens avancés JavaScript
        • On peut indiquer comme destination d'un lien hypertexte non pas un fichier, mais un script écrit en JavaScript par exemple, ou un programme, généralement léger, appelé appelette (applet en anglais) et écrit en Java par exemple. Cependant, pas tous les navigateurs savent exécuter ces appelettes. Pour plus d'informations sur JavaScript et EmmaScript, veuillez consulter l'excellent site de Dominique Liard.
    • name
      • Ce paramètre définit la cible d'un lien hypertexte à l'intérieur du fichier destination de ce lien. Ainsi <a name = Cible>Ceci est une cible</a> permet d'utiliser #Cible dans le paramètre href d'une étiquette <a>, comme ceci : <a href = FichierCible.htm#Cible>Aller à la cible</a>.

      Remarque : On peut combiner les deux paramètres précédents dans une seule étiquette si on veut définir en même temps un lien et une cible. Ainsi <a name = Cible1></a><a href = #Cible2>Cible 1, cliquez pour allez à la cible 2</a> équivaut à <a href = #Cible2 name = Cible1>Cible 1, cliquez pour allez à la cible 2</a>.

    • target
      • Ce paramètre permet de spécifier la fenêtre ou le cadre dans lesquels le navigateur web ouvrira la destination du lien hypertexte. Par exemple, <a href = index.html target = newwin>Ma page d'accueil dans une nouvelle fenêtre</a> donne Ma page d'accueil dans une nouvelle fenêtre. Au lieu de newwin, vous pouvez spécifier le nom de la fenêtre ou du cadre. Pour plus d'informations, veuillez consultez le site web du W3C.

    1. Corps | 2. Titres | 3. Paragraphes | 4. Texte | 5. Fontes | 6. Liens | 8. Images | 9. Images mappées | 10. Listes | 11. Divers
  7. Tableaux : <table ... > ... </table>
    8. Un tableau type se présente comme suit :
    <table ... >
    <    caption ... > ... </caption>
    <    tr ... >
    <    th ... > ... </th>
    <    td ... > ... </td>
    </    tr>
    <    tr ... >
    <    td ... > ... </td>
    <    td ... > ... </td>
    </    tr>
    </    table>
    1. Attributs de tableau : <table ... >

      2. L'étiquette <table> permet d'insérer des tableaux dans les pages web. Elle a cinq paramètres, tous facultatifs.

      • bgcolor
        • Ce paramètre définit la couleur du fond du tableau, la valeur doit être donnée en couleurs. Exemple : bgcolor = #FFFF00 pour un arrière-plan jaune. La couleur peut être changée ultérieurement.
      • border
        • Ce paramètre définit l'épaisseur de la bordure du tableau, la valeur est un nombre (en points) qui peut être nul pour un tableau sans bordure. Exemple : border = 1 pour la bordure la plus fine possible. La valeur par défaut est 0.
      • width
        • Ce paramètre définit la largeur du tableau, la valeur est un nombre en points ou en pourcentage. Exemple : width = 50% pour un tableau de largeur égale à la moitié de celle de la fenêtre du navigateur. Par défaut, la largeur du tableau est celle qui est strictement nécessaire à l'affichage des données.
      • cellspacing
        • Ce paramètre définit la distance séparant les cellules du tableau, la valeur est un nombre. Exemple : cellspacing = 3. Par défaut, la distance séparant les cellules du tableau est égale à 2 points.
      • cellpadding
        • Ce paramètre définit la distance séparant le contenu des cellules de leur bordure, la valeur est un nombre. Exemple : cellpadding = 2. Par défaut, cette distance est égale à 1 point.
    2. Légende : <caption [ align = top | bottom ] >

      3. Insère une légende en bas ou en haut du tableau selon la valeur du paramètre align qui est facultatif. La valeur par défaut est top. La légende est centrée horizontalement par rapport au tableau.

    3. Lignes : <tr [align=left|center|right] [valign=top|middle|bottom|baseline] [bgcolor=...] >

      4. Ajoute une ligne au tableau. Elle accepte trois paramètres facultatifs qui s'appliquent à toute la ligne sauf indication contraire dans les cellules. La valeur baseline peut être donnée au paramètre valign pour que les contenus des cellules (texte, images etc.) soient alignés verticalement par le bas sur une même ligne de base. Les valeurs par défaut sont left et middle.

    4. Cellules d'en-tête : <th [align=left|center|right] [valign=top|middle|bottom|baseline] [colspan=...] [rowspan=...] [nowrap] [bgcolor=...] [width=...] [height=...]>

      5. Ajoute une cellule d'en-tête dont le contenu sera affichée en gras (si c'est du texte) et au centre par défaut. En général, les cellules d'en-tête apparaissent dans la première colonne et la première ligne. L'étiquette <th> accepte huit paramètres tous facultatifs.

      • colspan
        • Ce paramètre sert à fusionner des cellules dans le sens de la largeur, sur deux colonnes ou plus. La valeur est un nombre normalement supérieur à 1 qui est la valeur par défaut. Mais il faut que le tableau comporte suffisamment de colonnes pour effectuer la fusion des cellules.
      • rowspan
        • Ce paramètre sert à fusionner des cellules dans le sens de la hauteur, sur deux lignes ou plus. La valeur est un nombre normalement supérieur à 1 qui est la valeur par défaut. Mais il faut que le tableau comporte suffisamment de lignes pour effectuer la fusion des cellules.
      • nowrap
        • Ce paramètre empêche le contenu des cellules d'être affiché sur plus d'une ligne. La largeur de la cellule s'adaptera ainsi à son contenu même si la largeur du tableau dépasse celle de la page. A utiliser avec précaution !
    5. Cellules : <td [align=left|center|right] [valign=top|middle|bottom|baseline] [colspan=...] [rowspan=...] [nowrap] [bgcolor=...] [width=...] [height=...]>

      6. Ajoute une cellule normale. Les paramètres sont le mêmes que pour les cellules d'en-tête.

    Voici un exemple de tableau :
    <table bgcolor=#FFFF00 border=3 width=90%>
    <    caption>Légende de mon tableau</caption>
    <    tr>
    <    th colspan = 2>Cellule d'en-tête fusionnée</th>
    <    td>Cellule de la première colonne et première ligne</td>
    </    tr>
    <    tr valign = bottom>
    <    td height = 50>Cellule (et donc ligne) de hauteur égale à <b>50</b> points</td>
    <    td align = center>Cellule centrée</td>
    <    td align = right>Cellule alignée à droite</td>
    </    tr>
    </    table>

    Ce qui donne :
    Légende de mon tableau
    Cellule d'en-tête fusionnée Cellule de la deuxième colonne et première ligne
    Cellule (et donc ligne) de hauteur égale à 50 points Cellule centrée Cellule alignée à droite

    Remarque : Dans Netscape Navigator, les attributs de police du texte contenu dans les cellules d'un tableau sont définis par défaut. Il faut donc redéfinir ces attributs, s'ils sont différents des réglages par défaut, dans chaque cellule contenant du texte au moyen de la balise <font ... >.

    1. Corps | 2. Titres | 3. Paragraphes | 4. Texte | 5. Fontes | 6. Liens | 7. Tableaux | 9. Images mappées | 10. Listes | 11. Divers
  8. Images : <img ... >
    9. Cette balise permet l'insertion d'images dans les pages web et accepte un nomre impressionnant d'attributs, dont la plupart sont très utiles et un seul est obligatoire.
    • src
      • Ce paramètre obligatoire indique le chemin de l'image qui répond aux règles de définition des liens.
      Les navigateurs web sont en général compatibles avec deux formats d'images uniquement : GIF et JPEG.

      1. GIF : Graphics Interchange Format, de CompuServe. Ce format est d'extension .gif et est idéal pour des images comportant un nombre réduit de couleurs (jusqu'à 256), notamment celles créées sur un logiciel graphique, et est le seul à accepter les images animées et les images entrelacées. Le navigateur web affiche ces dernières floues au départ, puis après avoir chargé la page web en entier, les redessine complètement.

      2. JPEG : Joint Photographic Experts Group. Ce format est d'extension .jpg et est idéal pour des images comportant un nombre élevé de nuances continues (jusqu'à 16,7 millions), notamment les photographies.
    • lowsrc
      • Ce paramètre permet d'afficher une image préliminaire de résolution moins élevée que celle indiquée dans le paramètre src. Ce paramètre accepte lui aussi les deux formats d'images GIF et JPEG. Après avoir affiché toute la page web, le navigateur affichera l'image indiquée dans src.
    • width
      • Ce paramètre permet de choisir la largeur d'affichage de l'image. Si celle-ci est différente de la largeur réelle, le navigateur redimensionnera l'image pour l'adapter. La valeur du paramètre est un nombre en points, et la valeur par défaut est la largeur réelle de l'image.
    • height
      • Ce paramètre permet de choisir la hauteur d'affichage de l'image. Si celle-ci est différente de la hauteur réelle, le navigateur redimensionnera l'image pour l'adapter. La valeur du paramètre est un nombre en points, et la valeur par défaut est la hauteur réelle de l'image.

      Remarque : Il est important de définir la largeur et la hauteur de l'image même si celles-ci sont égales aux valeurs par défaut. De cette façon, le navigateur ne sera pas obligé de demander les dimensions de l'image au serveur qui l'héberge, et l'affichage se fera plus rapidement.

    • alt
      • Ce paramètre permet d'afficher un texte alternatif à l'image. La valeur est une chaîne de caractères. Si l'affichage automatique des images est désactivé dans le navigateur web (liaison à faible débit par exemple) ou si le navigateur n'est pas prévu pour les afficher (ancienne machine par exemple), il est utile de définir ce paramètre pour que l'utilisateur sache malgré tout ce que veut dire l'image en question.
    • border
      • Ce paramètre permet de définir l'épaisseur de la bordure entourant l'image. La valeur est un nombre en points. La bordure réagit comme du texte, c'est-à dire que la couleur par défaut est la couleur du texte définie dans la balise <body ... >, et qu'elle est celle des liens si l'image est un lien. La valeur par défaut est 0 sauf quand l'image est un lien, la valeur est alors de 1.
    • hspace
      • Ce paramètre permet de définir la distance horizontale séparant l'image du texte situé à sa droite et à sa gauche. La valeur est un nombre en points et la valeur par défaut est 0.
    • vspace
      • Ce paramètre permet de définir la distance verticale séparant l'image du texte situé au-dessus et au-dessous d'elle. La valeur est un nombre en points et la valeur par défaut est 0.
    • align = left | right | top | texttop | middle | absmiddle | baseline | bottom | absbottom
      • Ce paramètre permet d'aligner les images de toutes les façons imaginables.
      • left
        • Aligne l'image dans la marge gauche de la page et affiche le texte à sa droite sur autant de lignes que nécessaire, à la manière d'une image flottante.
      • right
        • Aligne l'image dans la marge droite de la page et affiche le texte à sa gauche sur autant de lignes que nécessaire, à la manière d'une image flottante.
      • top
        • Aligne la bordure supérieure de l'image avec celle du plus haut élément (texte ou autre) de la ligne.
      • texttop
        • Aligne la bordure supérieure de l'image avec celle du plus haut élément textuel de la ligne.
      • middle
        • Aligne le milieu de l'image avec la base de la ligne.
      • absmiddle
        • Aligne le milieu de l'image avec le milieu de la ligne.
      • baseline
        • Aligne la bordure inférieure de l'image avec le milieu de la ligne.
      • bottom
        • Aligne la bordure inférieure de l'image avec la base de la ligne.
      • absbottom
        • Aligne la bordure inférieure de l'image avec celle de la ligne.
    • name
      • Ce paramètre définit un nom unique pour l'image pouvant être utilisé dans un script.
    • ismap
      • Ce paramètre identifie l'image comme étant une image mappée, c'est-à dire contenant plusieurs zones hypertexte dirigeant chacune vers un lien différent. En parallèle, il faut définir le mappage de l'image grâce à la balise <map> ou un script CGI (Common Gateway Interface).
      Dans le cas où la définition du mappage se fait par la balise <map>, il faut utiliser également le paramètre :
    • usemap = ...
      • Spécifie le nom du mappage de l'image.
    Exemple :
    <a href=/><img src=Miscellaneous/Geocities.gif width=88 height=31 hspace=5 vspace=5 alt="Geocities" ></a>
    donne Geocities

    1. Corps | 2. Titres | 3. Paragraphes | 4. Texte | 5. Fontes | 6. Liens | 7. Tableaux | 8. Images | 10. Listes | 11. Divers
  9. Images mappées : <map>
    10. Cette technique permet d'affecter chaque zone d'une image à un lien particulier. Le mappage est défini de la façon suivante :
    <map name = ...>
    <    area ... >
    <    area ... >
    </    map>
    1. name
      2. Définit le nom du mappage tel qu'il sera utilisé dans l'attribut usemap de la balise <img>.

    2. Attributs de zone : <area ... >

      • shape = rect | circle | poly

        Ce paramètre permet de définir la forme de la zone qui sera associée à un lien, rectangulaire, circulaire ou polygonale. De ce paramètre dépend la règle de définition des coordonnées. La valeur par défaut est rect, mais il faut que les coordonnées définissent vraiment un rectangle, sinon Netscape Navigator par exemple ne prendra pas en compte la zone.
      • coords = ...
        • Ce paramètre permet de définir les coordonnées de la zone à lier. Il y a trois cas différents.
        1. shape = rect
          2. Dans ce cas, il faut fournir les coordonnées des deux sommets du rectangle opposés diagonalement, en commençant par le sommet le plus à gauche et en donnant l'abcisse en premier. Si on a un rectangle ABCD de sommets A(0,0), B(10,0), C(10,20), D(0,20), il faudra écrire coords="0,0,10,20".
        2. shape = circle
          3. Dans ce cas, il faut fournir les coordonnées du centre puis la valeur du rayon du cercle. Si on a un cercle C de centre O(30,20) et de rayon R=10, il faudra écrire coords="30,20,10".
        3. shape = poly
          4. Dans ce cas, il faut fournir les coordonnées de tous les sommets du polygone, en commençant par le sommet le plus à gauche et en donnant les abcisses en premier, il faut redonner les coordonnées du premier sommet après avoir terminé de donner celles de tous les autres. Si on a un triangle ABC de sommets A(0,0), B(10,30), C(5,20), il faudra écrire coords="0,0,10,30,5,20,0,0".
      • href = ...
        • Ce paramètre permet de définir le lien destination de la zone, il répond aux règles de définition des liens.

    Exemple :
    <map name=MappedImg>
    <    area coords="0,0,10,20" href=RectLink.htm >
    <    area shape=circle coords="50,20,10" href=CircleLink.htm >
    </    map>
    <    img src=Image.gif border=0 width=100 height=100 ismap usemap=#MappedImg>

    1. Corps | 2. Titres | 3. Paragraphes | 4. Texte | 5. Fontes | 6. Liens | 7. Tableaux | 8. Images | 9. Images mappées | 11. Divers
  10. Listes : <ol> et <ul>
    11. Les listes permettent de présenter des informations avec une marge à gauche automatique et une numérotation (<ol>) ou des puces (<ul>).
    • type
      • Cet attribut facultatif est valable pour les listes numérotées et à puces. Il permet de définir le type du numéro ou de la puce qui précède chaque élément de liste.
      Les listes numérotées acceptent les types suivants : 1 (valeur par défaut : 1,2,3 etc.), a (a,b,c etc.), A (A,B,C etc.), I (I,II,III etc.) ou i (i,ii,iii etc.). Si on spécifie une lettre autre que a ou A comme valeur, le navigateur attribuera la valeur par défaut à sa place.
      Les listes à puces acceptent les types suivants : disc, circle et square. Si la liste est de premier niveau, la valeur par défaut est disc, et si elle est de troisième niveau ou plus, la valeur par défaut est square.
    • start
      • Disponible uniquement pour les listes numérotées, cet attribut facultatif permet de spécifier le point de départ de la numérotation. La valeur de cet attribut est toujours un nombre, indépendamment de la valeur de l'attribut type. La valeur par défaut est 1.

    Pour ajouter un élément à une liste, il faut l'ajouter après une étiquette <li>.

    Exemple :
    <ol type=i start=3>
    <    li>Premier élément d'une liste numérotée commençant par <b>iii</b>
    <    li>Ceci est une liste à puces en italique :
    <i><ul type=disc>
    <    li>Premier élément d'une liste à puces
    <li>Dernier élément d'une liste à puces
    </ul></i>
    <    li>Dernier élément d'une liste numérotée
    </ol>

    donne :

    1. Premier élément d'une liste numérotée commençant par iii
    2. Ceci est une liste à puces en italique :
      • Premier élément d'une liste à puces
      • Dernier élément d'une liste à puces
    3. Dernier élément d'une liste numérotée

    1. Corps | 2. Titres | 3. Paragraphes | 4. Texte | 5. Fontes | 6. Liens | 7. Tableaux | 8. Images | 9. Images mappées | 10. Listes

  11. Divers

    1. <! -- ... -->

      Permet d'insérer un commentaire que le navigateur web ignorera lors de l'affichage de la page. Les commentaires peuvent être placés même en milieu de ligne.
    2. <hr ... >
      3. Permet d'insérer une ligne horizontale dans la page. Cette balise a quatre paramètres tous facultatifs.
      • size = ...
        • Ce paramètre permet de définir l'épaisseur de la ligne à insérer. La valeur doit être un nombre et la valeur par défaut est 2.
      • width = ...
        • Définit la largeur de la ligne à insérer. La valeur est un pourcentage (préférable) ou un nombre et la valeur par défaut est 100%.
      • align = left | center | right
        • Définit l'alignement de la ligne à insérer. La valeur par défaut est center.
      • noshade
        • Spécifie que la ligne à insérer ne doit pas avoir d'ombre portée.

      Exemple : <hr size=3 width=10% noshade> donne :

    3. &nbsp;
      4. Espace obligatoire, c'est-à dire qu'en en mettant plusieurs d'affilée, le navigateur affiche réellement autant d'espaces contiguës. Voir aussi le texte préformaté.

1. Corps | 2. Titres | 3. Paragraphes | 4. Texte | 5. Fontes | 6. Liens | 7. Tableaux | 8. Images | 9. Images mappées | 10. Listes | 11. Divers

A. En-tête | B. Corps

C. Couleurs

Les couleurs dans les fichiers HTML sont normalement données sous format RGB (Red Green Blue) ou RVB (Rouge Vert Bleu). C'est une chaîne de caractères formée de trois nombres hexadécimaux représentant le "poids" de chaque couleur.

Les nombres hexadécimaux sont une façon pratique de réécrire les nombres usuels. Ainsi les "chiffres" hexadécimaux comprennent les chiffres de 0 à 9, mais aussi les lettres A à F qui valent 10 à 15. Une "dizaine" hexadécimale vaut donc en fait 16, d'où le nom "hexadécimal".

A partir de cette base, les nombres de 0 à 9 valent la même chose que ce soit en décimal ou en hexadécimal. Mais FF vaut 255 en décimal, et c'est la valeur maximale du poids d'une couleur par exemple.
Ainsi les couleurs en hexadécimal varient entre 000000 qui est le noir (absence de toute couleur) et FFFFFF qui est le blanc.

De même, le rouge est FF0000, le vert est 00FF00 et le bleu est 0000FF. Les couleurs complémentaires sont le jaune : FFFF00, le fuchsia : FF00FF et le cyan : 00FFFF.

Au lieu de vous donner la table complète des couleurs usuelles en hexadécimal, je vous invite plutôt à les découvrir vous-même en utilisant par exemple la balise <font> avec le paramètre color. C'est en effet préférable car les couleurs affichées par les navigateurs ne sont pas forcément celles que vous comptiez obtenir (et que vous obtenez dans n'importe quel logiciel graphique).

Finalement, pour les paresseux, sachez que Microsoft Internet Explorer et les versions récentes de Netscape Navigator acceptent le nom de la couleur (en anglais bien sûr :-)) en plus des couleurs en hexadécimal ! Par exemple red vaut FF0000 et on peut écrire <font color=red>. Les noms de couleurs qu'on peut utiliser de cette manière sont théoriquement limités aux seize couleurs de base, mais j'ai remarqué que n'importe quel nom usuel de couleur est accepté.

A. En-tête | B. Corps | C. Couleurs

Pour plus de renseignements ou pour vos suggestions, Ecrivez-moi

Haut Votez pour moi La lettre de Abdelaziz Page d'accueil

Votez pour mon site
Optimisé pour Microsoft Internet Explorer 4.0

Cette page a été mise à jour pour la dernière fois mercredi 24 mars 1999 à 15:00 GMT 1