Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Урок 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?

Специальная оценка условий труда (СОУТ).

Платежная система Яндекс.Деньги.

 

Просмотров: 23161


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Александр
Дата: 2010-01-03

Оба файла (index.html и tex_opis.html) находятся на рабочем столе, ссылка работает, но в открывающимся окне сообщение: "невозможно отобразить страницу". Где ошибка??? :(

Комментарии добавил(а): Андрей_К
Дата: 2010-01-04

Мне нравятся такие вопросы.... Как же можно что то советовать не видя Вашего кода и того что Вы пишите. Извините я не волшебник... :)

Комментарии добавил(а): Анастасия
Дата: 2011-01-06

У меня тоже при переходе(index.html и tex_opis.html)пишет фаил не найден и на оборот при переходе на главную страницу тоже самое. Я их соединить не могу.А у тебя указана ссылка, а ты попробуй сам с компа.

Комментарии добавил(а): Анастасия
Дата: 2011-01-06

Или проверь написание Урок9 ссылки.

Комментарии добавил(а): Анастасия
Дата: 2011-01-06

Я нашла выход.Ребята я нашла выход.Выходите в интернет index.html в компе,потом выделяете в самом верху где эта папка находится и копируете в tex_opis.html. В то место где указываете путь.А потом наоборот.

Комментарии добавил(а): Сергей
Дата: 2011-02-28

Привет. Не подскажешь плиз как сделать так, чтобы при нажатии на видеофрагмент открывалась любая моя страничка htm.

Комментарии добавил(а): игорь
Дата: 2011-03-06

немного усложнил и объединил картинку из прошлого урока с ссылкой, картинки и ссылки придумал свои-работает как надо, вот код: <a href="http:/yandex.ru" target="_blank"><img src="23.png" border="0" align="top" alt="старт" hspace="10" name="старт" title="старт"></a>

Комментарии добавил(а): игорь
Дата: 2011-03-06

жалко картинку не могу показать_((

Комментарии добавил(а): Елена
Дата: 2011-06-01

Чтобы всё открывалось, посмотрите, чтобы кавычки все были одинаковые. У Андрея кавычки разные!

Комментарии добавил(а): Елена
Дата: 2011-06-01

А, вообще, уроки отличные. Андрей, СПАСИБО!

Комментарии добавил(а): Галинка
Дата: 2011-10-02

Андрей, классные уроки, так почитать хочется, но почему-о мне попал урок № 9, подскажите, а где можно посмотреть № 1-8. С уважением...................Я)

Комментарии добавил(а): Юля
Дата: 2011-12-14

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

Комментарии добавил(а): АндрейК
Дата: 2011-12-16

Убрать подчеркивание ссылок можно с помощью CSS: http://www.luksweb.ru/view_post.php?id=294

Комментарии добавил(а): Володимир
Дата: 2013-03-24

Скажите,а как сделать чтоб нажатие на одну ссылку отображалась не одна картинка , а несколько? -- Давал ссылку прямо на папку с картинками которая лежит в том каталоге где index.html , но на браузере отображается дерево ссылок на картинки (типа в тотал комендере). А я хочу, чтоб сразу отображало картинки. -- заранее спасибо

Комментарии добавил(а): АндрейК
Дата: 2013-03-25

Володимиру. Каждая ссылка ведет на конкретный документ, web-страницу, графический файл (картинку) и т.д. Насколько я понял, Вам требуется на одной web-странице показать несколько картинок (графических файлов). Так сделайте отдельную web-страницу и разместите на ней одни картинки, примерно ка здесь: http://www.luksweb.ru/files/181208/index8.php , но без текста. Как добавлять изображения посмотреть можно здесь: http://www.luksweb.ru/view_post.php?id=8

Комментарии добавил(а): Виктория
Дата: 2013-04-07

Скажите, можно ли в html коде сделать ссылку на php страницу и будет ли она корректно работать? Спасибо.

Комментарии добавил(а): АндрейК
Дата: 2013-04-08

Ссылку можно слелать абсолютно на любую страницу в том числе и на PHP. Взгляните в адресную строку браузера, web-страница на которой вы сейчас находитесь, как раз и является PHP. Ее ссылка имеет вид: http://www.luksweb.ru/view_post.php?id=21 . Это Вы можете увидеть в адресной строке браузера.

Комментарии добавил(а): Сергей
Дата: 2013-06-07

в уроке из за того что кавычки разные "tex_opis.html” ссылка не работает! Нужно делать одинаковые " и все будет работать!

Комментарии добавил(а): Ирина
Дата: 2013-12-21

При переходе на Главую пишет, что не найдена веб-страница. Подскажите, где ошибка?<a href="index. html"target="blank"title "Автомобили со всего мира">Главная страница</a>

Комментарии добавил(а): АндрейК
Дата: 2013-12-22

Ирина. В адресе (URL)ошибка: index. html после точки, уберите пробел!

Комментарии добавил(а): Ирина
Дата: 2013-12-22

Андрей, Вы умничка, супер. Все получилось. Я тоже живу в Смоленске. Смотрела ролики Жени Попова, Дм.Исаенко,Ольги Туровой, тоже хорошо, но не все понятно. Ваши уроки лучше всех.

Комментарии добавил(а): Сергей
Дата: 2014-01-23

Здравствуйте,Андрей. Как ссылку на другую страницу поместить непосредственно под фото (куда захотел?)Сергей

Комментарии добавил(а): АндрейК
Дата: 2014-01-23

Сергей, не понял ваш вопрос, что значит куда захотел??? Фото - это один объект, ссылка другой. Размещайте их как Вам нужно...

Комментарии добавил(а): АндрейК
Дата: 2014-01-23

Сергей, не понял ваш вопрос, что значит куда захотел??? Фото - это один объект, ссылка другой. Размещайте их как Вам нужно...

Комментарии добавил(а): Сергей
Дата: 2014-01-24

Андрей,переформулирую вопрос:как добиться,чтобы текст правильно обтекал рисунки и они не сдвигались с места на место. То же со ссылками. С уважением, Сергей.

Комментарии добавил(а): Сергей
Дата: 2014-01-28

Андрей,прискорбно,что своим друзьям не отвечаете.

Комментарии добавил(а): АндрейК
Дата: 2014-02-07

Сергей.Используйте атрибут: align="..." с различными значениями (в кавычках). Подробнее смотрите здесь: http://www.luksweb.ru/view_post.php?id=3 и здесь http://www.luksweb.ru/view_post.php?id=8

Комментарии добавил(а): Дарья
Дата: 2016-06-06

Ссылка появилась, но файл не найден, Возможно он был пермещен или удален! <a href="tex_opis.html” target="blank" title="Технические характеристики автомобиля">Технические характеристики автомобиля</a>

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Видео Курс по созданию
Информационного Бизнеса в Интернете
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT