Internet-технології · 2009. 9. 20. · розмітки html. Мова html...

Матвієнко О.В., Бородкіна І.Л.

Internet-технології: проектування Web-сторінки

Навчальний посібник

Київ

„Альтерпрес” 2003

Матеріали взято із сайту www.iub.at.ua

2

Матвієнко О.В., Бородкіна І.Л. Internet-технології: проектування Web-сторінки: Навч.посібник.-К.: Альтерпрес, 2003.- 114 с.

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

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

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

Видання друге, виправлене і доповнене. ISBN 966-542-228-6 Рецензенти:

Чачко А.С. доктор педагогічних наук, професор, академік Міжнародної академії інформатизації при ООН (Київський національний університет культури і мистецтв) Зайченко Ю.П. доктор технічних наук, професор (Навчально-науковий комплекс “Інститут прикладного системного аналізу” НАН України та Міністерства освіти і науки України)

Рекомендовано Міністерством освіти і науки України як навчальний

посібник для студентів вищих навчальних закладів (лист №14/18.2-726 від 5.04.2002).

Рекомендовано до друку Головною вченою радою Київського національного універсистету культури і мистецтв (протокол №4 від 13.12.2001 р.)

© Матвієнко О.В., 2004 © Бородкіна І.Л., 2004


3

ВСТУП Сутність інформаційного суспільства визначається кількома

взаємопов‘язаними процесами: − інформація і знання стають важливим ресурсом і рушійною силою

соціально-економічного, технологічного і культурного розвитку; − формується ринок інформації і знань як чинник виробництва, поряд з

ринками природних ресурсів, праці і капіталу; − стрімко зростає питома вага галузей, які забезпечують створення,

передавання і використання інформації; − розвинена інформаційна інфраструктура перетворюється на умову, що

визначає національну і регіональну конкурентоспроможність; − розвиток і активне впровадження у всі сфери діяльності нових

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

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

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

мовою HTML; − Web-дизайнерів, в обов’язки яких входить перенесення створеного

художником-дизайнером стильового оформлення проекту на Web-платформу;

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

створення HTML-документів. Для повного освоєння мови HTML необхідно скористатися спеціальною літературою або відповідними інформаційними ресурсами мережі Інтернет1.

Навчальний посібник з проектування Web-сторінок містить приклади використання структурних елементів мови HTML при створенні електронного документа і завдання для самостійної роботи.

Даний навчальний курс є основою для подальшого вивчення професійно орієнтованих дисциплін - “WEB-дизайн”, “Електронні публікації”, “Гіпертекстові і мультимедійні системи”.

1 Від англ. content - зміст


4

Дидактичний матеріал, використаний в навчальному посібнику, взято з книги: Українська минувщина: Ілюстрований етнографічний довідник/ А.П.Пономарьов, Л.Ф.Артюх, Т.В.Косміна та ін.-К.: Либідь, 1993.-256 с.

Графічний файл mamaj5.jpg, використаний як приклад при вивченні розділу 10, знаходиться на сайті: http://www.brama.com/ukr.html


5

РОЗДІЛ 1.ЕЛЕКТРОННИЙ ГІПЕРТЕКСТОВИЙ ДОКУМЕНТ

Сучасні ефективні інформаційні технології ґрунтуються на принципі “оцифровування”, тобто представлення різноманітних предметів і явищ як певним чином закодованої інформації у цифровому вигляді, який найбільш придатний для комп’ютерної обробки, програмування і передавання через сітьові канали. Фіксація інформації на машинопрочитуваних носіях, поява нових каналів передачі інформації, перехід, із широким впровадженням мережі Інтернет, від тексту до гіпертексту, від паперу до Web-сторінок викликає появу нових термінів і понять, зокрема, поняття “електронний документ”, “віртуальний документ”, “віртуальні інформаційні ресурси” та ін.

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

Сьогодні терміни «електронний документ» та «віртуальний документ» не є усталеними і потребують окремого розгляду поняття “віртуальність” стосовно форми існування документа.

Термін “віртуальний”, як правило, використовується для позначення уявності об’єкта і останнім часом увійшов до широкого вжитку у зв’язку з розвитком комп’ютерної техніки і бурхливим розвитком мережі Інтернет (віртуальна пам’ять, віртуальний диск, віртуальний світ, віртуальна реальність, віртуальна бібліотека, віртуальні ресурси, віртуальна корпорація). Словник з обчислювальної техніки фірми Microsoft дає таке тлумачення поняття “віртуальний”: ”Virtual- віртуальний – пристрій або об’єкт, які здаються не тим, чим є насправді”. Словник з програмування та інформатики дає таке визначення: “Virtual- віртуальний – такий, що не має фізичного втілення або сприймається інакше, ніж реалізований”.

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

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


6

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

Структура документа, доступ до якого здійснюється за допомогою мережі Інтернет, визначається динамічністю характеру документа в Інтернеті і “мозаїчністю” його складових. Частини гіпертекстового документа, поєднані посиланнями, можна читати у довільному порядку, фізично вони можуть бути розміщені не тільки у різних файлах, а і на різних комп’ютерах. Таким чином вони набувають відносної самостійності і можуть входити як елементи до інших “віртуальних документів”.

Це стосується файлів з розширенням .HTM, тобто документів, записаних мовою гіпертекстової розмітки HTML (HyperText Markup Language). Кожний файл, призначений для функціонування в мережі, має свою адресу URL (Uniform Resource Locator – універсальний локатор ресурсу; використовується для визначення адрес різних серверів в Інтернет і документів на кожному сервері), може містити посилання на інші документи за цією ж тематикою, а також посилання на малюнки, які можуть знаходитись на цьому ж або на іншому комп’ютері. Програми-броузери (від англ. browse – переглядати), наприклад, Internet Explorer, дозволяють користувачу обирати за власним бажанням режим перегляду документів, які завантажуються з мережі Інтернет, тобто відключати малюнки, звук, анімацію, які фізично не є складовими документа, але призначені для цілісного його сприйняття. Така можливість, безумовно, впливає на інформаційну функцію документа і спосіб відображення інформації людською свідомістю.

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

М.Тейлор дає таке визначення гіпертексту: “Гіпертекст – це не завершена праця, а відкрите сплетіння гетерогенних зв’язків і асоціацій, які знаходяться у процесі постійного перегляду і поповнення. Структура гіпертексту є не фіксованою, а вічно змінюваною і завжди мобільною”. Деякі фахівці в галузі документознавства вважають, що з розвитком гіпертекстових технологій може концептуально змінитись поняття документа. На їх думку,


7

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

Традиційні визначення надають поняттю документа досить широке тлумачення, наприклад, запропоноване Кулешовим С.Г: “...документ – це текст (як логічна послідовність мовних і немовних знаків), зафіксований на речовому виробі, основною функцією якого є збереження та розповсюдження (передача) інформації в просторі і часі”. Це визначення автоматично включає в клас документів і електронні (або машинопрочитувані) документи. Наведене визначення не містить обмежень ні на характер інформації, ні на характер матеріального носія і не потребує додаткового визначення електронного документа (як гіпертекстового, так і цільнооформленого) з точки зору комунікаційно-інформаційного процесу, але актуальними завданнями є розв’язання понятійно-термінологічних питань електронного документа, пов’язаних із визначенням сутності електронного документа, його оригінальності, ідентифікації.


8

РОЗДІЛ 2.ТИПИ WEB-САЙТІВ І ОЦІНКА ЇХ ЯКОСТІ Гіпертекстова база даних у концепції WWW – це набір текстових файлів,

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

Електронні документи, створені мовою HTML і призначені для використання у мережі Інтернет, називаються Web-сторінками. Вони поєднуються у Web-сайти. Сайтом у мережі Інтернет називають комплекс взаємопов‘язаних однією темою Web-сторінок. Умовно сайти класифікують за принципом приналежності власника сайта до тієї або іншої категорії. Така класифікація корелює з розподілом сайтів за стилем і якістю дизайну.

Найбільш масовою є така категорія Web-сайтів, як особисті сторінки користувачів (англ. home pages), які за традицією називаються сторінками, хоча багато з них являють собою повноцінні сайти. Оскільки створюють свої сторінки різні категорії споживачів, цінність змісту і дизайн таких сторінок часто не становлять цінності. Манера оформлення і подання інформації, властиві таким сторінкам, є наслідком тих мотивів, якими свідомо або несвідомо керуються їх створювачі.

При створенні сайту фірми або комерційної організації пріоритети змінюються. Як і у традиційних видах подання бізнес-інформації (буклети, проспекти, рекламні оголошення), корпоративний сайт має головною метою створити у користувача привабливий образ фірми, який запам‘ятовується. Сайт фірми – це інструмент рекламний тією ж мірою, що і друкований інформаційний засіб, тому він потребує якісного дизайну. Середній рівень корпоративних сайтів є досить високим, оскільки вони створюються, як правило, професійними дизайнерами. Крім участі професіоналів, обставиною, яка сприяє якісному дизайну корпоративних сайтів, є те, що їх зміст оновлюється порівняно нечасто, що дозволяє застосовувати статичний, менш гнучкий дизайн. Через статичність змісту більшість таких сайтів розраховані на одноразове відвідування, тому створювачі підходять до дизайну з особливою вимогливістю, щоб справити враження на відвідувача з першого разу. Звичайно, багато з корпоративних сайтів містять інформацію не тільки про саму фірму, але і про її продукти, тобто інформацію, яка оновлюється порівняно часто. Тим самим цей вид сайтів до певної міри зближується з некомерційними і контент-сайтами. Така подвійна рекламно-інформаційна функція характерна також для “офіційних” сайтів фільмів, музичних альбомів і груп, спортивних команд. Багато з цих сайтів вже не є комерційними, особливо якщо вони належать не самим видавцям, кіностудіям або музикантам, а їх прихильникам.

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

Найбільш впливовим і помітним різновидом сайтів є контент-сайти -


9

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

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

Саме структура документа, а не його зовнішній вигляд, є об‘єктом мови розмітки HTML. Мова HTML призначена саме для розмітки логічної, а не візуальної, структури, а зовнішній вигляд документа у броузері є лише побічним ефектом логічної розмітки.

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

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

Саме такий академічний стиль характерний для освітніх і наукових сайтів і є найкращим рішенням для тих, кому дизайн не надто важливий.

Переваги академічного стилю: - потребує мало витрат часу і ресурсів. Логічну розмітку зручно

вносити прямо при роботі над змістом і дизайн як окрема стадія проекту не потрібен;

- стандарт мови HTML 2.0 незначним чином залежить від властивостей конкретного браузера, наявності у системі певних шрифтів, здатності комп‘ютера відтворювати кольори. Стрімке зростання кількості ресурсів мережі Інтернет і відсутність

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

– оформлення документа (використання шрифтів, формату сторінок і


10

кольору для передачі змісту тексту); – структура сайта; – використані засоби розробки; – зміст повідомлення; – привабливість; – доступність.

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

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

- читачі однаково застосовують шрифти як із засічками, так і без них; - довжина рядка впливає на швидкість роботи; - курсивні і всі великі літери більш складні для читання, ніж звичайний

друк; - контрастність друкарських елементів (середній розмір, чіткість, світлість)

більш важливі, ніж малюнок шрифту; - використання білих літер на кольоровому фоні є ефективним засобом

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

застосовані до сітьвих документів. Структура сайта є основою, на якій розробники можуть створювати

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

- дезорієнтація користувача (незнання того, де користувач знаходиться відносно структури сайта);

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

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

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

Дослідження свідчать, що користувачі чекають не більше 8 секунд, поки що-небудь з‘явиться на відкритій ними сторінці, потім готові чекати до 20 секунд, поки сторінка повністю завантажиться, і ще 6 секунд їм потрібно на те, щоб вирішити, продовжувати перегляд сайта чи ні.

Стосовно розміщення інформації на сторінках існують рекомендації: на головній сторінці може бути мало тексту і посилання на інші сторінки сайту, на інших сторінках можна вміщувати весь обсяг інформації на одній сторінці. На відміну від традиційних паперових засобів, сітьові сторінки не мають обмежень на довжину. Існує тест на змістовність сторінки: її необхідно роздрукувати, при цьому не менше 3/4 повинно бути заповнено інформативним текстом (це не


11

стосується головної сторінки). ППараметри оцінки якості сайта 1. Зовнішній вигляд Шрифти: придатність шрифту для електронного подання; розбірливість

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

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

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

2. Структура сайту Підтримка навігації: тип навігаційної підтримки, забезпечуваний сайтом,

її достатність; корисність додаткових видів навігаційної підтримки для споживача.

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

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

мультимедіа, звук, відеозапис. Обмеження цілісності: урахування обмеження цілісності для

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

4. Повідомлення Відношення до обмеження доступу: розробка сайта з урахуванням

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

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

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

5. Привабливість Рівень складності для аудиторії; підтримка інтересу до сайта;

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

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

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


12

РОЗДІЛ 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-файла дорівнює кількості символів у тексті.


13

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

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

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

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

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

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


14

РОЗДІЛ 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


15

документа. На початковому етапі вивчення мови 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>. Атрибут


16

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> підкреслений


17

<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>


ПРИКЛАД 2 Файл у форматі HTML:

<HTML> <HEAD> <TITLE>Моя перша HTML-сторінка</TITLE> </HEAD> <BODY> <P ALIGN=CENTER> <B>УКРАЇНСЬКА МИНУВЩИНА </B><BR> <I>Етнографічний довідник</I><BR> <U>До читача</U> </P> </BODY>

</HTML>


18

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

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

використовується тег: <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-документа для ігнорування команд.

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


19

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

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

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

обов‘язкові.<P> Відображення програмою-броузером:

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

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

розміщених один під одним: Сімейний та суспільний побут. Сім’я і сімейна община. Громада. Громадські спільності. Встановити такі фізичні стилі (у порядку слідування): - жирний шрифт; - підкреслений курсив; - жирний курсив - підкреслений жирний курсив. 4. Вставити цитату до Web-сторінки, використовуючи теги

<CITE>….</CITE>. Текст для цитати: СІМ’Я – засноване на шлюбі чи кровній спорідненості об’єднання людей,

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


20

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

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

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

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

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

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

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

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

екрана?


21

РОЗДІЛ 5. КОЛІР ФОНУ І ТЕКСТУ

Мета: навчитись застосовувати кольори для оформлення елементів HTML-документа.

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

Колір фону і тексту може задаватись шістнадцятковими значеннями RRGGBB (Red, Green, Blue) червоного, зеленого і синього кольорів відповідно або позначеннями кольорів англійською мовою. Яскравість кожної складової вимірюється цілим числом, яке у десятковій системі числення знаходиться у межах від 0 до 255, а в шістнадцятковій може приймати значення від 0 до 9 і від A до F (00, 01,..., 09, 0A,...,FF). Значення 00 є мінімальним, а FF - максимальним, наприклад:

Червоний Red #FF0000 Зелений Green #00FF00 Синій Blue #0000FF Застосовуючи різні значення інтенсивності червоного, зеленого і синього

кольорів, можна одержати такі відтінки: darkblue #00008B greenyellow #ADFF2F lightcoral #F08080 tomato #FF6347 У Додатку 2 наведено таблицю англійських назв кольорів і відповідні

коди RGB. Тег <BODY> містить список додаткових параметрів, які управляють

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

Атрибути тегу <BODY> BGCOLOR Задає колір фону TEXT Задає колір тексту BACKGROUND Визначає зображення, яке використовується як

фонове Для визначення кольору фону документа тег <BODY> записується таким

чином (атрибуту BGCOLOR можуть бути надані як RGB-коди, так і безпосередньо назви кольорів англійською мовою):

<BODY BGCOLOR=#FF0000> або <BODY BGCOLOR=RED> - фон документа буде червоного кольору. <BODY TEXT=#FF0000> або <BODY TEXT=RED> - колір тексту в документі буде червоним. Атрибути можуть бути записані одночасно: <BODY BGCOLOR=RED TEXT=WHITE> - колір фону червоний,

колір тексту - білий.


22

Для зміни кольору абзаца або будь-якого слова в тексті можна скористатись атрибутом COLOR тега <FONT>… </FONT>:

<FONT COLOR=#FF0000> або <FONT COLOR= RED >. Примітка. У випадку, якщо є потреба створити колір, коду і назви якого

немає у наведених довідкових матеріалах, можна скористатись будь-яким графічним редактором (в тому числі, і найпростішим - PAINT). У кожному графічному редакторі є палітра для “змішування кольорів”, де можна дізнатись про інтенсивність трьох складових будь-якого кольору, представлену у десятковій формі. Щоб одержати їх шістнадцяткові значення, слід скористатись Калькулятором – стандартною програмою Windows.

