Лабораторна робота №12
Тема: HTML фрейми та гіпертекстові посилання
Ціль: Навчитися використовувати HTML фрейми та гіпертекстові посилання усередині документів.
Теоретичні зведення:
Використовуючи фрейми, що дозволяють розбивати Web-сторінки на множинні скролліруюми підвікна, ви можете значно поліпшити зовнішній вигляд і функціональність інформаційних систем й Web-додатків. Кожне подвікно, або фрейм, може мати наступні властивості:
Кожен фрейм має свій URL, що дозволяє завантажувати його незалежно від інших фреймів
Кожен фрейм має власне ім'я (параметр NAME), що дозволяє переходити до нього з іншого фрейму
Розмір фрейму може бути змінений користувачем прямо на екрані за допомогою миші (якщо це не заборонено вказівкою спеціального параметра)
Дані властивості фреймів дозволяють створювати просунуті інтерфейсні рішення, такі як:
Розміщення статичної інформації, що автор вважає за необхідне постійно показувати користувачеві, в одному статичному фрейму. Це може бути графічний логотип фірми, copyright, набір керуючих кнопок
Приміщення в статичному фрейму змісту всіх або частини WEB-документів, що втримуються на WEB-сервері, що дозволяє користувачеві швидко знаходити його інформацію, що цікавить
Створювати вікна результатів запитів, коли в одному фрейму перебуває властиво запит, а в іншому результати запиту
Створювати форми типу "майстер-деталь" для WEB-додатків, що обслуговують бази даних
Синтаксис фреймів
Формат документа, що використає фрейми, зовні дуже нагадує формат звичайного документа, тільки замість тегу BODY використається контейнер FRAMESET, що містить опис внутрішніх HTML-документів, що містить властиво інформацію, розташовувану у фреймах.
-
<HTML> <HEAD>...</HEAD> <FRAMESET>...</FRAMESET> </HTML>
Однак, фрейм-документ є специфічним видом HTML-документа, оскільки не містить елемента BODY й якого-небудь інформаційного навантаження відповідно. Він описує тільки фрейми, які будуть містити інформацію (крім випадку подвійного документа, що ми розглянемо пізніше).
Представимо загальний синтаксис фреймів:
-
<FRAMESET COLS="value" | ROWS="value">
<FRAME SRC="url1"> <FRAME ...> ...
</FRAMESET>
Загальний контейнер FRAMESET описує всі фрейми, на які ділиться екран. Ви можете розділити екран на трохи вертикальні або трохи горизонтальних фреймів. Тег FRAME описує кожен фрейм окремо. Розглянемо більш детально кожен компонент.
FRAMESET
<FRAMESET [COLS="value" | ROWS="value"]>
Тег <FRAMESET> має завершальний тег </FRAMESET>. Усе, що може перебувати між цими двома тегами, це тег <FRAME>, вкладені теги <FRAMESET> й </FRAMESET>, а також контейнер з тегів <NOFRAME> й </NOFRAME>, що дозволяє будувати подвійні документи для браузерів, що підтримують фрейми й не підтримуючих фрейми.
Даний тег має два взаємовиключних параметри: ROWS й COLS.
ROWS="список-определений-горизонтальных-підвікон"
Даний тег містить опису деякої кількості підвікон, розділені комами. Кожен опис являє собою числове значення розміру подокна в пікселях, відсотках від усього розміру вікна або зв'язане масштабне значення. Кількість підвікон визначається кількістю значень у списку. Загальна сума висот підвікон повинна становити висоту всього вікна (у будь-яких вимірюваних величинах). Відсутність атрибута ROWS визначає один фрейм, величиною в усі вікно браузера.
Синтаксис використовуваних видів опису величин підвікон:
value
Просте числове значення визначає фіксовану висоту подокна в пікселях. Це далеко не найкращий спосіб опису висоти подокна, оскільки різні браузери мають різний розмір робочого поля, не говорячи вже про різні екранні дозволи в користувача. Якщо ви, все-таки, використаєте даний спосіб опису розміру, то настійно рекомендується сполучати його з яким-небудь іншим, щоб у результаті ви точно одержали 100%-ное заповнення вікна браузера вашого користувача.
value%
Значення величини подокна у відсотках від 1 до 100. Якщо загальна сума відсотків описуваних підвікон перевищує 100, то розміри всіх фреймів пропорційно зменшуються до суми 100%. Якщо, відповідно, сума менше 100, то розміри пропорційно збільшуються.
value*
Загалом кажучи, значення value у даному описі є необов'язковим. Символ "*" указує на те, що все місце, що залишилося, буде належати даному фрейму. Якщо вказується два або більше фрейма з описом "*" (наприклад "*,*"), то простір, що залишився, ділиться нарівно між цими фреймами. Якщо перед зірочкою коштує цифра, то вона вказує пропорцію для даного фрейму (у скільки разів од буде більше аналогічно описаного чистою зірочкою). Наприклад, опис "3*,*,*", говорить, що буде створено три фрейми з розмірами 3/5 вільного простору для першого фрейму й по 1/5 для двох інших.
COLS="список-определений-горизонтальных-підвікон"
Те ж саме, що й ROWS, але ділить вікно по вертикалі, а не по горизонталі.
Приклади:
<FRAMESET COLS="50,*,50"> - описує три фрейми, два по 50 крапок праворуч і ліворуч, і один усередині цих смужок.
<FRAMESET ROWS="20%,3*,*"> - описує три фрейми, перший з яких займає 20% площі зверху екрана, другий 3/4 залишившихся від першого фрейму місця (тобто 60% всієї площі вікна), а останній 1/4 (тобто 20% всієї площі вікна.
<FRAMESET ROWS="*,60%,*"> - аналогічно попередньому прикладу.
Теги <FRAMESET> можуть бути вкладеними, тобто наприклад:
<FRAMESET ROWS="50%,50%">
<FRAMESET COLS="*,*"
</FRAMESET>
</FRAMESET>
Результат даного приклада ми розглянемо пізніше.
FRAME
<FRAME SRC="url" [NAME="frame_name"] [MARGINWIDTH="nw"] [MARGINHEIGHT="nh"] [SCROLLING=yes|no|auto] [NORESIZE]>
Даний тег визначає фрейм усередині контейнера FRAMESET.
SRC="url" - Описує URL документа, що буде відображений усередині даного фрейма. Якщо він відсутній, то буде відображений порожній фрейм.
NAME="frame_name" - Даний параметр описує ім'я фрейму. Ім'я фрейму може бути використане для визначення дії з даним фреймом з іншого HTML-документа або фрейму (як правило, із сусіднього фрейму цього ж документа). Ім'я обов'язково повинне починатися із символу. Уміст пойменованих фреймів може бути задіяне з інших документів за допомогою спеціального атрибута TARGET, описуваного нижче.
MARGINWIDTH="value" - Це атрибут може бути використаний, якщо автор документа хоче вказати величину розділових смуг між фреймами збоку. Значення value указується в пікселях і не може бути менше одиниці. За замовчуванням дане значення залежить від реалізації підтримки фреймів використовуваним клієнтом браузером.
MARGINHEIGHT="value" - Те ж саме, що й MARGINWIDTH, але для верхніх і нижніх величин розділових смуг.
SCROLLING="yes | no | auto" - Цей атрибут дозволяє задавати наявність смуг прокручування у фреймі. Параметр yes указує, що смуги прокручування будуть у кожному разі бути присутнім у фреймі, параметр no навпаки, що смуг прокручування не буде. Auto визначає наявність смуг прокручування тільки при їхній необхідності (значення за замовчуванням).
NORESIZE - Даний атрибут дозволяє створювати фрейми без можливості зміни розмірів. За замовчуванням, розмір фрейму можна змінити за допомогою миші так само просто, як і розмір вікна Windows. NORESIZE скасовує дану можливість. Якщо в одному фреймі встановлений атрибут NORESIZE, то в сусідніх фреймів теж не може бути змінений розмір з боку даного.
NOFRAMES
Даний тег використається у випадку, якщо ви створюєте документ, що може проглядатися як браузерами, що підтримують фрейми, так і браузерами, їх не підтримуючими. Даний тег розташовується усередині контейнера FRAMESET, а все, що перебуває усередині тегів <NOFRAMES> й </NOFRAMES> ігнорується браузерами, що підтримують фрейми.
Приклади
Розглянемо реалізацію фреймів для подібної розбивки вікна:
-
Link1
Link2
Link3
Link4
Link5
<FRAMESET ROWS="*,*">
<NOFRAMES>
<H1>Ваша версія WEB-браузера не підтримує фрэймы!</H1>
</NOFRAMES>
<FRAMESET COLS="65%,35%">
<FRAME SRC="link1.html">
<FRAME SRC="link2.html">
</FRAMESET>
<FRAMESET COLS="*,40%,*">
<FRAME SRC="link3.html">
<FRAME SRC="link4.html">
<FRAME SRC="link5.html">
</FRAMESET>
</FRAMESET>
Механізм HTML позначення гіпертекстового посилання називається анкер. Для включення в якості окремого посилання довільного тексту або зображення на мові HTML застосовують теги А і /А. Тег А включає інформацію, що позначає URL.
А HPEF=”http://www.com це гіперпосилання /А.
Після обробки на екрані з’явиться:
це гіперпосилання.