Cours 9: Création de pages WEB

Création de page WEB (cours 9)

Le langage HTML (Hyper Text Markup Language) est utilisé essentiellement sur le Web. Une page WEB, c'est un fichier texte qui utilise certains codes permettant de modifier l'apparence des caractères lorsque lu par un fureteur (browser). Un document écrit en HTML peut être lu par tous les fureteurs existants sur le marché (il est indépendant du fureteur)

Une page WEB peut-être écrite avec un logiciel de traitement de texte tel que WORD, Word Perfect ...Il faut cependant enregistrer (sauvegarder) le contenu en format texte (.txt)

Comme mentionné précédemment, les codes sont les éléments clés dans la création d'une page Web. Il faut donc se familiariser avec ces codes.

Plusieurs logiciels sont disponibles pour faire l'écriture de pages WEB. Voici quelques liens qui vous permettront de voir certains logiciels disponibles.

Hot Dog (en anglais)
Hot Metal gratuitiel (en anglais)
Microsoft Internet Assistant (pour Word)
Web Expert en français
HTML Assistant Pro
Microsoft Frontpage

L'approche présentée ici nous permet d'écrire une page WEB avec un traitement de texte très ordinaire (comme Notepad), de le sauvegarder en format texte et ensuite aller ouvrir le fichier avec un fureteur (Netscape) afin de le visualiser sur l'internet. Cette approche nous permet de ne pas avoir à faire des investissement en argent et en temps d'apprentissage de logiciel.

Les informations présentées dans ce document ne représentent pas l'ensemble de tous les codes possibles mais bien un aperçu des codes essentiels nous permettant d'écrire un page simple. Les individus désireux d'approfondir l'utilisation des codes pourront aller fureter sur le WEB.

