Урок 3. Красивые программы

Структура, стиль и внешний вид программы

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

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

Ясно написанную программу легче отлаживать, то есть проводить обычный цикл опытов “посмотрел результат в браузере — подправил программу в текстовом редакторе”. Ведь в понятно написанных кодах легче найти соответствие экранного изображения командам, которые это изображение строят.
Понятную программу легче сопровождать, то есть вносить в нее изменения по прошествии какого-то времени. Программисты по собственному опыту знают, что через месяц после написания программы автор начисто забывает, где, что и зачем он писал в ее исходных строках. Также всегда существует вероятность того, что вашу программу будет модифицировать кто-то другой.
Пользователь, просматривая документ, всегда может заглянуть на вашу программистскую кухню. Для этого достаточно щелкнуть позицию Показать в виде HTML в меню Вид браузера. И все то, что вы считали интимным, предстанет перед любопытствующим взором. Понятно, что о вас, как о программисте, будет сложено соответствующее мнение.
Наконец, известно, что летают только красивые самолеты. Хорошо работают только понятно написанные программы, внешний вид которых вызывает чувство эстетического удовольствия.

Иллюстрация 1	Текст программы
Иллюстрация 2	Текст программы	Легко понять эту программу?

Как записывать текст программы

Рекомендуются следующие правила.

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

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

Вид документа

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

<HTML> <HEAD> <META content="charset=windows-1251"> <TITLE>Коллекция занимательных историй</TITLE> </HEAD> <BODY bgcolor=white text=black> <H1>Коллекция занимательных историй</H1> <HR> <P> Коллекцию занимательных историй продолжает следующий рассказ. <BLOCKQUOTE> <P>  Смотрю, говорил он, прямо под паровоз летим! Прибавить скорость нельзя, тормозить поздно. Ну думаю, сейчас всем крышка!.. И вдруг мне в голову что-то ударило: повернуть надо <P>  Это я тебя по голове ударил,  отозвался Пестренький.  Я испугался, понимаешь </BLOCKQUOTE> <P align = right> <CITE>Незнайка в Солнечном городе</CITE><BR>Николай Носов </BODY> </HTML>

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

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

Теги внутри блоков <HEAD>...</HEAD> и <BODY>...</BODY> смещаются на две позиции вправо по отношению к началу блока. Смещение продолжается и дальше с соблюдением правила вложенности.

Ниже представлен пример структуры программы “Сборник газетных вырезок”.

Замечание

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

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

Программирование списков

Продолжим рассмотрение команд, которые помогают делать текст на экране красивым.

HTML допускает задание в документах списков двух типов:

Маркированный список	Нумерованный список
Список вопросов Пятачка: Какой он, этот Слонопотам? Неужели очень злой? Идет ли он на свист? И если идет, то зачем? Любит ли он поросят или нет? И как он их любит?	Список слов из словаря Эллочки: Хамите. Хо-хо! Знаменито. Мрачный. Мрак. Жуть.

Маркированный список

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

Команда UL, задающая маркированный список, имеет следующую структуру:

Описание команды	Пример

Замечание

Конечный тег </LI> не является обязательным.

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

Начальный тег	Вид метки на экране
`<UL>`	диск
`<UL type=circle>`	окружность
`<UL type=disc>`	диск
`<UL type=square>`	квадрат

Пример маркированного списка
Программа

Нумерованный список

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

Нумерованный список задается при помощи команды <OL>.

Описание команды	Пример

Замечание

Конечный тег </LI> не является обязательным.

Вид номера определяется значением атрибута type.

Начальный тег	Вид номера на экране
`<OL>`	Нумерация выполняется арабскими цифрами (1, 2, 3,...)
`<OL type=1>`	Нумерация выполняется арабскими цифрами (1, 2, 3,...)
`<OL type=A>`	Нумерация выполняется прописными буквами (A, B, C,...)
`<OL type=a>`	Нумерация выполняется строчными буквами (a, b, c,...)
`<OL type=I>`	Нумерация выполняется большими римскими цифрами (I, II, III,...)
`<OL type=i>`	Нумерация выполняется малыми римскими цифрами (i, ii, iii,...)

Естественную нумерацию элементов списка (с единицы) можно изменить при помощи атрибута start=n. Число n задает начальное значение нумерации. Если для нумерации используются буквы или римские цифры, то стартовое значение равно n-му элементу в системе нумерации (например, 4 означает D или IV).

Пример нумерованного списка
Программа

Замечание

Мои браузеры Microsoft Internet Explorer и Netscape Navigator делают фиксированный отступ для вывода элементов списка на экран. Нумерация при этом, смещается от отступа к левому краю окна. Когда номер достаточно большой, места не хватает, и номер “налезает” на соответствующий элемент списка. Для исключения этого неприятного эффекта в программе примера использована команда <BLOCKQUOTE>. Эта команда “насильственным” путем увеличивает левый отступ списка.

Вложенные списки

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

Пример 1 Программа (вложенные маркированные списки)

Пример 2 Программа (вложенные нумерованные списки)

Пример 3 Программа (вложенные смешанные списки)

Зачетный класс

Нажмите кнопку “Сброс”, затем выберите верные ответы на вопросы.

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

Какая программа формирует список:

Все, что может испортиться — портится.
Все, что не может испортиться — портится тоже.

Какая программа формирует список:

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

Какая программа формирует список:

Закон избирательного тяготения. Предмет упадет таким образом, чтобы нанести наибольший ущерб.
- Следствие Дженнинга. Вероятность того, что бутерброд упадет маслом вниз прямо пропорциональна стоимости ковра.
- Следствие Клипштейна. Уронят самую хрупкую деталь.
Любой предмет, если его уронят, закатывается в самый недоступный угол.
- Следствие. Закатываясь в угол, он ударит вас по пальцам ноги.

Отметьте строки, содержащие ошибки c точки зрения браузера.

	<ol type=1>
	<LI>
	<UL type=i>
	<Li>
	<UL type=disk>
	<LI>
	</UL>
	</UL>
	</OL>

Чтобы увидеть результат работы, нажмите кнопку “Оценка”.

Задания

Посмотрите, как браузер выполняет программу. Исправьте ошибки.
<HTML> <HEAD> <META content="charset=windows-1251"> <TITLE>Телеграммы О.Бендера.<TITLE> </HEAD> <BODY> <H1 align=center>Телеграммы О.Бендера</H1> <HR> <OL type=1> <LI>Графиня изменившимся лицом бежит пруду <LI<Заседание продолжается зпт миллион поцелуев <LI>Грузите апельсины бочках братья Карамазовы <LI>Лед тронулся тчк командовать парадом буду я </OL> </BODY> </HTML>
(А.А.Зайцев, Белорецк) Проведите небольшое исследование вашего браузера. Что произойдет, если для атрибута start:
- выбрать очень большое числовое значение (в арабской, буквенной и римской системах нумерации);
- задать значение нулевым или отрицательным;
- записать название атрибута с ошибкой (например, stat=2);
- записать значение параметра с ошибкой (например, start=i).
Напишите программу для отображения списка.
Таблички на пароходе "Скрябин": — "Отдел взаимных расчетов" — "Личный стол" — "Общая канцелярия" — "Машинное отделение" — "Без дела не входить" — "Приема нет" — "Посторонним лицам вход воспрещается" — "Все справки в регистратуре"
Напишите программу для отображения списка.
План похищения Крошки Ру 1. Во-первых. Кенга бегает быстрее всех нас, даже быстрее меня. 2. Еще во-первых. Кенга никогда-никогда не сводит глаз с Крошки Ру, если он не застегнут у нее в кармашке на все пуговицы. 3. Значит, если мы хотим похитить Крошку Ру, нам надо выиграть время, потому что Кенга бегает быстрее всех нас, даже быстрее меня (см. пункт 1). 4. Идея. Если Ру выскочит из кармашка Кенги, а Пятачок туда вскочит, Кенга не заметит разницы, потому что Пятачок - Очень Маленькое Существо. 5. Как и Крошка Ру. 6. Но Кенга должна обязательно смотреть в другую сторону, чтобы не заметить, как Пятачок вскочит в карман. 7. Смотри пункт 2. 8. Еще одна идея. Вот если Пух будет говорить с ней очень вдохновенно, она может на минутку отвернуться. 9. И тогда я могу убежать с Крошкой Ру. 10. Очень быстро. 11. И Кенга сначала ничего не заметит, а заметит все только потом.
Напишите программу для отображения списка.
Оглавление I. Общие сведения о программировании 1. Введение 2. Что такое информатика? 3. Что такое информация? 4. Что такое вычислительная машина? - Общие положения - Подробнее о памяти - Ввод-вывод - Оперативная память, внешняя память - Порядок некоторых величин 5. Что может делать вычислительная машина? 6. Что такое программирование? 7. Несколько ключевых слов. 8. Краткая история информатики - Прединформатика - Протоинформатика - Информатика - Библиография - Задача II. Введение в языки программирования
Напишите программу для отображения на экране вашего распорядка дня.