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

Основы программирования на языке HTML. ГИПЕРТЕКСТОВАЯ РАЗМЕТКА

Содержание:

ВВЕДЕНИЕ

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

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

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

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

Объект курсовой работы – ЯП высокого уровня.

Предмет работы – язык гипертекстовой разметки HTML.

Цель работы в данном исследовании – проведение анализа основных понятий языка гипертекстовой разметки HTML, его использования для реализации обработки данных.

В соответствии с целью выделены задачи исследования:

– рассмотреть литературу по теории ЯП высокого уровня;

– выполнить описание терминов, что связаны с понятием гипертекстового языка программирования;

– дать характеристику языка разметки HTML;

– провести рассмотрение основных тегов для гипертекстовой разметки;

– на примере рассмотреть применение языка гипертекстовой разметки HTML.

В работе применяется язык HTML, так как он в нынешнее время – один из самых популярных в мире при создании сайтов.

Проблему исследования изучали: Коржинский С.Н. [8], Белунцов В. [11], Фролов А.В. [14].

1.ТЕОРЕТИЧЕСКИЕ ПОНЯТИЯ КЛАССИЧЕСКОЙ ТЕОРИИ ЯЗЫКОВ ПРОГРАММИРОВАНИЯ

1.1.Определение языка программирования

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

В отличие от человеческих языков, все ЯП более простые, ведь состоят из ограниченного числа слов, предназначенных исключительно для записи алгоритмов.

Стоит отметить, что также различаются они, по близости к пониманию для человека, а также и по выразительным способностям, ясности, краткости и простоте. [4]

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

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

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

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

К примеру, язык программирования АЛГОЛ (рисунок 1) был создан в свое время средствами международной ассоциацией ученых для написания и публикации в журналах разных алгоритмов. Он также задумывался в качестве интернационального языка всех компьютеров. [8]

Рисунок 1 – Пример кода программы АЛГОЛ

Для решения некоторых основных задач в сфере коммерции со временем специально создан язык под названием КОБОЛ, для обработки текстов использовался ПРОЛОГ, для выполнения процесса обучения студентов программированию были придуманы языки ЛИСП, БЕЙСИК, для создания математических вычислений – ФОРТРАН, для облегчения процесса программирования для аппаратуры персональных компьютеров – язык С++. [14]

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

В это же время, активно развиваются машинные специальные языки, имеющие использование только в своих областях. [11]

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

Основные назначение для всех языков программирования – быть средством для программирования: [20]

– формулировать программы;

– реализовывать программы на ПК.

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

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

Часто говорят, что опытные программисты пишут программные продукты не для какого-то конкретного ПК, а некоторой абстрактной вычислительной машины. [19]

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

Следует также при этом учитывать, что все реально действующие программы могут выполняться также и в среде какой-то установленной на ПК операционной системы (ОС).

ОС представляет специальный программный комплекс для управления всеми устройствами ПК. [4]

В нынешнее время самыми популярными ОС считаются операционные системы Microsoft, UNIX.

В случае, если абстрактной вычислительной машине добавляют операционную систему, то в результате получим виртуальную машину. [4]

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

Для написания самой программы на низких уровнях используются специальные низкоуровневые ЯП.

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

Все языки такого уровня являются машинными кодами, а также ассемблерами. Ассемблер дает также несколько более удобных способов записи программных продуктов. [5]

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

Программа оказывается также связанной к определенной архитектурой. Все это можно также считать недостатками для программировании на ЯП низкого уровня.

Главным и основным преимуществом является возможность «выжать» из компьютера все его возможности, а прежде всего – максимальный уровень быстродействия. [10]

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

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

Языки высокого уровня можно разделить также на 4 вида (рисунок 2): [4]

Рисунок 2 –Типы языков программирования

Самыми главными объектами для императивных ЯП являются переменные, операторы присваивания, стандартные алгоритмические конструкции.

Императивные ЯП привязаны к традиционной архитектуре Джона фон Неймана. [15]

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

Классическим примером функционального ЯП является LISP.

В программных продуктах, написанных с использованием логических языков, нет какого-то фиксированного, определенного порядка для выполнения разных правил алгоритма. [20]

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

Объектно-ориентированные ЯП в значительной степени упрощают программирование с использованием технологии объектно-ориентированного программирования (к примеру, C++). [4]

Не следует их путать с языками для разметки документов: HTML, таблицей стилей CSS.

1.2.Этапы развития ЯП

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

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

Это приводит к острой необходимости найти самые разные средства, которые позволяют еще более просто наладить корректное общение человека непосредственно с ПК. И такое средство найдено – различные ЯП и модули для реализации трансляции.[14]

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

ЯП условно можно классифицировать на ЯП высокого и низкого уровня написания программ. [3]

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

Рассмотрим далее краткую историю развития ЯП:[16]

1801 г. – францeз И. Жаккард, используя перфокарты впервые вышивает «hello world».

1841 г. – первая женщина-программист А. Лавлейс пишет первую программу. [19]

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

1956 г. – Дж. Бакус и фирма IBM изобретают ЯП Фортран для математических вычислений.

1963 г. – Дж. Кемни создает на то время ЯП Бейсик, который стал революционным.

1970 г. – Н. Вирт создает самый первый процедурный язык Турбо Паскаль.

1971 г. – Адам Колмеро разрабатывает современный на то время язык Пролог логического типа, который сразу используется при разработке баз данных (БД). [6]

1982 г. – Б. Страуструп на базе ЯП С, создает новый язык под названием С++, который быстро набрал популярность.

1989 г. – группа разработчиков: Ф. Водлер, П. Худак, С. Пейтон-Джонс, Э. Катчер разрабатывает ЯП Хаскелл.

1995 г. – Дж. Гослинг выполняет создание языка Java. Java – это современный типизированный объектно-ориентированный ЯП, что был описан на основе классов, имеющий современным сборщиком мусора, одиночную диспетчеризацию, реализацию наследования, а также и множественным наследованием. [9]

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

2. ГИПЕРТЕКСТОВАЯ РАЗМЕТКА

2.1. Понятие гипертекста, история его развития

Гипертекст – это технология на базе инструментария обработки больших, структурированных, глубоко вложенных, связанных семантически, понятийно текстов, которые организованы как фрагменты (текста), относящихся только к одной и той самой системе объектов, что расположены в вершинах некоторой сети, а также выделяемых обычно цветом. [6]

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

Рисунок 3 – Структура гипертекста

Гипертекстовая технология может определять, выбирать вариант для актуализации информации гипертекста зависимо от информационных потребностей каждого пользователя и его основных возможностей, уровня подготовки. [9]

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

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

В последствии развития компьютерных средств в сфере мультимедиа гипертекст начал превращаться в еще более наглядную информационную форму, что получила название "гипермедиа", то есть, структура, содержащая аудио - и видеофрагменты, текст, соединенные ссылками по логике сюжета. Технология гипермедиа имеет возможность с помощью программного обеспечения (ПО) и технологических средств выполнять объединение на компьютере гипертекста, графических (статических) изображений, анимационных фрагментов, аудио- и видеозаписи. [14]

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

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

Поддержка этих связей позволяет качественно организовывать "нелинейные" структуры. [1]

Гиперссылками в электронном тексте выступают:

– ссылки на словари терминов и понятий;

– ссылки на персоналии;

– ссылки на статические рисунки;

– ссылки на элементы мультимедиа;

– ссылки на дополнительный материалы;

– ссылки по структурным элементам текста (номер темы, оглавление, список вопросов и др.);

– ссылки на перечень монографий, учебной или научной литературы;

– ссылки на перечень организаций;

– ссылки на перечень исторических событий;

– ссылки на географические названия;

– ссылки на Интернет-ресурсы.

При создании гипертекста каждый автор должен выделить гиперссылки с общей массы текста. Это можно сделать с помощью таких приемов: [1]

– изменение цвета ссылки;

– изменением начертания шрифта;

– увеличение (уменьшение) размера шрифта;

– определить подчеркиванием, курсивом, жирным шрифтом;

– различные комбинации указанных выше способов.

В разнообразных редакторах и программах для создания html-страниц гиперссылки можно выделить различными способами. [7]

К примеру, в редакторе Word ссылки выделяются автоматически синим цветом.

Система гиперссылок может иметь вид (рисунок 4): [11]

Рисунок 4 – Вид гиперссылок

Сама идея гипертекста, была введена Бушем в 1945 г. в предложениях по разработке электромеханической информационной системы Memex. Даже несмотря на тот факт, что Буш был советником президента Рузвельта по науке, идея так и не была реализована. [13]

Понятие гипертекст было введено в обращение Нельсоном в 1965 г. при описании документов (к примеру, представляемых компьютером), что выражают некоторую нелинейную структуру идей, на противоположность линейной структуре для традиционных книг, фильмов или речи. Более поздний термин под названием "гипермедиа" близок по смыслу к нему, но он подчеркивает практическое наличие в гипертексте разных нетекстовых компонентов – анимация, звук и видео. [17]

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

Но как-то внятно описать систему он так и не смог. В 1974 году идея гипертекста воплотилась в информационной системе для внутреннего распорядка атомного авианосца "Винстон", которая получила свое название ZOG. В коммерческом варианте эта система известна под названием KMS.

Работы в данном направлении продолжались и, иногда, появлялись реализации HyperCard от фирмы Apple или же HyperNode фирмы Xerox.

Далее в 1987 проведена первая специализированная конференция под названием Hypertext'87, материалам которой посвящен специальный выпуск сборника "Communication ACM".[19]

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

Дальнейшее развитие данного подхода приводит к непосредственному расширению понятия гипертекста с помощью других информационных ресурсов. [2]

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

Идея Бернерс-Ли заключалась в применении гипертекстовой модели к информационным ресурсам, что распределены в сети, и выполнить это максимально просто. [8]

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

– язык гипертекстовой разметки HTML;

– универсальный способ для адресации ресурсов в Интернете URL;

– протокол для обмена гипертекстовой информацией под названием HTTP.

Позже команда NCSA смогла добавить к этим 3-м компонентам четвертый:

– универсальный интерфейс для шлюзов CGI.

Идея HTML – это пример чрезвычайно удачного программного решения проблемы построения большой гипертекстовой системы при использовании специального средства для управления отображением. Непосредственно на разработку языка разметки существенное влияние оказали 2 фактора: [14]

– исследования в сфере интерфейсов гипертекстовых систем;

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

Далее, в 1989 г. активно обсуждалась проблема проектирования интерфейса гипертекстовых систем, то есть, способов отображения гипертекстовой информации, а также навигации в сети.

Значение гипертекстовой технологии часто сравнивали со значением открытия книгопечатания. Утверждалось, что 1 лист бумаги и современные компьютерные средства для отображения/воспроизведения серьезно могут отличаться друг от друга, а форма представления информации должна тоже отличаться. [8]

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

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

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

Следует принять во внимание, что по своим предложениям Т.Бернерс-Ли также предполагал объединить в одну систему имеющиеся информационные ресурсы компании CERN, и первые демонстрационные системы должны были быть системы VAX/VMS.

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

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

На языке HTML гипертекстовые ссылки являются встроенными в тело документа, а также хранятся как одна его часть. [10]

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

Непосредственно в WWW документы – обычные ASCII- файлы, что можно подготовить практически в любом редакторе текста. Таким образом, проблемы создания гипертекстовой БД была решена просто.

В качестве БД для разработки языков гипертекстовой разметки выбран SGML. Следуя академическим традициям, Т.Бернерс-Ли описал язык HTML в терминах SGML. [11]

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

За 5 лет, с момента разработки самой первой версии HTML 1.0, произошло довольно быстрое развитие языка. Почти в 2 раза увеличилось количество элементов разметки, уровень оформления документов приближается все больше к оформлению современных печатных изданий, быстро развиваются средства для описания не текстовых ресурсов и способы для взаимодействия с разного рода прикладным программным обеспечением. [8]

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

2.2. Описание языков гипертекстовой разметки

2.2.1. Язык HTML

Без преувеличения можно полагать, что получение информации для Интернет-страниц наиболее популярно в нынешнее время. Для создания подобных документов надо иметь общее представление о непосредственной структуре html - файла. [8]

HTML - стандартный сервис Интернет, принятый консорциумом www (W3C). На теперешний день последней является 5-я версия стандарта, переработанная и дополненная по сравнению с версией 4.

На самом деле, если открыть файл с расширением htm (html) в любом текстовом редакторе, можно увидеть, что это обычный текст, правда "оформлен" какими-то словами в специальных угловых скобках. [8]

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

Похожий принцип построения документов не новый, и встречается, к примеру, в текстовом редакторе TeX.

То есть html – обычный текст (информация) с управляющими элементами-тэгами (удобное представление данной информации). [9]

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

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

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

Тэгом считается специальное выражение, помещенное в специальные скобки вида <>.

Весьма условно такие тэги можно разделять на граничные или унарные.

Унарные тэги представляются очевидными операциями, предписывающие браузеру совершать определенное действие непосредственно по постижению тэга при обработке html - документа. [14]

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

Унарные тэги могут не относится к определенным участкам текстовой информации, а к всей последующей части html-документа.

Стоит отметить, что с граничными тегами немного сложнее, но надо также учитывать, что их больше, нежели унарных. [2]

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

Пример граничного тэга имеет вид: [7]

<a href="http://mail.ru/">Почтовый сервер</a>

Тут a – управляющее слово (тег), показывающие, что текст до тега </а>, является гипертекстовой ссылкой (указанием браузеру просмотреть html - документ при совершении действия (например, щелчка мыши) над текстом); href="..." – параметр, определяющий, какой именно документ будет просмотрен (может быть обычный файл на ПК).

Некоторые параметры определены браузером по умолчанию, некоторые- пользователем браузера, а также есть и такие, определить которые необходимо непосредственно при создании страницы (к примеру, тот же параметр href для тэга <a>).

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

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

Структура любого гипертекстового файла чрезвычайно проста (рисунок 5).

HTML-файл должен начинаться тэгом под названием <html> и заканчиваться закрывающимся тегом </html>.

Рисунок 5 – Структура HTML-файла

Информация вне тэгов игнорируется или выдается в нелицеприятном виде. Код, огражденный тегами <html> или </html> делится на 2 части: [8]

– заголовок (меньшая часть);

– основная часть документа.

2.2.2. Язык ХML

XML – расширяемый язык разметки. Он рекомендован Консорциумом Всемирной паутины. Спецификация XML описывает так называемые XML-документы и поведение XML-процессоров (специальных программ, читающих созданные XML-документы и обеспечивающие доступ к их непосредственному содержимому). [3]

XML был разработан как язык с достаточно простым формальным синтаксисом, который удобный для обработки и создания документов программами, а также одновременно удобный для создания и чтения документов человеком, с подчёркиванием использования его в Интернете. [4]

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

Расширения XML – это конкретная грамматика, которая создана на базе XML, представленная словарём тегов, а также их атрибутов, набором правил, что определяют какие атрибуты и объекты могут входить в состав иных элементов.

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

2.2.3. Язык DHTML

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

В отличие от обычного HTML, который, по своей сути, статичен (имеется в виду HTML 4), DHTML позволяет динамически изменять страницу с учётом действий пользователя. Классические примеры использования DHTML - это различные выпадающие меню на сайтах, разворачивающиеся по клику пользователя панели и древовидные списки, и т. п. Технически Dynamic HTML реализуется с помощью JavaScript, CSS и DOM. [8 ]

Не следует путать динамические HTML-страницы с динамическими сайтами.

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

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

Не стоит путать также DHTML и AJAX, так как эти технологии имеют различную суть и природу, хотя и есть у них определённое внешнее сходство. AJAX позволяет не перезагружать открытую пользователем страницу целиком при внесении в неё каких-либо небольших изменений сервером, а ограничиться загрузкой только небольшого фрагмента, что достигается обменом XML-данными с сервером в "фоновом" режиме. AJAX-страницы для придания им большей интерактивности реализуются с использованием DHTML, однако DHTML-страницы совершенно не обязательно используют AJAX. [4]

Использование DHTML связано с определёнными сложностями для разработчиков, которые создают web-страницы, так как необходимо отлаживать JavaScript и взаимодействие с DOM для каждого браузера в отдельности. Впрочем, сегодня существует немалое количество JavaScript-библиотек, которые существенно упрощают жизнь создателям DHTML-страниц. [6]

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

