Содержание:

Введение

Актуальность. Собственно, появление html и ознаменовало появление интернета в том виде, в котором мы его знаем сейчас, приведя к началу бурного роста сети и количества сайтов в ней.

HTML - это сокращение от англ. "HyperText Markup Language", что в переводе на русский означает "язык гипертекстовой разметки". HTML - это стандартный язык, который и по сей день используется для создания веб-страниц, размещаемых в интернете.

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

Цель работы – изучить языки гипертекстовой разметки.

Достижение указанной цели определило постановку и решение следующих задач:

• исследовать историю языков разметки;
• изучить языков разметки на примере HTML;
• привести пример использования HTML.

Предметом исследования можно назвать языки гипертекстовой разметки.

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

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

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

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

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

1.1. История языков разметки

Начало истории HTML было положено Чарльзом Гольдфарбом в 1969 г., когда он создал для компании IBM прототип языка разметки технической документации GML (Generalized Marckup Language - обобщенный язык разметки), которому в 1986 г. был придан статус международного стандарта SGML (Standart GML). Этот обобщенный язык предназначен для построения систем логической, структурной разметки любых разновидностей текста. Структурная разметка в данном случае означает, что управляющие коды, вносимые в текст при такой разметке, не несут никакой информации о форматировании документа, а лишь указывают границы и соподчиненность его составных частей^[1].

После создания Тимом Бернес-Ли в 1989 г. первого браузера многие коммерческие компании подхватили эту инициативу и стали выпускать свои браузеры и к ним свои собственные расширения языка HTML.

Каждая из компаний стремилась сделать свой браузер самым лучшим и удобным, и вводила в его интерпретатор собственные новые элементы, отвечающие за визуальную разметку страниц. Делалось это с целью привлечь пользователей и разработчиков веб-страниц к собственному продукту. Тем самым основная прелесть HTML - "платформенно-независимое отображение документа" - была утеряна^[2].

С начала 1994 г. наблюдается всплеск активности фирмы Netscape. Основатели этой компании, в прошлом разработчики в NCSCA (National Center for SuperComputer Applications - Национальный Центр Суперкомпьютерных приложений), были создателями первого графического браузера Mosaic и имели большой опыт в разработке графических браузеров.

Программа Mosaic была единственной в то время браузером поддерживающим графические возможности. Она была разработана в Национальном центре суперкомпьютерных приложений США (National Center for Supercomputer Applications - NCSA), там же, кстати, была разработана WWW (World Wide Web). По этой причине никаких противоречий между официальными стандартами и их реализацией в браузерах тогда не существовало^[3].

Для повышения популярности собственного продукта - Netscape Navigator, были разработаны "Расширения Netscape для HTML". Это дало свои плоды, - к концу 1995 г. компания завоевала до 90% рынка браузеров.

С небольшим запозданием на этот рынок пришла фирма Microsoft. Версия Internet Explorer 2.0 не представляла ничего выдающегося по сравнению с той же версией Netscape Navigator (которая действительно была второй), включавшей в себя интерфейс подключаемых модулей, поддержку Java-апплетов (программ на языке Java, подробнее смотрите раздел Java), встроенный язык сценариев JavaScript, возможности разбивки окна браузера на фреймы и многое другое.

В результате назревала проблема несовместимости браузеров. Динамично растущей Сети грозил хаос.

В апреле 1994 года был образован Консорциум W3C (World Wide Web Consortium). Так как официальной спецификации HTML 1.0 не существовало, W3C начал заниматься подготовкой спецификации HTML следующей версии. Но чтобы стандартная версия отличалась от всех предыдущих, ей сразу присвоили номер 2.0. Разработка спецификации HTML 2.0 шла не спеша и лишь в сентябре 1995 года она была утверждена. Из больших дополнений был добавлен лишь механизм форм для отсылки информации с компьютера пользователя на сервер^[4].

Тем временем Консорциум W3 в параллель со спецификацией 2.0 занимался обсуждением HTML 3.0. Она была предложена в марте 1995 года. Третья версия предлагала много новых возможностей: поддержка таблиц, обтекание изображения текстом, отображение сложных математических формул, примечания. Поддержка этого стандарта браузерами того времени была не удовлетворена.

В 1996 г. W3C объявил о сотрудничестве с лидерами рынка для установления стандартов совместимости программного обеспечения. Была предложена версия HTML 3.2, которая стала компромиссным решением - попыткой примирить Microsoft и Netscape и ибъединить их оригинальные решения в одно целое^[5].

Если первая версия языка (HTML 1.0) была направлена на предсталение языка как такового, где описание его возможностей носило скорее рекомендаельный характер, вторая версия языка (HMTL 2.0) фиксировала практику использования конструкций языка, версия + (HTML +, она же "замороженная" в силу недоработанности HTML 3.0) представляла новые возможности, расширяя набор элементов HTML в сторону отображения научной информации и таблиц, а также улучшение стиля компоновки изображений и текста, то версия HTML 3.2 призвана упорядочить все нововведения и согласовать их с существующей практикой. Кроме того, в версии 3.2 снова делается попытка флрмализации интерфейса пользователя гипертекстовой распределенной системы. По сравнению с версией 2.0, HTML 3.2 позволяет реализовать отображение таблиц, выполнение мобильных кодов, обтекание графики текстом, а также отображение верхних и нижних индексов.

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

