3.3.Використання сервісу Word Wide Web

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

Web-вузол складається з наступних елементів: заголов­ної (початкової) сторінки, інформаційних розділів, відо­мостей про автора та проект і гостьової книги. У більшості випадків подорож сайтом по­чинається із титульної сто­рінки. За назвами інших еле­ментів легко судити про їхнє призначення. Зауважимо тільки, що гостьова книга — це розділ, у якому кожен відвіду­вач може висловити свою дум­ку про ваш проект.

Базовим інструментом для створення Web-сторінок є мова НТМL. Утім, це навіть не мова у звичному розумінні цьо­го слова, за аналогією з С++ чи Раsсаl. НТМL — це набір міток, за допомогою яких мож­на визначити вигляд елект­ронного документа в Інтернет: шрифт, колір тла і тексту, роз­міщення ілюстрацій і багато чого іншого. Він не зовсім звичний, але дуже простий.

Виконаємо практичні завдання.

Завдання №1. Створення сторінки з написом «Музика без кордонів» — саме цій темі ми й присвятимо наш сайт.

1.1. Відкрийте текстовий редактор Блок­нот Windows і введіть у нього наступний фрагмент тексту:

<НТМL>

<ВODY>

Музика без кордонів

</BODY>

</НТМL>

1.2.Отриманий документ збе­режіть в папці з іменем групи у файлі index з розширенням html

1.3. Відкрийте броузер Internet Explorer і завантажте щойно створений вами файл командою File Load (Файл, Открыть). Подивіться, що у вас вийшло. Таким чином ви можете оціни­ти вигляд створеної вами сто­рінки прямо на своєму ком­п'ютері, без підключення до Iнтернет. Майте на увазі, що сторінку слід переглядати в тому коду­ванні, у якому вона була ство­рена. Розбіжність кодувань впливає тільки на вигляд ки­риличного тексту — англійські фрази будуть коректно відо­бражатися в будь-якому ви­падку. Стандартні російсько­мовні кодування: Windows-1251 і КОІ-8R. Користувачам Windows слід віддати перевагу першому. Як набрати текст з потрібним кодуванням? Це за­лежить від вашого редактора: наприклад, файл, збережений із Блокнота Windows з уста­новками за замовчуванням, буде містити текст у кодуванні Windows-1251.

1.4. Повернімося до нашого файла. Спробували? Працює? Прекрасно! А якщо набрати дві фрази? Будь ласка:

<НТМL>

<ВОDY>

Музика без кордонів

Створено Ігорем Шевчен­ком

</ВОDY>

</НТМL>

Як бачимо, теги, а саме так називають керуючі мітки мови НТМL, розміщені у кутових дужках (у цьому випадку <НТМL> і <ВОDY>), копіюва­ти не довелося. Кожен з них зустрічається в документі тільки один раз. Тег <НТМL> позначає початок документа, а тег </НТМL> — його закінчен­ня. <ВODY> і </ВODY>, відпо­відно, обмежують тіло доку­мента.

Запишіть доповнений файл за тим же маршрутом.

1.5.Перевірте, який вигляд має цей файл у броузері. А ви здивовані? Обидві фрази будуть розташовані в одному рядку. У чому ж проблема? А річ у тім, що переклад рядка в броузері здійснюється тільки тоді, коли текст не вміщується в його вікні. Якщо ви хоче­те, щоб наступна фраза починалася з нового рядка, використовуйте тег <ВR> (скорочення від brek line). Внесіть зміни у ваш файл:

<НТМL>

<ВODY>

Музика без кордонів <ВR>

Створено Ігорем Шевченком

</ВОDY>

</НТМL>

До речі, зовсім неважливо, якими буквами (прописними чи рядковими) ви будете писати теги: <ВR> і <br> діють зовсім однаково.

Перевірте, який вигляд має цей файл у броузері.

