Month: June 2024

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

Існує багато різних мов програмування, кожна з яких має свої особливості та призначення. Деякі мови призначені для розв’язання певних завдань або областей програмування, таких як веб-розробка, наукове моделювання, аналіз даних тощо. Деякі з найпопулярніших мов програмування включають Java, Python, C++, JavaScript, C#, Ruby та багато інших.

Класифікація

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

За рівнем абстракції	Низькорівневі мови програмування: Вони наближені до машинного коду та архітектури комп’ютера, такі як мова асемблера. Високорівневі мови програмування: Вони більш абстрактні та зручні для розробників, оскільки дозволяють працювати на більш вищому рівні абстракції, наприклад, Python, Java, або Ruby.
За парадигмою програмування	Процедурне програмування: Наприклад, С. Об’єктно-орієнтоване програмування: Наприклад, Java, Python. Функціональне програмування: Наприклад, Haskell, Lisp. Логічне програмування: Наприклад, Prolog.
За використанням	Мови загального призначення: Які можна використовувати для різноманітних завдань, наприклад, Python або Java. Спеціалізовані мови: Розроблені для конкретних областей застосування, таких як SQL для роботи з базами даних або MATLAB для наукових обчислень.
За типом виконання	Компільовані мови: Код перетворюється в машинний код до виконання. Інтерпретовані мови: Код читається та виконується рядок за рядком безпосередньо під час виконання програми.

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

Статична типізація	◦ Вимагає, щоб типи даних були вказані в коді під час компіляції або перед виконанням програми.         ◦ Помилки типізації виявляються під час компіляції.         ◦ Приклади мов програмування зі статичною типізацією включають Java, C++, C#.
Динамічна типізація	◦ Типи даних визначаються автоматично під час виконання програми.         ◦ Помилки типізації можуть виникнути під час виконання програми.         ◦ Приклади мов програмування з динамічною типізацією включають Python, JavaScript, Ruby.
Переваги і недоліки	Статична типізація: Зазвичай допомагає виявляти помилки на етапі компіляції, що робить програми більш стійкими до помилок. Однак вона може вимагати більше часу на написання коду через необхідність оголошення типів. Динамічна типізація: Дозволяє писати код більш швидко, оскільки не потрібно вказувати типи. Але вона може призвести до помилок типів, які можуть виникнути під час виконання програми.

Низькорівневі мови програмування

Низькорівневі мови програмування – це мови, які наближені до машинного коду та архітектури комп’ютера. Основна особливість низькорівневих мов полягає в тому, що вони мають прямий контроль над ресурсами та функціями обладнання комп’ютера, такими як пам’ять, процесор та периферійні пристрої.

Мова асемблера (Assembly Language)	Це найнижчий рівень мов програмування, який знають люди. Вона використовує символи та команди, які прямо відображають машинний код комп’ютера. Кожна команда асемблера відповідає конкретній інструкції процесора.
Мова машинних команд (Machine Code)	Це безпосередньо код, що виконуєтсья, який розуміє процесор. Він складається з набору бінарних чисел (0 та 1), які вказують на конкретні операції та даних для обробки.
“Напів-низькорівневі”мови	Деякі мови, такі як С або C++, можуть називатися “напів-низькорівневими”, оскільки вони надають певний рівень абстракції від асемблеру, але все ще наближені до апаратного забезпечення комп’ютера.

Високорівневі мови програмування

Високорівневі мови програмування – це мови, які забезпечують високий рівень абстракції від машинного коду та апаратної частини комп’ютера. Вони дозволяють розробникам писати код, який більш зрозумілий та легший у використанні, оскільки він більш близький до природної,звичайної мови.

Python	є однією з найпопулярніших високорівневих мов програмування. Вона відома своєю простотою та зручністю використання, а також великою кількістю сторонніх бібліотек та фреймворків для різноманітних завдань, таких як веб-розробка, наукові обчислення, штучний інтелект тощо.
Java	це мова програмування, яка відома своєю платформонезалежністю та об’єктно-орієнтованим підходом. Вона використовується для розробки веб-додатків, мобільних додатків, великих корпоративних систем.
JavaScript	це мова програмування, яка використовується головним чином для розробки веб-додатків та веб-сторінок. Вона використовується для створення інтерактивних елементів на сторінках, а також для реалізації серверного коду за допомогою платформи Node.js.
C#	це мова програмування, розроблена корпорацією Microsoft, яка широко використовується для розробки програм для платформи Windows, веб-додатків та ігор.
Ruby	це динамічна мова програмування з акцентом на простоту та продуктивність розробки. Вона часто використовується для веб-розробки, зокрема з фреймворком Ruby on Rails.
PHP	це мова програмування, спеціалізована на розробці веб-додатків та динамічних веб-сайтів. Вона широко використовується для створення блогів, електронних комерційних платформ та інших веб-застосунків.

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

Процедурне програмування

Процедурне програмування – це парадигма програмування, в якій програма складається з набору процедур або функцій, які виконують певні дії над даними. Основними концепціями процедурного програмування є процедури, змінні та контроль структур.

Процедури (або функції)	Вони є основною одиницею програми і містять в собі блоки коду, які виконують певні завдання. Процедури можуть приймати аргументи (вхідні дані) та повертати значення (вихідні дані).
Змінні	Вони використовуються для зберігання та обробки даних в програмі. Змінні можуть змінювати свої значення протягом виконання програми.
Контроль структур	Для керування виконанням програми використовуються різні конструкції, такі як умовні оператори (if-else), цикли (for, while), та інші.

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

Хоча процедурне програмування залишається важливою парадигмою, багато сучасних мов програмування, таких як Python, Java, або C++, додали підтримку об’єктно-орієнтованого програмування (ООП) або інших парадигм, що дозволяють більш ефективно організовувати та управляти складними програмами.

Об’єктно-орієнтоване програмування

Об’єктно-орієнтоване програмування (ООП) – це парадигма програмування, в якій програма структурується навколо об’єктів, які представляють собою конкретні екземпляри класів, та взаємодіють один з одним. Ось деякі ключові концепції об’єктно-орієнтованого програмування:

Класи	Клас – це шаблон або загальний опис для створення об’єктів. Він визначає атрибути (змінні членів) та методи (функції членів), які будуть доступні для об’єктів цього класу.
Об’єкти	Об’єкт – це конкретний екземпляр класу. Він має свої власні унікальні значення атрибутів та може викликати методи, визначені в класі.
Інкапсуляція	Інкапсуляція полягає в обмеженні доступу до деяких компонентів класу, зазвичай через використання модифікаторів доступу, таких як public, private, або protected. Це дозволяє захищати дані від несанкціонованого доступу та забезпечує більшу безпеку та стійкість програм.
Наслідування	Наслідування дозволяє створювати нові класи на основі існуючих класів, зберігаючи при цьому властивості та методи батьківського класу. Це дозволяє використовувати існуючий код та розширювати його для створення нових функціональних можливостей.
Поліморфізм	Поліморфізм дозволяє об’єктам реагувати по-різному на однакові повідомлення чи запити, забезпечуючи тим самим гнучкість та розширюваність програми.

Об’єктно-орієнтоване програмування допомагає розробникам створювати більш структуровані, з кращими можливостями для підтримки та масштабовання програми. Воно спрощує розробку та розуміння коду, сприяє повторному використанню компонентів, підвищує стійкість та забезпечує більшу гнучкість при розширенні програми. Багато сучасних мов програмування, таких як Java, Python, C++, використовують об’єктно-орієнтовану парадигму.

Функціональне програмування

Функціональне програмування – це парадигма програмування, в якій програми структуруються навколо функцій, які приймають та повертають значення. Основні концепції функціонального програмування включають в себе:

Функції першого класу	У функціональних мовах програмування функції можуть бути передані як аргументи до інших функцій, повернуті з інших функцій, та призначені для змінної.
Чисті функції	Це функції, які не мають побічних ефектів та завжди повертають однаковий результат для однакових вхідних даних. Вони підтримують принципи безпечної та детермінованої роботи.
Немутабельні дані	Функціональне програмування сприяє використанню немутабельних (не змінюваних) даних, тобто таких, які не можуть бути змінені після їх створення. Це допомагає уникнути багатьох типових помилок у багатопоточних та розподілених системах.
Рекурсія	Функціональне програмування активно використовує рекурсію як механізм ітерації. Використання рекурсії дозволяє писати код для вирішення певних завдань.
Замикання (Closures)	Замикання – це функції, які мають доступ до змінних з середовища, в якому вони були створені. Це дозволяє створювати функції, які зберігають стан та поведінку, що робить їх корисними для створення об’єктів.
Функціональні структури даних	Функціональні мови програмування часто мають вбудовані структури даних, такі як списки, масиви тощо, які підтримують функції вищих порядків та оператори.

