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

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

Содержание:

ВВЕДЕНИЕ

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

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

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

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

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

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

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

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

Для достижения цели необходимо выполнить ряд задач, а именно:

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

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

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

1. Виды и инструменты Web-разработки

1.1 Виды и классификация языков программирования

Программирование (programming) – теоретическая и практическая деятельность, связанная с созданием программ. В узком смысле слово «программирование» обозначает процесс разработки программы на определенном языке программирования.

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

Программирование – это развитая отрасль хозяйственной деятельности, связанная со значительными затратами материальных, трудовых и финансовых ресурсов [1, 3].

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

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

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

Программа (program, routine) – упорядоченная последовательность команд (инструкций) компьютера для решения задачи. Программы предназначены для машинной реализации задач.

Программное обеспечение (software) – совокупность программ обработки данных и необходимых для их эксплуатации документов. Задача программирования – разработка программного обеспечения ЭВМ.

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

Программа, или логически связанная совокупность программ на носителях данных, снабженная программной документацией, называется программным средством (ПС) [2].

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

Теория программирования включает следующие направления:

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

В программировании четко выделяются разделы, представленные на рисунке 1.1.

Рисунок 1.1 - Предметная область программирования

Методология программирования – изучает методы с точки зрения основ построения. Это объединенная единым философским подходом совокупность методов, применяемых в процессе разработки программного обеспечения. Метод – путь исследования или познания, теория, учение.

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

Методология программирования определяется как совокупность механизмов, применяемых в процессе разработки программного обеспечения и объединенных одним общим философским подходом [4, 5].

Ядро методологии определяются способом описания алгоритмов. Основные методологии:

методология императивного программирования;
методология объектно-ориентированного программирования;
методология функционального программирования;
методология логического программирования.

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

Рисунок 1.2 - Классификация языков программирования

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

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

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

Метод объектно-ориентированной декомпозиции заключается в выделении объектов и связей между ними. Метод поддерживается концепциями инкапсуляции, наследования и полиморфизма [1, 6].

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

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

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

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

Декларативные языки являются, как правило, концептуально целостными. Языки программирования, поддерживающие данную парадигму программирования: FP; Mercury; Picat; Prolog; SQL; HTML.

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

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

1.2 Описание языка HTML

HyperTextMarkupLanguage (HTML) – гипертекстовый язык разметки, язык WorldWideWeb. Этот язык является базовым в области технологий создания сайтов, так как относительно легок в освоении. Но чрезмерная простота является и его недостатком. HTML прекрасно отвечал требованиям раннего периода развития технологий создания сайтов, но с дальнейшим его развитием возникли существенные проблемы. HTML предоставляет следующие возможности:

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

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

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

Для формирования файла HTML нет необходимости в использовании мощного текстового процессора, более удобно использование, например, редактора Notepad (Блокнот). Содержимое HTML-страниц представлено в гипертекстовом виде, что предполагает наличие в документе, отображаемом на экране, выделенных определенным образом мест, щелкнув мышью по которым, можно переместиться в другую часть этой же страницы или на другую страницу [5].

1.3 История развития HTML

История создания языка HTML начинается с 1986 года, когда Международной организацией по стандартизации (ISO) был принят стандарт для верстки и маркировки текстов, получивший название «Standard Generalized Markup Language» - SGML.

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

Создатели SGML ставили задачу, что бы полученный язык мог был понят любой вычислительной системой и программным обеспечением, а так же правильно интерпретировал бы исходный тест с маркировкой и всегда выдавал одинаковый результат [15, 16].

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

В 1991 году, британским ученым Тимом Бернерсом Ли, сотрудником Европейского института физики частиц (CERN) в Женеве, была разработана система передачи гипертекстовой информации через интернет. А за основу нового языка был взят SGML.

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

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

Для просмотра размеченного текста были разработаны специальные программы, получившие название «браузеры». Основной задачей данных программ не было просмотр текста, задача стояла более глобальная, просмотр текста размещенного в сети интернет в виде страниц и в последствии в виде сайтов [14].

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

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

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

Браузер Mosaic

Рисунок 1.3 – Браузер Mosaic

В апреле 1994 года была создана организация, в сфере деятельности которой была сеть интернет и ее обеспечение. Данная организация получила название «Консорциум W3C» (World Wide Web Consortium), основной задачей которого было приведение к стандартам деятельности в области создания интернет-страниц и содержимого, работа интернет протоколов и прочие интернет-технологии.

В связи с тем, что официально спецификацию языка HTML под версией 1.0 не выпускали, организация W3C начала заниматься подготовкой спецификации HTML 2.0. Разработка спецификации HTML 2.0 была завершена в сентябре 1995 года. Из больших дополнений был добавлен лишь механизм форм для отсылки информации с компьютера пользователя на сервер.

Параллельно организацией «Консорциум W3» было произведено обсуждение следующей версии стандарта HTML 3.0. спецификация данного стандарта следующего поколения была предложена в марте 1995 года.

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

В стандарт HTML 3 были добавлены возможности нового средства - иерархические стилевые спецификации (Cascading Style Sheets, CSS). Данные возможности были введены что бы удовлетворить возрастающие потребности разработчиков браузеров и интернет страниц в новых элементах и компонентах веб-страниц для отображения и создания динамики страницам интернет.

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

Сейчас W3C занимается разработкой пятой версии языка HTML. Ее черновой вариант стал доступен 20 ноября 2007 года. На текущий момент разработка новой редакции спецификации приостановлена, а впоследствии отменена.

В параллель ведется также разработка XHTML (Extensible Hypertext Markup Language) - расширяемый язык разметки гипертекста. В нем предъявляются более строгие требования к синтаксису, чем в HTML. XHTML 1.0 был утвержден 26 января 2000 года в качестве рекомендации W3C. Вариант XHTML 1.1 одобрен в качестве рекомендации консорциума 31 мая 2001года.

Со спецификациями HTML всегда можно ознакомиться на официальном сайте Консорциума W3C по адресу http://www.w3c.org.

Последний стандарт HTML имеющий широкой распространение и поддерживаемый всеми разработчиками Web-контента 4.0 включал в себя помимо описания и интерпретации конструкторов языка HTML еще работу со стилями и Java-скриптами [13].

Отдельным направлением в работе с HTML можно выделить динамический HTML. Dynamic HTML или DHTML — это способ (подход) создания интерактивного веб-сайта, использующий сочетание статичного языка разметки HTML, встраиваемого (и выполняемого на стороне клиента) скриптового языка JavaScript, CSS (каскадных таблиц стилей).

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

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

2. Описание и возможности HTML

2.1 Основные конструкторы HTML

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

Любой докумнет гипертекстовой разметки, независимот от того исопльзуется ли он для размещения в сети интернет или локальном просомтре в браузере или другой специализированной для простомтра интернет-страниц программе имеет единую структуру.

Любой HTML-документ состоит из набора HTML-элементов и текста. Специальные теги создают определенную структуру докумнета, которую каждый браузер должен интерпретировать одинаково. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега [8, 9].

Основными компонентами HTML являются:

Тег (tag). Тег HTML это компонент, который командует Web- броузеру выполнить определенную задачу с текстом или элементами размещенными между открывающим и закрывающим тегом.

Атрибут (или аргумент). Атрибут HTML изменяет тег. Например, можно выровнять абзац или изображение внутри тега.

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

Теги представляют собой зарезервированные последовательности символов, начинающиеся с < (знака меньше) и заканчивающиеся >(знаком больше).

Закрытие тега отличается от открытия только наличием символа «/», наклонная черта [10, 14].

Все HTML-элементы делятся на пять типов:

пустые элементы — <area>, <base>, <br>, <col>, <embed>, <hr>, <img>,<input>, , <link>, <menuitem>, <meta>, <param>, <source>, <track>, <wbr>;
элементы с неформатированным текстом - <script>, <style>;
элементы, выводящие неформатированный текст - <textarea>, <title>;
элементы из другого пространства имён - MathML и SVG;
обычные элементы - все остальные элементы.

HTML- программа должна начинаться тегом <HTML> и заканчиваться тегом </HTML>

<HTML>

...... (здесь будут другие теги программы)

</HTML>

HTML- программы состоят из двух основных частей: заголовка и тела. Заголовок ограничивается парой тегов<HEAD> и </HEAD>, а тело - парой тегов<BODY> и </BODY>.

В результате HTML- программа выглядит следующим образом:

<HTML>

<HEAD>

... (здесь будет заголовок)

</HEAD>

<BODY>

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

</BODY>

</HTML>

Кроме того, каждая HTML- программа имеет заголовок, который помещается в заголовок окна броузера. Заголовок окна броузера создается при помощи двух тегов <TITLE> и </TITLE> и содержится между тегами <HEAD> и</HEAD>.

Тогда программа принимает следующий вид:

<HTML>

<HEAD>

<TITLE> Основы HTML </TITLE> ;

</HEAD>

<BODY>

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

</BODY>

</HTML>

Цвет в HTML-документах представляется в виде трех двухбайтных составляющих, записанных в шестнадцатеричной системе счисления. То есть можно при использовании ссылки на цвет одном из параметров тэга <body> вместо "WHITE" указать "#ffffff", где # указывает ,что следующее число шестнадцатеричное, а каждая из световых компонент [15, 16].

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

<table bgcolor=.. border=.. width=.. cellpadding=.. cellspacing=..> - объявление таблицы и определение некоторых параметров

bgcolor - цвет фона таблицы
width - ширина таблицы в абсолютных и относительных единицах
border - ширина рамки таблицы (в пикселах)
cellpadding - отступ от границ при визуализации табличного контента (в пикселах)
cellspacing - промежуток между ячейками таблицы (в пикселах)
<caption> - заголовок таблицы.Как правило, применяется после объявления таблицы

<th> - заголовок каждого столбца.

<tr> - объявление строковых элементов таблицы. Используется в паре с тэгом <td>, определяющим вертикальные разделяющие линии при визуализации таблицы. То есть область, ограничиваемая тэгом <tr> включает в себя одну или несколько областей, ограниченных тегом <td>, определяющим, что будет находится в каждой ячейке на данной строке.

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

Для обеспечения гиперссылок используется тег <a href=" "> .

Тег <a href=" "> - тэг гипертекстовых ссылок. Может адресовать документы в глобальной сети или выоплнять переходы на структурные части докумнета, используя локальные метки, так называемые якоря, расставленные по докумнету [16].

Параметр href содержит полный (с адресом ЭВМ, содержащий данный файл) путь и имя файла.

Ссылка может быть указана как на файл на данной машине (необязательно html-документ), так и на документв размещенный в сети интернет.

Параметр href содержит символ # и имя метки (якоря). Например, для метки 001 ссылка выглядит как <a href="#001">.Метки задаются тем же тэгом, но с другим параметром <a name=" ">, где name - имя метки (# - не используется!).Примет для 001 - <a name="001">.

2.2 Описание программных средств для создания сайтов

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

Программы создания сайтов

Программы создания сайтов делятся на две основные категории: визуальные и не визуальные редакторы или wiziwig-редакторы и non-wiziwig-редакторы.

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

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

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

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

Редактор html может быть двух различных категорий: визуальный редактор html и не визуальный редактор html.

Визуальные редакторы html

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

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

