Материал: Опорний кнспект

• Параметри 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>, відображатиметься браузерами|, що не мають можливостей підтримки фреймів. Браузери з підтримкою фреймів проігнорують всю інформацію між цими тегами.

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>

3. Відкрийте файл index.html у вікні браузера. На рис. 2.16 пока­ зано, який вигляд має поділене на фрейми вікно з навігацій- ною панеллю після першого завантаження веб-сторінки, поки користувач не вибрав гіперпосилання.

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

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

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

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

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

Відмітимо, що в реальному житті розробники 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 Приклад сторінки з фреймовою структурою

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

3 Вкладені набори фреймів

Число рівнів вкладеності фреймів не обмежене. У наступному прикладі зовнішній елемент FRAMESET| розділяє доступний простір на три рівні стовпці. Внутрішній елемент FRAMESET| розділяє другу область на два рядки нерівної висоти.

<FRAMESET| cols=| «33%, 33%, 34%»>

.зміст першого фрейма.

<FRAMESET| rows=| «40%, 50%»>

.зміст другого фрейма, перший рядок.

.зміст другого фрейма, другий рядок.

</FRAMESET>

.зміст третього фрейма.

</FRAMESET>

У наступному прикладі документа HTML агент користувача повинен завантажувати кожен файл в окремий розділ. Вміст фрейма і його визначення не повинні знаходитися в одному документі|:

<HTML>

<HEAD> <TITLE>Документ з фреймами</TITLE> </HEAD>

<FRAMESET cols= "33%, 33%, 33%">

<FRAMESET rows= "*, 200">

<FRAME src= "Fr_1.html">

<FRAME src= "smile3.jpg">

</FRAMESET>

<FRAME src= "Fr_1.html">

<FRAME src= "Fr_3.html">

</FRAMESET>

</HTML>

.

Лекція 8

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

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

План

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• action - значенням атрибуту action є конкретна адреса скрипта, що обробляє дані. Атрибути записуються в тег <form> , наприклад так:

<form method= "get" action= "http://www.myserver.com/cgi-bin/mailscript">

У даній лекції розглядається тільки створення елементів форм, їх види. Для того, щоб форма запрацювала, її необхідно запрограмувати.

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

Текстове поле

Для створення поля введення використовують елемент input з атрибутом type. Type може приймати різні значення. Для найпростішого поля введення тексту атрибут type матиме значення text.

<input type=text параметри>

Наприклад, html код 

<form method= "get" action="/cgi-bin/handler.cgi"> <b>Зaповніть Ваші дані:</b> Ім'я: <input type=text maxlength=25 size=20> Прізвище:<input type=text maxlength=25 size=20> </form> 

Можливо задавати значення параметрів