История создания и версии языков гипертекстовой разметки

Содержание:

ВВЕДЕНИЕ

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

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

Во всемирной паутине долгое время использовались стандарты HTML 4.01, XHTML 1.0 и XHTML 1.1. Веб-страницы на практике оказывались свёрстаны с использованием смеси особенностей, представленных различными спецификациями, включая спецификации программных продуктов, например веб-браузеров, а также сложившихся общеупотребительных приёмов. HTML5 был создан как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML.

Он расширяет, улучшает и рационализирует разметку документов, а также добавляет единый интерфейс программирования Application Programming Interface (API) для сложных веб-приложений.

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

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

– рассмотреть историю создания и версии языков гипертекстовой разметки;

– изучить возможности языка гипертекстовой разметки HTML 5.0;

– изучить существующие методы верстки веб-страниц;

– дать понятие и привести общую характеристику электронному учебному пособию;

– разработать интерфейс электронного учебного пособия;

– разработать структуру электронного учебного пособия.

Объект – языки гипертекстовой разметки.

Предмет – учебные материалы на тему «Язык гипертекстовой разметки HTML5».

1. Теоретические аспекты языков гипертекстовой разметки

1.1. История создания и версии языков гипертекстовой разметки

Начало истории языка HTML было положено в 1986 году, когда Международной организацией по стандартизации (ISO) был принят стандарт ISO-8879. Он носил название Standard Generalized Markup Language (Стандартный Обобщѐнный Язык Разметки).

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

При этом управляющие коды или теги не несли никакой информации о внешнем виде документа, а только задавали его структуру. В 1989 году сотрудник Европейского института физики частиц (CERN) Тим Бернерс-Ли выдвинул предложение о создании Системы гипертекстовых документов. В 1990 году он назвал ее World Wide Web (Всемирная паутина). Одной из составляющих системы был язык гипертекстовой разметки. Его созданием Бернерс-Ли занялся в 1990 году, когда разрабатывал первый браузер –программу, позволяющую просматривать гипертекстовые документы [2].

В 1991 году группой Бернерс-Ли, работавшей над созданием системы передачи гипертекстовой информации через Интернет, было принято решение, выбрать SGML в качестве основы для нового языка разметки гипертекстовых документов. Этот язык был назван HTML (Hyper Text Markup Language, «язык разметки гипертекста»). HTML разделял все особенности идеологии SGML, т. е. подразумевалась только логическая разметка текста. Например, в HTML версии 1.2 (июнь 1993 г.) присутствовало около 40 тегов. И только три из них отвечали за физические параметры отображения документа (но эти теги не рекомендовались к использованию). А первым графическим браузером в то время была программа Mosaic, разработанная в Национальном центре суперкомпьютерных приложений [2].

В апреле 1994 г. началась подготовка спецификации следующей версии языка – 2.0. Этим уже занимался Консорциум W3 (W3C). Было решено разбить язык HTML, на уровни. Это было сделано, чтобы обеспечить обратную совместимость версий: каждый новый уровень непременно включал в себя предыдущие. Язык HTML 2.0 (1995 г.) является, например, языком второго уровня, с его помощью нельзя верстать страницы со сложным дизайном, так как это невозможно без таблиц.

Самым большим прорывом явился HTML 3.2. Он включил в себя такие нововведения, как теги для создания таблиц, вставки рисунков, примечаний, разметку математических формул и др. Наиболее важным нововведением явились CSS (таблицы стилей), которые позволяли задавать единый вид всему сайту. Они имели свою структуру, свой синтаксис и применялись вместе с HTML [2].

К концу 1996 года практически все браузеры поддерживали HTML 3.2, и благодаря этому Web-дизайн испытал небывалый взлет. Появилась возможность проектировать и отображать на экране сложные композиции графических элементов, ничем не уступающие печатным изданиям. Это положило начало эре Web-дизайна.

