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

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

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

Язык разметки гипертекста HTML – стандартное средство представления информации в среде World Wide Web (WWW) в виде Web-страниц. Поскольку HTML является стандартизированным языком разметки, документы, написанные с его использованием, можно легко просматривать и редактировать на компьютерах с различным программным и аппаратным обеспечением.

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

Язык программирования HTML дает возможность создавать сложные вещи простыми способами. Первое, чему необходимо обучиться - это созданию простых Web-страниц с помощью HTML.

Объект исследования: язык программирования HTML.

Предмет исследования: изучение возможностей программирования на HTML.

Цель: рассмотреть особенности работы в языке программирования HTML.

Задачи исследования:

Изучить и проанализировать специальную литературу по теме исследования.
Рассмотреть основы языка HTML.
Выявить особенности работы с языком HTML.
Создание простой Web-страницы с использованием HTML.

Методы исследования: изучение литературы, анализ, синтез, классификация и обобщение, моделирование.

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

Тема 1. Язык HTML как средство создания гипертекстовых документов

История развития HTML

Началось все для HTML (а вместе с ним и для WWW) в конце 1980-х годов, когда у ученых из Европейской лаборатории элементарных частиц (CERN) возникла необходимость обмениваться множеством различных документов при помощи быстро развивающейся сети Интернет. Тогда необходимо было придумать способ публикации документов в сети таким образом, чтобы к любому нужному документу можно было легко получить доступ. К тому же нужно было, чтобы документы отображались на всех компьютерах одинаковым образом.

Решение поставленной задачи было найдено сотрудником CERN Бернерс-Ли. В 1989 году Тим Бернерс-Ли создал новый язык форматирования документов. В его основу был положен другой ранее созданный язык – SGML, который предусматривал установку связей между документами с помощью гиперссылок. Новый язык разметки был назван HTML (HyperText Markup Language). Этот же человек реализовал и первую программу для просмотра HTML-документов – браузер. ^[1]

1996 год знаменовался тем что вышла версия HTML 3.2 в которую были включены фреймы, которые стали весьма популярны у разработчиков Web-страниц. Практически все современные браузеры поддерживают версию HTML 3.2.^[2] В следующей версии HTML 4 (Dynamic HTML) они были включены на полном основании, эта версия вышла в 1997 году. Уже в этом году было очевидно что дальнейшее развитие гипертекста будет осуществляться за счет скриптов-программирования. Оказалось это наиболее эффективным, чем вводить новые элементы.

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

В 2004 году по инициативе небольшой группы специалистов, представлявших ряд крупных производителей браузеров и заинтересованных в поднятии веб-платформы на новый технологический уровень, было основано сообщество WHATWG (Web Hypertext Application Working Group). Благодаря усилиям его участников и появилась спецификация HTML5. ^[3]

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

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

попытку формально документировать все стандарты "де-факто", которые Web-браузеры использовали годами.^[4]

Язык HTML как средство реализации гипертекста и гипермедиа в сети Интернет наряду со стандартом адресации URL (Universal Resourse Locator, «универсальный адрес ресурса») и протоколом HTTP (Hyper Text Transfer Protocol) является одним из «трёх китов» WWW сделавших Интернет доступным даже для неподготовленных пользователей.

Базовые понятия HTML

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

HTML-документ – это обычный текстовый документ, созданный в любом текстовом редакторе, например в Блокноте, и оформленный в соответствии с правилами языка HTML. Для файлов, содержащих HTML-документы, используется расширение HTML или HTM (например, первая_страница.html или первая_страница.htm). Расширение HTM использовалось ранее для корректного отображения имен файлов в формате MS-DOS.^[5]

Элементы языка HTML

Элемент – это конструкция языка HTML, содержащая данные. HTML включает в себя различные типы элементов, которые позволяют задавать абзацы, гипертекстовые ссылки, списки, таблицы, изображения и т. д.^[6]

Конструкция <P>Привет!</P> представляет собой элемент. Обычно элемент можно разделить на три части. Первая часть – <P> – называется открывающим тегом (англ. tag). Далее идет содержание элемента, которое в данном случае состоит из слова «Привет!». И наконец, </P> – является закрывающим тегом. Как видно, название элемента (P) присутствует и в открывающем, и в закрывающем теге.

Регистр символов в названии элемента не имеет значения. Открывающий и закрывающий теги нужны для указания начала и конца элемента. Теги всегда начинаются символом < и заканчиваются символом >. В закрывающем теге перед его именем помещается символ /. Для некоторых типов элементов допускается отсутствие закрывающего тега. Существуют также элементы, не имеющие закрывающего тега, то есть его не просто можно опустить, а он вообще не существует в языке.

Атрибуты языка HTML

Элементы могут содержать параметры, называемые атрибутами. Атрибуты могут иметь определенные значения (по умолчанию или устанавливаемые авторами). Пара атрибут/значение указывается в начальном теге элемента перед символом >, например:

Каждому атрибуту может быть присвоено значение определенного типа. В приведенном примере указание атрибута bgcolor в элементе BODY приведет к тому, что цвет фона страницы станет синим. Значения атрибутов заключаются в кавычки, хотя в определенных случаях кавычки необязательны.^[7]

В начальном теге элемента может быть указано любое количество допустимых пар атрибут/значение, разделенных пробелами, например:

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

Существует любопытная разновидность атрибутов – булевы атрибуты. Для них возможны только два значения: ИСТИНА и ЛОЖЬ. По умолчанию эти атрибуты имеют значение ЛОЖЬ. Чтобы присвоить им истинное значение, достаточно просто указать имя этого атрибута, не присваивая ему никакого значения.^[8]

Вложенные элементы языка HTML

Важным моментом HTML является возможность использования вложенных элементов. Элемент, находящийся внутри другого элемента, называется вложенным. Пример использования вложенных элементов для задания начертания шрифта:

<I>Курсив<B>-Полужирный курсив-</B>Курсив</I>

При обработке приведенного HTML-кода получится страница, показанная на рис. 1.1

(рис. 1.1)

Язык HTML предоставляет много вариантов вложения элементов, например, можно вложить один элемент в другой, а затем эту комбинацию вложить в еще один элемент. Эта возможность позволяет создавать сложную конструкцию из простых элементов и тем самым даёт более гибкую настройку отображаемого содержимого на Web-странице.

Тема 2. Создание Web-страницы с помощью языка HTML

Итак, в предыдущей теме были рассмотрены основные понятия HTML языка. Пришла пора приступить к созданию простой страницы с использованием языка HTML. Исходный код Web-страницы можно просмотреть в приложении (приложение 1). В этом коде использованы следующие примеры: вставка гиперссылок, вставка изображения, вставка текста, вставка таблицы и вставка списка.

Создание и просмотр HTML-документа

Сам по себе HTML-документ практически нечитабелен для обычного пользователя. Для просмотра HTML-документов используются специальные программы – Web-браузеры. При открытии HTML-документа Web-браузер распознает теги и учитывает их при отображении текста. Если по каким-то причинам (например, при ошибке в записи тега) тег не распознается Web-браузером, то он игнорируется.

Существует большое количество программ, позволяющих просматривать HTML-документы. Это такие распространенные приложения, как Internet Explorer, Opera, Firefox, Google Chrome.

Ниже приведен пример простого HTML-документа:

<html>

<title>Простой HTML-документ</title>

<body>

<h1>Заголовок</h1>

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

</body>

</html>

Данный фрагмент можно скопировать в текстовый редактор «Блокнот» и сохранить в формате HTML. Для этого в меню «Файл» надо выбирать пункт «Сохранить как». В открывшемся окне в строке «Имя Файла» ввести «1.html», а в списке «Тип файла» указать «Все файлы» и нажать «Сохранить». После чего можно запустить получившийся HTML-документ через любой браузер. Результат этого HTML-документа отображается браузером Internet Explorer так, как показано на рис. 2.1.

(рис. 2.1)

Структура HTML-документа

В предыдущем пункте был приведен стандартный исходный код, технология создания и сохранения HTML-документа. Теперь рассмотрим более углубленно структуру, характерную для любого HTML-документа. (рис 2.2)

(рис. 2.2)

Тег <!DOCTYPE> позволяет определить Web-браузеру формат файла и правильно отобразить его инструкции. Существует три основных формата для HTML 4.01: