ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 18.07.2024
Просмотров: 183
Скачиваний: 0
СОДЕРЖАНИЕ
Лекція 4 Теги форматування тексту Створення гіперпосилань та списків в Html-документі
2. Теги логічного форматування тексту
1. Використання таблиць у html-документах
3. Форматування тексту та оформлення рамок таблиці
4. Використання таблиць для розміщення об'єктів на веб-сторінці
1. Фрейми, їхні теги та атрибути
2. Використання посилань у фреймах
1. Фрейми, їхні теги та атрибути
2. Використання посилань у фреймах
1. Технологія створення веб-вузла.
5.Створення веб-сторінки за допомогою шаблона
Інтеграція сценаріїв з базами даних
Приклад комбінованої форми
Приклад використання різних форм на одній сторіночці Заповните, будь ласка, цю форму Вашими даними і натисніть кнопку "Відправити дані"! Ви зможете побачити варіант обробки Ваших даних.
Ця форма має наступний код:
<form method="post" action="8.php"> <fieldset> <b>Зaполните Ваші дані:</b>
<br><br> Ім'я: <input type=text name="name" maxlength=25 size=20 value=" "> <br><br> </fieldset> <p> <fieldset> <b>Виберіть улюблений колір:</b><br> <p align=center> <input type=radio name=answer value="#F4F090">Жовтий<br> <Input type=radio name=answer value="#80ECF3">Блакитний<br> <input type=radio name=answer value="#F3ACC5">Рожевий<br> <Input type=radio name=answer value="#A7F4AB">Зелений<br> </select> <br><br> </fieldset> <p> <fieldset> <b>Напишіть тут текст </b><br> <textarea name="basictext" rows=7 cols=45 ></textarea> </fieldset> <p> <fieldset> <input type=reset value="Сбросить данные"> <Input type="submit" value="Отправить данные"> </fieldset> </form>
Контрольні запитання
-
Що таке форма?
-
Який тег описує форму у HTML коді?
-
Які атрибути є обов’язковими при додаванні форми?
-
Назвіть елементи форми.
-
Який атибут допомагає створити кнопку із зображенням?
Лекція 7
Тема: Фреймова структура web-сторінки
Мета: вивчити теги для створення веб-сторінки з фреймами, визначити їх атрибути, розглянути приклади сторінок з фреймовою структурою, навчитися будувати код веб-сторінки з фремовою структурою та навігаційною панеллю.
План
-
Фрейми, їхні теги та атрибути.
-
Використання посилань у фреймах.
-
Вкладені набори фреймів.
HTML-документи, які містять фрейми
Ви, мабуть, помітили, що користуватися створеним сайтом не дуже зручно, оскільки для переходу на сторінку з головним меню необхідно клацати кнопку Назад. Тому в мові HTML є засіб, за допомогою якого можна створити меню, що постійно відображатиметься під час перегляду сайту. Інформація, що відкривається за допомогою його посилань, буде розташована в іншому наперед визначеному місці.
Список усіх таких посилань, який фактично є змістом веб-сайту і постійно відображається на екрані, називають меню сайту або навігаційним меню. Типове меню складається з графічних зображень у вигляді кнопок або з текстових гіперпосилань, призначених для переходу в основні розділи сайту. Продумане навігаційне меню може легко провести відвідувача сайту всіма основними і додатковими розділами. Постійне відображення меню суттєво спрощуе навігацію розділами, тому відвідувачі можуть більше часу присвячувати опрацюванню веб-сайту.
1. Фрейми, їхні теги та атрибути
Веб-сторінка сайту може містити кілька блоків або вікон, які називають фреймами, або кадрами. У кожному з них відображається свій HTML-документ. В одному фреймі може міститися навігаційне меню, а в іншому відкриватися веб-сторінки, на які вказують його пункти.
Для того щоб створити веб-сторінку з фреймами, потрібно кілька HTML-документів. В одному з них задають розмітку екрана, тобто розташовують у вікні браузера фрейми, кожному з яких призначають свої документи.
Сторінка з розміткою, як і звичайна, починається з тегу <HTML> і закінчується тегом < / H T M L > . Для поділу екрана на кілька фреймів використовують теги <FRAMESET> і </ FRAMESET> . Перший має бути розташований після тегу заголовка, але перед тегом <BODY>. Іноді в таких документах зовсім не використовують тег <BODY> .
Два фрейми можна розташовувати поруч по горизонталі або один над одним. У першому випадку використовують атрибут COLS, а в другому — атрибут ROWS тегу <FRAMEZЕТ>. Для поділу вікна на фрейми через кому записують два числа, які визначають розміри фреймів. Для трьох фреймів потрібно три числа. Розміри фреймів вимірюють у пікселах або відсотках від розміру екрана. Якщо потрібно зазначити, що фрейм займає те місце, яке залишилося, використовують символ *.
Елемент FRAMESET|
Визначення атрибутів
rows| = multi-length-list|
Цей атрибут визначає розташування горизонтальних фреймів. Це розділений комами список пікселів, відсотків і відносних довжин. За умовчанням використовується 100%, що зазначать один рядок.
cols| = multi-length-list|
Цей атрибут визначає розташування вертикальних фреймів. Це розділений комами список пікселів, відсотків і відносних довжин. За умовчанням використовується 100%, що зазначать один стовпець.
Елемент FRAMESET| визначає макет основного вікна користувача у вигляді прямокутних просторів.
Установка атрибуту rows| визначає число горизонтальних відрізань простору в наборі фреймів. Установка атрибуту cols| визначає число вертикальних відрізань. Для створення сітки можна встановити обидва атрибути одночасно.
Якщо атрибут rows| не встановлений, кожен стовпець займає всю довжину сторінки. Якщо атрибут cols| не встановлений, кожен рядок займає всю ширину сторінки. Якщо не встановлений жоден з цих атрибутів, фрейм займає всю сторінку.
Фрейми створюються в напрямі зліва направо для стовпців і зверху вниз для рядків. Якщо вказано обидва атрибути, розділи вікон створюються зліва направо у верхньому рядку, зліва направо в другому рядку і так далі.
Наприклад, тег <FRAMESET ROWS="150, *"> задає поділ вікна на два горизонтальні фрейми, один з яких має висоту 150 пікселів?a другий займає те місце, що залишилося.
Тег <FRAMESET COLS="20%, 55%, *"> задає поділ вікна на три вертикальні фрейми, один з яких займає 20 % від ширини екрана, другий — 55 %, а третій займає те місце, що залишилося. Можна використовувати одночасно і горизонтальний, і вертикальний поділ вікна на фрейми — це роблять за допомогою вкладення тегів <FRAMESET> один в один.
Розглянемо деякі варіанти поділу простору на частини:
-
Екран розділяється горизонтально на дві частини (тобто створюються верхня і нижня частини).
<FRAMESET| rows=| «50%, 50%»>
.продовження визначення.
</FRAMESET>
-
Створюється три стовпці: другою має фіксовану ширину 250 пікселів (це корисно, наприклад, для представлення зображення відомої ширини). Перший фрейм отримує 25% простору, що залишився, а третій – 75%.
<FRAMESET| cols=| «1*|, 250,3*|»>
.продовження визначення.
</FRAMESET>
-
У наступному прикладі створюється сітка 2x3.
<FRAMESET| rows=| «30%, 70%» cols=| «33%, 34%, 33%»>
.продовження визначення.
</FRAMESET>
-
Для наступного прикладу припустимо, що вікно браузера| має висоту строгі 1000 пікселів. Перший розділ отримує 30% загальної висоти (300 пікселів). Другою має висоту рівно 400 пікселів. Залишається 300 пікселів на два інші фрейма. Для четвертого фрейма задана висота «2*|», так що він повинен бути удвічі вище третього, для якого задані висота «*»| (еквівалентно 1*|). Таким чином, третій фрейм матиме висоту 100 пікселів, а четвертий – 200.
<FRAMESET| rows=| «30%, 400,*|, 2*|»>
.продолжение визначення.
</FRAMESET>
Після поділу екрана на вікна для кожного фрейму слід задати HTML-документ, який відображатиметься в ньому. Для цього використовують тег <FRAME> з атрибутами, що керують властивостями фреймів:
-
SRC — задає ім'я файлу, що відображатиметься у фреймі;
-
NAME — задає ім'я фрейму;
-
MARGINHEIGHT — додає порожнє поле, висота якого визначена в пікселах, між верхньою межею фрейму і початком тексту або графіки;
-
MARGINWIDTH — додає порожнє поле, ширина якого визначена в пікселах, між боковими межами фрейму і початком тексту або графіки.
-
SCROLLING — визначає наявність (значення yes ) або відсутність (значення no) смуг прокручування у вікні фрейму (за умовчанням — yes);
-
NORESIZE — забороняє користувачу змінювати розміри фрейму;
-
BORDER — визначає ширину розділювальної смуги між фреймами в пікселах;
-
BORDERCOLOR — визначає колір розділювальної смуги між фреймами;
Приведемо запис тега| <FRAME|> зі всіма параметрами:
<FRAME| SRC="url|" NAME="window_name|" SCROLLING=YES|NO|AUTO| MARGINWIDTH="value|" MARGINHEIGHT="value|" NORESIZE|>
На практиці в тегу <FRAME|> рідко використовуються одночасно всі параметри.
Найбільш важливий параметр — 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: Агент користувача не повинен відображати роздільник. Звернете увагу, що роздільники можуть все одно відображатися, якщо вони задані в інших фреймах.