В 1997 году появилась спецификация языка HTML 4.0. Она включала поддержку фреймов, унифицированную процедуру вставки различных объектов, поддержку каскадных таблиц стилей (CSS). Кроме того, были усовершенствованы формы и таблицы. Версия HTML 4.01 стала стандартом в 1999 году и господствует в мире WWW уже более 10 лет. Но ее очень скоро потеснит HTML 5.0 – новая версия языка гипертекстовой разметки [7].

История HTML5 начинается в 2004 году, когда большая часть видных деятелей веб-индустрии, а также крупных компаний, таких как Google, Mozilla, Opera, Apple и Microsoft, создают свою собственную рабочую группу под названием Web Hypertext Application Technology Working Group (WHATWG), возглавил её гениальный программист – Ян Хиксон [3].

Перед тем как начать работать над HTML5, рабочая группа WHATWG создала две спецификации: Web Forms 2.0 (веб-формы) и Web Apps 1.0 (веб-приложения). Затем эти две спецификации сделали частью спецификации HTML5 [10].

В 2006 году W3C всё еще продолжает работать над XHTML 2.0. В том же году руководитель консорциума сэр Тим Бёрнерс Ли написал в своём блоге, что работа над XHTML 2.0 видимо не будет иметь смысла, поскольку разработчики сайтов не желают создавать свои проекты по XML типу, а желают новых версий HTML. Поэтому в этом же году W3C начал разработку своей версии HTML 5 (пишется через пробел), в её основе лежали наработки раб очей группы WHATWG.

Сам WHATWG работал над своей версией HTML5 (пишется без пробела), причем эта версия тоже должна была стать одной из спецификаций консорциума W3C.

В 2009 году W3C прекратил развитие XHTML 2.0 и начал разрабатывать HTML5 (решили писать без пробела) уже совместно с WHATWG. К 2012-му году практически все современные браузеры в мире начинают понимать язык HTML5, хотя еще и остаются некоторые теги которые браузеры пока не понимают [5].

На данный момент работа над языком HTML5 продолжается, создаются новые теги и технологии, всё это добавляется в спецификацию, сама спецификация HTML5 была опубликована 28 октября 2014 г.

В будущем, решили не давать цифровых версий для HTML, если будут добавляться какие-либо новшества, то их просто будут внедрять в существующую спецификацию, а сам язык называть просто HTML [4].

Таким образом, язык HTML5 является действительно хорошей вещью для разработчиков и дизайнеров Web, так как он:

– большей частью обратно совместим с тем, что там уже есть – не требуется учить совершенно новые языки для использования HTML5;

– добавляет новые мощные средства в HTML, которые были ранее доступны в Web только с помощью технологии плагинов, такие как Flash, или с помощью сложного кода JavaScript и специальных приемов;

– лучше подходит для написания динамических приложений, чем предыдущие версии HTML (HTML был создан первоначально для создания статических документов);

– имеет четко определенный алгоритм синтаксического анализа, так что все браузеры, реализующие HTML5, будут создавать одинаковое дерево DOM из одной и той же разметки, независимо от правильности [4].

Над разработкой HTML 5.0 трудится рабочая группа W3C. В эту группу входят представители таких компаний, как Microsoft, Opera, Mozilla, Google, IBM, Apple и другие. Новый стандарт позволит более эффективно управлять мультимедийным содержимым. Также будет улучшена совместимость с новыми языками web-программирования. И наконец, появятся новые теги, расширяющие возможности web-дизайна [5].

1.2. Возможности языка гипертекстовой разметки HTML 5.0

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

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

HTML5 как новая технология основывается на новых версиях языка разметки HTML, языка описания внешнего вида документов CSS3 и языка программирования JavaScript [4].