Un manuel illustré de programmation en HTML(http://www.grr.ulaval.ca/grrwww/manuel/manuelhtml.html)
A beguinner's guide to HTML (http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerP1.html)
HREF, your complete HTML reference (http://www.zdnet.com/products/htmluser/href/)
Le site de WebExpert contient aussi un livre de référence de programmation. (http://www.visic.com/expert-ref/)

Les codes

Consignes

Les codes sont toujours insérés dans les signes <> (plus petit que et plus grand que). On peut les écrire en lettre majuscule ou minuscule sans changer l'effet désiré.

Le principe fondamental consiste à utiliser les codes par paires. Le premier code qui identifie le début de l'action désirée et le code de fin qui en indique la fin (évidemment). Par exemple, si je désire avoir du texte en caractères gras, le code de début est <B> et le code de fin est </B>. Comme vous remarquez, nous devons insérer une barre oblique dans le code de fin.

Principes

Il faut ensuite comprendre les grands principes de codes. On doit indiquer le début et la fin d'une page HTML. À l'intérieur de la page, il existe 2 parties principales, l'en-tête et la partie principale du texte..

Le code de début de la page HTML est <HTML>. Le code de fin doit évidemment se trouver à la toute fin de la page et est </HTML>

L'en-tête est définie par les codes <HEAD> et </HEAD>. C'est dans l'en-tête que nous retrouverons le titre de la page qui apparaîtra dans la barre titre du navigateur. (c'est aussi ce titre lorsque quelqu'un mettra votre page dans un signet)

Le corps de la page est défini par les codes <BODY> et </BODY>. C'est dans le corps de la page que nous écrirons le texte qui sera affiché par le fureteur.

Regardons l'exemple suivant

<HTML>
<HEAD>
<TITLE> le titre de notre page </TITLE>
</HEAD>
<BODY>
....
</BODY>
</HTML>

On peut facilement remarquer les paires, les codes HTML qui débutent et terminent la page WEB. Les codes HEAD et les codes BODY. De plus on voit le code TITLE identifiant le titre.

Les codes programmables

Plusieurs codes traînent avec eux certains paramètres de format (grosseur, italique, paragraphe ...). Ils permettent de changer facilement l'apparence de ce qui est écrit sans avoir à changer chacun des codes. C'est le même principe avec les styles de WORD6.0.

1 Formats de texte

<B></B> met en caractère gras (bold)

<I></I> met en caractère italique

<TT></TT> met en caractère style ordinateur

<STRONG></STRONG> met en caractère gras

<EM></EM> met en caractère italique

<CITE></CITE> met en caractère italique

<PRE></PRE> écrit le texte tel quel, en respectant les espaces, les enter, les tabulations etc.

<blockquote></blockquote> écrit avec les codes mais inclut une marge à gauche

<font size = ?></font> ou ? est 1, 2, 3, 4, 5 ou 6

<STRIKE></STRIKE> met une ~~ligne à travers le texte~~

<SUB></SUB> crée un indice H₂O

<SUP></SUP> Crée un exposant 2ⁿ

<BLINK></BLINK> fait clignoter le texte

2 Les titres

Ces codes sont <H1>, <H2>, <H3>... <H6>

Par exemple: Aurait l'air de:

<H1> premier titre</H1>
premier titre

<H2>deuxième titre</H2>
deuxième titre

<H3>troisième titre</H3>
troisième titre

<H4>quatrième titre</H4>
quatrième titre

<H5>cinquième titre</H5>
cinquième titre

<H6>sixième titre</H6>
sixième titre

3 Formats de paragraphe et de lignes horizontales

<P> permet de changer de paragraphe et d'ajouter une ligne supplémentaire avant le début du paragraphe suivant

<BR> permet de changer de ligne sans insérer une ligne avant le paragraphe suivant

<NOBR></NOBR> garde le texte sur une seule ligne

<HR> permet d'insérer une ligne horizontale

4 Les listes

4.1 Listes non numérotés

Le texte suivant: Aurait l'air de:

<UL>
<LI> premier item de la liste
<LI> deuxième item de la liste
</UL>

premier item de la liste
deuxième item de la liste

Pour avoir une liste avec plusieurs niveaux

Le texte suivant: Aurait l'air de:

<UL>
<LI> premier item de la liste
<UL>
<LI>sous-item 1
<LI>sous-item 2
</UL>
<LI> deuxième item de la liste
</UL>

premier item de la liste

sous-item 1
sous-item 2

deuxième item de la liste

Pour changer la puce: <UL TYPE=disk|square|circle>

4.2 Liste numéroté

Le texte suivant: Aurait l'air de:

<OL>
<LI> premier item de la liste
<LI> deuxième item de la liste
</OL>

premier item de la liste
deuxième item de la liste

Pour utiliser autre chose que les chiffres dans la liste numérotée:

Le texte suivant: Aurait l'air de:

<OL TYPE=A>
<LI> premier item de la liste
<LI> deuxième item de la liste
</OL>

premier item de la liste
deuxième item de la liste

Le texte suivant: Aurait l'air de:

<OL TYPE=i>
<LI> premier item de la liste
<LI> deuxième item de la liste
</OL>

premier item de la liste
deuxième item de la liste

Pour commencer par autre chose que 1

Le texte suivant: Aurait l'air de:

<OL START=4>
<LI> premier item de la liste
<LI> deuxième item de la liste
</OL>

premier item de la liste
deuxième item de la liste

4.3 Définitions

Le texte suivant: Aurait l'air de:

<DL>
<DT>école
<DD>lieu où on est supposé apprendre
<DT>musique
<DD>son gracieux et parfois disgracieux qui peuvent parvenir à nos oreilles et provoquer certaines émotions
</DL>

école
lieu où on est supposé apprendre
musique
son gracieux et parfois disgracieux qui peuvent parvenir à nos oreilles et provoquer certaines émotions

5. Pointeur (anchor)

Les pointeurs nous permettent de: 1) naviguer vers d'autres pages WEB, 2) vers d'autres pages Web du même répertoire sur le site WEB, 3) vers d'autres portions de texte à l'intérieur de la page Web ou encore pour terminer 4) pour envoyer un message de courrier électronique à quelqu'un .

5.1 Pour aller vers un autre page WEB (il faut connaître l'adresse URL)

1) Commencer par un <A

2) définir l'endroit où aller: HREF="HTTP://adresse du web">

3) Écrire le texte qui sera souligné dans la page WEB et sur lequel on pointera notre souris

