1. Создайте документ, содержащий все основные элементы формы:

• текстовое поле;

• текстовую область;

• список для выбора;

• check box;

• radio buttons;

• кнопку для завершения ввода данных при помощи формы

• скрытое поле;

• кнопку очистки полей;

• выбор файла для отправки.

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

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

• визуальное выделение элементов формы можно осуществить с помощью тега <fieldset>.. .</fieldset>. Возможно создание вложенных конструкций. Посмотрите в справочнике имеются ли атрибуты у данного тега.

• заголовок группы элементов создается с помощью тегов <legend>.</legend>.

• сгруппируйте, созданные вами формы с помощью указанных тегов.

Рекомендации по оформлению отчета:

Отчет должен содержать все рассмотренные в работе формы и способы их описания.

Контрольные вопросы (ответы на вопросы найдите самостоятельно с помощью прилагаемых к работе электронных справочников и учебников):

1. Тег и атрибуты создания формы.

2. Что означает атрибут method в теге form.

3. Смысл атрибута maxlength.

4. Как создать раскрывающийся список?

Практическая работа № 11 «html-редакторы»

Цель работы: знакомство с различными HTML-редакторами, основы работы с редактором Htmlpad Fisherman, разработка сайта (электронного учебника) с помощью HTML-редактора.

Теоретические сведения:

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

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

• программы, имеющие в своем составе визуальные редакторы¹ (design-based editor)

• средства, которые автоматически формируют необходимый HTML-код, позволяя разрабатывать Web-страницы в режиме WYSIWYG (What You See Is What You Get — что вижу, то и получаю);

• программы-редакторы (code-based editors), которые предоставляют редактор и вспомогательные средства для автоматизации написания кода.

• большинство современных текстовых редакторов умеют сохранять документы в формате HTML.

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

В практической работе используется HtmlPad Fisherman - программа относится к редакторам тегов. Основные характеристики программы следующие:

• Русскоязычный интерфейс

• Поддержка проектов

• Создание файлов по шаблону

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

• Неограниченные Undo/Redo

• Коллекция русскоязычных справочников по HTML, XML, CSS, JavaScript, PHP, SQL, Perl, ASP и др.

• Использование подцветок синтаксиса (HTML, XML, CSS, JavaScript, ASP, PHP, Perl и др.) с полной настройкой каждого языка (70 параметров) и возможностью добавлять свои

• Работа с кодировками (открытие и сохранение в нужной кодировке, а также изменение кодировки текста)

• Полезная панель инструментов с кнопками быстрой вставки (с полной настройкой кнопок и закладок)

• Мощное дерево готовых скриптов, тегов HTML, функций PHP, ASP, JavaScript

• Огромная, но выверенная палитра HTML цветов и удобный выбор цвета (с негативом).

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

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

• Дерево скриптов, содержащий набор сценариев из разных языков программирования.

• Дерево автотекста. Простая в программировании и полезная при работе. Теперь Вы всегда можете сформировать Вашу часто используемую информацию на группы для быстрой вставки. В дистрибутив программы уже включены все теги с атрибутами HTML, функциями и событиями JavaScript, функциями PHP и ASP.

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

Работа с текстом / Текстовое поле

Имеет смысл перечислить и основные особенности работы с текстовым полем:

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

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

• Для массового набора текста или его редактирования бывает удобно воспользоваться возможностью многострочного сдвига. Вам надо подровнять сдвиг у текста? Нет проблем. Достаточно выделить нужные Вам строки и нажать Tab для сдвига текста вправо (к каждой строке добавляется знак табуляции) или Shift+ Tab, для сдвига влево (у каждой строки удаляется либо знак табуляции, либо соответствующее число пробелов)

• Вы можете включить номера строк (слева от текста), а также невидимые символы (пробелы и табуляции) для удобства редактирования.

• Поскольку основное направление программы - редактирование web-страниц, очень важен своевременный просмотр результата (в том числе скриптов). В HtmlPad Fisherman предусмотрена возможность внешнего (F11) и внутреннего (F12) просмотра.

Выполнение работы:

Работа с редактором HTMLpad

1. Внимательно ознакомьтесь с интерфейсом и управлением программой, посмотрите меню.

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

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

• Для отображения на странице текущей даты и времени

• Для изменения рисунка при наведении на другой элемент

• Для появления при загрузке информационного сообщения

• Для отображения версии браузера Разберитесь в содержимом и структуре скриптов.

3. Запустите программу HTMLpad 2010. Сравните интерфейс и основные возможности программ.

4. Запишите в отчет имеется ли в этой программе дерево скриптов и опишите алгоритм добавления на страницу скрипта.

5. Запишите в каких форматах могут быть сохранены создаваемые страницы.

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

Работа с редактором NVU

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

2. NVU это Open Source проект Linspire по созданию визуального (WYSIWYG) HTML редактора. Как и для Firefox и Thunderbird основой для создания NVU послужила часть кода выделенного из Mozilla - код Mozilla Composer. К созданию NVU был привлечен главный архитектор Mozilla Composer - Дэниел Глазман. На сегодняшний день NVU имеет уже достаточно много возможностей отсутствующих в оригинальном Mozilla Composer. Это Менеджер сайтов, позволяющий редактировать страницы на удаленном сервере, встроенный Редактор CSS c предварительным просмотром стилей, цветная подсветка синтаксиса в режиме редактирования кода, проверка орфографии и многое другое. Разработчики обещают поднять его функциональность до уровня FrontPage и Dreamweaver.

3. Изучите основные возможности программы и пункты меню.

4. Создайте с помощью программы страницу с фреймами, которая содержит:

• рисунок в качестве фона;

• таблица с объединенными по горизонтали несколькими ячейками;

• графические ссылки (кнопки);

• бегущую строку;

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

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

Контрольные вопросы:

1. Что такое дерево проектов.

2. Какие типы HTML-редакторов бывают.

3. Что такое дерево скриптов.

4. Запишите код скрипта отображающего версию браузера.

5. Опишите алгоритм (несколько способов) добавления ссылки на страницу в HTMLpad.

6. Как создать в программе NVU внешнюю таблицу стилей и привязать её к документу. Запишите в отчет.