В 1997 г. Консорциум W3C опубликовал спецификацию языка HTML 4.0, в которой указано, какие из элементов устарели и не рекомендуются к дальнейшему применению (APPLET, BASEFONT, CENTER, DIR, FONT, ISINDEX, MENU, S, I, STRIKE и U), а также новые элементы и атрибуты (ABBR, ACRONYM, BDO, BUTTON, COLGROUP, DEL, FIELDSET, FRAME, FRAMESET, IFRAME, INS, LABEL, LEGEND, NOFRAMES, NOSCRIPT, OBJECT, OPTGROUP, PARAM, SPAN, TBODY, TFOOT, THEAD и Q), которые предлагается использовать в дальнейшем^[6].

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

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

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

Кроме возможностей разметки текста, включения мультимедиа и формирования гипертекстовых связей, уже существовавших в предыдущих версиях HTML, в версию 4.0 включены дополнительные срества работы с мультимедиа, языки программирования, таблицы стилей, упрощенные средства печати изображений и документов, которые становятся более доступными для всех пользователей HTML 4.0. Эти дополнения служат интернационализации WWW и распространению ее по всему миру. Кроме того, для управления сценариями просмотра страниц web-сайта можно использовать языки программирования этих сценариев типа JavaScript, Java и VBScript.

В 2014 году был завершен стандарт HTML 5, который кардинально отличается от прошлых версий HTML.

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

Но уже сейчас стоит соблюдать некоторые правила этого языка (такие как использование парных тэгов и внешнее определение форматирования), поскольку XML из свода правил, из не слишком понятной и сложной для рядового пользователя технологии "дорос" к 2000г. до четырех вариантов реализации^[7]:

• Собственно XML как правила построения настраиваемого и расширяемого языка разметки
• XHTML 1.0 (eXtensible HTML) - рекомендован к использованию 26 января 2000г. как переопределение спецификации HTML 4.01 в терминах XML
• XHTML 1.1 - модульный подход, ориентированный на быстрое создание интерпретаторов языка с любым доопределением или уменьшением дескрипторов исходного
• XHTML Basic - облегченная версия, рассчитаннная на мобильных пользователей (по оценкам W3C, в 2002г. 75% информации в Internet будет просматриваться с мобильных клиентов: телефоны, карманные компьютеры и т.п.).

1.2. Языки разметки

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

HTML (от англ. Hypertext Markup Language — «язык разметки гипертекста») — это стандартный язык разметки документов в Интернете. Все веб-страницы создаются при помощи языка HTML (или XHTML). Текстовые документы, содержащие код на языке HTML (такие документы традиционно имеют расширение «html» или «htm»), обрабатываются браузером. Интернет-обозреватель, или браузер, обычно предоставляет пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Internet Explorer, Mozilla Firefox, Opera и Safari.

С помощью языка HTML вы можете: сделать текст полужирным, курсивным или подчёркнутым; вставить специальные символы (выходящие за рамки ASCII символы пунктуации, математические символы, греческие и готические буквы, стрелки и т.п.); поменять начертание, цвет шрифта; выровнять текст по центру, левому/правому краю, по ширине; оформить текст как гиперссылку на другую страницу или файл; нарисовать таблицу.

XML (англ. eXtensible Markup Language -расширяемый язык разметки). Свое название XML получил по той причине, что в нем нет фиксированного формата, как в HTML. В то время как язык HTML ограничивается набором твердо закрепленных тегов, пользователи XML могут создавать свои собственные тэги, которые бы отвечали тематике документа. Таким образом, XML — это метаязык. Этот язык используется в качестве средства для описания грамматики других языков и контроля за правильностью составления документов.

Документ XML выглядит во многом похожим на HTML. В XML существуют открывающие, закрывающие и пустые тэги. Однако, в отличие от HTML, правила относительно тегов более строгие. Например, смысл тега зависит от регистра, а каждый открывающий тег должен во всех случаях иметь парный закрывающий тег. Кроме того, теги в документе могут быть вложены друг в друга^[8].

XML служит для хранения, передачи и обмена данными. С помощью XML вы можете осуществить обмен данными даже между несовместимыми системами. В настоящее время компьютеры и базы данных хранят информацию в самых разнообразных и несовместимых форматах. Преобразование данных в XML формат сделает данные доступными для самых различных типов программ^[9].

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

Wiki-разметка максимально проста: основные её правила, достаточные для редактирования и создания новых материалов, можно узнать за считанные минуты. В Wiki сохраняются все изменения, произошедших со всеми статьями с момента их создания. В любой момент можно сравнить две версии одной и той же статьи, увидеть, какие изменения были внесены, откорректировать страницу снова или просто вернуться к старой версии. Исправить нанесенный ущерб проще, чем его нанести. Ну и, конечно же, у администраторов всегда есть возможность заблокировать изменение той или иной страницы или разрешить редактирование только определенным пользователям. Одной из особенностей Wiki является гипертекстовость: связь страниц и подразделов сайта через контекстные гиперссылки.

