Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

16.01.2010

Insérer des notes de bas de page sans effort

J'avais déjà écrit à propos des ancres, et je vous propose ici un mode opératoire spécialement dédié aux personnes... économes de leurs efforts. Mais il faudra tout de même lire jusqu'au bout.

Qu'il s'agisse de donner les références d'une citation, ou de renvoyer à une actualisation, il est utile de pouvoir faire des renvois vers la fin d'un texte1 ; l'information est consultée par le lecteur acceptant d'interrompre sa lecture, alors que l'autre continuera de suivre le fil.

Techniquement, il s'agit d'un lien interne, vers un point précis dans le document. C'est évidemment à vous de spécifier le point précis dans le document en attribuant un nom (name) à une ancre.

En code Html, l'appel de note ci-dessus s'écrit :

<sup><a href="#corps_de_note_1" name="appel-de-note-1" id="appel-de-note-1">1</a></sup>

En code Html, le corps de la note concernée s'écrit

<sup><a href="#appel-de-note-1" name="corps_de_note_1" id="corps_de_note_1">1.</a></sup>

Ce n'est pas compliqué, mais répéter cette manœuvre sans se tromper dans les références peut s'avérer rapidement fastidieux.


Comment gagner du temps ?

Lire la suite

09:30 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : html, lien, ancre, note, note de bas de page | |  del.icio.us | | Digg! Digg |  Facebook

09.01.2009

En mâchant du template : Home

Vous êtes passés en configuration avancée ? Vous allez manger du template et de la feuille de style. Quelques modifications anecdotiques pour commencer.

J'ai préparé un document à télécharger qui contient le contenu initial du template "page d'accueil" et une forme de visualisation de la structure de la page d'accueil. On voit nettement deux éléments pour la bannière supérieure, un bloc pour chaque colonne et un bloc pour la partie centrale.

Je ne rentrerai pas maintenant dans le détail de chacun des éléments. Pour l'instant, appréciez (si vous le pouvez) l'imbrication de chacun des éléments, et le soin que vous devrez apporter à vos interventions.

Vous constaterez qu'il y en a déjà eu sur ce blog.

Dans le template, modifier le favicon.

La procédure est très bien expliquée sur le Blog Haut&Fort dans cette note que je vous incite à lire. Une fois l'icône préparée, l'intervention dans le template est mineure.

À la quatrième ligne, il faut remplacer ce qui est surligné <link rel="icon" href="{$platform.url}graphics/favicon.ico" type="image/x-icon" />,  par l'adresse de l'image que vous aurez téléchargée via Tableau de bord / Fichiers / Images. En l'occurence, la ligne est devenue <link rel="icon" href="http://geemee.hautetfort.com/images/favicon1.ico" type="image/x-icon" />. Et un jour j'en mettrai une jolie.

Dans la feuille de styles, modifier la police principale

C'est une intervention mineure dans la feuille de style avec de grandes conséquences pour le blog.

Je n'ai rien contre la police Arial, précisément parce qu'on en dit rien, aussi lui préféré-je Verdana. Normalement, on peut personnaliser son modèle standard et changer l'ordre des familles de polices, mais avec moi, cela ne voulait pas fonctionner. Une fois en configuration avancée, il "suffit" de modifier la feuille de style.

Dans la classe "body", la première, j'ai modifié l'ordre des polices utilisées pour que Verdana passe en premier
body {
margin: 0px 0px 20px 0px;
padding: 0px;
background-color: #aaaaaa;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
word-spacing: normal;
text-align: center;
}

L'un des principes des CSS, c'est la mise en cascade, la hiérarchie descendante des intructions. Modifier "Body" c'est modifier tout le blog, sauf instruction contraire. Comme le passage en Verdana modifiait la description du blog "Modeste contribution à l'émancipation technique du mardi et du vendredi à 12h30" en provoquant un retour à la ligne, j'ai modifié le style concerné.

Je suis donc intervenu sur la classe suivante en ajoutant l'instruction surlignée qui remet la police Arial en première position.
#banner h2 {
font-family: Arial, Verdana, Helvetica, sans-serif;
padding: 10px 25px 0px 25px;
}

