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

17.11.2009

Personnaliser "Tags populaires" pour accéder à tous les tags dans la page "toutes les archives"

Cet élément de colonne par défaut propose les 10 tags les plus populaires dans votre blog. Pour accéder à tous les autres, il faut se rendre dans la page "Toutes les archives". Voyons comment favoriser un accès direct à l'ensemble des tags. Il nous faudra d'abord avoir des "ID" clairs dans le modèle "Toutes les pages", puis établir des liens hypertextes.


Personnalisons le modèle de page "Toutes les archives"

Il nous faut être précis, car plusieurs modèles de page comportent le mot "archives". Par ordre d'apparition à l'écran, dans la liste des modèles accessibles en configuration avancée, on a "Modèle de la page archives", "Toutes les archives" et "Modèle de la page toutes les archives".

C'est bien la seconde qui nous intéresse. On y trouve toutes les périodes d'archivage des notes, toutes les catégories, et tous les tags.

Lire la suite

18.09.2009

Proposez une navigation entre les éléments de colonne

Depuis quelques temps, la colonne de droite de ce blog affiche quelques icones permettant un accès rapide à la plupart des éléments, tels que "Dernières notes". Je vous propose de voir quelles sont les bases de cette forme de mini-menu.

Chaque élément de colonne possède un identifiant propre que l'on peut retrouver dans le code Html de la page. Si vous utilisez l'un au moins des éléments standards, vous devriez retrouver dans le code de vos pages, l'un des identifiants suivants :
box-recentposts | box-recentcomments | box-categories | box-archives | box-populartags | box-search | box-aboutme | box-youremail | box-yourphoto | box-photoalbum | box-syndication

Si vous avez créé un élément de colonne personnalisé, ce dernier porte un identifiant aussi du type :
id="box-mybox1700243"

Il suffira d'ajouter à l'adresse du blog, un signe dièse, puis l'identifiant pour établir un accès direct à un élément comme ici : http://geemee.hautetfort.com/#box-recentposts, et puisqu'il s'agit d'un lien interne à la page, on peut se contenter de #box-recentposts (quand on insère un lien hypertexte avec l'éditeur de note  H&F).

Le mini-menu, ne fait rien d'autre que de pointer vers les éléments de colonne que j'ai choisi. Vous pouvez le vérifier vous-même dans le code Html. Celui que je vous propose ci-dessous est directement utilisable chez vous. Il ne peut fonctionner que pour les éléments standards, vous aurez à le personnaliser pour pointer vers des éléments personnalisés. Et puis de toutes façons, il vous faudra bien utiliser des images qui vous conviennent plutôt que les miennes.

Vous noterez, si faites moi plaisir, que le lien "À propos" pointe directement vers la page plutôt que d'aller vers l'élément de colonne.

Lire la suite

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