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

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

Содержание:

ВВЕДЕНИЕ

Язык гипертекстовой разметки HTML (HyperText Markup Language) был предложен в качестве одного из компонентов технологии разработки распределенной гипертекстовой системы World Wide Web.

Разработчики HTML пытались решить две задачи:

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

Первая задача была решена за счет выбора модели описания документа. Модель широко применяется в системах подготовки документов для печати. К моменту создания HTML существовал стандарт языка разметки печатных документов - Standard Generalised Markup Language, который и был взят в качестве основы HTML. Однако, будучи доступен широкому кругу пользователей Internet, HTML зажил своей собственной жизнью. Я думаю, что многие администраторы баз данных WWW и разработчики программного обеспечения для этой системы имеют представление о стандартном языке разметки SGML. Обобщенный язык разметки позволяет создавать документы, которые можно затем использовать для разных целей как-то: опубликование в виде обычных текстовых документов, создание архивов документов, и, конечно, опубликование на Internet.^{^[1]}

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

такой файл можно создать в любом текстовом редакторе на любой аппаратной платформе в среде любой операционной системы.
разработки сетевых информационных систем - Z39.50, в котором в качестве единицы хранения указывался простой текстовый файл в кодировке LATIN1, что соответствует US ASCII.

Таким образом, гипертекстовая база данных в концепции WWW - это набор текстовых файлов, написанных на языке HTML, который определяет форму представления информации и структуру связей этих файлов (гипертекстовые ссылки). В ней могут храниться и программы, написанные в соответствии со спецификацией CGI (Common Gateway Interface), и данные обычных баз данных под управлением СУБД, к которым обеспечивается доступ через программы-шлюзы, и Java-applet-ы, и графика и многое другое. Такой подход предполагает наличие еще одной компоненты технологии - интерпретатора языка. В World Wide Web функции интерпретатора разделены между сервером гипертекстовой базы данных и интерфейсом пользователя. Сервер кроме доступа к документам и обработки гипертекстовых ссылок осуществляет также препроцессорную обработку документов, в то время как интерфейс пользователя осуществляет интерпретацию конструкций языка, связанных с представлением информации. К настоящему времени известна уже третья версия языка - HTML 3.0, которая находится в стадии развития. Если первая версия языка (HTML 1.0) была направлена на представления языка как такового, где описание его возможностей носило скорее рекомендательный характер, вторая версия языка (HTML 2.0) фиксировала практику использования конструкций языка, расширяя набор элементов HTML в сторону отображения научной информации и таблиц, а также улучшения стиля компоновки изображений и текста, то третья версия призвана упорядочить все нововведения и согласовать их с существующей практикой. Кроме этого, в третьей версии снова делается попытка формализации интерфейса пользователя гипертекстовой распределенной системы.

ГЛАВА 1 Теоретические аспекты основ программирования ан языке HTML

1.1 История развития гипертекста

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

Гипертекст характеризуется нелинейной сетевой формой организации материала, разделенного на фрагменты, для каждого из которых указан переход к другим фрагментам по определенным типам связей. Особенностью гипертекстовой технологии является ее ориентация на обработку информации не вместо, а вместе с человеком, которая, как следствие, становится авторской. Удобство ее состоит в том, что пользователь сам определяет подход к освоению или созданию материала с учетом своих способностей, знаний и квалификации. Гипертекст содержит не только информацию, но и аппарат ее эффективного поиска. Таким образом, гипертекстовое представление информации обладает преимуществами перед обычным способом, позволяя производить ее более эффективное представление и усвоение.^{^[2]}

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

1) концепция гипертекстов является оригинальным способом представления, структурирования и передачи данных;

2) концепция гипертекстов продолжает развиваться и находить новые способы применения в процессах передачи информации между людьми;

3) гипертекстовые системы близки другому виду программных систем - базам данных: некоторые информационные задачи можно реализовать как в форме базы данных, так и в форме гипертекста. При этом одни информационные задачи предпочтительнее реализовывать как гипертексты, если они обладают относительно менее регулярной внутренней структурой, обилием текстовой информации, сложной системой перекрестных ссылок, а другие - в виде баз данных, если основная информация представлена в виде большого объема регулярных данных, важен быстрый поиск данных, необходимость постоянного изменения данных возможно в параллельном режиме и из разных мест.^{^[3]}

