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

Урок 1. Перше знайомствоУрок 2. Красиві документиУрок 4. ГіпертекстУрок 5. ГрафікаУрок 6. Конструктор документівУрок 7. Як ми жили без таблиць?


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

До цих пір розмова йшла про те, як повинен виглядати документ на екрані користувача. Це, звичайно, дуже важливо. Але не менш важливу роль в непростій праці програміста відіграє зовнішній вигляд самої програми.

Записувати програму потрібно так, щоб сенс її конструкцій був максимально зрозумілий. Для такої рекомендації є ряд вагомих причин.

  • Ясно написану програму легше налагоджувати, тобто проводити звичайний цикл дослідів “подивився результат – підправив програму”. Адже в зрозуміло написаних кодах легше знайти відповідність екранного зображення командам, які це зображення будують.
  • Зрозумілу програму легше супроводжувати, тобто, вносити в неї зміни по закінченні якогось часу. Програмістський досвід настійно стверджує, що через місяць після написання програми, автор геть забуває, де, що і навіщо він писав в її вихідних рядках. Також завжди існує ймовірність того, що вашу програму буде модифікувати хтось інший.
  • Користувач, переглядаючи документ, завжди може заглянути на вашу програмістську кухню. Для цього достатньо клацнути позицію “Показати у вигляді HTML” в меню “Вид” браузера. І все те, що ви вважали інтимним, постане перед допитливим поглядом. Зрозуміло, що про вас, як про програмістів, буде складено відповідну думку.
  • Нарешті, відомо, що літають тільки красиві літаки. Добре працюють тільки зрозуміло написані програми, зовнішній вигляд яких викликає почуття естетичного задоволення.
Ілюстрація 1 Текст програми
Ілюстрація 2 Текст програми Легко зрозуміти цю програму?

Як записувати текст програми

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

  1. Записуйте імена тегів заголовними буквами, а імена атрибутів і їх значення – малими. Синтаксис мови HTML допускає запис команд в будь-якому регістрі, проте краще слідувати наведеної вище рекомендації. Як правило, текст, призначений для виводу на екран браузера, складається в основному з маленьких символів, тому “великі” HTML-команди будуть на цьому фоні виділятися.
    Приклад

    <HTML>
    
      <HEAD>
        <META content="charset=windows-1251">
        <TITLE>Одне мистецтво</TITLE>
      </HEAD>
    
      <BODY bgcolor=#0471D2 text=#FFFF33>
        <BLOCKQUOTE>
        <H1>Одне мистецтво</H1>
        <P>
        <STRONG>Питер Хейн</STRONG>
        (перевод Н.А.Прохоровой)
        </BLOCKQUOTE>
            <BIG><BIG>
              <P>
                Одно есть<BR>
                искусство,<BR>
                ни боле,<BR>
                ни мене:<BR>
                все делать<BR>
                искусно,<BR>
                а не<BR>
                боле-мене.
            </BIG></BIG>
      </BODY>
    
    </HTML>
    
    Вид документа
  2. Не записуйте HTML-програми із занадто довгими рядками. Для їх перегляду доводиться застосовувати горизонтальну прокрутку вікна редактора, а це дуже незручно.
    
    


  3. Намагайтеся записувати теги на окремих рядках так, щоб по запису можна було визначити вкладення команд один в одного. Рекомендація досягається використанням рядкового зміщення запису тега вправо на 2 позиції по відношенню до зовнішнього блоку.
    Теги найпершої команди програми – <HTML></HTML> записуються з 1 позиції рядка.

    <HTML>
      <HEAD>
        ...
      </HEAD>
    
      <BODY>
        ...
      </BODY>
    
    <HTML>
    
    Всі інші команди знаходяться всередині цієї основної. Тому їх запис повинен бути зміщений на дві позиції вправо.
    Теги всередині блоків <HEAD></HEAD> и <BODY></BODY>
    зміщуються на дві позиції вправо по відношенню до початку блоку. Зміщення продовжується і далі з дотриманням правила вкладеності.

    Нижче представлений приклад структури програмиЗбірник газетних вирізок“.

    <HTML>
    
      <HEAD>
        <META>
        <TITLE> ... </TITLE>
      </HEAD>
    
      <BODY>
        <H1> ... </H1>
        <HR>
        <H2> ... </H2>
        <P>
        ...
        <BLOCKQUOTE>
          <FONT>
            <P>
            ...
            <BLOCKQUOTE>
              <H3< ... /H3>
              <SMALL>
                <P>
                ...
              </SMALL>
            </BLOCKQUOTE>
            <P>
            ...
            <P>
            ...
          </FONT>
        </BLOCKQUOTE>
      </BODY>
    
    <HTML>
    

    Зауваження. Якщо команда (від початкового до кінцевого тегу) невелика, то її можна записувати в одному рядку разом з тегами.

  4. При необхідності використовуйте в ваших програмах коментарі. Коментарем в HTML вважається конструкція <!––>.
    Все, що розташовується в середині цієї структури (на місці, позначеному трикрапками) браузером ігнорується. Коментарі зручно застосовувати в наступних випадках:

    • для документування складних мовних конструкцій;
    • для тимчасового відключення групи команд при налагодженні.

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

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

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

Маркований список Нумерований список
Список вопросов Пятачка:

  • Какой он, этот Слонопотам?
  • Неужели очень злой?
  • Идет ли он на свист? И если идет, то зачем?
  • Любит ли он поросят или нет?
  • И как он их любит?
