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

Сервіс WWW та HTML

Лекція 2

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

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

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

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

2
https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRrGX5b2pMS_8bg3l5
a6ylWiyb_5nLGZRe4CQ&usqp=CAU
 Веб-сервер
веб-сервер
протокол http
версії HTML
структура HTML-документа

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

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

5
6
Різновиди комп'ютерних
мереж
Багатошарова модель мережі

Додатки

Операційна система

Комунікаційне обладнання

Комп’ютерна платформа

7
 Різновиди комп'ютерних
мереж
Комп'ютери, що використовують ресурси сервера,
називають клієнтськими, або просто клієнтами.
Ресурси мережі — це апаратні, програмні й інформаційні
об'єкти мережі.
Клієнт — це комп'ютер у мережі, що використовує ресурси
сервера.

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

Сервер - це центральний комп'ютер, на

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

10
Мережева операційна система - операційна система з
вбудованими можливостями для роботи в комп'ютерних
мережах.
До таких можливостей можна віднести :
 підтримку мережевого обладнання;
 підтримку мережевих протоколів;
 Підтримку протоколів маршрутизації;
 підтримку фільтрації мережевого трафіку;
 підтримку доступу до віддалених ресурсів, таким як
принтери, диски і т. п. по мережі;
 підтримку мережевих протоколів авторизації;
 наявність в системі мережевих служб дозволяє віддаленим
користувачам використовувати ресурси комп'ютера.
11
Головними завданнями є поділ ресурсів мережі
(наприклад, дискові простору) і адміністрування мережі.
За допомогою мережевих функцій системний
адміністратор визначає колективні ресурси, задає паролі,
визначає права доступу для кожного користувача або
групи користувачів.
Звідси розподіл:
мережеві ОС для серверів;
мережеві ОС для користувачів.
Існують спеціальні мережеві ОС, які наділені функціями
звичайних систем (Windows NT) і звичайні ОС (Пр .:
Windows 10), у яких є мережеві функції. Сьогодні
практично всі сучасні ОС мають вбудовані мережеві
функції.
12
 Підключення до інтернету
провайдер Супутниковий або
роутер оптоволоконний
канал зв'язку з
хаб сервером
модем Інтернету

ADSL-модем
Виділена
телефонна станція
лінія

роздільник частот
(спліттер) ADSL-модем
dial-up
модем

13
ADSL
 Способи підключення до
Інтернет:

• модемне з'єднання з провайдером;

• з'єднання по виділеній лінії;
• високошвидкісне модемне з'єднання;
• супутниковий доступ;
• використання мобільного зв'язку (GPRS).
 Протоколи Інтернету
Протокол - це набір угод і правил, що визначають порядок
обміну інформацією в комп'ютерній мережі.
Протокол TCP / IP (1974)
TCP (Transmission Control Protocol)
 файл ділиться на пакети розміром около1,5 КБ
 пакети передаються незалежно один від одного
 в місці призначення пакети збираються в один
файл
IP (Internet Protocol)
 визначає найкращий маршрут руху пакетів

15
 Служби
До традиційних мережних служб відносяться: Telnet, FTP, HTTP, SMTP,
POP-3.
Служба Telnet дозволяє організовувати підключення користувачів до
сервера по протоколу Telnet.
Служба FTP забезпечує пересилку файлів з Web-серверів. Ця служба
забезпечується Web-оглядачами (Internet Explorer, Mozilla Firefox, Opera і
ін.)
HTTP - служба, призначена для перегляду Web-сторінок (Web-сайтів),
забезпечується мережевими прикладними програмами: Internet Explorer,
Mozilla Firefox, Opera і ін.
SMTP, POP-3 - служби вхідної та вихідної електронної пошти.
Реалізуються поштовими прикладними програмами: Outlook Express, The
Bat та ін.
HTTP FTP SMTP POP3

TCP/IP

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

 Веб-сервер
Основа WWW - взаємодія між веб-сервером и браузерами за
протоколом http (HyperText Transfer Protocol).

Веб-сервер - це ПЗ, яке працює на мережному комп’ютері та

яке очікує клієнтські запити за протоколом http.

Браузер може звертаитсь до веб-сервера по доменному імені