BBCode (от англ. Bulletin Board Code) — язык разметки, используемый для форматирования сообщений на многих электронных досках объявлений (BBS), форумах, блогах, гостевых книгах и чатах. При создании сообщений, текст которых необходимо отформатировать, окружают специальными BBCode тегами — которые очень похожи на HTML-теги, но отличаются от последних тем, что заключены в квадратные скобки (“[ и ]”). BBCode был придуман с целью предоставить более простой, безопасный и ограниченный по сравнению с HTML способ форматирования сообщений. Первоначально на многих форумах использовалась HTML-разметка, что могло приводить к побочным эффектам: искажению разметки на странице или же к запуску JavaScript-сценариев^[10].

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

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

Глава 2. Изучение языков разметки на примере HTML

2.1. Преимущества и недостатки языка HTML

Использование языка программирования нового поколения позволяет создавать веб-документы с более простой структурой и чистым кодом. В отличие от предыдущей версии, пятое поколение языка программирования использует вместо контейнеров div семантические элементы nav, article, header, footer, aside и section. Ко всему прочему, HTML5 существенно облегчает работу с файлами мультимедиа: так, пользователи могут слушать музыку и смотреть видео прямо в браузере без использования Adobe Flash и прочих приложений. Дополнительные программы не потребуются и при размещении фотографий и прочей графики. Метаморфозы затронули также процесс ввода данных, который в пятом поколении языка программирования стал намного проще и безопаснее^[11].

Если в предыдущей версии система сообщала об ошибке ввода данных постфактум, то теперь пользователь будет оповещён незамедлительно, что снимет массу проблем, связанных с отправкой неверно составленных документов. Что касается внешнего вида, то новый язык программирования существенно расширяет возможности оформления сайтов и приложений, за счёт чего html 5 игры и сайты станут ещё более оригинальными и интересными. Благодаря новой функции Canvas, которая реализована в пятой версии веб-языка, можно будет размещать на сайтах небольшие html 5 игры, анимацию и динамическую графику без использования дополнительных программ.К тому же данная функция позволяет создавать качественно новые html 5 игры и пользовательские интерфейсы^[12].

Одним из тонких мест нового поколения веб-языка является защита данных. При использовании HTML 5 на винчестере пользователя долгое время хранится большой объём данных, что позволяет злоумышленникам осуществлять несанкционированный доступ к ресурсам компьютера с целью сбора конфиденциальной информации. Некоторая уязвимость HTML 5 имеет место быть и в сфере игр. Так, контент не может похвастаться высокой производительностью, платформы весьма ограничены в своём применении, а на создание контента с использованием HTML 5 требует больших затрат ресурсов и времени^[13].

Ко всему прочему, до недавнего времени поддержкой HTML 5 могли похвастаться далеко не все браузеры. Несмотря на то, что сегодня ситуация в корне изменилась, и теперь абсолютное большинство программ распознают пятое поколения языка программирования, всё же остаются единичные экземпляры, которые с ним до сих пор не знакомы. Самым совместимым с HTML 5 считается браузера Chrom, а именно его 18-я версия. Программа, создателем которой является Google, имеет модуль Canvas 2D, который существенно облегчает работу в ресурсами, разработанными с помощью HTML 5. Впрочем, недостатки новой версии языка программирования не снижают его популярности даже среди таких гигантов, как YouTube, Google и т.д., которые активно осваивают данную веб-технологию.

Огромный вклад в расширение практического использования нового языка программирования сделала корпорация Google, которая любезно предоставила свои стартовые страницы, чтобы рекламировать на них html 5 игры, сайты и веб-приложения. Ярким примером использования расширенных возможностей языка является страничка http://www.google.com.hk/intl/zh-CN/landing/shuixia/, которая предназначена для поздравления жителей Гонконга. Если пощёлкать компьютерной мышкой ниже вотерлинии, то обычная стартовая страница Google превратится в островок удовольствия.

Ещё один пример применения возможностей HTML 5 в Google – это визуализация главной странички в форме аркадной игрушки в духе Кибериады, что было сделано в честь дня рождения Станислава Лемма. Для того, чтобы освоить весь безграничный потенциал нового языка Интернета, необходимо пройти курс обучения. Желательно, чтобы обучение происходило в игровой форме. Такую уникальную возможность предоставляет сайт http://html5game.ru/, который радует пользователей с самой первой страницы – наводя мышку на шапку, можно с удовольствием наблюдать, как она разлетается на сотни шариков, а потом вновь возвращается в своё исходное состояние^[14].

В учебных целях сайт предлагает широкий инструментарий по созданию html 5 игр, а это, как известно, лучший способ освоить новый язык программирования. Немалую обучающую ценность несёт в себе графический редактор http://www.picozu.com/editor, который позволяет рисовать, пользуясь инструментарием, разработанным в HTML5.

2.2. Синтаксический анализатор HTML в браузерах

Задача синтаксического анализатора HTML – разобрать исходный текст HTML файла и на его основе построить синтаксическое дерево. К сожалению, ни один из стандартных анализаторов не подходит для языка HTML. HTML невозможно определить с помощью контекстно-свободной (бесконтекстной) грамматики, с которой работают автоматические синтаксические анализаторы.

