lundi 31 janvier 2011

Un plat de spaghettis

Il faut des spaghettis (pas trop fin, n° 5 par exemple), de l'huile d'olive, un talon de jambon, un oignon, une bière fraiche.

En bref
  • Faire cuire les spaghettis dans de l'eau salée en respectant le temps de cuisson du paquet
  • En parallèle/, faire revenir un oignon et des bouts de jambon
  • Egoutter les pates, et dresser dans un plat l'ensemble
  • et servez

Avec ces indications, la probabilité  de les réussir et de une chance sur 10 000.
Voir la cuisson

 Alors voici quelques détails, mais pas tous, pour faire les spaghettis.

oignon.jpg

Faire chauffer de l'eau, salée avec du gros sel, jusqu'à ébullition, une bonne quantité (en fait plus il y a d'eau, et mieux c'est).
L'eau bout, verser les spaghettis, brassez les doucement pour leur faire prendre  l'eau,mais pas trop énergiquement pour éviter que l'amidon des pates ne se mélange trop à l'eau.. On fait cuire, bonne ébullition, et
 un certain temps. en gros, c'est marqué sur le paquet, et de façon plus précise, il faut sortir les pates à un moment où si on devait les manger on les trouverait trop dures. Mais, une fois sorties et mises dans une passoire, elles continuent  de cuire, donc on doit les sortir lorsqu'elles ne sont pas encore cuites. avec l'habitude, on le voit à la couleur de la pate. Le mieux c'est de gouter, elles doivent encore être dures.

En parallèle, vous avez coupé un oignon en lamelles, l'avez mis dans un bol, arrosé d'un filet d'huile d'olive et bien brassé. l'interêt de mélanger l'oignon à l'huile en dehors de la poële est double. Vous avez besoin de moins d'huile, et vous obtenez une couverture d 'huile très uniforme sur l'oignon ce qui facilitera sa cuisson. Donc, l'oignon est oint d'huile, vous le jetez dans une poële antiadhésive (que vous avez bien fait chauffer avant, c'est une recommandation d 'utilisation générale des poëles avec revêtement antiadhésif), et vous le faites griller à feu vif au début, puis moyen, pour obtenir un effet croquant, comme typiquement la cuisine asisatique permet de faire. Quel temps de cuisson pour l'oignon ? Quelques minutes ! En fait cela dépend de la poële, du feu, de la qualité de l'oignon,de sa variété, de sa taille, de la taille des lamelles, de la cuovertured 'huile, de comment vous les aimez, de combien de temps vous les ferez cuire avec un autre ingrédient, donc c'est plutôt variable... Donc donner un temps de cuisson n'est pas facile, en fait on les cuit jusqu'à ce qu'ils soient cuits comme vous aimez ! Vous jetez maintenant le jambon (au départ une tranche épaisse, prise dans un talon de jambon, moins cher) et découpé en petit rectangles. Vous agitez oignon et jambon pour que l'ensemble soit chaud. Evidemment, vous brassez sans ustensile, mais uniquement par des mouvements adroits qui permettent de jeter les ingérdients en l'air et de les récupérer quand ils retombent dans la poêle.

Au final, vous mélangez pates et oignons et jambon, et rajoutez un filet d'huile d'olive. vous pouvez faire ce mélange dans la poële pour bien garder au chaud, en le faisant à feu vif, ce qui permet un effet grillé, séché de l'ensemble, et d'évacuer ainsi l'eau superflue des pates même bien égoutées. Bien sûr, les temps de cuisson préédents, des pates, de l'oignon, du jambon auront été réduits un peu en tenant compte à l'avance du temps que vous avez pensé consacrer à ce moment où vous réchauffez, grillez l'ensemble réuni.


Des malheureux rajoutent de la sauce tomate, du gruyère (et pourquoi pas du camembert !), etc. C'est comme en hiver, si pour sortir vous mettez 5 couches de vêtements. autant choisir correctement ses ingrédients, ses vêtements, en mettre peu, mais bons, et pouvoir ainsi apprécier les goûts et non pas un mélange de goûts.


Au final, la recette est simple, en fait semble simple, car tout se joue avec l'expérience, et une fois qu'on les a faites une trentaine de fois on commence à savoir un peu les faire.

Bien sur, des fous furieux les mangent dans des assiettes plates, laissons les faire, ils devraient mettre aussi des glaçons pour être certains qu'elles refroidissent plus vite encore ... d'autres avec du pain (là, ça devient grave !).




Et puis un jour, vous en mangerez en Italie, et là vous découvrirez ce que sont vraiment des pates, car jusqu'alors ce n'était que le niveau maternelle. En fait, vous 'avez jamais mangé de pates tant que vous n'êtes pas allé les manger en Italie.
les Italiens en sont à dire que les pates du Sud de l'Italie sont meilleures que celles du Nord car l'eau dans le Sud est de meilleure qualité, ils en sont donc au goût de l'eau. et puis leurs pates sont fraîches, etc.

PJ


PS : La bière dans la recette est utilisée pendant la préparation. Elle permet au cuisinier de se désaltérer, sachant que l'alcool est à consommer avec modération.
.

mercredi 26 janvier 2011

Tableau en HTML

BlogSpot ne prévoit pas de créer un tableau !!! On va s'en sortir avec l'une ou l'autre des techniques suivantes :
  1. soit en se plaçant en mode HTML en écrivant le message, et en saisissant directement le code HTML correspondant au tableau à insérer, ce qui suppose de connaître toutes les balises associées à la création de tableaux (voir ICI ), ce qui est rapidement une source d'erreurs et qui est vite fastidieux et technique. méthode réservée aux intrépides... aux geeks ... aux amateurs de codes ...
  2. soit en créant le tableau avec DREAMWEAVER, et en copiant ensuite le code HTML généré par DREAM, et en le collant en mode HTML dans le message  que vous rédigez dans BlogSpot.
Création de tableau dans Dreamweaver CS4
  • Lancer Dreamweaver CS4
  • Fichier / Nouveau, puis chosir " Page vierge"/ Type de page= HTML /mise en forme=aucune, puis Créer.
  • L'écran affiche deux parties,
    • en haut le code HTML, ce que vous allez créer s'insèrera automatiquement entre les balises <body> et </body>
    • en bas, la visualisation de ce que vous créez
  • Activer la commande Insertion / Tableau
  • Paramétrer le tableau, sachant que la largeur peut s'exprimer en pixels ou en %. Un pourcentage de 100 signifie que le tableau occupera une taille la plus large possible, correspondant à la largeur d'écriture de vos messages dans BlogSpot.
Ci-dessous un tableau créé avec Dreamweaver et dont le code HTML a été copié dans ce message en mode HTML :

VilleTempérature minimaleTempérature maximale
Lyon- 18degrés42 degrés
Moscou- 33 degrés38 degrés

Voici le code HTML correspondant :

<


Astuce : Dans DREAMWEAVER, pour copier le code HTML correspondant au tableau que vous avez créé, cliquez sur la mention <table>, ce qui a pour effet de sélectionner très précisément le tableau (ni plus ni moins), et passez, si vous n'y êtes pas déjà,  en affichage "Fractionné". Dans ce mode, copiez la partie sélectionnée en bleu (elle commence par la balise <table ...> et se finit par la balise </table> ).


Mise en forme du tableau
  • Une fois le tableau créé dans dreamweaver, vous avez avec ce logiciel de nombreuses possibilités  de mise en forme (alignement, colorisation du texte, du fond des cellules, redimensionnement).
  • Toutes ces commandes de mise en forme du tableau sont présentes dans une barre d 'outils en bas de l'écran.
  • ATTENTION : il y a 2 barres d'outils possibles :
    • si vous cliquez dans une cellule du tableau, vous avez la barre d'outils suivante, permettant de modier le contenu des cellules du tableau.

    • si vous cliquez sur la mention <table>, vous obtenez une autre barre d'outils, permettant cette fois-ci de modifier les propriétés du tableau global, comme la couleur générale du fond, ou sa largeur en pixels ou en pourcentage.

 ...

lundi 24 janvier 2011

Choisir le modèle de page du blog

Il s'agit de choisir, modifier, paramétrer l'allure générale du blog. C'est ce qu'on appelle le modèle de page ou encore le template si on utilise le mot anglais.

Le modèle de page permet de définir si il y aura une photo en bannière, le nombre de colonnes affichées dans le blog, les couleurs du blog, le fond ou l'image en fond, etc.
On a par exemple le choix parmi plusieurs dispositions comme suit :
  • nombre de colonnes : 0, 1 ou 2
  • position des colonnes : à gauche, à droite, des deux côtés 

Une fois un modèle choisi, on revient dans l'onglet "Présentation", afficher les "Eléments de la page".
On peut alors "ajouter un gadget" en choisissant dans quel élément l'ajouter.



  
Marche à suivre pour définir le modèle de mise en page

  • Se connecter à BlogSpot, Onglet "Présentation"
  • Accèder à "Outils de création de modèles"
  • Vous pouvez choisir votre modèle, puis le régler avec les actions sur la gauche Modèle / Arrière-plan / Mise en page / Ajuster la largeur / Avancé.
  • Par exemple, l'action :
    • "Mise en page" : pour chosir la présence et position des colonnes
    • "Avancé" : pour régler les couleurs
    • "Arrière-plan" : pour choisir, changer l'image de fond
  • Une fois les changements effectués, il faut les enregistrer :
    • Activer en haut à droite l'action "Appliquer au Blog"
    • Puis, activer "Retour sur Blogger"

A vous de jouer...

dimanche 23 janvier 2011

Ouvrir une vidéo dans une nouvelle fenêtre

Nous avons vu comment afficher une vidéo issue de Youtube ou d'un autre site d'hébergement.

La vidéo est intégrée dans la page web, comme ci-dessous :



Nous allons voir une technique qui permet de visualiser la vidéo dans une nouvelle fenêtre, ce qui permet de continuer de se ballader sur le blog, de parcourir d'autres articles, tout en ayant la vidéo ouverte.

Il faut :
  • copier le code HTML de la vidéo hébergée, le code qui permet son intégration dans un message
  • ouvrir le bloc-notes de Windows, copier ce code, et enregistrer le fichier sous le nom par exemple ma_video.html
  • héberger ce fichier sur un site comme MyDataNest présent à www.mdn.fm, dans un dossier public, et récupérer l'url d'accès à ce fichier
  • dans votre message, invoquer ce fichier via le lien précédent, avec pour la balise <a ...>  du lien le paramètre suivant :
    • onclick="window.open(this, 'Des liens dans Powerpoint', 'width=640,height=400'); return false;"

Appliquer un nouveau template

La mise en page de votre blog se change facilement en changeant le modèle de mise en page, c'est ce qu'on nomme le template. Vous pouvez trouver sur internet des templates gratuits(ou payants) spécialement adaptés à Blogspot. C'est le cas de ce site http://theblogtemplates.com .

Pour appliquer un nouveau template :
  • Choisir un nouveau template sur Internet, et il sera plus simple de le faire rapidement dans le processus de création de votre blog, de sorte que toutes les rettouches que vous eez amené à faire seront déjà prsentes ans le template final.
  • Télécharger le template sur votre Pc. Le fichier est généralement une archive .zip (un pack compressé deun ou plusieurs fichiers)
  • Décompresser le'archive dans l'explorateur, en faisant un clic droit sur le ficier zip, puis "Extraire" et suivez la procédure d'extraction qui au final vous affichera la présence d'un fichier .XML
  • Se connecter sur sur son compte Blogspot
  • Choisir l'onglet "Présentation", puis "Modifier le code HTML"
  • ESSENTIEL : Sauvegarder votre modèle existant par "Télécharger le modèle dans son intégralité"
  • Puis, transférer votre nouveau modèle, pour cela parcourir votre PC et sélectionner le fichier XML de votre nouveau modèle, puis cliquer sur "Transférer"
  • Enfin, "Enregistrer le modèle", et afficher le blog pour voir son nouveau look.
Si vous faites cette manipulation après avoir déjà travaillé le modèle initial, vous serez surement amené à faire des retouches, comme par exemple la taille de la photo en bannière qui varie souvent d'un modèle à l'autre.

    jeudi 20 janvier 2011

    Créer un SOMMAIRE d'accès à vos messages

    But : Permettre un accès simplifié aux messages du blog, par le biais d'un SOMMAIRE des messages

    Exemple : Dans ce blog, cette technique est mise en oeuvre via l'onglet "Cours BlogSpot" dans le menu horizontal supérieur.


    Principe : Créer le sommaire dans une Page et non pas dans un message

    Gadget PAGES pour accéder à une page de contact

    But : Accéder à une page de contact depuis un menu affiché sur le blog. C'est le cas dans ce blog, avec la page de contact accessible depuis le menu horizontal supérieur.

    Cela se fait en deux étapes, décrites ci-dessous :

    Etape 1 :  Créer la page de contact
    • Dans votre espace BlogSpot, accéder à "Publication d'un message"
    • Puis "Modifier les pages", puis "Nouvelle page"
      Il faut bien comprendre que l'on va créer une page qui ressemble en tous points à un message, mais la différence c'est qu'elle n'est pas liée dynamiquement au blog. Elle n'apparaît donc pas automatiquement dans la liste des messages, lors de l'affichage de l'accueil du blog. Pour voir cette nouvelle page, la seule solution est de créer un lien direct vers cette page. Blogspot pemet de créer 10 pages de message ayant cette caractéristique.
    • Saisir le contenu de votre page de contact avec des informations de mail, d'adresses, de plan (ne pas mettre vos coordonnées réelles !)
    Etape 2 : Publier la page
    • Là, vous publiez votre page : Il vous est alors proposé 3 choix ...
      • si vous souhaitez intégrer un gadget page en mode horizontal (1), ou vertical (2), ou ne pas utiliser de gadget (3).
        • Si vous avez choisi d'utiliser le gadget page, celui-ci est automatiquement intégré dans votre structure de blog.
        • A vous de choisir son emplacement, en haut horizontalement ce qui crée une ligne d'onglets, ou en colonne verticalement ce qui crée un menu vertical.
          • La position du gadget se retouche via l'onglet "Présentation" par un simple cliqué-glissé du gadget vers la zone d'accueil qu'on souhaite.



      • Si vous n'avez pas choisi d'utiliser ce gadget, votre page est inaccessible, tant que vous n'aurez pas créé un lien vers elle. Ceci est expliqué dans les lignes qui suivent.
      Accès à une page sans utiliser le gadget "Pages"
      • On peut accéder à une page de message, sans passer par le gadget "Pages"
      • Pour cela, il faut créer dans un message par exemple, un lien direct vers l'url de la page
      • C'est faciles achant que l'url d'une page est formée de la façon suivante :
                 nom_du_blog.blogspot.com/p/nom_de_page.html
        • Ainsi, dans ce blog, la page de contact, a pour adresse :
             pjece.blogspot.com/p/contact.html
             et voici un exemple de lien pour y accéder : Nous contacter
      • Pour déterminer sans erreur l'adresse d'une page, on l'affiche au moins une fois via le gadget "PAGES", puis lorsque le blog est affiché sur Internet, on survole à la souris dans le menu des pages l'onglet qui permet d'y accéder et on lit en bas de l'écran l'url qui s'affiche.
      --- --- --- compléments --- --- ---
      Pour information, sachez qu'il existe d'autres techniques pour créer des pages de contact. Comme par exemple, en créant une page avec un formulaire de contact et une page de remerciement pour l'internaute qui vous a contacté. Voir la technique.

      Gadget CHAMP de RECHERCHE en page principale

      But : Permettre à l'internaute de retrouver les messages dans votre blog, sur la base de mots clés qu'il saisit dans une zone de recherche.

      Méthode 1 : Prévu par BlogSpot, c'est donc très simple.
      • Il suffit de rajouter dans la présentation de votre blog le gadget "Champ de recherche".
      Méthode 2 : Insérer un code HTML spécifique dans un gadget HTML/JAVASCRIPT
      • Sur cette page, vous trouverez l'exemple d'un code HTML à intégrer.
      • Vous le copiez, et vous rajoutez dans la présentation de votre blog, un gadget HTML/JAVASCRIPT dans lequel vous collez le code HTML en question, après l'avoir personnalisé.
      A vous de jouer...

      Gadget LIBELLES pour classer les messages

      But : Organiser les messages que l'on écrit dans le blog, en les classant par catégories, appelées libellés.

      Préambule : Il faut bien comprendre qu'un blog peut rapidement contenir des dizaines de messages, et qu'il est difficile pour l'internaute de s'y retrouver. Donc, le principe des "libellés" va permettre de classer ces messages par catégorie (c'est à dire par libellé). Ensuite, on proposera sur le blog une liste de tous les libellés, l'internaute pourra alors en choisir un, et le blog affichera la liste de tous les messages correspondant à ce libellé.

      Impératif : Il faut associer un libellé à chaque message que l'on crée. Pour cela :

      • Lors de la création du message, ou lors de sa modification
        • Accéder, sous le message, à la zone "Libellés"
        • Saisir un nouveau libellé, ou afficher les libellés et en choisir un (ou plusieurs, ce qui est possible)
      • Publier
      Ajouter le gadget "Affichage des libellés"
      • C'est ce gadget qui se charge d'afficher la liste des libellés pour l'internaute
      • Dans Blogspot, accéder à l'onglet "Présentation"
      • Choisir un élément dont l'emplacement vous convient, et faire "Ajouter un gadget"
      • Choisir le gadget "Libellés", nommer le et paramétrer le
      • Enregistrer le gadget, puis enregistrer la structure de la présentation
      • Tester son fonctionnement
        • Le clic d'un libellé provoque l'affichage de tous les messages ayant ce libellé
        • L'affichage va du plus récent au plus ancien

      Pourquoi plusieurs libellés pour un même message ?
      Tout d'abord, on peut associer plusieurs libellés à un même message, tout simplement en les séparant par une virgule.
      A quoi cela sert ? Cela permet d'accéder à un même message par plusieurs critères. En effet, il est parfois difficile de classer un message qui peut concerner deux thèmes différents. En associant à ce message 2 libellés correspondant chacun à un thème, on se donne plus de facilité pour retrouver le message.

      Url associée à l'ensemble des messages d'un même libellé
      • Pour information, l'url associée à un libellé donné est du type :
        nom_du_blog.blogspot.com/search/label/nom_du_libelle
      Cette url permet d'afficher l'ensemble des messages ayant le libellé en question. Les messages sont afffichés en commençant par le plus récent en terme d'ordre de publication.

      Les libellés sont-ils obligatoires ?

      • Il n'est pas obligatoire d'associer un libellé à tout message.
      • MAIS un message sans libellé ne pourra pas être accessible via le gadget "Affichage des libellés".
      • Par contre, il reste accessible par le gadget "Archives du blog"

      Gadget HTML pour l'heure exacte

      But : Insérer l'heure de l'horloge parlante,

      • pour la rendre visible sur la page d'accueil de votre blog
      • comme vous pouvez l'observer sur mon blog http://pjece.blogspot.com 


      Manipulations :
      • Récupérer le code HTML de l'applet (applet = petite application web, ici celle qui affiche l'heure)
        • Accéder au site http://www.horlogeparlante.com/
        • Dans le menu de gauche, accéder à "Heures et services" puis "L'horloge sur votre site"
          • Configurer l'horloge : étapes 1 à 4 en s'aidant de l'aperçu proposé
          • Obtenir le code : Etape 5, et copier le code proposé.
      • Revenir à votre blog, en conception, et accéder au lien "MISE EN PAGE"
        • Choisir la zone où sera le gadget de l'horloge et alors activez "Ajouter un gadget"
        • Choisir le gadget "HTML / JAVASCRIPT",  qui permet d'insérer du code HTML.
          Très pratique, car  on peut mettre tout ce qu'on veut dès lors que c'est du langage HTML
        • Saisir un titre (non obligatoire) qui apparaîtra au dessus du gadget sur la page.
          • Coller dans la zone "Contenu" le code HTML copié depuis le site de l'horloge parlante
          • Enregistrer le gadget, puis enregistrer la structure de la présentation
          • Tester en affichant la page d'accueil de votre blog.
          • SI L'AFFICHAGE EST TRONQUE,
            • En LARGEUR : ajuster la largeur de votre blog, via la personnalisation de votre modèle
            • En HAUTEUR :  en mode conception, à partir de la mise en page, vous pouvez "modifiez" le gadget Horloge que vous avez inséré.
              Dans l'écran du gadget, dans la zone de code HTML, repérez information height : "...px" qui traduit la hauteur en pixels de votre horloge à l'écran. Changez cette valeur en saisissant par exemple 100 ou  plus. Testez.

      Gadget LISTE de LIENS en page principale

      But : Il s'agit d'afficher quelques liens que vous jugez utiles. Ils figureront sur une colonne du site (si vous avez choisi une présentation avec colonnes).

      Marche à suivre
      • Dans Blogspot, onglet "Présentation"
      • Choisir dans la structure de la page une zone et activer "Ajouter un gadget"
      • Choisir le gadget "Liste des liens"
      • Compléter l'écran avec les liens que vous jugez utiles
      • Valider, tester.
      Petit défaut de ces liens, obligeant à faire de la haute couture ...
      • Comme vous le remarquez, ces liens ne s'ouvrent pas dans une nouvelle fenêtre.
      • Il va falloir compléter le code HTML avec la mention target='_blank'. Votre oeil de lynx a sûrement remarqué que ce sont des apostrophes qui encadrent le mot _blank alors que dans ce type de complément Html, nous avions jusqu'à maintenant toujours utilisé des guillemets. BRAVO, quelle acuité visuelle ! Il se trouve que dans la page de code Html où nous devons intervenir, ce sont les apostrophes qui sont utilisées et non les guillemets, et on s'adapte donc.
      Allons-y ... et soyez précis, rigoureux, juste, attentif, concentré, ... comme d'habitude quoi !
      • Dans BlogSpot, onglet "Présentation", puis "Modifier le code HTML"
      • ESSENTIEL : Cocher la petite case carrée nommée "Développer des modèles de gadget"
      • Dans la grande page HTML, il faut retrouver la zone correspondant au gadget "Liste des liens", (se dit widget linklist en anglais )
        • Pour cela, rechercher le mot "linklist" (utiliser la commande CTRL F et ses boutons associés Précédent / Suivant pour vous approcher de la bonne ligne)
        • Ca y est vous avez repéré la ligne <b: widget id='Linklist' ...qui signale le gadget recherché
        • 6 ou 7 lignes dessous, repérer l'instruction
          <a expr:href='data:link.target>
        • Compléter l'instruction comme suit
          <a target='_blank' expr:href='data:link.target'>
          , en notant que le rajoût en rouge est encadré par des espaces de chaque côté.

      • Puis "Enregistrer le modèle" et tester la bonne ouverture des liens.

      mercredi 19 janvier 2011

      Insérer un lecteur de radio

      But : Permettre à vos visiteurs d'écouter la radio, en intégrant un lecteur de radio dans un gadget HTML

      Marche à suivre
      • Rien de difficile, le principe étant d'intégrer le lecteur de radio dans un gadget HTML/JAVASCRIPT.
      • Où trouver le code HTML du lecteur de radio ?
        • On peut accéder à un site de radio en ligne. En général, ces sites propsent d'intégrer un lecteur dans votre blog, et pour cela proposent le code HTML à incorporer.
          Ce n'est pas toujours facile de trouver ce gadget dans un site de radio
        • Vous pouvez aussi aller sur le site http://www.radios-direct.fr/, qui propose des lecteurs permettant d'écouter plusieurs radios en direct.
      TEST
      • Tester votre lecteur, qui nécessite parfois l'installation d'un codec ou autre applicatif en complément de votre navigateur.
      LECTEUR issu de www.radios-direct.fr


      Téléchargement de documents

      But : Permettre le téléchargement depuis votre blog de documents WOrd, PDF, etc.

      Dans Blogger, ce n'est pas possible directement!

      Il faut que votre document soit présent sur un espace disque sur Internet. Ainsi, vous pouvez vous inscrire chez Mydatanest, à l'adresse http://www.mdn.fm/, qui est un service d'hébergement de documents. Vous pourrez y déposer vos documents word et pdf, récupérer leur adresse internet (lien url).  Ensuite, dans Blogspot, vous insérerez un lien vers ces documents en pensant bien à faire une cible de type nouvelle fenêtre.

      Exemple

      Marche à suivre
      • Etape 1 : Disposer d'un document Word (en format 2003 au plus !!!) et d'un document PDF sur votre PC
        • Sur votre PC, créez ou utilisez un document Word existant
        • Convertissez le en format PDF
          • Office 2007, Office 2010 permet d'enregistrer en format Adobe PDF
          • Ou utiliser un service web comme http://www.con2pdf.com/ qui vous permet de convertir des documents dans le format pdf.
      • Etape 2 : Accédez au site Mydatanest, et créer un compte gratuit
        • Dans ce compte, créer un nouveau dossier (via New Folder) et le nommer "Doc_pour_blog". TRES IMPORTANT lui attribuer des permissions d'accès publcis
      • Etape 3 : Déposez (=Upload) les 2 documents WORD et PDF sur votre nouvel espace MyDataNest
        • Accèder à votre dossier
        • Sélectionnez successivement chaque fichier et pour chacun affichez et copiez le code HTML du lien qui définit l'emplacement du fichier.
      • Etape 4 : Intégrez les documents dans un message BlogSpot
        • Associez ces deux liens à deux textes dans votre message dans BlogSpot
        • Et finalisez en rajoutant l'ouverture du lien dans une nouvelle fenêtre, comme cela a été souvent expliqué dans d'autres messages.
        • Publiez votre message
      TEST
      • Affichez votre blog, faire le test de téléchargement des deux documents, en ayant pris soin auparavant de vous déconnecter de Mydatanest si vous étiez encore connecté.
      • C'est tout l'interêt d'avoir précédemment créé un dossier avec des permissions publiques, ce qui rend le téélchargement possible pour des internautes qui eux ne seront pas logués sur votre compte Mydatanest.
      BUG de Mydatanest
      • Le téléchargement de documents Word en version 2007 ne fonctionne pas sur cet hébergeur. Le document une fois chargé sur Mydatanest devient un document zippé ! Il faut donc stocker sur Mydatanest des documents en version 2003.
      --- --- --- Compléments --- --- ---

      Conseils sur les formats des fichiers proposés en téléchargement
      • C'est dommage, mais d'un autre côté, lorsqu'on souhaite mettre à disposition des documents, il est préférable de les proposer dans une version un peu ancienne, car tous les internautes ne sont pas équipés de la dernière version de logiciel. Si le format peut poser problème, il faut indiquer clairement le format du document proposé en téléchargement, et si besoin indiquer l'outil de lecture nécessaire.
      Exemple : Voici un plan autocad (fichier au format ...).
      Pour lire ce fichier vous avez besoin du logiciel Autocad, ou d'un lecteur multi-format (on appelle ce type d 'outil un viewer), comme par exemple l'excellent logiciel XXXX que vous pouvez télécharger ici.

      Retouches de photos en ligne

      But : Opérer quelques retouches de base sur les photos (colorisation, cadrage, taille, ajout de texte) en utilisant des outils en ligne, donc accessibles facilement et simples d'utilisation.
      Bien sûr, pour des retouches plus complexes, les habituels produits de retouche gratuits (PhotoFiltre, Gimp, etc.) ou payants (Adobe PhotoShop, PainShop Pro, etc.) seront nécessaires mais sont plus complexes à utiliser.

      Bonne nouvelle : Google propose un stockage en ligne des photos : PICASA WEB ALBUMS

      • Avec votre compte Google utilisé pour accèder à BlogSpot, vous bénficiez de différents services, dont le service d'hébergement de photos en ligne nommé Picasa Album Web à l'adresse http://picasaweb.google.com/ 
      • Se connecter à cette adresse, s'identifier, et vous avez la surprise de voir qu'un dossier portant le nom de votre blog est présent, qu'il renferme des images que vous avez inclus dans votre blog.
      • Picasa Album Web héberge les photos, pemet de les transfrer dans les deux sens PC<->Internet,  les organise en dossiers (encore appelés albums), permet de les partager avec des amis, à qui vous envoyez par mail des invitations à consulter vos dossiers (vos albums) en totalité ou en partie.

        Remarque : L'outil pour "Ajouter des photos" entre votre PC et votre espace Picasa Web oblige d'installer un contrôle Active X. Vous pouvez vous en passer en choisissant l'outil de transgert simplifié, qui pemet des chargements par pack de 5 photos au mieux.
      Retouche des photos en ligne
      • Sur vos photos hébergées sur Picasa Album Web, vous avez accèdé via la rubrique "Modifier" à l'application PicNik, qui fournir un atelier de retouches.
      • Vous utilisez ces outils, vous appliquez les modifications, et les enregistrez sur la photo en ligne ou vous en faites une nouvelle copie.
      Exemples de retouches
      • Changement des dimensions
      • Rognage (c'est à dire recadrage par le choix d'une partie de la photo)
      • Coins arrondis, avec couleur de fond sur les coins

      PNG - Redimensionné de 800 px de large à 400 de large, avec proportions respectées

      PNG - Recadrage en 310 px de large et 180 de haut - Rajout de texte

      Coins ARRONDIS - ORANGE

      Coins arrondis - BLANC
      Remarques sur la transparence : image avec un format spécifique
      Lorsqu'on demande des coins arrondis sur un photo, bien souvent l'outil de retouche le fait facilement, mais une fois la photo affichée sur un fond dans votre blog, on constate que les coins sont visibles sous la forme d'une couleur de fond. ils seraient invisibles si on n'avait la possibilité dans l'outil de retouches de choisir la couleur de fond du coin une fois arrondi, et de la chosir identique à la couleur du fond dans lequel on intègre la photo arrondie.
      Si l'outil de retouches propose de créer des coins arrondis avec fonds transparents, alors l'image se fondra dans le décor de fond, et les coins arrondis seront parfaits, sans fond désagréable.
      Mais, pour cela, il faut utiliser un format d'image qui gère cette transparence. Typiquement, le format JPEG ne le fait pas, et par contre le format PNG le fait.
      Vous devrez donc travailler avec des photos dans ce format PNG. Si votre photo initiale est une photo au format JPEG, l'outil PAINT présent nativement avec Windows vous permettra de l'enregistrer sous le format PNG



      Insertion d'un plan Google Map

      But : Insérer dans un message une carte interactive issue de Google Map

      Marche à suivre pour un PLAN
      Exemple : Insérer le plan ci-dessous

      Agrandir le plan



    • Accèder à Google Map (http://maps.google.fr/)





    • Saisir l'adresse d'un lieu (exemple "place Bellecour, Lyon")





    • Vous avez le plan sous les yeux, cliquer sur l'icône du lien (2 petits maillons) à gauche de la carte





    • Sélectionner la ligne "Code HTML pour site web" et copier tout le texte






      • Accèder à Google Map (http://maps.google.fr/)
      • Saisir l'adresse d'un lieu (exemple "place Bellecour, Lyon")
      • Vous avez le plan sous les yeux, cliquer sur l'icône du lien (2 petits maillons) à gauche de la carte
      • Sélectionner la ligne "Code HTML pour site web" et copier tout le texte
      XXXXXXXXXXXXXXXXXX



      Logo de la ville de Lyon



      IMAGE




      ... Si besoin, aller dessous sur Personnaliser pour pouvoir préciser la taille de la carte)
      • Revenir dans votre message BlogSpot
        • Passer en "Modifier le code HTML"
        • Coller le code que vous avez copié précédemment
        • Le code HTML est dans une balise <iframe ...>. Vous pourriez modifier certains paramètres comme ceux de la taille.
        • Revenir à "Rédiger"
      • Publier votre message pour visualiser le plan
      Marche à suivre pour un lien d'accès
      • Ce n'est pas un plan, mais un lien d'accès dans une nouvelle fenêtre :
      • Pour cela, accéder à Google Map (http://maps.google.fr/), saisir l'adresse du lieu (exemple "Place Bellecour, Lyon"), vous avez le plan sous les yeux, cliquer sur la mention lien en haut à droite de la carte.
      • Sélectionner la première ligne et copier tout le texte
      • Revenir dans votre message BlogSpot
      • Saisir le texte qui portera le lien, ici "Accès Place Bellecour"
      • Activer la commande "Associer" et coller le lien précédement copié.
      • Dernier réglage : le lien tel qu'il est construit ne s'ouvre pas dans une nouvelle fenêtre. Il vous reste :
        • à passer en mode HTML
        • à repérer la balise <a href="http://maps.google.fr/maps?... .... ...>Accès Place Bellecour</a>
        • à compléter comme suit <a target="_blank" href="http://maps.google... ... ...>
        • Revenir à "Rédiger"
      • Publier votre message pour tester le lien et son ouverture dans une nouvelle fenêtre
      Remarques
      1. Sous Google Map, lorsque la carte du lieu est affichée, l'adresse url en haut du navigateur ne correspond pas au lieu en question. C'est pourquoi il faut passer par la mention "lien".
      2. Avec d'autres sites cartographiques, comme Mappy, ViaMichelin, la méthode est analogue. Il faut rechercher le code embed.

      Insertion d'une vidéo

      But : Afficher l'écran d'une vidéo dans le message, et pouvoir lancer sa lecture.


      La vidéo à intégrer est sur Youtube
      • C'est très simple depuis que Google a racheté YouTube
      • Dans le message, activer la commande "Insérer une vidéo" de l'éditeur (Petit clap de film)
      • Choisir :
        • Soit "Depuis YouTube", puis saisir un mot clé pour afficher des vidéos correspondantes et sélectionner une vidéo proposée
        • Soit "Mes vidéos YouTube" et sélectionner dans votre liste personnelle de vidéos une vidéo à intégrer
      • Quelques instants après, la vidéo s'affiche dans votre message. C'est fait.
      • La vidéo est intégrée dans une balise <object ...>, elle-même intégrée dans une balise <div...>
      • Redimensionner  : on intervient sur les paramètres height="..." et/ou width="..." A PLUSIEURS ENDROITS.

      La vidéo est sur un site d'hébergement comme DailyMotion
      • Cette situation fournit de nombreux réglages d'affichage de la vidéo
      • Accèder à Dailymotion, et visualiser la vidéo qui vous intéresse
      • Cliquer sur le bouton </>Code Embed  (en anglais "to embed" = incorporer)
      • Vous obtenez un écran pour personnaliser l'affichage de votre vidéo dans votre message, à savoir régler la taille, les couleurs, la compatibilité Ipad, Iphone, etc.
        • Faire les réglages adéquats
        • Copier le code HTML embed
      • Revenir dans votre message BlogSpot
        • Passer en "Modifier le code HTML"
        • Coller le code que vous avez copié précédemment
        • Le code HTML est dans une balise <iframe ...>. Vous pourriez modifier certains paramètres comme ceux de la taille.
        • Revenir à "Rédiger"
      • Publier votre message pour visualiser la vidéo intégrée

      BORN TO BE WILD, CHAINSAW & BRUCE SPRING
      envoyé par runawaydream. - Regardez la dernière sélection musicale.

      La vidéo à intégrer est sur votre PC
      Dans ce cas, vous pourriez la déposer sur YouTube, sachant que votre compte Google donnant accès à BlogSpot est aussi un compte donnant accès à YouTube.
      Mais si vous ne souhaitez pas la charger sur Youtube, l'intégration dans le message se fera sans avoir besoin de charger la vidéo sur un site d'hébergement comme Youtube, Dailymotion, etc.
      • Dans le message, activer la commande "Insérer une vidéo" de l'éditeur
      • Choisir "Sélectionner une vidéo à importer
      • La sélectionner dans un dossier de votre PC et cliquer sur "Importer"
      • Quelques instants après, elle s'affiche dans votre message.
      • C'est fait.
      • La vidéo est intégrée dans une balise <object ...>
      • Redimensionner  : on intervient sur les paramètres height="..." et/ou width="..."

      Rque : L'internaute ne peut pas télécharger la vidéo depuis votre message sur internet.

      mardi 18 janvier 2011

      Insertion d'image

      Insertion d'image et changement des dimensions



      • Directement par un copié / collé depuis une image prise sur le web
      • C'est le cas de l'image suivante, trouvée via Google Image, puis une  fois affichée en taille réelle, elle a été copiée puis collée dans le message Blogspot.
      • ATTENTION :
        • Le collage est simple et sans autre action. C'est à dire :
          • pas de retouche de taille
          • pas de retouche d'alignement
          • pas d'essai de déplacement de l'image



      Code html minimal pouvant être associé à l'insertion d'une image
      • <img src="emplacement/nom_image">
      • C'est le cas de l'image précédente, suite à un collage simple.

      Code html général associé à l'insertion d'une image
      • <img src="emplacement/nom_image" param1="valeur1" param2="valeur2" ...>
      • Exemples de paramètres
        • title="Cliquer pour agrandir" .......... légende bulle associée à l'image
        • height="200"................ hauteur de l'image en pixels
        • width="400" ................ largeur de l'image en pixels
        • border="2" ................. bordure de l'image en pixels
        • align="left" ................... image positionnée à gauche du texte
      • Plus de détails ICI
      Redimensionner l'image
      • Méthode 1 : Dans le message, sélectionner l'image insérée et agir sur les commandes de taille proposées
        • Cela a pour effet de rajouter les paramètres height="..." et width="..." dans le code HTML de l'image.
        • C'est le cas ci-dessous, l'image précédente a été demandée en mode "Petit"
      • Méthode 2 : après avoir inséré l'image par un simple copié/collé
        • Passer en "Modifier le code HTML",
        • Rajouter ou modifier le paramètre height=... ou width=...
        • SI UN SEUL des paramètres est mentionné, le deuxième est calculé automatiquement en fonction des proportions de l'image d'origine.
        • Si les deux paramètres sont mentionnés, il faut veiller à ce que les modifications des deux paramètres se fassent dans le respect des proportions d'origine, sans quoi l'image sera redimensionnée mais surtout déformée.
      Alignement de l'image sans déplacement à la souris
      • Après un collage simple, on sélectionne l'image et on agit sur les commandes d'alignement proposées
        • Cela a pour effet d'encadrer l'image par la balise
          <div style="text-align: valeur;"> et </div>,
          ... avec valeur=left ou center ou right.
        • C'est le cas ci-dessous, l'image précédente a été demandée en mode "Centrée"

      Autre technique de positionnement

      • Après un collage simple, on passe en mode HTML et
      • On rajoute le paramètre align="valeur" dans la balise < img src="..." > qui devient
        <img align="valeur" src="...">
      • C'est le cas ci-dessous, l'image précédente a été positionnée avec align="right"

      Créer un lien vers un site web

      But : Créer un lien vers un site web, et ouverture du lien dans une nouvelle fenêtre si besoin.

      Exemple
      • Créer un texte comme  le suivant : Voir le site du Louvre, texte qui porte un lien vers le site web du musée du Louvre
      Comment le faire ?
      • Saisir le texte « Voir le site du Louvre », et le sélectionner
      • Activer la commande « Associer » de l’éditeur, et saisir l’adresse www.lelouvre.fr
      • Si besoin, cocher la case "ouvrir ce lien dans une nouvelle fenêtre".
      • Valider.
      Comment le tester ?
      • Le bouton APERCU en bas du message permet de voir le message, sa disposition, mais ne permet pas  de tester le lien.
      • Il faut PUBLIER le message, puis demander d’afficher le message. Là, le lien est testable.

      Nouvelle fenêtre ou nouvel onglet ?
      • Ce choix ne se fait pas par le code HTML. C’est un réglage du navigateur utilisé par l’internaute.
      • Exemple dans Firefox Mozilla : Menu Outils / Options / Onglets

      Saisie du premier message

      But : Saisir un message et le mettre en forme
      • Hélas, ne pas s’attendre aux possibilités de Word.

      La mise en forme permet principalement de changer :
      • la taille, la couleur, la police, le gras, l’italique, souligné, et de faire des énumérations

      Énumérations
      • On peut créer des énumérations avec des listes à puces ou des listes numérotées.
      • On ne peut pas facilement changer les puces ou les formats de numérotation.
      • On peut créer des listes hiérarchisées, à plusieurs niveaux de puces ou de numéros.
        • Créer les différents éléments de la liste et leur appliquer une puce ou un numéro
        • Pour décaler vers la droite, cliquer dans la ligne et au clavier activer la touche Tabulation
        • Pour un décalage vers la gauche, utiliser les touches MAJ et Tabulation
      Choix de l’éditeur
      • L’éditeur permet la saisie et la mise en forme de votre message.
      • Blogspot propose deux éditeurs au choix : Pour choisir :
        • Accéder à la zone « Paramètres »
        • Puis paramètres Globaux, puis « «Sélectionner un éditeur de messages»
        • Puis choisir « Éditeur mis à jour »recommandé
      Enregistrement du message
      • PUBLIER pour une mise en ligne immédiate sur Internet
      • Enregistrer en mode brouillon : sauvegarde du message, mais il n'est pas visible sur Internet. Il faudra le réouvrir, et activer "Publier" pour le rendre accessible.
      Classement / Repérage du message par les libéllés
      • Saisir un libellé (ou en choisir un existant) pour classer le message dans une catégorie. Un message peut être repéré par plusieurs libellés.
      Options
      • Commentaires : permet les réactions des internautes
      • date et heure de message : par défaut la date est celle de création. On peut changer de force la date, ce qui permet des reclassements des messages.


        Inscription sur Blogger

        S’inscrire sur Blogger

        Plate-forme de blog

        Pour s’inscrire, il faut :

        • Avoir un compte Google.
          • Avoir une adresse gmail n’est pas suffisant, si cette adresse est isolée et n’est pas associée à un compte Google.
          • Créer un compte Google est rapide, immédiat et gratuit.
          • Un compte Google permet d’accéder aux divers services de Google.
        • Disposer d’un téléphone portable : le processus d’inscription provoque l’envoi d’un code numérique par SMS, qu'il faut ensuite saisir à l’écran pour finaliser l’inscription.
          Cela peut se faire avec n’importe quel portable, le vôtre ou celui d’une connaissance.


        Lors de la procédure d’inscription :

        • Nom d'affichage : C’est le nom qui figure en base des messages de votre blog. Vous pouvez prendre vos initiales par exemple.
        • Titre du blog : C’est du texte libre, quelques mots qui forment une bonne accroche pour votre blog. Vous pouvez le modifier par la suite, à tout moment.
        • Adresse url : C’est l’adresse web du type http://adresse.blogspot.com que l’internaute saisira dans un navigateur internet pour accéder à votre blog. Là aussi, vous pouvez la changer par la suite. Cette possibilité de changement est rare et c’est un bel avantage que propose Blogspot.
        • N° de téléphone mobile : Pour recevoir un code via un SMS. Sans inquiétude, vous pouvez communiquer votre n° de mobile, vous ne serez pas inondé de messages sur ce n° par la suite.
        Lors de la création du blog

        • Modèle de blog : On vous demande de choisir un modèle, c'est à dire un look pour votre blog. Là encore, vous pourez ensuite le changer, et pour un modèle donné, vous pourrez changer les différentes couelurs, la rpésentation avec une, deux ou trois colonens, l'image de fond, etc.


        Insérer un diaporama

        • Créer un diaporama avec PowerPoint (3 à 4 diapos) et l'enregistrer sur le Pc.
        • Héberger le diaporama sur le site SlideShare.
          • Ce site est spécialisé dans l'hebergement de diaporamas
          • Il faut vous inscrire ou utiliser un login Facebook si vous en avez un. (Dans ce cas, les diaporamas que vous installerez ne seront pas visibles sur votre page Facebook si vous ne le demandez pas.)
          • Choisir l'option UPLOAD, puis Publicly pour transférer votre diaporama sur SlideShare
        • Une fois le transfert effectué, puis la conversion effectuée, il faut afficher son diaporama, puis ...
        • Copier le code HTML permettant l'incorporation (en anglais to EMBED = incorporer )
        • Revenir dans BlogSpot, et coller ce code HTML dans votre message en mode HTML
        MEMOIRE : Penser à noter vos codes SlideShare si vous en avez créés.


        Redimensionnement du diaporama

        • On peut régler les dimensions du diaporama
        • Dans le message BlogSpot, passer en mode HTML
        • Repérer, puis changer les paramètres height= »… » et width= »… »


        Exemple

        Insérer une photo en bannière de blog

        A savoir
        • La commande "Présentation" affiche la struture du blog.
        • Reperer la zone "en-tête", et activer "Modifier".
        • L'écran permet l'insertion d'une photo, et indique quelle largeur en pixels sera nécessaire. Noter cette largeur.
         Préparation de la photo
        • Sur Google Image, choisir une photo dont la largeur est supérieure ou égale à la largeur précédente.
        • Télécharger cette photo sur le PC
        • Ouvrir cette photo avec Microsoft Picture Manager (fourni avec Word et Excel). Pour cela, à partir de l'explorateur, clic droit sur la photo, puisn activer la commande "Ouvrir avec ...Picture Manager".
        Recadrer, redimensionner la photo avec Microsoft Picture Manager
        • Activer dans la barre de menus la commande "Modifier les images"
        • Activer la commande "Rogner", puis définir la zone interessante dans la photo et valider. La zone retenue doit au moins avoir la largeur demandée par le blog.
        • Passer maintenat à la commande "Redimensionner"
        • A droite, saisir la largeur personnalisée correspondant à la largeur souhaitée et valider. La hauteur s'adapte automatiquement.
        • Enregistrer la photo
        Dans BlogSpot, intégrer l'image
        • Onglet "Présentation", puis "Modifer" la zone d'en-tête
        • Importer l'image à partir du bouton "Parcourir".
        • Choisir le mode de visibilité du titre (si besoin, changer le titre lui-même)

        Changer la présentation du titre qui s'affiche sur la photo
        • Onglet "Présentation", puis "Outils de création de modèles"
        • Choisir à gauche "Avancé" pour una ccès aux couleurs des éléemnts
        • Choisir "Titre du blog", et alros régler la couleur, la taille, la police. en dessous, l'écran affiche le résultat des modifications
        • Puis enregistrer les modifications par "Appliquer au blog"
        • Puis "Retour à Blogger"

        Changer l'ordre des messages

        Principe chronologique d'affichage des messages

        • Par défaut, le message le plus récent apparaît en premier sur le blog, tous libellés confondus.
        • Quand on invoque un libellé précis (par le biais du gadget Libellés), c'est encore le message publié le plus récemment qui apparaît dans le libellé en question.
        ATTENTION : il s'agit ici de la notion de PREMIÈRE publication.

        Concrètement

        • Message 1 créé et publié pour la première fois à 8:00. Ce message_1 figure en tête du blog.
        • Message 2 créé et publié pour la première fois à 8:30. Ce message_2 passe en tête de blog.
        • Message 1 modifié et republié à 8:45. Le message_2 reste affiché en tête de blog.
        • Pour repasser Message_1 en tête de blog, il faut :
          • Changer manuellement sa date de publication
          • C'est à dire, afficher le message en vue de le modifier
          • Activer le lien "Options"
          • Changer sa date/heure de publication pour lui attribuer une date plus récente que tous les autres messages qu'on veut reléguer derrière lui.
        Exemple d'application
        • Pour la création d'un message affichant une table des matières de liens vers d'autres messages.
          • Cette technique utilise aussi la technique des liens permanents.
          • Concrètement, 
            • Tous les messages évoqués dans la table des matières et la table des matières elle-même seront marqués par un unique libellé spécifique
            • Le message affichant la table des matières devra toujours avoir une date de publication plus récente que celles de tous les messages liés dans la table des matières

        Lien permanent

        But : Récupérer l'adresse url d'un message, pour faire un lien qui mène directement vers ce message. Sans cette technique, l'url d'un message est composée de la date d'édition suivie d'une très grande suite de chiffres.

        Test http://pjece.blogspot.com/2011/01/msg-test-lien-permanent.html

        Marche à suivre pour activer les pages de messages (ou liens permanents)
        • Paramétrage préalable des commentaires
          • Connexion BlogSpot, onglet "Paramètres", puis lien "Commentaires"
          • Régler "Positionnement du formulaire de commentaire " sur autre chose que "Message ci-dessous intégré"
        • Paramétrage des archives
          • Onglet "Paramètres", puis lien "Archivage"
          • Régler "Fréquence d'archivage" sur autre chose que "pas d'archivage"
          • Puis, "oui" pour "Valider les pages de messages"
        Utilisation de ces pages de messages
        • Une fois les pages de messages activées, lorsque un lien vers un message est cliqué dans le blog, le blog affiche le message, et l'adresse url du message est affichée dans la barre d'adresses du avigateur
        • Il suffit alors de la relever pour se servir de cette url et l'associer à un lien.
        • Ceci permet dans un message de saisir un lien direct vers un autre message
        • Exemple : lien vers une page de test qui figure en début de ce message
        Exemple d'application
        • Créer un message appelé "Sommaire", dans lequel on saisit une liste de liens directs vers d'autres messages. Cette liste fait ainsi office de table des matières.
        • Si en plus ce message "Sommaire" est réalisé sous forme d'une page, c'est encore plus pratique.

        lundi 17 janvier 2011

        Changer URL et TITRE du blog

        Blogspot permet de changer l'url du blog une fois que celui-ci est créé. C'est une option rare pour un blog, et qui est très utile.

        Changer l'URL
        • Dans BlogSpot, accèder à l'onglet "Paramètres", puis onglet "Edition"
        • Saisir la nouvelle url et procéder à sa validation.
        • ENREGISTRER les PARAMETRES
        Changer le titre
        • Dans BlogSpot, accèder à l'onglet "Paramètres", puis onglet "Général"
        • Saisir le nouveau "Titre"
        • En bas de la page, valider ENREGISTRER les PARAMETRES

        Saisir le nouvelle url et précéder à sa validation.

        Image avec lien vers un site

        But : Insérer une image et associer à cette image un lien vers un site web, en prenant garde que le site web s'ouvre dans une nouvelle fenêtre.

        Exemple : Logo Google avec lien vers la page de Google.




        Marche à suivre
        • Insérer l'image du logo de Google dans le message BlogSpot, et associer à cette image un lien vers le site web de Google.
        • Aller dans le code HTML du message
        • Repérer la balise <a href="http:///www.google.fr"> spécifique de votre lien ( utiliser si besoin l'outil de recherche CTRL F)
        • Et rajouter le paramètre target="_blank", à la balise <a ... >, ce qui donne
          <a target="_blank" href=http://www.google.fr/>
        Complément
        Il est intéressant d'afficher un message bulle lorsque la souris survole l'image.Le message indique une action, un commentaire. Par exemple, pour rajouter le commentaire "Clic pour afficher Google" lorsque l'internaute survole le logo Google, il faut intervenir dans le code HTML :
        • Passer en mode HTML dans le message BlogSpot
        • Repérer la balise <img ...> correspondant au logo que vous avez inséré
          • Dans notre cas, c'est <img  height="117" src="........jpg" width="200" />
          • Compléter comme suit :
            <img  title="Clic pour afficher Google" height="117" src="........jpg" width="200" />
          • Le paramètre Title="..." permet l'affichage d'un commentaire.
        • Revenir à "Rédiger", puis Publier le message et tester le survol du logo.