2026-10-08 02:01:58 +02:00
@ extends ( 'layouts.vitrine' )
@ section ( 'titre' , 'CM · Adressage IPv4' )
@ section ( 'contenu' )
2026-10-09 21:07:25 +02:00
@ include ( 'partials.apercu' )
2026-10-08 02:01:58 +02:00
< 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’ " 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’ 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’ 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’ </ 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’ adresse postale , un paquet a besoin d’ 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’ </ 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’ 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’ 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’ 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’ </ span ></ figcaption >
</ figure >
< p > Dans le dernier octet , les 2 premiers bits valent 1 : 128 + 64 = 192. D’ 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’ réseau : le ET logique </ h2 >
< p > Pour trouver le réseau d’ adresse , on fait un < strong > ET logique </ strong > bit à bit entre l’ 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’ telle quelle . L’ 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’ </ h2 >
< p > L’ de < strong > diffusion </ strong > ( broadcast ) met tous les bits d’ à 1. Un paquet envoyé à cette adresse arrive à toutes les machines du réseau .</ p >
< p > Ici , les 6 bits d’ à 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’ </ 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’ 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’ . 77 tombe dans le 2 ᵉ bloc .</ figcaption >
</ figure >
< p > Astuce : la taille d’ 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’ quelle adresse » ou « pas encore d’ » </ 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’ à 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’ </ 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’ 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’ de l’ 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’ </ 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’ , 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’ 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’ 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’ 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’ .</ 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
