Веб технологии

World Wide Web Consortium

Консорциум Всемирной паутины (World Wide Web Consortium, W3C) — организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. Основателем и главой Консорциума является сэр Тимоти Джон Бернерс-Ли, автор множества разработок в области информационных технологий. По состоянию на 29 мая 2019 года Консорциум насчитывает 444 члена.

W3C разрабатывает для Интернета единые принципы и стандарты (называемые «рекомендациями» (W3C Recommendations)), которые затем внедряются производителями программ и оборудования. Таким образом достигается совместимость между программными продуктами и аппаратурой различных компаний, что делает Всемирную сеть более совершенной, универсальной и удобной.

Миссия W3C: «Полностью раскрыть потенциал Всемирной паутины путём создания протоколов и принципов, гарантирующих долгосрочное развитие Сети».

HTML

HTML (Hypertext Markup Language) - это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных.

HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом.

Элементы и теги

HTML-элементы — основа языка HTML. Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя элемента.

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Теги используются для создания элементов. Имя HTML-элемента - это имя, заключённое в угловые скобки, как например <p> для "абзаца". Обратите внимание, что концу имени предшествует символ косой черты (слеша), </p>, и что в пустых элементах закрывающий тег не требуется и не допускается. Если атрибуты не указаны, то для них применяются значения по умолчанию.

Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:

Моя кошка очень раздражена

Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:

<p>Моя кошка очень раздражена</p>

Главными частями элемента являются:

Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, "p"), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
Контент (Content): Это контент элемента, который в данном случае является просто текстом.
Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.

Элементы также могут иметь атрибуты, которые выглядят так:

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.

Атрибут всегда должен иметь:

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

Вложенные элементы

Вы также можете располагать элементы внутри других элементов — это называется вложением. Если мы хотим заявить, что наша кошка очень раздражена, мы можем заключить слово "очень" в элемент <strong> , который указывает, что слово должно быть сильно акцентированно:

<p>Моя кошка <strong>очень</strong> раздражена.</p>

Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент <p>, затем элемент <strong>, потом мы должны закрыть сначала элемент <strong>, затем <p>. Приведённое ниже неверно:

<p>Моя кошка <strong>очень раздражена.</p></strong>

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

Пустые элементы

Некоторые элементы не имеют контента, и называются пустыми элементами.

<img src="images/test-image.png" alt="Моё тестовое изображение">

Элемент <img> содержит два атрибута, но не имеет закрывающего тега </img>, и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.

Структура HTML документа

Теперь посмотрим, как отдельные элементы объединяются в целую HTML страницу.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Моя тестовая страница</title>
	</head>
	<body>
		<img src="images/test-image.png" alt="Моё тестовое изображение">
	</body>
</html>

Здесь мы имеем:

<!DOCTYPE html> — объявление типа документа. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, чтобы все работало правильно.
<html></html> — элемент <html>. Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.
<head></head> — элемент <head>. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
<body></body> — элемент <body>. В нем содержится весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то ещё.
<meta charset="utf-8"> — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
<title></title>, <title>. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.

Разметка текста

В этом разделе рассмотрим некоторые из основных HTML элементов.

Заголовки

Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. HTML включает шесть уровней заголовков <h1> – <h6>

<h1>Мой главный заголовок</h1>
<h2>Мой заголовок верхнего уровня</h2>
<h3>Мой подзаголовок</h3>
<h4>Мой под-подзаголовок</h4>

Абзацы
Элемент

предназначен для абзацев текста:

<p>Это одиночный абзац</p>

Списки

Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространёнными типами списков являются нумерованные и ненумерованные списки:

Ненумерованные списки - это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент <ul>.

Нумерованные списки - это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент <ol>.

Каждый пункт внутри списков располагается внутри элемента <li> (list item, элемент списка).

Ссылки

Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — <a> — “a” это сокращение от “anchor” (”якорь”).

Пример:

<a href="[https://www.mozilla.org/ru/about/manifesto/details/](https://www.mozilla.org/ru/about/manifesto/details/)">Манифест Mozilla</a>

