TEXTES de BASE en HTML
Le succès de l'Internet relève de deux éléments concomitants:
- 1. la fin de la guerre froide qui a permis la libéralisation du réseau des réseaux - l' Internet - et son ouverture au monde commercial.
- 2. l'introduction de l'HTML (HyperText Markup Language) et la miseau point d'un programme serveur d'informations initialement développépar le Centre Européen de Recherche Nucléaire (CERN àGenève) mis en oeuvre d'abord pour les propres besoins des chercheurs et qui aboutit à World Wide Web que nous connaissons aujourd'hui.
L'hypertexte est un mode d'écriture qui s'inscrit "au delà" du texte visible sur l'écran au moyen de balises.
Il peut paraître superflu de s'initier à HTML puisqu'il existeaujourd'hui des traducteurs et des assistants accompagnant les logiciels detraitement de texte récents comme Word par exemple, qui produisent des documents en hypertexte.
Les navigateurs récents comme Netscape sont eux-mêmes dotés de compléments permettant de créer des pages en HTML.
Cependant, on aimerait savoir ce que l'on fait et parfois changer une présentation, changer une couleur, mettre en relief certains mots, insérer une image, améliorer la forme rendue après une convertion par un traitement de texte standard qui n'est pas toujours parfaite
Les éditeurs les plus perfectionnés peuvent générer des commandes HTML inexactes qu'il faudra bien se résigner àrectifier manuellement si on veut obtenir l'effet désiré.
HTML est non seulement utilisable pour créer une ou des pagessur l'Internet, mais peut aussi être utile pour créer un CD-Rom.
Notre objectif consistera à donner tous les éléments essentiels pour créer un article, le chapitre d'un livre, voiretout un livre à placer sur l'Internet, avec les liens vers les tableaux, les images et graphiques, les références et les résumés des références.
Précisons d'abord trois notions.
Les 3 éléments :
URL - Uniform Resource Locator
HTTP - HyperText Transfer Protocol sur les serveurs
HTML - HyperText Markup Language pour les documents,
ont créé l'image, la représentation du nom World Wide Web, WWW, W3, la toile d'araignée (Web) ouverte à l'échelle mondiale ( World Wide).
-------------------------------------------------
N.B. : Il y a plusieurs
Notre sujet concerne HTML - extrait d'un volume de 700 pages dont voici la référence :
HTML Sourcebook
2 nd édition
by Ian S. Graham
John Wiley 1996.
Ceux qui veulent approfondir le sujet liront avec fruit
Créer vos pages Web- Mode d'emploi.
par Yves Fréchil - (Ed. Sybex - Paris - 1997)
--------------------------------------------------
Qu'est ce qu'un langage "surmarquant " un texte (text markup language)?
Un langage surmarquant est un mode de programmation de la manière dont le document doit apparaître, en utilisant des commandes "enfouies" dans le document.
Par exemple : supposons que je souhaite que le mot "auditoire" apparaisse en lettres grasses.
Le langage surmarquant peut matérialiser ce souhait avec des commandes sous la forme:
(comm-gras) auditoire (fin-gras).
En anglais : (begin-bold) auditoire ( end-bold)
Cela signifie : choisir l'impression en gras - écrire le mot "auditoire" - terminer l'impression en gras.
Dans cet exemple, ce qui se trouve entre parenthèse (comm-gras) et (fin-gras) sont des balises du langage surmarquant indiquant qu'il faut activer l'impression en gras puis la désactiver.
Un langage surmarquant utilise de nombreuses balises de ce genre pour indiquer comment le document doit apparaître.
Sans que l'on s'en rende compte, tous les traitements de texte utilisent une forme de langage surmarquant de façon à faire apparaître le document comme nous le souhaitons. Un retour de ligne, un paragraphe, un retrait de tabulation sont autant de commandes en langage du genre surmarquant - enfouies dans le texte.
Ici, l'idée est la même : un langage surmarquant est composé d'un ensemble de commandes "enfouies" dans le texte, mais écrites, qui expriment la manière dont celui-ci doit se présenter.
Terminologie
HTML est un langage à balises. Une balise est constituée par un mot-clé placé entre deux chevrons "<" et ">".
Il existe deux types de balises:
? les marqueurs : qui sont composés d'une seule balise accompagnée éventuellement d'un attribut.
Exemples :
<HR> pour une ligne horizontale (Horizontal Row)
< HR ALIGN="left"> pour aligner une ligne horizontale àgauche. ALIGN est l'attribut de la balise.
L'attribut est suivi du signe "=" sans espace et le complément de l'attribut est placé entre guillemets.
Applications:
<BR> est un marqueur; il signifie "line break " - retour de ligne.
Comme un retour de ligne n'implique aucune autre commande sur un texte, il n'y a pas de balise terminale </BR>
<P> indique "début de paragraphe" avec un doubleretour de ligne avant le <P>
Ainsi : <P> et <BR><BR> ont un effet équivalent.
<P> est en principe un marqueur, parfois considérécomme conteneur.
Mais, après <P>, la fin du paragraphe </P> n'est pas obligatoire.
<H1>Auditoire </H1>
<H1> est la balise initiale entre les deux chevrons <>
H1 indique un titre de niveau 1 - (ce sont de gros caractères gras pour un titre - Le "Heading" "un" est le niveau le plus élevé)
</H1> est la balise terminale.
Il y a six niveaux de "Headings" de 1 à 6 : du plus grand au plus petit.
Ecriture
Alors que les balises peuvent s'écrire en minuscule ou en majuscules, elles sont généralement écrites en majuscules pour bienles isoler du restant du texte.
Les compléments d'un attribut sont placés entre guillements.
HTML est évolutif et extensible.
Nous en sommes à la version 3.2, et il y intérêt à s'en tenir aux balises classiques, si l'on souhaite que le texte soit lu de la même manières par tous.
Si on utilise une version trop évoluée, il se peut quecertains, utilisant un navigateur plus ancien, ne puissent pas lire le document.
HTML ne comporte pas de caractères accentués.
HTML est structuré et n'admet pas de chevauchements.
On écrit : <CENTER><H1>Auditoires</H1> </CENTER>
Cela serait une erreur de logique d'écrire :
<CENTER><H1>Auditoires </CENTER></H1>
Peut-être un navigateur pourra-t-il lire correctement, mais lerésultat est imprévisible.
Prenons maintenant un exemple:
L'URL d'un document se termine toujours par "htm" ou "html", indifféremment.
SELECTIONNEZ ce passage en rouge - COPIEZ - et IMPRIMEZ
<HTML>
<HEAD>
<TITLE>Ceci est le titre du document</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Ceci est un titre</H1></CENTER>
<P> Bonjour, ceci n'est qu'un document d'étude
et
vous vous attendiez sans doute à<I> un autre texte</I>
ou à un <B> rapport</B> plus stucturé.
<P>Excusez-moi. Pas de chance. Ce document
ne
contient que des exemples de commandes HTML , COMME PAR EXEMPLE une liste non structurée.:
<UL>
<LI> un point de la liste
<LI> un autre point de la liste <LI>encore un point de la liste pour indiquer que l'emplacement de la marque n'a pas d'importance<BR><BR>
<LI> le dernier point pour monter un espace plus large. Un seul BR ne produit rien puisque LI effectue un retour de ligne
</UL>
<P> Les listes peuvent aussi avoir une forme ordonnée (avec des chiffres ou lettres)
<HR>
<P>Et vous pouvez tracer des lignes horizontales pour séparer des sections de texte.
</BODY>
</HTML>
----------------------------------------------------
Pour voir comment cet exemple est reproduit par le navigateur, cliquez
----------------------------------------------------
HTML est hiérarchisé
. Note sur les P :
</P> est optionnel.
La règle est que <P> s'achève lorsqu'il rencontre un autre <P> ou une autre marque.
Les espaces ne s'additionnent pas
<P><P><P> n'a pas de sens logique parce qu'il ne peutlogiquement pas exister de paragraphe vide.
Si l'on veut plus d'espace il faut faire <BR><BR><BR>, ce qui est plus logique puisque <BR> signifie un retour de ligne ( line break)
--------------------
Voyons la deuxième partie.
Une liste peut être sans ordre = unordered list : balise (conteneur) <UL>
ou ordonnée = ordered list : balise <OL> dont les éléments sont numérotés par des chiffres ou des lettres
Une liste n'est jamais vide et il faut toujours la terminer par la balise terminale </UL> ou </OL> selon le cas.
<UL> doit toujours être suivi directement de la balise (marqueur) <LI> (list item) sans texte entre les deux.
Une liste ne peut jamais contenir que des éléments de la liste <LI>
Il faut écrire le texte après <LI> sans espace, sinon l'alignement de l'indentation peut être tordu.
N.B. :
? .<LI> réordonne toujours la liste, mêmequand il est placé autrement dans le document de base ( voir exemple)
? Pour créer des espaces plus larges : utiliser <BR><BR>. Puisque <LI> fait une retour de ligne, le premier <BR> n'est pas pris en compte. (voir exemple).
? <LI> est parfois utilisé seul (sans UL ou OL) , pour placer des boutons, comme ceux-ci. Alors, il n'est pas indenté. (ceci n'est pas classique)
<UL>
<LI>texte
<LI>texte
</UL>
<LI>
</UL>
Une liste ordonnée peut aussi contenir une liste non ordonnée et vice-versa.
EN RESUME :
1. Les titres seront courts et descriptifs.
2. HTML est hiérarchisé dans la séquence :
<HTML>
<HEAD>
<TITLE>
</HEAD>
<BODY>
texte
</BODY>
</HTML>
3. Des espaces blancs, retraits par tabulateur, lignes blanches, n'ont pas d'effet sur la mise en forme. Seul les balises HTML modifient la présentation.
Eviter les espaces blancs entre les balises et le texte qui la suit.
4. Les headings H1 à H6 ne peuvent se trouver qu'à l'intérieur de BODY ou BLOCKQUOTE (voir plus loin).
5. UL ou OL ne peuvent contenir que des LI .
Les LI ne contiennent que du texte, des images ou d'autres listes, mais pas de Headings.
LES LIENS en HYPERTEXTE
Dans la partie précédente, nous avons vu de quelle manière HTML surmarque un texte simple.
Voyons maintenant comment inclure des images et établir des liens entre des textes.
Voici un exemple : ()
SELECTIONNEZ ce passage en rouge - COPIEZ - et IMPRIMEZ
Et un deuxième texte :
()
SELECTIONNEZ ce passage en rouge - COPIEZ - et IMPRIMEZ
<HTML>
<HEAD>
<TITLE>Exemple de lien en Hypertexte</TITLE>
</HEAD>
<BODY>
<H2>Lien en Hypertexte</H2>
<P> Bien, maintenant que vous y êtes. <BR><BR><BR>
<B><TT>Vous pouvez retourner</TT></B>
<P>soit en cliquant sur "back" sur votre navigateur,<BR>
<P>soit en faisant un <A HREF="">lien </A>dans ce texte-ci.
</BODY>
</HTML>
----------------------------------------------------
Pour voir comment cet exemple est reproduit par le navigateur, cliquez
----------------------------------------------------
<IMG SRC="">
"" est le complément de l'attribut SRC, c'est en réalité l'URL d'un autre fichier, une image GIF que nous avons créée et qui représente une maison. Le suffixe GIF est une extension pour indiquer le format d'image; avec jpg, il est le plus courant sur l'Internet.
En voyant la manière dont le navigateur traite cette image, nous remarquons qu'elle est considérée comme une GRANDE LETTRE , en ligne avec le texte, déformant l'espace entre les lignes pour éviter tout chevauchement entre l'image et le texte.
Par défaut, le texte s'aligne avec le BAS de l'image.
Comme on ne sait pas, comment cela se présenterait si un texte se trouve avant et après, il y a intérêt à placer une image après un <P> ou un <BR>, en début de ligne.
On peut cependant maîtriser comment le texte se présentera par rapport à l'image en ajoutant un deuxième attribut qui se rapporte à la position de l'image par rapport au texte.
C'est ALIGN
ALIGN="top" - le sommet de l'image s'aligne avec le texte
ALIGN="middle" - le milieu de l'image s'aligne avec le texte
ALIGN="bottom" - le bas de l'image s'aligne avec le texte.
Si on n'écrit pas ALIGN, le bas de l'image s'aligne avec le texte.(bottom par défaut)
Le JPEG ( Joint Photographic Expert Group)(extension) .jpeg ou .jpgest le mieux approprié pour les photos.
Les deux formats sont comprimés.
Comment l'image apparaît elle ?
Le navigateur lit d'abord le document HTML et recherche la balise IMG.
S'il le trouve, il effectue une recherche complémentaire sur l'attribut SRC pour obtenir le fichier.
S'il y a 10 images sur une page, il faudra 11 connexions. Ceci peut ralentir considérablement l'affichage d'une page.
La plupart des navigateurs permettent d'éviter le téléchargement d'images, ce qui accélère l'affichage.
Certains évitent le téléchargement automatique des images et on peut regretter l'IMAGO-MANIA (la manie actuelle de bourrer les pages par des images) chère aux designers. Une page doit être entièrement lisible, sans image.
Une image peut agrémenter une page et lui apporter une information complémentaire, mais ne peut pas être un sine qua non pour atteindre un lien.
En Résumé :.
1. On inclut des images par la balise et l'attribut IMG SRC=" ." qui indique l'URL de l'image
2. On établit le lien avec un autre document par la balise ancre A HREF="----"qui indique l'URL du fichier
Des URL partielles peuvent être utilisées sur le même serveur dans le même répertoire. Le signe (/ ) indique un autre répertoire.
3. On peut utiliser des images comme lien hypertexte selon :
<A HREF=" .." ><IMG SRC=" ."></A>
4. Bien vérifier que tous les liens fonctionnent.
--------------------------------------------------------
A ce stade, nous pouvons déjà tirer quelques règles générales
Jusqu'ici nous avons vu comment on pouvait établir un lien avec un autre texte ou une image.
Parfois, quand un texte est long, on aimerait pouvoir sauter immédiatement vers un autre endroit du texte, ou bien, on aimerait se rendre à un endroit particulier dans un autre document.
Ceci est rendu possible par l'attribut NAME attaché à la balise A (ancre)
C'est l'identificateur (fragment identifier) de l'endroit du texte vers lequel on veut se rendre.
Pour établir le lien, le mot pointeur dans le texte est entouré de la façon suivante :
<A HREF="# "> - mot pointeur - </A>
On utilise le signe spécial # pour faire la différence avec une URL normale, indiquant ainsi qu'il s'agit de trouver le repère NAME.
Exemple d'écriture :
<A HREF="#Histoire">Histoire de l'UCL </A>
"Histoire de l'UCL " sera en surbrillance et en cliquant sur ce mot, on se rend à l'endroit du texte qui comporte <A NAME="Histoire">
Il n'y a évidemment pas de </A> après cette balise qui n'est qu'un marqueur.
De la même manière, par <A HREF= " #histoire"> , on peut évidemment établir un lien avec un autre document qui contiendrait <A NAME="histoire">
Les attributs HREF et NAME peuvent être utilisés ensemble dans le même texte.
N.B. : Après# , on peut mettre des lettres et des chiffres, mais il faut toujours une lettre pour commencer et non un chiffre.
Ce double adressage est particulièrement intéressant dans un article - ou un cours - où on indiquerait les références par des chiffres, puis, à partir des références, un retour à l'endroit d'origine.
Ceci est très simple à réaliser, après avoir créer la balise, par un copier/coller en changeant les chiffres.
Allons voir et cliquons sur les chiffres en hypertexte en fin de chaque paragraphe dans cet exemple.
Nous vous proposons de télécharger ce fichier par "Save as" et en Format "Source" pour voir comment il est écrit.
Remarquons:
LES TABLEAUX
La création de tableaux est sans doute l'exercice le plus difficile à réussir en HTML et n'a été développé que plus récemment
Pour insérer un tableau, il y a trois possibilités:
? - soit reprendre le tableau créé par un traitement de texte et le transformer en image GIF.
? - soit faire un tableau rudimentaire par la balise PRE
? - soit utiliser un assistant permettant de créer des tableaux.
Quoiqu'il en soit, nous donnons ci-après la manière de procéder en HTML. Les divers paramètres dont il faut tenir compte sont résumés ci-après.
Ce tableau indique la complexité des variables.
Les balises essentielles sont :
TABLE
TR
TH
TD
Ces 4 balises acceptent l'attribut BGCOLOR pour mettre en couleur, soit tout le tableau, soit une rangée, soit une cellule.
Il va de soi que du texte peut être placé dans le conteneur FONT COLOR=
Il est utile de dessiner le tableau avant de commencer, si on fait des fusions de cellules.
Il y a souvent intérêt à commencer par <CENTER> pour centrer le tableau sur l'écran. A défaut, le tableau se place à gauche.
La balise TABLE
De préférence précédé par <P>
Les attributs sont ALIGN - BORDER - WIDTH - HEIGHT - RULES et CELLPADDING
ALIGN=est accompagné de <left> , <center> ou <right>.
BORDER consiste à tracer un bord ou le cadre . En son absence, le tableau n'a pas de bord. BORDER="0" (tableau sans cadre).
Sans autre indication après BORDER, le bord a une largeur de 1.
On peut augmenter le bord et écrire BORDER="2"
WITDH se rapporte à la largeur et s'exprime le mieux en % de l'écran (par défaut, c 'est 100 %)
HEIGHT se rapporte à la hauteur et s'exprime le mieux en pixels, sachant qu'un écran normal comporte 480 pixels, dont il faut soustraire la hauteur de la barre d'outils du navigateur.
CELLPADDING est optionnel. C'est l'espace en pixels entre le cadre et le contenu de la cellule. Par défaut, c'est 1.
Ex.: <TABLE BORDER="2" WIDTH="90%" HEIGHT="300">
Ce tableau a un bord un peu plus épais, occupe 90 % de la largeur de l'écran et une hauteur de 300 pixels (3/4 d'un écran normal)
-- TABLE ne peut contenir que deux autres balises: CAPTION et TR.
------------------------
La balise CAPTION
C'est le titre qui par défaut se trouve au dessus du tableau. On peut utiliser l'attribut ALIGN = TOP,BOTTOM, LEFT, RIGHT
On peut le mettre sur deux lignes par <BR>, en grasses par <B> et en couleur par <FONT COLOR="# .">
-----------------------
La balise TR(Table Row)
Ce sont les rangées du tableau qui à leur tour contiennent des TH (Table Header) et des TD (Table Data), mais rien n'empêche d'utiliser TH pour les résultats. Les TH se présentent en caractère gras, contrairement aux TD qui sont présentés en caractère normal.
Chaque rangée se termine par </TR> sauf la dernière rangée après laquelle on trouvera </TABLE>
Pour chaque rangée, on donne les attributs:
ALIGN="left" - ou - "right" - ou - "center" (left par défaut)
VALIGN="top" - ou - "middle" - ou "bottom" (middle par défaut)
Ex.: <TR ALIGN="center" VALIGN="top">
N.B. :
- Il va de soi que le nombre de cellules de la première rangée détermine le nombre de cellules de tout le tableau.
- Attention, si on effectue une fusion de cellules. Il faut en tenir compte dans le nombre de données à introduire dans les rangées de cellules.
------------------------
La balise TH(Table Header)
La balise TH détermine le contenu des cellules en tête de colonne. Il est en caractère gras.
</TH> n'est pas nécessaire, parce qu'il est impliqué dans un autre TH ou TD ou TR.
ROWSPAN définit combien de rangées une cellule plus haute occupera dans le tableau en comptant de haut en bas
Ex.: <TH ROWSPAN="2"> occupe deux cellules verticalement.
COLSPAN définit combien de colonnes une cellule plus large occupera dans le tableau en comptant de gauche à droite.
Ex: <TH COLSPAN="2"> occupe deux cellules horizontalement.
Les deux attributs peuvent être combinés
Ex.: <TH ROWSPAN="2" COLSPAN="2">
Une cellule peut contenir : A - IMG - BR - ADDRESS - BLOCKQUOTE - P - PRE - Hn - OL - UL
-------------------------------------------
La balise TD
La balise TD détermine le contenu des cellules. Elle est en caractère normal.
</TD> n'est pas nécessaire, parce que il est impliqué dans un autre TD ou TH ou TR.
Outre ALIGN et VALIGN, TD peut avoir deux autres attributs : ROWSPAN et COLSPAN.
Quand les attributs ALIGN et VALIGN sont utilisés sous TD, ils surpassent et annulent ceux qui accompagnent TR
ROWSPAN définit combien de rangées une cellule plus haute occupera dans le tableau en comptant de haut en bas.
Ex.: <TD ROWSPAN="2"> cfr. supra
COLSPAN définit combien de colonnes une cellule plus large occupera dans le tableau en comptant de gauche à droite .
Ex: <TD COLSPAN="2"> cfr. supra
Les deux attributs peuvent être combinés
Ex.: TD ROWSPAN="2" COLSPAN="2">
Dans une cellule, tant TH que TD, on peut créer des liens par <A HREF > , on peut y mettre une image <TD><="">
et aussi des <BR>, ADDRESS, BLOCKQUOTE, P, PRE, Hn , OL, UL.
N.B.:Une cellule ne peut pas rester vide, si on veut lui garder sa forme lors de la lecture par tous les navigateurs.
Pour ce faire, on y place un espace insécable: " " (numbering space).
Exemple de tableau simple:
SELECTIONNEZ ce passage en rouge - COPIEZ - et IMPRIMEZ
----------------------------------------------------
Pour voir comment cet exemple est reproduit par le navigateur, cliquez
----------------------------------------------------
Commentaires:
Ce tableau est centré et occupe la moitié de la largeur de l'écran.
CAPTION donne le titre en gras <B>
La première cellule a une hauteur de 2 cellules et la suivante a une largeur de 2 cellules. Chaque rangée a donc une largeur de 3 colonnes.
Les </TH> ne sont pas obligatoires.
Word et 2 s'alignent à gauche par défaut.
Le dernier ALIGN="left" est superflu.
Exemple de tableau complexe:
SELECTIONNEZ ce passage en rouge - COPIEZ - et IMPRIMEZ
<HTML>
<HEAD>
<TITLE>Tableau Complexe</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<P>
<TABLE WIDTH="75%" BORDER="4" CELLPADDING="2" HEIGHT="300" >
<CAPTION><B><FONT Color="#FF0000">Here is the caption <BR>of this table</FONT></B></CAPTION>
<TR ALIGN="center" VALIGN="top">
<TD COLSPAN="2"><B>Heading 1</B>
<TD ><B>Heading 3</B></TR>
<TR ALIGN="center" VALIGN="middle">
<TD ROWSPAN="2"><B>Item 1</B>
<TD ><B>Item 2</B>
<TD><B>Item 3</B></TR>
<TR ALIGN="center" VALIGN="middle">
<TD ><B>Item 4</B>
<TD><B>Item 5</B></TR>
<TR ALIGN="center" VALIGN="bottom">
<TD ><B>Item 6</B>
<TD><B>Item 7</B>
<TD><B>Item 8</B></TR>
<TR ALIGN="center" VALIGN="top">
<TD> <B>Item 9</B>
<TD ROWSPAN="2" COLSPAN="2"><B>Item 10</B></TR>
<TR ALIGN="center" VALIGN="top">
<TD> <B>Item 1</B></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
----------------------------------------------------
Pour voir comment cet exemple est reproduit par le navigateur, cliquez
----------------------------------------------------
Commentaires:
Le tableau se présente avec un titre en rouge.
Il est centré, occupe 75 % de largeur d'écran et une hauteur de 300 pixels.
Dans la première rangée, la première cellule occupe deux colonnes de largeur et les textes se trouvent alignés au sommet (VALIGN="top")
La première cellule de la 2 ème rangée (item 1) a 2 cellules de haut, donc la troisième rangée ne pourra plus contenir que deux cellules (item 4 et 5)
A la 5 ème rangée, c'est l'item 10 qui comporte 2 cellules de haut et 2 cellules de large, ce qui entraîne que la 6 ème rangée ne comporte plus qu'une cellule.
Dans la dernière rangée, il y a une fusion de trois cellules et <TR> n'a aucun attribut, donc par défaut le texte se place à gauche et à mi-hauteur. Les caractères sont en vert.
LES CADRES
<NOFRAMES>
<BODY BGCOLOR="#FFFFFF">
<CENTER><H2>ATTENTION</H2></CENTER>
<P ALIGN="center">
<B>Si vous lisez ce texte, votre navigateur ne permet pas de visionner plusieurs cadres sur votre écran. Vous pouvez cependant utiliser l'alternative
<A HREF="">NOFRAMES</A></B>
</BODY>
</NOFRAMES>
<FRAME SRC="" SCROLLING="YES">
<FRAME SRC="" SCROLLING="YES">
</FRAMESET>
</HTML>
N.B.: Le document "" est une page HTML normale comprenant les liens vers le contenu des cadres de FRAMESET.
Cet exemple ne sert qu'à montrer la possibilité de créer trois cadres. Un deuxième FRAMESET divise le deuxième cadre horizontal mais il n'y a encore aucun lien entre les documents mentionnés dans la colonne de gauche et la grande cadre.
<HTML>
<HEAD>
<TITLE>HOMEPAGE for FRAMES</TITLE>
</HEAD>
<FRAMESET ROWS="15%, 85%">
<FRAME SRC="" SCROLLING="YES">
<FRAMESET COLS="20%, 80%">
<FRAME SRC="">
<FRAME SRC="" SCROLLING="YES">
</FRAMESET>
</FRAMESET>
</HTML>
L'utilisation la plus intéressante des cadres est sans conteste la possibilités de placer sur le même écran, àla fois une liste de documents appelables et chacun de ces documents HTML, eux-mêmes pouvant avoir des liens avec d'autres documents externes.
Pour cela, il faut que chacun des documents d'une liste soit complétépar un nouvel attribut appelé TARGETindiquant dans quel cadre le document lié doit être placé.
De plus, il faut que le FRAME qui doit accueillir les documents mentionnés dans la liste soit doté de l'attribut NAMEindiquant le nom du cadre.
Voici un exemple dans lequel nous reprenons tous les exemples de ce cours.
SELECTIONNEZ ce passage en rouge - COPIEZ - et IMPRIMEZ
Pour voir comment cet exemple est reproduit par le navigateur, cliquez
----------------------------------------------------
Remarquez que le deuxième FRAME, qui couvrira 80 % de l'écran, présente l'URL d'une page d'accueil( ) et l'attribut NAME, suivi du nom du cadre(frame2)
Voyons à présent comment est écrit le document ""
<HTML>
<BODY>
<P>
<H3>Documents</H3>
<HR><BR>
<A HREF="" TARGET="frame2">Exemple1</A>
<P>
<A HREF="" TARGET="frame2">Exemple2</A>
<P>
<A HREF="" TARGET="frame2">Exemple4</A>
<P>
<A HREF="" TARGET="frame2">Bibliographie</A>
<P>
<A HREF="" TARGET="frame2">Tableau simple</A>
<P>
<A HREF="" TARGET="frame2">Tableau complexe</A>
<P>
<A HREF="#neuro" TARGET="frame2">Lien dans untexte</A>
<P>
<A HREF="" TARGET="frame2">Document en PDF</A>
<P>
<HR>
<P>
<A HREF="" TARGET="frame2"><FONT SIZE="-1"> Retour à la page d'accueil</FONT></A>
</BODY>
</HTML>
REMARQUEZ que c'est une liste d'URL normale avec une seule différence, c'est l'attribut TARGET suivi du nom du cadre "frame2" qui dirige le document vers le NAME, attribut du FRAME précédent.
Le document à l'intérieur du grand cadre peut lui-même contenir des liens - à l'intérieur de lui-même ( ex.: Bibliographie) ou vers l'extérieur (ex 2 et 3)
Remarquez aussi l'URL précédant "Lien dans un texte"C'est la même adresse que pour la bibliographie complètée par# neuro qui renvoit vers une ancre <A NAME="neuro"> placée dans le texte "". On peut ainsi se diriger directementà l'intérieur d'un plus long document.
Notez que le "Retour à la page d'accueil" pourrait être le retour à la table des matières d'un livre
Enfin : Un exemple plus complexe d'un cadre imbriqué dans un autrecadre : 3 images et un document déroulant.
