Le Monde Magique du Tague chez Mr & Mme Html

version 0.47 du 21 Avril 98

Sommaire

  1. Sommaire
  2. Gestion du corps (<HTML>, <HEAD>, <TITLE>, <BODY>)
  3. Gestion des titres / paragraphes (<H1> ... <H6>, <P>)
  4. Gestion des alignements (<DIV>, <CENTER>)
  5. Gestion des caractères (<B>, <I>, <U>, <STRIKE>, <TT>, <BIG>, <SMALL>, <SUB>, <SUP>, <HR>, <BR>)
  6. Gestion des caractères (part II) (<EM>, <CITE>, <STRONG>, <CODE>, <KBD>, <SAMP>, <VAR>, <BQ>/<BLOCKQUOTE>, <DFN>, <ADDRESS>, <PRE>)
  7. Gestion des listes
  8. Gestion des images (<IMG>)
  9. Gestion des ancres (<A>)
  10. Diverses commandes
  11. Gestion des polices (<FONT>, <BASEFONT>)
  12. Gestion des <FORM> (<FORM>)
  13. Gestion des tableaux
  14. Gestion des notes de pied (<FN>)
  15. Gestion des images map (<IMG>, <MAP>, <AREA>)
  16. Gestion des appliquettes (<APPLET>, <PARAM>)
  17. Gestion des feuilles de style
  18. Appendices

Introduction

Pour faire un document Html, rien de plus simple, vous prenez un texte normal (plus connu sous le nom de texte ASCII) auquel vous rajoutez des tags afin qu'il soit lisible par tout le monde sur le web (enfin, c'est plus compliqué et, ici, ce n'est qu'une introduction et si vous êtes révolté par le manque d'informations... n'hésitez pas à la réécrire!). Le tag est un élément fondamental dans la structure de création de votre page, il vous permet de marquer les différents éléments. Un tag consiste en un crochet inférieur (<), le nom à taguer et le crochet supérieur (>). Les tags sont habituellement utilisés par paire (du genre, <B> ... </B>) afin de commencer et fermer l'instruction tag. Le tag de fin ressemble au tag de commencement avec un slash (/).

Pour certains, il est nécessaire de rajouter des options (du genre sur l'alignement) au niveau du tag de commencement. Ne vous en faites pas, vous pouvez écrire vos tags de toutes les manières <HEAD> ou <head> ou même <HeaD>, comme ça vous chante, mais c'est beaucoup plus pratique d'écrire toujours de la même manière; de mon côté, je préfère les majuscules (bien que cette préférence a changé avec le temps, deux ans plus tard, mon goût se porte désormais sur les minuscules....). Nous allons étudier ici les moeurs des tags, accrochez vos ceintures... c'est parti.

Attention... certains navigateurs interprètent le language HTML à leur manière et ont tendance à oublier des commandes... ce n'est pas une raison pour ne pas insérer la commande... tous les navigateurs ne sont pas dans leur tour d'ivoire!!!

Droits d'Auteur

Ce document est © 96-98 par Chris HÉDÉ. Copiez et distribuez ce texte autant que vous voulez mais ne le modifiez pas ou n'enlevez pas mon nom.

Si vous insérez ce document dans un CD, un livre ou un autre média, j'apprécierai d'en avoir une copie à titre d'information.

Les marques déposées appartiennent à leurs propriétaires respectifs.

Les mécontents

Ce document a pour objectif de fournir une introduction à Html. Je ne possède pas, malheureusement, de diplôme en Html. JE NE ME TIENS PAS RESPONSABLE POUR TOUS LES DOMMAGES DÛS À UNE ACTION ENTREPRISE SOUS L'INITIATIVE D'INFORMATIONS TROUVÉES DANS CE DOCUMENT.

Les commentaires

Tous les commentaires sont les bienvenus. Vous pouvez me les envoyer à chris@idf.net

Nouvelles versions

Les nouvelles versions de ce document se trouvent pour l'instant disponibles uniquement à l'adresse suivante:

http://www.idf.net/chris/

Gestion du corps du document

Les tags <HTML>, <HEAD> et <BODY> semblent de moins en moins importants au niveau des navigateurs. Si vous vous voulez jouer au puriste, mettez-les sinon... De toutes les façons, je n'en suis pas un et je les mets, alors n'hesitez pas !

Gestion des titres / paragraphes

Ces deux tags sont, selon moi, les plus importants à connaitre car ils permettent de donner une forme aux corps en divisant les chapitres, les paragraphes et compagnie...

EXEMPLE NUMÉRO UN

A travers cet exemple, il est possible de voir l'application des tags de corps ainsi que la mise en application de ceux qui définissent la mise en page au niveau du corps principal du document.

-----------------X vous commencez ici X----------------------------

<HTML>

<HEAD>

<TITLE>Un exemple vraiment simple</TITLE>

</HEAD>

<BODY>

<H1>C'est le grand titre</H1>

<P>Et ceci correspond au paragraphe. &Agrave; ce niveau il est possible de broder. Attention, vous pouvez vous permettre d'&eacute;crire une ligne continue sans aucun probl&egrave;me

ou m&ecirc;me


sauter des lignes

&agrave; bout
de champ, le navigateur r&eacute;interpr&ecirc;te tout &ccedil;a normalement.

</BODY>

</HTML>

 -----------------X vous finissez ici X----------------------------

Comment imaginez-vous que rend cet Exemple vu par votre navigateur!!

Gestion des alignements

Cette commande a pris son essort avec l'apparition du Html 3, vous allez me dire: mais on s'en fout du Html 3. Je vous comprends. Cette commande est bien utile surtout combinée avec la fonction <STYLE> ce qui permet d'attribuer au document des caractéristiques qui lui sont propres. De même, tous ceux qui affirment qu'il est impossible de justifier un document sous Html devraient éviter de parler sans savoir... c'est possible mais peu de navigateurs appliquent cette commande, tout simplement.

Gestion des caractères

Avec tous ces tags, il est possible de donner un peu plus d'esthétisme à votre texte. Attention, même si cela semble facile, n'abusez pas des commandes <I>, <B> et cie... il existe aussi d'autres commandes qui, elles sont destinées à des effets bien spécifiques. La fonction souligné, ne soyez pas surpris si elle ne marche pas avec le navigateur qui a la plus grande part du marché, c'est normal... le sousligné est, chez ce navigateur, le signe d'un lien, tout simplement (de toutes façons, ce problème a été résolu avec leur nouvelle version de navigateur!!).

EXEMPLE NUMÉRO DEUX

Cet exemple vous montre comment mettre en pratique les commandes qui donnent un look à votre texte sur vos pages Html et surtout n'oubliez pas comment marchent les tags: Premier ouvert, dernier fermé ou comme ils disent en anglais, LIFO (Last In, First Out)

-----------------X vous commencez ici X----------------------------

<HTML>

<HEAD>

<!-- cette option permet d'inscrire des commentaires -->

<TITLE>&Agrave; l'abordage du second exemple</TITLE>

</HEAD>

<BODY>

<H1 ALIGN=CENTER>La gestion des caract&egrave;res typographiques</H1>

<DIV CLASS="CHAPITRE_SIMPLE">

<H2 ALIGN=CENTER>en caract&egrave;res gras</H2>

<P ALIGN=JUSTIFY>Et l&agrave;, vous pouvez voir ou tout simplement d&eacute;couvrir un paragraphe dont un mot est en <B>gras</B>

<H2 ALIGN=CENTER>en caract&egrave;res italiques</H2>

<P ALIGN=JUSTIFY>Et l&agrave;, vous pouvez d&eacute;couvrir en toute simplicit&eacute; un paragraphe dont un mot est en <I>italique</I>

<H2 ALIGN=CENTER>en caract&egrave;res souslign&eacute;s</H2>

<P ALIGN=JUSTIFY>Et l&agrave;, vous pouvez observer avec vos grands yeux un paragraphe dont un mot est en <U>souslign&eacute;</U>

<H2 ALIGN=CENTER>en caract&egrave;res travers&eacute;s d'une ligne</H2>

<P ALIGN=JUSTIFY>Et l&agrave;, vous pouvez d&eacute;shabiller du regard un paragraphe dont un mot est en <STRIKE>travers&eacute; d'une ligne</STRIKE>

<H2 ALIGN=CENTER>en caract&egrave;res t&eacute;l&eacute;types</H2>

<P ALIGN=JUSTIFY>Et l&agrave;, vous pouvez voir ou tout simplement d&eacute;couvrir un paragraphe dont un mot est en <TT>genre machine &agrave; &eacute;crire</TT>, pour les nostalgiques de la secretaire.

<H2 ALIGN=CENTER>en caract&egrave;res grande police</H2>

<P ALIGN=JUSTIFY>Et l&agrave;, vous pouvez voir ou tout simplement d&eacute;couvrir un paragraphe dont un mot est en <BIG>grande police</BIG>, la police mont&eacute;e :-)

