Человек идет к знаниям так же, как идет на войну:

полностью проснувшись, со страхом, уважением и

абсолютной уверенностью.

Карлос Кастанеда

Персональная домашняя страница (Personal Home Page) позволяет пользователям WWW-браузеров во всем мире просматривать представленную вами информацию. Вы можете поместить здесь вашу фотографию, сведения о ваших интересах, любую другую информацию, которую хотите сделать доступной для всех желающих.

Для обеспечения всемирного доступа к вашей страничке вы должны найти Интернет-провайдера вашего региона, ознакомиться с условиями регистрации и хранения информации на его Web-сервере и изготовить HTML-страницу. Не думайте, что это очень дорого. Регистрация Home Page стоит в нашей стране примерно 10 долларов, и около 2 долларов за 1 Мбайт в месяц придется заплатить за хранение информации на Web-сервере.

Найдите простой и понятный вам HTML-редактор, изучите основы построения HTML-файлов (для начала можете воспользоваться готовыми шаблонами страниц, которые созданы на все случаи жизни, – вам нужно только воспользоваться подсказками и написать текст). Когда все разделы будут заполнены, загрузите полученный файл в HTML-браузер для контроля (например, в Netscape), а потом несите вашему провайдеру на Web-сервер.

Учимся на ошибках

Нет лучшего способа обучиться чему-нибудь, чем погрузиться в это дело, пусть даже вслепую, и сделать все ошибки, которые вы никогда бы не совершили, если были бы слишком осторожны и не рисковали, пока досконально не изучите предмет. "Сырая" и динамичная технология Интернет не позволяет поступить иначе. Поэтому, прежде чем вы приступите к построению собственной WWW-странички, я предлагаю пройти вместе со мной первые шаги создания www.sgg.ru версии 1.0 (рис. 1)  – со всеми ошибками и трудностями, встретившимися в пути.

С чего обычно начинают? Страница имеет многочисленные кнопки, металлизированные Kai's Power Tools, впечатляющие Photoshop-эффекты и... огромные размеры. Человек, обратившийся ктакой странице, или заснет, прежде чем она загрузится, или, поругиваясь, перейдет в текстовый режим. В любом случае красот вашего стиля никто не увидит. А вы будете продолжать "раскрашивать" и совершенствовать свое произведение и трястись над ним, как пушкинский Барон в "Скупом рыцаре": "...Сидеть на сундуке и от живых сокровища мои хранить...". Web-publishing -это искусство возможного, и Министерство связи имеет большее влияние на развитие Интернет-технологий, чем Netscape и Microsoft вместе взятые.

 Когда мы начали создавать свою страничку, наша логика была простой: мы – фирма компьютерной графики, поэтому наша страница должна иметь богатое графическое содержание. И это правильно, но вот что пришлось учесть:

1) Форма побеждает функцию. Для контроля необходимо обращаться время от времени к собственной странице – например, с другого конца города (поверьте, это будет медленнее, чем из Америки).

2) Большие текстовые файлы, помимо длительной загрузки, приводят и к другому неприятному результату: затруднены быстрая модификация и оперативное обновление информации. Хочется сделать слишком много и слишком быстро, а в результате в гипертекстовом потоке время от времени образуются дырки.

3) Если вы знакомы с различными WWW-страницами, то, вероятно, неоднократно встречали надписи типа: "для достижения лучшего результата используйте соответствующий браузер". Это связано с тем, что разработчики Web-страниц стремятся использовать улучшенные возможности для отображения, реализованные только в определенном браузере. Появились новые функциональные возможности оформления, такие как таблицы и фреймы, их опции позволяют проектировать интересные страницы. Но пользователи старых программ просмотра, не имеющих этих возможностей, не смогут увидеть ваших красот, страницы будут выглядеть нечитабельными или будут пустыми. Если цель вашей Web-страницы – широкий доступ для многих людей, ограничьте, насколько это возможно, использование специфических особенностей браузеров. Это расширит вашу аудиторию. Существует несколько способов добиться универсальности просмотра и при использовании новых возможностей, об этом ниже, в секретах проектирования универсальной HTML-страницы.

