Les bases du HTML dans Frontier
À propos de cette introduction
À propos de la gestion d'un site Web
Les bases du HTML dans Frontier
D'autres moyens d'automatiser le HTML
Soyez à l'aise avec le mode plan ("Outline")
Inclusions ("includes") et macros
Defines et directives personnalisées
Le HTML généré par Frontier
Examinons à présent le HTML qui a été généré par Frontier et qui a produit ce que montre à présent le fureteur (un peu plus loin, nous verrons plus en détail comment le faire, mais pour l'instant faites-moi confiance). Cela ressemble à ceci :
<html> <head> <title>Bienvenue!</title> <meta name="generator" content="Frontier 5.0 WinNT"> </head> <body alink="#008000" bgcolor="#FFFFFF" link="#0000FF" vlink="#800080"><p> <b> Bienvenue!</b><p> Ceci est mon premier site Web. J'espère que vous l'aimez.<p> <b> Note.</b><p> Ce site Web est en construction. Mais grâce à Frontier, la construction sera facile!<p> </body> </html>(Selon votre version de Frontier et selon certains paramètres enfouis dans la base de données, vous risquez de voir beaucoup plus de HTML en introduction dans la zone du <head> ou après le </body>. Ignorez cela pour l'instant, je vous expliquerai un plus loin comment faire pour contrôler la génération ou non par Frontier de ces balises HTML spécifiques.)
Frontier a généré le code structurels du HTML incluant la balise <body> paramétrée selon notre choix de couleurs. Et c'est très bien, parce c'est une chose que toutes les pages HTML de l'univers connu doivent avoir.
Mais Frontier a aussi inclus les balises <p> avant chaque double retours du chariot, et il a introduit les balises <b> et </b> en se basant sur notre utilisation des triples astérisques. Cela vous permet de vous mettre rapidement au travail, pourtant, ces fonctions ne sont pas vraiment typiques de ce que fait Frontier.
En général, Frontier fait très attention à la façon dont il intervient sur votre HTML. Frontier n'essaie pas de formater le HTML pour vous (comme avec les balises <p> et <b>) sauf dans des situations particulières. Les deux premières lignes du texte original, comportent #autoParagraphs et #clayCompatibility, qui sont responsables du genre de formatage HTML créé ici par Frontier. L'utilisation de ces options est donc une question de préférences personnelles.
Directives
Laissez-moi vous expliquer ces deux lignes. Premièrement, notez qu'elles commencent par "#". Cela devrait vous rappeler les entrées de la table monPremierSite qui commencent par "#". En fait, elles ont le même statut. Ces lignes sont appelées "directives".La plupart du temps, les directives fonctionnent de la même manière, qu'elles soient des entrées de table ou des lignes dans une page Web. Par contre, dans une page Web, l'argument (la valeur de la directive qui suit celle-ci), doit être compris entre guillemets s'il est une chaîne de caractères ("string"). Cela n'est pas nécessaire pour une table parce que dans celle-ci, le fait que ce soit une chaîne de caractères est déterminée par la colonne Kind de cette entrée.
Il y a une hiérarchie de directives simple et puissante. Le niveau supérieur est dans une table que nous n'avons pas encore regardée, user.html.prefs. Ouvrez-la maintenant et jetez-y un coup d'oeil. Ici, aucune des directives ne commence par un "#", mais ce sont quand même bien des directives. La hiérarchie fonctionne de la manière suivante :
Nous avons déjà tiré avantage de la hiérarchie des directives sans nous en rendre compte en rendant notre page default.
- Une directive dans user.html.prefs est appliquée à chaque page Web que vous rendez à partir de n'importe quelle table.
- Une directive dans une table est appliquée à chaque page Web que vous rendez à partir de cette table ou d'une de ses sous-tables.
- Une directive dans une page Web est appliquée uniquement à cette page.
- Si la même directive apparaît à plus d'un endroit, la directive la plus "proche" de la page Web est celle qui sera appliquée. En d'autres termes, une directive dans une page Web annule la même directive dans une table ; une directive dans une table annule la même directive à user.html.prefs.
- Frontier inclura une valeur par défaut pour certaine directives si celles-ci ne sont visibles nulle part. Par exemple, c'est le cas de plusieur directives, qui, si elles n'ont pas une valeur de "false" ("faux"), auront une valeur de "true" ("vrai") comme si elles existaient vraiment à user.html.prefs.
Vous devez vous souvenir que lorsque nous avons rendu websites.samples.randomStuff (la page d'exemple), le #template se chargeait d'ajouter dans le bas de la page toutes sortes d'informations, comme votre nom, votre adresse de courrier électronique ainsi que la date.
À ce moment-là, j'ai dit que toute page existant à l'intérieur de websites devrait utiliser ce #template. Pourtant, websites.monPremierSite.default est indéniablement dans websites mais il n'a pas utilisé #template quand il fut rendu. Pourquoi ?
Parce que dans websites.monPremierSite.default, avec la page default, il y a un #template, et c'est ce template qui a été utilisé en accord avec la quatrième règle énoncée plus haut.
Si on y réfléchit, on commence à réaliser à quel point Frontier est puissant et flexible. Vous pouvez organiser votre site en fonction des éléments qui sont communs entre les pages.
Supposons par exemple que vous désiriez que toutes les pages Web de votre site aient un fond blanc, à l'exception d'une seule page qui devra avoir un fond vert. Vous devrez mettre une directive #bgcolor dans la table de votre site qui définira "white" comme valeur de la couleur blanche, et dans le texte de la page pour laquelle vous désirez un fond vert, vous définirez une directive #bgcolor avec la valeur "green" pour la couleur verte.
Supposons à présent que vous désirez que toutes les pages de votre site Web aient blanc comme couleur de fond, à l'exception de trois pages spéciales qui devront avoir comme fond la couleur verte. Vous définissez donc "white" comme valeur de la directive #bgcolor dans la table de votre site, puis vous mettrez les trois pages ensemble dans une sous-table de votre site avec une directive #bgcolor qui aura pour valeur la couleur "green".
Pour voir cela concrètement, allez à websites.monPremierSite et sélectionnez toute la ligne "default" (en mode sélection et non pas en mode contenu). Copiez-la, et collez- la. Un nouveau texte wp appelé "default copy" sera alors créé. Ouvrez "default copy" pour l'éditer, et, au début du document, ajoutez cette ligne:
#bgcolor "EEEEEE"Ou si vous voulez essayer avec le nom d'une couleur, écrivez (sans guillemets !) :
#bgcolor lightgrey(Ce n'est pas tout à fait la même couleur que «EEEEEE", mais "EEEEEE" n'a pas de nom dans system.verbs.colors.)
À présent, choisissez Preview Page. Le fureteur montre la page avec un fond gris clair. "Default copy" obtient sa couleur de fond de la directive qui y est incluse, annulant les paramètres de la table "monPremierSite", tandis que default obtient sa couleur de fond à partir de la directive de la table "monPremierSite" puisque qu'elle n'est annulée par aucune directive interne à la page.
Vous devriez à présent supprimer "default copy": sélectionnez simplement l'entrée "default copy" dans la table "monPremierSite (en mode sélection) et pressez la touche d'effacement.
Automatiser vos <p> et <b>
À présent, revenez aux directives #autoParagraphs et #clayCompatibility.La directive #autoParagraphs détermine si Frontier doit insérer <p> devant chaque paire de retours-chariot consécutifs qu'il rencontre.
La directive #clayCompatibility (ce nom bizarre provient d'un ancien projet lié à Frontier, appelé "ClayBasket") détermine si Frontier doit entourer avec les balises <b> et </b> chaque ligne qui commence par "***" (tout en supprimant les "***").
En général, j'utilise peu ces options de Frontier. Par conséquent, j'ai mis les valeurs d'autoParagraphs et de clayCompatibility à "false" (sans les guillemets) dans user.html.prefs. Mais parfois, je trouve cela commode, et je les utilise pour une page ou un groupe de pages avec une directive plus localisée, comme celles utilisées dans "default" où les directives sont dans la page.
Essayez cela. Dans votre table user.html.prefs, réglez autoParagraphs et clayCompatibility à false. À présent, allez à monPremierSite.default et enlevez les lignes #autoParagrahs et #clayCompatibility.
Regardez la page dans votre fureteur. Le texte est interprété littéralement comme un unique paragraphe. À présent, insérons notre propre HTML Modifiez monPremierSite.default de la manière suivante :
#title "Bienvenue!" <h2>Bienvenue!</h2> <p>Ceci est mon premier site Web. J'espère que vous l'aimez.</p> <h2>Note.</h2> <p>Ce site est en construction. Mais grâce à Frontier, la construction sera facile!</p>Regardez cela dans votre fureteur.
Notre HTML n'a pas été touché et le formatage est interprété directement par Frontier. Vous pouvez donc directement inclure vos propres balises <p> et </p> ou vous pouvez demander à Frontier d'inclure pour vous les balises <p>. Mais attention, ne combinez pas les deux méthodes ! Si vous faites cela, vous risquez de vous retrouver avec un HTML assez bancal.
La directive title ("titre")
L'autre directive que nous venons de voir à l'[oe]uvre est la directive #title.Frontier utilise cette valeur pour créer la balise <title> pour vous, et cela se voit dans le titre de la fenêtre de votre fureteur lorsque vous prévisualisez la page. La directive #title fonctionne aussi hiérarchiquement, bien que vous ne puissiez pas avoir une entrée "title" dans votre table user.html.prefs (vous le pouvez, mais cela ne fera rien).
D'ailleurs, il serait étonnant que vous désiriez donner le même titre à plusieurs pages Web. Par conséquent l'utilisation courante de #title est à l'intérieur de chaque page Web. Voici un petit truc que j'aime utiliser et qui profite de la nature hiérarchique des directives; dans websites, j'ai mis une directive #title dont la valeur est "Hé ! LE TITRE !!!".
Comme ça, si j'oublie la directive #titre d'une page Web, quand je rends une page, je vois dans la barre de titres de la fenêtre de mon fureteur "Hé ! LE TITRE !!!".
Tout dans la tête - <head>
Certaines directive déterminent ce que Frontier doit mettre dans le block <head> du HTML.Il y a #includeMetaCharset, qui détermine si une balise <meta> doit être incluse indiquant la police de caractère à utiliser.
Je n'ai pas particulièrement envie que ce type d'éléments soit ajouté à mon HTML, par conséquent, à user.html.prefs, j'ai réglé includeMetaCharset à "false" (sans les guillemets). Bien sûr vous pouvez avoir une autre idée là dessus.
Il y a aussi une directive #meta (pour mettre vos propres balises <meta>) et une directive #javascript, mais je ne vous en dit pas plus. Si vous en avez besoin, vous saurez sûrement vous débrouiller pour les utiliser.
Les directives viennent en premier
Juste encore quelques petites choses à propos des directives. Dans une page, pour qu'une directive soit vue par Frontier comme telle, le texte doit commencer par "#" et doit absolument être le premier caractère du paragraphe. Chaque directive doit former à elle seule un paragraphe.Et vous pouvez épargner beaucoup de travail à Frontier (et à vous beaucoup de temps) si toutes vos directives sont placées en premier, en haut de chaque page. Pour faire savoir à Frontier que c'est ce que vous désirez, réglez à "true"la directive #directivesOnlyAtBeginning ("directives seulement au début"). Quand Frontier rendra la page, il cessera de chercher des directives aussitôt que dans un texte wp, il rencontrera un paragraphe qui ne commence pas par "#".
