Блог

Привет, мир!

Добро пожаловать в WordPress. Это ваша первая запись. Отредактируйте или удалите ее, затем начинайте создавать!

17.01.2026

JavaScript — синтаксис и типы данных

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

Как запустить код в консоли браузера?

Код JavaScript можно запускать в консоли браузера. Для этого нужно:

Нажать правой кнопкой мыши на любой странице, можно даже на этой и выбрать исследовать элемент. Также может быть скрыто в подменю Инструменты разработчика -> Инспектировать. Или сразу Инспектировать

В общем, вам нужно получить такое меню и открыть в нем вкладку Консоль (Console)

После этого можно писать код JS прямо в консоль

Нажатие enter отправляет команду в консоль для выполнения. Для того чтобы перенести курсор на новую строчку, нужно нажать shift + enter. undefined после отправки в консоль — норма, не обращайте внимания). Чтобы вывести значение переменной, просто напишите ее имя. Браузер подскажет ее название и значение. Чтобы поменять значение переменной, просто присвойте ей другое значение:

Как выполнять JavaScript код в файле html?

Удобнее выполнять код в html файле. Создайте такой html документ в любом текстовом редакторе:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    console.log(5 + "5")          // "55"          (число → строка)
    console.log("5" * 3)          // 15            (строка → число)
    console.log("5" == 5)         // true
    console.log("0" == false)     // true
    console.log([] == 0)          // true          ← вот тут уже начинается жесть
    console.log("" == 0)          // true
    console.log(" " == 0)         // true          ← пробел тоже превратился в 0
    console.log([] == ![])        // true          ← мозг плавится
</script>
<body>
    
</body>
</html>

И когда отроете его в браузере, он будет выполняться при каждой загрузке страницы. Сбоку указана строка, в которой инициирован вывод в консоль.

Переменные — куда класть данные

let name= "Гоша";          // можно менять значение
let age= 27;
let isStudent = true;
let nullVar= null;        // специально пусто
let undefinedVar;            // undefined — когда переменная объявлена, но ничего не положили

const Pi = 3.14159;        // нельзя перезаписать
const buttonColor = "#ff6b6b";

// Старый (но всё ещё живой) способ — почти не используй в 2025–2026
var oldStyle = "привет из 2005";

Главное правило:

const — если значение не будет меняться
let — если будет меняться
var — только если очень хочется поностальгировать (или поддерживаешь IE11)

Типы данных (то, что JS прячет от тебя)

Что писать	Как JS это называет	Примеры
Число	number	42, -3.14, 1e6 (миллион)
Текст	string	«привет», ‘как дела’
Логическое	boolean	true / false
Ничего	null	специально пусто
Не определено	undefined	забыли положить значение
Большое число	bigint	1234567890123456789012345
Список	Array (объект)	[1, «два», true]
Объект	Object	{ name: «Вася», age: 28 }
Функция	function	function() {} или () => {}

Почему JavaScript «прячет» типы данных?

JavaScript — это язык с динамической и слабой типизацией. Именно эта комбинация и создаёт ощущение, что «типы где-то спрятаны».

Что значит «динамическая типизация»

Вы не обязаны заранее говорить, какого типа будет переменная:

let x;           // пока вообще никакого типа
x = 5;           // теперь number
x = "привет";    // теперь string
x = [1,2,3];     // теперь массив (объект)
x = null;        // теперь null

Всё это нормально. Переменная не привязана к типу жёстко — тип «живёт» в значении, а не в переменной.

Что значит «слабая типизация»

JavaScript очень старается помочь и почти всегда пытается привести типы сам, когда вы производите операции:

console.log(5 + "5")          // "55"          (число → строка)
console.log("5" * 3)          // 15            (строка → число)
console.log("5" == 5)         // true
console.log("0" == false)     // true
console.log([] == 0)          // true          ← вот тут уже начинается жесть
console.log("" == 0)          // true
console.log(" " == 0)         // true          ← пробел тоже превратился в 0
console.log([] == ![])        // true          ← мозг плавится

Это всё происходит потому, что JS следует правилу:

«Если можно как-то осмысленно привести типы — я это сделаю, даже если это выглядит дико»

Таблица самых популярных сюрпризов

Выражение	Результат	Почему так?
«5» == 5	true	строка приводится к числу
«5» === 5	false	строгое — типы разные
0 == false	true	false → 0
«» == false	true	пустая строка → 0 → false
[] == 0	true	массив → «» → 0
[1] == 1	true	массив с одним элементом → строка → число
null == undefined	true	специальное исключение в языке
null === undefined	false	разные типы

