- •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.10. Фреймы
1.10.1. Делим окно Web-браузера на несколько областей
Листинг 1.12. HTML-документ содержащий заголовок (doc1.html)
<HTML>
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<TABLE border="0" cellspacing="0" width="100%" height="100%">
<TR>
<TD align="center" valign="middle">
<H1>Заголовок</H1>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Листинг 1.13. HTML-документ содержащий панель навигации (doc2.html)
<HTML>
<HEAD>
<TITLE>Панель навигации</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<BR><H3 align="center">Оглавление</H3>
<UL type="disk">
<LI><A href="charter1.html" target="charter">Глава 1</A>
<LI><A href="charter2.html" target="charter">Глава 2</A>
</UL>
</BODY>
</HTML>
Листинг 1.14. HTML-документ содержащий основное содержание Главы 1 (charter1.html)
<HTML>
<HEAD>
<TITLE>Глава 1</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<BR><H2 align="center">Глава 1</H2>
<P>Содержание Главы 1</P>
</BODY>
</HTML>
Листинг 1.15. HTML-документ содержащий основное содержание Главы 2 (charter2.html)
<HTML>
<HEAD>
<TITLE>Глава 2</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<BR><H2 align="center">Глава 2</H2>
<P>Содержание Главы 2</P>
</BODY>
</HTML>
Листинг 1.16. HTML-документ описывающий фреймовую структуру (test.html)
<HTML>
<HEAD>
<TITLE>Пример использования фреймов</TITLE>
</HEAD>
<FRAMESET rows="100, *">
<FRAME src="doc1.html" scrolling="no">
<FRAMESET cols="20%, 80%">
<FRAME src="doc2.html">
<FRAME src="charter1.html" name="charter">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
Ваш Web-браузер не отображает фреймы
</NOFRAMES>
</HTML>
<BODY bgcolor="#FFFFFF">
<BODY bgcolor="#C0C0C0">
1.10.2. Структура html-документа содержащего фреймы
Листинг 1.17. Структура HTML-документа с фреймами
<HTML>
<HEAD>
<TITLE>Заголовок страницы</TITLE>
</HEAD>
<FRAMESET rows="100, *">
<FRAME>
<FRAMESET cols="20%, 80%">
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
<NOFRAMES>
Ваш Web-браузер не отображает фреймы
</NOFRAMES>
</HTML>
1.10.3. Описываем фреймовую структуру
<FRAMESET rows="100, *">
<FRAMESET cols="20%, 80%">
cols="20%, 80%"
rows="100, *"
<FRAMESET rows="100, *" border="2">
<FRAMESET rows="100, *" border="red">
<FRAMESET rows="100, *" frameborder="yes">
<FRAMESET rows="100, *" frameborder="no">
<FRAMESET rows="100, *" framespacing="2">
1.10.4. Описываем отдельную область
<FRAME src="doc2.html">
<FRAME src="charter1.html" name="charter">
<FRAME src="charter1.html" name="charter" scrolling="auto">
<FRAME src="charter1.html" name="charter" scrolling="yes">
<FRAME src="charter1.html" name="charter" scrolling="no">
<FRAME src="charter1.html" name="charter" marginwidth="5">
<FRAME src="charter1.html" name="charter" marginwidth="5" marginheight="5">
<FRAME src="charter1.html" name="charter" border="red">
<FRAME src="charter1.html" name="charter" frameborder="yes">
<FRAME src="charter1.html" name="charter" frameborder="no">
<FRAME src="doc1.html" scrolling="no" NORESIZE>
1.10.5. Тэг <NOFRAMES>
<NOFRAMES>
Ваш Web-браузер не отображает фреймы
</NOFRAMES>
1.10.6. Загружаем документ в определенный фрейм
<A href="file1.html" target="_blank">Текст ссылки</A>
<A href="file1.html" target="_self">Текст ссылки</A>
<A href="file1.html" target="_top">Текст ссылки</A>
<A href="file1.html" target="_parent">Текст ссылки</A>
<A href="file1.html" target="charter">Текст ссылки</A>
<FRAME src="charter1.html" name="charter">
1.10.7. Тэг <IFRAME>. Вставляем фрейм в обычный документ
<IFRAME src="doc2.html">
<IFRAME src="charter1.html" name="charter">
<IFRAME src="charter1.html" name="charter" scrolling="auto">
<IFRAME src="charter1.html" name="charter" scrolling="yes">
<IFRAME src="charter1.html" name="charter" scrolling="no">
<IFRAME src="charter1.html" name="charter" marginwidth="5">
<IFRAME src="charter1.html" name="charter" marginwidth="5" marginheight="5">
<IFRAME src="charter1.html" name="charter" frameborder="yes">
<IFRAME src="charter1.html" name="charter" frameborder="no">
<IFRAME src="charter1.html" name="charter" frameborder="yes" border="2">
<IFRAME src="charter1.html" name="charter" width="200">
<IFRAME src="charter1.html" name="charter" width="200" height="200">
<IFRAME src="charter1.html" name="charter" vspace="5">
<IFRAME src="charter1.html" name="charter" hspace="5">
<IFRAME src="charter1.html" name="charter" align="left">
<IFRAME src="charter1.html" name="charter" align="right">
<IFRAME src="charter1.html" name="charter" align="center">
Листинг 1.18. Пример применения плавающих фреймов
<HTML>
<HEAD>
<TITLE>Пример применения плавающих фреймов</TITLE>
</HEAD>
<BODY>
<H1 align="center">Название документа</H1>
<BR>
<IFRAME src="charter1.html" name="charter" align="right" width="500" height="200">
Ваш Web-браузер не отображает фреймы
</IFRAME>
<H2>Оглавление</H2>
<UL type="disk">
<LI><A href="charter1.html" target="charter">Глава 1</A>
<LI><A href="charter2.html" target="charter">Глава 2</A>
</UL>
</BODY>
</HTML>