Лінія розділу - тег <hr>

Лінія розділу - тег <hr> (або <hr /> для XHTML)

<hr> (horizontal ruler) не потребує закриваючого тега та ставиться на тому місці, де Вам потрібно намалювати лінію розділу та візуально розділити функціональні модулі сторінки. Наприклад так:

---

Не на всіх движках передбачено використання «горизонтальної лінії» як віджету. Наприклад у JIMDO є віджет "лінія", а в Blogger немає. Тому цей тег, без сумніву, буде корисним при створенні свого веб-ресурсу.

Лінія розділу функціональних модулів контенту використовується у дизайні будь-якого веб-ресурсу. За замовчуванням лінія <hr> відображається світло-сірого кольору з ефектом об'єму. Довжина лінії - вся ширина сторінкового контенту (без сайд-барів).

---

Якщо такий вигляд лінії не підходить до дизайну сайту, можна змінити його через атрибути тегу. Це допоможе змінити не тільки товщину, довжину та колір лінії, але, за необхідності, і її нахил.

• align - визначає вирівнювання лінії.
• color - колір лінії.
• noshade - малює лінію без ефекту тіні.
• size - товщина лінії.
• width - ширина лінії.

Якщо вирівнювання лінії не визначено, але вказана ширина, то за замовченням вона розміщується по центру.

Виділення частини тексту всередині документа за допомогою тегу <blockquote>

Цікавий блоковий елемент <blockquote> призначений для виділення всередині документа довгих цитат, або частини тексту, на яку слід звернути увагу.

Текст, який виділяється цим тегом, традиційно відображається як вирівняний блок з відступами ліворуч і праворуч (приблизно по 40 пікселів), а також відступами зверху і знизу.

Блоковий елемент <blockquote>, як і інші блокові елементи, займає всю доступну ширину. Його висота визначається вмістом і він починається з нового рядка.

Кодування дуже просте: <blockquote>цитата, яку треба виділити</blockquote>

Як створити просту кнопку на сайті

У деяких SaaS сервісах (наприклад, JIMDO) є віджет із різними зображеннями кнопки. У сервісі BLOGGER передбачається організація посилання прямо за текстом чи простими засобами html розмітки.

Давайте розглянемо, як зробити просту кнопку на веб-сайті.

Зробити її можна двома способами. Перший - це за допомогою тега <button> з подією onclick.

Другий – за допомогою CSS коду. Другий спосіб зручний, коли треба зробити багато однакових за дизайном кнопок на одній сторінці або на всьому сайті. Все залежить від того, де Ви розмістите CSS код.

---

1. Створюємо кнопку за допомогою тега <button>.

Зображення кнопки що реагує на курсор реалізується тегом <button>, тобто код такий <button>КНОПКА</button> .

Виглядає кнопка так

Але це тільки малюнок кнопки. Для того, щоб кнопка виконувала дію, треба додати подію onclick для переходу за гіперпосиланням.

Тег рядка, що біжить

Тег макей (<marquee>) дозволяє зробити на сайті рядок, що біжить. 

Деякі довідники html пишуть, що Тег <marquee> вважається застарілим, і W3D не рекомендує його використовувати. Начебто, під час використання цього тегу можуть виникнути проблеми з валідністю коду. Однак, під час роботи з SaaS-сервісами BLOGGER та JIMDO такого поки що не спостерігалося. У сервісі BLOGGER його навіть можна використовувати у заголовках сторінок, що дає цікавий візуальний ефект. У JIMDO це працює тільки як html-віджет.

Розмітка виглядає таким чином  <marquee>текст рядка, що біжить</marquee>

За замовчуванням текст рухається справа наліво, потім ховається за межами області, після чого знову починає рух справа наліво.

текст рядка, що біжить

У тега <marquee> може бути багато атрибутів, які задають напрям, тип та швидкість руху. Можна задавати колір фону, на якому рухається текст та параметри самого тексту.

текст рядка, що біжить 

Пересувати по екрану можна як текст, так і зображення. Для цього достатньо замість тексту вказати адресу зображення (ви можете розмістити його на службовій сторінці)

За замовчуванням організація інформаційного рядка, що біжить, виглядає таким чином:

Підказка у тексті за допомогою атрибуту title

Підказку у тексті сайту можна зробити декількома способами. Найпростіший варіант - за допомогою атрибуту title  у тегу посилання <a>. Атрибут описує вміст елемента у вигляді підказки, яка з'являється при наведенні курсору на елемент.

