У цій статті ми починаємо подорож створення веб-сайтів, і для початку розглянемо основи HTML — мови, яка є базою для створення веб-сторінок.
Що таке HTML?
HTML, або HyperText Markup Language, є основою для створення веб-сторінок. Простими словами, HTML визначає структуру веб-сторінки, організовуючи її контент. Наприклад, коли ви читаєте статтю в газеті, ви бачите заголовки, підзаголовки, абзаци. HTML працює так само — він організовує інформацію на веб-сторінці, щоб вона була зрозуміла.
Що таке HyperText? Це зв'язок між різними веб-сторінками. Наприклад, якщо ви клацнете на посилання "Ланкадіп", то перейдете на нову сторінку. Це і є HyperText.
Ось як виглядає зв'язок між веб-сторінками. У зображенні кілька сторінок з'єднані посиланнями
Як працює HTML?
HTML використовує теги для створення структури сторінки. Теги — це спеціальні маркери, які визначають різні елементи на сторінці. Наприклад, щоб додати заголовок на веб-сторінці, використовують тег ~~~
~~~. Щоб додати абзац, використовують тег ~~~
~~~. Є певні правила для написання тегів, які називаються синтаксисом і семантичними правилами, але не хвилюйтеся, ми будемо вивчати їх поступово.
Історія HTML
HTML пройшов довгий шлях розвитку, і ось кілька етапів:
HTML 1.0 (1993) — перші веб-сторінки, дуже прості.
HTML 2.0 (1995) — додали нові функції та покращили основні.
HTML 3.0 (1995) — став більш потужним, але браузери почали працювати повільніше.
HTML 4.01 (1999) — це була популярна версія перед HTML5.
HTML 5 (2012) — нова, покращена версія, яка стала стандартом для створення сучасних веб-сайтів.
HTML можна порівняти з будівництвом будинку. Як з часом покращується дизайн і функціональність будинку, так і HTML з кожною версією став більш функціональним та універсальним.
HTML Tags
HTML теги — це слова, написані між кутовими дужками (< і >). Більшість тегів має пару — початковий (opening tag) і кінцевий (closing tag). Наприклад:
~~~~~~ і ~~~~~~ — ці теги охоплюють всю сторінку.
~~~
Проте деякі теги не мають кінцевого тегу. Їх називають самозакриваючимися тегами. Наприклад:
~~~
~~~ — додає розрив рядка.
~~~~~~ — вставляє зображення.
Ці теги працюють, як розділові знаки в реченнях, надаючи структурі сторінки вигляд і організуючи її.
HTML Attributes
Атрибути — це додаткові дані для тегів, які пишуться в opening tag. Це може бути щось на зразок ~~~href="https://www.uom.lk"~~~. Наприклад:
<a href="https://www.uom.lk">University of Moratuwa</a>
Структура HTML5 документа
Тепер давайте розглянемо, як виглядає стандартний HTML5 документ. Ось що потрібно:
~~~<!DOCTYPE html>~~~ — вказує, що це HTML5 документ.
~~~~~~ — основний тег для документа.
~~~
~~~~~~ — це основна частина сторінки, де зображення, текст, заголовки та інші елементи.
Ось приклад:
~~~<!DOCTYPE html>~~~
~~~~~~
~~~
~~~
~~~~~~
~~~~~~
~~~
This is a simple HTML5 document.
~~~
~~~~~~
~~~~~~
Цей код визначає HTML5 документ, який містить заголовок і абзац тексту.
CSS — це те, що визначає вигляд вашого сайту (кольори, форму). У майбутньому ми детально розглянемо CSS. Поки що ви можете подивитися на це зображення для кращого уявлення.
Різниця між HTML та CSS
JavaScript додає інтерактивність (функції) на ваш сайт. Ми також розглянемо це пізніше.
Коли ви створюєте HTML-документ, рекомендується почати з ~~~~~~ тегу. Веб-сайт — це набір документів, які можна переглядати через браузер. Веб-сайт складається з двох основних частин: frontend (видима частина) та backend (серверна частина).
📌 Найпоширеніші питання про HTML
-
“Чи можна отримати результат без тега ~~~~~~?”
Так, деякі браузери можуть відобразити сторінку і без цього тега, але для правильної структури документа він необхідний. Це забезпечує сумісність і є кращою практикою. -
“Що означає ~~~~~~?”
Цей тег вказує браузеру, що документ відповідає стандарту HTML5. Він також допомагає браузеру правильно відображати сторінку. -
“Якщо можна додавати стилі в HTML, то що таке CSS?”
В HTML також можна додавати стилі, але CSS спеціально призначений для цього. Він дає більше можливостей для створення гарних, організованих і гнучких дизайнів. Тому краще використовувати HTML для контенту, а CSS для стилів. -
“Чи можна додавати функції в HTML?”
Ні, HTML призначений лише для структури сторінки. Для додавання функцій потрібно використовувати такі мови, як JavaScript. -
“Чи чутливий до регістру HTML?”
Ні, теги в HTML не залежать від регістру. Проте, для кращої практики рекомендується використовувати малі літери. -
“У чому різниця між HTML5 та HTML4?”
HTML5 — це оновлена версія HTML, яка полегшує створення сучасних веб-сайтів, додаючи нові елементи та підтримку мультимедіа. -
“Чи можна зробити сайт мобільним дружнім?”
Так, за допомогою CSS та концепції адаптивного дизайну можна створити сайт, який добре виглядатиме на мобільних пристроях. -
“Яке розширення у HTML-файлів?”
Файли HTML зазвичай мають розширення .html або .htm, при цьому .html використовується частіше. -
“Чи можна додавати коментарі в HTML?”
Так, коментарі в HTML не будуть видно в браузері та не виконуються.
<!-- This is a comment -->
Сподіваюся, що ця стаття допомогла вам отримати базове уявлення про HTML. Якщо у вас є питання або щось не зрозуміло, залиште коментар.
Happy Coding!
Перекладено з: HTML Basics: ඔබේ පළමු වෙබ් පිටුව සාදමු!