<H2 ALIGN=CENTER>en caract&egrave;res petite police</H2>

<P ALIGN=JUSTIFY>Et l&agrave;, vous pouvez voir un paragraphe, une phrase, un mot, juste un mot dont un mot est en <SMALL>petite police</SMALL>

</DIV>

<HR>

<DIV CLASS="CHAPITRE_COMPOSE">

<H2 ALIGN=CENTER>un m&eacute;lange de tout</H2>

<P ALIGN=JUSTIFY>Et l&agrave;, vous pouvez voir ou tout simplement d&eacute;couvrir un paragraphe dont un mot est en <I><B>italique et en gras</B></I>, tout &agrave; la fois (enfin si le navigateur est du genre &agrave; soutenir les m&eacute;langes). Il est aussi possible de m&eacute;langer d'autres genres ensemble, <U><TT>rien ne nous arr&ecirc;te.</TT></U> Bon, il arrive que certains navigateurs ne prennent pas certaines d&eacute;finitions de caract&egrave;res mais... <BIG>c'est comme &ccedil;a!</BIG>

</DIV>

<HR>

<H1 ALIGN=CENTER>Et les autres types...</H1>

<DIV CLASS="LE_RESTE">

<H2 ALIGN=CENTER>en indice</H2>

<P ALIGN=JUSTIFY>Cette possibilit&eacute; doit rendre heureux tous les fans de math, &ccedil;a donne la possibilit&eacute; de mettre quelque chose en indice... &ccedil;a ne peut que marcher, normalement.... essayons... <SUB>et voil&agrave;.< /SUB>
<H2 ALIGN=CENTER>en exposant</H2>

<P ALIGN=JUSTIFY>Cette possibilit&eacute; doit rendre heureux tous les fans de math, &ccedil;a donne la possibilit&eacute; de mettre quelque chose en exposant... &ccedil;a ne peut que marcher, normalement.... essayons... <SUP>et voil&agrave;.</SUP>

<HR>

<H2 ALIGN=CENTER>le retour chariot</H2>

<P ALIGN=JUSTIFY>Cette posibilit&eacute; est fantastique et donne avec la justification des moyens &eacute;normes, vraiment plus qu'incroyable... Le retour chariot permet d'aller<BR> &agrave; la ligne quand on le d&eacute;sire et m&ecirc;me de sauter des lignes...<BR>

<BR>
<BR>

et oui... que reste-t-il au traitement de textes !!!

<BR>
<BR>

</DIV>

</BODY>

</HTML>

 -----------------X vous finissez ici X----------------------------

Comment imaginez-vous que rend cet Exemple vu par votre navigateur!!

Gestion des caractères restants

Ici se trouve toute une liste de commandes qui ont plus ou moins le même effet que <B>, <I> et compagnie. Et pourtant, ne vous laissez pas tromper... ces commandes là ont un avenir beaucoup plus certain que les autres... elles vont continuer à évoluer et petit à petit devraient avoir une plus grande part du marché des feuilles Html. Elles ne sont pas encore toutes supportées par certains navigateurs, mais, c'est juste une question de versions !! La dernière commande, <PRE> est vraiment pratique... MAIS attention, ne vous laissez pas abuser... cette commande est un dinosaure et n'a rien à faire dans ce monde Html... elle est amenée à disparaître...

EXEMPLE NUMÉRO TROIS

Par l'intermédiaire de cet exemple vous allez découvrir des tags dont l'importance va être de plus en plus croissante, si vous avez le choix, utilisez plutôt ceux-là que les caractères vus dans le paragraphe précédant.

-----------------X vous commencez ici X----------------------------

<HTML>

<HEAD>

<TITLE>Il &eacute;tait une fois un exemple...</TITLE>

</HEAD>

<BODY>

<H1 ALIGN=CENTER>La gestion des caract&egrave;res (part II)</H1>

<DIV CLASS="CHAPITRE_SIMPLE" ALIGN="JUSTIFY">

<H2 ALIGN=CENTER>commande &lt;EM&gt;</H2>

Cette commande est la plus connue et elle a comme effet <EM>celui-ci</EM>, si vous ne voyez rien, ne vous affolez pas, c'est votre navigateur qui ne sait pas reconna&icirc;tre la commande

<H2 ALIGN=CENTER>commande &lt;CITE&gt;</H2>

Cette commande est utilis&eacute;e pour faire une citation, du genre: <CITE>"rien ne sert de courir, il faut partir &agrave; point".</CITE> Au fait, si vous ne voyez rien, ne vous affolez pas, c'est toujours votre navigateur qui ne sait pas reconna&icirc;tre la commande

<H2 ALIGN=CENTER>commande &lt;STRONG&gt;</H2>

Cette commande permet de d&eacute;montrer l'importance d'un mot dans une phrase; exemple: <STRONG>:exemple</STRONG>. Au fait, si vous ne voyez toujours rien, ne vous affolez pas, c'est bien votre navigateur qui ne sait pas reconna&icirc;tre la commande

<H2 ALIGN=CENTER>commande &lt;CODE&gt;</H2>

Cette commande s'adresse plus particuli&egrave;rement aux codeurs ou ceux qui retranscrivent du code. Voil&agrave;, par exemple... <CODE> e = mc2 </CODE>. Au fait, si vous ne voyez encore rien, ne vous jetez pas par la fen&ecirc;tre, c'est votre navigateur qui ne sait pas reconna&icirc;tre la commande

<H2 ALIGN=CENTER>les autres...</H2>

la commande &lt;KBD&gt; a pour effet <KBD> celui-l&agrave;. </KBD><BR>
la commande &lt;SAMP&gt; a pour effet <SAMP> celui-l&agrave;. </SAMP><BR>
la commande &lt;VAR&gt; a pour effet <VAR> celui-l&agrave;. </VAR><BR>
la commande &lt;BQ&gt; a pour effet <BQ> celui-l&agrave;. </BQ><BR>
la commande &lt;DFN&gt; a pour effet <DFN> celui-l&agrave;. </DFN><BR>
la commande &lt;ADDRESS&gt; a pour effet <ADDRESS> celui-l&agrave;. </ADDRESS><BR>
</DIV>
<HR>

<DIV CLASS="CHAPITRE_DOUB">

<H2 ALIGN=CENTER>la commande &lt;PRE&gt;</H2>

<PRE>

