Что такое ссылка и с чем ее едят

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

Как известно, любой сервер, любая страница во Всемирной Паутине имеет свой уникальный адрес. Как и в почтовом деле, он необходим для точной идентификации конкретного места в киберпространстве. В компьютерном мире адрес называется URL (в переводе с английского - универсальный локатор ресурсов) и служит четкой инструкцией к немедленному исполнению. Этим-то и отличается Интернет от всего, что каким-либо образом служит для передачи информации.

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

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

В языке HTML ссылка задается так: <A HREF="URL"></A>, где URL - это какой-либо конкретный адрес, к примеру www.chat.ru или www.yahoo.com.

Например: <a href="http://www.yahoo.com"></a>.

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

К примеру, наберем слово "переход" и попробуем сделать так, чтобы "клик" по нему привел к переходу на другую страницу. Исходный текст выглядит следующим образом: <UL> <CENTER><LI><A HREF="www.infoart.ru"><FONT COLOR="#000040">переход;</FONT> </A></LI></CENTER> </UL> Разберем сию абракадабру повнимательнее. Как видно из примера, к простому описанию ссылки на URL-адрес www.infoart.ru справа добавлено описание цвета шрифта и набор какого-то бреда. Начнем с конца. Флажком FONT COLOR задаем цвет ссылки, чтобы она выделялась из окружающего текста не только подчеркиванием, что делается по умолчанию, но и контрастным цветом. Опять же по умолчанию любой редактор устанавливает цвет ссылки как #000040. Это синий. Однако нет ничего постоянного, чего нельзя было бы переменить. Если стиль и общий дизайн вашей страницы совершенно несовместим с таким видом ссылки, то ее цвет вполне можно и даже нужно изменить. В данном случае оформление - дело не главное, поэтому оставим все, как есть. Сочетание описания ссылки (HREF="www.infoart.ru") и описания текста ("><FONT COLOR="#000040">переход;</FONT>) трактуется браузером как слово "переход", к которому я присоединил ссылку на московский сервер ИнфоАрт. Теперь, если во время просмотра страницы дважды щелкнуть по выделенному синим цветом слову, автоматически осуществится переход на титульную страницу сервера ИнфоАрт (www.infoart.ru).

Несмотря на особое значение задействованного слова, с точки зрения браузера оно является таким же объектом, как любой другой. Следовательно, на него также распространяются обычные правила форматирования. Если имеет смысл назначить ссылку на слово или выражение, которое является частью предложения, то форматировать его индивидуально смысла нет. Но во всех остальных случаях ссылка, точнее, объект, которому она назначена, подчиняется таким командам, как LEFT, RIGHT или CENTER.

Кроме того, допускается применение различных стилей. Так, в моем примере присутствует флажок <LI> </LI>, который ставит жирную точку перед словом.

Что можно сделать с помощью ссылок? Прежде всего - обеспечить активную связь с другим документом. Например, титульная страница содержит перечень глав интересной интерактивной книги. Каждому пункту перечня соответствует своя страница с содержанием. Следовательно, имеет смысл воспользоваться приведенным примером для задания ссылки с названия главы на страницу с его содержанием.

Вторым способом применения ссылки является минимизация объема вашей страницы. Предположим, очень нужно опубликовать во Всемирной Паутине просто-таки революционный проект нового коттеджа с массой текста и огромным количеством высококачественных иллюстраций. Если задачу решать "в лоб", то получиться очень длинная страница с множеством картинок, рваным текстом и одним единственным недостатком. Общий объем такого сайта будет столь велик, что даже вам самому надоест ждать, пока все это хозяйство, наконец, будет загружено по сети. Это при условии, что скорость чтения будет приемлемой и процесс не оборвется в самый неподходящий момент. Что уж тут говорить о посторонних людях, впервые попавших сюда. Значит, результатом огромных трудов окажутся полная безвестность и тотально негативные отзывы.

Избежать подобного конфуза можно. Причем без сколько-нибудь серьезных затрат рабочего времени. Хитрость заключается в том, что в текст основного документа вставляются отдельно заготовленные иллюстрации, но маленького размера и отсканированные в значительно меньшем разрешении. Естественно, в этом случае рассмотреть детали на такой картинке вряд ли удастся, но для этого и существуют ссылки. Можно ведь сразу обзавестись двумя одинаковыми изображениями. Одно маленькое, да и по объему небольшое, а второе - самое большое из допустимых монитором со всеми деталями и яркими сочными красками. Свяжите их ссылкой - и все проблемы будут решены. Назначение ссылки иллюстрации выглядит следующим образом: <center><p><a href="www.infoart.ru"><img src="kg73713a.gif" alt="Тут будет картинка" height=40 width=40></a></p></center> Как вы сами видите, по структуре конструкция флажка напоминает предыдущую. Только здесь вместо текстовой строки, которой назначена ссылка, присутствует описание самой картинки.

img src="kg73713b.gif" Если графический объект расположен в той же папке, что и сама страница, то достаточно просто указать его имя. В противном случае необходимо указывать полный путь, начиная с текущего диска. Мой вам совет - старайтесь этого избегать. Удобно, конечно, создать стройную иерархическую структуру для хранения данных. Только когда ваш сайт очутится на web-сервере, а вы именно к этому и стремитесь, иначе зачем его вообще создавать, то что-нибудь в путях обязательно изменится, например имя диска, а программа будет наивно полагать, что ничего не случилось и... Можете поэкспериментировать сами, однако я сомневаюсь, что результат вам понравится. Если же все будет находиться в одной папке, то никакие переносы с машины на машину не смогут нарушить изящество вашего замысла и красоты его реализации.

Теперь немного об общей этике. Есть золотое правило законченного лентяя: зачем делать что-то сегодня, если это можно сделать завтра. Разные люди относятся к нему по-разному, но в области программирования чаще всего встречаются именно лентяи. Даже самая информативная и самая стильная кнопка имеет смысл только тогда, когда появляется на экране. До этого момента ее просто нет. А какой смысл в пустом месте? Если за кнопкой скрывается переход на какое-либо жутко интересное место, то попасть на него можно будет лишь после того, как кнопка предстанет во всей красе и можно будет, наконец, прочитать, куда, собственно, ведет дорога. А теперь представьте, что этот элемент навигации находится в самом конце длинной страницы с множеством различных прибамбасов, занимающих достаточно много места. Вы просто вспомните себя в подобной ситуации - и станет понятно, чего обычно нехватает. Именно пояснения. Простого словосочетания, объясняющего вкраце назначение загружаемой картинки. Это пояснение указывается в поле "ALT": ALT="Тут будет картинка" Конечно, вместо "тут будет картинка" на реальной странице следует указывать что-нибудь более информативное. Кстати, верхом изящества в Интернет при разработке сайтов считается определение еще и альтернативной картинки. Рассмотрим такой пример: <center><p><img src="kg73713c.jpg" lowsrc="flag.gif" alt="Выход" height=55 width=100></p></center> В качестве основного элемента загружается изображение boats.jpg. Предположим, что эта самая подводная лодка отснята в разрешении 1024 на 768 при глубине цвета в 64К да еще и размером на три четверти видимой части экране. Объем - сами понимаете. Грузиться такая иллюстрация будет долго, и все это время ваш сайт будет иметь вид недостроенного и всеми забытого дома. Не слишком эстетично. Для того,чтобы исправить ситуацию, на первое время появляется чисто текстовое пояснение "Выход" (или что-нибудь более подходящее к содержанию вашей работы). Потом загружается элемент, указанный в поле lowsrc. Это может быть та же иллюстрация, но в меньшем разрешении и с меньшим количеством цветов. Благодаря значительно меньшему обьему она попадет на экран гораздо быстрее и придает ему более или менее законченный вид. Ну и в самую последнюю очередь загружается основное изображение, то что указано в поле img src.kg73713d./p> Такая конструкция позволяет манипулировать внешним видом страницы в очень широком диапазоне без больших неудобств для тех людей, которые придут на нее посмотреть. С другой стороны, можно "малой кровью" хоть ежедневно менять дизайн страницы за счет замены основной иллюстрации, той, что задается в img src. Далеко не каждый серфер в сети обладает достаточным терпением, чтобы дожидаться окончания чтения бесконечных картинок, и те, кто все же выдержит, каждый раз будут приятно удивлены.kg73713e./p> Со ссылками мы разобрались. Однако рассмотренные решения и приемы далеко не всегда приемлемы. Возьмем наиболее типовую для Интернет ситуацию. Необходимо создать интерактивный раздел ответов на письма благодарных читателей вашей страницы. Обычно суть любого вопроса сводится к одному, максимум двум конкретным предложениям. Ответ, естественно, тоже уступает по объему Большой Британской Энциклопедии. Таким образом, и вопрос, и ответ в сумме занимают не более двух-трех коротких абзацев. При решении этой задачи можно пойти стандартным путем: создать для каждого вопроса отдельную страницу и связать ее с помощью ссылки с отдельным титульным листом, на котором будут расположены только сами вопросы.

