КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
HTML-форми
|
|
|
|
Створення таблиць в HTML
Опис таблиць повинен розташовуватися всередині розділу документа <BODY>. Документ може містити довільне число таблиць, причому допускається вкладеність таблиць одина в одну (але існують браузери, що дозволяють певну кількість вкладень). Кожна таблиця повинна починатися тегом <TABLE> і завершуватися тегом </TABLE>. Всередині цієї пари тегів розташовується опис вмісту таблиці. Будь-яка таблиця складається з однієї або декількох рядків, в кожному з яких задаються дані для окремих комірок.
Кожен рядок починається тегом <TR> (Table Row) і завершується тегом </TR>. Окрема комірка в рядку обрамляється парою тегів <TD> і </TD> (Table Data)
Комірки, визначені тегом <TD> за замовчанням відображають дані, вирівняні вліво (ALIGN=LEFT) і посередині (VALIGN=MIDDLE) у вертикальному напрямі.
Кількість рядків в таблиці визначається числом відкриваючих тегів <TR>, а кількість стовпців - максимальною кількістю <TD> серед всіх рядків.
Таблиця може мати заголовок, який полягає в пару тегів <CAPTION> і </CAPTION>. Опис заголовка таблиці повинен розташовуватися усередині тегів <TABLE> і </TABLE> у будь-якому місці, проте поза областю опису будь-якого з тегів <TD> або <TR>.
Основним тегом, вживаним при створенні таблиць, є тег <TABLE>. Він може використовуватися з рядом параметрів, кожний з яких допустимо опускати. Набір допустимих параметрів залежить від браузера. Згідно специфікації HTML в тегі <TABLE> можуть використовуватися наступні параметри: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN, HEIGHT, BGCOLOR тощо.
Параметр BORDER управляє зображенням рамки навколо кожної комірки, які, по суті, дають лінії сітки таблиці, і навколо всієї таблиці. По замовчанню рамки не малюються, і на екрані користувач побачить лише рівно розташований текст елементів таблиці.
Для додавання в таблицю рамок необхідно включити в код <TABLE> параметр BORDER, який може мати чисельне значення. Наприклад: <TABLE BORDER> або <TABLE BORDER=10>.
Чисельне значення параметра визначає товщину рамки в пікселах, що малюється навколо всієї таблиці, проте на товщину рамок навколо кожної комірки це значення не впливає. За відсутності чисельного значення звичайно воно приймається рівним мінімальному значенню (1), хоча для різних браузерів стиль показу рамок може відрізнятися. Можливість незалежного керування відображенням рамки навколо всієї таблиці і рамками навколо комірок відсутній.
CELLSPACING визначає ширину проміжків між комірками в пікселах. Форма запису: CELLSPACING=num, де num - чисельне значення параметра в пікселах, яке не може бути опущене. Величина num визначає відстань між суміжними комірками (точніше між рамками комірок) як по горизонталі, так і по вертикалі. За умовчанням значення приймається рівним двом.
СЕLLРАDDING визначає ширину порожнього простору між вмістом комірки і її межами, тобто задає поля усередині комірки. Форма запису аналогічна CELLSPACING. Величина num визначає розмір вільного простору (відступу) між рамкою комірки і даними усередині комірки. По замовчанню значення приймається рівним одиниці.
Найбільш компактна таблиця буде одержана завданням наступного опису:
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
В ній комірки будуть розташовані впритул один до одного.
WIDТН і HEIGHT використовуються для завдання ширини і висоти таблиці (якщо використовуються в теге <TABLE>) і для завдання ширини і висоти групи комірок (якщо використовується в тегах <TR> або <TH>). Ширину і висоту можна указувати в пікселах або у відсотках.
Параметр ALIGN тега <TABLE> визначає горизонтальне розташування таблиці у області перегляду. Допустимі значення - LEFT (вирівнювання вліво) і RIGHT (вирівнювання вправо). По замовчанню таблиці вирівняні по лівому краю. Серед допустимих значень немає типового значення для параметра вирівнювання - CENTER. У деяких джерелах з мови HTML значення CENTER (по центру) приводиться як допустиме в даному випадку. Це відповідає специфікації HTML, але на практиці і Netscape Navigator, і Microsoft Internet Explorer реалізують тільки два значення. Річ у тому, що присутність параметра ALIGN в тегу <TABLE> не тільки визначає місцерозташування таблиці, але і дозволяє виконати обтікання таблиці текстом з протилежної сторони аналогічно обтіканню картинок. Обтікання таблиці текстом з двох сторін не передбачається ні в яких випадках. Для точнішого керування обтіканням слід використовувати тег <BR> з параметром CLEAR так само, як це виконується для <IMG>. Якщо параметр ALIGN опушений, то місце праворуч і/або ліворуч від таблиці завжди буде порожнім незалежно від її ширини. Якщо таблиця не вимагає обтікання текстом, то можна добитися її розташування по центру вікна перегляду. Для цього, наприклад, можна весь опис таблиці помістити усередині пари тегів <CENTER> і </CENTER>.
1.1. Форматування даних в середині таблиці.
Кожна окрема комірка в середині таблиці можна розглядати як область для незалежного форматування. Всі правила, які діють для управління відображенням тексту, можуть бути використані для форматування тексту в середині комірки. В середині комірки допустимо використання практично всіх елементів HTML, які можуть з'являтися в середині тіла документа <BODY>, зокрема теги, що керують розташуванням тексту - <р>, <BR>, <HR>, коди заголовків - від <H1> до <H6>, теги форматування символів - <В>, <I>, <STRONG>, <BIG>, <EM>, <FONT SIZE>, <FONT COLOR>, теги вставки графічних зображень <IMG>, гіпертекстових посилань <А> і т.д.
Відразу ж підкреслимо, що область дії тегів, заданих в середині окремої комірки, обмежується межами цієї комірки незалежно від наявності завершуючого тега. Наприклад, якщо в середині комірки визначений колір тексту - <FONT COLOR=RED>, то навіть за відсутності завершуючого коду </FONT> або розташування його через декілька комірок або рядків таблиці, текст наступної комірки буде відбитий кольором по замовчанню.
NOWRAP Звичайно будь-який текст, що не поміщається в один рядок елементу таблиці, переходить на наступний рядок. Проте при використанні атрибуту NOWRAP з тегом <ТD> довжина комірки розширюється настільки, щоб ув'язнений в ній текст помістився в один рядок.
СОLSPAN Тег <ТD> модифікуються за допомогою атрибуту СОLSPAN (Column Span, з'єднання стовпців). Якщо ви хочете зробити яку-небудь комірку ширше, ніж верхня або нижня, можна скористатися атрибутом СОLSPAN, щоб розтягнути її над будь-якою кількістю звичайних комірок.
ROWSPAN Використовується в тегах <ТD> і <ТН>, подібний атрибуту СОLSPAN, тільки він задає число рядків, на які розтягується комірка. Якщо ви вказали в атрибуті ROWSPAN=s число, більше одиниці, та відповідна кількість рядків повинна знаходитися під розтягуваною коміркою. Внизу таблиці її помістити не можна.
BGCOLOR дозволяє встановити колір фону. Залежно від того, з яким тегом (TABLE, TR, TD) він застосовується, колір фону може бути встановлений для всієї таблиці, для рядка або для окремої комірки. Значенням даного атрибуту є RGB-код або стандартна назва кольору.
BACKGROUND Даний атрибут задає фонове зображення для таблиць. Застосовний до тегам TABLE і TD. Його значенням є URL файлу з фоновим зображенням.
1.2. Застосування порожніх комірок
Одній з особливостей представлення таблиць різними браузерами є відображення порожніх комірок. Згідно опису мови всі браузери повинні доповнювати рядки порожніми комірками, якщо в якому-небудь рядку їх кількість задана меншою, ніж в решті рядків. Крім того, в будь-якому місці таблиці можуть знаходитися комірки, що не містять даних. Існує відмінність між порожніми комірками і комірками, що містять невидимі дані. У порожніх комірках в середині пари тегів <TD> і </TD> не міститься ніякої інформації або один або більше пропусків, які не трактуються як дані. Осередки, що містять невидимі дані, наприклад, можуть містити код або код перекладу рядка <BR>, або будь-який текст, колір якого співпадає з кольором фону комірки. Якщо комірки, що містять дані (нехай навіть невидимі), відображаються всіма браузерами однаково, то порожні комірки будуть показані по-різному. Деякі браузери порожню комірку не показують, тобто місце, де розташовується дана комірка, буде закрашено кольором фону сторінки, а не кольором фону комірки на відміну від комірок, що містять дані. Навколо порожніх комірок не промальовувалася рамка.
1.3. Вирівнювання даних в стовпцях таблиці
Теги <COL> і <COLGROUP> повинні розташовуватися відразу ж за описом <TABLE> перед першою появою тега <TR>.
Параметрами тегів <COL> і <COLGROUP> можуть бути SPAN, що визначає кількість суміжних колонок, на які розповсюджується дія значень параметрів, і ALIGN, що визначає горизонтальне вирівнювання даних у всіх комірках відповідного стовпця (або стовпців). Допустимими значеннями параметра ALIGN є LEFT, RIGHT і CENTER. Для параметра SPAN значення по замовчанню рівне одиниці.
Тег <COLGROUP> додатково дозволяє задавати параметр VALIGN, що визначає вертикальне вирівнювання даних в комірках. Допустимими значеннями параметра VALIGN є MIDDLE, TOP і BOTTOM.
Відмінність між тегами <COLGROUP> і <COL> полягає в тому, що перший з них, крім завдання параметрів вирівнювання даних для стовпців, виконує також умовне об'єднання декількох стовпців в групу. Ефект такого об'єднання виявляється при використанні параметра RULES, який описується нижче. По замовчанню всі стовпці таблиці вважаються однією групою. Тег <COL> повинен використовуватися тільки для визначення вирівнювання даних в окремих стовпцях в групі.
1.4. Вертикальне вирівнювання таблиць
Останній параметр тега <TABLE>, властивий тільки Microsoft Internet Explorer, це - VALIGN, що визначає вертикальне вирівнювання таблиці щодо тексту. Його дія подібна до такого ж параметра для зображень.
Хоча теги, розглянуті вище, є досить зручним засобом, але вони підтримується тільки браузерами MS IE і тому рекомендується їх використовувати з обережністю, а краще взагалі відмовитися від їх використання, якщо потрібне щоб форматування таблиць зберігалося при перегляді іншими браузерами.
З погляду дизайнера, форми дають можливість організувати діалог з відвідувачами сайту. Замість використання тексту і зображень для відправки інформації, форми надають текстові вікна, прапорці, перемикачі і меню вибору, що дозволяють витягувати інформацію.
Для обробки відгуків (тобто, результатів заповнення форми), що одержуються від відвідувачів сайтів, як правило, використовується певний сценарій, що виконується на стороні Web-сервера, і, можливо, сценарій, що виконується браузером перед передачею інформації, введеної користувачем у форму.
Сценарії обробки результатів форми виконують дві функції:
1) Web-сервер або (переважно) Web-браузер можуть виконувати сценарій перевірки правильності введених у форму даних, тобто сценарій, який перевіряє, що користувач заповнив всі "обов'язкові" поля і що дані, що містяться у формі, відповідають необхідному формату.
2) Web-сервер виконує сценарій обробки результатів форми, чи ж сценарій може зберігати результати у файлі і передавати його іншій програмі для подальшої обробки. (Деякі програмісти називають результати, передавані браузером Web-серверу, набором даних форми.)
Не дивлячись на те що форми можуть істотно відрізнятися на вигляд, всі вони мають декілька загальних елементів. Форми складаються з одного або декількох полів введення з написами, прапорців, перемикачів або випадаючих меню, які використовуються для введення інформації відвідувачами сайту. Крім того, всі форми містять кнопку відправки Submit, на яку користувач натискає для відправки результатів форми Web-серверу. Більшість форм (що особливо містять велике число полів введення) також мають кнопку скидання Reset, яка дозволяє очистити всі раніше введені дані і почати введення даних із самого початку. Крім цих основних елементів (полів введення з написами і двох спеціальних кнопок) на форму можна помістити всі ті ж елементи, які можуть бути поміщені безпосередньо на Web-сторінку (єдине виключення - форма не може містити іншу форму). HTML-форма, як і HTML-таблиця, є контейнер для приміщення об'єктів Web-сторінки. Проте, на відміну від HTML-таблиці (яка призначена для передачі інформації відвідувачу сайту), призначення форми полягає в отриманні відгуку від відвідувача.
2.1. Організація обробки елементів HTML-форм
Найскладніше в розумінні процесу обробки HTML-форм полягає в тому, щоб зрозуміти "що де відбувається". При перегляді відвідувачем Web-сторінки, що не містить форми, сервер просто відповідає на запити браузера про передачу Web-сторінки і таких окремих її елементів, як графіка і анімація. Наприклад, при "відвідинах" Web-сайту браузер відвідувача запрошує Web-сторінку у сервера. Після передачі HTML-сторінки сервером браузер обробляє HTML-оператори і починає виводити вміст сторінки на екран. Якщо при обробці сторінці браузер зустріне дескриптор, що вимагає отримання від сервера додаткових даних, наприклад, дескриптор <img>, який використовується для опису графіки, браузер посилає серверу запит на передачу необхідного файлу. Як показано на Рис. 1, сервер і браузер продовжують цю взаємодію типу "запит/відповідь" до тих пір, поки браузер не одержить всі файли, необхідні для коректного відображення всього вмісту Web-сторінки.
Після відправки HTML-документа (включаючи всі запитані браузером графічні зображення, анімацію, звукові файли і відеокліпи) робота Web-сервера вважається виконаною. Виведення на екран тексту, що міститься на Web-сторінці, і графіки, відтворення звукових файлів і відеокліпів покладається на браузер. При клацанні користувачем на гіперпосиланні, що знаходиться на Web-сторінці, браузер відправляє серверу наступний запит на передачу іншої Web-сторінки. У свою чергу, сервер відправляє браузеру запитаний документ (і всі додаткові файли, необхідні для правильного відображення документа).
Рис1. Взаємодія типу «запит/відповідь» між Web-браузером і Web-сервером
При роботі з Web-сторінкою, що містить форму, браузер і сервер для завантаження сторінки (з формою) виконують всі ті ж операції, які були описані вище. Після заповнення відвідувачем полів форми і натиснення кнопки відправки браузер відправляє результати форми серверу, який повинен певним чином обробити отримані результати. Як правило, результати форми обробляються сервером за рахунок запуску того або іншого сценарію. Залежно від призначення, сценарій може, наприклад, записати дані користувача в базу даних, використовувати їх для початку транзакції або, у випадку, якщо сайт є такою пошуковою машиною, як Yahoo, використовувати дані користувача для пошуку посилань в базі даних сервера. За допомогою HTML-елементів форми її розробник може вказати програму, яка запускатиметься сервером після передачі результатів форми.
Як правило, при натисненні відвідувачем кнопки передачі (Submit) браузер запустить сценарій, який знаходиться в тому ж HTML-файлі, що і форма. Цей сценарій перевіряє повноту введених відвідувачем даних і в деяких випадках може перевіряти їх "правильність". Потім браузер запакує інформацію і передасть її Web-серверу, вказує при цьому ім'я додатку, який сервер повинен запустити для обробки результатів форми. На Рис. 2 показана схема розподілу обов'язків між Web-браузером і Web-сервером при обробці результатів форм.
Знову-таки, таки раніше, після передачі сторінки форми браузеру Web-сервер займається своїми справами, як це було і з Web-сторінкою, що не містить форми. Web-браузер відповідає за прийом даних від відвідувача в поля форми, вибір за допомогою миші перемикачів, прапорців і елементів в списках вибору.
Після завершення заповнення форми Web-браузер повинен знову зв'язатися з сервером з метою передачі йому введеної інформації для подальшої обробки. У свою чергу, Web-сервер для обробки отриманих результатів форми запускає певний сценарій і передає браузеру повідомлення, підтверджуюче отримання результатів і у багатьох випадках вказуюче про успішну або невдалу обробку даних.
Рис2. Події обробки HTML-форми і місця, де вони відбуваються
|
|
|
|
Дата добавления: 2014-01-07; Просмотров: 909; Нарушение авторских прав?; Мы поможем в написании вашей работы!