Постановка задачи. 
Инновации в Web-программировании

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

Интерфейс сайта должен обеспечивать пользователю возможность:

Легкого просмотра информации;

Удобного ввода данных с клавиатуры;

Возможность принимать участие в «жизни» сайта.

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

Так же должна быть построена функциональная модель сайта при помощи программы BPwin.

Все функции сайта должны работать при запуске на любом браузере.

ИСТОРИЯ ЯЗЫКА HTML

2.1 История создания языка HTML

HTML (Hyper Text Markup Language) — язык разметки гипертекста. История языков разметки начинается в 1960;х годах, когда сотрудники компании IBM взялись за решение задач переноса документов между различными платформами и операционными системами. Результатом их усилий стал язык GML (General Markup Language-общий язык разметки), который предназначался для использования на ЭВМ семейства IBM. Язык GML в дальнейшем был расширен, а в 80-х годах прошёл стандартизацию ISO (Международная организация стандартизации). Этот мощный и универсальный режим разметки, названный SGML (Standart General Markup Language), использовался военным ведомством США для оформления технической документации. Однако SGML широкого распространения не получил ввиду своей сложности и дороговизны реализации.

Следующий этап развития языков разметки связан с именами учёных-физиков, сотрудников CERN (Европейский Центр Ядерных Исследований) в Женеве. Так, в конце 80-х годов Тим Бернерс-Ли занялся проблемой хранения и отображения данных, полученных коллегами. Проблема состояла в том, что каждый специалист, приезжавший в Центр, применял собственные методы представления информации, и срочно требовалось создание универсальной системы, которая не зависела бы от используемой компьютерной платформы и в то же время была бы достаточно простой.

В основу разрабатываемого языка Тим Бернерс-Ли положил язык SGML и приёмы работы с гипертекстом, с чем и связано название созданного им языка — HTML. Новый язык использовал основные конструкции SGML для описания документов и гипертекстовых ссылок.

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

Разработка HTML привела в итоге к новой технологии распространения гипертекстовых документов в Internet. Однако для широкого распространения WWW, кроме языка HTML, потребовалась разработка протокола передачи гипертекста HTTP (HyperText Transfer Protocol — протокол передачи гипертекста), который позволил осуществлять обмен документами HTML. Именно этот протокол дал возможность приложению-клиенту находить и использовать ресурсы, хранящиеся на другом компьютере. Протокол HTTP занимается поиском и загрузкой нужного документа.

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

2.2 Версии языка HTML

Первая версия языка HTML, вышедшая в 1991 году, содержала всего 20 тегов, предназначенных только для редактирования текста. В 1993 году появился HTML+, и эта версия также осталась практически незамеченной. Начало широкому использованию гипертекста дала версия 2.0, которая появилась в июне 1994 года. Это был момент начала роста популярности WWW по всему миру. Элементы, включенные в версию 2, в большинстве своем используются и по сей день. В версии 3.0 HTML, которая появилась год спустя, была реализована возможность прорисовки математических символов (знаков интеграла, бесконечности, дроби, скобок и т. д.) при помощи элементов языка. Под эту версию разрабатывались и браузеры (Arena). Но этот проект оказался не востребованным и не получил дальнейшего распространения.

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

И наоборот, элементы APPLET и SCRIPT, необходимые для расширения HTML друга ми программными кодами, в версии 3.2 не сыграли той роли, которую были призваны сыграть. Это объяснялось тем, что браузеры различных версий по-разному интерпретировали программы на языках Java, JavaScript, Visual Basic (VBScript). В результате не удавалось получить достаточно надежно работающий код, и данные языки использовались любителями HTML в основном для экспериментов.

Официальная спецификация HTML 4 (Dynamic HTML) появилась в 1997 году. В этой версии практически на вводились новые элементы, а развитие гипертекста было направленно на скрипт-программирования. Это оказалось очень эффективным решение, но все еще существовал ряд проблем. Эти проблемы должна была решить версия HTML 4.01, которая содержит ряд существенных изменений. В дополнение к возможностям работы с текстом, мультимедиа и гипертекстом предыдущих версий HTML, HTML 4.01 поддерживает большее количество опций мультимедиа, языков скриптов, каскадных таблиц стилей, лучшие возможности печати и большую доступность документов для людей с ограниченными возможностями. HTML 4.01 также является большим шагом в направлении интернационализации документов с целью сделать Web действительно World Wide (всемирным). Изменения версии 4.01 затронули все 24 раздела языка HTML.

2.3 Разработка HTML5

