Справочник HTML

Справочник HTML

    Оглавление:
Раздел 1.   Введение: теги, HTML документ.
Раздел 2.   Выделение текста - физические и логические стили.
Раздел 3.   Форматирование текста.
Раздел 4.   Ссылки.
Раздел 5.   Рисунки.
Раздел 6.   Цвет фона и текста. Шрифты.
Раздел 7.   Таблицы.
Раздел 8.   Списки.
Раздел 9.   Последовательности, комментарии.
Раздел 10. Изображения-карты (image maps).
Раздел 11. Звук на сайте.
Раздел 12. Каскадные таблицы стилей.
Раздел 13. Фреймы.

Раздел 13

Тема: фреймы.

Объяснить, что такое фреймы и для чего они нужны, лучше всего на примере. Страница, которую вы сейчас читаете, состоит из двух фреймов: левого, в нем перечислены все уроки, и правого с собственно самими уроками. Вы можете прокручивать содержимое правого фрейма, в то время как левый остается неподвижным. Это позволяет вам в любой момент легко перейти на любой урок, не разыскивая ссылку внизу или вверху страницы. Словом, разумное использование фреймов позволяет существенно упростить навигацию по сайту и улучшить его дизайн.

Суть фреймов в принципе проста: страница делится на несколько окон, в каждое из которых загружается своя страничка (или картинка), со своим собственным адресом. К примеру, в левом окне - "vasja.html", а в правом - "pupkin.html" (которая физически может находиться где-нибудь на другом сервере). Как и любые страницы в Интернете, они могут ссылаться на другие страницы и друг на друга. Кроме этих двух страниц вы должны написать третью, в которой и будут определяться размеры и свойства этих окон. Для этого используются только два тега - <FRAMESET> и <FRAME>. Чтобы их объяснить, рассмотрим пример:

Во-первых, создадим два файла - vasja.html и pupkin.html:

<html> <head> <title>фрейм</title> </head> <body> Меня зовут Вася! </body> </html>
<html> <head> <title>фрейм</title> </head> <body> А фамилия моя Пупкин. Это звучит круто! </body> </html>
Теперь делаем третий файл, назовем его index.html (назвать можно и по другому):

  <html>
  <head>
  <title>Страница с фреймами!</title>
  </head>
  <frameset cols="50%,50%">

  <frame src="vasja.html">
  <frame src="pupkin.html">
  </frameset>
  </html>

