Гиперссылка в тексте вконтакте: «Как сделать ссылку в тексте в вк?» – Яндекс.Кью

1. Товары
2. Клиенты
3. Случаи использования

1. Переполнение стека Публичные вопросы и ответы
2. Команды Частные вопросы и ответы для вашей команды
3. предприятие Частные вопросы и ответы для вашего предприятия
4. работы Программирование и связанные с ним технические возможности карьерного роста
5. Талант Нанимать технический талант

Создание гиперссылок — Обучение веб-разработке

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

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

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

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

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

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

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

 
 Я создаю ссылку на
 домашняя страница Mozilla .
 

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

Я создаю ссылку на домашнюю страницу Mozilla.

Добавление вспомогательной информации с атрибутом title

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

 
 Я создаю ссылку на
 домашняя страница Mozilla .
 

Это дает нам следующий результат (заголовок будет отображаться как всплывающая подсказка при наведении ссылки):

Я создаю ссылку на домашнюю страницу Mozilla.

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

Активное обучение: создание собственного примера ссылка

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

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

ссылки уровня блока

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

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

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

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

URL или Uniform Resource Locator — это просто строка текста, которая определяет, где что-то находится в сети. Например, домашняя страница Mozilla на английском языке находится по адресу https://www.mozilla.org/en-US/ .

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

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

В нашем корне также есть два каталога — PDF-файлов и проектов . Каждый из них содержит один файл — файл PDF ( project -rief.pdf ) и файл index.html соответственно. Обратите внимание, что вы вполне можете иметь два файла index.html в одном проекте, если они находятся в разных местах файловой системы. Многие веб-сайты делают. Второй файл index.html , возможно, будет главной целевой страницей для информации, связанной с проектом.

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

   
   Хотите связаться с конкретным сотрудником?
  Найдите подробности в наших  страница контактов .  

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

   
   Посетите мою  домашнюю страницу проекта .  

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

   
   Ссылка на мой  краткое описание проекта .  

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

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

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

 
 Почтовый адрес  

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

 
 Хотите написать нам письмо? Используйте наш  почтовый адрес . 

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

 
  почтовый адрес компании  можно найти внизу этой страницы.  

абсолютных и относительных URL

В Интернете можно встретить два термина: абсолютный URL , и относительный URL :

абсолютный URL : указывает на местоположение, определяемое его абсолютным местоположением в сети, включая протокол и имя домена.Так, например, если страница index.html загружена в каталог с именем проектов , который находится внутри корня веб-сервера, а домен веб-сайта — http://www.example.com , страница будет доступна по адресу http://www.example.com/projects/index.html (или даже просто http://www.example.com/projects/ , так как большинство веб-серверов просто ищут посадку загрузить страницу, например index.html , если она не указана в URL.)

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

относительный URL : указывает на местоположение, которое относительно относительно файла, с которого вы ссылаетесь, больше похоже на то, что мы рассмотрели в предыдущем разделе. Например, если мы хотим связать файл нашего примера по адресу http://www.example.com/projects/index.html с файлом PDF в том же каталоге, URL-адрес будет просто именем файла — например, project -rief.pdf — дополнительная информация не требуется. Если PDF-файл был доступен в подкаталоге внутри проектов , называемых pdfs , относительная ссылка была бы pdfs / project -rief.PDF (эквивалентный абсолютный URL будет http://www.example.com/projects/pdfs/project-brief.pdf .)

Относительный URL-адрес будет указывать на разные места в зависимости от фактического местоположения файла, к которому вы обращаетесь — например, если мы переместили наш файл index.html из каталога проектов в корень веб-сайта ( верхний уровень, не в каталогах), ссылка на URL-адрес pdfs / project -rief.pdf внутри него теперь будет указывать на файл, расположенный по адресу http: // www.example.com/pdfs/project-brief.pdf , а не файл, расположенный по адресу http://www.example.com/projects/pdfs/project-brief.pdf .

Конечно, местоположение файла project -rief.pdf и папки pdfs внезапно не изменится, поскольку вы переместили файл index.html — это приведет к тому, что ваша ссылка укажет в неправильном месте, поэтому не будет работать, если нажать. Вы должны быть осторожны!

Ссылка лучшие практики

При написании ссылок следует соблюдать рекомендации.Давайте посмотрим на это сейчас.

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

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

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

Давайте рассмотрим конкретный пример:

Хорошо текст ссылки: Загрузить Firefox

 
 
  Скачать Firefox
  

Bad текст ссылки: Нажмите здесь, чтобы загрузить Firefox

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

скачать Firefox 
 

Другие советы:

• Не повторяйте URL как часть текста ссылки — URL выглядят некрасиво и звучат еще страшнее, когда программа чтения с экрана читает их буквально за буквой.
• Не говорите «ссылка» или «ссылки на» в тексте ссылки — это просто шум. Читатели экрана говорят людям, что есть ссылка. Визуальные пользователи также будут знать, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчеркнуты (это соглашение, как правило, не должно нарушаться, поскольку пользователи так привыкли к нему).)
• Сохраняйте ярлык своей ссылки как можно короче — длинные ссылки особенно раздражают пользователей программы чтения с экрана, которые должны услышать все прочитанное.
• Минимизируйте случаи, когда несколько копий одного и того же текста связаны в разных местах. Это может вызвать проблемы у пользователей программ чтения с экрана, которые часто выводят список ссылок вне контекста — несколько ссылок, помеченных как «нажмите здесь», «нажмите здесь», «нажмите здесь», могут привести к путанице.

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

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

• Для начала, намного проще сканировать ваш код — относительные URL-адреса, как правило, намного короче абсолютных, что значительно облегчает чтение кода.
• Во-вторых, более эффективно использовать относительные URL-адреса везде, где это возможно. Когда вы используете абсолютный URL-адрес, браузер начинает с поиска реального местоположения сервера в системе доменных имен (DNS; см. «Как работает Интернет» для получения дополнительной информации), затем он переходит на этот сервер и находит файл, который находится в данный момент. просил.С другой стороны, с относительным URL-адресом браузер просто ищет запрашиваемый файл на том же сервере. Таким образом, если вы используете абсолютные URL-адреса там, где это делают относительные URL-адреса, вы постоянно заставляете свой браузер выполнять дополнительную работу, а это означает, что он будет работать менее эффективно.

Ссылки на не-HTML ресурсы — оставьте четкие указатели

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

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

Давайте рассмотрим несколько примеров, чтобы увидеть, какой текст можно использовать здесь:

 
 
  Скачать отчет о продажах (PDF, 10MB)
 

 
  Смотрите видео (поток открывается в отдельной вкладке, качество HD)
 

 
  Играть в автомобильную игру (требуется Flash)
  

Используйте атрибут загрузки при ссылке на скачивание

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

 
  Загрузить последнюю версию Firefox для Windows (64-разрядная версия) (английский, США)
 

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

Вам нужно будет сделать локальные копии следующих четырех страниц, все в одном каталоге (полный список файлов см. Также в каталоге navigation-menu-start):

Вы должны:

1. Добавить неупорядоченный список в указанном месте на одной странице, содержащий названия страниц для ссылки. Меню навигации, как правило, представляет собой просто список ссылок, так что это семантически нормально.
2. Преврати название каждой страницы в ссылку на эту страницу.
3. Скопируйте навигационное меню на каждую страницу.
4. На каждой странице удалите только ссылку на эту же страницу — для этой страницы непонятно и бессмысленно включать ссылку на себя, а отсутствие ссылки служит хорошим визуальным напоминанием о том, на какой странице вы находитесь в данный момент.

Готовый пример должен выглядеть примерно так:

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

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

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

В своей наиболее простой и часто используемой форме ссылка mailto: просто указывает адрес электронной почты предполагаемого получателя. Например:

  Отправить письмо в никуда 
 

В результате получается ссылка, которая выглядит следующим образом: Отправить письмо в никуда.

На самом деле, адрес электронной почты даже не является обязательным. Если вы пропустите его (т. Е. Ваш href — просто «mailto:»), почтовый клиент пользователя откроет новое окно исходящей электронной почты, для которого еще не указан адрес назначения. Это часто полезно в качестве ссылок «Поделиться», по которым пользователи могут щелкнуть электронное письмо на адрес по своему выбору.

уточняющие детали

Помимо адреса электронной почты, вы можете предоставить другую информацию. Фактически, любые стандартные поля заголовка почты могут быть добавлены к указанному вами URL-адресу mailto-.Наиболее часто используемыми из них являются «subject», «cc» и «body» (которые не являются полем истинного заголовка, но позволяют указать короткое информационное сообщение для нового электронного письма). Каждое поле и его значение указываются в качестве условия запроса.

Вот пример, который включает в себя cc, bcc, subject и body:

 
  Отправить письмо с копией, скрытой копией, темой и телом
 

Примечание: Значения каждого поля должны быть в кодировке URL, то есть с непечатными символами (невидимыми символами, такими как табуляция, возврат каретки и разрывы страниц) и пробелами, экранированными в процентах.Также обратите внимание на использование знака вопроса (–) для отделения основного URL-адреса от значений полей и амперсандов (&) для разделения каждого поля в URL-адресе mailto: . Это стандартная запись запроса URL. Прочтите метод GET, чтобы понять, для какой записи URL-запросов используется более привычно.

Вот еще несколько примеров URL-адресов mailto :

Проверьте свои навыки!

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

Резюме

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

В этом модуле