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

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

Содержание:

Введение

Актуальность работы. Язык HTML – язык разметки гипертекста. Расшифровывается как Hyper Text Markup Language (произносится «эйч-ти-эм-эл»). Это стандарт, в соответствии с которым документы Web отображаются браузерами. Как ясно из названия, HTML – это метод разметки стандартного текста таким образом, чтобы браузер интерпретировал определенные команды, отображал информацию в нужном формате. С помощью языка HTML создаются HTML-файлы, которые отображаются с помощью браузера в виде Web-документа.

Подавляющее большинство сайтов так или иначе используют HTML [5, с.10].

В 2014 году официально была завершена работа над новым стандартом - HTML5, который фактически произвел революцию, привнеся в HTML много нового. HTML5 определяет новый алгоритм парсинга для создания структуры DOM добавление новых элементов и тегов, как например, элементы video, audio и ряд других переопределение правил и семантики уже существовавших элементов HTML. Фактически с добавлением новых функций HTML5 стал не просто новой версией языка разметки для создания веб-страниц, но и фактически платформой для создания приложений, а область его использования вышла далеко за пределы веб-среды интернет: HTML5 применяется также для создания мобильных приложений под Android, iOS, Windows Mobile и даже для создания десктопных приложений для обычных компьютеров [5].

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

Задачи работы:

- раскрыть понятие языка разметки;

- изучить историю языков разметки;

- показать структуру html-документа и его элементы ;

- дать характеристику режимам работы браузеров и Doctype;

- дать характеристику тегу html и атрибуту manifest;

- показать создание документа HTML5.

Объект: технологии разметки гипертекста

Предмет: язык текстовой разметки HTML.

Структура работы. Работа состоит из введения, 2 глав, заключения и списка литературы. Список литературы включает 15 литературных источников.

Глава 1. Понятие и история языков разметки

HTML (англ. HyperText Markup Language) — это язык, принятый в World Wide Web для создания и публикации веб-страниц. HTML предоставляет авторам средства для:

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

Фактически современная веб-страница формируется с помощью трех языковых средств:

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

Первоначально HTML был разработан приблизительно в 1986–1991 гг. Тимом Бернерсом-Ли (англ. Tim Berners-Lee) и его коллегами из CERN Laboratories (Швейцария) для обмена текстовыми документами и другими данными между учеными. Одновременно с этим Т. Бернерс-Ли разрабатывает протокол HTTP. Для того чтобы стать стандартом, протокол должен иметь не менее двух независимых реализаций, первую написал в 1990 г. сам Т. Бернерс-Ли. 22 апреля 1993 г. вышел браузер Mosaic, авторы которого добавили к нему поддержку графических образов и ряд других полезных качеств; благодаря Mosaic протокол HTTP стал популярным. Быстрое развитие Сети в 90-е гг. потребовало стандартизации этого языка, и 22 сентября 1995 г. под эгидой IETF был создан HTML 2.0. Официальной спецификации HTML 1.0 не существует. До 1995 г. разработчики ранних браузеров выпускали свои корпоративные стандарты, чтобы официальная версия отличалась от них, ей сразу присвоили второй номер [15].

Версия 3, предложенная Консорциумом Всемирной паутины (W3C), обеспечивала много новых возможностей, таких как создание таблиц, «обтекание» изображений текстом и отображение сложных математических формул, поддержка gif-формата. Даже при том, что этот стандарт был совместим со второй версией, реализация его была сложна для браузеров того времени. Версия 3.1 официально никогда не предлагалась, и следующей версией стандарта HTML стала 3.2, в которой были опущены многие нововведения версии 3.0, но добавлены нестандартные элементы, поддерживаемые браузерами Netscape Navigator и Mosaic. В 1997 году, в декабре появился HTML 4.0, который сейчас является действующим стандартом языка (в уточненной редакции HTML 4.01, опубликованной в декабре 1999 г.). В версии HTML 4.0 произошла некоторая «очистка» стандарта. Многие элементы были отмечены как устаревшие и нерекомендуемые (англ. deprecated). В частности, элемент font, используемый для изменения свойств шрифта, был помечен как устаревший (вместо него рекомендуется использовать таблицы стилей CSS). Мертвой веткой является XHTML, однако сказать о ней стоит. В 1998 г. Консорциум Всемирной паутины начал работу над новым языком разметки, основанным на HTML 4, но соответствующим синтаксису XML. Впоследствии новый язык получил название XHTML. Первая версия XHTML 1.0 одобрена в качестве рекомендации Консорциумом Всемирной паутины 26 января 2000 г. Планируемая версия XHTML 2.0 должна была разорвать совместимость со старыми версиями HTML и XHTML, но 2 июля 2009 г. W3C объявил, что полномочия рабочей группы XHTML2 истекают в конце 2009 г. Таким образом, была приостановлена вся дальнейшая разработка стандарта XHTML 2.0. Ресурсы рабочей группы были направлены на развитие HTML 5. 28 октября 2014 года был принят стандарт HTML 5 [11].