1.2 Сравнительный анализ языков разметки веб-страниц HTML4.0 И HTML5.0.

HTML – стандартный язык разметки документов во Всемирной паутине. Четвертая версия просуществовала более десяти лет. Технологии постоянно эволюционируют, и разработчикам сайтов требуется более легкий и расширенный функционал. Именно инструментарий HTML версии 5.0 предоставляет такой функционал создателям. Возможности новой версии HTML позволят создавать интерактивные сайты, подключать различный мультимедийный контент к веб-странице более удобными способами, работать с различными интерфейсами и многое другое. Контроль за разработкой соответствующих спецификаций по мере развития языка осуществляет международный консорциум W3C World Wide Web Consortium – организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины [1].

На сегодняшний момент широкое распространение получили HTML 4.0 и HTML 5.0.

Ниже представлены преимущества HTML5.0.

Повышенная безопасность.

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

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

Ввод данных.

Ввод данных в HTML5 становится проще и безопаснее. Правильность введения данных контролируется в режиме реального времени непосредственно во время ввода. В HTML4.0 проверка ошибок и сообщение о них происходит уже после отправки документа, что может создавать проблемы пользователям.

Поддержка полноценной графики.

Недавно бесспорным лидером анимированной графики для браузеров считалась технология Flash. С появлением в новом HTML5 стандарте такого инструмента как canvas позиции Flash-графики будут, вероятно, сильно потеснены.

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

Видео и аудио.

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

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

HTML5 призван наконец избавить браузеры от этих дополнительных программ и дать им возможность полноценного воспроизведения аудио и видео контента своими силами. Для этого в HTML5 коде предусмотрены специальные теги, такие как <video> и <audio>.

Пример использования:

<audio src="name.mp3" controls></audio>
<video controls width="400" height="300 <source src="name.mp4" type="name/mp4">
Многократное увеличение скорости работы.

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

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

Технология WebStorage.

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

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

Данная база может хранить в себе до 10 Мб данных для одного домена. В отличие от файлов cookie, Web Storage не делает каждый раз запрос HTTP.

Структурные возможности HTML5.

Для того чтобы структуру веб-документа сделать более простой, а код чище в HTML5.0 созданы новые семантические элементы header, nav, section, article, aside и footer, которые могут использоваться вместо тега div, применяющегося в HTML4.0. Новые теги позволяют конкретнее описывать заголовок, нижний колонтитул, колонки текста и другие. Эти нововведения могут использоваться для автоматической генерации оглавления и организации более эффективной и простой навигации по веб-странице. Код при этом становится более чистым и менее засоренным второстепенными деталями.

Описание тегов:

<article> – задаёт содержание сайта.

<aside> – определяет блок, который не относится к основному контенту.

<section> – задаёт раздел документа.

<footer> – задаёт «подвал» сайта, например имя автора.

<header> – задает шапку сайта.

<nav> – задаёт навигацию по сайту.

Преимущества для конечного пользователя.

С HTML5 жизнь конечного пользователя становится заметно легче:

Не требуется установка многочисленных дополнительных программ;
HTML5, в отличие от HTML4 совместим, помимо ПК и ноутбуков, еще и с планшетами, смартфонами и современными моделями телевизоров, которые предоставляют доступ в интернет.

Несмотря на все преимущества, также присутствуют и недостатки, из-за которых данная версия проигрывает прежним технологиям. Существует некоторая уязвимость HTML5 в области защиты данных. Такая уязвимость создается большего, по сравнению с cookies стандарта HTML4, объема данных, которые сохраняются на жестком диске пользователя. Опасность заключается в том, что в больших объемах данных может содержаться более подробная информация о пользователе. Эксперты высказывают мнение, что если хранилище HTML5 остается на компьютере пользователя в течение многих месяцев, то интернет-сайты, обращаясь к нему через JavaScript после загрузки страницы, могут незаметно для пользователя собирать и передавать данные владельцу сайта.

В отношении мультимедийного контента тоже есть недостатки, не позволяющие сделать окончательный выбор в пользу HTML5. Поддержка видео HTML5 позволяет воспроизводить мультимедийный контент на компьютерах и устройствах, которые не поддерживают FlashPlayer, однако в полной степени HTML5 всем этим потребностям все еще не отвечает. На данный момент AdobeFlash является наилучшей платформой для воспроизведения видео. В HTML5 пока нет, например, полноэкранного режима [2].

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

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

