Виктор Петин

Виктор

 

Петин

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

\ 

 

 

 

 

 

 

 

 

 

Ñàíêò-Ïåòåðáóðã 

«ÁÕÂ-Ïåòåðáóðã» 

2012

 

 

 

УДК  681.3.068 

ББК  32.973.26-018.1 

 

П29 

 

 

Петин В. А.  

 

П29   

Сайт на AJAX под ключ. Готовое решение для интернет-магазина. 2-е изд., перераб. 

и доп. — СПб.: БХВ-Петербург, 2012. — 448 с.: ил. — (Профессиональное программи-

рование). 

ISBN 978-5-9775-0769-1 

Описана  разработка  высокоинтерактивных  Web-сайтов,  основанных  на  передовой  технологии 

AJAX, работающих без перезагрузки страниц и обладающих функциональностью настольных прило-

жений.  Обучение  построено  на  сквозном  примере  создания  с  нуля  готового  решения:  интернет-

магазина, а также системы его администрирования. Во втором издании рассмотрен новый вариант ин-

тернет-магазина с расширенным функционалом, позволяющим контролировать наличие и загрузку то-

варов со склада из программы «1С: Бухгалтерия». При этом использован язык PHP, фреймворки xajax и 

jQuery, шаблонизатор Smarty и другие популярные технологии динамического формирования контента. 

Разработанный сайт создан полностью по технологии AJAX и готов к размещению в сети. На сайте из-

дательства размещены исходные коды описанного в книге интернет-магазина с расширенным функцио-

налом и интернет-магазина цифровых товаров, а также бесплатные программы для создания и отладки 

сайтов на локальной машине. 

Для Web-разработчиков 

УДК 681.3.068 

ББК 32.973.26-018.1 

 

Группа подготовки издания: 

 

Главный редактор 

Екатерина Кондукова 

Зам. главного редактора  

Евгений Рыбаков 

Зав. Редакцией 

Григорий Добин 

Редактор 

Анна Кузьмина 

Компьютерная верстка 

Татьяны Олоновой 

Корректор 

Наталия Першакова 

Дизайн серии 

Инны Тачиной 

Оформление обложки 

Марины Дамбиевой 

Зав. производством 

Николай Тверских  

 

Подписано в печать 28.10.2011.

 

Формат 70×

100

1

/

16

.

 

Печать офсетная. Усл. печ. л. 36,12.

 

Тираж 1200 экз. Заказ № 

 

"БХВ

-

Петербург", 190005, Санкт

-

Петербург, Измайловский пр., 29.

 

Санитарно

-

эпидемиологическое заключение на продукцию

 

№ 77.99.60.953.Д.005770.05.09 от 26.05.2009

 

г. выдано Федеральной службой

 

по надзору в сфере защиты прав потребителей и благополучия человека.

 

Отпечатано с готовых диапозитивов 

 

в ГУП "Типография "Наука"

 

199034, Санкт

-

Петербург, 9 линия, 12.

 

 

 

 

ISBN 978-5-9775-0769-1 

© Петин В. А., 2011 

© Оформление, издательство "БХВ-Петербург", 2011 

 

 

 

 

Оглавление

 

 

 

Введение ............................................................................................................................ 9 

Для кого и о чем эта книга ............................................................................................... 9 

Структура книги ................................................................................................................ 9 

Благодарности ................................................................................................................. 10 

Часть I. Инструменты и технологии Web-программирования ........................... 11 

Глава 1. Инструменты создания Web-страниц ....................................................... 13 

1.1. HTML и CSS ............................................................................................................. 13 

1.1.1. Теговая модель .................................................................................................. 13 

1.1.2. Элементы HTML ............................................................................................... 14 

1.1.3. Классификация элементов HTML ................................................................... 14 

1.1.4. Атрибуты тегов .................................................................................................. 15 

1.1.5. Листы стилей CSS ............................................................................................. 15 

1.1.5.1. Определение встроенного стиля ............................................................... 15 

