World Wide Web i HTML

<А href = mailto: info@geocities.com ><IMS SRC = “MAIL12.GIF” ></А>

2.10 Кадри

Команди роботи з кадрами.

Ви можете розділити екран на декілька незалежних віконних кадрів, кожний з яких відображає окремий HTML документ.

На екрані кадри являють собою прямокутники. У HTML використовуються наступні команди роботи з кадрами:

<FRAMESET>, </FRAMESET> - визначають склад і розміри кадрів на екрані,

<FRAME>, </FRAME> - визначають HTML-файл для кожного кадру,

<NOFRAMES>, </NOFRAMES> - для повідомлень броузеру, що не обробляє кадри.

Формат команди FRAMESET.

Команда ділить ціле вікно (або частину вікна, визначену попередньою командою FRAMESET) на декілька вертикальних (параметр COLS) або горизонтальних (параметр ROWS) кадрів. Кожний з цих кадрів може визначати HTML-файл, що відображається в ньому (за допомогою команди FRAME) або, відповідно, ділитися далі за тими ж правилами з вкладеною командою FRAMESET.

По кінцю визначення кадрів, що задаються командою FRAMESET, необхідно записати команду /FRAMESET, інакше вони можуть бути побудовані неправильно.

Формат параметрів COLS і ROWS.

Ці параметри дозволяють визначити розміри і кількість побудованих вертикально (параметр COLS) або горизонтально (параметр ROWS) кадрів.

Атрибути параметрів задаються в одній з 3 форм:

- абсолютний розмір в пікселях,

- заданий процент в загальній довжині або ширині,

- залишок після завдання попередніх кадрів.

Символ “*” означає виділення кадру площі, що залишилася. Наприклад, команда: <FRAMESET ROWS= “100, *”> створює 2 кадри: верхній становить 100 пікселів у висоту, нижній - простір, що залишився.

Формат команди FRAME.

Дана команда існує тільки всередині блоку FRAMESET - /FRAMESET. Її призначення - визначення функцій конкретного кадру.

Команда /FRAME практично не використовується так як її функції виконують команди /FRAMESET і наступна FRAME.

Параметр SRC задає ім'я HTML - файла, що відображається в даному кадрі.

Параметр NAME застосовується для створення імені кадру.

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

Це дуже поширена команда її можна бачити в багатьох сторінках. Її перевага в тому, що на екрані можна одночасно бачити і HTML-файл, що викликає, і HTML-файл, що викликається, і для перегляду наступного файла гіпертекста досить натиснути на відповідну кнопку файла, який викликає.

Параметр TARGET команди BASE задає кадр, що виділяється по замовчанню для відображення гіпертекста.

Параметр NORESIZE застосовується для того, щоб користувач не зміг змінити розміри даного кадру на екрані.

Лінійки прокрутки задаються за допомогою параметра SCROLLING.

Тут діють наступні правила:

- Якщо параметр SCROLLING не заданий, то лінійки прокрутки створюються автоматично тільки тоді, коли розмір тексту, що відображається перевищує розмір кадру (це відноситься як до розміру по вертикалі, так і по горизонталі).

- Якщо задане SCROLLING = “YES”, то лінійки прокрутки створюються завжди.

- Якщо задане SCROLLING = “NO”, то лінійки прокрутки не створюються.

- Якщо задане SCROLLING = “AUTO”, то система працює так само, як якщо параметр SCROLLING не заданий.

Товщина граничної лінії між кадрами може задаватися в пікселях за допомогою параметрів MARGINHEIGHT і MARGINWIDTH, якщо розробника не влаштовують значення, задані по замовчанню.

Спеціальні значення параметра TARGET.

У сучасних броузерах зарезервовано 4 спеціальних значення параметра TARGET:

а) _blank - броузери завжди задає це значення для нового, неіменованого вікна.

б) _self - задається по замовчанню для всіх кадрів, в операторі FRAME яких немає параметра TARGET. Всі документи, що викликаються по гіперпосиланню, завантажуються і відображаються в тому ж кадрі, що і документ, який їх викликає.

Значення _self в явному вигляді не застосовується доти, поки ми не вводимо команду BASE з параметром TARGET - тоді, можливо, знадобиться відмінити це загальне призначення для якого-небудь конкретного кадру.

в) _parent - файл, що викликається по гіперпосиланню, завантажується в кадр або вікно, яке є батьківським по відношенню до того, що викликає. Іншими словами, файл, що викликається буде розташований в тому ж вікні, що і його “дідусь”.

г) _top - файл, що викликається по гіперпосиланню, завантажується у вікно, що містить посилання, і перекриває всі кадри даного вікна.

Формат команди NOFRAME.

Ця команда призначена для броузерів, що не обробляють кадри.

