Разработка электронной версии учебного пособия по курсу "Электроника"

Размещено на http://www.allbest.ru/



СОДЕРЖАНИЕ

• ВВЕДЕНИЕ
• 1. ОБЗОР И АНАЛИЗ ИССЛЕДУЕМОГО ВОПРОСА
• 1.1 Основное требование предъявляемый к ЭО
• 1.2 Понятие гипермедийного документа, использование языка HTML (Hypertext Markup Language)» как универсального средства для написания WWW страниц
• 1.3 Принципы гипертекстовой разметки. Структура документов
• 1.4 Группы тегов HTML
• 1.4.1 Фреймы и формы
• 2. ИСПОЛЬЗОВАНИЕ ЯЗЫКОВ ДЛЯ СОЗДАНИЯ ИНТЕРАКТИВНЫХ WEB-СТРАНИЦ
• 2.1. Использование языка JavaScript для создания интерактивных Web-страниц
• 2.2. Использование языка VBScript для создания сценариев или скриптов для Internet
• 2.3. Использование редактора FrontPage, как универсального средства для создания, поддержки и публикации Web-узлов в сетях Internet и Intranet
• 3. РАЗРАБОТКА ЭЛЕКТРОННОЙ ОБОЛОЧКИ КУРСА “ЭЛЕКТРОНИКА” И ЕГО СОДЕРЖАНИЕ
• 3.1 Роль электроники в устройствах автоматики, телемеханики, связи в ж\д транспорте. Оснавные этапы развития электроники
• 3.2 Р-n переход полупроводниковых диодов, характеристики и пробой р-n перехода
• 3.4 Биполярные транзисторы, принцип работы, эффект усиления
• ЗАКЛЮЧЕНИЕ
• ЛИТЕРАТУРА

ВВЕДЕНИЕ

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

Выход заключается в поиске новых форм образования. Одной из них явилось дистанционное обучение (ДО). Являясь следствием объективного процесса информатизации и вбирая в себя лучшие черты других форм, ДО вошла в XXI век как наиболее перспективная, синтетическая, гуманистическая, интегральная форма образования.

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

За прошедший год введены в эксплуатацию 217 км, осуществлен капитальный ремонт 534 км автомобильных дорог и 19 мостов. На выполнение этих работ направлено свыше 280 миллиардов сумов за счет Дорожного фонда Республики. Привлечены льготные кредитные ресурсы АБР на общую сумму 56 миллионов долларов для закупки дорожно-стротельной техники.

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

В этом направлении в 2009 году была начата реализация 12 инвестиционных проектов. На базе современных технологий расширина магистральная линия связи Ташкент-Бухара, которая позволила увеличить пропускную способность каналов в 60 раз и тем самым предоставить возможности для предоставления широкополосных услуг, таких, как видеотелефония, Интернет и др.Введены в эксплуатацию международные линии связи по направлениям: Андижан-Ош, Кунград-Бейнеу, Денау-Турсунзаде и Термез-Хайратон.

В рамках реализации программы по мелиоративному улучшению земель в 2009 году были построены и реконструированы 840 км коллек-торнодренажных сетей, 250 скважен вертикального дренажа, 15 единиц мелиоративных насосных станций и сооружений. Всего на реализацию проектов по мелиоративному улучшению земель в 2009 году было направлено 1430 миллиардов сумов.

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

Цели, задачи, и степень разработанности проблемы: Цель работы состоит в разработке электронного оболочка лекции и лабороторных занятий по курсу “Электроника” для системы ДО с использованиям языка программирования JavaSkript, VBScript и языка разметки документов HTML.Электронная оболочка была разработана с использованием серверных инструментов FrontPage, то следует описать те папки, которое создает это редактор для функционирования клиент-серверной системы.

Объект исследования: Чтобы формировать объекта необходимо решить следующие проблемы:

- Развить элемент управления для исследования электронного материала занятий лекций по курсу «Электроника»;

- Развить элемент управления для реализации лабораторных занятий и контроля для проверки по курсу «Электроника»;

- Развитие «Электронной почты» и «Правление декларации» для организации коммуникации (связи) между студентом и преподавателем.

- Развить соответствующую технологию для прямого доступа в Интернет.

Научная новизна: Научная новизна работы - это впервые разработанный курс «Электроника» для системы дистанционного обучения.

Для того чтобы дистанционные обучающие курсы глубоко внедрялись и находили свое неотъемлемое место в обществе, необходимо подготовить:

a) материально-техническую базу;

b) методологическую базу;

c) преподавательский состав.

Практическая значимость: Разработанный курс “Электроника” позволяет эффективному изучению данного курса легко работать ведущей материалами лекции, лабораторной и практической работы по данному курсу.Также возможно реализовать другие курсы в этой оболочке.

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

Краткое содержание: В данной магистерской диссертации в первой главе рассмотрены вопросы основные требование предъявляемые к ЭО, понятие гипермедийного документа. Во второй главе рассмотрены вопросы, использование языков для создания интерактивных WEB -страниц. В третьей главе рассмотрены вопросы изучение и анализ устройств из семейства полупроводниковых диодов.

Вклад автора в исследование проблемы: «Электронная оболочка» должна быть возможность для организации дистанционного обучения студента с преподавателем:

Ш Во-первых, чтобы имела возможность использовать «Электронной почты» (E-mail), т.к. это является основным методом для организации связи между студентом и преподавателем. Студент посредством канала связи электронной почты может посылать преподавателю интересующие его вопросы, ответы решенных тестов, отчеты лабораторных и семинарских занятий и в свою очередь может получить от преподавателя ответы на интересующие его вопросы, отметки за выполнение заданий, а также может получить задание по курсу;

Ш Во-вторых, иметь «Доску объявлений» где студенты или преподаватели могли бы разместить свои объявлений, и посредством этого, объявить всем или некоторым группам, которые проходят курс ДО;

Ш В третьих, должен иметь непосредственный доступ к сети Internet;

Ш В четвертых, должен предусматривать лабораторные, семинарские занятие курса, а также контрольные тесты;

Ш В пятых, иметь возможность организации видео и электронной конференции и т.д.;

Публикации и апробация работы: Основные положения дистанции доказывались, обсуждались и получили одобрение на научно-технических конференциях в ТашИИТе и опубликованы в сборниках научных трудов ТашИИТа:

1. Создание интерактивных Web-страниц с использованием JavaScript.

2. Махсус фанларни ў?итишда дидактик тамойиллар.

3. “Электроника” фанидан электрон ў?ув ?ўлланмада манти?ий элементлар ха?ида.

1. ОБЗОР И АНАЛИЗ ИССЛЕДУЕМОГО ВОПРОСА

1.1 Основное требование предъявляемый к ЭО

Одним из важнейших требований, предъявляемых к «электронной оболочке» для создания Web-курсов, является дружественность интерфейса. Преподавателю зачастую трудно дается освоение новых технологий, поэтому к вопросам проектирования интерфейса необходимо подходить очень внимательно, так как большинство преподавателей, глядя на существующие инструменты, спрашивают: «Почему так сложно?» Типичными недостатками систем проектирования Web-кypcoв являются нестандартное расположение элементов управления (пунктов меню, кнопок и т.д.) и большая глубина и сложность иерархий меню. Представить студенту курсы с продуманным интерфейсом так же важно, как создать Web-сайт с хорошим дизайном.

В настоящее время остро стоит проблема интеграции оболочкой для создания Web-курсов в системы управления учебным процессом. Необходима открытая структура хранения Web-курсов. При разработке «электронной оболочка» необходимо подробно описать интерфейс доступ к материалам курса. В этом случае система, созданная с помощью этого оболочка, будет иметь связь с существующими продуктами управления учебным процессом, которые вуз уже использует или хотел бы использовать. Также необходима хорошо описанная схема базы данных, в которой хранятся курсы и информация для управления учебным процессом. При наличии функций для импорта/экспорта данных в стандартные форматы представления курсы можно будет создавать, и корректировать в таких редакторах, или MS Word, Power Point и др.

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

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

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



Рис. 1.1 Схема предоставления студенту доступа к ресурсам

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

1.2 Понятие гипермедийного документа, использование языка HTML (Hypertext Markup Language)» как универсального средства для написания WWW страниц

гипермедийный документ страница интерактивный

Самым популярным, удобным и передовым сервисом internet в настоящее время является World Wide Web- Больше половины потока данных internet утилизируется для нужд WWW. WWW работает по принципу "клиент/ серверы", т.е. существует множество серверов, которые по запросу клиента возвращают ему гипермедийный документ. Данная магистерская диссертационная работа включает в себя пользовательскую оболочку, построенную на гипермедийных документах с использованием языков HTML и JavaScript и редактора Front Page 2000.[15]

Гипермедийный документ-это документ, состоящий из частей с разнообразным представлением информации (текст, звук, графика, видео и т.д.), в котором каждый элемент может являться ссылкой на другой документ или его часть. Ссылки в WWW документах (страницах) организованы так, что каждый информационный ресурс в глобальной сети Internet может быть указан уникальным образом и документ, читаемый в данный момент, может ссылаться как на документы на этом сервере, так и на документы (и вообще на ресурсы Internet) на других компьютерах Internet. Причем пользователь не будет замечать такой дискретности и будет работать со всем информационным пространством Internet как с единым целым. Ссылки WWW могут указывать не только на документы, специфичные для самой WWW, но и на прочие сервисы и информационные ресурсы Internet. Более того, большинство программ-клиентов WWW не просто понимают такие ссылки, но и являются программами - клиентами других сервисов, например, сетевых новостей, электронной почты и т.д. Таким образом, программные средства WWW универсальны для различных сервисов Internet, а сама информационная система WWW является интегрирующей. [30]

