КУРСОВА РOБОТА

КР.ІП – 04.00.00.000 ПЗ
Група ІП-19-1
Боднарчук Назарій
2021
Івано-Франківський національний технічний університет нафти і газу
(повне найменування вищого навчального закладу)

Кафедра інженерії програмного забезпечення

(повна назва кафедри)

КУРСОВА РОБОТА
з дисципліни «Технологія компонентного програмування для
ВЕБ»

на тему: Розробка ВЕБ-рішення для компанії, яка спеціалізується на

розробці ВЕБ-сайтів та ВЕБ-дизайну.

Студента (ки) 3 курсу групи ІП-19-1

напряму підготовки 121
інженерія програмного забезпечення
Боднарчука Н.В
(прізвище та ініціали)
Керівник професор Лютак І. З.
(посада, вчене звання, науковий ступінь, прізвище та ініціали)

Національна шкала _________________

Кількість балів: _______ Оцінка: ECTS _____
Члени комісії ________________ _____________________
(підпис) (прізвище та ініціали)
________________ _____________________
(підпис) (прізвище та ініціали)
________________ _____________________
(підпис) (прізвище та ініціали)

2021
Івано-Франківськ
Івано-Франківський національний технічний університет нафти і газу
Кафедра Інженерії програмного забезпечення
Дисципліна Технологія компонентного програмування для веб
Спеціальність Інженерія програмного забезпечення
Курс 3 Група ІП-19-1 Семестр 1

ЗАВДАННЯ
НА КУРСОВИЙ ПРОЕКТ (РОБОТУ)

Студенту Боднарчуку Назарію Володимировичу

(прізвище, ім’я, по батькові)
1. Тема проекту (роботи): Розробка ВЕБ-рішення для компанії, яка спеціалізується на
розробці ВЕБ-сайтів та ВЕБ-дизайну
2. Термін здачі студентом закінченого проекту (роботи): 9 грудня 2021 року
3. Вхідні дані до проекту (роботи) : Згідно з заданим варіантом
4. Зміст розрахунково-пояснювальної записки (перелік питань, що їх належить
розробити): Вступ, аналіз предметної області, постановка завдання, опис створення
«скелету» сайту, створення і наповнення блоків «menu», «footer», «index», «about», «quickstart»,
робота із jQuery, адаптивність, список використаної літератури, додатки
5.Графічний матеріал
1. Схема «клієнт-сервер» (рис. 1.1, ст. 9)
2. Архітектура WWW (рис. 1.2, ст. 12)
3. Меню сайту (рис. 3.2, ст. 36)
4. Головна сторінка (рис. 3.2, ст. 37)
5. Сторінка “Цікаві факти” (рис. 3.3, ст. 39)
6. Сторінка “Українські медалісти” (рис. 3.4, ст. 39)
7. Footer сайту (рис. 3.5, ст. 40)
 6. Консультанти розділів проекту (роботи)

Підпис, дата
Розділ Консультант Завдання Завдання
видав прийняв

7. Дата видачі завдання 10 вересня 2021 р.

Керівник ___________________________
(підпис)

Завдання прийняв до виконання ____

______________ (підпис)
КАЛЕНДАРНИЙ ПЛАН

№ Строк виконання
Назви етапів магістерської роботи Примітка
п/п етапів роботи

1 Підбір і вивчення літератури 03.10.2021 виконано

2 Аналіз концепцій та алгоритмів 15.10.2021 виконано

3 Вивчення категоризаційних концепцій 01.11.2021 виконано

в алгоритмах кластеризації даних

4 Розробка алгоритмічної моделі 15.11.2021 виконано

5 Опис розробленого алгоритму 20.11.2021 виконано

6 Програмна реалізація методу 01.12.2021 виконано

категоризації
Затвердження пояснювальної записки
7 10.12.2021 виконано
роботи завідувачем кафедри

Студент Боднарчук Н.В.

(Особистий підпис) (Розшифровка підпису)

Керівник Лютак І. З.
(Особистий підпис) (Розшифровка підпису

«___» ___________________ р.
 ЗМІСТ
ВСТУП..............................................................................................................................2
РОЗДІЛ 1
WEB-ТЕХНОЛОГІЇ.........................................................................................................3
1.1 Історія виникнення www....................................................................................3
1.2 Поняття гіпертексту............................................................................................7
1.3 Архітектурна побудова www.............................................................................9
1.4 HTML.................................................................................................................13
1.5. CSS....................................................................................................................15
РОЗДІЛ 2
МОДЕЛЮВАННЯ ПРОЕКТОВАНИХ РІШЕНЬ.......................................................22
2.1 HyperText Markup Language – мова розмітки гіпертексту............................22
2.2 Cascading Style Sheets – каскадні таблиці стилів...........................................26
2.3 JavaScript............................................................................................................29
2.4 jQuery.................................................................................................................31
РОЗДІЛ 3
ПРОГРАМНИЙ РОЗДІЛ...............................................................................................34
3.1 Опис створення «скелету» сайту.....................................................................34
3.2 Створення і наповнення блоків “about”, “index”, “quickstart”, “footer”,
“menu”.........................................................................................................................34
3.3 Робота із jQuery.................................................................................................40
ВИСНОВКИ...................................................................................................................42
СПИСОК ВИКОРИСТАНОЇ ЛІТЕРАТУРИ...............................................................43
ДОДАТКИ......................................................................................................................44

КР.ІП-04.00.00.000 ПЗ
Змн. Арк. № докум. Підпис Дата
Розроб. Боднарчук Н.В. Розробка ВЕБ-рішення для Літ. Арк. Акрушів
Перевір. Лютак І. З. компанії, яка спеціалізується на 1
Реценз. розробці ВЕБ-сайтів та ВЕБ-
Н. Контр. дизайну ІФНТУНГ, ІП-19-1
Затверд.
 ВСТУП

В даний час Інтернет являє собою один з засобів інформації, що найактивніше

розвивається. За статистикою, значна кількість користувачів мають доходи
вищі за середні і відносяться до групи менеджерів середньої та вищої ланки.
Створення сайту в Інтернеті забезпечує нові можливості щодо розширення,
інформаційної підтримки або реклами бізнесу.
Веб-сайт сьогодні є не лише інформаційним засобом або візитівкою, а й
повноцінним маркетинговим інструментом, що приваблює нових клієнтів, які
приносять прибуток.
Існує безліч довідково-інформаційних сайтів, що надають повну інформацію
майже за будь-яким запитом. Набагато легше зайти на сайт і дізнатися про все
необхідне, ніж «ритися» по газетах та журналах.

Арк.
КР.ІП-04.00.00.000 ПЗ
2
Змн. Арк. № докум. Підпис Дата
 РОЗДІЛ 1

WEB-ТЕХНОЛОГІЇ

1.1 Історія виникнення www

У 1960-х роках фірма RAND Corporation вперше запропонувала створити

децентралізовану комп'ютерну мережу, що покриває всю країну. Проект
включав об'єднання комп'ютерів військових, наукових та освітніх установ у
мережу, яка могла б зберегти працездатність в умовах ядерної атаки. Основною
ідеєю проекту була децентралізація управління та підпорядкування, щоб вихід з
ладу одного чи кількох сегментів мережі не призвів би до колапсу. Мережа
повинна складатися з окремих сегментів і не бути централізованою, а будь-яке
повідомлення повинне поділятися на пакети і передаватися різними гілками
мережі, збираючись в єдине ціле на системі-одержувачі. Перший варіант
пропозиції побачив світ у 1964 році завдяки зусиллям Пола Берана (Paul Baran).

Наприкінці 1960-х років корпорація RAND, Массачусетський технологічний

інститут та Каліфорнійський університет Лос-Анджелеса почали
експериментувати з концепцією децентралізованої мережі. У 1968 році
підрозділ Пентагону ARPA (Advanced Research Projects Agency, Агентство з
роботи з дослідницькими проектами в галузі перспективних досліджень)
відкрило фінансування цього проекту в США.

В осені 1969 року на світ з'явилося «немовля» — мережа ARPANET, що

складалась на той час із чотирьох вузлів. Перші випробування ARPANET
виявились вкрай успішними. Вчені дослідницьких установ, які послужили
випробувальними полігонами, отримали можливість передавати дані та спільно
користуватися віддаленим доступом до комп'ютерів.

До 1971 ARPANET розрослася до 15 вузлів. До 1972 вона налічувала вже 37

вузлів, а в 1973 до мережі вперше були підключені закордонні вузли.

Арк.
КР.ІП-04.00.00.000 ПЗ
3
Змн. Арк. № докум. Підпис Дата
 Наприкінці 1974 року була документована перша весія протоколу TCP. У 1978
році протокол TCP був розділений на 2 підрівні – TCP та IP. Спочатку учені
дійсно використовували мережу лише для координації своїх досліджень та
обміну повідомленнями зі своїми колегами. Проте дуже швидко мережа
перетворилася на високошвидкісну комп'ютеризовану «мотузку», яку багато
хто почав використовувати для передачі особистих повідомлень, пліток і
просто розмов.

Децентралізована структура ARPANET, що істотно відрізняється від структур

корпоративних мереж, що існували на той час, дозволяла підключати до мережі
комп'ютери практично будь-якого типу.

До 1983 ARPANET отримала загальноприйняте ім'я Internet. Хоча 1991 року

мережа ARPANET припинила своє існування, назва Internet залишилася, так-як
Мережа стала об'єднувати у собі вже міжнародні мережі.

1980-ті роки стали періодом бурхливого зростання Internet.

Схема з'єднання комп'ютерів у децентралізовану мережу поширювалася світом,

і організатори багатьох зарубіжних мереж побажали підключитися до
американської мережі.

Наприкінці 1980-х років найбільш впливові установи США на кошти, виділені

NSF (National Science Foundation, Державний фонд наукових досліджень -
аналог нашого Міністерства Науки), заснували NSFNET - п'ять
суперкомп'ютерних центрів у Прінстоні, Піттсбурзі, Каліфорнійському
університеті Санта-Барбари і т. д. Мережа цих п'яти центрів зазвичай
називається «магістральним хребтом Internet США» (Internet Backbone). Чому
лише п'ять? Тому що ці центри дуже дорогі навіть для багатої Америки. Саме
тому обчислювальні потужності цих центрів слід використовувати
кооперативно — вони були доступні будь-яким науковим установам США.

Мережа зазнала великої модернізації у 1988 році. Цей процес залишився

непомітним для користувачів, Internet не втратив своєї працездатності. До речі,

Арк.
КР.ІП-04.00.00.000 ПЗ
4
Змн. Арк. № докум. Підпис Дата
 процес вдосконалення Мережі триває безперервно. Вся діяльність Internet-
спільноти на той час призводила до постійного зростання кількості
користувачів Глобальної мережі. Це, у свою чергу, призводило до виникнення
та вирішення проблем, пов'язаних із постійним розвитком та експансією
Internet, розвитку технологій та систем безпеки.

У 1987 року кількість комп'ютерів, підключених до Internet, становило понад

десять 000. До 1989 року це число досягло 100 000.

У листопаді 1990 Тім Бернерс-Лі (Tim Berners-Lee) з CERN (Європейського

центру ядерних досліджень, також відомого як Європейський центр фізики
частинок) створив перший прототип WWW-сервера. Всесвітня павутина як
система, що активно функціонує, не виходила у світ аж до 1992 року.

1990 перший браузер для платформи NeXT (APPLE) Перший браузер був
створений батьком World Wide Web Тімом Бернерсом-Лі у 1990 р. Перша його
демонстрація відбулася в Європейському центрі ядерних досліджень (CERN) у
1991 р. Браузер, що називався просто WorldWideWeb, платформі NeXT. Потім
цей браузер був переписаний мовою C і отримав назву libwww.

1992 примітний тим, що цього року кількість комп'ютерів, підключених до

Internet, перевищила мільйон. Однак, без сумніву, найбільш серйозним
розвитком Мережі в 1990-х роках (а, на думку багатьох, і зовсім критичним у
сенсі самого існування Мережі) стало створення WWW (World Wide Web,
Всесвітнє павутиння). У основу всієї системи лягло поняття гіпертексту –
тобто. безліч окремих текстів, які мають посилання друг на друга. Для роботи з
цими текстами було створено протокол HTTP. Для створення текстів була
використана мова розмітки HTML, яка базувалася на мові розмітки SGML
(Standard Generalized Markup Language), яка була придумана в 1965 році Ted
Nelson

У 1992 році було створено браузер CELLO для IBM PC, його творцем був Том
Брюс

Арк.
КР.ІП-04.00.00.000 ПЗ
5
Змн. Арк. № докум. Підпис Дата
 До жовтня 1993 року близько двохсот WWW-серверів було запущено в
експлуатацію.

1994 - створення організації W3C (World Wide Web Consortium) розробка

стандартів для розвитку www. Ця організація здійснює координацію розробки
Internet-стандартов, які забезпечують швидший та ефективніший розвиток
мережі Internet.

У наступні роки розвиток Internet та WWW відбувався ще швидшими темпами.

Реальну статистику числа комп'ютерів у Мережі та WWW-серверів отримати
дуже важко, тому що ці дані змінюються практично щодня. Розумною оцінкою
числа комп'ютерів на червень 1995 року вважатимуться число 6,5 мільйонів.

Тим часом Дейв Реггетт, спеціаліст W3C, працював над третьою версією HTML
3.0 (відомою також як HTML+). Ця специфікація через конкуренцію між
виробниками Web-додатків, що чинили тиск на W3C, так і не була закінчена, а
консорціум зосередив зусилля не на технологічній, а на політичній стороні
питання, намагаючись примирити розробників браузерів, що ворогували. В
результаті було досягнуто домовленості про випуск у січні 1997-го стандарту
HTML 3.2, що об'єднав набори тегів, що підтримуються і Netscape Navigator, і
Internet Explorer. На якнайшвидшому виході HTML 3.2 наполягали також IBM,
Novell і Sun.

Не витримавши тиску софтверної імперії Білла Гейтса, Netscape стала

припускатися нових помилок. Все ще вірячи у свій вплив на ринок, вона не
поставилася з належною увагою до нової технології Cascading Style Sheets
(CSS, аналог таблиць стилів DSSSL, тільки для HTML), реалізувавши її
підтримку у вигляді не дуже зручної технології JASS (JavaScript Accessible Style
Sheets) , яка вимагала знання програмування. Microsoft же навпаки виділила
можливість створення сценаріїв у HTML-документах, запропонувавши
користувачам відразу дві скрипт-мови – JScript та VBScript. Ця корпорація
також почала фінансувати підрозділ W3C, відповідальний за розробку нових

Арк.
КР.ІП-04.00.00.000 ПЗ
6
Змн. Арк. № докум. Підпис Дата
 рекомендацій HTML, фактично взявши під контроль процес стандартизації
браузерів.

CSS миттєво здобула популярність. Вона дозволила розділяти логічну

структуру HTML-документів та способи їх форматування та відображення на
екрані. При цьому технологія CSS виявилася гнучкою і дала можливість
створювати вкладені (каскадні) стилі з ієрархічною системою підпорядкування
та успадкування можливостей. Симпатії користувачів остаточно перемістилися
до браузера Internet Explorer. А компанія Netscape була куплена мережевим
гігантом America Online за 8,98 млрд дол.

Продовжувалась підготовка нового стандарту HTML 4.0. Його робоча версія

стала доступною 8 червня 1997, а в грудні з'явилася і офіційна рекомендація
W3C. Війна браузерів і наборів тегів закінчилася, тому HTML 4.0 виявився
напрочуд стабільним. Він діє досі, вийшла лише одна невелика проміжна версія
4.01 з виправленими помилками специфікації. Цікаво, що HTML 4 знову
визнаний W3C мовою логічної розмітки, хоча лише три роки тому здавалося,
що головне призначення цієї мови – форматування документів. Але тепер
існувала технологія CSS, щодо якої W3C висловилася однозначно: все, що
пов'язане з візуальними аспектами відображення HTML-документа, розробники
повинні виносити до CSS-таблиці.

1.2 Поняття гіпертексту

У попередньому розділі йшлося про історію та основні віхи розвитку World

Wide Web. Останнім часом часто доводиться чути, що WWW це дуже просто.
Однак за цією простотою, що здається, ховається добре продумана складна
система. У цьому слід зазначити, що система бурхливо розвивається.

У 1989 році, коли Т. Бернерс-Лі запропонував свою систему, у світі

інформаційних технологій спостерігався підвищений інтерес до нового та

Арк.
КР.ІП-04.00.00.000 ПЗ
7
Змн. Арк. № докум. Підпис Дата
 модного на той час напрямку – гіпертекстових систем. Сама ідея, але не термін,
була запроваджена В.Бушем (Vannevar Bush) у 1945 році у пропозиціях щодо
створення електромеханічної інформаційної системи Memex. Незважаючи на
те, що Буш був радником з науки президента Рузвельта, ідея не була
реалізована. У 1965 році Т. Нельсон (Ted Nelson) ввів в обіг сам термін
"гіпертекст", розвинув і навіть реалізував деякі ідеї, пов'язані з роботою з
"нелінійними" текстами. У 1968 році винахідник маніпулятора "миша" Д.
Енжільбард (Doug Engelbart) продемонстрував роботу з системою, що має
типовий гіпертекстовий інтерфейс, і що цікаво проведена ця демонстрація була
з використанням системи телекомунікацій. Проте виразно описати свою
систему він не зміг. 1975 року ідея гіпертексту знайшла втілення в
інформаційній системі внутрішнього розпорядку атомного авіаносця "Карл
Вінстон", яка отримала назву ZOG. У комерційному варіанті система відома як
KMS. Роботи у цьому напрямі тривали і час від часу з'являлися реалізації типу
HyperCard фірми Apple або HyperNode фірми Xerox. У 1987 році була
проведена перша спеціалізована конференція Hypertext'87, матеріалам якої був
присвячений спеціальний випуск журналу "Communication ACM".

Ідея гіпертекстової інформаційної системи полягає в тому, що користувач має

можливість переглядати документи (сторінки тексту) в тому порядку, в якому
йому більше подобається, а не послідовно, як це прийнято при читанні книг.
Тому Т. Нельсон і визначив гіпертекст як нелінійний текст. Досягається це
створення спеціального механізму зв'язку різних сторінок тексту з допомогою
гіпертекстових посилань, тобто. у звичайного тексту є посилання типу
"наступний-попередній", а у гіпертексту можна побудувати ще скільки
завгодно багато інших посилань. Улюбленими прикладами фахівців гіпертексту
є енциклопедії, Біблія, системи типу "help".

Простий, здавалося б, механізм побудови посилань виявляється досить

складним завданням, т.к. можна побудувати статичні посилання, динамічні
посилання, асоційовані з документом загалом чи з окремими його частинами,

Арк.
КР.ІП-04.00.00.000 ПЗ
8
Змн. Арк. № докум. Підпис Дата
 тобто. контекстні посилання. подальший розвиток цього підходу призводить до
розширення поняття гіпертексту за рахунок інших інформаційних ресурсів,
включаючи графіку, аудіо- та відео-інформацію, до поняття гіпермедіа.

1.3 Архітектурна по,удова www

Від опису основних компонентів перейдемо до архітектури взаємодії

програмного забезпечення у системі World Wide Web. WWW побудовано за
добре відомою схемою "клієнт-сервер". На малюнку нижче показано, як
розділені функції у цій схемі (рисунок 1.1).

Рисунок 1.1 Схема «клієнт-сервер»

Програма-клієнт виконує функції інтерфейсу користувача і забезпечує доступ

до всіх інформаційних ресурсів Internet. У цьому сенсі вона виходить за

Арк.
КР.ІП-04.00.00.000 ПЗ
9
Змн. Арк. № докум. Підпис Дата
 звичайні рамки роботи клієнта лише з сервером певного протоколу, як це
відбувається в telnet, наприклад. Почасти досить поширена думка, що Mosaic
або Netscape, які, безумовно, є WWW-клієнтами, це просто графічний
інтерфейс в Internet, є вірним. Однак, як уже було зазначено, базові компоненти
WWW-технології (HTML та URL) відіграють при доступі до інших ресурсів
Mosaic не останню роль, тому мультипротокольні клієнти повинні бути
віднесені саме до World Wide Web, а не до інших інформаційних технологій
Internet. Фактично, клієнт – це інтерпретатор HTML. І як типовий
інтерпретатор, клієнт, залежно від команд (розмітки), виконує різні функції. У
коло цих функцій входить як розміщення тексту на екрані, а й обмін
інформацією із сервером у міру аналізу отриманого HTML-тексту, що найбільш
наочно відбувається за відображенні вбудованих у тексті графічних образів.
При аналізі URL-специфікації або командам сервера клієнт запускає додаткові
зовнішні програми для роботи з документами у форматах, відмінних від HTML,
наприклад GIF, JPEG, MPEG, Postscript і т.п. Взагалі кажучи, для запуску
клієнтом програм незалежно від типу документа була розроблена програма
Luncher, але останнім часом значно більшого поширення набув механізм
узгодження програм, що запускаються через MIME-типи.

Іншу частину програмного комплексу WWW становить сервер протоколу

HTTP, бази даних документів у форматі HTML, керовані сервером, та
програмне забезпечення, розроблене у стандарті специфікації CGI.

До останнього часу (до освіти Netscape) реально використовувалися два HTTP-

сервери: сервер CERN і сервер NCSA. Але нині кількість базових серверів
розширилося. З'явився дуже непоганий сервер для MS-Windows та Apachie-
сервер для Unix-платформ.

Існують і інші, але два останні можна виділити з міркувань доступності

використання. Сервер для Windows - це shareware, але без вбудованого
самоліквідатора, як у Netscape. Враховуючи поширеність персоналок нашій
країні, таке програмне забезпечення дає можливість спробувати, що таке

Арк.
КР.ІП-04.00.00.000 ПЗ
10
Змн. Арк. № докум. Підпис Дата
 WWW. Другий сервер – це відповідь на загрозу комерціалізації. Netscape вже
не розповсюджує свій сервер Netsite вільно і пройшла чутка, що NCSA-сервер
також буде поширюватися на комерційній основі. В результаті було розроблено
Apachie, який, за словами його авторів, буде freeware, і реалізує нові
доповнення до протоколу HTTP, пов'язані із захистом від несанкціонованого
доступу, запропоновані групою з розробки цього протоколу та реалізуються
практично у всіх комерційних серверах.

База даних HTML-документів - це частина файлової системи, що містить

текстові файли у форматі HTML та пов'язані з ними графіку та інші ресурси.
Особливу увагу хотілося б звернути до документів, що містять елементи
екранних форм. Ці документи реально забезпечують доступ до зовнішнього
програмного забезпечення.

Прикладне програмне забезпечення, що працює із сервером, можна розділити

на програми-шлюзи та інші. Шлюзи - це програми, які забезпечують взаємодію
сервера із серверами інших протоколів, наприклад FTP, або з розподіленими на
мережі серверами Oracle. Інші програми - це програми, що приймають дані від
сервера та виконують будь-які дії: отримання поточної дати, реалізацію
графічних посилань, доступ до локальних баз даних або просто розрахунки.

Все, що було сказано до цього моменту, можна зарахувати до класичної схеми

World Wide Web. Нині слід говорити про зміну загальної архітектури.

Як видно на малюнку нижче до середини 1996 відбулися деякі зміни в

архітектурі сервісу World Wide Web (рисунок 1.2).

Відбулося повернення до модульної структури сервера World Wide Web. Це

повернення було реалізовано у вигляді специфікації API. API - це специфікація
розробки прикладних модулів, які вбудовуються на сервер, точніше
редагуються разом із модулями сервера. Застосування у всіх серверах
багатопотокової технології виконання підзадач робить такий спосіб

Арк.
КР.ІП-04.00.00.000 ПЗ
11
Змн. Арк. № докум. Підпис Дата
 розширення можливостей сервера економічнішим з погляду ресурсів
обчислювальної установки, ніж розробка CGI-скриптів.

Рисунок 1.2 Архітектура WWW

На додаток до HTML активно стала застосовуватися ще одна мова розмітки –

VRML (Virtual Reality Modeling Language). В даному випадку йдеться про опис
тривимірних сцен і можливість "блукати" цими світами. При цьому в VRML
також, як і в HTML передбачені гіпертекстові посилання, що дозволяє
створювати змішані бази даних, де інформаційний архів, наприклад, можна
подати у вигляді книг у бібліотеці, серед яких може подорожувати автор,
обираючи потрібну йому тематику та джерело, які потім подаються у форматі
документа HTML.

Java-аплети - це мобільні коди Java, посилання на які вмонтовані в тіло

документа. При доступі до такого документа програма перегляду користувача
попередньо аналізує документ на наявність такого типу посилань, і, якщо вони

Арк.
КР.ІП-04.00.00.000 ПЗ
12
Змн. Арк. № докум. Підпис Дата
 існують, то підкачує мобільні коди у свою пам'ять. Коди можуть одночасно
виконуватися при розміщенні їх на комп'ютері користувача, але можуть
активуватися і за допомогою спеціальних команд.

Як видно з малюнка, зміни торкнулися клієнтської частини технології. В даний

час відбувається поступовий перехід від простої класичної архітектури клієнт-
сервер до архітектури із сервером додатків, у ролі якого виступає програма-
клієнт. Зокрема, NCSA опублікувала специфікацію CCI (Common Client
Interface) розробки додатків до роботи з сервісами World Wide Web через
програму Mosaic.

1.4 HTML

HTML  (Hypertext Markup Language — Мова гіпертекстової розмітки) — це

мова опису структури сторінок документів, яка дозволяє звичайний текст
форматувати в абзаци, заголовки, списки та інші структури, створювати
посилання на інші сторінки. Це текстова мова, в якій інструкції з
форматування, що називаються тегами, вбудовані в розділи документа, які
містять конкретну інформацію. Теги повідомляють браузерам, як форматувати і
представляти інформацію на екрані.

Мова гіпертекстової розмітки HTML була запропонована Тімом Бернерсом-Лі у

1989 як один з компонентів технології розробки розподіленої гіпертекстової
системи World Wide Web. Ідея гіпертекстової інформаційної системи полягає у
тому, що користувач має можливість переглядати документи (сторінки тексту)
у найбільш зручному для себе порядку, а не послідовно, як це прийнято при
читанні книг. Досягається це шляхом створення спеціального механізму
пов`язуваня різних сторінок тексту за допомогою гіпертекстових посилань.

Мова НТМL дозволяє визначити структуру електронного документа з

поліграфічним рівнем оформлення. Результуючий документ може містити

Арк.
КР.ІП-04.00.00.000 ПЗ
13
Змн. Арк. № докум. Підпис Дата
 різноманітні елементи: ілюстрації, аудіо і відео фрагменти. Мова НТМL
включає розвинені засоби для визначення кількох рівнів заголовків, шрифтових
виділень, різних груп об’єктів та багато інших можливостей.

Таким чином, гіпертекстова база даних у концепції WWW – це набір текстових

файлів, розмічених мовою HTML, яка визначає форму представлення
інформації (розмітка) і структуру зв’язків цих файлів (гіпертекстові посилання).

За основу моделі розмітки документів у HTML прийнята тегова модель. Тегова

модель описує документ як сукупність контейнерів, кожен з яких починається і
закінчується тегами. Тобто документ НТМL є не чим іншим, як звичайним
АSСII-файлом з доданими до нього керуючими НТМL-кодами (тегами).

Теги НТМL-документів в основному є простими і зрозумілими для

використання, оскільки вони створені за допомогою загальновживаних слів
англійської мови, зрозумілих скорочень і позначень. НТМL-тег складається з

імені, за яким може слідувати необов’язковий список атрибутів тегу. Текст тегу
вміщується у кутові дужки (<І>). Найпростіший варіант тегу – ім’я, вміщене у
кутові дужки, наприклад, <HEAD>. Для більш складних тегів характерна
наявність різних атрибутів, які можуть мати конкретні значення, визначені для
видозмінення функцій тегу.

Атрибути тегу слідують за ім’ям і відділяються один від одного одним або
кількома пропусками. Порядок запису атрибутів у тегу не має значення.
Значення атрибута слідує за знаком рівняння, який стоїть після імені атрибута.
Якщо значення атрибута – одне слово або число, його можна вказати
безпосередньо після знаку рівняння, не виділяючи додатково. Решту значень
необхідно вміщувати у одинарні або подвійні лапки, особливо якщо вони
містять декілька розділених пропусками слів.

Найчастіше НТМL-теги складаються з початкового і кінцевого компонентів,

між якими розміщуються текст та інші елементи документа. Ім’я кінцевого тега
ідентичне імені початкового тегу, але перед ім’ям ставиться коса риска (/)

Арк.
КР.ІП-04.00.00.000 ПЗ
14
Змн. Арк. № докум. Підпис Дата
 (наприклад, для тегу заголовка <ТIТLЕ> закриваючою парою буде </ТIТLЕ>).
Кінцеві теги не містять атрибутів.

При використанні вкладених тегів їх слід закривати, починаючи з останнього і

рухаючись до першого.

Деякі НТМL-теги не мають кінцевого компонента, оскільки є автономними

елементами. Наприклад, тег зображення <IMG>, призначений для вставки
зображення у документ, не має кінцевого компонента.

Для створення HTML-документа можна застосувати редактор ASCII (зокрема,

Блокнот системи Windows). Такі редактори дозволяють вводити HTML-теги, не
додаючи до створеного нічого додатково. Створення документа у такому
редакторі дозволяє паралельно переглядати результат у програмі- браузері.
Інший тип редакторів – візуальні HTML-редактори, наприклад, Microsoft
FrontPage. Їх інтерфейс побудований за тим же принципом, що і інтерфейс
текстового процесора, такого, як, наприклад, Word. Для роботи з візуальним
редактором можна взагалі не володіти мовою HTML. Недоліком візуальних
редакторів є те, що розмір створюваного ними HTML-документа у декілька
разів більший, ніж документа, створеного звичайним Блокнотом системи
Windows. В умовах низької пропускної здатності вітчизняних мереж цей
недолік, який стосується швидкості завантаження сторінки (і, відповідно,
вартості часу, який на це витрачається), є досить суттєвим недоліком
(файл .htm, створений у WORD, в 4 - 9 разів більший, ніж файл аналогічного
змісту, створений програмою Блокнот).

1.5. CSS

CSS - це формальна мова, службовець для опису оформлення зовнішнього

вигляду документа, створеного з використанням мови розмітки (HTML,

Арк.
КР.ІП-04.00.00.000 ПЗ
15
Змн. Арк. № докум. Підпис Дата
 XHTML, XML). Назва походить від англійського Cascading Style Sheets, що
означає «каскадні таблиці стилів».

Розвиток CSS

Необхідність розробки CSS було визнано консорціумом W3C в 1990-х роках. У

1996 році був прийнятий стандарт CSS1, що дозволяє змінювати параметри
шрифту, колір, атрибути тексту, вирівнювання і відступи. У 1998 році відбувся
вихід CSS2, який додав можливості використання блокової верстки, звукових
таблиць, що генерується змісту, покажчиків, сторінкових носіїв Версія CSS3
помітно збільшила можливості стилів: стало доступним створення анімованих
елементів без використання JavaScript, з'явилася підтримка згладжування,
тіней, градієнтів і т. Д. Специфікація була розділена на модулі, кожен з яких
став розвиватися окремо. З 2011 року ведеться розробка модулів CSS4.
Можливості поки описані в чорнових варіантах.

Селектори –

Селектор повідомляє, до якого елементу будуть застосовані описувані в CSS

властивості стилю. Як селектора може виступати будь-який тег, якому
задається форматування (розмір, колір і т. Д.). Якщо для тега потрібно задати
різні стилі або застосувати один для відмінних елементів, використовуються
класи і запис виду «Тег.Класс {властивість: значення;}». Ім'я класу задається
латиницею, може містити підкреслення або дефіс. Якщо не вказувати тег, а
починати запис з «.Класс», то можна використовувати правило для будь-якого
тега. Якщо перераховувати кілька класів для одного тега, до нього
застосовується все описані стилі. Ідентифікатор задає унікальне ім'я елемента
для зміни стилю або звернення за допомогою скрипта. Запис «# Ідентифікатор
{властивість: значення;}». Назва ідентифікатора складається з букв латинського
алфавіту, допустимо використовувати дефіс і підкреслення. Щоб застосувати
ідентифікатор до конкретного тегу, вказується його ім'я, потім без пробілу і
через знак решітки назва ідентифікатора.

Арк.
КР.ІП-04.00.00.000 ПЗ
16
Змн. Арк. № докум. Підпис Дата
 Навіщо використовується CSS

Призначення CSS - відокремлювати те, що задає зовнішній вигляд сторінки, від

її змісту. Якщо документ створено тільки з використанням HTML, то в ньому
визначається не тільки кожен елемент, але і спосіб його відображення (колір,
шрифт, положення блоку і т. Д.). Якщо ж підключені каскадні таблиці стилів,
то HTML описує тільки черговість об'єктів. А за все їх властивості відповідає
CSS. В HTML досить прописувати клас, не перераховуючи всі стилі кожен раз.

Така технологія:
 забезпечує відносно просту і швидку розробку, тому що одного разу
створене оформлення можна застосовувати до багатьох сторінок;
 підвищує гнучкість і зручність редагування - досить внести правку в CSS,
щоб оформлення змінилося всюди;
 робить код більш простим, знижуючи повторюваність елементів. Його
простіше читати програмістам і пошуковим роботам;
 прискорює час завантаження, тому що CSS може кешуватися при
першому відкритті, а в наступних зчитуються тільки структура і дані;
 збільшує кількість візуальних рішень для подання вмісту;
 забезпечує можливість легко застосовувати до одного документу різні
стилі (наприклад, створювати адаптовану версію для мобільних пристроїв або
спеціальні стилі для людей з вадами зору).

Тобто каскадні таблиці служать не тільки для втілення дизайну, а й

кардинально змінюють підхід до сайтобудування, спрощуючи працю
розробників і забезпечуючи гнучкість реалізації. Ось для чого потрібен CSS.

Блок оголошень -

Блок оголошень складається з пар «властивість: значення» (запис завжди черга

двокрапка), розміщених в фігурних дужках. Записи закінчуються крапкою з
комою. CSS нечутливий до табуляції, прогалин, регістру. Вибір способу запису
(стовпчиком з відступом або просто в рядок) залишається на розсуд

Арк.
КР.ІП-04.00.00.000 ПЗ
17
Змн. Арк. № докум. Підпис Дата
 розробника. Якщо для одного селектора прописані різні значення для одного
властивості, то пріоритет віддається нижньої записи.

Підключення CSS –

CSS можна пов'язати з HTML декількома способами:

всередині тега за допомогою атрибута style. При цьому немає потреби

вказувати

селектор;

додати тег <style> з атрибутом type = "text / css";

підключити зовнішню таблицю стилів:

<link rel = "stylesheet" href = "шлях до style.css" type
= "text / css" />.

Третій спосіб є найбільш популярним і рекомендованим, тому що дозволяє в

повній мірі користуватися перевагами поділу форми і змісту, що забезпечується
за допомогою CSS.

Шрифти і текст -

Тепер, коли ми вивчили деякі основи CSS, давайте додамо ще кілька правил і
інформацію в наш файл style.css, щоб наш приклад добре виглядав. Перш за
все, давайте зробимо, щоб наші шрифти і текст виглядали трохи краще.

Перш за все, поверніться і знайдіть вихід із Google Fonts, який ви вже десь
зберегли. Додайте елемент <link> де-небудь всередині шапки вашого index.html
(знову, в будь-якому місці між тегами <head> і </ head>). Це буде виглядати
приблизно так:
<Link href = 'http: //fonts.googleapis.com/css? Family =
Open + Sans' rel = 'stylesheet' type = 'text / css'>

Цей код пов'язує вашу сторінку з таблицой стилями, яка завантажує сімейство
шрифтів Open Sans разом з вашою сторінкою і дозволяє вам застосовувати їх до
ваших HTML елементам використовуючи свою власну таблицю стилів.

Арк.
КР.ІП-04.00.00.000 ПЗ
18
Змн. Арк. № докум. Підпис Дата
 Потім, видаліть існуюче правило в вашому style.css файлі. Це був хороший
тест, але червоний текст, насправді, не дуже добре виглядає.

Додайте наступні рядки в потрібне місце, замінивши рядок placeholder

актуальною font-family рядком, яку ви отримали з Google Fonts. (Font-family
просто означає, який шрифт (и) ви хочете використовувати для вашого тексту).
Це правило встановлює глобальний базовий шрифт і розмір шрифту для всієї
сторінки (оскільки <html> є батьківським елементом для всієї сторінки, і всі
елементи всередині нього успадковують такий же font-size і font-family):
html {

font-size: 10px; / * Px значить 'пікселі': базовий шрифт

буде 10 пікселів у висоту * /

font-family: placeholder: тут має бути ім'я шрифту з

Google fonts

Примітка: Всі в CSS документі між / * і * / є CSS коментарем, який браузер

ігнорує при виконанні коду. Це місце, де ви можете написати корисні нотатки
про те, що ви робите.

Тепер ми встановимо розмір шрифту для елементів, що містять текст всередині

HTML тіла (<h1> (en-US), <li>, і <p>). Ми також відцентруємо.

текст нашого заголовка і встановимо деяку висоту рядка і відстань між буквами
в тілі документа, щоб зробити його трохи більш зручним для читання:
h1 {

font-size: 60px;

text-align: center;

p, li {

font-size: 16px;

Арк.
КР.ІП-04.00.00.000 ПЗ
19
Змн. Арк. № докум. Підпис Дата
 line-height: 2;

Позиціонування і стилізація нашого заголовка головної сторінки -

h1 {

margin: 0;

padding: 20px 0;

color: # 00539F;

text-shadow: 3px 3px 1px black;

Ви, можливо, помітили, що є жахливий розрив в верхній частині тіла. Це

відбувається, тому що браузери застосовують деякий стиль за замовчуванням
для елемента <h1> (en-US) (в порівнянні з іншими), навіть якщо ви не
застосовували будь-якої CSS взагалі! Це може звучати як погана ідея, але ми
хочемо, щоб веб-сторінка без стилів мала базову читаність. Щоб позбутися від
розриву, ми переопределили стиль за замовчуванням, встановивши margin: 0 ;.

Потім ми встановили заголовку верхній і нижній padding на 20 пікселів, і

зробили текст заголовка того ж кольору, як і колір фону html.

Тут, ми використовували одне досить цікаве властивість - це text-shadow, яке

застосовує тінь до текстового контенту елемента. Воно має наступні чотири
значення:

Перше значення пікселів задає горизонтальний зсув тіні від тексту - як далеко
вона рухається поперек: від'ємне значення має рухати її вліво.

Друге значення пікселів задає вертикальне зміщення тіні від тексту - як далеко
вона рухається вниз, в цьому прикладі: від'ємне значення має перемістити її
вгору.

Третє значення пікселів задає радіус розмиття тіні - більше значення буде
означати більш розмиту тінь.
Арк.
КР.ІП-04.00.00.000 ПЗ
20
Змн. Арк. № докум. Підпис Дата
 Четверте значення задає основний колір тіні.

І знову спробуйте поекспериментувати з різними значеннями, щоб подивитися,

що ви можете придумати.

центрування зображення -
img {

display: block;

margin: 0 auto;

На закінчення, ми відцентруємо зображення, щоб воно краще виглядало. Ми

можемо використовувати margin: 0 auto прийом знову, як ми це робили раніше
для body, але ми також повинні зробити дещо ще. Елемент <body> є блоковим,
це означає, що він займає місце на сторінці і може мати margin і інші значення
відступів, що застосовуються до нього. Зображення, навпаки, є малими
елементами, тобто вони цього не можуть. Таким чином, щоб застосувати margin
до зображення, ми повинні дати зображенню блочне поведінку за допомогою
display: block ;.

Примітка: Наведені вище інструкції припускають, що ви використовуєте

зображення меншої ширини, ніж задана для <body> (600 пікселів). Якщо ваше

зображення більше, тоді воно вийде за межі <body> і займе простір сторінки.
Щоб виправити це, ви можете 1) зменш ширину зображення використовуючи
графічний редактор, або 2) змінити розмір зображення використовуючи CSS
шляхом установки властивості width для <img> елемента меншого значення
(наприклад 400 px;).

Примітка: Не варто турбуватися, якщо ви ще не розумієте display: block; і

відмінності між блоковим / рядковим. Ви зрозумієте, коли будете вивчати

CSS більш докладно. Ви можете дізнатися більше про різних доступних

значеннях display на нашій сторінці про властивість display.

Арк.
КР.ІП-04.00.00.000 ПЗ
21
Змн. Арк. № докум. Підпис Дата
 РОЗДІЛ 2

МОДЕЛЮВАННЯ ПРОЕКТОВАНИХ РІШЕНЬ

2.1 HyperText Markup Language – мова розмітки гіпертексту

Web-сторінки можуть існувати в будь-якому форматі, але як стандарт

прийнятий Hyper Text Markup Language (рисунок 2.1) - мова розмітки
гіпертекстів, призначена для створення форматованого тексту, насиченого
зображеннями, звуком, анімацією, відеокліпами та гіпертекстовими
посиланнями на інші документи.

Рисунок 2.1 Логотип HTML5

Можна працювати на Web без знання мови HTML, оскільки тексти HTML
можуть створюватися різними спеціальними редакторами та конвертерами. Але
писати безпосередньо на HTML неважко. Можливо, це навіть легше, ніж

Арк.
КР.ІП-04.00.00.000 ПЗ
22
Змн. Арк. № докум. Підпис Дата
 вивчати HTML-редактор або конвертер, які часто обмежені у своїх
можливостях, містять помилки або проводять поганий HTML-код, який не
працює на різних платформах.

Мова HTML існує у кількох варіантах і продовжує розвиватися, але конструкції

HTML швидше за все будуть використовуватись і надалі. Вивчаючи HTML і
пізнаючи його глибше, створюючи документ на початку вивчення HTML і
розширюючи його наскільки це можливо, ми маємо можливість створювати
Web-сторінки, які можна переглянути багатьма браузерами Web, як, і у
майбутньому. Це не виключає можливості використання інших методів,
наприклад метод розширених можливостей, який надається Opera, Google
Chrome, Internet Explorer або іншими браузерами.

Робота з HTML - це спосіб засвоїти особливості створення документів у

стандартизованій мові, використовуючи розширення тільки якщо це дійсно
необхідно.

HTML було ратифіковано World Wide Web Consortium. Він підтримується усіма
браузерами.

Оскільки HTML-документи записуються в ASCI I-форматі, то для її створення

може бути використаний будь-який текстовий редактор.

Зазвичай HTML-документ - це файл із розширенням.html або. htm, у якому

текст розмічений HTML-тегами (англ. tag - спеціальні вбудовані вказівки).
Засобами HTML задаються синтаксис та розміщення тегів, відповідно до яких
браузер відображає вміст веб-документа. Текст самих тегів Веб-браузером не
відображається.

Усі теги починаються символом '<' і закінчуються символом '>'. Зазвичай є пара
тегів - стартовий (відкриває) і завершальний (закриває) тег (схоже на дужки, що
відкриваються і закриваються в математиці), між якими міститься інформація,
що розмічується:
<p>Інформація</p>

Арк.
КР.ІП-04.00.00.000 ПЗ
23
Змн. Арк. № докум. Підпис Дата
 Тут стартовим тегом є тег <p>, а завершальним -</p>. Завершальний тег
відрізнятиметься від стартового лише тим, що перед текстом у дужках <>
стоїть символ '/' (слеш).

Браузер, який читає HTML-документ, відображає його у вікні, використовуючи

структуру HTML-тегів. У кожному HTML-документі повинні бути присутні три
головні частини:

A) Оголошення HTML;

B) Заголовна частина;

C) Тіло документа.

A) Оголошення HTML

<HTML> та </HTML>. Пара цих тегів повідомляє програмі перегляду

(браузеру) що між ними укладено документ у форматі HTML, причому першим
тегом у документі має бути тег <HTML> (на самому початку документа), а
останнім - </HTML> (на самому кінці документа).
<HTML> </HTML>

B) Заголовна частина.

<HEAD> та </HEAD>. Між цими тегами міститься інформація про документ

(назва, ключові слова для пошуку, опис тощо). Однак найбільш важливою є
назва документа, яку ми бачимо у верхньому рядку вікна браузера та у списках
"Вибране (BookMark)". Спеціальні програми-спайдери пошукових систем
використовують назву документа для побудови баз даних. Для того, щоб дати
назву своєму HTML-документу, текст поміщається між тегами <TITLE> і
</TITLE>.
<HTML> <HEAD> <TITLE>Моя перша сторінка</TITLE> </HEAD>
</HTML>

C) Тіло документа.

Арк.
КР.ІП-04.00.00.000 ПЗ
24
Змн. Арк. № докум. Підпис Дата
 Третьою головною частиною документа є його тіло. Воно слідує відразу за
заголовком і знаходиться між тегами <BODY> та </BODY>. Перший має
стояти відразу після тега </HEAD>, а другий - перед тегом </HTML>. Тіло
HTML-документа - це місце, куди автор містить інформацію, відформатовану
засобами HTML.
<HTML> <HEAD> <TITLE> Моя перша сторінка</TITLE> </HEAD>
<BODY> ..........

</BODY> </HTML>

Тепер ми можемо написати HTML-код нашої сторінки:

<HTML> <HEAD> <TITLE>Моя перша сторінка</TITLE> </HEAD>
<BODY> Тут будуть мої сторінки! </BODY> </HTML>

У розділі BODY усі символи табуляції та кінця рядків браузером ігноруються

та ніяк не впливають на відображення сторінки. Тому переклад рядка у
вихідному тексті HTML-документа не призведе до початку нового рядка у
тексті, що відображається оглядачем за відсутності спеціальних тегів. Це
правило дуже важливо пам'ятати і не забувати ставити розділяючі рядки теги,
інакше текст не матиме абзаців, і він стане нечитаним.

Для початку нового рядка використовується тег <br> (скор. від англ. break -
перервати). Цей тег призводить до відображення браузером подальшого тексту
з початку наступного рядка. Тег, що закриває для нього, не використовується.
Він зручний, якщо потрібно з якогось місця писати з нового рядка без початку
нового абзацу, наприклад, у вірші. Повторне його використання дозволяє
вставити один або кілька порожніх рядків, відсунувши наступний фрагмент
сторінки вниз.

Суцільний текст без проміжків читається не дуже легко, його незручно

переглядати та знаходити потрібні місця. Розбитий на абзаци текст
сприймається набагато швидше. Для початку нового абзацу використовується
тег <p> (англ. paragraph – абзац). Цей тег, крім початку нового рядка, вставляє

Арк.
КР.ІП-04.00.00.000 ПЗ
25
Змн. Арк. № докум. Підпис Дата
 один порожній рядок. Але багаторазове повторення <p>, на відміну від <br>, не
призведе до появи декількох порожніх рядків, залишиться той самий порожній
рядок.

Усередині дужок тега, крім його назви, можуть розміщуватися також атрибути
(англ. atributes - атрибути). Вони відокремлюються від назви і між собою
пробілами (одним або декількома), а пишуться як ім'я_атрибута="значення".
Якщо значення не містить прогалин, то лапки можуть бути опущені, але робити
так не рекомендується. Тег <p> може містити атрибут ALIGN, що визначає
вирівнювання абзацу. За замовчуванням абзац вирівняно ліворуч ALIGN="left".
Можливі також вирівнювання вправо ALIGN="right" та по центру
ALIGN="center". При використанні атрибутів, після форматованого тексту слід
використовувати тег, що закриває </p>. Якщо його немає, то новий тег означає
закриття попереднього, відповідно вкладені неможливі. Вирівняти текст
центром можна також тегом <CENTER>.

Тепер ми можемо помістити на нашу Web-сторінку певний текст із різним

вирівнюванням:
<HTML> <HEAD> <TITLE>Моя перша сторінка</TITLE> </HEAD>
<BODY> <p align=center>Тут будуть мої особисті сторінки!
<p align=left>На них Ви зможете знайти: <bp> - розповідь
про мене та мої захоплення; <bp> – мої фотографії.

<p align=right>З однієї з моїх сторінок можна буде

надіслати мені електронного листа.

</BODY> </HTML>

2.2 Cascading Style Sheets – каскадні таблиці стилів

Арк.
КР.ІП-04.00.00.000 ПЗ
26
Змн. Арк. № докум. Підпис Дата
 CSS (Cascading Style Sheets – каскадні таблиці стилів) – одна з базових
технологій у сучасному Інтернеті. Нечасто можна зустріти сайт, зверстаний без
застосування CSS (рисунок 2.2).

Рисунок 2.2 Логотип CSS3

CSS-код – це список інструкцій для браузера, – як і де відображати елементи

веб-сторінки, написані особливим чином. Під «елементами» зазвичай маються
на увазі теги XHTML/HTML та їх вміст.

У друкованій справі питання оформлення книги вирішується на ранніх етапах її

провадження. Від вибраних шрифтів, відступів та фарб залежить буквально все.
І після вплинути на дизайн, на жаль, неможливо.

У випадку із сайтами все не так. Вміст сторінки майже не пов'язаний із

дизайном її зовнішнього вигляду. Змінивши лише один рядок у css-стилях,
дизайнер сайту може радикально змінити оформлення багатьох тисяч сторінок
сайту, зробивши всі заголовки, скажімо, зеленими, перемістивши блок новин у
кут або змінивши фон сторінок.

Арк.
КР.ІП-04.00.00.000 ПЗ
27
Змн. Арк. № докум. Підпис Дата
 Інструкції CSS зручно зберігати у вигляді окремого текстового файлу з
розширенням .css, або у вигляді окремого текстового фрагмента на початку
XHTML/HTML-документа (див. включення CSS в HTML документ).

Основна ідея CSS полягає в тому, щоб відокремити дизайн документа від його
вмісту. CSS відповідає за оформлення та зовнішній вигляд, а XHTML/HTML –
за зміст та логічну структуру документа.

Подивимося на фрагмент XHTML-документу:

Зі службової XHTML розмітки ми бачимо тільки елемент заголовка h1 і абзацу

p, і ні слова про оформлення — шрифти, колір тексту, фон, відступи та інший
дизайн. Все це покладено на CSS:

CSS - одна з широкого спектру технологій, схвалених консорціумом W3C і

отримали загальну назву "стандарти Web". У 1990-х роках стала зрозумілою
необхідність стандартизувати Web, створити якісь єдині правила, за якими
програмісти та веб-дизайнери проектували б сайти. Так з'явилися мови HTML
4.01 та XHTML та стандарт CSS.

На початку 1990-х браузери мали свої стилі для відображення веб-сторінок.

HTML розвивався дуже швидко і був здатний задовольнити всі потреби з
оформлення інформації, що існували на той момент, тому CSS не отримав тоді
широкого визнання.

Термін «каскадні таблиці стилів» було запропоновано Хокон Віум Лі у 1994

році. Разом із Бертом Босом він почав розвивати CSS.

На відміну від багатьох мов стилю, що існували на той момент, CSS

використовує успадкування від батька до нащадка, тому розробник може
визначити різні стилі, ґрунтуючись на вже визначених раніше стилях.

У середині 1990-х Концорціум Всесвітньої павутини (W3C) став виявляти

інтерес до CSS, і в грудні 1996 року було видано рекомендацію CSS1.

HTML використовується для структурування вмісту сторінки. CSS

використовується для форматування цього структурованого вмісту.
Арк.
КР.ІП-04.00.00.000 ПЗ
28
Змн. Арк. № докум. Підпис Дата
 Згоден, це звучить якось химерно. Але, будь ласка, читайте далі. Незабаром все
почне прояснюватись.

Давно, коли Мадонна була дівою, а хлопець на ім'я Tim Berners Lee винайшов
World Wide Web, мова HTML використовувалася тільки для виведення
структурованого тексту. Автор міг лише розмічати текст: "це - заголовок" або
"це - параграф", використовуючи HTML-теги, такі як <h1> та <p>.

З розвитком Web дизайнери почали шукати можливості форматування

онлайнових документів. Щоб задовольнити збільшеним вимогам споживачів,
виробники браузерів (тоді - Netscape і Microsoft) винайшли нові HTML-теги,
такі як <font>, які відрізнялися від оригінальних HTML-тегів тим, що вони
визначали зовнішній вигляд, а не структуру.

Це також призвело до того, що оригінальні теги структурування, такі як

<table>, стали дедалі більше застосовуватися для дизайну сторінок замість
структурування тексту. Багато нових тегів дизайну, таких як <blink>,
підтримувалися лише одним браузером. "Вам необхідний браузер X для
перегляду цієї сторінки" - така відмова стала звичайним явищем на веб-сайтах.

CSS було створено для виправлення цієї ситуації шляхом надання веб-
дизайнерам можливостей точного дизайну, які підтримують усі браузери.
Одночасно відбувся поділ подання та вмісту документа, що значно спростило
роботу.

2.3 JavaScript

Гіпертекстова інформаційна система складається з безлічі інформаційних

вузлів, безлічі гіпертекстових зв'язків, визначених на цих вузлах та
інструментах маніпулювання вузлами та зв'язками. Технологія World Wide Web
- це технологія ведення гіпертекстових розподілених систем в Інтернеті, і, отже,

Арк.
КР.ІП-04.00.00.000 ПЗ
29
Змн. Арк. № докум. Підпис Дата
 вона повинна відповідати загальному визначенню таких систем. Це означає, що
перелічені вище компоненти гіпертекстової системи повинні бути і в Web.

Web як гіпертекстову систему можна розглядати з двох точок зору. По-перше,

як сукупність сторінок, що відображаються, пов'язаних гіпертекстовими
переходами (посиланнями - контейнер ANCHOR). По-друге, як безліч
елементарних інформаційних об'єктів, що складають сторінки, що
відображаються (текст, графіка, мобільний код і т.п.). В останньому випадку
безліч гіпертекстових переходів сторінки - це такий самий інформаційний
фрагмент, як і вбудована в текст картинка.

При другому підході гіпертекстова мережа визначається на безлічі

елементарних інформаційних об'єктів самими HTML-сторінками, які грають
роль гіпертекстових зв'язків. Цей підхід більш продуктивний з точки зору
побудови сторінок, що відображаються "на льоту" з готових компонентів.

При генерації сторінок у Web виникає проблема, пов'язана з архітектурою

"клієнт-сервер". Сторінки можна генерувати як за клієнта, і за сервера. У 1995
році фахівці компанії Netscape створили механізм управління сторінками на
стороні клієнта, розробивши мову програмування JavaScript (рисунок 2.3).

Таким чином, JavaScript – це мова керування сценаріями перегляду

гіпертекстових сторінок Web на стороні клієнта. Якщо бути точнішим, то
JavaScript – це не лише мова програмування на стороні клієнта. Liveware,
прабатько JavaScript, є засобом підстановок на стороні сервера Netscape. Проте
найбільшу популярність JavaScript забезпечило програмування за клієнта.

Основна ідея JavaScript полягає у можливості зміни значень атрибутів HTML-

контейнерів та властивостей середовища відображення у процесі перегляду
HTML-сторінки користувачем. При цьому перезавантаження сторінки не
відбувається.

Арк.
КР.ІП-04.00.00.000 ПЗ
30
Змн. Арк. № докум. Підпис Дата
 Насправді це виявляється у тому, що можна, наприклад, змінити колір фону
сторінки чи інтегровану у документ картинку, відкрити нове вікно чи
попередження.

Рисунок 2.3 Логотип JavaScript

Назва "JavaScript" є власністю Netscape. Реалізація мови, здійснена

розробниками Microsoft, офіційно називається Jscript. Версії JScript сумісні
(якщо бути точним, то не до кінця) з відповідними версіями JavaScript, тобто.
JavaScript є підмножиною мови JScript.

JavaScript стандартизований ECMA (European Computer Manufacturers

Association – Асоціація європейських виробників комп'ютерів). Відповідні
стандарти мають назви ECMA-262 та ISO-16262. Цими стандартами
визначається мова ECMAScript, яка приблизно еквівалентна JavaScript 1.1.
Зазначимо, що не всі продажі JavaScript на сьогодні повністю відповідають
стандарту ECMA. В рамках цього проекту ми завжди будемо використовувати
назву JavaScript.

Арк.
КР.ІП-04.00.00.000 ПЗ
31
Змн. Арк. № докум. Підпис Дата
 2.4 jQuery

jQuery — бібліотека JavaScript, що фокусується на взаємодії JavaScript та

HTML. Бібліотека jQuery допомагає легко отримувати доступ до будь-якого
елемента DOM, звертатися до атрибутів та вмісту елементів DOM,
маніпулювати ними. Також бібліотека jQuery надає зручний API для роботи з
Ajax (рисунок 2.4).

Рисунок 2.4 Логотип jQuery

HTML була однією з перших речей, яку Джон Резіг освоїв, коли він лише почав
займатися програмуванням. Резиг програмував на QBasic, коли його знайомий
показав йому, як створити веб-сторінку (використовуючи Angelfire), і навіть
основи HTML. Батько подарував йому на Різдво дві книги з HTML. Саме тоді,
коли він тільки почав програмувати Visual Basic, HTML і веб-дизайн дуже
зацікавили його.

Арк.
КР.ІП-04.00.00.000 ПЗ
32
Змн. Арк. № докум. Підпис Дата
 Але пристрасть до JavaScript прийшла значно пізніше, приблизно 2004 року.
Тоді Резіг отримував ступінь у галузі комп'ютерних наук і працював на
півставки у місцевій фірмі Brand Logic. Він займався дизайном сайту, в якому
створювався скролінг користувача. Джон був розчарований та засмучений,
особливо тому, що використав код інших розробників, після чого вирішив
серйозно вивчити JavaScript. Вивчивши, дійшов висновків, що JavaScript - це
проста, але витончена мова, яка є неймовірно потужною для вирішення
багатьох завдань. Протягом найближчої пари років Д. Резіг створив безліч
різних додатків JavaScript, перш ніж закінчити створення jQuery. Основною
метою створення jQuery Резиг бачив можливість закодувати багаторазові
шматки коду, які дозволять спростити JavaScript і використовувати їх так, щоб
не турбуватися про крос-браузерні питання. Бібліотека була представлена
громадськості на комп'ютерній конференції BarCamp у Нью-Йорку в 2006 році.

Так само, як CSS відокремлює візуалізацію від структури HTML, JQuery

відокремлює поведінку від структури HTML. Наприклад, замість прямої
вказівки на обробник події натискання кнопки управління передається JQuery,
ідентифікує кнопки і потім перетворює його в обробник події кліка. Такий
поділ поведінки та структури також називається принципом ненав'язливого
JavaScript.

Бібліотека jQuery містить функціональність, що корисна для максимально

широкого кола завдань. Тим не менш, розробниками бібліотеки не ставилося
завдання поєднання в jQuery функцій, які б підійшли усюди, оскільки це
призвело б до великого коду, більша частина якого не затребувана. Тому було
реалізовано архітектура компактного універсального ядра бібліотеки та
плагінів. Це дозволяє зібрати для ресурсу саме ту JavaScript-функціональність,
яка на ньому була б затребувана.

Можливості jQuery:

- Двигун кросбраузерних CSS-селекторів Sizzle, що виділився в окремий

проект;
Арк.
КР.ІП-04.00.00.000 ПЗ
33
Змн. Арк. № докум. Підпис Дата
 - Перехід по дереву DOM, включаючи підтримку XPath як плагін;
- події;
- візуальні ефекти;
- AJAX-доповнення;
- JavaScript-плагіни.

РОЗДІЛ 3

ПРОГРАМНИЙ РОЗДІЛ

3.1 Опис створення «скелету» сайту

Для побудови загальної структури сайту, необхідно створити php-документ,

який і стане «скелетом» мого проекту .
Після того як файл створено необхідно додати відповідні теги для формування
умовного «скелету» .
«Скелет» HTML-документу створено, залишилось «наростити» на ньому
«м’язи».
Для подальшої праці над нашим проектом необхідно підключити шрифти
майбутнього сайту, я використовуватиму ресурс GoogleFonts та підключатиму
шрифти «Open Sans», «Cardo», «Raleway» .
Після цього я скопіював даний код та вставив його у свій HTML-документ,
паралельно створив файл «style.css» й імпортував необхідний код у нього.
Опісля підключення необхідних шрифтів можна приступати до безпосерелньої
«верстки» сайту.

3.2 Створення і наповнення блоків “about”, “index”, “quickstart”,

“footer”, “menu”

Приступаю до написання коду для умовного блоку «menu».

<div class='menu-con-container'>

Арк.
КР.ІП-04.00.00.000 ПЗ
34
Змн. Арк. № докум. Підпис Дата
 <div class="menu-con-backdrop">
</div>
<div class="menu-con-outer">
<div class="menu-con-inner">
<div class="menu-con-logo">
<a href='/'>
<div class="menu-ico-logo">
</div>
</a>
</div>
,,,,
У цьому блоці реалізовані логотип мого сайту та меню навігації, як для
пристроїв із достатньою шириною екрану, так і для мобільних пристроїв
створено так зване меню «бургер». Також для майбутнього застосування jQuery
додані спеціальні атрибути «data-scroll», що полегшать навігацію по веб-
застосунку.
Після створення блоку «menu» необхідно прописати стилі для його класів у
файлі «main.css». Ці стилі додадуть до нашого «скелета», умовні «м’язи», що
дозволить зробити сайт презентабильним та приблизити його до кінцевого
зразка.
Селектори у файлі «main.css», які стосуються безпосередньо блоку «menu» і в
цілому нашого php-документа. Приступаю до написання «загальних»
селекторів для відповідних тегів HTML.
body {
width: 100%;
height: 100%;
border: none
}
iframe {
width: 100%;

Арк.
КР.ІП-04.00.00.000 ПЗ
35
Змн. Арк. № докум. Підпис Дата
 height: 100%;
border: none
}
Приступаю до написання селекторів для класу «menu-con-container».
.menu-con-container {
position: fixed;
z-index: 9997;
top: 0;
width: 100%;
height: auto;
background: rgba(255,255,255,.05);
-webkit-backdrop-filter: blur(6px);
,,,,
Приступаю до написання селекторів для класу «menu» і «дочірніх» класів.
.menu-con-outer {
position: relative;
top: 0;
height: auto;
margin: auto 70px
}
.menu-con-inner {
max-width: 1200px;
min-height: 70px;
margin: 0 auto
,,,,
У цих селекторах реалізовані стилі, які дозволять відобразити головне меню,
логотип, «бургер-меню» крім того стилі які стосуватимуться цілої сторінки в
загальному.

Арк.
КР.ІП-04.00.00.000 ПЗ
36
Змн. Арк. № докум. Підпис Дата
 Рисунок 3.1 Меню сайту

Приступаю до написання коду для умовного блоку «index».

<div class="page-con-content">
<div class="wavebar-con-container-master">
<div class="wavebar-con-wrap">
<div class="wavebar-svg-object">
</div>
<div class="wavebar-svg-object">
</div>
,,,,
Приступаю до написання селекторів для класу «index» і «дочірніх» класів.
page-con-content {
position: relative;
top: 0;
width: 100%;
min-height: 100%
}
.page-con-container {
position: relative;
top: 0;
height: auto;
margin: auto 60px
}
,,,,

Арк.
КР.ІП-04.00.00.000 ПЗ
37
Змн. Арк. № докум. Підпис Дата
 Рисунок 3.2 Головна сторінка

У цих селекторах та й у цьому блоці «index» реалізовані стилі, які дозволять

відобразити фонове зображення не тільки для саме цього блоку, а й для блоку
«menu» також, створено слоган сайту та додано кнопку .
Приступаю до написання коду для умовного блоку «about». Це один із
найоб’ємніших блоків у цьому сайті.
<div class="page-con-content">
<div class="banner-con-container">
<div id="object-particles">
</div>
<div class="wavebar-con-container">
<div class="wavebar-con-wrap">
<div class="wavebar-svg-object">
</div>
<div class="wavebar-svg-object">
</div>
,,,,
Приступаю до написання селекторів для класу «about» і «дочірніх» класів.
.banner-con-container {
position: relative;
z-index: 2;
overflow: hidden;

Арк.
КР.ІП-04.00.00.000 ПЗ
38
Змн. Арк. № докум. Підпис Дата
 width: 100%;
height: 380px;
background:
,,,,
У цих селекторах та й у цьому блоці «about» реалізовані стилі, які дозволять
відобразити роботи даної компанії у спеціальних блоках, із гарною зміною
кольору, додаванням опису проекту при наведенні

Рисунок 3.3 Сторінка “Цікаві факти”

Приступаю до написання коду для умовного блоку «quicstart».

div class="footer-con-container">
<div class="footer-con-overlay">
<div class="wavebar-con-container">
<div class="wavebar-con-wrap">
<div class="wavebar-svg-object">
</div>
<div class="wavebar-svg-object">
</div>
</div>
</div>
<div class="footer-con-header">
...

Арк.
КР.ІП-04.00.00.000 ПЗ
39
Змн. Арк. № докум. Підпис Дата
 Рисунок 3.4 Сторінка “Українські медалісти”
Приступаю до написання селекторів для класу «Footer» і «дочірніх» класів.
.footer-con-container {
position: relative;
z-index: 1;
overflow: hidden;
width: 100%;
height: auto;
background: #000
}
,,,,
У цих селекторах та й у цьому блоці «Footer» реалізовані стилі, які дозволять
відобразити адресу розташування компанії, соціальні мережі компанії,
короткий опис компанії та ініціали розробника і дизайнера сайту .

Рисунок 3.5 Footer сайту

3.3 Робота із jQuery

Арк.
КР.ІП-04.00.00.000 ПЗ
40
Змн. Арк. № докум. Підпис Дата
 Для додавання фіксованого меню, слайдера, навігації і частково «бургер-
меню» нам необхідно прописати JavaScript-функціонал для нашого сайту, для
цього треба створити файл «main.js»
Імпортую бібліотеку jQuery у файл «index.php» . Для цього я використав
сервери CDN.
Додамо фіксоване меню у нашому сайті, після того, як користувач опустився
нижче блоку «index». Для цього я пропишу функцію, яка після того, як
користувач «проскролив» нижче блоку «index» додаватиме до блоку «menu»
клас «Fixed», який і зробить наше меню фіксованим.
Приступаю до написання відповідної функції.
// Mobile touch overflow
$(document).bind("mobileinit", function() {
$.mobile.touchOverflowEnabled = true;
});
// Mobile friendly touch compatibility
$(document).ready(function() {

document.documentElement.addEventListener('touchstart',
function(event) {
if (event.touches.length > 1) {
event.preventDefault(); // Prevents
otherwise
}
}, false);
});

,,,,

Весь програмний код сайту ви можете детально переглянути за посиланням

https://github.com/Nazariy1406/olipgame

Арк.
КР.ІП-04.00.00.000 ПЗ
41
Змн. Арк. № докум. Підпис Дата
 ВИСНОВКИ

Коли ви подорожуєте Інтернетом сьогодні, ви знайдете багато дуже добре

розроблених сайтів, які швидко завантажуються, виглядають привабливо,
мають чітко визначені інформаційні розділи та зручні функції навігації. Такі
сайти просто запрошують вас відвідати їх, відпочити, зупинитися на деякий
час, повеселитися та дізнатися про щось нове. Якщо хтось довгий час
залишається на сайті і навіть не помічає цього, цей сайт здається дуже добре
продуманим. Багато веб-майстрів не витрачають час на обмірковування потоку
інформації та обмежуються лише розміщенням тексту та зображень на сторінці.
Хоча багато сайтів можуть похвалитися тим, що у них набагато більше
відвідувачів, ніж у їхніх конкурентів, це не найкращий показник якості роботи.
Найкращим показником є час: якщо користувачі залишаються на сайті досить
довго, щоб пройти через різні рівні та розділи, можна бути впевненим у тому,
що робота виконана добре. Сподіваюсь, що проектований сайт справді стане
гігантом серед інших веб-ресурсів Інтернету.

Під час виконання проекту я навчився створювати веб-сайти, оволодів

навичками HTML, CSS та jQeury, створив сайт та виконав проект, розробив
«скелет» сайту, блоки “about”, “index”, “quickstart”, “footer”, “menu”.
попрацював із jQuery, зробив сайт адаптивним/

Арк.
КР.ІП-04.00.00.000 ПЗ
42
Змн. Арк. № докум. Підпис Дата
 Арк.
КР.ІП-04.00.00.000 ПЗ
43
Змн. Арк. № докум. Підпис Дата
 СПИСОК ВИКОРИСТАНОЇ ЛІТЕРАТУРИ

1. https://www.w3schools.com/Css/
2. https://www.w3schools.com/html/default.asp
3. https://learn.jquery.com/
4. https://cdnjs.com/libraries/jquery
5. https://kenwheeler.github.io/slick

Арк.
КР.ІП-04.00.00.000 ПЗ
44
Змн. Арк. № докум. Підпис Дата
ДОДАТКИ
 ДОДАТОК А

Посилання на GitHub

https://github.com/Nazariy1406/olipgame