La saisie du code HTML

1. Quelques conseils pour écrire pour Internet

L'écriture pour Internet ne se différencie pas beaucoup de l'écriture d'un rapport. Songez cependant que vous ne vous adressez pas exclusivement à vos professeurs, mais également à un public non initié.

Afin de faciliter la lecture à l'écran, nous vous recommandons de suivre les quelques conseils suivants :

• Découper l'information en sections, sous-sections... (jusqu'à trois niveaux) pour faciliter la lecture.
• Donner des titres explicites.
• Faire des paragraphes courts, idéalement une idée par paragraphe.
• Réduire la longueur du texte par rapport à un texte papier : soyez synthétiques !
• Utiliser des listes d'énumération, plus agréable à lire à l'écran qu'un paragraphe compact.

2. Le code HTML

Vos documents devront se conformer aux recommandations du HTML 3.2.

Loin de vouloir brimer votre créativité, cette demande émane de notre souhait de garantir une présentation homogène entre les différents robots, mais également d'assurer une certaine pérénité, par l'utilisation d'un standard universellement reconnu, aux pages que vous écrirez.

Vos fichiers seront créés avec un éditeur approprié (un simple éditeur de texte tel que Notepad suffit d'ailleurs) en évitant d'utiliser le format « Page Web » de Word.

Vous pouvez éventuellement utiliser l'éditeur de HTML Netscape Composer, qui est inclus dans Netscape Communicator, et est donc gratuit. Il a l'avantage, par rapport à son équivalent FrontPage Express (compris dans Internet Explorer) de ne pas utiliser des balises propriétaires (qui ne sont pas reconnues par les autres navigateurs).

3. Le HTML : quelques notions de base

Ces quelques lignes sont destinées à donner à ceux d'entre vous qui débutent en HTML, et explicitent les quelques notions de base dont vous aurez besoin.

3.1. Du texte, ...

Vos documents contiendront en majorité du texte. Vous pouvez agrémenter ce texte par les balises (ou "tags") de mise en forme. Ces instructions seront différenciées de votre texte par les signes <début d'instruction> ici le texte </fin d'instruction>.

Par exemple, si le code source de mon document contient l'instruction : <B>texte en gras</B>, il sera affiché texte en gras lors de l'affichage de la page par un browser.

Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut veiller à bien les imbriquer. Ainsi <B><I>...</I></B> est correct et <B><I>...</B></I> risque de vous créer des ennuis.

Le browser affiche le texte qu'on lui "dicte" en passant à la ligne lorsque celui-ci atteint le bord de la fenêtre. Pour le forcer à passer outre à cette règle de conduite et à faire un saut à la ligne comme vous le souhaitez, il faut une instruction particulière. C'est la balise <BR> (simple saut de ligne) ou la balise <P> (saut de paragraphe).

Une notion importante que vous devez garder à l'esprit est les tags que vous utiliserez ne doivent pas définir l'apparence finale du texte, mais serviront par exemple :

• à mettre un morceau de texte en évidence, par l'utilisation de gras ou d'italique,
• à définir une hiérarchie entre les titres et sous-titres,
• à définir des listes (numérotées ou à puces)
• à définir la mise en place des différents éléments de vos pages au moyen de tableaux,
• etc.

Il conviendra de ne pas chercher à modifier les polices utilisées par défaut (attention au format « Page Web » de Word !). Pour ceux qui utilisent un simple éditeur de texte il conviendra de ne pas utiliser les tags, FONT, FONT-SIZE, FONT-FAMILY, FONT-WEIGHT.

Les tags H3 H4 et H5 sont réservés aux titres des sections, sous-sections et sous-sous-sections de vos pages. L'usage des tags H1 H2 ... est interdit, car réservé à notre usage (nom de votre robot et titre de la page).

3.2. des images ...

L'insertion d'une image se fait au moyen du code Html suivant : <IMG SRC="Adresse de l'image">. L'adresse représente le chemin relatif entre votre document "*.htm" et le fichier image (gif ou jpg) à afficher.

Dans votre cas, vous aurez par exemple <IMG SRC="images/vignette/figure1.gif">

La balise image possède de nombreux attributs.

3.3. ... et des liens hypertextes

Html (HyperText MarkupLanguage) est un langage hypertexte (et hypergraphique) qui vous permet en cliquant sur un mot, généralement souligné (ou une image) de vous transporter (par exemple) vers un autre endroit du document.

Vous devrez, dans chacune de vos page, établir les liens hypertextes :

• vers l'image "full size" en cliquant soit sur la vignette soit sur la légende
• si le texte devient trop long, depuis la table des matières (au début du document) vers les différentes sections du document

La syntaxe de ces liens est simple : <A HREF="Lien">...</A>

Pour pointer vers l'image "full size", on aura par exemple :

• pour la vignette, <A HREF="images/zoom/figure1.gif" border=0><IMG SRC="images/vignette/figure1.gif"></A>
• Pour la légende, <A HREF="images/zoom/figure1.gif">texte de la légende</A>

Des liens peuvent aussi pointer vers un endroit précis du même document. C'est ce qu'on appelle les ancres, ancrages ou pointeurs. On définit le point d'ancrage par le code : <A NAME="ancre1">...</A> et on établit le lien vers cette ancre (dans le même document) : <A HREF="#ancre1">...</A>

4. Principaux tags HTML autorisés

Pour en savoir plus, nous vous invitons à consulter un petit tutorial du HTML 3.2 : www.ccim.be/ccim328/html/index.html

Vous pouvez cliquer ici pour obtenir la liste des principaux tags HTML autorisés dans votre document.

N'hésitez pas à prendre contact avec nous (Sophie Labrique ou Damien Grenier) en cas de problèmes, difficultés, questions, etc.