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

ВВЕДЕНИЕ

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

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

Во всемирной паутине долгое время использовались стандарты 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].