Для цього необхідно: - завантажити PAINT; - увійти в пункт меню Палитра-Изменить палитру -Определить цвет; - користуючись повзунками, обрати потрібний колір і відтінок; - завантажити Калькулятор; - перевести його у розширений режим Вид-Инженерный; - ввести інтенсивність кольору (наприклад, червоний колір має

інтенсивість 226) і перейти на шістнадцяткове числення (режим Hex): у віконці калькулятора буде написано Е2 – це шістнадцяткове значення деяткового 226;

- перейти у десятковий режим – ввести наступний код інтенсивності кольору – перейти у режим Hex і таким чином визначити інтенсивність всіх трьох складових.

Графічне зображення як фон При необхідності можна використати зображення (графічний файл) як

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

WWW-броузери підтримують обмежену кількість форматів файлів для вбудованих зображень, і не всі броузери можуть відображати кожен з цих форматів у вікні HTML-документа. Два найбільш популярних формати, які підтримуються Internet Explorer і більшістю інших броузерів – формати GIF і JPEG (графічні файли у цих форматах мають розширення .GIF і .JPG).

Графічний формат GIF - найбільш популярний формат включення вбудованих зображень у WWW-сторінки, оскільки він підтримується всіма графічними броузерами. Файли у цьому форматі можуть містити максимум 256 кольорів. Це також єдиний формат, який підтримує прозорість кольору і дозволяє стискання без втрати якості. Формат широко застосовується для створення різних елементів Web-сторінок: кнопки, іконки, банери1, анімаційні

1 Банер (від англ.banner) - рекламне зображення на Web-сторінці, яке виконує роль гіперпосилання на ресурс Інтернет, який рекламується.


23

зображення та інші швидкозавантажувані зображення із низьким кольоровідображенням.

Формат JPEG був розроблений як засіб для стискання зображень з палітрою на 16,7 млн. можливих кольорів. Можливість роботи з повноцінною палітрою обумовлює перевагу JPEG над GIF при демонстрації сканованих фотографій, картин, малюнків та інших зображень. При стисканні файла відчуваються втрати якості зображення. Великий розмір файлів обумовлює їх повільне завантаження на Web-сторінку.

Для використання зображення як фону необхідно вказати шлях до файла на диску, у якому знаходиться зображення. Наприклад, зображення знаходиться у файлі 008.gif у папці IMG на диску С:. В цьому випадку тег <BODY> з атрибутом встановлення фонового зображення буде записаний таким чином:

<BODY BACKGROUND=”C:/IMG/008.GIF”>. У випадку, якщо файл зображення знаходиться у тій же папці, що і

HTML-документ, шлях до файла можна не вказувати, просто вказати його ім’я (як у наведеному нижче прикладі).


<HTML> <HEAD> <TITLE>Моя перша HTML-сторінка</TITLE> </HEAD> <BODY BACKGROUND=”008.gif”> </BODY >

</HTML>


24


Завдання для самостійної роботи 1. Встановити у HTML-документі блакитний колір фону і жовтий

колір тексту. 2. У HTML-документі назву документа виконати зеленим кольором, а

найбільш інформативні слова виділити синім кольором. 3. Встановити фонове зображення і розмістити на ньому текстову

інформацію шрифтом відповідного кольору. Запитання для самоперевірки

1. Який атрибут використовується для встановлення фонового зображення?

2. Який атрибут задає колір фону сторінки? 3. Який атрибут задає колір тексту у всьому тілі документа? 4. За допомогою якого атрибута встановлюється колір шрифту? Дати

пояснення застосування RGB. 5. Чи можна використовувати одночасно атрибути BGCOLOR та

BACKGROUND? 6. Файли яких форматів застосовуються у вигляді графічних

зображень у Web-документах?За допомогою якого атрибута встановлюється колір шрифту? Дати пояснення застосування RGB.


25

РОЗДІЛ 6. СТИЛІ ЗАГОЛОВКІВ

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

Функції заголовків Рубрикація – це система заголовків видання й позначуваних ними

підрозділів (рубрик), яка виражає логічний чи інший зв`язок і супідрядність частин тексту.

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

Рубрикація – це така система заголовків, у якій заголовки різної значущості посідають різні щаблі (від вищого через проміжні до нижчого). Термін “щабель” умовно позначає значущість заголовка: на першому, верхньому, щаблі стоять заголовки найвищої значущості, на другому, наступному - заголовки, значущість яких менша за значущість заголовків першого щабля на один крок і так далі.

Заголовки характеризуються такими ознаками: 1. Міра змістовності, склад і форма заголовка. 2. Місце заголовка на сторінці відносно основного тексту. 3. Взаємодія заголовка з текстом. 4. Характер частини тексту, позначеної заголовком. Мова HTML використовує шість стилів заголовків для виділення тексту.

Стилі нумеруються від 1 до 6, причому розмір шрифту заголовку першого стилю є найбільшим.

Стандарт мови HTML нараховує 11 атрибутів тега заголовка, але не всі вони реалізовані у більшості програм-броузерів. Розглянемо тільки атрибут АLIGN, який дозволяє вирівнювати текст за правою, лівою межею або по центру. За замовчуванням1 текст вирівнюється за лівою межею. Даний атрибут застосовується також до графіки і таблиць.

Значення атрибута АLIGN такі ж, як і для тегу розбиття тексту на абзаци <p> (див. Розділ 4).

Основні стилі заголовків <Hn>…</Hn>, де n – номер стилю від 1 до 6 - виділяє текст різними

стилями ПРИКЛАД

1 “За замовчуванням” – наперед задане значення, яке застосовується, поки користувач не зминить його на інше.


26

Файл у форматі HTML: <HTML> <HEAD> <TITLE>Моя перша HTML-сторінка</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>УКРАЇНСЬКА МИНУВЩИНА </H1> <H2 ALIGN=CENTER>ЕТНОГРАФІЧНИЙ ДОВІДНИК</H2> <H3 ALIGN=RIGHT>ТРАДИЦІЙНЕ ЖИТЛО</H3> <H4>НАРОДНІ ЗАНЯТТЯ</H4> <H5 ALIGN=RIGHT>УКРАЇНСЬКА КУХНЯ</H5> <H6>НАЦІОНАЛЬНЕ ВБРАННЯ</H6> </BODY>


Завдання для самостійної роботи 1. Створити титульну сторінку. Відпрацювати стилі заголовків на

сторінці. 2. До кожного із стилів застосувати атрибут ALIGN з різними

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

заголовку? 2. Чим відрізняються різні стилі заголовка? 3.Чи можна встановлювати одночасно стиль заголовка і певний фізичний

стиль?


27

РОЗДІЛ 7. СПИСКИ

Мета: опанувати методи створення різних видів списків у HTML-документі.

Списки надають зручну можливість представлення інформації в документах.

Елементи списків всіх типів мають відступ від лівої межі екрана. Тип Теги списку Теги елементів

Нумерований <OL>…</OL> <LI>…</LI> - елемент списку Маркірований <UL>…</UL> <LI>…</LI> - елемент списку Список описів <DL>…</DL> <DD>…</DD> - назва терміну

<DT>…</DT>-визначення терміну За замовчуванням елементи впорядкованого списку нумеруються цілими

числами, починаючи з 1. До тега нумерованого списку <OL> існує атрибут TYPE. Встановлюючи TYPE рівним “А”, “а”, “І”, “і”, можна змінити схему нумерації на великі літери, малі літери, великі або малі римські цифри відповідно.

Атрибут START дозволяє задавати початкове значення для нумерації (за замовчуванням START=1, але можна вказати будь-яке додатне число).

Атрибут TYPE тега <UL> дозволяє змінювати вигляд маркера TYPE=disk - маркер має вигляд диска; TYPE=circle - маркер має вигляд кола; TYPE=square - маркер має вигляд квадрата. ПРИКЛАД (нумерований список) Файл у форматі HTML:

<HTML> <HEAD> <TITLE>Моя перша HTML-сторінка</TITLE> </HEAD> <BODY> <P ALIGN=CENTER> <B>УКРАЇНСЬКА МИНУВЩИНА </B><BR> <I>Етнографічний довідник </I><BR> <OL> <LI>ТРАДИЦІЙНЕ ЖИТЛО</LI> <LI>НАРОДНІ ЗАНЯТТЯ</LI> <LI>УКРАЇНСЬКА КУХНЯ</LI> <LI>НАЦІОНАЛЬНЕ ВБРАННЯ</LI> </OL> </P> </BODY>


28


ПРИКЛАД (маркірований список) Файл у форматі HTML:

<HTML> <HEAD> <TITLE>Моя перша HTML-сторінка</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>УКРАЇНСЬКА МИНУВЩИНА </H1><BR> <H2 ALIGN=CENTER>Етнографічний довідник </H2><BR> <P ALIGN= CENTER><B>УКРАЇНСЬКА КУХНЯ </B> </P> <UL> <LI>ПОВСЯКДЕННА Й СВЯТКОВА ЇЖА ТА НАПОЇ</LI> <LI>РЕЖИМ І СЕЗОННІСТЬ ХАРЧУВАННЯ, ХАРЧОВІ ЗАБОРОНИ

</LI> <LI>ОБРЯДОВА ЇЖА</LI> </UL> </BODY>


ПРИКЛАД (список описів):


29

Файл у форматі HTML: <HTML> <HEAD> <TITLE>Моя перша HTML-сторінка</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>УКРАЇНСЬКА МИНУВЩИНА </H1><BR>

<H2 ALIGN=CENTER>Етнографічний довідник</H2><BR> <P ALIGN=CENTER><B>ОБРЯДОВА ЇЖА</B> </P> <DL> <DT><B>ПАСКА</B></DT> <DD>весняний обрядовий хліб, який готували до Великодня. Дуже

здобне вчинене тісто на яйцях, маслі, сметані, олії, цукрі добре вимішували і ставили у тепле місце сходити.</DD>

<DT><B>КУТЯ</B> <DD>подається на стіл у Святий вечір, у переддень Різдва. На

Правобережжі кутю готували з пшениці, а на сході - з ячменю і заправляли тертим маком, горіхами, медом і узваром. </DD>

</DL> </BODY>


Завдання для самостійної роботи Використовуючи наведений нижче перелік:

Старовинна обрядовість Сімейні звичаї та обряди Свята й обряди календарного циклу Трудова обрядовість Свята громадських об’єднань Обрядова їжа


30

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

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

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

стилем обрати підкреслення. Приклад для списку описів: ЗЕЛЕНІ СВЯТА – українська назва християнського свята Трійці, що

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

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

I. ТРАДИЦІЙНЕ ЖИТЛО A. Поселення, житло, забудова B. Житло в духовному світі селянина

II. НАРОДНІ ЗАНЯТТЯ A. Види господарської діяльності B. Ремесла і промисли

1. Гончарство 2. Ковальство

C. Господарське начиння Запитання для самоперевірки 1. Які існують види списків? 2. Яку схему можна обрати для нумерованого списку? 3. Чи можна вставити до нумерованого списку маркірований? 4. Який атрибут використовується для зміни схеми нумерації?


31

РОЗДІЛ 8. ТЕКСТОВІ ЕФЕКТИ Мета: опанувати основні засоби оформлення текстової інформації в

HTML-документі. Текст, який рухається Управляти появою і рухом тексту дозволяє тег <MARQUEE> Приклад: <MARQUEE>Приклад тексту, який рухається</MARQUEE> Таблиця 1. Атрибути тегу <MARQUEE>

Атрибут Призначення BGCOLOR=RGB Визначає колір вікна, у якому

рухається текст BEHAVIOR=SCROLL| SLIDE| ALTERNATE

Визначає спосіб появи тексту у вікні

DIRECTION=LEFT|RIGHT Вказує напрямок, у якому рухається текст

SCROLLAMOUNT=N Вказує число пікселів між послідовностями тексту, який рухається

SCROLLDELAY=N Вказує затримку часу у мілісекундах між появою тексту

HEIGHT=pixels|percent Визначає вікно для тексту, який рухається, у пікселях або процентах від вікна перегляду броузера

WIDTH= pixels|percent Те ж, але визначає ширину HSPACE=N Визначає відступи зверху і знизу VSPACE=N Визначає відступи праворуч і ліворуч LOOP=n|INFINITE Задає число повторень ALIGN=TOP|MIDDLE|BOTTOM Задає тип вирівнювання

Розмір шрифту Основний розмір шрифту завжди дорівнює 3, якщо він не змінений тегом

<BASEFONT=n>, де n=1-7. Пара тегів <FONT>…</FONT> дозволяє задавати розмір, колір і

гарнітуру тексту, що міститься між цими тегами Атрибути тегу <FONT>1:

1 На зміну тегам управління шрифтами у останніх специфікаціях HTML прийшли властивості шрифтів (font-family, font-size, font-style, font-variant, font-weight) із списків стилів CSS, які будуть розглянуті у наступних розділах.


32

SIZE=n (n=1-7) Встановлює розмір шрифта – абсолютний або відносний розмір шрифта. Відносний розмір – це розмір відносно SIZE=3 або розміру, заданого тегом <BASEFONT>. Для задання шрифту у відносних одиницях необхідно вказати, наскільки більшим (+) або меншим (-), ніж основний, має бути шрифт, що задається. Мінімальне абсолютне значення розміру шрифту 1, максимальне – 7. Наприклад: <FONT SIZE=10>

COLOR= Встановлює колір шрифту (RGB). Наприклад: <FONT COLOR=#00CED1

FACE = Гарнітура шрифту – задає ім’я (Arial, Times New Roman та ін..) шрифту (або переліку шрифтів) на комп‘ютері користувача. У випадку відсутності шрифтів текст відображається шрифтом, прийнятим за замовчуванням у броузері користувача. Гарнітуру шрифту можна переглянути у папці Шрифты (Панель управления у папці Мой компьютер або пункт головного меню Настройка). Наприклад: <FONT FACE="Arial">Приклад шрифту Arial</FONT>

ПРИКЛАД (для основного шрифту розміром 3) Файл у форматі HTML:

<HTML> <HEAD> <TITLE>Моя перша HTML-сторінка</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER> УКРАЇНСЬКА МИНУВЩИНА</H1><BR> <H2 ALIGN=CENTER><FONT SIZE=2> Етнографічний довідник </FONT> </H2><BR> <P ALIGN=CENTER><B><FONT SIZE =4>ОБРЯДОВА

ЇЖА</FONT></B></P> <DL> <DT><B>ПАСКА</B></DT> <DD>весняний обрядовий хліб, який готували до Великодня. Дуже

здобне вчинене тісто на яйцях, маслі, сметані, олії, цукрі добре вимішували і ставили у тепле місце сходити.</DD>

</DL> </BODY>

</HTML>


33


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

яких розмір літер має бути на 2 пункти більший, ніж у попередньому. Рядки повинні бути розташовані один під одним, посередині екрану.

Приклад тексту: Розвиток ремесел та промислів Гончарство – обробка глини та виготовлення різноманітного кухонного

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

наліво. Вікно, у якому розміщений текст, повинно бути блакитного кольору, а текст – червоного кольору. Висота вікна, у якому рухається текст, повинна бути 50% від вікна перегляду, а ширина - 60 %.

Запитання для самоперевірки: 1. Який розмір шрифту є прийнятим за замовчуванням? 2. За допомогою якого тега змінюється розмір шрифту? 3. За допомогою якого атрибута встановлюється колір шрифта? 4. Який тег використовується для встановлення рядка, який

рухається? Охарактеризувати його атрибути.


34


35

РОЗДІЛ 9. ГІПЕРТЕКСТОВІ ПОСИЛАННЯ Мета: опанувати способи створення гіперзв’язків у HTML-документах. Гіпертекстовий документ – це документ, який містить пов`язані

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

Гіпертекстове посилання складається з двох частин: вказівника і адресної частини (URL). Вказівник – текст (або графічне зображення), на якому користувач повинен клацнути для того, щоб перейти в інше місце. URL – вказує адресу, з якої броузер буде завантажувати документ, коли користувач підведе до неї вказівник і натисне кнопку мишки. Текстові вказівники, як правило, підкреслені і виділені кольором.

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

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

Формат адресного вказівника: <A HREF= “URL”>текст вказівника</A>

Літера А у тегу <A HREF> означає вказівник (anchor), а HREF – “гіпертекстове посилання” (Hypertext REFerence).

Між початковим і кінцевим тегами знаходяться текст вказівника або зображення, які є гіпертекстовим посиланням на документ (або область документа), казаний у значенні <A HREF= “URL”>.

Можливі значення: http://... - створює посилання на WWW-документ; ftp://... - створює посилання на ftp-сайт або розташований на ньому

файл. Якщо тип з’єднання і адреса машини не вказані, відправною точкою є

адреса поточного документа. Це дозволяє використовувати відносні посилання. Наприклад, посилання <A HREF = “docs/title.htm”> Документація </A> зроблене на файл title.htm у папці docs.

ПРИКЛАД (поєднання гіпертекстовими посиланнями двох файлів) 1.Створити файл 1.htm:

<HTML> <HEAD> <TITLE>Моя перша HTML-сторінка</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER> НАРОДНІ ВІРУВАННЯ, ДЕМОНОЛОГІЯ, КОСМОГОНІЯ</H1>


36

<A HREF= “2.htm”>Українська міфологія</A> </BODY> </HTML>

2.Створити файл 2.htm: <HTML> <HEAD> <TITLE>Пов’язана сторінка</TITLE> </HEAD> <BODY> <H3 ALIGN=CENTER>Українська міфологія</H3> <P ALIGN=JUSTIFY> Українська міфологія як сукупність переказів про живу й неживу

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

</P> <A HREF=”1.htm”>На початкову сторінку</A> </BODY>

</HTML> Відображення файлів програмою-броузером: Файл 1.htm

Файл 2.htm

Гіпертекстові посилання можуть існувати в межах одного документа,


37

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

Атрибут NAME – позначає область документа, яка знаходиться між початковим і кінцевим тегами як можливий об’єкт для посилання. Значенням NAME може бути написане латиницею будь-яке слово-вказівник, унікальне для даного документа. Наприклад:

<A NAME=”part”>Розділ 1</A>. Тепер можна посилатись на цю зону простим вказуванням її імені після

імені документа. Наприклад, посилання <A HREF=”document.html#part”>Розділ 1</A> відправляє користувача у розділ “part” файла document.htm, а посилання <A HREF=”#bottom”>В кінець документа</A> - у розділ “bottom”

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

документа, зміст цієї частини з’являється, починаючи з початку вікна. ПРИКЛАД Доповнити зміст файлу 2.htm і виконати його розбиття на розділи:

<HTML> <HEAD> <TITLE>Пов’язана сторінка</TITLE> </HEAD> <BODY> <A NAME=”part”>Зміст</A><BR> <A HREF=”2.htm#part1">Розділ 1. Українська міфлогія</A><BR> <A HREF=”2.htm#part2">Розділ 2. Космогонічні уявлення</A><BR> <P ALIGN=CENTER><A NAME=”part1" >Розділ 1</A> <H3 ALIGN=CENTER>Українська міфологія</H3> <p align=justify>Українська міфологія як сукупність переказів про живу

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

<A HREF=”2.htm#part”>повернутись до змісту</A><BR> <P ALIGN=CENTER><A NAME=”part2">Розділ 2</A><BR> <H3 ALIGN=CENTER>Космогонічні уявлення</H3> <P ALIGN=JUSTIFY>Система народних міфологічних вірувань та

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


38

християнське забарвлення - вона створена Богом із грунту, добутого з морського дна. Такими ж загальнопоширеними є уявлення про форму Землі, яка мислилася плескатою та округлою, прикритою зверху небесним дахом. Уявлення українців про небесні світила значною мірою зберегли архаїчні язичницькі елементи. У побутових оповідях, обрядах присутні елементи міфів та символіки, в яких виразно проглядаються залишки культу Сонця. Аналогічними є уявлення українців про Місяць як “божу силу”, від якої залежить людське життя. До Місяця зверталися із замовляннями, прохаючи допомоги. <BR>

<A HREF=”2.htm#part”>повернутись до змісту</A><BR> <P ALIGN=RIGHT><A HREF=”1.HTM”>На початкову сторінку</A> </BODY>

</HTML>

Гіперпосилання може бути у вигляді графічного зображення:

<A HREF= “URL”> <IMG SRC=”адреса файла”></A>

ПРИКЛАД (посилання на адресу в мережі Internet) Файл у форматі HTML:

<HTML> <HEAD> <TITLE>Моя перша HTML-сторінка</TITLE> </HEAD> <BODY> <P ALIGN=CENTER> <B>УКРАЇНСЬКА МИНУВЩИНА </B><BR> <I>Етнографічний довідник</I><BR> <U>До читача</U> </P> <P ALIGN=RIGHT> По додаткову інформацію за цією темою звертатись: <BR><A HREF=

“http://www.nbuv.gov.ua”> <I>Національна бібліотека України


39

ім.В.І.Вернадського</I></A></P> </BODY>


У тегу <BODY> можуть визначатись колір тексту гіпертекстового

вказівника, в тому числі і того, за яким вже було здійснено переходи. Атрибути тегу <BODY> :

LINK Задає колір тексту, який є вказівником гіпертекстового посилання. Наприклад: <BODY LINK= # FF1493>

ALINK Задає колір вказівника активного посилання VLINK Задає колір тексту вказівників посилань, за якими вже були здійснені

переходи Гіперпосилання може бути у вигляді графічного зображення. В цьому

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

<A HREF= “URL”> <IMG SRC=”адреса файла”></A> Питання, пов’язані з використанням графічних зображень, будуть

розглянуті у наступному розділі. Завдання для самостійної роботи 1. Задати червоний колір активного вказівника гіперпосилання у тегу

<BODY>. 2. Задати зелений колір вказівника гіперпосилання, за яким вже було

здійснено переходи. 3. Створити HTML-документ, структурувати його за розділами.

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

Запитання для самоперевірки 1. Для чого призначені гіперпосилання на Web-сторінці? 2. Як можуть бути представлені гіперпосилання? 3. Чи може гіперпосилання бути здійснене в межах одного документа?

4. Чи може бути вказівником графічне зображення?


40

РОЗДІЛ 10. ГРАФІКА Мета: опанувати технологію використання графічних зображень при

оформленні HTML-документа. Графіка Web-сторінок може містити як прості зображення, так і складні.

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

Горизонтальні лінії Горизонтальні лінії є простим способом поділу великих текстів або

виділення частини документа. Для розміщення горизонтальної лінії використовується тег <HR>

(Horizontal Rule). Internet Explorer підтримує різні атрибути тега <HR>, які дозволяють управляти розміром, товщиною, вирівнюванням, кольором і виглядом тіні від лінії.

Атрибути тега <HR> WIDTH =pixels|persent Дозволяє змінити розмір лінійки, задавши

його в пікселях або в процентах від ширини екрана

ALIGH=LEFT|RIGHT|CENTER Задає вирівнювання частини лінійки (за замовчуванням 1)

SIZE=n Задає товщину лінії (за замовчуванням 1) COLOR=RGB(або назва кольору) Задає колір, яким відображається лінія


<HTML> <HEAD> <TITLE>Моя перша HTML-сторінка</TITLE> </HEAD> <BODY> <H2 ALIGN= CENTER>УКРАЇНСЬКА МИНУВЩИНА </H2> <HR SIZE=8 WIDTH=40% COLOR=RED> </H2><BR> <P ALIGN= CENTER>Етнографічний довідник</P> </BODY>

</HTML>


41


Графічні зображення Графічні зображення, які демонструються на Web-сторінках,

зберігаються в окремих файлах. Для вміщення зображення на сторінку використовують тег <IMG SRC=”URL”>, де URL – адреса файла, який містить графічні дані.

Розташування тексту, який слідує за зображенням, і те, як зображення розташоване на сторінці, контролює атрибут ALIGN. За замовчуванням текст з’являється внизу зображення.

Internet Explorer дозволяє використовувати властивості тега IMG, які надають можливість задавати значення висоти і ширини зображення за допомогою атрибутів HIGHT і WIDTH. Висота і ширина вимірюються в пікселях. Атрибути тега <IMG SRC=”URL”> WIDTH =px Встановлює ширину зображення (у пікселях) HIGHT = px Встановлює висоту зображення (у пікселях) ALIGN=TOP|MIDDLE| BOTTOM| LEFT|RIGHT Контролює розташування тексту

Значення атрибуту ALIGN: TOP Вирівнює текст по верху зображення MIDDLE Вирівнює базову лінію тексту по центру зображення BOTTOM Вирівнює базову лінію по низу зображення LEFT Розташовує зображення ліворуч, дозволяючи тексту

“обтікати” зображення праворуч RIGHT Розташовує зображення праворуч, дозволяючи тексту

“обтікати” зображення ліворуч Ефективним для розміщення зображень є застосування атрибутів тега

<BR>. Використання тега <BR> в його основному варіанті у тексті, який обтікає зображення, просто розбиває рядок без переривання ефекту обтікання. Щоб перервати рядок і очистити поле праворуч або ліворуч від зображення, застосовують атрибут СLЕАR.

Атрибут СLЕАR тега <ВR> використовується для того, щоб зупинити у


42

зазначеній точці обтікання текстом об’єкта, а потім продовжити текст у порожній зоні за об’єктом. Текст, який продовжується за об’єктом, вирівнюється у відповідності із значеннями LEFT, RIGHT або АLL атрибуту СLЕАR:

<BR СLЕАR=LЕFТ> - перериває рядок і очищає ліве поле (текст буде продовжений, починаючи з найближчого порожнього лівого

поля); <BR СLЕАR=RIGHT> - перериває рядок і очищає праве поле (текст

буде продовжений, починаючи з найближчого порожнього правого поля); <BR СLЕАR=АLL> перериває рядок і очищає обидва поля (текст буде

продовжений, як тільки ліве і праве поля виявляться порожніми). Наприклад, якщо зображення вирівняне ліворуч, а текст обтікає його

праворуч, тоді необхідно очистити ліве поле, щоб якийсь інший елемент, який слідує за текстом, не виявився розміщеним праворуч від зображення.

Приклад (текст буде розташований поряд з малюнком; після <BR CLEAR=LEFT> буде очищене ліве поле, і наступний текст буде розташований, починаючи з найближчого порожнього лівого поля):

<IMG SRC=“ім’я файла” ALIGN=LEFT> На цьому малюнку зображено.... <BR CLEAR=LEFT>

Атрибут ALT тега IMG визначає текст, який відображається броузером на місці зображення, якщо броузер не може знайти файл із зображенням або включений у текстовий режим. Текст, записаний у атрибут ALT, відображається біля курсору мишки при наведенні її вказівника на малюнок. У атрибуті, як правило, вказується текст з описом зображення.


<HTML> <HEAD> <TITLE>Моя перша HTML-сторінка</TITLE> </HEAD> <BODY> <H2><P ALIGN=CENTER>УКРАЇНСЬКА МИНУВЩИНА </P> <HR SIZE=8 WIDTH=40% COLOR=RED> </H2> <IMG SRC=”MAMAI5.JPG” WIDTH=200 HIGHT=200 ALIGN=LEFT

ALT =”Козак Мамай”> <P ALIGN= CENTER>Етнографічний довідник </P> </BODY>

</HTML>


43


Створення маркірованого списка із графічними маркерами При необхідності для створення маркірованого списку можна створити

свої власні графічні зображення для використання їх як маркерів1. ПРИКЛАД Файл у форматі HTML:

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

</HEAD> <BODY> <H2><P ALIGN= CENTER>ПОСЕЛЕННЯ, ЖИТЛО, ЗАБУДОВА </P> <HR SIZE=8 WIDTH=40% COLOR=RED> </H2> <IMG SRC=”BUT1_UP.GIF” WIDTH=60 ALT =” “> <A HREF=”1.HTM”> <FONT SIZE=5><B>Типи поселень</B></FONT></A><BR> Поселення землеробської людності України, які складалися з будівель,

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

<IMG SRC=”BUT1_UP.GIF” WIDTH=60 ALT =” “> <A HREF=”2.HTM”> <FONT SIZE=5><B> Типи народного житла</B></FONT></A><BR> В основі типології традиційного сільського житлового комплексу також

лежить поділ території України на зони, проте він більш розгалужений і детальніший.

</BODY>


44


При використанні графічних маркерів слід звернути увагу на такі

особливості: - текст елементу списка знаходиться ближче до графічного

зображення, ніж у звичайному невпорядкованому списку; - центр графічного зображення не вирівнюється по центру текстового

рядка; - якщо текстовий елемент списка перевищує у довжину один рядок,

він не вирівнюється так, щоб другий рядок починався точно під першим – другий і всі наступні рядки починаються під графічним зображенням. Графічне зображення може бути використане як гіперпосилання:

<A HREF= “http://www.nbuv.gov.ua”> <IMG SRC=”адреса графічного файла”></A>

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

один під одним по центру екрана, підкреслених лінією синього кольору розміром 8.

2. Розташувати на сторінці текст і малюнок так, щоб текст “обтікав” зображення ліворуч. Текст повинен бути зеленого кольору, розміром 5.

Приклад тексту: “Українська минувщина” – своєрідна енциклопедія традиційної

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

3. Вставити малюнок до HTML-документа, зробивши його розмір 50х40 пікселів.

4. Модифікувати наведений у розділі приклад таким чином: вставити після слів “Етнографічний довідник” ще один малюнок, вирівнявши його по правій межі, а після першого малюнка очистити ліве поле. Дослідити одержаний результат з очищенням і без очищення лівого поля після першого малюнка.


45

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

сторінку? 2. Які атрибути використовуються для зміни розмірів малюнка? 3. Якими атрибутами лінії можна управляти і за допомогою яких

тегів? 4.За допомогою яких тегів та їх атрибутів можна управляти розміщенням

зображення на екрані?


46

РОЗДІЛ 11. ЗВУК У HTML-ДОКУМЕНТАХ

Мета: навчитись застосовувати звук у HTML-документах. Internet Explorer має можливість автоматичного завантаження і

програвання фонового звука у форматах wav, .au, .mid , якщо такі файли включені до складу Web-документа.

Файл у форматі .wav є стандартом звукових файлів у Windows. У цьому форматі представлені всі системні звуки Windows.

Формат MIDI був розроблений для управління електронними музичними інструментами і за своєю структурою повністю відрізняється від всіх інших форматів звукових файлів.

Для фонового звуку використовується тег <BGSOUND>. Атрибути тега <BGSOUND>

SRC=”URL” Вказує місцезнаходження звукового файла LOOP=n Кількість повторень звука (при значенні LOOP=INFINITE

звук відтворюється протягом всього часу, поки відкритий документ) Тег <BGSOUND> повинен бути розташований у заголовку документа і

мати такий формат: <BGSOUND SRC=”URL звукового файла” LOOP=infinite>

До HTML-документа можна вставити звуковий файл у вигляді гіпертекстового посилання, при натисканні на яке завантажується звуковий файл або відбувається супровід фоновим звуком.


<HTML> <HEAD> <TITLE>Моя перша HTML-сторінка</TITLE> </HEAD> <BODY> <A HREF= “URL звукового файла”>Для завантаження звукового файла

натиснути тут</A> </BODY>

</HTML>


47


Завдання для самостійної роботи 1. Виконати вставлення фонового звука, який би повторювався 3 рази

при відкритті сторінки. 2. Вставити до сторінки звуковий файл, який би завантажувався при

натисканні на відповідне гіперпосилання. Запитання для самоперевірки 1. Які формати використовуються для звукових файлів, що

вставляються у HTML-документ? 2. За допомогою якого тега вставляється звуковий файл? 3. Як задається кількість повторень для фонового звука?


48

РОЗДІЛ 12. ТАБЛИЦІ Мета: навчитись представляти інформацію у HTML-документі у вигляді

таблиць. Табличні теги мови HTML дозволяють подавати дані у зручній для

сприйняття формі. Основним структурним елементом таблиці є комірка, яка містить елемент

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

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

Комірка, яка містить елемент даних, задається парою тегів <TD> і </TD>. Теги для побудови таблиці

Тег Призначення <CAPTION> ...</CAPTION> заголовок до таблиці <TABLE> ...<TABLE> визначає початок таблиці <TR>... </TR> визначає рядок таблиці <TD>... </TD> визначає елемент даних таблиці

Тег <TABLE> може мати атрибут рамки BORDER=n, який створює рамку шириною n пікселів. За замовчуванням таблиця не окреслена рамкою. У тегу <TABLE> можна використати атрибут BORDERCOLOR для кольору рамки таблиці. Атрибут BORDERCOLOR дорівнює шістнадцятковому RGB або англійській назві кольору.

У тегу <TD> можна використати атрибут BGCOLOR, який задає колір фону комірки таблиці.

Оскільки таблиці будуються з рядків, між тегами <TR> і </TR> розташовуються всі елементи, необхідні для створення рядка таблиці.

Для створення заголовків стовпчиків даних використовуються теги <TH> і </TH>, текст в яких автоматично виводиться жирним шрифтом з вирівнюванням по центру.

Атрибут СОLSPAN (Column Span) дозволяє здійснювати об’єднання стовпчиків. Якщо необхідно створити яку-небудь комірку, ширшу, від верхньої чи нижньої, за допомогою атрибута СОLSPAN= її можна розтягнути над будь-якою кількістю звичайних комірок.

ПРИКЛАД: <TR> <TD BGCOLOR=WHITE COLSPAN=2> Приклад застосування атрибута об’єднання комірок </TD> </TR>

Атрибут UNIT= тега <ТАВLЕ> визначає одиниці вимірювання, які


49

використовуються при зазначенні розмірів як всієї таблиці, так і окремих стовпчиків. Атрибут UNIТ= може приймати такі значення:

- UNIТ=ЕN - це значення надається за замовчуванням і визначає одиницю вимірювання, яка дорівнює еn-пробілу. Еn-пробіл - це друкарська одиниця вимірювання, яка дорівнює ширині літери <n>. Реальний розмір пробілу залежить від обраного шрифту. Як правило, еn-пробіл дорівнює половині розміру шрифта;

- UNIТ=RELATIVE - використовується для визначення відносної ширини стовпчиків у процентах від загальної ширини таблиці;

- UNIТ=РIXELS – це значення використовується, якщо необхідно точно визначити ширину стовпчика на екрані. Наприклад, тег <ТАВLЕ UNIТ=РIXELS WIDTH=340> сформує таблицю шириною 340 пікселів.

Атрибут СЕLLPADDING= визначає ширину порожнього простору між вмістом комірки і її межами, тобто задає поля всередині комірки.

ПРИКЛАД <TABLE BORDER CELLPADDING=20> <TR> <TD>Текст або дані</TD> </TR>


<HTML> <HEAD> <TITLE>Моя перша HTML-сторінка</TITLE> </HEAD> <BODY> <CAPTION> <H2><P ALIGN=CENTER> НАРОДНІ ЗНАННЯ

</P></H2> </CAPTION> <TABLE BORDER=1> <TR> <TH>Система народних знань</TH> <TH>Зміст</TH> </TR> <TR> <TD ALIGN=CENTER><B><I>Народна астрономія</B></I></TD> <TD ALIGN=LEFT>Астрономія як наука була відома в Україні ще у

XVII ст. і викладалась у братських школах. Самобутня астрономічна номенклатура українців засвідчує їх добру обізнаність з основними сузір’ями. </TD>

</TR> <TR >


50

<TD ALIGN=CENTER> <B> <I> Народна метеорологія </B></I> </TD> <TD ALIGN=LEFT> Одна з найдавніших галузей народних знань, що

обіймає систему прикмет, раціональних спостережень і достовірних передбачень про погодні зміни на близький чи віддалений час. Широко побутували прикмети, що дозволяли прогнозувати погодні зміни протягом найближчого часу за особливостями сходу і заходу Сонця, його кольору, за виглядом нічного неба, яскравістю зірок і Місяця тощо.

</TD> </TR> </TABLE> </BODY>


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

маркери можна розташувати в комірках таблиці (приклад взято з Розділу 10. Графіка).


<HTML> <HEAD> <TITLE>Моя перша HTML-сторінка</TITLE> </HEAD> <BODY> <H2 ALIGN=CENTER>ПОСЕЛЕННЯ, ЖИТЛО, ЗАБУДОВА </H2> <HR SIZE=8 WIDTH=40% COLOR=RED> <TABLE BORDER=1>


51

<TR> <TD><IMG SRC=”BUT1_UP.GIF” WIDTH=60 ALT =” “></TD> <TD><A HREF=”1.HTM”> <FONT SIZE=5><B>Типи поселень</B></FONT></A><BR></TD> <TD>Поселення землеробської людності України, які складалися з

будівель, пристосованих для життя, різноманітних підсобних занять, утримання свійських тварин та зберігання продуктів, сягають глибини віків.</TD></TR>

<TR> <TD><IMG SRC=”BUT1_UP.GIF” WIDTH=60 ALT =” “></TD> <TD><A HREF=”2.HTM”> <FONT SIZE=5><B> Типи народного житла</B></FONT></A></TD> <TD>В основі типології традиційного сільського житлового комплексу

також лежить поділ території України на зони, проте він більш розгалужений і детальніший.</TD></TR></TABLE>


Управління кольором елементів таблиці Атрибути управління кольором : BORDERCOLOR – колір рамки і

BGCOLOR – колір фону, використовуються для тегів : <TABLE>, <TR>, <TH>, <TD>. Відповідно областю їх дії може бути вся таблиця, рядок або окрема комірка.

Наприклад: <TABLE BORDER BORDERCOLOR=RED

BGCOLOR=YELLOW>...</TABLE> - колір всієї таблиці. <TR BORDERCOLOR=RED BGCOLOR=YELLOW></TR> - колір рядка. <TD BORDERCOLOR=RED BGCOLOR=YELLOW></TD> - колір

комірки. За допомогою таблиць можна створювати виділені цитати. Цитата

вміщується в таблицю між двома горизонтальними лініями. Завдяки атрибуту ALIGN тега <TABLE> текст, який слідує за таблицею, починає її “обтікати”. Основний текст розташовується праворуч від таблиці і “обтікає” цитату після того, як перевищить її по висоті. Для виступів тексту від меж сторінки можна


52

застосувати тег <BLOCKQUOTE> (навіть декілька разів). Атрибут BORDER в даному випадку використовувати не слід.


<HTML> <BODY> <H2 ALIGN=CENTER>ІСТОРІЯ КУЛЬТУРИ</H2> <TABLE ALIGN=LEFT> <TR> <TD ALIGN=CENTER> <HR> <B>...Той, хто не знає свого минулого,<BR> не вартий

майбутнього...<BR> М.Рильський </B><HR></TD> </TR> </TABLE> <BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE> <P ALIGN=JUSTIFY> Звертання до традицій зовсім не означає

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

</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE> </BODY>


Завдання для самостійної роботи 1. Створити таблицю з двох стовпчиків і трьох рядків. Вертикальне

розташування вмісту комірки повинне бути по центру, а горизонтальне – вирівнювання ліворуч.

Приклад тексту: ЗАЧІСКИ ТА ГОЛОВНІ УБОРИ


53

ВІНКИ-ШНУРИ – тоненька стрічка, яку пов’язували навколо голови і закріпляли ззаду, стримуючи розпущене волосся.

ПЛОЩИННІ ВІНКИ – робили на твердій основі, яка мала циліндричну форму. Часом на неї у багато рядків нашивали вузенькі різнокольорові стрічечки, зібрані у дрібні складки.

ОЧІПОК – обов’язковий головний убір заміжніх жінок. Твердий очіпок шився з парчі та шовку і виразно прикрашався вишивкою.

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

3. Створити таблицю з двох стовпчиків і трьох рядків. У кожній з комірок встановити власний колір фону і колір тексту. Фон сторінки за замовчуванням.

4. Створити таблицю з двох стовпчиків і чотирьох рядків. Встановити колір у рядках таким чином, щоб його відтінок ставав більш темним від першого рядка до останнього ( за основу взяти зелений, сірий, жовтий колір). Для виконання завдання можна скористатись Додатком 2.

5. Внести зміни до прикладу створення цитати, наведеного вище, так, щоб текст був розташований під цитатою.

Запитання для самоперевірки 1. Що є основним структурним елементом таблиці? 2. Які атрибути контролюють горизонтальне і вертикальне

розташування вмісту комірок? 3. Яку інформацію можна вміщувати у комірки таблиці? 4. Як задається розмір комірки? 5. Пояснити значення атрибуту ALIGN тега <TABLE>.


54


55

РОЗДІЛ 13. ФРЕЙМИ Мета: опанувати технологію представлення інформації у документі з

використанням фреймів. Фрейми (Frames - кадри) надають користувачеві можливість поділяти

екран на дві або більше незалежних динамічних або статичних частини. Кожен фрейм може мати такі властивості:

- всі фрейми мають свій URL, що дозволяє завантажувати їх незалежно від інших фреймів;

- кожний фрейм має власне ім’я (атрибут NAME), яке дозволяє переходити до нього з іншого фрейма;

- розмір фрейма може бути змінений користувачем безпосередньо на екрані за допомогою мишки. Ці властивості фреймів дозволяють:

- розміщувати статичну інформацію, яку автор вважає за необхідне постійно показувати користувачу, у одному статичному фреймі;

- розміщувати у статичному фреймі зміст всіх або частини документів, які містяться на сервері, що дозволяє користувачеві швидко знаходити інформацію, яка його цікавить;

- створювати вікна результатів запитів, коли в одному фреймі знаходиться власне запит, а в другому – результати запиту. Фрейм-документ є специфічним видом HTML-документа, оскільки не

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

Основний документ, який містить опис фреймів, виглядає так: <HTML> <HEAD> …..</HEAD> <FRAMESET>….</FRAMESET>

</HTML> Атрибути тегу <FRAMESET>

Атрибут Призначення ROWS=pixels|persent|* поділ екрану на декілька смуг COLS=pixels|persent|* поділ екрану на декілька

стовпчиків FRAMEBORDER описує сітку фреймової структури

(за замовчуванням значення YES - тривимірна сітка, NO - без сітки)

BORDER ширина сітки фреймової структури (за замовчуванням значення 5)

BORDERCOLOR колір сітки фреймової структури Значення (*) відповідає використанню всього простору екрану, який

залишився.


56

Для вміщення змісту в фрейми, які утворились в результаті поділу, використовується тег <FRAME>... </FRAME>. Важливим атрибутом цього тега є атрибут SRC, який сповіщає URL документа, який необхідно завантажити у фрейм.

Кожний елемент фреймової структури описується за допомогою тега <FRAME>, який має такі атрибути:

- SRC - URL вмісту фрейма; · NAME – ім‘я фрейма (аналогія імені вікна броузера) для здійснення

доступу до фрейма і оновлення його змісту; · MARGINHEIGHT - ширина верхнього і нижнього вільного поля

фрейма у пікселях; · MARGINWIDTH - ширина лівого і правого вільного поля фрейма

у пікселях; · SCROLLING – смуги гортання для перегляду вмісту фрейма

(AUTO/YES/NO, за замовчуванням значення - AUTO); · NORESIZE – наявністю даного атрибута користувачу

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

· FRAMEBORDER – описує сітку фрейма (YES/NO); · BORDERCOLOR – колір сітки фрейма. Визначення фреймової структури Порядок створення сторінки з фреймами: 1. Створюється початкова сторінка, у якій задаються розміри і

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

2. Створюються окремі сторінки для кожного фрейма. Необхідно уявити собі загальний вигляд сторінки – де і якого розміру

будуть фрейми. Наприклад, ліворуч має бути фрейм змісту з переліком статей, праворуч – сторінка із власне статтями. Необхідно зробити так, щоб натискання мишкою на назві статті у лівій частині екрану, викликало появу змісту статті у правій частині. Або фреймова структура має ділити екран на три проздовжні частини. Верхня частина займає 15% висоти вікна броузера, її змістом є документ header.htm. Середній фрейм займає 70% вікна, в нього вводиться зміст документа body.htm. Решту частини вікна броузера займає фрейм, у який виводиться зміст документа footer.htm.

<FRAMESET ROWS=”15%, 70%, 15%”> <FRAME SRC=”header.htm” NORESIZE SCROLLING=NO> <FRAME SRC=”body.htm”> <FRAME SRC=”footer.htm” NORESIZE SCROLLING=NO> </FRAMESET>

Верхній і нижній фрейми даної структури не містять смуг гортання вмісту і мають постійний розмір. Атрибут NORESIZE для середнього фрейма


57

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

Для створення “вкладеної” структури фреймів, наприклад, у середній області фрейма з попереднього прикладу, яка поділяє її на два рівних стовпці, можна навести такий приклад:

FRAMESET ROWS=”15%, 70%, 15%”> <FRAME SRC=”header.htm” NORESIZE SCROLLING=NO> <FRAMESET COLS=”*,*”> <FRAME SRC=”left.htm”> <FRAME SRC=”right.htm”> </FRAMESET> <FRAME SRC=”footer.htm” NORESIZE SCROLLING=NO> </FRAMESET>

Створення індексного (початкового) екрана з двох фреймів: ПРИКЛАД Файл у форматі HTML:

<HTML> <FRAMESET cols=”*,310"> <FRAME SRC=”LAB_fr.htm” NAME=”frame1"> <FRAME SRC=”home_fr.htm” NAME=”frame2"> </FRAMESET> </HTML>

У лівому фреймі у пункті “Обрядова їжа” зроблене посилання на відповідний файл, який розкриє зміст цього пункту і буде відображений у правому вікні. Для цього зміни вносяться до файлу, який завантажується у цей фрейм. При встановленні гіперосилання вказують на NAME відповідного фрейма введенням команди TARGET.



58


<HTML> <BODY> <H1 ALIGN=CENTER> УКРАЇНСЬКА МИНУВЩИНА</H1><BR> <P ALIGN=CENTER><B>УКРАЇНСЬКА КУХНЯ</B></P> <UL> <LI>ПОВСЯКДЕННА Й СВЯТКОВА ЇЖА ТА НАПОЇ</LI> <LI>РЕЖИМ І СЕЗОННІСТЬ ХАРЧУВАННЯ, ХАРЧОВІ ЗАБОРОНИ </LI> <A HREF=”LAB2-4_FR.HTM” TARGET = “FRAME2”> <LI>

ОБРЯДОВА ЇЖА </LI></A> </UL> </BODY>

</HTML> Завдання для самостійної роботи 1.Поділити екран на 3 смуги: перша має висоту 50 пікселів, друга – 15

пікселів, весь інший простір займає третя смуга. 2.Створити фреймову структуру (із сіткою шириною 5 пікселів) з трьох

рядків: перший рядок - 15% висоти вікна броузера, другий - 70% , третій - 15%;

3.Створити фреймову структуру з двох стовпчиків: перший - 1/4 ширини вікна броузера, другий - 3/4 ширини, з сіткою шириною 3 пікселя, колір сітки – сірий.

4.Поділити екран на чотири однакові області. В кожну вмістити відповідну інформацію.

Запитання для самоперевірки 1.З якою метою використовуються фрейми на HTML-сторінках? 2.Які особливості структурної побудови фрейм-документа?

3.Чи може кожен з документів, вміщених у фрейми, мати свою окрему адресу?


59

РОЗДІЛ 14. ФОРМИ ДЛЯ ОДЕРЖАННЯ ІНФОРМАЦІЇ ВІД КОРИСТУВАЧА

Мета: опанувати технологію створення форм для інтерактивної взаємодії з користувачем.

Одним із способів привернення уваги до Web-сторінок є введення до них елементів інтерактивності, яке передбачає обмін інформацією між користувачем і сервером. Одним із засобів, за допомогою яких на сервер подається інформація про запити користувача, є HTML-форми і сценарії Common Gatewey Interfase (CGI) – спільний інтерфейс шлюзів. Форми в Internet Explorer нагадують бланки і складаються з полів для введення текстової інформації, списків вибору варіантів і можливих опцій. За допомогою форм і завдяки механізму CGI-сценаріїв автори Web-сторінок можуть задавати певні питання користувачу і одержувати від нього відповіді. Форми можуть бути діловими або неформальними, залежно від потреб.

Теги форми <FORM>….</FORM> Визначає початок і кінець форми, як і куди

буде відправлено інформацію, вказану в ній <TEXTAREA>…

</TEXTAREA> Текстове поле введення <SELECT>…</SELECT> Вибір із меню <INPUT>…</INPUT> Кнопки команд Теги <TEXTAREA>, <SELECT>, <INPUT> повинні бути визначені

всередині пари тегів <FORM>….</FORM>. Атрибути тега <FORM>

ACTION Визначає адресу URL, за якою надсилається введена у форму інформація

METHOD=GET| POST Визначає, як інформація, що зібрана формою, надсилається за URL-адресою. Визначається CGI-сценарієм

Тег <INPUT> можна застосовувати для різних способів організації графічного інтерфейсу з користувачем за рахунок використання таких елементів вікна введення тексту: прапорці, перемикачі і меню. Тип введення визначається атрибутом TYPE.

Типи полів тега <INPUT> Тип поля Вид тега Вікно для введення тексту <INPUT TYPE=”TEXT”> Вікно для введення пароля <INPUT TYPE=”PASSWORD”> Прапорець <INPUT TYPE=”CHECKBOX”>


60

Перемикач <INPUT TYPE=”RADIO”> Файл <INPUT TYPE=”HIDDEN”> Невидима зона <INPUT TYPE=”FILE”> Текстове вікно <TEXTAREA>…</TEXTAREA> Меню <SELECT>…<OPTIONS>…</SELECT> Типи TEXT і PASSWORD схожі і створюють текстове поле для введення

з одним рядком. Тип PASSWORD відображає текст, що вводиться у вигляді зірочок ****.