Почему это сделали именно так?

Исторические причины (1995 год, 10 дней на создание языка):

Браузеры должны были быть максимально дружелюбными к «непрограммистам»
Люди писали маленькие скрипты прямо в HTML
Никто не хотел, чтобы сайт падал из-за ошибки типа
Было важно, чтобы 5 + » товаров» работало без лишних танцев

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

Как жить с этим?

// 1. Всегда используйте строгое сравнение
if (возраст === 18) { ... }     // вместо ==

// 2. Проверяйте тип явно, когда сомневаешься
if (typeof значение === "string") { ... }

// 3. Используйте Number(), String(), Boolean() когда нужно привести явно
let число = Number(input.value);           // надёжнее чем просто +input.value

// 4. Для значений по умолчанию лучше ?? (nullish coalescing)
let имя = пользователь.имя ?? "Гость";     // только null и undefined

// 5. Самый простой способ проверить «пусто»
if (!значение) { ... }   // работает для "", 0, null, undefined, false

JavaScript не прячет типы специально, чтобы тебя помучить. Он просто очень сильно хочет, чтобы ваш код всё равно запустился.

Поэтому современные разработчики просто учатся жить с этим характером и используют ===, ??, typeof и TypeScript (когда проект становится большим).

Самые частые операции JS

// Математика
let a = 10;
let b = 3;
console.log(a + b);   // 13
console.log(a - b);   // 7
console.log(a * b);   // 30
console.log(a / b);   // 3.333...
console.log(a % b);   // 1 (остаток от деления)

// Сложение строк (конкатенация)
let name = "Маша";
console.log("Привет, " + name+ "!");           // старый способ
console.log(`Привет, ${name}! Сегодня 2026 год.`);   // современный и красивый

// Сравнение (очень важно!)
console.log(5 == "5");     // true   (с приведением типов — опасно!)
console.log(5 === "5");    // false  (строгое сравнение — используй почти всегда)
console.log(0 == false);   // true   (вот за это JS многие ненавидят)
console.log(0 === false);  // false

// Логические операторы
let age = 19;
let student = true;
let canDrink = age >= 18 && !student;   // И
let canEnter = age >= 16 || student;   // ИЛИ
let dislike = !canEnter;                // НЕ

Условия JS — если… то… иначе…

if (age >= 18) {
    console.log("Взрослый");
} else if (age >= 14) {
    console.log("Подросток");
} else {
    console.log("Малыш");
}

// Короткая запись (тернарный оператор)
let status = age >= 18 ? "взрослый" : "ребёнок";
console.log(status);

// Ещё короче (логическое ИЛИ для значений по умолчанию)
let userName = inputName || "Гость";   // если пусто → Гость

не обязательно писать else if и else. if может существовать как самостоятельно, так и с одним из условий (else if, else).

Обратите внимание! Если вы напишите конструкцию вида

if (age >= 18) {
console.log(«Взрослый»);
} else if (age >= 14) {
console.log(«Подросток»);
}

то часть условий не будет обработана. В данном случае — все возраста меньше 13.

Функции — самые полезные кирпичики

И напоследок очень большой блок про функции. Сначала я думал выделить его в отдельную статью, но решил оставить тут. Пусть все о синтаксисе будет в одном месте. К тому же, лучше познакомится с такими понятиями как callback и область видимости как можно раньше.

Самый простой способ объявить функцию (function declaration)

Вы пишете ключевое слово function, даёшь имя функции (чтобы потом её вызвать) и ставите скобки с фигурными скобками.

function greet() {
    console.log("Hello, world!");
}

Что здесь происходит?
- function — ключевое слово, которое говорит JS: «Эй, сейчас будет функция!»
- greet — имя функции. Должно быть как переменная: без пробелов, начинается с буквы (маленькой или большой), можно цифры и подчёркивания. Не используйте слова вроде function или if — они зарезервированы.
- () — круглые скобки для параметров (о них ниже). Если ничего не нужно — оставь пустыми.
- { } — фигурные скобки. Внутри пишете код, который выполнится, когда вызовешь функцию.

Чтобы запустить:

greet();   // Выводит "Hello, world!"

Возможная непонятка: Если функция ничего не возвращает (как здесь), она по умолчанию вернёт undefined. Не пугайся, если увидишь это в консоли.

Параметры и аргументы — как передавать данные в функцию

Параметры — это переменные внутри функции, в которые вы передаете значения при вызове.

