Служба World Wide Web (WWW)

World Wide Web — єдиний інформаційний простір, що складається із сотень мільйонів взаємозалежних електронних документів, що зберігаються на Web-cepвepax. Окремі документи, що складають простір Web, називають Web-cmорінками. Групи тематично об'єднаних Web-сторінок називають Web-вузлами (жаргонний термін — Web-сайт чи просто сайт). Один фізичний Web-сервер може містити досить багато Web-вузлів, кожному з яких, як правило, виділяється окремий каталог на жорсткому диску сервера.

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

Програми для перегляду Web-сторінок називають браузерами.

Браузер виконує відображення документа на екрані, керуючись командами, які автор документа впровадив у його текст. Такі команди називаються тегами. Від звичайного тексту вони відрізняються тим, що знаходяться в кутових дужках. Більшість тегів використовуються парами – відкриваючий тег і закриваючий. Закриваючий тег починається із символу «/»

<CENTER> Цей текст має вирівнюватися по центру екрана </CENTER>

<LEFT> Цей текст вирівнюється з лівого боку екрана </LEFT>

<RIGHT> Цей текст вирівнюється з правого боку екрана </RIGHT>

Складні теги мають, крім ключового слова, додаткові атрибути і параметри, що деталізують спосіб їх застосування. Правила запису тегів містять специфікації особливої мови розмітки, подібної до мов програмування. Вона називається мовою розмітки гіпертексту — HTML (HyperText Make-up Language). Таким чином, Web-документ є звичайним текстовим документом, розміченим тегами HTML. Такі документи також називають НТМ документами чи документами у форматі HTML.

При відображенні HTML-документа на екрані за допомогою браузера теги не показуються, і ми бачимо тільки текст, що є документом. Однак оформлення підсумкового тексту (вирівнювання, колір, розмір і накреслення шрифту та інше) виконується відповідно до того, які теги імплантовані в текст документа.

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

Останнім часом у Web-документах широко застосовуються так звані активні компоненти. Це теж об'єкти, але вони містять не тільки текстові, графічні й мультимедійні дані, а й програмний код, тобто можуть не просто відображатися на комп'ютері клієнта, а й виконувати на ньому роботу завантаженої в них програми. Для того, щоб активні компоненти не могли виконувати на чужому комп'ютері руйнівні операції (що характерно для «комп’ютерних вірусів»), вони виконуються тільки під контролем з боку браузера. Браузер не повинен допустити виконання команд, потенційно загрозливих, наприклад, він припиняє спроби здійснити операції з твердим диском.

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

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

Гіпертекстовий зв'язок між сотнями мільйонів документів, що зберігаються на фізичних серверах Інтернету, є основою існування логічного простору World Wide Web. Однак такий зв'язок не міг би існувати, якби кожен документ у цьому просторі не мав би своєї унікальної адреси. Адреса будь-якого файла у всесвітньому масштабі визначаться уніфікованим покажчиком ресурсу — URL.

Адреса URL складається з трьох частин.

