Как в "ВК" сделать гиперссылку: подробная инструкция. Как сделать гиперссылку в ВК, Ворде, презентации PowerPoint, на HTML и в Excel

Новое окно

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

При щелчке по этой ссылке откроется программа для работы с электронной почтой, установленная у Вас по умолчанию, где уже будет заполнено поле “Кому”. Чтобы автоматически заполнялась и тема письма, надо сделать ссылку на e-mail такого вида:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* стили кнопки в обычном режиме */#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; }

Работая с офисными программами, пользователь часто сталкивается с гиперссылками. Они дают возможность переходить на веб-страницы и открывать другие документы, необходимые для работы. Для того чтобы оптимизировать рабочий процесс, необходимо знать, как в «Ворде» сделать гиперссылку. Это поможет с легкостью переходить к нужному тексту, файлу или картинке, не тратя время на долгие поиски документов, которые взаимосвязаны между собой. Данная функция доступна в версиях Word 2007-2010, поэтому пользователи могут выбрать наиболее подходящий для себя вариант программы.

Указать адрес веб-страницы в документ MS Word не составит большого труда, достаточно просто скопировать его и вставить в документ. Программа самостоятельно распознает адрес и применит специальный стиль оформления. Однако иногда возникает необходимость в указании ссылки на адрес.

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

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

Чтобы перейти по ссылке, достаточно клацнуть на выделенном словосочетании один раз, при этом удерживая нажатой клавишу Ctrl. Когда появится окошко-уведомление, нужно нажать «Да». После этого будет открыт документ, на который была ссылка. Если пользователю неудобно переходить таким образом, в Word есть возможность поменять настройки. После этого достаточно будет щелкнуть левой кнопкой мыши по ссылке. В Word 2010 необходимо перейти в раздел «Файл», а в Word 2007 - в Office. Там будет вкладка «Параметры». Далее нужно найти пункты «Дополнительно» и «Параметры вставки». Если убрать галочку напротив строки Ctrl + … и нажать ОК, настройки будут изменены.

Пользователь должен не только знать, как создать гиперссылку в «Ворде», но и правильно оформлять ее. Это не зависит от содержания. После заполнения поля «Текст» будет видно предварительный текст, а не сетевой адрес или URL. При желании можно задать подсказку, которая может иметь длину до 255 символов. Отражаться она будет в небольшом желтеньком окошке, если навести курсор мышки. В том случае, когда текст не будет введен, можно просмотреть адрес, который связан с данным сообщением.

Чтобы перемещаться между фрагментами документа, необходимо знать, как в «Ворде» сделать гиперссылку в пределах одного файла. Для этого нужно структурировать документ, правильно оформить заголовки и закладки. Это можно сделать при помощи вкладки «Вставка» и пункта «Закладки». После того как они отобразятся в окошке «Гиперссылки», можно будет выбирать необходимые объекты.

Гиперссылка в «Ворде-2010» создается так же, как и в версии «Ворд-2007». Необходимо открыть документ и определить, какое словосочетание будет определяющим. Выделив его, необходимо на нем клацнуть правой клавишей мышки и выбрать пункт «Гиперссылка». После этого перед пользователем откроется окошко «Вставить ссылку». Вызвать его можно и другим способом: для этого нужно найти вкладку «Вставка» и нажать на пункт «Гиперссылка».

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

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

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

При необходимости можно сделать так, чтобы, наводя курсор на каждый пункт оглавления, пользователь автоматически туда переходил. Для этого необходимо структурировать документ: оглавление должно располагаться на первой странице, а главы - на последующих. После того как будет выделена первая глава, на ней необходимо клацнуть правой клавишей мышки. Перед пользователем будет открыт список, в котором нужно выбрать пункт Hyperlink, а затем вкладку Placeinthisdocument. С правой стороны появится полный список глав документа. Выбор подтверждается нажатием кнопки ОК. Если все действия выполнены правильно, при нажатии на первую главу в списке она откроется пользователю. По аналогии «привязываются» все остальные главы.

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

Для этого необходимо выделить ту главу, которая уже стала ссылкой, а затем перейти в раздел Hyperlink и выбрать пункт Placeinthisdocument. Указав ее в правом углу, нужно нажать ОК. Теперь глава не выполняет функцию ссылки, и ее стиль можно поменять. Если действие успешно выполнено, нужно выделить следующую главу и нажать Ctrl + Shift + C и Ctrl + Shift + V.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

border="0">

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

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

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

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

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

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

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

name="zagolovok">

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

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

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

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

http://www..html

http://www..html#zagolovok

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

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

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

Д опустим нам нужно сослаться на страницу 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">Клиенты

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