Валидация html и css
Для контроля правильности набора html-страницы и таблиц стилей CSS существуют специализированные средства, называемые «валидаторы».
Эталонный валидатор Validator.W3C доступен бесплатно по адресу http://validator.w3.org/, однако его использование предполагает, что проверяемый сайт полностью доступен в Интернет, либо проверить можно будет только одиночные файлы.
Локальную проверку правильности разметки можно осуществить при помощи плагинов для браузера Mozilla Firefox, например HTML VALIDATOR (http://users.skynet.be/mgueury/mozilla/). Отметим также, что Mozilla Firefox имеет встроенную консоль ошибок, в которой отображаются ошибки разметки CSS. Существуют также коммерческие продукты для проверки правильности разметки, например CSE HTML Validator for Windows - http://www.htmlvalidator.com/.
Рассмотрим принципы работы с валидатором Validator.W3C (см. рисунки 9-12).
Для примера внесём несколько ошибок в разметку HTML и CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Проверка разметки</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#main {
position: absolute;
left: 100px;
top: 50px
border: 1px solid black;
padding: 0 100px 100px 0
}
#content {
position: relative;
left: 20px;
top: 10px;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="main">Главное меню:
<div id="content"><p>Некоторый текст для проверки размещения элемента.</div>
</div>
</body>
</html>
Рисунок 9. Исходный код
При визуальном просмотре страницы ошибки могут быть не обнаружены. Однако валидатор показывает, что существует одна ошибка (рисунок 10).
Рисунок 10. Предупреждение валидатора о некорректной странице
Ошибки приведены ниже на той же странице (рисунок 11).
Рисунок 11. Просмотр ошибок кода
Помимо ошибок разметки всегда следует проверять правильность CSS (http://jigsaw.w3.org/css-validator/).
Для рассматриваемой страницы получаем сообщение, представленное на рисунке 12.
Рисунок 12. Предупреждение валидатора об ошибках CSS
Итак, по результатам проверки выявлено:
1. В разметке отсутствует атрибут xlmns для элемента HTML.
Вместо <html> согласно требованиям надо ввести <html xmlns="http://www.w3.org/1999/xhtml">, т.к. в данном случае тип проверяемого документа установлен XHTML 1.0. Если тип документа отметить как HTML 5 (экспериментальная версия проверки), то данной ошибки не будет.
2. В разметке страницы отсутствует закрывающий тег </p> в строке
<div id="content"><p>Некоторый текст для проверки...</p></div>
3. Нарушены таблицы стилей, поскольку отсутствует разделитель ‘;’ между селекторами:
top: 50px;
border: 1px solid black;
Исправив ошибки получаем (рисунок 13):
Рисунок 13. Информация от валидатора о корректной странице
Задания на лабораторную работу
Задание 1. В программе Блокнот создайте html-документ с помощью языка разметки гипертекста HTML5. Не забудьте правильно указать DOCTYPE! Сохраните этот документ под именем Фамилия.html.
Примечание. Обратите внимание, чтобы редактор Блокнот автоматически не сохранил Ваш файл с расширением .txt. Кодировку при сохранении изменить на utf-8!
На Web-страничке должны присутствовать:
Заголовки (2 или более).
Текст в несколько абзацев.
Работающая ссылка (либо на страницу в сети, либо на 2-ю Вашу страницу).
Заполненная текстом таблица.
2 списка (маркированный и нумерованный)
Рисунок (по желанию, можно также добавить аудио, видео).
Форма для ввода минимальных сведений о человеке (например, о посетителе сайта). Предусмотреть поля для ввода значений с клавиатуры, а также селекторы выбора готовых значений. Можно вынести данную форму на отдельную страничку и сделать на нее ссылку.
Важно: Дизайн и шрифты подключить с помощью CSS. Файл стилей должен содержать данные об общем фоне страницы, стиль заголовка, стиль текста. Кроме того, необходимо продемонстрировать применение глобального или внутреннего стиля.
Требования к созданию страницы:
Страничка должна быть выполнена в Блокноте и только в Блокноте (никаких генераций в FrontPage и т.п.). Основное требование по содержанию – Ваша страничка должна быть предметной, т.е. иметь смысл (можно, например, создать краткую страничку по теме Вашей курсовой по данному предмету). О себе, о лете, о пиве, о наркотиках и т.п. Web-страницы не делать! Все требования к заполнению элементами перечислены выше. Вы должны наполнить их своим содержанием и разместить по усмотрению.
Задание 2. Проверить на корректность разметки и CSS разработанные страницы и файл стилей с помощью соответствующих валидаторов http://validator.w3.org/ и http://jigsaw.w3.org/css-validator/. Проверять как документы XHTML 1.0 и HTML5, сравнить результаты. Составить список выявленных ошибок. Устранить ошибки. Если ошибок нет, создать хотя бы парочку намеренно.