Сегодня: 26 апреля 2024 г., пятница Время:

Online-учебник по HTML

Автор учебника: Евгений Андросов

Урок 7. Ссылки

Ссылки – это переходы с одной Интернет-страницы на другую, с одного сайта на другой.

Для создания ссылки используется все тот же всемогущий тег. Простой тег с одним элементом и одним атрибутом - и вы можете перейти куда угодно. Вот пример того, как может выглядеть ссылка на главную страницу этого проекта:

<a href="http://www.freeadvice.ru">"Бесплатные советы"</a>

В браузере она будет выглядеть так:

"Бесплатные советы"

Тег <a> обозначает «якорь» (от англ. anchor). Атрибут "href" - это сокращение от "hypertext reference/гипертекстовая ссылка", указывающий место, на которое выполняется переход по данной ссылке - обычно это Интернет-адрес или имя файла в корневом каталоге сайта (об этом чуть ниже).

В примере атрибут href имеет значение "http://www.freeadvice.ru", которое является полным адресом сайта и называется URL (Uniform Resource Locator - универсальный локатор ресурса). Обратите внимание, что"http://" всегда должно входить в состав URLов. Слова "Бесплатные советы" - это текст, который показывается в браузере как ссылка. При создании ссылки, не забудьте закрыть тэг </a>.

Если ваш сайт состоит из нескольких страниц, а чаще всего так и бывает, вы можете делать ссылки между этими страницами, не указывая полный адрес (URL) документа. Например, если у вас две страницы (назовём их index.html и page.html), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке. То есть ссылка с index.html на page.html будет выглядеть так:

<a href="page.html">Кликните по этой ссылке для перехода на страницу page</a>

Если файл page.html расположен не в корневой директории сайта, а в одной из его дополнительных папок, например, в папке "additional", ссылка выглядит так:

<a href="additional/page.html">Кликните по этой ссылке для перехода на страницу page</a>

Альтернативно, вместо имени файла, вы всегда можете указать полный адрес файла (URL).

Ссылки внутри страницы

Вы можете также создавать ссылки-переходы внутри самой страницы - например, оглавление со ссылками на главы. Всё, что вам необходимо - использовать атрибут id и символ "#".

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

<h1 id="top">Начало страницы</h1>

Теперь нужно создать ссылку на этот элемент с помощью знака "#" в атрибуте ссылки. Знак "#" сообщает браузеру, что это переход на той же самой странице. После "#" должно следовать имя, которое вы дали атрибуту id, на который выполняется переход. Например:

<a href="#top">Перейти к началу страницы</a>

(Примечание: имя атрибута id обязательно должно начинаться с буквы!)

Пример ссылки на начало страницы вы можете увидеть в действии в каждом из этих уроков. Обратите внимание: в конце каждого урока стоят четыре ссылки. Так вот ссылка "К началу урока" и есть та самая - с атрибутом "id", который добавлен в тег заголовка урока - именно с него начинается страница, если вы нажимаете на ссылку.

Вы можете также сделать ссылку на e-mail адрес почти так же, как и ссылку на документ:

<a href="mailto:webmaster@freeadvice.ru">Написать веб-мастеру сайта</a>

В браузере это будет выглядеть так:

Написать веб-мастеру сайта

Единственное отличие в ссылках на e-mail и на файл состоит в том, что вместо адреса документа, вы записываете кодовое слово «mailto» с последующим адресом электронной почты (e-mail). При щелчке по ссылке открывается программа "по умолчанию" для работы с электронной почтой с адресом, уже записанным в адресной строке письма. Обратите внимание, что эта функция будет работать только в том случае, если на вашем компьютере установлена e-mail программа – Microsoft Outlook, The Bat или любая другая. Попробуйте!

Для создания ссылки обязательно должен использоваться атрибут href. Кроме того, в ссылку можно поместить дополнительный атрибут "title":

В браузере это будет выглядеть так:

Учим HTML

Атрибут "title" используется для краткого описания ссылки. Если вы, не щёлкая мышью, поместите её указатель над ссылкой, вы увидите, как появится текст "Учим HTML с помощью online-учебника и создаем сайты самостоятельно!"

Предыдущий урок | К началу урока | К оглавлению | Следующий урок

Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментарий добавил(а): Евгений Андросов
Дата: 08.02.2015