У броузері, що обробляє кадри, вся інформація, що міститься між командами NOFRAME і /NOFRAME, ігнорується.

У броузері, що не обробляє кадри, ця інформація обробляється.

Звичайно розробники сторінок, використовуючі кадри, вставляють в тіло команди NOFRAME повідомлення про те, що даний броузер не обробляє кадри і повідомляє рекомендації, наприклад, перейти на Netscape 2.0 і вище.

2.11 Спеціальні ефекти

Створення блимаючого тексту.

Зауваження: працює в Netscape 3.0, не працює в Explorer 3.0

Ви можете створити зображення тексту що блимає за допомогою наступних команд: <blink> і </blink>

Не зловживайте блимаючим зображенням. Його краще усього застосовувати для залучення уваги до нової інформації в домашній сторінці.

Створення рядка, що біжить.

Зауваження: працює в Explorer 3.0, не працює в Netscape 3.0

Рядок, що біжить створюється за допомогою команд: <MARQUEE> і <MARQUEE>. Нижче приводяться приклади команд:

Команда <MARQUEE> </MARQUEE> - цей текст буде рухатися з права на ліво повільно.

Команда <MARQUEE BEHAVIOR = “ALTERNATE” CROLLAMOUNT = “50” SCROLLDELAY = “8” > </MARQUEE> - цей текст буде рухатися з права на ліво і назад.

Команда <MARQUEE BEHAVIOR= “SLIDE” > </MARQUEE> - цей текст буде рухатися і зупинятися.

Команда <MARQUEE SCROLLDELAY= “5” SCROLLAMOUNT = “50”> </MARQUEE> - цей текст буде рухатися дуже швидко.

Карта образів.

Зауваження: працює в Explorer 3.0, працює в Netscape 3.0

Карта образів дозволяє створити декілька посилань до різних адрес, використовуючи тільки одне зображення.

Нехай у Вас є картинка imgmap.gif розміром 100 х 100 пікселів. Припустимо, що картинка складається з 4 частин, де зображені Ваші друзі:

- В лівому верхньому кутку - Діма (у нього є домашня сторінка dima.html)

- В правому верхньому кутку - Алік (Його домашня сторінка alik.html)

- В лівому нижньому кутку - Вова (Його домашня сторінка vova.html)

- В правому нижньому кутку - Ігор (Його домашня сторінка igor.html)

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

<map name= “map ”>

<area shape = “rect” coords = “0, 0, 49, 49” href = “dima.html”>

<area shape = “rect” coords = “0, 50, 49, 99” href = “alik.html”>

<area shape = “rect” coords = “50, 0, 99, 49” href = “vova.html”>

<area shape = “rect” coords= “50, 50, 99, 99” href = “igor.html”>

</mар>

<img src = “imgmap.gif” usemap = “# map” border= 0>

Плаваючі вікна.

Зауваження: працює в Explorer 3.0, не працює в Netscape 3.0.

Це вікно створюється за допомогою наступної команди:

<IFRAME NAME = “content_frame” width = “400” height = “240” SRC = “index.html ”> Це плаваюче вікно </IFRAME>

2.12 Форми

Форма - це засіб, що дозволяє організувати в сторінці діалог з її користувачем.

Розробник сторінки створює її за допомогою спеціальних елементів:

- кнопки,

- списки,

- текстові рядки,

- текстові поля.

Форми передають інформацію програмі обробки у вигляді пар:

Ім'я поля - Значення поля.

Форма починається командою <FORM> і закінчується командою </FORM>.

Дана команда має 2 основних параметра: ACTION і METHOD.

Параметр ACTION є обов'язковим. Він вказує адресу обробника форми (наприклад, адреса програми обробки або поштова адреса або просто адреса URL для переходу).

Параметр METHOD не є обов'язковим. Він приймає одне з двох значень: GET або POST, пов'язаних з методом протоколу передачі інформації з анкети.

По замовчанню, METHOD= GET.

Приклад команди FORM:

<FORM ACTION = “http://www.aport.ru” METHOD= POST >

Для завдання керуючої кнопки запуску передачі даних треба записати наступну команду:

<INPUT TYPE = submit NAME = “botton1” VALUE = “Довільний текст”>

де:

INPUT - команда створення керуючого елемента.

TYPE - параметр, що визначає керуючий елемент.

submit - значення цього параметра (в цьому випадку керуюча кнопка).

NAME - параметр, задаючий ім'я змінної.

botton1 - ім'я змінної.

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

Довільний текст - значення тексту на керуючому елементі.

Нижче приводяться основні типи керуючих елементів INPUT.

1) Текстовий рядок: TYPE=text визначає вікно для введення одного рядка тексту.

Параметр SIZE задає розмір вікна в символах.

Приклад:

