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 2

74 visualizaciones

Publicado el

Créez des sites Web légers et compatibles grâce à cette formation

A l'issue 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.

Suivez le tutoriel complet par ici :
https://www.smartnskilled.com/tutoriel/formation-en-ligne-debuter-html5-css3-et-javascript-tome-2

Publicado en: Educación
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

  1. 1. HTML 5 CSS3 JavaScript Tome II Michel Martin
  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. D'AUTRES RESSOURCES SUR HTML5/CSS3/JavaScript Le pack HTML5 / CSS3 / JavaScript est disponible sur le site Mediaforma. Cliquez sur l'image pour en savoir plus. Je suis également l'auteur du Guide de survie HTML5 / CSS3 aux éditions Pearson. Cliquez sur l'image pour en savoir plus.
  4. 4. HTML 5 ....................................................................... 7 Définir l'arrière-plan des cellules.................................................................................... 7 Une image d'arrière-plan dans les cellules d'un tableau............................................... 8 Un peu de vocabulaire....................................................................................................10 Les divisions...................................................................................................................11 Mise en page avec des divisions...................................................................................15 Mise en page HTML5 ......................................................................................................19 Codes couleur avec des curseurs.................................................................................22 Mise en exergue d'un texte ............................................................................................26 Span vs div......................................................................................................................29 Vérifier la validité du code..............................................................................................31 CSS 3........................................................................ 34 Une première approche des styles CSS........................................................................34 Un style CSS dans une balise........................................................................................34 Des styles dans l'en-tête du document .........................................................................35 Des styles dans un fichier externe CSS........................................................................37 Feuille de styles ou attribut style ? ...............................................................................39 Surclasser un style.........................................................................................................40 Les classes CSS .............................................................................................................44 Une classe sélective.......................................................................................................48 Une connexion unique CSS-HTML ................................................................................49 Un premier pas vers l'interactivité en CSS ...................................................................52 Positionner un objet avec des coordonnées absolues................................................55 Gestion des débordements dans une div .....................................................................59 Une bande verticale à gauche du contenu....................................................................63 Un bas de page … en bas de la page ............................................................................66 Mise en page complète avec bas de page fixe .............................................................69 Un design à deux colonnes............................................................................................72 Un design à trois colonnes ............................................................................................75 Trois colonnes en CSS3.................................................................................................78 Alignement avec un tableau...........................................................................................81 Plus loin avec les sélecteurs CSS .................................................................................84 Un sélecteur descendant................................................................................................89
  5. 5. Un sélecteur d'attribut....................................................................................................91 Les unités de mesure (unités.htm) ................................................................................94 Lettrine (lettrine.htm)......................................................................................................98 La propriété z-Index......................................................................................................101 Opacité ..........................................................................................................................103 Display...........................................................................................................................106 Positionnement inline-block ........................................................................................108 Le sélecteur universel ..................................................................................................110 Une bordure arrondie ...................................................................................................113 JavaScript ...............................................................116 Première approche du JavaScript ...............................................................................116 Afficher un message dès l'ouverture d'une page .......................................................118 getElementById, première approche...........................................................................119 getElementById, Modifier la couleur d'arrière-plan....................................................121 getElementById, Obtenir le contenu d'une div ...........................................................125 getElementById, donner le focus à une zone de saisie .............................................127 getElementById, montrer/cacher un élément .............................................................129 getElementsByName ....................................................................................................131 getElementsByTagName()............................................................................................134 Codes couleur en JavaScript.......................................................................................136
  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… Dans ce deuxième volet, vous allez apprendre de nombreuses techniques de mise en forme CSS 2/CSS3, améliorer vos connaissances en HTML5 et découvrir les innombrables possibilités du langage JavaScript. Commençons sans plus attendre.
  7. 7. HTML 5 Définir l'arrière-plan des cellules L'attribut bgcolor de la balise table permet de définir une couleur d'arrière-plan pour toutes les cellules d'un tableau. 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. Vous pouvez également utiliser les noms de couleurs étendues. Consultez la page http://www.mediaforma.com/couleurs-html-etendues/ pour en savoir plus. Ici par exemple, les cellules ont une couleur d'arrière-plan CornflowerBlue : La couleur d'arrière-plan peut également être spécifiée par son code hexadécimal. 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.
  8. 8. Copiez-collez le code hexadécimal de la couleur dans le code et affichez le résultat dans votre navigateur. Une image d'arrière-plan dans les cellules d'un tableau Que diriez-vous d'utiliser une image en arrière-plan des cellules d'un tableau ? Il n'y a rien de compliqué là-dedans : utilisez simplement l'attribut background à la place de l'attribut bgcolor et indiquez le nom de l'image GIF, JPG ou PNG à utiliser. Ici par exemple, nous utilisons l'image miniature.jpg, qui se trouve dans le même dossier que le code HTML. Afin de mettre en évidence la répétition de l'arrière-plan, la première cellule a été redimensionnée à 300x200 pixels. La cellule suivante aura la même hauteur. Sur la deuxième ligne du tableau, la hauteur de la première cellule a été fixée à 200 pixels. Cette hauteur sera également celle de la deuxième cellule.
  9. 9. L'image utilisée en arrière-plan est de petites dimensions : 100 x 75 pixels. Comme vous le voyez, elle se duplique autant de fois que nécessaire pour couvrir toute la surface du tableau.
  10. 10. Un peu de vocabulaire Avant d'aller plus loin dans l'utilisation du langage CSS, nous allons marquer une pause pour définir ou rappeler quelques termes techniques qui seront utilisés tout au long de cette formation. Une balise HTML est encadrée par les caractères "<" et ">". Elle peut comporter un ou plusieurs attributs auxquels on affecte une valeur, généralement spécifiée entre guillemets. Par exemple, cette balise <a> contient deux attributs : href et target. Le premier précise l'adresse URL du lien et le deuxième indique que la page correspondante devra s'ouvrir dans une fenêtre secondaire : <a href="http://www.mediaforma.com" target="_blank">Mediaforma</a> Dans une feuille de styles (interne ou externe), on redéfinit une ou plusieurs propriétés en leur affectant des valeurs. Ici par exemple, trois propriétés sont redéfinies dans la balise h1 :  la valeur red est affectée à la propriété color ;  la valeur 50px est affectée à la propriété font-size ;  la valeur bold est affectée à la propriété font-style : h1
  11. 11. { color: red; font-size: 50px; font-style: bold; } Pour faciliter la lisibilité du code, chaque couple propriété/valeur est généralement placé sur une ligne qui lui est propre. Mais si vous le souhaitez, il est possible de tout rassembler sur une seule ligne : h1 {color: red; font-size: 50px; font-style: bold; } Lorsqu'un style est redéfini à l'intérieur d'une balise HTML, on utilise l'attribut style suivi du signe "=". Les couples propriété/valeur sont placés entre guillemets et séparés entre eux par des ";" : <h1 style="color: red; font-size: 50px; font-style: bold; ">Texte</h1> Les divisions La balise <div> </div> est un élément essentiel en programmation HTML/CSS. Elle permet de définir une zone rectangulaire dans laquelle seront affichés divers éléments textuels, graphiques ou vidéo. Une division (parfois appelée boîte) est caractérisée par plusieurs propriétés CSS : - ses dimensions : with (largeur) et height (hauteur) ; - ses marges intérieures : padding ; - ses marges extérieures : margin ; - sa couleur d'arrière-plan : background-color ; - sa bordure : border.
  12. 12. Les marges intérieures peuvent être identiques en haut, en bas, à droite et à gauche. Dans ce cas, vous utiliserez la propriété margin. Par contre, si vous voulez définir des marges intérieures différentes, vous devrez utiliser les propriétés margin-top, margin-bottom, margin-left et margin- right. Il en va de même pour les marges extérieures. Si elles sont identiques, utilisez la propriété padding. Si elles sont différentes, utilisez les propriétés padding-top, padding-bottom, padding-left et padding-right. Nous allons faire une première approche des balises <div> en écrivant quelques lignes de code : Le corps du document contient deux <div>. La première a pour identifiant div1 et contient du texte. La deuxième a pour identifiant div2 et contient une image. Comme vous le voyez, ce document HTML n'utilise aucune feuille de styles. Voyons le résultat dans Internet Explorer. Le texte et l'image sont affichés l'un à la suite de l'autre, comme s'ils étaient séparés par un passage à la ligne <br>.
  13. 13. Pour montrer l'intérêt des balises <div>, nous allons attacher la feuille de styles styles6.css au document et y définir les caractéristiques des deux balises <div>. Avant de commencer à écrire le code CSS, nous ajoutons une balise <link> dans le document pour faire référence à la feuille de styles : <link rel="stylesheet" type="text/css" href="styles6.css" /> Commençons par définir le style de la balise d'identifiant div1. Ses dimensions sont fixées à 400 pixels horizontalement et à 200 pixels verticalement. Ses marges extérieures sont fixées à 30 pixels. Sa marge intérieure supérieure est fixée à 40 pixels. Sa couleur d'arrière-plan est rouge. Enfin, sa bordure est épaisse de 2 pixels, continue et de couleur noire. Définissons le style de la balise d'identifiant div2. Ses dimensions sont fixées à 300 pixels horizontalement et à 200 pixels verticalement. Ses marges extérieures sont fixées à 0 pixels. Ses marges intérieures sont fixées à 0 pixels. Sa couleur d'arrière-plan est bleue. Enfin, sa bordure est épaisse de 4 pixels, pointillée et de couleur rouge. Voyons le résultat dans Internet Explorer.
  14. 14. Remarquez en particulier : - la marge autour de la première div, qui a été fixée à 30 pixels par la propriété margin ; - la marge intérieure supérieure de la première div, fixée à 40 pixels par la propriété padding- top ; - la position de l'image dans la deuxième <div>. Elle se retrouve "collée" à l'angle supérieur gauche de la division car la propriété padding a été initialisée à 0 ; - aucune marge n'ayant été définie pour la deuxième <div>. Elle se retrouve calée sur le côté gauche de la zone d'affichage.
  15. 15. Mise en page avec des divisions Dans la section précédente, vous avez appris à utiliser les balises <div> pour créer des blocs indépendants les uns des autres. Nous allons maintenant utiliser trois balises <div> pour créer une page Web comportant un bandeau supérieur, une zone centrale et un pied de page. Le code HTML est très simple. Après avoir fait référence à la feuille de styles styles7.css via une balise <link>, trois balises <div> sont définies les unes à la suite des autres. Pour les différentier, nous affectons un identifiant unique à chacune d'entre elles : bandeau, contenu et pied. Pour ne pas laisser les balises <div> vides, nous y ajoutons un peu de texte. Si vous vous demandez d'où vient le texte de la balise d'identifiant contenu, j'ai simplement fait un copier-coller depuis le site http://lipsum.com :
  16. 16. Passons à la feuille de styles. Vous vous en doutez, elle contient les styles relatifs aux identifiants bandeau, contenu et pied. Ici, nous nous contentons de définir la largeur, la hauteur et la couleur d'arrière-plan de chaque élément :
  17. 17. Les codes de couleur hexadécimaux ont été créés sur le site http://www.code-couleur.com/.
  18. 18. Affichons la page div2.html dans Internet Explorer. Le résultat est bien conforme à ce qui était attendu :
  19. 19. Mise en page HTML5 Dans les rubriques précédentes, vous avez appris à mettre en place un bandeau supérieur, un menu latéral et un pied de page en utilisant des balises <div>. Dans cette rubrique, je vais vous montrer comment arriver au même résultat en utilisant de nouvelles balises HTML5 : Le document HTML contient cinq nouvelles balises :  <header> pour l'en-tête ;  <nav> pour le menu ;  <aside> pour une zone secondaire flottante ;  <article> pour la zone de contenu ;  <footer> pour le bas de page.
  20. 20. Rien de bien extraordinaire dans ce code, si ce n'est quelques balises dont le nom est quelque peu inhabituel. Vous vous en doutez certainement, le gros du travail va se faire dans la feuille de styles.  La ligne 1 indique que les balises header, nav, article, section, footer et aside se comporteront comme des blocs. Cette ligne n'est pas obligatoire. Cependant, elle assure la
  21. 21. compatibilité du code HTML avec des navigateurs peu ou pas compatible avec la version 5 du langage.  La ligne 2 définit la couleur de la balise header, c'est-à-dire de l'en-tête.  Les lignes 3 à 8 définissent le comportement de la balise <nav>. Cette balise flottera à gauche de la fenêtre, elle occupera 20% de la largeur de la fenêtre et aura une couleur spécifique.  Les lignes 9 à 13 définissent le comportement de la balise <article>. Cette balise occupera 80% de la largeur de la fenêtre et aura une couleur spécifique.  Les lignes 15 à 20 définissent le comportement de la balise <aside>. Cette balise flottera à droite de la fenêtre, elle occupera 20% de la largeur de la fenêtre et aura une couleur spécifique.  Enfin, la ligne 21 définit la couleur de la balise <footer>, c'est-à-dire du bas de page. Il ne reste plus qu'à exécuter le code HTML dans un navigateur quelconque. Ici par exemple, dans Google Chrome :
  22. 22. Codes couleur avec des curseurs Dans cette rubrique, je vais vous montrer comment remplacer les zones de saisie des deux exemples précédents par des curseurs. Pour l'instant, ce code ne fonctionne que dans Google Chrome. Voici le résultat que nous cherchons à obtenir :
  23. 23. Dans Firefox et Internet Explorer, les curseurs seront représentés par des zones de texte.
  24. 24. Les portions CSS et JavaScript du document sont identiques à celles de la rubrique précédente. Nous n'y reviendrons pas. Par contre, n'hésitez pas à vous reporter aux rubriques "Alignement avec un tableau" et "Codes couleur en JavaScript" pour avoir des informations complémentaires à leur sujet. Examinons le code HTML. <table> <tr><td colspan=2><div id="div1"></div></td></tr> <tr><td>Rouge</td><td><input id="rouge" type="range" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr> <tr><td>Vert</td><td><input id="vert" type="range" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr> <tr><td>Bleu</td><td><input id="bleu" type="range" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr> <tr><td colspan=2><div id="hexa"></div></td></tr> </table>
  25. 25. Comme vous pouvez le remarquer, les balises <input type="text"> (c'est-à-dire les zones de saisie) ont été remplacées par des balises <input type="range">. Cette simple substitution provoque l'affichage de curseurs dans Google Chrome. Les attributs min et max définissent les valeurs minimale et maximale de chaque curseur : 0 et 255. L'attribut value indique la position du curseur à l'ouverture du document. Cet attribut étant initialisé à 0 pour les trois curseurs, ils seront tous trois positionnés au minimum à l'ouverture de la page. Enfin, pour relier la position de chaque curseur avec la couleur d'arrière-plan de la balise div1, il faut définir une fonction événementielle qui sera exécutée à chaque modification d'un des curseurs. Pour cela, il suffit de capturer l'événement onchange. La fonction exécutée a pour nom changeCouleur(). Son code est quasiment identique à celui utilisé dans les deux rubriques précédentes. Reportez-vous à la rubrique "Codes couleur en JavaScript" pour en savoir plus à son sujet.
  26. 26. Mise en exergue d'un texte La balise <blockquote></blockquote> permet de différentier un bloc de texte du texte courant. Il suffit d'entourer le bloc de texte concerné par les balises <blockquote> et </blockquote> pour le mettre en retrait :
  27. 27. Dans cet exemple, le document est constitué de deux paragraphes identiques. Le premier occupe toute la largeur de la fenêtre. Le deuxième, placé entre les balises <blockquote> et </blockquote> subit un retrait à droite et à gauche : Si cette mise en forme n'est pas suffisante, vous pouvez la compléter par quelques instructions CSS. Pour cela, il suffit de redéfinir le style blockquote. Vous pourriez par exemple :
  28. 28. - augmenter les marges à gauche et à droite du texte en agissant sur les propriétés margin-left et margin-right (lignes 7 et 8) ; - ajouter une indentation sur la première ligne du bloc de texte (ligne 9) ; - modifier la couleur du texte (ligne 10) ; - afficher le texte en italique (ligne 11) ; - ajouter une bordure autour du texte (lignes 12 à 14). Ici, la bordure est solide, épaisse de 1 pixel et de couleur bleu ciel ; - ajouter une marge intérieure entre le texte et la bordure (ligne 15). Voici le résultat dans Internet Explorer :
  29. 29. Span vs div La balise <span> est comparable à la balise <div>, à ceci près que la première est de type inline et la deuxième de type block. Deux balises <span> consécutives apparaîtront donc sur une même ligne, alors que deux balises <div> consécutives apparaîtront sur deux lignes différentes. Pour illustrer ce que je viens de dire, voici un peu de code HTML.
  30. 30. Les lignes 8 et 9 définissent deux balises <span>. Quant à elles, les lignes 13 et 14 définissent deux balises <div>. Comme prévu, les balises <span> apparaissent sur une même ligne, alors que les balises <div> apparaissent sur deux lignes différentes.
  31. 31. Vérifier la validité du code Le W3C met à disposition des développeurs Web un validateur de code HTML. Pour l'utiliser, rendez- vous sur la page http://validator.w3.org :
  32. 32. Si le code à tester se trouve sur le Web, il vous suffit de préciser son URL dans la zone de texte Address et de cliquer sur Check. Si le code se trouve sur votre ordinateur, vous pouvez aussi le soumettre au validateur. Sélectionnez Validate by Direct Input. Copiez-collez le code à tester dans la zone réservée à cet effet et cliquez sur Check. Dans cet exemple, une erreur et trois avertissements ressortent de l'analyse. Déplacez la barre de défilement verticale pour en savoir un peu plus sur les problèmes rencontrés. L'erreur vient du fait que la balise <title> n'a pas été spécifiée dans l'en-tête. Le premier avertissement indique que le code analysé est de type HTML5 et que le validateur peut ne pas être suffisamment précis. Le deuxième avertissement vient du fait qu'aucun encodage de caractère n'a été spécifié. Le troisième avertissement indique que l'encodage de caractère supposé est UTF-8. Cet avertissement ne serait pas apparu si la page avait été testée en ligne et non depuis l'ordinateur local. Ces problèmes sont très simples à régler.
  33. 33. 1) Nous définissons une balise <title> dans l'en-tête : <title>Le sélecteur astérisque</title> 2) Nous définissons une balise <meta> pour spécifier le type d'encodage des caractères : <meta charset="UTF-8" /> Nous cliquons sur Revalidate pour tester le nouveau code. Cette fois-ci, le code est correct :
  34. 34. CSS 3 Une première approche des styles CSS La maîtrise du langage CSS est un vrai plus pour les concepteurs de pages HTML. Par son intermédiaire, il est possible de décorréler la mise en page du contenu. Ainsi, vous utilisez un document HTML pour définir le contenu (textes, images, vidéos) et une feuille de styles pour définir la mise en forme et la mise en page de tous les éléments contenus dans le document HTML. Il est même possible d'utiliser une même feuille de styles pour mettre en forme plusieurs documents HTML. C'est d'ailleurs ce qui assure l'uniformité des pages d'un site Web. Un style CSS peut être défini à trois emplacements :  Dans un document HTML, à l'intérieur d'une balise.  Dans l'en-tête d'un document HTML.  Dans un fichier spécifique d'extension CSS. Dans les rubriques suivantes, vous allez découvrir chacune de ces possibilités et comprendre quand vous devez les utiliser. Un style CSS dans une balise Pour insérer un style dans une balise, vous utiliserez l'attribut style : <balise style="propriété1: valeur1; propriété2: valeur2; etc."> A titre d'exemple, nous allons utiliser une propriété CSS pour modifier la couleur d'une balise de titre <h2>, puis la couleur et la taille des caractères d'une autre balise <h2>.
  35. 35. La ligne 5 affiche un titre <h2>. La ligne 6 affiche un titre <h2> en modifiant sa couleur. Ici, nous avons choisi d'utiliser la couleur prédéfinie red, mais nous aurions tout aussi bien pu utiliser une couleur RVB. La ligne 7 affiche un titre <h2> en modifiant sa couleur et sa taille. La propriété font-size définit la taille de la balise, en pixels. Comme vous le voyez, chaque propriété est suivie d'une valeur et d'un point-virgule. Cette remarque s'étend à toutes les propriétés RSS que vous manipulerez. Une autre remarque : un style défini à l'intérieur d'une balise ne concerne que cette balise. Il ne s'étend absolument pas aux balises de même type qui figurent dans le document. Dans cet exemple, les styles définis dans chacune des balises <h2> n'entrent jamais en conflit. Des styles dans l'en-tête du document Dans la rubrique précédente, vous avez appris à insérer l'attribut style dans une balise quelconque pour modifier ses caractéristiques. Dans cette rubrique, je vais vous montrer comment définir une feuille de styles interne, entre les balises <head> et </head> de la feuille. Pour cela, vous devez insérer une balise <style type="text/css"> et terminer cette balise avec une balise </style>. Les styles seront redéfinis entre ces deux balises.
  36. 36. A titre d'exemple, nous allons redéfinir les caractéristiques de la balise <h2>. Pour cela, nous précisons le nom de la balise, sans l'encadrer par les caractères "<" et ">", puis nous insérons des accolades ouvrante et fermante à sa suite. Les propriétés modifiées seront insérées entre les deux accolades. Ici, nous redéfinissons la couleur et la taille des balises <h2>. Comme vous pouvez le voir, le simple fait d'insérer une balise <h2> dans le document lui fait adopter la couleur et la taille définie dans la feuille de styles. SI vous insérez une autre balise <h2>, elle adopte également les caractéristiques redéfinies dans la feuille de styles interne. Tout le document est donc concerné par la feuille de styles.
  37. 37. Des styles dans un fichier externe CSS Dans la rubrique précédente, vous avez vu que les styles pouvaient être définis dans une feuille de styles, à l'intérieur du document HTML, entre les balises <style> et </style>. Dans cette rubrique, je vais vous montrer comment regrouper les styles dans un fichier annexe. A titre d'exemple, nous allons redéfinir le style de titre H2. Pour cela, nous créons un nouveau fichier dans Notepad++. Pour modifier le style h2, nous écrivons h2, suivi d'une accolade ouvrante puis d'une accolade fermante. A l'intérieur des accolades, nous définissons les propriétés à modifier :  la couleur du texte sera rouge ;  la taille des caractères est fixée à 50 pixels ;  les caractères seront affichés en italique. Cette feuille de styles est sauvegardée dans le fichier styles.css.
  38. 38. Pour faire référence à la feuille de styles que nous venons de définir, nous utiliserons la balise <link>, en précisant que :  le document référencé est une feuille de styles ;  la feuille de styles contient du texte ;  le fichier à utiliser est styles.css. Cette simple balise suffit pour donner accès à tous les styles qui ont été redéfinis dans la feuille de styles.
  39. 39. Le document est affiché dans Internet Explorer avec la commande Launch in IE dans le menu Exécution. Le résultat est bien conforme à ce qui était attendu : les deux balises <h2> ont les caractéristiques définies dans la feuille de styles externe. Feuille de styles ou attribut style ? Dans les trois rubriques précédentes, vous avez vu qu'il était possible de définir un style CSS dans une balise HTML, dans une feuille de styles intégrée au document HTML ou dans une feuille de style externe, stockée dans un fichier d'extension .css. La troisième technique est celle qui donne les meilleurs résultats en termes de réutilisation. En effet, la feuille de styles externe peut être utilisée par toutes les pages d'un site, ce qui assure leur uniformité et soulage l'écriture. Il suffit pour cela d'insérer une balise <link> dans chaque page concernée. L'utilisation d'une feuille de styles interne est intéressante lorsque le nombre de pages est très limité. Quant à la modification des styles dans les balises, elle est marginale et ne sert qu'à "surclasser" un style, c'est à dire à modifier les caractéristiques d'un style qui a été défini dans une feuille de styles externe ou interne. De la même manière, les styles définis dans une feuille de styles interne surclassent ceux définis dans une feuille de style externe. Il y a donc deux niveaux de surclassement possibles : les styles définis dans une feuille de styles externe sont surclassés par ceux définis dans une feuille de styles interne qui sont eux-mêmes surclassés par ceux définis dans les balises HTML.
  40. 40. Lorsque vous définissez un site Web, la démarche consiste à créer une feuille de styles externe dans laquelle vous définissez les styles généraux à utiliser dans vos pages. Si une page doit utiliser un ou plusieurs styles spécifiques, il vous suffit de les redéfinir dans une feuille de styles interne. Enfin, si une balise doit utiliser un style particulier, il vous suffit de le définir dans la balise en utilisant un attribut style. Surclasser un style Pour mettre en évidence le surclassement des styles, j'ai redéfini les styles h1, h2 et h3 dans une feuille de styles externe nommée styles.css. Comme vous pouvez le voir, le style h1 aura une couleur rouge, une taille de 50 pixels et des caractères gras. Le style h2 aura une couleur bleue, une taille de 35 pixels et des caractères italiques. Enfin, le style h3 aura une couleur verte et une taille de 25 pixels. Nous allons utiliser un document HTML élémentaire qui utilise la feuille de styles styles.css et se contente d'afficher un titre de niveau 1, un titre de niveau 2, un titre de niveau 3 et un simple texte. Affichons ce document dans Internet Explorer. Le résultat est bien conforme à ce qui était attendu :
  41. 41. Nous allons maintenant surclasser le style h2 en définissant une feuille de styles interne. Pour cela, nous ajoutons une balise <style> dans l'en-tête du document et nous modifions la couleur du style h2 :
  42. 42. Affichons ce document dans Internet Explorer. Comme vous le voyez, la couleur du titre h2 est modifiée par le style interne. Par contre, la taille des caractères est inchangée et les caractères apparaissent en italique. Il y a donc eu un surclassement partiel du style h2.
  43. 43. Nous allons maintenant ajouter un attribut style dans la balise <h2>. Ici, nous demandons que les textes de style h2 soient affichés en caractères noirs :
  44. 44. Affichons le document ainsi modifié dans Internet Explorer. Comme vous le voyez, la couleur du titre h2 est modifiée par le style de la balise h2. Il y a donc eu un premier surclassement via la feuille de styles interne et un deuxième via l'attribut style de la balise <h2> : Les classes CSS Une classe CSS permet de modifier les caractéristiques d'une balise en fonction de son attribut class. Pour mieux comprendre de quoi il est question, nous allons raisonner sur un exemple. Trois balises <h2> sont ajoutées au document HTML. La première a un attribut class initialisé à rouge, la deuxième a un attribut class initialisé à noir et la troisième a un attribut class initialisé à vert. Plus simplement, on dira que la première balise <h2> est de classe rouge, la deuxième de classe noir et la troisième de classe vert.
  45. 45. Affichons le document dans un navigateur. Les trois titres H2 apparaissent en noir. Si vous trouvez cela étrange, interrogez-vous : est-ce qu'il ne manque pas un peu de code CSS pour obtenir les couleurs demandées ? Bien sûr que si : il faut définir les classes rouge, noir et vert dans le fichier styles2.css (puisque c'est ce fichier qui est spécifié dans la balise <link>). Voici la feuille de styles à utiliser :
  46. 46. Comme vous le voyez, la définition d'une classe n'a rien d'insurmontable. Pour cela, il suffit de faire précéder le nom de la classe d'un point décimal, de le faire suivre d'un espace et d'accolades ouvrante et fermante et de préciser la ou les propriétés à modifier entre les accolades. Ici :  la classe noir affecte la valeur black à la propriété color ;  la classe rouge affecte la valeur red à la propriété color ;  la classe vert affecte la valeur green à la propriété color. Affichons à nouveau le document dans le navigateur. Cette fois-ci l'effet recherché est bien obtenu : Là où les classes deviennent vraiment magiques, c'est quand vous les utilisez dans plusieurs balises. Ainsi par exemple, vous pouvez très bien utiliser les classes noir, rouge et vert dans des balises <p>, <td> ou n'importe quelle autre balise qui concerne des éléments textuels.
  47. 47. Ici par exemple, nous définissons un tableau constitué de deux cellules. La première contient un texte affiché en vert via la balise <td> de classe vert et la deuxième un texte affiché en rouge via la balise <td> de classe rouge : Affichons ce document dans un navigateur. Intéressant non ?
  48. 48. Une classe sélective Dans la section précédente, vous avez vu qu'une classe pouvait être appliquée à plusieurs balises en affectant le nom de la classe à l'attribut class des balises concernées. Ici, je vais vous montrer comment restreindre le champ d'action d'une classe. Le document HTML est des plus classiques. Il fait référence à la feuille de styles externe styles3.css. Le corps du document contient un titre de niveau 2 et de classe rouge, un paragraphe de classe rouge et un simple texte sans classe. Maintenant, nous allons définir une classe rouge spécifique à la balise <h2> et une autre classe rouge spécifique à la balise <p>. Pour cela, il suffit de faire précéder le point décimal de la classe par le nom de la balise concernée. C'est ainsi que nous définissons la classe p.rouge qui sera dédiée à la balise <p> et la classe h2.rouge qui sera dédiée à la balise <h2>. Pour bien montrer que les caractéristiques de ces deux classes sont différentes, la propriété font-family (c'est-à-dire la police) de la classe p.rouge est initialisée avec la valeur Courrier New et celle de la classe h2.rouge avec la valeur fantasy. Remarquez au passage les guillemets qui entourent le nom de la police dans la classe p.rouge. Ils sont nécessaires parce que le nom de la police contient un espace. Enfin, la taille des caractères de classe h2.rouge est fixée à 30 pixels avec la propriété font-size. Affichons ce document dans un navigateur. Comme vous pouvez le voir, la classe rouge est bien différente lorsqu'elle est appliquée aux balises <h2> et <p>.
  49. 49. Une connexion unique CSS-HTML Les classes CSS sont faites pour être utilisées à plusieurs endroits dans le code HTML. Ainsi par exemple, plusieurs balises <p>, plusieurs balises de titre <h1> à <h6> et plusieurs balises <td> peuvent utiliser la même classe. Lorsqu'une balise HTML à laquelle on désire affecter un style est utilisée une et une seule fois dans un document, il est possible de remplacer l'attribut class de cette balise par un attribut id. Dans ce cas, le sélecteur CSS à utiliser est non plus le point décimal mais le caractère #. Passons à la pratique. Ce document HTML fait référence à la feuille de styles externe styles4.css. Le corps du document contient deux balises <p>. Un attribut id identifie de façon unique la première balise <p>.
  50. 50. Il ne reste plus qu'à définir le sélecteur fantaisie dans la feuille de styles. Le mot fantaisie est précédé d'un #, ce qui le mettra en relation avec la balise dont l'attribut id a pour valeur fantaisie. Et donc avec notre première balise <p>. Pour bien différentier le texte d'id fantaisie, nous définissons une police fantasy, un style italique et une taille de caractères égale à 30 pixels :
  51. 51. Il ne reste plus qu'à afficher le document HTML dans un navigateur. Voici le résultat :
  52. 52. Un premier pas vers l'interactivité en CSS Le langage CSS peut être utilisé pour réagir à certains événements. Par exemple, une action peut être effectuée au survol d'un élément HTML par le pointeur de la souris. Cette prouesse réside dans l'utilisation de la pseudo-classe :hover. Les pseudo-classes sont faciles à repérer : elles commencent toujours par le sélecteur :. A titre d'exemple, je vais vous montrer comment modifier le contour d'une image lorsqu'elle est survolée par la souris. Le document utilisé est des plus simples. Il contient une balise <img> d'identifiant montagne pour afficher l'image montagne.jpg.
  53. 53. Le code CSS se trouve dans la feuille de styles style5.css. Il est également très simple. Le seul style qui y est défini concerne l'identifiant montagne (et donc l'image affichée dans le document). La pseudo- classe hover applique le code CSS à l'image lorsque le pointeur de la souris se trouve au-dessus de l'image. Ce code modifie la bordure de l'image. Les trois valeurs passées à la propriété border sont : - L'épaisseur de la bordure en pixels. Ici 4 pixels. - Le style de la bordure. Ici, le mot dashed provoquera l'apparition de tirets. Vous auriez également pu utiliser les valeurs dotted (pointillés), solid (trait plein), double (bordure double), groove (rainure), ridge (relief), inset (relief intérieur) ou outset (relief extérieur). - La troisième valeur indique la couleur. Le nom de la couleur peut être pioché dans les seize couleurs de base, dans les couleurs étendues (reportez-vous à la page http://www.mediaforma.com/couleurs-html-etendues/ pour prendre connaissance des couleurs utilisables) ou encore codé en RVB avec une valeur hexadécimale. Dans cet exemple, la bordure sera rouge.
  54. 54. Il ne reste plus qu'à afficher le résultat dans un navigateur avec une des commandes Launch du menu Exécution. Comme vous le voyez, cette technique fonctionne à la perfection : la bordure apparaît lorsque le pointeur de la souris survole l'image. Elle disparaît lorsque le pointeur de la souris est placé en dehors de l'image.
  55. 55. Si vous regardez d'un peu plus prêt, vous verrez qu'un décalage de l'image assez désagréable se produit lors de l'affichage et de la disparition des pointillés. Nous allons voir comment le supprimer dans la rubrique suivante. Positionner un objet avec des coordonnées absolues Dans la rubrique précédente, vous avez appris à afficher une bordure autour d'une image lorsque le pointeur de la souris la survole. Malheureusement, l'image est décalée vers la droite et vers le bas à l'affichage des bordures. Elle est décalée en sens inverse, c'est-à-dire vers la gauche et vers le haut lors de la disparition des bordures. Pour mieux comprendre ce qu'il se passe, nous allons augmenter l'épaisseur de la bordure. Pour cela, il faut modifier la première valeur de la propriété border. Nous allons par exemple choisir une bordure de 20 pixels. Comme vous le voyez, l'ampleur du décalage est liée à l'épaisseur de la bordure :
  56. 56. Pour éliminer ce problème, il faudrait que l'image occupe une position fixe, qu'elle comporte une bordure ou non. Pour cela, nous allons utiliser les propriétés CSS position, top et left. Tout va se passer dans le code CSS. L'image a pour identifiant montagne. Nous commençons par définir un style #montagne pour positionner l'image dans la fenêtre du navigateur. Le coin supérieur gauche de la zone d'affichage a pour coordonnées 0,0. La première coordonnée représente l'abscisse, c'est-à-dire le décalage horizontal et la deuxième l'ordonnée, c'est-à-dire le décalage vertical.
  57. 57. Pour indiquer que l'image doit se trouver à une position bien précise, commencez par affecter la valeur absolute à la propriété position. Définissez ensuite les coordonnées du coin supérieur gauche de l'image dans les propriétés top et left. Ici, l'image sera située à 30 pixels du bord supérieur et à 30 pixels du bord gauche. Affichons le résultat dans un navigateur. Malheureusement, rien n'a changé, si ce n'est que l'image se trouve désormais à 30 pixels des bords supérieur et gauche de la zone d'affichage. Pour que l'image ne soit plus décalée, nous allons agir sur le style #montagne:hover. Dans cet exemple, la bordure a une épaisseur de 20 pixels. Cette épaisseur étant prise en compte dans la position de l'image, nous allons la soustraire des propriétés top et left. L'image se trouve toujours à une position absolue, mais cette fois-ci à 10 pixels des bords supérieur et gauche.
  58. 58. Affichons le résultat dans Internet Explorer. L'image ne se décale plus lors de l'affichage et de la disparition des pointillés.
  59. 59. Gestion des débordements dans une div Dans la section précédente, vous avez appris à définir une mise en page élémentaire en utilisant trois balises <div>. Le code HTML s'est comporté parfaitement et le texte affecté à chaque balise est resté cantonné à la zone qui lui était affectée. Nous allons maintenant ajouter un texte trop long dans le bandeau. Pour cela, nous remplaçons le texte "Bandeau supérieur" par deux lignes "Lorem ipsum…" en effectuant un copier/coller depuis la balise de contenu.
  60. 60. Exécutons ce code. Comme vous pouvez le voir, l'en-tête et la zone de contenu se chevauchent :
  61. 61. Pour éviter ce problème, nous allons définir la propriété overflow dans le code CSS de la balise d'en- tête : overflow: scroll; Exécutez le code HTML dans votre navigateur. Désormais, deux barres de défilement permettent de déplacer le contenu de l'en-tête dans l'espace qui lui est dédié. C'est-à-dire 800 pixels sur 60. Simple et efficace !
  62. 62. J'entends déjà certains d'entre vous me dire : "D'accord, c'est très bien, mais, la barre de défilement horizontale ne sert à rien, si ce n'est à diminuer la zone réservée au bandeau supérieur !". Tout à fait exact. C'est pourquoi nous allons la supprimer en définissant deux propriétés overflow : une horizontale et une verticale. overflow-y: scroll; overflow-x: hidden; Exécutez le code HTML. L'affichage est maintenant optimum : la barre de défilement horizontal a disparu et la barre de défilement vertical permet de se déplacer dans le texte de l'en-tête.
  63. 63. Pour terminer, sachez que la propriété overflow peut être initialisée avec d'autres valeurs :  visible : le contenu n'est pas rogné (c'est la valeur par défaut). Si le contenu dépasse la taille qui lui est allouée, il déborde.  auto : c'est le navigateur qui décide de l'action à accomplir en fonction de la taille du contenu. Une bande verticale à gauche du contenu Vous savez maintenant définir une mise en page contenant un bandeau supérieur, une zone de contenu et un pied de page. Vous savez également cantonner chacun de ces éléments à l'espace qui lui est réservé en utilisant la propriété overflow. Que diriez-vous d'ajouter une bande verticale à gauche de la zone de contenu. Par exemple pour y placer un menu donnant accès à d'autres pages Web ? Pour cela, nous allons définir une quatrième balise <div> un peu particulière. Nous affectons l'identifiant menu à cette balise. Puis nous y ajoutons quelques liens qui ne pointent vers aucune page spécifique. Ici, il ne tient qu'à vous de remplacer le # par de vraies URL pour rendre ces liens fonctionnels. Pour améliorer la mise en page, les liens sont placés dans une liste <ul> :
  64. 64. Passons au code CSS. Un sélecteur # identifie l'attribut id de valeur menu. La largeur de la nouvelle balise <div> est fixée à 150 pixels. Sa hauteur est identique à celle de la balise de contenu : 400 pixels. Nous choisissons une couleur d'arrière-plan différente de celles utilisées dans les trois autres balises. Ici encore, le code hexadécimal a été obtenu sur le site http://www.code-couleur.com/. Pour indiquer que la balise <div> menu doit flotter sur le côté gauche, nous utilisons la propriété float et nous lui affectons la valeur left.
  65. 65. Il ne reste plus qu'à afficher le code HTML dans le navigateur.
  66. 66. Un bas de page … en bas de la page Dans les rubriques précédentes, vous avez appris à utiliser des balises <div> pour créer une page comportant un en-tête, un bas de page, un menu et une zone de contenu. Tout cela fonctionne très bien, mais il faut bien avouer que le bas de page ne se trouve pas en bas de la page. Du moins pas dans tous les cas. Il se contente de suivre le menu et la zone de contenu. Dans cette rubrique, je vous propose de définir un bas de page qui s'affichera systématiquement en bas de la page. Pour cela, nous allons raisonner sur un code plus simple que le précédent. Ici, nous n'utiliserons qu'une balise de contenu et une balise de bas de page. Comme vous pouvez le voir, la balise de bas de page est incluse dans la balise de contenu. Contrairement aux rubriques précédentes, où les balises de contenu et de bas de pages étaient au même niveau hiérarchique.
  67. 67. Ce document HTML utilise la feuille de styles styles8.css. Examinons son contenu. Les lignes 1 à 4 indiquent que le document s'étale sur toute la hauteur de la page. Les lignes 6 à 10 définissent les caractéristiques de la balise <div> d'identifiant contenu, c’est-à-dire de la balise qui englobe le bas de page. Cette balise occupera toute la hauteur disponible et elle aura une largeur de 800 pixels. Les lignes 12 à 20 définissent les caractéristiques de la balise <div> d'identifiant pied, c'est-à-dire du bas de page. Cette balise est positionnée de façon absolue. En initialisant les propriétés bottom et left à 0, le pied de page sera toujours dans la partie inférieure de la fenêtre. Les dimensions du pied de page sont fixées à 800 pixels sur 60 et une couleur d'arrière-plan lui est affectée pour bien voir ses limites :
  68. 68. Il ne reste plus qu'à afficher le résultat dans un navigateur :
  69. 69. Comme vous pouvez le voir, le pied de page reste ancré à la partie inférieure de la page lorsque la fenêtre du navigateur est redimensionnée. Mise en page complète avec bas de page fixe Dans cette rubrique, nous allons aller plus loin en définissant un bandeau ancré dans la partie supérieure de la page, un pied de page ancré dans la partie inférieure de la page, ainsi qu'un menu et une zone de contenu qui se partagent l'espace restant. Le principe reste le même : une balise <div> occupe toute la hauteur disponible dans le navigateur et contient les autres balises, c'est-à-dire le bandeau, le menu, le contenu et le bas de page. Examinons le code CSS.  Les lignes 1 à 4 indiquent que le document s'étale sur toute la hauteur de la page.  Les lignes 6 à 10 indiquent que le conteneur fait 800 pixels de large et s'étale sur toute la hauteur disponible.
  70. 70.  Les lignes 12 à 21 définissent les caractéristiques du bandeau. Ce dernier est positionné de façon absolue, en haut et à gauche de la fenêtre. Il a une largeur de 800 pixels, une hauteur de 60 pixels, une couleur qui lui est propre et une marge de 10 pixels entoure son contenu.  Les lignes 23 à 31 définissent les caractéristiques du menu. Ce dernier est positionné de façon absolue, à 60 pixels du bord supérieur et à gauche. Il est large de 130 pixels, a une couleur spécifique et une marge interne de 10 pixels.  Les lignes 33 à 41 définissent les caractéristiques de la zone de contenu. Tout comme les autres divisions, elle est positionnée de façon absolue, à 60 pixels du bord supérieur et à 150 pixels du bord gauche. Sa largeur est égale à 650 pixels. Elle a une couleur spécifique et une marge interne de 10 pixels.  Enfin, les lignes 43 à 52 définissent les caractéristiques du pied de page. Ce dernier est positionné de façon absolue, en bas et à gauche de la zone d'affichage du navigateur. Il a une largeur de 800 pixels, une hauteur de 60 pixels, une couleur spécifique et une marge interne de 10 pixels.
  71. 71. Il ne reste plus qu'à afficher le document HTML dans un navigateur et à constater que le pied de page reste ancré à la partie inférieure de la fenêtre lorsqu'elle est redimensionnée.
  72. 72. Un design à deux colonnes Dans cette rubrique, je vais vous montrer comment faire une mise en page sur deux colonnes. La première de largeur fixe et la deuxième qui occupe le reste de l'espace horizontal disponible. Vous vous en doutez certainement : chacune des colonnes sera représentée par une balise <div>. Le document HTML est des plus classiques. Il contient deux balises <div> d'identifiant col1 et col2 et un texte quelconque est placé dans chacune des balises.
  73. 73. Le code CSS est bien plus intéressant. Les lignes 1 à 7 définissent les caractéristiques de la première balise <div>. Cette dernière sera flottante, sur le côté gauche de la fenêtre. Elle aura une largeur de 200 pixels, une couleur spécifique et une marge intérieure de 10 pixels. Les lignes 9 à 14 précisent les caractéristiques de la deuxième balise <div>. En définissant une marge à gauche de 220 pixels, cette balise s'insère à droite de la première balise <div>. Vous vous demandez peut-être pourquoi avoir défini une marge de 220 pixels et non de 200 pixels, puisque la première balise <div> est large de 200 pixels. Ajoutez à ces 200 pixels la marge gauche de 10 pixels et la marge droite de 10 pixels de la première balise <div> et vous obtenez une marge de 220 pixels. La ligne 12 définit la couleur d'arrière-plan de la deuxième balise <div> et la ligne 13 sa marge intérieure.
  74. 74. Il ne reste plus qu'à afficher le document HTML dans un navigateur. Lorsque l'on redimensionne la fenêtre du navigateur, la deuxième balise <div> s'étire pour occuper tout l'espace horizontal qui lui est donné.
  75. 75. Un design à trois colonnes Dans cette section, nous allons définir un design sur trois colonnes. La première colonnes sera ancrée à gauche et aura une largeur fixe. La troisième colonne sera ancrée à droite et aura une largeur fixe. Quant à la deuxième colonne, elle occupera tout l'espace laissé libre par les deux autres colonnes. Le code HTML est rudimentaire : il contient trois balises <div> consécutives, remplies avec un peu de texte :
  76. 76. Le code CSS est bien plus intéressant. Les lignes 1 à 7 définissent les caractéristiques de la première balise <div>. La colonne est flottante, ancrée à gauche, large de 200 pixels, a une couleur spécifique et une marge interne de 10 pixels. Les lignes 9 à 15 définissent les caractéristiques de la troisième balise <div>. La colonne est flottante, ancrée à droite, large de 250 pixels, a une couleur spécifique et une marge interne de 10 pixels. Enfin, les lignes 17 à 23 définissent les caractéristiques de la deuxième balise <div>, qui se trouve entre les deux colonnes flottantes gauche et droite. Cette balise est décalée de 220 pixels à gauche, c'est-à-dire de la largeur de la balise flottante gauche augmentée de ses marges internes. Elle est également décalée de 270 pixels à droite, c'est-à-dire de la largeur de la balise flottante droite augmentée de ses marges internes. Tout comme les deux autres <div>, cette balise a une couleur spécifique et une marge interne de 10 pixels.
  77. 77. Affichons le résultat du code HTML dans un navigateur. Comme vous pouvez le voir la première et la troisième colonne sont ancrées sur les bords gauche et droit de la fenêtre. Quant à la deuxième colonne, elle occupe toute la largeur disponible lorsque la fenêtre est redimensionnée.
  78. 78. Trois colonnes en CSS3 Vous avez vu à quel point il était simple de définir un design sur trois colonnes. Que diriez-vous de faire encore plus simple en utilisant CSS3 ? Commencez par définir une balise <div> et remplissez-la avec un texte assez long : 300 ou 400 mots par exemple. Ici, cette balise a pour classe troiscol.
  79. 79. La mise en page sur 3 colonnes sera définie dans la feuille de styles styles12.css. Vous allez devoir définir :  Le nombre de colonnes : column-count ;  La largeur des colonnes : column-width ;  L'espace entre les colonnes : column-gap. Attention : Tous les navigateurs ne sont pas encore compatibles avec toutes les instructions CSS3. Pour l'instant, seuls Firefox et Chrome le sont, à condition de spécifier les préfixes -moz (pour Firefox) et -webkit (pour Chrome) avant les propriétés column-count, column-width et column-gap. Dans cet exemple, le texte sera réparti sur trois colonnes de largeur 160 pixels espacées entre elles de 20 pixels.
  80. 80. Comme prévu, Firefox et Webkit affichent le résultat attendu :
  81. 81. Par contre Internet Explorer (ici en version 9), n'est pas en mesure d'interpréter les instructions CSS : Les possibilités offertes par CSS3 au niveau du multicolonnage sont certes très intéressantes et aussi, très simple à mettre en œuvre. Cependant, étant donné que les propriétés column ne sont pas compatibles avec tous les navigateurs, je vous conseille de les éviter pour l'instant. Par contre, vous pouvez utiliser les techniques de multicolonnage présentées dans les rubriques précédentes. Elles ont l'avantage de fonctionner sur tous les navigateurs. Alignement avec un tableau Dans la vidéo précédente, les zones de saisie n'étaient pas alignées verticalement. Nous allons voir comment améliorer leur mise en page en utilisant un tableau. Tant que nous y sommes, nous allons centrer horizontalement les deux div et le bouton dans le tableau pour obtenir quelque chose comme ceci :
  82. 82. Examinons le code HTML. Comme vous pouvez le voir, les différents éléments affichés dans le document ont été placés dans un tableau comportant deux colonnes. Les deux balises <div> et le bouton de commande occupent deux colonnes dans le tableau. Pour cela, il suffit d'affecter la valeur 2 à l'attribut colspan de ces trois éléments. Par contre, les éléments concernant les composantes Rouge, Vert et Bleu sont répartis sur deux colonnes : à gauche les libellés des couleurs, à droite, les zones de saisie. Remarquez l'utilisation de la propriété CSS text-align pour aligner à gauche les trois zones de saisie. <table> <tr><td colspan=2><div id="div1"></div></td></tr> <tr><td>Rouge</td><td style="text-align:left;"><input type="text" id="rouge"> (0 à 255)</td></tr> <tr><td>Vert</td><td style="text-align:left;"><input type="text" id="vert"> (0 à 255)</td></tr> <tr><td>Bleu</td><td style="text-align:left;"><input type="text" id="bleu"> (0 à 255)</td></tr> <tr><td colspan=2><div id="hexa">Définissez les composantes RVB et cliquez sur le bouton</div></td></tr> <tr><td colspan=2><input type="button" onclick="couleur()" value="Afficher la couleur correspondante"></td></tr> </table>
  83. 83. Examinons le code CSS.  La première balise <div> a pour identifiant div1. Ses caractéristiques sont définies entre les lignes 5 et 12. Les trois premières instructions définissent la couleur et les dimensions de la balise <div>. Quant aux deux dernières instructions, elles provoquent le centrage de la balise dans le tableau.  Les lignes 13 à 17 définissent la mise en forme des cellules du tableau. Le texte sera centré dans les cellules et les cellules auront une largeur de 300 pixels. Le code JavaScript est identique à celui de la rubrique précédente. N'hésitez pas à vous y reporter pour avoir de plus amples renseignements à son sujet.
  84. 84. Plus loin avec les sélecteurs CSS Dans les rubriques précédentes, vous avez appris à définir les sélecteurs "." et "#" pour modifier respectivement le style d'une balise possédant un certain attribut id ou class.
  85. 85. Je vous propose d'aller plus loin en découvrant quelques-unes des possibilités offertes par les sélecteurs. Ici, nous allons utiliser une feuille de styles interne, mais vous pourriez tout aussi bien utiliser une feuille de styles externe, stockée dans un fichier d'extension .css. Commencez par insérer une balise <style> et son terminateur </style> dans l'en-tête du document. Pour redéfinir les caractéristiques de la balise <h2>, tapez h2, sans les caractères "<" et ">" entre les balises <style> et </style>. Ajoutez une accolade ouvrante et une accolade fermante et indiquez les propriétés à modifier entre les accolades. Ici par exemple, nous modifions la couleur des caractères de titre h2. Allons un peu plus loin. Supposons que le document contienne plusieurs titres de niveau 2, et donc, plusieurs balises <h2>. En modifiant le style h2, toutes les balises <h2> vont être affectées. Par contre, pour que seules certaines d'entre elles soient modifiées, vous utiliserez une ou plusieurs classes. Ici par exemple, toutes les balises <h2> sont de couleur rouge, mais seules les balises <h2> de classe special sont en italique.
  86. 86. Voyons le résultat de ce code dans un navigateur. Comme vous pouvez le voir, les deux balises <h2> sont de couleur rouge, mais seule la balise <h2> de classe special est en italique :
  87. 87. Cette technique est également applicable aux attributs id, via le sélecteur #. Ici, toutes les balises <h2> sont de couleur green, mais seules la balise <h2> d'identifiant special est en italique :
  88. 88. Voyons le résultat dans un navigateur avec une commande Launch dans le menu Exécution :
  89. 89. Un sélecteur descendant Dans la section précédente, vous avez appris à limiter les modifications de styles CSS à une balise spécifique dont l'attribut class ou id a une valeur particulière. Dans cette section, je vais vous montrer comment utiliser un sélecteur descendant pour modifier les caractéristiques d'une balise enfant d'une autre balise. Dans cet exemple, nous allons modifier le style des balises <li> enfants d'une balise <div>. Le corps du document contient deux listes UL identiques. La première est spécifiée à l'extérieur d'une balise <div> et la deuxième à l'intérieur d'une balise <div>. Pour modifier le style des balises <li> contenues dans une balise <div>, nous allons utiliser un sélecteur descendant en précisant la balise parent (div) et la balise enfant (li). Dans cet exemple, les balises <li> contenues dans une balise <div> seront de couleur rouge :
  90. 90. Exécutons ce code dans un navigateur. Comme vous pouvez le voir, seules les balises <li> contenues dans une balise <div> sont affectées par le changement de style.
  91. 91. Un sélecteur d'attribut Pour en terminer avec les sélecteurs CSS, nous allons nous intéresser aux sélecteurs d'attributs. Rappelez-vous, les attributs sont placés à l'intérieur des balises HTML. Ils précisent les caractéristiques des balises dans lesquelles ils se trouvent. Dans cet exemple, nous allons modifier la mise en forme des éléments d'un tableau. Le tableau contient quatre lignes et trois colonnes. Sur la première ligne, les trois cellules sont fusionnées à l'aide de l'attribut colspan. Sur la deuxième ligne, les cellules ne sont pas fusionnées. Sur la troisième ligne, les deux premières lignes sont fusionnées et la troisième cellule est indépendante. Enfin, sur la quatrième ligne, les trois cellules sont fusionnées. Pour bien voir la mise en forme des cellules, l'attribut border est ajouté à la balise <table>.
  92. 92. Exécutons ce code dans Internet Explorer. Le tableau se présente bien comme prévu. Deux de ses lignes ont trois cellules fusionnées et une de ses lignes a deux cellules fusionnées : Nous allons maintenant ajouter un sélecteur d'attribut pour centrer le texte dans les cellules fusionnées. Pour cela, il suffit de préciser l'attribut entre crochets et de définir la nouvelle mise en forme. Ici, l'attribut à utiliser est colspan et la mise en forme définit le centrage du texte :
  93. 93. Examinons le résultat dans un navigateur. Comme vous pouvez le voir, toutes les cellules fusionnées ont leur contenu centré. Supposons maintenant que vous ne vouliez centrer que les cellules fusionnées dont l'attribut colspan a pour valeur 3. Ce réglage devrait centrer les lignes 1 et 4 du tableau, mais pas la ligne 3. Pour cela, vous devez préciser la valeur de l'attribut entre les crochets, comme ceci :
  94. 94. Exécutons ce code dans un navigateur. Effectivement, le texte contenu dans la cellule fusionnée de la ligne 3 n'est pas centré. Par contre, celui des lignes 1 et 4 est centré : Les unités de mesure (unités.htm) Pour définir certaines valeurs CSS, il est nécessaire d'utiliser une unité de mesure. Ces unités peuvent être absolues ou relatives. Les unités absolues peuvent être entières ou réelles, mais sont toujours positives. Vous pouvez utiliser les unités absolues suivantes :
  95. 95.  cm : centimètres  mm : millimètres  in : pouces. 1 in = 2,54 cm  pt : point. 1 pt vaut 1/72 in  pc : pica. 1 pc vaut 12 pt Les deux dernières unités sont des mesures typographiques utilisées à l'origine par les imprimeurs. Les unités relatives sont les suivantes :  em : unité relative à la taille de police de l'élément sélectionné  ex : unité relative à la taille des minuscules de l'élément sélectionné  px : pixels. Cette unité dépend de la résolution du périphérique d'affichage  % : unité relative à la taille de l'élément ou de son parent Ce tableau est issu du site ReedDesign (http://reeddesign.co.uk/test/points-pixels.html). Il vous aidera à mieux comprendre l'équivalence entre les différentes mesures. Points Pixels Em % 6pt 8px 0.5em 50% 7pt 9px 0.55em 55% 7.5pt 10px 0.625em 62.5% 8pt 11px 0.7em 70% 9pt 12px 0.75em 75% 10pt 13px 0.8em 80% 10.5pt 14px 0.875em 87.5% 11pt 15px 0.95em 95% 12pt 16px 1em 100% 13pt 17px 1.05em 105% 13.5pt 18px 1.125em 112.5% 14pt 19px 1.2em 120% 14.5pt 20px 1.25em 125% 15pt 21px 1.3em 130% 16pt 22px 1.4em 140% 17pt 23px 1.45em 145% 18pt 24px 1.5em 150% 20pt 26px 1.6em 160% 22pt 29px 1.8em 180% 24pt 32px 2em 200% 26pt 35px 2.2em 220% 27pt 36px 2.25em 225% 28pt 37px 2.3em 230% 29pt 38px 2.35em 235% 30pt 40px 2.45em 245%
  96. 96. 32pt 42px 2.55em 255% 34pt 45px 2.75em 275% 36pt 48px 3em 300% Les unités relatives peuvent être positives ou négatives. Par exemple, une propriété margin positive définit une marge extérieure positive pour l'élément concerné par rapport à son parent. Par contre, une propriété margin négative définit une marge extérieure négative par rapport à son parent. Examinons ces quelques lignes de code et leur résultat dans Internet Explorer pour mieux comprendre.
  97. 97. Le corps du document contient trois <div> : un parent de classe conteneur et deux enfants de classes negatif et positif. La classe conteneur définit un bloc de couleur rouge, de 400 pixels sur 400, décalé vers le bas de 100 px et vers la droite de 130 pixels.
  98. 98. La classe negatif définit un bloc de couleur bleue de 150x150 pixels. La marge gauche de ce bloc est négative. Elle est donc décalée de 50 pixels vers la gauche dans son parent, le <div> de classe conteneur. Enfin, la classe positif définit un bloc de couleur jaune de 150x150 pixels. La marge gauche de ce bloc est positive. Elle est donc décalée de 200 pixels vers la droite dans son parent, le <div> de classe conteneur. Lettrine (lettrine.htm) Beaucoup de livres papier utilisent des lettrines au début de chaque chapitre. Que diriez-vous d'en faire autant sur une page Web ?
  99. 99. Vous vous en doutez certainement : l'affichage de lettrines se fera en CSS. Commençons par définir un paragraphe contenant un peu de texte. A titre d'information, ce texte provient du site http://fr.lipsum.com/. Nous affectons la classe lettrine à ce texte. Il ne reste plus qu'à définir le code CSS correspondant à cette classe. Pour différentier le premier caractère des suivants, nous définirons deux styles : .lettrine qui s'adresse à tous les caractères de classe lettrine et .lettrine:first-letter qui ne concerne que le premier caractère de classe lettrine. Commençons par le style lettrine. La ligne 7 définit la hauteur des lignes. La valeur 1.5em aère les lignes verticalement. La ligne 8 définit la largeur de la zone d'affichage : 30em. Enfin, la ligne 9 définit :
  100. 100.  une marge extérieure supérieure et inférieure de 3em,  une marge gauche et droite également répartie. Le bloc est donc centré horizontalement. Examinons le style de la première lettre. La ligne 14 fait flotter la première lettre à gauche, de telle sorte que plusieurs lignes de texte épousent son contour. La ligne 15 définit la taille de la première lettre. Ici, trois fois la taille normale. La ligne 16 définit la hauteur de la ligne : ici, une fois la taille de 3em. Enfin, la ligne 17 définit la marge extérieure à droite de la lettrine. Le résultat est bien conforme à ce qui était attendu :
  101. 101. A des fins expérimentales, je vous suggère de supprimer la ligne float:left;, puis de modifier les propriétés font-size et line-height dans la classe .lettrine:first-letter. La propriété z-Index Vous utiliserez la propriété CSS z-index pour définir la position relative de plusieurs éléments empilés. Plus la valeur affectée à la propriété z-index d'un élément est élevée, plus cet élément se trouve en avant-plan. Pour illustrer cette propriété, nous allons empiler plusieurs rectangles colorés dans une balise <div> et choisir leur ordre de superposition. Le code HTML est élémentaire. Il contient une balise <div> conteneur ligne 36 et trois balises <div> enfants lignes 37 à 39.
  102. 102. Examinons le code CSS.
  103. 103. Pour limiter l'écriture, les propriétés communes aux trois classes sont rassemblées entre les lignes 5 et 10. Ainsi, les éléments de classe rectangle1, rectangle2 et rectangle3 seront tous trois positionnés en absolu et auront une dimension de 200x150 pixels. Les caractéristiques propres à chaque classe sont définies : - entre les lignes 11 et 17 pour le premier rectangle ; - entre les lignes 18 et 24 pour le deuxième rectangle ; - entre les lignes 25 et 31 pour le troisième rectangle. La propriété z-index de la balise <div> de classe rectangle1 a pour valeur 1. Celle de la balise <div> de classe rectangle2 a pour valeur 2 et celle de la balise <div> de classe rectangle3 a pour valeur 3. La balise de classe rectangle3 se trouve donc devant la balise de classe rectangle2, el la balise de classe rectangle2 se trouve devant la balise de classe rectangle1. Opacité La propriété CSS3 opacity permet de définir la transparence d'un élément. Pour illustrer cette propriété, nous allons superposer deux images et donner un effet de transparence à celle qui est au-dessus de l'autre. Voici les images utilisées :
  104. 104. Les deux images sont insérées dans une balise <div>. La première est de classe dessus et la deuxième de classe dessous. Il ne reste plus qu'à définir les deux classes pour mettre en place l'effet de transparence. Pour que les deux images se superposent, on les positionne de façon absolue dans la balise <div>. Le z-index de l'image de classe dessus est initialisé à 1 et son opacité à 0.6. Le z-index de l'image de classe dessous est initialisé à 0. Cette image sera donc au-dessous de l'autre, qui a un z-index égal à 1.
  105. 105. Exécutons ce code. Le chat apparaît bien en avant-plan et on peut voir au travers :
  106. 106. Display La propriété CSS display permet de changer le type (inline ou block) d'une balise, d'une classe ou d'un identifiant. Dans une rubrique précédente, vous avez appris que les balises <span> sont de type inline et les balises <div> de type block. Je vous propose d'inverser le type de ces deux balises en utilisant la propriété CSS display. Examinons le code suivant :
  107. 107. Le corps du document définit deux balises <span>, lignes 13 et 14, et deux balises <div>, lignes 18 et 19. Normalement, les balises <span> devraient se trouver sur la même ligne et les balises <div> sur deux lignes consécutives. Il est temps d'utiliser la propriété display pour modifier ce comportement par défaut. La ligne 5 affecte un style block aux balises <span> dans leur ensemble. En remplaçant le mot span par une classe ou un identifiant, il aurait été possible de limiter cette conversion à certaines balises <span> seulement. Quant à la ligne 6, elle affecte un style inline aux balises <div> dans leur ensemble. Ici également, en remplaçant le mot div par une classe ou un identifiant, il aurait été possible de limiter cette conversion à certaines balises <div> seulement. Comme vous pouvez le constater en exécutant ce code : - les balises <span> sont maintenant de type block, - les balises <div> sont maintenant de type inline.
  108. 108. Positionnement inline-block Dans la rubrique précédente, vous avez vu qu'il était possible d'affecter le type block à un élément inline et inversement. Malheureusement, les éléments initialement block transformés en inline ne peuvent pas être dimensionnés en utilisant les propriétés width et height. En affectant la valeur inline-block à la propriété display d'un élément de type block ou inline, nous allons voir que ceci est possible ! Examinons le code suivant :
  109. 109. Le corps du document définit deux balises <div> de classe il et deux autres de classe ilb. La ligne 5 définit les dimensions des quatre balises <div> : 100x100px. La ligne 6 affecte le type inline aux balises de classe il. Enfin, la ligne 7 affecte le type inline-block aux balises de classe ilb. Exécutons ce code dans un navigateur. Comme vous pouvez le voir, le balises <div> de type inline ne sont pas sensibles aux propriétés width et height. Par contre, les balises <div> de type inline-block tiennent compte de ces propriétés :
  110. 110. Le sélecteur universel Le sélecteur CSS * (astérisque) s'adresse à toutes les balises du document. En lui affectant une police, une taille de caractères, un espacement de caractères ou de lignes, etc., tout le document est modifié en conséquence. A titre d'exemple, nous allons modifier la police et l'espacement entre les lignes d'un document en utilisant le sélecteur astérisque. Voici le code utilisé :
  111. 111. Et voici deux versions de ce document. La première n'utilise aucun style. La seconde redéfinit le style de toutes les balises en utilisant le sélecteur astérisque.
  112. 112. Examinons le code. Le corps du document contient un titre de niveau 2 et un peu de texte issu du site http://fr.lipsum.com/. Le sélecteur * redéfinit : - Ligne 7 : la police du document ; - ligne 8 : l'espacement entre les lignes. Une bordure arrondie Dans cette rubrique, nous allons voir comment définir une balise <div> à coins arrondis en CSS3. Plutôt que d'écrire le code CSS à la main, nous allons utiliser un générateur en ligne. Nous nous rendons sur la page http://border-radius.com/. Il suffit d'entrer un rayon de courbure, en pixels, dans les cases qui apparaissent aux quatre angles du rectangle pour que le code CSS soit généré. Ici par exemple, nous choisissons un rayon de courbure général de 30 pixels et un rayon de courbure de 120 pixels pour le coin supérieur droit.
  113. 113. Remarquez qu'il est possible d'alléger le code en décochant une ou plusieurs cases. Mais attention, le code CSS ne fonctionnera plus dans les navigateurs décochés. Il suffit maintenant de copier-coller le code CSS dans un document. Voici le résultat de ce code dans Internet Explorer :
  114. 114. JavaScript Première approche du JavaScript Le langage JavaScript met de la vie dans vos pages HTML. Il est en effet capable de réagir aux actions de l'utilisateur (clic, survol, frappe clavier, etc.) en exécutant du code côté client, c'est-à-dire sur l'ordinateur où s'affiche la page Web. Dans cette rubrique, vous allez faire une première approche très light du langage HTML. Je vais vous montrer comment afficher une boîte de message lorsque l'utilisateur clique sur un bouton. Entre les balises <head> et </head>, la balise <script> indique que les lignes qui vont suivre sont du code actif. L'attribut language précise qu'il s'agit de code JavaScript. La balise </script> délimite la fin du code JavaScript. La ligne 5 définit la fonction popup(). Les instructions qui composent cette fonction se trouvent entre des accolades. Ici, la fonction popup() ne contient qu'une seule instruction, ligne 7. Cette instruction affiche un texte dans une boîte de message en utilisant la fonction prédéfinie alert(). Le texte affiché se trouve à l'intérieur des parenthèses, encadré par des apostrophes. Pour invoquer la fonction popup(), nous allons utiliser un événement lié à une balise HTML. Le corps du document définit un formulaire (lignes 12 à 14). Ce formulaire contient un seul élément défini ligne 13. Ici, il s'agit d'un simple bouton. Le texte affiché dans le bouton est défini dans l'attribut value. Quant à l'attribut onClick, il fait référence à la fonction JavaScript popup(). Vous l'aurez compris, la fonction popup() sera exécutée lorsque l'utilisateur cliquera sur le bouton.
  115. 115. Exécutez ce code dans un navigateur. Le code JavaScript est détecté par Internet Explorer et un message d'avertissement apparaît dans la partie inférieure de la fenêtre. Confirmez que vous voulez exécuter ce code en cliquant sur Autoriser le contenu bloqué. Remarque Ce message d'alerte s'affiche parce que le code JavaScript est exécuté localement. Si vous placez le fichier HTML sur un serveur Web, aucun message d'alerte ne sera affiché.
  116. 116. Cliquez sur le bouton Cliquez ici. Une fenêtre de message contenant le message spécifié dans la fonction popup() est affiché : Afficher un message dès l'ouverture d'une page Dans la rubrique précédente, vous avez appris à afficher une boîte de message en utilisant la fonction JavaScript alert(). Dans cette rubrique, je vous propose d'afficher un message dans une fenêtre popup dès l'ouverture de la page Web. Pour cela, il vous suffit d'utiliser l'attribut onload dans la balise <body>. Si vous exécutez ce code localement dans Internet Explorer, une boîte de message est affichée dans la partie inférieure de la fenêtre. Ceci parce que le navigateur a détecté la présence de code
  117. 117. JavaScript, potentiellement dangereux pour votre ordinateur. Rassurez-vous, il n'y a rien de dangereux dans ce code. Vous pouvez autoriser l'exécution du code JavaScript en cliquant sur Autoriser le contenu bloqué : Dès que vous autorisez l'exécution du code JavaScript, la boîte de message est affichée. getElementById, première approche Cette rubrique est très importante. Elle va vous montrer comment accéder au contenu d'une balise HTML et modifier ce contenu. Ici, nous allons modifier le contenu d'une balise <input> de type text, c'est-à-dire d'une zone de texte. Le texte affiché dans la zone de texte sera mis en majuscule lorsque l'utilisateur cliquera sur un bouton de commande. En utilisant une technique similaire, vous pourrez modifier le contenu de nombreuses autres balises HTML. Le corps du document contient un formulaire composé de deux éléments : - Une balise <input> de type text et d'identifiant saisie.
  118. 118. - Une balise <input> de type button. Le texte affiché sur le bouton est défini dans l'attribut value. Lorsque l'utilisateur clique sur le bouton, la fonction JavaScript majuscules() est exécutée. Nous allons maintenant nous intéresser au code JavaScript. La fonction majuscules() est exécutée à chaque appui sur le bouton de commande. Dans un premier temps, la fonction getElementById() est utilisée pour récupérer l'objet HTML d'identifiant saisie. Prenez quelques secondes pour examiner la syntaxe utilisée : document.getElementById("saisie"). La fonction getElementById() est appliquée au document et l'objet à récupérer a pour identifiant saisie. Finalement, vous voyez que cette instruction n'a rien de bien sorcier. L'objet retourné est stocké dans une variable nommée objet. Pour obtenir la valeur stockée dans la zone de texte, c'est-à-dire dans l'objet ayant pour nom … objet, il suffit d'appliquer le suffixe value à cet objet. Ainsi, objet.value correspond au texte affiché dans la zone de texte. Pour transformer ce texte en caractères majuscules, nous utilisons la fonction JavaScript toUpperCase(). Comme vous pouvez le voir, cette fonction suffixe objet.value, et donc, donne la version majuscule de la zone de texte. En affectant objet.value.toUpperCase() à objet.value, la version majuscule de la zone de texte est affichée dans la zone de texte. C'est ainsi qu'un clic sur le bouton de commande transforme le contenu de la zone de texte en majuscules. Exécutons ce code dans un navigateur. Ici, je tape le texte "BonJouR" dans la zone de texte puis j'appuie sur le bouton de commande. Comme prévu, toutes les lettres sont transformées en majuscules :
  119. 119. getElementById, Modifier la couleur d'arrière-plan Dans la rubrique précédente, vous avez appris à modifier le contenu d'une zone de texte en utilisant la fonction JavaScript getElementById(). Dans cette rubrique, je vais vous apprendre à modifier une propriété CSS avec cette même instruction. Dans cet exemple, nous allons modifier la couleur d'arrière-plan d'une balise <div>. Pour cela, l'utilisateur entrera une couleur codée en hexadécimal codée ainsi : #rrvvbb Où rr représente la quantité de rouge (entre 0 et FF), vv la quantité de vert (entre 0 et FF) et bb la quantité de bleu (entre 0 et FF) de la couleur à utiliser. Une fois la couleur entrée, il lui suffira de cliquer sur un bouton de commande pour modifier la couleur de la balise <div>. Examinons le code HTML.  Le corps du document est défini entre les lignes 22 et 31.  La ligne 23 définit une balise <div> d'identifiant div1 ;  La ligne 24 affiche un texte pour inviter l'utilisateur à saisir une couleur codée en hexadécimal.  Les lignes 25 à 28 mettent en place un formulaire pour héberger la zone de texte et le bouton de commande ;  La ligne 26 définit la zone de texte d'identifiant saisie ;  Enfin, la ligne 27 définit le bouton de commande. Le texte affiché dans le bouton est "Modifier la couleur". Lorsque le bouton est cliqué, la fonction JavaScript couleur() est exécutée.
  120. 120. L'allure de la balise <div> est définie avec du code CSS, entre les lignes 4 et 11 :  Ligne 7, la couleur de l'arrière-plan par défaut est définie à #000000. A l'ouverture de la page, la balise <div> aura donc un arrière-plan noir ;  Les dimensions de la balise <div> sont définies lignes 8 et 9. La largeur et la hauteur sont fixées à 200 pixels. Pour que le code soit complet, il ne reste plus qu'à définir la fonction JavaScript couleur(),entre les lignes 12 et 19 :  La ligne 15 crée l'objet objet1 et l'initialise avec l'élément saisie, c'est-à-dire avec la zone de texte dans laquelle est saisi le code de couleur hexadécimal.  La ligne 16 crée l'objet objet2 et l'initialise avec l'élément div1, c'est-à-dire avec la balise <div> qui a été mise en place dans le début du document.  Quant à la ligne 17, elle affecte à la propriété backgroundColor de la balise <div> le code de couleur hexadécimal qui se trouve dans la zone de texte. A droite du signe "=", objet1.value récupère le contenu de la zone de texte. Remarquez la syntaxe utilisée à gauche du signe "=" : objet2.style.backgroundColor. o objet2 correspond à l'objet lié à la balise <div> div1 ; o style indique que l'on s'intéresse à une propriété CSS ; o backgroundColor correspond à la propriété CSS background-color. Remarque La syntaxe de la ligne 17 n'a rien d'extraordinaire. Cependant, notez que l'accès à la propriété CSS background-color se fait via le mot clé backgroundColor. Le tiret a disparu entre les mots background et color et la première lettre du mot color est en majuscules. Une grande partie de la difficulté à accéder aux propriétés CSS en JavaScript viendra de la syntaxe à utiliser. Cependant, ne vous en faites pas trop, vous verrez que l'utilisation des bons mots clés devient vite machinale pourvu que vous pratiquiez régulièrement.
  121. 121. Exécutons ce code dans un navigateur. A l'ouverture de la page, la balise <div> a un arrière-plan noir. Pour le modifier, il suffit d'entrer un code hexadécimal dans la zone de texte et de cliquer sur le bouton de commande.
  122. 122. Pour trouver facilement le code de couleur hexadécimal d'une couleur donnée, je vous suggère d'utiliser le site http://www.code-couleur.com/.
  123. 123. getElementById, Obtenir le contenu d'une div Dans cette rubrique, nous allons nous intéresser à une problématique classique : la récupération du contenu d'une balise <div>. Bien entendu, cette opération se fera à l'aide de la fonction JavaScript getElementById(). Examinons le code utilisé. Commençons par la parte HTML, située entre les lignes 21 et 27.  La ligne 22 définit la balise <div> div1. L'attribut contenteditable initialisé à true rend cette balise éditable (ceci est une nouveauté bien pratique du langage HTML5). En d'autres termes, son contenu peut être librement modifié par l'utilisateur.  Les lignes 23 à 25 mettent en place un formulaire pour héberger le bouton de commande.  Le bouton de commande est défini ligne 24. Le texte affiché dans le bouton est défini dans l'attribut value. Lorsque le bouton est cliqué, la fonction JavaScript popup() est exécutée. La mise en forme de la balise <div> est définie avec quelques lignes de CSS, ente les lignes 5 et 10 :  La couleur d'arrière-plan est définie ligne 7 ;  La largeur de la division (c'est-à-dire de la balise <div>) est définie ligne 8 ;  Enfin, la hauteur de la division est définie ligne 9. Il ne reste plus qu'à examiner le code JavaScript, défini entre les lignes 12 et 19. La fonction popup() est définie ligne 13. La balise <div> d'identifiant div1 est mémorisée dans l'objet objet1 ligne 15. Quant à la ligne 16, elle affiche le contenu de la balise <div> dans une boîte de message en utilisant la propriété JavaScript innerHTML.
  124. 124. Exécutons ce code dans un navigateur Web. Après avoir modifié le contenu de la balise <div>, nous cliquons sur le bouton de commande. Le contenu de la <div> est bien affiché dans une boîte de message.
  125. 125. getElementById, donner le focus à une zone de saisie Il est parfois bien pratique de donner le focus à une zone de saisie. Par exemple, lorsque vous vous connectez sur votre moteur de recherche préféré, une barre de saisie verticale clignote dans la zone de recherche, vous invitant à entrer quelques mots pour lancer une recherche. Si une de vos pages contient un formulaire de saisie, pourquoi ne pas donner le focus à la première zone de saisie ? Je suis sûr que vos utilisateurs apprécieraient cette attention. D'autant plus qu'en JavaScript, c'est un vrai jeu d'enfant … Pour illustrer le code JavaScript à utiliser, nous allons définir un formulaire contenant deux textes, deux zones de saisie et deux boutons de commande. Le corps du document est écrit en HTML. Il est défini entre les lignes 16 et 23 :  La ligne 18 affiche un texte et une zone de saisie d'identifiant entree1.  La ligne 19 définit un bouton de commande, y affiche le texte "Donner le focus à la zone de saisie 1" et met en place la fonction événementielle focus1() qui sera exécutée lorsque l'utilisateur clique sur le bouton de commande.  La ligne 20 est semblable à la ligne 18. Si ce n'est que la zone de saisie mise en place a pour identifiant saisie2.  Enfin, la ligne 21 définit un deuxième bouton de commande, y affiche le texte "Donner le focus à la zone de saisie 2" et met en place la fonction événementielle focus2() qui sera exécutée lorsque l'utilisateur clique sur le bouton de commande. Passons au code JavaScript :
  126. 126.  La fonction focus1() ne contient qu'une instruction, ligne 7. Après avoir récupéré l'élément d'identifiant entree1, c'est-à-dire la première zone de texte, la fonction JavaScript focus() lui est appliquée. Cette simple instruction provoque l'apparition d'un point d'insertion clignotant dans la première zone de saisie. Toute frappe au clavier sera placée dans cette zone.  La fonction focus2() est en tout point identique à la fonction focus1(), si ce n'est qu'elle donne le focus à la deuxième zone de texte. Exécutons ce code dans un navigateur. Comme vous pouvez le voir, les deux boutons sont fonctionnels.
  127. 127. getElementById, montrer/cacher un élément Dans cette rubrique, je vais vous montrer comment afficher ou cacher une balise HTML en agissant sur une de ses propriétés CSS via du code JavaScript. Examinons le code HTML. Le corps du document occupe les lignes 32 à 38. Très simple, il se contente d'afficher une balise <div> d'identifiant div1 et un bouton de commande d'identifiant afficheCache. La procédure événementielle bascule() est associée au clic sur ce bouton. Examinons le code CSS, défini entre les lignes 4 et 11. Ce code a déjà été utilisé à plusieurs reprises dans les rubriques précédentes. Il définit la couleur d'arrière-plan et les dimensions de la balise <div>. Vous l'aurez compris, le plus gros du traitement se fait dans la fonction JavaScript bascule(), entre les lignes 12 et 29.  La ligne 15 définit la variable etat et y stocke la valeur de la propriété CSS display de la balise <div> div1.  La ligne 16 définit la variable bouton et l'initialise avec la balise d'identifiant afficheCache, c'est-à-dire avec le bouton. Si la variable etat vaut none, cela signifie que la balise <div> n'est pas affichée. Il faut donc l'afficher. C'est ce que fait la ligne 20, en affectant la valeur block à la propriété CSS display de la balise <div>. Par la même occasion, le texte affiché sur le bouton de commande est modifié en "Cacher la balise div" ligne 21. Si la variable etat a une autre valeur que none, cela signifie que la balise <div> est affichée. Il faut donc la dissimuler. Cette opération est réalisée dans la ligne 25, en affectant la valeur none à la propriété CSS display de la balise <div>. Le texte affiché sur le bouton de commande est également modifié en "Afficher la balise div" ligne 26.
  128. 128. Il ne reste plus qu'à exécuter ce code dans un navigateur. Comme vous pouvez le constater, le bouton de commande est en mesure de cacher puis de réafficher la balise <div>.
  129. 129. getElementsByName La fonction JavaScript getElementById() n'est pas la seule à pouvoir récupérer un élément HTML. Vous pouvez également utiliser la fonction getElementsByName(). Ces deux fonctions agissent de manière similaire, si ce n'est que la première utilise l'attribut id pour récupérer l'élément HTML alors que la deuxième utilise l'attribut name. Pour illustrer la fonction getElementsByName, nous allons laisser l'utilisateur cocher une ou plusieurs cases, vérifier quelles cases sont cochées et afficher un message en conséquence. Examinons le code HTML.  La ligne 26 définit une balise <div> d'identifiant div1 qui invite l'utilisateur à cocher une ou plusieurs cases : <div id="div1">Quelles couleurs aimez-vous ?</div>  Les lignes 28 à 30 affichent trois cases à cocher de nom couleur : <input type="checkbox" name="couleur"> Bleu <br> <input type="checkbox" name="couleur"> Rouge <br> <input type="checkbox" name="couleur"> Vert <br>
  130. 130.  Enfin, la ligne 31 définit un bouton de commande, y insère le texte "Cliquez ici" et lui associe la fonction événementielle test(). Cette fonction sera exécutée à chaque clic sur le bouton : <input type="button" onclick="test()" value="Cliquez ici"> Ce code est vraiment très simple. Nous allons maintenant nous intéresser à la fonction JavaScript test(), définie entre les lignes 4 et 22. Au début de la fonction, la variable aime est définie et initialisée avec une chaîne vide. La ligne 8 teste l'état de la première case à cocher : if (document.getElementsByName('couleur')[0].checked == true) Cette instruction vous paraît peut-être complexe. Rassurez-vous : en la décortiquant, vous verrez qu'elle est élémentaire. La fonction document.getElementsByName('couleur') récupère l'objet dont l'attribut name vaut "couleur". Comment est-ce possible me direz-vous puisque trois balises <input> ont un attribut name égal à "couleur" ? Eh bien, c'est là qu'intervient la suite de l'instruction. Le nombre spécifié entre crochets identifie l'une des cases à cocher. La première à pour valeur "0", la deuxième "1" et la troisième "2". Quant à la fonction checked, elle renvoie la valeur true (c'est-à-dire vrai) si la case est cochée, et la valeur false (c'est-à-dire faux) si la case est décochée. Maintenant, je suis sûr que vous comprenez parfaitement l'instruction de la ligne 8. Pour ceux qui auraient encore des doutes, elle teste si la première case est cochée. Dans l'affirmative, l'instruction entre les accolades est exécutée. Cette instruction affecte le texte "Vous aimez le bleu." Suivi d'un passage à la ligne à la variable aime. Les deux blocs d'instructions suivants ne devraient pas vous poser de problème. La ligne 12 teste si la deuxième case est cochée. Dans l'affirmative, le texte "Vous aimez le rouge." suivi d'un passage à la ligne est ajouté à la variable aime. Quant à la ligne 16, elle teste si la troisième case est cochée. Dans l'affirmative, le texte "Vous aimez le vert." suivi d'un passage à la ligne est ajouté à la variable aime. La ligne 20 affecte la variable aime au contenu de la balise <div> et donc affiche un a trois "Vous aimez…" en fonction des cases cochées.
  131. 131. Exécutons ce code dans un navigateur. Ici par exemple, je coche les cases Bleu et Rouge, puis je clique sur le bouton. Les messages affichés indiquent clairement les cases qui sont cochées.
  132. 132. getElementsByTagName() Dans les rubriques précédentes, vous avez appris à accéder à des balises HTML en utilisant les fonctions JavaScript getElementById() et getElementsByName(). Ces fonctions sont très pratiques, mais elles nécessitent la définition d'attributs id ou name dans chacune des balises visées. Dans cette rubrique, je vais vous présenter la fonction getElementsByTagName() qui permet de récupérer toutes les balises d'un certain type sans que celles-ci n'aient un attribut id ou name. Le résultat de la fonction est un tableau et chaque élément du tableau correspond à une balise. Pour illustrer cette fonction, nous allons utiliser le code HTML de la rubrique précédente. Rappelons que ce code contient :  une balise <div> d'identifiant div1 ;  trois cases à cocher ;  un bouton de commande. A titre d'exemple, la fonction getElementsByTagName() sera utilisée pour compter le nombre de balises <input> contenues dans le document. Le code JavaScript est défini dans la fonction test(), entre les lignes 5 et 9. La ligne 7 définit la variable lesInput et l'initialise avec le résultat de la fonction getElementsByTagName(). L'argument "input" est passé à cette fonction, car on cherche à compter le nombre de balises input contenues dans le document. Rappelez-vous : la fonction getElementsByTagName() retourne un tableau. La ligne 8 applique la fonction length à la variable lesInput pour connaître le nombre d'éléments contenus dans le tableau
  133. 133. et donc, le nombre de balises <input> contenues dans le document. Le résultat est affiché dans la balise <div> en utilisant la technique habituelle. A savoir, la fonction innerHTML appliquée à l'objet div. Exécutons ce code dans un navigateur. Un clic sur le bouton de commande affiche le nombre de balises <input> contenues dans le document : Remarque Il est possible de connaitre les valeurs stockées dans les attributs des balises récupérées avec la fonction getElementsByTagName(). Ainsi par exemple :  lesInput[2].name renvoie la valeur "couleur", puisque l'attribut name de la troisième balise <input> vaut couleur.
  134. 134.  lesInput[3].value renvoie la valeur "Cliquez ici" puisque l'attribut value de la quatrième balise <input> vaut "Cliquez ici". Codes couleur en JavaScript Nous allons mettre en pratique ce qui a été vu dans les rubriques précédentes pour afficher une couleur en fournissant ses composantes RVB. Les valeurs Rouge, Vert et Bleu seront saisies dans des zones de texte. Un bouton de commande affichera le code hexadécimal correspondant et affectera ce code à l'attribut CSS background-color d'une balise <div> : Examinons le code HTML, entre les lignes 29 et 38.  La ligne 30 définit la balise <div> d'identifiant div1. Cette balise sera utilisée pour représenter la couleur dont les composantes RVB sont spécifiées par l'utilisateur.  Les lignes 32 à 34 définissent les zones de texte d'identifiant rouge, vert et bleu.  La ligne 35 définit une deuxième balise <div> d'identifiant hexa. Cette balise sera utilisée pour afficher le code hexadécimal correspondant aux composantes décimales RVB saisies par l'utilisateur.  Enfin, la ligne 36 définit un bouton de commande et lui associe la fonction événementielle couleur(). Cette fonction sera exécutée à chaque clic sur le bouton de commande.

×