Introduction à la conception d'une page Web

Introduction
La création des pages Web
Notions de base
Les grandes sections d'une page Web
La création d'une première page

Introduction

HTML

HyperText Markup Language
Pas un langage de programmation mais plutôt un langage de description de pages Web
Un document écrit en HTML peut être lu par tous les navigateurs sur n'importe quel type d'ordinateur
IMPORTANT: L'affichage varie selon le navigateur ou la configuration personnelle de l'utilisateur.

La création des pages Web

Une page WEB est un fichier texte qui contient des codes HTML qui contrôlent l'apparence et la disposition du texte, des images et autre éléments.
Une page WEB peut être créée à l'aide d'un simple éditeur de texte comme le Bloc-notes de Windows (que nous utiliserons dans ce cours)
Une page peut aussi être créée à l'aide d'un logiciel de traitement de texte (tel que Microsoft Word, WordPerfect, etc.) à la condition d'enregistrer le document en format Texte seulement et de lui donner l'extension .htm (voir les conseil sur Microsoft Word ci-dessous).
On peut aussi utiliser un éditeur HTML. Il en existe deux types:
- ceux facilitant la saisie et la modification des codes HTML (par exemple, WebExpert à http://www.visic.com, HoTMetaL, HotDog, etc.)
- ceux permettant une édition en mode graphique, c.à.d. WYSIWYG (par exemple, Microsoft FrontPage, Adobe PageMill, etc.)
Enfin, on peut utiliser des outils bureautiques tel que Microsoft Word avec un module de conversion de fichier en HTML. L'Assistant Internet de Word est très populaire, Même s'il ne donne pas accès à toutes les options du HTML, il constitue un outil de création de page efficace pour la plupart des besoins. C'est l'outil que j'utilise pour produire ces notes de cours.

Conseils pour l'utilisation de Microsoft Word pour créer des pages Web en mode texte

Désactivez le remplacement automatique des guillemets "---" par des guillemets français: menu Outils, Options, onglet Composition auto, dans la section Remplacer lors de la frappe, désactivez l'option Guillemets " par des guillemets...
Enregistrez le document en format texte (ASCII): Fichier, Enregistrer sous, option Type de fichier, choisissez Texte seulement (*.txt).
Donnez à votre fichier un nom se terminant par .htm (si vous laissez l'extension .txt proposée par Word, Netscape ne pourra pas lire le fichier correctement).

Les informations présentées dans ce document et dans ceux de la séance 9 ne représentent pas l'ensemble des codes possibles mais bien un aperçu des codes essentiels permettant d'écrire un page simple. Les personnes désirant approfondir l'utilisation des codes pourront aller fureter dans les lectures suggérées dans le plan de cours pour de plus amples explications.

Consignes

Les codes sont toujours insérés entre les signes < et > (plus petit que et plus grand que).
On peut les écrire indifféremment en lettres majuscules ou minuscules.
La disposition du texte dans le fichier HTML n'a pas d'effet sur la mise en page du document. Ce sont les codes que contient le fichier HTML qui détermine l'apparence du texte dans le navigateur.
Ainsi, les fins de ligne, l'espacement entre les paragraphes ou les mots dans le fichier HTML n'a d'importance que pour faciliter la lecture des codes HTML eux-mêmes.

Les codes en paires

La plupart des instructions données dans une page Web ont un début et une fin (exemple: début du caractère gras et fin du caractère gras).
En HTML, on a recours à des codes par paires: le premier code identifie le début de l'action désirée et le code de fin qui en indique la fin.
Par exemple, pour avoir du texte en caractères gras, le code de début est <B> et le code de fin est </B>.
La barre oblique indique qu'il s'agit d'un code de fin.

Les grandes sections d'une page Web

On doit indiquer le début et la fin d'une page HTML: le code de début de la page HTML est <HTML>. Le code de fin </HTML> doit évidemment se trouver à la toute fin de la page.
À l'intérieur de la page, il existe deux grandes sections:
- l'en-tête définie par les codes <HEAD> et </HEAD>. On y trouve le titre de la page qui apparaîtra dans la barre titre du navigateur et dans le menu Signets;
- le corps de la page est défini par les codes <BODY> et </BODY>. On y trouve le texte et les références aux images qui seront affichés par le navigateur.

Regardons l'exemple suivant:

     <HTML>
     <HEAD>
     <TITLE>Bonjour le monde!</TITLE> 
     </HEAD>
     <BODY>
     Bonjour le monde! 
     (version française du fameux "Hello World!")
     </BODY>
     </HTML>

Voici le résultat dans Netscape.

La création d'une première page

Voici quelques indications qui vous aideront à produire une première page Web. Vous utiliserez des codes qui sont expliqués sommairement dans le chapitre 14 d'Internet au bout des doigts (édition 1997). Nous reverrons ces codes et d'autres de niveau intermédiaire lors de la séance 7.

Consultez l'exemple à la page 250 d'IABDD (1997), puis consultez les sources de cette page. Vous allez maintenant créer cette page vous-même.

Créez un répertoire sur votre disque ou votre disquette et nommez-le "ma-page".
Pour copier les éléments graphiques contenus dans cette page, cliquez sur le nom du fichier Pageweb.exe pour le télécharger dans votre répertoire ma-page.
À l'aide de l'Explorateur ou du Gestionnaire de fichier, faites un double clic sur ce fichier pour en extraire les fichiers graphiques. Ceux-ci se copient automatiquement dans le répertoire ma-page.
Lancez le Bloc-notes et créez un document que vous enregistrerez sous le nom page-web.htm.
Tapez les codes tel qu'indiqué à partir de l'étape 4, à la page 251, et suivez les instructions jusqu'à la page 260.

Il n'est pas nécessaire de taper l'exemple au complet. Lorsque vous aurez saisi l'essentiel des codes utilisé, n'hésitez pas à commencer votre propre page (TP #2) avec des liens qui reflètent votre occupation ou vos intérêts. Pour l'instant, enregistrez cette page sur votre disque rigide ou votre disquette. La section sur le transfert de fichiers vous indiquera comment télécharger cette page dans le répertoire Web de votre équipe et montrer votre page au monde!

Retour au sommaire du cours Internet en gestion (HEC)

Mise à jour: dimanche, 18 janvier 1998