Б. Морис. HTML в действии (+ дискета)

Часть II

Составные части

Глава 6

Искусство ссылок
В предыдущей главе вы познакомились с основами HTML на примере создания настоящей web-страницы, различные части которой были связаны ссылками. Однако согласитесь, что страница, в которой есть только внутренние ссылки, не представляет особого интереса. В этой главе вы узнаете, как создать более впечатляющую публикацию, устанавливая ссылки на локальные HTML-страницы и документы, расположенные на узлах Internet по всему миру.

Основные сведения
Существует три типа ссылок: внутристраничные - они задают переходы в пределах одной страницы; внутрисистемные - ссылки между страницами в пределах одного и того же сервера; и межсистемные - ссылки на страницы, расположенные на удаленных узлах Web.

Для определения ссылок предназначен специальный тег, который называется Anchor (якорь). Профессиональная HTML-публикация содержит множество ссылок, обеспечивающих доступность и простоту использования web-документа. Примеры в этой главе представляют собой строки исходного кода на языке HTML. Теги в них изображены в виде текста, а не специальных значков, находящихся на их месте при редактировании документа в HoTMetaL PRO. Типичный тег, который определяет межсистемную ссылку, в исходном тексте HTML-документа выглядит следующим образом:

<A HREF="http://www.vmedia.com/">Ventana Online</A>

Открывающий тег <A> определяет ресурс, на который устанавливается ссылка. Это точка назначения, представляющая собой универсальный указатель ресурса (URL) или имя файла. В нашем случае точка назначения представляет собой URL http://www.vmedia.com/. Между открывающим и завершающим тегами находится текст, который при просмотре web-страницы в броузере будет выделен как гиперссылка. В нашем случае текст гиперссылки - «Ventana Online». Завершающий тег </A> обозначает конец текста и гипертекстовой ссылки.

Совет
В этой главе описано создание чисто текстовых ссылок. Однако исходной точкой может служить и изображение. О том, как использовать для этой цели встроенную графику, рассказывается в разделе «Использование изображения в качестве гиперссылки» главы 8.

Создание ссылок
В HoTMetaL PRO существует несколько способов создать ссылку. Можно щелкнуть на кнопке Anchor, можно выбрать команду Markup д Insert Element, можно нажать комбинацию клавиш Ctrl+I и выбрать элемент Anchor, и, наконец, можно использовать команду Links д Insert Anchor. Все эти действия приведут к одному результату - откроется диалоговое окно редактирования URL В нем следует ввести информацию о точке перехода по ссылке. HoTMetaL PRO 2.0 позволяет легко вводить URL для ссылок, предоставляя для каждого типа указателя отдельное текстовое поле. В следующих разделах описано, как использовать эти поля.

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

Если в окне редактирования HoTMetaL PRO не видно содержания ссылки, выберите команду View д Show URLs. На рис. 6.2. показан документ при включенном отображении указателей ресурсов. Как упоминалось в предыдущей главе, HoTMetaL PRO не отображает на экране атрибуты HREF или NAME, присутствующие в строках сгенерированного HTML-кода. Чтобы проверить значения этих атрибутов, щелкните кнопкой мыши между тегами якоря и выберите команду Markup д Edit SGML Attributes (можно вместо этого нажать клавишу F6). Откроется диалоговое окно редактирования атрибутов, в котором можно увидеть значения HREF и NAME.

Совет
Если вы не используете HoTMetaL PRO, можно вводить текст в HTML-редакторе или в обычном текстовом редакторе, таком,как Notepad. Windows 3.1 и Windows для рабочих групп позволяют задавать имена файлов длиной до 8 символов плюс три символа расширения, поэтому имена web-документов оканчиваются на .HTM, а не на .HTML. Windows NT и Windows 95 не имеют подобного ограничения и позволяют вводить длинные имена файлов и длинные расширения. В этих операционных системах общая длина имени файла с расширением не должна превосходить 256 символов.

Ссылка на локальную страницу или файл
При создании документов для публикации в Web лучше всего делать отдельные страницы небольшими. Это поможет избавиться от запутанных внутристраничных перекрестных ссылок. Ниже приводится примерная последовательность действий, необходимых для того, чтобы с помощью HoTMetaL PRO создать две страницы, каждая из которых ссылается на другую. На рис. 6.3. можно увидеть, что у нас получилось.

1. Запустите HoTMetaL PRO.

2. Создайте новый документ с помощью кнопки New, команды File д New или комбинации клавиш Ctrl+N. На экране появятся обязательные для любого HTML-документа теги.

3. Поместите курсор после слов «Document Title:».

4. Введите название документа: Link Sample Page 1, затем поместите курсор между двумя тегами <BODY>.

5. Щелкните на кнопке Insert Element, выберите команду Markup д Insert Element или нажмите клавиши Ctrl+I. Откроется диалоговое окно ввода элемента. Разместите окно на экране так, чтобы была видна большая часть основного документа.

6. Щелкните правой кнопкой мыши в левом углу заголовка окна ввода элемента. Выберите в открывшемся меню команду Pin. Эта команда фиксирует окно открытым, так что вам не придется для вставки каждого элемента вновь открывать его с помощью инструментальной панели, комбинации клавиш или через меню.

7. Выберите элемент <H1> и щелкните на кнопке Insert Element. Курсор появится между тегами <H1> и </H1>.

8. Щелкните кнопкой мыши на заголовке окна документа. В позиции курсора введите заголовок документа - Link Sample Page 1.

9. Поместите курсор между тегами </H1> и </BODY>. Прокрутите список в окне ввода элементов, выделите элемент <P> (Paragraph - абзац) и щелкните на кнопке Insert Element. Можно добиться того же результата, щелкнув на кнопке Paragraph, расположенной в панели инструментов. Точка вставки появится между тегами <P> и </P>.

10. Щелкните кнопкой мыши на заголовке окна документа. В позиции курсора введите текст This is a reference to page two.

11. Выделите текст «page two», выберите тег якоря (Anchor) в окне ввода элементов и щелкните на кнопке Insert Element. Вместо этого можно, выделив текст, щелкнуть на кнопке Anchor в панели инструментов. Откроется диалоговое окно редактирования URL.

12. В поле Path введите page2.htm в качестве точки назначения ссылки, затем щелкните на кнопке OK.

13. Выберите команду File д Save, нажмите клавиши Ctrl+S, или щелкните на кнопке Save, чтобы сохранить документ. Назовите его page1.htm.

14. Чтобы создать вторую страницу, выберите команду File д Save As, введите page2.htm в качестве имени файла и щелкните на кнопке OK.

15. Измените везде в документе Page1 на Page2 и измените текст якоря, заменив page two на page one.

16. Поместив курсор в любом месте текста «page one», выберите команду Markup д Edit SGML Attributes или нажмите клавишу F6. Откроется диалоговое окно редактирования атрибутов. Замените назначение ссылки с page2.htm на page1.htm в поле HREF и щелкните на кнопке Apply.

17. Выберите команду File д Save или щелкните на кнопке Save, чтобы сохранить изменения в документе.

18. Щелкните кнопкой мыши на заголовке окна ввода элементов и нажмите клавиши Alt+F4, чтобы закрыть его.

19. Чтобы проверить, работает ли эта простая связь двух страниц, выберите команду File д Preview или нажмите комбинацию клавиш Ctrl+M. Выберите броузер и щелкните на кнопке Preview. С тем же результатом вы можете воспользоваться командой File д Open File или File д Open Local File непосредственно в вашем web-броузере.

На странице под названием Link Sample Page 1 присутствует ссылка (page2.htm), которая обеспечивает переход на страницу Link Sample Page 2, которая, в свою очередь, имеет ссылку (page1.htm), с помощью которой можно перейти обратно на страницу Link Sample Page 1. Исходный HTML-код для первой страницы выглядит так:
<HTML><HEAD><TITLE>Link Sample Page 1</TITLE></HEAD>
<BODY><H1>Link Sample Page 1</H1>
<P>This is a reference to
<A HREF="page2.htm">page two</A>.
</P>
</BODY></HTML>

