- •Введение
- •1. Язык html
- •1.1. Информационная система сети Интернет
- •1.2. Язык html
- •Использование специальных символов в нтмl документах
- •Дескрипторы связи
- •Команда вставки графики
- •Команда гипертекстовой ссылки
- •Относительные и абсолютные адреса файлов
- •1.3. Расширения html
- •2. Язык JavaScript
- •2.1. Особенности и назначение языка JavaScript
- •2.2.Основы языка JavaScript Типы данных
- •Переменные и оператор присвоения
- •Var имя_переменной
- •Область действия переменных
- •Операторы
- •Приоритет операторов в выражении
- •Функции
- •Встроенные функции
- •Пользовательские функции
- •Сценарии
- •Обработка событий
- •Встроенные объекты
- •Объект String (Строка)
- •Объект Array (Массив)
- •Копирование массива
- •Объект Math (Математика)
- •Объект Date (Дата)
- •Объектная модель JavaScript
- •Клиентская сторона
- •Серверная часть
- •Доступ к объектам
- •X.Src /* строка url, например, file:///с:/Мои%20документы/pict.Jpg */
- •Создание фреймов
- •Динамический html
- •Динамическое изменение элементов документа
- •Использование метода write()
- •Изменение значений атрибутов элементов
- •Управление процессами во времени
- •If (confirm("Прервать процесс ?"))
- •Работа с Cookie
- •Обработка данных форм
- •Работа с файловой системой и реестром Windows
- •Создание объекта файловой системы
- •Запуск приложений
- •Работа с реестром
- •Глоссарий
- •Императивное (операторное) программирование
- •Функциональное программирование
- •Объектно-ориентированное программирование
- •Модули и раздельная компиляция
- •Библиографический список
- •394026 Воронеж, Московский просп., 14
Динамический html
Динамический HTML состоит из трёх частей: собственно статического языка разметки HTML, каскадных таблиц стилей и языка JavaScript. Страницы могут динамически менять стили, содержание и оформление. Можно создавать интерактивные документы, взаимодействующие с пользователем в реальном масштабе времени. Таблицы стилей позволяют отделить логическую структуру документа от формы его представления.
Каскадные таблицы стилей CSS (Cascading Style Sheets) представляют собой набор спецификаций (называемых правилами), которые позволяют получить полный контроль над расположением элементов на Web-странице и внешним видом ее содержимого.
Каскадные таблицы список стилей (иногда переводится как каскадный список стилей) позволяют задавать параметры тегов не только с помощью атрибутов, но и в строке, являющейся значением специального атрибута style. наряду с атрибутом style был введен в обращение контейнерный тег <style>. в теге <style> можно задать индивидуальные стили для ряда тегов, а также создать произвольные стили и закрепить за ними имена.
Существуют два способа назначения стилей: глобальное и индивидуальное назначение.
С помощью атрибута class = имя_стиля можно свойства стиля с указанным именем придать определённому тегу. Имя класса указывается в селекторе правила после имени тега и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра class соответствующего тега применять разные правила форматирования в документе. Например, можно определить два класса отображения заголовка первого уровня:
<style type="text/css">
<!--
HI.red { color: red; }
Hl.blueBgrd { color: red; background-color: blue}
//-- >
</style>
В тексте документа ссылка на соответствующий класс задается в параметре class:
<h1 class="red">Кpacный шрифт</h1>
<h1 class="bluebgrd">Кpacный шрифт на синем фоне</h1>
В приведенном примере классы задавались для разного отображения конкретных элементов одного типа. Этот метод позволяет указать параметры отображения отдельного элемента, но он трудоёмок.
Если класс должен применяться ко всем элементам документа, то в селекторе задается имя класса с лидирующей точкой без указания конкретного элемента:
<style type="text/css"><!--
.red { color: red; }
.bluebgrd { color: red; background-color: blue}
//--></style>
Теперь два класса red и blueBgrd можно применять к любым элементам документа:
<р class=red>Пepвый абзац</р>
<р class=blueBgrd>Bтopoй абзац</p>
Первый абзац отобразится красным шрифтом, а второй — красным шрифтом на синем фоне.
Для максимальной гибкости рекомендуется создавать внешние таблицы стилей в отдельных файлах. Таблицу стилей можно модифицировать без изменения исходного HTML-документа, и таблица стилей может использоваться несколькими документами. Она связывается с документом с помощью тега <link>, задаваемого в разделе <head>:
<link rel="stylesheet" type="text/css" href="mystyles.css">
Связываемый файл содержит набор правил каскадных таблицей стилей, определяющих форматирование документа, и должен иметь расширение css.
Тег <link> указывает на связь документа, содержащего данный тег, и другого документа или объекта. Он состоит из URL-адреса и параметров, конкретизирующих отношения документов. Параметры тега <link>:
href — указывает на url-адрес другого документа;
rel — определяет отношение между текущим и другим документом;
rev — определяет отношение между другим документом и текущим (отношение, обратное rel);
type — указывает тип и параметры присоединенной таблицы стилей.
Примеры тега <link> с параметрами:
1) <link rel="contents" href = "../toc.html">
2) <head>
<link rel=stylesheet type="text/css"
href="адрес_таблицы_стилей"
<title>="style"
</head>
Первый пример указывает на связь с файлом оглавления документа (toc.html — table of contents) с прямым отношением contents. Второй пример описывает способ использования внешних таблиц стилей, основанный на применении тега <link> внутри тега <head>.
В тэге <style> можно импортировать внешнюю таблицу стилей с помощью свойства @import таблицы стилей:
@import: url(mystyles.css);
С помощью стилей можно определить параметры форматирования текстов, задать фильтры (алгоритмы преобразования) для текстовых и графических элементов, а также задать три координаты позиционирования элементов. Координаты top и left, задаваемые с помощью стиля, определяют положение элемента на плоскости документа, а координата z-index указывает еще и слой документа. Так, задавая значения top и left для различных элементов, можно добиться того, что одни элементы будут накрывать другие. Чтобы указать, какой из них должен быть выше или ниже другого (независимо от порядка следования в HTML-коде), служит параметр z-index.
Пример. Позиционирование изображения
<img id = "myimg" SRC = "picture.jpg"
style = "position:absolute; top:20; left: 50: z-index:3">
Элементы с большим значением этого свойства располагаются над элементами с меньшим, благодаря чему можно управлять порядком наложения.
Объекты сторонних производителей, созданных с помощью различных языков программирования, вставляются в HTML-документ посредством контейнерных тегов <object> и <embed>. С их помощью можно встроить в HTML-документ звук, видео, Flash-анимацию, векторную графику, таблицы базы данных и др.