Функціональне програмування допомагає створювати більш ефективні програми, спрощуючи багато аспектів розробки, такі як обробка даних та управління станом. Багато мов програмування підтримують елементи функціонального програмування, такі як JavaScript, Python, Scala, Haskell.

Функціональне vs процедурне

Основна різниця між процедурним програмуванням і функціональним програмуванням полягає в їхній основній парадигмі та способі організації коду:

Парадигма	Процедурне програмування: Основна концепція – це розділення програми на блоки коду, які називаються процедурами або функціями. Програма складається з послідовності інструкцій, які виконуються послідовно, викликаючи різні процедури для виконання певних завдань. Функціональне програмування: Основна концепція – це орієнтація на функції, які приймають та повертають значення. Програма структурується навколо функцій, які можуть бути передані, повернуті та оброблені як дані.
Змінність даних	Процедурне програмування: Зазвичай використовується змінна структура даних, яка може змінюватися протягом виконання програми. Функціональне програмування: Сприяє використанню немутабельних (не змінюваних) даних, які не можуть бути змінені після їх створення.
Побічні ефекти	Процедурне програмування: Дозволяє виконувати побічні ефекти, такі як зміна значень глобальних змінних або стану програми. Функціональне програмування: Спрямоване на створення чистих функцій, які не мають побічних ефектів та завжди повертають однаковий результат для однакових вхідних даних.
Структура програми	Процедурне програмування: Програми будуються навколо блоків коду, які реалізують конкретні завдання. Функціональне програмування: Програми будуються навколо функцій, які складаються з набору інструкцій для обробки даних.

Хоча існують різниці між процедурним та функціональним програмуванням, у багатьох мовах програмування можна використовувати елементи обох підходів. Наприклад, мова Python підтримує як процедурне, так і функціональне програмування.

Логічне програмування

Логічне програмування – це парадигма програмування, яка базується на логічних висловлюваннях та правилах інференції. Основною ідеєю логічного програмування є визначення відношень між фактами та використання цих відношень для виводу нових фактів або розв’язання завдань.

Логічні висловлювання (правила)	Логічні програми складаються з набору логічних висловлювань або правил, які описують відношення між об’єктами. Ці правила можуть включати факти та умови, які визначають, коли ці факти є істинними.
Інференція (вивід)	Один з ключових аспектів логічного програмування – це використання правил для виводу нової інформації з наявних фактів. Іншими словами, програма може використовувати правила для логічного висновку нових фактів на основі вже відомих.
Безперервність (декларативність)	Логічні програми виражають відносини між даними у вигляді логічних висловлювань, а не послідовності інструкцій для виконання. Це робить їх більш декларативними, що означає, що програміст описує, що потрібно зробити, а не як це зробити.
Примітиви	Факти: Описують стан системи або деякі дані, які програма має на увазі. Правила: Визначають відносини між фактами та умови, які повинні бути виконані для того, щоб правило застосовувалось. Запити (Queries): Запити використовуються для пошуку фактів або рішення проблем, запитуючи базу даних фактів та правил.
Приклади мов програмування	Деякі мови програмування, які підтримують логічне програмування, включають Prolog, Datalog, та Mercury.

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

Компілятори і інтерпретатори

Компілятор і інтерпретатор – це два основних типи програм, які перетворюють вихідний код програми у код, що виконується або машинний код.

Компілятор

Компілятор – це програма, яка перетворює вихідний код програми (написаний на високорівневій мові програмування) в машинний код або набір інструкцій, який може виконуватися безпосередньо на комп’ютері. Після компіляції вихідний код стає незалежним від вихідної мови програмування. Компільований код може виконуватися без наявності компілятора на цільовій системі. Компілятор перевіряє весь код програми на предмет синтаксичних та семантичних помилок до генерації вихідного коду.

