Давайте тепер вивчимо основні теги, які
використовуються на сторінці. У прикладах далі
я для простоти не наводитиму структуру
всієї сторінки, вважайте, що ми завжди працюємо
всередині тегу body, якщо не вказано інше.
Абзаци
Одним із основних елементів сторінки є абзаци. Їх можна порівняти з абзацами у книзі - кожен абзац починається з нового рядка і має так званий червоний рядок (це коли перший рядок тексту абзацу небагато відступає праворуч). За замовчуванням червоного рядка немає, але його легко зробити (про це трохи пізніше).
Абзац створюється за допомогою тега <p>
таким чином:
<p>
Це абзац.
</p>
<p>
Це ще один абзац.
</p>
<p>
І це один абзац.
</p>
Створіть на вашій сторінці 5 абзаців
з якимось текстом. Подивіться, як ці абзаци будуть виглядати у браузері.
Заголовки сторінки
Крім абзаців, важливе значення на сторінці мають заголовки. Їх також можна порівняти із заголовками з книги - кожен розділ має свій заголовок (назва цього розділу) і розбита на параграфи, які також мають свої заголовки. Ну, а основний текст сторінки розташовується в абзацах.
Заголовки створюються за домомогою тегів <h1>,
<h2>, <h3>, <h4>,
<h5>, <h6>. Вони мають різну
степінь важливості. В заголовку h1 слід
розташовувати назву всієї HTML сторінки,
в h2 - назву блоків сторінки, в
h3 - назва підблоків і так далі.
Всі заголовки за замовчуванням жирні та мають різний розмір (це можна змінити через CSS, але це пізніше). Для прикладу зробимо заголовки всіх рівнів:
<h1>Заголовок h1</h1>
<h2>Заголовок h2</h2>
<h3>Заголовок h3</h3>
<h4>Заголовок h4</h4>
<h5>Заголовок h5</h5>
<h6>Заголовок h6</h6>
Скопіюйте наведений вище код собі та запустіть його у браузері. Подивіться, як відрізняються розміри заголовків.
Зробіть заголовок h1. Нижче зробіть
заголовок h2, а під ним - абзац з
текстом. Після абзаців зробіть ще один
заголовок h2, а під ним - 2
абзацу з текстом.
Жирний
Ви вже знаєте, що заголовки за замовчуванням
жирні. Однак, можна зробити жирним
і звичайний текст - достатньо взяти його в
тег <b>. Дивіться приклад:
<p>
Це звичайний текст, а це <b>жирний</b> текст.
</p>
Перевірте роботу тега <b> на вашій сторінці.
Курсив
Крім жирного можна зробити і курсив
за допомогою тега <i>:
<p>
Це звичайний текст, а це <i>курсивний</i> текст.
</p>
Перевірте роботу тега <i> на вашій сторінці.
Зауваження
Зверніть увагу, що теги <b>
і <i> слід використовувати всередині
будь-якого іншого тега, наприклад абзацу.
У цьому випадку абзаци створюють загальну структуру
сторінки (абзаци та заголовки), а вказані
теги роблять жирним або курсивом окремі
частини тексту.