Веб-Самоделкин — страница 12 из 26

Оформление содержимого веб-страницы

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

Предположим, что наша веб-страница, которую мы назовем Компания «Торговый мир», должна содержать следующий текст.


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

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

Товары:

промышленные товары;

строительные материалы;

одежда, обувь;

детские игрушки.

Услуги:

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

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

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

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


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

Форматирование текста

Используя имеющиеся знания, напишем программный код так, чтобы поначалу выделить на странице ее название и заголовок первого уровня, которым будет являться текст Добро пожаловать!. Этот код представлен в листинге 1.1.


Листинг 1.1. Выделение названия страницы и заголовка первого уровня

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

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

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

Товары:

промышленные товары;

строительные материалы;

одежда, обувь;

детские игрушки.

Услуги:

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

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

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

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


Обратите внимание: в отличие от рассмотренного ранее примера, заголовок веб-страницы мы заключили не только в теги , но и поместили в контейнер .

Сохраним программный код в файле под названием Компания.html, и откроем его в окне Интернет-обозревателя. Результат выполненных действий показан на рис. 2.15.

Рис. 2.15. Название страницы и заголовок первого уровня


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


Листинг 1.2. Первые действия по форматированию текста

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

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

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

Товары:

промышленные товары;

строительные материалы;

одежда, обувь;

детские игрушки.

Услуги:

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

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

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

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


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

Рис. 2.16. Использование разных стилей шрифта и разделение текста на абзацы


Теперь нам нужно перечень предлагаемых компанией товаров представить в виде маркированного списка. Об этом читайте далее.

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

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

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


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

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

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

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

    Товары:


    Услуги:

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

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

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

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


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

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


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

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

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

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


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

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

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

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

      Товары:


      Услуги:

      1. грузоперевозки

      2. ответственное хранение

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

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


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

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


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

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


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

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

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

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

      Товары:

      Услуги:

      1. грузоперевозки

      2. ответственное хранение

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

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


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

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


      Далее мы рассмотрим, каким образом можно представить данные на веб-странице в табличном виде.

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

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

      Напомним, что для создания таблицы используются теги

      , и . Теперь отредактируем программный код так, как показано в листинге 1.6.


      Листинг 1.6. Представление данных в табличном виде

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

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

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

      ТоварыУслуги
      промтоварыгрузоперевозки
      стройматериалыответственное хранение
      одежда, обувьконсультирование
      детские игрушкикредитование

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


      Теперь сохраним выполненные изменения с помощью команды главного меню Файл ► Сохранить либо нажатием комбинации клавиш Ctrl+S, и откроем веб-страницу в окне Интернет-обозревателя. Результат выполненных действий представлен на рис. 2.20.

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


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

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

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

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

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


      Листинг 1.7. Форматирование таблицы

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

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

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

      ТоварыУслуги
      промтоварыгрузоперевозки
      стройматериалыответственное хранение
      одежда, обувьконсультирование
      детские игрушкикредитование

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


      Теперь сохраним выполненные изменения с помощью команды главного меню Файл ► Сохранить либо нажатием комбинации клавиш Ctrl+S, и откроем веб-страницу в окне Интернет-обозревателя. Результат выполненных действий представлен на рис. 2.21.

      Рис. 2.21. Форматирование таблицы


      Ширина рамки таблицы задается соответствующим значением атрибута border. В нашем примере ему присвоено значение 2, поэтому толщина рамки таблицы составляет 2 пикселя.

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

      . Напомним, что с помощью данного атрибута можно задать расстояние от содержимого ячеек до линий рамки таблицы. В нашем примере присвоим атрибуту cellpadding значение 10 – в этом случае расстояние от содержимого ячеек таблицы до ее рамок будет составлять 10 пикселей.

      Кроме этого, с помощью атрибута align тега

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

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


      Листинг 1.8. Центрирование таблицы и ячеек

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

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

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

      ТоварыУслуги
      промтоварыгрузоперевозки
      стройматериалыответственное хранение
      одежда, обувьконсультирование
      детские игрушкикредитование

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


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

      Рис. 2.22. Центрирование таблицы и содержимого ячеек


      Далее вставим в наш документ изображение. Об этом читайте в следующем разделе.

      Вставка изображений

      Напомним, что для вставки изображений в языке HTML используется тег . Этот тег имеет обязательный атрибут src, необходимый для указания адреса изображения. Если файл с изображением находится в том же каталоге, что и файл веб-страницы, то в качестве адреса изображения достаточно ввести имя его файла. Такой путь к файлу изображения называется относительным. Если же файл изображения находится в другом месте (например, на другом веб-узле), то значением атрибута src будет являться абсолютный путь к файлу (например, http://www.resurs.com/images/file.jpg).

      В нашем примере файл изображения будет иметь название Образец.jpg. Доработаем наш программный код так, как показано в листинге 1.9.


      Листинг 1.9. Вставка изображения в документ

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

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

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

      ТоварыУслуги
      промтоварыгрузоперевозки
      стройматериалыответственное хранение
      одежда, обувьконсультирование
      детские игрушкикредитование

      Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта. Мы работаем без выходных, с 9-00 до 20-00, в субботу до 19-00, в воскресение до 18-00. Возможен отпуск товаров и получение услуг без осуществления предварительной оплаты.


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

      Рис. 2.23. Вставка графического объекта


      В нашем примере мы для тега использовали не только атрибут src, но и атрибут align, которому присвоили значение left. Благодаря этому изображение размещено слева таким образом, что идущий после него текст обтекает это изображение справа от него. Отметим, что само изображение в программном коде выделено тегами абзаца

      .

      Итак, полученных знаний вполне достаточно для того, чтобы не только иметь общее представление о веб-разработке и, в частности, о языке программирования HTML, но и самостоятельно создавать веб-страницы. С помощью соответствующих тегов вы можете выполнять любое оформление веб-страниц, вставлять разные элементы (бегущие строки, анимационные изображения, мультимедийные объекты, и т.д.), структурировать и систематизировать контент, и т. д.

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

      Глава 3.

      Оглавление

      К карточке книги