Увод у ХТМЛ
ХТМЛ се, као што сви знају, зове ХиперТект Маркуп Лангуаге, који се користи за приказивање текстова на вашем претраживачу и уз помоћ његових посебних скрипти као што су ЈаваСцрипт и ЦСС, а ваш садржај ће постати леп. Кодирање у боји је део оне која уљепшава вашу ХТМЛ страницу.
Код боје у ХТМЛ-у дјелује као идентификатор који идентифицира и представља ту боју на вебу. Најчешће кориштено кодирање боја је ХЕКС који представља 'Хекадецимал' код за ту боју. Слично томе, постоје и други кодови боја попут кратице РГБ за 'Црвена, Зелена, Плава'. Још један код боје назван ХСЛ, скраћеница за "Хуе, Сатуратион, Лигхтнесс". ХСЛ је додатна предност при одабиру боје по вашем избору.
Будући да се генерално препоручује употреба хексадецималних кодова, ми смо објаснили хексадецималне кодове према нама. Шестерокутни кодови боја садрже симбол, хеш (#) и скуп од шест цифара или бројева. Они се налазе у хексадецималном бројевном систему, па је „ФФ“ највећи број и представља „ 255“ из хексадецималног бројачког система.
Ових шест цифара садрже три пара који представљају РБ код боје. Од ових шест цифара, први пар од две цифре представља интензитет ваше црвене боје. Тако ће „ФФ“ за место нашег првог пара представљати црвену боју са максималним интензитетом. '00' се користи за најмањи интензитет, а 'ФФ' за највећи. Да би добили „зелену“ боју, средњи пар представља интензитет.
Слично као и за „Блуе“, последњи пар представља интензитет.
- Тако ће резултирати хексадецимални број као што је # ФФ0000
- Резултат ће бити хексадецимални број као што је # 00ФФ00
- И шеснаестикимални број, као што је # 0000ФФ, резултираће
- Да бисте добили жуту боју, која је комбинација 'црвене' и 'зелене', ствара се слични шеснаести број као # ФФФФ00.
ХТМЛ Цолор Пицкер
Бирач боја када се креира омогућава кориснику да " одабере" боју по сопственом избору. Најобичнији избор боја користи се у Виндовс апликацијама као што су МС Ворд или Паинт и други. Сви сте упознати са алатом за избор боја, можете да претрчите своју меморију гледајући слику испод:
Тип уноса као „боја “ користи се за креирање поља за унос која ће садржавати боју. Али неки прегледачи као што су Интернет Екплорер 11 и старије верзије не подржавају овај тип уноса. Према томе, у зависности од прегледача, уређај за одабир боја појавиће се када користите врсту уноса. Неки прегледачи ће ово поље за унос једноставно претворити у текстуално поље као испод:
Према томе, када се користи подржани прегледач, исти код ће резултирати следећом палетом за одабир боја
А када се кликне на ту обојену кутију, појављује се палета боја. Овде користим верзију Гоогле Цхроме-а '78.0.3904.97' која подржава атрибут боје уноса.
Код за креирање таквог бирача боја биће објашњен у следећем одељку.
Изворни код за креирање алата за одабир боја
Следи објашњење за креирање најједноставнијег бирача боја у ХТМЛ-у. Погледајте код испод:
Код
Select your favorite color:
Горњи ХТМЛ код садржи ФОРМ елемент који користи тип уноса зван „боја“. Ова врста уноса у боји ствара и приказује најједноставнији алат за бирање боја, Виндовс стандардни изборник боја. Омогућује кориснику да одабере боју по свом избору.
Тип уноса као боја ствара поље са текстом или више дугмета које као задану боју позадине имају 'Црно'. Када кликнемо на њега, кориснику се приказује избор боја.
Обратите пажњу на рад овог бирача боја дат испод:
Корак 1: Кликом на дугме "Црно" као задану боју позадине.
Горњи код једноставно ствара дугме као што је приказано горе.
2. корак: Кликните и одаберите нову боју.
Корак 3 : Изабрали смо јарко зелену боју за демонстрацију. Кликните на дугме 'ОК' .
На горњим снимцима екрана лако можете видети да је изабрана боја приказана у последњем снимку екрана.
Тип уноса "цолор" пружа ову једноставну функцију бирања боја у ХТМЛ5. Након одабира ваше боје, на вама је да одаберете за коју се боју можете користити.
У следећем примеру сам појачао горњи пример и модификовао га са неким укључењима.
Следећи пример је комбинација ХТМЛ-а и Јавасцрипта. Овај пример садржи ФОРМ елемент који користи унос ознаке типа 'цолор'. Овај ОБРАЗАЦ када се преда, активира се наш ЈАВАСЦРИПТ.
Придржавајте се изворног кода за ФОРМ елемент испод:
Шифра:
Select your favorite color:
У претходни програм смо додали нову линију. Дугме за пријаву. Ово дугме за пријаву када се кликне, активира се наша Јава скрипта која је дата у наставку:
function ReturnColor(c)
(
//saving the selected color value by ID
var c= document.getElementById("color").value;
var str= new String ("You chose:");
//The color is saved as its HEX color code.
document.write(str+c);
)
Када се кликне на дугме „Пошаљи“, активира се наша функција у Јавасцрипт-у. Горња функција, РетурнЦолор (), враћа ХЕКС код, то јест хексадецимални код за одабрану боју од стране нашег бирача боја. Када се код изврши, следећи је излаз.
Горњи излаз је у ХЕКС коду. 6 бројева представљају укључивање црвене, зелене и плаве боје, што резултира одабраном бојом. Овај ХЕКС код се такође може лако претворити у РГБ код.
Слично томе, можемо да сачувамо горњи код и да га поставимо као боју позадине или боје фонта за корисника. Да бисмо то учинили, додали смо још неколико редака кода у свој већ постојећи изворни код.
Следи цео код, а ХТМЛ тело остаје исто:
function ReturnColor(c)
(
//saving the selected color value by ID
var c= document.getElementById("color").value;
var str= new String ("You chose:");
//The color is saved as its HEX color code
document.write(str+c);
document.write("
");
//A HEX color code can be converted into RGB code
var R=c.slice(1, 3);
var G=c.slice(3, 5);
var B=c.slice(5);
//Displaying the corresponding RGB code
document.write("In RGB format, RGB("
+ parseInt(R, 16) + ", "
+ parseInt(G, 16) + ", "
+ parseInt(B, 16) + ")");
document.write("
");
//Setting our selected color as Font color
var color = c;
var str1 = "Your color will appear as this font color";
var str2 = str1.fontcolor(c);
document.write(str2);
//Setting our selected color as Background color
document.write(" ");
)
Ово је наш комплетан сценарио. Када се код изврши и одабере боју, следећи је излаз који се приказује.
Закључак
Много је начина и много комбинација које вам могу помоћи да креирате бирач боје, онај превише паметан. На пример, уз комбинацију ХТМЛ5 и ЦСС заједно са ЈаваСцрипт-ом, можете користити још један елемент који се зове „цанвас“ који има сопствене библиотеке који помажу у стварању лаганог, малог и бирајућег боја боја. Али то је други пут.
Препоручени чланци
Ово је водич за ХТМЛ Цолор Пицкер. Овде смо расправљали о Уводу, ХТМЛ боји Пицк тхе Соурце Цоде заједно са кодовима. Можете и да прођете кроз друге наше предложене чланке да бисте сазнали више -
- Атрибути ХТМЛ стила
- ХТМЛ текстуална веза
- Ознаке ХТМЛ слике
- Шта је ХТМЛ5?
- Поставите боју позадине у ХТМЛ-у са примјером