Кнопка html: прымяненне, выраб

Пачаткоўцы стваральнікі сайтаў (не тыя, хто выкарыстоўвае гатовыя рашэнні, а менавіта тыя, хто хоча ствараць сайты самастойна) вывучаюць html, аднак не заўсёды атрымоўваецца з першага разу зразумець усе нюансы стварэння сайта сваімі рукамі.

Кнопка html ў меню сайта ў стылі дызайну

Спасылкі - гэта адзінае, што можа дазволіць пераход з адной старонкі на іншую, аднак простыя спасылкі - гэта поўная адсутнасць дызайнерскай мадэлі, таму трэба шукаць варыянты таго, як акультурыць спасылку і надаць ёй прыгожы выгляд.

Кнопкі для сайта html выконваюць дзве функцыі: па-першае, яны даюць магчымасць пераходу на зададзеную старонку, а па-другое, маюць дызайн, які ўпісваецца і гармануе з агульным стылем старонкі.

Кнопка, па сваёй сутнасці з'яўляецца той жа самай спасылкай, толькі якая мае прыемны выгляд і, калі патрабуецца, якая змяняе адценні або форму пры кліку або навядзенні на яе.

Як зрабіць кнопку ў html

Зрабіць кнопку можна двума спосабамі: самому або выкарыстоўваючы сэрвісы для стварэння кнопак.

Першы спосаб дазваляе навучыцца і зразумець сутнасць ўсёй працы, а другі - проста атрымаць вынік, ды да таго ж абмежаваны ў магчымасцях.

Кнопкі html для сайта - гэта не столькі складаная праца па стварэнні, колькі працаёмкае ажыўленне кнопкі. Пад словам «ажыўленне» маецца на ўвазе зрабіць яе якая рэагуе на клік, навядзенне або змяніць у момант націску, для чаго трэба выкарыстоўваць CSS ці JavaScript.

Кнопка з выкарыстаннем выявы

Простая кнопка html мае выгляд карцінкі-спасылкі і ствараецца шляхам ўстаўкі тэга 'a' (спасылкі) на тэг img (малюнак).

Ўказаны прыклад, па сутнасці, з'яўляецца просты малюначкам-спасылкай, аднак можа мець любы выгляд і выдатна ўпісвацца ў дызайн, аднак дадзеная кнопка html не можа «працаваць», гэта значыць мяняць выгляд у розных сітуацыях.

Для таго каб кнопка мела нестандартны выгляд і магла мяняцца ў залежнасці ад сітуацыі, варта змяніць яе першапачатковы выгляд і дадаць CSS.

Кнопкі для сайта з ужываннем CSS

CSS - гэта іншае мова праграмавання, які адказвае толькі за стылі і называецца каскаднай табліцай стыляў.

Код кнопкі для сайта html будзе мець выгляд:

• < "A" h "r" e "f =" Тут варта адзначыць адрас старонкі ў інтэрнэце "class =" ">

Увага! Пры выкарыстанні прыкладаў, выдаліце значок ", каб атрымалася a і href.

Прыведзены прыклад - гэта простая спасылка, якая будзе ператворана ў патрэбным стылі пры дапамозе CSS, дзе class вызначае назву класа ў css, каб код быў ужыты менавіта да гэтага элементу на старонцы.

• .topbutton {/ * клас кнопкі * /
• width: 111px; / * - шырыня кнопкі ў 111 пікселяў * /
• border: 1px solid # 000; / * - рамка для кнопкі ў 1 піксель, суцэльная і чорная * /
• background: #red; / * - заліванне кнопкі - чырвоны * /
• text-align: left; / * - выраўноўванне тэксту на кнопцы па левым краі * /
• padding: 10px; / * - водступы ад знешніх элементаў на старонцы * /
• color: #fff; / * - колер тэксту, у дадзеным выпадку белы * /
• font-family: verdana; / * - шрыфт тэксту (можна адкрыць і абраць у Word) * /
• font-size: 8px; / * - памер тэксту на кнопцы * /
• border-radius: 3px; / * - акругленне кутоў кнопкі * /
• }

Заўвага. / * Каментар * / - такім чынам у CSS кодзе можна пакідаць каментары.

Напэўна нават самому пачаткоўцу кодэр зразумелы сэнс гэтага прыкладу, але варта сказаць, што тут выкарыстоўваецца невялікі код, які дазваляе зрабіць самую простую кнопку, а для прымяненне стыляў пры навядзенні або актыўнасці спасылкі варта ўжываць дадатковыя тэгі і параметры.

Больш складаная кнопка для сайта

Кнопкі на сайце могуць выкарыстоўваць не толькі CSS для свайго вонкавага выгляду, таксама ўжываюцца і іншыя мовы праграмавання, якія дазваляюць зрабіць якасныя кнопкі html сайтаў, напрыклад JavaScript, які больш магутны і можа рэалізаваць больш цікавых ідэй для сайта.

Адзінае адрозненне паміж мовамі праграмавання - гэта складанасць у рэалізацыі, і калі JavaScript - больш магутны, адпаведна, і яго вывучэнне займае больш часу.

Акрамя просты задачы ў выглядзе перасылак карыстальнікаў па іншых адрасах сайта, кнопка html выконвае і больш сур'ёзную працу, якая заключаецца ў адпраўцы дадзеных з формы, у якую карыстач увёў свае дадзеныя, напрыклад, рэгістрацыя.

Код кнопкі html у дадзеным выпадку мае выгляд:

• < "Input" type = "botton" name = "імя кнопкі для php" value = "тэкст, які адлюстроўваецца на кнопцы">

Увага! Пры выкарыстанні прыкладаў выдаліце ", каб атрымалася input.

Рэалізаваць кнопку такога роду вельмі проста, і на прыкладзе паказана працоўная кнопка, якая выканае адпраўку уведзеных дадзеных з формы.

• Type - вызначае, што гэты элемент з'яўляецца кнопкай.
• Name - з'яўляецца элементам, які робіць кнопку ўнікальнай.
• Value - адлюстроўвае надпіс на кнопцы.

Уся праблема заключаецца не ў тым, каб зрабіць кнопку html, а ў тым, каб рэалізаваць апрацоўку дадзеных, якія прыслаў карыстальнік, для чаго патрабуецца веданне больш складанага, але аднаго з самых магутных, мовы праграмавання. PHP дазваляе рабіць сапраўдныя сайты і, напрыклад, некаторыя гатовыя CMS напісаны менавіта на ім.

Кнопкі, напісаныя для формаў, гэтак жа як і звычайныя, могуць быць ператвораныя ў патрабаваны выгляд, аднак іх прызначэнне мае вялікую важнасць і нясе больш адказнасці.

Акрамя ручнога спосабу стварэння кнопкі, існуюць розныя сэрвісы, якія ў аўтаматычным рэжыме могуць стварыць розныя кнопкі і падагнаць іх пад ваш густ, аднак у дадзеным спосабе ёсць адчувальны недахоп - для прымянення гэтых кнопак прыйдзецца вывучыць html.

Вывучэнне html спатрэбіцца для таго, каб зразумець, куды усталёўваецца кнопка сайта - у меню, блок які выводзіць кантэнт, або ў footer (самы ніз сайта) сайта.