Гіпертекст і гіпермедіа

Вступ в дісципліну . Основні

поняття та визначення

Лекція 1
 Гіпертекст і гіпермедіа
провідний лектор 1-го потоку
Єрохін Андрій Леонідович

лектор 2-го потоку

Доцент кафедри програмної інженерії, кандидат технічних наук

Груздо Ірина Володимирівна

2
https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRrGX5b2pMS_8bg3l5
a6ylWiyb_5nLGZRe4CQ&usqp=CAU
Мета дисципліни – вивчення
 методів сучасних Інтернет-технологій
 основ об’єктної моделі документа DOM
 основ технологій HTML, DHTML, ХHTML
 CSS
 JavaScript
 Bootstrap

та отримання базових компетенції і вмінь

відносно тем дисципліни
3
 План лекційного курсу
Змістовий модуль 1. Вступ до www
Тема 01. Мета і задачі вивчення дисципліни.
Тема 02. HTML.
Тема 03. Поняття про верстку.
Тема 04. Каскадні таблиці стилів CSS.
Тема 05. Об’єктна модель динамічного HTML.

Змістовий модуль 2. Основи сценаріїв на Javascript

Тема 06. Основи сценаріїв.
Тема 07. Вбудовані об’єкти мови Javascript.
Тема 08. Об’єкт Navigator.
Тема 09. Базові події Javascript.
Тема 10. Методи для роботи з таймерами.
Тема 11. Об’єкт document.
Тема 12. Структура XML-документу.
Тема 13. Bootstrap . 4
 Лабораторні роботи
1. HTML5 та CSS

2. СSS GridLayout. Медіа-запити

3. Динамічний HTML. Форми. Основи

JavaScript

4. Основи XML. Валідація HTML, CSS

5. Bootstrap 4
5
 Література
1. Єрохін А.Л., Самсонов В.В.
Методи та засоби Інтернет-технологій:
Навч. посібник. – Харків: СМІТ, 2008. – 264
с. (бібліотека ХНУРЕ)

2. http://www.w3schools.com
3.
https://html.spec.whatwg.org/m
ultipage/

6
 Література
1) Методичні вказівки до лабораторних робіт з дисципліни
«Гіпертекст та гіпермедіа» для студентів усіх форм
навчання першого (бакалавського) рівня вищої освіти
спеціальності 121 – Інженерія програмного забезпечення,
освітня програма Програмна інженерія / Упоряд. А.Л. Єрохін,
І.В. Груздо., К.В.Зибіна – Харків: ХНУРЕ, 2021. – 56 с.

2) Методичні вказівки до практичних робіт з дисципліни

«Гіпертекст та гіпермедіа» для студентів спеціальності
6.050103 «Програмна інженерія» / Упоряд. А.Л. Єрохін,
І.В. Груздо, К.В. Зибіна. – Харків: ХНУРЕ, 2020. – 42 с.

3) Методичні вказівки до самостійної роботи з дисципліни

«Гіпертекст та гіпермедіа» для студентів спеціальності
6.050103 «Програмна інженерія» / Упоряд. А.Л. Єрохін,
І.В. Груздо, К.В. Зибіна. – Харків: ХНУРЕ, 2020. – 42 с.

7
 Основні та додаткові матеріали лекцій і методичні
вказівки до лабораторних робіт знаходяться:

- dl.nure.ua

- курс Harvard CS50 (CSS, HTML, JavaScript и PHP):

https://www.youtube.com/watch?v=BJHb7jSKC2A

8
 Гіпертекст
• це текст із внесеними до нього
визначниками наступних дій, які будуть
виконуватися після виявлення даного
визначника

9
 Гіпермедіа
• це розширення поняття гіпертексту за
рахунок інших інформаційних ресурсів
(графіка, аудіо- та відеоінформація)

10
 Програмні засоби гіпермедіа

• Гіпермедіа з гіпертекстом
– Dynamic HTML
– AJAX

• Гіпермедіа з мультимедіа
– ActiveX, Firefox plugins
– Adobe Flash
– Java
– Віртуальні комп’ютерні середовища

11
 Загальні відомості про
мережі і Internet
ПК Канал
ПК
- вузол зв’язку - вузол

Комп’ютерні мережі - глобальні і локальні

Локальні мережі використовують з’єднання використовують

з’єднання комп’ютерів по різним топологіям

Вузол – комп’ютер в мережі

Якщо виділяється головний вузол – то це host

Інформація, яка передається між вузлами, укладається в

пакети
12
• мережа однорангова (P2P)

