Практична робота № з

Мета. Створити сторінку з гіперпосиланнями і динаміч­ними ефектами.

Хід роботи

1. Відкрийте свою web-сторінку або створіть нову.

2. Запишіть свій голос за допомогою програми Фонограф у звуковий файл. Вставте звук в основну сторінку. Можете записати у файл розповідь про своє життя, нав­чання, проведення вільного часу тощо. Якщо у вас немає змоги записати свій голос у файл, то використайте будь-який звуковий файл.

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

4. Застосуйте гіперпосилання для переходу на початок та кінець сторінки.

5. Застосуйте тег marquee до одного з заголовків і поекспериментуйте із його параметрами. Форми

Форми додаються у текст за допомогою кон­тейнера <FORM> з атрибутами:

• ACTION — для визначення адреси URL програми, якій відправляються дані;

• METHOD — для визначення способу передачі даних — для значення цього атрибуту POST броузер відділяє дані від URL, для значення GET —додає до URL (при відправленні даних за поштовою адресою).

Поля форми додаються за допомогою різнома­нітних дескрипторів, наприклад, <INPUT> з ат­рибутами:

• ALIGN — для вирівнювання зображення для графічних керуючих кнопок з можливими значеннями TOP, MIDDLE, BOTTOM, LEFT, RIGHT;

• CHECKED — для визначення вибраної позиції при ініціалізації;

• MAXLENGTH — для визначення макси­мальної довжини тексту;

• NAME — для визначення імені, за яким можна звертатися до даних;

• SIZE — для визначення ширини у симво­лах видимого тексту;

• VALUE — для визначення початкового зна­чення тексту;

• TYPE — для опису типу даних з можливи­ми значеннями:

• BUTTON — кнопка (VALUE=«напис на кнопці»);

• CHECKBOX — поле для виставлення прапорця;

• FILE — визначення імені файла;

• HIDDEN — захований текст;

• IMAGE — графічний образ на кнопці.

• TEXT — поле для введення рядка тексту;

• PASSWORD — поле пароля (набрані символи відображаються зірочками);

• RADIO — залежні кнопки;

• RESET — кнопка відновлення початкових зна­чень;

• SUBMIT — кнопка відсилання.

Залежні кнопки додаються дескриптором <INPUT> з атрибутом TYPE=RADIO, спільним значенням атрибуту NAME, атрибутом VALUE для надання значення, атрибутом CHECKED для ви­ділення кнопки, вибраної у початковий момент роботи з документом HTML.

Список (для вибору) задається контейнером <SELECT> з дескриптором <OPTION> для виз­начення окремого елемента списку. Список буде розкриватися, якщо з дескриптора <SELECT> видалити атрибут MULTIPLE.

Наприклад

<HTML>

<HEAD> <TITLE> Приклад форми

</TITLE></HEAD>

<BODY> <FORM><PRE>

Прізвище: <INPUT NAME=NAME1 TYPE=TEXT SIZE=20>

Ім'я: <INPUT NAME=NAME2 TYPE=TEXT SIZE=20>

По батькові: <INPUT NAME=NAME3 TYPE=TEXT SIZE=20>

Пароль: <INPUT NAME=NAME4 TYPE=PASSWORD SIZE=20>

Файл: <INPUT NAME=NAME5 TYPE=FILE SIZE=20>

Ініціалізація: <INPUT NAME=NAME6 TYPE=RESET VALUE=Biдновити>

Сховано: <INPUT NAME=NAME7 TYPE=HIDDEN VALUE=0>

Уподобання: <INPUT NAME=NAME8 TYPE=IMAGE SRC=GLOBE.GIF>

Воїн запасу: <INPUT NAME=NAME9 TYPE=CHECKBOX>

Стать:

<INPUT NAME=SEX TYPE=RADIO VALUE="чоловіча"> чоловіча

<INPUT NAME=SEX TYPE=RADIO VАLUE="жіноча" CHECKED>жіноча

<INPUT NAME=HELP TYPE=BUTTON VALUE="Довідка">

Освіта: <SELECT NAME=EDUCATION MULTIPLE SIZE=4>

<OPTION> незакінчена середня

<OPTION> середня

<OPTION> незакінчена вища

<OPTION> вища

</SELECT>

Автобіографія

<TEXTAREA NAME=AUTO ROWS=9 COLS=60> Викладіть автобіографію:

</TEXTAREA>

<INPUT NAME=SEND TYPE=SUBMIT VАLUE="Відіслати">

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

Контейнер <TEXTAREA> додає текстову об­ласть з атрибутами:

• ROWS — кількість рядків;

• COLS — кількість стовпчиків.

Всередині контейнера розташовується текст, який демонструється у початковий момент робо­ти з документом HTML

Фрейми

1. Поняття про фрейми. Якщо матеріали web-сайту структуризовані логічно за темами і мають базуватися на де­кількох сторінках з навігацією за допомогою гіперпосилань, то такий сайт реалізовують із застосуванням фреймів. Фрейм у перекладі з англійської означає кадр, рамка, прямокутна об­ласть. Фрейми поділяють вікно броузера на частини, в яких відображають зміст сторінок сайту. Кожній сторінці має відповідати свій html-файл. Кожна сторінка повинна мати логіч­ний заголовок.

Наприклад, типовим є сайт, де вікно броузера поділене на дві вертикальні області. У вужчій (до 25% від ширини вік­на броузера) лівій області відображають зміст сайту у вигляді гіперпосилань на конкретні сторінки, а в іншій - вибрану ко­ристувачем сторінку. Такий підхід до конструювання сайту дає змогу постійно бачити зміст сайту і переглядати його сторінки у будь-якій послідовності. Зміст чи у цьому випадку увесь лі­вий фрейм називають навігаційною панеллю. Навігаційну па­нель можна створити у верхній частині вікна броузера, справа чи де завгодно. Часто у верхній частині створюють третій вузь­кий фрейм, де розташовують заголовок сайту, логотип фірми, рекламу, елементи WordArt, ActiveX чи Flash тощо.

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

2. Файлова структура сайту з фреймами. Для створення сайту із застосуванням фреймів потрібно скласти як мінімум три html-файли: один основний і два чи більше допоміжні. Один допоміжний файл потрібний для заповнення стартовою інформацією лівого фрейму, інший - правого. Основний файл призначений для опису розташування фреймів у вікні броузера. Тут описується структура фреймів, зазначаються адреси html-файлів для кожного фрейму, а також пояснюється, о має відображатися на екрані, якщо якийсь давній броузер не підтримує фреймів.

3. Основний html-файл. Оскільки основний файл запускає сайт, то його прийнято називати index.html.

Приклад 1. Розглянемо типовий вигляд основного файла:

<HTML>

<HEAD>

<ТІТLЕ>Це мій сайт з фреймами </TITLE>

</HEAD>

<FRAMESET COLS="25% ,75% ">

<FRAME SRC="leftframe.html"

NAME= "left" <!-або "лівий" або інша назва фрейму->

SCROLLING="no" <!-або "yes" або "auto"->

FRAMEBORDER="l" <!-або "О" межа фреймів є чи ні ->

BORDER = "15" <!-товщина межі->

MARGINHIGHT= "10" <!- відступи від країв-> MARGINWIDTH=" 10" NORESIZE <!-не можна пересовувати межу->

BORDERCOLOR = "red" >

<FRAME SRC = "rightframe.html"

NAME="right" <!-або "правий" тощо->

</FRAMESET> <NOFRAME> <!-Текст, що відображатиметься у броузері, який не підтримує фреймів, наприклад:->

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

</NOFRAME>

</HTML>

Пояснимо дію використаних тегів та їхніх параметрів. Для поділу вікна броузера на декілька частин використову­ють тег-контейнер <FRAMESET параметри>... </FRAMESET>

Параметрів є два: COLS і ROWS. Параметр COLS приз­начений для поділу вікна на вертикальні області (колонки), а ROWS - на горизонтальні. Розміри областей задають у відсот­ках до всього вікна, фіксовані - у пікселях. Наприклад, COLS = "25%, 75% " означає, що лівий фрейм займатиме чверть вікна на будь-якому моніторі.

Можна писати також COLS = "1*, 3*", де 1* саме тут означає одну з чотирьох частин екрана, або COLS == "2*, З*", де 2* означає дві з п'яти вертикальних частин екрана.

У фіксованому заданні COLS = "100,*", число 100 означає 100 пікселів, а * - решту екрана.

Більш складні конфігурації фреймів створюють шляхом поділу на фрейми деякого раніше створеного фрейму. У цьому випадку теги FRAMESET вкладають один в один, на­приклад, так:

<FRAMESET COLS = "25%, 75%, ">

<FRAME описуємо лівий фрейм>

<FRAMESET ROWS= "25%, 75% >

<FRAME описуємо верхній правий фрейм>

<FRAME описуємо нижній правий фрейм>

</FRAMESET>

</FRAMESET>

У тезі <FRAME параметри> користувач описує конкрет­ний фрейм. Обов'язковими тут є параметр SRC зі значенням адреси стартового html-файлу і NAME, значенням якого є назва фрейму. Цю назву придумує користувач, запам'ятовує її, оскільки вона використовуватиметься далі як значення па­раметра TARGET тега <А>.

Призначення деяких інших параметрів такі:

SCROLLING	Задає наявність чи відсутність смуг прокручування у вікні фрейму
FRAMEBORDER	Задає наявність меж між фреймами
BORDER	Задає ширину межі у пікселях
MARGIN	Задає величину відступів зверху і від бокових меж фрейму
NORESIZЕ	Забороняє змінювати розміри фрей­му у вікні броузера.

4. Допоміжні HTML-файли. Коли основний файл спро­ектовано, створюють файли для кожного фрейму.

Нехай файл leftframe.html призначений для підтримки лівого фрейму і нехай він містить зміст сайту у вигляді текс­тових чи графічних гіперпосилань. Тег гіперпосилання має містити параметр TARGET, значенням якого є назва фрейму, що була зазначена в параметрі NAME з основного файлу. Цей параметр дає змогу пояснити броузеру, у якому фреймі слід відображати деяку сторінку сайту, що відповідає цьому гіперпосиланню. Нехай деяка сторінка має відображатися у правому фреймі. Гіперпосилання можна оформити різними способами: у вигляді звичайних текстових абзаців, заголов­ків, списків чи одностовпчикової таблиці.

Приклад 2. Файл leftframe.html може мати такий вигляд:

<HTML>

<HEAD>

<ТІТLЕ> Це мій лівий фрейм</ТITLE>

</HEAD>

<BODY задаємо параметри стартової сторінки>

<НЗ> Сайт Васі Квакіна</НЗ><ВR>

<Н4>

<А HREF="f ile1.html" TARGET="right">

Моя біографія </А> <BR>

<А HREF="file2.html" TARGET="right">

Мої захоплення </А> <BR>

<А HREF="file3.html" TARGET="right">

Мої університети </А> <BR>

<А HREF="file4.html" TARGET="right">

Моя адреса </А> <BR>

</BODY>

</HTML>

Другий допоміжний файл, нехай rightframe.html, виз­начає зміст правого фрейму у момент відкривання сайту. Цей файл може містити будь-який текст чи графіку. Тут варто по­дати красиво оформлений заголовок сайту, рекламну інфор­мацію тощо. Як такий файл можна, наприклад, використати filel.html. Тоді у правому фреймі у момент відкривання сайту буде відображатися перша сторінка проекту.

Приклад 3. Файл right.html може мати такий вигляд:

<HTML>

<HEAD><TITLE> Це правий фрейм</ТІТLЕ>

<BODY задаємо параметри для правої сторінки>

<Н2>ЗАПРОШУЄМО НА САЙТ ВАСІ КВАКІНА </Н2>

</BODY>

</HTML>

На цьому проектування сайту з фреймами закінчується. Залишилося створити файли filel.html, file2.html, file3.html, fiJe4.html тощо з описами робочих сторінок сайту.