Paillasse/design/apercu-cours-ipv4.html

281 lines
43 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Adressage IPv4 et sous-réseaux · 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>
<section class="border-b border-[#e3e5e8] bg-[#e6f4ea]">
<div class="mx-auto max-w-7xl px-5 pb-14 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.html#sio" class="underline underline-offset-4">BTS SIO SISR</a><span>/</span><span>Bloc 2</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>
<div class="mt-8 flex flex-wrap gap-3 text-sm font-extrabold">
<span class="border border-[#dadce0] rounded-lg bg-white px-3 py-1">BTS SIO SISR · Bloc 2</span>
<span class="border border-[#dadce0] rounded-lg bg-white px-3 py-1">Aussi : BTS CIEL, BUT R&amp;T S1</span>
<span class="border border-[#dadce0] rounded-lg bg-black px-3 py-1 text-white">4 h</span>
</div>
</div>
</section>
<div class="mx-auto grid max-w-7xl gap-10 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-6 grid gap-3">
<li><a href="apercu-cours-ipv4-cm.html" class="flex items-center gap-3 border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 font-extrabold hover:bg-[#f8f9fa]"><span class="font-mono">1</span> CM · Lire</a></li>
<li><a href="#qcm" class="flex items-center gap-3 border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] px-4 py-3 font-extrabold"><span class="font-mono">2</span> QCM · Valider</a></li>
<li><a href="#td" class="flex items-center gap-3 border-4 border-dashed border-black bg-[#eef0fd] px-4 py-3 font-extrabold"><span class="font-mono">3</span> TD · optionnel</a></li>
<li><a href="#tp" class="flex items-center gap-3 border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] px-4 py-3 font-extrabold"><span class="font-mono">4</span> TP · Pratiquer</a></li>
<li><a href="#exam" class="flex items-center gap-3 border border-[#e3e5e8] rounded-2xl bg-black px-4 py-3 font-extrabold text-white hover:bg-[#ec3013]"><span class="font-mono">5</span> Examen</a></li>
</ol>
</nav>
<div class="grid gap-20 lg:col-span-9">
<section id="cm" class="scroll-mt-6" aria-labelledby="t-cm">
<h2 id="t-cm" class="text-5xl font-extrabold tracking-tight"><span class="font-mono text-2xl align-middle">1 · CM ·</span> Lire le cours</h2>
<a href="apercu-cours-ipv4-cm.html" class="mt-8 grid gap-6 border border-[#e3e5e8] rounded-2xl bg-white p-7 transition-transform md:grid-cols-[1fr_auto]">
<div>
<p class="text-3xl font-extrabold leading-tight">Adressage IPv4 et sous-réseaux · cours complet</p>
<p class="mt-3 text-lg font-semibold">8 parties illustrées : bits, masque, ET logique, diffusion, découpage, adresses privées. Chronométré, à lire en entier pour débloquer le QCM de lecture.</p>
</div>
<div class="grid content-start gap-2 text-center"><span class="border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] px-4 py-2 font-mono text-2xl font-semibold">⏱ Lecture chronométrée</span><span class="font-extrabold">Lire le CM →</span></div>
</a>
</section>
<section id="qcm" class="scroll-mt-6" aria-labelledby="t-qcm">
<div class="flex flex-wrap items-end justify-between gap-4">
<h2 id="t-qcm" class="text-5xl font-extrabold tracking-tight"><span class="font-mono text-2xl align-middle">2 · QCM ·</span> Valider les notions</h2>
<p class="font-semibold">5 questions · correction expliquée</p>
</div>
<form id="qcm-form" class="mt-8 grid gap-6">
<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 1</legend>
<p class="text-xl font-extrabold">Combien d’adresses d’hôtes utilisables dans un réseau /27 ?</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="q0" value="0" class="h-5 w-5 accent-black"><span class="font-mono">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="q0" value="1" class="h-5 w-5 accent-black"><span class="font-mono">30</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="q0" value="2" class="h-5 w-5 accent-black"><span class="font-mono">27</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="q0" value="3" class="h-5 w-5 accent-black"><span class="font-mono">62</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">Un /27 laisse 32 − 27 = 5 bits pour les hôtes, soit 2⁵ = 32 adresses. On retire l’adresse du réseau et celle de diffusion : il reste 30 hôtes.</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 2</legend>
<p class="text-xl font-extrabold">Quelle est l’adresse réseau de 10.0.3.200/22 ?</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="q1" value="0" class="h-5 w-5 accent-black"><span class="font-mono">10.0.3.0</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="q1" value="1" class="h-5 w-5 accent-black"><span class="font-mono">10.0.2.0</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="q1" value="2" class="h-5 w-5 accent-black"><span class="font-mono">10.0.0.0</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="q1" value="3" class="h-5 w-5 accent-black"><span class="font-mono">10.0.4.0</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">Le masque /22 vaut 255.255.252.0. Sur le 3ᵉ octet, 3 ET 252 = 0. L’adresse réseau est donc 10.0.0.0, et le réseau va jusqu’à 10.0.3.255.</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 3</legend>
<p class="text-xl font-extrabold">Quel masque correspond à /26 ?</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="q2" value="0" class="h-5 w-5 accent-black"><span class="font-mono">255.255.255.128</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="q2" value="1" class="h-5 w-5 accent-black"><span class="font-mono">255.255.255.192</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="q2" value="2" class="h-5 w-5 accent-black"><span class="font-mono">255.255.255.224</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="q2" value="3" class="h-5 w-5 accent-black"><span class="font-mono">255.255.255.240</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">26 bits = 24 bits (255.255.255) + 2 bits dans le dernier octet. 2 bits à 1 à gauche : 128 + 64 = 192.</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">192.168.1.130/25 et 192.168.1.100/25 sont-ils dans le même 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="q3" value="0" class="h-5 w-5 accent-black"><span class="font-mono">Oui</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="q3" value="1" class="h-5 w-5 accent-black"><span class="font-mono">Non</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">Avec /25, le dernier octet se coupe en deux blocs : 0 à 127 et 128 à 255. 100 est dans le premier, 130 dans le second. Il faut un routeur pour qu’ils communiquent.</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 5</legend>
<p class="text-xl font-extrabold">Quelle commande affiche les adresses IP sous Debian ?</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="q4" value="0" class="h-5 w-5 accent-black"><span class="font-mono">ipconfig</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="q4" value="1" class="h-5 w-5 accent-black"><span class="font-mono">ip addr</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="q4" value="2" class="h-5 w-5 accent-black"><span class="font-mono">ifconfig /all</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="q4" value="3" class="h-5 w-5 accent-black"><span class="font-mono">netstat -r</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">ip addr (ou ip a) fait partie d’iproute2, installé par défaut. ipconfig est une commande Windows, et ifconfig vient de net-tools, qui n’est plus installé par défaut.</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].5.5 active:shadow-none">Corriger mon QCM</button>
<button type="reset" class="inline-flex items-center gap-3 border border-[#e3e5e8] rounded-2xl bg-white px-5 py-3 font-extrabold transition-transform hover:bg-[#fef7e0] active:shadow-none">Recommencer</button>
<p id="qcm-score" class="border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] px-4 py-2 text-2xl font-extrabold" hidden></p>
</div>
</form>
</section>
<section id="td" class="scroll-mt-6" aria-labelledby="t-td">
<h2 id="t-td" class="text-5xl font-extrabold tracking-tight"><span class="font-mono text-2xl align-middle">3 · TD ·</span> S’exercer <span class="ml-2 inline-block border border-[#dadce0] rounded-lg bg-[#eef0fd] px-2 align-middle text-base">optionnel</span></h2>
<ol class="mt-8 grid gap-6">
<li class="border border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-6">
<p class="font-mono text-sm font-semibold">Exercice 1</p>
<p class="mt-2 text-xl font-extrabold">Pour 172.16.5.130/25, donnez l’adresse réseau, la diffusion et le nombre d’hôtes.</p>
<details class="mt-4 border border-[#dadce0] rounded-lg bg-white">
<summary class="cursor-pointer px-4 py-2 font-extrabold">Voir la correction expliquée</summary>
<p class="border-t border-[#e3e5e8] px-4 py-3 font-medium">Un /25 coupe le dernier octet en blocs de 128. 130 est dans le bloc 128–255. Réseau : 172.16.5.128. Diffusion : 172.16.5.255. Hôtes : 2⁷ − 2 = 126.</p>
</details>
</li>
<li class="border border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-6 md:ml-10">
<p class="font-mono text-sm font-semibold">Exercice 2</p>
<p class="mt-2 text-xl font-extrabold">Découpez 192.168.1.0/24 en 4 sous-réseaux de même taille.</p>
<details class="mt-4 border border-[#dadce0] rounded-lg bg-white">
<summary class="cursor-pointer px-4 py-2 font-extrabold">Voir la correction expliquée</summary>
<p class="border-t border-[#e3e5e8] px-4 py-3 font-medium">4 sous-réseaux = 2 bits empruntés, donc /26. Sous-réseaux : 192.168.1.0, .64, .128 et .192, avec 62 hôtes chacun.</p>
</details>
</li>
<li class="border border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-6">
<p class="font-mono text-sm font-semibold">Exercice 3</p>
<p class="mt-2 text-xl font-extrabold">Le service comptabilité a 50 postes. Quel est le plus petit sous-réseau qui convient ?</p>
<details class="mt-4 border border-[#dadce0] rounded-lg bg-white">
<summary class="cursor-pointer px-4 py-2 font-extrabold">Voir la correction expliquée</summary>
<p class="border-t border-[#e3e5e8] px-4 py-3 font-medium">Il faut 2ʰ − 2 ≥ 50. Avec h = 6 : 64 − 2 = 62. On garde 6 bits d’hôte, soit un /26 (255.255.255.192). Un /27 ne donnerait que 30 hôtes.</p>
</details>
</li>
</ol>
</section>
<section id="tp" class="scroll-mt-6" aria-labelledby="t-tp">
<h2 id="t-tp" class="text-5xl font-extrabold tracking-tight"><span class="font-mono text-2xl align-middle">4 · TP ·</span> Pratiquer sur VM</h2>
<div class="mt-8 grid gap-8 md:grid-cols-2">
<div class="border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] p-6">
<h3 class="text-2xl font-extrabold">Deux VM, un routeur</h3>
<ol class="mt-4 grid gap-2 font-semibold">
<li>1. Placez deux VM dans 192.168.10.0/26.</li>
<li>2. Vérifiez qu’elles se joignent avec ping.</li>
<li>3. Passez la seconde en 192.168.10.70/26.</li>
<li>4. Constatez l’échec, puis ajoutez une route.</li>
</ol>
<p class="mt-4 font-mono text-sm font-semibold">4 étapes vérifiées automatiquement · 45 min</p>
<a href="apercu-lab-essai.html" 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].5.5 active:shadow-none mt-6">Lancer le TP <span class="font-mono" aria-hidden="true">→</span></a>
</div>
<div class="border border-[#e3e5e8] rounded-2xl bg-[#13233A] p-5 font-mono text-sm text-white">
<p><span class="text-[#7CF2C0]">eleve@vm1</span>:~$ sudo ip addr add 192.168.10.10/26 dev ens3</p>
<p><span class="text-[#7CF2C0]">eleve@vm1</span>:~$ ip -br addr</p>
<p>ens3 UP 192.168.10.10/26</p>
<p><span class="text-[#7CF2C0]">eleve@vm1</span>:~$ ping -c 1 192.168.10.11</p>
<p>1 packets transmitted, 1 received</p>
<p class="mt-2 text-[#FFD23F]">✓ Étape 2 validée</p>
</div>
</div>
</section>
<section id="exam" class="scroll-mt-6" aria-labelledby="t-exam">
<h2 id="t-exam" class="text-5xl font-extrabold tracking-tight"><span class="font-mono text-2xl align-middle">5 · EXAMEN ·</span> Quand le prof le décide</h2>
<div class="mt-8 grid gap-6 border border-[#e3e5e8] rounded-2xl bg-black p-7 text-white md:grid-cols-[1fr_auto]">
<p class="text-xl font-bold">Le prof compose son sujet dans la banque de questions, le programme pour la classe, et suit l’épreuve en direct : sorties d’onglet, copier-coller bloqué, remise automatique.</p>
<div class="grid content-start gap-3"><a href="apercu-examen.html" class="border-4 border-white bg-[#ec3013] px-5 py-3 font-extrabold">Voir le mode examen</a><a href="apercu-banque.html" class="border-4 border-white bg-white px-5 py-3 font-extrabold text-black hover:bg-[#fef7e0]">Banque de sujets (profs</a></div>
</div>
</section>
</div>
</div>
<script>
(function () {
var form = document.getElementById('qcm-form');
var score = document.getElementById('qcm-score');
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');
var ok = choix && choix.value === q.dataset.ok;
if (ok) bons++;
var c = q.querySelector('[data-correction]');
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) {
l.classList.toggle('outline', String(i) === q.dataset.ok);
l.classList.toggle('outline-4', String(i) === q.dataset.ok);
l.classList.toggle('outline-black', String(i) === q.dataset.ok);
});
});
score.hidden = false;
score.textContent = bons + ' / ' + total;
});
form.addEventListener('reset', function () {
form.querySelectorAll('[data-correction]').forEach(function (c) { c.hidden = true; });
form.querySelectorAll('label').forEach(function (l) { l.classList.remove('outline', 'outline-4', 'outline-black'); });
score.hidden = true;
});
})();
</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>