Serveur © IRCAM - CENTRE POMPIDOU 1996-2005.
Tous droits réservés pour tous pays. All rights reserved.

Introduction au langage HTML:
comment composer des pages pour un serveur WWW
5. Exemple complet

Michel Fingerhut
2e édition, © Ircam 1995, 1996

Mise en page avec tableau: Hungry Minds Review

Supposons que nous ayons comme maquette à réaliser un dessin de la page d'accueil de la revue [1]. Il est évident qu'il s'agit ici d'une mise en page, et non pas seulement d'une structuration: les éléments, ou pavés, de la page sont alignés non seulement verticalement, l'un à la suite de l'autre, mais aussi horizontalement. Il faut donc, tout d'abord, dégager ces éléments à grands coups de crayon (voir ci-contre).

La partie du bas est bien évidemment un tableau, dont on voit les réglures. C'est moins évident pour le haut, que nous avons partitionné à grands traits (en pointillé rouge). On voit se dégager un tableau à une rangée de deux colonnes.

Dans la colonne de droite, la cellule ne comprend qu'une image.

Dans la colonne de gauche nous avons un texte centré, découpé en paragraphes; le premier comprenant deux lignes, le seconde une ligne, le troisième 6 lignes, le quatrième est un petit tableau de 2 rangées et 3 colonnes, et le dernier paragraphe ne comprend qu'une ligne:

paragraphe (2 lignes)
paragraphe (1 ligne)
paragraphe (6 lignes)
petit tableau
paragraphe (1 ligne)
image

On aurait pu aussi départager horizontalement la 1ère cellule de gauche sous les 2 premières lignes, puis sous la 3ème ligne, mais c'est inutile: l'effet de séparation entre une partie d'un texte et ce qui suit peut être obtenu à l'aide du séparateur de paragraphe, <P>.

La structure HTML qui se dégage est celle, tout d'abord, d'un tableau à une rangée de deux cellules dont les contenus sont tous centrés:


<TABLE>
<TR ALIGN=CENTER>
    <TD> 1ère cellule (de gauche)</TD>
    <TD> 2ème cellule (de droite)</TD>
</TR>
</TABLE>

La 1ère cellule (de gauche)

Elle comprend plusieurs paragraphes, comme nous l'avons vu ci-dessus. Ceux-ci sont centrés - c'est pris en compte par le ALIGN=CENTER ajouté à la directive du début de rangée. Ils comprennent des lignes ne prenant pas toute la largeur de la case - on a donc forcé des retours à la ligne dans chacun des paragraphes avec une directive <BR>. Ces paragraphes sont séparés l'un de l'autre à l'aide de la directive <P>. Ces réflexions dégagent la structuration suivante:


Hungry Minds Review<BR>
An Independent Book Review
<P>
Men and Women, Fall 1995
<P>
Leslie Marmon Silko on Violent Strangers<BR>
Josip Novakovich: Why I Can't Write Erotica<BR>
Susan Straight: My Two Mothers<BR>
A Questionnaire on Gender<BR>
On Tour with Dorothy Allison and Edna O'Brien<BR>
Bly and Updike Recommend Books for Teens
<P>
le petit tableau
<P>
Scroll through our home

Le petit tableau

Quant au petit tableau de deux rangées et trois colonnes, dont les réglures sont toutes visibles, il aura, lui, la structure suivante:


<TABLE BORDER>
<TR ALIGN=CENTER>
    <TD> cellule 1 </TD>
    <TD> cellule 2 </TD>
    <TD> cellule 3 </TD>
</TR>
<TR ALIGN=CENTER>
    <TD> cellule 1 </TD>
    <TD> cellule 2 </TD>
    <TD> cellule 3 </TD>
</TR>
</TABLE>

Changement de taille des caractères

Nous remarquons que la toute première ligne de la cellule est bien plus grande que le reste, la suivante un peu plus grande, mais que ces deux lignes sont contiguës verticalement.

Les directives de titre (<H1>, <H2>, ...) auraient pu être utilisées pour obtenir l'effet de taille, mais elles auraient causé une séparation plus importante entre ces lignes: en effet, elles servent à créer des intertitres, qui se distinguent aussi par un espacement vertical.

On a utilisé ici une directive que nous n'avons pas discutée, et qui est une des extensions non encore standardisée du langage HTML, <FONT> ... </FONT> (qui veut dire "police de caractères") et à laquelle on indique une taille relative choisie, par un numéro de 1 à 7, 7 étant le plus grand. Les 2 premières lignes ("le premier paragraphe" de la cellule de gauche) comprennent donc en fait:


