Úvod do HTML
HTML, jak všichni vědí, se nazývá HyperText Markup Language, který se používá k zobrazování textů v prohlížeči a pomocí jeho speciálních pomocných skriptů, jako je JavaScript a CSS, se na obsah vašeho obsahu můžete podívat. Barevné kódování je součástí zkrášlování vaší webové stránky HTML.
Barevný kód v HTML funguje jako identifikátor, který identifikuje a představuje tuto barvu na webu. Běžně používané barevné kódování je HEX, které představuje „hexadecimální“ kód pro tuto barvu. Podobně existují i jiné barevné kódy, jako je RGB zkratka pro „Červená, Zelená, Modrá“. Další barevný kód s názvem HSL, zkratka pro „Hue, Saturation, Lightness“. HSL je další výhodou při výběru barvy podle vašeho výběru.
Protože se obecně dává přednost použití hexadecimálních kódů, vysvětlili jsme hexadecimální kódy podle našeho nejlepšího vědomí. Hexadecimální barevné kódy obsahují symbol, hash (#) a sadu šesti číslic nebo čísel. Jsou v systému hexadecimálních čísel, takže „FF“ je nejvyšší číslo a představuje „ 255“ ze systému hexadecimálních čísel.
Těchto šest číslic obsahuje tři páry představující barevný kód RB. Z těchto šesti číslic představuje první dvojice dvou číslic intenzitu vaší „červené“ barvy. Takže „FF“ pro místo našeho prvního páru bude představovat červenou barvu s maximální intenzitou. '00' se používá pro nejmenší intenzitu a 'FF' pro nejvyšší. Pro získání „zelené“ barvy představuje střední dvojice intenzitu.
Podobně jako u „Blue“ představuje poslední pár intenzitu.
- Výsledkem bude hexadecimální číslo, jako je # FF0000
- Výsledkem bude šestnáctkové číslo, například # 00FF00
- Výsledkem bude hexadecimální číslo, jako je # 0000FF
- Chcete-li získat žlutou barvu, která je kombinací „červené“ a „zelené“, vytvoří se podobné hexadecimální číslo, například # FFFF00.
Výběr barvy HTML
Výběr barvy při vytvoření umožňuje uživateli „ vybrat“ barvu podle vlastního výběru. Nejstandardnější výběr barev se používá v aplikacích Windows, jako je MS Word nebo Paint a další. Všichni jste obeznámeni s výběrem barev, můžete si zablokovat paměť podle obrázku níže:
Typ vstupu jako „barva “ se používá pro vytváření vstupních polí, která budou obsahovat barvu. Některé prohlížeče jako Internet Explorer 11 a starší verze však tento typ vstupu nepodporují. V závislosti na prohlížeči se tedy při použití typu vstupu objeví výběr barvy. Některé prohlížeče jednoduše změní toto vstupní pole na textové pole, jako je níže:
Při použití podporovaného prohlížeče tedy stejný kód povede k následující paletě pro výběr barvy
A když kliknete na toto barevné pole, objeví se paleta barev. Zde používám verzi Google Chrome „78.0.3904.97“, která podporuje atribut color type type input.
Kód pro vytvoření takového výběru barvy bude vysvětlen v následující části.
Zdrojový kód pro vytvoření výběru barvy
Následuje vysvětlení pro vytvoření nejjednoduššího výběru barev v HTML. Viz níže uvedený kód:
Kód
Select your favorite color:
Výše uvedený kód HTML obsahuje prvek FORM, který používá typ vstupu nazvaný 'color'. Tento typ vstupu barev vytváří a zobrazuje nejjednodušší výběr barvy, standardní výběr barvy systému Windows. Umožňuje uživateli vybrat barvu podle svého výběru.
Typ vstupu jako barva vytvoří textové pole nebo více tlačítka, které má jako výchozí barvu pozadí 'Černá'. Když na něj klikneme, zobrazí se výběr barev pro uživatele.
Postupujte podle níže uvedeného postupu pro výběr barvy:
Krok 1: Kliknutím na tlačítko s 'Black' jako výchozí barvou pozadí.
Výše uvedený kód jednoduše vytvoří tlačítko, jak je uvedeno výše.
Krok 2: Klikněte a vyberte novou barvu.
Krok 3 : Pro demonstraci jsme vybrali jasně zelenou barvu. Klikněte na tlačítko „OK“ .
Ve výše uvedených záběrech obrazovky můžete snadno vidět, že vybraná barva je zobrazena v posledním záběru obrazovky.
Typ vstupu 'color' poskytuje tuto jednoduchou funkci výběru barvy v HTML5. Po výběru barvy je na vaší volbě, pro co lze vybranou barvu použít.
V následujícím příkladu jsem zvětšil výše uvedený příklad a upravil ho s několika inkluzemi.
Následující příklad je kombinací HTML a Javascriptu. Tento příklad obsahuje prvek FORM, který používá značku typu vstupu „color“. Při odeslání tohoto formuláře se spustí náš JAVASCRIPT.
Sledujte zdrojový kód pro prvek FORM níže:
Kód:
Select your favorite color:
Do našeho předchozího programu jsme přidali nový řádek. Tlačítko odeslání. Po kliknutí na toto tlačítko se spustí náš skript Java, který je uveden níže:
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);
)
Po kliknutí na tlačítko „Odeslat“ se spustí naše funkce v javascriptu. Výše uvedená funkce ReturnColor () vrací HEX kód, tj . Hexadecimální kód pro vybranou barvu pomocí našeho nástroje pro výběr barvy. Po spuštění kódu je náš výstup následující.
Výše uvedený výstup je v HEX kódu. Šest čísel představuje zahrnutí červené, zelené a modré barvy, což má za následek zvolenou barvu. Tento HEX kód lze také snadno převést na RGB kód.
Podobně můžeme výše uvedený kód uložit a nastavit ho jako barvu pozadí nebo barvu písma pro uživatele. Za tímto účelem jsme do našeho již existujícího zdrojového kódu přidali několik řádků kódu.
Následuje kompletní kód, přičemž tělo HTML zůstává stejné:
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(" ");
)
Toto je náš kompletní skript. Když je kód spuštěn a je vybrána barva, je zobrazen výstup.
Závěr
Existuje mnoho způsobů a mnoha kombinací, které vám mohou pomoci vytvořit výběr barvy, který je příliš chytrý. Například kombinací HTML5 a CSS a JavaScriptu můžete použít ještě další prvek nazvaný 'canvas', který má své vlastní knihovny, které pomáhají vytvořit lehký, malý a křížový prohlížeč barev. Ale to je jindy.
Doporučené články
Toto je průvodce výběrem barev HTML. Zde diskutujeme Úvod, HTML Color Picker zdrojový kód spolu s kódy. Další informace naleznete také v dalších navrhovaných článcích -
- Atribut stylu HTML
- HTML textový odkaz
- Značky obrázků HTML
- Co je to HTML5?
- Nastavte barvu pozadí v HTML s příkladem