300 lines
62 KiB
HTML
300 lines
62 KiB
HTML
|
|
<!DOCTYPE html>
|
|||
|
|
<html lang="fr">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
<title>CM · Adressage IPv4 · Syllabus</title>
|
|||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|||
|
|
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
|
|||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|||
|
|
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
|
|||
|
|
<style>
|
|||
|
|
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
|
|||
|
|
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
|
|||
|
|
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
|
|||
|
|
.flotte { animation: flotte 6s ease-in-out infinite; }
|
|||
|
|
@keyframes clignote { 50% { opacity: 0; } }
|
|||
|
|
.curseur { animation: clignote 1s steps(1) infinite; }
|
|||
|
|
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
|
|||
|
|
@media print { header, footer { display: none !important; } }
|
|||
|
|
</style>
|
|||
|
|
<link rel="stylesheet" href="css/syllabus-theme.css">
|
|||
|
|
</head>
|
|||
|
|
<body class="bg-white font-display text-black antialiased">
|
|||
|
|
|
|||
|
|
<header style="position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid #e3e5e8">
|
|||
|
|
<nav aria-label="Navigation principale" style="position:relative;max-width:1200px;margin:0 auto;padding:0 20px;min-height:64px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 40px">
|
|||
|
|
<a href="Apercu%20accueil%20Blade.html" aria-label="Syllabus, accueil" style="display:flex;align-items:center;gap:0;text-decoration:none"><img src="images/logo-syllabus-icone.png" alt="" style="height:32px;width:auto;display:block"><span style="font-family:Mulish,system-ui,sans-serif;font-weight:800;font-size:19px;color:#111827;letter-spacing:-0.01em;margin-left:-14px;position:relative">Syllabus</span></a>
|
|||
|
|
<ul style="margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;flex:1;line-height:1.5"><li><details class="group"><summary style="cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;height:36px;margin:-6px -12px;padding:0 12px;border-radius:999px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220" class="hover:bg-[#f1f3f4] group-open:bg-[#e8f0fe] group-open:text-[#0b57d0] [&::-webkit-details-marker]:hidden">Fonctionnalités<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" class="transition-transform duration-200 group-open:rotate-180" style="flex:none;opacity:.7"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
|
|||
|
|
<div style="position:absolute;left:20px;right:20px;top:100%;margin-top:4px;z-index:50;max-width:1160px;margin-left:auto;margin-right:auto;box-sizing:border-box;max-height:calc(100vh - 90px);overflow:auto;border-radius:20px;background:#fff;border:1px solid #e3e5e8;box-shadow:0 24px 48px -16px rgba(15,23,42,.22)">
|
|||
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 min-[1100px]:grid-cols-5 [&>div:last-child]:col-span-2 min-[1100px]:[&>div:last-child]:col-span-1" style="gap:1px;background:#e3e5e8"><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#0b57d0"></span>Piloter la classe</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">En direct et au quotidien</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=cockpit" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Tableau de bord prof</a></li><li><a href="apercu-ressource.html?outil=visio" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Visio de classe</a></li><li><a href="apercu-ressource.html?outil=espace-eleve" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Espace élève</a></li><li><a href="apercu-ressource.html?outil=fiche-eleve" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Fiche élève</a></li><li><a href="apercu-ressource.html?outil=messagerie" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Messagerie</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#137333"></span>Apprendre</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Cours, TP et code</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=cours" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Cours gratuits</a></li><li><a href="apercu-ressource.html?outil=labs" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">TP sur machine Linux</a></li><li><a href="apercu-ressource.html?outil=lab-web" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Lab web</a></li><li><a href="apercu-ressource.html?outil=ide" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Éditeur de code en ligne</a></li><li><a href="apercu-ressource.html?outil=maison" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Ressources à la maison</a></li></ul></div><div style="padding:22px 20px 20px;min-w
|
|||
|
|
<div style="position:sticky;bottom:0;padding:14px 24px;border-top:1px solid #e3e5e8;background:#f8f9fa;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px"><span style="font-size:14px;font-weight:500;color:#5f6368">24 outils, chacun avec sa présentation et sa démo</span><a href="apercu-fonctionnalites.html" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">Voir toutes les fonctionnalités →</a></div>
|
|||
|
|
</div></details></li><li><a href="apercu-cours.html" style="display:inline-flex;align-items:center;height:24px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0] aria-[current=page]:text-[#0b57d0]">Cours</a></li><li><a href="apercu-tarifs.html" style="display:inline-flex;align-items:center;height:24px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0] aria-[current=page]:text-[#0b57d0]">Tarifs</a></li></ul>
|
|||
|
|
<div style="display:flex;align-items:center;gap:20px">
|
|||
|
|
<a href="apercu-connexion.html" style="font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0]">Se connecter</a>
|
|||
|
|
<a href="apercu-inscription.html" style="display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;background:#0b57d0;color:#fff;font-size:15px;font-weight:700;text-decoration:none">Créer une classe</a>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<main>
|
|||
|
|
<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="apercu-cours.html" class="underline underline-offset-4">Cours</a><span>/</span><a href="apercu-cours-ipv4.html" 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
|
|||
|
|
<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]
|
|||
|
|
<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="apercu-cours-ipv4.html#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="apercu-lab-essai.html" 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="apercu-examen.html" 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>
|
|||
|
|
<a href="apercu-td-imprimable.html" onclick="if(this.dataset.p){event.preventDefault();window.print()}" data-p="1" class="fixed bottom-5 right-5 z-40 flex items-center gap-3 border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] px-4 py-2 font-extrabold print:hidden"><svg viewBox="0 0 40 48" class="h-9 w-7 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>Télécharger ce cours<span class="block font-mono text-xs font-semibold">PDF gratuit</span></span></a>
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<footer style="background:#f8f9fa;border-top:1px solid #e3e5e8;font-family:Mulish,system-ui,sans-serif">
|
|||
|
|
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
|
|||
|
|
<div>
|
|||
|
|
<p style="margin:0;font-size:18px;font-weight:800;color:#0b1220">Syllabus</p>
|
|||
|
|
<p style="margin:10px 0 0;font-size:14px;line-height:1.6;font-weight:500;color:#5f6368">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
|
|||
|
|
</div>
|
|||
|
|
<nav aria-label="Produit"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Produit</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-fonctionnalites.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Fonctionnalités</a></li><li><a href="apercu-cours.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Cours gratuits</a></li><li><a href="apercu-lab-essai.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Essayer un lab</a></li><li><a href="apercu-tarifs.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Tarifs</a></li></ul></nav><nav aria-label="Outils"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Outils</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-ressource.html?outil=cockpit" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Tableau de bord prof</a></li><li><a href="apercu-ressource.html?outil=labs" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">TP sur machine Linux</a></li><li><a href="apercu-ressource.html?outil=ide" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Éditeur de code</a></li><li><a href="apercu-ressource.html?outil=quiz" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Quiz flash</a></li><li><a href="apercu-ressource.html?outil=sujet" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Examens</a></li><li><a href="apercu-ressource.html?outil=bibliotheque" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Bibliothèque du prof</a></li></ul></nav><nav aria-label="Établissements"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Établissements</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-etablissements.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Équiper une classe</a></li><li><a href="apercu-ressource.html?outil=vie-scolaire" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Vie scolaire</a></li><li><a href="apercu-ressource.html?outil=espace-etablissement" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Licences et factures</a></li><li><a href="apercu-ressource.html?outil=integration" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Intégration et sécurité</a></li></ul></nav><nav aria-label="Syllabus"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Syllabus</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-aide.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Aide et tutoriels</a></li><li><a href="apercu-legal.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Mentions légales et RGPD</a></li></ul></nav>
|
|||
|
|
<p style="margin:0;align-self:start;font-size:14px;font-weight:600;color:#5f6368"><span style="color:#137333">●</span> Tous les services fonctionnent</p>
|
|||
|
|
</div>
|
|||
|
|
<div style="border-top:1px solid #e3e5e8"><ul aria-label="Engagements" style="max-width:1200px;margin:0 auto;padding:24px 20px;list-style:none;display:flex;flex-wrap:wrap;gap:12px 40px"><li style="font-size:14px;font-weight:700;color:#0b1220">Hébergé en France <span style="font-weight:500;color:#5f6368">· Paris</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">RGPD <span style="font-weight:500;color:#5f6368">· données minimisées</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">20 cursus <span style="font-weight:500;color:#5f6368">· du lycée au master</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">0 € <span style="font-weight:500;color:#5f6368">· sans carte bancaire</span></li></ul>
|
|||
|
|
</div>
|
|||
|
|
<div style="border-top:1px solid #e3e5e8">
|
|||
|
|
<div class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><nav aria-label="Informations légales"><ul class="flex flex-wrap justify-center gap-x-5 gap-y-1" style="margin:0;padding:0;list-style:none;font-size:14px;font-weight:500"><li><a href="apercu-legal.html#mentions" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Mentions légales</a></li><li><a href="apercu-legal.html#cgu" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">CGU</a></li><li><a href="apercu-legal.html#confidentialite" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Confidentialité et RGPD</a></li><li><a href="apercu-legal.html#cookies" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Cookies</a></li><li><a href="apercu-legal.html#sous-traitance" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Sous-traitance</a></li></ul></nav></div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|