Олег, насколько я знаю, никак. Я не очень в курсе, что там у Одноклассников - не пользуюсь этой сетью, но практически все социальные сети не дают возможности размещать фотографии-ссылки.

Комментарий добавил(а): Олег
Дата: 08.02.2015

Подскажите, как сделать, чтобы на моей страничке в одноклассниках нажимающие на фото из моего альбома людей перекидывало на другой сайт по моей ссылке?

Комментарий добавил(а): Евгений Андросов
Дата: 16.10.2014

Денис! Письмо по ссылке типа mailto сформируется автоматически, но текст все равно придется писать клиенту. За него можно лишь прописать тему письма, делается это следующим образом: <a href="mailto:admin@site.ru?subject=заказать">Сделать заказ</a>. Можно сформировать письмо и более детально, куда клиент внесет лишь необходимые ему товары или другие данные, но это уже делается средствами более продвинутых языков программирования, например, php. С помощью html вы этого не сделаете.

Комментарий добавил(а): Евгений Андросов
Дата: 16.10.2014

Денис! В ссылке должен быть указан путь к pdf файлу, например: <a href="http://site.ru/docs/price.pdf">pdf-файл</a>. Однако, многие браузеры по такой ссылке не дают скачать файл, а открывают документ прямо в браузере. Если вы хотите, чтобы посетители сайта именно скачивали его, а не смотрели в браузере, pdf-файл нужно заархивировать и выложить в таком виде.

Комментарий добавил(а): Денис
Дата: 16.10.2014

Как сделать ссылку, чтобы клиент не писал письмо, а оно сформировалось автоматически (например: заказать).

Комментарий добавил(а): Денис
Дата: 16.10.2014

Как сделать ссылку чтобы можно было скачать PDF файл.

Комментарий добавил(а): Евгений Андросов
Дата: 06.08.2014

Специалист, не понял вашего вопроса. Опишите, что вы хотите более подробно и понятно.

Комментарий добавил(а): Специалист
Дата: 06.08.2014

ДД! когда нажимешь на текст переходит по ссылке, но теперь мне надо сделать на трех языках, когда сайт на англ текст должен быть на англ. как можно сделать? подскажите

Комментарий добавил(а): Aleksandr
Дата: 09.06.2014

Здравствуйте! Нужна ссылка перехода на другой сайт после просмотра рекламы. По две ссылке в одной я умею делать, а вот вышесказанную что то не соображу.

Комментарий добавил(а): Евгений Андросов
Дата: 17.01.2014

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

Комментарий добавил(а): Ашот
Дата: 17.01.2014

да делал через информер готовый, могу Вам ссылку сбросить если это как то поможет, еще пытался по способу RSS получается также.

Комментарий добавил(а): Евгений Андросов
Дата: 17.01.2014

Ашот, а как вы их хотите импортировать? Если с помощью готового информера, которые предоставляют некоторые крупные порталы (Яндекс, Рамблер, РБК и др.), то никак. Они специально зашивают код так, чтобы вы не смогли ничего изменить и пользователи от вас переходили к ним. Если же вы делаете это с помощью какого-то своего кода, то вам надо чтобы динамические страницы этих новостей физически присутствовали у вас на сайте, вы прописываете на них ссылки в заголовках и все.

Комментарий добавил(а): Ашот
Дата: 17.01.2014

Добрый день, можете мне помочь я на свой сайт хочу импортировать новости из другого сайта, у меня все получается, а как мне сделать чтобы когда на новость кликают, чтобы не уходили на другой сайт, а оставались на моем?

Комментарий добавил(а): Евгений Андросов
Дата: 10.01.2014

Бронислав, в в меню Internet Explorer пункт Инструменты (Tools) -> Свойства обозревателя -> Программы -> нажать на кнопку "Использовать по умолчанию".

Комментарий добавил(а): Бронислав
Дата: 10.01.2014

Как это сделать? Я пользуюсь Internet Explorer 8. Пожалуйста, опишите пошагово

Комментарий добавил(а): Евгений Андросов
Дата: 10.01.2014

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

Комментарий добавил(а): Бронислав
Дата: 10.01.2014

почему со ссылки, которую мне прислали в почту типа MS Office Outlok, не даёт переходить в сайт в интерете? вместо того, открывается таблица НАЙТИ БРАУЗЕР ДЛЯ ССЫЛОК