Также существуют недостатки HTML5 и в разработке игр:

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

Руководитель компании W3C Филипп ЛеЭгаре отметил, в ближайшее время не получится отказаться от Flash технологии. Причиной этому он назвал то, что потребуется длительное время для перехода всех веб-клиентов к поддержке HTML5. В течение нескольких лет технологии HTML5 и AdobeFlash будут существовать и конкурировать.

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

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

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

ГЛАВА 2 ГИПЕРТЕКСТОВЫЕ СИСТЕМЫ

2.1 Определение гипертекстовой системы и принципы создания гипертекстового документа

Существуют несколько типов систем, которые похожи на гипертексты, имеют многие их свойства: многооконные системы, файловые системы с развитым редактором, системы формализации текстов, системы управления базами данных (СУБД), гиперсреды.

Одним из принципов языка гипертекстовой разметки документа (HTML) является многоуровневое вложение элементов.

Любой гипертекстовый документ состоит из тегов, причем обычно начальные теги пишутся большими буквами, а конечные - маленькими. Пример: <HTML></html>.

Рассмотрим основные теги, входящие в каждый гипертекстовый документ. Прежде всего, это <HTML></html> - отличительный признак гипертекстового документа. <HTML></html> является внешним, так как между его стартовым и конечным тегами должен находиться весь гипертекстовый документ.

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

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

2.2 Создание документов в стандарте HTML

Форматирование текста и изменение стилей. Текст - единственный объект гипертекстовой страницы, который не требует специального определения. Иными словами, произвольные символы интерпретируются по умолчанию как текстовые данные. Но для форматирования текста существует большое количество элементов.^{^[4]}

. Элемент абзаца (paragraph) - один из самых полезных. Он позволяет использовать только начальный тег, так как следующий элемент Р обозначает конец предыдущего и начало следующего абзаца. Конечный тег удобно использовать в тех случаях, когда по смыслу необходимо обозначить конец абзаца. Вместе с элементом Р можно использовать атрибут выравнивания align.

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

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

Тег и обязательный парный закрывающий тег

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

Пример

Это обычный и очень длинный текст, который весьма неудобно читать, если он написан в одну строчку: Это обычный и очень длинный текст, который весьма неудобно читать, если он написан в одну строчку.

<PRE></pre>. Элемент для обозначения текста, отформатированного заранее (preformatted). Подразумевается, что текст будет выведен в том виде, в каком он был подготовлен пользователем. Например, учитываются символы конца строки, появившиеся при наборе текста в редакторе. Во всех других случаях обозреватель Интернет игнорирует эти символы. Этот элемент удобно использовать для демонстрации листингов программ или для вывода текстовых документов, переформатирование которых может привести к искажению их смысла.

Тег <PRE> обрамляет предварительно отформатированный текст. Переформатированный текст отображается моношириным шрифтом. Получается как бы текстовая вставка в html.

<BLOCKQUOTE></blockquote>. Обозначение цитаты. Этот элемент требует наличия конечного тега. Текст не претерпевает никаких изменений, но абзац располагается с отступом. К кавычкам этот элемент тоже не имеет никакого отношения: если в цитате используются кавычки, то они должны быть проставлены явным образом. В настоящее время используют и другое написание этого элемента BQ.

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

Пример

Это обычный и очень длинный текст, который весьма неудобно читать, если он написан в одну строчку

А это уже длинный текст c отступами от сторон текста для лучшего восприятия

<CENTER></center>. Элемент используется для центрирования текста, а точнее, любого содержимого. Не является общеупотребительным. Тег <CENTER> и обязательный парный ему </CENTER>. Тег <CENTER> предназначен для горизонтального выравнивания ВСЕХ элементов посередине окна браузера. CENTER это тег уровня блока, поэтому им можно центрировать, например, таблицы, тексты

Пример

Это обычный текст

А это уже текст с использованием тега <center>

<DIV></div>. Элемент, похожий на предыдущий. Он позволяет выравнивать содержимое по левому краю, по центру или по правому краю. Для этого стартовый тег должен содержать соответствующий атрибут: align=’’left’’, align=’’center’’, align=’’right’’.

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

Пример

Это обычный текст

А это уже жирный текст с использованием тега 

<BIG></big>. Увеличенный размер шрифта.

Пример

Это обычный текст