HTML-код для второй страницы выглядит следующим образом:
<HTML><HEAD><TITLE>Link Sample Page 2</TITLE> </HEAD> <BODY><H1>Link Sample Page 2</H1> <P>This is a reference to <A HREF="page1.htm">page one</A>. </P> </BODY></HTML>

Относительный путь к файлу
В предыдущем примере в атрибуте HREF было указано только имя файла. Имейте в виду, что этим полный URL не ограничивается. Применять атрибут HREF таким способом разрешено, поскольку броузер рассматривает его как относительный путь к файлу. Это значит, что если первый файл открыт с помощью команды File д Open File, web-броузер предполагает, что все ссылки, не имеющие префикса HTTP: или FILE:, указывают на файлы, расположенные в том же каталоге. Это удобно, поскольку можно переместить оба файла в другой каталог, и ссылки между ними все равно будут работать. Если посмотреть на точку назначения перехода («jump destination»), значение которой появляется в строке состояния броузера (расположенной обычно в самом низу окна), можно увидеть полный путь к файлу, например:

file:///d:/sqhmlite/page2.htm

Ссылки всякие важны
Необходимо создавать ссылки, которые обеспечивают перемещение по документу в обоих направлениях. К сожалению, в Web очень распространены HTML-страницы, которые страдают отсутствием обратных переходов.

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

Не поддавайтесь дурному примеру и возьмите за правило всегда включать в любую HTML-страницу ссылку для перехода на вашу домашнюю страницу, которую, в свою очередь, можно связать с локальными web-документами или другими узлами World Wide Web.

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

Ссылки внутри страницы
В большинстве случаев стоит делать web-страницы короткими. Читателю будет удобнее, если страница целиком поместится на экране его компьютера. Однако в некоторых случаях это, наоборот, нежелательно. Например, длинный прайс-лист или список ответов на часто задаваемые вопросы (FAQ - Frequently Asked Questions) лучше не разбивать на небольшие страницы, чтобы читателю было проще распечатать документ. В большой по объему странице удобно использовать ссылки для перехода от одной ее части к другой. Такие ссылки называются внутристраничными. При этом приходится выполнять несколько специфических действий, например, создавать имя (метку) для точки назначения, в которую должен осуществляться переход. Метки, как и сами гиперссылки, создаются с помощью тега якоря, но при этом задействуется его атрибут NAME. Описанные ниже шаги познакомят вас с процессом создания ссылки внутри страницы.

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

2. Щелкните на кнопке Name target. Откроется диалоговое окно вставки именованной позиции, показанное на рис. 6.4. Первое слово выделенного текста появится в текстовом поле. Щелкните на кнопке OK. HoTMetaL PRO вставит теги якоря вокруг выделенного текста, а атрибут якоря NAME примет введенное значение. Можно убедиться в этом с помощью команды Markup д Edit SGML Attributes. Имя точки назначения появится в текстовом поле NAME.

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

