Урок 9. Ссылки
Автор: Андрей Краснокутский
Дата: 2009-01-30 Что такое ссылка? Как ссылку прописать в коде?
Вы никогда не задумывались: Почему путешествовать в сети Интернет с одного сайта на другой (или по разным web-страницам одного сайта) можно очень легко? Для перехода нужно просто кликнуть на нужную ссылку, и Вы на новом сайте. Это происходит так легко и просто благодаря ссылкам.
Текст ссылки, как правило, выделяется цветом (обычно ярко синего цвета) и оформляется нижним подчеркиванием (но не всегда). Ссылки в HTML позволяют связать текст или изображения с другими гипертекстовыми документами и позволяют переходить с одной веб-страницы на другую.
Особенность ссылок состоит в том, что сама ссылка может вести не только на HTML-файлы, но и на файл любого типа, например на изображения, на музыкальные файлы, на видеофайлы и т.д. Причем этот файл может размещаться на другом сайте, а сайт может находится совсем в другой стране.
Иными словами, если путь к файлу можно указать в адресной строке браузера, и файл при этом будет открыт, то на него всегда можно сделать ссылку.
Общий синтаксис создания ссылок Вы видите в Листинге 9.1 (он одинаков для создания ссылок на любые файлы).
Листинг 9.1
<a href="URL">текст ссылки</a>
|
Где:
URL – это адрес сайта или имя файла и путь до этого файла, если файл лежит на этом же сервере. Тег <a href> "говорит" браузеру, что данное равыражение - это ссылка. Этот тег парный поэтому его необходимо закрыть: </a>.
Теги: <a href="URL"> и </a> посетитель web-страницы не видит, ему видна только надпись: текст ссылки. Эта надпись называется: якорь ссылки. Естественно каждая ссылка имеет свой якорь.
Абсолютные и относительные ссылки
Различают два разных вида ссылок:
1. Абсолютные ссылки – это ссылки, которые ведут к файлам, находящимся на другом сервере и под другим доменным именем. Такие ссылки должны обязательно начинаться с указания протокола, например: http://.... И обязательно содержать полное имя сайта и web-страницы или файла, на который следует перейти (открыть). Например, код абсолютной ссылки Листинг 9.2.
Листинг 9.2
<a href="http://www.luksdomen.ru">Сервис моментальной регистрации доменов.</a>
|
А вот что видит посетитель сайта на экране монитора заходя на сайт:
Сервис моментальной регистрации доменов.
Такая ссылка называется: Абсолютной, и приведет пользователя, если он кликнет по ней на сервис регистрации доменных имен, расположенный совсем на другом сервере, при этом пользователь попадет на индексную - главную страницу сайта: index.html (index.php), которая открывается по умолчанию.
А при нажатии, например на ссылку: Выбрать доменную зону. Узнать стоимость регистрации доменных имён зонах: .RU, .РФ и других международных зонах.
Листинг 9.3
<a href="http://www.luksdomen.ru/prise.php" target="_blank">Выбрать доменную зону. Узнать стоимость регисрации доменного имени зонах: .RU, .РФ и других международных зонах.</a>
|
Посетитель попадет на сайт: LuksDomen.ru на страницу: prise.php и узнает стоимоcть регистрации доменного имени в интересующей его зоне. Код данной ссылки приведен в Листинге 9.3.
2. Второй вид ссылок – это Относительные ссылки. Эти ссылки ведут на файлы, которые расположенны на вашем же сервере. Относительные ссылки ведут отсчет от корня сайта или текущего документа. Например, ваш файл index.html, лежит в корневой папке на сервере. В этой же папке лежит другой файл с именем tex_opis.html. Чтобы перейти на этот файл (открыть данный web-документ) относительная ссылка будет иметь вот такой синтаксис:
Листинг 9.4
<a href="tex_opis.html”>Технические характеристики автомобиля</a>
|
Можно добавить в ссылку некоторые необязательные атрибуты, например:
target="blank" - открыть web-страницу в новом окне браузера;
title="Технические характеристики автомобиля" - Текст подсказки, который будет появляться при наведении мышки на гиперссылку.
И окончательный (полный) синтаксис ссылки будет иметь вид:
Листинг 9.5
<a href="tex_opis.html” target="blank" title="Технические характеристики автомобиля">Технические характеристики автомобиля</a>
|
Естественно для того, чтобы web-страница, на которую ведет ссылка открылась, она обязательно должна существовать, поэтому давайте создадим еще одну страничку (механизм точно такой же и при создании страницы index.html) и назовем этот файл tex_opis.html. Пускай в этом файле будут действительно технические характеристики автомобиля.
Если у Вас возникли вопросы по созданию этого файла (tex_opis.html), просмотрите предыдущие уроки.
Пример того, что у Вас должно получиться лежит здесь.
Ссылка на другую web-страницу, о которой мы с Вами говорили выше (tex_opis.html) добавлена в самом конце страницы index.html. Ссылка рабочая и ведет на страницу tex_opis.html. Так как это у нас с Вами учебные файлы я не стал полностью оформлять эту страницу, добавил только заголовок и обратную ссылку на главную страницу т.е. назад на index.html. Ну а Вы уж потренируйтесь сами.
Всего Вам доброго.
Обновлено: 07.10.2014 г.
Читайте также:
Как добавить кнопки социальных сетей на сайт?
Что такое QR-код? Для чего нужен QR-код?
Как обналичить деньги заработанные в Google AdSense?
Специальная оценка условий труда (СОУТ).
Платежная система Яндекс.Деньги.
Просмотров: 33258
Оба файла (index.html и tex_opis.html) находятся на рабочем столе, ссылка работает, но в открывающимся окне сообщение: "невозможно отобразить страницу".
Где ошибка??? :(
Мне нравятся такие вопросы.... Как же можно что то советовать не видя Вашего кода и того что Вы пишите. Извините я не волшебник... :)
У меня тоже при переходе(index.html и tex_opis.html)пишет фаил не найден и на оборот при переходе на главную страницу тоже самое. Я их соединить не могу.А у тебя указана ссылка, а ты попробуй сам с компа.
Или проверь написание Урок9 ссылки.
Я нашла выход.Ребята я нашла выход.Выходите в интернет index.html в компе,потом выделяете в самом верху где эта папка находится и копируете в tex_opis.html. В то место где указываете путь.А потом наоборот.
Привет. Не подскажешь плиз как сделать так, чтобы при нажатии на видеофрагмент открывалась любая моя страничка htm.
немного усложнил и объединил картинку из прошлого урока с ссылкой, картинки и ссылки придумал свои-работает как надо, вот код: <a href="http:/yandex.ru" target="_blank"><img src="23.png" border="0" align="top" alt="старт" hspace="10" name="старт" title="старт"></a>
жалко картинку не могу показать_((
Чтобы всё открывалось, посмотрите, чтобы кавычки все были одинаковые. У Андрея кавычки разные!
А, вообще, уроки отличные. Андрей, СПАСИБО!
Андрей, классные уроки, так почитать хочется, но почему-о мне попал урок № 9, подскажите, а где можно посмотреть № 1-8.
С уважением...................Я)
понравились уроки все просто и легко, ребята у кого не переходит по ссылке на свою веб страницу, проблема в том что вы не закрыли эту самую стр в проге где делаете сайт)) иначе и быть не может)
Андрей вопрос, а как сделать что бы ссылка на др стр была не подчеркнута?
Убрать подчеркивание ссылок можно с помощью CSS: http://www.luksweb.ru/view_post.php?id=294
Скажите,а как сделать чтоб нажатие на одну ссылку отображалась не одна картинка , а несколько?
--
Давал ссылку прямо на папку с картинками которая лежит в том каталоге где index.html , но на браузере отображается дерево ссылок на картинки (типа в тотал комендере). А я хочу, чтоб сразу отображало картинки.
--
заранее спасибо
Володимиру. Каждая ссылка ведет на конкретный документ, web-страницу, графический файл (картинку) и т.д. Насколько я понял, Вам требуется на одной web-странице показать несколько картинок (графических файлов). Так сделайте отдельную web-страницу и разместите на ней одни картинки, примерно ка здесь: http://www.luksweb.ru/files/181208/index8.php , но без текста. Как добавлять изображения посмотреть можно здесь: http://www.luksweb.ru/view_post.php?id=8
Скажите, можно ли в html коде сделать ссылку на php страницу и будет ли она корректно работать? Спасибо.
Ссылку можно слелать абсолютно на любую страницу в том числе и на PHP. Взгляните в адресную строку браузера, web-страница на которой вы сейчас находитесь, как раз и является PHP. Ее ссылка имеет вид: http://www.luksweb.ru/view_post.php?id=21 . Это Вы можете увидеть в адресной строке браузера.
в уроке из за того что кавычки разные "tex_opis.html” ссылка не работает! Нужно делать одинаковые " и все будет работать!
При переходе на Главую пишет, что не найдена веб-страница. Подскажите, где ошибка?<a href="index. html"target="blank"title "Автомобили со всего мира">Главная страница</a>
Ирина. В адресе (URL)ошибка: index. html после точки, уберите пробел!
Андрей, Вы умничка, супер. Все получилось. Я тоже живу в Смоленске. Смотрела ролики Жени Попова, Дм.Исаенко,Ольги Туровой, тоже хорошо, но не все понятно. Ваши уроки лучше всех.
Здравствуйте,Андрей. Как ссылку на другую страницу поместить непосредственно под фото (куда захотел?)Сергей
Сергей, не понял ваш вопрос, что значит куда захотел??? Фото - это один объект, ссылка другой. Размещайте их как Вам нужно...
Сергей, не понял ваш вопрос, что значит куда захотел??? Фото - это один объект, ссылка другой. Размещайте их как Вам нужно...
Андрей,переформулирую вопрос:как добиться,чтобы текст правильно обтекал рисунки и они не сдвигались с места на место. То же со ссылками. С уважением, Сергей.
Андрей,прискорбно,что своим друзьям не отвечаете.
Сергей.Используйте атрибут: align="..." с различными значениями (в кавычках). Подробнее смотрите здесь: http://www.luksweb.ru/view_post.php?id=3 и здесь http://www.luksweb.ru/view_post.php?id=8
Ссылка появилась, но файл не найден, Возможно он был пермещен или удален!
<a href="tex_opis.html” target="blank" title="Технические характеристики автомобиля">Технические характеристики автомобиля</a>
<a href="http://www.luksdomen.ru">Сервис моментальной регистрации доменов.</a>
|