12/09/2015

Modification du code

Il est important de comprendre qu’un document HTML peut être utilisé de 2 manières :

• Soit il est affiché par un navigateur : ce logiciel connaît le langage HTML et, par exemple, affiche mot en gras pour le code : <b>mot</b>. On dit que le document est interprété par le navigateur. Un document HTML ne peut pas être modifié avec un navigateur.
• Soit il est ouvert par un éditeur qui n’interprète pas le code HTML mais l’affiche tel quel, et permet de le modifier.

L’éditeur TextWrangler

Nous avons testé précédemment l’affichage d’un document dans un navigateur, nous allons maintenant éditer et modifier le fichier TDB4-NOM-exemple.html.

• Lancez l’application TextWrangler et ouvrez TDB4-NOM-exemple.html.
• Ouvrez également le même fichier TDB4-NOM-exemple.html dans un navigateur.
• Comparez le document visualisé via le navigateur et le document édité avec TextWrangler. Vous devez reconnaitre des portions de texte entre les balises HTML qui apparaissent en couleur dans le document édité.

Si TextWrangler n’est pas installé sur votre machine, vous trouverez peut-être TextEdit. Cette application est conçue pour gérer différents formats ; par défaut elle enregistre en format RTF et elle se comporte comme un navigateur en présence d’un format HTML, c’est-à-dire qu’elle affiche l’interprétation du code HTML et non le code. Pour modifier ce comportement, allez dans TextEdit : Préférences . Dans l’onglet Nouveau document, cochez Format texte et dans l’onglet Ouverture et enregistrement cochez Ignorer les commandes HTML. Ainsi TextEdit se comportera comme un simple éditeur de texte ( texte = suite de caractères).

Méthode de travail

Pour la suite de l’exercice vous allez travailler avec 3 fenêtres ouvertes :

• une fenêtre Finder ouverte sur le répertoire NOM_PRENOM_TDB4 ;
• une fenêtre d’un éditeur de texte (TextWrangler, TextEdit, etc.) qui vous permet de modifier le code du fichier TDB4-NOM-exemple.html ;
• une fenêtre d’un navigateur qui vous permet d’observer les résultats du fichier TDB4-NOM-exemple.html interprété.

Vous pouvez disposer vos 3 fenêtres de travail de la façon suivante :

Désormais, pour toutes les questions du TD pour lesquelles on vous demande de modifier une page web, vous devrez passer par les 4 étapes suivantes :

1. modifier le code source dans TextWrangler ;
2. enregistrer les modifications ;
3. actualiser/rafraîchir l’affichage de la page dans le navigateur (menu Affichage>Actualiser ) ;
4. observer les résultats, et recommencer.

Exercice d’application

En vous aidant de la méthode précédente, modifiez le code HTML de la page pour :

• supprimer les balises <i> et </i> autour du texte présent texte sera souligné ;
• ajouter des balises <u> et </u> autour du texte Le présent texte sera souligné tout à l’heure;
• enregistrer les modifications et observez votre nouveau document (l’ouvrir avec un navigateur ou, s’il est déjà ouvert, l’actualiser).

Nous allons insérer une nouvelle image.

• Téléchargez une image (du Web vers votre poste local) ; Attention, vous devez enregistrer l’image dans le même dossier que TDB4-NOM-exemple.html.
• Insérez cette image dans le fichier TDB4-NOM-exemple.html en vous inspirant de l’insertion de l’image PereNoel.jpg.
• Enregistrez les modifications et observez votre nouveau document.