- •Часть 1.
- •Глава 1. Основные подходы к разработке Web-приложений: языки, модели и технологии 6
- •Глава 2. Основы html – языка гипертекстовой разметки 43
- •Глава 3. Основы использования css – каскадных таблиц стилей 147
- •Введение
- •Глава 1.Основные подходы к разработке Web-приложений: языки, модели и технологии
- •1.1. Эволюция языков создания (разметки) страницы Web
- •1.2. Разработка Web приложений
- •1.2.1. Системы обработки информации: интранет, интернет и экстранет.
- •1.2.2. Что означает термин «системы на основе Web»
- •1.2.3.Концепция клиент/серверной архитектуры
- •1.2.4. Обобщенная модель взаимодействия клиент-сервер
- •1.2.5. Трехслойная модель клиент/серверная архитектура для Web приложений и задачи его разработки
- •1.2.6. Модели реализации функций Web приложений
- •1.2.6.1. Модель доставки информации
- •1.2.6.2. Модель обработки информации
- •1.2.7. Присваивание функций обработки информации компонентам трёхзвенной системы Web
- •1.3. Реализация принципов функционирования Web-технологий
- •1.3.1. Некоторые детали сетевого взаимодействия
- •Подробнее о сетевых протоколах
- •Краткий список номеров портов для разных протоколов передачи информации
- •Подробнее о протоколе tcp
- •Подробнее о протоколе udp
- •1.3.2. Типы данных и их обработка Web сервере
- •1.3.2.1. Обработка статических данных
- •1.3.2.4.Обработка динамических данных
- •1.3.3. О некоторых других Web технологиях
- •1.3.4. Заключение. О навыках разработки серьёзных Web-- приложений
- •1.4. Контрольные вопросы к главе 1
- •Глава 2.Основы html – языка гипертекстовой разметки
- •2.1 Введение в html.
- •2.1.1 История развития html
- •2.1.2. Основные положения гипертекстовой разметки
- •2.2 Структура html – документа и используемые для этого тэги
- •2.2.1. Назначение раздела 1- дать информацию о версии html
- •2.2.2.1.Заголовочная часть html – документа
- •Элемент разметки title
- •Элемент разметки base
- •Элемент разметки meta
- •Элемент разметки link
- •Элемент разметки style
- •Элемент разметки script
- •2.2.2.2. Тело html документа: структурные элементы и описывающие их тэги
- •Заголовки в тексте
- •Абзацы (параграфы)
- •Рисунки
- •Гиперссылки
- •Html формы
- •Пользовательские элементы структуры.
- •2.3. Разметка, обеспечивающая форматирование html – документа
- •2.3.1. Понятие форматирования
- •2.3.2. Форматирование страницы и текста
- •2.3.2.1. Цвет фона страницы (атрибут bgcolor)
- •Принятые в html формальные обозначения некоторых цветов.
- •2.3.2.2. Использование в качестве фона страницы изображения (атрибут bаскground)
- •2.3.3.6. Многоуровневые списки
- •2.3.4. Форматирование произвольного фрагмента текста.
- •2.4. Форматирование гипертекстовых ссылок и закладок
- •2.4.1. Гиперссылки
- •2.4.2. Закладки
- •2.5.2. Создание простейших html-таблиц
- •2.5.3. Форматирование таблиц
- •2.5.3.1. Расположение заголовка таблицы
- •2.5.3.2. Рамка таблицы. Атрибуты border и bordercolor
- •2.5.3.3 Цвет фона таблицы и фоновый рисунок. Атрибуты bgcolor и background
- •2.5.3.4 Расстояние между ячейками. Атрибут cellspacing
- •2.5.3.5. Отступ между рамкой таблицы и содержимым ячейки. Атрибут cellpadding
- •2.5.3.6. Ширина и высота таблицы. Атрибуты width и height
- •2.5.3.7. Горизонтальное выравнивание таблицы. Атрибут align
- •2.5.3.8. Объединение ячеек. Атрибуты collspan и rowspan
- •2.5.3.9. Форматирование данных внутри таблицы
- •2.6. Графика в html.
- •2.6.1. Общие соображения.
- •2.6.2. Способы хранения изображений.
- •2.6.4.1. Выравнивание изображений (атрибут align).
- •2.6.4.2. Задание размеров выводимого изображения (атрибуты width и heigth).
- •2.6.4.3. Отделение изображений от текста (атрибуты hspace и vspace).
- •2.6.4.4. Рамки вокруг изображений (атрибут border).
- •2.6.4.5. Альтернативный текст (атрибут alt).
- •2.6.5. Гиперкарты – важный элемент гипертекста
- •2.6.5.1. Использование гиперкарт
- •2.6.5.2. Терминология, связанная с гиперкартами
- •2.6.5.3. Преимущества и недостатки гиперкарт
- •2.6.5.4. Графическое представление гиперкарты
- •2.6.5.5. Описание конфигурации карты-изображения
- •Элемент разметки гиперкарт
- •Атрибут shape
- •Атрибут coords
- •Атрибуты href и nohref
- •Атрибут target
- •Атрибут alt
- •2.6.5.6. Алгоритм создания гиперкарт
- •2.6.5.7. Средства создания гиперкарт
- •2.7. Формы в html
- •2.7.1. Основы создания форм.
- •2.7.1.1. Атрибут action
- •2.7.1.2. Атрибут method
- •Метод get
- •2.7.2.2. Поле для пароля
- •2.7.2.3. Многострочный текст
- •2.7.2.4. Поле со списком
- •Группировка элементов списка
- •2.7.2.5. Переключатели
- •2.7.2.6. Флажки
- •2.7.2.7. Скрытое поле
- •Атрибуты скрытого поля
- •2.7.2.8. Кнопки
- •Кнопка submit
- •Кнопка reset
- •Кнопка с изображением
- •Параметры поля с изображением
- •2.7.2.9. Поле отправки файла
- •2.7.2.10. Группировка элементов формы.
- •2.7.2.11. Переход между полями с помощью табуляции
- •2.7.2.12. Ограничение доступа к элементам формы.
- •2.8. Фреймы
- •2.8.1. Сфера применения фреймов
- •2.8.2. Создание Web-страниц с фреймами
- •Глава 3.Основы использования css – каскадных таблиц стилей
- •3.1. Понятие css
- •3.2. Подключение css
- •3.2.1. Таблица связанных стилей
- •3.2.2. Таблица глобальных стилей
- •3.2.3. Внутренние стили
- •3.3. Базовый синтаксис
- •3.4. Селекторы тегов
- •3.5. Классы
- •3.6. Идентификаторы
- •3.7. Правила создания стиля
- •3.8. Основы css-верстки. Создание «резинового» шаблона.
- •3.8.1. Создание макета из одной колонки
- •3.8.2. Макет из двух колонок
- •3.8.3. Макет из трех колонок
- •Задания для самостоятельной работы. Задание 1.
- •Сергей Алексеев
- •1971-1975 Институт легкой промышленности Москва
- •Задание 2.
- •Задание 3.
- •Задание 4.
- •Задание 5.
- •Задание 6.
- •Задание 7
1.2.5. Трехслойная модель клиент/серверная архитектура для Web приложений и задачи его разработки
Термин "клиент/сервер" относится к применению сетей на основе серверов (то есть программ)для управления общим доступом к ресурсам и для распределения задач между аппаратными и программными компонентами. В клиент-серверных сетях на основе Web распределение задач обработки происходит в трех слоях, которые соответствуют трем основным компонентам оборудования и программного обеспечения системы (Рис. 1 -3).
Рис. 1‑3. Аппаратные и программные слои трехслойной системы обработки информации
В первом слое клиентский настольный ПК выполняет работу интерфейса пользователя системы; во втором слое сервер Web выполняет основные функции системы по обработке; и в третьем слое сервер базы данных, и в некоторых случаях медиа-сервер, осуществляет требуемые системе функции хранение и извлечения информации.
В свою очередь, каждый из трех аппаратных компонентов содержит соответствующее программное обеспечение. Клиентским программным обеспечением является браузер Web. Сервер Web выполняет сетевую операционную систему (NOS), такую, как Windows Server, Unix Server или Linux Server, и с помощью дополнительного программного обеспечения, например, Internet Information Server или Apache Web Server, реализует службы Интернет, — WWW, FTP, SMTP (Simple Mail Transfer Protocol) и другие. Сервер базы данных выполняет команды размещённой на нём системы управления базой данных, таких, как MySQL, Oracle, Microsoft SQL Server, Access и других популярных пакетов.
Таким образом, отдельные компоненты выполняют отдельные задачи обработки, которые интегрируются с помощью Web в законченную систему обработки информации.
Рассмотрим, например, посещение Web-сайта электронной коммерции (е-коммерции). Браузер Web является интерфейсом работы с сайтом. В ответ на различные "входящие" запросы, которые вы отправляете при просмотре продаваемых товаров, создаются различные страницы "вывода". Запросы вводятся в систему через ссылки Web и посылаемые формы, ответы системы создают страницы HTML, передаваемые назад браузеру для вывода на экране. Браузер выполняет действия по вводу и выводу, необходимые для взаимодействия с сайтом.
При этом на Web-сервере решаются специальные задачи по обработке информации. При запросе клиента по поиску товара, выполняются программы поиска в базах данных для извлечения подходящего для клиента товара и для форматирования вывода для доставки в браузер Web. При просмотре корзины покупателя другие процедуры извлекают выбранные товары и вычисляют общую стоимость заказа. При оплате заказа исполняются специальные программы для соединения с системой проверки кредитной карты и банковскими системами, так что соответствующие счета дебетуются и кредитуются.
Множество задач обработки, связанных с перемещением в сети и покупкой, происходят на серверах Web скрыто от пользователя, но они критически важны для осуществления покупки и для осуществления бизнес-транзакций, которые с этим связаны.
Большая часть информации, которая собирается и генерируется во время покупки, хранится в базах данных, которые находятся на отдельных серверах баз данных. Вся информация, которая выводится на экран, извлекается из таблиц базы данных. Выбранные товары хранятся в таблицах базы данных. Практически каждый фрагмент информации о просматриваемых продуктах и транзакциях при покупке сохраняется в больших базах данных в самой системе е-коммерции или в связанных базах данных, которые находятся в центре окружающих ее систем бухгалтерского учета, закупок и дистрибуции.
Даже в самых маленьких коммерческих системах на основе Web присутствуют такие же функции. Главное состоит в том, что в системах на основе Web любого размера существуют три основных слоя функциональности. Поэтому, с точки зрения разработчика Web, задача разработки полноценного приложения состоит в создании:
интерфейса пользователя,
процедур обработки бизнес-операций,
компонентов поддержки базы данных и, наконец,
последующей интеграции в полностью функциональную систему обработки информации.