En analysant le document à télécharger, vous comprendrez plus vite que c'est bien sur cette classe qu'il fallait intervenir.

Ces quelques interventions illustrent juste le principe, je vous proposerai bientôt des modifications plus ciblées et détaillées. D'ailleurs, avez-vous des priorités ?

17.12.2008

Code à copier

Note récapitulative des portions de codes à copier et intégrer dans une note
Mise à jour de la note du 1er décembre 2008

Html | Tableaux | Lecteurs de musique et de vidéo

Et n'hésitez pas à me montrer ce que vous en avez fait, ou à me dire ce qui vous manque pour vous lancer.

Html

1986730260.jpg Ne manquez pas de caractère, et affichez des caractères spéciaux
Appliquer des couleurs et en comprendre les codes
Jetons l'ancre à point nommé avant d'insérer un lien
Insérer un commentaire dans le code Html pour s'y retrouver plus tard
Jouons des bâtons de police

<!-- -+-+- Modification de police pour "Avec sérif" -0- -+-+- -->
<span style="font-family:'Times New Roman',Times,serif;">*Police avec sérif*</span>
<!-- -+-+- Modification de police pour "Avec sérif" -1- -+-+- -->

Ce qui donnera :
*Police avec sérif*

<!-- -+-+- Modification de police pour "Sans sérif" -0- -+-+- -->
<span style="font-family:'Arial',Verdana,sans;">*Police bâton*</span>
<!-- -+-+- Modification de police pour "Sans sérif" -1- -+-+- -->

Ce qui donnera :
*Police bâton*

<!-- -+-+- Modification de police pour "Monospace" -0- -+-+- -->
<span style="font-family:'Courier New',courier,mono;">*Police largeur fixe*</span>
<!-- -+-+- Modification de police pour "Monospace" -1- -+-+- -->

Ce qui donnera :
*Police largeur fixe*

Tableaux

lettrine.jpg Une lettrine pour prendre le tableau à la lettre
encart.jpg <p>... et <i>much more user friendly</i>.</p>
<table style="height: 60px;"
align="right" border="0"
cellpadding="5">
<tbody>
<tr>
<td style="text-align: center;"
valign="middle"
bgcolor="#fdfcf6">
<b>Pour aller plus loin</b><br />
<a target="_blank" title="Sur Wikipedia"
href="http://fr.wikipedia.org/wiki/Wysiwyg">
Wysiwyg</a><br />
sur Wikipedia</td>
</tr>
</tbody>
</table>
<p>La plupart des logiciels actuels proposent les deux ... </p>
Comment aligner le texte autour d'un tableau

<!-- -+-+-+-+- Tableau pour insertion d'objet -0- -+-+-+-+- -->
<table style="width: 224px; height: 59px;"
<!-- width indique la largeur, height la hauteur du tableau. Ici l'unité est le pixel, il faut se référer aux dimensions de l'objet et ajouter 4px aux deux dimensions. Ici, ce sont les dimensions d'un lecteur Deezer de taille réduite. -->
align="left"
<!-- choisir entre "left" et "right" pour l'alignement du tableau -->
border="0" cellpadding="2">
<!-- la bordure est à zéro, il n'y en a donc pas. Cellpadding règle l'espace entre bord de cellule et bord de tableau avec un cellpadding à 2, il faut augmenter la taille du tableau de 2 pixels sur chaque bord, soit 4 sur la hauter, 4 sur la largeur -->
<tbody><tr><td style="text-align: center;" valign="middle">
<!-- ces critères de styles alignent sur le centre de la cellule horizontalement d'abord, puis verticalement -->
<!-- -+-+-+-+-+- Code de l'objet à insérer -0- -+-+-+-+-+- -->

XX
<!-- ces XX servent de repères, il faudra les effacer après avoir inséré le code du lecteur Deezer -->
<!-- -+-+-+-+-+- Code de l'objet à insérer -1- -+-+-+-+-+- -->
</td></tr></tbody></table>
<!-- -+-+-+-+- Tableau pour insertion d'objet -1- -+-+-+-+- -->

Lecteurs de musique et de vidéo

Personnaliser un lecteur Youtube
De la musique avec un lecteur Deezer personnalisé

