HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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 </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>
.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;*/
}
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 ");
}
}
Also see: Tab Triggers