4) О картинках. Web-браузеры допускают использование многих известных графических форматов: GIF, TIFF, JPEG, XBM. Однако я рекомендую вам пользоваться прогрессивным (интерлейсным) GIF-форматом для оформления, а для передачи полноцветных графических изображений по требованию – JPEG-картинками. Дело в том, что обычно Web-браузеры устанавливают на дешевых сетевых компьютерах, работающих в палитре на 256 цветов (8 бит на цвет). Хотя программа просмотра производит автоматический перевод цветов из любого формата, и любая картинка будет выглядеть достаточно хорошо, но 256-цветный GIF-файл будет переведен быстрее, лучше выглядит и имеет меньший размер при таком же разрешении. Для GIF-картинки можно определить "прозрачный" цвет и отображать с "неправильными" контурами (для изготовления используйте, например, plug-in для Photoshop – GIF89Exp, рис.2). Формат JPEG дает минимальный размер файла при лучшем качестве полноцветной картинки, а прогрессивные (интерлейсные) возможности отображения обеспечивают постепенное появление изображения по мере загрузки, что позволяет сразу приступить к чтению уже появившегося текста.

Параметры отображаемых картинок лучше определять сразу с указанием их размера (хотя это и не обязательно). Например:

<IMG SRC=ⁿlmage_name.gif Аlt="Здесь должна быть картинка" HEIGHT=100 WIDTH=100>. В этом случае некоторые браузеры сразу отводят под нее место и продолжают загружать текст.

5) И, наконец, о браузерах и редакторах. При всем богатстве выбора... самого лучшего HTML-редактора пока, к сожалению, не существует. Поэтому я остановился на Netscape Gold, как WYSIWYG-редакторе, постоянно вызываю из него текстовый Web-редактор Cmed (с макроопределениями для различных тэгов) и Adobe Photoshop для редактирования картинок. Лучший способ выяснить, как будет работать специфическая особенность отображения, состоит в том, чтобы опробовать ее в различных программах просмотра (которые ее поддерживают или не поддерживают) и посмотреть, что получится. Может быть, для старого браузера вам понадобится внести некоторые исправления, чтобы получить те же самые возможности, что и в новых, или хотя бы сохранить удобочитаемость и приемлемый вид.

Теперь, вооружившись только Интернет-доступом, можно приступать к проектированию собственной Web-страницы.

Практически на всех компьютерных платформах существуют WWW-браузеры, которыми можно воспользоваться при обращении к вашей персональной домашней странице. Я буду ссылаться здесь только на Netscape Navigator – это одна из самых распространенных программ для просмотра Web-страниц, она реализована для X-Windows, Windows 3.1/95/NT и для Macintosh.

Как добраться до вашей Home Page?

1) После размещения вашей персональной домашней страницы на Web-сервере посетителя может вывести на нее программа поиска информации, которую он использует.

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

3) Существуют справочники по Интернет-ресурсам, где можно поместить информацию и о своей странице. Например – "Желтые страницы Internet (русские ресурсы)" А.Сигалова, выпущенный издательством "Питер".

4) И, наконец, прямой доступ по URL. Если вы знаете username человека, персональную домашнюю страницу которого вы желаете просмотреть, и имя Web-сервера, на котором она находится, вы можете обратиться непосредственно на этот сервер. Для этого надо сообщить браузеру полный адрес (URL) в следующем формате: http://hostname/~user/, где "hostname" – имя WWW-сервера (например, hostname нашей станции – www.sgg.ru), a "user" – имя входа на страницу нужного вам человека. Например, чтобы обратиться к моей персональной странице, вы задаете URL http://www.sgg.ru/-oleg/ – и это автоматически вызовет файл моей персональной страницы index.htmi. При использовании Netscape вы должны определить URL в окне Location.

Персональный каталог

Будем считать, что ваш каталог для доступа из WWW называется "publicjitml" и размещается в вашем домашнем каталоге (home directory) на WWW-сервере, который вам определит провайдер. (Для примера: наш WWW-сервер – станция SGI Challenge (www.sgg.ru), а мой домашний каталог – "oleg".)

Каталог public_html должен иметь открытые права доступа, иначе пользователи WWW-браузеров не смогут обратиться к вашей информации. Если WWW-сервер – UNIX-машина, используйте следующие команды для создания Web-каталога:

% mkdir -/public_html

% chmod a+rx -/public html

Пользователям WWW-браузеров будут доступны только те файлы в вашем каталоге public_html, которые имеют разрешение на чтение. Нужно также удостовериться, что ваш исходный каталог (home directory) имеет открытый доступ на чтение. UNIX-команды те же:

% chmod a+rx -

Предупреждение: Ваш домашний каталог будет теперь открыт на чтение извне. Если вы не хотите показывать все его содержимое, отключите read/ write/execute возможности для всех файлов и каталогов в вашем исходном каталоге, за исключением public_html. Чтобы сделать это, можно использовать следующие команды UNIX:

% chmod go-rwx -/ *

% chmod a+rx -/publicjitml

Установка страницы

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

Файл Index.html должен иметь гипертекстовую форму, созданную в Hyper-Text Markup Language (HTML). HTML – очень простой и мощный язык. Существует множество редакторов (многие WYSIWYG), вплоть до plug-ins к Microsoft Word, при помощи которых легко создаются HTML-файлы.

 Чтобы научиться писать HTML-документы, вы можете пролистать учебник по HTML для начинающих (рекомендую издательство "O'Reilly&Associates"). Но и без учебника вам будет вполне достаточно вводной информации в этой статье, а интерактивные примеры заменят реальные WWW-страницы.

Файлы, которые вы сделаете доступными для просмотра в своем каталоге public_html, должны быть документами в формате HTML или графическими картинками известных форматов: GIF, TIFF, JPEG и XBM.

По соображениям безопасности WWW-станция не разрешает пользователям запускать на выполнение программы, размещенные в каталоге public_html. Это означает также, что возможность заполнения какой-либо формы или выполнения других действий, связанных с обращением к вашей странице, необходимо согласовать с системным администратором WWW-станции. Однако программы, написанные на JavaScript или Java, могут выполняться внутри вашей персональной страницы на компьютере обратившегося к ней пользователя и не требуют специального разрешения.

Редактирование страницы

Вы имеете собственный каталог на WWW-сервере. Теперь нужно идти вперед и создавать HTML-тексты на своей странице (Home Page). Для этого вам могут понадобиться следующие HTML-команды:

<НЕАОХТ1Т1Е>Здесь название вашей страницы<TITLE>

<LINK HREF="mailto: your-email@address"></HEAD>

<Н1>Тематический заголовок страницы </Н1>

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

Значение тэга заголовка <Н#></ Н#> может изменяться от 1 до 6, единичке соответствует надпись наибольшего размера. Различие между <TITLE> и <Н1> заключается в том, что <TITLE> не отображается в тексте при показе HTML-документа.

Общие замечания: HTML игнорирует ряд пробелов, считая их одним-единственным разделителем. Окончание параграфа надо указывать явно. Это делается с помощью тэга <Р> в конце параграфа. В HTML также игнорируются табуляции и пустые строки.

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

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

Можно создавать форматированные списки несколько типов: помеченный символами "о", пронумерованный и определяемый.

 – Помечаемые символами "о" списки начинаются с <UL> (ненумерованный список). Каждая единица списка начинается с <LI>. В конце списка поставьте </UL>.

 – Нумеруемые списки начинаются с <OL> (упорядоченный или нумерованный список). Для обозначения каждой единицы списка используется <LI>. Оканчивает список </OL>.

 – Определяемый список (Definition list) требует для описания дополнительных элементов. Начинается список с <DL>. В каждой единице списка используются тэги <DТ> (термин, который будет определен) и <DD> (определение термина).

Для включения связей с другими HTML-страницами или источниками информации предназначен следующий тэг: <А HREF= "url" > текст </А>, где url может указывать на что-нибудь внутри вашей страницы, на другой странице, в другом документе или в другом документе по другому адресу. Любую информацию или связи можно добавлять по мере необходимости.

Хорошим тоном считается включение сигнатуры и даты в конце HTML-файла, чтобы посетители знали, кем и когда были внесены последние изменения. Рекомендуется добавлять косые линии для улучшения читаемости, например:

<HR>

Последние изменения внесены: ДaTa/<EM>username@adress</ ЕМ>

