1. Оформлення тексту
Давайте продовжимо вивчення HTML...
Параграфи (p)
Тег <p> використовується для створення параграфів (абзаців) тексту. Параграфи допомагають розбити текст на логічні блоки, покращуючи читабельність та сприйняття інформації.
Приклад:
<p>Це перший параграф тексту. Він містить деяку кількість інформації.</p>
<p>Це другий параграф тексту. Він відокремлений від першого параграфу.</p>
Жирний текст (b)
Тег <b> використовується для виділення тексту напівжирним (bold) шрифтом. Це дозволяє підкреслити важливість певних слів або фраз.
<p>Це <b>важливий</b> текст.</p>
Курсивний текст (i)
Тег <i> використовується для виділення тексту курсивом (нахиленим шрифтом, italic). Він часто застосовується для позначення термінів, назв книг, іноземних слів тощо.
Приклад:
<p>Це <i>термін</i>, який виділено курсивом.</p>
2. Заголовки (h1 - h6)
Заголовки в HTML використовуються для структурування контенту і створення ієрархії заголовків на сторінці. Існує шість рівнів заголовків, де <h1> є найважливішим, а <h6> — найменш важливим.
-
<h1>— Найважливіший і найбільший заголовок. Зазвичай використовується для головного заголовку сторінки. -
<h2>— Використовується для підзаголовків, які слідують за<h1>. -
<h3>— Рівень заголовку нижче<h2>. -
<h4>— Рівень заголовку нижче<h3>. -
<h5>— Рівень заголовку нижче<h4>. -
<h6>— Найменш важливий і найменший заголовок.
Приклад:
<h1>Головний заголовок сторінки</h1>
<h2>Підзаголовок рівня 2</h2>
<h3>Підзаголовок рівня 3</h3>
3. Додаткові теги в head-документі
Є теги, які ви можете в майбутньому зустріти в HTML-прикладах, хочу кілька слів сказати про них:
1. Тег <title>
Тег <title> задає назву сторінки, яка відображається на вкладці браузера. Це перше, що бачить користувач при відкритті сторінки. Майже завжди присутній на всіх сторінках. За замовчуванням додається HTML-редактором, але для навчальних проектів особливої цінності не представляє.
2. Тег <meta charset="UTF-8">
Тег <meta> всередині <head> задає кодування символів для документа. UTF-8 — це найпоширеніше кодування, яке підтримує більшість мов світу. Про кодування ми розкажемо трохи пізніше.
3. Тег <meta name="viewport" content="width=device-width, initial-scale=1.0">
Цей тег також знаходиться всередині <head>. Він забезпечує правильне відображення сторінки на мобільних пристроях. Задає ширину області перегляду (viewport) рівною ширині екрана пристрою та початковий масштаб сторінки.
4. Тег <link rel="stylesheet" href="styles.css">
Тег <link/> підключає зовнішній CSS-файл для стилізації сторінки. Атрибут rel="stylesheet" вказує, що це таблиця стилів, а href="styles.css" задає шлях до файлу стилів.
5. Тег <script src="script.js" defer></script>
Тег <script> підключає зовнішній JavaScript - файл для додавання інтерактивності на сторінку. Атрибут src вказує шлях до файлу скрипта, а defer говорить браузеру, що скрипт має бути виконаний після завантаження HTML - документа.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