Таким образом, термин «HTML5» можно применять в широком, а также узком смыслах. В широком смысле HTML5 – это совокупность современных технологий и стандартов (HTML, CSS3, JavaScript), применяемых для разработки веб-приложений. В узком смысле HTML5 – это новая, пятая версия языка гипертекстовой разметки, которая улучшает и рационализирует разметку документов, а также добавляет единый API для сложных веб-приложений [2].

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

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

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

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

Так, тег Canvas является исключительно полезным инструментом для рисования и анимации. Элемент <canvas> представляет собой прямоугольную область интернет-страницы, задаваемую и контролируемую разработчиком. В сочетании с языком JavaScript данный инструмент позволяет осуществлять визуализацию двухмерных 2D-форм и растровых изображений [17].

Теги Audio и Video предназначены для размещения и воспроизведения на страницах сайта аудио-и видеофайлов. В частности, тег Video позволяет разместить на веб-странице полнофункциональный видеопроигрыватель без использования подключаемого модуля сторонней разработки. Для добавления видеопроигрывателя на веб-страницу с помощью элемента <video> достаточно одной строки HTML-кода [16].

CSS3-анимация и переходы позволяют создавать интерактивные эффекты без программирования и использования JavaScript. Здесь весьма полезными оказываются такие CSS-свойства, как transition-property (указание свойства, к которому применяется анимирование), transition-duration (промежуток времени, в течение которого осуществляется переход), transition-timing-function (функция изменения скорости перехода), transition-delay (время ожидания перед запуском эффекта перехода).

Что касается JavaScript, то при создании интерактивных медиа-ресурсов незаменимыми оказываются функции отложенного запуска кода – setTimeout (запускает код единожды) и setInterval (запускает код постоянно с заданной периодичностью).

1.3. Верстка веб-страниц

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

Основная задача верстки в веб-дизайне – создание сайта на основе графического макета, т. е. изображения сайта, подготовленного в каком-либо графическом редакторе. Предпочтения отдаются редакторам, позволяющим работать с многослойными изображениями (AdobePhotoshop, GIMP и др.).

На основе графического макета создается html-макет сайта или темплейт (англ. template) – совокупность типичных страниц сайта, зачастую наполненных не содержательным контентом, а бессмысленным набором слов – т. н. «заполнитель» или «рыба» (классический пример – текст на псевдолатыни «Loremipsum...»).

Разработанный html-макет должен отвечать ряду требований:

– кроссбраузерность.

Готовая страница должна корректно отображаться в IE6+, Google Chrome 1+, Mozilla Firefox 2+, Opera 9.XX +, Safari 3+;

– валидность.

Это соблюдение стандартов W3C. Сайты, которые созданы при помощи валидной верстки, практически во всех браузерах выглядят одинаково. Проверка осуществляется на сайте http://validator.w3.org.

– семантическая верстка [5].

Верстка, где тэги используются в соответствии со структурой документа, то есть валидная верстка, которая соответствует рекомендациям W3C [9]. Например:

– заголовки оформляют с помощью тэгов от <h1> до <h6>;

– абзац <p>;

– список <ul> – ненумерованный, <ol> – нумерованный;

– <strong> – полужирным, <em> – курсивом;

– верстка блочная;

– в таблицах размещаем только табличные данные;

– и др.

Различают следующие виды вёрстки:

а) Фиксированная верстка.

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

Учитывая большой разброс разрешений экранов в настоящее время – от 1024 до 2560 пикселей по горизонтали – при использовании фиксированных макетов возникает одна из проблем:

– на маленьких экранах сайт не помещается и появляется горизонтальная полоса прокрутки, что делает просмотр страницы очень неудобным;

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

б) «Резиновая» верстка.

Этот вид верстки основывается на том, что в качестве одной из единиц измерения выступают проценты. Общая рабочая ширина окна браузера – 100%, и колонки макета в сумме не должны ее превышать, поэтому для удобства, как правило, везде применяют процентную запись. При изменении размеров окна происходит переформатирование данных страницы, чтобы они вписались в новую ширину.

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

