|
|
|
|
Урок 9. Ссылки Автор: Андрей Краснокутский Дата: 2009-01-30 Что такое ссылка? Как ссылку прописать в коде?Вы никогда не задумывались: Почему путешествовать в сети Интернет с одного сайта на другой (или по разным web-страницам одного сайта) можно очень легко? Для перехода нужно просто кликнуть на нужную ссылку, и Вы на новом сайте. Это происходит так легко и просто благодаря ссылкам. Текст ссылки, как правило, выделяется цветом (обычно ярко синего цвета) и оформляется нижним подчеркиванием (но не всегда). Ссылки в HTML позволяют связать текст или изображения с другими гипертекстовыми документами и позволяют переходить с одной веб-страницы на другую. Особенность ссылок состоит в том, что сама ссылка может вести не только на HTML-файлы, но и на файл любого типа, например на изображения, на музыкальные файлы, на видеофайлы и т.д. Причем этот файл может размещаться на другом сайте, а сайт может находится совсем в другой стране. Иными словами, если путь к файлу можно указать в адресной строке браузера, и файл при этом будет открыт, то на него всегда можно сделать ссылку. Общий синтаксис создания ссылок Вы видите в Листинге 9.1 (он одинаков для создания ссылок на любые файлы). Листинг 9.1
Где: URL – это адрес сайта или имя файла и путь до этого файла, если файл лежит на этом же сервере. Тег <a href> "говорит" браузеру, что данное равыражение - это ссылка. Этот тег парный поэтому его необходимо закрыть: </a>. Теги: <a href="URL"> и </a> посетитель web-страницы не видит, ему видна только надпись: текст ссылки. Эта надпись называется: якорь ссылки. Естественно каждая ссылка имеет свой якорь.
Абсолютные и относительные ссылкиРазличают два разных вида ссылок: 1. Абсолютные ссылки – это ссылки, которые ведут к файлам, находящимся на другом сервере и под другим доменным именем. Такие ссылки должны обязательно начинаться с указания протокола, например: http://.... И обязательно содержать полное имя сайта и web-страницы или файла, на который следует перейти (открыть). Например, код абсолютной ссылки Листинг 9.2. Листинг 9.2
А вот что видит посетитель сайта на экране монитора заходя на сайт: Сервис моментальной регистрации доменов.
А при нажатии, например на ссылку: Выбрать доменную зону. Узнать стоимость регистрации доменных имён зонах: .RU, .РФ и других международных зонах. Листинг 9.3
Посетитель попадет на сайт: LuksDomen.ru на страницу: prise.php и узнает стоимоcть регистрации доменного имени в интересующей его зоне. Код данной ссылки приведен в Листинге 9.3.
2. Второй вид ссылок – это Относительные ссылки. Эти ссылки ведут на файлы, которые расположенны на вашем же сервере. Относительные ссылки ведут отсчет от корня сайта или текущего документа. Например, ваш файл index.html, лежит в корневой папке на сервере. В этой же папке лежит другой файл с именем tex_opis.html. Чтобы перейти на этот файл (открыть данный web-документ) относительная ссылка будет иметь вот такой синтаксис: Листинг 9.4
Можно добавить в ссылку некоторые необязательные атрибуты, например: target="blank" - открыть web-страницу в новом окне браузера; title="Технические характеристики автомобиля" - Текст подсказки, который будет появляться при наведении мышки на гиперссылку. И окончательный (полный) синтаксис ссылки будет иметь вид: Листинг 9.5
Естественно для того, чтобы 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? Специальная оценка условий труда (СОУТ). Платежная система Яндекс.Деньги.
Просмотров: 33814 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Александр Оба файла (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> Добавить Ваш комментарий: |
Новости сайта Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |