1er commit

2023-07-03 12:29:54 +02:00 · 2023-07-03 12:29:54 +02:00 · 3af118a006
commit 3af118a006
50 changed files with 434 additions and 0 deletions
--- a/gafam.html
+++ b/gafam.html
@ -0,0 +1,41 @@
 <!doctype html>
 <html lang="fr">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Computer Paradise</title>
    <link rel="stylesheet" href="style.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
 </head>
 <body>
    <div class="container-fluid entete">
        <nav class="navbar navbar-expand-lg">
            <div class="container-fluid">
                <a class="navbar-brand" href="index.html"><img src="img/logo2.png" height="60px"></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a class="nav-link" href="hardware.html">Matériels </a>
                        <a class="nav-link" href="software.html">Logiciels</a>
                        <a class="nav-link active" aria-current="page" href="gafam.html">Acteurs</a>
                    </div>
                </div>
            </div>
        </nav>
    </div>
    <div class="titre">
        <h1>Les différents acteurs de l'informatique et du numérique</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
        crossorigin="anonymous"></script>
 </body>
 </html>
--- a/hardware.html
+++ b/hardware.html
@ -0,0 +1,224 @@
 <!doctype html>
 <html lang="fr">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Computer Paradise</title>
  <link rel="stylesheet" href="style.css" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
 </head>
 <body>
  <div class="container-fluid entete">
    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid">
        <a class="navbar-brand" href="index.html"><img src="img/logo2.png" height="60px"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-link active" aria-current="page" href="hardware.html">Matériels </a>
            <a class="nav-link" href="software.html">Logiciels</a>
            <a class="nav-link" href="gafam.html">Acteurs</a>
          </div>
        </div>
      </div>
    </nav>
  </div>
  <div class="titre">
    <h1>L'aspect matériel de l'informatique</h1>
  </div>
  <div class="contenu">
    <h2>Mémoire morte - Read-Only Memory (ROM)</h2>
    <p>Un disque dur est un support magnétique de stockage d'information. C'est l’un des principaux composants d'un
      ordinateur. Son rôle est de stocker des données informatiques : c’est donc la mémoire de celui-ci. contient le
      système d'exploitation de l'ordinateur, les programmes installés ainsi que les données personnelles de
      l'utilisateur.
      Lorsqu'on enregistre un document, qu'on copie sur l'ordinateur une photo (dans le dossier Mes
      documents par exemple), les données sont stockées sur le disque dur. Il a une grande capacité de stockage. Il
      existe plusieurs types de disques durs :</p>
    <ul>
      <li>Les disques durs classiques, qui contiennent des pièces mécaniques, dont une tête de lecture qui va pointer
        sur
        des disques magnétiques afin de lire et écrire les données.</li>
      <li>Plus récemment, les disques SSD se sont démocratisés, sans pièce mécanique, et capable de lire et écrire des
        données beaucoup plus rapidement. Ces derniers sont bien évidemment plus chers.</li>
    </ul>
    <img class="img-w200" src="img/disque_dur.jpg">
    <img class="img-w200" src="img/SSD.png">
    <h2>Mémoire vive</h2>
    <p>La mémoire vive (RAM – Random Access Memory) assure un accès rapide et temporaire aux données de l'ordinateur. La
      mémoire vive est située entre le processeur et le stockage permanent des données</p>
    <img class="img-w200" src="img/carte_RAM.png">
    <h2>Carte mère</h2>
    <p>La carte mère est le circuit imprimé qui supporte la plupart des composants et des connecteurs nécessaires au
      fonctionnement d'un compatible PC. Elle est essentiellement composée de circuits imprimés et de ports de connexion
      qui assurent la liaison de tous les composants et périphériques propre</p>
    <img class="img-w200" src="img/carte_mere.jpg">
    <h2>Cartes d'extension</h2>
    <p>Une carte d'extension est un ensemble de composants placés sur un circuit imprimé qui est connectable à la carte
      mère
      via un bus informatique. Le but d'une carte d'extension est d'ajouter des capacités ou des fonctionnalités à un
      ordinateur. Il en existe de nombreux types.</p>
    <p> Les cartes réseaux permettent aux ordinateurs de se connecter aux réseaux à haut débit. Elle reçoit et transmet
      des données et les rend lisibles par l'appareil qui les reçoit. Elle peut être filaire, c'est-à-dire reliée à
      l'ordinateur par un câble dit Ethernet RJ45. Elle peut également posséder le WiFi et être dotée d'une antenne pour
      la réception et la transmission des ondes radioélectriques d'échanges de données</p>
    <img class="img-w200" src="img/carte_ethernet.jpg">
    <img class="img-w200" src="img/carte_wifi.jpg">
    <p>Une carte son est une carte d'extension permettant d'augmenter les capacités sonores d'un ordinateur. La
      principale
      fonction de cette carte est de générer des sons à l'aide d'un générateur de son programmable ou d'un convertisseur
      numérique-analogique, pour l'envoyer vers différents types de sorties.</p>
    <img class="img-w200" src="img/carte_son.jpg">
    <p>Une carte graphique permet l’affichage de graphismes 2D ou 3D sur l’écran d’un PC. La production et la qualité de
      l’image
      dépendent de sa mémoire, de sa fréquence. Elle veille également à alléger la charge du processeur. Elle permet
      ainsi
      de parcourir les fonctionnalités de son système d’exploitation, de réaliser du montage vidéo et de la modélisation
      3D ou encore de prendre en charge les graphismes d’un jeu vidéo. </p>
    <img class="img-w200" src="img/carte_graphique.jpg">
    <img class="img-w200" src="img/CarteGraph_Composition.jpg">
    <h2>Ports et connecteurs</h2>
    <p>L'USB est une norme de bus informatique en série qui sert à connecter des périphériques informatiques à un
      ordinateur ou à tout type d'appareil prévu à cet effet. Le bus USB permet de connecter des périphériques « à chaud
      ».
    </p>
    <img class="img-w200" src="img/usb-guide.png">
    <p>VGA, pour "Video Graphics Array", désigne une interface de connexion permettant de transmettre des signaux vidéo
      analogique. Son architecture fait appel à 15 pins pour transmettre les informations liées au couleurs de base
      (rouge, vert, bleu) ainsi qu'à la synchronisation horizontale et verticale des signaux : les images sont
      transmises
      de haut en bas, ligne par ligne à une fréquence définie et chaque ligne est transmise de gauche à droite, pixel
      par
      pixel à une fréquence définie.</p>
    <img class="img-w200" src="img/RVBDVIVGA.png">
    <p>DVI ("Digital Visual Interface") est un type de connexion numérique qui sert à relier une carte graphique à un
      écran. La liaison DVI améliore sensiblement la qualité de l'affichage par rapport à la connexion VGA (analogique).
    </p>
    <img class="img-w200" src="img/DVI-ID-1.png">
    <p>HDMI signifie High-Definition Multimedia Interface, que l'on peut traduire par connectique multimédia pour la
      haute
      définition. est une connectique pour relier des appareils Haute Définition entre eux.</p>
    <img class="img-w200" src="img/HDMI.jpg">
    <p>Le DisplayPort est un connecteur numérique audio/vidéo pour écran inventé par le VESA (Video Electronics
      Standards
      Association) en 2006. Il permet notamment de retranscrire un son et une image haute définition sur un écran de
      télévision ou d’ordinateur depuis un périphérique source.
      Elaboré selon les normes du DVI et du HDMI dont il combine les atouts, le DisplayPort devait in fine s’y
      substituer.
    </p>
    <img class="img-w200" src="img/DisplayPort.jpg">
    <p> « RVB » fait également référence à l'ensemble de toutes les normes d'entrée vidéo dans lesquelles les
      informations
      de couleur rouge, verte et bleue sont transmises séparément des informations d'image d'une image. Cela permet une
      saturation et une clarté des couleurs pratiquement illimitées. Les formats RVB numériques sont largement utilisés
      dans les ports VGA des moniteurs d'ordinateur.</p>
    <img class="img-w200" src="img/Compositevideo-1.png">
    <h2>Processeurs</h2>
    <p>En informatique, un CPU ou Central Processing Unit désigne un processeur. En français, on utilise parfois la
      traduction littérale du terme anglais, unité centrale de traitement. Quoiqu'il en soit, CPU, processeur et UCT
      signifient la même chose : un des principaux éléments qui entrent dans la composition des appareils électroniques.
      Le processeur a un rôle exécuteur. Il obéit aux instructions qui lui sont données par les programmes
      informatiques.
      Sa fonction ressemble à celle du cerveau humain.</p>
    <img class="img-w200" src="img/processeur.jpg">
    <p>GPU est l'acronyme du terme graphical processing unit, qui signifie en français « unité de traitement graphique
      ».
      On le désigne plus communément par processeur graphique. Il s'agit d'une unité de calcul dédiée aux données
      graphiques d'un ordinateur qui travaille en parallèle avec le CPU (central processing unit, le processeur central
      d'un ordinateur). Le GPU peut se trouver sur le même circuit intégré que le microprocesseur, sous forme de puce ou
      de circuit intégré sur la carte mère d'un ordinateur ou sur une carte graphique dédiée. Cette carte graphique peut
      être interne ou externe à l'ordinateur. Si le GPU est intégré à la carte mère, il doit partager la mémoire
      présente
      avec le processeur. Sur une carte
      graphique, il a sa propre mémoire et offre donc de bien meilleurs résultats.</p>
    <img class="img-w200" src="img/processeur_graphique.jpg">
    <h2>Radiateur</h2>
    <p>Le radiateur est une pièce métallique composée de fines lamelles espacées afin de capter la chaleur et la
      diffuser
      rapidement. Le processeur, qui chauffe beaucoup, possède un radiateur juste au-dessus, surmonté lui-même d’un
      ventilateur.</p>
    <img class="img-w200" src="img/radiateur.jpg">
    <h2>Ventilateur/Dissipateur thermique</h2>
    <p>Les ordinateurs sont équipés de plusieurs ventilateurs qui sont chargés de récupérer et évacuer la
      chaleur produite par les composants. Généralement, il y a un ventilateur à l’avant de l’unité centrale, chargé de
      capter l’air frais extérieur. A l’arrière, un autre ventilateur va lui expulser l’air chaud, créant de ce fait un
      courant d’air.</p>
    <img class="img-w200" src="img/ventilateur.jpg">
    <p>Un dissipateur thermique est un dispositif destiné à évacuer la chaleur résultante de l'effet Joule dans un
      élément
      semi-conducteur d'électronique de puissance. Il s'agit de dispositifs généralement munis d'ailettes, qui doivent
      de
      préférence être montées verticalement pour faciliter le refroidissement par convection. Plus légers que les
      ventilateurs, ils se retrouvent dans les ordinateurs portables fins et les smartphones et tablettes.
      Certaines grosses machines sont même équipées d’un système à refroidissement liquide, en anglais WaterCooling.
      C’est
      le cas d’ordinateurs puissants à destination des professionnels et des Gamers.</p>
    <img class="img-w200" src="img/dissipateur_thermique-.jpg">
    <h2>Ventirad</h2>
    <p>Il s'agit d'un matériel informatique combinant un ventilateur et un radiateur, utilisé pour refroidir des
      composants électroniques. La chaleur va être captée par le radiateur, et expulsée par le ventilateur.</p>
    <img class="img-w200" src="img/ventirad.jpg">
    <h2>Bus</h2>
    <img class="img-w200" src="img/bus_types.png">
    <p>On appelle bus, en informatique, un ensemble de liaisons physiques (câbles, pistes de circuits imprimés, etc.)
      pouvant être exploitées en commun par plusieurs éléments matériels afin de communiquer. Les bus ont pour but de
      réduire le nombre de « voies » nécessaires à la communication des différents composants, en
      mutualisant les communications sur une seule voie de données. C'est la raison pour laquelle la métaphore d'«
      autoroute de données » est parfois utilisée. Il en existe plusieurs types.
      Les bus Entrées/Sorties permettent aux différents périphériques (carte son, carte SCSI, carte réseau, etc...) de
      communiquer entre-eux. Les périphériques qui utilisent sur ce type de bus s'installent sur des connecteurs (ou
      slots) présents sur la carte mère et partagent tous la même bande passante.</p>
    <img class="img-w200" src="img/bus_entree_sortie.png">
    <p>Le microprocesseur possède son propre bus : le bus système. Il est appelé ainsi, car les performances générales
      de
      tout le système dépendent de la vélocité de ce bus (enfin, en théorie !). En effet, c'est grâce à celui-ci que le
      microprocesseur communique avec tous les autres composants. De ce fait, la bande passante de ce bus est la plus
      importante de tout le système.
      Le bus mémoire permet le transfert de données entre le microprocesseur et la mémoire vive (RAM). Ce bus doit donc
      être véloce (généralement un peu moins que le bus système malheureusement), afin d'assurer des transferts les plus
      rapides possibles.
      Le bus USB est l'un des bus plus utilisé de nos jours : il permet la connexion « à chaud » (sans redémarrer le PC)
      des périphériques, qui partagent la même bande passante. Cette bande passante peut atteindre 60 Mo/s pour la
      version
      2.0 du bus (soit 40 fois supérieure à celle du bus USB 1.1), et est suffisante pour les tâches les plus courantes
      (imprimantes, scanners, clés, haut-parleurs, caméscopes, etc...).
      Comme le bus USB, le bus FireWire permet la connexion « à chaud » (sans redémarrer le PC) des périphériques, qui
      partagent la même bande passante. Mais cette bande passante est plus importante que celle du bus USB. En effet,
      elle
      est comprise entre 100 et 400 Mo/s, de quoi satisfaire les péréphériques exigeant des taux de transfert élévés
      (vidéo numérique professionnelle, télévision numérique, magnétoscopes, chaînes hi-fi, etc...).
    </p>
    <h2>Alimentation électrique</h2>
    <img class="img-w200" src="img/bloc_alimentation.jpeg">
    <img class="img-w200" src="img/batterie.jpg">
    <img class="img-w200" src="img/adaptateur.jpg">
    <h2>Boitîer/Châssis</h2>
    <img class="img-w200" src="img/chassis.png">
    <h2>Périphériques</h2>
    <img class="img-w200" src="img/peripheriques.jpg">
    <p>Parmi les composants d'un ordinateur, on distingue les périphériques de sortie (moniteur, imprimante,
      haut-parleurs, graveur de CD), des périphériques d'entrée (clavier, souris, lecteur de CD/DVDRom, scanner,
      micro, webcam, manette de jeu, appareil photo et caméscope numériques). Il existe un cas particulier : le modem
      qui est un périphérique de sortie si l'on envoie des informations vers Internet et un périphérique d'entrée si
      l'on reçoit des informations d'Internet. Chaque composant joue un rôle bien précis : le microprocesseur reçoit
      et transmet des informations ; le disque dur stocke les informations ; les périphériques d'entrée analysent les
      informations fournies et les transmettent au microprocesseur ; les périphériques de sortie (imprimante,
      haut-parleurs, graveur) traduisent les informations reçues par les périphériques d'entrée, puis transmises au
      microprocesseur.</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
    crossorigin="anonymous"></script>
 </body>
 </html>
