- •2.1. Загальний огляд технологій створення інтерактивних
- •5.1. Особливості методичної системи вивчення основ
- •1 Розділ
- •1.1. Основні принципи побудови та функціонування мережі Internet
- •1.2. Форматування тексту мовою html
- •1.3. Використання гіперпосилань
- •1.5. Списки і таблиці у html-документах
- •1.6. Використання фреймів
- •1.7. Каскадні таблиці стилів (css)
- •1.8. Введення даних за допомогою форм
- •1.9. Розробка Web-сайтів
- •2 Розділ
- •2.1. Загальний огляд технологій створення інтерактивних Web-документів
- •2.2. Використання скриптів JavaScript
- •2.3. Використання рнр і MySql
- •Додатки Створення шкільної Intranet
1.3. Використання гіперпосилань
Гіперпосилання — це основа HTML. За допомогою гіперпосилань користувачі можуть переходити з однієї сторінки до іншої.
Існує три основних типи гіперпосилань: внутрішні, зовнішні та відносні.
Внутрішні гіперпосилання — це посилання на об'єкти в межах одного документа. З їх допомогою користувач може переміщатись всередині однієї Web-сторінки. Такі посилання доцільно використовувати на довгих сторінках, щоб мати можливість швидко переміщуватись між їх розділами.
Зовнішні гіперпосилання — це посилання на сторінки, розміщені на іншому Web-сервері.
Відносні або локальні посилання — це посилання на Web-сторінки, розміщені на тому ж сервері. Адреси цих посилань задаються відносно адреси Web-сторінки, на якій вони поміщені.
У HTML для зовнішніх гіперпосилань використовується синтаксис:
<А HREF="URL">Teкст посилання </А>
де URL — повна ареса документа, на який здійснюється посилання. Текст, поміщений у контейнер <А HREF="URL"> </A>, зображається в броузері з підкресленням та іншим кольором (найчастіше синім). Клацнувши на ньому лівою кнопкою миші, даємо вказівку броузеру завантажити сторінку, розміщену за адресою URL.
Наприклад:
<А HREF="http://www.firma.com/ibm/coiiiputers.html"> Комп'ютери компанії
IBM </A>
— створюється гіперпосилання на Web-сторінку, розміщену за адресою http://www.ibm.com/ibm/computers.html.
Зв'язуючи гіперпосиланнями сторінки одного сервера, немає необхідності включати в URL доменне ім'я. Наприклад:
<А HREF="computers.htm">Комп'ютери виробництва ІВМ</А>
— створюється гіперпосилання на файл computers. htm, який повинен знаходитися на тому самому сервері і в тому самому підкаталозі, що і файл, в якому знаходиться це гіперпосилання.
Якщо файл знаходиться в іншому підкаталозі, то необхідно вказати шлях до нього, наприклад:
<А HREF="ibm/computers.htm">Комп'ютери виробництва ІВМ</А>
Є й інші можливості для спрощення записів довгих адрес URL. Так, наприклад, HTML-код:
Лістинг 1.7.
<НТМL>
<HEAD>
<TITLE> Основні розділи Web-сайта НПУ імені М.П.Драгоманова</TITLE>
</HEAD>
<BODY>
<А HREF="http://www.npu.kiev.ua/REKTORAT/in-rek.htm">Peкторат</A>
<А HREF="http://www.npu. kiev. ua/FAKULT/in-fak. htm">Факультети</А>
<A HREF="http://www.при.kiev.ua/ASPIRANT/index.htm">Acпipaнтypa</A>
<A HREF="http://www.при.kiev.ua/ABITUR/abit-beg.htm">Aбітурієнту</A>
</BODY>
</HTML>
можна записати компактніше:
Лістинг 1.8
<HTML>
<HEAD>
<TITLE> Основні розділи Web-сайта НПУ імені М.П.Драгоманова</ТІТLЕ
<BASE HREF="htto://www.npu.kiev.ua/">
</HEAD>
<BODY>
<A HREF="REKTORAT/in-rek.htm">Peкторат</A>
<A HREF="FAKULT/in-fak. htm ">Факультети</А>
<A HREF="ASPIRANT/index. htm ">Аспірантура</А>
<A HREF="ABITUR/abit-beg. htm ">Абітурієнту</А>
</BODY>
</HTML>
Тут використовується дескриптор <BASE>, в якому вказано базову адрес} URL, відносно якої подаються всі інші відносні адреси Web-сторінок. Зазначимо, що цей дескриптор використовується всередині контейнера <HEAD> </HEAD>, областю дії його є вся сторінка.
Створюючи великі Web-сторінки, необхідно також забезпечити можливість для користувача легко переміщуватись з одного їх розділу до іншого. Це досягається завдяки внутрішнім гіперпосиланням. Для реалізації такого посилання необхідні два елементи: посилання, яке вказує, куди треба перейти, і мітка, яка фіксує місце переходу.
Посилання задається кодом:
<А HREF="# нaзвa мітки">Текст посилання</А>
Мітка також використовує контейнер <А></А> і задається так:
<А NAME ="назва мітки">текст</А>
Назва мітки — це довільний текст, який не появляється на екрані й однозначно визначає місце переходу. Якщо на сторінці є кілька міток, то всі вони повинні мати різні назви. Символ «#» при описі посилання вказує, що за ним записана назва мітки, а не назва файла.
Приклад використання внутрішніх гіперпосилань:
Лістинг 1.9.
<HTML>
<HEAD>
<TITLE>Колекція програм мовою VisualBasic</TITLE>
</HEAD>
<BODY>
До вашої уваги пропонуються програми мовою VisualBasic:
<BR>
<!--далі створюємо внутрішні гіперпосилання -->
<А HREF ="#графік">Лобудова графіків функцій</А><ВВ>
<А HREF ="#масив">Сортування масиву</А><ВВ>
<А HREF ="#рівняння">Розв'язування квадратних рівнянь</А>
<BR>
<Р>
<!-- далі описуємо місця, на які здійснюються посилання-->
<А NAME="графік"> Побудова графіків функцій - приклад програми</А>
<BR>
(текст програми)
<BR><BR>
<А NАМЕ="масив"> Впорядкування масиву - приклад програми</А>
<BR>
(текст програми)
<BR><BR>
<А NAМЕ="рівняння"> Розв'язування квадратних рівнянь – приклад програми </А>
<BR>
(текст програми)
</BODY>
</HTML>
Можна зробити так, щоб після натискування на деякому посиланні звучала музика або відтворювався відеофільм. Посилання на мультимедійні файли .avi, .wav створюються так само, як посилання на HTML-документи. В атрибуті HREF контейнера <А> </А> необхідно вказати ім'я файла, в якому міститься потрібна мелодія або відеофільм. Наприклад:
<Р> Натисніть <А HREF="my_music.wav">тyт</A>, щоб почути мою улюблену композицію
Файл my_music.wav повинен знаходитись на тому самому сервері, у тому самому каталозі, що і HTML-файл, з якого він викликається. Для створення гіперпосилань на файли мультимедіа, розміщені на інших серверах Internet, використовуються повні URL-адреси.
Часто виникає необхідність включити у Web-сторінку посилання на адресу електронної пошти. Для цього в атрибуті HREF необхідно задати адресу електронної пошти у вигляді «mailto: адреса». Наприклад, щоб створити посилання на адресу kito@npu. kiev. ua, необхідно у код сторінки помістити такий дескриптор:
<А HREF="mailto: kito@npu.kiev.ua">kito@npu.kiev.ua</A>
згідно з яким броузер відображає текст «kito@npu. kiev. ua» як гіперпосилання. Якщо клацнути на ньому лівою кнопкою миші, броузер відкриє поштову програму в режимі створення листа, і в полі «Адреса:» помістить адресу kito@npu. kiev. ua. Текст, що поміщається в контейнер <А></А>, може бути будь-яким, проте доцільно використовувати адресу E-mail, оскільки не всі користувачі сторінки можуть користуватися поштовими програмами, налагодженими на комп'ютері, з якого переглядається сторінка. їм необхідно прочитати реальну адресу електронної пошти.
Створення набору гіпертекстових сторінок Web-сайта освітнього закладу
Засвоївши використання на Web-сторінках гіперпосилань, можна створити більш функціональну версію Web-сайта освітнього закладу.
Рис. 1.10.
Головна сторінка може мати такий вигляд (рис. 1.10).
Код сторінки:
Лістинг 1.10
<НТМL>
<HEAD>
<TITLE>Fizmat home</TITLE>
<META content="text/html; charset=windows-1251"
http-equiv=Content-Type>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>фізико-математичний факультет ТДПУ
імені Володимира Гнатюка</Н1>
<Н2 ALIGN=CENTER>46003,м.Тернопіль,вул.Карпенка,тел. (0352)33-00-00</Н2>
<Р ALIGN=CENTER>
<А HREF="about. html">Про факультет </A>
<А HREF="news. html ">Новини </A>
<A HREF="activity. html ">Діяльність</АхЬг>
<A HREF="kafedra.html">!^Кафедри</A>
<A НРЕР="р1аns. html ">Навчальні плани</A>
<A HREF="students. html ">Студентські проекти</А>
</BODY>
</HTML>
На сторінку kafedra. html можна помістити інформацію про кафедри фа-культету, зокрема, про їх наукову та навчальну діяльність. Щоб користувач міг іегко переміщуватись по цій сторінці, на її початку помістимо просте меню, що буде складатися з набору внутрішніх гіперпосилань (рис. 1.11).
Код сторінки:
Лістинг 1.11
<HTML>
<HEAD>
<TITLE >Кафедри</ TITLE >
<МЕТА content="text/html; charset=windows-1251" http-
quiv=Content-Type> <BODY bgColor=#ffffff>
<H2 ALIGN=CENTER><FONT СОLOR="grееn"><І> Кафедри факультету
</I></FONT></H2>
<P>
<A НRЕF ="#математики">Математики </A><br>
<A НRЕF ="#фізики">Фізики</АхЬг>
<A НRЕF="#інформатики">Інформатики</А><Ьг>
<A НRЕF ="#аналізу">Математичного аналізу</Ах/Ьг>
<A NАМЕ="математики"><Кафедра математики</НЗ></А>
<А NАМЕ ="фізики"><НЗ>Кафедра фізики</НЗ></А>
<А NАМЕ ="інформатики"<HЗ>Кафедра інформатики</НЗх/А>
<А NАМЕ ="аналізу"<НЗ>Кафедра математичного аналізу</НЗ></А>
</BODY>
</HTML>
Рис 1.11.
1.4. Web-графіка
Важливу роль в оформленні Web-сторінок відіграють графічні зображення. Включення їх у HTML-документи дозволяє надати сторінці «настрою» (ліричного, гумористичного, ділового), подати інформацію, яку неможливо отримати з тексту, розбити сторінку на «теми», що дозволить користувачеві краще орієнтуватися в матеріалі. Для того, щоб сторінка подобалась відвідувачам, необхідно добитись оптимального співвідношення форми (дизайну) і змісту.
Швидкість появи зображення на екрані залежить від розміру файла зображення. Графіка, яка повільно завантажується, може «відлякати» відвідувачів сторінок. Для зменшення розміру файла необхідно використовувати зображення типу JPEG або GIF. Конвертацію графіки у ці формати можна здійснити за допомогою редакторів растрових зображень. Допустимими зображеннями є такі, розмір яких не перевищує 40-50 Кбайт.
На HTML-сторінках графіку можна розміщувати різними способами.
Вбудовані зображення — це графічні зображення, які завжди залишаються в одному і тому самому місці сторінки (справа від тексту чи іншого об'єкта що безпосередньо передує зображенню) і не обрамлюються текстом. Для гого, щоб помістити на Web-сторінці вбудоване зображення використовується елемент <IMG SRC=URL_зображення>. Дескриптор <IMG> є одиночним. В атрибуті 3RC (від слова source) необхідно вказати повну або відносну URL-адресу файла зображення. Наприклад:
<Р>Це зображення нової моделі процесора корпорації Intel
<IMG SRC="intel.jрg">цей текст розміщується одразу після малюнка
— розміщення на сторінці зображення, файл якого знаходиться в тому самому каталозі, що і сам HTML-файл (рис. 1.12).
За замовчуванням текст вирівнюється по нижній частині зображення. Для зміни типу вирівнювання використовують дескриптор IMG з атрибутом ALIGN. Нижче наведені значення, які можна присвоїти цьому атрибуту:
ТОР — вирівнює текст по верхньому краю зображення;
MIDDLE — вирівнює текст по середній частині зображення;
BOTTOM — вирівнює текст по нижньому краю зображення.
Рис. 1.12.
Наведемо код документа, що вміщує три зображення, для кожного з яких використовується один з варіантів вирівнювання. На рис. 1.13 подано Web-сторінку, створену на основі цього коду.
Лістинг 1.12.
<HTML>
<HEAD>
<TITLE> Використання атрибута ALIGN в дескрипторі IMG</TITLE>
</HEAD>
<BODY>
<P><IMG SRC="intel.jpg" ALIGN=TОP>
Цей текст вирівнюється по верхньому краю зображення </Р>
<PXIMG SRC="intel.jpg" ALIGN=MIDDLE>
Цей текст вирівнюється по середній частині зображення</Р>
<P><IMG SRC="intel.jpg" ALIGN=B0TTОM>
Цей текст вирівнюється по нижньому краю зображення</Р>
</BОDY>
</HTML>
Рис. 1.13
Плаваючі зображення — це зображення, що не прив'язуються до одного рядка тексту, а ніби «плавають» вздовж одного з полів і обрамлюються текстом.
Для створення плаваючих зображень використовується дескриптор <IMG> з атрибутом ALIGN. Для плаваючих зображень значення цього атрибута можуть бути LEFT (зображення плаває вздовж лівого краю тексту) або RIGHT (зображення плаває вздовж правого краю тексту). Наприклад:
<IMG SRC="amd.jpg" ALIGN=LEFT>
У лістингу подано код HTML-документа, в якому поміщено плаваюче зображення.
Лістинг 1.13
<HTML>
<HEAD>
<TITLE> Використання атрибута ALIGN в дескрипторі IMG</TITLE>
</HEAD>
<BODY>
<P><IMG SRC="intel.jpg" ALIGN=LEFT>
Цей текст розміщується праворуч від зображення і нижче.
Цей текст розміщується праворуч від зображення і нижче.
Цей текст розміщується праворуч від зображення і нижче.
Цей текст розміщується праворуч від зображення і нижче.
Цей текст розміщується праворуч від зображення і нижче.
Цей текст розміщується праворуч від зображення і нижче.
Цей текст розміщується праворуч від зображення і нижче.
Цей текст розміщується праворуч від зображення і нижче.
</BODY>
</HTML>
На рис. 1.14 подано інтерпретацію цього коду броузером. У дескрипторі <IMG> можна використовувати атрибути HEIGHT і WIDTH для задания висоти та ширини зображення. За допомогою цих атрибутів «повідомляється» розмір зображення. Це дозволяє броузеру підготувати макет сторінки та розмістити текст до того, як будуть завантажені всі зображення. За допомогою цих атрибутів можна також змінювати розміри зображення. Так, наприклад, для збільшення зображення необхідно в атрибутах HEIGHT і WIDTH вказати більші величини, ніж реальні розміри зображення (які можна визначити з допомогою графічного редактора). Зауважимо, що зменшувати розмір зображення таким методом не доцільно, оскільки розмір файла, а отже і час завантаження при цьому не змінюються.
Рис. 1.14
За допомогою атрибута BGCOLOR дескриптора <BODY> можна визначити колір фону сторінки, вказавши у ньому шестицифрове шістнадцяткове число. Цей атрибут має такий формат:
<BODY BGC0L0R=#rrggbb>
rr, gg, bb — двоцифрові шістнадцяткові числа, які визначають відповідно червону, зелену та голубу складові кольору фону.
Наприклад:
<BоY BGC0L0R=#000000><!--задається чорний колір фону-->
<BODY BGC0L0R=#ffffff><!--задається білий колір фону -->
<BODY BGC0L0R=#ff0000><!--задається червоний колір фону-->
<BODY BGC0L0R=#00ff00><!--задається зелений колір фону -->
<BODY BGC0L0R=#0000ff><!--задається синій колір фону -->
Для задания основних кольорів можна використовувати також зарезервовані імена (таблиця 1.4).
Таблиця 1.4. Зарезервовані імена кольорів
КОЛІР |
ШІСТНАДЦЯТКОВИЙ ЕКВІВАЛЕНТ |
|
BLACK (чорний) |
#000000 |
|
MAROON (темно-бордовий) |
#800000 |
|
GREEN (зелений) |
#008000 |
|
OLIVE (оливковий) |
#808000 |
|
NAVY (темно-синій) |
#000080 |
|
PURPLE (фіолетовий) |
#800080 |
|
TEAL (зеленувато-блакитний) |
#008080 |
|
GRAY (сірий) |
#808080 |
|
SILVER (сріблястий) |
#С0СОСО |
|
RED (червоний) |
#FF0000 |
|
LIME (лимонний) |
#00FF00 |
|
YELLOW (жовтий) |
#FFFF00 |
|
BLUE (синій) |
#0000FF |
|
"FUCSHIA (фуксія) |
#FF00FF |
|
AQUA (морська хвиля) |
#00FFFF |
|
WHITE (білий) |
#FFFFFF |
|
Наприклад,
<BODY BGCOLOR="RED">
<! -- задається червоний колір фону -->
Для створення графічного фону використовується атрибут BACKGROUND дескриптора <BODY>. У цьому атрибуті потрібно вказати ім'я файла графічного зображення. Наприклад:
<BODY BACKGROUND="my_picture.gif">
Колір основного тексту можна змінити за допомогою атрибута TEXT дескриптора <BODY>. Колір задається так, як і у випадку зміни кольору фону.
Зображення-гіперпосилання — це зображення на Web-сторінці, клацнувши на якому, можна відкрити нову Web-сторінку або службу Internet. Наприклад, можна помістити на Web-сторінці зображення поштової скриньки, клацнувши на якому користувачі зможуть відправляти повідомлення електронної пошти. HTML-код зображення-гіперпосилання має вигляд:
<А HREF="URL"><IMG SRC"URL-файла зображення"></А>
Із ціллю швидшого завантаження Web-сторінки має сенс створювати зменшені копії зображень (мініатюри зображень), які є гіперпосиланнями на відповідні їм зображення-оригінали. Мініатюри завантажуються швидко, даючи користувачеві уявлення про зображення-оригінали. Доступ до зображення-оригіналу можна отримати у будь-який момент, клацнувши лівою кнопкою миші на зображенні-гіперпосиланні.
Щоб використовувати мініатюри, необхідно мати дві копії зображення — велике зображення-оригінал і зменшене зображення. Для зменшення розмірів зображень використовують можливості графічних програм. Щоб зв'язати мініатюру з оригіналом необхідно помістити дескриптор, що задає мініатюру всередині дескриптора <А HREF> </A>, який є гіперпосиланням на велике зображення, наприклад:
<А HREF="big.gif"><IMG SRC="small. gif"></A>
Тут задано вказівку броузеру розмістити на Web-сторінці зображення (фай small, gif), що є гіперпосиланням на зображення, задане файлом big. gif.
Web-сайт навчального закладу: графічна версія
Помістимо на головній сторінці фотографію навчального корпусу. Крім того, заголовок цієї сторінки можна також виконати в графічному редактор та помістити його на сторінку у вигляді графічного зображення (рис. 1.15).
Рис. 1.15
Фотографію корпусу опрацьовано за допомогою фільтрів графічного редактора Adobe Photoshop і збережено у форматі gif.
Код сторінки:
Лістинг 1.14
<НТМL>
<HEAD>
<TITLE>Fizmat home</TITLE>
<МЕТА content="text/html; charset=windows-1251"
http-equiv=Content-Type>
</HEAD>
<BODY bgColor=#ffffff>
<IMG SRC="logo.gif"> <!--зображення заголовка -->
<p align=center> <!--цей дескриптор необхідний для вирівнювання наступного зображення по центру вікна броузера-->
<IMG SRC="main_foto.gif" height=104 width=353 >
<!- помішуємо вбудоване зображення - фотографія корпусу-->
<Р align="center">
<А HREF="about.html"> Про факультет<А/>&пЬзр;&пЬзр;&пЬзр;
<А HREF="about.html"> Новини <A/>  :
<А HREF="about.html"> Діяльність<А/><Ьг>
<А HREF="about.html"> Kафедри<A/>
<А HREF="about.html"> Навчальні плани<A/>
<А HREF="about.html"> Студентські проекти <А/>
</BODY>
</HTML>
Контрольні запитання
1. Які формати графічних файлів використовують на Web-сторінках і чому?
2. Як помістити на Web-сторінку графічне зображення?
3. Назвіть призначення атрибутів (параметрів) тега <А>.
4. Як створити зображення-гіперпосилання?
5. Для чого використовується альтернативний текст?
Практичні завдання
1. Вставте на сторінку декілька зображень.
2. Для кожного зображення застосуйте певний тип вирівнювання.
3. Змініть ширину та висоту зображень.
4. Встановіть відступи від зображення до тексту.
5. Збільшіть товщину рамки, що обмежує зображення.
6. Створіть для зображень альтернативний текст.
7. Створіть сторінку № 2, помістіть на ній зображення, яке буде відігравати роль гіперпосилання на сторінку № 1.