Отже, ти хочеш вивчити HTML.
Чудово.
Це означає, що ти готовий дізнатися, як будуються сайти, чому браузери показують речі саме так, а не інакше, і чому кожен веброзробник хоча б раз у житті писав:
<h1>Привіт, світе!</h1>
і відчував себе дивно могутнім.
HTML — це фундамент інтернету.
Без HTML сайти були б як будинки без стін, книжки без сторінок або кава без кофеїну.
Технічно можливо.
Емоційно неприйнятно.
Що таке HTML?
HTML означає HyperText Markup Language.
Звучить складно.
Але спокійно.
HTML — це просто мова, яку використовують для структурування вебсторінок.
Вона каже браузеру, чим є кожна частина сторінки:
- це заголовок,
- це абзац,
- це посилання,
- це зображення,
- це список,
- це форма,
- це кнопка,
- а це, ймовірно, місце, де хтось забув закрити тег.
HTML насправді не “програмує” поведінку.
Він описує контент.
Думай про HTML як про скелет сайту.
CSS робить його красивим.
JavaScript робить його інтерактивним.
А HTML каже:
“Ось контент. Будь ласка, покажи його як нормальну вебсторінку.”
Дуже спокійно.
Дуже важливо.
Дуже недооцінено.
Чому варто вивчати HTML?
Тому що веброзробка починається з HTML.
Перед тим як створювати красиві layouts, анімації, dashboard’и, вебзастосунки, API і кнопки, які роблять підозріло розумні речі, треба зрозуміти структуру сторінки.
HTML — це перша цеглина.
І так, він може виглядати простим.
Але просте не означає непотрібне.
Будинок теж починається з цеглин.
Якщо, звичайно, ти не будуєш його виключно з упевненості в собі, що я не рекомендую.
HTML допомагає зрозуміти, як насправді працюють сайти.
Він дає контроль над контентом.
Дозволяє створювати справжні сторінки.
І дає чудову можливість сказати:
“Я сам створив цю сторінку.”
Це прекрасне речення.
Навіть якщо перша версія виглядає так, ніби її проєктував сонний принтер.
HTML дружній до початківців
Хороша новина: HTML — одна з найпростіших технологій для старту.
Тобі не потрібна вища математика.
Тобі не потрібен дуже потужний комп’ютер.
Тобі не потрібно розуміти алгоритми, бази даних або чому JavaScript іноді поводиться як єнот усередині клавіатури.
Можна почати зі звичайного текстового редактора і браузера.
І все.
Наприклад:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Моя перша сторінка</title>
</head>
<body>
<h1>Привіт, веб!</h1>
<p>Це моя перша HTML-сторінка.</p>
</body>
</html>
Збережи файл.
Відкрий його в браузері.
Бум.
У тебе є вебсторінка.
Маленька?
Так.
Красива?
Можливо, ще ні.
Твоя?
Абсолютно.
І це важливо.
HTML надає контенту значення
HTML потрібен не лише для того, щоб кинути текст на сторінку.
Він також надає значення.
Наприклад, заголовок — це не просто великий текст.
Це заголовок.
Абзац — це не випадкова група слів.
Це абзац.
Посилання — це не просто синій підкреслений текст зі стародавнього інтернету.
Це зв’язок з іншою сторінкою.
HTML надає контенту структуру й значення.
Це важливо для:
- браузерів,
- пошукових систем,
- інструментів доступності,
- screen reader’ів,
- користувачів,
- і майбутнього тебе, який відкриє файл через три місяці й запитає, що минулий ти мав на увазі.
Хороший HTML робить сторінку легшою для читання, розуміння, стилізації та підтримки.
Поганий HTML іноді теж працює.
Але тримати ноутбук на одному коліні, поки п’єш каву, теж іноді працює.
Це не означає, що це хороша ідея.
HTML-теги: цеглинки сторінки
HTML будується з тегів.
Теги зазвичай ідуть парами:
<p>Це абзац.</p>
Перший тег відкриває елемент.
Другий тег його закриває.
Дуже ввічливо.
Дуже організовано.
Переважно.
Деякі теги не потребують закриття, наприклад зображення:
<img src="kit.jpg" alt="Дуже серйозний кіт">
Браузер читає ці теги й будує сторінку.
Ти пишеш інструкції.
Браузер їх виконує.
Зазвичай.
Якщо щось виглядає дивно, є велика ймовірність, що ти забув закрити тег, і браузер тепер чемно імпровізує.
Браузери багато пробачають.
Іноді занадто багато.
Як учитель, який пропускає тебе далі, але дивиться з розчаруванням.
Що можна створити з HTML?
За допомогою HTML можна створити структуру майже будь-якої вебсторінки.
Можна будувати:
- персональні сторінки,
- пости блогу,
- landing pages,
- сторінки курсів,
- портфоліо,
- документацію,
- прості сайти,
- форми,
- навігаційні меню,
- галереї зображень,
- і першу версію практично будь-якого вебпроєкту.
Сам HTML не зробить сайт елегантним.
Це територія CSS.
Сам HTML не зробить сайт інтерактивним.
Це територія JavaScript.
Але без HTML немає що стилізувати і немає з чим взаємодіяти.
HTML — це сцена.
Усе інше виступає на ній.
Про що цей курс?
Цей курс HTML створений для справжніх початківців.
Не для “початківців”, які вже знають п’ять фреймворків і casually кажуть щось типу:
“Мені просто потрібна стратегія semantic markup для цього компонента.”
Ні.
Для справжніх початківців.
Для людей, які хочуть зрозуміти, як працюють вебсторінки з нуля.
У цьому курсі ти навчишся:
- що таке HTML,
- як побудований HTML-документ,
- як працюють заголовки й абзаци,
- як створювати посилання,
- як додавати зображення,
- як будувати списки,
- як створювати таблиці,
- як працюють форми,
- як inputs збирають інформацію,
- як semantic HTML покращує сторінки,
- і як створювати прості сторінки без відчуття, що інтернет атакує тебе особисто.
Буде практично.
Буде зрозуміло.
І так, буде трохи гумору, бо вивчення HTML не повинно нагадувати читання інструкції до пральної машини в підвалі.
HTML і браузер
Одна з прекрасних речей в HTML — це те, що результат видно дуже швидко.
Ти щось пишеш.
Зберігаєш файл.
Оновлюєш браузер.
Щось з’являється.
Іноді саме так, як ти очікував.
Іноді так, що ти шепочеш:
“Це не те, що я замовляв.”
Це частина навчання.
Браузер — це твоє тестове поле.
Можна експериментувати.
Змінити заголовок.
Додати абзац.
Вставити посилання.
Щось зламати.
Виправити.
Зламати знову.
Виправити краще.
Це не провал.
Це веброзробка робить розминку.
Твоя перша HTML-сторінка
Базова HTML-сторінка зазвичай виглядає так:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мій сайт</title>
</head>
<body>
<h1>Ласкаво просимо на мій сайт</h1>
<p>Тут починається моя подорож у веброзробку.</p>
<a href="https://example.com">Відвідати інший сайт</a>
</body>
</html>
Вона може виглядати скромно, але вже містить важливі частини:
<!DOCTYPE html>каже браузеру, що ти використовуєш сучасний HTML.<html>охоплює всю сторінку.<head>містить інформацію про сторінку.<body>містить те, що люди справді бачать.<h1>створює головний заголовок.<p>створює абзац.<a>створює посилання.
Це початок.
Ще не glamour.
Але дуже потужно.
Як маленький трактор.
Чому HTML досі важливий
Деякі люди думають, що HTML — це “занадто базово”.
Ці люди помиляються.
Ввічливо, але помиляються.
Сучасна веброзробка все ще залежить від HTML.
React використовує JSX, який дуже схожий на HTML.
Next.js рендерить HTML.
Astro генерує HTML.
Браузери розуміють HTML.
Пошукові системи читають HTML.
Screen reader’и залежать від добре написаного HTML.
Кожен сайт, який ти відвідуєш, у якійсь формі побудований на HTML.
Тож так, HTML — це основа.
Але основа як фундамент будинку.
Проігноруй її — і рано чи пізно щось завалиться.
Можливо, layout.
Можливо, твоя впевненість.
Типові помилки початківців
Під час вивчення HTML ти, ймовірно, зробиш кілька класичних помилок.
Можеш забути закрити тег.
Можеш поставити елементи в дивних місцях.
Можеш використати шість тегів <br> замість нормальних відступів.
Можеш додати зображення і дивуватися, чому воно не показується.
Можеш створити посилання, яке не веде абсолютно нікуди.
Це нормально.
Кожен розробник колись писав хаотичний HTML.
Деякі досі пишуть.
Але з практикою ти почнеш писати чистішу й змістовнішу структуру.
Твої сторінки буде легше стилізувати.
Контент матиме більше сенсу.
А браузер матиме менше причин імпровізувати як джазовий музикант у паніці.
Для кого цей курс?
Цей курс для тебе, якщо:
- ти зовсім новачок у веброзробці,
- хочеш створити свій перший сайт,
- хочеш зрозуміти, як побудовані вебсторінки,
- вже пробував HTML, але хочеш зрозуміліше пояснення,
- хочеш вивчити основу перед CSS і JavaScript,
- хочеш курс для початківців, який не ставиться до простих питань як до злочину.
Прості питання — це добре.
Прості питання — це спосіб навчатися.
Кожен експерт колись питав:
“Чому це не видно в браузері?”
Потім оновив сторінку 17 разів і зрозумів, що файл не був збережений.
Традиція.
Чому починати з HTML?
Тому що HTML швидко дає впевненість.
Ти можеш створити щось видиме за кілька хвилин.
Для початківця це дуже важливо.
Ти не просто вивчаєш теорію.
Ти будуєш.
Навіть маленька сторінка приносить задоволення, коли ти зробив її сам.
А коли ти розумієш HTML, CSS стає легшим.
JavaScript стає зрозумілішим.
Фреймворки мають більше сенсу.
Увесь веб починає виглядати менш загадковим.
Все ще хаотичним.
Але менш загадковим.
Це прогрес.
Готовий почати?
HTML — це перший справжній крок у веброзробку.
Він достатньо простий, щоб почати.
Достатньо важливий, щоб ставитися до нього серйозно.
І достатньо корисний, щоб супроводжувати тебе весь час, поки ти створюєш сайти.
Наприкінці цього курсу ти зрозумієш, як побудовані вебсторінки і як створювати власні сторінки з нуля.
Можливо, ти не станеш вебчарівником за одну ніч.
Але перестанеш бачити сайти як магію.
І це вже дуже хороший початок.
Почни курс HTML
Готовий створити свої перші справжні вебсторінки?
Ти можеш почати повний курс HTML тут:
Візьми ноутбук.
Візьми цікавість.
Візьми терпіння.
І так, будь готовий усе одно допомагати бабусі з Wi-Fi.