Файл: "Основы программирования на языке HTML".pdf

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

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

Появление и развитие Всемирной паутины вызвали революцию в продвижении информационных технологиях и взрывное развитие Интернета.

Какими бы сложными не были современные веб-сайты, в их основе лежит HTML. Эта абривиатура происходит от английского HyperText Markup Language – «язык гипертекстовой разметки». Таким образом, HTML является стандартизированным языком разметки документов во Всемирной паутине. Разметку HTML получают браузеры и интерпретирует ее таким образом, что пользователь на экране компьютера или мобильного телефона видит отформатированный текст, рисунки, элементы меню и навигации и другие элементы.

1 Основные этапы развития HTML

Еще в конце 1960-х гг. группа исследователей из компании IBM под руководством Чарльза Гольдфарба разрабатывала универсальную систему обмена юридическими документами. Основная задача, стоявшая перед учеными – обеспечить максимальную переносимость данной системы, независимость ее от особенностей конкретных аппаратно-программных платформ, устройств вывода информации, как существовавших, так и тех, которые могли бы появиться в будущем[3].

Исследователи приняли решение разграничить данные и их оформление. Это было достигнуто внедрением в текст документов специальных управляющих конструкций, элементов разметки, которые позволяют логически структурировать содержание, определить в тексте самостоятельные смысловые единицы. Разработчики данной системы посчитали, что документ с разметкой может быть обработан в случае, если он соответствует единому стандарту. Поэтому помимо непосредственно разметки документ должен был содержать механизм определения типов. Таким образом, разделение содержания, представления и проверки на допустимость обеспечивали чрезвычайную гибкость, так как и таблицы стилей, и проверки на допустимость могут быть легко модифицированы, в то время как структурная разметка документа может оставаться неизменной. Язык, соответствующий этой концепции и получивший название GML (Generalized Markup Language), был создан в 1969 г.

В 1986 г. ISO приняла язык GML в качестве международного стандарта[3]. В 1996 году стандартом ISO стал язык DSSSL (Document Style Semantics and Specification Language, язык для определения семантики и спецификации стиля документов), определяющий правила, в соответствии с которыми создаются таблицы стилей, использующиеся для обработки SGML-документов.

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

В конце 80-х годов сотрудников CERN (Европейский Центр Ядерных Исследований) Тим Бернерс-Ли занялся проблемой хранения и отображения данных, полученных коллегами. Он решал проблему создания универсальной системы, которая не зависела бы от используемой компьютерной платформы и была бы достаточно простой. В основу разрабатываемого языка Тим Бернерс-Ли положил язык SGML и приёмы работы с гипертекстом, с чем и связано название созданного им языка - HTML (HyperText Markup Language - «язык гипертекстовой разметки»). Таким образом, язык HTML является одним из подмножеств метаязыка SGML[3].

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

В 1994 Бернерсом-Ли был создан консорциум W3C[10], который занялся стандартизацией веб-технологий, в том числе и языка HTML. Однако, требования W3C имели лишь статус рекомендаций.

Первой сертифицированной консорциум W3C версией HTML стал HTML версии 2.0 в 1995 году. Стремительно развивающиеся технологии и переход интернета к преимущественно коммерческому использованию требовали постоянного изменения в структуре HTML. Поэтому уже в марте 1995 года Консорциумом Всемирной паутины (W3C) было предложена версия 3.0. Она обеспечивала такие новые возможности, как создание таблиц, «обтекание» изображений текстом и отображение сложных математических формул, поддержка gif формата. Следующей версией стандарта HTML стала 3.2, в которой были опущены некоторые новые возможности версии 3.0, но добавлены нестандартные элементы, поддерживаемые браузерами Netscape Navigator и Mosaic.

В результате конкурентной борьбы браузеры Netscape Navigator и Microsoft Internet Explorer предлагали разработчикам множество индивидуальных элементов HTML, не соответствующих стандарту W3C. В результате разработка сайтов стала чрезвычайно трудозатратным делом, так как было необходимо предусмотреть внешний вид сайта в каждом из браузеров. Решением этой проблемы стало утверждение консорциумом W3C спецификации CSS (Cascading Style Sheets, каскадные листы стилей) в 1996 году. Каскадные таблицы стилей были отделены от содержания веб-страниц и потому не вредили внутренней логике. CSS, в отличие от возможностей HTML, явно предписывают агенту пользователя, то есть браузеру, каким образом должны интерпретироваться те или иные свойства. Таким образом, принцип разделения содержания и представления, заложенный разработчиками SGML, был возрожден. Спецификация CSS2, которая была утверждена в 1998 г., утвердила блочную модель верстки сайта, позволяющая представить любую веб-страницу как набор прямоугольных областей с различными свойствами и избавиться от трудоемкой верстки шаблонов страниц с помощью таблиц[5].

В 1997 г. официальной рекомендацией W3C стала новая версия HTML 4.0. В этой версии произошла некоторая очистка языка, некоторые теги были отмечены как устаревшие и не рекомендованные к использованию, вместо них рекомендовалось использовать CSS. Несмотря на некоторую систематизацию, HTML 4 разделился, по сути, на три стандарта. В рамках HTML 4 определялись 3 типа документов: Strict (строгий, предписывающий четкое соблюдение идеологии структурной, логической разметки и подразумевающий отказ от большинства возможностей визуального представления данных), Transitional (переходный, намного более либеральный, оставляющий право пользоваться тегами HTML 3.2) и Frameset (предназначенный для страниц, использующих фреймы)[6].

