Premiers pas en JavaScript
50.2 emprunt bancaire -
haut du calculateur
cuy copyleft
  See You Why?  

 


Présentation du calculateur (50.1) | | Bas du calculateur (50.3)

Contenu

 

 

I. Présentation de notre calculateur

voir < < < Section précédente

 

II. Création de la partie supérieure du calculateur

Avant de commencer,

observons le haut du calculateur :

C.U.Y. est un centre d'études à distance, pour mieux vous servir.

Votre avenir : être formé au C.U.Y.
Centre Universitaire Yourtown

Centre Universitaire de
Yourtown
 
rue des forges 39 - 7350 Yourtown
Tél : +32 (0)65 43 00 53

 

A. une observation

Ne ressemble-t-il pas étrangement à un tableau de 2 lignes et 3 colonnes,
bien que la première colonne ne semble pas divisée en deux lignes ?
Ceci est mis en évidence par l'image qui suit, en ajoutant dans la balise <table> l'argument border="2".

À ceux qui ont oublié (ou qui ne connaissent pas), nous suggérons d'aller (re)lire nos pages relatives au langage HTML et concernant les tableaux (http://cuy.be/html/html02fr.htm#TA).

C.U.Y. est un centre d'études à distance, pour mieux vous servir.

Votre avenir : être formé au C.U.Y.
Centre Universitaire Yourtown

Centre Universitaire de
Yourtown
 
rue des forges 39 - 7350 Yourtown
Tél : +32 (0)65 43 00 53

Cela suppose au moins une balise <table> suivie de </table>.

Les deux lignes se noteront par un doublement des deux balises <tr>...</tr>.

Les trois données (=colonnes) dans chaque ligne devraient donner naissance à un triplement des doubles balises <td>...</td> à l'intérieur de chaque ligne marquée par <tr>...</tr>.

 

B. un premier essai de tableau

 

<table>
  <tr> 
    <td> 
          <img src="../../images/logocuy1t.gif">
    </td>
    <td> 
      <p>Votre avenir : être formé au C.U.Y.<br>
                Centre Universitaire de Yourtown</p>
    </td>
    <td> 
                Centre Universitaire de<br>
                Yourtown</td>
  </tr>
  <tr> 
    <td>  
    </td>
    <td bgcolor="#FFFFFF" width="342"> 
                rue des forges 39 - 7350 Yourtown<br>
                Tél : +32 (0)65 43 00 53</td>
  </tr>
</table>

Ce qui nous donnerait :

C.U.Y. est un centre d'études à distance, pour mieux vous servir.

Votre avenir : être formé au C.U.Y.
Centre Universitaire de Yourtown

Centre Universitaire de
Yourtown
  rue des forges 39 - 7350 Yourtown
Tél : +32 (0)65 43 00 53

Heureusement, je sais que :

      1. mon logo CUY est grand (je sais qu'il fait 450 sur 300 pixels) ; je dois réduire cette image à 450 pixels de largeur sur 150 pixels de hauteur (déformations possibles et même probables) ;
      2. il s'appelle "logocuy1t.gif" ;
      3. il se situe 2 répertoires plus haut dans l'arborescence des fichiers, dans un répertoire 'images' ;
      4. j'aimerais aussi qu'un message apparaisse si la souris reste sur ce logo de CUY (du type : "C.U.Y. est un centre d'études à distance, pour mieux vous servir."). Et voilà où on en est... :

     

Tiens ! N'y a-t-il pas une erreur ? Je ne vois qu'un doublement (au lieu d'un triplement) des doubles balises <td>...</td> à l'intérieur de la deuxième ligne marquée par le deuxième <tr>...</tr>, d'ailleurs, l'adresse n'est pas à sa place et il y a une cellule non visible...

Cela ne nous rappelle-t-il pas qu'il existe une instruction propre à une cellule d'un tableau qui détermine qu'à partir de cette cellule les cellules contiguës seront divisées en deux : rowspan="2" ? En d'autres mots, que cette cellule-ci occupera deux lignes ? Et nous nous rappelons tous que cette précision ne peut apparaître que dans une balise de type <td>.

 

C. la gestion des couleurs

Choix de la couleur :
De plus, une couleur de fond de type brunâtre ou rougeâtre (un rouge pas trop poussé peut-être : essayons #F00000, #E00000, #C00000, #A00000, #900000... #C00000 semble être le meilleur).

Aisance du logo :
Et si mon logo de CUY était moins "serré" dans sa cellule ? Rien ne m'empêche de lui donner de l'aisance en précisant la taille de la cellule dans laquelle il se situera (480 sur 180 pour une image de 450 sur 150, c'est bien, non ?) ; voir modifications en rouge ci-dessous.
Et si de plus, dans cette cellule (voir vert ci-dessous), tout cela était centré ?

Quant à la seconde cellule (la deuxième de la même ligne), j'aimerais faire autrement pour que (voir bleu ci-dessous) :

Quant à la troisième cellule de la même ligne... même genre de critère, sauf encore plus grand et justification à droite (question d'esthétique).

Et si nous passions à la deuxième ligne ?

Deux <td> pour trois colonnes ?
Plus que deux cellules à définir, puisque le rowspan="2" de la première cellule indique que la première cellule de la première ligne occuperait 2 lignes.

Un dégradé de couleurs ?
La deuxième (qui est la première à définir) semble contenir un dégradé de couleurs, de brun à blanc, ou de C00000 à FFFFFF. Comment faire ? Avoir le logiciel libre "The Gimp" (téléchargeable ici) et suivre les explications ici. Une image du type :
 
fera l'affaire. Elle s'appelle "head-under.jpg" et se situe dans le même répertoire ; de plus, elle fait 220 pixels de large sur 39 pixels de haut. Curieux, la manière de l'appeler, non ? De quoi revoir un peu la balise "style"... non, je n'avais pas tout dit ;-))

Dernière cellule...
Et enfin, la dernière cellule : un texte quasi noir, à peine bleuté (#000033) sur fond blanc (#FFFFFF) pour écrire l'adresse et le numéro de téléphone... en gras, avec retour à la ligne et justification à droite.

Notre source du tableau supérieur est donc devenue :



<table>
  <tr> 
    <td width="480" height="180" rowspan="2" bgcolor="#C00000"> 
      <div align="center">
          <img src="../../images/logocuy1t.gif" width="450" height="150"
                         alt="C.U.Y. est un centre d'études à distance, pour mieux vous servir.">
          </div>
    </td>
    <td align="center" 
                title="Régent en sciences économiques, une formation qui vous ouvre les portes, tant dans l'enseignement
                         que dans le domaine bancaire, des assurances... notre Centre vous aidera dans toutes vos démarches."
                style="background-color:#C00000;font-family:serif;font-size:16px;color:white;font-weight:bold;" width="219"> 
      <p>Votre avenir : être formé au C.U.Y.<br>
                Centre Universitaire de Yourtown</p>
    </td>
    <td height="54" colspan="2" bgcolor="#C00000" width="342"> 
      <div align="right" style="font-family:serif;color:#FFFFFF;font-size:30px;font-weight:bold;padding-right:10px;">
                Centre Universitaire de<br>
                Yourtown</div>
    </td>
  </tr>
  <tr> 
    <td width="219" height="40" align="center" style="background-image:url(head-under.jpg);">  
    </td>
    <td bgcolor="#FFFFFF" width="342"> 
      <div align="right" style="color:#000033;font-weight:bold;padding-right:10px;padding-left:10px;">
                rue des forges 39 - 7350 Yourtown<br>
                Tél : +32 (0)65 43 00 53</div>
    </td>
  </tr>
</table>

Quelques questions que vous auriez pu (ou dû) vous poser :

    1. Pourquoi avoir fixé la largeur de la 2e colonne de la 1re ligne à 219 ?

      Très bonne observation... aviez-vous remarqué que l'image dégradée (head-under.jpg) avait pour mesure 220 x 39 ?
      Fixer la largeur de la colonne à 219 empêche de voir apparaître la limite (cadre) de l'image.

    2. Pourquoi avoir ajouté le paramètre "padding-right:10px;" dans la cellule de droite du tableau qui reprend le texte "Centre Universitaire de Yourtown" ?

      Ce texte écrit en blanc sur fond brunâtre est justifié à droite.
      En l'absence de ce paramètre, le texte blanc aurait "collé" au bord blanc, à gauche de cette cellule du tableau... peu esthétique, non ?

    3. Pourquoi avoir ajouté le paramètre "padding-left:10px;" dans la cellule de droite du tableau qui reprend l'adresse du "C.U.Y." ?

      J'aurais pu vous répondre "sérieusement" comme à la question précédente...
      Bravo pour votre question !
      Observons la gauche de la cellule :

      1. pas de justification à gauche ;
      2. texte noir sur fond blanc ;
      3. fond blanc contre fond blanc ;
      4. largeur de cette colonne fixée à 342 pixels...

      Rien ne justifie ce "padding-left:10px;"

    4. Pourquoi avoir ajouté le paramètre ' colspan="2" ' dans la cellule de droite du tableau qui reprend le texte "Centre Universitaire de Yourtown" (en haut, à droite) ?

      Ce paramètre signifierait que la/les cellule(s) située(s) en dessous serai(en)t divisée(s) en deux colonnes (ou que cette cellule est à cheval sur deux colonnes)...
      Conséquence : la ligne suivante aurait dû compter un couple <td>...</td> de plus que la précédente.
      Autre conséquence attendue : voir apparaître deux colonnes sous le texte "Centre Universitaire de Yourtown"... peu visible, non ?
      D'où, RIEN ne justifie la présence de ce paramètre ' colspan="2" ' dans la cellule de droite du tableau qui reprend le texte "Centre Universitaire de Yourtown"

    5. La largeur du tableau est-elle fixée ?

      À vous de relire la source...
      cependant, rappelez-vous que
      - le sigle CUY occupe 450 pixels de large et que nous l'avons placé dans une cellule de 480 pixels pour le laisser à l'aise ;
      - le dégradé de couleurs est une image de 230 pixels de large que nous avons coincée dans une cellule de 229 pixels de large ;
      - les cellules de droite ont chaque fois été dimensionnées à 342 pixels.
      Je n'avais vraiment pas envie de vous aider, mais je pense que, sauf erreur, la somme doit faire 1051 pixels.

Il ne nous restera plus qu'à nous occuper de la suite de la page, à savoir :

   Calculez vos remboursements
 
Bienvenue chez CUY

Notre HÉLHa
Contact
Rechercher
Calculatrice
Les nouvelles

Notre coup de coeur

Abonnez-vous gratuitement à
notre bulletin d'information!
Montant de l'emprunt
Taux d'intérêt %
Nombre de mensualités
Montant des mensualités
Instructions

Pour utiliser cette calculatrice, il suffit de compléter trois des quatre champs de ce formulaire, puis de cliquer sur le bouton "Calculer" en regard du paramètre à déterminer.

Attention: Les résultats peuvent comporter certaines erreurs d'arrondi.
Contactez votre organisme financier avant de prendre votre décision de financement.
Pour remettre le formulaire à zéro, cliquez sur
Site pédagogique réalisé par GVdK = CUY

 

qui suivra ce tableau supérieur que nous venons de créer :

C.U.Y. est un centre d'études à distance, pour mieux vous servir.

Votre avenir : être formé au C.U.Y.
Centre Universitaire Yourtown

Centre Universitaire de
Yourtown
 
rue des forges 39 - 7350 Yourtown
Tél : +32 (0)65 43 00 53

 

 

 

III. Création du formulaire de la partie inférieure du calculateur

voir suite >>>

 

IV. Dernières cellules du formulaire de la partie inférieure du calculateur

voir suite >>>

 

V. Premiers calculs JS du calculateur

voir suite >>>


Présentation du calculateur (50.1) | | Bas du calculateur (50.3)