Конструктор уроків
- Всеосвіта›
- Бібліотека уроків›
- Інформатика›
- Правила ергономічного розміщення відомостей на веб-сторінці
Урок:
Правила ергономічного розміщення відомостей на веб-сторінці
09.05.2025
Вміст уроку:
1
2
3
4
5
6
7
8
9
10
11
1
Правила ергономічного розміщення відомостей на веб-сторінці
🔹 1. Що таке ергономіка веб-сторінки?
Ергономіка веб-сторінки — це принципи зручного, логічного і приємного для користувача розміщення інформації на сайті.
Мета: зробити так, щоб користувачу було зручно шукати, читати та взаємодіяти зі сторінкою.
🔹 2. Основні принципи ергономічного дизайну
✅ 1. Ієрархія інформації
Важливі елементи — на видному місці (зверху, по центру).
📄 Приклад у блокноті:
less
КопіюватиРедагувати
2
3 з 12 балів
🔹 2. Основні принципи ергономічного розміщення
✅ 1. Ієрархія заголовків
Використовуйте правильні HTML-теги:
<h1> — головний заголовок, <h2>, <h3> — підзаголовки.
Порада: Один <h1> на сторінку. Підпорядковані розділи — через <h2>, <h3>, тощо.
.png)
3
3 з 12 балів
✅ 2. Читабельність і поділ тексту
Користуйтесь абзацами <p>, списками <ul>/<ol>, виділенням <strong>.
📌 Порада: Текст має дихати — уникайте суцільних «стіни» абзаців.
4
2 з 12 балів
✅ 3. Контраст і візуальне виділення
Використовуйте кольори, фони, відступи через CSS, але навіть у HTML можна базово оформити через атрибути (або стилі):
📌 Порада: Контраст — ключ до уваги. Але не зловживай кольорами.
5
2 з 12 балів
✅ 4. Єдина структура і послідовність
Меню, футер, стилі — мають бути схожі на кожній сторінці сайту.
📌 Порада: Головні елементи сайту (меню, логотип) повинні повторюватись на кожній сторінці.
6
2 з 12 балів
✅ 5. Розміщення елементів за шаблоном "F-подібного сканування"
Користувачі читають по формі латинської "F": зліва направо, згори вниз.
Тому:
Найважливіше — зверху і ліворуч
Кнопки заклику до дії — в центрі або трохи нижче
7
🔹 3. Типові помилки, яких слід уникати:
❌ Використання багатьох шрифтів, кольорів
❌ Весь текст у одному заголовку чи без <p>
❌ Відсутність логічного поділу на секції
❌ Неадаптивний дизайн (без <meta viewport>)
8
МОЇ ПРОПОЗИЦІЇ:
✅ Використовуйте секції (<section>, <article>, <aside>) для логічного поділу в HTML5:
✅ Завжди додавайте alt-тексти до зображень:
✅ Додайте адаптивність:
✅ Кнопки повинні бути помітними:
<a href="join.html"><button style="background-color: green; color: white;">Приєднатися</button></a>
9
✅ Форма з простим оформленням:
10
🔚 Висновок:
Ергономіка веб-сторінки — це структура, логіка, простота і увага до зручності користувача.
Навіть простий HTML може виглядати зручно і професійно, якщо дотримуватись базових принципів.
11
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мій ергономічний сайт</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
background-color: #f9f9f9;
color: #333;
}
header, footer {
background-color: #0057b7;
color: white;
padding: 1em;
text-align: center;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 1em;
padding: 0;
}
nav a {
text-decoration: none;
color: white;
font-weight: bold;
}
section {
padding: 1em 2em;
}
h1, h2, h3 {
color: #0057b7;
}
button {
background-color: green;
color: white;
padding: 0.5em 1em;
border: none;
border-radius: 5px;
cursor: pointer;
}
form input, form button {
margin: 0.5em 0;
display: block;
width: 100%;
max-width: 400px;
}
</style>
</head>
<body>
<header>
<h1>Ласкаво просимо на наш сайт</h1>
<p>Дізнайтесь більше про наші проєкти</p>
</header>
<nav>
<ul>
<li><a href="#home">Головна</a></li>
<li><a href="#services">Послуги</a></li>
<li><a href="#contacts">Контакти</a></li>
</ul>
</nav>
<section id="home">
<h2>Про нас</h2>
<p>Ми команда, яка займається створенням інноваційних освітніх рішень для шкіл та університетів.</p>
</section>
<section id="services">
<h2>Наші послуги</h2>
<ul>
<li>Розробка навчальних сайтів</li>
<li>Онлайн-курси для вчителів</li>
<li>Консультації з цифрової грамотності</li>
</ul>
<a href="#form"><button>Замовити послугу</button></a>
</section>
<section id="contacts">
<h2>Контакти</h2>
<p>Email: info@example.com</p>
<p>Телефон: +380673702443</p>
</section>
<section id="form">
<h2>Форма зв’язку</h2>
<form>
<label for="name">Ім’я:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Надіслати</button>
</form>
</section>
<footer>
<p>© 2025 Освітній проєкт. Всі права захищені.</p>
</footer>
</body>
</html>
даний код вставте в блокнот . Змініть розширення .ТХт на *.HTML
Рефлексія від 2 учнів
Сподобався:
0
Так: 2
Ні: 0
Зрозумілий:
0
Так: 2
Ні: 0
Потрібні роз'яснення:
0
Ні: 2
Так: 0