83950tgpa0007 02

Initiation HTML
Squence 2
Contenu
1.Quels outils utiliser dans cette squence? 2.Prsentation du langage HTML 3.Les principes de base
Prenez bien le temps de faire toutes les manipulations indiques. Cest en tapant le code quon intgre tout ce quil y a retenir. a passe par les doigts puis a remonte en passant par les bras jusquau cerveau...
1.Tout dabord, quels outils utiliser dans cette squence ?

Pour crer un site de prsentation, il est tout fait possible dutiliser un diteur HTML, sans connatre le langage HTML. Je mexplique : ce type doutils permet de crer des sites de prsentation de manire graphique, et ne ncessitent pas la connaissance du langage HTML. Ceci ne fera pas ici lobjet dune squence. Vous pouvez tout fait, si vous le souhaitez, vous amuser crer un site de prsentation avec ce type doutils, mais vous navez pas besoin de mon aide pour cela, ce type de logiciel tant destin des non informaticiens. Voici ci-dessous une liste (incomplte, bien sr) dditeurs HTML plus ou moins gratuits et plus ou moins performants. vous de faire votre choix.
Note : la liste ci-dessous vous indique parfois lURL laquelle vous pouvez tlcharger les diteurs HTML. Attention, cette liste est donne titre indicatif. Il se peut que les liens que je vous ai indiqus ne soient plus valables. Dans ce cas, utilisez un moteur de recherche pour rechercher la bonne URL.
diteurs HTML gratuits

HTML KIT : http://WWWW.chami.com ; Script Edit v 2.66 : http://telecharger.01net.com/WindoWs/Internet/editeur_de_site/fiches/19411.html ; Web Editor v 2.0 : http://telecharger.01net.com/WindoWs/Internet/editeur_de_site/fiches/24512.html ; Arachnophilia v 5.2 build 1902 : http://telecharger.01net.com/WindoWs/Internet/editeur_de_site/fiches/12979.html ;
8 3950 TG PA 00
29
Squence 2
Initiation HTML
AceHTML Pro v 5.08.2 : http://telecharger.01net.com/WindoWs/Internet/editeur_de_site/fiches/4892.html ; Webmaster v 3.0 : http://telecharger.01net.com/WindoWs/Internet/editeur_de_site/fiches/24063.html ; MAXs HTML Beauty++ ME v 1.5 build 3700 : http://telecharger.01net.com/WindoWs/Internet/editeur_de_site/fiches/8077.html ; Ma Page Web v 2.1 : http://telecharger.01net.com/WindoWs/Internet/editeur_de_site/fiches/12152.html Hapedit (HTML, Asp, PhP) : trs utilis par mes tudiants de BTS, je vous le recommande ; Ultraedit (PhP, HTML) : mme remarque que ci-dessus 1 ; DreamWeaver 2 : cest une vieille version de DreamWeaver qui tait payante avant.
diteurs payants
Frontpage, DreamWeaver 8X, Web Expert (diteur : Visicom), Web Creator (diteur Mindscape) ...
Remarques importantes
Si vous dcidez de faire lacquisition dun ou plusieurs de ces logiciels (plusieurs parce quils sont plus ou moins spcialiss), je vous conseille den prendre un qui fait tout, si possible. Vous pouvez, ce moment l, lutiliser tout au long de ce support de cours pour dvelopper les TP. Pour ma part, lors des TP, je ne ferai rfrence aucun logiciel particulier ddition de site. Pour prparer ces TP, dailleurs, jutilise notepad, le petit diteur de texte fourni dans Windows. Vous pouvez utiliser nimporte quel autre diteur de texte, notamment si vous utilisez un autre systme dexploitation comme linux ou un systme mac. Mais, encore une fois, que cela nempche pas ceux et celles qui le souhaitent, dutiliser un environnement de dveloppement spcialis dans la cration de sites Web. O va se situer la diffrence ? Ceux qui choisissent dutiliser un de ces diteurs peuvent en choisir un qui permette de crer le code source des pages Web et leur contenu laide de barres doutils graphiques. Il est cependant possible, avec ces diteurs, de consulter et modifier le code HTML gnr. Ceux qui utilisent un logiciel spcialis vont galement bnficier dun diteur de code source spcialis : cet diteur saura dtecter les erreurs de syntaxe, faire de la coloration syntaxique (exemple : mettre en bleu les instructions Php, en vert les instructions javascript, en rose les chanes de caractres et en violet les commentaires. Quel beau mlange de couleurs !), excuter pas pas, etc. comme un environnement de dveloppement normal (Windev, Delphi, VBA dans Access...), mais spcialis dans les langages pour le Web. Il est vrai quactuellement, la conception de sites se fait toujours laide dun diteur spcialis comme ceux cits dans la liste ci-dessus, notamment car le temps de cration est moins important avec ces outils quen tapant le code HTML. Ceci naffranchit pas le concepteur de site de la connaissance du langage HTML et des autres langages de la programmation Web, car ces outils permettent gnralement la cration de sites de prsentation mais ncessitent de complter ou modifier le code source HTML, en y rajoutant par exemple des instructions en langage de script, afin denrichir le comportement du site sil est statique, ou afin den faire un site dynamique ou une application Web. Pour ma part, si je choisis de nutiliser aucun diteur, cest pour viter que cela ne devienne une contrainte pour vous. Ainsi, les TP que je vous prsente seront identiques quels que soient lditeur et le systme dexploitation que vous utilisez. 30
8 3950 TG PA 00
Squence 2
Initiation HTML
2.Prsentation du langage HTML

On la vu prcdemment, HTML signifie Hyper Text Markup Language. HTML est un langage de marqueurs (on appelle a des balises) interprtables par un navigateur Web. Le principe de HTML est le suivant : le serveur HTTP ne transmet que le texte et les ressources utiles ainsi que des informations de mise en page, et cest lapplication cliente (cest dire le navigateur) qui soccupe de la visualisation. Pour que, quel que soit le navigateur, la page Web saffiche correctement, il a fallu faire en sorte que tous les navigateurs interprtent le HTML de la mme manire, et quil nexiste quun langage HTML. Donc, il a fallu normaliser ce langage.
Un bref historique
Le langage HTML (HyperText Markup Language) est driv du langage SGML (Standard Generalized Markup Language). HTML est utilis sur le Web depuis 1990. Nous en sommes la version HTML 4.01.
Les extensions la norme

Les diffrents diteurs de logiciels vendant des navigateurs (netscape, Internet explorer...) ont tous rajout leurs propres extensions au langage HTML. Mais, pour quune page puisse tre visualise par tous les navigateurs, il faut que son code HTML fasse partie de la partie commune tous les navigateurs, cest dire la norme.
Ce dont on a besoin pour crire en HTML

Dans labsolu, de rien dautre quun diteur de texte, puisquun fichier HTML nest rien dautre quun fichier texte dans lequel figurent des marqueurs ou balises (tags en anglais) qui seront reconnus par les diffrents navigateurs.
Ce quon va voir dans cette squence

On va voir les bases. Si on voulait tout voir en dtail, il faudrait plusieurs centaines de pages. Pour ceux qui veulent approfondir, vous pouvez vous rendre sur le site : http://www.la-grange.net/W3c/html4.01/, o vous trouverez une traduction franaise de la norme, ou carrment sur le site du W3C, o vous trouverez la version anglaise (la version originale de la norme), lunique document ayant la valeur de version normative http://www.w3c. org/TR/1999/REC-html401-19991224.
8 3950 TG PA 00
31
Squence 2
Initiation HTML
3.Les principes de base

Remarques
Nous allons crer notre site au fur et mesure de la prsentation des notions, donc vous devez taper dans votre diteur tout code HTML signal dans une barrre verticale grise. Pour les balises, on peut utiliser indiffremment des majuscules ou minuscules.
3A.Structure de base dun fichier HTML

Allez, on commence. Tapez le code HTML ci-dessous, enregistrez ce fichier, par exemple sous le nom premierePage.htm ou premierePage.html.
<HTML> <HEAD> <BODY>  Bienvenue sur la page daccueil du site mes CD, mes livres etc. </body> </HTML>
Pour tester cette premire page, double-cliquez sur licne du fichier premierePage.htm ou premierePage.html. Votre navigateur se lance et affiche la page. Observez bien les endroits o vous retrouvez le texte Page daccueil du site mes CD, mes livres etc. et le texte Bienvenue sur la page daccueil du site mes CD, mes livres etc. Vous constatez que le texte se trouvant entre <title> et </title> se trouve dans la barre de titre de votre navigateur, et que le texte figurant entre <body> et </body> se trouve sur la page.
<TITLE> Page daccueil du site mes CD, mes livres etc. </TITLE>
</HEAD>
Que nous apprend ce premier bout de code HTML ?

Les balises HTML vont, la plupart du temps, par paires : une balise ouvrante, et une balise fermante, comme des parenthses. Exemple : la balise <HEAD> qui dbute la zone dentte de la page (balise ouvrante), et la balise </HEAD> (balise fermante) qui marque la fin de la zone den-tte de la page.
8 3950 TG PA 00
32
Squence 2
Initiation HTML
Autre exemple : la balise <TITLE> qui indique le dbut de la zone contenant le titre de la page (ce qui sera affich dans la barre de titre du navigateur) et la balise </TITLE> qui indique la fin de la zone de titre. Vous pouvez aussi remarquer que la description de certaines zones est imbrique dans la description dautres zones. Exemple : la zone de titre, dlimite par les balises <TITLE> et </TITLE> est imbrique dans la zone dentte, dlimite par les balises <HEAD> et </HEAD>.
Cet exemple nous apprend aussi

Que lon peut mettre des commentaires en html. Un commentaire est encadr par . Lors de la visualisation de la page Web, les commentaires sont ignors par le navigateur. Exemple de commentaire html : 
3B.lments de base dune page HTML

Un document (ou une page) HTML est compos de plusieurs parties. En gnral, on trouve le titre, lentte et le corps. Un ensemble de deux balises permet de dlimiter chacune de ces parties (balise de dbut et balise de fin). Dans un document HTML, gnralement, on trouve : le document tout entier situ entre <HTML> et </HTML> ; la zone den-tte entre <HEAD> et </HEAD> dans laquelle on peut trouver, entre autres, le titre du document (ce qui sera utilis comme titre de fentre dans le navigateur) ; le corps du document entre <BODY> et </BODY>. Nous verrons au fil de ce support ce quon peut mettre entre ces diffrentes balises.
Remarques
Une balise de fin est indique par /. Dans la spcification HTML 4.01 du W3C, il est indiqu que les balises ouvrantes <head> et <body>, ainsi que les balises de fin </head> et </body> sont facultatives, mais je vous recommande de les mettre pour une meilleure lisibilit de votre code html.
Attributs de la balise <body>

Un attribut (qui doit toujours tre indiqu dans la balise de dbut) permet de paramtrer lobjet correspondant. Exemple : dans le code html du fichier premierePage.htm (ou .html), compltez la balise <body> comme suit...
<body bgcolor = "Silver">
8 3950 TG PA 00
33
Squence 2
Initiation HTML
Enregistrez la modification, puis, dans votre navigateur, actualisez laffichage de votre page. Voil, vous voyez que lattribut bgcolor dtermine la couleur de fond de votre page. Autre exemple : si au lieu de <body>, on crit <body background = "monImage.gif">, cela rajoute limage monImage.gif comme image de fond (notez quici, il faut que monImage.gif se trouve dans le mme rpertoire, cest dire le mme dossier que notre page HTML). On peut mettre plusieurs attributs dans une balise. Exemple : dans notre premire page, essayez a
<body text = "Blue" bgcolor = "Silver">

... voil, on sait affecter une certaine couleur de fond notre page, ainsi quune couleur tout texte crit entre <body> et </body>.
Une petite digression sur les couleurs Remarque