Несмотря на кажущуюся эффективность приведенного решения, на практике оно зачастую оказывается самым неудобным и медленным. Дело в том, что каждый раз нужно заново описывать всю страницу, задавать фон, ломать голову над единым стилем оформления, дабы сохранить визуальную целостность всей конструкции. А все это требует объема. Так, мало-помалу несколько килобайт текста многократно обрастают всякой необходимой всячиной, от которой нельзя отказаться. По эту сторону клавиатуры такая многосвязанная структура скорее вызовет раздражение, чем поразит виртуозностью замысла. Сидишь и ждешь десять минут при плохой связи ради того, чтобы пробежать за десять секунд пару абзацев и убедиться, что время потрачено зря.

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

Указание к переходу по "TARGET" описывается следующим образом: <a href="#NamberOne"></a> Таккак по принципу действия "TARGET" ничем не отличается от обычной ссылки, то и задается он до боли знакомым образом. С той лишь разницей, что вместо URL-адреса в поле href указывается имя таргета. В остальном сия конструкция полностью идентична простой ссылке. Точно также ее следует привязывать к чему-нибудь материальному. Например, к текстовой строке или к рисунку. Правда, чаще всего в подобном случае излишние украшательства не применяются. По внешнему виду таргет не отличается от ссылки, и обычный человек не может точно сказать, где стоит ссылка, а где таргет.

Остается определить имя таргета. Делается это так: <a name="NamberOne"></a> Строку описания таргета следует поставить непосредственно перед тем местом документа, которое необходимо продемонстрировать пользователю в ответ на клик по какому-либо специально отведенному месту.

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

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

Про адреса у меня все.

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

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

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

Постарайтесь даже в самые цейтнотовые времена не забывать, что результат ваших тяжких и праведных трудов предназначен для таких же, как вы, людей. Скорее всего, и вкусы ваши не слишком отличаются. Значит, если вам не нравится что-то на тех страницах, которые вы посещаете в Интернет, то и окружающие, наверняка, отреагируют аналогично. А вообще, понять - что удобно, а что нет, можно только исключительно на собственном опыте. Попробуйте выкроить пару вечеров на простое путешествие в Паутине. Как раньше говорили: на других посмотреть и себя показать. Полезно начать такую ознакомительную прогулку с поисковой службы, задав ей вопрос - "дизайн"?</P> 

Александр Запольскис


Компьютерная газета. Статья была опубликована в номере 37 за 1997 год в рубрике интернет :: вебмастеру

©1997-2024 Компьютерная газета