Файл: Опорний_кнспект.pdf

Найбільш важливий параметр — SRC (скорочення від слова source). Досить часто в тегу <FRAME> задається єдиний параметр SRC.

Наприклад:

<FRAME SRC="url">.

 Значення параметра SRC визначає URL-адрес документа, який буде завантажений спочатку в даний фрейм. Зазвичай така адреса записується як ім'я HTML-файла, розташованого в тому ж самому каталозі, що і основний документ. Тоді рядок визначення фрейма виглядатиме, наприклад, так:

<FRAME SRC="sample.htm">.

Зверніть увагу, що будь-який HTML-файл, заданий в описі фрейма, повинен бути повним HTML-документом, а не фрагментом. Це означає, що документ повинен мати теги HTML, HEAD, BODY і так далі.

Звичайно, як значення SRC може бути задана будь-яка допустима URL-адрес. Якщо, наприклад, фрейм використовується для відображення зображення у форматі GIF, яке розташовується на сервері видавництва книги, то слід записати:

<FRAME SRC="http://www.bhv.ru/example.gif">.

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

 Параметр NAME визначає ім'я фрейма, яке може використовуватися для посилання до даного фрейма. Зазвичай посилання задається з іншого фрейма, розташованого на тій же самій сторінці. Наприклад:

<FRAME SRC="sample.htm" NAME="Frame_1">.

Такий запис створює фрейм з ім'ям "Frame_1", на який може бути виконана посилання. Наприклад:

<A HREF="other.htm" TARGET="Frame_1">Натисніть тут для завантаження документа other.htm у фрейм з ім'ям Frame_1</A>.

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

 Параметри MARGINWIDTH і MARGINHEIGHT дають можливість встановлювати ширину полів фрейма. Записується це таким чином:

MARGINWIDTH="value"

де "value" — абсолютне значення в пікселах. Наприклад:

<FRAME MARGINHEIGHT= "5" MARGINWIDTH= "7">.

Даний фрейм має поля зверху і знизу по 5 пікселів, а зліва і справа — по 7 пікселів. Не забудьте, що тут йде мова про поля, а не про рамки. Параметри

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

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

<FRAME SCROLLING="YES|NO|AUTO">.

Параметр SCROLLING може приймати три значення: YES, NO або AUTO. Значення AUTO діє так само, як і у разі відсутності параметра SCROLLING. Значення YES викликає поява смуг прокрутки незалежно від необхідності цього, а NO — забороняє їх появу.

Наприклад:

<FRAME SCROLLING=YES>.

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

<FRAME NORESIZE>.

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

 Атрибут frameborder = 1|0

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

1: Агент користувача повинен зобразити роздільник цим фреймам і всіма прилеглими фреймами. Це значення використовується за умовчанням.

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

Тег <NOFRAMES>

Можливість роботи з фреймами не передбачалася ні в стандарті HTML 3.0, ні в HTML 3.2. Тут до останнього часу складалася достатньо типова ситуація, коли реально використовувані можливості активно застосовуються на багатьох WWWсторінках, проте не є частиною стандарту. Це означало, що браузери цілком законно могли ігнорувати фрейми. З появою стандарту HTML 4.0 ситуація змінилася — тепер підтримка фреймових структур закріплена стандартом. Відмітимо, що

більшість сучасних браузерів розпізнавали фрейми і до появи HTML 4.0. Проте, необхідно надавати інформацію користувачам, що застосовують браузери без підтримки фреймів. Для таких браузерів можна передбачити альтернативну інформацію, яка записується між парою тегів <NOFRAMES> і </NOFRAMES>. Це виглядає таким чином:

<NOFRAMES>

весь HTML-документ

</NOFRAMES>

Все, що розміщене між тегами <NOFRAMES> і </NOFRAMES>, відображатиметься браузерами, що не мають можливостей підтримки фреймів. Браузери з підтримкою фреймів проігнорують всю інформацію між цими тегами.

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

Оскільки фрейми підтримують не всі браузери, необхідно помістити тег <NOFRAME> перед тегом <BODY> , а між <BODY> І < /BODY> записати повідомлення, яке з'являтиметься у вікні, якщо браузер не підтримує фрейми. Після < /BODY> має йти </NOFRAME> .

Приклад 1

Створимо файл головної сторінки, на якій розташовано три попередньо створені документи (Рис. 1).

<HTML>

<TITLE>Навчальні заклади</TITLE>

<FRAMESET ROWS="60%, 40%">

<FRAMESET COLS="50%,50%"> <FRAME SRC="2.html"> <FRAME SRC="3.html"> </FRAMESET>

<FRAME SRC="l.html"> </FRAMESET> </HTML>

Рис.1.1 Приклад сторінки з фреймовою структурою Всі файли відображені у вікні браузера одночасно, а оскільки документи не

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

2.Використання посилань у фреймах

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

Якщо заплановано використовувати певний фрейм для відображення інформації, яка змінюватиметься після вибору відвідувачами іншого посилання, то йому надають ім'я. Наприклад, <FRAME NAME="frame1">. Веб-сторінка з гіперпосиланнями, що виконуватиме роль навігаційної панелі, складається із сукупності тегів <А>...</А>. У них крім адреси файлу, пов'язаного з гіперпосиланням, слід зазначити ім'я фрейму, в якому цей файл відображатиметься. Для цього використовують атрибут TARGET , значенням якого є ім'я відповідного фрейму. Наприклад:

<А HREF="2.html" TARGET="frame1">Документ 1</А>

Приклад 2

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

1. Створимо HTML-документ, який розмітимо за допомогою фреймів.

<HTML>

<TITLE>Документи</TITLE> <FRAMESET COLS="25%,*"> <FRAME SRC="my_doc.html">

<FRAME NAME="framel"> </FRAMESET> </HTML>

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

<HTML>

<TITLE>Мої документи</TITLE>

<BODY>

<H2><A HREF="1_name.html" TARGET="frame1">Шрифт</А></Н2> <H2><A HREF="2_name.html" TARGET="frame1">Заголовки</А></Н2> <H2><A HREF="Pr.html" TARGET="frame1">Абзаци</А></Н2>

</BODY>

</HTML>

користувач не вибрав гіперпосилання.

Рис.2 Приклад сторінки з навігаційною панеллю

У документі index.html у п'ятому рядку, в тегу <FRAME>, задано лише один атрибут — NAME, тому після першого завантаження веб-сторінки права частина буде порожньою. Щоб цього уникнути, використовують атрибут SRC для повідомлення адреси файлу, який повинен відкриватись у цьому фреймі під час першого завантаження сторінки. Зазвичай це файл веб-сторінки з графічними вставками та загальною інформацією про сайт.

Рис.3 Сторінка, на якій завантажена сторінка після переходу по посиланню.

Недоліки використання фреймів

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

Лекція 8

Тема: Форми на веб-сторінках

Мета: вивчити основны теги для створення елементів форм у HTML –документі, розглянути приклади написання кодів для різних елементів, навчитися створювати комбіновану форму.

План

1.Поняття форми

2.Елементи формі в HTML

1. Поняття форми

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

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

«Ім'я елементу» задається атрибутом name. .

Кожен управляючий елемент, має початкове і поточне значення, обидва вони є символьними рядками. Інформацію про початкові значення і можливі обмеження на значення. У загальному випадку «початкове значення» елементу, що управляє, може задаватися за допомогою атрибуту value.

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

«Поточне значення» управляючого елементу, спочатку встановлюється рівним початковому значенню. Потім поточне значення може змінюватися користувачем або початкове значення управляючого елементу не змінюється. Таким чином при скиданні форми кожне поточне значення встановлюється рівним початковому значенню. Якщо управляючий елемент не має початкового значення, результат скидання форми непередбачуваний.

Створення форм

У мові HTML форми застосовуються для відправки даних із сторіночки на обробку в яку-небудь програму, встановлену на сервері. Користувач заповнює форму і натискає кнопку Send (відправити), обробка даних виконується спеціальною програмою (скриптом) на сервері, і ми отримуємо на адресу техпідтримки питання користувачів.

Створення форм починається з елементу <form> </form>

Уелементу форми form існують два обов'язкові атрибути metod і `.

metod - атрибут визначає спосіб, за допомогою якого здійснюватиметься зв'язок між формою і Web сервером. Атрибут може приймати значення "get" і "post".