Що таке теги і як з ними працювати?
Ви вже знаєте, що HTML побудовано на тегах, деякі вже навіть вписали у свою першу сторінку. Зараз розберемо, як теги працюють, щоб ви могли додати на сайт все, що завгодно.
Тег — це те, що описує будь-який об’єкт на сторінці сайту, на мові, яку розуміє браузер. Теж саме, що сказати: «ось тут покажи цю картинку», або «ось тут буде кнопка».
Теги діляться на два типи:
Парні. Їх більшість і вони складаються з таких частин: відкриття тегу, його назва, закриття тегу. Виглядає так.
<p>тут будь-який текст</p>
Одинарний тег. Пишеться в тих же дужках, але в нього немає закриття. Виглядає так:
<br>
Правила роботи з тегами
Всі теги, які має побачити користувач, записуються в великому тегові <body></body>
Сам об’єкт вписується між закритим та відкритим тегом.
Подивіться, як вписано тег <p></p> — поміж тегом <body> та </body>. А поміж <p> та </p> — вписано потрібний нам текст. З тегом <h1></h1> те ж саме.
Нюанси
Браузер їх читає згори до низу. Якщо написати спочатку тег для картинки, а потім текст — то браузер їх в такому порядку і покаже. Якщо ті ж теги поміняти місцями, то спочатку йтиме текст, а потім картинка.
Якщо парний тег не закрити — браузер його не зрозуміє і просто нічого не зобразить. Сайт буде працювати, сторінка відкриється, але потрібного об’єкту не буде.
Html не бачить відступів, якщо вони не прописані тегами. Ми можемо вписати декілька рядків тексту, але якщо не розділимо його абзацами, то браузер зобразить їх в один рядок. Один з варіантів — зробити перенесення рядка одинарним тегом <br>.
Вивчимо кілька тегів
Теги є для всього. Заучувати їх немає ніякої потреби. В інтернеті є багато інструкцій, списків та бібліотек тегів. Якщо ви зрозумієте принцип, то зможете тегами зобразити все, що завгодно. Наприклад, забити в гугл «як створити таблицю в html» — і зможете просто повторити приклад.
Щоб доробити нашу сторінку з попереднього уроку, кілька тегів все ж вивчимо.
Заголовок. Їх буває декілька: <h1></h1> — найбільший заголовок, <h6></h6> — найменший. Але зазвичай використовуються лише від h1 до h3.
Абзац. <p></p>. В Середині цього тегу буде потрібний нам текст, якій зверху та знизу виділяється відступом.
Перенесення рядка. <br> Це одинарний тег, який вписується там, де треба зробити перенесення рядка. Без цього рядок буде до нескінченності продовжуватися.
Жирний текст — <b>…</b>
Курсив — <em>…..</em>
Підкреслений текст — <u>…</u>Перекреслений текст — <strike>….</strike>
Списки
Для створення одного об’єкту треба декілька тегів. Один з таких — це список.
Нумерований список
Складається з двох тегів <ol> та вписаного тегу <li>. Виглядає так:
<ol>
<li>перший пункт</li>
<li>другий пункт</li>
<li>третій пункт</li>
</ol>
Маркований список.
Будується за тою ж структурою, але іншими тегами:
<ul>
<li>пункт</li>
<li>пункт</li>
<li>пункт</li>
</ul>
Метатеги
Це теги, які вписуються у налаштування сайту.
Як ось цей:
<meta charset=”UTF-8″> — метатег, який пояснює браузеру, які символи є на сайті. Але, як бачите, тут є ще одна частина, а саме charset=”UTF-8″ — це атрибут. Ми їх вивчимо пізніше. Цей тег і атрибут завжди треба прописувати в будь-якій html-сторінці. Без цього тегу замість тексту може бути нісенітниця з дивних символів. Таке можна побачити, якщо відкрити якийсь невідомий документ через Microsoft Word.
В тег <head></head> можна вписати ще багато метатегів. Наприклад, якщо треба зробити, щоб всі посилання сторінки відкривалися в іншому вікні. Чи вписати ключові слова, по якому пошуковий робот знаходитиме сторінку.
Вкладеність тегів
Наприклад, у нас є абзац тексту. В ньому мають бути декілька рубрикаторів: товстий текст, підкреслений та зачеркнутий. Для цього ми використовуємо вкладеність тегів: тобто вписуємо один в інший. По такому ж принципу, як в тег <html> вписано <body> та <head>.
Наприклад:
<p>Тут просто випадковий текст</p>
Зробимо слово «текст» товстим шрифтом. Для цього впишемо навколо слова тег <b>:
<p>Тут просто випадковий <b>текст</b></p>
Помітили, як ми закрили теги? Відкрили великий тег (тобто, тег <p>), в ньому відкрили маленький тег (<b>), потім закрили маленький тег, потім закрили великий тег.
Наприклад, нам треба в тому ж тексті підкреслити якесь слово.
<p>Тут <u>просто</u> випадковий <b>текст</b></p>
А тепер хардкор 🙂 Зробимо слово «просто» одночасно підкресленим та товстим. Як це буде виглядати?
<p>Тут <u><b>просто</b></u> випадковий <b>текст</b></p>
Спрацювало правило вкладеності: спочатку закрили зовнішній тег, а потім внутрішній. Так то тесту можна додавати купу тегів.
