1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
---
title: Разбираемся с веб ссылками
slug: Learn/Common_questions/What_are_hyperlinks
tags:
- Навигация
- инфраструктура
- начальный уровень
translation_of: Learn/Common_questions/What_are_hyperlinks
original_slug: Learn/Understanding_links_on_the_web
---
<div class="summary">
<p>В данной статье мы узнаем, что такое ссылки и почему они важны.</p>
</div>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Предварительно:</th>
<td>Вы должны знать <a href="/en-US/Learn/How_the_Internet_works">как работает интернет</a> и иметь представление о <a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">разнице между веб-страницей, веб-сайтом, веб-сервером и поисковой системой.</a></td>
</tr>
<tr>
<th scope="row">Цель:</th>
<td>Изучить, что такое веб-ссылки и почему они важны.</td>
</tr>
</tbody>
</table>
<h2 id="Коротко">Коротко</h2>
<p>Гиперссылки, в народе ссылки, являются фундаментальной основой Веба. Чтобы объяснить, что такое ссылки, мы должны обратиться к основам Веб-архитектуры. </p>
<p>В 1989 году Тим Бернерс-Ли (Tim Berners-Lee), создатель Веба, говорил о трёх китах, на которых стоит Веб:</p>
<ol>
<li>{{Glossary("URL")}}, система адресов, которая отслеживает веб-документы. </li>
<li>{{Glossary("HTTP")}}, транспортный протокол, помогающий найти документы по заданным URL</li>
<li>{{Glossary("HTML")}}, формат документа, позволяющий встраивать <em>гиперссылки</em></li>
</ol>
<p>Как вы видите, все в Вебе крутится вокруг документов и способах обеспечения доступа к ним. Первоначальная цель Веба заключалась в предоставлении лёгкого инструмента доступа к текстовым документам, их чтения и навигации по ним. С тех пор Веб эволюционировал в инструмент обеспечения доступа к изображениям, видео и бинарным данным, но все эти улучшения вряд ли были бы возможны без тех самых трёх китов, о которых говорил Тим. </p>
<p>До Веба было весьма сложно получить доступ к документам и перемещаться от одного к другому. Став понятными для пользователя, URL-адреса уже сделали жизнь гораздо проще, но нам довольно сложно было печатать длинный URL каждый раз, когда мы хотели получить документ. Вот тут то гиперссылки и совершили революцию. Ссылка может связать любой текст с URL, так что пользователь может моментально достигнуть цели всего лишь активируя ссылку.</p>
<p>По умолчанию голубого цвета и подчёркнутые, ссылки выделяются из общего текста. Кликните на ссылку, чтобы активировать её, или, если вы используете клавиатуру, перейдите на ссылку при помощи Tab и нажмите Enter.</p>
<p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p>
<p>Ссылки стали прорывом, который сделал Веб таким полезным и популярным. В остальной части этой статьи мы обсудим различные типы ссылок и их важность в современном Веб-дизайне. </p>
<h2 id="Активно_изучаем">Активно изучаем</h2>
<p><em>В данном разделе нет контента. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
<h2 id="Глубокое_погружение">Глубокое погружение</h2>
<p>Как мы определили, ссылка <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;">— </span><strong style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,Helvetica,sans-serif; font-size: 28px; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;"> </strong>это строка, которая связана с URL. Мы используем ссылки, чтобы с лёгкостью перепрыгивать с одного документа на другой. Здесь существуют некоторые нюансы, которые важно рассмотреть: </p>
<h3 id="Типы_ссылок">Типы ссылок</h3>
<dl>
<dt>Внутренняя ссылка</dt>
<dd>Ссылка между двумя веб-страницами, принадлежащими к одному веб-сайту. Без внутренних ссылок нет такого понятия как веб-сайт (конечно, если это не одностраничный сайт).</dd>
<dt>Внешняя ссылка</dt>
<dd>Ссылка с вашей веб-страницы на чью-либо другую веб-страницу. Без внешних ссылок не будет Веба, так как Веб <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;">— </span> это сеть веб-страниц. Используйте внешние ссылки для того, чтобы предоставить информацию помимо той, что вы поддерживаете на вашем сайте. </dd>
<dt>Входящие ссылки</dt>
<dd>Ссылка с чьей-либо веб-страницы на ваш сайт. Это внешняя ссылка наоборот. Имейте в виду, что вам не обязательно отвечать тем же кому-то, кто ссылается на ваш сайт.</dd>
</dl>
<p>Когда вы создаёте веб-сайт, фокусируйтесь на внутренних ссылках, так как они делают ваш сайт возможным и удобным для использования. Найдите нужный баланс между большим и недостаточным количеством ссылок. Мы поговорим о дизайне навигации сайта в другой статье, но в качестве правила, каждый раз когда вы создаёте веб-страницу, убедитесь, что хотя бы одна из ваших страниц ссылается на неё. С другой стороны, если на вашем сайте более чем десять страниц, добиваться того, чтобы каждая страница ссылалась друг на друга, может быть весьма контрпродуктивно. </p>
<p>Когда вы начинаете, вам не имеет смысла сильно волноваться о наличии внешних и входящих ссылок, но они важны, если вы хотите, чтобы поисковые системы находили ваш сайт. (См. более детальное объяснение ниже.)</p>
<h3 id="Якоря_Anchors">Якоря (Anchors)</h3>
<p>В большинстве случаев ссылки связывают две страницы вместе. <strong>Якоря </strong>(<strong>Anchors) </strong>же связывают две области одного документа. Когда вы следуете по ссылке указывающей на якорь, ваш браузер переходит с одной части текущего документа на другую, вместо загрузки нового документа. Хотя вы создаёте и используете якоря точно так же, как любые другие ссылки. </p>
<p><img alt="Example of a basic display and effect of an anchor in a web page" src="https://mdn.mozillademos.org/files/8627/link-2.png" style="height: 492px; width: 477px;"></p>
<h3 id="Ссылки_и_поисковые_системы">Ссылки и поисковые системы</h3>
<p>Ссылки важны как для ваших пользователей, так и для поисковых систем. Каждый раз когда поисковые движки проверяют страницу, они индексируют сайт следуя по доступным ссылкам. Поисковые движки не только следуют по ссылкам, чтобы обнаружить разные страницы сайта, но также используют текст ссылки, чтобы определить поисковый запрос, который позволит найти страницу. </p>
<p>Итак, ссылки влияют на готовность поисковых систем сослаться на ваш сайт. Проблема в том, что активность поисковых систем сложно оценить. Компании обычно хотят, чтобы их сайты выводились первыми в результатах поиска, и многочисленные поиски решений дают нам понять, по крайней мере, следующее:</p>
<ul>
<li>Текст ссылки влияет на то, какой поисковый запрос выдаст URL.</li>
<li>Чем больше существует входящих ссылок на сайт, тем выше он будет в результатах поиска. </li>
<li><em>Внешние ссылки </em>влияют на оценку и сайта источника, и сайта, на который они ссылаются, но в какой степени, <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;">— </span> не известно. </li>
</ul>
<p><a href="http://en.wikipedia.org/wiki/Search_engine_optimization">SEO</a> (поисковая оптимизация) - это комплекс мер для "поднятия" позиции сайтов в поисковой выдаче. Оптимизация использования ссылок на сайте является одной из ключевых в SEO.</p>
<h2 id="Следующие_шаги">Следующие шаги</h2>
<p>Так что теперь, конечно, вы захотите создать несколько веб-страниц со ссылками!</p>
<ul>
<li>Чтобы получить более теоретическое обоснование, узнайте об <a href="/en-US/docs/Learn/Understanding_URLs">URL-адресах и их структуре</a>, поскольку каждая ссылка указывает на URL-адрес.</li>
<li>Хотите что-нибудь более практичное? В статье <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Создание гиперссылок</a> нашего модуля <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a> подробно объясняется, как реализовывать ссылки.</li>
<li>Приступите к изучению HTML. Научитесь <a href="/en-US/docs/Learn/HTML/Write_a_simple_page_in_HTML">создавать HTML-документы и связывать их между собой.</a></li>
</ul>
|
