28_matvienko-web

стосується головної сторінки).

Параметри оцінки якості сайта

1. Зовнішній вигляд

Шрифти: придатність шрифту для електронного подання; розбірливість шрифту; визначення необхідності друкарського виділення (напівжирний шрифт або підкреслення) для користувача, достатність контрасту між шрифтом і фоновим кольором.

Формат: наявність відповідного простору, довжина рядка (занадто довгий або занадто короткий); наявність достатніх пробілів, які оточують текст і графіку; відповідність розміру сторінки електронному представленню.

Колір: відповідність кольорів, застосовуваних для конкретної аудиторії і визначеної мети.

2. Структура сайту

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

Інформаційна архітектура: структура сайта; можливість “ інтуїтивної” роботи із сайтом; взаємозв‘язки та ієрархія.

3. Застосовувані засоби

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

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

4. Повідомлення

Відношення до обмеження доступу: розробка сайта з урахуванням обмеження доступу для користувача, включаючи час завантаження графіки, час завантаження змісту сторінки, версії програм перегляду, апаратних платформ, швидкості з‘єднання.

Зміст: забезпечення повного і достатнього змісту; точність, повність і актуальність змісту; стиль викладу змісту; відповідність первинної комунікаційної модальності (вербальна, невербальна, графічна) аудиторії.

Зрозумілість: відповідність повідомлення аудиторії; наявність у споживачів знань для розуміння тексту.

5. Привабливість

Рівень складності для аудиторії; підтримка інтересу до сайта; релевантніть інформації, пов‘язана з інтересами і мотиваціями користувачів; виконання користувачами намічених цілей; повернення користувачів до сайта.

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

Потреба у спеціальному доступі: повідомлення про потребу у спеціальному доступі для людей з фізичними вадами, включаючи осіб з поганим зором, слухом, рухом та ін.

11

РОЗДІЛ 3.ОСНОВНІ ПОНЯТТЯ МОВИ HTML

HTML (Hypertext Markup Language — Мова гіпертекстової розмітки) — це мова опису структури сторінок документів, яка дозволяє звичайний текст форматувати в абзаци, заголовки, списки та інші структури, створювати посилання на інші сторінки. Це текстова мова, в якій інструкції з форматування, що називаються тегами, вбудовані в розділи документа, які містять конкретну інформацію. Теги повідомляють броузерам, як форматувати і представляти інформацію на екрані.

Мова гіпертекстової розмітки HTML була запропонована Тімом Бернерсом-Лі у 1989 як один з компонентів технології розробки розподіленої гіпертекстової системи World Wide Web. Ідея гіпертекстової інформаційної системи полягає у тому, що користувач має можливість переглядати документи (сторінки тексту) у найбільш зручному для себе порядку, а не послідовно, як це прийнято при читанні книг. Досягається це шляхом створення спеціального механізму пов`язуваня різних сторінок тексту за допомогою гіпертекстових посилань.

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

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

Таким чином, гіпертекстова база даних у концепції WWW – це набір текстових файлів, розмічених мовою HTML, яка визначає форму представлення інформації (розмітка) і структуру зв’язків цих файлів (гіпертекстові посилання).

За основу моделі розмітки документів у HTML прийнята тегова модель. Тегова модель описує документ як сукупність контейнерів, кожен з яких починається і закінчується тегами. Тобто документ НТМL є не чим іншим, як звичайним АSСII-файлом1 з доданими до нього керуючими НТМL-кодами (тегами).

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

1 ASCII (American Standard Code for Information Interchange – американський стандартний код обміну інформацією) – схема кодування, де літерам, цифрам, знакам пунктуації і деяким іншим символам надані числові значення від 0 до 255. Таким чином, один символ у кодуванні ASCII займає 1 байт, а об’єм текстового ASCII-файла дорівнює кількості символів у тексті.

12

НТМL-тег складається з імені, за яким може слідувати необов’язковий список атрибутів тегу. Текст тегу вміщується у кутові дужки (<І>). Найпростіший варіант тегу – ім’я, вміщене у кутові дужки, наприклад, <HEAD>. Для більш складних тегів характерна наявність різних атрибутів, які можуть мати конкретні значення, визначені для видозмінення функцій тегу.

Атрибути тегу слідують за ім’ям і відділяються один від одного одним або кількома пропусками. Порядок запису атрибутів у тегу не має значення. Значення атрибута слідує за знаком рівняння, який стоїть після імені атрибута. Якщо значення атрибута – одне слово або число, його можна вказати безпосередньо після знаку рівняння, не виділяючи додатково. Решту значень необхідно вміщувати у одинарні або подвійні лапки, особливо якщо вони містять декілька розділених пропусками слів.

Найчастіше НТМL-теги складаються з початкового і кінцевого компонентів, між якими розміщуються текст та інші елементи документа. Ім’я кінцевого тега ідентичне імені початкового тегу, але перед ім’ям ставиться коса риска (/) (наприклад, для тегу заголовка <ТIТLЕ> закриваючою парою буде </ТIТLЕ>). Кінцеві теги не містять атрибутів.

При використанні вкладених тегів їх слід закривати, починаючи з останнього і рухаючись до першого.

Деякі НТМL-теги не мають кінцевого компонента, оскільки є автономними елементами. Наприклад, тег зображення <IMG>, призначений для вставки зображення у документ, не має кінцевого компонента.

Для створення HTML-документа можна застосувати редактор для ASCII (зокрема, Блокнот системи Windows). Такі редактори дозволяють вводити HTML-теги, не додаючи до створеного нічого додатково. Створення документа у такому редакторі дозволяє паралельно переглядати результат у програміброузері. Інший тип редакторів – візуальні HTML-редактори, наприклад, Microsoft FrontPage. Їх інтерфейс побудований за тим же принципом, що і інтерфейс текстового процесора, такого, як, наприклад, Word. Для роботи з візуальним редактором можна взагалі не володіти мовою HTML. Недоліком візуальних редакторів є те, що розмір створюваного ними HTML-документа у декілька разів більший, ніж документа, створеного звичайним Блокнотом системи Windows. В умовах низької пропускної здатності вітчизняних мереж цей недолік, який стосується швидкості завантаження сторінки (і, відповідно, вартості часу, який на це витрачається), є досить суттєвим недоліком (файл

.htm, створений у WORD, в 4 - 9 разів більший, ніж файл аналогічного змісту, створений програмою Блокнот).

13

РОЗДІЛ 4. СТРУКТУРНІ ТЕГИ ДОКУМЕНТІВ HTML

І ФОРМАТУВАННЯ ТЕКСТУ

Мета: опанувати принципи побудови логічної структури HTMLдокумента і основні принципи форматування тексту.

Створення HTML-документа відбувається розташуванням тегів (tags) мови HTML всередині звичайного неформатованого тексту. Теги HTML — це послідовності символів, які починаються знаком “ менше” (<) і закінчуються знаком “ більше” (>). Теги можуть мати атрибути, які, в свою чергу, можуть приймати певні значення.

Броузери WWW обов’язково дотримуються трьох правил при синтаксичному аналізі HTML:

1.Пробіли та інші “ невидимі символи” ігноруються.

2.Теги форматування можуть бути написані великими або малими

літерами.

3.Більшість тегів форматування пишуться парами.

Технологія створення HTML-документа

HTML-документ можна створювати за допомогою найпростішого текстового процесора, який дозволяє зберігати текстові (ASCII) файли, наприклад Windows Notepad (Блокнот). При цьому не застосовуються ніякі коди для форматування.

Порядок створення Web-документа:

1.У головному меню WINDOWS вибрати пункт Пуск-Программы-

Стандартные -Блокнот.

2.Ввести структуру документа.

3.Зберегти створений документ, обов`язково надавши йому розширення .htm

4.Перевірити вигляд створеної гіпертекстової сторінки. Для перевірки одержаної сторінки завантажити Internet Explorer, відкрити меню File, вибрати команду Open file, завантажити створений файл.

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

6. Активізувати Internet Explorer, натиснути кнопку Обновить. Структурні теги документів HTML визначають початок і закінчення різних частин документа HTML.

Структурні теги HTML-документа визначають початок і закінчення різних частин документа. Хоча багато броузерів правильно інтерпретують документ і без них, правила вимагають, щоб структурні теги були включені до

1 Більшість Web-броузерів дозволяють переглядати Web-сторінки у форматі HTML. Наприклад, у броузері Internet Explorer для перегляду документа у форматі HTML необхідно натиснути праву кнопку мишки і вибрати у контекстному меню пункт - Просмотр в виде HTML або скористатись основним меню: пункт Вид, команда В виде HTML

14

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

Позначення HTML-документа

<HTML>… < /HTML> - включають в себе всі інші теги HTML і весь інформаційний зміст документа.

<HTML> розташовується у першому рядку документа;

</HTML> - у останньому рядку.

Заголовок документа

<HEAD>… </HEAD> - містить інформацію про документ.

Назва документа

<TITLE>… </TITLE> - назва документа, яка відображається в рядку заголовка Internet Explorer.

Тіло документа

<BODY>…</BODY> - тіло документа містить весь текст з інформацією і всі теги HTML, які використовуються для форматування тексту.

ПРИКЛАД (базова структура HTML-документа)

Файл у форматі HTML:

<HTML>

<HEAD>

<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>

<BODY>

…

</BODY>

</HTML>

Відображення файла програмою-броузером:

Microsoft Internet Explorer і Netscape Navigator допускають застосування атрибутів LEFTMARGIN=”n” і ТОРМАRGIN=”n” у тегу <ВОDY>. Атрибут

15

LEFTMARGIN = задає ліве поле для всієї сторінки. ТОРМАRGIN= визначає верхнє поле. Число n вказує на ширину поля у пікселях. Наприклад, тег <ВОDY LEFTMARGIN =”40"> створює на всій сторінці ліве поле шириною 40 пікселів. При n= 0 ліве поле відсутнє.

ФОРМАТУВАННЯ ТЕКСТУ

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

-початок абзацу і кінець рядка;

-стилі заголовків;

-фізичні стилі;

-логічні стилі;

-списки;

-спеціальні символи.

Тег управління абзацем

Початок абзацу

<P>…</P> - позначає початок і кінець нового абзацу.

Атрибути тега <P>

ALIGN=LEFT|RIGHT|CENTER|JUSTIFY - вирівнює текст всередині абзацу

Приклад запису тега абзацу з атрибутом:

<P ALIGN= JUSTIFY> - абзац вирівнюється по ширині

Тег управління переходом на новий рядок

Тег <BR> - розпочинає новий рядок тексту в межах поточного абзацу. Примусове переведення рядка використовується для того, щоб порушити

стандартний порядок відображення тексту.

Теги змістового виділення тексту

<BLOCKQUOTE>…</BLOCKQUOTE> - дозволяє розміщувати текст на рівній відстані від меж екрану і створювати відступи ліворуч і праворуч.

Тег додає поля ліворуч і праворуч від тексту і дозволяє розташувати текст компактно у центрі сторінки. При використанні <ВLОСKQUOTE > декілька разів текст все більше стискається до центру.

<CITE>….</CITE> - розмічає текст як цитату, як правило, курсивом.

Теги стильового виділення тексту

Фізичні стилі –	це реальні атрибути шрифту, такі, як курсив або жирне
виділення.
Тег	Значення
<I>.....</I>	курсив (ITALIC)
<B>...</B>	жирний шрифт (ВОLD)
<ТТ>... </TТ>	телетайп
<U>. ..</U>	підкреслений

16

<S>...</S>

<BIG >... </ BIG >

<SMALL >...</ SMALL >

<SUB >...</ SUB >

<SUP >... </ SUР >

ПРИКЛАД 1

Файл у форматі HTML:

<HTML>

<HEAD>

перекреслений текст збільшений шрифт зменшений шрифт

підрядкові символи надрядкові символи

