• Суть WWW
• Мова гіпертекстової розмітки документів HTML
• Універсальний спосіб адресації ресурсів у мережі (URL)
• Протокол обміну гіпертекстовою інформацією HTTP
• Універсальний інтерфейс шлюзів CGI. Типи web-документів.
• Типи редакторів HTML документів
• Команди та атрибути команд в  HTML
• Команда BODY та її атрибути

Word Wide Web

World Wide Web (скорочено WWW', або Web, або W3, у перекладі на українську мову означає Всесвітнє павутиння), спочатку замислювалася для обміну дослідницькою інформацією, але тепер стала частиною повсякденного життя великої кількості людей. Кожний може підключитися до неї, щоб попрацювати над темою наукових досліджень або подивитися, що роблять конкуренти.

WWW – одна із найпопулярніших служб Інтернету, оскільки доступ туди може одержати кожний, хто має комп'ютер і модем або інший мережний інтерфейс.

Суть WWW

WWW – це глобальна система гіпертексту. Гіпертекст – текст із вставленими в нього словами (командами) розмітки, що посилаються на інші місця цього тексту, інші документи, картинки й т.д.

До 1989 року гіпертекст являв собою нову, багатообіцяючу технологію, що мала відносно велику кількість реалізацій, з одного боку, а з іншого – робилися спроби побудувати формальні моделі гіпертекстових систем, які мали скоріше описовий характер і були навіяні успіхом реляційного підходу опису даних. Ідея Т. Бернерс-Лі полягала в тому, щоб застосувати гіпертекстову модель до інформаційних ресурсів, розподілених у Мережі, і зробити це максимально простим способом. Він заклав три наріжних камені системи із чотирьох, існуючих нині, та розробив:

-        мову гіпертекстової розмітки документів HTML (HyperText Markup Language);

-        універсальний спосіб адресації ресурсів у мережі URL (Universal Resource Locator);

-        протокол обміну гіпертекстовою інформацією HTTP (HyperText Transfer Protocol).

Пізніше команда NCSA додала до цих трьох компонент четверту:

-        універсальний інтерфейс шлюзів CGI (Common Gateway Interface).

Мова гіпертекстової розмітки документів HTML

Перший наріжний камінь системи WWW – це HTML. Ідея HTML – приклад надзвичайно вдалого вирішення проблеми побудови гіпертекстової системи за допомогою спеціального засобу керування відображенням. На розроблення мови гіпертекстової розмітки істотний вплив зробили два фактори: дослідження в області інтерфейсів гіпертекстових систем і бажання забезпечити простий і швидкий спосіб створення гіпертекстової бази даних, розподіленої в мережі.

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

Звичайно гіпертекстові системи мають спеціальні програмні    засоби    побудови  гіпертекстових   зв'язків. Самі гіпертекстові посилання зберігаються в спеціальних форматах або навіть становлять спеціальні файли. Такий підхід зручний для локальної системи, але не для розподіленої на безлічі різних комп'ютерних платформ. В HTML гіпертекстові посилання вбудовані в тіло документа й зберігаються як його частина. Часто в системах застосовують спеціальні формати зберігання даних для підвищення ефективності доступу. В WWW документи – це звичайні ASCII-файли, які можна підготувати в будь-якому текстовому редакторі. Таким чином, проблема створення гіпертекстової бази даних була вирішена надзвичайно просто.

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

Таким способом мова надавала автору матеріалів, які були розміщені на сторінці, широкі можливості відносно того, як ці матеріали показати користувачеві. Але, на жаль, до 1996-1997 років він мав досить примітивні можливості керування поданням інформації й зовнішнім виглядом сторінки. Це було наслідком великої кількості нестандартизованих програм перегляду (браузерів) і багатоплатформеності Інтернет (UNDO, MaxOS, Windows). Кожен браузер тоді (і навіть зараз) відображав інформацію дещо по-своєму.

В основу синтаксису мови HTML був покладений стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalised Markup Language (SGML)». Щоправда, існує велике розходження між стандартом офіційним і стандартом фактичним.

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

Універсальний спосіб адресації ресурсів у мережі (URL)

Другим наріжним каменем WWW стала універсальна форма адресації інформаційних ресурсів -  Universal Resource Identification (URI). Універсальний ідентифікатор ресурсів (URI) для користувача з'являється у вигляді місцезнаходження (URL) або імені (URN) web-документа і  являє собою досить струнку систему, що враховує досвід адресації й ідентифікації E-mail, Telnet, FTP та ін. Але реально із усього, що описано в URI, для організації WWW потрібно тільки Universal Resource Locator (URL). Без наявності цієї специфікації вся міць HTML виявилася б марною. URL використовується в гіпертекстових посиланнях і забезпечує доступ до розподілених ресурсів мережі.

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

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

2) указівки доменного імені сервера, на якому зберігається даний ресурс: http://www.abcd.com;

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

де

1 — ім'я протоколу мережевої служби, вказує на те, що це — Web- сервер;

2 — стандартний роздільник у вигляді символа двокрапки і двох символів косої риски;

3 — доменне ім'я сервера;

4 — шлях пошуку файла Web-документа на заданому комп'ютері;

5 — ім'я комп'ютера в локальній мережі;

6 — ім'я Web-сервера компанії;

7 — ім'я домена, якому належить сервер (у даному разі домен .com свідчить про те, що сервер належить комерційній структурі);

8 — перший каталог на комп'ютері WWW;

9 — другий каталог на комп'ютері WWW;

10 — власне ім'я ресурсу.

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

Протокол обміну гіпертекстовою інформацією HTTP

Третім у списку наріжних каменів є протокол обміну даними в WWW – Hyper Text Transfer Protocol. Даний протокол призначений для обміну гіпертекстовими документами й враховує специфіку такого обміну. Так, у процесі взаємодії клієнт може одержати нову адресу ресурсу мережі (relocation), запросити вбудовану графіку, прийняти й передати параметри і т. д. Керування в HTTP реалізоване у вигляді ASCII-команд. Реально розроблювач гіпертекстової бази даних зіштовхується з елементами протоколу тільки при використанні зовнішніх розрахункових програм або при доступі до зовнішніх відносно WWW інформаційних ресурсів, наприклад баз даних.

З 1990 року проектом World Wide Web використовується  HTTP-протокол прикладного рівня, що забезпечує необхідну швидкість передачі даних, яка вимагається для розподілених інформаційних систем гіпермедіа.

Протокол HTTP надає відкриті методи, які можуть бути використані для вказівки цілей запиту. Вони побудовані на дисципліні посилань, де для вказівки ресурсу, до якого повинен бути застосований даний метод, використовується Універсальний ідентифікатор ресурсів (Universal Resource Identifier – URI) у вигляді місцезнаходження (URL) або імені (URN).

HTTP використовується також для комунікацій між різними користувацькими браузерами й шлюзами, що дають гіпермедіадоступ до існуючих Інтернет-протоколів, таким як SMTP, NNTP, FTP, Gopher й WAIS.

Універсальний інтерфейс шлюзів CGI. Типи web-документів.

Остання складова технології WWW – це вже плід роботи групи NCSA–специфікація Common Gateway Interface.

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

Запропонований й описаний в CGI спосіб підключення не вимагав додаткових бібліотек і буквально приголомшував своєю простотою. Сервер взаємодіяв із програмами через стандартні потоки вводу/виводу, що спрощує програмування. При реалізації CGI надзвичайно важливе місце зайняли методи доступу, описані в HTTP. І хоча реально використовуються тільки два з них (GET й POST), досвід розвитку HTML показує, що співтовариство WWW чекає розвитку й CGI у міру ускладнення завдань, у яких буде використовуватися WWW-технологія.

Раніше документи на Web були статичними у тому розумінні, що користувач міг декілька разів завантажувати ту саму сторінку, але її зміст від цього не змінювався. Однак ми живемо в такому світі, де нова інформація користується підвищеною увагою. Один з методів залучення уваги користувачів – це введення елемента інтерактивності. З появою CGI забезпечити цей елемент стало значно простіше.

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

Типи редакторів HTML документів

Існує два типи редакторів.

• візуальні редактори;
• редактори, що працюють безпосередньо з кодом.

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

Ось кілька таких редакторів:

• FrontPage  http://www.microsoft.com/frontpage
• FrontPad в постачанні MS IE 4
• Netscape Composer вбудований в Communicator і NS Gold
• Hot Metal  http://softquad.com/products/hotmetal/
• HomePage Publisher  http://ourworld.compuserve.com/homepages/clerin/
• DreamWeaver  http://www.macromedia.com/software/dreamweaver/

Редактори, що працюють безпосередньо з кодом, використовують професіонали, які розробляють супер проекти в певному стилі.

• Notepad  notepad.exe
• HTML Pad  http://www.book.ru/snk/
• 1st Page  http://www.evrsoft.com
• Hot Dog  http://www.sausage.com/hotdog
• HTML-Kit  http://www.chami.com/html-kit/
• HTMLed32  http://www.ist.ca
• HomeSite  http://www.allaire.com
• Порода  http://yurok.da.ru
• CoffeeCup  http://www.coffeecup.com
• SiteAid  http://www.siteaid.com
• FAR manage  http://www.rarsoft.com

Зауважимо, що до FAR потрібно використовувати плагін  colorer  і  htmledtior

http://www.uic.nnov.ru/~ruiv/plugring/cgi-bin/downld.cgi

Команди та атрибути команд в  HTML

Команди

Команди або теги (TAG), або дескриптори мови HTML, як правило, мають наступну структуру:

<COMMAND> - початок команди 
поле дії команди 
</ COMMAND> - кінець команди

Контейнер – це дескрипторна пара, яка складається із початкового і кінцевого дескрипторів (тегів). Контейнер <B> </B> дає вказівку браузеру відображати текст «Програми для завантаження та перегляду Web – сторінок називаються браузерами» напівжирним шрифтом.

Хоча існує деяка кількість команд, що складаються лише з тегів  "початок команди"  (у цих командах теги  "кінець команди" ігноруються браузером) стандарт мови HTML вимагає обов'язкової присутності тега  "кінець команди" .

Атрибути команд

Команди можуть мати параметри, які називаються атрибутами. Атрибути модифікують виконання команди або скасовують її стиль. Атрибути ставляться відразу після команди і мають наступний формат:

АТРИБУТ = "значення атрибута"

Структура  HTML документа

Кожен документ, який відповідає вимогам HTML 3.2, повинен починатися з декларації <! DOCTYPE>. Це необхідно для того, щоб відрізнити документ, складений за специфікацією HTML 3.2, від документів, написаних для інших версій мови HTML.

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 3.2 // EN"> 

іноді пишуть 

<DOCTYPE HTML PUBLIC! "- // W3C // DTD HTML 3.2 FINAL (ПРОЕКТ) // EN">

Приклади, http://www.w3.org/QA/2002/04/valid-dtd-list.html

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

Структура HTML документа має наступний вигляд:

<HTML> - початок документа (обов'язкова команда в HTML 3.0 і вище)
<HEAD> - заголовок документа (може бути відсутнім)
	тіло заголовка
</ HEAD> - кінець заголовка документа
<BODY>
	тіло документа
</ BODY>
</ HTML> - кінець документа

https://sites.google.com/site/newsitukraine/html5-posibnik/pershij-rozdil/html-dokument/html-dokument-1  - Попередній переглядання коду (Необхідно скопіювати код та перевірити по наданому посиланню). 

Команди заголовка  HTML документа

Тема HTML-документа виділяється тегами 
<HEAD> тіло заголовка </ HEAD>

До складу заголовка можуть входити наступні елементи

• НАЗВА
• STYLE
• SCRIPT
• ISINDEX
• BASE
• META
• LINK

Елемент TITLE

Згідно специфікації HTML 3.2, кожен документ повинен мати рівно один елемент  TITLE  в поле  HEAD .

Усередині  TITLE  не можна використовувати елементи розмітки.

Він визначає заголовок документа, який відображається окремо (в заголовку вікна браузера) і використовується, насамперед, для ідентифікації документа (наприклад, при пошуку). Заголовок повинен описувати мету документу і містити не більше 5-6 слів. Для задання заголовку служать команди:

<TITLE> Тема </ TITLE> 
Наприклад, 
<TITLE> Курс валют НБУ </ TITLE>

Елемент BASE

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

Наприклад, у випадку розмітки

<BASE href="http://www.sumdu.edu.ua/">    
  ...     
<IMG SRC="S-LINK:logo.gif">

відповідне зображення буде пов'язане з джерелом

http://www.sumdu.edu.ua/icons/logo.gif

У відсутності елементу  BASE  для перетворення відносних адрес в абсолютні повинен використовуватися URL самого документа. Зауважимо, що не обов'язково це буде та ж сама адреса URL, яка використовувалась для виклику документа, оскільки її базова URL може бути перевизначена заголовком HTTP, супроводжуючим в мережі розглянутий документ.

Елемент STYLE

Дані елементів розмітки  <STYLE> </ STYLE>  залишають в документі місце під запис стилів (наприклад, при використанні CSS). Браузери не виводять на екран вміст цього елементу.

Наприклад ,

<STYLE TYPE="text/css">
a:link{text decoration:none}
a:visited {text decoration:none}
</STYLE>

Елемент input

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

Не має ніяких обмежень на кількість символів, які можна було б ввести таким чином.

При використанні елемента input самостійно (без атрибутів) браузер інтерпретує його наступним чином, приклад

Введіть ваше ім'я: <input type="text"></input>. У відкривальному тегі <input> міститься атрибут type із значенням text. Даний атрибут вказує браузеру, що тег треба вивести користувачеві на екран, як поле для введення тексту.

Елемент SCRIPT

Дані елементів розмітки  <SCRIPT> </ SCRIPT>  залишають в документі місце під запис програм, які будуть виконуватися на комп'ютерах кінцевих користувачів або web-серверах.

Елемент META

Використовується для надання якоїсь метаінформації (метаінформація - парні конструкції типу "назва / значення"), яка описує властивості даного документа і їх значення.

Тег  <META>  використовується з парними атрибутами:

• NAME  -зазначає назву певної властивості (якості);
• CONTENT  - вказує значення, що відповідають якості, зазначеному атрибутом NAME.

Наприклад,

<META NAME="Author" CONTENT="Ягодин">
<META NAME="Description" CONTENT="Лекція по HTML">
<META NAME="Keywords" CONTENT="тег, команда, атрибут, посилання, web-документ ">,

Іноді елемент <мета> використовують для вказівки методів протоколу HTTP, наприклад,

<META HTTP-EQUIV = "Refresh" Content = "5; URL = HTTP: //rhc.msk.ru /">

де  цифра  - час очікування,

• URL - Адреса переходу (без лапок). 
• При такому використанні елемента МЕТА відбувається перехід на сторінку із зазначеним URL через 5 сек після повного завантаження у вікно браузера.
•  
• Елемент LINK

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

Елементи  <LINK>  можуть бути використані для:

• створення в документі спеціальних навігаційних кнопок;
• управління процесом відображення набору HTML-файлів в друковані документи;
• прив'язки таблиць стилів (css) і скриптів;
• надання альтернативних форм для даного документа.

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

href  - задає якусь адресу URL, що вказує на асоційований ресурс.

title  -визначає заголовок асоційованого ресурсу, що указується для довідки.

rel  - вказує прямий зв'язок, відома також як "тип зв'язку". Вводить певне взаємовідношення між поточним документом і ресурсом, на який вказує атрибут HREF.

rev  - визначає зворотні відносини. Наприклад, якщо є прив'язка документа A до документа B, виражена параметром REV = відношення , то в документі B те ж саме ставлення фіксується за допомогою атрибуту REL =  відношення .

Типи зв'язків в HTML поки ще нестандартизовані, але існують наступні рекомендовані типи взаємозв'язків:

REL = TOP -  Даний зв'язок вказує на вершину в якійсь ієрархічній структурі, наприклад на першу, або титульну сторінку в деякому наборі документів.

REL = CONTENTS -  Даний зв'язок вказує на якийсь файл, де наводиться зміст до цього документа.

REL = INDEX -  Даний зв'язок вказує на інший документ, який можна використовувати в цілях індексного пошуку по поточному документу.

REL = GLOSSARY -  Даний зв'язок вказує на якийсь документ, де міститься глосарій термінів, що відносяться до поточного документа.

REL = COPYRIGHT -  Даний зв'язок посилається на текст, де вказані авторські права на даний документ.

REL = NEXT -  Даний зв'язок вказує на наступний документ в деякому заздалегідь зумовленому маршруті перегляду.Наприклад, він може використовуватися для упреждувального автоматичного завантаження браузером наступної сторінки.

REL = PREVIOUS  - Даний зв'язок посилається на попередній документ в деякому зумовленому маршруті перегляду.

REL = HELP  - Даний зв'язок вказує на документ, що пропонує якусь допомогу, наприклад, це може бути текст, що дає більш розгорнутий опис і що пропонує посилання на інші документи по цій темі. Призначення цьому зв'язку - надання допомоги тим читачам, хто втратив свій шлях в Web.

REL = SEARCH - Дане посилання веде до пошукової сторінці, яка контролює якийсь набір сторінок, пов'язаних спільною темою.

Приклади елементів LINK:

<LINK REL=Contents HREF=toc.html>     
<LINK REL=Previous HREF=doc31.html>     
<LINK REL=Next HREF=doc33.html>      
<LINK REL=Chapter REV=Contents HREF=chapter2.html>

Приклад №2 HTML-документ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Draft//EN"> 
<HTML>
<HEAD>
<TITLE>Назва сторінки</TITLE>
... інші елементи заголовку
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META NAME="Description" content="опис сторінки" >
<META NAME="Keywords" content=" ключові слова через кому ">
<LINK href="зовнішній файл таблиці стилей" rel=stylesheet type=text/css>
<SCRIPT lanquage="JavaScript" src="файл зі скриптами JavaScript">
</SCRIPT>
</HEAD>
<BODY >
... тіло документу
</BODY>
</HTML>