Списки та інтерактивні форми на web-сторінках

Списки на Web-сторінках

Досить часто при розміщенні тексту на Web-сторінках зручно використовувати списки в різних варіантах:

  • нумеровані списки, коли елементи списку ідентифікуються за допомогою чисел;
  • марковані списки, коли елементи списку ідентифікуються за допомогою спеціальних символів (маркерів);
  • списки визначень, що дозволяють складати переліки визначень в так званій словникової формі.

Можливе створення і вкладених списків, причому вкладений список може за своїм типом відрізнятися від основного.

Нумеровані списки. Нумерований список розташовується всередині контейнера

    , а кожен елемент списку визначається тегом
  1. . За допомогою атрибута TYPE тега
      можна задати тип нумерації: арабські цифри (за замовчуванням), "I" (римські цифри), "а" (малі літери) і ДР.


      1. Системні програми
      2. прикладні програми
      3. системи програмування

      Маркери. Маркований список розташовується всередині контейнера

        , а кожен елемент списку визначається тегом
      • . За допомогою атрибута TYPE тега
          можна задати вид маркера списку: "disc" (диск), "square" (квадрат) або "circle" (коло):

          На Web-сторінку "Програми" помістимо нумерований список, що містить перелік основних типів програмного забезпечення комп'ютера.

          У другій елемент основного нумерованого списку вставимо вкладений маркований список (рис. 6.30).

          Мал. 6.30. Web-сторінка "Програми", яка містить нумерований список з вкладеним маркованих списком

          Список визначень. Список визначень розташовується всередині контейнера

          /
          . Усередині нього текст оформляється у вигляді термінів, які виділяються одинарними тегами
          і визначень, які слідують за одинарними тегами
          .

          Web-сторінку "Словник" ми представимо у вигляді словника комп'ютерних термінів (рис. 6.31):


          процесор
          Центральний пристрій комп'ютера, що виробляє обробку інформації в двійковому коді.
          Оперативна пам'ять
          Пристрій, в якому зберігаються програми і дані.

          Мал. 6.31. Web-сторінка "Словник", що містить словник термінів

          1. Які теги використовуються для створення нумерованих списків? Маркованих списків?

          Завдання для самостійного виконання

          6.14. Практичне завдання. Створити Web-сторінку "Програми" з нумерованим списком і вкладеним маркованих списком.

          6.15. Практичне завдання. Створити Web-сторінку "Словник" зі списком термінів.

          Інтерактивні форми на Web-сторінках

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

          Розмістимо на сторінці «Анкета» анкету для відвідувачів, щоб з'ясувати, хто з наших відвідувачів, з якими цілями і за допомогою яких програм отримує і використовує інформацію з мережі Інтернет, а також з'ясуємо, яку інформацію вони хотіли б бачити на нашому сайті.
          Вся форма полягає в контейнер

          Текстові поля.
          Для отримання цих даних розмістимо в формі два однорядкових текстових поля для введення інформації.
          Текстові поля створюються за допомогою тега

          зі значенням атрибута TYPE = "text". Атрибут NAME є обов'язковим і служить для ідентифікації отриманої інформації. Значенням атрибута SIZE є число, за-дає довжину поля введення в символах.
          Для того щоб анкета «читалася», необхідно розділити рядки за допомогою тега перекладу рядка

          Перемикачі.
          Далі, ми хочемо з'ясувати, до якої групи користувачів відносить себе відвідувач. Запропонуємо вибрати йому один з декількох варіантів: учень, студент, вчитель.
          Для цього необхідно створити групу перемикачів ( «радіокнопок»). Створюється така група за допомогою тега «INPUT» зі значенням атрибута TYPE = "radio". Всі елементи в групі повинні мати однакові значення атрибута NAME. Наприклад, NAME = "group".
          Ще одним обов'язковим атрибутом є VALUE, якому дамо значення «учень», «студент» і «вчитель». Значення атрибута VALUE має бути унікальним для кожної «радиокнопки», так як при її виборі саме воно передається серверу.

          Прапорці.
          Далі, ми хочемо дізнатися, якими сервісами Інтернету наш відвідувач користується найбільш часто. Тут із запропонованого переліку він може вибрати одночасно кілька варіантів, позначивши їх прапорцями.
          Прапорці створюються за допомогою тега «INPUT» зі значенням атрибута TYPE = "checkbox". Прапорці, об'єднані в групу, можуть мати різні значення атрибута NAME. Наприклад, NAME = "boxl", NAME = "box2" і т. Д.

          в якому кожен елемент списку визначається тегом

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

          Текстова область.
          На закінчення поцікавимося, що хотів би бачити відвідувач на наших сторінках, яку інформацію слід було б в них додати. Так як ми не можемо знати заздалегідь, наскільки великим буде відповідь читача, відведемо для нього текстову область з лінійкою прокрутки. У таке поле можна ввести досить довгий текст.
          Створюється текстова область за допомогою тега

          з обов'язковими атрибутами: NAME, що задає ім'я області, ROWS, визначальним число рядків, і COLS - число стовпців області.

          Відправка даних з форми.
          Відправка введеної в фор-му інформації здійснюється за допомогою клацання по кнопці.
          Кнопка створюється за допомогою тега "INPUT". Атрибуту TYPE необхідно присвоїти значення «submit», а атрибуту VALUE, який задає напис на кнопці, привласнити значення «Відправити».

          .


          1. Які теги використовуються для створення на формі текстових полів? Перемикачів? Прапорців? Списків, що розкриваються? Текстових областей?
          2. Які значення необхідно присвоїти атрибутам тега