Фреймы
Форматируем Web-страницу при помощи таблиц
Описываем каждую ячейку таблицы
Описываем строку таблицы
Выводим заголовок таблицы
Вставляем таблицу в документ
Таблицы
Гиперссылки на адрес электронной почты
Внутренние гиперссылки
Относительный URL-адрес
Абсолютный URL-адрес
Внешние гиперссылки
Гиперссылки
Используем изображение в качестве фона
Вставляем изображение в Web-страницу
Графика
Вложенные списки
Листинг 1.5. Вложенные списки
<OL type="1">
<LI>Первая строка
<OL type="a">
<LI>Вторая строка
<LI>Третья строка
</OL>
<LI>Четвертая строка
</OL>
<IMG src="foto.gif">
<IMG src="http://www.mysite.ru/foto.gif">
<IMG src="foto.gif" width="480">
<IMG src="foto.gif" width="480" height="60">
<IMG src="foto.gif" width="480" height="60" border="0">
<IMG src="foto.gif" width="480" height="60" border="0" alt="Текст подсказки">
<P><IMG src="foto.gif" align="left">Текст</P>
<P><IMG src="foto.gif" align="right">Текст</P>
<P><IMG src="foto.gif" align="top">Текст</P>
<P><IMG src="foto.gif" align="bottom">Текст</P>
<P><IMG src="foto.gif" align="middle">Текст</P>
<P><IMG src="foto.gif" align="left" hspace="20">Текст</P>
<P><IMG src="foto.gif" align="left" vspace="20">Текст</P>
<BODY background="foto.gif" bgcolor="gray">"Тело" документа</BODY>
<A href="http://www.mysite.ru/file.html">Текст ссылки</A>
<A href="http://www.mysite.ru/file.html">
<IMG src="http://www.mysite.ru/foto.gif"></A>
http://www.mysite.ru/folder/file.html
http://www.mysite.ru/file.html
http://www.mysite.ru/
http://www.mysite.ru/folder/
<A href="file2.html">Текст ссылки</A>
<A href="folder3/file2.html">Текст ссылки</A>
<A href="../file2.html">Текст ссылки</A>
<A href="../../file2.html">Текст ссылки</A>
<A href="http://www.mysite.ru/file.html" target="_blank">Ссылка</A>
<A href="#charter1">Глава 1</A>
<A name="charter1"></A>
<A href="http://www.mysite.ru/file.html#charter6">Текст</A>
Листинг 1.6. Структура документа с внутренними ссылками
<HTML>
<HEAD>
<TITLE>Создание внутренних ссылок</TITLE>
</HEAD>
<BODY>
<H1 align="center">Название документа</H1>
<H2>Оглавление</H2>
<UL type="disk">
<LI><A href="#charter1">Глава 1</A>
<LI><A href="#charter2">Глава 2</A>
<LI><A href="#charter3">Глава 3</A>
<LI><A href="#charter4">Глава 4</A>
</UL>
<BR>
<H2><A name="charter1">Глава 1</A></H2>
<P>Содержание Главы 1</P>
<H2><A name="charter2">Глава 2</A></H2>
<P>Содержание Главы 2</P>
<H2><A name="charter3">Глава 3</A></H2>
<P>Содержание Главы 3</P>
<H2><A name="charter4">Глава 4</A></H2>
<P>Содержание Главы 4</P>
</BODY>
</HTML>
<A href="mailto:mail@mysite.ru">Текст</A>
Листинг 1.7. Структура HTML-таблиц
<TABLE border="1" align="center" width="200">
<CAPTION>Заголовок таблицы<CAPTION>
<TR>
<TD align="center">1</TD>
<TD align="center">2</TD>
</TR>
<TR>
<TD align="center">3</TD>
<TD align="center">4</TD>
</TD>
</TR>
</TABLE>
<TABLE><!-- Здесь сетка не отображается -->
<TABLE border="0"><!-- Здесь сетка не отображается -->
<TABLE border="5"><!-- В этом случае сетка отображается, а толщина рамки вокруг таблицы равна 5 пикселам -->
<TABLE cellspacing="0">
<TABLE cellpadding="2">
<TABLE width="200">
<TABLE width="100%">
<TABLE height="200">
<TABLE height="100%">
<TABLE align="left">
<TABLE align="right">
<TABLE align="center">
<TABLE bgcolor="silver">
<TABLE bgcolor="#C0C0C0">
<TABLE background="foto.gif">
<TABLE background="http://www.mysite.ru/foto.gif">
<TABLE border="2" bordercolor="red">
<TABLE border="2" bordercolor="#FF0000">
<CAPTION align="top">Заголовок</CAPTION>
<CAPTION align="bottom">Заголовок</CAPTION>
<TR align="left">
<TR align="right">
<TR align="center">
<TR align="justify">
<TR valign="top">
<TR valign="middle">
<TR valign="bottom">
<TR valign="baseline">
Листинг 1.8. Объединение ячеек по горизонтали
<TABLE border="1" align="center" width="200">
<CAPTION>Заголовок таблицы<CAPTION>
<TR>
<TD align="center" colspan="2">1 и 2 объединены</TD>
</TR>
<TR>
<TD align="center">3</TD>
<TD align="center">4</TD>
</TD>
</TR>
</TABLE>
<TD align="center">1</TD>
<TD align="center" colspan="2">1 и 2 объединены</TD>
<TD align="center">2</TD>
Листинг 1.9. Объединение ячеек по вертикали
<TABLE border="1" align="center" width="200">
<CAPTION>Заголовок таблицы<CAPTION>
<TR>
<TD align="center" rowspan="2">1 и 3 объединены</TD>
<TD align="center">2</TD>
</TR>
<TR>
<TD align="center">4</TD>
</TD>
</TR>
</TABLE>
<TD align="center">1</TD>
<TD align="center" rowspan="2">1 и 3 объединены</TD>
<TD align="center">3</TD>
Листинг 1.10. Форматирование Web-страницы при помощи таблиц
<HTML>
<HEAD>
<TITLE>Форматирование Web-страниц при помощи таблиц</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">
<TABLE border="0" cellspacing="0" cellpadding="5" width="100%" height="100%">
<!-- Таблица полностью заполняет всю страницу -->
<TR>
<TD align="center" colspan="3" height="100" bgcolor="silver">
<FONT size="5" face="Tahoma" color="red"><B>"Шапка" документа</B></FONT>
</TD>
</TR>
<TR valign="top">
<TD width="180">
<!-- Эта ячейка содержит панель навигации -->
<BR><H3 align="center">Оглавление</H3>
<UL type="disk">
<LI><A href="charter1.html">Глава 1</A>
<LI><A href="charter2.html">Глава 2</A>
<LI><A href="charter3.html">Глава 3</A>
<LI><A href="charter4.html">Глава 4</A>
</UL>
</TD>
<TD align="center">
<!-- Эта ячейка содержит основную часть страницы -->
<BR><H2>Глава 1</H2>
<P>Содержание Главы 1</P>
<!-- А это пример вложенности таблиц -->
<TABLE border="1" width="200">
<CAPTION>Заголовок таблицы<CAPTION>
<TR>
<TD align="center">1</TD>
<TD align="center">2</TD>
</TR>
<TR>
<TD align="center">3</TD>
<TD align="center">4</TD>
</TD>
</TR>
</TABLE>
</TD>
<TD align="center" width="150">
<!-- Эта ячейка содержит изображение -->
<BR>
<IMG src="foto.gif" width="120" height="240" border="0" alt="Текст подсказки">
</TD>
</TR>
<TR>
<TD align="center" colspan="3" height="50" bgcolor="silver">
<!-- Эта ячейка содержит информацию об авторе -->
Авторские права
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<BODY bgcolor="#FFFFFF" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">
Листинг 1.11. Выравнивание элемента Web-страницы по центру
<HTML>
<HEAD>
<TITLE>Форматирование Web-страниц при помощи таблиц</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">
<TABLE border="0" cellspacing="0" width="100%" height="100%">
<TR>
<TD align="center" valign="middle">
<B>Текст в центре окна</B>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Листинг 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">
