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: 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 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 : fred@trucmuche.fr? 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