Mes scripts du web

Page d’accueil :

https://nsi2021-2022.neocities.org/

<html lang="fr"><head>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">

<meta charset="utf-8">
<title>Nsi</title>
</head>
<body onload="backgr()" style="background-size: cover; background-attachment: fixed; background-repeat: no-repeat;" background="retro.jpg">
    

<center>

  <p id="demo">Mon Jan 03 2022 16:35:26 GMT+0100 (heure normale d’Europe centrale)</p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
    
  <h1 style="background-color:#006BFF ">Ma page codée en HTML</h1>
  
  <p> Bonjour! Je suis une élève de première et ça c'est mon site web sur lequel je publierai de tout:</p>
  
  <div style="display:flex" alt="image" width="200" height="auto">

<div class=".">
      <a href="lu.html"><img src="liensu.png" width="310" height="auto"> 
      </a>
    </div>

  <div class=".">
      <a href="histoire.html"><img src="histoirebouton.png" width="300" height="auto"> 
      </a>
    </div>
     
  <div class=".">
      <a href="games.html"><img src="Jeuxbouton.png" width="280" height="auto"> 
      </a>
    </div>
  
  <div class=".">
      <a href="musique.html"><img src="musique.png" width="300" height="auto"> 
      </a>

</div>

</div>
  
  
  <p>Cliquez sur le bouton pour enregistrer votre pseudo</p>
<button onclick="myFunction()">Cliquez</button>
<p id="test"></p>
<script>
function myFunction() {
  var nom = prompt("Entrez votre nom","pseudo");
    document.getElementById("test").innerHTML =
    "Bienvenue " + nom + "!";
  }
</script>




   
  
  



</center>
</body>
</html>

Page Historique :

https://nsi2021-2022.neocities.org/histoire.html

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Historique</title>
    <!-- The style.css file allows you to change the look of your web pages.
         If you include the next line in all your web pages, they will all share the same look.
         This makes it easier to make new pages for your site. -->
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body onload="backgr()" style="background-size: cover; background-attachment: fixed; background-repeat: no-repeat;" background="screens.png">
    
  
  
  <center>

     <header>
    <h2 style="background-color:#006BFF "><img src="screen.gif" width="50" height="auto">Histoire de l'internet et du web<img src="screen.gif" width="50" height="auto"></h2>
    
    
    <img src="1990.png" width="500" height="auto">
    </header>
   
   
   
   <h2> Tim Berners Lee </h2>
    <br>      
    
    <img src="https://thepressfree.com/wp-content/uploads/2021/06/b0e0bb8b-8a01-4da0-8ac6-4e961dc42eba.jpg" width="800" height="auto" alt="image Tim Berner Lee"><br>    
    
    <p>
        Timothy John Berners Lee est un informaticien britannique et aussi le principal inventeur du World Wide Web (WWW).
En créant le Web, Tim Berners-Lee a inventé trois façons de programmation: les adresses Web sous forme d'URL, le protocole de communication HTTP, et le langage informatique HTML. Il fut aidé à ses débuts par l'ingénieur et informaticien belge Robert Cailliau qui cosigna notamment avec lui, en novembre 1990, un document désormais entré dans l'Histoire et intitulé <em>« WorldWideWeb : Proposition pour un projet hypertexte»</em>.
    <br>
            
    <a href="https://fr.wikipedia.org/wiki/Tim_Berners-Lee"><font color="purple">En savoir plus</font> </a>
    <br>
    <a href="https://www.youtube.com/watch?v=PbCG_BeL5dY"><font color="purple">Vidéo</font></a>
    </p> 
    
    <div class="Home">
      <a href="index.html"><img src="home.png" width="100" height="auto"> 
      </a>
    </div>

    
    </center>
    
</body>
</html>

Page Liens Utiles :

https://nsi2021-2022.neocities.org/lu.html

<html lang="fr">
<head>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">

<meta charset="utf-8">
<title>Nsi</title>
  </head>
  <body onload="backgr()" style="background-size: cover; background-attachment: fixed; background-repeat: no-repeat;" background="train.png">
    <h1 style="background-color:#006BFF ">Liens utiles</h1>
 
 <p><a href="yb-isn.fr/2021/nsi/?p=353"><font color="white">Le cours</font></a>.</p>
 <p><a href="https://www.w3schools.com/js/js_math.asp"><font color="white">Calculs sur javascript</font></a>.</p>
<p><a href="https://www.w3schools.com/js/tryit.asp?filename=tryjs_variables"><font color="white">Essai du programme en ligne</font></a>.</p> 
 
 
 <div class="Home">
      <a href="index.html"><img src="home.png" width="100" height="auto"> 
      </a>
    </div>

 </body>
</html>

Page Jeux j’ai mis le script d’une calculatrice pour faire plus tard un jeu sur le calcul mental en utilisant 2 nombres :

https://nsi2021-2022.neocities.org/games.html

<html lang="fr"><head>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">

<meta charset="utf-8">
<title>Nsi</title>
  </head>
  <body onload="backgr()" style="background-size: cover; background-attachment: fixed; background-repeat: no-repeat;" background="gamertr.jpg">
    <h1 style="background-color:#006BFF ">Jeux programmés avec Javascript</h1>

 
    <link rel="icon" href="alea.ico">
    <title>Alea</title>
    <meta charset="UTF-8">
    <script src="alea.js"></script>
        <h2>tirage aléatoire</h2>
        <p>Saisir un nombre entre 1 et 10:</p>
        <input id="nombre">
        <button type="button" onclick="myFunction()">Envoyer</button>
        <h3 id="reponse"></h3>
        
      <p> Calculatrice</p>
      
       <script> 
         //fonction qui évalue le chiffre et renvoie la sortie
         function calculer() 
         { 
             let a = document.getElementById("output").value 
             let b = eval(a) 
             document.getElementById("output").value = b 
         } 
         //fonction qui affiche la valeur
         function afficher(val) 
         { 
             document.getElementById("output").value+=val 
         } 
         //fonction qui efface l'écran 
         function effacer() 
         { 
             document.getElementById("output").value = "" 
         } 
      </script>
      <style>
        td button{width:100%}
      </style>
    
      <table border="1"> 
         <tbody><tr> 
            <td colspan="3"><input id="output"></td> 
            <td><button onclick="effacer()">c</button></td> 
         </tr> 
         <tr> 
            <td><button onclick="afficher('1')">1</button></td> 
            <td><button onclick="afficher('2')">2</button></td> 
            <td><button onclick="afficher('3')">3</button></td> 
            <td><button onclick="afficher('+')">+</button></td> 
         </tr> 
         <tr> 
            <td><button onclick="afficher('4')">4</button></td> 
            <td><button onclick="afficher('5')">5</button></td> 
            <td><button onclick="afficher('6')">6</button></td> 
            <td><button onclick="afficher('-')">-</button></td> 
         </tr> 
         <tr> 
            <td><button onclick="afficher('7')">7</button></td> 
            <td><button onclick="afficher('8')">8</button></td> 
            <td><button onclick="afficher('9')">9</button></td> 
            <td><button onclick="afficher('*')">*</button></td> 
         </tr> 
         <tr>
            <td><button onclick="afficher('.')">.</button></td> 
            <td><button onclick="afficher('0')">0</button></td> 
            <td><button onclick="calculer()">=</button></td> 
            <td><button onclick="afficher('/')">/</button></td> 
         </tr> 
      </tbody></table> 
        
        
    <div class="Home">
      <a href="index.html"><img src="home.png" width="100" height="auto"> 
      </a>
    </div>

  
  

</body></html>

Partie supplémentaire: musique

https://nsi2021-2022.neocities.org/musique.html

<!DOCTYPE html>
<html lang="fr">
<head>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">

<meta charset="utf-8"/>
<title>Nsi</title>


    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body onload="backgr()" style="background-size: cover; background-attachment: fixed; background-repeat: no-repeat;" background="room.jpg">
  
  <h1 style="background-color:#006BFF "> Coin des musiques rétro 🎶</h1>
  
    <p><a href="https://youtu.be/zATXtSjPwZM"><font size="5.5"><font color="white">RetroWave Mix</font></font></a>.</p>
    <p><a href="https://youtu.be/8GW6sLrK40k"><font color="white">HOME - Resonance</font></a>.</p>
    <p><a href="https://youtu.be/TS5J_cjzKvI"><font color="white">W O L F C L U B - Summer Lights</font></a>.</p>
    <p><a href="https://youtu.be/NZf15xVrOW8"><font color="white">Zombie Hyperdrive - Red Eyes</font></a>.</p>
    <p><a href="https://youtu.be/qIz-9CHVQUc"><font color="white">The Midnight - Jason (Official Audio)</font></a>.</p>
    <p><a href="https://youtu.be/LXx8-iEX7cs"><font color="white">Michael Oakley - Turn Back Time</font></a>.</p>
    <p><a href="https://youtu.be/oydn7uDt3R4"><font color="white">TLF - Honey H.I.V.E</font></a>.</p>
    <p><a href="https://youtu.be/3Ax6jTZlu_g"><font color="white">HOME - Pyxis</font></a>.</p>
    <p><a href="https://youtu.be/9Ty-qFZZPZk"><font color="white">HOME - Hold</font></a>.</p>
    <p><a href="https://youtu.be/BiZFOnp5WBo"><font color="white">HOME - Dusk</font></a>.</p>
    
  

 
 <div class="Home">
      <a href="index.html"><img src="home.png" 
       width="100" 
     height=auto> 
      </a>
    </div>









  </body>
</html>

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *