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

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

Применение нестандартных элементов

Как известно, единственного общеупотребимого браузера не существует. Конечно же, в этом нет ничего необычного - мы привыкли к изобилию альтернативных программных продуктов. Однако разнообразие браузеров вызывает определенные затруднения. Дело в том, что не все элементы, которые могут использоваться в одном браузере, отображаются другими. Это означает, что при создании Web-документа следует ориентироваться не на один браузер, а на целый ряд подобных программ. Документ должен быть надлежащим образом оформлен независимо от того, какой браузер из числа наиболее употребимых используется. При создании документа следует добиваться того, чтобы его отображение было наилучшим в наибольшем количестве браузеров, а не совершенного отображения в каком-либо одном. Существуют два варианта поведения. Многие используют только те расширения, которые поддерживает самый распространенный браузер, Navigator; однако в этом случае пользователи других браузеров не увидят некоторых элементов оформления.

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

  • Если два (или более) распространенных браузера поддерживают данное расширение, его рекомендуется использовать. Так, и Netscape, и Mosaic поддерживают табличное представление данных, следовательно, с таблицами созданного документа ознакомится большинство посетителей страницы.
  • Если расширение не является широко распространенным, но, будучи опущенным, не слишком искажает документ, его тоже рекомендуется использовать. Так, элемент FONT изменяет размер шрифта в Netscape, WebExplorer, Internet Explorer; другие браузеры игнорируют данный тег, но отображают относящийся к нему текст. Зато при использовании элемента MATH некоторыми браузерами на экране появляется мусор.

    Общие же рекомендации таковы: украшения следует использовать умеренно, и эффект от этого должен быть максимальным. Если для решения какой-либо задачи невозможно найти универсальное расширение, обдумайте вариант с копией страницы, подходящей для чтения и использования альтернативным браузером. В то же время старайтесь избегать заголовков типа "Enhanced for Netscape" или "Enhanced for Internet Explorer". Попытайтесь построить документ так, чтобы у пользователя в любом случае не возникло подозрений относительно полноты представленного документа - чтобы оставаясь в счастливом неведении о том, что от него скрыто, он был бы уже под впечатлением того, что видит.

    Необходимые пометки

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

    Есть несколько правил, касающихся оформления пометок:

  • Пометки принято размещать в конце документа.

  • Формат даты не должен быть двусмысленным; так, запись 7/3/1997 может быть интерпретирована и как 3 июля 1997, и как 7 марта 1997, чего нельзя сказать о записи July 3, 1997.

  • Ссылки с указанием below (в русскоязычном варианте - ниже), к примеру See Bulky below, более удобны в использовании, так как они позволяют читателю ориентироваться в пространстве документа, ведь "страничка" далеко не всегда умещается на одном экране. Если посетителя заинтересовало указанное в ссылке название, он сможет обратиться непосредственно к этому подпункту, и в то же время будет знать, что данный подпункт находится в тексте документа ниже.

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

    Существует еще один способ связи документа с информацией об авторе - использование элемента LINK для типа made внутри тега HEAD:

    
     Заголовок 
     

    Элемент LINK используется, подобно элементу А, для организации связи документа с другим объектом. Как и все содержимое тега HEAD, эта связь не отображается браузером на экране, ее назначение - поддержка функции reply to author (ответ автору документа), реализуемой многими браузерами, а кроме того, она может быть использована приложениями и утилитами, обрабатывающими машиночитаемый вариант документа.

    Бумажный вариант HTML-документа

    Современное делопроизводство не такое "бумажное", как раньше. Однако по-прежнему зачастую удобнее воспользоваться бумажной копией, а не электронным вариантом документа. Поэтому в процессе составления Web-документа нужно следить за тем, чтобы и в распечатанном виде он оставался удобным для чтения и использования.

    Текстовое оформление ссылок

    В процессе создания гипертекстового документа следите за тем, чтобы каждая ссылка имела собственное, однозначно определяющее ее имя. Текст документа, на который вы ссылаетесь, должен не только соотноситься с содержанием всего гипертекстового документа, но и, распечатанный отдельно, иметь самостоятельную ценность. Ссылки типа Click Here ("Нажмите!") недопустимы по нескольким причинам. Во-первых, подобные ссылки подразумевают поддержку мыши браузером, что не всегда выполняется. Второе неудобство связано с тем, что пользователь может изучать документ по распечатке. Получив распечатку документа с подобными именами ссылок, он сможет только догадываться о том, на какой фрагмент указывала данная ссылка (равно как и о том, присутствует ли этот фрагмент текста в распечатке). Если же имена ссылок соответствуют названиям подпунктов документа, подобные сомнения легко разрешаются при просмотре распечатки.

    Структурирование текста документа

    При правильном употреблении заголовков текст становится структурированным, что облегчает работу с документом. Заголовки первого уровня обычно используют для (Н1) выделения основной части документа; заголовками второго уровня (Н2) обозначают подпункты основных частей. При этом важно помнить, что назначением заголовка является не столько выделение определенного вида и размера шрифта, сколько разбивка документа на секции. Существуют некоторые рекомендации по использованию заголовков при оформлении страницы Web.

  • Производный заголовок должен отличаться от производящего не более чем на один уровень. Это означает, к примеру, что элемент Н3 не должен следовать непосредственно за элементом Н1.
  • Поскольку элемент заголовка задает изменения шрифта, абзацные отступы и прочие элементы форматирования текста, следует учитывать, что попавшие в данный абзац украшения текста могут быть деформированы заголовком типа ЕМ или В.
  • Не используйте для текста параграфа маркировку Н3 или Н2, поскольку заголовки требуют определенного размера и жирности шрифта, и в интерпретации некоторых браузеров локальных клиентов буквы текста окажутся неестественно большими, что повлияет на размещение текста на странице и повлечет непредсказуемые изменения внешнего вида документа.

    Интонации - за и против

    Созданный независимым от устройств язык гипертекстовой разметки документа HTML не предусматривает возможности текущего контроля за тем, как тот или иной способ выделения фрагмента текста будет выглядеть на экране. Существует два типа выделения символов; их принято называть физическим и логическим. К первому типу относятся выделение курсивом () или жирным шрифтом (). Ко второму - расстановка акцентов (, ) и (). Настоятельно рекомендуем использовать теги второго типа - на то есть несколько причин.

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

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

    И вот, наконец, новая страница продумана и написана на языке HTML (а может быть, уже размещена на Web-узле). Автору остается только... исправить ошибки!

    Работа над ошибками

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

    Применение тега нового абзаца (

    ) несколько отличается от остальных - новый абзац выделяется только с одной стороны: в начале или в конце. До недавнего времени практиковалось выделение конца абзаца; теперь же рекомендуется использовать элемент

    в начале выделяемого отрывка. Поэтому особенно внимательно нужно следить за тем, чтобы данный тег не употреблялся перед теми элементами, которые сами по себе обозначают конец абзаца (перед заголовками, перед HR, ADRESS, BLOCKQUOTE, PRE, а также перед тегами

  • ,
    ,
    ). Поскольку назначение данного элемента обычно сводится к выделению абзацного отступа, подумайте, действительно ли это вам необходимо.

    В соответствии с правилами кодирования, выработанными ISO, всем специальным символам однозначно сопоставлены определенные коды - ASCII-коды. Язык HTML использует четыре спецсимвола:

  • левое ограничение тега (<), кодируемое как <
  • правое ограничение тега (>), кодируемое как >
  • кавычки (в кодировке ASCII) - "
  • знак &, кодируемый как &.

    Самой распространенной ошибкой при оформлении тегов в кодировке ASCII является пропуск знака точки с запятой, которым спецсимвол ограничен с правой стороны.

    Вторая по распространенности ошибка - наличие дополнительных пробелов после или перед спецсимволом.

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

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

    
    database Vermut 

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

     database Vermut

    Пропуск кавычек в тегах начала - тоже распространенная ошибка. Реакция на эту ошибку различается у разных браузеров. Некоторые выводят ссылку на экран, но использовать ее не представляется возможным; иные воспринимают весь последующий текст вплоть до следующих встретившихся кавычек как URL-адрес и пытаются путешествовать по Cети, пользуясь, к примеру, рекомендациями по выпечке пирожков.

    Большинство элементов HTML обособляется и справа и слева; только некоторые элементы, такие как

    или


    , не требуют окончания выделения. Например, окончание элемента:

    Выделенный текст,

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

    Применение пробелов слева и справа от элементов тега тоже может иметь нежелательный эффект, поэтому лишних пробелов следует избегать. Так, в нашем примере, вместо

     Пирог с рыбой  !

    следует использовать

     Пирог с рыбой !

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

    Напутствие

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


    Мария Тиматкова - сотрудница РНЦ "Курчатовский институт".

    Наши советы по оформлению HTML-документа

  • Если два (или более) распространенных браузера поддерживают данное расширение, его рекомендуется использовать.
  • Если расширение не является широко распространенным, но, будучи опущенным, не слишком искажает документ, его тоже рекомендуется использовать.
  • Украшения следует использовать умеренно, и эффект от этого должен быть максимальным
  • Пометки принято размещать в конце документа.
  • Формат даты не должен быть двусмысленным
  • Ссылки с указанием below более удобны в использовании
  • В процессе создания гипертекстового документа следите за тем, чтобы каждая ссылка имела собственное, однозначно определяющее ее имя.
  • Web-документ и в распечатанном виде должен оставаться удобным для чтения
  • При правильном употреблении заголовков текст становится структурированным, что облегчает работу с документом.
  • Используйте логическое выделение
  • Применение тега нового абзаца (

    ) несколько отличается от остальных

  • Не пропускайте знак точка с запятой, которым спецсимвол ограничен с правой стороны
  • Указывайте полный путь к документу
  • Не пропускайте кавычки в тегах начала
  • Не пропускайте знак / в тегах конца
  • Применение пробелов слева и справа от элементов тега тоже может иметь нежелательный эффект

    Поделитесь материалом с коллегами и друзьями