Существует формальный стандарт определения HTML – формат DTD (Document Type Definition), однако его грамматика не является бесконтекстной. На первый взгляд это может показаться странным, так как язык HTML во многом схож с XML; кроме того, оба этих языка произошли от стандартного обобщенного языка разметки SGML. В ходе развития технологий разработки web-документов язык HTML совершенствовался и, начиная с версии HTML4, перестал полностью соответствовать структуре языка SGML. Кроме того, синтаксис языка перестал быть строгим: вместе с развитием Интернета браузеры научились исправлять за разработчиками разного рода ошибки, например, потерянные теги (открывающие или закрывающие). Все эти нововведения привели к тому, что для современного HTML становится очень сложно формально определить грамматику^[15].

Таким образом, грамматика HTML не является контекстно-свободной, поэтому его анализ нельзя выполнить ни с помощью стандартно сгенерированных анализаторов, ни с помощью анализаторов для языка XML. Полученное синтаксическое дерево называют DOM-деревом. DOM – объектная модель документа (Document Object Model) – служит для описания структуры и представления HTML-документа. Кроме того, DOM-дерево является главным интерфейсом взаимодействия для внешних объектов, таких как Javascript код.

Модель DOM практически идентична разметке. Рассмотрим небольшой пример разметки (рис. 1):

Рисунок 1. HTML-код

На рисунке 2 представлено DOM-дерево для данной разметки.

Рисунок 2. DOM-дерево

Спецификации DOM, как и сам язык HTML, разрабатывает World Wide Web Consortium (W3C). Это универсальная спецификация для работы с документами. В специальном модуле описаны элементы, характерные для HTML. Под словами "дерево содержит узлы DOM" подразумевается, что дерево состоит из элементов, которые реализуют один из интерфейсов DOM. В браузерах применяются специфические реализации, обладающие дополнительными атрибутами для внутреннего использования.

Рассмотрим этапы создания дерева для следующего примера (рис. 3):

Рисунок 3. Пример HTML-кода

1. Начальное состояние анализатора – исходное состояние: последовательность токенов, полученная в результате лексического анализа;

2. Анализатор получает токен "html". Состояние меняется на "до html", после чего токен обрабатывается еще раз, но уже в новом состоянии;

3. Анализатор создает элемент HTMLHtmlElement и добавляет его к корневому объекту Document. Состояние меняется на "до head";

4. Анализатор получает токен "body". Несмотря на то, что в коде нет тега "head", элемент HTMLHeadElement будет автоматически создан и добавлен в дерево, так как элемент "head" является обязательным. Состояние меняется на "внутри head" и сразу же на "после head". После повторной обработки токена "body" элемент HTMLBodyElement создается и добавляется в дерево. Состояние меняется на "внутри body";

5. Анализатор получает первый токен строки "Пустой документ", что ведет к созданию узла Text и добавление его к объекту HTMLBodyElement. Далее к созданному узлу добавляются остальные символы;

6. Анализатор получает закрывающий токен "body". Состояние меняется на "после body";

7. Анализатор получает закрывающий токен "html". Состояние меняется на "после после body";

8. Как только будет получен токен конца файла (EOF), анализ завершается.

2.3. Возможности применения технологии HTML в образовательном процессе

В современном мире всё большее влияние на различные сферы деятельности оказывает Всемирная сеть. Раньше любую информацию (новости, познавательные и развлекательные программы) мы получали через радио, позднее – через телевизор, а сейчас, в основном, через Интернет.

Важную роль играет Сеть в образовательном процессе. Несмотря на растущую популярность клиент-приложений для работы с каким-либо сайтом, основным способом взаимодействия с ресурсами Интернет был и остаётся браузер. Основным способом интерпретации ресурса является язык гипертекстовой разметки HTML. Язык HTML был разработан британским учёным Тимом Бернерсом-Ли в 1986-1991 годах в Женеве в Швейцарии. HTML создавался как язык для обмена научной и технической документацией, для людей, не являющимися специалистами в области вёрстки.

Язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов – дескрипторов. Дескрипторы часто называют «тегами». HTML помогает создать простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже^[16].

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

Например, тег <table> предназначен для создания в документах таблиц, но иногда используется и для оформления размещения элементов на странице. С течением времени основная идея платформо-независимости языка HTML была принесена в жертву современным потребностям в мультимедийном и графическом оформлении^[17].

Применение технологии HTML в образовательном процессе можно использовать при обучении студентов работе с данным языком разметки. Это начальная ступень web-разработки и её изучение позволит заинтересовать студентов в этом направлении. А применение отдельных страниц и сайтов можно использовать для обучения. Здесь не имеются в виду уже существующие образовательные платформы и сайты. Наверное, самым необходимым online-ресурсом для студентов является расписание занятий (рисунок 4).

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

Рисунок 4. Пример расписания (расписание Центра среднего профессионального образования Елецкого Государственного Университета им. И. А. Бунина)

