- •1.6.3. Вложенные списки
- •1.7. Графика
- •1.7.1. Вставляем изображение в Web-страницу
- •1.8.3. Гиперссылки на адрес электронной почты
- •1.9. Таблицы
- •1.9.1. Вставляем таблицу в документ
- •1.9.2. Выводим заголовок таблицы
- •1.9.3. Описываем строку таблицы
- •1.9.4. Описываем каждую ячейку таблицы
- •1.9.5. Форматируем Web-страницу при помощи таблиц
- •1.10. Фреймы
- •1.10.1. Делим окно Web-браузера на несколько областей
- •1.10.2. Структура html-документа содержащего фреймы
- •1.10.3. Описываем фреймовую структуру
- •1.10.4. Описываем отдельную область
- •1.10.6. Загружаем документ в определенный фрейм
- •1.11. Карты-изображения
- •1.11.1. Создаем панель навигации при помощи карт-изображений
- •1.11.2. Структура карт-изображений
- •1.11.4. Описываем активную область на карте-изображении
- •1.12. Формы
- •1.12.1. Создаем форму для регистрации сайта
- •1.12.2. Структура документа с формами
- •1.12.3. Вставляем форму в документ
- •1.13.2. Создаем панель навигации
- •1.13.3. Создаем формы для ввода данных
1.11. Карты-изображения
1.11.1. Создаем панель навигации при помощи карт-изображений
Листинг 1.19. Пример применения карт-изображений
<HTML>
<HEAD>
<TITLE>Пример применения карт-изображений</TITLE>
</HEAD>
<BODY>
<H1 align="center">Название документа</H1>
<BR>
<IFRAME src="charter1.html" name="charter" align="right" width="500" height="240">
Ваш Web-браузер не отображает фреймы
</IFRAME>
<IMG src="foto.gif" width="120" height="240" border="1" usemap="#karta">
<MAP name="karta">
<AREA share="rect" coords="0,0,120,120" href="charter1.html" target="charter" alt="Глава 1">
<AREA share="rect" coords="0,120,240,240" href="charter2.html" target="charter" alt="Глава 2">
<AREA shape="default" nohref>
</MAP>
</BODY>
</HTML>
1.11.2. Структура карт-изображений
Листинг 1.20. Структура карт-изображений
<!-- Часть 1 -->
<IMG src="foto.gif" width="120" height="240" border="1" usemap="#karta">
<!-- Часть 1 -->
<!-- Часть 2 -->
<MAP name="karta">
<AREA shape="rect" coords="0,0,120,120" href="charter1.html" target="charter" alt="Глава 1">
<AREA shape="rect" coords="0,120,240,240" href="charter2.html" target="charter" alt="Глава 2">
<AREA shape="default" nohref>
</MAP>
<!-- Часть 2 -->
1.11.3. Тэг <MAP>
1.11.4. Описываем активную область на карте-изображении
<AREA shape="rect">
<AREA shape="circle">
<AREA shape="poly">
<AREA shape="default">
<AREA shape="rect" coords="x1, y1, x2, y2">
<AREA shape="rect" coords="0, 0, 120, 120">
<AREA shape="circle" coords="x1, y1, r1">
<AREA shape="circle" coords="60, 60, 30">
<AREA shape="poly" coords="x1, y1, x2, y2, x3, y3">
<AREA shape="poly" coords="10, 100, 60, 10, 100, 100">
<AREA shape="circle" coords="60, 60, 30" href="charter1.html">
<AREA shape="circle" coords="60, 60, 30" href="http://www.mysite.ru/charter1.html">
<AREA shape="circle" coords="60, 120, 60" nohref>
<AREA shape="rect" coords="0, 0, 240, 240" href="http://www.mysite.ru/charter1.html">
<AREA shape="rect" coords="0, 0, 240, 240" href="charter1.html" alt="Всплывающая подсказка">
<AREA shape="rect" coords="0, 0, 240, 240" href="charter1.html" target="_blank">
1.12. Формы
1.12.1. Создаем форму для регистрации сайта
Листинг 1.21. Пример использования форм
<HTML>
<HEAD>
<TITLE>Пример использования форм</TITLE>
</HEAD>
<BODY>
<H1 align="center">Пример формы регистрации сайта</H1>
<BR>
<FORM action="file.php" method="POST" enctype="multipart/form-data">
Логин:<BR>
<INPUT type="text" name="pole1"><BR>
Пароль:<BR>
<INPUT type="password" name="pole2" value="Пароль"><BR>
URL-адрес сайта:<BR>
<INPUT type="text" name="pole3" value="http://" size="20"><BR>
Название сайта:<BR>
<INPUT type="text" name="pole4" size="20"><BR>
Описание сайта:<BR>
<TEXTAREA name="pole5" rows="10" cols="15">
</TEXTAREA><BR>
Тема сайта:<BR>
<SELECT name="pole6">
<OPTION value="0" selected>Тема не выбрана
<OPTION value="1">Тема1
<OPTION value="2">Тема2
<OPTION value="3">Тема3
</SELECT><BR>
Баннер 88*31:<BR>
<INPUT type="file" name="pole7" size="20"><BR><BR>
<INPUT type="reset" value="Очистить">
<INPUT type="submit" value="Отправить">
</FORM>
</BODY>
</HTML>
1.12.2. Структура документа с формами
<FORM>
<INPUT type="text">
<TEXTAREA></TEXTAREA>
<SELECT>
<OPTION>
</SELECT>
<INPUT type="file">
<INPUT type="reset">
<INPUT type="submit">
</FORM>