HTML корисності

Тут ви зможете знайти деякі корисні теги та скрипти, які стануть вам у нагоді в «сайтобудуванні» на движках Blogger і JIMDO. На цих платформах вже реалізовано більшість корисних функцій, але деякі додаткові дрібниці напевно стануть корисними у дизайні та покращенні юзабіліті вашого сайту.

Розглянемо, які корисні НTML теги нам можуть знадобиться при ВЕБ дизайні сайту.

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

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

У движку JIMDO є віджет "лінія", а в Blogger – немає. Тому цей тег може знадобитися.

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

Код стилів досить простий.

<style>
hr {
border: none; /* Прибрати кордон (тінь) лінії */
background-color: red; /* Задати колір лінії */
height: 2px; /* Задати товщину лінії */
}
</style>


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

Якщо вам треба змінити стиль розділювальних ліній по всьому сайту, то код стилю треба вставити в HTML шаблон сайту перед кодом 

]]></b:skin> 

тільки без тегів <style></style>.
2. Виділення частини тексту всередині документа, як цитати за допомогою тегу <blockquote>

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

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

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

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

Приклад виглядає так (тегами виділено темно-синій текст):

***
Відкриті ліцензії для розповсюдження корисних матеріалів у мережі Інтернет були створені некомерційною організацією Creative Commons. Під такі відкриті ліцензію попадають деякі фото та відеозображення, музичні твори, відкриті програмні коди, і навіть деякі кінофільми. На базі таких ліцензій розповсюджуються , наприклад, лекції та учбові курси відомого Масачусетського технологічного інституту. 

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

Спочатку Creative Commons створювалися в умовах юридичної системи США. На сьогодні Creative Commons адаптовані до юридичної системи більш ніж 70 країн, включно з Україною. 

3. Проста кнопка та використання події onclick для організації переходу за посиланням при натисканні на кнопку

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

Кнопка реалізується тегом <button>

<button>КНОПКА</button>

Виглядає так

Проста кнопка з параметрами за замовчуванням та переходом на сайт КПІ у новому вікні.

<button onclick="window.open('http://kpi.ua')">кнопка з переходом на нове вікно</button>

Виглядає та працює так  

Проста кнопка з переходом на нове вікно з додатковими параметрами тексту.

<button onclick="window.open('http://kpi.ua')"><span style="color: blue;"><span style="font-size: 14pt;">Кнопка з переходом на нове вікно</span></span></button>

Виглядає та працює так   

Проста кнопка із додатковими параметрами тексту без переходу на нове вікно

<button onclick="window.location.href=('http://www.kpi.ua')"><span style="padding: auto;"><span style="color: blue;"><span style="font-size: 14pt;">Кнопка без переходу на нове вікно</span></span></span></button>

Виглядає та працює так

Міняти написи на кнопках можна просто в режимі верстки.
4. Тег рядка, що біжить

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

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

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

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

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

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

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



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


5. Тег підказки 

Підказка організовується на сайті атрибутом title. Атрибут описує вміст елемента у вигляді підказки, яка з'являється при наведенні курсору на елемент,

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

Синтаксис: title = "текст підказки"

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

Приклад:

Планується, що бази відпочинку КПІ почнуть свою роботу з 15 липня.

Якщо навести курсор миші на КПІ то з'явиться підказка.

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

<a href="http://www.kpi.ua/" title="Київський політехнічний інститут ім. Ігоря Сікорського">КПІ</a>  почнуть свою роботу з 15 липня.


6. Тег блокового елементу <div>

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

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


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


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

Це текст, який ми розміщуємо всередині першого (сірого) блока.
Це текст, який ми розміщуємо всередині другого (жовтого) блока.






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

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

Докладніше про те, як робити блокові елементи дивіться на сторінці Блокові елементи за посиланням.


7. Блок з прокруткою 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>

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

Киевская политехника, которой в следующем году исполняется 120 лет, бережно хранит свою историю. Многие известные личности, прославившие нашу страну во многих отраслях науки и техники, навсегда вошли в пантеон великих политехников.

На века прославили КПИ Виктор Кирпичев, Евгений Патон, Сергей Королев, Архип Люлька, Михаил Кравчук и многие другие. Памятники этим выдающимся личностям украшают теперь Аллею Славы университета. На очереди открытие нового памятника - Войцеху Свентославскому - выдающемуся польскому ученому, бывшему министру образования Польши, выпускнику КПИ 1913 года. Кстати, средства на этот памятник добровольно собирали не только в Украине, но и в Польше.

Как известно, Киевская политехника была создана в 1898 году вместе с политехническим институтом в Санкт-Петербурге и Варшаве. Три новых вуза создавались по требованию времени: на юге - Киев, на севере - Санкт-Петербург, на западе - Варшава. Указ царя, за которым они начали развиваться, был единственным (царь Николай II подписал его в июне 1898 года). А инициатива основания политехнических институтов в этих городах принадлежала тогдашнему министру финансов Российской империи графу Сергею Витте.

Именно он и убедил киевских богачей в необходимости создания не среднего технического учебного заведения, а высшего. И это было дальновидное решение.