ПК1 ПК2 ПК3 ПК4

• з виділеним сервером
ПК1-
ПК2 сервер ПК3

ПК4
13
 Сучасні мережі

1. Internet (мережа на основі протоколів TCP/IP)

2. Intranet - різновид локальної мережі, в якій

інформація передається протоколами TCP/IP
(локальная сеть, которая работает по Internet-
протоколам)

3. Extranet: Internet + Іntranet

14
 Комп'ютерні мережі та
їх призначення
Комп'ютерною мережею називається комплекс
територіально розосереджених комп'ютерів і
термінальних пристроїв, пов'язаних між собою каналами
передачі даних.

Комп'ютерна мережа - це сукупність комп'ютерів, які

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

Основними елементами мережі є персональні ЕОМ.

Зв'язок між комп'ютерами здійснюється за допомогою

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

Комп'ютери в мережі з'єднані лініями зв'язку :

 провідні лінії зв'язку без ізолюючих і екрануючих
оплеток;
 кабельні, де для передачі сигналів використовуються
такі лінії зв'язку як кабелі "кручена пара", коаксіальні
кабелі або оптоволоконні кабелі;
 бездротові (радіоканали наземного і супутникового
зв'язку), що використовують для передачі сигналів
електромагнітні хвилі, які розповсюджуються в
середовищі.
16
 Канали зв’язку

провідні безпровідні

телефонні радіоканал:
канали
-radio ethernet
коаксіал
- мобільні
стільникові
вита пара канали

супутникові
оптико-
волоконний канали
канал
17
 Різновиди комп'ютерних
мереж
За масштабом і територіальною распределенность
 Локальні (LAN = Local Area Network) - з'єднують комп'ютери в одному
або декількох сусідніх будинках.

 Міські (MAN = Metropolitan area network, загальноміські) міські мережі

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

 Глобальні (WAN = Wide Area Network, загальносвітові) - глобальна

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

 GAN (GAN = global area network) є мережа, яка використовується для

підтримки мобільного зв'язку через довільну кількість бездротових
локальних мереж, супутникових зон покриття і т. Д. Головним завданням
в галузі мобільного зв'язку є передача від користувача повідомлення з
однієї локальної зони покриття в іншу.
18
 Різновиди комп'ютерних
мереж
Відстань між Розташування
Тип
ЕОМ ЕОМ мережі
1м Поруч (впритул) Персональна мережа
10 м Кімната 
100 м Будівля  Локальна мережа
1 км Кампус 

10 км Місто Міська мережа

100 км Країна 
 Глобальна мережа
1000 км Континент 

10 000 км Планета Інтернет

19
Різновиди комп'ютерних
мереж

20
 Типові топології мереж
Кільце
Для обміну пакетами використовується метод маркера

21
 Зірка
Переваги: надійність
Недоліки: висока вартість

22
Типові топології мереж
шина

23
Типові топології мереж
сітка

24
 Адресація в мережах

1) MAC-адреса 12-25-D3-C1-CC-6A

2) Абсолютна адресація (IP - адреса) 121.128.199.01

3) Доменна адресація www.nure.ua

25
 Абсолютна адреса
Абсолютна адреса (IP-адреса) містить 4 байта інформації,
кожен з яких відповідає за свій клас мереж (IPv4)

Реально використовується три класи адрес мережі - А, В і С

• Клас А: адреса починається з нульового біта, номер
мережі займає 1 байт, номер вузла - 3 байти.

• Клас В: номер мережі займає 2 байти.

• Клас С: під номер мережі відводиться 3 байти, <1 байт -

під номер вузла.

• Клас D: multicast (широкомовні мережі) - мережі, в яких

застосовується групова розсилка.
26
 Абсолютна адреса
А призначений для роботи з невеликою кількістю (до 126)
мереж, які вміщують велику кількість комп’ютерів (до
16777214). Тому тут один октет – крайній зліва задає адресу
мережі, а три правих - адресу комп’ютера.
121.128.199.01
В призначений для роботи із середньою кількістю мереж
(до 16384), із середньою кількістю комп’ютерів (до 65534).
В таких адресах два октети - мережевий ідентифікатор, а два
– ідентифікатор комп’ютера.
121.128.199.01
С призначений для роботи з великою кількістю мереж (до 2
097 092), із малою кількістю комп’ютерів (до 254). В таких
адресах три лівих октети вміщують ідентифікатор мережі, а
крайній правий – ідентифікатор комп’ютера.
121.128.199.01 27
 Особливості IPv6
