Comment créer un document Web

Introduction

Procédés de base et modèle d'une page simple

Explication

Texte modèle

Le texte modèle en format code et en format affichage ("display") Web

2. Liens, images, tables et modèle d'un document de plusieurs pages

La page de titre et la table des matières

L'introduction, le développement et la conclusion

avec exemples de liens, d'images et de tables

La bibliographie

0. Introduction

La méthode préconisée ici est fondée sur la modification d'un document existant par copier-coller de la source. Elle a l'avantage didactique et pratique sur des outils simplistes (et inadéquats) comme Composer de Netscape ou de Mozilla, voire sur un logiciel sophistiqué comme Dreamweaver, de montrer directement le codage HTML et d'offrir ainsi un moyen de maîtriser ce langage simple mais puissant. Comme dit le proverbe chinois, pour se nourrir il vaut mieux apprendre à pêcher que de devoir dépendre du marchand de poissons.

1. Procédés de base et modèle d'une page simple

1.1. Explication

Voici un modèle très simple pour créer un petit texte en format Web (utilisant le langage du Web, qui est HTML). Essayez la procédure suivante:

1. Copier-coller le texte ci-dessous (après la fin de ces instructions) dans un traitement de texte élémentaire tel que WordPad (plutôt qu'un logiciel dirigiste comme Word);
[Nota. On peut copier tout texte en ligne au moyen de l'option "View -> Source" du navigateur. Internet Explorer a l'avantage sur d'autres navigateurs d'ouvrir le texte-source directement dans Notepad ou WordPad pour modification éventuelle.]
2. Mettez votre texte à vous à la place du mien mais en gardant les codes html (c'est-à-dire tout ce qui commence par "<" et finit par ">"; il faut garder aussi les crochets triangulaires "<" et ">")
- Vous pouvez vous servir de la méthode Alt + valeur décimale pour les lettres accentuées.
- Si vous écrivez moins de paragraphes, supprimez les paragraphes en trop du modèle (y compris les codes "<p>" et "</p>")
- Si vous voulez écrire plus de paragraphes, faites précéder chacun de "<p>" et le terminer par "</p>".
3. Quand vous aurez fini, sauvegardez votre texte en format "Text Only" avec l'extension ".html" ou ".htm" (ne faites pas attention au message "this text contains formatting which may be lost...")
4. Maintenant ouvrez votre texte dans un navigateur tel que Netscape ou Internet Explorer. Il devrait contenir un titre en grosses lettres, puis le nom de l'auteur (mettez votre nom) en grosses lettres mais moins grosses que le titre, puis vos paragraphes avec séparation de double interligne.

Explication des codes:

<html>...</html> = commencement et fin d'un document en format html
<head>...</head> = début et fin de la tête du document, qui contient le titre affiché tout au-dessus de la fenêtre du navigateur (la tête est importante dans les interrogations par moteur de recherche comme Google ou AltaVista)
<body>...</body> = début et fin du corps du document: ce qui est affiché dans la partie principale du navigateur
<h2>...</h2> = en-tête ("heading") de taille 2
<h3>...</h3> = en-tête de taille 3 (un degré plus petit que 2)
<p>...</p> = début et fin de paragraphe
<br> = retour à la ligne ("break")
Nota: Le contenu des codes peut être tapé indifféremment en lettres minuscules (ex. <p>) ou majuscules (ex. <P>).

1.2. Texte modèle

Le texte modèle suit:

-------------
[Copier à partir de la ligne suivante:]
<HTML>
<HEAD>
<TITLE>Titre du texte</TITLE>
</HEAD>

<BODY>

<H2>Titre du texte</H2>

<H3>Nom de l'auteur</H3>

<P>Premier paragraphe... </P>

<P>Deuxième paragraphe...<BR>
[Notez que je viens de faire un retour à la ligne ("break")] </P>

<P>Troisième paragraphe... </P>

<P>Quatrième paragraphe... </P>

</BODY>
</HTML>
[Copier jusqu'à la fin de la ligne précédente]
-------------

1.3. Texte modèle en format code et en format affichage Web

Format code	Format affichage Web
<HTML> <HEAD> <TITLE>Titre du texte</TITLE> </HEAD> <BODY> <H2>Titre du texte</H2> <H3>Nom de l'auteur</H3> <P>Premier paragraphe... </P> <P>Deuxième paragraphe...<BR> [Notez que je viens de faire un retour à la ligne ("break")] </P> <P>Troisième paragraphe... </P> <P>Quatrième paragraphe... </P> <P>Etc. </P> </BODY> </HTML>	Titre du texte Nom de l'auteur Premier paragraphe... Deuxième paragraphe... [Notez que je viens de faire un retour à la ligne ("break")] Troisième paragraphe... Quatrième paragraphe... Etc.

Format code

Format affichage Web

<HTML>
<HEAD>
<TITLE>Titre du texte</TITLE>
</HEAD>

<BODY>

<H2>Titre du texte</H2>

<H3>Nom de l'auteur</H3>

<P>Premier paragraphe... </P>

<P>Deuxième paragraphe...<BR>
[Notez que je viens de faire un retour à la ligne ("break")] </P>

<P>Troisième paragraphe... </P>

<P>Quatrième paragraphe... </P>

</BODY>
</HTML>

Titre du texte

Nom de l'auteur

Premier paragraphe...

Deuxième paragraphe...
[Notez que je viens de faire un retour à la ligne ("break")]

Troisième paragraphe...

Quatrième paragraphe...

Etc.

2. Liens, images, tables et modèle d'un document de plusieurs pages/fichiers

Modèle : projet individuel ou mémoire sur le fromage comprenant un titre, une introduction, plusieurs parties de délevoppement, une conclusion et une bibliographie.
Nota: Un document d'une page pouvant aussi contenir des liens, images ou tables, les exemples de la section 2.2 ci-dessous valent autant pour un document simple que pour un document complexe.

2.1. La page de titre avec une table des matières

Appelons-la dubois.htm (ou dubois.html).

Format code (voir les notes après le tableau)	Format affichage Web
<HTML> <HEAD> <TITLE>Marie-Hélène Dubois, Le fromage dans quelques pays francophones</TITLE> </HEAD> <BODY> <H1>Le fromage dans quelques pays francophones</H1> <H2>Marie-Hélène Dubois</H2> Projet pour le cours FSL 161Y, janvier 2001 <UL> <B>Table des matières</B> <P> 1. <A HREF="dubois_intro.htm">Introduction</A><BR> 2. <A HREF="dubois_can.htm">Les fromages canadiens</A><BR> 3. <A HREF="dubois_fr.htm">Les fromages français</A><BR> 4. <A HREF="dubois_suisse.htm">Les fromages suisses</A><BR> 5. <A HREF="dubois_conc.htm">Conclusion</A><BR> <A REF="dubois_biblio.htm">Bibliographie</A> </P> </UL> </BODY> </HTML>	Le fromage dans quelques pays francophones Marie-Hélène Dubois Projet pour le cours FSL 161Y, janvier 2001 Table des matières 1. Introduction 2. Les fromages canadiens 3. Les fromages français 4. Les fromages suisses 5. Conclusion Bibliographie

Format code (voir les notes après le tableau)

Format affichage Web

<HTML>
<HEAD>
<TITLE>Marie-Hélène Dubois, Le fromage dans quelques pays francophones</TITLE>
</HEAD>

<BODY>

<H1>Le fromage dans quelques pays francophones</H1>

<H2>Marie-Hélène Dubois</H2>

Projet pour le cours FSL 161Y, janvier 2001

<UL>
<B>Table des matières</B>
<P>
1. <A HREF="dubois_intro.htm">Introduction</A><BR>
2. <A HREF="dubois_can.htm">Les fromages canadiens</A><BR>
3. <A HREF="dubois_fr.htm">Les fromages français</A><BR>
4. <A HREF="dubois_suisse.htm">Les fromages suisses</A><BR>
5. <A HREF="dubois_conc.htm">Conclusion</A><BR>
<A REF="dubois_biblio.htm">Bibliographie</A>
</P>
</UL>

</BODY>
</HTML>

Le fromage dans quelques pays francophones

Marie-Hélène Dubois

Projet pour le cours FSL 161Y, janvier 2001

Table des matières

1. Introduction
2. Les fromages canadiens
3. Les fromages français
4. Les fromages suisses
5. Conclusion
Bibliographie

Notes

<UL>...</UL>

UL

<B>...</B>

<A HREF="dubois_intro.htm">...</A>

HREF

dubois_intro.htm

dubois_can.htm

2.2. L'introduction, le développement et la conclusion

Prenons comme exemple les fromages français (section 3)

Format code (voir les notes après le tableau)

Format affichage Web

<HTML>
<HEAD>
<TITLE>Marie-Hélène Dubois, Le fromage dans quelques pays francophones</TITLE>
</HEAD>

<BODY>

<H2>3. Les fromages français</H2>

<P>Bla... bla... bla... Sur <A HREF="dubois_biblio.htm#4">le site des Fromagers de France</A>, on trouve un tableau sur la distribution des types de fromages par région (voir la <A HREF="#figure4">Figure 4&kt;/A>). Bla... Bla... bla...</P>

<center>
<A NAME="figure4"><H4>Figure 4</H4></A>

<table cellpadding=5 border=1>
<tr><th>Région</th> <th>Nombre de types de fromages</th> </tr>
<tr><td>Bretagne</td> <td>+++++++</td> </tr>
<tr><td>Normandie</td> <td>+++++++++</td> </tr>
<tr><td>[Etc.]</td> <td>++</td> </tr>
</table>
</center>

</BODY>
</HTML>

3. Les fromages français

Bla... bla... bla... Sur le site des Fromagers de France, on trouve un tableau sur la distribution des types de fromages par région (voir la Figure 4). Bla... Bla... bla...

Bla... Bla... bla... Bla... Bla... bla... Bla...

Bla... bla... Bla... Bla... bla... Bla... Bla... bla...

Figure 4

Région Nombre de types de fromages

Bretagne +++++++

Normandie +++++++++

[Etc.] ++

Notes

Image

<img src="fromages_fr.gif">

img

src

"fromages_fr.gif"

<center>...</center>

Les liens

<A HREF="dubois_biblio.htm#lff">

le site des Fromagers de France

</A>

lff

<A HREF="#figure4">Figure 4</A>

figure4

<A NAME="figure4"><H4>Figure 4</H4></A>

NAME

#

Table

<table>...</table>

cellpadding=5

border=1

<tr>...</tr>

<th>...</th>

<td>...</td>

2.3. La bibliographie

Format code (voir les notes après le tableau)	Format affichage Web
<HTML> <HEAD> <TITLE>Marie-Hélène Dubois, Le fromage dans quelques pays francophones</TITLE> </HEAD> <BODY> <H2>Bibliographie</H2> <P>Bla... bla... bla...</p> <P><A NAME="4">4.</A> Fromagers de France <<A HREF="http://www.fromagers.fr">http://www.fromagers.fr</A>></p> <P>Bla... bla... bla...</p> </BODY> </HTML>	Bibliographie Bla... bla... bla... 4. Fromagers de France <http://www.fromagers.fr> Bla... bla... bla...

Format code (voir les notes après le tableau)

Format affichage Web

<HTML>
<HEAD>
<TITLE>Marie-Hélène Dubois, Le fromage dans quelques pays francophones</TITLE>
</HEAD>

<BODY>

<H2>Bibliographie</H2>

<P><A NAME="4">4.</A> Fromagers de France
<<A HREF="http://www.fromagers.fr">http://www.fromagers.fr</A>></p>

</BODY>
</HTML>