А это уже более крупный текст с использованием тега <BIG>

. Уменьшенный размер шрифта.

Пример

Это обычный текст

А это уже более мелкий текст с использованием тега

. Выделение текста курсивом.

Пример

Это обычный текст

А это уже наклонный текст с использованием тега 

 и <DFN></dfn>. Элементы, означающие выразительность фрагмента текста и определение чего-либо. Оба элемента аналогичны по своему действию элементу I, т.е., в большинстве случаев, позволяют выделить текст курсивом.

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

Тег и обязательный парный ему .

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

Пример

Это обычный текст

А это уже текст с использованием тега 

<TT></tt>. Элемент, обозначающий текст телетайпа. Его особенность заключается в использовании моноширинного шрифта.

Пример

Это обычный текст

А это уже текст с использованием тега <tt>,имитирующий стиль печатной машинки

<STRIKE></strike>. Элемент, создающий перечеркнутое начертание текста. В настоящее время его заменяют более простым: <S></S>.

Пример

Это обычный текст

~~А это уже текст с использованием тега <s>~~

. Подчеркнутое начертание текста.

Пример

Это обычный текст

А это уже текст с использованием тега

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

Происходит от слова strong emphasis - сильный акцент. Аналогичен тегу B

Пример

Это обычный текст

А это уже текст с использованием тега 

. Элемент, создающий эффект нижнего индекса.

Пример

Текст с использованием тега

Формула воды - H₂O

. Элемент, создающий эффект верхнего индекса.

Пример

Текст с использованием тега

4² = 16

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

Обычный текст и _{элемент SUB}

Обычный текст и ^{элемент SUP}

Рис.2. Использование элементов SUB и SUP

<PLAINTEXT></plaintext>. Этот элемент предназначен для создания текста с конструкциями HTML, которые должны восприниматься именно как текст. Все теги, заключенные в PLAINTEXT, воспринимаются броузером только как произвольные символы. Элемент удобно использовать для обсуждения вопросов, связанных с использованием HTML.

<CODE></code>, <SAMP></samp> и <VAR></var>. Элементы, предназначенные для вывода фрагментов программ. CODE используется для форматирования текста программы. SAMP предполагается задействовать при иллюстрации примеров вывода данных на экран. VAR был создан для выделения переменных. Как правило, все эти элементы обеспечивают вывод информации с использованием моноширинного шрифта.

Пример

Это обычный текст

А это уже текст с использованием тега <CODE>

<KBD></kbd>. Этот элемент предназначен для указания текста, который пользователь должен ввести с клавиатуры. Можно рассчитывать, что текст, выделенный с помощью этого элемента, будет выделен моношириным шрифтом в полужирном начертании.

Тег <KBD> отмечает текст, вводимый пользователем с клавиатуры.

От английского keyboard - клавиатура

Пример

Для запуска Windows наберите: win.

Код для примера

Для запуска Windows наберите: <kbd>win</kbd>

<CITE></cite>. Предполагается, что этот элемент может быть использован для форматирования цитат и ссылок в обычном понимании этого слова. Текст, расположенный внутри него, выводится по умолчанию курсивом.

Пример

Это обычный текст

А это уже текст с использованием тега <CITE>

<ADDRESS></address>. Подобно элементу CITE, данный элемент отличается только предусмотренным содержанием.

Тег <ADDRESS> применяется для идентификации автора документа и указания адреса автора. Сюда же обычно помещаются и сведения об авторских правах, а также дата создания и последней модификации документа. Тег применяется обычно вначале или в конце документа. Текст, заключенный между тегами <address></address> обычно отображается курсивом

Пример

Мой адрес - Советский Союз

Код для примера

<address>Мой адрес - Советский Союз</address>

<BASEFONT>. Элемент, определяющий базовый (основной размер шрифта). Внутри элемента необходимо указать атрибут: size=Базовый размер шрифта. Величина атрибута может лежать в пределах от 1 до 7. По умолчанию используется величина 3. Установка, выполняемая этим элементом, имеет значение для элемента FONT (см. ниже), который позволяет задавать относительный размер шрифта.

. Определение типа, размера и цвета шрифта. Все эти характеристики определяются с помощью соответствующих атрибутов. Например, абсолютный размер шрифта задается с помощью size (размер): size=Абсолютный размер шрифта. Размер шрифта может задаваться относительно базового: size=+Число или size=-Число. При назначении величины для size необходимо учитывать величину базового размера. Обе они в сумме должны соответствовать одному из абсолютных размеров. Так, для базового размера, равного 3, относительный размер может находиться в пределах от -2 до +4. Если величина выходит за допустимый предел, то используется или шрифт размера 7, или шрифт размера 1.

Для элемента FONT можно использовать атрибут цвета: color=’’цвет’’.

Атрибут face (вид) не входит в спецификацию HTML 3, позволяет задавать тип шрифта: face=’’Название шрифта’’.

Правда, есть одна проблема. Гипертекстовые страницы просматривают множество людей, и нет гарантии, что у каждого из них окажется нужный шрифт. Если в системе не установлен шрифт точно с таким же названием, то обозреватель Интернет использует свой стандартный. Он имеет два назначенных по умолчанию шрифта: один пропорциональный, другой моноширинный.^{^[5]}

<UL><LI></ul>. Тег <UL>(Unordered List) служит для создания

ненумерованного списка Его шаблон представлен ниже:

<LI> Иванов

<LI> Петров

</UL>

Элемент UL является своеобразным обрамлением списка. Он позволяет отделять один список от другого. Элемент LI обозначает каждый из пунктов. Вид ненумерованного списка показан на рис.3 (см. приложение 1).

<OL><LI></ol>. Структура нумерованного списка похожа на предыдущую:

<OL type=’’I’’>

<LI> Пункт 1

<LI> Пункт 2

<LI> Пункт 3

</ol>

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

Способ нумерации задается с помощью атрибута type. В таблице приведены все способы нумерации (см. Приложение 3).

Списки с определениями (definition lists) создаются с помощью тегов трех видов:

<DL>

<DT> Пункт 1

<DD> Определение пункта 1

<DD> Другое определение пункта 1

<DT> Пункт 2

<DD> Определение пункта 2

<DT> Пункт 3

<DD> Определение пункта 3

</dl>

2.3 Гипертекстовая система world wide web (www)

WWW – глобальная система гипертекстовых документов, связанных друг с другом по Internet.

Система World Wide Web (сокращенно www, или Web) существует уже давно и поддержка ее работы, как уже говорилось выше, осуществляется протоколом HTTP. Однако после создания программ-броузеров www-система начала очень быстро развиваться и сейчас практически определяет лицо сети Интернет. В большинстве случаев, когда речь идёт об Интернет, имеют в виду именно эту систему. Поэтому представляет интерес рассмотреть ее более подробно и познакомиться с основной терминологией.

Для написания гипертекстовых документов используется специальный язык HTML (Hyper Text Markup Language). Документы на этом языке записываются обычными символами, которые можно увидеть на клавиатуре компьютера. Однако определенная комбинация символов образует так называемую связь. Если данная связь будет задействована, то программа - броузер автоматически установит по сети Интернет соединение с указанным сервером и выведет на экран монитора нужную часть документа. Обычно при рассмотрении на экране HTML-документа связи проявляют себя как часть текста, выделенная синим цветом.^{^[6]}

Каждый отдельный HTML-файл называется документом или страницей. Набор страниц, относящийся к какой-либо определенной теме, обычно называют Web-станцией или просто станцией. Очевидно, что каждая страница должна иметь свой адрес, по которому ее можно найти. Применительно к Web-документам за такими адресами закрепилась аббревиатура URL (Uniform Resource Locator) - унифицированный локатор ресурса. Адрес URL записывается с использованием рассмотренной в предыдущем разделе доменной системы DNS. Характерным признаком Web-страницы или станции является наличие домена www в начале правой части адреса, однако это наличие не является обязательным.

НTML – язык, используемый для разметки текстовых файлов для использования в WWW. HTML – документы представляют собой обычный текстовой ASCII – файл, который содержит как стандартный текст, так и особые коды форматирования или разметки. Эти коды указывают, каким образом должен отображаться данный документ, и для правильного вывода на экран WWW – клиент должен их прочитать.

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

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

ГЛАВА 3 РАЗРАБОТКА ИГР НА HTML

Современные технологии HTML5 позволяют реализовывать различные графические приложения. Для этого используется элемент «Canvas» и язык JavaScript (JS). 2D графика создается с помощью контекста canvas.getContext ("2d"), а 3D графические приложения создаются на основе технологии WebGl и различных JS библиотек. Важным аспектом использования «Canvas» является отсутствие необходимости использования дополнительных плагинов для отображения 3D графики, а встроенная низкоуровневая поддержка графики браузерами, позволяет получить высокую производительность разрабатываемых приложений [1, с. 153].

