WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!

Pages:     | 1 |   ...   | 3 | 4 || 6 |

«Вадим Дунаев JavaScript Изучите один из популярнейших языков для самостоятельно издание Прочитав эту книгу, вы узнаете: ...»

-- [ Страница 5 ] --

При щелчке на ярлыке указанное в нем приложение открывается. Аналогичный ссылочный файл с расширением содержит документа (веб-страни цы). Создать ярлык на рабочем столе компьютера, в меню Пуск, в папке Автоза грузка, Избранное или в любой другой папке можно с помощью объекта Wscript.Shell, входящего в состав WSH. Этот объект (точнее, его экземпляр) создается двумя способами, так же, как и • Первый способ:

var Myshell = new • Второй способ:

var Myshell = С помощью метода можно узнать местоположение специальных папок, таких как Рабочий стол, Автозагрузка, Избранное, Мои документы, Программы и др. За этими папками закреплены специальные идентификаторы (переменные).

Например, папке Рабочий стол соответствует идентификатор Desktop, папке Мои документы — папке Избранное — Favorites. Вот список всех идентифи каторов специальных папок:

Desktop, Favorites, Fonts, MyDocuments, NetHood, Programs, Recent, SendTo, StartMenu, Startup, Templates.

Чтобы получить местоположение папки, например Главное меню, открываемой при щелчке на кнопке Пуск, следует выполнить следующие выражения:

var Myshell = new var mypath = /* Значение: меню */ 5.4. Работа с файлами В листинге 5.6 приводится пример программы создания ярлыка для Блокнота Win dows (notepad.exe) и расположения его на рабочем столе компьютера (в папке Ра бочий стол).

Листинг 5.6. Код программы создания ярлыка для Блокнота var = new var = // путь к папке Рабочий стол /* Создание ярлыка и подписи к нему: */ var = + /* Папка расположения Windows: */ var = /* Параметры ярлыка: */ // расположение файла:

= + = // рабочая папка // тип окна (стандартное) /* файл, содержащий графическое изображение ярлыка: */ = + // сохранить на диске Здесь возвращает строку, содержа щую значение переменной среды, в данном случае По умолчанию файл notepad.exe находится в папке расположения операционной системы Windows, но эта папка не обязательно называется Свойство WindowStyle может при нимать три значения: 3 — развернуть окно на весь экран, 4 — стандартное окно, 7 — свернуть в значок на панели задач.

следующем примере создается ярлык в главном меню кнопки Пуск для некото рой программы var Myshell = new var var myshortcut = + = = // тип окна (развернуть на весь экран) = Приведенный ниже код создает в папке Избранное ссылку на главную страницу веб-сайта автора этой книги:

var Myshell = new var mypath = var myshortcut = + себе = Основное отличие этого примера от предыдущих состоит в том, что свойству TargetPath (путь к цели) присваивается URL-адрес документа.

Глава 5. Работа с файловой и реестром Windows 5.4.5. Запуск приложений Для запуска приложений служит метод объекта Командная стро ка запуска приложения (обычно это просто полное имя файла программы) пере дается методу в качестве строкового параметра.

Примеры var = new 5.5. Работа с реестром Реестр Windows представляет собой базу данных, содержащую сведения об ее настраиваемых параметрах, или, как еще говорят, о конфигурации операционной системы. Кроме того, в реестре хранится информация о настройках аппаратных средств компьютера и программ. Реестры различных систем и версий семейства Windows частично различаются. Однако между ними много общего. В Windows (Windows for WorkGroups) реестр хранится в файле reg.dat в папке Windows.

В более поздних версиях, Windows 9x/Me и т. реестр размещается в двух фай лах, расположенных в папке Windows: system.dat и user.dat. Реестр задумывался для замены настроечных Записи в файле реестра имеют более удоб ную древовидную структуру. Хотя также поддерживаются Windows, разработчикам программного обеспечения рекомендуется хранить настроечную информацию в реестре.

Чтобы работать с реестром, необходимо понимать его структуру. Древовидная структура реестра представляет собой иерархически упорядоченное множество разделов (папок), содержащее следующие шесть разделов самого верхнего (кор невого) уровня (табл. 5.1).

Таблица 5.1. Разделы реестра Имя раздела реестра Сокращенное имя Описание верхнего уровня раздела реестра HKEY_CLASSES_ROOT Содержит информацию о зарегистриро ванных типах файлов, OLE и др.

Содержит параметры настройки оболочки Windows для пользователя, вошедшего в Windows. Например, настройки Рабочего стола, меню кнопки Пуск. Если на компьютере работает единственный пользователь и используется обычный вход в Windows, то содержимое этого раздела берется из подраздела Содержит информацию об установленных драйверах и программном обеспечении 5.5. Работа с реестром Имя раздела реестра Сокращенное имя Описание верхнего уровня раздела реестра USERS Содержит параметры настройки оболочки Windows для всех пользователей.

Информация из этого раздела копируется в раздел С другой стороны, все изменения в разделе HKEY_CURRENT_USER автоматически переносятся в раздел HKEY_USER HKEY CURRENT CONFIG HKCC Содержит информацию о настройках устройств Plug&Play, а также сведения о настройках компьютера с переменным составом аппаратных средств DYN_DATA HKDD Содержит изменяющиеся данные о состоянии устройств, установленных на компьютере пользователя. Эти сведения отображаются в окне Панель управления Система Устройства Свойства. Данные этого раздела обновляются операционной системой Windows, и поэтому не рекомендуется редактировать его самостоятельно Перечисленные коренные разделы имеют подразделы, а те — свои подразделы и т. д.

В конечном разделе ветви дерева реестра определяются параметры. Каждый па раметр имеет имя и значение. Работа с реестром заключается в просмотре, созда нии и удалении его записей. Так, вы можете создать или удалить раздел реестра, создать или удалить параметр в каком-либо разделе. Однако делать это без четко го понимания целей и правил не рекомендуется.

ВНИМАНИЕ Не следует открывать и редактировать файлы реестра system.dat и user.dat в текстовом редакторе.

Здесь мы не будем подробно обсуждать, что нужно изменить в реестре, чтобы по лучить тот или иной эффект. Рассмотрим, как можно изменять записи в реестре, если такая необходимость возникла.

Для работы с реестром используются три основных способа.

• С помощью редактора реестра — программы Чтобы запустить ре дактор реестра, достаточно выполнить команду Пуск Выполнить, ввести с кла виатуры слово regedit и щелкнуть на кнопке ОК. Данный способ наиболее без опасный.

• С помощью reg-файлов. Это текстовые файлы с расширением записи в ко торых имеют довольно простую структуру. Запуск reg-файла, например, двойным щелчком на его имени в Проводнике Windows приводит к открытию диалогового окна с предложением добавить информацию из этого файла в реестр. При вашем согласии данные из reg-файла будут импортированы в файлы реестра.

294 Глава 5. Работа с файловой системой и реестром Windows • С помощью программы JavaScript, использующей специальные методы Win dows Scripting Host. В этом случае можно организовать не видимую пользова телем работу с реестром (если, конечно, он не заблокировал выполнение сце нариев).

Рассмотрим сначала структуру записей в который можно создать с по мощью обычного текстового редактора, например Блокнота Windows. В первой строке этого файла должно быть написано прописными буквами Затем должна быть пустая строка. В следующей, третьей строке в квадратных скобках пишется имя раздела реестра. В четвертой строке располагается запись согласно приведенному ниже формату:

Если в данном разделе реестра следует разместить еще один параметр, то запись о нем располагается в следующей строке. Таким образом, сведения о каждом па раметре записываются в отдельной строке reg-файла. Аналогичным образом можно создать записи, относящиеся к другому разделу реестра. Однако между такими секциями, каждая из которых соответствует отдельному разделу реестра, обяза тельно должна быть одна пустая строка. Таким образом, структура reg-файла имеет следующий вид:

REGEDIT...

• • Значения параметров могут принадлежать одному из трех типов:

• строковый — значения этого типа являются просто строкой символов, заклю ченной в кавычки;

• DWORD — для записи значения этого типа используется формат Вместо X записываются цифры. Обычно параметры типа DWORD имеют значение либо 0, либо 1. В этих случаях для задания значения требуется записать либо либо • двоичный — для записи значения этого типа используется формат Вместо XX записываются шестнадцатеричные цифры;

пары таких цифр разде ляются запятой. Например, для задания значения af 00 01 00 следует записать hex:af,00,01,00.

5.5. Работа с реестром Кроме того, в реестре могут быть установлены параметры по умолчанию (default).

Чтобы присвоить какое-то значение параметру по умолчанию, необходимо про сто записать в reg-файле следующее выражение:

Рассмотренные выше записи добавляют, а не перезаписывают записи в реестре. Чтобы удалить раздел в реестре, необходимо в reg-файле перед его име нем в квадратных скобках поставить символ «минус», как в следующем примере:

Чтобы удалить параметр, следует присвоить ему символ «минус»:

Ниже в качестве примера приведено содержимое reg-файла, с помощью которого устанавливается начальная веб-страница, загружаемая в браузер Internet Explorer:

REGEDIT Читать, создавать и удалять записи в реестре можно с помощью специальных ме тодов объекта входящего в состав WSH:

• RegReadQ — возвращает запись реестра или значение параметра;

• RegWriteQ — создает новую запись в реестре или изменяет значение параметра уже существующей записи;

• — удаляет запись реестра или параметр.

Применение этих методов имеет следующий синтаксис:

var Myshell = new Метод RegWrite() принимает в качестве параметра строку, содержащую имя разде ла реестра, за которым указывается имя параметра. Все элементы имени раздела разделяются двойными обратными слэшами. Например, в строке последний элемент myparam является именем параметра, а не раздела реестра.

Метод RegWriteQ принимает три параметра, из которых последний не является обязательным. Первый параметр — строка, содержащая имя раздела или имя па раметра. Если эта строка заканчивается двойным слэшем, то подразумевается, что последний элемент строки — имя раздела, в противном случае — имя параметра в разделе. Второй параметр метода RegWriteQ представляет значение параметра раздела. Если имя параметра раздела не указано, то подразумевается параметр по умолчанию. Третий, необязательный параметр метода RegWriteQ задает тип пара метра в разделе реестра и представляет собой или со ответственно для типов DWORD и двоичного. Если тип не указан, то подразумева ется строковый тип.

