Практика разработки Web-страниц
         

Код HTML запутан и трудночитаем


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

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

Если ваша программа не предоставляет автоматического форматирования HTML, вы можете загрузить нужную программу из Интернет. Функция HTML Tidy доступна на World Wide Web Consortium по адресу www.w3.org, в Приложении C есть и другие адреса.
  1. Если у вас нет функции форматирования HTML, вы можете отформатировать его вручную. Сначала вставьте разрывы строк, чтобы каждый тэг располагался на своей строке. Сделайте отступ у всех тэгов внутри таблиц и других блоков. Используйте правильный регистр при написании тэгов и атрибутов.


    увеличить изображение
    Хорошо организованный HTML легче читать и понимать

  2. В комментариях поясните, что происходит в HTML – указывайте разделы страницы и назначение тэгов, например. Броузеры не обратят внимания на эти строки, зато ваш код станет более понятным.

    <!--Navigation bar hyperlinks belong in this cell -->

  3. Если вы используете FrontPage, вы можете переформатировать HTML, переключившись в режим Normal или пересохранив страницу. В меню Tools нажмите Page Options, выберите вкладку HTML Source и нажмите Reformat Using The Rules Below. Установите параметры форматирования HTML и нажмите OK.


    Front Page форматирует HTML по установленным вами правилам

  4. Если вы используете HomeSite, функция CodeSweeper может отформатировать код за вас. Сохраните страницу и затем нажмите кнопку CodeSweeper на панели инструментов.

    Чтобы установить параметры CodeSweeper, нажмите Settings в меню Options и нажмите CodeSweeper. Чтобы использовать HTML Tidy, часто дающий наилучший результат, выберите Allaire Default HTML Tidy Settings и затем нажмите Set As Default или щелкните дважды щелкните по любому элементу CodeSweeper, чтобы изменить настройки, такие как регистр имен тэгов и атрибутов.


    увеличить изображение
    HomeSite’s CodeSweeper очень хорошо настраиваемая функция, так что вы можете форматировать код как вам удобно

  5. После переформатирования просмотрите страницу в браузере. Проверьте, не появилось ли новых проблем с размещением и разбивкой, особенно со ссылками и форматирующими тэгами, такими как <B> или <I>. Внесите изменения в HTML, если это необходимо. Позже, отредактировав или изменив HTML, следуйте тем же правилам, чтобы получить удобный, хорошо читаемый код.



Содержание раздела