1. Зазначення служби, яка здійснює доступ до даного ресурсу (звичайно позначається на ім'я прикладного протоколу, що відповідає даній службі. Так, наприклад, для служби WWW прикладним є протокол HTTP (HyperText Transfer Protocol — протокол передачі гіпертексту). Після імені протоколу ставиться двокрапка (:) і два знаки «/» (коса риска):

http://...

2. Зазначення доменного імені комп'ютера (сервера), на якому зберігається даний ресурс:

http://www.abcde.com...

3. Зазначення повного шляху доступу до файла на даному комп'ютері. Як роздільник використовується символ «/» (коса риска):

http://www.abcde.com/Files/New/abcdefg.zip

При записі URL-адреси важливо точно дотримуватися регістру символів. На відміну відправил роботи в MS-DOS і Windows, в Інтернеті рядкові й прописні символи вважаються різними.

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

Служба імен доменів (DNS)

Людині незручно працювати з числовим представленням IР-адреси, а доменне ім'я запам'ятовується легко, особливо якщо врахувати, що це ім'я має зміст. Наприклад, Web-сервер компанії Microsoft має ім'я www.microsoft.com, а Web-сервер Міністерства аграрної політики України має ім'я www.minagro.kiev.ua (суфікс.ua наприкінці імені вказує на те, що сервер належить українському сектору Інтернета). Неважко «реконструювати» іімена для інших компаній.

З іншого боку, автоматична робота серверів мережі організована з використанням чотиризначної числової адреси. Завдяки їй проміжні сервери можуть здійснювати передачу запитів і відповідей у потрібному напрямку, не знаючи, де конкретно перебувають відправник і одержувач. Тому необхідний переклад доменних імен на відповідні до них IР-адреси. Цим і займаються сервери служби імен доменів DNS. Наш запит на одержання однієї зі сторінок сервера www.abcde.com спочатку обробляється сервером DNS, і далі він направляється за IР-адресою, а не надоменне ім’я.

Служба передачі файлів (FTP)

Прийом і передача файлів є значним відсотком решти Інтернет - послуг. Необхідність передавати файли виникає, наприклад, при прийомі файлів програм, при пересиланні великих документів (наприклад, книг), а також при передачі архівних файлів, у яких містяться великі обсяги інформації.

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

Протокол FTP працює одночасно з двома TСР-з'єднаннями між сервером і клієнтом. Одним з'єднанням іде передача даних, а друге з'єднання використовується як керуюче. Протокол FTP також надає серверу засіб для ідентифікації клієнта, що звернувся. Цим часто користуються комерційні сервери і сервери обмеженого доступу, що поставляють інформацію тільки зареєстрованим клієнтам, — вони видають запит на введення імені користувача і зв'язаного з ним пароля. Однак існують і десятки тисяч FTP-серверів з анонімним доступом для всіх бажаючих. У цьому разі як ім'я користувача треба ввести слово: anonymous, а як пароль – вказати адресу електронної пошти. У більшості випадків програми-клієнти FTP роблять це автоматично.

РОЗДІЛ 2. Зміст лабораторних робіт

Лабораторна робота 1. Створення найпростіших файлів HTML

Створимо на диску окрему директорію для майбутньої сторінки

М:\ НТМL\

Варіант 1

Відкриємо блокнот (notepad) і скопіюємо туди наступний текст:
<html>
<head>
<title> Мій перший крок </title>
</head>
<body>
Здрастуйте, це моя перша сторінка.
<br>
Ласкаво просимо!
</body>
</html>

А тепер збережемо цей документ, давши йому ім'я index.html

М:\ НТМL\ index.html

Html не є мовою програмування, він призначений для розмітки текстових документів (для форматування текста). Який вигляд матиме ваш текст, визначають мітки (tags або тег).

Приклад тега: <br> (перенесення тексту на інший рядок).

Тобто все, що є між < і > - це тег.

Є обов'язкові теги: <html>

Цей тег повинен відкривати документ. Якщо є відкриваючий тег, то повинен бути і закриваючий: </html>

Деякі теги, ніби <br>, не вимагають закриваючого тега.

<head> </head> - голова документа

<body> </body> - тіло документа

Між тегами <head> </head> є службова інформація. Наприклад <title> - заголовок. Між тегами <body> </body> - безпосередній зміст документа.

Використання кольорів.

Зафарбуємо слова «Ласкаво просимо» в червоний колір.

<font color="#CC0000"> Ласкаво просимо! </font>

<html>
<head>
<title>Мій перший крок </title>
</head>
<body>
Здрастуйте, це моя перша сторінка.
<br>
<font color="#CC0000"> Ласкаво просимо! </font>
</body>
</html>

Тег <font></font> - багатофункціональний. Ним може задаватися не тільки колір тексту в конкретній частині документа, але і розмір шрифту, і вид шрифту (Arial).

<body text="#336699"> - це означає, що весь текст сторінки буде синім, окрім тексту, для якого ми спеціально прописали <font></font> (якщо колір в <body> не задавати, то за замовчуванням він буде чорним).

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699">
Здрастуйте, це моя перша сторінка.
<br>
<font color="#CC0000"> Ласкаво просимо!</font>
</body>
</html>

Колір фону встановлюється також у тегі <body>: <body bgcolor="#000000">

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000">
Здрастуйте, це моя перша сторінка.
<br>
<font color="#CC0000"> Ласкаво просимо!</font>
</body>
</html>

Зверніть увагу: ми одночасно можемо прописати в тегі <body> і колір тексту в документі, і колір фону

<body text="#336699 bgcolor="#000000">

Параграфи вводяться тегом:

<p></p>

За допомогою параграфів ми можемо центрувати текст:

<p align="center">текст</p>

За допомогою параграфів ми можемо вирівняти текст по лівому краю:

<p align="left">текст</p>

Або по правому краю документа:

<p align="right">текст</p>

Тепер введемо параграфи в наш документ:

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000">
<p align="center">
Здрастуйте, це моя перша сторінка.
<br>
<font color="#CC0000"> Ласкаво просимо!</font> </p>
</body>
</html>

Не забувайте, що текст у документі, якщо не задавати параграфи, завжди вирівнюється за замовчуванням по лівому краю. Також запам'ятайте, що до параграфа вже не потрібний тег <br> для перенесення рядка, оскільки перенесення задається за замовчуванням.

Але що робити, якщо перенесення не потрібне? Є тег альтернативний

<p align="center">: <center>текст</center>

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
Здрастуйте, це моя перша сторінка.
<br>
<font color="#CC0000"> Ласкаво просимо!</font> </center>
</body>
</html>

У тега <p> існує ще і четверте значення (атрибут):

<p align="justify">текст</p>

Він вирівнює текст по обох краях документа.

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
Здрастуйте, це моя перша сторінка.
<br>
<font color="#CC0000"> Ласкаво просимо!</font> </center>
<p align="justify">

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

</p>
</body>
</html>

Використовування заголовків:

<H1> текст </H1>

<H2> текст </H2>

<H3> текст </H3>

<H4> текст </H4>

<H5> текст </H5>

<H6> текст </H6>

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3> Здравствуйте, це моя перша сторінка. </H3>
<br>
<font color="#CC0000"> Ласкаво просимо!</font> </center>
<p align="justify">

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

</p>
</body>
</html>

Заголовки призначені для виділення невеликої частини тексту (рядки, фрази). Але, якщо потрібно виділити великий фрагмент тексту або тільки одне слово, при цьому без перенесення рядка, використаємо тег<font></font>:

<font size="+4"> текст </font>
<font size="+3"> текст </font>
<font size="+2"> текст </font>
<font size="+1"> текст </font>
<font size="+0"> текст </font>
<font size="-1"> текст </font>
<font size="-2"> текст </font>

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

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, це моя перша сторінка.</H3>
<br>
<font color="#CC0000"> Ласкаво просимо!</font> </center>
<p align="justify">

Я зовсім недавно почав(ла) знайомитися з віртуальним життям, але мені за давньою традицією теж захотілося створити свою домашню сторіночку для моїх нових віртуальних друзів і знайомих, щоб вони могли подивитися мої фотографії, почитати про мене, черкнути пару рядків у мою гостьову книгу. А може і просто випадковий відвідувач раптом захоче познайомитися зі мною, і у мене з'явиться <font size="+1"> щеодин віртуальний друг?

</font>
</p>
</body>
</html>

Курсив, підкреслений текст, жирний текст:

<b> Жирний текст </b>
<i> Похилий текст (курсив) </i>
<u> Підкреслений текст </u>

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, це моя перша сторінка.</H3>
<br>
<font color="#CC0000"> Ласкаво просимо!</font>:) </center>
<p align="justify">

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