1.1.5.2. Формирование листа стилей ...................................................................... 15 

1.1.5.3. Внутренние листы стилей .......................................................................... 16 

1.1.5.4. Внешние листы стилей ............................................................................... 16 

1.2. Язык сценариев JavaScript ....................................................................................... 17 

1.2.1. Встраивание сценария JavaScript в документ ................................................. 17 

1.2.2. Обработка событий в JavaScript ....................................................................... 18 

1.3. Динамический HTML .............................................................................................. 19 

1.4. PHP — 

серверный язык программирования .......................................................... 22 

1.5. СУБД MySQL ........................................................................................................... 23 

1.5.1. Типы данных ...................................................................................................... 23 

1.5.1.1. Целые числа ................................................................................................ 23 

1.5.1.2. Дробные числа ............................................................................................ 24 

1.5.1.3. Строки .......................................................................................................... 24 

1.5.1.4. Бинарные данные ........................................................................................ 25 

1.5.1.5. Дата и время ................................................................................................ 25 

1.5.2. Таблицы MySQL ................................................................................................ 26 

Оглавление

 

4 

1.5.3. Структурированный язык запросов SQL ........................................................ 27 

1.5.4. Функции PHP для работы с MySQL ................................................................ 28 

1.5.4.1. mysql_connect .............................................................................................. 28

 

1.5.4.2. mysql_close ................................................................................................... 29

 

1.5.4.3. mysql_select_db ............................................................................................ 29

 

1.5.4.4. mysql_query .................................................................................................. 29

 

1.5.4.5. mysql_fetch_row ........................................................................................... 30

 

1.5.4.6. mysql_fetch_assoc ........................................................................................ 30

 

1.5.4.7. mysql_fetch_array ........................................................................................ 30

 

1.5.4.8. mysql_result .................................................................................................. 31

 

1.5.4.9. mysql_num_rows .......................................................................................... 31

 

1.5.4.10. mysql_insert_id ........................................................................................... 31

 

1.5.5. 

Работа с phpMyAdmin ....................................................................................... 31 

1.5.5.1. Запуск phpMyAdmin из Денвера ............................................................... 32 

1.5.5.2. Создание базы данных ............................................................................... 32 

1.5.5.3. Создание таблицы базы данных ................................................................ 33 

1.5.5.4. Заполнение таблиц базы данных ............................................................... 34 

1.5.5.5. Экспорт/импорт баз данных ...................................................................... 36 

1.6. Программная оболочка Денвер .............................................................................. 37 

1.6.1. Что такое Денвер? ............................................................................................. 38 

1.6.2. Получение дистрибутива и расширений Денвера .......................................... 38 

1.6.3. Установка Денвера ............................................................................................ 41 

1.6

.4. Размещаем сайт на локальном компьютере .................................................... 46 

Глава 2. Технология AJAX .......................................................................................... 50 

2.1. Что такое AJAX? ...................................................................................................... 50 

2.1.1. Обмен данными между клиентом и сервером ................................................ 51 

2.1.2. Свойства и методы объекта XMLHttpRequest ................................................. 51 

2.1.3. Запрос к серверу и обработка ответа ............................................................... 52 

2.1.4. Варианты ответа от сервера ............................................................................. 53 

2.2. Фреймворк xajax ...................................................................................................... 54 

2.2.1. 

Как работает xajax ............................................................................................. 54 

2.2.2. Возможности xajax ............................................................................................ 54 

2.2.3. Подключение xajax............................................................................................ 56 

2.2.4. Методы объекта xajaxResponse ........................................................................ 57 

2.2.4.1. 

Метод assign ................................................................................................ 58 

2.2.4.2. 

Метод append .............................................................................................. 58 

2.2.4.3. 

Метод prepend ............................................................................................. 58 

2.2.4.4. 

Метод replace .............................................................................................. 59 

2.2.4.5. 

Метод remove .............................................................................................. 59 

2.2.4.6. 