12:55 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : blog, html, code, copier | |  del.icio.us | | Digg! Digg |  Facebook

09.12.2008

Jouons des bâtons de police

N'essayez pas de m'entraîner à dire du mal de ces caractères qui détiennent le monopole de l'usage légitime de la force. Je pourrais dire ce que je pense des ordres donnés par notre actuel gouvernement, mais je me contenterai d'aborder ici les polices de caractères.

Les anglophones appellent encore cela des "fonts", alors que cela fait un moment que l'on n'utilise plus de fonte de plomb pour affirmer nos caractères. Et il faut avoir tâté du typographe, en restant polis si possible, pour comprendre que la minuscule est en bas de casse. Toujours est-il que l'on ne fait décidément pas ce que l'on veut avec la police, et moins encore sur Internet.

Il nous faut admettre qu'une page web est une suite d'instructions interprétées par un navigateur, qui fera avec ce qu'il trouvera sur le poste informatique utilisé. D'un ordinateur l'autre le résultat sera différent, parce que les ressources sont rarement identiques, à moins de savoir se contenter du plus petit dénominateur commun.
C'est pour cela que les polices proposées par les plateformes de blog vous paraissent désespérément pauvres. Disons le sans trop de condescendance, elles sont communes.

Lire la suite

11:06 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : blog, html, css, police, caractères | |  del.icio.us | | Digg! Digg |  Facebook

05.12.2008

Comment aligner le texte autour d'un tableau

Le principe avait rapidement été abordé quand il s'était agit de lettrine. Il peut être utile d'enfermer un objet dans un tableau pour tourner autour.

Vous en faites l'expérience à chaque fois que vous insérez une image dans une note, mieux vaut ne pas se tromper de paramètre si l'on souhaite que le texte enveloppe l'image. Et quand vous insérez un lecteur, il n'y a pas moyen d'aligner le texte autour de l'objet, ce qui oblige le plus souvent à reléguer le lecteur en fin de note pour ne pas créer de grande coupure.

Puisqu'on peut aligner sur un tableau, encadrons les objets.

Le lecteur ci-contre été inséré dans un tableau aligné à gauche. Le texte lui-même aligné à gauche semble tourner autour, en limitant l'effet de coupure visuelle de l'insertion d'un objet. Et cela peut fonctionner avec n'importe quel type d'objet... Je m'avance peut-être un peu, mais vous ne perdez qu'un peu de temps à essayer.

Vous trouverez dans la brève Wysiwyg, un exemple de texte encadré, qui exige un alignement sur la droite.

podcast

Le texte de ce paragraphe-ci est aligné à gauche, comme le précédent, mais le lecteur de média se situe dans un tableau (dont le fond a été mis en couleur) qui s'aligne à droite. Alignement du texte en dehors du tableau, et alignement du tableau lui-même sont indépendant. Sans compter l'alignement du texte dans le tableau.

Voici le code du tableau à insérer.

Ce qui est en couleur n'est pas interprété, c'est du commentaire. Vous pouvez copier puis coller ce code dans l'une de vos notes, et vous obtiendrez un tableau aligné à gauche, avec une cellule contenant XX. Entre ces deux lettres, vous pourrez insérer un lecteur Deezer de petite taille. C'est à peu de chose près le code du cadre en haut de cette note.

<!-- -+-+-+-+- Tableau pour insertion d'objet -0- -+-+-+-+- -->
<table style="width: 224px; height: 59px;"
<!-- width indique la largeur, height la hauteur du tableau. Ici l'unité est le pixel, il faut se référer aux dimensions de l'objet et ajouter 4px aux deux dimensions. Ici, ce sont les dimensions d'un lecteur Deezer de taille réduite. -->
align="left"
<!-- choisir entre "left" et "right" pour l'alignement du tableau -->
border="0" cellpadding="2">
<!-- la bordure est à zéro, il n'y en a donc pas. Cellpadding règle l'espace entre bord de cellule et bord de tableau avec un cellpadding à 2, il faut augmenter la taille du tableau de 2 pixels sur chaque bord, soit 4 sur la hauter, 4 sur la largeur -->
<tbody><tr><td style="text-align: center;" valign="middle">
<!-- ces critères de styles alignent sur le centre de la cellule horizontalement d'abord, puis verticalement -->
<!-- -+-+-+-+-+- Code de l'objet à insérer -0- -+-+-+-+-+- -->

