Тут ви зможете знайти деякі корисні теги та скрипти, які стануть вам у нагоді у "сайтобудуванні". Такі "html-корисності" можна використовувати на багатьох SaaS сервісах. Попри те, що на таких платформах вже реалізовано більшість корисних функцій у вигляді віджетів, деякі додаткові дрібниці стануть корисними у дизайні та покращенні юзабіліті вашого сайту.
Розглянемо, які корисні НTML теги нам можуть знадобиться при ВЕБ дизайні сайту.
1. Лінія розділу - тег <hr>
Лінія розділу - тег <hr> (або <hr /> для XHTML)
<hr> (horizontal ruler) не потребує закриваючого тега та ставиться на тому місці, де Вам потрібно намалювати лінію розділу та візуально розділити функціональні модулі сторінки. Наприклад так:
Не на всіх движках передбачено використання «горизонтальної лінії» як віджету. Наприклад у JIMDO є віджет "лінія", а в Blogger немає. Тому цей тег, без сумніву, буде корисним при створенні свого веб-ресурсу.
За замовчуванням лінія <hr> відображається світло-сірого кольору з ефектом об'єму. Якщо такий вигляд лінії не підходить до дизайну сайту, можна змінити колір і розмір лінії через атрибути тегу, або через стилі. Це допоможе змінити не тільки товщину, довжину та колір лінії, але, за необхідності, і її нахил.
1. Лінія розділу - тег <hr>
Лінія розділу - тег <hr> (або <hr /> для XHTML)
<hr> (horizontal ruler) не потребує закриваючого тега та ставиться на тому місці, де Вам потрібно намалювати лінію розділу та візуально розділити функціональні модулі сторінки. Наприклад так:
Не на всіх движках передбачено використання «горизонтальної лінії» як віджету. Наприклад у JIMDO є віджет "лінія", а в Blogger немає. Тому цей тег, без сумніву, буде корисним при створенні свого веб-ресурсу.
За замовчуванням лінія <hr> відображається світло-сірого кольору з ефектом об'єму. Якщо такий вигляд лінії не підходить до дизайну сайту, можна змінити колір і розмір лінії через атрибути тегу, або через стилі. Це допоможе змінити не тільки товщину, довжину та колір лінії, але, за необхідності, і її нахил.
Докладніше на сторінці horizontal ruler.
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>
Виглядає так
Але це тільки малюнок кнопки. Для того, щоб кнопка виконувала дію, треба додати подію onclick для переходу за гіперпосиланням.
html-код для простої кнопки з параметрами за замовчуванням та переходом на сайт КПІ у новому вікні:
<button onclick="window.open('http://kpi.ua')">кнопка з переходом на нове вікно</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. Тег рядка, що біжить
<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.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 такого поки що не спостерігалося. У сервісі BLOGGER його навіть можна використовувати у заголовках сторінок, що дає цікавий візуальний ефект. У JIMDO це працює тільки як html-віджет.
Розмітка виглядає таким чином <marquee>текст рядка, що біжить</marquee>
За замовчуванням текст рухається справа наліво, потім ховається за межами області, після чого знову починає рух справа наліво.
Деякі довідники html пишуть, що Тег <marquee> вважається застарілим, і W3D не рекомендує його використовувати. Начебто, під час використання цього тегу можуть виникнути проблеми з валідністю коду. Однак, під час роботи з SaaS-сервісами BLOGGER та JIMDO такого поки що не спостерігалося. У сервісі BLOGGER його навіть можна використовувати у заголовках сторінок, що дає цікавий візуальний ефект. У JIMDO це працює тільки як html-віджет.
Розмітка виглядає таким чином <marquee>текст рядка, що біжить</marquee>
За замовчуванням текст рухається справа наліво, потім ховається за межами області, після чого знову починає рух справа наліво.
У тега <marquee> може бути багато атрибутів, які задають напрям, тип та швидкість руху. Можна задавати колір фону, на якому рухається текст та параметри самого тексту.
Пересувати по екрану можна як текст, так і зображення. Для цього достатньо замість тексту вказати адресу зображення (ви можете розмістити його на службовій сторінці)
Докладніше про те, як організувати на сайті інформаційний рядок, що біжить, дивіться на сторінці Тег рядка, що біжить .
Докладніше про те, як організувати на сайті інформаційний рядок, що біжить, дивіться на сторінці Тег рядка, що біжить .
5. Тег підказки
Підказка організовується на сайті атрибутом title у тегу посилання <a>. Атрибут описує вміст елемента у вигляді підказки, яка з'являється при наведенні курсору на елемент.
Зазвичай використовується на гіперпересилках (як у Вікіпедії) . Вигляд такої підказки залежить від браузера, налаштувань операційної системи і не може бути змінений за допомогою HTML-коду або стилів.
Синтаксис: title = "текст підказки"
Підказка являє собою будь-який текстовий рядок, який має укладатись в подвійні або одинарні лапки.
Приклад 1:
Планується, що бази відпочинку КПІ розпочнуть свою роботу з 15 липня.
Якщо навести курсор миші на КПІ, то з'явиться підказка.
Код виглядає так:
<a href="http://www.kpi.ua/" title="Київський політехнічний інститут ім. Ігоря Сікорського">КПІ</a> розпочнуть свою роботу з 15 липня.
Можна просто дати пояснення без організації гіперпересилки (щось на кшталт інтерактивної виноски у книжковому тексті).
Зазвичай використовується на гіперпересилках (як у Вікіпедії) . Вигляд такої підказки залежить від браузера, налаштувань операційної системи і не може бути змінений за допомогою HTML-коду або стилів.
Синтаксис: title = "текст підказки"
Підказка являє собою будь-який текстовий рядок, який має укладатись в подвійні або одинарні лапки.
Приклад 1:
Планується, що бази відпочинку КПІ розпочнуть свою роботу з 15 липня.
Якщо навести курсор миші на КПІ, то з'явиться підказка.
Код виглядає так:
<a href="http://www.kpi.ua/" title="Київський політехнічний інститут ім. Ігоря Сікорського">КПІ</a> розпочнуть свою роботу з 15 липня.
Можна просто дати пояснення без організації гіперпересилки (щось на кшталт інтерактивної виноски у книжковому тексті).
Приклад 2.
Відкриті ліцензії для розповсюдження корисних матеріалів у мережі Інтернет були створені некомерційною організацією Creative Commons Під такі відкриті ліцензії попадають деякі фото та відеозображення, музичні твори, відкриті програмні коди, і навіть деякі кінофільми.
Код виглядає так:
Відкриті ліцензії для розповсюдження корисних матеріалів у мережі Інтернет були створені некомерційною організацією <a title="Creative Commons - неприбуткова організація, що має на меті збільшення кількості творчих матеріалів, доступних для використання та розповсюдження. Вона розробила та оприлюднила декілька ліцензійних угод стосовно авторських прав, відомих як Ліцензії Creative Commons."><b><span style="color: #2b00fe;">Creative Commons</span></b></a> Під такі відкриті ліцензії попадають деякі фото та відеозображення, музичні твори, відкриті програмні коди, і навіть деякі кінофільми.
Проте треба зазначити, що така підказка не працює на сенсорних екранах в операційній системі Андроїд (смартфони, планшети).
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>
Приклад коду:
<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 рублей. Кадровую базу всех тридцати пяти кафедр вновь созданного института составили известные ученые из Петербурга, Москвы, Харькова и Киева.
Первым ректором Киевского политехнического стал Виктор Кирпичев - председатель Южного общества технологов, известный ученый в области механики и сопротивления материалов, автор первого в стране учебника "Детали машин", который до той поры занимал должность директора Харьковского технологического института.
В КПИ пришли также такие признанные ученые и педагоги, как один из организаторов Киевского физико-математического общества член-корреспондент Петербургской академии наук Василий Ермаков, один из основателей украинской школы паротурбиностроения Александр Радциг, общепризнанный авторитет с теории резания металлов и одновременно известный в стране специалист по мельницам и мукомольным технологиям. Константин Зворыкин, выдающийся ученый в области нефтехимии Михаил Коновалов, выдающийся специалист в области почвообрабатывающей техники и технологий Камилл Шиндлер; чуть позже - выдающийся ученый-мостостроитель, позднее - основатель украинской школы электросварки Евгений Патон, один из самых авторитетных, несмотря на молодой возраст, ученых в области прикладной механики, сопротивления материалов и устойчивости механических систем Степан Тимошенко и многие другие. Они не только быстро наладили в КПИ учебный процесс по соответствующим направлениям, но и стали основателями научных школ, традиции которых хранятся и развиваются до сих пор.
На века прославили КПИ Виктор Кирпичев, Евгений Патон, Сергей Королев, Архип Люлька, Михаил Кравчук и многие другие. Памятники этим выдающимся личностям украшают теперь Аллею Славы университета. На очереди открытие нового памятника - Войцеху Свентославскому - выдающемуся польскому ученому, бывшему министру образования Польши, выпускнику КПИ 1913 года. Кстати, средства на этот памятник добровольно собирали не только в Украине, но и в Польше.
Именно он и убедил киевских богачей в необходимости создания не среднего технического учебного заведения, а высшего. И это было дальновидное решение.
Главную роль в создании и развитии КПИ сыграли меценаты, или, как сейчас говорят, спонсоры. Меценатство было очень распространенным на территории Российской империи. Поэтому средства на развитие нового высшего учебного заведения в Киеве выделили "сахарные короли" Николай Терещенко с сыновьями, Лазарь Бродский, выдающийся художник-маринист Константин Айвазовский и другие.
Значительный вклад в развитие КПИ сделала Киевская городская дума, а также население Киева, которое за короткое время собрало более 300 000 рублей. Кадровую базу всех тридцати пяти кафедр вновь созданного института составили известные ученые из Петербурга, Москвы, Харькова и Киева.
Первым ректором Киевского политехнического стал Виктор Кирпичев - председатель Южного общества технологов, известный ученый в области механики и сопротивления материалов, автор первого в стране учебника "Детали машин", который до той поры занимал должность директора Харьковского технологического института.
В КПИ пришли также такие признанные ученые и педагоги, как один из организаторов Киевского физико-математического общества член-корреспондент Петербургской академии наук Василий Ермаков, один из основателей украинской школы паротурбиностроения Александр Радциг, общепризнанный авторитет с теории резания металлов и одновременно известный в стране специалист по мельницам и мукомольным технологиям. Константин Зворыкин, выдающийся ученый в области нефтехимии Михаил Коновалов, выдающийся специалист в области почвообрабатывающей техники и технологий Камилл Шиндлер; чуть позже - выдающийся ученый-мостостроитель, позднее - основатель украинской школы электросварки Евгений Патон, один из самых авторитетных, несмотря на молодой возраст, ученых в области прикладной механики, сопротивления материалов и устойчивости механических систем Степан Тимошенко и многие другие. Они не только быстро наладили в КПИ учебный процесс по соответствующим направлениям, но и стали основателями научных школ, традиции которых хранятся и развиваются до сих пор.
8. Теги спойлеру <details> та <summary>
Наступні теги, які ми розглянемо - це теги <details> та <summary>.
Тег <details> це спойлер, який дозволяє приховати інформацію і показувати її після натискання на значок спойлера. За замовчуванням, спойлер формується у вигляді трикутничка і тексту "детальніше". Якщо Ви хочете замість цього напису вставити свій, то треба скористатися тегом <summary>
Тег <summary> показує заголовок для тега <details> і має стояти першим всередині <details>
Код виглядає так:
<details>
<summary>Інформація про автора</summary>
<p>Пичко Валерій, викладач курсів підвищення кваліфикації НМК ІПО КПІ ім. Ігоря Сікорського </p>
</details>
Готовий результат виглядає так: (натиснить на напис Інформація про автора)
Інформація про автора
Пичко Валерій, викладач курсів підвищення кваліфикації НМК ІПО КПІ ім. Ігоря Сікорського
За допомогою таких тегів можна швидко організувати на сайті тест для самоконтролю із запитаннями та відповідями при натисканні кнопки. Наприклад:
Що означає 404 помилка?
У цьому прикладі код виглядає так:
Відповідь
Запитувану сторінку не знайдено
<details>
<summary><span style="font-size: medium;">
<span style="color: blue;"><b>Відповідь</b></span></span>
</summary>
<p><span style="font-size: medium;"><b>Запитувану сторінку не знайдено</b></span></p>
</details>
9. Меню типу "баян"
Зразок меню:
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>
Після цього при виборі у тулбарі BLOGGER заголовка з тегом h1 ( режим «Основний заголовок») текст заголовка буде набраний капітеллю.
13. Зміна картинки при наведенні курсору. Подія onmouseover.
Подія onmouseover - один з найпопулярніших атрибутів, що застосовується для створення різних ефектів із зображеннями та іншими об'єктами веб-сторінки. Зазвичай, працює у зв'язку з подією onmouseout.
Для того, щоб спрацювала подія onmouseover, досить просто навести курсор миші на елемент, до якого додано цей атрибут. У смартфоні або на пристої з сенсорним екраном треба буде торкнутися зображення для перемикання, а потім торкнутися іншої частини екрану для зворотнього перемикання.
Для прикладу розглянемо організацію на сайті зміни зображення при наведенні на нього курсору миші, щоб показати, як фотографія моделі виглядала до та після її обробки у редакторі Фотошоп.
Код виглядатиме так:
<img onmouseout="this.src='посилання на перше зображення'"
onmouseover="this.src='посилання на друге зображення'"
src="посилання на перше зображення" />
14. Текстові позначення кольору
Шістнадцяткові значення всіх кольорів (ну, майже всіх), що використовуються у веб-дизайні, можна взяти на сторінці Таблиця кольорів.
КОЛІР |
ЗРАЗОК КОЛЬОРУ |
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 |