Atelier - HTML 3

1. Tableaux

Les tableaux constituent la réponse idéale aux problèmes posés par l'alignement des textes et des images.

Les codes utilisés:
Les tableaux sont délimités par les étiquettes <TABLE>.....</TABLE>

Le titre du tableau (facultatif) est délimité par les étiquettes <CAPTION>....</CAPTION>

Chaque rangée est délimitée par les étiquettes <TR>.....</TR>

Chaque cellule est délimitée par les étiquettes <TD>.....</TD>

Voici les codes pour créer un tableau à multiples cellules :
<TABLE>
<TR>
<TD>rang 1, cellule 1</TD><TD>rang 1, cellule 2</TD><TD>rang 1, cellule 3</TD>
</TR>
<TR>
<TD>rang 2, cellule 1</TD><TD>rang 2, cellule 2</TD><TD>rang 2, cellule 3</TD>
</TR>
</TABLE>

Voici le résultat:

rang 1, cellule 1 rang 1, cellule 2 rang 1, cellule 3

rang 2, cellule 1 rang 2, cellule 2 rang 2, cellule 3

Attributs que peut prendre l'étiquette TABLE

Tous ces attributs s'inscrivent dans la commande, juste après le mot TABLE.

ALIGN= Permet au tableau d'être aligné à gauche (LEFT), à droite (RIGHT), au centre (CENTER) ou justifié (JUSTIFY), soit aligné à gauche et à droite.

BORDER= Permet de mettre une bordure autour du tableau et d'en ajuster la grosseur.

WIDTH= Permet de jouer sur la largeur du tableau. La valeur peut être donnée en pixel ou en pourcentage.

CELLSPACING= Permet de jouer sur la quantité d'espace entre les cellules du tableau.<TABLE CELLSPACING=unNombre>. (Espace entre cellule)

CELLPADDING= Permet de jouer sur l'espace entre la bordure de la cellule et son contenu. <TABLE CELLPADDING=unNombre>.(Espace dans cellule)

BGCOLOR= Permet d'attribuer une couleur au fond du tableau.<TABLE BGCOLOR="uneCouleur"> où les numéros de couleurs sont celles du RGB à 6 chiffres.

Attributs que peut prendre TR (chaque rangée)

Tous ces attributs s'inscrivent dans la commande, juste après le mot TR.

ALIGN= Permet de justifier le contenu des cellules de la rangée à gauche(LEFT), à droite (RIGHT) ou centré (CENTER).

VALIGN= Permet d'aligner le contenu des cellules en haut (TOP), en bas (BOTTOM) ou centré (CENTER).

Attributs que peut prendre TD (chaque cellule)

Tous ces attributs s'inscrivent dans la commande, juste après le mot TD.
Note: les codes que vous insérez ici ont préséance sur ceux que vous avez mis dans la définition de vos rangées (TR)

ALIGN= Permet de justifier le contenu d'une cellule à gauche (LEFT) , à droite (RIGHT) ou centré (CENTER).

VALIGN= Permet d'aligner le contenu d'une cellule en haut (TOP), en bas (BOTTOM) ou centré (CENTER).

NOWRAP Interdit la coupure d'une ligne dans une cellule. <TD NOWRAP>

COLLSPAN= Donne le nombre de colonnes qu'une cellule peut prendre.

ROWSPAN= Donne le nombre de rangées qu'une cellule peut prendre.

Les attributs de ces étiquettes sont très nombreux, aussi est-il est conseillé de consulter:

Table Maker

Image dans un tableau

Exemple de codes à insérer pour placer une image dans un tableau:

<table border=5 cellspacing=5 cellpadding=3>
<tr>
<td><IMG src="explose.gif"></td>
<td align=center>Ce texte est<BR>facilement aligné<BR>
avec les images<BR>adjacentes</td>
<td><IMG src="batons.gif"></td>
</tr>
</table>

Voici le résultat:

Ce texte est
facilement aligné
avec les images
adjacentes

Il est même possible d'enlever l'encadrement des cellules (border=0) et de centrer le tableau dans la fenêtre (<center>).

<center>
<table border=0 cellpadding=10>
<tr>
<td><IMG src="explose.gif"></td>
<td align=center>Ce texte est<BR>facilement aligné<BR>
avec les images<BR>adjacentes</td>
<td><IMG src="batons.gif"></td>
</tr>
</table>
</center>

Voici le résultat:

Ce texte est
facilement aligné
avec les images
adjacentes

Note : Pour insérer une colonne vide, on doit écrire ce code :  

Enfin, un exemple de tableau très utile, du moins pour les chimistes, est le

Tableau de classification périodique.

1.1 Création de tableaux avec WebExpert

Pour insérer un tableau dans votre document:

1. Positionnez votre curseur à l'endroit désiré pour insérer le tableau.

2. Dans la barre d'outils «Tableaux, cadres et listes», cliquez sur le bouton TABLEAU .

3. Dans la fenêtre «Propriétés du tableau», déterminez le nombre de rangées et de colonnes du tableau dans les cases respectives.

Dans la fenêtre «Esquisse» au bas de l'écran, vous pourrez visualiser votre tableau.

Vous pouvez fusionner des cellules du tableau en appuyant sur le bouton FUSIONNER afin d'obtenir le résultat visuel désiré.

Il vous est également possible de modifier les propriétés de chacune des cellules du tableau en appuyant sur le bouton PROPRIÉTÉS CELLULES . Il vous sera possible d'insérer directement du texte dans chaque cellule.

Vous pouvez insérer un titre au tableau en appuyant sur le bouton PROPRIÉTÉS DU TITRE DU TABLEAU .

Pour choisir un arrière-plan de couleur, appuyez sur le bouton PROPRIÉTÉS ADDITIONNELLES DU TABLEAU .

4. Appuyez sur le bouton OK.

2. Fichiers son

Fichiers.MID: Enregistrements synthétisés de chansons populaires ou de symphonies classiques sous un format instrumental.
Fichiers.WAV: Ce sont des sons plutôt que de la musique.

Pour insérer un fichier .MID ou .WAV avec WebExpert:

Dans la barre d'outils «Spécialisés», cliquez sur le bouton MODULE ENCHASSÉ .
Dans la boîte texte «Source», inscrivez le chemin et le nom du fichier qui contient le programme. Le fichier doit être de format WAV ou MID. Vous pouvez tester le fichier son en appuyant sur le bouton TEST. Le bouton ARRÊT vous permet d'arrêter le fichier son.
Dans le menu «Alignement», sélectionnez l'alignement désiré du programme par rapport au texte se trouvant sur la même ligne. Cette option est obligatoire.
Cliquez sur le bouton OK.

Le programme insérera la commande suivante dans votre document: <EMBED SRC="unFichier" ALIGN="unAlignement"></embed> Vous pouvez ajouter des options à la commande EMBED:

Répétition à l'infini
En mettant un crochet dans cette boîte le fichier va jouer tant que la page est ouverte. Cette option ajoutera l'attribut LOOP=TRUE.

Démarrage automatique
En mettant un crochet dans cette boîte, le fichier va jouer aussitôt que vous ouvrez la page. Cette option ajoutera l'attribut AUTOSTART=TRUE.

Cacher le panneau de contrôle
En mettant un crochet dans cette boîte, le panneau de contrôle n'apparaîtra pas sur la page. Cette option ajoutera l'attribut HIDDEN=TRUE.

Panneau de contrôle réduit
En mettant un crochet dans cette boîte, un petit panneau de contrôle apparaîtra sur la page. Cette option ajoutera l'attribut CONTROLS=SMALLCONSOLE.

Bordure
Dans cette boîte, vous pouvez ajouter une bordure autour de l'emplacement où votre programme sera joué. Cette option ajoutera l'attribut BORDER=" ".

Volume
Dans cette boîte, vous pouvez ajuster le volume de départ de votre fichier sonore. L'utilisateur pourra cependant le modifier par la suite. L'attribut VOLUME= chiffre sera ajouté a votre document.

Largeur/Hauteur
Dans ces boîtes, vous pouvez spécifier la largeur et la hauteur en pixel de la surface où le programme sera joué. Cette option ajoutera les attributs WIDTH et HEIGHT.

Voici un exemple de fichier .MID

Répertoires de fichiers MIDI

Note : l'avantage des fichiers MIDI (.MID) est qu'ils se téléchargent très rapidement.

Ultimate MIDI Page

The MIDI Farm

MidiCity

3. Consignes à respecter dans la conception d'un site Web

Concevoir un site Web, c'est d'abord et avant tout communiquer
GIRARD, André, et Clément LABERGE. Infoduc, Québec, Septembre Média, 1997, 198 p.

La page Web s'affiche rapidement. Évitez qu'une image ait une taille supérieure à 20 Ko et veillez à ce qu'une page, dans son ensemble, ne dépasse pas 50 Ko.
En arrivant dans le site, vous avez une vue d'ensemble des options qui vous sont offertes. Créez un plan qui représente le contenu complet du site. Ce plan devrait permettre aux internautes de se rendre d'un endroit à un autre en cliquant sur ses différents éléments.
Le texte est facilement lisible sur le fond. Portez attention au choix des couleurs et des images de fond.
Vous pouvez toujours dire où vous êtes.
Le design est attrayant et original. Les images empruntées, qui se retrouvent dans plusieurs sites, risquent de lasser les internautes.
Tout a une fonction et rien n'est seulement décoratif. Ce n'est pas parce que le langage HTML permet d'intégrer des images animées, des sons, des Java Script, des modules d'extension qu'il faut absolument les utiliser. Ils doivent apporter une contribution significative au site.
Vous pouvez vous déplacer d'une page à une autre, d'un lien à un autre, d'un item à un autre, facilement, sans vous perdre. Des icônes de navigation uniformes dans chacune des pages et dont l'emplacement varie le moins possible est recommandé.
Des liens vous permettent d'avancer ou de reculer, si nécessaire. Identifiez-les clairement et explicitez leur nature.
Exemple : Tableau de codes HTML (Fichier compressé en format Word 6.0, 3 Ko).
Les liens sont utiles et appropriés. Jamais un lien ne devrait mener à une page qui annonce seulement que le site est «en développement». Il est préférable de ne pas activer le lien plutôt que de provoquer de la déception chez les internautes et de leur faire perdre du temps.
Le multifenêtrage doit faire l'objet d'une attention particulière, d'autant plus que la navigation à l'intérieur des cadres est parfois complexe.
L'auteur s'exprime dans une langue correcte.
Il y a suffisamment d'informations pour que le site vaille la peine d'être visité.
Les informations sont clairement identifiées et organisées. Précisez les sources de vos informations. Cette action démontre que le contenu est fiable et qu'il peut être utilisé sans crainte dans un contexte éducatif.
Le site fait l'objet d'une mise à jour récente (date écrite et visible).
Le site contient suffisamment de renseignements sur l'auteur pour le situer par rapport à son sujet.
L'adresse électronique de l'auteur est disponible.