3.ПРАКТИЧЕСКОЕ ИСПОЛЬЗОВАНИЕ ЯЗЫКА HTML

3.1. Описание основных тегов HTML

Любой документ начинается с заголовка, который может быть разного размера. Существует шесть уровней заголовков в HTML: <h1>, <h2>, <h3>, <h4>, <h5> и <h6>. При отображении любого заголовка, браузер добавляет одну строку до и одну строку после этого заголовка. [8 ]

HTML предлагает способ структурирования текста в разные абзацы с помощью тега <p>. Каждый абзац текста должен находиться между открывающим <p> и закрывающим тегом </p>

– <P> и </P> - теги, служащие для выделения абзацев. Новый абзац всегда отделяется от предыдущего пустой строкой.

– <BR> - тег, служащий для переноса текста на другую строку. Может также служить для отделения графики от текста на интервал. [13]

– <HR> - тег, служащий для логического разделения текста горизонтальной линией.

– <PRE> и </PRE> - Между этими тегами располагается предварительно отформатированный текст.

Параметры выравнивания используются в <P> и <H>

– ALIGN=LEFT - выравнивание по левому полю;

– ALIGN=RIGHT - выравнивание по правому полю;

– ALIGN=CENTER - выравнивание по центру.

Теги выравнивания имеют вид: [17]

– <LEFT> и </LEFT> - выравнивание по левому полю;

– <RIGHT> и </RIGHT> - выравнивание по правому полю;

– <CENTER> и </CENTER> - выравнивание по центру.

Заголовки, служащие для выделения логических частей текста имеют вид:

– <H1> и </H1> - Заголовок первого уровня.

– <H2> и </H2> - Заголовок второго уровня.

– <H3> и </H3> - Заголовок третьего уровня.

– <H4> и </H4> - Заголовок четвертого уровня.

– <H5> и </H5> - Заголовок пятого уровня.

– <H6> и </H6> - Заголовок шестого уровня.

Теги для выделения текста и шрифта имеют вид: [18]

– <B> и </B> - теги для выделения текста (слов, букв) жирным шрифтом.

– <I> и </I> - теги для выделения текста (слов, букв) курсивным шрифтом, типа Italic.

– <U> и </U> - текст, расположенный между двумя этими тегами, будет подчеркнут.

– <BLINK> и </BLINK> - текст, расположенный между двумя этими тегами, будет мигать.

– <FONT SIZE=n>и</FONT> - теги для изменения размера шрифта (где n - размер шрифта в пикселях px).

– <FONT COLOR="#FFFFFF"> и </FONT> - теги для изменения цвета шрифта.

Теги для формирования списков: [9]

– <OL> и </OL> - теги, показывающие начало и конец нумерованного списка;

– <UL> и </UL> - теги, показывающие начало и конец маркированного списка;

– <LI> - Элемент списка.

– <DL> и </DL> - теги, показывающие начало и конец глоссария.

– <DT> - Термин глоссария, располагается без отступа от левого поля страницы.

– <DD> - Описание термина, располагается с отступом от левого поля страницы.

Теги-команды для вставки в текст объектов не текстовой информации: [1]

– <IMG SRC="file.gif"> или <IMG SRC="file.jpg"> - команда для вставки графического изображения;

– <IMG SRC="file.wav"> - команда для вставки звукового фрагмента;

– <IMG SRC="file.avi"> - команда для вставки видео фрагмента.

Параметры графического изображения имеют вид: [8]

– WIDHT - ширина картинки в пикселях;

– HEIGHT- высота картинки в пикселях;

– ALIGN - выравнивание (ALIGN=LEFT - выравнивание по левому полю, ALIGN=RIGHT - по правому полю, ALIGN=TOP - по верхней границе, ALIGN=BOTTOM - по нижней границе, ALIGN=MIDDLE или CENTER - по центру);

– HSPACE - горизонтальный отступ от графического изображения;

– VSPACE - вертикальный отступ;

– ALT - альтернативный текст, служит для обозначения изображения.

Команды, служащие для гиперсвязи с другими HTML-документами и ресурсами Интернет: [9]

– <A HREF="fail.htm">и</A>или<A HREF="http://www.ru">и</A> - гиперсвязи;

– <ADDRESS><A HREF="mailto:nick@mail.ru">nick@mail.ru </ADDRESS>- гиперсвязь с адресом электронной почты.

Таблица - сетка для показа данных в строках и столбцах, а также средство для форматирования текста:

– <TABLE> и </TABLE> - теги для вставки таблицы в HTML документ.

Параметры тега <TABLE>:[7]

– BGCOLOR - цвет фона;

– BORDER - ширина бордюра;

– WIDHT - ширина таблицы.

3.2.Практичекое применение языка гипертекстовой разметки HTML

Приведем пример использования языка разметки HTML для создания логической структуры сайта «Электронный магазин» (рисунок 6): [6]

Рисунок 6 – Структура сайта

Стоит отметить, что при создании сайта будут созданы несколько веб-страниц, которые в результате будут объединены в одну логическую структуру. [13]

Рассмотрим создание веб-страницы «Исходная».

Для этого нужно ввести код: [5]

<!начало создания веб-страниц>

<HTML>

<!заголовок страниц>

<HEAD>

<!название страницы>[15]

<TITLE>

Интернет магазин

</TITLE>

<!закрытие тега заголовка>

</HEAD>

<!создание тела страницы>[12]

<body>

<!вставка логотипа>

<!вставка горизонтальной линии>

<hr>

<!вставка гиперссылки на страницу Фирма>

<!вставка гиперссылки на страницу Предложения>

<!Вставка гиперссылки на страницу Гостевая>[18]

<!закрытие тела страницы>

</body>

<!окончание веб-страницы>

</HTML>

В результате выполненных действий получим (рисунок 7).

Рассмотрим код страницы, которая откроется после нажатия на гиперссылку О нашей фирме:[6]

	<HTML>
	<HEAD>
	<TITLE>

Рисунок 7 – Созданная страница Исходная

	Интернет магазин [7]
	</TITLE>
	</HEAD>
	<body>
	<img src="mc1.jpg">
	<hr>
	<center><h1>Информация о фирме</h1></center> [2]
	<hr><pre>
	<b>1.1 Вводная часть</b>
	<font size=2 face=Arial>Лакокрасочные материалы имеют две основные функции: декора¬тивную и защитную. Они защищают дерево от гниения, металл - от кор¬розии, образуют твердые защитные пленки, предохраняющие изделия от разрушающего влияния атмосферы и других воздействий и удлиняющие срок их службы, при этом придают изделиям красивый внешний вид. [11]
	По сравнению с металлическими покрытиями, нанесенными луже¬нием, никелированием, хромированием и т.д., лакокрасочные покрытия наиболее долговечны, для их нанесения не требуется дополнительное, сложное оборудование, и они легче возобновляются. Поэтому такие по¬крытия широко применяются в быту, во всех отраслях промышленности, на транспорте и строительстве.
	Свойства лакокрасочных покрытий зависят не только от качества применяемых лакокрасочных материалов, но и от таких факторов, как способ подготовки поверхности к окраске, правильный выбор и соблюде¬ние технологического режима окраски и сушки. [16]
	</font><b>1.2 Общие понятия</b>
	Лакокрасочные материалы классифицируют по химическому составу, виду и преимущественному назначению материала.
	К лакокрасочным материалам относятся лаки, краски, эмали, грун¬товки, шпатлевки.
	Для облегчения восприятия определений лакокрасочной продук¬ции вводятся следующие понятия: [5]
	Дисперсные системы - это микронеоднородные системы, состоя¬щие из двух или большего числа фаз, одна из которых - дисперсная фаза -обладает достаточно высокой дисперсностью и распределена в другой фа¬зе (в окружающей дисперсионной среде) - газе, жидкости или твердом те¬ле - в виде мелких частиц. [9]
	Дисперсность - степень раздробленности вещества на частицы. 1ем мельче частицы, тем больше дисперсность. На практике размер частиц дисперсных систем находится в пределах от 0,001 до 0,00001 см.
	К дисперсиям относятся: [5]
	<ol>
	<li>Суспензии - системы, в которых частицы твердой фазы распределе¬ны в жидкой среде во взвешенном состоянии. Суспензиями являются го¬товые краски, шпатлевки.
	<li>Эмульсии - системы, в которых мельчайшие капельки жидкой фазы распределены в жидкой среде. Примерами эмульсий могут служить кровь, молоко. [20]
	<li>Истинные растворы — системы переменного состава из двух и бо¬лее компонентов. Раствор называется истинным потому, что вещества действительно и самопроизвольно растворяются в подходящем раствори¬теле с образованием гомогенной (однородной) системы. К истинным рас¬творам относятся, например, растворы в воде соды, спирта, кислоты.
	<li>Лак - раствор пленкообразующих веществ в органических раство¬рителях или воде с введением добавок (сиккативов, пластификаторов, отвердителей), образующий после высыхания твердую, прозрачную, одно¬родную пленку, прочно сцепленную с поверхностью. Лаки придают по¬верхности декоративный вид и создают защитные покрытия.
	<li>Краски ~ суспензии пигментов или их смеси с наполнителями в олифе, эмульсии, латексе, образующие после высыхания однородную не¬прозрачную твердую окрашенную пленку.
	<li>Эмаль - суспензия пигмента или смеси их с наполнителями в лаке с введением сиккативов, растворителей и других добавок, образующие по¬сле высыхания непрозрачную твердую окрашенную пленку. [1]
	<li>Грунтовка - суспензия пигмента или смеси пигментов и наполни¬телей в связующем веществе. Образующая после высыхания однородную непрозрачную пленку с хорошей адгезией к подложке (адгезия — прилипа¬ние, сцепление). Грунтовки образуют нижние слои покрытий, создавая на¬дежное сцепление верхних слоев покрытия с окрашиваемой поверхно-стью. Кроме того, они защищают металл от коррозии, выделяют структуру древесины, закрывают поры материала, выравнивают и создают однород¬ную поверхность перед окраской. [2]
	<li>Шпатлевка (шпатлевочная масса, подмазка) - густая, вязкая масс состоящая из пигментов, наполнителей или их смеси в олифе, лаке ил' другом связующем веществе с введением добавок или без них, наносимая для заполнения неровностей и углублений, сглаживания неровностей ок¬рашиваемой поверхности.
	<li>Разные материалы - к этим материалам относятся смывки - жид¬кости для снятия, удаления старых лакокрасочных покрытий, пасты по¬лировочные, шлифовочные, уплотнительные, составы полирующие, ней¬трализующие, моечные, а также замазки, уплотнители, ускорители, отвердители, мастики. [5]
	</ol>
	</pre>
	<a href="Исходная.html"><img align="right" src="back.jpg"></a>
	</body>
	</HTML>

Получим (рисунок 8):

Рисунок 8 – Страница с информацией о фирме

Страница с предложениями имеет такой код:[2]

	<HTML>
	<HEAD>
	<TITLE>
	Интернет магазин [3]
	</TITLE>
	</HEAD>
	<body>
	<img src="mc1.jpg" align="left"><br><br><br><br><br><br> <br><br><br><br><br> [4]
	<a href="Исходная.html"><img align="right" src="back.jpg"></a><br><br><br> [11]
	<hr>
	<img src="topoffers.jpg" border="1"><br><br>
	<a href ="Краски.html"><img src="toplkm.jpg" border="2"></a><br><br>
	<a href ="Двери.html"><img src="topdoors.jpg" border="2"></a><br><br>
	<a href ="Герметики.html"><img src="topgerm.jpg" border="2"></a><br>
	</body>
	</HTML> [5]

Результат отображения кода в браузере (рисунок 9):[10]

Рисунок 9 – Страница с предложениями

Страница Гостевая книга создана с использованием следующего программного кода:[3]

	<HTML>
	<HEAD>
	<TITLE>
	Интернет магазин [13]
	</TITLE>
	</HEAD>
	<body>
	<img src="mc1.jpg" align="left"><br><br><br><br><center><h2>ИНТЕРНЕТ-МАГАЗИН</h2></center><br><br><br><br><br>
	<hr><center>
	<table><form>
	<tr>
	<td><h3>ФИО</h3>
	<input type=text></td><td>
	<h3>Заказ</h3>
	<textarea cols=25 rows=5></textarea >
	</tr>
	<tr>
	<td aligh="top"><h3><b>Расчет</b></h3> [15]
	<label><input type=checkbox>По позициям</label><br>
	<label><input type=checkbox>По группам</label><br>
	<label><input type=checkbox>Итоговый</label></td>
	<td aligh="top"><h3><b>Оплата</b></h3>
	<label><input type=radio>Наличная</label><br>
	<label><input type=radio>Безналичная</label><br>
	</tr>
	</table>
	<input type="submit" value="Заказать">&nbsp&nbsp&nbsp&nbsp&nbsp<input type="reset" value="Отменить"></form> [14]
	</center> [5]
	<br>
	<a href="Исходная.html"><img align="right" src="back.jpg"></a><br><br><br>
	</body>
	</HTML>

В результате получим:[15]

Рисунок 10 – Страница Гостевая

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

ЗАКЛЮЧЕНИЕ

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

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

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

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

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

В работе были выполнены задачи:

– рассмотрена литература по теории ЯП высокого уровня;

– выполнено описание терминов, что связаны с понятием гипертекстового языка программирования;

– дана характеристика языка разметки HTML;

– проведено рассмотрение основных тегов для гипертекстовой разметки;

– на примере рассмотрено применение языка гипертекстовой разметки HTML.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

Пауэлл Т.А. Полное руководство по HTML. -Мн.: ООО "Попурри", 2013. - 912 с.
Дубаков М.А. Создание Web-страниц: искусство верстки. – Мн.: Новое знание, 2014. – 287 с.
Браун М., Ханикатт Д. HTML в подлиннике. Спб.: Издательство “БХВПетербург” – 2014. - 1048с.
Титтел Эд, Бурмейстер Мэри. HTML 4 для "чайников". 5-е издание. М.: Издательский дом “Диалектика -Вильямс” – 2017. - 368с.
Божко А. Dreamweaver 4. Базовый курс. - Москва: издательство "ДЕСС КОМ", 2013. - 448 с.
Дубаков М.А. Веб-мастеринг средствами CSS. - СПб.: БХВ-Петербург, 2015. – 544 с.
Молли Э. Хольцшлаг. Использование HTML и XHTML. Специальное издание. М.: Издательский дом “Вильямс” – 2014. - 736с
Коржинский С.Н. Настольная книга Web-мастера: эффективное применение HTML, CSS и Javascript. - М.:Издательский торговый дом "Кнорус", 2014. - 320с.
Гончаров А. Самоучитель HTML. – СПб.: Питер, 2015. – 240с.
Шафран Э. Создание Web-страниц: самоучитель. - СПб.: Питер, 2016. - 320 с.
Белунцов В. Новейший самоучитель по разработке Web-страниц. - Москва, издательство "ДЕСС-КОМ", 2014. - 448 с.
Федорчук А. Как создаются Web-сайты. Краткий курс. - СПб.: Издательство "Питер", 2014. - 224с.
Шапошников И.В. Web-сайт своими руками. - СПб.: БХВ-СанктПетербург, 2015. -224 с.
Фролов А.В., Фролов Г.В. Создание Web-приложений: Практическое руководство. - М.: Издательско-торговый дом "Русская редакция", 2014. - 1040 с.
Полонская Е.Л. Язык HTML. Самоучитель. М.: Издательский дом “Вильямс” – 2013. - 320 с.
Джейсон Кренфорд Тиге. DHTML и для Internet. М.: Издательство “НТ Пресс”- 2015. - 520c.
Кастро Э. Создание Web-страниц с помощью HTML. М.: Издательство “НТ Пресс”- 2015. - 144с.
Дунаев Вадим. HTML, скрипты и стили. Спб.: Издательство “БХВПетербург” – 2018. - 1024с
Холмогоров В. Основы Web-мастерства. Учебный курс. - СПб.: Питер, 2015. - 352 с.
Мальчук Е.В. HTML и CSS. Самоучитель. М.: Издательский дом “Вильямс” –2018. - 416 с.