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

Введение

С повсеместным внедрением средств вычислительной техники, коммуникационных сетей и информационных ресурсов возникли предпосылки к созданию крупных информационных систем. Данные системы должны были поддерживать не только возрастающий объем информации, но и растущее количество пользователей. Для решения этих задач был разработан язык разметки HTML ^[1](далее - HTML), ознаменовавший своим появлением начало целой эпохи WWW^[2]. Всемирная сеть сильно упростила доступ к обмену информацией сначала ученому сообществу, а затем и каждому пользователю, имеющему доступ к сети интернет. Документы, написанные с использованием языка HTML, можно легко просматривать и редактировать на компьютерах с различным программным и аппаратным обеспечением. Сегодня к устройствам, способным работать с этим языком, можно отнести практически любое устройство, имеющее дисплей.

Язык разметки HTML широко используется в разработке сайтов и для создания пользовательской документации. Современные Web приложения создаются всё также с использованием языка разметки, но уже включают в себя дополнительные элементы, позволяющие более широко использовать возможности всемирной сети. Также HTML позволяет осуществлять загрузку документов посредством активизации гипертекстовой ссылки, добавлять в документы звуковые и видео фрагменты, приложения и элементы мультимедиа, разрабатывать формы для осуществления взаимодействия с удаленными службами, такими как поисковые роботы, Интернет-магазины и прочее [3].

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

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

Глава 1. История появления HTML

GML (General Markup Language)

SGML (Standart General Markup Language

В конце 1980-х годов перед учеными Европейской лаборатории элементарных частиц (CERN^[3]) возникла необходимость обмениваться с использованием новой на тот момент сети интернет. Необходимо было разработать и внедрить способ публикации многостраничных документов с последующей возможностью организации простого доступа к ним. Также требовалось чтобы любой человек, не являющийся специалистом в области верстки смог пользоваться новой технологией. Решение данной проблемы было найдено сотрудником CERN Тимом Бернсом-Ли в 1989 году. В ходе работы над внутренней системой обмена документов, Бернсом-Ли предложил проект глобального обмена гипертекстовой информацией, известный сегодня как WWW. Проект был успешно реализован и с этого момента начал активно развиваться. Несомненным преимуществом нового языка была возможность добавления в документы мультимедиа файлов.

---

Первым общедоступным описанием языка HTML стал документ «Теги HTML» созданный и опубликованный в сеть WWW самим Тимом Бернсом-Ли в 1991 году [2]. В нем описывались используемые в языке HTML дескрипторы – структурные и семантические элементы, помогающие сделать код документа более осмысленным и наглядным. Ныне эти элементы известны как «тэги».

HTML является наиболее распространенным из языков разметки гипертекстовых документов. Тем не менее он основан на стандарте SGML (StandardGeneralizedMarkupLanguage) – стандартный обобщенный язык разметки, который в свою очередь был разработан в 1974 году Чарльзом Голдфарбом. Стандарт содержал в себе основные виды разметки текста и не удовлетворял растущим требованиям к документации. Например, использование мультимедиа и таблиц, без которых трудно себе представить современные электронные документы. Но в 1989 году началась история HTML, язык которого был призван исправить эту ситуацию.

HTML 1.0 – официально первая версия так и не была стандартизирована. Консорциум W3C появился только к 1994 году и занимался разработкой единой стандартизации не только для языка HTML, но и для целого ряда стандартов для всемирной сети. Факт в том, что с развитием сети интернет вплоть до 1995 года не было единого документа, описывающего язык HTML. По этой причине существовало несколько разновидностей языка, что в свою очередь приводило к сложностям. Каждый новый интернет браузер использовал свой собственный вариант исполнения HTML. С развитием сети интернет появлялись страницы и документы, которые отлично воспроизводились в одном браузере, но совсем не отображающиеся в другом. Конец этим проблемам должен был прийти в 1995 году вместе c выпуском спецификаций к версии 2.0, которая была призвана стандартизировать язык для всех. Она же и стала официальной первой версией стандарта HTML.

HTML 2.0 - 3.2 - принято считать, что в между этими версиями сообщество искало пути к стандартизации языка. На протяжении 4-х лет вёлся поиск основных используемых функций. Добавлялись новые функции, такие как создание таблиц, вставка картинок в «обтекаемый» текст, отображение сложных математических формул, поддержка формата «GIF^[4]». Но в результате «браузерных воин» между гигантами Netscape и Microsoft ситуация усугубилась. Разница между реализациями HTML в браузерах по-прежнему была высокой. Разработчики браузера Netscape все время стремились расширить функционал языка, что приводило к еще большей разнице в реализации страниц документов в сети интернет. Консорциум W3C^[5] полностью потерял контроль над HTML. Планируемая к выходу спецификация 3.0 так и не была доведена до финальной стадии и окончательно легла на полку. Но тем не менее в 1996 году большая доля рынка браузеров была на стороне Netscape, что позволило им выпустить стандарт для версии 3.2. В этом стандарте было прописано большинство расширений языка для ведущего браузера Netscape.

---

HTML 4.0 – 4.1 – данные версии стали результатом объединения всех выпущенных до этого стандартов воедино. Консорциум W3C смог снова вернуть себе ведущую роль в формировании стандарта HTML. Версия 4.0 была выпущена в конце 1997 года. В ней ыли исправлены недочеты и недоработки предыдущих версий. Удалены устаревшие (более не актуальные) на тот момент элементы. Были введены таблицы стилей CSS^[6]. Теперь каждая страничка могла отображаться во многих браузерах практически идентично. Казалось, что вот-вот выйдет единый для всех браузеров стандарт. Но на практике язык HTML 4.0 оказался не таким удобным, как ожидалось. Технологии двигались вперед и требовали от языка большей гибкости, чем он мог предложить. Стандарт версии 4.01, вышедший в конце 1999 года, смог окончательно навести порядок в мире HTML. В нем были устранены многие ошибки и недоработки всех предыдущих вариантов. Также стандарт вобрал в себе лучшие наработки браузеров Netscape и Internet Explorer. Был прост и понятен, чем все его предыдущие реализации. И именно он оказался настолько удачным, что во многом используется и сейчас при написании сайтов. Появилась возможность подгружать на страницу дополнительные внешние модули. Это позволило выносить таблицы стилей CSS и дополнительные скрипты из самой HTML страницы. При этом упрощались как написание новых страниц, так и загрузка страниц по сети интернет в следствие уменьшения их информационного объема.

Версия HTML 4.01 стала самой популярно и востребованной. Многие теги были удалены или помечены как не рекомендуемые. Как правило, такие теги затрагивали особенности задания стилей для элементов HTML-документа. В связи с внедрением CSS и установлении прочной связи CSS и HTML многие из этих тегов оказались не нужны.

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

Для учета всех нюансов работы с мобильными устройствами была разработана версия XHTML Basic. Данная версия содержит как стандартный набор тегов, так и специальный набор тегов для работы с мобильными устройствами. Структура этой версии идентична используемой в HTML 4 версий. При этом XHTML соответствует синтаксису не менее популярного языка XML, что значительно расширило возможности его использования. К сожалению, на данный момент дальнейшая разработка XHTML остановилась на версии 2.0, представленной в 2009 году.

---

В настоящее время активно разрабатывается HTML версии 5 (с 2007 года по нынешний день). В декабре 2018 года была представлена последняя из используемых версий, HTML 5.3. многие новые возможности, использование которых реализовано в HTML 5 версии, будут рассмотрены в данной работе (например, элементы для работы с аудио и видео файлами).

Глава 2. Правила использования языка HTML

HTML-документ должен отвечать нескольким правилам:

1. HTML-документы – это структурные документы.
2. Названия элементов можно писать в любом регистре.
3. Названия атрибутов можно писать в любом регистре.
4. Значения атрибутов зависят от регистра, особенно адреса (особенность Unix-операционных систем состоит в различной трактовке символов в разных регистрах, поэтому файлы picture .gif и picture.GIF различны!).
5. Названия элементов не могут содержать пробелов.
6. Если значения атрибутов содержат пробелы, они должны стоять в кавычках.
7. Дополнительные пробелы, символы табуляции и возврата каретки игнорируются и сжимаются в один пробел.
8. Элементы могут быть вложены друг в друга. При этом должно соблюдаться правило вложенности. Внутри вложенного элемента помимо открывающего тега должен быть и закрывающий [6].

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

Помимо перечисленных правил рекомендуется применять синтаксические правила HTML. Их применение не обязательно, но стандартизировано, определяет общий порядок следования и допустимость вложенности тегов и элементов документа. Этот синтаксис содержится в определении типа документа (DTD, Document Type Definition) [5].

Блок определений всегда оформляется в фигурных скобках {}. В остальных случаях используйте круглые скобки.

Например, обозначение абзаца рекомендуется оформлять следующим образом (согласно синтаксическим правилам):

<p> Текст абзаца. </p>

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

Рекомендуемое оформление тега MENU (согласно синтаксическим правилам):

<menu>

<li> пункт меню </li>

<li> пункт меню </li>

</menu>

Обратите внимание, что в данном примере открывающий и закрывающий тег находятся на разных строках, но на одном визуальном уровне, а открывающий и закрывающий тег LI для пунктов меню находятся в одной строке, но на другом визуальном уровне относительно тега MENU. Такое расположение рекомендовано для простоты прочтения HTML документа, визуально пункты меню и расположение самого тега MENU будет найдено в HTML-документе пользователем быстрее, чем написанное в одну строку.

---

Для сравнение приведем недопустимы пример использования тегов и атрибутов:

p {background-color:green}

@import URL (“file.css”)

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

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

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

Глава 3. Структура HTML-документа

HTML-документ представляется в виде последовательности элементов. Условно раздели элементы документа на обязательные для любого документа HTML и дополнительные. К обязательным элементам (далее - тегам) относятся:

1. Связка <html> - </html>

Данная связка открывает и закрывает любой документ HTML.

1. Связка <head> - </head>

Данная связка указывает на заголовок HTML документа.

1. Связка <body> - </body>

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

В общем виде тег состоит из трех частей:

1. Начальный (открывающий) тег.
2. Содержимое.
3. Конечный (закрывающий) тег [2].

Таким образом, минимальная структура HTML документа будет выглядеть следующим образом:

<html>

<head>

<title> Заголовок страницы </title>

</head>

<body>

Текст страницы

</body>

</html>

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

Дополнительные теги будут рассмотрены ниже (наиболее часто используемые). Теги могут иметь дополнительные атрибуты.

---