Что такое HTML, CSS и JS
Три слова, из которых состоит любой сайт. Разбираемся спокойно, не спеша, один раз и навсегда
Прочтите это первым
Если вы услышали три незнакомых слова и внутри всё сжалось — выдохните. Сейчас всё будет понятно.
Вам не придётся это учить. Ни сегодня, ни потом. Писать на этих языках будет искусственный интеллект — ровно как он делал это в первом модуле, когда собирал вам сайт из одного предложения.
Тогда зачем вообще эта шпаргалка? Только для одного: чтобы, когда вы откроете код и увидите непонятные строчки, вы не испугались и понимали, куда смотреть.
Приведу сравнение.
Вы садитесь в машину и едете. Вы не знаете, как устроен двигатель, как именно бензин превращается в движение. И не обязаны знать — вы прекрасно водите без этого.
Но три вещи знать полезно: где заливать бензин, где — воду для стекла, а куда лучше вообще не лезть без мастера. Чтобы случайно не залить одно вместо другого.
Вот эта шпаргалка — про то же самое. Три «бака» сайта: где что находится и за что отвечает. Не больше.
С чего всё начинается: сайт — это дом
Представьте, что сайт — это дом. Обычный дом, в котором живут люди.
Чтобы дом получился, нужны три совершенно разные работы. И делают их разные люди, каждый — своё.
Первая работа — построить каркас и стены. Это скелет дома. Где будет комната, где дверь, где окно, где лестница. Пока это просто серая коробка без отделки, но она уже стоит, и видно, что где.
Вторая работа — сделать отделку. Теперь коробку превращают в жильё. Клеят обои, красят стены, кладут плитку, вешают шторы. Дом становится красивым и уютным. Но сами стены при этом не двигаются — меняется только их вид.
Третья работа — провести электрику и воду. Чтобы дом стал живым. Чтобы включался свет, работали розетки, текла вода из крана. Этого не видно глазами, но без этого дом мёртвый.
Теперь запомните главное соответствие. У сайта ровно те же три работы, только называются они по-другому:
🧱 Каркас и стены
Что делает
Что где стоит
На сайте это называется
HTML
🎨 Отделка
Что делает
Как выглядит
На сайте это называется
CSS
⚡ Электрика и вода
Что делает
Что работает
На сайте это называется
JavaScript
| В доме | Что делает | На сайте это называется |
|---|---|---|
| 🧱 Каркас и стены | Что где стоит | HTML |
| 🎨 Отделка | Как выглядит | CSS |
| ⚡ Электрика и вода | Что работает | JavaScript |
Вот и всё. Три слова — это просто три работы по постройке дома. Дальше разберём каждую отдельно, медленно.
🧱 Первое: HTML
Каркас и стены
Как читается: «эйч-ти-эм-эл». Просто четыре буквы подряд, как в слове «эс-эм-эс».
За что отвечает: за содержание. За то, что вообще есть на странице.
Давайте на примере. Вот что бывает на сайте пекарни:
- заголовок «Домашняя пекарня»
- строчка текста под ним
- картинка с хлебом
- кнопка «Заказать»
Так вот, HTML — это тот, кто говорит: «здесь стоит заголовок», «здесь идёт строчка текста», «здесь картинка», «а здесь кнопка».
Он просто расставляет всё по местам. Как человек, который расставляет мебель в пустой комнате: сюда диван, сюда стол, сюда шкаф. Пока без обоев и без света — просто расставил.
Если убрать HTML — не останется вообще ничего. Пустая белая страница. Потому что убрать содержание — это убрать всё.
Давайте посмотрим, как это выглядит
Сейчас я покажу настоящий код. Не пугайтесь и не пытайтесь вникнуть в каждый значок — просто посмотрите спокойно, как на текст на незнакомом языке.
<h1>Домашняя пекарня</h1> <p>Печём на закваске каждый день</p> <button>Заказать хлеб</button>
Теперь переведу это на человеческий, строчку за строчкой:
Первая строчка — <h1>Домашняя пекарня</h1> Это большой заголовок. Внутри написано «Домашняя пекарня». Буква h — от английского слова «заголовок», а единичка означает, что он самый главный, самый крупный.
Вторая строчка — <p>Печём на закваске каждый день</p> Это обычная строчка текста. Буква p — от английского слова «параграф», то есть «абзац».
Третья строчка — <button>Заказать хлеб</button> Это кнопка, а на ней написано «Заказать хлеб». Слово button по-английски и означает «кнопка».
Обратите внимание на одну штуку
Видите, что каждый кусочек как будто спрятан в такие уголки? <...> в начале и почти такие же, но с чёрточкой, </...> в конце.
Это как коробка с крышкой.
<button> — это «открываем коробку, дальше пойдёт кнопка». </button> — это «закрываем коробку, кнопка закончилась».
А всё, что лежит между ними, — это то, что внутри кнопки. В нашем случае надпись «Заказать хлеб».
Зачем это нужно? Чтобы компьютер понимал, где что начинается и где заканчивается. Люди отделяют мысли точками и абзацами, а сайт — вот такими уголками.
И на этом про HTML всё. Больше вам знать не нужно. Честно.
🎨 Второе: CSS
Отделка
Как читается: «си-эс-эс». Снова просто три буквы.
За что отвечает: за внешний вид. За цвета, размеры, шрифты, за расстояния между элементами.
Вернёмся к дому. Каркас построили — стоит серая коробка. Жить в ней можно, но неуютно.
Приходит время отделки. И вот тут появляется CSS. Он решает: стены будут бежевыми, кнопка — терракотовой, буквы — вот такого размера, а между блоками пусть будет побольше воздуха.
Сам по себе HTML, без отделки, выглядит уныло. Чёрные буквы на белом фоне, всё прижато к левому краю, никакой красоты. Как документ, распечатанный на старом принтере.
CSS превращает эту скучную страницу в красивый сайт. При этом — внимание, это важно — само содержание не меняется. Заголовок остаётся заголовком, кнопка — кнопкой. Меняется только их вид. Как обои не двигают стену, а просто делают её красивее.
Если убрать CSS — всё содержание останется на месте, но выглядеть будет как в девяностые. Голо, серо, некрасиво. Но работать будет.
Смотрим, как выглядит
Снова настоящий код. Снова — просто посмотрите, без напряжения.
button {
background: terracotta;
color: white;
border-radius: 12px;
}Перевожу на человеческий:
Первая строчка — button { «Сейчас будем наряжать кнопку». Слово button — «кнопка», а фигурная скобка { означает «начинаем перечислять, как её украсить».
Вторая строчка — background: terracotta; «Фон — терракотовый». background по-английски — «фон».
Третья строчка — color: white; «Цвет букв — белый». color — «цвет», white — «белый».
Четвёртая строчка — border-radius: 12px; «Углы — скруглённые». Это то самое скругление уголков, которое делает кнопку мягкой, а не острой.
По-человечески вся эта запись означает одно: «сделай кнопку терракотовой, буквы на ней белыми, а уголки — скруглёнными».
А вот это запомните — это про вас
Девять из десяти ваших правок будут именно в CSS.
Подумайте сами, что вы чаще всего захотите поменять на своём сайте:
- поменять цвет
- увеличить кнопку
- раздвинуть блоки, чтобы не было тесно
- сменить шрифт на покрупнее
Всё это — CSS. Всё это — про внешний вид.
Поэтому, когда на уроках мы будем что-то править руками, почти всегда это будет именно CSS. Это самый «ваш» из трёх языков.
⚡ Третье: JavaScript
Электрика и вода
Как читается: «джаваскрипт». Длинновато, поэтому чаще говорят коротко — «джей-эс».
За что отвечает: за действия. За то, что происходит, когда человек что-то нажимает или вводит.
И снова дом. Каркас есть, отделка есть. Красиво. Но пока это как красивая, но нежилая квартира из каталога: свет не горит, вода не течёт, розетки не работают.
Приходит электрик — и дом оживает. Щёлкнул выключателем — загорелся свет. Открыл кран — потекла вода.
JavaScript — это и есть тот электрик для сайта. Он отвечает за всё, что происходит после действия человека:
- нажали кнопку — открылась форма
- заполнили форму — данные сохранились
- выбрали услугу — пересчиталась цена
- поставили галочку — пункт зачеркнулся
Всё, что «оживляет» страницу, что заставляет её реагировать, — это JavaScript.
Если убрать JavaScript — сайт останется красивым, но станет мёртвым. Кнопки будут, но при нажатии ничего не произойдёт. Как выключатель, за которым нет проводки: щёлкаешь, а света нет.
Смотрим
button.addEventListener('click', function() {
alert('Спасибо за заказ!');
});Здесь значков побольше, и это нормально. Вам их читать не надо. Просто посмотрите и запомните смысл целиком.
А смысл вот такой, по-человечески:
«Когда человек нажмёт на кнопку — покажи ему сообщение "Спасибо за заказ!"»
Всё. Вот что делает этот кусок. Не важно, что означает каждая скобка. Важно, что теперь вы узнаёте: если код отвечает за то, что происходит после нажатия, — это JavaScript.
Одна важная оговорка, чтобы вы не запутались
Есть два похожих слова: JavaScript и Java. Отличаются одним словом, а на деле это два совершенно разных языка. Так вышло исторически, по недоразумению, — как будто «Иванов» и «Иваненко»: похоже, но разные люди.
Java вам не понадобится никогда. Если где-то встретите просто «Java» без «script» — знайте, это не про нас, и проходите мимо.
Теперь соберём всё вместе
Возьмём одну-единственную кнопку «Заказать» и посмотрим, как в ней участвуют все три языка сразу.
🧱 HTML — создаёт кнопку и пишет на ней «Заказать»
🎨 CSS — делает её терракотовой, крупной, со скруглёнными углами
⚡ JS — заставляет её открывать форму, когда на неё нажмут
Три языка. Три задачи. Одна кнопка.
- HTML сказал: тут есть кнопка.
- CSS сказал: и выглядит она вот так.
- JavaScript сказал: а при нажатии делает вот это.
И так устроен вообще любой сайт в интернете. Ваша будущая пекарня, огромный интернет-магазин, социальная сеть — всё это внутри те же три языка. Отличается только количество и сложность, а принцип один.
Самое полезное: куда смотреть, когда что-то не так
Вот ради этой таблицы шпаргалка и написана. Когда на сайте что-то не так, тип проблемы сразу подсказывает, в какой из трёх файлов заглядывать.
Не хватает текста, блока, картинки
Это про что
Про содержание
Значит, дело в
🧱 HTML
Не тот цвет, размер, шрифт, тесно стоит
Это про что
Про внешний вид
Значит, дело в
🎨 CSS
Кнопка не нажимается, форма не отправляется
Это про что
Про поведение
Значит, дело в
⚡ JS
| Что вы видите | Это про что | Значит, дело в |
|---|---|---|
| Не хватает текста, блока, картинки | Про содержание | 🧱 HTML |
| Не тот цвет, размер, шрифт, тесно стоит | Про внешний вид | 🎨 CSS |
| Кнопка не нажимается, форма не отправляется | Про поведение | ⚡ JS |
Разберём на двух примерах, чтобы стало совсем понятно.
Пример первый. Кнопка бледная и слишком маленькая. О чём это? О внешнем виде. Значит — CSS. Идём в файл с оформлением.
Пример второй. Кнопка выглядит отлично, но нажимаешь — и ничего не происходит. О чём это? О поведении. Значит — JavaScript. Идём в файл с поведением.
Видите разницу? В обоих случаях виновата кнопка, но проблема разная — и лежит она в разных местах.
Зачем это, если чинит всё равно ИИ
Хороший вопрос. Даже если вы не полезете в код руками, а попросите ИИ — теперь вы можете попросить точнее.
Сравните:
- «что-то не так с кнопкой» — ИИ будет гадать
- «поправь цвет кнопки, это в CSS» — ИИ сразу поймёт, куда смотреть
А чем точнее просьба — тем лучше результат. Мы это подробно разбирали в первом модуле, когда учились писать промпты.
Какие файлы вы увидите в проекте
Когда откроете свой проект в редакторе, слева будет список файлов. Среди них — три знакомых:
📄 index.html ← содержание (HTML) 📄 style.css ← оформление (CSS) 📄 script.js ← поведение (JavaScript)
Теперь, глядя на этот список, вы понимаете, кто за что отвечает.
Как узнать файл, даже если имя другое? По трём буквам после точки — это называется «расширение», и оно всегда выдаёт, что внутри:
- заканчивается на .html → внутри содержание
- заканчивается на .css → внутри оформление
- заканчивается на .js → внутри поведение
Имя перед точкой может быть любым, а вот эти три буквы после точки не врут.
Если запомнить только одно
Три языка — это три работы по постройке дома:
🧱 HTML — что есть на странице. Каркас и стены.
🎨 CSS — как это выглядит. Отделка.
⚡ JS — что происходит при нажатии. Электрика.
И самое-самое главное, ещё раз:
Учить это не нужно. Запоминать наизусть не нужно. Нужно всего лишь не пугаться при виде кода и примерно понимать, в какой из трёх файлов заглянуть, если что-то пошло не так.
Всё остальное — написать, поправить, починить — сделает за вас ИИ.
Вы просто теперь знаете, где в машине бензобак.