1. Tout d abord, quels outils utiliser dans cette séquence?

Transcription

1 Séquence 2 Ü Contenu 1. Quels outils utiliser dans cette séquence? 2. Présentation du langage HTML 3. Les principes de base Prenez bien le temps de faire toutes les manipulations indiquées. C est en tapant le code qu on intègre tout ce qu il y a à retenir. ça passe par les doigts puis ça remonte en passant par les bras jusqu au cerveau 1. Tout d abord, quels outils utiliser dans cette séquence? Pour créer un site de présentation, il est tout à fait possible d utiliser un éditeur HTML, sans connaître le langage HTML. Je m explique : ce type d outils permet de créer des sites de présentation de manière graphique, et ne nécessitent pas la connaissance du langage HTML. Ceci ne fera pas ici l objet d une séquence. Vous pouvez tout à fait, si vous le souhaitez, vous amuser à créer un site de présentation avec ce type d outils, mais vous n avez pas besoin de mon aide pour cela, ce type de logiciel étant destiné à des non informaticiens. Voici ci-dessous une liste (incomplète, bien sûr) d éditeurs HTML plus ou moins gratuits et plus ou moins performants. À vous de faire votre choix. Note : la liste ci-dessous vous indique parfois l URL à laquelle vous pouvez télécharger les éditeurs HTML. Attention, cette liste est donnée à titre indicatif. Il se peut que les liens que je vous ai indiqués ne soient plus valables. Dans ce cas, utilisez un moteur de recherche pour rechercher la bonne URL. Éditeurs HTML gratuits HTML KIT : ; Script Edit v 2.66 : ; Web Editor v 2.0 : ; Arachnophilia v 5.2 build 1902 : ; 29

2 AceHTML Pro v : ; Webmaster v 3.0 : ; MAX s HTML Beauty++ ME v 1.5 build 3700 : ; Ma Page Web v 2.1 : Hapedit (HTML, Asp, PhP) : très utilisé par mes étudiants de BTS, je vous le recommande ; Ultraedit (PhP, HTML) : même remarque que ci-dessus 1 ; DreamWeaver 2 : c est 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 décidez de faire l acquisition d un ou plusieurs de ces logiciels (plusieurs parce qu ils sont plus ou moins spécialisés), je vous conseille d en prendre un qui fait tout, si possible. Vous pouvez, à ce moment là, l utiliser tout au long de ce support de cours pour développer les TP. Pour ma part, lors des TP, je ne ferai référence à aucun logiciel particulier d édition de site. Pour préparer ces TP, d ailleurs, j utilise notepad, le petit éditeur de texte fourni dans Windows. Vous pouvez utiliser n importe quel autre éditeur de texte, notamment si vous utilisez un autre système d exploitation comme linux ou un système mac. Mais, encore une fois, que cela n empêche pas ceux et celles qui le souhaitent, d utiliser un environnement de développement spécialisé dans la création de sites Web. Où va se situer la différence? Ceux qui choisissent d utiliser un de ces éditeurs peuvent en choisir un qui permette de créer le code source des pages Web et leur contenu à l aide de barres d outils graphiques. Il est cependant possible, avec ces éditeurs, de consulter et modifier le code HTML généré. Ceux qui utilisent un logiciel spécialisé vont également bénéficier d un éditeur de code source spécialisé : cet éditeur saura détecter les erreurs de syntaxe, faire de la coloration syntaxique (exemple : mettre en bleu les instructions Php, en vert les instructions javascript, en rose les chaînes de caractères et en violet les commentaires. Quel beau mélange de couleurs!), exécuter pas à pas, etc. comme un environnement de développement normal (Windev, Delphi, VBA dans Access), mais spécialisé dans les langages pour le Web. Il est vrai qu actuellement, la conception de sites se fait toujours à l aide d un éditeur spécialisé comme ceux cités dans la liste ci-dessus, notamment car le temps de création est moins important avec ces outils qu en tapant le code HTML. Ceci n affranchit pas le concepteur de site de la connaissance du langage HTML et des autres langages de la programmation Web, car ces outils permettent généralement la création de sites de présentation mais nécessitent de compléter ou modifier le code source HTML, en y rajoutant par exemple des instructions en langage de script, afin d enrichir le comportement du site s il est statique, ou afin d en faire un site dynamique ou une application Web. Pour ma part, si je choisis de n utiliser aucun éditeur, c est pour éviter que cela ne devienne une contrainte pour vous. Ainsi, les TP que je vous présente seront identiques quels que soient l éditeur et le système d exploitation que vous utilisez. 30

3 2. Présentation du langage HTML On l a vu précédemment, HTML signifie Hyper Text Markup Language. HTML est un langage de marqueurs (on appelle ça des balises) interprétables 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 c est l application cliente (c est à dire le navigateur) qui s occupe de la visualisation. Pour que, quel que soit le navigateur, la page Web s affiche correctement, il a fallu faire en sorte que tous les navigateurs interprètent le HTML de la même manière, et qu il n existe qu un langage HTML. Donc, il a fallu normaliser ce langage. Un bref historique Le langage HTML (HyperText Markup Language) est dérivé du langage SGML (Standard Generalized Markup Language). HTML est utilisé sur le Web depuis Nous en sommes à la version HTML Les extensions à la norme Les différents éditeurs de logiciels vendant des navigateurs (netscape, Internet explorer) ont tous rajouté leurs propres extensions au langage HTML. Mais, pour qu une page puisse être visualisée par tous les navigateurs, il faut que son code HTML fasse partie de la partie commune à tous les navigateurs, c est à dire la norme. Ce dont on a besoin pour écrire en HTML Dans l absolu, de rien d autre qu un éditeur de texte, puisqu un fichier HTML n est rien d autre qu un fichier texte dans lequel figurent des marqueurs ou balises (tags en anglais) qui seront reconnus par les différents navigateurs. Ce qu on va voir dans cette séquence On va voir les bases. Si on voulait tout voir en détail, il faudrait plusieurs centaines de pages. Pour ceux qui veulent approfondir, vous pouvez vous rendre sur le site : où vous trouverez une traduction française de la norme, ou carrément sur le site du W3C, où vous trouverez la version anglaise (la version originale de la norme), l unique document ayant la valeur de version normative org/tr/1999/rec-html

4 3. Les principes de base Remarques Nous allons créer notre site au fur et à mesure de la présentation des notions, donc vous devez taper dans votre éditeur tout code HTML signalé dans une barrre verticale grise. Pour les balises, on peut utiliser indifféremment des majuscules ou minuscules. 3A. Structure de base d un 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> </HTML> <HEAD> </HEAD> <BODY> <TITLE> Page d accueil du site mes CD, mes livres etc. </TITLE> <!--Le texte et les images seront insérés ici --> Bienvenue sur la page d accueil du site mes CD, mes livres etc. </body> Pour tester cette première page, double-cliquez sur l icône 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 d accueil du site mes CD, mes livres etc. et le texte Bienvenue sur la page d accueil 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. 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 parenthèses. Exemple : la balise <HEAD> qui débute la zone d entête de la page (balise ouvrante), et la balise </HEAD> (balise fermante) qui marque la fin de la zone d en-tête de la page. 32

5 Autre exemple : la balise <TITLE> qui indique le début 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 imbriquée dans la description d autres zones. Exemple : la zone de titre, délimitée par les balises <TITLE> et </TITLE> est imbriquée dans la zone d entête, délimitée par les balises <HEAD> et </HEAD>. Cet exemple nous apprend aussi Que l on peut mettre des commentaires en html. Un commentaire est encadré par <!-- et -->. Lors de la visualisation de la page Web, les commentaires sont ignorés par le navigateur. Exemple de commentaire html : <!--Le texte et les images seront insérés ici --> 3B. Éléments de base d une page HTML Un document (ou une page) HTML est composé de plusieurs parties. En général, on trouve le titre, l entête et le corps. Un ensemble de deux balises permet de délimiter chacune de ces parties (balise de début et balise de fin). Dans un document HTML, généralement, on trouve : le document tout entier situé entre <HTML> et </HTML> ; la zone d en-tête entre <HEAD> et </HEAD> dans laquelle on peut trouver, entre autres, le titre du document (ce qui sera utilisé comme titre de fenêtre dans le navigateur) ; le corps du document entre <BODY> et </BODY>. Nous verrons au fil de ce support ce qu on peut mettre entre ces différentes balises. Remarques Une balise de fin est indiquée par /. Dans la spécification 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 début) permet de paramétrer l objet correspondant. Exemple : dans le code html du fichier premierepage.htm (ou.html), complétez la balise <body> comme suit <body bgcolor = "Silver"> 33

6 Enregistrez la modification, puis, dans votre navigateur, actualisez l affichage de votre page. Voilà, vous voyez que l attribut bgcolor détermine la couleur de fond de votre page. Autre exemple : si au lieu de <body>, on écrit <body background = "monimage.gif">, cela rajoute l image monimage.gif comme image de fond (notez qu ici, il faut que monimage.gif se trouve dans le même répertoire, c est à dire le même dossier que notre page HTML). On peut mettre plusieurs attributs dans une balise. Exemple : dans notre première page, essayez ça <body text = "Blue" bgcolor = "Silver"> voilà, on sait affecter une certaine couleur de fond à notre page, ainsi qu une 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 d indiquer 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 à # pour le noir. Les couleurs sont ici codées sur 6 positions hexadécimales, ce qui revient au même que de dire qu elles sont codées sur 24 positions binaires (24 bits), 8 positions binaires pour définir l intensité de rouge, 8 positions binaires pour définir l intensité de vert, et 8 pour le bleu. Ceci revient encore au même que de dire : les deux premiers chiffres hexadécimaux déterminent la proportion de rouge, les deux chiffres suivants déterminent la proportion de vert, et le deux derniers concernent le bleu. Faisons quelques essais Dans le code de notre fenêtre, remplacez bgcolor = «Silver» successivement par bgcolor = "#FF0000" aïe, mes yeux on a trouvé le rouge. Puis par bgcolor = "#00FF00" ho là là ce vert pomme!! Puis par bgcolor = "#0000FF" il pète ce bleu, hein!! 34