При этом размера всего макета обычно имеет размер 100 % х 100 % (т. е. всѐ пространство клиентской части окна браузера), что приводит к необходимости вычисления браузером выражений вида 100 % – 250 пикселей.

Стандартных способов сделать это с помощью HTML и CSS до версий 5 и 3 соответственно не существует, что вынуждает разработчиков использовать различные трюки в виде картинок-«распорок», отрицательных отступов и т. д.

«Резиновый» макет обладает следующими признаками:

– ширина страницы равна ширине окна (или составляет определенный процент от неё) – сайт тянется по горизонтали;

– если ширина окна меньше определенной минимальной, то ширина сайта фиксируется и появляется горизонтальная полоса прокрутки;

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

Если высота страницы больше высоты окна, то «подвал» уходит за пределы окна и появляется вертикальная полоса прокрутки;

в) Адаптивная верстка.

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

Реализовать такой подход можно программно (например, с помощью Javascript) или с помощью медиа-запросов @mediaCSS3 [2-6].

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

Пока, наконец, не происходит один большой переход к одной колонке для мобильных устройств. Как только страница становится слишком узкой для начального состояния, широкоэкранная разметка адаптируется и превращается в вертикальную. Это достигается за счет перемещения двух небольших блоков справа под большой блок. Затем эта разметка принимает стандартный «мобильный» вид, в котором каждая часть содержимого укладывается ниже предыдущей [2].

г) Табличная вёрстка.

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

Преимущества таблиц:

– Создание колонок. Одноколонная модульная сетка применяется на сайтах достаточно редко. Действительно, основной текст и ссылки по сайту удобнее располагать в разных колонках. Таблицы хорошо выступают в качестве многоколонной модульной сетки, каждая ячейка представляет собой отдельную колонку. Это позволяет легко создавать двух- и трехколонный макет документа. При изменении размера окна браузера, колонки сохраняют свой исходный вид, а не переносятся как слои друг под друга. К тому же высота разных колонок при использовании таблиц остается одинаковой, независимо от объема их содержимого [9];

– «Резиновый» макет. Таблицы удачно подходят для «резинового» макета, ширина которого привязана к ширине окна браузера. Благодаря тому, что размер таблицы можно задавать в процентах, она занимает все отведенное ей свободное пространство. Также можно регулировать и высоту содержимого. Например, если текста немного, то «подвал» страницы может висеть в ее середине. Параметрами таблицы можно отрегулировать это так, что при небольшом тексте «подвал» плотно прилегает к нижнему краю окна браузера, независимо от размеров окна;

– «Склейка» изображений. Рисунки часто разрезают на отдельные фрагменты, а затем собирают их вновь в одно целое, выкидывая одни фрагменты или заменяя их другими изображениями. Это требуется для различных дизайнерских изысков вроде создания эффекта перекатывания, анимации или уменьшения объема файлов. Таблицы позволяют легко обеспечить «склейку» нескольких рисунков в одно изображение [2];

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

– Выравнивание элементов. Содержимое ячеек можно одновременно выравнивать по горизонтали и по вертикали, за счет чего расширяются возможности по размещению элементов относительно друг друга и на странице в целом [7];

– Особенности браузеров. Браузеры достаточно вольно толкуют некоторые параметры CSS, поэтому создание универсального кода с применением слоев может стать настоящей головной болью для разработчиков. В этом смысле таблицы отображаются в разных браузерах практически одинаково, поэтому создание веб-страниц упрощается [8].

Недостатки таблиц:

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

– Громоздкий код. Таблицы содержат сложную иерархическую структуру вложенных тегов, которая увеличивает объем кода, и повышает сложность изменения отдельных параметров [9];

– Плохая индексация поисковиками. За счет того, что текст располагается в отдельных ячейках таблицы, в коде он может находиться достаточно далеко друг от друга. Такая раздробленность информации, а также значительная вложенность тегов затрудняет правильное индексирование страницы поисковыми системами;

– Нет разделения содержимого и оформления. В идеале HTML-код должен содержать только теги с указанием стилевого класса или идентификатора. А все оформление вроде цвета текста и положения элемента выносится в CSS и модифицируется отдельно. Такое разделение позволяет независимо править код страницы и менять вид отдельных ее элементов [7];

– Несоответствие стандартам. В последнее время стандарты HTML и CSS прочно засели в умах веб-разработчиков. А в спецификации говорится, что таблицы в первую и последнюю очередь нужны для размещения табличных данных. Все остальные способы использования таблиц осуждаются.

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

Таблицы хорошо подходят в следующих обстоятельствах [2]:

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

– Макет должен занимать всю высоту окна браузера, независимо от объема информации. С помощью таблицы можно добиться эффекта, что нижняя часть страницы («подвал») выравнивается по нижнему краю окна браузера. Это имеет смысл в том случае, если объема данных не хватает для увеличения высоты документа. В противном случае часть страницы будет «висеть» в середине окна. Естественно, для документа достаточного объема его отображение происходит как обычно [2];

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

– Начинающим изучать веб-дизайн. Несмотря на то, что в профессиональной среде табличная верстка считается устаревшей, начинать изучение веб-дизайна проще именно с нее – логичность поведения и линейная зависимость сложности макета от количества ячеек делают табличную верстку оптимальной для новичков [9].

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

2. Практические аспекты применения языков гипертекстовой разметки на примере создания электронного учебного пособия

2.1. Понятие и общая характеристика электронного учебного пособия

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

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

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

Необходимо чётко определить отличительные признаки электронного учебного пособия от его печатного аналога. Они состоят в следующем:

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

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

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

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

– использование гипертекстовых ссылок, позволяющих мгновенно отыскать нужное понятие, в считанные доли секунды «перелистать» многие страницы изучаемого текста;

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

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

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

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

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

– контрольная часть содержит набор тестов, контрольных вопросов по теоретической части;

– справочная часть, которая может включать в себя: необходимую информацию в графической, табличной или любой другой форме [15].

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

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

Назначение электронного учебного пособия – самостоятельного овладения знаниями и умениями работы с языком HTML5, электронное учебное пособие рассчитано на 12 академических часов.

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

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

Кроме того, электронное учебное пособие позволит развить такие качества как: самообучение, самоконтроль, внимание, творческое мышление и саморазвитие.

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

Программное обеспечение:

– ОС Microsoft Windows XP/Vista/7/8/10;

– Visual Studio Code;

– Internet Explorer 11 и выше или Google Chrome 45 и выше.

2.2. Интерфейс электронного учебного пособия

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

Электронное учебное пособие выполняется в оттенках синего цвета.

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

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

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

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

В центре располагается основной блок, в котором расположен контент электронного учебного пособия, занимающий основную часть экрана. Рабочая область электронного учебного пособия составляет 98% экрана.

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

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

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

Она представляет собой страницу приветствия. На главной странице размещено краткое описание электронного учебного пособия и языка HTML5, которому оно посвящено.

Также рекомендуется посетить раздел «Инструкции», прежде чем приступить к работе с пособием.

После перехода в раздел «Инструкции» открывается страница, которая содержит указания, инструкции и рекомендации по работе с электронным учебным пособием.

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

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

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

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

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

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

2.3. Структура электронного учебного пособия

В состав электронного учебного пособия входят следующие элементы:

– инструкции, представляющие рекомендации и указания по использованию электронного учебного пособия;

– теоретический блок, состоящий из 6 тем;

– практический блок, состоящий из 6 лабораторных работ;

– блок контроля, контрольного теста;

– справочник HTML5;

– раздел с литературными и интернет-источниками, где представлены ссылки, полезные для работы с HTML5.

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

В разделе «Для обучаемого» содержатся цель электронного учебного пособия, рекомендации для подготовки к работе и описание технологии обучения.

