Файл: Основы программирования на языке HTML.pdf

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.

<P align=center> <a href="1.jpg"><img src="1.jpg" width=20% alt="Схема взаимодействия клиентов с СУБД SQL Server" hspace=5px vspace=5px></a>

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

ЗАКЛЮЧЕНИЕ

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

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

---

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

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

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

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

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

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

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

---