Введение
Основу гипертекстовой технологии составляет язык гипертекстовой разметки HTML. Язык HTML позволяет создавать и определенным образом форматировать содержимое web-страницы. Он определяет формат и характер функционирования гипертекстовых страниц.
В данной теме рассматриваются технологии, выполняемые на стороне клиента, раскрываются основные понятия языка разметки HTML и языка сценариев JavaScript, теги и атрибуты формирования основных элементов web-страницы. Задачей модуля является показать основные теги языка HTML для представления данных на web-странице и их применение при формировании html-страниц.
Целью данной темы является изучение основных элементов построения гипертекстовых документов, оформления текста, списочной структуры, таблиц на web-страницах, создание интерактивных web-страниц, а также умение использовать и применять навыки работы при создании простых web-сайтов.
Студент должен
знать:
-классификацию языков создания web-документа,
-основные теги и атрибуты создания HTML-документов;
уметь:
-использовать теги и атрибуты для оформления текста, графики, таблиц при создании HTML-документов,
-использовать теги и атрибуты для формирования интерактивных HTML-документов,
-использовать теги и атрибуты для создания фреймовой структуры HTML-документов.
Тема 4.1 Языки создания web-материалов
В результате изучения темы студент должен
знать:
-классификацию языков создания web-материалов, их применение и краткую характеристику,
-основные понятия языка гипертекстовой разметки, языка сценариев, языка DHTML, VRML;
уметь:
-различать классы языков создания web-материалов.
Классификация языков
Каждый из конкретных представителей класса языков имеет свои особенности, обусловленные его предназначением. Тем не менее, каждый из классов обладает, по крайней мере, одним общим свойством.
Классы языков:
1) языки разметки - HTML, XML, DHTML;
2) языки сценариев - JavaScript, VBScript, ASP, PHP;
3) язык моделирования виртуальной реальности - VRML.
Рассматривая принцип работы WWW технологии, мы с Вами отметили, что она работает по принципу клиент-сервер (см. тему 1.2). Это означает, что какая-то часть технологий выполняется на стороне клиента, а какая-то на стороне сервера. Базовыми технологиями стороны клиента являются:
браузеры, которые отвечают за отображение web-страницы на экран; неотделимый от браузера язык разметки HTML, который соединяет вместе различные элементы страницы в понятное целое.
К технологии клиентской стороны следует также отнести и язык разметки XML, который в последнее время набирает обороты по своему использованию. Также сложно сейчас представить сайт и без использования языков сценария со стороны клиента, таких как JavaScript, VBScript, часто выступающих в форме Dynamic HTML. Так как все приложения, реализованные на этих языках, обрабатываются на компьютере клиента, то невозможно точно предсказать результат отображения web-страницы. Так, отображение содержимого web-страницы зависит от многих причин – от типа браузера и монитора пользователя, персональных настроек браузера, от установленных вспомогательных приложений, от поддержки сценариев и так далее. В этом плане клиентские технологии обладают своими недостатками, с которыми позволяют справиться более надежные технологии со стороны сервера. Одно из их основных преимуществ – это повышенный уровень контроля над исполнением программ. Так, для серверных технологий не существует разницы, каким браузером пользуется клиент, так как весь сценарий обрабатывается на стороне сервера и готовым результатом передается клиенту, который в свою очередь только его отображает. К тому же серверные технологии позволяют создавать более интерактивные и динамические сайты. К серверным технологиям можно отнести: CGI-сценарии, серверные API-приложения, серверные сценарии (ASP, PHP).
В данном курсе изучения дисциплины мы рассмотрим некоторые клиентские технологии.
Языки гипертекстовой разметки
Язык гипертекстовой разметки позволяет определенным образом форматировать содержимое web-страницы. Он определяет формат и характер функционирования гипертекстовых страниц. Все языки разметки являются интерпретируемыми. Это означает, что программа, написанная на этом языке, преобразуется в исполняемый код только на то время, пока с ней работает другая программа - обозреватель или браузер. Следовательно, форма представления информации может меняться в зависимости от настроек конкретного браузера на компьютере и не всегда отображаться так, как этого хотелось бы разработчику. С другой стороны, читая документ, пользователи могут устанавливать способы выделения текста, гарнитуру и размер шрифтов по своему вкусу. Компьютеры пользователей могут иметь экраны разных размеров с разным разрешением (от 640х480 до 1600х1280 пикселов), в результате чего максимальное количество символов, выводимых в строке, будет различным, и так далее. Всю эту адаптацию к условиям пользователя и выполняет программа просмотра.
К языкам разметки относится такой распространенный язык как HTML (Hyper Text Markup Language) - язык гипертекстовой разметки. На данный момент HTML вместе с механизмом пересылки данных, основанным на протоколе HTTP (Hyper Text Transfer Protocol), является базовой технологией создания и размещения информации в сети.
Документ, написанный на HTML, представляет собой текстовый файл, который можно писать и редактировать при помощи любых текстовых редакторов. Он включает в себя:
собственно текст, специальные последовательности символов, элементы разметки.
Графическая и звуковая информация, включаемая в HTML-документ при помощи специальных команд, хранится в отдельных файлах. Программы просмотра HTML-документов интерпретируют элементы разметки и располагают текст и графику на экране соответствующим образом, посетитель страницы эти элементы разметки не видны, а виден соответственно только результат их воздействия на документ. Для файлов, содержащие HTML-документы, принято расширение. htm или.html.
Элемент разметки (element) - конструкция HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая web-страница представляет собой набор элементов. Одна из основных идей гипертекста — возможность вложения элементов.
Элементы HTML подразделяются:
· на структурные, которые организуют текст;
и
· на форматирующие, которые задают его стиль.
Элементы разметки состоят из заключённых в угловые скобки (< >) дескрипторов - тегов и их атрибутов.
Тег (tag) - начальный (< >) или конечный (< / >) маркеры элемента. Теги определяют границы действия элементов и отделяют одни элементы от других. Теги содержат указания о способе отображения текста.
Существует два вида тегов: парные и непарные.
Действие любого парного тега начинается с того места, где встретился начальный тег и заканчивается при встрече соответствующего конечного тега. Например, текст, следующий за тегом курсивного начертания <I> и продолжающийся до его закрывающего парного флага </I>, выводится на экран курсивом, например:
<I> текст </I>
В некоторых случаях конечные теги можно опускать. Тем не менее, рекомендуется включать конечные теги, чтобы избежать ошибок при отображении документа. Имя конечного тега совпадает с именем начального, например <html>…</html>.
Непарный тег вызывает действие в том месте, где он встречается. Например, тег <BR> служит для перехода на новую строку текста в том месте, где он находится. Непарные теги лучше прописывать с закрывающимся флагом «/», который следует за названием тега: так, правильно было бы записывать <BR />.
Атрибут (attribute) - параметр или свойство элемента. По сути, переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений. Атрибуты тега следуют за именем и отделяются друг от друга одним или несколькими знаками табуляции, пробелами или символами конца строки. Порядок записи атрибутов в теге значения не имеет. Значение атрибута следует за знаком равенства, стоящим после имени атрибута, которые необходимо заключать в кавычки (" ").
Существует множество простых и сложных программ для написания страниц HTML. В своей основе все они делятся на две категории:
· программы, редактирующие исходный код;
· программы, работающие по методу WYSIWYG (What you see is what you get) - что видишь, то и получишь, когда web-мастер редактирует визуализированный конечный продукт, не видя исходного кода.
Помимо специальных HTML-редакторов, написание документа, возможно, практически всеми стандартными текстовыми редакторами и процессорами. Именно с такого способа необходимо начинать новичкам, поскольку он способствует лучшему пониманию процесса и приобретению достаточного опыта. Вооружившись собственными знаниями, простейшим текстовым редактором, имея программы работы с графикой, Вы очень скоро научитесь делать сайты на хорошем уровне.
Языки сценариев
В отличие от языков разметки языки сценариев позволяют получать интерактивные элементы web-материалов.
Скрипт (Script) или сценарий – это программный код, который включается внутрь страницы в виде исходного текста и выполняется браузером при просмотре страницы.
Одной из особенностей сценариев является возможность изменения содержимого страницы в результате работы программы. Сценарий выполняется в момент загрузки страницы или в момент вызова пользователем события, в качестве ответа на которое данный сценарий запрограммирован.
Сценарий может быть написан на языке JavaScript (Netscape) или на Visual Basic Script (VBScript, Microsoft).
Язык Dynamic HTML
Язык Dynamic HTML является модификацией HTML, разработанной фирмой Microsoft и первоначально поддерживаемым только ее браузером (Internet Explorer).
Данная модификация существенно расширяет диапазон применения сценариев при создании гипертекстовых документов. Кроме того, разрешено указывать абсолютные координаты элементов документа, что позволяет в том числе, например, при наведении пользователем курсора мыши на объект изменять его цвет или положение на странице (объект «переезжает» на другую позицию). А также введены дополнительные теги и внесено много других изменений.
Язык моделирования виртуальной реальности VRML
Язык моделирования виртуальной реальности – VRML (Virtual Reality Modeling Language) – открытый язык для создания в Web трехмерного мира, разработанный создателями языка HTML. VRML-документ позволяет создавать в Интернете управляемые трехмерные пространства с гиперсвязями, называемые «мирами». По такому трехмерному проекту можно прогуливаться при условии наличия VRML-браузера или встроенных модулей VRML для стандартного HTML-браузера.
Язык VRML аналогичен языкам описания сценариев. Его документы или графическое виртуальное трехмерное пространство, как известно, являются простыми текстовыми документами в ASCII-кодах. Они состоят из «вершин», которые определяют объекты в пространстве, а также описывают некоторые параметры этих объектов, включая размер, цвет и поверхностную текстуру. Вершины также определяют различные световые эффекты, такие как направленный точечный источник света и световые пятна, режим работы камеры, перспективную проекцию. В языке VRML, как и в большинстве трехмерных систем, координаты даются в системе XYZ и могут вращаться, транслироваться или масштабироваться с помощью преобразования вершин.
На сегодняшний день VRML-технология – наиболее перспективная технология, основным препятствием для широкого распространения которой пока является большая ресурсоемкость.
Вопросы для самоконтроля:
- Дайте классификацию языкам создания web-сайта.
- Приведите примеры клиентских технологий.
- Объясните, почему считается, что клиентские технологии не могут четко контролировать исполняемый код.
- Для чего используются сценарии? Приведите примеры.
- Перечислите общие свойства языка Dynamic HTML
- Что представляет собой документ, написанный на HTML?
- Какое расширение принято для файлов, содержащих HTML-документы?
- Что такое дескрипторы?
- Что они определяют?
- Какие они бывают?
- Охарактеризуйте парные теги:
- Напишите схему парного тега:
- Действие непарного тега:
- Напишите схему непарного тега:
- Что такое атрибут?
- Что характеризует атрибут?