Pour indiquer les couleurs (de texte et de fond), on peut aussi, au lieu dindiquer des noms, utiliser les codes de couleurs RVB (Rouge Vert Bleu), galement appel RGB (Red Green Blue, prononcer Rouaide, grouine, blou). Dans ce cas, Les valeurs possibles vont de #FFFFFF pour le blanc #000000 pour le noir. Les couleurs sont ici codes sur 6 positions hexadcimales, ce qui revient au mme que de dire quelles sont codes sur 24 positions binaires (24 bits), 8 positions binaires pour dfinir lintensit de rouge, 8 positions binaires pour dfinir lintensit de vert, et 8 pour le bleu. Ceci revient encore au mme que de dire : les deux premiers chiffres hexadcimaux dterminent la proportion de rouge, les deux chiffres suivants dterminent la proportion de vert, et le deux derniers concernent le bleu. Faisons quelques essais ... Dans le code de notre fentre, remplacez bgcolor = Silver successivement par ...
bgcolor = "#FF0000"
... ae, mes yeux on a trouv le rouge. Puis par
bgcolor = "#00FF00"
... ho l l ce vert pomme!! Puis par
bgcolor = "#0000FF"
... il pte ce bleu, hein !!
8 3950 TG PA 00
34
Squence 2
Initiation HTML
Comment fonctionne ce code RGB ?

partir de ces 3 couleurs primaires, on peut crer toutes les autres couleurs, cest la proportion de chacune des 3 couleurs qui va dterminer la couleur rsultat. C'est le mme principe que quand vous mlangiez de la peinture lcole quand vous tiez petits, en moins salissant, mais parfois en plus risqu pour la sant de nos yeux et notre sens de lesthtique.
Quelques exemples de mlanges pas trop loups

Essayez "#FFAA00". On a mlang beaucoup de rouge (FF), avec un peu de jaune/vert (AA), et on na pas mis de bleu, ce qui nous donne du orange. Essayez aussi "#AAAAAA"... vous verrez que ce nest pas loin de notre couleur silver de tout lheure. Voici ci-dessous quelques noms de couleur et les valeurs numriques correspondantes :
Black = "#000000" Green = "#008000" Silver = "#C0C0C0" Lime = "#00FF00"
Gray = "#808080" Olive = "#808000" White = "#FFFFFF" Yellow = "#FFFF00"
Maroon = "#800000" Navy = "#000080" Red = "#FF0000" Blue = "#0000FF"
Purple = "#800080" Teal = "#008080" Fuchsia = "#FF00FF" Aqua = "#00FFFF"
Remarque
Quand vous indiquez une couleur par son nom, vous pouvez utiliser indiffremment des majuscules ou des minuscules.
Revenons-en nos attributs

Il existe galement dautres attributs pour la balise body. Lattribut topmargin. Il dtermine la marge haute du document, cest--dire la distance laquelle va safficher le contenu par rapport au haut de la page. Exemple : topmargin = "20 ". Ici, jai mis que la marge haute valait 20. Lattribut leftmargin. Il dtermine la marge gauche du document. Exemple : leftmargin= "50". Je vous laisse tester leffet de ces attributs sur notre page de test, dont la balise body peut avoir lallure suivante ...
<BODY text = "Blue" bgcolor = "#FFAA00"
topmargin = "20" leftmargin = "50">
3C.Le formatage de texte

3C1.Organisation de laffichage du texte
Les sauts de lignes que nous mettons dans le code source dune page HTML ne sont pas interprts par le navigateur.
8 3950 TG PA 00
35
Squence 2
Initiation HTML
La preuve ? essayez a ...
<HTML> <HEAD> <TITLE> Page daccueil du site mes CD, mes livres etc. </TITLE> </HEAD> <BODY text = "Blue" bgcolor = "#FFAA00" topmargin = "20" leftmargin = "50"> Bienvenue sur la page daccueil du site mes CD, mes livres etc </body> </HTML>
... puis affichez la page. Convaincu(e) ? Pour les sautes de lignes, les paragraphes, etc., des lments html permettent dorganiser laffichage du texte.
Crer des paragraphes

En modifiant notre premire page, essayez ce qui suit (jai mis les modifications en gras)...
<HTML> <HEAD> <TITLE> Page daccueil du site mes CD, mes livres etc. </TITLE> </HEAD> <BODY text = "Blue" bgcolor = "#FFAA00" topmargin = "20" leftmargin = "50"> <p>Bienvenue sur la page daccueil du site mes CD, mes livres etc</p> Vous allez dcouvrir ma collection personnelle... Bonne visite! </body> </HTML>
Une fois que vous avez test, vous constatez que pour quun texte constitue un paragraphe, il faut lencadrer avec le couple de balises <p> et </p>. On peut galement choisir lalignement du paragraphe cr. Ce paragraphe peut tre : justifi gauche <p align = left> </p> centr <p align = center > </p> justifi droite <p align = right>... </p> justifi droite et gauche <p align = justify>... </p> Exemple : dans le code de notre page, remplacez <p> par
<p align = center>

... et testez le rsultat bien sr!!
8 3950 TG PA 00
36
Squence 2
Initiation HTML
Remarque
Les paragraphes sont par dfaut aligns gauche. La balise de fin de paragraphe est optionnelle. Lindentation de paragraphe : souvenez-vous, on utilise le terme indenter aussi en algo, pour exprimer le fait que lon dcale certaines parties dalgo. Il est possible dindenter des paragraphes vers la droite en les encadrant entre les balises <BLOCKQUOTE> et </BLOCKQUOTE>. Exemple : dans notre page, modifiez la mise en forme du paragraphe comme a ...
... <BLOCKQUOTE> <p > Bienvenue sur la page daccueil du site mes CD, mes livres etc</p> </BLOCKQUOTE> ...
Pour aller la ligne

On peut vouloir aller la ligne sans pour autant changer de paragraphe. On dispose de deux balises pour a : La balise <br > (qui signifie break line) : elle permet de passer la ligne suivante sans modifier lalignement et le style courants. Pour cette balise, il nexiste pas de balise de fin. Allez, on rajoute un petit saut de ligne dans notre document premierPage.htm(l)
<HTML> <HEAD> </HEAD> <BODY text = "Blue" bgcolor = "#FFAA00" topmargin = "20" leftmargin = "50"> <p align = center> Bienvenue sur la page daccueil du site mes CD, mes livres etc</p> Vous allez dcouvrir ma collection personnelle...<br> Bonne visite! </body> </HTML> <TITLE> Page daccueil du site mes CD, mes livres etc... </TITLE>
... et on teste. Ben ... je ne vois aucun changement, moi!! Ah, mais suis-je sotte, jai oubli denregistrer avant daller rafrachir laffichage dans mon navigateur, cest pour a!! Jenregistre ma modif dans le bloc-notes, je vais dans mon navigateur, je refrachis ... a y est, cette fois, ma modification est prise en compte dans ma fentre. Le navigateur, lorsquon rafrachit laffichage dune page, recharge la page depuis lendroit o elle est stocke. Paralllement cela, tant quon n'enregistre pas un fichier, les modifications quon lui a fait subir restent en mmoire vive, mais ne sont pas inscrites dans la version de fichier qui est stocke sur disque. Du coup, si on rafrachit une page quon a modifie mais dont on na pas enregistr les modifications, les modifications ne sont pas prises en compte. 37
8 3950 TG PA 00
Squence 2
Initiation HTML
Les balises <div> et </div> (div signifie division) : ces balises jouent peu prs le mme rle que les paragraphes et on peut utiliser les mmes attributs dalignement. Rappel des attributs dalignement :
<div <div <div <div
align align align align
= = = =
left> </div> center> </div> right> </div> justify> </div>
La diffrence par rapport au paragraphe est quaucun saut de ligne nest gnr avant et aprs une division. Une division permet galement de changer temporairement de style (dalignement par exemple) lintrieur dun paragraphe. Allez, on sen rajoute une dans notre page ... <HTML> <HEAD> <TITLE> Page daccueil du site mes CD, mes livres etc... </TITLE> /HEAD> <BODY text = "Blue" bgcolor = "#FFAA00" topmargin = "20" leftmargin = "50"> <p align = center> Bienvenue sur la page daccueil du site <div align = center> Mes CD, mes livres etc</div> </p> Vous allez dcouvrir ma collection personnelle...<br> Bonne visite! </body> </HTML>
Utiliser des lignes de sparation

La balise <hr> permet de crer une ligne horizontale. On peut enrichir la description de cette ligne laide dattributs : attribut color pour une ligne en couleur, Exemple : <hr color="Aqua"> attribut size pour dterminer lpaisseur de la ligne, Exemple : <hr color="Aqua" size="5"> attribut noshade pour une ligne sans ombre, Exemple : <hr color="Aqua" size="5" noshade> Cet attribut est un boolen, si on le met, cest quil est vrai, cest donc quon ne veut pas dombre. attribut Width pour dterminer la largeur de la ligne, en pourcentage de lcran, Exemple : <hr color="Aqua" size="5" noshade Width="50%"> Note : On peut dterminer la largeur de la ligne en pixels. Exemple : <hr Width="150"> enfin, si la ligne nest pas aussi large que la page, on peut souhaiter quelle soit centre, justifie, aligne droite ou aligne gauche, et on peut utiliser lattribut align, Exemple : <hr color="Aqua" size="5" noshade Width="50%" align = left>
8 3950 TG PA 00
38
Squence 2
Initiation HTML
Et, comme vous venez de le voir, on peut bien sr combiner ces diffrents attributs. Allez, nous on se rajoute une petite ligne, comme dhabitude, jai mis en gras les dernires modifications : <HTML> <HEAD> <TITLE> Page daccueil du site mes CD, mes livres etc... </TITLE> </HEAD> <BODY text = "Blue" bgcolor = "#FFAA00" topmargin = "20" leftmargin = "50"> <p align = "center"> Bienvenue sur la page daccueil du site <div align = "center"> Mes CD, mes livres etc</div> </p> Vous allez dcouvrir ma collection personnelle...<br> Bonne visite! <br> <hr color="Aqua" size="5" noshade Width="50%" align = "left"> </body> </HTML> Waow, cest chouette hein!! Rcapitulons lensemble des attributs utilisables. SIZE : paisseur du trait. WIDTH : largeur du trait (exprime en pixels ou en pourcentage de la largeur totale de la fentre). ALIGN : position du trait dans la fentre. NOSHADE : suppression de lombrage. COLOR : couleur du trait. La balise fermante, pour <hr> est interdite par le W3C. O
Les niveaux de titre

Dans un document structur on va trouver des niveaux de titre (ce que lon nomme gnralement Titre1, Titre2, etc. dans un traitement de texte). En HTML, ces niveaux sappellent des headers, il y a gnralement 6 niveaux de headers (H1 H6). Les balises <h1>, <h2> <h6> permettent en fait dappliquer des styles prdfinis servant organiser des niveaux de titres dans un document. Exemple : allez, on applique a tout de suite notre page ... <HTML> <HEAD> <TITLE> Page daccueil du site mes CD, mes livres etc... </TITLE> </HEAD> <BODY text = "Blue" bgcolor = "#FFAA00" topmargin = "20" leftmargin = "50"> <h1><p align = "center"> Bienvenue sur la page daccueil du site <div align = "center"> Mes CD, mes livres etc</div> </p></h1> <h3>Vous allez dcouvrir ma collection personnelle...</h3><br> <h5>Bonne visite! </h5><br> <hr color="Aqua" size="5" noshade Width="50%" align = "left"> </body> </HTML>
8 3950 TG PA 00
39
Squence 2
Initiation HTML
3C2.La mise en forme de texte

Formatage Texte centr Texte en gras Texte en italique Texte soulign Fonte espacement constant Texte barr Texte clignotant Mise en indice Mise en exposant Balise de dbut Balise de fin
<center> <b> ou <strong> <EM> ou <I> <u> <TT> <STRIKE> <BLINK> <SUB> <SUP>
</center> </b> ou </strong> </EM> ou </I> </u> </TT> </STRIKE> </BLINK> </SUB> </SUP>
Exemple : allez hop, application directe

