Додаток 2_MУ_HTML_Web сайт

Наприклад:

Вправа 3. Внесіть у file2.htm зміни, додавши на Web – сторінку ненумерований список (на свої улюблені предмети), нумерований список (на улюблені захоплення), використовуючи різні види маркерів.

Вправа 4. Створить на Web – сторінці приклад з вкладеними списками (при необхідності підкорегуйте список іспитів за дисциплінами):

<HTML>

<HEAD>

<TITLE> Робота зі списками </TITLE> </HEAD>

<BODY BGCOLOR="black" TEXT = "red">

<LH><FONT SIZE=5><B> Іспити на 1 – му курсі: </LH></B></Font> <OL TYPE = I>

<LI> <U> Іспити у 1-му семестри: </U>

<LI> Історія України <LI> Політекономія <LI> Філософія

</OL>

</OL>

</BODY>

</HTML>

Збережіть цей файл під новим ім’ям, наприклад, file3.htm Перегляньте цей файл у браузері!

Список означень задають тегом <DL>…</DL>. Списки означень також називають словниками спеціальних термінів (глосаріями). Маркери та нумерацію в ціх списках не використовують. Список складається з термінів, що визначаються та відповідних означень. Терміни, що визначаються починаються тегом <DT>, а означення – тегом <DD> (теги що закриваються можна не використовувати). Означення зображаються на екрані з виступом від лівого краю. Наприклад:

11

Вправа 5. Створіть на Web – сторінці приклад зі списком означень. Збережіть цей файл під новим ім’ям, наприклад, Primer1.htm

2.3 Створення таблиць

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

Таблиці створюють за допомогою таких тегів:

<TABLE атрибути>

<TC> Заголовок таблиці </TC> або <CAPTION>…</CAPTION> <TR><TH>…</TH></TR>

<TR><TD>…</TD></TR>

<TR><TD>…</TD></TR>

</TABLE>

Для створення таблиці використовується парний тег

<TABLE>...</TABLE>. Атрибути тега <TABLE>:

1.BORDER – для створення рамки таблиці. Значенням цього атрибуту є товщина зовнішньої рамки у пікселях, наприклад, BORDER=2 (значення, яке дорівнює 0 вказує на відсутність рамки).

2.BORDERCOLOR – задає колір рамки, наприклад BORDERCOLOR = “BLUE” (тут синій).

3.ALIGN – для вирівнювання таблиці у вікні браузера. Має значення –

LEFT, CENTER, RIGTH.

4.WIDTH, HEIGTH – для завдання ширини і висоти таблиці у пікселях або у відсотках від розміру усього екрана. Наприклад, WIDTH = 300 –

12

задає ширину таблиці 300 пікселів, WIDTH = 50% - задає ширину сторінки півсторінки у горизонтальному напрямку.

Для створення заголовку таблиці застосовують тег CAPTION з параметром ALIGN, наприклад:

<CAPTION ALIGN = “bottom”> Це моя таблиця </CAPTION> - дозволяє розташувати заголовок таблиці під таблицею (знизу);

<CAPTION ALIGN = “top”> Це моя таблиця </CAPTION> - дозволяє розташувати заголовок таблиці над таблицею (зверху).

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

Теги <TR>, <TH>, <TD> можна не закривати.

Атрибути для тегів <TR>, <TH>, <TD>:

1.ALIGN – для вирівнювання тексту в комірці по горизонталі. Має значення – LEFT (за замовченням), CENTER, RIGTH.

2.VALIGN – для вирівнювання тексту в комірці по вертикалі. Має

значення TOP, BOTTOM та MIDDLE (вирівнювання по середині).

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

Застосовуючи параметри WIDTH і SIZE можна всередині таблиці провести лінії різної довжини та товщини. Наприклад:

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

Для створення порожньої комірки, можна:

-вказати порожній тег <TD></TD>;

-або використати параметр &nbsp: <TD>&nbsp</TD> (комірки з невидимим змістом).

Для об’єднання комірок використовують атрибути COLSPAN (об’єднання комірок одного рядка) та ROWSPAN (об’єднання комірок одного стовпця). Наприклад: COLSPAN =2 – дозволяє об'єднати дві комірки одного рядка.

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

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