Інтерпретатор

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

PYPL

PYPL (PopularitY of Programming Language) — індекс створений на основі аналізу як часто курси з вивчення певної мови шукають у Google. Чим більше мову програмування шукають, тим популярнішою вона вважається.

Rank	Language	Share	1-year trend
1	Python	29.06 %	+1.4 %
2	Java	15.97 %	+0.2 %
3	JavaScript	8.7 %	-0.6 %
4	C#	6.73 %	-0.0 %
5	C/C++	6.4 %	-0.0 %

TIOBE

TIOBE (The Importance of Being Earnest) індекс, який оцінює популярність мови програмування з урахуванням даних від Google, Bing, Yahoo, Wikipedia, Amazon, YouTube, Baidu. Цей індекс оновлюється один раз на місяць.

Jun 2024	Jun 2023	Programming Language	Ratings	Change
1	1	Python	15.39%	+2.93%
2	3	C++	10.03%	-1.33%
3	2	C	9.23%	-3.14%
4	4	Java	8.40%	-2.88%
5	5	C#	6.65%	-0.06%
6	7	JavaScript	3.32%	+0.51%
7	14	Go	1.93%	+0.93%
8	9	SQL	1.75%	+0.28%
9	6	Visual Basic	1.66%	-1.67%
10	15	Fortran	1.53%	+0.53%

В цьому відео поговоримо про мови програмування:
00:00 Мови програмування
01:37 Класифікація
07:49 Низькорівневі мови програмування
10:19 Високорівневі мови програмування
13:59 Процедурне програмування
16:06 Об’єктно-орієнтоване програмування
20:17 Функціональне програмування
24:18 Функціональне vs процедурне
27:02 Логічне програмування
29:35 Компілятори і інтерпретатори
30:50 Індекс PYPL
33:44 Індекс TIOBE

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

Тім Бернерс-Лі (Tim Berners-Lee)	Він є винахідником World Wide Web (WWW) і вперше запропонував концепцію гіпертекстової системи, що дозволяє зв’язувати документи через мережу Інтернет.
Роберт Кан (Robert Kahn) і Вінтон Серф (Vinton Cerf)	Ці два дослідники створили базові протоколи для передачі даних в мережі, включаючи протокол передачі даних (TCP) та протокол Інтернету (IP), які утворюють основу Інтернету.
ARPANET (Advanced Research Projects Agency Network)	Це перший експериментальний комп’ютерний мережевий проєкт, який був розроблений в рамках програми американського військового відомства DARPA в 1960-х роках. ARPANET став пращуром Інтернету і вперше дозволив комп’ютерам обмінюватися інформацією.
W3C (World Wide Web Consortium)	Ця міжнародна організація, заснована Тімом Бернерсом-Лі, займається розробкою веб-стандартів і рекомендацій, що сприяють розвитку Інтернету та забезпечують його сумісність.

Клієнт-серверна архітектура

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

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

Основні характеристики клієнт-серверної архітектури:

Розподілена система	Клієнти і сервери можуть фізично знаходитися на різних комп’ютерах або пристроях, і вони зазвичай знаходяться в різних мережах.
Клієнти і сервери мають різні функції	Клієнтські програми зазвичай забезпечують інтерфейс для користувача та взаємодію з ним, в той час як сервери забезпечують послуги, ресурси або обробляють запити від клієнтів.
Комунікація через мережу	Клієнти та сервери спілкуються один з одним через мережу, використовуючи певний протокол, такий як HTTP, FTP, TCP/IP тощо.
Забезпечення масштабованості і ефективності	Клієнт-серверна архітектура дозволяє розділити навантаження між клієнтами і серверами, що полегшує масштабування та підвищує продуктивність системи.

Терміни

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

Сервер – група персональних комп’ютерів заточених на виконання різноманітних серверних завдань без участі людини.

Стек протоколів TCP/IP (Transmission Control Protocol/Internet Protocol) – набір протоколів передачі даних у мережах.