function addNumbers(a, b) {
    console.log(a + b);
}

a, b — параметры. Это как переменные, но они создаются только внутри функции.
Когда вызываешь: addNumbers(5, 3); — здесь 5 и 3 — аргументы (реальные значения).

Что если аргументов меньше или больше?

Меньше: недостающие станут undefined. Например, addNumbers(5); — b будет undefined, и 5 + undefined = NaN (Not a Number — ещё одна непонятка JS, значит «не число»).
Больше: лишние просто игнорируются.

Можно установить значения по умолчанию

function greet(name = "Guest") {
    console.log("Hello, " + name);
}
greet();       // Hello, Guest
greet("Alex"); // Hello, Alex

Возврат значения — return, чтобы функция что-то «отдала» назад

Без return функция просто делает что-то и молчит. С return — она отдаёт результат.

function multiply(x, y) {
    return x * y;
}

let result = multiply(4, 5);   // result = 20

return — ключевое слово. После него функция сразу заканчивается (даже если ниже код).
Можно без return — тогда вернёт undefined.

Непонятка: return не печатает ничего сам. Чтобы увидеть — используйте console.log(result);.

Другой способ: function expression (функция как переменная)

Здесь функция без имени, но присваивается переменной.

const subtract = function(a, b) {
    return a - b;
};

console.log(subtract(10, 2));   // 8

Зачем? Полезно, если хотите передать функцию как аргумент (callback — об этом позже).
Разница с declaration: expression не «поднимается» (hoisting).

Что такое hoisting? JS «поднимает» declaration в начало кода. Значит, вы можете вызвать функцию до её объявления:

greet();   // Работает!

function greet() { ... }

Но с expression — ошибка, если вызвать раньше.

Стрелочные функции (arrow functions) — короткий и модный синтаксис

С 2015 года — самый популярный способ. Особенно для коротких функций.

const divide = (a, b) => {
    return a / b;
};

console.log(divide(10, 2));   // 5

() => { } — стрелка вместо function.
Если один параметр — скобки можно убрать: x => { return x * 2; }
Если тело короткое — без фигурных скобок и return: x => x * 2;
Если параметров нет: () => console.log(«Hi!»);

Почему они крутые? Лаконичные, и… внимание на this!

this — самая большая непонятка в функциях (и как её понять)

this — это как «я» в предложении. Оно ссылается на «контекст» — объект, в котором функция вызвана. В простых функциях:

function whoAmI() {
    console.log(this);
}
whoAmI();   // this = window (в браузере) или global (в Node.js)

Но если функция внутри объекта:

const person = {
    name: "Alice",
    sayName: function() {
        console.log(this.name);
    }
};

person.sayName();   // Alice (this = person)

this — это person, потому что функция вызвана как метод объекта.

Проблема с обычными функциями: this может «теряться». Например, если передать функцию в callback:

setTimeout(person.sayName, 1000);   // undefined! (this = window)

Спасение — стрелочные функции: Они не имеют своего this, а берут из окружения.

const person = {
    name: "Alice",
    sayName: () => {
        console.log(this.name);   // this берётся снаружи, но если снаружи window — undefined
    }
};

В объектах стрелки не всегда подходят для методов! Лучше использовать обычные функции для методов, или bind:

setTimeout(person.sayName.bind(person), 1000);   // Alice

Коротко о this для новичков:

В методах объектов — this = объект.
В простых функциях — this = глобальный объект (лучше избегать).
В стрелках — this от родителя. Если запутался — используй переменные вместо this на старте.

Область видимости (scope) — где живут переменные в функциях

Переменные внутри функции — локальные (видны только внутри).

function test() {
    let localVar = "I'm inside!";
    console.log(localVar);   // Работает
}
console.log(localVar);   // Ошибка! Не видно снаружи

Глобальные переменные (объявленные вне функций) видны везде.
let и const — блочные (видны только в { }). var — функциональные (видны во всей функции). Избегайте var.

Краткая таблица: какой синтаксис когда использовать

Тип функции	Синтаксис пример	Когда использовать?
Declaration	function name() { }	Для основных функций, которые вызываешь много раз.
Expression	const name = function() { };	Когда присваиваешь переменной или передаёшь как аргумент.
Arrow	const name = () => { };	Для коротких функций, callbacks, где важен this.

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

Пишите комментарии если есть вопросы!

10.01.2026

HTML — id и class

