tag:blogger.com,1999:blog-1029032423237644795Wed, 15 Apr 2026 10:53:50 +0000apa-adanya-ajahttps://apa-adanya-aja.blogspot.com/noreply@blogger.com (Unknown)Blogger1125en-usnonoreply@blogger.comtag:blogger.com,1999:blog-1029032423237644795.post-220127536955358142Mon, 18 Aug 2025 08:54:00 +00002025-08-18T01:54:55.249-07:00a<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sistem Bilangan Komputer</title> <script src="https://cdn.tailwindcss.com"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; } .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .card-hover { transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); } .number-display { font-family: 'Courier New', monospace; } </style> </head> <body class="bg-gray-50"> <!-- Header --> <div class="gradient-bg text-white py-16"> <div class="container mx-auto px-6 text-center"> <h1 class="text-4xl md:text-5xl font-bold mb-4">Sistem Bilangan Komputer</h1> <p class="text-xl opacity-90 max-w-3xl mx-auto">Pelajari dan konversi antara sistem bilangan Desimal, Biner, Oktal, dan Heksadesimal</p> </div> </div> <!-- Converter Tool --> <div class="container mx-auto px-6 -mt-8 mb-12"> <div class="bg-white rounded-2xl shadow-xl p-8"> <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Konverter Sistem Bilangan</h2> <div class="grid md:grid-cols-2 gap-8"> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Masukkan Angka:</label> <input type="number" id="inputNumber" placeholder="Contoh: 255" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-lg"> </div> <div class="flex items-end"> <button onclick="convertNumber()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-200"> Konversi </button> </div> </div> <div id="results" class="mt-8 grid md:grid-cols-2 lg:grid-cols-4 gap-4 hidden"> <div class="bg-green-50 border border-green-200 rounded-lg p-4"> <h3 class="font-semibold text-green-800 mb-2">Desimal (Base 10)</h3> <div id="decimal" class="number-display text-2xl font-bold text-green-600"></div> </div> <div class="bg-blue-50 border border-blue-200 rounded-lg p-4"> <h3 class="font-semibold text-blue-800 mb-2">Biner (Base 2)</h3> <div id="binary" class="number-display text-lg font-bold text-blue-600 break-all"></div> </div> <div class="bg-purple-50 border border-purple-200 rounded-lg p-4"> <h3 class="font-semibold text-purple-800 mb-2">Oktal (Base 8)</h3> <div id="octal" class="number-display text-2xl font-bold text-purple-600"></div> </div> <div class="bg-orange-50 border border-orange-200 rounded-lg p-4"> <h3 class="font-semibold text-orange-800 mb-2">Heksadesimal (Base 16)</h3> <div id="hexadecimal" class="number-display text-2xl font-bold text-orange-600"></div> </div> </div> </div> </div> <!-- Number Systems Explanation --> <div class="container mx-auto px-6 mb-12"> <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Penjelasan Sistem Bilangan</h2> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> <!-- Decimal --> <div class="card-hover bg-white rounded-xl shadow-lg p-6 border-t-4 border-green-500"> <div class="text-center mb-4"> <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3"> <span class="text-2xl font-bold text-green-600">10</span> </div> <h3 class="text-xl font-bold text-gray-800">Desimal</h3> <p class="text-sm text-gray-600">Base 10</p> </div> <div class="space-y-3"> <p class="text-sm text-gray-700"><strong>Digit:</strong> 0, 1, 2, 3, 4, 5, 6, 7, 8, 9</p> <p class="text-sm text-gray-700"><strong>Contoh:</strong> 255</p> <p class="text-xs text-gray-600">Sistem bilangan yang paling umum digunakan dalam kehidupan sehari-hari</p> </div> </div> <!-- Binary --> <div class="card-hover bg-white rounded-xl shadow-lg p-6 border-t-4 border-blue-500"> <div class="text-center mb-4"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3"> <span class="text-2xl font-bold text-blue-600">2</span> </div> <h3 class="text-xl font-bold text-gray-800">Biner</h3> <p class="text-sm text-gray-600">Base 2</p> </div> <div class="space-y-3"> <p class="text-sm text-gray-700"><strong>Digit:</strong> 0, 1</p> <p class="text-sm text-gray-700"><strong>Contoh:</strong> 11111111</p> <p class="text-xs text-gray-600">Bahasa dasar komputer, menggunakan hanya 0 dan 1</p> </div> </div> <!-- Octal --> <div class="card-hover bg-white rounded-xl shadow-lg p-6 border-t-4 border-purple-500"> <div class="text-center mb-4"> <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3"> <span class="text-2xl font-bold text-purple-600">8</span> </div> <h3 class="text-xl font-bold text-gray-800">Oktal</h3> <p class="text-sm text-gray-600">Base 8</p> </div> <div class="space-y-3"> <p class="text-sm text-gray-700"><strong>Digit:</strong> 0, 1, 2, 3, 4, 5, 6, 7</p> <p class="text-sm text-gray-700"><strong>Contoh:</strong> 377</p> <p class="text-xs text-gray-600">Sering digunakan dalam sistem Unix untuk permission file</p> </div> </div> <!-- Hexadecimal --> <div class="card-hover bg-white rounded-xl shadow-lg p-6 border-t-4 border-orange-500"> <div class="text-center mb-4"> <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-3"> <span class="text-xl font-bold text-orange-600">16</span> </div> <h3 class="text-xl font-bold text-gray-800">Heksadesimal</h3> <p class="text-sm text-gray-600">Base 16</p> </div> <div class="space-y-3"> <p class="text-sm text-gray-700"><strong>Digit:</strong> 0-9, A-F</p> <p class="text-sm text-gray-700"><strong>Contoh:</strong> FF</p> <p class="text-xs text-gray-600">Digunakan untuk warna web, alamat memori, dan debugging</p> </div> </div> </div> </div> <!-- Conversion Examples --> <div class="container mx-auto px-6 mb-12"> <div class="bg-white rounded-2xl shadow-xl p-8"> <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Contoh Konversi</h2> <div class="overflow-x-auto"> <table class="w-full table-auto"> <thead> <tr class="bg-gray-50"> <th class="px-4 py-3 text-left font-semibold text-gray-700">Desimal</th> <th class="px-4 py-3 text-left font-semibold text-gray-700">Biner</th> <th class="px-4 py-3 text-left font-semibold text-gray-700">Oktal</th> <th class="px-4 py-3 text-left font-semibold text-gray-700">Heksadesimal</th> </tr> </thead> <tbody class="number-display"> <tr class="border-b border-gray-200"> <td class="px-4 py-3">0</td> <td class="px-4 py-3">0</td> <td class="px-4 py-3">0</td> <td class="px-4 py-3">0</td> </tr> <tr class="border-b border-gray-200 bg-gray-25"> <td class="px-4 py-3">8</td> <td class="px-4 py-3">1000</td> <td class="px-4 py-3">10</td> <td class="px-4 py-3">8</td> </tr> <tr class="border-b border-gray-200"> <td class="px-4 py-3">16</td> <td class="px-4 py-3">10000</td> <td class="px-4 py-3">20</td> <td class="px-4 py-3">10</td> </tr> <tr class="border-b border-gray-200 bg-gray-25"> <td class="px-4 py-3">255</td> <td class="px-4 py-3">11111111</td> <td class="px-4 py-3">377</td> <td class="px-4 py-3">FF</td> </tr> <tr class="border-b border-gray-200"> <td class="px-4 py-3">1024</td> <td class="px-4 py-3">10000000000</td> <td class="px-4 py-3">2000</td> <td class="px-4 py-3">400</td> </tr> </tbody> </table> </div> </div> </div> <!-- Tips Section --> <div class="container mx-auto px-6 mb-12"> <div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-2xl p-8"> <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Tips Mengingat Sistem Bilangan</h2> <div class="grid md:grid-cols-2 gap-6"> <div class="space-y-4"> <div class="flex items-start space-x-3"> <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0 mt-1"> <span class="text-white text-sm font-bold">💡</span> </div> <div> <h3 class="font-semibold text-gray-800">Biner (Base 2)</h3> <p class="text-sm text-gray-600">Setiap posisi mewakili pangkat 2: 2⁰, 2¹, 2², 2³, dst.</p> </div> </div> <div class="flex items-start space-x-3"> <div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center flex-shrink-0 mt-1"> <span class="text-white text-sm font-bold">🎯</span> </div> <div> <h3 class="font-semibold text-gray-800">Oktal (Base 8)</h3> <p class="text-sm text-gray-600">Setiap posisi mewakili pangkat 8: 8⁰, 8¹, 8², dst.</p> </div> </div> </div> <div class="space-y-4"> <div class="flex items-start space-x-3"> <div class="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center flex-shrink-0 mt-1"> <span class="text-white text-sm font-bold">🔥</span> </div> <div> <h3 class="font-semibold text-gray-800">Heksadesimal (Base 16)</h3> <p class="text-sm text-gray-600">A=10, B=11, C=12, D=13, E=14, F=15</p> </div> </div> <div class="flex items-start space-x-3"> <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0 mt-1"> <span class="text-white text-sm font-bold">✨</span> </div> <div> <h3 class="font-semibold text-gray-800">Praktik</h3> <p class="text-sm text-gray-600">Gunakan konverter di atas untuk berlatih dengan angka berbeda!</p> </div> </div> </div> </div> </div> </div> <script> function convertNumber() { const input = document.getElementById('inputNumber').value; const number = parseInt(input); if (isNaN(number) || number < 0) { alert('Mohon masukkan angka positif yang valid'); return; } // Show results document.getElementById('results').classList.remove('hidden'); // Convert to different bases document.getElementById('decimal').textContent = number.toString(10); document.getElementById('binary').textContent = number.toString(2); document.getElementById('octal').textContent = number.toString(8); document.getElementById('hexadecimal').textContent = number.toString(16).toUpperCase(); } // Allow Enter key to trigger conversion document.getElementById('inputNumber').addEventListener('keypress', function(e) { if (e.key === 'Enter') { convertNumber(); } }); // Auto-convert on input change (with debounce) let timeout; document.getElementById('inputNumber').addEventListener('input', function() { clearTimeout(timeout); timeout = setTimeout(() => { if (this.value) { convertNumber(); } }, 500); }); </script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'97102c8a403ca458',t:'MTc1NTUwNzEzNS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html> https://apa-adanya-aja.blogspot.com/2025/08/a.htmlnoreply@blogger.com (Unknown)0