Записи Друзья Комментарии
Net-man
Аватар Net-man

 -Приложения

  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • Все на карте

 -Поиск по дневнику

Поиск сообщений в Net-man

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 20.04.2010
Записей: 814
Комментариев: 5985
Написано: 11575


Уроки HTML'а. Урок # 12.

Понедельник, 15 Ноября 2010 г. 15:51 + в цитатник

Ссылки на веб-страницах
Веб-страница без ссылок - это изолированный остров. Если ее кто-нибудь посетит, он не сможет оттуда попасть на другие острова-страницы. Если в ваши планы не входит превращать людей в Робинзонов, хорошо бы сослаться на несколько других страниц в 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>

Итог занятия
Мы начали разговор о ссылках. Узнали, что они из себя представляют ссылки, разобрали элементарную ссылку по составу, научились создавать ссылки на локальные и другие веб-страницы. Если у вас есть вопросы по пройденному материалу, присылайте их сюда.
DWEB.RU
Рубрики:  Полезное
Уроки HTML
Метки:  

Процитировано 1 раз
Понравилось: 1 пользователю
Нравится

осень_осень   обратиться по имени Понедельник, 15 Ноября 2010 г. 18:20 (ссылка)
Хорошего настроения)
Мне все еще страшно за это браться, но информацию собираю)
Ответить С цитатой В цитатник
Net-man   обратиться по имени Понедельник, 15 Ноября 2010 г. 18:49 (ссылка)
осень_осень, спасибо, Вам тоже только радужного настроения!!:heart:
Ответить С цитатой В цитатник
Комментировать — К дневнику — Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку


О проекте