MacromediaDreamweaver – визуальный редактор html. Устроит и начинающего создателя сайтов и более опытного вебмастера. В некоторых вебстудиях является стандартом де-факто использование этой программы, но по субъективному мнению автора - это не самая удобная вещь для профессионального разработчика. Большим плюсом программы является отличная совместимость программы с другими продуктами фирмы Macromedia.

Dreamweaver также обеспечивает полно-функциональную среду написания кода, которая включает инструментальные средства редактирования кода (например, раскраска кода или проверка закрытия тегов) и справочная информация по HTML, CSS, JavaScript, язык разметки ColdFusion (CFML), MicrosoftActiveServerPages (ASP) и страницы JavaServer (JSP). Dreamweaver также дает возможность строить динамические станицы использующие сервер-технологии CFML, ASP.NET, ASP, JSP и PHP [2, 6].

NamoWebEditor – довольно неплохой визуальный редактор html. Также, как и два предыдущих редактора html, подходит и начинающим и специалистам средней квалификации. Содержит большое количество готовых шаблонов (около 200) и множество отдельных элементов для создания кнопок и баннеров, поддерживает Java, СУБД и динамичную навигацию.

Не визуальные редакторы html

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

HTMLPad 2004 Pro – отличный не визуальный редактор html, поддерживает возможность редактирования кода и быстрой вставки основных элементов разметки для html, CSS, PHP, JavaScript, VBScript, ASP, SSI. Встроенная подсветка кода, создание и редактирование собственных меню пользователя, возможность создания новых элементов для быстрой вставки, что очень ускоряет разработку после настройки под нужды пользователя.

CSEHTMLValidatorProfessional – утилита для проверки написанного html-кода. Находит ошибки в коде странички и выводит их список пользователю, содержит встроенный редактор html кода, конвертор тегов, шаблоны, мастера подсказок. Очень удобная вещь для поиска ошибок перед публикацией сайта в интернет [15].

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

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

3 Описание применения HTML

Для работы с документом подготовлен текст. произведено его предварительное форматирование. Текст состоит из 4 разделов (с названием) по 5 абзацев в каждом. Статья содержит 2 рисунка. Рисунки сохранены отдельно с расширением JPG. Текст сохранен в файле Текст.docx.

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

Рисунок 3.1 – Создание проекта HTML страницы (без шаблона и разделения)

Создается отдельная папка с названием «Сайт» и в данную папку сохраняется проект страницы HTML с названием файла Article.html. Созданный проект содержит простую структуру HTML страницы, рисунок 3.2.

Рисунок 3.2 – Созданный проект HTML

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

Рисунок 3.3 – Вставка текста в документ

Дальнейшая работа заключается в расстановке тэга абзаца<P></P> для начала и окончания абзаца. По правилам HTML можно расставлять только начальный тэг <P>, рисунок 3.4.

Рисунок 3.4 – Создание структуры документа тэгом <P>

Добавляется тэг <body bgcolor=#E6E6E6>, указывающий, что для всего текста цвет фона будет одного цвета, рисунок 3.5.

Рисунок 3.5 – Добавление цвета фона документа

Создается структура заголовков в документе. Заголовки заключаются между тегами <h1> и </h1>: <h1>Заголовок</h1>.

Для подзаголовков можно использовать теги <h2>, <h3>,…, <h6> (вместо <h1>), рисунок 3.6.

Рисунок 3.6 – Создание заголовков <h1> и <h2>

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

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

Для создания ссылок на разделы необходимо выставить в заголовках разделов «якоря» с помощью атрибута id: <h1 id=”part1”> Заголовок первого раздела </h1>.

Затем на выставленные якоря можно ссылаться с помощью тега <a href=”#…”>, подставляя вместо троеточия имя якоря: <a href=”#part1”> Нажмите на ссылку, чтобы перейти к первому разделу.

Эти ссылки нужно вставить в качестве элементов нумерованного списка, который создается при помощи тегов <ol> и <li> (вместо слов «Первый элемент списка» и т.д.):

<ol>

<li> Описание SQL Server </li>

<li> История создания</li>

<li> Описание СУБД Microsoft SQL Server 2012</li>

<li> Контроль за активностью пользователей</li>

</ol>

Нумерованный список добавляется перед первым абзацем, но после заглавия документа, рисунок 3.7.

Рисунок 3.7 – Добавление нумерованного списка оглавления

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

<ol>

<li><a href="#part1"> Описание SQL Server</a> </li>

<li><a href="#part2"> История создания</a></li>

<li><a href="#part3"> Описание СУБД Microsoft SQL Server 2012</a></li>

<li><a href="#part4"> Контроль за активностью пользователей</a></li>

</ol>

После добавления ссылок в HTML странице нумерованный список представляет ссылки на разделы документа, рисунок 3.8.

Рисунок 3.8 – Ссылки на разделы документа

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

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

ЗАКЛЮЧЕНИЕ

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

Были выполнены все поставленные на исследование задачи:

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

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

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

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

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

Агальцов В.П., Титов В.М. Информатика для экономистов: Учебник М.: Форум; Инфра-М, 2014.

Аналитический портал рынка веб-разработок «CMSmagasine» [Электронный ресурс] // Рейтинг CMS. URL.: http://www.ratings.cmsmagazine.ru/cms_analytics/ Доступен 25.03.19. – Загл. с экрана. – Электронный документ.
Бенкен Е. С. PHP, MySQL, XML: программирование для Интернета. / Е. С. Бенкен – СПб.: BHV, 2013. – 570 с.
Борисенко А.А. Web-дизайн. Просто как дважды два. — М.: Эксмо, 2016. – 320 с.
Гвоздева В.А. Информатика, автоматизированные информационные технологии и системы: Учебник / В.А. Гвоздева. - М.: ИД ФОРУМ: НИЦ ИНФРА-М, 2015. - 544 с.
Дронов В. А. HTML 5, CSS 3 и Web 2.0. Разработка современныхWeb-сайтов. — СПб.: БХВ-Петербург, 2014. — 416 с.
Заботина Н.Н. Проектирование информационных систем. Учебное пособие для студентов высших учебных заведений, обучающихся по специальности 080801 "Прикладная информатика (по областям) и другим экономическим специальностям" / Н. Н. Заботина – Москва: ИНФРА-М, 2013 – 329с.
Информационные системы и технологии управления: учебник / под ред. Г.А. Титоренко. - 3-е изд., перераб и доп. - М.: ЮНИТИ-ДАНА, 2014. - 591c.
Макнейл П. Веб-дизайн. Идеи, секреты, советы. - СПб.: Питер, 2012. – 272 с.
Нильсен Я. Веб-дизайн. – М.: СимволПлюс, 2016. – 512 с.
Основы информационных технологий [Электронный ресурс]/ С.В. Назаров [и др.].— Электрон. текстовые данные.— М.: Интернет-Университет Информационных Технологий (ИНТУИТ), 2016.— 530 c.— Режим доступа: http://www.iprbookshop.ru/16712.— Доступен 30.03.19. – Загл. с экрана. – Электронный документ.
Программирование Realcoding.Net - [Электронный портал]. - Электрон. дан. - Режим доступа:www.realcoding.net. - Доступен 02.04.19. – Загл. с экрана. – Электронный документ.
Справочник по HTML и CSS. Интернет-издание. http://htmlbook.ru Доступен 04.04.19. – Загл. с экрана. – Электронный документ.
Стивен Шафер. HTML, XHTML и CSS. Библия пользователя. — М.: «Диалектика», 2010. — 656 с.
Э. Фримен, Э. Фримен. Изучаем HTML, XHTML и CSS. — СПб.: «Питер», 2010. — 656 с.
Эд Титтел, Джефф Ноубл. HTML, XHTML и CSS для чайников. — М.: «Диалектика», 2011. — 400 с.