Текст книги "Веб-Самоделкин. Как самому создать сайт быстро и профессионально"

• cellspacing – позволяет установить расстояние между ячейками таблицы;

• frame – позволяет установить набор отображаемых линий рамки таблицы;

• height, width – эти атрибуты позволяют установить соответственно высоту и ширину таблицы;

• rules – позволяет установить набор внутренних линий таблицы, которые будут отображаться.

<tbody> – с помощью данного тега идентифицируется группа строк данных таблицы. Тег может использоваться с перечисленными ниже атрибутами.

• align – атрибут позволяет указать способ выравнивания данных по горизонтали;

• bgcolor – определение цвета фона группы;

• char – с помощью этого атрибута можно указать символ, определяющий порядок выравнивания данных в ячейках группы;

• valign – атрибут позволяет указать способ выравнивания данных по вертикали.

<td> <th> – данные теги позволяют определить соответственно ячейку данных и ячейку заголовка таблицы. Они могут использоваться с атрибутами, которые перечислены ниже.

• align – атрибут позволяет указать способ выравнивания данных по горизонтали;

• background – выбор графического фона ячеек;

• bgcolor – выбор цвета фона ячеек;

• char – указание символа, определяющего порядок выравнивания данных в ячейках;

• colspan – с помощью этого атрибута можно соединить соседние ячейки одной строки таблицы;

• height – атрибут позволяет задать высоту ячейки;

• width – атрибут позволяет задать ширину ячейки;

• nowrap – с помощью данного атрибута можно запретить перенос слов внутри ячейки на новую строку;

• rowspan – атрибут позволяет выполнить объединение соседних ячеек одного столбца;

• valign – атрибут позволяет задать способ выравнивания данных по вертикали.

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

• align – атрибут позволяет указать способ выравнивания данных по горизонтали;

• bgcolor – выбор цвета фона группы;

• char – позволяет задать символ, определяющий порядок выравнивания данных в ячейках;

• valign – атрибут позволяет задать способ выравнивания данных по вертикали.

<title> – с помощью данного тега задается заголовок веб-страницы, который отображается вверху окна Интернет-обозревателя. О том, как пользоваться этим тегом, мы уже говорили ранее.

<tr> – тег предназначен для создания строки таблицы. Он может использоваться с перечисленными ниже атрибутами.

• align – атрибут позволяет указать способ выравнивания данных по горизонтали;

• bgcolor – выбор цвета фона;

• char – позволяет задать символ, определяющий порядок выравнивания данных в ячейках;

• valign – атрибут позволяет задать способ выравнивания данных по вертикали.

<tt> – тег позволяет отобразить текст моноширинным шрифтом.

<u> – данный тег включает подчеркивание текста.

<ul> – с помощью данного тега можно создавать маркированные списки. Использование с данным тегом атрибута type позволяет указать стиль маркированного списка.

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

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

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

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

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

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

Товары:

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

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

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

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

Услуги:

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

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

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

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

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

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

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

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

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</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.

Рис. 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. Создание нумерованного списка

<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>

Услуги:

<ol>

<li>грузоперевозки</li>

<li>ответственное хранение</li>

<li>юридическое консультирование</li>

</ol>

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

</body>

</html>

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

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

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

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

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

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

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

<h2>Товары:</h2>

<ul>

<li>промышленные товары</li>

<li>строительные материалы</li>

<li>одежда, обувь</li>

<li>детские игрушки</li>.

</ul>

<h2>Услуги:</h2>

<ol>

<li>грузоперевозки</li>

<li>ответственное хранение</li>

<li>юридическое консультирование</li>

</ol>

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

</body>

</html>

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

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

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

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

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

Напомним, что для создания таблицы используются теги <table> </table>, <tr> </tr> и <td> </td>. Теперь отредактируем программный код так, как показано в листинге 1.6.

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

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

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

<table>

<tr>

<td>Товары</td>

<td>Услуги</td>

</tr>

<tr>

<td>промтовары</td>

<td>грузоперевозки</td>

</tr>

<tr>

<td>стройматериалы</td>

<td>ответственное хранение</td>

</tr>

<tr>

<td>одежда, обувь</td>

<td>консультирование</td>

</tr>

<tr>

<td>детские игрушки</td>

<td>кредитование</td>

</tr>

</table>

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

</body>

</html>

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

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

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

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

Первая задача решается с помощью атрибута border тега <table>. Что касается выделения заголовков столбцов, то просто напишем их полужирным шрифтом, а сами эти ячейки выделим желтым цветом.

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

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

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

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

<table border="2">

<tr>

<td bgcolor="yellow"><b>Товары</b></td>

<td bgcolor="yellow"><b>Услуги</b></td>

</tr>

<tr>

<td>промтовары</td>

<td>грузоперевозки</td>

</tr>

<tr>

<td>стройматериалы</td>

<td>ответственное хранение</td>

</tr>

<tr>

<td>одежда, обувь</td>

<td>консультирование</td>

</tr>

<tr>

<td>детские игрушки</td>

<td>кредитование</td>

</tr>

</table>

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

</body>

</html>

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

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

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

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

Кроме этого, с помощью атрибута align тега <table> мы центрируем таблицу по середине веб-страницы, а этот же атрибут в применении с тегами <td> позволит нам выровнять содержимое ячеек по центру.

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

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

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

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

<table border="2" align="center" cellpadding="10">

<tr>

<td bgcolor="yellow" align="center"><b>Товары</b></td>

<td bgcolor="yellow" align="center"><b>Услуги</b></td>

</tr>

<tr>

<td align="center">промтовары</td>

<td align="center">грузоперевозки</td>

</tr>

<tr>

<td align="center">стройматериалы</td>

<td align="center">ответственное хранение</td>

</tr>

<tr>

<td align="center">одежда, обувь</td>

<td align="center">консультирование</td>

</tr>

<tr>

<td align="center">детские игрушки</td>

<td align="center">кредитование</td>

</tr>

</table>

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

</body>

</html>

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

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

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

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

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

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

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

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

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

<table border="2" align="center" cellpadding="10">

<tr>

<td bgcolor="yellow" align="center"><b>Товары</b></td>

<td bgcolor="yellow" align="center"><b>Услуги</b></td>

</tr>

<tr>

<td align="center">промтовары</td>

<td align="center">грузоперевозки</td>

</tr>

<tr>

<td align="center">стройматериалы</td>

<td align="center">ответственное хранение</td>

</tr>

<tr>

<td align="center">одежда, обувь</td>

<td align="center">консультирование</td>

</tr>

<tr>

<td align="center">детские игрушки</td>

<td align="center">кредитование</td>

</tr>

</table>

<p><img src="Образец.jpg" align="left"></p>

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

</body>

</html>

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

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

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

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

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

Глава 3.
Разработка сайтов в программе CatsHtml

В данной главе мы расскажем о том, как заниматься разработкой и администрированием веб-сайтов с помощью бесплатной программы CatsHtml. Этот HTML-редактор создан отечественными разработчиками, и распространяется бесплатно. Дистрибутив программы можно легко найти в Интернете; к скачиванию предлагается rar-архив объемом чуть более 2 Мб.

Чтобы установить программу на компьютер, запустите инсталляционный файл и следуйте указаниям Мастера установки.

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