В состав теоретического блока входят следующие элементы:

– номер темы;

– название темы.

Номер темы и её название находятся на странице темы.

Тема 1. «HTML5. Основная структура».

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

Данная тема разбита на следующие разделы:

– «HTML5. Определения, краткая история»;

– «Категории моделей сайта»;

– «Новая идеология HTML5»;

– «Что включено в HTML5»;

– «Основная структура страницы на HTML5».

Тема 2. «Текст. Формы».

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

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

– «Текст»;

– «Работа со структурами HTML5»;

– «Различие между Article и Section»;

– «Aria-структура документа и роли»;

– «Элементы Aside, Details, Figure, Mark, Address, Di, Hr, Ol, Small, Strong, B, U»;

– «Новые типы ввода данных»;

– «Типы ввода данных Email, Url, Date, Time, Month, Week, Number, Range, Search, Tel, Color»;

– «Новые атрибуты List, Datalist, Autofocus, Placeholder, Required, Multiple, Pattern, Autocomplete, Min, Max, Step, Form, Progress, Meter».

Тема 3. «Видео и аудио».

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

Данная тема разбита на следующие разделы:

– «Тег аудио»;

– «Использование атрибута source»;

– «Атрибуты элемента audio: Controls, Autoplay, Loop»;

– «Тег видео»;

– «Атрибуты элемента video: Autoplay, Controls, Poster, Muted, Height, Width, Loop, Preload, Src, Source»;

– «Видеофайлы разных форматов и карманные устройства».

Тема 4. «Холст».

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

Данная тема разбита на следующие разделы:

– «Тег холст»;

– «Самое главное о Холсте»;

– «Рисование с градиентами и узорами»;

– «Рисование путей»;

– «Использование трансформеров: замаскированные пиксели»;

– «Захват изображений»;

– «Работа с отдельными пикселами»;

– «Запись в файл»;

– «Визуализация текста».

Тема 5. «Хранение данных».

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

Данная тема разбита на следующие разделы:

– «Хранение данных»;

– «Варианты хранения»;

– «Веб-хранилище – хранилище «ключ/значение» в браузере»;

– «WebSQL – реляционная база данных на веб-странице»;

– «IndexedDB – NoSQL в вебе».

Тема 6. «Встроенные API».

Шестая тема позволяет обучаемому сформировать знания о встроенных API в HTML5. В ходе изучения данной темы обучаемый знакомится с API-геолокацией, API-перетаскиванием.

Данная тема разбита на следующие разделы:

– «API геолокации»;

– «Методы получения геолокации положения пользователя: getCurrentPosition, watchPosition»;

– «Обработчик успешного исполнения»;

– «Вычисление скорости»;

– «Обработчик ошибок»;

– «Настройка геолокации»;

– «API перетаскивания».

В состав практического блока входят 6 лабораторных работ, которые содержат:

– номер лабораторной работы;

– тема лабораторной работы;

– цели лабораторной работы;

– предварительный просмотр итогового результата;

– задания лабораторной работы;

– технология выполнения;

– контрольные вопросы.

Номер лабораторной работы, его тема, цель, задачи и предварительный просмотр находятся на первой странице лабораторной работы.

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

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

Справочник Visual Studio Code содержит сведения о программе Visual Studio Code. А также пошаговое руководство по установке Visual Studio Code со скриншотами и описанием.

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

В электронном учебном пособии используется два вида контроля:

– промежуточный;

– итоговый.

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

Для итогового контроля предлагается пройти итоговый тест.

Итоговый контроль проходит в тестовой форме и содержит в себе 27 вопросов.

Типы заданий итогового контроля:

– задания с одним правильным ответом;

– задания с несколькими правильными ответами;

– задания на установления правильной последовательности;

– задания на дополнение.

ЗАКЛЮЧЕНИЕ

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

