Web-документы и программы для работы с ними

Интернет представляет собой гигантский набор информации, основанной на гипертекстовых документах. Любой гипертекстовый документ представляет собой обычный текстовый файл в формате ANSI ASCII (или другой кодировке, например, UTF), содержащий собственно текст и специальные теги для его разметки, а также ссылки на другие подобные документы, графические изображения и любые иные файлы. Когда браузер - программа просмотра гипертекста - загружает подобный файл, все теги обрабатываются и содержимое файла форматируется для отображения. Теги задаются в файле и обрабатываются браузером в соответствии с правилами специального языка - HTML (Hyper Text Markup Language - язык разметки гипертекста).

Следует отметить, что HTML, вопреки распространенному заблуждению, ни в коей мере не является языком программирования. HTML - это типичный язык разметки, т.е. с его помощью можно оформлять документы, создавать ссылки, но никак не писать программы. Даже специальные эффекты, которые можно увидеть на web-страницах, создаются не с помощью HTML, а с использованием дополнительных средств - например, встроенных в документ программ на языке JavaScript, или с использованием Flash-роликов.

Путешествуя по сети, вы, вероятно, уже не раз задавались вопросом: а как созданы все эти страницы? Любой браузер позволяет просмотреть исходный текст HTML-документа. Для MSIE это команда "Просмотр HTML-кода" из меню "Вид", в других браузерах так же предусмотрены подобные команды, более того, во всех Mozilla-браузерах для этих целей имеется сочетание "горячих клавиш" Ctrl+U. Например, исходный текст HTML-документа, изображенного на рис. 1.1 показан на рис. 1.2. Таким образом, если вам приглянулась та или иная страница, вы всегда можете просмотреть, как она сделана.

Сразу хочу оговориться, что если вы видите в заголовке страницы что-либо вроде "Microsoft FrontPage", смело закрывайте окно просмотра источника: скорее всего, ничего полезного извлечь все равно не удастся. Автоматические генераторы HTML составляют код страниц так, как это им удобно, и никакой структуры документа за мешаниной тегов вы не увидите. Не намного лучше обстоят дела и у CMS - систем управления сайтом, зачастую генерирующим такой же мусорный код.

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

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

Рис. 1.1. Внешний вид HTML-страницы в браузере Mozilla Firefox

Рис. 1.2. Исходный текст документа при просмотре в Mozilla Firefox

Действительные документы HTML

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

Такая ситуация изначально была вызвана проблемами совместимости различных версий браузеров с теми или иными стандартами HTML. Например, Netscape и MSIE до версии 3.0 включительно не поддерживали таблицы стилей, а более новые версии допускали ряд ошибок при их обработке. Кроме того, разные браузеры стремились отобразить одну и ту же страницу каждый по-своему. Впрочем, к настоящему моменту пользователей, все еще использующих столь старые программы уже не осталось, поэтому, разрабатывая современные страницы для интернета, следует придерживаться существующих стандартов. Для документов WWW таковым в настоящий момент является HTML 4.01, а так же два его "наследника" - языки XHTML 1.0 и HTML 5.

Даже в не самых современных браузерах, включая MSIE 6.0 и, особенно, Mozilla (имеется ввиду ранние версии вроде Firefox 1.x, в версиях 3.0 и выше поддержка действительно полная), поддержка HTML 4 обеспечена практически на все 100%. Браузер Opera так же очень корректно обрабатывает HTML 4. Что касается XHTML, то этот язык как таковой поддерживается лишь браузерами Mozilla, однако все остальные браузеры прекрасно понимают написанные по правилам XHTML страницы, интерпретируя их с точки зрения "обычного" HTML.

ПРИМЕЧАНИЕ
Следует отметить, что язык XHTML 1.0, на самом деле является лишь определением HTML в качестве подмножества XML (расширяемого языка разметки). Фактически, документ, написанный на XHTML должен соответствовать по синтаксису XML. И любая программа, поддерживающая XML, может вывести XHTML-документ, основываясь на DTD (Document Type Definition - определение типа документа), принятом для XHTML.

Вместе с тем, стандарт - стандартом, а реальные пользователи используют реальные программы просмотра. Поэтому не следует всецело полагаться на описанные стандарты - необходимо также регулярно просматривать результаты работы хотя бы двумя-тремя наиболее популярными на текущий момент браузерами. На ближайшее время можно порекомендовать Internet Explorer 6.0 и 8.0, Firefox 3.х, одну из версий Opera и Chrome. Следование данным правилам сделает ваши страницы более привлекательными для посетителей.

Проверить любой документ на соответствие действующему стандарту можно при помощи специального сервиса, предоставляемого всем желающим консорциумом по стандартизации интернета - W3C (www.w3.org). По адресу validator.w3.org, находится W3C Markup Validation Service - служба проверки web-документов на соответствие стандартам. Указав там адрес проверяемой страницы, и подождав секунду-другую, вы увидите подробный список всех ошибок и несоответствий. Если таковых не имеется, то получите сообщение вроде "This document is valid XHTML 1.0 Transitional".

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

Версии браузеров

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

Итак, прежде всего, разберемся с MS Internet Explorer. В настоящее время самой популярной является его последняя, 6-я версия (к слову, вышедшая еще в 2001 году). За ней, с большим отставанием идет версия 5.0 (та, что была в Windows 98 SE и 2000), и замыкает тройку "промежуточная" версия 5.5. Что касается 4-й версии MSIE, то ей уже практически никто не пользуется. Вместе с тем, с точки зрения вебмастера, версия 5.5 ближе к 6.0, в то время как механизм построения страниц у MSIE 5.0 почти не отличается от такового у 4-й версии. Таким образом, можно упростить себе задачу, сгруппировав браузеры Microsoft в две категории: MSIE 4/5 и MSIE 5.5/6. Если же взглянуть еще шире, то все версии MSIE, начиная с 4-й, согласно "внутренней" нумерации, относятся к одной категории - Mozilla/4.0.

Несколько сложнее дело обстоит с браузером Mozilla, так как новые версии выходят регулярно, и, кроме того, на том же самом движке, известным как "Gecko", выходят еще два продукта - SeaMonkey и Firefox, а ранее был еще и Netscape. Здесь мы будем вынуждены прибегнуть к помощи таблицы, чтобы наглядно представить себе соотношение всех версий этих программ. Версия Gecko и версия Mozilla Suite всегда совпадали (выпуск Mozilla Suite прекратился на этапе подготовки к выходу версии 1.8, вместо него вышел SeaMonkey 1.0).

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

Что касается браузера Opera, то новые версии этой программы выходят достаточно часто, однако изменения носят скорее косметический характер. Основные вехи - это версии 8.50 - первая бесплатная и 11.10, в которой появилась поддержка аппаратного ускорения - по ним можно ориентироваться на возможности этого браузера.

Что касается собственного определения, то последние версии Opera определяются точно как же, как MSIE 6.0 (и все последующие версии Explorer-а), хотя на практике Opera 7, а тем более - Opera 8, можно смело относить к 5-му поколению браузеров, подобно Mozilla. Впрочем, во многом этим требованиям соответствует даже MSIE 6.

Проверить, каким образом браузер заявляет о себе сайту очень просто - для этого достаточно ввести в строке адреса URL сайта, предоставляющего подобный сервис (например, http://insert-title.com/browser.asp). А по ходу ознакомления с этой книгой мы узнаем, как получить идентификационную строку браузера средствами JavaScript.

Типы HTML-редакторов

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

Прежде всего, следует отметить, что все HTML-редакторы подразделяются на два типа - редакторы тегов и WYSWYG-редакторы. Первые предполагают, что пользователь знаком с языком разметки (HTML), и предоставляют пользователю возможность самому вводить теги, а вторые подобны обычному текстовому процессору, например, программе Microsoft Word. Следует отметить, что сам Word, начиная с версии 8.0 (97), по существу, тоже является WYSWYG-редактором, поскольку позволяет сохранять отформатированный документ в виде HTML-файла.

Рассмотрим подробнее вторую группу. Прежде всего, если у вас установлен браузер SeaMonkey, то у вас имеется программа для редактирования web-страниц - Composer. Microsoft, в свою очередь, предлагает программу Front Page входящую в поставку некоторых версий пакета Office. Существуют, конечно, и другие, но эти две - самые распространенные. К достоинствам Composer следует отнести достаточно простой и удобный интерфейс, а Front Page - средства поддержки проекта (сервера). Среди недостатков у Composer - это неэффективный способ работы с сайтом в целом, а у Front Page - как правило, безликие и серые страницы. Последнее обусловлено тем, что масса шаблонов и мастеров создания документов, на самом деле, ограничивают фантазию разработчика и навязывают ему "штампованный" дизайн.

ПРИМЕЧАНИЕ
Самым мощным WYSWYG-редактором, к тому же генерирующим вменяемый HTML-код, принято считать Adobe Dreamweaver. Следует только учитывать, что эта программа далеко не бесплатная и стоит порядка 500$.

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

В противоположность им, редакторы тегов не ставят никаких ограничений. Автор страниц волен использовать любые теги, применяя самые новые возможности HTML, не дожидаясь, пока выйдет новая версия редактора, которая их поддерживает. Как правило, подобные программы создаются небольшими фирмами, или пишутся отдельными программистами. Среди них есть весьма простые - например, имеющийся на прилагаемом компакт-диске MetaProducts LightPad. Такие программы позволяют быстро создавать заготовку документа, вставлять наиболее распространенные теги по нажатию сочетания горячих клавиш, и вызывать браузер для просмотра редактируемого документа подобным образом. Некоторые, например, тот же LightPad поддерживают подсветку синтаксиса (выделение ключевых слов языка шрифтом или цветом). Есть и более мощные, например HomeSite фирмы Macromedia (ныне тоже Adobe), или Visual Workshop от MetaProducts. При помощи этих программ можно не только использовать специальные мастера для создания наиболее сложных элементов (например, таблиц), но и работать над проектами - набором взаимосвязанных файлов, образующих сайт. Так, Visual Workshop позволяет автоматически конвертировать все документы в нужную кодировку при отправке на сервер, производить поиск и замену сразу по всем файлам проекта, создавать ссылки между файлами одним движением мышки, следить за изменениями сайта, выгружать файлы по FTP и т.д.

Между тем, в качестве редактора тегов можно использовать и простейшую программу, входящую в поставку Windows. Имя ей - notepad, или блокнот. К сожалению, отсутствие горячих клавиш и ограничения на размер файла (в версии для Windows 98) или крайне медленная работа с объемным текстом (в Windows XP и выше) не добавляют этому редактору достоинств, но, тем не менее, его использование вполне может быть оправдано, когда надо быстро подправить 1-2 строчки в небольшом файле.

Редактор LightPad

Перед тем, как приступить собственно к изучению web-технологий, рассмотрим редактор LightPad. Для его установки достаточно запустить файл lpsetup.exe, находящийся в каталоге Soft на прилагаемом компакт-диске (либо здесь можно скачать LightPad). В процессе установки программа запросит установочный каталог, а также спросит, надо ли создавать ярлык на рабочем столе (опция "Add shortcut to Desktop"), и надо ли назначать LightPad стандартным средством просмотра исходного кода HTML для браузера MSIE (опция "Set as default HTML source viewer").

Наверное, первое, что следует сделать отечественному пользователю после установки и первого запуска программы, так это изменить язык интерфейса. Для этого зайдите в меню "View", найдите в нем подменю "Language" и выберите пункт "Russian". Теперь можно исследовать настройки программы - для этого зайдите в меню "Сервис" и выберите пункт "Настройки".

Все настройки LightPad разделены на 4 категории - "Пользователь", "Редактор", "Расположение программ" и "Команды". Наибольший интерес представляет категория "Редактор", где можно установить тип создаваемого при запуске программы файла (скорее всего, следует выбрать "Текст HTML"), а также его имя и расположение на диске. Здесь же задается шрифт, а также включается или отключается подсветка синтаксиса. При помощи кнопки "Настроить" можно открыть дополнительное окно настроек программы, в котором задаются правила подсветки для всех поддерживаемых редактором типов файлов.

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

Но собственно для проверки ошибок HTML-синтаксиса в LightPad предусмотрен отдельный инструмент - проверка кода HTML (меню "Сервис", пункт "Проверить HTML", или F6). Воспользовавшись этим сервисом, можно получить список всех найденных ошибок и недочетов в коде HTML-документа. Этот список будет выведен в специальную область внизу основного окна программы. А двойной щелчок по строке с описанием ошибке приводит к тому, что редактор прокручивает текст до нужного места и устанавливает курсор в начало проблемного места.

ПРИМЕЧАНИЕ
Помимо проверки кода HTML, LightPad может проверять и правописание русского и английского языков. Правда, чтобы эта опция стала доступной, вам потребуется установить еще и его "большого брата" - редактор Visual Workshop.

Наконец, в LightPad имеется еще одна полезная и крайне востребованная функция - возможность немедленного просмотра документа в любом браузере, включая встроенный. В качестве "движка" для встроенного просмотра используется браузер MS Internet Explorer, а в качестве внешнего средства просмотра может использоваться любая программа. При чем изначально LightPad проверяет систему на наличие браузеров, и автоматически добавляет их свою инструментальную панель (а также и в меню "Сервис/Открыть в"). Более того, при каждом запуске будет производиться проверка на предмет изменения доступных средств просмотра, по крайней мере до тех пор, пока вы сами не зайдете в раздел "Расположение программ" настроек LightPad и не измените список вручную.

Помимо рассмотренных особенностей, в LightPad имеются и другие - такие, как окно "Text Clips", из которого можно вставлять теги, и в котором можно хранить часто применяемые "куски" текста. Есть и возможность создания собственных кнопок меню ("Настройки" - "Команды"). Кроме того, через меню "Сервис" доступны функции перекодирования документа между разными кириллическими кодовыми страницами, а в меню "Правка" можно найти такие интересные и полезные функции, как изменение регистра символов или "очистка" текста от тегов HTML.

2011-04-29 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

« Введение | Первый документ HTML »