Примеры var Myshell = new /* Создание подраздела Myreg в разделе и присвоение параметру по умолчанию значения "значение": */ 296 Глава 5. Работа с файловой и реестром Windows /* Создание в разделе HKEY_CURENT_USER\ Myreg строкового параметра и присвоение ему значения "некоторая строка": */ "некоторая строка") /* Создание в разделе Myreg двоичного параметра и присвоение ему значения 5: */ /* Создание в разделе Myreg параметра типа DWORD и присвоение ему значения 3: */ Метод принимает в качестве параметра строку, содержащую имя раз дела или параметра. Если эта строка заканчивается двойным слэшем, то подразу мевается, что последний элемент строки — имя раздела, в противном случае имя параметра в разделе.

Примеры var Myshell = new /* Удаление в разделе HKEY_CURENT_USER\ Myreg параметра myparaml: */ /* Удаление подраздела Myreg в разделе */ СОВЕТ Вместо полных имен корневых разделов реестра можно использовать их сокращенные обозначения. Например, вместо можно писать В листинге 5.7 приведен пример программы, делающей запись в реестре, которая устанавливает стартовую веб-страницу.

Листинг 5.7. Запись установки стартовой страницы var Myshell = new var mystartpage = // нужная страница /* Проверяем, какая веб-страница является начальной: */ startpage = Page") if (startpage != mystartpage) // если другая Explorer\\Main\\Start mystartpage) Аналогичным образом можно создать записи в реестре, запускающие прило жения.

Приложение 1. Руководство по динамическому HTML Основные понятия HTML (HyperText Markup Language — язык разметки гипертекста) является ос новным языком программирования веб-страниц. Описания веб-страниц содер жатся в HTML-программах которые хранятся в обычных тексто вых файлах с расширением htm или html. Иногда эти программы называют HTML документами, но обычно считается то, что можно видеть в окне браузера. Программы на языке HTML содержат инструкции (коды), называемые тегами. Теги представляют собой последовательности символов, заключенные в угловые скобки (например, <Р>).

Большинство современных браузеров допускают запись тегов в любом регистре, то есть как прописными, так и строчными буквами. Все ключевые слова тегов, являющиеся обычно аббревиатурами слов английского языка, записываются бук вами латинского алфавита. Например, IMG — сокращение слова image (изображе ние).

HTML-программа должна начинаться тегом и заканчиваться тегом Между ними находятся другие теги программы или текст, который вы хотите вывести в окне браузера. Некоторые теги используются только парами (на пример, и ). При этом первый из них называется открывающим, а второй — закрывающим. Иногда парные теги называют контейнерными, пото му что между ними можно разместить другие теги. Таким образом, в контейнер ные теги можно вкладывать другие теги, в том числе и контейнерные, то есть теги могут быть вложенными. Сейчас запомните этот факт, а в дальнейшем разберем ся, как ими пользоваться. Существуют одиночные теги, для них нет соответствую щих закрывающих тегов. Примером одиночного тега является тег
(конец строки).

Теги могут содержать параметры, называемые атрибутами, которые, в свою оче редь, могут иметь значения — аргументы. Можете считать (если так удобнее), что тег — это команда, атрибут — имя ее параметра, а аргумент — значение парамет ра. Например, для вывода на экран изображения, хранящегося в файле используется тег 298 Приложение 1. Руководство по динамическому HTML Здесь IMG — название тега, SRC — атрибут, а — аргумент атрибута SRC.

Итак, если мы решили написать HTML-программу, то должны включить в нее два тега:

(здесь будут другие теги программы) HTML-программы состоят из двух основных частей: заголовка и тела. Каждая из этих частей ограничивается соответствующей парой тегов. Так, заголовок огра ничивается парой тегов и а тело — тегами и . В ре зультате HTML-программа выглядит следующим образом:

(здесь будет заголовок) (здесь будут теги тепа программы) Заметим, что писать каждый тег с новой строки или делать отступы совсем не обязательно, однако благодаря этому программа читается лучше.

Между тегами и обрамляющими заголовок (HTML файла), напишем еще два тега: 5 Вадим Дунаев JavaScript Изучите один из популярнейших языков для самостоятельно издание Прочитав эту книгу, вы узнаете: общие принципы программирования основные элементы языка JavaScript алгоритмы и. С помощью этих тегов обрамля ется текст, который помещается в заголовок браузера, то есть в самую верхнюю полоску его окна. Пусть текст заголовка будет, например, таким: «Основные эле менты HTML». Тогда программа примет следующий вид:

5 Вадим Дунаев JavaScript Изучите один из популярнейших языков для самостоятельно издание Прочитав эту книгу, вы узнаете: общие принципы программирования основные элементы языка JavaScript алгоритмы и HTML-документы состоят из заголовка и тела. В теле документа могут находиться тексты, рисунки и ссылки на другие файлы.

Раскроем окно текстового редактора Блокнот (Notepad) и напишем в нем текст на шей первой HTML-программы (рис.

Сохраним нашу программу в файле с расширением htm или html. Например, на значим имя файла Чтобы удалось назначить нужное расширение фай ла, выберите в диалоговом окне тип файла Все файлы (*.*) и введите в поле Имя файла придуманное вами имя файла с нужным расширением. Теперь необходимо Основные понятия Л 5 Вадим Дунаев JavaScript Изучите один из популярнейших языков для самостоятельно издание Прочитав эту книгу, вы узнаете: общие принципы программирования основные элементы языка JavaScript алгоритмы и 1-го уровня 2-го уровня Форматирование текстов <НЗ>Заголовок 3-го уровня <Н4>Заголовок 4-го уровня <Н5>Заголовок 5-го уровня <Н6>Заголовок б-го уровня 7-го уровня Управление шрифтом Кроме использования стандартных размеров и начертаний (гарнитуры) шриф тов можно определять шрифты для каждого фрагмента текста с помощью специ альных тегов.

Самый простой способ — использование так называемых физических стилей (табл. 1.1).

Таблица П1.1. Теги физических стилей Стиль Тег Полужирный (Bold) Курсив (Italic) Подчеркнутый (Underscore) Вычеркнутый (Strike Out) Пишущая машинка (Typewriter) (только для браузера Netscape Navigator) Для каждого тега физического стиля существует соответствующий закрывающий тег, который отменяет стиль, установленный ранее. Например, для тега <В> за крывающим тегом является .

Ниже приведен пример программы и внешний вид различных физических сти лей (рис. П1.6):

<ТТ>Пишущая курсив подчеркнутый Внутри тега заголовка можно вставить тег физического стиля, чтобы модифици ровать весь заголовок или только некоторую его часть (рис. Например, чтобы выделить курсивом часть текста, определенного в качестве заголовка, можно ис пользовать следующую конструкцию:

и логические 306 Приложение 1. Руководство по динамическому HTML Физические стили * Microsoft Сервис. а I ДОМОЙ Полужирный машинка Полужирный курсив курсив подчеркнутый • Рис. Физические стили Физические и логические стили - Microsoft Это заголовок 2-го уровня Рис. Изменение части заголовка <Н2>Это - заголовок 2-го С помощью специального тега можно настроить шрифт для изображения текста: задать гарнитуру, размер и цвет. Прежде всего вы можете установить раз мер основного шрифта, который используется в документе по умолчанию. Тег основного шрифта имеет формат

Тег устанавливает размер текущего шрифта равным 5.

Для задания гарнитуры шрифта используется тег вы можете указать через запятую перечень шрифтов.

В этом случае браузер будет использовать первый найденный шрифт.

Пример

С помощью атрибута COLOR в теге можно задать цвет шрифта:

Установка шрифтов - Internet Anal Шрифт Courier Шрифт Рис. Использование различных шрифтов Приложение 1. Руководство по HTML <Р>Шрифт <Р>Шрифт = SIZE=7 Заметим, что в теге можно использовать несколько его атрибутов или все возможные.

Пример и — соответственно для верхних и нижних индексов.

> индексов примечания 2 а Индексы Сервис Подстрочные примечания* ] ( И Рис. Использование верхних и нижних индексов Кроме рассмотренных выше, имеются дополнительные теги тек стов:

• — выделение адресов электронной почты, почтовых адресов и номе ров телефонов;

Форматирование текстов • — выделение цитат;

, — запись текстов программ, символьных констант;

— ввод текстов с клавиатуры.

В последних трех стилях используется моноширинный шрифт (обычно Courier).

Например, символ «I» данного шрифта занимает столько же места, сколько и буква «Ж». Использование таких шрифтов обусловлено простой возможностью вырав нивания текста с помощью символа пробела.

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

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

Цвет фона определяется атрибутом BGCOLOR тега . Например, тег, задаю щий цвет фона имеет вид:

. Тег, при веденный ниже, задает зеленый цвет фона и синий цвет для текста:

Таблица Таблица соответствий имен цветов и их представлений Цвет Имя цвета представление Черный BLACK NAVY SILVER Синий BLUE #OOOOFF MAROON Пурпурный PURPLE # Приложение 1. Руководство по динамическому HTML Таблица 1.2 (продолжение) Цвет Имя цвета представление #FFOOOO Красный RED FUCHSIA #FFOOFF Зеленый GREEN # TEAL # LIME #OOFFOO AQUA #OOFFFF OLIVE # Серый GREY # Желтый YELLOW #FFFFOO Белый WHITE #FFFFFF Текст заданного формата Браузер обычно преобразует текст HTML-файла при выводе его на экран, то есть игнорирует лишние пробелы, символы табуляции и символы конца строки. Если вы хотите, чтобы текст на экране выглядел так, как вы его ввели в HTML-доку мент, то воспользуйтесь тегом предварительного форматирования

. Текст должен находиться между тегами 
 и 
.

Списки Довольно часто требуется разместить на странице списки (перечни элементов).

Списки бывают неупорядоченными и упорядоченными (по алфавиту или по циф рам). При отображении списков браузер выделяет их отступом от края страницы.

Кроме того, списки могут быть вложенными.

Упорядоченные списки задаются тегом

    , а неупорядоченные — тегом
      .

      Оба эти парные, то есть контейнерные.

      Для упорядоченных списков можно выбрать способ индексации. Это делается с по мощью атрибута TYPE с аргументами: 1 (арабские цифры), А (прописные буквы), а (строчные буквы), I (римские цифры). Можно задать номер, с которого начина ется нумерация элементов списка. Для этого служит атрибут START внутри тега

        .

        Перед элементами списков следует поставить тег

      1. , чтобы индексация проис ходила автоматически. В этом теге можно использовать и вышеописанный атри бут TYPE.

        В листинге приведены примеры, показывающие различные способы созда ния списков (рис.

        Листинг П1.1. Различные способы создания списков > Форматирование текстов Списки ил ж Списки Это - упорядоченный номер - 5. Элемент 6. Элемент 7. Элемент 8. Элемент Это - упорядоченный римскими цифрами i. Элемент Элемент Элемент iv. Элемент Это - неупорядоченный список. Здесь используются различные вводные маркеры • Элемент • Элемент Элемент • Элемент Рис. Варианты списков <Р>Это - упорядоченный список. Начальный номер TYPE=1 START=5> <Р>Это - упорядоченный список. Нумерация римскими цифрами

        <Р>Это - неупорядоченный список. Здесь используются вводные маркеры
        Приложение 1. Руководство по динамическому HTML Разделительные полосы При оформлении текста, чтобы отделить один раздел от другого, нередко исполь зуют разделительные полосы. Можно задать ширину, толщину и способ вырав нивания разделительной полосы. Разделительная полоса задается тегом
        , внутри которого можно вставить атрибуты:

        • SIZE — толщина в пикселах;

        • WIDTH — ширина в пикселах;

        • ALIGN — способ выравнивания (принимает значения CENTER, LEFT или RIGHT);

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

        Ниже приведен пример задания разделительных полос (рис.

        Файл Справна Разделительные отделения частей текста можно полосы. Такие полосы тегом обычная без Можно задавать толщину и ширину Это - толщиной Это - полоса толщиной 10 и шириной Это - полоса толщиной 5, с NOSHADE | Рис. Разделительные полосы Форматирование текстов отделения частей текста можно использовать разделительные полосы вставляются тегом HR.
        Это - обычная полоса, заданная без указания атрибутов


        задавать различные толщину и ширину полос. Это — полоса толщиной
        <Р>Это - полоса толщиной 10 и шириной
        <Р>Это - полоса толщиной 5, заданная с атрибутом N05HADE
        <НЗ> Задав равные небольшие значения для высоты и ширины, получим квадратик, который можно использовать в качестве маркера для разделения частей страни цы или элементов списка. Однако в этом случае требуются специальные средства позиционирования элементов.

        Бегущая строка Internet Explorer поддерживает который позволяет создать так называемую бегущую строку, то есть эффект прокручивания текста в заданном поле. Характеристики бегущей строки задаются следующими атрибутами:

        • WIDTH — ширина поля бегущей строки в пикселах или процентах от ширины окна;

        • HEIGHT — высота поля бегущей строки (в пикселах);

        • HSPACE, VSPACE — интервалы по горизонтали и вертикали между текстом стро ки и краями ее поля (в пикселах);

        • ALIGN — определяет положение текста бегущей строки в ее поле;

        возможные аргументы:

        ТОР (вверху);

        а BOTTOM (внизу);

        О MIDDLE (посередине);

        • DIRECTION — определяет направление движения;

        возможные аргументы:

        LEFT (справа налево);

        RIGHT (слева направо);

        • BEHAVIOR — характер движения строки;

        возможные аргументы:

        SCROLL — текст появляется от одного края и скрывается за другим;

        О SLIDE — строка вытягивается из одного края поля и останавливается у дру гого края;

        ALTERNATE — задает переменное направление движения, от одного края к дру гому, а затем обратно;

        314 Приложение 1. Руководство по динамическому HTML • LOOP — количество повторений текста в бегущей строке, задаваемое числом;

        если необходимо «бесконечное» количество повторений, то следует задать ар гумент в виде ключевого слова INFINITY. Атрибут LOOP не влияет на поведение бегущей строки, если для атрибута BEHAVIOR заданы аргументы ALTERNATE или SLIDE;

        • SCROLLAMOUNT — устанавливает длину в пикселах «прыжка» текста за один такт;

        при большом значении этого параметра текст движется рывками, а при ма лом — замедленно;

        • — определяет величину паузы между тактами перемещения тек ста в миллисекундах;

        • BGCOLOR — устанавливает цвет поля бегущей строки, задаваемый шестнадцате числом или именем.

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

        В следующем примере бегущая строка «бесконечно» прокручивается на желтом поле шириной 75% от ширины окна браузера (рис.

        строка расположена "бегущая будет Рис. Бегущая строка Ниже расположена "бегущая строка" HEIGHT=50 HSPACE=5 VSPACE=5 ALIGN=TOP DIRECTION=LEFT BEHAVIOR=SCROLL

        Это сообщение будет прокручиваться на экране справа налево Специальные и зарезервированные символы При формировании может ввести символы, ко торые воспринимаются браузером как служебные. Например, нельзя Форматирование текстов вать символы < и > для обозначения знаков «меньше» и «больше», так как они интерпретируются как символы тегов. Кавычки и (&) также исполь зуются в языке HTML для служебных целей. Кроме того, все символы, которые можно набрать при нажатых клавишах управления, отличных от могут не воспроизводиться при просмотре HTML-документа, поскольку они зарезервиро ваны.

        ВНИМАНИЕ Вместо зарезервированных символов в текст следует вставить их буквенные эквиваленты или коды ASCII. В качестве буквенного эквивалента используются соответствующие со кращения.

        Буквенный эквивалент имеет формат:

        Например, обозначает символ < (less then, меньше чем).

        Цифровой эквивалент имеет формат:

        Например, символ < можно вставить в документ как Таким образом, эквиваленты заключаются между символами & и точкой с запя той. При этом в случае цифрового эквивалента перед ASCII-кодом символа сле дует поставить символ На рис. представлена таблица эквивалентов для некоторых часто употребляемых зарезервированных символов. Данная таблица сформирована как HTML-документ. В листинге приведено его содержание как пример использования специальных и зарезервированных символов.

        Листинг П1.2. Код таблицы эквивалентов некоторых зарезервированных символов


        34 quote
        62 gt
        160 nbsp
        162 cent
        §

         

         

        167 sect
        169 copy
        174 reg
        ±

         

         

        182 para
        190 frac34
        216 Oslash
        Приложение 1. Руководство по динамическому HTML Специальные Сервис т Эквивалент 34 quote & 38 amp < > 62 gt cent 163 pound § 167 sect 169 copy ® 174 reg ± 181 micro 1 182 para Ч Ч 190 frac E 198 AElig 0 Oslash * 247 divide Рис. Таблица эквивалентов для некоторых зарезервированных символов применен только для того, чтобы использовать моноширинный шрифт.

        Многократное использование символа (пробел) связано с тем, что браузер сокращает количество «лишних» введенных с клавиатуры, а они были необходимы для задания достаточно большого расстояния между столбцами таб лицы.

        на веб-страницах В большинстве веб-страниц встречается графика. Она позволяет красочно и на глядно представить информацию. Во многих случаях лучше показать изображе ние, чем давать длинное текстовое описание.

        Графика на веб-страницах Существует два способа размещения изображений на странице:

        • вставка отдельных изображений;

        • заполнение фона рисунком. » В любом случае графический объект берется из файла.

        Вставка изображений Вставка на страницу изображения из файла графического формата производится с помощью тега (от image — изображение) с указанием адреса файла в качестве аргумента атрибута SRC:

        Адрес графического файла — это либо URL-адрес, либо имя файла, возможно, с указанием пути.

        Например, для показа графического файла следует написать тег Для увеличения скорости передачи изображения в теге можно использо вать атрибут (дополнительный параметр) LOWSRC, который принимает в качестве аргумента адрес графического файла. Вы можете создать графических файла:

        один (например, пусть это файл logotip.jpg) содержит изображение, полученное с высоким разрешением, а другой (например, — рисунок, полученный с низким разрешением. Тогда тег предпишет браузеру сначала загрузить файл logotip.gif, а затем по мере загрузки страницы заменить его файлом logotip.jpg.

        Другой способ ускорения загрузки графики заключается в задании размеров изоб ражения с помощью атрибутов WIDTH (ширина) и HEIGHT (высота), измеряемых в пикселах. Если указать эти атрибуты, то браузер сначала выделит место под гра фику, подготовит макет документа, отобразит текст и только потом загрузит гра фику. Заметим, что браузер сжимает или растягивает изображение, встраивая его в рамки указанного размера. Пример указания размеров изображения:

        WIDTH=40 HEIGHT=20> Здесь атрибут WIDTH задает ширину прямоугольной области, в которой будет раз мещено графическое изображение, a HEIGHT — высоту.

        Графика обычно используется вместе с текстом, поэтому возникает задача вырав нивания текста и изображения. Эта задача решается с помощью атрибута ALIGN тега с применением различных аргументов. Например, мы можем пожелать, чтобы текст обтекал рисунок справа или слева. Обычно изображение встраивает ся вплотную с текстом, что может быть некрасиво. Чтобы этого избежать, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов VSPACE для верхнего и нижнего полей и HSPACE для боковых полей в теге .

        Аргументы этих атрибутов указываются в виде чисел, определяющих размеры полей в пикселах. Для отмены графики текстом служит тег

        .

        Если требуется расположить графический объект справа от текста, то необходи мо атрибуту ALIGN присвоить аргумент RIGHT:

        Чтобы задать поля вокруг иллюстрации, следует написать вида:

        ALI GN=LEFT Здесь числа 20 и 10 определяют размеры полей.

        Рассмотрим пример совместного использования графики и текстов. Вызовите Блокнот (текстовый редактор Notepad). Напишите в нем HTML-код с использо ванием рассмотренных выше тегов. Ниже приводится программа, выводящая некоторый текст и графику (рис. В качестве графического файла мож но использовать любой из имеющихся у вас файлов. Здесь используется файл Упражнение 1 J Текст обтекает графику справа Это - пример совместного использования текста и графики.

        Текст HTML писать в любом текстовом редакторе. При используются разметки текста.

        Этот текст выводится с нового Чтобы сделать это, мы использовали специальный тег.

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

        •!

        Рис. Совместное расположение текста и графики 5 Вадим Дунаев JavaScript Изучите один из популярнейших языков для самостоятельно издание Прочитав эту книгу, вы узнаете: общие принципы программирования основные элементы языка JavaScript алгоритмы и обтекает графику справа Это — пример совместного использования текста и Текст программы HTML можно писать в любом текстовом редакторе.

        При этом используются разметки текста.

        <Р> Этот текст выводится с нового абзаца. Чтобы сделать это, мы использовали специальный тег.

        <Р> Попробуйте изменить размеры окна Вашего браузера. Обратите внимание, как изменяется расположение текста.

        Широкие возможности точного позиционирования изображений (как и других элементов) на странице предоставляют таблицы и стили. Эти элементы HTML будут рассмотрены позже. Например, вы можете определить таблицу без види мых рамок, а в ячейках этой таблицы разместить рисунки, тексты и другие эле менты.

        Фоновая графика Чтобы украсить страницу, можно заполнить фон изображением из графического файла. Фоновое изображение — это файл, содержащий рисунок (желательно не большого размера), который многократно выводится на экран, заполняя все окно.

        Рисунок может представлять собой небольшой прямоугольник или же длинную узкую полоску (например, залитую градиентом).

        Фоновая графика задается в теге в начале подобно тому как задается цвет фона. При этом используется атрибут BACKGROUND, значением которого является имя графического файла. Например, если мы хотим для фона взять файл fon.gif, то соответствующий тег будет выглядеть так:

        ВНИМАНИЕ Следует иметь в что существуют неграфические браузеры, а в графических браузе рах пользователи могут отключать загрузку графики, поэтому можно задать и текстовое описание графики, встроенной в документ, то есть описать изображение или указать раз мер и формат графического файла.

        При наличии текстового описания пользователь графического браузера сможет сам решить, стоит ли загружать тот или иной графический файл или лучше не тратить на это время. Подмена графики текстом осуществляется с помощью ат рибута ALT в теге Пример gif 320 Приложение 1. Руководство по динамическому HTML Ссылки Ссылки (или гиперссылки) позволяют щелчком кнопкой мыши на выделенном тексте или изображении перейти к другому файлу или фрагменту страницы. Ссыл ки применяются в большинстве существующих страниц. Они могут быть тексто выми и графическими. Текстовые ссылки представляют собой выделенное слово или целую фразу. Выделение ссылки производится цветом или подчеркиванием, в зависимости от настройки браузера.

        В языке HTML структуры текстовых и графических ссылок подобны другу.

        Все они задаются тегом <А которому соответствует закрывающий тег .

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

        изображение с областями, щелчок на которых приводит к срабатыванию соответ ствующих ссылок.

        Текстовые ссылки Структура текстовой ссылки имеет следующий вид:

        Обратите внимание, что тег ссылки имеет закрывающую часть .

        Например, следующий тег описывает ссылку на HTML-файл при этом ссылка на экране будет представлена текстом Щелкните здесь:

        <А. Щелкните здесь Отметим, что браузер не выводит на экран имя файла, к которому требуется пе рейти по ссылке, а лишь показывает текст, заключенный в теге между угловыми скобками > и <. Если же вы хотите, чтобы внешне ссылка выглядела как имя фай ла, на который она ссылается, то просто напишите его имя вместо текста.

        Пример <А Можно ссылаться не только на другие файлы, но и на свой собственный файл.

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

        Например, следующий описывает ссылку на HTML-файл при этом ссылка на экране будет представлена изображением из файла logotip.gif:

        <А Ссылки К графической ссылке можно добавить поясняющий текст, как это сделано ниже:

        <А Щелкните здесь В рассмотренных выше графических ссылках одному изображению соответство вал один адрес ссылки. Однако имеется и другая возможность. Она заключается в том, чтобы одному изображению сопоставить несколько ссылок, привязав каж дую из них к некоторой области изображения. Такие области называют горячи ми, а сам технологический прием — графической картой ссылок, или сегментиро ванной графикой. Горячие области графической карты могут быть различной формы: прямоугольной, многоугольной или в виде окружности. Это очень удоб ный прием оформления группы ссылок, однако при выборе рисунка, служащего основой карты ссылок, следует стремиться к тому, чтобы границы горячих облас тей были хорошо очерченными и не пересекались. Кроме того, необходимо поза ботиться о том, чтобы пользователь понял, что имеет дело с картой ссылок, а не просто с графическим фоном. Для этого можно использовать поясняющие тек сты. При наведении на горячую область курсор мыши изменяет свою форму как и при использовании обычных ссылок. При щелчке на горячей области ее грани цы становятся видимыми.

        Графическая карта задается с помощью нескольких тегов. Первым является тег (карта) с атрибутом NAME для указания имени карты. Имя карты выбирает ся как имя переменной. Далее между тегами и следуют теги (область) для задания горячих областей. Тег имеет ряд атрибутов, описы вающих собственно ссылку, а также форму и положение горячей области:

        • HREF — строка, определяющая адрес ссылки;

        • SHAPE — определяет форму области;

        принимает аргументы:

        (прямоугольник);

        (многоугольник);

        "CIRCLE" (круг);

        • COORDS — координаты области, которые задаются в виде перечня чисел, разде ленных запятыми;

        весь перечень заключается в кавычки (для прямоугольника задаются четыре числа — координаты верхнего левого и правого нижнего уг лов;

        для многоугольника задаются координаты каждого угла;

        для круга зада ются три числа — координаты центра и радиус).

        После закрывающего тега следует указать тег, вставляющий изображение и реализующий привязку карты к нему, — это уже известный тег , в котором помимо прочих возможных атрибутов используется атрибут связи с картой:

        В качестве имени карты указывается аргумент атрибута NAME тега <МАР>.

        В нашем примере в основе графической карты ссылок находится топографиче ская карта некоторой местности. На ней мы определили прямоугольную и круг лую горячие области, соответствующие двум населенным пунктам. При щелчке на горячей области будет выведен документ или содер жащий, например, описание соответствующего населенного пункта.

        322 Приложение 1. Руководство по динамическому HTML Графические карты ссылок обычно используются для создания красочных меню, а также в тех случаях, когда внешний вид страницы формируется с помощью гра фического редактора (например, Adobe Photoshop), в котором можно создать кар тинку со всеми необходимыми надписями и художественными элементами — это альтернатива использованию множества тегов, вставляющих различные элемен ты. Основная трудность заключается в определении координат горячих областей.

        Однако если известны ширина и высота всего изображения, то координаты горя чих областей можно рассчитать хотя бы приблизительно, а затем уточнить опыт ным путем при отладке. Задача существенно упрощается при использовании та кого средства проектирования веб-страниц, как FrontPage.

        URL-адреса ссылок В рассмотренных выше примерах в качестве адреса ссылки использовалось имя файла. В общем случае можно применять URL-адрес (Uniform Resource Locator унифицированный указатель ресурса). Формат URL-адреса включает в себя тип сетевой службы (протокол связи), адрес сервера, путь поиска и имя файла.

        Ниже перечислены URL наиболее популярных служб Интернета (табл.

        Таблица П1.3. URL наиболее популярных служб Интернета Служба в Интернете URL-адрес World Wide Web FTP Mail Gopher Телеконференции UseNet news:

        Если вы указываете адрес, начинающийся с http, тем самым вы обращаетесь к ре сурсам, доступ к которым осуществляется по протоколу HTTP (Hyper Text Trans fer Protocol — протокол передачи гипертекста). Этот протокол используется в качестве основного в Интернете при передаче информации, находящейся в HTML-документах.

        Префикс адреса ftp означает, что следует использовать протокол передачи фай лов (File Transfer Protocol — FTP). Этот протокол используется при передаче файлов-программ, имеющих расширение.ехе. Он может использоваться при пе ремещении любых файлов с одного компьютера на другой. В частности, при пере качке файлов вашей страницы на сервер используется именно этот протокол.

        Протокол FTP обеспечивает высокую надежность передачи файлов. К примеру, если потерю до обычной текстовой информации еще можно пережить, то при Ссылки передаче программы вообще не допускается потеря — неточно переданная про грамма просто не будет работать.

        Если перед адресом ссылки указывается это означает, что следует исполь зовать протокол передачи сообщений по электронной почте.

        Gopher — служба (а значит, и протокол), предназначенная, в первую очередь, для работы неграфических браузеров. Она предоставляет систему доступа к инфор мации, основанную на меню.

        News — служба обеспечения телеконференций;

        это система типа доски объявле ний, на которую вы можете поместить свое сообщение и на которой можно про читать то, что там разместили другие участники телеконференции.

        Ниже приведены примеры ссылок с применением URL-адресов:

        //f. доступ Пути поиска могут быть абсолютными и относительными. Абсолютный путь опи сывает местоположение файла начиная с самого высокого уровня и включает имена всех каталогов, ведущих к файлу. Ошибка в записи абсолютного пути (ад реса) файла приводит к тому, что файл не будет найден. Относительный путь (адрес) описывает местоположение файла относительно места расположения те кущего документа. Так, если вы указываете просто имя файла это оз начает, что вы указываете относительный адрес. В данном случае браузер будет искать его в том же каталоге, где находится текущий документ. Если перед име нем файла поставить../ то браузер будет искать файл в каталоге, находящемся на один уровень выше, чем тот, в котором находится теку щий документ. Аналогично, если перед именем файла поставить (например, то браузер будет искать файл в каталоге на два уровня выше, чем текущий.

        При создании ссылок вы можете указывать не только на конкретные документы и программы (то есть конкретные файлы, используя путь к ним), но и на папки (каталоги). Другими словами, адрес — это описание места расположения ресурса (единицы хранения информации). Он может быть точным или «приблизитель ным» (неполным). Вы можете ссылаться на папку, HTML-документ, документ, созданный каким-либо приложением (например, MS Word, MS Excel), или про сто на текстовый файл с расширением.txt. Наконец, можно сослаться на файл программы с расширением.ехе. Однако в последнем случае (по крайней мере, в Internet Explorer) сработает защита вашего компьютера. Появится окно с пре дупреждением и предложением возможных вариантов: запустить файл програм мы или сохранить его на диске — способ защиты от потенциальных вирусов. В этом случае вы сами решаете, что делать. Можно сразу запустить файл а можно сохранить его на локальном диске, проверить с помощью антивирусной программы и только потом запустить, вылечить или уничтожить.

        Ссылки в пределах одного документа Иногда оказывается полезным организовать ссылки на разделы одного и того же документа. Например, на своей странице вы размещаете статью объемом в несколь Приложение 1. Руководство по динамическому HTML ко десятков страниц как единый HTML-документ. Скорее всего, вам захочется сделать ссылки на предыдущие или последующие разделы этого документа. Речь идет о ссылках не на другие HTML-документы, а на места того же самого документа. Такие ссылки еще называют закладками. Для них необходимы две вещи: якорь и собственно ссылка. Якорь определяет место в документе, к ко торому происходит переход ссылке. Ссылка использует имя якоря вместо имени (адреса) файла.

        Формат якоря:

        <А Формат ссылки:

        <А в - Internet Сервис Т?

        Здесь используются текстовые ссылки на разделы в пределах одного и того же документа. При щелчке по ссылке окно броузера будет прокручиваться до тех пор, пока не ссылке якорь.

        Содержание программ HTML В этой главе мы собираемся рассмотреть основные элементы языка HTML. На языке HTML создаются документы, которые могут опубликованы в Интернет. После изучения основных конструкций языка мы подробно рассмотрим примеры программ (см. главу 2) Глава программ Здесь мы рассмотрим примеры программ с использованием элементов языка, которым посвящена Прежде всего рассмотрим применение текстовых ссылок.

        Рис. Текстовые ссылки на разделы в пределах одного и того же документа В листинге приводится программа, демонстрирующая применение ссылок в пределах одного документа и вид этого документа в окне браузера (рис.

        Мы используем ссылки при создании оглавления документа, а также ссылки из текста одних глав на другие главы.

        Таблицы _ Листинг П1.3. Код программы, демонстрирующей применение ссылок в пределах одного документа в пределах одного используются текстовые ссылки на разделы в пределах одного и того же При щелчке на ссылке окно браузера будет прокручиваться до тех пор, пока не появится соответствующий ссылке <Р> <Н2>Содержание <р><р><А Основы
        <А языка В этой главе мы собираемся рассмотреть основные элементы языка На языке HTML создаются документы, которые могут быть опубликованы в Интернете. После изучения основных конструкций языка мы подробно рассмотрим примеры программ (<А главу <Р> <Н2><А Здесь мы рассмотрим примеры программ с использованием элементов языка, которым посвящена <А Прежде всего рассмотрим применение текстовых ссылок.

        Таблицы Довольно часто на веб-страницах встречаются таблицы. Простейший пример таб личной организации данных — прайс-лист. Однако таблицы можно использовать просто как способ форматирования текста, поскольку таблица в те может не содержать всех или некоторых разграничительных линий (сетки).

        Заметим, что в большинстве случаев элементы текста позиционируются как таб личные.

        Идея использования таблиц в качестве средства позиционирования проста. Вы мысленно разбиваете окно на ячейки (клетки) и решаете, какой элемент страни цы в какую ячейку поместить, — это хороший способ избавиться от «естественно го» расположения элементов друг за другом, которое осуществляет браузер по умолчанию. Далее будет рассмотрен более «свободный» способ позиционирова ния элементов, позволяющий помещать элементы в любое место окна браузера.

        Он основан на каскадных таблицах стилей. Однако, как правило, на практике для позиционирования элементов вполне достаточно использовать простую схему таблицы.

        Таблица представляет собой особую часть HTML-документа. Данные в ней орга низованы в виде прямоугольной сетки, которая состоит из вертикальных столб цов (колонок) и горизонтальных рядов (строк). Каждая клетка таблицы называ ется ячейкой. Ячейки могут содержать текст, и даже другую таблицу.

        Таблицы состоят из трех основных частей: названия таблицы, заголовков столб цов и ячеек. Таблица заполняется слева направо, ячейка за ячейкой, начиная с ле 326 Приложение 1. Руководство по динамическому HTML вого верхнего угла и заканчивая правым нижним углом. Каждая ячейка должна быть заполнена (для создания пустых ячеек используются пробелы).

        Описание таблицы в HTML-документе начинается с тега

        и заканчивает ся тегом Если вы хотите, чтобы таблица имела видимую рамку (грани цы), используйте атрибут BORDER, например:

        Атрибут BORDER может принимать аргумент (число), определяющий ширину рам ки, например:

        BORDER=10> Для задания названия таблицы используется тег с атрибутом выравни вания ALIGN, который может принимать значение ТОР или BOTTOM (расположение названия вверху или внизу таблицы соответственно), например:

        Каждый ряд ячеек начинается с тега и заканчивается тегом .

        Если ряд должен содержать заголовки столбцов таблицы, то используются теги <ТН> и . Если в ячейках должны размещаться данные, то используются теги

        и .

        Проще говоря, вы сначала определяете таблицу (тег

        Моя таблица
        и Теги заголовков и данных должны располагаться между тегами рядов
        ), а затем внутри это го определения задаете строки (тег ) и содержимое ячеек (тег ис пользуется тег <ТН>, а при создании строки данных — тег . Задание цвета отдельной ячейки обеспечивается атрибутом BGCOLOR внутри тега
        — для дан ных, — для названий заголовков столбцов).

        Приведем пример описания простой таблицы, встроенной в некоторый текст.

        Обратите внимание на порядок заполнения ячеек таблицы. Сначала определяет строка заголовков столбцов таблицы. Затем аналогичным образом создаются строки данных, при этом указывается, какие данные должны располагаться в ячей ках таблицы. Строка заголовков столбцов задается так же, как и строка данных.

        Отличие лишь в том, что при создании строки заголовков внутри тега

        .

        элементы таблиц <Р> Ниже приведен пример простой таблицы (рис.

        <Р>

        Таблицы 3 Основные элементы таблиц Ниже приведен пример простой таблицы Список сотрудников | Имя с Федор | I ] Рис. Пример простой таблицы Несколько ячеек можно объединить в одну как по горизонтали, так и по вертика ли. Объединение по столбцу применяют в том случае, когда необходимо, чтобы соседние столбцы имели общий заголовок. Объединение по рядам делается тог да, когда содержимое нескольких ячеек подряд одинаково. Для объединения яче ек используются теги COLSPAN и ROWSPAN (по столбцам и по рядам соответствен но). Аргументами этих атрибутов будет количество объединяемых столбцов или рядов. Вот пример объединения ячеек:

        элементы таблиц <Р> Ниже приведен пример простой таблицы с объединенными ячейками (рис. 1.17).

        <Р>

        Приложение 1. Руководство по HTML - Internet Основные элементы таблиц Ниже приведен пример простой таблицы с объединенными ячейками Список сотрудников должность, — [ Рис. Пример простой таблицы с объединенными ячейками Можно управлять шириной как всей таблицы, так и каждой отдельной ячейки.

        Ширину всей таблицы можно задать как в так и в процентах от ширины окна. Ширину ячеек можно задать также двумя способами: в пикселах и в про центах от ширины таблицы. Следует иметь в виду, что ячейки в одном столбце имеют одинаковую ширину, а ячейки одного ряда — разную ширину. Ширина таб лицы задается атрибутом WIDTH в теге ширина ячейки указывается тем же атрибутом в теге <ТН> или

        . Выравнивание в отдельных ячейках выполняет атрибут ALIGN в тегах <ТН> и Для определения дизайна рамок таблицы в браузере Internet Explorer можно ис пользовать атрибут FRAME тега
        .

        элементы <Р> Ниже приведен пример таблицы с объединенными ячейками и заданными разме рами (рис.

        <Р>

        Таблицы
        Таблицы :•.

        Основные элементы таблиц Ниже приведен пример таблицы с объединенными ячейками и заданными размерами Список сотрудников и | Оклад [Бухгалтер • Василий |.

        Рис. Пример таблицы с объединенными ячейками и заданными размерами Текст и графику внутри ячеек таблиц можно выравнивать. Горизонтальное и вер тикальное выравнивание содержимого рядов задается с помощью атрибута ALIGN в

        . Атрибут ALIGN может принимать аргументы LEFT (по левому краю), RIGHT (по правому краю) и CENTER (по центру).

        Примеры использования атрибута ALIGN:

        . Далее перечислены возможные аргумен ты атрибута FRAME, указывающие способы изображения рамки:

        330 Приложение 1. Руководство по динамическому HTML • BOX четыре стороны рамки;

        • ABOVE — только верхняя часть рамки;

        • BELOW — только нижняя часть рамки;

        .

        • HSIDES — горизонтальные части рамки сверху и снизу;

        • VSIDES — только левая и правая вертикальные части рамки;

        • LHS — только левая часть рамки;

        • RHS — только правая часть рамки;

        • VOID — не изображать внешнюю рамку.

        Разделительные линии между столбцами и рядами таблицы описываются атри бутом RULES в теге

        . Атрибут RULES может принимать следующие значе ния, задающие способ изображения разделительных линий:

        • ALL — все вертикальные и горизонтальные линии;

        • ROWS — только горизонтальные между рядами;

        Таблицы Сервис Основные элементы таблиц Различный дизайн таблиц Список сотрудников и Директор Петр Бухгалтер Федор илий ш Список сотрудников !

        Пример различного дизайна таблиц Таблицы • COLS — только вертикальные линии между столбцами;

        • NONE — не изображать разделительные линии.

        В листинге приведен пример управления дизайном таблиц (рис.

        Листинг П1.4. Пример управления дизайном таблиц > элементы табпиц дизайн таблиц <Р> BORDER=15 FRAME=BOX WIDTH=300>

        <ТН>Оклад
        В следующем примере используем таблицу без рамок для размещения различных элементов на странице. В ячейки помещены текстовые ссылки, изображения и чи сло 1000, а некоторые ячейки остались пустыми (рис. П 1.20). Для задания нужного расстояния между элементами следует использовать атрибуты выравнивания.

        Пока еще нет другого способа разместить несколько элементов в одном ряду, кроме 332 Приложение 1. Руководство по динамическому HTML Таблица - Microsoft Internet Вперед т Использование таблицы как способа расположения на странице 1 Пример Рис. Использование таблицы для расположения элементов на странице использования таблиц. В следующем разделе, посвященном каскадным таблицам стилей, будет рассмотрен другой способ позиционирования элементов. В приве денном ниже примере просто задана таблица, но не указаны ее размеры и способ выравнивания для того, чтобы показать: можно располагать элементы как по го ризонтали, так и по вертикали в пределах некоторой области. При этом только опытный программист на языке HTML может догадаться по внешнему виду стра ницы, что для ее создания была использована таблица. Освойте этот прием позици онирования, если хотите располагать на веб-странице много графических элемен тов и ссылок. Это позволит сэкономить место и достаточно эффектно разместить материал в окне браузера.

        <Н2> Использование таблицы как способа расположения элементов на странице

        WIDTH=100 HEIGHT=100> Стили
        1000
        Цветовое оформление таблиц производится с помощью атрибута BGCOLOR, кото рый принимает в качестве аргумента цвет в виде имени или числа. Если нужно установить цвет для всей таблицы, то атрибут BGCOLOR встав ляется в тег Для изменения цвета только одного ряда этот атрибут встав ляется в тег
        .

        Если в таблице имеются рамки, то можно указать и их цвет с помощью атрибутов:

        • BORDERCOLOR - цвет всей рамки;

        • BORDERCOLORLIGHT - цвет светлой части рамки;

        • BORDERCOLORDARK - цвет темной части рамки.

        Эти атрибуты вставляются в тег

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

        BORDER=

        Задать шрифт для текстов внутри ячеек таблицы можно с помощью тегов заго ловков и физических стилей внутри тегов
        :

        Стили Существует еще один прием позиционирования элементов для достижения визу альных эффектов, которые могут украсить страницу и привлечь к ней внимание.

        Этот прием основан на определении пользовательских стилей и задании таблицы стилей. Таблица стилей — это просто некоторая структура описания свойств эле мента. Не ищите здесь прямоугольной сетки. Если таблица стилей задана, то раз личные документы могут просто ссылаться на эту таблицу и не содержать большое количество атрибутов в тегах форматирования типа , и т. п. Таблицы стилей (так называемые Cascading Style Sheets — CSS) содержат описание фор мата части или всего текста, координаты расположения элементов и другие пара метры. Задание стиля обеспечивается с помощью и тега используются внутри тегов заголовка файла и , а атрибут STYLE — в теге заголовка раздела (<Н1>, <Н6>), а так же в теге , в теге выделения фрагмента

        и многих других.

        Применение тега <Н1>Это стиль Цвет

        <Н2>Это стиль такой что и Цвет <Р> Это — обычный стиль по умолчанию Пример CSS Пример каскадного стиля всякой г ики используя только стили текста Рис. Пример каскадного стиля 336 Приложение 1. Руководство по динамическому HTML Мы можем создать таблицы стилей, закрепив за ними имя. Это имя задается как обычное имя, но с точкой в качестве первого символа. Тогда в тегах мы можем обращаться к этой таблице по ее имени, используя атрибут где имя стиля употребляется уже без точки.

        Например, мы можем задать стиль так:

        Пример каскадного стиля

        BORDER=0>
        Стили В приведенном выше примере использованы тег
        и атрибут CLASS.

        Тег

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

        В этом примере тексты определяются как бы в слоях, которые накладываются друг на друга. Так, сначала выводится слой тень, затем на него накладывается слой основа, а потом — и слой2. Очередность, в которой слои накладываются друг на друга, задает порядок следования фрагментов текста, помеченных тегом

        .

        Собственно перекрытие слоев обеспечивается применением отрицательных зна чений свойства margin-top (отступ сверху).

        В рассмотренном выше примере были использованы следующие свойства:

        • margin-top — отступ сверху;

        • color — цвет;

        • font-size — размер шрифта;

        • font-family — семейство шрифтов;

        • weight — степень жирности шрифта;

        • line-height — высота строки.

        Используя отрицательные значения свойства margin-top, можно наложить один текст на другой.

        Кроме рассмотренных выше способов задания стилей можно применять атрибут STYLE, вставляемый в теги заголовков, <Р>,

        и . В этом случае стиль задается в следующем формате:

        Описание свойств стиля заключается в кавычки и содержит свойства и их значе ния, перечисленные через точку с запятой, как это делалось при использовании тега Атрибут STYLE обычно применяется в тех случаях, когда необходимо задать стиль элемента по месту появления в программе. Вот пример использования атри бута STYLE для форматирования заголовка второго уровня:

        <Н Позиционирование элементов Выше мы говорили о том, что позиционировать элементы страницы можно и пу тем использования таблиц. Но это же можно делать и с помощью стилей. Среди параметров стиля имеются специальные свойства для позиционирования:

        338 _ Приложение 1. Руководство по динамическому HTML • left — для задания расстояния в пикселах от левого края окна • top — для задания расстояния в пикселах от верхнего края окна (у-коорди ната);

        • — для указания порядка, в котором элементы будут перекрывать друг друга;

        это новое измерение, элементы с большим будут появлять ся над элементами с меньшим z-индексом.

        Конечно, при использовании этих трех свойств не создается эффекта трехмерно го пространства, но это уже нечто большее, чем двухмерная плоскость. В этом случае говорят о 2,5-мерном пространстве.

        Кроме свойств-координат нам понадобится свойство которое в сочета нии со свойствами left и top позволяет устанавливать элементы в позиции окна. Свойство position может принимать три значения.

        • absolute — заданные свойства Left и top устанавливают элемент в место с коор динатами х и у относительно верхнего левого угла контейнера (объекта, содер жащего данный элемент). Если они определены для элемента вне контейнера, то началом отсчета координат будет верхний левый угол страницы. Заметим, что положение элемента не зависит от положения его тега внутри HTML-до кумента.

        • relative — элемент будет установлен в соответствии с тем, в каком месте исход ного текста он находится;

        это значение установлено по умолчанию. Например, если элемент находится в трех строках от начала выделения в тексте доку мента, то по умолчанию считается, что свойство позиционирования имеет зна чение relative, а свойства координат left и top — нулевые значения. Ненулевые значения свойств left и top сдвигают элемент относительно исходного поло жения.

        • static — элемент устанавливается в фиксированное положение относительно фона и не будет перемещаться при прокручивании страницы.

        Следующий пример показывает использование свойства z-index. Хотя в тексте программы изображение описано выше остальных элементов, за счет присвоения ей индекса с большим номером она перемещается поверх первого текста (рис. П1.22).

        Таким образом, использование свойства z-index освобождает от естественного порядка упоминания элементов в тексте HTML-программы.

        Стили Вид Рис. Пример позиционирования элементов При позиционировании элементов может оказаться, что размеры элемента пре вышают размеры фрагмента (отводимой области, заданной в нашем примере тегом
        ). Например, текст или изображение не помещаются полностью в выделен ный для них прямоугольник. На этот случай имеется свойство overflow (перепол нение).

        Свойство overflow может иметь три значения:

        • попе (ничего) — если элемент и выйдет за пределы фрагмента (отведенного для него места), он все равно будет показан;

        • clip — выступающие за границы фрагмента части элемента будут обрезаны;

        • scroll — будет использована прокрутка.

        В следующем примере используется свойство overflow для создания механизма прокрутки первого текста (рис.

        340 Приложение 1. Руководство по динамическому Позиционирование - Microsoft Internet Рис. Использование свойства overflow для создания механизма прокрутки Понятно, что все рассмотренные выше страницы-уродцы создавались лишь с од ной целью — продемонстрировать возможности языка, предоставляемые для по зиционирования элементов, а не показать, что можно делать красивые вещи. Вы сами должны решить, какие средства и с какой целью использовать на своей веб-странице.

        Статические фильтры Фильтры — это эффекты изменения внешнего вида графики и текста на страни це. С помощью фильтров вы можете отражать тексты и графику, создавать эф фект движения, как это делается в графических редакторах. Другими словами, фильтр — это трансформация исходного изображения по определенным прави лам (алгоритмам). Существуют статические и динамические фильтры. Статиче ские фильтры изменяют внешний вид элемента, оставляя его неподвижным.

        Динамические фильтры позволяют трансформировать графический элемент со скоростью, задаваемой пользователем.

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

        f i l t er :

        или, при наличии параметров, такую запись:

        f i l t er :

        В языке HTML (версии 4) имеется 14 статических фильтров. Перечислим те из них, которые используются без параметров и чаще других:

        • blur — создает эффект движения объекта;

        • — отражает объект симметрично относительно центральной горизонталь ной оси;

        Стили • flipv — отражает объект симметрично центральной вертикальной оси;

        • wave — выполняет синусоидальное преобразование объекта вдоль вертикаль ной оси;

        • — изменяет глубину цвета объекта и отрисовывает черно-белым, делая его похожим на рентгеновский снимок («рентгеновское Ниже приводится код программы, которая выводит графический файл и текст сначала без фильтра, а затем с фильтрами flipv, fliph и blur. Результат работы этой программы показан на рис. Фильтр flipv позволяет получить вертикальное отражение изображения и текста, фильтр fliph — горизонтальное отражение, а фильтр blur — размытие. Обратите внимание, что фильтр blur, примененный к тексту, создает эффект трехмерности, то есть текст как бы отбрасывает тень.

        Фильтры - Internet j -J?

        Домой Поиск Фильтр Рис. Применение фильтров flipv, fliph и blur 100" Стили top: 120 10 150 ;

        100;

        filter <Р>Фильтр

        Динамические фильтры Эффекты постепенного появления (исчезновения) графического изображения и преобразования одного изображения в другое можно получить с помощью сов местного применения динамического фильтра и сценария. Разумное использова ние таких эффектов украшает веб-страницу. Существует несколько способов пре образований. Эти способы заранее определены, поэтому от вас требуется лишь указать номер выбранного способа.

        В табл. приведены названия и номера превращений.

        Таблица Типы воздействия фильтров и их номера Тип превращения Номер фильтра Стягивающийся прямоугольник О Расширяющийся прямоугольник Стягивающийся круг Расширяющийся круг Стирание вверх Стирание вниз Стирание вправо б Стирание влево Вертикальные жалюзи Горизонтальные жалюзи Сужающиеся клетки Закрывающаяся шахматная доска Случайный наплыв Вертикальное деление внутрь Вертикальное деление наружу Горизонтальное деление внутрь Горизонтальное деление наружу Стирание влево-вниз Стирание влево-вверх Стирание вправо-вниз 344 1. Руководство по динамическому HTML Таблица П1.4 (продолжение) Тип превращения Номер фильтра Стирание вправо-вверх Случайные горизонтальные полосы Случайные вертикальные полосы Случайный выбор номера (из 0-22) В следующем примере рисунок с изображением карты мира постепенно стано вится видимым через открывающиеся вертикальные жалюзи (рис. Изо бражение из файла word.gif сначала невидимо (свойство таблицы стилей). В теге

        применен динамический фильтр revealtrans, управляющий появлением изображений. Сценарий содержит одну функцию кото рая применяет фильтр (метод делает объект видимым (свойству visibility присваивается значение устанавливает тип преобразования и задает длительность преобразования 2 с (метод которому передан число вой параметр 2). Далее определено, что эффект постепенного появления картин ки начнется сразу же после загрузки страницы. Это достигается привязкой функ ции к событию ONLOAD в теге .

        Динамический картинки с фильтра Рис. Динамическое преобразование картинки с помощью фильтра «вертикальные жалюзи» 5 Вадим Дунаев JavaScript Изучите один из популярнейших языков для самостоятельно издание Прочитав эту книгу, вы узнаете: общие принципы программирования основные элементы языка JavaScript алгоритмы и

        Попробуйте применить фильтр revealtrans, управляющий появлением изображе ния, при различных значениях (0-23) параметра который задает тип преобразования.

        Для этого можно использовать в качестве основы один из рассмотренных выше текстов HTML-программы.

        При создании динамических сцен может потребоваться изменение рисунка при изменении направления его движения. Например, при изменении направления движения самолета на противоположное следует развернуть его изоб ражение на 180°. Конечно, можно иметь два рисунка с самолетом, на одном из которых самолет летит направо, а на другом — налево. Тогда вам потребуется толь ко динамически изменять аргумент атрибута SRC в теге Другой способ — поместить два рисунка на одном и том же месте, но динамически управлять их видимостью так, чтобы в любой момент отображалось только одно изображение.

        Наконец, можно просто применить соответствующий статический фильтр к од ному рисунку. Попробуйте самостоятельно разработать эти сценарии.

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

        Например:

        Здесь приведен вымышленный, реально не существующий адрес файла описания стилей.

        Другой способ использования внешних таблиц стилей основан на применении тега внутри тега Например:

        Вставка Flash-мультфильма в веб-страницу Flash-мультфильм содержится в SFW-файле, то есть в файле с расширением.swf, который создается в пакете Macromedia Flash. Чтобы вставить его в веб-страницу ( в соответствующий ей HTML-документ), необходимо написать несколько строк HTML-кода. А именно нужно вставить объект, который будет проигрывать (по казывать) Flash-файл. Flash-файл может содержать мультимедийный документ (анимацию, векторную и растровую графику, звук, элементы управления, под держивающие интерактивность). В частности, вы можете создать статическое изоб ражение, содержащее много элементов (например, большой чертеж). Для этого сохраните его в векторном экономном SWF-формате и вставьте в свой HTML документ. Более того, Flash-мультфильм может почти полностью определять и представлять содержание вашей веб-страницы, оставляя лишь роль контейнера.

        В пакете Macromedia Flash имеется специальная команда для создания HTML документа, содержащего все необходимые теги, обеспечивающие проигрывание SWF-файла, — Publish (Публикация). Однако нередко требуется вставить гото вый мультфильм в уже имеющуюся веб-страницу. В этом случае удобнее скор ректировать HTML-документ вручную, с помощью обыкновенного текстового редактора.

        Итак, чтобы вставить Flash-мультфильм в HTML-документ, необходимо написать в этом документе несколько строк, задающих объект, который будет проигрывать (показывать) мультфильм. Это тег с соответствующими параметрами.

        Тег является контейнером, то есть тегом, который содержит другие теги, 348 _ Приложение 1. Руководство по динамическому HTML задающие параметры. Главный параметр тега — classid. Он указывает на Flash-проигрыватель (элемент управления ActiveX). Параметр указыва ет, где в сети взять Flash-проигрыватель, если он не установлен на вашем компью тере. Тег вставлен из-за Netscape-браузера. Другие параметры объекта записываются в теге Отметим лишь основные из них, которых в боль шинстве случаев хватает. Параметр указывает на имя swf-файла с Flash-мультфильмом. Параметры WIDTH и HEIGHT (ширина и высота) определяют размеры в котором будет разме щаться ваш Flash-мультфильм. Имейте в виду, что мультфильм может быть обре зан, ему также может быть отведено слишком много места на странице. Параметр определяет, каким будет фон вашего ро лика. В частности, значение transparent задает прозрачность фона. Это значение наиболее часто используется при вставках мультфильмов в веб-страницы. Все возможные значения параметров лучше всего изучить по книгам, посвященным пакету Flash. Для точного позиционирования Flash-ролика на своей странице мож но воспользоваться контейнером с заданием координат в атрибуте STYLE. Напри мер, в Internet Explorer для этого подходит контейнерный тег В качестве примера приведем вставку Flash-мультфильма, представляющего со бой калькулятор. Файл этого мультфильма, можно взять из коллек ции примеров пакета Flash 5.0. HTML-код имеет следующий вид:

        100" > Для изучения всех возможных параметров советуем обратиться к пакету Flash и поэкспериментировать с командой Publish (Публиковать) при различных вари антах параметров. Выбирая различные значения параметров, следите за тем, ка кой HTML-код получается при публикации.

        Вставка звука и видео Браузеры могут воспроизводить звуковые файлы. Например, Internet Explorer может загружать и воспроизводить фоновый звук (для его прослушивания не нужно щелкать на ссылке). Звук хранится в файле. Internet Explorer распознает форматы звуковых файлов WAV, AU и MIDI. Для задания фонового звука в Internet Explorer используется тег следующего формата:

        • TRUE — бесконечное повторение, пока страница на экране;

        • FALSE — воспроизведение звукового файла один раз;

        • число — указание конкретного числа воспроизведений.

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

        Для различных платформ существуют разнообразные форматы звуковых и ви деофайлов, в Windows общепринятым звуковым форматом является а в Macin tosh — AIFF. Для видео общепринят формат MPEG. Он используется в Windows, Macintosh и Unix. Формат QuickTime также широко распространен и может ис пользоваться на платформах Windows и Macintosh. Можно выбирать и другие форматы, однако следует предупреждать об этом пользователей, а также что звуковые и видеофайлы могут быть очень большого объема, поэтому для их загрузки может потребоваться много времени. В связи с этим желательно сооб щать пользователям размеры аудио- и видеофайлов, чтобы они могли решить, стоит ли тратить время на их загрузку.

        Особо отметим технологию передачи и воспроизведения звука в режиме реаль ного времени (RealAudio). В настоящее время она получила широкое распростра нение в Интернете. Эта технология позволяет устраивать аудио- и видеоконфе ренции, осуществлять вещание радиостанций в Интернете. Передача широкопо лосных звуковых сообщений по узкополосным телефонным линиям практически в реальном времени основана на применении различных алгоритмов сжатия. В на стоящее время наиболее популярны программы RealPlayer G2 и RealPlayer Plus G2.

        Звуковые файлы, используемые технологией RealAudio, имеют расширение RA.

        Кроме того, могут использоваться метафайлы с расширением RAM. Метафайлы являются обычными текстовыми файлами, каждая строка которых содержит пол ный URL-адрес звукового файла с расширением RA. Первым элементом такого адреса (указывающим на тип протокола) является рпр.

        Пример Плейер RealPlayer G2 (или RealPlayer Plus G2) может воспроизводить не только аудио-, но и видеофайлы различных форматов.

        Рассмотрим встраивание звуковых и более подробно.

        Пример ссылки на видеоклип:

        <А видеоклип, 520К В тексте этой ссылки мы указали размер видеоклипа — чтобы пользователь оценил время его загрузки в браузер.

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

        Приложение 1. Руководство по HTML Ниже приведен пример встраивания звукового файла example.wav с помощью тега и ссылки на этот Тег позволяет сразу разместить панель проигрывателя звуковых файлов, а в случае использования ссылки панель про игрывателя появляется на экране только при щелчке на этой ссылке.

        использования звукового файла > <Р> HEIGHT=

        Поле ввода данных При создании интерактивных страниц может потребоваться передать ряд симво лов от пользователя. Например, мы можем попросить пользователя ввести его адрес электронной почты. Для этого необходимо поле ввода. Затем все то, что было введено, можно обработать с помощью программы-сценария. Чтобы орга низовать поля ввода данных, применяется тег с некоторыми атрибутами (рис.

        :

        Это - поле ввода Рис. П1.28. Поле ввода Для ввода строки символов формат тега имеет вид:

        Если вы хотите, чтобы введенные символы появлялись на экране в виде звездо чек (что обычно нужно при вводе пароля), то используйте следующий формат:

        • — имя переменной, в которой сохраняется введенное значение;

        • — начальное значение;

        • — длина текстового поля;

        • — максимальное количество символов, которое можно ввести.

        Например:

        Например, в результате выполнения функции появля ется окно, представленное на рис.

        Запрос пользователю Рис. Название рисунка Переключатели (radiobuttons) Тег позволяет вывести на страницу не только поле ввода, но и другие элементы. Например, если использовать атрибут то можно создать набор переключателей (radiobuttons) — это кружки, щелчок на одном из которых делает последний отмеченным, а все остальные — неотмеченными. Чтобы набор переключателей воспринимался как его необходимо поместить внутри тега списка

          и в каждом теге использовать одно и то же имя (значение атрибута NAME). Чтобы выделить переключатель, применяется атрибут CHECKED.

          После тега помещается текст, который мы хотим видеть рядом с пере ключателем. Атрибут VALUE используется для того, чтобы мы смогли узнать, какой переключатель выбрал пользователь, и обработать выбор в программе-сценарии.

          В следующем примере создается набор из трех переключателей (рис.

          язык вы используете?

          TYPE = NAME = = CHECKED> Приложение 1. Руководство по динамическому HTML TYPE = NAME = = Английский > Немецкий «Вайя Сервис Какой язык Вы используете ?

          Русский Английский Немецкий ! Мой Рис. Использование переключателей Элементы списка (в рассматриваемом примере — переключатели) располагают ся по умолчанию в столбце, то есть вертикально. А как расположить их горизон тально, то есть в одну строку? Горизонтальное расположение элементов списка довольно часто встречается на страницах, поскольку это позволяет экономить ме сто. Один из возможных и часто используемых способов — применение тега таб лицы как метода позиционирования. Ниже приводится вариант соответствующей программы и результат ее работы (рис.

          Сервис Какой Вы используете ?

          Русский Английский Немецкий Рис. Расположение переключателей в одну строку Флажки Какой язык вы используете?

TYPE = = Английский = > Немецкий
Флажки Флажки отличаются от переключателей тем, что в одном наборе можно устано вить (отметить) более одного флажка (рис. П1.32). Задаются флажки так же, как и переключатели, однако аргументом атрибута TYPE должен быть аргумент CHECKBOX:

<Н2>Какие экзамены вы будете = Физика" CHECKED> Математика Я Вид Сервис Ч Димой Какие Вы будете сдавать ?

I? Русский Английский язык Математика • Рис. Пример использования флажков 354 Приложение 1. Руководство по динамическому HTML Если флажки необходимо расположить горизонтально, используйте тег

, как в предыдущем примере.

Кнопки.

На странице можно разместить кнопки, щелчок клавишей мыши на которых обра батывается программой-сценарием. Например, вы можете создать кнопку с над писью Поиск. Что произойдет, если пользователь нажмет эту кнопку, зависит от вашего сценария. Кнопка создается с помощью тега Мы можем поме стить на кнопку текст и изображение, а также позиционировать ее в нужное место с помощью атрибута STYLE (рис.

В следующем примере создается кнопка с изображением из файла и над писью:

: absolute ;

Нажми меня Правка Сервис Справка В т ДОМОЙ Рис. Кнопка с изображением и надписью Можно создать графическую кнопку, используя уже знакомый тег , но с атрибутами и а также NAME и VALUE:

В качестве рисунка можно подобрать изображение кнопки или любое другое (рис. Например, следующая строка кода выводит стрелку из файла знач ка (пиктограммы):

Фреймы Я Это - кнопка РИС. Пример графической кнопки Кроме рассмотренных выше, можно задать специальные кнопки для отправки данных серверному приложению (CGI) и очистки полей ввода (и восстановле ния значений, принятых по умолчанию). В HTML-документ можно включить несколько элементов типа полей ввода данных, переключателей и флажков. Если они входят в один смысловой блок, то эти элементы следует заключить в тег фор мы В этот же тег можно включить и специальные кнопки.

Если мы хотим отправлять данные серверному приложению, то тег
дол жен содержать атрибут, указывающий способ передачи, и атрибут, содержащий адрес серверного приложения.

Пример

Пример

Кнопка очистки задается так:

Мы не рассматриваем подробно работу с серверными приложениями, поскольку это отдельная тема. Однако неплохо знать, что такая возможность имеется.

Фреймы Часто возникает необходимость разместить в окне браузера несколько разделов или окон, называемых фреймами. В каждом фрейме отображается свой HTML документ. Например, в одном фрейме можно поместить ссылки на документы, которые должны показываться в другом фрейме. Иначе говоря, в одной части окна имеется оглавление большого документа, а в другой — содержимое документа, ссылка на который была использована. Фреймы могут работать независимо, а так же содержать ссылки друг на друга.

356 Приложение 1. Руководство по динамическому HTML При использовании фреймов потребуется несколько HTML-файлов. Один из них называется установочным. В нем описывается расположение (раскладка) фрей мов в окне браузера и назначаются исходные HTML-файлы для каждого из фрей мов, но отсутствуют собственно текст и графика. Исходные HTML-файлы выво дятся во фреймы и могут содержать тексты, графику, ссылки и пр.

Установочный HTML-файл, как и любой другой, начинается с тега и за канчивается тегом Для разделения окна на несколько фреймов исполь зуются теги и Тег должен быть размещен после тега но перед тегом .

Два фрейма можно расположить рядом друг с другом или друг над другом. Для задания способа расположения используется атрибут COLS (если рядом) или ROWS (если друг над другом). Чтобы разделить окно на два фрейма, указывают через запятые два числа. Эти числа определяют размеры фреймов. Для трех фреймов задаются три числа. Если нужно указать, что фрейм занимает все оставшееся место, используется символ «звездочка» (*). Размеры фреймов измеряются в пикселах или процентах. В последнем случае около числа пишется символ процента Например, тег

Тег задает разбиение на три горизонтальных фрей ма высотой 20%, 30% и 50%.

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

Задав расположение фреймов, следует указать для каждого из них исходный HTML-файл. Напомним, что исходные файлы выводятся во фреймах. Для этой цели служит тег имеющий множество атрибутов, которые управляют свойствами фреймов. Ниже перечислены эти атрибуты:

• — каждый фрейм должен иметь имя, упо мянутое в атрибуте NAME, и к нему должен быть привязан HTML-файл, ука занный в атрибуте SRC.

• SCROLLING — определяет, будут ли присутствовать в окне фрейма полосы про крутки;

если требуется прокрутка, то задается аргумент YES, иначе — N0.

• NORESIZE — запрещает пользователю изменять размеры фреймов;

если этот ат рибут не применяется, то пользователь не может изменять размеры.

• — определяет ширину разделительной полосы меж ду фреймами в пикселах.

• определяет цвет разделительной полосы;

цвет задается либо кодом, либо именем.

• — добавляет пустое поле между верхней границей фрейма и началом текста или графики;

измеряется в пикселах.

• — добавляет пустое поле между боко выми границами фреймов и началом текста или графики;

измеряется в пикселах.

Поскольку фреймы поддерживаются не всеми браузерами (Internet Explorer под держивает), постольку необходимо использовать тег перед тегом тела Фреймы , а в теле программы, то есть между тегами и , можно вста вить сообщение, которое будет появляться в окне, если браузер не поддерживает фреймы. Ниже мы еще рассмотрим применение тега Пусть, например, требуется разделить окно браузера на два вертикальных фрей ма так, чтобы в первом из них появлялось содержимое файла а во втором фрейме — содержимое файла Назначим фреймам имена соот ветственно "ЛЕВЫЙ" и "ПРАВЫЙ". Разумеется, имена выбираются произвольно.

Ширину первого фрейма определим в 40%, а для второго выделим все оставшееся место окна. В первом фрейме запретим появление полосы прокрутки. Ширину разделительной полосы зададим равной 10 пикселам. Тогда установочный HTML файл будет содержать следующие теги (листинг Листинг П1.6. Код установочного файла для создания установочного Для просмотра необходим браузер, поддерживающий фреймы Теперь надо создать два исходных HTML-файла. Пусть, например, они будут <Н2> Это левый фрейм, который имеет ширину 40% <Н2> Это правый фрейм, который занимает оставшуюся часть окна Если загрузить в браузер установочный HTML-файл, то он будет выглядеть, как на рис.

Во фреймах можно располагать ссылки, указывающие на фреймы. Щелчок на та ких ссылках может изменить файл, выводимый в другом фрейме. Этот прием ча сто используется при создании так называемых навигационных панелей. Навига ционная панель представляет собой фрейм, расположенный обычно вверху или по краю окна. В ней содержатся ссылки, при использовании которых во втором фрейме, большем по размеру, выводятся различные документы. Именно для это го и был предусмотрен атрибут NAME в теге .

358 Приложение 1. Руководство по динамическому HTML т Пример файла а Поиск Это левый Это правый фрейм, который который имеет оставшуюся часть ширину 40% окна Рис. Окно браузера разделено на два вертикальных фрейма Ссылки на фреймы имеют формат:

<А для текстовых ссылок или:

для графических ссылок.

Например:

<А HREF = Что Здесь содержится ссылка на файл new.htm, который следует показывать во фрей ме с именем При этом на месте ссылки появляется текст Что нового (target с английского переводится как При разработке многооконных страниц следует внимательно следить за тем, что бы ссылки на фреймы использовали только имена фреймов, определенные в уста новочном файле в теге:

Мы рассмотрели способ создания многооконных веб-страниц. Такие страницы основаны на фреймах и состоят из установочного HTML-файла и исходных HTML-файлов.

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

Проектирование может идти «сверху вниз» или «снизу вверх». Метод «сверху вниз» заключается в создании сначала установочного файла и навигаци онной панели. После отладки этой части программы создаются конечные файлы документов, такие как тексты, графика и т. п. Метод «снизу вверх» предполагает создание в первую очередь конечных файлов, а затем программы, организующей их вывод на экран. Выбор метода зависит от вкуса.

Тег Тег <МЕТА> Дополните свою веб-страницу информацией, которая заключается в Эта информация не отображается браузером, однако имеет большое значение.

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

Метаданные размещаются на странице между тегами и .

Общий формат метатегов в HTML-документе:

...

Ниже приводится описание метатегов по группам.

Группа (HTTP-эквиваленты) • EXPIRES — дата устаревания документа.

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

Пример 14 Feb 2001 08:21: • PRAGMA — управление кэшированием.

Возможно одно значение NO-CACHE, то есть данный документ не браузером. В этом случае запрашиваемая страница будет браться с сервера, а не из кэша (буфера) пользовательского компьютера.

Пример <МЕТА • CONTENT-TYPE — тип документа и его кодировка.

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

Пример <МЕТА • CONTENT-LANGUAGE — указание языка документа.

360 Приложение 1. Руководство по HTML Значение этого параметра может использоваться как поисковыми роботами, так и веб-серверами.

Формат:

Примеры <МЕТА <МЕТА • REFRESH — время (в секундах), через которое произойдет автоматическая пере загрузка документа или переход на другой документ с заданным URL.

Формат: <время> или <время>;

Пример <МЕТА • CACHE-CONTROL — управление кэшированием.

Возможные варианты: кэширование в общем (PUBLIC) или частном (PRIVATE) кэше. Документ вообще не (NO-CACHE) или кэшируется, но не со храняется (NO-STORE).

Пример Группа NAME (имя) • DESCRIPTION — описание документа. Один из наиболее важных параметров.

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

URL документа.

Название документа (содержимое Описание документа, то есть DESCRIPTION, или начальный фрагмент HTML документа, если DESCRIPTION отсутствует. В первом случае пользователь получает достаточно краткое и информативное описание документа, а во втором случае это может быть бессмысленный набор слов или несколько первых фраз из вашего документа.

G Рейтинг (коэффициент соответствия документа запросу пользователя).

Пример данного документа, до • — ключевые слова. Набор слов и фраз, наиболее полно характеризу ющих данный документ, которые являются основным критерием поиска ва шей страницы поисковыми системами. В конечном счете эти слова учитыва ются при выдаче результатов поиска и способствуют повышению рейтинга вашего сайта.

Пример <МЕТА слова, разделенные запятой, до Тег • DOCUMENT-STATE — статус документа. Данный параметр управляет частотой ин дексации вашей страницы поисковыми серверами и может принимать два зна чения:

STATIC (документ статичен, то есть не меняется, и, следовательно, индекси ровать его нужно только один раз).

Пример DYNAMIC (для часто изменяющихся документов, которые нужно ровать).

Пример <МЕТА ROBOTS — управление процессом индексации.

Возможные варианты:

INDEX — возможность индексирования данного документа (иначе — NOINDEX);

FOLLOW — возможность индексирования всех документов, на которые есть ссылки в данном HTML-файле (иначе NOFOLLOW);

ALL — одновременное выполнение условий INDEX и FOLLOW;

LI NONE — одновременное выполнение условий NOINDEX и NOFOLLOW.

Пример • RESOURCE-TYPE — тип ресурса. Для обычных HTML-документов значение это го параметра устанавливается равным "DOCUMENT".

Пример <МЕТА • UPDATED — дата обновления страницы.

Пример • URL — расположение главной страницы. Базовый URL определяет, какой доку мент следует индексировать (чтобы не обрабатывать <МЕТА • AUTHOR — информация об авторе данного документа.

• COPYRIGHT — информация об авторских правах.

• GENERATOR — программа, создавшая HTML-код.

Допустимо, но не обязательно добавлять в метатеги атрибут LANG, указывающий язык данных.

Пример <МЕТА Приложение 2. Справочник по HTML Теги HTML Здесь приведены наиболее часто употребляемые теги HTML, упорядоченные по категориям.

Структура документа Тег Описание Определяет комментарий, который игнорируется анализатором HTML Объявляет тип и формат содержимого документа Устанавливает URL-адрес исходного документа Определяет начало основной части страницы Описывает комментарий, который не отображается

Осуществляет логическое разделение документа, создавая фрагмент внутри него <НЕАО> Заключает в себе теги, содержащие невидимую информацию о документе Идентифицирует документ как содержащий элементы HTML Служит для обозначения связей между документами Предоставляет различные типы невидимой информации и инструкций для браузера Определяет параметр в теге для использования текстовыми редакторами Используется с таблицей стилей для определения нестандартных атрибутов текста на странице