Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                  <div id="progress"></div>
  <div class="corpsPage">
    <section id="1">
      <div class="header">
        
          <h1 align="left">Les Cookies</h1>
      </div>
   </div>
   
    <div class="nav" id="monMenu">
      <ul>
        <li><a href="#1">Haut&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
        <li><a href="#2">Qu’est-ce qu’un cookie ?</a></li>
        <li><a href="#3">Les cookies tiers</a></li>
        <li><a href="#4">Les différents types de cookies</a></li>
        <li><a href="#5">Bibliographie</a></li>
      </ul>
    </div>
    <div class="corpsPage">
        </br>
        <p>Comment les cookies permettent de personnaliser la publicité présente sur un site internet ?</p>

        <p>Indication : Expliquer ce qu’est un cookie et les informations qu’il peut contenir. Expliquer comment cela peut permettre de pister un internaute. Utiliser les outils de développement d’un navigateur pour afficher les cookies d’un site.</p>

          <table border="1" cellpadding="15" align="center">
            <tr>
              <td></td>
              <th> Sommaire </th>
            </tr>
            <tr>
              <th>I</th>
              <td>Qu’est-ce qu’un cookie ?</td>
            </tr>
            <tr>
              <th>II</th>
              <td>Les cookies tiers</td>
            </tr>
            <tr>
              <th>III</th>
              <td>Les différents types de cookies (exemple avec Google)<br/>
                <table border="1">
                  <tr>
                    <th>1</th>
                    <td>Les cookies de préférence</td>
                  </tr>
                  <tr>
                    <th>2</th>
                    <td>Les cookies de sécurité</td>
                  </tr>
                  <tr>
                    <th>3</th>
                    <td>Les cookies de processus</td>
                  </tr>
                  <tr>
                    <th>4</th>
                    <td>Les cookies de publicité</td>
                  </tr>
                  <tr>
                    <th>5</th>
                    <td>Les cookies d’état de cession</td>
                  </tr>						
                </table><br/>
              </td>
            </tr>
          </table>
    </section>
    <section id="2"><br/><br/><br/><br/>


        <h2>I. Qu’est-ce qu’un cookie ?</h2>

        <p> Un cookie est une information conservée sur notre ordinateur par un site web que nous visitons. Les cookies conservent souvent nos paramètres pour un site web, tels que notre langue préférée ou notre localisation. Quand vous revenez sur le site, le navigateur renvoie les cookies qui appartiennent au site : cela permet au site de nous présenter des informations personnalisées correspondant à nos besoins.</p>
        <p> Les cookies peuvent conserver une grande variété d'informations, incluant des informations d'identification personnelle (telles que notre nom, notre adresse postale, notre adresse électronique ou notre numéro de téléphone) : mais ces infos ne peuvent être conservées que si on les fournit, les sites web ne peuvent pas obtenir l’accès aux infos que nous n’avons pas fourni. </p>
        <p> Par défaut, les activités de conservation et d'envoi des cookies sont transparentes pour nous : cependant, nous pouvons changer les paramètres dans certains navigateurs pour approuver ou refuser les requêtes de conservation des cookies ou les supprimer automatiquement lorsqu’on ferme la fenêtre. </p>
      </section>
      <section id="3"><br/><br/><br/><br/>

        <h2>II. Les cookies tiers </h2>

        <p> Il s'agit des cookies déposés par des sociétés tierces (par exemple des régies publicitaires ou par des partenaires) afin d'identifier nos centres d'intérêt au travers des produits consultés ou achetés sur un site et personnaliser l'offre publicitaire qui nous est adressée sur le site ou en dehors. </p>
        <p> Ils peuvent être déposés à l'occasion de la navigation sur ce site ou lorsque vous cliquez dans les espaces publicitaires du site, mais certains sites n’ont pas la maîtrise des cookies déposés par les régies publicitaires qui agissent pour leur propre compte. </p>
        <p> Dans le cadre des partenariats publicitaires le site peut être amené à transmettre aux partenaires qui agissent pour son compte des données concernant nos achats et les produits consultés sur le site. </p>
     </section>
     <section id="4"><br/><br/><br/><br/>
        <h2>III. Les différents types de cookies (exemple avec Google)</h2>
        <h3>1)	Les cookies de préférence</h3>
        <p> Les sites Google utilisent ces cookies pour enregistrer des informations qui influent sur leur fonctionnement ou leur apparence (telles que notre langue préférée ou notre localisation géographique). Ainsi, en mémorisant notre position, un site Web peut nous présenter des prévisions météo locales ou des informations de circulation routière. </p>
        <p> La plupart des utilisateurs de Google ont un cookie de préférence appelé "NID" qui est enregistré dans leur navigateur. Le navigateur envoie ce cookie et les demandes associées aux sites de Google. Le cookie NID contient un ID unique permettant à Google d'enregistrer nos préférences et d'autres informations, notamment notre langue préférée (par exemple, le français), le nombre de résultats de recherche à afficher par page (par exemple, 10 ou 20) et l'état souhaité pour le filtre Safe de Google (contrôle parental et sécurité internet). </p>
        <h3>  2) Les cookies de sécurité</h3>
        <p> Les cookies de sécurité sont présents pour authentifier les utilisateurs, empêcher l'utilisation frauduleuse d'informations de connexion et protéger les données des utilisateurs contre les tiers non autorisés. </p>
        <p> Par exemple, Google utilise les cookies nommés "SID" et "HSID" qui contiennent, sous forme chiffrée et signée numériquement, l'identifiant du compte Google de l'utilisateur ainsi que ses dates et heures de connexion les plus récentes. Associés, ces deux cookies leur permettent de bloquer de nombreux types d'attaques, tels que les tentatives de vol du contenu de formulaires que nous remplissons sur des pages Web. </p>
        <h3> 3) Les cookies de processus</h3>
        <p>	Les cookies de processus garantissent le fonctionnement du site Web et permettent de proposer aux internautes un service qui répond à leurs besoins afin qu'ils puissent naviguer sur les pages Web et accéder aux zones sécurisées du site. Sans ces cookies, le site ne peut pas fonctionner correctement. </p>
        <p> Par exemple, Google utilise un cookie "lbcs" qui permet d'ouvrir plusieurs documents Google Documents dans un seul et même navigateur. Le blocage de ce cookie empêcherait le bon fonctionnement de Google Documents. </p>
        <h3> 4) Les cookies de publicité</h3>
        <p> Google utilise des cookies pour rendre la publicité plus attractive pour les utilisateurs et plus rentable pour les éditeurs et les annonceurs en sélectionnant les pubs en fonction de leur pertinence pour l’utilisateur et en évitant la diffusion d’annonces que l’utilisateur aurait déjà vu. </p>
        <p> Ils utilisent des cookies, tels que "NID" et "SID", pour personnaliser les annonces sur les sites Google, tels que la recherche Google. Ils leur servent, par exemple, à enregistrer nos recherches les plus récentes, nos interactions précédentes avec les résultats de recherche. Cela permet d'afficher des annonces personnalisées sur Google. </p>
        <p> Google utilise également un ou plusieurs cookies pour les publicités qu’ils diffusent partout sur Internet. Un des principaux cookies publicitaires tiers est appelé “IDE” et est stocké dans les navigateurs sous le nom de domaine doubleclick.net. D’autres services Google, comme YouTube, peuvent également utiliser des cookies pour nous présenter des publicités plus pertinentes. </p>
        <p> Google utilise également des cookies pour le suivi des conversions, dont l'objectif principal est d’aider les annonceurs à déterminer le nombre de personnes qui ont cliqué sur une annonce avant d’acheter un de leurs produits. Ces cookies permettent à Google et à l’annonceur de déterminer si on a cliqué sur une publicité puis consulté le site web de l’annonceur. Un cookie appelé “Conversion” est dédié à cet usage. </p>
        <p> Ils utilisent également des cookies appelées “AID”, “DSID” et “TAID” afin de suivre notre activité multi-appareils lorsque nous sommes déjà connecté à notre compte Google depuis un autre appareil. Google procède comme cela afin de coordonner les publicités que nous voyons depuis différents appareils et mesurer les événements de conversion, mais on peut toujours le désactiver. </p>
        <h3> 5) Les cookies d’état de cession</h3>
        <p> Des informations sont souvent collectées sur les sites Web concernant les interactions des utilisateurs avec ces derniers. Ces données peuvent inclure les pages les plus consultées et les messages d'erreur éventuellement affichés sur certaines pages. </p>
        <p> Google utilise ces "cookies d'état de session" pour améliorer leurs services et le confort de navigation de leurs utilisateurs. Le blocage ou la suppression de ces cookies ne rend pas les sites Web inutilisables. </p>
        <p> Par exemple, ils utilisent un cookie nommé "recently_watched_video_id_list" pour que les vidéos les plus regardées récemment dans un navigateur donné soient enregistrées sur YouTube. </p>
        <p> En conclusion, les cookies assurent le bon fonctionnement des sites et sont très utiles pour les marques qui utilisent ces cookies pour la publicité. Chaque navigateur et chaque site peut avoir une utilisation différente des cookies, cependant nous pouvons toujours les désactiver ou les supprimer ou encore utiliser des extensions telles que Ghostery qui est une extension propriétaire pour navigateur web chargée de bloquer les mouchards et les cookies des pages web que l'internaute visite. </p>
        <div align="right">EL BODKHANI Yasmine</div>
      </section>
      <section id="5"><br/><br/><br/><br/>
        <h2>Bibliographie:</h2> 
        <ul class="liens">
          <li><a href="https://support.mozilla.org/fr/kb/cookies-informations-sites-enregistrent#w_paramaetres-des-cookies">support mozilla</a></li>
          <li><a href="http://www.francebillet.com/editorial.do?page=TRACK_aide-cookies">france billet</a></li>
          <li><a href="https://www.google.fr/intl/fr/policies/technologies/types/">règle google</a></li>
          <li><a href="https://fr.wikipedia.org/wiki/Ghostery">wikipedia</a></li>
        </ul>
        <br/><br/>
    </section>
  </div>
<div style="text-align: center"><img src="http://lesdigitaux.fr/wp-content/uploads/2017/07/ccc.gif"></div>
              
            
!

CSS

              
                .corpsPage
{font-family:Verdana;
    background-color: Black; 
    color: White;
    text-align:left;
    width:950px;
    margin:30px auto 30px auto;
    height: auto;
    border-radius:10px;
    padding:20px 20px 20px 20px;
}


h1
{
  text-align:center;
  color:black;
  text-decoration: underline;box-shadow
}

h2 
{
  font-weight:bold;
  color: Red;
}
h3{
  font-family: Bodoni;
  text-align:center;
  color: Blue;
  text-decoration: underline;
}
table{
  background-color:white;
  color : Black;
  border:1;
  cellpadding:15;
  align:center
}

td{
  color:violet;
}

#progress{
	background-color: green;
	height: 6px;
	width: 0;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999; 
}

.header{
    height:300px;
    text-align:center;
    line-height:500px;
    background:black;
    background-image:url(https://blog.dareboost.com/wp-content/uploads/2016/12/comment-securiser-cookies.jpg);
    background-repeat:no-repeat;
  background-position:50% 20%;
}

.liens li a {
  color: White;
  
  
}

.nav {
  width: 100%;
  height: auto; 
  background: #839c49;
}

.nav ul {
  padding: 20px;
  margin: auto;
  list-style: none;
  text-align: center;
}
.nav ul li {
  display: inline-block;
  margin: 0 10px;
}
.nav ul li a {
  padding: 10px 0;
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease;
}
.nav ul li a:hover {
  color: #34495E;
}
a.active {
  border-bottom: 2px solid #ecf0f1;
}

















.nav.fixed{/*
  transition-property: margin-top,margin-right;
  transition-duration: .5s,.1s;
  transition-delay: 0;
  transition-timing-function: cubic-bezier(0.22,0.99,0.62,1);
  -moz-transition-property: margin-top,margin-right;
  -moz-transition-duration: .5s,.1s;
  -moz-transition-delay: 0;
  -moz-transition-timing-function: cubic-bezier(0.22,0.99,0.62,1);
  -o-transition-property: margin-top,margin-right;
  -o-transition-duration: .5s,.1s;
  -o-transition-delay: 0;
  -o-transition-timing-function: cubic-bezier(0.22,0.99,0.62,1);
  -ms-transition-property: margin-top,margin-right;
  -ms-transition-duration: .5s,.1s;
  -ms-transition-delay: 0;
  -ms-transition-timing-function: cubic-bezier(0.22,0.99,0.62,1);
  -webkit-transition-property: margin-top,margin-right;
  -webkit-transition-duration: .5s,.1s;
  -webkit-transition-delay: 0;
  -webkit-transition-timing-function: cubic-bezier(0.22,0.99,0.62,1);*/
 
  position: fixed;
  top:0;
  z-index:1000;
  width:100%;
  margin-right: 10px;
  /*height:80px;
  
    margin-bottom:15px;
  text-align:center;
  
  margin-left: 0px;
  margin-right: 0px;*/
}
              
            
!

JS

              
                window.onscroll = function() { indScroll(); colleMenu();}

function indScroll(){	
		// Calcul de la hauteur "utile"
		var hauteur = document.documentElement.scrollHeight - document.documentElement.clientHeight;		
		// Récupération de la position verticale
		var position = document.body.scrollTop || document.documentElement.scrollTop;
		// Récupération de la largeur de la fenêtre
		var largeur = document.documentElement.clientWidth;
		// Calcul de la largeur de la barre		
		var barre = position / hauteur * largeur;		
		// Modification du CSS pour élargir ou réduire la barre		
    document.getElementById("progress").style.width = barre + "px";
	}

function colleMenu() {
  var y = window.pageYOffset; //position de la première ligne de pixels visibles sur la page quand on se réfère au document complet
  if (y >= 350) {  // quand la barre intégrée de menu commence à disparaitre de l'écran  
    document.getElementById("monMenu").setAttribute("class", "nav fixed");
    // on prend l'élément mon menu et on lui associe les classes nav et fixed (ce qui va activer la fixation de la barre tout en haut)
    } else {
      // sinon, on enlève la classe fixed et le menu retourne à sa place dans le document. 
      document.getElementById("monMenu").setAttribute("class", "nav ");
 
    }
}



              
            
!
999px

Console