Завдання. 1. Запустіть текстовий редактор.

1. Гіпертекст. Гіпертекст — це електронний документ, який містить гіперпосилання на інші документи. Гіперпосилання може мати вигляд підкресленого виокремленого кольором тексту, ри­сунка або деякого значка. Воно містить невидиму для користу­вача частину — адресу файлу чи адресу місця у документі, до якого потрібно перейти. Гіперпосилання реагує на вказівник і клацання миші. Якщо вказівник миші навести на гіперпосилання, то він набуде вигляду долоні. Якщо тепер клацнути лівою клаві­шею миші, то виконається перехід на інше місце в тексті або активізується новий файл. Такий файл може містити текст, звук чи відеозображення. Гіпертекстову технологію застосовують для подання інформації у WWW-просторі, зокрема, для роботи з Web-документами.

Web-документ зберігається і пересилається як файл з роз­ширенням htm чи html. Це звичайні текстові файли — програми, написані мовою НТМL. Відображаються такі файли на екрані зовсім інакше, ніж вони виглядають у html-файлі. Для відображення html-файлів використовують броузери.

Web-документ інакше називають Web-сторінкою. Броузер дає змогу легко переходити від одної сторінки до іншої за допомогою команд Вперед і Назад чи кнопок зі стрілками на панелі інструментів.

Декілька Web-документів на одну тему, що є на деякому.комп'ютері чи належать одному власнику, утворюють Web-вузол (інший термін Web-сайт).

2. Структура Web-документа. Типовий простий Web-документ складається з текстових блоків, двох-трьох рисунків невеликих розмірів, горизонтальних ліній та гіперпосилань. Більш складні Web-документи містять фрейми (вкладені Web-сторінки), елементи керування (кнопки, перемикачі, поля діалогу), динамічні ефекти та графічні об'єкти ActiveX.

Є три типи текстових блоків: короткі (по два-три речення) текстові абзаци, списки, таблиці.

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

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

3. Мова НТМL. Для створення Web-сторінок Web-дизайнери використовують гіпертекстові Web-редактори, наприклад, Hot Metal PRO, Dog Professional, Netscape Editor тощо, де використовується мова НТМL — Нуреr Техt Markup Language (мова для розмічування гіпертекстових документів). Сучасні редактори FrontPage i MS Word дають змогу створювати Web-сторінки методом конструювання без застосування кодів мови НТМL, оскільки коди вони генерують автоматично.

Для підготовки html-файлу можна використати текстовий редактор Notepad. Після написання програми файл потрібно зберегти на диску з деякою назвою з розширенням htm чи html Програма мовою НТМL (html-файл) має таку загальну структуру:

< НТМL>

< НЕАD> < ТІТLЕ> Назва вікна Web-сторінки < /ТІТLЕ>

< /НЕАD>

< ВОDY параметри>

Мене звати Світлана. Мені 17 років.

Я хочу стати Web-дизайнером.

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

Я розташую файл на сервері і мою сторінку зможуть побачити в різних кінцях світу.

< /ВОВУ>

< /HTML>

Команди мови НТМL називаються тегами. Теги бувають одинарними і парними. Більшість тегів є парними, як наприклад, означення НТМL-файлу: < НТМL>... < /НТМl>. Парні теги позначають початок і кінець області дії відповідної команди. Теги записують у кутових дужках. Тег, що закриває область дії, має косу риску. Не забувайте її писати, інакше тег працюватиме неправильно. Тег може містити параметри, які користувач записує у першому тезі через пропуск, наприклад, < ВОDY ТЕХТ=" red”>.

Між тегами < ТІТLЕ>...< /ТІТLЕ> пишуть заголовок Windows-вікна, а між < ВОDY параметри>...< /ВОDY> — основний текст, до якого застосовують теги форматування. Розглянемо основні параметри тега ВОDY:

BACKGROUND = " шлях до графічгого файлу" — задає картинку для фону; BGCOLOR = " white" — задає білий колір фону, якщо не використовується фон-картинка; ТЕХТ = " black" — задає колір тексту (тут чорний) на сторінці.

4. Теги для форматування тексту.

< Р> — початок нового абзаца; його прийнято записувати в кінці попереднього. Наступне речення, починатиметься з нового, вирівняного до лівого краю абзаца без відступу у першому рядку.

< ВR> — наступний за цим тегом текст буде наведено у ново­му рядку без пропуску порожнього рядка.

< НR> — буде проведена горизонтальна лінія.

< B> текст < /В> — товстий шрифт тексту, що є між тегами.

< І> текст < /I> — шрифт-курсив.

< U> текст < /U> — підкреслений шрифт.

< SUB> текст < /SUB> — нижній індекс, наприклад у Н₂О.

< SUP> текст < /SUP> — верхній індекс, наприклад, 1°.

< ВІG> текст < /ВIG> — великий шрифт.

< SMALL> текст < /SMALL> — малий шрифт.

< ЕМ> текст < /ЕМ> — виокремлений курсивом текст (тег І);

< В> < І> текст < /I> < /В> — товстий курсив. Цей приклад демонструє застосування принципу вкладення тегів.

. Окремим типом абзаца є заголовок, Є шість видів заголовків, які відрізняються розмірами символів:

Заголовок за замовчуванням вирівнюється до лівого краю вікна. Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання:

< СЕNТЕR> елемент < /СЕNТЕR> —вирівнювання до центру;

< LEFТ> елемент < /LEFТ> —вирівнювання до лівого краю;

< RIGНТ> елемент < /RIGНТ> — вирівнювання до правого краю;

Інформацію можна подати у вигляді таблиці без рамок за допомогою парного тега < РRЕ>...< /РRЕ>. Текст в середині цього тега оформляють засобами табуляції. Броузер такий текст переформатовувати не буде. Теги для створення таблиць з рамками тут не розглядатимемо.

5. Тег задання параметрів шрифта FONТ. Щоб задати назву конкретного шрифта, його розмір і колір використовують парний тег FONТ з параметрами FАСЕ, SISE та СОLOR, наприклад,

< FONТ FАСЕ = " Decor, Аrbat;, Kudriashov" SISE = +2 COLOR=" red" > текст < /FONT>

Якщо на комп'ютері клієнта встановлено шрифт Decor, то він буде застосований до даного тексту, інакше броузер застосує шрифт Аrbat чи Kudriashov, інакше — деякий свій стандартний шрифт, наприклад, Times New Roman. Розміри символів шрифта можуть бути від 1 до 7. Розмір 3 вважається стандартним, він орієнтовно відповідає 10 пікселям. Розмір 7 є найбільшим. Число 2 як значення параметра SISE означає другий розмір шрифта, число +2 означає, що розмір шрифта має бути на дві одиниці більший, ніж стандартний, тобто п'ятий, число -2 означатиме перший розмір шрифта — на дві одиниці менший, ніж стандартний.

Колір тексту буде червоний.

6. Створення списків. Є три типи списків: ненумерований нумерований, означення. Список може мати заголовок, який охоплюють тегами < LH>...< /LH>, наприклад, < LH> Це заголовок списку< /LН>.

Ненумерований список утворюють за допомогою парного тега. < UL >...< /UL> і одинарних тегів < LI>, наприклад, так:

< LH > Мої улюблені предмети: < / LH >

< UL >

< LI > інформатика

< LI > математика

< LI > англійська мова

< LI > історія

. < / UL >

На екрані отримаємо:

Мої улюблені предмети:

• інформатика

• математика

• англійська мова

• історія

Нумерований список створюють за допомогою парного тега < OL>...< / OL > з необов'язковим параметром ТYРЕ і одинарних тегів < LI >, наприклад, так:

< LH > Мої улюблені предмети: < / LH >

< OL ТYРЕ=" 1" >

< LI > Інформатика

< LI > Англійська мова

< LI > Історія '

< / OL >

На екрані отримаємо:

Мої улюблені предмети:

1. Інформатика

2. Англійська мова

3. Історія

Значення " і" чи " І" параметра ТYРЕ задає нумерацію римськими малими (і, іі, ііі, іv,...) чи великими (І, II, III, IV,...) цифрами, а значення " а" чи " А" — латинськими малими (а, b, с, d,...) чи великими (А, В, С,...) буквами.

7. Вставляння графічних і відео-файлів. Графічні зображення (фотографії, картинки, піктограми тощо) зберігаються на серверах в окремих файлах з розширеннями bmp, jpg, gif та іншими і подаються на екран клієнта за допомогою команди, що задаєтья одинарним тегом < ІМG> з параметрами: < ІМG SRС=" адреса графічного файлу" АLТ=" альтернативний текст" ALIGN=" left” WIDTH=" 240" НЕІGНТ=" 200" >

Обов'язковим є лише перший параметр SRС. Альтернативний текст — це текст, який виводитиметься замість картинки, якщо броузер не може прийняти графічний файл, або якщо режим відображення графіки вимкнено. Параметр ALIGN задає місце розташування картинки на екрані, а параметри WIDTH і НЕІGНТ її розміри по ширині і висоті в пікселях або відсотках, наприклад < ІМG WIDTH =" 300" > задає ширину картинки 300 пікселів; < ІМG WIDTH =" 50% " > задає ширину картинки пів сторінки у горизонтальному напрямку.

Для проведення ліній різної довжини і товщини застосовують параметри WIDTH і SISE, наприклад, тег < НR SISE =" 30" COLOR= “red”> замість звичайної лінії дає червону полосу товщиною 30 пікселів.

Зображення можна подати в рамці, що рекомендують робити, що його використовуватимуть як гіперпосилання. Для створення рамки навколо зображення призначений параметр BORDER= „товщина рамки в пікселях”. Справа і зліва від картинки, яку обгортає текст, можна зробити вільний простір: НSРАСЕ = " кількість пікселів". Можна створити вільний простір також над і під рисунком: VSРАСЕ = " кількість пікселів".

За допомогою тега ІМG можна вставити також відеофільм, який запускатиметься в момент відкриття WEB-сторінки:

< ІМG DYNSRC=" адреса відео-файлу" >

Адреси файлів. Для виклику віддалених файлів, тобто файлів, які є на серверах в мережі Internet, адресу записують з зазначенням назви протоколу доступу http і URL-адреси файлу, наприклад, " https://www.polynet.lviv.ua/ourpage.htm".

Для доступу до файлів на локальному диску використовують протокол доступу file: " file: ///диск: / шлях до файлу".

Наприклад, " file: ///d: /mycatalog/mypage.htm". Назву протокол file file у можна інколи не писати, наприклад, SRC=" с: /Windows98/Лес.bmp".

Якщо графічні чи інші файли є в тому ж каталозі, що основний html-файл, то достатньо зазначити лише назву файлу, наприклад, SRC =”myfoto.gif”. Якщо файл є в деякому сусідньому каталозі images, то шлях до нього можна подати так: “../ images / myfoto. Gif”. Отже, тег IMG може мати такий конкретний вигляд:

< IMG SRC =" с: /Windows98/Лес.bmp" ALT=" Ліс" >.

9. Вставляння гіперпосилань. Є два види гіперпосилань: 1) нафайл; 2) на деяке місце на даній сторінці, а саме: на початок сторінки — tор, кінець сторінки — bottom, на деякий позначений текст. Гіперпосилання вставляють за допомогою парного тега < А>...< /А> з параметром HREF = " адреса файлу (або слова tор чи bottom чи позначений текст)".

Гіперпосиланням може бути текст або деяке графічне зображення. Розглянемо на прикладі випадок, коли гіперпосиланням є текст. Нехай у реченні " Мене звати Світлана" слово " Світлана потрібно зробити гіперпосиланням на файл " newinf.htm", що містить додаткові відомості про Світлану (цей файл ще треба створити). Це роблять так:

Мене звати < А НRЕF " newinf.htm" > Світлана< /А>.

На екрані слово Світлана буде підкреслене і зображене іншим кольором. Колір гіперпосилання визначається у тезі ВОDY параметром LINK = " колір". Крім цього корисними є ще два параметри: VLINK = " інший колір" — змінює колір гіперпосилання на інший після першого використання; ALINK = „ще інший колір” — змінює колір активізованого користувачем гіперпосилання на ще інший.

Тепер розглянемо, як деяке графічне зображення зробити гіперпосиланням. Для цього в середині тега < А>...< /А> потрібно використати тег IMG. Наприклад, фотографію Світлани, що є у файлі “svitlana.gif”, візьмемо в рамку і зробимо з неї гіперпосилання на файл newinf.htm:

< А НRЕF = " newinf.htm " > < ІМG SRC = " svitlana.gif " BORDER =8 > < /А>

Клацнувши у Web-сторінці на фотографії Світлани, отримaємо на екрані файл з додатковою інформацією про неї.

Розглянемо другий тип гіперпосилань — посилання в межах сторінки. Спочатку потрібно позначити місце на сторінці, куди здійснюватиметься перехід. Якщо з деякого місця перехід має виконуватися на початок сторінки, то в місце html-файлу, що відповідає початку сторінки, вводять тег, який називається якорем:

< А NАМЕ=" #початок" > < /А>.

Аналогічно позначають (кидають якір у) деяке місце в кінці файлу:

< А NАМЕ=" #кінець" > < /А>.

Будь-яке місце в тексті можна позначити за допомогою тега:

< А NАМЕ=" #мояпозначка" > < /А>.

Тепер на сторінці розставляють гіперпосилання на створені позначки:

< А НRЕF=" #початок (#кінець або #мояпозначка)" > текст гіперпосилання < /А>.

Якщо одна сторінка займає декілька екранів, то в кінці сторінки вартує вставити гіперпосилання для переходу на її початок, наприклад,

Тепер можна перейти < А НRЕF=" #початок" > на початок< /А> сторінки.

10. Вставляння звуку і відео зображення. Важливо пам'ятати, що назви звукових файлів мають розширення au; wav, mid, midi, ra, а відеофайлів — аvi, vivo, mpeg тощо. Щоб вставити звук чи відео, достатньо як значення параметра НRЕF у тезі гіперпосилання задати шлях до відповідного звукового чи відеофайлу, який вже є на диску, наприклад,

Тепер < А НRЕF=" mysound.wav" > послухайте мене (150К) < /А>.

Текст послухайте мене (150K) стане гіперпосиланням, клацнувщи на якому можна почути привітання, застереження, деяку інформацію, яка була заздалегідь записана, наприклад, за допомогою програми Фонограф у файл " mysound.wav " обсягом 150 Кбайт. Оскільки звукові та відео файли завантажуються довго, рекомендують зазначати у гіперпосиланнях їхні обсяги в кілобайтах.

Щоб звуковий чи відео ефект повторювався декілька разів, наприклад 2 рази, у тезі < А> використовують параметр LООР=2. Щоб звук з деякого файлу пролунав у момент запуску сторінки, потрібно використати тег < BGSOUND SRC = " адреса звукового файлу" >. Інший спосіб — використайте тег < ЕМВЕD SRC=" адреса звукового файлу" > і, окрім звукового ефекту, отримаєте на екрані магнітофонну панель для регулювання тривалості і сили звуку, припинення чи продовження звучання тощо).

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

Розглянемо ефект біжучого тексту у полосі, що має висоту НЕIGНТ =" висота в пікселях" і фон ВGCOLOR =”колір фону”. Ефект створюється за допомогою парного тега < МАRQUEЕ>...< / МАRQUEЕ >:

< МАRQUEЕ ВGCOLOR =" green" НЕIGНТ = " 40" > Вас вітає фірма Деол< / МАRQUEЕ >

Слова " Вас вітає фірма Деол" будуть пробігати в полосі справа наліво, заходитимуть за край екрану і з'являтимуться знову справа. Такий ефект рекомендують застосовувати до заголовків сторінки.

Ефект відбивання від країв екрана забезпечує параметр BEHAVIOR = " alternate", а зупинити рядок біля лівого краю екрана може значення цього параметра " slide". Значення " right" параметра DIRECTION забезпечить ефект руху у протилежну сторону.

Обмеження кількості проходів, наприклад числом 5, задається параметром LООР=" 5". Полосу можна відцентрувати за допомогою параметрів HSPASE і VSPASE. Швидкість руху задає параметр SCROLLMOUNT=" 3", де значення вибирають з діапазону від 1 (повільно) до 10 (швидко).

Інші динамічні ефекти створюють за допомогою процедур з використанням мов програмування Visual Basic Script абоJava Script.. '

Зауваження. Немає єдиного стандарту мови НТМL. Деякі теги чи їхні параметри не діють у всіх броузерах. Деякі теги і параметри для різних броузерів називаються по-різному. Якщо в написанні назви параметра чи в його значенні допущено синтаксичну помилку, то тег чи параметр не діятимуть.

Хід роботи.

Завдання 1. Створіть свою особисту Web-сторінку. Викличіть Notepad чи деякий Web-редактор. Введіть текст про себе за наведеним нижче зразком і збережіть його у файлі file1.htm:

< НТМL>

< НЕАD> < ТІТLЕ> Му Web-page < /ТІТLЕ>

< /НЕAD>

< ВОDY BGCOLOR = " aqua" ТЕХТ = " геd”>

< Н2> Це Web-сторінка Світлани Марущак< /Н2> < НR>

< СЕNТЕR> < В> Привіт! < /В> Мене звати < В> Світлана< /В>

< /СЕNТЕR> < Р>

Я вчуся на першому курсі на факультеті прикладної математики Державного університету< I> & quot; Львівська політехніка & quot; < /I>. Мені 17 років. Мої улюблені предмети: інформатика, математика, англійська мова, історія. Я люблю слухати хорошу музику, читати пригодницькі романи, подорожувати влітку, кататися на гірських лижах взимку, ходити на дискотеку в любу пору року, інколи читати конспекти. < ВR>

< СЕNТЕR> Колись тут буде моя фотографія. < /СЕNТЕR> < Р>

< АDDRESS> Моя адреса: 79054, Львів-54, п.с. 580 < АDDRESS> < НR>

< /ВОDY> < /НТМL>

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

Завдання 2. Переробіть файл filе1.htm, щоб створити спиcки двох видів і вставити свою фотографію або деяку картинку з Clip Art, наприклад сat.bmp, rabbit.bmp чи іншу. Новий файл назвіть file2.htm. Перегляньте його у броузері.

Завдання 3. Вставте в документ гіперпосилання на інший hml-файл (наприклад, file1.htm тощо), а також посилання на початок і кінець документа. Збережіть файл під назвою file3.htm.Шт. Перегляньте його броузером.

Завдання 4. Запишіть свій голос за допомогою програми Фонограф (наприклад, розповідь про себе) у звуковий файл вставте звук в основну сторінку. Застосуйте тег МАRQUEЕ до одного з заголовків і проекспериментуйте з його параметрами

Контрольні питання.

3. Що таке гіперпосилання?

4. Як описати структуру простого Web-документа?

5. Які є типи списків?

6. Як вставити графічне зображення у Web-сторінку?

7. Які параметри може мати тег МАRQUEЕ?

Інструкція до лабораторної роботи № 23

Створення й ведення колективного веб-журналу

Мета роботи: Отримати знання та практичні вміння, необхідні при перегляді існуючих веб-журналів (блогів) та створенні власних блогів.