С появлением пятой версии HTML web-программистам были предложены новые возможности, которые в ранней версии HTML могли быть реализованы только с помощью сторонних языков программирования (Java Script, Adobe Flash).

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

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

Закончив изучение электронного учебного пособия обучаемый освоит основные приемы работы с HTML5.

Таким образом, поставленные задачи можно считать полностью выполненными, а цель – достигнутой.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Бордовский Г.А. Использование электронных образовательных ресурсов нового поколения в учебном процессе / Г.А.Бордовский, И.Б. Готская, С.П. Ильина, В.И. Снегурова. – Москва: РГПУ, 2007. – 484 с.
2. Гагарин А.Г. Применение языка гипертекстовой разметки для разработки интернет-ресурсов: учебное пособие по дисциплине «Информатика», раздел «Телекоммуникации» / А.Г. Гагарин, А.Ф. Рогачев, Т.В. Плещенко. – Волгоград: ФГБОУ ВПО Волгоградский ГАУ, 2013. – 144 с.
3. Дакетт Джон Основы веб-программирования с использованием HTML, XHTML и CSS / Джон Дакетт. – М.: Эксмо, 2015. – 768 c.
4. Конева А.С. Применение возможностей HTML5 для разработки образовательного медиаконтента в сети интернет // Электронное обучение в непрерывном образовании. – 2016. – № 1. – С. 259-265.
5. Муссиано Ч. HTML и XHTML. Подробное руководство / Ч. Муссиано, Б. Кеннеди – М.: Символ-Плюс, 2011. – 752 с.
6. Титтел Э. HTML, XHTML и CSS для чайников, 7-е издание / Э. Титтел, Дж. Ноубл – М.: Диалектика, 2011. – 400 с.
7. Титтел Эд HTML, XHTML и CSS для чайников / Эд Титтел, Джефф Ноубл. – М.: Диалектика, 2016. – 400 c.
8. Фримен, Э Эрик, Фримен Элизабет. Изучаем HTML, XHTML и CSS / Эрик Фримен, Элизабет Фримен – 1-е изд. – М.: «Питер», 2010. – 656 с.
9. Фримен, Элизабет Изучаем HTML, XHTML и CSS / Элизабет Фримен, Эрик Фримен. – М.: Питер, 2016. – 720 c.
10. История HTML5. Энциклопедия HTML5. URL: http://html-5.ru/istoriya-html5. (Дата обращения: 02.09.2018).
11. Официальный сайт Уральского федерального университета имени первого Президента России Б.Н. Ельцина. Документация по Веб-программированию 0.0.0. // Практика. HTML. Основы гипертекстовой разметки. URL: https://iit-web-lectures.readthedocs.io/ru/latest/practice/html.html. (Дата обращение: 03.09.2018).
12. Примеры HTML5 // Учебник HTML5. URL: https://html5.ru/com/html5/primery-html. (Дата обращения: 01.09.2018).
13. Синий цвет в психологии. Значение синего цвета в психологии. Психология восприятия цвета. Психология цвета. Цветотерапия. URL: http://ippt.ru/biblioteka/stati_po_psihologii/psihologiya_tvorchestva_artterapiya/sinij_cvet_v_psihologii/ (дата обращения: 02.09.2018).
14. Создание электронного учебного пособия по курсу «Элементы высшей математики» для специальности 230111 «Компьютерные сети» // Обратная сторона луны URL: http://wecherkina.ru/создание-электронного-пособия.html (дата обращения:03.09.2018).
15. Статья «Электронные учебные пособия как средство активации учебной деятельности обучающихся URL: https://metod-kopilka.ru/page-article-30.html(дата обращения: 03.09.2018).
16. Учебник HTML5 URL: http://html5ru.com. (Дата обращения: 03.09.2018).
17. CANVAS шаг за шагом: Основы // Хабрахабр. URL: http://habrahabr.ru/post/111308/. (Дата обращения: 02.09.2018).