- •Часть 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
2.5.3.7. Горизонтальное выравнивание таблицы. Атрибут align
Данный атрибут тега <TABLE> определяет горизонтальное расположение таблицы в области просмотра. Допустимые значения — LEFT (выравнивание влево), RIGHT (выравнивание вправо) и CENTER (выравнивание по центру). По умолчанию таблицы выровнены по левому краю.
На рисунке 2.19 представлена таблица, выравненная по центру страницы.
Рис. 2.19. Таблица, выровненная по центру страницы.
2.5.3.8. Объединение ячеек. Атрибуты collspan и rowspan
Для сложных таблиц характерна потребность в объединении нескольких смежных ячеек по горизонтали или по вертикали в одну. Данная возможность реализуется с помощью атрибутов COLSPAN (COLiimn SPANning) и ROWSPAN (ROW SPANning), задаваемых в кодах <TD> или <TH>. Форма записи: COLSPAN=num, где num — числовое значение, определяющее, на сколько столбцов следует расширить текущую ячейку по горизонтали. Применение атрибута ROWSPAN аналогично, только здесь указывается количество строк, которые должна захватить текущая ячейка по вертикали. По умолчанию для этих параметров устанавливается значение, равное единице. Допустимо одновременное задание значений обоих параметров для одной ячейки. Правильная установка значений этих параметров может оказаться не очень простой задачей, тем более, что большинство HTML-редакторов позволяют визуально конструировать с последующей генерацией HTML-кодов лишь простейшие таблицы.
На рисунке 2.20 представлен типичный пример выполнения задачи. Методом объединения ячеек создан общий заголовок для двух столбцов и общий заголовок для трех строк.
Р
ис.
2.20. Пример таблицы с объединенными
ячейками.
2.5.3.9. Форматирование данных внутри таблицы
Каждую отдельную ячейку внутри таблицы можно рассматривать как область для независимого форматирования. Все правила, которые действуют для управления отображением текста, могут быть использованы для форматирования текста внутри ячейки. Внутри ячейки допустимо использование практически всех элементов HTML, которые могут появляться внутри тела документа <BODY>, в том числе тэги, управляющие расположением текста — <P>, <BR>, <HR>, коды заголовков — от <H1> до <H6>, тeги форматирования символов — <В>, <I>, <STRONG>, <BIG>, <EM>, <FONT>, тeги вставки графических изображений <IMG>, гипертекстовых ссылок <А> и т. д. Сразу же подчеркнем, что область действия тeгов, заданных внутри отдельной ячейки, ограничивается пределами этой ячейки независимо от наличия завершающего тeга. Например, если внутри ячейки определен цвет текста — <FONT COLOR=RED>, то даже при отсутствии завершающего кода </FONT> или расположения его через несколько ячеек или строк таблицы, текст следующей ячейки будет отражен цветом по умолчанию.
Помимо стандартны, при работе с таблицами можно использовать и специфические элементы форматирования. В частности, выравнивание текста внутри соответствующей ячейки можно установить с помощью атрибутов ALIGN и VALIGN, которые могут применяться в тегах <TR>, <TD> и <TH>.
Атрибут для горизонтального выравнивания ALIGN может принимать значения LEFT, RIGHT и CENTER (по умолчанию LEFT для <TD> и CENTER для <TH>). Атрибут для вертикального выравнивания VALIGN может принимать значения ТОР (по верхнему краю), BOTTOM (по нижнему краю), MIDDLE (посередине), BASELINE (по базовой линии). По умолчанию — MIDDLE. Выравнивание по базовой линии обеспечивает привязку текста отдельной строки во всех ячейках к единой линии. Задание параметров выравнивания на уровне кода <TR> определяет выравнивание для всех ячеек данной строки, при этом в каждой отдельной ячейки строки может быть определены свои параметры, переопределяющие действие параметров, заданных в <TR>.
Некоторые варианты выравнивания текста внутри таблицы представлены на рисунке 2.21. Следует обратить внимание, что если параметры выравнивания соответствуют установленным по умолчанию можно не указывать.
Рис.
Рис.
2.21. Выравнивание текста в таблице