Ряд общедоступных программ и сценариев (например, на языке PERL) может выполняться со страниц каталога public_html. Эти программы устанавливаются администратором Web-сервера и находятся обычно в каталоге cgi-bin. Можно обращаться к этим программам, определив URL как /cgi-bin/Program-Name, где ProgramName – имя программы, которую вы хотите использовать.

При передаче параметров этой программе необходимо следовать некоторым простым правилам. В URL список параметров начинается со знака вопроса (?), параметры отделяются друг от друга знаками плюс (+). Пробелы внутри параметров определяются управляющей ESC-последовательностью "%20". Специальные символы можно определять управляющими ESC-последовательностями, которые начинаются со знака процента (%) и сопровождаются шестнадцатиричным ASCII-кодом знака (20 – код пробела).

Какие программы вы можете использовать – определяет только системный администратор. Если хотите добавить новые программы, которые нужно выполнять из вашего каталога public_html .обратитесь к администратору Web-сервера, чтобы он поместил их в каталоге cgi-bin (или аналогичном для других систем).

Руководство или справочник по HTML могут предложить хорошие примеры определения и использования различных команд, существующие WYSIWYG-редакторы также предлагают различные способы оформления страниц. Но пока вы сами не попробуете сделать все "на низком уровне" и не выработаете собственный стиль – толку не будет. Полезная практика – рассмотреть готовый HTML-код, который другие используют для изготовления собственных страниц.

Секреты проектирования универсальной HTML-страницы

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

Работа с картинками

Графические страницы популярны, но изображения медленно передаются по телефонным линиям. Как обеспечить ускорение при отображении картинок и оптимизировать работу с ними, было сказано выше. Однако статистика WWW-просмотра показывает: существует значительное число пользователей, использующих Lynx (под UNIX). Большое количество пользователей Web работает в текстовом режиме (некоторые работают в Интерне только через соединение dial-up в пакетном режиме). И даже те, кто работает в режиме on-line, зачастую используют только текстовый режим просмотра, выключая отображение картинок, чтобы ускорить загрузку страниц. Для всех этих групп пользователей Web-страницы могут выглядеть комически.

В Lynx картинки отображаются в виде сообщения [IMAGE]. Некоторые Web-страницы будут выглядеть так: "Добро пожаловать [IMAGE] [IMAGE] [IMAGE] [IMAGE]." В графических пакетах просмотра изображения отображаются пиктограммами. В любом случае обратившийся не получает информацию, содержащуюся в картинках. Чтобы корректно работать с изображениями в режиме текста – включайте альтернатив-

ные текстовые варианты для каждого изображения на вашей странице, используя ALT-атрибут в тэге <IMG>:

<IMG SRC="images/sgg_logo.gif"

ALT="HOME" BORDER=0

HEIGHT=58WIDTH=144 ALIGN=middle>.

В Lynx ALT-текст отображается вместо нейтрального [IMAGE]. Страницы остаются функциональными, легко читаемыми и не теряют навигационных качеств, пиктограммы сохраняют свои функции. Если ваши изображения являются чисто декоративными и не несут функциональной нагрузки – используйте ALT="ⁿ, чтобы полностью скрыть изображение от показа в текстовом режиме. Обратите внимание, что текст, который вы помещаете внутри ALT, не может содержать в себе других HTML-тэгов. Это, к сожалению, не позволяет заменить так называемое картируемое изображение (Image Map), что существенно ограничивает применение альтернативного варианта. В таких случаях нужно предусматривать дополнительный текст: в данном случае – альтернативное меню вне <!МО>-тэга. Это позволит текстовым пользователям не выключаться из игры и легко управлять вашими страницами, обеспечит быстрый выход для читателей, имеющих включенную графику, но не желающих ждать полной загрузки изображения. Поэтому стоит предусмотреть обе возможности для навигации при входе: текстовое меню и графические пиктограммы (средний фрейм и боковые указатели на рис. 1). Данная методика используется на многих профессиональных страницах.

Работа с таблицами

HTML-таблицы обеспечивают гибкость проектирования Web-страниц и прекрасную скорость загрузки. Таблицы постепенно приходят во все браузеры и перестают быть экзотикой.

Использование таблиц, однако, создает больше проблем, т. к. у них нет никакого альтернативного Аlt-текста. Поэтому нет возможности определить HTML-страницу так, чтобы таблицы одинаково хорошо выглядели во всех программах просмотра. Так что некоторые Web-пользователи просматривают страницы с чрезвычайно перепутанными, если вообще читаемыми таблицами. Браузеры разработаны так, что если они не понимают тэг, то просто игнорируют его и отображают оставшийся текст как он есть.

Самый верный путь разработки HTML-Page с таблицами – метод проб и ошибок. Проверяйте вашу страницу в многочисленных программах просмотра, чтобы удостовериться, что она все еще остается читаемой. Но есть и простой прием для страниц с таблицами – добавление <Р> или <BR> в конце каждой ячейки. Тэги <Р> будут игнорироваться браузерами, которые понимают таблицы (потому что они содержатся внутри ячеек), а браузеры без таблиц – отформатируют текст с новым параграфом. Таким образом, каждое поле появится на отдельной строке. Это, конечно же, не таблица – но, по крайней мере, каждую ее "ячейку" можно будет отличить от других.

Работа с фреймами

Наша страница активно использует фреймы. Новая возможность, реализованная впервые в Netscape 2.0, позволяет странице разбиваться на различные области – фреймы, каждый с собственным HTML-содержанием и независимой прокруткой. Проблема состоит в том, что сама базовая страница (index.html) содержит только описание для фреймов, расположенных на ней, и загружает содержимое из других файлов. Пользователи, зашедшие на страницу с фреймами в программе просмотра, не поддерживающей фреймов, вообще ничего не будут видеть.

Netscape позаботилась об этом и, когда разрабатывала фреймы, добавила тэг<NOFRAMES>, который обеспечивает альтернативный механизм для отображения страниц с фреймами. <NOFRAMES> располагается внутри <FВАМЕSЕТ>-тэга, обеспечивая альтернативный вход. Внутри <NOFRAMES>-тэга вы помещаете HTML-содержание, которое будет отображаться в тех браузерах, которые не поддерживают фреймы.

Работа с Java Applets

В Web-мире все еще нет однозначного мнения о языке Java и, в частности, о Java Applets. Java Applets – это программы, которые вызываются динамически на Web-странице и выполняются на компьютере обратившегося пользователя.

Язык Java пока еще новинка и недоступен многим из Web-просмотрщиков. Netscape и HotJava в настоящее время выполняют Java Applets, но даже в них поддержка Java недоступна многим системам (например, WindowsS. Даже там, где Java Applets поддерживаются, они часто выключаются пользователями, опасающимися нарушений защиты или не желающими отдавать ресурсы своей системы Java-приложениям. Проблемы, связанные с Java-совместимостью, решаются просто. Чтобы поместить Java-приложение на Web-страницу, используется тэг <APPLET>. В браузерах, которые не поддерживают Java, этот тэг игнорируется, и Applet на странице не выполняется. Чтобы на том месте, где должен находиться Java Applet, хоть что-то отобразилось, HTML-код помещают между <APPLET> и </APPLET> после тэга<РАНАМ>. Расположение текста, изображений или других HTML-тэгов внутри <APPLET> ничего не изменит для браузеров, которые поддерживают Java – они игнорируют тэги между<АРРLЕТ> n</APPLET>. Зато в браузерах, не поддерживающих Java Applets, будет осуществляться альтернативное отображение.

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

Краткий справочник по HTML

<TILE> текст <TILE>

заголовок документа

<Н 1> текст <Н1>

заголовок раздела (Н=1 ...6, 1 – самый большой размер)

<Р>

новый параграф

<BOLD>...</BOLD>

полужирный текст

<ЕМ> ...</ЕМ>

курсив

<ТТ> ... </ТТ>

шрифт пишущей машинки

<HR>

линия поперек страницы

<OL> список </OL>

нумерованный список

UL> список </UL>

ненумерованный список

<LI>

единица списка

< IMG ALT= "текст" SRC= "имя файла с картинкой" >

иллюстрация

<А HREF= "url" > текст </А>

ссылка, где url может указывать на что-нибудь внутри страницы, в другой странице, в другом документе или в другом документе по другому адресу.