Большинство движков служат для сокращения временных затрат на разработку полноценной игры. Однако многие разработчики предпочитают создавать свой проект полностью с нуля, чтобы лучше представлять его устройство. Существует немного JavaScript-HTML5 движков, которые действительно чего-то стоят, однако и у них может быть один большой недостаток: они более не поддерживаются или близки к прекращению поддержки. Поэтому, выбирая движок, остановите свой выбор на тех продуктах, поддержка которых будет длиться достаточно продолжительное время.

Словосочетание «игровой движок» подразумевает целый комплекс прикладных программ, включающий движок рендеринга («визуализатор») для 2D или 3D графики, физический движок, звук, скриптинг, анимацию, искусственный интеллект, сетевой код, управление памятью и графические сцены. Эти общие функции стали выделяться в отдельные библиотеки, но это еще нельзя было назвать полноценными «игровыми движками».

Термин «игровой движок» появился в середине 1990-х в контексте компьютерных игр жанра шутер от первого лица, похожих на популярную в то время Doom. Архитектура программного обеспечения Doom была построена таким образом, что представляла собой разумное и хорошо выполненное разделение центральных компонент игры (например, подсистемы трёхмерной графики, расчёта столкновений объектов, звуковой и других) и графических ресурсов, игровых миров, формирующие опыт игрока игровые правила и другое [2, с. 1].

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

С развитием игровой индустрии возникает все больше возможностей для создания игр, в том числе для тех людей, которые собираются делать их в одиночку. В связи с этим стали популярны «инди-игры» – игры, сделанные одним человеком или небольшой командой без финансовой поддержки со стороны. Это доказывает, что в настоящее время рынок различных технологий и движков постоянно развивается, тем самым упрощая работу разработчикам [3, с. 56].

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

Среди широкого рынка игровых движков можно выделить три основных: Unity, Unreal Engine и CryEngine.

Unity 5 поддерживает экспорт в HTML5 WebGL; его основное преимущество – кроссплатформенность. Игры можно быстро и легко портировать на Android, iOS, Windows Phone 8 и BlackBerry, поэтому Unity отлично подходит для разработки мобильных игр. Он также пригоден для консолей. Но разработчикам новичкам обычно трудно получить доступ к консольным SDK.

На данный момент Unity имеет самое большое сообщество. В российском сегменте Unity является самым популярным – его используют более 50% разработчиков, и всё больше разработчиков покидают старые игровые движки и переходят делать игры в Unity. Это самый популярный движок для начинающих и инди-разработчиков - порог входа и время обучения очень низкие.

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

Unreal Engine 4 представляет собой набор интегрированных инструментов для разработчиков игр для разработки и создания игр. Он также, как и Unity, поддерживает экспорт в HTML5 WebGL.

Unreal Engine 4 является еще одним из самых продвинутых движков для разработки игр, использует язык C++. В Unreal в движок встроено практически всё, что может понадобиться, включая 3D-моделирование и работу с ландшафтом. Из-за столь богатого наполнения освоить Unreal Engine 4 сложнее, чем другие инструменты разработки. Unreal Engine 4 – относительно новый движок, но на нём уже вышли такие игры, как Daylight и Tekken 7. Для скриптинга в движке используется собственный язык — UnrealScript. Список поддерживаемых платформ не настолько широк, как у Unity: Windows PC, Windows Store, OS X, iOS, Android и консоли предпоследнего поколения.

Плюсы в использовании: невысокая стоимость лицензии; профессиональное сообщество, в котором состоят опытные пользователи; совместимость с основными платформами Windows, iOS, Mac и Android; возможность ознакомиться с особенностями движка по видео-пособиям; большое количество простых для понимания инструментов; возможности редактора; полный доступ к исходному коду; отзывчивая и грамотная служба технической поддержки; добавление новых инструментов почти в каждом обновлении. Минусами являются высокий порог входа; слабый Asset Store (внутренний магазин) и малая распространённость.

