Модернизация типа документа до XHTML

Цель этого урока: преобразовать HTML-код сайта в XHTML и настроить Dreamweaver таким образом, чтобы весь код, добавляемый в дальнейшем, также соответствовал стандартам XHTML.

Что же представляет собой XHTML и чем он отличается от HTML? Стандарт XHTML был разработан, чтобы заменить HTML, – таким образом, отношения между двумя стандартами носят исторический характер.

Возможно, самое заметное изменение, которое привнес XHTML, мало связано с самим кодом. Это принципиально новый подход, который позволяет привести HTML в соответствие языку XML (eXtensible Markup Language – расширяемый язык разметки [гипертекста]). XML является мета-языком, то есть набором правил, которые позволяют разрабатывать новые языки, не выходя за рамки общего стандарта. XML – это язык разметки, такой же, как и HTML, – так что их синтаксис очень похож. Пример фрагмента XML-кода: <authorname type="first">Jeffrey</authorname>. Существуют различные вариации XML, например, MathML, язык разметки, используемый математиками для записи математических выражений. XHTML – это вариация языка, которая применяется разработчиками для (отметим этот знаменательный факт "барабанной дробью") разметки веб-страниц.

Один из основных принципов спецификации XML заключается в том, что теги описывают содержимое документа, а не его внешний вид. Внешний вид страниц, выполненных в формате XML, определяется отдельным типом кода (например, CSS, XSLT или XSL-FO). В предыдущих версиях HTML логическая разметка содержимого и его внешнего вида смешивались. Поскольку логика при построении таких элементов, как <font color="green" size="+1"> не соответствует логической разметке, по этой причине они отменены, то есть не рекомендованы к использованию, а рано или поздно будут исключены из стандартов, но в данный момент они все еще работают. Эти теги ничего не говорят пользователю о своем предназначении, а просто сообщают браузеру как отображать заключенное внутри них содержимое (в отличие от элемента <authorname> из предыдущего абзаца, который указывает о том, информацию какого плана он содержит).

Если говорить кратко, XHTML применяется для описания логической структуры документа: заголовков разного уровня (<h1>, <h2> и т. д.), списков (<ol>, <ul>, <li>), текста в теле документа (<p>), выделяемого текста (<strong>, <em>), ссылок (<a>) и т. п. Для указания правил, по которым браузеры (такие как Internet Explorer и Netscape) должны отображать информацию, вместо тегов внешнего вида (таких как <font>или <b>) используются каскадные таблицы стилей CSS.

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

XHTML в основном подобен HTML. Многие теги остались точно такими же:<body>, <head>, <h1>, <p>, <ol>, <a>, <table>, <tr>, <td>, <form> и другие. Фактически, при переходе к XHTML большая часть HTML-кода остается неизменной. Это значительно сокращает необходимое количество изменений.

Примечание. XHTML полностью совместим с предыдущими версиями языка разметки HTML. Это означает, что браузеры, созданные до появления спецификации XHTML, будут практически верно отображать XHTML-код.

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

все теги XHTML и их атрибуты записываются в нижнем регистре. В HTML теги <p> и <P> допустимы в равной степени, и многие разработчики использовали верхний регистр, поскольку это позволяло выделять теги на фоне остального кода. Но язык XHTML построен на основе правил XML, согласно которым все теги должны записываться в нижнем регистре, так что здесь допустим только тег <p>. Атрибуты тегов, например атрибут cellpadding="3" тега <table>, тоже вводится в нижнем регистре. В коде сайта Newland Tours теги записаны в нижнем регистре, так что эту проблему решать не придется;
все XHTML-теги должны быть закрытыми. Например, если на странице применяется тег <h1>, где-то должен быть и закрывающий тег </h1>. Однако у некоторых элементов нет закрывающих тегов. В частности, к таким пустым тегам относятся теги <br>, <img src="xyz.gif">, <hr> и <input>. Помимо этого, в HTML такие теги, как <p> и <li>, могли быть как закрытыми, так и пустыми. В XHTML они должны быть парными, то есть иметь закрывающие теги, в частности, </p> и </li>. Пустые теги закрываются особым образом при помощи следующего синтаксиса: <пустой_тег />. Следовательно, приведенные выше пустые теги должны быть преобразованы таким образом: <br />, <img src="xyz.gif" />, <hr /> и <input />. Пробел и обратная косая черта (обратный слэш) заменяют закрывающий тег;
поскольку существует множество различных версий HTML, разработчики в коде страниц указывают тип документа. Например, Dreamweaver в верхнюю строку большинства документов добавляет следующий код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">. Эта строка сообщает браузерам о том, какая версия кода (Модификация Transitional стандарта HTML 4.01) и какой язык (скажем, английский) используются в документе. В XHTML применяется другая форма объявления типа документа. Помимо этого, поскольку XHTML соответствует стандартам XML, документ должен содержать и объявление XML;
как говорилось ранее, теги физического форматирования отменены. Вместо этого для управления внешним видом применяются каскадные таблицы стилей.

Итак, пора приступать.

Откройте в Dreamweaver документ index.htm.

Операция поиска и замены распространяется на весь сайт, поэтому неважно, какой именно файл открыт – это может быть даже пустой несохраненный документ. Файл требуется только для того, чтобы открыть диалоговое окно Find and Replace (Найти и заменить)

Буквально через несколько шагов функция поиска и замены будет применена для того, чтобы преобразовать страницы сайта в XHTML. Для этого определение типа документа с использованием модификации Transitional стандарта HTML 4.01 следует заменить на модификацию Transitional спецификации XHTML 1.0. Документ будет полностью соответствовать стандартам XHTML, только тогда, когда в код будут внесены все необходимые изменения. После корректировки информации о типе документа все браузеры будут распознавать, что документ относится к XHTML, а Dreamweaver будет автоматически генерировать код, соответствующий новым стандартам.
Оставаясь в комбинированном режиме Split (Режим разделения), поместите курсор в конец раздела о перспективах отпуска Featured Vacation, расположенного в области Design (Дизайн) (после текста "$899/child USD") и нажмите комбинацию клавиш (Shift)+(Return) (Macintosh) или (Shift)+(Enter) (Windows).

Указанная комбинация клавиш добавляет элемент разрыва строки – пустой тег <br>, который в данный момент вставляется в формате HTML. Это доказывает, что по умолчанию Dreamweaver генерирует код, не соответствующий стандартам XHTML. Объясняется это тем, что в определении типа документа указана модификация Transitional версии HTML 4.01, в которой применение тега <br> не является ошибкой.

Пора изменить информацию о типе документа.
Выполните команды File\New (Файл\Создать), чтобы создать новый документ. Убедитесь в том, что выбрана категория Basic Page (Главная страница), а во втором столбце выбран тип файла HTML. Следует установить флажок Make Document XHTML Compliant (Сделать документ, совместимым со спецификацией XHTML) в правом нижнем углу. Нажмите кнопку Create (Создать).

При создании страницы, совместимой с XHTML, Dreamweaver помещает нужную информацию о типе документа в верхней строке кода. Для того, чтобы изменить тип всех страниц сайта, нужно скопировать этот код и заменить им все объявления версии HTML 4.01 Transitional.
Выделите первую и вторую строки нового документа, а затем выполните команды Edit\Copy (Файл\Копировать), чтобы скопировать код в буфер обмена. Закройте новый файл, не сохраняя его.

увеличить изображение

Скопированный код выглядит следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">"

Первая строка включает определение типа документа (в теге <DOCTYPE>), которое подобно определению в HTML 4.01. Но в данном случае изменились версия HTML и адрес DTD-файла. Итак, определение типа документа DTD (document type definition – определение типа документа) задает список элементов и атрибутов, определяющих тип документа и разрешенных в данной версии XML-документа. Следует отметить, что DTD может присутствовать в том же файле, что и документ, либо содержатся в отдельном DTD-файле.

Вторая строка содержит открывающий тег <html>, обязательный для всех HTML-документов. Его отличие в том, что он содержит атрибут xmlns (XML Name Space – пространство имен языка XML). В этом параметре указывается источник всех тегов. В XML этот параметр необходим, поскольку существует вероятность того, что два языка на основе XML будут использовать один и тот же тег. Если по умолчанию указано пространство имен, то программа, отображающая документ (в данном случае веб-браузер), способна устранить подобные конфликты.
Выполните команды Edit\Find and Replace (Правка\Найти и заменить).

Откроется диалоговое окно Find and Replace (Найти и заменить). Первоначальные настройки по умолчанию показаны на рисунке, но, в реальности, они могут отличаться в зависимости от тех настроек, которые были применены последними. Если область Replace With (Заменить на) или область, расположенная над ней, уже содержит какой-то текст, то следует удалить его. Прежде чем переходить к следующему шагу, нужно очистить оба поля.

увеличить изображение

увеличить изображение

Щелкните внутри области Replace With (Заменить на) и нажмите комбинацию клавиш (Command)+(V) (Macintosh) или (Ctrl)+(V) (Win-dows), чтобы вставить из буфера обмена две строки кода.

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

В результате Dreamweaver узнает, каким текстом следует заменить найденный. Пока что программа не определила, что требуется найти и в каких файлах проводить поиск.
Документ index. все еще должен быть открыт. В режиме Code (Код) прокрутите страницу вверх и выделите первую и вторую строки. После этого выполните команды Edit\Copy (Правка\Копировать), щелкните в текстовой области, расположенной над областью Replace With (Заменить на) и вставьте эти две строки кода.

И снова строки кода могут переноситься, если они не помещаются в текущей строке внутри указанной области.

увеличить изображение

Итак, теперь Dreamweaver "знает", что искать и чем заменять найденный фрагмент. Но программа до сих пор не определила, в каких файлах искать указанные фрагменты кода.
В раскрывающемся списке Find in (Найти в) вверху диалогового окна выберите пункт Entire Current Local Site (Поиск на текущем сайте).

Здесь Dreamweaver получает указание искать фрагмент кода в каждом HTML-файле сайта. То есть вместо того, чтобы менять каждую страницу по отдельности, достаточно за один прием обновить все файлы сразу.

Одновременное изменение нескольких файлов сразу потенциально опасно, поскольку коррективы, вносимые в закрытые файлы (то есть все файлы, кроме index.htm), нельзя отменить. Следует соблюдать осторожность при использовании функции поиска и замены применительно к нескольким файлам.
В раскрывающемся списке Search (Поиск) выберите пункт Source Code (Исходный код). Следует снять флажки Match case (Учитывать регистр), Match whole word (Только слово целиком) и Use regular expressions (Использовать регулярные выражения), а также установить флажок Ignore whitespace (Игнорировать пробелы).

Раскрывающийся список Search For (Поиск) является очень важным для проведения последующих действий. По умолчанию функция поиска и замены ищет совпадения с запросом в тексте, который отображается в браузере. Вариант Text (Текст) исключает поиск внутри кода. Изменения вносятся в код страниц, и обязательно следует выбрать вариант Source Code (Исходный код).

Опция Match case (Учитывать регистр) позволяет при поиске учитывать регистр вводимых символов (строчная буква "a" отличается от прописной "A"). Если флажок сброшен, то регистр не учитывается.

Match whole word (Все слово целиком) позволяет найти целое слово. Если флажок сброшен, то по запросу "design" будут найдены слова "design", "designer" и "designed". Если флажок установлен, будет найдено только слово "design".

Опция Ignore whitespace (Игнорировать пробелы) позволяет игнорировать любое пустое пространство, например, принудительные возвраты, символы табуляции и отступы между текстом или элементами. Поскольку браузеры игнорируют пустое пространство в HTML, многие программисты используют пробелы, чтобы сделать код более удобным для чтения.

Опция Use regular expressions (Использовать регулярные выражения) заставляет Dreamweaver интерпретировать зарезервированные символы, используемые в регулярных выражениях (например,/d в регулярных выражениях соответствует любой цифре) в качестве символов регулярных выражений. Если флажок сброшен и задан запрос/d, программа будет искать сочетание /d, а не цифры.

В своем окончательном виде диалоговое окно Find and Replace (Найти и заменить) должно выглядеть так же, как в приведенном примере.

увеличить изображение
Нажмите Replace All (Заменить все). Когда появится диалоговое окно с предупреждением, нажмите Yes (Да).

Начнется операция поиска и замены. По умолчанию откроется панель Results (Результаты), в которой указано, какие файлы были изменены. В данном случае будет изменено пять файлов. Поскольку сайт содержит пять страниц, можно сделать вывод, что изменения были успешными.

увеличить изображение
Чтобы завершить эксперимент с разрывом строки, вернитесь в нижнюю часть раздела Featured Vacation, в котором ранее был вставлен разрыв строки, и снова нажмите комбинацию клавиш (Shift)+(Return) (Macintosh) или (Shift)+(Enter) (Windows).

На этот раз вместо тега <br>, который был вставлен ранее, Dream-weaver добавит тег <br />. Как уже говорилось, синтаксис <br /> используется для пустых элементов и эквивалентен паре тегов <br></br>. При этом тег <br /> не является простым закрывающим тегом </br>. Это доказывает, что Dreamweaver определил стандарт XHTML, к которому относится документ. С этого момента программа будет добавлять в код соответствующие стандартам XHTML теги.

Примечание. В зависимости от того, каким способом форматируется текст, Dreamweaver все еще может добавлять в код теги <font>. Наилучший способ избежать этого,– при указании таких параметров текста, как цвет и размер, не использовать панель Property Inspector (Инспектор свойств). Вместо этого, следует как можно больше применять каскадные таблицы стилей CSS.

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

увеличить изображение
Удалите два созданных разрыва строки и сохраните файл.

При каждом значительном изменении следует сохранять index.htm. Закрытые файлы сохранять не требуется, поскольку при замене информации о типе документа Dreamweaver сохранил их автоматически.

Содержание Вперед