Les dadas d'iza


programmation vb
> programmation html <
aide hlp
traitement d'images

accueil
les dadas d'iza
le train-train d'Michel
le coin des gars
plan du site

sommaire

sur cette page :

Script, c'est quoi?
CSS, c'est quoi?
Didacticiels JavaScript
Didacticiels CSS

autres pages :

l'objet Array


© Isabelle Côté

javascript et css

Accueil > Iza > HTML > JavaScript et CSS
Ou Page précédente

Introduction

C'est bien beau le html mais c'est un peu statique. Vous voudrez sans doute dans un avenir prochain animer un peu tout ça voire même rendre vos pages un peu plus dynamiques et interactives. Je vous encourrage à aller de l'avant mais seulement voilà : je n'ai pas la prétention de croire pouvoir vous renseigner sur quoi que ce soit de très avancé ici. D'abord parce que j'en serais bien incapable et ensuite parce que même si je le pouvais, d'autres l'on fait de manière admirable. Alors pourquoi s'en priver?

Cette section a donc pour objet, d'abord de vous présenter ce que c'est que le langage JavaScript et les feuilles de style CSS et ensuite, de vous proposer des sites tous aussi intéressants les uns que les autres (du moins je le suppose) et qui traitent de ces sujets.

|   Haut de la page   |   Sommaire   |

Ce que c'est qu'un script

C'est un programme en code lisible comme le langage html (en format de texte) et qui est interprété par une autre application contrairement à un programme compilé (.exe) qui s'exécute par lui-même. Il existe plusieurs langage de script que vous pouvez inclure à vos documents html, par exemple le JavaScript, le JScript et le VBScript pour ne nommer que ceux-là. Ainsi, un script qu'on ajoute à une page html sera interprétée et exécutée ligne par ligne par le navigateur (pour peu qu'il reconnaisse le langage de script utilisé).

Le JavaScript est un des langages couramment utilisé parce qu'il est reconnu par tous les navigateurs (à tout le moins ceux que je connais). À l'aide de script, vous pouvez afficher une page différente selon que l'internaute navique avec Internet Explorer ou Netscape Communicator, ce qui peut être pratique si vous avez conçu vos page avec la technologie des layers (la balise <LAYER> pour Netscape ou la balise <DIV> pour IE); ou encore animer des boutons et des menus déroulants.

Il existe plusieurs scripts diponible gratuitement sur Internet et qui ont des fonctions les plus diverses les unes que les autres. Il suffit de chercher un peu et on peut trouver ce que l'on cherche sans avoir à programmer une seule ligne de code.

|   Haut de la page   |   Sommaire   |

Ce que c'est qu'une CSS

Ce sont, en anglais, des «Cascading Style Sheets» ou, en français, des feuilles de sytle en cascade. Bon pour l'instant, ça ne vous dit pas grand chose mais bougez pas, je m'en viens! Je vais, au meilleur de mes connaissances, d'abord vous expliquer ce que c'est qu'une feuille de style et ensuite en quoi elles sont «en cascade».

La meilleure façon selon moi d'expliquer ce que c'est qu'une CSS est sans doute d'expliquer à quoi ça sert. Avec les CSS, vous pouvez prédéfinir l'apparence du texte, des titres, des liste à puce, des liens hypertexte et de tout élément texte ou non-texte de vos pages. Et ce, dans le but de vous éviter de formater à chaque fois vos paragraphes, vos tires, vos liens hypertexte, etc. Prenons par exemple les liens hypertextes de la page que vous liesez en ce moment. Vous avez sans doute remarqué que le soulignement n'apparait que lorsque le pointeur de la souris survole un lien (sauf peut-être si vous utilisez Netscape) et que ces liens sont probablement de couleurs différentes de celles définies par votre navigateur. Ceci est possible avec les CSS. Voilà pour ce que ça fait, entre autres...