Якщо у тега <INPUT> значенням атрибута TYPE є TEXT, повинно бути визначене значення NAME, а також SIZE, MAXLENGTH, VALUE.

Значення атрибута TEXT SIZE Визначає ширину поля введення тексту MAXLENGTH Визначає максимальну кількість символів, яке

користувач може ввести у цьому полі VALUE Визначає задане за замовчуванням значення поля (або

не застосовується взагалі) Багаторядкові текстові поля введення Багаторядкове поле створюється за допомогою тега <TEXTAREA>…

</TEXTAREA>, який задає розміри текстового вікна. Синтаксис тега:

<TEXTAREA NAME=”Name” [ROWS=”rows”] [COLS=”columns”]> Пояснювальний текст до використання вікна </TEXTAREA>

Атрибут NAME надає вікну унікальний ідентифікатор, ROWS і COLS визначають розмір поля перегляду у вікні броузера.

Створення меню у формах Меню у формах створюється за допомогою використання конвейєрного

тега <SELECT>…<OPTIONS>…</SELECT> Синтаксис тега такий: <SELECT NAME =”Name” [SIZE=”Size”] [MULTIPLE]> <OPTIONS [SELECTED]> Options 1 <OPTIONS [SELECTED]> Options 1 <OPTIONS [SELECTED]> Options 1 </SELECT> Атрибут SIZE визначає число пунктів меню, які будуть показані на

сторінці броузера. При вміщенні більш ніж однієї опції вибору необхідно включити атрибут MULTIPLE. Кожний пункт меню визначається тегом OPTIONS. Якщо один з пунктів повинен бути обраний за замовчуванням, для нього слід вказати атрибут SELECTED.

Типи введення Тип введення RESET дозволяє створити на екрані кнопку, яка очищає

форму і повертає всі установки до їх початкових значень за замовчуванням.


61

Атрибутом VALUE визначається текст, який буде написаний на кнопці. Якщо цей атрибут відсутній, на кнопці буде напис “Reset”.

Тип SUBMIT збирає дані і надсилає Web-серверу для обробки. Кнопку SUBMIT повинна мати кожна форма. Атрибут VALUE визначає текст, який буде написаний на кнопці. Якщо цей атрибут відсутній, на кнопці буде напис “SubmitQuery”.


<HTML> <HEAD><TITLE>Моя перша HTML-сторінка</TITLE></HEAD> <BODY> <FORM ACTION=”HTTP://WWW.SERVER.COM/CGI-BIN/USERINFO.

CGI” METHOD=”POST”> Им’я:<INPUT TYPE=”TEXT” NAME=”FULINAME” SIZE=30> <BR>

E-mail: <INPUT TYPE=”TEXT” NAME=”EMAIL” SIZE=30> <BR> <P> <HR></P> Зазначте тип операційної системи, з якою Ви постійно працюєте<BR> <INPUT TYPE=”CHECKBOX” NAME=”Windows”VALUE = “YES”

CHEKED>Windows or DOS <BR> <INPUT TYPE=”CHECKBOX” NAME=”MAC”VALUE= “YES”

CHEKED> MAC <BR> <INPUT TYPE=”CHECKBOX” NAME=”UNIX”VALUE= “YES”

CHEKED>UNIX <BR> <TEXTAREA NAME=”COMMENTS” COLS=80> Повідомте Вашу думку щодо інформаційного наповнення сайту </TEXTAREA> <INPUT TYPE=button VALUE=”Відмінити”> <INPUT TYPE=button VALUE=”Надіслати”>

</FORM></BODY></HTML>


62


Завдання для самостійної роботи 1. Створити форму, яка запитує у користувача адресу його

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

2. Створити форму, яка містить меню з трьох пунктів. 3. Створити форму, яка містить поля:

- для запиту пароля шириною 20 символів і з максимальною кількістю символів, які в нього можна ввести – 18;

- текстове вікно (багаторядкове текстове поле для введення інформації) з 80 стовпчиків і 10 рядків. Запитання для самоперевірки 1. Який тег застосовується для організації взаємодії з користувачем

(вікна введення тексту, прапорці, перемикачі, меню тощо)? 2. За допомогою яких тегів створюються кнопки у формах для

інтерактивної взаємодії з користувачем? 3. За допомогою яких атрибутів задається розмір текстового вікна для

введення інформації?


63

РОЗДІЛ 15. СТИЛІ Мета: опанувати різні способи створення стилів для HTML-документів. Стиль HTML – це набір характеристик шрифту, символів і абзацу,

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

Таблиці каскадних стилів ( Cascading Style Sheets ) CSS – це мова, яка містить набір властивостей для визначення

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

Internet Explorer підтримує стилі, які задаються одним із способів: - вбудовані стилі ( Global Style Sheets ) визначають стиль елементів у

всьому документі. Інформація про стиль задається в заголовку документа з використанням тегів <STYLE> і </STYLE>;

- залучені стилі ( Linked Style Sheets ) – інформація про стиль зберігається у окремому файлі, вказаному у тегу <LINK>, і може бути застосована для декількох документів;

- внутрішні стилі ( Inline Style Sheets ) – інформація про стиль розміщується всередині тега HTML і поширюєтьсся на весь текст між цим тегом і відповідним йому кніцевим тегом.

CSS дозволяє маніпулювати такими властивостями елементів: властивості шрифту, властивості тексту, властивості фону і кольору, властивості блоку, властивості елемента та ін.

Всі елементи Web-сторінки можна поділити на блокові і рядкові. Типовим прикладом блокового елементу є малюнок (тег <IMG>). Рядковим елементом є окреме слово або рядок тексту, але цілий абзац вважається блоковим елементом. Стилі, які можна застосувати до блокових і рядкових елементів, відрізняються. До блокових елементів можна застосувати всі рядкові стилі, але до рядкових елементів не можна застосувати блокові стилі.

До блокових елементів відносяться: - абзац тексту (<P>); - малюнок, графічне зображення (<IMG>); - таблиця (<TABLE>); - список (<OL>,<UL>).

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

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


64

Розглянемо абзац як блоковий елемент (див. рис.1)

РИС.1

Абзац як блоковий елемент має такі характеристики: - висоту і ширину (height, width); - межі; - обтікання, тобто положення блоку відносно тексту, який

знаходиться поряд; - поле і “набивка” (margin, padding).

“Набивкою” називається відстань від межі блокового елемента до межі його вмісту. Відстань від межі блоку до зовнішнього блокового елемента називається відступом або зовнішнім відступом.

Правила запису CSS задаються у формі простих і групових селекторів. Найпростіше правило CSS задається таким чином: Селектор { властивість CSS: значення } Селектор - це будь-який із розглянутих тегів HTML (наприклад, BODY,

P, H1, LI). Далі у фігурних дужках декларується значення властивостей CSS, які визначають стиль даного елемента в документі.

Наприклад: H1 {color:red} – задає стиль заголовкам першого рівня. Для зручності використання можна декларувати у одному правилі

декілька властивостей CSS для декількох селекторів. Наприклад:

BODY {background-color:white; color:black; font-family:Times New Roman; font-style:normal; font-size:10pt} (задає стиль всьому тілу документа замість атрибутів тегу BODY).


65

Параметри шрифтів і абзаців, доступні в стилях HTML Параметр Можливі значення

Font-family Будь-який шрифт, припустимий у Windows1 Font-size Будь-який розмір шрифту в пунктах (pt), дюймах (in),

сантиметрах (cm) або пікселях (px) Font-weight Виділення (“жирність”) шрифта: Normal, bold (звичайний,

напівжирний) Font-style Стиль елемента – звичайний або курсив (Italics) Font-decoration “Оформлення” тексту: none, underline, italic, line-

through (відсутній, підкреслений, нахилений, перекреслений) Color Будь-яке значення RGB або англійська назва кольору Text-align Left, center, right, justify (ліворуч, по центру, праворуч, по

ширині) Text-indent Відступ - будь-яка величина в пунктах (pt), дюймах (in),

сантиметрах (cm) або пікселях (px) Параметри обтікання, тобто позиціонування елементів на сторінці,

дозволяють створити ефект, при якому блоковий елемент не розриває текст, а вбудовується в нього. Цього ефекту дозволяє досягти атрибут float.

Значення атрибуту float Left Блок притиснутий ліворуч, текст обтікає його праворуч Right Блок притиснутий праворуч, текст обтікає його ліворуч Both Текст обтікає блок з обох боків Відступ і набивка разом становлять те поле, яке знаходиться між межею

основного елемента (сторінки) і вмістом внутрішнього (вкладеного) елемента. Поле і набивку можна задати як одразу для всього блоку, так і для кожної сторони окремо.

Padding-right Набивка праворуч Padding-left Набивка ліворуч Padding-top Набивка зверху Padding-bottom Набивка знизу Margin-right Праве поле (відступ) Margin-left Ліве поле Margin-top Верхнє поле Margin-bottom Нижнє поле Границі блоку можуть характеризуватись кольором, шириною, стилем. Колір для всієї границі задається “border-color:колір”. Для кожної лінії

границі можна задати колір окремо: Border-right-color – колір правої лінії; Border-left-color – колір лівої лінії; Border-top-color – колір верхньої лінії; Border-bottom-color – колір нижньої лінії. Ширина границі блоку визначається атрибутом border-width, вона може

задаватись у пікселях (px), друкарських пунктах (pt) або у процентах (%).


66

Можна окремо вказати ширину правої, лівої, верхньої і нижньої лінії: border-right-width, border-left-width, border-top-width, border-bottom-width.

Для границі можна задати стиль за допомогою атрибута border-style: None – границі не відображуються; Solid – безперервна лінія; Dotted – пунктирна лінія; Dashed – штрихова лінія; Double – подвійна лінія; Groove – об‘ємна канавка; Ridge – об‘ємний гребінець; Incet – складка всередину; Outset – складка назовні.

НАПРИКЛАД: <p style=”border-color:red;border-style:dashed;border-top:10px purple

double> (абзац буде окреслений зверху подвійною лінією бузкового кольору

шириною 10 пікселів, решта ліній – червоні штрихові). Списки CSS дозволяють управляти формою маркера, який розташований поряд з

елементом списка за допомогою атрибута list-style-type: disk – маркер у вигляді диску; circle – маркер у вигляді кола; square – маркер у вигляді квадрата.

У нумерованих списках встановлюються такі значення атрибута: Lower-roman – малі римські цифри (i, ii, iv,…); Lower-alpha – малі латинські букви (a,b,c,d,..); Upper-roman – великі римські цифри (I,II,IV,…); Upper-alpha – великі латинські букви (A,B,C,D,F,..); Decimal – цифри (1,2,3,…). За допомогою атрибута list-style-position можна визначити, яким чином буде

розташований маркер відносно списка. Атрибут може приймати значення: inside – вміст спискового елементу виходить за рівень маркера; outside – вміст спискового елементу не виходить за рівень маркера. Колір і фон сторінки Фон сторінки задається атрибутом background-color:колір. Фоновий малюнок задається за допомогою атрибута background-image:

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

стиль задається у такому виді: назва тега, за яким у дужках перелічені

1 Розгорнутий перелік значень атрибуту background-image наведено в: Сенченко Н. Устрой себе легкую жизнь//Мой компьютер.-2001.-№49.-С.14-15.


67

характеристики стилю. Наприклад, в документі текст має бути шрифтом Arial розміром 14

пунктів, колір тексту чорний, вирівнювання по ширині, заголовки шрифтом Arial розміром 16 пунктів, курсив, вирівнювання по центру:

<HTML> <HEAD> <STYLE TYPE=”TEXT/CSS”> P {color: black; font-family: Arial; font-size:14 pt; font-style:italic; text-

indent:45 px; text-align:justify;} H1 {color:black; font-size:16 pt; font-family: arial; text-align:center; font-

style:italic} </STYLE> </HEAD> <BODY> <H1>Свята й обряди календарного циклу</H1>

<P> Календарні свята й обряди - складний фольклорний комплекс, в якому поєднуються раціональний досвід і релігійно-магічні вірування, високоестетичні традиції та пережиткові звичаї.</P>

</BODY> </HTML> Відображення програмою-броузером:

Залучені стилі У випадку, якщо планується використовувати одні і ті ж стилі на

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

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

Файл STYLE.CSS: P {color:black; font-family: arial; font-size:14 pt;font-style:italic; text-

align:justify;} H1 {color:black; font-size:16 pt; font-family: arial; text-align:center; font-

style:italic}


68

Використовуючи тег <LINK> в заголовку кожного HTML-документа можна посилатись на цей файл таким чином:

<HEAD> <TITLE> Мій документ </TITLE> <LINK REL=STYLESHEET HREF=”C:/SITE/STYLE.CSS”> </HEAD>

Атрибут REL описує відношення файла, який залучається, до основного, тобто те, що залучуваний файл є файлом стилів.

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

стиль відноситься до частини документа, вміщеній між даним тегом і відповідним йому кінцевим тегом.

Приклад: <P STYLE=”text-align:center; color:blue”> Національне вбрання </P> <P> Народні заняття </P>

(Текст «Національне вбрання» буде розташований по центру і одержить синій колір. Цей стиль діє до тега </p>, і в цьому місці броузер повернеться до того стилю, який використовувався до задання цього внутрішнього стилю).

Завдання для самостійної роботи 1. Створити HTML-документ такого змісту:

Рослини й тварини в народній уяві Світ рослин життєво необхідний людині. Протягом тисячоліть багато

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

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

В документі слова “світ рослин” і “світ тварин” позначити як гіперпосилання (без зазначення конкретних назв файлів, на які робиться посилання – залишити пропуск).

У створеному документі встановити вбудований стиль: − для тіла документа: розмір шрифту 14 пт, гарнітура шрифту – Times, стиль –

нормальний, вирівнювання тексту по ширині; − для заголовка: розмір шрифту – 18 пт, гарнітура – Arial, оформлення – з

нахилом, вирівнювання – по центру; − для абзаца: розмір шрифту – 14 пт, гарнітура – Arial, оформлення –

виділений, вирівнювання – по ширині;


69

− для гіперпосилань: розмір шрифту – 14 пт, гарнітура – Arial, напівжирний шрифт, колір посилань – синій.

1. Створити ще два HTML-документа і дати їм імена FAUNA.HTM і FLORA.HTM:

FAUNA.HTM: Фауна як об’єкт персоніфікації На змісті вірувань позначився вплив реальних властивостей тих чи

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

FLORA.HTM: Флора: символічне і прагматичне Поряд з утилітарною функцією рослини займали значне місце в

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

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

2. У одному із створених файлів видалити посилання на файл стилів і встановити внутрішні стилі, які відрізняються від тих, що були раніше.

Запитання для самоперевірки 1. Дати визначення стилю документа. 2. Якими способами підтримуються стилі у HTML-документі? 3. Пояснити різницю між способами підтримки стилів документа. 4. Які основні параметри шрифтів та абзаців доступні у стилях

HTML?


70

РОЗДІЛ 16. ТЕГ <META> Мета: опанувати принципи надання HTML-документу пошукових ознак. Пошукові системи мережі Інтернет представляють результати пошуку у

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

Багато з пошукових служб індексують тільки початкові сторінки сайтів. Як правило, індексуванню підлягають такі елементи документа: заголовок <TITLE>, заголовки рівнів <H1>...<H6> в тілі документа і ключові слова, задані в <META>-тезі.

Таким чином, для того, щоб документ був знайдений у мережі, необхідно уважно ставитись до вибору назви документа, створення його структури і використання <META> -тегів.

Наприклад, тег <META NAME=”Keywords” LANG=ru CONTENT=” “> задає список ключових слів, які містяться в документі, а тег <META NAME=”Description” CONTENT=” “> є словесним описом змісту документа.

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

Для опису HTML-документа з метою його подальшого ефективного пошуку роботами пошукових машин мережі застосовується тег <META>, до якого вміщуються дані про документ.

Під метаданими розуміють інформацію або “дані про інші дані” або об’єкти. У HTML-файлі метадані вміщені у <МЕТА>-теги, які розташовані у заголовку файла. Метадані знаходять застосування у різних галузях для ідентифікації і класифікації електронних і неелектронних документів для реалізації у мережевому середовищі інформаційного пошуку, фільтрації інформації та ін.

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

Машинопрочитувані бібліографічні записи MARC (Machine-Readable Cataloging Records) - один з перших найбільш відомих форматів метаданих для підготовки “даних про дані” у електронній формі. Однак сфера застосування цього формату обмежувалась бібліографічними метаданими. Подібно


71

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

