Informatique


Exercices généraux

  • Soit le code html suivant :
    
    <section>
    	<div id=d1>
    	<h1 id=titre1>My very beau site</h1>
    		<h3>Introduction</h3>
    			<p class=para>Qu'il est beau mon beau site...</p>
    			<p class=para >Pour être beau, il est beau...</p>
    <p>Pour être beau, il est beau...</p>
    	</div>	
    <div id=d2>
    	<h1>My very beau site</h1>
    		<h3>Introduction</h3>
    			<p class=para >Qu'il est beau mon beau site...</p>
    			<p class=para >Pour être beau, il est beau...</p>
    			<p>Pour être beau, il est beau...</p>
    	</div>	
    </section>
    
    

    Ecrire les commandes permettant de récupérer dans les variables suivantes :

    • Dans s1, toutes les balises <p>
    • Dans s2, uniquement la première balise <p>
    • Dans s3, la division d’id d1
    • Dans s4, le h3 qui se trouve dans la division d2
    • Dans s5, toutes les divisions <div>
    • Dans s6 tous les paragraphes de classe para
    • Dans s7 tous les h1

  • Soit le code html suivant :
    
    <section>
    	<div id=d1>
    	<h1 id=titre1>My very beau site</h1>
    		<h3>Introduction</h3>
    			<p class=para>Qu'il est beau mon beau site...</p>
    			<p class=para >Pour être beau, il est beau...</p>
    <p class=para><strong>Coucou</strong>, salut les boys !</p>
    	</div>	
    <div id=d2>
    	<h1>My very beau site</h1>
    		<h3>Introduction</h3>
    			<p>Qu'il est beau mon beau site...</p>
    			<p>Pour être beau, il est beau...</p>
    <p>Pour être beau, il est beau...</p>
    	</div>	
    </section>
    
    • Ecrire le script permettant de sélectionner le titre d’id « titre1 » et de remplacer le texte «My very beau site» par «My very trop beau site»
    • Ecrire le script permettant de récupérer dans la variable bil le contenu textuel (uniquement) du premier paragraphe de classe para.
    • Ecrire le script permettant de récupérer dans la variable brol le contenu textuel et html contenu dans le 3ième paragraphe de classe para.

  • Soit le code html suivant :
    <style>
    .c1	{color:red;}
    .taille{font-size:2em;}
    </style>
    </head>
    <body>
    <section>
    	<div id=d1>
    	<h1 id=titre1>My very beau site</h1>
    		<h3>Introduction</h3>
    			<p class=para>Qu'il est beau mon beau site...</p>
    			<p class=para >Pour être beau, il est beau...</p>
    <p class=para><strong>Coucou</strong>, salut les boys !</p>
    	</div>	
    <div id=d2>
    	<h1>My very beau site</h1>
    		<h3>Introduction</h3>
    			<p class=para >Qu'il est beau mon beau site...</p>
    			<p class=para >Pour être beau, il est beau...</p>
    <p class=para >Pour être beau, il est beau...</p>
    	</div>	
    </section>
    
    • Ajouter les classes c1 et taille à tous les titres h1
    • Supprimer la classe para à tous les paragraphes contenus dans la div d’id « d1 »
    • Tester si la classe c1 est présente sur la div d’id « d2 »
    • Ajouter un background jaune sur la balise section
    • Supprimer la classe c1 de tous les titre h1

  • 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
  • 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>
    
  • Au clic de la souris placer un repère sur une image.Démo