<HTML> <HEAD> <TITLE> Page daccueil du site mes CD, mes livres etc... </TITLE> </HEAD> <BODY text = "Blue" bgcolor = "#FFAA00" topmargin = "20" leftmargin = "50"> <h1><p align = center> Bienvenue sur la page daccueil du site <div align = center> Mes CD, mes livres etc.</div></p></h1> <h3>Vous allez dcouvrir ma collection personnelle...</h3><br> <h5>Bonne visite! </h5><br> <hr color="Aqua" size="5" noshade Width="50%" align = left> <b> cd </b> <br> <i> livres </i> <br> <u> bandes dessines </u> <br> <blink> vieux disques vinyle </blink> <br> <h2>cest le plaisir <sup> 50 </sup> <h2><br> </body> </HTML>
Vous avez test ? Est-ce que chez vous, a clignote ? Chez moi, pas franchement ... non, a ne clignote mme pas du tout.
Remarque
Vous avez vu dans le tableau ci-dessus que plusieurs balises existent pour certains formatages. Cela sexplique par le fait quon distingue le formatage physique (exemple : <b> pour un texte en gras, <i> pour un texte en italique) et le formatage logique (exemple : <strong> pour un texte en gras, <EM> pour un texte en italique). Quelle est la diffrence entre formatage physique et formatage logique ? Lors dun formatage logique, la technique utilise pour la mise en forme (par exemple, pour mettre du texte en gras) est choisie par le navigateur du poste de linternaute.
8 3950 TG PA 00
40
Squence 2
Initiation HTML
Le texte prformat
Pour afficher du texte en respectant les espacements, tabulations, etc., il suffit de lencadrer par <PRE> et </PRE>. Le texte sera affich dans une police espacement constant. Les balises <pre> </pre> permettent de demander au navigateur de respecter la faon dont le texte est tap dans le code source. Exemple : dans le code de notre page, rajoutez, juste avant la balise </body>
... <pre>Si, si, vous allez voir, mon site est <b>fantastique!!</b></pre> </body> ...
Testez... Cest cool hein !
Actions possibles sur la police de caractres

Il est possible de faire varier la taille, la couleur et la police des caractres de tout texte. Pour cela, on utilise llment <font> et on renseigne ses attributs de taille, de police, de couleur. Augmenter la taille des caractres : on utilise lattribut size. Cela peut se faire : relativement par rapport la taille standard (gnralement 12 points), les valeurs utilisables schelonnent entre -7 et +7 ; Exemple : <font size = "+5">Jaugmente la taille de 5</font><p> en indiquant la taille de la police. Exemple : <font size = "10" >Gros mots </font> Choisir la police des caractres : lattribut face. Exemple : <font size = "10" face = "Arial"> Gros mots en Arial</font> Dterminer la couleur des caractres : lattribut color Exemple : <font size = "10" face = "Arial" color = "red"> Gros mots rouges en
Arial</font>
Appliquons, appliquons ... en modifiant cette partie du code de notre page ... ... <pre><font face = "Times New Roman"> Si, si, vous allez voir, mon site est <font size = "+5" color = "red"> fantastique!!</font></font></pre> </body> </HTML>
8 3950 TG PA 00
41
Squence 2
Initiation HTML
Pour afficher certains caractres

Certains caractres (<, > et &) sont interprts par les navigateurs. Ben oui, par exemple, les caractres < et > sont interprts comme des dbuts ou des fins de balise. Pour pouvoir afficher ces caractres dans un document HTML, il faut indiquer au navigateur quil ne doit pas les interprter et les afficher tel quel. Il faut donc les mentionner de manire codifie dans le document o on veut lafficher. Pour afficher le caractre : < > & Il faut taper le code : &lt &gt &amp
Le problme des accents

Le code de caractres utilis sur le Web est le code ASCII (7 positions) qui ne permet pas de reprsenter les caractres accentus. Donc, quel que soit le systme client, pour afficher les caractres accentus, on utilise aussi la notation codifie prcde de &. Le tableau suivant reprend les principaux codages : Pour afficher le caractre : espace Il faut taper le code : à â ç é è ê ë ï ô ú ü û
Que se passe-t-il donc si, au lieu dutiliser ces codes de caractres accentus, on met directement les caractres tel quel ? Faites lessai. Vous verrez que sur votre propre machine, si vous tapez , cest bien qui saffiche. Si le poste client est configur de manire traduire le code numrique de par , cest bien qui saffichera. Alors l, vous vous dites Mais quest-ce quelle raconte ?.
8 3950 TG PA 00
42
Squence 2
Initiation HTML
Ce que je veux dire, cest que selon la configuration du poste de linternaute, a peut tre qui saffiche, mais a peut aussi tre un autre caractre. Sur une machine configure pour un utilisateur russe par exemple, ou un chinois, ou un utilisateur utilisant un alphabet qui ne contient pas la lettre , a mtonnerait que quand un est tap dans un document HTML, ce soit un qui saffiche. Donc, si on veut que le texte de notre page soit correctement lisible par nimporte quel internaute, il vaut mieux utiliser les codes des lettres que les lettres elles-mmes. Ce qui est sr, cest que cest un peu plus compliqu de taper du texte en utilisant les codes des caractres accentus que les caractres eux-mmes. Exemple : dans notre document HTML, au lieu de ...
.... <h3>Vous allez dcouvrir ma collection personnelle...</h3><br> ... <u> bandes dessines </u> <br> ...
Tapez...
.... <h3>Vous allez découvrir ma collection personnelle...</h3><br> ... <u> bandes dessinées </u> <br> ...
Enregistrez la modification et allez voir ce que a donne dans votre navigateur. Ca doit donner exactement le mme texte quavant, sauf que l, en plus, quelle que soit la configuration de sa machine et la nationalit de linternaute, cest bien des qui safficheront. Donc, si on veut que notre page soit correctement lisible quel que soit le poste client, il faut utiliser ces codes (cest sr que a nest pas trs confortable pour nous, les concepteurs, mais quand on dveloppe une application, ce nest pas notre confort qui importe, mais celui de lutilisateur).
Remarque
il est galement possible dafficher un caractre en indiquant son code ASCII tendu (256 caractres cods de 0 255), les 128 premiers caractres sont ceux du code ASCII pas tendu, les 128 suivants dpendent de la page de code utilise par la machine de linternaute. Pour indiquer quil sagit dun code ASCII tendu, on prcde le code de &#. Exemple : pour afficher le caractre en utilisant son code ASCII, taper &#233, comme a...
<u> bandes dessin&#233es </u> <br>
8 3950 TG PA 00
43
Squence 2
Initiation HTML
Bien entendu, dans ce cas, si la machine de linternaute nutilise pas la mme page de code que nous, on retombe sur le mme problme que si on avait tap directement dans le code source de notre page.
3C3.Structuration des informations : les listes

La notion de liste va permettre de prsenter linformation de manire plus claire, plus structure. Il existe plusieurs sortes de listes : des listes ordonnes (cest--dire numrotes), des listes puces, des listes de dfinitions, des listes de rpertoires.
Remarque
Il existait galement la balise <DIR > (pour des listes multi-colonnes) et la balise <MENU> (pour des listes une seule colonne), mais leur utilisation est dconseille par le W3C, donc, nous, on fait ce quils disent, cest--dire quon nutilisera pas ce type de listes.
Les listes ordonnes

Premier exemple : voici le code HTML dune page qui utilise une liste ordonne. Jai tap ce code dans le Bloc Note de Windows et je lai enregistr avec lextension .HTML.
<HTML> <body> <OL> <LI>Les <LI>Les <LI>Les <LI>Les </OL> </body> </HTML>
listes listes listes listes
puces de menus de rpertoires de dfinitions
Ci-dessous, vous avez la page telle quelle est visualise par mon navigateur.
8 3950 TG PA 00
44
Squence 2
Initiation HTML
Explications Le marqueur <OL > dbute la liste numrote, qui se termine par </OL>. Chaque marqueur <LI> est plac devant un lment de liste. Dans le cas de cet exemple, la numrotation se fait automatiquement, dbutant 1. Il est tout fait possible dimbriquer les listes, en plus la numrotation suit ! Lattribut type de la balise <ol> peut prendre les valeurs suivantes : Valeurs possibles de lattribut type : TYPE ="I" TYPE = "i" TYPE = "A" TYPE = "a" La numrotation saffiche avec : Des chiffres romains majuscules Des chiffres romains minuscules Des lettres majuscules Des lettres minuscules
Autre exemple : allez, on cre une liste sur notre page ... Pour cela, on va remplacer le code ...
... <b> cd </b> <br> <i> livres </i> <br> <u> bandes dessin&#233es </u> <br> <blink> vieux disques vinyle </blink> <br> ...
Par ...
... Sur ce site, vous allez dcouvrir    <ol start = "1">  <li> Mes lectures </li> <li> Mes musiques </li> <li> Mes films </li> </ol> ...
8 3950 TG PA 00
45
Squence 2
Initiation HTML
Les listes puces

Ce sont des listes o chaque lment commence par une puce. Un premier exemple : juste pour vous montrer ce que a peut donner. Ne le tapez pas, il nest pas prcd d'un trait gris vertical.
<HTML> <body> <UL> <LI>Les <LI>Les <LI>Les <LI>Les </UL> </body> </HTML>
listes listes listes listes
puces de menus de rpertoires de dfinitions
Remarque
Cest le marqueur <UL> qui prcise que cest une liste puce (unordered list). Voil ce que donne lexemple ci-dessus :
Les Les Les Les
liste puces listes de menus listes de rpertoires listes de dfinitions
Par dfaut, les puces sont des petits ronds noirs, des puces quoi. Il est possible de choisir le type de puce utiliser en rajoutant un attribut type. Lattribut type peut prendre les deux valeurs suivantes : type = "square" et type = "circle". Un second exemple : sur notre page, on imbrique des listes puce dans notre liste ordonne, pour dtailler un peu ce quon propose sur notre site. Cette fois, tapez cet exemple ...
8 3950 TG PA 00
46
Squence 2
Initiation HTML
... <ol start = "1">  <li> Mes lectures    <ul type = "circle">  <li> Romans </li> <li> BD </li>  </ul>  </li> <li> Mes musiques <ul type = "circle"> <li> CD </li> <li> Disques vinyle </li> <li> Cassettes audio </li> </ul> </li> <li> Mes films <ul type = "circle"> <li>DVD </li> <li> Cassettes vido </li> </ul> </li>  </ol> ... Voil, il ne reste plus qu tester... a commence prendre forme.
Les listes de dfinitions

Elles servent prsenter des textes sous forme dentre de dictionnaire : le terme se trouve en appui gauche et la dfinition est lgrement indente. Ce type de prsentation sobtient en utilisant le marqueur <DL > pour introduire la liste et </DL > pour la terminer. Chaque entre du glossaire sera prcde par <DT> et chaque dfinition commencera par <DD>. Chaque dfinition peut stendre sur plusieurs lignes, lindentation sera conserve.
8 3950 TG PA 00
47
Squence 2
Initiation HTML
Exemple : le code HTML suivant (qui nest pas taper)...
<HTML> <body> <DL> <DT><b>Vacances</b> <dd>Moment de dtente agrable <BR> <dd>ou <dd>Lieu de villgiature au soleil, ou au frais comme on prfre, avec de la bonne eau pour se baigner, ou de la neige si on prfre. <DT><b>Buller</b> <dd>synonyme familier de ne rien faire.<BR> Si on vous dit "Je bulle", cela signifie "Je ne fais rien <b>du tout</b>". </DL> </body> </HTML>
... donne la superbe page ci-dessous.
Bon, l, en ce qui concerne notre site, tout de suite maintenant, je ne vois pas dapplication directe de cette nouvelle notion. On ne va quand-mme pas expliquer aux internautes ce quest un CD, ils risquent de se vexer en pensant quon les prend pour des ignares.
8 3950 TG PA 00
48
Squence 2
Initiation HTML
3C4.Dplacement horizontal du contenu de la page

a cest trs rigolo !! La balise marquee permet dorganiser le dplacement horizontal de tout texte et/ou dimage se trouvant entre <marquee> et </marquee>. Exemple : sur notre page, on va faire bouger notre phrase Cest le plaisir50 , en modifiant le code source comme a ...
... </ol> <marquee Width = "50%" scrolldelay = "5" behavior = alternate> <h2>cest le plaisir <sup> 50 <h2><br> </marquee> ...
... et voil, notre texte bouge! Les attributs de la balise marquee : width : lamplitude du mouvement ; scrolldelay : rapidit du mouvement ; behavior : cet attribut peut prendre deux valeurs : alternate (pour provoquer un va et vient dans la zone dfinie par Width), continue (pour crer dplacement en sens unique ). Je vous laisse tester les diffrentes valeurs possibles de ces diffrents attributs.
3C5.En petite conclusion...