Найпростішою та найбільш широко уживаною схемою опису електронних ресурсів є Дублінський базовий комплект елементів метаданих (Dublin Core Metadata Initiative, DCMI) (http://purl.org/dc/), який ґрунтується на форматі HTML.

Дублінський базовий комплект елементів містить абсолютний мінімум метаданих, необхідних для пошуку ресурсів.

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

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

Принцип простоти Dublin Core (DC) розрахований як на спеціалістів з опису ресурсів, так і на неспеціалістів в галузі каталогізації. Орієнтиром має бути інтуїтивне розуміння опису для будь-якого користувача, незалежно від рівня і профілю його освіти.

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

1. Назва (Title) - ім’я, яке дане ресурсу. 2. Створювач (Creator) - особа (особи), які несуть первинну

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

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

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

5. Видавець (Publisher) - особа (особи), які несуть відповідальність за введення ресурсу до обігу. Може включати персону, організацію або службу.

6. Співвиконавець (Contributor) - особа (особи), яка несе відповідальність за сприяння створенню змісту ресурсу. Може включати персону, організацію або службу.


72

7. Дата (Date) - дата, пов’язана з подією у життєвому циклі ресурсу. Як правило, дата асоціюється із створенням або доступністю ресурсу. Рекомендовані для практичного використання при кодуванні значення дати визначено у профілі ISO 8601 і підтримують формат РРРР-ММ-ЧЧ.

8. Тип ресурсу (Type) - категорія ресурсу. 9. Формат (Format) - фізичне або цифрове представлення ресурсу. Формат

може описувати величину ресурсу, використовуватись для визначення технічного або програмного забезпечення або іншого обладнання, необхідного для відображення або управління ресурсом.

10.Ідентифікатор ресурсу (Identifier ) - однозначне посилання на ресурс у межах даного контексту. Рекомендується ідентифікувати ресурс рядком або числом, які відповідають ідентифікаційні системі (URL, ISBN та ін.).

11. Джерело (Source) - посилання на джерело, з якого взято цей ресурс. Ресурс може бути взятий з джерела повністю або частково. Рекомендується ідентифікувати ресурс рядком або числом, які відповідають ідентифікаційні системі.

12. Мова (Language) - мова інтелектуального змісту ресурсу. Рекомендується зазначення елемента мови двобуквеним кодом мови (із стандарту ISO 639).

13. Відношення (Relation) - посилання на споріднені ресурси. Рекомендується ідентифікувати ресурс рядком або числом, які відповідають ідентифікаційні системі

14. Охоплення (Coverage) – просторова характеристика (назва місцевості або географічні координати), проміжок часу (дата або діапазон дат), юрисдикцію.

15. Правове регулювання (Rights) - інформація про права на обмеження доступу і охорону ресурсу. Містить положення про правові норми, які регулюють функціонування ресурсу. Включає відомості про права на інтелектуальну власність, авторське право та ін.

Приклад застосування <МЕТА>-тегів1: META NAME="Description" CONTENT="FAQ about Ukraine at BRAMA"> <META NAME="Keywords" CONTENT="Ukraine, Ukrainian, History, Area,

Geography, Population, Economic Data, Education, Healthcare Statistics, Energy, Transportation, Communication, Media, Citycodes, Chornobyl, Chernobyl, Maps, Currency, Hryvnas, Karbovantsi, Rubles, Planes, Mriya, Cossack, Ruslan, Condor, Antonov, Україна, Украина, Історія, История, Населення, Економія, Наука, Здоров'я, Енергія, Транспорт, Комунікація, Чорнобиль, Карти, Валюта, Карбованці, Рублі, Літаки, Антонов, Руслан, Кондор, Мрія, Казак, Газети, Журнали, Газета">

<META NAME="Author" CONTENT="Max Pyziur, Hanya Krill, Myroslaw Smorodsky, Ганя Кріль, Мирослав Смородський">

<META NAME="Company" CONTENT="BRAMA-Gateway Ukraine Inc.">

1 Приклад застосування метатегів взято з WEB-сторінки http://www.brama.com/ukr.html


73

<META NAME="Language" CONTENT="English, Ukrainian, Russian"> Існують засоби автоматизації запису META-тегів - так звані форми-

генератори <META>-тегів1.

1Одна з таких форм представлена в мережі за адресою http://www.arcus.lv/dimas/410.html


74

Рисунок

Після заповнення відповідних полів форми автоматично генерується код,

який вставляється між тегами <head> .... </head>.

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


75

1. Вставити тег <МЕТА> до створеного HTML-документа, використавши максимально можливу кількість ідентифікаторів документа, які рекомендовані DC.

2. Виконати аналіз декількох сайтів на наявність і інформативність використаного в них тега< МЕТА>.


76

РОЗДІЛ 17. ПІДГОТОВКА ЕЛЕКТРОННОЇ ПУБЛІКАЦІЇ У PDF-ФОРМАТІ

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

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

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

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

Формат PDF? як правило, застосовується до документів, при відкритті яких на різних програмно-апаратних платформах повинна суворо зберігатись попередня розмітка.

Для створення, редагування і перегляду файлів формату PDF використовується пакет прикладних програм Adobe Acrobat, розроблений програмою Adobe Systems. Основними додатками, які входять до цього пакету, є Adobe Acrobat Distiller, Adobe Acrobat і Acrobat Reader. Adobe Acrobat Distiller призначений для створення документів у форматі PDF із PostScript-файлів. Adobe Acrobat дозволяє їх редагувати, створювати зміст, індекси, вміщувати до PDF-файлів мультимедійні ресурси.

Для перегляду і друкування файлів формату PDF фірма Adobe безкоштовно розповсюджує програму Acrobat Reader.

Створення PDF-файла У комплекті поставки більшості програмних продуктів Adobe є програма

Acrobat Distiller, яка виконує найбільш правильне перетворення з PostScript-файлів у PDF-файл.

Для перетворення документа Word у PDF-файл необхідно:


77

1. Завантажити файл у Word. 2. Увійти в пункт меню Файл-Печать. 3. У вікні Принтер-Имя вибрати Acrobat Distiller (попередньо він має

бути встановлений на комп’ютері) (див. рис.1).

Рис.1. Діалогове вікно вибору Acrobat Distiller для створення PDF-файла.

4. Натиснути ОК. 5. На екран буде виведене вікно для збереження файла Save PDF File

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

6. Натиснути кнопку Сохранить. Після виконання зазначених операцій автоматично завантажиться

Acrobat Reader і відобразиться створений файл. У створеному файлі буде збережено всі шрифти, всі стилі форматування,

наявні малюнки, схеми тощо, які були у файлі .DOC. Завдання для самостійної роботи 1. Створити файл у текстовому процесорі WORD і відформатувати

його за даним завданням: Інформаційні технології і культура

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


78

Ще на ранніх етапах розвитку людства формувалися окремі групи людей, для яких спочатку основним, а відтак і єдиним заняттям стає робота з інформацією. Жерці — спочатку охоронці усних скарбів знань, а потім переписувачі і тлумачі книг — протягом тисячоліть зберігали за собою виняткову владу, засновану на монопольному доступі до фонду людського досвіду. Вони залишалися посередниками між накопиченими знаннями та людьми, зацікавленими в цих знаннях. Цей живий бар’єр почав руйнуватися лише після винайдення книгодрукування.

Завдання для форматування: - заголовок - шрифт Arial Cyr, розмір – 16; виділений жирним;

вирівнювання по центру; - основний текст – розмір 14, шрифт Times New Roman; - для власних назв у тексті вибрати інтервал Разреженный на 1,6 пт і

виділити напівжирним курсивом; - встановити міжрядковий інтервал: у першому абзаці – 1,5, у

другому – 2 інтервали; - вставити верхній і нижній колонтитули: у верхньому – заголовок, у

нижньому – своє власне ім’я; - проставити у документі номери сторінок.

2. Вставити у файл будь-який малюнок (наприклад, зображення екрана Рабочий стол, одержане копіюванням його у буфер обміну комбінацією клавіш ALT+PrintSсreen).

3. Виконати перетворення створеного у текстовому процесорі файла у PDF-файл.

4. Створити HTML-документ, у якому виконати гіперпосилання на створений PDF-файл.

5. Завантажити HTML-документ у Internet Explorer і здійснити перехід за створеним гіперпосиланням, завантаживши PDF-файл.

Запитання для самоперевірки 1. За допомогою яких програм здійснюється створення, редагування і

перегляд PDF-файлів? 2. З якою метою застосовується PDF-файл? 3. Описати процедуру створення PDF-файла з Word-документа. 4. Яким чином може бути включений PDF-файл до Web-сторінки?


79

РОЗДІЛ 18.ОСНОВНІ ПРАВИЛА ДИЗАЙНУ ПРИ ОФОРМЛЕННІ HTML-ДОКУМЕНТІВ

Ознаками придатності сайта для використання є: 1. Корисність (utility). Визначається можливостями системи у

виконанні основних завдань, для яких вона була створена. 2. Застосовуваність (usability). Визначається тим, наскільки

ефективно може користувач застосовувати систему. Тлумачний словник з обчислювальної техніки фірми Microsoft наводить

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

З’являється нова прикладна дисципліна – usability engineering, яка досліджує і допомагає врахувати при розробці програмного продукта, наприклад, web-сайта або програми, так званий людський фактор, тобто психологічні, соціальні, фізіологічні та інші особливості користувачів програмного продукту. Метою usability є зробити продукт максимально доступним, зручним, комфортним, корисним і ефективним, тобто максимально підвищити споживчі властивості, якість продукту, і, як наслідок, його конкурентоздатність.

Usability-системи можна оцінити, виходячи з таких критеріїв: 1. Простота вивчення - визначається тим, наскільки швидко

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

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

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

4. Частота помилок і їх серйозність - визначається тим, як часто користувач може припускатись помилок при роботі з системою, наскільки серйозними можуть бути наслідки цих помилок, як швидко можна усунути наслідки помилки користувача.

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

Кожна система має всі ці характеристики, і всі вони повинні враховуватись при розробці системи.

У сучасних людино-машинних системах питання візуального сприйняття


80

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

У системі “людина - ЕОМ” спостерігається підвищена напруженість праці користувача, що викликано такими психологічними факторами, як необхідність розподіляти і переключати увагу між клавіатурою і екраном, між екраном і записами, зробленими на папері, що призводить до підвищеної емоційної напруженості. Складність споживання інформації з екрана комп’ютера є психологічною проблемою і досліджувалась вченими як контекст роботи користувача з виділенням суб’єктивної складності контексту роботи користувача і об’єктивної складності.

Суб’єктивна складність контексту ґрунтується на дискретності одержання інформації при зміні зображення на екрані монітора, “віртуальності” її існування, неможливості використати візуальні (а можливо, і тактильні) способи сприйняття, щоб оцінити її обсяг (як, наприклад, ми оцінюємо обсяг інформації за товщиною книжки або кількістю сторінок), втраті користувачем звичних навичок роботи з друкованими виданнями тощо.

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

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

З широким використанням інформаційного середовища мережі Інтернет для пошуку інформації виникає низка проблем, які стосуються проблеми навігації у гіперпросторі мережі Інтернет. Ця проблема сформульована фахівцями таким чином: “Щоб читати гіпертекстовий документ ,необхідно не тільки розуміти текст у кожному вузлі, а і вести навігацію у цьому документі, не потрапляючи у становище того, хто заблукав або заплутався”. Тобто виникає проблема “дезорієнтації” в гіпертекстовому просторі. Основна проблема у використанні гіпертексту викликана складністю, пов’язаною з додатковим розумовим навантаженням, необхідним для того, щоб формувати ланцюжок зв’язків і дотримуватись його. Фахівці застосовують термін “cognitive overhead”, який трактується як когнітивні побічні (або непродуктивні) витрати, які виникають через те, що в процесі читання гіпертексту користувач стикається з багатьма варіантами того, за якими гіперзв’язками рухатись, а які залишити без уваги, вирішує, чи не буде рух за деяким гіперзв’язком відходом від теми, чи не є результатом такого руху “інформаційна короткозорість”. У користувача відбувається певне відволікання – “когнітивне навантаження” у


81

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

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

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

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

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

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

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

Графіки як форма подання інформації мають такі переваги: - дають можливість наочного сприйняття залежності між різного

роду явищами і пов’язаними з ними процесами; - дозволяють шляхом екстраполяції прогнозувати подальше

протікання процесів і явищ. Діаграма як форма представлення інформації ефективна у випадках, коли

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

Таблиці раціонально застосовувати у випадках, коли між двома або більшим числом параметрів встановлений однозначний функціональний


82

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

Існує кілька ключових правил використання фонового кольору і зображень:

- текст читається краще, якщо він розташований на світлому фоні, однак більшість зображень краще виглядає на темному тлі;

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

- складні фонові зображення різко знижують прочитуваність тексту і дратують користувача. Графічним елементам, які включаються до Web-сторінок, за допомогою

існуючих пакетів графічних програм, таких, як Photoshop, можна надати ефектів, які допомагають користувачу сприймати інформацію:

- тіні, які розташовуються під текстом і графікою і надають сторінці ефекту тривімірності;

- тиснення – зображення, що мають скошені кути, виглядають опуклими, порушують монотонність двовимірних web-сторінок;

- зображення з трасованими променями – надають враження об’ємності.

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

Оптимізація пошукових характеристик HTML-документа Ефективний пошук інформації досягається лише за умови виконання

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

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

Пошукові системи розглядають WEB-сторінку як набір елементів, кожен з яких має різне значення. Можна виділити такі частини документа:

− заголовок (тег <TITLE>); − URL-сторінки; − <META>-тег; − посилання; − заголовки; − ALT-текст; − власне текст сторінки.

Для того, щоб WEB-ресурс з’являвся на початку лістингу результатів пошуку, необхідно дотримуватись таких загальних правил:

- на сторінці має бути текст. Сторінка з недостатньою кількістю


83

тексту має мало шансів потрапити до списка “відгуку” пошукової машини на запит користувача. Необхідно до атрибуту зображення ALT вводити дескриптори, які описують малюнок;

- базові поняття і ключові слова документа слід включати у HTML-теги (у порядку значущості): <TITLE>, <H1>-<H6>, <ADRESS>, <B>,<STRONG>. Чим частіше слово зустрічається у комбінації цих полів, тим більша вірогідність, що пошукова система знайде документ і розташує його ближче до початку списку результатів;

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

- необхідна наявність посилань на внутрішні сторінки, оскільки пошукові машини відшукують сторінки за гіпертекстовими посиланнями – чим більше посилань всередині “дерева” документів на Web-сайті, тим більша вірогідність, що всі сторінки будуть проіндексовані;

- важливо, щоб ключові слова, зазначені в заголовку і <META>-тегах, використовувались у текстах HTML-сторінок. Існує також поняття “перший рядок тексту”. Перший рядок тексту на сторінці деякими пошуковими системами оцінюється навіть вище, ніж заголовок.


84

РОЗДІЛ 19. ВИКОРИСТАННЯ JAVA-СКРИПТІВ ПРИ СТВОРЕННІ HTML-ДОКУМЕНТА

При розробці сучасного сайта не завжди можна обійтись лише можливостями мови розмітки HTML. З метою надання Web-сторінкам привабливого вигляду і створення у відвідувача відчуття взаємодії із сайтом використовують додаткові можливості, які доступні при використанні Java-скриптів. Діапазон їх застосування досить широкий: це і елементи інтерактивності, які можуть містити складні процедури обробки, і просто декоративні елементи, які надають привабливості сайту. Мова JavaScript була розроблена спільно компаніями Sun Microsystems і Netscape на синтаксичній основі мови Java.

Java-скрипт вбудовується в HTML-документ і взаємодіє з ним. Скрипти можуть знаходитись у будь-якому місці HTML-документа. Однак теги HTML не можна вміщувати всередині Java-скрипт-програми. Java-скрипт-програма вміщується між тегами <script> ... </script>, виняток становлять “обробники подій”.

Зустрівши тег <script>, браузер по рядках аналізує зміст документа доти, поки не буде досягнуто тег </script>. Після цього відбувається перевірка скрипта на наявність помилок і компіляція програми у формат, придатний для виконання на комп‘ютері користувача.

Головна частина Java-скрипт-програми може бути вміщена у контейнер <head>... </head>, оскільки він зчитується при завантаженні HTML -документа одним з перших. Теоретично скрипт можна вміщувати у будь-якому місці HTML -документа, хоча краще це робити перед тегом <body>... </body>, тобто в заголовку документа.

Синтаксис тега: <script language="JavaScript"> [текст програми] </script>

Слід мати на увазі, що слово "JavaScript" записується із дотриманням регістру символів.

Багато з об‘єктів мови JavaScript відповідають тегам, які формують HTML-документи.

Деякі об‘єкти мови JavaScript мають наслідування. Зокрема, гіперзв‘язок є об‘єктом, який наслідується з об‘єкта document. У мові Java-скрипт об‘єкти, які наслідуються, також мають назву властивостей. Наприклад, множина гіперзв‘язків є властивістю об‘єкта document, а links – ім’ям цієї властивості.

ОБ‘ЄКТИ Password - поле введення пароля, яке створюється за допомогою

тега <input type=password> Radio - селекторна кнопка (radio button), яка створюється за


85

допомогою тега <input type=radio> Reset - кнопка перезавантаження, яка створюється за

допомогою тега <input type=reset> Select (options[ ]) - елементи <option> об‘єкта <select> Submit - кнопка передавання даних, яка створюється за

допомогою тега <input type=submit> Text - поле введення, яке створюється за допомогою тега

<input type=text> Textarea - поле тексту, яке створюється за допомогою тега

<textarea> Важливим елементом мови є події, які використовуються для виконання

певних частин програмного коду скрипта. Події в основному ініціюються тими чи іншими діями користувача. Якщо користувач натиснув певну кнопку, відбувається подія “Click”. Якщо вказівник мишки перетинає будь-яке посилання у тексті – відбувається подія MouseOver. Використання мови JavaScript при обробці подій значно розширило можливості мови HTML.

Події поділяються на декілька категорій. Події, пов‘язані з документами (події документа): - завантаження і закриття документів. Події, пов‘язані з гіперзв‘язком: - активізація гіперзв‘язку. Події, пов‘язані з формою: - натискання мишкою кнопок; - одержання і втрата фокусу введення і зміна вмісту полів введення,

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

гіперзв‘язку. Події, пов‘язані з документами, виникають при завантаженні і закритті

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

Нижче наведено імена деяких подій і умови їх виникнення. Ім‘я події Атрибут HTML Умова виникнення події

Change onChange Зміна вмісту поля введення чи області тексту або вибір нового елемента списку

Click OnClick Натискання мишки на елементі форми або гіперзв‘язку MouseOver onMouseOver Наведення вказівника мишки на

гіперзв‘язок MouseOut onMouseOut Наведення вказівника мишки не на гіперзв‘язок Select OnSelect Виділення тексту у полі введення або


86

області тексту Submit onSubmit Передавання даних форми

Для забезпечення здійснення події необхідно задати функцію-обробник події. Колекції прикладів Java-скриптів розміщуються на Web-сайтах мережі Інтернет і можуть бути запозичені і використані розробниками Web-сторінок у власних документах.

ПРИКЛАД (відкриття нового вікна, завантаження в нього документа і закриття вікна):

<html> <head> <script language=”JavaScript”> function opWind() { var myUrl = “2.htm”; myWin=window.open(myUrl,

“wind1”,”left=0,top=250",”width=400,height=400,resisable=no,scrollbars=no,menubar=no”);

} </script> </head> <body> <input type=”button” value=”Відкрити вікно” onClick=”opWind()”> <input type=”button” value=”Закрити вікно” onClick=”myWin.close()”> </body>

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

ПРИКЛАД (зміна фону таблиці при наведенні мишки). При наведенні мишки на область таблиці, остання змінить колір з білого

на червоний. Відповідно, коли курсор мишки залишить цю область, вона знову стане білою.

Виконується за допомогою обробника події потрапляння курсора мишки в область таблиці onMouseover і вихід з цієї області onMouseOut:

<table id=table onMouseover =”table.bgColor=’red’” onMouseOut=”table.bgColor=’white’” bgcolor=white border=1><tr>

<td> Це приклад зміни фону таблиці</td>


87

</tr> </table>

Аналогічним чином можна змінювати і фоновий малюнок таблиці, записавши:

<table id=table onMouseover=”table.background=’4.gif’” onMouseOut==”table.background=’11.gif’” border=1>

(4.gif – фоновий малюнок, який з‘являється у таблиці при наведенні на неї курсора мишки, 11.gif – фоновий малюнок, який з’являється в таблиці при виведенні курсора мишки з області таблиці).

ПРИКЛАД (динамічне обведення таблиці контуром.) При наведенні курсора мишки на таблицю остання стане окресленою

контуром (відповідно, коли мишка залишить область таблиці, контур зникне): <table id=table1 onMouseover=”table1.border=’2'” onMouseOut=”table1.border=’0'” border=0><tr> <td> Приклад динамічного окреслення таблиці контуром: </td> </tr>

</table> ПРИКЛАД (спадне меню з посиланнями і кнопкою підтвердження):

<html> <head> <title> </title> </head> <body> <form> Виберіть потрібний розділ довідника “Українська минувщина” <select name=”p1" > <option selected value=”0"> Розділи</option> <option value=”1.htm”>ТРАДИЦІЙНЕ ЖИТЛО</option> <option value=”file2.htm”>НАРОДНІ ЗАНЯТТЯ</option> <option value=”file3.htm”>УКРАЇНСЬКА КУХНЯ</option> <option value=”file4.htm”>СТАРОВИННА ОБРЯДОВІСТЬ</option> </select>

<input type=”BUTTON” value=”ВИБРАТИ” onclick=”location.href=p1.options[p1.selectedIndex] .value ;”> </form> </body> </html>

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


88

ПРИКЛАД (спадне меню без кнопки підтвердження вибору):

<html> <head> <title> </title> </head> <body> <form> Оберіть потрібний розділ довідника “Українська

минувщина”<select name=”p1" onChange=”location.href=p1.options[p1.selectedIndex] .value ;” >

<option selected value=”0"> Розділи</option> <option value=”1.htm”>ТРАДИЦІЙНЕ ЖИТЛО</option> <option value=”2.htm”>НАРОДНІ ЗАНЯТТЯ</option> <option value=”file3.htm”>УКРАЇНСЬКА КУХНЯ</option> <option value=”file4.htm”>СТАРОВИННА ОБРЯДОВІСТЬ</option> </select> </form> </body>

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


89

Завдання для самостійної роботи 1.Перевірити виконання наведених скриптів, вставивши їх до власних HTML-сторінок. 2. Здійснити у мережі Інтернет пошук прикладів скриптів, скориставшись

пошуковими системами Rambler і META.


90


91

МЕТОДИЧНІ РЕКОМЕНДАЦІЇ ДО ВИКОНАННЯ ЗАЛІКОВОЇ РОБОТИ

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

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

Структура самостійного завдання-проекту ПРОЕКТУВАННЯ WEB-СТОРІНКИ Вступ

1. Характеристика сторінки: - призначення і можливості (напр., для інформаційного

обслуговування….; дозволяє оперативно одержувати досить повну інформацію про…; забезпечується додаткова допоміжна і довідкова інформація…);

- характеристика користувачів за інформаційними потребами (для кого призначена);

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

2. Схема аналізу зручності роботи із сторінкою: - аналіз зручності роботи, що виходить із суб’єктивного

сприйняття системи користувачем (відсутність ускладнень в роботі, дизайн і психологічне сприйняття; “логічна поведінка системи” - передбачення користувачем поведінки системи).

Висновки. Література. Із змістової точки зору гіпертекст можна розглядати як структуру, яка,

крім власне інформації, містить ще і “метаінформацію” про змістові зв’язки між


92

будь-якими явищами і об’єктами, описаними у цій структурі. Як одиниці зберігання даних використовуються фрагменти (вузли) тексту

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

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

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

− постановка задачі; − розробка сценарію, підготовка текстів; − набір текстів, редагування; − збирання оброблених текстів; − тестування.

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

Дидактичний матеріал із сценарієм гіпертекстових зв’язків для створення програмно-методичного комплексу ТЕКСТ 1 (Початкова сторінка)

ТЕКСТ 2 (пов’язана сторінка)

ТЕКСТ 3 (пов’язана сторінка)

Блок – схема сценарію гіпертекстової системи


93

Файл t1.htm НАРОДНІ ВІРУВАННЯ, ДЕМОНОЛОГІЯ, КОСМОГОНІЯ Українська міфологія (посилання на ТЕКСТ 2) Демонологія (посилання на ТЕКСТ N) Космогонічні уявлення (посилання на ТЕКСТ N)

Файл t2.htm Українська міфологія Українська міфологія як сукупність переказів про живу й неживу природу та людину розвивалася на основі давньої загальнослов’янської міфології. В українській міфології у художньо-образній формі знайшли поєднання реальні знання з фантастично-релігійними елементами та повір’ями. Анімізм (посилання на ТЕКСТ N) Тотемізм (посилання на ТЕКСТ N) Культи (посилання на ТЕКСТ N ) Забобони (посилання на ТЕКСТ 3) На початкову сторінку (посилання на ТЕКСТ 1)

Файл t3.htm ЗАБОБОНИ Важливе місце у світорозумінні українців займали численні вірування, пов’язані із пересторогами, обмеженнями, табу тощо. Чимало забобонів складають ті, що пов’язані з вирощуванням городніх рослин. Великого значення надавали дотриманню численних засторог і табу, що стосуються християнських свят. На сторінку “Українська міфологія” (посилання на ТЕКСТ 2)

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

Програмна реалізація початкової сторінки Файл t1.htm у форматі HTML: <HTML>

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

</HEAD> <BODY>

<H3><P ALIGN= CENTER > НАРОДНІ ВІРУВАННЯ, ДЕМОНОЛОГІЯ, КОСМОГОНІЯ </P>

</H3> <BR> <A HREF="T2.HTM">Українська міфологія</A><BR> <A HREF=>Демонологія</A><BR> <A HREF=>Космогонічні уявлення </A><BR>

</BODY> </HTML>


94


Програмна реалізація пов’язаної сторінки 1 Файл t2.htm у форматі HTML: <HTML>

<TITLE>Українська міфологія</title> <BODY>

<H1 ALIGN =CENTER>Українська міфологія</H1> <P ALIGN=JUSTIFY> Українська міфологія як сукупність переказів

про живу й неживу природу та людину розвивалася на основі давньої загальнослов'янської міфології.

В українській міфології у художньо-образній формі знайшли поєднання реальні знання з фантастично-релігійними елементами та повір'ями.</P>

<A HREF=>Анімізм </A> <BR> <A HREF="t3.htm">Забобони</A> <BR> <A HREF=>Тотемізм </A> <BR> <A HREF=>Культи </A> <BR> <P ALIGN=RIGHT><A HREF="lab4-1.htm">На початкову сторінку

</A> </P> </BODY>



95

Програмна реалізація пов’язаної сторінки 2 Файл t3.htm у форматі HTML: <HTML>

<TITLE>ЗАБОБОНИ</TITLE> <BODY>

<H1 ALIGN=CENTER> ЗАБОБОНИ </H1> <P ALIGN =JUSTIFY> Важливе місце у світорозумінні

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

Великого значення надавали дотриманню численних засторог і табу, що стосуються християнських свят. </P>

<P ALIGN=RIGHT><A HREF="T2.HTM">На сторінку "Українська міфологія"</A> </P>


Технологія створення фотоальбому для мережі Інтернет Для створення фотоальбому необхідно опанувати теги вставки малюнка

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

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


96

1. Створити файл основної сторінки ALBOM.HTM: Файл у форматі HTML: <HTML> <BODY> <H1 ALIGN=CENTER>ФОТОАЛЬБОМ</H1> <A HREF=1.HTM><IMG SRC=01.JPG></A> <A HREF=2.HTM><IMG SRC=02.JPG></A> <A HREF=3.HTM><IMG SRC=03.JPG></A> </BODY> </HTML> Відображення файла програмою-броузером:

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

2. Створити для кожної з фотографій окремий файл (наприклад, для фотографії 01.jpg створити файл 1.htm із посиланням на основний файл ALBOM.HTM: (аналогічно для інших фотографій):

Файл у форматі HTML: <HTML> <BODY> <A HREF= ALBOM.HTM><IMG SRC=01.JPG></A> </BODY>


97



98

ЛІТЕРАТУРА 1. Барышева О.В. Интернет-Метаданные-Dublin Core//НТИ.Сер.1.-

2000.-№3.-С.21-33. 2. Борковский А.Б. Англо-русский словарь по программированию и

информатике (с толкованиями).-М.:Рус.яз., 1990.-335 с. 3. Василенко Г.А., Гиляревский Р.С. Электронная книга (pro и contra):

взгляд из Интернета//НТИ.Сер.1.-2001.-№4.-С.14-23. 4. Воройский Ф.С. Систематизированный толковый словарь по

информатике.-М.:Либерия, 1998.-376 с. 5. Горовенко Д.Скрипящие Jav‘ы//Мой компьютер.-2001.-№07-08.-С.46-

47. 6. Давыдова Е.В. Создание графики для web-страниц//Информатика и

образование.-2001.-№8.-С.58-69. 7. Елементи та основні види тексту//Вісник Книжкової палати.-2001.-№2.-

С.6-7. 8. Желудев С. Что такое Java?//Вы и Ваш компьютер.-2001.-№2.-С.16-18. 9. Захаров В.П., Булдакова Е.В. Научно-информационные ресурсы сети

Интернет (на примере предметной области «Компьютерная лингвистика»)//Междунар.форум по информации.Т.26.-2001.-№2.-С.30-36.

10.Зелинский С.Русский контент//CHIP.-2000.-№5.-С.52-59. 11.Кайналов А. Поисковая оптимизация//Мир Internet.-2001.-№4.-С.72-73. 12. Коржов В. Кто ищет? [Електр. ресурс].- Спосіб доступу:URL:

http://www.osp.ru/cw/1999/44/27.htm.-Загол. з екрану. 13. Кремер Е. Осваиваем HTML. Основные параметры веб-

страницы//Компьютеры+программы.-2001.-№6.-С.54-59. 14. Кулешов С.Г. Документальні джерела наукової інформації: поняття,

типологія, історія типологічної схеми.-К.:УкрІНТЕІ, 1995.-190 с. 15. Мазепа В. HTML быстрее ветра//Вы и Ваш компьютер.-2001.-№8.-

С.16-18. 16. Мазепа В.Юзабилити и где его искать//Мой компьютер.-2001.-

№48.-С.14-15. 17. Матвієнко О.В. Методика створення гіпертекстових програмно-

методичних засобів//Рідна школа.-2001.-№4.-С.20-22. 18. Перевалов Я. Боец невидимого фронта: специалист по web-

usability//Мир Internet.-2001.-№5.-С.50-52. 19. Сеченко Н. Устрой себе легкую жизнь//Мой компьютер.-2001.-

№31-32, 34-35, 47, 49,50. 20. Смарт К., Райс Д.К., Вуд Л.Е. Удовлетворение нужд пользователей:

к семиотике сетевой информационной среды//Междунар.форум по информации.Т.26.-2001.-№2.-С.17-23.

21. Тихонов В. Поисковые системы в сети Интернет [Електр. ресурс].- Спосіб доступу:URL: http://www.citforum.ru/ .- Загол. з екрану.


99

22. Тупчиенко-Кадырова Л.Г. Об одном подходе к пониманию гипертекстовых систем//НТИ.Сер.1.-1998.-№ 5.-С.12-16.

23. Угринович Н.Д., Лаушкина И.С. Разработка Web-сайтов и публикация их в Интернете//Информатика в образовании.-2001.-№1.-С.77-84.

24. Харченко В. «Раскрутка» веб-сайта. Первые шаги// Компьютеры+Программы.-2001.-№4.-С.34-37.

25. Храмцов П. Поиск и навигация в Internet [Електр. ресурс].- Спосіб доступу:URL: http:// www.osp.ru/cw/1999/22/23.htm.- Загол. з екрану.

26. Христочевский С.А. Электронные мультимедийные учебники и энциклопедии//Информатика и образование.-200.-№2.-С.70-78.

27. Цивін М.Н., Дубов Д. Віртуальність як властивість електронного документа// Вісник КНУКіМ.-2000.-№3.-С.93-97.

28. Шехтман Н.А., Шехтман Э.Н. Проблема представления знаний и гипертекст//НТИ.Сер.1.-2000.-№3.-С.6-9.

29. Шиденко К., Артамонова А., Моисеева Е. Сага о Usability//Мир Internet.-2001.-№3.-С.60-62.

30. http://www.adobe.com/acrobat/ 31. Information culture and the archival record/Lubar Steven//American

Archivist.-1999.-62, №1.-p.10-22. 32. Microsoft Press.Толковый словарь по вычислительной технике/Пер.

с англ.-М.:Издательский отдел «Русская редакция», 1995.-496 с.Воройский Ф.С. Систематизированный толковый словарь по информатике.-М.:Либерия, 1998.-376 с.


100

ДОДАТОК 1. ТАБЛИЦЯ ОСНОВНИХ ТЕГІВ МОВИ HTML

ОСНОВНІ ТЕГИ

<html></html> Сповіщає програмі перегляду сторінок (броузеру), що це HTML- документ.

<head></head> Визначає місце, де вміщується різна інформація, яка не відображається в тілі документа. Тут розташовується тег назви документа і теги для пошукових машин.

<body></body> Визначає видиму частину документа

ТЕГИ ЗАГОЛОВКУ

<title></title> Вміщує назву документа до заголовку програми перегляду сторінок

АТРИБУТИ ТІЛА ДОКУМЕНТА

<body bgcolor=?> Встановлює колір фону документа, використовуючи значення кольору у вигляді

RRGGBB - приклад: FF0000 - червоний колір.

<body text=?> Встановлює колір тексту документа, використовуючи значення кольору у вигляді RRGGBB - приклад: #000000 - чорний колір.

<body link=?> Встановлює колір гіперпосилань, використовуючи значення кольору у вигляді RRGGBB - приклад: #00FF00 – зелений колір


101

<body vlink=?> Встановлює колір гіперпосилань, за якими вже здійснювався перехід, використовуючи значення кольору у вигляді

RRGGBB - приклад: #333333 – сірий колір

<body alink=?> Встановлює колір гіперпосилань при натисканні

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

<pre></pre> Обрамляє попередньо відформотований текст

<h1></h1> Створює НАЙБІЛЬШИЙ заголовок

<h6></h6> Створює найменший заголовок

<b></b> Створює жирний текст

<i></i> Створює текст з нахилом

<tt></tt> Створює текст, який імітує текст друкарської машинки

<cite></cite> Використовується для цитат (як правило, текст з нахилом)

<em></em> Використовується для виділення з тексту слова (текст з нахилом або жирний текст)

<strong></strong> Використовується для виділення найбільш важливих частин тексту (текст з нахилом або жирний текст)

<font size=?></font> Встановлює розмір тексту в межах від 1 до 7

<font color=?></font> Встановлює колір тексту, використовуючи значення кольору у вигляді RRGGBB.

Гіперпосилання


102

<a href="URL"></a> Створює гіперпосилання на інші документи або частину поточного документа

<a href="mailto:EMAIL"> </a>

Створює гіперпосилання виклику поштової програми для написання листа авторові документа

<a name="NAME"></a> Відмічає частину тексту як ціль для гіперпосилань в документі

<a href="#NAME"></a> Створює гіперпосилання на частину поточного документа

Форматування <p> Створює новий параграф

<p align=?> Вирівнює параграф відносно однієї із сторін документа, значення: left, right, или center

<br> Вставляє переведення рядка

<blockquote> </blockquote>

Створює відступи з обох сторін тексту

<dl></dl> Створює список описів

<dt> Визначає кожний з термінів списку

<dd> Описує кожне визначення

<ol></ol> Створює нумерований список

<li> Визначає кожний елемент списка і надає йому номер

<ul></ul> Створює ненумерований (маркірований) список

<li> Додає до кожного елемента списку маркер


103

<div align=?> Тег, який використовується для форматування великих блоків тексту HTML документа, також використовується у таблицях стилів

ГРАФІЧНІ ЕЛЕМЕНТИ <img src="name"> Додає зображення у HTML-

документ

<img src="name" align=?>

Вирівнює зображення до однієї із сторін документа, приймає значення: left, right, center; bottom, top, middle

<img src="name" border=?>

Встановлює ширину рамки навкруг зображення

<hr> Додає до HTML документа горизонтальну лінію

<hr size=?> Встановлює висоту (товщину) лінії

<hr width=?> Встановлює ширину лінії (можна вказати ширину у пік селях або процентах)

<hr noshade> Створює лінію без тіні

<hr color=?> Задає лінії певний колір. Значення кольору RRGGBB.

ТАБЛИЦІ <table></table> Створює таблицю

<tr></tr> Визначає рядок в таблиці

<td></td> Визначає окрему комірку в таблиці

<th></th> Визначає заголовок таблиці (нормальна комірка з відцентрованим жирним текстом)

Атрибути таблиці <table border=#> Задає товщину рамки таблиці


104

<table cellspacing=#> Задає відстань між комірками таблиці

<table cellpadding=#> Задає відстань між вмістом комірки і її рамкою

<table width=#> Встановлює ширину таблиці в пік селях або процентах від ширини документа

<tr align=?> або <td align=?>

Встановлює вирівнювання комірок в таблиці, приймає значення:

left, center, або right.

<tr valign=?> або <td valign=?>

Встановлює вертикальне вирівнювання для комірок таблиці, приймає значення: top, middle, або bottom.

<td colspan=#> Вказує кількість стовпчиків, які об’єднані в одній комірці (за замовчуванням 1)

<td rowspan=#> Вказує кількість рядків, які об’єднано в одній комірці (за замовчуванням 1)

<td nowrap> Не дозволяє програмі перегляду здійснювати перехід рядка у комірці таблиці

КАДРИ <frameset></frameset> Передує тегу <body> в

документі, який містить кадри

<frameset rows="value,value">

Визначає рядки в таблиці кадрів, висота яких визначена кількістю пік селів або у процентному відношенні до висоти таблиці кадрів

<frameset cols="value,value">

Визначає стовпчики в таблиці кадрів, ширина яких визначена кількістю пік селів або у процентному відношенні до ширини таблиці кадрів


105

<frame> Визначає поодинокий кадр або зону в таблиці кадрів

<noframes></noframes> Визначає, що буде показане у вікні броузера, якщо він не підтримує кадри

Атрибути кадрів <frame src="URL"> Визначає, який із HTML

документів буде показаний у кадрі.

<frame name="name"> Вкзує ім’я кадру або зони, яка дозволяє перенаправляти інформацію у цей кадр або зону з інших кадрів

<frame marginwidth=#> Визначає величину відступів по лівій і правій межі кадру: повинно дорівнювати або бути більшим 1

<frame marginheight=#>

Визначає величину відступів по верхній і нижній межі кадра; повинно дорівнювати або бути більшим 1

<frame scrolling=VALUE>

Вказує, чи буде виводитись смуга гортання в кадрі; значення

value може бути "yes," "no," або "auto". Значення за замовчеванням - auto.

<frame noresize> Забороняє міну розмірів кадра

ФОРМИ Для форм, що виконують які-небудь функції,

повинні бути запущені відповідні CGI скрипти на сервері. HTML тільки створює зовнішній інтерфейс форми

<form></form> Створює форми


106

<select multiple name="NAME" size=?></select>

Створює меню, яке гортається. Size встановлює кількість

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

<option> Визначає кожний окремий елемент меню

<select name="NAME"></select>

Створює маню, що спадає

<textarea name="NAME" cols=40 rows=8> </textarea>

Створює вікно для введення тексту. Columns вказує ширину вікна; rows вказує його висоту

<input type="checkbox" name="NAME">

Створює checkbox. За тегом слідує текст.

<input type="radio" name="NAME" value="x">

Створює radio кнопку. За тегом слідує текст.

<input type=text name="foo" size=20>

Створює рядок для введення тексту. Параметром Size вказується довжина у символах.

<input type="submit" value="NAME">

Створює кнопку “Прийняти”

<input type="image" border=0 name="NAME" src="name.gif">

Створює кнопку “Прийняти” з використанням зображення

<input type="reset"> Створює кнопку “Відмінити”


107

ДОДАТОК 2. ТАБЛИЦЯ КОЛЬОРІВ1 Назва кольору Red Green Blue Колірalicemblue F0 F8 FF antiquewhite FA EB D7 aqua 00 FF FF aquamarine 7F FF D4 azure F0 FF FF beige F5 F5 DC bisque FF E4 C4 black 00 00 00 blanchedalmond FF EB CD blue 00 00 FF blueviolet 8A 2B E2 brown A5 2A 2A burlywood DE B8 87 cadetblue 5F 9E A0 chartreuse 7F FF 00 chocolate D2 69 1E coral FF 7F 50 cornflowerblue 64 95 ED cornsilk FF F8 DC crimson DC 14 3C cyan 00 FF FF darkblue 00 00 8B darkcyan 00 8B 8B darkgoldenrod B8 86 0B darkgray A9 A9 A9 darkgreen 00 64 00 darkkhaki BD B7 6B darkmagenta 8B 00 8b darkolivegreen 55 6B 2F darkorange FF 8C 00 darkochid 99 32 CC darkred 8B 00 00

1 www.werbach.com.ua


108

darksalmon E9 96 7A darkseagreen 8F BC 8F darkslateblue 48 3D 8B darkslategray 2F 4F 4F darkturquoise 00 CE D1 darkviolet 94 00 D3 deeppink FF 14 93 deepskyblue 00 BF FF dimgray 69 69 69 dodgerblue 1E 90 FF firebrick B2 22 22 floralwhite FF FA F0 forestgreen 22 8B 22 fushsia FF 00 FF gainsboro DC DC DC ghostwhite F8 F8 FF gold FF D7 00 goldenrod DA A5 20 gray 80 80 80 green 00 80 00 greenyellow AD FF 2F honeydew F0 FF F0 hotpink FF 69 B4 indiandred CD 5C 5C indigo 4B 00 82 ivory FF FF F0 khaki F0 E6 8C lavender E6 E6 FA lavenderblush FF F0 F5 lawngreen 7C FC 00 lemonchiffon FF FA CD ligtblue AD D8 E6 lightcoral F0 80 80 lightcyan E0 FF FF lightgoldenrodyellow FA FA D2 lightgreen 90 EE 90


109

lightgrey D3 D3 D3 lightpink FF B6 C1 lightsalmon FF A0 7A lightseagreen 20 B2 AA lightscyblue 87 CE FA lightslategray 77 88 99 lightsteelblue B0 C4 DE lightyellow FF FF E0 lime 00 FF 00 limegreen 32 CD 32 linen FA F0 E6 magenta FF 00 FF maroon 80 00 00 mediumaquamarine 66 CD AA mediumblue 00 00 CD mediumorchid BA 55 D3 mediumpurple 93 70 DB mediumseagreen 3C B3 71 mediumslateblue 7B 68 EE mediumspringgreen 00 FA 9A mediumturquoise 48 D1 CC medium violetred C7 15 85 midnightblue 19 19 70 mintcream F5 FF FA mistyrose FF E4 E1 moccasin FF E4 B5 navajowhite FF DE AD navy 00 00 80 oldlace FD F5 E6 olive 80 80 00 olivedrab 6B 8E 23 orange FF A5 00 orengered FF 45 00 orchid DA 70 D6 palegoldenrod EE E8 AA palegreen 98 FB 98


110

paleturquose AF EE EE palevioletred DB 70 93 papayawhop FF EF D5 peachpuff FF DA B9 peru CD 85 3F pink FF C0 CB plum DD A0 DD powderblue B0 E0 E6 purple 80 00 80 red FF 00 00 rosybrown BC 8F 8F royalblue 41 69 E1 saddlebrown 8B 45 13 salmon FA 80 72 sandybrown F4 A4 60 seagreen 2E 8B 57 seashell FF F5 EE sienna A0 52 2D silver C0 C0 C0 skyblue 87 CE EB slateblue 6A 5A CD slategray 70 80 80 snow FF FA FA springgreen 00 FF 7F steelblue 46 82 B4 tan D2 B4 8C teal 00 80 80 thistle D8 BF D8 tomato FF 63 47 turquose 40 E0 D0 violet EE 82 EE wheat F5 DE B3 white FF FF FF whitesmoke F5 F5 F5 yellow FF FF 00 yellowgreen 9A CD 32


111

ДОДАТОК 3. ЗАВДАННЯ ДЛЯ САМОСТІЙНОГО ВИКОНАННЯ

“СТВОРЕННЯ ЕЛЕКТРОННОЇ ПУБЛІКАЦІЇ ДЛЯ МЕРЕЖІ ІНТЕРНЕТ” ВАРІАНТ 1. Рекомендації до виконання: 1. Здійснити в мережі Інтернет пошук інформації на задану тему. 2. Створити електронний журнал, зібравши знайдену інформацію у

єдиний сайт. Всі знайдені документи мають бути представлені в одному стилі (фон, колір літер та інші елементи оформлення) із застосуванням таблиці каскадних стилів.

3. Кожен документ повинен містити посилання на сайт, з якого він одержаний.

4. При оформленні дотримуватись стилю, адекватного тематиці створеного електронного видання.

ВАРІАНТ 2. Рекомендації до виконання: 1. Одержати набір WORD-документів у форматі .doc (документи

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

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

“ФОТОГАЛЕРЕЯ ДЛЯ МЕРЕЖІ ІНТЕРНЕТ” Рекомендації до виконання: 1. Сайт повинен містити фотогалерею за певною тематикою. 2. Для одержання фотозображень здійснити пошук в мережі Інтернет з

використанням інформаційно-пошукових систем (Rambler, Altavista, Yandex, Google, UAPortal та ін.) або виконати сканування фотографій і зберегти їх у графічному форматі.

3. Спроектувати Web-сайт, який відповідає таким вимогам: · на основній сторінці повинна бути відображена тема, якій

присвячена фотогалерея; · фотогалерея повинна складатись не менш, як із 10 фотографій; · всі фотографії повинні бути розміщені на основній сторінці; · кожна з фотографій повинна бути на основній сторінці

мінімізована, а за гіперпосиланням розкриватись повністю; · сайт має бути розроблений згідно з вимогами дизайну і логіки

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


112

· на другій сторінці сайта мають бути гіперпосилання на ресурси мережі (фотогалереї), присвячені тій самій тематиці.


113

ЗМІСТ ВСТУП .................................................. 3 РОЗДІЛ 1.ЕЛЕКТРОННИЙ ГІПЕРТЕКСТОВИЙ ДОКУМЕНТ ........... 5 РОЗДІЛ 2.ТИПИ WEB-САЙТІВ І ОЦІНКА ЇХ ЯКОСТІ ............ 8 РОЗДІЛ 3.ОСНОВНІ ПОНЯТТЯ МОВИ HTML .................... 12 РОЗДІЛ 4. СТРУКТУРНІ ТЕГИ ДОКУМЕНТІВ HTML І ФОРМАТУВАННЯ

ТЕКСТУ ................................................ 14 РОЗДІЛ 5. КОЛІР ФОНУ І ТЕКСТУ ......................... 21 РОЗДІЛ 6. СТИЛІ ЗАГОЛОВКІВ ............................ 25 РОЗДІЛ 7. СПИСКИ ...................................... 27 РОЗДІЛ 8. ТЕКСТОВІ ЕФЕКТИ ............................. 31 РОЗДІЛ 9. ГІПЕРТЕКСТОВІ ПОСИЛАННЯ ..................... 35 РОЗДІЛ 10. ГРАФІКА .................................... 40 РОЗДІЛ 11. ЗВУК У HTML-ДОКУМЕНТАХ ..................... 46 РОЗДІЛ 12. ТАБЛИЦІ .................................... 48 РОЗДІЛ 13. ФРЕЙМИ ..................................... 55 РОЗДІЛ 14. ФОРМИ ДЛЯ ОДЕРЖАННЯ ІНФОРМАЦІЇ ВІД КОРИСТУВАЧА

...................................................... 59 РОЗДІЛ 15. СТИЛІ ...................................... 63 РОЗДІЛ 16. ТЕГ <META> ................................. 70 РОЗДІЛ 17. ПІДГОТОВКА ЕЛЕКТРОННОЇ ПУБЛІКАЦІЇ У PDF-

ФОРМАТІ ............................................... 76 РОЗДІЛ 18.ОСНОВНІ ПРАВИЛА ДИЗАЙНУ ПРИ ОФОРМЛЕННІ HTML-

ДОКУМЕНТІВ ............................................ 79 РОЗДІЛ 19. ВИКОРИСТАННЯ JAVA-СКРИПТІВ ПРИ СТВОРЕННІ HTML-

ДОКУМЕНТА ............................................. 84 МЕТОДИЧНІ РЕКОМЕНДАЦІЇ ДО ВИКОНАННЯ ЗАЛІКОВОЇ РОБОТИ .. 91 ЛІТЕРАТУРА ............................................ 98 ДОДАТОК 1. ТАБЛИЦЯ ОСНОВНИХ ТЕГІВ МОВИ HTML .......... 100 ДОДАТОК 2. ТАБЛИЦЯ КОЛЬОРІВ .......................... 107 ДОДАТОК 3. ЗАВДАННЯ ДЛЯ САМОСТІЙНОГО ВИКОНАННЯ ....... 111


114

Матвієнко Оксана Володимирівна Бородкіна Ірина Лаврентіївна

Навчальне видання

Internet-технології: проектування Web-сторінки

Навчальний посібник

Internet-технології · 2009. 9. 20. · розмітки html. Мова html...

Documents

Transcript of Internet-технології · 2009. 9. 20. · розмітки html. Мова html...