Fermer le pointeur </A>

Les codes ci-dessous	donnent ce résultat:
Voir le <A HREF="http://www.hec.ca"> serveur WEB des HEC </A>!	Voir le serveur Web des HEC !

5.2 Pour aller vers un autre page Web du même répertoire sur le même site WEB

<A HREF="nom du fichier"> nom du fichier dans le même répertoire </A>

Les codes ci-dessous	donnent ce résultat:
Voir cet <A HREF="exemple.html"> exemple</A>!	Voir cet exemple

5.3 Pour aller vers d'autres parties de la page Web:

Ça se fait en 2 parties

1) Il faut définir le début du texte qui sera pointé (par exemple le début d'un chapitre)

- Il faut aller au début du chapitre et définir le texte qui marquera le début de la référence

<A NAME="nom de la référence"> texte qui sera le début de la référence </A>

2) À partir de l'endroit qui marquera le départ vers le texte de référence, il faut passer le code approprié

<A HREF="#nom de la référence">Texte qui indique vers où on ira </A>

Les codes ci-dessous	donnent ce résultat:
<H3> <A NAME="conclu">Conclusion</A> </H3> ( ... ) <P> Retour au début de la <A HREF="#conclu">conclusion</A>	Conclusion ( ... ) Retour au début de la conclusion

Les codes ci-dessous

donnent ce résultat:

<H3>
<A NAME="conclu">Conclusion</A>
</H3>

( ... ) <P>

Retour au début de la
<A HREF="#conclu">conclusion</A>

Conclusion

( ... )

Retour au début de la conclusion

5.4 Pour envoyer un courrier électronique à quelqu'un:

<A HREF="mailto:jacques.masson@hec.ca">Jacques Masson</A>,
donnera le résultat suivant:
Jacques Masson,

6. Insertion d'images, de graphiques

Le code <IMG ...> indique la présence d'une image. Les différents paramètres de ce code précisent le contenu et le positionnement de l'image.

Image alignée implicitement à gauche.

Image alignée à droite.
... suite du texte.

Logo Cette image est alignée à gauche avec le texte l'entourant.

<IMG SRC="smile6.gif" WIDTH="32" HEIGHT="30">Image aligné implicitement à gauche.

<P>
<IMG SRC="smile6.gif" ALIGN="RIGHT" HEIGHT="60" WIDTH="64">Image aligné à droite.<BR CLEAR=ALL>
... suite du texte.<P>

<IMG SRC="http://www.microtec.net/~ljm/gif/smile6.gif" ALIGN="LEFT" ALT="Logo" BORDER="1">Cette image est aligné à gauche avec le texte l'entourant.

Attribut Rôle

SRC Identifie le fichier contenant l'image (format GIF ou JPEG); celui-ci peut résider dans le même répertoire, dans un autre répertoire ou sur un autre site

WIDTH HEIGTH Spécifient la largeur et la hauteur de l'image en pixels; optionnel mais accélère l'affichage de la page; peut spécifier la taille réelle ou une taille artificielle

ALIGN Précise l'alignement de l'image; implicitement à gauche sans enroulement du texte; peut être "LEFT" ou "RIGHT" avec enroulement du texte

ALT Indique le texte à afficher lorsque le navigateur n'affiche pas l'image

BORDER Indique, en pixels, la largeur de la bordure; peut varier de 0 (pas de bordure) à 6

Attribut	Rôle
`SRC`	Identifie le fichier contenant l'image (format GIF ou JPEG); celui-ci peut résider dans le même répertoire, dans un autre répertoire ou sur un autre site
`WIDTH HEIGTH`	Spécifient la largeur et la hauteur de l'image en pixels; optionnel mais accélère l'affichage de la page; peut spécifier la taille réelle ou une taille artificielle
`ALIGN`	Précise l'alignement de l'image; implicitement à gauche sans enroulement du texte; peut être "`LEFT`" ou "`RIGHT`" avec enroulement du texte
`ALT`	Indique le texte à afficher lorsque le navigateur n'affiche pas l'image
`BORDER`	Indique, en pixels, la largeur de la bordure; peut varier de 0 (pas de bordure) à 6

