L2 MIASHS 2014-2015 - Déroulement réel des cours

La « pensée » du Dimec'hrer, d'an 16 a viz Genver 2019 , 14h47m43s :
Ar re vezw a zivezwo med ar re sod ne zisodont ket.
  -- Proverbe Breton (Les saouls déssoûleront mais les fous ne défolleront pas.)

Semaine du lendi 19 janbier 2015 : TD n°1 (Cumul=2h)

Avant-propos HTML5
  • En-tête d'une page HTML5 : pour passer les tests du W3C une page doit avoir la structure suivante :
    <!DOCTYPE html>
    <html>
      <head lang="fr">
        <meta charset="utf-8">
        <title>Un titre si possible intelligent...</title>
      </head>
      <body>
        ....
        ....
      </body>
    </html>
    
    À comparer avec celui nécessaire pour xHTML visible dans la section 2.5 du poly.
    Contrairement à xHTML, l'utilisation des majuscules & minuscules n'est pas différenciée en HTML5.
  • Quelques balises de base (dans leur version la plus simple) valables dans toutes les versions de (x)HTML(5): <h1>, <h2>, etc., <p>, <ul>, <ol>, <li>, <span>, <div> (section 2.6 du poly).
Application directe
Réalisez les trois pages site01x.html, site02x.html et site03x.html. Vos pages doivent absolument passer avec succès les tests du W3C. Vous ne vous occuperez bien entendu pas du tout de la présentation : ce sera fait avec l'étude des CSS.
Remarque : Si vous voulez les modifier en y intégrant vos propres loisirs, réels ou inventés, vous pourrez trouver les noms d'un grand nombre de collections sur les pages http://www.vignobletiquette.com/collec/nom_coll.htm, http://capsules.musa.free.fr/Collections05.html, ou http://christophe.giordani.free.fr/collections.htm.
Sur la première page, les mots « Licence MIASHS » devront être un lien vers une page institutionnelle de votre choix, en rapport avec la licence MIASHS (la page de l'université, cette page-ci, la page de l'UFR MIME, etc.), tandis que les mots « Machin Chose » (ou ce que vous aurez mis à la place) devront être un lien vers la page d'accueil que votre voisin est en train de réaliser en même temps que vous.
Sur les machines des salles pédagogiques, vous enregistrez vos pages sous votre répertoire www et vous les visualisez dans le navigateur à l'adresse
http://webserv.pedago.local/~votreLogin/chemin
chemin est le chemin relatif vers votre page depuis www
Dernière modification : 25/8/2016

Semaine du lendi 26 janbier 2015 : CM n°2 (Cumul=2h)

Gestion des couleurs en HTML et CSS CSS
  • Feuille de style, séparation données-présentation, syntaxe d'une feuille de style.
  • Premier essai : sans CSS et avec CSS. Ou ce fichier pour imprimer l'ensemble.
  • Premières propriétés : background, color, margin, padding, text-align.
Dernière modification : 25/8/2016

Semaine du lendi 26 janbier 2015 : TD n°2 (Cumul=4h)

Acid Test :
Si vous ne comprenez pas pourquoi les informaticiens vous cassent la tête en essayant de vous expliquer qu'Internet Explorer c'est vraiment pas bon, utilisez l'Acid Test, pour tester la compatibilité de votre navigateur avec les standards du W3C (l'organisme mondial chargé d'élaborer et de gérer les standards du web) : Gestion des couleurs en HTML et CSS CSS Exercice Bonus
  • Les bugs d'Internet Explorer, les contourner, les utiliser : voir le chapitre 14 du poly.
Dernière modification : 25/8/2016

Semaine du lendi 2 fébrier 2015 : CM n°3 (Cumul=4h)

Le contrôle n°1 aura lieu le mercredi 25 février, de 14h à 16h, lors du CM n°6, dans la salle de cours habituelle, dans les conditions suivantes :
  • sur feuille,
  • tous documents PAPIER autorisés,
  • aucun document électronique (liseuse, tablette, ordinateur, téléphone, etc.).
CSS
  • Les bugs d'Internet Explorer, les contourner, les utiliser : voir le chapitre 14 du poly.
HTML5
  • Nouveautés en HTML5 : nous nous concentrerons sur les nouvelles balises qui apportent de la sémantique au texte. Vous pourrez comprendre la philosophie derrière HTML5 en vous polongeant dans le livre Dive into HTML5 : http://diveintohtml5.info/. (Voir la page https://fr.wikipedia.org/wiki/HTML5 pour une simple liste de toutes les nouveautés.)
    • main : Définit le contenu principal de la page, il doit être unique dans la page.
    • section : Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d'application web.
    • nav : Section possédant des liens de navigation principaux (au sein du document ou vers d'autres pages).
    • article : Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension.
    • aside : Section dont le contenu est un complément par rapport à ce qui l'entoure, qui n'est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.
    • hgroup : La balise <hgroup> n'existe plus en HTML5 (février 2013). Eh oui, ce sont des choses qui arrivent quand on travaille sur un truc pas entièrement finalisé.
    • mark : Définit un texte marqué. Surligneur de texte.
    • header : Section d'introduction d'un article, d'une autre section ou du document entier (en-tête de page).
    • footer : Section de conclusion d'une section ou d'un article, voire du document entier (pied de page).

    Vous trouverez sur le web de nombreuses images illustrant l'utilisation de ces balises, comme par exemple celle-ci qui provient de Alsacréation :

    Imbrication des balises de base en HTML5

    Inconvénients : elles ne sont pas forcément compatibles avec tous les navigateurs... En particulier les anciens, et en particulier toutes les anciennes versions de IE jusqu'à IE8 compris. Visitez http://html5test.com/ pour connaître le niveau de compatibilité de votre navigateur.

  • Compatibilité : comme dit précédemment, les balises HTML5 ne sont pas forcément compatibles avec tous les navigateurs... En particulier les anciens, et en particulier toutes les anciennes versions de IE jusqu'à IE8 compris. Visitez http://html5test.com/ pour connaître le niveau de compatibilité de votre navigateur.

    Les navigateurs autres que IE se contentent d'ignorer les balises qu'ils ne connaissent pas. Votre page ne sera pas présentée selon vos souhaits, mais le contenu sera là quand même.
    IE, lui, ignore le texte qui se trouvent dans de telles balises... Votre page risque d'être intégralement vide... Gênant...

    Pour vous protéger, vous pouvez placer les fichiers html5shiv.js et html5shiv-printshiv.js dans votre répertoire, et ajouter le code suivant dans vos pages web, juste avant </head> :

          <!--[if lt IE 9]>
             <script src="html5shiv.js"></script>
             <script src="html5shiv-printshiv.js"></script>
          <![endif]-->        
    
PHP :
Dernière modification : 25/8/2016

Semaine du lendi 2 fébrier 2015 : TD n°3 (Cumul=6h)

Rappel : le contrôle n°1 aura lieu le mercredi 25 février, de 14h à 16h, lors du CM n°6, dans la salle de cours habituelle, dans les conditions suivantes :
  • sur feuille,
  • tous documents PAPIER autorisés,
  • aucun document électronique (liseuse, tablette, ordinateur, téléphone, etc.).
HTML5
  • Vous trouverez sur le web de nombreuses images illustrant l'utilisation de ces balises, comme par exemple celle-ci qui provient de Alsacréation :

    Imbrication des balises de
	 base en HTML5

    Inconvénients : elles ne sont pas forcément compatibles avec tous les navigateurs... En particulier les anciens, et en particulier toutes les anciennes versions de IE jusqu'à IE8 compris. Visitez http://html5test.com/ pour connaître le niveau de compatibilité de votre navigateur.

  • Compatibilité : comme dit précédemment, les balises HTML5 ne sont pas forcément compatibles avec tous les navigateurs... En particulier les anciens, et en particulier toutes les anciennes versions de IE jusqu'à IE8 compris. Visitez http://html5test.com/ pour connaître le niveau de compatibilité de votre navigateur.

    Les navigateurs autres que IE se contentent d'ignorer les balises qu'ils ne connaissent pas. Votre page ne sera pas présentée selon vos souhaits, mais le contenu sera là quand même.
    IE, lui, ignore le texte qui se trouvent dans de telles balises... Votre page risque d'être intégralement vide... Gênant...

    Pour vous protéger, vous pouvez placer les fichiers html5shiv.js et html5shiv-printshiv.js dans votre répertoire, et ajouter le code suivant dans vos pages web, juste avant </head> :

          <!--[if lt IE 9]>
             <script src="html5shiv.js"></script>
             <script src="html5shiv-printshiv.js"></script>
          <![endif]-->        
      
PHP
Dernière modification : 25/8/2016

Semaine du lendi 9 fébrier 2015 : CM n°4 (Cumul=6h)

Rappel
Rappel : le contrôle n°1 aura lieu le mercredi 25 février, de 14h à 16h, lors du CM n°6, dans la salle de cours habituelle, dans les conditions suivantes :
  • sur feuille,
  • tous documents PAPIER autorisés,
  • aucun document électronique (liseuse, tablette, ordinateur, téléphone, etc.).
Formulaires
Dernière modification : 25/8/2016

Semaine du lendi 9 fébrier 2015 : TD n°4 (Cumul=8h)

Rappel
Rappel : le contrôle n°1 aura lieu le mercredi 25 février, de 14h à 16h, lors du CM n°6, dans la salle de cours habituelle, dans les conditions suivantes :
  • sur feuille,
  • tous documents PAPIER autorisés,
  • aucun document électronique (liseuse, tablette, ordinateur, téléphone, etc.).
Exercices
Dernière modification : 25/8/2016

Semaine du lendi 16 fébrier 2015 : CM n°5 (Cumul=8h)

Rappel : le contrôle n°1 aura lieu le mercredi 25 février, de 14h à 16h, lors du CM n°6, dans la salle de cours habituelle, dans les conditions suivantes :
  • sur feuille,
  • tous documents PAPIER autorisés,
  • aucun document électronique (liseuse, tablette, ordinateur, téléphone, etc.).
  • Formulaires et HTML5
    HTML5 ajoute un certain nombre de contrôles pour les formulaires. (Vous pouvez les tester.)
    Les navigateurs qui ne savent pas les utiliser correctement se contenteront de les traiter comme un input de type text.
    Sauf mention contraire les versions récentes de Opera, Chrome et Firefox savent les utiliser correctement.
    1. Message d'invite dans un input :
      <input name="c0" placeholder="Veuillez remplir SVP">
    2. Autofocus sur n'importe quel contrôle :
      <input name="c1" autofocus>
    3. Saisie d'un email, avec contrôle (simple) de saisie :
      <input name="c2" type="email">
    4. Saisie d'une URL, avec contrôle (simple) de saisie :
      <input name="c3" type="URL">
    5. Saisir un nombre dans un certain intervalle :
      <input name="c4" type="number" min="0" max="10" step="2" value="6">
    6. Saisir un nombre avec un curseur :
      <input name="c5" type="range" min="0" max="10" step="2" value="6">
    7. Saisie d'une date :
      Plusieurs versions :
      <input name="c6" type="date">
      <input name="c7" type="datetime">
      <input name="c8" type="month">
      <input name="c9" type="week">
      <input name="c10" type="time">
      Fonctionne avec les versions récentes deOpéra, Chrome. Ne fonctionne pas pour l'instant avecFirefox.
    8. Choisir une couleur :
      <input name="c11" type="color">
    9. Champ obligatoire :
      <input name="c12" required>
  • Quelle valeur pour method ? get ou post ?
    getpost
    Données visibles Oui, dans l'adresse de la page. Non : à privilégier quand les informations transmises contiennent des données sensibles (mots de passe par exemple).
    En cas de reload La page est recalculée sans demande de confirmation : à éviter quand la page modifie quelque chose, par exemple dans une base de données. Le navigateur demande confirmation avant de recalculer la page : à privilégier pour toute saisie de données destinées à modifier le contenu d'une base de données ou d'un fichier.
    Taille limite pour les données Oui, en général aux alentours de 2000 caractères Non.
    Format des données Exclusivement des caractères ASCII. Libre.
    Javascript Les données sont dans l'adresse, donc javascript peut les récupérer. Javascript ne peut pas les récupérer directement.
  • Chaînes de caractères : Chapitre 8.
    Exercice du chapitre 8.
Dernière modification : 25/8/2016

Semaine du lendi 16 fébrier 2015 : TD n°5 (Cumul=10h)

Rappel : le contrôle n°1 aura lieu le mercredi 25 février, de 14h à 16h, lors du CM n°6, dans la salle de cours habituelle, dans les conditions suivantes :
  • sur feuille,
  • tous documents PAPIER autorisés,
  • aucun document électronique (liseuse, tablette, ordinateur, téléphone, etc.).
Formulaires et HTML5
HTML5 ajoute un certain nombre de contrôles pour les formulaires. (Vous pouvez les tester.)
Les navigateurs qui ne savent pas les utiliser correctement se contenteront de les traiter comme un input de type text.
Sauf mention contraire les versions récentes de Opera, Chrome et Firefox savent les utiliser correctement.
  1. Message d'invite dans un input :
    <input name="c0" placeholder="Veuillez remplir SVP">
  2. Autofocus sur n'importe quel contrôle :
    <input name="c1" autofocus>
  3. Saisie d'un email, avec contrôle (simple) de saisie :
    <input name="c2" type="email">
  4. Saisie d'une URL, avec contrôle (simple) de saisie :
    <input name="c3" type="URL">
  5. Saisir un nombre dans un certain intervalle :
    <input name="c4" type="number" min="0" max="10" step="2" value="6">
  6. Saisir un nombre avec un curseur :
    <input name="c5" type="range" min="0" max="10" step="2" value="6">
  7. Saisie d'une date :
    Plusieurs versions :
    <input name="c6" type="date">
    <input name="c7" type="datetime">
    <input name="c8" type="month">
    <input name="c9" type="week">
    <input name="c10" type="time">
    Fonctionne avec les versions récentes deOpéra, Chrome. Ne fonctionne pas pour l'instant avecFirefox.
  8. Choisir une couleur :
    <input name="c11" type="color">
  9. Champ obligatoire :
    <input name="c12" required>
Exercices
Dernière modification : 25/8/2016

Semaine du lendi 23 fébrier 2015 : CM n°6 (Cumul=10h)

Contrôle n°1.
Dernière modification : 25/8/2016

Semaine du lendi 23 fébrier 2015 : TD n°6 (Cumul=12h)

Exercices
Dernière modification : 25/8/2016

Semaine du lendi 16 môrs 2015 : CM n°7 (Cumul=12h)

  • Formulaires : exercice 5 du Chapitre 7 : switch.
  • Tableaux en PHP : Chapitre 9. Il existe aussi la fonction array pour créer et remplir un tableau.
    N'hésitez pas à explorer la page de php.net qui est consacrée aux tableaux.
Dernière modification : 25/8/2016

Semaine du lendi 16 môrs 2015 : TD n°7 (Cumul=14h)

Dernière modification : 25/8/2016

Semaine du lendi 23 môrs 2015 : TD n°8 (Cumul=16h)

Dernière modification : 25/8/2016

Semaine du lendi 30 môrs 2015 : TD n°9 (Cumul=18h)

Le contrôle n°2 aura lieu le lundi 11 mai, de 8h à 10h, en amphi A4, dans les conditions suivantes :
  • sur feuille,
  • tous documents PAPIER autorisés,
  • aucun document électronique (liseuse, tablette, ordinateur, téléphone, etc.).
  • Sessions.
    Le texte qui suit est une partie de la page consacrée aux sessions sur le site de http://fr.php.net :
    Le support des sessions de PHP est un moyen de préserver des données entre plusieurs accès. Cela vous permet de créer des applications personnalisées, et d'augmenter l'attrait de votre site.
    Chaque visiteur accédant à votre page web se voit assigner un identifiant unique, appelé "identifiant de session". Il peut être stocké soit dans un cookie, soit propagé dans l'URL.
    Le support des sessions vous permet d'enregistrer un nombre illimité de variables qui doivent être préservées entre les requêtes. Lorsqu'un visiteur accède à votre site, PHP va vérifier automatiquement (si session.auto_start est activé) ou sur demande (explicitement avec session_start() ou implicitement avec session_register()) s'il existe une session du même nom. Si c'est le cas, l'environnement précédemment sauvé sera recréé.
    La seule fonction nécessaire pour un usage simple des sessions est session_start(), mais je ne peux que vous encourager à aller voir les autres.
  • Application des sessions : identification des visiteurs.
    Principe :
    • Deux variables de session contiennent le login et le mot de passe du visiteur (variables vides si le visiteur n'est pas identifié).
    • Si le visiteur n'est pas identifié, le menu propose un choix Se connecter qui envoie sur un formulaire de saisie (on peut aussi inclure ce formulaire directement dans le menu). Si le visiteur est identifié, le menu propose un choix Se déconnecter qui vide les variables de session qui contiennent le login et le mot de passe du visiteur.
    • Chaque page commence par quelque chose qui ressemblera à :
                if (le visiteur n'a pas le bon niveau d'autorisation pour cette page) {
                       message de refus
                       fin de page
                       return ;
                }
    • L'évaluation du niveau d'autorisation peut se faire de plusieurs manières :
      • Mauvais, car complique les modifications : coder en dur le test sur chaque possibilité  :
                            if ((nom=="bidule") && (mot de passe=="truc")) {
                                ...
        
                            } elseif ((nom=="chose") && (mot de passe=="n'importe quoi")) {
                                ...
                            } else
                                etc
                        
      • Mieux : ranger les noms et mots de passe dans un tableau, et parcourir le tableau pour faire la vérification.
      • (Parfait : la même chose, mais créer une table spéciale dans une base de données au lieu d'utiliser un tableau.)
    • Pour être parfait ce serait bien que ce soit une fonction qui affiche le menu, et que cette fonction décide d'elle-même des choix disponibles en fonction du niveau d'autorisation du visiteur.
    • Exemple d'utilisation des sessions : http://www.grappa.univ-lille3.fr/~gonzalez/session_php.
  • Espionner vos visiteurs : informations sur leur navigateur, informations sur leur origine, les suivre à la trace (cookies).
    Les informations que vous pouvez obtenir sans douleur sur vos visiteurs.
    1. Les informations sur leur navigateur :

      • Le navigateur que vous utilisez : .
      • La version de votre navigateur : .
      • Votre système d'exploitation : .
      La fonction à utiliser est get_browser().
      La liste des informations qu'on peut obtenir est la suivante  :
      Remarque :
      La fonction get_browser() nécessite que la directive de configuration browscap dans le fichier php.ini pointe vers le fichier browscap.ini de votre système. Ce fichier contient les caractéristiques des navigateurs, et il doit bien entendu être à jour.
      S'il vous est impossible de vous en assurer, vous pouvez vous rabattre sur la variable $_SERVER['HTTP_USER_AGENT'] qui contient un sous-ensemble de ces informations, mais d'une manière moins lisible. Pour vous on obtient « CCBot/2.0 (https://commoncrawl.org/faq/) ».
      Vous pouvez aussi utiliser la bibliothéque php-local-browscap.
    2. Les informations sur l'origine de vos visiteurs :
      • l'adresse de la machine de vos visiteurs, avec $_SERVER['REMOTE_ADDR'] pour l'adresse IP (pour vous il s'agit de « 34.224.102.60 »), et avec gethostbyaddr($_SERVER['REMOTE_ADDR']) pour son adresse domainisée (pour vous il s'agit de « ec2-34-224-102-60.compute-1.amazonaws.com »).
        En plus le nom de la machine permet peut-être de deviner votre pays.
    3. Les cookies :
      Les cookies doivent être vus comme des variables qui peuvent être conservées entre deux exécutions de la page. Ils sont enregistrés sur la machine cliente. La seule restriction est qu'ils doivent être enregistrés avant l'envoi de tout texte, donc en début de page.
      La fonction qui s'en charge est setcookie().
      Une utilisation pourrait être par exemple de mettre en tête de ce programme :
      1. <?php
      2.   $compteurdevisites = $_COOKIE['compteurdevisites']+1;
      3.   $dernierevisite = $_COOKIE['dernièrevisite'];
      4.   setcookie("compteurdevisites", "$compteurdevisites");
      5.   setcookie("dernièrevisite", time());
      6. ?>
      et il suffirait d'utiliser dans votre page
      1. <?php
      2.   echo "C'est votre <em>$compteurdevisites</em>° visite";
      3.   if ($dernierevisite != "") {
      4.       echo ", la dernière c'était le <em>"
      5.           .strftime("%A %e %B %Y", $dernierevisite)
      6.           ."</em>, à <em>"
      7.           .strftime("%Hh %Mm %Ss", $dernierevisite)
      8.           ."</em>";
      9.   }
      10.   echo ".";
      11. ?>
      pour obtenir cet affichage :
      C'est votre 1° visite.
    4. En tant qu'internaute, ces indiscrétions sont-elles dangereuses ?
      Elles permettent en tout cas pas mal de choses :
      • N'importe quel site marchand peut vous pister ainsi, et garder l'historique de vos connexions. Il lui suffit d'enregistrer un identifiant sur votre machine, et d'enregistrer dans ses bases de données l'historique de vos actions dans ses pages (vos clics, vos déplacements, ce que vous remplissez dans les formulaires, le temps passé sur chaque page que vous visitez, etc.).
      • N'oubliez pas que votre fournisseur d'accès connaît toutes les pages que vous avez consultées par son intermédaire.
      Il y a quand même des bonnes nouvelles dans tout ça :
      • Si vous vous connectez à internet par l'intermédiaire d'un fournisseur d'accès, votre adresse IP (34.224.102.60) change à chaque connexion... Votre machine devient beaucoup moins facilement identifiable, en tout cas sans la complicité de votre fournisseur d'accès (qui, lui, sait toujours à tout moment à quel utilisateur correspond chaque adresse IP).
        Il faut remarquer que les adresses changent de moins en moins avec les connexions par cable ou ADSL.
      • Grâce aux cookies, un site est en effet capable de savoir si vous êtes déjà venu le voir, MAIS :
        • Il ne sait pas réellement qui vous êtes : il sait seulement que vous êtes l'utilisateur n°X ; cela lui permet de savoir ce que vous avez fait d'autre chez lui, en tant qu'utilisateur n°X, mais c'est tout.
          Il n'est pas capable de deviner ce que vous n'avez pas dit : votre nom, votre numéro de carte de crédit, votre numéro de téléphone, l'endroit où vous vivez (bien que l'adresse IP de votre machine lui permette sans doute de deviner votre pays, voir plus haut).
          Attention : si vous donnez ce genre de renseignements (nom, numéro de carte de crédit, numéro de téléphone, endroit où vous vivez) quelque part, ne vous étonnez pas qu'on s'en souvienne...
        • Il suffit de les désactiver, pour que les cookies deviennent inoffensifs (voir ci-dessous).
    5. Comment s'en protéger ?
      • Il est facile de se protéger des cookies. Vous pouvez, au choix :
        • régler votre navigateur pour qu'il refuse les cookies ; cependant certains sites ne vous laissent pas entrer si vous avez désactivé l'option Cookies. Vous allez peut-être avoir envie de laisser les cookies actifs pour visiter ces sites ; si vous êtes vraiment certain que cela en vaut la peine, vous avez peut-être intérêt à regarder les deux points suivants ;
        • régler votre navigateur pour qu'il accepte les cookies, mais qu'il les efface à chaque nouvelle session ;
        • effacer vous-même à la main les cookies ; par exemple dans Firefox, vous allez dans la suite de menus Édition/Préférences/Vie privée, et vous pouvez effacer les cookies (et d'autres choses).
      • Le reste fait partie de la norme HTML. C'est ce qui concerne l'identification de votre machine, de son système d'exploitation et de son navigateur, des pages qui ont été visitées, de votre provenance, la protection est beaucoup plus difficile.
    6. Plus de lecture : la CNIL avec en particulier leurs pages intitulées « Découvrez comment vous êtes pistés sur internet ».
  • Exercice : réaliser ce site :
    site.php
    [cacher les numéros de lignes]
    1. <!DOCTYPE html>
    2. <html>
    3.   <head lang="fr">
    4.     <meta charset="utf-8">
    5.     <link rel="shortcut icon" href="http://www.grappa.univ-lille3.fr/~gonzalez/images/dg.ico" type="image/ico" />
    6. <?php
    7. $menu=array(
    8.    "G"=>"Georges",
    9.    "P"=>"Proserpine",
    10.    "H"=>"Henri",
    11.    "I"=>"Iphigénie",
    12.    "L"=>"Léontine",
    13.    "M"=>"Marcel",
    14. );
    15. if (isset($_GET["choix"]) && isset($menu[$_GET["choix"]]))
    16.    $titre = "Un site &mdash; Le coin de ".$menu[$_GET["choix"]];
    17. else
    18.    $titre = "Un site...";
    19. ?>
    20.     <link rel="stylesheet"  href="site.css" />
    21.     <title><?php echo $titre?></title>
    22. </head><body>
    23. <div class="menu">
    24. Menu&nbsp;:
    25. <?php
    26. foreach ($menu as $k=>$v) {
    27.   if (isset($_GET["choix"]) && ($k==$_GET["choix"]))
    28.      echo "<div class=\"eltmenuactif\">$v</div>\n";
    29.   else
    30.      echo "<div class=\"eltmenu\"><a href=\"site.php?choix=$k\">$v</a></div>\n";
    31. }
    32. ?>
    33. </div>
    34. <h1><?php echo $titre?></h1>
    35. <div>
    36. <?php
    37. if (isset($_GET["choix"]))  
    38.     switch ($_GET["choix"]) {
    39.     case "G":
    40.       echo "Texte spécifique pour Georges seul.<br/>";
    41.     case "H":
    42.       echo "Texte pour Henri et Georges.<br/>";
    43.     case "I":
    44.       echo "Texte pour Henri, Georges et Iphigénie.<br/>";
    45.       break;
    46.     case "P":
    47.       echo "Texte pour Proserpine seule.<br/>";
    48.       break;
    49.     case "L":
    50.       echo "Texte pour Léontine seule.<br/>";
    51.     case "M":
    52.       echo "Texte pour Léontine et Marcel.<br/>";
    53.       break;
    54.     default:
    55.       echo "Mais qui êtes-vous donc&nbsp;???";
    56.     }
    57. ?>
    58. </div>
    59. </body></html>
    60.  
Dernière modification : 25/8/2016

Semaine du lendi 6 averil 2015 : TD n°10 (Cumul=20h)

Rappel : le contrôle n°2 aura lieu le lundi 11 mai, de 8h à 10h, en amphi A4, dans les conditions suivantes :
  • sur feuille,
  • tous documents PAPIER autorisés,
  • aucun document électronique (liseuse, tablette, ordinateur, téléphone, etc.).
PHP
  • Finir l'exercice :
    site.php
    [cacher les numéros de lignes]
    1. <!DOCTYPE html>
    2. <html>
    3.   <head lang="fr">
    4.     <meta charset="utf-8">
    5.     <link rel="shortcut icon" href="http://www.grappa.univ-lille3.fr/~gonzalez/images/dg.ico" type="image/ico" />
    6. <?php
    7. $menu=array(
    8.    "G"=>"Georges",
    9.    "P"=>"Proserpine",
    10.    "H"=>"Henri",
    11.    "I"=>"Iphigénie",
    12.    "L"=>"Léontine",
    13.    "M"=>"Marcel",
    14. );
    15. if (isset($_GET["choix"]) && isset($menu[$_GET["choix"]]))
    16.    $titre = "Un site &mdash; Le coin de ".$menu[$_GET["choix"]];
    17. else
    18.    $titre = "Un site...";
    19. ?>
    20.     <link rel="stylesheet"  href="site.css" />
    21.     <title><?php echo $titre?></title>
    22. </head><body>
    23. <div class="menu">
    24. Menu&nbsp;:
    25. <?php
    26. foreach ($menu as $k=>$v) {
    27.   if (isset($_GET["choix"]) && ($k==$_GET["choix"]))
    28.      echo "<div class=\"eltmenuactif\">$v</div>\n";
    29.   else
    30.      echo "<div class=\"eltmenu\"><a href=\"site.php?choix=$k\">$v</a></div>\n";
    31. }
    32. ?>
    33. </div>
    34. <h1><?php echo $titre?></h1>
    35. <div>
    36. <?php
    37. if (isset($_GET["choix"]))  
    38.     switch ($_GET["choix"]) {
    39.     case "G":
    40.       echo "Texte spécifique pour Georges seul.<br/>";
    41.     case "H":
    42.       echo "Texte pour Henri et Georges.<br/>";
    43.     case "I":
    44.       echo "Texte pour Henri, Georges et Iphigénie.<br/>";
    45.       break;
    46.     case "P":
    47.       echo "Texte pour Proserpine seule.<br/>";
    48.       break;
    49.     case "L":
    50.       echo "Texte pour Léontine seule.<br/>";
    51.     case "M":
    52.       echo "Texte pour Léontine et Marcel.<br/>";
    53.       break;
    54.     default:
    55.       echo "Mais qui êtes-vous donc&nbsp;???";
    56.     }
    57. ?>
    58. </div>
    59. </body></html>
    60.  
JavaScript
Recycler... Recyclage...
Pour JavaScript, nous nous baserons sur le cours très bien fait de Fabien Torre.
  • Types simples, variables, expressions et instructions JavaScript.
    Remarques :
    • Syntaxe très proche de PHP, mais pas de « $ » pour préfixer le nom des variables.
    • Pour avoir accès aux messages d'erreurs (erreurs de syntaxe), aller dans le menus Outils, puis Développement web puis Console web.
      Ou utiliser le raccourci Ctrl Maj K.
    • Allez voir le code source de la page HTML obtenue : au contraire de PHP, on ne voit que le code JavaScript, et non le résultat de son exécution.
    • À l'intérieur du corps d'une fonction (voir ci-dessous), le mot-clé var est obligatoire pour créer une variable locale à cette fonction. Il ne l'est pas dans l'espace global ni pour les arguments des fonctions.
    Exemple récapitulatif :
    javascript-01.html
    [cacher les numéros de lignes]
    1. <!DOCTYPE html>
    2. <html>
    3.   <head lang="fr">
    4.     <meta charset="utf-8">
    5.     <title>JavaScript, exemple n°1</title>
    6.   </head>
    7.   <body>
    8. <h1>JavaScript, exemple n°1</h1>
    9.  
    10. <script>
    11.  
    12. document.writeln("Hello world<br/>");
    13.  
    14. document.write ("\n<hr/>\n\n");
    15.  
    16. for (i=0 ; i<10 ; i++) {
    17.   document.write(i," ");
    18. }
    19.  
    20. // pour marquer une séparation sur la page vue dans le navigateur
    21. document.writeln ("\n<hr/>\n");
    22.  
    23. prenom = 'Toto';
    24. document.write("salut ");
    25. document.writeln(prenom);
    26. document.writeln("<p>ça va aujourd'hui ?</p>");
    27. document.writeln('<p>oui, ça va aujourd\'hui !</p>');
    28.  
    29. // pour marquer une séparation sur la page vue dans le navigateur
    30. document.writeln ("\n<hr/>\n");
    31.  
    32. prenom = 'Marcel';
    33. document.writeln("salut "+prenom+"<p>ça va aujourd'hui ?</p>\n<p>oui, ça va aujourd\'hui !</p>");
    34. </script>
    35.  
    36.   </body>
    37. </html>
    38.  
  • Exercices :
    1. Créer une page HTML et utiliser les instructions document.write et document.writeln en JavaScript pour afficher : un « Hello World! », un ensemble de paragraphes, un nombre...
    2. Déclarer une variable contenant une température, puis comparer cette variable à une valeur seuil en utilisant la structure if, afficher un message si la température est inférieure, un autre message si elle est supérieure.
    3. Afficher tous les nombres impairs entre 0 et 15000, par ordre croissant avec les boucles while et for.
    4. Écrire un programme qui affiche la table de multiplication par 10.
    5. Écrire une fonction qui affiche n!.
  • Fonctions et procédures en JavaScript, Structures de contrôle en JavaScript.
    Exemple :
    javascript-02.html
    [cacher les numéros de lignes]
    1. <!DOCTYPE html>
    2. <html>
    3.   <head lang="fr">
    4.     <meta charset="utf-8">
    5.     <title>JavaScript, exemple n°2</title>
    6.   </head>
    7.   <body>
    8. <h1>JavaScript, exemple n°2</h1>
    9.  
    10. <script>
    11. // ================================================================
    12. function tripleDe(n) {
    13.   return 3*n ;
    14. }
    15. // ================================================================
    16.  
    17. for (i=0 ; i<10 ; i++)
    18.   document.writeln("le triple de " + i + " est "+tripleDe(i)+".<br/>")
    19.  
    20. </script>
    21.   </body>
    22. </html>
    23.  
  • Structures de données JavaScript : les tableaux.
    Remarques :
    • var carnet = new Array(); peut s'écrire carnet = Array();.
    • Attention à la majuscule obligatoire pour Array.
    Exemple récapitulatif :
    javascript-03.html
    [cacher les numéros de lignes]
    1. <!DOCTYPE html>
    2. <html>
    3.   <head lang="fr">
    4.     <meta charset="utf-8">
    5.     <title>JavaScript, exemple n°3</title>
    6.   </head>
    7.   <body>
    8. <h1>JavaScript, exemple n°3</h1>
    9.  
    10. <script>
    11. // ================================================================
    12. function hr() { // pour marquer une séparation sur la page vue dans le navigateur
    13.   document.writeln ("\n<hr/>\n");
    14. }
    15. // ================================================================
    16.  
    17.  
    18. t = Array();
    19. t[0]  = 2;
    20. t[1]  = 3.14;
    21. t[2]  = 'coucou';
    22. for (i in t)
    23.   document.writeln(t[i]," ");
    24.  
    25. hr(); // coupure...
    26.  
    27. notes = Array(10,5,20,14,2);
    28. for (i in notes)
    29.   document.writeln(notes[i]," ");
    30.  
    31. hr(); // coupure...
    32.  
    33. carnet = Array();
    34. carnet['pierre']  = '19 ans';
    35. carnet['paul']    = '26 ans';
    36. carnet['jacques'] = '30 ans';
    37.  
    38. for (i in carnet) {
    39.   document.write('la clef vaut : ' + i);
    40.   document.writeln(', la valeur associée est : ' + carnet[i]+'<br/>');
    41. }
    42. </script>
    43.  
    44.  
    45.  
    46.   </body>
    47. </html>
    48.  
  • Gestion des événements et des actions en JavaScript (première et deuxième parties : capture d'événements et fonctions associables).
    Remarque :
    • onunload semble poser des problèmes à un certain nombre de navigateurs.
    Exemple récapitulatif :
    javascript-04.html
    [cacher les numéros de lignes]
    1. <!DOCTYPE html>
    2. <html>
    3.   <head lang="fr">
    4.     <meta charset="utf-8">
    5.     <title>JavaScript, exemple n°4</title>
    6.   </head>
    7.   <body onload="alert('Vous voilà enfin!!!\nJe vous attendais avec impatience...');">
    8. <h1>JavaScript, exemple n°4</h1>
    9.  
    10. <!-- déclenchement d'une alerte immédiate (alert) -->
    11. <button onclick="alert('Coucou !')">cliquez ici !</button>
    12.  
    13. <!-- déclenchement d'une alerte dans une seconde (setTimeout) -->
    14. <button onclick="setTimeout('alert(\'Surprise !\')',1000)">cliquez ici aussi&nbsp;!</button>
    15.  
    16. <!-- répétition toutes les 5 secondes (setInterval) -->
    17. <script>
    18. clock_id = setInterval('alert(\'hi hi !\');',5000);
    19. // pour désactiver: clearInterval(clock_id);
    20. </script>
    21.  
    22.   </body>
    23. </html>
    24.  
  • Exercices :
    1. Créer une alerte qui affiche « Hello World ! » en utilisant alert().
    2. Utiliser la fonction prompt() pour demander son prénom à l'utilisateur et afficher dans une boîte alerte « Bonjour ….. » avec le prénom entré.
    3. Demander à l'utilisateur deux nombres et afficher leur somme avec prompt() et alert() (vous devrez convertir le nombre entré en entier avec parseInt()).
    4. Ajouter une alerte au chargement de la page qui affiche « Hello World ! » en utilisant l'événement onload (dans le body du HTML).
Dernière modification : 25/8/2016

Semaine du lendi 13 averil 2015 : TD n°11 (Cumul=22h)

Rappel : le contrôle n°2 aura lieu le lundi 11 mai, de 8h à 10h, en amphi A4, dans les conditions suivantes :
  • sur feuille,
  • tous documents PAPIER autorisés,
  • aucun document électronique (liseuse, tablette, ordinateur, téléphone, etc.).
JavaScript
  • Gestion des événements et des actions en JavaScript (première et deuxième parties : capture d'événements et fonctions associables).
    Remarque :
    • onunload semble poser des problèmes à un certain nombre de navigateurs.
    Exemple récapitulatif :
    javascript-04.html
    [cacher les numéros de lignes]
    1. <!DOCTYPE html>
    2. <html>
    3.   <head lang="fr">
    4.     <meta charset="utf-8">
    5.     <title>JavaScript, exemple n°4</title>
    6.   </head>
    7.   <body onload="alert('Vous voilà enfin!!!\nJe vous attendais avec impatience...');">
    8. <h1>JavaScript, exemple n°4</h1>
    9.  
    10. <!-- déclenchement d'une alerte immédiate (alert) -->
    11. <button onclick="alert('Coucou !')">cliquez ici !</button>
    12.  
    13. <!-- déclenchement d'une alerte dans une seconde (setTimeout) -->
    14. <button onclick="setTimeout('alert(\'Surprise !\')',1000)">cliquez ici aussi&nbsp;!</button>
    15.  
    16. <!-- répétition toutes les 5 secondes (setInterval) -->
    17. <script>
    18. clock_id = setInterval('alert(\'hi hi !\');',5000);
    19. // pour désactiver: clearInterval(clock_id);
    20. </script>
    21.  
    22.   </body>
    23. </html>
    24.  
  • Exercices :
    1. Créer une alerte qui affiche « Hello World ! » en utilisant alert().
      JS01.html
      [cacher les numéros de lignes]
      1. <!DOCTYPE html>
      2. <html>
      3.   <head lang="fr">
      4.     <meta charset="utf-8">
      5.     <title>JavaScript, exercice n°1</title>
      6.   </head>
      7.   <body>
      8.     <h1>JavaScript, exercice n°1</h1>
      9.     <script>
      10.       alert('Hello world!');
      11.     </script>
      12.   </body>
      13. </html>
      14.  
    2. Utiliser la fonction prompt() pour demander son prénom à l'utilisateur et afficher dans une boîte alerte « Bonjour ….. » avec le prénom entré.
      JS02.html
      [cacher les numéros de lignes]
      1. <!DOCTYPE html>
      2. <html>
      3.   <head lang="fr">
      4.     <meta charset="utf-8">
      5.     <title>JavaScript, exercice n°2</title>
      6.   </head>
      7.   <body onload="alert('Bonjour '+prompt('Quel est votre prénom ?'));">
      8.     <h1>JavaScript, exercice n°2</h1>
      9.   </body>
      10. </html>
      11.  
    3. Demander à l'utilisateur deux nombres et afficher leur somme avec prompt() et alert() (vous devrez convertir le nombre entré en entier avec parseInt()).
      JS03.html
      [cacher les numéros de lignes]
      1. <!DOCTYPE html>
      2. <html>
      3.   <head lang="fr">
      4.     <meta charset="utf-8">
      5.     <title>JavaScript, exercice n°3</title>
      6.   </head>
      7.   <body>
      8.     <h1>JavaScript, exercice n°3</h1>
      9.     <script>
      10.       x = parseInt(prompt("Premier nombre ?")) ;
      11.       y = parseInt(prompt("Deuxième nombre ?")) ;
      12.       alert("La somme de "+x+" et "+y+" est "+(x+y)+".");
      13.     </script>
      14.   </body>
      15. </html>
      16.  
    4. Ajouter une alerte au chargement de la page qui affiche « Hello World ! » en utilisant l'événement onload (dans le body du HTML).
      JS04.html
      [cacher les numéros de lignes]
      1. <!DOCTYPE html>
      2. <html>
      3.   <head lang="fr">
      4.     <meta charset="utf-8">
      5.     <title>JavaScript, exercice n°4</title>
      6.   </head>
      7.   <body onload="alert('Hello world!');">
      8.     <h1>JavaScript, exercice n°4</h1>
      9.   </body>
      10. </html>
      11.  
  • Gestion des événements et des actions en JavaScript (Informations sur un événement capturé).
    Remarques :
    • Il faut lire event.keycode, et non event.charCode.
    • Il est sans doute plus simple d'utiliser event.key.
    Exemple récapitulatif :
    javascript-05.html
    [cacher les numéros de lignes]
    1. <!DOCTYPE html>
    2. <html>
    3.   <head lang="fr">
    4.     <meta charset="utf-8">
    5.     <title>JavaScript, exemple n°5</title>
    6.     <script>
    7. function frappe(event) {
    8.       alert('vous avez appuyé sur la touche '+event.key+' de code '+event.keyCode);
    9. }
    10.     </script>
    11.   </head>
    12.  
    13.   <body onkeyup="frappe(event);">
    14.   <h1>JavaScript, exemple n°5</h1>
    15.   </body>
    16. </html>
    17.  
  • Généralités sur le « DOM ».
    Exemple récapitulatif :
    javascript-06.html
    [cacher les numéros de lignes]
    1. <!DOCTYPE html>
    2. <html>
    3.   <head lang="fr">
    4.     <meta charset="utf-8">
    5.     <title>JavaScript, exemple n°6</title>
    6.     <script>
    7.     couleurs = Array("blue","red","yellow","#458971", "#11ff55", "rgb(0%,50%,100%)");
    8.     nc = couleurs.length;
    9.     bg = 0;
    10.     width=150;
    11.     // - - - - - - - - - - - - - - - - - - - - - -
    12.     function message(texte) { // Affiche un message en haut à roite de la page
    13.       document.getElementById("info").innerHTML = texte;
    14.     }
    15.     // - - - - - - - - - - - - - - - - - - - - - -
    16.     function changeBG1() { // changer la couleur de fond cycliquement (HTML)
    17.       bg = bg+1;
    18.       if (bg > nc) bg = 0;
    19.       document.bgColor = couleurs[bg];
    20.       message ("HTML, cyclique: "+document.bgColor);
    21.     }
    22.     // - - - - - - - - - - - - - - - - - - - - - -
    23.     function changeBG2() { // changer la couleur de fond en bascule (HTML)
    24.       document.bgColor=(document.bgColor=="white" ? "yellow" : "white");
    25.       message ("HTML, bascule: "+document.bgColor);
    26.     }
    27.     // - - - - - - - - - - - - - - - - - - - - - -
    28.     function changeBG3() { // changer la couleur de fond cycliquement (CSS)
    29.       bg = bg+1;
    30.       if (bg > nc) bg = 0;
    31.       document.body.style.backgroundColor = couleurs[bg];
    32.       message ("CSS, cyclique: "+document.body.style.backgroundColor);
    33.     }
    34.     // - - - - - - - - - - - - - - - - - - - - - -
    35.     function changeBG4() { // changer la couleur de fond en bascule (CSS)
    36.       document.body.style.backgroundColor=(document.body.style.backgroundColor=="white" ? "yellow" : "white");
    37.       message ("CSS, bascule: "+document.body.style.backgroundColor);
    38.     }
    39.     // - - - - - - - - - - - - - - - - - - - - - -
    40.     function montrercacher(id) {
    41.       display = (document.getElementById(id).style.display == "none" ? "block" : "none");
    42.       document.getElementById(id).style.display = display ;
    43.       message("Montrer/cacher : "+display);
    44.     }
    45.     // - - - - - - - - - - - - - - - - - - - - - -
    46.     function plusmoins(id,plus) {
    47.       if (plus=="+") {
    48.          width = Math.floor(width*1.1);
    49.          message("Taille image: +10% &rarr; "+width);        
    50.       } else {
    51.          width = Math.floor(width/1.1);
    52.          message("Taille image: -10% &rarr; "+width);
    53.       }
    54.       document.getElementById(id).style.width = width+"px";
    55.     }
    56.     // - - - - - - - - - - - - - - - - - - - - - -
    57.     </script>
    58.   </head>
    59.  
    60.   <body>
    61.   <h1>JavaScript, exemple n°6</h1>
    62.  
    63. <p style="border:thin solid silver; background:white;color:black;
    64.          position:fixed;top:2px;right:2px; padding:1em;"
    65.    id="info">... ... ... ... </p>
    66.  
    67. <h2>Définir la couleur du fond d'écran en HTML</h2>
    68.  
    69. <button onclick="changeBG1();">HTML: Changer la couleur<br/>du fond cycliquement</button>
    70. <button onclick="changeBG2();">HTML: Changer la couleur<br/>du fond en bascule</button>
    71. <button onclick="changeBG3();">CSS: Changer la couleur<br/>du fond cycliquement</button>
    72. <button onclick="changeBG4();">CSS: Changer la couleur<br/>du fond en bascule</button>
    73.  
    74. <p>
    75.  Remarquez que les CSS l'emportent sur HTML&nbsp;: une fois qu'on a
    76.  manipulé les CSS, les changements dans le HTML n'ont plus d'effet.
    77. </p>
    78.  
    79. <h2>Montrer/cacher une zone</h2>
    80.  
    81. <button onclick="montrercacher('zoneacacher');">Montrer/cacher la zonne ci-dessous</button>
    82.  
    83. <div id="zoneacacher" style="border:thin solid silver;margin:1em; padding:1em">
    84.  Cette zone est visible. Ou pas... Cette zone est visible. Ou
    85.  pas... Cette zone est visible. Ou pas... Cette zone est visible. Ou
    86.  pas... Cette zone est visible. Ou pas... Cette zone est visible. Ou
    87.  pas... Cette zone est visible. Ou pas... Cette zone est visible. Ou
    88.  pas... Cette zone est visible. Ou pas... Cette zone est visible. Ou
    89.  pas... Cette zone est visible. Ou pas...
    90. </div>
    91.  
    92. <h2>Manipuler les images</h2>
    93.  
    94. <button onclick="plusmoins('photo','+');">Augmenter la taille</button>
    95. <button onclick="plusmoins('photo','-');">Réduire la taille</button>
    96. <br/>
    97. <img src="../recycler.png" id="photo" style="width:150px;border:thin solid silver;margin:1em;" />
    98.  
    99.  </body>
    100. </html>
    101.  
  • Exercices :
    1. Ajouter une image dans la page HTML avec comme id « image », et ajouter une alerte lorsqu'on passe la souris sur l'image avec l'évenement onmouseover.
      JS05.html
      [cacher les numéros de lignes]
      1. <!DOCTYPE html>
      2. <html>
      3.   <head lang="fr">
      4.     <meta charset="utf-8">
      5.     <title>JavaScript, exercice n°5</title>
      6.   </head>
      7.   <body>
      8.     <h1>JavaScript, exercice n°5</h1>
      9.  
      10.     <img src="../recycler.png" alt="Recycler" onMouseOver="alert('Paf !!');"/>
      11.   </body>
      12. </html>
      13.  
    2. Ajouter une image, qui se change en une autre lorsque la souris est dessus et qui revient à la normale lorsque la souris quitte l'image.
      JS06.html
      [cacher les numéros de lignes]
      1. <!DOCTYPE html>
      2. <html>
      3.   <head lang="fr">
      4.     <meta charset="utf-8">
      5.     <title>JavaScript, exercice n°6</title>
      6.     <script>
      7.       function image1(elt) {
      8.          elt.src="../recycler.png";
      9.       }
      10.       function image2(elt) {
      11.          elt.src="../decoupage_html5.png";
      12.       }
      13.     </script>
      14.   </head>
      15.   <body>
      16.     <h1>JavaScript, exercice n°6</h1>
      17.     <p>(Sans ID)</p>
      18.     <img src="../recycler.png" alt="Recycler" onMouseOver="image2(this);" onMouseOut="image1(this);"/>
      19.  
      20.   </body>
      21. </html>
      22.  
      Ou :
      JS06b.html
      [cacher les numéros de lignes]
      1. <!DOCTYPE html>
      2. <html>
      3.   <head lang="fr">
      4.     <meta charset="utf-8">
      5.     <title>JavaScript, exercice n°6</title>
      6.     <script>
      7.       function image1() {
      8.          document.getElementById("dessin").src="../recycler.png";
      9.       }
      10.       function image2() {
      11.          document.getElementById("dessin").src="../decoupage_html5.png";
      12.       }
      13.     </script>
      14.   </head>
      15.   <body>
      16.     <h1>JavaScript, exercice n°6</h1>
      17.     <p>(Avec ID)</p>
      18.     <img src="../recycler.png" alt="Recycler" id="dessin" onMouseOver="image2();" onMouseOut="image1();"/>
      19.  
      20.   </body>
      21. </html>
      22.  
    3. Ajouter un bouton qui change la couleur de fond et la couleur d'écriture lorsqu'on clique dessus.
      JS07.html
      [cacher les numéros de lignes]
      1. <!DOCTYPE html>
      2. <html>
      3.   <head lang="fr">
      4.     <meta charset="utf-8">
      5.     <title>JavaScript, exercice n°7</title>
      6.     <script>
      7.     fond="white";
      8.     texte="black";
      9.     function change() {
      10.       if (fond=="white") {
      11.          fond="yellow";
      12.          texte="red";
      13.       } else {
      14.          fond="white";
      15.          texte="black";
      16.       }
      17.       document.body.style.backgroundColor = fond ;
      18.       document.body.style.color = texte ;
      19.     }
      20.     </script>
      21.   </head>
      22.   <body>
      23.     <h1>JavaScript, exercice n°7</h1>
      24.     <button onclick="change();">Changer les couleurs</button>
      25.   </body>
      26. </html>
      27.  
    4. Créer une fonction JavaScript qui modifiera à nouveau les couleurs pour revenir à la normale, et appeler cette fonction en utilisant l'action onkeydown quand l'utilisateur pressera la touche espace.
      JS08.html
      [cacher les numéros de lignes]
      1. <!DOCTYPE html>
      2. <html>
      3.   <head lang="fr">
      4.     <meta charset="utf-8">
      5.     <title>JavaScript, exercice n°8</title>
      6.     <script>
      7.     fond="white";
      8.     texte="black";
      9.     function change(e) {
      10.       if (e.key==" ") {
      11.         if (fond=="white") {
      12.            fond="yellow";
      13.            texte="red";
      14.         } else {
      15.            fond="white";
      16.            texte="black";
      17.         }
      18.         document.body.style.backgroundColor = fond ;
      19.         document.body.style.color = texte ;
      20.       }
      21.     }
      22.     </script>
      23.   </head>
      24.   <body onKeyDown="change(event);">
      25.     <h1>JavaScript, exercice n°8</h1>
      26.   </body>
      27. </html>
      28.  
Dernière modification : 25/8/2016

Semaine du lendi 20 averil 2015 : TD n°12 (Cumul=24h)

Rappel : le contrôle n°2 aura lieu le lundi 11 mai, de 8h à 10h, en amphi A4, dans les conditions suivantes :
  • sur feuille,
  • tous documents PAPIER autorisés,
  • aucun document électronique (liseuse, tablette, ordinateur, téléphone, etc.).
Exercices d'application
Réaliser un site qui combine les diverses notions vues lors de ce semestre: CSS, HTML5, PHP, lecture de données dans un fichier, identification (sessions), etc.
Trois versions :
  1. Simple, recap01 : identification. (Les personnes autorisées sont celles du fichier liste.txt.)
    Contenu des fichiers :
    1. <?php
    2. require("debutdepage.php");
    3. ?>
    4.  
    5.  
    6. Bien le bonjour....
    7.  
    8. <?php
    9. require("findepage.php");
    10. ?>
    11.  
    1. <?php
    2.  
    3. // =====================================================================
    4. //       D I V E R S E S   I N I T I A L I S A T I O N S
    5. // =====================================================================
    6. $cettepage = basename($_SERVER["PHP_SELF"]);
    7. if (!isset($titre))
    8.     $titre="Exercice récapitulatif";
    9.  
    10. // =====================================================================
    11. //       A F F I C H A G E   D E S   E R R E U R S
    12. // =====================================================================
    13. if (isset($_GET["verb"])) {
    14.         // Afficher les erreurs à l'écran
    15.         ini_set('display_errors', 1);
    16.         // Enregistrer les erreurs dans un fichier de log
    17.         ini_set('log_errors', 1);
    18.         // Nom du fichier qui enregistre les logs (attention aux droits à l'écriture)
    19.         ini_set('error_log', dirname(__file__) . '/log_error_php.txt');
    20.         // Afficher les erreurs et les avertissements
    21.         error_reporting(E_ALL);
    22. }
    23. // =====================================================================
    24. // =====================================================================
    25.  
    26. // =====================================================================
    27. //       L E C T U R E   D E S   D O N N É E S  
    28. // =====================================================================
    29. $t = file("liste.txt");
    30. $autorisations = array(); // On peut se passer de cette ligne....
    31. for ($i=2;$i<count($t);$i++) { // on passe les deux premières lignes du fichier
    32.     $unePersonne = explode("|",$t[$i]);
    33.     for ($j=0;$j<count($unePersonne);$j++)       // pas vraiment nécessaire...
    34.         $unePersonne[$j]=trim($unePersonne[$j]); // ... mais un peu de confort pour la suite
    35.     $autorisations [$unePersonne[0]] = array(
    36.                         "motDePasse" => $unePersonne[1],
    37.                         "nom" => $unePersonne[2],
    38.                         "prenom" => $unePersonne[3],
    39.                         "accreditation" => $unePersonne[4],
    40.     );
    41. }
    42. // =====================================================================
    43. // =====================================================================
    44. ?>
    45. <!DOCTYPE html>
    46. <html>
    47.   <head lang="fr">
    48.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    49.     <meta charset="utf-8">
    50.     <link rel="shortcut icon" href="images/dg.ico" />
    51.     <link rel="stylesheet" type="text/css" href="style.css" />
    52.     <!--[if lt IE 9]>
    53.         <script src="html5shiv.js"></script>
    54.         <script src="html5shiv-printshiv.js"></script>
    55.     <![endif]-->  
    56.     <title><?=$titre?></title>            
    57. </head>
    58. <body>
    59.     <div class="version"></div>
    60. <?php require("identification.php"); ?>
    61.     <h1><?=$titre?></h1>        
    62.  
    1. </body>
    2. </html>
    3.  
    1. <?php
    2. $premplirIdentifiant="Identifiant (votre adresse mail)";
    3. $action=$cettepage;
    4.  
    5. // nouvel utilisateur ??
    6. //if (isset($_POST["login"])) {
    7. if (!empty($_POST["login"])) {
    8.    $_SESSION['login']=$_POST['login'];
    9.    $_SESSION['password']=$_POST['password'];
    10. }
    11. // identification
    12. $nomDeLogin="";
    13. if (   isset($_SESSION['login'])
    14.     && isset($autorisations[$_SESSION['login']]["motDePasse"])
    15.     && ($autorisations[$_SESSION['login']]["motDePasse"] == $_SESSION['password'])
    16.    ) {
    17.   // création des variables de sssion
    18.   $nomDeLogin = $_SESSION['login'];
    19.   $_SESSION["nom"] = $autorisations[$nomDeLogin]["nom"];
    20.   $_SESSION["prenom"] = $autorisations[$nomDeLogin]["prenom"];
    21.   $_SESSION["accreditation"] = $autorisations[$nomDeLogin]["accreditation"];
    22. }
    23. if (!isset($nomDeLogin) || ($nomDeLogin=="")) {
    24.   $nomDeLogin=NULL;
    25. }
    26. // session nouvelle (à identifier) ou en cours ?
    27. if (   isset($_POST['off'])
    28.     || ($nomDeLogin==NULL)) {
    29.   unset($_SESSION['login'], $_SESSION['nom'], $_SESSION['prenom'],
    30.          $_SESSION['password'],$_SESSION['accreditation']);
    31. ?>
    32.         <h1>Vous devez vous identifier</h1>
    33.         <form action="<?=$cettepage?>" method="post">
    34.         <input name="login" autofocus placeholder="login..."/>
    35.         <input name="password" placeholder="Mot de passe" type="password"/>
    36.         <input type="submit" value="Je m'identifie"/>
    37.         </form>
    38. <?php
    39.   require("findepage.php");
    40.   die(); // pas identifié => rien de plus dans la page
    41. }  // fin de session nouvelle
    42.   else { //identifié => bouton de déconnexion
    43. ?>
    44. <div class="deconnexion">
    45.         <form action="<?=$cettepage?>" method="POST">
    46.         <input type="hidden" name="off" value="1"/>
    47.         <input type="submit" value="Déconnecter <?=$_SESSION['prenom']." ".strtoupper($_SESSION['nom'])?>"/>
    48.         </form>
    49. </div> 
    50. <?php
    51. }
    52. ?>
    53.  
    1. .version {
    2.     position:fixed;
    3.     bottom:1px;
    4.     right:1px;
    5.     background:silver;  
    6.     border:1px dotted #888;
    7.     color: #888;
    8.     padding:0.05em 0.3em;
    9. }
    10. .version:before {content:"Version 1.0";}
    11. .erreur {
    12.         border:silver solid red;
    13.         background:yellow;
    14. }
    15. .deconnexion {
    16.     position:fixed;
    17.     top:1px;
    18.     right:1px;    
    19. }
    20.  
  2. Élaborée, recap02 : menus un peu évolués.
    Contenu des fichiers :
    1. <?php
    2. require("debutdepage.php");
    3. ?>
    4.  
    5.  
    6. Bien le bonjour....
    7.  
    8. <?php
    9. require("findepage.php");
    10. ?>
    11.  
    1. <?php
    2. $titre="Quelques statisitiques sur les emprunts";
    3. require("debutdepage.php");
    4. ?>
    5.  
    6.  
    7. Bla bla bla....
    8.  
    9. <?php
    10. require("findepage.php");
    11. ?>
    12.  
    1. <?php
    2. $titre="Quelques infos sur les adhérents";
    3. require("debutdepage.php");
    4. ?>
    5.  
    6.  
    7. Etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc.
    8.  
    9.  
    10. <?php
    11. require("findepage.php");
    12. ?>
    13.  
    1. <?php
    2.  
    3. // =====================================================================
    4. //       D I V E R S E S   I N I T I A L I S A T I O N S
    5. // =====================================================================
    6. $cettepage = basename($_SERVER["PHP_SELF"]);
    7. if (!isset($titre))
    8.     $titre="Exercice récapitulatif";
    9.  
    10. // =====================================================================
    11. //       A F F I C H A G E   D E S   E R R E U R S
    12. // =====================================================================
    13. if (isset($_GET["verb"])) {
    14.         // Afficher les erreurs à l'écran
    15.         ini_set('display_errors', 1);
    16.         // Enregistrer les erreurs dans un fichier de log
    17.         ini_set('log_errors', 1);
    18.         // Nom du fichier qui enregistre les logs (attention aux droits à l'écriture)
    19.         ini_set('error_log', dirname(__file__) . '/log_error_php.txt');
    20.         // Afficher les erreurs et les avertissements
    21.         error_reporting(E_ALL);
    22. }
    23. // =====================================================================
    24. // =====================================================================
    25.  
    26. // =====================================================================
    27. //       L E C T U R E   D E S   D O N N É E S  
    28. // =====================================================================
    29. $t = file("liste.txt");
    30. $autorisations = array(); // On peut se passer de cette ligne....
    31. for ($i=2;$i<count($t);$i++) { // on passe les deux premières lignes du fichier
    32.     $unePersonne = explode("|",$t[$i]);
    33.     for ($j=0;$j<count($unePersonne);$j++)       // pas vraiment nécessaire...
    34.         $unePersonne[$j]=trim($unePersonne[$j]); // ... mais un peu de confort pour la suite
    35.     $autorisations [$unePersonne[0]] = array(
    36.                         "motDePasse" => $unePersonne[1],
    37.                         "nom" => $unePersonne[2],
    38.                         "prenom" => $unePersonne[3],
    39.                         "accreditation" => $unePersonne[4],
    40.     );
    41. }
    42. // =====================================================================
    43. // =====================================================================
    44. ?>
    45. <!DOCTYPE html>
    46. <html>
    47.   <head lang="fr">
    48.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    49.     <meta charset="utf-8">
    50.     <link rel="shortcut icon" href="images/dg.ico" />
    51.     <link rel="stylesheet" type="text/css" href="style.css" />
    52.     <!--[if lt IE 9]>
    53.         <script src="html5shiv.js"></script>
    54.         <script src="html5shiv-printshiv.js"></script>
    55.     <![endif]-->  
    56.     <title><?=$titre?></title>            
    57. </head>
    58. <body>
    59.     <div class="version"></div>
    60. <?php require("identification.php"); ?>
    61. <header>
    62.     <h1><?=$titre?></h1>        
    63. </header>
    64. <nav class="menu"> <!-- Le menu -->
    65. <?php    
    66. $menus=array("index.php"=>"Accueil",
    67.               "stats.php"=>"Stats sur les prêts",
    68.               "adherents.php"=>"Gestion des adhérents");
    69. foreach ($menus as $f=>$t) {
    70.     echo "<div class=\"eltmenu".($cettepage==$f?"actif":"")."\"><a href=\"$f\">$t</a></div>\n";
    71. }
    72.  
    73. ?>
    74. </nav>
    75. <main>
    76.  
    1. </main>
    2. </body>
    3. </html>
    4.  
    1. <?php
    2. $premplirIdentifiant="Identifiant (votre adresse mail)";
    3. $action=$cettepage;
    4.  
    5. // nouvel utilisateur ??
    6. //if (isset($_POST["login"])) {
    7. if (!empty($_POST["login"])) {
    8.    $_SESSION['login']=$_POST['login'];
    9.    $_SESSION['password']=$_POST['password'];
    10. }
    11. // identification
    12. $nomDeLogin="";
    13. if (   isset($_SESSION['login'])
    14.     && isset($autorisations[$_SESSION['login']]["motDePasse"])
    15.     && ($autorisations[$_SESSION['login']]["motDePasse"] == $_SESSION['password'])
    16.    ) {
    17.   // création des variables de sssion
    18.   $nomDeLogin = $_SESSION['login'];
    19.   $_SESSION["nom"] = $autorisations[$nomDeLogin]["nom"];
    20.   $_SESSION["prenom"] = $autorisations[$nomDeLogin]["prenom"];
    21.   $_SESSION["accreditation"] = $autorisations[$nomDeLogin]["accreditation"];
    22. }
    23. if (!isset($nomDeLogin) || ($nomDeLogin=="")) {
    24.   $nomDeLogin=NULL;
    25. }
    26. // session nouvelle (à identifier) ou en cours ?
    27. if (   isset($_POST['off'])
    28.     || ($nomDeLogin==NULL)) {
    29.   unset($_SESSION['login'], $_SESSION['nom'], $_SESSION['prenom'],
    30.          $_SESSION['password'],$_SESSION['accreditation']);
    31. ?>
    32.         <h1>Vous devez vous identifier</h1>
    33.         <form action="<?=$cettepage?>" method="post">
    34.         <input name="login" autofocus placeholder="login..."/>
    35.         <input name="password" placeholder="Mot de passe" type="password"/>
    36.         <input type="submit" value="Je m'identifie"/>
    37.         </form>
    38. <?php
    39.   require("findepage.php");
    40.   die(); // pas identifié => rien de plus dans la page
    41. }  // fin de session nouvelle
    42.   else { //identifié => bouton de déconnexion
    43. ?>
    44. <div class="deconnexion">
    45.         <form action="<?=$cettepage?>" method="POST">
    46.         <input type="hidden" name="off" value="1"/>
    47.         <input type="submit" value="Déconnecter <?=$_SESSION['prenom']." ".strtoupper($_SESSION['nom'])?>"/>
    48.         </form>
    49. </div> 
    50. <?php
    51. }
    52. ?>
    53.  
    1. .version {
    2.     position:fixed;
    3.     bottom:1px;
    4.     right:1px;
    5.     background:silver;  
    6.     border:1px dotted #888;
    7.     color: #888;
    8.     padding:0.05em 0.3em;
    9. }
    10. .version:before {content:"Version 2.0";}
    11. .erreur {
    12.         border:silver solid red;
    13.         background:yellow;
    14. }
    15. .deconnexion {
    16.     position:fixed;
    17.     top:1px;
    18.     right:1px;    
    19.     z-index:10;  
    20. }
    21. a:link, a:visited, a:hover, a:visited:hover {
    22.     color:inherit;
    23.     text-decoration:none;
    24. }
    25. header{
    26.     position:fixed;
    27.     top:0;
    28.     left:0;
    29.     width:100%;
    30.     height:15%;
    31.     background:#ddd;
    32.     z-index:0;
    33. }
    34. header h1 {
    35.     text-align:center;
    36.     margin-top:1em;
    37. }
    38. nav.menu {
    39.     position:fixed;
    40.     left:2px;
    41.     top:17%;
    42.     width:15%;
    43.     border:silver solid 1px;
    44.     padding:2px;
    45. }
    46. div.eltmenu {
    47.     border:silver solid 1px;
    48.     padding:2px;
    49. }
    50. div.eltmenu:hover, div.eltmenuactif {
    51.     background:#444;
    52.     color:#ddd;
    53. }
    54. main {
    55.     position:fixed;
    56.     left:16%;
    57.     top:17%;
    58.     width:83.5%;
    59.     background:#ddd;
    60.     padding:2em 1em 4em;
    61. }
    62.  
  3. Complète, recap03 : contrôles d'accès aux pages.
    Les niveaux d'accréditation qui figurent dans le fichier liste.txt signifient :
    • 1 : niveau le plus bas (anomyme), seules certaines pages sont accessibles.
    • 2 : niveau intermédiaire (membre), certaines pages sont interdites d'accès.
    • 3 : niveau d'accréditation le plus haut (administrateur), aucune restriction d'accès.
    Contenu des fichiers :
    1. <?php
    2. require("debutdepage.php");
    3. ?>
    4.  
    5.  
    6. Bien le bonjour....
    7.  
    8. <?php
    9. require("findepage.php");
    10. ?>
    11.  
    1. <?php
    2. $niveaurequis=2;
    3. $titre="Quelques statisitiques sur les emprunts";
    4. require("debutdepage.php");
    5. ?>
    6.  
    7.  
    8. Bla bla bla....
    9.  
    10. <?php
    11. require("findepage.php");
    12. ?>
    13.  
    1. <?php
    2. $niveaurequis=3;
    3. $titre="Quelques infos sur les adhérents";
    4. require("debutdepage.php");
    5. ?>
    6.  
    7.  
    8. Etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc.
    9.  
    10.  
    11. <?php
    12. require("findepage.php");
    13. ?>
    14.  
    1. <?php
    2.  
    3. // =====================================================================
    4. //       D I V E R S E S   I N I T I A L I S A T I O N S
    5. // =====================================================================
    6. $cettepage = basename($_SERVER["PHP_SELF"]);
    7. if (!isset($titre))
    8.     $titre="Exercice récapitulatif";
    9. $menus=array("index.php"=>array("Accueil",1), /* fichier => [titre,niveau nécessaire] */
    10.              "stats.php"=>array("Stats sur les prêts",2),
    11.              "adherents.php"=>array("Gestion des adhérents",3));
    12. $accr=array(1=>"Anonyme",2=>"Membre",3=>"Administrateur");
    13.  
    14. // =====================================================================
    15. //       A F F I C H A G E   D E S   E R R E U R S
    16. // =====================================================================
    17. if (isset($_GET["verb"])) {
    18.         // Afficher les erreurs à l'écran
    19.         ini_set('display_errors', 1);
    20.         // Enregistrer les erreurs dans un fichier de log
    21.         ini_set('log_errors', 1);
    22.         // Nom du fichier qui enregistre les logs (attention aux droits à l'écriture)
    23.         ini_set('error_log', dirname(__file__) . '/log_error_php.txt');
    24.         // Afficher les erreurs et les avertissements
    25.         error_reporting(E_ALL);
    26. }
    27. // =====================================================================
    28. // =====================================================================
    29.  
    30. // =====================================================================
    31. //       L E C T U R E   D E S   D O N N É E S  
    32. // =====================================================================
    33. $t = file("liste.txt");
    34. $autorisations = array(); // On peut se passer de cette ligne....
    35. for ($i=2;$i<count($t);$i++) { // on passe les deux premières lignes du fichier
    36.     $unePersonne = explode("|",$t[$i]);
    37.     for ($j=0;$j<count($unePersonne);$j++)       // pas vraiment nécessaire...
    38.         $unePersonne[$j]=trim($unePersonne[$j]); // ... mais un peu de confort pour la suite
    39.     $autorisations [$unePersonne[0]] = array(
    40.                         "motDePasse" => $unePersonne[1],
    41.                         "nom" => $unePersonne[2],
    42.                         "prenom" => $unePersonne[3],
    43.                         "accreditation" => $unePersonne[4],
    44.     );
    45. }
    46. // =====================================================================
    47. // =====================================================================
    48. ?>
    49. <!DOCTYPE html>
    50. <html>
    51.   <head lang="fr">
    52.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    53.     <meta charset="utf-8">
    54.     <link rel="shortcut icon" href="images/dg.ico" />
    55.     <link rel="stylesheet" type="text/css" href="style.css" />
    56.     <!--[if lt IE 9]>
    57.         <script src="html5shiv.js"></script>
    58.         <script src="html5shiv-printshiv.js"></script>
    59.     <![endif]-->  
    60.     <title><?=$titre?></title>            
    61. </head>
    62. <body>
    63.     <div class="version"></div>
    64. <?php require("identification.php"); ?>
    65. <header>
    66.     <h1><?=$titre?></h1>        
    67. </header>
    68. <nav class="menu"> <!-- Le menu -->
    69. <?php    
    70. foreach ($menus as $f=>$t) {
    71.     if ($t[1]<=$_SESSION["accreditation"])
    72.        echo "<div class=\"eltmenu".($cettepage==$f?"actif":"")."\"><a href=\"$f\">".$t[0]."</a></div>\n";
    73. }
    74.  
    75. ?>
    76. </nav>
    77. <main>
    78.  
    1. </main>
    2. </body>
    3. </html>
    4.  
    1. <?php
    2. $premplirIdentifiant="Identifiant (votre adresse mail)";
    3. $action=$cettepage;
    4.  
    5. // nouvel utilisateur ??
    6. //if (isset($_POST["login"])) {
    7. if (!empty($_POST["login"])) {
    8.    $_SESSION['login']=$_POST['login'];
    9.    $_SESSION['password']=$_POST['password'];
    10. }
    11. // identification
    12. $nomDeLogin="";
    13. if (   isset($_SESSION['login'])
    14.     && isset($autorisations[$_SESSION['login']]["motDePasse"])
    15.     && ($autorisations[$_SESSION['login']]["motDePasse"] == $_SESSION['password'])
    16.    ) {
    17.   // création des variables de sssion
    18.   $nomDeLogin = $_SESSION['login'];
    19.   $_SESSION["nom"] = $autorisations[$nomDeLogin]["nom"];
    20.   $_SESSION["prenom"] = $autorisations[$nomDeLogin]["prenom"];
    21.   $_SESSION["accreditation"] = $autorisations[$nomDeLogin]["accreditation"];
    22. }
    23. if (!isset($nomDeLogin) || ($nomDeLogin=="")) {
    24.   $nomDeLogin=NULL;
    25. }
    26. // session nouvelle (à identifier) ou en cours ?
    27. if (   isset($_POST['off'])
    28.     || ($nomDeLogin==NULL)) {
    29.   unset($_SESSION['login'], $_SESSION['nom'], $_SESSION['prenom'],
    30.          $_SESSION['password'],$_SESSION['accreditation'],$_SESSION['niveau']);
    31. ?>
    32.         <h1>Vous devez vous identifier</h1>
    33.         <form action="<?=$cettepage?>" method="post">
    34.         <input name="login" autofocus placeholder="login..."/>
    35.         <input name="password" placeholder="Mot de passe" type="password"/>
    36.         <input type="submit" value="Je m'identifie"/>
    37.         </form>
    38. <?php
    39.   require("findepage.php");
    40.   die(); // pas identifié => rien de plus dans la page
    41. }  // fin de session nouvelle
    42.   else { //identifié => bouton de déconnexion
    43. ?>
    44. <div class="deconnexion">
    45.         <form action="<?=$cettepage?>" method="POST">
    46.         <input type="hidden" name="off" value="1"/>
    47.         <input type="submit" value="Déconnecter <?=$_SESSION['prenom']." "
    48.          .strtoupper($_SESSION['nom']). " (".$accr[$_SESSION['accreditation']].")"?>"/>
    49.         </form>
    50. </div> 
    51. <?php
    52. }
    53. if ($niveaurequis>$_SESSION['accreditation']) {
    54.     echo "<h1 class=\"centrer\" style=\"margin-top:2em;\">Vous n'avez le niveau d'accréditation nécessaire pour accéder à ces pages</h1>";
    55.     echo "<h2 class=\"centrer\"><a href=\"index.php\">Cliquer ici pour revenir à l'accueil</h2>";
    56.     require("findepage.php");
    57.     die();  
    58. }
    59. ?>
    60.  
    1. .version {
    2.     position:fixed;
    3.     bottom:1px;
    4.     right:1px;
    5.     background:silver;  
    6.     border:1px dotted #888;
    7.     color: #888;
    8.     padding:0.05em 0.3em;
    9. }
    10. .version:before {content:"Version 3.0";}
    11. .erreur {
    12.         border:silver solid red;
    13.         background:yellow;
    14. }
    15. .deconnexion {
    16.     position:fixed;
    17.     top:1px;
    18.     right:1px;
    19.     z-index:10;  
    20. }
    21. a:link, a:visited, a:hover, a:visited:hover {
    22.     color:inherit;
    23.     text-decoration:none;
    24. }
    25. header{
    26.     position:fixed;
    27.     top:0;
    28.     left:0;
    29.     width:100%;
    30.     height:15%;
    31.     background:#ddd;
    32.     z-index:0;
    33. }
    34. header h1 {
    35.     text-align:center;
    36.     margin-top:1em;
    37. }
    38. nav.menu {
    39.     position:fixed;
    40.     left:2px;
    41.     top:17%;
    42.     width:15%;
    43.     border:silver solid 1px;
    44.     padding:2px;
    45. }
    46. div.eltmenu {
    47.     border:silver solid 1px;
    48.     padding:2px;
    49. }
    50. div.eltmenu:hover, div.eltmenuactif {
    51.     background:#444;
    52.     color:#ddd;
    53. }
    54. main {
    55.     position:fixed;
    56.     left:16%;
    57.     top:17%;
    58.     width:83.5%;
    59.     background:#ddd;
    60.     padding:2em 1em 4em;
    61. }
    62. .centrer {
    63.     text-align:center;
    64. }
Dernière modification : 25/8/2016
Dernière modification : 25/8/2016