Создание маркированного списка

Напомним, что маркированный список задается с помощью тегов

, причем каждый элемент списка должен помечаться тегами
• . Теперь доработаем наш программный код так, как показано в листинге 1.3.

  Листинг 1.3. Создание маркированного списка

  Компания "Торговый мир"

  Добро пожаловать!

  Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли». Уже более пяти лет мы занимается продажей товаров и оказанием услуг. Ниже представлены списки основных позиций, которые мы рады предложить.
  

  Товары:

  • промышленные товары
  • строительные материалы
  • одежда, обувь
  • детские игрушки.

    
    

    Услуги:

    грузоперевозки;

    ответственное хранение;

    юридическое консультирование.

    Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

    Теперь сохраним выполненные изменения и откроем веб-страницу в окне Интернет-обозревателя. Результат выполненных действий показан на рис. 2.17.

    Рис. 2.18. Создание нумерованного списка

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

    Очевидно, что для улучшения эргономических качеств веб-страницы слова Товарыи Услугилучше представить в виде заголовков – только не первого, а какого-нибудь другого уровня. Ниже приведен программный код, в котором эти слова преобразованы в заголовки второго уровня (листинг 1.5).

    Листинг 1.5. Формирование заголовков второго уровня

    Компания "Торговый мир"

    Добро пожаловать!

    Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли». Уже более пяти лет мы занимается продажей товаров и оказанием услуг. Ниже представлены списки основных позиций, которые мы рады предложить.
    

    Товары:

    • промышленные товары
    • строительные материалы
    • одежда, обувь
    • детские игрушки.

      Услуги:

      1. грузоперевозки
      2. ответственное хранение
      3. юридическое консультирование

         Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

         Теперь сохраним выполненные изменения и откроем страницу в окне Интернет-обозревателя – результат показан на рис. 2.19.

         Рис. 2.20. Представление данных в табличном виде

         Как видно на рисунке, информация, которая ранее была оформлена в виде маркированного и нумерованного списков, теперь представлена в табличном виде. Перечень товаров содержится в столбце Товары, а перечень услуг – в столбце Услуги.

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

         Первая задача решается с помощью атрибута borderтега

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

         Для этого нам необходимо отредактировать программный код веб-страницы так, как показано в листинге 1.7.