<FONT SIZE=7>Hungry Minds Review</FONT><BR>
<FONT SIZE=5>An Independent Book Review</FONT><BR>

Les liens hypertextuels

La plupart des lignes de la cellule de gauche (et de son petit tableau) sont en fait des liens hypertextuels vers des articles ou rubriques du journal, et sont donc incluses chacune dans une directive <A HREF="..."> ... </A> fournissant l'URL (adresse) du document contenant l'article référencé, par exemple:

<A HREF="maw.html">Men and Women, Fall 1995</A>

La phrase Men and Women, Fall 1995 sera sensible à la souris, et maw.html est l'adresse du document qui sera affiché à l'écran si l'on clique sur ce texte.

La 2ème cellule (de droite)

C'est la plus simple: elle comprend une image chargée simultanément avec la page, utilisant donc la directive <IMG>:

<IMG SRC="house.gif">

En fait, si l'on regarde bien, elle est suivie par une ligne de texte aligné à droite comprenant un nom. Il faut donc faire suivre l'image par un retour à la ligne, puis le texte en tout petit - pour cela nous utiliserons la directive <FONT> ... </FONT> que nous venons de voir ci-dessus, avec la taille la plus petite, 1:


<IMG SRC="house.gif"><BR>
<FONT SIZE=1>Toby Gordon</FONT>

Comment aligner cette ligne à droite? En alignant toute la cellule à droite! Comme la largeur de la cellule sera déterminée par l'image, celle-ci ne sera ni à gauche ni à droite, puisqu'elle prendra toute la largeur. Quant à la ligne, elle est très courte, elle sera donc alignée à droite. Nous utiliserons donc l'indication ALIGN=RIGHT dans la directive débutant la cellule. On aura donc en tout:



<TD ALIGN=RIGHT>
    <IMG SRC="house.gif"><BR>
    <FONT SIZE=1>Toby Gordon</FONT>
</TD>

Le document HTML

Voici le document sous-jacent à la page d'accueil de cette revue. Quelques remarques: tout d'abord, les directives sont en majuscules - ceci n'a pas d'importance, comme on l'avait dit au début: elles peuvent, indifféremment, être en minuscules ou majuscules.

Quelques autres directives non standard sont utilisées, notamment <BLINK> ... </BLINK> pour faire clignoter le texte dans le champ de la directive (invention propre à Netscape); des indications de largeur de colonnes pour les tableaux (WIDTH=...) en pourcentage de la largeur de la page; la couleur du fond de page (BGCOLOR=...).


<HTML>
<HEAD>
<TITLE>Hungry Mind Review Home Page</TITLE>
</HEAD>
<BODY>
<BODY BGCOLOR="#FFFFFF">
<TABLE WIDTH=100%>
<TR>
<TD ALIGN=CENTER>
<FONT SIZE=7>Hungry Mind Review
<BR>
<FONT SIZE=5>An Independent Book Review
<P>
<FONT SIZE=4>
<P>
<BLINK>Please take note of our new URL:
http://www.bookwire.com/hmr/hmr.html
</BLINK>
<P>
<A HREF="maw.html">Men and Women, Fall 1995</A>
<P>
<A HREF="silko2.html">Leslie Marmon Silko on Violent Strangers</A><BR>
<A HREF="novak.html">Josip Novakovich: Why I Can't Write Erotica</A><BR>
<A HREF="straight.html">Susan Straight: My Two Mothers</A><BR>
<A HREF="mawsur.html">A Questionnaire on Gender</A><BR>
<A HREF="mtour.html">On Tour with Dorothy Allison and Edna O'Brien</A><BR>
<A HREF="recom.html">Bly and Updike Recommend Books for Teens</A><BR>
<P>
<TABLE BORDER=2>
<TR>
<TD WIDTH=33% ALIGN=CENTER ><FONT SIZE=4>
<A HREF="hot.html">Hot off the Press</A>
</TD>
<TD WIDTH=33% ALIGN=CENTER><FONT SIZE=4>
<A HREF="dissc.html">Discussion Area</A>
</TD>
<TD WIDTH=33% ALIGN=CENTER><FONT SIZE=4>
<A HREF="bookstore.html">Bookstore</A>
</TD>
</TR>

<TR>
<TD WIDTH=33% ALIGN=CENTER><FONT SIZE=4>
<A HREF="hot.html">Hot Links</A>
</TD>
<TD WIDTH=33% ALIGN=CENTER><FONT SIZE=4>
<A HREF="sub.html">Subscribe</A>
</TD>
<TD WIDTH=33% ALIGN=CENTER><FONT SIZE=4>
<A HREF="sorry.html">New Signed Editions</A>
</TD>
</TR>
</TABLE>
<P>
<FONT SIZE=5>
Scroll through our home
</TD>
<TD ALIGN=RIGHT>
<IMG SRC="house.gif"><BR>
<FONT SIZE=1>
Toby Gordon
</TD>
</TR>
</TABLE>
<BR CLEAR=RIGHT>
<FONT SIZE=4>

<P>

<TABLE WIDTH=100% BORDER=1>
<TR>
<TD ALIGN=LEFT WIDTH=55% >
<FONT SIZE=4>
<TABLE>
<TR>
<TD>
<A HREF="maw.html">
<IMG SRC="mawcover.gif" ALIGN=LEFT WIDTH=160 HEIGHT=213 BORDER=0></A>
<BR CLEAR=LEFT>
<FONT SIZE=1>
Photograph by Shannon Kennedy, &copy; 1995
</TD>
<TD>
<FONT SIZE=4>
<A HREF="maw.html">New Issue</A><BR>
Men and Women
<P>
Bill Holm busts 
<A HREF="holm.html">academic gender</A>
<P>
Kathleen Norris: <A HREF="norris2.html">Celibate Passion</A> 
</TD>
</TR>
</TABLE>
</TD>

<TD ALIGN=LEFT WIDTH=45%>
<FONT SIZE=4>
<TABLE>
<TR>
<TD>
<A HREF="mtour.html">
<IMG SRC="tour.gif" BORDER=0 ALIGN=LEFT WIDTH=160 HEIGHT=160></A>
<BR CLEAR=LEFT>
<FONT SIZE=1>
Andy Nelson
</TD>
<TD>
<FONT SIZE=4>
Authors <A HREF="mtour.html">on tour</A> reflect on our theme.<BR>
Dorothy Allison, Julia Alvarez, Kaye Gibbons, and Edna O'Brien.<BR>
Plus bookstore dates.
</TD>
</TR>
</TABLE>
</TD>
</TR>

<P>

<TR>
<TD ALIGN=LEFT WIDTH=55%>
<FONT SIZE=4>
<TABLE>
<TR>
<TD>
<A HREF="hot.html">
<IMG SRC="comp.gif" BORDER=0 WIDTH=164 HEIGHT=165 ALIGN=LEFT></A>
<BR CLEAR=LEFT>
<FONT SIZE=1>
Andy Nelson
</TD>
<TD>
<FONT SIZE=4>
<A HREF="hot.html">Hot off the Press</A><BR>
Short reviews of new books<BR>
Updated biweekly.
</TD>
</TR>
</TABLE>
</TD>

<TD ALIGN=LEFT WIDTH=45%>
<FONT SIZE=4>
<TABLE>
<TR>
<TD>
<A HREF="dissc.html">
<IMG SRC="sofa.gif" WIDTH=160 HEIGHT=162 ALIGN=LEFT BORDER=0></A>
<BR CLEAR=LEFT>
<FONT SIZE=1>
Andy Nelson
</TD>
<TD>
<FONT SIZE=4>
<A HREF="dissc.html">
Discussion Area</A><BR>
Participate in, or start your own discussion in any topic, from reading and writing to low culture and politics.
</TD>
</TR>
</TABLE>
</TR>

<P>

<TR>
<TD ALIGN=LEFT WIDTH=55%>
<FONT SIZE=4>
<TABLE>
<TR>
<TD>
<A HREF="survey.html">
<IMG SRC="question.gif" ALIGN=LEFT WIDTH=160 HEIGHT=157  BORDER=0></A>
<BR CLEAR=LEFT>
<FONT SIZE=1>
Andy Nelson
</TD>
<TD>
<FONT SIZE=4>
<A HREF="survey.html">
Questionnaires</A><BR>
Probing questions from 
<A HREF="proulxsur.html">E. Annie Proulx</A> (Imagination),  
<A HREF="crispsur.html">Quentin Crisp</A> (American Appetite),  
<A HREF="holmsur.html">Bill Holm</A> (Work and Idleness), 
<A HREF="norrissur.html">Kathleen Norris</A> (The Spirit),
plus staff surveys on <A HREF="racesur.html">Race</A> and 
<A HREF="mawsur.html">Gender</A>.
</TD>
</TR>
</TABLE>
</TD>

<TD ALIGN=LEFT WIDTH=45%>
<FONT SIZE=4>
<TABLE>
<TR>
<TD>
<A HREF="art.html">
<IMG SRC="back.gif"  WIDTH=160 HEIGHT=160 ALIGN=LEFT BORDER=0></A>
<BR CLEAR=LEFT>
<FONT SIZE=1>
Andy Nelson
</TD>
<TD>
<FONT SIZE=4>
<A HREF="art.html">
Back Issues</A><BR>
The best of the HMR. Plus an index with links to all our online reviews, essays.
</TD>
</TR>
</TABLE>
</TD>
</TR>

