|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Как работают сайты | Web Wizards Workshop</title> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#3b82f6', |
|
|
secondary: '#10b981', |
|
|
dark: '#1e293b', |
|
|
light: '#f8fafc' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="font-roboto bg-light text-dark"> |
|
|
|
|
|
<header class="bg-primary text-white py-8 px-4 md:px-8 shadow-lg"> |
|
|
<div class="container mx-auto"> |
|
|
<h1 class="text-3xl md:text-4xl font-bold mb-2">Как работают сайты</h1> |
|
|
<p class="text-lg opacity-90 max-w-2xl">Простое объяснение для начинающих. Узнайте, из чего состоят сайты и как они появляются в вашем браузере.</p> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 md:px-8 py-12"> |
|
|
|
|
|
<section class="mb-20" id="what-makes-website"> |
|
|
<h2 class="text-2xl md:text-3xl font-bold mb-8 text-center">Из чего состоит сайт</h2> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-4xl mx-auto"> |
|
|
|
|
|
<div class="flex border-b"> |
|
|
<button class="tab-btn active px-6 py-3 font-medium" data-tab="html">HTML</button> |
|
|
<button class="tab-btn px-6 py-3 font-medium" data-tab="css">CSS</button> |
|
|
<button class="tab-btn px-6 py-3 font-medium" data-tab="js">JavaScript</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-6 md:p-8"> |
|
|
|
|
|
<div class="tab-content active" id="html-tab"> |
|
|
<div class="flex flex-col md:flex-row gap-8 items-center"> |
|
|
<div class="md:w-1/2"> |
|
|
<h3 class="text-xl font-bold mb-4 text-primary">HTML - структура сайта</h3> |
|
|
<p class="mb-4">HTML (HyperText Markup Language) определяет структуру и содержание веб-страницы. Это как скелет вашего сайта.</p> |
|
|
<div class="bg-gray-100 p-4 rounded-lg mb-4"> |
|
|
<pre class="text-sm"><code><!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Мой сайт</title> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Привет мир!</h1> |
|
|
<p>Это мой первый сайт.</p> |
|
|
</body> |
|
|
</html></code></pre> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 bg-gray-100 p-4 rounded-lg"> |
|
|
<div class="border border-gray-300 rounded p-2 bg-white"> |
|
|
<h1 class="text-2xl font-bold mb-2">Привет мир!</h1> |
|
|
<p class="text-gray-700">Это мой первый сайт.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tab-content hidden" id="css-tab"> |
|
|
<div class="flex flex-col md:flex-row gap-8 items-center"> |
|
|
<div class="md:w-1/2"> |
|
|
<h3 class="text-xl font-bold mb-4 text-primary">CSS - стиль сайта</h3> |
|
|
<p class="mb-4">CSS (Cascading Style Sheets) отвечает за внешний вид страницы: цвета, шрифты, расположение элементов.</p> |
|
|
<div class="bg-gray-100 p-4 rounded-lg mb-4"> |
|
|
<pre class="text-sm"><code>body { |
|
|
font-family: Arial; |
|
|
background: #f5f5f5; |
|
|
color: #333; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
color: blue; |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.button { |
|
|
background: green; |
|
|
color: white; |
|
|
padding: 10px 20px; |
|
|
}</code></pre> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 bg-gray-100 p-4 rounded-lg"> |
|
|
<div class="border border-gray-300 rounded p-2 bg-white" style="font-family: Arial; background: #f5f5f5; color: #333;"> |
|
|
<h1 style="color: blue; font-size: 2rem;">Привет мир!</h1> |
|
|
<p class="text-gray-700">Это мой первый сайт.</p> |
|
|
<button style="background: green; color: white; padding: 10px 20px; border: none; border-radius: 4px;">Кнопка</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tab-content hidden" id="js-tab"> |
|
|
<div class="flex flex-col md:flex-row gap-8 items-center"> |
|
|
<div class="md:w-1/2"> |
|
|
<h3 class="text-xl font-bold mb-4 text-primary">JavaScript - интерактивность</h3> |
|
|
<p class="mb-4">JavaScript делает сайт интерактивным. С его помощью можно реагировать на действия пользователя, обновлять контент без перезагрузки страницы и многое другое.</p> |
|
|
<div class="bg-gray-100 p-4 rounded-lg mb-4"> |
|
|
<pre class="text-sm"><code>// Пример простого счетчика |
|
|
let count = 0; |
|
|
|
|
|
function updateCounter() { |
|
|
document.getElementById('counter') |
|
|
.innerText = count; |
|
|
} |
|
|
|
|
|
function increment() { |
|
|
count++; |
|
|
updateCounter(); |
|
|
}</code></pre> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 bg-gray-100 p-4 rounded-lg"> |
|
|
<div class="border border-gray-300 rounded p-2 bg-white"> |
|
|
<h1 class="text-2xl font-bold mb-2">Счётчик</h1> |
|
|
<p class="text-gray-700">Текущее значение: <span id="demo-counter">0</span></p> |
|
|
<button id="demo-counter-btn" class="bg-blue-500 text-white px-4 py-2 rounded">+1</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-20" id="how-websites-work"> |
|
|
<h2 class="text-2xl md:text-3xl font-bold mb-8 text-center">Как сайт появляется на экране</h2> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 md:p-8 max-w-4xl mx-auto"> |
|
|
<div class="process-diagram mb-8"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center relative"> |
|
|
|
|
|
<div class="step flex flex-col items-center mb-8 md:mb-0" data-step="1"> |
|
|
<div class="step-circle bg-primary text-white rounded-full w-16 h-16 flex items-center justify-center mb-3 shadow-md"> |
|
|
<span class="text-2xl font-bold">1</span> |
|
|
</div> |
|
|
<div class="text-center max-w-xs"> |
|
|
<h3 class="font-bold mb-1">Пользователь вводит адрес</h3> |
|
|
<p class="text-sm opacity-80">Вы вводите URL (например, google.com) в адресную строку браузера</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="step-arrow hidden md:block"> |
|
|
<i data-feather="arrow-right" class="text-gray-400 w-8 h-8"></i> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="step flex flex-col items-center mb-8 md:mb-0" data-step="2"> |
|
|
<div class="step-circle bg-gray-300 text-dark rounded-full w-16 h-16 flex items-center justify-center mb-3 shadow-md"> |
|
|
<span class="text-2xl font-bold">2</span> |
|
|
</div> |
|
|
<div class="text-center max-w-xs"> |
|
|
<h3 class="font-bold mb-1">Браузер отправляет запрос</h3> |
|
|
<p class="text-sm opacity-80">Браузер находит сервер и запрашивает нужную страницу</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="step-arrow hidden md:block"> |
|
|
<i data-feather="arrow-right" class="text-gray-400 w-8 h-8"></i> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="step flex flex-col items-center mb-8 md:mb-0" data-step="3"> |
|
|
<div class="step-circle bg-gray-300 text-dark rounded-full w-16 h-16 flex items-center justify-center mb-3 shadow-md"> |
|
|
<span class="text-2xl font-bold">3</span> |
|
|
</div> |
|
|
<div class="text-center max-w-xs"> |
|
|
<h3 class="font-bold mb-1">Сервер находит файлы</h3> |
|
|
<p class="text-sm opacity-80">Сервер обрабатывает запрос и ищет нужные HTML, CSS и JS файлы</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="step-arrow hidden md:block"> |
|
|
<i data-feather="arrow-right" class="text-gray-400 w-8 h-8"></i> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="step flex flex-col items-center" data-step="4"> |
|
|
<div class="step-circle bg-gray-300 text-dark rounded-full w-16 h-16 flex items-center justify-center mb-3 shadow-md"> |
|
|
<span class="text-2xl font-bold">4</span> |
|
|
</div> |
|
|
<div class="text-center max-w-xs"> |
|
|
<h3 class="font-bold mb-1">Браузер показывает страницу</h3> |
|
|
<p class="text-sm opacity-80">Браузер получает файлы, обрабатывает их и отображает готовую страницу</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<button id="run-process" class="bg-secondary hover:bg-green-600 text-white font-medium py-3 px-6 rounded-lg shadow-md transition-all"> |
|
|
Запустить процесс |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-12" id="try-it-yourself"> |
|
|
<h2 class="text-2xl md:text-3xl font-bold mb-8 text-center">Попробуй сам</h2> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-6xl mx-auto"> |
|
|
<div class="p-6 md:p-8"> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex flex-wrap gap-4 mb-4"> |
|
|
<button class="example-btn active" data-example="button">Простая кнопка</button> |
|
|
<button class="example-btn" data-example="color">Изменение цвета</button> |
|
|
<button class="example-btn" data-example="counter">Счётчик кликов</button> |
|
|
</div> |
|
|
|
|
|
<div class="editor-container grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> |
|
|
|
|
|
<div class="editor-col"> |
|
|
<div class="bg-gray-800 text-white p-2 rounded-t-lg flex justify-between items-center"> |
|
|
<span class="text-sm font-mono">HTML</span> |
|
|
<i data-feather="code" class="w-4 h-4"></i> |
|
|
</div> |
|
|
<textarea id="html-editor" class="editor w-full h-64 p-3 font-mono text-sm bg-gray-100 rounded-b-lg focus:outline-none focus:ring-2 focus:ring-primary"></textarea> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="editor-col"> |
|
|
<div class="bg-gray-800 text-white p-2 rounded-t-lg flex justify-between items-center"> |
|
|
<span class="text-sm font-mono">CSS</span> |
|
|
<i data-feather="code" class="w-4 h-4"></i> |
|
|
</div> |
|
|
<textarea id="css-editor" class="editor w-full h-64 p-3 font-mono text-sm bg-gray-100 rounded-b-lg focus:outline-none focus:ring-2 focus:ring-primary"></textarea> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="editor-col"> |
|
|
<div class="bg-gray-800 text-white p-2 rounded-t-lg flex justify-between items-center"> |
|
|
<span class="text-sm font-mono">JavaScript</span> |
|
|
<i data-feather="code" class="w-4 h-4"></i> |
|
|
</div> |
|
|
<textarea id="js-editor" class="editor w-full h-64 p-3 font-mono text-sm bg-gray-100 rounded-b-lg focus:outline-none focus:ring-2 focus:ring-primary"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<button id="run-code" class="bg-primary hover:bg-blue-600 text-white font-medium py-3 px-6 rounded-lg shadow-md transition-all mr-4"> |
|
|
Показать результат |
|
|
</button> |
|
|
<button id="reset-code" class="bg-gray-300 hover:bg-gray-400 text-dark font-medium py-3 px-6 rounded-lg shadow-md transition-all"> |
|
|
Сбросить |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="bg-gray-800 text-white p-2 rounded-t-lg flex justify-between items-center"> |
|
|
<span class="text-sm font-mono">Результат</span> |
|
|
<i data-feather="eye" class="w-4 h-4"></i> |
|
|
</div> |
|
|
<iframe id="result-frame" class="w-full h-64 bg-white border border-gray-200 rounded-b-lg"></iframe> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-dark text-white py-8 px-4 md:px-8"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<h2 class="text-xl font-bold mb-2">Web Wizards Workshop</h2> |
|
|
<p class="opacity-80">Простое объяснение сложных вещей</p> |
|
|
</div> |
|
|
<div class="flex gap-4"> |
|
|
<a href="#" class="opacity-80 hover:opacity-100 transition-opacity"> |
|
|
<i data-feather="github" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="opacity-80 hover:opacity-100 transition-opacity"> |
|
|
<i data-feather="twitter" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="opacity-80 hover:opacity-100 transition-opacity"> |
|
|
<i data-feather="mail" class="w-5 h-5"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8 pt-6 border-t border-gray-700 text-center text-sm opacity-70"> |
|
|
<p>© 2023 Web Wizards Workshop. Все права защищены.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
<script src="script.js"></script> |
|
|
<script> |
|
|
feather.replace(); |
|
|
</script> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-4 right-4 bg-white p-4 rounded-lg shadow-lg z-50"> |
|
|
<h3 class="font-bold mb-2 text-sm">Отключить технологии:</h3> |
|
|
<div class="flex gap-2"> |
|
|
<button id="toggle-html" class="tech-toggle bg-red-100 text-red-800 px-3 py-1 rounded text-xs" data-tech="html">HTML</button> |
|
|
<button id="toggle-css" class="tech-toggle bg-blue-100 text-blue-800 px-3 py-1 rounded text-xs" data-tech="css">CSS</button> |
|
|
<button id="toggle-js" class="tech-toggle bg-yellow-100 text-yellow-800 px-3 py-1 rounded text-xs" data-tech="js">JS</button> |
|
|
</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