7 Comment fonctionne ce code RGB? À partir de ces 3 couleurs primaires, on peut créer toutes les autres couleurs, c est la proportion de chacune des 3 couleurs qui va déterminer la couleur résultat. C'est le même principe que quand vous mélangiez de la peinture à l école quand vous étiez petits, en moins salissant, mais parfois en plus risqué pour la santé de nos yeux et notre sens de l esthétique. Quelques exemples de mélanges pas trop loupés Essayez "#FFAA00". On a mélangé beaucoup de rouge (FF), avec un peu de jaune/vert (AA), et on n a pas mis de bleu, ce qui nous donne du orange. Essayez aussi "#AAAAAA" vous verrez que ce n est pas loin de notre couleur silver de tout à l heure. Voici ci-dessous quelques noms de couleur et les valeurs numériques correspondantes : Black = "#000000" Gray = "#808080" Maroon = "#800000" Purple = "#800080" Green = "#008000" Olive = "#808000" Navy = "#000080" Teal = "#008080" Silver = "#C0C0C0" White = "#FFFFFF" Red = "#FF0000" Fuchsia = "#FF00FF" Lime = "#00FF00" Yellow = "#FFFF00" Blue = "#0000FF" Aqua = "#00FFFF" Remarque Quand vous indiquez une couleur par son nom, vous pouvez utiliser indifféremment des majuscules ou des minuscules. Revenons-en à nos attributs Il existe également d autres attributs pour la balise body. L attribut topmargin. Il détermine la marge haute du document, c est-à-dire la distance à laquelle va s afficher le contenu par rapport au haut de la page. Exemple : topmargin = "20 ". Ici, j ai mis que la marge haute valait 20. L attribut leftmargin. Il détermine la marge gauche du document. Exemple : leftmargin = "50". Je vous laisse tester l effet de ces attributs sur notre page de test, dont la balise body peut avoir l allure suivante <BODY text = "Blue" bgcolor = "#FFAA00" topmargin = "20" leftmargin = "50"> 3C. Le formatage de texte 3C1. Organisation de l affichage du texte Les sauts de lignes que nous mettons dans le code source d une page HTML ne sont pas interprétés par le navigateur. 35

8 La preuve? essayez ça <HTML> <HEAD> <TITLE> Page d accueil du site mes CD, mes livres etc. </TITLE> </HEAD> <BODY text = "Blue" bgcolor = "#FFAA00" topmargin = "20" leftmargin = "50"> Bienvenue sur la page d accueil du site mes CD, mes livres etc </body> </HTML> puis affichez la page. Convaincu(e)? Pour les sautes de lignes, les paragraphes, etc., des éléments html permettent d organiser l affichage du texte. Créer des paragraphes En modifiant notre première page, essayez ce qui suit (j ai mis les modifications en gras) <HTML> <HEAD> <TITLE> Page d accueil du site mes CD, mes livres etc. </TITLE> </HEAD> <BODY text = "Blue" bgcolor = "#FFAA00" topmargin = "20" leftmargin = "50"> <p>bienvenue sur la page d accueil du site mes CD, mes livres etc </p> Vous allez découvrir ma collection personnelle Bonne visite! </body> </HTML> Une fois que vous avez testé, vous constatez que pour qu un texte constitue un paragraphe, il faut l encadrer avec le couple de balises <p> et </p>. On peut également choisir l alignement 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 résultat bien sûr!! 36

9 Remarque Les paragraphes sont par défaut alignés à gauche. La balise de fin de paragraphe est optionnelle. L indentation de paragraphe : souvenez-vous, on utilise le terme indenter aussi en algo, pour exprimer le fait que l on décale certaines parties d algo. Il est possible d indenter 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 d accueil 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 l alignement et le style courants. Pour cette balise, il n existe pas de balise de fin. Allez, on rajoute un petit saut de ligne dans notre document premierpage.htm(l) <HTML> <HEAD> <TITLE> Page d accueil 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 d accueil du site mes CD, mes livres etc </p> Vous allez découvrir ma collection personnelle<br> Bonne visite! </body> </HTML> et on teste. Ben je ne vois aucun changement, moi!! Ah, mais suis-je sotte, j ai oublié d enregistrer avant d aller rafraîchir l affichage dans mon navigateur, c est pour ça!! J enregistre ma modif dans le bloc-notes, je vais dans mon navigateur, je refraîchis ça y est, cette fois, ma modification est prise en compte dans ma fenêtre. Le navigateur, lorsqu on rafraîchit l affichage d une page, recharge la page depuis l endroit où elle est stockée. Parallèlement à cela, tant qu on n'enregistre pas un fichier, les modifications qu on lui a fait subir restent en mémoire vive, mais ne sont pas inscrites dans la version de fichier qui est stockée sur disque. Du coup, si on rafraîchit une page qu on a modifiée mais dont on n a pas enregistré les modifications, les modifications ne sont pas prises en compte. 37

10 Les balises <div> et </div> (div signifie division) : ces balises jouent à peu près le même rôle que les paragraphes et on peut utiliser les mêmes attributs d alignement. Rappel des attributs d alignement : <div align = left> </div> <div align = center> </div> <div align = right> </div> <div align = justify> </div> La différence par rapport au paragraphe est qu aucun saut de ligne n est généré avant et après une division. Une division permet également de changer «temporairement» de style (d alignement par exemple) à l intérieur d un paragraphe. Allez, on s en rajoute une dans notre page <HTML> <HEAD> <TITLE> Page d accueil 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 d accueil du site <div align = center> Mes CD, mes livres etc </div> </p> Vous allez découvrir ma collection personnelle<br> Bonne visite! </body> </HTML> Utiliser des lignes de séparation La balise <hr> permet de créer une ligne horizontale. On peut enrichir la description de cette ligne à l aide d attributs : attribut color pour une ligne en couleur, Exemple : <hr color = "Aqua"> attribut size pour déterminer l épaisseur 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 booléen, si on le met, c est qu il est vrai, c est donc qu on ne veut pas d ombre. attribut Width pour déterminer la largeur de la ligne, en pourcentage de l écran, Exemple : <hr color = "Aqua" size = "5" noshade Width = "50%"> Note : On peut déterminer la largeur de la ligne en pixels. Exemple : <hr Width = "150"> enfin, si la ligne n est pas aussi large que la page, on peut souhaiter qu elle soit centrée, justifiée, alignée à droite ou alignée à gauche, et on peut utiliser l attribut align, Exemple : <hr color = "Aqua" size = "5" noshade Width = "50%" align = left> 38

11 Et, comme vous venez de le voir, on peut bien sûr combiner ces différents attributs. Allez, nous on se rajoute une petite ligne, comme d habitude, j ai mis en gras les dernières modifications : <HTML> <HEAD> <TITLE> Page d accueil 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 d accueil du site <div align = "center"> Mes CD, mes livres etc </div> </p> Vous allez découvrir ma collection personnelle<br> Bonne visite! <br> <hr color = "Aqua" size = "5" noshade Width = "50%" align = "left"> </body> </HTML> Waow, c est chouette hein!! Récapitulons l ensemble des attributs utilisables. SIZE : épaisseur du trait. WIDTH : largeur du trait (exprimée en pixels ou en pourcentage de la largeur totale de la fenêtre). ALIGN : position du trait dans la fenêtre. NOSHADE : suppression de l ombrage. COLOR : couleur du trait. O La balise fermante, pour <hr> est interdite par le W3C. Les niveaux de titre Dans un document structuré on va trouver des niveaux de titre (ce que l on nomme généralement Titre1, Titre2, etc. dans un traitement de texte). En HTML, ces niveaux s appellent des headers, il y a généralement 6 niveaux de headers (H1 à H6). Les balises <h1>, <h2> <h6> permettent en fait d appliquer des styles prédéfinis servant à organiser des niveaux de titres dans un document. Exemple : allez, on applique ça tout de suite à notre page <HTML> <HEAD> <TITLE> Page d accueil 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 d accueil du site <div align = "center"> Mes CD, mes livres etc </div> </p></h1> <h3>vous allez découvrir ma collection personnelle</h3><br> <h5>bonne visite! </h5><br> <hr color = "Aqua" size = "5" noshade Width = "50%" align = "left"> </body> </HTML> 39

12 3C2. La mise en forme de texte Formatage Balise de début Balise de fin Texte centré <center> </center> Texte en gras <b> ou <strong> </b> ou </strong> Texte en italique <EM> ou <I> </EM> ou </I> Texte souligné <u> </u> Fonte à espacement constant <TT> </TT> Texte barré <STRIKE> </STRIKE> Texte clignotant <BLINK> </BLINK> Mise en indice <SUB> </SUB> Mise en exposant <SUP> </SUP> Exemple : allez hop, application directe <HTML> <HEAD> <TITLE> Page d accueil 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 d accueil du site <div align = center> Mes CD, mes livres etc.</div></p></h1> <h3>vous allez découvrir 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 dessinées </u> <br> <blink> vieux disques vinyle </blink> <br> <h2>c est le plaisir ⁵⁰ <h2><br> </body> </HTML> Vous avez testé? Est-ce que chez vous, ça clignote? Chez moi, pas franchement non, ça ne clignote même pas du tout. Remarque Vous avez vu dans le tableau ci-dessus que plusieurs balises existent pour certains formatages. Cela s explique par le fait qu on 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 différence entre formatage physique et formatage logique? Lors d un formatage logique, la technique utilisée pour la mise en forme (par exemple, pour mettre du texte en gras) est choisie par le navigateur du poste de l internaute. 40

13 Le texte préformaté Pour afficher du texte en respectant les espacements, tabulations, etc., il suffit de l encadrer 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 façon 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 C est cool hein! Actions possibles sur la police de caractères Il est possible de faire varier la taille, la couleur et la police des caractères de tout texte. Pour cela, on utilise l élément <font> et on renseigne ses attributs de taille, de police, de couleur. Augmenter la taille des caractères : on utilise l attribut size. Cela peut se faire : relativement par rapport à la taille standard (généralement 12 points), les valeurs utilisables s échelonnent entre -7 et +7 ; Exemple : <font size = "+5">J augmente la taille de 5</font><p> en indiquant la taille de la police. Exemple : <font size = "10" >Gros mots </font> Choisir la police des caractères : l attribut face. Exemple : <font size = "10" face = "Arial"> Gros mots en Arial</font> Déterminer la couleur des caractères : l attribut 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> 41

14 Pour afficher certains caractères Certains caractères (<, > et &) sont interprétés par les navigateurs. Ben oui, par exemple, les caractères < et > sont interprétés comme des débuts ou des fins de balise. Pour pouvoir afficher ces caractères dans un document HTML, il faut indiquer au navigateur qu il ne doit pas les interpréter et les afficher «tel quel». Il faut donc les mentionner de manière codifiée dans le document où on veut l afficher. Pour afficher le caractère : Il faut taper le code : < &lt > &gt & Le problème des accents &amp Le code de caractères utilisé sur le Web est le code ASCII (7 positions) qui ne permet pas de représenter les caractères accentués. Donc, quel que soit le système client, pour afficher les caractères accentués, on utilise aussi la notation codifiée précédée de &. Le tableau suivant reprend les principaux codages : Pour afficher le caractère : Il faut taper le code : à â ç é è ê ë ï ô ù ü û espace à â ç é è ê ë ï ô ú ü û Que se passe-t-il donc si, au lieu d utiliser ces codes de caractères accentués, on met directement les caractères tel quel? Faites l essai. Vous verrez que sur votre propre machine, si vous tapez à, c est bien à qui s affiche. Si le poste client est configuré de manière à traduire le code numérique de à par à, c est bien à qui s affichera. Alors là, vous vous dites «Mais qu est-ce qu elle raconte?». 42

15 Ce que je veux dire, c est que selon la configuration du poste de l internaute, ça peut être à qui s affiche, mais ça peut aussi être un autre caractère. Sur une machine configurée pour un utilisateur russe par exemple, ou un chinois, ou un utilisateur utilisant un alphabet qui ne contient pas la lettre à, ça m étonnerait que quand un à est tapé dans un document HTML, ce soit un à qui s affiche. Donc, si on veut que le texte de notre page soit correctement lisible par n importe quel internaute, il vaut mieux utiliser les codes des lettres que les lettres elles-mêmes. Ce qui est sûr, c est que c est un peu plus compliqué de taper du texte en utilisant les codes des caractères accentués que les caractères eux-mêmes. Exemple : dans notre document HTML, au lieu de. <h3>vous allez découvrir ma collection personnelle</h3><br> <u> bandes dessinées </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 même texte qu avant, sauf que là, en plus, quelle que soit la configuration de sa machine et la nationalité de l internaute, c est bien des «é» qui s afficheront. Donc, si on veut que notre page soit correctement lisible quel que soit le poste client, il faut utiliser ces codes (c est sûr que ça n est pas très confortable pour nous, les concepteurs, mais quand on développe une application, ce n est pas notre confort qui importe, mais celui de l utilisateur). Remarque il est également possible d afficher un caractère en indiquant son code ASCII étendu (256 caractères codés de 0 à 255), les 128 premiers caractères sont ceux du code ASCII «pas étendu», les 128 suivants dépendent de la page de code utilisée par la machine de l internaute. Pour indiquer qu il s agit d un code ASCII étendu, on précède le code de &#. Exemple : pour afficher le caractère «é» en utilisant son code ASCII, taper &#233, comme ça <u> bandes dessin&#233es </u> <br> 43

16 Bien entendu, dans ce cas, si la machine de l internaute n utilise pas la même page de code que nous, on retombe sur le même problème 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 présenter l information de manière plus claire, plus structurée. Il existe plusieurs sortes de listes : des listes ordonnées (c est-à-dire numérotées), des listes à puces, des listes de définitions, des listes de répertoires. 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 déconseillée par le W3C, donc, nous, on fait ce qu ils disent, c est-à-dire qu on n utilisera pas ce type de listes. Les listes ordonnées Premier exemple : voici le code HTML d une page qui utilise une liste ordonnée. J ai tapé ce code dans le Bloc Note de Windows et je l ai enregistré avec l extension.html. <HTML> <body> <OL> <LI>Les listes à puces <LI>Les listes de menus <LI>Les listes de répertoires <LI>Les listes de définitions </OL> </body> </HTML> Ci-dessous, vous avez la page telle qu elle est visualisée par mon navigateur. 44

17 Explications Le marqueur <OL> débute la liste numérotée, qui se termine par </OL>. Chaque marqueur <LI> est placé devant un élément de liste. Dans le cas de cet exemple, la numérotation se fait automatiquement, débutant à 1. Il est tout à fait possible d imbriquer les listes, en plus la numérotation suit! L attribut type de la balise <ol> peut prendre les valeurs suivantes : Valeurs possibles de l attribut type : La numérotation s affiche avec : TYPE ="I" Des chiffres romains majuscules TYPE = "i" Des chiffres romains minuscules TYPE = "A" Des lettres majuscules TYPE = "a" Des lettres minuscules Autre exemple : allez, on crée 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 découvrir <!-- "ol" signifie "ordonned list" --> <!-- <ol> et </ol> servent à délimiter une liste numérotée --> <!-- le mot clé "start" indique à quel numéro la liste débute --> <ol start = "1"> <!-- <li> et </li> servent à délimiter une entrée dans la liste --> <li> Mes lectures </li> <li> Mes musiques </li> <li> Mes films </li> </ol> 45

18 Les listes à puces Ce sont des listes où chaque élément commence par une puce. Un premier exemple : juste pour vous montrer ce que ça peut donner. Ne le tapez pas, il n est pas précédé d'un trait gris vertical. <HTML> </HTML> <body> </body> <UL> <LI>Les listes à puces <LI>Les listes de menus <LI>Les listes de répertoires <LI>Les listes de définitions </UL> Remarque C est le marqueur <UL> qui précise que c est une liste à puce (unordered list). Voilà ce que donne l exemple ci-dessus : Les liste à puces Les listes de menus Les listes de répertoires Les listes de définitions Par défaut, 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. L attribut 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 ordonnée, pour détailler un peu ce qu on propose sur notre site. Cette fois, tapez cet exemple 46

19 <ol start = "1"> <!--début de la description de l entrée "Mes lectures" --> <li> Mes lectures <!-- "ul" signifie "unordonned list" --> <!-- ul et /ul servent à délimiter une liste à puces --> <!--le mot clé type indique la forme de la puce, ici, un rond --> <ul type = "circle"> <!--ici aussi li et /li délimitent une entrée dans la liste --> <li> Romans </li> <li> BD </li> <!--fin de la liste à puces --> </ul> <!--fin de la description de l entrée "Mes lectures" --> </li> <li> Mes musiques </li> <ul type = "circle"> </ul> <li> Mes films </li> <li> CD </li> <li> Disques vinyle </li> <li> Cassettes audio </li> <ul type = "circle"> </ul> <li>dvd </li> <li> Cassettes vidéo </li> <!--fin de description de la liste ordonnée --> </ol> Voilà, il ne reste plus qu à tester Ça commence à prendre forme. Les listes de définitions Elles servent à présenter des textes sous forme d entrée de dictionnaire : le terme se trouve en appui à gauche et la définition est légèrement indentée. Ce type de présentation s obtient en utilisant le marqueur <DL> pour introduire la liste et </DL> pour la terminer. Chaque entrée du glossaire sera précédée par <DT> et chaque définition commencera par <DD>. Chaque définition peut s étendre sur plusieurs lignes, l indentation sera conservée. 47

20 Exemple : le code HTML suivant (qui n est pas à taper) <HTML> </HTML> <body> </body> <DL> <DT><b>Vacances</b> <dd>moment de détente agréable <BR> <dd>ou <dd>lieu de villégiature au soleil, ou au frais comme on préfère, avec de la bonne eau pour se baigner, ou de la neige si on préfère. <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> donne la superbe page ci-dessous. Bon, là, en ce qui concerne notre site, tout de suite maintenant, je ne vois pas d application directe de cette nouvelle notion. On ne va quand-même pas expliquer aux internautes ce qu est un CD, ils risquent de se vexer en pensant qu on les prend pour des ignares. 48

21 3C4. Déplacement horizontal du contenu de la page Ça c est très rigolo!! La balise marquee permet d organiser le déplacement horizontal de tout texte et/ou d image se trouvant entre <marquee> et </marquee>. Exemple : sur notre page, on va faire bouger notre phrase C est le plaisir 50, en modifiant le code source comme ça </ol> <marquee Width = "50%" scrolldelay = "5" behavior = alternate> <h2>c est le plaisir <sup> 50 <h2><br> </marquee> et voilà, notre texte bouge! Les attributs de la balise marquee : width : l amplitude du mouvement ; scrolldelay : rapidité du mouvement ; behavior : cet attribut peut prendre deux valeurs : alternate (pour provoquer un va et vient dans la zone définie par Width), continue (pour créer déplacement en «sens unique»). Je vous laisse tester les différentes valeurs possibles de ces différents attributs. 3C5. En petite conclusion Bon, on a vu à peu près toutes les bases de la mise en forme de texte. Vous voyez qu on peut déjà faire pas mal de choses dès à présent. Dans la suite, on va aborder des notions qui permettent d aller un peu plus loin dans la structuration d une page, mais aussi d un site. D ailleurs, le paragraphe suivant traite des liens. Ceci va, par exemple, nous permettre de créer une seconde page et nous permettre de la rendre accessible depuis notre première page, à l aide d un lien. 3D. Les liens Les liens sont à la base même du modèle hypertexte. Ils permettent par un simple clic de souris de se déplacer sur une autre page, dans une autre partie d une page, dans un autre fichier et même d appeler un document situé sur un autre serveur ou d envoyer un mail à quelqu un. Dans le cas d un lien vers un fichier, si c est un fichier d extension.html, le navigateur l affichera, sinon si le format du fichier est reconnu (son, image, vidéo, etc.), le navigateur exécutera l application correspondante, enfin si le navigateur ne sait pas trop quoi en faire, une boîte de dialogue s affichera pour proposer la sauvegarde du document (c est comme cela que l on télécharge un logiciel par exemple). La syntaxe générale d un lien est la suivante : <A HREF =..> </A>. 49

22 3D1. Prérequis à la notion de lien : les URI, leur utilité Un URI (Identifiant de Ressource Uniforme) est un outil de référencement des ressources à usage général, il permet de désigner a peu près tous les types de ressources, du simple fichier sur la machine locale, au serveur Web, FTP, etc. Il existe deux catégories de liens bien distinctes : les liens externes et les liens internes. Vous connaissez certainement plutôt le sigle URL (Uniform Ressource Locator), qu on utilise, à tort pour désigner un URI. Les URL forment un sous-ensemble des URI, et concernent les ressources externes accessibles via le Web. Les URI, plus généralistes, désignent un mode de référencement de toute ressource, y compris à l intérieur d une même page et/ou sur la machine locale. L URI d une ressource sert aux documents HTML à localiser cette ressource. En HTML, les URI s utilisent pour beaucoup de choses (on en verra certaines dans ce chapitre, et d autres dans les chapitres ultérieurs, 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) ; créer des images cliquables (MAP et AREA) ; soumettre un formulaire (FORM) ; créer un cadre (FRAME et IFRAME) ; citer une référence externe (Q, BLOCKQUOTE, INS et DEL) ; se reporter aux conventions de métadonnées qui décrivent un document (HEAD). Un URI est généralement de la forme : type de ressource : // adresse ou emplacement / chemin d accès / nom de fichier En fait, un URI est toujours formé de trois parties distinctes : le nom du protocole utilisé pour accéder à la ressource ; le nom de la machine hébergeant la ressource ; le nom de la ressource en question, indiqué sous la forme d un chemin. Exemple : l URI désigne la page des rapports techniques du W3C. Cet URI peut être compris comme suit : la ressource est disponible via le protocole HTTP, hébergée sur la machine nommée et accessible par le chemin /TR. On peut rencontrer d autres systèmes dans les documents HTML, par exemple, comme mailto pour un ou ftp pour le protocole FTP, protocole permettant le transfert de fichier via Internet. 50

23 Autre exemple : on va le faire sur notre première page, tiens. Dans le code source de votre fenêtre, juste avant la balise </body>, rajoutez Pour tout commentaire, envoyez un au <A href = "mailto: @adressebidon.fr">webmaster du site</a>. 3D2. les liens externes Un lien externe permet de référencer une ressource ne faisant pas partie de la page HTML dans laquelle il figure. Exemple : il permet de référencer une image, un fichier à télécharger, une autre page Web etc. Pour insérer 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 apparaît généralement différencié du reste (en bleu ou souligné), et il devient cliquable, permettant ainsi à l internaute, en cliquant sur le lien, d accéder à la ressource référencée. Le type de ressource externe référencée par un URL peut être : Une ressource se trouvant sur un serveur Web. Dans ce cas, l URL commencera par «http ://». Exemple : <a href = " vers club couture<a> Une ressource téléchargeable, se trouvant sur un serveur de transfert de fichier, c est à dire un serveur ftp (File Transfer Protocol). Ce protocole permet de transférer des fichiers d une machine à une autre machine. Dans ce cas, l URL commencera par «ftp : //» Exemple : Un fichier situé sur un serveur FTP <a href = "ftp://serveurftp/pub/unfichier.txt"> Télécharger </a> Le navigateur proposera le téléchargement ou bien il affichera le contenu du fichier en fonction de son paramétrage. Autre exemple : Un répertoire situé sur un serveur FTP <a href = "ftp://serveurftp/pub/"> Lister le répertoire </a> Dans ce cas, le navigateur affichera le contenu du répertoire, ce qui permettra l affichage ou le téléchargement de ses fichiers. Une adresse de messagerie électronique. Dans ce cas, l URL commencera par «mailto :» Exemple : <a href = "mailto: [email protected]"/>envoyer un message à Fred</ a> Un clic sur le lien «Envoyer un message à Fred» ouvre le logiciel de messagerie installé sur le poste de l internaute et lui permet de taper et d envoyer un mail. On peut aussi préciser le sujet du message, ainsi que son contenu : <a href = "mailto : [email protected]? subject = Hello! = Body = COUCOU"/ >Envoyer un message à Fred </a> 51

24 Remarque Dans ces trois premiers cas, on peut parler d URL puisque la ressource est accessible via le Web. Un fichier de la machine locale (c est-à-dire un fichier se trouvant sur la même machine que la page HTML contenant l URI). Dans ce cas, l URI de la ressource ne comporte pas de nom de protocole ni de nom de machine. On indique uniquement, dans l URI, où trouver la ressource à partir de la page contenant l URI. Exemple : supposons qu une page de mon site affiche l image 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 répertoire c :\fred du disque dur local de ma machine, et que la photo du chien se trouve dans le répertoire c :\fred\photos. Pour indiquer l URL de la photo dans ma page, j indiquerai /photos/clebard.jpeg (vous avez remarqué, les séparateurs de répertoires sont des / ). Un autre exemple : supposons maintenant que ma page se trouve toujours dans le répertoire c :\fred, mais que la photo de ce satané teckel en maillot se trouve à la racine du disque dur de ma machine, c est-à-dire dans le répertoire c :. Dans ce cas, pour accéder à la photo depuis ma page, je dois indiquer qu elle se trouve dans le répertoire père du répertoire où se situe ma page, à l aide 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"> Accéder à la page suivante </A> puis testons. Bien entendu, pour le moment, le navigateur nous affiche une page blanche puisqu il n existe pas de fichier s appelant deuxiemepage.htm(l) dans le même répertoire que notre page premierpage.htm(l). Alors qu à cela ne tienne, créons une deuxième page, que nous enregistrons dans le même répertoire que la première sous le nom deuxiemepage.htm. Voici le code source de cette deuxième merveille du monde des concepteurs de sites Web <html> <head> <title> Deuxième page, vide pour le moment </title> </head> <body> </body> </html> 52

25 Si on retourne tester notre première page, cette fois, on voit bien qu on nous affiche notre deuxième page. La preuve, c est qu on retrouve notre titre Deuxième page, vide pour le moment dans la barre de titre du navigateur. 3D3. Les liens internes Les liens internes sont des liens à l intérieur d un document. Ces liens relient entre eux différents points d un même document HTML. Pour réaliser 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 façon suivante : <A HREF = "#Etiquette">Retour au début</a> Ce lien étant cliquable, lorsque l internaute cliquera dessus testez ce que ça fera. Exemple : on va tout de suite appliquer cette nouvelle notion à notre première page. Ce qu on va faire : en haut de la page, on va mettre un lien interne permettant d accéder tout de suite à l adresse du Webmaster (au fait, je ne sais plus trop si je vous ai expliqué ce qu est un Webmaster, Webmestre en français : c est l administrateur du site). On va donc placer une étiquette sur l du Webmaster, et un lien vers cette étiquette en haut de la page. En haut de la page, juste après la balise <body>, on tape.. <A HREF = "#adressewebmaster"> Voir l du Webmaster </A> et maintenant, l étiquette. 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 à : <A href = "mailto: @adressebidon.fr">webmaster du site</a> </A> <br> <A href = "deuxiemepage.htm"> Accéder à la page suivante </A> J ai mis plein de sauts de lignes pour que l adresse soit très très en bas de la page, afin de vérifier que l étiquette fonctionne. Allez, on teste ça Bon, youpi, ça fonctionne. 53

