tag:blogger.com,1999:blog-36388235553963141402024-03-27T08:37:10.666+02:00Веб-майстерНавчальний посібник для слухачів курсів підвищення кваліфікації науково-педагогічних працівників Unknownnoreply@blogger.comBlogger15125tag:blogger.com,1999:blog-3638823555396314140.post-16602350835407360132023-03-28T21:15:00.006+03:002023-03-29T13:44:21.031+03:00Лінія розділу - тег <hr>Лінія розділу - тег <hr> (або <hr /> для XHTML)<hr> (horizontal ruler) не потребує закриваючого тега та ставиться на тому місці, де Вам потрібно намалювати лінію розділу та візуально розділити функціональні модулі сторінки. Наприклад так:
Не на всіх движках передбачено використання «горизонтальної лінії» як віджету. Наприклад у JIMDO є віджет "лінія", аUnknownnoreply@blogger.comtag:blogger.com,1999:blog-3638823555396314140.post-91879606997969095842023-03-28T21:00:00.004+03:002023-03-29T13:45:50.575+03:00Виділення частини тексту всередині документа за допомогою тегу <blockquote>Цікавий блоковий елемент <blockquote> призначений для виділення всередині документа довгих цитат, або частини тексту, на яку слід звернути увагу.Текст, який виділяється цим тегом, традиційно відображається як вирівняний блок з відступами ліворуч і праворуч (приблизно по 40 пікселів), а також відступами зверху і знизу.Блоковий елемент <blockquote>, як і інші блокові елементи, займає Unknownnoreply@blogger.comtag:blogger.com,1999:blog-3638823555396314140.post-30333392739335014462023-03-28T20:50:00.016+03:002023-03-31T13:13:23.512+03:00Як створити просту кнопку на сайтіУ деяких SaaS сервісах (наприклад, JIMDO) є віджет із різними зображеннями кнопки. У сервісі BLOGGER передбачається організація посилання прямо за текстом чи простими засобами html розмітки. Давайте розглянемо, як зробити просту кнопку на веб-сайті. Зробити її можна двома способами. Перший - це за допомогою тега <button> з подією onclick. Другий – за допомогою CSS коду. Другий спосіб Unknownnoreply@blogger.comtag:blogger.com,1999:blog-3638823555396314140.post-43273870293394218132023-03-28T20:40:00.010+03:002023-03-29T13:47:19.858+03:00Тег рядка, що біжитьТег макей (<marquee>) дозволяє зробити на сайті рядок, що біжить. Деякі довідники html пишуть, що Тег <marquee> вважається застарілим, і W3D не рекомендує його використовувати. Начебто, під час використання цього тегу можуть виникнути проблеми з валідністю коду. Однак, під час роботи з SaaS-сервісами BLOGGER та JIMDO такого поки що не спостерігалося. У сервісі BLOGGER його навітьUnknownnoreply@blogger.comtag:blogger.com,1999:blog-3638823555396314140.post-36002799417755764652023-03-28T20:20:00.015+03:002023-04-24T20:52:45.463+03:00Підказка у тексті за допомогою атрибуту titleПідказку у тексті сайту можна зробити декількома способами. Найпростіший варіант - за допомогою атрибуту title у тегу посилання <a>. Атрибут описує вміст елемента у вигляді підказки, яка з'являється при наведенні курсору на елемент.Така підказка зазвичай використовується на гіперпересилках (як у Вікіпедії) . Вигляд такої підказки залежить від браузера, налаштувань Unknownnoreply@blogger.comtag:blogger.com,1999:blog-3638823555396314140.post-71369322495446934182023-03-28T20:10:00.013+03:002023-03-29T13:49:08.420+03:00Тег блокового елемента <div> <div> - це блоковий елемент, який призначений для виділення фрагмента документу з метою зміни його вигляду.Блоковим називається елемент, який відображається на веб-сторінці у вигляді уявного (невидимого), або видимого прямокутника. Такий елемент займає всю доступну ширину, висота елемента визначається його вмістом, і починається він з нового рядка.Основою блоку виступає його контент (це Unknownnoreply@blogger.comtag:blogger.com,1999:blog-3638823555396314140.post-90187492106822531152023-03-28T20:00:00.016+03:002023-04-02T11:05:19.214+03:00Блок з прокруткою overflowЩе один приклад використання блоку, це блок з прокруткою overflow. Якщо необхідно ознайомити відвідувача сайту з будь-яким документом без переходу на нову сторінку (ліцензійна угода, договір оферти, інструкцію тощо), але при цьому не прибирати документ для ознайомлення під кат, то можна скористатися технологією створення «блоку з прокруткою overflow". Тобто можна показати необхідний документUnknownnoreply@blogger.comtag:blogger.com,1999:blog-3638823555396314140.post-72966476287364656012023-03-28T19:50:00.017+03:002023-04-02T23:25:34.952+03:00Меню типу "баян"Ще одна Html кориснисть - це бокове навігаційне меню типу "баян", що розтягується при наведенні курсору.Таке меню зазвичай застосовується у сайдбарі сайту, але у смартфоні працює не так ефективно, як на десктопі. Використовується для сайтів, що зроблені на платформі BLOGGER. У цьому движку штатними засобами віджетів не можна робити розділи випадаючого підменю.Меню отримало свою назву від Unknownnoreply@blogger.comtag:blogger.com,1999:blog-3638823555396314140.post-33450809250282496442023-03-28T19:40:00.010+03:002023-03-29T13:52:30.005+03:00Теги спойлеру <details> та <summary>Наступні теги, які ми розглянемо - це теги <details> та <summary>.
Тег <details> це спойлер, який дозволяє приховати інформацію і показувати її після натискання на значок спойлера. За замовчуванням, спойлер формується у вигляді трикутничка і тексту "детальніше". Якщо Ви хочете замість цього напису вставити свій, то треба скористатися тегом <summary>
Тег <Unknownnoreply@blogger.comtag:blogger.com,1999:blog-3638823555396314140.post-35820716207556005802023-03-28T19:30:00.003+03:002023-04-02T12:49:24.585+03:00Як створити посилання в межах контенту однієї сторінкиЯкщо потрібно створити посилання в межах контенту однієї сторінки, використовуємо атрибут name (або id).Атрибут name використовується для визначення анкора всередині сторінки (наприклад, назва розділу чи параграфу). У тому місці, куди буде вести посилання, робимо закладку, даємо їй назву (наприклад «закладка 1») та прописуємо атрибут name тега <a> таким чином:<p><a name="закладка 1Unknownnoreply@blogger.comtag:blogger.com,1999:blog-3638823555396314140.post-13745762879336740182023-03-28T19:20:00.004+03:002023-03-28T22:59:02.434+03:00Прибираємо частину контенту під кат за допомогою спойлераБуває, що частину контенту на сторінці сайту треба прибрати під кат (тобто сховати від просмотру) та зробити доступним при натисканні на кнопку. Наприклад, платіжні реквізити, ліцензійні угоди, договір оферти тощо. Вирішити таку задачу можна організацією спойлера з подією onclick. Подія onclick виникає при натисканні лівою кнопкою миші на елементі (наприклад, на простій кнопці), до якого Unknownnoreply@blogger.comtag:blogger.com,1999:blog-3638823555396314140.post-14119046335660718982023-03-28T19:10:00.011+03:002023-04-02T23:42:57.523+03:00Набір заголовка капітеллюОдним із способів виділення заголовка в тексті є набір його капітеллю.Капітель - це таке зображення в гарнітурі, в якій малі знаки виглядають, як зменшені великі. Щоб підкреслити різницю між капітеллю і малими літерами, її роблять трохи вище малих, а відстань між знаками збільшують.У кирилиці, як правило, капітель в основному тексті не застосовується, тому що в більшості літер немає різниці між Unknownnoreply@blogger.comtag:blogger.com,1999:blog-3638823555396314140.post-46613775798443142002023-03-28T19:00:00.002+03:002023-04-14T23:13:11.284+03:00Зміна картинки при наведенні курсоруПодія onmouseoverПодія onmouseover - один з найпопулярніших атрибутів, що застосовується для створення різних ефектів із зображеннями та іншими об'єктами веб-сторінки. Зазвичай, працює у зв'язку з подією onmouseout. Для того, щоб спрацювала подія onmouseover, досить просто навести курсор миші на елемент, до якого додано цей атрибут. У смартфоні або на пристої з сенсорним екраном треба буде Unknownnoreply@blogger.comtag:blogger.com,1999:blog-3638823555396314140.post-28035263227150183932023-03-27T00:57:00.024+03:002023-03-29T13:55:52.748+03:00Текстові позначення кольоруНа веб-сторінках існує декілька різновидів представлення кольору:За допомогою кольорової моделі RGB - це червоний (Red), зелений (Green) та синій (Blue) кольори з їх числовою кількістю (від 0 до 255). Можливий четвертий параметр, який визначає ступінь непрозорості кольору. Наприклад, rgba (0, 255, 0, 0.3) що відповідає зеленому коліру із прозорістю 70 %.Використовується також шістнадцяткове Unknownnoreply@blogger.comtag:blogger.com,1999:blog-3638823555396314140.post-51367025627948772832022-05-28T23:28:00.017+03:002023-04-24T16:23:26.912+03:00Таблиця спеціальних символів HTML ☜Спеціальні символи у коді html
Окрім звичайного тексту, засобами гіпертекстової розмітки на сайті можна розміщувати і деякі спеціальні символи.У таблиці нижче наведено деякі символи, які можна скопіювати та вставити до тексту документа на веб-сторінці або до тексту повідомлення у соціальних мережах. Для зміни розміру та кольору спеціальних символів можна використовувати звичайні теги для Unknownnoreply@blogger.com