Основы работы с XHTML и CSS

         

Основы работы с XHTML и CSS

История Интернет и его использования
ARPANET - Начало Интернет
Редактирование текста с помощью Notepad
Сохранение документа XHTML
Вывод документа XHTML
Редактирование документа и вывод

Создание первой страницы Web
Комментарии в XHTML
Сохранение и вывод первой страницы Web
NSFNET - Развитие Интернет
WWW - Информационная сеть
Техническая конвергенция
Использование Интернет
Технологии Интернет


Обслуживание страниц Web
Серверы и клиенты

Доступ к документам Web
URI
Просмотр локальных страниц Web
Создание присутствия в Web
Теги XHTML и стили CSS
Язык разметки HTML
Изучение HTML
Развитие стандартов HTML
Стандарты кодирования XHTML

Соответствие XHTML 1.0
Корневой элемент html
Стандарты соответствия кодированию
Валидация страниц Web
Типы тегов XHTML
Контейнерные и пустые теги
Каскадные таблицы стилей
Работа с документами XHTML
Пролог

Тег html
Тег head
Тег title
Тег body
Example.1.1

Структурирование содержимого страницы

Структурирование содержимого страницы
Вывод в редакторе и браузере
Форматированный текст
Исключенные атрибуты width и height
Использование графических изображений в качестве ссылок
Создание подкаталога Media
Параграфы
Тег p

Блочные и линейные теги
Исключенные теги и атрибуты
Исключенный атрибут align
Тег blockquote
Вложенные теги blockquote
Перенос строки
Тег br/
Несколько переносов строк
Исключенный тег br
Заголовки

Исключенный атрибут align
Горизонтальная линейка
Исключенные тег hr и его атрибуты
Списки
Неупорядоченные списки
Вложенные неупорядоченные списки
Исключенный атрибут type
Упорядоченные списки
Вложенные упорядоченные списки
Исключенные атрибуты type и start

Списки определений
Соединение страниц
Тег a
Локальные ссылки
Удаленные ссылки
Исключенный атрибут target
Цвет ссылок
Вывод изображений
Графические форматы

Использование изображений
Тег img/
Исключенное выравнивание изображений
Example.2.1

Использование стилей оформления

Использование стилей оформления
Атрибуты
Каскадные таблицы стилей
Линейные таблицы стилей
Классы стилей оформления

Стратегии оформления
Встроенные таблицы стилей
Внешние таблицы стилей
Применение таблиц стилей
Стили оформления полей страницы
Свойства стиля оформления полей страницы
Значение размера
Задание полей с помощью линейной таблицы стилей

Задание полей с помощью вложенной таблицы стилей
Задание полей с помощью внешней таблицы стилей
Задание индивидуальных полей страницы
Исключенные атрибуты тега body
Поля параграфа
Вертикальные поля
Стили выравнивания
Стиль text-align
Выравнивание параграфа
Выравнивание заголовка

Выравнивание изображений
Плавающие изображения
Стиль text-indent
Стили определения ширины и высоты
Ширина и высота линейки
Ширина и высота изображений
Основные стили цвета
Цвет текста и фона
Цвет линейки
Области действия и разделы

Тег span
Тег div
Селекторы и классы стиля
Простые селекторы
Селекторы ID
Оформление тегов span и div
Example.3.1

Параметры шрифта

Параметры шрифта
Стили шрифта

Вложенные стили
Исключенный тег font
Свойства текста
Применение свойств текста
Использование отрицательных значений
Промежутки между буквами и словами
Теги стиля шрифта
Теги физических стилей
Теги логических стилей

Представление заголовков таблицами стилей
Групповые селекторы
Тег pre
Цвета текста и фона
Шестнадацатеричные цвета
Цвета RGB
Названия цветов
Свойства цвета текста
Специальные символы
Коды символов

Вывод кода XHTML
Форматирование кодов символов
Example.4.1

Графические форматы

Графические форматы
Формат изображений GIF
Прозрачные изображения
Многослойные изображения
Фильтры xRay(), invert(), и gray()
Фильтр dropShadow()
Фильтр shadow()
Фильтр glow()
Анимированные изображения

Формат изображений PNG
Формат изображений JPEG
Вывод изображений
Тег img/
Вывод локальных изображений
Вывод удаленных изображений
Размер изображения
Позиционирование изображения
Автономные изображения

Изображения в строке
Обтекание текста вокруг изображений
Свойство clear
Графический текст
Исключенные атрибуты тега img
Фоновые изображения
Источники изображений
Стили фона

Фильтры
Фильтр alpha()
Равномерный фильтр alpha()
Линейный фильтр alpha()
Радиальный фильтр alpha()
Прямоугольный фильтр alpha()
Фильтр blur()
Фильтр emboss()
Фильтр engrave()

Фильтры flipH() и flipV()
Example.5.1

Оформление списков

Оформление списков
Оформление неупорядоченных списков
Определение символов маркеров
Задание полей для неупорядоченного списка
Изменение положения свободного пространства
Абсолютное позиционирование
Определение позиционного расположения элементов страницы
Подавление вывода символов маркеров

Использование графических изображений для неупорядоченных списков
Оформление упорядоченных списков
Задание числовых символов
Вложенные упорядоченные списки
Оформление списков определений
Контекстные селекторы
Границы и отступы
Стили границ

Стили отступов
Границы изображений
Поля, границы и отступы
Задание размеров элементов
Ширина и высота контейнера
Переполнение контейнера
Плавающие контейнеры
Позиционирование элементов
Относительное позиционирование

Разбиение элементов по слоям
Example.6.1

Текстовые ссылки

Текстовые ссылки
Тег a
Исключенный атрибут target
Вывод в новом окне браузера
Переадресация страниц

Тег meta
Слайд-шоу
Перемещение между папками
Стили ссылок
Исключенные атрибуты body
Ссылки внутри страницы
Исключенный атрибут name
Соединение с документами других типов

Текстовые файлы
Документы, созданные текстовым процессором
Документы электронной таблицы
Документы презентации
Графические файлы
Ссылки е-mail
Графические ссылки
Карты ссылок
Определение отображаемых областей

Кодирование карты ссылок
Перекрывающиеся активные области
Код страницы с картой ссылок
Исключенный код usemap
Example.7.1

Создание таблиц

Создание таблиц
Тег pre
Простая таблица
Границы таблицы и ячеек

Размер таблицы
Вложенные таблицы
Оформление нескольких таблиц
Теги colgroup и col/
Задание стилей
Задание стилей группы столбцов
Задание стилей столбцов
Задание стилей верхнего колонтитула
Задание стилей нижнего колонтитула
Атрибут Rules тега table

Атрибут Frame тега table
Оформление без объединения столбцов в группы
Использование таблицы для компоновки страницы
Создание компоновки страницы
Создание шаблона страницы
Создание информационного бюллетеня
Границы таблиц
Стили границ таблицы
Индивидуальные стили границ
Сжатие границ ячеек

Стили границ ячеек
Выборочное оформление границ ячеек
Индивидуальные стили границ
Исключенные атрибуты тега table
Тег caption
Тег th
Исключенный атрибут align тега caption
Цвет таблицы и фон
Цвет границ таблицы

Цвет границ ячеек
Цвет фона таблицы
Фон ячеек и цвет текста
Фон таблицы
Размер таблицы и выравнивание
Ширина и высота таблицы
Ширина столбцов
Выравнивание таблицы

Выравнивание текста внутри ячеек
Отступы в ячейках
Интервал между ячейками
Выравнивание текста
Выравнивание по вертикали
Выравнивание по горизонтали
Пустые ячейки
Ячейки таблицы без переноса слов
Исключенные атрибуты тега table
Объединение ячеек

Атрибут colspan
Атрибут rowspan
Объединение строк и столбцов
Пример объединения
Определение объединяемых ячеек
Кодирование структуры таблицы
Просмотр структуры таблицы
Оформление таблицы
Разбиение таблицы на группы

Тег thead
Тег tfoot
Тег tbody
Example.8.1

Форматы аудио/видео

Форматы аудио/видео
Методы передачи

Воспроизведение медиа
Ссылки на медиафайлы
Соединение с сайтами с помощью JavaScript
Встроенный медиафайл
Форматы аудио
Форматы видео
Воспроизведение аудио
Соединение с файлами аудио
Встраивание файлов аудио
Программирование плеера

Воспроизведение нескольких звуков
Фоновые звуки
Исключенный тег embed
Воспроизведение видео
Соединение и встраивание видеофайлов
Программирование плеера
Оформление плеера
Доступ к потоковому видео
Специальные эффекты
Тег marquee