Така підказка зазвичай використовується на гіперпересилках (як у Вікіпедії) . Вигляд такої підказки залежить від браузера, налаштувань операційної системи і не може бути змінений за допомогою HTML-коду або стилів.

Код простий, але треба зазначити, що така підказка не працює на сенсорних екранах в операційній системі Андроїд (смартфони, планшети).

Синтаксис: title = "текст підказки". Підказка являє собою будь-який текстовий рядок, який має укладатись в подвійні або одинарні лапки.

Тег блокового елемента <div>

<div> - це блоковий елемент, який призначений для виділення фрагмента документу з метою зміни його вигляду.

Блоковим називається елемент, який відображається на веб-сторінці у вигляді уявного (невидимого), або видимого прямокутника. Такий елемент займає всю доступну ширину, висота елемента визначається його вмістом, і починається він з нового рядка.

Основою блоку виступає його контент (це може бути текст, зображення, тощо). Ширина контенту задається властивістю width, а висота через height. Навколо контенту йдуть поля (padding) - вони утворюють порожній простір між контентом та внутрішнім краєм бордюра блока. Потім йдуть власне самі бордюри (border) і завершують блок відступи (margin) - невидимий порожній простір до зовнішнього краю бордюрів.
 

За допомогою блоку можна, наприклад, зробити кольоровий блок з інформаційним текстом, цитатою, або інструкцією.

Ніщо не здатне зупинити ідею, час якої настав.

Можна зробити декілька блоків із довільним текстом.

Блок з прокруткою overflow

Ще один приклад використання блоку, це блок з прокруткою overflow. 

Якщо необхідно ознайомити відвідувача сайту з будь-яким документом без переходу на нову сторінку (ліцензійна угода, договір оферти, інструкцію тощо), але при цьому не прибирати документ для ознайомлення під кат, то можна скористатися технологією створення «блоку з прокруткою overflow". Тобто можна показати необхідний документ прямо на сторінці, на якій знаходиться відвідувач сайту у вигляді додаткового вікна зі слайдером прокручування.

Розмір цього «блоку-вікна» Ви задаєте самостійно.

Приклад коду:

<div style="border: 1px solid black; height: 400px; margin-left: 10px; overflow: auto; padding: 10px; width: 90%;"><span style="color: #000078;">Текст у блоці</span></div>

Це виглядає так:

Меню типу "баян"

Ще одна Html кориснисть - це бокове навігаційне меню типу "баян", що розтягується при наведенні курсору.

Таке меню зазвичай застосовується у сайдбарі сайту, але у смартфоні працює не так ефективно, як на десктопі. 

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

Меню отримало свою назву від зовнішнього вигляду вкладок, що кумедно випадають на кшталт мехов музичного інструменту.

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

Зразок меню:

СТОРІНКА1

Сторінка 1-1

Сторінка 1-2

СТОРІНКА2

Сторінка 2-1

Сторінка 2-2

Сторінка 2-3

СТОРІНКА3

Сторінка 3-1

Сторінка 3-2

Сторінка 3-3

Сторінка 3-4

СТОРІНКА4

Сторінка 4-1

Сторінка 4-2

Сторінка 4-3

Сторінка 4-4

Сторінка 4-5

---

Для встановлення меню скопіюйте скрипт, що наводиться нижче. Відкоригуйте його (колір, розмір, назви та посилання на сторінки) та розмістіть код у html віджеті сайдбару шаблону Blogger.

Теги спойлеру <details> та <summary>

Наступні теги, які ми розглянемо - це теги <details> та <summary>.

Тег <details> це спойлер, який дозволяє приховати інформацію і показувати її після натискання на значок спойлера. За замовчуванням, спойлер формується у вигляді трикутничка і тексту "детальніше". Якщо Ви хочете замість цього напису вставити свій, то треба скористатися тегом <summary>

Тег <summary> показує заголовок для тега <details> і має стояти першим всередині <details>

Код виглядає так:

Як створити посилання в межах контенту однієї сторінки

Якщо потрібно створити посилання в межах контенту однієї сторінки, використовуємо атрибут name (або id).

Атрибут name використовується для визначення анкора всередині сторінки (наприклад, назва розділу чи параграфу). У тому місці, куди буде вести посилання, робимо закладку, даємо їй назву (наприклад «закладка 1») та прописуємо атрибут name тега <a> таким чином:

<p><a name="закладка 1"></a>Розділ другий</p>

Там, звідки йде гіперпосилання, ми ставимо посилання на нашу закладку. Ім'я посилання на закладку починається символом #, після чого йде наша назва закладки.

<p><a href="#закладка 1">Розділ другий</a></p>

Між тегами <a name=...> та </a> може не бути тексту. Потрібно лише вказати місцезнаходження переходу за посиланням.

Прибираємо частину контенту під кат за допомогою спойлера

Буває, що частину контенту на сторінці сайту треба прибрати під кат (тобто сховати від просмотру) та зробити доступним при натисканні на кнопку. Наприклад, платіжні реквізити, ліцензійні угоди, договір оферти тощо. Вирішити таку задачу можна організацією спойлера з подією onclick.

Подія onclick виникає при натисканні лівою кнопкою миші на елементі (наприклад, на простій кнопці), до якого додано атрибут onclick.

Якщо треба організувати складнішу подію, ніж просто перехід по натисканню кнопочки (таку, що визначається скриптом), то синтаксис буде таким: onclick="скрипт".

Розглянемо приклад організації спойлеру на сторінці сайту з відкриттям додаткового тексту при натисканні на кнопку. 

Набір заголовка капітеллю

Одним із способів виділення заголовка в тексті є набір його капітеллю.

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

У кирилиці, як правило, капітель в основному тексті не застосовується, тому що в більшості літер немає різниці між малими і великими літерами. Але в заголовках іноді капітель застосовується.

У html розмітці режим капітелі заголовків h1 «вмикається» розміщенням у Head сайту (між тегами <head> та </head>) тега <style> з властивістю font-variant та значенням small-caps.

Виглядатиме це таким чином:

Зміна картинки при наведенні курсору

Подія onmouseover

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

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

Для прикладу розглянемо організацію на сайті зміни зображення при наведенні на нього курсору миші, щоб показати, як фотографія моделі виглядала до та після її обробки у редакторі Фотошоп.

 

Код виглядатиме так:

Текстові позначення кольору

На веб-сторінках існує декілька різновидів представлення кольору:

За допомогою кольорової моделі RGB - це червоний (Red), зелений (Green) та синій (Blue) кольори з їх числовою кількістю (від 0 до 255). Можливий четвертий параметр, який визначає ступінь непрозорості кольору. Наприклад, rgba (0, 255, 0, 0.3) що відповідає зеленому коліру із прозорістю 70 %.

Використовується також шістнадцяткове представлення кольору у вигляді рядку, що починається з символу «#» (U+0023) і включає три пари цифр, які відповідають відповідно за червоний (перша пара), зелений (друга пара) і синій (третя пара) кольори. Наприклад, #0000FF - синій колір.

Існує ще варіант представлення кольору за допомогою колірної моделі HSL (скорочено від англ. Hue, Saturation, Lightness). HSL - колірна модель, в якій будь-який колір визначається трьома характеристиками: кольоровим тоном ( Hue),; насиченістю (Saturation),; та освітленням, або «світністю» (Lightness).

Крім перелічених варіантів представлення кольору, в якості значень для html розмітки чинним також вважається використання звичайного текстового позначення кольору, наприклад green, black, red тощо. 

Ось приклад представлення тексту блакитного кольору різними кодами:

<p style="color: skyblue;">Текст блакитного кольору</p>

<p style="color: #87ceeb;">Текст блакитного кольору</p>

<p style="color: rgb(135,206,235);">Текст блакитного кольору</p>

<p style="color: hsl(197, 71%, 73%);">Текст блакитного кольору</p>

Звичайно, що позначати колір простіш за все звичайною назвою. Але не всі кольори можна позначати таким чином. 

13 популярних кольорів, назви яких можна використовувати замість шістнадцяткового значення, зведені у таблицю нижче.

Таблиця спеціальних символів HTML ☜

Спеціальні символи у коді html

---

Окрім звичайного тексту, засобами гіпертекстової розмітки на сайті можна розміщувати і деякі спеціальні символи.

У таблиці нижче наведено деякі символи, які можна скопіювати та вставити до тексту документа на веб-сторінці або до тексту повідомлення у соціальних мережах. 

Для зміни розміру та кольору спеціальних символів можна використовувати звичайні теги для тексту з атрибутами size и color. Але колір можна міняти тільки у чорно-білих символів.

 Звичайний символ ♿  Великий символ   ♿ 

Для того, щоб зробити спеціальні символи іншого розміру, використовуємо кодировку: