/
shool
/
rabL
Обзор
Документация
Войти
/
shool
/
rabL
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
index.html
247 строк
17 KB
shool
Create: index.html
22 июл 2026, 18:32
Верифицирован
22 июл 2026, 18:32
a79cd6d
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Рабочий лист: URL и Протоколы</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Inter', sans-serif; } .handwritten { font-family: 'Courier New', Courier, monospace; } @media print { .no-print { display: none; } body { background: white; } .shadow-lg { box-shadow: none; border: 1px solid #ccc; } } </style> </head> <body class="bg-gray-50 text-gray-800 min-h-screen p-4 md:p-8"> <!-- Header / Controls --> <div class="max-w-4xl mx-auto mb-6 flex justify-between items-center no-print"> <h1 class="text-2xl font-bold text-indigo-700">Интерактивный рабочий лист</h1> <button onclick="window.print()" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg shadow transition flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" /></svg> Распечатать / PDF </button> </div> <div class="max-w-4xl mx-auto space-y-8"> <!-- Student Info --> <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 flex flex-wrap gap-4 items-end"> <div class="flex-1"> <label class="block text-sm font-semibold text-gray-500 mb-1">ФИО ученика</label> <input type="text" class="w-full border-b-2 border-indigo-200 focus:border-indigo-600 outline-none py-1 bg-transparent handwritten text-lg" placeholder="Иванов Иван"> </div> <div class="w-32"> <label class="block text-sm font-semibold text-gray-500 mb-1">Класс</label> <input type="text" class="w-full border-b-2 border-indigo-200 focus:border-indigo-600 outline-none py-1 bg-transparent handwritten text-lg" placeholder="7 А"> </div> <div class="w-32"> <label class="block text-sm font-semibold text-gray-500 mb-1">Дата</label> <input type="date" class="w-full border-b-2 border-indigo-200 focus:border-indigo-600 outline-none py-1 bg-transparent text-sm"> </div> </div> <!-- TASK 1 --> <div class="bg-white rounded-xl shadow-lg overflow-hidden border-l-8 border-blue-500"> <div class="p-6"> <div class="flex justify-between items-start mb-4"> <h2 class="text-xl font-bold text-gray-800 flex items-center gap-2"> <span class="bg-blue-100 text-blue-700 px-2 py-1 rounded text-sm">Задание №1</span> Определение протокола </h2> <span class="text-xs font-semibold text-gray-400 bg-gray-100 px-2 py-1 rounded">2 мин • За компьютером</span> </div> <p class="mb-4 text-gray-600">Откройте любой знакомый сайт (например, <code class="bg-gray-100 px-1 rounded">yandex.ru</code>). Посмотрите в адресную строку.</p> <div class="space-y-4"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">1. Запишите полный URL сайта:</label> <input type="text" id="task1-url" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none handwritten text-lg" placeholder="https://..."> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">2. Какой это протокол?</label> <select class="w-full p-2 border border-gray-300 rounded-lg bg-white"> <option value="">Выберите...</option> <option value="http">http</option> <option value="https">https</option> <option value="ftp">ftp</option> </select> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">3. Тип ресурса:</label> <div class="flex gap-4 mt-2"> <label class="flex items-center gap-2 cursor-pointer"> <input type="radio" name="t1-type" class="text-blue-600 focus:ring-blue-500"> <span>Веб-сайт (WWW)</span> </label> <label class="flex items-center gap-2 cursor-pointer"> <input type="radio" name="t1-type" class="text-blue-600 focus:ring-blue-500"> <span>Файловый архив (FTP)</span> </label> </div> </div> </div> </div> </div> </div> <!-- TASK 2 --> <div class="bg-white rounded-xl shadow-lg overflow-hidden border-l-8 border-green-500"> <div class="p-6"> <div class="flex justify-between items-start mb-4"> <h2 class="text-xl font-bold text-gray-800 flex items-center gap-2"> <span class="bg-green-100 text-green-700 px-2 py-1 rounded text-sm">Задание №2</span> Знакомство с FTP-сервером </h2> <span class="text-xs font-semibold text-gray-400 bg-gray-100 px-2 py-1 rounded">3 мин • За компьютером</span> </div> <div class="bg-green-50 p-4 rounded-lg mb-4 border border-green-100"> <p class="font-medium text-green-800">Перейдите по ссылке: <a href="ftp://ftp.ka9q.net/pub/" target="_blank" class="underline text-blue-600 hover:text-blue-800 break-all">ftp://ftp.ka9q.net/pub/</a></p> <p class="text-sm text-green-600 mt-1">(Если ссылка не работает, посмотрите на скриншот учителя)</p> </div> <div class="space-y-4"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Что вы видите в браузере?</label> <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 outline-none h-20" placeholder="Опишите: список файлов, папки, есть ли картинки..."></textarea> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div> <label class="block text-xs font-bold text-gray-500 uppercase">Полный адрес</label> <input type="text" class="w-full mt-1 p-2 border border-gray-300 rounded handwritten text-sm" value="ftp://ftp.ka9q.net/pub/"> </div> <div> <label class="block text-xs font-bold text-gray-500 uppercase">Протокол</label> <input type="text" class="w-full mt-1 p-2 border border-gray-300 rounded handwritten text-sm" placeholder="ftp"> </div> <div> <label class="block text-xs font-bold text-gray-500 uppercase">Домен</label> <input type="text" class="w-full mt-1 p-2 border border-gray-300 rounded handwritten text-sm" placeholder="ftp.ka9q.net"> </div> </div> <div class="flex flex-col md:flex-row gap-4 items-end"> <div class="flex-1"> <label class="block text-sm font-medium text-gray-700 mb-1">Найдите файл .zip или .txt. Имя файла:</label> <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 outline-none handwritten" placeholder="например, readme.txt"> </div> <div class="md:w-1/3"> <label class="block text-sm font-medium text-gray-700 mb-1">Это веб-сайт или архив?</label> <select class="w-full p-2 border border-gray-300 rounded-lg bg-white"> <option>Веб-сайт</option> <option>Файловый архив</option> </select> </div> </div> </div> </div> </div> <!-- TASK 3 --> <div class="bg-white rounded-xl shadow-lg overflow-hidden border-l-8 border-purple-500"> <div class="p-6"> <div class="flex justify-between items-start mb-4"> <h2 class="text-xl font-bold text-gray-800 flex items-center gap-2"> <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded text-sm">Задание №3</span> Конструирование URL </h2> <span class="text-xs font-semibold text-gray-400 bg-gray-100 px-2 py-1 rounded">На карточках</span> </div> <div class="mb-6"> <p class="text-sm text-gray-500 mb-2 uppercase tracking-wide font-bold">Даны фрагменты:</p> <div class="flex flex-wrap gap-3"> <div class="bg-gray-100 border-2 border-gray-300 rounded px-3 py-2 font-mono font-bold text-center w-20 shadow-sm">http</div> <div class="bg-gray-100 border-2 border-gray-300 rounded px-3 py-2 font-mono font-bold text-center w-20 shadow-sm">://</div> <div class="bg-gray-100 border-2 border-gray-300 rounded px-3 py-2 font-mono font-bold text-center w-20 shadow-sm">.org</div> <div class="bg-gray-100 border-2 border-gray-300 rounded px-3 py-2 font-mono font-bold text-center w-20 shadow-sm">/</div> <div class="bg-gray-100 border-2 border-gray-300 rounded px-3 py-2 font-mono font-bold text-center w-24 shadow-sm">ftp.net</div> <div class="bg-gray-100 border-2 border-gray-300 rounded px-3 py-2 font-mono font-bold text-center w-20 shadow-sm">txt</div> </div> </div> <div class="space-y-6"> <!-- Basic Level --> <div class="bg-purple-50 p-4 rounded-lg border border-purple-100"> <h3 class="font-bold text-purple-800 mb-3 flex items-center gap-2"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> Базовый уровень (Для всех) </h3> <div class="space-y-4"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">1. Составьте правильный адрес веб-сайта:</label> <div class="flex items-center gap-2"> <span class="font-mono text-gray-400">URL:</span> <input type="text" class="flex-1 p-2 border border-gray-300 rounded handwritten bg-white" placeholder="http://..."> </div> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">2. Адрес архива: доступ к файлу <b>ftp.net</b> на сервере <b>txt.org</b> по протоколу <b>http</b>:</label> <div class="flex items-center gap-2"> <span class="font-mono text-gray-400">URL:</span> <input type="text" id="task3-q2" class="flex-1 p-2 border border-gray-300 rounded handwritten bg-white" placeholder="Соберите адрес..."> </div> </div> </div> </div> <!-- Advanced Level --> <div class="relative group"> <div class="absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-600 rounded-lg blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div> <div class="relative bg-white p-4 rounded-lg border border-gray-200"> <h3 class="font-bold text-gray-800 mb-2 flex items-center gap-2"> <svg class="w-5 h-5 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg> Дополнительное задание (Для сильных) </h3> <p class="text-sm text-gray-600 mb-3">В чём ловушка во втором задании? Почему адрес <code>http://txt.org/ftp.net</code> — не настоящий FTP-архив?</p> <details class="cursor-pointer"> <summary class="text-indigo-600 font-medium text-sm hover:underline select-none">Показать подсказку / ответ</summary> <div class="mt-3 p-3 bg-gray-50 rounded text-sm text-gray-700 border-l-4 border-indigo-400"> <p><b>Ответ:</b> Протокол <code>http</code> означает, что мы обращаемся к веб-серверу. Даже если имя файла содержит "ftp", способ доступа (протокол) определяет тип соединения. Настоящий FTP-архив требует протокола <code>ftp://</code>.</p> </div> </details> </div> </div> </div> </div> </div> <!-- Cheat Sheet --> <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4 flex items-start gap-4"> <div class="bg-yellow-100 p-2 rounded-full text-yellow-600 shrink-0"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg> </div> <div> <h4 class="font-bold text-yellow-800 mb-1">Шпаргалка-алгоритм</h4> <ul class="text-sm text-yellow-700 space-y-1 list-disc list-inside"> <li><b>Протокол</b> — всё, что стоит до символов <code>://</code></li> <li><b>Домен</b> — всё, что находится между <code>://</code> и первым слэшем <code>/</code></li> <li><b>Файл/Путь</b> — всё, что идет после первого слэша <code>/</code></li> </ul> </div> </div> </div> <script> // Simple auto-fill helper for Task 3 based on logic if user gets stuck (optional interaction) const task3Input = document.getElementById('task3-q2'); task3Input.addEventListener('focus', function() { if(this.value === '') { this.placeholder = "Подсказка: протокол + :// + домен + / + файл"; } }); </script> </body> </html>