adam/Paillasse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Paillasse/portail/resources/views/cours/cm.blade.php
Adam Belkacemi e4a6aaebb1 ajoute les pages légales, la purge RGPD et sert polices et scripts depuis le portail 
Pages /legal et /confidentialite réécrites d'après le système réel, purge
des classes archivées depuis 90 jours (prouvée par Pest), archivage côté
prof. Polices, xterm.js et CodeMirror ne sont plus chargés depuis Google
ni jsDelivr. Pages d'aperçu signalées, sans vrais établissements ni faux
chiffres. Journaux Laravel gardés 14 jours.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-09 21:07:25 +02:00

244 lines
42 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@extends('layouts.vitrine')
@section('titre', 'CM · Adressage IPv4')
@section('contenu')
@include('partials.apercu')
<div class="sticky top-0 z-30 border-b border-[#e3e5e8] bg-white">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-4 px-5 py-3 lg:px-10">
<span class="border border-[#dadce0] rounded-lg bg-white px-2 font-mono text-sm font-semibold">CM</span>
<p class="min-w-0 flex-1 truncate font-extrabold">Adressage IPv4 et sous-réseaux</p>
<p class="font-mono text-sm font-semibold">Lu : <span id="pct">0</span> %</p>
<p class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-[#fef7e0] px-3 py-1 font-mono font-semibold" role="timer"><span aria-hidden="true">⏱</span><span id="chrono">00:00</span><span class="text-xs">/ 20:00 conseillées</span></p>
</div>
<div class="h-2 bg-white"><div id="barre-lecture" class="h-full w-0 bg-[#ec3013]"></div></div>
</div>
<section class="border-b border-[#e3e5e8] bg-white">
<div class="mx-auto max-w-7xl px-5 pb-12 pt-10 lg:px-10">
<nav aria-label="Fil d’Ariane" class="flex flex-wrap gap-2 font-semibold"><a href="{{ route('cours.index') }}" class="underline underline-offset-4">Cours</a><span>/</span><a href="{{ route('cours.show') }}" class="underline underline-offset-4">Adressage IPv4</a><span>/</span><span>CM</span></nav>
<div class="min-w-0 flex-1"><p data-public="E" class="mb-2 inline-flex items-center gap-2 rounded-full border border-[#b8c1cf] bg-white px-3 py-1 text-sm font-bold text-[#0b5e3c]">Pour les élèves</p>
<h1 class="mt-6 max-w-4xl text-6xl font-extrabold leading-[1.05] tracking-tight sm:text-7xl">Adressage IPv4 et sous-réseaux</h1></div>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Lis le cours jusqu’au bout. Le QCM de lecture se débloque quand toutes les parties ont été lues et que 5 minutes se sont écoulées.</p>
<ol class="mt-8 flex flex-wrap gap-2 text-sm font-extrabold" aria-label="Parcours">
<li class="border border-[#dadce0] rounded-lg bg-black px-3 py-1 text-white">1 · CM</li><li class="border border-[#dadce0] rounded-lg bg-[#fef7e0] px-3 py-1">2 · QCM de lecture</li><li class="border-2 border-dashed border-black bg-white px-3 py-1">3 · TD optionnel</li><li class="border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-3 py-1">4 · TP</li><li class="border border-[#dadce0] rounded-lg bg-[#ec3013] px-3 py-1 text-white">5 · Examen</li>
</ol>
</div>
</section>
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-14 lg:grid-cols-12 lg:px-10">
<nav class="lg:col-span-3" aria-label="Parties du cours">
<ol class="sticky top-24 grid gap-2">
<li><a href="#pourquoi" data-lien="pourquoi" class="flex items-center gap-3 border border-[#dadce0] rounded-lg bg-white px-3 py-2 font-bold hover:bg-[#f8f9fa]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border border-[#dadce0] rounded-lg text-xs"></span>1. Pourquoi des adresses ?</a></li>
<li><a href="#bits" data-lien="bits" class="flex items-center gap-3 border border-[#dadce0] rounded-lg bg-white px-3 py-2 font-bold hover:bg-[#f8f9fa]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border border-[#dadce0] rounded-lg text-xs"></span>2. Une adresse, 32 bits</a></li>
<li><a href="#masque" data-lien="masque" class="flex items-center gap-3 border border-[#dadce0] rounded-lg bg-white px-3 py-2 font-bold hover:bg-[#f8f9fa]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border border-[#dadce0] rounded-lg text-xs"></span>3. Le masque de sous-réseau</a></li>
<li><a href="#et" data-lien="et" class="flex items-center gap-3 border border-[#dadce0] rounded-lg bg-white px-3 py-2 font-bold hover:bg-[#f8f9fa]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border border-[#dadce0] rounded-lg text-xs"></span>4. Trouver l’adresse réseau : le ET logique</a></li>
<li><a href="#diffusion" data-lien="diffusion" class="flex items-center gap-3 border border-[#dadce0] rounded-lg bg-white px-3 py-2 font-bold hover:bg-[#f8f9fa]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border border-[#dadce0] rounded-lg text-xs"></span>5. Diffusion et nombre d’hôtes</a></li>
<li><a href="#decoupe" data-lien="decoupe" class="flex items-center gap-3 border border-[#dadce0] rounded-lg bg-white px-3 py-2 font-bold hover:bg-[#f8f9fa]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border border-[#dadce0] rounded-lg text-xs"></span>6. Découper un réseau en sous-réseaux</a></li>
<li><a href="#privees" data-lien="privees" class="flex items-center gap-3 border border-[#dadce0] rounded-lg bg-white px-3 py-2 font-bold hover:bg-[#f8f9fa]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border border-[#dadce0] rounded-lg text-xs"></span>7. Adresses privées et adresses particulières</a></li>
<li><a href="#retenir" data-lien="retenir" class="flex items-center gap-3 border border-[#dadce0] rounded-lg bg-white px-3 py-2 font-bold hover:bg-[#f8f9fa]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border border-[#dadce0] rounded-lg text-xs"></span>8. À retenir</a></li>
</ol>
</nav>
<article class="grid gap-16 text-lg font-medium leading-relaxed lg:col-span-9">
<section id="pourquoi" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-pourquoi">
<h2 id="t-pourquoi" class="text-4xl font-extrabold leading-tight tracking-tight">1. Pourquoi des adresses ?</h2>
<p>Sur un réseau, chaque machine doit pouvoir être trouvée. Comme une lettre a besoin d’une adresse postale, un paquet a besoin d’une adresse IP de destination.</p>
<div class="grid gap-4 sm:grid-cols-2">
<div class="border border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-5"><p class="font-mono text-sm font-semibold">La rue</p><p class="mt-1 text-2xl font-extrabold">= le réseau</p><p class="mt-2 font-semibold">Toutes les maisons de la rue partagent le même nom de rue.</p></div>
<div class="border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] p-5"><p class="font-mono text-sm font-semibold">Le numéro</p><p class="mt-1 text-2xl font-extrabold">= l’hôte</p><p class="mt-2 font-semibold">Chaque maison a son numéro, unique dans la rue.</p></div>
</div>
<p>Une adresse IPv4 contient les deux informations. Le <strong>masque</strong> indique où s’arrête la rue et où commence le numéro.</p>
</section>
<section id="video" class="grid scroll-mt-28 gap-4 border border-[#e3e5e8] rounded-2xl bg-[#13233A] p-6 text-white" aria-labelledby="t-video">
<h2 id="t-video" class="text-3xl font-extrabold">Vidéo de contexte</h2>
<div id="v-cadre" class="grid aspect-video place-items-center border border-[#e3e5e8] rounded-2xl bg-[#0D192B] text-center"><p class="max-w-md px-4 font-semibold text-[#9fb0c8]">Ton prof peut ajouter ici une vidéo YouTube pour illustrer le cours.</p></div>
<form id="v-form" class="flex flex-wrap gap-3"><label class="sr-only" for="v-url">Lien YouTube</label><input id="v-url" class="min-w-[240px] flex-1 border border-[#e3e5e8] rounded-2xl px-3 py-2 font-mono text-sm font-semibold text-black" placeholder="https://www.youtube.com/watch?v=…"><button type="submit" class="border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] px-4 py-2 font-extrabold text-black">Intégrer la vidéo</button></form>
<p class="text-sm font-semibold text-[#9fb0c8]">Espace prof · la vidéo s’affiche en mode sans cookie (youtube-nocookie.com).</p>
</section>
<section id="bits" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-bits">
<h2 id="t-bits" class="text-4xl font-extrabold leading-tight tracking-tight">2. Une adresse, 32 bits</h2>
<p>Une adresse IPv4 est un nombre de <strong>32 bits</strong>. Pour la lire plus facilement, on la découpe en 4 octets de 8 bits, écrits en décimal et séparés par des points.</p>
<figure class="overflow-x-auto border border-[#e3e5e8] rounded-2xl bg-white p-5">
<p class="font-mono text-2xl font-semibold">192.168.10.77</p>
<div class="mt-4 flex min-w-max items-end gap-1"><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span></span><span class="self-end px-0.5 font-extrabold">.</span><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span></span><span class="self-end px-0.5 font-extrabold">.</span><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span></span><span class="self-end px-0.5 font-extrabold">.</span><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-white">1</span></span></div>
<figcaption class="mt-3 font-semibold">192 = 11000000 · 168 = 10101000 · 10 = 00001010 · 77 = 01001101</figcaption>
</figure>
<p>Chaque octet va de 0 (00000000) à 255 (11111111). Une adresse comme 192.168.10.300 est donc impossible.</p>
</section>
<section id="masque" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-masque">
<h2 id="t-masque" class="text-4xl font-extrabold leading-tight tracking-tight">3. Le masque de sous-réseau</h2>
<p>Le masque est lui aussi un nombre de 32 bits. Il commence par une suite de 1 (la partie réseau) suivie d’une suite de 0 (la partie hôte). La notation <strong>CIDR</strong> écrit simplement le nombre de 1 : <code class="border border-[#dadce0] rounded-lg bg-[#fef7e0] px-1 font-mono">/26</code>.</p>
<figure class="overflow-x-auto border border-[#e3e5e8] rounded-2xl bg-white p-5">
<p class="font-mono text-2xl font-semibold">/26 = 255.255.255.192</p>
<div class="mt-4 flex min-w-max items-end gap-1"><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span></span><span class="self-end px-0.5 font-extrabold">.</span><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span></span><span class="self-end px-0.5 font-extrabold">.</span><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span></span><span class="self-end px-0.5 font-extrabold">.</span><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#eef0fd]">1</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#e6f4ea]">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#e6f4ea]">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#e6f4ea]">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#e6f4ea]">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#e6f4ea]">0</span><span class="grid h-7 w-5 place-items-center border border-[#dadce0] rounded-lg font-mono text-xs font-semibold bg-[#e6f4ea]">0</span></span></div>
<figcaption class="mt-3 flex flex-wrap gap-4 font-semibold"><span class="flex items-center gap-2"><span class="h-4 w-4 border border-[#dadce0] rounded-lg bg-[#eef0fd]"></span>26 bits de réseau</span><span class="flex items-center gap-2"><span class="h-4 w-4 border border-[#dadce0] rounded-lg bg-[#e6f4ea]"></span>6 bits d’hôte</span></figcaption>
</figure>
<p>Dans le dernier octet, les 2 premiers bits valent 1 : 128 + 64 = 192. D’où 255.255.255.192.</p>
</section>
<section id="et" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-et">
<h2 id="t-et" class="text-4xl font-extrabold leading-tight tracking-tight">4. Trouver l’adresse réseau : le ET logique</h2>
<p>Pour trouver le réseau d’une adresse, on fait un <strong>ET logique</strong> bit à bit entre l’adresse et le masque. Le résultat vaut 1 seulement si les deux bits valent 1.</p>
<div class="grid gap-6 md:grid-cols-2">
<table class="border border-[#e3e5e8] rounded-2xl bg-white text-center font-mono text-lg"><caption class="sr-only">Table du ET logique</caption><thead class="bg-[#0b57d0] text-white"><tr><th class="px-4 py-2">A</th><th class="px-4 py-2">B</th><th class="px-4 py-2">A ET B</th></tr></thead><tbody class="divide-y divide-[#e3e5e8]"><tr><td class="py-1">0</td><td>0</td><td class="font-semibold">0</td></tr><tr><td class="py-1">0</td><td>1</td><td class="font-semibold">0</td></tr><tr><td class="py-1">1</td><td>0</td><td class="font-semibold">0</td></tr><tr class="bg-[#fef7e0]"><td class="py-1">1</td><td>1</td><td class="font-semibold">1</td></tr></tbody></table>
<div class="border border-[#e3e5e8] rounded-2xl bg-[#13233A] p-5 font-mono text-white">
<p class="text-sm text-[#9fb0c8]">Dernier octet seulement</p>
<p class="mt-2"> 01001101 <span class="text-[#9fb0c8]">(77)</span></p>
<p>ET 11000000 <span class="text-[#9fb0c8]">(192)</span></p>
<p class="border-t-2 border-white pt-1 text-[#FFD23F]">= 01000000 (64)</p>
</div>
</div>
<p>Les trois premiers octets du masque valent 255 : ils recopient l’adresse telle quelle. L’adresse réseau de 192.168.10.77/26 est donc <strong>192.168.10.64</strong>.</p>
</section>
<section id="diffusion" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-diffusion">
<h2 id="t-diffusion" class="text-4xl font-extrabold leading-tight tracking-tight">5. Diffusion et nombre d’hôtes</h2>
<p>L’adresse de <strong>diffusion</strong> (broadcast) met tous les bits d’hôte à 1. Un paquet envoyé à cette adresse arrive à toutes les machines du réseau.</p>
<p>Ici, les 6 bits d’hôte à 1 donnent 01111111 = 127 : la diffusion est <strong>192.168.10.127</strong>.</p>
<div class="border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] p-5 text-xl font-extrabold">Hôtes utilisables = 2<sup>bits d’hôte</sup> − 2</div>
<p>On retire 2 adresses : celle du réseau et celle de diffusion. Avec 6 bits : 2⁶ − 2 = <strong>62 hôtes</strong>, de 192.168.10.65 à 192.168.10.126.</p>
</section>
<section id="decoupe" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-decoupe">
<h2 id="t-decoupe" class="text-4xl font-extrabold leading-tight tracking-tight">6. Découper un réseau en sous-réseaux</h2>
<p>Emprunter des bits d’hôte pour le réseau crée des sous-réseaux plus petits. Emprunter 2 bits à un /24 donne 2² = 4 sous-réseaux en /26.</p>
<figure class="border border-[#e3e5e8] rounded-2xl bg-white p-5">
<p class="font-mono font-semibold">192.168.10.0/24 découpé en 4 × /26</p>
<div class="mt-4 grid grid-cols-4 border border-[#e3e5e8] rounded-2xl font-mono text-sm font-semibold">
<div class="border-r border-[#e3e5e8] bg-[#fef7e0] p-3">.0<br>→ .63</div><div class="border-r border-[#e3e5e8] bg-[#e6f4ea] p-3">.64<br>→ .127</div><div class="border-r border-[#e3e5e8] bg-[#eef0fd] p-3">.128<br>→ .191</div><div class="bg-[#fce8e6] p-3">.192<br>→ .255</div>
</div>
<figcaption class="mt-3 font-semibold">Chaque bloc : 64 adresses, 62 hôtes. L’adresse .77 tombe dans le 2ᵉ bloc.</figcaption>
</figure>
<p>Astuce : la taille d’un bloc vaut 256 moins la valeur du dernier octet du masque. Pour 192 : 256 − 192 = 64.</p>
</section>
<section id="privees" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-privees">
<h2 id="t-privees" class="text-4xl font-extrabold leading-tight tracking-tight">7. Adresses privées et adresses particulières</h2>
<p>Certaines plages sont réservées aux réseaux internes (RFC 1918). Elles ne sont pas routées sur Internet.</p>
<ul class="grid gap-3 sm:grid-cols-3"><li class="border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] p-4 font-mono text-lg font-semibold">10.0.0.0/8</li><li class="border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] p-4 font-mono text-lg font-semibold">172.16.0.0/12</li><li class="border border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-4 font-mono text-lg font-semibold">192.168.0.0/16</li></ul>
<ul class="grid gap-2"><li class="flex flex-wrap gap-3"><span class="font-mono font-semibold">127.0.0.1</span><span>la boucle locale : la machine elle-même</span></li><li class="flex flex-wrap gap-3"><span class="font-mono font-semibold">169.254.x.x</span><span>adresse automatique quand aucun DHCP ne répond</span></li><li class="flex flex-wrap gap-3"><span class="font-mono font-semibold">0.0.0.0</span><span>« n’importe quelle adresse » ou « pas encore d’adresse »</span></li><li class="flex flex-wrap gap-3"><span class="font-mono font-semibold">255.255.255.255</span><span>diffusion limitée au réseau local</span></li></ul>
</section>
<section id="retenir" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-retenir">
<h2 id="t-retenir" class="text-4xl font-extrabold leading-tight tracking-tight">8. À retenir</h2>
<ul class="grid gap-3"><li class="flex gap-3 border border-[#dadce0] rounded-lg bg-white p-3 font-bold"><span aria-hidden="true">■</span><span>Une adresse IPv4 = 32 bits = 4 octets de 0 à 255.</span></li><li class="flex gap-3 border border-[#dadce0] rounded-lg bg-white p-3 font-bold"><span aria-hidden="true">■</span><span>Le masque sépare la partie réseau de la partie hôte. /n = n bits à 1.</span></li><li class="flex gap-3 border border-[#dadce0] rounded-lg bg-white p-3 font-bold"><span aria-hidden="true">■</span><span>Adresse réseau = adresse ET masque. Diffusion = bits d’hôte à 1.</span></li><li class="flex gap-3 border border-[#dadce0] rounded-lg bg-white p-3 font-bold"><span aria-hidden="true">■</span><span>Hôtes utilisables = 2<sup>bits d’hôte</sup> − 2.</span></li><li class="flex gap-3 border border-[#dadce0] rounded-lg bg-white p-3 font-bold"><span aria-hidden="true">■</span><span>Taille d’un bloc = 256 − dernier octet du masque.</span></li></ul>
</section>
<section id="qcm-lecture" class="scroll-mt-28 border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] p-6" aria-labelledby="t-lecture">
<h2 id="t-lecture" class="text-4xl font-extrabold tracking-tight">QCM de lecture</h2>
<p class="mt-3 font-semibold">4 questions sur les notions du texte, pour vérifier que tu as bien lu.</p>
<div id="verrou" class="mt-6 border border-[#e3e5e8] rounded-2xl bg-white p-5">
<p class="text-xl font-extrabold">🔒 Encore un peu de lecture</p>
<p id="verrou-texte" class="mt-2 font-semibold">Parties lues : 0 / 8 · Temps : 0 / 5 min</p>
<button type="button" id="debloquer" class="mt-4 text-sm font-bold underline underline-offset-4">Aperçu : débloquer sans attendre</button>
</div>
<form id="form-lecture" hidden class="mt-6 grid gap-6">
<fieldset class="border border-[#e3e5e8] rounded-2xl bg-white p-5" data-q data-ok="2">
<legend class="-ml-2 border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2 font-mono text-sm font-semibold">Question 1</legend>
<p class="text-xl font-extrabold">Combien de bits contient une adresse IPv4 ?</p>
<div class="mt-4 grid gap-2 sm:grid-cols-2">
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="l0" value="0" class="h-5 w-5 accent-black"><span>8</span></label>
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="l0" value="1" class="h-5 w-5 accent-black"><span>16</span></label>
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="l0" value="2" class="h-5 w-5 accent-black"><span>32</span></label>
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="l0" value="3" class="h-5 w-5 accent-black"><span>64</span></label>
</div>
<div data-correction hidden class="mt-4 border border-[#dadce0] rounded-lg p-4"><p data-verdict class="font-extrabold"></p><p class="mt-1 font-medium">Une adresse IPv4 fait 32 bits, découpés en 4 octets de 8 bits (partie 2).</p></div>
</fieldset>
<fieldset class="border border-[#e3e5e8] rounded-2xl bg-white p-5" data-q data-ok="1">
<legend class="-ml-2 border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2 font-mono text-sm font-semibold">Question 2</legend>
<p class="text-xl font-extrabold">Dans l’analogie de l’adresse postale, à quoi correspond le numéro de la maison ?</p>
<div class="mt-4 grid gap-2 sm:grid-cols-2">
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="l1" value="0" class="h-5 w-5 accent-black"><span>Au réseau</span></label>
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="l1" value="1" class="h-5 w-5 accent-black"><span>À l’hôte</span></label>
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="l1" value="2" class="h-5 w-5 accent-black"><span>Au masque</span></label>
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="l1" value="3" class="h-5 w-5 accent-black"><span>À la diffusion</span></label>
</div>
<div data-correction hidden class="mt-4 border border-[#dadce0] rounded-lg p-4"><p data-verdict class="font-extrabold"></p><p class="mt-1 font-medium">La rue représente le réseau, le numéro représente l’hôte, unique dans ce réseau (partie 1).</p></div>
</fieldset>
<fieldset class="border border-[#e3e5e8] rounded-2xl bg-white p-5" data-q data-ok="2">
<legend class="-ml-2 border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2 font-mono text-sm font-semibold">Question 3</legend>
<p class="text-xl font-extrabold">Quelle opération permet de trouver l’adresse réseau ?</p>
<div class="mt-4 grid gap-2 sm:grid-cols-2">
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="l2" value="0" class="h-5 w-5 accent-black"><span>Un OU logique</span></label>
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="l2" value="1" class="h-5 w-5 accent-black"><span>Une addition</span></label>
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="l2" value="2" class="h-5 w-5 accent-black"><span>Un ET logique</span></label>
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="l2" value="3" class="h-5 w-5 accent-black"><span>Une soustraction</span></label>
</div>
<div data-correction hidden class="mt-4 border border-[#dadce0] rounded-lg p-4"><p data-verdict class="font-extrabold"></p><p class="mt-1 font-medium">On fait un ET logique bit à bit entre l’adresse et le masque (partie 4).</p></div>
</fieldset>
<fieldset class="border border-[#e3e5e8] rounded-2xl bg-white p-5" data-q data-ok="1">
<legend class="-ml-2 border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2 font-mono text-sm font-semibold">Question 4</legend>
<p class="text-xl font-extrabold">Laquelle de ces adresses est privée ?</p>
<div class="mt-4 grid gap-2 sm:grid-cols-2">
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="l3" value="0" class="h-5 w-5 accent-black"><span>8.8.8.8</span></label>
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="l3" value="1" class="h-5 w-5 accent-black"><span>172.20.4.1</span></label>
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="l3" value="2" class="h-5 w-5 accent-black"><span>172.32.0.1</span></label>
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="l3" value="3" class="h-5 w-5 accent-black"><span>193.168.1.1</span></label>
</div>
<div data-correction hidden class="mt-4 border border-[#dadce0] rounded-lg p-4"><p data-verdict class="font-extrabold"></p><p class="mt-1 font-medium">172.16.0.0/12 va de 172.16.0.0 à 172.31.255.255. 172.20.4.1 en fait partie, pas 172.32.0.1 (partie 7).</p></div>
</fieldset>
<div class="flex flex-wrap items-center gap-5"><button type="submit" class="inline-flex items-center gap-4 border border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-lg font-extrabold text-white transition-transform hover:bg-[#ec3013] disabled:cursor-not-allowed disabled:bg-[#444141] disabled:shadow-none">Valider ma lecture</button><p id="score-lecture" hidden class="border border-[#e3e5e8] rounded-2xl bg-white px-4 py-2 text-2xl font-extrabold"></p></div>
</form>
</section>
<section class="border border-[#e3e5e8] rounded-2xl bg-white p-6" aria-labelledby="t-plus">
<h2 id="t-plus" class="text-2xl font-extrabold">Pour aller plus loin</h2>
<p class="mt-2 font-semibold">Des plateformes externes pour s’entraîner encore, à ton rythme. Elles ne font pas partie de Syllabus.</p>
<div class="mt-4"><ul class="grid gap-2"><li><a href="https://www.hackerrank.com/domains/python" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border border-[#dadce0] rounded-lg bg-white px-3 py-2 font-bold hover:bg-[#fef7e0]"><span>HackerRank · Python</span><span class="font-mono" aria-hidden="true">↗</span></a></li><li><a href="https://www.hackerrank.com/domains/sql" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border border-[#dadce0] rounded-lg bg-white px-3 py-2 font-bold hover:bg-[#fef7e0]"><span>HackerRank · SQL</span><span class="font-mono" aria-hidden="true">↗</span></a></li><li><a href="https://www.hackerrank.com/domains/shell" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border border-[#dadce0] rounded-lg bg-white px-3 py-2 font-bold hover:bg-[#fef7e0]"><span>HackerRank · Linux Shell</span><span class="font-mono" aria-hidden="true">↗</span></a></li><li><a href="https://www.datacamp.com/category/python" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border border-[#dadce0] rounded-lg bg-white px-3 py-2 font-bold hover:bg-[#fef7e0]"><span>DataCamp · Python</span><span class="font-mono" aria-hidden="true">↗</span></a></li><li><a href="https://www.datacamp.com/category/sql" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border border-[#dadce0] rounded-lg bg-white px-3 py-2 font-bold hover:bg-[#fef7e0]"><span>DataCamp · SQL</span><span class="font-mono" aria-hidden="true">↗</span></a></li></ul></div>
</section>
<section id="suite" hidden class="grid gap-6 md:grid-cols-3" aria-label="Étapes suivantes">
<a href="{{ route('cours.show') }}#td" class="relative border-4 border-dashed border-black bg-white p-6"><span class="absolute -right-3 -top-4 border border-[#dadce0] rounded-lg bg-[#eef0fd] px-2 text-sm font-extrabold">Optionnel</span><p class="font-mono text-sm font-semibold">Étape 3</p><p class="mt-2 text-2xl font-extrabold">TD corrigé</p><p class="mt-2 font-semibold">3 exercices pour s’entraîner.</p></a>
<a href="{{ route('labs.essai') }}" class="border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] p-6"><p class="font-mono text-sm font-semibold">Étape 4</p><p class="mt-2 text-2xl font-extrabold">TP sur VM</p><p class="mt-2 font-semibold">Deux VM, un routeur, 45 min.</p></a>
<a href="{{ route('examen') }}" class="border border-[#e3e5e8] rounded-2xl bg-black p-6 text-white"><p class="font-mono text-sm font-semibold">Étape 5</p><p class="mt-2 text-2xl font-extrabold">Examen</p><p class="mt-2 font-semibold">Quand ton prof le programme.</p></a>
</section>
</article>
</div>
<script>
(function () {
var debut = Date.now(), vues = {}, total = 8, MIN = 300, force = false;
var chrono = document.getElementById('chrono'), pct = document.getElementById('pct'), barre = document.getElementById('barre-lecture');
var verrou = document.getElementById('verrou'), vt = document.getElementById('verrou-texte'), form = document.getElementById('form-lecture');
function s() { return Math.floor((Date.now() - debut) / 1000); }
function maj() {
var t = s(), n = Object.keys(vues).length;
chrono.textContent = String(Math.floor(t / 60)).padStart(2, '0') + ':' + String(t % 60).padStart(2, '0');
var p = Math.round(n / total * 100); pct.textContent = p; barre.style.width = p + '%';
vt.textContent = 'Parties lues : ' + n + ' / ' + total + ' · Temps : ' + Math.min(5, Math.floor(t / 60)) + ' / 5 min';
if (force || (n === total && t >= MIN)) { verrou.hidden = true; form.hidden = false; }
}
var io = new IntersectionObserver(function (es) {
es.forEach(function (e) {
if (e.isIntersecting && e.intersectionRatio > 0.35) {
vues[e.target.id] = true;
var a = document.querySelector('[data-lien="' + e.target.id + '"]');
if (a) { a.classList.add('bg-[#e6f4ea]'); a.querySelector('[data-coche]').textContent = '✓'; a.querySelector('[data-coche]').classList.add('bg-black', 'text-white'); }
}
});
maj();
}, { threshold: [0.35] });
document.querySelectorAll('[data-partie]').forEach(function (el) { io.observe(el); });
document.getElementById('debloquer').addEventListener('click', function () { force = true; maj(); });
setInterval(maj, 1000); maj();
})();
(function () {
var form = document.getElementById('form-lecture'), score = document.getElementById('score-lecture');
form.addEventListener('submit', function (e) {
e.preventDefault();
var bons = 0, total = 0;
form.querySelectorAll('[data-q]').forEach(function (q) {
total++;
var choix = q.querySelector('input:checked'), ok = choix && choix.value === q.dataset.ok, c = q.querySelector('[data-correction]');
if (ok) bons++;
c.hidden = false; c.className = 'mt-4 border border-[#dadce0] rounded-lg p-4 ' + (ok ? 'bg-[#e6f4ea]' : 'bg-[#FFD9E8]');
q.querySelector('[data-verdict]').textContent = ok ? 'Bonne réponse.' : (choix ? 'Pas tout à fait.' : 'Pas de réponse.');
q.querySelectorAll('label').forEach(function (l, i) { var b = String(i) === q.dataset.ok; l.classList.toggle('outline', b); l.classList.toggle('outline-4', b); l.classList.toggle('outline-black', b); });
});
score.hidden = false; score.textContent = bons + ' / ' + total;
document.getElementById('suite').hidden = false;
});
})();
(function () {
var cadre = document.getElementById('v-cadre'), cle = 'paillasse-video-' + location.pathname;
function montrer(u) {
var m = String(u).match(/(?:youtu\.be\/|v=|embed\/|shorts\/)([\w-]{11})/); if (!m) return false;
cadre.innerHTML = '<iframe class="h-full w-full" src="https://www.youtube-nocookie.com/embed/' + m[1] + '" title="Vidéo de contexte" allow="accelerometer; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
return true;
}
var s = localStorage.getItem(cle); if (s) montrer(s);
document.getElementById('v-form').addEventListener('submit', function (e) { e.preventDefault(); var u = document.getElementById('v-url').value; if (montrer(u)) localStorage.setItem(cle, u); else alert('Lien YouTube non reconnu.'); });
})();
</script>
@endsection
Reference in a new issue View git blame Copy permalink