Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
П Р А К Т И Ч Н А Р О Б О Т А № 6
Мета роботи: навчитись створювати веб-сторінки засобами мови HTML і текстового редактора Блокнот, вивчити засоби веб-дизайну.
Хід роботи
Занотуйте тему і мету роботи у зошит. Складіть звіт про виконання роботи.
Завдання 1. Створіть документ програми Блокнот з ім’ям Практ_17.
Послідовно виконуючи вправи цього завдання, розробіть свій веб-сайт.
МЕТОДИЧНІ РЕКОМЕНДАЦІЇ
Команди мови HTML називаються тегами. Теги бувають одинарними і парними. Більшість тегів є парними, як наприклад, тег означення HTML-файлу: <HTML> ... </HTML>.
Усередині парного тегу <HEAD>...</HEAD> створюють заголовок документа. Основною частиною заголовка документа є заголовок Windows-вікна, який задають усередині парного тегу <TITLE>...</TITLE>. Усередині парного тегу <BODY параметри>...</ВОDY> тобто програмують те, що має відображатися у вікні.
Основні параметри тега BODY:
BACKGROUND = "шлях до графічного файлу“ - задає картинку для фона;
BGCOLOR = "blue" — задає колір фону (у даному разі блакитний), якщо не використовується картинка як фон;
TEXT = "red" — задає колір тексту (у даному разі червоний) на сторінці.
Тег <!- - текст --> позначає коментар. Текст усередині тега виводитися на екран не буде. Коментар можна писати також у середині парного тега <COMMENT> текст</COMMENT>.
Вправа 1. Створіть папку з ім’ям Практ_17 у своїй папці на сервері, в ній документ програми Блокнот з таким текстом:
<HTML> <HEAD>
<TITLE> Про себе докладніше </TITLE> </HEAD>
<BODY>
(текст - автобіографічна довідка про себе)
</BODY> </HTML>
Збережіть документ з ім’ям file2.htm у своїй папці Практ_17 на сервері (рис.17.1).
Аналогічно створіть файл з ім’ям file3.htm у своїй папці Практ_17 такого змісту:
<HTML> <HEAD>
<TITLE> Про друзів і мої захоплення </TITLE> </HEAD>
<BODY>
(текст – про своїх друзів і свої захоплення)
</BODY> </HTML>
Перегляньте ці файли. Якщо існують помилки, то необхідно відкрити меню Вид=>Просмотр HTML- кода, виправити помилки і зберегти зміни, потім меню Вид =>Обновить. Пам’ятайте, що мова HTML використовує латинські символи.
Рис.17.1. Збереження файлу з розширенням .htm.
Дизайн тексту для Web-сторінок
Спочатку розглянемо основні одинарні теги для розміщення тексту:
<Р> — цей тег означає початок нового абзацу, але його прийнято записувати в кінці попереднього. Наступне речення починатиметься з нового, вирівняного по лівому краю, абзацу без відступу.
<BR> — наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка.
<HR> — буде проведена горизонтальна лінія.
Розглянемо парні теги форматування символів тексту:
<В> текст </В> — жирний шрифт тексту;
<І> текст </І> — шрифт-курсив;
<U> текст </U> — підкреслений шрифт;
<SUB> текст </SUB> — нижній індекс, наприклад, Н20;
<SUP> текст </SUP> — верхній індекс;
<BIG> текст </ВIG> — великий шрифт;
<SMALL> текст </SMALL> — малий шрифт;
<ЕМ> текст </ЕМ> — виділений курсивом текст (те саме, що тег І);
<В> <І> текст </І></В> — жирний курсив. Цей приклад демонструє застосування принципу вкладення тегів.
Зауважимо, що тег <Р> може використовуватися як парний: <Р> текст абзацу </Р>. Теги заголовків наведені у табл.17.1.
|
Таблиця 17.1 |
|
|
Теги |
Результат у вікні |
|
<Н1>Заголовок 1</Н1> |
Заголовок 1 |
|
<Н2>Заголовок 2</Н2> |
Заголовок 2 |
|
<Н3>3аголовок 3</Н3> |
Заголовок 3 |
Заголовок за замовчуванням вирівнюється по лівому краю вікна.
Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання:
<CENTER> елемент </CENTER> — вирівнювання по центру;
<LEFT> елемент </LEFT> — вирівнювання по лівому краю;
<RIGHT> елемент </RIGHT> — вирівнювання по правому краю.
Тег задання параметрів шрифту FONT
Щоб задати назву конкретного шрифту, його розмір і колір, використовують парний тег FONT з параметрами
FACE-тип шрифту,
SIZE - розмір шрифту,
COLOR – колір шрифту,
наприклад,
<FONT FACE = "Monotype Corsiva, Verdana, Courier" SIZE = +2 COLOR = "green"> текст </FONT>.
Якщо на комп'ютері клієнта встановлено шрифт Monotype Corsiva, то він буде застосований до даного тексту, якщо цей шрифт відсутній - браузер застосує шрифт Verdana, далі - Courier, інакше — деякий стандартний шрифт, наприклад, Times New Roman.
Розміри символів шрифту можуть бути від 1 до 7. Розмір 7 є найбільшим. Число 2 як значення параметра SIZE означає другий розмір шрифту, число +2 означає, що розмір шрифту має бути на дві одиниці більший, ніж стандартний, тобто п'ятий, число -2 означатиме перший розмір шрифту — на дві одиниці менший, ніж стандартний. Колір тексту буде зелений. Імена основних кольорів мовою HTML наведені у табл.17.2.
|
Таблиця 17.2 |
|
|
Ім’я кольору |
Назва кольору українською мовою |
|
black |
чорний |
|
green |
зелений |
|
navy |
темно-синій |
|
teal |
бірюзовий |
|
silver |
сірий |
|
lime |
яскраво-зелений |
|
blue |
синій |
|
aqua |
блакитний |
|
magenta |
малиновий |
|
olive |
темно-зелений |
|
purple |
бузковий |
|
gray |
темно-сірий |
|
red |
червоний |
|
yellow |
жовтий |
|
fushsia |
рожевий |
|
white |
білий |
Колір можна задавати шістнадцятковими кодами, особливо відтінки в графічних редакторах прийнято задавати шістнадцятковими кодами, наприклад, один з відтінків сірого кольору має код #ff7800.
Вправа 2. Створіть текстовий файл file1.htm такого змісту.
<HTML>
<HEAD> <TITLE> Веб-сторінка Ваше прізвище та ім’я</TITLE> </HEAD>
<BODY BGCOLOR ="yellow" TEXT = "navy">
<CENTER><H1><B> Привіт!</В> </Н1>
<H2> <I>Я студент (введіть назву вузу)</I></Н2><P>
<H3><B> Навчаюсь на (введіть назву факультету, дайте характеристику
факультету, спеціальності, чому ви навчаєтесь саме на цьому факультеті - 20 речень )</B></НЗ><HR>
Група (введіть назву групи)<P>
Моя e-mail адреса: <FONT SIZE = +3 COLOR = "magenta"> <B><I>
s_nesterenko @ukr.net </FONT></I></B></CENTER><HR>
</BODY> </HTML>
Перегляньте файл як веб-сторінку. Виправте помилки. Збережіть зміни.
Створення списків та їх дизайн
Є три типи списків: маркований, нумерований, означення. Список може мати заголовок, який охоплюють тегами <LH>...</LH>, наприклад,
<LН> Це заголовок списку </LН>.
Маркований список утворюють за допомогою парного тега <UL> ...</UL> і одинарних тегів <LІ>, наприклад, так:
<LH> Мої улюблені предмети: </LH>
<UL>
<LI> економічна інформатика
<LI> англійська мова
<LI> вища математика
</UL>
На екрані отримаємо:
Мої улюблені предмети:
Нумерований список створюють за допомогою парного тега <OL>... </OL> з необов'язковим параметром TYPE і одинарних тегів <LI> так:
<LH> Мої улюблені предмети:</LH>
<OL TYPE="1">
<LI> економічна інформатика
<LI> англійська мова
<LI> вища математика
</OL>
На екрані отримаємо:
Мої улюблені предмети:
Значення "і" чи "І" параметра TYPE задає нумерацію римськими малими (і, іі, ііі, iv,...) чи великими (І, II, III, IV, ...) цифрами, а значення "а" чи "А" — латинськими малими (a, b, c, d, ...) чи великими (А, В, С,...) літерами.
Створення таблиць та їх дизайн
Таблиці створюють за допомогою таких тегів:
<TABLE параметри> <ТС> Заголовок таблиці </ТС>
Теги рядків і комірок
</TABLE>
Для заповнення комірок таблиці використовують такі парні теги (зауважимо, що закриваючі теги можна опускати):
<TR>...</TR> — формують рядок таблиці;
<ТН> текст </ТН> — формують комірку - заголовок рядка чи стовпця;
<ТD> текст </ТD> — формують текст кожної комірки.
Заголовки рядків та стовпців виводитимуться жирнішим шрифтом.
Щоб об’єднати у рядку декілька послідовних комірок, наприклад, дві в одну, у відповідному першому тезі <ТН> чи <TD> записують параметр ROWSPAN=2.
Щоб об’єднати у стовпці дві комірки в одну, використовують параметр COLSPAN=2.
Колір рамки таблиці задають параметром BORDERCOLOR= "колір рамки", а колір фона комірок — параметром BGCOLOR="колір фону". Товщину рамки в пікселах задають параметром BORDER="товщина рамки, наприклад, 3". Якщо значенням параметра є число нуль або параметра немає, то рамка буде невидимою.
Вправа 3. Створіть на Web-сторінці таблицю-витяг з табеля успішності за два перші семестри з трьох предметів: інформатики, англійська мова та вища математика, вносячі такі зміни у файл file1.htm перед тегом </BODY>.
<CENTER>
<TABLE BORDER=6 BGCOLOR="aqua" BORDERCOLOR="red" >
<CENTER><TC> Моя успішність:</TC></CENTER>
<TR BGCOLOR="white"> <TH> Назва дисципліни</TH>
<TH>І семестр </TH>
<TH>II семестр </TH> </TR>
<TR> <TH>Економічна інформатика </TH>
<TD ALIGN="center">5</TD>
<TD ALIGN="center">4</TD></TR>
<TR> <TH>Англійська мова</ТН>
<TD ALIGN="center">4</TD>
<TD ALIGN="center">5</TD></TR>
<TR> <TH>Вища математика</TH>
<TD ALIGN="center">4</TD>
<TD ALIGN="center">5</TD></TR>
</TABLE></CENTER><HR>
Збережіть змінений файл з ім’ям file1.htm у своїй папці Практ_17. Перегляньте цей файл, у разі необхідності усуньте помилки. Проаналізуйте зміни.
Вирівнювання елементів
За замовчуванням більшість елементів на сторінці, наприклад, текст, таблиці, списки, текст у комірках таблиці, браузер вирівнює по лівому краю вікна документа чи коміркики. Часто тип вирівнювання потрібно змінити. Лінії можна вирівнювати по центру екрана чи по правому краю. Таблиці вирівнюють відносно положення на екрані або відносно тексту, який її оточує. Текст у комірках таблиці вирівнюють по центру, по лівому чи правому краю у горизонтальному чи вертикальному напрямках. Для цього до об’єктів застосовують теги вирівнювання CENTER, LEFT, RIGHT або в тегах <HR>, <TABLE>, <TH>, <TD> та в інших використовують параметр ALIGN зі значеннями "left" — зліва, "center" — по центру, "right" — справа, "top" — вгорі, "middle" — посередині, "bottom" — внизу. Останні три значення може мати також параметр VALIGN.
Для вдалого розташування таблиць чи рисунків варто поекспериментувати з параметрами WIDTH і HEIGHT, які задають ширину і висоту елемента в пікселах або відсотках до розмірів усього екрана, наприклад, <TABLE WIDTH=300> задає ширину таблиці 300 пікселів; <TABLE WIDTH=50%> задає ширину таблиці у півсторінки у горизонтальному напрямку.
Для проведення ліній різної довжини і товщини застосовують параметри WIDTH і SIZE, наприклад, тег <HR SIZE=30 COLOR="red"> замість звичайної лінії визначає червону лінію завтовшки ЗО пікселів.
Додання графічних та відеофайлів
Графічні зображення (фотографії, картинки тощо) зберігаються на серверах в окремих файлах з розширеннями bmp, jpg, gif та іншими і відображаються на Web-сторінці за допомогою команди, що описується одинарним тегом <IMG> з параметрами:
<IMG SRC="адреса графічного файлу" ALT= "альтернативний текст" ALIGN="left" WIDTH=240 HEIGHT=200>
Обов'язковим є лише перший параметр SRC. Альтернативний текст — це текст, який виводитиметься замість картинки, якщо браузер не може прийняти графічний файл або якщо режим відображення графіки вимкнено. Параметр ALIGN задає місце розташування картинки на екрані, а параметри WIDTH і HEIGHT — її розміри за шириною і висотою в пікселах або відсотках сторінки.
Зображення можна подати у рамці (що рекомендують робити), якщо його використовуватимуть як гіперпосилання. Для створення рамки навколо зображення призначений параметр BORDER="товщина рамки в пікселах".
Праворуч і ліворуч від картинки, яку обтікає текст, можна зробити вільний простір: HSPACE = "кількість пікселів". Можна створити вільний простір також над і під рисунком: VSPACE = "кількість пікселів".
За допомогою тега IMG можна вставити також відеофільм, який запускатиметься в момент відкриття Web-сторінки:
<IMG DYNSRC="адреса відео-файлу">.
Адреси файлів
Для доступу до файлів на локальному диску використовують протокол доступу file: “file:///диск:/ шлях до файлу".
Наприклад, "file:///d:/МоиВеб/page1.htm". Назву протоколу можна інколи не писати, наприклад, SRC="c:/Рисунки/Саша.bmp".
Якщо графічні чи інші файли є в тому ж каталозі, що ы головний html-файл, то достатньо зазначити лише назву файлу, наприклад, SRC= "Саша.bmp". Якщо файл є в деякому каталозі images, але в тому ж надкаталозі, то шлях до нього можна подати так: "../images/myfoto.gif". Отже, тег IMG може мати, наприклад, такий вигляд:
<IMG SRC="MyFoto.bmp" ALT= "Моє фото" ALIGN="left" WIDTH=180 HEIGHT=200>
Вправа 4. Вставте цей тег
<IMG SRC="MyFoto.gif" ALT= "Моє фото" ALIGN="left" WIDTH=180 HEIGHT=200>
у код вашої веб-сторінки у файлі file1.htm, попередньо розмістивши у папці Практ_17 ваше фото у файлі з ім’ям MyFoto.gif.
Код веб-сторінки на даний час може бути таким:
<HTML>
<HEAD> <TITLE> Веб-сторінка Ваше прізвище та ім’я</TITLE> </HEAD>
<BODY BGCOLOR ="yellow" TEXT = "navy">
<IMG SRC="MyFoto.gif" ALT= "Foto" ALIGN="left" width=180 height=200>
<CENTER><H1><B> Привіт!</В> </Н1>
<H2> <I>Я студент (введіть назву вузу)</I></Н2><P>
<H3><B> Навчаюсь на (введіть назву факультету, дайте характеристику факультету, спеціальності, чому ви навчаєтесь саме на цьому факультеті - 20 речень )
</B></НЗ><HR>
Група (введіть назву групи)<P>
Моя e-mail адреса: <FONT SIZE = +3 COLOR = "magenta"> <B><I> (наприклад, s_nesterenko@ukr.net )</FONT></I></B></CENTER><HR>
<CENTER>
<TABLE BORDER=6 BGCOLOR="aqua" BORDERCOLOR="red" >
<CENTER><TC> Моя успішність: </TC></CENTER>
<TR BGCOLOR="white"> <TH> Назва дисципліни</TH>
<TH>І семестр </TH>
<TH>II семестр </TH> </TR>
<TR> <TH>Економічна інформатика </TH>
<TD ALIGN="center">5</TD>
<TD ALIGN="center">4</TD></TR>
<TR> <TH>Англійська мова</ТН>
<TD ALIGN="center">4</TD>
<TD ALIGN="center">5</TD></TR>
<TR> <TH>Вища математика</TH>
<TD ALIGN="center">4</TD>
<TD ALIGN="center">5</TD></TR>
</TABLE></CENTER><HR>
</BODY></HTML>
Додання гіперпосилань
Гіперпосилання є двох різновидів: 1) на файл; 2) на деяке місце на даній сторінці: початок сторінки (top), кінець сторінки (bottom), на позначений текст.
Гіперпосилання вставляють за допомогою парного тега <А>...</А> з параметром HREF = "адреса файлу". Тут замість адреси можуть стояти слова top чи bottom чи текст, що є позначкою.
Гіперпосиланням може бути текст або деяке графічне зображення. Розглянемо випадок, коли гіперпосиланням є текст. Нехай фразу "Про себе" (див.текст файлу file1.htm) потрібно зробити гіперпосиланням на файл "file2.htm", що містить додаткові відомості. Це можна зробити так:
<А HREF = "file2.htm"> Про себе докладніше </А>.
У результаті цього на Web-сторінці слова Про себе докладніше буде підкреслене і зображене іншим кольором. Колір Гіперпосилання визначається у тезі BODY параметром LINK = "колір".
Вправа 5. У тексті коду веб-сторінки у файлі file1.htm вставте гіперпосилання на файл file3.htm. Для цього потрібно після тексту про групу вставити рядок
<A HREF = "file3.htm"> Про друзів та захоплення </A> <P> <HR>
Тепер розглянемо, як деяке графічне зображення зробити гіперпосиланням. Для цього в середині тега <А>...</А> потрібно використати тег IMG. Наприклад, щоб Ваша фотографія , що є у файлі з ім’ям MyFoto.gif, була в рамці й стала гіперпосиланням на файл file2.htm, пишуть так:
<A HREF = “file2.htm”> <IMG SRC = “MyFoto.gif” BORDER =4> </A>
Будь-яку піктограму (картинку) можна вставити автономно чи як гіперпосилання, оскільки вона зберігається також у графічному файлі.
Вправа 6. У тексті коду веб-сторінки у файлі file1.htm вставте графічне гіперпосилання на файл file2.htm. Для цього потрібно після тегу </BODY>
вставити рядок
<A HREF = “file2.htm”> <IMG SRC = “MyFoto.gif” BORDER =4 > </A>
Клацнувши на Web-сторінці на фотографії, відкрийте файл file2.htm з додатковою інформацією, а потім поверніться у файл file1.htm.
Розглянемо другий тип гіперпосилань — посилання в межах сторінки (їх ще називають закладками). Якщо потрібно з деякого місця веб-сторінки перейти до її початку, то в тексті коду в цьому місці потрібно вставити <А HREF="#top'' > текст гіперпосилання </А>. Аналогічно при необхідності переходу в кінець веб-сторінки використовують тег:
вставити <А HREF="#bottom'' > текст гіперпосилання </А>.
Для переходу в деяке інше місце, вводять тег, який називається якорем. Якір можна „кинути” в будь-якому місці тексту за допомогою того ж тега <А>...</А> з параметром NAME="#мояпозначка">:
<А NAME="#мояпозначка"> Як я вчусь</А>.
Далі на сторінці розміщують гіперпосилання на створені позначки (якори):
<А HREF="#top" або "#bottom'' або "#мояпозначка"> текст гіперпосилання </А>.
Якщо одна сторінка займає декілька екранів, то в кінці сторінки доречно вставити гіперпосилання для переходу на її початок, наприклад, так:
<А HREF=="#top" > на початок </А> .
Вправа 7. У тексті коду веб-сторінки у файлі file1.htm вставте гіперпосилання на початок веб-сторінки та на таблицю Моя успішніть. Код може виглядати так, як на рис.17.2.
Рис.17.2. Код веб-сторінки з гіперпосиланнями на файл та на певне місце веб-сторінки.
Поняття про динамічні ефекти
Динамічними називаються ефекти, коли графічні зображення на Web-сторінці змінюються з часом, елементи сторінки змінюють розміри або навіть свій зміст після клацання над ними мишею, текст «біжить» уздовж екрана тощо.
Розглянемо ефект рухомого тексту у смузі, що має висоту HEIGHT ="висота в пікселах" і фон BGCOLOR = "колір фону". Ефект створюється за допомогою парного тега <MARQUEE>...</MARQUEE>, а саме:
<MARQUEE BGCOLOR="aqua" HEIGHT = 40> Особиста сторінка Ваше прізвище та ім’я</ MARQUEE>.
Зауваження. За допомогою цього тега можна заставити рухатись і графічний об’єкт. Перевірте це самостійно.
Текст "Особиста сторінка Ваше прізвище та ім’я" буде пробігати у смузі справа наліво, заходитиме за край екрана і з'являтимуться знову справа. Даний тег рекомендують застосовувати до заголовків сторінки.
Ефект відбивання від країв екрана забезпечує параметр BEHAVIOR = "alternate", а зупинити рядок біля лівого краю екрана може значення цього параметра "slide". Значення "right" параметра DIRECTION забезпечить ефект руху у протилежний бік.
Обмеження кількості проходів задається параметром LOOP=число, де цифра - кількість проходів. Смугу можна центрувати за допомогою параметрів HSPASE і VSPACE. Швидкість руху задає параметр SCROLLAMOUNT=число, де число – величина швидкості руху, де конкретне значення вибирають з діапазону від 1 (повільно) до 10 (швидко).
Вправа 8. У тексті коду веб-сторінки у файлі file1.htm вставте рухомий рядок, наприклад, такого змісту:
1) <MARQUEE BGCOLOR="aqua" HEIGHT = 40 LOOP=5> Приватна сторінка Ваше прізвище та ім’я</ MARQUEE>.
2) Далі змініть цей рядок на такий:
<MARQUEE BGCOLOR="aqua" HEIGHT = 50 LOOP=4 DIRECTION =”rihgt” SCROLLAMOUNT=5> <FONT FACE = "Courier" SIZE = +4 COLOR = "red"> Особиста сторінка Ваше прізвище та ім’я </FONT></MARQUEE>
перегляньте веб-сторінку.
3) Ще раз внесіть зміни (рис.17.3):
<MARQUEE BGCOLOR="aqua" HEIGHT = 50 LOOP=4 BEHAVIOR = "alternate" SCROLLAMOUNT=3> <FONT FACE = "Courier,Monotype Corsiva" SIZE = +3 COLOR = "magenta"> Особиста сторінка Ваше прізвище та ім’я </FONT></MARQUEE>
і перегляньте веб-сторінку.
4) І нарешті внесіть такі зміни:
<MARQUEE BGCOLOR="aqua" HEIGHT = 40 LOOP=5 BEHAVIOR = "slide" SCROLLAMOUNT=5> <FONT FACE = "Monotype Corsiva,Courier" SIZE = +5 COLOR = "red"> Особиста сторінка Ваше прізвище та ім’я </FONT></MARQUEE>
перегляньте веб-сторінку і зробіть висновки.
На рис.17.4 наведено вигляд веб-сторінки, код якої міститься у файлі file1.htm після виконання восьми вправ цього завдання.
Рис.17.3. Створення коду рухомого рядка у файлі file1.htm.
Рис.17.4. Вигляд веб-сторінки, код якої міститься у файлі file1.htm після виконання восьми вправ цього завдання.
Завдання 2. Послідовно виконуючи вправи цього завдання, удоскональте свій веб-сайт шляхом використання фреймів.
МЕТОДИЧНІ РЕКОМЕНДАЦІЇ
Використання фреймів
Фрейм – це частина вікна браузера, може бути оформлена рамкою, в якій можна переглядати окремо від інших частин певні веб-сторінки. Поділ вікна браузера на фрейми виконується за допомогою спеціальних тегів. Парний тег <FRAMESET параметри > …</FRAMESET> задає кількість вертикальних чи горизонтальних фреймів та їх розмір. Одинарний тег <FRAME параметри> визначає, що буде відображатись у даному фреймі і яке ім’я матиме фрейм (хоча ім’я можна в деяких випадках не задавати). Створення фреймової структури вікна браузера зазвичай виконується в окремому файлі і код дещо відрізняється від раніше розглянутих кодів веб-сторінок.
Приклади:
1) Створюються три вертикальні фрейми: 1 - 25% від горизонтального розміру вікна браузера з ім’ям "left”, в ньому буде відображатись веб-сторінка, код якої міститься у файлі з ім’ям ="А.HTMl"; 2 - 25% від горизонтального розміру вікна браузера з ім’ям "center”, в ньому буде відображатись веб-сторінка, код якої міститься у файлі з ім’ям ="В.HTM"; 3 - решта 50 % від горизонтального розміру вікна браузера з ім’ям "right”, в ньому буде відображатись веб-сторінка, код якої міститься у файлі з ім’ям ="С.HTMl". Код створення такої структури має вигляд:
<frameset cols="25%, 25%,*" >
<frame src="a.htm" name="left”>
<frame src="b.htm" name="center">
<frame src="с.htm" name="right">
</frameset>
2) Створюються один горизонтальний фрейм і два вертикальні фрейми: 1 - 10% від вертикального розміру вікна браузера з ім’ям "center”, в ньому буде відображатись веб-сторінка, код якої міститься у файлі з ім’ям ="А.HTM"; 2 - 25% від горизонтального розміру вікна браузера з ім’ям "left”, в ньому буде відображатись веб-сторінка, код якої міститься у файлі з ім’ям ="В.HTM"; 3 - решта 75 % від горизонтального розміру вікна браузера з ім’ям "right”, в ньому буде відображатись веб-сторінка, код якої міститься у файлі з ім’ям ="С.HTM". Код створення такої структури має вигляд:
<frameset rows="10%, *" >
<frame src="a.htm" name="center”>
<frameset cols="25%, *" >
<frame src="b.htm" name="left">
<frame src="с.htm" name="right">
</frameset></frameset>
Вправа 9. Створіть фреймову структуру вікна браузера у файлі з ім’ям Index.htm у відповідності до наведеного на рис.17.5 коду. Цей файл буде головним, завантажувальним файлом. Він визначає два вертикальні фрейми з іменами „left” та „right”. У лівому фреймі буде відображатись файл з ім’ям Menu.htm (його ще потрібно створити), а у правому фреймі буде відображатись вже існуючий файл file1.htm.
Вправа 10. Спроектуйте файл Menu.htm як такий, що містить гіперпосилання на вже існуючі файли file1.htm. file2.htm, file3.htm та MyFoto.gif. Причому, при клацанні на гіперпосиланні потрібна веб-сторінка має відображатись у правому фреймі (рис.17.6). Для цього використовується параметр target="ім’я фреймуt" тегу гіперпосилання <A> .. </A>. Таким чином, веб-сайт буде складатись з кодів шести файлів папки Практ_17 (рис.17.7).
Рис.17.5. Створення вертикальних фреймів. Код файла Index.htm
Рис.17.6. Код файла Menu.htm
Рис.17.7. Файли папки Практ_17.
Відкрийте файл Index.htm і перегляньте веб-сайт, активізуючи гіперпосилання і аналізуючи функціонування веб-сайту. У разі необхідності виправте помилки . Вигляд веб-сторінки, код якої зберігається у файлі Index.htm, має бути схожий на наведений на рис.17.8.
Рис.17.8.Вигляд веб-сторінки, код якої зберігається у файлі Index.htm.
Завдання 2. Захистіть виконану роботу.
Перелік питань до захисту практичної роботи