Bon, on a vu peu prs toutes les bases de la mise en forme de texte. Vous voyez quon peut dj faire pas mal de choses ds prsent. Dans la suite, on va aborder des notions qui permettent daller un peu plus loin dans la structuration dune page, mais aussi dun site. Dailleurs, le paragraphe suivant traite des liens. Ceci va, par exemple, nous permettre de crer une seconde page et nous permettre de la rendre accessible depuis notre premire page, laide dun lien.
3D.Les liens
Les liens sont la base mme du modle hypertexte. Ils permettent par un simple clic de souris de se dplacer sur une autre page, dans une autre partie dune page, dans un autre fichier et mme dappeler un document situ sur un autre serveur ou denvoyer un mail quelquun. Dans le cas dun lien vers un fichier, si cest un fichier dextension .html, le navigateur laffichera, sinon si le format du fichier est reconnu (son, image, vido, etc.), le navigateur excutera lapplication correspondante, enfin si le navigateur ne sait pas trop quoi en faire, une bote de dialogue saffichera pour proposer la sauvegarde du document (cest comme cela que lon tlcharge un logiciel par exemple). La syntaxe gnrale dun lien est la suivante : <A HREF =..> </A >. 49
8 3950 TG PA 00
Squence 2
Initiation HTML
3D1.Prrequis la notion de lien : les URI, leur utilit

Un URI (Identifiant de Ressource Uniforme) est un outil de rfrencement des ressources usage gnral, il permet de dsigner a peu prs tous les types de ressources, du simple fichier sur la machine locale, au serveur Web, FTP, etc. Il existe deux catgories de liens bien distinctes : les liens externes et les liens internes. Vous connaissez certainement plutt le sigle URL (Uniform Ressource Locator), quon utilise, tort pour dsigner un URI. Les URL forment un sous-ensemble des URI, et concernent les ressources externes accessibles via le Web. Les URI, plus gnralistes, dsignent un mode de rfrencement de toute ressource, y compris lintrieur dune mme page et/ou sur la machine locale. LURI dune ressource sert aux documents HTML localiser cette ressource. En HTML, les URI sutilisent pour beaucoup de choses (on en verra certaines dans ce chapitre, et dautres dans les chapitres ultrieurs, y compris dans le fascicule 2) : relier un autre document ou ressource (A et LINK) ; relier une feuille de style externe ou un script (LINK et SCRIPT ) ; inclure une image, un objet ou un applet dans une page (IMG, OBJECT, APPLET et INPUT ); crer des images cliquables (MAP et AREA) ; soumettre un formulaire (FORM) ; crer un cadre (FRAME et IFRAME) ; citer une rfrence externe (Q, BLOCKQUOTE , INS et DEL) ; se reporter aux conventions de mtadonnes qui dcrivent un document (HEAD). Un URI est gnralement de la forme : type de ressource : // adresse ou emplacement / chemin daccs / nom de fichier En fait, un URI est toujours form de trois parties distinctes : le nom du protocole utilis pour accder la ressource ; le nom de la machine hbergeant la ressource ; le nom de la ressource en question, indiqu sous la forme dun chemin. Exemple : lURI http://www.w3.org/TR dsigne la page des rapports techniques du W3C. Cet URI peut tre compris comme suit : la ressource est disponible via le protocole HTTP, hberge sur la machine nomme www.w3.org et accessible par le chemin /TR . On peut rencontrer dautres systmes dans les documents HTML, par exemple, comme mailto pour un e-mail ou ftp pour le protocole FTP, protocole permettant le transfert de fichier via Internet.
8 3950 TG PA 00
50
Squence 2
Initiation HTML
Autre exemple : on va le faire sur notre premire page, tiens. Dans le code source de votre fentre, juste avant la balise </body>, rajoutez ...
... Pour tout commentaire, envoyez un e-mail au <A href="mailto:email@adressebidon.fr">Webmaster du site</A>. ...
3D2.les liens externes

Un lien externe permet de rfrencer une ressource ne faisant pas partie de la page HTML dans laquelle il figure. Exemple : il permet de rfrencer une image, un fichier tlcharger, une autre page Web etc. Pour insrer un lien externe dans un document HTML, la syntaxe est la suivante :
<A HREF = "URL de la ressource"> Texte du lien cliquable </A>

Si on met ce lien dans une page HTML, le texte Texte du lien cliquable apparat gnralement diffrenci du reste (en bleu ou soulign), et il devient cliquable, permettant ainsi linternaute, en cliquant sur le lien, daccder la ressource rfrence. Le type de ressource externe rfrence par un URL peut tre : Une ressource se trouvant sur un serveur Web. Dans ce cas, lURL commencera par http ://.... Exemple : <a href = "http://www.club-couture.fr/accueil.htm">Lien vers club couture<a> Une ressource tlchargeable, se trouvant sur un serveur de transfert de fichier, cest dire un serveur ftp (File Transfer Protocol). Ce protocole permet de transfrer des fichiers dune machine une autre machine. Dans ce cas, lURL commencera par ftp : //... Exemple : Un fichier situ sur un serveur FTP
<a href = "ftp://serveurFtp/pub/unFichier.txt"> Tlcharger </a>

Le navigateur proposera le tlchargement ou bien il affichera le contenu du fichier en fonction de son paramtrage. Autre exemple : Un rpertoire situ sur un serveur FTP
<a href = "ftp://serveurFtp/pub/"> Lister le rpertoire </a>

Dans ce cas, le navigateur affichera le contenu du rpertoire, ce qui permettra laffichage ou le tlchargement de ses fichiers. Une adresse de messagerie lectronique. Dans ce cas, lURL commencera par mailto : ... Exemple : <a href="mailto: fred@trucmuche.fr"/>Envoyer un message Fred</
a>
Un clic sur le lien Envoyer un message Fred ouvre le logiciel de messagerie install sur le poste de linternaute et lui permet de taper et denvoyer un mail. On peut aussi prciser le sujet du message, ainsi que son contenu :
<a href = "mailto : fred@trucmuche.fr? subject = Hello !=Body=COUCOU"/ >Envoyer un message Fred </a>
8 3950 TG PA 00
51
Squence 2
Initiation HTML
Remarque
Dans ces trois premiers cas, on peut parler dURL puisque la ressource est accessible via le Web. Un fichier de la machine locale (cest--dire un fichier se trouvant sur la mme machine que la page HTML contenant lURI). Dans ce cas, lURI de la ressource ne comporte pas de nom de protocole ni de nom de machine. On indique uniquement, dans lURI, o trouver la ressource partir de la page contenant lURI. Exemple : supposons quune page de mon site affiche limage clebard.JPEG, une photo du teckel de Jean-Yves en maillot de bain (le teckel, pas Jean-Yves...). Je souhaite visualiser la photo de ce merveilleux animal dans ma page. Supposons que ma page HTML se trouve dans le rpertoire c :\fred du disque dur local de ma machine, et que la photo du chien se trouve dans le rpertoire c :\fred\Photos. Pour indiquer lURL de la photo dans ma page, jindiquerai /photos/clebard.JPEG (vous avez remarqu, les sparateurs de rpertoires sont des /). Un autre exemple : supposons maintenant que ma page se trouve toujours dans le rpertoire c:\fred, mais que la photo de ce satan teckel en maillot se trouve la racine du disque dur de ma machine, cest--dire dans le rpertoire c :. Dans ce cas, pour accder la photo depuis ma page, je dois indiquer quelle se trouve dans le rpertoire pre du rpertoire o se situe ma page, laide de la syntaxe ../clebard.jpeg. Application notre site :
Dans le code source de notre page, juste avant la balise </body> rajoutons ... <br> <A href = "deuxiemePage.htm"> Accder la page suivante </A> ...
... puis testons. Bien entendu, pour le moment, le navigateur nous affiche une page blanche puisquil nexiste pas de fichier sappelant deuxiemePage.htm(l) dans le mme rpertoire que notre page premierPage.htm(l). Alors qu cela ne tienne, crons une deuxime page, que nous enregistrons dans le mme rpertoire que la premire sous le nom deuxiemePage.htm. Voici le code source de cette deuxime merveille du monde des concepteurs de sites Web ...
<html> <head> <title> Deuxime page, vide pour le moment </title> </head> <body> </body> </html>
8 3950 TG PA 00
52
Squence 2
Initiation HTML
Si on retourne tester notre premire page, cette fois, on voit bien quon nous affiche notre deuxime page. La preuve, cest quon retrouve notre titre Deuxime page, vide pour le moment dans la barre de titre du navigateur.
3D3. Les liens internes

Les liens internes sont des liens lintrieur dun document. Ces liens relient entre eux diffrents points dun mme document HTML. Pour raliser un lien interne, il suffit de placer une tiquette de la forme :
<A NAME="Etiquette">Texte</A>
Le lien vers cette tiquette se fera de la faon suivante :
<A HREF="#Etiquette">Retour au dbut</A>

Ce lien tant cliquable, lorsque linternaute cliquera dessus... testez ce que a fera. Exemple : on va tout de suite appliquer cette nouvelle notion notre premire page. Ce quon va faire : en haut de la page, on va mettre un lien interne permettant daccder tout de suite ladresse e-mail du Webmaster (au fait, je ne sais plus trop si je vous ai expliqu ce quest un Webmaster, Webmestre en franais : cest ladministrateur du site). On va donc placer une tiquette sur le-mail du Webmaster, et un lien vers cette tiquette en haut de la page. En haut de la page, juste aprs la balise <body...>, on tape ...
.. <A HREF="#adresseWebmaster"> Voir le-mail du Webmaster </A> ...

...et maintenant, ltiquette ...
.... vous allerz voir, mon site est <font size = "+5" color = "red"> fantastique!! </font></font></pre> <br><br><br><br><br><br><br><br><br><br><br><br><br> <A NAME="adresseWebmaster"> Pour tout commentaire, envoyez un e-mail : <A href="mailto:email@adressebidon.fr">Webmaster du site</A> </A> <br> <A href = "deuxiemePage.htm"> Accder la page suivante </A> ...
Jai mis plein de sauts de lignes pour que ladresse e-mail soit trs trs en bas de la page, afin de vrifier que ltiquette fonctionne. Allez, on teste a... Bon, youpi, a fonctionne.
8 3950 TG PA 00
53
Squence 2
Initiation HTML
3D4.Les ancres (galement appeles identifiants de fragments)

Les ancres permettent de combiner lien externe et lien interne pour atteindre, via un lien externe, une partie prcise dans la page. Pour poser une ancre, on utilise la syntaxe qui permet de placer une tiquette :
<a name = "nomAncre"> </a>

Pour rfrencer lancre, on indique lURI du document ainsi que le nom de lancre :
<a href="nomDocument#nomAncre"> </a>

Autrement dit , certains URI se rapportent un endroit dans une ressource. Ce genre dURI se termine par un caractre #, suivi par lidentifiant dune ancre (appel identifiant de fragment). Exemple : voici, ci-dessous, un URI qui pointe sur lancre section2 de la page top.html http://unsite.com/html/top.html#section_2 Autre exemple : dans notre deuxime page, on va se mettre un lien pour accder ladresse du Webmaster qui est indique dans notre premire page.
<html> <head> <title> Deuxime page, un peu moins vide </title> </head> <body> <a href="premierePage.htm#adresseWebmaster"> Voir ladresse du Webmaster </ a> </body> </html>
faites trs attention!! Si vous avez enregistr votre premire page avec lextension .htm, vous devez indiquer lextension .htm, sinon, a marche pas. Mme chose si vous lavez appele premierePage.html, alors il faut indiquer <a href="premierePage.html"# ..., sinon, la page ne sera pas ouverte. Bon, on teste. Re-youpi, a marche.
3D5.Lattribut target de la balise href

Cet attribut permet de choisir de quelle faon saffichera la ressource rfrence par le lien lorsque linternaute cliquera sur le lien.
Pour que la ressource remplace la fentre o figure le lien

Supposons, que dans une page, on ait le lien :
<a href = "nouvellepage.html">Nouvelle page.</a>

On peut, si on veut, indiquer, dans le lien, la valeur par dfaut de lattribut target du lien, mais la syntaxe ci-dessous revient exactement au mme que si on ne valorise pas lattribut target :
<a href = "nouvellepage.html" target = "_self">Nouvelle page.</a>
8 3950 TG PA 00
54
Squence 2
Initiation HTML
Pour que la ressource remplace la fentre courante, on peut utiliser aussi la syntaxe :
<a href = "nouvellepage.html" target = "_top">Nouvelle page.</a>

