Въведение в HTML
HTML, както всички знаят, се нарича HyperText Markup Language, който се използва за показване на текстове във вашия браузър и с помощта на специалните му помощни скриптове като JavaScript и CSS, което съдържанието ви става красиво за гледане. Цветното кодиране е част от тази разкрасяваща вашата HTML страница.
Цветовият код в HTML работи като идентификатор, който идентифицира и представя този цвят в мрежата. Често използваното цветово кодиране е от HEX, който представлява код „Шестнадесетичен“ за този цвят. По подобен начин има и други цветови кодове като RGB кратко за „Червено, зелено, синьо“. Друг цветен код, наречен HSL, съкратен от 'Hue, Saturation, Lightness'. HSL е допълнително предимство при избора на цвят по ваш избор.
Тъй като обикновено се предпочита използването на шестнадесетични кодове, ние обяснихме шестнадесетичните кодове по най-добрия начин. Шестнадесетичните цветови кодове съдържат символ, хеш (#) и набор от шест цифри или числа. Те са в шестнадесетичната система от числа, така че „FF“ е най-голямото число и представлява „ 255“ от шестнадесетичната система от числа.
Тези шест цифри съдържат три двойки, представляващи RB цветен код. От тези шест цифри, първата двойка от две цифри представлява интензитета на вашия цвят "Червен". Така „FF“ за мястото на първата ни двойка ще представлява червения цвят с максимална интензивност. '00' се използва за най-малка интензивност, а 'FF' за най-висока. За получаване на "зелен" цвят, средната двойка представлява интензитета.
Подобно на 'Blue', последната двойка представлява интензитета.
- Така че шестнадесетичното число като # FF0000 ще доведе до
- Шестнадесетичното число като # 00FF00 ще доведе до
- И шестнадесетично число като # 0000FF ще доведе до
- За да получите жълт цвят, който е комбинация от „Червен“ и „Зелен“, се създава подобно шестнадесетично число като # FFFF00.
Избор на HTML цветове
Избор на цвят, когато е създаден, позволява на потребителя да " избира" цвят по свой избор. Най-стандартният избор на цвят се използва в приложения за Windows, като в MS Word или Paint и други. Всички сте запознати с цветовия подбор, можете да пробудите паметта си, като погледнете снимката по-долу:
Тип на въвеждане като "цвят " се използва за създаване на полета за въвеждане, които ще съдържат цвят. Но някои браузъри като Internet Explorer 11 и по-стари версии не поддържат този тип вход. По този начин, в зависимост от браузъра, се избира цветен подборчик, когато използвате типа на въвеждане. Някои браузъри просто ще превърнат това поле за въвеждане в текстово поле като по-долу:
По този начин, когато се използва поддържан браузър, същият код ще доведе до следната палитра за избор на цвят
И когато щракнете върху тази цветна кутия, се появява цветна палитра. Тук използвам версия на Google Chrome „78.0.3904.97“, която поддържа атрибута за цвят на входа.
Кодът за създаване на такъв избор на цвят ще бъде обяснен в следващия раздел.
Изходен код за създаване на избор на цвят
Следва обяснение за създаването на най-простият избор на цветове в HTML. Вижте кода по-долу:
код
Select your favorite color:
Горният HTML код съдържа FORM елемент, който използва входен тип, наречен „color“. Този тип въвеждане на цветове създава и показва най-простият избор на цветове, стандартния избор на цвят за Windows. Тя позволява на потребителя да избере цвят по свой избор.
Типът на въвеждане като цвят създава текстово поле или повече от бутон, който има "Черен" като цвят на фона по подразбиране. Когато щракнем върху него, той показва избор за цветове за потребителя.
Спазвайте работата на този подбор на цветове, даден по-долу:
Стъпка 1: Щракнете върху бутона с "Черен" като цвят на фона по подразбиране.
Горният код просто създава бутон, както е показано по-горе.
Стъпка 2: Щракнете и изберете вашия нов цвят.
Стъпка 3 : Избрахме ярко зелен цвят за демонстрация. Кликнете върху бутона „OK“ .
В горните екранни снимки можете лесно да видите, избраният цвят е показан в последната екранна снимка.
Типът на въвеждане „цвят“ осигурява тази проста функционалност за избор на цвят в HTML5. След като изберете цвета си, това е вашият избор за какво може да се използва избраният цвят.
В следващия пример увеличих горния пример и го модифицирах с някои включвания.
Следващият пример е комбинация от HTML и Javascript. Този пример има FORM елемент, който използва входния маркер тип "color". Тази ФОРМА, когато е изпратена, се задейства нашата JAVASCRIPT.
Спазвайте изходния код за елемента FORM по-долу:
Код:
Select your favorite color:
Добавихме нов ред към предишната ни програма. Бутон за подаване Този бутон за изпращане при натискане се задейства нашия скрипт на Java, който е даден по-долу:
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);
)
Когато щракнете върху бутона „Изпращане“, нашата функция в javascript се задейства. Горната функция, ReturnColor (), връща HEX кода, тоест шестнадесетичен код за избрания цвят от нашия избор на цвят. Когато кодът се изпълнява, следното е нашият изход.
Горният изход е в HEX код. 6-те числа представляват включването на червен, зелен и син цвят, което води до избрания цвят. Този HEX код също може лесно да се преобразува в RGB код.
По същия начин можем да запишем горния код и да го зададем като цвят на фона или цвят на шрифта за потребителя. За целта добавихме още няколко реда код във вече съществуващия ни изходен код.
Следва пълният код, като HTML тялото остава същото:
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(" ");
)
Това е пълният ни сценарий. Когато кодът се изпълни и е избран цвят, следното е изходът, който се показва.
заключение
Има много начини и много комбинации, които могат да ви помогнат да създадете подбор на цвят, който е твърде умен. Например, с комбинацията от HTML5 и CSS заедно с JavaScript, можете да използвате още един елемент, наречен „canvas“, който има свои собствени библиотеки, които помагат да се създаде лек, малък и кръстосан за избор на цветове браузър. Но това е за друг път.
Препоръчителни статии
Това е ръководство за HTML Избор на цветове. Тук обсъждаме Въведение, HTML Цвят Изберете Изходния код заедно с кодовете. Можете да разгледате и другите ни предложени статии, за да научите повече -
- Атрибут на HTML стил
- HTML текстова връзка
- HTML маркери за изображения
- Какво е HTML5?
- Задайте цвят на фона в HTML с пример