Всемирная паутина (WorldWideWeb, или W3) – это широкомасштабный проект по извлечению гипермедийной информации, задача которого – предоставить универсальный доступ к обширной среде документов.
Наиболее заметная сторона интернета – Всемирная паутина, или, как сейчас ее называют, просто Сеть. Существует тенденция смешивать понятия «интернет» и «Сеть», которые на самом деле отличаются. Как мы увидели в главе 9, интернет – это коммуникационная инфраструктура или базовая платформа, благодаря которой миллионы компьютеров по всему миру обмениваются информацией. В свою очередь, Сеть соединяет серверы, то есть ЭВМ, предоставляющие информацию, с машинами, которые запрашивают ее. С клиентами вроде вас и меня. Сеть (WWW) использует интернет, чтобы устанавливать соединение и передавать информацию, а также обеспечивает нам интерфейс для доступа к другим службам с поддержкой интернета.
Как и многие другие великие идеи, Всемирная паутина в основе своей проста. Имеют значение только четыре аспекта (если мы предполагаем, что всё базируется на повсеместной, эффективной, открытой и в основном бесплатной сети, а это важная оговорка).
Во-первых, URL (Uniform Resource Locator, унифицированный указатель ресурса), который задает имя для источника информации. Например: http://www.amazon.com.
Во-вторых, HTTP (Hypertext Transfer Protocol, протокол обмена гипертекстовой информацией), кратко упомянутый в предыдущей главе как пример протокола более высокого уровня. HTTP-клиент делает запрос на определенный URL, а сервер возвращает запрошенную информацию.
В-третьих, HTML (Hypertext Markup Language, язык гипертекстовой разметки), язык для описания формата или представления информации, отправленной сервером. Тут тоже ничего сложного, и для владения им на базовом уровне вам нужно знать совсем немного.
И наконец, браузер в виде программы (например, Chrome, Firefox, Safari или Edge), которая запускается на вашем компьютере. Она создает запрос серверу, используя URL и HTTP, извлекает HTML, отправленный сервером, и отображает его.
Всемирная паутина зародилась в 1989 году, когда англичанин Тим Бернерс-Ли – специалист по информатике, работавший в CERN, Европейском центре ядерных исследований возле Женевы, – создал систему, призванную сделать научную литературу и результаты исследований более доступными через интернет. В его проект вошли URL-адреса, HTTP и HTML, а также клиентская программа для просмотра имеющихся материалов (исключительно текстовая). По ссылке https://info.cern.ch/hypertext/ WWW/TheProject.html можно посмотреть имитацию этой первой версии веб-сайта CERN.
Та программа для просмотра использовалась с 1990 года. Лично я видел ее в действии в октябре 1992 года во время визита в Корнелл[90]. Стыдно признаться, но тогда она не впечатлила меня, и я уж точно не предполагал, что менее чем через шесть месяцев изобретение первого графического браузера изменит мир. Вот тебе и «заглянул в будущее»…
Первый браузер под названием Mosaic разработали студенты Иллинойского университета. Их проект вышел в феврале 1993 года и быстро набрал популярность, а через год стал доступен первый коммерческий браузер Netscape Navigator, которому со старта сопутствовал успех. Хотя всплеск интереса к интернету застал Microsoft врасплох, корпорация быстро опомнилась и создала конкурента – Internet Explorer (IE), который с большим отрывом вырвался вперед по популярности.
Из-за доминирования Microsoft на рынке персональных компьютеров возникли опасения, что она создала монополию в нескольких областях, и в 1998 году Министерство юстиции США подало на компанию в суд. Разбирательство касалось и IE, поскольку утверждалось, что Microsoft злоупотребила своим доминирующим положением, чтобы вытеснить Netscape из бизнеса. Корпорация проиграла тяжбу, и ей пришлось изменить некоторые из своих деловых практик.
Сегодня самый широко используемый браузер на ноутбуках, настольных компьютерах и телефонах – Chrome. За ним со значительным отрывом идут Safari и Firefox. В 2015 году Microsoft выпустила новый браузер для Windows 10 под названием Edge, который заменил IE. Первоначально он работал на собственном коде Microsoft, но с 2019 года перешел на открытый исходный код Google Chromium. Доля рынка Edge ниже, чем у Firefox, а у IE – и того меньше.
Техническая эволюция Сети управляется (или, по крайней мере, направляется) некоммерческим предприятием под названием World Wide Web Consortium, или W3C, то есть «Консорциум Всемирной паутины» (w3.org). Основатель и нынешний директор W3C – тот самый Бернерс-Ли. Он не старался заработать на своем изобретении, а великодушно предпочел сделать его бесплатным для всех, хотя многие из тех, кто поспешил примазаться к интернету и Сети, возникшими благодаря его трудам, стали очень богатыми. В 2004 году королева Елизавета II посвятила его в рыцари.
10.1. Как работает Всемирная паутина
Давайте более внимательно посмотрим на технические компоненты и механизмы Всемирной паутины. Начнем с URL-адресов и HTTR
Представьте, что вы просматриваете веб-страницу в вашем любимом браузере. Какие-то фрагменты текста на ней набраны синим цветом, подчеркнуты или еще как-нибудь выделены. Если вы нажмете на один из них, то текущая страница будет заменена новой, на которую ссылается выделенный текст. Такие связанные страницы называются гипертекстом («больше, чем текст»). Это старая идея, но благодаря браузеру с ней знаком каждый.
Предположим, что в ссылке написано нечто вроде «домашняя страница W3C». Если вы наведете на нее курсор, то в строке состояния в нижней части окна браузера, скорее всего, появится URL-адрес, с которым связана ссылка (например, http://w3.org), и, возможно, дополнительная информация после доменного имени.
Когда вы нажимаете на ссылку, браузер открывает TCP/IP-соединение с портом 80 в домене w3.org и отправляет HTTP-запрос на информацию из остальной части URL. Если ссылка имеет вид http://w3.org/index. html, запрос предназначен для файла index.html.
Когда сервер для w3. org получает этот запрос, то решает, что делать дальше. Если запрашивается существующий файл на сервере, в качестве ответа он отправляет файл, и клиент (то есть браузер) отображает его. Текст, передающийся с сервера, почти всегда представлен в формате HTML, который сочетает в себе сам контент и информацию о том, как его форматировать или отображать.
Порой и в реальной жизни все происходит настолько просто, но так случается редко. Протокол позволяет браузеру отправлять вместе с запросом клиента пару строчек дополнительной информации, а ответ сервера обычно включает в себя несколько добавочных строчек, которые указывают тип и объем следующих за ними данных.
Сам URL-адрес кодирует информацию. Первая часть, http – это одна из нескольких возможных записей, сообщающих, какой именно протокол использовать. HTTP – наиболее распространенный, но вам могут встретиться и другие: file для получения информации с локального компьютера (а не из интернета) и популярный сейчас https для безопасной (зашифрованной) версии HTTP, о которой мы вскоре поговорим.
После:// следует доменное имя, определяющее сервер. Далее могут стоять косая черта (/) и строка символов. Она в точности передается на сервер, и тот волен поступить с ней как пожелает. В простейшем случае, когда нет даже косой черты, сервер возвращает страницу по умолчанию – например, index.html. Если задано имя файла, то его содержимое отправляется как есть. Знак вопроса после начальной части имени файла обычно означает, что сервер должен запустить программу, название которой прописывается перед? и отправить в нее остаток текста. По сути, это один из способов обработки информации, задаваемой в формах на веб-странице. Вот, например, поиск в Bing:
https://www.bing.com/search?q=funny+cat+pictures
Для проверки напечатайте это прямо в адресной строке браузера.
Любой текст после доменного имени записывается знаками из ограниченного набора, куда не входят пробелы и большинство не буквенно-цифровых символов, поэтому их требуется кодировать. Знак плюс (+) соответствует пробелу, а другие символы задаются с помощью % и двух шестнадцатеричных цифр. Например, фрагмент URL-адреса 5%2710%22%2D6%273%22 означает 5’10"-6’3", где шестнадцатеричное число 27 – символ одинарной кавычки, шестнадцатеричное число 22 соответствует двойной кавычке, а шестнадцатеричное 2D – знаку минус («короткому тире»).
10.2. HTML
Ответ с сервера обычно приходит в формате HTML, который сочетает в себе информацию о содержимом и форматировании. HTML настолько прост, что вы без труда создадите веб-страницу в вашем любимом текстовом редакторе. (Если вы работаете в чем-то вроде Microsoft Word, то нужно сохранить веб-страницу в виде
обычного текста, а не в формате по умолчанию, а после названия указать расширение html.) Информация о форматировании предоставляется тегами — они описывают содержимое и отмечают начало и часто конец разных областей на странице.
На рисунке 10.1 показан пример HTML для минималистичной веб-страницы. На рис. 10.2 вы можете увидеть, как его отобразит браузер.
Рис. 10.1. HTML для простой веб-страницы
Рис. 10.2. Отображение HTML-кода с рис. 10.1 в браузере
Файл изображения здесь по умолчанию пересылается из того же места, что и первоначальный файл, но его можно получить и из любой точки в интернете. Если файл, указанный в теге изображения , недоступен, браузер отобразит на его месте какой-нибудь условный рисунок, обозначающий сбой. Атрибут alt= указывает, какой текст появится, если само изображение вывести невозможно. Это небольшой пример того, как создать веб-страницу, удобную для людей с расстройствами зрения или слуха95.
Одни теги автономны (например, ), другие имеют начало и конец (такие, как
Большинство HTML-документов также содержат информацию на другом языке, называемом CSS (Cascading Style Sheets – каскадные таблицы стилей). С помощью CSS можно в одном месте определить свойства стиля – например, формат заголовков, – а затем применить их ко всем вхождениям. В частности, если нам хочется, чтобы все заголовки h2 и h3 отображались красным курсивом, зададим такую CSS:
h2, h3 { color: red; font-style: italic; }
И HTML, и CSS – языки, но не языки программирования. У них есть формальные грамматики и семантики, но нет циклов и условий, поэтому вы не сумеете записывать на них алгоритмы.
Цель этого раздела – показать вам ровно столько HTML, чтобы пролить свет на принципы работы вебстраниц. Для создания безупречных страниц, которые вы видели на коммерческих сайтах, требуется немалое мастерство, однако основы настолько просты, что всего через несколько минут обучения вам удастся изготовить собственный аналог, пусть и очень скромный. При создании большинства текстовых веб-страниц вам понадобится всего десяток тегов, и еще стольких же хватит, чтобы обеспечить практически всё, что важно для обычного пользователя. Подготовить страницы вручную легко: в текстовых редакторах имеется функция «создать HTML», а также существуют программы, специально предназначенные для разработки профессиональных веб-страниц. Такие инструменты понадобятся вам, только если вы решите серьезно заняться веб-дизайном, но в любом случае полезно разобраться, как здесь всё устроено изнутри.
В первом своем воплощении HTML обрабатывал только обычный текст для отображения браузером. Однако прошло совсем немного времени, и браузеры стали выводить изображения: простые иллюстрации в формате GIF, такие как логотипы и смайлики, и картинки в JPEG. На веб-страницах появились формы для заполнения, кнопки для нажатия и новые окна, которые либо всплывали над текущим, либо заменяли его. Вскоре добавились звуки, анимация и видеоклипы (как правило, сначала требовалось, чтобы достаточно выросли пропускная способность и вычислительная мощность, иначе их не получилось бы отображать и быстро скачивать).
Далее рассмотрим простой механизм с неочевидным названием «стандарт CGI» (Common Gateway Interface – общий шлюзовый интерфейс). Он передает информацию от клиента (вашего браузера) к серверу – например, логин и пароль, поисковый запрос или сведения о том, что вы выбрали с помощью радиокнопок и выпадающих меню. Этот метод задается тегом
в HTML. В раздел