Vous comprendrez la diffrence entre les valeurs _top et _self de la balise target quand, ci-dessous, on abordera les frames (cest--dire les cadres). Retenez pour le moment que pour une page HTML classique, on dispose des 3 faons prcdentes pour faire en sorte que la ressource remplace la fentre o figure le lien.
Pour que la ressource saffiche dans une nouvelle page

Dans le document HTML contenant le lien, il faut complter la description du lien en donnant la valeur _blank lattribut target .
<a href = "nouvellepage.html" target = "_blank"> Nouvelle page. </a>

Exemple : testons tout de suite cela dans notre site en compltant, dans notre premire page, le lien vers la deuxime page de la faon suivante ...
<A href = "deuxiemePage.htm" target = "_blank"> Accder la page suivante </A>

Ds quon teste, on voit bien que la deuxime page souvre mais pas la place de la premire.
3D6.Couleurs des liens

Selon quil na pas encore t consult, quil a dj t consult ou encore que linternaute lui clique dessus, un lien, quil soit interne ou externe (<A HREF => </A>), aura 3 couleurs diffrentes. Il est possible de modifier une ou plusieurs de ces 3 couleurs, en rajoutant des attributs dans la balise <body> du document : Lien non consult cliqu Couleur par dfaut bleu rouge Attribut utiliser pour modifier la couleur Exemple link vlink alink Link = "Red" Vlink = "Silver" Alink = "Red"
dj consult rose
Note : lexpression couleur par dfaut signifie quil sagit de la couleur du lien lorsquon ne modifie pas ses attributs de couleur. Voil, on a vu lessentiel sur les liens. Maintenant, passons un thme assez li aux liens, et cher beaucoup de gadgeto-men et gadgeto-girls. Je veux parler de lutilisation dimages dans les documents HTML.
8 3950 TG PA 00
55
Squence 2
Initiation HTML
3E.Utilisation dimages dans les documents HTML

3E1.Les diffrents types dimages
Les navigateurs reconnaissent gnralement deux formats dimages : Les images au format GIF (Graphics Interchange Format). Ces images sont stockes dans des fichiers dextension .gif. Ce sont des images de type Bitmap (cest--dire quelles sont composes de points de couleurs), disposant dune palette de 256 couleurs, codes laide dun algorithme de compression sans perte dinformation. Cr par Compuserve, ce standard est trs utilis mais, le petit nombre de couleurs utilisables donne un effet de trame laffichage (lil humain est capable de diffrencier 16,7 millions de couleurs diffrentes, palette propose par la norme TrueColor). Ce standard est prfrer pour les images (dessins, logos, graphiques) comportant peu de couleurs. Lavantage des images gif est de pouvoir tre affiches progressivement, rendant ainsi lattente moins pnible. On parle de format entrelac (une ligne sur deux saffiche, puis limage se complte au fur et mesure). Lintrt principal du format gif entrelac est dtre moins frustrant pour lutilisateur disposant dun modem bas dbit lors de laffichage de limage. Ben oui quoi, y en a encore qui nont pas lADSL. Tenez, moi, pour prendre un exemple au hasard, eh ben chez moi, on na pas encore lADSL, ni dautre accs haut dbit. Autre intrt des images gif : elles peuvent avoir un fond transparent. J PEG ou JPG : Joint Photographic Experts. Image de type Bitmap 16 Millions de couleurs, compression avec perte dinformations (cette perte est volontaire et permet aux fichiers davoir une plus petite taille), par consquent, ce format est bien adapt pour les documents photographiques couleur. Les images jpeg sont dune taille plus rduite que les gif et permettent un rendu de meilleure qualit.
3E2.Comment afficher une image dans un document HTML ?

Voici la syntaxe gnrale utilise pour insrer une image dans une page :
<IMG SRC = "URI de limage">

