Чтобы добавить в Веб содержимое, вам нужно соединить машину с интернетом и заставить её слушать 80 порт, используя протокол передачи гипертекста, Hypertext Transfer Protocol (HTTP). Он позволяет другим компьютерам запрашивать документы по сети.
Каждый документ имеет имя в виде универсального локатора ресурсов, Universal Resource Locator (URL), который выглядит примерно так:
http://eloquentjavascript.net/12_browser.html
| | | |
протокол сервер путь
Первая часть говорит нам, что URL использует протокол HTTP (в отличие от, скажем, зашифрованного HTTP, который записывается как https://). Затем идёт часть, определяющая, с какого сервера мы запрашиваем документ. Последняя – строка пути, определяющая конкретный документ или ресурс.
У каждой машины, присоединённой к интернету, есть свой адрес IP, который выглядит как 37.187.37.82. Его иногда можно использовать вместо имени сервера в URL. Но цифры сложнее запоминать и печатать, чем имена – поэтому обычно вы регистрируете доменное имя, которое указывает на конкретную машину (или набор машин). Я зарегистрировал eloquentjavascript.net, указывающий на IP-адрес машины, которую я контролирую, поэтому можно использовать этот адрес для предоставления веб-страниц.
Если вы введёте указанный URL в адресную строку браузера, он попробует запросить и показать документ, находящийся по этому URL. Во-первых, браузеру надо выяснить, куда ссылается домен eloquentjavascript.net. Затем, используя протокол HTTP, он соединяется с сервером по этому адресу, и спрашивает его ресурс по имени /12_browser.html
В главе 17 мы подробнее рассмотрим протокол HTTP.
HTML
HTML, или язык разметки гипертекста, Hypertext Markup Language – формат документа, использующийся для веб-страниц. HTML содержит текст и теги, придающие тексту структуру, описывающие такие вещи, как ссылки, параграфы и заголовки.
Простой HTML документ может выглядеть так:
<!doctype html>
<html>
<head>
<title>Моя домашняя страничка</title>
</head>
<body>
<h1> Моя домашняя страничка </h1>
<p>Привет, я Марейн и это моя домашняя страничка.</p>
<p>А ещё я книжку написал! Читайте её
<a href="http://eloquentjavascript.net">здесь</a>.</p>
</body>
</html>
Теги, окружённые угловыми скобками < и >, описывают информацию о структуре документа. Всё остальное – просто текст.
Документ начинается с <!doctype html>, и это говорит браузеру, что его надо интерпретировать как современный HTML, в отличие от разных диалектов прошлого.
У HTML документов есть заголовок и тело. Заголовок содержит информацию о документе, а тело – сам документ. В нашем случае мы объявили, что название страницы будет «Моя домашняя страничка», затем описали документ, содержащий заголовок (<h1>, то есть heading 1, заголовок 1. Есть ещё <h2> – <h6>, заголовки разных размеров) и два параграфа.
У тегов может быть несколько форм. Элемент вроде тела, параграфа и ссылки начинается открывающим тегом <p> и заканчивается закрывающим </p>. Некоторые открывающие теги, типа ссылки <a>, содержат дополнительную информацию в виде имя=”значение”. Она называется «атрибутами». В нашем случае адрес ссылки задан как href="http://eloquentjavascript.net", где href означает «гипертекстовая ссылка», “hypertext reference”.
Некоторые теги ничего не окружают, и их не надо закрывать. Пример – тег картинки
<img src="http://example.com/image.jpg">
Чтобы включать в текст документа угловые скобки, нужно пользоваться специальной записью, так как в HTML они имеют особое значение. Открывающая скобка (она же знак «меньше») записывается как < («less than», «меньше, чем»), закрывающая — > («greater that», «больше, чем»). В HTML амперсанд &, за которым идёт слово и точка с запятой, зовётся сущностью и заменяется символом, который кодируется этой последовательностью.
Это похоже на обратные слэши, используемые в строках JavaScript. Из-за специального значения амперсанда его самого в текст можно включать в виде &. В атрибуте, заключаемом в двойные кавычки, символ кавычек записывается как ".
HTML разбирается парсером довольно либерально по отношению к возможным ошибкам. Если какие-то теги пропущены, браузер их воссоздаёт. Как именно это происходит, записано в стандартах, поэтому можно ожидать, что все современные браузеры будут делать это одинаково.