HTTP – протокол прикладного рівня передачі даних (спочатку – у вигляді гіпертекстових документів у форматі HTML, зараз використовується для передачі довільних даних).

DNS – комп’ютерна розподілена система для отримання інформації про домени. Найчастіше використовується для отримання IP-адреси на ім’я хоста (комп’ютера або пристрою), отримання інформації про маршрутизацію пошти, які обслуговують вузли для протоколів у домені.

HTML – стандартна мова розмітки документів у World Wide Web. Мова HTML інтерпретується браузерами та відображається у вигляді документа у зручній для людини формі.

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

Етапи створення веб-сайту

Планування і аналіз вимог	Це перший крок, де визначаються мета веб-сайту, аудиторія, функціональні вимоги, структура та інші ключові параметри.
Проєктування і дизайн	На цьому етапі розробляється концепція дизайну, створюються макети, графічні елементи та інші аспекти зовнішнього вигляду веб-сайту.
Розробка	Програмісти реалізують функціональність веб-сайту за допомогою різноманітних технологій, таких як HTML, CSS, JavaScript, бази даних тощо.
Тестування	Веб-сайт перевіряється на наявність помилок, сумісність з різними браузерами і пристроями, а також відповідність вимогам.
Налаштування і оптимізація	Після тестування веб-сайт оптимізується для покращення швидкодії, безпеки і SEO.
Розгортання і запуск	Готовий веб-сайт розгортається на сервері та доступний для відвідувачів.
Підтримка і оновлення	Після запуску веб-сайту важливо забезпечити його підтримку, виправлення помилок та регулярні оновлення контенту та функціональності.

Верстання веб-сторінок

Верстання веб-сторінок вимагає ретельного планування, розуміння потреб користувачів і дотримання сучасних веб-стандартів і технік розробки.

Верстання веб-сторінки – це процес створення вигляду і структури сторінки з використанням мов розмітки, таких як HTML (HyperText Markup Language) та CSS (Cascading Style Sheets).

Основні кроки у верстанні веб-сторінки включають:

Створення HTML-структури	HTML використовується для визначення структури сторінки, такої як заголовки, параграфи, списки, таблиці, посилання тощо.
Визначення стилів за допомогою CSS	CSS використовується для визначення зовнішнього вигляду сторінки, такого як кольори, шрифти, розташування елементів, відступи та інші декоративні аспекти.
Адаптація для різних пристроїв	Сучасні веб-сторінки повинні бути адаптивними для різних пристроїв і розмірів екранів, тому важливо використовувати техніки адаптивного дизайну за допомогою CSS, наприклад, медіа-запити (media queries).
Використання JavaScript	JavaScript може використовуватися для додавання інтерактивності до веб-сторінки, такої як анімація, валідація форм, обробка подій тощо.
Тестування і оптимізація	Веб-сторінку слід перевірити на сумісність з різними браузерами та пристроями, а також оптимізувати для швидкодії і SEO.

Типи веб-сторінок

В контесті верстання можна виділити наступні тип веб-сторінок:

Статичні веб-сторінки	Це сторінки, які мають фіксований вміст і вигляд, інформація на них зазвичай не змінюється часто. Вони можуть бути створені за допомогою HTML і CSS, без використання складних скриптів чи баз даних. Такі сторінки часто використовуються для простих веб-сайтів, які не потребують частого оновлення.
Динамічні веб-сторінки	Ці сторінки генеруються на льоту відповідно до запитів користувачів або даних з бази даних. Для їх створення використовуються мови програмування, такі як PHP, Python, Ruby, а також бази даних, такі як MySQL, PostgreSQL тощо. Динамічні сторінки дозволяють реалізувати складні функціональні можливості, такі як реєстрація користувачів, онлайн-магазини, системи управління контентом тощо.
Адаптивні / Реактивні веб-сторінки	Ці сторінки адаптуються до різних розмірів екранів і пристроїв. Вони використовують техніки адаптивного дизайну, такі як медіа-запити CSS, щоб оптимізувати вигляд і розміщення елементів на екранах різних розмірів, наприклад, на мобільних пристроях, планшетах і настільних комп’ютерах.

Кросбраузерність

Кросбраузерність (англ. Cross-Browser Compatibility) – це властивість веб-сайту або веб-додатка, яка забезпечує його коректну роботу у різних веб-браузерах. Кожен веб-браузер має свої власні особливості та інтерпретацію веб-стандартів, що може впливати на те, як відображається та працює веб-сайт.

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

Щоб забезпечити кросбраузерність, розробники використовують такі підходи, як тестування веб-сайту у різних браузерах, використання сучасних веб-стандартів та технік адаптивного дизайну.

HTML

HTML – тегова мова розмітки документів. Будь-який документ мовою HTML представляє собою набір елементів, причому початок і кінець кожного елемента позначається спеціальними позначками – тегами.

Теги можуть бути:

• обов’язковими
• парними
• з атрибутами
• порожніми

Правила синтаксиса HTML

• кожен тег повинен починатися з «<» та закінчуватися «>»;
• імена тегів та їх атрибутів повинні відповідати переліку допустимих HTML імен;
• теги та їх атрибути реєстронезалежні (за винятком атрибутів користувача);
• якщо значення атрибуту містить пробіли, воно обов’язково має бути поміщене в лапки;
• у вмісті документа браузери ігнорують кілька пробілів, які розміщені послідовно, і стискають їх до одного пробілу;
• елемент, що включає початковий тег іншого елемента, повинен містити і кінцевий тег цього елемента (за винятком одиночних тегів);

Парні теги

<html> </html> - показує, що це html документ
<head> </head> - "шапка" документа
<body> </body> - «тіло» документа
<a> </a> - гіперпосилання
<strong></strong> - виділення жирним
<i> </i> - виділення курсивом
<p></p> - абзац
<table></table> - таблиця
<tr> </tr> - рядок таблиці
<td> </td> - комірка у рядку таблиці

Теги з атрибутами

<a href=”#” name=”empty” target=”_blank”>Порожнє посилання</a>
а - тег
href – атрибут, який містить посилання
name – атрибут, який містить ім'я посилання
target – атрибут, який дозволяє відкрити посилання у новому вікні

<a href="https://www.google.com">Visit Google!</a>

Приклад з відео:

<!DOCTYPE html>
<html>
<body>

<h2>Hyperlink tag</h2>
<a href="https://www.google.com">Visit Google!</a>

</body>
</html>

Робота з зображеннями

<img src=”...” border=”...” width=”...” height=”...”>
img - тег
border – атрибут, рамка навколо зображення
width – атрибут, ширина малюнка
height – атрибут, висота малюнка

<img src="https://cdn.pixabay.com/photo/2021/11/21/22/08/british-shorthair-6815375_1280.jpg" alt="Fluffy cat" width="850" height="700">

Приклад з відео:

<!DOCTYPE html>
<html>
<body>

<h2>IMG tag</h2>

<img src="https://cdn.pixabay.com/photo/2021/11/21/22/08/british-shorthair-6815375_1280.jpg" alt="Fluffy cat" width="850" height="700">

</body>
</html>

Метатеги

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

Опис:
<meta name="description" content="Сайт про HTML та створення сайтів">
Ключові слова:
<meta name="Keywords" content="HTML, META, метатег, тег, пошукова
система">

Тег таблиці

Елемент <table> – контейнер для елементів, що визначають вміст таблиці. Будь-яка таблиця складається з рядків (<tr>) та комірок (<td>, <th>).

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>

<h2>A basic HTML table</h2>

<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Investment Company LLC</td>
    <td>John James Smith</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Williams, Brandt and Partners</td>
    <td>Jennifer Connors</td>
    <td>USA</td>
  </tr>
</table>
</body>
</html>

Теги списків

Тег <ol> встановлює нумерований список, а тег <ul> -маркований список.

Тег <li> означає елемент списку.

Приклад з відео нумерований список:

<!DOCTYPE html>
<html>
<body>

<h2>Ordered HTML list</h2>

<ol>
  <li>Tea</li>
  <li>Coffee</li>
  <li>Cola</li>
</ol>  

</body>
</html>

Приклад з відео маркований список:

<!DOCTYPE html>
<html>
<body>

<h2>Unordered HTML list</h2>

<ul>
  <li>Tea</li>
  <li>Coffee</li>
  <li>Cola</li>