XX
<!-- ces XX servent de repères, il faudra les effacer après avoir inséré le code du lecteur Deezer -->
<!-- -+-+-+-+-+- Code de l'objet à insérer -1- -+-+-+-+-+- -->
</td></tr></tbody></table>
<!-- -+-+-+-+- Tableau pour insertion d'objet -1- -+-+-+-+- -->

22:35 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : blog, html, tableau, lecteur | |  del.icio.us | | Digg! Digg |  Facebook

26.11.2008

Retrouver le code d'une couleur vue sur le web, et ailleurs.

Avouez-le, malgré vos efforts acharnés à maîtriser les parfaits dosages de rouge de vert et de bleu, retrouver la couleur qui vous plaît vous est aussi facile que si vous deviez recomposer votre parfum vous-même. Ce serait tellement plus facile de les piquer ici et là...

Il n'est pas donné à tout le monde de distinguer correctement les couleurs et de savoir les restituer. Aussi, les outils qui permettent de faire des prélèvements rapides et sans douleur sont les bienvenus. Vous connaissez cet outil, vous l'avez vu dans un logiciel de retouche d'image, et déjà dans MS Paint vous l'aviez rencontré sous le nom de "pipette".

Mais quand on a besoin de seulement capturer une couleur pour en obtenir le code, lancer Gimp ou Photoshop paraît bien disproportionné. Des outils qui ne font que cela mais qui le font bien, il en existe de nombreux. J'ai personnellement adopté la solution de Benjamin Chartier.

La boîte à couleurs (v1.6.15)

C'est un logiciel gratuit que je vous incite à retrouver sur le site Pourpre que nous avons déjà évoqué. Cet outil est aussi simple que puissant, et vous permettra la capture facile et indolore des couleurs les plus sauvages et indomptables.


Vous pourrez alors coder en :
• RVB (Rouge Vert Bleu)
• TLS (teinte / luminosité / saturation)
• TSV (teinte / saturation / valeur)
• CMJ (cyan / magenta / jaune)
• CMJN (cyan / magenta / jaune / noir)

Et pour les littéraires, ou les personnes seulement lassées du côté froid des valeurs arithmétiques, on peut utiliser des noms, des vrais, et notamment ceux de la palette de Chroma. Les accros des références d'imprimerie trouveront même des correspondances Pantone (je ne rentre pas dans le débat de leur pertinence...).

La_boite_a_couleurs_nom.jpg

Trop facile ?

Faites donc vous-même votre nuancier préféré en créant un fichier texte avec un nom et un code couleur html par ligne. Enregistré dans le répertoire ColorNames du répertoire d'installation de LaBoiteACouleurs, il sera reconnu et utilisable dans l'onglet "Nom".

P.S. : Sans vouloir jouer les pudibonds, Pourpre diffuse une publicité pour une exposition qui peut en faire rougir quelques uns. Sachez-le avant d'y aller avec des yeux innocents.

12:30 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (1) | Tags : blog, html, couleur, palette | |  del.icio.us | | Digg! Digg |  Facebook

22.11.2008