Динамический HTML
Функции JavaScript
Апплеты Java
Манипуляции с текстом
Прокрутка текста
Игры
Тикеры
Исключенный тег applet
Использование технологии Flash
Example.9.1

Создание множества фреймов

Создание множества фреймов
Документ frameset

Тег frameset
Тег frame
Атрибут src
Атрибут name
Атрибут noresize
Атрибут scrolling
Атрибут marginwidth
Атрибут marginheight
Вложенные фреймы
Задание фрейма в ссылке

Атрибут target
Кодирование документа
Выход из множества фреймов
Используйте фреймы с осмотрительностью
Плавающие фреймы
Эмуляция фреймов
Использование таблицы
Программирование тега div
Example.10.1

Управляющие элементы формы

Управляющие элементы формы
Элементы управления формы
Обработка формы
Создание форм
Тег form
Атрибут id
Атрибут action
Тег button
Объединение элементов управления в группу и порядок обхода

Теги fieldset и legend
Порядок обхода по Tab
Отправка формы
Пары имя/значение
Пример формы
Отправка формы
Действие mailto:
Атрибут method
Локальная обработка данных
Элементы управления textbox

Тег input/
Атрибут type
Атрибут id
Атрибут size
Атрибут maxlength
Атрибут value
Использование кавычек в текстовых полях
Дополнительное оформление текстовых полей
Извлечение данных из textbox
Элементы управления textarea

Атрибут id
Атрибут cols
Атрибут rows
Предварительно введенное содержание
Теги XHTML и кавычки в текстовой области
Дополнительное оформление текстовой области
Извлечение данных из textarea
Радио кнопки
Тег input type="radio"
Атрибут id

Атрибут name
Атрибут value
Атрибут checked
Извлечение данных радио кнопки
Флажки
Тег input type="checkbox"/
Атрибут id
Атрибут name
Атрибут value
Атрибут checked

Извлечение данных из флажков
Раскрывающиеся списки
Теги select и option
Атрибут id
Атрибут name
Тег option
Атрибут value
Атрибут size
Атрибут multiple
Атрибут selected

Извлечение данных раскрывающегося списка
Кнопки Submit и Reset
Кнопка input type="submit"/
Атрибут id
Атрибут name
Атрибут value
Тег input type="image"/
Тег input type="reset"/
Дополнительное оформление кнопок
Другие кнопки

Тег input type="button"/
Example.11.1

Структура сайта

Структура сайта
Задачи создания сайта Web
Содержимое сайта Web
Структура сайта Web

Рекомендация 8. Обеспечьте прямую доступность встроенных интерфейсов пользователя
Рекомендация 9. Проектируйте независимость от устройств
Рекомендация 10. Используйте промежуточные решения
Рекомендация 11. Используйте технологии и рекомендации W3C
Рекомендация 12. Предоставляйте контекстную и ориентировочную информацию
Рекомендация 13. Предоставляйте четкие механизмы навигации
Рекомендация 14. Создавайте документы четкими и простыми
Требования Раздела 508
Иерархическая структура
Линейная структура

Смешанная структура
Графическая блок-схема
Распределение содержимого по страницам
Рабочие чертежи
История Интернет и его использование
Размеры страниц
Задание горизонтальных размеров
Задание вертикальных размеров
Мифология дизайна
Организация страницы

Цвета страницы
Цветовой круг
Выбор цветов
Монохроматическая схема цветов
Схема аналогичных цветов
Схема дополнительных цветов
Схема раздельно-дополнительных цветов
Тройственная схема цветов
Ахроматическая схема цветов
Выбор цветовой палитры

Шрифтовое оформление
Контурные шрифты
Семейства шрифтов
Размер шрифта
Размер строки
Свободное пространство
Цвет текста
Доступность
Вспомогательные технологии
Рекомендации W3C по доступности

Рекомендация 1. Предоставляйте эквивалентные возможности для слухового и визуального контента
Рекомендация 2. Не полагайтесь только на цвет
Рекомендация 3. Правильно используйте разметку и таблицы стилей
Рекомендация 4. Уточняйте использование естественного языка
Рекомендация 5. Создавайте таблицы, которые аккуратно трансформируются
Рекомендация 6. Проверьте, что страницы, использующие новые технологии, трансформируются аккуратно
Рекомендация 7. Обеспечьте пользователю возможность управления изменяющимся во времени контентом
Example.12.1


Введение в реляционные базы данных перейти