--- a/img/15499066497728_Capture
+++ b/img/15499066497728_Capture
--- a/Wikipédia.pdf
+++ b/Wikipédia.pdf
--- a/img/CarteGraph_Composition.jpg
+++ b/img/CarteGraph_Composition.jpg
--- a/img/Compositevideo-1.png
+++ b/img/Compositevideo-1.png
--- a/img/DVI-ID-1.png
+++ b/img/DVI-ID-1.png
--- a/img/DisplayPort.jpg
+++ b/img/DisplayPort.jpg
--- a/img/HDMI.jpg
+++ b/img/HDMI.jpg
--- a/img/Logiciels.pdf
+++ b/img/Logiciels.pdf
--- a/img/RVBDVIVGA.png
+++ b/img/RVBDVIVGA.png
--- a/img/SSD.png
+++ b/img/SSD.png
--- a/img/SVideo.png
+++ b/img/SVideo.png
--- a/Examples.pdf
+++ b/Examples.pdf
--- a/img/adaptateur.jpg
+++ b/img/adaptateur.jpg
--- a/img/batterie.jpg
+++ b/img/batterie.jpg
--- a/img/bloc_alimentation.jpeg
+++ b/img/bloc_alimentation.jpeg
--- a/img/bus_PCI.png
+++ b/img/bus_PCI.png
--- a/img/bus_PCI_mini.png
+++ b/img/bus_PCI_mini.png
--- a/img/bus_PCIe.png
+++ b/img/bus_PCIe.png
--- a/img/bus_entree_sortie.png
+++ b/img/bus_entree_sortie.png
--- a/img/bus_types.png
+++ b/img/bus_types.png
--- a/img/carte_RAM.png
+++ b/img/carte_RAM.png
--- a/img/carte_acceleratrice.jpg
+++ b/img/carte_acceleratrice.jpg
--- a/img/carte_ethernet.jpg
+++ b/img/carte_ethernet.jpg
--- a/img/carte_graphique.jpg
+++ b/img/carte_graphique.jpg
--- a/img/carte_mere.jpg
+++ b/img/carte_mere.jpg
--- a/img/carte_son.jpg
+++ b/img/carte_son.jpg
--- a/img/carte_wifi.jpg
+++ b/img/carte_wifi.jpg
--- a/img/chassis.png
+++ b/img/chassis.png
--- a/img/connecteur_avant.png
+++ b/img/connecteur_avant.png
--- a/structure.jpeg
+++ b/structure.jpeg
--- a/img/disque_dur.jpg
+++ b/img/disque_dur.jpg
--- a/img/dissipateur_thermique-.jpg
+++ b/img/dissipateur_thermique-.jpg
--- a/img/itops-software_stack-h.png
+++ b/img/itops-software_stack-h.png
--- a/img/logo1.png
+++ b/img/logo1.png
--- a/img/logo2.png
+++ b/img/logo2.png
--- a/img/logo3.png
+++ b/img/logo3.png
--- a/img/peripheriques.jpg
+++ b/img/peripheriques.jpg
--- a/img/processeur.jpg
+++ b/img/processeur.jpg
--- a/img/processeur_graphique.jpg
+++ b/img/processeur_graphique.jpg
--- a/img/radiateur.jpg
+++ b/img/radiateur.jpg
--- a/img/systeme_exploitation.png
+++ b/img/systeme_exploitation.png
--- a/img/usb-guide.png
+++ b/img/usb-guide.png
--- a/img/ventilateur.jpg
+++ b/img/ventilateur.jpg
--- a/img/ventirad.jpg
+++ b/img/ventirad.jpg
--- a/index.html
+++ b/index.html
@ -0,0 +1,59 @@
 <!doctype html>
 <html lang="fr">
 <!--La majorité du code HTML de cette page a été copié sur la page "Get Started" de Bootstrap (https://getbootstrap.com/docs/5.3/getting-started/introduction/)-->
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Dans l'élément "title", j'ai remplacé "Boostrap demo" par "Computer Paradise", le nom de mon site-->
    <title>Computer Paradise</title>
    <link rel="stylesheet" href="style.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
 </head>
 <body>
    <!--Ici, j'ai rajouté un "div" au dessus du "nav" venant de Bootstrap, pour changer la couleur de la barre de navigation du site-->
    <div class="container-fluid entete">
        <nav class="navbar navbar-expand-lg">
            <div class="container-fluid">
                <a class="navbar-brand" href="index.html"><img src="img/logo2.png" height="60px"></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a class="nav-link" href="hardware.html">Matériels </a>
                        <a class="nav-link" href="software.html">Logiciels</a>
                        <a class="nav-link" href="gafam.html">Acteurs</a>
                    </div>
                </div>
                <input type="range" min="10" max="50" value="16" id="textSize">
            </div>
        </nav>
    </div>
    <!--/div-->
    <!--Ici, j'ai rajouté un "div" pour rajouter de des bordures et des rembourrages (padding) au titre de l'article.-->
    <div class="titre">
        <h1>Bienvenue sur Computer Paradise</h1>
    </div>
    <!--/div-->
    <!--Ici, j'ai rajouté un "div" pour rajouter de des bordures et des rembourrages (padding) au contenu de l'article.-->
    <div class="contenu">
        <p>Ici, vous saurez TOUT TOUT TOUT ce que vous vouliez savoir sur l'informatique, de l'aspect matériel
            (hardware) à
            l'aspect logiciel (software) en passant par les réseaux et les acteurs de ce domaine.</p>
    </div>
     <!--/div-->
    <script src="script.js"></script>
 <!--Ici commence le script Javascript pris sur Boostrap-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
        crossorigin="anonymous"></script>
 <!--/script-->
 </body>
 </html>
--- a/script.js
+++ b/script.js
@ -0,0 +1,26 @@
 var counter = 0;
 function myCounter() {
    counter++;
    document.getElementById("counterDisplay").innerText = counter;
    console.log("Vous avez cliqué ", counter, "fois.");
 }
 document.getElementById("clickCounter").addEventListener("click", myCounter);
 function changeFontSize() {
    var newSize = document.getElementById("textSize").value + "px";
    console.log("New Size: ", newSize);
    var paragraphs = document.getElementsByTagName("p");
    console.log("Paragraphes sélectionnés: ", paragraphs);
    for(var i=0; i < paragraphs.length; i++) {
        paragraphs[i].style.fontSize = newSize;
    }
   var bouton = document.getElementById("clickCounter");
   console.log("mon bouton: ", bouton.innerText);
   bouton.style.fontSize = newSize;
 }
 document.getElementById("textSize").addEventListener("input", changeFontSize)
--- a/software.html
+++ b/software.html
@ -0,0 +1,48 @@
 <!doctype html>
 <html lang="fr">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Computer Paradise</title>
    <link rel="stylesheet" href="style.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
 </head>
 <body>
    <div class="container-fluid entete">
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <a class="navbar-brand" href="index.html"><img src="img/logo2.png" height="60px"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-link" href="hardware.html">Matériels </a>
                    <a class="nav-link active" aria-current="page" href="software.html">Logiciels</a>
                    <a class="nav-link" href="gafam.html">Acteurs</a>
                </div>
            </div>
            <input type="range" min="10" max="50" value="16" id="textSize">
        </div>
    </nav>
 </div>
    <div class="titre">
        <h1>L'aspect logiciel en informatique</h1>
    </div>
    <button class="btn btn-warning" id="clickCounter">Compter les clicks</button>
    <p>Vous avez cliqué <span id="counterDisplay">0</span> fois.</p>
    <p>Voilà !</p>
    <script src="script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
        crossorigin="anonymous"></script>
 </body>
 </html>
--- a/style.css
+++ b/style.css
@ -0,0 +1,36 @@
 .entete {
    background-color: white !important;
 }
 .titre {
    margin: 25px 25px 25px 25px; 
    padding: 100px 100px 100px 100px;
 }
 .contenu {
    padding-left: 50px ;
 }
 h1 {
    text-align: center;
    font-size: 80px;
 }
 h2 {
    text-align: left;
    font-size: 40px;
 }
 p {
    font-size: 20px;
 }
 .img-w200 {
    width: 350px;
    display: inline;
    margin-left: auto;
    margin-right: auto;
 }