WEB – ПРОГРАМУВАННЯ. Частина4. - Інформатика - Уроки, реферати, виховні роботи та багато іншого - Обмін досвідом


Форма входу

Вітаю Вас Гість!

Пошук

чат

200

Наше опитування

Чи потрібне зовнішнє оцінювання
Усього відповідей: 235

Статистика


Усього онлайн: 1
Гостей: 1
Користувачів: 0
Головна » Стаття » Інформатика

WEB – ПРОГРАМУВАННЯ. Частина4.

Рис.9.7 – Приклад нумерованого списку.

Нумерація в нумерованому списку змінюється за допомогою атрибутів START і TYPE. Початковий номер привласнюється атрибутові START. Наприклад, для того щоб почати нумерацію з 5, необхідно привласнити атрибутові START значення 5: START=5. Можна також змінити тип нумерації, привласнивши атрибутові TYPE одне зі значень.

Таблиця 9.4 - Коди TYPE для нумерованого списку

Код

Опис

А

Прописні букви (А, У, З, ...)

А

Малі літери (а, Ь, з,...)

I

Прописні римські числа (I, II, III, ...)

I

Рядкові римські числа (i, ii, iii, ...)

1

Числа(1,2,3,..)

Попереднє форматування тексту на Web-сторінці

При відображенні HTML-тексту у браузері всі зайві пробіли ігноруються. Так, якщо ви вставити між двома словами три пробіли, то все одно буде відображатися тільки один. Якщо ви вставите три порожніх рядки між двома рядками тексту, то всі ці порожні рядки заміняться одним пробілом, а текст розірветься по границі вікна.

Для того щоб точно розташувати окремі елементи форми на сторінці, використовуйте контейнер <PRE>. При цьому залишаться всі пробіли, табуляції, переведення рядків і також оригінальний шрифт.

Приклад:

<html>

    <head>

    <title>Збереження форматування</title>

    </head>

<body>

    При відображенні файлу HTML у браузері всі зайві пробіли ігноруються.

Так, якщо ви вставити між двома словами три пробіли,        то все одно   буде відображатися тільки один.

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

<pre>Цей самий текст, але з дескриптором pre

При відображенні файлу HTML у браузері всі зайві пробіли ігноруються.

Так, якщо ви вставити між двома словами три пробіли, то все одно   буде відображатися тільки один.

Якщо ви вставите два порожніх рядки між двома рядками тексту, то всі ці порожні рядки заміняться одним пробілом,

а текст розірветься по границі вікна.</pre>

</body>

</html>

В браузері MS Internet Explorer цей текст набуде такого вигляду:

$IMAGE2$

Рис. 9.8. Збереження форматування з допомогою дескриптора <PRE>

Таблиці

Досить велика кількість документів, з якими ми зустрічаємось щодня містить таблиці, відповідно і в HTML-коді не обійшлось без дескрипторів які дозволяють створювати таблиці.

Таблиці створюються дескриптором-контейнером <TABLE>.

Таблиця вводиться по рядкам, а відповідно кожний рядок складається із клітинок. Всередині нього використовуються дескриптори-контейнери, записані в таблиці 9.5.

Таблиця 9.5. Дескриптори побудови таблиць.

 Дескриптор

Опис

<CAPTION>

заголовок таблиці.

<TR>

рядок таблиці.

<TH>        

клітинка заголовку. В кожній такій клітинці текст виділений напівжирним шрифтом з вирівнюванням по центру.

<TD>

клітинка таблиці.

Розміщення зображень на Web-сторінці

Як правило, Web-сторінки складаються з зображень і тексту, що доповнюють один одного. Для вставки в Web-сторінку зображення використовується дескриптор <IMG>. Єдиним обов'язковим атрибутом є атрибут SRC, якому привласнюється URL файлу, що містить зображення. Необхідно також використовувати атрибути WIDTH і HEIGHT для визначення ширини і висоти зображення, щоб браузер "знав", скільки місця на сторінці виділити для зображення. Завдяки цьому користувач бачить вашу сторінку швидше.

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

У HTML можна керувати вирівнюванням зображення із супровідним текстом, привласнивши атрибут ALIGN дескриптора <IMG> значення TOP, MIDDLE або BOTTOM. Можна також змусити зображення вирівнятися по лівому або правому краї вікна, привласнивши атрибутові ALIGN значення LEFT або RIGHT, відповідно

Працюйте з зображеннями GIF і png. Більшість браузерів Web відображати зображення саме в цих форматів. Якщо використовувати формат зображення, невідомий браузеру, то користувачеві знадобиться додаткова програма, щоб переглянути це зображення.

Зв'язування тексту і зображень з іншими Web-сторінками. Для зв'язування тексту і зображень з іншими Web-сторінками використовується дескриптор <А>. Цей дескриптор є контейнером. Коли користувач клацне на посиланні, броузер відкриє сторінку, зазначену в атрибуті HREF дескриптора <А>.

Якщо ви вставляєте посилання на Web-сторінки свого ж Web-вузла, указуйте відносні URL, а не ім'я вузла або повний шлях. Укажіть тільки необхідний шлях, по якому броузер знайде файл щодо поточного шляху. Якщо на сторінці за адресою http://www.sait.com/ ви створите посилання на img/pic1.gif, те Web-броузер зрозуміє це як http://www.sait.com/img/pic1.gif.

Форми на Web-сторінках

Форми додаються на Web-сторінку за допомогою контейнера <F0RM>. Текст, поміщений усередині контейнера міститься у форму для створення підказок. Дескриптори <PRE> і </PRE> указують браузерові на те, що текст відформатований, і його потрібно зберегти точно в такому виді, як він набраний, без видалення пробілів і порожніх рядків.

Приклад. Проста форма з текстовим полем

 <html> <head>

<title>Пpocтa форма з текстовим пoлeм</title>

 </head>

<body>

<form>

Ведіть свої дані:

Ім’я <input name=Name type=text size=30><br>

Прізвище <input name=fam type=text size=30><br>

Адреса <input name=adr type=text size=30><br>

 </form>

</body>

</html>

Поля у форму додаються за допомогою безлічі дескрипторів. Найпоширенішим дескриптором є <INPUT>. У приведеному вище прикладі браузер відобразить запитання Як Вас звати:, а потім створить текстове поле у відповідності з дескриптором <INPUT>. Атрибут NAME дескриптора <INPUT> привласнює полю ім'я, щоб його можна було ідентифікувати при відправленні форми. В атрибуті TYPE зазначено, що потрібно створити текстове поле, а атрибут SIZE визначає, яку ширину в символах повинне мати текстове поле.

На рис. 9.9 показано, як ця форма виглядає в браузері після заповнення тестових полів.

$IMAGE3$

Рис.9.9 – Документ з формою

Насправді користувач не може відправити дані цієї форми, тому що немає кнопки для відправлення, а також не зазначений метод пересилання даних.

Способи передачі даних форми

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

Для вказівки способу передачі форми в дескрипторі <FORM> використовуються два атрибути. Перший атрибут, ACTION, містить URL, по якому необхідно відправити форму. Якщо форма передається програмі на сервері, то вказується URL цієї програми. Якщо форма посилається по електронній поштовій адресі, то привласнюється URL поштової адреси (наприклад, mailto:stud@mail.ru).

Другий атрибут, METHOD, указує браузеру на те, як відправляти дані. Якщо ви привласните цьому атрибутові значення POST, то браузер відокремить дані від URL. Якщо ж привласнити цьому атрибутові значення GET, то дані форми будуть додані в кінець URL. При відправленні форми по поштовій адресі необхідно привласнити атрибутові METHOD значення GET.

Додавання кнопки відправлення

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

<html> <head>

<title>Пpocтa форма з текстовими пoлями</title>

 </head>

<body>

<form action=”doc2.html” method=post>

<p><b>Ведіть свої дані:</b></p>

Ім’я <input name=Name type=text size=30><br>

Прізвище <input name=fam type=text size=30><br>

Адреса <input name=adr type=text size=30><br>

<input type=submit value=Відправити>

 </form>

</body>

</html>

Зверніть увагу на атрибути METHOD і ACTION дескриптора <FORM>. Ці атрибути вказують, що форма буде відправлятися поштою (не забудьте вставити mailto: у URL). Другий дескриптор <INPUT> описує кнопку відправлення.

Рис.9.10 – Форма з кнопкою для передачі даних

Коли користувач клацне на кнопці, Web-броузер відправить дані з форми у документ doc2.html.

Радіокнопки

Під радіокнопками розуміють можливість вибрати яку завгодно з цих кнопок, але не дві одночасно. Щоб створити залежну кнопку, потрібно привласнити атрибутові TYPE дескриптора <INPUT> значення RADIO і привласнити всім кнопкам у групі одне ім'я. Наприклад:

<INPUT NAME=YESORNO TYPE=RADIO VALUE="Так" CHECKED>

<INPUT NAME= YESORNO TYPE=RADIO VALUE="Ні">

<INPUT NAME=YESORNO TYPE=RADIO VALUE="Незнаю">

Оскільки всі дескриптори <INPUT> мають одне ім'я YESORNO, і їх атрибутам: TYPE привласнене значення RADIO, вони належать до однієї групи залежних кнопок.

Для того щоб вказати обрану кнопку, коли броузер завантажує Web-сторінку, додайте до відповідної кнопки атрибут checked.

Використання фреймів

За допомогою фреймів (кадрів) вікно Web-броузера поділяється на самостійні вікна. У кожному кадрі міститься окрема Web-сторінка.

За допомогою кадрів вікно можна спочатку розділити на рядки, а потім на стовпчики, або, навпаки, спочатку на стовпчики, а потім на рядки. Наприклад:

<html>

<head><title>Кадри</title></head>

<body>

<framset rows=”25%,75%”>

<frame scr=”1.html>

<framset cols=”25%,75%”>

<frame scr=”2.html>

<frame scr=”3.html>

</framset>

</framset>

</body>

</html>

Для того щоб сховати границі кадрів, необхідно вказати параметри Set FRAMEBORDER="NO" MBORDER="0" У дескрипторі <FRAMESET>.

Робота з кадрами починається дескрипторів <FRAMESET>, а закінчується </FRAMESET>. Між цими дескрипторами вказуються кадри і відповідні їм файли HTML. Для розбивки на рядки використовується атрибут ROWS, а для розподілу на стовпці — COLS. Цим атрибутам привласнюється список розділених комами значень, що задають розмір відповідного стовпчика або стовпця. Значення можна вказувати в пікселях або відсотках.

Якщо ви задали три рядки або стовпчики, то кожен наступний визначений за допомогою дескриптора <FRAME> кадр буде займати наступну позицію. У дескрипторі <FRAME> указується файл HTML, що буде використовуватися в цьому кадрі. Для вказівки імені файлу (повний або відносного) використовується атрибут SRC.

Розподіл на кадри можна продовжити й усередині вже створених рядків або стовпчиків. Для цього також використовується дескриптор <FRAMESET> . Так зовнішній дескриптор <FRAMESET> розбиває вікно на рядки, а внутрішній дескриптор <FRAMESET> поділяє середній рядок на двох стовпчиків — шириною 25% і 75%. Броузер завантажує файл HTML, зазначений у першому дескрипторі <FRAME>, у перший стовпчик, а зазначений у другому дескрипторі — у другий стовпчик.

Файли HTML, поміщені в кадри, не повинні містити дескриптори <HEAD> і <BODY>. Це повинні бути прості файли HTML, що починаються дескриптором <HTML> і закінчуються </HTML>. Усе, що знаходиться між цими двома дескрипторами, відображається в кадрі.


ЛІТЕРАТУРА

1.      Бухвалов А.В. и др. Финансовые вычисления для профессионалов.- СПб.: БХВ-Петербург, 2001.-320с. ил.

2.      Гарнаев А.Ю. Excel, VBA, Internet в экономике и финансах.- СПб.: БХВ-Петербург, 2001.- 816с.:ил.

3.      Евдокимов В.В. и др. Экономическая информатика. Учебник для вузов. Под ред. Д.э.н., проф. В.В.Евдокимова. – СПб.: Питер, 1997. – 592с.

4.      Згуровський М.З., Коваленко І.І., Міхайленко В.М. Вступ до комп’ютерних інформаційних технологій: Навч.посіб. – К.: Вид-во Європ. ун-ту (фінанси, інформ. системи, менеджм. і бізнес), 2000.- 265 с.

5.      Информатика. Базовый курс/ Симонович С.В. и др.- СПб.: Питер, 2000.- 640с.:ил.

6.      Карлберг, Конрад. Бизнес-анализ с помощью Excel.: Пер с англ.- К.: Диалектика, 1997.- 448с.: ил.

7.      Лук‘янова В.В. Комп‘ютерний аналіз даних: Посібник. – К.: Видавничий центр „Академія”, 2003. – 344с. (Альма-матер)



Категорія: Інформатика | Додав: stdynzosh (25.03.2009) | Автор: Олександр
Переглядів: 658 | Рейтинг: 0.0/0
Усього коментарів: 0
Додавати коментарі можеть тільки зареєстровані користувачі.
[ Реєстрація | Вхід ]