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

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

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

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

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

---

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