Подготовка проекта
Возьмите книгу. У неё есть страницы с текстом и картинками. Открываете, читаете, всё понятно. Автор написал текст, типография напечатала, вы взяли с полки в библиотеке или книжном.
Веб-сайт работает похоже, только книга хранится не на полке, а на другом компьютере где-то в интернете. Может в Москве, может в Амстердаме, а может вообще в дата-центре посреди пустыни. Вводите адрес в браузере. Ваш компьютер отправляет запрос: «Дайте мне эту страницу». Тот компьютер упаковывает файлы и отправляет обратно. Браузер их получает и показывает на экране. Как почта, только мгновенно.
Каждый сайт живёт на сервере. Сервер это обычный компьютер, который работает круглосуточно без выходных и праздников. Представьте, что это библиотекарь, который никогда не спит и готов отдать вам книгу в любой момент. На нём хранятся файлы сайта, эти файлы как строительные блоки конструктора. Один файл содержит текст и заголовки. Другой хранит цвета и размеры. Третий отвечает за движение и кнопки.
Файловая структура
Теперь разберёмся с этими блоками подробнее. Первый блок называется HTML. Это скелет страницы, её каркас. HTML описывает, что на странице есть и в каком порядке расположено. Заголовок, параграф, кнопка, картинка. Всё это HTML. Как план дома на бумаге: тут будет комната, тут коридор, тут кухня.
Второй блок это CSS. Если HTML это скелет, то CSS это одежда, обои, мебель и вся красота. CSS отвечает за внешний вид. Заголовок становится большим и красным. Кнопка получает округлые углы и тень. Текст располагается по центру с красивыми отступами. Всё это делает CSS. Как дизайнер интерьера, который превращает голые стены в уютную квартиру.
Третий блок это JavaScript. Это мышцы и мозг страницы. JavaScript делает сайт живым и реагирующим на действия. Нажимаете кнопку, появляется окно. Скролите страницу, картинка плавно въезжает сбоку. Вводите текст в поле поиска, выскакивают подсказки. Это всё работа JavaScript. Как нервная система в теле, которая заставляет всё двигаться и реагировать.
Ключевые элементы, из чего строится веб-сайт
Но тут возникает вопрос. Как эти три блока превращаются в то, что видим на экране?
Открываете сайт. Браузер отправляет запрос на сервер. Сервер находит нужные файлы HTML, CSS и JavaScript, упаковывает их в одну посылку и отправляет обратно. Браузер получает файлы и начинает колдовать. Сначала читает HTML, чтобы понять структуру: где что должно стоять. Потом применяет CSS, чтобы раскрасить и расставить всё красиво. Наконец запускает JavaScript, чтобы добавить интерактивность. После этого видите готовую страницу.
Всё это происходит за доли секунды. Кажется, что сайт появляется мгновенно, как по щелчку пальцев. На самом деле за кулисами произошла целая цепочка событий, как в отлаженном механизме швейцарских часов.
Что происходит на сайте / adc.ac / Ноябрь 2025
Теперь представьте большой город. Дома это сайты. В каждом доме живут данные. Ищете информацию, приходите в нужный дом, стучитесь. Жильцы открывают дверь и выдают вам то, что нужно. Как соседи, которые подскажут, где ближайшая аптека или как пройти в библиотеку.
Точно так же работают базы данных. База данных это огромное хранилище информации на больших сайтах. Социальные сети, интернет-магазины, сервисы доставки. Каждый день обрабатываются миллионы и миллиарды запросов. Ищете товар в магазине, браузер обращается к базе данных. База моментально находит среди миллионов позиций нужную и показывает её вам с картинками, описанием и ценой.
База данных — просто набор связанных таблиц
Всё построено на одном принципе взаимодействия. Сервер это помощник, готовый ответить на любой вопрос. Браузер это посланник, который задаёт вопросы и получает ответы. HTML, CSS и JavaScript это инструменты, которые вместе создают то, что видим на экране. Как оркестр, где каждый инструмент играет свою партию, но вместе получается симфония.
Главное запомнить вот что. Веб-сайт это разговор между двумя компьютерами. Ваш спрашивает, удалённый отвечает. Благодаря этому простому диалогу можем смотреть сериалы, читать новости, общаться с друзьями, учиться новому и работать удалённо из любой точки мира.
Прежде чем писать код, нужен инструмент. Когда пишете письмо, берёте ручку. Когда работаете с документами, открываете Word. А когда пишете код, включаете специальный редактор кода, и он становится вашей мастерской на ближайшие годы.
Редактор кода это не просто место, где набираете текст. Обычный Word не понимает, что происходит в коде. Он видит текст и думает: «Ага, сейчас добавлю красивый шрифт, выровняю по центру». В итоге код превращается в кашу. Редактор кода устроен иначе. Он знает язык программирования. Видит ключевое слово, раскрашивает одним цветом. Видит функцию, подсвечивает другим. Как учитель, который проверяет работу и подчёркивает ошибки красным, только здесь всё наоборот, правильное подсвечивается.
Если откроете файл с кодом в Word, он попытается его «улучшить». Добавит свои символы, исправит кавычки на красивые, может вставить невидимые пробелы. Весь код сломается, а вы будете сидеть и думать: «Я ничего не менял, но всё сломалось!» Знакомая история для каждого программиста.
Представьте библиотеку. Библиотекарь не просто хранит книги, он знает, где каждая стоит. Ищете книгу про историю, он показывает полку. Редактор кода работает так же. Начинаете писать слово, он предлагает закончить. Ищете функцию, он показывает, где она определена. Это называется автодополнение и навигация. Как подсказки в телефоне, только умнее в сто раз.
Самый популярный редактор называется VS Code. Его сделала Microsoft, да, та самая компания с Windows. Он бесплатный, работает на любой системе. VS Code стал стандартом, потому что простой снаружи, но мощный внутри. Как швейцарский нож, только для кода.
Code.visualstudio.com / Ноябрь 2025
Скачиваете VS Code с официального сайта. После установки открываете программу. Перед вами пустой экран с панелью слева. В центре большое пространство для кода. Справа пока ничего нет, это место для расширений и дополнительной информации.
Создаёте папку на компьютере. Называете её, например, «myfirstsite». Открываете VS Code, выбираете File, потом Open Folder. Находите папку и открываете. Слева появляется структура папки. Если она пустая, видите только название.
Главный экран в VS Code / Code.visualstudio.com / Ноябрь 2025
Нажимаете на иконку нового файла рядом с названием папки. Появляется поле для имени. Пишете index.html. Расширение .html говорит компьютеру: «Это файл с кодом на HTML, не трогай его своим форматированием». Жмёте Enter. Файл создался, появился в панели слева. Кликаете на него. В центре экрана открылось пустое место для кода.
Пишете первую строку кода:
Смотрите, что случилось. Слово в угловых скобках раскрасилось синим. Текст внутри остался обычным. Это синтаксис хайлайтинг, подсветка синтаксиса. VS Code показывает: синее это команда, обычный текст это содержимое. Как если бы в учебнике правила выделяли жирным, а примеры оставляли обычным шрифтом.
Сохраняете файл. Жмёте Ctrl+S на Windows или Cmd+S на Mac. Файл сохранился. Название перестало быть белым и стало серым. Белый цвет это предупреждение: «Файл не сохранён, все изменения пропадут, если закроете программу».
Теперь открываете файл в браузере. Находите index.html в своей папке на компьютере. Двойной клик, и он откроется в дефолтном браузере. Можете кликнуть правой кнопкой и выбрать конкретный браузер, например Chrome.
Пример HTML-документа с тегом h1
На экране написано «Привет, мир!». Ровно то, что вы написали в коде. Браузер прочитал HTML файл, увидел тег заголовка и показал текст большими буквами. Магия? Нет, просто браузер понимает язык HTML.
Вы создали первый сайт. Одна строка кода, но она работает. На экране перед вами результат. В редакторе слева лежит исходник. Это основной цикл разработки, который будет повторяться тысячи раз. Пишете код, сохраняете, смотрите в браузере. Что-то не так? Меняете код, сохраняете, обновляете браузер. И так по кругу, пока не получится то, что задумали.
Со временем привыкнете к VS Code и начнёте пользоваться горячими клавишами. Вместо мыши будете нажимать комбинации клавиш, и работа ускорится раза в три. Но пока просто привыкайте. Откройте редактор, создайте файл, напишите код, посмотрите результат в браузере. Это и есть вся магия.
Перед следующим разделом предлагаем открыть дизайн сайта в Figma, который будем создавать по ходу учебника. В конце не только напишем его код, но и выгрузим в интернет, чтобы не держать компьютер постоянно включённым. И тогда каждый сможет увидеть ваше творение.
