Приложение 4. Редактор HTML-документов

Назначение

С помощью HTML-редактора создаются гипертекстовые документы (HTML-документы).

Создание HTML-документа

Для создания нового HTML-документа выберите пункт Файл – Новый. В открывшемся диалоге выбора вида документа выберите HTML-документ и нажмите кнопку ОK. Программа создаст пустой документ и выведет на экран окно для его редактирования.

На закладке Редактирование производится ввод и редактирование документа в визуальном режиме, на закладке Текст можно редактировать создаваемый документ в формате HTML. На закладке Просмотрпросматривают результат редактирования.

Сохранение

HTML-документ можно сохранить в файл для того, чтобы его в дальнейшем можно было бы открыть, просмотреть и отредактировать. Чтобы сохранить HTML-документ в виде файла, выберите пункт Файл – Сохранить.

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

Редактирование

Создание HTML-документа напоминает работу с обычным текстовым редактором.

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

Ввод текста

Ввод текста подробно описан в параграфе «Текстовый редактор». Поэтому в текущем разделе будут указаны только особенности ввода текста при создании HTML-документа.

Форматирование текста

Текст HTML-документа можно форматировать, т. е. устанавливать его стиль (фонт, размер, наклон, отступы, выравнивание и т. д.).

При копировании текста из других текстовых редакторов, например, Microsoft Office Word, сохраняется исходное форматирование текста.

Вставка и работа с таблицей

В HTML-документ можно вставлять таблицы. Для вставки таблицы выберите пункт Таблица – Вставить таблицу. В открывшемся диалоге укажите количество строк и колонок.

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

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

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

Вставка картинки

В HTML-документ можно вставлять картинки.

Для вставки картинки выберите пункт Элементы – Картинка. В открывшемся диалоге укажите адрес картинки (путь и имя файла картинки) или выберите файл в стандартном диалоге выбора файла. В поле Текст введите поясняющий текст, который будет появляться в режиме просмотра в виде ярлыка при помещении указателя мыши над картинкой.

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

Значение выравнивания	Действия
Не задано	Картинка располагается в тексте
Лево	Картинка располагается в новой строке, прижата к левой границе документа
Право	Картинка располагается в новой строке, прижата к правой границе документа
Поверх текста	Картинка располагается в тексте с выравниванием по центру картинки
Низ	Картинка располагается в тексте с выравниванием текста по нижней границе картинки
Центр	Картинка располагается в тексте с выравниванием текста по центру картинки
Верх	Картинка располагается в тексте с выравниванием текста по верхней границе картинки

Если требуется поместить картинку в рамку, в реквизите диалога Рамка укажите толщину рамки. Если толщина не указана или равна 0, то рамка не рисуется.

Для вставки картинки нажмите кнопку ОK.

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

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

Картинку можно копировать. Копирование осуществляется стандартным образом (с помощью буфера обмена или с помощью мыши при нажатой клавише Ctrl).

Картинку можно расположить в любой части HTML-документа (текст, таблица и надпись).

Надпись

Надпись – специальный объект HTML-документа. Он представляет собой область, в которую можно поместить текст, таблицу, картинку или другую надпись. При просмотре надписи вложенные объекты непрерывно прокручиваются справа налево.

Для вставки линии выберите пункт Элементы – Надпись.

Размер надписи можно изменить. Для этого выделите надпись и с помощью мыши переместите маркер надписи.

Надписи можно располагать в тексте и в таблице.

Ссылки

Для создания гипертекста в HTML-документе можно создавать ссылки.

Выделите объект (текст или картинку), выберите пункт Элементы – Ссылка. На экран выводится диалог формирования ссылки.

Приложение 4. Редактор HTML-документов - student2.ru

Рис. 234. Диалог формирования ссылки

В реквизите Адрес укажите адрес гиперссылки или имя закладки. Для создания ссылки нажмите кнопку ОK.

Выделенный объект форматируется в соответствии со стилем гиперссылки. Обычно это синий цвет текста с подчеркиванием. Картинка помещается в рамку синего цвета.

В режиме просмотра при подведении указателя мыши к объекту, содержащему ссылку, указатель меняет форму на форму «руки».

Закладки

Для создания внутренней ссылки в HTML-документе можно создавать закладки.

Выделите объект (текст или картинку), в главном меню выберите пункт Элементы – Закладка. На экран выводится диалог формирования закладки.

Приложение 4. Редактор HTML-документов - student2.ru