IMG SRC indique quil sagit dune instruction daffichage dune image. LURI de limage indique lendroit o est stocke limage, que limage soit sur une machine accessible via Internet (URL de la forme http ://.), ou sur le disque dur dune machine accessible via un rseau autre quInternet, ou encore, sur le disque dur local de la machine utilise par linternaute. Exemple : supposons que la page rfrenant limage soit dans le rpertoire monSite, et que les images que jutilise pour mon site soient dans le sous-rpertoire /monSite/mesImages. Si je veux afficher limage logo.jpg dans ma page, jcrirai :
<IMG SRC = "/mesImages/logo.JPG">
8 3950 TG PA 00
56
Squence 2
Initiation HTML
L aussi, il faut bien respecter les extensions de fichier, sinon, limage ne sera pas O trouve par le navigateur. Allez, application : choisissez ou crez une image dont le thme est en relation avec notre site. Pour quon soit tous bien daccord, appelez-la imageTheme.jpg. Nous allons rajouter cette image sur notre deuxime page, comme a, elle sera moins vide quelle ne lest actuellement. Dans le code source de notre deuxime page, rajoutez...
... <br> <IMG SRC = "/mesImages/imageTheme.JPG"> </body>

Alors, viens voir si a marche ?... Ah ben non, jai pas dimage, jai un pauvre petit carr avec une croix rouge dedans. Comment a se fait a ? Ah!!! Daccord, cest parce que jai mis un / tout au dbut. Il ne faut pas en mettre, puisque le sous-rpertoire mesImages est directement accessible depuis le rpertoire o se trouve ma page. Je corrige...
... <br> <IMG SRC = "mesImages/imageTheme.JPG"> </body>

Cette fois, a fonctionne, mon image saffiche sous le lien vers ladresse du Webmaster.
3E3.Positionnement dune image dans un texte

Une image peut se trouver nimporte o dans le corps du texte. Une image peut tre intgre dans une liste quel que soit son type (ordonne, puces, etc.). Par dfaut, le texte qui suit une image est align sur le bas de limage. On peut modifier cela en utilisant lattribut ALIGN, pour lequel il existe 4 valeurs : TOP, MIDDLE , RIGHT ou BOTTOM (BOTTOM est la valeur par dfaut de lattribut align). Alignement du texte sur le haut de limage Alignement sur le milieu de limage Image droite de lcran <img align = top src => <img align = middle src => <img align = right src = >
Exemple : jai envie de rajouter une lgende mon image. Alors jcris ...
<IMG SRC = "mesImages/imageTheme.JPG">

Cette magnifique photo rsume merveille tous les thmes abords par mon site.
8 3950 TG PA 00
57
Squence 2
Initiation HTML
Et je teste. Oh cest moche!! Bon jessaie diverses solutions, et pour une raison de got, je choisis
... <a href="premierePage.htm#adresseWebmaster"> Voir ladresse du Webmaster </ a> <br> <br> <br> <IMG SRC = "mesImages/imageTheme.JPG" align = right > Cette magnifique photo rsume merveille tous les thmes abords par mon site ...
3E4.Choix de la taille dune image

On peut utiliser les attributs height et Width de la balise img pour modifier la taille de limage dorigine. Tenez, moi par exemple, mon image imageTheme est norme, elle occupe quasimment toute la page et a ne me plat pas. Je men vais la rtrcir un peu. Exemple : jessaie
<IMG height = 32 SRC = "mesImages/imageTheme.JPG" align = right> Cette magnifique photo rsume merveille tous les thmes abords par mon site
Non, l, cest ridicule, elle est minuscule. Lunit doit tre le pixel. Ce que jaimerais, cest que sa largeur occupe peu prs la moiti de la largeur de ma page. Bon, je change
<IMG height = 420 SRC = "mesImages/imageTheme.JPG" align = right> Cette magnifique photo rsume merveille tous les thmes abords par mon site
...oui, l, a me va.
Remarque
Si on modifie une seule des deux caractristiques (hauteur ou largeur), lautre caractristique est automatiquement modifie de manire proportionnelle.
3E5.Remplacement dune image par du texte

Certains navigateurs ne permettent pas laffichage dimages. Dautre part, le chargement des images prend beaucoup de temps et certains navigateurs possdent une option qui permet de ne charger que le texte. Il est donc souhaitable, si lon veut que son document garde une certaine cohrence, de toujours prvoir un texte de remplacement pour une image. Lattribut ALT permet dafficher un texte lorsque limage nest pas charge par le navigateur, mais en plus, elle affiche une bulle daide lors du passage de la souris sur limage. Exemple : compltons la description de notre image ...
<IMG height = 420 SRC = "mesImages/imageTheme.JPG" align = right alt = "Thmes abords par ce site"> Cette magnifique photo rsume merveille tous les thmes abords par mon site
... pour tester, je passe au-dessus de limage avec ma souris. Ah oui, on voit la bulle daide.
8 3950 TG PA 00
58
Squence 2
Initiation HTML
3E6.Modification du fond dcran laide dune image

On en a dj parl plus haut (dans le paragraphe intitul lments de base dune page HTML), mais comme on est au paragraphe sur les images, je vous fais une petite piqre de rappel. Il est galement intressant de placer une image en fond dcran, cela sobtient en paramtrant la balise <body> avec lattribut BACKGROUND et le nom du fichier contenant limage entre double quotes (" .... ").
3E7.Possibilits danimation
Il est possible danimer les images laide de deux techniques : utiliser des gifs anims. On peut en trouver plein sur le net, mais on peut aussi en fabriquer. Il existe en effet des outils permettant de faire des gifs anims. Ces gifs anims sont en fait une succession dimages gif qui se rptent pour former une petite animation ; utiliser, comme pour le texte, la balise marquee. Exemple :
<marquee Width = "10%" scrolldelay = "0" behavior = alternate>

Ce texte est en mouvement, et limage bouge aussi.
<img src = "images/ordichapeau.gif"> </marquee>

si vous voulez, faites-le sur notre image.
3E8.Les images ractives

Les paragraphes prcdents ont montr comment afficher des images, comment grer les liens dans un document, on peut donc aborder ce qui fait la richesse des documents hypertextes : les images ractives. Une image ractive va permettre, lorsque lutilisateur va cliquer dessus, de charger un autre document, dexcuter un programme, etc. En fait, au lieu de mettre un lien textuel, on met une image en guise de lien. Syntaxe :
<a href="URI"><img src="chemin daccs limage cliquable"></a>

Exemple : tiens, pour notre site, quand linternaute clique sur limage, on va faire en sorte que a nous ramne la premire page. <a href = "premierePage.htm"> <IMG height = 420 SRC = "mesImages/imageTheme.JPG" align = right alt = "Thmes abords par ce site"> </a> Cette magnifique photo rsume merveille tous les thmes abords par mon site
8 3950 TG PA 00
59
Squence 2
Initiation HTML
Bon a marche, mais a ne me satisfait pas entirement. Je voudrais que quand on clique sur limage, a nous amne notre liste de thmes. Dans la description de la premire page, il faut donc crer une ancre, appelons-la ancreThemes. On va la mettre sur le texte Sur ce site, vous allez dcouvrir ... Jencadre donc ce bout de texte avec lancre. Ca donne ...
... <A NAME="ancreThemes">Sur ce site, vous allez dcouvrir...</a> ...

Maintenant, je vais complter le code source de la deuxime page ... <a href = "premierePage.htm#ancreThemes"> <IMG height = 420 SRC = "mesImages/imageTheme.JPG" align = right alt = "Thmes abords par ce site"> </a> Cette magnifique photo rsume merveille tous les thmes abords par mon site
... Et voil.
3E9.Mieux que les images ractives, les images mappes

Mieux, mais plus compliqu aussi. Une image mappe est une image dcoupe en plusieurs zones, chaque zone tant cliquable et rfrenant un lien diffrent. Pour raliser a, il existe une balise, la balise map, qui permet de dfinir un plan superposable limage. Ce plan est dcomposable en plusieurs zones appeles area, chaque zone correspondant une partie de limage. Les zones cliquables peuvent prendre trois formes diffrentes : forme dun rectangle ; forme dun cercle ; forme dun polygne. Vous pouvez tester a si vous voulez. Crez une troisime page sur laquelle vous allez faire ce test. Supposons que vous appeliez cette page troisiemePage.htm.
Dcoupage en zones de forme rectangulaire

Le code source ci-dessous vous montre un exemple de cration dun plan laide de la balise map. Pour le tester, tapez-le dans la partie <body> de votre troisime page.
... <map name = "zonesClic"> <area shape = "rect" cords = "0,0,75,50" href = "premierePage.htm"> <area shape="rect" cords = "75,0,100,50" href = "deuxiemePage.htm"> </map> ...
8 3950 TG PA 00
60
Squence 2
Initiation HTML
Le plan une fois dcrit laide des balises map et area, il faut indiquer quelle est limage concerne par ce dcoupage. En supposant que sur cette troisime page, vous mettiez une image sappelant imageClic.gif, vous devez indiquer que cette image est mappe et quelle utilise le map sappelant zonesClic en tapant, dans le code source de notre troisime page...
... <img src = "imageClic.gif" usemap = "#zonesClic" > ...

Voil. On teste ? Waow!! Trop top!! Pour tester, cliquez sur la gauche de limage... cest la premire page qui souvre. Maintenant, reprenez la troisime page, cliquez sur la droite de limage ... et cest notre deuxime page qui souvre.
Remarque
Lattribut name de la balise map est obligatoire, puisquon en a besoin pour rfrencer le nom du plan dans la balise img.
Systme de coordonnes
Maintenant que vous avez test, je vais vous expliquer comment sont dlimites les zones de cliquage. Un map est dfini selon un systme de coordonnes superpos limage. Ce systme de coordonnes est tel que : tout point est repr par une coordonne horizontale et une coordonne verticale ; le point de coordonnes (0,0) est situ en haut et gauche de limage ; la premire coordonne dun point est sa coordonne horizontale. Plus on sloigne de 0, donc plus on va vers la droite, plus cette coordonne est leve ; la seconde coordonne dun point est sa coordonne verticale. Plus on sloigne de 0, donc plus on va vers le bas, plus cette coordonne est leve. Reprenons la description des deux zones de notre exemple :
<area shape = "rect" cords = "0,0,75,50" href = "premierePage.htm"> <area shape = "rect" cords = "75,0,100,50" href = "deuxiemePage.htm">
Chaque area (cest dire chaque zone du plan) est dcrite par ses coordonnes de dbut et ses coordonnes de fin. Observons la description de la premire area.
<area shape = "rect" cords = "0,0,75,50" href = "premierePage.htm">

Lattribut cords contient, dans lexemple prcdent, 4 coordonnes qui sont en fait deux couples de coordonnes, le couple (0,0) et le couple (75,50).
8 3950 TG PA 00
61
Squence 2
Initiation HTML
Le premier couple de coordonnes, le couple (0,0) indique les coordonnes du point de dpart de la zone, qui est le point le plus en haut et gauche de cette zone. Le second couple de coordonnes, dans notre exemple le couple (75,50), indique les coordonnes du point le plus en bas droite de la zone. Ces coordonnes, combines avec la forme de la zone (forme indique dans lattribut shape, un rectangle dans le cas de notre exemple) dterminent la position, la forme et la taille de la zone. La premire zone stend donc du point (0,0) au point (75,50). ( 0,0 )
( 75,50 ) La seconde zone a la description suivante :
<area shape = "rect" cords = "75,0,100,50" href = "deuxiemePage.htm">

Elle stend donc du point (75,0) au point (100,50). Ce qui nous donne le rsultat suivant : ( 0,0 ) ( 75,00 )
( 75,50 )
( 100,00 )
Zones circulaires Exemple : <area shape = "circle" cords = "x,y,r" href = "...">
Les coordonnees x, y sont celles du centre du cercle, r est le rayon du cercle en pixels.
Polygone
Exemple : <area shape = "poly" cords = "a,b,c,d,e,f,g,h,..." href = "..."> Les points (a,b), (c,d), (e,f), (g,h), reprsentent les coordonnes des diffrents points dfinissant le polygone.
Remarque
Lorsque deux zones sont en recouvrement, la premire zone dfinie a la priorit.
8 3950 TG PA 00
62
Squence 2
Initiation HTML
3F.Les tableaux
3F1.La balise table
La balise <TABLE> permet de dbuter la zone de description du tableau, la balise </TABLE> termine la description du tableau. On peut enrichir la description du tableau laide des attributs de la balise table. Lattribut : Width Border Cellspacing Cellpadding Permet de caractriser : La largeur du tableau (en pixels ou en pourcentage). La taille du cadre entourant le tableau. L espace entre les cellules. Lespace entre le cadre et le contenu des cellules.
Exemple : <table Width="80%" border="20" cellspacing="1" cellpadding="6">
3F2.Le titre du tableau

Un tableau peut possder un titre et dans ce cas, les marqueurs <CAPTION> et </CAPTION> entourent le titre du tableau.
3F3.Les lignes du tableau

Le tableau contient des lignes (roW ). On utilise le marqueur <TR> (pour table row) pour dcrire une ligne de table qui se termine par </TR>. Chaque cellule peut tre caractrise par les attributs suivants : Lattribut : Align Permet de caractriser : Lalignement horizontal de la ligne. Valeurs possibles : "right", "left" ou "center". Exemple : <tr align= "right"> </tr> Lalignement vertical de la ligne. Valeurs possibles : "right", "left" ou "center". Exemple : <tr valign= "right"> </tr> La couleur de fond de la ligne. Exemple : <tr bgcolor="lightblue"> </tr>
Valign
Bgcolor
3F4.Les cellules du tableau et leurs caractristiques

Chaque ligne du tableau est compose de cellules qui contiennent des donnes (data). Les marqueurs <TD> et </TD> entourent le texte qui se trouve dans une cellule. En plus de texte, il est possible dinsrer des images, des liens, des listes mais aussi des tableaux dans une cellule.
8 3950 TG PA 00
63
Squence 2
Initiation HTML
Chaque cellule peut tre caractrise par les attributs suivants : Lattribut : Width Permet de caractriser : La taille de la cellule en pourcentage de la largeur totale du tableau ou en pixels. Exemples : en pourcentage : <td Width="50%"> </td> en pixels : <td Width="50"> </td> Lalignement horizontal de la cellule. Valeurs possibles : "right", "left" ou "center". Exemple : <td align="right"> </td> Lalignement vertical de la cellule. Valeurs possibles : "right", "left" ou "center". Exemple : <td valign="right"> </td> La couleur de fond de la cellule. Exemple: <td bgcolor= "lightblue"> </td>
Align
Valign
Bgcolor
3F5.tendue variable des cellules

Une cellule peut couvrir plusieurs colonnes (colspan) ou plusieurs lignes (rowspan). Exemple : le tableau suivant comporte une cellule sur deux colonnes. Parmi mes lectures, vous trouverez : Mes lectures Mes livres Mes BD
Pour obtenir le tableau ci-dessus, il faut avoir tap le code source suivant dans un document HTML. Vous pouvez vous-mme faire le test, par exemple dans notre troisime page ...
... Parmi mes lectures, vous trouverez <table Width = "40%" border = "2"> <tr> <td align = "center" colspan = "2"> Mes lectures </td> </tr> <tr> <td> Mes livres </td> <td> Mes BD </td> </tr> </table> ...
Autre exemple : cellule sur 2 lignes Mes films DVD Cassettes vido
8 3950 TG PA 00
64
Squence 2
Initiation HTML
Pour obtenir le tableau page prcdente, il faut avoir tap le code source suivant dans notre document HTML ...
... <table Width="40%" border = "3"> <tr> <td rowspan = "2"> Mes films </td> <td> DVD </td> </tr> <tr> <td> Cassettes vido </td> </tr> </table> ...
Voil. Je vous laisse vous amuser avec a.
Quelques ides pour notre site

Sur notre troisme page, pour rinvestir les connaissances ci-dessus, vous pouvez faire des tableaux du style : Mes musiques Auteur Truc Bidule Nodji Dalihay Gantal Choya Titre La vie est chouette Jaime les cookies bien cuits Taimje Chouette est la vie Vinyle Support CD
Puis, pour amliorer le tout, vous pouvez, toujours sur cette page, mettre une tiquette (<a name...) au dbut de chaque tableau. Ensuite, dans notre premire page, vous pouvez reprendre la liste imbrique quon avait faite et mettre des liens (<a href =#....) pour rendre chaque tableau accessible par un clic sur litem de liste correspondant. Vous pouvez aussi rendre vos tableaux accessibles par le biais dune image mappe... bref, vous disposez du matriel ncessaire pour enrichir le site votre convenance. Maintenant, nous passons aux choses encore plus srieuses : les frames.
3G.Les frames
Lutilisation de frames permet de diviser la fentre du navigateur en plusieurs cadres. Une frame (ou page de cadres) est en fait une page contenant des cadres. Chaque cadre est reli un document HTML. Cette organisation permet de subdiviser la fentre de visualisation du navigateur en plusieurs zones, chaque zone permettant la visualisation dun document HTML.
8 3950 TG PA 00
65
Squence 2
Initiation HTML
3G1.Division dune page en cadres

Division horizontale
Essayez le code suivant dans une nouvelle page qui sappelle, disons, quatriemePage : <html> <head> <title> page dessai sur les frames division horizontale </title> </head> <frameset rows = "30%, *"> <frame> <frame> </frameset> </html>
Remarques
On aurait pu indiquer rows = "30%,70%". Le caractre * signifie le reste. Il est possible de diviser en autant de parties quon veut. Exemple : rows = "30 %, 20 %,*" divisera la page en 3 parties. Note : il faut autant de marqueurs <frame> que de partie indiques dans lattribut rows. On peut indiquer les tailles en pixels (dans ce cas, on ne met pas le signe "% "). Une page de cadres ne contient pas de balise <body>.
Division verticale
Toujours dans notre nouvelle page, essayez a ...
<html> <head> <title> page dessai sur les frames division verticale </title> </ head> <frameset cols = "30%, *"> <frame> <frame> </frameset> </html>
Divisions imbriques
Un premier exemple : maintenant, essayez ce qui suit ...
<html> <head> <title> divisions imbriques <frameset cols = "30%, *"> <frame> <frameset rows = "50%, 50%"> <frame> <frame> </frameset> </frameset> </html>
premier essai </title> </head>
8 3950 TG PA 00
66
Squence 2
Initiation HTML
Dans le code prcdent, la seconde colonne est divise en deux lignes gales. Un second exemple : et maintenant, testez a ...
<html> <head> <title> divisions imbriques second essai </title> </head> <frameset cols = "30%, *"> <frameset rows = "50%, 50%"> <frame> <frame> </frameset> <frame> </frameset> </html> Dans ce second exemple, cest la premire colonne qui est divise en deux lignes gales.
3G2.Contenu des cadres

Chaque cadre va contenir un document HTML (ou autre), dont on indique lURL dans la balise <frame> correspondante. Exemple: on va intgrer notre nouvelle page, des ressources (pages, image) cres ou utilises prcdemment
<html> <head> <title> Essais sur les frames </title> </head> <frameset cols = "30%,*"> <frameset rows = "50%, 50%"> <frame src = "premierePage.htm"> <frame src = " mesImages/imageTheme.JPG"> </frameset> <frame src = "deuxiemePage.htm"> </frameset> </html>
On teste. Sympa, non ? Bon, le contenu de nos pages nest pas trs adapt (et mme pas adapt du tout) la cration de cadres, mais a nous permet de voir ce que a donne. Enfin, vous constaterez quand-mme que la disposition du texte est radapte la taille du cadre (on le voit bien pour la premire page, en haut gauche de notre quatrime page). On voit par contre que la taille des images nest pas radapte. Du coup, moi, dans le cadre affichant notre deuxime page, mon tableau est moiti cheval sur mon image, ce qui nest pas dun got exquis.
Remarque
On peut mme, si a nous chante, afficher la mme ressource dans plusieurs cadres de la mme page.
8 3950 TG PA 00
67
Squence 2
Initiation HTML
Je me pose une petite question quand-mme : quand un document comporte un frameset , peut-il comporter autre chose, comme par exemple du texte, hors des cadres ? Essayons tout de suite pour voir. Je reprends lexemple prcdent, et je fais quelques essais. Je mets en gras les modifications. Premier essai
<html> <head> <title> essai sur les frames </title> </head> <body> blabla <frameset cols = "30%,*"> <frameset rows = "50%, 50%"> <frame src = "premierePage.htm"> <frame src = " mesImages/imageTheme.JPG "> </frameset> <frame src = "deuxiemePage.htm"> </frameset> </body> </html>
Dans ce premier cas, le frameset napparat pas, sur la page, on ne voit que blabla. Deuxime essai
<html> <head> <title> essai sur les frames </title> </head> <body> blabla </body> <frameset cols = "30%, *"> <frameset rows = "50%, 50%"> <frame src = "premierePage.htm"> <frame src = " mesImages/imageTheme.JPG "> </frameset> <frame src = "deuxiemePage.htm"> </frameset> </html>
Mme rsultat que dans lessai prcdent.
8 3950 TG PA 00
68
Squence 2
Initiation HTML
Troisime essai
<html> <head> <title> essai sur les frames </title> </head> <body> <frameset cols = "30%, *"> <frameset rows = "50%, 50%"> <frame src = "premierePage.htm"> <frame src = " mesImages/imageTheme.JPG"> </frameset> <frame src = "deuxiemePage.htm"> </frameset> blabla </body> </html>
Encore pareil que les deux essais prcdents. Quatrime essai
<html> <head> <title> essai sur les frames </title> </head> <frameset cols = "30%, *"> <frameset rows = "50%, 50%"> <frame src = "documentPourTests.html"> <frame src = "monSite/mesImages/Nnuphars.jpg"> </frameset> <frame src = "monsite/documentPourTests.html"> </frameset> <body> blabla </body> </html>
L, on ne voit plus blabla et on voit les cadres. Bon, apparemment, cest soit frameset , soit body, mais pas les deux. Et de toute faon, mme si on met du texte sans <body>, on ne le voit pas non plus, alors !!! Donc, la question : Quand un document comporte un frameset, peut-il comporter autre chose, comme par exemple du texte, hors des cadres ?, la rponse est non.
8 3950 TG PA 00
69
Squence 2
Initiation HTML
3G3.La mise en forme des cadres

On peut choisir la mise en forme des cadres laide des attributs disponibles pour la balise frameset , et ceux disponibles pour la balise frame.
Les attributs de la balise <frameset>

Lattribut : border bordercolor Permet de : dterminer la largeur de la bordure. Exemple : <frameset border = "10"> dterminer la couleur de la bordure Exemple : <frameset bordercolor = "yellow">
Les attributs de la balise <frame>

Lattribut : border bordercolor noresize scrolling Permet de : dterminer la largeur de la bordure. Exemple : <frame border = "10"> dterminer la couleur de la bordure. Exemple : <frame bordercolor = "yellow"> interdire linternaute de redimensionner le cadre laide de la souris. Syntaxe : <frame noresize > grer lexistence dun ascenseur vertical pour le cadre. Valeurs possibles : <frame scrolling = "no" > Quel que soit le contenu du cadre, il naura pas dascenseur vertical. <frame scrolling = "yes" > Quel que soit le contenu du cadre, il aura un ascenseur vertical. <frame scrolling = "auto" > Le cadre aura un ascenseur si ncessaire (cest--dire si les informations quil affiche dpassent la taille du cadre). marginWidth marginheight dterminer la marge horizontale (en pixels) sparant le cadre du contenu. Exemple : <frame marginwidth = "20"> dterminer la marge verticale (en pixels) sparant le cadre du contenu. Exemple : <frame marginheight = "20">
Je vous laisse tester a vous-mme tout seuls dans notre quatrime page. Moi jai crit le bout de cours, vous, vous vous chargez de tester tout. Jai une petite flemme, tout dun coup. Il faut dire quil est 2 heures du matin et que je nai plus trop les yeux en face de leurs orbites.
8 3950 TG PA 00
70
Squence 2
Initiation HTML
3G4.Le problme pos par les navigateurs anciens

Gnralement, les navigateurs de version ancienne ne savent pas grer les frames. Comme il faut, lorsquon conoit un site, prvoir toutes les configurations en ce qui concerne les postes clients, il faut prvoir lventualit que certains internautes accdant notre site utilisent des vieilles versions de navigateurs. Pour les navigateurs ne sachant pas afficher les cadres, on dispose des balises <noframes> et </noframes>, dans lesquelles on indique un contenu de remplacement, plac entre les balises <body> et </body>. Le document HTML prend alors la forme gnrale suivante :
... <frameset> ... </frameset> <noframes> <body> On insre ici le contenu afficher pour les navigateurs ne sachant pas grer les frames. </body> </noframes> ...
3G5.Gestion des liens dans les frames

Un cadre (frame) peut afficher, on la vu plus haut, une page HTML. Cette page, affiche dans le cadre, peut contenir des liens. Lorsque linternaute clique sur ce lien, cest pour accder la ressource (un document HTML, une image ou un autre fichier) accessible via ce lien. Lorsque linternaute clique sur le lien, le contenu de la fentre du navigateur est remplac par la ressource rfrence par le lien. On a vu a un peu plus haut dans ce cours, et je vous ai mme dit que vous comprendriez lutilit de certains attributs quand nous aborderions les frames. On y est! Donc, il y a plusieurs solutions: soit la ressource rfrence par le lien saffiche dans une nouvelle page HTML ; soit la ressource rfrence par le lien saffiche dans la page HTML courante, remplaant tout ou partie de la page. Dans ce cas, si la page dorigine est divise en plusieurs cadres et quon veut que la ressource rfrence par le lien ne remplace le contenu que dun des cadres, il faut indiquer dans quel cadre doit tre affiche la ressource rfrence par le lien.
8 3950 TG PA 00
71
Squence 2
Initiation HTML
Pour que la ressource remplace le cadre o figure le lien

On nindique rien de spcial dans le document dcrivant le frameset . Exemple : je reprends, dans notre premire page, le lien permettant daccder notre deuxime page. Pour que, dans le cadre haut gauche, la deuxime page remplace la premire page lorsque linternaute cliquera sur Accder la page suivante, on peut crire <A href = "deuxiemePage.htm" target = "_self"> Accder la page suivante </A> ou bien
<A href = "deuxiemePage.htm" > Accder la page suivante </A>

Testez a fonctionne. Donc, dans le document HTML o est indiqu le lien, on peut, si on veut, indiquer dans le lien la valeur par dfaut de lattribut target du lien, mais les deux syntaxes ci-dessus reviennent exactement au mme.
Pour que la ressource saffiche dans une nouvelle page

Dans le document HTML contenant le lien, il faut complter la description du lien en donnant la valeur _blank lattribut target. <A href = "deuxiemePage.htm" target = "_blank"> Accder la page suivante </A> Je vous laisse tester. Aprs, tout dpend du comportement quon souhaite donner notre site.
Pour que la ressource remplace la fentre courante

<A href = "deuxiemePage.htm" target = "_top"> Accder la page suivante </A>
Pour que la ressource remplace un des autres cadres

Pour que le contenu dun cadre puisse tre remplac par la ressource rfrence par le lien, le cadre doit possder un nom, indiqu dans lattibut name de la balise frame. Exemple: dans notre quatrime page, modifier le cadre concernant notre image comme suit
<frame src = "mesImages/imageTheme.JPG " name = "cadreGaucheBas">

Dans le cas de notre exemple, pour que le cadre cadreGaucheBas affiche la ressource rfrence par le lien, dans lattribut target du lien, il faut indiquer le nom du cadre (ici cadreGaucheBas) qui va afficher la ressource rfrence par le lien. Exemple : donc, dans notre premire page, il faut modifier le lien vers notre deuxime page comme a <A href = "deuxiemePage.htm" target = "cadreGaucheBas"> Accder la page suivante</A> Dans le cas de notre exemple, un clic sur le lien Accder la page suivante aura pour effet dafficher le contenu de deuxiemePage.htm dans cadreBasGauche, quel que soit le cadre dans lequel se trouve le lien Accder la page suivante. Voil, on a vu le principal propos des frames. Il ne vous reste plus qu rinvestir pour amliorer votre site. On va maintenant aborder la dernire partie de ce cours, qui traite des formulaires HTML, et qui nous ouvre les portes de la programmation et du chapitre 3, qui traite du langage javascript. 72
8 3950 TG PA 00
Squence 2
Initiation HTML
3H.Les formulaires HTML

Les formulaires sont des pages qui contiennent des composants graphiques, appels contrles (zone de saisie, liste droulante permettant lutilisateur de choisir une information, cases cocher...), laide desquels linternaute saisit des informations. Le formulaire est ensuite envoy au serveur qui exploitera les informations transmises au moyen dun script ou dun programme. Pour linstant, nous nallons pas tudier lexploitation par le serveur des donnes envoyes, nous aborderons cela lorsque nous en serons la partie sur les scripts sexcutant sur le serveur. Nous allons juste pour linstant explorer les diffrents composants HTML permettant de crer un formulaire.
3H1.La balise <form>

Dans une page HTML, les balises <FORM>... </FORM> dlimitent la description dun formulaire. La balise <FORM> possde 3 attributs : ACTION = URL de destination du formulaire , utilisant le protocole http car pour les autres protocoles, le comportement est indiqu comme indfini par le W3C. METHOD = GET ou POST . Cet attribut dtermine le mode denvoi des informations saisies par linternaute dans le formulaire. Il est recommand de plutt utiliser la mthode POST car les donnes sont encodes donc non visibles. NAME = nom du formulaire pour une ventuelle utilisation ultrieure. Exemple : le code ci-dessous cre un formulaire, vide pour linstant, qui sera envoy au destinataire indiqu dans lattribut action.
<FORM ACTION = "HTTP://adressebidon" METHOD = "POST" NAME = "essai">  </FORM>
3H2.Les composants disponibles

Pour crer un formulaire, on ne dispose pas dun milliard de composants graphiques (on dit des contrles). Dans un formulaire, cest dire entre les balises <form> et </form>, peut-on mettre autre chose que des contrles? Oui, on peut y mettre tout ce quon a vu prcdemment.
Zones de saisie
Dans une page vierge que vous appellerez inscription.htm, essayez le code HTML suivant:
... <HTML> <body> <FORM ACTION = "adresse bidon" METHOD = "POST" NAME = "inscription">  Votre nom : <Input type = "text" name = "nom" maxlength =15 size = 20> </FORM> Je prendrai en compte votre inscription ds sa rception. </body> </html>
8 3950 TG PA 00
73
Squence 2
Initiation HTML
Ouvrez ensuite votre page dans votre navigateur. Cest beau hein! Notre formulaire nous permettra, terme, de crer une liste de personnes qui souhaitent tre prvenues chaque fois quune nouveaut est disponible sur notre site. Bon, cet exemple nous apprend plusieurs choses : pour mettre une zone de saisie dans un formulaire, il faut utiliser la syntaxe. Libell : <Input type = "text" name = "nom de la zone" maxlength = "X"> Une zone de saisie est un contrle "text" ( la place de "text", on peut aussi utiliser "texte"ou "select") ; lattribut maxlength indique le nombre maximum de caractres pouvant tre saisis dans la zone ; lattribut size dtermine la taille de la zone de saisie. Size = 5, donnera la zone la longueur occupe par 5 caractres ; un formulaire peut coexister sur une page avec tout ce quon a dj vu prcdemment, puisque l, jy ai tap du texte, en dehors des balises <form>...</form>.
Autres types de zones de saisie

La balise input permet de crer des zones de saisies particulires : zone de saisie dun mot de passe, dune date, dun URL, Le type mot de passe On complte notre formulaire avec a :
<br> Choisissez-vous un mot de passe (huit caractres) : <Input type = "password" name = "motdepasse" size = "8" >
Avec le type password, linformation saisie nest pas visible, les caractres taps sont tous remplacs par des petits ronds noir. Lattribut size dtermine la longueur de la zone de saisie, ce nest pas le nombre maximum de caractres de linformation saisie. Pour indiquer que le nombre maximum de caractres saisis est 8, dans la description de notre zone de saisie, il faut rajouter lattribut maxlength et lui donner la valeur 8, comme a :
... <Input type = "password" name = "motdepasse" ...

Le type date Rajoutez le bout de code suivant :
size = "8" maxlength = "8">
<br> Indiquez votre date de naissance : <Input type = "date" name = "dateNaiss" >
8 3950 TG PA 00
74
Squence 2
Initiation HTML
Le type URL Si le type indiqu est URL, ds que linternaute valide sa saisie, le navigateur tente daccder la ressource indique dans la zone de saisie.
Zones de texte
Rajoutez le code suivant :
Commentaires : <BR> <TEXTAREA COLS = "40" ROWS = "3" > Donnez-moi des prcisions. </textarea>
...testez. Le contrle textarea permet lutilisateur de saisir par exemple des commentaires sur notre site, de prciser par un texte ses gots en matire de lecture Lattribut cols permet de dterminer la largeur de la zone de texte. Lattribut rows dtermine le nombre de lignes visibles du texte. Dans notre exemple, 3 lignes sont visibles, mais on peut taper un texte faisant plus que 3 lignes et lorsque cest le cas, lascenseur devient actif. Le texte tap entre les balises <textarea> et </textarea> apparat dans la zone de texte.
Cases cocher
Dans notre page inscription.htm, rajoutez, entre les balises <form> et </form>, le code : <br> Cochez si vous tes majeur : <Input type = "checkbox" name = "majeur" value = "vrai"> Puis, dans le navigateur, actualisez laffichage de votre page. Bon, voil, on sait mettre des cases cocher. En HTML, les cases cocher sappellent des checkbox. Lattribut value sert conserver une valeur associe la checkbox, valeur qui pourra tre utilise lorsque nous verrons des langages de programmation permettant denrichir les pages laide de traitements (ds le chapitre prochain, donc). On peut aussi prciser que la checkbox est coche par dfaut, en rajoutant lattribut checked, comme ceci :
<br> Cochez si vous tes majeur : <Input type = "checkbox" name = "majeur" value = "vrai" checked>
Cest coooool, non ?
Boutons radio
Rajoutez le code suivant :
Sexe : <BR> H : <Input type = "radio" name = "sexe" value = "h" checked> F : <Input type="radio" name = "sexe" value = "f">
Testez votre page.
8 3950 TG PA 00
75
Squence 2
Initiation HTML
Le fait que pour les 2 boutons radio, lattribut name a la mme valeur fait que le choix entre les 2 options est exclusif. Pour bien se rendre compte de a, il suffit de modifier lattribut name dune des deux cases option et l, on voit bien que les choix ne sont plus exclusifs, ce qui donne un comportement stupide nos boutons radio : une fois cochs, ils le restent, on ne peut plus les dcocher, et le choix entre les deux nest plus exclusif. Lattribut checked dsigne quel est le bouton radio coch par dfaut.
Listes de choix
Rajoutez a dans notre page inscription :
<br> Je suis plus intress(e) par : <Select name = "preference"> <option> les livres <option> les films <option> la musique </select>
Rafrachissez laffichage de la page et testez-l. Voil, on sait crer des listes de choix non modifiables (ce composant permet lutilisateur de choisir dans la liste propose, mais ne lui permet pas de rajouter des lments dans la liste).
Boutons
HTML propose principalement deux boutons : le bouton RESET : il permet dannuler la saisie ; le bouton SUBMIT : il permet denvoyer les donnes lURL indique dans lattribut action de la balise <form...>. En effet, un formulaire na dintrt que si les donnes sont transmises. Rajoutez le code :
<Input type = "reset" name = "monBoutonAnnuler" value = "Annuler"> <Input type = "submit" name = "monBoutonEnvoyer" value = "Envoyer">
On na pas besoin, avec ces boutons, dcrire le traitement dannulation ou denvoi, a se fait tout seul. Quand on clique sur annuler, cela efface tout ce quon a saisi. Quand on clique sur envoyer, notre navigateur essaie denvoyer les donnes mais comme on a mis une adresse bidon dans lattribut action de notre balise form, cela nous gnre une erreur car notre navigateur essaie douvrir la page adresse bidon, et comme cette page nexiste pas, il nous dit quil ne parvient pas afficher la page. Tout est donc normal. Outre ces deux boutons au comportement prdfini, on peut aussi poser un bouton normal, tout simple, dont on programmera le comportement lorsquon aura vu javascript , au chapitre prochain.
8 3950 TG PA 00
76
Squence 2
Initiation HTML
Pour poser un bouton dont le comportement nest pas prdfini, il faut crire, par exemple :
<Input type = "button" name = "monBouton" value = "Cliquer">
Remarque importante
Depuis la version 4.0 de HTML, pour crer un bouton sur un formulaire, on utilise plutt la syntaxe suivante.
<button type = "button" name = "monBouton" > Cliquez ici </button>

Avec cette syntaxe, le texte du bouton scrit entre la balise ouvrante (<button>) et la balise fermante (</button>), qui est obligatoire. Lavantage de cette syntaxe est, entre autres, de laisser libre lattribut value du button pour y stocker une valeur qui sera envoye au serveur lors de lenvoi du formulaire. Lattribut type peut galement prendre les valeurs reset et submit , qui donnent au bouton le mme rle quavec la syntaxe <input>. Exemples : vous pouvez remplacer un de nos deux boutons par un de ces deux l : <BUTTON name = "boutonEnvoyer" value = "envoyer" type = "submit"> Envoyer </button> <BUTTON name = "boutonAnnuler" value = "annuler" type = "reset"> Annuler </button>
Autre remarque
Quelle que soit la syntaxe utilise, on peut associer au bouton lattribut disabled qui a pour effet de dsactiver le bouton, cest--dire que le bouton ne ragira pas si lutilisateur lui clique dessus. Faites lessai avec :
<BUTTON name = "boutonEnvoyer" value = "envoyer" type = "submit" disabled> Envoyer </button>
On pourra ensuite rendre le bouton actif par programmation, en changeant la valeur de sa proprit disabled.
Lattribut action de la balise form

Cest dans cet attribut que lon indique lURL de la ressource destinataire des informations du formulaire. On a dj vu plus haut que cet URL peut tre ladresse dun serveur. Lorsque linternaute cliquera sur le bouton Envoyer, le formulaire sera envoy ce serveur. Cest un programme sur le serveur qui se chargera de dpouiller et traiter les donnes du formulaire. On ne verra pas cette partie du traitement dans ce fascicule, car cela ncessite lapprentissage dun langage de script pour serveur, que nous aborderons dans le second fascicule.
8 3950 TG PA 00
77
Squence 2
Initiation HTML
4.Bon, et si on faisait un site avec nos pages

Ben oui parce que, pour le moment, on a des pages, des images, mais est-ce bien un site? En fait, un site Web est un dossier (cest--dire un rpertoire), stock sur la machine serveur, et contenant le code source de ses pages ainsi que les ressources complmentaires. Donc, si nos pages et les autres ressources quon utilise sont ranges dans un rpertoire, alors cest que notre site est bien un site. Sauf que pour linstant, notre site, il ny a que nous pour le consulter...
4A.Pour faire de notre site un site Web

Pour que votre site soit accessible via Internet, par des vrais internautes et des vraies internautesses, il faut que vous le mettiez en ligne. Cela vous permettra galement de tester si tout fonctionne lorsque le site est accessible depuis Internet. Pour mettre en ligne un site, il faut dposer le dossier correspondant ce site sur la machine dun hbergeur (un FAI : fournisseur daccs Internet). Cet hbergeur doit tre gratuit (attention, il existe des hbergeurs payants). Renseignez-vous auprs de votre fournisseur daccs Internet, il se peut quil hberge gratuitement votre site. Pour savoir si cest le cas, allez sur le site de votre fournisseur daccs. Les possibilits concernant lhbergement de votre site Web sont gnralement indiques sur une page du site portant un nom comme ma page perso ou mon site perso.
4B.Page par dfaut dun site

Lorsquun internaute tape ou slectionne un URL, et que cet URL ne contient pas le nom dune page (cest--dire que lURL se termine par le nom du dossier contenant le site, sur la machine serveur), cest alors la page par dfaut de ce site qui est envoye linternaute par le serveur HTTP. La page par dfaut dun site est donc la page que linternaute voit safficher lorsquil na pas, dans lURL, indiqu le nom dune page prcise. La page par dfaut nest pas obligatoire, mais recommande. Dans tout site, la page par dfaut sappelle default.htm ou bien index.htm. Nous allons donc renommer notre page premierePage.htm en default.htm ou index.htm.
4C.Redirection dune page vers une autre

Pour, depuis une page, rediriger linternaute vers une autre page, dans la page source, il faut rajouter le code HTML suivant : <HEAD> .....  <META HTTP-EQUIV = "Refresh" CONTENT = "4" ; URL = "URL de la page vers laquelle on redirige"> ....// tester </HEAD>
8 3950 TG PA 00
78
Squence 2
Initiation HTML
4D.Rfrencer notre site

Pour que les internautes trouvent votre site lors de lutilisation dun moteur de recherche, vous pouvez : renseigner les balises HTML prvues cet effet. Voici les balises meta de rfrencement :
<META NAME = "Description" CONTENT = "description de la page"> <META NAME = "Keywords" CONTENT = "liste des mots cls, spars par des virgules">
Ces balises se mettent dans la balise head ; le faire rfrencer (gratuitement) en allant par exemple sur : http://www.annonceur.net
5.Bon, ben, on a fini cette partie du cours

Il ne vous reste plus qu mettre toutes les pages dans un rpertoire et publier votre site pour vrifier son accessibilit. Nous avons, dans cette squence, abord les bases de la conception dun site avec HTML. Dans la squence suivante, nous allons nous sensibiliser avec ce quest un langage de script client, cest--dire sexcutant sur la machine de linternaute. Surtout , ne supprimez pas les pages quon a dveloppes dans la squence 2, car on va sen resservir dans la squence 3. Alors je vous dis tout lheure, au cas o vous souhaiteriez prendre une petite pause avant dattaquer cette squence 3.
8 3950 TG PA 00
79

83950tgpa0007 02

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

83950tgpa0007 02

Transféré par

Droits d'auteur :

Formats disponibles

Initiation HTML

1.Tout dabord, quels outils utiliser dans cette squence ?

diteurs HTML gratuits

2.Prsentation du langage HTML

Les extensions la norme

Ce dont on a besoin pour crire en HTML

Ce quon va voir dans cette squence

3.Les principes de base

3A.Structure de base dun fichier HTML

Que nous apprend ce premier bout de code HTML ?

Cet exemple nous apprend aussi

3B.lments de base dune page HTML

Attributs de la balise <body>

<body bgcolor = "Silver">

<body text = "Blue" bgcolor = "Silver">

Une petite digression sur les couleurs Remarque

Comment fonctionne ce code RGB ?

Quelques exemples de mlanges pas trop loups

Black = "#000000" Green = "#008000" Silver = "#C0C0C0" Lime = "#00FF00"

Gray = "#808080" Olive = "#808000" White = "#FFFFFF" Yellow = "#FFFF00"

Maroon = "#800000" Navy = "#000080" Red = "#FF0000" Blue = "#0000FF"

Purple = "#800080" Teal = "#008080" Fuchsia = "#FF00FF" Aqua = "#00FFFF"

Revenons-en nos attributs

<BODY text = "Blue" bgcolor = "#FFAA00"

topmargin = "20" leftmargin = "50">

3C.Le formatage de texte

La preuve ? essayez a ...

Crer des paragraphes

<p align = center>

Pour aller la ligne

<div <div <div <div

align align align align

left> </div> center> </div> right> </div> justify> </div>

Utiliser des lignes de sparation

Les niveaux de titre

3C2.La mise en forme de texte

Exemple : allez hop, application directe

Actions possibles sur la police de caractres

Pour afficher certains caractres

Le problme des accents

<u> bandes dessin&#233es </u> <br>

3C3.Structuration des informations : les listes

Les listes ordonnes

listes listes listes listes

puces de menus de rpertoires de dfinitions

Les listes puces

listes listes listes listes

puces de menus de rpertoires de dfinitions

Les Les Les Les

liste puces listes de menus listes de rpertoires listes de dfinitions

Les listes de dfinitions

Exemple : le code HTML suivant (qui nest pas taper)...

3C4.Dplacement horizontal du contenu de la page

3C5.En petite conclusion...

3D1.Prrequis la notion de lien : les URI, leur utilit

3D2.les liens externes

<A HREF = "URL de la ressource"> Texte du lien cliquable </A>

<a href = "ftp://serveurFtp/pub/unFichier.txt"> Tlcharger </a>

<a href = "ftp://serveurFtp/pub/"> Lister le rpertoire </a>

3D3. Les liens internes

<A HREF="#Etiquette">Retour au dbut</A>

.. <A HREF="#adresseWebmaster"> Voir le-mail du Webmaster </A> ...

3D4.Les ancres (galement appeles identifiants de fragments)