Play IT

Веб-стек для новичка

Интерактивное демо «Веб-стек для новичка» — раздел Энциклопедия · Данные и разметка.

data-markupencyclopedia

Языки для начинающих: HTML, CSS, JS, Python, PHP

Роли языков, типичные ошибки и связанные демонстрации

Последовательность изучения: разметка → стили → клиентский JS → серверный Python или PHP.

1. HTML2. CSS3. JavaScript4. Python5. PHP
ЯзыкГде выполняетсяИсходник в браузере
📄 HTMLБраузер (у пользователя)Да (DevTools)
🎨 CSSБраузер (у пользователя)Да (DevTools)
⚡ JavaScriptБраузер; также Node.js на сервереJS — да; Node — на сервере
🐍 PythonКомпьютер ученика или сервер (не в браузере страницы)Нет (только HTML/JSON)
🐘 PHPВеб-сервер (пользователь видит только результат)Нет (только HTML/JSON)
Слои страницы (HTML → CSS → JS)
<h1>Привет, Аня!</h1>
<p>…</p>
<button id="btn">Счёт: 0</button>
body { font-family: system-ui; }
#title { color: #264de4; }
#btn { background: #264de4; color: #fff; }
btn.addEventListener('click', () => {
  n++;
  btn.textContent = 'Счёт: ' + n;
});

JavaScript считает клики — поведение появилось поверх структуры и стилей.

Где выполняется код
Браузер
  • HTML, CSS
  • JavaScript
<h1>Привет</h1>
<style>h1{color:blue}</style>
Сервер
  • PHP (страницы)
  • Python (API, скрипты)

Шаг 1/2: Открыли index.html в браузере — Файл лежит на диске или пришёл с сервера как готовый HTML. PHP и Python не участвуют.

в браузере на сервере
Сравнение синтаксиса
JavaScript
console.log("Привет!");
Python
print("Привет!")
PHP
<?php echo "Привет!"; ?>

Привет, мир: Первая программа — вывод текста.