Система World Wide Web

Одним із сервісів Internet є система World Wide Web. По-іншому її називають WWW, W3 або просто Web.

Web можна назвати графічним інтерфейсом Internet, який революційно спростив доступ до інформації, розподіленої на мільйонах комп’ютерів по усьому світі.

До World Wide Web навігація по Internet була дуже складною. Часто інформацію важко було знайти і так само важко використовувати. Пошук і завантаження файлів, які зберігаються десь в Internet, були нетривіальними задачами, які зазвичай вимагають знання ОС UNIX та арсеналу спеціалізованих засобів.

Ось приклад сеансу роботи в Internet (ОС UNIX).

Відомо, що Internet з самого початку призначалася для військових комунікацій і була створена вченими та дослідниками, яких зовсім не лякали таємничі команди. У цілому, Internet була придатною для користувачів, які були згідні потратити сили та час, щоб отримати вигоду із її величезного вмісту. Так продовжувалося багато років, поки Том Бернерс-Лі не винайшов World Wide Web.

Батько WWW, фізик із CERN – престижної лабораторії фізики частинок, розташованої у Швейцарії, – Бернерс-Лі відчував труднощі під час навігації по Internet. Був потрібен простий, легкий у використанні інтерфейс для доступу до інформації, яка там міститься.

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

В 1989 році Бернерс-Лі подав пропозицію щодо World Wide Web у підрозділ CERN, який займається електронікою та обчисленнями для фізиків. Отримавши відмову, він і його колега переглянули ідею і подали її знову. Ця переглянута пропозиція була прийнята – проект вступив в силу. Розробку Web стали фінансувати і в 1991 році перший прототип того, якому було суджено викликати революцію в Internet, вийшов у світ.

З появою браузера Line Mode, створеного Бернерс-Лі в 1991 році, відкрилися небачені можливості навігації по Internet. Проте цей браузер був далеким від тих засобів навігації, які є сьогодні, особливо через те, що він не управлявся мишкою і не підтримував графіку.

У лютому 1993 року NCSA – Національний центр суперкомп’ютерних застосувань випустив першу версію нового браузера Mosaic. Цей браузер вивів WWW на новий рівень. Вона хизувалася дружнім графічним інтерфейсом користувача, а крім того Mosaic підтримував мишку. Тепер навігація стала можливою і без використання клавіатури. Web більше не була просто гіпертекстовою системою. Тепер це було повністю функціональне, інтегроване гіперсередовище. Користувач міг отримати доступ до всіх протоколів відразу, без спеціальних засобів.

Web не стала би такою популярною сама по собі. У цьому її допомогла Netscape Communications Corp. – компанія, у яку ввійшла група, яка створила Mosaic. В кінці 1994 року вийшов у світ браузер Netscape Navigator, в основі якого лежав Mosaic. Цей браузер став лідером на ринку програмних продуктів для World Wide Web. Завдяки комерційному успіху Netscape Navigator, World Wide Web досягнула найвіддаленіших куточків планети.

Термін „Web-сторінка” означає не щось інше як документ World Wide Web. У Web не існує обмежень на розмір сторінки. Сторінка Web може поміщатися на одному екрані або вимагати прокрутки.

Вузол World Wide Web – це просто набір взаємозв’язаних Web-сторінок. За своєю природою Web дозволяє об’єднати будь-яку кількість елементів, включаючи інші сторінки. Сторінка може бути зв’язана з іншими сторінками. Інформація, пов’язана зі сторінкою, зовсім не повинна бути однотипною.

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

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

Приклади Web-сторінок наведені у додатках.

Розглянемо інші поняття, які характеризують систему WWW.

Гіпертекст. Це досить розповсюджений метод подання інформації. Гіпертекст – це легка у використанні, проте надзвичайно потужна система зв’язаних слів та фраз, яка дозволяє здійснювати навігацію між сторінками. Ці слова є прехресними посиланнями на інші слова на інших сторінках і зазвичай виділяються на Web-сторінці яскравішим кольором.

Якщо дещо розвинути концепцію гіпертексту, включивши у неї фотографії, відео та звук, ми отримаємо те, що відоме як гіпермедіа. Кожна сторінка може включати як гіпертекст, так і гіпермедіа.

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

Гіпертекст і гіпермедіа є для Web фундаментальними технологіями. Зазвичай вони присутні на кожній сторінці Web і зрозумілі кожному браузерові Web. Без гіпертексту та гіпермедіа не було б World Wide Web.

Мова розмітки гіпертексту, більш відома як HTML (Hypertext Markup Language), відіграє роль клею, який зв’язує Web у єдине ціле. Більшість сторінок у Web створена із використанням HTML, оскільки дана мова надає можливості для роботи з гіпертекстом та гіпермедіа. І хоча HTML дійсно є мовою, це не та мова, яка асоціюється з комп’ютерами та розробкою програмного забезпечення. HTML – це мова, використовувати яку зможе будь-хто через декілька днів вивчення. HTML – це не стільки мова, скільки метод подання документів.

Приклад HTML-коду деякого документа, розміщеного на деякому Web-сервері наведений у додатку.

Основними елементами в HTML є дескриптори або по-іншому теги, які визначають, як даний документ повинен інтерпретуватися браузером. Теги HTML дуже легко впізнати; вони обмежуються парою символів: кутовими дужками < та >. Наприклад, щоб позначити початок тексту, виділеного напівжирним, використовується тег <b>. Він розміщується на початку будь-якого тексту, який повинен відображатися в браузері напівжирним шрифтом.

А як відмічається кінець такої порції тексту? Досить елементарно. Після тексту, який повинен бути поданий напівжирним, вставляється дескриптор </b>.

Отже, відкриваючий тег виділяється символами <>, а закриваючий тег (якщо він дійсно потрібен) аналогічний до нього, тільки містить </>. Що може бути простіше?

При написанні тегів великі та маленькі букви не розрізняються. Таким чином, тег <HTML> – це те саме, що і тег <HTMl> і в свою чергу теж саме, що і тег <html>.

Існує два типи тегів. Перший тип – це одноелементний тег, який досить просто вставити у текст для того, щоб здійснити якусь дію. Другий тип тегів впливає на текст, який починається з тієї точки, де вжитий тег, до точки, у якій вказана ознака завершення команди. Такі теги можна використовувати парами. Ознака завершення команди – це той самий тег, тільки він починається із слеша, наприклад, </center>. Для багатьох тегів можна вказувати параметри.

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

Перший тег, який повинен знаходитися у будь-якому HTML-документі –

це <HTML>…</HTML>. Цей тег вказує на те, що даний документ дійсно містить у собі HTML-текст. Усе, що ви напишите у своєму документі, повинне знаходитися всередині цього тега, тобто HTML-файл повинен виглядати приблизно так:

<HTML>

…

текст документа

...

</HTML>

Коли ми вказали, що документ дійсно є HTML-кодом, його потрібно розбити на дві частини – заголовок і власне текст.

Оголошення заголовка повинне міститися всередині тега <HEAD> … </HEAD>, тобто в даний час наш документ-приклад виглядає ось так:

<HTML>

<HEAD>

…

опис заголовка

...

</HEAD>

…

текст документа

...

</HTML>

Далі вказують заголовок вашого документа. Для того, щоб вказати заголовок, застосовують тег <TITLE> … </TITLE>. Коли браузер зустрічає цей тег, він відображає усе, що знаходиться усередині нього, як заголовок. Найпопулярніші браузери відображають заголовок у рядку заголовка свого вікна.

Ось приклад того, як використовується даний тег:

<HTML>

<HEAD>

<TITLE>Це заголовок документа</TITLE>

</HEAD>

…

текст документа

...

</HTML>

Заголовок документа повинен точно відображати сутність інформації, яка міститься у документі.

Увесь решта HTML-документ міститься всередині тега <BODY> … </BODY>.

Тепер наш документ виглядає приблизно так:

<HTML>

<HEAD>

<TITLE>Це заголовок документа</TITLE>

</HEAD>

<BODY>

…

текст документа

...

</BODY>

</HTML>

Розглянемо деякі із атрибутів тега <BODY>. Зокрема для того, щоб задати колір фону Web-сторінки використовується атрибут BGCOLOR=константа_кольору, де константа кольору може приймати значення назв кольорів, наприклад, red, green, white, darkyellow, lightblue, cyan і т. ін.

Тег <BODY> матиме, наприклад, такий вигляд: <BODY BGCOLOR=pink>.

Для того, щоб задати фоновий малюнок використовується атрибут BACKGROUND=”URL_файла_із_фоновою_картинкою”.

Наприклад, BACKGROUND=”plytka.gif”

або BACKGROUND=http://www.dcom.kiev.ua/images/apples.jpg.

У текст HTML-документа можна вставляти коментарі – маленькі примітки, які не видно користувачеві. Це роблять для того, щоб зробити структуру HTML-документа зрозумілішою. Браузери ігнорують коментарі та не відображають їх на екрані. Коментарі це свого роду примітки для розробника Web-сторінки. Кінцевий користувач не бачить їх у вікні браузера.

Кожен рядок коментарів повинен знаходитися всередині тега <!-- … -->.

Ось приклад коментаря.

<!-- Це HTML-документ. -->

<!-- Коли я його дописав, я почував себе відмінно -->

<!-- За основу при написанні цього документа був взятий документ MyResults.txt -->

Основним елементом HTML-файла є абзац. Браузер Web виводить текст абзаців зліва направо і зверху вниз, використовуючи поточний розмір вікна. Цей процес називається автоматичним вирівнюванням. Таким чином, якщо користувач змінить розмір вікна, текст буде розміщений дещо по-іншому, оскільки браузер по-іншому перенесе слова. Через те, то, як ви розбиваєте текст на рядки при написанні HTML-файла, не впливає на те, як текст буде відображатися.

При введенні тексту ви можете скільки завгодно натискувати Enter. Тільки тег <P> відмічає кінець абзацу. Більшість браузерів також видаляє зайві пропуски між словами, так що вам не вдасться відформатувати ваш текст за допомогою пропусків. Тільки тег <P> позначає кінець абзаца та відокремлює абзаци один від одного. Для зручності читання первинного HTML-файла можна переносити рядки тексту на власний розсуд. Це не впливає на те, як текст буде відображатися в браузері. Браузер переносить рядки, беручи до уваги ширину свого вікна, а не те, як перенесені рядки у HTML-файлі.

Для того, щоб вказати початок нового рядка, використовують тег <BR>. Без цього тега весь текст буде відображений у вигляді одного абзаца. Якщо ви хочете вставити перенесення рядка, ви повинні використати тег <BR>.

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

Встановлення заголовків. Заголовки використовують для встановлення назв частин документа. При використанні HTML можна створювати заголовки різних видів. Опис заголовка виглядає так:

<H1>Опис курсу</H1>

Цифра після букви H вказує вигляд заголовка. Можна використовувати цифри від 1 до 6. Чим більшою є цифра, тим крупнішим є текст, який розміщується між відкриваючим та закриваючим тегом. Цей текст відображається напівжирним накресленням. Різні рівні заголовків дозволяють нам ієрархічно організувати документ. Кожен наступний рівень дозволяє розбити документ на дрібніші частини. Отже, HTML добре сконструйований для опису структурованих документів.

Теги форматування символів дозволяють керувати відображенням окремих символів та слів. Існує три теги символьного форматування: <B>…</B> для виділення напівжирним, <I>...</I> для виділення курсивом та <U>…</U> для виділення підкресленням. Ми повинні розміщувати символи, які хочемо відформатувати, всередині цих тегів. Для того, щоб задати колір символів і/або їх розмір, використовуємо тег <FONT> із атрибутами COLOR=константа_кольору та SIZE=n, де n змінюється від 1 до 7. Для цього тега обов’язковим є закриваючий тег.

Існують спеціальні команди HTML, які дозволяють організовувати дані у вигляді списків, зокрема, невпорядкованого та впорядкованого. Списки можуть бути вкладеними. Початок та кінець невпорядкованого списка позначається так <UL>…</UL>, а впорядкованого списка позначається так <OL>…</OL>. А кожен елемент будь-якого списка міститься між двома тегами <LI>…</LI>.

Розглянемо, як за допомогою HTML організовують таблиці. Таблиця починається із тега <TABLE> і закінчується відповідним закриваючим тегом. Далі таблиця аналізується по рядках. Для цього використовують теги <TR> … </TR>. Між цими тегами записують теги <TD> … </TD>, які характеризують кожну комірку таблиці. Усе, що міститься між відкриваючим та закриваючим тегами <TD> відображатиметься у комірці таблиці.

До цих пір ми знайомилися тільки з тими тегами HTML, які визначали зовнішній вигляд документа. Теги встановлення гіперзв’язків дозволяють нам вказати, як документ пов’язаний з іншими документами Web і як частини документа пов’язані між собою.

Гіперзв’язок – це вказівник на певне місце в іншому документі. У найпростішому випадку указане місце знаходиться всередині даного документа. Проте можна встановити гіперзв’язки до довільних документів, а також до зовнішніх текстових, графічних, аудіо-, відеофайлів.

Для того, щоб встановити гіперзв’язок, потрібно знати початкову та кінцеву точки. Вони позначаються за допомогою тега <A>.

Для встановлення гіперзв’язку потрібно знати таку інформацію:

• ім’я файла, з яким ви хочете встановити гіперзв’язок;
• текст, який буде виділений у документі, а відтак, буде слугувати так званою гарячою точкою.

Перший тип гіперзв’язку пов’язує дві точки в одному і тому ж файлі. Цей зв’язок дозволяє користувачеві переходити до іншого місця того самого документа. Для встановлення цього зв’язку використовують такий формат:

<BODY>

Цокніть <A HREF=”#TargetName”>тут</A>, щоб отримати детальнішу інформацію.

...

текст документа

...

<A NAME=”TargetName”></A>

Сюди буде здійснений перехід.

</BODY>

</HTML>

Інша форма гіперзв’язку дозволяє користувачеві переходити до іншого файла. Для її означення використовується такий формат:

<BODY>

Для того, щоб отримати детальнішу інформацію про фірму Sony, цокніть <A HREF=http://www.sony.com>тут </A>.

</BODY>

Для встановлення цього гіперзв’язку достатньо одного рядка. У тексті посилання вказана адреса початкової сторінки, на яку користувач переключається після цокання на гарячій точці. Розробник повинен бути впевнений, що вказав правильну адресу. В іншому випадку – браузер видасть повідомлення про помилку.

Для інтеграції у Web-сторінку графіки (різного роду рисунків) використовується тег <IMG>. Синтаксис цього тега такий

<IMG SRC=”ім’я.файла”>

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

Одним із атрибутів тега <IMG> є атрибут ALIGN із значеннями, зокрема, left та right. Завдяки їм текст обтікає зображення, розміщене зліва та справа, відповідно. Цей тег не вимагає закриваючого тегу.

Можна зробити рисунок гіперпосиланням на інший документ

<A HREF=”Місце призначення”><IMG SRC=”ім’я.файла”></A>

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

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

Дата добавления: 2015-11-16