Перш ніж зрозуміти, що таке HTML, давайте для початку розберемося, що таке вебсайт? Вебсайт — це те, що ви бачите в Інтернеті, наприклад, зображення, відео, аудіо та інші дані. Якщо ви хочете поділитися своїм бізнесом або чимось, що побачать люди по всьому світу, одним із способів це зробити є створення вебсайту. І основа цього вебсайту — це HTML.
HTML — це стандартна мова розмітки. Це не є мовою програмування. HTML означає Hyper Text Markup Language (Мова розмітки гіпертексту). За допомогою HTML створюється структура вебсторінки. HTML складається з набору тегів, які визначають структуру вебсторінки.
Ці маркувальні (Markup) теги призначені для того, щоб вказати, як елементи вебсторінки мають виглядати. Тім Бернерс-Лі створив першу версію HTML у 1993 році, а останнє оновлення, HTML5, було випущене в 2010 році.
Що таке тег?
Тег — важлива частина HTML, яка вказує браузеру, як відображати елемент. Теги зазвичай записуються у вигляді < >.
Приклад:
<h1>: тег заголовка —<h1><p>: тег абзацу<img>: тег зображення
Існує два типи тегів:
- Відкриваючий тег: наприклад,
<h1> - Закриваючий тег: наприклад,
</h1>
Деякі теги, такі як <img>, є самозакриваючими, і не мають закриваючого тегу.
Що таке HTML-елемент?
HTML-елемент — це основна частина, яка створює контент або структуру на вебсторінці. HTML-елемент зазвичай складається з контенту, який знаходиться між відкриваючим і закриваючим тегами.
Це елемент абзацу.
Тут <p> — відкриваючий тег, </p> — закриваючий тег, а між ними міститься контент "Це елемент абзацу".
Що таке атрибут?
Атрибут — це додаткова інформація до тегу, яка визначає властивості або поведінку елемента. Атрибути зазвичай пишуться всередині відкриваючого тегу.
Тут:
- src (source): вказує на місцезнаходження зображення.
- alt (alternative text): альтернативний текст для зображення.
- width: визначає ширину зображення.
Атрибути завжди пишуться у форматі name=value, що означає, що в нього є ім’я та значення.
Основні теги HTML
1. Оголошення документа (DOCTYPE): визначає, що документ є версії HTML5.
2. <html> тег: цей тег містить увесь HTML-документ.
3. <head> тег: цей тег містить метаінформацію, таку як заголовок сторінки, посилання на стилі, скрипти тощо.
4. <body> тег: цей тег містить основний контент, який відображається в браузері.
Welcome!
This is the content of the page.
5. Теги заголовків: заголовки використовуються від <h1> до <h6>. <h1> — найбільший заголовок, а <h6> — найменший.
Main Heading
Sub Heading
6. Теги для форматування тексту
Це тег абзацу.
// використовується для написання абзацу
this is bold tag // тег для виділення тексту жирним
this is strong tag // також для жирного, але має значення
this is italic tag // тег для написання курсивом
this is em tag // також курсив, але має значення
this is small tag // тег для зменшення шрифта
Click Me // це тег кнопки
7. Тег для посилань
Visit Example
href = вказує на місце, куди буде відправлений користувач.
Якщо ви хочете, щоб посилання відкривалося в новій вкладці, можете додати атрибут `target="_blank"`
**8.
Інлайн елементи vs Блок елементи
Inline Elements
Ці теги займають тільки ту ширину, яка необхідна для контенту, тому вони не створюють новий рядок. Наприклад: <span> <a> <strong>
Block Elements
Ці теги займають всю доступну ширину, тому наступні елементи не можуть розташовуватися поруч з ними. Наприклад: <div> <p> <section>
Нижче наведено деякі поширені Block Tags та Inline Tags:
| **Block Tags** | **Inline Tags** |
|------------------------|-------------------------|
| `<div>` | `<span>` |
| `<section>` | `<a>` |
| `<header>` to `<footer>` | `<strong>` |
| `<article>` | `<em>` |
| `<nav>` | `<img>` |
| `<p>` | `<code>` |
| `<ul>` | `<abbr>` |
| `<ol>` | `<b>` |
| `<li>` | `<i>` |
| `<h1>` to `<h6>` | `<u>` |
9. Тег списку
// незамовлений список
Item 1
Item 2
// замовлений список
Item 1
Item 2
// li => означає елемент списку
10. HTML мультимедіа (Зображення, Аудіо, Відео)
Зображення:
src = тут вказується місцезнаходження зображення, яке може бути як в Інтернеті, так і на вашому комп'ютері. Якщо зображення в Інтернеті, просто вказуйте пряме посилання, а якщо на комп'ютері, то використовуйте шлях на зразок ././ для доступу до місця.
Аудіо:
Your browser does not support the audio element.
Відео:
Your browser does not support the video tag.
11. HTML форми та поля вводу
Форми використовуються для отримання даних від користувачів. Різні теги вводу форми:
Name: Email: Password: Age: I agree to the terms and conditions Gender: Male Female Date of Birth: Upload File: Submit
12. HTML таблиці
Name Age John 25
Це були основи HTML. Якщо ви добре зрозумієте ці концепції та практикуватиметесь, іншаллах, вам не доведеться переживати щодо HTML. Наступного разу я розповім про CSS, тож не забудьте підписатись.
Перекладено з: এইচটিএমএল (HTML) কি ? | HTML এর যতটুক আপনাকে জানতেই হবে