CryEngine 3 – это чрезвычайно мощный игровой движок, созданный компанией-разработчиком Crytek, впервые представленный в игре Far Cry. Он предназначен для разработки под PC и консоли, включая PlayStation 4 и Xbox One. Его графические возможности превосходят Unity и UDK, и время от времени стоят на шаг впереди Unreal Engine 4: новейшее освещение, реалистичная физика, продвинутые системы анимации и многое другое. Последней игрой на CryEngine была Ryse: Son of Rome. По аналогии с Unreal Engine 4 в CryEngine встроены мощные и интуитивные функции, касающиеся работы с дизайном уровней.

В CryEngine есть возможность быстро освоить и применять UI даже при низком уровне подготовки пользователя; упрощена работа с графикой благодаря встроенной функции Flowgraph; упрощен процесс работы с искусственным интеллектом; возможность расширенной работы со звуковым сопровождением посредством набора инструментов Fmod. Но помимо этого он обладает высоким порогом входа и отсутствием хорошего сообщества.

В то время как Unity больше подходит для мобильных 2D и 3D-игр, Unreal Engine, обладая уникальным скриптовым языком программирования, идеально подходит для создания FPS-шутеров, а CryEngine, адаптированный под платформы следующего поколения, имеет потрясающие графические возможности.

По сравнению с UDK, Unity3D в бесплатной (Indie) комплектации обладает куда более скромным набором инструментов. Ни встроенной лицевой анимации, ни удобного создания интерфейса, ни инструментов для визуальной работы с анимацией здесь нет (в следующей версии, правда, последние два пункта собираются исправить). Но C# и JS - куда проще для понимания, нежели uScript, а своих классов, которые вам придется использовать в обязательном порядке, здесь всего ничего. Кроме того, имеющийся в наличии визуальный редактор весьма прост для понимания — на изучение его основ, необходимых для более-менее комфортного использования продукта, вряд ли уйдет больше одной рабочей недели. Потому по скорости создания небольших проектов Unity3D практически нет равных [4, с. 120].

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

ЗАКЛЮЧЕНИЕ

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

Для создания личных гипертекстовых страниц студент должен использовать основные теги и способы оформления текста, перечисленные в разделе «Создание гипертекстовых систем». Выбор базового программного средства для создания гипертекста осуществляется студентом самостоятельно.

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

Мы привыкли думать об Internet как о глобальной сети, которая обеспечивает доступ к информации, разбросанной по разным уголкам киберпространства. Скорее всего, так оно и есть, учитывая нынешнее развития Internet. Но оказывается, что технологии работы с данными, успешно зарекомендовавшие себя в Internet, могут приносить пользу и небольшим компаниям с локальными сетями, не имеющими доступа ни к каким глобальным ресурсам. Речь идет о технологиях, реализованных в бурно развивающемся сервисе WWW, предоставляющих возможности работы практически с любыми видами информации.^{^[7]}

В последнее время ведется достаточно много разговоров об использовании технологий Web в корпоративных сетях. Такие сети уже получили название Intranet и им предрекают большое будущее. Что же даст использование технологий Web внутри корпорации? Программное обеспечение здесь в основном предназначено для работы с документами - их создания или организации документооборота. Эти задачи решаются с помощью офисных приложений, систем электронной почты и систем коллективной работы. Возникающие при использовании систем электронной почты проблемы в основном связаны с тем, что они могут работать только с ограниченным числом типов данных. В этом случае файлы передаются по сети как приложения к текстовым сообщениям и для их просмотра обычно необходимо вызывать соответствующие приложения. Кроме того, проблемой систем электронной почты, равно как и средств организации документооборота, является обилие программного обеспечения, которое создает проблемы совместимости, а также вызывает трудности при установке клиентов даже при использование одного и того же пакета. Стоит также отметить, что эти системы дороги и сложны в инсталляции и поддержке.^{^[8]}

В свою очередь, Web за последние годы приобрел столько функциональных возможностей, проверенных в сети с гигантским количеством клиентов, что организация доступа к информации, приходящей из различных источников, для нескольких десятков или даже сотен пользователей не представляется особой проблемой. Основное предназначение Web - распространение разнородных данных, включая аудио, видео и любые другие типы информации - обеспечивает возможность работы с корпоративными данными на новом уровне, не доступном пользователям обычной электронной почты. Возможность организации запросов от сервера Web к различным СУБД с помощью интерфейса CGI позволяет использовать программу просмотра WWW в качестве клиента корпоративных баз данных.

Развитие технологий Web ведет к появлению возможностей, которые раньше