Une feuille de style, c'est encore une fois du code en texte interprété que vous pouvez inclure dans votre document html mais que vous avez avantage à mettre dans un document à part et le lier à vos documents html. Ainsi, vous ne l'écrivez qu'une fois, et une fois pour toutes vos pages! C'est d'ailleurs probablement pour ça qu'on dit feuille de style puisque c'est un document (ou une feuille) à part. Mais vous pourriez tout aussi bien définir un style directement dans une balise html.

Bon! Maintenant, voyons pourquoi on dit «en cascade». Si ma mémoire ne fait pas défaut, c'est du aux différents niveaux où l'on peut mettre en place les feuilles de styles. Dans l'ordre, du plus proche au plus loin : un style défini dans une balise html, une feuille de style inclus dans l'entête d'un document html ou un document de feuille de sytle enregistré à part. De plus, le plus proche a préséance sur le plus loin (encore une fois, si ma mémoire ne me lache pas).

Je ferais peut-être mieux d'illustrer celà par un exemple. Revenons à mes liens hypertexte. Je vous ai dit plus haut que leur format est régit par une feuille de style. Celle-ci est liée au document, i.e. un fichier .CSS est lié à mes pages par une balise spéciale dans l'entête de mes documents html. Les liens sur cette page on un aspect que j'ai moi-même défini. Maintenant, considérez ce lien vers ma page d'accueil : Accueil

Si vous passez le pointeur de la souris au dessus, vous verrez qu'il a des attributs différents des autres liens de cette page. Vous voulez en savoir plus sur les CSS? Voyez, plus loin sur cette page, les liens vers d'autres sites qui vous permettrons d'apprendre à créer vos propres feuilles de styles.

Voici le style que j'ai ajouté dans la partie <head></head> de cette page :

<style type="text/css">
<!--
a.monlien:hover {
   text-decoration : none;
   background-color : #FFE494;
   color : #000000;
   }
//-->
</style>

Les balises ouvrantes et fermantes <style type="text/css"></style> indiquent qu'il s'agit d'une feuille de style incorporée au document html. Les balises <!-- et --> sont des balises de commentaires tout comme les // marquent les commentaires dans les CSS. C'est une mesure de précaution au cas où le navigateur de l'internaute visitant la page ne prendrait pas en charge les feuilles de style. Ainsi, tout ce qui se trouve entre ces balises sera ignoré.

La première ligne du style proprement dit sert à déterminer à quoi le style se rattache. Le "a" indique que le style sera appliqué à la balise <a> pour les liens hypertextes. Ensuite, .monlien correspond à un nom de classe qui sert à identifier une catégorie de lien en particulier. La balise en question ressemble à ceci :
<a class="monlien" href="index.htm">Accueil</a>
J'avoue avoir un peu triché pour cet exemple car si je n'avais pas usé de cette astuce, se sont tous les hyperliens de la page qui auraient changé d'aspect. J'y reviendrai plus loin. La dernière partie de cette instruction, :hover, concerne l'effet de survol de la souris. L'instruction a.monlien:hover signifie ni plus ni moins : « Quand le pointeur de la souris passe au dessus d'un lien nommé monlien... ». La deuxième ligne désactive le soulignement du lien hypertexte. La troisième ligne attribue une couleur de fond. Et enfin, la dernière ligne attribue la couleur noire au texte du lien. Le tout bien encadré à l'intérieur de { et }.

Revenons à mon astuce .monlien... class="monlien". Sans l'ajout d'un nom de classe, ce sont tous les liens de la page qui se seraient vu attribué le style définit dans l'entête du document. Voici donc la ligne de code qui a été placée entre les balises <head> et </head> :
<link rel="stylesheet" type="text/css" href="styles.css">

En gros, cette ligne signifie qu'un fichier de feuilles de styles (ref="stylesheet") de type CSS (type="text/css") est liée à ce document html (balise link), que le fichier se nomme styles.css (href="styles.css") et il est situé dans le même répertoire que le document html (pas de nom de répertoire devant le nom du fichier)". C'est grâce à ce fichier que cette page a l'apparence que vous voyez en ce moment. C'est aussi grâce à ce fichier que les pages de ce site on une apparence uniforme.

Un autre exemple : j'ai crée un style particulier à cette page pour cette forme de liste. Ceci pour illustrer l'ordre de priorité des feuilles de styles.

Voici une liste numérotée typique à cette page :

  1. Item 1
  2. Item 2

En cliquant sur ce lien vers une autre page, vous pourrez voir l'apparence d'une liste numérotée telle que définie dans le fichier styles.css. Le fait de redéfinir dans l'entête du document html un style pour les liste numérotées inhibe complètement le style de liste numérotée défini dans le fichier styles.css. Ainsi, toutes les liste que je placerais sur cette page auraient l'apparence du premier exemple de liste montré un peu plus haut. Le seul moyen d'en changer est de placer un style directement dans la balise <ol> comme dans le second exemple ou en définissant un nom de classe comme dans l'exemple du lien hypertexte plus haut.

Voici la feuille de style placée entre les balises <head> et </head> (l'entête de la page html) :

<style type="text/css">
<!--
ol {
   font-family : Times, Serif;
   font-style : italic;
   }
-->
</style>

Voici maintenant le style défini dans la balise <ol>, d'abord la liste, ensuite le code :

Ne peut être affiché correctement sous Netscape ou les anciennes versions de navigateurs.
Si c'est votre cas, cliquez ici pour visualiser.

<ol style="font-family:Arial, Sans-serif; font-weight:bold; font-size:16px;">
   <li> Item 1</li>
   <li> Item 2</li>
</ol>

Notez que vous ne pourrez peut-être pas apprécier les effets de survol avec Netscape 4.7 (les liens qui changent d'aspect lorsqu'on place le pointeur de la souris au dessus). J'ignore si les versions plus récentes supportent le style « a:hover ». De plus, Netscape éprouve des difficultés avec l'imbrication des styles. Le style de liste défini dans la balise provoque un affichage en double de tout le contenu des pages utilisant des <div>(comme celle-ci) alors que Internet Explorer (4 et 5.5) et Opera 5 affichent le style en cascade, comme il se doit (avec l'attribut italic définit dans l'en-tête du fichier). Cela est du au fait que Netscape 4.7 ne peut afficher les « couches » qu'avec la balise <layer> - mais moi, j'ai triché. Je ne peut vérifier le résultat avec Netscape 6, car je l'ai désinstallé parce que ma pauvre petite machine ne le pouvait le faire « rouler » convenablement - plantages récurents.

Si vous êtes un inconditionnel anti-Microsoft ou si vous avez tout simplement le goût d'essayer autre chose, vous pouvez essayer Opera. Il semblerait, selon plusieurs magazines télé et imprimés, que la dernière version sortie a résolu plusieurs problèmes et que c'est devenu l'alternative la plus intéressante. Le site www.oprea.com propose une version gratuite de son navigateur (avec un bandeau publicitaire) et qui affiche les styles que Netscape (4.7, à tout le moins) n'affiche pas...

|   Haut de la page   |   Sommaire   |

Didacticiels en ligne gratuits JavaScript

Bon! Comme toujours, je ne les ai pas tous essayés. Je n'ai fais que simplement les chercher... et j'en cherche encore. Alors, profitez-en, c'est de bon coeur! Les suggestions qui suivent ne sont triées d'aucune façon. Elles apparaissent simplement dans l'ordre où je les ai trouvées. Notez que, comme pour tous les liens sortant de ce site, les liens qui suivent ouvriront une nouvelle fenêtre du navigateur.

|   Haut de la page   |   Sommaire   |

Didacticiels en ligne gratuits CSS

Encore une liste de didacticiels que je n'ai pas testé hexaustivement. J'ai simplement regardé la première page de chacuns et les ai trouvées bien. W3Schools est, d'après moi, LA référence. Il y a aussi les html Goodies, (qui n'est pas sur la liste qui suit) qui proposent une foule de didacticiels dont les CSS. Si la langue anglaise n'est pas votre tasse de thé, essayez Web développeur ou Comment ça marche.

|   Haut de la page   |   Sommaire   |