Как пользоваться гиперссылкой в ворде. Как сделать ссылку в документе Word

Здравствуйте, уважаемые посетители!

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

Начнем с самого простого и дойдем до сложного.

Обычная ссылка и гиперссылка

http://сайт/poleznoe/kak-sdelat-ssylku-na-sait.html

http : //сайт/poleznoe/kak-sdelat-ssylku-na-sait.html

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

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

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

Кликните сюда

Ссылка создается простым тегом , внутри которого имеется сам адрес, куда нужно произвести перенаправление пользователя, а также анкор ссылки (в примере выше анкором служит фраза "кликните сюда"), который указывает текст линка, поясняющий, что вы получите, когда перейдете по данному адресу.

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

Внутри ссылочного тега также имеется атрибут для открытия страницы в новой вкладке.

target = "_blank"

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

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

Желательно добавлять тег title, чтобы посетители видели эту подсказку при наведении и понимали, куда переходят. Делается это просто, внутри открывающего тега , как на примере ниже.

При использовании движка, например WordPress, добавление ссылки на сайт происходит очень просто без каких либо правок в html режиме. В редакторе записи имеется специальная иконка со значком соединения.

На изображении я показал весь процесс добавление связи между текстом и другой страницей.

1. Сначала выделяем фразу, которую нужно сделать ссылкой;
2. Кликаем на значок добавления связи;
3. Задаем параметры ссылки (адрес страницы, куда нужно перекинуть пользователя, а также заголовок ссылки, то есть анкор, если необходимо).

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

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

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

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

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

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

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

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

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

На практике это будет выглядеть следующим образом.

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

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

Сложность тут составляет лишь правильно прописывать код картинки, который используется в качестве анкора.

Ссылка-кнопка с помощью CSS стилей

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

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

Для примера я создал такую простую кнопку, которая ведет на главную страницу сайта. Можете проверить ее работоспособность.

Если посмотреть исходный код кнопки, то вы все очень просто. Единственным отличием от обычной гиперссылки является наличие id, который дописан внутри открывающего тега и к нему в свою очередь прописаны стили оформления в файл style.css.

Вот сама структура кнопки.

Видим, что сразу после открытия ссылочного тега прописан id="button", которому и назначены свои стили оформления. Остальная же структура идентичная с гиперссылкой.

Принцип понятен, поэтому даю стили, которые я добавлял к данной кнопке-ссылке.

/* стили кнопки в обычном режиме */#button { display: block; width: 550px; /* ширина кнопки */height: 60px; /* высота */background-color: #ff4343; /* цвет фона */text-shadow: 1px 1px #800909; /* тень текста */color: #fff; /* цвет текста */border-style: solid; /* тип линии границы (рамки) кнопки */border-width: 1px; /* толщина линии границы (рамки) кнопки */border-color: #db3a3a; /* цвет линии границы (рамки) кнопки */font-size: 18px; /* размер текста */line-height: 60px; /* линейная высота текста */font-weight: normal; /* жирность текста */font-family: arial; /* тип шрифта */text-align: center; /* выравнивание текста */text-decoration: none; /* подчеркивания текста */margin: 40px auto; /* отступы кнопки от других эементов на странице */text-transform: uppercase; /* чтобы все буквы были заглавными. Если не нужно, то удалите строку */} /* стили кнопки при наведении курсора мыши */#button:hover { background-color: #f23333; font-size: 19px; }

Гиперссылка – это определенный текст или рисунок, при нажатии на который, откроется или заданное место в этом же документе, или картинка, или другой документ и прочее. Не просмотренная гиперссылка в Ворде выделена синим цветом и подчеркнута.

На этом с теорией закончим. Давайте разбираться, как сделать гиперссылку в MS Word.

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

Теперь откройте документ, установите курсор в нужном месте и вставьте ссылку. Нажмите после этого на пробел или «Enter» . Обычная ссылка стала гиперссылкой в документе Ворд и ведет на указанный сайт.

Если Вы копируете фрагмент текста, в котором есть ссылки, то автоматически они не преобразуются в гиперссылки. Для этого установите курсор в конце нужной ссылки и нажмите пробел.

Теперь рассмотрим, как сделать текст гиперссылкой . Для этого, выделите нужный фрагмент текста или слово, кликните по нему правой кнопкой мыши и выберите пункт «Гиперссылка» .

Откроется следующее окно. В поле «Связать с» выберите «файлом, веб-страницей» , в поле «Адрес» вставьте электронный адрес нужного сайта. Нажмите «ОК» .

Выделите текст, кликните по нему правой кнопкой мыши и выберите «Гиперссылка» .

Затем, в поле «Папка » выберите, где хранится нужный файл. В окошке ниже кликните мышкой по ярлыку программы, ее исполняемому файлу или любой нужной папке. Также можно выбрать вордовский, любой другой документ, или картинку.

В рассмотренном примере, при нажатии на «документ» открывается папка «Downloads» .

Чтобы сделать картинку гиперссылкой – выделите ее и повторите вышеописанные действия. Если картинка в тексте будет служить гиперссылкой, то при наведении на нее, появится всплывающее окошко. Нажмите Ctrl и кликните по ней.

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

Появится следующее контекстное меню. В нем кликните по пункту «Создать гиперссылку» .

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

Теперь Вы знаете различные способы, которые помогут Вам сделать гиперссылку в Ворде. Если остались какие-то вопросы – задавайте их в комментариях.

Оценить статью:

Г лавным признаком 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.

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

• выделяем ссылку,
• щёлкаем правой кнопкой мыши для появления меню
• и затем левой кнопкой мыши кликаем в появившемся меню по «Копировать»:

Возвращаемся на Subscribe.ru в группу «Компьютерная грамотность». Здесь в комментариях следует написать текст или вставить ссылку вида http://….., которая в данном случае будет восприниматься как обычный текст. Выделяем этот текст (как показано ниже), при этом значок «цепочки» (на картинке обведен красным) становится «активным»:

Левой кнопкой мышки щёлкаем по значку «цепочки». При этом открывается окно «Добавить/ изменить ссылку». Здесь в окно «Адрес ссылки» надо ввести скопированный ранее адрес ссылки, который уже находится в буфере обмена. Для этого можно щелкнуть правой кнопкой мыши и в выпавшем при этом меню кликнуть по опции «Вставить». В окне «Открыть в …» лучше установить «новом окне».

Теперь осталось только щёлкнуть по кнопке «Вставить». Как сказала одна из участниц группы, ссылку удалось «засинить», т.е. она стала гиперссылкой с характерной синей подсветкой.

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

Создание ссылки на веб-страницу

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

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

1. Выделяем текст, который будет ссылкой.
2. Далее Вставка-Гиперссылка

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

Важно! В поле Связать с: должно быть указано файлом, веб-страницей (смотрите рисунок выше).

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

Создание безанкорной ссылки

Здесь еще проще. Копируете адрес ресурса из браузера или пишите его самостоятельно, вставляете в текст и добавляете пробел после него. Адрес автоматически станет гиперссылкой.

Если этого не происходит, то необходимо в настройках Word проверить опцию автозамены. Заходим Файл – Параметры – Правописание – Параметры автозамены . Вкладка Автоформат при вводе ставим флажок в пункте «Адреса Интернета и сетевые пути » (выделено коричневой рамкой на рисунке ниже)

Гиперссылка как картинка

Вставляем нужную картинку, уменьшаем ее до необходимого размера, выделяем ее кликом мыши и выполняем все те же действия, что описаны выше для вставки анкорной ссылки, начиная с пункта 2. Визуально картинка не измениться, но при наведении курсора будет появляться сообщение: "Нажмите CTRL и щелкните ссылку".

Гиперссылка как закладка

Если в предыдущих вариантах в качестве указателя мы использовали адрес ресурса в сети, то сейчас необходимо поставить маркер в тексте. Он и будет адресом перехода. Такой маркер в ворде называют закладкой.

Расставляем закладки

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

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

Таким образом расставляем необходимое количество закладок. В окне мы можем проверить правильность установки закладки. Для этого выбираем ее в списке и кликаем кнопку Перейти . Ваш курсор будет перемещен в указаное место в тексте. А если при создании закладки вы выделяли слово, то оно будет выделено.

Создаем ссылки на закладки

Укажите закладку и нажмите кнопку ОК .

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

Дорогой читатель! Вы посмотрели статью до конца.
Получили вы ответ на свой вопрос? Напишите в комментариях пару слов.
Если ответа не нашли, укажите что искали .