Рабочая группа по разработке Гипертекстовых Прикладных Технологий в Веб (WHATWG) начала работу над новым стандартом HTML5 в 2004 году, когда World Wide Web Consortium (W3C) сосредоточился на будущих разработках XHTML 2.0, а HTML 4.01 не изменялся с 2000 года. В 2009 году W3C признал, что срок работы у рабочей группы XHTML 2.0 истек, и решил не возобновлять его. В настоящий момент W3C и WHATWG работают вместе над разработкой HTML5.

Основной целью HTML5 является улучшить язык, поддерживающий работу с новейшими мультимедийными приложениями, при этом сохраняется лёгкость чтения кода для человека и ясность исполнения для компьютеров и приспособлений (веб-браузеры, синтаксические анализаторы и т. д.). HTML5 включает в себя не только HTML 4, но и XHTML 1, а также DOM2HTML (особенно JavaScript). Следуя своим непосредственным предшественникам HTML 4.01 и XHTML 1.1, HTML5 отвечает всем требованиям, для которых HTML и XHTML в основном используются во всемирной паутине. HTML5 также считается панацеей будущего с введёнными различными спецификациями, вместе с тем введёнными продуктами программного обеспечения, такими как веб-браузеры, установленными для использования в общей практике, а также исправления множества синтаксических ошибок, возникающих в существующих веб-документах. HTML5 — также попытка определить единый язык разметки, который мог бы быть написан как в HTML, так и в XHTML и был бы синтаксически корректен. Он включает в себя детальные модели обработки, чтобы поддерживать больше взаимодействующих процессов; он расширяет, улучшает и рационализирует разметку, пригодную для документов, и вводит разметку и API для сложных веб-приложений.

В особенности HTML5 добавляет много новых синтаксических особенностей. Например, элементы, , и такие же как и в SVG. Эти особенности разработаны для того, чтобы сделать проще внедрение и управление графическими и мультимедийными объектами в вебе без необходимости обращаться к собственным плагинам и API. Другие новые элементы, такие как, , и разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя некоторые элементы и атрибуты были удалены. Некоторые элементы, например, и были изменены, переопределены или стандартизированы. API и DOM являются фундаментальными частями спецификации HTML5. HTML5 также определяет некоторые детали для обработки недопустимых документов, поэтому синтаксические ошибки будут рассматриваться одинаково всеми приспособленными браузерами и другими пользовательскими агентами.

2.4 Нововведения в HTML5

Рассмотрим подробнее нововведения в HTML5, о которых говорилось выше.

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

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

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

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

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

— этот тег предназначен для выделения раздела страницы.

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

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

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

— Содержит описание для тега. Тег должен быть первым или последним элементом в группе.

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

— тег предназначен для отображения списка пунктов меню. Аналогично тегам.

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

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

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

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

  — используется для группирования заголовков веб-страницы или раздела. Внутри располагаются теги заголовков от.

  до

  .

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

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

  Помимо других семантических тегов, таких как, , или, в спецификацию HTML5 было предложено внести элемент (Not Safe For Work-сомнительное содержание). Благодаря этому тегу, браузеры смогут настраиваться таким образом, чтобы не отображать содержимое этого тега. Это может быть полезно, например, для того, чтобы оградить детей от порнографии. Весь код внутри элемента вырезается из документа без сообщения пользователю, что чего-то не хватает. Хотя в теге video стоит атрибут autoplay — он никогда не будет загружен и не сможет навредить содержанию кэша пользователя.

  В HTML5 упрощено воспроизведение видео и звуков на сайте. Теперь это можно сделать с помощью тегов и через HTML5 player. На мой взгляд, это оно из важнейших нововведений в HTML5. Теперь нет необходимости долго описывать вставляемый объект, а всего лишь вставить тег или. Хотя создание тега сделало большой шаг к открытым технологиям, платформа Adobe Flash все равно играет критическую роль в распространении видео.

  В HTML5 удалили некоторые устаревшие теги —,. Это не значит, что они больше не будут работать в браузерах, но html validator будет указывать на ошибку.

  В HTML5 введены следующие новые технологии:

  Возможность рисовать на странице в реальном времени (элемент Canvas).

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

  Drag-and-drop прямо с рабочего стола в браузер.

  Работа с сокетами.

  Web forms 2.0.

  Были изменены следующие теги:

  — был упрощён, и теперь в начале документа необходимо написать всего лишь вместо длинного названия с указанием используемой версии языка HTML и вариантом его использования.

— В отличие от HTML 4.01, где тег мог служить как гиперссылкой, так и якорем (anchor), в HTML 5 этот тег используется только как гиперссылка. В HTML 5 тег потерял много атрибутов, таких как charset, coords, name, rev и shape. Добавлено два новых атрибута: media и type.

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