Привет! Ты уже знаешь, что у тегов бывают атрибуты id и class. На первый взгляд кажется, что это почти одно и то же — «какая-то метка для элемента». На самом деле между ними огромная разница, и если её не понять сейчас — потом будешь тратить кучу времени на исправление странного поведения стилей и скриптов.

Главные отличия в одной таблице (запомни навсегда)

Характеристика	id	class
Уникальность	Должен быть уникальным на всей странице	Может повторяться сколько угодно раз
Сколько элементов может иметь	Только один элемент на страницу	Сколько угодно элементов
Синтаксис в CSS	#main-header	.card, .btn-primary, .text-center
Синтаксис в JavaScript	document.getElementById() — самый быстрый способ	document.querySelectorAll(‘.card’) или .getElementsByClassName()
Семантика / смысл	«Это конкретно этот элемент»	«Этот элемент относится к такой-то группе»
Количество на одном элементе	Только один id	Можно несколько классов через пробел
Валидность HTML	Нарушение уникальности → ошибка валидации	Повторение классов — абсолютно нормально

Когда использовать id (реальные ситуации 2025–2026 года)

Якорные ссылки внутри страницыHTML<h2 id="contacts">Контакты</h2> ... <a href="#contacts">Перейти к контактам</a>
Главные блоки-ориентиры страницы (landmark roles)HTML<header id="site-header">...</header> <main id="main-content">...</main> <footer id="site-footer">...</footer>
Формы и их поля, когда нужен точный доступ через JSHTML<input id="search-input" type="text"> <button onclick="document.getElementById('search-input').focus()">Фокус на поиск</button>
Подключение к конкретным элементам в сложных виджетах (модальные окна, аккордеоны и т.д.)

Правило большого пальца: если ты можешь сказать «это единственный такой блок на всей странице» — скорее всего это id.

Когда использовать class (99% случаев в реальной разработке)

Стилизация одинаковых элементов
Поведение одинаковых элементов
Компонентный подход (карточки, кнопки, меню, теги и т.д.)

Типичные классы, которые ты будешь видеть каждый день:

HTML

<div class="card product-item">
    <img class="card-img" src="phone.jpg" alt="Смартфон">
    <h3 class="card-title">iPhone 16 Pro</h3>
    <p class="card-price">119 990 ₽</p>
    <button class="btn btn-primary">В корзину</button>
</div>

Обрати внимание: один элемент может (и очень часто должен) иметь несколько классов.

Самые частые ошибки новичков (и как их не допускать)

Несколько элементов с одинаковым id → Браузер берёт первый, остальным — игнор → JavaScript может вести себя непредсказуемо → Падает валидация HTML
Использование id только для стилизации Плохо:CSS#button { background: blue; }Хорошо:CSS.btn-primary { background: blue; }
Писать id и class в стиле kebab-case вместо camelCase или snake_case Правильно в 2026 году: user-profile-card, btn-large, is-active (kebab-case — стандарт де-факто)

Быстрый чек-лист «id или class?»

Этот элемент уникален на всей странице и я хочу к нему быстро обратиться? → id
Я хочу одинаково стилизовать/поведенчески обработать много элементов? → class
Мне нужно несколько разных стилей на одном элементе? → class (несколько штук)
Я делаю якорную ссылку или автопрокрутку к блоку? → id

08.01.2026

Основы CSS: Как стилизовать веб-страницы

Привет! Если HTML — это скелет и органы нашего сайта, то CSS — это кожа, одежда, макияж и вообще всё, что делает нас красивыми (или хотя бы приличными) в глазах посетителей.

Сегодня мы разберём самые базовые вещи, которые реально используют в 99% сайтов.

Как CSS подключается к HTML (3 основных способа)

Внешний файл (самый правильный и популярный)

HTML

<head>
  <link rel="stylesheet" href="style.css">
</head>

Внутренние стили внутри <head> (удобно для экспериментов)

HTML

<head>
  <style>
    h1 { color: navy; }
  </style>
</head>

Прямо в теге (стиль-инлайн, почти всегда плохая практика)

HTML

<h1 style="color: red; font-size: 60px;">Плохо так делать</h1>

Плохой практикой это считается потому, что в таком случае стиль применяется только к одному элементу, что ведет к повторению кода.

В 95% случаев в реальной жизни вы будете использовать первый вариант — отдельный файл style.css.

Что внутри CSS?

В примерах выше вы уже заметили определенную структуру css:

тег/класс/id {
    свойство: значение;
}

О тегах, классах и id можно прочитать в статье

в скобках может быть указано несколько свойств, которые применятся к элементу (или элементам).

Самые важные простые свойства, которые нужно знать сразу

