Розвиток Web технологій

Трохи історії

Всесвітня інформаційна мережа (World Wide Web далі Web) має недовгу, по людських мірками, історію. Роком народження Web вважається 1992 рік, а батьком засновником був хтось Tim Berners-Lee, який зумів, використовуючи нові мережеві технології та досвід своїх попередників, зробити Web приємним і зручним засобом поширення інформації у всесвітній мережі комп'ютерних мереж Internet (Internet існує з середини 60 - х років).
Поштовх для свого стрімкого і переможної ходи по планеті Web отримала в 1993 році, коли Mark Andressen з групою студентів університету Іллінойсу, розробили безкоштовно поширювану (ось істинна причина бурхливого розвитку Web) програму Mosaic для перегляду Web-сторінок.
Ну а надалі самі знаєте що сталося, чи ви не виявляєте у себе ознак Internet-залежності?
HTML був розроблений на основі потужного мови розмітки SGML, шляхом перенесення деяких його функцій розмітки даних в мережеву середу для розмітки гіпертексту. Одночасно з розвитком Web технологій, насиченням Web новими сервісами та можливостями, розвивався і мова розмітки гіпертексту. З моменту своєї появи стандарт HTML зазнав безліч змін, останнє з яких це специфікація HTML 4.01, анонсована консорціумом W3C 24 грудня 1999

Суть і складові частини Web технології

Отже виділимо базові елементи технології Web:
· Internet це всесвітня мережа різнорідних комп'ютерних мереж, що взаємодіють по протоколу TCP / IP.
· Web є одним з додатків Internet (поряд з електронною поштою, новинами та іншими електронними сервісами), призначеним для масового поширення різноманітної інформації.
· Носіями інформації в Web служить Web-сторінки, що містять текст, графіку, мультимедіа елементи і гіперпосилання на інші ресурси Web або Internet.
· Для передачі гіпертексту Web-сторінок в Internet використовується спеціально розроблений протокол HTTP (Hyper Text Transfer Protocol).
· Для розробки Web-сторінок використовується спеціальна мова розмітки гіпертексту HTML (Hyper Text Markup Language).
· Для перегляду Web-сторінок використовується спеціальна клієнтська програма Web-броузер. У вікні Web-броузера відображаються результати інтерпретації мови HTML з Web-сторінок, отриманих під час навігації за гіперпосиланнями.

HTML - введення

HyperText Markup Language (HTML) є стандартною мовою, призначеним для створення гіпертекстових документів у середовищі WEB. HTML-документи можуть переглядатися різними типами WEB-браузерів. Коли документ створений з використанням HTML, WEB-броузер може інтерпретувати HTML для виділення різних елементів документа та первинної їх обробки. Використання HTML дозволяє форматувати документи для їх подання з використанням шрифтів, ліній та інших графічних елементів на будь-якій системі, їх переглядати.
Більшість документів мають стандартні елементи, такі, як заголовок, параграфи або списки. Використовуючи теги HTML ви можете позначати дані елементи, забезпечуючи WEB-броузери мінімальною інформацією для відображення даних елементів, зберігаючи в цілому загальну структуру та інформаційну повноту документів. Все що необхідно, щоб прочитати HTML-документ - це WEB-броузер, який інтерпретує теги HTML і відтворює на екрані документ у вигляді, який йому надає автор.
У більшості випадків автор документа суворо визначає зовнішній вигляд документа. У разі HTML читач (грунтуючись на можливостях WEB-браузера може, певною мірою, керувати зовнішнім виглядом документа (але не його вмістом). HTML дозволяє відзначити, де в документі повинен бути заголовок або абзац за допомогою тега HTML, а потім надає WEB- броузеру інтерпретувати ці теги. Наприклад, один web-броузер може розпізнавати тег початку абзацу і представляти документ у потрібному вигляді, а інший не має такої можливості і надає документ в один рядок. Користувачі деяких WEB-броузерів мають, також, можливість налаштовувати розмір і вид шрифту, колір та інші параметри, що впливають на відображення документа.
HTML-теги можуть бути умовно розділені на дві категорії:
· Теги, що визначають, як буде відображатися WEB-броузером тіло документа в цілому
· Теги, що описують загальні властивості документа, такі як заголовок чи автор документа
Запам'ятайте, що основна перевага HTML полягає в тому, що ваш документ може бути переглянутий на WEB-броузерах різних типів і на різних платформах.
HTML-документи можуть бути створені за допомогою будь-якого текстового редактора або спеціалізованих HTML-редакторів і конвертерів. Вибір редактора, який буде використовуватися для створення HTML-документів, залежить виключно від поняття зручності і особистих пристрастей кожного автора.
Наприклад, HTML редактори, такі, як "Netscape Navigator Gold" компанії Netscape дозволяють створювати документи графічно з використанням технології WYSIWYG (What You See Is What You Get). З іншого боку, більшість традиційних засобів для створення документів мають конвертери, що дозволяють перетворювати документи до формату HTML.
Усі теги HTML починаються з "<" (лівої кутової дужки) і закінчуються символом ">" (правої кутової дужки). Як правило, існує стартовий тег і завершальний тег. Для прикладу наведемо теги заголовка, що визначають текст, що знаходиться всередині стартового і завершального тега і описує заголовок документа:
Завершальний тег виглядає також, як стартовий, і відрізняється від нього прямим слешем перед текстом всередині кутових дужок. У даному прикладі тег <TITLE> говорить WEB-броузеру про використання формату заголовка, а тег </ TITLE> - про завершення тексту заголовка.
Деякі теги, такі, як <P> (тег, що визначає абзац), не вимагають завершального тега, але його використання надає початкового тексту документа поліпшену читаність і структурованою.
HTML не реагує на регістр символів, що описують тег, і наведений раніше приклад може виглядати наступним чином:
Увага! Додаткові пробіли, символи табуляції і повернення каретки, додані у вихідний текст HTML-документа для його кращої читаності, будуть проігноровані WEB-броузером при інтерпретації документа. HTML-документ може включати вищеописані елементи тільки якщо вони поміщені усередину тегів <PRE> і </ PRE>. Більш докладно про теги <PRE> буде написано нижче.
Коли WEB-броузер отримує документ, він визначає, як документ повинен бути інтерпретований. Найперший тег, який зустрічається в документі, повинен бути тегом <HTML>. Даний тег повідомляє WEB-броузеру, що ваш документ написаний з використанням HTML. Мінімальний HTML-документ буде виглядати так:
Заголовна частина документа <HEAD>
Тег заголовної частини документа повинен бути використаний відразу після тега <HTML> і більше ніде в тілі документа. Даний тег представляє з себе загальний опис документа. Уникайте розміщувати будь-який текст всередині тега <HEAD>. Стартовий тег <HEAD> покласти прямо перед тегом <TITLE> та іншими тегами, описують документ, а завершальний тег </ HEAD> розміщується відразу після закінчення опису документа. Наприклад:
<HTML>
<HEAD>
<TITLE> Список співробітників </ TITLE>
</ HEAD>
...
Увага! Технічно, стартові і завершальні теги типу <HTML>, <HEAD> і <BODY> необов'язкові. Але настійно рекомендується їх використовувати, оскільки використання даних тегів дозволяє WEB-броузеру впевнено розділити заголовну частину документа і безпосередньо смислову частину.
Заголовок документа <TITLE>
Більшість WEB-броузерів відображають вміст тега <TITLE> в заголовку вікна, що містить документ і у файлі закладок, якщо він підтримується WEB-броузером. Тема, обмежений тегами <TITLE> і </ TITLE>, розміщується всередині <HEAD>-тегів, як показано вище на прикладі. Заголовок документа не з'являється при відображенні самого документа у вікні.
Коментарі
Як будь-яку мову, HTML дозволяє вставляти в тіло документа коментарі, які зберігаються при передачі документа по мережі, але не відображаються браузером. Синтаксис коментаря:
<! - Це коментар ->
Коментарі можуть зустрічатися в документі де завгодно і в будь-якій кількості.
Теги тіла документа ідентифікують відображаються у вікні компоненти HTML-документа. Тіло документа може містити посилання на інші документи, текст та іншу форматированную інформацію.
Тіло документа <BODY>
Тіло документа має перебувати між тегами <BODY> і </ BODY>. Це та частина документа, яка відображається як текстова та графічна (смислова) інформація вашого документа.
Рівні заголовків <Hx>
Коли пишеться HTML-документ, текст структурно поділяється на просто текст, заголовки частин тексту, заголовки більш високого рівня і т.д. Перший рівень заголовків (найбільший) позначається цифрою 1, наступний - 2, і т.д. Більшість броузерів підтримує інтерпретацію шести рівнів заголовків, визначаючи кожному з них власний стиль. Заголовки вище шостого рівня не є стандартом і можуть не підтримуватися броузером. Тема самого верхнього рівня має ознака "1". Синтакс заголовка рівня 1 наступний:
Заголовки іншого рівня можуть бути представлені в загальному випадку так:
де x - цифра від 1 до 6, що визначає рівень заголовка.
Тег абзацу <P>
На відміну від більшості текстових процесорів, в HTML-документі зазвичай ігноруються символи повернення каретки. Фізичний розрив абзацу може знаходитися в будь-якому місці вихідного тексту документа (для зручності його читання). Однак броузер поділяє абзаци тільки при наявності тега <P>. Якщо ви не розділіть абзаци тегом <P>, ваш документ буде виглядати як один великий абзац.
Додаткові параметри тега <P>:
<P ALIGN=left|center|right>
дозволяють вирівнювати абзац по лівому краю, центру і правому краю відповідно.
Центрування елементів документа
Ви можете центрувати всі елементи документа у вікні броузера. Для цього можна використовувати тег <CENTER>.
Всі елементи між тегами <CENTER> і </ CENTER>
будуть перебувати в центрі вікна
Тег преформатірованія <PRE>
Тег преформатірованія, <PRE>, дозволяє представляти текст зі специфічним форматуванням на екрані. Попередньо сформатована текст закінчується завершальним тегом </ PRE>. Усередині попередньо сформатована тексту дозволяється використовувати:
· Переклад рядка
· Символи табуляції (зсув на 8 символів вправо)
· Непропорційний шрифт, встановлюваний броузером
Використання тегів, що визначають формат абзацу, таких як <Hx> або <ADDRESS>, буде ігноруватися броузером при приміщенні їх між тегами <PRE> і </ PRE>.
Далі йде кілька більш докладний приклад, зібраний з попередніх:
Ось, що ви побачите на екрані броузера:

Список співробітників нашої фірми Складено: 30 липня 1996 Даний список містить прізвища, імена та по батькові всіх співробітників нашої компанії. Список може бути використаний тільки в службових цілях.

Увага! Тема "Список співробітників" не відображений оглядачем як частина документа. Він з'явиться в заголовку вікна броузера.

Розрив рядка <BR>
Тег <BR> сповіщає броузер про розрив рядка. Найкращий приклад використання даного тега - форматований адресу або будь-яка інша послідовність рядків, де броузер повинен відображати їх одну під іншою. Наприклад:
Олексій Ярцев <BR>
Дмитрівське шосе, <BR>
д.9Б, офіс 326 <BR>
Додатковий параметр дозволяє розширити вохможно тега <BR>. <BR CLEAR=left|right|all>
Цей параметр дозволяє виконати не просто переклад рядка, а розмістити наступний рядок, починаючи з чистою лівої (left), правої (right) або обох (all) меж вікна броузера. Наприклад, якщо поряд з текстом зліва зустрічається малюнок, то можна використовувати тег <BR> для зсуву тексту нижче малюнка:
<p> Як ви можете бачити, дана схема демонструє зв'язок <BR CLEAR=left>
<img src="http://www.softexdivss.com//images/023/schema1.gif" align=baseline>
Майстер / Деталь </ p>
Нерозривний рядок <NOBR>
Якщо ви не хочете, щоб броузер автоматично переносив рядок, то ви можете позначити її тегами <NOBR> і </ NOBR>. У цьому випадку броузер не переноситиме рядок навіть якщо вона виходить за нраніци екрану; замість цього броузер дозволить горизонтально прокручувати вікно. Наприклад:
<NOBR> Цей рядок є найдовшою рядком документа, яка не допускає будь-якого розбиття де б то не було </ NOBR>
Якщо ж ви хочете все ж дозволити розбиття цього рядка на дві, але в строго запланованому місці, то вставте тег <WBR> в це місце. Наприклад:
<NOBR> Цей рядок є найдовшою рядком документа, <WBR> яка не допускає будь-якого розбиття де б то не було </ NOBR>
Цитата <BLOCKQUOTE>
Даний тег призначений для позначення в документі цитати з іншого джерела. Текст, позначений тегом <BLOCKQUOTE>, відступає від лівого краю документа на 8 пробілів. Наприклад:
На відкритті даної конференції глава представництва вимовив: <P>
<BLOCKQUOTE>
Сьогодні один з найбільших днів для нашої компанії. <BR>
Ми відкрили нову технологію, що дозволяє нашим клієнтам підвищити продуктивність їх настільних систем у декілька разів.
</ BLOCKQUOTE>
При відображенні броузером даний текст буде виглядати так:
На відкритті даної конференції глава представництва вимовив:
Сьогодні один з найбільших днів для нашої компанії.
Ми відкрили нову технологію, що дозволяє нашим клієнтам підвищити продуктивність їх настільних систем у декілька разів.

Список базових тегів HTML

Стартовий	Завершальний	Опис
<HTML>	</ HTML>	Позначення HTML-документа
<HEAD>	</ HEAD>	Заголовна частина документа
<TITLE>	</ TITLE>	Заголовок документа
<BODY>	</ BODY>	Тіло документа
<H1>	</ H1>	Тема абзацу першого рівня
<H2>	</ H2>	Тема абзацу другого рівня
<H3>	</ H3>	Тема абзацу третього рівня
<H4>	</ H4>	Тема абзацу четвертого рівня
<H5>	</ H5>	Тема абзацу п'ятого рівня
<H6>	</ H6>	Тема абзацу шостого рівня
<P>	</ P>	Абзац
<PRE>	</ PRE>	Форматований текст
<BR>		Переклад рядки без кінця абзацу
<BLOCKQUOTE>	</ BLOCKQUOTE>	Цитата

Описані раніше теги - це все, що необхідне вам для того, щоб почати працювати з HTML.
З використанням описаних тегів ви можете створити простий HTML-документ. Однак, такі розділи дозволять вам істотно поліпшити зовнішній вигляд ваших документів і опишуть нові можливості HTML.

Теги списків

Існує три основних види списків в HTML-документі:
· Пронуменрованний
· Непронуменрованний
· Список описів
Ви можете створювати вкладені списки, використовуючи різні теги списків або повторюючи одні всередині інших. Для цього просто необхідно розмістити одну пару тегів (стартовий і завершальний) усередині іншої. Чи будуть елементи вкладеного списку мати ті ж маркери, які позначають елемент списку - залежить від броузера. Більш докладно дивися в розділі "Вкладені списки".
Пронумеровані списки
У пронумерованому списку броузер автоматично вставляє номери елементів по порядку. Це означає, що якщо ви вилучили один або кілька елементів пронумерованого списку, то інші номери автоматично будуть перераховані.
Пронумерований список починається стартовим тегом <OL> і завершується тегом </ OL>. Кожен елемент списку починається з тега <LI>. Наприклад:
<OL>
<LI> Програмування
<LI> Алгоритмізація
<LI> Проектування
</ OL>
1. Програмування
2. Алгоритмізація
3. Проектування
Тег <OL> може мати параметри:
<OL TYPE = A | a | I | i | 1 START = n>
де:
TYPE
Вид лічильника:
o A - великі латинські літери (A, B, C. ..)
oa - маленькі латинські літери (a, b, c. ..)
o I - великі римські цифри (I, II, III ...)
oi - маленькі римські цифри (i, ii, iii ...)
o 1 - звичайні цифри (1,2,3 ...)
START = n
Число, з якого починається відлік
Наприклад:
<OL TYPE=I START=15>
<LI> Програмування
<LI> Алгоритмізація
<LI> Проектування
</ OL>
XV. Програмування
XVI. Алгоритмізація
XVII. Проектування
Непронумеровані списки
Для непронумеровані списків броузер зазвичай використовує маркери для позначення елемента списку. Вид маркера, як правило, налаштовує користувач броузера.
Пронумерований список починається стартовим тегом <UL> і завершується тегом </ UL>. Кожен елемент списку починається з тега <LI>. Наприклад:
<UL>
<LI> Програмування
<LI> Алгоритмізація
<LI> Проектування
</ UL>
· Програмування
· Алгоритмізація
· Проектування
Тег <UL> може мати параметр:
<UL TYPE = disc | circle | square>
Тип тега <UL> визначає зовнішній вигляд маркера як вид за замовчуванням (disc), круглий (circle) або квадратний (square). Наприклад:
<UL TYPE=square>
<LI> Програмування
<LI> Алгоритмізація
<LI> Проектування
</ UL>
§ Програмування
§ Алгоритмізація
§ Проектування
Вкладені списки
Дамо приклад вкладених списків:
<HTML>
<HEAD>
<TITLE> Список співробітників </ TITLE>
</ HEAD>
<BODY>
<H2> Список співробітників нашої фірми </ H2>
<H3> Складено: 30 липня 1996 </ H3>

Даний список містить прізвища, імена та по батькові всіх співробітників нашої компанії. <P>
Список може бути використаний тільки в службових цілях. <P>
<OL>
<LI> Дирекція
<UL>
<LI> Іванов І.І.
<LI> Петров К.В.
</ UL>
<LI> Відділ маркетингу
<UL>
<LI> Варшавська Є.Л.
<LI> Самсонов Д.М.
</ UL>
</ OL>
</ BODY>
</ HTML>
Ось, що ви побачите на екрані броузера:

Список співробітників нашої фірми Складено: 30 липня 1996 Даний список містить прізвища, імена та по батькові всіх співробітників нашої компанії. Список може бути використаний тільки в службових цілях. 1. Дирекція o Іванов І.І. o Петров К.В. 2. Відділ маркетингу o Варшавська Є.Л. o Самсонов Д.М.

Елемент списку <LI>

Тег <LI> може мати параметри:
<OL TYPE = disc | circle | squade> або <OL TYPE = A | a | I | i | 1 VALUE = n>
в залежності від того, у списку якого виду знаходиться цей елемент.
TYPE
Вид маркера (див. <UL>) або лічильника (см.OL)
VALUE = n
Значення для елемента пронумерованого списку (його номер). Всі подальші номери елементів списку будуть відраховуватися від цього номера.
Наприклад:
<OL TYPE=I START=15>
<LI> Програмування
<LI TYPE=i VALUE=25> Алгоритмізація
<LI> Проектування
</ OL>
XV. Програмування
XVI. Алгоритмізація
XVII. Проектування
Список визначень
Список визначень починається з тега <DL> і завершується тегом </ DL>. Даний список служить для створення списків типу "термін" - "опис". Кожен термін починається тегом <DT>, а опис - тегом <DD>. Наприклад:

<DL>
<DT> <B> Відділ маркетингу </ B>
<DD> Даний відділ займається просуванням продуктів і послуг
<DT> <B> Фінансовий відділ </ B>
<DD> Даний відділ займається всіма фінансовими операціями
<DT> <B> Відділ кадрів </ B>
<DD> Даний відділ займається обліком і набором нових співробітників фірми, розподілом відпусток, відстежуванням лікарняних листів і т.д.
</ DL>

Відділ маркетингу Даний відділ займається просуванням продуктів і послуг Фінансовий відділ Даний відділ займається всіма фінансовими операціями Відділ кадрів Даний відділ займається обліком і набором нових співробітників фірми, розподілом відпусток, відстежуванням лікарняних листів і т.д.