Une page avec un fond jaune clair, écrite avec BlueGriffon

En regardant le code source de cette page, on peut remarquer qu'il est mieux formaté que celui généré par SeaMonkey.

En regardant le panneau de droite, on trouve beaucoup d'option pour modifier le style CSS de la page, ou de balises.
Le style n'est pas mis directement dans la balise, mais une "id" est ajouté à la balise, puis un style lui est associé en début de fichier.

La mise en forme du code HTML est détruite lors de l'édition WYSIWYG avec BlueGriffon, on ne peut donc pas passer du code HTML à la visualisation WYSIWYG, sans accepter que le code n'ai pas l'allure que l'on désire.

Voici juste un mot qui est différent du reste de la phrase.

Pour changer la couleur d'un mot ou son fond ou une autre caractéristique :
1) Sélectionner le mot.
2) Format > span
3) Dans le panneau de droite, indiquer "Appliquer les styles à :" "cet élément, via ses styles CSS embarqués.
4) Définir le style CSS dans le panneau de droite.

J'essaie d'avoir un paragraphe ayant un fond de couleur différente.

Voici un autre essai, avec un fond différent et une couleur de texte différente.

Je désire maintenant sélectionner uniquement un mot et changer sa taille et sa couleur.
Une fois un mot ayant un style particulier, on peut changer d'autres caractéristiques avec le panneau de styles à droite.

Si on désire mettre tout une phrase dans un <div>, voici comment faire :
1) Insertion > Élément HTML5 > div
2) Taper le texte désirer
3) Le formater avec le panneau de droite de Style CSS.

BlueGriffon est bien, mais c'est TRÈS TRÈS dommage qu'il détruit la mise en forme du code HTML.
Pour moi, c'est inacceptable, donc BlueGriffon n'est que anecdotique et sert à l'apprentissage du codage en HTML.

Dans Outils > Préférences > Sources, on peut indiquer de limiter la largeur du texte source à 70 caractères et insérer automatiquement un retour de ligne si on dépasse cette limite. Malheureusement, cela ne fonctionne pas.

BlueGriffon n'indique pas la position du curseur, dans quel colonne il se trouve. C'est une autre limitation.

ballon3

J'ai inséré une image à gauche. "Alignement vert..: " = "middle", pour que le texte soit au milieu de l'image.
Après un retour de ligne, on se trouve sous l'image.

ballon4

Un texte dans un span
avec un retour de ligne. "Affichage :" = "Bloc dans un flot de texte".

Après un autre retour de ligne.
ballon5

Un texte, avec "Alignement vert ..:." = "top"
"Affichage :" = "Bloc dans un flot de texte"

Voici encore du texte sous les images.
Pour obtenir cette balise <div>, j'ai sélectionné le texte, puis cliqué sur "Corps de texte" en haut à gauche, qui ouvre un menu.
En sélectionnant "Conteneur générique (div)", on obtient cette balise très utile.
On peut ensuite lui donner des styles, tels que couleurs, taille, centrage de texte etc.

Encore du texte, modifié avec les boutons ! et !! de la colonne de gauche.

Suite, essai d'utiliser MathML :

a \cdot x^{2} + b \cdot x + c = \frac{d}{x}

\sum_{i = 1}^{n} i^{3} = {(\frac{n \cdot (n + 1)}{2})}^{2}

lim_{x \to a} f (x) = L \Leftrightarrow \forall ε > 0 \exists δ > 0 \forall x [0 < | x - a | < δ \Rightarrow | f (x) - L | < ε]

(\begin{matrix} a & b \\ c & d \end{matrix}) \cdot (\begin{matrix} e & f \\ g & h \end{matrix}) = (\begin{matrix} i & j \\ k & l \end{matrix})

Pour avoir l'image favicon

à gauche de l'onglet correspondant à cette page, j'ai inséré le code suivant dans l'en-tête du code source :
<link rel="shortcut icon" href="images/faviconOC.png" type="image/icon">

Plan du Site : home

bluegriffon

bluegriffon030_page_fond_jaune_clair.html

Page mise à jour le 24 février 2020 par Bernard Gisin.