Веб-Самоделкин. Как самому создать сайт быстро и профессионально
Шрифт:
Форматирование текста
Используя имеющиеся знания, напишем программный код так, чтобы поначалу выделить на странице ее название и заголовок первого уровня, которым будет являться текст Добро пожаловать!. Этот код представлен в листинге 1.1.
Листинг 1.1. Выделение названия страницы и заголовка первого уровня
<html>
<head>
<title>Компания "Торговый мир"</title>
</head>
<body>
<h1>Добро
Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли». Уже более пяти лет мы занимается продажей товаров и оказанием услуг. Ниже представлены списки основных позиций, которые мы рады предложить.
Товары:
промышленные товары;
строительные материалы;
одежда, обувь;
детские игрушки.
Услуги:
грузоперевозки;
ответственное хранение;
юридическое консультирование.
Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.
</body>
</html>
Обратите внимание: в отличие от рассмотренного ранее примера, заголовок веб-страницы мы заключили не только в теги <title> </title>, но и поместили в контейнер <head> </head>.
Сохраним программный код в файле под названием Компания.html, и откроем его в окне Интернет-обозревателя. Результат выполненных действий показан на рис. 2.15.
Рис. 2.15. Название страницы и заголовок первого уровня
Теперь изменим программный код так, чтобы первая после заголовка фраза была написана курсивом, во второй фразе слова пяти лет – подчеркнутым шрифтом, а третья фраза – полужирным шрифтом. Кроме этого, слова Товары и Услуги будут у нас начинаться с новой строки.
Листинг 1.2. Первые действия по форматированию текста
<html>
<head>
<title>Компания "Торговый мир"</title>
</head>
<body>
<h1>Добро пожаловать!</h1>
<i>Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли»</i>. Уже более <u>пяти лет</u> мы занимается продажей товаров и оказанием услуг. <b>Ниже представлены списки основных позиций, которые мы рады предложить</b>.<br>
Товары:
промышленные товары;
строительные материалы;
одежда, обувь;
детские игрушки.<br>
Услуги:
грузоперевозки;
ответственное хранение;
юридическое консультирование.
Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.
</body>
</html>
Сохраним выполненные изменения, и откроем
Рис. 2.16. Использование разных стилей шрифта и разделение текста на абзацы
Теперь нам нужно перечень предлагаемых компанией товаров представить в виде маркированного списка. Об этом читайте далее.
Создание маркированного списка
Напомним, что маркированный список задается с помощью тегов <ul> </ul>, причем каждый элемент списка должен помечаться тегами <li> </li>. Теперь доработаем наш программный код так, как показано в листинге 1.3.
Листинг 1.3. Создание маркированного списка
<html>
<head>
<title>Компания "Торговый мир"</title>
</head>
<body>
<h1>Добро пожаловать!</h1>
<i>Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли»</i>. Уже более <u>пяти лет</u> мы занимается продажей товаров и оказанием услуг. <b>Ниже представлены списки основных позиций, которые мы рады предложить</b>.<br>
Товары:
<ul>
<li>промышленные товары</li>
<li>строительные материалы</li>
<li>одежда, обувь</li>
<li>детские игрушки</li>.
</ul><br>
Услуги:
грузоперевозки;
ответственное хранение;
юридическое консультирование.
Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.
</body>
</html>
Теперь сохраним выполненные изменения и откроем веб-страницу в окне Интернет-обозревателя. Результат выполненных действий показан на рис. 2.17.
Рис. 2.17. Создание маркированного списка
Теперь нам нужно перечень предлагаемых компанией услуг представить в виде нумерованного списка. Об этом рассказывается в следующем разделе.
Создание нумерованного списка
Напомним, что нумерованный список задается с помощью тегов <ol> </ol>, причем каждый элемент списка должен помечаться тегами <li> </li>. Теперь доработаем наш программный код так, как показано в листинге 1.4.
Листинг 1.4. Создание нумерованного списка