13

Вправа 6. Створить на Web – сторінці таблицю з розкладом занять на будь-який день тижня. Наприклад:

Розклад занять студентів 1 курсу ФЕФ

При розробці складних таблиць доцільно спочатку зобразити їх на папері та розписати теги.

Для даного прикладу таблиця матиме такий вигляд: <TABLE>

</TABLE>

Текст у редакторе Notepad: <HTML>

<HEAD>

<TITLE> Робота з таблицями </TITLE> </HEAD>

<BODY TEXT = "red">

<TABLE BORDER=2 BGCOLOR="lime">

<TC><FONT SIZE=4 COLOR=navy><B> Розклад занять студентів 1 курсу ФЕФ</B></TC>

<TR><TH rowspan=2>Пара<TH colspan=3>Групи <TR><TH>11<TH>12<TH>13 <TR><TH>1<TD>Математика, 1-17т.<TD>Філософія, 1-11

т.<TD>Культурологія, 1-11 т.

<TR ALIGN=CENTER> <TH ROWSPAN=2>II <TD COLSPAN=2>Іноземна мова, 5-12т.<TD>Інформатика, 5-9т.

<TR><TD>Інформатика, 13-17т.<TD>Математика, 13-17т.<TD>Філософія, 10-17т.

14

<TR><TH>III<TD COLSPAN=3 ALIGN=CENTER>Політекономія, Л., 1-5т. <TR><TH>IY<TD>&nbsp<TD>&nbsp<TD>&nbsp

</BODY>

</HTML>

Збережіть цей файл під новим ім’ям, наприклад, Primer2.htm

Вправа 7. Внесіть у file3.htm зміни, додавши на Web – сторінку таблицю з оцінками за іспити у 1 та 2 семестрі на 1 курсі (у вправі 7 приведено лише фрагмент файла - самостійно доповніть конфігурацію таблиці):

<CENTER> <TABLE BORDER=3

BGCOLOR="yellow"

BORDERCOLOR="green"> <TC><I>Мої оцінки за два семестри:</I></TC> <TR><TH>Навчальні дисципліни</TH> <TH>І семестр</TH>

</TR>

<TR><TH ALIGN="left">Інформатика</TH> <TD>4</TD>

</TR>

<TR><TH ALIGN="left">Вища математика</TH> <TD>5</TD>

</TR>

<TR><TH ALIGN="left">Культурологія</TH> <TD>4</TD>

</TR>

<!--Далі доповніть список дисциплін самостійно-->

</TABLE>

</CENTER><P>

Збережіть внесені зміни у file3.htm. Перегляньте цей файл у браузері!

Питання для самоконтролю

1.Яке призначення тега FONT?

2.Яких значень можуть набувати параметри тега FONT?

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

4.Як створити ненумерований список?

5.Як створити нумерований список?

6.Як створити список означень?

7.Яке призначення тега ТАВLЕ?

8.Які параметри може мати тег ТАВLЕ?

12.Яка особливість пари тегів <РRЕ>...</РRE>?

15

3.Спецефекти на Web-сторінках

3.1Адреси файлів

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

SRC = "http://www.polynet.lviv.ua/ourpage.htm".

Для доступу до файлів на локальному диску використовують протокол доступу:

file: SRC = "fі1е:///диск:/шлях до файлу". Наприклад, SRC= "file:///d:/mycatalog/mypage.htm".

Назву протоколу можна інколи не писати, наприклад, SRC = "с: / windows98/forest .bmp ".

Якщо графічні чи інші файли є в тому ж каталозі, що основний htmlфайл, то достатньо зазначити лише назву файла, наприклад, SRC = "myfoto.gif".

Якщо файл є в будь-якому сусідньому каталозі images, то шлях до нього подають так: "../images/myioto.gif".

Отже, тег IMG може мати такий вигляд:

<IMG SRC="С:/windows98/forest.bmp" ALT="JIic">.

3.2 Графічні та відеозображення