Потік – послідовність пакетів, які посилаються
відправником певному адресату.

Усі пакети певного потоку повинні бути піддані певній

обробці, яка задається додатковими заголовками

28
 Особливості IPv6
• в протоколі IPv6 поля введена «Мітка потоку», що
дозволяє спростити процедуру маршрутизації
однорідного потоку пакетів
• 128 біт/адреса
Адреса IPv6 відображається як 8 груп по 4 шістнадцяткових числа,
разділених двокрапкою
Приклад:
http://[7628:0d18:11a3:09d7:1f34:8a2e:07a0:765d]/
Заголовок дейтаграми IPv6
0 4 8 16 24 31
Версія Пріоритет Мітка потоку (24 біти)
(4 біти) (4 біти)
Наступний заголовок Ліміт кількості
Довжина даних (16 біт) (8 біт) переходів (8 біт)

40 байт
ІР-адреса відправника (128 біт)

29
ІР-адреса отримувача (128 біт)
Взаємодія протоколів
IPv6 та IPv4
IPv4 Internet

IPv4 Мережа
провайдера

Комутатор
IPv6
доступу IPv6 Internet

30
 Взаємодія протоколів
IPv6 та IPv4 (Тунелювання)
IPv6 Internet IPv4 Internet

Магістральна мережа
IPv4

Мережа IPv6
Мережа IPv6

Мережа IPv4

31
 Доменна адресація побудована за стандартом DNS
( Domen Name System)

DNS заснована на IP-адресі

Кожній IP-адресі співставляється відповідне доменне ім’я

Наприклад:
www.nure.ua

32
 Приклади іменування вузлів в
Інтернет
IP-адреса 192.168.23.10

№глоб. №мережі №підмережі №вузла

мережі

DNS-адреса lib.nure.ua

ім’я ім’я лок. ім’я глоб.

вузла мережі мережі
33
 Адреса документа в Інтернеті
URL (Uniform Resource Locator) - універсальна
адреса документа в Інтернеті.

http: // www.vasya.ua / images/new/ qq.jpg

протокол адреса сайту каталог (папка) Ім’я файлу

головна сторінка
http: // www.vasya.ua сайту: index.html,
index.htm

ftp: // files.vasya.ua / pub / download / qq.zip

файл на FTP-сервері
34
 Домен -
• область, яка розділяє вузли за
територіальною ознакою
Рівні доменів:
-верхній рівень .ua .com
.edu
.cn .gov
.biz
.de
.org
.fr .aero
.tv
.ca
35
Піддомени
.kharkov.ua
.gov.ua
.com.ua

Підпіддомени
.kture.kharkov.ua

и т.д.

36
 Ієрархія
протоколів Internet 5 Application

Рівні протоколів TCP/IP 4 Transport

відповідають стандарту OSI
OSI має 7 рівнів взаємодії.
3 Internet

2 Network
Стек протоколів TCP/IP

1 Hardware

37
 • Hardware – протоколи середовища
передачі даних.

5 Application • Network –апаратно залежне ПЗ, яке

реалізує розповсюдження інформації на
певних ділянках середовища передачі
даних.
4 Transport
• Internet (межмережний рівень) –
представлений протоколом IP,
3 Internet маршрутизація інформації від вузла-
відправника до вузла-адресата.

• Transport (транспортний рівень) –

2 Network доставка пакетів, збергіання цілісності
потоку пакетів.

• Application (прикладний рівень) - задачі

1 Hardware FTP, mailto, HTTP і т. д.

38
 Рівні: логічний зв'язок

application
Кожний рівень: transport
• розподілений network
link
• «сутності» реалізують physical
функції рівня на network
кожному вузлі application link
transport physical
• сутності виконують дії, network
обмінюються link
повідомленнями з physical
application application
«колегами» transport transport
network network
link link
physical physical

39
 Протоколи служб Інтернету

 HTTP (HyperText Transfer Protocol) – служба WWW

 FTP (File Transfer Protocol) – служба FTP
 SMTP (Simple Mail Transfer Protocol) – відправка
листів електронної пошти
 POP3 (Post Office Protocol) – прийом листів
електронної пошти (необхідно отримати пароль)

HTTP FTP SMTP POP3

TCP/IP

! Усі протоколи служб засновані на TCP / IP! 40

 Сервіси мережі Internet

Найбільш розповсюджені Інтернет-сервіси:

- зберігання даних;
- передавання повідомлень і блоків даних;
- електронна пошта;
- організація і управлення діалогом партнерів;
- надання з’єднань;
- проведення сеансів;
- мультимедіа та відео-сервіси.

В Інтернеті сервіси надають мережеві служби.

Наприклад:
www – розгалуджена структура серверів
ftp – протокол пересилання файлів
e-mail – електронна пошта (off-line сервіс)

41
• Основним вмістом Internet є так званий контент у
вигляді різних Internet-проектів, які розміщуються у
вигляді сайтів

• Сайт - сукупність інформаційних ресурсів (файлів),

які об’єднані один з одним за тематикою чи за
предметною областю

42
 Види сайтів
в залежності від вирішуваних задач

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

43
 Веб-сторінки

Веб - каталоги
Сторінки контейнери
т
Каталоги
и Головна (домашняя) файлів
п В залежності від сторінка
и призначення
Информаційні
сторінки
Сторінки
Комунікаційні форуму
Веб-сторінки сторінки
Сторінки
чату
В залежності Статичні
Сторінки книги
від технологиї
відвідувачів
Динамічні
Сторінки
форми
Флеш-Сторінки
44
 Загальні вимоги до сайтів
- інтерактивний характер комунікації
- доступність інформації 24/7 годин користувачам
- оперативне оновлення інформації, в тому числі її доповнення з
урахуванням пропозицій відвідувачів сайту
- надання обсягів інформації (текстової, графічної, звукової та
відеоінформації)
- формування привабливого образу підприємства за рахунок
сумарного впливу відомостей про підприємство
- персоналізація інформації, призначеної для різних цільових груп
- багатоаспектний і швидкий пошук необхідної інформації у великих
масивах інформації
- отримання відомостей про відвідуваність сайту, тобто його
результативності як засобу комунікації
- виділення окремих товарів або послуг
- орієнтація на різні цільові аудиторії
45
 Браузер
- клієнтська програма, що призначена для
перегляду та/або (інтерпретації) веб-
документів

Містить такі інтерпретатори:

- інтерпретатор HTML
- інтерпретатор СSS
- інтерпретатор мови Javascript
- інтерпретатор мови VBScript
- інтерпретатори форматів png, jpeg, gif
- інші інтерпретатори чи кодеки

46
Браузери

47
 Браузери
Internet Mozilla
Explorer Chrome Safari Opera
и производные:
Первый Первый Первый Первый
выпуск Firefox выпуск выпуск выпуск
16.8.1995 Первый 2 .09.2008 1.0.3
1995
выпуск
3.0 13.08.2004
23.09.2002 66.0.
4.0
3.6
5.0 5.5
4.0
6.0 7.0 80.0. 5.1.7
(февраль Windows 8
8.0 2020)
… 12.0 MacOS
9.0
10.0
73.0.1
11.0 (февраль
2020)
48
Браузери 2013 (десктоп)

49
Браузери 2013 (мобільні та планшеты)

50
 Браузери – 2016
http://marketshare.hitslink.com
Браузери – 2016
Браузери – 2017
Браузери – 2017
Браузери – кінець 2018
(Десктоп)

55
Браузери – кінець 2019
(Десктоп)

56
Браузери – кінец 2020
(Мобайл)

57
Браузери – Лютий 2021
(З усіх девайсів)

58
Браузери в Україні (Січень 2021)

59
Браузери по регионах світу
(Січень 2021)

60
Браузери в Україні
(Січень 2022)

61
 Корисні ресурси
• https://www.w3.org/
• https://htmlbook.online/page/html-!doctype
• Графічний дизайн. Тренди 2023 року. 15 прикладів
https://creativeukrainemag.com/design/hrafichnyy-dyzayn-trendy-2023-roku-15-
prykladiv/#:~:text=%D0%A2%D1%80%D0%B5%D0%BD%D0%B4%D0%B8%20
%D0%B3%D1%80%D0%B0%D1%84%D1%96%D1%87%D0%BD%D0%BE%D
0%B3%D0%BE%20%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%
D1%83%20%D0%B2%202023,%D0%9D%D0%B5%D1%81%D1%82%D0%B0
%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D0%B0%20%D1%8
2%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D1%96%
D0%BA%D0%B0
• Тренди, які пануватимуть у дизайні 2023 року
https://telegraf.design/trendy-yaki-panuvatymut-u-dyzajni-
2023-roku/
• 10 найкращих трендів веб-дизайну на 2022 рік Дар'я
Протасова https://webpromoexperts.net/ua/blog/10-
luchshih-trendov-veb-dizajna-na-2022-god/ 62
Дякую за увагу!

63