Pour cette commande, elle rend &agrave; l'&eacute;cran, exactement ce
 
qui          a &eacute;t&eacute; saisi... 
             c'est bien pratique
             mais ne vous y fiez pas
             elle n'a pas trop d'avenir !!!
</PRE>

</DIV>

</BODY>

</HTML>

 -----------------X vous finissez ici X----------------------------

Comment imaginez-vous que rend cet Exemple vu par votre navigateur!!

Gestion des listes

Une chose importante dans la présentation des pages faites par Html, c'est l'énumération. En effet, dès que l'on désire présenter plusieurs produits ou même faire un plan bien construit, il est obligatoire de faire des listes dans un sens ou dans un autre... c'est pour ça qu'Html nous présente différentes fonctions liste. On va les aborder les unes après les autres et voir à travers des exemples, à chaque fois, comment cela peut rendre.

La liste ordonnée:

Elle permet d'avoir une liste numérotée en chiffre normaux, romains ou même par des lettres, tout dépend à quel échelon vous vous trouvez dans la liste.

EXEMPLE NUMÉRO QUATRE

Pour cet exemple, on a pris la liste de commission d'Emilie, pas très longue mais, vous savez, toujours très efficace; comme d'ordinaire. (exemple extirpé de la nouvelle Le Chapeau Noir)

-----------------X vous commencez ici X----------------------------

<HTML>

<HEAD>

<TITLE>L'exemple de la liste ordonn&eacute;e</TITLE>

</HEAD>

<BODY>

<H2 ALIGN="CENTER">Emilie va faire des courses</H2>

<OL>

<LI>au surplus de v&ecirc;tements militaires &agrave; Barb&egrave;s
<LI>chez Samuel le phamarcien

<OL>

<LI>mat&eacute;riel de soins

<OL>

<LI>bandages
<LI>alcool &agrave; 90
<LI>m&eacute;dicaments

</OL>
<LI>de l'aspirine (<I>sans pr&eacute;f&eacute;rence</I>)
<LI>du valium
<LI>de la morphine

</OL>
<LI>chez son copain, l'armurier
<LI>se faire raser les cheveux par la coiffeuse du coin
<LI>coincer le r&eacute;mouleur
<LI>de quoi manger ce soir (passer chez <B>l'arabe</B>)
<LI>et le reste...

</OL>

</BODY>

</HTML>

 -----------------X vous finissez ici X----------------------------

Comment imaginez-vous que rend cet Exemple vu par votre navigateur!!

La liste désordonnée:

Cette liste donne, à la place des chiffres et des lettres devant chaque ligne, des petits boulets ou points (question de goût).

EXEMPLE NUMÉRO CINQ

Ce genre de liste correspond plus à un pense bête, on inscrit les idées de ce qu'on va faire avec des sections, des sous-sections et des sous-sous de sous-sections... toujours un extrait tiré de la nouvelle Le Chapeau Noir

-----------------X vous commencez ici X----------------------------

<HTML>

<HEAD>

<TITLE>L'exemple de la liste d&eacute;sordonn&eacute;e</TITLE>

</HEAD>

<BODY>

<H2 ALIGN="CENTER">Ce que je sais</H2>

<UL>

<LI>il a butt&eacute; Antoine dans mon studio
<LI>il a tout d&eacute;truit dans mon studio

<UL>

<LI>la photo de Papa<BR>
(&agrave; croire qu'il s'est veng&eacute; dessus)

<UL PLAIN>

<LI>il l'a arrach&eacute;e du mur.
<LI>il a bris&eacute;e le cadre.
<LI>il a vol&eacute; la m&ecirc;che de cheveux.

</UL>
<LI>la photo des parents d'Antoine (<I>je savais pas comment m'en d&eacute;barasser</I>)
<LI>le papier
<LI>la moquette
<LI>les meubles
<LI>la vaisselle (&ccedil;a va &ecirc;tre l'occasion de changer)
<LI>mes livres
<LI>mes souvenirs
<LI><BIG>quoi !</BIG>aussi mes sous-v&ecirc;tements !!!!

</UL>
<LI>il a du se faire la pouf qui &eacute;tait avec Antoine
<LI>pourquoi il lui a pris la t&ecirc;te (au sens propre, bien s&ucirc;r!)
<LI>ah oui... je me suis lev&eacute;e du pied gauche ce matin
<LI>ma surprise party d'avant hier et tous les cadeaux re&ccedil;us (enfin il ne reste plus <B>grand chose.</B>)
<LI>et le reste... mais quel reste ?!

</UL>

</BODY>

</HTML>

 -----------------X vous finissez ici X----------------------------

Comment imaginez-vous que rend cet Exemple vu par votre navigateur!!

La liste des menus et répertoires:

Ces deux listes reprennent les caractéristiques de la liste désordonnée en personnalisant une partie... Pour énumérer chaque option, cela se fait sans aucune hésitation avec le tag <LI>

La liste de définition:

A travers cette liste, il devient possible d'énumérer des définitions d'objets ou autres... Pour la création et surtout la mise en page d'un dictionnaire, voir même d'un glossaire, on peut utiliser cette option sans aucune hésitation.

EXEMPLE NUMÉRO SIX

Cette liste est faite pour ceux qui ont comme objectif de faire leur propre dictionnaire (ou glossaire, pour les plus modestes) et de le rendre disponible sur internet.

-----------------X vous commencez ici X----------------------------

<HTML>

<HEAD>

<TITLE>L'exemple de la liste avec d&eacute;finition</TITLE>

</HEAD>

<BODY>

<H2 ALIGN="CENTER">L'Amour en cage</H2>

<BR>

<DL>

<DT>Amour:</DT>

<DD><I>n. m. </I><B> I </B> <I>(...)</I><BR>
<B> II </B><B> 1° </B>Attachement d&eacute;sint&eacute;ress&eacute; et profond &agrave; quelque valeur. <I> L'amour du bien.</I> <B> 2° </B>Go&ucirc;t tr&egrave;s vif pour une chose, une activit&eacute; qui procure du plaisir. V.<B> Passion.</B><BR>
<B> III </B><I>Amour en cage.</I> V. <B>Alk&eacute;kenge.</B>

<DT>Alk&eacute;kenge:</DT>
<DD><I>n. m. Bot.</I> Plante vivace <I>(Solanac&eacute;es)</I> du genre <I>physalis</I>, commun&eacute;ment appel&eacute;e <I>amour en cage, coqueret,</I> &agrave; baies rouges comestibles.

<DL>
<DT>Physalis:</DT>
<DD><I>n. m. Bot. </I>Alk&eacute;kenge (appel&eacute; couramment <I>amour en cage</I>) </DL>

</DL>

</BODY>

</HTML>

 -----------------X vous finissez ici X----------------------------

Comment imaginez-vous que rend cet Exemple vu par votre navigateur!!

EXEMPLE NUMÉRO SEPT

Ce nouvel exemple n'est pas là pour vous faire découvrir un nouveau genre de liste, je n'en connais pas d'autres... mais au contraire pour vous montrer comment il est possible de les utiliser ensemble et de les confondre.

-----------------X vous commencez ici X----------------------------

<HTML>

<HEAD>

<TITLE>L'exemple de la liste m&eacute;lang&eacute;e</TITLE>

</HEAD>

<BODY>

<H2 ALIGN="CENTER">Plan du Hardware guide pour syst&egrave;me Linux</H2>

<BR>

<OL>

<LI>Introduction

<OL> <LI>Welcome
<LI>Copyright
<LI>System architectures

<UL>
<LI>ARM Linux
<LI>Linux/68k
<LI>Linux/8086
<LI>Linux/Alpha
<LI>Linux/MIPS
<LI>Linux/PowerPC
<LI>Linux for Acorn
<LI>MacLinux
</UL>
</OL>

<LI>Computers/Motherboards/BIOS
<LI>Laptops

<OL>
<LI>Specific laptops
<LI>PCMCIA
</OL>

<LI>CPU/FPU
<LI>Video cards

<OL> <LI>Diamond video cards
<LI>SVGALIB (graphics for console)
<LI>XFree86 3.1.2

<UL>
<LI>Accelerated
<LI>Unaccelerated
<LI>Monochrome
<LI>Others

<UL>
<LI>EGA
<LI>ET4000//W32
<LI>Trident TGUI 9440
</UL>

<LI>Works in progress
</UL>

<LI>Commercial X servers
</OL>

<LI>Und so weiter...

</OL>

</BODY>

</HTML>

 -----------------X vous finissez ici X----------------------------

Comment imaginez-vous que rend cet Exemple vu par votre navigateur!!

Gestion des images

Cette option permet d'afficher une image de différents formats, tout dépend de ce qui est défini au niveau du navigateur-client, enfin, de toute façon il est préférable de s'en tenir à Gif ou Jpeg. (Bien qu'une nouvelle norme de format d'image a été définie par le W3C (World Wide Web Consortium), c'est PNG (dire ping)). L'image Gif est un tout petit peu plus grosse que la Jpeg, mais ayant moins de couleurs et un algorithme de compression plus simple, s'affiche beaucoup plus vite que l'image Jpeg. Certains logiciels (comme giftool sur Unix) offrent la possibilité d'interlacer votre image et/ou de rendre le fond de l'image transparent, profitez-en... l'interlaçage accélère l'affichage de l'image et le fond transparent donne l'effet que l'image se trouve sur le fond. ATTENTION, n'oubliez pas d'utiliser l'option ALT et de commenter votre image, ce quelle represente et la taille du fichier... pensez à ceux qui navigent sans image, de grès ou de force.

EXEMPLE NUMÉRO HUIT

L'affichage d'une image n'est pas vraiment compliqué en soit, ce qui compte, c'est de respecter les règles et aussi d'éviter les spécificités... soyez compatible... ceux qui vous liront vous béniront.

-----------------X vous commencez ici X----------------------------

<HTML>

<HEAD>

<TITLE>Une image Gif, Interlac&eacute;e avec fond transparent</TITLE>

</HEAD>

<BODY>

<H2 ALIGN="CENTER">Vous aimez les cerises?</H2>

<BR>
<BR>

<IMG SRC="./pussy.gif" ALT="Pussy par Bridgeclaw (13ko)" ALIGN="LEFT">


</BODY>

</HTML>
-----------------X vous finissez ici X----------------------------

Comment imaginez-vous que rend cet Exemple vu par votre navigateur!!

Gestion des ancres

Les ancres permettent soit de faire appel à un autre fichier, soit à une autre partie du document. C'est ce qu'on appelle aussi lien. Un détail à signaler, au niveau de vos pages web, pensez à vérifier régulièrement vos ancres car il n'y a rien de plus horrible que de sélectionner un lien et de tomber sur un message ERROR 104 et une bêtise du genre votre fichier n'existe plus ou n'a pas été trouvé... ça fait NUL!

Il y a deux secrets:

Pour ceux qui desire que l'ouverture du lien se fasse sur une autre fenêtre, voici la technique: (attention, comme vous vous en doutez, ça n'a rien de très catholique ou même officiel... c'est juste une option importée par je ne sais pas qui mais j'imagine très bien), donc à éviter !!!

Pour ceux qui desire rediriger leur utilisateur d'une page vers une autre (pour cause de changement d'adresse, par exemple), ça se fait automatiquement ou presque !!!