або по ip-адресі. При цьому в запиті передається
ідентифікатор потрібного ресурсу.

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

відповідний ресурс в себе на локальному диску та відправляє
його у відповідь клієнтові.

Браузер отримує відповідь та опрацьовує її відповідно до типу

ресурса (відображає гіпертекст, відтворює зображення,
зберігає файли на диску клієнта тощо). 17
 Компоненти сервісу WWW
• URL/URI — уніфікований спосіб адресації та
ідентифікації мережних ресурсів

• HTML — мова гіпертекстової розмітки веб-

документів

• HTTP — протокол передачі гіпертексту

• CGI — загальний шлюзовий інтерфейс, який надає

доступ до серверних додатків
18
Взаємодія веб-сервера і клієнта

19
 Cхеми доступу

Ознака схеми доступу - префікс:

http://
ftp://
mailto://
file://

20
Передача данных по сети

21
 Протокол http
• HTTP (HyperText Transfer Protocol) — протокол передачі
гіпертексту. Призначений для обміну гіпертекстовими
документами

• HTTP — типовий клієнт-серверний протокол, обмін

повідомленнями здійснюється за схемою «запит-
відповідь» у вигляді ASCII-команд. Особливість HTTP –
можливість вказувати в запиті і відповіді спосіб
представлення одного й того ж ресурсу за різними
параметрами (форматом, кодуванням, мові)

• HTTP — протокол прикладного рівня, але може

використовуватись як «транспорт» для інших прикладних
протоколів (перш за все XML-орієнтованих - SOAP, XML-RPC, SiteMap,
RSS)

22
 CGI (Common Gateway Interface)
— механізм доступу до програм на стороні веб-сервера.
Специфікація CGI розроблена для забезпечення сервісу
www підключенням різного зовнішнього ПЗ

За допомогою CGI веб-сервер надає браузеру доступ до ПЗ,

яке запускається на серверній стороні через стандартні
потоки введення та виведення

• Інтерфейс CGI використовується для створення

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

23
 Веб-сервер
мережа
сервер

стек протоколів TCP/IP

HTTP- запит
HTTP- відповідь

веб-сервер

файлова система

• веб-сервер – це програма, що працює на прикладному рівні

моделі TCP/IP
• За замовчанням веб-сервер використовує порт 80
24
 WEB - сайт і WEB - сторінки
Публікація у Всесвітній павутині реалізується в
формі WEB - сайтів. Сайт є інтерактивним
засобом представлення інформації.

WEB - сайт складається з WEB - сторінок,

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

25
WEB - сайт і WEB - сторінки

26
 Технологія створення сайту
Способи створення сайту

Мова розмітки Візуальний

Текстовий
гіпертексту HTML (Hyper HTML-редактор,
редактор
Text Markup Language) конструктор сайтів

текст розмічають документ

Microsoft FrontPage
спеціальними зберігають як
uCoz, Сайткрафт і ін.
мітками - тегами Web-сторінку

27
28
29
30
 Етапи створення сайту

31
https://recommerce.com.ua/media/user_media/images/articles/etapi-
stvorennya-saitu/.thumbs/654e1a6f48df97f169c40873be712041_858_0_0.jpg
32
 Елементи веб-сторінки
 контент (англ. Co ntent – зміст) – змістове наповнення
веб-сторінки, доступне користувачу: тексти, зображення,
відео, звукові дані та ін.;
елементи навігації - засоби для переходу до інших
веб-сторінок;
елементи дизайну - елементи структурування
контенту та його форматування, оформлення сторінки.

33
 Зміст і структура сайту
Зміст сайту повинен відображати творче життя учасників
об'єднання, привертати увагу однодумців.
Структура (план) сайту - розбиття загального змісту на смислові
розділи і окремі сторінки із зазначенням зв'язків між ними.
Ієрархічна структура сайту
Головна сторінка

Новини та Особисті Корисні

Галерея
оголошення сторінки посилання

Растрова
Керівник
графіка

Векторна
Робітник 1
графіка

Сканографія Робітник 2
34
Створення сайту

35
Створення сайту

36
 HTML
SGML -> HTML 1.0 -> … HTML 4.0 -> -> HTML 5.3

DHTML
XHTML

XML

1986, ISO: SGML (Standard Generalized Markup Language)