</ul>  

</body>
</html>

Знайомство з CSS

CSS (Cascading Style Sheets, каскадні таблиці стилів) — це набір параметрів форматування, який застосовується до елементів документа, щоб змінити їхній зовнішній вигляд.

Переваги CSS:

• Розмежування коду та оформлення
• Розширені в порівнянні з HTML способи оформлення елементів
• Прискорення завантаження сайту (кешування)
• Єдине стильове оформлення безлічі документів
• Централізоване зберігання

Базовий синтаксис CSS

Стилеві правила записуються у своєму форматі, відмінному від HTML. Основним поняттям виступає селектор – це деяке ім’я стилю, до якого додаються параметри форматування. Як селектор виступають теги, класи та ідентифікатори.

Загальний спосіб запису має такий вигляд:

body {background: yellow;}

Коментарі в CSS додаються наступним чином:

/* тут текст коментаря */

Колір у CSS можна визначити за допомогою слова: (color: yellow)

Чи 16-кового значення: (color: #ffff00)

Чи за допомогою RGB: (color: rgb(255,255,0))

Як селектор може виступати будь-який HTML тег, для якого визначаються правила форматування, такі як: колір, фон, розмір і.т.д.

CSS зовнішній файл

Найчастіше CSS оформлюють у вигляді окремого файлу чи файлів, які підключають до html документа.

Підключення файлу у html документі:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Приклад CSS файла mystyle.css:

body {
    background-color: yellow;
  }
  
  h1 {
    color: blue;
    margin-left: 30px;
  }

CSS внутрішній стиль

Також існує опція оформлення стилів CSS у межах тегу style.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #ffff00;
}

h1 {
  color: blue;
  margin-left: 30px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS для елементів

І ще одна опція – це визначити стиль для окремого елементу документа. Проте ця опція – найменш розповсюджена. Найчастіше віддають перевагу саме окремому файлу зі стилями.

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:tomato;">This is a paragraph.</p>

</body>
</html>

Протокол HTTP

Протокол HTTP (Hypertext Transfer Protocol) був розроблений Тімом Бернерсом-Лі (Tim Berners-Lee) у 1989 році, коли він працював у CERN (European Organization for Nuclear Research). Це був перший протокол, який використовувався для передачі гіпертекстової інформації (тексту, посилань тощо) через мережу Інтернет.

Тім Бернерс-Лі створив HTTP як частину його роботи над World Wide Web (WWW), системою гіпертексту, яка дозволяла б користувачам зв’язувати документи через мережу Інтернет. HTTP був спроєктований для того, щоб бути простим у використанні та зрозумілим для людей, а також для забезпечення можливості швидкої передачі даних.

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

HTTP є одним з основних протоколів Інтернету і використовується для передачі веб-контенту в мережі.

HTTP (Hypertext Transfer Protocol) – це протокол передачі гіпертексту, який використовується для обміну даними між веб-браузерами та веб-серверами. Він є основою для передачі веб-сторінок, зображень, відео, аудіофайлів та іншого веб-контенту через Інтернет.

Основні особливості і характеристики HTTP:

Простота і текстова основа	HTTP базується на простому текстовому протоколі, що робить його легко зрозумілим і аналізованим для людини. Кожен HTTP-запит або відповідь складається зі статусного рядка, заголовків та необов’язкового тіла повідомлення.
Клієнт-серверна архітектура	HTTP базується на клієнт-серверній архітектурі, де клієнти (наприклад, веб-браузери) надсилають запити до веб-серверів, а ті відправляють відповіді.
Stateless та stateful режими роботи	HTTP може працювати в режимі без стану (stateless) або стану (stateful). У режимі без стану кожний запит вважається окремим, незалежним від попередніх запитів. У режимі стану зберігається інформація про попередні запити, що дозволяє підтримувати стан на сервері.
Методи HTTP-запитів	HTTP підтримує різні методи запитів, такі як GET, POST, PUT, DELETE, які використовуються для виконання різних дій на веб-сервері (наприклад, отримання даних, надсилання даних, оновлення даних, видалення даних тощо).
Шифрування з’єднань	HTTP може бути зашифрованим за допомогою протоколу HTTPS (HTTP Secure), що забезпечує безпеку та конфіденційність передачі даних за допомогою шифрування SSL або TLS.

Методи HTTP

До методів протоколу HTTP відносять:

GET	Метод GET використовується для отримання ресурсів з сервера. Клієнт надсилає запит на сервер і отримує відповідь, яка містить дані запитуваного ресурсу. GET-запити повинні бути безпечними та ідемпотентними, що означає, що вони не мають побічних ефектів і можуть бути кешованими.
POST	Метод POST використовується для відправлення даних на сервер для обробки. Наприклад, форми на веб-сторінках часто використовують метод POST для надсилання даних з полями введення на сервер для обробки та збереження.
PUT	Метод PUT використовується для відправлення даних на сервер для оновлення або створення ресурсу зазначеного URI (ідентифікатор ресурсу). Він дозволяє клієнту створювати або оновлювати ресурси на сервері.
DELETE	Метод DELETE використовується для видалення ресурсу з сервера, що вказано в URI. Він дозволяє клієнту видаляти дані або об’єкти на сервері.
PATCH	Метод PATCH використовується для часткового оновлення ресурсу на сервері. Він дозволяє клієнту відправити тільки зміни до ресурсу, не потрібно надсилати всю повну репрезентацію ресурсу.
HEAD	Метод HEAD ідентичний методу GET, але сервер повертає лише заголовки відповіді, без тіла відповіді. Це дозволяє клієнту отримати інформацію про ресурс, не завантажуючи весь контент.
OPTIONS	Метод OPTIONS використовується для запиту від сервера підтримки додаткових можливостей, доступних для конкретного ресурсу або сервера.
CONNECT	Метод CONNECT використовується для встановлення тунелю до сервера, і він використовується, наприклад, для з’єднання з SSL-проксі.
TRACE	Метод TRACE використовується для діагностики, дозволяючи клієнту побачити, які зміни вносяться до повідомлення при проходженні через проксі-сервери.

Ці методи дозволяють клієнтам та серверам взаємодіяти один з одним та виконувати різноманітні завдання, такі як отримання, відправлення, оновлення та видалення даних на веб-серверах.

Проксі-сервер

Проксі-сервер (просто “проксі”) – це проміжний сервер, який діє як посередник між клієнтом і сервером. Коли клієнт відправляє запит на сервер, він спочатку направляється на проксі-сервер, який потім пересилає запит на відповідний сервер. Проксі-сервери можуть мати різні функції і використовуються з різними цілями:

Кешування	Проксі-сервер може кешувати вміст запитів і відповідей. Якщо той самий запит надійде знову, проксі може повернути відповідь без звернення до віддаленого сервера, що поліпшує швидкодію і зменшує навантаження на мережу.
Фільтрація трафіку	Проксі-сервер може фільтрувати запити і відповіді з метою блокування небажаного вмісту, контролю доступу або захисту від зловживань.
Анонімізація ідентифікатора клієнта	Проксі може приховати ідентифікатор клієнта, замінюючи його власним. Це дозволяє зберігати анонімність користувача під час з’єднання.
Покращення безпеки	Проксі може служити фільтром для трафіку, що проходить через нього, перевіряти на вразливості або відсікати потенційно шкідливий вміст.
Організаційні цілі	В корпоративних мережах проксі-сервери можуть використовуватися для моніторингу і контролю використання Інтернету співробітниками, а також для оптимізації мережевого трафіку.

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

SSL-проксі

SSL-проксі (Secure Sockets Layer Proxy) – це проксі-сервер, який використовує SSL (Secure Sockets Layer) або його сучасний еквівалент TLS (Transport Layer Security) для забезпечення захищеної передачі даних між клієнтом і сервером через Інтернет. Основні характеристики SSL-проксі включають:

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

В цьому відео поговоримо про основи Web:
00:00 Вступ до WEB
01:35 Клієнт-серверна архітектура
04:54 Терміни
06:43 Етапи створення веб-сайту
08:42 Верстання веб-сторінок
10:39 Типи веб-сторінок
12:59 Кросбраузерність
14:17 Структура сайту
15:47 HTML
29:46 CSS
41:10 Протокол HTTP
48:38 Проксі-сервер