Гарантом универсальности WWW является ряд стандартов, описывающих ее свойства, и архитектуру. Стандартным является и язык для написания WWW страниц. Он называется HTML (Hypertext Markup Language) и представляет собой систему условных обозначений, называемых тегами или тагами (tag), которые вносятся в WWW-документ и информируют о том, как данный документ должен выглядеть и как он должен быть связан с другими документами. Несмотря на то что HTML не является языком программирования, a HTML документ - компьютерной программой, HTML позволяет создавать интерактивные, кроссплатформенные, мультимедийные приложения. При этом HTML гораздо проще, чем любой из полноценных языков программирования т.к. компьютерная программа, как правило, это серия процедур и команд, оперирующих с внешними данными, a HTML документ - сами данные. Язык HTML специфицирует только грамматику и синтаксис тэгов разметки, вставляемых в данные и говорящих браузерам -компьютерным программам чтения HTML документов, в каком виде представлять документ пользователю. [15]

Язык гипертекстовой разметки HTML (HyperText Markup Language) был предложен Тимом Бернерсом-Ли в 1989 году в качестве одного из компонентов технологии разработки распределенной гипертекстовой системы World Wide Web. Когда Т. Бернерс-Ли предложил свою систему, в мире информационных технологий наблюдался повышенный интерес к новому и модному в то время направлению гипертекстовым системам. Сама идея, но не термин, была введена В. Бушем в 1945 году в предложениях по созданию электромеханической информационной системы Метех. Несмотря на то, что Буш был советником по науке президента Рузвельта, идея не была реализована. В 1965 году Т. Нельсон ввел в обращение сам термин "гипертекст", развил и даже реализовал некоторые идеи, связанные с работой с "нелинейными" текстами. В 1968 году изобретатель манипулятора "мышь" Д. Енжильбард продемонстрировал работу с системой, имеющей типичный гипертекстовый интерфейс, и, что интересно, проведена эта демонстрация была с использованием системы телекоммуникаций. Однако внятно описать свою систему он не смог. В 1975 году идея гипертекста нашла воплощение в информационной системе внутреннего распорядка атомного авианосца "Карл Винстон". Работы в этом направлении продолжались, и время от времени появлялись реализации типа HyperCard фирмы Apple или HyperNode фирмы Xerox. В 1987 была проведена первая специализированная конференция Hypertext'87, материалам которой был посвящен специальный выпуск журнала "Communication ACM".

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

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

Разработчики HTML должны были решить две задачи:

- дать дизайнерам гипертекстовых баз данных простое средство создания документов;

- сделать это средство достаточно мощным, чтобы отразить имевшиеся на тот момент представления об интерфейсе пользователя гипертекстовых баз данных.

Первая задача была решена за счет выбора теговой модели описания документа. Такая модель широко применяется в системах подготовки документов для печати. Примером такой системы является хорошо известный язык разметки научных документов ТеХ, предложенный Американским Математическим Обществом, и программы его интерпретации. К моменту создания HTML существовал стандарт языка разметки печатных документов - Standard Generalised Markup Language, который и был взят в качестве основы HTML. Предполагалось, что такое решение поможет использовать существующее программное обеспечение для интерпретации нового языка.

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

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

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

- такой файл можно создать в любом текстовом редакторе на любой аппаратной платформе в среде любой операционной системы;

- к моменту разработки HTML существовал американский стандарт для разработки сетевых информационных систем - Z39.50, в котором в качестве единицы хранения указывался простой текстовый файл в кодировке LATIN 1, что соответствует US ASCII.

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

Такой подход предполагает наличие еще одной компоненты технологии интерпретатора языка. В World Wide Web функции интерпретатора разделены между сервером гипертекстовой базы данных и интерфейсом пользователя.

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

Если первая версия языка (HTML 1.0) была направлена на представление языка как такового, где описание его возможностей носило скорее рекомендательный характер, вторая версия языка (HTML 2.0) фиксировала практику использования конструкций языка, версия ++ (HTML++) представляла новые возможности, расширяя набор тегов HTML в сторону отображения научной информации и таблиц, а также улучшения стиля компоновки изображений и текста, то версия 3.2 призвана упорядочить все нововведения и согласовать их с существующей практикой. Кроме этого, в версии 3.2 снова делается попытка формализации интерфейса пользователя гипертекстовой распределенной системы.

По сравнению с версией 2.0, HTML 3.2 позволяет реализовать отображение таблиц (контейнер <TABLE>...</TABLE>), выполнение мобильных кодов (<APPLET...>...</APPLET>), обтекание графики текстом, а также отображение верхних и нижних индексов (<SUP>...</SUP>; <SUB>...</SUB>).

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