было трудно вообразить.

К реализуемым возможностям можно отнести такие как:

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

Основой технологий Web является язык HTML, который допускает достаточно легкую конвертацию практически любой информации в его гипертекстовый вид. Так, текстовые процессоры, электронные таблицы и СУБД, при приложении незначительных усилий, могут сохранять информацию в таком формате. Кроме того, существуют программы, конвертирующие формат RTF в HTML. Средства доступа к корпоративным базам данных могут быть организованы с помощью практически любых языков программирования (C, Perl, Basic и т.п.) с использованием стандартного

интерфейса CGI.^{^[9]}

Сеть Intranet уже готова к подключению к глобальному Internet, для чего не надо никаких дополнительных усилий. А в результате можно получить не только доступ к ресурсам Internet, но и воспользоваться рядом потенциальных новых возможностей. Конечно, не все так легко и просто, как кажется. Web не предоставляет всех тех преимуществ, которые дает использование систем коллективной работы.

СПИСОК ЛИТЕРАТУРЫ

1. Информационные технологии в образовательном процессе высшей школы: Материалы научно-методического семинара. Тюмень: Издательство ТГУ, 2017.

2. Кент П. World Wide Web. М.: Компьютер, 2016

3. Хольцшлаг, Молли Использование HTML 4. М.:Вильямс, 2015

4. Амато В. Основы организации сетей Cisco. Т. 1 и 2/Пер. с англ. – М.: «Вильямс» 2014.

5. Вишневский А. Сетевые средства Windows 2013. – СПб.: Питер 2013

6. Галкин В.А. Телекоммуникации и сети: Учеб.пособие М.: 2013

7. Гук М. Аппаратные средства локальных сетей – СПб.: Питер, 2013

8. Заборовский В.С. Сети ЭВМ и телекоммуникации. Моделирование и анализ сетей связи с коммутацией пакетов. Network Simulator (Сетевой симулятор ns 2): Учеб. Пособие. СПб: 2017

9. Иванова Т.И. Корпоративные сети связи – М.: 2015

10. Кульгин М. Технологии корпоративных сетей. Энциклопедия – СПб.: 2013

11. Кульгин М. Технологии корпоративных сетей – СПб 2013

12. Олифер В.Г., Олифер Н.А. Новые технологии и оборудование IP-сетей – СПб.:2013

13. Олифер В.Г., Олифер Н.А. Компьютерные сети. Принципы, технологии, протоколы – СПб.: Питер, 2017

14. Пятибратов А.П., Гудыно Л.П., Кириченко А.А. Вычислительные системы, сети и телекоммуникации – М.: Финансы и статистика, 2005

15. Е.Л.Полонская. Язык HTML.Самоучитель – М.:2013

ПРИЛОЖЕНИЯ

Приложение 1

Пункт 1 списка

Пункт 2 списка

Пункт 3 списка

Рис.3. Ненумерованный список

Приложение 2

I. Пункт 1

II. Пункт 2

III. Пункт 3

Рис. 4. Нумерованный список

Приложение 3

Значение атрибута type

Атрибут	Последовательность нумерации
type=’’1’’	1, 2, 3, 4, ...
type=’’i’’	i, ii, iii, iv, ...
type=’’I’’	I, II, III, IV, ...
type=’’a’’	a, b, c, d, ...
type=’’A’’	A, B, C, D, ...

Информационные технологии в образовательном процессе высшей школы: Материалы научно-методического семинара. Тюмень: Издательство ТГУ, 2017.

↑
Кент П. World Wide Web. М.: Компьютер, 2016 ↑
Вишневский А. Сетевые средства Windows 2013. – СПб.: Питер 2013 ↑
Олифер В.Г., Олифер Н.А. Новые технологии и оборудование IP-сетей – СПб.:2013 ↑
Е.Л.Полонская. Язык HTML.Самоучитель – М.:2013 ↑
Хольцшлаг, Молли Использование HTML 4. М.:Вильямс, 2015 ↑
Пятибратов А.П., Гудыно Л.П., Кириченко А.А. Вычислительные системы, сети и телекоммуникации – М.: Финансы и статистика, 2005 ↑
Вишневский А. Сетевые средства Windows 2013. – СПб.: Питер 2013 ↑
Гук М. Аппаратные средства локальных сетей – СПб.: Питер, 2013 ↑