4. Щелкните на кнопке Connect link. Редактор вставит теги якоря по краям выделения. Если режим отображения URL включен (это можно сделать командой View д Show URLs), то на экране в скобках после символа «решетки» (#) появится определенное на первом этапе имя метки. В результате исходная точка ссылки будет соединена с точкой назначения.

5. Выберите команду File д Save (Ctrl+S) или щелкните на кнопке Save, чтобы сохранить изменения.

6. Выберите команду File д Preview или нажмите клавиши для проверки работы внутристраничной ссылки.

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

<HTML>
<HEAD>
<TITLE>Canyon Software's FAQ</TITLE></HEAD>
<BODY><H1>Canyon Software's FAQ</H1>
<P>This page includes answers to frequently asked questions about
Canyon
Software products.</P>
<P>If you need help or technical support, you can move directly to the
section
on <A HREF="#help">Getting Help</A>.</P>
<HR>
<H1>What is Drag And Zip 95?</H1>
files. To compress files, you select files and click the right mouse button to select Drag And Zip from a shortcut menu or drag the files you want zipped to a zipper icon. Next, you give a destination path and a name to the Zip file. Drag And Zip compresses the files into a Zip file. This is all done from within Windows with Drag And Zip's built-in compression program without the need for PKZIP. Extracting files from a Zip file is accomplished by double clicking on the file or by dragging it to the zipper icon. A viewer window showing the contents of the Zip file will appear. From this viewer window, users can select files for extracting, deleting, launching or viewing. Drag And Zip can also be used as an interface to PKZIP (.zip), LHA (.lzw) GnuZip (.gz), and tar (.tar) programs. Drag And
Zip works in conjunction with World Wide Web browsers and includes a built-in virus scanner. You can purchase Drag And Zip for $35.00 and any two programs for $55.00 or all three for $69.95.</P>
<HR>
<H1>What is Drag And File 95?</H1>
<P>Drag And File is the most powerful file manager available anywhere. Besides the standard, copy, move, view and delete functions, Drag And File gives you ways to manage your files that no other file manager can. Only in Drag And File can you: select directories, even across drives, and list the files in those directories; list the files on selected drives; list
duplicate files; copy, move, view, and drag and drop files from multiple Drag And File windows in one operation. The multi-associate feature lets you specify more than one application to be associated with a data file. For example, you can launch a Bitmap (.bmp) file and choose between applications programs, such as Paintbrush, Word Art and Paint Shop Pro to edit the file. Drag And File is $35.00. You can purchase any two
programs for $55.00 or all three for $69.95.</P>
<P></P>
<HR>
<H1>What is Drag And View 95?</H1>
<P>Drag And View allows you to view the contents of your files in a format similar to the way they will appear in the application with which they were created. Drag And View also can display numerous word processing documents, spreadsheets, databases, archives, bitmapped and vector graphics. Viewing files is as easy as selecting the files and clicking the right mouse button and selecting Drag And View from the shortcut menu or dragging them to the Drag And View icon. Up to 100 files can be dragged to the Drag And View icon and you can use Drag And View's tool bar to scroll through them. Selections of any view can be copied to the Windows clipboard or printed. All viewers have search and go to functions. You can open up as many Drag And View windows as you want to view and compare files. Drag And View is $35.00. You can purchase any two programs for $55.00 or all three for $69.95.</P>
<HR>
<H1>How can I get a copy?</H1>
<P>Shareware versions can be found at most online services and many bulletin boards including the following:</P>
<P></P>
<UL>
<LI><A HREF="ftp://ftp.canyonsw.com/">Canyon Software's
FTP Site</A></LI>
<LI>
<A HREF="http://www.coast.net/SimTel/">SimTel Archive</A>
</LI>
<LI>
<A HREF="http://winftp.cica.indiana.edu/">Indiana University
(CICA)Archive</A>
</LI>
<LI>Canyon's BBS at (415) 453-4289</LI>
<LI>CompuServe at the WINAPG Forum, Section 4 (GO
CANYON)</LI></UL>
<HR>
<P>
<A NAME="help"></A>
</P>
<H1>Getting Help</H1>
<IMG SRC="bell.gif">
<H2>Online Help</H2>
<P>For help with Drag And Zip, click on the Help menu on the menu bar in the main window. Context-sensitive help is also available for most menus and dialog boxes. For information and procedural help specific to a screen or menu, click on the Help button.
</P>
<H2>Telephone Help</H2>
<P>Canyon Software is committed to producing software that is useful and productive. To help users make full use of Drag And File, Canyon Software maintains a technical help line for registered users from 8:30 AM to 5:30 PM Pacific Time.</P>
<PRE>
Phone (415) 453-9779
Fax (415) 453-6195
BBS (415) 453-4289
</PRE>
<H2>E-mail Help</H2>
<P>If you would like to contact Canyon Software via e-mail, send a mail message to any of the following e-mail addresses.</P>
<PRE>
Internet support@canyonsw.com
CompuServe Forum Go Canyon
CompuServe 74774,554
America Online DanBCan
</PRE>
<P><B>[
<A HREF="press.htm">Press Releases</A> |
<A HREF="csfaq.htm">Products</A> |
<A HREF="order.htm">Order</A> |
<A HREF="vtourist.htm">Virtual Tourist</A> |
<A HREF="csfaq.htm#help">Help</A> |
<A HREF="feedback.htm">Feedback</A> ]</B></P>
</BODY>
</HTML>

В приведенном выше примере точка назначения перехода присутствует в виде метки «help», расположенной на той же странице. Символ «решетки» - префикс атрибута HREF (HREF="#help") - означает, что переход должен осуществляться внутри одной страницы, к позиции документа, в которой расположена метка «help». Не следует вводить символ «решетки» вручную, поскольку HoTMetaL 2.0 сделает это автоматически. В справочном разделе страницы под названием Getting Help присутствует другой тег якоря. В его HTML-коде вместо атрибута HREF присутствует атрибут NAME (NAME="help"). Этот атрибут задает имя метки, которое можно использовать для назначения ссылок.

Совет
Теги якоря могут быть использованы одновременно как для создания гиперссылок, так и для создания меток назначения. Для этого нужно в якоре определить оба параметра - HREF и NAME. Кроме того, можно совместить межстраничный переход с переходом к определенной метке. Это дает возможность перейти к заданной точке другой страницы. Более сложный пример ссылок приведен в конце этой главы.

Межсистемные ссылки
Этот тип ссылок предоставляет наиболее впечатляющие возможности. С их помощью можно установить связь с любой страницей на любом узле Web. Однако имейте в виду, что необходимо регулярно проверять работу межсистемных ссылок, так как неподвластная вам точка назначения может измениться в любой момент. Кроме того, сеть или сервер, с которыми установлена связь, могут быть на какое-то время отключены, что сделает невозможным использование ссылки. На всякий случай напомним: для того чтобы межсистемная ссылка работала, ваш компьютер должен быть подключен к Internet.

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

1. Введите и выделите текст, который будет определять гиперссылку.

2. Выберите команду Links д Insert Anchor или щелкните на кнопке Anchor. Откроется диалоговое окно редактирования URL.

3. Щелкните кнопкой мыши на направленной вниз стрелке, расположенной справа от поля Scheme. Выберите в списке пункт http, чтобы указать, что связь будет осуществляться с web-сервером. Если нужно определить ссылку на удаленный компьютер, работающий по другому протоколу, например, на узел FTP или Gopher, выберите в списке соответствующий пункт.

4. Введите адрес удаленного узла в поле Host. Поскольку протокол HTTP уже выбран на предыдущем шаге, префикс http:// вводить не нужно. Например, чтобы указать URL для связи с Ventana Communications Group, нужно ввести www.vmedia.com.

5. Введите в поле Path путь и имя нужного HTML-документа, расположенного на удаленном сервере. Щелкните на кнопке OK, чтобы закрыть диалоговое окно. Если вы хотите подключиться к узлу и открыть HTML-документ по умолчанию (обычно он называется index.htm или index.html), можно оставить поле Path пустым. Если ссылка не появилась на экране, можно сделать ее видимой, выбрав команду View д Show URLs.

Примеры ссылок
Чтобы лучше понять принципы создания HTML-ссылок, внимательно изучите следующий пример. Этот HTML-документ соответствует структуре, описанной в главе 3, и построен на основе страницы, приведенной в предыдущей главе. В документе присутствуют все три типа ссылок - внутристраничные, внутрисистемные и межсистемные.

Вот список web-документов, на которые имеются ссылки: