Ajouter une info bulle sur une image (Blogger)

Blogger a ajouté en avril 2012 quelques nouveautés dans l'éditeur de messages, dont la possibilité de rajouter facilement un attribut alt et un attribut title aux images.

• L'attribut alt permet d'afficher une description de l'image s'il y a un problème d'affichage.
• L'attribut title fournit une description plus longue de l'image, qui s'affiche sous forme d'info-bulle quand on passe la souris sur l'image. (à tester sur la photo ci-dessous)

Dans l'éditeur Blogger, après avoir téléchargé l'image, il suffit de :

1. cliquer sur l'image puis sur Propriétés

2. renseigner le texte du titre, correspondant à l'attribut TITLE, qui s'affichera sous forme d'info-bulle et le texte alternatif, correspondant à la balise ALT.

3. vérifier dans le code html que les attributs ont bien été ajoutés à la balise image (img).

4. tester l'info-bulle ;-)

► dans d'autres éditeurs html, ces attributs peuvent bien entendu être rajoutés "à la main".
► l'attribut title peut être ajouté à n'importe quelle balise html sur laquelle on voudrait faire apparaître une info-bulle, y compris sur une simple zone de texte.

Exemple : passer la souris PAR ICI

code source :

Exemple : passer la souris <span title="Test d'info-bulle">ICI</span><br />
<br />

► personnellement, il m'arrive de rajouter une info-bulle à un lien-texte, comme ci-dessous.

Sources :
• Blogger : Personnalisez vos préférences de recherche (avril 2012)
• Propriétés de l'image

(il faut que je réécrive une partie de mes tutoriels informatiques car tout a changé...)

Insérer un tableau dans un article

De temps en temps, il peut arriver que l'on ait besoin d'afficher quelque chose sur deux colonnes (ou plus). A ce moment là, le plus facile est d'insérer dans le code HTML un petit tableau.

Le code HTML est on ne peut plus simple. Le tableau est délimité par un <table> et un </table>, puis chaque ligne par un <tr> et un </tr>, et enfin à l'intérieur de chaque ligne chaque cellule (chaque colonne) est délimitée par un <td> et un </td>.

Par défaut la largeur de chaque colonne est défini par l'élément le plus grand. Et le texte est centré verticalement à l'intérieur d'une ligne.

Pour que les colonnes soient visibles, on va rajouter une bordure sur le côté droit de chaque cellule. On va également attribuer une largeur aux deux 1ères colonnes (pour éviter que la bordure ne soit collée au texte) et aligner verticalement sur le haut le texte de la 2ème ligne.

Résultat recherché :

1e ligne 1e colonne	1e ligne 2e colonne : le texte est plus long	1e ligne 3e colonne
2e ligne 1e colonne : texte de la cellule	2e ligne 2e colonne	colonne 3, ligne 2

Le texte de la 1ère ligne est centré verticalement, celui de la 2ème ligne est aligné sur le haut. La largeur des deux 1ères colonnes est fixe, celle de la 3e colonne est définie par la longueur du texte (et la bordure est collée au texte).

Code HTML correspondant :

<table>
<tr>
<td style="border-right: solid 1px red; width: 130px;">1e ligne 1e colonne</td>
<td style="border-right: solid 1px blue; width: 180px;">1e ligne 2e colonne : le texte est plus long</td>
<td style="border-right: solid 1px red;">1e ligne 3e colonne</td>
</tr>
<tr style="vertical-align: top;">
<td style="border-right: solid 1px blue;" >2e ligne 1e colonne : texte de la cellule</td>
<td style="border-right: solid 1px red;" >2e ligne 2e colonne</td>

<td style="border-right: solid 1px blue;"> colonn 3, ligne 2</td>
</tr>

</table>

► Pour en savoir plus sur l'habillage d'un tableau avec les propriétés de style : css.mammouthland.net (tutoriels débutants)