Метод create ................................................................................................ 59 

Оглавление

 

5 

2.2.4.7. 

Метод insert ................................................................................................. 59 

2.2.4.8. 

Метод insertAfter ......................................................................................... 60 

2.2.4.9. 

Метод clear .................................................................................................. 60 

2.2.4.10. 

Метод createInput ...................................................................................... 60 

2.2.4.11. 

Метод insertInput ...................................................................................... 61 

2.2.4.12. 

Метод insertInputAfter .............................................................................. 61 

2.2.4.13. 

Метод removeHandler ............................................................................... 61 

2.2.4.14. 

Метод includeScript ................................................................................... 62 

2.2.4.15. 

Метод script ............................................................................................... 62 

2.2.4.16. 

Метод addEvent ......................................................................................... 62 

2.2.4.17. 

Метод call .................................................................................................. 63 

2.2.4.18. 

Метод alert................................................................................................. 63 

2.2.4.19. 

Метод redirect ........................................................................................... 63 

2.2.5. 

Сайт — тренировочный стенд

 

для изучения xajax ........................................ 63 

2.2.6. Глобальные переменные xajax ......................................................................... 68 

2.2.6.1. Глобальные константы ............................................................................... 68 

2.2.6.2. 

Методы объекта xajax ................................................................................ 68 

2.3. Примеры использования xajax ................................................................................ 72 

2.3.1. Форма регистрации с проверкой правильности

 

заполнения полей  

"на лету" ....................................................................................................................... 72 

2.3.2. Динамически подгружаемые select-элементы ................................................ 78 

2.3.3. Многоуровневый неоднородный каталог ....................................................... 87 

2.3.4. Динамическое управление

 

числом полей формы .......................................... 91 

2.4. Фреймворк jQuery .................................................................................................... 99 

2.4.1. Возможности jQuery........................................................................................ 100 

2.4.2. Использование jQuery ..................................................................................... 100 

2.4.2.1. Функция $ .................................................................................................. 101 

2.4.2.2. Селекторы .................................................................................................. 101 

2.4.2.3. Методы jQuery .......................................................................................... 105 

2.4.2.4. Обработка событий в jQuery.................................................................... 106 

2.4.2.5. Эффекты в jQuery ..................................................................................... 107 

2.4.3. PHP 

и jQuery .................................................................................................... 107 

2.4.3.1. Динамическая подгрузка jQuery

 

и плагина Carousel ............................ 107 

2.4.3.2. Совместное использование jQuery UI-виджетов Tabs и Accordion ..... 111 

2.4.3.3. Маленький сайт для ювелирной компании ............................................ 119 

2.5. Xajax и Smarty ........................................................................................................ 130 

2.5.1. Что такое Smarty? ............................................................................................ 130 

2.5.2. Установка Smarty ............................................................................................. 131 

2.5.3. Синтаксис шаблонов Smarty .......................................................................... 132 

2.5.4. Методы класса Smarty ..................................................................................... 134 

2.5.4.1. Метод assign .............................................................................................. 134 

2.5.4.2. Метод display............................................................................................. 134 

2.5.4.3. Метод fetch ................................................................................................ 134 

2.5.5. Использование xajax и Smarty ........................................................................ 135 

Оглавление

 

6 

Часть II. Проект интернет-магазина ...................................................................... 143 

Глава 3. Проектирование сайта ............................................................................... 145 

3.1. Структура и функции сайта .................................................................................. 145 

3.1.1. Необходимый функционал сайта (интернет-магазина) ............................... 145 

3.1.2. Структура корневого каталога сайта ............................................................. 147 

3.1.3. Особенности создания сайта без перезагрузки страницы ........................... 148 

3.1.4. Проектирование базы данных ........................................................................ 150 

3.2. Типы пользователей. Вход в профиль ................................................................. 161 

3.2.1. Типы пользователей ........................................................................................ 161 

3.2.2. Вход в профиль ................................................................................................ 161 