1.6. Виконаємо, щоб слово "Музика" було написане вгорі в рядку заголовку вікна броузера. Для цього служить пара тегів <ТITLE>...</ТITLЕ>. Вони розміщуються не в тілі (<ВODY>) НТМL-документа, а в його заголовку — <НЕАD> — окремій частині, у якій накопичується службова інформація. Внесіть зміни у ваш файл:

<НТМL>

<НЕАD>

<ТІТLЕ> Музика </ТІТLЕ>

</НЕАD>

<ВODY>

Музика без кордонів <ВR>

Створено Ігорем Шевченком

</ВODY>

</НТМL>

Перевірте, який вигляд має цей файл у броузері.

Завдання №2. Виконати елементи оформлення для створеної сторінки.

Теоретичні відомості: В мові НТМL є засоби керування відображенням тексту. Перший інструмент, з яким ми познайомимося, —<FОNТ>...</FОNТ>. На відміну від розглянутих вище, ці теги мають параметри. Тобто, якщо набрати <FONT COLOR=”Red”> Мої улюблені музичні групи </FONT>, то фраза "Мої улюблені му­зичні групи" буде відображена червоним кольором. Якщо ж увести <FONT SIZE =4>Мої улюблені музичні групи </FONT>, ми одержимо текст, набраний шриф­том більшого розміру (4 умовні одиниці розміру замість 3, заданих за замовчуванням).

SIZE , СОLОR і FАСЕ — основні параметри тега <FONT>.

Ви можете комбінувати їх як завгодно, наприклад:

<FONT SIZE=4 СОLOR="Rеd"> Мої улюблені му­зичні групи </ FОМT>.

За допомогою параметра FАСЕ можна задати назву використаного шрифта. Але якщо цей шрифт відсутній у користувача в системі, прочита­ти ваш текст буде неможливо. Тому професійні Web-майстри воліють обходитися без цього параметра.

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

Файл із малюнком має бути в тому ж каталозі, що й сторінка, яку ви розробляєте. Для вставки зображення у Web-сторінку викорис­товується тег <ІМG>. Він теж має кілька параметрів, і закривати його зовсім не обов'язково (як і тег <ВR>).

Вставимо в нашу сторінку посилання на зображення;

<НТМL>

<НЕАD>

<ТІТLЕ>Музика</TITLE>

</НЕАD>

<ВODY>

Музика без кордонів<ВR>

<ІМG SRC="Іmages/foto.іpg"><ВR>

Створено Ігорем Шевченком

</ВODY>

</НТМL>

Перевірте, який вигляд має цей файл у броузері.

Отже, за допомогою параметра SCR ми задаємо розташування файла зображення. Так, Іmages/fоtо.jpq означає, що джерело (source) зоб­раження розташоване у каталозі Іmaqes у файлі під ім'ям fоtо.jpq. Насправді, прописавши замість цього шляху щось на кшталт httр://www.some.соm/імаме/ fоtо.jpq , можна вставити у свій документ картинку з чужого сайта. Щоправда, так ніхто звичайно не робить, тому що цей сайт у будь-яку хвилину може бути відключений чи перезавантажений.

У тега <ІМG> є ще кілька цікавих параметрів:

WIDTH (ширина у пікселях), НЕІGНТ (висота), ВОRDER (окантовка). Рядок <ІМG WIDTH =200 НЕIGHT=100 ВОRDЕR=0 SRC="Іmages/fоtо.jpq "> змусить броузер вивести ваш файл у картинку ви­сотою 100 і шириною 200 пікселів без окантовки. Насправді WIDTH і НЕІGНТ звичайно задаються відповідно до реального розміру зображення. Зви­чайно, броузер може визначити розміри малюнка самостійно, але річ у тім, що користувач одержує сторінку не всю відразу, а частинами. Спочатку пе­редається сам НТМL-файл, а за ним навздогін по­взуть по світових мережах картинки. І поки зобра­ження в дорозі, ваша система не знає, місце якого розміру залишити для нього на екрані. Якщо ви за­здалегідь попередите її про це, прописавши пара­метри WIDTH і НЕІGНТ, броузер із самого початку зможе визначити, на що розраховувати. Не забудь­те тільки при заміні картинки перепризначити її па­раметри, інакше ілюстрації, розтягнуті чи стиснуті в довільному напрямку, будуть схожі на карикатури.

