Шо то ше за HTML?!.

Як то кажуть в народі — “без html-ного коду нема веб-девелоперського роду”. Будь-яка сторінка в інтернеті спокійно може існувати без CSS та JavaScript, але без HTML — це просто текст. То що ж робить документ саме html-документом, а не просто звичайним масивом слів? Давайте спробуємо розібратись, і спочатку зануримось в темні глибини історії і заглянемо в самий початок відомої історії людства, а саме на світанок ери інтернету — 1980-і роки.

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

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

А поки — надворі 80-і роки минулого століття, і усе, що пов’язане з комп’ютерами, видається чимось фантастичним та здатним відкрити людству шлях в незвідане майбутнє, в якому настане процвітання та всеохоплююче щастя через вільний доступ до інформації та фактів, і нікому ніколи в голову не прийде використовувати найвище досягнення людства аби показувати іншим людям 15 розмитих фоток як смішно цибає його собака. Отже, електронні документи існували вже досить тривалий час, і навіть використовували якісь різні мови розмітки для різних задач, але вони усе ще залишалися ізольованими один від одного, будучи просто текстовими документами, розбитими на якісь блоки. Дуже близько до HTML, але водночас ще надзвичайно далеко, адже окрім спільної ідеї “структури” документу, ці підходи відрізняла ще одна, надзвичайно проста, але, тим не менш, надзвичайно потужна та визначна ідея, що змінить світ цифрової інформації раз і назавжди.

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

Автором ідеї гіпертексту є Тім Бернерс-Лі — англійський науковець, науковий співробітник Оксфордського університету та професор Масачусетського Технологічного Інституту (той самий MIT). І саме він 1989 року запропонував ту саму ідею World Wide Web — всесвітньої інформаційної павутини, побудованої на засадах гіпертексту. В кінці 1990 року він, в стінах CERN, створив найперший в світі веб-сервер, що був запущений на комп’ютері NeXT, та найперший в світі браузер для демонстрації своїх ідей. І, хочете вірте, хочете ні, але на корпусі комп’ютера Тім написав червоним чорнилом “Ця машина — сервер. НЕ ВИМИКАТИ”. Ось так і зародився інтернет, яким ми його знаємо.

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

А що ж HTML, запитаєте ви? А до нього лишалося ще трошки менше року. Уже 1991 Тім представив концепцію HyperText Markup Language, яку він базував на SGML — складній системі, з якої він взяв основні ідеї для синтаксису, маючи за ціль створити схожу мову розмітки, але максимально просту і зрозумілу для звичайної людини. І саме Тім того ж року створив найпершу в світі веб-сторінку. І одним з найбільших чудес інтернету є те, що ми й досі маємо можливість переглянути цей артефакт з минулого і побачити його рівно так, як було задумано автором. До вашої уваги — найперша в світі веб-сторінка!

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

І ось тут ми підкрадаємось до основної задачі HTML — це, власне, форматування документу. Що це таке? Це розбиття інформації на певні секції, що відповідають за ті чи інші логічні структурні блоки, що дає програмі, яка обробляє документ, зрозуміти який саме вид інформації міститься в тій чи іншій частині. Це блоки тексту, тобто параграфи, це заголовки, це списки, це зображення, таблиці, посилання і тому подібне — таким чином будь-який браузер завжди розуміє що є що, і застосовує певні правила відображення, а також отримує додаткові можливости для обробки такої інформації. Правильно відформатовний документ буде вірно відображений на будь-якій платформі та поводитиметься в очікуваний спосіб.

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

Теги

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

  • Відкриваючий тег <p>
  • Закриваючий тег </p>
  • Самозакритий тег <img />

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

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

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

<p>Шо по русні? Русні <b>пизда</b></p>

В даному прикладі всередині речення ми вирішили візуально підсилити головну думку тексту, і додали новий елемент всередину елементу p, таким чином додатково розмітивши текст. Виглядатиме це, за замовчанням, ось так:

Шо по русні? Русні пизда

Такі теги, які створюють елементи, що можуть містити в собі інші елементи, називаються парними. А ще існують, очевидно, непарні теги, тобто такі, як самозакриті елементи, наприклад, <img /> або <input />, всередині яких нічого не може бути в силу того, як саме браузер обробляє такі елементи.

Елементи

Я уже декілька разів згадав термін елемент, але так і не пояснив, що це за дивина, адже всі навкруг говорять про html-теги, а елементи то щось з хімії, вірно? Ніт. Так от, html-елемент, це вже, по суті, завершена структурна одиниця (ич, як завернув), і сам документ складається якраз з цих одиниць, елементів. Той самий параграф є елементом тексту, з якого той текст складається, а теги — тільки інструмент, щоб позначити, розмітити цей елемент, вказавши на його початок та кінець. Якщо ми повернемось до використаної раніше цитати про перспективи загарбника на українській землі, то в ній ми знайдемо два елементи:

 1                     2        2   1
<p>Шо по русні? Русні <b>пизда</b></p>

Перший елемент — це параграф, який скаладається з:

Відкриваючий тег...<p>
Вміст елементу.....«Шо по русні? Русні <b>пизда</bЗакриваючий тег....</p>

А другий — вкладений, b, що знаходиться всередині p:

Відкриваючий тег...<b>
Вміст елементу.....«пизда»
Закриваючий тег....</b>

Таким чином і створюється структура html-документу — комбінування різних елементів, що можуть розміщуватися поруч, як от елементи списку, тоді вони називаються siblings, або ж сусідні елементи:

<li>1430 танків</li>
<li>3484 ББМ</li>
<li>715 гармат</li>
<li>226 РСЗВ</li>

Або ж мати різну вкладеність, тоді вони називаються (…кхм) вкладеними, і поділяються на батьківські та дочірні:

<ul>
  <li>1430 танків</li>
  <li>3484 ББМ</li>
  <li>715 гармат</li>
  <li>226 РСЗВ</li>
</ul>

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

А в наступному прикладі ми бачимо обидві форми сусідсько-родинних стосунів на різних рівнях:

<h2>Втрати ворога на 12.06.22</h2>
<ul>
  <li>1430 танків</li>
  <li>3484 ББМ</li>
  <li>715 гармат</li>
  <li>226 РСЗВ</li>
</ul>

Атрибути

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

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

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

<p title="Русні пизда">Що по русні?</p>

Спробуйте навести курсор на наступний текст і вам покаже фокуса! (якщо ви переглядаєте з мобільного пристрою, нажаль, ніякого фокуса вам не вийде, смартфони забрали всю магію з html).

Що по русні?

А прикладом специфічних атрибутів є href для елементу a (це якраз оспіване в легендах гіперпосилання), або src для img:

<a href="http://rusnipyz.da" title="Котик каже мяу, блядь">
  <img src="kotyk.jpg"/>
</a>

Спробуйте натиснути на котика і розвеселити його!

Тепер, коли настрій котика покращився, давайте усе-таки розглянемо, як же писати ті атрибути, щоб усе працювало правильно. Візьмемо, до прикладу, відкриваючий тег <a href="http://rusnipyz.da"> і розберемо його на частинки.

  1. По-перше, ми бачимо, що після імені тегу іде пробіл, і це — обов’язково! Ну бо тоді браузер подумає, шо ви хочете використати елемент ahref а не a, а він про таке в жизні не чув. Тому розмовляйте з браузером чітко і зрозуміло, не ковтаючи слова;
  2. Далі ми бачимо безглуздий набір літер href, це і є назва атрибуту (в даному конкретному випадку це не кіт пройшовся клавіатурою, це скорочення від hypertext reference);
  3. Наступним іде символ =, яким ми вказуємо браузеру, що ми хочемо призначити атрибуту певне значення;
  4. І після символу присвоєння, в лапках, іде, власне те саме значення, яке ми хочемо призначити, тут — http://rusnipyz.da. Якщо значення просте і не містить ніяких чудернацьких символів, без пробілів і таке інше, то, в принципі, можна лапки і не ставити, але хорошою практикою є усе-таки писати всі значення в лапках. Про всяк;
  5. Далі іде наступний атрибут, що підкорюється рівно тим самим правилам. Атрибутів у елемента може бути скільки нам заманеться, і якщо браузер знає про них, то застосує максимально можливу кількість.

Висновок

Отже, давайте підіб’ємо проміжні висновки:

  1. HTML — мова для форматування документів, що використовується для створення веб-сторінок;
  2. Складається з тегів, які, в свою чергу, складаються в елементи;
  3. Теги бувають парні і непарні;
  4. Елементи, що складаються з парних тегів, можуть містити інші елементи;
  5. Елементи з непарних тегів сумні і не пускають у свій внутрішній світ інші елементи;
  6. Всі елементи можуть мати атрибути, які пояснюють браузеру додаткову інформацію про елемент;
  7. You’re breathtaking!

Рецензовано Віталієм Рубаном

Вичитано на помилки моєю дружиною