Попри те, що на таких платформах вже реалізовано більшість корисних функцій у вигляді віджетів, деякі додаткові дрібниці стануть корисними у дизайні та покращенні юзабіліті вашого сайту.
Розглянемо, які корисні НTML теги нам можуть знадобиться при ВЕБ дизайні сайту.
Лінія розділу "малюється" за допомогою тега <hr> (або <hr /> для XHTML). Тег не потребує закриваючого тега та ставиться на тому місці, де Вам потрібно намалювати лінію розділу та візуально розділити функціональні модулі сторінки.
Як створити просту кнопку на сайті
Як зробити на сайті рядок, що біжить
Для того щоб зробити на сайті інформаційний рядок, що біжить можна скористатися тегом <marquee>.
У тега <marquee> може бути багато атрибутів, які задають напрям, тип та швидкість руху. Можна задавати колір фону, на якому рухається текст та параметри самого тексту. Пересувати по екрану можна як текст, так і зображення. Для цього достатньо замість тексту вказати адресу зображення.
Тег блокового елемента <div>
<div> - це блоковий елемент, який призначений для виділення фрагмента документу з метою зміни його вигляду.
Якщо необхідно ознайомити відвідувача сайту з будь-яким документом без переходу на нову сторінку (ліцензійна угода, договір оферти, інструкцію тощо), але при цьому не прибирати документ для ознайомлення під кат, то можна скористатися технологією створення «блоку з прокруткою overflow". Тобто можна показати необхідний документ прямо на сторінці, на якій знаходиться відвідувач сайту у вигляді додаткового вікна зі слайдером прокручування. Розмір цього «блоку-вікна» Ви задаєте самостійно.
Меню типу "баян"
Ще одна Html кориснисть - це бокове навігаційне меню типу "баян", що розтягується при наведенні курсору. Таке меню зазвичай застосовується у сайдбарі сайту, але у смартфоні працює не так ефективно, як на десктопі.
Тег <details> це спойлер, який дозволяє приховати інформацію і показувати її після натискання на значок спойлера. За замовчуванням, спойлер формується у вигляді трикутничка і тексту "детальніше". Якщо Ви хочете замість цього напису вставити свій, то треба скористатися тегом <summary>
За допомогою такого спойлеру можна приховати якусь додаткову інформацію, наприклад банківські реквізити або організувати на сайті тест для самоконтролю із запитаннями та відповідями при натисканні кнопки.
Як створити посилання в межах контенту однієї сторінки
Досить часто необхідно організувати посилання в межах контенту однієї сторінки. Це можуть бути посилання навігаційного меню односторінкового сайту або, наприклад, посилання на розділи в змісті великої статті. А іноді необхідно зробити посилання на конкретний фрагмент статті, що знаходиться на іншій сторінці або взагалі на іншому Вашому сайті. В усіх цих випадках використовується атрибут тега посилання name (або id).
Ще один варіант приховування частини контенту на сторінці сайту під кат.
У таблиці нижче наведено деякі символи, які можна скопіювати та вставити до тексту документа на веб-сторінці або до тексту повідомлення у соціальних мережах.
Для зміни розміру та кольору спеціальних символів можна використовувати звичайні теги для тексту з атрибутами size и color. Але колір можна міняти тільки у чорно-білих символів.
Лінія розділу функціональних модулів контенту використовується у дизайні будь-якого веб-ресурсу. Якщо стандартний вигляд лінії не підходить до дизайну сайту, можна змінити його через атрибути тегу. Це допоможе змінити не тільки товщину, довжину та колір лінії, але, за необхідності, і її нахил.
Цікавий блоковий елемент <blockquote> призначений для виділення всередині документа довгих цитат, або частини тексту, на яку слід звернути увагу.
Текст, який виділяється цим тегом, традиційно відображається як вирівняний блок з відступами ліворуч і праворуч (приблизно по 40 пікселів), а також відступами зверху і знизу.
У деяких SaaS сервісах (наприклад, JIMDO) є віджет із різними зображеннями кнопки. У сервісі BLOGGER передбачається організація посилання прямо за текстом чи простими засобами html розмітки.
Давайте розглянемо, як зробити просту кнопку на веб-сайті. Зробити її можна двома способами. Перший - це за допомогою тега <button> з подією onclick. Другий – за допомогою CSS коду. Другий спосіб зручний, коли треба зробити багато однакових за дизайном кнопок на одній сторінці або на всьому сайті.
Давайте розглянемо, як зробити просту кнопку на веб-сайті. Зробити її можна двома способами. Перший - це за допомогою тега <button> з подією onclick. Другий – за допомогою CSS коду. Другий спосіб зручний, коли треба зробити багато однакових за дизайном кнопок на одній сторінці або на всьому сайті.
Для того щоб зробити на сайті інформаційний рядок, що біжить можна скористатися тегом <marquee>.
Підказку у тексті сайту можна зробити декількома способами. Найпростіший варіант - за допомогою атрибуту title у тегу посилання <a>. Атрибут описує вміст елемента у вигляді підказки, яка з'являється при наведенні курсору на елемент.
Така підказка зазвичай використовується на гіперпересилках (як у Вікіпедії) . Вигляд такої підказки залежить від браузера, налаштувань операційної системи і не може бути змінений за допомогою HTML-коду або стилів.
Така підказка зазвичай використовується на гіперпересилках (як у Вікіпедії) . Вигляд такої підказки залежить від браузера, налаштувань операційної системи і не може бути змінений за допомогою HTML-коду або стилів.
Код простий, але треба зазначити, що така підказка не працює на сенсорних екранах в операційній системі Андроїд (смартфони, планшети).
Блоковим називається елемент, який відображається на веб-сторінці у вигляді уявного (невидимого), або видимого прямокутника. Такий елемент займає всю доступну ширину, висота елемента визначається його вмістом, і починається він з нового рядка.
За допомогою блоку можна, наприклад, зробити кольоровий блок з інформаційним текстом, цитатою, або інструкцією.
Якщо необхідно ознайомити відвідувача сайту з будь-яким документом без переходу на нову сторінку (ліцензійна угода, договір оферти, інструкцію тощо), але при цьому не прибирати документ для ознайомлення під кат, то можна скористатися технологією створення «блоку з прокруткою overflow". Тобто можна показати необхідний документ прямо на сторінці, на якій знаходиться відвідувач сайту у вигляді додаткового вікна зі слайдером прокручування. Розмір цього «блоку-вікна» Ви задаєте самостійно.
Використовується для сайтів, що зроблені на платформі BLOGGER. У цьому движку штатними засобами віджетів не можна робити розділи випадаючого підменю.
Меню отримало свою назву від зовнішнього вигляду вкладок, що кумедно випадають на кшталт мехов музичного інструменту.
Теги спойлеру <details> та <summary>
Досить часто необхідно організувати посилання в межах контенту однієї сторінки. Це можуть бути посилання навігаційного меню односторінкового сайту або, наприклад, посилання на розділи в змісті великої статті. А іноді необхідно зробити посилання на конкретний фрагмент статті, що знаходиться на іншій сторінці або взагалі на іншому Вашому сайті. В усіх цих випадках використовується атрибут тега посилання name (або id).
Атрибут name використовується для визначення анкора всередині сторінки (наприклад, назва розділу чи параграфу). У тому місці, куди буде вести посилання, робиться закладка і дається їй назва, а там, звідки йде гіперпосилання, ставиться посилання на закладку.
Буває, що частину контенту на сторінці сайту треба прибрати під кат (тобто сховати від просмотру) та зробити доступним при натисканні на кнопку. Вирішити таку задачу можна організацією спойлера з подією onclick.
Подія onclick виникає при натисканні лівою кнопкою миші на елементі (наприклад, на простій кнопці), до якого додано атрибут onclick.
Подія onclick виникає при натисканні лівою кнопкою миші на елементі (наприклад, на простій кнопці), до якого додано атрибут onclick.
Одним із способів виділення заголовка в тексті є набір його капітеллю.
Капітель - це таке зображення в гарнітурі, в якій малі знаки виглядають, як зменшені великі. Щоб підкреслити різницю між капітеллю і малими літерами, її роблять трохи вище малих, а відстань між знаками збільшують.У кирилиці, як правило, капітель в основному тексті не застосовується, тому що в більшості літер немає різниці між малими і великими літерами. Але в заголовках іноді капітель застосовується.
Подія onmouseover - один з найпопулярніших атрибутів, що застосовується для створення різних ефектів із зображеннями та іншими об'єктами веб-сторінки. Зазвичай, працює у зв'язку з подією onmouseout.Для того, щоб спрацювала подія onmouseover, досить просто навести курсор миші на елемент, до якого додано цей атрибут.
У смартфоні або на пристої з сенсорним екраном треба буде торкнутися зображення для перемикання, а потім торкнутися іншої частини екрану для зворотнього перемикання.
Для прикладу розглянемо організацію на сайті зміни зображення при наведенні на нього курсору миші, щоб показати, як фотографія моделі виглядала до та після її обробки у редакторі Фотошоп.
У смартфоні або на пристої з сенсорним екраном треба буде торкнутися зображення для перемикання, а потім торкнутися іншої частини екрану для зворотнього перемикання.
Для прикладу розглянемо організацію на сайті зміни зображення при наведенні на нього курсору миші, щоб показати, як фотографія моделі виглядала до та після її обробки у редакторі Фотошоп.
На веб-сторінках існує декілька різновидів представлення кольору. Крім представлення кольору за допомогою кольорової моделі RGB та шістнадцяткового представлення кольору в якості значень, для html розмітки чинним також вважається використання звичайного текстового позначення кольору, наприклад green, black, red тощо. Але не всі кольори можна позначати таким чином.
12 кольорів, назви яких можна використовувати замість шістнадцяткового значення, зведені у таблицю.
Окрім звичайного тексту, засобами гіпертекстової розмітки на сайті можна розміщувати і деякі спеціальні символи.
У таблиці нижче наведено деякі символи, які можна скопіювати та вставити до тексту документа на веб-сторінці або до тексту повідомлення у соціальних мережах.
Для зміни розміру та кольору спеціальних символів можна використовувати звичайні теги для тексту з атрибутами size и color. Але колір можна міняти тільки у чорно-білих символів.