Итак, рассмотрен язык гипертекстовой разметки, обобщенный язык разметки.

Язык разметки — набор символов или последовательностей, вставляемых в текст для передачи информации о его выводе или строении. Текстовый документ, написанный с использованием языка разметки, содержит не только сам текст (как последовательность слов и знаков препинания), но и дополнительную информацию о различных его участках — например, указание на заголовки, выделения, списки и т. д. Чтобы быть специалистом в сфере разработки программного обеспечения, необходимо иметь представление о разных компьютерных языках, в том числе о языках разметки. К тому же желательно знать историю языков разметки. Различают логическую и визуальную разметки. В первом случае речь идет только о том, какую роль играет данный участок документа в его общей структуре (например, «данная строка является заголовком»). Во втором — определяется, как именно будет отображаться этот элемент (например, «данную строку следует отображать жирным шрифтом»). Идея языков разметки состоит в том, что визуальное отображение документа должно автоматически получаться из логической разметки и не зависеть от его непосредственного содержания. Это упрощает автоматическую обработку документа и его отображение в различных условиях (например, один и тот же файл может по-разному отображаться на экране компьютера, мобильного телефона и на печати, поскольку свойства этих устройств существенно различаются). В жизни это правило часто нарушается: например, создавая документ в редакторе наподобие MS Word, пользователь может выделять заголовки жирным шрифтом, но нигде не указывать, что эта строка является заголовком. Различают командную и теговую разметки. Ярким представителем языков командной разметки является LaTeX — язык, применяемый для набора и верстки сложных научных, в первую очередь математических, текстов [10].

Идея использовать языки разметки в компьютерной обработке текстов, вероятнее всего, была впервые обнародована Вильямом Танниклиффом (англ. William W. Tunnicliffe) на конференции в 1967 г. В 1970-е гг. В. Танниклифф руководил разработкой стандарта GenCode для издательской индустрии. Тем не менее в настоящее время «отцом» языков разметки обычно называют Чарльза Голдфарба (англ. Charles Goldfarb). В 1969 г. компания IBM предложила Ч. Голдфарбу присоединиться к Кембриджскому научному центру и применить компьютеры в юридической практике. Точнее, этот проект требовал интеграции приложения по редактированию текстов с системой информационного поиска и программой по рендерингу (или оформлению) страниц. Документы должны были храниться в репозитории, откуда извлекаться по запросу. Извлеченные документы должны были быть доступными для редактирования в текстовом редакторе и сохранения в базе данных, или рендеринга, и подготовке к печати. Эта стандартная на сегодняшний день задача было далека от решения в 1969 г. Далека настолько, что приложения, которые надо было интегрировать, не то что не были подготовлены для совместной работы, они не могли быть запущены в одной операционной системе. По ходу выяснилось, что для взаимодействия с каждой из программ требовалась разная процедурная разметка. В 1969 г. Ч. Голдфарб сформулировад основную концепцию будущего языка GML. Руководство IBM решает, что GML может использоваться не только в адвокатских конторах — будущий продукт имеет серьезный коммерческий потенциал, и засекречивает разработки до их окончания. В 1973 г. Ч. Голдфарб публично представил GML. GML не зависел ни от марки компьютеров, ни от операционной системы, и IBM удалось перевести 90 % своей документации в этот формат. В 1978 г. Ч. Голдфарб убедил руководство IBM использовать GML в коммерческих целях в составе разработанного компанией «средства формирования документов» (англ. Document Composition Facility), после чего GML несколько лет широко использовался в бизнесе. GML (Generalized Markup Language — обобщенный язык разметки) — набор макросов, основной целью которых является реализация разметки, использующей теги для оформления текста [6].

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

