Що таке HTML та як за допомогою нього увійти в IT

Соціальні мережі, інтернет-магазини, портали новин: основу більшості веб-сторінок складає HTML . Тому не буде перебільшенням назвати його головною мовою інтернету. Редакція MC.today розібралася, що таке HTML, а також вивчила його переваги та принцип роботи.

Що таке HTML

HTML (HyperText Markup Language) – це спеціальна мова розмітки, яка застосовується при створенні сайтів в інтернеті. Браузери чудово розуміють html і можуть інтерпретувати у зрозумілому для людини вигляді.

Уявіть, що ви клікнули на сайті mc.today. У цей момент браузер звертається до сервера сайту і отримує файл у форматі HTML. Але поки це лише набір елементів, які позначають спеціальними позначками – тегами. Щоб перетворити їх на заголовки, кнопки, посилання, зображення, браузер інтерпретує теги відповідно до правил мови HTML.

Таким чином, документ HTML – це своєрідний план з інформацією, з яких будівельних блоків і в якому порядку збирати веб-сторінку. Блоками виступають набори тегів. Майже всі теги парні. Відкриваючий показує, де елемент починається, а закриваючий – де закінчується. Наприклад, щоб створити абзац, потрібно помістити текст між вихідним тегом <p> та закриваючим </p> .

Для чого використовують HTML

Читаючи ці рядки, ви використовуєте HTML. Сьогодні сайти є практично у всіх, починаючи від корпорацій та закінчуючи фахівцями з манікюру. І всі вони написані на HTML. Веб-версії мають програми, сервіси, ігри, Viber та Telegram.

На HTML написано багато програм, які ми вважали десктопними або мобільними. І якщо клацнути правою клавішею і вибрати «Переглянути код», то всюдисущий тег <div> виявиться і в Google Drive, і в Facebook, і на сайті ПриватБанку.

Історія появи

1989 року програміст міжнародного центру високих енергій у Женеві Тім Бернерс-Лі запропонував проект Всесвітньої павутини, або World Wide Web. Ідея полягала в тому, щоб створити систему взаємопов’язаних гіпертекстових документів, розміщених на комп’ютерах по всьому світу. Для реалізації Тім та його помічники розробили технології, без яких просто неможливо уявити собі сучасний інтернет.

• HTTP – протокол, який дозволяє передавати документи від клієнта до сервера;
• URL – унікальна адреса, яка визначає розташування ресурсу в Інтернеті;
• HTML – це мова гіпертекстової розмітки для створення веб-документів.

Не применшуючи заслуг Бернерса-Лі, скажімо, що HTML не з’явився на порожньому місці. За його основу «батько інтернету» взяв уже добре відому на той час мову розмітки SGML. І навіть візитна картка HTML – теги з кутовими дужками – також звідти.

Першим офіційним описом HTML став документ Теги HTML, який Бернерс-Лі опублікував у 1991 році. До нього увійшли 18 структурних та семантичних елементів – дескрипторів, або тегів. Невелика кількість елементів вирішила проблему складності SGML, але водночас дозволяла створювати прості та красиво оформлені документи. Крім того, HTML отримав підтримку гіпертексту.

Зі зростанням популярності Мережі стало зрозуміло, що мова гіпертекстової розмітки потребує розвитку. Але нововведення повинні підкорятися єдиним стандартам, щоб кожен сайт можна було легко відкрити на будь-якому браузері. Створенням таких стандартів мав займатися Консорціум Всесвітньої Павутини, або W3C, який у 1994 році заснував Тім Бернерс-Лі. Ця міжнародна спільнота продовжує працювати над розробкою веб-стандартів. На сьогодні актуальною є їхня версія HTML з порядковим номером 5.3.

Що можна і не можна зробити на HTML?

Як ми вже говорили, HTML вказує браузеру, з яких елементів і в якому порядку збирати веб-сторінку, а також де брати стилі елементів і скрипти. Він також дозволяє організовувати інформацію у різний спосіб. Наприклад, створювати таблиці, списки, параграфи, форматувати текст, додавати зображення, заголовки, посилання та кнопки.

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

