- •Учебный Курс по html Содержание
- •Введение
- •Понимание html
- •Предназначение и цели современного html
- •Древообразная структура html
- •Понятие dtd
- •Объектная модель документа
- •Содержание и отображение
- •Пример современного html
- •Пример html старого типа
- •Используемые средства и программы Редактор для html – текстовый редактор
- •Редактор для css
- •Настройка рабочего места в Photoshop
- •Слои (Layers)
- •Принятие решения: текст – картинка
- •Формат изображений (gif, jpeg, png)
- •Вспомогательные средства.
- •Полезные plug-in’ы.
- •Оформление документов – корпоративный стиль Правила именования папок и файлов
- •Правила для html-кода
- •Отступы
- •Элементы и атрибуты
- •Переносы
- •Перенос элемента
- •Перенос внутри элемента
- •Вставка специальных символов
- •Комментарии
- •Правила для css-кода
- •Основные правила для кода JavaScript
- •Основные элементы html
- •Немного о стандартах
- •Селекторы
- •Псевдоклассы и псевдоэлементы
- •Единицы измерения
- •Основные css-свойства
- •Свойства шрифта
- •Свойства эффектов текста
- •Свойства выравнивания
- •Свойства переноса
- •Свойства фона
- •Свойства цвета текста
- •Свойства границ элемента
- •Свойства обтекания
- •Свойства внешнего отступа
- •Свойства внутреннего отступа
- •Свойства таблицы
- •Свойства отображения
- •Свойства размера
- •Свойства позиции
- •Свойства переполнения
- •Порядок применения стилей и приоритеты
- •Основные способы персонализации стилей для браузеров
- •Ie 6 и ниже
- •Ie 7 и все современные браузеры
- •Практическая верстка с чего начинается документ
- •Модели отображения блочных элементов
- •Заголовок документа
- •Xml заголовок в xhtml документе
- •Проверка документов на соответствие спецификациям
- •Тело документа
- •Основные виды веб-страниц
- •Страница с фиксированной шириной
- •Страница с плавающей шириной
- •Основные элементы страницы
- •Логотип
- •Способы использования png
- •Способы и особенности создания страниц с изменяемым размером шрифта
- •Создание страниц с использованием em для указания размеров элементов страницы
- •Особенности табличной верстки
- •Создание email-шаблонов
- •Особенности создания принт-версии страницы
- •Особенности создания страниц с использованием правостороннего ввода текста (арабский, иврит и т.П.)
- •Оптимизация кода для поисковых систем и стандарты доступности
- •Заключение
- •Приложение
Проверка документов на соответствие спецификациям
Для того чтобы убедиться, что ваш документ соответствует заданной (и описанной в DOCTYPE) спецификации, существует специальный сервис, или так называемый валидатор, предоставленный консорциумом W3C и доступный по адресу: http://validator.w3.org/
W3C валидатор является весьма удобным средством для проверки валидности документов и выявления ошибок. Он четко покажет в какой строке ошибка и на что следует обратить внимание для документов данного типа. Помимо проверки HTML и XHTML это средство также пригодно для оценки документов, имеющих родство с XHTML, таких, как, например XHTML+MathML, XHTML+MathML+SVG, а также SVG.
Проверка CSS файла также возможна, используя соответствующий W3C сервис, доступный по адресу: http://jigsaw.w3.org/css-validator/
Как уже было сказано, следование общепринятым стандартам создания веб-документов вносит вполне очевидную упорядоченность в многоликом изобилии Интернет. Это, несомненно, является хорошим тоном любого веб-разработчика, от индивидуальной личности до крупной компании.
Тело документа
Тело HTML-документа включает в себя все, что обрамлено тегом body. Внутри этого тега находится отображаемая часть документа, его смысловое наполнение.
Большинство элементов, используемых в теле документа перечислены в разделе . Здесь же рассмотрим те элементы HTML, которые использовать нельзя или нежелательно. К таким элементам относятся: font, hr, map, frame.
Элемент font не является элементом, определяющим структуру документа, но отвечает только за стиль отображения. Так как все элементы отображения должны быть вынесены в CSS, использование элемента font является крайне нежелательным, что подтверждается консорциумом W3C.
Элемент hr (horizontal rule) предназначен для отображения горизонтального разделителя в виде линии. В документах строгого дизайна элемент HR практически не используется по причине его специфического отображения различными браузерами. Старайтесь не использовать этот элемент без особой необходимости.
Элемент map создан для нанесения координатной сетки на изображение, выделяя таким образом, области изображения, являющиеся гиперссылками. Использование элемента map вносит излишнюю путаницу в структуру документа, делая его менее понятным для поисковых роботов, да и людей тоже. Следует избегать использования этого элемента без особой на то необходимости.
Использование элемента frame подразумевает использование фреймовой структуры документа, для чего должно быть соответствующее требование со стороны заказчика. Использование фреймовой структуры документа имеет ряд недостатков, в числе которых труднодоступность содержания некоторых документов поисковым роботом и невозможность адресации конкретной страницы фрейма. Не используйте фреймы, если для это нет специальных требований. Ввиду своих недостатков, элемент frame сейчас практически не используется.
К числу нежелательных относятся также атрибуты, отвечающие исключительно за отображение. Рассмотрим несколько из них.
Атрибут nowrap предназначен для указания того, что текст внутри элемента не должен разбиваться на несколько строк. На смену ему пришло CSS-свойство white-space со значением nowrap. Использование этого атрибута оправдано разве что для браузеров, которые не поддерживают CSS-свойство white-space. Как правило, это уже устаревшие браузеры вроде Internet Explorer 5.0 или Netscape 4. В случае XHTML, атрибут nowrap, как и любой другой атрибут, по правилам XML обязательно должен иметь значение.
Атрибут nowrap в XHTML
<td nowrap="nowrap">…</td>
Атрибут rowspan элемента td указывает, сколько строк таблицы должны быть объединены в одну. Из-за неоднозначного понимания браузерами, этот атрибут является крайне непопулярным. Старайтесь избегать использования этого атрибута. Следуя этому правилу вы будете более уверены в том, что ваш документ будет правильно отображаться в различных браузерах.
Атрибуты hspace и vspace определяют горизонтальный и вертикальный отступ для изображений, определенных в документе с помощью элемента img. Очевидно, что эти атрибуты отвечают за отображение, а не смысловую нагрузку документа, поэтому вместо них разумнее использовать соответствующие свойства отступа CSS.
Атрибут style определяет стиль для элемента непосредственно в HTML-документе. Его значением может являться любой набор CSS-свойств. Применять атрибут style нужно в случаях крайней необходимости или в целях отладки. Преимущество этого атрибута заключается в том, что CSS-свойства, описанные внутри него имеют наивысший приоритет по сравнению с другими стилями, описанными во внешних или внутренних CSS.