Самостійною роботою є створення статичного адаптивного HTML-сайту на довільну тему об'ємом 4-5 сторінок.
Мова сайту - українська (для підтвердження власної роботи).
Наявність авторської сторінки за посиланням © Прізвище або нік (в нижній частині сторінок). На авторській сторінці поставити фотографію (аватар) і написати коротку інформацію про себе.
Створений сайт розміщається на хостингу і демонструється викладачеві онлайн.
Вимоги до HTML-сайту
- Головна сторінка сайту має назву index.html. Назви файлів (сторінок, картинок, скриптів, стилів) та папок – латинкою, малий регістр, без пробілів (для візуального розмежування застосовувати символи «-» або «_»). Кирилицю для назв не застосовувати!!!!
- Застосувати таблицю стилів в окремому файлі. Опис стилів зі сторінки перенести в файл таблиці стилів *.css. Назви стилів – латинкою, змістовні (.red .big тощо).
- Графіка, що відноситься до дизайну сторінок міститься в окремій директорії (зазвичай, img або images). Решта зображень, що відносяться до наповнення сторінок – в інших директоріях зі змістовними назвами (наприклад, picture, photo тощо).
- Верстання сайту блочне із застосуванням тегів HTML5. Кодування сторінки має підтримувати кирилицю (charset=utf-8).
- Наявність основних тегів у коді (<html><head><body><div><p><h1>…<h6> тощо). Парні теги мають закриватися (<p></p>). Зберігати вкладеність тегів (<div><p>Текст</p></div>). Основні модулі коду сторінки мають бути закоментовані ().
- Єдиний стиль для всіх сторінок сайту. Однакове розміщення основних блоків сайту (заголовку, рубрик, логотипу).
- Наявність навігації на всіх сторінках сайту. Виключення лише для сторінок, що відкриваються у новому вікні і містять інформацію, яка може сприйматися і не в контексті сайту (збільшена картинка, інформація про розробника, стаття, тощо).
- Для адаптивної структури сторінок застосувати сітку, користуючись Bootstrap, Grid, Flexbox або власними засобами.
Реалізовані елементи та сервіси на сторінках сайту
- Наявність логотипу, фавіконки та назви сторінки на вкладці.
- Застосувати веб-шрифти для основного тексту та заголовків. Для іконок використати спеціалізовані іконкові шрифти або SVG-зображення з відповідних ресурсів.
- Втілити у сайт інтерактивну карту або панорамний перегляд певної місцевості. Це може бути ваш будинок, історичне місце, університет. Втілення з YouTube власного або доречного відео з обраної тематики. Відредагувати відео засобами YouTube-редактора: додати титри, ефекти, музику тощо.
- Додавання віджета (наприклад, новини, афоризми, анекдоти), інформера (прогноз погоди, курс валют, календар подій) та кнопку певної соцмережі.
- Наявність динамічного елементу (випадне меню, слайдер, збільшення фотографій, акордіон тощо) з бібліотеки jQuery або як результат під’єднання плагіну.
- Розмістити сайт на платному або безкоштовному хостингу. Для розміщення використовувати FTP-доступ.
Оцінювання роботи
10 балів - акуратний коментований код, з врахуванням основних вимог. Повне розуміння застосованих тегів і стилів. Навики роботи з CMS.
10 балів - втілення сервісів, розміщення на хостингу.
Порядок роботи
- Обрати тему сайту.
- Визначитися з колірною гамою, стилем, логічною та фізичною структурою сайту.
- Зверстати шаблонну сторінку, перевірити цілісність структури, наявність всіх основних блоків сторінки (окремі модульні блоки закоментувати), правильність посилань.
- За шаблонною сторінкою створити решта сторінок, об'єднати їх навігацією
- Додати до сторінок сервіси згідно вимог.
- Розмістити сайт в Інтернеті.
В звіті зазначити тему сайту, адресу розміщення сайту, технології створення, скрін головної сторінки, HTML код головної сторінки, код CSS файла.
Зміст звіту
- Тема розробленого сайту.
- Адреса розміщення. Застосовані засоби, сервіси та технології (мови, плагіни, АРІ тощо).
- Скрін головної сторінки.
- HTML код головної сторінки.
- Фрагмент коду CSS файлу.
- У висновку оцінити процес створення сайту, доступність та ефективність застосованих засобів і сервісів, якісні характеристики хостингу, зручність ftp-клієнта та інші моменти робочого процесу.