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

В этом курсе мы будем разбирать веб через учебный проект TaskBoard. Это будущий прототип сервиса для управления проектами и задачами. В нем постепенно появятся главная страница, список проектов, доска, карточки задач и формы. Подробно сам продукт и его папку мы разберем в следующем уроке. Сейчас TaskBoard нужен как понятный пример сайта, который открывается в браузере.

Представьте первый экран TaskBoard. Вверху окна браузера есть вкладка и адресная строка. Ниже видна область сайта: название продукта, короткое описание, несколько будущих разделов. Пользователь воспринимает это как одну страницу. Разработчику важно разделить картину точнее.

Вкладка, адресная строка, кнопки назад и вперед принадлежат браузеру. Сайт не рисует эти элементы и не управляет ими напрямую. Содержимое TaskBoard находится внутри области страницы. Именно там появляются заголовки, текст, списки, ссылки, изображения, формы и карточки.

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

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

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

Браузер показывает документ

Браузер часто называют программой для интернета. Для разработчика полезнее смотреть на него как на программу, которая умеет открывать веб-страницы. Он получает документ, разбирает его и показывает результат в своей основной области.

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

У страницы есть содержимое. В TaskBoard это может быть название продукта, описание, список проектов, ссылка на доску задач, карточка, форма. Пока эти части не описаны в документе, браузеру нечего показать. Он не придумывает интерфейс продукта самостоятельно. Он показывает то, что получил и смог разобрать.

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

Страница может прийти из файла или с сервера

Одна и та же идея страницы может попасть в браузер двумя привычными путями.

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

На настоящем сайте путь длиннее. Пользователь вводит адрес или открывает ссылку. Браузер обращается к удаленному компьютеру, получает от него ответ и показывает страницу. Этот удаленный компьютер или программа на нем называется сервером.

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

Серверная часть появится позже. Сначала TaskBoard будет статическим прототипом: набором файлов, которые браузер открывает напрямую. Это снижает количество деталей. Вы видите страницу, файл и результат в браузере, а сервер вернется в курс тогда, когда для него уже будет понятная причина.

Когда браузер и сервер обмениваются данными, они используют общие правила. Эти правила называются HTTP.

На этом этапе достаточно общей картины. Браузер отправляет запрос: например, просит главную страницу. Сервер возвращает ответ: документ, файл или данные. В блоке про HTTP мы разберем этот обмен подробно. Сейчас важно только увидеть место HTTP на карте: он связывает браузер и сервер.

У страницы есть структура, внешний вид и поведение

Видимый экран TaskBoard кажется одной цельной вещью. Для разработки его удобнее разделить на три слоя.

Сначала нужно описать, что находится на странице. У TaskBoard будет название, описание, список проектов, доска задач, карточки, формы. Этот слой отвечает за смысловую структуру. В вебе для него используют HTML.

HTML помогает браузеру понять состав документа: где заголовок, где обычный текст, где ссылка, где список, где форма. На этом уровне мы еще не выбираем цвета и не настраиваем реакцию кнопок. Мы отвечаем на вопрос: какие части есть на странице и какую роль они играют.

После структуры понадобится внешний вид. Один и тот же список проектов можно показать плотной колонкой, аккуратными карточками или широкой доской. Нужно выбрать шрифт, цвет, расстояния между блоками, размеры кнопок, расположение карточек. Этим занимается CSS.

Третий слой появляется, когда странице нужно реагировать на действия пользователя. В TaskBoard кнопка может открыть форму новой задачи. Фильтр может показать только задачи в работе. Поле ввода может подсказать, что название задачи пустое. Такое поведение добавляет JavaScript.

Эти три слоя будут появляться постепенно. Сейчас не нужно писать HTML, CSS или JavaScript. Важно запомнить роли. HTML отвечает за состав страницы. CSS отвечает за внешний вид. JavaScript отвечает за реакцию страницы на действия пользователя.

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

Почему курс начинается с обычных файлов

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

Для первого курса такой старт перегружает. Человек видит много папок, команд и настроек, но еще не понимает, что браузер получает и почему на экране появляется страница. Инструмент оказывается впереди смысла.

В этом курсе TaskBoard будет расти другим порядком. Сначала мы поймем страницу как документ. Затем подготовим папку проекта. Потом соберем первый HTML-документ, свяжем страницы ссылками, разметим содержимое, добавим оформление, поведение и только после этого перейдем к HTTP.

Такой порядок похож на создание макета продукта. Сначала нужно понять, какие экраны есть у продукта и как человек между ними движется. Затем можно заниматься внешним видом, интерактивностью и данными. TaskBoard подходит для такого движения: у системы задач есть понятные экраны, которые легко представить до сложного кода.

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

Рабочая карта первого урока

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

Браузер - программа вокруг страницы: вкладки, адресная строка, кнопки навигации. Веб-страница - документ, который браузер получил и показал в основной области окна. Если страница лежит на компьютере, браузер читает файл напрямую. Если страница открыта по адресу сайта, браузер получает ответ от сервера. Когда браузер и сервер обмениваются запросами и ответами, они используют HTTP.

HTML будет описывать состав страницы TaskBoard: название, описание, список проектов, ссылки на будущие экраны. CSS позже сделает страницу читаемой и похожей на интерфейс. JavaScript позже добавит реакции на действия пользователя.

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

Что важно унести из первого урока

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

Когда вы смотрите на сайт в браузере, отделяйте интерфейс браузера от содержимого сайта. Спрашивайте, откуда пришла страница: из локального файла или с сервера. Держите в голове три слоя будущей работы: HTML описывает структуру, CSS задает внешний вид, JavaScript добавляет поведение.

В следующем уроке TaskBoard перестанет быть только примером. Мы разберем, что это за учебный продукт, какие экраны у него появятся и как будет устроена папка проекта. После этого можно будет перейти к первому настоящему HTML-документу.