- разметка математических формул (HTML 3.0);

- дополнительные контейнеры заголовка (HTML 3.0; Netscape Extensions; Microsoft Extensions);

- дополнительные атрибуты стандартных контейнеров тела документа (ALIGN; BGCOLOR; TARGET и т.п.);

- разбиение страницы на фреймы;

- открытие дополнительных окон и др.

Сейчас World Wide Web Consortium (W3C) уже опубликовал рабочие материалы спецификации HTML 4.0. Кроме возможностей разметки текста, включения мультимедиа и формирования гипертекстовых связей уже существовавших в предыдущих версиях HTML, в версию 4.0 включены дополнительные средства работы с мультимедиа, языки программирования, таблицы стилей, упрощенные средства печати изображений и документов, которые становятся более доступными для всех пользователей HTML 4.0. [30] Эти дополнения служат интернационализации WWW и распространению ее по всему миру. Кроме этого, для управления сценариями просмотра страниц Website (гипертекстовой базы данных, выполненной в технологии World Wide Web) можно использовать языки программирования этих сценариев типа JavaScript, Java и VBScript. [21]

1.3 Принципы гипертекстовой разметки. Структура документов

За основу модели разметки документов в HTML принята теговая модель. Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами. Т.е. документ HTML представляет собой не что иное, как обычный ASCII-файл, с добавленными в него управляющими HTML - кодами (тегами). Таги HTML- документов в большинстве своем просты для понимания и использования, ибо они образованы с помощью общеупотребительных слов английского языка, понятных сокращений и обозначений. HTML- тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега заключается в угловые скобки (< и >). Простейший вариант тега - имя, заключенное в угловые скобки, например <HEAD> или <i>. Для более сложных тегов характерно различие атрибутов, которые могут иметь конкретные значения, определенные автором для видоизменения функции тега.

Атрибуты тега следуют за именем и отделяются друг от друга одним или несколькими знаками табуляции, пробелами или символами возврата к началу строки. Порядок записи атрибутов в теге значения не имеет. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута - одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в одинарные или двойные кавычки, особенно если они содержат несколько разделенных пробелами слов. Длина значения атрибута ограничена 1024 символами. Регистр символов в именах тегов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов. Например, особенно важно использовать нужный регистр при вводе URL других документов в качестве значения атрибута HREF.

Чаще всего HTML-теги состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/) (например, для тега стиля шрифта - курсив <i> закрывающая пара представляет собой </i>, для тега заголовка <TITLE> закрывающей парой будет </TITLE>). Конечные теги никогда не содержат атрибутов. По своему значению теги близки к понятию скобок "begin/end" в универсальных языках программирования, которые задают области действия имен локальных переменных и т. п. Теги определяют область действия правил интерпретации текстовых тегов документа.

При использовании вложенных тегов в документе следует соблюдать особую аккуратность. Вложенные теги нужно закрывать, начиная с самого последнего и двигаясь к первому. Некоторые HTML- теги не имеют конечного компонента, поскольку они являются автономными элементами. Например, тег изображения <IMG>, который служит для вставки в документ графического изображения, конечного компонента не требует. К автономным тегам также относятся разрыв строки (<BR>), горизонтальная линейка (<HR>) и теги, содержащие такую информацию о документе, которая не влияет на его отображаемое содержимое, например теги <МЕТА> и <BASE>.

В некоторых случаях конечные теги в документе можно опускать. Большинство браузеров реализованы так, что при обработке текста документа начальный тег воспринимается как конечный тег предыдущего. Самый распространенный тег такого типа - тег абзаца <Р>. Поскольку он используется в документе очень часто, то его обычно ставят только в начале каждого абзаца. Когда один абзац заканчивается, следующий тег <Р> сигнализирует браузеру о том, что нужно завершить данный абзац и начать следующий. Большинство авторов тегом конца абзаца вообще не пользуются.

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

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

"контейнер": = <"имя тега" "список атрибутов">

содержание контейнера

</"имя тега">

1.4 Группы тегов HTML

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

- определяющие структуру документа;

- оформление блоков гипертекста (параграфы, списки, таблицы, картинки);

- гипертекстовые ссылки и закладки;

- формы для организации диалога;

- вызов программ.

Структура гипертекстовой сети задается гипертекстовыми ссылками. Гипертекстовая ссылка - это адрес другого HTML документа или информационного ресурса Internet, который тематически, логически или каким-либо другим способом связан с документом, в котором ссылка определена. [30]

Для записи гипертекстовых ссылок в системе WWW была разработана специальная форма, которая называется Universe Resource Locator. Типичным примером использования этой записи можно считать следующий пример:

Этот текст содержит <AHREF="http://polyn.net.kiae.su/altai/index.html"> гипертекстовую ссылку </А>

