📝 Как создать свой сайт в Блокноте
👨‍💻 Макс 👨‍💻 Расул
🎓 Группа 1ИС-35

Пошаговый тутор для новичков. Никаких сложных программ — только блокнот и браузер!

🎨

Как создать красивый слайд на сайте?

Нажми на кнопку — откроется полная инструкция с кодом.

✨ Как добавить слайдер на сайт

Вставь этот код в свой HTML-файл (внутрь <body>):

<div style="overflow-x: auto; white-space: nowrap; padding: 20px; background: #0f172a; border-radius: 20px;"> <img src="https://picsum.photos/300/200?random=1" style="display: inline-block; margin-right: 15px; border-radius: 16px;"> <img src="https://picsum.photos/300/200?random=2" style="display: inline-block; margin-right: 15px; border-radius: 16px;"> <img src="https://picsum.photos/300/200?random=3" style="display: inline-block; margin-right: 15px; border-radius: 16px;"> </div> <p style="text-align: center;">👉 Листай вправо, чтобы увидеть все слайды! 👈</p>
💡 Это горизонтальный слайдер. Картинки загружаются случайные — замени ссылки на свои!
🎥

Как добавить видео на сайт?

Нажми на кнопку — узнаешь, как вставить видео с YouTube.

📺 Вставка видео с YouTube

Скопируй этот код:

<iframe width="100%" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen> </iframe>

Как получить свою ссылку: Открой видео на YouTube → нажми "Поделиться" → "Встроить" → скопируй ссылку из src="..."

🎬 Замени dQw4w9WgXcQ на ID своего видео!

Как добавить анимацию?

Плавное появление, движения и эффекты.

🎭 Пример анимации

Добавь в свой CSS-файл:

@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animated { animation: fadeIn 0.6s ease-out; }

А в HTML напиши:

<h1 class="animated">Я появляюсь плавно!</h1>
💫 Анимация сработает при загрузке страницы
🧭

Как создать меню навигации?

Меню, которое работает на всех страницах.

📧

Как добавить форму связи?

Чтобы читатели могли писать вам.

📝 Простая форма

<form action="https://formspree.io/f/ваш_ключ" method="POST"> <input type="text" placeholder="Ваше имя" required> <input type="email" placeholder="Email" required> <textarea placeholder="Сообщение" rows="4"></textarea> <button type="submit">Отправить</button> </form>
💌 Бесплатно: зарегистрируйся на formspree.io, получи ключ и вставь его вместо "ваш_ключ"

✅ Что ты уже умеешь после этого тутора