Список слов из словаря людоедки Эллочки:

  1. Хамите.
  2. Хо-хо!
  3. Знаменито.
  4. Мрачный.
  5. Мрак.
  6. Жуть.

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

Кожен елемент цього списку браузер помічає міткою на початку рядка, а самі рядки зміщує вправо.

Команда UL, яка задає маркований список має наступну структуру:

Опис команди Приклад
<UL>
<LI>
перший елемент списку</LI>
<LI>другий елемент списку</LI>
. . .
<LI>останній елемент списку</LI>
</UL>
<UL>
<LI>
Какой он, этот Слонопотам?</LI>
<LI>Неужели очень злой?</LI>
. . .
<LI>И как он их любит?</LI>
</UL>

Зауваження. Кінцевий тег </LI> є необов’язковим.

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

Початковий тег Вид мітки на екрані
<UL>
  • диск
<UL type = circle>
  • окружність
<UL type = disc>
  • диск
<UL type = square>

  • квадрат

Приклад маркованого списку. Програма.

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

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

Нумерований список задається за допомогою команди <OL>.

Опис команди Приклад
<OL>
<LI>
перший елемент списку</LI>
<LI>другий елемент списку</LI>
. . .
<LI>останній елемент списку</LI>
</OL>
<OL>
<LI>
Хамите.</LI>
<LI>Хо-хо!</LI>
. . .
<LI>Жуть.</LI>
</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, IV, …)
<OL type = i> Нумерація виконується малими римськими цифрами (i, ii, iii, iv, …)

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

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

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

Вкладені списки

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

Приклад 1. Програма. (вкладені марковані списки)

Приклад 2. Програма. (вкладені нумеровані списки)

Приклад 3 . Программа. (вкладені змішані списки)

Натисніть кнопку “Скидання”, потім виберіть вірні відповіді на запитання.

  1. Запишіть ім’я команди для завдання маркованого списку


  2. Запишіть ім’я команди для завдання нумерованого списку


  3. Запишіть ім’я атрибута для завдання виду мітки списку


  4. Яка програма формує список:
    • Все, що може зіпсуватися – псується.
    • Все що не може зіпсуватися – псується теж.
    <UL type=disc>
      <LI> ...
      <LI> ...
    </UL>
    
    <UL type=circle>
      <LI> ...
      <LI> ...
    </UL>
    
    <UL type=square>
      <LI> ...
      <LI> ...
    </UL>
    


  5. Яка програма формує список:
    1. Якщо здається, що роботу зробити легко, це неодмінно буде важко.
    2. Якщо на вигляд вона важка, значить, виконати її абсолютно неможливо.
    <UL type=i start=5>
      <LI> ...
      <LI> ...
    </UL>
    
    <OL type=i start=5>
      <LI> ...
      <LI> ...
    </OL>
    
    <OL type=i start=v>
    <LI> ...
    <LI> ...
    </OL>
    
    <OL type=v>
    <LI> ...
    <LI> ...
    </OL>
    


  6. Яка програма формує список:
    1. Закон виборчого тяжіння. Предмет впаде таким чином, щоб завдати найбільшої шкоди.
      • Слідство Дженнінг. Ймовірність того, що бутерброд впаде маслом вниз прямо пропорційна вартості килима.
      • Слідство Кліпштейна. Впустять саму тендітну деталь.
    2. Будь-який предмет, якщо його впустять, закочується в найнедоступніший кут.
      • Слідство. Закочуючи в кут, він вдарить вас по пальцях ноги.
    <OL type=1 start=1>
      <LI> ...
        <UL type=disc>
          <LI> ...
          <LI> ...
        </UL>
      <LI> ...
        <UL type=disc>
          <LI> ...
        </UL>
    </OL>
    
    <OL type=1 start=1>
      <LI> ...
        <UL type=disc>
          <LI> ...
        </UL>
      <LI> ...
        <UL type=disc>
          <LI> ...
          <LI> ...
        </UL>
    </OL>
    
    <UL type=1 start=1>
      <LI> ...
        <OL type=disc>
          <LI> ...
          <LI> ...
        </OL>
      <LI> ...
        <OL type=disc>
          <LI> ...
        </OL>
    </UL>
    
    <OL type=1 start=1>
      <LI> ...
        <UL type=disc>
          <LI> ...
        </UL>
      <LI> ...
        <UL type=disc>
          <LI> ...
        </UL>
    </OL>
    


  7. Нижче представлений фрагмент програми. Позначте рядки, що містять помилки c точки зору браузера.
    <ol type = 1>
    <LI>
    <UL type= i>
    <Li>
    <UL type = disk>
    <LI>
    </UL>
    </UL>
    </OL>


Щоб побачити результат роботи, натисніть кнопку "Оцінка".

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


  2. Проведіть невелике дослідження над вашим браузером. Що відбудеться, якщо для атрибута start:
    • вибрати дуже велике числове значення (в арабській, буквеній та римській системах нумерації);
    • задати значення нульовим або від’ємним;
    • записати назву атрибута з помилкою (наприклад, stat = 2);
    • записати значення параметра з помилкою (наприклад, start = i).
  3. Напишіть програму для відображення списку.


  4. Напишіть програму для відображення списку.


  5. Напишіть програму для відображення списку.


  6. Напишіть програму для відображення на екрані вашого розпорядку дня.

ЗмістЗмістНа урок 2Урок 2На урок 4Урок 4