Как сделать гиперссылку на страницу сайта


Как сделать гиперссылку на страницу сайта

Как сделать гиперссылку на страницу сайта

Как сделать гиперссылку на страницу сайта



В этом браке нас было трое. А я не люблю толпы.
Принцесса Диана.

ссылки в html

    Главным признаком HTML-документа является наличие в нём гиперссылок (или просто ссылок) на другие документы, сайты, файлы, картинки и т.д. Именно возможность вставлять в страницы ссылки на объекты вне неё и сделала Интернет столь популярным и удобным для использования. Поэтому при создании своего сайта всегда помни про «магию» ссылок.

    В этом уроке мы поговорим о том, как создать ссылку на сайт, на его отдельную страницу или файл. Ты узнаешь о том, как изменить текст ссылки, как открыть её в новом окне, как сделать ссылкой картинку, что такое внешние и внутренние ссылки и многое другое. Плюс, у тебя уже есть информация о работе с ссылками, которой мы касались в прошлых уроках (например, о том, как можно поменять цвет ссылки мы говорили в ).

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


Содержание урока:

§ 1. Ссылка на файл, ссылка на сайт, ссылка на страницу

    Многочисленные вопросы о том, чем отличается ссылка на файл от ссылки на сайт или его отдельную страницу, вынудили меня вынести ответ на него в самое начало этого урока. Ответ такой: ничем. Все перечисленные ссылки являются внешними по отношению к исходной странице и создаются одним и тем же способом.

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

    Итак, код ссылки на сайт выглядит так:

< a href="http://www.seoded.ru/">Ссылка на сайт< /a>

    В браузере мы увидим вот что:

    Код ссылки на страницу выглядит так:

< a href="http://www.seoded.ru/beginner.html">Ссылка на страницу< /a>

    В браузере мы увидим вот что:

    Код ссылки на файл выглядит так:

< a href="http://www.seoded.ru/downloads/soft/colortfinal1.5.rar">Ссылка на файл< /a>

    В браузере мы увидим вот что:

    Как видишь, все типы ссылок создаются абсолютно одинаково. Разница только в адресе объекта, на который нужно сослаться. А теперь перейдём к основной части урока.

§ 2. Создание внешних ссылок

    Между собой ссылки различаются на внешние и внутренние, а также на текстовые и графические. Внешние ссылки ведут за «пределы» html-страницы, внутренние на различные части этой же страницы. Текстовые ссылки представляют из себя текст (по-умолчанию, он выделен синим цветом и подчёркнут), а графические, в качестве объекта, по которому нужно щелкнуть для перехода, содержат какую-либо картинку. Все эти разновидности ссылок создаются в HTML с помощью тега < A>< /A> (сокращение от англ. anchor — якорь). Рассмотрим его поподробнее.

    Для создания внешней ссылки на сайт, страницу или файл служит атрибут тега < A>href. В качестве значения этот атрибут принимает URL-адрес сайта, страницы или файла (об этом мы говорили выше). Между тегами < A> и < /A> располагается видимая часть ссылки (анкор ссылки), т. е. то, что мы видим на экране браузера. Анкор ссылки может быть как обычным текстом (текстовая ссылка), так и графическим изображением (ссылка-картинка). Ссылка-картинка создаётся вставкой знакомого нам тега < IMG> между тегами < A> и < /A>. В общем, синтаксис создания ссылки выглядит так:

< a href="URL-адрес или имя файла">текст ссылки (анкор)< /a>

    Например, чтобы создать текстовую ссылку на главную страницу этого сайта, нужно написать следующий HTML-код:

< a href="http://www.seoded.ru/">Главная страница сайта Seoded.ru< /a>

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

    Как я писал в самом начале этого урока, цвет текста ссылок (анкора) можно изменить с помощью . Вообще, к тексту ссылок можно применять все те же , что и к основному тексту страницы, т. е. выделять жирным, курсивом, использовать заголовки и т. д.

§ 2.1 Графические ссылки (ссылки-картинки)

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

< a href="http://www.seoded.ru/">< img src="logo.jpg">< /a>

    А браузер покажет:

Как создать ссылку в HTML?

    По-умолчанию, браузер окружает картинку в графической ссылке рамкой. Если это нежелательно, то атрибуту border тега IMG нужно присвоить значение 0:

< a href="http://www.seoded.ru/">< img src="logo.jpg" border="0">< /a>

    Текстовые и графические ссылки можно комбинировать. Если написать:

