Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Support tutoriel : Débuter HTML5, CSS3 et JavaScript - Tome 1

183 visualizaciones

Publicado el

Commencez vos premiers pas avec HTML 5

Lors de cette formation vous allez :
- Maîtriser les langages HTML et CSS,
- Créer des pages web en HTML et CSS,
- Structurer une page web,
- Connaître le fonctionnement du couple HTML5 et CSS3.

Explorez le tutoriel par ici:
https://www.smartnskilled.com/tutoriel/formation-en-ligne-debuter-html-css-et-javascript-tome-1

Publicado en: Educación
  • .DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... .DOWNLOAD PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... .DOWNLOAD EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... .DOWNLOAD doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... .DOWNLOAD PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... .DOWNLOAD EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... .DOWNLOAD doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Sé el primero en recomendar esto

Support tutoriel : Débuter HTML5, CSS3 et JavaScript - Tome 1

  1. 1. 1 HTML 5 CSS3 JavaScript Tome 1 Michel Martin
  2. 2. 2 Aucune représentation ou reproduction, même partielle, autre que celles prévues dans l’article L. 122-5 2° et 3°a) du code de la propriété intellectuelle ne peut être faite sans l’autorisation expresse de Mediaforma ou, le cas échéant, sans le respect des modalités prévues dans l’article L. 122-10 dudit code. Il est également interdit de vendre ou de donner cet eBook, ni les vidéos qui vont avec. Aidez-moi à lutter contre le piratage et le vol en me contactant sur : admin@mediaforma.com Vos informations personnelles (nom, adresse et e-mail) ne seront aucunement divulguées ni publiées. Publié par Mediaforma Auteur : Michel Martin Copyright © 2012 Mediaforma est une marque déposée Tous droits réservés
  3. 3. 3 D'AUTRES RESSOURCES SUR HTML5/CSS3/JavaScript Le pack HTML5 / CSS3 est disponible sur le site Mediaforma. Cliquez sur l'image pour en savoir plus. Vous le trouverez également au format ePub avec et sans vidéos : Je suis également l'auteur du Guide de survie HTML5 / CSS3 aux éditions Pearson. Cliquez sur l'image pour en savoir plus.
  4. 4. 4 Contenu LES BASES DU LANGAGE HTML ............................................................................................ 16 Le langage HTML ............................................................................................................................. 7 Configuration nécessaire................................................................................................................. 8 Quel(s) navigateur(s) utiliser ? ....................................................................................................... 9 Squelette minimal d'une page HTML........................................................................................... 10 L'en-tête d'un document ................................................................................................................ 12 En-tête et référencement............................................................................................................... 14 Langue du document ..................................................................................................................... 14 PREMIERES BALISES HTML..................................................................................................... 16 Lignes et paragraphes ................................................................................................................... 16 Des titres dans le document ......................................................................................................... 18 Gras, italique et souligné............................................................................................................... 21 Alignement des paragraphes........................................................................................................ 24 Séparateurs horizontaux ............................................................................................................... 25 MISE EN FORME........................................................................................................................... 31 Taille des caractères...................................................................................................................... 31 Couleur des caractères.................................................................................................................. 32 Couleurs étendues ......................................................................................................................... 34 Couleurs hexadécimales ............................................................................................................... 35 Indice et exposant........................................................................................................................... 36 Listes à puces ................................................................................................................................. 36 Listes numérotées .......................................................................................................................... 39 Listes sur plusieurs niveaux.......................................................................................................... 42 TECHNIQUES PARTICULIERES................................................................................................ 45 Caractères particuliers................................................................................................................... 45 Caractères non proportionnels ..................................................................................................... 46 Ne pas interpréter le code HTML................................................................................................. 49 LIENS............................................................................................................................................... 52 Liens hypertextes............................................................................................................................ 52 Liens et ancres................................................................................................................................ 53 Destination de l'ouverture.............................................................................................................. 54 Liens de téléchargement ............................................................................................................... 55 Lien vers une adresse e-mail........................................................................................................ 56
  5. 5. 5 IMAGES ........................................................................................................................................... 59 Les formats d'images du Web ...................................................................................................... 59 Insérer une image dans un document......................................................................................... 60 Une infobulle sur une image ......................................................................................................... 60 Redimensionner une image.......................................................................................................... 62 Aligner une image........................................................................................................................... 63 Rendre une image cliquable ......................................................................................................... 65 Images réactives – une première approche............................................................................... 67 Plus loin avec les images réactives............................................................................................. 68 Couleur d'arrière-plan .................................................................................................................... 72 Couleurs par défaut........................................................................................................................ 73 Image d'arrière-plan ....................................................................................................................... 74 Ne pas répéter l'image d'arrière-plan .......................................................................................... 75 Image à arrière-plan transparent.................................................................................................. 76 TABLEAUX ..................................................................................................................................... 78 Une première approche des tableaux ......................................................................................... 78 Choisir la forme de la bordure d'un tableau................................................................................ 79 Une bordure pour chaque cellule du tableau ............................................................................. 80 Définir la largeur des cellules........................................................................................................ 82 Définir la hauteur des cellules....................................................................................................... 84 Aligner les données dans les cellules ......................................................................................... 86 Etendre une cellule sur plusieurs colonnes ou sur plusieurs lignes ....................................... 87 Ajouter un titre dans un tableau ................................................................................................... 89 Espacer les cellules entre elles .................................................................................................... 91
  6. 6. 6 INTRODUCTION Cette série vidéo va vous montrer comment construire des pages Web de toutes pièces et les assembler pour créer des sites Web légers et compatibles avec les dernières normes du Web. Si vous n'avez aucune connaissance en programmation HTML/CSS/JavaScript, je vous rassure tout de suite, cette série est tout à fait adaptée à votre profil, puisqu'elle démarre de zéro. Dans un premier temps, vous apprendrez le langage HTML dans son ensemble, puis, petit à petit, les spécificités du HTML5. Progressivement, des styles CSS3 y seront introduits. Puis vous apprendrez à rendre vos pages interactives avec JavaScript. Au fur et à mesure des rubriques, vos connaissances iront croissantes et vous serez à même de réaliser de superbes pages Web. J'espère vous avoir mis l'eau à la bouche… Ce premier volet va vous initier à la programmation HTML dans son ensemble. Commençons sans plus attendre.
  7. 7. 7 LES BASES DU LANGAGE HTML Le langage HTML Commençons par le commencement. HTML est l'acronyme (l'abréviation si vous préférez) de HyperText Markup Language. En français, on pourrait traduire HTML par "langage de marquage hypertexte". Comme ce nom le laisse supposer, HTML est donc un langage de programmation constitué de marqueurs. Il est particulièrement bien adapté à la manipulation de liens hypertextes. Allons un peu plus loin. Les "marqueurs" sont aussi appelés "balises". Ils consistent un ensemble de mots encadrés par les signes "<" et ">". Ainsi par exemple <html> et <body> sont deux balises HTML. Les balises ouvertes doivent être fermées. Par exemple, la balise <html> définit le début d'un document HTML. Pour la fermer, vous utiliserez la balise </html>. Faites attention à l'ordre dans lequel vous fermez les balises. Ce code est par exemple incorrect : <html> <body> </html> </body> En effet, la balise <body> étant déclarée après la balise <html>, on peut dire qu'elle en "fait partie". Il faut donc fermer la balise <body> avant la balise <html>. Le code à utiliser est le suivant : <html> <body> </body> </html> Un dernier point avant de terminer cette rubrique. Dans l'exemple précédent, la balise <body></body> est imbriquée dans la balise <html></html>. On dira que <body> est l'enfant (ou le descendant) de <html>. Pour matérialiser cela dans le code, les balises <body> et </body> seront décalées (on dit aussi indentées) vers la droite comme ceci : <html> <body> </body> </html>
  8. 8. 8 Configuration nécessaire Les pages Web peuvent être écrites indifféremment sur un ordinateur qui fonctionne sous Windows, Mac OS X ou Linux. Vous pouvez utiliser une application évoluée telle que le traitement de texte Word, ou encore une application dédiée à l'écriture de pages Web telle qu'Artisteer. Dans cette formation, j'ai choisi de vous montrer comment créer des pages Web en utilisant un simple éditeur de texte. Si vous utilisez le système d'exploitation Windows, vous pourriez utiliser le Bloc-Notes de Windows, mais je vous conseille vraiment de passer au niveau supérieur en téléchargeant l'application Notepad++. Entièrement gratuite, cette application reconnaît les balises HTML et les change leur couleur afin de faciliter la compréhension du code. D'autre part, l'indentation des balises est bien plus simple à mettre en œuvre dans Notepad++ que dans le Bloc-Notes. Pour télécharger Notepad++, rendez-vous sur la page http://notepad-plus-plus.org/fr/, cliquez sur Téléchargement puis sur le lien correspondant à la dernière version Installer disponible. Il suffit alors d'exécuter le fichier téléchargé pour installer l'application. Pour lancer l'application Notepad++ sous Windows 7 ou Vista, cliquez sur Démarrer, tapez Notepad dans la zone de texte Rechercher et cliquez sur Notepad++ dans la partie supérieure du menu Démarrer.
  9. 9. 9 Pour lancer Notepad++ sous Windows XP, cliquez sur Démarrer, sur Tous les programmes, sur Notepad++ puis sur Notepad++. Si vous utilisez le système d'exploitation Mac OS X ou Linux, je vous conseille de télécharger un éditeur de texte à coloration syntaxique. Vous trouverez sans peine des applications de ce type en tapant "macintosh éditeur coloration syntaxique" ou "linux éditeur coloration syntaxique" dans votre moteur de recherche préféré. Si vous n'avez pas envie de chercher, vous pouvez télécharger le programme jEdit, tant sous Macintosh que sous Linux. Quel(s) navigateur(s) utiliser ? Plusieurs acteurs se partagent le monde des navigateurs Web :  Sous Windows : Internet Explorer, Google Chrome, Mozilla Firefox, Safari et Opera.  Sous Macintosh : Safari, Opera, Google Chrome et Mozilla Firefox.  Sous Linux : Google Chrome, Mozilla Firefox et Opera. Pourquoi pas me direz-vous ! Malheureusement, tout ce petit monde n'interprète pas toutes les instructions HTML/CSS de la même manière et il arrive que le rendu diffère d'un navigateur à l'autre. Dans la mesure du possible, je vous suggère d'installer tous les navigateurs compatibles avec votre système d'exploitation et de tester votre code sur chacun d'entre eux. Internet Explorer : http://windows.microsoft.com/fr-FR/internet-explorer/products/ie/home Google Chrome : https://www.google.com/chrome/ Mozilla Firefox : http://www.mozilla.org/fr/firefox/
  10. 10. 10 Safari : http://www.apple.com/fr/safari/download/ Opera : http://www.opera.com/browser/ Squelette minimal d'une page HTML Voici la structure minimale d'une page HTML 5 : <!DOCTYPE html> <html> <head> <head> <body> </body> </html> La balise <!DOCTYPE> doit toujours apparaître en premier. Elle indique au navigateur les règles d'écriture utilisées dans le code. Cette première ligne indique que la version 5 du langage HTML sera utilisée. Dans les versions précédentes, la balise <!DOCTYPE> était bien plus complexe. Mais cela fait partie du passé, et vous utiliserez uniquement cette version simplifiée. La balise <html> matérialise le début du document HTML, et la balise </html> la fin de ce document. Les balises <head> et </head> délimitent l'en-tête du document. Vous verrez ce qui peut être placé entre ces deux balises dans une autre rubrique. Enfin, les balises <body> et </body> délimitent le corps du document. Tout ce qui est écrit entre ces deux balises apparaîtra dans le navigateur Web. Lancez la commande Enregistrer dans le menu Fichier, sélectionnez Hyper Text Markup Language dans la liste Type, donnez le nom squelette à la page, choisissez le dossier de stockage du document et cliquez sur Enregistrer. Déroulez le menu Exécution et lancez la commande :  Launch in IE pour ouvrir ce document dans Internet Explorer ;  Launch in Chrome pour ouvrir ce document dans Google Chrome ;  Launch in Firefox pour ouvrir ce document dans Mozilla Firefox ;  Launch in Safari pour ouvrir ce document dans Safari. Bien entendu, ces commandes supposent que les navigateurs correspondants sont installés sur votre ordinateur. Dans le cas contraire, elles n'auront aucun effet.
  11. 11. 11 Comme vous pouvez le voir, rien ne s'affiche. Entrez du texte entre les balises <body> et </body>. Ici par exemple, nous entrons le texte "Bonjour". Sauvegardez le document avec la commande Enregistrer dans le menu Fichier ou avec le raccourci clavier Ctrl+S. Remarque Si vous n'avez pas l'habitude des raccourcis clavier, sachez le raccourci Ctrl+S est obtenu en maintenant enfoncée la touche Ctrl, en appuyant puis en relâchant la touche S, puis en relâchant la touche Ctrl. Cela a l'air compliqué, mais une fois que le mécanisme est compris, il est difficile de s'en passer ! Lancez à nouveau la commande Launch in IE dans le menu Exécuter. Cette fois-ci, le texte "Bonjour" est affiché dans le navigateur.
  12. 12. 12 Bravo, vous venez de créer votre premier document HTML5 ! L'en-tête d'un document L'en-tête du document est délimité par les balises <head> et </head>. Il est généralement utilisé pour :  définir le titre du document ;  décrire le contenu du document et lui associer un ou plusieurs mots-clés ;  insérer du code CSS et/ou JavaScript. Dans cette rubrique, nous allons nous intéresser au premier point. Le titre du document est affiché dans l'onglet actif du navigateur. Attention à ne pas choisir un titre trop long, sans quoi il sera tronqué. Le titre est également utilisé pour référencer la page dans les moteurs de recherche. Il est donc judicieux de choisir un titre le plus complet possible, ou du moins, qui représente le contenu de la page d'une façon aussi complète que possible. Etant donné que peu d'internautes s'intéressent aux informations affichées dans les onglets du navigateur, j'ai tendance à vous conseiller de ne considérer que l'aspect moteur de recherche du titre. Définissez donc un titre propre à chaque page et limitez sa taille à 70 caractères, car les titres des pages affichés dans les moteurs de recherche ne dépassent pas cette limite. Mais au fait, comment définit-on un titre ?
  13. 13. 13 Vous utiliserez pour cela la balise <title></title> : Appuyez sur Ctrl+S pour sauvegarder le document puis sur Alt+Ctrl+Maj+I pour l'afficher dans Internet Explorer. Comme vous pouvez le voir, le titre est tronqué : D'autre part, il faut bien avouer que les mots choisis ne sont pas optimisés en ce qui concerne le référencement. Vous auriez pu choisir quelque chose comme "Formation HTML5 - La balise title".
  14. 14. 14 En-tête et référencement Comme il a été dit dans la rubrique précédente, l'en-tête est également utilisé pour définir des informations spécifiques au référencement de la page. Vous définirez en particulier : - un ou plusieurs mots-clés en rapport avec le contenu de la page dans la balise<meta type="keywords">. Ces mots-clés seront utilisés pour sélectionner votre page lorsqu'un internaute les utilisera comme critère de recherche. Il est donc important de bien les choisir et, si possible, de les faire concorder avec certains mots de la balise de titre. - un descriptif de la page dans la balise <meta type="description">. C'est ce descriptif qui sera affiché dans les résultats de recherche. Supposons par exemple que les mots clés formation, HTML5, head, en-tête, référencement et moteurs de recherche correspondent à la page que vous voulez référencer. Vous utiliserez la balise <meta> suivante : <meta name="keywords" content="formation, HTML5, head, en-tête, référencement, moteurs de recherche"> Supposons que vous vouliez utiliser le texte suivant pour décrire votre page Web : "Cette page montre comment définir des informations dans une balise meta pour décrire une page HTML". Vous utiliserez la balise <meta> suivante : <meta name="description" content="Cette page montre comment définir des informations dans une balise meta pour décrire une page HTML"> Langue du document Pour qu'une page soit bien référencée par les moteurs de recherche, il est important de préciser la langue utilisée. Pour cela, vous devez insérer une balise <meta> dans l'en-tête du document (pause) et un attribut lang dans la balise <html>.
  15. 15. 15
  16. 16. 16 PREMIERES BALISES HTML Lignes et paragraphes Dans la rubrique précédente, vous avez vu à quel point il était simple d'afficher un texte dans un document HTML : il suffit en effet de taper ce texte entre les balises <body> et </body>. Vous allez maintenant écrire plusieurs lignes de texte les unes sous les autres. Ici, nous écrivons "Ce texte est affiché dans le document" sur une ligne. Nous sélectionnons cette ligne avec la souris, nous la copions dans le presse-papiers avec la commande Copier dans le menu Edition, puis nous la dupliquons plusieurs fois avec la commande Coller dans le menu Edition, ou mieux, avec le raccourci clavier Ctrl+V. Sauvegardez le document avec la commande Enregistrer dans le menu Fichier ou avec le raccourci clavier Ctrl+S. Lancez la commande Launch in IE dans le menu Exécution. Comme vous le voyez, les lignes s'affichent les unes à la suite des autres. Peu importe si elles sont affichées sur plusieurs lignes dans le code : les passages à la ligne ne sont pas pris en compte dans le navigateur. Pour indiquer que le texte doit s'afficher sur une autre ligne, vous utiliserez les balises <br /> et <p> </p>. La balise <br /> provoque un passage à la ligne. Quant au texte encadré par les balises <p> et </p>, il est suivi par un saut de paragraphe. Pour bien voir la différence entre ces deux balises, nous insérons un <br /> à la fin de la ligne 6 et nous encadrons les lignes 9 et 10 par les balises <p> et </p>.
  17. 17. 17 Le document est sauvegardé avec le raccourci clavier Ctrl+S et affiché dans Internet Explorer avec la commande Launch in IE dans le menu Exécution, ou mieux, avec le raccourci Alt+Ctrl+Maj+I. Je vous engage à tester ce document dans les autres navigateurs, en utilisant les commandes correspondantes dans le menu Exécution. Comme vous le voyez, il y a bien un passage à la ligne sur la deuxième ligne du document et le texte du paragraphe est détaché des lignes qui le précèdent et des lignes qui le suivent.
  18. 18. 18 Des titres dans le document Dans les rubriques précédentes, vous avez appris à afficher du texte dans le document, sur une ou plusieurs lignes. Vous allez maintenant apprendre à insérer des titres dans un document, un peu comme vous le feriez dans Word. Le langage HTML dispose de six niveaux de titre représentés par les balises <h1></h1> à <h6></h6>. La balise ouvrante (<h1> par exemple) doit précéder le titre et la balise fermante (</h1> par exemple) doit suivre le titre. Pour illustrer ces balises, nous allons insérer six niveaux de titre dans ce document :
  19. 19. 19 Pour transformer le texte de la ligne 6 en un titre de niveau 1, il suffit d'insérer une balise <h1> au début du texte et une balise </h1> à la fin du texte. Pour transformer le texte de la ligne 7 en un titre de niveau 2, on insère une balise <h2> au début du texte et une balise </h2> à la fin du texte. Ainsi de suite pour les quatre autres niveaux de titre.
  20. 20. 20 Le document est sauvegardé avec le raccourci Ctrl+S puis affiché dans Internet Explorer avec le raccourci Alt+Ctrl+Maj+I.
  21. 21. 21 Quelques remarques :  Les caractères des titres de niveau 5 et 6 sont plus petits que ceux du simple texte.  La graisse des niveaux de titre est plus élevée que celle du simple texte.  Il n'est pas nécessaire d'insérer des sauts de ligne ou de paragraphe lorsque l'on utilise des niveaux de titre : les balises <h1></h1> à <h6></h6> s'en chargent. Gras, italique et souligné Cette rubrique va vous montrer comment mettre un texte en gras, en italique et le souligner. Pour cela, il vous suffit d'encadrer le texte concerné par les balises <b></b>, <i></i> et/ou <u></u>. Ici par exemple, le mot "gras" de la ligne 6 est mis en gras, le mot "italique" de la ligne 7 est mis en italique et le mot "souligné" de la ligne 8 est souligné.
  22. 22. 22 Pour voir le résultat dans le navigateur, appuyez sur Ctrl+S puis sur Alt+Ctrl+Maj+I. Nous allons maintenant ajouter une ligne et la faire apparaître en gras, italique et souligné. Nous commençons par écrire un texte sur la ligne 9 :
  23. 23. 23 Puis nous insérons les balises nécessaires en faisant attention à ne pas les entremêler : <b><i><u>Ce texte est en gras, italique souligné</u></i></b> Ici, les attributs sont gras, italique puis souligné. Les balises de fermeture seront donc, dans l'ordre, souligné, italique puis gras. Voici le résultat :
  24. 24. 24 Alignement des paragraphes Les paragraphes (entendez par là les blocs de texte encadrés par des balises <p> et </p>) sont par défaut alignés à gauche. Le texte est donc ancré sur la partie gauche de la fenêtre du navigateur. Si vous redimensionnez la fenêtre, le texte reste ancré à gauche. Dans cette rubrique, vous allez apprendre à changer l'alignement des paragraphes. Pour cela, vous allez ajouter l'attribut align dans la balise <p> en précisant le type d'alignement souhaité :  left pour un alignement à gauche ;  right pour un alignement à droite ;  center pour un centrage du texte. Remarquez la syntaxe utilisée dans la balise <p> :  un espace sépare la lettre p du mot align ;  le mot align est suivi d'un espace ;  le type de l'alignement est entouré de guillemets. Sauvegardez le document avec Ctrl+S et affichez-le dans Internet Explorer avec Alt+Ctrl+Maj+I. Voici le résultat :
  25. 25. 25 Si vous modifiez la largeur de la fenêtre, le texte aligné à gauche ne change pas de position. Par contre, le texte aligné à droite suit le bord droit de la fenêtre et le texte centré se déplace pour se trouver au centre de la fenêtre. Séparateurs horizontaux Il est parfois utile d'insérer une ligne horizontale pour séparer deux parties dans un document. Pour cela, vous utiliserez la balise <hr />. A titre d'exemple, nous allons insérer une ligne séparatrice entre deux paragraphes déjà définis dans un document HTML.
  26. 26. 26 Sauvegardez le code et affichez-le dans un navigateur de votre choix. Par exemple dans Mozilla Firefox avec la commande Launch in Firefox dans le menu Exécution ou avec la commande Alt+Ctrl+Maj+X. Comme vous pouvez le voir, la largeur de la barre horizontale s'adapte à celle du navigateur.
  27. 27. 27 Si vous voulez que la barre ait une largeur plus faible, utilisez l'attribut width et précisez, entre guillemets, le pourcentage de la largeur du navigateur à utiliser. Ici par exemple, la barre doit mesurer 30% de la largeur du navigateur.
  28. 28. 28 Comme vous pouvez le voir, la largeur de la barre s'adapte à celle du navigateur. Il est également possible de modifier l'épaisseur de la barre avec l'attribut size. Affectez-lui la largeur en pixels de la barre, entre guillemets. Ici par exemple, la barre a une largeur de 10 pixels :
  29. 29. 29 <hr size="10" /> Voici le résultat dans Firefox : Enfin, il est possible d'annuler l'ombrage dans la barre avec l'attribut noshade : <hr noshade /> Les attributs width, size et noshade peuvent être utilisés conjointement : <hr width="50%" size="15" noshade /> Voici le résultat dans Internet Explorer :
  30. 30. 30
  31. 31. 31 MISE EN FORME Taille des caractères Dans une rubrique précédente, vous avez appris à utiliser des styles de titre <h1> à <h6>. Ces styles permettent d'afficher des textes en gras et de taille différente de la police utilisée par défaut. Dans cette rubrique, je vais vous montrer comment utiliser la balise <font> pour choisir la taille des caractères. La syntaxe à utiliser est la suivante : <font size="taille">texte concerné</font> Où taille est un entier compris entre 1 et 7. La taille des caractères par défaut (c'est-à-dire lorsque l'attribut size n'est pas spécifié) est égale à 3. Pour bien visualiser les différentes tailles possibles, nous allons définir sept lignes de texte et leur affecter les tailles 1 à 7 : Voici le résultat :
  32. 32. 32 Couleur des caractères La couleur des caractères est définie en insérant un attribut color dans la balise font. Voici la syntaxe à utiliser : <font color="couleur">texte concerné</font> Où couleur représente la couleur à utiliser. La couleur peut être spécifiée par son nom ou par un code hexadécimal. Les seize couleurs de base sont les suivantes : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow. Pour bien visualiser ces couleurs, nous allons les affecter tour à tour à seize lignes de texte :
  33. 33. 33 Le document est sauvegardé avec le raccourci clavier Ctrl+S et affiché dans Internet Explorer avec le raccourci clavier Alt+Ctrl+Maj+I. Voici le résultat :
  34. 34. 34 Couleurs étendues Il existe un grand nombre d'autres noms de couleurs utilisables en HTML. Pour faciliter leur identification, je les ai regroupées sur la page http://www.mediaforma.com/couleurs-html- etendues/. Pour utiliser une de ces couleurs, il suffit de préciser son nom dans l'attribut color d'une balise <font>. Par exemple : <font color="DodgerBlue" size="6">Ce texte a pour couleur DodgerBlue</font> Voici le résultat :
  35. 35. 35 Couleurs hexadécimales Pour définir une couleur, il est également possible de préciser ses composantes rouge, verte et bleue. Chacune de ces composantes est comprise entre 0 et 255. Plus le nombre est élevé, plus la quantité de rouge, vert ou bleu est importante. Par convention, ces trois valeurs sont codées en hexadécimal. Elles sont donc comprises entre #00 (l'équivalent du nombre décimal 0) et #FF (l'équivalent du nombre décimal 255). En accolant les trois composantes, on obtient un nombre compris entre #000000 et #FFFFFF. La valeur #000000 correspond à la couleur noire (pas de rouge, pas de vert, pas de bleu). La valeur #FFFFFF correspond à la couleur blanche (rouge, vert et bleu à 100%). Pour trouver facilement la couleur de vos rêves, le plus simple consiste à utiliser un nuancier. Par exemple, celui proposé sur la page http://www.code-couleur.com/. Déplacez le curseur vertical pour choisir une couleur dominante puis le sélecteur pour ajuster les quantités de blanc et de noir. Vous obtenez immédiatement la couleur hexadécimale correspondante :
  36. 36. 36 Il ne vous reste plus qu'à insérer ce code dans l'attribut color d'une balise <font> : <font color="#CB87CD" size="6">Ce texte a pour couleur #CB87CD</font> Voici le résultat : Indice et exposant Il est parfois nécessaire de mettre des éléments textuels en indice ou en exposant. Les balises <sub></sub> et <sup></sup> sont là pour cela. Entourez le texte à mettre en indice par les balises <sub> et </sub> et le texte à mettre en exposant par les balises <sup> et </sup>. Voici un exemple de fonction que les lycéens doivent bien connaître : F<sub>(x)</sub> = a x <sup>2</sup> + b x + c Pour que le texte (x) apparaisse en indice, il est placé entre les balises <sub> et </sub>. De même, pour que le chiffre 2 apparaisse en exposant, il est placé entre les balises <sup> et </sup>. Après sauvegarde, ce document est affiché dans Internet Explorer. Voici le résultat : Listes à puces Rien de tel qu'une liste à puces pour afficher une énumération. En HTML, vous devez utiliser deux balises pour créer une liste à puces :  <ul> et </ul> pour délimiter le début et la fin de la liste ;  <li> et </li> pour délimiter chacune des lignes de la liste.
  37. 37. 37 Ici par exemple, la liste contient quatre éléments facilement repérables par les balises <li> et </li>. Les éléments de la liste ont été décalés vers la droite pour rendre le code plus facile à comprendre. Ce décalage n'a aucune incidence sur le rendu dans le navigateur : les éléments de la liste sont automatiquement indentés dans le navigateur, qu'ils le soient ou non dans le code. Pour suivre cette formation, vous avez besoin : <ul> <li>d'un ordinateur ;</li> <li>d'une connexion Internet ;</li> <li>d'un navigateur Web ;</li> <li>de une à deux minutes par jour.</li> </ul> Après avoir sauvegardé le document, nous l'affichons dans Internet Explorer. Voici le résultat : Par défaut, les éléments d'une liste à puces sont précédés d'un point épais. En utilisant l'attribut type dans la balise <ul>, vous pouvez choisir deux autres types de puces :  type="square" affiche un carré plein ;  type="circle" affiche un rond vide. Pour mettre en évidence les trois types de listes à puces, nous effectuons deux copies du code compris entre les lignes 10 et 16. Puis nous insérons un attribut type="square" dans le premier bloc dupliqué et un attribut type="circle" dans le deuxième.
  38. 38. 38 Après avoir sauvegardé ce code, nous l'affichons dans Internet Explorer. Voici le résultat :
  39. 39. 39 Listes numérotées Les listes numérotées sont une variante des listes à puces. Pour les mettre en œuvre, il suffit de remplacer la balise <ul></ul> par une balise <ol></ol>. Pour suivre cette formation, vous avez besoin : <ol> <li>d'un ordinateur ;</li> <li>d'une connexion Internet ;</li> <li>d'un navigateur Web ;</li> <li>de une à deux minutes par jour.</li> </ol> Voici le résultat dans Internet Explorer :
  40. 40. 40 Tout comme pour les listes à puces, il est possible d'utiliser un attribut type dans la balise <ol> pour modifier le type de la liste numérotée :  A affiche une numérotation en lettres capitales ;  a affiche une numérotation en lettres minuscules ;  I affiche une numérotation en chiffres romains ;  i affiche une numérotation en chiffres romains minuscules. Pour mettre en évidence ces quatre numérotations alternatives, nous effectuons quatre copies du code compris entre les lignes 10 et 16, puis nous ajoutons un attribut type dans la balise <ol> de chaque bloc dupliqué.
  41. 41. 41 Voici le résultat dans Internet Explorer :
  42. 42. 42 Listes sur plusieurs niveaux Vous savez maintenant créer des listes à puces et numérotées. Que diriez-vous de créer des listes sur plusieurs niveaux hiérarchiques ? Il suffit pour cela d'imbriquer deux ou plusieurs balises <ul> ou <ol>. A titre d'exemple, nous allons imbriquer plusieurs listes à puces dans une liste numérotée pour obtenir le résultat suivant.
  43. 43. 43 Examinons le code utilisé :
  44. 44. 44 Comme vous pouvez le voir, la liste principale est une liste numérotée délimitée par les balises <ol> et </ol>. Cette liste contient quatre entrées <li></li>. Dans la première entrée, une liste à puces <ul> de type square est définie. Cette liste contient une autre liste à puces <ul> de type circle, composée de quatre entrées. Les différents niveaux d'imbrication sont automatiquement indentés vers la droite. La troisième entrée <li> de la liste principale contient une liste à puces de type square, composée de trois entrées.
  45. 45. 45 TECHNIQUES PARTICULIERES Caractères particuliers Lorsqu'une page Web contient des caractères spécifiques à la langue française ou particuliers (les signes copyright ou registered trademark par exemple), elle est généralement bien affichée dans les navigateurs utilisés en France. Mais qu'en est-il en Chine ou en Ouzbékistan ? Pour être sûr que tous vos caractères s'affichent correctement sur tous les navigateurs, indépendamment du pays, vous devez utiliser une syntaxe particulière. Par exemple, vous utiliserez :  le code &copy; pour afficher un signe de copyright ;  le code &reg; pour afficher un signe registered trademark;  le code &Eacute; pour afficher un É;  le code &Egrave; pour afficher un È;  le code &eacute; pour afficher un é;  le code &egrave; pour afficher un è;  le code &Ecirc; pour afficher un Ê;  le code &ecirc; pour afficher un ê;  le code &Agrave; pour afficher un À. Appuyez sur Ctrl+S pour sauvegarder le document puis sur Alt+Ctrl+Maj+I pour l'afficher dans Internet Explorer. Voici le résultat :
  46. 46. 46 Les codes des caractères spéciaux sont disponibles sur cette page : http://www.mediaforma.com/caracteres-speciaux-en-html/. Caractères non proportionnels Par défaut, le texte affiché dans un document HTML est dit proportionnel. Ainsi par exemple, les lettres I et O n'auront pas la même largeur. Il est parfois nécessaire d'utiliser des caractères non proportionnels. Par exemple, pour insérer des lignes de code dans une page HTML, ou pour faciliter l'alignement des caractères. Dans ce cas, vous devez encadrer le texte concerné par les balises <pre> et </pre>.
  47. 47. 47 Les lignes 7 et 8 sont identiques aux lignes 12 et 13, si ce n'est que les lignes 12 et 13 sont encadrées par les balises <pre> et </pre>. Comme vous pouvez le voir, le résultat est très différent.
  48. 48. 48 Remarquez également que les sauts de ligne sont respectés entre les balises <pre> et </pre>. A la fin de la ligne 7, nous avons utilisé une balise <br /> pour provoquer un passage à la ligne. A la fin de la ligne 12, la balise <br /> n'est pas nécessaire. Il en va de même en ce qui concerne les espaces : entre les balises <pre> et </pre>, plusieurs espaces consécutifs seront interprétés comme tels. En dehors des balises <pre> et </pre>, plusieurs espaces consécutifs seront interprétés comme un seul espace.
  49. 49. 49 Comme vous pouvez le voir, les lignes 7 et 11 produisent deux résultats très différents alors que leur codage est identique. Ne pas interpréter le code HTML Dans la rubrique précédente, vous avez appris à vous servir de la balise <pre> pour afficher du texte non proportionnel dans un document. J'ai précisé que cet artifice était souvent utilisé lorsqu'une page Web devait afficher du code informatique. Ceci est tout à fait exact, à une
  50. 50. 50 exception près : si la page doit afficher du code HTML, il sera interprété lors de l'affichage. Les balises ne seront donc pas affichées. Examinez la ligne 7. Elle contient du code HTML, placé entre les balises <pre> (ligne 6) et </pre> (ligne 8). Lorsque ce document est affiché dans le navigateur, les balises <u> et </u> sont interprétées et le texte est souligné :
  51. 51. 51 Pour éviter ce problème, les signes "inférieur à" doivent être remplacés par &lt; et les signes "supérieur à" par &gt;. Nous copions la ligne 7 dans le presse-papiers et nous l'insérons à la suite. Puis nous effectuons les remplacements. Les balises de la ligne 8 ne sont plus interprétées.
  52. 52. 52 LIENS Liens hypertextes Que serait le Web sans les liens hypertextes ? Certainement pas un média aussi riche et global. Les liens (on oublie souvent le mot hypertexte) permettent d'accéder à des pages annexes, qui peuvent se trouver sur le même site Web ou sur un serveur situé à plusieurs milliers de kilomètres. Ils peuvent également être utilisés pour télécharger un fichier ou envoyer un message e-mail via le programme de messagerie local. Pour définir un lien, il suffit d'entourer le texte concerné par les balises <a> et </a>. Ici par exemple, le texte "Cliquez ici pour accéder au site de Microsoft" est un lien vers le site Web de Microsoft France. <a href="http://www.microsoft.com/fr-fr/default.aspx">Cliquez ici pour accéder au site de Microsoft.</a> Comme vous le voyez, tout le texte compris entre les balises <a> et </a> est souligné. Il suffit de cliquer dessus pour accéder au site de Microsoft. Le lien aurait tout aussi bien pu être affecté au seul mot "ici" en utilisant ce code :
  53. 53. 53 Cliquez <a href="http://www.microsoft.com/fr-fr/default.aspx">ici</a> pour accéder au site de Microsoft. Dans ce cas, seul le mot "ici" est souligné et lui seul donne accès au site de Microsoft. Lorsqu'un lien fait référence à une page du même site, il n'est pas nécessaire de préciser le nom du domaine. Supposons par exemple que la page à accéder ait pour nom "cible.html" et qu'elle se trouve dans le même dossier que la page actuelle. Il suffit d'affecter le nom de la page à l'attribut href : <a href="cible.html">lien</a> La page cible.html est accédée avec un adressage relatif. Supposons maintenant que : 1) la page actuelle se trouve à l'adresse http://www.domaine.com/pages/lapage.html, 2) La page à accéder se trouve à l'adresse http://www.domaine.com/annexe/cible.html. Pour passer du dossier pages au dossier annexe, il faut passer au dossier parent du dossier pages en utilisant un "../" puis redescendre au dossier annexe. La syntaxe à utiliser est la suivante : <a href="../annexe/cible.html">lien</a> Vous auriez également pu indiquer l'adresse absolue de la page avec cette syntaxe : <a href="http://www.domaine.com/annexe/cible.html">lien</a> Liens et ancres Lorsqu'une page s'étire en longueur, il peut être utile d'y insérer des ancres pour accéder à certaines parties stratégiques. Par exemple, le début du document et chacun des titre de niveau 2 du document. Pour définir une ancre, il suffit d'insérer un attribut name dans une balise <a>. Ici par exemple, nous définissons l'ancre a1 au début du document, et l'ancre a2 à la fin du document. Pour faire référence à une ancre, insérez le signe # dans l'attribut href du lien. Ici, le texte Aller à la fin du document fait référence à l'ancre a2, et le lien Aller au début du document à l'ancre a1 :
  54. 54. 54 Destination de l'ouverture L'attribut target de la balise <a> permet de préciser la fenêtre dans laquelle sera ouverte la page visée. Si cet attribut n'est pas spécifié, la cible remplace la page actuelle. Pour ouvrir la page visée dans une autre fenêtre du navigateur, affectez la valeur "_blank" à l'attribut target :
  55. 55. 55 Voici le résultat Liens de téléchargement Les liens ne renvoient pas forcément vers des pages Web : ils peuvent également donner la possibilité de télécharger un fichier quelconque. Pour cela, il suffit de préciser le nom du fichier dans l'attribut href.
  56. 56. 56 Dans cet exemple, en ligne 6, le texte "Cliquez ici" permet de télécharger (ou d'afficher dans le navigateur s'il dispose d'un plugin PDF) le fichier document.pdf qui se trouve dans le même dossier que la page en cours de visualisation. En ligne 7, le fichier a pour nom application.exe. Il se trouve dans le dossier fichiers du serveur FTP d'adresse ftp.domaine.com. Le téléchargement se fait en cliquant sur le texte "Cliquez ici". Lien vers une adresse e-mail Les liens peuvent également être utilisés pour envoyer des messages e-mail. Pour cela, il suffit d'insérer le mot "mailto" suivi du caractère ":" et de l'adresse e-mail du correspondant. Dans cet exemple, la ligne 6 définit un lien sur le texte "Cliquez ici pour m'envoyer un message". Lorsque ce texte est cliqué, un nouveau message est créé dans la messagerie
  57. 57. 57 par défaut. Le champ A est automatiquement rempli avec l'adresse e-mail qui suit le mot mailto. Il ne reste plus qu'à indiquer l'objet du message et à rédiger le message. Si vous le souhaitez, il est également possible de remplir automatiquement un ou plusieurs autres champs en utilisant les paramètres suivants :  ?subject=, suivi de l'objet du message ;  &cc=, suivi du ou des destinataires secondaires du message ;  &bcc, suivi d'un ou de plusieurs destinataires secondaires. Chacun des destinataires du message ne verra pas le ou les destinataires spécifiés dans ce champ.  &body=, suivi du texte du message. Dans cet exemple, un e-mail est envoyé à l'adresse prenom.nom@fai.com. L'objet du message est "Premier contact". Le mail est également envoyé à admin@html5.com et le corps du message contient le mot Bonjour, suivi d'une virgule.
  58. 58. 58
  59. 59. 59 IMAGES Les formats d'images du Web Pour afficher des images dans un document Web, vous pouvez utiliser trois formats de fichiers : gif, jpg et png. Le format jpg est bien adapté aux photos. Il peut contenir jusqu'à 16 millions de couleurs. Les images sont compressées avec perte et il est possible de choisir le facteur de compression, et donc, la qualité de l'image. Le format gif est limité à 256 couleurs. Les images sont compressées sans perte. Les fichiers de ce format sont donc de petite taille, à condition que le nombre de couleurs utilisées ne soit pas trop important. Si nécessaire, il est possible de définir une couleur de transparence. Le format png peut contenir 16 millions de couleurs. Les images sont compressées sans perte. Tout comme pour le format gif, il est possible de définir une couleur de transparence. Pour mettre en évidence les performances de chaque format, nous avons sauvegardé un dessin et une photo aux formats jpg, gif et png. A l'œil nu, il n'y a aucune différence entre les différents formats de fichiers. Par contre, le dessin est bien plus léger lorsqu'il est sauvegardé au format gif et la photo lorsqu'elle est sauvegardée au format jpg. Il est très important que vos pages Web soient aussi légères que possible. Vous devrez donc choisir le format d'image le plus approprié au cas par cas.
  60. 60. 60 Insérer une image dans un document Pour insérer une image dans un document, vous utiliserez la balise <img />. L'emplacement de l'image doit être indiqué dans l'attribut src. Il peut être absolu : <img src="http://www.mediaforma.com/img/word2010.png"> Ici, le fichier a pour nom word2010.png. Il se trouve dans le dossier img du domaine www.mediaforma.com. Si le document HTML et l'image se trouvent dans le même dossier, l'emplacement peut être défini de façon relative pour soulager l'écriture : <img src="word2010.png"> Ici, le fichier a pour nom word2010.png et se trouve dans le même dossier que le document HTML qui veut l'afficher. Si nécessaire, vous pouvez utiliser les caractères "../" pour accéder au dossier parent du dossier courant. Supposons par exemple que le fichier HTML se trouve dans le dossier http://www.mediaforma.com/documents/html et que l'image à afficher ait pour nom word2010.png et se trouve dans le dossier http://www.mediaforma.com/images/png. Pour accéder au dossier images/png depuis le dossier documents/html, il faut remonter de deux niveaux. Vous pouvez donc écrire : <img src="../../images/png/word2010.png"> Ou encore, en adressage absolu : <img src="http://www.mediaforma.com/images/png/word2010.png"> Une infobulle sur une image L'attribut title de la balise <img> permet d'afficher une infobulle lorsque la souris survole l'image.
  61. 61. 61 Ici par exemple, le texte "Quelle fougue !" est affiché au niveau du pointeur lorsque la souris survole l'image. Si le texte est très long, il est automatiquement réparti sur plusieurs lignes. Vous pouvez également insérer un ou plusieurs sauts de page manuels avec le code . Ici par exemple, l'info-bulle affiche deux lignes. Sur la première, le texte "Quelle fougue !". Sur la seconde, le texte "Attention aux obstacles !".
  62. 62. 62 Redimensionner une image Lorsqu'une page Web contient des images, il est très important de bien choisir leur format et leur taille pour minimiser leur poids et donc le temps nécessaire à leur affichage dans le navigateur. Si vous le souhaitez, il est possible de redimensionner une image en utilisant les attributs height et/ou width dans la balise <img>. Mais attention, si vous utilisez ce procédé pour redimensionner une image de grande taille, elle mettra autant de temps à se charger. En effet, le redimensionnement est effectué une fois l'image téléchargée. Dans cet exemple :  La ligne 6 affiche l'image originale.  La ligne 7 redimensionne l'image en agissant sur sa hauteur. La largeur est ajustée en conséquence.  La ligne 8 redimensionne l'image en agissant sur sa largeur. La hauteur est ajustée en conséquence.  La ligne 9 modifie la hauteur et la largeur de l'image. Comme vous le voyez, l'image est déformée.
  63. 63. 63 Aligner une image L'attribut align d'une balise <img> permet de l'aligner par rapport au texte qui l'entoure.
  64. 64. 64 L'image peut être alignée :  à gauche avec un attribut align initialisé à left ;  à droite avec un attribut align initialisé à right. En utilisant d'autres valeurs pour l'attribut align, le texte peut s'aligner verticalement sur l'image. Lorsqu'align vaut :  top, la partie supérieure du texte s'aligne avec la partie supérieure de l'image :  middle, la partie inférieure de l'image s'aligne avec le milieu de l'image ;  bottom, la partie inférieure du texte s'aligne avec la partie inférieure de l'image. Voici le résultat de ce code dans Internet Explorer :
  65. 65. 65 Rendre une image cliquable Pour qu'une image renvoie vers une page quelconque, il suffit de l'entourer par une balise <a>. Ici par exemple, l'image a pour nom excel2010.png et elle renvoie vers la page http://www.mediaforma.com.
  66. 66. 66 Lorsque ce code est exécuté dans Firefox ou Chrome, il fonctionne à la perfection. Lorsqu'il est exécuté dans Internet Explorer, l'image est entourée d'un cadre dont la couleur varie selon si l'image a ou n'a pas été cliquée. Pour supprimer ce cadre, ajoutez l'attribut border="0" dans la balise <img>.
  67. 67. 67 Images réactives – une première approche Les images réactives sont composées de différentes parties sur lesquelles l'internaute peut cliquer pour accéder à différentes pages Web. A titre d'exemple, vous pourriez créer une carte de France dans laquelle l'internaute pourrait cliquer sur chaque département pour obtenir des informations complémentaires. Dans cette première approche des images réactives, nous allons rester très simples en utilisant une image carrée de 200 pixels sur 200, contenant quatre zones de même taille. La zone 1 s'étend des coordonnées 0,0 à 100, 100. La zone 2 des coordonnées 101,0 à 200, 100, la troisième des coordonnées 0,101 à 100, 200 et la quatrième des coordonnées 101, 101 à 200, 200. Pour définir une image réactive, vous devez dans un premier temps créer une balise <map> et lui donner un nom avec l'attribut name. Ici, la balise <map> a pour nom "monimagemap". Les différentes zones sensibles sont définies à l'aide de balises <area>, incluses dans la balise <map>. Dans cet exemple, nous utilisons quatre balises <area> pour définir les quatre zones carrées de l'image. Chacune de ces balises <area> utilise trois attributs :  shape pour définir la forme de la zone ;  coords pour définir les coordonnées de la zone ;  href pour définir la page à afficher lorsque la zone est cliquée.
  68. 68. 68 La ligne 7 s'intéresse à la première zone cliquable, représentée par le carré de couleur rouge. La forme de la zone est rectangulaire, les coordonnées du coin supérieur gauche sont 0,0. Le premier zéro correspond à l'abscisse et le deuxième à l'ordonnée. La page affichée est une hypothétique page1.html. La ligne 8 s'intéresse à la deuxième zone cliquable, représentée par le carré de couleur jaune. Ici encore, la forme est rectangulaire. Les coordonnées du coin supérieur gauche sont égales à 101 pour l'abscisse et 0 pour l'ordonnée. Quant aux coordonnées du coin inférieur droit, elles sont égales à 200 pour l'abscisse et 100 pour l'ordonnée. Les lignes 9 et 10 décrivent les deux autres zones cliquables selon le même principe. Une fois la balise <map> entièrement définie, il suffit d'y faire référence à travers l'attribut usemap de la balise <img>. Comme vous pouvez le voir dans la barre d'état, le survol de chaque zone renvoie vers la page qui lui a été liée. Plus loin avec les images réactives Dans la rubrique précédente, vous avez appris à mettre en place des zones réactives élémentaires "à la main", c'est-à-dire en définissant une par une les balises <area>. L'exemple était élémentaire puisqu'il consistait à définir quatre zones carrées de 100x100 pixels dans un carré de 200x200 pixels.
  69. 69. 69 Il peut être intéressant de définir des zones réactives en utilisant des cercles et/ou des polygones. Vous pouvez procéder comme dans la rubrique précédente, mais cela risque vite de devenir rébarbatif. Dans cette rubrique, je vais vous montrer comment utiliser un programme en ligne pour faciliter la création de zones réactives rectangulaires, circulaires ou polygonales. Ouvrez votre navigateur et rendez-vous sur la page http://www.maschek.hu/imagemap/imgmap. En face du libellé Use an image on your computer, cliquez sur Parcourir et désignez l'image à utiliser dans vos unités de masse. Cliquez sur Upload puis sur Accept. Il ne vous reste plus qu'à choisir une forme dans la liste déroulante, à délimiter la zone concernée avec la souris, et à définir la page cible. Ici par exemple, nous choisissons circle dans la première liste déroulante et nous dessinons un cercle dans l'image. Comme vous pouvez le voir, la zone de texte Coords est automatiquement remplie en fonction du tracé. La page visée a pour nom cercle.html. Nous allons tracer un polygone autour de la flèche. Nous sélectionnons polygon dans la deuxième liste déroulante et nous traçons le polygone. Un Shift+clic met fin au tracé. La page visée a pour nom fleche.html. Un clic sur l'icône Get image map HTML et la balise <map> est affichée dans la partie inférieure de la page.
  70. 70. 70 Il ne reste plus qu'à copier ce code dans Notepad++. Nous mettons un peu d'ordre pour que le code soit plus lisible, puis nous faisons coïncider l'attribut usemap de la balise <img> et l'attribut name de la balise <map>.
  71. 71. 71 Le code est sauvegardé et exécuté dans Firefox. Comme vous pouvez le voir les deux zones réactives suivent bien le tracé qui a été défini sur le site Online Image Map Editor.
  72. 72. 72 Couleur d'arrière-plan Par défaut, l'arrière-plan des pages Web est uniforme et de couleur blanche. Pour choisir une autre couleur uniforme, il vous suffit de définir l'attribut bgcolor dans la balise <body> : <body bgcolor="#RRVVBB"> RR, VV et BB représentent les composantes rouge, vert et bleu de la couleur, codées en hexadécimal. Pour vous aider à obtenir ces trois composantes, je vous suggère de vous connecter sur la page http://www.raider-knight.com/generateur-couleur.php. Sélectionnez une couleur avec le curseur vertical et cliquez dans la palette. Il ne vous reste plus qu'à copier/coller le code hexadécimal obtenu dans l'attribut bgcolor de la balise <body> :
  73. 73. 73 Couleurs par défaut Dans la rubrique précédente, vous avez vu que l'arrière-plan des pages était de couleur blanche par défaut, mais qu'il était possible de modifier cette couleur en utilisant l'attribut bgcolor de la balise <body>. D'autres attributs de la balise <body> permettent de modifier la couleur par défaut du texte, des liens non visités et des liens visités. Vous utiliserez l'attribut :  text pour modifier la couleur par défaut du texte ;  link pour modifier la couleur par défaut des liens non visités ;  vlink pour modifier la couleur par défaut des liens visités.
  74. 74. 74 Dans cet exemple, les couleurs par défaut sont les suivantes : bleu pour le texte, rouge pour les liens non visités et vert pour les liens visités. Image d'arrière-plan Que diriez-vous d'insérer une image d'arrière-plan sur une page ? Pour cela, il suffit d'insérer l'attribut background dans la balise <body> et de préciser le chemin de l'image gif, jpg ou png à utiliser.
  75. 75. 75 Ici, l'image se trouve dans le même dossier que le document et a pour nom chien.gif. Comme vous le voyez, elle est répétée autant de fois que nécessaire pour couvrir toute la surface occupée par la fenêtre. Ce fonctionnement est très pratique si vous utilisez une texture d'arrière-plan. De très nombreuses textures sont librement téléchargeables sur le Web. Ici, par exemple, nous allons utiliser une des textures proposées sur le site http://www.vracimages.com. A titre d'exemple, nous allons utiliser une texture Bois. Un clic droit sur l'une des textures proposées et nous sauvegardons la texture sur le disque dur de l'ordinateur, sous le nom bois.jpg. Il suffit maintenant de remplacer chien.gif par bois.jpg dans l'attribut background de la balise <body>. La page est rafraîchie et la nouvelle texture occupe tout l'arrière-plan. Ne pas répéter l'image d'arrière-plan Dans certains cas, vous souhaiterez répéter l'image d'arrière-plan horizontalement, mais pas verticalement, verticalement mais pas horizontalement ou encore ne pas la répéter du tout. Pour arriver à cela, vous devez ajouter l'attribut style dans la balise <body> et utiliser la propriété CSS background-repeat. La syntaxe à utiliser est la suivante : <body background="image.jpg" style="background-repeat:style;"> Où style représente la valeur affectée à la propriété background-repeat. Vous pouvez choisir :  repeat pour répéter l'image horizontalement et verticalement. Etant donné que l'attribut background produit cet effet par défaut, cette valeur n'est jamais utilisée.  repeat-x pour répéter l'image horizontalement mais pas verticalement.  repeat-y pour répéter l'image verticalement mais pas horizontalement.  no-repeat pour ne pas répéter l'image. Voyons l'effet des trois dernières valeurs. Comme vous pouvez le constater, repeat-x répète l'image horizontalement mais pas verticalement, repeat-y répète l'image verticalement mais pas horizontalement et no-repeat ne répète pas l'image.
  76. 76. 76 Image à arrière-plan transparent Pour définir une image GIF avec un fond transparent, l'application Paint, livrée avec Windows, n'est pas suffisante. Je vous suggère d'utiliser l'application Photofiltre, librement téléchargeable sur la page http://photofiltre.softonic.fr/telecharger. Ouvrez l'image pour laquelle vous voulez définir un arrière-plan transparent. Lancez la commande Couleur de transparence dans le menu Image. Un message vous indique que la transparence n'est utilisable que sur des images qui contiennent 256 couleurs. Cliquez sur Oui pour continuer. Une boîte de dialogue intitulée Couleur de transparence est affichée. Dans l'image, cliquez sur la couleur que vous voulez rendre transparente, puis validez en cliquant sur OK. Il ne vous reste plus qu'à enregistrer l'image au format GIF. Pour vérifier que l'arrière-plan de l'image est bien transparent, nous allons afficher l'image originale et l'image rendue transparente dans une page qui contient une image d'arrière- plan. La ligne 4 définit l'arrière-plan de la page. Ici, il s'agit de l'image "fond-neige.jpg". L'attribut style demande que l'image d'arrière-plan ne soit pas répétée. Les lignes 5 et 6 affichent l'image originale et l'image rendue transparente. Voici le résultat :
  77. 77. 77
  78. 78. 78 TABLEAUX Une première approche des tableaux Pour définir un tableau, vous utiliserez la balise <table></table>. Chacune des lignes du tableau sera repérée par la balise <tr> </tr> et chacune des colonnes d'une ligne par la balise <td> </td>. Voici un exemple élémentaire de tableau contenant deux lignes et trois colonnes : Pour mieux visualiser les cellules du tableau, nous allons leur ajouter des bordures avec l'attribut border de la balise <table> :
  79. 79. 79 Comme vous pouvez le voir la taille des cellules s'adapte à leur contenu, tout en conservant une cohérence sur les colonnes. Ainsi, la largeur d'une colonne sera définie par la cellule dont le contenu est le plus large. Dans l'exemple précédent, la cellule qui contient le mot "quatrième" fixe la largeur de la première colonne, et la cellule qui contient le mot "troisième" fixe la largeur de la troisième colonne. Choisir la forme de la bordure d'un tableau L'attribut border de la balise <table> affiche une bordure autour des cellules d'un tableau. En remplaçant cet attribut par quelques propriétés CSS, vous allez pourvoir choisir la couleur, l'épaisseur et la forme de la bordure. Voici les propriétés à utiliser :  border-color pour choisir la couleur de la bordure. Vous pouvez utiliser une couleur prédéfinie, comme blue ou red, ou un code RVB hexadécimal précédé du signe #, comme #451244 ;  border-width pour choisir l'épaisseur de la bordure. Cette propriété peut prendre les valeurs thin, medium ou thick ou être définie en pixels (px), points (pt) ou une autre unité de mesure quelconque;  border-style pour choisir la forme de la bordure : dashed, dotted, double, solid, inset, groove, ridge ou outset. Dans cet exemple, la bordure est de couleur rouge, épaisse de 5 pixels et pointillée.
  80. 80. 80 Entrainez-vous à utiliser d'autres valeurs pour les trois propriétés CSS border et examinez le résultat obtenu. Ne voyez-vous pas quelque chose d'étrange dans cette bordure ? Elle entoure le tableau, mais pas les cellules qui le composent. Ceci est tout à fait normal puisque l'attribut style a été spécifié dans la balise <table> et non dans les différents <td>. Pour résoudre élégamment ce problème, vous devez modifier le style de la balise <td>. Cette technique sera étudiée dans la rubrique suivante. Une bordure pour chaque cellule du tableau Dans la rubrique précédente, vous avez appris à définir une bordure personnalisée pour un tableau. Dans cette rubrique, nous allons voir comment définir une bordure personnalisée pour chacune des cellules du tableau. Pour cela, il va falloir modifier le style de la balise <td>. Commencez par insérer une balise <style> </style> entre les balises <head> et </head>, et définissez le type de la balise <style> à "text/css". Pour modifier le style de la balise <td>, il suffit d'écrire td entre les balises <style> et </style> et d'énumérer les caractéristiques de la balise <td> entre des accolades. Ici, toutes les balises <td> auront une couleur rouge pointillée épaisse de 5 pixels.
  81. 81. 81 Avec cet exemple élémentaire, vous commencez à percevoir le potentiel des instructions CSS. Le simple fait d'avoir modifié le style de la balise <td> entre les balises <style> et </style> s'applique à tout le document. Un dernier détail : pour éviter d'avoir des bordures répétées entre les cellules, il suffit de définir la propriété CSS border-collapse de la balise <table> et de lui affecter la valeur collapse.
  82. 82. 82 Définir la largeur des cellules Comme nous l'avons vu précédemment, la taille d'une cellule s'adapte à son contenu. Cependant, il est parfois nécessaire de fixer la taille d'une cellule (et donc de la colonne qui la contient) à une largeur bien précise. Vous utiliserez pour cela l'attribut HTML width, en précisant la dimension de la colonne en pixels. Ici par exemple, la taille de la première colonne est fixée à 200 pixels. L'attribut width a été spécifié dans la première balise <td> de la colonne, mais il aurait tout aussi bien pu être spécifié dans la deuxième balise <td> de cette colonne.
  83. 83. 83 Supposons maintenant que vous vouliez fixer la taille de toutes les colonnes à 200 pixels. Comment procèderiez-vous ? La première idée qui vient à l'esprit consiste à insérer un attribut width dans chacune des cellules d'une colonne. Cette technique fonctionne, mais elle n'est pas très élégante. Dans la rubrique précédente, je vous ai montré que le CSS pouvait s'avérer très efficace pour agir globalement sur un document. Ici, c'est précisément ce que nous cherchons à faire puisque toutes les cellules doivent avoir une largeur de 200 pixels. La solution devient alors évidente : il suffit de modifier le style de la balise <td>. Insérez la balise <style> </style> entre les balises <head> et </head>, puis modifiez la propriété width de la balise <td>. Vous pouvez supprimer l'attribut width de la première balise <td>, qui fait doublon avec la redéfinition de la balise <td>.
  84. 84. 84 Définir la hauteur des cellules Lorsqu'une ligne d'un tableau doit avoir une hauteur particulière, vous devez initialiser l'attribut height d'une de ses balises <td>. Ici par exemple, la hauteur de la première cellule de la première ligne est initialisée à 100px, ce qui fixe la hauteur de la première ligne à 100px. Quant à la deuxième cellule de la deuxième ligne, sa hauteur est initialisée à 50px. La hauteur de la deuxième ligne est donc égale à 50px.
  85. 85. 85 Supposons maintenant que vous vouliez fixer la hauteur de toutes les colonnes à 120 pixels. Il suffit pour cela de définir la propriété CSS height de la balise <td>. Insérez la balise <style> </style> entre les balises <head> et </head>, puis modifiez la propriété height de la balise <td>. Vous pouvez supprimer les attributs height des première et quatrième balises <td>, qui font doublons avec la redéfinition de la balise <td>.
  86. 86. 86 Aligner les données dans les cellules L'attribut HTML align permet d'aligner horizontalement les données dans les cellules. Il peut être initialisé avec les valeurs suivantes :  left : alignement à gauche ;  center : alignement centré ;  right : alignement à droite. L'attribut HTML valign permet d'aligner verticalement les données dans les cellules. Il peut être initialisé avec les valeurs suivantes :  top : alignement dans la partie supérieure de la cellule ;  middle : alignement dans la partie centrale de la cellule ;  bottom : alignement dans la partie inférieure de la cellule. Nous allons utiliser ces six valeurs sur les six cellules d'un tableau dont les cellules ont une largeur fixée à 200 pixels. La première cellule est alignée à gauche, la deuxième est centrée et la troisième alignée à droite. En insérant une balise <p> dans la quatrième cellule, elle contient deux lignes. L'attribut valign aligne la quatrième cellule dans la partie supérieure, la cinquième dans la partie centrale et la sixième dans la partie inférieure.
  87. 87. 87 Etendre une cellule sur plusieurs colonnes ou sur plusieurs lignes L'attribut colspan de la balise <td> permet d'étendre une cellule sur plusieurs colonnes. Affectez à cet attribut le nombre de colonnes désiré et le tour est joué. Supposons par exemple que la quatrième cellule doive s'étaler sur deux colonnes. L'attribut colspan est donc initialisé à 2. Nous en profitons pour centrer le contenu de la cellule sur les deux colonnes en ajoutant un attribut align initialisé à center.
  88. 88. 88 De la même manière, l'attribut rowspan de la balise <td> permet d'étendre une cellule sur plusieurs lignes. Tout comme pour colspan, il suffit d'affecter à cet attribut le nombre de lignes désiré et le tour est joué. Supposons par exemple que la première cellule doive s'étaler sur deux lignes. L'attribut rowspan est donc initialisé à 2. Nous en profitons pour centrer le contenu de la cellule sur les deux lignes en ajoutant un attribut valign initialisé à middle.
  89. 89. 89 Ajouter un titre dans un tableau La balise <th> </th> permet d'ajouter un titre dans un tableau. Il suffit de l'insérer juste après la balise <table>. Le titre est automatiquement affiché en caractères gras. Dans cet exemple, le tableau comporte trois colonnes. Si on se contente d'insérer la balise <th>, elle occupe une colonne. Dans cet exemple, le texte est le plus long de la colonne. La taille de la première colonne est donc ajustée en conséquence :
  90. 90. 90 L'effet obtenu n'est pas très heureux. Nous allons étendre la cellule de titre sur trois colonnes pour qu'elle s'étale sur toute la longueur du tableau et centrer le contenu à l'aide de l'attribut align. Le résultat est bien meilleur.
  91. 91. 91 Espacer les cellules entre elles Pour définir l'espacement entre les cellules, vous allez utiliser la propriété CSS border- spacing de l'attribut <table>. Dans cet exemple, le code CSS est directement inséré dans la balise <table> via l'attribut style. L'espacement entre les cellules est fixé à 10 pixels :
  92. 92. 92 Nous fixons maintenant l'espacement à 30 pixels. Comme vous pouvez le voir, les cellules sont biens plus espacées les unes des autres.

×