3.2.3. Использование переменных SESSION и cookies ........................................... 166 

3.2.3.1. Переменные session .................................................................................. 166 

3.2.3.2. Переменные cookies .................................................................................. 167 

3.2.4. Логика вызова программ при выборе пункта меню ..................................... 170 

3.2.5. Набор подпрограмм для разных пользователей ........................................... 177 

3.3. Регистрация ............................................................................................................ 189 

3.3.1. "Теневая" регистрация незарегистрированных пользователей .................. 189 

3.3.2. Регистрация пользователей ............................................................................ 191 

3.4. Оплата SMS через сервис a1agregator .................................................................. 199 

3.5. 

Блок "Товары" ........................................................................................................ 203 

3.5.1. Список категорий товаров неограниченной вложенности .......................... 204 

3.5.2. Вывод списка товаров постранично .............................................................. 208 

3.5.3. Динамический "ресайзер" картинок .............................................................. 213 

3.5.4. Программирование навигатора страниц ....................................................... 215 

3.5.5. Вывод пути к категории товаров ................................................................... 217 

3.5.6. Поиск товаров и вывод постранично............................................................. 219 

3.5.7. Просмотр товара подробно............................................................................. 226 

3.5.8. Специальные акции (товары по акции) ......................................................... 229 

3.6. Корзина ................................................................................................................... 231 

3.6.1. Добавление товаров в корзину ....................................................................... 232 

3.6.2. 

Корзина подробно ........................................................................................... 236 

3.6.3. Редактирование корзины ................................................................................ 239 

3.6.3.1. Изменение количества товара ................................................................. 239 

3.6.3.2. Удаление товара из корзины ................................................................... 240 

3.6.4. Выбор адреса доставки товара ....................................................................... 242 

3.6.5. 

Оформление заказа .......................................................................................... 244 

3.7. Оплата заказа .......................................................................................................... 248 

3.7.1. Оплата WebMoney ........................................................................................... 248 

3.7.2. Организация приема платежей WebMoney ................................................... 252 

3.7.3. 

Платежный интегратор OnPay ....................................................................... 255 

3.7.3.1. Варианты приема электронных платежей .............................................. 256 

Оглавление

 

7 

3.7.3.2. Настройка параметров магазина ............................................................. 258 

3.7.3.3. ONPAY Merchant API ............................................................................... 260

 

3.7.4. Подключение приема платежей в автоматическом режиме через  

OnPay Merchant API .................................................................................................. 268

 

3.8. Блок "Заказы" ......................................................................................................... 273 

3.8.1. Просмотр заказов пользователя ..................................................................... 273 

3.8.2. Поиск заказов пользователя по фильтру ....................................................... 278 

3.8.3. Редактирование заказа .................................................................................... 284 

3.8.4. Просмотр заказа ............................................................................................... 292 

3.8.5

. Удаление заказа ............................................................................................... 295 

3.8.6. Оплата заказа. Формирование ссылок для скачивания ............................... 297 

3.8.7. Регулирование доступа к файлам скачивания с использованием  

файла .htaccess ........................................................................................................... 298 

3.8.8. Получение товара ............................................................................................ 300 

3.9. Блок мгновенных сообщений на сайте ................................................................ 303 

3.9.1. Вывод мгновенных сообщений ...................................................................... 303 

3.9.2. Переход по ссылке мгновенных сообщений ................................................ 305 

3.9.3. Формирование мгновенных сообщений ....................................................... 308 

3.10. 

Переписка на сайте (внутренняя почта) ............................................................ 310 

3.10.1. Просмотр сообщений пользователя списком ............................................. 310 

3.10.2. 

Просмотр сообщения .................................................................................... 317 

3.10.3

. Удаление сообщения ..................................................................................... 320 

3.10.4. Создание сообщения ..................................................................................... 322 

Глава 4. Программирование панели администратора ........................................ 326 

4.1. Вход администратора ............................................................................................ 327 

4.2. 

