- •Введение
- •Глава 1. Основы
- •1.1. Браузеры
- •Преодоление различий браузеров
- •1.2. Программирование
- •1.3. Дизайн при неизвестном разрешении монитора
- •Гибкая раскладка
- •Дизайн с фиксированной шириной
- •1.4. Знакомство с серверами
- •Корневая директория для Web
- •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
2.3. Атрибуты
Атрибут уточняет или изменяет работу элемента. Атрибуты обозначаются парами из имени атрибута и значения, добавляемыми к начальному тегу элемента (конечные теги никогда не содержат атрибутов). Имена атрибутов и допустимые для них значения объявляются в DTD. Иными словами, вы не можете создавать свои собственные. Вы можете добить несколько атрибутов в один открывающий тег. Атрибуты, если они есть, указываются после имени тега и разделяются одним или несколькими пробелами. Порядок их следования значения не имеет.
Синтаксис элемента с атрибутами следующий:
<элемент атрибут=”значение”>содержание</элемент>
Ниже приводятся примеры элементов, содержащих атрибуты.
<head profile="http://gmpg.org/xfn/ll">...</head>
<img src="graphics/pixie.gif" alt="pixie" />
<table summary="This is a conference schedule.">...</table>
Большинство браузеров не могут обрабатывать значения атрибутов, если их длина превышает 1024 символа. В значениях может учитываться регистр, особенно если это имена файлов или URL.
В HTML 4.01 и ниже разрешается использовать некоторые значения без кавычек, например если значение представляет собой одно слово, содержащее только буквы (a-z и A-Z), цифры (0-9), тире (-), точки (.), символы подчеркивания (_) и двоеточия (:). Лучше всего заключать в кавычки все значения, независимо от рекомендаций, которым вы следуете.
Замечание. Не пропускайте закрывающую кавычку, иначе все, от открывающей кавычки и до следующей открывающей кавычки, будет интерпретироваться как часть значения и не будет отображаться в браузере. Это простая ошибка, поиск которой может занять много часов.
Вложенные элементы
HTML-элементы могут содержать другие элементы. Это называется вложенностью, и, чтобы данная возможность применялась правильно, весь элемент, включая его разметку, должен помещаться между начальным и конечным тегами другого элемента (родителя). Правильное использование вложенности – это один из критериев хорошо сформированного документа.
В данном примере пункты списка (li) вложены в элемент – неупорядоченный список (ul).
<ul>
<li>Пример 1 /li>
<li>Пример 2</li>
</ul>
Распространенная ошибка – закрывание родительского элемента до того, как будет закрыт элемент, который в него вложен (потомок). Это приводит к неверному перекрытию элементов и XHTML-документ становится плохо сформированным и может привести к ошибкам в отображении HTML-документов.
Информация, которую браузеры игнорируют
Часть информации в HTML-документе, включая определенную разметку, игнорируется и оказывает очень малое или не оказывает никакого влияния на представление, когда документ отображается в браузере или в другом пользовательском агенте. Сюда относятся:
Переносы строки в HTML-документе рассматриваются как пробелы, которые, как правило, объединяются с другими пробелами (см. следующий пункт). Текст и элементы выводятся непрерывно, пока в тексте документа не встретится элемент р или br. Однако переносы строк отображаются, если текст размечен как предварительно отформатированный (pre) или если в таблице стилей используется свойство white-space: pre.
Табуляторы и множественные пробелы. Если пользовательский агент встречает несколько последовательно расположенных символов пробела в HTML-документе, он отображает только один. Дополнительные пробелы можно добавлять в текст, используя символьную сущность ( ). Однако несколько пробелов отображаются, если текст размечен как предварительно отформатированный (pre) или если в таблице стилей используется свойство white-space: pre. Обработка табуляторов в исходном коде документа достаточно проблематична для некоторых браузеров, и этого лучше избегать.
Пустые элементы р. Пустые элементы абзацев (<р>. . . </р> или только <р>) без содержащегося в них текста интерпретируются большинством браузеров как избыточные и отображаются как одно завершение абзаца.
Нераспознанный элемент. Браузер просто игнорирует любой элемент, который он не понимает или который был неверно указан. В зависимости от элемента и браузера это может приводить к разным результатам. Браузеры, как правило, отображают содержимое элемента и разметку как обычный текст, хотя некоторые более старые браузеры могут вообще ничего не отображать.
Текст комментариев. Браузеры не отображают текст, заключенный между специальными элементами < ! -- и --> , которые используются для обозначения комментария. Вот простой пример комментария:
<!-- Это комментарий -->
<!-- Это многострочный
комментарий который
заканчивается здесь. -->
Между начальным тегом < ! -- и конечным тегом --> должен быть пробел, но в комментарий можно вставлять практически все, что угодно. Вложенные комментарии не допускаются.