Insérer du code Html, sans acheter de jumelles (ou la méthode "embed"

Reconnaissons que le code HTML, c'est bien gentil, mais dans l'éditeur de code H&F c'est rapidement illisible. Difficile de retrouver l'emplacement exact d'une intervention.

Retrouver les bonnes balises au bon endroit demande un temps fou, mobilisant une énergie qu'il est incivil de gâcher en ces temps de crise. D'autant que pour un petit bout de code de rien du tout, il va falloir faire défiler l'essentiel de la note sans qu'il soit forcément possible de trouver un raccourci. Heureusement, qu'il en existe un quand même, à condition de détourner un outil disponible.

Vous avez quelques lignes de code à peine à insérer ?

HF_ins_video_son_code_embed_small.jpg • Dans l'éditeur Wysiwyg donc,
• positionnez votre curseur au bon endroit.
• Utilisez la commande "Insérer un fichier multimédia".
• Cliquez sur l'onglet "code embed".
• Tapez ou collez votre code.
• Cliquez sur valider

Cette petite fenêtre vous offre la possibilité d'insérer du code, mais pas de modifier celui qui s'y trouve. Autant dire que vous n'économiserez pas longtemps l'usage de l'éditeur Html sans une préparation soigneuse de votre code.

C'est notamment pourquoi il peut-être utile de repérer ses interventions rapidement, décidément, on y revient. Il existe une possibilité pour écrire des commentaires qui ne seront pas "interprétés".

Marquez donc votre territoire


• Positionnez votre curseur au bon endroit.
• Utilisez la commande "Insérer un fichier multimédia".
• Cliquez sur l'onglet "code embed".
• Tapez ou collez le code <!-- Bob wuz der -->
• Cliquez sur valider

C'est dans le code, et il n'y a que vous pour le savoir. Bien sûr, c'est plus utile si vous utilisez quelque chose comme <!-- Tableau orchidée -->
À vous de faire preuve d'imagination, en gardant à l'esprit qu'un commentaire commence par <!-- et se termine par -->. Si vous voulez une ligne de tiret prévoyez un espace genre <!-- ---- et --- -->. Sinon H&F supprimera les tirets pour les remplacer par des espaces.

Tout ce qui se situe entre ces deux balises <!-- et --> est neutralisé, assimillé à du commentaire et non à une instruction. Autant dire que si vous oubliez de "fermer" votre commentaire, une partie importante du code de la page ne sera plus interprétée ; ce qui lui donnera certainement une touche très personnelle. Cela peut d'ailleurs vous servir à temporairement neutraliser une partie du code, sans le supprimer. Quand on procède par essai/erreur, c'est assez utile.

Je résume

• Utilisez la commande "Insérer un fichier multimédia".
• Cliquez sur l'onglet "code embed".
• Tapez ou collez : <!-- >>>>> Mon code 1 - début >>>>> -->
• Tapez ou collez votre code à faire interpréter
• Tapez ou collez : <!-- <<<<< Mon code 1 - fin <<<<< -->
• Cliquez sur valider

Vous devriez y voir plus clair. Bon ok, c'est relatif. Pour vous entraîner un peu, j'ai inséré des commentaires dans le code de cette note, saurez vous les retrouver ? [Affichage / Code source]

12:30 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (2) | Tags : blog, html, commentaires, méthode, embed | |  del.icio.us | | Digg! Digg |  Facebook

WYSIWYG

What You See Is What You Get.

Se dit d'un outil qui prétend montrer pendant l'édition, l'apparence de l'état final d'un document. Souvent utilisé pour opposer les logiciels permettant de créer des pages Html, comme dans un traitement de texte traditionnel, aux logiciels qui privilégient l'intervention directe dans le code. Cela serait prétendument plus facile, et much more user friendly.

Pour aller plus loin
Wysiwyg
sur Wikipedia

La plupart des logiciels actuels proposent les deux (le code et l'apparence), montrant ainsi les libertés qu'ils prennent avec une codification orthodoxe reconnue par le W3C.

L'interface de rédaction des notes de blog par défaut, à Haut&Fort comme ailleurs, peut-être considérée Wysiwyg. Encore une promesse qui n'engage que ceux qui veulent bien y croire.

HF_note_wysiwyg.jpg

12:25 Écrit par Gee Mee dans Glossaire | Lien permanent | Commentaires (0) | Tags : html, wysiwyg | |  del.icio.us | | Digg! Digg |  Facebook

21.11.2008

Jetons l'ancre à point nommé avant d'insérer un lien

Insérer un lien dans une note, vous savez le faire. Certainement. Et si je reproduis le mode opératoire ci-dessous, c'est uniquement pour les nouveaux arrivés sur Haut&Fort. Les autres, sûrs d'eux-mêmes, peuvent aller directement à la suite.

Le passage de la "base de connaissances" Haut&Fort traitant de l'insertion de lien mérite d'être mise à jour. Je l'ai fait ci-dessous.

Questions
• Comment insérer un lien dans une note ?
• Je souhaite faire un lien qui ouvre dans une nouvelle fenêtre, comment faire ?

Réponse
Pour insérer un lien dans une note :
1. Sélectionner l'image ou le texte de votre note sur lequel vous souhaitez créer votre lien.
2. Cliquez sur l'icône lien de la barre d'outil de l'éditeur de note.
2.1. La fenêtre "Insérer un lien" s'ouvre en pop-up
3. Dans la zone "URL du lien" saisissez l'adresse Internet de votre lien.
4. Dans la zone "Cible", un menu déroulant vous permet d'indiquer dans quelle fenêtre s'ouvrira le lien
4.1. Par défaut le lien s'ouvrira dans la même fenêtre
4.2. Vous pouvez le confirmer en choisissant "Ouvrir dans la même fenêtre"
4.3. Vous pouvez choisir "Ouvrir dans une nouvelle fenêtre" pour que la fenêtre reste ouverte sur votre blog
5. Renseignez la zone "Titre" pour qu'une "infobulle" puisse s'afficher au survol du lien
6. Cliquez sur le bouton ok.

Voyez, ce n'était pas trop long d'arriver là.

Tout comme Haut&Fort vous permet accéder directement à un commentaire sans avoir à faire défiler la page, vous pouvez créer des liens dans votre note pour gérer ce qui pourrait ressembler à une "note de bas de page"[1]. Vous pouvez aussi envisager des liens vers un emplacement dans une autre note, comme ici quand je vous incite à revoir le code d'un tableau au fond couleur d'orchidée dans une autre fenêtre.

Vous aurez déjà remarqué que la seule différence visible, avec un lien traditionnel, est la présence de ce code ici en gras.
http://geemee.hautetfort.com/archive/2008/11/14/une-lettrine-pour-prendre-le-tableau-a-la-lettre.html#tableau_orchid
Il s'agit de la précision d'un emplacement précis dans le fichier indiqué par le reste de l'URL.

Pour nommer un endroit dans un fichier :

• Dans l'éditeur de note, placez le curseur entre les deux premiers mots de votre paragraphe de destination (là où vous souhaitez pouvoir aller plus tard).
• Cliquez sur "Insérer un fichier multimédia", cela nous permettra d'insérer du code Html plus facilement.
• Tapez : <a name="direct">&nbsp;</a>
&nbsp; est le code html pour un espace insécable
• Cliquez sur [Valider].
Vous voyez maintenant une petite ancre sur fond jaune dans l'éditeur de note entre les deux premiers mots du paragraphe cible, mais rien dans l'aperçu. C'est normal, ce code n'est pas visible. Il a d'ailleurs été converti une fois de plus pour devenir <a name="direct" id="direct">. Le "nom" est libre, et n'est pas lié au texte encadré par la balisage d'ancrage, et vous pouvez le modifier (attention à ne pas supprimer les balises).

D'habitude on met le premier mot du paragraphe cible, ou une image entre les balises d'ancrage. Mais avec MS Internet Explorer, dans l'éditeur wysiwyg d'H&F, le symbole de l'ancre est tronqué, et le contenu encadré devient invisible. C'est encore là, on le retrouve dans l'aperçu, mais ce n'est pas très pratique.

Pour diriger vers ce point il faudra :

- Si vous êtes déjà sur la page, l'adresse #direct suffira au moment d'insérer un lien.
- Si vous dirigez vers ce point à partir d'une autre page, il faudra faire précéder par l'adresse complète:
http://geemee.hautetfort.com/archive/2008/11/19/inserer-un-lien-vers-un-point-dans-une-note.html#direct

 

Avec un peu d'entraînement je suis sûr que vous ferez des merveilles.

 



[1]Voici une note de bas de page. Pour revenir au texte cliquez sur Retour. J'ai effectivement prévu une autre étiquette à l'endroit du premier lien. Entre l'appel de la note de bas de page, et la note de bas de page elle-même, il y a donc une sorte de code "aller" et de code "retour". C'est facultatif, mais cela facilite la navigation.

Code de l'appel de note :
ce qui pourrait ressembler à une "note de bas de page"<a target="_self" title="Note [1]" href="#NoteBasDePage1">[1]</a><a name="Retour1" id="Retour1">.</a>

Code de la note :
<a name="NoteBasDePage1" id="NoteBasDePage1">[1]</a>Voici une note de bas de page. Pour revenir au texte cliquez sur <a target="_self" title="Retour au texte" href="#Retour1">Retour</a>.

***

Ici j'insère du faux texte pour que l'effet "accès direct" dans un long document soit bien visible

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin luctus tristique felis. Maecenas quis purus. Praesent magna metus, interdum sit amet, commodo eget, consectetuer at, est. Mauris leo. Fusce eu metus id enim tincidunt viverra. Ut aliquet mauris. Praesent leo. Praesent eu enim. Sed ac libero. Etiam dapibus dolor ac orci. Suspendisse quis mauris. Praesent vulputate, lacus nec bibendum porttitor, turpis sapien malesuada ligula, nec tempor dolor tellus at nisl. Sed non risus. In semper felis at nulla placerat iaculis. Quisque semper augue at nibh. Etiam lacinia laoreet felis. Aliquam pharetra mauris vel tortor. Cras gravida volutpat arcu. Curabitur in metus sit amet ipsum venenatis rhoncus. Nullam ultrices urna id nisi.

Maecenas orci arcu, fringilla ac, vehicula ut, luctus et, velit. Maecenas ac ipsum. Maecenas elit. Maecenas nec odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi scelerisque dictum velit. Sed laoreet magna vitae velit. Nullam viverra molestie est. Mauris nec turpis in sapien fermentum porta. Curabitur mi. Sed vel risus non nisl tempus vestibulum. Morbi ac massa. Vivamus tincidunt viverra lacus. Integer at eros.

12:30 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (2) | Tags : blog, html, lien, ancre | |  del.icio.us | | Digg! Digg |  Facebook

19.11.2008

Pour apporter les couleurs du monde, à la portée du monde des couleurs

Nous avons commencé à voir comment appliquer une couleur à un texte, et à une cellule de tableau, mais nous avons négligé une étape essentielle : savoir choisir une couleur.

Il est d'usage de considérer que les goûts et les couleurs ne se discutent pas. Un usage qui ne vaut rien et que nous nous abstenons de respecter à chaque occasion. Si nous n'exprimons pas forcément ce que nous pensons des harmonies des autres, nous n'en pensons pas moins. Soyons honnête et admettons que les couleurs des autres, comme leurs goûts, sont souvent discutables.

D'ailleurs, les difficultés commencent quand nous cherchons à nommer les couleurs. La maîtrise du vocabulaire approprié ne s'improvise pas, et rares seront ceux qui réussiront à se sortir d'un débat autour du nom de ce vieux rose sans boire le calice jusqu'à la lie de vin.

Le site Pourpre.com peut nous aider sur ces deux points notamment.

Dans la rubrique "Chroma" nous trouvons plusieurs dictionnaires : alphabétique, chromatique par teinte ou par champs. Chaque couleur fait l'objet d'une fiche, et propose un code Html en hexadécimal. Il y est aussi question de qualificatifs comme "acidulé" par exemple.
Enfin, il existe un dictionnaire imaginaire qui vaut le détour à lui seul. Les internautes ont la possibilité de proposer une couleur, avec une définition toute personnelle. Certains abuseront de jeux de mots, joueront sur l'écriture du code ou feront preuve de poésie.
C'est un lieu magique dans lequel se retrouveront à leur aise les amoureux des mots comme des couleurs. De l'authentique "cuisse de nymphe" à l'imaginaire "nymphrose", vous en verrez des vertes et des pas mûres. Et même du Verlaine.

Chromafiltre vous aidera à trouver les accords.
C'est un outil en Flash qui vous permet de trouver des harmonies à partir d'une roue chromatique ou de gammes et d'effet recherché. Bien plus que des solutions toutes prêtes, vous y trouverez des méthodes qui vous aideront dans votre quête.

Pourpre.com
Ce site propose des articles consacrés à la couleur: le phénomène physique, la perception des couleurs, la langue française et la couleur, des questions-réponses, un glossaire, une présentation des principaux modèles et nuanciers de couleurs, quelques jeux, une sélection de liens...

Extrait de la page d'accueil

 

10:36 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : blog, html, couleur, pourpre | |  del.icio.us | | Digg! Digg |  Facebook