26 3D4. Les ancres (également appelées identifiants de fragments) Les ancres permettent de combiner lien externe et lien interne pour atteindre, via un lien externe, une partie précise dans la page. Pour «poser» une ancre, on utilise la syntaxe qui permet de placer une étiquette : <a name = "nomancre"> </a> Pour référencer l ancre, on indique l URI du document ainsi que le nom de l ancre : <a href = "nomdocument#nomancre"> </a> Autrement dit, certains URI se rapportent à un endroit dans une ressource. Ce genre d URI se termine par un caractère #, suivi par l identifiant d une ancre (appelé identifiant de fragment). Exemple : voici, ci-dessous, un URI qui pointe sur l ancre section2 de la page top.html Autre exemple : dans notre deuxième page, on va se mettre un lien pour accéder à l adresse du Webmaster qui est indiquée dans notre première page. <html> <head> <title> Deuxième page, un peu moins vide </title> </head> <body> <a href = "premierepage.htm#adressewebmaster"> Voir l adresse du Webmaster </ a> </body> </html> faites très attention!! Si vous avez enregistré votre première page avec l extension.htm, vous devez indiquer l extension.htm, sinon, ça marche pas. Même chose si vous l avez appelée 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. L attribut target de la balise href Cet attribut permet de choisir de quelle façon s affichera la ressource référencée par le lien lorsque l internaute cliquera sur le lien. Pour que la ressource remplace la fenêtre 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 défaut de l attribut target du lien, mais la syntaxe ci-dessous revient exactement au même que si on ne valorise pas l attribut target : <a href = "nouvellepage.html" target = "_self">nouvelle page.</a> 54

27 Pour que la ressource remplace la fenêtre courante, on peut utiliser aussi la syntaxe : <a href = "nouvellepage.html" target = "_top">nouvelle page.</a> Vous comprendrez la différence entre les valeurs _top et _self de la balise target quand, ci-dessous, on abordera les frames (c est-à-dire les cadres). Retenez pour le moment que pour une page HTML classique, on dispose des 3 façons précédentes pour faire en sorte que la ressource remplace la fenêtre où figure le lien. Pour que la ressource s affiche dans une nouvelle page Dans le document HTML contenant le lien, il faut compléter la description du lien en donnant la valeur _blank à l attribut target. <a href = "nouvellepage.html" target = "_blank"> Nouvelle page. </a> Exemple : testons tout de suite cela dans notre site en complétant, dans notre première page, le lien vers la deuxième page de la façon suivante <A href = "deuxiemepage.htm" target = "_blank"> Accéder à la page suivante </A> Dès qu on teste, on voit bien que la deuxième page s ouvre mais pas à la place de la première. 3D6. Couleurs des liens Selon qu il n a pas encore été consulté, qu il a déjà été consulté ou encore que l internaute lui clique dessus, un lien, qu il soit interne ou externe (<A HREF = > </A>), aura 3 couleurs différentes. Il est possible de modifier une ou plusieurs de ces 3 couleurs, en rajoutant des attributs dans la balise <body> du document : Lien Couleur par défaut Attribut à utiliser pour modifier la couleur Exemple non consulté bleu link Link = "Red" déjà consulté rose vlink Vlink = "Silver" cliqué rouge alink Alink = "Red" Note : l expression «couleur par défaut» signifie qu il s agit de la couleur du lien lorsqu on ne modifie pas ses attributs de couleur. Voilà, on a vu l essentiel sur les liens. Maintenant, passons à un thème assez lié aux liens, et cher à beaucoup de gadgeto-men et gadgeto-girls. Je veux parler de l utilisation d images dans les documents HTML. 55

28 3E. Utilisation d images dans les documents HTML 3E1. Les différents types d images Les navigateurs reconnaissent généralement deux formats d images : Les images au format GIF (Graphics Interchange Format). Ces images sont stockées dans des fichiers d extension.gif. Ce sont des images de type Bitmap (c est-à-dire qu elles sont composées de points de couleurs), disposant d une palette de 256 couleurs, codées à l aide d un algorithme de compression sans perte d information. Créé par Compuserve, ce standard est très utilisé mais, le «petit» nombre de couleurs utilisables donne un effet de trame à l affichage (l œil humain est capable de différencier 16,7 millions de couleurs différentes, palette proposée par la norme TrueColor). Ce standard est à préférer pour les images (dessins, logos, graphiques) comportant peu de couleurs. L avantage des images gif est de pouvoir être affichées progressivement, rendant ainsi l attente moins pénible. On parle de format entrelacé (une ligne sur deux s affiche, puis l image se complète au fur et à mesure). L intérêt principal du format gif entrelacé est d être moins frustrant pour l utilisateur disposant d un modem à bas débit lors de l affichage de l image. Ben oui quoi, y en a encore qui n ont pas l ADSL. Tenez, moi, pour prendre un exemple au hasard, eh ben chez moi, on n a pas encore l ADSL, ni d autre accès à haut débit. Autre intérêt des images gif : elles peuvent avoir un fond transparent. JPEG ou JPG : Joint Photographic Experts. Image de type Bitmap 16 Millions de couleurs, compression avec perte d informations (cette «perte» est volontaire et permet aux fichiers d avoir une plus petite taille), par conséquent, ce format est bien adapté pour les documents photographiques couleur. Les images jpeg sont d une taille plus réduite que les gif et permettent un rendu de meilleure qualité. 3E2. Comment afficher une image dans un document HTML? Voici la syntaxe générale utilisée pour insérer une image dans une page : <IMG SRC = "URI de l image"> IMG SRC indique qu il s agit d une instruction d affichage d une image. L URI de l image indique l endroit où est stockée l image, que l image soit sur une machine accessible via Internet (URL de la forme http ://.), ou sur le disque dur d une machine accessible via un réseau autre qu Internet, ou encore, sur le disque dur local de la machine utilisée par l internaute. Exemple : supposons que la page référençant l image soit dans le répertoire monsite, et que les images que j utilise pour mon site soient dans le sous-répertoire /monsite/mesimages. Si je veux afficher l image logo.jpg dans ma page, j écrirai : <IMG SRC = "/mesimages/logo.jpg"> 56

29 O Là aussi, il faut bien respecter les extensions de fichier, sinon, l image ne sera pas trouvée par le navigateur. Allez, application : choisissez ou créez une image dont le thème est en relation avec notre site. Pour qu on soit tous bien d accord, appelez-la imagetheme.jpg. Nous allons rajouter cette image sur notre deuxième page, comme ça, elle sera moins vide qu elle ne l est actuellement. Dans le code source de notre deuxième page, rajoutez <br> <IMG SRC = "/mesimages/imagetheme.jpg"> </body> Alors, viens voir si ça marche? Ah ben non, j ai pas d image, j ai un pauvre petit carré avec une croix rouge dedans. Comment ça se fait ça? Ah!!! D accord, c est parce que j ai mis un / tout au début. Il ne faut pas en mettre, puisque le sous-répertoire mesimages est directement accessible depuis le répertoire où se trouve ma page. Je corrige <br> <IMG SRC = "mesimages/imagetheme.jpg"> </body> Cette fois, ça fonctionne, mon image s affiche sous le lien vers l adresse du Webmaster. 3E3. Positionnement d une image dans un texte Une image peut se trouver n importe où dans le corps du texte. Une image peut être intégrée dans une liste quel que soit son type (ordonnée, à puces, etc.). Par défaut, le texte qui suit une image est aligné sur le bas de l image. On peut modifier cela en utilisant l attribut ALIGN, pour lequel il existe 4 valeurs : TOP, MIDDLE, RIGHT ou BOTTOM (BOTTOM est la valeur par défaut de l attribut align). Alignement du texte sur le haut de l image Alignement sur le milieu de l image <img align = top src = > <img align = middle src = > Image à droite de l écran <img align = right src = > Exemple : j ai envie de rajouter une légende à mon image. Alors j écris <IMG SRC = "mesimages/imagetheme.jpg"> Cette magnifique photo résume à merveille tous les thèmes abordés par mon site. 57

30 Et je teste. Oh c est moche!! Bon j essaie diverses solutions, et pour une raison de goût, je choisis <a href = "premierepage.htm#adressewebmaster"> Voir l adresse du Webmaster </ a> <br> <br> <br> <IMG SRC = "mesimages/imagetheme.jpg" align = right > Cette magnifique photo résume à merveille tous les thèmes abordés par mon site 3E4. Choix de la taille d une image On peut utiliser les attributs height et Width de la balise img pour modifier la taille de l image d origine. Tenez, moi par exemple, mon image imagetheme est énorme, elle occupe quasimment toute la page et ça ne me plaît pas. Je m en vais la rétrécir un peu. Exemple : j essaie <IMG height = 32 SRC = "mesimages/imagetheme.jpg" align = right> Cette magnifique photo résume à merveille tous les thèmes abordés par mon site Non, là, c est ridicule, elle est minuscule. L unité doit être le pixel. Ce que j aimerais, c est que sa largeur occupe à peu près la moitié de la largeur de ma page. Bon, je change <IMG height = 420 SRC = "mesimages/imagetheme.jpg" align = right> Cette magnifique photo résume à merveille tous les thèmes abordés par mon site oui, là, ça me va. Remarque Si on modifie une seule des deux caractéristiques (hauteur ou largeur), l autre caractéristique est automatiquement modifiée de manière proportionnelle. 3E5. Remplacement d une image par du texte Certains navigateurs ne permettent pas l affichage d images. D autre part, le chargement des images prend beaucoup de temps et certains navigateurs possèdent une option qui permet de ne charger que le texte. Il est donc souhaitable, si l on veut que son document garde une certaine cohérence, de toujours prévoir un texte de remplacement pour une image. L attribut ALT permet d afficher un texte lorsque l image n est pas chargée par le navigateur, mais en plus, elle affiche une bulle d aide lors du passage de la souris sur l image. Exemple : complétons la description de notre image <IMG height = 420 SRC = "mesimages/imagetheme.jpg" align = right alt = "Thèmes abordés par ce site"> Cette magnifique photo résume à merveille tous les thèmes abordés par mon site pour tester, je passe au-dessus de l image avec ma souris. Ah oui, on voit la bulle d aide. 58

31 3E6. Modification du fond d écran à l aide d une image On en a déjà parlé plus haut (dans le paragraphe intitulé Éléments de base d une page HTML), mais comme on est au paragraphe sur les images, je vous fais une petite piqûre de rappel. Il est également intéressant de placer une image en fond d écran, cela s obtient en paramétrant la balise <body> avec l attribut BACKGROUND et le nom du fichier contenant l image entre double quotes (". "). 3E7. Possibilités d animation Il est possible d animer les images à l aide de deux techniques : utiliser des gifs animés. 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 animés». Ces gifs animés sont en fait une succession d images gif qui se répètent 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 l image bouge aussi. <img src = "images/ordichapeau.gif"> </marquee> si vous voulez, faites-le sur notre image. 3E8. Les images réactives Les paragraphes précédents ont montré comment afficher des images, comment gérer les liens dans un document, on peut donc aborder ce qui fait la richesse des documents hypertextes : les images réactives. Une image réactive va permettre, lorsque l utilisateur va cliquer dessus, de charger un autre document, d exécuter 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 d accès à l image cliquable"></a> Exemple : tiens, pour notre site, quand l internaute clique sur l image, on va faire en sorte que ça nous ramène à la première page. <a href = "premierepage.htm"> <IMG height = 420 SRC = "mesimages/imagetheme.jpg" align = right alt = "Thèmes abordés par ce site"> </a> Cette magnifique photo résume à merveille tous les thèmes abordés par mon site 59

32 Bon ça marche, mais ça ne me satisfait pas entièrement. Je voudrais que quand on clique sur l image, ça nous amène à notre liste de thèmes. Dans la description de la première page, il faut donc créer une ancre, appelons-la ancrethemes. On va la mettre sur le texte Sur ce site, vous allez découvrir J encadre donc ce bout de texte avec l ancre. Ca donne <A NAME = "ancrethemes">sur ce site, vous allez découvrir</a> Maintenant, je vais compléter le code source de la deuxième page <a href = "premierepage.htm#ancrethemes"> <IMG height = 420 SRC = "mesimages/imagetheme.jpg" align = right alt = "Thèmes abordés par ce site"> </a> Cette magnifique photo résume à merveille tous les thèmes abordés par mon site Et voilà. 3E9. Mieux que les images réactives, les images mappées Mieux, mais plus compliqué aussi. Une image mappée est une image découpée en plusieurs zones, chaque zone étant cliquable et référençant un lien différent. Pour réaliser ça, il existe une balise, la balise map, qui permet de définir un plan superposable à l image. Ce plan est décomposable en plusieurs zones appelées area, chaque zone correspondant à une partie de l image. Les zones cliquables peuvent prendre trois formes différentes : forme d un rectangle ; forme d un cercle ; forme d un polygône. Vous pouvez tester ça si vous voulez. Créez une troisième page sur laquelle vous allez faire ce test. Supposons que vous appeliez cette page troisiemepage.htm. Découpage en zones de forme rectangulaire Le code source ci-dessous vous montre un exemple de création d un plan à l aide de la balise map. Pour le tester, tapez-le dans la partie <body> de votre troisième 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> 60

33 Le plan une fois décrit à l aide des balises map et area, il faut indiquer quelle est l image concernée par ce découpage. En supposant que sur cette troisième page, vous mettiez une image s appelant imageclic.gif, vous devez indiquer que cette image est mappée et qu elle utilise le map s appelant zonesclic en tapant, dans le code source de notre troisième page <img src = "imageclic.gif" usemap = "#zonesclic" > Voilà. On teste? Waow!! Trop top!! Pour tester, cliquez sur la gauche de l image c est la première page qui s ouvre. Maintenant, reprenez la troisième page, cliquez sur la droite de l image et c est notre deuxième page qui s ouvre. Remarque L attribut name de la balise map est obligatoire, puisqu on en a besoin pour référencer le nom du plan dans la balise img. Système de coordonnées Maintenant que vous avez testé, je vais vous expliquer comment sont délimitées les zones de cliquage. Un map est défini selon un système de coordonnées superposé à l image. Ce système de coordonnées est tel que : tout point est repéré par une coordonnée horizontale et une coordonnée verticale ; le point de coordonnées (0,0) est situé en haut et à gauche de l image ; la première coordonnée d un point est sa coordonnée horizontale. Plus on s éloigne de 0, donc plus on va vers la droite, plus cette coordonnée est élevée ; la seconde coordonnée d un point est sa coordonnée verticale. Plus on s éloigne de 0, donc plus on va vers le bas, plus cette coordonnée est élevée. 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 (c est à dire chaque zone du plan) est décrite par ses coordonnées de début et ses coordonnées de fin. Observons la description de la première area. <area shape = "rect" cords = "0,0,75,50" href = "premierepage.htm"> L attribut cords contient, dans l exemple précédent, 4 coordonnées qui sont en fait deux couples de coordonnées, le couple (0,0) et le couple (75,50). 61

34 Le premier couple de coordonnées, le couple (0,0) indique les coordonnées du point de départ de la zone, qui est le point le plus en haut et à gauche de cette zone. Le second couple de coordonnées, dans notre exemple le couple (75,50), indique les coordonnées du point le plus en bas à droite de la zone. Ces coordonnées, combinées avec la forme de la zone (forme indiquée dans l attribut shape, un rectangle dans le cas de notre exemple) déterminent la position, la forme et la taille de la zone. La première zone s étend 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 s étend donc du point (75,0) au point (100,50). Ce qui nous donne le résultat suivant : ( 0,0 ) ( 75,00 ) ( 75,50 ) ( 100,00 ) Zones circulaires Exemple : <area shape = "circle" cords = "x,y,r" href = ""> Les coordonnéees 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), représentent les coordonnées des différents points définissant le polygone. Remarque Lorsque deux zones sont en recouvrement, la première zone définie a la priorité. 62

35 3F. Les tableaux 3F1. La balise table La balise <TABLE> permet de débuter la zone de description du tableau, la balise </TABLE> termine la description du tableau. On peut enrichir la description du tableau à l aide des attributs de la balise table. L attribut : Permet de caractériser : Width Border Cellspacing Cellpadding La largeur du tableau (en pixels ou en pourcentage). La taille du cadre entourant le tableau. L espace entre les cellules. L espace 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 posséder 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 décrire une ligne de table qui se termine par </TR>. Chaque cellule peut être caractérisée par les attributs suivants : L attribut : Permet de caractériser : Align Valign Bgcolor L alignement horizontal de la ligne. Valeurs possibles : "right", "left" ou "center". Exemple : <tr align = "right"> </tr> L alignement 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> 3F4. Les cellules du tableau et leurs caractéristiques Chaque ligne du tableau est composée de cellules qui contiennent des données (data). Les marqueurs <TD> et </TD> entourent le texte qui se trouve dans une cellule. En plus de texte, il est possible d insérer des images, des liens, des listes mais aussi des tableaux dans une cellule. 63

36 Chaque cellule peut être caractérisée par les attributs suivants : L attribut : Permet de caractériser : Width Align Valign Bgcolor 3F5. Étendue variable des cellules 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> L alignement horizontal de la cellule. Valeurs possibles : "right", "left" ou "center". Exemple : <td align = "right"> </td> L alignement 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> 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-même faire le test, par exemple dans notre troisième page Parmi mes lectures, vous trouverez <table Width = "40%" border = "2"> <tr> <td align = "center" colspan = "2"> </tr> <tr> <td> Mes livres </td> <td> Mes BD </td> </tr> </table> Mes lectures </td> Autre exemple : cellule sur 2 lignes Mes films DVD Cassettes vidéo 64

37 Pour obtenir le tableau page précédente, il faut avoir tapé le code source suivant dans notre document HTML <table Width = "40%" border = "3"> </table> <tr> </tr> <td rowspan = "2"> Mes films </td> <td> DVD </td> <tr> <td> Cassettes vidéo Voilà. Je vous laisse vous amuser avec ça. Quelques idées pour notre site </td> </tr> Sur notre troisème page, pour réinvestir les connaissances ci-dessus, vous pouvez faire des tableaux du style : Mes musiques Auteur Titre Support Truc La vie est chouette CD Bidule J aime les cookies bien cuits Nodji Dalihay Taimje Vinyle Gantal Choya Chouette est la vie Puis, pour améliorer le tout, vous pouvez, toujours sur cette page, mettre une étiquette (<a name) au début de chaque tableau. Ensuite, dans notre première page, vous pouvez reprendre la liste imbriquée qu on avait faite et mettre des liens (<a href = #.) pour rendre chaque tableau accessible par un clic sur l item de liste correspondant. Vous pouvez aussi rendre vos tableaux accessibles par le biais d une image mappée bref, vous disposez du matériel nécessaire pour enrichir le site à votre convenance. Maintenant, nous passons aux choses encore plus sérieuses : les frames. 3G. Les frames L utilisation de frames permet de diviser la fenêtre 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 fenêtre de visualisation du navigateur en plusieurs zones, chaque zone permettant la visualisation d un document HTML. 65

38 3G1. Division d une page en cadres Division horizontale Essayez le code suivant dans une nouvelle page qui s appelle, disons, quatriemepage : <html> <head> <title> page d essai sur les frames division horizontale </title> </head> <frameset rows = "30%, *"> <frame> <frame> </frameset> </html> Remarques On aurait pu indiquer rows = "30%,70%". Le caractère «*» signifie «le reste». Il est possible de diviser en autant de parties qu on veut. Exemple : rows = "30 %, 20 %,*" divisera la page en 3 parties. Note : il faut autant de marqueurs <frame> que de partie indiquées dans l attribut 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 d essai sur les frames division verticale </title> </ head> <frameset cols = "30%, *"> <frame> <frame> </frameset> </html> Divisions imbriquées Un premier exemple : maintenant, essayez ce qui suit <html> <head> <title> divisions imbriquées premier essai </title> </head> <frameset cols = "30%, *"> <frame> </frameset> </html> <frameset rows = "50%, 50%"> <frame> <frame> </frameset> 66

39 Dans le code précédent, la seconde colonne est divisée en deux lignes égales. Un second exemple : et maintenant, testez ça <html> <head> <title> divisions imbriquées second essai </title> </head> <frameset cols = "30%, *"> <frameset rows = "50%, 50%"> <frame> <frame> </frameset> <frame> </frameset> </html> Dans ce second exemple, c est la première colonne qui est divisée en deux lignes égales. 3G2. Contenu des cadres Chaque cadre va contenir un document HTML (ou autre), dont on indique l URL dans la balise <frame> correspondante. Exemple : on va intégrer à notre nouvelle page, des ressources (pages, image) créées ou utilisées précédemment <html> <head> <title> Essais sur les frames </title> </head> <frameset cols = "30%,*"> </frameset> </html> <frameset rows = "50%, 50%"> </frameset> <frame src = "premierepage.htm"> <frame src = " mesimages/imagetheme.jpg"> <frame src = "deuxiemepage.htm"> On teste. Sympa, non? Bon, le contenu de nos pages n est pas très adapté (et même pas adapté du tout) à la création de cadres, mais ça nous permet de voir ce que ça donne. Enfin, vous constaterez quand-même que la disposition du texte est réadaptée à la taille du cadre (on le voit bien pour la première page, en haut à gauche de notre quatrième page). On voit par contre que la taille des images n est pas réadaptée. Du coup, moi, dans le cadre affichant notre deuxième page, mon tableau est à moitié à cheval sur mon image, ce qui n est pas d un goût exquis. Remarque On peut même, si ça nous chante, afficher la même ressource dans plusieurs cadres de la même page. 67

40 Je me pose une petite question quand-même : 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 l exemple précédent, 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 n apparaît pas, sur la page, on ne voit que blabla. Deuxième 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> Même résultat que dans l essai précédent. 68

41 Troisième 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 précédents. Quatrième essai <html> <head> <title> essai sur les frames </title> </head> <frameset cols = "30%, *"> </frameset> <body> blabla </body> </html> <frameset rows = "50%, 50%"> <frame src = "documentpourtests.html"> <frame src = "monsite/mesimages/nénuphars.jpg"> </frameset> <frame src = "monsite/documentpourtests.html"> Là, on ne voit plus blabla et on voit les cadres. Bon, apparemment, c est soit frameset, soit body, mais pas les deux. Et de toute façon, même 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 réponse est non. 69

42 3G3. La mise en forme des cadres On peut choisir la mise en forme des cadres à l aide des attributs disponibles pour la balise frameset, et ceux disponibles pour la balise frame. Les attributs de la balise <frameset> L attribut : Permet de : border bordercolor Les attributs de la balise <frame> L attribut : Permet de : border bordercolor noresize scrolling marginwidth marginheight déterminer la largeur de la bordure. Exemple : <frameset border = "10"> déterminer la couleur de la bordure Exemple : <frameset bordercolor = "yellow"> déterminer la largeur de la bordure. Exemple : <frame border = "10"> déterminer la couleur de la bordure. Exemple : <frame bordercolor = "yellow"> interdire à l internaute de redimensionner le cadre à l aide de la souris. Syntaxe : <frame noresize > gérer l existence d un ascenseur vertical pour le cadre. Valeurs possibles : <frame scrolling = "no" > Quel que soit le contenu du cadre, il n aura pas d ascenseur 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 nécessaire (c est-à-dire si les informations qu il affiche dépassent la taille du cadre). déterminer la marge horizontale (en pixels) séparant le cadre du contenu. Exemple : <frame marginwidth = "20"> déterminer la marge verticale (en pixels) séparant le cadre du contenu. Exemple : <frame marginheight = "20"> Je vous laisse tester ça vous-même tout seuls dans notre quatrième page. Moi j ai écrit le bout de cours, vous, vous vous chargez de tester tout. J ai une petite flemme, tout d un coup. Il faut dire qu il est 2 heures du matin et que je n ai plus trop les yeux en face de leurs orbites. 70

43 3G4. Le problème posé par les navigateurs anciens Généralement, les navigateurs de version ancienne ne savent pas gérer les frames. Comme il faut, lorsqu on conçoit un site, prévoir toutes les configurations en ce qui concerne les postes clients, il faut prévoir l éventualité que certains internautes accédant à 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 générale suivante : <frameset > </frameset> <noframes> <body> On insère ici le contenu à afficher pour les navigateurs ne sachant pas gérer les frames. </body> </noframes> 3G5. Gestion des liens dans les frames Un cadre (frame) peut afficher, on l a vu plus haut, une page HTML. Cette page, affichée dans le cadre, peut contenir des liens. Lorsque l internaute clique sur ce lien, c est pour accéder à la ressource (un document HTML, une image ou un autre fichier) accessible via ce lien. Lorsque l internaute clique sur le lien, le contenu de la fenêtre du navigateur est remplacé par la ressource référencée par le lien. On a vu ça un peu plus haut dans ce cours, et je vous ai même dit que vous comprendriez l utilité de certains attributs quand nous aborderions les frames. On y est! Donc, il y a plusieurs solutions : soit la ressource référencée par le lien s affiche dans une nouvelle page HTML ; soit la ressource référencée par le lien s affiche dans la page HTML courante, remplaçant tout ou partie de la page. Dans ce cas, si la page d origine est divisée en plusieurs cadres et qu on veut que la ressource référencée par le lien ne remplace le contenu que d un des cadres, il faut indiquer dans quel cadre doit être affichée la ressource référencée par le lien. 71

44 Pour que la ressource remplace le cadre où figure le lien On n indique rien de spécial dans le document décrivant le frameset. Exemple : je reprends, dans notre première page, le lien permettant d accéder à notre deuxième page. Pour que, dans le cadre haut gauche, la deuxième page remplace la première page lorsque l internaute cliquera sur Accéder à la page suivante, on peut écrire <A href = "deuxiemepage.htm" target = "_self"> Accéder à la page suivante </A> ou bien <A href = "deuxiemepage.htm" > Accéder à 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 défaut de l attribut target du lien, mais les deux syntaxes ci-dessus reviennent exactement au même. Pour que la ressource s affiche dans une nouvelle page Dans le document HTML contenant le lien, il faut compléter la description du lien en donnant la valeur _blank à l attribut target. <A href = "deuxiemepage.htm" target = "_blank"> Accéder à la page suivante </A> Je vous laisse tester. Après, tout dépend du comportement qu on souhaite donner à notre site. Pour que la ressource remplace la fenêtre courante <A href = "deuxiemepage.htm" target = "_top"> Accéder à la page suivante </A> Pour que la ressource remplace un des autres cadres Pour que le contenu d un cadre puisse être remplacé par la ressource référencée par le lien, le cadre doit posséder un nom, indiqué dans l attibut name de la balise frame. Exemple : dans notre quatrième 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 référencée par le lien, dans l attribut target du lien, il faut indiquer le nom du cadre (ici cadregauchebas) qui va afficher la ressource référencée par le lien. Exemple : donc, dans notre première page, il faut modifier le lien vers notre deuxième page comme ça <A href = "deuxiemepage.htm" target = "cadregauchebas"> Accéder à la page suivante </A> Dans le cas de notre exemple, un clic sur le lien Accéder à la page suivante aura pour effet d afficher le contenu de deuxiemepage.htm dans cadrebasgauche, quel que soit le cadre dans lequel se trouve le lien Accéder à la page suivante. Voilà, on a vu le principal à propos des frames. Il ne vous reste plus qu à réinvestir pour améliorer votre site. On va maintenant aborder la dernière 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

45 3H. Les formulaires HTML Les formulaires sont des pages qui contiennent des composants graphiques, appelés contrôles (zone de saisie, liste déroulante permettant à l utilisateur de choisir une information, cases à cocher), à l aide desquels l internaute saisit des informations. Le formulaire est ensuite envoyé au serveur qui exploitera les informations transmises au moyen d un script ou d un programme. Pour l instant, nous n allons pas étudier l exploitation par le serveur des données envoyées, nous aborderons cela lorsque nous en serons à la partie sur les scripts s exécutant sur le serveur. Nous allons juste pour l instant explorer les différents composants HTML permettant de créer un formulaire. 3H1. La balise <form> Dans une page HTML, les balises <FORM> </FORM> délimitent la description d un formulaire. La balise <FORM> possède 3 attributs : ACTION = «URL de destination du formulaire», utilisant le protocole http car pour les autres protocoles, le comportement est indiqué comme indéfini par le W3C. METHOD = «GET» ou «POST». Cet attribut détermine le mode d envoi des informations saisies par l internaute dans le formulaire. Il est recommandé de plutôt utiliser la méthode POST car les données sont encodées donc non visibles. NAME = nom du formulaire pour une éventuelle utilisation ultérieure. Exemple : le code ci-dessous crée un formulaire, vide pour l instant, qui sera envoyé au destinataire indiqué dans l attribut action. <FORM ACTION = " METHOD = "POST" NAME = "essai"> <!--insérer ici la description du formulaire, c est à dire les contrôles qu il contient --> </FORM> 3H2. Les composants disponibles Pour créer un formulaire, on ne dispose pas d un milliard de composants graphiques (on dit des contrôles). Dans un formulaire, c est à dire entre les balises <form> et </form>, peut-on mettre autre chose que des contrôles? Oui, on peut y mettre tout ce qu on a vu précédemment. 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"> <!--insérer ici la description du formulaire, c est à dire les contrôles qu il contient --> Votre nom : <Input type = "text" name = "nom" maxlength = 15 size = 20> </FORM> Je prendrai en compte votre inscription dès sa réception. </body> </html> 73

46 Ouvrez ensuite votre page dans votre navigateur. C est beau hein! Notre formulaire nous permettra, à terme, de créer une liste de personnes qui souhaitent être prévenues à chaque fois qu une 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 contrôle "text" (à la place de "text", on peut aussi utiliser "texte»"ou "select") ; l attribut maxlength indique le nombre maximum de caractères pouvant être saisis dans la zone ; l attribut size détermine la taille de la zone de saisie. Size = 5, donnera à la zone la longueur occupée par 5 caractères ; un formulaire peut coexister sur une page avec tout ce qu on a déjà vu précédemment, puisque là, j y ai tapé du texte, en dehors des balises <form></form>. Autres types de zones de saisie La balise input permet de créer des zones de saisies particulières : zone de saisie d un mot de passe, d une date, d un URL, Le type «mot de passe» On complète notre formulaire avec ça : <br> Choisissez-vous un mot de passe (huit caractères) : <Input type = "password" name = "motdepasse" size = "8" > Avec le type password, l information saisie n est pas visible, les caractères tapés sont tous remplacés par des petits ronds noir. L attribut size détermine la longueur de la zone de saisie, ce n est pas le nombre maximum de caractères de l information saisie. Pour indiquer que le nombre maximum de caractères saisis est 8, dans la description de notre zone de saisie, il faut rajouter l attribut maxlength et lui donner la valeur 8, comme ça : <Input type = "password" name = "motdepasse" size = "8" maxlength = "8"> Le type date Rajoutez le bout de code suivant : <br> Indiquez votre date de naissance : <Input type = "date" name = "datenaiss" > 74

47 Le type URL Si le type indiqué est «URL», dès que l internaute valide sa saisie, le navigateur tente d accéder à la ressource indiquée dans la zone de saisie. Zones de texte Rajoutez le code suivant : Commentaires : <BR> <TEXTAREA COLS = "40" ROWS = "3" > Donnez-moi des précisions. </textarea> testez. Le contrôle textarea permet à l utilisateur de saisir par exemple des commentaires sur notre site, de préciser par un texte ses goûts en matière de lecture L attribut cols permet de déterminer la largeur de la zone de texte. L attribut rows détermine 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 c est le cas, l ascenseur devient actif. Le texte tapé entre les balises <textarea> et </textarea> apparaît 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 l affichage de votre page. Bon, voilà, on sait mettre des cases à cocher. En HTML, les cases à cocher s appellent des checkbox. L attribut value sert à conserver une valeur associée à la checkbox, valeur qui pourra être utilisée lorsque nous verrons des langages de programmation permettant d enrichir les pages à l aide de traitements (dès le chapitre prochain, donc). On peut aussi préciser que la checkbox est cochée par défaut, en rajoutant l attribut checked, comme ceci : <br> Cochez si vous êtes majeur : <Input type = "checkbox" name = "majeur" value = "vrai" checked> C est 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. 75

48 Le fait que pour les 2 boutons radio, l attribut name a la même valeur fait que le choix entre les 2 options est exclusif. Pour bien se rendre compte de ça, il suffit de modifier l attribut name d une 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 cochés, ils le restent, on ne peut plus les décocher, et le choix entre les deux n est plus exclusif. L attribut checked désigne quel est le bouton radio coché par défaut. Listes de choix Rajoutez ça dans notre page inscription : <br> Je suis plus intéressé(e) par : <Select name = "preference"> </select> <option> les livres <option> les films <option> la musique Rafraîchissez l affichage de la page et testez-là. Voilà, on sait créer des listes de choix non modifiables (ce composant permet à l utilisateur de choisir dans la liste proposée, mais ne lui permet pas de rajouter des éléments dans la liste). Boutons HTML propose principalement deux boutons : le bouton RESET : il permet d annuler la saisie ; le bouton SUBMIT : il permet d envoyer les données à l URL indiquée dans l attribut action de la balise <form>. En effet, un formulaire n a d intérêt que si les données sont transmises. Rajoutez le code : <Input type = "reset" name = "monboutonannuler" value = "Annuler"> <Input type = "submit" name = "monboutonenvoyer" value = "Envoyer"> On n a pas besoin, avec ces boutons, d écrire le traitement d annulation ou d envoi, ça se fait tout seul. Quand on clique sur annuler, cela efface tout ce qu on a saisi. Quand on clique sur envoyer, notre navigateur essaie d envoyer les données mais comme on a mis une adresse bidon dans l attribut action de notre balise form, cela nous génère une erreur car notre navigateur essaie d ouvrir la page «adresse bidon», et comme cette page n existe pas, il nous dit qu il ne parvient pas à afficher la page. Tout est donc normal. Outre ces deux boutons au comportement prédéfini, on peut aussi poser un bouton normal, tout simple, dont on programmera le comportement lorsqu on aura vu javascript, au chapitre prochain. 76

49 Pour poser un bouton dont le comportement n est pas prédéfini, il faut écrire, par exemple : <Input type = "button" name = "monbouton" value = "Cliquer"> Remarque importante Depuis la version 4.0 de HTML, pour créer un bouton sur un formulaire, on utilise plutôt la syntaxe suivante. <button type = "button" name = "monbouton" > Cliquez ici </button> Avec cette syntaxe, le texte du bouton s écrit entre la balise ouvrante (<button >) et la balise fermante (</button>), qui est obligatoire. L avantage de cette syntaxe est, entre autres, de laisser libre l attribut value du button pour y stocker une valeur qui sera envoyée au serveur lors de l envoi du formulaire. L attribut type peut également prendre les valeurs reset et submit, qui donnent au bouton le même rôle qu avec 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 utilisée, on peut associer au bouton l attribut disabled qui a pour effet de désactiver le bouton, c est-à-dire que le bouton ne réagira pas si l utilisateur lui clique dessus. Faites l essai 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 propriété disabled. L attribut action de la balise form C est dans cet attribut que l on indique l URL de la ressource destinataire des informations du formulaire. On a déjà vu plus haut que cet URL peut être l adresse d un serveur. Lorsque l internaute cliquera sur le bouton Envoyer, le formulaire sera envoyé à ce serveur. C est un programme sur le serveur qui se chargera de dépouiller et traiter les données du formulaire. On ne verra pas cette partie du traitement dans ce fascicule, car cela nécessite l apprentissage d un langage de script pour serveur, que nous aborderons dans le second fascicule. 77

50 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 (c est-à-dire un répertoire), stocké sur la machine serveur, et contenant le code source de ses pages ainsi que les ressources complémentaires. Donc, si nos pages et les autres ressources qu on utilise sont rangées dans un répertoire, alors c est que notre site est bien un site. Sauf que pour l instant, notre site, il n y 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 déposer le dossier correspondant à ce site sur la machine d un hébergeur (un FAI : fournisseur d accès à Internet). Cet hébergeur doit être gratuit (attention, il existe des hébergeurs payants). Renseignez-vous auprès de votre fournisseur d accès à Internet, il se peut qu il héberge gratuitement votre site. Pour savoir si c est le cas, allez sur le site de votre fournisseur d accès. Les possibilités concernant l hébergement de votre site Web sont généralement indiquées sur une page du site portant un nom comme «ma page perso» ou «mon site perso». 4B. Page par défaut d un site Lorsqu un internaute tape ou sélectionne un URL, et que cet URL ne contient pas le nom d une page (c est-à-dire que l URL se termine par le nom du dossier contenant le site, sur la machine serveur), c est alors la page par défaut de ce site qui est envoyée à l internaute par le serveur HTTP. La page par défaut d un site est donc la page que l internaute voit s afficher lorsqu il n a pas, dans l URL, indiqué le nom d une page précise. La page par défaut n est pas obligatoire, mais recommandée. Dans tout site, la page par défaut s appelle default.htm ou bien index.htm. Nous allons donc renommer notre page premierepage.htm en default.htm ou index.htm. 4C. Redirection d une page vers une autre Pour, depuis une page, rediriger l internaute vers une autre page, dans la page source, il faut rajouter le code HTML suivant : <HEAD>.. <!-- redirection vers la page dont l URL est indiqué au bout de 4 secondes --> <META HTTP-EQUIV = "Refresh" CONTENT = "4" ; URL = "URL de la page vers laquelle on redirige">.// à tester </HEAD> 78

51 4D. Référencer notre site Pour que les internautes trouvent votre site lors de l utilisation d un moteur de recherche, vous pouvez : renseigner les balises HTML prévues à cet effet. Voici les balises meta de référencement : <META NAME = "Description" CONTENT = "description de la page"> <META NAME = "Keywords" CONTENT = "liste des mots clés, séparés par des virgules"> Ces balises se mettent dans la balise head ; le faire référencer (gratuitement) en allant par exemple sur : 5. Bon, ben, on a fini cette partie du cours Il ne vous reste plus qu à mettre toutes les pages dans un répertoire et à publier votre site pour vérifier son accessibilité. Nous avons, dans cette séquence, abordé les bases de la conception d un site avec HTML. Dans la séquence suivante, nous allons nous sensibiliser avec ce qu est un langage de script client, c est-à-dire s exécutant sur la machine de l internaute. Surtout, ne supprimez pas les pages qu on a développées dans la séquence 2, car on va s en resservir dans la séquence 3. Alors je vous dis à tout à l heure, au cas où vous souhaiteriez prendre une petite pause avant d attaquer cette séquence 3. 79

52