Графічні зображення, такі як фотографії, картинки, піктограми тощо, зберігаються на серверах в окремих файлах з розширеннями bmp, jpg, gif та іншими і відображаються на web-сторінці за допомогою тега <ІМG> з параметрами:

<ІМG SRC="адреса графічного файлу"

АLТ = "альтернативний текст" ALIGN="left”

BORDER=15

WIDTH=240 НЕІGHT=200>

Дія тега. Обов'язковим є лише перший параметр SRC. Альтернативний текст - це текст, який виводитиметься замість картинки, якщо браузер не може прийняти графічний файл або якщо режим відображення графіки вимкнено.

Атрибути тегу <ІМG>:

1.АLIGN - задає місце розташування картинки на екрані,

2.WIDTH і НЕІGHT - її розміри за шириною і висотою в пікселях або відсотках.

3.BORDER=" товщина рамки в пікселях" - для створення рамки навколо

16

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

4.HSPACE = "кількість пікселів" – дозволяє зробити вільний простір праворуч і ліворуч від картинки, яку обгортає текст.

5.VSPACE = "кількість пікселів" - дозволяє створити вільний простір над і під рисунком:

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

<IMG DYNSRC=" адреса відеофайлу">

Вправа 8. Внесіть у file2.htm зміни, додавши на Web – сторінку своє фото (або будь-яку картинку).

3.3 Гіпертекстові посилання та якоря

Гіперпосилання є двох видів:

1)на файл;

2)на будь-яке місце на певній сторінці:

• початок сторінки (top),

• кінець сторінки (bottom),

• позначений текст.

Гіперпосилання вставляють за допомогою парного тега:

<А HREF="адреса файлу"> текст посилання </А>.

Замість адреси можуть бути слова top, bottom чи текст, що є позначкою.

Гіперпосиланням може бути текст або картинка.

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

Мене звуть <А HREF = "file3.htm"> Віктор </А>.

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

Параметри LINK, VLINK, ALINK тега BODY

Колір гіперпосилання визначають у тезі BODY параметрами:

Як будь-яке графічне зображення зробити гіперпосиланням? Для цього в середині тега <А>...</А> потрібно використати тег IMG. Наприклад, щоб фотографія Віктора, що є у файлі "Viktor.gif", була в рамці й стала гіперпосиланням на файл file3.htm, пишуть так:

17

<А HREF = “file3.htm”>

<IMG SRC = “Viktor.gif” BORDER =8> </A>

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

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

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

<А NAME="ім’я якоря”></A>.

Наприклад, якщо з деякого місця перехід має виконуватися на початок сторінки, то в те місце html-файла, що відповідає точці посилання, вводять:

<А NAME="noчаток”></A>.

Аналогічно позначають будь-яке місце в кінці файла: <А NAME="кінець></A>.

Якір можна кинути в будь-якому місці тексту так: <А NAME="моя позначка"></А>.

Тепер на сторінці розміщують гіперпосилання на створені позначки (якори). Для посилання на якір у потрібному місці сторінки використовують ім’я якоря зі значком #:

<А HREF= "#ім’я якоря"> текст гіперпосилання </A>.

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

Атепер можна перейти <А HREF="#початок"> на початок </А> сторінки! На екрані браузера отримаємо речення з гіперпосиланням:

А тепер можна перейти на початок сторінки!

Аналогічно створюється гіперпосилання на кінець сторінки: Перехід <А HREF="#кінець"> на кінець сторінки! </А>.

Гіперпосилання на будь-яке місце в тексті може виглядати так: <А HREF="#моя позначка"> Цікаве місце! </А>.

Вправа 9. Внесіть у створені вами файли зміни, додавши на Web – сторінки гіперпосилання у вигляді тексту, картинки, а також на будь-яке місце у документі File2.htm.

18

3.4 Динамічні ефекти

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

Ефект створюється за допомогою парного тега

<MARQUEE>...</MARQUEE>, а саме:

<MARQUEE BGCOLOR="green" HEIGHT = 40>

Запрошую на свою Web-сторінку!</MARQUEE>