Главную роль в создании и развитии КПИ сыграли меценаты, или, как сейчас говорят, спонсоры. Меценатство было очень распространенным на территории Российской империи. Поэтому средства на развитие нового высшего учебного заведения в Киеве выделили "сахарные короли" Николай Терещенко с сыновьями, Лазарь Бродский, выдающийся художник-маринист Константин Айвазовский и другие.

Значительный вклад в развитие КПИ сделала Киевская городская дума, а также население Киева, которое за короткое время собрало более 300 000 рублей. Кадровую базу всех тридцати пяти кафедр вновь созданного института составили известные ученые из Петербурга, Москвы, Харькова и Киева.

Первым ректором Киевского политехнического стал Виктор Кирпичев - председатель Южного общества технологов, известный ученый в области механики и сопротивления материалов, автор первого в стране учебника "Детали машин", который до той поры занимал должность директора Харьковского технологического института.

В КПИ пришли также такие признанные ученые и педагоги, как один из организаторов Киевского физико-математического общества член-корреспондент Петербургской академии наук Василий Ермаков, один из основателей украинской школы паротурбиностроения Александр Радциг, общепризнанный авторитет с теории резания металлов и одновременно известный в стране специалист по мельницам и мукомольным технологиям. Константин Зворыкин, выдающийся ученый в области нефтехимии Михаил Коновалов, выдающийся специалист в области почвообрабатывающей техники и технологий Камилл Шиндлер; чуть позже - выдающийся ученый-мостостроитель, позднее - основатель украинской школы электросварки Евгений Патон, один из самых авторитетных, несмотря на молодой возраст, ученых в области прикладной механики, сопротивления материалов и устойчивости механических систем Степан Тимошенко и многие другие. Они не только быстро наладили в КПИ учебный процесс по соответствующим направлениям, но и стали основателями научных школ, традиции которых хранятся и развиваются до сих пор.


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

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

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

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

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

<details>
<summary>Інформація про автора</summary>
<p>Пичко Валерій, викладач курсів підвищення кваліфикації НМК ІПО КПІ ім. Ігоря Сікорського </p>
</details>


Готовий результат виглядає так: (натиснить на напис Інформація про автора)

Інформація про автора
Пичко Валерій, викладач курсів підвищення кваліфикації НМК ІПО КПІ ім. Ігоря Сікорського



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

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

Для встановлення меню скопіюйте скріпт, що наводиться за посиланням >>>

Зразок меню:

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

Атрибут name використовується для визначення анкора всередині сторінки. Наприклад, назва розділу чи параграфу.

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

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

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

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

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

Приклад створення змісту документа на сторінці можна побачити за посиланням >>>

У XHTML та HTML5 замість name для визначення закладки потрібно вказувати атрибут id. Але Blogger та Jimdo розуміють обидва варіанти і автоматично коригують код, якщо є незначні помилки.

Так само можна робити посилання на закладки, що знаходяться в іншій веб-сторінці і навіть на іншому сайті. Для цього в адресі посилання треба вказати адресу посилання на необхідну сторінку, додати символ # та ім'я закладки.

11. Організація спойлеру з подією onclick 

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

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

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



Текст, який ви пишите в середині спойлеру для того, щоб його розгортати та згортати. Це може бути лицензійна угода чи проєкт договору, платіжні реквізити, пояснення матеріалу тощо

Html код достатньо вставити на необхідне місце в сайті. Там де виділення жовтим маркером, ви вставляєте свій текст.

<div class="spoil">
    <input class="input-button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Згорнути'; } 
else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Переглянути ще раз'; }" type="button" value="Натиснить на кнопку щоб переглянути додаткові матеріали" />
</div>
<div class="alt2">
    <div style="display: none;"><br>Текст, який ви пишите в середині спойлеру для того, щоб його розгортати та згортати. Це може бути лицензійна угода чи проєкт договору, платіжні реквізити, пояснення матеріалу тощо </div> 
</div>

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

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

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

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

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

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

<style>
h1 {
font-variant: small-caps; /* Встановлюємо капітель для заголовка */
}
</style>


У цьому випадку, якщо ви встановили в публікації в Блоггері заголовка з тегом h1 (вибір у тулбарі редактора Блоггера режиму «Основний заголовок») текст заголовка буде набраний капітелем.
13. Зміна картинки при наведенні курсору. Подія onmouseover.

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

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

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

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

<img onmouseout="this.src='посилання на перше зображення'"
onmouseover="this.src='посилання на друге зображення'"
src="посилання на перше зображення" />





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

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

Шістнадцяткові  значення всіх кольорів (ну, майже всіх) що використовуються  у веб-дизайні можна взяти на сторінці Таблиця кольорів. 

КОЛІР

ЗРАЗОК КОЛЬОРУ

RGB

HTML

White
255 255 255
white
 #FFFFFF
Black
0 0 0
black 
#000000
Aqua
0 255 255
aqua
 #00FFFF
Red
255 0 0
red
 #FF0000
Teal
0 128 128
teal
 #008080
Lime
0 255 0
lime
 #00FF00
Green
0 128 0
green
 #008000
Yellow
255 255 0
yellow
 #FFFF00
Magenta
255 0 255
magenta
 #FF00FF
Olive
128 128 0
olive
 #808000
Purple 128 0 128
purple
 #800080
Maroon
128 0 0
maroon
 #800000