- •Часть 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
Подробнее о протоколе udp
UDP протокол передачи датаграмм без установления соединения. Также его называют протоколом «ненадёжной» передачи, в смысле невозможности удостовериться в доставке сообщения адресату, а также возможного перемешивания пакетов. В приложениях, требующих гарантированной передачи данных, используется протокол TCP.
UDP обычно используется в таких приложениях, как потоковое видео и компьютерные игры, где допускается потеря пакетов, а повторный запрос затруднён или не оправдан, либо в приложениях вида запрос-ответ, где создание соединения занимает больше ресурсов, чем повторная отправка.
1.3.2. Типы данных и их обработка Web сервере
1.3.2.1. Обработка статических данных
С точки зрения сервера проще всего осуществлять обработку статических данных (static data), или, другими словами, данных, которые передаются в неизменном виде всем клиентам и изменяются только в том случае, если программист внесет изменения в исходный HTML-файл. Исходный HTML-файл (или файл рисунка, или PDF-файл) хранится на локальном жестком диске сервера, и при запросе содержимое файла в неизменном виде передается клиенту. Для этой передачи даже не требуется дополнительного программного обеспечения на сервере — всю работу способен выполнить Web-сервер Apache.
Обработка статических данных показана на Рис. 1-7. Допустим, пользователь ввел в поле адреса Web-браузера адрес www. example. com. Браузер соединяется с сервером www.example.com и производится запрос локального файла сервера (/var/www/html/index.html) на локальном жестком диске. После того как файл найден, он отсылается к отправителю запроса, т.е. к клиенту. Дополнительно сервер подсоединяет к файлу index.html дополнительный блок информации, называемый заголовком.
Обработка статических может быть рассмотрена при настройке и использования Web-сервера Apache. Создание и управление большим количеством статических Web-страниц может осуществляться при помощи языка Website МЕТА Language (WML).
1.3.2.4.Обработка динамических данных
Более сложным способом генерации HTML-кода является использование программ, работающих на сервере, которые динамически создают код, посылаемый браузеру клиента. Применение программирования на стороне сервера (server-side programming) дает неоспоримые преимущества при создании Web-страниц, включая хорошо зарекомендовавший себя на практике интерфейс CGI, а также более гибкий и более мощный инструмент.
Существует несколько типов программ, выполняемых на стороне сервера. Некоторые из них считывают данные из баз данных, другие же запускают программы, выполняемые на стороне сервера.
Не следует путать динамические Web-страницы с динамическим HTML-кодом. Последний термин обычно используется при рассмотрении Web-страниц с динамическими компонентами, такими как всплывающие окна, изменяемые изображения, динамические элементы меню и другие зрелищные эффекты. Довольно часто в динамическом HTML-коде используются сценарии JavaScript и Document Object Model (DOM)19.
Различают два типа динамических данных: представленных в виде двоичных, так называемых, bin-файлов и код, внедрённый (вставленный) в HTML документ. Соответственно можно говорить о двух методах обработки динамических данных. Рассмотрим их подробнее.
А.Обработка bin-файлов
На рис. Рис. 1-8. Обработка динамических данных проиллюстрировано взаимодействие клиента с сервером при использовании динамических данных. Если пользователь введет в поле адреса браузера строку www. example.соm/сgi-bin/a.cgi, то серверу (www. example. com) будет передан запрос на выполнение программы a.cgi (сервер "знает", что запрашивается исполняемый файл, поскольку в адресе присутствует строка cgi-bin).
Сервер устанавливает месторасположение файла на жестком диске, например, расположенного в каталоге /var/www/cgi-bin/а.cgi, после чего выполняет эту программу. Результатом работы программы является HTML-код (в ходе этого может производиться чтение из баз данных, отправка электронных писем или запись в файл системных событий), который передается клиенту.
Б. Обработка кода, внедренного в HTML
Другим, более гибким решением создания динамических Web-страниц является использование HTML с внедренным кодом или исполняемого кода внедренного в HTML -файл.
К примеру, если человек, знающий HTML, однако не умеющий программировать, создаст шаблон для Web-страницы, то далее программист сможет добавить исполняемый код непосредственно в HTML-файл. Не статические, но и не совсем динамические Web-страницы с внедренным кодом представляют собой очень удобное и гибкое решение.
Внедрение кода в HTML-файл позволяет разработчику создавать удобные и отлично выглядящие Web-страницы, в отличие от посредственных, не слишком удобных страниц, создаваемых на чистом HTML20. После создания структуры Web-страницы, программист добавляет исполняемый код в HTML-файл, изменяя тем самым статическое содержимое на динамическое, что придает странице более живой вид.
На Рис. 1-9 проиллюстрирована обработка данных, внедренных в HTML-файл.
Давайте представим, что пользователь ввел в поле адреса браузера www.example, com/а. html, который имеет вставленный код на каком-либо языке программирования. Web-сервер находит HTML-файл, например, расположенный в каталоге /var/www/html/, производит его предварительную обработку, выполняя исполняемый код оригинального HTML-файла, создает новый HTML-код, который и передается браузеру клиента.
В принципе возможны несколько вариантов внедрения кода в HTML-файлы. Упомянем всего 4:
SSI (Server Side Includes) — простое, уже встроенное в Web-сервер Apache решение, в котором используется уникальный синтаксис.
Embperl — модуль Perl, который позволяет внедрять Perl-код в HTML-файлы.
Mason — другой модуль Perl, который, так же, как и Embperl, позволяет внедрять Perl-код в HTML-файлы.
РНР — язык программирования, имеющий синтаксис, похожий на Perl и обеспечивающий большое количество встроенных функций для выполнения различных задач.
Механизм SSI проще в использовании, однако имеет ограниченные возможности. Средства Embperl, Mason и PHP предоставляют гораздо более широкие возможности.
При использовании этих инструментов появляется возможность доступа из HTML-страницы к отправленным по почте данных формы, соединения с базами данных, записи и чтения файлов, а также выполнения любых задач, которые можно выполнить средствами программ.
Это позволяет создавать не только привлекательные, динамичные Web-страницы, но и приложения, выполняющие разнообразные задачи.