Текст "Запрошую на свою Web-сторінку!" буде рухатись у смузі справа наліво, заходитиме за край екрана і з'являтиметься справа. Цей тег варто застосовувати до заголовків сторінки.

Атрибути тегу <MARQUEE>:

1.HEIGHT ="висота в пікселях" – задає висоту смуги.

2.BGCOLOR ="колір тла" – задає колір тла смуги.

3.BEHAVIOR = "alternate" - ефект відбивання від країв екрана.

4.BEHAVIOR = "slide" - зупиняє рядок біля лівого краю екрана.

5.DIRECTION = "right" - забезпечує ефект руху у протилежний бік.

6.LOOP= n, де n - кількість проходів. Цей параметр обмежує кількість проходів.

7.HSPASE і VSPACE – дають можливість відцентрувати смугу.

8.SCROLLAMOUNT = n, де п - конкретне значення, яке вибирають з діапазону від 1 (повільно) до 10 (швидко) – задає швидкість руху.

Зауваження. Інші динамічні ефекти створюють за допомогою процедур з використанням мов програмування Visual Basic Script чи JavaScript. Немає єдиного стандарту мови HTML. Деякі теги чи їхні параметри не діють у всіх браузерах. Деякі теги і параметри для різних браузерів називаються порізному.

УВАГА! Якщо в написанні тега, назви параметра чи в його значенні допущено синтаксичну помилку, то тег чи параметр не діятимуть.

Вправа 10. Внесіть у створені вами файли зміни, додавши на Web – сторінки різні динамічні ефекти.

Питання для самоконтролю

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

2.Які параметри може мати тег IMG?

3.За допомогою якого тега вставляють гіперпосилання?

4.Яке призначення параметрів LINK, VLINK, ALINK?

5.Як деяке графічне зображення зробити гіперпосиланням?

7.Які є види посилань у межах одної web-сторінки?

1.Як створити динамічний ефект рухомого тексту?

2.Які ви знаєте параметри рухомого тексту?

19

4. Форми

4.1 Поняття про форми

Форма являє собою декілька полів, де користувач може ввести деяку інформацію, або вибрати яку-небудь опцію. Після того, як користувач відправить інформацію, вона обробляється програмою (CGI – скриптом), яка розміщується на сервері. Скорочення CGI (Common Gateways Interface) означає «загальноприйнятий інтерфейс шлюзів».

Форми передають інформацію програмам – обробником у вигляді пар

[ім’я змінної] = [значення змінної]. Html – документ може містити в собі декілька форм, однак форми не повинні знаходиться одна всередині другої.

Форма – це блочний елемент, який описується парним тегом

<FORM…> ….</FORM>.

Атрибути тега <FORM…>:

1.Action – обов’язковий атрибут, визначає URL, який прийме та обробить дані форми.

2.Method – визначає способи передачі даних обробником (за допомогою якого метода протоколу передачі гіпертекстів).

Має 2 значення: METHOD = GET (використовується за замовченням) та METHOD = POST. Значення GET вказує, що дані будуть передані програмі (або сценарію) CGI. У цьому випадку атрибут ACTION= містить адресу URL цієї програми. Якщо вказано POST, то дані, які уводяться користувачем, відправляються електронною поштою. Атрибут ACTION= у цьому випадку повинен містити адресу електронної пошти з вказівкою протоколу mailto:.

3.Enctype – визначає, яким чином дані із форми будуть закодовані для передачі обробнику. За замовченням передбачається ENCTYPE = application/x-www-form-urlencoded, але, якщо форма призначена для обробки вручну, краще використовувати тип Mime text/plain. Приклад:

<FORM ACTION=MAILTO:ALEKS@MAIL.RU ENCTYPE=TEXT/PLAIN>

……………

</FORM>

4.2Основні теги для визначення полів форми

Всередині елемента форми розташовуються поля форми

<TEXTAREA>, <SELECT>, <INPUT>.

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

1. <TEXTAREA> - парний тег, визначає області для уведення багатострокової текстової інформації. Текст, розміщений в середині даного тега являє собою зміст вікна за замовченням. Його можна відредагувати або стерти.

20