EXEMPLE NUMÉRO NEUF

Le concept de l'ancre n'est vraiment pas très compliqué, on va en découvrir la navigation à travers l'exemple d'un menu... ça va être l'occasion de se jouer une petite liste en même temps. Attention, on voit ici juste la gestion des ancres à travers un document, c'est une gestion bien souvent utilisée mais une qui la dépasse c'est l'appel d'une page, d'un fichier sur un autre serveur... pour ne mêler personne à ce desastre que nous-mêmes, on ne l'étudie point ici. Au fait, l'extrait est tiré du sommaire d'un document fait, édité et copyrighté par le W3C.

-----------------X vous commencez ici X----------------------------

<HTML>

<HEAD>

<TITLE>L'ancrage ailleurs qu'au port</TITLE>

</HEAD>

<BODY>

<H1>Table of contents</H1>
<BR>

<H2><STRONG>Cascading Style Sheets, Level 1</STRONG></H2>

<BR>

<OL>
<LI>Basic concepts

<OL>
<LI>Containments in HTML
<LI>Grouping
<LI>Inheritance
<LI>Class as selector
<LI><A HREF="#select">ID as selector</A>
<LI>Contextual selectors
<LI>Comments
</OL>

<LI>Pseudo-classes and pseudo-elements

<OL>
<LI>Anchor pseudo-classes
<LI>Typographical pseudo-elements
<LI>The 'first-line' pseudo-element
<LI>The 'first-letter' pseudo-element
<LI>Pseudo-elements in selectors
<LI>Multiple pseudo-elements
</OL>

<LI>The cascade

<OL>
<LI>'important'
<LI>Cascading order
</OL>

<LI>Formatting model

<OL>
<LI>Vertical formatting
<LI>Horizontal formatting
<LI>Lists
<LI>The canvas
<LI>Floating elements
<LI>Replaced elements
<LI>The height of lines
<LI>'BR' elements
</OL>

<LI>CSS1 properties
<LI>Units
<LI>CSS1 conformance
<LI>References
<LI>Acknowledgements
</OL>
<BR>
<HR NOSHADE WIDTH="50%">
<BR>

<H2><A NAME="select">ID as selector</A></H2>
<P ALIGN="JUSTIFY">HTML 3 also introduces the 'ID' attribute .... </P>
</BODY>

</HTML>

 -----------------X vous finissez ici X----------------------------

Comment imaginez-vous que rend cet Exemple vu par votre navigateur!!

Gestion des commandes du <HEAD>

Il est possible d'inserer différentes commandes au niveau du <HEAD>, ces commandes sont là pour donner un plus à votre feuille de style... on va les voir les unes après les autres puis générer, à travers l'exemple, un canevas pour travailler par la suite (en anglais: template).

Par exemple:

EXEMPLE NUMÉRO DIX

Ce canevas ci-dessous est celui que l'on peut utiliser à chaque fois avant de générer un nouveau document... modifiez-le, optimisez-le mais surtout utilisez-en un.

-----------------X vous commencez ici X----------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>On inscrit le titre ici</TITLE>

<LINK REL="AUTHOR" HREF="mailto:chris@idf.net" REV="MADE">

</HEAD>

<BODY>

<!--
Page Designer:
Email Address:

Made For :
Email Add:

Creation Date:
Revision Date:
-->

<HR WIDTH="50%">

<DIV ALIGN="RIGHT">
<SMALL>This document is ©96 <A HREF="mailto:chris@idf.net">Chris H&Eacute;D&Eacute;.
</A></SMALL></DIV>

</BODY>

</HTML>

 -----------------X vous finissez ici X----------------------------

Comment imaginez-vous que rend cet Exemple vu par votre navigateur!!

Gestion des commandes du <BODY>

Ces commandes ne sont pas des plus vitales mais permettent d'avoir un petit plus au niveau de vos pages webs, ne leur tournez donc pas le dos et utilisez-les; elles sont faites pour être exploitées.