От і готовий наш перший аркуш НТМL (деяка подоба початкової сторінки).

Завдання №3. Створіть наступний файл під ім'ям qroup.html

3.1. Введіть текст слідуючого змісту

<HTML>

<НЕАD>

<ТІТLЕ>Групи</ТІТLЕ>

</НЕАD>

<ВОDY>

<FОNТ SICЕ=4 СОLОR="ВLUE">Мої улюблені музичні групи <FОNТ><ВR><IMG SRC="Іmaqes/ foto.jрд"><ВR>

Воплі Відоплясова<ВR>

Аліса<ВR>

Кіно<ВR>

Акваріум<ВR><ВR>

<FОNТ SIZЕ=2>Створено Ігорем Шевченком </FОNТ>

</ВODY>

</НТМL>

Перевірьте результати вашої роботи.

3.2. Назву однієї із груп виділимо напівжирним шрифтом (<В>Кіно </В> (Воld — жирний)) чи курсивом (<1>Акваріум </I> (Іtaliс — нахилений)). Крім того, будь-яку фра­зу можна відцентрувати:

<СЕNТЕR> Мої улюблені музичні групи</СЕNТЕR>

Внесемо зміни в файл:

<НТМL>

<НЕАD>

<ТІТLЕ>Групи</ТІТLЕ>

</НЕАD>

<ВОDY>

<СЕNТЕR><FОNТ SIZЕ=4 СОLОR="ВLUЕ">Мої улюблені музичні групи</FОNТ><BR></СЕNТЕR>

<ІМG SRС “Imаqеs/mиsіс. jрq"<ВR>

Воплі Відоплясова<ВR>

Аліса<ВR>

<В>Кіно</В><ВR>

<I>Акваріум</I<ВR><ВR>

<FОNТ SIZЕ=2>Створено Ігорем Шевченком

</FОNТ>

</ВODY>

</НТМL> .

Як бачимо, теги вкладаються один в один. Це дуже цінна їхня якість. Наприклад, рядок <СЕNТЕR> <FОNТ СОLОR="ВLUЕ"><В><І>...</І></В> </FОNТ></СЕNТЕR> дозволяє розташувати текст у центрі (<СЕNТЕR>), набравши його синім (ВLUЕ) на­півжирним (<B>) нахиленим (<I>) шрифтом. Треба тільки вчасно закрити тег. Адже якщо, наприклад, залишити відкритим тег <В>, то весь текст до кінця документа буде напівжирним.

Ви можете самостійно замінити назви наведених груп на свої улюблені, а ім'я укладача — на своє. Зауважимо, що назву сторінки ми написали велики­ми (4) синіми (ВLUE) буквами, а ім'я автора малень­кими (2), вставивши перед ними два порожні рядки (<ВR>). Як файл mиsіс.jрq пропоную використову­вати зображення якогось музичного інструмента, наприклад, гітари, хоча можна помістити на Web-сторінку і фотографію улюбленого виконавця.

Завдання №4. Об’єднання сторінок.

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

Для оформлення посилання існує пара тегів <А>...</А>. Усе, що вкладено між ними, є посилан­ням. Записується це так: <А НRЕF="qrоuр.html">Мої улюблені групи</А> чи <А НRЕF="qrоир.html"> <ІМG SRC="Іmаqеs/mиsіс.jрq"></А>.

Тут параметр НRЕF задає ім'я НТМL-файла, що містить сторінку, на яку відбудеться перехід. У пер­шому випадку посиланням буде фраза "Мої улюб­лені групи", у другому — зображення musіс.jрq. Текст посилання на сторінці в броузері виділяється кольором, а зображення за замовчуванням обводиться рамкою. В останньому випадку можна за­брати рамку, задавши значення параметра ВОRDЕR рівне 0 (ВОRDЕR=0).