1991, Timothy John Berners-Lee: HTML
1994, створення W3C

37
Приклад деревовидної
структури сайту

38
Cтруктура інтернет магазину

39
Cтруктура інтернет порталу

40
Cтруктура корпоративного
сайту

41
Структура інформаційно-
пошукової системи Google

42
 Основні поняття HTML
• Notepad ++
•Visual Studio Code
•Brackets
•Sublime Text
•Webstorm (based on IntelliJ)
•Vim
•Eclipse
•Atom
•Adobe Dreamweaver
•Brackets
•CoffeeCup HTML редактор
•HTML-Online

43
 Основні поняття HTML
Сучасні веб-додатки базуються на декількох
компонентах:
• зберігання даних: реляційні бази даних, NoSQL
• бібліотека для зберігання даних: прості інструкції,
ORM
• веб-сервер
• менеджер пакетів
• внутрішній фреймворк
• інтерфейсний фреймворк
• бібліотеки тестування коду
• система контролю версій

44
 Основи DOM
(Document Object Model)
Об’єктна модель документу – сукупність об’єктів, якими
може бути представлений веб-документ
Веб-документ генерується браузером клієнта
Під час генерації документа браузер має забезпечити певні
версію DOM
Ієрархія об’єктів DOM

45
 Основні поняття HTML
DTD (Document type definition) – забезпечує перемикання на
анализатор

Якщо DOM браузера не відповідає розмітці документа, то

виникає виключення

Веб–документ - документ в форматі ASCII (або подібному),

який обробляється інтерпретатором браузера

Типові формати файлів веб-документів:

.html ( застарілі - .htm .shtml .dhtml )
.css – для стильових таблиць
.js .vs – для скриптів

46
 Тег
Тег - елемент мови розмітки гіпертексту. Для
позначення тегів використовується кутові дужки
<тег>.
Види тегів:
1) парні, які виділяють блок тексту, також
називаються ще контейнером. Контейнер вимагає
закриває тега, що позначається </ тег>.
2) поодинокі.
Теги нечутливі до регістру, тому запис <B> і <b>
еквівалентна.

47
 Тег

поодинокий

ТЕГ відкриваючий <>

парний
(Контейнер)
закриваючий </>

48
 Тег
Приклад 1. Використання парних тегів (контейнера)
<b> Жирний шрифт </ b> в тексті.
Приклад 2. Використання одинарних тегів
Перший рядок тексту <br> Другий рядок тексту.
Приклад 3. Правильне поєднання тегів
<b> <i> Жирний курсивний текст </ i> </ b>
Приклад 4. Неправильне поєднання тегів
<i> <b> Жирний курсивний текст </ i> </ b>
49
 Структура HTML документа

HTML-документ складається з двох розділів -

заголовка (HEAD) і тіла документа (BODY).
Розділ заголовка документа (HEAD) визначає
заголовок веб-сторінки і містить службову
інформацію.
Розділ тіла документа (BODY) зберігає видиме
зміст сторінки.

50
 Структура HTML документа
заголовок { службова частина
тіло документа { текст документа (розмітка)

Елементарний структурний елемент веб-документа -

tag (тег), контейнер
Кожен тег описує посилання на певний обєкт з об’єктної
моделі документа

Теги можуть бути однокомандними і двокомандними

Ознака тега – трикутні дужки

Найпростіший синтаксис двокомандного тега:

<ім’я тега >
контент - вміст контейнера, що обробляється за допомогою
тега
</ ім’я тега > 51
 Структура HTML документа

<html>
<head>
<title> Заголовок сторінки </title>
Службова інформація
</head>
<body>
Видимий зміст сторінки
</body>
</html>
52
 Основні структури
HTML
теги (контейнери, дескриптори)

структурні фрейми
якірні
(службові)
мапи сценарії
форматування

таблиці
текстові блоки об’єкти
блокові та
списки рядкові

форми

53
 Повний синтаксис тега
<ім ’ я_тега ім’я_атрибута1=‘значення‘
ім’я_атрибута2=‘значення’
…
ім’я_атрибутаN=‘значення’ >

контент

</ ім’я_тега >

Наприклад:
<table border=’5’> контент </table>

54
Дякую за увагу!

55