Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17345 / 1605 | Оценка: 3.91 / 4.09 | Длительность: 12:32:00
Лекция 3:

Основы HTML. Особенности HTML5

< Лекция 2 || Лекция 3 || Лекция 4 >
Аннотация: Сущность гипертекста. Развитие стандартов HTML. Уровни HTML. Обзор HTML5.

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

Сущность гипертекста

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

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

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

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

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

Если обратиться к истории возникновения гипертекста, то общепринятой точкой отсчета является статья Ванневара Буша "As We May Think" опубликованная в 1945 году. В статье было представлено устройство машины Memex, хранящей на микрофильмах информацию (книги, корреспонденцию и т.п.). Для поиска необходимой информации предлагалось использование ассоциативных связей, что фактически является прообразом гипертекстовых систем.

После появления, разработанным Тимом Бернерсом - Ли протокола передачи данных HTTP, система адресации URL и языка HTML, понятие гипертекста стало неразрывно ассоциироваться с информационными технологиями в общем и глобальной паутиной – в частности.

Развитие стандартов HTML

Определение HTML найти нетрудно, как правило, оно выглядит следующим образом: это язык гипертекстовой разметки.

HTML, в своем первоначальном виде, был основан на языке SGML – Standart Generalized Markup Language (стандартный обобщенный язык разметки).

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

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

В 1969 году был создан язык, удовлетворяющий описанным выше правилам – GML (Generalized Markup Language). После того, как в 1989 году язык был принят международной организацией по стандартизации (ISO) в качестве международного стандарта, к названию языка добавилась начальная литера S.

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

Европейский институт физики элементарных частиц (CERN) в 1991 году приступил к разработке первого текстового браузера, поддерживающего гипертекстовую разметку, т.е. способного отображать графику и поддерживающего переходы по ссылкам. Сотрудником института, ведущим данную работу был Тим Бернерс-Ли. В процессе разработки появился язык HTML, во многом схожий с SGML, за исключением структур, позволяющих отображать текст особенным образом (отступы, выделение и т.п.).

Чтобы не повторять многочисленные источники, приведем лишь пару ключевых дат в дальнейшей истории развития HTML: в 1993 году был создан первый браузер с графическим интерфейсом; в 1994 году был основан консорциум W3C.

Если же кратко пробежаться по датам, то получим следующее:

22 декабря 1995 – принят стандарт HTML 2.

1996 – консорциумом W3C принята спецификация CSS1.

14 января 1996 – принят стандарт HTML 3.2.

18 декабря 1997 – принят стандарт HTML 4.0.

24 декабря 1999 – принят стандарт HTML 4.01.

1999 – принята спецификация CSS2.

26 января 2000 – принят стандарт XHTML 1.0.

16 февраля 2007 – принят стандарт XHTML 1.1.

Уровни html

В 1994 году HTML был разбит на уровни. Было выделено 4 уровня:

  • Уровень 0: включает в себя заголовки, ссылки, списки.
  • Уровень 1: добавляются рисунки и элементы выделения текста.
  • Уровень 2: добавляются формы, позволяющие пользователю вводить информацию.
  • Уровень 3: добавляются таблицы.

Обзор html 5

Мы не будем детально рассматривать HTML 5, поскольку просто не хочется повторять множество доступных Интернет – источников, укажем лишь основные моменты:

  1. HTML 5 – это, скорее, новая платформа для создания веб–приложений, нежели стандарт продолжающий традиции предшественников.
  2. HTML 5 регламентирует взаимодействие с JavaScript посредством объектной модели документа (мы еще вернемся к этому в рамках данного курса).
  3. HTML 5 поддерживает все элементы HTML 4.

Ключевые термины и определения

Гипертекст – текст, содержащий ссылки на другие фрагменты.

SGML ( Standard Generalized Markup Language — стандартный обобщённый язык разметки документов. Является наследником разработанного в 1969 году в IBM языка GML (Generalized Markup Language),

HTTP - HyperText Transfer Prоtocоl — "протокол передачи гипертекста") —протокол прикладного уровня передачи данных (изначально — в виде гипертекстовых документов).

HTML – гипертекстовый язык разметки, созданный Тимом Бернерсом-Ли.

Консорциум W3C (World Wide Web Consortium, W3C) — организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины, возглавляемая Тимом Джон Бернерс-Ли.

Краткие итоги

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

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

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

Список материалов для самостоятельного изучения

  1. http://www.lingvolab.chat.ru/library/hypertext.htm
  2. http://eakolesnikov.narod.ru/MemexVannevarBush.htm
  3. http://blogerator.ru/page/memex-pim-organizers-chast-1
  4. http://pyramidin.narod.ru/html401/sgmltut.html
  5. http://searchsoa.techtarget.com/definition/SGML
  6. http://zodios.net/htmlcss/istoriya-razvitiya-html.html
  7. http://webstro.org/content/view/121/41/
< Лекция 2 || Лекция 3 || Лекция 4 >
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

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

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Сергей Мороз
Сергей Мороз
Беларусь
Антон Войлоков
Антон Войлоков
Россия, Алтайский край