Документ іпdех.html тепер буде мати такий вигляд:

<НТМL>

<НЕАD>

<ТІТLE>Музика</Т1ТLЕ>

</НЕАD>

<ВODY>

Музика без кордонів<ВR>

<ІМG SRС="Imaqes/foto.jрq"><ВR><A НRЕF= "qгоир.htnl">Мої улюблені групи</А><ВR><ВR>

Створено Ігорем Шевченком

</ВODY>

</НТМL>

Відзначимо, що посилання поділяються на внутрішні й зовнішні. Перші вказують на сторінки, фізично розташовані на тому ж комп'ютері, а другі —на ресурси інших серверів. Набравши, наприклад, таке: <А НRЕF="httр://www/.zhurmаl.ги/mиsіс/rаstа/bq.html”>Акваріум</A>, ми дамо користувачам, які зацікавилися, можливість перейти на персональну сторінку Бориса Гребенщикова.

Але тут є ще один нюанс. Потрапивши на сто­рінку qгоир.html, відвідувач повинен мати можливість повернутися назад. Для цього в ній зручно створи­ти посилання:

<А НRF="іdех.html">Назад</А>

Результат:

<НТМL>

<НЕАD>

<ТІТLЕ>Групи</ТІТLЕ>

</НЕАD>

<ВОDY>

<СЕNТЕR><FОNТ SIZE=4 СОLОR="ВLUЕ">Мої улюблені музичні групи</FОNТ><ВR>

</СЕNТЕR><ІМG SRС="Іmаqеs/mиsіс.jрq"<ВR>

Воплі Відоплясова<ВР>

Аліса<ВР>

<В>Кіно</В><ВR>

<А НRЕF="http://www.zhигпа1.ги/musiс/гаsга/ bq.html"><I>Акваріум</І></А><ВR><ВR>

<FОNТ SIZЕ=2>Створено Ігорем Шевченком<ВР>

<А НRЕF="іdех.html">Назад</А></FОNТ>

</ВОDY>

</НТМL>

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

Завдання №5. Створення таблиць.

Тепер трохи докладніше розглянемо оформлен­ня. Основним засобом дизайну— таблиця. Це основа основ Web-майстерності. Чому саме вона? При оформленні електронного документа виникає бажання розмісти­ти кожен з його елементів на відповідному місці. Таблиця — єдиний спосіб наведення абсолютного порядку на сторінці. Як же її створити? У найпро­стішому випадку це має такий вигляд:

<ТАВLЕ>

<ТR>

<TD>

Текст

</ТАВLЕ>

Цей фрагмент НТМL -коду описує таблицю невизначених розмірів з одним рядком <ТR> і одним стовпцем <ТD>. Її межі не будуть видимі, але їх мож­на візуалізувати, надавши тегу <ТАВLЕ> відповід­них параметрів:

<ТАВLЕR ВОRDЕR="1">.

Таблиця з одним рядком і двома колонками за­дається в такий спосіб:

<ТАВLЕ ВОRDЕR=="1">

<ТR>

<ТD>

Текст 1 (стовпчик перший)

<TD>

Текст 1 (стовпчик другий)

</ТАВLЕ>

Взагалі ж, відкриваючим тегам <ТD> і <ТR> відпо­відають необов'язкові закриваючі теги </ТD> і </ ТR>, але на практиці вони використовуються рідко.

НТМL-код більш складної сторінки буде мати приблизно такий вигляд:

<ТАВLЕ WIDТН="100%"ВОRDЕR="1"ВGСОLOR= "LIMЕ">

<ТR>

<ТD WIТН=30%>Перший рядок (стовпчик пер­ший)

<ТD WITH=70%>Перший рядок (стовпчик дру­гий)

