path: root/files/ru/mdn/editor/ссылки/index.html

---
title: Создание ссылок в статьях MDN
slug: MDN/Editor/Ссылки
tags:
  - Guide
  - MDN
  - MDN Meta
  - Документация
  - Редактор
  - Руководство
translation_of: MDN/Editor/Links
---
<div>{{MDNSidebar}}</div>

<p id="Creating_and_editing_links"><span class="seoSummary">Ссылки — это ключевой компонент любой вики не только среди множества документов, но и в пределах одного. К счастью, ссылки очень легко создавать, даже несмотря на то, что есть <em>очень много</em> способов сделать их!</span></p>

<div class="note">
<p><strong>Обратите внимание</strong>, что у нас есть <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Writing_style_guide#Links">особые правила применения ссылок</a>: они описаны в <a href="https://developer.mozilla.org/ru/docs/Project:Writer's_guide">руководстве по оформлению материалов MDN</a>.</p>
</div>

<h2 id="Использование_панели_инструментов">Использование панели инструментов</h2>

<p>Самый очевидный способ создать ссылку — нажать на кнопку <kbd>Вставить/Редактировать ссылку</kbd> на панели инструментов или нажать сочетание <kbd>Ctl</kbd>+<kbd>K</kbd> (<kbd>Command</kbd>-<kbd>K</kbd> для Mac). Кнопка ссылки вглядит так: <img alt="The link button (as of 2015-12-04)" src="https://mdn.mozillademos.org/files/12003/link-button.png" style="height: 16px; width: 16px;">. Вы можете добавлять текст к выделенному тексту.</p>

<h3 id="Создание_ссылки">Создание ссылки</h3>

<p>После нажатия на кнопку ссылки появится диалоговое окно для работы с ссылками:</p>

<p><img alt="Окно для работы с ссылками" src="https://mdn.mozillademos.org/files/15289/link-info.png" style="height: 320px; width: 335px;"></p>

<p>Здесь вы можете создать новую ссылку. Параметры окна:</p>

<dl>
 <dt>Ссылка (Link Type)</dt>
 <dd>Это тип создаваемой вами ссылки. Тип по умолчанию, URL, используется в сети — или в MDN, или вне его. Вы также можете выбрать "Link to anchor in the text" или "Email". Ссылка-якорь позволяет вам привязать её к якорю, созданному вами ранее с помощью кнопки <kbd>Вставить / редактировать якорь</kbd>  на панели инструментов. Опция email позволяет вам настрить: URL-адрес получателя, получателя и сообщение. Чаще всего вы будете использовать тип URL.</dd>
 <dt>Поиск ссылки по заголовку / Текст ссылки (Article Title Lookup / Link Text)</dt>
 <dd>У этого поля есть две цели: во-первых, вы обозначаете текст, который будет использован как указатель ссылки (или, если вы выделили текст до открытия окна, он будет отображён как указатель ссылки), во-вторых, текст, введённый в это поле, используется для поиска  статей на MDN, чтобы найти возможное направление ссылки. К примеру, если вы введёте "Array" в поле, вы увидите что-то наподобие этого:<br>
 <img alt='Screenshot of the Link dialog box, showing a lookup menu for the text "Array"' src="https://mdn.mozillademos.org/files/15291/link%20dialog%20with%20lookup%20menu.png" style="border-style: solid; border-width: 1px; height: 388px; width: 496px;"></dd>
</dl>

<dl>
 <dd>На картинке вы можете видеть все страницы MDN, чьи заголовки содержат текст, напечатанный вами. Вы можете прокрутить список и выбрать одну из страниц или продолжить набирать текст, сужая список. Заметьте, у названий страниц отображается их язык (в нашем примере это "[en-US]"). Это не отображается в указателе ссылки; так сделано для того, чтобы вы убедились, что вы ссылаетесь на статью того же языка, на котором пишете вы.</dd>
 <dt>Прикрепление ссылки (Attachments)</dt>
 <dd>В качестве альтернативы вы можете сделать так, чтобы ссылка была привязана к одному из файлов, прикрпеплённому к этой странице. Это отличный способ предоставить ссылку для скачивания примера кода и тому подобное.</dd>
 <dt>URL</dt>
 <dd>Наконец, поле для URL-адреса позволяет вам ввести URL; в поле также выводятся URL выбранных вами элементов из меню <strong>Article Title Lookup</strong> или <strong>Attachments</strong>, если вы их использовали. Нередко используют URL-адреса страниц MDN, поэтому, если вы ссылаетесь на другую страницу MDN, удалите доменное имя ("https://developer.mozilla.org") из начала URL.</dd>
</dl>

<p>Как только завершите настройку ссылки, нажмите <kbd><strong>OK</strong></kbd><strong>.</strong></p>

<div class="note">
<p>В верху окна также есть вкладка <strong>Advanced</strong>. Нет опций, которые мы советуем вам использовать регулярно, по крайней мере, сейчас. Можете быть, в будущем появятся новые стили для ссылок, но мы, вероятно, добавим новую панель инструментов для этих опций.</p>
</div>

<h3 id="Ссылки">Ссылки</h3>

<p>Если у вас есть текст, который вы хотели бы превратить в ссылку, вы можете слегка упростить процесс. Выделите нужный вам текст, затем откройте окно для работы с сылками; поле <strong>Article Title / Lookup Text </strong>будет заполнено выделенным текстом. К примеру, есть у нас, скажем, следующий текст:</p>

<blockquote>
<p>You may find it useful to use JavaScript arrays when working on this project.</p>
</blockquote>

<p>Нам хотелось бы преобразовать <em>arrays</em> в ссылку на файл с соответствующим содержанием. Просто выделите слово и включите окно для работы с ссылками; у вас появится заполненное окно, похожее на изображение выше. Наводя мышь на поле-подсказку, вы можете видеть её относительный путь (его URL относится к <code>developer.mozilla.org</code>), благодаря чему вы можете лучше узнать, где  находится статья и о чём она.</p>

<p><img alt="Screenshot of the Link dialog box, showing a lookup menu and a URL tooltip" src="https://mdn.mozillademos.org/files/15293/Rollover%20of%20lookup%20menu.png" style="border-style: solid; border-width: 1px; height: 387px; width: 493px;"></p>

<p>На примере: подсказки — это возможные совпадения. Кажется, <em>arrays</em> было выбрано удачно; выберем этот вариант. Поле сразу заполняется URL-адресом, поэтому мы просто жмём <kbd><strong>OK</strong></kbd>, и цитата будет выглядеть так:</p>

<blockquote>
<p>You may find it useful to use JavaScript <a href="/en-US/docs/Web/JavaScript/Typed_arrays">arrays</a> when working on this project.</p>
</blockquote>

<h2 id="Использование_макросов">Использование макросов</h2>

<p>MDN часто использует <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide#Using_macros">макросы</a>, чтобы автоматически создавать термины-ссылки с соответствующим содержанием, стилизуя их как ссылки в сответствии с нашими <a href="https://wiki.developer.mozilla.org/ru/docs/Project:Writer's_guide">правилами оформления элементов</a>. Учтите: наше <a href="https://wiki.developer.mozilla.org/ru/docs/Project:Writer's_guide">руководство</a> отмечает, что API-термины, элементы и атрибуты HTML, свойства, имена функций CSS и тому подобное,— должны быть стилизованы с помощью элемента {{HTMLElement("code")}}. Также должны быть ссылки на другие страницы MDN.</p>

<p>К использованию макросов для создания ссылок легко привыкнуть, и это предоставляет множество плюсов:</p>

<ul>
 <li>Стили добавлены для вас.</li>
 <li>Ссылка создана для вас — и она не подвергается изменениям, если структура MDN меняется.</li>
 <li>Соответствующие подсказки также созданы для вас.</li>
</ul>

<p>Есть очень много таких макросов, и мы не будем останавливаться на них подробно здесь. Вместо этого мы разберём несколько самых часто употребляемых. Если интересно, ознакомьтесь с разделом "<a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros#Linking">Создание гиперссылок</a>" в нашей статье <a href="/en-US/docs/Project:MDN/Contributing/Custom_macros">Пользовательский макрос для MDN</a>.</p>

<div class="blockIndicator note">
<p>Ещё проще посетить <a href="/en-US/docs/Project:Introduction_to_KumaScript">KumaScript</a>, где есть любой из этих макросов; ко многим макросам есть комментарии вверху, объясняющие, как макрос работает и какие у него переменные.</p>
</div>

<h3 id="Ссылка_на_документацию_для_API">Ссылка на документацию для API</h3>

<p>У нас есть есколько невероятно полезных макросов для создания стилизованных ссылок для API. В этом подразделе перечислены самые удобные; в каждый блок могут быть добавлены доступные параметры, чтобы предоставить больший контроль над выводом. На название каждого макроса можно кликнуть, чтобы увидеть сам код макроса; у каждого макроса есть комментарии вверху, объясняющие, как макрос работает и какие у него переменные.</p>

<dl>
 <dt>{{TemplateLink("HTMLElement")}}</dt>
 <dd>Вставляет в HTML-код название элемента с необходимыми стилизацией и ссылками. К примеру: <code>\{{HTMLElement("table")}}</code> даёт {{HTMLElement("table")}}.</dd>
 <dt>{{TemplateLink("cssxref")}}</dt>
 <dd>Вставляет в CSS-код документацию свойства, правила или селектора. Например: <code>\{{cssxref("background-color")}}</code> в результате выводит {{cssxref("background-color")}}.</dd>
 <dt>{{TemplateLink("domxref")}}</dt>
 <dd>Вставляет данный термин API. Пример: <code>\{{domxref("window")}}</code> даёт в результате {{domxref("window")}}, и <code>\{{domxref("window.scrollBy()")}}</code> вставляет {{domxref("window.scrollBy()")}}. Вы также можете вставить дополнительный параметр, чтобы заменить текст: <code>\{{domxref("window.scrollBy", "scrollBy()")}}</code> заменяет <code>{{domxref("window.scrollBy")}}</code> на {{domxref("window.scrollBy", "scrollBy()")}}.</dd>
 <dt>{{TemplateLink("SVGElement")}}</dt>
 <dd>Вставляет название SVG-элемента с необходимыми стилизацией и ссылками. К примеру: <code>\{{SVGElement("circle")}}</code> даёт {{SVGElement("circle")}}.</dd>
</dl>

<h3 id="Добавление_якорей">Добавление якорей</h3>

<p>Чтобы применить ссылку к области с таким же названием, следует использовать макрос {{TemplateLink("anch")}}. Синтаксис — проще некуда: <code>\{{anch("Name of destination section")}}</code>. По умолчанию текст ссылки — это название области, но вы можете добавить второй, необязательный, параметр, обозначающий альтернативный текст. Несколько примеров:</p>

<ul>
 <li><code>\{{anch("Использование панели инструментов</code><code>")}}</code> будет выглядеть так: {{anch("Использование панели инструментов")}}</li>
 <li><code>\{{anch("Использование панели инструментов</code><code>", "Ранее в этой статье")}}</code> выведет: {{anch("Использование панели инструментов", "Ранее в этой статье")}}</li>
</ul>

<h3 id="Ссылки_к_багам">Ссылки к багам</h3>

<p>Вы можете создать ссылку на базу данных Mozilla's Bugzilla с макросом {{TemplateLink("bug")}}. У этого макроса всего один параметр: номер бага, на который ссылаются. К примеру, <code>\{{bug(765642)}}</code> покажет: {{bug(765642)}}.</p>

<p>Таким же образом вы можете создавать ссылки к багам на других брузерах и брузерных движках:</p>

<dl>
 <dt>WebKit (Safari и т.д.)</dt>
 <dd>{{TemplateLink("WebkitBug")}}: <code>\{{webkitbug(31277)}}</code> даёт {{webkitbug(31277)}}.</dd>
</dl>

<h3 id="Ссылки_к_RFC">Ссылки к RFC</h3>

<p>Суть работы Интернета изложена в RFC. Вы можете с лёгкостью обратиться к RFCs с помощью {{TemplateLink("RFC")}}. Для примера, \{{RFC(2616)}} станет {{RFC(2616)}}. Вы можете при желании снабдить макрос альтернативной ссылкой, чтобы использовать вместо выделенного участка текста или нескольких участков, с описанием, к какой ссылке привязать их.</p>

<p><span style="">Ссылки к информации о XPCOM-интерфейсах</span></p>

<div class="note">
<p>MDN больше не поддерживает XPCOM-документацию, но внесение вклада приветствуется!</p>
</div>

<p>Если вы документируете свойства Mozilla, способность быстро создать ссылку к документации XPCOM очень полезна. Здесь несколько макросов для этого.</p>

<p>Синтаксис: <code>\{{interface("interfacename")}}</code>. К примеру, вы написали:</p>

<blockquote>
<p>When you need to parse or create URIs, the \{{interface("nsIIOService")}} interface can help.</p>
</blockquote>

<p>В результате получится</p>

<blockquote>
<p>When you need to parse or create URIs, the {{interface("nsIIOService")}} interface can help.</p>
</blockquote>

<p>Если вам нужна ссылка к информации о методе или атрибуте XPCOM-интерфейса, макросы {{TemplateLink("ifmethod")}} и {{TemplateLink("ifattribute")}} точно для вас. Названия интерфейса и метода или атрибута, к которым вы ссылаетесь, принимаются за параметры. Макрос {{TemplateLink("ifmethod")}} особенно интересен, т.к. он по-особому форматирует элемент при добавлении стиля родителя после названия метода. Например, <code>\{{ifmethod("nsIIOService", "newURI")}}</code> выводит {{ifmethod("nsIIOService", "newURI")}}. Это контейнер, в котором вы защищены от стилевых изменений MDN в будущем!</p>

<h3 id="Ссылка_к_привилегированной_документации_Mozilla">Ссылка к привилегированной документации Mozilla</h3>

<p>Для вставки Mozilla preference и для того, чтобы привязать её к соответствующей странице в <a href="/en-US/docs/Mozilla/Preferences/Preference_reference">Preference reference</a>, используйте макрос {{TemplateLink("pref")}} . У него всего один параметр: полное название привилегерованного элемента. Например, <code>\{{pref("javascript.options.showInConsole")}}</code> преобразуется в: {{pref("javascript.options.showInConsole")}}.</p>

<h3 id="Ссылка_к_ресурсам_Mozilla">Ссылка к ресурсам Mozilla</h3>

<p>Вы можете ссылаться на дерево ресурсов Mozilla's (хотя не стоит делать это часто), используя макрос {{TemplateLink("source")}}. Вместо указания абсолютного пути вам достаточно указать путь относительно директории <code>/source/</code>. Для примера: \{{source("browser/Makefile.in")}} создаёт эту ссылку: {{source("browser/Makefile.in")}}.</p>

<p>Вы можете при желании снабдить ссылку альтернативным тектсом. Например, как видите, \{{source("browser/Makefile.in", "the browser's makefile")}} преобразуется в: {{source("browser/Makefile.in", "the browser's makefile")}}.</p>

<div class="note">
<p>Обратите внимание на документацию {{anch("Использование макросов")}}, если вы заинтересованы в более подробном изучении макросов и посетите <a href="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript</a>, чтобы больше узнать о системе макросов.</p>
</div>

<h2 id="Ссылки_на_рекомендованные_статьи">Ссылки на рекомендованные статьи</h2>

<p>Если вы хотите создать список связанных страниц или другого рекомендованного материала к прочтению, вам следует делать это с помощью создания контейнера быстрых ссылок в боковой панели. Такой подход заменяет наши старые <em>Смотрите также</em> в конце статей. О том, как создавать контейнер с быстрыми ссылками, читайте в статье <a href="/en-US/docs/MDN/Contribute/Structures/Quicklinks">Быстрые ссылки</a>.</p>

<h2 id="Схемы_URL-адресов">Схемы URL-адресов</h2>

<p>В целях безопасности создавайте ссылки, имеющие следующие схемы:</p>

<ul>
 <li><code>http://</code></li>
 <li><code>https://</code></li>
 <li><code>ftp://</code></li>
 <li><code>mailto:</code></li>
</ul>

<p>Дргуие схемы просто-напросто будут удалены.</p>

<div class="note">
<p>Особые URL-схемы, такие как <code>about:</code> и <code>chrome:</code> используются Firefox, Google Chrome и некоторыми другими браузерами, чтобы предоставить доступ к особым опциям, таким как привилегерованные элементы, отладочная информация и так далее. Эти ссылки не работают в содержимом статьи, поэтому не создавайте ссылки, используя эти схемы в MDN. То же относится и к схемам <code>javascript:</code> и <code>jar:</code>, которые блокируются большинством браузеров в целях безопасности.</p>
</div>

<p>{{EditorGuideQuicklinks}}</p>