Динамический HTML

Рекомендации по созданию HTML-документов

Несмотря на то, что Web-технологии возникли сравнительно недавно, в мире Интернет успели сформироваться правила, которые диктуют, что нужно и что нельзя делать, чтобы HTML-документы корректно воспринимались пользователем. Этот параграф содержит несколько советов по созданию и оформлению HTML-документов.

Ошибки русского языка

Интернет - открытое и очень демократическое образование. Опубликованный в сети материал никем не контролируется. Поэтому, к сожалению, довольно часто можно увидеть документы не только с незначительными, но и просто страшными с точки зрения русского языка ошибками. Проверяйте не только текст, подлежащий разметке с помощью HTML, но и текст на графических кнопках, заголовках и т. д., то есть весь текст, который пользователь будет читать.

При оформлении текста полезно придерживаться следующих типографских традиций набора.

Расстановка пробелов

В русскоязычном наборе пробел обязательно ставится:

• после, а не до запятой, точки, точки с запятой, двоеточия, вопросительного или восклицательного знака (и их сочетаний), многоточия в конце фразы или предложения, закрывающей скобки и закрывающей кавычки;
• до, а не после, открывающей скобки, открывающей кавычки и многоточия в начале предложения;
• и до, и после тире.

Никогда не ставится пробел между скобкой или кавычкой и каким-либо другим знаком препинания, кроме тире.

Неразрывные пробелы

Неразрывный пробел, обозначаемый в языке HTML последовательностью символов "   ", в русском языке ставится:

• между двумя инициалами и между инициалами и фамилией: И. O. Фамилия;
• между знаками номера и параграфа и относящимися к ним числами;
• внутри сокращений "и т. д.", "и т. п.", "т. е." и другими;
• между внутритекстовыми пунктами, такими как "а)", "б)" или "1.", "2.", и следующим за ними текстом;
• между числами и относящимися к ним единицами измерения: 200 кг; это же относится и к указаниям дат: XVIII в.;
• перед тире в середине предложения (таким образом, этот знак препинания отделяется пробелами с двух сторон - неразрывным слева и обычным справа);
• между классами многозначных чисел, начиная с пятизначных: 1 302 569;
• перед номерами версий программных продуктов и частями их названий, состоящими из цифр или сокращений;
• после однобуквенных предлогов и союзов.

Текстовые выделения

Пользуясь курсивом или полужирным выделением в тексте, соблюдайте следующие правила:

• кавычки должны быть того же начертания, что и заключенный в них текст; окружающие выделенный фрагмент скобки, наоборот, должны соответствовать начертанию основного текста, а в месте стыка прямого и курсива скобки всегда остаются прямыми;
• знаки препинания, следующие за выделенным фрагментом, должны быть набраны основным начертанием.

Заголовки страниц

Именно этот тег содержит необходимые пользователю минимальные сведения о документе. Когда пользователь сохранит адрес вашей странички в закладках браузера, именно информация из заголовка <TITLE>... </TITLE> послужит ему в дальнейшем ориентиром для загрузки вашей странички.

Поиск ваших документов в сети

Важным является правильная организация поиска вашего материала на поисковых сайтах. Автоматические сборщики информации при поиске документов опираются на метаинформацию, расположенную в разделе HEAD документа и описываемую при помощи тега <META>. Эта служебная информация не отображается в окне браузера.

Пример

<META NAME="description" 
 CONTENT="Рекомендации по созданию домашних страничек">
<META NAME="keywords" CONTENT="язык HTML, HTML, тег,
 метаинформация, русский язык, типографские правила, 
 title, meta, !DOCTYPE, тестирование, браузеры">

Проверка ссылок

Грубейшей ошибкой в сети считается неправильная работа ссылок. Ваши странички не должны содержать "ссылок в никуда" или ссылаться на некорректный материал.

Условия просмотра

Проблема подачи информации в Web-дизайне связана прежде всего с тем, что автор не может предугадать, в каких условиях пользователь будет просматривать Web-материал. Читатели вашего документа могут использовать самые разные браузеры, устанавливать собственные настройки для просмотра информации (цвет фона и т. д.), у них могут быть проблемы с передачей цветов из-за особенностей видеокарты.

Профессиональный Web-дизайнер старается по мере сил учитывать возможные варианты просмотра и создавать странички максимально подходящие для разных условий.

Программисты обеих компаний вводят в свои программы особенности, не признаваемые другими браузерами. Поэтому когда вы посещаете сайт, разработанный "специально для Netscape", пользуясь другим браузером, то видите его страницы не совсем в том виде, на который рассчитывали их создатели. Документация по сетевым технологиям зачастую содержит комментарии типа "в Netscape не работает". Изворотливые мастера отыскивают способы обмануть браузеры, заставляя показывать информацию одинаково.

Следует учитывать различие в поведении этих браузеров при обнаружении некорректного кода. Netscape неправильный код не обрабатывает и, соответственно, показывает страничку как есть, т. е. с ошибками. Explorer поступает по-другому - при обработке неправильного кода он пытается предугадать недостающие теги или пропущенные параметры.

Например, в большинстве случаев незакрытый парный тег будет обработан браузером Explorer так, как будто он есть, и не вызовет ошибки, хотя сам код, тем не менее, останется некорректным. Лучше, конечно, учиться писать корректный код.

Если при подготовке HTML-документа соблюдать следующие правила, то количество возможных ошибок значительно снизится.

• Обязательно закрывайте все теги (кроме одиночных).
• Внимательно следите за вложенностью тегов. Не допускайте ситуации, когда внешний тег закрывается раньше, чем внутренний:

  <B><I>правильно</I></B>
  <B><I>неправильно</B></I>
• Значения атрибутов, содержащих пробелы и другие специальные символы, должны обязательно заключаться в кавычки. Можно заключать в кавычки все параметры, но это не является обязательным.
• При использовании формы на странице внимательно следите за тем, чтобы все элементы, составляющие форму ( <INPUT>, <SELECT>, <TEXTAREA>, и т. д.), находились между тегами <FORM> и </FORM>.

Попробуйте отключить у браузера поддержку графики, листов стилей, JavaScript, изменить различные установки странички - цвет фона, цвет ссылок, шрифты и др.

В теге <BODY> нужно обязательно прописывать все цвета: фон странички, текст, цвет ссылок, цвет посещенных ссылок, цвет активных ссылок или не прописывать никаких. В противном случае может возникнуть такая ситуация, что какой-нибудь из неописанных цветов и, следовательно, взятый из настроек пользователя, совпадет с цветом фона, что приведет к "исчезновению" части текста.

Задание

1. Примените указанные правила к оформлению вашей домашней странички.
2. Включите при помощи тега META в документ его описание и набор ключевых слов.
3. Убедитесь в том, что ваш документ корректно отображается и браузером Netscape, и браузером Internet Explorer.