Файл: Языки гипертекстовой разметки (Веб-страница как гипертекстовый инструмент).pdf
Добавлен: 29.06.2023
Просмотров: 62
Скачиваний: 3
2.5 Описание DHTML
Как было указано выше, DHTML, по-сути, представляет собой набор средств, делающих страницу интерактивной. Этот термин означает совместное использование HTML, CSS, JavaScript для создания веб-страниц. Связывает все это объектная модель DOM.
В современном подходе в HTML задается содержимое веб-страниц, а оформление и поведение задается с помощью CSS и JavaScript.
Cascading Style Sheets (Таблицы Каскадных Стилей) - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб-страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов. Приведу пример: Вам нужно создать жирный красный подчеркнутый текст [9].
ПРИМЕР HTML:
<font color="red"><strong><u>
Какой-то текст
</u></strong></font>
Существует три вида таблиц стилей:
- Внутренние таблицы стилей
- Глобальные таблицы стилей
- Связанные таблицы стилей.
Внутренние таблицы стилей при помощи специального атрибута style помещаются прямо в HTML-теги. Глобальные определяют стиль элементов во всем документе. Связанные могут быть использованы для нескольких документов сразу и хранятся во внешнем файле. Подробнее обо всем этом написано ниже [10].
Синтаксисис:
селектор {свойства}
Любой элемент HTML — это возможный CSS селектор. Свойства селектора определяют стиль элемента, для которого он определен.
ПРИМЕР:
H1 {color:red; size:20pt;}
Все элементы H1 в документе будут красного цвета, размером в 20 точек (pt, point).
Классовые селекторы (Class Selectors) задаются с помощью следующего синтаксиса:
селектор.класс {cвойства}
CLASS - атрибут элемента в HTML, определяющий его класс. В CSS можно описать собственные стили для различных классов одних и тех же элементов.
ПРИМЕР:
H1.blue {color:blue; size:20pt;}
Все элементы H1 с атрибутом CLASS="blue" станут синими.
Классы могут так же быть описаны без явного привязывания их к определенным элементам.
Синтаксис:
.класс {свойства}
ПРИМЕР:
.green {color:green;}
В данном случае все элементы с атрибутом CLASS="green" станут зелеными.
ID селекторы (IDSelectors):
Cинтаксис:
#id {свойства}
ID - индивидуально именованный стиль. С его помощью можно создавать стилистические исключения среди элементов одного класса [9].
Индификаторы используются в основном для придания одному или нескольким элементам одного класса индивидуальных свойств. Скажем, Вы создали класс blue - синий курсив. Но Вам понадобился жирный подчеркнутый текст синим курсивом. Можно создать новый класс, но проще описать ID. Например "boldunderline". И все элементы класса blue с значением ID "boldunderline" станут жирным подчеркнутым синим курсивом. Произойдет как бы синтез свойств класса blue и идентификатора boldunderline.
ПРИМЕР:
<html>
<head>
<title>ПримерCSS</title>
</head>
<style>
.blue {color:blue; font-style:italic}
#boldunderline {text-decoration:underline; font-weight:bold}
</style>
<body>
<pclass="blue"> Здравствуйте, это моя домашняя страница. </p>
<pclass="blue"id="boldunderline"> Пока еще в стадии разработки ... </p>
<p id="boldunderline">... Но cкоро откроется</p>
</body>
</html>
Как видно из примера, атрибут ID может быть использован без указания класса (последний параграф примера. Тогда параграф будет обладать только свойствами ID"boldunderline" (в примере - жирный, подчеркнутый текст) [10].
Далее рассмотрим возможности включения кода, написанного на языке программирования JavaScript в содержимое веб-сраницы
При загрузке страницы просматриваются сверху вниз, тем самым последовательно происходит компоновка страницы и ее отображение в окне браузера. А это означает, что и объектная модель страницы также формируется последовательно, по мере ее обработки. Поэтому невозможно обратится из сценария, расположенного ранее какой- либо формы на странице, к элементам этой формы.
Всегда следует помнить о том, что браузер последовательно сверху вниз интерпретирует содержимое HTML-страницы. Еще один аспект работы с объектами языков сценариев заключается в том, что нельзя изменить свойства объектов. Браузер обрабатывает страницу только один раз, компонуя и отображая ее. Поэтому попытка в сценарии изменить свойство отображенного элемента страницы, обречена на провал. Только повторная загрузка страницы приведет к желаемому результату[6].
Размещение операторов языка JavaScript на странице. Встроить сценарий JavaScript в HTML-страницу можно несколькими способами.
1. Задание операторов языка внутри тэга <script>, внутри которого могут располагаться операторы языка JavaScript. Обычно браузеры, не поддерживающие какие-нибудь тэги HTML, просто их игнорируют, анализируя, однако, содержимое пропускаемых тэгов с точки зрения синтаксиса языка HTML, что может приводить к ошибкам при отображении страницы. Во избежание подобной ситуации следует помещать операторы языка JavaScript в контейнер комментария <!-- --//> Параметр language задает используемый язык сценариев. В случае языка JavaScript его значение задавать не обязательно, так как этот язык используется браузерами по умолчанию.
Пример:
<script language=”JavaScript” src=”http://url/file.js”>
операторы javascript
</script>
2. Элементы JavaScript в параметрах тэгов HTML
Переменные и выражения JavaScript можно использовать в качестве значений параметров тэгов HTML. Эта процедура аналогична процедуре встраивания числовых или символьных примитивов HTML. Элементы JavaScript также располагаются между амперсандом (&) и точкой с запятой (,-), но должны заключаться в фигурные скобки {} и использоваться только в качестве значений параметров тэгов HTML.
Пусть определена переменная barwidth, и ей присвоено значение 75. Следующий тэг нарисует горизонтальную линию длиной в 75% от горизонтального размера окна браузера:
<HR WIDTH="&{barWidth};%" ALIGN="LEFT">
Нужно учитывать следующее. Нельзя использовать элементы JavaScript в тексте HTML. Они интерпретируются только тогда, когда расположены справа от параметра и задают его значение. Например, попытка использовать значение переменной myVar в следующем фрагменте
<H4> &{myVar}; </H4>
обречена на провал. Вместо ожидаемого значения переменной myVar браузер отобразит строку myVar[6].
3. Обработчики событий. Для совместимости с языками сценариев в некоторые тэги HTML были введены специальные параметры обработки возникающих событий. Значениями этих параметров могут быть операторы языка JavaScript. Обычно в качестве значения задается имя функции, которая вызывается, когда происходит соответствующее событие, определяемое параметром обработки события. Имя параметра начинается с приставки on, за которым следует имя самого события. Например, параметр обработки события click (щелчок кнопкой мыши) будет иметь имя onclick [13].
События в основном связаны с действиями, производимыми пользователем с элементами форм HTML. Поэтому чаще всего перехват и обработка событий задается в параметрах элементов форм, что позволяет проверить введенную информацию перед ее отправкой на обработку CGI-сценарием.
Здесь кратко остановимся на функциях JavaScript. Функция или процедура — это именованная последовательность операторов, которая выполняет определенную задачу и может возвращать некоторое значение. Функция определяется оператором function, имеющем следующий синтаксис:
function имя_функции([параметры]) {
[операторы JavaScript]
[return значение]
}
Параметры, передаваемые функции, разделяются запятыми. Необязательный оператор return в теле функции (блок операторов, заключенный в фигурные скобки), определяет возвращаемое функцией значение.
Следует четко понимать различие между объявлением функции и ее вызовом. Объявление функции только задает ее имя и определяет, что она будет делать при ее вызове. Непосредственное выполнение функции осуществляется, когда в сценарии вызывают ее и передают действительные параметры.
Определение необходимых функций следует осуществлять в тэге <HEAD>, так как все определенные в нем операторы сценария интерпретируются до отображения страницы, и, таким образом, будут известны в процессе отображения всей страницы[11].
2.6 Выводы по главе
Таким образом, современный подход к разработке веб-страниц предполагает совместное использование технологий HTML, CSS, JavaScript.
Только такой подход позволяет сделать веб-страницы по-настоящему интерактивными.
Использование таблиц стилей имеет следующие преимущества:
- возможность подключения одного набора стилей к нескольким документам, что особенно актуально, так как веб-страницы в пределах одного сайта, как правило, имеют схожее оформление.
- возможность редактирования стилей документа отдельно от содержимого
- возможность подключения специальных стилей, например версии для слабовидящих.
JavaScript позволяет не только изменять внешний вид элементов веб-страницы в зависимости от действий пользователя (событий), но также выводить интерактивность веб-страниц на новый уровень, включая анимацию и онлайн-игры.
Заключение
Мы определили основные понятия, связанные с языками гипертекстовой разметки. Описали синтаксис и область применения языка HTML, область применения и синтаксис составляющих DHTML, сравнили возможности применения различных технологий создания веб-страниц.
Содержимое веб-старниц чаще всего формируется с помощью языка HTML. Даже если, для формирования содержимого используются серверные языки программирования или скриптовые сценарии на стороне клиента, вывод элементов веб-страницы все равно основан на элементах HTML или XHTML.
XHTML используется, когда необходимо применить также языки разметки основанные на XML.
Наиболее современным подходом к созданию веб-сайтов является DHTML, позволяющий разделить элементы содержания веб-страниц, их оформление (внешний вид ) и скриптовую часть. Кроме того, использование DHTML позволяет сделать сайты интерактивными.
Для того, чтобы создать современный профессиональный сайт необходимо на высоком уровне владеть всеми составляющими DHTML: HTML, CSS и JavaScript, понимать принцип их взаимодействия с помощью DOM.