Gestion des polices

Ce tag est une intégration d'un label exploité jusqu'ici par un navigateur spécifique. C'est pas du beau Html... Il est donc pas trop conseillé de l'utiliser... ou alors dans sa forme la plus pure... Le W3C a defini la feuille de style qui remplace allégrement cette fonction en mille fois mieux...

EXEMPLE NUMÉRO ONZE

Un petit exemple d'utilisation de la commande <FONT>, rien de bien extraordinaire... Juste un extrait de la nouvelle Le Chapeau Noir avec Emilie.

-----------------X vous commencez ici X----------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>La police en action</TITLE>

<LINK REL="AUTHOR" HREF="mailto:chris@idf.net" REV="MADE">

</HEAD>

<BODY>

<H2 ALIGN="CENTER">Le poisson</H2>

<DIV ALIGN="JUSTIFY">
<FONT SIZE="+1" COLOR="NAVY">E</FONT>milie &eacute;tait assise, comme &ccedil;a lui arrive depuis 20 ans, &agrave; la table de sa brasserie pr&eacute;f&eacute;r&eacute;e (celle en terrasse, dans le coin &agrave; droite) en train d'attendre son plat du jour. Enfin, le voil&agrave;, une bonne truite bien all&eacute;chante, Emilie se j&ecirc;te dessus. <STRONG>Mais</STRONG>, d&egrave;s qu'elle plante sa fourchette dans le poisson, Emilie ressent une forte douleur dans la hanche et se met &agrave; saigner... elle peut voir sur sa hanche trois point, trois blessures... comme si on lui avait plant&eacute; une fourchette g&eacute;ante sur le c&ocirc;t&eacute;. Et depuis quand Emilie &eacute;prouvait une <FONT COLOR="RED">symbiose</FONT> quelconque avec une truite. (...)

</DIV>

<HR WIDTH="50%">

<DIV ALIGN="RIGHT">
<SMALL>This document is ©96 <A HREF="mailto:chris@idf.net">Chris H&Eacute;D&Eacute;.
</A></SMALL></DIV>

</BODY>

</HTML>

 -----------------X vous finissez ici X----------------------------

Comment imaginez-vous que rend cet Exemple vu par votre navigateur!!

Gestion des FORM

Les forms (en français formulaires) permettent justement la création de formulaires via Html et vos pages web. Cette fonction Form ne peut se concrétiser pleinement que via une commande Cgi-bin.

Avec les exemples et ce document, vous pouvez trouver, ci-joint, un cgi-script en perl du MIT pour la gestion des formulaires. Il est ici juste à titre indicatif, de nombreux autres scripts circulent un peu partout, vous n'avez que l'embarras du choix.

# ------------------------------------------------------------
# Form-mail.pl, by Reuven M. Lerner (reuven@the-tech.mit.edu).
#
# Last updated: March 14, 1994
#
# Form-mail provides a mechanism by which users of a World-
# Wide Web browser may submit comments to the webmasters
# (or anyone else) at a site. It should be compatible with
# any CGI-compatible HTTP server.
#
# Please read the README file that came with this distribution
# for further details.
# ------------------------------------------------------------

# ------------------------------------------------------------
# This package is Copyright 1994 by The Tech.

Ne vous étonnez donc pas si tous les exemples de <FORM> ne vont pas trop loin, ici on étudie le langage Html, pas les scripts Cgi... Si vous voulez que l'exemple soit complet, de votre côté, pensez donc à installer un script de <FORM> comme celui ci-joint ou un autre que vous possedez déjà ou que votre webmaster chéri a déjà sur sa machine... de toutes façons, tout le monde en a un... les scripts Cgi font partie des indispensables de la gestion d'un serveur, ne pas en avoir... c'est comme... c'est comme... c'est comme pour un français de réfléchir plus loin que le bout de son nez, ça n'existe pas !!!

Par exemple:

Pour envoyer le formulaire par courrier rempli par la personne qui navigue, il est tout à fait possible d'inscrire cet exemple:

<FORM METHOD="POST" ACTION="mailto:toto@titi.fr" ENCTYPE=text/plain>

Gestion du TEXTAREA

Cette fonction trouve son épanouissement uniquement à travers l'option <FORM>, c'est quasiment inconcevable de la voir hors de tags <FORM>. C'est la première d'une série de trois fonctions de forms; c'est la plus simple. (Ce tague est souvent utilisé pour des demandes de commentaires!)

EXEMPLE NUMÉRO TREIZE

Et bien, quoi de plus intéressant que de voir par l'intermédiaire d'un des exemples si bien fait une nouvelle mise en pratique d'un tag. Pour cette exemple, il n'y a aucune clé de validation donc d'une manière ou d'une autre il ne peut pas être valable, c'est juste du théorique pour vous montrer cette fonction.

-----------------X vous commencez ici X----------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>Textarea: un exemple &agrave; la c**</TITLE>

<LINK REL="AUTHOR" HREF="mailto:chris@idf.net" REV="MADE">

</HEAD>

<BODY>

<!--
Page Designer:
Email Address:

Made For :
Email Add:

Creation Date:
Revision Date:
-->

<H1 ALIGN="CENTER"><U>Abonnement
</U></H1>
<EM>Formulaire d'abonnement &agrave; votre fanzine bien aim&eacute; <STRONG> "comment &eacute;craser un rat sans tacher sa voiture"</STRONG>, fanzine gratuit et avec un nu moore tr&egrave;s malveillant!!!</EM><BR><BR>

<FORM METHOD="GET" ACTION="fanzine">
<DIV ALIGN="CENTER">

<TEXTAREA NAME="nom" COLS="40">votre nom
</TEXTAREA><BR>

<TEXTAREA NAME="prenom" COLS="40">votre pr&eacute;nom
</TEXTAREA><BR><BR>

<TEXTAREA NAME="adresse" ROWS="6" COLS="40" WRAP="PHYSICAL">votre adresse compl&egrave;te
</TEXTAREA><BR>

<TEXTAREA NAME="email" COLS="40">votre email
</TEXTAREA><BR><BR></DIV>

Merci, vous allez recevoir d&egrave;s que cette demande sera trait&eacute;e le num&eacute;ro en cours.
<BR></FORM>

<HR WIDTH="50%">

<DIV ALIGN="RIGHT">
<SMALL>This document is ©96 <A HREF="mailto:chris@idf.net">Chris H&Eacute;D&Eacute;.</A></SMALL>
</DIV>

</BODY>

</HTML>

 -----------------X vous finissez ici X----------------------------

Comment imaginez-vous que rend cet Exemple vu par votre navigateur!!

Gestion des INPUT

Il existe certaines fonctions qui font dans le SadoMaso et il semble que ce soit le cas pour celle-là puisqu'elle est l'esclave complète de la form et ne peut absolument pas se passer de celle-ci... ah les jeunes!!!

EXEMPLE NUMÉRO QUATORZE

Et bien, vous allez suivre dans cet exemple un questionnaire d'une agence matrimoniale pour homme... j'veux dire Homme. Si on le désire, il est possible de valider le questionnaire car la fonction de validation dénommmée submit se trouve ici, MAIS n'oubliez pas, ça ne peut être valable qu'avec l'installation et la présence effective de la commande CGI-bin de form. Au fait, la commande toute seule, si elle n'est pas désarchivée et ne fonctionne donc pas, ça ne marche pas non plus.

-----------------X vous commencez ici X----------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>des Input sans Output !</TITLE>

<LINK REL="AUTHOR" HREF="mailto:chris@idf.net" REV="MADE">

</HEAD>

<BODY>

<!--
Page Designer:
Email Address:

Made For :
Email Add:

Creation Date:
Revision Date:
-->

<H1 ALIGN="CENTER"><U>Les Meufs !!</U></H1>
Les <EM>mecs</EM>, &agrave; quoi &ccedil;a pense.... <BR><BR>
<DIV ALIGN="CENTER"><BIG>aux filles</BIG>, rien de plus...</DIV><BR>
Au travail, &ccedil;a ne cesse de d&eacute;shabiller du regard les secr&eacute;taires; au supermarch&eacute;, les vendeuses; dans la rue, les passantes; &agrave; la piscine ....
<STRONG><EM>Les mecs, &ccedil;a ne pense qu'&agrave; &ccedil;a !!! </EM></STRONG><BR><BR>

<HR WIDTH="25%">
<STRONG>M et M</STRONG> (<EM>Mecs et Meufs</EM>) vous trouve la fille de vos r&ecirc;ves
&agrave; volont&eacute;, remplissez juste le questionnaire suivant:
<HR WIDTH="25%">

<FORM METHOD="GET" ACTION="femmesfemmmes">

Votre nom:
<DIV ALIGN="RIGHT"> <INPUT TYPE="TEXT" NAME="nom" SIZE="50"></DIV><BR>
Votre pr&eacute;nom ou entit&eacute; sociale (pour les entreprises):
<DIV ALIGN="RIGHT"> <INPUT TYPE="TEXT" NAME="prenom" SIZE="50"></DIV><BR>
Votre rue ou adresse de livraison:
<DIV ALIGN="RIGHT"> <INPUT TYPE="TEXT" NAME="rue" SIZE="60"></DIV><BR>
Code postal et ville de livraison:
<DIV ALIGN="RIGHT"> <INPUT TYPE="TEXT" NAME="cp" SIZE="5" MAXLENGTH="5">
<INPUT TYPE="TEXT" NAME="ville" SIZE="43"></DIV><BR>
<DIV ALIGN="CENTER">
T&eacute;l.: <INPUT TYPE="TEXT" NAME="tel" SIZE="10" MAXLENGTH="10"><BR>
Email: <INPUT TYPE="TEXT" NAME="email" SIZE="40"><BR></DIV>

<BR><HR>

<EM>Passons aux choses pratiques, maintenant:</EM><BR><BR>

Sa couleur de cheveux:<BR>
<INPUT TYPE="RADIO" NAME="cheveux" VALUE="bl"> Blonde<BR>
<INPUT TYPE="RADIO" NAME="cheveux" VALUE="br"> Brune<BR>
<INPUT TYPE="RADIO" NAME="cheveux" VALUE="ro"> Rousse<BR>
<INPUT TYPE="RADIO" NAME="cheveux" VALUE="no"> Noire<BR>
<INPUT TYPE="RADIO" NAME="cheveux" VALUE="in"> Pas d'importance<BR>
<BR>
Sa couleur de peaux:<BR>
<INPUT TYPE="RADIO" NAME="peaux" VALUE="bl"> Blanche<BR>
<INPUT TYPE="RADIO" NAME="peaux" VALUE="no"> Noire<BR>
<INPUT TYPE="RADIO" NAME="peaux" VALUE="br"> Bronz&eacute;e<BR>
<INPUT TYPE="RADIO" NAME="peaux" VALUE="me"> M&eacute;tiss&eacute;e<BR>
<INPUT TYPE="RADIO" NAME="peaux" VALUE="in"> Indiff&eacute;rent<BR>
<BR>
Et voil&agrave;, c'est fait... d'ici une demi-heure une jolie fille va arriver.
Si vous n'&ecirc;tes pas content de votre choix, appuyez sur <INPUT TYPE="RESET">
ou si tout vous satisfait, s&eacute;lectionnez <INPUT TYPE="SUBMIT" VALUE="c'est bon">.
<BR>
Attention, nous v&eacute;rifions votre commande par t&eacute;l&eacute;phone pour &eacute;viter tout malentendu.
Pour les d&eacute;tails de la facturation, on r&eacute;glera &ccedil;a par t&eacute;l&eacute;phone en toute discr&eacute;tion, bien s&ucirc;r.<BR>
<STRONG>MERCI !</STRONG>

<BR></FORM>

<HR WIDTH="50%">

<DIV ALIGN="RIGHT">
<SMALL>This document is ©96 <A HREF="mailto:chris@idf.net">Chris H&Eacute;D&Eacute;.
</A></SMALL></DIV>

</BODY>

</HTML>

 -----------------X vous finissez ici X----------------------------

Comment imaginez-vous que rend cet Exemple vu par votre navigateur!!

Gestion de SELECT

Voici encore une fonction qui dépend entièrement du tag <FORM>, elle propose à la manière de <TEXTAREA> et de <INPUT> d'ouvrir un nouveau genre de petites boîtes.

EXEMPLE NUMÉRO QUINZE

Découverte des joies et du bonheur de mettre en pratique la fonction <SELECT>. Pour cette exemple, il y a aucune clé de validation donc d'une manière ou d'une autre il ne peut pas être valable, c'est juste du théorique pour vous montrer cette fonction.

-----------------X vous commencez ici X----------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>Select de mon coeur, on t'a d&eacute;j&agrave; dit que tu as de beaux yeux</TITLE>

<LINK REL="AUTHOR" HREF="mailto:chris@idf.net" REV="MADE">

</HEAD>

<BODY>

<!--
Page Designer:
Email Address:

Made For :
Email Add:

Creation Date:
Revision Date:
-->

<H1 ALIGN="CENTER">Votre choix</H1>

Chose promise, chose due... Dans nos pages pr&eacute;c&eacute;dentes, on a affirm&eacute; haut et fort que l'on vous donnerait la possibilit&eacute; de juger ce site passablement extraordinaire. Et bien, voil&agrave;, allez y, profitez-en... tr&egrave;s peu ont le courage de le faire, nous<STRONG> si</STRONG>!!<BR><BR>

<FORM METHOD="GET" ACTION="jugementdernier">
Et bien oui, vous avez le droit... donnez votre opinion... dites ce que vous pensez de ce site<BR><BR><DIV ALIGN="CENTER">

<SELECT NAME="sondage">
<OPTION VALUE="a">Nul, mais vraiment nul
<OPTION VALUE="b">&Agrave; chier
<OPTION VALUE="c">Passable
<OPTION VALUE="d">Peut vraiment mieux faire
<OPTION SELECTED VALUE="e">Bof, normal
<OPTION VALUE="f">&Agrave; eviter
<OPTION VALUE="g">Quel site?
<OPTION VALUE="h">J'm'en fous
</SELECT><BR><BR>
<BIG>MERCI.</BIG><BR></DIV></FORM>

Et oui, merci d'avoir vot&eacute;... d&eacute;sol&eacute;, il n'y a rien pour valider votre vote...
par contre votre temps de r&eacute;flexion a permis de tracer votre route et<EM> une voiture de la police de l'int&eacute;rieur va arriver d'une minute &agrave; l'autre... </EM>vous pouvez faire vos adieux &agrave; votre famille!! Merci encore.....<BR><BR>

<HR WIDTH="50%">

<DIV ALIGN="RIGHT">
<SMALL>This document is ©96 <A HREF="mailto:chris@idf.net">Chris H&Eacute;D&Eacute;.
</A></SMALL></DIV>

</BODY>

</HTML>

 -----------------X vous finissez ici X----------------------------

Comment imaginez-vous que rend cet Exemple vu par votre navigateur!!

EXEMPLE NUMÉRO SEIZE

Et voici un exemple globalisant l'ensemble des commandes et des fonctions disponibles sous <FORM>. Si on le désire, il est possible de valider le questionnaire car la fonction de validation dénommmée "submit" se trouve ici, MAIS n'oubliez pas, ça ne peut être valable qu'avec l'installation et la présence effective de la commande CGI-bin de form. Au fait, la commande toute seule, si elle n'est pas désarchivée et ne fonctionne donc pas, ça marche pas non plus.

-----------------X vous commencez ici X----------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>Le 'paradis' pour tous !!</TITLE>

<LINK REL="AUTHOR" HREF="mailto:chris@idf.net" REV="MADE">

</HEAD>

<BODY>

<EM>Camarades de la CGT</EM>, pourquoi certains d'entre nous iraient au Paradis et d'autres en Enfer, pourquoi? Nous sommes tous &eacute;gaux devant les plaisirs de l'apr&egrave;s-vie, nous reclamons<STRONG> le Paradis pour tous</STRONG>!

<BR><HR WIDTH="10%">

<H1 ALIGN="CENTER">** P&eacute;tition **</H1>

<HR WIDTH="10%">

<FORM METHOD="GET" ACTION="petition">

<DIV ALIGN="CENTER">
<INPUT TYPE="TEXT" NAME="nom" SIZE="40" VALUE="ton nom"><BR>
<INPUT TYPE="TEXT" NAME="prenom" SIZE="40" VALUE="ton pr&eacute;nom"><BR>
<INPUT TYPE="TEXT" NAME="adresse1" SIZE="40" VALUE="ton adresse"><BR>
<INPUT TYPE="TEXT" NAME="adresse2" SIZE="40" VALUE="la suite de ton adresse"><BR>
<INPUT TYPE="TEXT" NAME="cp" SIZE="5" MAXLENGTH="5" VALUE="c.p.">
<INPUT TYPE="TEXT" NAME="ville" SIZE="33" VALUE="ta ville">

</DIV><BR><BR>

<HR WIDTH="10%">
<HR WIDTH="10%">
<BR>

<STRONG>"Es-tu pour le Paradis pour tous?"</STRONG><BR>
<INPUT TYPE="RADIO" NAME="paradis" VALUE="o"> oui<BR>
<INPUT TYPE="RADIO" NAME="paradis" VALUE="n"> non<BR><BR>

<STRONG>"Es-tu pr&ecirc;t &agrave; nous soutenir?"</STRONG><BR>
<INPUT TYPE="RADIO" NAME="soutenir" VALUE="o"> oui<BR>
<INPUT TYPE="RADIO" NAME="soutenir" VALUE="n"> non<BR><BR>

<STRONG>"Les formes de ton soutien, camarade"</STRONG><BR>
<SELECT NAME="soutien" SIZE="5" MULTIPLE>
<OPTION VALUE="a">de l'argent
<OPTION VALUE="b">des permanences
<OPTION VALUE="c">des actions d'&eacute;clat
<OPTION VALUE="d">par les m&eacute;dias
<OPTION VALUE="e">h&eacute;bergement
<OPTION VALUE="f">des relations
<OPTION VALUE="g">des gr&egrave;ves
</SELECT><BR><BR>

<STRONG>"Tes commentaires sont les bienvenus"</STRONG><BR>
<TEXTAREA NAME="comments" ROWS="8" COLS="50">tes commentaires
</TEXTAREA><BR>

<HR>

<BIG><U>Merci</U> pour tout, Camarade.</BIG><BR>
Un dernier d&eacute;tail, Camarade, si tu penses avoir commis une petite erreur quelquepart, tu peux appuyer sur la touche recommencer et tout refaire depuis le d&eacute;but et/ou si tu penses avoir fini, appuies donc sur la touche de validation. Merci encore et bonne journ&eacute;e.
<BR><BR><DIV ALIGN="CENTER">

<INPUT TYPE="RESET" VALUE="Recommencer">
<INPUT TYPE="SUBMIT" VALUE="Validation">

</DIV></FORM><BR>

<HR WIDTH="50%">

<DIV ALIGN="RIGHT">
<SMALL>This document is ©96 <A HREF="mailto:chris@idf.net">Chris H&Eacute;D&Eacute;.
</A></SMALL></DIV>

</BODY>

</HTML>

 -----------------X vous finissez ici X----------------------------

Comment imaginez-vous que rend cet Exemple vu par votre navigateur!!

Gestion des tableaux

La gestion des tableaux est passée dans un nouveau stade au sein de l'écriture Html... La présentation a pris un coup de pouce ainsi que le découpage du tableau de même que les informations... Les tableaux sont jusqu'ici imparfaitement soutenus par certains navigateurs alors ne tombez pas des nues en découvrant que votre une-semaine-de-travail tableau est incompris par certains.

À l'intérieur de <TABLE>, les autres tags disponibles sont:

EXEMPLE NUMÉRO DIX-SEPT

Cet exemple tout simple nous est fourni aimablement par le W3C, merci qui? ATTENTION, pour cet exemple, il correspond à l'ancienne définition des tableaux alors essayez de faire comme s'il n'était pas là, c'est juste à titre indicatif.

-----------------X vous commencez ici X----------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>Une exemple simple de chez W3C
</TITLE>

</HEAD>

<BODY>

<TABLE BORDER>
<CAPTION>Un tableau test avec des cellules fusionn&eacute;es
</CAPTION>

<TR><TH ROWSPAN=2><TH COLSPAN=2>Average
<TH ROWSPAN=2>other<BR>category<TH>Misc
<TR><TH>height<TH>weight
<TR><TH ALIGN=LEFT>males<TD>1.9<TD>0.003
<TR><TH ALIGN=LEFT ROWSPAN=2>females<TD>1.7<TD>0.002

</TABLE>

</BODY>

</HTML>

 -----------------X vous finissez ici X----------------------------

Comment imaginez-vous que rend cet Exemple vu par votre navigateur!!

EXEMPLE NUMÉRO DIX-HUIT

Cet exemple plus compliqué nous est, de nouveau, fourni aimablement par le W3C, merci qui (bis)?

-----------------X vous commencez ici X----------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>Une exemple compliqu&eacute; de chez W3C
</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=2 FRAME=hsides RULES=groups>

<CAPTION>SUPPORT POUR MICROSOFT WINDOWS</CAPTION>

<COLGROUP ALIGN=center>
<COLGROUP ALIGN=left>
<COLGROUP ALIGN=center span=2>
<COLGROUP ALIGN=center span=3>

<THEAD VALIGN=top>
<TR>
<TH>Code-Page<BR>ID
<TH>Name
<TH>ACP
<TH>OEMCP
<TH>Windows<BR>NT 3.1
<TH>Windows<BR>NT 3.51
<TH>Windows<BR>95

<TBODY>
<TR><TD>1200<TD>Unicode (BMP of ISO 10646)<TD><TD><TD>X<TD>X<TD>*
<TR><TD>1250<TD>Windows 3.1 Eastern European<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1251<TD>Windows 3.1 Cyrillic<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1253<TD>Windows 3.1 Greek<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1254<TD>Windows 3.1 Turkish<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1255<TD>Hebrew<TD>X<TD><TD><TD><TD>X
<TR><TD>1256<TD>Arabic<TD>X<TD><TD><TD><TD>X
<TR><TD>1257<TD>Baltic<TD>X<TD><TD><TD><TD>X
<TR><TD>1361<TD>Korean (Johab)<TD>X<TD><TD><TD>**<TD>X

<TBODY>
<TR><TD>437<TD>MS-DOS United States<TD><TD>X<TD>X<TD>X<TD>X
<TR><TD>708<TD>Arabic (ASMO 708)<TD><TD>X<TD><TD><TD>X
<TR><TD>709<TD>Arabic (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X
<TR><TD>710<TD>Arabic (Transparent Arabic)<TD><TD>X<TD><TD><TD>X
<TR><TD>720<TD>Arabic (Transparent ASMO)<TD><TD>X<TD><TD><TD>X
</TABLE>

</BODY>

</HTML>

 -----------------X vous finissez ici X----------------------------

Comment imaginez-vous que rend cet Exemple vu par votre navigateur!!

Gestion des notes de bas de page

Cette nouvelle commande de Html 3 est bien utile si vous avez des annotations à rajouter dans vos textes sur vos pages Html. Comme toutes les nouvelles commandes, elle n'est peut-être pas forcément soutenue par votre navigateur favori, ce n'est pas une raison pour ne plus l'employer, c'est une question de jours. (enfin, je pense...)

EXEMPLE NUMÉRO DIX-NEUF

A travers un court extrait d'une nouvelle, on va voir comment utiliser les notes de bas de page.

-----------------X vous commencez ici X----------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>Le pied &agrave; la note</TITLE>

<LINK REL="AUTHOR" HREF="mailto:chris@idf.net" REV="MADE">

</HEAD>

<BODY>

<H2 ALIGN="CENTER">Le Chapeau Noir</H2>
<EM>extrait non contractuel du roman <STRONG>"le chapeau noir"
</STRONG></EM><BR><BR>

<DIV ALIGN="JUSTIFY">
(...) Emilie commen&ccedil;ait &agrave; perdre patience. Pourtant <A HREF="#fn1"> Antoine</A> savait qu'elle n'aimait pas attendre et puis, de toute fa&ccedil;on, ce n'&eacute;tait pas son genre. Elle ne perdit pas son temps en veine r&eacute;flexion et d'un coup d'&eacute;paule, elle enfon&ccedil;a la porte. Qu'est-ce que &ccedil;a pouvait &ecirc;tre douloureux.... mais, enfin, on a la r&eacute;ponse &agrave; LA question, &agrave; savoir, <EM>mais que fait donc Antoine ?</EM><BR> <STRONG>Antoine</STRONG>, il avait d&eacute;cider de repeindre le mur en rouge, en <STRONG>rouge sang</STRONG>, mais il semble qu'il ait utilis&eacute; trop de peinture, cette fois. <BR><BR>
Pauvre Antoine, Emilie en avait presque les larmes aux yeux.<BR>
Pas qu'il soit mort, &ccedil;a arrive &agrave; tout le monde et encore plus &agrave; ceux qui la fr&eacute;quentaient
mais c'&eacute;tait les souvenirs de tous les <STRONG>bons </STRONG>moments qu'elle avait v&eacute;cus avec lui. Antoine, il payait pas de mine au premier abord; mais alors, quel num&eacute;ro !!!
Lui, il a su faire partager &agrave; Emilie les paradis terrestres, &agrave; plus soif. (...)<BR>
<BR></DIV>

<HR>
<FN ID=fn1><I>Antoine:</I> C'est le copain officiel d'Emilie</FN>

<HR WIDTH="50%">

<DIV ALIGN="RIGHT">
<SMALL>This document is ©96 <A HREF="mailto:chris@idf.net">Chris H&Eacute;D&Eacute;.
</A></SMALL></DIV>

</BODY>

</HTML>

 -----------------X vous finissez ici X----------------------------

Comment imaginez-vous que rend cet Exemple vu par votre navigateur!!

Gestion des images map

Ces images-map s'appellent en français images cliquables. Pourquoi pas!!! On va voir ici les images cliquables côté client, c'est à dire qu'il n'y a pas besoin de script special, d'appel au serveur et ça marche avec tous les navigateurs que je connais!!!

Un exemple....

<IMG SRC="navbar.gif" BORDER="0" USEMAP="#map1">

<MAP NAME="map1">
<AREA HREF="guide.html" ALT="Guide D'Accès" SHAPE="rect" COORDS="0,0,118,28">
<AREA HREF="search.html" ALT="Recherche" SHAPE="rect" COORDS="184,0,276,28">
<AREA HREF="shortcut.html" ALT="Vas-y" SHAPE="rect" COORDS="118,0,184,28">
<AREA HREF="top10.html" ALT="Top 10" SHAPE="rect" COORDS="276,0,373,28">
</MAP>

Gestion des appliquettes

Cet élément est supporté par tous les navigateurs compatibles Java. Ça vous permet d'executer une appliquette (applet en anglais) Java dans votre page Html. L'option <PARAM> est destinée à fournir des paramètres supplémentaires et optionnels à votre appliquette Java. Il est possible de lier une autre commande au cas où l'appliquette ne fonctionne pas ou si java n'est pas reconnu par votre navigateur préféré.

Gestion des feuilles de style

La feuille de style permet de définir la mise en page de vos pages web/Html. Cette feuille de style donne les couleurs, les polices, l'emplacement, marges et bordures, etc.... Cette commande était déjà présente dans Html 2.0, avec le 3.2, la feuille de style a été améliorée... petit à petit, elle doit s'imposer.

Style:

Il existe 4 manières d'introduire la feuille de style dans votre page Html.

  1. A travers <LINK> en faisant appel à un fichier extérieur, par exemple (dans <HEAD>):

    <LINK REL="STYLESHEET" TYPE="text/css" HREF="http://www.toto.com/titi" TITLE="Titi">

  2. En vous servant du tag <STYLE>, par exemple (toujours dans <HEAD>):

    <STYLE TYPE="text/css">
    H1 { color: blue }
    </STYLE>

  3. Ou à l'interieur du tag lui même, par exemple:

    <P STYLE="color: green">Ce paragraphe devient donc vert!</P>

  4. Où en chargeant le fichier en externe!!! (toto.css)
    • dans toto, on écrit:

      A.bleu {color: blue;}
      A.vert {color: green;}

    • et dans la source:

      <HEAD>
      <LINK HREF="toto.css" REL="STYLESHEET">
      </HEAD>
      <BODY>
      <P>
      <A class="bleu">lien bleu</A>
      </P>
      </BODY>

Classe:

Il est possible de définir au sein de la feuille de style, des classes, en suivant la logique suivante:

Id:

L'option ID peut se rapprocher des classes. Elle permet, en s'incrustant auprès des differents tags, d'imposer une feuille de style particulière à un lieu particulier. Au niveau de la feuille de style:

Regroupage:

Il est aussi possible de regrouper ensemble plusieurs commandes ou tags:

Commentaires:

Les commentaires, au niveau de la feuille de style, sont dans la même logique que ceux que l'on utilise pour la programmation en C

Ancres:

Pour le tag <A> d'ancre, la logique de travail est celle-ci:

A:link { zz } /* unvisited link */ /* lien non-visité */
A:visited { zz } /* visited link */ /* lien visité */
A:active { zz } /* active link */ /* lien actif */
zz = nom de la commande, de la fonction, de la feuille de style

Genre début de livre:

Ces fonctions donnent l'impression que le début du texte HTML est "à la livre" avec la première lettre 200% plus grande, les deux premiers mots en majuscule et le reste normalement. Le travail à effectuer au niveau de la feuille de style est le suivant:

<STYLE TYPE="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left}
SPAN { text-transform: uppercase }
</STYLE>

Et celui au niveau du texte:

<P><SPAN><P:first-letter>L</P:first-letter>es premiers</SPAN> quelques mots (...) </P>

Important:

Si un conflit oppose deux feuilles de style, celle de l'utilisateur et celle du document, c'est celle du document qui prédomine. De toute façon, si une commande est très importante, il