Виктор Петин



Pdf көрінісі
Дата12.03.2017
өлшемі1,26 Mb.
#9161

Виктор

 

Петин

 

 

 



 

 

 



 

 

 



 

 

 



 

 

 



 

 

 



 

 



 

 

 



 

 

 



 

 

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



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

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 


Оглавление

 

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 



Оглавление

 

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 


Оглавление

 



Часть 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 



Оглавление

 

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 


Оглавление

 

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.rukmvnews@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 



(например, 







</p> <p>);  <p>  <br /> <br />блоковые —  предназначены  для  форматирования  целых  текстовых  блоков </p> <br /> <br />(например,  <br /> <br /><div> </p> <p>,  <br /> <br /><h2></p> <p>,  <br /> <br /><h2> </p> <p>,  <br />); </p> <p>  <p>текстовые — создают разметку текста (</p> <br /> <br /><EM> </p> <p>,  <br /> <br /><b></p> <p>) и разметку шрифта ( <br /> <br /><i> </p> <p>,  <br /> <br /><b></p> <p>,  <br /> <br /><u> </p> <p>);  <br /></p> <br />  <p>специальные —  элементы  пустой  строки  (</p> <br />,  <br /> <br /><HR> <p>),  ссылка </p> <br /> <br /><a> <p>,  внедренные </p> <p>элементы  ( <br /> <br /><img> </p> <p>,  <br /> <br /><EMBED></p> <p>,  <br /> <br /><OBJECT> </p> <p>),  элементы  формы  (</p> <br /> <br /><INPUT> <p>,  <br /> <br /><SELECT></p> <p>,  <br /> <br /><TEXTAREA> </p> <p>), элементы таблицы (</p> <br /> <br /><table> <p>,  <br /> <br /><tr></p> <p>,  <br /> <br /><td> </p> <p>) и др.  <br /></div> <STYLE type="text/css"> </STYLE> <div id="page14-div" > </p> <br /><i>Глава 1. Инструменты создания Web-страниц </i> <br /> <br /><i>15</i> <br /> <br /><b>1.1.4. Атрибуты тегов </b> <p>Часто теги, помимо имени, содержат дополнительные элементы, которые называют </p> <br /> <br /><i>атрибутами</i>:  <p>  <p>Атрибут записывается после имени тега перед закрывающейся скобкой </p> <br /> <br />> </p> <p> и состоит </p> <p>из пары  <br /> <br /><i>имя</i> <br /> <br /><i> </i> <br /> <br /><i>атрибута</i> </p> <p>= <br /> <br /><i>значение</i></p> <p>. В теге может быть несколько атрибутов. Атрибуты  </p> <p>отделяют друг от друга пробелами, очередность записи атрибутов в теге не имеет </p> <p>значения.  Атрибуты  записываются  в  начальных  тегах  и  отсутствуют  в  конечных.  </p> <p>Одно из главных назначений атрибутов — управлять видом элемента на странице, </p> <p>его положением или цветом.  <br /> <br /><b><span id='1.1.5._Листы_стилей_CSS'>1.1.5. Листы стилей CSS </span></b> <br /> <br /><i>Каскадные  листы  (таблицы)  стилей</i> (Cascading Style Sheets, CSS) — это  язык,  ис- </p> <p>пользуемый  в  документах HTML для  определения  <a href="/data-predstavleniya-25-dek-2021-09-11pm-utc0600-identifikator.html">способа  представления  содержи-</a></p> <p>мого.  Представление  задается  с  помощью  стилей,  помещаемых  непосредственно  в  </p> <p>элементы HTML, заголовок HTML-документа  или  отдельные  таблицы  стилей.  </p> <p>В листах стилей значение свойства присоединяется к стилю при помощи двоеточия:  </p> <p>background-color: green </p> <p>font-size: 12 pt  <br /> <br /><b><span id='1.1.5.1._Определение_встроенного_стиля'>1.1.5.1. Определение встроенного стиля </span></b> </p> <p>Простейший способ задания стиля элемента HTML — с помощью атрибута </p> <p>style <p>:  <br /> <br /><div > </p> <br /> <br />Введение  стиля  мало  чем  отличается  от  форматирования  средствами HTML. В  то  </p> <p>же время встроенный стиль — простейший <a href="/periodicheskaya-sistema-himicheskih-elementov-d-i-mendeleeva.html">способ задания стилевых свойств</a>, кото-</p> <p>рый можно оперативно применить к отдельным элементам в процессе создания до- </p> <p>кумента.  При  этом  нужно  понимать,  что  встроенные  стили  нарушают  основную </p> <p>концепцию CSS, заключающуюся  в  том,  что  форматирование  документа  должно  </p> <p>быть отделено от содержания. </p> <br /> <br /><b><span id='1.1.5.2._Формирование_листа_стилей'>1.1.5.2. Формирование листа стилей </span></b> <p>Стилевые свойства вводят с помощью определения стиля, которое принято обозна-</p> <p>чать фигурными скобками:  </p> <p>{font-family:Arial; background-color:yellow} </p> <p>{visibility:hidden}  </p> <p>Назначение стиля тому или иному элементу состоит в установлении связи: </p> <p>span {color:red;font-style:italic}  </p> <p>div.p {text-size:12 px; margin-left: 10 px} </p> <p>#div1 {border-color:green}  <br /></div> <STYLE type="text/css"> </STYLE> <div id="page15-div" > <br /><i>Часть I. Инструменты и технологии Web-программирования </i> <br /> <br /><i>16 </i> </p> <p>Элемент,  к  которому  относится  определенный  стиль,  называется  <i>селектором</i>.  Се-</p> <p>лекторы, записанные прописными буквами, обозначают классы, а селекторы, начи- </p> <p>нающиеся со знака </p> <p># <p>, отвечают уникальным идентификаторам элементов. </p> <br /> <br /><b><span id='1.1.5.3._Внутренние_листы_стилей'>1.1.5.3. Внутренние листы стилей </span></b> </p> <p>Встроенные стили имеют большой недостаток — они не позволяют отделить сред-</p> <p>ства форматирования документа от его содержания. Кроме того, объявления встро- </p> <p>енного стиля приходится повторять для каждого форматируемого элемента на про-</p> <p>тяжении  всего  документа.  От  этих  недостатков  свободен  другой  способ  введения  </p> <p>стилей —  размещение  листа  стилей  в  заголовочной  части  документов.  Согласно </p> <p>этому способу, называемому <i>заголовочным стилем</i>, можно единым образом управ- </p> <p>лять содержимым всего документа. Для изменения отображения одинаково оформ-</p> <p>ленных элементов достаточно один раз изменить соответствующие свойства в лис- </p> <p>те  стилей.  Встроенные  и  заголовочные  стили  относятся  к  внутренним  листам </p> <p>стилей. Для введения заголовочного стиля в заголовочную часть HTML-документа  </p> <p>вставляется специальный контейнер </p> <br /> <br /><STYLE></STYLE> <p>:  <br /> <br /><STYLE type="text/css"> </p> <br /> <p>описание <br /></p> <br />  <p>листа <br /></p> <br />  <p>стилей <br /></p> <br />  -- >  <br /> <br /></STYLE>  <br /> <br /><b>Пример </b> <br /> <br /><HEAD>  <br /> <br /><>  <p>  h4.style1 {color:red} </p> <p>  #style2 {color:green; background-color:yellow}  <br /> <br /></STYLE>  <br /> <br /></HEAD>  </p> <p>Сопоставление  правил CSS с  конкретными  элементами  документа  выполняется  с </p> <p>помощью атрибутов  </p> <p>class <br /></p> <br /> и  <p>id <p>: </p> <br /> <br /><BODY>  </p> <p>  <h4> <br /></p> <br />Заголовок <p> 1</h4>  <br /></p> <br />  <div id="style2"> <p>Текст <br /></p> <br /> 1</div> </body></td></tr></textarea></select></input></object></embed></a></u></em></h2></h2>


жүктеу/скачать 1,26 Mb.

Достарыңызбен бөлісу:




©emirsaba.org 2024
әкімшілігінің қараңыз

    Басты бет