В 70-х параллельно языкам разметки развивалось понятие «гипертекст» (которое возникло раньше языков разметки), и развивалось в некотором смысле независимо от них. Иными словами, для создания гипертекстовых документов применялись не языки разметки, а иные средства. В 1974 г. Теодор Нельсон предложил идею гипермедиа и начал активно ее разрабатывать. Он предложил организовывать взаимосвязанную сеть спрайтовых 1 картинок и даже создавать фильмы с меняющимся по требованию пользователя сюжетом. Эту идею воплотила в 1978 г. в системе Aspen Movie Map группа ученых Массачусетского технологического института во главе с Андреем Липпманом. Система предлагала виртуальное путешествие по Аспену (США, штат Колорадо). Машина киногруппы предварительно объехала весь город, засняв всевозможные места под разными углами с помощью четырех камер, а затем фотографии были оцифрованы и заложены в Aspen. Пользователям было доступно не только множество навигационных средств, но и глобальная карта для быстрого переключения к нужной точке города. Проект Google street view («Простор улиц») был запущен в мае 2007 г., спустя 30 лет. К 1970 г. стало ясно, что для задач из разных предметных областей необходимы разные способы описания документов (говоря современным языком, не удастся обойтись ограниченным набором тегов разметки текста). Появилась идея создать метаязык, т. е. язык описания языков разметки. Принцип был такой: возникает задача из новой предметной области, с помощью метаязыка стандартным образом создается новый язык разметки, который будет предназначен для решения данной задачи и целого класса задач, ей эквивалентных. Чтобы можно было включать одни документы в другие, авторы проекта решили ориентироваться на гипертекстовый способ организации данных. Основа для реализации сформулированных требований в виде GML уже существовала, но трудно было остановиться на конкретном технологическом решении. К 1978 г. комитет по обработке информации Американского национального института стандартов (ANSI) всерьез заинтересовался языками подготовки гипертекстовых данных. Чарльз Голдфарб возглавил комитет по созданию мощного языка разметки документов, который получил название SGML (Standard Generalized Markup Language). В его основу был положен GML. SGML создавался под влиянием идеи, что разметка должна быть сфокусирована на структурных аспектах документа и оставить внешнее представление документа интерпретатору. SGML точно определял синтаксис для включения разметки в текст, а также отдельно описывал, какие теги разрешены и где. Это давало возможность авторам создавать и использовать любую разметку, выбирая теги и давая им имена на нормальном языке. Таким образом, SGML следует считать метаязыком; множественные специальные языки разметок произошли от него. SGML разрабатывался для совместного использования машинно-читаемых документов в больших правительственных и аэрокосмических проектах. Он широко использовался в печатной и издательской сфере. В 1980 г. появился первый рабочий вариант спецификации. В 1983 г. SGML принят в качестве промышленного стандарта, поддержанного Министерством обороны и Налоговым управлением США. Спустя два года сформировалась международная группа пользователей SGML. Так начался расцвет гипертекстовых технологий. В 1986 г. SGML принят как стандарт ISO 8879. SGML (Standard Generalized Markup Language — стандартный обобщенный язык разметки) — метаязык для определения языков разметки документов. SGML предоставляет множество вариантов синтаксической разметки для использования различными приложениями [6].

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

HTML успешно справлялся с проблемой сложности SGML путем определения небольшого набора структурных и семантических элементов — дескрипторов (тегов). С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста и мультимедийных возможностей. Успех HTML способствовал развитию и распространению языков разметки. Язык SGML произошел от GML в том смысле, что испытал его идейное влияние. Выше мы сказали, что SGML — это метаязык, позволяющий создавать новые языки, одним из них является НТML. Таким образом, по определению HTML — это приложение SGML, реализация, язык, написанный на метаязыке SGML. Язык HTML был ограничен в своих возможностях только разметкой гипертекста, сообществу потребовался язык, который сочетал бы в себе гибкость и мощь языка SGML (позволял бы описывать произвольные данные иерархической структуры) и простоту HTML. Так в августе 1996 г. началась работа над языком XML. Язык XML — это не приложение, а подмножество SGML, и таким образом сам является метаязыком; благодаря языку XML было создано великое множество новых языков разметки [15].

На конференции SGML-96 14 ноября 1996 г. рабочая группа представила предварительный вариант нового языка на 32 страницах. Уже 10 февраля 1998 г. XML 1.0 стал рекомендацией W3C. Разработка началась с определения десяти положений, которым должен был соответствовать новый язык.

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

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

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

Объявление XML указывает версию языка, на котором написан документ. Поскольку интерпретация содержимого документа, вообще говоря, зависит от версии языка, то спецификация предписывает начинать документ с объявления XML. В первой (1.0) версии языка использование объявления не было обязательным, в последующих версиях оно обязательно. Таким образом, версия языка определяется из объявления, и если объявление отсутствует, то принимается версия 1.0. Кроме версии XML, объявление может также содержать информацию о кодировке документа и «оставаться ли документу со своим собственным DTD или с подключенным» (по умолчанию "no"):

• Standalone = "yes" — значит документ будет пользоваться своим DTD,

• Standalone = "no" — значит DTD подключается извне.

Инструкции обработки (англ. processing instruction, PI) позволяют размещать в документе инструкции для приложений. В данном примере показана инструкция обработки, передающая xml-stylesheet-приложению (например, браузеру) инструкции в файле mystyle.css посредством атрибута href:

<?xml-stylesheet type="text/css" href="mystyle.css"?>

Далее следует корневой тег <knowledgeDatabase>, в который вложены все остальные теги по принципу матрешки.

В 1998 г. W3C начал работу над XHTML — новым языком разметки, основанным на HTML 4, но соответствующим синтаксису XML.

26 января 2000 г. W3C опубликовал рекомендацию XHTML 1.0. В те годы назывались следующие преимущества XHTML в сравнении с HTML4:

1. Xhtml-документы соответствуют стандарту XML, и, следовательно, они могут просматриваться, редактироваться и проверяться на синтаксическую правильность стандартными средствами поддержки языка XML.

2. Xhtml-документы могут отображаться как существующими обозревателями html-документов, так и новыми обозревателями, поддерживающими стандарт XHTML.

3. Xhtml-документы могут обращаться к сценариям и аплетам, основанным на объектной модели документов (DOM). С практической точки зрения выделялись следующие преимущества XHTML [15]:

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

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

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

2.1. Структура html-документа и его элементы

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

Версии языка HTML

HTML 0.9
HTML 2.0, одобренный как стандарт 22 сентября 1995 года;
HTML 3.2— 14 января 1997 года;
HTML 4.0 — 18 декабря 1997 года;
HTML 4.01 — 24 декабря 1999 года;
HTML 5— 28 октября 2014 года
HTML 5.1 начал разрабатываться примерно 19 декабря 2012 года.

Для создания web-страниц понадобиться обычный текстовый редактор, например, Блокнот или NotePad++. Отличие в том, что создаваемым файлам дается расширение html [11].

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

<имя_тега [возможные параметры]>

Чтобы указать браузеру место окончания действия того или иного тега, используется закрывающий тег. Это тег, имеющий то же самое имя с прямым слешем ‘/’ перед ним/

<html>

HTML-документ

</html>

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

Как правило, элементы имеют следующую структуру: открывающий тег, содержимое, закрывающий тег. Однако элементы могут быть пустыми, т. е. не содержащими никакого текста и других данных (например, тег перевода строки <br />). Элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, URL-адрес для элемента a). Атрибуты указываются в открывающем теге, как показано в примере:

Каждый html-документ, отвечающий спецификации HTML какой-либо версии, должен включать:

1) строку, содержащую декларацию типа документа;

2) заголовок документа (заключенный в теги <head>…</head>);

3) тело документа (заключенное в теги <body>…</body> или <frameset>…</frameset>).

<! DOCTYPE html public "-//w3c//dtd html 4.0//en">

<html>

<head>

<title>мой первый html-документ</title>

</head>

<body>

<p>это html-документ.</p>

</body>

</html>

Основная структура HTML-документа должна состоять из заглавия и тела. Явное вложение заголовка в элемент HEAD не обязательно. Использование элемента HEAD не сказывается на вывод документа. Атрибуты отсутствуют. В документе должен присутствовать только один элемент HEAD, и он должен появиться до элемента BODY.

Синтаксис использования

<HEAD>

элемент TITLE

</HEAD>

Заметим, что начальный и конечный теги могут отсутствовать. Тег <HEAD> должен содержать один TITLE элемент и возможно следующие элементы

ISINDEX:
META;
LINK;
STYLE;
SCRIPT.

BODY (ТЕЛО) — тело документа. Основная структура документа HTML всегда состоит из заголовка и тела. Нет необходимости явно помещать тело в элемент BODY, однако делая так, можно специфицировать атрибуты, влияющие на представление документа в целом (например, установить фоновое изображение или цвет).

Если элемент BODY не содержит атрибуты, использование его не дает явного эффекта в непосредственном отображении документа. Элемент HTML может быть задан яво или подразумеваться. Только один элемент BODY разрешен в документе, и он должен находится после элемента HEAD (который тоже может быть как подразумеваемым, так и явным) [6].

Основной синтаксис

<BODY>тело документа</BODY>

Возможные атрибуты тега BODY

Таблица 1

Имя атрибута	Возможные значения	Смысл
BGCOLOR	Цвет	Фоновый цвет документа
TEXT	Цвет	Цвет для текста документа
LINK	Цвет	Цвет для непосещенной гипертекстовой связи
VLINK	Цвет	Цвет для посещенной гипертекстовой связи
ALINK	Цвет	Цвет для активной гипертекстовой связи; используется для выделения текста , когда пользователь нажал на связь
BACKGROUND	URL	URL фонового образа

При создании HTML-документов рекомендуется соблюдать следующую структуру:

html>

<head>

</head>

<body>

</body>

</html>

Здесь <html> - это тег, обозначающий начало HTML-документа. Браузер, встретивший данный тег, будет «знать», что представленную ниже информацию следует интерпретировать как HTML-страницу. Тег <head> означает раздел заголовка, который обычно включает:

Заголовок страницы

<title>Государственный центр оказания услуг</title>

Кодировку, в которой представлен HTML-документ

Краткое описание содержания документа

Список ключевых слов документа

5. Подключаемые внешние javascript файлы (скрипты)

6. Внешние таблицы стилей (css) для форматирования документа

Раздел тега <head> может содержать и другие конструкции языка HTML. В конечном итоге разработчик сам решает, что должно быть записано в данном разделе. Он может быть и пустым, т.е. не содержать ничего. Тогда браузер будет руководствоваться своими настройками и алгоритмами при отображении такого документа. Наконец, раздел <head> может совсем отсутствовать и это будет аналогично пустому разделу. Однако при разработке HTML-страницы крайне не рекомендуется пропускать данный раздел и его «минимальная конфигурация» должна иметь следующий вид^{^[1]} (рис. 1):

<head>

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

</head>

В тегах <body>...</body> заключается отображаемая информация (тело) страницы: текст, изображения, таблицы, звук, видео, объекты (например, flash-проигрыватель), javascript-программы, таблицы стилей (css) и т.д^{^[2]}.

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

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

Рисунок 1 – Структура документа HTML

Пример: простейший HTML-документ (рис. 2).

Рисунок 2 – Пример простого HTML-документа

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

<h1>Заголовок 1 уровня</h1>

<h2>Заголовок 2 уровня</h2>

<h3>Заголовок 3 уровня</h3>

<h4>Заголовок 4 уровня</h4>

<h5>Заголовок 5 уровня</h5>

<h6>Заголовок 6 уровня</h6>

На рис. 3 показано отображение заголовков разного уровня в браузере.

Рисунок 3 – Отображение заголовков в браузере

HTML есть возможность создавать нумерованные и маркированные списки^{^[3]}.

Тег <ol>...</ol> - создает нумерованный список элементов/

Атрибуты:

start="N" - начать нумерацию с числа N;

type="..." -определяет формат нумерации:

1 - арабские цифры (по умолчанию);

A - прописные буквы (A, B, C);

а - строчные буквы (a, b, c);

I - прописные римские цифры (I, II, III);

i - строчные римские цифры (i, ii, iii).

Тег <ul>...</ul> - создает маркированный список элементов.

Атрибут:

type="..." - определяет формат маркера:

disk - диск (по умолчанию);

circle – окружность;

square – квадрат.

<li>...</li> - задает элемент списка в нумерованном или маркированном списке

Атрибуты:

type="..." - формат номера или маркера (см. описание <ol> и <ul>);

value="N" - задает номер элемента списка.

Примеры создания отображения списка показаны на рис. 4-6.

Рисунок 4 – Создание списка в HTML

Рисунок 5 – Отображение списка в браузере

Для создания ссылок используется тег <a>...</a>.

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

Абсолютный адрес содержит в себе имя хоста и полный путь к ресурсу, например, http://www.example.com/docs/about.html. С помощью абсолютного адреса можно ссылаться на любой открытый ресурс в Интернете. Если нужно поставить ссылку на главную страницу сайта, указывают его адрес и слеш.

Пример для абсолютного адреса:

HTML-код: <a href="http://www.vk.com">Яндекс</a>

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

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

Рисунок 6 - Пример файловой структуры

Например, чтобы поставить ссылку из файла file1.html на файл file2.html, необходим следующий HTML-код [3].

А чтобы ссылка в файле file2.html указывала на file1.html:

Две точки (..) означают переход к родительскому каталогу.

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

Для открытия ссылки в новом окне используется атрибут target со значением _blank.

Для создания и хранения гипертекстовых документов предназначено большое количество как программных, таки и аппаратных средств. Создаются гипертекстовые документы с помощью текстовых редакторов, которые позволяют создавать и редактировать разметку документов. Текстовых редакторов существует большое количество. Но наиболее популярными и удобными можно назвать следующие: Atom, Brackets, Notepad++, SublimeText. Также в этих целях можно использовать среды разработки: PHPStorm, Netbeans, Eclipse, Lobster, а также визуальные редакторы: Adobe Dreamweaver, Adobe Muse, Macaw [3].

2.2. Режимы работы браузеров и Doctype

Существуют разные версии языка HTML — со второй по пятую; формально это не разные версии, а разные языки. Кроме того, существуют разные режимы работы браузеров: режим поддержки стандартов и режим имитации работы старых браузеров. Инструкция <! DOCTYPE> определяет, в соответствии с каким синтаксисом необходимо разбирать данную веб-страницу, а также задает режим работы браузера [14].

Непонимание принципов работы <! DOCTYPE> приводит к сложно выявляемым ошибкам. Разберем несколько примеров. Рассмотрим работу браузера в режиме совместимости:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Quirc mode</title>

<style>

ody {font-size: 20;}

td {font-size: 200%;}

</style>

</head>

<body>

</td></tr>

</table>

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

Текст в таблице

</td></tr>

</table>

</body>

</html>

В заголовочной части заданы стили, указан размер шрифта для текста, расположенного в абзацах и в ячейках таблицы. Следует обратить внимание на то, что во втором случае размер шрифта указан в процентах (от размера некоторого базового шрифта). Непосредственной проверкой можно убедиться, что изменение размера базового шрифта (например, body {font-size: 10}) не приводит к соответствующему изменению размеров шрифта в таблице, хотя стандарт предписывает иное. Это известная ошибка старых браузеров, которая перекочевала в новые версии для «сохранения преемственности».

Теперь нужно заменить <! DOCTYPE> на строгий:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/REC-html40/strict.dtd">

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

Если задать единицы измерения (body {font-size: 10px}), то браузер а) примет инструкцию по размеру базового шрифта, б) будет вычислять размер шрифта в таблице относительно базового.

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

Структура элемента <! DOCTYPE> подчинена правилам:

<! DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация] //

[Организация]//[Тип] [Имя]//[Язык]" "[URL]">

Параметр Публичность указывает на то, каким ресурсом является объект — публичным (значение PUBLIC) или системным (значение SYSTEM), например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC.
Параметр Регистрация сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и минус (–) — разработчик не зарегистрирован. Для W3C ставится значение «–».

3. Параметр Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в <! DOCTYPE>.

4. Параметр Тип — тип описываемого документа. Для HTML/ XHTML значение указывается DTD.

5. Параметр Имя — уникальное имя документа для описания DTD.

6. Параметр Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).

7. Параметр URL — адрес документа с DTD.

Приведем примеры использования <! DOCTYPE> для HTML 4.01. Строгий вариант, или стандартный (англ. Strict), означает, что документ не содержит элементов, помеченных Консорциумом W3C как «устаревшие» или «неодобряемые» (англ. deprecated).

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Переходный вариант, или совместимости (англ. Transitional), означает, что документ может содержать устаревшие теги для совместимости и упрощения перехода со старых версий HTML.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

Приведем примеры, показывающие различие режимов (табл. 1). В HTML 5 используется только один вариант <! DOCTYPE>:

<! DOCTYPE html>

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

<u> <b> Корректная вложенность тегов </b> </u>

<u> <b> Ошибка </u> </b>

Таблица 2

Режимы работы браузеров

Strict Transitional	Transitional
Чувствительность к регистру имен классов и идентификаторов
Чувствительны к регистру	Нечувствительны к регистру
Пиксели по умолчанию
Числа без указания единиц измерения игнорируются. Если в стилях при указании размеров задано одно лишь число без упоминания единиц (width: 500 вместо width: 500 px), такое значение игнорируется	Если в стилях в качестве единицы размера указано число без единицы измерения (10), считается, что значение задано в пикселях (как 10 px)
Свойство display для изображений
По умолчанию установлено как inline, при этом внизу картинок добавляется небольшой отступ	По умолчанию установлено как block, при этом внизу картинок отступ отсутствует

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

<body>

Сомнительный текст

</unknowntag>

<td>

<tr>Строка в ячейке</tr>

</td>

</table>

</body>

Описать, какие элементы и где могут присутствовать в документе, какие элементы могут быть вложены в другие элементы и т. д. позволяет язык схем DTD. Язык схем DTD — язык, который используется для записи фактических синтаксических правил языков разметки текста. Приведем фрагмент dtd-документа, который показывает, что элемент TR должен содержать один и более элементов TD или TH:

<! ELEMENT TR – O (TH|TD)+ >

Дефис означает обязательность открывающего тега TR, а «О» — необязательность закрывающего. Еще один пример показывает, что обязательные атрибуты тега img — это src и alt, в то время как height и width — необязательные:

<! ATTLIST IMG

src %URI; #REQUIRED

alt %Text; #REQUIRED

height %Length; #IMPLIED

width %Length; #IMPLIED

Используя DTD, браузер, в частности, понимает, что именно ячейка таблицы должна быть вложена в строку, а не наоборот [3].

2.3. Тег html и атрибут manifest

Тег html является контейнером, который заключает в себе все содержимое веб-страницы, включая теги head и body. Среди атрибутов тега html интересным является manifest, введенный в HTM 5.

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

В качестве значения атрибута manifest указывается относительный или абсолютный путь к текстовому файлу, он называется «файл манифеста» или просто «манифест». Имя и расположение файла может быть любым, но он должен отдаваться сервером с заголовком text/cache-manifest. Например, для веб-сервера Apache в файле .htaccess, расположенном в корне сайта, следует прописать строку

AddType text/cache-manifest .cache

В этом случае файл манифеста имеет расширение cache. Сам манифест информирует браузер о том, какие ресурсы необходимо сохранить в локальном кэше. Этот список может содержать html- и css-файлы, изображения, скрипты. Манифест начинается с обязательной строки CACHE MANIFEST. Имена файлов перечисляются внутри трех секций (табл. 3) [3].

Пример файла манифеста:

CACHE MANIFEST #

Версия 1.0

CACHE:

22.css

22.js

images/old.png

Таблица 3

Секции манифеста

CACHE	Содержит перечень ресурсов, которые браузер должен кэшировать. Данный раздел используется по умолчанию, если его не указать и нет других разделов, то записи в манифесте причисляются к этому разделу
NETWORK	Список ресурсов, которые доступны только при подключении к Сети. Обычно в этот раздел входят программы, выполняемые на стороне сервера
FALLBACK	Список замещающих файлов, которые будут использоваться при отсутствии подключения к Сети. Допустимо использовать символ * для обозначения всех файлов. Например, *.php /offline.html означает, что вместо любого файла с расширением php будет показана страница offline.html

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

1) единственный титул документа (title);

2) метаописатели документа (meta);

3) базовый uri внешних ссылок (base);

4) ссылки на другие документы (link);

5) внутренние таблицы стилей (style);

6) сценарии клиента (script).

Структура тега head подробно описана в учебниках и справочниках.

2.4. Создание документа HTML5

Элементы являются кирпичиками, из которых складывается документ html5. Для создания документа нужно создать простой текстовый файл, а в качестве расширения файла указать *.html.

Нужно создать текстовый файл, назвать его index и изменить его расширение на .html.

Затем открыть этот файл в любом текстовом редакторе, например, в Notepad++. Добавить в файл следующий текст:

<!DOCTYPE html>

<html>

</html>

Для создания документа HTML5 нужны в первую очередь два элемента: DOCTYPE и html. Элемент doctype или Document Type Declaration сообщает веб-браузеру тип документа. <!DOCTYPE html> указывает, что данный документ является документом html и что используется html5, а не html4 или какая-то другая версия языка разметки.

А элемент html между своим открывающим и закрывающим тегами содержит все содержимое документа. Внутри элемента html можно разместить два других элемента: head и body. Элемент head содержит метаданные веб-страницы - заголовок веб-страницы, тип кодировки и т.д., а также ссылки на внешние ресурсы - стили, скрипты, если они используются. Элемент body собственно определяет содержимое html-страницы. Теперь нужно изменить содержимое файла index.html следующим образом:

<!DOCTYPE html>

<html>

<head>

<title>Документ HTML5</title>

</head>

<body>

<div>Содержание документа HTML5</div>

</body>

</html>

В элементе head определено два элемента:

- элемент title представляет заголовок страницы;

- элемент meta определяет метаинформацию страницы [5].

Для корректного отображения символов предпочтительно указывать кодировку. В данном случае с помощью атрибута charset="utf-8" указываем кодировку utf-8. В пределах элемента элемента body используется только один элемент - div, который оформляет блок. Содержимым этого блока является простая строка. Поскольку выбрана в качестве кодировки utf-8, то браузер будет отображать веб-страницу именно в этой кодировке. Однако необходимо чтобы сам текст документа также соответствовал выбранной кодировке utf-8. Как правило, в различных текстовых редакторах есть соотвествующие настройки для установки кодировки. Например, в Notepad++ надо зайти в меню Кодировки и в открывшемся списке выбрать пункт Преобразовать в UTF-8 без BOM.

После этого в статусной строке будет можно будет увидеть UTF-8 w/o BOM, что будет указывать, что нужная кодировка установлена. Дальше нужно сохранить и открыть файл index.html в браузере (рис.7):

Рисунок 7 - Файл index.html в браузере

Таким образом, был создан первый документ HTML5. Так как указан в элементе title заголовок «Документ HTML5», то именно такое название будет иметь вкладка браузера. Так как указана кодировка utf-8, то веб-браузер будет корректно отображать кириллические символы. А весь текст, определенный внутри элемента body можно увидеть в основном поле браузера [15].

Заключение

HTML (англ. HyperText Markup Language) — это язык, принятый в World Wide Web для создания и публикации веб-страниц. HTML.

Язык разметки — набор символов или последовательностей, вставляемых в текст для передачи информации о его выводе или строении.

Версии языка HTML:

HTML 0.9
HTML 2.0, одобренный как стандарт 22 сентября 1995 года;
HTML 3.2— 14 января 1997 года;
HTML 4.0 — 18 декабря 1997 года;
HTML 4.01 — 24 декабря 1999 года;
HTML 5— 28 октября 2014 года
HTML 5.1 начал разрабатываться примерно 19 декабря 2012 года.

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

Основная структура HTML-документа состоит из заглавия и тела.

В работе приведены примеры простого HTML-документа.

Наиболее популярными и удобными текстовыми редакторами названы: Atom, Brackets, Notepad++, SublimeText. Также в этих целях можно использовать среды разработки: PHPStorm, Netbeans, Eclipse, Lobster, а также визуальные редакторы: Adobe Dreamweaver, Adobe Muse, Macaw. Был создан документ HTML5.

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

Mark J. Collins (2017) Pro HTML5 with CSS, JavaScript, and Multimedia: Complete Website Development and Best Practices, 568 p.
Notepad++ – бесплатный редактор Html, PHP и другого кода с подсветкой синтаксиса, а так же обзор его плагинов и возможностей [Электронный ресурс] / Режим доступа: http://ktonanovenkogo.ru/vokrug-da-okolo/programs/notepad-plus-plus-tekstovyj-redaktor-podsvetkoj-sintaksisa-skachat-ustanovit-nastroit.html (дата обращения 10.07.2020).
Алексеев В.М. Язык программирования HTML5: Учебно-методическое пособие. – М.: РУТ (МИИТ). 2019 г. – 159 с.
Борцова Д. Э. Основные этапы и направления развития современного гипертекста / Д. Э. Борцова, А. А. Неделькин, Л. А. Оленев // Славянский форум. 2015. № 2 (8). С. 50-59.
Внукова Л.А. Разработка Web-страниц: Основы языка HTML/ Л.А. Внукова, С.А. Зырянова: Учебно-методическое пособие. – Омск: Изд-во СибАДИ, 2003. – 116 с.
Зудилова Т. В. Web-программирование HTML / Т. В. Зудилова, М. Л. Буркова - СПб: НИУ ИТМО, 2012. – 70 с.
Неделькин А. А. Возможности использования гипертекстов и история их развития / А. А. Неделькин // Славянский форум. 2015. № 3 (9). С. 190-199.
Неделькин А. А. Современный гипертекст и гипертекстовые системы / А. А. Неделькин // Известия российского экономического университета им. Г. В. Плеханова. Из-тво: Российский экономический университет имени Г. В. Плеханова (Москва). – 2015. – С. 75 -82.
Основы гипертекстовых технологий: учеб-метод. пособие / С. Ф. Липницкий. Л. В. Степуро, М. С. Шибут; под общ. ред. С. Ф. Липницкого. - Минск: Ин-т подготовки науч. кадров НАН Беларуси, 2011. – 71 с.
Основы языка гипертекстовой разметки HTML и CSS: Учебное пособие/Сост. С. М. Наместников. – Ульяновск: УлГТУ, 2014. – 116 с.
Основы языка гипертекстовой разметки HTML и CSS: Учебное пособие/Сост. С. М. Наместников. - Ульяновск: УлГТУ, 2014. – С. 23.
Петренко Б. В. Гипертекст как электронная коммуникация [Электронный ресурс] / Б. В. Петренко, И. В. Шкиренок // Режим доступа: http://repository.buk.by:8080/jspui/bitstream/123456789/2261/1/gipertekst%20kak%20e'lektronnaya%20kommunikaciya.pdf (Дата обращения 10.07.2020)
Росс В. С. Создание сайтов: HTML, CSS, PHP, MySQL. Учебное пособие, ч. 1 / В. С. Росс - МГДД(Ю)Т, М. - 2010 – С. 21 - 22.
Рязанцева, Т. И. Гипертекст и электронная коммуникация / Т. И. Рязанцева. - М.: ЛКИ, 2010. - 256 с.
Солодушкин, С. И. Web и DHTML: учеб. пособие / С. И. Солодушкин, И. Ф. Юманова; [науч. ред. В. Г. Пименов]; М-во образования и науки Рос. Федерации, Урал. федер. ун-т. — Екатеринбург: Изд-во Урал. ун-та, 2018. – 128 с.

Основы языка гипертекстовой разметки HTML и CSS: Учебное пособие/Сост. С. М. Наместников. - Ульяновск: УлГТУ, 2014. – С. 23. ↑
Основы языка гипертекстовой разметки HTML и CSS: Учебное пособие/Сост. С. М. Наместников. - Ульяновск: УлГТУ, 2014. – С. 23. ↑
Росс В. С. Создание сайтов: HTML, CSS, PHP, MySQL. Учебное пособие, ч. 1 / В. С. Росс — МГДД(Ю)Т, М. - 2010 – С. 21 - 22. ↑