- •Введение
- •Глава 1. Основы
- •1.1. Браузеры
- •Преодоление различий браузеров
- •1.2. Программирование
- •1.3. Дизайн при неизвестном разрешении монитора
- •Гибкая раскладка
- •Дизайн с фиксированной шириной
- •Корневая директория для Web
- •1.4. Знакомство с серверами
- •Java-сервлеты и jsp
- •Абсолютная и относительная адресация
- •Соглашения об именах файлов
- •Выбор кодировки
- •Глава 2. Html и xhtml
- •2.1. Роль html
- •2.2. Отделение представления от структуры документа
- •2.3. Атрибуты
- •Вложенные элементы
- •Информация, которую браузеры игнорируют
- •2.4. Введение в xhtml
- •Три разновидности html 4.01 и xhtml 1.0
- •Хорошо сформированный xhtml
- •Атрибуты id и name
- •2.5. Элементарная структура документа
- •2.6. Тело документа
- •2.7. Текстовые элементы
- •Блочные элементы
- •Внутристрочные элементы логического форматирования
- •Перенос строки
- •Горизонтальные линейки
- •Стилевые элементы
- •Практика
- •Как сделать хороший html – документ
- •2.8. Создание гиперссылок
- •Организация ссылок на область документа
- •Практика
- •2.9. Таблицы
- •Описательные элементы
- •Группы строк
- •Столбцы и группы столбцов
- •2.10. Фреймы
- •Преимущества использования фреймов
- •Недостатки
- •Базовая структура набора фреймов
- •Нестандартные атрибуты
- •Нестандартные атрибуты
- •Создание строк и столбцов
- •2.11. Формы
- •Элементы форм
- •Поле для ввода текста
- •Поле для ввода пароля
- •Переключатель
- •Выбор файла
- •Многострочные текстовые поля
- •Создание меню при помощи элементов select
- •Группы вариантов
- •Надписи
- •Атрибуты accesskey и tabindex
- •Практика
- •Глава 3. Стили css
- •3.1. Преимущества css
- •Определение – задают свойства селектора.
- •3.2. Способы добавления таблиц стилей на Web-страницы
- •Href – позволяет задать url-адрес таблицы стилей.
- •Наследование
- •3.3. Конфликтующие правила стилей: каскад
- •3.4. Контекстные селекторы
- •3.5. Использование классов
- •3.6. Группировка
- •3.7. Псевдоселекторы
- •3.8. Другие псевдоклассы css 2.1
- •Псевдоэлементы
- •3.9. Единицы измерения, используемые в каскадных таблицах стилей
- •3.10. Свойства css для управления цветом
- •Практика Задание 1
- •Задание 2
- •Задание 3
- •3.11. Оформление таблиц с помощью css
- •Заголовки таблиц
- •Порядок наложения элементов
- •Границы
- •Расчет размеров таблицы (ширина, высота)
- •Алгоритм с фиксированной шириной
- •Алгоритм с автоматически определяемой шириной
- •3.12. Оформление таблиц
- •Практика
- •3.13. Блочные и внутристрочные элементы
- •3.14. Введение в блоковую модель
- •3.15. Нормальный поток
- •Свободное размещение
- •3.16. Пропуск размещаемых элементов
- •3.17. Позиционирование: основы
- •3.18. Охватывающий блок
- •3.19. Задание положения
- •3.20. Обработка переполнения
- •3.21. Расчет позиции элемента
- •3.22. Фиксированное позиционирование
- •3.23. Относительное позиционирование
- •Практика
- •3.24. Css свойства
- •3.25. Методики css
- •Центрирование страницы
- •Раскладка в 2 столбца
- •Раскладка в 3 столбца
- •Раскладка в 3 столбца c абсолютным позиционированием
- •Позиционирование трех столбцов
- •Центрирование с рамками и полями
- •Ложные столбцы
- •Заключение
- •Список литературы
- •Оглавление
- •Глава 1. Основы 4
- •Глава 2. Html и xhtml 15
- •Глава 3. Стили css 56
Атрибуты accesskey и tabindex
Поскольку Рекомендация HTML 4.01 является частью деятельности W3C, направленной на совершенствование доступности Web-материалов и интерактивности для пользователей, не применяющих визуальные браузеры и традиционные средства указания и выбора, в ней появились несколько атрибутов, разработанных для того, чтобы упростить выбор полей с клавиатуры. Чтобы элемент управления формы можно было использовать, он должен быть выбран и активизирован. В мире разработки такое состояние называется получением фокуса. Следующие атрибуты перемещают фокус на элемент формы без использования традиционного метода, связанного с наведением курсора мыши и щелчком. Любой пользователь может применять эти методы для перемещения по форме.
Атрибут accesskey указывает символ, который можно использовать как клавиатурный «ярлык» элемента. На практике может потребоваться ввести комбинацию клавиш, например Alt-клавиша (Windows) или Command-клавиша (Macintosh).
Атрибут accesskey можно применять с элементами управления button, input, label, legend и textarea. Когда клавиша доступа переводит фокус на элемент label, фокус передается в соответствующий элемент управления формы.
Еще один метод перемещения фокуса по полям формы – это нажатие клавиши Tab, которое переводит фокус от одного поля к другому. По умолчанию браузеры, которые поддерживают данную функциональность, будут переводить фокус в том порядке, в каком поля находятся в документе. Если вы хотите изменить порядок перевода фокуса, используйте атрибут tabindex. Этот атрибут может использоваться с элементами button, input, select и textarea. Элементы с нулевым значением tabindex получают фокус после элементов с положительными значениями. Элементы с отрицательными значениями tabindex не получают фокус при нажатии клавиши Tab. Отключенные элементы также не могут получать фокус.
Пример.
Address <input type="text" name="address" tabindex="l" />
Zip code <input type="text" name="zip" tabindex="3" />
Phone number <input type="text" name="phone" tabindex="2" />
Еще один атрибут, повышающий доступность полей формы (а также ссылок, изображений и других ресурсов) – это атрибут title. Используйте его для создания описаний полей или для указания специальных инструкций. Речевые браузеры могут произносить содержимое данного атрибута, когда поле получает фокус. Визуальные браузеры могут отображать эти данные в виде всплывающей подсказки, когда курсор мыши наводится на поле.
Атрибуты disabled и readonly блокируют для пользователя возможность выбрать или изменить значение в поле формы. Если элемент формы отключен (disabled), его нельзя выбрать.
Атрибут readonly запрещает пользователю изменять значение в поле формы (хотя поле все же можно выбирать).
Практика
Создайте следующие формы на WEB-странице
В последней форме в полях Фамилия, Имя, Отчество должны отображаться данные по умолчанию. В каждой форме должна быть кнопка, очищающая поля формы. С помощью кнопки Submit данные должны отправляться с помощью метода GET, то есть через строку URL.
