1.3 Создание html-документов
1.3.1 Основные приемы работы
Рассмотрим технологию создания Web-документов с помощью языка HTML.
Для набора тегов HTML будем использовать редактор Блокнот. После запуска редактора (ПУСК/ ПРОГРАММЫ/ СТАНДАРТНЫЕ/ БЛОКНОТ) разместим в его окне основные теги документа HTML, например:
<html>
<head><title> Пример </title></head>
<body> Пример документа HTML</body>
</html>
Далее сохраним документ с расширением .htm, например doc1.htm. Для просмотра данного документа воспользуемся броузером Internet Explorer. Вид полученной при этом Web-страницы представлен на рисунке 1.
Рисунок 1 Пример документа HTML
Для дальнейшего редактирования данного документа можно воспользоваться в меню Internet Explorer командой ВИД/ ПРОСМОТР HTML-кода (либо - в зависимости от версии Internet Explorer - ВИД/ В ВИДЕ HTML).
1.3.2 Теги разбивки текста
Для создания в Web-документах выделяющихся по оформлению текстовых заголовков используются следующие теги:
<h1></h1>;
<h2></h2>;
<h3></h3>;
<h4></h4>;
<h5></h5>;
<h6></h6>.
Заголовок 1-го уровня h1 при этом соответствует самому крупному шрифту броузера, а заголовок 6-го уровня h6 – самому мелкому. Для выравнивания заголовков используется атрибут данных тегов align, где его значение left соответствует выравниванию заголовка по левому краю страницы, center - по центру, right - по правому краю, например:
<h2 align= left> ВВЕДЕНИЕ </h2>.
Для выделения абзацев текста используется тег <p> </p>; при выводе абзацев на экран броузер устанавливает между ними пустую строку. Для перехода к новой строке документа можно использовать тег <br>.
1.3.3 Создание гиперссылок
Гиперссылки позволяют перемещаться между различными Web-документами. Для создания гиперссылок в языке HTML используется тег <a></a>. С помощью его атрибута name можно создать метку (закладку) внутри текущего HTML – документа. Для перехода к меткам либо другим документам используется атрибут href, позволяющий указать URL–адрес перехода по ссылке.
Например, с помощью команд следующего вида
<html>
<head> <title>Содержание</title> </head>
<body>
<h2>Содержание</h2>
<p><a href="part1.htm"> Раздел 1 </a></p>
<p><a href="part2.htm"> Раздел 2 </a></p>
<p><a href="part3.htm"> Раздел 3 </a></p>
</body>
</html>
можно организовать переход к документу part1.htm по ссылке «Раздел 1», к part2.htm по ссылке «Раздел 2» и к part3.htm по ссылке «Раздел 3» (см. рисунок 2). Для просмотра содержания выбранного раздела достаточно навести указатель мыши на его название и щелкнуть левой клавиши мыши.
Рисунок 2 Пример гипертекстового документа
1.3.4 Создание фреймов
Понятие фреймов часто используется в Web-проектировании для обозначения определенных областей экрана (иначе говоря, окон, кадров).
Для создания фреймов используется парный тег <frameset> </frameset> (тег <body> в таком документе должен отсутствовать). Можно разделить экран на несколько вертикальных или горизонтальных фреймов. Между тегами <frameset> и </frameset> могут находится теги <frame>, описывающие каждый фрейм в отдельности.
У тега <frameset> имеется два взаимоисключающих параметра: rows и cols, где rows определяет горизонтальные подокна, а cols - вертикальные подокна.
Для описания размеров подокон используется простое числовое значение, определяющее фиксированную высоту (ширину) подокна в пикселях или значение величины подокна в процентах от 1 до 100, например, <frameset cols="30%,*">.
В теге <frame> задаются параметры для каждого фрейма в отдельности. Параметр src задаёт имя файла, который загрузится в этом фрейме. Параметр name задаёт имя данного фрейма. Имя фрейма может быть использовано для определения действия с данным фреймом из другого HTML-документа или фрейма.
Например, для создания документа, состоящего из двух вертикальных фреймов (20% и 80% области экрана), можно использовать команды вида:
<html>
<head> <title>Пример фреймов</title> </head>
<frameset cols="20%,*">
<frame name="frame1" src="menu_primer.htm ">
<frame name="frame2" src="part1.htm">
</frameset>
</html>
Полученный в результате документ (см. рисунок 3) содержит два фрейма: frame1 (шириной 20% экрана) и frame2 (оставшегося размера). В левом фрейме frame1 загружается содержимое файла menu_primer.htm, в правом фрейме frame2 - файл part1.htm.
Рисунок 3 Пример старницы с фреймами
Для того чтобы по ссылке в "левом" фрейме открылся файл в "правом" фрейме, гиперссылка в "левом" фрейме должна содержать атрибут target, используемый для задания имени фрейма, в который делается загрузка по ссылке:
<a href="имя файла" target="имя фрейма" > ссылка </a>,
где: "имя файла" - имя файла, загружаемого по ссылке во фрейм с именем "имя фрейма".
Если этого атрибута нет, то файл будет выведен в том же окне, где указана ссылка. Зарезервированные (служебные) имена фреймов:
_blank - загрузить файл в новое окно без названия;
_self - загрузить файл во фрейм, откуда делается вызов. Перед новой загрузкой выполняется его очистка;
_parent - загрузить файл в старший (родительский) фрейм. Если старшего фрейма нет, то во фрейм вызова;
_top - загрузить файл в полное окно. Разрушает всю структуру фреймов.
Для того чтобы в приведенном выше примере по ссылкам из левого фрейма frame1 загружались документы в правый фрейм frame2, документ menu_primer.htm должен иметь следующий вид:
<html>
<head> <title>Содержание</title> </head>
<body>
<h2>Содержание</h2>
<p><a href="part1.htm" target="frame2"> Раздел 1 </a></p>
<p><a href="part2.htm" target="frame2"> Раздел 2 </a></p>
<p><a href="part3.htm" target="frame2"> Раздел 3 </a></p>
</body>
</html>