<INPUT TYPE = text NAME= “text1” SIZE = 30 VALUE = “Введіть текст”>

У отримане вікно, в якому буде зображатися текст: Введіть текст.

Ви можете ввести будь-який текст або залишити записаний початковий текст “Введіть текст” без змін.

При натисненні кнопки submit в програму обробки буде передано:

text1=Ввести текст (або інший, змінений текст).

Параметр SIZE задає розмір вікна в символах.

При необхідності обмежити довжину тексту N, застосовуйте додатковий параметр: MAXLENGTH= N.

2) Вікно для введення пароля: TYPE=password

Аналогічний типу text, але при введенні кожний символ замінюється символом *.

Приклад. Треба ввести пароль довжиною не більше за 5 символів.

<INPUT TYPE=password NAME= pass size= 10 maxlength= 5 >

3) Текстове вікно: TEXTAREA

Задається в наступному вигляді: <TEXTAREA NAME= text3 COLS= 30 ROWS= 5 WRAP=VIRTUAL> Спочатку заданий текст </TEXTAREA>

Параметр COLS задає кількість символів в рядку, параметр ROWS задає кількість рядків у вікні, необов'язковий параметр WRAP=VIRTUAL задає лінійку прокрутки.

4) Радіокнопка: TYPE=radio

Може бути задано декілька радіокнопок з однаковим ім'ям (тобто значенням параметра NAME), але вони будуть взаємовиключаючими: може бути натиснена (CHECKED) тільки одна з них.

Приклад:

<INPUT TYPE = radio NAME = color VALUE = “Червона” checked> Червона

<INPUT TYPE = radio NAME = color VALUE = “Синя” > Синя

<INPUT TYPE = radio NAME = color VALUE = “Зелена” > Зелена

Ми отримали 3 кнопки, з них відмічена Червона. При натисненні на іншу кнопку попередня звільняється.

Допустимо, ми натиснули Синю кнопку, тоді при натисненні на кнопку submit в програму обробки буде введено:

color=Синій

5) Помічений квадрат: TYPE=checkbox

На відміну від радіокнопок, може бути декілька квадратів з однаковими іменами.

Наприклад, в наступному прикладі спочатку задана кнопка “Горілка”:

<INPUT TYPE = checkbox NAME = box VALUE = “Горілка” checked> Горілка

<INPUT TYPE = checkbox NAME = box VALUE = “Коньяк” > Коньяк

<INPUT TYPE = checkbox NAME = box VALUE = “Лікер” > Лікер

Якщо Ви натиснете ще на кнопку “Коньяк”, то при натисненні на кнопку submit в програму обробки буде введено:

box=Горілка

box=Коньяк

Прихований текст: TYPE=hidden

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

7) Меню: SELECT

Нехай Вам представилася можливість вибрати одну з путівок у відповідності з наступним списком:

<SELECT NAME= “script”>

<OPTION VALUE = “tour1” > Путівка в Сочи

<OPTION VALUE = “tour2” > Путівка в Париж

<OPTION VALUE = “tour3” > Путівка на Колиму

Якщо Ви вибрали Путівку в Париж, то при натисненні на кнопку submit в програму обробки буде введено: script = tour2

Команда SELECT може містити атрибут MULTIPLE, при якому можна вибрати декілька елементів меню одночасно.

Висоту вікна можна задати атрибутом SIZE= N.

Якщо в рядку OPTION заданий атрибут checked, то даний елемент задається по замовчанню.

8) Кнопка введення: TYPE=submit

Це і є та сама кнопка, про яку ми так часто згадували.

<INPUT TYPE = submit VALUE = “Введення даних” >

9) Кнопка скасування: TYPE = reset

Кнопка виконує ініціалізацію початковими значеннями всіх полів.

<INPUT TYPE=reset VALUE= “Очистити поля” >

2.13 Команди META

Створивши сторінку, Ви, безсумнівно, захочете щоб Вас змогли “знайти” всі користувачі, що цікавляться даним питанням.

Тут можна йти двома основними шляхами:

1. “Відмітитися” в пошукових системах. Є служби, що дозволяють зареєструватися на декількох серверах одночасно.

2. Вставити всередині блоку <HEAD>...</HEAD> команди META.

Основне призначення команд META - інструкції для пошукових машин про тематику Вашої сторінки.

Для цих цілей використовуються наступні параметри:

- description - короткий опис сторінки,

- keyword - список ключових слів в сторінці.

З інших застосувань команд META важливо привести команди, що дають інструкції броузеру про кодування Вашої сторінки.

<META HTTP-EQUIV = “Content-type” CONTENT = “text/html; charset=windows-1251”> для кодування в Windows/1251,

<META HTTP-EQUIV = “Content-type” CONTENT = “text/html; charset=koi8-r”> для кодування в KOI-8.