Как подготовить документ для публикации на WWW
Самый простой для начинающего пользователя способ подготовить документ для публикации на WWW - не осваивать никаких новых программ, а использовать при подготовке документов, предназначенных для публикации в Интернете, стандартный текстовый процессор, такой как Microsoft Word, а затем просто сохранить документ в формате HTML с помощью соответствующего пункта меню "File". Все компоненты Microsoft Office поддерживают эту возможность, начиная с версии Office 97. Правда, при преобразовании документов в формат HTML их вид несколько изменяется. Это связано с тем, что формат HTML предоставляет намного меньшие возможности для форматирования, чем форматы программ Microsoft Office.
Если вы с помощью Microsoft Office 97 откроете существующий HTML-файл, внесете в него изменения и сохраните, то скорее всего верстка этого файла будет испорчена. Возможность сохранять документы в формате HTML реализуется с помощью встроенного в программы пакета Microsoft Office конвертора. Конверторы предназначены для того, чтобы перевести документы из одного формата в другой. Существуют конверторы в HTML из самых разных форматов, в том числе и таких, как WordPerfect, LaTeX. И если у вас есть документы в форматах Microsoft Office, которые требуется опубликовать в Сети, следует использовать для их перевода в HTML встроенный в Office 97 конвертор. Но когда сфера употребления конверторов неоправданно расширяется, могут возникнуть сложности.
Поэтому когда у вас сформируется потребность создавать документы для Интернета на регулярной основе, лучше освоить специализированные программы и изучить основы гипертекста. Мы постараемся помочь вам сделать первые шаги на этом пути уже сейчас.
Сначала поговорим о специализированных HTML-редакторах. Их можно разделить на два основных типа.
Редакторы первого типа, типичными представителями которых являются редактор, встроенный в браузер Netscape Gold, и редактор Microsoft FrontPage 97, работают в рамках WYSIWYG, широко распространенной в компьютерном мире идеологии. WYSIWYG - сокращение английской фразы "What You See Is What You Get" - что видите (при редактировании), то и получаете (при выводе на печать или просмотре в браузере). По тем же принципам работают программы из общепринятых офисных пакетов, таких как Microsoft Office и Corel Office. Даже интерфейсы HTML-редакторов этого типа напоминают хорошо знакомый Word.
Редакторы второго типа ориентированы на помощь пользователю в создании HTML-разметки. Назовем некоторые из них:
- WebEdit Pro от Luckman Interactive ().
- HotDog фирмы Sausage Software ()
- HoTMetaL фирмы SoftQuad ().
- HomeSite фирмы Allaire ().
Редакторы обоих типов могут включать в себя средства, облегчающие ведение крупных веб-проектов.
Мы не будем подробно разбирать ни один из названных редакторов, поскольку все они быстро меняются и описание мгновенно устаревает. Кроме того, все названные редакторы или детально описаны на сервере компании-изготовителя на WWW, или поставляются с высококачественной документацией.
При использовании редакторов второго типа, облегчающих создание HTML-разметки, подразумевается, что пользователь знаком с основами HTML.
Удобно начать разговор об HTML с обсуждения расшифровки этой аббревиатуры. В главе 4 мы уже упоминали, что аббревиатура HTML расшифровывается как HyperText Mark-up Language - язык разметки гипертекста. Здесь ключевыми являются слова "язык разметки".
При оформлении документа с помощью языка разметки он выглядит иначе, чем при выводе на печать или в окне браузера. Языки разметки, таким образом, составляют противоположность идеологии WYSIWYG. Они использовались задолго до появления этой идеологии и не исчезли совсем с ее появлением. Для верстки документа в системах, поддерживающих WYSIWYG, требуются сложные текстовые процессоры. Для использования языка разметки достаточно простого текстового редактора. В частности, для создания HTML-документов часто используется простой текстовый редактор. В Windows такой редактор называется Notepad (Блокнот).
Разберем пример простого HTML-документа, для создания которого мы использовали Notepad.
<html>
<head> <title> Это заголовок </title> </head>
<body bgcolor=white link=green> <center> <p>Здесь обычно находится текст. <p><i>А так создается гиперссылка.</i> Конкретно эта указывает на веб-сервер книги "Интернет: первые шаги" <a href="http://www.internetbook.ru/">Internetbook.ru</a>. <p>Очень просто вставить картинку, если файл с ней уже готов. Наш файл лежит в поддиректории img директории, в которой находится наш HTML документ. <p><img src="img/spider.gif"> </center> </body>
</html>
Любой документ на языке HTML состоит из обычного текста и HTML-тегов (разметки). Теги представляют собой заключенные в угловые скобки маркеры, отражающие смысловую структуру документа и предписывающие браузеру отображать определенным образом его части. Маркеры HTML легко запоминаются, поскольку все они представляют собой или английские слова, или сокращения от них. HTML-документ открывается тегом <html>. Большинство тегов - парные, и открывающему тегу <html> в начале документа соответствует закрывающий </html> - тег с тем же маркером, только маркеру предшествует косая черта.
Парные теги обрамляют ту часть текста, на которую они действуют. Области действия тегов не могут пересекаться, но могут быть вложенными. Внутри тега <html> документ разбивается на две части - заголовок и тело, выделяемые тегами <head> и <body> соответственно.
Заголовок предназначен в основном для тегов, носящих служебный характер. Здесь также может находиться тег <title>. Обрамляемый им текст будет показан в заголовке окна браузера.
Тег <body bgcolor=white link=green>, открывающий тело нашего документа, содержит несколько факультативных атрибутов - bgcolor и link. Первый из них определяет цвет фона документа, второй - цвет ссылок. Тег <body> может содержать и некоторые другие атрибуты. Использование атрибутов допускают многие теги. Атрибуты не повторяются в закрывающем теге.
Затем в нашем документе встречается тег <center>. Весь текст и изображения внутри этого тега будут выровнены по центру окна браузера. Непарный тег <p> предписывает браузеру начать новый абзац, отделив его пустой строкой от предыдущего. Обратите внимание на то, что любому количеству пробелов и переносов строки, идущих друг за другом в исходном тексте HTML-файла, будет соответствовать только один пробел. Парный тег <i> обрамляет текст, который должен быть показан курсивом. Когда тег <a>, который мы находим дальше, содержит атрибут href, он оформляет гипертекстовую ссылку. Значение атрибута href - Интернет-адрес (URL) или имя файла документа, на который указывает ссылка. Обратите внимание, что значение атрибута href обязательно берется в двойные кавыки.
Непарный тег <img> позволяет вставить в гипертекст картинку. Значением атрибута src служит имя файла картинки или его Интернет-адрес (URL). Оно также обязательно берется в двойные кавычки.
Подавляющее большинство графической информации в Интернете хранится в двух графических форматах - GIF и JPEG (расширения файлов .GIF и .JPG, .JPEG). Формат JPEG используется для изображений, содержащих многоцветные переходы, например, таких, как фотографии. GIF предназначен для хранения малоцветных изображений.
В последнее время огромное распространение получило расширение формата GIF, позволяющее хранить в одном файле последовательность кадров, создающих анимацию. Анимации в этом формате, получившем название Animated GIF, вставляются в HTML документ как обычное изображение.
Теперь упомянем некоторые распространенные ошибки, допускаемые при создании HTML-документов. Сюда, прежде всего, относится появление пересекающихся областей действия тегов. <i><center>Пример ошибочного кода</i></center>
Часто забывают брать в двойные кавычки адрес гиперссылки и имя файла с картинкой. Иногда не ставят только одну из кавычек.
В окне браузера открыт наш HTML-документ
Здесь мы хотели только разобрать пример простейшего HTML-документа. Если вы хотите подробнее ознакомиться со спецификациями HTML и XHTML, технологиями создания веб-страниц, посетите сервер ().
