Utiliser Delphi 2005 comme éditeur HTML

Commençons par créer un nouveau document HTML, pour ce faire allez dans le menu Nouveau->Autres… puis allez dans Documents Webs -> Page HTML. Delphi va alors présenter une page HTML vide :

Le concepteur est composé de trois parties.

• En haut : l'onglet visualisation dans lequel est dessinée la page au fur et à mesure des modifications.
• En bas : l'onglet zone de code , dans lequel apparait le code de la zone sélectionnée.
• Sur la gauche : l'éditeur de propriétés permet de changer les attributs d'une balise facilement.

Notez aussi l'apparition de nouveaux menus dédiés à la saisie d'éléments HTML.

Pour que la page ne soit pas vide et pour mieux voir le fonctionnement de l'éditeur, ajoutons un tableau dans la page. Pour ce faire, allez dans le menu insérer -> tableau. Un assistant de saisie des propriétés du tableau permet de le créer immédiatement avec les bons paramètres :

Notez qu'avant même la validation des modifications, le nouveau tableau est dessiné à sa place dans l'onglet de visualisation. De même le code correspondant et l'inspecteur d'objets sont mis à jour en fonction des valeurs saisies.

II-B-1. Se déplacer dans la page▲

Pour se déplacer dans la page tout en examinant le code il faut sélectionner l'élément voulu dans la zone de prévisualisation.

Notez l'apparition des carrés de sélections (1 sur l'image) identiques à ceux présents dans l'édition de fiches Delphi.

Le code affiché dans le bas (2 sur l'image) est celui de l'élément sélectionné.

Le code de définition de la balise et de ses attributs reste affiché entre les deux onglets (3 sur l'image). Le code peut être affiché en rouge ou en noir suivant que la balise en question est modifiable ou non. Par exemple si vous vous trouvez sur la balise <tbody> celle-ci sera en rouge.

À droite du code de définition de la balise vous disposez de deux boutons de navigation Zoom Arrière balise et zoom avant balise (en 4 sur l'image). Ces deux boutons permettent de passer à la balise 'parent' ou 'enfant'. Ceci est très pratique dans des tableaux imbriqués pour passer au niveau supérieur ou inférieur. Dans le cas d'une cellule de tableau par exemple, le zoom arrière arrive au niveau <tr>.

II-B-2. Insérer du texte ou un objet▲

Pour insérer du texte ou un autre objet, il faut se positionner dans un élément permettant de le recevoir, comme une cellule de tableau ou un élément de liste.

Si vous cliquez dans la prévisualisation à l'endroit où vous voulez ajouter le texte ou l'objet, le caret clignotant sera affiché (en 1 sur l'image suivante). Il est alors possible de saisir directement les modifications dans la prévisualisation.

Il est bien sûr possible aussi de saisir les modifications directement dans le code.

II-B-3. Modifier les propriétés d'un objet▲

II-B-4. Insérer et modifier une liste▲

Lors de la saisie directe de balises dans le code, il est possible d'avoir la liste des balises possibles. Pour ce faire, tapez le « < » initial et attendez l'ouverture de la liste des balises. Cette liste est filtrée en cours de frappe comme dans le code Pascal :

Une fois l'id de la balise sélectionné ou saisi, il suffit d'ajouter un espace pour séparer les attributs et appuyer sur CTRL-Espace pour afficher la liste des attributs possibles de cette balise :

Dans le cas où la balise requiert une balise fermante, celle-ci est ajoutée automatiquement dès la saisie du > fermant la balise ouvrante.

Un autre assistant que je trouve très utile (pour ceux comme moi qui n'arrivent pas à retenir les caractères spéciaux) est celui d'aide à la saisie d'un code d'échappement. Il faut saisir le & initial et la liste s'affiche :

L'utilitaire Tidy permet de valider les documents HTML en fonction du modèle actif. Pour lancer la validation, il faut aller dans Edition->Html Tidy->Rechercher les erreurs dans le document.

Cette validation va retourner la liste de toutes les erreurs et oublis dans l'onglet « erreurs de visualisation HTML » dans le bas de la fenêtre.
En l'appliquant au petit fichier créé un peu plus haut en exemple :

[Avertissement] index.html(8): <body> proprietary attribute "ms_positioning"
[Avertissement] index.html(9): <table> attribute "bordercolor" has invalid value "darkblue"
[Avertissement] index.html(9): <table> proprietary attribute "bordercolor"
[Avertissement] index.html(9): <table> attribute "bgcolor" has invalid value "lightblue"
[Avertissement] index.html(9): <table> lacks "summary" attribute
[Avertissement] index.html(13): <td> attribute "bordercolor" has invalid value "darkviolet"
[Avertissement] index.html(13): <td> proprietary attribute "bordercolor"
[Avertissement] index.html(13): <td> attribute "bgcolor" has invalid value "lightpink"
[Avertissement] index.html(22): <td> attribute "bordercolor" has invalid value "darkviolet"
[Avertissement] index.html(22): <td> proprietary attribute "bordercolor"
[Avertissement] index.html(22): <td> attribute "bgcolor" has invalid value "lightpink"
[Avertissement] index.html(26): <td> attribute "bordercolor" has invalid value "darkviolet"
[Avertissement] index.html(26): <td> proprietary attribute "bordercolor"
[Avertissement] index.html(26): <td> attribute "bgcolor" has invalid value "lightpink"
[Avertissement] index.html(26): <img> lacks "alt" attribute
[Avertissement] index.html(29): <img> lacks "alt" attribute
[Avertissement] index.html(30): <td> attribute "bordercolor" has invalid value "darkviolet"
[Avertissement] index.html(30): <td> proprietary attribute "bordercolor"
[Avertissement] index.html(30): <td> attribute "bgcolor" has invalid value "lightpink"
[Avertissement] index.html(31): <table> proprietary attribute "bordercolor"
[Avertissement] index.html(31): <table> lacks "summary" attribute

Notez que les erreurs sont données en anglais même dans la version française de Delphi.

L'un des outils est le filtrage des documents Html. Cet outil permet de simplifier le code des pages HTML en regroupant les styles identiques. Il permet aussi de réindenter complèment le code Html pour une lecture plus facile.
Après application du formatage, notre exemple devient :

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
  </head>
  <body ms_positioning="FlowLayout">
    <table bordercolor="darkblue" cellspacing="3" cellpadding="1" width="30%"
    bgcolor="lightblue" border="3">
      <tbody>
        <tr>
          <td style="WIDTH: 65px; HEIGHT: 30px" bordercolor="darkviolet"
          bgcolor="lightpink">
            <ol>
              <li>Un
              </li>
              <li>Deux
              </li>
              <li>YY
              </li>
              <li>Trois
              </li>
            </ol>wxc
          </td>
          <td style="HEIGHT: 30px" bordercolor="darkviolet" bgcolor=
          "lightpink">
            <u>B</u><strong>B</strong><em>B</em>
          </td>
        </tr>
        <tr>
          <td style="WIDTH: 65px" bordercolor="darkviolet" bgcolor=
          "lightpink">
            CCC<img height="42" hspace="0" src="file:///d:/temp/nono.jpg"
            width="40" border="0"> <img src="file:///d:/temp/nono.jpg">É
          </td>
          <td bordercolor="darkviolet" bgcolor="lightpink">
            <table bordercolor="red" cellspacing="0" cellpadding="1" width=
            "100%" align="left" bgcolor="yellow" border="1">
              <tbody>
                <tr>
                  <td>
                    Delphi
                  </td>
                  <td>
                    2005
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Notez que l'indentation n'est pas stricte au niveau XML. Les balises de mise en forme du texte (gras, italique, etc.) ne sont pas prises en compte.

Une simple visite dans les options de HTML-Tidy permet d'apercevoir l'étendue des filtres disponibles.

Dans les options « nouvelles balises », il est possible de définir des comportements pour des balises inconnues. Ce comportement affectera le traitement lors de la mise en forme.

Ici, la balise « toto » sera considérée comme la balise « pre », c'est-à-dire que la mise en forme et la suppression des espaces ne seront pas effectuées dans le contenu.