diplomna_chornookav
.pdfЕлемент називається звичайно за іменем тегу (без кутових дужок).
Наприклад, елементом є заголовок сторінки: <ТIТLЕ> … </ТIТLЕ>.
Уci елементи, передбачені в HTML, можна умовно поділити на кілька категорій:
1)структурні – елементи, обов’язкові для документа, що відповідає стандарту HTML (наприклад, HTМL, HEAD, BODY i TITLE);
2)блокові – елементи, призначені для форматування цілих текстових блоків (наприклад, DIV, Н1, Н2, НЗ, Н4, Н5, Н6, Р, PRE); часто блокові елементи відокремлюються переведенням рядка вiд іншої частини документа;
3)текстові – елементи, що задають розмітку шрифту (І, В, О, BІG, SМALL i iн.), розмітку тексту (STRONG, CODE, VAR, C1TE i iн.);
4)спеціальні – елементи порожнього рядка (BR, HR), якірний елемент А,
впроваджені елементи (ІMG, OBJECT, МАР i iн.), елементи таблицi (TABLE).
У будь-якому документі HTML обов’язково присутні вкладені елементи,
тобто такі, що включені до складу інших елементів.
Зазначимо, що у запису елементів HTML можна використовувати як великі, так i малi літери. Так, броузер однаково буде сприймати теги <TІTLE>, <Title> або <title>. Однак для унiфiкацiї iменa тегів записують великими літерами.
2.2. Оформлення тексту
Найбільш поширеною формою подання iнформацiї є текст, тому він звичайно займає велику частину Web-сторінок. Розглянемо основні можливості оформлення тексту, передбачені в HTML.
Формування абзаців i рядків
При ствоpeннi Web-сторінок електронного посібника потрібно прагнути до лаконічних текстів, чітко структурованих абзацами. Для створення абзацу у мові HTML передбачено кілька можливостей. Найпростіша з них – це використання тегів <Р> i </Р>, між якими вміщений текст абзацу. Проте,
кінцевий тег < / Р> в елементі абзацу не є обов'язковим.
11
Для переведення рядка (розрив рядка) застосовують тег <BR>. Цей тег є порожнім елементом, що змушує браузер перевести текст на новий рядок. Теги
<BR> зручні при оформленні поштових адрес, наборі віршів тощо.
3адання заголовків
Заголовки поділяють НТМL-документ на логiчно закінчені блоки.
Завдяки заголовкам студент, що зайшов на Web-сторінку може отримати уявлення про її вміст. Для задання заголовків використовуються парні теги
<Н1> (заголовок 1-го, найвищого рівня), <Н2> (заголовок 2-го рівня). Усього передбачено 6 рівнів заголовків.
Браузери відображають заголовки більшим (напівжирним) шрифтом.
Вищому рівню заголовку відповідає більший розмір шрифту. Заголовки відокремлюються порожніми рядками від іншого тексту.
Форматування символiв і абзаців
Форматування символiв
Параметри шрифту, який використовують для відображення тексту на
Web-сторінках, найпростіше визначити за допомогою дескриптора FONT, для якого передбачені такі атрибути: face (гapнітypa шрифту або список допустимих шрифтiв); color (колiр шрифту) i size (розмiр шрифту). Щоб задати будь-який нарис шрифту, використовують теги: <В>...</В> – для задання напiвжирного тексту; <І>...</І> - для задання курсивного тексту i <U>...< /U> –
для пiдкресленого тексту.
Вирiвнювання абзацiв
Абзаци, які визначають тегами <Р> i <BR>, за замовчанням вирівнюються по лівому краю сторiнки. Змiнити таке вирiвнювання можна за допомогою атрибута align. Значення align=”center” задаватиме вирiвнювання по центру,
значення align=”right” – вирiвнювання по правому краю сторiнки
(вирiвнювання по лiвому краю визначається атрибутом align=”left”).
Наприклад, заголовок <Hl аlign="сеntеr"> Ряди </Нl> розташовуватиметься по центру сторінки.
12
Задання фону сторiнки
Якщо ж потрібно визначити колiр шрифту для всієї сторiнки, то використовують атрибут text дескриптора <ВОDY>. Наприклад, тег <BODY text="red"> задає для всього тексту червоний колiр.
Koлip фону всього НТМL-документа визначається атрибутом bgcolor тегу
<ВОDY>. Наприклад, тег <ВОDY bgcolor="olive"> призначає оливковий колiр
для фону Web-сторiнки.
Створення спискiв
Мова HTML надає спецiальнi елементи, що дозволяють подавати текстову iнформацiю у виглядi подiбних спискiв.
Як відомо виділяють марковані (неупорядковані) i нумеровані
(упорядковані) списки, причому код списку є структурою iз вкладених елементiв. Зовнiшнiм елементом є пари тегів:
1) <UL> . . . < /UL> – для маркованого списку;
2 <OL> . . . </OL> – для нумерованого списку.
У серединi цих тегів містяться елементи списку, якi записуються за допомогою одиночних тегів: <LІ> Bміст рядка списку.
Отже, кiлькiсть елементiв LІ дорiвнює кiлькостi рядкiв у списку. Iменa
наведених вище тегів є скороченнями слiв: UL (Unordered List) –
неупорядкований список, тобто список без номерів; OL (Ordered List) –
упорядкований список, LI (List Item) – елемент списку.
Iнодi на початку списку розташовують заголовок, що видiляється парним тегом <LH>. . .</LH>. Ім’я цього тегу LH – скорочення вiд List Header (заголовок списку).
2.3. Гiперпосилання i графіка на Web-сторінках
Створення гіперпосилань
Гiперпосилання або просто посилання є найпопулярнiшим елементом
Web-сторінок. За їx допомогою користувач може переходити до рiзних частин поточної сторiнки, звертатися до iнших cторінок або Web-вузлiв.
13
Посилання створюють у такий спосiб: на вихiднiй Web-сторiнцi
визначають вiдправну точка посилання, наприклад, підкреслене слово або малюнок, а на цiльовiй задають точку призначення посилання, що вiдповiдає як конкретному НТМL-елементу (тексту, малюнку, аудiоабо вiдеоклiпу), так i
документу в цілому.
Відправну точку посилання задають тегом <А>. Iм’я цього тегу походить вiд першої лiтери слова anchor – якiр. Сам елемент А називається елементом прив’язки або якiрним елементом. Усередині тегу <А> ставиться обов’язковий атрибут href, за допомогою якого визначається точка призначення посилання
(цiльовий ресурс). Мiж тегами <А> i </А> розмiщують текст посилання або елемент малюнка. Найпростiше посилання може виглядати так: <А
'href="rest.html">ознака Даламбера</А>. На Web-сторiнцi це посилання вiдображатиметься у виглядi тексту “ознака Даламбера”.При клацаннi мишею на цьому посиланні буде завантажуватись НТМL-файл rest.html.
В атрибутi href зазначене лише ім’я файла, що вiдповiдає відносному посиланню на файл, який розмiщений у тій самій папці, що й вихідний документ. Якщо потрiбно створити посилання на ресурс, розмiщений у World
Wide Web, то в атрибутi href указується URL цього ресурсу, наприклад, <А href="http://www.samsung.com"> Продукцiя фiрми Samsung </А>.
Види гіперпосилань
Мова HTML підтримує внутрiшнi i зовнiшнi гiперпосилання. Якщо посилання здійснює перехід у межах того самого документа, то його називають внутрiшнiм. Taкi посилання звичайно застосовують у великих документах для переміщення по розділах. Якщо посилання забезпечує перехід до іншого документа, розташованого на іншому Web-вузлі, то це зовнішнє посилання.
Вказівник URL ресурсу може бути абсолютним i відносним. Абсолютний
URL містить yci компоненти, необхiднi для того, щоб браузер зміг знайти Web-
сторінку у WWW. Але якщо посилання вказує на ресурс, що міститься на тому самому вузлі, що i вихідний документ, зручніше користуватися скороченим записом URL, у якому вказується тільки папка i файл. Такий запис адреси
14
називається відносним URL. Прикладом відносного URL є значення атрибута href=”rest.html”.
Створення внутрішнього посилання
Отже, для переходів з однієї частини документа до іншої застосовують внутрiшнi посилання. Цей вид посилань доцільно використовувати, коли вci
частини великого документа не відображаються цілком у вікнi браузера.
Внутрішнє посилання, як i зовнішнє, задають за допомогою елемента тегу <А>
з атрибутом href. Але, на вiдмiну вiд зовнішнього посилання, у значенні атрибута href вказується не URL, а ім’я мітки (мітка позначається знаком #).
Наприклад, такий тег
<А hrеf="#розділ1 "> Елементи HTML </А>
задає посилання на елемент документа, позначеного міткою "розділ1". Саме посилання має вигляд виділеного тексту „Елементи HTML”. Мітку створюють за допомогою якоря <А>, однак у ньому замість атрибута href використовується атрибут name.
Зробимо кілька зауважень iз приводу оформлення посилань. По-перше,
текст посилання не повинен бути довгим, щоб не утруднювати вибір потрібного посилання при швидкому перегляді документа користувачем. По-
друге, текст посилання повинен відображати змicт об’єкта, на який вказує посилання. Не слід, наприклад, використовувати для посилань малоінформативні фрази типу „Клацніть тут” чи „Клацни i побачиш”.
Вставка зображення
Вставка зображення на Web-сторінку виконується тегом <IMG>.
Усередині цього тегу обов'язково записується атрибут src, що містить URL
зображення. Назва цього атрибута походить вiд слова source – джерело.
Наприклад, якщо потрібно розмicтити на сторiнцi картинку з файла Max. jpg. Для цього необхідно зберегти файл iз зображенням у певній папці
(наприклад, у тій самій папці, що i НТМL-документ), а у документ ввести тег
<IMG src=”max.jpg”>.
15
За замовчуванням браузер використовуватиме реальні розміри зображення, яке зберігається в графічному файлі. Якщо потрібно змінити ці розміри, застосовують атрибути width (ширина) i height (висота). Значення розмірів зображення задаються звичайно у пiкселах, наприклад, width=”133” height=”33”.
Можна також задавати ширину i висоту у відсотках розмірів зовнішнього елемента (сторiнки). Наприклад, зображення, що задається тегом <IMG src=”max.jpg” width=”30%”>, займе по ширині 30% сторінки, а висота буде розрахована браузером із зберіганням пропорцій.
Користувач бажає скласти уявлення про зміст сторiнки, коли вона тiльки почала завантажуватися. Тоді він зможе вирішити, чи варто чекати повного завантаження сторiнки. У цьому йому допоможуть написи на мiсцi малюнків,
що не завантажилися. Їх задають атрибутами alt. Наприклад, така інструкція
<IMG src="photo.jpg" width="50%" аlt="…"> замість малюнка, що не завантажився, виведе рамку iз межами малюнка i помістить у неї текст “…”.
Зображення-посилання
Гiперпосилання на Web-сторінках можна подавати не тiльки як виділений текст, а й у виглядi малюнка. Клацання мишею по такому малюнку призводить до завантаження нового HTML-документа або переходу в межах поточного документа.
Для створення зображення-посилання встановлюють у потрібному мiсцi
документа тег <А> i вкладають до нього елемент IMG. Наприклад, якщо у документі розмістити елемент <А href=''http://www.rambler.соm"> <IMG src="logo.jpg" width="100" height="28"> </А>, то можна буде клацанням по малюнку з файла Logo.jpg завантажувати пошукову систему Рамблер.
Щодо компонування й обсягу Web-сторiнок, то така сторінка повинна займати щонайменше половину робочої ділянки вікна браузера. Оптимальним спiввiдношенням є, коли під змicтову частину видiляється приблизно 80%
простору сторiнки, а під елементи навiгацiї (списки, меню, кнопки) – 20%.
16
Розмір НТМL-файлiв не повинен перевищувати 20-30 Кб, а оптимальним розміром файлів зображень є декілька кілобайти. Якщо зображення не поміщається у файл такого розміру, потрібно виконати обробку зображення,
щоб підсумковий обсяг у форматi GIF або JPEG не перевищував одного-двох десяткiв Кб.
Якщо обсяг сторiнки великий, потрібно забезпечити швидке початкове завантаження, при якому на eкpaнi найперше з’являться данi, що відображають зміст сторінки. Taкi данi найкраще розмістити у верхній частині сторінки.
Уверхній частині сторінки повинна розташовуватися зведена інформація
зпитань, яким присвячена дана сторінка. Потрібно врахувати, що при швидкому знайомстві з матеріалом вiдвiдувачi читають тільки перші речення в кожному абзацi. Тому початок абзацу має адекватно відбивати його наступний зміст.
2.4. Робота з таблицями
Таблиці у Web-документах застосовуються не тiльки для розміщення табличних даних, а й для вставки зображень i посилань, для раціонального компонування Web-сторінок.
Елементи таблиці
Таблиці будуються за принципом вкладення i вводяться на Web-сторінку за допомогою ряду елементів. Кожна таблиця починається тегом <TABLE> i
закінчується тегом </TABLE>. Створювана таблиця ніби розгортається по рядках, а рядки заповнюються комірками. При цьому всередину тегів
<TABLE>...</TABLE> можуть вставлятися такі елементи:
TR – елемент створення рядка;
TD – елемент, що визначає вміст комірки даних;
TH – елемент, що визначає комірку заголовка.
Наприклад, для створення таблицi 3х2 використовується такий шаблон:
<TABLE>
<TR><TD>. . .</TD><TD>. . .</TD></TR> <TR><TD>. . .</TD><TD>. . .</TD></TR>
17
<TR><TD>. . .</TD><TD>. . .</TD></TR> </TABLE>,
де крапками позначений вміст кожної комiрки. Усерединi тегів першого рядка <TR>. . . </TR> замiсть елементів TD можуть розміщуватися заголовки кожного стовпця – елементи ТН.
§3. Характеристика та етапи створення електронного
підручника
Проаналізувавши декілька програмних продуктів та технологій, їх використання у навчальному процесі, я і мої наукові керівники створили власний електронний гіпермедіа підручник із математичного аналізу навчального призначення по темі “Ряди”.
При створенні посібника нами були використані елементи технології гіпермедіа, які дозволили пов’язати гіпертекстовими посиланнями елементи тексту інших сторінок. Застосування таких технологій дає змогу активізувати навчально-пізнавальну діяльність студентів.
Інформаційний блок нашого програмного продукту містить теоретичний матеріал та практичні заняття, розроблені у відповідності з чинними програмою та підручниками з математичного аналізу, що передбачає засвоєння навчального матеріалу на рівні вимог стандарту. Також у підручнику містяться задачі і запитання для модульної перевірки.
На початковому етапі роботи створила електронні версії практичних занять та задач і питань для модульної перевірки в текстовому редакторі
Microsoft Word 2003. При цьому використовувала інструментальні засоби створення малюнків, формульний редактор, можливості вставки зображень.
Маючи Web-версію курсу, особливу увагу приділяла структуруванню матеріалу– за розділами, підрозділами, складанню змістів розділів. Кожна мінімальна логічна частина (підрозділ) є окремим файлом, а всі створені файли розмістила в одному каталозі, який має підкаталоги. При структуруванні посібника було враховано, що розмір кожного файлу повинен бути таким, щоб при його відображенні в Web-браузері він не займав більше 3-4 екранів.
18
В принципі, робота з текстом матеріалу на розглянутому (підготовчому)
етапі на цьому завершилася. Проте, я зробила ще одну операцію – перетворення тексту в HTMLформат. Для цього в меню “Файл” вибрала режим “Зберегти як веб-сторінку”, в результаті чого був створений файл *.htm, де * - ім’я doc-
файлу. Отримані файли я далі редагувала для доробки електронного посібника.
Потім створювала необхідні гіпертекстові внутрішні та зовнішні посилання, що встановлюють зв'язки між окремими файлами та їх фрагментами.
Погоджуючись із думками фахівців про те, що читання об’ємних текстів з екрана монітора – шкідлива для зору форма роботи з комп’ютером, а
сприймання з екрана текстової інформації є набагато менш зручним та ефективним, ніж читання книги, ми додаємо до електронного варіанту підручника ще й друкований варіант. У такий спосіб ми забезпечимо чергування різноманітних форм роботи, наприклад, частину матеріалу студент може опрацювати з допомогою комп’ютера, а іншу частину прочитати з друкованого варіанту.
Розроблений мною і моїми науковими керівниками електронний підручник має наступну структуру.
Електронний посібник складають три вікна (фрейми): верхній, лівий,
головний (рис.1.1).
рис.1.1.
19
У верхньому фреймі відображено назву та навігаційне меню, яке призначене для завантаження підменю у ліве вікно. Лівий фрейм призначений для завантаження змісту лекцій чи практичних занять у головний фрейм, де за допомогою смуги прокрутки користувач може його проглядати. При наведені курсора миші на пункт параграфа змінюється колір фону гіперпосилання, а при клацанні лівою клавішею відбувається гіперпосилання, і у головному фреймі зявляється зміст матеріалу даного параграфа.
Отже, наш програмний продукт є комплексом, який забезпечує свідоме та міцне засвоєння навчального матеріалу. Він дозволяє в цікавій та зрозумілій формі подавати матеріал та засвоювати його. Він може бути використаний як у вузі, так і вдома (у якості програми-репетитора). Викладач може у будь-який час внести якісь зміни чи корективи до підручника, при цьому не потрібно чекати довгий проміжок часу поки підручник буде перевидано. До того ж не всі студенти мають можливість взяти підручники у бібліотеці. А електронні варіанти підручників доступні всім, хто має комп’ютер. У наступному розділі буде розглянуто друкований варіант практичних занять, які містить створений електронний підручник.
20