</p>
</body>
</html>

Ще один атрибут тега <font>:

<font face="ARIAL"> текст (шрифт Arial)</font>

За допомогою атрибуту face в прикладі задається шрифт Arial. Таким чином можна задати і будь-який шрифт для своєї сторінки.

Лабораторна робота 1. Створення найпростіших файлів HTML

Створимо на диску окрему директорію для майбутньої сторінки

М:\ НТМL\

Варіант 2

Завдання 1. Створення найпростіших файлів HTML

Щоб створити свій файл HTML, зробіть так:

1. Запустіть стандартну програму Блокнот (Notepad).

2. Наберіть у вікні редактора найпростіший текст файлу HTML:

<HTML>

<HEAD>

<TITLE> Навчальний файл HTML </TITLE>

</HEAD>

<BODY> Розклад занять на вівторок

</BODY>

</HTML>

3. Збережіть файл під ім'ям RASP.HTM.

4. Для перегляду створеної Web-Сторінки завантажте браузер Microsoft Internet Explorer.

5. Відкрийте в меню браузера Файл (File), Відкрити (Open), Перегляд(Огляд - Browse) і знайдіть у папці KURS файл RASP.HTM, завантажте його. Переконаєтеся, що назва Web-Сторінки (Навчальний файл HTML) відбилася у верхньому статусному рядку браузера.

Завдання 2. Керування розташуванням тексту на екрані

Інформація.

При відображенні HTML-Документів браузери автоматично розміщають текст на екрані.

1. За необхідності виконаєте п.п. 5-6 завдання 1.

2. Відкрийте файл RASP.HTM – у меню браузера Вид (View) -- (У вигляді HTML) відкриється вікно зі стандартною програмою Блокнот (Notepad), у якому ваша Web-сторінка представлена в командах HTML.

3. Внесіть зміни в текст файлу HTML, розташувавши слова "Розклад", "занять", "на вівторок" на різних рядках:

<HTML>

<HEAD>

<TITLE> Навчальний файл HTML </TITLE>

</HEAD>

<BODY>Розклад занять на вівторок

</BODY>

</HTML>

4. Збережіть внесені зміни у файлі RASP.HTM, за допомогою команд Файл (File), Зберегти (Save). Закрийте програму Блокнот (Notepad).

5. Перегляньте за допомогою браузера Microsoft Internet Explorer нову отриману Web-сторінку використовуючи клавішу F5 або за допомогою команд Вид(View), Обновити (Refresh). Чи змінилося зображення тексту на екрані?

Примітка

Надалі після внесення змін в Web-Сторінку завжди виконуйте п.п. 4-5.