Мова програмування HTML, або мова гіпертекстової розмітки, відповідає за структуру сторінки сайту. Спочатку він створювався для обміну науковою і технічною інформацією. HTML замислювався для створення і форматування структури документа. Інформація повинна була однаково відображатися в різних браузерах, тому в Консорціум Всесвітньої павутини W3C розробили єдиний стандарт мови HTML, куди входить опис допустимих позначок і особливості їх використання. Поточна версія стандарту HTML5.1. Всі сучасні браузери прагнуть до підтримки актуальних стандартів.
З чого складається мова HTML
За допомогою мови програмування HTML створюється розмітка веб-сторінки та її розподіл на смислові блоки. Мова CSS – це правила для опису зовнішнього вигляду і розташування цих елементів у документі, написаному на HTML. У процесі відтворення сторінки браузер читає файли з розміткою і оформленням, об’єднує отриману інформацію і видає кінцевий результат у вигляді сайту.
Кожна веб-сторінка наповнюється контентом – текстами, зображеннями та інтерактивними елементами. Текст на сторінці повинен легко читатися користувач, тому потрібна структура: виділення заголовків, поділ на абзаци, цитати, розстановка акцентів на смислових частинах, наявність списків для зручності сприйняття інформації. Мова програмування HTML оформляє ці елементи за допомогою спеціальних міток, тегів. Ці підписи можуть бути поодинокими або парними.
Спосіб написання тегів
Кожен тег складається з відкриваючою і закриваючою трикутної дужки, між якими знаходиться його буквене значення. Наприклад, для завдання адреси посилання використовується тег <a>. Назвою тега найчастіше стає скорочення від назви його функції англійською мовою. Всього їх близько 100. Програмування HTML для початківців не включає в себе вимоги обов’язкового знати всі. Найбільш часто в розмітці використовується не більш 20% всіх існуючих тегів.
Парні теги
Веб-сторінка складається з інформації, яка повинна бути представлена в зручному для користувача вигляді. При HTML-програмування з нуля важливо це враховувати. Спеціальні теги для розмітки і структурування тексту полегшує візуальне сприйняття великого обсягу інформації. З їх допомогою виділяють смислові розділи, розставляють акценти і спрощують розуміння тексту. Наприклад, парний тег <p> виділяє параграф або абзац. Він складається з відкриваючою і закриваючою частини. Перша частина розташовується на початку виділеного елемента, а друга – в кінці. У закрывающем тегу перед буквеної частиною ставиться знак «/». Правильне написання тега параграфа виглядає так: <p>абзац</p>. Контент, укладений в тег <p>, виділяється відступами. Для виділення довгих цитат застосовується парний тег <blockquote>. У нього є своє візуальне оформлення – навколо елемента створюються відступи, сам текст полягає в лапки. Важлива ділянка контенту, на якому робиться акцент, виділяють за допомогою тега <strong>.
Поодинокі теги та коментарі
Парні теги використовуються для виділення ділянок тексту, а за допомогою одиночних додаються декоративні об’єкти, наприклад, картинки. У поодиноких тегів немає закриває частини. До появи нового стандарту HTML5 після букв ставився знак «/». Але тепер використання слеша стало необов’язковим. Поодинокі теги застосовуються для елементів оформлення. Наприклад, тег <hr> – одиночний, застосовується для розриву рядка і перенесення елемента на новий рядок. Тег <hr> зустрічається при розмітці віршів і пісень. При програмуванні сайту HTML, використовують спеціальний тег, який допомагає приховати частину коду – коментар. Закомментированный код не відображається браузером, що зручно використовувати для перевірки працездатності того чи іншого ділянки розмітки. Коментар записується так: <!– текст –>.
Особливості розмітки заголовків
Для виділення у тексті заголовків різного рівня в HTML-програмування застосовуються парні теги <h1> <h6>. Тег <h1> розмічають заголовок першого рівня – найбільший і найчастіше єдиний на сторінці. Він визначає зміст сайту. Інші теги використовують для розмітки підзаголовків. Чим більше цифра в тезі, тим менше буде розмір укладеного в ньому тексту. Раніше присутність декількох тегів <h1> в документі вважалося неприпустимим, але з появою нових стандартів це вже не критична помилка. Єдине зауваження: тег <h1> не варто використовувати для збільшення шрифту простого тексту. Для зміни розмірів шрифту застосовується CSS. Мова CSS складається з селекторів і властивостей. Селектор вибирає елемент на сторінці, а властивість описує ефект, який до неї застосовується. Підзаголовки виділяються тегами <h2>.
Атрибути HTML-тегів
Іноді браузеру необхідно повідомити додаткову інформацію про вміст тега або поставити йому додаткові властивості. Наприклад, для того, щоб зображення з’явилося на сторінці потрібно вказати посилання на нього. Для цієї мети використовуються атрибути тегів. Вони задаються в початковому тегу через пробіл і складаються з двох частин: назви і значення, і ніяк не виділяються на сторінці. Значення атрибута записується після символу «=» у подвійних лапках. Наприклад, для тега цитати використовується два: class і cite, а для посилань href.
Атрибути class і id
Атрибут class – універсальний і дуже часто застосовується у верстці. Він може задаватися всім існуючим тегам в мові HTML. Класи використовуються для опису властивостей елементів за допомогою CSS. Атрибут cite використовується тільки для тега <blockquote>. Його значення – джерело цитати. Cite повідомляє пошуковим системам, хто автор вислову. Інший поширений атрибут – id або ідентифікатор, який також використовується при оформленні елементів за допомогою CSS. Вони також універсальні і застосовуються до будь-тегам, але створення селекторів по id вважається поганим тоном у верстці. Ідентифікатор може бути на сторінці тільки один, тому в коді йому буде присвоюватися найбільша специфічність. Атрибути class і id схожі за описом і дії, але служать для абсолютно різних цілей. Id допомагає задати тегу унікальне ім’я, яке потім можна посилатися. Атрибут Class – один з найважливіших для мов програмування HTML та CSS. З його допомогою в CSS застосовуються стилі. Класів у тега може бути кілька, вони задаються через пробіл і допомагають керувати зовнішнім виглядом елемента.
Атрибути для посилань і зображень
Посилання задається парним тегом <a> з атрибутом href, в якому прописується адресу, куди вона повинна вести. На сторінці можна розмістити посилання зі значенням атрибута href, в якому буде прописаний id елемента. Значення вказується через знак #: <a href=”#значение_id”>Назва посилання</a>. Такі посилання називаються якірними. З їх допомогою можна переміститися в певну область межах однієї сторінки. Для одиночного тег вставки зображення <img> обов’язковими атрибутами є src і alt. Перший задає шлях до картинки, а другий – її опис, який відображається браузером, якщо вона не завантажилася.
Найпростіша структура HTML-сторінки
Кожна сторінка, написана на мові програмування HTML, починається з декларації типу документа або «доктайпа». Вона використовується браузером для визначення версії HTML. У новій специфікації «доктайп» виглядає так: <!DOCTYPE html>. Раніше використовувалася більш складна запис. Далі на сторінці розташовуються як мінімум три основних тега:
- <html> – контейнер для вмісту сторінки;
- <head> – сховище інформації, яка полегшує браузеру працювати з даними;
- <body> – сховище вмісту сторінки.
У тегу <head> перебуває <title> заголовок сторінки, який відображається у вкладках браузера, і сімейство тегів <meta> з різними атрибутами, в яких записується ім’я кодування, опис ключових слів і вмісту сторінки. Вся ця інформація необхідна браузеру і допомагає пошуковим системам знаходити потрібні сторінки, що відповідають запитам користувачів.