В 1998 году Консорциум Всемирной паутины начал работу над новым языком разметки, основанный на HTML 4, но соответствующий синтаксису XML, вместо SGML. Первая версия XHTML 1.0 была одобрена в качестве рекомендации консорциума всемирной паутины 26 января 2000 года. А уже августе 2002 года была опубликована вторая редакция спецификации – XHTML 1.1. Параллельно велась разработка XHTML 2.0, призванного стать новым уровнем представления документов во Всемирной сети. Разработчики провозгласили нарушение обратной совместимости и собирались ввести абсолютно новые технологии разработки веб-приложений. Однако, XHTML не получил одобрения разработчиков браузеров из-за строгих правил валидации кода. В итоге, в противовес консорциума W3C появилась организация WHAT Working Group, которую основали производители браузеров Apple, Mozilla Foundation и Opera Software. WHATWG (рабочая группа по разработке гипертекстовых приложений для веб Web Hypertext Application Technology Working Group) провозгласило себя свободным, неофициальным и открытым обществом производителей браузеров и заинтересованных сторон. Эта организация выступала за существующий подход, нестрогие правил отображения разметки, щадящий подход к обработке ошибок. В рамках WHATWG было разработано несколько спецификаций, объединенных в проект Web Applications 1.0. Эта спецификация была выпущена в сентябре 2006 года и включал такие новые расширения html, как возможность рисования (canvas), реакцию на события сервера, встроенную поддержку аудио и видеоконтента и другое.

Уже в 2006 году стало очевидно, что подход WHATWG более правилен и жизнеспособен. Но только 2 июля 2009 года W3C объявил о том, что рабочая группа XHTML 2 прекращает работу. 17 декабря 2012 года W3C объявил о завершении работы над стандартом HTML5, предложенный группой WHATWG, и в 2014 году утвердил его[10].

Следует отметить, что расшифровка аббревиатуры HTML (Hyper Text Makeup Linguage) абсолютно не соответствует содержанию HTML5. Помимо классических тегов, стандарт HTML5 включает набор клиентских технологий, таких как[1]:

ApplicationCache;
Canvas;
Drag ‘n Drop API;
History API;
HTML5 Audio;
HTML5 Video;
IndexedDB;
Input Attributes;
localStorage;
postMessage;
Web Sockets;
Web SQL Database;
Web RTC;
Web Workers.

2 Основы верстки веб-страниц

2.1 Структура веб-страницы

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

<!DOCTYPE html>

<html>

<head>

<title>Страница</title>

</head>

<body>

<p>Абзац</p>

</body>

</html>

Элемент <!DOCTYPE> предназначен для указания типа текущего документа, то есть его DTD (document type definition, описание типа документа). Этот тег необходимо, чтобы браузер правильно понимал использующуюся версию HTML и верно интерпретировать содержимое.

Тег <html> является контейнером, заключающем все содержимое веб-страницы, включая теги <head> и <body>. Данный тег не является обязательным, но хороший стиль требует его использование. Как правило, <html> идет в документе вторым, после определения типа документа, а закрывающий тег </html> должен быть последним.

Тег <head> определяет секцию элементов, которые описывают веб-страницу. Также внутри этого контейнера находятся метатеги, которые используются браузером и поисковыми системами. Например, роботы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Содержимое тега <head> не отображается на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы. Внутри контейнера <head> допускается размещать следующие элементы: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>[9].

Контейнер <body> определяет содержимое веб-страницы, отображаемого в окне браузера. Это может быть текст, изображения, скрипты, списки, таблицы и многое другое.

2.2 Основные теги HTML

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

Основными тегами логической разметки текста остались, теги заголовков различного уровня<h1>,...,<h6> и контейнер абзаца <p>[9]. В следующем листинге приведен пример использования этих тегов, а на рисунке 1 – результат интерпретации этого кода браузером.

<!DOCTYPE html>

<html>

<head>

<title>Страница</title>

</head>

<body>

<p>Это абзац</p>

<h1>Это заголовок первого уровня</h1>

<h2>Это заголовок второго уровня</h2>

<h3>Это заголовок третьего уровня</h3>

<h4>Это заголовок четвертого уровня</h4>

<h5>Это заголовок пятого уровня</h5>

<h6>Это заголовок шестого уровня</h6>

</body>

</html>

Рисунок 1 – Теги логической разметки текста

Тег <a> является одним из важнейших элементов HTML и предназначен для создания ссылок, то есть служит основой гипертекста[11]. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Для создания ссылки необходимо указать адрес документа, на который следует сделать ссылку. Значением href является адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который должен произойти переход. Адрес ссылки может быть абсолютным или относительным[12].

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src[11].

В следующем листинге приведен пример использования тегов <a> и <img>, а на рисунке 2 – результат интерпретации этого кода браузером.

<!DOCTYPE html>

<html>

<head>

<title>Ссылки и картинки</title>

</head>

<body>

<p><a href="http://mnemonikon.ru/members/nstz_13.htm">Изучаем HTML</a></p>

</body>

</html>

Рисунок 2 – Теги вставки ссылок и рисунков

Списком при разметки текста обычно называют взаимосвязанный набор элементов, которые начинаются с некоторого маркера. Списки предоставляют возможность упорядочить и систематизировать данные, представить их в наглядном виде. В HTML существуют следующие теги для представления списков[9]: