Уроки HTML'а. Урок # 12.
Ссылки на веб-страницах
Веб-страница
без ссылок - это изолированный остров. Если ее кто-нибудь посетит, он
не сможет оттуда попасть на другие острова-страницы. Если в ваши планы
не входит превращать людей в Робинзонов, хорошо бы сослаться на
несколько других страниц в WWW. Тогда вы тоже примете участие в
плетении всемирной паутины. Уже было показано, как интегрировать в
веб-страницу графические изображения, пиктограммы и фоновую графику.
Теперь настало время сделать следующий шаг и научиться ссылаться на
другие веб-страницы.
Гиперссылки на веб-страницы -
одно из основных свойств WWW. Любой документ может содержать ссылку на
другой веб-документ, заданную с помощью специального тега в HTML. Этот,
и возможно еще другие уроки посвящены гипертекстовым ссылкам. Вы
узнаете, как на странице сослаться на другие HTML-документы,
расположенные в любом месте Интернета.
Понятие гипертекстовой ссылки
Путешествуя
по web'у, вы, наверное, встречали на веб-страницах гипертекстовые
ссылки. Это фрагменты текста, часто подчернутые и выведенные синим
текстом. Отображенный таким образом текст называется текстом ссылки.
Если на нем кликнуть мышью, он автоматически осуществляет ссылку на
другую веб-страницу.
В каждом URL-адресе есть три
части: протокол, узер Интернета и имя файла (включая к путь нему, если
необходимо). Протокол - это правила, в соответствии с которыми два
компьютера общаются друг с другом; в этой главе говорится в основном о
стандартном http (hyper text transfer protocol - протокол трансляции
гипертекста, т.е. HTML) - стандартном протоколе WWW. Вы должны указать
также узел Интернета и при необходимости имя файла. Например онлайновый
адрес архива этих уроков, таков:
http://cray.vision.krg.kz/~Sam/dlab/subscr/html.arc/index.html
Длинно? Но ведь если речь идет о index.html, то его можно опустить... т.е. адрес по идее таков:
http://cray.vision.krg.kz/~Sam/dlab/subscr/html.arc/
Если
перевести это на русский язык, получится, что браузер должен с помощью
определенного способа связи (http) связаться по Интернету с указанным
адресом dlab.by.ru (сайт Design Laboratory), затем найти вебстраницу в поддиректории subscr/html.arc/ и запустить index.html. Этот порядок срабатывает и во втором случае, т.к. наличие index.html необязательный параметр.
Гипертекстовые
ссылки часто используются, поскольку могут легко свзяать два документа,
расположенные на противоположных концах мира. Каждый документ и файл в
Интернете имеют уникальный адрес, называемый URL'ом (uniform recource
locator - универсальный указатель ресурса). Чтобы связать два
документа, разработчики веб-страниц помещают на одном из них URL
другой. URL напоминает адрес электронной почты. Интернет-компьютеры
понимают, как транслировать URL и найти по ним, с кем нужно связаться.
Независимо
от того, где находятся веб-страница, на которые вы хотите сослаться - в
Купично или в Новой Зеландии, - веб будет работать с ними одинаково.
Браузер использует каждый URL для того, чтобы найти документ в
Интернете и автоматически доставить его вам. Тому, кто просматривает
веб-узлы по всему миру, нет нужды думать ни о URL'е, ни о том, как
найти нужный документ. Обо всем этом позаботится ваш браузер.
С
помощью WWW вы можете непосредственно на веб-странице ссылаться на
HTML-документы (веб-страницы), файлы (по протоколу FTP [file transfer
protocol - протокол передачи файлов]), группы новостей Интернета
(например, UseNet) и даже на такие популярные источники информации как
Yandex или Yahoo!.
Ссылки можно создавать на
веб-странице только по отдельности. Вам необходимо определить, что
будет служить текстом ссылки и, еще важнее, какую ссылку будет
представлять каждый такой текст. Вы можете поместить на веб-странице
сколько угодно ссылок и скомпоновать их любым способом.
Анатомия ссылки
Ссылаться
на другие страницы достаточно просто, но при этом необходимо понимать,
каким образом помещать ссылки на странице, а также знать
соответствующий синтаксис HTML.
Как любой элемент
HTML, ссылка задается парой тегов. Открывающий тег (называемый якорем)
- это тег <a>. Затем вы задаете файл, на который ссылаетесь, а
также текст ссылки. Все это завершается закрывающим тегом </a>.
Вот так, например, выглядит HTML-код ссылки, на сайт Design Laboratory:
<a href="http://cray.vision.krg.kz/~Sam/dlab">Design Laboratory</a>
<a> - якорь; href="http://cray.vision.krg.kz/~Sam/dlab" - ссылка; Design Laboratory - текст ссылки; </a> - закрытие якоря. Теперь посмотрите, как выглядит этот код на практике:
Design Laboratory
Создание ссылки
Настало
время поместить ссылку на нашу веб-страницу. Мы поместим на странице
ссылки двух различных (но похожих друг на друга) типов.
Сначала,
рассмотрим, как ссылаться на местные докумаенты. Местный документ - это
документ, который хранится в том же месте в Интернете, что и ваша
стартовая страница. На местные документы легко ссылаться, поскольку в
этом случае вам не обязательно вводить полный URL - знать нужно только
путь и имя файла. Затем вы научитесь ссылаться на документы,
расположенные в других местах WWW, используя ту же процедуру. Для этого
типа ссылок вам понадобится полный URL.
Ссылки на местные веб-страницы
Вполне
вероятно, что в одном месте у вас окажется несколько HTML-документов.
Допустим, у вас слишком много информации для одного документа, и вы
решили рабить его на несколько HTML-файлов. В такм случае естественно
поместить на главной странице ссылки на каждый из этих документов,
которые позволят легко и быстро на них перейти. Возможно даже, вы
выполните свою главную веб-страницу в виде оглавления, ссылающегося на
несколько отдельных страниц.
Давайте придумаем
элементарную страницу-оглавление. На ней разместим различные ссылки. В
процессе вы убедитесь что все это элементарно просто. Нужно только
задать фрагменты текста, ссылающегося на каждый конкретный HTML-файл.
Таким образом, первый шаг - это определение файлов, на которые я хочу
сослаться, и текстов ссылок.
| Текст ссылки |
Имя файла |
| Обо мне |
about.html |
| полезные сайты |
links.html |
Теперь
введите тег <a href>. Тег <a> назвают якорем. Он
применяется для ссылок на другие веб-страницы. Ключевое слово HREF
якорного тега сообщает браузеру, на что вы ссылаетесь. Не забудьте про
закрывающий тег </a>. Чтобы создать ссылку на about.html нужно
ввести следующий код:
<a href="about.html">Обо мне</a>
Вот
и все. Фраза "Обо мне" появится на экране в виде текста ссылки. Когда
посетители кликнут на этом тексте, они откроют файл about.html.
Проверьте,
не забыли ли вы, если это необходимо, указать путь к файлам, на которые
ссылаетесь. Например если бы файл about.html был сохранен в папке INFO,
я бы задал с ключевым словом HREF путь info/about.html:
<a href="info/about.html">Обо мне</a>
Сейчас
на вашей страничке появится только текст "Обо мне". Выполнив ту же
процедуру, я добавлю еще одну ссылку, посвященную полезным сайтам:
<a href="links.html">Полезные сайты</a>
Действие
ссылки можно проверить, кликнув на ней и посмотрев, попали ли вы на
нужную страницу. До того как вы кликните на ссылке, браузер выведет
полный URL того документа, который вы хотите посетить, в строке
состояния внизу экрана. Давайте посмотрим на нашу страничку с сылками:
файл: index.html
|
Домашняя странца
Выскубова Семена
Здравствуйте уважаемые посетители. Вы попали на страницу Выскубова Семена. Посмотрите какие разделы здесь доступны:
|
Ссылки на любое место в WWW
Теперь
настало время научиться ссылаться на HTML-документы, расположенные на
вашем Веб-узле. Для таких ссылок вам понадобиться полный URL документа,
в не только путь и имя файла, как в предыдущих примерах.
Тем
не менее, ссылка выглядит так же. Вы снова обозначаете имя файла и
текст ссылки тегами <a href="..."> и </a>. Когда вы
ссылаетесь на другой HTML в Web, URL всегда начинается с HTTP://.
Таким
образом браузер узнает, что искать следует документ в WWW, а не файл на
вашем веб-узле. Остальная часть URL'а состоит из пути в Интернет к
нужному узлу и имени файла документа, который вы ищите. Это очень
похоже на написание адреса на конверте: чтобы адресата можно было
найти, вы должны правильно указать все части его адреса.
В
качестве иллюстрации ссылки на любое место в Интернете я помещу на
страницу Выскубова Семена ссылку на список веб-страниц цирков на
поисковике Yahoo!.
Первый шаг - определение полного URL'а, необходимо для доступа к
документу. Следующий - задание текста, осуществляющего ссылку в окне
браузера. Мне понадобится ULR списка цирков в поисковике Yahoo!.
Через каталог я пойду по следующему пути: Arts (искусство) ->
Performing Arts (представления) -> Circuses (цирки). Теперь в
адресной строке (та, что вверху браузера) я вижу URL страницы цирков.
Он таков:
http://www.yahoo.com/arts/performing_arts/circuses/
Теперь на своей страничке я введу в теги <a href> и </a> адрес списка цирков в Yahoo!:
<a href="http://www.yahoo.com/arts/performing_arts/circuses/> Список цирков в поисковике Yahoo!</a>
После
того как ссылки помещены на странице, можно легко перемещаться с одной
страницы на другую. Обратите внимание, что, когда указатель мыщи
попадает на гипертекстовую ссылку, браузер выводит в строке состояния
внизу окна браузера полный URL того места, на которые вы хотите перейти.
Хочу
дать совет разработчикам веб-страниц. Если пользователь зайдет на
другую страницу по вашей ссылке, он может уйти на другие узлы и забыть
о вашем. Для того чтобы этого избежать, я расскажу вам о специальной
функции, которя позволит вам этого избежать.
Добавив в теге <a href="..."> ключевое слово target="_blank",
ссылка откроется в новом окне браузера. Т.е. сначала будет открыто
паралельное окно браузера, а затем это окно откроет URL на который вы
ссылались. Посмотрите на пример, который откроет URL на список цирков в
Yahoo! в новом окне:
< target="_blank" href="http://www.yahoo.com/arts/performing_arts/circuses/> Список цирков в поисковике Yahoo!</a>
Итог занятия
Мы
начали разговор о ссылках. Узнали, что они из себя представляют ссылки,
разобрали элементарную ссылку по составу, научились создавать ссылки на
локальные и другие веб-страницы.
|
| Шаг 2: Размещаем в интернет | |
-------------------------
|
