Blog 2013 - Séance 4

Séance 4

Point 1 - Mise en page

• Afficher la mise en page de votre site, et alors ajouter un gadget de type "HTML/Javascript" pour y insérer le code HTML d'une "horloge parlante". Pour des indications, voir ICI

---

Intermède
Avant de passer au point 2, vous aurez besoin d'une rapide introduction au HTML.

Certaines mises en forme ne sont pas proposées par Blogspot quand vous créez votre message. Pour ces mises en forme, vous êtes alors obligé de passer en mode HTML, et de connaître un minimum ce langage.

Principe :
Je veux écrire un mot en gras en utilisant le langage HTML.

On passe en mode HTML et on écrit la séquence suivante :

<strong>quelques mots</strong>

La séquence <strong> s'appelle une balise, elle signale qu'on doit afficher en gras. La séquence </strong> est une balise de fin, qui signale qu'on doit arrêter d'écrire en gras.

De la même façon, la séquence <i>quelques mots</i> indique d'écrire en italique.

Notez bien deux choses à ce stade :
- Le texte à mettre en forme est encadré par deux balises identiques,
- Dans la deuxième balise, le caractère "/" indique d'arrêter la mise en forme.

Parfois la balise est complétée par un paramètre :
** Exemple :
La séquence <font size="3" color="red">quelques mots</font> indique qu'il faut que la police soit de taille 3 et en rouge.
La balise initiale est font, et elle admet des paramètres comme color et size. Ensuite, quand un paramètre est utilisé, c'est avec la syntaxe  nom_parametre="valeur".

Notez la forme générale d'une instruction HTML :
<nom_balise   parametre_1="x"   parametre_2="y" ...>texte_à_mettre_en_forme</nom_balise>

---

Point 2 : Nouveau message mixant 3 activités

• Créer un message "Tests divers" dans lequel vous ferez 3 parties (reprendre les sous-titres soulignés ci-dessous) pour :
• insérer des mots clignotants  : Indications ... voir ICI
  Cette insertion, comme les 2 suivantes, se fait en mode HTML.
  ** Le clignotement fonctionne avec le navigateur Mozilla FireFox, mais pas avec Internet Explorer, ni avec Safari. Vous pouvez le tester chez vous si vous avez Mozilla Firefox. En salle info, venez utiliser le pupitre du prof qui est équipé de Mozilla Firefox.
• insérer des textes défilants :  voir ICI 
• un défilement simple, sans réglage particulier,
• un défilement qui va de gauche à droite, sur fond rouge.
• insérer une musique venant de Deezer : Voir ICI
  

---

Intermède (suite)
Avant de passer au point 3, vous aurez besoin de quelques compléments sur le HTML.

Rappel : La  forme générale d'une instruction HTML :
<nom_balise parametre1="x" parametre2="y" ...>texte_à_mettre_en_fome</nom_balise>

** Autre exemple expliquant comment créer un lien hypertetxe  associé à quelques mots.
La séquence <a href="www.google.fr">Allez à Google</a> signifie que les mots "Allez voir Google" porteront un lien (a=balise de lien) et que ce lien pointera vers la référence www.google.fr

On retrouve la structure d'une instruction html, à savoir  un texte "Allez à Google" qui est encadré par la balise <a> et </a>. Cette balise <a> est complétée par le paramètre href="..." .

Si on rajoute le paramètre target="_blank" alors le lien s'ouvrira dans une nouvelle fenêtre.
Ce sera alors la séquence <a href="www.google.fr" target="_blank">allez voir google</a>

---

Point 3 - Nouveau message comportant une FAQ (Foire aux questions)

Voilà un exemple concret de ce qu'il faut faire (sommaire avec liens directs dans la page) :

  Le Monde / modèle purement texte - B&You / modèle avec images

• Pour créer votre message, le texte à récupérer est ICI :
• Copiez ce texte dans un nouveau message, dont le titre est "Ancres - Loi Hadopi"
• Ensuite, dans ce nouveau message, pour créer les liens entre les questions et les réponses, lire ci-dessous :

• 

  Remarque : Cette technique est très utile pour créer des foires aux questions (FAQ).

Point 4 - Divers

1. Dans votre page "Sommaire" (page créée à la séance précédente), intégrer des liens vers les 2 posts que vous avez créés précédemment . Rappel : dans cette page de somamire les liens restent ouverts dans le site.
2. Associer le libellé "TP" à ces deux nouveaux messages.
3. Pour chaque message, paramétrer le pour que les commentaires ne soient pas autorisés. C'est un réglage accessible via le bouton "Options" lorsque vous êtes en édition de votre post.
4. En mode Mise en page, supprimez si ils y sont les gadgets "Membres" et "Qui êtes-vous ? ".

Point 5 - Vérification de la  bonne réalisation de vos posts

1. Les images, les vidéos, les affichages divers ont des alignements uniformes.
2. Les posts ont bien les libellés demandés
3. La bannière a bien une forme de bandeau et est adaptée à la largeur de votre blog
4. Vos posts ont du corps et présentent les éléments qui y sont intégrés;
5. Les fautes d'orthographe, de frappe sont supprimées (pénalité sinon)
6. Vos liens vers des sites extérieurs s'ouvrent dans de nouvelles fenêtres (à l'exception de ceux qui sont lancés via le gadget "Libellés")
7. Vérifiez que tous les liens du post "Hadopi" fonctionnent bien.
8. La page "Sommaire" n'a pas de commentaire autorisé.
9. La page "Contact" a bien des commentaires autorisés.