Основи Web-технологій

1. Основні поняття
 Протокол

система стандартизованих правил

обробки інформації, зокрема: розбиття
на пакети, передача, контроль
цілісності, збірки, відображення тощо.
 Сервер – програма, що працює в
режимі прослуховування доступних
каналів зв’язку на предмет звертання від
інших вузлів мережі (клієнтів), приймає і
обробляє їхні запити та надсилає
відповідь.
 Web-сервер – сервер в системі WWW,
обмінюється інформацією з Web-
клієнтами по протоколу HTTP.
 Клієнт – програма, яка формує запити і
відправляє їх серверу, а також отримує
відповідь.
 ІР-адреса – представлення адреси
окремого комп’ютера у вигляді
унікальної числової послідовності з 4-х
чисел, розділених крапкою, кожне з
яких лежить в межах 0..255 включно.
 Наприклад, 212.42.0.10.
 Кожен комп’ютер, підключений до
мережі Інтернет, має власну ІР-адресу.
 Доменне ім’я сервера у Web – літерне позначення його ІР-
адреси.
 Доменне ім’я, як і відповідна ІР-адреса, складається з кількох
частин, кожна з них вказує на домен відповідного рівня.
 Множина доменних імен організована ієрархічно.

ua www.nubip.edu.ua

edu
домен верхнього рівня
nubip
домен другого рівня
www
домен третього рівня

сервер "www"
 DNS (Domain Name System – доменна
система імен) – система ієрархічного
іменування та правил установки
відповідності між доменними іменами та
ІР-адресами вузлів в Інтернеті.
 Сервер, який в процесі роботи з
мережею Інтернет доменним іменам
ставить у відповідність ІР-адреси і
навпаки, називається DNS-сервером.
 URL (Uniform Resource Locator) – уніфікований локатор
ресурсу.
 Він включає:
1) метод доступу (протокол) з символами "://",
2) доменне ім’я сервера,
3) шлях до файлу (каталоги в ньому відділяються символом "/")
4) ім’я файлу, інколи – з параметрами
 URL є частиною більш загальної специфікації URI (Universal
Resource Identification) – універсальної системи ідентифікації
ресурсів у Мережі.

http:// www.host.com/folder/index.html#anchor?field=value

протокол доменне ім’я шлях файл мітка параметри

 Гіпертекстовий документ – документ
із гіпертекстом.
 Гіпертекст – текст, у якому містяться
лінки (англ. hyperlink, link –зв’язні
указники, посилання, гіперпосилання)
на інші гіпертекстові документи, адреси
яких представлені у вигляді відповідних
URL і є складовою частиною лінків.
"Павутина" зв’язків між Web-сторінками

х ххххх лінк ххх х ххххх хх ххх

хххх хх х хх хх хххх хх х хх хх
хххх хох хох хох хох хх хох
хххх хох хох хох
хххххх лінк. х х лінк хххххх лінк.
ххххх ххххх хх хх хох
хх хх
ххххх ххххх хх хх
лінк. хх лінк хох хх лінк.
хх
хх

хх хх хх хх
хох хх хох хх
хх хх
хх х хххх ххх хххх хох хх хох хх
х х хх лінк
хх х хх хх лінк хх хх хох
ххх хох хох хох хох хх
лінк хх
хх
хххххх. хх
ххххх ххххх хх хх
лінк.
 HTTP (Hyper Text Transfer Protocol) – протокол
передачі гіпертексту.
 Мова розмітки – стандартизована спеціальна
мова для опису структурованих документів.
Структурні одиниці документа (у тому числі з
основним інформаційним вмістом) охоплюються
з обох боків спеціальними роздільниками –
тегами.
 HTML (Hyper Text Markup Language – мова
гіпертекстової розмітки) – спеціалізована мова
для створення Web-сторінок. Web-сторінки ще
називають HTML-сторінками. По суті це текстові
файли, стандартними розширеннями яких
є .htm та .html. Наприклад, index.html.
 Браузер, або інтернет-браузер (від
англ. browser – оглядач, переглядач) –
програма-клієнт для відображення Web-
сторінок і переходу по лінкам, тобто
здійснення навігації в мережі WWW.
World Wide Web – сервіс мережі
Інтернет
 World Wide Web – глобальна розподілена
інформаційна система на базі мережі Інтернет,
що включає в себе множину Web-вузлів разом
з розміщеним на них доступним для
завантаження Web-контентом і програмними
засобами його обробки.

 Під Web-контентом ми розуміємо сукупність

документів у форматі HTML чи іншому, який
може відображатися браузером та бути
завантаженим на клієнтський комп’ютер,
комунікатор, смартфон і т.д.
2. Компоненти Web
Технологічні складові:
 HTML – мова гіпертекстової розмітки як формат Web-
сторінок.
 URІ (Universal Resource Identification) – універсальна
система адресації ресурсів у Мережі (реально для
функціонування WWW достатньо URL як частини
специфікації URI).
 HTTP – протокол передачі гіпертексту.
 CGI (Common Gateway Interface) – універсальний
шлюзовий інтерфейс. Він специфікує взаємодію Web-
сервера з прикладними підсистемами (наприклад,
базами даних) через обробку т.з. CGI-скриптів –
невеликих програм, записаних на деякій мові
програмування (C/C++, Fortran, Pascal) чи командній
мові (Perl, командна мова MS-DOS, shell, ін.).
Загальна схема роботи у Web

HTTP HTML

URI

клієнт Інтернет Web-сервер

3. Web-дизайн і Web-програмування
 Web-дизайн – проектування і
створення Web-контенту, а саме: Web-
сторінок і/або мультимедійного
наповнення для них.

 Web-програмування – створення
програм для автоматизованої обробки
запитів користувачів чи виконання
специфічних завдань сервера.
 Web-дизайн Web-
програмування

створення Програмування Програмування

Web-контенту для/на боці Web- на боці Web-
клієнта сервера
3.1. Створення Web-сторінок.
Мова HTML
 HTML-документ - текстовий документ
спеціального формату.

 Отримана через мережу Інтернет Web-

сторінка завантажується браузером,
який повинен "знати" мову HTML, а тому
– правильно відображати вміст.
 <HTML>
<HEAD>

<TITLE>Сторінка1</TITLE>
</HEAD>
<BODY>
Всім привіт!
<HR>
Моя перша Веб-сторінка
</BODY>
</HTML>
 Дескриптори типу <TAG>...</TAG>
називаються парними, перший з них (<TAG>)
називають відкриваючим (початковим) тегом,
другий (</TAG>) – закриваючим (кінцевим).

 Елементи, охоплені парними тегами,

називаються контейнерами.

 Одиночні теги. Відрізняється від контейнеру

тим, що не містить ніякої інформації. У нього є
тільки початковий тег. Пустий дескриптор
зазвичай виконує самостійну задачу, не
зв’язану з конкретним текстом. Наприклад, тег
<HR> створює горизонтальну лінію.
 Парний тег
<HTML>
<HEAD>

<TITLE>Сторінка1</TITLE>
</HEAD>
<BODY>
Всім привіт!
<HR>
Моя перша Веб-сторінка
</BODY>
</HTML>

Одиночний тег
 елемент HTML, виділений тегами
<HTML> і </HTML> – фактично це і є
сам HTML-документ;
 елемент HEAD, виділений тегами
<HEAD> і </HEAD> – заголовок, який
містить описову інформацію про
документ;
 елемент BODY, виділений тегами
<BODY> і </BODY> – це основна
частина (тіло) документа, де розміщено
основний контент.
Теги та їх атрибути
 Теги та їх атрибути задають форматування
тексту. Використання атрибутів в контейнері
можна подати такою схемою:

<TAG A1=V1 A2=V2 A3=V3 ...>Текст</TAG>

Де:
 TAG – парний тег,
 А1, А2, … – імена атрибутів,
 V1, V2, … – значення атрибутів,
 Текст – текст для відображення.
 Приклад
<HTML>
<HEAD>
<TITLE>Сторінка1</TITLE>
</HEAD>
<BODY BGCOLOR="#00FF00">
Всім привіт!
<HR>
Моя перша Веб-
сторінка
</BODY>
</HTML>
Коментарі
 Коментарі. Браузери ігнорують любий
текст, розміщений між <!-- і -->. Це
зручно для розміщення коментаріїв в
складних HTML-документах.
 <!-- Це коментарій -->
 Гіперпосилання
 Гіперпосилання дозволяють здійснювати миттєвий перехід
від одного фрагменту тексту до іншого.  При натисканні лівої
кнопки миші на деякий виділений фрагмент поточного
документу здійснюється перехід до деякого наперед
визначеного документу або фрагменту документа.
 В HTML перехід від одного фрагменту тексту до іншого
задається за допомогою мітки виду:

<A HREF="[адреса переходу]">виділений фрагмент тексту</A>

 В якості параметру [адрес переходу] може використовуватись

декілька типів аргументів. Найпростіше  задати ім'я іншого
HTML-документу, до якого потрібно перейти. 
Приклад
<HTML>
<HEAD>
<TITLE>Сторінка1</TITLE>
</HEAD>
<BODY BGCOLOR="#00FF00">
Всім привіт!
<HR>
Моя перша Веб-сторінка
<HR>
<A HREF="http://www.nubip.edu.ua">Мій університет</A>
</BODY>
</HTML>
Приклад
Способи створення Web-
сторінок
 Використання текстового редактора Блокнот
(NotePad), вбудованого в Windows, і
проглядання результатів за допомогою
броузера.

 Використання спеціальних редакторів

документів HTML, наприклад, MS Front Page,
Adobe Dreamweaver і ін.

 Використання редактора Word, де створюється

текст документа, який потім конвертується в
HTML-формат.