CSS

CSS (Cascading Style Sheets) — это код, который используется для стилизации веб-страниц. Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки - это язык таблицы стилей. Это означает, что он позволяет применять стили выборочно к элементам в документах HTML.

CSS используется создателями веб-страниц для задания цветов, шрифтов, стилей, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось отделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.

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

Например, чтобы выбрать все элементы абзаца на HTML странице и изменить текст внутри них с чёрного на красный, вы должны написать этот CSS:

p { color: red; }

Структура CSS правил

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

Селектор (Selector). Имя HTML-элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизации другого элемента, просто измените селектор.
Объявление (Declaration). Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать.
Свойства (Properties). Способы, которыми вы можете стилизовать определённый HTML-элемент (в данном случае, color является свойством для элементов <p>). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.
Значение свойства (Property value). Справа от свойства, после двоеточия, у нас есть значение свойства, которое выбирает одно из множества возможных признаков для данного свойства (существует множество значений color, помимо red).

Обратите внимание на важные части синтаксиса:

Каждый набор правил (кроме селектора) должен быть обёрнут в фигурные скобки ({}).
В каждом объявлении необходимо использовать двоеточие (:), чтобы отделить свойство от его значений.
В каждом наборе правил вы должны использовать точку с запятой (;), чтобы отделить каждое объявление от следующего.

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

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

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

p,li,h1 {
  color: red;
}

Типы селекторов

Существует множество различных типов селектора. Выше мы рассматривали только селектор элементов, который выбирает все элементы определённого типа в HTML документе. Вот некоторые из наиболее распространённых типов селекторов:

JavaScript

JavaScript – это язык программирования, который добавляет интерактивность. (например: игры, отклик при нажатии кнопок или при вводе данных в формы, динамические стили, анимация).

JavaScript (JS) обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам. Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.

Код на языке JavaScript называют скриптом. Его сохраняют в отдельный файл с расширением js (например, myScript.js или awesome-effects.js), а чтобы запустить, подключают этот файл на страницу. В HTML для добавления JavaScript есть специальный тег:

<script src="адрес_файла"></script>

Скрипт обычно подключают в самом конце страницы, перед закрывающим тегом </body>. Например:

<body>
  <!-- Содержимое страницы -->

<script src="app.js"></script>
</body>

XML и JSON

XML

XML (eXtensible Markup Language) — расширяемый язык разметки. Рекомендован Консорциумом Всемирной паутины (W3C). XML разрабатывался как язык с простым формальным синтаксисом, удобный для создания и обработки документов как программами, так и человеком, с акцентом на использование в Интернете. Язык называется расширяемым, поскольку он не фиксирует разметку, используемую в документах: разработчик волен создать разметку в соответствии с потребностями к конкретной области, будучи ограниченным лишь синтаксическими правилами языка.

Расширение XML — это конкретная грамматика, созданная на базе XML и представленная словарём тегов и их атрибутов, а также набором правил, определяющих, какие атрибуты и элементы могут входить в состав других элементов. Сочетание простого формального синтаксиса, удобства для человека, расширяемости, а также базирование на кодировках Юникод для представления содержания документов привело к широкому использованию как, собственно, XML, так и множества производных специализированных языков на базе XML в самых разнообразных программных средствах.

Для корректного XML документа должны исполняться следующие условия:

Правильное оформление документа.
Соблюдаться все синтаксические правила XML.
Документ должен соответствовать семантическим правилам языка (которые обычно заданны в схеме XML или DTD (Document Type Definition)).

Пример XML файла:

<?xml version="1.0"?>
<PurchaseOrder PurchaseOrderNumber="99503" OrderDate="1999-10-20">
	<Address Type="Shipping">
		<Name>Ellen Adams</Name>
		<Street>123 Maple Street</Street>
		<City>Mill Valley</City>
		<State>CA</State>
		<Zip>10999</Zip>
		<Country>USA</Country>
	</Address>
	<Address Type="Billing">
		<Name>Tai Yee</Name>
		<Street>8 Oak Avenue</Street>
		<City>Old Town</City>
		<State>PA</State>
		<Zip>95819</Zip>
		<Country>USA</Country>
	</Address>
	<DeliveryNotes>Please leave packages in shed by driveway.</DeliveryNotes>
	<Items>
		<Item PartNumber="872-AA">
			<ProductName>Lawnmower</ProductName>
			<Quantity>1</Quantity>
			<USPrice>148.95</USPrice>
			<Comment>Confirm this is electric</Comment>
		</Item>
		<Item PartNumber="926-AA">
			<ProductName>Baby Monitor</ProductName>
			<Quantity>2</Quantity>
			<USPrice>39.98</USPrice>
			<ShipDate>1999-05-21</ShipDate>
		</Item>
	</Items>
</PurchaseOrder>

AJAX

AJAX Asynchronous JavaScript & XML – специальная технология взаимодействия с сервером, которая не требует выполнения перезагрузки. Она позволяет повысить скорость загрузки страниц веб–ресурса, поскольку нет необходимости обновлять их каждый раз. Наличие этой опции помогает сделать пользование сайтом для пользователя максимально комфортным.

Технология работы AJAX включает следующие этапы:

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

JSON

Обозначение объектов JavaScript (JSON - JavaScript Object Notation) - стандартный текстовый формат для представления структурированных данных на основе синтаксиса объекта JavaScript. Он обычно используется для передачи данных в веб-приложениях (например, отправка некоторых данных с сервера клиенту, таким образом чтобы это могло отображаться на веб-странице или наоборот).

JSON - текстовый формат данных, следующий за синтаксисом объекта JavaScript, который был популяризирован Дугласом Крокфордом. Несмотря на то, что он очень похож на буквенный синтаксис объекта JavaScript, его можно использовать независимо от JavaScript, и многие среды программирования имеют возможность читать (анализировать) и генерировать JSON.

Вы можете включать одни и те же базовые типы данных внутри JSON, так же как и в стандартном объекте JavaScript - строки, числа, массивы, булевы и другие объектные литералы. Это позволяет построить иерархию данных, к примеру, так:

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    }
  ]
}

Обзор CMS

Система управления контентом (Content management system) — информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления контентом.

CMS обычно состоит из двух основных компонентов:

Приложение для управления контентом (CMA) в качестве внешнего пользовательского интерфейса, позволяющего пользователю добавлять, изменять и удалять контент с веб-сайта без вмешательства веб-мастера.
Приложение доставки контента (CDA), которое компилирует контент и обновляет веб-сайт.

Основные функции CMS:

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

Преимущество CMS

Использование систем управления сайтом CMS (Content Management System) позволяет сделать изготовление сайтов максимально простым, сведя его к разработке веб-дизайна и настройке системы управления веб-контентом. Такой подход обеспечивает надежную и стабильную работу ресурса, поскольку самые популярные CMS тестировались на протяжении нескольких лет, а также в них были исправлены все ошибки. Кроме того, за изготовление сайтов на базе уже имеющихся движков говорит и то, что системы обеспечивают удобство в последующей работе с сайтом.

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

WordPress

WordPress – это одна из наиболее популярных CMS в мире. С ее помощью можно создавать сайты различного характера и управлять ими без знаний и навыков программирования. Сегодня в сети существует множество различных программ или систем управления, но WordPress является самой популярной. Более 30 % всех сайтов в интернете работают на данной платформе. А если говорить исключительно о площадках, работающих на CMS, то на WP приходится более 60 %, что делает ее однозначным лидером рынка.

Функционал WordPress:

Позволяет создавать, удалять и редактировать статические страницы (например, «О компании», «Контакты», «Товар X» и т. д.).
Позволяет создавать, удалять и редактировать записи (публикации).
Широкие возможности по работе с комментариями (включить, отключить, древовидный формат, максимальное число на одной странице и т. д.).
Поддержка ЧПУ (человеко-понятный URL), написание собственных URL, большой выбор форматов.
Поддержка меток, рубрик, RSS, поиска.
Отличный текстовый редактор WYSIWYG (What You See Is What You Get – что ты видишь, то и получишь), работающий в двух режимах: визуальный и html.
Онлайн редактор фотографий и изображений, позволяющий обрезать, поворачивать, масштабировать и т. д.
Большой выбор готовых шаблонов, что значительно упрощает процесс создания сайта.
Большой набор различных плагинов и виджетов, позволяющих добавлять нестандартные функции.

Drupal

Drupal это гибкая CMS основанная на LAMP стеке, с модульной структурой, позволяющей добавлять и удалять функционал через установку и удаление модулей и позволяющий сменить внешний вид сайта через установку и удаление тем оформления. Основа Drupal, известная как ядро Drupal, содержит PHP скрипты необходимые для запуска основного функционала CMS, нескольких дополнительных модулей и тем, и множества JavaScript, CSS и файлов изображений. Множество дополнительных модулей и тем оформления вы можете загрузить с сайта Drupal.org.

Drupal существует даже дольше, чем WordPress, хотя и не имеет такой внушительной доли рынка, как WordPress. Первоначально запущенный в 2000 году, Drupal поддерживает 2,3% всех веб-сайтов и занимает 4,6% рынка систем управления контентом.

Преимущества Drupal

Drupal имеет встроенную систему контроля доступа, с возможностью создавать новые роли с индивидуальными разрешениями.
В Drupal 8 многоязычная функциональность заложена в ядро, в то время как WordPress-сайтам приходится прибегать к помощи сторонних плагинов.
Система таксономий Drupal более гибкая, чем WordPress, что делает ее идеальной для работы с большим количеством контента.

1С-Bitrix

1С-Битрикс – система управления контентом сайта (CMS), распространяющаяся на платной основе и имеющая свои особенности, отличающие этот движок от остальных. Данное решение предоставляет инструменты для изменения стандартного шаблона, что осуществляется путем заказа разработки уникального макета или приобретением уже готового. Далее макет загружается через панель администрирования почти так же, как это реализовано в других популярных CMS.

Функции 1С-Битрикс отличаются в зависимости от редакции. Чем дороже лицензия, тем больше модулей и дополнительных опций.

1С-Битрикс предлагает также встроенные инструменты для контроля посещаемости сайта, изучению источников переходов и поведения пользователей, хоть по своей функциональности этот модуль слабее, чем Яндекс.Метрика или Google Analytics.

На движке по умолчанию доступно большое количество маркетинговых инструментов. В их числе:

Система рассылки уведомлений зарегистрированным пользователям.
Виджеты для общения с клиентами на сайте и за его пределами.
Авторизация через соцсети и соцбар для расшаривания ссылок.
Аналитические данные, демонстрирующие портрет аудитории и показывающие посещаемость.
A/B-тестирование для исследования эффективности торгового предложения.

Структура HTTP запроса

HTTP протокол

HTTP (Hypertext Transfer Protocol) — это протокол, позволяющий получать различные ресурсы, например HTML-документы. Протокол HTTP лежит в основе обмена данными в Интернете. HTTP является протоколом клиент-серверного взаимодействия, что означает инициирование запросов к серверу самим получателем, обычно веб-браузером (web-browser). Полученный итоговый документ будет (может) состоять из различных поддокументов, являющихся частью итогового документа: например, из отдельно полученного текста, описания структуры документа, изображений, видео-файлов, скриптов и многого другого.

Хотя HTTP был разработан ещё в начале 1990-х годов, за счёт своей расширяемости в дальнейшем он все время совершенствовался. HTTP является протоколом прикладного уровня, который чаще всего использует возможности другого протокола - TCP (или TLS - защищённый TCP) - для пересылки своих сообщений, однако любой другой надёжный транспортный протокол теоретически может быть использован для доставки таких сообщений. Благодаря своей расширяемости, он используется не только для получения клиентом гипертекстовых документов, изображений и видео, но и для передачи содержимого серверам, например, с помощью HTML-форм. HTTP также может быть использован для получения только частей документа с целью обновления веб-страницы по запросу (например, посредством AJAX запроса).

HTTP сообщения

HTTP — это клиент-серверный протокол, то есть запросы отправляются какой-то одной стороной — участником обмена (user-agent) (либо прокси вместо него). Чаще всего в качестве участника выступает веб-браузер, но им может быть кто угодно, например, робот, путешествующий по Сети для пополнения и обновления данных индексации веб-страниц для поисковых систем.

Каждый запрос (англ. request) отправляется серверу, который обрабатывает его и возвращает ответ (англ. response). Между этими запросами и ответами как правило существуют многочисленные посредники, называемые прокси, которые выполняют различные операции и работают как шлюзы или кэш.

HTTP/1.1 и более ранние HTTP сообщения человекочитаемые. В версии HTTP/2 эти сообщения встроены в новую бинарную структуру, фрейм, позволяющий оптимизации, такие как компрессия заголовков и мультиплексирование.

Запросы содержат следующие элементы:

HTTP-метод, обычно глагол подобно GET, POST или существительное, как OPTIONS или HEAD, определяющее операцию, которую клиент хочет выполнить. Обычно, клиент хочет получить ресурс (используя GET) или передать значения HTML-формы (используя POST), хотя другие операция могут быть необходимы в других случаях.
Путь к ресурсу: URL ресурсы лишены элементов, которые очевидны из контекста, например без протокола (http://), домена (здесь developer.mozilla.org), или TCP порта (здесь 80).
Версию HTTP-протокола.
Заголовки (опционально), предоставляющие дополнительную информацию для сервера. Или тело, для некоторых методов, таких как POST, которое содержит отправленный ресурс.

Ответы содержат:

Версию HTTP-протокола.
HTTP код состояния, сообщающий об успешности запроса или причине неудачи.
Сообщение состояния — краткое описание кода состояния.
HTTP заголовки, подобно заголовкам в запросах.
Опционально: тело, содержащее пересылаемый ресурс.

HTTP методы

Для того, чтобы указать серверу на то, какое действие мы хотим произвести с ресурсом, используется тип HTTP-запроса, который также называется HTTP метод. Существует несколько HTTP методов, которые описывают действия с ресурсами. Наиболее часто используемыми являются GET и POST.

Метод GET

Метод GET запрашивает информацию из указанного источника и не влияет на его содержимое. Запрос доступен для кеширования данных и добавления в закладки. Длина запроса ограничена (макс. длина URL - 2048).

Метод POST

Метод POST используется для отправки данных, что может оказывать влияние на содержимое ресурса. В отличие от метода GET запросы POST не могут быть кешированы, они не остаются в истории браузера и их нельзя добавить в закладки. Запросы POST не ограничиваются в объеме.

Сравнение методов GET и POST

Метод HEAD

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

Метод PUT

Загружает содержимое запроса на указанный в запросе URI. Если по заданному URI ресурса нет, то сервер создает его, возвращая статус 201 (Created).

Метод DELETE

Удаляет указанный ресурс.

Метод OPTION

Используется для описания параметров коммуникации между клиентом и сервером.

Метод CONNECT

Преобразует соединение запроса в прозрачный TCP/IP-туннель.

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

аутентификации пользователя;
хранения персональных предпочтений и настроек пользователя;
отслеживания состояния сеанса доступа пользователя;
сведения статистики о пользователях.

Выделяют два основных вида cookies:

Сессионные (временные) — данные о просмотренных страницах, записи форм заказов и другая информация, позволяющая клиентам упростить работу с сайтом. Существуют только в период времени, когда пользователь находится на сайте, и удаляются сразу же после прекращения сеанса, то есть вслед за тем, как закроется вкладка. После закрытия вкладки временные файлы автоматически удаляются;
Постоянные — хранят долгосрочную информацию в течение нескольких недель или месяцев, например логин от учетной записи. Они не удаляются после окончания взаимодействия с сайтом.

Cookie используются веб-серверами для идентификации пользователей и хранения данных о них.

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

Многие сайты также используют cookie для сохранения настроек пользователя. Эти настройки могут использоваться для персонализации, которая включает в себя выбор оформления и функциональности. Например, Википедия позволяет авторизованным пользователям выбрать дизайн сайта. Поисковая система Google позволяет пользователям (в том числе и не зарегистрированным в ней) выбрать количество результатов поиска, отображаемых на одной странице.

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

Большинство современных браузеров позволяет пользователям выбрать — принимать cookie или нет, но их отключение делает невозможной работу с некоторыми сайтами. Кроме того, по законам некоторых стран (например, согласно постановлению Евросоюза от 2016 года, см. общий регламент по защите данных) сайты должны в обязательном порядке запрашивать согласие пользователя перед установкой cookie.

TLS, шифрование трафика

PKI (Public Key Infrastructure)

Инфраструктура открытых ключей (Public Key Infrastructure) — набор средств (технических, материальных, людских и т. д.), распределённых служб и компонентов, в совокупности используемых для поддержки криптозадач на основе закрытого и открытого ключей. В основе PKI лежит использование криптографической системы с открытым ключом и несколько основных принципов:

Закрытый ключ (private key) известен только его владельцу;
Удостоверяющий центр (УЦ или CA - Certificate Authority) создает электронный документ — сертификат открытого ключа, таким образом удостоверяя факт того, что закрытый (секретный) ключ известен эксклюзивно владельцу этого сертификата, открытый ключ (public key) свободно передается;
Никто не доверяет друг другу, но все доверяют удостоверяющему центру;
Удостоверяющий центр подтверждает или опровергает принадлежность открытого ключа заданному лицу, которое владеет соответствующим закрытым ключом.

Основные задачи системы информационной безопасности, которые решает инфраструктура управления открытыми ключами:

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

Основные компоненты PKI

Центр сертификации (Certificate Authority) или удостоверяющий центр

Является основной структурой, формирующей цифровые сертификаты подчиненных центров сертификации и конечных пользователей. Является главным компонентом PKI.
Задача центра сертификации — подтверждать подлинность ключей шифрования с помощью сертификатов электронной подписи.

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

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

Сертификат открытого ключа

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

Регистрационный центр

Необязательный компонент системы, предназначенный для регистрации пользователей. Удостоверяющий центр доверяет регистрационному центру проверку информации о субъекте. Регистрационный центр, проверив правильность информации, подписывает её своим ключом и передаёт удостоверяющему центру, который, проверив ключ регистрационного центра, выписывает сертификат. Один регистрационный центр может работать с несколькими удостоверяющими центрами (то есть состоять в нескольких PKI), один удостоверяющий центр может работать с несколькими регистрационными центрами. Иногда, удостоверяющий центр выполняет функции регистрационного центра.

Репозиторий

Хранилище, содержащее сертификаты и списки отозванных сертификатов (СОС) и служащее для распространения этих объектов среди пользователей. В Федеральном Законе РФ № 63 «Об электронной подписи» он называется реестр сертификатов ключей подписей.

Архив сертификатов

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

Центр запросов

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

Конечные пользователи

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

TLS (Transport Layer Security)

TLS (transport layer security) основан на протоколе SSL (Secure Sockets Layer), изначально разработанном в Netscape для повышения безопасности электронной коммерции в Интернете.

После того, как протокол SSL был стандартизирован IETF (Internet Engineering Task Force), он был переименован в TLS. Поэтому хотя имена SSL и TLS взаимозаменяемы, они всё-таки отличаются, так как каждое описывает другую версию протокола.

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

Шифрование – сокрытие информации, передаваемой от одного компьютера к другому;
Аутентификация – проверка авторства передаваемой информации;
Целостность – обнаружение подмены информации подделкой.

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

Также в рамках процедуры TLS Handshake имеется возможность установить подлинность личности и клиента, и сервера. Например, клиент может быть уверен, что сервер, который предоставляет ему информацию о банковском счёте, действительно банковский сервер. И наоборот: сервер компании может быть уверен, что клиент, подключившийся к нему – именно сотрудник компании, а не стороннее лицо (данный механизм называется Chain of Trust и будет рассмотрен в соответствующем разделе).

Наконец, TLS обеспечивает отправку каждого сообщения с кодом MAC (Message Authentication Code), алгоритм создания которого – односторонняя криптографическая функция хеширования (фактически – контрольная сумма), ключи которой известны обоим участникам связи. Всякий раз при отправке сообщения, генерируется его MAC-значение, которое может сгенерировать и приёмник, это обеспечивает целостность информации и защиту от её подмены.

TLS Handshake

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

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

Сообщение "hello" клиента: Клиент инициирует рукопожатие, посылая серверу сообщение "hello". В сообщении будет указано, какую версию TLS поддерживает клиент, поддерживаемые наборы шифров и строка случайных байтов, известная как "random клиента".
Сообщение "hello" сервера: В ответ на сообщение "hello" клиента сервер отправляет сообщение, содержащее SSL-сертификат сервера, выбранный сервером набор шифров и "random сервера" – еще одну строку случайных байтов, генерируемую сервером.
Аутентификация: Клиент проверяет SSL-сертификат сервера в центре сертификации, который его выдал. Он подтверждает, что сервер является тем, за кого себя выдает, и что клиент взаимодействует с реальным владельцем домена.
Premaster secret: Клиент посылает еще одну строку случайных байтов, которая называется "premaster secret". Premaster secret шифруется открытым ключом и может быть расшифрован сервером только с помощью закрытого ключа. (Клиент берет открытый ключ из SSL-сертификата сервера).
Сервер проверяет сертификат клиента (если требуется).
Используемый закрытый ключ: Сервер расшифровывает "premaster secret".
Создание сеансовых ключей: Клиент и сервер генерируют сеансовые ключи из random'а клиента, random'а сервера и premaster secret. Они должны прийти к одинаковым результатам. Клиент отправляет сообщение "готово", зашифрованное сеансовым ключом. Сервер отправляет сообщение "готово", зашифрованное сеансовым ключом.
Безопасность симметричного шифрования достигнута: Рукопожатие завершено, и связь продолжается с использованием сеансовых ключей.

Известные файлы

robots.txt

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

Без этого файла поисковики будут хаотично блуждать по сайту, сканировать и индексировать буквально все подряд: дубли, служебные документы, страницы с текстами «заглушками» (Lorem Ipsum) и тому подобное.

Правильный robots txt не дает такому происходить и буквально ведет роботов по сайту, подсказывая, что разрешено индексировать, а что необходимо упустить.

Существуют специальные директивы robots.txt для данных задач:

Allow — допускает индексацию.
Disallow — запрещает индексацию.

htaccess

Файл htaccess – конфигурационный файл веб-сервера Apache уровня каталога. Он содержит набор инструкций, обуславливающих принципы работы ПО Apache в рамках текущего каталога и дочерних папках без внесения изменений в общие настройки веб-сервера.

Для простоты понимания рассмотрим основные принципы работы веб-приложений в рамках протоколов http и https (например, обычные сайты). Сам сайт представляет собой в наиболее простом виде совокупность контента и программного кода. Последний используется как логика доступа к контенту. То есть, это набор мультимедийных (изображения, аудио, видео) файлов, а также текстовых файлов, содержащих код. Все эти файлы записывают в определенный каталог компьютера, который называют сервером.

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

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

Переопределение директив (команд, обуславливающих принципы работы веб-сервера), которые хранятся в основном конфигурационном файле – httpd.conf, для локальных нужд (для определенного каталога).
Настройка работы интерпретатора PHP (некоторые важные функции).
Использование для ограничения доступа к некоторым каталогам.
Выбор кодировки символов.
Замена сложных URL на более простые и понятные (ЧПУ).
Указание директив простого, сложного перенаправления при навигации по сайту и многое другое.