diff options
Diffstat (limited to 'files/ru/learn/common_questions')
7 files changed, 938 insertions, 0 deletions
diff --git a/files/ru/learn/common_questions/how_does_the_internet_work/index.html b/files/ru/learn/common_questions/how_does_the_internet_work/index.html new file mode 100644 index 0000000000..19230a4042 --- /dev/null +++ b/files/ru/learn/common_questions/how_does_the_internet_work/index.html @@ -0,0 +1,102 @@ +--- +title: Как работает Интернет +slug: Learn/How_the_Internet_works +tags: + - Начинающий + - Руководство + - Учебник + - туториал +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +<div>{{LearnSidebar}}</div> + +<div class="summary"> +<p>Эта статья о том, что такое Интернет, и как он работает.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Необходимые знания:</th> + <td>Отсутствуют, но мы будем признательны, если вы сначала прочтете <a href="/en-US/docs/Learn/Thinking_before_coding">Материал о там как начать разрабатывать свой сайт</a></td> + </tr> + <tr> + <th scope="row">Цель:</th> + <td> + <p>Вы изучите основы технической инфраструктуры Веба и поймете разницу между Вебом и интернетом. </p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Резюме">Резюме</h2> + +<p><strong>Интернет</strong> является основой сети (the Web), технической инфраструктурой, благодаря которой и существует Всемирная Паутина. По своей сути, интернет - очень большая сеть компьютеров, которые могут взаимодействовать друг с другом.</p> + +<p><a href="https://www.wikiwand.com/ru/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82#/.D0.98.D1.81.D1.82.D0.BE.D1.80.D0.B8.D1.8F" rel="external">История интернета не до конца ясна</a>. Проект по созданию интернета был начат в 60-х годах как исследовательский проект при поддержке министерства обороны США, но уже в 80-е годы вырос в сеть, которую поддерживали и развивали множество университетов и частных компаний. Технологии, лежащие в основе интернета, также продолжали развиваться со временем, но основной принцип работы не сильно изменился: Интернет - это способ подключить компьютеры в единую сеть и убедиться, что даже при серьезных сбоях, они все равно найдут способ связаться друг с другом.</p> + +<h2 id="Активное_изучение">Активное изучение</h2> + +<ul> + <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc">Как работает интернет за 5 минут</a>: 5-минутный видеоролик поможет вам понять базовые принципы работы интернета (автор Aaron Titus).</li> +</ul> + +<h2 id="Погружаемся_глубже">Погружаемся глубже</h2> + +<h3 id="Простая_сеть">Простая сеть</h3> + +<p>Когда нужно связать между собой два компьютера, вы должны связать их в сеть либо проводным (обычно с помощью <a href="https://ru.wikipedia.org/wiki/Коммутационный_шнур">Ethernet кабеля</a>), либо беспроводным способом (например, с помощью <a href="http://ru.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> или <a href="http://ru.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a>). Современные компьютеры поддерживают любой из этих способов связи.</p> + +<div class="note"> +<p><strong>Примечание:</strong> До конца этой статьи мы будем говорить только о физическом (проводном) способе подключения, но беспроводные сети работают аналогичным образом.</p> +</div> + +<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p> + +<p>Таким способом Вы можете подключить более двух компьютеров, но с каждым новым это становится все сложнее. Если хочется подключить, скажем, 10 компьютеров, вам понадобится 45 кабелей и 9 сетевых плат в каждом компьютере!</p> + +<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p> + +<p>Чтобы решить эту проблему, каждый компьютер в сети подключается к специальному маленькому компьютеру. Этот компьютер называют <em>маршрутизатором</em>. Маршрутизатор исполняет только одну роль: как сигнальщик на железной дороге он следит за тем, чтобы пакет, отправленный одним компьютером — источником — достиг пункта назначения. Чтобы отправить сообщение компьютеру B, компьютер A сначала должен отправить его маршрутизатору, который перенаправит его компьютеру B и проконтролирует, чтобы данные не попали компьютеру C.</p> + +<p>С добавлением маршрутизатора наша сеть здорово упрощается: чтобы соединить 10 компьютеров нам требуется только 10 кабелей (каждый кабель соединяет маршрутизатор с одним из компьютеров).</p> + +<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p> + +<h3 id="Сеть_сетей">Сеть сетей</h3> + +<p>Пока все нормально. Но что нам делать, если нужно объединить в сеть сотни, тысячи или миллиарды компьютеров? Конечно, один маршрутизатор не справится с этой задачей, но если вы внимательно читали, то помните, что маршрутизатор — это обычный компьютер, и ничто не мешает нам соединить друг с другом 2 маршрутизатора. Давайте сделаем это.</p> + +<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p> + +<p>Подключая компьютеры к маршрутизатору, а затем — маршрутизатор к другому маршрутизатору, мы можем увеличивать нашу сеть до сколь угодно больших размеров.</p> + +<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p> + +<p>Такая сеть уже очень похожа на то, что мы называем интернетом, но мы что-то упустили. Наша сеть построена для решения только наших задач. Но кроме нее есть и другие сети: наши друзья, соседи — кто угодно может создать свою сеть. Как же нам их объединить? Мы не можем протянуть кабели между нашим домом и всеми остальными сетями в мире. Чтобы решить эту проблему, мы можем воспользоваться уже существующими кабельными сетями. Ведь у нас дома уже есть кабели, например, электрические или телефонные. Телефонный провод уже соединяет ваш дом со всем остальным миром, так что он идеально подходит для решения нашей задачи. Чтобы подключить нашу сеть к глобальной сети с помощью телефонного провода, нам понадобится специальное оборудование, которое называется <em>модем</em>. Модем перекодирует информацию, поступающую из нашей сети в формат, который можно передавать через телефонную сеть, и наоборот, декодируют информацию из телефонной сети в формат, который распознают наши компьютеры.</p> + +<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p> + +<p>Итак, мы подключились к телефонной сети. Следующий шаг — передать сообщение из нашей сети в сеть, с которой мы хотим связаться. Чтобы сделать это, мы должны подключить нашу сеть к провайдеру услуг интернета (Internet Service Provider (ISP)). Провайдер — компания, которая обслуживает специальные маршрутизаторы, которые не только подключены друг к другу (объединяют в единую сеть всех клиентов провайдера), но также связаны с маршрутизаторами других провайдеров. Таким образом, наше сообщение, пройдя транзитом через сеть нескольких провайдеров, достигнет сеть назначения. Интернет — это сеть сетей, которая объединяет в себе всю вышеперечисленную инфраструктуру.</p> + +<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p> + +<h3 id="Поиск_компьютера">Поиск компьютера</h3> + +<p>Чтобы послать сообщение какому-то компьютеру, необходимо как-то обратиться к нему, выделить среди других. Поэтому каждый компьютер, подключенный к сети, имеет свой уникальный адрес для связи: этот адрес называют IP-адресом (IP — сокращение для <em>Internet Protocol</em>, протокол интернета). В зависимости от версии протокола IP этот адрес может записываться по-разному. Самая широко используемая версия интернет-протокола — версия 4. Адреса IPv4 обычно записываются в виде четырёх чисел, разделенных точками, например: 192.168.2.10.</p> + +<p>Такие адреса отлично подходят для компьютеров, но людям очень сложно их запоминать. Чтобы упростить себе жизнь, мы можем присвоить каждому IP-адресу псевдоним с понятным для человека именем. Такой псевдоним называют доменным именем. Например, google.com — доменное имя, которое является псевдонимом IP-адреса 173.194.121.32. Использование доменного имени — самый простой способ обратиться к компьютеру в интернете.</p> + +<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> + +<h3 id="Интернет_и_веб">Интернет и веб</h3> + +<p>Как вы уже заметили, когда мы просматриваем Веб с помощью браузера, обычно мы используем доменное имя, чтобы обратиться к веб-сайту. Означает ли это, что Интернет и Веб — это одно и то же? Ответ не так прост. Мы уже знаем, что Интернет — это техническая основа, которая позволяет миллиардам компьютеров связываться друг с другом. Среди этих компьютеров есть небольшая группа (называемая веб-серверами), которые могут отправлять сообщения, распознаваемые браузерами. <em>Интернет</em> — это инфраструктура, а <em>Веб</em> — это сервис, построенный на основе этой инфраструктуры. Стоит отметить, что кроме Веба есть и другие сервисы, построенные на базе Интернета. Например, электронная почта или {{Glossary("IRC")}}.</p> + +<h2 id="Что_дальше">Что дальше</h2> + +<ul> + <li><a href="/ru/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li> + <li><a href="/ru/docs/Learn/Pages_sites_servers_and_search_engines">Понимание разницы между веб-страницей, веб-сайтом, веб-сервером и поисковиком</a></li> + <li><a href="/ru/docs/Learn/Understanding_domain_names">Что такое доменные имена</a></li> +</ul> diff --git a/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html new file mode 100644 index 0000000000..0a9b7a643f --- /dev/null +++ b/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -0,0 +1,118 @@ +--- +title: 'Веб-страницы, веб-сайты, веб серверы и поисковики' +slug: Learn/Pages_sites_servers_and_search_engines +tags: + - ActiveLearning + - Beginner + - WebMechanics + - Активное изучение + - Новичку + - Программисту +translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines +--- +<div class="summary"> +<p><span class="seoSummary">В этой статье мы расскажем о различных понятиях связанных с Веб: о веб-страницах, веб-сайтах, веб-серверах и о поисковых системах. Эти термины часто ставят в тупик как начинающих работу с Веб, так и людей, редко пользующихся сетью. Давайте же разберемся, что именно эти понятия означают!</span></p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Необходимые знания:</th> + <td> + <p>Вы должны знать, <a href="/en-US/Learn/How_the_Internet_works">как работает Интернет</a>.</p> + </td> + </tr> + <tr> + <th scope="row">Цель:</th> + <td>Изучить различия между веб-страницами, веб-сайтами, веб-серверами и поисковыми системами.</td> + </tr> + </tbody> +</table> + +<h2 id="В_двух_словах">В двух словах</h2> + +<p>Как и любая другая область знаний, Веб полон специфичных терминов. Но не волнуйтесь, мы не хотим перегружать Вас в самом начале Вашего пути (а если любопытство всё же берёт верх, то у нас есть <a href="/ru/docs/MDN/Doc_status/Glossary">словарь</a>). Однако, для начала несколько базовых терминов всё же придётся усвоить, так как Вы будете встречать их в наших статьях довольно часто. Иногда эти термины легко перепутать, так как они связаны между собой, но имеют разные функции. Вы, наверное, не раз замечали их неправильное употребление в новостях или где-либо ещё.</p> + +<p>Мы разберём эти понятия и технологии чуть позже, а сейчас краткие определения ниже станут для Вас очень хорошим началом:</p> + +<dl> + <dt>Веб-страница</dt> + <dd>Документ, который может быть отображён веб-браузерами, такими как: Firefox, Google Chrome, Microsoft Internet Explorer / Edge или Safari от Apple. Само понятие "веб-страница" для краткости будем называть просто "страница".</dd> + <dt>Веб-сайт</dt> + <dd>Коллекция веб-страниц, связанных между собой какими-либо способами. Употребление в лексике: "веб-сайт" или просто "сайт".</dd> + <dt>Веб-сервер</dt> + <dd>Компьютер, предоставляющий компьютерное и программное обеспечение, необходимое для функционирования веб-сайта.</dd> + <dt>Поисковая система</dt> + <dd>Веб-сайт, помогающий в поиске других веб-страниц, например такие как: Google, Bing или Yahoo.</dd> +</dl> + +<h2 id="Активное_изучение">Активное изучение</h2> + +<p><em>Пока что активное изучение не доступно. Если Вы можете предоставить полезную информацию, то, <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">пожалуйста, окажите нам содействие</a>. </em></p> + +<h2 id="Погружаемся_глубже">Погружаемся глубже</h2> + +<p>Итак, давайте копнем чуть глубже и узнаем, как эти 4 термина связаны между собой, и почему данные понятия зачастую путают друг с другом.</p> + +<h3 id="Веб-страница">Веб-страница</h3> + +<p><strong>Веб-страница</strong> - простой документ, отображаемый на экране компьютера посредством <a href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80">браузера</a>. Такой документ написан языком <a href="https://ru.wikipedia.org/wiki/HTML">HTML</a> (который мы рассмотрим более детально <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">в других статьях</a>). Веб-страница может содержать множество различных материалов, таких как:</p> + +<ul> + <li><em>стилевая информация</em> — контролирование страницы по восприятию и ощущению</li> + <li><em>скрипты </em>— которые делают страницу более динамичной и удобной в использовании для пользователей</li> + <li><em>медиа</em> — изображения, музыка и видео.</li> +</ul> + +<div class="note"> +<p><strong>Примечание: </strong>браузеры зачастую могут отображать некоторые документы в формате <a href="https://ru.wikipedia.org/wiki/Portable_Document_Format">PDF</a> файла или изображения, но термин <strong>веб-страница</strong> больше относится непосредственно к HTML-документам. До конца статьи, в данном случае, мы будем использовать понятие <strong>документ</strong>.</p> +</div> + +<p>Все веб-страницы в сети имеют свой уникальный адрес. Чтобы получить доступ к нужной странице просто наберите ее адрес в адресной строке Вашего браузера:</p> + +<p style="text-align: center;"><img alt="Example of a web page address in the browser address bar" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="float: left; height: 239px; width: 650px;"></p> + + + + + + + + + + + + + +<p><em>Веб-сайт</em> - это коллекция страниц, связанных между собой какими-либо способами (включая их связи с иными ресурсами), которые доступны под единым доменным именем. Каждая страница сайта содержит прямые ссылки (практически всегда выделенные части текста, по которым можно кликнуть мышью), что позволяет пользователю быстро переходить от одной страницы веб-сайта к другой.</p> + +<p>Чтобы получить доступ к веб-сайту, наберите его доменное имя в адресной строке браузера, и Ваш браузер отобразит главную страницу сайта или, по-другому, домашнюю страницу:</p> + +<p><img alt="Example of a web site domain name in the browser address bar" src="https://mdn.mozillademos.org/files/8531/web-site.jpg" style="height: 365px; width: 650px;"></p> + +<p><em>Веб-страницу </em>и<em> веб-сайт </em>особенно легко спутать между собой, когда <em>сайт</em> содержит всего одну <em>страницу. </em>Такой сайт иногда называют <em>одностраничным веб-сайтом.</em></p> + +<h3 id="Веб-сервер">Веб-сервер</h3> + +<p><em>Веб-сервер</em> - это компьютер, предоставляющий в сеть один или множество <em>веб-сайтов (хостинг)</em>. Понятие "хостинг" - означает, что все <em>страницы </em>и прикрепленные к ним файлы содержатся на данном компьютере. Т.е. <em>Веб-сервер</em> будет отправлять любую <em>страницу</em> с <em>сайта</em> по запросу любого пользователя, что и будет хостингом для браузера пользователя.</p> + +<p>Не путайте понятия <em>веб-сайта</em> и <em>веб-сервера</em>. Например, если Вы слышите, что кто-либо говорит: "Мой веб-сайт не отвечает", на самом деле это означает, что это <em>веб-сервер</em> не отвечает на запрос, и поэтому недоступен и сам <em>сайт.</em> Более того, так как веб-сервер может разместить несколько сайтов, термин веб-сервер никогда не используется для обозначения веб-сайта, так как это могло бы привести к большой путанице. Вернемся к предыдущему примеру: если бы мы сказали: "Мой веб-сервер не отвечает", это значило бы, что на этом сервере нет доступных сайтов в данный момент.</p> + +<h3 id="Поисковая_система">Поисковая система</h3> + +<p><em>Поисковые системы</em> являются распространенной причиной путаницы в сети. <em>Поисковая система</em> - это специальный вид веб-сайта, который помогает пользователям найти нужные страницы <em>других</em> сайтов.</p> + +<p>Наиболее популярные поисковые системы: <a href="https://www.google.com/">Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a>, и многие другие. Некоторые из них универсальны, а какие-то ориентированы на определенную область. Используйте тот поисковик, который удобен Вам.</p> + +<p>Многие начинающие пользователи сети путают между собой поисковую систему и браузер. Давайте поясним: <em><strong>браузер</strong></em> - это программное обеспечение, которое находит и отображает веб-страницы; <strong><em>поисковая система</em></strong> - это специальный вид сайта, который помогает пользователям найти нужные страницы <em>других</em> сайтов. Путаница возникает из-за того, что когда кто-либо впервые запускает браузер, тот отображает домашнюю страницу поисковой системы. Это именно так, ведь первое, что Вы делаете, запуская браузер, это находите веб-страницу и открываете ее. Но не путайте инфраструктуру (т.е. браузер) с сервисом (т.е. поисковой системой). Это отличие несколько поможет Вам, но даже некоторые специалисты произвольно употребляют данные понятия, так что из-за этого не следует особо переживать. </p> + +<p>Ниже пример того, как браузер Firerox по умолчанию отображает окно поиска Google на стартовой (домашней) странице:</p> + +<p><img alt="Example of Firefox nightly displaying a custom Google page as default" src="https://mdn.mozillademos.org/files/8533/search-engine.jpg" style="height: 399px; width: 650px;"></p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Погружаемся глубже: <a href="https://developer.mozilla.org/ru/docs/Learn/What_is_a_web_server">что такое Веб-сервер</a></li> + <li>Рассмотрим, как веб-страницы связаны с веб-сайтом: <a href="https://developer.mozilla.org/ru/docs/Learn/Understanding_links_on_the_web">Разбираемся с веб-ссылками</a></li> +</ul> diff --git a/files/ru/learn/common_questions/what_are_browser_developer_tools/index.html b/files/ru/learn/common_questions/what_are_browser_developer_tools/index.html new file mode 100644 index 0000000000..8cd514efcd --- /dev/null +++ b/files/ru/learn/common_questions/what_are_browser_developer_tools/index.html @@ -0,0 +1,172 @@ +--- +title: Обзор инструментов разработки в браузерах +slug: Learn/Discover_browser_developer_tools +tags: + - Beginner + - Browser + - CSS + - CodingScripting + - Dev Tools + - HTML + - JavaScript + - Браузер + - Новичку + - Обучение +translation_of: Learn/Common_questions/What_are_browser_developer_tools +--- +<div>{{IncludeSubnav("/ru-RU/Learn")}}</div> + +<p>{{Previous("Learn/Getting_started_with_the_web")}}</p> + +<div class="summary"> +<p>Каждый современный интернет-браузер оснащён мощными инструментами для веб-разработчика. Эти инструменты позволяют делать различные вещи, от изучения загруженных в настоящий момент HTML, CSS и JavaScript до отображения в каких ресурсах нуждается страница и как долго она будет загружаться. Эта статья научит Вас использовать базовые функции инструментов разработчика в Вашем браузере.</p> +</div> + +<div class="note"> +<p><strong>Заметка</strong>: Прежде чем начать заниматься с примерами, откройте <a href="http://mdn.github.io/beginner-html-site-scripted/">пример сайта для начинающих</a>, с которым мы работали на <a href="/en-US/Learn/Getting_started_with_the_web">предыдущих занятиях</a>. Вам следует держать его открытым, чтобы выполнить описанные ниже действия.</p> +</div> + +<h2 id="Как_открыть_инструменты_веб-разработчика_в_Вашем_браузере">Как открыть инструменты веб-разработчика в Вашем браузере?</h2> + +<p>Панель разработчика находится в нижней части Вашего браузера :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9561/Screenshot%20from%202014-11-25%2012:32:57.png" style="display: block; height: 625px; margin: 0px auto; width: 775px;"></p> + +<p>Как её отобразить? Есть три варианта:</p> + +<ul> + <li><em><strong>Клавиатура.</strong></em> <em>Ctrl + Shift + I</em>, кроме + + <ul> + <li><strong>Internet Explorer. </strong><em>(клавиша - F12) </em></li> + <li><strong>Mac OS X. </strong><em><span class="Unicode">(сочетание клавиш - ⌘ + ⌥ + I )</span></em></li> + </ul> + </li> + <li><span class="Unicode"><em><strong>Панель Меню. </strong></em></span> + <ul> + <li><strong>Firefox. </strong>Открыть меню <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> <span class="Unicode"><em><span class="Unicode">➤ <img alt="" src="https://mdn.mozillademos.org/files/9639/Screenshot%20from%202014-11-26%2014:24:56.png" style="height: 40px; width: 45px;"></span></em><em><span class="Unicode">➤ Инструменты разработки, или</span></em><span class="Unicode"> </span><em>Инструменты ➤</em></span><em> Веб-разработка ➤ Инструменты разработки</em></li> + <li><strong>Chrome.</strong> <em><span class="Unicode">Дополнительные инструменты ➤</span> Инструменты разработчика</em></li> + <li><strong>Safari.</strong> <em>Разработка <span class="Unicode">➤</span> Показать Web Inspector .</em> Если Вы не видите меню "Разработка", зайдите в <em>Safari<span class="Unicode"> ➤</span> Настройки ➤ Дополнительно, </em> и проверьте стоит ли галочка <em>напротив "Показать меню разработки"</em>. </li> + <li><strong>Opera</strong>. <em><span class="Unicode">Меню </span></em> <em><span class="Unicode">➤</span> </em> <em><span class="Unicode">Разработка ➤</span> Инструменты разработчика. </em> Если Вы не видите меню "Разработка", включите его отображение, перейдя в Меню <em><span class="Unicode">➤</span> </em> Другие инструменты <em><span class="Unicode">➤</span> </em>Показать меню разработчика.</li> + </ul> + </li> + <li><strong><em>Контекстное меню.</em></strong> Нажмите правой кнопкой мыши на любом участке веб-страницы (Ctrl-клик для Mac), появится контекстное меню, в котором Вам нужно выбрать пункт <em>Исследовать Элемент</em>. (<em>дополнение: </em>этот способ отобразит Вам код того элемента, на котором вы щёлкнули правой кнопкой.)</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9605/inspect-element-option.png" style="display: block; height: 264px; margin: 0px auto; width: 350px;"></p> + +<h2 id="Inspector_DOM_обозреватель_и_CSS_редактор">Inspector: DOM обозреватель и CSS редактор</h2> + +<p>По-умолчанию, в панели открывается вкладка<em> </em>Inspector, Вы можете увидеть это на скриншоте снизу. Этот инструмент позволяет Вам видеть, как HTML-код выглядит на странице в настоящем времени, также как CSS, который применён к каждому элементу на странице. Это также позволяет Вам в реальном времени редактировать как HTML, так и CSS. Внесённые изменения можно увидеть непосредственно в окне браузера.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9607/inspector.png" style="display: block; height: 727px; margin: 0px auto; width: 800px;"></p> + +<p>Если Вы н<em>е видите</em> Inspector,</p> + +<ul> + <li>Нажмите на вкладку <em>Inspector </em>.</li> + <li>В Internet Explorer, нажмите на <em>DOM Обозреватель, </em>или нажмите Ctrl + 1.</li> + <li>В Safari, элементы управления представлены не так чётко, но Вы должны увидеть HTML код, если Вы не выбрали что-то другое в окне разработки. Нажмите на кнопку <em>Стиль,</em> чтобы увидеть CSS.</li> +</ul> + +<h3 id="Обзор_DOM_inspector">Обзор DOM inspector</h3> + +<p>Для начала, попробуйте нажать правой кнопкой мыши (Ctrl+клик) по элементу HTML в DOM inspector и посмотрите на контекстное меню. Пункты меню могут различаться в разных браузерах, но важными из них являются одни и те же:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9609/dev-tool-context-menu.png" style="display: block; height: 236px; margin: 0px auto; width: 200px;"></p> + +<ul> + <li><strong>Удалить узел</strong> (иногда <em>Удалить элемент</em>). Удаляет текущий элемент.</li> + <li><strong>Править как HTML</strong> (иногда <em>Добавить атрибут</em>/<em>Править текст</em>). Позволяет редактировать HTML и видеть результат "вживую". Очень полезно для отладки и тестирования.</li> + <li><strong>:hover/:active/:focus</strong>. Заставляет элементы переключить своё состояние на то, к которому применён Ваш стиль.</li> + <li><strong>Копировать/Копировать как HTML</strong>. Копирует текущий выделенный HTML.</li> +</ul> + +<p>Попробуйте изменить что-нибудь через окно Inspector на Вашей странице прямо сейчас. Дважды кликните по элементу, или нажмите правой кнопкой мыши и выберите <em>Править как HTML </em>из контекстного меню. Вы можете сделать любые изменения, какие захотите, но Вы не сможете их сохранить.</p> + +<h3 id="Обзор_CSS_редактора">Обзор CSS редактора</h3> + +<p>По-умолчанию, CSS редактор отображает CSS свойства применённые к текущему выбранному элементу:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9631/css-viewer-2.png" style="border: 1px solid black; display: block; height: 218px; margin: 0px auto; width: 326px;"></p> + +<p>Эти функции особенно удобны:</p> + +<ul> + <li>Свойства, применённые к текущему элементу, отображаются в порядке убывания приоритета.</li> + <li>Можно убирать галочки напротив свойств для того чтобы видеть, что получится, если их удалить.</li> + <li>Нажмите на маленькую стрелочку рядом со свойством, чтобы увидеть все его эквиваленты.</li> + <li>Нажмите на имя свойства или его значение, чтобы открыть текстовое окошко, в котором Вы можете задать новые значения и увидеть, как изменится Ваш элемент с новыми значениями.</li> + <li>Рядом с каждым свойством указаны имя файла и номер строки. где располагается это свойство. Щелчок по этому пути перенесёт Вас в окно, где можно редактировать этот CSS и сохранить.</li> + <li>Вы можете также нажать на закрывающуюся фигурную скобку любого свойства, чтобы вывести текстовое поле на новую строку, где Вы сможете написать совершенно новую декларацию для Вашей страницы.</li> +</ul> + +<p>Вы должно быть уже заметили другие вкладки в CSS редакторе:</p> + +<ul> + <li><em>Вычислено</em>: Здесь указаны все вычисления свойств выделенного элемента (окончательные, нормализованные значения применённые браузером).</li> + <li><em>Блоковая модель</em>: Отображает блочную модель выделенного элемента, здесь Вы можете увидеть внешние и внутренние отступы, а также границы применённые к элементу, здесь также указан их размер.</li> + <li><em>Анимации</em>: В Firefox, на вкладке <em>Анимации</em> Вы можете увидеть анимации применённые к выделенному элементу.</li> +</ul> + +<h3 id="Узнать_больше">Узнать больше</h3> + +<p>Узнать больше об Inspector в различных браузерах:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Firefox Page inspector</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255008%28v=vs.85%29.aspx">IE DOM Explorer</a></li> + <li><a href="https://developer.chrome.com/devtools/docs/dom-and-styles">Chrome DOM inspector</a> (Inspector в Opera схож с Inspector в Chrome)</li> + <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1">Safari DOM inspector and style explorer</a></li> +</ul> + +<h2 id="Консоль_JavaScript">Консоль JavaScript </h2> + +<p>Консоль JavaScript невероятно полезный инструмент для отладки JavaScript, если он не работает, как ожидалось. Она позволяет Вам загружать JavaScript вопреки порядку загрузки скрипта в браузере, и докладывает об ошибках как только браузер пытается выполнить Ваш код. Для доступа к консоли из любого браузера просто нажмите на кнопку Console. (В Internet Explorer, нажмите <em>Ctrl + 2</em>.) Откроется окно, как показано ниже:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9541/console.png" style="border: 1px solid black; display: block; height: 249px; margin: 0px auto; width: 821px;"></p> + +<p>Чтобы понять, что происходит, попробуйте ввести фрагменты кода в консоль один за другим (и затем нажмите Enter):</p> + +<ol> + <li> + <pre class="brush: js">alert('hello!');</pre> + </li> + <li> + <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'purple';</pre> + </li> + <li> + <pre class="brush: js">var myImage = document.createElement('img'); +myImage.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg'); +document.querySelector('h1').appendChild(myImage);</pre> + </li> +</ol> + +<p>Теперь попробуйте ввести следующую, неправильную версию кода и посмотрите, что из этого получится.</p> + +<ol> + <li> + <pre class="brush: js">alert('hello!);</pre> + </li> + <li> + <pre class="brush: js">document.cheeseSelector('html').style.backgroundColor = 'purple';</pre> + </li> + <li> + <pre class="brush: js">var myImage = document.createElement('img'); +myBanana.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg'); +document.querySelector('h1').appendChild(myImage);</pre> + </li> +</ol> + +<p>Вы увидите некоторые ошибки, которые сообщит Вам браузер. Зачастую эти ошибки выглядят довольно загадочно, но они должны быть довольно простыми, чтобы можно было выяснить проблему!</p> + +<h3 id="Узнать_больше_2">Узнать больше</h3> + +<p>Узнать больше о JavaScript консоли в различных браузерах:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Firefox Web Console</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255006%28v=vs.85%29.aspx">IE JavaScript console</a></li> + <li><a href="https://developer.chrome.com/devtools/docs/console">Chrome JavaScript Console</a> (Inpector в Opera схож с Inspector в Chrome)</li> + <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1">Safari Console</a></li> +</ul> diff --git a/files/ru/learn/common_questions/what_are_hyperlinks/index.html b/files/ru/learn/common_questions/what_are_hyperlinks/index.html new file mode 100644 index 0000000000..63a22eb949 --- /dev/null +++ b/files/ru/learn/common_questions/what_are_hyperlinks/index.html @@ -0,0 +1,102 @@ +--- +title: Разбираемся с веб ссылками +slug: Learn/Understanding_links_on_the_web +tags: + - Навигация + - инфраструктура + - начальный уровень +translation_of: Learn/Common_questions/What_are_hyperlinks +--- +<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> diff --git a/files/ru/learn/common_questions/what_is_a_domain_name/index.html b/files/ru/learn/common_questions/what_is_a_domain_name/index.html new file mode 100644 index 0000000000..fb561cf8ea --- /dev/null +++ b/files/ru/learn/common_questions/what_is_a_domain_name/index.html @@ -0,0 +1,155 @@ +--- +title: Что такое доменные имена +slug: Learn/Understanding_domain_names +tags: + - DNS + - вводная + - домен + - доменное имя + - начальный уровень +translation_of: Learn/Common_questions/What_is_a_domain_name +--- +<div class="summary"> +<p>В этом материале мы обсудим доменные имена: что это такое, как они формируются и как зарегистрировать домен для себя.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Необходимые знания:</th> + <td>Вы должны знать <a href="/en-US/docs/Learn/How_the_Internet_works">как работает Интернет</a> и понимать устройтво <a href="/en-US/Learn/Understanding_URLs">устройство URL</a>.</td> + </tr> + <tr> + <th scope="row">Цель:</th> + <td>Вы узнаете, что такое доменные имена, как они работают и почему они важны.</td> + </tr> + </tbody> +</table> + +<h2 id="Summary">Summary</h2> + +<p><span class="seoSummary">Доменные имена - ключевая составляющая инфраструктуры Интернета. Они предоставляют человеко-читаемые адреса веб-серверов, доступных в Интернете.</span></p> + +<p>Каждый компьютер подключен к Интернету и может быть доступен через публичный {{Glossary("IP")}}-адрес, который состоит из 32 бит для IPv4 адреса (такие адреса обычно записываются в виде четырёх чисел от 0 до 255, разделённых точками (напр., <code>173.194.121.32</code>) или 128 bit для IPv6 адреса (они обычно записываются в виде 8 групп по 4 шеснадцетиричных чисел, разделенных двоеточиями (напр, <code>2027:0da8:8b73:0000:0000:8a2e:0370:1337</code>). Компьютеры могут легко обрабатывать эти адреса , но у живых людей уходит слишком много времени на использование таких адресов. IP-адреса также сложно запоминаются и часто меняются со временем. Для решения этой проблемы в Интернете используются человеко-читаемые адреса, называемые доменными именами.</p> + +<h2 id="Активно_изучаем">Активно изучаем</h2> + +<p><em>В данный момент нет обучающего курса . Но вы можете <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">помочь составить его</a>.</em></p> + +<h2 id="Глубокое_погружение">Глубокое погружение</h2> + +<h3 id="Структура_доменных_имён">Структура доменных имён</h3> + +<p>Доменное имя имеет простую структуру, состояющую из нескольких частей (частей может быть бесконечное количество, но на практике число уровней обычно невелико), разделенных точками и <strong>читаемых справа налево</strong>:</p> + +<p><img alt="Anatomy of the MDN domain name" src="https://mdn.mozillademos.org/files/11229/structure.png" style="height: 76px; width: 252px;"></p> + +<p>Каждая из этих частей предоставляет специфическую информацию о доменном имени.</p> + +<dl> + <dt>{{Glossary("TLD")}} (Корневой домен).</dt> + <dd>Корневой домен сообщает наиболее общую информацию. Корневой домен говорит пользователям наиболее общую информацию о службе, доступной по доменному имени. Наиболее общие корневые домены (.com, .org, .net) не требуют от веб-службы соответствия строгим критериям, но некоторые корневые домены имеют и более строгие политики. Например, локальные корневые домены, такие как .us, .fr, или .sh, могут требовать, чтобы услуги по данному адресу предоставлялись на национальном языке или физически размещались на территории страны.</dd> + <dt>Домены</dt> + <dd>Домены - это то, что следует за корневыми доменами. Домен может представлять собой что угодно, от одного знака до целого предложения. Домен сразу за корневым доменом также называют <em>"доменом второго уровня"</em>. Доменное имя может включать неограниченное количество доменов, нет никакого ограничения только на 3 домена в составе доменного имени. Например, www.inf.ed.ac.uk - это корректное доменное имя. Тот, кто контролирует "верхнюю" часть доменного имени (например, <a href="https://mozilla.org">mozilla.org</a>), тот может создавать доменные имена более "низких" уровней (часто называемые, "поддоменами") (например, <a href="https://developer.mozilla.org">developer.mozilla.org</a>).</dd> +</dl> + +<h3 id="Покупка_доменного_имени">Покупка доменного имени</h3> + +<h4 id="Кто_владеет_доменным_именем">Кто владеет доменным именем?</h4> + +<p>Вы не можете “купить доменное имя”. Вы платите за право использовать доменное имя в течение одного или нескольких лет. Вы можете продлить это право и ваше продление будет иметь безусловный приоритет над заявками на домен от других желающих. Но вы никогда не владете доменным именем.</p> + +<p>Компании, называемые регистраторами, ведут реестры доменных имён, которые содержат техническую и административную информацию, связывающую вас и ваш домен.</p> + +<div class="note"> +<p><strong>Примечание: </strong>Для некоторых доменных имён регистратор может отсутстовать, реестр может не вестись. Например, все домены в зоне .fire используются компанией Amazon только в собственных нуждах.</p> +</div> + +<h4 id="Как_найти_свободное_доменное_имя">Как найти свободное доменное имя</h4> + +<p>Для того, чтобы определить, свободно или нет желаемое доменное имя, сделайте следующее,</p> + +<ul> + <li>Перейдите на веб-сайта регистратора доменных имён. Большинство из них предоставляют сервис "whois", который подскажет вам, свободно ли желаемое доменное имя.</li> + <li>Также мы можете использовать командную строку, введя в ней команду whois и получив ответ, например, для <code>mozilla.org</code>:</li> +</ul> + +<pre>$ whois mozilla.org +Domain Name:MOZILLA.ORG +Domain ID: D1409563-LROR +Creation Date: 1998-01-24T05:00:00Z +Updated Date: 2013-12-08T01:16:57Z +Registry Expiry Date: 2015-01-23T05:00:00Z +Sponsoring Registrar:MarkMonitor Inc. (R37-LROR) +Sponsoring Registrar IANA ID: 292 +WHOIS Server: +Referral URL: +Domain Status: clientDeleteProhibited +Domain Status: clientTransferProhibited +Domain Status: clientUpdateProhibited +Registrant ID:mmr-33684 +Registrant Name:DNS Admin +Registrant Organization:Mozilla Foundation +Registrant Street: 650 Castro St Ste 300 +Registrant City:Mountain View +Registrant State/Province:CA +Registrant Postal Code:94041 +Registrant Country:US +Registrant Phone:+1.6509030800 +</pre> + +<p>Как вы видите, нельзя зарегистрировать доменное имя <code>mozilla.org</code> потому что Mozilla Foundation уже зарегистрировало его.</p> + +<p>Теперь давайте посмотрим, можно ли зарегистрировать доменное имя <code>afunkydomainname.org</code>:</p> + +<pre>$ whois afunkydomainname.org +NOT FOUND +</pre> + +<p>Как вы видите, домен не существует в базе данных whois (на момент написания этой статьи), соответственно, его можно зарегистрировать.</p> + +<h4 id="Как_получить_доменное_имя">Как получить доменное имя</h4> + +<p>Процедура довольно проста:</p> + +<ol> + <li>Перейдите на веб-сайт регистратора доменных имён.</li> + <li>Обычно там есть кнопка "Зарегистрировать домен" или что-то подобное. Нажмите её.</li> + <li>Заполните форму требуемыми данными. Убедитесь, что вы не опечатались в названии доменного имени. Потому что, если вы оплатите его, то будет уже поздно исправлять ошибку!</li> + <li>Регистратор сообщит вам, когда доменное имя будет корректно зарегистрировано. Через несколько часов все DNS-сервера обновятся и ваш домен начнёт работать.</li> +</ol> + +<div class="note"> +<p><strong>Примечание:</strong> В процессе регистрации регистратор доменов спросит вас ваш реальный домашний или рабочий адрес. Обязательно заполните его корректно, потому что многие национальные регистраторы могут отменить регистрацию домена, если был указан ошибочный адрес.</p> +</div> + +<h4 id="Обновление_DNS">Обновление DNS</h4> + +<p>Базы данных DNS хранятся на каждом DNS-сервере по всему миру и эти серверы обращаются за обновлениями к нескольким серверам, называемым “authoritative name server” или “корневой DNS-сервер”. Когда ваш регистратор создаёт или обновляет информацию о зарегистрированном домене, она должна обновиться во всех DNS-базах. Каждый DNS-сервер хранит информацию о домене фиксированное количество времени, а затем автоматически обновляет её (DNS-сервер запрашивает корневой сервер снова). Соответственно, обновление баз занимает какое-то время, пока информация о новых или измененных доменах распространяется по Интернету.</p> + +<div class="note"> +<p><strong>Примечание:</strong> Это время часто называется <strong>время распространения</strong>. Тем не менее эта задержка не означает, что за это время доменное имя обновит само себя на всех серверах сверху донизу. Очень часто DNS-сервер, запрашиваемый вашим компьютером не знает конкретного домена и запрашивает о нём корневые DNS-сервера по мере требования.</p> +</div> + +<h3 id="Как_работает_DNS-запрос">Как работает DNS-запрос?</h3> + +<p>Как мы уже увидели, когда вы хотите, чтобы веб-страница отобразилась в вашем браузере, легче напечатать доменное имя, чем IP-адрес. Давайте разберем весь процесс:</p> + +<ol> + <li>Напечатайте <code>mozilla.org</code> в адресной строке вашего браузера.</li> + <li>Ваш браузер спросит ваш компьютер, знает ли он уже, какому IP-адресу соответствует этот домен (используя локальный DNS-кэш). Если имя есть в кэше, оно транслируется в IP-адрес и браузер направляется к необходимому серверу. И всё.</li> + <li>Если же ваш компьютер не знает, какой IP-адрес соответствует доменному имени <code>mozilla.org</code>, он запрашивает DNS-сервер, чья задача - сообщить вашему компьютеру какой IP-адрес соответствует запрошенному доменному имени.</li> + <li>Теперь ваш компьютер знает соответствие и может взаимодействовать с сервером.</li> +</ol> + +<p><img alt="Explanation of the steps needed to obtain the result to a DNS request" src="https://mdn.mozillademos.org/files/8961/2014-10-dns-request2.png" style="height: 702px; width: 544px;"></p> + +<h2 id="Следующие_шаги">Следующие шаги</h2> + +<p>Итак, мы поговорили о процессах и архитектуре. Время двигаться дальше.</p> + +<ul> + <li>Если вы хотите попробовать сделать что-то руками, то самое время разобраться в дизайне и изучить <a href="/en-US/Learn/Anatomy_of_a_web_page">анатомию веб-страницы</a>.</li> + <li>Также не стоит забывать, что некоторые аспекты создания сайта стоят денег. Здесь мы рассказываем, <a href="/en-US/docs/Learn/How_much_does_it_cost">сколько стоит создание веб-сайта</a>.</li> + <li>И ещё вы можете прочитать о <a href="http://en.wikipedia.org/wiki/Domain_name">доменных именах</a> в Wikipedia.</li> +</ul> diff --git a/files/ru/learn/common_questions/what_is_a_url/index.html b/files/ru/learn/common_questions/what_is_a_url/index.html new file mode 100644 index 0000000000..41fe5182c7 --- /dev/null +++ b/files/ru/learn/common_questions/what_is_a_url/index.html @@ -0,0 +1,161 @@ +--- +title: Что такое URL-адрес? +slug: Learn/Understanding_URLs +tags: + - URL + - Адрес + - Порт + - Ресурс + - Якорь + - домен + - протокол +translation_of: Learn/Common_questions/What_is_a_URL +--- +<div class="summary"> +<p>Данная статья описывает Единый локатор ресурсов или Uniform Resource Locators (URLs), объясняет, что это такое, и опиcывает его структуру. </p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Предварительно:</th> + <td>Вам нужно узнать <a href="/ru/docs/Learn/How_the_Internet_works">как работает интернет</a>, <a href="/ru/docs/Learn/What_is_a_Web_server">что такое Веб сервер</a> and <a href="/ru/docs/Learn/Understanding_links_on_the_web">что лежит в основе веб ссылок </a>.</td> + </tr> + <tr> + <th scope="row">Цель:</th> + <td>Вы узнаете, что такое URL и как они работают в вебе.</td> + </tr> + </tbody> +</table> + +<h2 id="Введение">Введение</h2> + +<p>Наряду с понятиями <a href="/ru/docs/Glossary/Hypertext">гипертекста</a> и <a href="/ru/docs/Glossary/HTTP">протокола HTTP</a>, понятие <a href="ru/docs/Glossary/URL">URL</a> является одной из основных концепций Всемирной паутины. Это механизм, используемый <a href="ru/docs/Glossary/Browser">браузерами</a> для получения любого опубликованного во Всемирной сети ресурса.</p> + +<p><strong>URL</strong> обозначает <em>Uniform Resource Locator</em>. URL это лишь адрес, который выдан уникальному ресурсу в интернете. В теории, каждый корректный URL ведет на уникальный ресурс. Такими ресурсами могут быть HTML-страница, CSS-файл, изображение и т.д. На практике, существуют некоторые исключения, когда, например, URL ведет на ресурс, который больше не существует или который был перемещён. Поскольку ресурс, доступный по URL, а также сам URL обрабатываются веб-сервером, его владелец должен внимательно следить за размещаемыми ресурсами и связанными с ними URL.</p> + +<h2 id="Активное_обучение">Активное обучение</h2> + +<p><em>Активного обучения пока не существует. <a href="/ru/docs/MDN/Getting_started">Пожайлуста подумайте, возможно Вы сможете внести свой вклад</a>.</em></p> + +<h2 id="Подробная_информация">Подробная информация</h2> + +<h3 id="Основы_анатомия_URL">Основы: анатомия URL</h3> + +<p>Вот несколько примеров URL:</p> + +<pre>https://developer.mozilla.org +https://developer.mozilla.org/ru/docs/Learn/ +https://developer.mozilla.org/ru/search?q=URL</pre> + +<p>Каждый из этих URLs могут быть напечатаны в адресной строке браузера, чтобы заставить его загрузить связанную страницу (ресурс).</p> + +<p>URL состоит из различных частей, некоторые из которых являются обязательными, а некоторые - факультативными. Рассмотрим наиболее важные части на примере:</p> + +<pre>http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument</pre> + +<dl> + <dt><img alt="Protocol" src="https://mdn.mozillademos.org/files/8013/mdn-url-protocol@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>http://</code> это протокол. Он отображает, какой протокол браузер должен использовать. Обычно это HTTP-протокол или его безопасная версия - HTTPS. Интернет требует эти 2 протокола, но браузеры часто могут использовать и другие протоколы, например <code>mailto:</code> (чтобы открыть почтовый клиент) или <code>ftp:</code> для запуска передачи файлов, так что не стоит удивляться, если вы вдруг увидите другие протоколы.</dd> + <dt><img alt="Domaine Name" src="https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>www.example.com</code> это доменное имя. Оно означает, какой веб-сервер должен быть запрошен. В качестве альтернативы может быть использован и {{Glossary("IP address", "IP-адрес")}}, но это делается редко, поскольку запоминать IP сложнее, и это не популярно в интернете.</dd> + <dt><img alt="Port" src="https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>:80</code> это порт. Он отображает технический параметр, используемый для доступа к ресурсам на веб-сервере. Обычно подразумевается, что веб-сервер использует стандартные порты HTTP-протокола (80 для HTTP и 443 для HTTPS) для доступа к своим ресурсам. В любом случае, порт - это факультативная составная часть URL.</dd> + <dt><img alt="Path to the file" src="https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>/path/to/myfile.html</code> это адрес ресурса на веб-сервере. В прошлом, адрес отображал местоположение реального файла в реальной директории на веб-сервере. В наши дни это чаще всего абстракция, позволяющая обрабатывать адреса и отображать тот или иной контент из баз данных.</dd> + <dt><img alt="Parameters" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>?key1=value1&key2=value2</code> это дополнительные параметры, которые браузер сообщает веб-серверу. Эти параметры - список пар ключ/значение, которые разделены символом <code>&</code>. Веб-сервер может использовать эти параметры для исполнения дополнительных команд перед тем как отдать ресурс. Каждый веб-сервер имеет свои собственные правила обработки этих параметров и узнать их можно, только спросив владельца сервера.</dd> + <dt><img alt="Anchor" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>#SomewhereInTheDocument</code> это якорь на другую часть того же самого ресурса. Якорь представляет собой вид "закладки" внутри ресурса, которая переадресовывает браузер на "заложенную" часть ресурса. В HTML-документе, например, браузер может переместиться в точку, где установлен якорь; в видео- или аудио-документе браузер может перейти к времени, на которое ссылается якорь. Важно отметить, что часть URL после #, которая также известна как идентификатор фрагмента, никогда не посылается на сервер вместе с запросом.</dd> +</dl> + +<p>{{Note('Есть и <a href="http://en.wikipedia.org/wiki/Uniform_Resource_Locator">другие составные части и правила</a>, касающиеся URL, но обычно они не используются ни пользователями, ни разработчика. Поэтому не стоит о них беспокоиться, вам не обязательно их знать, чтобы формировать работоспособные URL.')}}</p> + +<p>Вам стоит представлять URL как обычный почтовый адрес: <em>протокол</em> обозначает почтовый транспорт, который вы собираетесь использовать,<em>доменное имя</em> - это город, <em>порт</em> - это почтовый индекс; <em>адрес</em> - это номер дома;<em>параметры</em> представляют собой дополнительную информацию, как, например, номер квартиры; и, наконец, <em>якорь</em> представляет собой конкретного получателя, которому вы адресуете своё письмо.</p> + +<h3 id="Как_использовать_URL">Как использовать URL</h3> + +<p>Каждый URL может быть напечатан напрямую в адресной строке браузера, чтобы сразу получить запрошенный ресурс. Но это только вершина айсберга!</p> + +<p>Язык {{Glossary("HTML")}} — <a href="/ru/docs/Learn/HTML/HTML_tags">который будет обсуждать позже</a> — позволяет активно использовать URL для:</p> + +<ul> + <li>создания ссылок на другие документы с помощью тега {{HTMLElement("a")}};</li> + <li>связывания документа с его дополнительными файлами, например с помощью тегов {{HTMLElement("link")}} или {{HTMLElement("script")}};</li> + <li>отображения медиа-элементов, например изображений (с помощью тега {{HTMLElement("img")}}), видео (с помощью тега {{HTMLElement("video")}}), звуков и музыки (с помощью тега {{HTMLElement("audio")}}) и так далее;</li> + <li>отображения других HTML-документов внутри текущего с помощью тега {{HTMLElement("iframe")}}.</li> +</ul> + +<div class="note"> +<p><strong>Примечание:</strong> При указании URL-адресов для загрузки ресурсов как части страницы (например, при использовании <code><script></code>, <code><audio></code>, <code><img></code>, <code><video></code>, и т.д.), следует использовать только URL-адреса HTTP и HTTPS. Использование FTP, например, не особенно безопасно и больше не поддерживается многими браузерами.</p> +</div> + +<p>Другие технологии, такие как {{Glossary("CSS")}} или {{Glossary("JavaScript")}}, также активно используют URL, так что это реально основа веба.</p> + +<h3 id="Абсолютные_и_относительные_URL">Абсолютные и относительные URL</h3> + +<p>Все, что мы изучали выше - это <em>абсолютные URL</em>. Но так же существуют и <em>относительные URL</em>. Изучим их.</p> + +<p>Обязательные части URL во многом зависят от контекста, в котором используется URL. В адресной строке браузера URL не имеет никакого контекста, так что приходится вводить полный (или <em>абсолютный</em>) URL, такие как мы рассматривали выше. Обычно вам не требуется вводить протокол (браузер подставляет HTTP по умолчанию) и порт (который нужен только в том случае, если сервер использует нестандартный порт), но остальные части URL всё равно необходимы.</p> + +<p>Когда URL используется в документе, например в HTML-странице, ситуация отличается. Потому что браузер уже знает URL текущего документа и он может использовать эти сведения для дополнения недостающих частей любого адреса, указанного в документе. Простейший пример <em>относительного</em> URL - указание только <em>адресной части</em> URL. А если адрес в URL начинается с символа <code>"/</code>", браузер запросит ресурс от корня сервера, без отсылки к контексту текущего документа.</p> + +<p>Разберем это на примерах.</p> + +<h4 id="Примеры_абсолютных_URL">Примеры абсолютных URL</h4> + +<dl> + <dt>Полный URL (такой же, как обсуждали в начале статьи)</dt> + <dd> + <pre>https://developer.mozilla.org/ru/docs/Learn</pre> + </dd> + <dt>Скрыт протокол</dt> + <dd> + <pre>//developer.mozilla.org/ru/docs/Learn</pre> + + <p>В этом случае браузер использует тот же протокол, что использовался для загрузки текущего документа.</p> + </dd> + <dt>Скрыт домен</dt> + <dd> + <pre>/ru/docs/Learn</pre> + + <p>Это наиболее частый пример использования аболютного URL в HTML-документе. Браузер использует тот же протокол и то же доменное имя, как у текущего документа. <strong>Примечание:</strong> <em>не возможно скрыть домен, не скрывая при этом протокол, только вместе</em>.</p> + </dd> +</dl> + +<h4 id="Примеры_относительных_URL">Примеры относительных URL</h4> + +<p>Для лучшего понимания следующих примеров, давайте договоримся, что мы обращаемся к URL из документа, который опубликован по адресу: <code>https://developer.mozilla.org/ru/docs/Learn</code></p> + +<dl> + <dt>Дочерние ресурсы</dt> + <dd> + <pre>Skills/Infrastructure/Understanding_URLs +</pre> + </dd> + <dd>Поскольку URL не начинается с <code>/</code>, браузер сделает попытку найти документ в поддиректории относительно текущего документа. В данном примере будет запрошен этот URL: <code>https://developer.mozilla.org/ru/docs/Learn/Skills/Infrastructure/Understanding_URLs</code></dd> + <dt>Назад по дереву папок</dt> + <dd> + <pre>../CSS/display</pre> + + <p>В этом случае, мы используем команду <code>../</code> — унаследованную из файловой системы UNIX — чтобы сказать браузеру, что он должен подняться на 1 директорию вверх. Соответственно, здесь мы хотим открыть URL: <code>https://developer.mozilla.org/ru/docs/Learn/../CSS/display</code>, который может быть упрощен до вида: <code>https://developer.mozilla.org/ru/docs/CSS/display</code></p> + </dd> +</dl> + +<h3 id="Семантические_URL">Семантические URL</h3> + +<p>Помимо своего технического значения, URL представляют собой человеко-читаемые записи о местоположении документов на веб-ресурсе. Они могут быть запомнены и любой может ввести их в адресную строку своего браузера. Веб создавался для людей и распространённой практикой является принцип записи URL, который называется <a href="http://en.wikipedia.org/wiki/Semantic_URL"><em>семантические URL</em></a>. Семантические URL используют в своём составе слова, значение которых может быть понято любым человеком, даже тем, кто не разбирается в технических нюансах.</p> + +<p>Семантика, разумеется, плохо распознаётся компьютерами. Вы наверняка видели URL, которые выглядят как куча случайных символов. Но у семантических URL есть много преимуществ:</p> + +<ul> + <li>Ими легче управлять.</li> + <li>Они дают понять пользователю, что находится по данному URL даже без перехода на страницу.</li> + <li>Поисковые системы могут использовать семантику для улучшения классификации страниц.</li> +</ul> + +<h2 id="Следующие_шаги">Следующие шаги</h2> + +<ul> + <li><a href="/ru/docs/Learn/Understanding_domain_names">Понимание доменных имен</a></li> +</ul> diff --git a/files/ru/learn/common_questions/what_is_a_web_server/index.html b/files/ru/learn/common_questions/what_is_a_web_server/index.html new file mode 100644 index 0000000000..efdc287ba9 --- /dev/null +++ b/files/ru/learn/common_questions/what_is_a_web_server/index.html @@ -0,0 +1,128 @@ +--- +title: Что такое веб-сервер +slug: Learn/Что_такое_веб_сервер +tags: + - Веб-сервер + - Динамический сайт + - Новичок + - Статический сайт +translation_of: Learn/Common_questions/What_is_a_web_server +--- +<div class="summary"> +<p>В этой статье мы узнаем, что из себя представляют веб-серверы, как они работают, и почему они так важны.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Необходимые<br> + знания:</th> + <td>Вы должны уже знать, <a href="/ru/docs/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> + <p>Вы узнаете, что такое веб-сервер и получите общее представление о том, как он работает.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Введение">Введение</h2> + +<p>Понятие <span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>веб-сервер<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span> может относиться как к аппаратной начинке, так и к программному обеспечению. Или даже к обеим частям, работающим совместно.</p> + +<ol> + <li>С точки зрения "железа", <span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>веб-сервер<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span> — это компьютер, который хранит файлы сайта (HTML-документы, CSS-стили, JavaScript-файлы, картинки и другие) и доставляет их на устройство конечного пользователя (веб-браузер и т.д.). Он подключен к сети Интернет и может быть доступен через доменное имя, подобное <code>mozilla.org</code>.</li> + <li>С точки зрения ПО, <cite>веб-сервер</cite> включает в себя несколько компонентов, которые контролируют доступ веб-пользователей к размещенным на сервере файлам, как минимум — это <em><cite>HTTP-сервер</cite></em>. <cite>HTTP-сервер</cite> — это часть ПО, которая понимает {{Glossary("URL","URL’ы ")}} (веб-адреса) и {{Glossary("HTTP")}} (протокол, который ваш браузер использует для просмотра веб-страниц).</li> +</ol> + +<p>На самом базовом уровне, когда браузеру нужен файл, размещенный на веб-сервере, браузер запрашивает его через HTTP-протокол. Когда запрос достигает нужного веб-сервера ("железо"), сервер HTTP (ПО) принимает запрос, находит запрашиваемый документ (если нет, то сообщает об ошибке <a href="/ru/docs/Web/HTTP/Status/404">404</a>) и отправляет обратно, также через HTTP.</p> + +<p><img alt="Basic representation of a client/server connection through HTTP" src="https://mdn.mozillademos.org/files/8659/web-server.svg" style="height: 200px; width: 600px;"></p> + +<p>Чтобы опубликовать веб-сайт, необходим либо статический, либо динамический веб-сервер.</p> + +<p><strong>Статический веб-сервер</strong>, или стек, состоит из компьютера ("железо") с сервером HTTP (ПО). Мы называем это <span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>статикой<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span>, потому что сервер посылает размещенные файлы в браузер <span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>как есть<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span>.</p> + +<p><strong>Динамический веб-сервер</strong> состоит из статического веб-сервера и дополнительного программного обеспечения, чаще всего <em>сервера приложения </em>и <em>базы данных</em>. Мы называем его <span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>динамическим<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span>, потому что сервер приложений изменяет исходные файлы перед отправкой в ваш браузер по HTTP.</p> + +<p>Например, для получения итоговой страницы, которую вы просматриваете в браузере, сервер приложений может заполнить HTML-шаблон данными из базы данных. Такие сайты, как MDN или Википедия, состоят из тысяч веб-страниц, но они не являются реальными HTML документами — лишь несколько HTML-шаблонов и гигантские базы данных. Эта структура упрощает и ускоряет сопровождение веб-приложений и доставку контента.</p> + +<h2 id="Активное_изучение">Активное изучение</h2> + +<p><em>Активное изучение пока не доступно. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Пожалуйста, рассмотрите возможность внести свой вклад</a>.</em></p> + +<h2 id="Погружаемся_глубже">Погружаемся глубже</h2> + +<p>Чтобы загрузить веб-страницу, как мы уже говорили, ваш браузер отправляет запрос к веб-серверу, который приступает к поиску запрашиваемого файла в своем собственном пространстве памяти. Найдя файл, сервер считывает его, обрабатывает как ему это необходимо, и отсылает в браузер. Давайте рассмотрим эти шаги более подробно.</p> + +<h3 id="Хостинг_файлов">Хостинг файлов</h3> + +<p>Прежде всего, веб-сервер должен содержать файлы веб-сайта, а именно все HTML-документы и связанные с ними ресурсы, включая изображения, CSS-стили, JavaScript-файлы, шрифты и видео.</p> + +<p>Технически, вы можете разместить все эти файлы на своем компьютере, но гораздо удобнее хранить их на выделенном веб-сервере, который:</p> + +<ul> + <li>всегда запущен и работает</li> + <li>всегда подключен к Интернету</li> + <li>имеет неизменный IP адрес (не все {{Glossary("ISP", "провайдеры")}} предоставляют статический IP-адрес для домашнего подключения)</li> + <li>обслуживается третьей, сторонней компанией</li> +</ul> + +<p>По всем этим причинам поиск хорошего хостинг-провайдера является ключевой частью создания вашего сайта. Рассмотрите многочисленные предложения компаний и выберите то, что соответствует вашим потребностям и бюджету (предложения варьируются от бесплатных до тысяч долларов в месяц). Вы можете найти подробности в <a href="https://developer.mozilla.org/en-EU/Learn/How_much_does_it_cost#Hosting">этой статье.</a></p> + +<p>Как только вы решили проблему с хостингом, вам понадобится только <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">загрузить свои файлы на ваш веб-сервер</a>.</p> + +<h3 id="Связь_по_HTTP">Связь по HTTP</h3> + +<p>Во-вторых, веб-сервер обеспечивает поддержку {{Glossary("HTTP")}} (англ. <em><strong>H</strong>yper<strong>t</strong>ext <strong>T</strong>ransfer <strong>P</strong>rotocol - гипертекстовый транспортный протокол</em>). Как следует из названия, HTTP указывает, как передавать гипертекст (т.е. связанные веб-документы) между двумя компьютерами.</p> + +<p>Протокол представляет собой набор правил для связи между двумя компьютерами. HTTP является текстовым протоколом без сохранения состояния.</p> + +<dl> + <dt><strong>Текстовый</strong></dt> + <dd>Все команды являются простым человекочитаемым текстом.</dd> + <dt><strong>Не сохраняет состояние</strong></dt> + <dd>Ни клиент, ни сервер не помнят о предыдущих соединениях. Например, опираясь только на HTTP, сервер не сможет вспомнить введенный вами пароль или на каком шаге транзакции вы находитесь. Для таких задач, вам потребуется сервер приложения. (Мы остановимся на этих технологиях в следующих статьях.)</dd> +</dl> + +<p>HTTP задает строгие правила взаимодействия клиента и сервера. Мы рассмотрим сам протокол HTTP в <a href="/ru/docs/Web/HTTP">технической статье</a> немного позднее. Пока достаточно знать об этих правилах:</p> + +<ul> + <li>Исключительно <em>клиенты</em> могут производить HTTP-запросы, и только на <em>сервера</em>. Сервера способны только отвечать на HTTP-<em>запросы клиента</em>.</li> + <li>При запросе файла по HTTP, клиент должен сформировать файловый {{Glossary("URL")}}.</li> + <li>Веб-сервер <em>должен ответить</em> на каждый HTTP-запрос, по крайней мере сообщением об ошибке.</li> +</ul> + +<p><a href="https://developer.mozilla.org/en-US/404"><img alt="The MDN 404 page as an example of such error page" src="https://mdn.mozillademos.org/files/8661/mdn-404.jpg" style="float: right; height: 300px; width: 300px;"></a>На веб-сервере HTTP-сервер отвечает за обработку входящих запросов и ответ на них.</p> + +<ol> + <li>При получении запроса, HTTP-сервер сначала проверяет, существует ли ресурс по данному URL.</li> + <li>Если это так, веб-сервер отправляет содержимое файла обратно в браузер. Если нет, сервер приложения генерирует необходимый ресурс.</li> + <li>Если ничто из этого не возможно, веб-сервер возвращает сообщение об ошибке в браузер, чаще всего “404 Not Found”. (Это ошибка настолько распространена, что многие веб-дизайнеры тратят большое количество времени на разработку <a href="http://www.404notfound.fr/">404 страниц об ошибках</a>.)</li> +</ol> + +<h2 id="Статический_и_Динамический_контент">Статический и Динамический контент</h2> + +<p>Грубо говоря, сервер может отдавать статическое или динамическое содержимое.<strong> </strong><span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>Статическое<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span> означает <span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>отдается как есть<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span>. Статические веб-сайты делаются проще всего, поэтому мы предлагаем вам сделать свой первый сайт статическим.</p> + +<p><span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>Динамическое<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span> означает, что сервер обрабатывает данные или даже генерирует их на лету из базы данных. Это обеспечивает большую гибкость, но технически сложнее в реализации и обслуживании, из-за чего процесс создания сайта очень сильно усложняется.</p> + +<p>Возьмем для примера страницу, которую вы сейчас читаете. На веб-сервере, где она хостится, есть сервер приложения, который извлекает содержимое статьи из базы данных, форматирует его, добавляет в HTML-шаблоны и отправляет вам результат. В нашем случае, сервер приложения называется <a href="/en-US/docs/MDN/Kuma">Kuma</a>, написан он на языке программирования <a href="https://www.python.org/">Python</a> (используя фреймворк <a href="https://www.djangoproject.com/">Django</a>). Команда Mozilla создала <cite>Kuma</cite> для конкретных нужд MDN, но есть множество подобных приложений, построенных совершенно на других технологиях.</p> + +<p>Существует так много серверов приложений, что довольно трудно предложить какой-то один. Некоторые серверы приложений заточены под определенные категории веб-сайтов, такие как блоги, вики-страницы или интернет-магазины; другие, называемые {{Glossary("CMS", "CMSs")}} (системы управления контентом), более универсальны. Если вы создаете динамический сайт, потратьте немного времени на выбор инструмента, который соответствует вашим потребностям. Если вы не хотите изучать веб-программирование (хотя это увлекательно само по себе!), то вам не нужно создавать свой собственный сервер приложения. Это будет изобретением очередного велосипеда.</p> + +<h2 id="Следующие_шаги">Следующие шаги</h2> + +<p>Теперь, когда вы познакомились с веб-серверами, вы можете:</p> + +<ul> + <li>прочитать <a href="/en-US/docs/Learn/How_much_does_it_cost">насколько сложно делать что-либо в веб</a></li> + <li>узнать больше о <a href="/en-US/docs/Learn/What_software_do_I_need">разнообразии ПО, которое может пригодиться для создания веб-сайта</a></li> + <li>двигаться к практике: например, <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">узнать как загружать файлы на веб-сервер</a>.</li> +</ul> + +<div id="s3gt_translate_tooltip" style="left: 140px; top: 658px; opacity: 0.75;"></div> + +<div id="s3gt_translate_tooltip" style="left: 60px; top: 2380px;"></div> |