Хрома - Дерек Джармен Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com Хрома - Дерек Джармен
Блаженные шуты - Харрис Джоан Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com Блаженные шуты - Харрис Джоан
Храм Солнца - Иван Бунин Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com Храм Солнца - Иван Бунин
Перстень царя Соломона - Олег Рыбаченко Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com Перстень царя Соломона - Олег Рыбаченко
Наши удары по врагу - Разгром немецких войск под Москвой - неизвестен Автор Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com Наши удары по врагу - Разгром немецких войск под Москвой - неизвестен Автор
НеУГОдный президент - Максим Шахов Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com НеУГОдный президент - Максим Шахов
История магии и суеверий от древности до наших дней - Альфред Леманн Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com История магии и суеверий от древности до наших дней - Альфред Леманн
Категории
Меню
Самые читаемые
Хрома - Дерек Джармен Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Блаженные шуты - Харрис Джоан Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Авторы
Автор неизвестен Агата Кристи Айзек Азимов Антон Чехов БСЭ БСЭ Вокруг Света Газета Завтра Газета Ги Мопассан Илья Мельников Кир Булычев Коллектив авторов Лев Толстой Максим Горький Марина Серова Роберт Шекли Рэй Брэдбери Сборник Станислав Лем Стивен Кинг неизвестен Автор
Показать все теги
Лучшие книги » Компьютеры и Интернет » Интернет » Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Алексей Гладкий

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

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

Шрифт:

-
+

Интервал:

-
+

Закладка:

Сделать
1 ... 11 12 13 14 15 16 17 18 19 ... 50
Перейти на страницу:

Товары:

<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 ... 11 12 13 14 15 16 17 18 19 ... 50
Перейти на страницу:
Пожаловаться на ошибку
Похожие материалы
Как раскрутить и разрекламировать Web-сайт в сети Интернет - Александр Загуменов Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Как раскрутить и разрекламировать Web-сайт в сети Интернет - Александр Загуменов
27.12.2023 - 21:25
Профессиональный поиск в Интернете - Алексей Кутовенко Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Профессиональный поиск в Интернете - Алексей Кутовенко
18.04.2024 - 01:01
Комментарии

Copyright @ bibliotekaonline.com 2024 - 2025. Все права защищены.


Почта для связи: readebookcom@gmail.com