Управление товарами ............................................................................................ 327 

4.2.1. Добавление нового товара .............................................................................. 328 

4.2.2. Редактирование товара ................................................................................... 341 

4.2.3. Удаление товара .............................................................................................. 348 

4.2.4. Скрытие товара, открытие товара .................................................................. 350 

4.3. 

Управление категориями товаров ........................................................................ 353 

4.3.1. Добавление категорий товаров ...................................................................... 357 

4.3.2. Редактирование категорий товаров ............................................................... 360 

4.3.3. Удаление категорий товаров .......................................................................... 362 

4.4. 

Управление заказами ............................................................................................. 365 

4.4.1. Просмотр заказов пользователей ................................................................... 365 

4.4.2. Просмотр заказов пользователей по фильтру............................................... 369 

4.4.3. 

Просмотр заказа ............................................................................................... 376 

4.4.4. Редактирование заказа .................................................................................... 379 

4.4.5. Удаление заказа ............................................................................................... 385 

4.4.6. Оплата заказа администратором .................................................................... 386 

4.4.7. Установка статуса "отправлен" ...................................................................... 387 

Оглавление

 

8 

4.5. Операции с профилями пользователей ................................................................ 389 

4

.5.1. Просмотр всех пользователей ........................................................................ 389 

4.5.2. Просмотр пользователей по фильтру ............................................................ 392 

4.5.3. Просмотр профиля пользователя ................................................................... 398 

4.5.4. Редактирование профиля пользователя ........................................................ 401 

4.5.5. Блокировка пользователя ............................................................................... 405 

4.6. Обратная связь........................................................................................................ 406 

4.6.1. Обратная связь по e-mail ................................................................................. 406 

4.6.2. Обратная связь по ICQ .................................................................................... 409 

4.7. Экспорт товаров из 1С ........................................................................................... 412 

4.7.1. Формирование и отправка данных из 1С ...................................................... 412 

4.7.2. Получение и обработка данных на сайте ...................................................... 413 

Заключение .................................................................................................................. 415 

Приложения ................................................................................................................. 417 

Приложение 1. Свойства стилей CSS ...................................................................... 419 

Приложение 2. Описание компакт-диска .............................................................. 432 

Предметный указатель .............................................................................................. 435 

 

 

 

Введение 

 

Для кого и о чем эта книга 

Предлагаемая  книга  ориентирована  на  читателей,  владеющих  языком  разметки 

HTML, имеющих общее представление о языке JavaScript и обладающих навыками 

программирования сайтов на языке PHP. 

Имея некоторый опыт разработки сайтов, вы наверняка хотели бы овладеть новыми 

передовыми  технологиями  программирования,  одной  из  которых  является AJAX, 

чтобы c их  помощью  создавать Web-приложения,  удовлетворяющие  самым  совре-

менным требованиям. Посмотрите Gmail, Google Maps, Google Suggest и десятки дру-

гих Web-проектов, которые предлагают новый уровень интерактивного интерфейса. 

Современные Web-приложения  могут  быть  разработаны  с  расширенным  пользова-

тельским интерфейсом и функциями, которые раньше были привилегией профессио-

нальных приложений. AJAX позволяет создавать более интерактивные, быстродейст-

вующие  и  гибкие  решения  для  Интернета.  И  это  лишь  первый  шаг  на  пути  к 

приложениям с более широкими возможностями в Интернете. 

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

вместе  создадим  готовое  решение —  интернет-магазин  цифровых  товаров,  полно-

стью реализованный по технологии AJAX, без единой перезагрузки страницы. 

Может быть, вы думаете, что это слишком трудно, т. к. недостаточно хорошо знае-

те JavaScript? На самом деле создание сайта потребует самых минимальных знаний 

JavaScript, поскольку весь функционал написан на PHP. 

Мы вместе с вами создадим сайт, готовый к размещению в Интернете, исходные ко-

ды  которого  представлены  в  электронном  архиве  к  книге,  который  расположен  на 

FTP-сервере  издательства  по  адресу: 

//85.249.45.166/9785977507691.zip

1

. Архитектура 

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

Кроме того, в книге вы найдете множество примеров, которые представляют собой 

законченные решения, пригодные для использования в ваших проектах. 

Структура книги 

Книга состоит из двух частей, включает введение, четыре главы, заключение и два 

приложения. 

Часть I  содержит  описание  инструментов  и  технологий,  применяемых  при  разра-

ботке Web-сайтов. 

                                                           

1

  Материалы  этого  архива  следует  использовать  вместо  упоминаемых  в  книге  материалов 

прилагаемого компакт-диска. 

Введнение

 

10 

В  главе 1  "Инструменты  создания Web-страниц"  обзорно  рассмотрим  инструменты 

для  создания Web-страниц:  язык  разметки HTML, динамический HTML (DHTML) и 

язык сценариев JavaScript, СУБД МуSQL. Рассмотрим также структурированный язык 

запросов SQL, Web-интерфейс к MySQL — phpAdmin, а также функции PHP для ра-

боты с MySQL. Здесь же опишем установку и настройку программной оболочки Ден-

вер — набора программ для отладки сайтов на локальной Windows-машине. 

Глава 2 "Технология AJAX" посвящена рассмотрению технологии AJAX и популярных 

фреймворков xajax и jQuery. В  главе  приведены  примеры  изменения  динамического 

содержания  страницы  по  технологии AJAX c использованием  фреймворка xajax, а 

также реализация возможностей библиотеки jQuery в PHP. Все предлагаемые приме-

ры —  рубрикатор  населенных  пунктов  России  с  подгрузкой  содержимого  "на  лету", 

форма заказов с динамическим изменением количества полей, многоуровневый ката-

лог, красочный мини-магазин с галереей видов каждого товара и формой заказа, заго-

товка  под  портал — с  минимальными переделками подойдут  для ваших проектов. В 

последнем разделе "Xajax и Smarty" мы на примерах рассмотрим применение шабло-

низатора Smarty при создании сайтов без перезагрузки страницы: формирование глав-

ной страницы и динамическую подгрузку результатов запросов к серверу. 

Часть II  книги  целиком  посвящена  разработке  конкретного  проекта —  интернет-

магазина. 

В главе 3 "Проектирование сайта" рассмотрим особенности реализации сайтов без 

перезагрузки  страницы,  определим  необходимый  функционал  разрабатываемого 

сайта —  интернет-магазина,  спроектируем  для  него  структуру  базы  данных  и  за-

программируем пользовательский интерфейс. 

Глава 4  "Программирование  панели  администратора"  посвящена  разработке  под-

программ панели администратора. 

В приложении 1 приведены свойства стилей. В приложении 2 дано описание элек-

тронного  архива  к  книге,  выложенного  на FTP-сервер  издательства  по  адресу: 

ftp://85.249.45.166/9785977507691.zip

. Ссылка доступна и со страницы книги на сайте 

www.bhv.ru. 

Благодарности 

Хочу поблагодарить родных и близких, которые с пониманием относились к потра-

ченному на книгу (за счет общения с ними) времени. 

Большая  благодарность  издательству  "БХВ-Петербург",  где  поверили  в  необходи-

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

создании книги. 

Хочу  поблагодарить  также  всех  читателей,  которые  купят  эту  книгу:  я  делал  все, 

чтобы она была интересной и полезной, и надеюсь, что так оно и есть. 

Если возникнут вопросы или пожелания по данной книге, то вы всегда сможете со 

мной связаться по электронной почте victoruni@km.ru, kmvnews@bk.ru или оста-

вить  сообщение  в  блоге  http://goodtovars.ru/blog,  где  рассматриваются  вопросы 

создания сайтов без перезагрузки страницы. 

 

 

Ч а с т ь  I 

Инструменты и технологии  

Web-программирования 

Глава 1.   Инструменты создания Web-страниц 

