Несмотря на то, что Web-технологии возникли сравнительно недавно, в мире Интернет успели сформироваться правила, которые диктуют, что нужно и что нельзя делать, чтобы HTML-документы корректно воспринимались пользователем. Этот параграф содержит несколько советов по созданию и оформлению HTML-документов.
Ошибки русского языка
При написание Web-материала (впрочем, не только Web) придерживайтесь орфографических правил и правил пунктуации русского языка.
Интернет -- открытое и очень демократическое образование. Опубликованный в сети материал никем не контролируется. Поэтому, к сожалению, довольно часто можно увидеть документы не только с незначительными, но и просто страшными с точки зрения русского языка ошибками. Проверяйте не только текст, подлежащий разметке с помощью HTML, но и текст на графических кнопках, заголовках и т. д., то есть весь текст, который пользователь будет читать.
При оформлении текста полезно придерживаться следующих типографских традиций набора.
- Расстановка пробелов
- В русскоязычном наборе пробел обязательно ставится:
- после, а не до запятой, точки, точки с запятой, двоеточия, вопросительного или восклицательного знака (и их сочетаний), многоточия в конце фразы или предложения, закрывающей скобки и закрывающей кавычки;
- до, а не после, открывающей скобки, открывающей кавычки и многоточия в начале предложения;
- и до, и после тире.
Никогда не ставится пробел между скобкой или кавычкой и каким-либо другим знаком препинания, кроме тире. - Неразрывные пробелы
- Неразрывный пробел, обозначаемый в языке HTML последовательностью символов
, в русском языке ставится:- между двумя инициалами и между инициалами и фамилией: И. O. Фамилия;
- между знаками номера и параграфа и относящимися к ним числами;
- внутри сокращений "и т. д.", "и т. п.", "т. е." и другими;
- между внутритекстовыми пунктами, такими как "а)", "б)" или "1.", "2.", и следующим за ними текстом;
- между числами и относящимися к ним единицами измерения: 200 кг; это же относится и к указаниям дат: XVIII в.;
- перед тире в середине предложения (таким образом, этот знак препинания отделяется пробелами с двух сторон - неразрывным слева и обычным справа);
- между классами многозначных чисел, начиная с пятизначных: 1 302 569;
- перед номерами версий программных продуктов и частями их названий, состоящими из цифр или сокращений;
- после однобуквенных предлогов и союзов.
- Текстовые выделения
- Пользуясь курсивом или полужирным выделением в тексте, соблюдайте следующие правила:
- кавычки должны быть того же начертания, что и заключенный в них текст; окружающие выделенный фрагмент скобки, наоборот, должны соответствовать начертанию основного текста, а в месте стыка прямого и курсива скобки всегда остаются прямыми;
- знаки препинания, следующие за выделенным фрагментом, должны быть набраны основным начертанием.
Заголовки страниц
Не забывайте для каждого HTML-документа включать в контейнер <head> ... </head> заголовок документа, заключенный между тегами <title> и </title>.
Именно этот тег содержит необходимые пользователю минимальные сведения о документе. Когда пользователь сохранит адрес вашей странички в закладках браузера, именно информация из заголовка <title> ... </title> послужит ему в дальнейшем ориентиром для загрузки вашей странички.
Поиск ваших документов в сети
Используйте атрибуты description и keywords тега <meta> для задания описания и ключевых слов документа.
Важным является правильная организация поиска вашего материала на поисковых сайтах. Автоматические сборщики информации при поиске документов опираются на метаинформацию, расположенную в разделе HEAD документа и описываемую при помощи тега <meta>. Эта служебная информация не отображается в окне браузера.
Пример
<meta name="description"
content="Рекомендации по созданию домашних страничек">
<meta name="keywords" content="язык HTML, HTML, тег,
метаинформация, русский язык, типографские правила,
title, meta, !DOCTYPE, тестирование, браузеры">
Проверка ссылок
Web-автор обязан обеспечить правильную работу всех ссылок в пределах своего материала: локальных (в пределах вашего материала) и внешних (ссылки на "чужие" сайты и странички).
Грубейшей ошибкой в сети считается неправильная работа ссылок. Ваши странички не должны содержать "ссылок в никуда" или ссылаться на некорректный материал.
Условия просмотра
Проблема подачи информации в Web-дизайне связана прежде всего с тем, что автор не может предугадать, в каких условиях пользователь будет просматривать Web-материал. Читатели вашего документа могут использовать самые разные браузеры, устанавливать собственные настройки для просмотра информации (цвет фона и т. д.), у них могут быть проблемы с передачей цветов из-за особенностей видеокарты.
Профессиональный Web-дизайнер старается по мере сил учитывать возможные варианты просмотра и создавать странички максимально подходящие для разных условий.
Старайтесь, чтобы ваши странички смотрелись правильно по крайней мере в двух браузерах -- Netscape и Explorer.
Программисты обеих компаний вводят в свои программы особенности, не признаваемые другими браузерами. Поэтому когда вы посещаете сайт, разработанный "специально для Netscape", пользуясь другим браузером, то видите его страницы не совсем в том виде, на который рассчитывали их создатели. Документация по сетевым технологиям зачастую содержит комментарии типа "в Netscape не работает". Изворотливые мастера отыскивают способы обмануть браузеры, заставляя показывать информацию одинаково.
Следует учитывать различие в поведении этих браузеров при обнаружении некорректного кода. Netscape неправильный код не обрабатывает и, соответственно, показывает страничку как есть, т. е. с ошибками. Explorer поступает по-другому -- при обработке неправильного кода он пытается предугадать недостающие теги или пропущенные параметры.
Например, в большинстве случаев незакрытый парный тег будет обработан браузером Explorer так, как будто он есть, и не вызовет ошибки, хотя сам код, тем не менее, останется некорректным. Лучше, конечно, учиться писать корректный код.
Если при подготовке HTML-документа соблюдать следующие правила, то количество возможных ошибок значительно снизится.
- Обязательно закрывайте все теги (кроме одиночных).
- Внимательно следите за вложенностью тегов. Не допускайте ситуации, когда внешний тег закрывается раньше, чем внутренний:
<b><i>правильно</i></b> <b><i>неправильно</b></i>
- Значения атрибутов, содержащих пробелы и другие специальные символы, должны обязательно заключаться в кавычки. Можно заключать в кавычки все параметры, но это не является обязательным.
- При использовании формы на странице внимательно следите за тем, чтобы все элементы, составляющие форму (
<input>,<select>,<textarea>, и т. д.), находились между тегами<form>и</form>.
Попробуйте отключить у браузера поддержку графики, листов стилей, JavaScript, изменить различные установки странички -- цвет фона, цвет ссылок, шрифты и др.
В теге <body> нужно обязательно прописывать все цвета: фон странички, текст, цвет ссылок, цвет посещенных ссылок, цвет активных ссылок или не прописывать никаких. В противном случае может возникнуть такая ситуация, что какой-нибудь из неописанных цветов и, следовательно, взятый из настроек пользователя, совпадет с цветом фона, что приведет к "исчезновению" части текста.
Для всех изображений, несущих некоторую смысловую нагрузку, нужно прописывать параметр alt тега <img>. Причем текстовое описание должно выражать смысл изображения; это позволит просматривать ваши странички при отключенной графике и все же понять смысл иллюстраций.
Задание
- Примените указанные правила к оформлению вашей домашней странички.
- Включите при помощи тега в документ его описание и набор ключевых слов.
- Убедитесь в том, что ваш документ корректно отображается и браузером Netscape, и браузером Internet Explorer.