<ТR ВGСОLОR="GRЕЕN">

<ТD>Другий рядок (стовпчик перший)

<ТD>ВGCОLOR="Yеllоw">Другий рядок (сто­впчик другий)

<ТR>

<ТD>Третій рядок (стовпчик перший)

<ТD>Четвертий рядок (стовпчик другий)

</ТАВLЕ>

Вставте цей код в одну зі сторінок — іпdех, html чи qroup, html — природно, у межах дії пари тегів <ВОDY>...</ВОDY>.

Хотілося б звернути вашу увагу на те, що рядок <ТАВLЕ WIDTН="100%"ВОRDЕR="1" ВОСОLОR= "LIМЕ"> можна записати і так: <ТАВІЕ WIDТН=100% ВОRDЕR=1 ВGСОLОR=LIМЕ>, тобто лапки тут і в де­яких інших випадках не є обов'язковими. Але не лінуйтеся їх ставити, це знадобиться вам надалі. Цей рядок означає приблизно наступне: таблиця (ТАВLЕ) займає весь лист (WIТН="100%"), а товщина роз­межувальних ліній дорівнює 1 (ВОRDЕR="1"). Колір тіла комірок таблиці яскраво-зелений (LIМЕ).

Будь-який колір у НТМL задається або назвою (геd, blие, qгееn, qгеу, уеllоw, blасk...), або набо­ром шістнадцяткових значень складових у колірній моделі RGВ (у форматі #RRGGВВ). Наприклад, #FFОООО=Rеd, #ООООFF=Вluе, #000000=Вlасk, #FFFFFF=Whitе. Зауважимо, що не всі кольори бу­дуть відображатися правильно в усіх броузерах.

Тегу <ТАВLЕ> за допомогою параметра ВGСОLОR можна задати колір тiла для всіх комірок, у <ТR> — для рядка, а у <ТD> — для окремої комірки.

Тег <ТD WIDTН=30%> чи <ТD WIDТН=70%> задає розмір комірки у відсотках від ширини таблиці. Зу­стрівши це визначення на самому початку таблиці, броузер буде дотримуватися його і далі, таким чи­ном, у наступних рядках цей параметр для окремих комірок можна не вказувати.

Якщо ви хочете розмістити заголовок таблиці в одній великій комірці — використовуйте параметр СОLSРАN для об'єднання двох сусідніх комірок по горизонталі, а RОWSРАN — по вертикалі.

Наприклад:

<ТАВLЕ ВОRDЕR"1"> <ТR><ТD СОLSРАN=2> . . . <ТR><ТD>. . . <ТD>. . .<ТR><ТD> . . . <ТD> .

</TABLЕ>

У першому рядку ми одержимо одну велику ко­мірку, рівну за розміром двом у наступному рядку.

А от приклад застосування параметра ROWSPAN:

<ТАВLЕ ВОRDЕR="1">

<ТR><ТD RОWSРАN=3> Комірка на 3 рядка <ТD> ...

<ТR> <ТО> ...

<ТR> <ТО> ...

</ТАВLЕ>

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

Слід зазначити, що значення параметра WIDТН можна задавати не тільки у відсотках, а й у пікселях. Так, вираження WIТН="400" визначає шири­ну комірки в чотириста пікселів.

Для вирівнювання тексту й інших об'єктів усере­дині комірки використовують параметри АLIGN і VALING, наприклад: <ТD ALIGN="СЕNТЕR" VАLIGN= "ТОР">.

У цьому випадку вміст комірки буде відцентро­ваний по горизонталі (ALIGN="СЕNТЕR") і зміще­ний до його верхньої межі (VАLIGN= "ТОР"). Параметр горизонтального вирівнювання може прийма­ти значення СЕNТЕR, LEFT і RIGHT, а вертикально­го—ТОР, ВОТТОМ і СЕNТЕR. От і всі початкові відо­мості про таблиці.

Було б неправильно не згадати про основні засоби оформлення тексту великого обсягу.

Теги <Р>...</Р> позначають, відповідно, поча­ток і кінець абзацу. Основний параметр, застосо­вуваний у першому з них, той самий — ALIGN. Він може приймати значення СЕNТЕR, RIGHТ, LEFТ і JUSTIFY. Останнє дозволяє вирівняти текст абзацу за шириною.

Зазначимо також, що рядок <Р ALIGN= "СЕNТЕR">...</Р> рівнозначний <СЕNТЕR>... </СЕNТЕR>.

Чи існують інструменти, що полегшують створен­ня НТМL-файлів? Звичайно, існують. Такими функ­ціями володіє навіть Word. Але більшість професіоналів охоче підпишеться під фразою: "Від­сутність інструмента—кращий інструмент!" І це лег­ко довести.

Спробуйте створити документ у Word і ввести в нього ту саму фразу "Музика — без кордонів", до­давши тире для виразності. Тепер збережіть доку­мент у форматі НТМL. Відкривши знову створений файл у Блокноті Windows, щоб переглянути вихід­ний текст НТМL, ми побачимо приблизно наступне:

<НТМL>

<НЕАD>

<МЕТА НТТР-EQUITV-"Сопtепt-Туре"

СОNТЕNТ="tехt/html;

сhагsеt=windows-12 51">

<КЕТА NАМЕ="Gепегаtог"

СОNТЕNТ="Місгоsoft Word 97 ">

<ТІТLЕ>іпdехw</ТІТLЕ>

<МЕТА NАМЕ="Versіоп"

СОNТЕNТ="8.0.3б12">

<МЕТА NАМЕ="Dаtе"СОNТЕNТ="3/4/97 ">

<МЕТА NАМЕ="Теmрlаtе"

СОNТЕNТ="С:\Ргоqгаm Fіlеs\Місгоsoft Оffiсе\ Office\НТМl.DОТ">

</HEAD>

<ВОDY ВGСОLОR="#ffffff">

<FОNТ FАСЕ="Тіmеs Nеw Rоmаn"

СОLOR="#000000"><P>Музика </FОNТхFОNТ СОLOR"#000000">- </РОМТ>

<FОМT FАСЕ="Тіmеs Nеw Rоmаn"

СОLОR-"#0 0 0 0 0 0">без кордонів</Р></ FОNТ>

</ВОDY>

</НТМL>

Порівняйте цей текст із нашим першим прикла­дом з п'яти рядків. Ви здивовані? Але ж реалізують вони ту саму ідею. Та код НТМL, автоматично ство­рений Word, працює гірше, тому що прив'язаний до конкретного шрифта. Тепер зрозуміло, чому Web-майстри, що поважають себе, працюють у зви­чайних текстових редакторах.

На закінчення порекомендуємо вам кілька корис­них джерел для самостійного вивчення НТМL:

— http://www.troitsk.ги/WWW/bооkгиs/wquide/— вступний курс World Wide Web;

— http://geocstses.соm/SіlісопVаІІеу/Lаkеs/ 4122/ — посібник зі створення персональної Web-сторінки;

— http://gепеsіs.гісог.ги/Dос/ — документація для розроблювачів Web-вузлів. Крім того, корисними будуть різноманітні книги з Web-дизайну і мови НТМL.

Таким чином, якщо ви виявите кмітливість і на­полегливість, можливо, сам Борис Гребенщиков приїде потиснути вашу чесну руку. До речі, нехай вас не бентежить, що інформація, перш ніж з'явить­ся в Мережі, має бути розміщена на сервері, підклю­ченому до неї цілодобово. Подібними серверами в нашій країні володіють переважно провайдери Інтернет чи великі фірми, але за кордоном їх кількість обчислюється вже навіть не десятками, а сотнями тисяч. Більше того, на багатьох із них ви можете розмістити свою сторінку зовсім безкоштовно. Але це тема окремої розмови.