Глава 2.

 

Технология AJAX 

 

 

 

 

Глава 1 

 

Инструменты создания  

Web-страниц 

 

Основа программирования документов для Web — язык разметки HTML — позво-

ляет создавать только статические страницы, обновляемые с сервера. В отличие от 

обычного HTML, динамический HTML (DHTML) обеспечивает  взаимодействие 

Web-документов  с  пользователем  и  дает  возможность  изменять  документ  на  ком-

пьютере  клиента  без  обращения  на  сервер.  Инструментом  для  манипулирования 

страницами на компьютере клиента служат языки сценариев JavaScript и VBScript, 

из которых в настоящее время наиболее популярен JavaScript. Однако для создания 

по-настоящему  динамических Web-приложений  (взаимодействие  с  посетителями, 

получение  от  них  информации,  настройка  страниц  под  конкретного  пользователя 

и т. д.)  необходимо  взаимодействие  страниц  с  сервером.  Было  создано  несколько 

серверных  языков  для  написания  сценариев  на  стороне  сервера  и  формирования 

динамических  страниц. PHP — один  из  самых  успешных  таких  языков —  быстро 

нашел свое применение и приобрел большую популярность. При разработке Web-

приложений нам понадобится сервер баз данных. В этой главе рассмотрим один из 

наиболее  подходящих  для  нас —  MySQL.  Существенно  облегчит  вашу  работу  от-

ладочный пакет Денвер, описанный в последнем разделе. 

1.1. HTML и CSS 

Всемирная  "паутина"  основана  на  языке  гипертекстовой  разметки HTML. HTML — 

не вполне обычный язык: он не относится к языкам высокого уровня. Это язык раз-

метки, и код, написанный на нем, исполняется на компьютере клиента в клиентском 

приложении — в Web-браузере. Web-страница, загружаемая в браузер, представляет 

собой HTML-файл. Для просмотра HTML-кода документа щелкните правой кнопкой 

мыши в окне документа и в появившемся контекстном меню выберите в зависимости 

от браузера команду Просмотр HTML-кода или Исходный код страницы. 

1.1.1. Теговая модель 

Разметка HTML-документов  выполняется  с  помощью  тегов,  которые  записывают  с 

соблюдением определенных правил. Теговая модель предполагает разбиение докумен-

та на отдельные фрагменты, которые заключаются в теги или начинаются тегом. Все 

 

Часть I. Инструменты и технологии Web-программирования 

14 

теги начинаются с открывающейся угловой скобки 

<

, за которой следует текст, опре-

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

>

. Со-

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

Большинство тегов парные, для каждого начального тега 

<

ИМЯ

>

  есть  конечный  тег 

ИМЯ

>

, например: 

. . . 

. . .

 

Многоточие означает, что между начальным и конечным тегами может находиться 

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

Кроме парных, существуют одиночные теги, в которых имеется только открываю-

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

ределенные действия, например: 

 
 — формирование нового параграфа; 

 

---

 — вставка горизонтальной линии; 

 

 — вставка изображения. 

1.1.2. Элементы HTML 

Документ HTML включает в себя элементы, которые представляют параграфы, заго-

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

ривать как совокупность определенных элементов. Элемент — это пара тегов и сим-

вольные  данные  (код  или  текст),  заключенные  между  ними.  Иначе  говоря,  элемент 

состоит  из  начального  тега,  содержимого  и  конечного  тега. В  некоторых  элементах 

конечный тег может быть опущен (в случае одиночных тегов). Элементы HTML не-

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

, 

, 

.  Список  элементов HTML утвержден  спецификацией 

HTML 4.01. Если браузер находит незнакомый элемент, он его просто игнорирует. 

1.1.3. Классификация элементов HTML 

Все  элементы,  предусмотренные  в HTML, можно  условно  разбить  на  несколько 

категорий: 

 

структурные —  обязательны  для  документа,  соответствующего  стандарту HTML 

(например, 

, 

, 

,