(tous mes tutoriels sont dans l'index "informatique")

Ajouter une bordure à un paragraphe

De temps en temps, je rajoute un "edit" dans mes articles, pour corriger quelque chose ou ajouter une précision. Et pour qu'ils soient plus visibles, je décale un peu le texte et rajoute une bordure sur le côté gauche.

Une fois le texte tapé dans la partie "Rédiger", je vais dans l'onglet "Modifier le code HTML" et je rajoute avant et après le texte à décaler le code :

<div style="border-left: 1px solid #000000; padding-left: 12px;">
paragraphe à décaler vers la droite

</div>

► les balises <div> et </div> définissent le paragraphe auquel on veut appliquer la mise en forme

► l'élément style="...." permet de définir les caractéristiques de la mise en forme (les "éléments de style" ou css appliqués à la balise div)

► la propriété border-left définit la bordure gauche du paragraphe par une largeur (ici 1px), un type de bordure (ici solid) et éventuellement une couleur, définie par son code hexadécimal ou par son nom.

► la propriété padding-left définit l'espace à gauche, entre la bordure et le texte

De la même manière, on peut définir une bordure à droite border-right, en haut border-top et en bas border-bottom avec pour chacune des caractéristiques qui lui sont propres, ou tout simplement border pour une bordure identique de tous les côtés.

►► Plus d'infos sur le Site du Zero : propriétés des boîtes.

Exemple pour une bordure pointillée épaisse et bleue :

<div style="border: 5px dotted #0000FF; padding: 12px;">
paragraphe à encadrer avec une bordure pointillée bleue

</div>

Aperçu :

paragraphe à encadrer avec une bordure pointillée bleue

(tous mes tutoriels sont dans l'index "informatique")

Souligner un texte dans une page web et autres propriétés de formatage de texte

Une petite astuce toute simple aujourd'hui pour souligner du texte dans un article quand l'éditeur de blog ne le propose pas directement (comme c'est le cas pour celui de Blogger).

Après avoir saisi son texte, il suffit d'aller dans l'onglet "Modifier le code HTML" et d'entourer le texte à souligner par les balises <u> et </u> (où le "u" signifie "underline").

Par exemple, le code HTML correspondant à la partie soulignée dans la 1ère ligne de cet article est :

<u>souligner du texte</u>

De la même manière le texte en gras est encadré des balises <b> et </b> et le texte en italique par les balises <i> et </i>. Il est également possible de barrer un texte en utilisant les balises <s> et </s> ou <strike> et </strike> (balises générées automatiquement par Blogger lorsque l'on utilise les boutons de mise en forme de l'éditeur).

Edit du 10/04 : le bouton ABC qui permet de barrer un texte n'apparaît à côté du bouton B (pour le gras) et du bouton I (pour l'italique) que lorsqu'on est passé au nouvel éditeur de Blogger.

Pour des balises blink blink, c'est là qu'il faut aller voir.

On trouve d'autres balises de style sur www.commentcamarche.net

♦ ♦ ♦

Pour aller plus loin...

Les puristes recommandent d'éviter l'utilisation de ces balises (pourtant pratiques) au profit des propriétés de style CSS.

Edit du 10/04 :  Tout en continuant d'utiliser par facilité les balises <u> <b> ou <i>, il faut savoir que les propriétés de style - cf lien ci-dessous vers le Site du Zéro pour la liste complète - permettent des possibilités plus importantes de mise en forme (police, taille et couleur du texte, arrière-plan, texte en petites capitales, en majuscules, etc)

► pour modifier l'apparence d'une partie de texte il suffit de l'encadrer par les balises <span> et </span> et d'ajouter les éléments de style (css) à l'intérieur de la balise.

Exemple correspondant au texte souligné en début de cet article :

<span style="text-decoration: underline;">souligner du texte</span>

où <span style="text-decoration: underline;"> remplace le <u> et </span> remplace le </u>.

→ évidemment le résultat est le même : souligner du texte

► il est possible de grouper plusieurs propriétés, par exemple pour afficher un texte en gras et en italique :

<span style="font-weight: bold; font-style: italic;">écrire un texte en gras et en italique</span>

→ résultat : écrire un texte en gras et en italique

Edit du 10/04 : On peut modifier la présentation d'un paragraphe en ajoutant les propriétés de style à l'intérieur de balises <div> et </div> (à la place des balises <span> et </span>)

► on trouve une liste de toutes les propriétés de formatage de texte par exemple sur le Site du Zéro (un site qui m'a beaucoup servi pour mes débuts dans le HTML et le CSS, ou comme je le disais au début de ce blog "une bonne référence pour le webmaster débutant").

(tous mes tutoriels sont dans l'index "informatique")

Insérer un lien dans un article

La plupart des éditeurs de blog permettent d'insérer très simplement un lien dans le texte d'un article.

Dans Blogger, il suffit de sélectionner le texte sur lequel on veut un lien puis de cliquer sur le bouton Associer (souvent figuré par un dessin représentant les anneaux d'une chaîne dans d'autres éditeurs), et d'indiquer le nom de l'URL vers laquelle doit pointer le lien.

► Cette URL peut être récupérée soit en la copiant dans la barre d'adresse de votre navigateur si vous êtes sur la page en question, soit en faisant CLIC DROIT puis "copier l'adresse du lien" sur un lien qui pointerait déjà dessus.

Insertion d'un lien avec l'éditeur Blogger

Un coup d'oeil dans l'onglet "Modifier le code HTML" permet de constater que cette manip a simplement ajouté un code HTML autour du mot Blogger.

Dans <a href="http://www.blogger.com/" target="_blank">Blogger</a>, il suffit de...

► on y retrouve l'adresse du site vers lequel doit pointer le lien ainsi que l'option target="_blank", que j'ai rajoutée manuellement pour que le lien ouvre dans un nouvel onglet.

Avec l'éditeur Wordpress, la différence essentielle réside dans l'icône représentant la fonction "insertion d'un lien" et les options supplémentaires proposées (notamment le choix d'ouvrir ou non le lien dans un nouvel onglet).

 

et avec l'éditeur Wordpress (cliquer pour mieux voir l'icône)

Pour aller plus loin :

• ouvrir un lien dans un nouvel onglet
• supprimer ou modifier le lien sur une image

Autres ressources sur le web :
► comment insérer un lien dans un article du blog? (webpedagogique)
► insérer un lien dans un commentaire (blogger au bout du doigt)
► mettre des liens en texte (faire un blog)

(tous mes tutoriels sont dans l'index "informatique")

Ouvrir un lien dans un nouvel onglet: pour ou contre?

Personnellement, j'ouvre systématiquement dans un nouvel onglet les liens vers un site externe (et les liens internes, vers un autre article de mon blog, dans le même onglet). Bref, j'oblige mes visiteurs à reproduire ce que je trouve le plus satisfaisant pour moi quand je visite d'autres blogs ou sites - je me retrouve d'ailleurs souvent avec une dizaine d'onglets ouverts simultanément ;-)

Mais certains pensent qu'il ne faut pas ouvrir les liens dans une nouvelle fenêtre. Cela pourrait perturber les internautes débutants, et les internautes avertis savent qu'en faisant CLIC DROIT ils peuvent décider d'ouvrir le lien dans un nouvel onglet ou une nouvelle fenêtre.

Et vous, comment faites-vous?

Edit du 17/11/2011 - Blogger propose maintenant une option à cocher dans l'éditeur de message pour déterminer si un lien texte doit être ouvert dans la même fenêtre ou dans une nouvelle fenêtre (voir le tutoriel en images sur Mes trucs pour Blogger).

À défaut d'un éditeur de message qui propose cette fonctionnalité, ou pour les liens associés à des images, il est très simple de modifier le code HTML.

► Si vous souhaitez ouvrir un lien dans un nouvel onglet, il suffit de rajouter l'attribut target="_blank" à l'intérieur du lien.

Exemple :
Un lien vers La Cuisine de Myrtille dans le même onglet.

Le code HTML: <a href="http://lacuisinedemyrtille.blogspot.com/">La Cuisine de Myrtille</a>

Un lien vers La Cuisine de Myrtille dans un nouvel onglet.

Le code HTML: <a href="http://lacuisinedemyrtille.blogspot.com/" target="_blank">La Cuisine de Myrtille</a>

(Tous mes tutoriels sont dans l'index "informatique")

Trouver un texte dans une page web

Il n'y a pas de petits plaisirs! En cherchant de nouvelles bidouilles pour mon blog, je suis tombée par hasard sur une astuce qui m'aurait fait gagner beaucoup de temps pour trouver l'endroit où insérer le code dans mon modèle de page, au lieu de ramer lamentablement.

Cliquer sur l'image pour l'agrandir

Il suffit en fait d'utiliser les touches Ctrl et F qui font apparaître un moteur de recherche à l'intérieur de la page web affichée (sur Firefox la barre de recherche apparaît dans le bas du navigateur, dans Explorer c'est une petite fenêtre qui s'ouvre).

Et alors il devient tout simple de suivre les instructions pour modifier le modèle HTML de son blog!... (ok je n'ai rien inventé, mais ça fait plaisir quand même).

(tous mes autres tutoriels sont dans l'index "informatique")

Le site du zéro, une bonne référence pour le webmaster débutant

A tous ceux qui démarrent le développement d'un site internet, et même pour ceux qui se sont déjà fait les dents, je conseille l'excellent "Site du Zéro" qui propose de nombreux tutoriels très bien expliqués, permettant de démarrer de zéro et d'aller assez loin en HTML, CSS et PHP notamment.

De tous les sites que j'ai consulté pour avancer, c'est sans conteste le plus clair et celui qui m'a le plus aidé. Je dirais que c'est le site qui permet de pouvoir exploiter les autres ressources ... et je l'ai apprécié au point d'acheter le non moins excellent livre rédigé par son fondateur Mathieu Nebra "Réussir son site Web avec XHTML et CSS" ! Je vous le conseille.