Комментарий добавил(а): Евгений Андросов
Дата: 19.12.2013

Роман, думаю, что у вас в браузере не прописана программа для открытия почтовых ссылок. Это можно сделать в настройках. Будет открываться либо почтовая программа, типа Outlook или The Bat, либо почта в браузере, типа Gmail или Яндекс почты, при условии, что вы в ней авторизованы.

Комментарий добавил(а): Роман
Дата: 19.12.2013

Да? Надо будет попробовать с другого компьютера зайти как общий пользователь. Потому что на моем открывается пустая страничка,но в адресной строке пишет mailto:avtonachinka@gmail.com.

Комментарий добавил(а): Евгений Андросов
Дата: 19.12.2013

Роман, не очень понял ваш вопрос. Адрес у вас действительно прописан верно, у меня при клике на адрес почты открывается почтовая программа с новым письмом - все, как и должно быть.

Комментарий добавил(а): Роман
Дата: 19.12.2013

Здравствуйте! Подскажите, пожалуйста, как настроить переход по ссылке на электронную почту. Открывает пустое окно. Адрес точно прописан верно. Но может почта неправильно настроена. Где конкретно ее надо посмотреть? Сайт avtonachinka.ru Заранее спасибо!

Комментарий добавил(а): Евгений Андросов
Дата: 08.11.2013

Елена! Вижу, что в начало адреса каждой такой ссылки вписано http://poleznogotovim.ru/goto/далее адрес ссылки. Чаще всего это делается автоматически скриптом, чтобы скрыть от индексирования ссылку, но сама ссылка при этом должна работать и переход должен осуществляться. В данном случае, думаю, это какой-то глюк скрипта WordPress, который, возможно, происходит из-за того, что некорректно установился плагин, либо происходит какой-то конфликт скриптов. Попробуйте удалить этот плагин. Если все станет нормально, можно будет попробовать установить его еще раз, скачав с другого источника. Если проблема возникнет снова, значит, дело точно в плагине, видимо, он конфликтует с вашей версией или сборкой WordPress.

Комментарий добавил(а): Елена
Дата: 08.11.2013

Интересно! В конце последней статьи есть ссылка ее источник, при переходе на который я получаю ответ Вы попытались получить доступ к адресу http://poleznogotovim.ru/goto/http://ruslekar.info/CHem-opasni-importnie-frukti-i-ovoshchi-1913.html, который сейчас недоступен. Также невозможно перейти на сайты комментаторов, нажимая на их фото, в ответ - та же история. Вчера установила плагин Secure WordPress, может в нем дело? Спасибо

Комментарий добавил(а): Евгений Андросов
Дата: 08.11.2013

Елена, здравствуйте! Я зашел к вам на сайт и не обнаружил ни одной не работающей ссылки. Можете написать для примера адреса страниц, где есть ссылки, по которым вы не можете перейти на другие сайты?

Комментарий добавил(а): Елена
Дата: 08.11.2013

Здравствуйте! Я автор сайта poleznogotovim.ru. Вчера обнаружила, что не могу по ссылкам на своем сайте за исключением ссылок на свои стать, т.е. на другие сайты, осуществить переход. Не могу ответить коллегам-кмментаторам, поскольку не осуществляется переход на их сайт. Такое впечатление. что сбилась какая-то настройка. Можете ли мне помочь, как выйти из этой ситуации? Спасибо

Комментарий добавил(а): Антон
Дата: 03.05.2013

Большое спасибо!!!

Комментарий добавил(а): Евгений Андросов
Дата: 08.03.2013

Антон! Конечно, можно. Помещаете текст в тег <div> или <span> и задаете цвет этого блока. Например:

<span style="color:red;">Пример изменения цвета текста</span>

И вот как это будет выглядеть: Пример изменения цвета текста

Комментарий добавил(а): Антон
Дата: 07.03.2013

Вопрос не по теме: в html можно задать цвет обычному тексту?

Комментарий добавил(а): Галина
Дата: 26.07.2012

Поняла! Большое спасибо! Буду пробовать.

Комментарий добавил(а): Евгений Андросов
Дата: 26.07.2012

Галина, этот учебник написан на PHP. Но при желании его можно сделать и при помощи HTML. Создаете несколько (да сколько угодно) отдельных страниц с уроками - каждый урок это отдельный файл, имеющий свой адрес. Удобнее для этого создать отдельную папку в корне сайта и назвать ее, например, lessons. А в нее помещать создаваемые страницы уроков - lesson1.html, lesson2.html, lesson3.html и т.д. А потом создаете отдельную страницу оглавления, в которой названия уроков делаете ссылками на страницы этих уроков. Ну а ссылку на страницу оглавления даете в навигации сайта. Получается, что учебник - это отдельный раздел сайта, на который можно попасть из навигации, но только на страницу оглавления. А из оглавления уже попасть на отдельные уроки.

Комментарий добавил(а): Галина
Дата: 26.07.2012

Вот как! Здорово! И как это сделать? Как привязать только к оглавлению? Меня интересует, как сделать подобный учебник. Буду признательна за консультацию.

Комментарий добавил(а): Евгений Андросов
Дата: 26.07.2012

Галина! Урок является частью учебника, поэтому он привязан только к оглавлению учебника, с других страниц на него ссылок нет.

Комментарий добавил(а): Галина
Дата: 26.07.2012

Про браузер я поняла, спасибо. Но через меню навигации урок можно найти? Он привязан к какой-то рубрике или страницам? Если нет, то как это сделать?

Комментарий добавил(а): Евгений Андросов
Дата: 25.07.2012

Галина! Зайти на Урок 7 можно как с оглавления учебника по ссылке, так и набрав адрес страницы в адресной строке браузера. Откройте пустую страницу в браузере и наберите в адресной строке браузера http://www.freeadvice.ru/view_manual.php?id=8 - вы попадете на страницу урока.

Комментарий добавил(а): Галина
Дата: 25.07.2012

Благодарю за диалог. Возможно что-то я не понимаю. Евгений, ваша страница оглавление имеет адрес http://www.freeadvice.ru/html_manual.php, а, например, ссылка на урок 7 http://www.freeadvice.ru/view_manual.php?id=8. И зайти на урок 7 можно только с «Online-учебник по HTML». Или я ошибаюсь? Урок7 и другие не видны из меню Навигации, они доступны только по ссылкам?

Комментарий добавил(а): Е
Дата: 24.07.2012

Галина!
С первой частью вопроса все элементарно: делаете слова супы, мясо и т.д. ссылками на нужные страницы. С одной страницы можно сделать хоть миллион ссылок на миллион страниц - проблемы нет. Каждая отдельная ссылка ведет на нужную страницу. Меню любого сайта - это и есть набор ссылок на разные разделы и страницы сайта.
По второй части вопроса могу сказать следующее: каждая созданная страница доступна для посетителей в двух случаях: если на нее ведет ссылка и если набрать адрес этой страницы в адресной строке браузера. То есть у каждой страницы есть свой адрес. Если она доступна по ссылке, значит на нее можно зайти и напрямую - по адресу. Сделать так, чтобы на страницу можно было зайти только по ссылке, а по адресу нельзя - невозможно.

Комментарий добавил(а): Галина
Дата: 24.07.2012

Доброе время! Подскажите, где можно прочитать ответ на следующий вопрос: "Евгений, помогите мне пожалуйста! Мне нужно сделать ссылку с одной страницы на несколько. Например: Со страницы "Горячие блюда" переходим на страницы "Супы", "Мясо", "Рыба", "Куры", ну и так далее. Но самое главное, чтобы на эти странички можно было выйти только со страницы "Горячие блюда" и чтобы больше нигде они не отображались. Мой сайт на Wordpress. Заранее благодарю."

Комментарий добавил(а): Павел
Дата: 25.05.2012

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

Комментарий добавил(а): Мария
Дата: 25.03.2012

У меня не получается переход по ссылке <a href=”18a.html”>Мой фотоальбом</a> ; пишет "ошибка 6 не найдена страница", но она сохранена в той же папке.

Комментарий добавил(а): Евгений Андросов
Дата: 03.02.2012

Юлия, значит дело в ссылке. Я могу сказать точно в чем дело, если вы дадите адрес страницы.

Комментарий добавил(а): Юлия
Дата: 03.02.2012

это я поняла, я не могу понять как именно нужно сделать эту ссылку. потому что я вроде ее создала, а когда нажимаю на нее никакого перехода не происходит я остаюсь на начальной странице!

Комментарий добавил(а): Евгений Андросов
Дата: 03.02.2012

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

Комментарий добавил(а): Юлия
Дата: 03.02.2012

помогите пожалуйста, я хочу на своем сайте создать галерею, как мне сделать переход на нее??

Комментарий добавил(а): Евгений Андросов
Дата: 08.12.2011

Дима! Я не очень понимаю ваш вопрос. Ссылка на сайте может вести куда угодно - на любой другой сайт или другую страницу сайта, по вашему усмотрению. Если вы хотите получить более развернутый и точный ответ, попробуйте точнее сформулировать свой вопрос.

Комментарий добавил(а): дима
Дата: 08.12.2011

я не понимаю куда применять эти ссылки, т.е. как создать сайт, мне придётся покупать ссылку для нового сайта или же пролсто вводить любую ссылку?

Комментарий добавил(а): Евгений Андросов
Дата: 04.11.2011

Алексей!
Адрес прописан правильно, смотрите, я скопировал ваш код и вставил сюда - здесь он работает:
1264695949_mgcamd_1.tar
Чтобы был переход по этой ссылке, нужно, чтобы была открыта почтовая программа, а также эта программа была указана в настройках браузера в качестве почтовой программы по умолчанию.

Комментарий добавил(а): Алексей
Дата: 04.11.2011

помогите пожалуйста :<br><a href="mailto:aleksvei_102986@mail.ru">1264695949_mgcamd_1.tar</a></br> не переходит на сылку по имайлу

Комментарий добавил(а): IRINA
Дата: 30.03.2011

Ссылка на другую страничку и на начало странички получилась!

Комментарий добавил(а): Инна
Дата: 26.08.2010

Евгений, помогите мне пожалуйста! Мне нужно сделать ссылку с одной страницы на несколько. Например: Со страницы "Горячие блюда" переходим на страницы "Супы", "Мясо", "Рыба", "Куры", ну и так далее. Но самое главное, чтобы на эти странички можно было выйти только со страницы "Горячие блюда" и чтобы больше нигде они не отображались. Мой сайт на Wordpress. Заранее благодарю.

Комментарий добавил(а): Юля
Дата: 20.04.2010

Жаль. Спасибо за ответ.

Комментарий добавил(а): Евгений Андросов
Дата: 19.04.2010

Юля! Вы имеете ввиду, что при нажатии на ссылку под ней появляются новые строки с ссылками? К сожалению, это нельзя сделать средствами HTML. Подобные вещи делаются либо с помощью технологии Flash (вываливающееся флеш-меню), либо с помощью Java Script.

Комментарий добавил(а): Юля
Дата: 19.04.2010

Подскажите пожалуйста, а как прописать ссылку в ссылке. Т.е. я нажимаю на ссылку "каталог" и не перескакиваю на другую страницу а вижу под ней еще 5 ссылок с перечислениями.

Комментарий добавил(а): Оксана
Дата: 09.04.2010

Евгений! Спасибо!

Комментарий добавил(а): Евгений Андросов
Дата: 06.04.2010

Оксана, мне кажется ошибка в пути к файлу - rukovodstvo%20kompanii.html Вы уверены, что так и должно быть? Я бы предположил, что адрес должен быть следующий http://nnpcto-da.narod2.yandex.ru/edit/o_kompanii/rukovodstvo/0kompanii.html"

Комментарий добавил(а): Оксана
Дата: 06.04.2010

Вот, пожалуйста, посмотрите. <H4><A href="http://nnpcto-da.narod2.yandex.ru/edit/o_kompanii/rukovodstvo%20kompanii.html"><EM>Руководство компании</EM></A></H4>

Комментарий добавил(а): Евгений Андросов
Дата: 05.04.2010

Оксана! Совершенно точно вы неправильно указываете адрес страницы в ссылке. Можете написать здесь полностью то, что вы пишете в html-коде? тогда я точно скажу в чем проблема.

Комментарий добавил(а): Оксана
Дата: 05.04.2010

Здравствуйте! У меня такая проблема.Я пытаюсь сделать ссылку с одной страницы на другую.На исходной странице есть слово,кликнув по которому я и хочу сделать переход на другую страницу. Делаю так, как вы описываете,но когда я начинаю просматривать то, что сделала, то кликнув по этому слову мне открывается окно, в котором пишут, что такой страницы не существует. ошибка 404. Подскажите, что делать, что я делаю не так.

Задать вопрос

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