<P>

<TR>
<TD ALIGN=LEFT WIDTH=55%>
<FONT SIZE=4>
<TABLE>
<TR>
<TD>
<A HREF="child.html">
<IMG SRC="abc.gif"  WIDTH=160 HEIGHT=162 ALIGN=LEFT BORDER=0></A>
<BR CLEAR=LEFT>
<FONT SIZE=1>
Andy Nelson
</TD>
<TD>
<FONT SIZE=4>
<A HREF="child.html">Children's Books</A><BR>
Children's book reviews and features, <BR>
including our annual Books of Distinction Award winners.
</TD>
</TR>
</TABLE>
</TD>

<P>

<TD ALIGN=LEFT WIDTH=45%>
<FONT SIZE=4>
<TABLE>
<TR>
<TD>
<A HREF="mlist.html">
<IMG SRC="list.gif"  WIDTH=160 HEIGHT=160 ALIGN=LEFT  BORDER=0></A>
<BR CLEAR=LEFT>
<FONT SIZE=1>
Andy Nelson
</TD>
<TD>
<FONT SIZE=4>
<A HREF="mlist.html">
Hot Links</A><BR>
Our thematic hot links.
</TD>
</TR>
</TABLE>
</TD>
</TR>

<P>

<TR>
<TD ALIGN=LEFT WIDTH=55%>
<FONT SIZE=4>
<TABLE>
<TR>
<TD>
<A HREF="bookstore.html">
<IMG SRC="order.gif" BORDER=0 WIDTH=158 HEIGHT=133></A>
<BR CLEAR=LEFT>
<FONT SIZE=1>
Toby Gordon
</TD>
<TD>
<FONT SIZE=4>
<A HREF="bookstore.html">Bookstore</A>
<P>
<A HREF="sorry.html">Signed editions</A> of new books for fall.<BR>
<P>
Order books <A HREF="sorry.html">reviewed</A> in 
these pages. <P>
Famous Hungry Mind <A HREF="merch.html">T shirts</A> and other merchandise.
<P>
Our list of <A HREF="dist.html">600 independent bookstores</A> that carry HMR.
</TD>
</TR>
</TABLE>
</TD>

<TD ALIGN=LEFT WIDTH=45%>
<FONT SIZE=4>
<TABLE>
<TR>
<TD>
<A HREF="sub.html">
<IMG SRC="mail.gif" WIDTH=160 HEIGHT=160 ALIGN=LEFT BORDER=0></A>
<BR CLEAR=LEFT>
<FONT SIZE=1>
Andy Nelson
</TD>
<TD>
<FONT SIZE=4>
<A HREF="sub.html">
Subscribe To the Mind</A><BR>
Just $10 a year, 30% off regular price.<BR>
A handsome magazine to hold in your hands.
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

<P>

<HR><FONT SIZE=2><A HREF="mailto:iwhitney@macalstr.edu">Ian Whitney</A> and Sean McGuire. Aug 28, 1995.<BR>
<TABLE WIDTH=100%>
<TR>
<TD ALIGN=LEFT WIDTH=50%><FONT SIZE=4>
<A HREF="index.html"><IMG SRC="house.gif" BORDER=0 ALIGN=LEFT WIDTH=96 HEIGHT=135>Back</A> home.
</TD>
<TD ALIGN=LEFT WIDTH=50%><FONT SIZE=4>
<A HREF="http://www.winternet.com/~hungrymi"><IMG SRC="smallcow.gif" BORDER=0 WIDTH=90 HEIGHT=90> Back</A> to the Hungry Mind home page.
</TD>
</TR>

<TR>
<TD ALIGN=LEFT WIDTH=55%><FONT SIZE=4>
<A HREF="mailto:hmreview@winternet.com"><IMG SRC="pen.gif" BORDER=0 WIDTH=90 HEIGHT=95>E-mail</A> Staff
</TD>
<TD ALIGN=LEFT WIDTH=45%><FONT SIZE=4>
<A HREF="hist.html"><IMG SRC="cow.gif" BORDER=0 WIDTH=100 
HEIGHT=90>About</A> HMR
</TD>
</TR>
</TABLE>
<!-- 8887 -->
</BODY>
</HTML>

Notes

Cette page n'est plus disponible sur l'Internet. La revue l'est toujours, à l'adresse http://www.bookwire.com/hmr/homepage.html.

Introduction au langage HTML: comment composer des pages pour un serveur WWW 5. Exemple complet