Глобальные сети компьютеров. Практическое введение в Internet, E-Mail, FTP, WWW и HTML, программирование для Windows Sockets© Александр Фролов, Григорий ФроловТом 23, М.: Диалог-МИФИ, 1993, 283 стр.
4.1. Язык HTMLХотя для вас это может оказаться неожиданностью, но страницы 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 > должна быть первой в документе. Она всегда используется в паре с командой </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 , можно разделить на команды логического форматирования и команды физического форматирования. Команды логического форматирования определяют не конкретный способ оформления, а указывают навигатору тип информации, подлежащей выделению. Способ выделения выбирается навигатором. Ниже мы привели список команд логического
форматирования символов с кратким описанием.
По возможности следует использовать логическое форматирование символов, так как такое форматирование позволяет пользователю самостоятельно выбирать способ оформления указанных логических составляющих текста в соответствии со своим вкусом. Вот пример фрагмента текста, оформленного с выделением: <P> В этой команде переменной <CODE>TimeCnt</CODE> присваивается значение, равное нулю. Команды физического форматирования указывают
явным образом, как следует оформить символы
текста:
Еще одна возможность оформления символов, удобная, например, для размещения в документе листингов программ, связана с использованием команд <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> определяет
абсолютный размер шрифта в пикселах следующим
образом:
По умолчанию размер шрифта равен 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 > В этом тексте встречаются как уже известные вам
команды логического оформления символов, так
новые для вас команды стилевого оформления. Ниже
мы приведем краткое описание новых команд.
Редактор страниц 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. Таблица с толстой рамкой Списки в документе HTMLСписки встречаются в документах очень часто. Обычно списки бывают нумерованными и ненумерованными. В последнем случае каждый элемент списка выделяется каким-либо символом, обычно жирной точкой. На рис. 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> , а ненумерованный - между командами <UL> и </UL> . В каждом случае строки списка должны начинаться с команды <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 и другие.
В приведенном выше списке нет букв "Ч" и "ч". Редактор 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,
определяет расположение текста, который
находится в том же параграфе, что и графическое
изображение:
Фирма Netscape разработала
собственные расширения для команды <IMG…>,
добавив новые значения для параметра ALIGN: right, texttop, absmiddle, baseline и
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, в которую вставлен видеофрагмент Приведем список параметров, которые
используются для вставки видеофрагментов с
кратким описанием.
Оформление фона страницыОчень часто при оформлении фона страниц WWW используют небольшое графическое изображение, которое будет заполнять собой фон страницы. Для того чтобы указать путь к файлу, содержащему фон страницы, вы должны добавить к команде <BODY> параметр BACKGROUND, как это показано ниже: <BODY BACKGROUND="Bkg.jpg"> <P> <IMG DYNSRC="video.avi" START=" FILEOPEN" CONTROLS> . . . Другие строки документа HTML . . . </BODY> Для команды <BODY> вы можете
указать и другие параметры, некоторые из них
приведены ниже:
Вставка гипертекстовых ссылокГипертекстовые ссылки обеспечивают возможность перехода от просмотра одной страницы 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 имеют удобные средства для работы с закладками и гипертекстовыми ссылками. Ссылки на различные ресурсы сети InternetДокументы HTML могут содержать
ссылки на такие ресурсы сети Internet, как
электронные почтовые адреса, серверы FTP,
электронные конференции и т. п. Ниже мы привели
примеры указания значений параметра HREF
команды <A…> для некоторых
ресурсов:
Другие возможности языка HTMLЯзык 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 нужный ему товар, и, указав номер своей кредитной карточки, купить его, не вставая с места.
|
Библиотека
Братьев
Фроловых
Братьев
Фроловых
![[Назад]](../../prev.gif){kind=small}
![[Содеожание]](../../sod.gif){kind=small}
![[Дальше]](../../next.gif){kind=small}
