Blog 2014 - séance 4

Séance 4
C'est la dernière séance de cours, dans le sens où la séance suivante, la S5, vous permettra de commencer un travail à rendre, que vous terminerez chez vous, par binôme.

POINT 1 - Afficher une HORLOGE sur votre site

• 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 complètes, voir ICI

---

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

Alons y ... 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 la FIN de la balise. Cela 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 quasi identiques,
- Dans la deuxième balise, le caractère "/" indique d'arrêter la mise en forme.

Très souvent la balise est complétée par un ou plusieurs paramètres qui apportent des réglages de la mise en forme :

** Exemple : <font size="3" color="red">quelques mots</font>

- <font > est la balise qui définit la police de caractères.
- Cette balise peut être réglée avec divers paramètres comme  color et size.
- Quand un paramètre est utilisé, c'est avec la syntaxe  nom_parametre="valeur". La valeur est exprimée entre guillemets.

Notez maintenant la forme générale d'une instruction HTML :

<nom_balise   parametre1="x"   parametre2="y" ...>texte_à_mettre_en_forme</nom_balise>

---

POINT 2 : Nouvel article mixant 2 activités

• Créer un article "Tests divers" dans lequel vous ferez clairement 2 parties :
  (=> Reprendre dans votre article les sous-titres soulignés ci-dessous) :

• insérer des textes défilants :  voir comment s'y prendre ICI

• Créer un défilement simple, sans réglage particulier, (le texte est libre)

• Créer un défilement qui va de gauche à droite, sur fond rouge. (texte libre aussi)
  
  Sachez que la paramètre qui règle la couleur du fond est bgcolor, et qu'il peut être égal à diverses couleurs. (plus d'info sur les noms des couleurs en HTML)

• insérer une musique venant d'un site de streaming en ligne :

• Nous utiliserons le site www.grooveshark.com qui permet la manipulation sans avoir à s'inscrire. Utilisez Internet Explorer pour y accéder.
• Rechercher une musique sur le site, lancer son écoute, repérer l'icône "Partager", puis au niveau du libellé "Incorporer" copier le code HTML (il commence par <object ... > ) permettant  l'intégration en mode Html dans votre article de votre site web.
• Exemple d'insertion  : un classique de Deep Purple ....
  
  
  
  Toujours le même groupe et un morceau encore plus célèbre
  
  
  avec l'origine de la création de cette chanson  à Montreux en France (VOIR).

---

Intermède (suite)
Avant de passer au point 3, voici quelques compléments indispensables sur le HTML, en particulier sur la façon de créer un lien hypertexte.

Rappel : La  forme générale d'une instruction HTML :

<nom_balise parametre1="x" parametre2="y" ...>texte_à_mettre_en_fome</nom_balise>

** Juste ci-dessous, la séquence en HTML  pour créer un lien vers le site de Google.

<a href="www.google.fr">Allez à Google</a> 

signifie que les mots "Allez voir Google" porteront un lien (la lettre a est la balise de lien) et que ce lien pointera vers l'url du site Google ( annoncée par le paramètre href).

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.

Cela donne la séquence :  <a href="www.google.fr" target="_blank">Allez à Google</a>

---

POINT 3 - Nouvel article comportant une FAQ (Foire aux questions)

Dans cet article, on crée en haut de page un sommaire avec des liens renvoyant plus bas dans la page.

Voilà sur Internet deux exemples de FAQ, montant ce qui vous est demandé . Observez les.

  Le Monde. (C'est un modèle purement texte)

B&YOU- (C'est un modèle avec images)

• Pour créer votre article, et vous éviter d'avoir à saisir un contenu, vous pouvez récupérer le texte ICI :
• créer alors un nouvel article, et en mode "REDIGER", coller le texte précédent.
• Nommer votre article avec le titre "FAQ - Loi Hadopi"
• Publier l'article et afficher le sur Internet.

• Ensuite, dans ce nouvel article, pour créer les liens entre les questions et les réponses, utiliser ce qui a été expliqué plus haut sur la balise  <a ... > et lire attentivement ci-dessous et appliquer :

---- MODE OPERATOIRE --------Créer une ancre dans un article---------------

• PARTIE 1
• Vous avez créé l'article "FAQ-Loi Hadopi", et vous y avez collé le texte  (questions et réponses), et vous avez publié l'article.
• Votre article "FAQ-Loi HADOPI" étant affiché sur Internet, vous devez copier son url (dans la barre d 'adresse). Un peu plus loin, vous aurez besoin de cette url.
• Revenir en mode "Modifier" l'article et passer en mode HTML
• Dans la zone des QUESTIONS, repérer le texte "1/  Qu'est-ce que l'Hadopi ?"
• Placer le curseur devant le "1" et transformer

 1/  Qu'est-ce que l'Hadopi ? 

en 

<a href="mon-url#q1">1/ Qu'est-ce que l'Hadopi ?</a>

C'est à dire, rajouter tout ce qui est écrit en couleurs marron, sachant que mon_url est à remplacer par l'url de votre article "FAQ-Loi Hadopi". C'est l'url que vous avez copié un peu plus haut.

A ce stade, vous avez créé un lien porté par le texte de la question 1

• PUIS, dans la zone des REPONSES, repérer le texte "1/  Qu'est-ce que l'Hadopi ?"
• Placer le curseur devant le "1".
• Transformer

 1/  Qu'est-ce que l'Hadopi ?

en

<a href="http://www.blogger.com/null" name="q1"></a>1/ Qu'est-ce que l'Hadopi?

Là aussi, rajouter TEL QUEL tout ce qui est écrit en couleur marron.

A ce stade, vous avez créé une "ancre" juste avant la réponse à la question 1.

• Revenir en mode REDIGER
• Mettre à jour l'article
• Et l'afficher sur Internet
• et tester le lien sur la question 1, qui doit renvoyer au début de la réponse à la question 1.

• PARTIE 2
• Si la question Q1 fonctionne bien, alors faire la même chose pour les liens des questions Q2 à Q6, en changeant dans les expressions la séquence q1 par q2, etc.

• PARTIE 3
• Créer en bas de la page un lien qui renvoie automatiquement vers le haut de page.
• Revenir en mode "modifier" l'article
• Passer en mode HTML
• En bas du document, repérez le texte "Haut de page"
• Placer le curseur devant le "H".
• Transformer

Haut de page

en

<a href="mon_url#">Haut de page</a> 

-----------------------------------------------------------------------------------------

POINT 4  - Divers

1. Dans votre page "Sommaire" (page créée à la séance précédente), intégrer des liens vers les 2 nouveaux articles que vous avez créés dans cette séance
   
   Rappel : dans la page de Sommaire les liens doivent s'ouvrir dans la fenêtre active et non pas dans une nouvelle fenêtre ou onglet. Si ce n'est pas le cas, défaites vos liens et refaites les sans cocher la case "Ouvrir dans une nouvelle fenêtre".
2. Associer les 2 libellés "TP" et "TP4" aux 2 articles faits lors de cette séance.

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

1. Qualité de la rédaction  :
• Vos articles sont rédigés, c'est à dire qu'ils présentent en quelques mot ou lignes les éléments qui y sont intégrés.
• Les fautes d'orthographe, de frappe sont supprimées (ouaouh ... !)
1. Tous les liens de l'article "Loi Hadopi" fonctionnent bien. Le haut de page aussi.
2. Commentaires
1. La page "Sommaire" n'a pas de commentaire autorisé.
2. La page "Contact" a bien des commentaires autorisés.
3. Rappel : Le réglage des commentaires est accessible via le bouton "Options" lorsque vous êtes en édition de votre article ou de votre page.
3. les liens de la page Sommaire s'ouvrent dans l'onglet actif.
4. Les libellés sont correctement attribués
1. "TP" pour tous vos articles et en plus
2. "TP2" pour les articles de la séance 2
3. "TP3" pour les 2 articles de la séance 3
4. "TP4" pour les 2 articles de la séance 4

Test haut de page