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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

border="0">

Главная страница

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

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

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

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

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

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

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

name="zagolovok">

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

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

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

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

http://www..html

http://www..html#zagolovok

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

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

Главная страница

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

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

/klienty.html">Клиенты

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

/zakazy/klienty.html">Клиенты

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

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

klienty.html">Клиенты




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

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

../klienty.html">Клиенты

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




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

../../klienty.html">Клиенты

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




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

zakazy/klienty.html">Клиенты

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




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

zakazy/mebel/klienty.html">Клиенты




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

../zakazy/klienty.html">Клиенты

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

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

mailto:[email protected]">Моя почта

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

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

title="Перейти на главную страницу">Главная страница

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

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

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

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

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

Как создавать ссылки в HTML документе

(Вы найдете больше примеров внизу этой страницы)

HTML Гиперссылки (Ссылки)

Тег может быть использован двумя способами:

1. Чтобы создать ссылку на другой документ - используя атрибут href
2. Чтобы сделать закладку внутри документа - используя атрибут name

HTML Синтаксис Ссылки

Пример

Посетите сайт

это отобразится браузером так:

HTML Ссылки - Атрибут Target

Атрибут target (назначение) указывает где открывать залинкованный (тот, на который ссылается ссылка) документ.

Пример ниже откроет залинкованный документ в новом окне браузера или на новой вкладке:

HTML Ссылки - Атрибут Name

Атрибут name используется для создания закладки ("якоря" / "анкера") внутри HTML документа.

Замечание:
Грядущий в обозримом будущем стандарт HTML5 предлагает использовать атрибут id вместо атрибута name для указания имени ссылки.
Использование атрибута id фактически работает и в HTML4 во всех современных браузерах.

Закладки не отображаются каким-либо специальным образом. Они не видимы для читателя.

Замечание: Всегда добавляйте замыкающий слэш к ссылкам на поддиретории. Если вы создаете ссылку так: href="http://сайт/html", то генерируется два запроса к серверу, сначала сервер добавляет слэш к адресу, и затем создает новый запрос: href="http://сайт/html/".

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

Совет: Если браузер не находит указанную именованную ссылку, он идет в начало документа. Никаких ошибок не возникает.

Гиперссылка (она же ссылка) - это соединение между двумя точками. Посетители сайта могут, щелкнув по ссылке, перейти туда, куда она ведет. Место назначения ссылки представляется в виде URL (Uniform Resource Locator – Унифицированный указатель ресурса). Ссылки могут указывать на текст, изображения и другие файлы (например, на документы Microsoft Office), а также на закладки внутри документов. В качестве гиперссылки может выступать любой объект находящийся на странице, например текст или картинки. Гиперссылка может быть локальной т.е. указывать на ресурс внутри текущего Web-узла или внешней указывающей на любой ресурс находящийся в Сети.

Рис 3.1. Диалоговое окно Создать ссылку

Вы можете быстро создать или отредактировать ссылку, выбрав нужный участок текста или картинку и нажав кнопку на панели инструментов (рис. 2.2.)

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

1. Ссылки на страницы сайта, открытого в данный момент. Если какой-либо сайт в данный момент открыт, то в диалоговом окне, рис. 3.3, вы увидите перечень всех страниц этого сайта, и на любую из них можно установить гиперссылку

3. Ссылки на адрес e-mail. Если вы хотите создать ссылку, которая позволяла бы посетителям вашего сайта отправить письмо по какому-либо конкретному адресу, то в этом случае вам необходимо ввести адрес электронной почты в поле Создать ссылку на URL адрес (рис. 3.2.) (Создать ссылку для отправки письма по электронной почте). Для того чтобы такая ссылка работала, вам достаточно просто ввести адрес получателя в текстовом поле и подтветдить ввод нажатием кнопки «Ок»

4. Ссылка на новую страницу. Данная возможность позволяет создать ссылку, указывающую на еще не созданную страницу. Нажатие на кнопку «Создать новую страницу » вызывает появление диалогового окна «Создать ссылку» рис. 3.3.

После того как сделаны все необходимые настройки для данной ссылки, нажмите кнопку ОК. Вы увидите, что выделенный участок текста окрасился цветом, установленным для ссылок текущей страницы.

Совет

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

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

Как сделать гиперссылку Вконтакте?

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

Для аккаунтов - или [Текст домена|Ваш текст]

Для групп - или [Текст домена|Ваш текст]

Для публичных страниц и встреч - или [Текст домена|Ваш текст]

Где вместо ХХХ нужно вставить ID соответственной страницы или группы.

ВИДЕО. Как создать гиперссылку Вконтакте?

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

Так же гиперссылки используются в презентациях, давайте посмотрим, как их сделать. Мы рассмотрим пример на основе программы Microsoft PowerPoint. Есть два способа, сделать гиперссылку в презентации, и они зависят от цели ссылки, это может быть веб-сайт или же слайд в презентации.

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

2. В открывшемся окне вводим нужный нам сайт в строке «Адрес». Затем нажимаем «ОК».

1. Повторяем действие, что и в прошлом случае. Выделяем нужную информацию - «Вставка» - «Гиперссылка».

2. На этот раз в открытом окне следует сначала выбрать функцию «Местом в документы» (слева в окне). Затем выбираем слайд, на который мы желаем сделать ссылку, и нажимаем «ОК».

Вот такими несложными действиями можно создать гиперссылки в презентации!

Как сделать гиперссылку в ворде?

Microsoft Word - является одним из самых распространенных текстовых редакторов, поэтому гиперссылки в этой программе просто неотъемлемая часть. Создание ссылки в программе Microsoft Word идентичное созданию в Microsoft PowerPoint.

Чтобы хоть как-то ускорить процесс создания ссылки, мы можем открывать функции гиперссылки не через функции «Вставки» - «Гиперссылка», а просто нажав правой клавишей мыши на выделенном участке, а затем функцию «Гиперссылка».

Создание гиперссылок

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

Если речь идет о переходе к конкретному фрагменту в документе, его местоположение необходимо обозначить закладкой.

Создание внутренних гиперссылок

Для создания ссылок на элементы текущего документа используются либо стили заголовков, либо закладки. В текущем документе либо вставьте закладку в том месте, к которому будет выполняться переход либо примените один из встроенных стилей заголовков Microsoft Word к тексту, на который следует сослаться.

3. В списке Связать с выберите параметр местом в этом документе.

4. Выберите в списке заголовок или закладку для ссылки.

Создание внешних гиперссылок

1. Выделите текст или объект, представляющий гиперссылку.

3. В списке Связать с выберите параметр файлом, веб- страницей

4. Выполните одно из следующих действий.

o Выберите одну из папок в списке Папка, а затем найдите и выделите нужную ссылку.

О шаблонах

Каждый документ Microsoft Word основан на шаблоне. Шаблон – это файл с настройками, на основе которого создаются документы Word. Этот файл имеет расширение.dot. Шаблон определяет основную структуру документа и содержит настройки документа, такие как шрифты, элементы автотекста, параметры страницы, форматирование и стили, назначенные сочетания клавиш, макросы, меню. Кроме того, шаблоны могут содержать текст, графику, таблицы и т.д. В этом случае документ созданный на основе такого шаблона будет содержать тот же текст, графику, таблицы.

Общие шаблоны Microsoft Word XP, включая шаблон Normal.dot, хранятся в специальной папке Шаблоны и отображаются в области задач Создание документа, которая включается командой Файл, создать. Общие шаблоны содержат настройки, доступные для всех документов. При сохранении шаблона Microsoft Word автоматически выбирает для расположения файлов шаблона папку Шаблоны. Шаблоны, сохраненные в других папках, не будут отображаться в диалоговом окне Шаблоны.

Примечание. Шаблон Normal.dot – это универсальный шаблон для любых типов документов. По умолчанию все документы создаются на основе общего шаблона «Новый документ» (Normal.dot), в котором уже заданы параметры страницы, формат шрифта и абзаца (шрифт – 12 пт, цвет – авто; абзац – выравнивание по левому краю, нулевые отступы и т.д.). Для изменения стандартного форматирования или содержимого документа в этот шаблон можно внести необходимые изменения.