Модуль 1 · Введение

Урок 1.2 — Что такое веб-разработка

В этом уроке мы узнаем, что такое веб-разработка, как работает интернет, чем занимаются frontend- и backend-разработчики и что такое теги и атрибуты в HTML.

🌐

Как работает интернет

Как вообще работает интернет? Вы открываете браузер, вводите адрес сайта — и через секунду видите страницу. Что произошло между этими двумя моментами?

Представьте ресторан. Вы (посетитель) делаете заказ официанту, тот относит его на кухню, повар готовит, официант приносит. В интернете — почти то же самое, только вместо людей работают компьютеры.

🖥️

Клиент — это ваш компьютер или телефон. Точнее, браузер на нём (Chrome, Safari, Firefox). Клиент — это тот, кто запрашивает информацию. Как посетитель в ресторане.

🗄️

Сервер — это мощный компьютер, который хранит сайт. Он всегда включён и подключён к интернету. Когда сервер получает запрос от клиента, он отправляет обратно файлы сайта: HTML, CSS, картинки. Как повар на кухне.

🌍

Интернет — это сеть проводов и роутеров. Информация путешествует по ним в виде электрических сигналов. Всё происходит очень быстро — за доли секунды.

Когда вы вводите google.com в адресную строку, происходит вот что:

1. Ваш браузер спрашивает у DNS-сервера (это как телефонная книга интернета): «Где находится google.com?»

2. DNS отвечает: «IP-адрес google.com — 142.250.185.46». (У каждого сайта есть такой числовой адрес.)

3. Браузер отправляет запрос серверу Google: «Пришли мне свою главную страницу».

4. Сервер Google отправляет обратно HTML-код страницы, CSS-стили, картинки и другие файлы.

5. Ваш браузер собирает все эти файлы как конструктор и показывает готовую страницу.

💡 Аналогия с письмом

Клиент — это вы, когда пишете письмо. Сервер — ваш друг, который отвечает. DNS-сервер — это телефонная книга: вы смотрите адрес друга, чтобы отправить ему письмо. HTTP — это почтальон, который доставляет письма туда и обратно. Всё просто, правда?

⚡

Frontend и Backend — простая аналогия

Веб-разработка делится на две большие области: frontend и backend. Если описать их одной фразой:

🎨 Frontend — это всё, что видит пользователь

Frontend (читается «фронтенд») — это внешняя часть сайта. То, что вы видите в браузере: кнопки, картинки, меню. Frontend-разработчик отвечает за расположение элементов, цвета, шрифты. Другими словами — за то, как сайт выглядит.

⚙️ Backend — это то, что работает «под капотом»

Backend (читается «бэкенд») — это внутренняя часть сайта. Сервер, база данных, логика. Когда вы регистрируетесь, ваши данные проверяются и сохраняются — это backend. Пользователь его не видит, но без него не будет входа, поиска или отправки форм.

Есть ещё fullstack-разработчик — это человек, который умеет и frontend, и backend. Он может сделать сайт целиком от начала до конца. Но начинать лучше с frontend — это проще, нагляднее, и результат виден сразу.

Наш курс — это введение в frontend-разработку. Мы научимся создавать внешнюю часть сайтов. Но хороший frontend-разработчик обязательно понимает, как работает сервер, даже если не занимается им напрямую. Поэтому мы даём базовые знания обеих областей.

	Frontend	Backend
Что делает	Создаёт интерфейс, внешний вид	Работает с данными, логикой
Где работает	В браузере (на компьютере пользователя)	На сервере (в дата-центре)
Технологии	HTML, CSS, JavaScript	PHP, Python, Node.js, SQL
Пример	Кнопка, меню, форма входа	Вход в аккаунт, поиск по сайту
Видно пользователю?	Да	Нет

🏠

HTML, CSS, JavaScript — три кита веба

Любая веб-страница строится на трёх технологиях. Запомните эту аналогию с домом — она очень наглядна:

🏗️ HTML — это каркас дома (СТРУКТУРА)

HTML (HyperText Markup Language) определяет, из каких частей состоит страница. Вот заголовок, вот абзац текста, вот картинка, вот ссылка. HTML — это «скелет» сайта. Без него страницы не существует. HTML — это не язык программирования, а язык разметки. Вы просто «размечаете» текст: говорите браузеру, что является заголовком, а что — обычным абзацем.

🎨 CSS — это отделка дома (КРАСОТА)

CSS (Cascading Style Sheets) отвечает за внешний вид. Цвета, шрифты, размеры, отступы, расположение элементов, анимации. Без CSS страница выглядит как черновик: серый фон, чёрный текст, всё в одну колонку. CSS «наводит красоту». Можно сказать, что CSS — это одежда для HTML.

⚡ JavaScript — это электрика дома (ПОВЕДЕНИЕ)

JavaScript (JS) добавляет интерактивность. Меню, которое открывается по клику, слайдер с картинками, проверка формы перед отправкой, подгрузка нового контента без перезагрузки страницы — всё это делает JavaScript. Если HTML — это скелет, а CSS — кожа, то JS — это мышцы и нервы. Они заставляют сайт двигаться и реагировать на действия пользователя.

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

💡 Ещё одна аналогия: человеческое тело

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

🏷️

Что такое HTML-тег

Тег (от английского tag — «ярлык», «метка») — это команда для браузера. Каждый тег говорит браузеру, как отобразить содержимое. Давайте посмотрим на примере.

Возьмём тег <h1>. Буква h означает heading (заголовок), а цифра 1 — самый важный, первый уровень. Вот как он выглядит:

HTML · Пример тега h1

<h1>Это самый главный заголовок</h1>

Разберём по частям:

<h1> — это открывающий тег. Он говорит браузеру: «Внимание, сейчас начинается заголовок».

Это самый главный заголовок — это содержимое тега. То, что вы увидите на странице.

</h1> — это закрывающий тег. Он говорит браузеру: «Заголовок закончился». Обратите внимание на косую черту (слеш) перед названием — это признак закрывающего тега.

Большинство тегов в HTML — парные. У них есть открывающий и закрывающий тег, а между ними — содержимое. Тег — это контейнер, в который вы кладёте содержимое, как в коробку.

💡 Как отличить открывающий тег от закрывающего

Открывающий: <h1> — просто буква в скобках. Закрывающий: </h1> — буква со слешем. Слеш — это знак «закрыто». Просто запомните: если есть слеш — тег закрывается. Если нет — открывается.

А вот ещё пример — тег <p> (paragraph — абзац):

HTML · Пример тега p

<p>Это обычный абзац текста. Браузер покажет его как отдельный блок с отступами сверху и снизу.</p>

Посмотрите, как это выглядит вместе:

HTML · Заголовок и абзац вместе

<h1>Мой первый сайт</h1>
<p>Это мой первый абзац текста. Я только учусь создавать веб-страницы.</p>

Попробуйте сохранить этот код в файл index.html и открыть в браузере. Вы увидите заголовок жирным крупным шрифтом и абзац текста под ним. Поздравляю — вы только что написали настоящий HTML-код!

🏷️

Что такое атрибут тега

Атрибут (от английского attribute — «свойство») — это дополнительная информация для тега. У тегов могут быть атрибуты, которые указывают, как именно тег должен работать.

Атрибуты пишутся внутри открывающего тега, после названия тега. Пример:

HTML · Тег с атрибутом lang

<html lang="ru">

Здесь lang — это атрибут, а "ru" — его значение. Этот атрибут говорит браузеру: «Содержимое этой страницы на русском языке». Почему это важно? Для правильной проверки орфографии, для скринридеров (программ для незрячих), для поисковиков.

Давайте разберём структуру атрибута:

lang — это имя атрибута. Название свойства, которое мы хотим задать.

= — знак равенства. Он соединяет имя атрибута с его значением.

"ru" — это значение атрибута. Оно всегда в кавычках (обычно двойных). Значение — это то, что мы говорим этому атрибуту.

Атрибутов у одного тега может быть несколько. Вот пример:

HTML · Несколько атрибутов

<html lang="ru" dir="ltr">

Здесь два атрибута: lang="ru" (язык — русский) и dir="ltr" (направление текста — слева направо). Атрибуты разделяются пробелом.

Сейчас мы не будем подробно изучать атрибуты — к ним вернёмся в следующих уроках. Главное запомнить: атрибуты — это дополнительные настройки тега. Они пишутся внутри открывающего тега и выглядят как имя="значение".

💡 Кавычки в атрибутах

Значения атрибутов всегда берутся в кавычки. Можно использовать двойные (" ") или одинарные (' ') кавычки. Двойные — стандарт. Если внутри значения есть двойные кавычки, используйте одинарные. Но на начальном этапе просто используйте двойные кавычки для всего.

🔧

Инструменты разработчика (DevTools)

У каждого современного браузера есть встроенные инструменты разработчика — DevTools (сокращение от Developer Tools). Это волшебная панель, которая показывает, из чего состоит любая веб-страница. С её помощью можно:

🔍 Посмотреть HTML-код любой страницы

✏️ Изменить текст, заголовки, стили прямо в браузере (изменения временные — при обновлении страницы они исчезнут)

📱 Посмотреть, как страница выглядит на разных устройствах (телефон, планшет)

🐞 Находить ошибки в коде

Как открыть DevTools?

Windows: Нажмите F12 или Ctrl + Shift + I

Mac: Нажмите Cmd + Option + I

Давайте прямо сейчас откроем DevTools на любом сайте. Зайдите на любой сайт (например, yandex.ru), нажмите F12, и вы увидите панель с кодом. Это HTML-код страницы, которую вы сейчас смотрите. Вы можете наводить мышкой на строчки кода — в браузере будет подсвечиваться соответствующий элемент на странице.

Попробуйте прямо сейчас:

1. Откройте любой сайт в Chrome.

2. Нажмите F12. Справа или снизу появится панель.

3. Найдите вкладку «Elements» (или «Элементы»). Там вы увидите HTML-код страницы.

4. Наведите мышку на любой тег — на странице подсветится соответствующая часть.

5. Попробуйте дважды кликнуть на какой-нибудь текст в панели Elements и изменить его. Изменения сразу отобразятся на странице! (Не волнуйтесь — это только у вас на экране, сайт не изменится.)

💡 Эксперимент: «взломайте» любой сайт

Откройте DevTools на любом сайте, найдите заголовок (тег h1), кликните на него дважды и измените текст на что-нибудь смешное. Страница изменится прямо у вас на глазах. Это выглядит как «взлом», но на самом деле вы меняете только локальную копию страницы в своём браузере. Никто другой этого не увидит. Зато вы поймёте, как HTML-код связан с тем, что вы видите на экране.

DevTools станет вашим лучшим другом на протяжении всего курса. Мы будем часто его использовать, чтобы смотреть на структуру страниц, проверять ошибки и экспериментировать.

🌍

Что такое браузер и как он читает HTML

Браузер — это программа, которая умеет читать HTML-код и показывать его в виде красивой страницы. Самые популярные браузеры: Chrome (~65% пользователей), Safari (на устройствах Apple), Firefox, Edge.

Когда вы открываете HTML-файл в браузере, происходит вот что:

1. Браузер читает HTML-файл сверху вниз.

2. Он строит из тегов «дерево» — это называется DOM (Document Object Model).

3. Понимает, какие элементы где находятся, в каком порядке.

4. Применяет стили (CSS), если они есть.

5. Рисует страницу на экране.

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

⚠️ Разные браузеры могут показывать одно и то же по-разному

Chrome, Firefox, Safari и Edge используют разные «движки» для отображения страниц. Поэтому один и тот же код может выглядеть чуть-чуть по-разному в разных браузерах. Пока мы изучаем базу, эти различия будут минимальны. Но в будущем, когда вы станете профессиональным верстальщиком, нужно будет проверять сайт во всех популярных браузерах. Это называется «кросс-браузерная совместимость».

📄

Из чего состоит веб-страница

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

📄

HTML-файлы (расширение .html) — содержат структуру и содержимое страницы. Это основа. Обычно главная страница называется index.html.

🎨

CSS-файлы (расширение .css) — содержат стили: цвета, шрифты, размеры, расположение.

🖼️

Изображения (jpg, png, svg, gif) — картинки, иконки, логотипы, фотографии.

⚡

JavaScript-файлы (расширение .js) — код, отвечающий за поведение и интерактивность.

На этом курсе мы создаём только HTML-файлы (и немного CSS в конце). Этого достаточно, чтобы научиться основам. JavaScript мы не трогаем — это отдельная большая тема.

📌

Что важно запомнить из этого урока

1️⃣

Интернет работает по принципу «клиент-сервер». Клиент (браузер) запрашивает страницу, сервер отдаёт её.

2️⃣

Frontend — это то, что видит пользователь (внешность). Backend — это серверная часть (логика).

3️⃣

HTML = структура (каркас). CSS = красота (отделка). JavaScript = поведение (электрика).

4️⃣

Тег — это команда для браузера. Парный тег: <h1>текст</h1>. Открывающий + содержимое + закрывающий.

5️⃣

Атрибут — это настройка тега. Пишется внутри открывающего тега: <html lang="ru">.

6️⃣

DevTools (F12) — это инструмент разработчика. Открывайте его на любом сайте и смотрите, как он устроен внутри.

✏️

Практическое задание

Сделайте три вещи, чтобы закрепить материал:

📝 Задание 1. Создайте HTML-страницу

Создайте файл about.html. Напишите в нём заголовок <h1> с текстом «Обо мне» и два абзаца <p> с текстом о себе (кто вы, почему решили учиться веб-разработке). Сохраните, откройте в браузере. Готово!

🔍 Задание 2. Исследуйте сайт через DevTools

Откройте любой сайт (например, wikipedia.org). Нажмите F12, найдите вкладку «Elements». Найдите тег <h1> на странице. Дважды кликните на текст внутри него и измените на что-то своё. Посмотрите, как изменится страница. Потом обновите страницу (F5) — изменения исчезнут.

🧠 Задание 3. Объясните своими словами

Напишите в блокноте (или в телефоне) ответы на вопросы: «Что такое тег?», «Чем HTML отличается от CSS?», «Что такое frontend?». Используйте свои слова, как будто объясняете другу. Это лучший способ проверить, всё ли вы поняли.

🚀

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

В этом уроке мы узнали, как устроен интернет, чем занимаются frontend- и backend-разработчики, что такое HTML, CSS и JavaScript, а также познакомились с тегами, атрибутами и DevTools. В следующем уроке мы перейдём к практике и создадим нашу первую настоящую HTML-страницу.

Вы отлично поработали! Увидимся в уроке 2.1.

Урок 1.2: Что такое веб-разработка

9 вопросов