В приведенном выше примере тег "А", который в HTML называют якорем (anchor), использует атрибут "HREF", который обозначает гипертекстовую ссылку (Hypertext Reference), для записи этой ссылки в форме URL. Данная ссылка указывает на документ с именем "index.html" в директории "altai" на сервере "polyn.net.kiae.su", доступ к которому осуществляется по протоколу "http".

Гипертекстовые ссылки в HTML делятся на два класса: контекстные гипертекстовые ссылки и общие. Контекстные ссылки вмонтированы в тело документа, как это было продемонстрировано в предыдущем примере, в то время как общие ссылки связаны со всем документом в целом и могут быть использованы при просмотре любого фрагмента документа. Оба класса ссылок присутствуют в стандарте языка с самого его рождения, однако, первоначально наибольшей популярностью пользовались контекстные ссылки. Эта популярность привела к тому, что механизм использования общих ссылок практически полностью "атрофировался". Однако по мере стандартизации интерфейса пользователя и стилей представления информации разработчики языка снова вернулись к общим ссылкам и стремятся приспособить их к задачам управления этим интерфейсом. Справедливости ради, следует отметить, что общие гипертекстовые ссылки в большинстве браузеров не используются и не отображаются.

Структура HTML - документа позволяет использовать вложенные друг в друга контейнеры. Собственно, сам документ - это один большой контейнер который начинается с тега <HTML> и заканчивается тегом </HTML>:

<HTML> Содержание документа </HTML>

Контейнер HTML или гипертекстовый документ состоит из двух других вложенных контейнеров: заголовка документа (HEAD) и тела документа (BODY). Рассмотрим простейший пример классического документа:

<HTML>

<HEAD>

<TITLE>Simple Document</TITLE>

</HEAD>

<BODY text=#OOOOff BACKGROUND=#f0f0f0 >

<Ш>Пример простого документа</Н1>

<HR>

Формы HTML-документов

<UL>

<Ы>Классическая

<Ы>Фреймовая

</UL>

<HR>

</BODY>

</HTML>

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

Тело документа состоит из:

- иерархических контейнеров и заставок;

- заголовков (от HI до Н6);

- блоков (параграфы, списки, формы, таблицы, картинки и т.п.);

- горизонтальных отчеркиваний и адресов;

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

- математических описаний, графики и гипертекстовых ссылок.

BODY

Описание тегов тела документа следует начать с тега BODY. В отличии от тега HEAD, тег BODY имеет атрибуты:

ID - идентификатор тега. Используется для именования тегов, а также в качестве точки перехода по гипертекстовой ссылке. Данный атрибут имеется практически во всех тегах тела документа. С точки зрения практического использования идентификатора BODY в качестве точки перехода по гипертекстовым ссылкам, использование этого атрибута сомнительно, т.к. отображаемая часть документа собственно и начинается с этого тега.

LANG - определяет язык документа в виде двухсимвольного кода ISO-639, за которым следует через точку необязательный код страны в формате ISO-3166. По замыслу разработчиков стандарта языка данный атрибут должен распознаваться программами интерпретации и управлять отображением многоязычных текстов. Однако даже Arena, специально предназначенная для иллюстрации HTML 3.0, не реализует этой возможности. [15-30]

CLASS - иерархически организованное имя типа "ADDITION.FIRST". Предназначено для связывания тега текста с определенным стилем отображения. Реально пока не используется.

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

BACKGROUND - определяет фон, на котором отображается текст документа. В примере HTML- документа в качестве фона был использован небольшой графический образ "bgr.gif.

<BODY BACKGROUND="bgr.gif >

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

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

Таблица 1.

Шестнадцатеричная нотация цвета в терминах RGB

Атрибут	LINK=#00FF00
BACKCOLOR=#FFFF FF	Цвет фона
TEXT=#0000FF	Цвет текста
VLINK=#FF0000	Цвет пройденных гипертекстовых ссылок
LINK=#00FF00	Цвет гипертекстовой ссылки

В данной таблице 2. строка #ХХХХХХ определяет цвет в терминах RGB в шестнадцатеричной нотации. Так, цвет текста определен как синий, фона - белый, пройденные ссылки красные, а новые ссылки зеленые. Если в качестве атрибутов тега BODY указать:

<BODY BACKCOLOR=#FFFFFF TEXT=#0000FF VLINK=#FF0000 LINK=#00FF00,

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

Рассмотрим теги управления разметкой включающие в себя теги заголовков, теги, управляющие формой отображения (таблица 3.), теги, характеризующие тип информации (таблица 4.).

Заголовки обозначают начала разделов документа. В стандарте определено 6 уровней заголовков: от HI до Н6. Текст, окруженный тегами <Н1></Н1>, получается большим - это основной заголовок. Если текст окружен тегами <Н2></Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ></Н3> еще меньше и так далее до <Н6></ Н6>. Некоторые программы, позволяют использовать большее число заголовков, однако реально более трех уровней встречается редко, а более 5 -крайне редко.

Стандарт языка насчитывает 11 атрибутов у тега заглавия. Рассмотрим только ALIGN, т.к. остальные в большинстве программ интерпретаторов не реализованы.

Для разбиения текста на параграфы используется тег <Р> в нем используются те же атрибуты что и заголовках.

RED></FONT>.

Таблица 2.

Теги, управляющие формой отображения

Тег	Значение
<1> <л>	Курсив (Italic)
<в> </ в>	Усиление BOLD)
<тт>... </тт>	Телетайп
<и>. </и>	Подчеркивание
<s>...</s>	Перечеркнутый текст
< BIG >...</ BIG >	Увеличенный фонт
< SMALL >...</SMALL >	Уменьшенный фонт
< SMALL >...</ SMALL >	Подстрочные символы
< SU3 >... </ SUP >	Надстрочные символы

Теги, характеризующие тип информации

Таблица 3.

Тег	Значение
<ЕМ>... </ЕМ>	Типографское усиление
<С1ТЕ>...</С1ТЕ>	Цитирование
<STRONG >.</ STRONG >	Усиление
<CODE>... /CODE>	Отображает примеры кода (например, коды программ)
<SAMP>... </SAMP>	Последовательность литералов
<KBD>... </KBD>	Пример ввода символов с клавиатуры
<VAR>...</VAR>	Переменная
<DFN>... </DFN>	Определение
<Q>- </Q>	Текст, заключенный в скобки

1.4.1 Фреймы и формы

В каком-то смысле фрейм - это именно то, что означает данное слово: рамка вокруг картинки, окошко или страница. Вводя, тег <FRAME>, дизайнер HTML - страницы разделяет экран браузера на части. В результате человек, просматривающий страницу, может изучать одну часть страницы независимо от остальной части. Фактически браузер, распознающий фреймы, загружает разные страницы в разные секции, или фреймы, экрана. Например, вы можете построить страницу таким образом, что фирменный знак будет зафиксирован в верхней части экрана, в то время как остальную часть страницы пользователь пролистывает обычным способом. Можно расположить сбоку кнопки навигации, которые не перемещаются, когда читатель щелкает их мышкой, так что изменяется только часть экрана, а сама полоска навигации остается неподвижной. [29-30]

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

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

Как сделать так, чтобы формы отсылали на сервер введенные данные? Возможно, это именно то, чего Вы ждете. На самом деле заставить форму пересылать данные довольно просто. Главная проблема - понять, куда их пересылать. Формально вы просто пишете в теге <FORM> атрибут ACTION= и задаете ссылку на URL программы, которая может обработать входные данные и сделать с ними что-нибудь полезное. [30]

2. ИСПОЛЬЗОВАНИЕ ЯЗЫКОВ ДЛЯ СОЗДАНИЯ ИНТЕРАКТИВНЫХ WEB-СТРАНИЦ

2.1 Использование языка JavaScript для создания интерактивных Web-страниц

Другим языком, используемым в разработке пользовательской оболочки ной магистерской диссертации, является язык JavaScript (формы, созданные с его применением, будут описаны в третьем разделе данной работы).

JavaScript - новый язык для составления скриптов, разработанный фирмой Netscape. С помощью JavaScript можно легко создавать интерактивные - Web-страницы. [21]

Код скрипта JavaScript размещается непосредственно на HTML-странице. Чтобы увидеть, как это делается, давайте рассмотрим следующий стой пример:

<html>

<body>

<br>

Это обычный HTML документ.

<br>

<script language="JavaScript">

document. write("A это JavaScript!")

</script>

<br>

Вновь документ HTML.

</body>

</html>

С первого взгляда пример напоминает обычный файл HTML. Единственное новшество здесь - конструкция:

<script language="JavaScript">

document.write ("А это JavaScript!")

</script>

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

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

Это обычный HTML документ.

А это JavaScript!

Вновь документ HTML.

Я должен признать, что данный скрипт не столь полезен - то же самое и более просто можно было бы написать на "чистом" языке HTML. Я всего лишь хотел продемонстрировать Вам тег признака <script>. Все, что стоит между тегами <script> и </script>, интерпретируется как код на языке JavaScript. Здесь Вы также видите пример использования инструкции document.write() - одной из наиболее важных команд, используемых при программировании на языке JavaScript. Команда document.write используется, когда необходимо что-либо написать в текущем документе (в данном случае таком является наш HTML-документ). Так наша небольшая программа на JavaScript в HTML-документе пишет фразу "А это JavaScript!".

А как будет выглядеть наша страница, если браузер не воспринимает JavaScript? Браузеры, не имеющие поддержки JavaScript, "не знают" и тега <script>. Они игнорируют его и печатают все стоящие вслед за ним коды как обычный текст. Иными словами, читатель увидит, как код JavaScript, приведенный в нашей программе, окажется вписан открытым текстом прямо посреди HTML-документа. Разумеется, это не входило в наши намерения. На этот случай имеется специальный способ скрыть исходный код скрипта от старых версий браузеров - мы будем использовать для этого тэг комментария из HTML - <! >. В результате новый вариант нашего исходного кода будет выглядеть как:

<html>

<body> <br>

Это обычный HTML документ.

<br>

<script language="JavaScript"> <!-- hide from old browsers document. write("A это JavaScript!") //--> </script> <br>

Вновь документ HTML. </body> </html>

В этом случае браузер без поддержки JavaScript будет печатать: Это обычный HTML документ. Вновь документ HTML.

А без HTML - - тега комментария браузер без поддержки JavaScript напечатал бы:

Это обычный НТМЬ документ. docuent.wfite("A это JavaScriptP) Вновь документ HTML.

Пожалуйста, обратите внимание, что Вы не можете полностью скрыть исходный код JavaScript. To, что "мы здесь делаете, имеет целью предотвратить распечатку кода скрипта на старых браузерах - однако, тем не менее читатель сможет увидеть эти код посредством пункта меню 'View document source'. He существует также способа скрыть что-либо от просмотра в вашем исходном коде (и увидеть, как выполнен тот или иной трюк). [25]

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

В большинстве случаев функции представляют собой лишь способ связать вместе нескольких' команд. Давайте, к примеру, напишем скрипт, печатающий некий текст три раза подряд. Для начала рассмотрим простой подход:

<html>

<script language="JavaScript">

<!-- hide

document.write("Добро пожаловать на мою страницу !<br>");

document. write("3To JavaScript!<br>");

document. write(" Добро пожаловать на мою страницу !<br>");

document. write("3TO JavaScript!<br>");

document.write('^o6po пожаловать на мою страницу !<br>");

document. write("3To JavaScript!<br>");

</script>

</html>

И такой скрипт напишет следующий текст: Добро пожаловать на мою страницу!

Это JavaScript]

Если посмотреть на исходный код скрипта, то видно, что для получения необходимого результата определенная часть его кода была повторена три раза. Разве это эффективно? Нет, мы можем решить ту же задачу еще лучше. Как насчет такого скрипта для решения той же самой задачи?:

<Html>

<script language="JavaScript">

<!-hide

Function myFunctionf() {

document.write ("Добро пожаловать на мою страницу !<br>");

document. write("3TOJavaScript!<br>");

}

my FunctionQ; my

Function/); my Func-tionQ;

</script> </html>

В этом скрипте определена некая функция, состоящую из следующих строк:

Function myFunctionQ {

document.write ("Добро пожаловать на мою страницу!<br>");

document. write("3To JavaScript!<br>");

}

Все команды скрипа, что находятся внутри фигурных скобок - {} -принадлежат функции my Function(). Это означает, что обе команды document.write ( ) теперь связаны воедино и могут быть выполнены при вызове указанной функции. И действительно, в нашем примере есть три вызова этой функции - Можно увидеть, что мы написали строку my Function() три раза сразу после того, как дали определение самой функции. То есть как раз и шали три вызова. В свою очередь, это означает, что содержимое этой функции (команды, указанные в фигурных скобках) было выполнено трижды. Поскольку это довольно простой пример использования функции, то у Вас мог возникнуть вопрос, а почему собственно эти функции столь важны в JavaScript. По прочтении данного описания Вы конечно же поймете их пользу. Именно возможность передачи переменных при вызове функции придает ним скрипам подлинную гибкость.

Размещено на http://www.allbest.ru/

Рис. 2.1. Иерархия объектов, создаваемая HTML - страницей произвольный пример

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

Разумеется, мы должны иметь возможность получать информацию о личных объектах в этой иерархии и управлять ею. Для этого мы должны знать, как в языке JavaScript организован доступ к различным объектам. Как видно, каждый объект иерархической структуры имеет свое имя. Следовательно, если вы хотите узнать, как можно обратиться к первому рисунку на нашей HTML-странице, то обязаны сориентироваться в иерархии объектов. И начать нужно с самой вершины. Первый объект такой структуры называется document. Первый рисунок на странице представлен объект images[0]. Это означает, что отныне мы можем получать доступ к ну объекту, записав в JavaScript document. images[0].

Если же, например, вы хотите знать, какой текст ввел читатель в первый элемент формы, то сперва должны выяснить, как получить доступ к этому объекту. И снова начинаем мы с вершины нашей иерархии объектов. Затем прослеживаем путь к объекту с именем elements[0] и последовательно записываем названия всех объектов, которые минуем. В итоге выясняется, что доступ к первому полю для ввода текста можно получить, записав: document, forms [0] .elements [0].

Теперь рассмотрим вопрос создания фреймов. Один из часто задаваемых вопросов - как фреймы и JavaScript могут работать вместе. Хотя создание фреймов является задачей языка HTML, я бы хотел все же описать здесь основные моменты этого процесса. Для создания фреймов Вам необходимо два тэга: <frameset> и <frame>. HTML-страница, создающая два фрейма, в общем случае может выглядеть следующим образом:

<html>

<frameset rows="50%,50%">

<frame src="pagel.rmn" name="framer>

<frame src="page2.htm" name="frame2">

</frameset>

</html>

В результате будут созданы два фрейма. Вы можете заметить, что во фрейме <frameset> мы используем свойство rows. Это означает, два наших фрейма будут расположены друг над другом. В верхний фрейм будет загружена HTML-страница pagel.htm, а в нижнем фрейме разместится документ page2 .htm .[15-21]

Если вы хотите, чтобы документы располагались не друг над другом, а рядом то, Вам следует в тэге <frameset> писать rows, a cols. Фрагмент "50%,50%" сообщает, насколько велики должны быть оба получившихся окна. Вы имеете также возможность записать "50%,*", если не хотите утруждать себя расчетами, насколько велик должен быть второй фрейм, чтобы в сумме получалась все те же 100%. Вы можете также задать размер фрейма в пикселях, для чего достаточно после числа не ставить символ %.

Любому фрейму можно присвоить уникальное имя, воспользовавшись в тэге <frame> атрибутом name. Такая возможность пригодится нам в языке JavaScript для доступа к фреймам. А теперь давайте посмотрим, как JavaScript "видит" фреймы, присутствующие в окне браузера. Для этой цели мы создадим два фрейма, как было показано в первом примере этой части описания.

Как мы уже видели, JavaScript организует все элементы, представленные на web-странице, в виде некой иерархической структуры. То же самое относится и к фреймам. На рис. 2.2. показана иерархия объектов, представленных в примере:



Рис. 2.2. Иерархия объектов

В вершине иерархии находится окно браузера (browser window). В данном случае оно разбито на два фрейма. Таким образом, окно, как объект, является родоначальником, родителем данной иерархии (parent), а два фрейма- соответственно, его потомки (children). Мы присвоили этим двум фреймам уникальные имена - frame 1 и frame2. И с помощью этих имен мы можем обмениваться информацией с двумя указанными фреймами.

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

Чтобы решить эту задачу, мы должны рассмотреть налри случая:

- главное окно/фрейм получает доступ к фрейму-потомку;

- фрейм-потомок получает доступ к родительскому окну/фрейму;

- фрейм-потомок получает доступ к другому фрейму-потомку.

С точки зрения объекта "окно" (window) два указанных фрейма называются frame 1 и frame2. Как можно видеть на предыдущем рис. 2.2., существует прямая взаимосвязь между родительским окном и каждым фреймом.



Рис.2.3. Взаимосвязь фреймов при обращении одного к другому

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

Например, можно написать: frame2.document.write("3To сообщение передано от родительского окна"). В некоторых случаях Вам понадобится, находясь во фрейме, получать доступу к родительскому окну (рис. 2.4.). Например, это бывает необходимо, если Вы хотите при следующем переходе избавиться от фреймов. В таком случае удаление фреймов означает лишь загрузку новой страницы вместо содержавшей фреймы. В нашем случае это загрузка страницы в родительское окно. Сделать это нам поможет доступ к родительскому- parent - окну (или родительскому фрейму) из фреймов, являющихся его потомками. Чтобы загрузить новый документ, мы должны внести в location.href новый адрес URL. Поскольку мы хотим избавиться от фреймов, следует использовать объект location из родительского окна. (Напомним, что в каждый фрейм можно загрузить собственную страницу, то мы имеем для каждого фрейма собственный объект location). Итак, мы можем загрузить новую страницу в родительское окно с помощью команды: parent.location.href= "http://...";



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

И, наконец, очень часто приходится решать задачу обеспечения доступа с одного фрейма-потомка к другому такому же фрейму-потомку. Итак, как можно, находясь в первом фрейме, записать что-либо во второй - то есть, которой командой следует воспользоваться на HTML-странице page.htm? Как можно увидеть на нашем рисунке, между двумя этими фреймами нет никакой прямой связи. И потому мы не можем просто так вызвать frame2, находясь в фрейме frame 1, который просто ничего не знает о существовании второго фрейма. С точки же зрения родительского окна второй фрейм действительно существует и называется frame2, а к самому родительскому окну можно обратиться из первого фрейма по имени parent. Таким образом, чтобы получить доступ к объекту document, разместившемуся во втором фрейме, мы должны написать следующее:

...