Вот его-то мы и рассмотрим подробнее. Во-первых, в нем отсутствуют теги <body> и </body>. Можно сказать, их роль выполняет тег <frameset>, хотя это не совсем верно. Тег <frameset> (переводится как "набор фреймов") с аттрибутом cols="50%,50%" указывает браузеру, что страница должна быть поделена на два окна (фрейма), каждый шириной в 50% от ширины страницы. Тег <frame> определяет содержимое и свойства каждого фрейма (заметьте, что он не имеет закрывающего тега). В данном случае указано, что содержимым первого фрейма является файл vasja.html, второго - файл pupkin.html (фреймы считаются слева направо и сверху вниз. Здесь - этот пример в действии (откроется в новом окне). Все просто! Еще несколько примеров:

20%

30%

50%

Три фрейма разной ширины.
<frameset cols="20%,30%,50%"> <frame src="page1.html"> <frame src="page2.html"> <frame src="page3.html"> </frameset>

25%

75%

Фреймы можно расположить рядами так же легко, как и столбцами. Просто меняем аттрибут cols на rows: <frameset rows="25%,75%"> <frame src="page1.html"> <frame src="page2.html"> </frameset>

Значения аттрибутов cols и rows могут выражаться не только в процентах. cols="150,*,100" - страница разделена на три столбца, где ширина левого 150 пикселов, правого - 100 пикселов, а средний столбец - это все оставшееся между ними место (знак *). Если вы будете размеры фреймов устанавливать в пикселах, то желательно ширину (или высоту) одного из них определить значком *. Можно, например, написать cols="150,550,100", и все будет выглядеть отлично на вашем мониторе с разрешением 600*800. Но стоит только изменить разрешение, и картина полностью изменится. Потому-то и рекомендуется использовать "звездочку".

200

100

Пример: <frameset cols="200,*,100"> <frame src="page1.html"> <frame src="page2.html"> <frame src="page3.html"> </frameset>

150

Можно устанавливать пропорции для окон. В этом примере левый фрейм будет шириной в 150 пикселов, а остальную часть страницы поделят между собой 2-й и 3-й фреймы, причем третий фрейм будет в 2 раза шире первого.
<frameset cols="150,*,2*"> <frame src="page1.html"> <frame src="page2.html"> <frame src="page3.html"> </frameset>

15%

То же, но для рядов: 2-й фрейм занимает 15% от высоты окна, а 1-й и 3-й - все остальное в пропорции 1:3.
<frameset rows="*,15%,3*"> <frame src="page1.html"> <frame src="page2.html"> <frame src="page3.html"> </frameset>

Фреймы могут быть вложенными друг в друга. Это позволяет создавать более сложные конструкции страниц. Рассмотрим несколько примеров:

40%	60%
*

<frameset rows="25%,*"> <frameset cols="40%,60%"> <frame src="page1.html"> <frame src="page2.html"> </frameset> <frame src="page3.html"> </frameset>

В этом примере окно разбито на два фрейма: верхний занимает 25% высоты, нижний - все остальное. В свою очередь верхний фрейм разбит еще на два, где левый фрейм занимает 40% от ширины окна, а правый - 60 процентов.

Еще один пример. Предположим, мы хотим сделать такую страницу: окно, состоящее из левого фрейма шириной 200 пикселов, содержащего меню, и правого с каким-то текстом. Причем в левом фрейме вверху должен быть логотип высотой в 150 пикселов, размещенный в отдельном фрейме, а в правом внизу - баннер, который при скроллинге правого окна все время будет оставаться на месте. Должно получиться следующее:

Logo Text

Menu

Banner
<frameset cols="200,*"> <frameset rows="150,*"> <frame src="logo.html"> <frame src="menu.html"> </frameset> <frameset rows="*,70"> <frame src="text.html"> <frame src="banner.html"> </frameset> </frameset>

Рассмотрим аттрибуты тегов <frameset> и <frame>. Первый из них, <frameset> - парный тег, т.е. он обязательно должен иметь закрывающий тег. Может включать следующие аттрибуты:

cols и rows - применение и возможные значения этих аттрибутов были рассмотрены выше. Внимание! Не рекомендуется одновременное использование аттрибутов cols и rows, т.е. в некоторых браузерах конструкция <frameset cols="50%,50%" rows="30%,70%"> может привести к непредсказуемым результатам;
border="x" - толщина рамок фреймов в пикселах;
frameborder="no|yes" или "0|1" - определяет отсутствие (no или 0) или наличие (yes или 1) рамок в определенном фреймсете. Например, таким образом в предыдущем примере можно было бы убрать только рамки между баннером и текстом и между логотипом и меню, а между левым и правым фреймами оставить;
bordercolor="#hhhhhh" - цвет рамок. Значением может быть шестнадцатиричное число или зарезервированное слово (red, blue, teal, olive и т.д.);

Тег <frame> может включать следующие аттрибуты:

src="имя" - указывает браузеру, что и откуда надо загружать в данный фрейм;
name="имя" - присваивает имя фрейму. Позволяет управлять данным фреймом из других. Например, клик по ссылке в одном фрейме будет вызывать загрузку страницы в другом фрейме (подробнее в следующем абзаце);
marginwidth="x" - величина отступа содержимого фрейма (текста, графики и т.п.) от границ по горизонтали. Выражается в пикселах, минимальное значение 1;
marginheight="y" - величина отступа по вертикали. Минимальное значение также 1;
scrolling="yes" - определяет наличие полос прокрутки у данного фрейма. Возможные значения аттрибута:
- yes - полосы прокрутки присутствуют обязательно;
- no - полосы прокрутки отсутствуют всегда - независимо от того, вмещается ли документ в фрейм целиком или нет;
- auto - автоматический режим (значение по умолчанию): полосы прокрутки появляются при необходимости, т.е. если документ не вмещается в фрейм;
noresize - наличие этого аттрибута запрещает изменение размеров фрейма пользователем (обычно любую границу фрейма можно с легкостью переместить мышкой).

Как указывалось выше, аттрибут name тега <frame> позволяет присвоить каждому фрейму свое имя, что позволяет управлять содержимым одного фрейма из другого (т.е. как в этих уроках - вы кликаете по ссылке в левом фрейме, а меняется содержимое правого). Как это сделать, рассмотрим на примере:

Меню Раздел 1
В левом фрейме у нас меню, а в правом - раздел первый: <frameset cols="200,*"> <frame src="menu.html"> <frame src="razd1.html" name="content"> </frameset>
Правому фрейму мы присвоили имя "content" (можно любое другое). Теперь создадим файл menu.html, это будет меню для левого фрейма:

  <html>
  <head>
  <title>menu</title>

  </head>
  <body>
  <a href="razd1.html" target="content">Раздел 1</a>
  <br>

  <a href="razd2.html" target="content">Раздел 2</a>
  <br>
  <a href="razd3.html" target="content">Раздел 3</a>

  <br>
  <a href="razd4.html" target="content">Раздел 4</a>
  <br>
  </body>

  </html>

Теперь клик по ссылке "Раздел 2" вызовет загрузку страницы "razd2.html" в фрейме с именем "content" (т.е. в правом фрейме). При отсутствии аттрибута target (перводится с английского как "цель") загрузка произошла бы в левом фрейме, где находится сама ссылка. Этот аттрибут в данном примере можно указать только один раз - как аттрибут тега <base>, т.е. все ссылки по умолчанию будут загружаться в фрейме с именем "content". В таком случае текст будет выглядеть так:

<html> <head> <title>menu</title> </head> <body> <base target="content"> <a href="razd1.html">Раздел 1</a> <br> <a href="razd2.html">Раздел 2</a> <br> <a href="razd3.html">Раздел 3</a> <br> <a href="razd4.html">Раздел 4</a> <br> </body> </html>

Кроме имени фрейма значением аттрибута target может быть одно из следующих зарезервированных слов:

_blank - браузер должен открыть новое окно и загрузить в него документ (на который была ссылка) - обычно используется для того, чтобы посетитель не уходил по ссылке с вашего сайта;
_top - браузер должен загрузить документ в этом же окне, предварительно очистив его от всех фреймов - аттрибут с этим значением надо указывать обязательно, если вы делаете ссылку на другой сайт из фрейма. В противном случае этот сайт будет загружен в фрейме;
_self - документ загружается в том же фрейме, где находится сама ссылка. Может потребоваться в случае, если в тексте есть строка <base target="имя_фрейма">;
_parent - документ загружается в родительский фреймсет текущего фрейма.

Все вышеперечисленные значения должны начинаться с символа подчеркивания и набираться только прописными буквами.

Используя на своем сайте фреймы, нельзя забывать о том, что некоторые браузеры могут не поддерживать фреймы - старые браузеры, речевые и др. Специально для них существует тег noframes, в котором можно сделать "нефреймовую" версию сайта, или хотя бы просто перечислить ссылки на страницы сайта. Пример:

  <html>
  <head>
  <title>Раздел HTML</title>
  </head>
  <frameset cols="200,*">

  <frame src="menu.html">
  <frame src="razd1.html" name="content">
  </frameset>
  <noframes>

  <body>
  <p>Эта страница использует фреймы.
  Поскольку Ваш браузер не может просматривать такие страницы, 
  воспользуйтесь следующими ссылками:
  <p><a href="razd1.html">Раздел 1</a>
  <p><a href="razd2.html">Раздел 2</a>

  <p><a href="razd3.html">Раздел 3</a>
  <p><a href="razd4.html">Раздел 4</a>
  </body>

  </noframes>
  </html>

В результате браузер, поддерживающий просмотр фреймов, отобразит на эране только фреймы с их содержимым и проигнорирует все, что находится между <noframes> и </noframes>. Остальные браузеры не обратят никакого внимания на содержимое контейнера <frameset>, но воспоизведут содержимое <noframes>. Еще одна причина, по которой следует обращать внимание на тег <noframes> - далеко не все поисковые роботы понимают фреймы. Поэтому без <noframes> ваша страница рискует остаться непроиндексированной.

Придерживайтесь следующего порядка размещения: сперва контейнер <frameset>, а потом - <noframes> (т.е. как в примере). В противном случае возможна ошибка Netscap'а.

Существует еще одна разновидность фреймов - встроенный фрейм (inline frame). Он может быть вставлен непосредственно в текст страницы и выглядит следующим образом:

Для встраивания такого фрейма используется тег <iframe>. Наличие закрывающего тега обязательно. Между ними можно вставлять любой текст для браузеров, не поддерживающих фреймы. Аттрибуты:

src="filename.html" - указывает адрес содержимого фрейма;
name="name" - присвает имя фрейму;
width="x" - ширина фрейма;
height="y" - высота фрейма;
scrolling="yes|no|auto" - наличие полос прокрутки;
frameborder="1|0|yes|no" - наличие (yes или 1) или отсутствие (no или 0) рамки вокруг фрейма;
marginwidth="x" - величина отступа содержимого фрейма от границ по горизонтали;
marginheight="y" - величина отступа по вертикали.

Для примера выше был использован следующий код: <iframe src="examples/iframe.htm" width="300" height="70" scrolling="auto" frameborder="1"> Ваш браузер не поддерживает фреймы. Здесь должен быть размещен пример встроенного фрейма. </iframe>

Размеры такого фрейма не могут изменяться пользователем. Поэтому аттрибут noresize не используется.

И в заключение совет. Если ваш сайт будет построен с использованием фреймов, то часто посетители будут к вам приходить с поисковиков, и чаще всего они будут попадать на одну из внутренних страниц сайта. Естественно, сайт они увидят совсем не в том виде, как это задумывалось вами. Чтобы этого не происходило, вставьте в текст страниц такой код:

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
 if (self.parent.frames.length == 0) 
 document.writeln("Эту страницу лучше просматривать во фрейме.");
 document.writeln("Если ваш браузер поддерживает фреймы, то");
 document.writeln("<A HREF=\"index.html\">кликните здесь.</A>"); 
 // -->

</SCRIPT>

Или такой:

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
 if (self.parent.frames.length == 0) 
 self.parent.location="index.html"; 
 // -->
</SCRIPT>

Первый скрипт выводит предложение перезагрузить страницу, если она была загружена не в фрейме. Второй делает то же самое, но без предупреждения.