Для чого потрібен спойлер HTML?

Знаетете ви, що таке спойлер HTML? Створення сайтів користується попитом у багатьох. Деякі освоюють розробку інтернет-ресурсів самостійно, беруть інформацію з різних джерел. Є поняття, з якими їм доводиться стикатися вперше. Що таке спойлер і як його зробити на сайті без чиєїсь допомоги? У цій статті ви дізнаєтеся про це.

Що таке спойлер?

Розглянемо спойлер HTML, що працює на будь-якій системі управління сайтом (CMS). Спойлер - це конструкція, що містить частину контенту сайту, яка спочатку прихована для користувача. Людина клацає на відповідне посилання і бачить весь контент. З цією метою використовується і спойлер HTML. Усе ще не можете зрозуміти, для чого приховувати якийсь шматочок статті? Найчастіше для зовнішнього прикраси ресурсу. Крім того, спойлер HTML роблять з деякою практичною метою. Наприклад, створено сайт, дизайн якого не передбачає розташування великої статті на головній сторінці. І якщо власник хоче, щоб ресурс просувався пошуковими системами, необхідний об'ємний контент. Ось тоді і виручає спойлер.

Пошуковики прихований текст бачать, це не заважає рейтингу ранжирування ресурсу. Часто спойлери застосовують, щоб приховувати допоміжну інформацію, яка не всім цікава. Є готові плагіни спойлерів, а можна розробити свій код з певним стилем, відповідним оформлення конкретного сайту.

Приклад спойлера

Давайте розберемося з тим, як зробити HTML-код спойлера. Код, який ви бачите нижче, слід розмістити між тегами head вашого HTML-файлу, якщо є бажання використовувати ваш спойлер на декількох сторінках інтернет-ресурсу. У тому випадку, коли треба буде застосувати його тільки на одній певній сторінці, можете помістити код між тегами body.

Тема спойлера і його тіло виглядає так:

Основне зроблено, але поки наш спойлер не працюватиме повноцінно. Справа в тому, що вміст нашого HTML-спойлера залишається завжди відкритим. Щоб це виправити, потребутся CSS. Додайте:

Якщо зробите все, як тут описано, отримаєте працездатну конструкцію.

Спойлер для Joomla

Щоб зробити його, наприклад, в Joomla, можна скористатися плагіном під назвою Core Design Spoiler. Не забудьте про Core Design Scriptegrator, довантажувати всі необхідні бібліотеки. Завантажуйте їх у розробників з офіційних сайтів, потім увімкніть все в Менеджері плагінів. Для того щоб поставити спойлер, що приховує текст, укладіть необхідний фрагмент статті в тег спойлер ([spoiler]). У налаштуваннях можна вибрати його вид. Він може бути кнопкою або простий посиланням. Ще задаються умови його розкриття: по кліку або в той момент, коли користувач буде наводити курсор.

Є три параметри, доступних в цьому тезі:

• Title дає можливість вказати свій заголовок в лапках.
• Action дозволяє вибрати дію, що відкриває спойлер.
• Element задає вид спойлера (link - посилання, а button - кнопка).

Усередині тега spoiler допускається використання тексту з HTML-тегами.

Спойлер - зручний засіб, його широко застосовують на різних блогах, форумах. Погодьтеся, непогано ховати ті частини сторінки, які її перевантажують. Покращуйте зовнішній вигляд свого сайту, так як це подобається багатьом користувачам.