< a href="http://www.seoded.ru/">< img src="logo.jpg"> Главная страница< /a>

, то ссылкой будет как картинка, так и текст «Главная страница»

§ 3. Внутренние ссылки

    Для комфортного перемещения по страницам с большим количеством контента используются внутренние ссылки. Именно с их помощью я сделал «Содержание урока» (см. в начале этой страницы). Внутренние ссылки создаются по тому же принципу, что и внешние. Только в значении атрибута href указывается якорь ссылки. Якорь создается атрибутом name:

< a name="имя якоря">текст< /a>

    Имя якоря задается произвольно. Тут стоит сказать, что не все браузеры понимают русские имена якорей, поэтому рекомендую использовать латиницу. Текст между тегами < A>< /A> для создания якоря не обязателен и чаще всего не указывается.

    Якорь располагается в тех местах страницы, в которые должен попасть пользователь после щелчка по ссылке.

    Как я уже сказал выше, в атрибуте href внутренней ссылки вместо адреса указывается имя нужного якоря с обязательным символом решётки (#) перед ним. Разберём на примере.

    Я создал якорь с именем zagolovok и разместил его рядом с заголовком этого урока («Гиперссылки в HTML»). Код якоря следующий:

< a name="zagolovok">< /a>

    HTML-код внутренней ссылки будет выглядеть так:

< a href="#zagolovok">К заголовку< /a>

, а в браузере так:

    После щелчка по этой ссылке, ты попадёшь к заголовку этого урока.

    Если ты заметил, то после перехода по внутренней ссылке к заголовку изменился URL-адрес в адресной строке браузера:

внутренние ссылки

    К изначальному адресу:

http://www.seoded.ru/beginner/html/giperssilki.html

    Добавилась внутренняя ссылка:

http://www.seoded.ru/beginner/html/giperssilki.html#zagolovok

    Используя эту особенность, можно ссылаться на определённое место страницы с любого ресурса в Интернете! Т. е., допустим, ты создал страницу с объёмной статьёй о чём-то (или выложил на странице большое число фотографий) и разметил её внутренними ссылками. Находясь в , тебе потребовалось сослаться не просто на страницу со статьёй (или фотографиями), а на определённое место на ней (или определённую фотографию). Используя вариант с внутренней ссылкой в адресе, ты с лёгкостью добьёшься нужного.

§ 4. Абсолютные и относительные ссылки

    Также ссылки бывают абсолютными и относительными. Абсолютная ссылка — это обычная ссылка вида:

< a href="http://www.site.ru/">Главная страница< /a>

    А вот с относительными ссылками немного посложнее. В таких ссылках адрес указывается либо относительно корневой папки сайта (той, в которой лежит главная страница), либо относительно исходной страницы. Такие ссылки нужны, например, в том случае, если сайт лежит на домашнем компьютере. Или это не сайт, а страница-указатель на другие документы.

    Разберём сначала создание ссылки относительно корневой папки сайта.

    Допустим нам нужно сослаться на страницу klienty.html, которая лежит в одной папке с главной страницей сайта. Тогда код относительной ссылки примет вид:

< a href="/klienty.html">Клиенты< /a>

    А теперь предположим, что в одной папке с главной страницей лежит папка zakazy и уже в ней лежит страница klienty.html Тогда код относительной ссылки станет таким:

< a href="/zakazy/klienty.html">Клиенты< /a>

    Т. е. при формировании ссылки относительно корневой папки сайта мы опускаем начальную часть адреса http://www.site.ru и оставляем всё остальное. Использование слеша «/» в начале обязательно!

    Теперь рассмотрим создание гиперссылок относительно исходной страницы. Допустим, у нас есть страница price.html (исходная страница) и с неё нужно сослаться на страницу klienty.html Тут бывают следующие типовые варианты:

  • 1. Страницы price.html и klienty.html находятся в одной папке.

    Тогда код ссылки будет таким:

    < a href="klienty.html">Клиенты< /a>


  • 2. Страница klienty.html и папка zakazy находятся в корневой папке сайта, страница price.html лежит в папке zakazy (т. е. страница klienty.html относительно исходной страницы price.html лежит на один уровень выше).

    Код станет таким:

    < a href="../klienty.html">Клиенты< /a>

    Две точки показывают, что нужно выйти из текущей папки на уровень выше.


  • 3. Страница klienty.html и папка zakazy находятся в корневой папке сайта, папка mebel лежит в папке zakazy, страница price.html лежит в папке mebel (т. е. страница klienty.html относительно исходной страницы price.html лежит на два уровня выше).

    Код ссылки примет вид:

    < a href="../../klienty.html">Клиенты< /a>

    Т. е. каждый уровень обозначается двумя точками и слешем «/».


  • 4. Страница price.html (исходная страница) и папка zakazy находятся в корневой папке сайта, страница klienty.html лежит в папке zakazy (т. е. теперь страница klienty.html относительно исходной страницы price.html лежит на один уровень ниже).

    Теперь код ссылки будет таким:

    < a href="zakazy/klienty.html">Клиенты< /a>

    В этом случае точки и слеши не ставятся.


  • 5. Страница price.html (исходная страница) и папка zakazy находятся в корневой папке сайта, папка mebel лежит в папке zakazy, страница klienty.html лежит в папке mebel (т. е. теперь страница klienty.html относительно исходной страницы price.html лежит на два уровня ниже).

    Код ссылки такой:

    < a href="zakazy/mebel/klienty.html">Клиенты< /a>


  • 6. В корневой папке сайта лежат две папки: zakazy и oplata. Страница klienty.html лежит в папке zakazy, исходная страница price.html лежит в папке oplata (т. е. обе страницы лежат в разных папках на уровень ниже от корневой папки сайта).

    Код ссылки станет следующим:

    < a href="../zakazy/klienty.html">Клиенты< /a>

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

§ 5. Ссылка на электронную почту

    Для того, чтобы создать ссылку на электронную почту, нужно вместо URL-адреса в значении атрибута href написать адрес электронной почты с указанием протокола (mailto:). И тогда при щелчке по такой ссылке откроется окно почтовой программы с вписанным в поле «Кому» адресом электронной почты. В HTML-коде это выглядит так:

< a href="mailto:">Моя почта< /a>

, а в браузере так:

§ 6. Атрибуты тега «A»

    У тега < A>, как и у остальных тегов в HTML, есть свои атрибуты. Рассмотрим некоторые из них.

§ 6.1 Атрибут target

    По-умолчанию, браузер при переходе по ссылке открывает страницу в этом же окне. Чтобы изменить это, используется атрибут тега A target. Он имеет следующие значения:

  • _blank — открывает ссылку в новом окне (в в новой вкладке).

    _parent — загружает ссылку в родительском окне.

    _self — по умолчанию. Открывает ссылку в этом же окне.

    Это не все значения атрибута target, но это самые основные. Пример использования этого атрибута:

< a href="http://www.seoded.ru/" target="_blank">Главная страница< /a>

§ 6.2 Атрибут title

    В теге < A> можно также использовать атрибут title. С его помощью создаётся всплывающая подсказка, которая появляется при наведении мыши на ссылку.

< a href="http://www.seoded.ru/" title="Перейти на главную страницу">Главная страница< /a>

§ 7. Заключение

    Это основные сведения о создании ссылок в HTML. На этом данный урок можно считать законченным. А сей факт говорит о том, что большую часть основ HTML ты уже освоил.

    Рекомендую тебе сейчас ещё раз пробежаться по предыдущим разделам, а затем создать полноценную HTML-страницу, посвященную, например, тебе любимому. По твоему дизайну и сообразно твоим желаниям. После чего выложить её на какой-нибудь (конечно, если у тебя есть , то на него) и уже полноценно полюбоваться на свой первый сайт.

    Можешь показать его друзьям или ещё кому. В общем, почувствовать себя сайтовладельцем. А затем, после небольшого загула по случаю такого события, переходить к следующему разделу, в котором я расскажу тебе о создании таблиц в HTML.

    И это уже будет первый шаг на пути к превращению личной странички в серьёзный ресурс.

   


⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

    С уважением, (, , , , , ).


Источник: http://www.seoded.ru/beginner/html/giperssilki.html


Как сделать гиперссылку на страницу сайта

Как сделать гиперссылку на страницу сайта

Как сделать гиперссылку на страницу сайта

Как сделать гиперссылку на страницу сайта

Как сделать гиперссылку на страницу сайта

Как сделать гиперссылку на страницу сайта

Как сделать гиперссылку на страницу сайта

Как сделать гиперссылку на страницу сайта

Похожие новости:






[/SHORT_NEWS_LAST]
Страници: 1 2 3 > >>