СSS, або каскадні таблиці стилів, – це мова, якою описують зовнішню, візуальну сторону HTML-документів. Спільне використання HTML і CSS спрощує розробку, оскільки властивості можна прописати один раз для безлічі однакових елементів. Без CSS, навпаки, частина можливостей втрачається. Не можна додавати дизайнерські шрифти, встановлювати фон веб-сторінки, вказувати стилі для різних станів об’єкта.

Хоча HTML і є мовою розмітки, в ньому все ж таки присутні деякі елементи оформлення. Так тег <strong> може зробити текст жирним, а тег <i> – курсивним. Але на практиці HTML надає цим тегам насамперед смислове (семантичне) значення. Тому використання елементів <strong> та <i> заради візуального ефекту вважається поганим тоном.

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

Як вивчити HTML

Припустимо, ви хочете стати верстальником сайтів, Frontend-розробником, проектувальником інтерфейсів користувача або PHP-програмістом. А може, займаєтеся маркетингом, пишете тексти і часто публікуєте контент. У будь-якому з цих випадків вам потрібне знання HTML.

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

• Основи HTML
• Довідник з HTML
• Інтерактивний курс HTML із перевірочними завданнями
• Підручник від Html5book

Для написання коду достатньо простого блокнота. А запустити його можна в будь-якому браузері, наприклад, Chrome, Opera чи Firefox. Якщо цього замало, є редактори з розширеним функціоналом: Notepad++, Sublime, Atom. Або безкоштовні «пісочниці» на кшталт Codepen. В них можна возитися з HTML і бачити результат у тому ж вікні.

• SublimeText
• атом
• Codepen
• JSFiddle

Для тих, кому простіше сприймати аудіовізуальну інформацію, можемо порадити плейлисти на YouTube та безкоштовні курси. Наприклад, “Основи WEB UI розробки 2022” від Prometheus. Або “Основи веб-розробки” від Educational Era. Обидва курси розраховані на новачків без досвіду роботи та навіть базових знань.

Що таке frontend-розробка

Фронтенд-розробка відповідає за створення зовнішньої або клієнтської сторони веб-сайтів. Іншими словами, фронтенд – це все, що ваш браузер може читати, виводити на екран та запускати. В її основі лежать «три кити» – HTML, CSS та JavaScript. HTML підказує сайту, що показувати, CSS визначає як це виглядатиме, а JS допомагає відстежити дії користувача та прописати реакцію на них.

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

Дизайнери проектують інтерфейси, створюють візуальні рішення. Верстальники створюють за макетами веб-сторінки за допомогою HTML та CSS. Фронтенд-розробники не тільки верстають, але й програмують веб-сторінки або створюють веб-програми. Крім HTML і CSS, вони повинні розуміти JavaScript. Fullstack-розробники займаються фронт-і бекенд одночасно. Крім JavaScript, вони працюють з PHP, Python, Java та іншими мовами програмування.

Чому потрібно починати з frontend розробки? По-перше, якщо у вас немає спеціальної освіти, то вам буде набагато простіше зрозуміти frontend, тому що це про візуал та про браузер. Тобто свої помилки ви зможете наочно бачити у браузері. А по-друге, тому що JavaScript традиційно займає одне з перших місць рейтингу затребуваності мов програмування.

Як стати frontend-розробником

Самостійно вивчивши HTML та CSS, можна починати застосовувати знання на практиці, конвертуючи макети сайтів у код HTML. На ринку праці такі фахівці називаються верстальниками. Їх навичок може вистачати і для розробки простих сайтів, наприклад landing page.
Дизайнер-верстальник може поєднувати верстку з проектуванням інтерфейсів та створенням візуальних рішень. За даними work.ua, середня зарплата верстальника в Україні становить від 15 до 23 тис. грн.

Фронтенд-розробник не тільки верстає, а й програмує веб-сторінки або створює повноцінні додатки. В його обов’язки входить створення HTML-сторінок на основі макетів, написання та прив’язка скриптів, оптимізація продуктивності та сумісності сайту, тестування та складання проекту.

Junior frontend-розробник повинен розуміти принцип роботи Веб, знати основи HTML та CSS, мати досвід програмування на JavaScript, практичні навички роботи з фреймворками, jQuery, React та GIT. Щоб отримати першу роботу, потрібно звернутися до компанії веб-розробки. Там, звісно, ​​захочуть оцінити як теоретичні знання, так і практичні навички претендента. Тому важливо заздалегідь підготувати портфоліо із роботами.

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

Відмінності HTML та HTML5

Довгоочікувана п’ята версія HTML побачила світ у 2014 році, через 15 років після HTML4. А її появі передувала драматична історія, гідна детективного серіалу. Справа в тому, що в кінці 90-х років консорціум W3C вважав мову HTML нездатною на подальший розвиток. Свої надії там покладали на ймовірного спадкоємця HTML – мову XHTML.

У 1998 році W3C взагалі припинив підтримку HTML. Але нововведення не всім припали до смаку. З одного боку, більш строгі стандарти XHTML спрощували обробку сторінок автоматичними програмами. З іншого боку – змушували розробників змінити підхід до веб-розробки, вимагали оновлення вже існуючих сторінок і не додавали нової функціональності.

Все це призвело до того, що група програмістів Apple, Mozilla Foundation і Opera Software створила спільноту WHATWG, покликану продовжити розробку стандартів HTML. Члени спільноти сфокусувалися на тому, чого мови розмітки не вистачає для здійснення ідей веб-розробників. Зокрема на покращенні підтримки веб-додатків. Після тривалої паузи W3C все ж таки відмовилася від роботи над XHTML і приєдналася до WHATWG для спільної розробки HTML5, яка подарувала нам безліч нових можливостей.

Підтримка аудіо та відео – з’явилася можливість вставляти медіафайли прямо на веб-сторінку без використання Adobe Flash та Microsoft Silverlight. Для цього використовують нові медіа елементи <audio>, <video>, <source> . При цьому атрибут controls дозволяє відображати елементи керування (запуск, прокручування, регулятор гучності).

Семантична розмітка – у HTML5 з’явилися нові елементи для більш логічного структурування сторінки. Так елемент <header> , як зрозуміло з назви, містить «шапку» з вступними і навігаційними елементами. Елемент <nav> створює блок навігації сайтом. Елемент <aside> визначає додатковий блок збоку основного. А елемент <footer> задає «підвал» сайту з контактною та правовою інформацією.
Малювання на сторінці – тег <canvas> , що з’явився в HTML5, можна використовувати для малювання графіки за допомогою сценаріїв.

Підтримка локального сховища – тепер дані за клієнта можна зберігати у кеші браузера, а й у базі даних SQL. Це покращує безпеку і дозволяє не турбуватися, що користувач зітре файли cookie.

Переваги та недоліки HTML

Переваги

• Широке поширення мови;
• Сумісність файлів з більшістю браузерів;
• HTML безкоштовний і у відкритому доступі;
• Підтримка стандарту консорціум W3C;
• Проста інтеграція з базовими мовами типу PHP або Node.js.

Недоліки

• Здебільшого не годиться для створення динамічних сторінок. Для цього може знадобитися JavaScript або PHP.
• Деякі браузери повільно освоюють підтримку нових функцій.
• Іноді буває складно передбачити реакцію старих браузерів (Internet Explorer 8 і нижче) на нові теги.

Перспективи розвитку

За даними We Are Social, у січні 2020 року у світі було 4,54 мільярда користувачів інтернету. У липні 2022 року їх стало вже 5,03 мільярда. Це 63% населення всього населення планети. Усього за два роки армія споживачів контенту зросла на півмільярда людей.

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