/* Текст */
color: #333;              /* цвет текста */
font-size: 18px;          /* размер шрифта */
font-weight: bold;        /* жирность: normal | bold | 700 */
font-family: Arial, sans-serif;  /* шрифт (всегда указывайте запасной) */
text-align: center;       /* выравнивание текста */
line-height: 1.5;         /* межстрочный интервал (очень важен для читаемости!) */

/* Фон */
background-color: #f8f9fa;
background: #000 url('bg.jpg') no-repeat center/cover;

/* Отступы и размеры */
margin: 20px;             /* внешние отступы */
padding: 15px;            /* внутренние отступы */
width: 300px;
max-width: 100%;          /* не даёт растягиваться шире родителя */
height: 200px;

/* Блоки и расположение */
display: block;           /* занимает всю ширину */
display: inline;          /* как слово в тексте */
display: inline-block;    /* гибрид — и ширина, и можно стоять рядом */

Цвета в CSS — быстрая шпаргалка

color: red;                  /* название цвета */
color: #ff0000;              /* hex */
color: #f00;                 /* короткий hex */
color: rgb(255, 0, 0);       
color: rgba(255, 0, 0, 0.3); /* с прозрачностью */
color: hsl(0, 100%, 50%);    /* hue-saturation-lightness */

Единицы измерения в CSS — самые важные на старте

Единица	Что это	Когда использовать	Пример
px	пиксели (фиксированный размер)	границы, тени, очень точные размеры	border: 2px solid red;
rem	относительно размера шрифта <html>	основной размер текста, отступы, ширина	font-size: 1.125rem;
em	относительно размера шрифта родителя	внутренние отступы внутри компонента	padding: 1.5em;
%	процент от родителя	ширина блоков, иногда высота	width: 80%;
vw / vh	% от ширины/высоты окна браузера	большие заголовки, фоновые секции	font-size: 8vw;

Самый практичный выбор в 2026 году для новичка:

html {
  font-size: 16px;          /* базовый размер (можно не писать — он и так по умолчанию) */
}

body {
  font-size: 1rem;          /* = 16px */
}

h1 { font-size: 2.5rem; }   /* = 40px */
h2 { font-size: 1.875rem; } /* = 30px */
p  { font-size: 1rem; }

section {
  padding: 2rem;            /* всегда будет пропорционально шрифту */
  margin-bottom: 2rem;
}

Краткое правило для запоминания на первые месяцы:

Всё, что касается текста и отступов → используй rem
Тонкие рамки, тени, мелкие детали → можно px
Ширина карточек/контейнеров → чаще % или max-width в rem/px

Остальные единицы (em, vw, vh, vmin, clamp()) пока просто знай, что они существуют — познакомимся с ними позже.

Давайте уже сделаем нормальную страничку

Создайте два файла рядом:

my-first-site/
├── index.html
└── style.css

index.html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Мой первый красивый сайт</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header>
    <h1>Привет, это мой сайт!</h1>
    <p class="slogan">Учусь веб-разработке с нуля в 2026 году</p>
  </header>

  <main>
    <section class="about">
      <h2>Обо мне</h2>
      <p>Пока что я умею только HTML и немного CSS.  
         Но каждый день учусь новому!/p>
    </section>

    <section class="goals">
      <h2>Что хочу научиться в ближайшие месяцы</h2>
      <ul>
        <li>Flexbox и Grid на уровне бога</li>
        <li>Адаптивная вёрстка под телефоны</li>
        <li>Анимации при наведении</li>
        <li>Работа с формами</li>
        <li>Подключать JavaScript</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>© 2026 — Все права принадлежат будущему крутому разработчику</p>
  </footer>

</body>
</html>

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background-color: #f5f5f7;
  color: #1d1d1f;
  line-height: 1.6;
}

/* Шапка */
header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  padding: 4rem 1rem;
}

h1 {
  font-size: 3.2rem;
  margin-bottom: 0.5rem;
}

.slogan {
  font-size: 1.3rem;
  opacity: 0.9;
}

/* Основной контент */
main {
  max-width: 800px;
  margin: 3rem auto;
  padding: 0 1.5rem;
}

section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

h2 {
  color: #4f46e5;
  margin-bottom: 1rem;
}

ul {
  list-style: none;
  padding-left: 0;
}

li {
  padding: 0.6rem 0;
  position: relative;
  padding-left: 1.8rem;
}

/* Подвал */
footer {
  text-align: center;
  padding: 2rem;
  color: #6b7280;
  font-size: 0.95rem;
  border-top: 1px solid #e5e7eb;
}

Когда вы обращаетесь к тегу, стили применяются ко всем элементам тега на странице. Если к классу — то ко всем элементам класса на странице. Если к id — к элементу с этим id.

Обратите внимание! Если вы редактируете стили элемента, а они не меняются — скорее всего, две причины: 1 — этот элемент не поддерживает применяемое свойство; 2 — стили переопределяются ниже по файлу.

Сохраните оба файла, откройте index.html в браузере — и вуаля! У вас уже есть довольно симпатичная, современная и читаемая страничка, на которой очень удобно будет дальше тренировать:

flex и grid
адаптивность (media queries)
hover-эффекты
формы
анимации
работу с картинками

Следующие несколько уроков будем именно на этой странице всё усложнять и улучшать. Так что не удаляйте её — она теперь ваш тренажёр на ближайшие 2–3 месяца

Удачи и до встречи в следующем уроке!

08.01.2026

Что такое HTML? Урок 1.

Привет! Если ты здесь, значит, решил нырнуть в веб-разработку с нуля. Круто! И мы начинаем с основы основ — с HTML. Без него вообще ничего не будет: ни красивых кнопок, ни текста, ни картинок. Даже этот блог, который ты сейчас читаешь, построен на HTML.

Так что же такое HTML?

HTML — это HyperText Markup Language, по-русски «язык разметки гипертекста». По сути, это просто способ сказать браузеру: «Вот тут заголовок, вот тут абзац текста, вот тут картинка, а вот тут ссылка, по которой можно кликнуть».

HTML — не язык программирования. Он не умеет считать, принимать решения или бегать по циклу. Он просто размечает (markup) содержимое страницы: говорит, где что находится и какой смысл это несёт.

Представь, что ты строишь дом из Lego. HTML — это те базовые кирпичики, из которых собирается каркас: стены, двери, окна. Без каркаса ничего не поставишь. Потом на этот каркас CSS навешивает краску, обои и красивые шторы, а JavaScript заставляет двери открываться сами и свет включаться по хлопку.

Как выглядит HTML-код?

Открой любой сайт, нажми правой кнопкой мыши → «Просмотреть код страницы» (или Ctrl+U). Ты увидишь кучу странных штук в угловых скобках. Это и есть теги HTML.

Пример самого простого HTML-документа:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя первая страница</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый сайт. Я только начинаю, но уже круто!</p>
</body>
</html>

Давай разберём по кусочкам, что тут происходит:

<!DOCTYPE html> — говорит браузеру: «Эй, это современный HTML5, работай правильно».
<html lang="ru"> — корневой элемент, внутри него всё остальное. Атрибут lang="ru" подсказывает, что основной контент страницы на русском.
<head> — «голова» страницы. Тут информация, которую пользователь не видит напрямую: заголовок вкладки, кодировка, подключение стилей и скриптов.
<title> — то, что показывается во вкладке браузера.
<body> — «тело» страницы. Здесь всё, что видит посетитель.
<h1> — заголовок первого уровня (самый большой).
<p> — параграф (абзац текста).

Важно: почти все теги парные. Есть открывающий <p> и закрывающий </p>. Содержимое находится между ними. Есть и одиночные теги, например <img> или <br>, но о них позже.

Атрибуты

Атрибуты — это дополнительные характеристики тега. Они пишутся внутри открывающего тега, сразу после имени тега, через пробел. Формула простая:

<тег атрибут=»значение» другой-атрибут=»другое-значение»>

Самые популярные атрибуты

Атрибут	Для каких тегов	Что делает	Пример использования
id	почти все	Уникальный идентификатор элемента (один на всю страницу!)	<div id=»main-header»>
class	почти все	Класс(ы) для стилизации и JS (можно несколько через пробел)	<p class=»text big important»>
href	<a>	Куда ведёт ссылка	<a href=»https://google.com»>Перейти в гугл</a>
src	<img>, <iframe>, <script>	Источник (откуда брать файл)	<img src=»cat.jpg»>
alt	<img>	Альтернативный текст (очень важен для доступности и SEO!)	<img src=»cat.jpg» alt=»Мой рыжий кот спит»>
title	почти все	Всплывающая подсказка при наведении курсора	<button title=»Сохранить изменения»>Сохранить</button>
lang	<html>, иногда другие	Язык содержимого (помогает экранным читалкам и поисковикам)	<html lang=»ru»>
charset	<meta>	Кодировка символов (почти всегда UTF-8)	<meta charset=»UTF-8″>
name	<input>, <meta>, <form>	Имя поля/метки (важно для форм и мета-тегов)	<input name=»username»>
type	<input>, <button>	Тип элемента (text, password, checkbox, submit и т.д.)	<input type=»password»>

О классах и id можно прочитать в статье

Основные теги, с которыми стоит познакомиться прямо сейчас

Вот минимальный набор, чтобы уже сегодня сделать свою страничку:

Заголовки: <h1> … <h6> (от самого большого к маленькому)
Абзацы: <p>
Ссылки: <a href="https://example.com">Текст ссылки</a>
Картинки: <img src="путь/к/картинке.jpg" alt="Описание для слабовидящих">
Списки:
Нумерованный: <ol><li>Пункт 1</li><li>Пункт 2</li></ol>
Маркированный: <ul><li>Пункт 1</li><li>Пункт 2</li></ul>
Кнопки: <button>Нажми меня</button>
Формы потом, но уже можно заглянуть: <form>, <input>, <label>

Где писать и как смотреть результат?

Установи Visual Studio Code (бесплатно, удобно, подсветка синтаксиса).
Создай файл с расширением .html, например index.html.
Напиши код из примера выше. Прошу, именно напиши — не стоит копировать и вставлять пока учишься.
Сохрани и просто открой файл в браузере (двойной клик или перетащи в окно).

Всё! Ты только что создал свой первый сайт. Даже если он пока выглядит как страница из 1999 года — это уже сайт.

Что дальше?

В следующих уроках мы:

Поглубже разберём структуру документа
Научимся вкладывать блоки друг в друга (это важно!)
Познакомимся с семантическими тегами HTML5 (<header>, <footer>, <article>, <section> и т.д.) — они делают код понятнее и помогают поисковикам
Добавим немного CSS, чтобы не было так скучно

Домашнее задание

Сделай простую страницу «О себе»:

Заголовок с твоим именем
Фото (можно любое из интернета)
Несколько абзацев о себе
Список любимых фильмов/игр/хобби
Ссылку на любимый сайт или свой GitHub (если уже есть)

Сохрани, открой в браузере, похвали себя. Ты молодец!

Если что-то не получается — пиши в комментариях, разберёмся вместе. Веб-разработка — это практика, практика и ещё раз практика.

08.01.2026

Что такое веб-разработка?
Веб разработка это процесс в ходе которого сонные гиковатые дяди и тети из ноликов и единичек собирают сайт… кхм кхм! Это скучно! Да и вообще, нет смысла давать определение тому, что говорит само за себя. Давайте лучше нырнем вовнутрь, и посмотрим из чего этот процесс состоит.

Frontend — то, что мы видим.

То, с чем мы взаимодействуем, видим на сайте — называется frontend. Скорее всего вы уже слышали основные технологии — html, css, javascript. Это основа основ, чтобы узнать подробнее — переходите по ссылкам. Если коротко:
- html — отвечает за разметку страницы, логическую расстановку блоков — абзацы, заголовки, кнопки, ссылки, списки, формы, картинки, видео. Не является языком программирования.
- css — таблицы стилей. Отвечает за стилизацию блоков. С помощью css можно расположить блоки рядом друг с другом, задать поведение при наведении курсора, Менять цвет, прозрачность, поведение интерфейса на разных размерах экрана. Имеет признаки языка программирования, но сложно сложно назвать его таковым.
- javascript — не путайте с java! Это язык программирования который позволяет сделать сайт по настоящему интерактивным. Он отвечает за подсчеты, динамическую подгрузку страницы, обработку форм, выводит ошибки пользователю, обрабатывает ответ от сервера.
Этого вполне хватит чтобы сделать простой информационный сайт из нескольких таблиц. Но ни о каких регистрациях, комментариях, удобстве редактирования и добавления контента речи идти не может. И тут на помощь приходит он.

Backend — то, что мы чувствуем.

Сайт вполне может работать и без бэкенда. Но на практике, такое уже почти не встречается — даже обработка формы это бэкенд. По сути задача бэкенда — получить данные от пользователя, обработать и отдать результат. Вы можете понаблюдать за этим процессом если в Инструментах разработчика (dev tools) выберете Сеть (network). Отфильтровать запросы к серверу можно через фильтр Fetch/XHR.

Серверная часть веб приложения может быть написана на любом языке программирования — самые популярные это PHP, GO, Python, Node.JS, Java. В этом блоге я в первую очередь буду рассказывать о PHP, но также затрону остальные языки. Независимо от языка, задача бэкенда — реализация бизнес-логики, правил и требований. Правила взаимодействий сущностей, процесс их сохранения, редактирования, удаления, разграничение доступа, email рассылки и оплата по карте, запросы к другим сервисам — все это реализуется на backend.

Ещё тут находятся базы данных. В них хранятся статьи, информация о вашем аккаунте, статистика по вам и вообще все что нужно для работы приложения. Именно поэтому за базами охотятся хакеры. Скорее всего вы уже слышали такие понятия как MySQL и PostgreSQL — реляционные базы данных. Реляционные — значит что данных хранятся в таблицах, как в EXCEL.

Так что же такое веб разработка?

Веб разработка — это ничто иное, как комбинирование вышеуказанных инструментов с целью получить готовый продукт — веб сайт. В этом процессе задействовано множество людей:
- маркетологи и менеджеры по продажам, которые находят клиентов
- аналитики которые общаются с заказчиком и переводят с его языка на язык команды
- дизайнеры, которые рисуют макет
- Frontend-разработчики, которые оживляют макет
- Backend-разработчики, которые реализуют бизнес логику
- Тестировщики, которые проверяют работу приложения на соответствие требованиям
- Системные администраторы, которые подготавливают инфраструктуру для проекта
- Проектный менеджер, который управляет ходом проекта
Войти в айти в 2026 году?

А почему нет? Путь в айти нисколько не поменялся с самого начала. Но если смотреть веб, то путь примерно такой, его же проходил и я:

Установите инструменты:
- Текстовый редактор: Visual Studio Code (бесплатный и мощный).
- Браузер: Chrome или Firefox для тестирования.
Изучите HTML и CSS:
- Создайте простую страницу: заголовок, текст, изображение, список.
- Освойте Flexbox и Grid для layouts, responsive design (адаптивность).
Перейдите к JavaScript:
- Переменные, функции, циклы, события.
- Работа с DOM (манипуляция элементами страницы).
Практика:
- Сделайте проекты: личный сайт, to-do list, калькулятор.
- Используйте Git для контроля версий (GitHub для хранения кода).
Дальше:
- Frontend: Bootstrap, Tailwind CSS.
- Backend: PHP, Python
- Полезные навыки: Git, Docker, основы тестирования ПО.
Когда вы попробуете и поймете как работают указанные технологии — останется определиться, что именно вам больше всего нравится и углубляться в эту область.

Добавляйте мой блог в закладки, дальше больше интересного контента!
04.01.2026

Блог

Привет, мир!

JavaScript — синтаксис и типы данных

Как запустить код в консоли браузера?

Как выполнять JavaScript код в файле html?

Переменные — куда класть данные

Типы данных (то, что JS прячет от тебя)

Что значит «динамическая типизация»

Что значит «слабая типизация»

Таблица самых популярных сюрпризов

Почему это сделали именно так?

Как жить с этим?

Самые частые операции JS

Условия JS — если… то… иначе…

Функции — самые полезные кирпичики

Самый простой способ объявить функцию (function declaration)

Параметры и аргументы — как передавать данные в функцию

Возврат значения — return, чтобы функция что-то «отдала» назад

Другой способ: function expression (функция как переменная)

Стрелочные функции (arrow functions) — короткий и модный синтаксис

this — самая большая непонятка в функциях (и как её понять)

Область видимости (scope) — где живут переменные в функциях

Краткая таблица: какой синтаксис когда использовать

HTML — id и class

Главные отличия в одной таблице (запомни навсегда)

Когда использовать id (реальные ситуации 2025–2026 года)

Когда использовать class (99% случаев в реальной разработке)

Самые частые ошибки новичков (и как их не допускать)

Быстрый чек-лист «id или class?»

Основы CSS: Как стилизовать веб-страницы

Как CSS подключается к HTML (3 основных способа)

Что внутри CSS?

Самые важные простые свойства, которые нужно знать сразу

Цвета в CSS — быстрая шпаргалка

Единицы измерения в CSS — самые важные на старте

Давайте уже сделаем нормальную страничку

Что такое HTML? Урок 1.

Как выглядит HTML-код?

Атрибуты

Самые популярные атрибуты

Основные теги, с которыми стоит познакомиться прямо сейчас

Где писать и как смотреть результат?

Что дальше?

Домашнее задание

Что такое веб-разработка?

Frontend — то, что мы видим.

Backend — то, что мы чувствуем.

Так что же такое веб разработка?

Войти в айти в 2026 году?