Предполагается разработка и внедрение индивидуальных проектов для каждого ВУЗа. Конечно, многие из них будут схожими, но необходимо учитывать специфику каждого отдельного учебного заведения на финальной стадии разработки. Другой возможностью применения HTML будет создание учебных пособий, методических указаний, лабораторных работ и других материалов для студентов. Многообразие способов визуализации материала позволит создать наиболее удобный формат подачи для каждого предмета и направления подготовки. Одним из наиболее востребованных возможностей языка разметки в создании учебных материалов – это гиперссылки. Они позволят связать в единую сеть всю программу курса или направления подготовки.

Вышеуказанная возможность применима как в онлайн, так и в оффлайн пространстве. Иной же способ применим только в онлайн. Это wikiпространство университета. В Сети существует множество wiki-проектов. Наиболее известный, конечно, Wikipedia, но существуют проекты, посвященные отраслям науки, искусства, произведениям литературы и кино. Да, в чём-то этот проект будет дублировать предыдущий, но, с другой точки зрения, wiki больше словарь и справочник, нежели учебник (рисунок 5). Таким образом, оба этих проекта имеют право на жизнь^[18].

Рисунок 5. Пример wiki-ресурса (Wiki-учебник)

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

Глава 3. Особенности создания информационного сайта образовательного учреждения

Создание информационного сайта образовательного учреждения с использованием языка гипертекстовой разметки HTML является сегодня востребованным и актуальным на рынке информационных услуг^[19].

Данный сайт позволит использовать для распространения информацию об образовательном учреждении (ОУ), будет способствовать формированию прогрессивного имиджа ОУ через его представление в Интернет-сообществе, поддерживать процесс информатизации в ОУ путем развития единого образовательного информационного пространства. Web-страницы должны содержать в себе технологии мультимедиа и объединять в себе различные виды информации: текст, графику, звук, анимацию и видео. Пользователю всегда приятно посещать те сайты, которые имеют стильное оформление, не отягощены чрезмерно графикой и анимацией, быстро загружаются и правильно отображаются в окне web-браузера.

Создание веб-сайта ОУ – это серьёзный и ответственный процесс, который состоит из нескольких стадий и требует пристального внимания, как со стороны заказчика, так и со стороны исполнителя заказа. Далеко не последнее значение имеет подготовка (предпроектный анализ), предшествующая разработке.

Успех сайта любого образовательного учреждения зависит от того, насколько правильно создатели смогли понять потребности аудитории, то есть ресурс сам по себе должен учитывать не только интересы самого учреждения, но и таких групп пользователей как учащихся, родителей и гостей. Существует несколько способов создания сайта (услуги фрилансеров, привлечение профессиональных веб-дизайнеров, использование конструктора) обладающих своими особенностями, преимуществами и недостатками. Профессиональный подход базируется на использовании системы управления контентом. В системе управления контентом могут находиться самые различные данные: документы, видеозаписи, фотографии, номера телефонов, научные данные и многое другое. Такая система часто используется для хранения, управления, пересмотра и публикации документации. Контроль версий является одним из основных её преимуществ, когда содержимое изменяется группой людей. Если раньше большинство сайтов были статичными и требовали внесения правок в их содержимое вручную, то сейчас динамика развития проектов требует готовности быстро реагировать на изменения и внедрять их с максимальной оперативностью^[20].

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

Механизм работы CMS заключён в схеме разделения содержимого сайта и его дизайна. Пользователю предоставляется возможность выбрать заготовку, которой заранее определено оформление страницы, и останется только заполнить его нужной информацией. Большинство систем управления контентом основывается на использовании визуального редактора — программы, которая позволяет посредством понятного интерфейса добавлять или изменять информацию на сайте^[21].

Стоит отметить, что сайт не состоит из совокупности страниц как таковой, а формируется динамически. Добавленный контент сохраняется в базе данных, и используется при генерации странички после получения соответствующего запроса со стороны клиента. Зачастую CMS используются для блогов, форумов (WordPress, phpBB, vBulletin); интернет-магазинов (Magento, OpenCart, osCommerce); социальных сетей (InstantCMS, Social Engine); персональных сайтов (WordPress, Monstra); корпоративных сайтов (Joomla, Drupal); порталов (DLE, Drupal). Большинство CMS гибко настраиваемы и могут быть использованы для разработки сайтов различной направленности, даже сайтов образовательных учреждений. Преимущества CMS: простота и удобство в использовании; доступ к широкому функционалу за счет дополнений, тем, расширений; возможность создать сайт за короткий промежуток времени; наличие документации^[22].

Для работы по созданию сайта нами был выбран язык гипертекстовой разметки, HTML – стандартизированный язык разметки документов в Интернете. Он отвечает за расположение в документе текстов, рисунков, и таблиц. В HTML нет логических функций, он читается программами-обозревателями (браузерами) и воспроизводят с помощью команд информацию в том виде, в котором многие люди привыкли видеть страницы в Интернете^[23].

Команды в HTML называются дескрипторами, или тегами. Тег (tag - указатель, метка) - это код, идентифицирующий определённый элемент документа, например: заголовок, ссылку, таблицу. Теги заключаются в угловые скобки. Большинство тегов являются парными, то есть для каждого начального тега <Имя> есть конечный тег </Имя>, в котором к имени тега добавляется косая черта "/" (слеш).

Таким образом, то, что написано между <…> - называется тегами, они не видны читателю, заглянувшему на страницу, но хорошо видны браузеру, который видит тег <html> и понимает его как сигнал к тому, что далее будет документ, который необходимо прочитать и вывести на монитор в нужном виде. В свою очередь тег </html> говорит о том, что документ закончился и от браузера больше ничего не требуется, поэтому он может не производить считывающих действий. Каскадные таблицы стилей (Cascading Style Sheets, CSS) — это язык, отвечающий за визуальное представление документов пользователю. У внешней таблицы стилей имеются свои особые преимущества. Сохранение стилей отдельно от содержания HTML поможет избежать дублирования; облегчит обслуживание; позволит делать изменения для всего сайта в одном месте^[24].

Приступая к разработке сайта-визитной карточки Центра среднего профессионального образования Елецкого Государственного Университета им. И. А. Бунина мы выделили содержательный и эстетический компоненты. Сайт будет содержать основную информацию о Центре СПО (учебную, научную, воспитательную), контакты, фотоматериалы и возможность перехода на основной сайт ЕГУ и Центра СПО. Писать сайт на языке HTML можно в текстовом редакторе «Блокнот», который входит в набор стандартных программ любой операционной системы, поэтому в ходе работы мы будем пользоваться им, а также текстовым редактором Notepad++ для представления кода в более удобном для восприятия виде.

Перед началом работы с текстовым редактором, мы составили макет самого сайта. Перед работой с кодом сайта определяем основные теги, которые мы будем использовать: html - корневой тег документа, который является контейнером веб-страницы; head - в этом теге указываются основные данные, которые касаются генерации веб-страницы (заголовок, стили, мета-теги и так далее); body - основной тег страницы; <!DOCTYPE html> - указывает на тип документа (Doctype); meta - используется для указания метаданных страницы; title - задает непосредственный заголовок страницы (Тег title); H1 - заголовок страницы/статьи (подзаголовки задаются тегами H2H6); P - тег, с помощью которого выделяются абзацы в тексте страницы. HTMLстраницы сайта имеют древовидную структуру. Одни теги могут быть вложены в другие, а те, в свою очередь, - в ещё одни. Это значит, что структура документа определена достаточно четко. Открывающиеся теги (<html>, <head>, <body>) обязательно должны иметь закрывающую пару (</html>, </head>, </body>).

Самый первый тег в нашем коде <html>, а самый последний </html>. Они обозначают границы HTML-документа.

Рисунок 6. Начало кода

Следующий тег <HEAD>. Элемент HEAD обозначает заголовочную часть, и предоставляет браузеру общую информацию о HTML-файле. Под ним с помощью <title> и </title> создадим название страницы, это будет «ЕГУ:: Центр СПО». Сюда ещё вложен элемент meta. Он предназначен для поисковых роботов. Когда поисковый робот обнаружит новый сайт в Интернете, он просмотрит содержимое тегов <meta> и включит указанные ключевые слова (чёрного цвета) в свою базу данных. После заголовочной части идёт тег <body>, и второй снизу конечный тег </body>.

Рисунок 7. <Head> и <meta> теги

Всё, что находится между этими тегами, является телом документа.

Стоит дополнить этот тег атрибутом background со ссылкой на изображение, создав, таким образом, фон для сайта. Получится <body background=”fon.jpg”>. Ниже будет идти конструкция - table (таблица) с атрибутами bgcolor (цвет фона таблицы), border (толщина внешней рамки), width (ширина таблицы в пикселях), align (выравнивание по горизонтали). Цветом фона таблиц выберем белый, ширину зададим в 900 пикселей, выравнивание по центру. Толщина внешней рамки будет равна единице. Далее необходимо добавить строки. Тег <tr> служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега <th> или <td>. Закрывающий тег использовать не обязательно.

Теперь теги дополняем атрибутами <tr width (ширина ячеек данной строки), height (высота)>; colspan (объединение соседних ячеек); valign (выравнивание содержимого по вертикали), top (выравнивание по верхнему краю), bottom (по нижнему), middle (центрирование). В первой клетке «таблицы» укажем, что это «Информационный сайт Центра СПО» и сделаем выравнивание слева. Вторая строка будет ссылкой на сайт ЕГУ им. И.А. Бунина.

Создадим ссылку с помощью href. Этот атрибут задает адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью атрибута target. Атрибут является обязательным для ссылок. В нашем случае, мы просто укажем внутри атрибута ссылку на сайт университета. Теперь при нажатии на кнопку, пользователь перейдёт по ссылке.

Далее проделаем подобные манипуляции, сделав в третьей клетке ссылку на основной сайт Центра СПО. Теперь нужно добавить фотографии на сайт. С помощью строк и элемента img, задав параметры width и height, укажем путь к нашей фотографии. Пусть это будет фотография с выступления студентов СПО на Дне открытых дверей ЕГУ.

Рисунок 8. Добавление изображений

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

Рисунок 9. Результат работы с кодом

В последнюю ячейку таблицы добавим скриншот сайта СПО и сделаем так, чтобы при нажатии на картинку осуществлялся переход на данный сайт. Это поможет создать больше взаимодействия с сайтом. Теперь предстоит оформить следующую часть сайта, а именно описание и основную информацию о заведении. При помощи <p> создаём абзацы для текста и заполняем их информацией о нашем учебном учреждении. Первый абзац будет играть роль заголовка, который будет указывать на текст ниже. Второй и третий абзац занимаем информацией об учебном учреждении. Как и планировалось, для удобного и гармоничного вида хватило двух абзацев.

Добавим картинку для фона, чтобы фон сайта не выглядел голым. Для этого скачиваем изображение и переименовываем его в «fon.jpg», чтобы оно правильно было принято программой и задействовано в нашей странице. Теперь можно добавить поля с контактной информацией (адресом электронной почты) и адресом учебного корпуса. Снова, используя <td>, создаём две надписи и помещаем туда нашу информацию. К каждой надписи добавим ссылку на почту Центра СПО для возможности контактировать с руководством.

Рисунок 10. Добавление контактной информации

На этом основная работа по созданию сайта заканчивается и остаётся лишь изменить код. Среди изменений для возможного дальнейшего применения сайта выделим форматирование текста в информационном блоке и добавление логотипа Центра СПО как изображения для вкладки с сайтом. Таким образом, нам удалось разработать сайт образовательного учреждения, используя текстовые редакторы Блокнот и Notepad++, а также Photoshop CS5 для корректировки изображений.

Заключение

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

Мы рассмотрели 5 языков разметки: HTML, XML, Wiki, BBcod и Textile.

Более подробно рассмотрели самый известный язык гипертекстовой разметки. В 1991 году, британским ученым Тимом Бернерсом Ли, сотрудником Европейского института физики частиц (CERN) в Женеве, была разработана система передачи гипертекстовой информации через интернет. А за основу нового языка был взят SGML. Язык разметки гипертекста был назван - HTML (Hyper Text Markup Language) и он является до сих пор самым известным из приложений SGML. HTML в первую очередь был разработан для обмена научной и технической документации для использования людьми, не являющимися специалистами в области верстки. Последняя версия языка это HTML 5.0.

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

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

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

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

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

1. Бен, Ф. HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств. – СПб.: Издательство ООО «Питер-Пресс», 2017. - 272 с.
2. Брайан, Х. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. - СПб.: "Издательский дом "Питер", 2014. – 320 с.
3. Дакетт, Д. HTML и CSS. Разработка и дизайн веб-сайтов / Д. Дакетт. - М.: Эксмо, 2015. - 480 c.
4. Джон Дакетт «Основы веб-программирования с использованием HTML, XHTML и CSS» - Эксмо, 2016. - 768 c.
5. Дронов, В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / В. Дронов. - М.: БХВ-Петербург, 2014. - 138 c.
6. Егорова Ю.Н., Мытникова Е.А., Мытников А.Н., Егорова О.А. Программный комплекс оценки угроз информационной безопасности информационных систем как эффективное средство формирования профессиональных компетентностей бакалавров по дисциплине «Информационная безопасность»//Современные наукоемкие технологии. — 2016. — № 4-1. — С. 109-113.
7. Прохоренок, Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н.А. Прохоренок, В.А. Дронов. - Москва: СПб. [и др.] : Питер, 2015. - 768 c.
8. Ташков П, «Веб-мастеринг HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка» - Книга по Требованию, 2017. - 512 c.
9. Титтел, Э. HTML, XHTML и CSS для чайников, 7-е издание = HTML, XHTML & CSS For Dummies, 7th Edition / Эд Титтел, Джефф Ноубл. – М.: «Диалектика», 2011. – 400 с. 3
10. Фельке-Моррис, Т. Большая книга веб-дизайна: М.: Издательство «ЭКСМО», 2012. – 608 с.
11. Фримен, Э. Изучаем HTML, XHTML и CSS = Head First HTML with CSS & XHTML / Э. Фримен, Э. Фримен. – П.: «Питер», 2010. – 656 с.
12. Шафер, С. HTML, XHTML и CSS. Библия пользователя, 5-е издание = HTML, XHTML, and CSS Bible, 5th Edition / Стивен Шафер. – М.: «Диалектика», 2010. – 656 с.
13. Язык HTML. История развития – [Электронный ресурс]. URL: http://preal.ru/under/yazyk-html-istoriya-razvitiya/(дата обращения: 06.11.2019)
14. Garsiel, T. How Browsers Work: Behind the scenes of modern web browsers / T. Garsiel, P. Irish. – Режим доступа: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ (Дата обращения: 07.11.2019)
15. HTML 5: нововведения, преимущества и недостатки http://ua-blogger.com/html-5-novovvedeniya-preimuschestva-i-nedostatki.html дата обращения (06.11.2019)
16. HTML 5: эволюция мутаций, или куда доведет язык [Электронный ресурс]/Режим доступа URL: http://sotoman.ru/reviews/ID_987.html дата обращения (06.11.2019)
17. HTML- история развития языка разметки гипертекста – [Электронный ресурс]. URL: http://www.castcom.ru/publications/web/html_istoriya_razvitiya_yazyka_razmetki_giperteksta.html(дата обращения: 06.11.2019)
18. Краткая история HTML– [Электронный ресурс]. URL: http://htmleditors.ru/Rasnoe/history/history1.html(дата обращения: 06.11.2019)
19. Краткая история языков HTML и XHTML– [Электронный ресурс]. URL: http://html-5.ru/istoriya-html5 (дата обращения: 06.11.2019)
20. Помощь по BBCode– [Электронный ресурс]. URL: http://eko-fazenda.ru/forum/faq.php?mode=bbcode (дата обращения: 06.11.2019)
21. Что такое HTML и XHTML? История. – [Электронный ресурс]. URL: http://monetavinternete.ru/sozdaem-sajt-s-nulya/osnovy-html/chto-takoe-html-xhtml-istoria/ (дата обращения: 06.11.2019)

