2. Зображення, формули, пошук.
Підтримка зображень у HTML - шлях у світ графіки. Створення і маніпулювання зображеннями, графічними форматами й іншим графічним матеріалом не є частиною HTML. Зокрема, HTML специфікації не повідомляють яких-небудь вимог чи обмежень на графічні формати, які підтримуються Web броузерами.
Нас у першу чергу буде цікавити тег IMG.
2.1. IMG - лінійні зображення
Ціль
Для включення зображення у документ.
Основний синтаксис
<IMG SRC="URL" ALT="текст">
Можливі атрибути
ім'я атрибута |
можливі значення |
зміст |
SRC |
URL |
адреса зображення |
ALT |
рядок |
Текстовий опис зображення |
ALIGN |
TOP, MIDDLE, BOTTOM, LEFT, RIGHT |
Позиціонування зображення щодо поточного текстового рядка |
HEIGHT |
ціле |
Висота в пикселях |
WIDTH |
ціле |
Ширина в пикселях |
BORDER |
ціле |
Ширина бордюру (рамки) у пикселях |
HSPACE |
ціле |
Ширина незаповненого простору безпосередньо ліворуч і праворуч від зображення в пикселях |
VSPACE |
ціле |
Висота незаповненого простору вище і нижче зображення в пикселях |
USEMAP |
URL |
Фрагмент ідентифікатора для сайта клієнта з картою образа |
ISMAP |
ISMAP |
Показує, що зображення є картою образа, що реагує на натискання клавіші миші |
Значення ALIGN мають наступний сенс:
ALIGN=TOP
Позиціонує верх зображення з верху поточного текстового рядка. Броузери по різному інтерпретують це. Деякі беруть до уваги те, що було на текстовому рядку до зображення й ігнорують, що йде на рядку після нього.
ALIGN=MIDDLE
Вирівнює середину зображення по основному текстовому рядку.
ALIGN=BOTTOM (за замовчуванням)
Вирівнює низ зображення по основному рядку.
ALIGN=LEFT
Переміщає зображення до поточного лівого краю, тимчасово змінюючи цей край так, щоб наступний текст перемістився уздовж правої сторони зображення.
ALIGN=RIGHT
Переміщає зображення до поточного правому краю, тимчасово змінюючи цей край так, щоб наступний текст перемістився уздовж лівої сторони зображення.
Приклад:
<A HREF="з:\cloud.gif">
<IMG HEIGHT="400" WIDTH="400"
SRC="cloud.gif"
ALT="Жах" ISMAP></A>
Р
ис.
2.9. Завантаження графічного файлу
Cloud.gif
2.2. Isindex - простий пошук по ключових словах
Ціль
Простий пошук по ключових слов. Броузер повинний сформувати вступне поле однострокового тексту для введення рядка запиту.
Семантика для ISINDEX на сьогоднішній день добре визначена тільки, коли основним URL для всього документа є HTTP URL. Звичайно, коли користувач натискає клавішу "Enter", рядок запиту посилається до сервера, ідентифікованого основним (базовим) URL документом.
Основний синтаксис
<ISINDEX>
Можливі атрибути
ім'я атрибута |
можливі значення |
зміст |
PROMPT |
рядок |
послання підказки |
Приклади
Приклад демонструє використання ISINDEX для з'єднання зі скриптом "покажчика".
<BASE HREF="http://www.demon.com">
Пошук <a href="http://www.demon.com">адреса</a>.
<ISINDEX PROMPT="Знайти">
Рис.2.10. Основа пошуку
Основний приклад:
<HTML> <HEAD> <TITLE> Основний приклад 2 </TITLE> </HEAD>
<BODY
BGCOLOR=green
>
<H1 ALIGN=CENTER>Розробка форм</H1>
<P> <STRONG>Заповните анкету
<FORM ACTION="mailto:demon@rambler.ru" METHOD=POST>
<MENU>
<LI> Введіть ім'я <INPUT TYPE=TEXT SIZE=40 NAME=1>
<LI> Уведіть прізвище <INPUT TYPE=TEXT SIZE=40 NAME=1>
<LI> Рід діяльності<INPUT TYPE=TEXT SIZE=40 NAME=1>
<LI> Освіта <SELECT NAME=обр>
<OPTION>Середнє
<OPTION>Спеціальне
<OPTION>Вище
<OPTION>Магістратура
<OPTION>Аспірантура
</SELECT>
<LI> Чи подобається Вам система освіти
<INPUT TYPE=RADIO NAME=1 VALUE="Так"> Так
<INPUT TYPE=RADIO NAME=1 VALUE="Ні" CHECKED> Ні
<INPUT TYPE=RADIO NAME=1 VALUE="Утрудняюся"> Утрудняюся
<p>
<LI> Напишіть коротко свої пропозиції
<P><TEXTAREA NAME=Comments ROWS=5 COLS=60 ></TEXTAREA>
</MENU>
<HR>
<p>Вкажіть оцінку по п'ятибальній шкалі і відправте авторі на Email:
<SELECT NAME=evaluation>
<OPTION>Один
<OPTION>Два
<OPTION>Три
<OPTION>Чотири
<OPTION>П'ять
</SELECT>
<P>
Ви також можете внести свої коментарі з приводу сторінки опитування
<TEXTAREA NAME=Comments ROWS=5 COLS=72></TEXTAREA> <P>
<INPUT TYPE=SUBMIT VALUE=Відправити><ADDRESS>Demon@Rambler.ru<ADDRESS>
</FORM>
<
HR></BODY>
</HTML>
Рис.2.11. Основний приклад.