J'ai commencé ce site alors que je venais d'apprendre HTML 3.2, autant dire que les pages étaient préhistoriques... Marquage primitif, esthétique minimale, l'essentiel était de donner des informations...
Depuis, j'ai connu le XHTML et j'ai appris des rudiments de CSS. Disons, des notions assez avancées dans certains domaines, mais les CSS offrent tant de possibilités qu'il est difficile de toutes les cerner.
Bref, j'ai commencé à relooker mon site avec une conception 100 % CSS (sans table), un système de menu sympa, etc. La complexité relative du code impose d'utiliser un système de templates pour une maintenance aisée. J'utiliserais probablement phpCMS pour ça.
Mais pour l'heure, je n'ai guère le temps de finir cette maquette pourtant bien avancée, j'ai donc décidé d'effectuer une transformation minimale aux pages existantes en ajoutant des styles, ce qui métamorphose de façon radicale une page en ne lui appliquant que des modifications minimales.
Pour relooker ma page, j'ai remplacé l'en-tête minimaliste
(<html><head><title><body>) par un en-tête plus étoffée,
spécifiant l'usage de XHTML et ajoutant les styles et des meta-données.
En y recopiant, bien sûr, le titre originel, et éventuellement les méta-données préentes.
Pour supporter Internet Explorer (IE), j'ai dû encapsuler le contenu du
<body> dans un <div>,
les styles appliqués au body étant ignorés par IE...
De plus, petite astuce, j'ai trouvé qu'il fallait ajouter un espace insécable
après le </div> final pour que IE décolle le bas de page du bas de la
fenêtre.
Autres modifications nécessaires :
<div> spécifique et altérer
les paragraphes correspondants.title aux images et liens (affiché dans une bulle).<p> pour qu'ils aient la classe Para
(lettrine, marge haute)
et les <br> pour qu'ils soient des <p>
de classe Brk
(pas de lettine, pas de marge haute).C'est tout... Travail minimal, effet maximal, bon rendu même sur les navigateurs les plus anciens, voire les navigateurs textuels.
J'ai commencé à coder les caractères accentués/diacritiques sur mes pages
avec les entités HTML (du style É).
À la réflexion, j'ai opté pour mon site un codage iso-8859-1, vu que le CP-1252 semble
fort mal accepté sur certains browsers (Unix).
Cela donne des sources plus lisibles, plus faciles à saisir et plus courts à télécharger.
Je vais garder les entités pour les caractères CP-1252 spécifiques à Windows, comme
l'indispensable € (euro) et les ligatures de mon cœur...
Ainsi, les butineurs gèreront ces caractères unusuels du mieux qu'ils pourront, j'espère...
Histoire d'être sympa avec Netscape 4.5 sur Mac (encore sur le Mac de ma femme...), qui de toute façon est paumé par ma feuille de style, j'utilise les entités numériques pour les ligatures. Curieusement, il affiche correctement tous les caractères CP-1252 bruts...
Reste le problème de l'affichage du symbole de l'euro, nouveau venu
dans l'univers technologique.
Il semblerait que l'entité textuelle €,
qui s'affiche € sur votre navigateur, soit le meilleur compromis.
J'ai fait un petit aide-mémoire des principaux éléments HTML et CSS, il est fortement lacunaire mais peut s'avérer utile en rassemblant des infos en une page pratique.
J'ai aussi retrouvé une vieille page que j'ai faite pour tester diverses sortes de CGI :
J'aurai pu ajouter maintenant PHP et servlets... Un peu de JavaScript permet de choisir la cible CGI (l'action du formulaire), et la méthode (GET ou POST).
J'ai ajouté l'affichage du code, pour en faire un aide mémoire des contrôles possibles en HTML. (les CGI ne sont pas possibles sur Free.fr, donc le formulaire génèrera une erreur).
Une page que j'ai faite pour tester les entités HTML françaises sur divers browsers. J'en ai profité pour y mettre un certain nombre d'informations sur les problèmes de codage des caractères diacritiques. J'ai eu la surprise de voir cette page (sur l'ancien serveur philho.prohosting.com) plutôt bien placée sur Google quand j'ai cherché CP-1252 (pages françaises et anglaises)...
J'ai une autre page, plus concise, avec affichage du nom du browser, pour faciliter les tests multibrowsers.
Je reprends ici, dans l'ordre numérique, tous les caractères CP-1252 (spécifiques à Windows et ne font pas partie de l'ISO-8859-1) qui sont définis, y compris ceux qui n'existent pas en français (contrairement aux tableaux des pages ci-dessus).
| Windows char. | Unicode HTML code | Test HTML | Test Windows (CP-1252) | Description of character |
|---|---|---|---|---|
| ALT-0128 | € | € | € | Euro Currency Symbol |
| ALT-0130 | ‚ | ‚ | ‚ | Single Low-9 Quotation Mark |
| ALT-0131 | ƒ | ƒ | ƒ | Latin Small Letter F With Hook |
| ALT-0132 | „ | „ | „ | Double Low-9 Quotation Mark |
| ALT-0133 | … | … | … | Horizontal Ellipsis |
| ALT-0134 | † | † | † | Dagger |
| ALT-0135 | ‡ | ‡ | ‡ | Double Dagger |
| ALT-0136 | ˆ | ˆ | ˆ | Modifier Letter Circumflex Accent |
| ALT-0137 | ‰ | ‰ | ‰ | Per Mille Sign |
| ALT-0138 | Š | Š | Š | Latin Capital Letter S With Caron |
| ALT-0139 | ‹ | ‹ | ‹ | Single Left-Pointing Angle Quotation Mark |
| ALT-0140 | Π| Π| Π| Latin Capital Ligature OE |
| ALT-0145 | ‘ | ‘ | ‘ | Left Single Quotation Mark |
| ALT-0146 | ’ | ’ | ’ | Right Single Quotation Mark |
| ALT-0147 | “ | “ | “ | Left Double Quotation Mark |
| ALT-0148 | ” | ” | ” | Right Double Quotation Mark |
| ALT-0149 | • | • | • | Bullet |
| ALT-0150 | – | – | – | En Dash |
| ALT-0151 | — | — | — | Em Dash |
| ALT-0152 | ˜ | ˜ | ˜ | Small Tilde |
| ALT-0153 | ™ | ™ | ™ | Trade Mark Sign |
| ALT-0154 | š | š | š | Latin Small Letter S With Caron |
| ALT-0155 | › | › | › | Single Right-Pointing Angle Quotation Mark |
| ALT-0156 | œ | œ | œ | Latin Small Ligature OE |
| ALT-0159 | Ÿ | Ÿ | Ÿ | Latin Capital Letter Y With Diaeresis |
Tableau établi par Markus Kuhn, trouvé à Pemberley.com