Файл: Уроки HTML.docx

Гиперссылки на веб-страницы - одно из основных свойств 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-файл. Таким образом, первый шаг - это определение файлов, на которые я хочу сослаться, и текстов ссылок.

Теперь введите тег <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 того документа, который вы хотите посетить, в строке состояния внизу экрана. Давайте посмотрим на нашу страничку с сылками:

Ссылки на любое место в 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>