Создание собственного сервера WWW - сложное и весьма дорогостоящее дело, доступное только относительно крупным фирмам. Чтобы иметь такой сервер, вы должны приобрести компьютер для сервера, способный работать под управлением таких ресурсоемких операционных систем, как Microsoft Windows NT, UNIX или OS/2 Warp Server и соответствующее программное обеспечение, стоимостью несколько сотен долларов. Этот сервер должен работать круглосуточно. Вам также потребуется системный программист, специалисты по верстке страниц WWW, художники и т. д. Однако основные затраты - это аренда круглосуточных каналов связи с Internet, которая может стоить вам до нескольких тысяч долларов в месяц.
Поэтому многие фирмы, а также частные лица предпочитают не создавать собственный сервер WWW, а размещать свою информацию на уже существующих серверах, принадлежащих, например, поставщикам услуг Internet. Практически все такие поставщики с радостью предоставят вам свой сервер для размещения вашей информации за относительно недорогую плату.
Однако стоимость подготовки информации к размещению на сервере WWW силами поставщика услуг Internet достаточно велика и может достигать ста долларов за страницу или даже больше, особенно если дополнительно требуется перевод предоставленных вами текстов на другой язык или сложное художественное оформление страницы.
В то же время, используя современные средства подготовки страниц WWW, которых к настоящему моменту создано уже достаточно много, вы можете выполнить подготовку страниц самостоятельно. Разумеется, для этого вы должны обладать некоторыми художественными способностями, особенно если помимо текстового материала на странице должна располагаться графика.
Что же касается технической стороны дела, то в этой главе мы научим вас создавать собственные страницы WWW с использованием таких средств, как Microsoft Internet Assistant for Word и Netscape Navigator Gold, а также при помощи простейших текстовых редакторов.
Хотя для вас это может оказаться неожиданностью, но страницы WWW хранятся в виде самых обычных текстовых файлов. Все графические вставки, видео и звуковые данные записаны в отдельные файлы с использованием соответствующего формата (например, GIF или JPEG ). При этом страницы WWW содержат ссылки на эти файлы, но не двоичные данные.
Все многообразие стилевого и шрифтового оформления страниц WWW достигается с помощью управляющих команд, которые вставляются в соответствующие места текста. Именно поэтому для подготовки страниц WWW можно воспользоваться любым текстовым редактором (хотя специальные средства разработки страниц намного удобнее).
Набор управляющих команд и правил их использования определяется языком разметки гипертекста HTML (Hypertext Markup Language), который произошел от ранее разработанного мощного языка разметки текста SGML (Standard Generalized Markup Language ). Описание основных возможностей языка HTML является предметом данного раздела нашей книги.
Почему для представления страниц WWW, содержащих мультимедийную информацию, выбран именно текстовый формат?
Причина заключается в том, что такой способ представления страниц гарантирует переносимость на любую платформу. Эта возможность очень важна, так как сеть Internet объединяет компьютеры, имеющих самые разные архитектуры. А текст всегда остается текстом, записан ли он в файловой системе NTFS в операционной системе Microsoft Windows NT или лежит в наборах данных операционной системы IBM MVS на "большом" компьютере.
Развитие сети Internet и технологии WWW в настоящее время находится на стадии взрыва, поэтому каждый месяц появляются все новые средства разработки приложений Internet вообще и страниц WWW в частности. Помимо этого, постоянно развивается язык разметки страниц HTML. Если вы подключены к сети Internet и уже научились ориентироваться среди бесчисленного количества серверов WWW, для вас не составит труда получить самую последнюю информацию по данным вопросам.
Современные средства создания страниц WWW работают в режиме WYSIWYG. При этом вы редактируете документ и сразу видите, как он будет выглядеть при его размещении на сервере WWW. Используя такие средства, вы будете избавлены от необходимости глубокого изучения языка HTML. Однако в нашей книге мы все же приведем основные сведения об этом языке, так как они могут вам пригодиться либо для ручной "доводки" страниц, либо в том случае, если по какой-либо причине вы не сможете использовать высокоуровневые инструментальные средства разработки страниц.
В своем наиболее общем виде структура документа HTML выглядит следующим образом:
<HTML >... Содержимое документа... </HTML >
Команда <HTML > должна быть первой в документе. Она всегда используется в паре с командой </HTML>, завершающей документ. Между этими двумя командами располагается текст страницы и другие команды.
Для примера приведем содержимое простейшего документа, содержащего только одно слово Text. Этот весьма несложный документ был подготовлен с использованием расширения текстового процессора Microsoft Word for Windows, которое называется Microsoft Internet Assistant for Microsoft Word:
<HTML > <HEAD> <TITLE>Untitled</TITLE> <META NAME="GENERATOR" CONTENT="Internet Assistant for Microsoft Word 2.0z"> </HEAD> <BODY> <P> <FONT FACE="Times New Roman">Text</FONT> </BODY> </HTML >
Как видите, весь документ ограничивается командами <HTML > и </HTML>, между которыми находятся другие команды.
Команда <HEAD> используется всегда в паре с командой </HEAD> и предназначена для оформления заголовка документа.
В данном случае документ называется Untitled, причем текст заголовка находится между командами <TITLE> и </TITLE>. Разумеется, вы можете изменить это название либо средствами Microsoft Internet Assistant for Microsoft Word, либо любым текстовым редактором, например, редактором Notepad.
Команда <META …> предназначена для вставки в документ дополнительной информации о самом документе. В данном случае с помощью этой команды в документ была добавлена информация о программе, с помощью которой был создан документ.
Пара команд <BODY> и </BODY> ограничивают текст документа, то есть текст, который должен быть расположен на странице:
<P> <FONT FACE="Times New Roman">Text</FONT>
Команда <P> начинает новый параграф.
Далее следует команда <FONT…>, которая работет в паре с командой </FONT>. Как нетрудно догадаться из названия, эта команда в данном случае предназначена для определения шрифта, который следует использовать при отображении текстовой строки Text, заключенной между командами <FONT…> и </FONT>. Дополнительно команда <FONT…> позволяет указать другие атрибуты шрифтового форматирования, например, высоту букв.
Учтите однако, что команда <FONT…> имеет рекомендательный характер, так как пользователь, например, может установить собственный набор шрифтов, в котором отсутствует шрифт Times New Roman или другой, указанной в команде <FONT…>.
На рис. 4.1 мы показали, как выглядит созданная нами страница в окне навигатора Microsoft Internet Explorer.
Рис. 4.1. Внешний вид созданной простейшей страницы
Текст документа HTML, подготовленного при помощи другого средства редактирования страниц WWW, может несколько отличаться от текста, созданного с помощью расширения Microsoft Internet Assistant for Microsoft Word. В частности, там могут использоваться другие команды.
Вот, например, как выглядит та же самая страница, содержащая одно только слово Text, но подготовленная с использованием навигатора Netscape Navigator Gold :
<html> <head> <title>file:///Untitled</title> <meta name="Author" content="Alexandr Frolov"> <meta name="GENERATOR" content="Mozilla/2.0GoldB1 (Win32)"> </head> <body> <p>Text </p> </body> </html>
Нетрудно заметить, что заголовок документа содержит сведения об авторе. Дополнительно к текстовой строке Text был добавлен символ неразбивающего пробела, закодированный как " ". Кроме того, параграф был закрыт командой </p>, которая не используется расширением Microsoft Internet Assistant for Microsoft Word.
Данный простейший пример показывает, что в настоящий момент еще нет единых стандартов на средства разработки страниц WWW. Обнаруженные только что различия между текстами, созданными при помощи разных средств для казалось бы одинаковых документов - это капля в море. Изучая конкретные реализации языка HTML в высокоуровневых средствах разработки страниц WWW вы найдете немало гораздо более серьезных разногласий.
Причина заключается в том, что на рынке средств разработки приложений для Internet доминируют две фирмы. Это Microsoft и Netscape. Каждая из них проводит свою политику освоения этого весьма привлекательного сектора рынка. А нам, вероятно, остается либо ждать всеобщей стандартизации приложений для Internet (когда то она еще произойдет!), либо становиться приверженцем какой-нибудь одной линии.
Простейшие текстовые редакторы, такие как Notepad, Norton Editor или Лексикон для DOS, предполагают, что текст состоит из отдельных строк, каждая из которых завершается специальным символом - символом конца строки.
Такой подход вызывает много неудобств при форматировании документа, так как для установки расстояния между параграфами текста нужно вставлять пустые строки, а отступ первой строки и выравнивание столбцов в таблицах приходится делать с помощью символов пробела и табуляции.
Современные текстовые процессоры, например, Microsoft Word for Windows, пользуются символом конца строки по-другому. Вместо того чтобы вставлять этот символ в конец каждой строки текста, они отмечают указанным символом конец параграфа.
Таким образом, в текстовых процессорах используется понятие параграфа как текста, состоящего, возможно, из нескольких строк, в конце которого расположен специальный символ.
Удобство такого подхода заключается в том, что при редактировании документа вы можете легко изменять такие параметры параграфа, как отступы от левой и правой границы листа, отступ для первой строки, расстояние между строками и между параграфами, не заботясь о том, как при этом будут располагаться слова, из которых состоит параграф. При изменении параметров параграфа текстовый процессор будет автоматически выполнять перенос слов на другую строку и вам не придется делать это вручную.
При создании страниц WWW вы также работаете не с отдельными строками текста, а с параграфами. При этом в процессе просмотра, когда пользователь изменит размер окна навигатора, последний выполнит автоматический перенос слов и параграф снова займет всю полезную ширину окна.
Такое пространное введение в параграфы мы сделали для тех, кто никогда не прибегал к услугам текстовых процессоров и потому не знаком с этим понятием. К этой категории можно отнести многих программистов, так как текстовые редакторы, встроенные даже в мощные средства разработки программного обеспечения, ничего не знают о параграфах, трактуя исходный текст программ просто как набор отдельных строк.
Как мы уже говорили, в языке HTML начало параграфа отмечается командой <P>. Начало следующего параграфа является концом предыдущего параграфа, последний параграф в документе завершается командой </BODY>, которая всегда ставится в конце тела документа.
Несмотря на то что в описании языка HTML упоминается специальная команда </P>, завершающая параграф, эта команда не используется навигаторами и не вставляется расширением Microsoft Internet Assistant for Microsoft Word.
Вот вам пример первого параграфа настоящего раздела, подготовленного для вставки в документ HTML :
<P> Простейшие текстовые редакторы, такие как Notepad, Norton Editor или Лексикон для DOS, предполагают, что текст состоит из отдельных строк, каждая из которых завершается специальным символом - символом конца строки.
Бывают случаи, когда вам необходимо сделать переход к другой строке, оставаясь при этом в рамках текущего параграфа. Такая возможность имеется во всех текстовых процессорах.
При подготовке документа HTML вы можете сделать принудительный переход к другой строке с помощью команды <BR>, например:
<P> Простейшие текстовые редакторы, такие как:<BR> Notepad, <BR> Norton Editor,<BR> Лексикон для DOS, <BR> предполагают, что текст состоит из отдельных строк, каждая из которых завершается специальным символом - символом конца строки.
При отображении этот текст будет выглядеть следующим образом:
Простейшие текстовые редакторы, такие как: Notepad, Norton Editor, Лексикон для DOS, предполагают, что текст состоит из отдельных строк, каждая из которых завершается специальным символом - символом конца строки.
В данном случае мы использовали переход к следующей строке для организации списка, однако, как мы увидим дальше, для решения этой задачи в языке HTML имеются более удобные средства.
По умолчанию текст в параграфе выравнивается по левой границе онка просмотра. Используя команды языка HTML, вы можете выполнить центрирование текста.
Центрирование текста выполняется парой команд <CENTER> и </CENTER>, которые ограничивают с двух сторон центрируемый текст:
<P> <CENTER> Простейшие текстовые редакторы, такие как Notepad, Norton Editor или Лексикон для DOS, предполагают, что… </CENTER>
При отображении указанный параграф будет отображаться так:
Простейшие текстовые редакторы, такие как Notepad, Norton Editor или Лексикон для DOS, предполагают, что…
Описанный выше способ центрирования текста используется расширением Microsoft Internet Assistant for Microsoft Word. Что же касается навигатора Netscape Navigator Gold, то он эту операцию выполняет по-другому.
Вот пример форматирования текстовой строки Text, отцентрированной средствами Netscape Navigator Gold :
<div align=center><p>Text </p></div>
Команда <DIV…> используется фирмой Netscape в сочетании с параметром align для определения способа выравнивания параграфа. В примере, приведенном выше, выполняется центрирование. Однако указав значение параметра align, равное left или right, можно выполнить выравнивание, соответственно, по левой и правой границе окна просмотра.
Если вы используете для выравнивания текста способ фирмы Netscape, то навигатор Microsoft Internet Explorer покажет параграф выровненым по левой границе. Аналогично, выравнивание по правой границе при помощи команды <div align= right> будет проигнорировано навигатором Microsoft.
Нравится вам такая ситуация или нет, но у Microsoft и Netscape разные подходы к способу выравнивания текста (и это не единственный предмет для разногласий).
Что же делать вам? Какой способ выравнивания использовать при подготовке своих страниц?
Очевидно, вам придется принимать решение самостоятельно. В качестве компромисса можно выравнивать текст только по левой границе, и на наш взгляд, это не самое плохое решение. Важно, чтобы пользователь видел вашу страницу правильно оформленной вне зависимости от того, с каким навигатором он работает.
При оформлении страниц WWW часто используется такой прием, как разделение параграфов горизонтальной линией. И хотя горизонтальную линию можно сделать из символов дефиса, намного лучше использовать для этого средства языка HTML. Если вы вставили линию при помощи команды HTML, навигатор может отобразить ее в красивом трехмерном виде с тенями, в результате чего она будет выглядеть намного привлекательнее.
Редактор Microsoft Internet Assistant for Microsoft Word просто вставляет в соответствующем месте текста команду <HR> и ограничивается этим. В результате выполнения аналогичной операции редактором навигатора Netscape Navigator Gold получается следующая последовательность команд:
<div align=center><p> <hr width="100%"></p></div>
Первая строка в этом примере задает центровку параграфа. Команда <hr…> указывает, что необходимо провести горизонтальную линию шириной 100 процентов от ширины окна, в котором отображается документ.
Помимо параметра width, для команды <hr…> можно указывать команды align и noshade. Первый параметр может иметь значения left, right или center, при этом линия будет выравнена, соответственно, по левой или правой границе окна просмотра, либо отцентрирована. Если указан параметр noshade, навигатор не будет отображать эту линию в трехмерном виде.
Несмотря на различия в применяемых командах между редакторами Microsoft Internet Assistant for Microsoft Word и Netscape Navigator Gold, навигатор Microsoft Internet Explorer обрабатывает команду <hr…> без ошибок.
Любой современный (и даже не очень современный) текстовый процессор предоставляет возможность шрифтового оформления символов. Как правило, вы можете выбрать для символов любой шрифт, установленный в системе, выбрать высоту символов, выделить символы жирным шрифтом, наклоном или подчеркиванием.
Соответствующие средства встроены и в язык HTML.
Все команды форматирования символов, определенные в языке HTML, можно разделить на команды логического форматирования и команды физического форматирования.
Команды логического форматирования определяют не конкретный способ оформления, а указывают навигатору тип информации, подлежащей выделению. Способ выделения выбирается навигатором.
Ниже мы привели список команд логического
форматирования символов с кратким описанием.
Команда |
Описание |
<CITE>, </CITE> |
Цитата |
<EM>, </EM> |
Текст, имеющий особое значение |
<STRONG>, </STRONG> |
Сильное выделение текста |
<KBD>, </KBD> |
Текст, введенный пользователем |
<CODE>, </CODE> |
Листинг программы |
<SAMP>, </SAMP> |
Последовательность литералов |
<VAR>, </VAR> |
Имя переменной |
<!--... --> |
Комментарий |
По возможности следует использовать логическое форматирование символов, так как такое форматирование позволяет пользователю самостоятельно выбирать способ оформления указанных логических составляющих текста в соответствии со своим вкусом.
Вот пример фрагмента текста, оформленного с выделением:
<P> В этой команде переменной <CODE>TimeCnt</CODE> присваивается значение, равное нулю.
Команды физического форматирования указывают
явным образом, как следует оформить символы
текста:
Команда |
Описание |
<B>, </B> |
Выделение жирным шрифтом |
<I>, </I> |
Выделение наклоном |
<TT>, </TT> |
Оформление шрифтом с фиксированной
шириной букв |
<U>, </U> |
Выделение подчеркиванием |
<STRIKE>, </STRIKE> |
Выделение перечеркиванием |
<BIG>, </BIG> |
Текст с крупным размером букв |
<SMALL>, </SMALL> |
Текст с малым размером букв |
<BLINK>, </BLINK> |
Мигающий текст |
<SUB>, </SUB> |
Подстрочный индекс |
<SUP>, </SUP> |
Надстрочный индекс |
Еще одна возможность оформления символов, удобная, например, для размещения в документе листингов программ, связана с использованием команд <PRE> и </PRE>. Эти команды называются командами включения предварительно отформатированного текста.
Под форматированием в данном случае понимается подготовка текста простым текстовым редактором с использованием шрифта с фиксированной шириной букв. В этом смысле листинги программ являются отформатированными. Вы можете добавить их в документ следующим образом:
<PRE WIDTH="60"> int main(int argc, char *argv[]) { printf("Hello, world!"); } </PRE>
Параметр WIDTH указывает максимальное количество символов в одной строке. По умолчанию значение этого параметра равно 80.
Еще одна команда, предназначенная для форматирования символов, это команда <FONT…>, с помощью которой можно задать параметры шрифта.
Команда <FONT…> с параметром SIZE определяет размер шрифта. Фирмы Microsoft и Netscape трактуют эту команду по-разному, что может привести к неприятным последствиям.
В трактовке Microsoft команда <FONT SIZE =x> определяет
абсолютный размер шрифта в пикселах следующим
образом:
Размер букв в пикселах |
Значение параметра x в
команде <FONT SIZE =x> |
9 |
1 |
10 |
2 |
12 |
3 |
14 |
4 |
18 |
5 |
24 |
6 |
36 |
7 |
По умолчанию размер шрифта равен 3, что соответствует высоте букв, равной 12 пикселам (при печати размер такого шрифта примерно равен размеру шрифта печатной машинки).
Хотя оператор <FONT SIZE =x> допускает указание относительного изменения размера шрифта (для чего перед числом x достаточно поставить знак плюс или минус), редактор Microsoft Internet Assistant for Microsoft Word пользуется только абсолютными значениями.
Редактор страниц навигатора Netscape Navigator Gold напротив, указывает относительные значения изменения высоты шрифта (относительно размера 3, принятого по умолчанию).
Другой параметр оператора <FONT…> - параметр COLOR - позволяет задать цвет символов. Формат этого параметра приведен ниже:
<FONT COLOR=#RRGGBB>
Здесь вместо RR, GG и BB следует указать шестнадцатиричные значения для, соответственно, красной, зеленой и голубой компонент цвета.
Ниже для примера мы привели фрагмент документа, оформленного с помощью редактора Microsoft Internet Assistant for Microsoft Word:
<P> <FONT SIZE=6 COLOR=#FF0000>Text</FONT>
Здесь текстовая строка Text отображается красным цветом, причем размер шрифта равен 6 и указан в виде абсолютного значения.
Аналогичное оформление, полученное с помощью редактора навигатора Netscape Navigator Gold, показано ниже:
<div align=center><p><font COLOR="#FF0000"><font SIZE=+3>Text </font></font>2</p></div>
Обратите внимание, что размер символов указан относительно текущего.
Способ указания размера символов, использованный фирмой Netscape, имеет на наш взгляд то преимущество, что пользователь может изменять текущий размер шрифта, при этом пропорции высоты символов для всех строк останутся неизменными.
Если вам нужно изменить базовое значение высоты букв, это можно сделать командой <BASEFONT…>, например:
<BASEFONT SIZE=2>
К сожалению, на момент создания этой книги команду <BASEFONT…> понимали только навигаторы фирмы Netscape.
Продолжая аналогию с оформлением обычного текста при помощи текстовых процессоров, мы расскажем вам о так называемом стилевом оформлении параграфов.
Что это такое?
Стилевым оформлением параграфа или стилем параграфа мы будем называть совокупность параметров оформления, определяющих внешний вид и расположение параграфа. Это такие параметры, как тип и размер шрифта, отступы от левого и правого края документа, тип выравнивания текста в параграфе, межстрочное расстояние и т. д.
Каждому стилю можно присвоить свое имя. В процессе оформления документа вы можете указать, что данный параграф оформлен, например, при помощи стиля Heading и потому будет иметь внешний вид заголовка.
Количество стилей, используемых для оформления даже сложных документов и книг, не очень велико. Подготовив один раз набор стилей, вы в дальнейшем сможете оформлять документы быстро и качественно.
В языке HTML определены шесть стилей для оформления заголовков различного уровня. Для того чтобы оформить параграф с использованием этих стилей, вы должны вместо команды <P> использовать команды <H1>, <H2>, …, <H6>. Перечисленные команды используются в паре с командами < /H1>, < /H2>, …, < /H6>.
Ниже мы привели текст страницы WWW, на которой демонстрируется использование всех шести стилей заголовков и обычного текста:
<HTML > <HEAD> <TITLE>Untitled</TITLE> <META NAME="GENERATOR" CONTENT="Internet Assistant for Microsoft Word 2.0z"> </HEAD> <BODY> <H1><FONT SIZE=6 COLOR=#FF0000>Heading 1</FONT></H1> <P> <FONT FACE="Times New Roman">Normal text</FONT> <H2><FONT SIZE=5 COLOR=#000080>Heading 2</FONT></H2> <H3><FONT SIZE=4 COLOR=#008000>Heading 3</FONT></H3> <H4>Heading 4</H4> <H5>Heading 5</H5> <H6>Heading 6</H6> </BODY> </HTML >
Внешний вид этой страницы при ее просмотре с помощью навигатора Microsoft Internet Explorer показан на рис. 4.2.
Рис. 4.2. Использование стилей заголовков при оформлении страниц WWW
Строго говоря, навигатор вправе сам выбирать параметры для отображения параграфов, так как в документе задано только имя стиля. Однако стиль более высокого уровня отображается более крупным шрифтом и это будет справедливо в любом случае.
Изучая исходный текст документа, обратите внимание, что тексты заголовков первого, второго и третьего уровня отображаются с использованием разных цветов. Указанные в примере цвета были установлены редактором Microsoft Internet Assistant for Microsoft Word. Если вы подготавливаете документ простым текстовым редактором, то можете либо не указывать параметр COLOR, либо задать другие цвета по своему усмотрению.
Редактор Microsoft Internet Assistant устанавливается как расширение для текстового процессора Microsoft Word for Windows, поэтому стилевое оформление вы можете задавать с использованием списка стилей, расположенным в левой части соответствующей инструмнтальной линейки текстового процессора. Это очень удобно, особенно если вы привыкли работать с приложением Microsoft Word for Windows.
На рис. 4.3 и 4.4 мы показали соновные стили, которые можно использовать при работе в редакторе Microsoft Internet Assistant for Microsoft Word.
Рис. 4.3. Использование стилей при создании документа в среде Microsoft Internet Assistant for Microsoft Word
Рис. 4.4. Использование стилей при создании документа в среде Microsoft Internet Assistant for Microsoft Word (продолжение)
Исходный текст, соответствующий странице, которая изображена на этих рисунках, приведен ниже:
<HTML > <HEAD> <TITLE>Untitled</TITLE> <META NAME="GENERATOR" CONTENT="Internet Assistant for Microsoft Word 2.0z"> </HEAD> <BODY> <BLOCKQUOTE> Blockquote </BLOCKQUOTE> <P> Default <DL COMPACT> <DT> <FONT FACE="Times New Roman">Definition Compact </FONT> </DL> <DL> <DT> <FONT FACE="Times New Roman">Definition List</FONT> <DT> <FONT FACE="Times New Roman">Definition Term </FONT> </DL> <DIR> <LI> Directory </DIR> <PRE WIDTH=132> <FONT SIZE=2 FACE="Courier New Cyr">PRE WIDE Perforatted</FONT> </PRE> <P> <SAMP><FONT FACE="Courier New Cyr">Sample</FONT></SAMP> <P> <CODE><FONT FACE="Courier New Cyr">CODE</FONT></CODE> <P> <STRIKE> Strikethrough</STRIKE> <P> <STRONG>Strong</STRONG> <P> <TT> <FONT FACE="Courier New Cyr">Typewriter</FONT></TT> <P> <CITE>CITE</CITE> <DL> <DT> <DFN> Definition</DFN> </DL> <ADDRESS> Address </ADDRESS> <P> <VAR><FONT FACE="Times New Roman">Variable</FONT></VAR> </BODY> </HTML >
В этом тексте встречаются как уже известные вам
команды логического оформления символов, так
новые для вас команды стилевого оформления. Ниже
мы приведем краткое описание новых команд.
Команда |
Описание |
<BLOCKQUOTE>, </BLOCKQUOTE> |
Это стилевое оформление используется
для цитирования |
<DL COMPACT>, </DL> |
Этот стиль используется для
формирования списка терминов и их описания |
<DT> |
Используется вместе с командами <DL…> и <DD> для
выделения определяемого термина |
<DIR>, </DIR> |
Используется для формирования списка |
<TT>, </TT> |
Текст, оформленный с использованием
этой команды, будет отображаться на экране
шрифтом с фиксированной шириной символов |
<DFN>, </DFN> |
Этот стиль используется для оформления
впервые упоминающегося термина |
<ADDRESS>, </ADDRESS> |
Этот стиль применяется для оформления
авторской подписи под страницей, адресов и т. п. |
Редактор страниц WWW, встроенный в навигатор Netscape Navigator Gold, также позволяет легко задавать стилевое оформление параграфов, выбирая названия стилей из меню, как это показано на рис. 4.5.
Рис. 4.5. Список стилей оформления параграфов, доступных в редакторе Netscape Navigator Gold версии 2.0
Рано или поздно вам придется размещать на своей странице WWW табличные данные. Самый простой, но далеко не самый хороший способ создания таблиц известен со времен текстового редактора Лексикон - вы оформляете таблицу шрифтом с фиксированной шириной букв, а для выравнивания колонок используете символы пробела или табуляции.
Разумеется, вы можете поступить аналогичным образом и при размещении таблиц на странице WWW, однако лучше сделать это средствами языка HTML.
Воспользовавшись редактором Microsoft Internet Assistant for Microsoft Word одним легким движением мыши мы создали таблицу, состоящую из трех строк и трех столбцов, а затем с помощью клавиатуры заполнили ячейки этой таблицы, как это показано на рис. 4.6.
Рис. 4.6. Таблица, подготовленная с помощью редактора Microsoft Internet Assistant for Microsoft Word
Ниже мы привели текст полученного при этом документа:
<HTML > <HEAD> <TITLE>Untitled</TITLE> <META NAME="GENERATOR" CONTENT="Internet Assistant for Microsoft Word 2.0z"> </HEAD> <BODY> <TABLE> <TR> <TD WIDTH=197><FONT FACE="Times New Roman">000</FONT></TD> <TD WIDTH=197><FONT FACE="Times New Roman">001</FONT></TD> <TD WIDTH=197><FONT FACE="Times New Roman">002</FONT> </TD> </TR> <TR> <TD WIDTH=197><FONT FACE="Times New Roman">010</FONT></TD> <TD WIDTH=197><FONT FACE="Times New Roman">011</FONT></TD> <TD WIDTH=197><FONT FACE="Times New Roman">012</FONT> </TD> </TR> <TR> <TD WIDTH=197><FONT FACE="Times New Roman">100</FONT></TD> <TD WIDTH=197><FONT FACE="Times New Roman">101</FONT></TD> <TD WIDTH=197><FONT FACE="Times New Roman">102</FONT> </TD> </TR> </TABLE> <P> </BODY> </HTML >
Из этого текста хорошо видно, что таблица определена между командами <TABLE> и < /TABLE>. Каждая строка таблицы ограничена командами <TR> и </TR>. Столбцы таблицы ограничены командами <TD…> и </TD>, причем у команды <TD…> есть параметр - ширина столбца.
При необходимости вы можете создать таблицу с видимой рамкой, разделяющей строки и столбцы. Для этого в команде <TABLE> необходимо указать параметр BORDER, определяющий ширину рамки:
<TABLE BORDER="1">
При необходимости вы можете задать цвет рамки, указав параметр BORDERCOLOR, как это показано ниже:
<TABLE BORDER="4" BORDERCOLOR="#0000ff">
В этом примере таблица будет иметь толстую рамку синего цвета (рис. 4.5).
Рис. 4.5. Таблица с толстой рамкой
Списки встречаются в документах очень часто. Обычно списки бывают нумерованными и ненумерованными. В последнем случае каждый элемент списка выделяется каким-либо символом, обычно жирной точкой.
На рис. 4.6 показаны два списка, разделенных горизонтальной линией, первый из которых нумерованный, а второй - нет.
Рис. 4.6. Нумерованный и ненумерованный списки
Ниже мы привели текст соответствующего документа HTML :
<HTML > <HEAD> <TITLE>Untitled</TITLE> <META NAME="GENERATOR" CONTENT="Internet Assistant for Microsoft Word 2.0z"> </HEAD> <BODY> <OL> <LI> First <LI> Second <LI> Third </OL> <HR> <UL> <LI> First <LI> Second <LI> Third </UL> </BODY> </HTML >
Нумерованный список должен быть заключен между командами <OL> и </OL>, а ненумерованный - между командами <U L> и </U L>. В каждом случае строки списка должны начинаться с команды <LI>.
В языке HTML определены четыре
специальных символа, предназначенных для
служебных целей ( например, для
вставки команд или символьных объектов,
описанных ниже). Это символы <, >, & и ". Вы не
можете вставлять специальные символы в обычный
текст, вместо этого необходимо использовать
следующую замену:
Символ |
Замена |
< |
< |
> |
> |
& |
& |
" |
" |
Будьте внимательны, вставляя в документ HTML листинги программ, изобилующие только что перечисленными символами. Перед вставкой таких листингов их надо обработать, заменив специальные символы, например, в автоматическом режиме при помощи текстового редактора.
При необходимости вы можете вставить в документ HTML байт с произвольным шестнадцатиричным кодом. Для этого вы должны включить в текст последовательность символов вида &#XX, где XX - шестнадцатеричное число в диапазоне от 0 до FF.
Символы, которые не входят в таблицу ASCII, могут быть представлены в специальном виде - как символьные объекты (character entities ). К сожалению, редактор Microsoft Internet Assistant for Microsoft Word представляет символы кириллицы именно таким образом, что существенно увеличивает объем документов HTML.
Ниже мы привели список символьных объектов.
Пользуясь этим списком, вы можете, например,
составить программу, которая послужит
дополнением для редактора Microsoft Internet
Assistant for Microsoft Word и будет выполнять обратную
замену символьных объектов на символы кириллицы.
Дополнительно такая программа могла бы
перекодировать русские документы HTML в
коды KOI-8 и другие.
Имя объекта |
Символы кириллицы |
Латинские символы |
Описание соответствующего латинского
символа |
À |
А |
А |
Прописная A, тупое ударение |
Á |
Б |
Б |
Прописная A, сильное ударение |
 |
В |
В |
Прописная A, диактрическое ударение |
à |
Г |
Г |
Прописная A, тильда |
Ä |
Д |
Д |
Прописная A, умляут |
&Аring; |
Е |
Е |
Прописная A, звонкое произношение |
&Aelig; |
Ж |
Ж |
Прописная AE, дифтонг |
Ç |
З |
З |
Прописная C, седиль |
È |
И |
И |
Прописная E, тупое ударение |
É |
Й |
Й |
Прописная E, сильное ударение |
Ê |
К |
К |
Прописная E, диактрическое ударение |
Ë |
Л |
Л |
Прописная E, умляут |
Í |
Н |
Н |
Прописная I, сильное ударение |
Ì |
М |
М |
Прописная I, тупое ударение |
Î |
О |
О |
Прописная I, диактрическое ударение |
Ï |
П |
П |
Прописная I, умляут |
Ð |
Р |
Р |
Прописная Eth |
Ñ |
С |
С |
Прописная N, тильда |
Ó |
У |
У |
Прописная O, сильное ударение |
Ò |
Т |
Т |
Прописная O, тупое ударение |
Å |
У |
У |
Прописная A, звонкое произношение |
Ô |
Ф |
Ф |
Прописная O, диактрическое ударение |
Õ |
Х |
Х |
Прописная O, тильда |
Ö |
Ц |
Ц |
Прописная O, умляут |
Ø |
Ш |
Ш |
Прописная O, слэш |
Ù |
Щ |
Щ |
Прописная U, тупое ударение |
Ú |
Ъ |
Ъ |
Прописная U, сильное ударение |
Ü |
Ь |
Ь |
Прописная U, умляут |
Û |
Ы |
Ы |
Прописная U, диактрическое ударение |
Ý |
Э |
Э |
Прописная Y, сильное ударение |
Þ |
Ю |
Ю |
Прописная THORN |
ß |
Я |
Я |
Строчная немецкая буква s с резким
произношением |
à |
а |
а |
Строчная a, тупое ударение |
á |
б |
б |
Строчная a, сильное ударение |
â |
в |
в |
Строчная a, диактрическое ударение |
ã |
г |
г |
Строчная a, тильда |
ä |
д |
д |
Строчная a, умляут |
å |
е |
е |
Строчная a, звонкое произношение |
æ |
ж |
ж |
Строчная ae, дифтонг |
ç |
з |
з |
Строчная c, седиль |
è |
и |
и |
Строчная e, тупое ударение |
é |
й |
й |
Строчная e, сильное ударение |
ê |
к |
к |
Строчная e, диактрическое ударение |
ë |
л |
л |
Строчная e, умляут |
í |
н |
н |
Строчная i, сильное ударение |
ì |
м |
м |
Строчная i, тупое ударение |
î |
о |
о |
Строчная i, диактрическое ударение |
ï |
п |
п |
Строчная i, умляут |
ð |
р |
р |
Строчная eth |
ñ |
с |
с |
Строчная n, тильда |
ò |
т |
т |
Строчная o, тупое ударение |
ó |
у |
у |
Строчная o, сильное ударение |
ô |
ф |
ф |
Строчная o, диактрическое ударение |
õ |
х |
х |
Строчная o, тильда |
ö |
ц |
ц |
Строчная o, умляут |
ø |
ш |
ш |
Строчная o, слэш |
ù |
щ |
щ |
Строчная u, тупое ударение |
ú |
ъ |
ъ |
Строчная u, сильное ударение |
ü |
ь |
ь |
Строчная u, умляут |
û |
ы |
ы |
Строчная u, диактрическое ударение |
ý |
э |
э |
Строчная y, сильное ударение |
þ |
ю |
ю |
Строчная thorn |
ÿ |
я |
я |
Строчная y, умляут |
® |
® |
® |
Зарегистрированная марка TradeMark |
© |
© |
© |
Права собственности Copyright |
|
|
|
Неразбивающий пробел |
В приведенном выше списке нет букв "Ч" и "ч". Редактор Microsoft Internet Assistant for Microsoft Word заменяет первую из этих букв на строку ×, а вторую - на строку ÷.
А что делать, если вам нужно вставить в текст документа HTML одну из приведенных выше строк, соответстующих именам символьных объектов, но при этом необходимо, чтобы навигатор не выполнял замену объекта на символ (это может вам понадобиться, например, если вы решили опубликовать приведенный выше список на странице WWW)?
В этом случае вы должны добавить заменить символ & на строку &, как это показано ниже:
&eacute;
Серверы WWW получили такое широкое распространение не в последнюю очередь за счет возможности размещения на страницах WWW графических изображений.
Однако как и в любом деле, здесь нельзя перебарщивать. Когда разработчик размещает на странице графическое изображение большого размера, он должен учитывать, что удаленный абонент, подключенный к сети Internet через низкоскоростной модем, может потратить немало времени на загрузку страницы. Едва ли это ему понравится. Поэтому будет лучше, если вы разместите на странице графическое изображение небольшого размера, и сделаете ссылку, пользуясь которой пользователь при необходимости сможет просмотреть полноформатное изображение.
Однако вернемся к вставке графических изображений.
Для вставки графического изображения в документ HTML вы можете воспользоваться командой <IMG…>, как это показано в приведенном ниже примере:
<IMG SRC="pic.jpg" ALT="Sample">
Параметр SRC задает указатель на файл графического изображения, который в данном случае при размещении страницы на диске сервера WWW должен находиться в том же каталоге, где и страница.
Вы можете включать в указатель полный путь к файлу, содержащему графическое изображение, однако такой подход может затруднить перенос файла документа HTML из одного каталога в другой.
Параметр ALT задает текст, который отображается вместо графического изображения, если возможность вывода графики отсутствует или отключена, либо если файл изображения еще не успел загрузиться на локальный диск пользователя. Так как некоторые пользователи могут просматривать вашу страницу WWW в текстовом режиме (например, при помощи программы LYNX ), мы рекомендуем всегда указывать параметр ALT.
Помимо параметров SRC и ALT
вы можете использовать и другие. Например,
параметр ALIGN. Этот параметр,
который может иметь значения TOP, MIDDLE или BOTTOM,
определяет расположение текста, который
находится в том же параграфе, что и графическое
изображение:
Параметр |
Описание |
TOP |
Если параметр ALIGN имеет
значение TOP, текст параграфа выравнивается по
верхнему краю графического изображения |
MIDDLE |
Текст центрируется по высоте
изображения |
BOTTOM |
Текст параграфа выравнивается по
нижнему краю графического изображения |
Фирма Netscape разработала
собственные расширения для команды <IMG…>,
добавив новые значения для параметра ALIGN : right, texttop, absmiddle, baseline и
absbottom:
Параметр |
Описание |
right |
Если указан параметр right,
графическое изображение будет выравнено по
правой границе окна просмотра, а текст,
размещенный в том же параграфе, что и графическое
изображение, окажется слева |
texttop |
Параметр texttop аналогичен
параметру TOP, за исключением того
что выравнивание текста выполняется по наиболее
высоким буквам в верхней строке |
absmiddle |
При использовании параметра absmiddle
средняя линия текста центруется по вертикали
относительно изображения |
baseline |
Параметр baseline
предназначен для выравнивания базовой линии
текста по нижнему краю изображения |
absbottom |
С помощью параметра absbottom
выполняется выравнивание нижней линии текста по
нижнему краю изображения |
Используя специфические параметры, разработанные фирмой Netscape, вы можете улучшить внешний вид вашей страницы, причем эти расширения совместимы с навигатором Microsoft Internet Explorer.
Из-за недостатка места мы не будем подробно останавливаться на параметрах, позволяющих размещать на странице так называемую сегментированную графику. Это параметры USEMAP и ISMAP.
Сегментированное графическое изображение - это специальным образом подготовленное битовое изображение, в котором при помощи специальных программ определены "чувствительные точки". При этом описание этих точек находится в отдельном файле, размещенном на сервере WWW.
Обычно сегментированную графику используют для создания графических инструментальных линеек с кнопками, с помощью которых пользователь может переходить на те или иные страницы WWW. Однако создавая такие страницы, не забывайте о тех пользователях сети Internet, которые просматривают страницы WWW в текстовом режиме. В этом случае вы должны предусмотреть либо полностью текстовый вариант страницы, либо предоставить альтернативную возможность для доступа к страницам, ссылки на которые организованы в виде графического меню.
Файлы многоцветных графических изображений часто содержат в себе цветовую палитру - специальным образом организованную таблицу цветов. Палитра используется интерфейсом графических устройств GDI операционной системы Microsoft Windows в режиме среднего цветового разрешения, когда одновременно могут отображаться не более 256 цветов.
Для того чтобы приложение правильно показывало изображения с палитрами в режиме среднего цветового разрешения, оно должно обрабатывать определенные сообщения, которые операционная система посылает ему при активизации главного окна приложения, а также при его вытеснении на задний план.
К сожалению, далеко не все приложения способны правильно работать с палитрами. Как это ни странно, ошибается даже текстовый процессор Microsoft Word for Windows, например, версии 2.0. Наиболее распространенная ошибка заключается в том, что приложение "забывает" загрузить свою палитру, после того как его главное окно было отодвинуто на задний план, а затем вновь активизировано. Внешне эта ошибка выражается в сильном искажении цветов графического изображения.
Несмотря на то, что современные видеоадаптеры работают, как правило, в режимах высокого цветового разрешения, когда одновременно могут отображаться примерно 64 тысячи или даже свыше 16 млн. цветов, некоторые пользователи работают в режиме низкого (16 цветов) или среднего (256 цветов) цветового разрешения.
Поэтому используйте многоцветные изображения с палитрами только в том случае, когда вы не можете обойтись 16 цветами, например, при публикации в документе HTML цветной фотографии.
Более подробно о том, как операционная система Microsoft Windows работает с палитрами, вы можете узнать из 14 тома нашей серии книг "Библиотека системного программиста", который называется "Графический интерфейс GDI в Microsoft Windows".
Наиболее впечатляющая возможность технологии WWW - возможность размещения на страницах мультимедийной информации и, в частности, видеофрагментов со звуковым сопровождением или "немого кино".
Для того чтобы разместить видеофрагмент на странице WWW вы должны подготовить файл в формате Microsoft Video for Windows (файл AVI ), содержащий видеофрагмент. Вы можете создать такой файл с помощью специальных контроллеров, предназначенных для ввода видеосигналов от видеокамеры или видеомагнитофона, либо сделать его как мультфильм из отдельных изображений, нарисованных любым графическим редактором.
Технология подготовки таких видеофайлов с использованием пакета программ Microsoft Video for Windows была нами подробно описана в 15 томе "Библиотеки системного программиста", который называется "Мультимедиа для Windows".
Подготавливая видеофайл, следите за тем, чтобы его размер не был слишком большим (не более нескольких Кбайт или в крайнем случае, нескольких десятков Кбайт). Файл большого размера будет слишком долго загружаться из сети через медленный модем.
Для вставки видеофрагментов вы можете использовать описанную выше команду <IMG…> с параметрами DYNSRC, START, CONTROLS и несколько других:
<IMG DYNSRC="video.avi" START="FILEOPEN" CONTROLS>
В данном случае при загрузке страницы автоматически начинается проигрывание файла video.avi, причем окно снабжается органами управления в виде кнопки запуска/остановки проигрывания и движкового регулятора, позволяющего перемещаться в произвольное место видеофрагмента (рис. 4.7).
Рис. 4.7. Страница WWW, в которую вставлен видеофрагмент
Приведем список параметров, которые
используются для вставки видеофрагментов с
кратким описанием.
Параметр |
Описание |
DYNSRC |
Этот параметр аналогичен параметру SRC и определяет путь к файлу,
содержащему видеофрагмент |
START |
Параметр определяет момент, когда нужно
начинать проигрывание видеофрагмента. Если этот
параметр имеет значение FILEOPEN, проигрывание
начинается сразу, как только файл будет загружен.
Если же значение параметра равно MOUSEMOVE,
проигрывание начнется после того, как
пользователь поместит курсор на окно,
предназначенное для проигрывания
видеофрагмента |
CONTROLS |
Если указан этот параметр, под окном с
видеофрагментом отображаются органы управления,
позволяющие управлять процессом проигрывания |
LOOP |
Параметр LOOP определяет,
сколько раз будет проигрываться видеофрагмент.
Если значение этого параметра равно -1 или INFINITE, проигрывание будет выполняться
бесконечно (т. е. пока вы не перейдете к просмотру
другой страницы или не завершите работу
навигатора) |
LOOPDELAY |
С помощью параметра LOOPDELAY
можно задать задержку в миллисекундах перед
началом очередной операции проигрывания
видеофрагмента |
Очень часто при оформлении фона страниц WWW используют небольшое графическое изображение, которое будет заполнять собой фон страницы.
Для того чтобы указать путь к файлу, содержащему фон страницы, вы должны добавить к команде <BODY> параметр BACKGROUND, как это показано ниже:
<BODY BACKGROUND="Bkg.jpg"> <P> <IMG DYNSRC="video.avi" START="FILEOPEN" CONTROLS> ... Другие строки документа HTML ... </BODY>
Для команды <BODY> вы можете
указать и другие параметры, некоторые из них
приведены ниже:
Параметр |
Описание |
BGCOLOR |
С помощью этого параметра вы можете
задать цвет фона страницы в следующем виде:
<BODY BGCOLOR="#RRGGBB"> где RR, GG и BB определяют, соответственно, красную, зеленую и
голубую компоненту цвета. Все значения необходимо указывать
в шестнадцатеричном формате
|
TEXT |
Параметр TEXT используется
для управления цветом текста в документе.
Значение этого параметра уазывается таким же
образом, как и значение параметра BGCOLOR |
LINK |
Управление цветом текста
гипертекстовых ссылок |
VLINK |
Управление цветом текста
гипертекстовых ссылок, соответствующих ранее
просмотренным страницам |
ALINK |
Управление цветом текста активных
гипертекстовых ссылок |
BGPROPERTIES |
При свертке содержимого окна просмотра
документа HTML графическое
изображение, использованное для оформления фона,
будет оставаться на месте, если установить
значение этого параметра следующим образом:
BGPROPERTIES=FIXED Этот параметр распознается только навигатором Microsoft Internet Explorer |
Гипертекстовые ссылки обеспечивают возможность перехода от просмотра одной страницы WWW к просмотру другой страницы или другого места той же самой страницы. С помощью гипертекстовых ссылок можно выполнять и другие функции, например, отправить электронное письмо по адресу, указанному в виде ссылки.
Ссылка создается с помощью пары команд <A…> и < /A>. Между этими командами располагается текст ссылки, который отображается в окне просмотра навигатора и выделяется подчеркиванием, а также изменением цвета. Сделав щелчок мышью по такому тексту, пользователь перемещается в место, указанное в параметре HREF команды <A…>.
Ниже показан пример гипертекстовой ссылки на файл Seminar.HTM, расположенной на локальном диске C: в каталоге My Documents:
<A HREF="file:///C:/My Documents/Seminar.HTM" >Seminar</A>
Внешне эта ссылка выглядит для пользователя как строка Seminar, выделенная цветом и подчеркиванием.
При необходимости вы можете использовать для ссылки графическое изображение, вставленное между командами <A…> и < /A> с помощью команды <IMG…>.
В качестве значения параметра HREF вы можете указать адрес URL страницы, включая имя сервера WWW, например:
<A HREF="http://www.somehost.com/html/Seminar.HTM">Seminar</A>
Этот способ определения ссылок очень распространен.
Выше были приведены примеры абсолютной адресации документов в ссылках с полным указанием диска, каталога или полного имени сервера WWW. Абсолютная адресация лучше всего подходит для ссылки на документы, расположенные на других серверах WWW, когда, разумеется, вы знаете их точный адрес.
Если же вы подготовили несколько страниц и желаете разместить их в одном каталоге сервера WWW, да еще так, чтобы этот каталог можно было перемещать в дереве каталогов сервера, лучше пользоваться относительной ссылкой. В этом случае имя сервера и каталога указывать не нужно.
Если документ HTML имеет большой размер, вы можете вставить в него несколько закладок и организовать ссылки на эти закладки при помощи оператора <A…>.
Для того чтобы вставить в документ закладку, вы должны воспользоваться парой команд <A…> и </A>, указав в команде <A…> параметр NAME - имя закладки:
<A NAME="End_of_page">End</A>
Ссылка на эту закладку будет выглядеть следующим образом:
<A HREF="#End_of_page" >End of page</A>
Редакторы Microsoft Internet Assistant for Microsoft Word и редактор навигатора Netscape Navigator Gold имеют удобные средства для работы с закладками и гипертекстовыми ссылками.
Документы HTML могут содержать
ссылки на такие ресурсы сети Internet, как
электронные почтовые адреса, серверы FTP,
электронные конференции и т. п. Ниже мы привели
примеры указания значений параметра HREF
команды <A…> для некоторых
ресурсов:
Пример |
Описание |
HREF="http://..." |
Ссылка на документ HTML, расположенный
на сервере WWW |
HREF="ftp://..." |
Ссылка на сервер FTP |
HREF="mailto:..." |
Ссылка на электронный почтовый адрес.
Когда пользователь выбирает такую ссылку, на
экране появляется окно почтовой программы,
встроенной в навигатор. С помощью этого окна
пользователь может послать электронной письмо
по адресу, указанному в ссылке |
HREF="news:..." |
Ссылка на электронную конференцию |
HREF="nntp://..." |
Ссылка на сервер электронной
конференции |
HREF="telnet://..." |
Активизация сеанса удаленного доступа к
узлу сети Internet с использованием
протокола TELNET |
HREF="gopher://..." |
Ссылка на сервер Gopher |
Язык HTML непрерывно развивается, поэтому к настоящему моменту нет никакого стандартного описания для этого языка. Как вы могли заметить, фирмы Microsoft и Netscape, доминирующие на рынках приложений для Internet, вводят свои собственные расширения языка, которые могут использоваться навигаторами конкурента, а могут и не использоваться.
В настоящий момент фирма Netscape активно внедряет одну из реализаций языка JAVA, который позволяет организовать интерпертацию программ, полученных из сети, на локальном компьютере пользователя. Рассмотрение этого языка выходит за рамки нашей книги, однако отметим, что с помощью специальных команд вы можете включать такие программы в документ HTML.
Подход Microsoft заключается в использовании технологии OLE, позволяющей запускать приложения OLE, полученные из сети. Для вставки объектов OLE в документы HTML фирма Microsoft используются собственные средства.
Все шире в сети Internet распространяется наиболее современная технология виртуальной реальности. Используя специальный язык виртуальной реальности VRML и специальные инструментальные средства, вы можете создавать, например, виртуальные здания, состоящие из многих этажей и комнат. Файл VRML можно включить в текст документа HTML, после чего пользователи получат возможность ходить по вашему виртуальному зданию, как в популярной игре DOOM, созданной фирмой Id Software.
Одтметим однако, что для просмотра файлов виртуальной реальности вы должны установить к своему навигатору специальные расширения. Эти расширения можно получить на серверах Microsoft (для навигатора Microsoft Internet Explorer ) и Netscape (для навигатора Netscape Navigator).
Еще одна возможность, не описанная в нашей книге из-за отсутствия места, заключается в том, что вы можете размещать на страницах WWW средствами языка HTML так называемые формы. Формы похожи на диалоговые панели Windows и могут включать в себя кнопки, поля ввода, списки и т. д. В зависимости от того, как пользователь заполнит такую форму или в зависимости от установки переключателей может осуществляться переход к различным страницам сервера WWW или выполяться другие действия.
Формы очень удобны, например, для организации электронной торговли, когда покупатель может выбрать на странице WWW нужный ему товар, и, указав номер своей кредитной карточки, купить его, не вставая с места.
Как мы уже говорили, фирма Microsoft выпустила для своего текстового процессора Microsoft Word for Windows расширение Microsoft Internet Assistant, с помощью которого вы можете легко создавать собственные страницы WWW.
Это расширеное особенно удобно для тех, кто уже умеет работать в среде указанного текстового процессора. Если же приложение Microsoft Word for Windows вам незнакомо, вы можете быстро научиться с ним работать, воспользовавшись первым томом нашей серии книг "Персональный компьютер. Шаг за шагом", который называется "Введение в MS-DOS, MS Windows, MS Word for Windows". Потратив неделю-другую на изучение текстового процессора Microsoft Word for Windows, вы сэкономите гораздо больше времени при подготовке документов в режиме WYSIWYG, когда на экране отображается то, что получится при распечатке на принтере.
Редактор страниц Microsoft Internet Assistant представляет собой набор макрокоманд и стиль, на базе которого создаются документы HTML, причем создаются в режиме WYSIWYG.
Вы можете получить этот редактор бесплатно с сервера www.microsoft.com в виде файла с именем wrdia20z.exe. Для установки вы должны просто запустить указанный файл и следовать инструкциям, появляющимся на экране. Разумеется, перед установкой редактора Microsoft Internet Assistant необходимо установить текстовый процессор Microsoft Word for Windows. Мы рекомендуем использовать версию 7.0 этого процессора, специально разработанную для операционных систем Microsoft Windows 95 и Microsoft Windows NT.
Создавая новый документ HTML, сделайте щелчок правой кнопкой мыши по поверхности рабочего стола или внутри папки и выберите из контекстного меню строку New. Затем из появившегося меню второго уровня выберите строку Internet Document (HTML). Затем укажите имя для нового документа.
Для редактирования документа сделайте щелчок правой клавишей мыши по созданной пиктограмме и выберите из контекстного меню строку edit. Запустится текстовый процессор Microsoft Word for Windows, однако его инструментальные линейки будут иметь несколько непривычный вид (рис. 4.8).
Рис. 4.8. Редактирование документа при помощи расширения Microsoft Internet Assistant for Microsoft Word
Изменится и меню текстового процессора.
Приведем описание кнопок, которые появятся в
инструментальных линейках при редактировании
докумета HTML.
Кнопка |
Описание |
|
Кнопка предназначена для включения или
выключения режима отображения информации HTML в полях текстового процессора Word for Windows |
|
Просмотр документа HTML с
использованием текущего навигатора WWW
|
|
Переключение редактора в режим
просмотра страниц WWW (в этом режиме
можно просматривать как создаваемую страницу,
так и любую другую, доступную через Internet)
|
|
Возврат к просмотру предыдущей страницы
из числа просмотренных ранее |
|
Переход к просмотру следующей страницы
из числа просмотренный ранее |
|
Выбор стиля оформления для текущего
параграфа |
|
Увеличение размера шрифта |
|
Уменьшение размера шрифта |
|
Выделение жирным шрифтом |
|
Выделение наклоном |
|
Выделение подчеркиванием |
|
Выравнивание параграфа по левой границе
окна просмотра |
|
Центрирование параграфа в окне
просмотра |
|
Создание нумерованного списка |
|
Создание ненумерованного списка |
|
Уменьшение отступа |
|
Увеличение отступа |
|
Вставка горизонтальной разделительной
линии |
|
Вставка графического изображения или
видеофрагмента |
|
Вставка закладки |
|
Вставка гипертекстовой ссылки |
|
Ввод заголовка документа |
Если нажать кнопку переключения редактора в режим просмотра страниц WWW, расположенную слева во второй сверху инструментальной линейке, вы сможете посмотреть, как будет выглядеть ваша страница при просмотре. Кроме того, вы сможете загрузить из сети Internet любую другую страницу и, например, скопировать из нее гипертекстовую ссылку, для того чтобы затем вставить ее в свой документ.
На рис. 4.9 показан внешний вид окна текстового процессора с расширением Microsoft Internet Assistant for Microsoft Word в режиме просмотра страниц WWW.
Рис. 4.9. Главное окно текстового процессора Microsoft Word в режиме просмотра страниц WWW
Ниже мы привели назначение новых кнопок,
которые появляются в инструментальных линейках
текстового процессора при его переключении в
режим просмотра страниц WWW.
Кнопка |
Описание |
|
Переключение в режим редактирования
документа HTML |
|
Переход к странице, заданной своим
адресом URL |
|
Просмотр списка посещенных страниц с
возможностью копирования гипертекстовых ссылок
на них |
|
Просмотр списка наиболее интересных
страниц |
|
Добавление текущей страницы в список
наиболее интересных страниц |
|
Переход к просмотру домашней страницы |
|
Останов передачи данных |
|
Повторная загрузка страницы |
|
Копирование гипертекстовой ссылки |
|
Поиск текстовой строки в документе |
Как видите, этот набор кнопок напоминает аналогичных набор в таких навигаторах, как Microsoft Internet Assistant и Netscape Navigator Gold.
Для назначения стиля параграфам документа проще всего нажать соответствующую кнопку на инструментальной панели текстового процессора.
Если вам необходимо переопределить параметры стиля, можно воспользоваться обычной методикой, принятой в текстовом процессоре Microsoft Word for Windows. А именно, выберите из меню Format строку Style и при помощи появившейся на экране диалоговой панели укажите новые параметры стиля, сохранив их, если это нужно, в файле шаблона.
Чтобы ввести или отредактировать заголовок создаваемого документа HTML, вы можете нажать соответствующую кнопку на инструментальной панели или выбрать из меню File строку HTML Document Info. В поле Title появившейся диалоговой панлеи введите новый заголовок документа.
Для оформления фона документа выберите из меню Format строку Background and Links. После этого на экране появится одноименная диалоговая панель, показанная на рис. 4.10.
Рис. 4.10. Диалоговая панель Background and Links
В поле Image вы должны ввести путь к файлу изображения, которое будет использовано для оформления фона страницы. Этот файл можно найти на диске с помощью диалоговой панели, которая появится на экране, если нажать кнопку Browse.
Если нужно сделать так, чтобы фоновое изображение оставалось на месте в процессе просмотра страницы, включите переключатель Do not scroll image.
С помощью списка Color вы можете выбрать цвет для фона страницы (только в том случае, если вы не используете для оформления фона графическое изображение).
В списке Body Text вы можете выбрать цвет текста. Для выбора цвета гипертекстовый связей, указывающих на еще не посещенные и уже посещенные страницы, воспользуйтесь, соответственно, списками Hyperlink to pages not yet viewed и Hyperlink to pages already viewed.
Если выбрать из меню Format строку Background Sound, в появившейся на экране одноименной диалоговой панели (рис. 4.11) можно указать звуковой файл, который будет проигрываться после загрузки стрницы.
Рис. 4.11. Диалоговая панель Background Sound
В поле Sound вы должны указать путь к файлу в формате WAV или MIDI. Последний формат удобен тем, что файлы в этом формате обычно занимают немного места, а значит будут быстро загружены из сети.
В поле Playback loop вы можете указать количество раз, которое будет проигрваться файл (до 999).
Обратите также внимание на предупреждение в ниженй части диалоговой панели о том, что для успешного воспроизведения фонового звукового сопровождения навигатор должен уметь распознавать и обрабатывать команду <BGSOUND...>. Такой возможностью обладает навигатор Microsoft Internet Explorer.
Нажав кнопку вставки графического изображения или видеофрагмента, вы увидите на экране блокнот Picture, показанный на рис. 4.12.
Рис. 4.12. Страница Picture блокнота Picture
В поле Image Source вы должны ввести имя файла с графическим изображением. Файл можно найти на диске, нажав кнопку Browse.
Если нажать кнопку Link Path, то в появившейся на экране диалоговой панели можно включить переключатель, указывающий на необходимость использования фиксированного пути к файлу изображения. По умолчанию используется относительный путь, что удобно для перемещения файлов страницы в другой каталог (если возникнет необходимость такого перемещения).
В поле Alternative Text необходимо указать текст, который будет отображаться вместо графического изображения, если режим просмотра графики отключен или недоступен.
Если вы собираетесь вставить в документ видеофрагмент, откройте страницу Video ( рис. 4.13).
Рис. 4.13. Страница Video блокнота Picture
Здесь в поле Video Source вы должны указать имя файла AVI, содержащего видеофрагмент. Как мы уже говорили, процедура создания таких файлов была нами описана в 15 томе "Библиотеки системного программиста", который называется "Мультимедиа для Windows".
В списке Start Play вы можете выбрать один из двух возможных режимов проигрывания видеофрагмента. Если выбран режим File Open (выбран по умолчанию), проигрывание начинается сразу после загрузки файла. Если же выбран режим MouseOver, проигрывание начинается, когда пользователь переместит курсор мыши в область окна, предназначенного для проигрывания видеоизображения.
С помощью органа управления Loop вы можете указать количество раз, которое должно проигрываться изображение, или выбрать режим бесконечного проигрывания.
Если включить переключатель Show Controls, под окном с видеоизображением появятся органы управления, позволяющие управлять процессом проигрывания.
Страница Options блокнота Picture (рис. 4.14) позволяет определить размер окна, в котором будет показано изображение или видеофрагмент, а также выбрать выравнивание текста, расположенного в том же параграфе, что и окно с изображением.
Рис. 4.14. Страница Options блокнота Picture
В полях Height и Width вы можете указать, соответственно, высоту и ширину окна для изображения или видеофрагмента.
Если включить переключатель Display Border, вокруг окна появится рамка. Толщину этой рамки можно задать в поле Border Size.
В списке Alignment with Text можно задать один из нескольких способов выравнивания текста, перечисленных ранее при описании языка HTML.
Что же касается переключателя Image is a sensitive map, то его нужно включить в том случае, если вы размещаете в документе HTML сегментированную графику. Для сегментированного изображения необходимо подготовить файл описания, рассказ о котором выходит за рамки нашей книги.
Если документ HTML содержит много строк, вы можете вставить в нее несколько закладок для того чтобы пользователь мог перемещаться внутри страницы с помощью гипертекстовых ссылок.
Если нажать на кнопку вставки закладки, на экране появится диалоговая панель Bookmark, изображенная на рис. 4.15.
Рис. 4.15. Диалоговая панель Bookmark
В поле Bookmark Name вы должны ввести имя закладки, после чего следует нажать кнопку Add.
При необходимости в этой же диалоговой панели вы можете просмотреть список закладок, удалить ненужные (с помощью кнопки Delete) или перейти к просмотру фрагмента страницы, отмеченного закладкой (с помощью кнопки Go To ).
Вставка гипертекстовой ссылки выполняется очень просто - достаточно установить курсор в нужное место текста и нажать кнопку вставки ссылки. После этого на экране появится диалоговая панель Hyperlink, показанная на рис. 4.16.
Рис. 4.16. Диалоговая панель Hyperlink
В поле Text to Display вы должны написать текст, который увидит пользователь на месте гипертекстовой ссылки. По этому тексту он будет делать щелчок левой клавишей мыши, чтобы сделать гипертекстовый переход.
В поле File or URL вы должны определить имя файла или адрес URL, по которому будет выполняться переход с помощью данной гипертекстовой ссылки. Кнопка Browse поможет вам в этом.
Если нужно создать ссылку на закладку, определенную на этой же странице, вы должны выбрать имя закладки из списка Bookmark Location in File.
Кнопка Unlink предназначена для удаления ссылки. После удаления в документе остается текст, введенный ранее в поле Text to Display, однако теперь этот текст уже не будет связан со ссылкой.
Если вы попробуете подготовить документ HTML с символами кириллицы с помощью текущей на момент написания этой книги версии редактора Microsoft Internet Assistant, то в выходном документе все символы кириллицы будут заменены на символьные объекты, которые мы описали раньше.
В результате параграф русского текста будет выглядеть следующим образом:
<P> Ïðèìåð ðóññêîãî òåêñòà
Хотя внешне при просмотре страница будет выглядеть нормально, такое представление текста сильно увеличивает размер страницы и, как следствие, время ее загрузки. К сожалению, средство редактирования, встроенное в навигатор Netscape Navigator Gold версии 2.0 также не способно работать с символами кириллицы. Этот навигатор завершается аварийно с ообщением об ошибке при попытке сохранить созданный документ в файл.
В заключение этой главы мы совсем коротко расскажем о редакторе документов HTML, встроенном в навигатор Netscape Navigator Gold.
Главное окно этого редактора показано на рис. 4.17.
Рис. 4.17. Главное окно редактора документов HTML, встроенного в навигатор Netscape Navigator Gold
Бросив беглый взгляд на инструментальную линейку этого редактора, нетрудно заметить сходство изображенных на нем кнопок с аналогичными по назначению кнопками редактора Microsoft Internet Assistant for Microsoft Word, описанного в предыдущем разделе. Поэтому для экономии места мы не будем приводить подробное описание инструментальных линеек - вы сумеете разобраться с ними самостоятельно.
Обратите внимание, что размер текста указан в относительных единицах, а не в абсолютных, как это было в окне редактора Microsoft Internet Assistant.
Для того чтобы определить параметры документа, такие как заголовок, оформление страницы, цвет фона и цвет текста, вы должны выбрать из меню Properties строку Document. После этого на экране появится блокнот, на страницы которого вы должны занести всю необходимую информацию.
Когда вы нажимаете кнопку вставки графического изобарежния, на экране появляется диалоговая панель, показанная на рис. 4.18.
Рис. 4.18. Диалоговая панель Insert Image
В поле Image File Name вы должны указать путь к файлу, содержащему изображение. Для поиска файла можно воспользоваться кнопкой Browse.
В поле Image вы можете указать путь к файлу альтернативного изображения. Поле Text позволяет вам указать текст, котороый будет на месте рисунка, если графика недоступна.
Список Alignment позволяет указать выравнование текста относительно графики, причем в окне Preview сразу отображается полученный результат.
Редактор Netscape Navigator Gold содержит также средства для работы с языком JAVA ( консоль JAVA ), однако в нашей книге мы не будем рассматривать этот язык.