Voici un exercice, qui vous fait construire le tutoriel exemple. Je choisis le préfixe exemple, pour désigner la page sommaire, la page accueil, et une page qui contiendra des illustrations sonores.
Vous allez donc commencer par créer, dans le répertoire tutor, le fichier exemple_sommaire.html. Ensuite vous créerez la page exemple_0 pour la page d'accueil. Enfin vous terminerez en créant la page exemple_1.html
Pour pouvoir lire pas à pas les explications de cette page, vous allez ouvrir une nouvelle fenêtre d'internet explorer. Vous pourrez ensuite basculer entre cette page et la nouvelle fenêtre, dans laquelle vous vérifierez pas à pas, les étapes de votre travail.
Pour cela, vous pouvez par exemple, activer un .html quelconque, ce qui ouvrira une nouvelle fenêtre avec ce .html comme page courante.
Je vous propose de choisir le fichier modele.html, qui vous donnera le squelette de votre première page, après quelques modifications mineures.
Pour cela, ouvrez le menu démarrer, choisissez programme, puis ouvrez l'explorateur. Dans l'explorateur, ouvrez le répertoire tutor et cliquez le fichier modele.html
Vous vous retrouverez dans la page modele.html, dans une nouvelle fenêtre d'internet explorer. Vérifiez que vous basculez entre cette fenêtre, et la page où j'écris ces explications, en utilisant la souris, ou ALT + TAB.
Si vous avez fait tout ce que je vous ai proposé ci-dessus, vous êtes prêt pour créer votre première page.
Dans la fenêtre modèle, ouvrez la source modele.html dans le bloc note, en faisant ALT + A + S (menu affichage source)
Dans le bloc note, effacez toutes les lignes de texte, situées entre le début de la balise body, et la première balise <a...> Changez le titre dans la balise tittle, en écrivant par exemple sommaire du tutoriel exemple, à la place de l'ancientitre modèle... Vous pouvez écrire une ligne de texte, après la balise body, si vous le désirez. Pour indiquer un retour à la ligne, vous pouvez utiliser une balise <p> par exemple. mais il est préférable d'utiliser la balise de paragraphe <p> ... </p>
Vous devez maintenant placer les liens de cette page sommaire, avec les fichiers exemple_0.html et exemple_1.html, que vous créerez un peu plus tard. Pour cela, modifiez les 2 liens <a href=..., en remplaçant les noms des fichiers .html par les nouveaux nom.
Ainsi, le premier lien s'écrira :
<a href="exemple_0.html">accueil</a>
Pour le second lien, écrivez exemple_1.html, à la place du nom de fichier indiqué, et changez le texte en ma page 1.
Voila, votre page sommaire est terminée. Il faut la sauvegarder, en choisissant dans le menu fichier, l'option enregistrer sous.
Dans la fenêtre d'édition d'enregistrer sous, écrivez le nom exemple_sommaire.html, puis quittez le bloc note, par ALT + F4.
Vous vous retrouvez dans la fenêtre d'internet explorer, dans la page modele.html, qui n'a pas été modifiée.
Si vous voulez consulter votre page exemple_sommaire.html, recherchez le fichier exemple_sommaire.html dans le répertoire tutor, et cliquez ce fichier.
Vous constatez que cette page contient bien les liens que vous y avez placé. Si vous activez le lien avec la page accueil, vous obtenez un message d'erreur d'internet explorer, car la page exemple_0.html n'existe pas dans le répertoire tutor.
Si vous avez fait cette activation, revenez dans votre page exemple_sommaire, par ALT + FLECHEGAUCHE
Vous allez créer la page accueil, en vous servant de votre page sommaire. Pour cela, répétez ce que vous avez fait pour créer la première page de votre tutoriel, mais avec la source exemple_sommaire.html
Faites ALT + a + s, pour ouvrir ce fichier dans le bloc note. Faites les modifications, pour le texte, le titre, et les liens. Vous écrirez comme titre, le nom accueil, au lieu du texte sommaire... Vous écrirez dans le corps du document, une description de votre premier tutoriel. Enfin, vous changerez les liens, pour qu'il apparaisse un lien avec exemple_1.html, et un lien avec exemple_sommaire.html. Modifiez aussi le texte de ces liens, en écrivant respectivement, par exemple, ma page suivante et retour au sommaire.
Il ne vous reste plus qu'à sauvegarder votre fichier, sous le nom exemple_0.html, et quittez le bloc note par ALT + F4.
Je vous laisse créer tout seul votre page exemple_1.html, maintenant que vous avez compris que c'est très facile. Vous pouvez vous servir d'une de vos pages précédentes pour cette création, ou écrire directement le code html si vous l'avez retenu à force de le lire dans les sources consultées.
Pour inclure des illustrations sonores dans votre page exemple_1.html, il suffit d'y placer des liens avec des fichiers .mid ou .wav. Il faudra bien sûr placer ces sources sonores dans le répertoire tutor.
Une fois que votre dernière page sera terminée, vous copierez tous les fichiers exemple*.html dans un répertoire de votre choix, par exemple, un répertoire de nom exemple. Vous copierez aussi vos fichiers d'illustration sonore dans ce répertoire.
Votre tutoriel sera prêt pour être utilisé par votre entourage. Vous pouvez le rendre facilement transportable par le courier électronique ou par téléchargement, en le compressant par winzip, par exemple.
En définitive, vous savez maintenant créer autant de pages que vous le désirez, en y plaçant des liens avec d'autres pages, ou avec d'autres fichiers d'illustration. Vous pourrez aussi créer des liens avec d'autres sites. Ceci est aussi facile que de créer des liens avec vos pages personnelles. La seule différence est qu'il faut écrire l'adresse http, dans le champ href de la balise a.
Pour écrire l'adresse d'un site sans faute, le mieux est de la copier dans le presse-papier, et de la coller dans la source d'une page, à l'endroit désiré. Consultez la source de la page conclusion, dans laquelle vous pourrez copier, par exemple, le lien avec la page option de recherche de yahoo, pour la coller dans l'une de vos pages.
Ceci termine le tutorial d'apprentissage. Consultez les nombreux tutoriels et cours que vous trouverez sur le site STUDYVOX.
Vous trouverez dans la page conclusions et perspectives, des liens avec des sites en français, pour l'approfondissement du langage html.
retour dans le sommaire de la rubrique tutor du site studyvox webups