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

Обновлено: 08.07.2024

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

Предварительные требования:	Базовое знакомство с HTML, описанное в статье Начало работы c HTML. Форматирование текста в HTML, описанное в статье Основы редактирования текста в HTML.
Задача:	Научиться эффективно использовать гиперссылки и связывать несколько файлов вместе.

Что такое гиперссылка?

Гиперссылки — одно из самых интересных нововведений Интернета. Они были особенностью Сети с самого начала, но именно они превращают Интернет в Интернет. Они позволяют нам связывать наши документы с любым другим документом (или ресурсом), с которым мы хотим. С их помощью мы также можем связывать документы с их конкретными частями, и мы можем сделать приложения доступными на простом веб-адресе (сравните это с локальными приложениями, которые должны быть установлены, и другими такими же вещами). Почти любой веб-контент может быть преобразован в ссылку, так что когда вы кликаете по ней (или иным образом активируете), она заставляет веб-браузер перейти на другой веб-адрес (URL.)

Примечание: URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео и аудиофайлы и все остальное, что может жить в Интернете. Если веб-браузер не знает, как отображать или обрабатывать файл, он спросит вас, хотите ли вы открыть файл (в этом случае обязанность открытия или обработки файла передаётся в соответствующее локальное приложение на устройстве) или загрузить файл (в этом случае вы можете попытаться разобраться с ним позже).

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

Анатомия ссылки

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

Это дало нам следующий результат:

Добавляем информацию через атрибут title

Другим атрибутом, который вы можете добавить к своим ссылкам, является — title . Он предназначен для хранения полезной информации о ссылке. Например, какую информацию содержит страница или другие вещи, о которых вам нужно знать. Например:

Вот что получилось (описание появится, если навести курсор на ссылку):

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

Активное изучение: создаём собственную ссылку

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

Попробуйте добавить в тело HTML один или несколько абзацев или другие элементы, о которых вы уже знаете.
Теперь превратите некоторые фрагменты документа в ссылки.
Добавьте ссылкам атрибут title .

Ссылки-блоки

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

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

Краткое руководство по URL-адресам и путям

Чтобы полностью понять адреса ссылок, вам нужно понять несколько вещей про URL-адреса и пути к файлам. Этот раздел даст вам информацию, необходимую для достижения этой цели.

URL-адреса используют пути для поиска файлов. Пути указывают, где в файловой системе находится файл, который вас интересует. Давайте рассмотрим простой пример структуры каталогов (смотрите каталог creating-hyperlinks.)

Корень структуры — каталог creating-hyperlinks . При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — index.html и contacts.html . На настоящем веб-сайте index.html был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определённого раздела веб-сайта).

В корне есть ещё два каталога — pdfs и projects . У каждого из них есть один файл внутри — project-brief.pdf и index.html , соответственно. Обратите внимание на то, что вы можете довольно успешно иметь два index.html файла в одном проекте, пока они находятся в разных местах файловой системы. Многие веб-сайты так делают. Второй index.html , возможно, будет главной лендинг-страницей для связанной с проектом информации.

Тот же каталог: Если вы хотите подключить ссылку внутри index.html (верхний уровень index.html ), указывающую на contacts.html , вам просто нужно указать имя файла, на который вы хотите установить ссылку, так как он находится в том же каталоге, что и текущий файл. Таким образом, URL-адрес, который вы используете — contacts.html :

Перемещение вниз в подкаталоги: Если вы хотите подключить ссылку внутри index.html (верхний уровень index.html ), указывающую на projects/index.html , вам нужно спуститься ниже в директории projects перед тем, как указать файл, который вы хотите. Это делается путём указания имени каталога, после которого идёт слеш и затем имя файла. Итак, URL-адрес, который вы используете - projects/index.html :

Перемещение обратно в родительские каталоги: Если вы хотите подключить ссылку внутри projects/index.html , указывающую на pdfs/project-brief.pdf , вам нужно будет подняться на уровень каталога, затем спустится в каталог pdf . "Подняться вверх на уровень каталога" обозначается двумя точками — .. — так, URL-адрес, который вы используете ../pdfs/project-brief.pdf :

Примечание: вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например:
../../../сложный/путь/к/моему/файлу.html .

Фрагменты документа

Можно ссылаться на определённую часть документа HTML (известную как фрагмент документа), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут id элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:

Затем, чтобы связаться с этим конкретным id , вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:

Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на другую часть того же документа:

Абсолютные и относительные URL-адреса

Два понятия, с которыми вы столкнётесь в Интернете, — это абсолютный URL и относительный URL:

Абсолютный URL всегда будет указывать на одно и то же местоположение, независимо от того, где он используется.

Советуем вам основательно разобраться в этой теме!

Практика написания хороших ссылок

При написании ссылок рекомендуется следовать некоторым правилам. Давайте рассмотрим их.

Используйте чёткие формулировки описания ссылок

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

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

Взгляните на этот пример:

Плохой текст ссылки: Нажми сюда, чтобы скачать Firefox

Используйте относительные ссылки, где это возможно

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

Во-первых, гораздо проще прописать в коде относительные URL-адреса, как правило, они намного короче абсолютных URL-адресов, что значительно упрощает чтение кода
Во-вторых, использование относительных URL-адресов эффективней по следующей причине. Когда вы используете абсолютный URL-адрес, браузер начинает поиск реального местоположения сервера запрашивая адрес у Domain Name System (DNS; также прочтите Как работает web), затем он переходит на этот сервер и находит файл, который запрашивается. С относительным URL-адресом проще: браузер просто ищет файл, который запрашивается на том же сервере. Используя абсолютные URL-адреса вместо относительных, вы постоянно нагружаете свой браузер дополнительной работой.

Создавая ссылки на не HTML ресурсы — добавляйте описание

Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте чёткую формулировку, чтобы уменьшить путаницу. Отсутствие описания может раздражать пользователя. Приведём пример:

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

Посмотрите на примеры, чтобы увидеть, как добавить описание:

Используйте атрибут download, когда создаёте ссылку

Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут download , чтобы создать имя файла по умолчанию для сохранения . Приведём пример ссылки для загрузки браузера Firefox 39:

Активное изучение: создание меню навигации

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

Вам нужно скачать или создать следующие страницы в одном каталоге (Смотрите navigation-menu-start):

Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имён страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.
Создайте ссылки каждому элементу списка, ведущие на эти страницы.
Скопируйте созданное меню в каждую страницу.
На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой приём помогает визуально определить, смотря на меню, в какой части сайта мы находимся.

Когда закончите задание, посмотрите, как это должно выглядеть:

Если не удаётся сделать, или вы не уверены, что сделали верно, посмотрите наш вариант navigation-menu-marked-up.

Ссылки электронной почты

Самыми простыми и часто используемыми формами mailto: являются subject, cc, bcc и body; дальше прописываем адрес электронной почты. Например:

Особенности и детали

Примечание: Значение каждого поля должно быть написано в URL-кодировке (то есть с непечатаемыми символами и пробелами percent-escaped). Обратите внимание на знак вопроса (?) для разделения основного адреса и дополнительных полей, амперсанд (&) для разделения каждого поля mailto: URL. Для этого используется стандартное описание URL запроса. Прочтите о методе GET, чтобы лучше понимать описание URL запроса.

Вот несколько примеров использования mailto URLs:

Заключение

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

После ее установки в контекстном меню (вызывается правым щелчком мыши на объекте) появляется дополнительный пункт, щелкнув по которому Вы копируете полный путь до файла в буфер обмена (Рис. 1). Вставка из буфера обмена в документ осуществляется с помощью CTRL+V.

В Windows Vista и Windows 7 появилась возможность скопировать путь к файлу без установки стороннего программного обеспечения. Для этого нажмите правую клавишу мыши на файле удерживая при этом Shift и в открывшемся контекстном меню вы увидите пункт “Копировать как путь“.
Если вы выберите этот пункт, то в буфер обмена скопируется полный путь к файлу (Рис. 2).

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

Вкладка Office позволяет редактировать и просматривать в Office с вкладками и значительно упрощает работу .

Повторное использование чего угодно: Добавляйте наиболее часто используемые или сложные формулы, диаграммы и все остальное в избранное и быстро используйте их в будущем.
Более 20 текстовых функций: Извлечь число из текстовой строки; Извлечь или удалить часть текстов; Преобразование чисел и валют в английские слова.
Инструменты слияния : Несколько книг и листов в одну; Объединить несколько ячеек / строк / столбцов без потери данных; Объедините повторяющиеся строки и сумму.
Разделить инструменты : Разделение данных на несколько листов в зависимости от ценности; Из одной книги в несколько файлов Excel, PDF или CSV; От одного столбца к нескольким столбцам.
Вставить пропуск Скрытые / отфильтрованные строки; Подсчет и сумма по цвету фона ; Отправляйте персонализированные электронные письма нескольким получателям массово.
Суперфильтр: Создавайте расширенные схемы фильтров и применяйте их к любым листам; Сортировать по неделям, дням, периодичности и др .; Фильтр жирным шрифтом, формулы, комментарий .
Более 300 мощных функций; Работает с Office 2007-2019 и 365; Поддерживает все языки; Простое развертывание на вашем предприятии или в организации.

Преобразование путей к файлам в гиперссылки с помощью формулы

Удивительный! Использование эффективных вкладок в Excel, таких как Chrome, Firefox и Safari!

Экономьте 50% своего времени и сокращайте тысячи щелчков мышью каждый день!

В Excel есть простая функция - Гиперссылка, которая поможет вам решить эту задачу в кратчайшие сроки.

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

2. Затем перетащите маркер заполнения в диапазон, в котором вы хотите применить эту формулу, и все пути к файлам были преобразованы в интерактивные гиперссылки, см. Снимок экрана:

Преобразование путей к файлам в гиперссылки с помощью Kutools for Excel

Kutools for Excel включает более 300 удобных инструментов Excel. Бесплатная пробная версия без ограничений в течение 30 дней. Получить сейчас.

Если вы установили Kutools for Excel, Его Конвертировать гиперссылки функция также может оказать вам услугу. Пожалуйста, сделайте следующее:

1. Выберите диапазон путей к файлам, которые вы хотите преобразовать.

2. Нажмите Кутулс > Инструменты связи > Конвертировать гиперссылки, см. снимок экрана:

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

4. А затем нажмите OK, все выбранные пути к файлам были преобразованы в интерактивные гиперссылки, см. снимок экрана:

Ноты:

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

2. Если гиперссылка связана с текущим документом, отметьте Гиперссылки - это место в этом документе опцию.

Для начала посмотрим на адресную строку в Windows. Допустим, что у нас есть файл C:\primer\new.txt. Заходим в каталог C:\primer, щёлкаем правой кнопкой мыши по адресной строке и выбираем вариант Копировать адрес как текст. Затем пытаемся вставить этот текст, например, в командную строку. Мы получим именно адрес папки, но не конкретного файла в ней. Конечно, можно дописать имя файла вручную, но это так себе вариант. Давайте посмотрим, как можно обойтись без этого.

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

Во-первых, можно открыть свойства файла, перейти на вкладку Безопасность, выделить то, что написано в поле Имя объекта, щёлкнуть правой кнопкой мыши и выбрать вариант Копировать (ну или просто Ctrl+C).

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

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

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

Обратите внимание на скриншот выше. На нём мы скопировать пути двух файлов: C:\primer\new.txt и C:\primer\new file.txt. Во втором случае путь заключен в кавычки. Почему? Он содержит пробел. Без кавычек командная строка не воспримет такой путь. Причём удобно то, что система сама ставит их, когда они нужны. А во втором способе (через контекстное меню и Копировать как путь) она ставит их всегда, что, в принципе, тоже неплохо — не ошибётесь. Но вот если надо вставить путь в текстовый файл, в браузер или ещё куда-то, то туда он тоже вставится с кавычками.

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

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

Через свойства файла, вкладка Безопасность — путь всегда копируется без кавычек;
Через Shift, контекстное меню и Копировать как путь — путь всегда копируется с кавычками;
Перетаскивание файла в окно командной строки — способ только для командной строки, кавычки подставляются автоматически при необходимости.

Исходя из вышеизложенного, выбирайте сами тот способ, который кажется удобнее.

Читайте также: