Шлях будь-якого верстальника починається з вивчення HTML. Це тегова мова розмітки веб-сторінки. HTML, як і будь-яка інша мова, працює за певними правилами, які програміст повинен знати. Основними словами, з яких складається HTML, є елементи та теги.
Теги в HTML
Тег – це основна конструкція HTML, яка складається з символів, написаних англійською мовою та кутових дужок. Саме теги перетворюють звичайний текст на гіпертекст для веб-сторінки.
Існують парні та одиночні теги.
Парні теги . Це два теги – відкриваючий та закриваючий, між якими знаходиться вміст тега – контент. Прикладом подвійного тега є <title>. Особливість закриваючого тега в тому, що він після кутової дужки містить «/».
Одиночні теги. Прикладом такого тега є <img>. У нього немає закриваючого тега і, як і більшість таких тегів, він не містить в собі інформації безпосередньо, а лише служить для вставки зображення.
Елементи в HTML
Елементом в HTML називається конструкція, яка логічно завершена. Одиночний тег по своїй суті і є логічно завершеною конструкцією. У випадку ж з парними тегами конструкція складатиметься з тега відкриваючого та закриваючого і самого вмісту.
Виходить, що для освоєння HTML необхідно добре знати та орієнтуватися в його тегах. Але як це зробити, якщо таких тегів більше 100 штук? Чи потрібно їх усі вчити напам'ять?
І тут у нас гарна новина для вас. З перших днів роботи з HTML вам точно не потрібно заучувати всю сотню тегів. Більше того, приблизно 50-60% тегів багатьма навіть найпросунутішими верстальниками не використовуються.
Перші, найважливіші теги, з якими ви просто зобов'язані подружитися - це теги, що складають каркас HTML-документа. Саме з них і почнеться шпаргалка верстальника.
Серед усього іншого безлічі тегів можна скласти HTML-шпаргалку і умовно поділити всі теги на групи.
Теги заголовків
Це елементи HTML-документа, які мають велике значення. По-перше, вони допомагають упорядкувати всю інформацію, формують структуру документа. По-друге, вони грають вагому роль у SEO-просуванні.
До тегів заголовків включаються 6 тегів різного рівня важливості: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Вони повинні розташовуватися в документі в суворій ієрархічній послідовності від <h1>, найважливішого заголовка першого рівня, до <h6>.
На сторінці заголовки різних рівнів відображаються по-різному. Найбільшим за розміром жирним шрифтом буде відображатися заголовок першого рівня.
Всі теги заголовків є парними і вимагають обов'язкового використання закриваючих тегів.
Форматування та робота з текстом
Робота з таблицями в HTML
Створення таблиці в HTML-документі починається з прописування тега <table>. Він міститиме в собі всю інформацію про таблицю. Тег цей парний і вимагає обов'язкового використання закриваючого </table>.
Будь-яка таблиця складається з рядків і осередків, які задаються тегами <tr> і <td> відповідно. При цьому тег <td> поміщається всередину <tr>, який, у свою чергу, розташовується всередині <table>.
У тега <table> є велика кількість атрибутів, які визначають товщину і колір рамки осередку, відступи всередині осередку, висоту таблиці, кількість колонок і багато іншого.
Створення HTML-форм
За допомогою тега <form> в HTML-документі створюються форми, які служать для обміну даними між користувачем і сервісом. Немає жодних обмежень щодо допустимої кількості форм в одному документі. Але кожна з них має бути автономною, мати свій відкриваючий і закриваючий тег. Форми не можуть знаходитися всередині одна одної.
Вбудовані елементи HTML
Додаванням і управлінням аудіозаписами на веб-сторінці займається тег <audio>. Шлях до файлу прописується через тег <source>. Це парний тег, який обов'язково має бути закритий. І ще всередині <audio> можна написати текст, який буде виводитися у випадку, якщо відео не може бути відкрите в якомусь браузері.
Суть додавання і управління відеозаписами така ж, як і з тегом <audio>. Тільки здійснюється це через тег <video>.
До аудіо та відео в HTML можна додавати субтитри за допомогою тега <track>.
Для відображення зображень формату JPEG, PNG, GIF на веб-сторінці використовується тег <img>.
У перші кілька місяців роботи цієї шпаргалки по HTML вам цілком буде достатньо. А з часом ви самі будете доповнювати її часто використовуваними тегами і більшу частину з них волею-неволею запам'ятаєте напам'ять.