L'Œil-de-bœuf au clair de brise.
Bertrand Ollé - 20-01-99

e vous propose de soigner un peu l'aspect de vos pages dans le détail en tapant seulement quelques lettres de code. Dans un premier temps, nous parlerons de la ligature française « œ ». Ensuite, nous jouerons avec la mise en page des images.

Imaginons que vous dussiez dessiner un site pour un ensemble choral. Alors, pour écrire joliment « chœur » à la place de « choeur » dans vos pages, voici le truc :

  • éditez le code source de votre page ;
  • insérez dans les premières lignes :
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  • remplacez chaque « oe » par « œ » (pour obtenir ce caractère, copiez-le simplement sur cette page !).

Et voilà. Ça marche aussi pour « Œ » bien entendu. Malheureusement, autant cela est visible avec les systèmes d'exploitation Windows et MacOS, autant ça ne l'est pas avec Linux qui affiche « ? » à la place. Pour ses quelques utilisateurs, il n'y a plus qu'à attendre la création de ces caractères.

Alors pourquoi tous ces ennuis ? Il faut savoir que le caractère (ou diérèse ou ligature, les liguistes ne sont pas tous d'accord) « o et e liés » n'a d'existence pratiquement que dans la langue française, à un tel point de solitude et d'isolement qu'Internet ne le connaît pas. Pas de 

&oelig;
par exemple à l'instar de son cousin « æ » : 
&aelig;

Pour la petite (et triste) histoire, sachez que lors de l'établissement de la norme de caractères disponibles pour Internet, le représentant français était absent, par conséquent notre caractère est passé à la trappe, quand d'autres signes de « bien plus large diffusion » sont représentés :

Ces caractères ne sont pas interprétés de la même façon par MacOS. 

þ (&thorn; - Islande)
¹ (&sup1;)
² (&sup2;)
³ (&sup3;)
pour ne citer que ceux-ci.

Pourtant, notre langue est riche de termes courant utilisant notre ligature : sœur, cœur, vœu, nœud, œuf, œil, bœuf, œuvre, hors-d'œuvre, manœuvre, chœur, œsophage, œdème, œcuménique suffiront pour vous en convaincre.

Notons au passage qu'elle se prononce « é » (cf. les derniers mots de la liste, soit par exemple « ézofage ») à moins d'être suivie d'un « u » comme dans les premiers mots.

Doit-on en déduire que tous les mots de la langue française voyant se suivre « o » et « e » demandent la diérèse ? Que nenni ! Ne prenons qu'un seul contre-exemple d'usage courant : coefficient.

Je vous recommande le site de la norme ISO pour exprimer un quelconque mécontentement.

Autres ligatures connues :
  • ae
    		• a donné æ ;
  • ad (en latin)
    		• a donné @ (arrobace ou at en anglais) ;
  • et
    		• a donné & (et commercial).

     

    Un peu de récréation. Il s'agit de gérer la mise en page des images dans le texte de façon plus souple, plus intuititive et moins lourde en code qu'avec des tableaux.

    Nous allons voir l'utilité des valeurs left, right et all appliquées à <br clear>. Prenons deux images (un logo et un insigne) et un texte (qui contient trois instructions <br> simples) mis bout à bout :

    Exemple n°1

    Logo années 80 Insigne La Maîtrise de la cathédrale Saint-Etienne fut créée en 1936 par l'abbé Georges Rey.
    En 1940, elle accueille Mgr Fernand Maillet et ses Petits Chanteurs à la Croix de Bois dont elle devient une des filiales qui leur sont chères.
    Le drapeau français coiffant l'insigne de la « Mané » toulousaine en est le témoin émouvant.

    Un petit peu de mise en page. A chaque image, appliquons une balise différente : align=left et align=right qui placent respectivement les images en marge gauche et droite de la page. Remarquez le résultat difficile à obtenir avec des tableaux. (On écartera le texte de l'image avec par exemple hspace=5 dans le code de l'image, hors de propos ici.)

    Exemple n°2

    Logo années 80 Insigne La Maîtrise de la cathédrale Saint-Etienne fut créée en 1936 par l'abbé Georges Rey.
    En 1940, elle accueille Mgr Fernand Maillet et ses Petits Chanteurs à la Croix de Bois dont elle devient une des filiales qui leur sont chères.
    Le drapeau français coiffant l'insigne de la « Mané » toulousaine en est le témoin émouvant.

    Voyons l'effet de <br clear=left> sur le premier retour chariot : le texte va être descendu jusqu'à ce que la marge de gauche soit libre, permettant par exemple de légender la seule image de gauche.

    Exemple n°3

    Logo années 80 Insigne La Maîtrise de la cathédrale Saint-Etienne fut créée en 1936 par l'abbé Georges Rey.
    En 1940, elle accueille Mgr Fernand Maillet et ses Petits Chanteurs à la Croix de Bois dont elle devient une des filiales qui leur sont chères.
    Le drapeau français coiffant l'insigne de la « Mané » toulousaine en est le témoin émouvant.

    Exemple n°4

    Maintenant l'effet de <br clear=right> toujours sur le premier retour chariot : le texte va être descendu jusqu'à ce que la marge de droite, cette fois-ci, soit libre.

    Logo années 80 Insigne La Maîtrise de la cathédrale Saint-Etienne fut créée en 1936 par l'abbé Georges Rey.
    En 1940, elle accueille Mgr Fernand Maillet et ses Petits Chanteurs à la Croix de Bois dont elle devient une des filiales qui leur sont chères.
    Le drapeau français coiffant l'insigne de la « Mané » toulousaine en est le témoin émouvant.

    Avec <br clear=all>, les marges gauche et droite sont libérées. Le texte descend en fait au-dessous de la plus grande des deux images à gauche et à droite (ce qui ne change rien comparé à l'exemple précédent).

    Exemple n°5

    Logo années 80 Insigne La Maîtrise de la cathédrale Saint-Etienne fut créée en 1936 par l'abbé Georges Rey.
    En 1940, elle accueille Mgr Fernand Maillet et ses Petits Chanteurs à la Croix de Bois dont elle devient une des filiales qui leur sont chères.
    Le drapeau français coiffant l'insigne de la « Mané » toulousaine en est le témoin émouvant. 

    Avertissement
    Les deux exemples suivants ne présentent d'intérêt que pour les utilisateurs d'Internet Explorer (v. 3). Le logiciel Netscape Navigator (v. 3 et 4) interprète de la même façon <br clear=all> quelque soit le nombre d'images : le texte descend en bas des images.

    De la même façon, l'instruction <marquee> n'est pas interprétée par le deuxième logiciel (il ne fait donc pas défiler le surtitre de ces paragraphes) alors qu'il prend en compte l'instruction <blink> (clignotement).

    Rajoutons une troisième image (une croix) en marge droite. Quand deux images se trouvent en marge droite, <br clear=all> descend au-dessous des deux dernières images placées respectivement dans les marges droite et gauche (dans le code, la petite croix a été placée après le grand insigne).
    Logo années 80 Insigne Croix Potencée

    Exemple n°6

    Logo années 80 Insigne Croix Potencée La Maîtrise de la cathédrale Saint-Etienne fut créée en 1936 par l'abbé Georges Rey.
    En 1940, elle accueille Mgr Fernand Maillet et ses Petits Chanteurs à la Croix de Bois dont elle devient une des filiales qui leur sont chères.
    Le drapeau français coiffant l'insigne de la « Mané » toulousaine en est le témoin émouvant.

    Il faut alors ajouter un deuxième <br clear=all> pour descendre au-dessous des images placées précédemment dans la marge.

    Exemple n°7

    Insigne Croix Potencée Logo années 80 La Maîtrise de la cathédrale Saint-Etienne fut créée en 1936 par l'abbé Georges Rey.

    En 1940, elle accueille Mgr Fernand Maillet et ses Petits Chanteurs à la Croix de Bois dont elle devient une des filiales qui leur sont chères.
    Le drapeau français coiffant l'insigne de la « Mané » toulousaine en est le témoin émouvant.

    Je vous invite à consulter la page souris-dessous pour un exemple de mise en page complexe mais harmonieuse, sans avoir recours aux tableaux.

    Je vous invite également à regarder le code de ces pages pour toute précision. N'hésitez pas à me communiquer toute trouvaille personnelle spectaculaire à l'œil ou tout complément d'information sur chacun des points abordés.

    Bertrand Ollé

    Espace virtuel du nouveau carillonneur
    Présentation des carillons de Toulouse

    Les Petits Chanteurs à la Croix Potencée
    Maîtrise de la cathédrale de Toulouse

    La Blinisserie
    Restaurant et boutique au cœur de Paris


    Vous aussi vous souhaitez rédiger un article
    pour cette rubrique ?
    Pas de problème, elle est ouverte à tous les webmasters qui ont quelque chose à faire partager.
    Merci de nous transmettre, par e-mail, votre article (de 15 à 20 lignes maximum) avec les coordonnées qu'il vous semble nécessaire et une photo si vous le souhaitez.
    Si nous percevons un fort potentiel dans cet article nous réaliserons dans les prochaines semaines une interview spéciale afin de creuser votre sujet.
    Mais n'oubliez pas: de l'information, pas de publicité ;-)