Що таке HTML, CSS, PHP і JS?

Загальна інформація

Насамперед давайте визначимося, як виглядає вебсайт зсередини, так би мовити. Не заглиблюючись у деталі, можна сказати, що сайт — це набір файлів, які розміщені на сервері (хостингу) в Інтернеті та взаємодіють між собою за певними сценаріями. Результатом цієї взаємодії є ті самі сторінки, які ви переглядаєте щодня.

Отже, всі ці файли, з яких складається сайт, мають бути чимось заповнені. Вірно — вони заповнені кодом. І кожна з цих загадкових абревіатур — це мова, якою написані сторінки та скрипти, що формують сайт.

Що таке HTML?

HTML (Hypertext Markup Language) — це мова гіпертекстової розмітки. Не дуже зрозуміло, так? Спрощено кажучи, HTML — це "скелет" будь-якої вебсторінки.

Прикладом може бути ось такий фрагмент вигаданої нами сторінки:

Чому "скелет"? Якщо придивитися, то інтерпретований код зовсім не оформлений. Не задано ані кольорів, ані розмірів, ані позиціювання.

Отже, можна зробити висновок, що HTML — це набір тегів, які складають основу будь-якої сторінки в Інтернеті. За їх допомогою ми задаємо заголовки, параграфи, посилання, зображення та інші елементи.

Що таке CSS?

CSS (Cascading Style Sheets — каскадні таблиці стилів) — це та сама "магія", яка робить HTML-розмітку привабливою для ока. Завдяки CSS ми можемо стилізувати будь-який елемент у розмітці так, як нам потрібно.

Думаю, найкраще показати приклад:

Легко помітити, що використання CSS — це невід’ємна та важлива частина процесу розробки сторінок, адже саме таблиці стилів дозволяють реалізувати візуальне оформлення, створене дизайнером.

CSS-код, як правило, зберігається у файлі, відокремленому від розмітки сторінки, і підключається до всіх документів, яким він потрібен. Ми не будемо говорити про синтаксис і правила використання, оскільки це виходить за рамки цієї статті, однак зауважимо: незважаючи на широкі можливості, вивчити CSS досить просто.

Що таке PHP?

PHP (рекурсивна абревіатура PHP: Hypertext Preprocessor) — це поширена мова програмування загального призначення з відкритим кодом. PHP створено спеціально для веброзробки, і його код можна вставляти безпосередньо в HTML.

Що це означає для нас? Давайте подивимося приклад використання PHP:

Основна особливість цієї мови в тому, що результатом її виконання можуть бути звичайні HTML-теги (HTML-код). Саме тому PHP активно використовується у вебпрограмуванні. Крім того, на відміну від HTML, PHP може взаємодіяти з сервером, переглядати бази даних, "витягати" потрібну інформацію та виводити її на сторінку.

PHP-код відділяється спеціальними відкриваючими та закриваючими тегами, які дозволяють "перемикатися" в режим PHP і назад усередині HTML-розмітки. PHP-скрипти також можуть зберігатися у окремих файлах, якщо їх логіка об’ємна й потребує багато коду.

Саме завдяки мовам програмування, подібним до PHP (та самому PHP), стало можливим створення CMS (Content Management System — Система управління контентом).

Що варто запам’ятати? PHP-скрипти — це своєрідний "конструктор-клей", який дозволяє програмувати виведення різної інформації на екран користувача. Для створення простої статичної сторінки достатньо HTML у парі з CSS. Але якщо сторінка (наприклад, новина) є частиною динамічного сайту, то, скоріш за все, її поява — результат виконання PHP-скрипта.

Що таке JS?

JavaScript — це прототипно-орієнтована сценарна мова програмування. Як завжди, визначення мало що пояснює для непрофесіонала, тому розберімося простими тезами.

Спершу розгляньмо приклад того, що можна зробити за допомогою JS:

Умовно кажучи, JS допомагає зробити HTML-розмітку більш інтерактивною. Тобто майже вся динаміка, яку ви бачите на сайті, зокрема на сторінці одного з наших курсів, створена за допомогою JavaScript.

Ця мова програмування вважається однією з найпростіших для вивчення, тому її так широко використовують front-end розробники, які не завжди є професійними програмістами.

Уся "магія" JS базується на подіях. Скрипти починаються з визначення події, яку має виконати користувач. Щойно подія відбулася — починається виконання коду.

У нашому прикладі було встановлено подію ("при натисканні") для кнопок. Відповідно, при натисканні на кнопку виконується код.

Таким чином, ми можемо задавати зміну будь-яких візуальних параметрів для будь-яких елементів після виконання будь-якої події (а їх існує безліч).

Можна зробити висновок, що JavaScript є незамінним інструментом для створення анімацій та інтерактивних ефектів на сайті. Але перед вивченням JS потрібно добре розібратися з HTML і CSS, адже більшість JS-коду звертається саме до їх синтаксису.

Зазначу, що початківці дуже часто плутають JS і PHP. Часто на форумах запитують: "чи можна замінити PHP на JS і навпаки?". Відповідь — ні, бо це зовсім різні мови. PHP — серверна, працює із сервером. JS — клієнтська, працює у браузері.

Підсумуємо

Ми з вами розібралися, що таке HTML, CSS, PHP і JS, а також розглянули яскраві приклади їх використання та результати, які вони дають.

Хороший front-end розробник має розумітися на кожній з цих мов, хоча PHP частіше використовується для back-end розробки.

Знання та постійне вдосконалення в кожній з цих мов дозволять вам стати затребуваним фахівцем, здатним вирішувати будь-які задачі.

Наш курс " Веб-Верстальник: Код Фрилансера " має на меті навчити кожного студента основам HTML, CSS, основам JS та базам PHP, а також дати необхідні знання й навички для подальшого розвитку.

У вас усе вийде!