Informatique


Exercices généraux

  • Au sein de la <div id="plouc"> se trouvent un noeud #text et un lien <a href="#">. Ce lien ne mène nulle part puisqu'il vaut #.
    Il faudrait donc modifier son attribut href pour le faire pointer vers http://www.rtbf.be.
    Essayer plusieurs solutions! Démo
    
    <div id=plouc>
    	<a href="#">Le site de la RTBF</a>
    </div>
    
  • Au sein de la <div id="plouc"> se trouve un bouton <button>.
    Faites en sorte que quand ce bouton est cliqué, il affiche "Vous m'avez cliqué" à la place de "Cliquez-moi", comme c'est le cas dans l'exemple ci-après. Démo
    
    <div id=plouc>
    	<button>Cliquez-moi !</button>
    </div>
    
  • Démontrer que lorsqu'on jette un dé 100 fois on obtient quasi le même nombre de fois 1, 2, 3, 4, 5 et 6, car 100 est un grand nombre.
    On propose d'afficher le nombre de fois que chaque chiffre apparaît.
    Démo
  • Jeter un dé, sur le document (dans une div par exemple) informer l'utilisateur du chiffre obtenu.
    Prévoir un bouton cliquable pour simuler le lancer de dé. Démo
  • Démontrer que lorsqu'on jette un dé 100 fois on obtient quasi le même nombre de fois 1, 2, 3, 4, 5 et 6, car 100 est un grand nombre.
    On propose d'afficher le nombre de fois que chaque chiffre apparaît.
    Démo
  • Mohamed Vandeput n'en peut plus! Il désire utiliser des éléments de formulaires "range" pour customiser le titre d'id "p1".
    Le code HTML est juste, pourrais-tu l'aider à faire le script, pour te motiver il te promet un couscous à la Gueuze!
    Démo
    
    <body>
    	     <h1 id=p1>Customise mon biquet !</h1> 
       			
    <table border="1">
    <tr>
    	<td>couleur de fond (rgb)</td>
    	<td>0<input type="range" min="0" max="255" step=5 name='color' value="0">255</td>
    </tr>
    <tr>
    	<td>padding</td>
    	<td>0<input type="range" name="padding" min="0" max="30" step=5 value="0">30</td>
    </tr>
    <tr>
    	<td>height</td>
    	<td>0<input type="range" min="5" max="200" name="height" step=50 value="0">200</td>
    </tr>
    <tr>
    	<td>width</td>
    	<td>200<input type="range" min="200" max="800" name="width" step=50 value="0">800</td>
    </tr>
    <tr>
    	<td>arrondi</td>
    	<td>0<input type="range" min="5" max="30" name="radius" step=5 value="0">30</td>
    </tr>
    <tr>
    	<td>rotation</td>
    	<td>-30<input type="range" min="-30" max="30" name="rotation" step=1 value="0">30</td>
    </tr>
    
    </table>
    
    
  • Soit le fichier HTML :Démo
    
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
    #title1,#title2,#title3 {display:none;}
    </style>
    </head>
    <body>
    <h1 id=1>Partie 1</h1>
    <div id="title1">
    	<p>Mon premier paragraphe</p>
    	<p>Mon second paragraphe</p>
    </div>
    <h1 id=2>Partie 2</h1>
    <div id="title2">
    	<p>Mon premier paragraphe</p>
    	<p>Mon second paragraphe</p>
    </div>
    <h1 id=3>Partie 3</h1>
    <div id="title3">
    	<p>Mon premier paragraphe</p>
    	<p>Mon second paragraphe</p>
    </div>
    
    </body>
    </html>
    
    Lorsque l'utilisateur clique sur un titre il faut développer la division qui le suit.
    Les autres doivent obligatoirement être repliées!.
  • Application du drag&drop.
    Réaliser deux cadres dans lesquels tu pourra déplacer les photos.
    Lorsque tu cliqueras sur le bouton "Répartition" les noms des personnes représentées présentes dans le cadre 2 seront affichées dans la division d'id p2. Démo
    
    <html>
    <head>
    <title>Gestion du drag and drop</title>
    <style type="text/css">
      div.dragdrop {
        display:inline-block;
    	margin:5px;
        border:2px solid #333;
        border-radius:3px;
        cursor: move;
        background:#fff;
      }
      div#drop1, div#drop2 {
        display:block;
    		margin:10px;
    
        padding:10px;
        border:2px solid #000;
        width:40%;
        min-height:300px;
        background:#fff;
      }
    </style>
    </head>
    <body>
        
    <h1>S'ils pouvaient nous revenir !</h1>
    
    <div id="drop1"> <div>Premier cadre</div>
           <div id=d1 class="dragdrop" draggable="true" data-name="Michel Bakounine"><img src="../../image/bakounine1.jpg"></div>
           <div id=d2 class="dragdrop" draggable="true" data-name="Pierre-Joseph Proudhon"><img src="../../image/proudhon1.jpg"></div>
           <div id=d3 class="dragdrop" draggable="true" data-name="Louis Michel"><img src="../../image/louiseM.jpg"></div>
           <div id=d4 class="dragdrop" draggable="true" data-name="Nestor Makhno"><img src="../../image/makhno.jpg"></div>
           <div id=d5 class="dragdrop" draggable="true" data-name="Voltairine de Cleyre"><img src="../../image/volterine.jpg"></div>
           <div id=d6 class="dragdrop" draggable="true" data-name="Emma Goldman"><img src="../../image/emmag.jpg"></div>
           <div id=d7 class="dragdrop" draggable="true" data-name="Errico Malatesta"><img src="../../image/malatesta.jpg"></div>
           <div id=d7 class="dragdrop" draggable="true" data-name="Lucy Parsons"><img src="../../image/lucie.jpg"></div>
           <div id=d7 class="dragdrop" draggable="true" data-name="Pierre Kropotkine"><img src="../../image/kropotkine.jpg"></div>
           <div id=d7 class="dragdrop" draggable="true" data-name="Ferdinand Pelloutier"><img src="../../image/pelloutier.jpg"></div>
    </div>
    <div id="drop2"><div>Deuxième cadre</div></div>   
    <button id=p>Répartition</button>
    <div id=p2></div>
    
    </body>
    </html>