Преподаватель который помогает студентам и школьникам в учёбе.

Основы программирования на языке HTML

Содержание:

Введение

С повсеместным внедрением средств вычислительной техники, коммуникационных сетей и информационных ресурсов возникли предпосылки к созданию крупных информационных систем. Данные системы должны были поддерживать не только возрастающий объем информации, но и растущее количество пользователей. Для решения этих задач был разработан язык разметки 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-документ должен отвечать нескольким правилам:

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

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

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

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

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

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

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

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

<menu>

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

</menu>

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

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

p {background-color:green}

@import URL (“file.css”)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<html>

<head>

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

</head>

<body>

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

</body>

</html>

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

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

Для обозначения особенных данных HTML документа используются теги:

Тег <base href= “ссылка”> используется для ввода полного URL^[7] документа.
Тег <meta> используется для ввода управляющей информации. Данный тег используется в сочетании с атрибутами:
1. Name – имя свойства.
2. Content – значение свойства.
3. Scheme – имя схемы, используемой для обработки свойства.
4. http-equiv – используется для указания имени http-сообщения (вместо name).
5. lang – информация о языке (необязательный атрибут).
6. dir – направленность текста (необязательный атрибут).
7. Charset – кодировка HTML-документа.

Тег записывается в виде:

Тег <link> - </link> используется для создания списка ссылок. Используется для подключения каскадных таблиц CSS.
Тег <style> - </style> используется для описания стилей, которые будут использоваться в данном HTML-документе. Включает атрибуты:
1. Type – обязательный атрибут, который указывает язык таблицы стилей.
2. Media – необязательный атрибут, который задает целевое устройство для информации о стиле. По умолчанию задается для screen (экрана компьютера).
Тег <script> - </script> используется для задания дополнительных скриптов (скрипт – краткое описание действий, выполняемых системой [1]). Тег использует следующие атрибуты:
1. Type – указывается название языка, на котором написан скрипт.
2. Src – указывается местоположение внешнего скрипта (URL). Если не указан, то содержимое тега будет интерпретировано как скрипт. Иначе скрипт загрузится с указанного URL.
3. Defer – необязательный логический атрибут. Если указано, то скрипт не будет генерировать содержимое текста.
4. Charset – указывается кодировка символов (необязательный атрибут).

Дополнительные теги для построения структуры страницы:

Чтобы обозначить содержание страницы используется тег ARTICLE.
Чтобы добавить документу разделы используйте тег <section> - </section>.
Для создания боковой панели используйте тег ASIDE.

Атрибуты для редактирования текста (в теге <html>):

Атрибут lang задает основной язык текста в документе HTML. В атрибуте указывается первичный код и подкод, если имеется. Например, <html lang=”de”> указывает на использование немецкого языка. <html lang=”en-us”> указывает на использование американской версии английского языка.
Атрибут dir задает направление текста. LTR – текст читается слева направо. RTL – текст читается справа налево.

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

Тег <h1> - </h1> используется для обозначения заголовка 1 уровня (самого верхнего).
Тег <h2> - </h2> используется для обозначения заголовка 2 уровня.
Тег <p> - <p> используется для обозначения текста внутри одного абзаца.
Тег <i> - </i> выделяет текст курсивом.
Тег <d> - </d> выделяет текст жирным шрифтом.
Тег <s> - </s> делает текст перечеркнутым.
Тег <small> - </small> отображает текст шрифтом меньше, чем шрифт окружающего текста.
Тег <sub> - </sub> выводит текст в нижнем регистре.
Тег <sup> - </sup> выводит текст в верхнем регистре.

Также для редактирования текста используются теги для выделения аббревиатур (тег ABBR), тег для выделения акронима (ACRONYM), тег для выделения цитаты (CITE), тег для выделения фрагмента компьютерного кода как текста (CODE) и другие более частные случаи.

HTML использует списки для добавления структуры в документ. Списки бывают следующих видов:

Неупорядоченные списки (например, список покупок пользователя). Тег <ul> - </ul>, использующий стандартные необязательные атрибуты (id, class для обозначения идентификатора списка; lang, dir, title, style и теги событий) и атрибут type, который задает информацию о виде используемых маркеров (закрашенные или не закрашенные кружки, квадраты; для подключения других видов маркеров используется тег IMG, загружающий изображение маркера, который необходимо повторять для каждой строки списка).
Упорядоченные списки (список со строго определенным порядком). Тег <ol> - </ol>, использующий атрибуты type и start, а также стандартные необязательные атрибуты (id, class, lang, dir, title, style и теги событий). Атрибут type в случае упорядоченных списков может принимать значения:
1. Type=1 – нумерация арабскими цифрами.
2. Type=A – нумерация прописными латинскими буквами.
3. Type=a – нумерация строчными латинскими буквами.
4. Type=I – нумерация большими римскими цифрами.
5. Type=I – нумерация маленькими римскими цифрами.

Атрибут start задает начальный номер первого элемента в списке. По умолчанию значение равно 1.

Списки определений. Включают три тега – DT, DD и DL. Тег <dt> - </dt> содержит термин. Тег <dd> - </dd> содержит определение термина. Тег <dl> - </dl> объединяет теги DT и DD. Теги могут содержать стандартные необязательные атрибуты (id, class, lang, dir, title, style и теги событий).
Список меню. Тег <menu> - </menu> включает атрибут type, принимающий значения:
1. Contex – контекстное меню.
2. Toolbar – меню в виде панели инструментов.
3. List – меню-список.

Для обозначения строк списков используется тег <li> без закрывающего тега. Поддерживается комбинирование списков.

В HTML поддерживается как вставка простой таблицы, так и создание вложенных друг в друга таблиц. Сама таблица обозначается тегом <table> - </table>, каждая строка таблицы тегом <tr> - </tr>, а ячейка таблицы обозначается тегом <th> - </th> для обозначения заголовка ячейки и тегом <td> - </td> для обозначения ячейки с данными. Таким образом, количество столбцов определяется через максимальное количество ячеек в одной из строк таблицы (остальные строки «добиваются» пустыми ячейками).

Для управления толщиной и видимостью рамки вокруг таблицы и ее ячеек используется атрибут border (в теге TABLE). Если значение не задано, то и рамка видна не будет. Если задан атрибут без значения, то толщина линии рамки будет равна 1 пикселю.

Для управления рекомендуемой шириной таблицы используется атрибут width (в теге TABLE), который задается в процентах или пикселях.

Для изменения расстояния между граничами ячеек используется атрибут cellspacing (значение указывается в пикселях). Для изменения расстояния между границей ячейки и текстом внутри ячейки (добавление отступа) используется атрибут cellpadding.

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

Для добавления названия таблицы можно использовать тег <caption> - </caption> с применением стандартных атрибутов. Данный тег используется только посте тега TABLE.

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

Скрипты могут выполняться либо один раз при загрузке документа, либо при каждом событии, являющимся своеобразным триггером для выполнения скрипта. Как уже говорилось ранее, обозначение скрипта в документе выполняется тегом <script> - </script>. Тег позволяется задавать как в тексте документа HTML, так и в одном из заголовков документа. При этом обязательно указать язык сценариев скрипта в теге META.

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

Событие onclick, происходящее при однократном нажатии кнопки мыши по содержимому элемента.
Событие ondblclick, происходящее при двойном нажатии кнопки мыши по содержимому элемента.
Событие onload, происходящее при окончании загрузки браузером документа в окно или фрейм. Данное событие задается только у тегов BODY и FRAMESET (тег определяет структуру фреймов на web-странице; в данном проекте рассмотрено не будет).
Событие onunload, происходящее при окончании удаления браузером документа из окна или фрейма. Данное событие задается только у тегов BODY и FRAMESET.
Событие onmousedown, происходящее при нажатии и удержании кнопки мыши по содержимому элемента. Событие onmouseup, происходящее при отпускании кнопки мыши после удержания по содержимому элемента.
Событие onmouseover, происходящее при наведении курсора на содержимое элемента. Событие onmousemove, происходящее при перемещении курсора над содержимым элемента. Событие onmouseout, происходящее при перемещении курсора за пределы содержимого элемента.
Событие onfocus, происходящее при фокусе на содержимое элемента. Фокус устанавливается как мышью, так и с помощью клавишы Tab. При переходе фокуса с содержимого элемента на другой элемент используется событие onblur.
Событие onkeypress, происходящее при нажатии и отпускании клавиши по элементу. Событие onkeydown происходит при нажатии любой клавиши по элементу. Событие onkeyup происходит при отпускании клавиши с элемента.

Также в HTML предусматривается, чтобы браузер, который не может поддерживать скрипты документа, корректно обрабатывал документ HTML, пусть и без запуска скриптов. Для этого рекомендуется после закрывающего </script> использовать тег <notscript> - </notscript>. В данном теге можно задать другое поведение при невозможности обработки основного скрипта.

С помощью тега CANVAS можно задать область в документе, на которой можно отобразить любые рисованные объекты, анимацию и т.п. (с помощью языка JavaScript).

Добавление готовой иллюстрации в HTML документ выполняется с помощью тега IMG, имеющего следующие атрибуты:

Src – обязательный атрибут, задающий URL-адрес к изображению.
Align (выравнивание), width, height (высота и ширина изображения в пикселях или процентах).
Hspace, vspace – указывают горизонтальные и вертикальные отступы от изображения в пикселях.
Border – наличие и ширина рамки вокруг изображения.
Alt – текстовая строка, являющаяся альтернативой изображению.
Longdesc – указывается адрес документа, в котором можно прочитать аннотацию к изображению.
А также стандартные необязательные атрибуты и теги событий.

Из изображения можно создать навигационную карту (и на другие мультимедиа файлы тоже, распространенных форматов, типа GIF, PNG, JPEG), на которой можно будет отмечать гипертекстовые ссылки (на элементы документа HTML или другие объекты). Данная возможность делает документ более ориентированным на пользователя, на удобное использование ссылок, на более дружественный интерфейс, но значительно загружает обработку HTML документа, из-за чего снижается производительность.

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

Для добавления аудио и видео объектов используются теги <audio> - </audio> и <video> - </video> соответственно. Путь к файлу может быть указан через вложенный тег SOURCE или атрибут src.

Для настройки воспроизведения аудио файла используются атрибуты (внутри тега AUDIO):

Autoplay позволяет автоматически воспроизводить аудио файл.
Controls позволяет добавить панель управления к аудио файлу.
Loop запускает повторное воспроизведение аудио файла после его окончания.
Preload загружает аудио файл вместе со всей страницей.

Для настройки воспроизведения видео файла используются теги:

Autoplay позволяет автоматически воспроизводить видео файл.
Controls позволяет добавить панель управления к видео файлу.
Loop запускает повторное воспроизведение видео файла после его окончания.
Preload загружает видео файл вместе со всей страницей.
Height, width задают параметры области воспроизведения видео файла.

Все другие мультимедиа объекты загружаются с помощью тега <object> - </object>. При этом данный тег создает внутри HTML документа объект, содержимое которого находится во внешнем файле, вследствие чего сам мультимедиа файл не является объектом, а является его содержимым. Все дополнительные параметры объекта указываются в теге PARAM внутри тега OBJECT. Атрибуты тега OBJECT:

Data содержит URL-адрес файла, в котором содержатся данные объекта.
Classid используется либо для указания URL-адреса подключаемого Active X модуля, позволяя скачать модуль, если он не установлен. Либо для подключения уже имеющегося управляющего элемента Active X, указывая его идентификатор.
Codebase используется для указывания базового URL-адреса для текущего объекта (по аналогии тега BASE для HTML документа).
Codetype указывает тип содержимого данных. По умолчанию устанавливается такое же значение, которое указывается в атрибуте type.
Border, hspace, vspace, align, height и width по аналогии с другими объектами мультимедиа.
Id указывается идентификатор объекта внутри документа HTML.
Tabindex указывается номер объекта в последовательности перехода по клавише Tab.
Поддерживаются теги событий и тег style.

Список атрибутов тега PARAM:

Name указывается имя параметра.
Value указывается значение параметра.
Valuetype указывается тип атрибута value (data – в виде строки, ref – в виде URL-адреса файла, object – ссылка на другой объект).
Type указывается тип содержимого ресурса, используется только в том случае, если в valuetype указано значение ref.
Id – идентификатор элемента в пределах документа.

Для группировки объектов используется тег Figure.

В HTML-документе широко используются ссылки различных типов.

Контекстные ссылки – ссылки из тела элемента, например, из текста в элементе документа. В заголовках такие ссылки использовать запрещено. Используются для навигации внутри документа или для перенаправления на другой HTML-документ. Используется тег <a> - </a>.
Заглавные ссылки используются только в заголовках HTML-документа, их запрещено использовать в теле элементов документа. Используется тег <link> - </link>. Используется для установления взаимных отношений между документами.

Тег <a> - </a> включает обязательные атрибуты:

Href – атрибут указывает местоположение целевого Web-ресурса, т.е. в нем задается URL ресурса.

Тег использует стандартные необязательные атрибуты, а также:

Hreflang – атрибут, указывающий базовый язык ресурса, используется только месте с href.
Rel – атрибут описывает отношение документа к ресурсу.
Rev – атрибут описывает отношение ресурса к документу, т.е. что происходит при переходе по кнопке «назад».
Shape – атрибут указывает форму активной области на серверной навигационной карте.
Coords – атрибут указывает форму активной области на клиентской навигационной карте.
Accesskey – в данном атрибуте указываются значения горячих клавиш, которыми можно воспользоваться для перехода по ссылке.
Download – атрибут предлагает скачать документ, указанный в ссылке.

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

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

Чтобы использовать фрейм вместо тега BODY используется тег <frameset> - </frameset> с тегами <frame> - </frame> внутри него, используемыми для обозначения документов, входящих в фрейм.

Дополнительные возможности HTML

В данной главе хотелось бы привести краткий обзор интересных возможностей HTML.

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

HTML поддерживает обработку так называемых форм. Это привычные анкеты, бланки и формы, содержащие текст и кнопки, чекбоксы, ориентированные на «общение» с пользователем. Формы могут включать и поля для ввода информации, и всплывающие меню, карты. Для задания формы используется тег <form> - </form>. Тег содержит как стандартные необязательные атрибуты, рассмотренные ранее, так и обязательные атрибуты:

Атрибут action задает URL-адрес приложения, которое должно получить и обработать данные формы.
Атрибут method устанавливает метод передачи данных между клиентом и сервером.

Дополнительные атрибуты:

Атрибут enctype задает кодирование данных, во избежание нарушения целостности или доступности данных формы (пользователи, заполняющие формы могут предоставлять личные данные, которым необходимо предоставить защиту). Рассматривать кодировки в данном проекте не будем.
Атрибут accept-charset задает список наборов символов, которые должен поддерживать сервер, чтобы корректно интерпретировать данные из формы.

Получение данных из форм можно реализовать при помощи электронной почты. Это необходимо в случае, если сервер отказывается обрабатывать форму (вследствие особых настроек по правилам безопасности используемых серверов). Для этого в атрибуте action указывается значение mailto-URL. Таким образом, все данные заполненной формы будут отправлены на указанный URL, обходя обработку сервером.

Пара слов о CSS

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

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

Каскадными таблицы стилей называются из-за подключения к одному HTML-документу нескольких стилевых таблиц, которым назначается приоритет использования. Что, в свою очередь, позволяет предусмотреть невозможность реализации того или иного эффекта каким-либо браузером, не поддерживающим сложные визуальные эффекты. Задать таким браузерам другой единообразный стиль, который не будет «ломать» визуальное представление HTML-документа.

Внедрение таблицы стилей (задание таблицы в заголовке HTML-документа) происходит с помощью тега <style> - </style> с установленным значением “text/css”. Пример использования:

<!Doctype HTML>

<HTML>

<head>

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

<style type =”text/css”>

…..список CSS-правил…..

</style>

</head>

<body>

Текст документа

</body>

</HTML>

Присоединение таблицы стилей (когда таблица находится о внешнем файле) осуществляется через тег LINK:

<head>

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

<link rel =”stylesheet” type =”text/css” href =”file.css”>

</head>

Также таблицу можно импортировать из внешнего файла на сервере с помощью свойства CSS @import:

<style type =”text/css”>

@import URL (www.servername/file.css)

</style>

Обратите внимание, URL к файлу на сервере указывается без скобок.

Заключение

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

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

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

Список литературы

https://ru.wikipedia.org/
https://www.w3.org/
https://developer.mozilla.org/ru/docs/Web/Guide/CSS/Getting_started/What_is_CSS
https://semantica.in/blog/css.html
Кириченко А.В., Хрусталев А.А. HTML5 + CSS3. Основы современного WEB – дизайна. – СПб.: Наука и техника, 2018. – 352 с.
Чак М. Билл К. HTML и XHTML Подробное руководство, 6-е издание. – СПБ.: Символ – плюс, 2016. – 745 с.
http://html-exp.narod.ru/base.htm
https://html5book.ru/osnovy-html/
Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство, 6-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2008. – 752 с., ил.
http://citforum.ru/internet/html40/intro/sgmltut.html
https://www.youtube.com/watch?v=ZAA9VXqr0B4
https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics
https://html5book.ru/hyperlinks-in-html/
http://htmlbook.ru/samhtml/freymy/sozdanie-freymov
ГОСТ Р 7.0.5 – 2008 «Библиографическая ссылка».

HTML - HyperText Markup Language. стандартизированный язык разметки документов (гипертекста) во Всемирной паутине [1]. ↑
WWW - World Wide Web. распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключённых к сети Интернет [1]. ↑
CERN - Европейская организация по ядерным исследованиям, крупнейшая в мире лаборатория физики высоких энергий.[1] ↑
GIF - Graphics Interchange Format. Формат для обмена изображениями популярный растровый формат графических изображений [1]. ↑
W3C - World Wide Web Consortium. Организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины [1] ↑
CSS - Cascading Style Sheets. Формальный язык описания внешнего вида документа, написанного с использованием языка разметки [1]. ↑
URL - Uniform Resource Locator. Система унифицированных адресов электронных ресурсов, или единообразный определитель местонахождения ресурса [1]. ↑