À la fin du texte qui entoure une image, le code <BR CLEAR="ALL"> commande le retour au début de la première ligne après l'image.

Les images sur le Web doivent être dans l'un des formats:

GIF (Graphic Interchange Format)
JPEG (Joint Photographic Expert Group).

Ces formats se distinguent par leur mode de compression:

GIF est plus approprié pour les graphiques avec des zone uniformes
JPEG convient mieux aux photographies et aux images détaillées ou comportant plusieurs teintes et des dégradés.

Le partagiciel PaintShop Pro (http://www.jasc.com) permet de créer ou de traiter des images avec ces deux formats. Il peut aussi convertir des images existantes en l'un ou l'autre de ces formats.

À l'aide de Netscape, vous pouvez récupérer une image sur le Web (si le droit vous en est accordé par l'auteur) en suivant la procédure suivante. Dans cet exemple, vous récupérerez l'illustration du nouvel édifice des HEC ci-contre:

Cliquez sur l'image à l'aide du bouton de droite de la souris. Le menu contextuel apparaît.
Choisissez la rubrique Enregistrer l'image sous. Une boîte de dialogue apparaît.
Choisissez le répertoire de sauvegarde (disque rigide à la maison ou disquette au lab des HEC).
Vous pouvez conserver le nom proposé (hec.gif) ou choisir un autre nom de votre choix. Dans ce cas, veillez à conserver la même extension (.gif ou .jpg selon le cas).
Cliquez sur Engistrer. Le fichier est transféré dans le répertoire spécifié.
Pour utiliser cette image dans une page Web, copiez le fichier dans le même répertoire que le fichier HTML (.htm) de la page Web et utilisez les codes appropriés dans la page (<IMG ...>).

7. Les tableaux

Les tableaux sont composés de cellules regroupées en lignes et en colonnes. Les codes <TABLE> et </TABLE> encadrent le tableau. Les codes <TR> et </TR> délimitent les lignes (table row). Les codes <TH> et </TH> indiquent les cellules de titres (table header). Les codes <TD> et </TD> délimitent les cellules de données (data). Voici un exemple de tableau simple.

Lettre	Code	Signification
à	à	a accent grave
É	É	e majuscule accent aigu
©	©	copyright

<TABLE BORDER="1">
<TR>
<TH>Lettre</TH><TH>Code</TH><TH>Signification</TH>
</TR>
<TR>
<TD>à</TD><TD>&agrave;</TD><TD>a accent grave</TD>
</TR>
<TR>
<TD>É</TD><TD>&Eacute;</TD><TD>e majuscule accent aigu</TD>
</TR>
<TR>
<TD>©</TD><TD>&copy;</TD><TD><I>copyright</I></TD>
</TR>
</TABLE>

Quelques options:

Les codes <TR>, <TH> ou <TD> peuvent contenir les paramètres d'alignement suivants:
- alignement horizontal: ALIGN (LEFT, RIGHT ou CENTER)
- alignement vertical: VALIGN (TOP, BOTTOM, MIDDLE ou BASELINE)
Les cellules peuvent couvrir plusieurs colonnes avec le paramètre COLSPAN tandis que les lignes peuvent couvrir plusieurs lignes avec le paramètre ROWSPAN.
On peut préciser la largeur des colonnes avec le paramètre WIDTH des codes <TH> ou <TD>. Le paramètre peut indiquer la largeur en pixels ou en pourcentage.

Un exemple:

Col. 1
Ligne 1 Colonnes 2 et 3

Ligne 2

Gauche Haut

Ligne 3

Droite Bas

Ligne 4

Centre Milieu

Col. 1 Ligne 1	Colonnes 2 et 3
Ligne 2	Gauche	Haut
Ligne 3	Droite	Bas
Ligne 4	Centre	Milieu

<TABLE BORDER=3>
<TR>
<TH WIDTH=100>Col. 1<BR>Ligne 1</TH>
<TH COLSPAN=2 WIDTH=200>Colonnes 2 et 3</TH>
</TR><TR>
<TD><BR>Ligne 2<BR><BR></TD>
<TD ALIGN="LEFT">Gauche</TD>
<TD VALIGN="TOP">Haut</TD>
</TR><TR>
<TD><BR>Ligne 3<BR><BR></TD>
<TD ALIGN="RIGHT">Droite</TD>
<TD VALIGN="BOTTOM">Bas</TD>
</TR><TR>
<TD><BR>Ligne 4<BR><BR></TD>
<TD ALIGN="CENTER">Centre</TD>
<TDVALIGN="MIDDLE">Milieu</TD>
</TR>
</TABLE>

8. Les formulaires

Les formulaires sont encadrés par les codes <FORM ACTION="..."> et </FORM>. Le contenu du paramètre ACTION indique le nom du script à exécuter lorsque l'utilisateur clique sur le bouton Transmettre (ou le bouton équivalent). La création et l'installation des scripts doit se faire en collaboration avec le responsable de votre serveur Web.

Les formulaires comportent les codes suivants:

Des zones de texte: <INPUT NAME="Texte" VALUE="texte proposé" MAXLENGTH="25" SIZE=25>

Des listes d'options sous la forme de boutons: Bouton 1 Bouton 2 <INPUT TYPE="RADIO" NAME="Choix" VALUE="Bouton 1"> Bouton 1 <INPUT TYPE="RADIO" NAME="Choix" VALUE="Bouton 2"> Bouton 2

Des cases à cocher: <INPUT TYPE="CHECKBOX" NAME="Case à cocher" VALUE="" CHECKED>

Des listes permettant de faire une sélection: <SELECT NAME="Liste"> <OPTION SELECTED>Choix 1 <OPTION>Choix 2 <OPTION>Choix 3 </SELECT>

Un bouton pour transmettre le contenu du formulaire (il peut porter d'autres noms tel que "Envoyer" ou "OK".) <INPUT TYPE=SUBMIT VALUE="Transmettre" NAME="Transmettre">

Un bouton pour annuler la saisie de l'information et la recommencer. <INPUT TYPE=RESET VALUE="Annuler">

Voici un autre exemple

<FORM ACTION="http://tuna.uchicago.edu/htbin/conjugate.sh">
<P>
<CENTER>
<TABLE BORDER="1" ALIGN="CENTER">
<TR><TD VALIGN="MIDDLE" COLSPAN=3 WIDTH=636>
<CENTER><B>Verbe</B>:<BR>
<INPUT NAME="verb" VALUE="aimer" MAXLENGTH="25" SIZE=25></CENTER>
</TD></TR>
<TR><TD VALIGN="MIDDLE" WIDTH=212><INPUT TYPE="RADIO" NAME="tense" VALUE="IndP" CHECKED>Présent
<BR>
<INPUT TYPE="RADIO" NAME="tense" VALUE="PasS">Passé simple<BR>
<INPUT TYPE="RADIO" NAME="tense" VALUE="Fut">Futur
</TD><TD VALIGN="MIDDLE" WIDTH=212>
<INPUT TYPE="RADIO" NAME="tense" VALUE="Cond">Conditionnel<BR>
<INPUT TYPE="RADIO" NAME="tense" VALUE="IndI">Imparfait<BR>
<INPUT TYPE="RADIO" NAME="tense" VALUE="SubjP">Subjonctif
</TD><TD VALIGN="MIDDLE" WIDTH=212><CENTER>
<INPUT TYPE="submit" VALUE="Conjuguer"></CENTER>
</TD></TR>
</TABLE>
</CENTER>
</FORM>

9. Les lignes de commentaires

Lorsqu'une page devient grosse ou complexe, il devient nécessaire de commenter certains éléments qui permettront au programmeur de la page de fournir certains commentaires sur le design de la page. Soit pour donner des directives, des explications, des justifications etc)

Les lignes de commentaires permettent de le faire. Le texte ainsi écrit dans la page Web, ne sera pas affichée lorsqu'il sera lu par un fureteur

<B></B>	met en caractère gras (bold)
<I></I>	met en caractère italique
<TT></TT>	met en caractère `style ordinateur`
<STRONG></STRONG>	met en caractère gras
<EM></EM>	met en caractère italique
<CITE></CITE>	met en caractère italique
<PRE></PRE>	écrit le texte tel quel, en respectant les espaces, les enter, les tabulations etc.
<blockquote></blockquote>	écrit avec les codes mais inclut une marge à gauche
<font size = ?></font>	ou ? est 1, 2, 3, 4, 5 ou 6
<STRIKE></STRIKE>	met une ~~ligne à travers le texte~~
<SUB></SUB>	crée un indice H₂O
<SUP></SUP>	Crée un exposant 2ⁿ
<BLINK></BLINK>	fait clignoter le texte

Par exemple:	Aurait l'air de:
<H1> premier titre</H1>	premier titre
<H2>deuxième titre</H2>	deuxième titre
<H3>troisième titre</H3>	troisième titre
<H4>quatrième titre</H4>	quatrième titre
<H5>cinquième titre</H5>	cinquième titre
<H6>sixième titre</H6>	sixième titre

<P>	permet de changer de paragraphe et d'ajouter une ligne supplémentaire avant le début du paragraphe suivant
<BR>	permet de changer de ligne sans insérer une ligne avant le paragraphe suivant
<NOBR></NOBR>	garde le texte sur une seule ligne
<HR>	permet d'insérer une ligne horizontale

Le texte suivant:	Aurait l'air de:
<UL> <LI> premier item de la liste <LI> deuxième item de la liste </UL>	premier item de la liste deuxième item de la liste

Le texte suivant:	Aurait l'air de:
<UL> <LI> premier item de la liste <UL> <LI>sous-item 1 <LI>sous-item 2 </UL> <LI> deuxième item de la liste </UL>	premier item de la liste sous-item 1 sous-item 2 deuxième item de la liste

Le texte suivant:	Aurait l'air de:
<OL> <LI> premier item de la liste <LI> deuxième item de la liste </OL>	premier item de la liste deuxième item de la liste

Le texte suivant:	Aurait l'air de:
<OL TYPE=A> <LI> premier item de la liste <LI> deuxième item de la liste </OL>	premier item de la liste deuxième item de la liste

Le texte suivant:	Aurait l'air de:
<OL TYPE=i> <LI> premier item de la liste <LI> deuxième item de la liste </OL>	premier item de la liste deuxième item de la liste

Le texte suivant:	Aurait l'air de:
<OL START=4> <LI> premier item de la liste <LI> deuxième item de la liste </OL>	premier item de la liste deuxième item de la liste

Le texte suivant:	Aurait l'air de:
<DL> <DT>école <DD>lieu où on est supposé apprendre <DT>musique <DD>son gracieux et parfois disgracieux qui peuvent parvenir à nos oreilles et provoquer certaines émotions </DL>	école lieu où on est supposé apprendre musique son gracieux et parfois disgracieux qui peuvent parvenir à nos oreilles et provoquer certaines émotions

Verbe:
Présent Passé simple Futur	Conditionnel Imparfait Subjonctif

Des zones de texte:		`<INPUT NAME="Texte" VALUE="texte proposé" MAXLENGTH="25" SIZE=25>`
Des listes d'options sous la forme de boutons:	Bouton 1 Bouton 2	`<INPUT TYPE="RADIO" NAME="Choix" VALUE="Bouton 1"> Bouton 1 <INPUT TYPE="RADIO" NAME="Choix" VALUE="Bouton 2"> Bouton 2`
Des cases à cocher:		`<INPUT TYPE="CHECKBOX" NAME="Case à cocher" VALUE="" CHECKED>`
Des listes permettant de faire une sélection:		`<SELECT NAME="Liste"> <OPTION SELECTED>Choix 1 <OPTION>Choix 2 <OPTION>Choix 3 </SELECT>`
Un bouton pour transmettre le contenu du formulaire (il peut porter d'autres noms tel que "Envoyer" ou "OK".)		`<INPUT TYPE=SUBMIT VALUE="Transmettre" NAME="Transmettre">`
Un bouton pour annuler la saisie de l'information et la recommencer.		`<INPUT TYPE=RESET VALUE="Annuler">`