1. HTML- история развития языка разметки гипертекста – [Электронный ресурс]. URL: http://www.castcom.ru/publications/web/html_istoriya_razvitiya_yazyka_razmetki_giperteksta.html(дата обращения: 06.11.2019)

   ↑

2. Краткая история HTML– [Электронный ресурс]. URL: http://htmleditors.ru/Rasnoe/history/history1.html(дата обращения: 06.11.2019) ↑

3. Прохоренок, Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н.А. Прохоренок, В.А. Дронов. - Москва: СПб. [и др.] : Питер, 2015. - 768 c. ↑

4. Дронов, В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / В. Дронов. - М.: БХВ-Петербург, 2014. - 138 c. ↑

5. Язык HTML. История развития – [Электронный ресурс]. URL: http://preal.ru/under/yazyk-html-istoriya-razvitiya/(дата обращения: 06.11.2019) ↑

6. Краткая история языков HTML и XHTML– [Электронный ресурс]. URL: http://html-5.ru/istoriya-html5 (дата обращения: 06.11.2019)

   ↑

7. Что такое HTML и XHTML? История. – [Электронный ресурс]. URL: http://monetavinternete.ru/sozdaem-sajt-s-nulya/osnovy-html/chto-takoe-html-xhtml-istoria/ (дата обращения: 06.11.2019) ↑

8. Джон Дакетт «Основы веб-программирования с использованием HTML, XHTML и CSS» - Эксмо, 2016. - 768 c. ↑

9. Ташков П, «Веб-мастеринг HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка» - Книга по Требованию, 2017. - 512 c. ↑

10. Помощь по BBCode– [Электронный ресурс]. URL: http://eko-fazenda.ru/forum/faq.php?mode=bbcode (дата обращения: 06.11.2019) ↑

11. Егорова Ю.Н., Мытникова Е.А., Мытников А.Н., Егорова О.А. Программный комплекс оценки угроз информационной безопасности информационных систем как эффективное средство формирования профессиональных компетентностей бакалавров по дисциплине «Информационная безопасность»//Современные наукоемкие технологии. — 2016. — № 4-1. — С. 109-113. ↑

12. HTML 5: эволюция мутаций, или куда доведет язык [Электронный ресурс]/Режим доступа URL: http://sotoman.ru/reviews/ID_987.html дата обращения (06.11.2019) ↑

13. HTML 5: нововведения, преимущества и недостатки http://ua-blogger.com/html-5-novovvedeniya-preimuschestva-i-nedostatki.html дата обращения (06.11.2019)

    ↑

14. Дакетт, Д. HTML и CSS. Разработка и дизайн веб-сайтов / Д. Дакетт. - М.: Эксмо, 2015. - 480 c. ↑

15. Garsiel, T. How Browsers Work: Behind the scenes of modern web browsers / T. Garsiel, P. Irish. – Режим доступа: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ (Дата обращения: 07.11.2019) ↑

16. Фримен, Э. Изучаем HTML, XHTML и CSS = Head First HTML with CSS & XHTML / Э. Фримен, Э. Фримен. – П.: «Питер», 2010. – 656 с. ↑

17. Титтел, Э. HTML, XHTML и CSS для чайников, 7-е издание = HTML, XHTML & CSS For Dummies, 7th Edition / Эд Титтел, Джефф Ноубл. – М.: «Диалектика», 2011. – 400 с. 3 ↑

18. Шафер, С. HTML, XHTML и CSS. Библия пользователя, 5-е издание = HTML, XHTML, and CSS Bible, 5th Edition / Стивен Шафер. – М.: «Диалектика», 2010. – 656 с. ↑

19. Фельке-Моррис, Т. Большая книга веб-дизайна: М.: Издательство «ЭКСМО», 2012. – 608 с. ↑

20. Фельке-Моррис, Т. Большая книга веб-дизайна: М.: Издательство «ЭКСМО», 2012. – 608 с. ↑

21. Брайан, Х. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. - СПб.: "Издательский дом "Питер", 2014. – 320 с. ↑

22. Брайан, Х. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. - СПб.: "Издательский дом "Питер", 2014. – 320 с. ↑

23. Бен, Ф. HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств. – СПб.: Издательство ООО «Питер-Пресс», 2017. - 272 с. ↑

24. Бен, Ф. HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств. – СПб.: Издательство ООО «Питер-Пресс», 2017. - 272 с. ↑