<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>

<BODY>

<P ALIGN=CENTER>

УКРАЇНСЬКА МИНУВЩИНА <BR> Етнографічний довідник </P>

</BODY>

</HTML>

Відображення файла програмою-броузером:

ПРИКЛАД 2

Файл у форматі HTML:

<HTML>

<HEAD>

<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>

<BODY>

<P ALIGN=CENTER>

<B>УКРАЇНСЬКА МИНУВЩИНА </B><BR> <I>Етнографічний довідник</I><BR>

<U>До читача</U> </P> </BODY>

</HTML>

17

Відображення файла програмою-броузером:

Контекстні підказки

Для пояснення змісту терміна при наведенні на нього мишкою використовується тег:

<ACRONYM title=” пояснювальний текст”> Термін </ACRONYM>

ПРИКЛАД

Файл у форматі HTML:

<HTML>

<TITLE>Моя перша HTML-сторінка</TITLE>

<BODY>
<ACRONYM	title=” Енциклопедія традиційної	культури	та побуту
українців. Містить	відомості про забуті способи	ведення	домашнього

господарства, хатнє начиння, народну моду”><P ALIGN=CENTER> <B>УКРАЇНСЬКА МИНУВЩИНА</B></P> </ACRONYM>

</BODY>

</HTML>

Відображення файла програмою-броузером:

Коментарі і спеціальні символи

Для додавання коментарів у HTML– документи використовується контейнер <!— текст коментаря—>.

Приклад:

<!— Це перший варіант сторінки, створений 31/12/2000 —>.

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

Якщо необхідно ввести символ, якого немає на клавіатурі, або символ,

18

вже зарезервований в розмітці HTML-документа (наприклад, кутові дужки), необхідно ввести спеціальну послідовність символів. Для введення спеціальних символів у документ застосовується конструкція: &ІМ’Я СИМВОЛА. Після цієї послідовності ставиться знак “ крапка з комою”, щоб відділити закінчення символа і початок тексту.

Спеціальні символи використовуються для відображення елементів математичних символів (наприклад: &frac34 це 3/4), рідкісних символів національних алфавітів і загальноприйнятих символів (© - це © , ® - це ® )1.

Приклад:

<P ALIGN=RIGHT>&copy Всі права застережені. Посилання обов‘язкові.<P>

Відображення програмою-броузером:

Завдання для самостійної роботи

1.Створити HTML-документ, давши йому назву і визначивши його

структуру.

2.Вирівняти абзац по правій межі екрана.

3.Представити інформацію у вигляді чотирьох рядків тексту, розміщених один під одним:

Сімейний та суспільний побут. Сім’я і сімейна община. Громада.

Громадські спільності.

Встановити такі фізичні стилі (у порядку слідування):

-жирний шрифт;

-підкреслений курсив;

-жирний курсив

-підкреслений жирний курсив.

4. Вставити цитату до Web-сторінки, використовуючи теги

<CITE>….</CITE>.

Текст для цитати:

СІМ’Я – засноване на шлюбі чи кровній спорідненості об’єднання людей,

1 Повний перелік символів знаходиться на сайті http://www.w3.org

19

пов’язаних спільністю побуту та взаємною відповідальністю.

5.Створити документ, який містить один абзац. Застосовуючи до

абзацу декілька разів тег <BLOCKQUOTE>…</BLOCKQUOTE>, дослідити, як його застосування вплине на відображенння введеного абзацу.

Запитання для самоперевірки

1.Які основні правила застосовуються броузерами при синтаксичному аналізі HTML?

2.Які теги використовуються для позначення заголовка документа; назви документа; тіла документа?

3.Як розташовується тег, який визначає, що документ написаний

HTML-мовою?

4.За допомогою яких тегів встановлюються фізичні стилі текстових

форматів?

5.Які атрибути тега абзацу використовуються для розміщення тексту по центру екрана?

6.Який тег використовується для позначення кінця рядка?

7.За допомогою якого тега текст розміщується на рівній відстані від меж екрана?

20