- •Часть 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.3. Реализация принципов функционирования Web-технологий
1.3.1. Некоторые детали сетевого взаимодействия
Очевидно, что реализация изложенных выше принципов функционирования Web приложений требует согласованного взаимодействия многих программных компонент и аппаратных комплексов. Это касается, прежде всего, деталей сетевого взаимодействия между клиентами и серверами. Достаточно давно разработаны модели межкомпьютерного обмена информацией (модель OSI12 и её модификации), а также протоколы (точные и чёткие правила или спецификации), по которым осуществляются эти взаимодействия13.
Детальное рассмотрение принципов и технической реализации межкомпьютерного взаимодействия по сети не являются предметом рассмотрения данного пособия. Поэтому ограничимся рассмотрением лишь некоторых процессов, происходящих незаметно для пользователя при нажатии мышки по ссылке, вводе URL-адреса или при осуществлении любого другого запроса к Web-странице. Такое описание необходимо для получения целостной картины о многообразии компонентов, используемых для создания всемирной сети, а также для выбора инструментов, которые используются при создании WWW.
Для того чтобы читатели получили целостную картину о принципах взаимодействия компонентов, используемых при создании Web-проектов, на Рис. 1-6 представлена структура Web. Обычно доступ к Web-ресурсам осуществляется при помощи браузеров, наиболее известные из которых Netscape/Mozilla и Internet Explorer. Однако существует достаточно много альтернативных браузеров, например Galeon Konquerer (для Linux-систем),
OmniWeb и Opera а также браузеров, работающих в текстовом режиме Lynx, links и w3g.
Когда пользователь щелкает на ссылке или вводит URL-адрес (например, www.example.com) браузер устанавливает соединение (используется также термин сетевое соединение (network connection)) с сервером www. example.com.
Имя (сервера www.example.com присвоено Internet-адресу, который представляет собой четыре числа, разделенные точками (например, 1.2 .3 .4), и называется IP-адресом. Браузер осуществляет соединение с сервером www.example.com через порт 8014, который используется операционной системой сервера для работы с HTTP-запросами. Номера портов стандартизированы.
Рис. 1‑6 Функциональная структура Web
В зависимости от типа клиентского запроса сервер передает или получает информацию от клиента. Типы данных, передаваемых от сервера к клиенту, содержат текст (включая HTML-данные), изображения, Java-аплеты документы типов, файлы PDF и т.д. Данные, передаваемые от сервера, могут генерироваться несколькими способами: статически, динамически или внедряться (каждый из этих способов рассмотрен в последующих главах).
В задачи клиента входит получение от сервера потока текста, изображений, Java-апплетов, документов и т.д., а также визуализация изображения.
Кроме того, клиенту необходимо выполнять код сценариев JavaScript и Java-апплетов15, которые переданы от сервера16. Для отправки данных серверу клиент может использовать протокол CGI17 (Common Gateway Interface).
Эти данные могут обрабатываться любым способом, который определяются сервером. Обработка может осуществляться как на стороне клиента, так и на стороне сервера. Одним из преимуществ использования подобного метода, так же как и при использовании многих других Web-компонентов, является то, что после установки правил, события, происходящие на стороне клиента, не зависят от событий на стороне сервера. Например, если клиенту необходимо блокировать всплыв окна с рекламой, то лишь немногие серверы позволят ему это. При создании приложения, работающего на стороне сервера, или при доработке старого приложения разработчики не заботятся о работе приложения у клиента, поскольку приложение разрабатывается согласно строго заданным правилам.
