Если вы введёте указанный URL в адресную строку браузера, он попробует запросить и показать документ, находящийся по этому URL. Во-первых, браузеру надо выяснить, куда ссылается домен eloquentjavascript.net. Затем, используя протокол HTTP, он соединяется с сервером по этому адресу, и спрашивает его ресурс по имени /12_browser.html

В главе 17 мы подробнее рассмотрим протокол HTTP.

HTML, или язык разметки гипертекста, Hypertext Markup Language – формат документа, использующийся для веб-страниц. HTML содержит текст и теги, придающие тексту структуру, описывающие такие вещи, как ссылки, параграфы и заголовки.

Простой HTML документ может выглядеть так:

Моя домашняя страничка

Привет, я Марейн и это моя домашняя страничка.

А ещё я книжку написал! Читайте её

здесь.

Теги, окружённые угловыми скобками <и >, описывают информацию о структуре документа. Всё остальное – просто текст.

Документ начинается с , и это говорит браузеру, что его надо интерпретировать как современный HTML, в отличие от разных диалектов прошлого.

У HTML документов есть заголовок и тело. Заголовок содержит информацию о документе, а тело – сам документ. В нашем случае мы объявили, что название страницы будет «Моя домашняя страничка», затем описали документ, содержащий заголовок (

, то есть heading 1, заголовок 1. Есть ещё

–

, заголовки разных размеров) и два параграфа.

У тегов может быть несколько форм. Элемент вроде тела, параграфа и ссылки начинается открывающим тегом

и заканчивается закрывающим

. Некоторые открывающие теги, типа ссылки , содержат дополнительную информацию в виде имя=”значение”. Она называется «атрибутами». В нашем случае адрес ссылки задан как href="http://eloquentjavascript.net", где hrefозначает «гипертекстовая ссылка», “hypertext reference”.

Некоторые теги ничего не окружают, и их не надо закрывать. Пример – тег картинки

Чтобы включать в текст документа угловые скобки, нужно пользоваться специальной записью, так как в HTML они имеют особое значение. Открывающая скобка (она же знак «меньше») записывается как <(«less than», «меньше, чем»), закрывающая — >(«greater that», «больше, чем»). В HTML амперсанд &, за которым идёт слово и точка с запятой, зовётся сущностью и заменяется символом, который кодируется этой последовательностью.

Это похоже на обратные слэши, используемые в строках JavaScript. Из-за специального значения амперсанда его самого в текст можно включать в виде &. В атрибуте, заключаемом в двойные кавычки, символ кавычек записывается как ".

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

Следующий документ будет обработан так же, как и предыдущий.

Моя домашняя страничка

Привет, я Марейн и это моя домашняя страничка.

А ещё я книжку написал! Читайте её

here.

Отсутствуют теги ,

и . Браузер знает, что должен быть в , а

— в

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

В этой книге мы опустим теги ,

и для краткости. Но я буду закрывать теги, и заключать атрибуты в кавычки.

Также обычно я буду опускать doctype. Я не советую делать это вам – браузеры иногда могут творить странные вещи, когда вы их опускаете. Считайте, что они присутствуют в примерах по умолчанию.

В контексте нашей книги самый главный тег HTML — . Он позволяет включать в документ программу на JavaScript.

Внимание, тест.

alert("Привет!");

Такой скрипт запустится сразу, как только браузер встретит тег при разборе HTML. На странице появится диалог-предупреждение.

Включать большие программы в HTML непрактично. У тега есть атрибут src, чтобы запрашивать файл со скриптом (текст, содержащий программу на JavaScript) с адреса URL.

Внимание, тест.

В файле code/hello.js содержится та же простая программа alert('Привет!');. Когда страница ссылается на другой URL и включает его в себя, браузер подгружает этот файл и включает их в страницу.

Тег scriptвсегда надо закрывать при помощи , даже если он не содержит кода и ссылается на файл скрипта. Если вы забудете это сделать, оставшаяся часть страницы будет обработана как скрипт.

Читать дальше