Introduktion till HTML
HTML kallas, som alla vet, HyperText Markup Language, som används för att visa texter i din webbläsare och med hjälp av dess speciella hjälpskript som JavaScript och CSS, blir innehållet i din vackert att titta på. Färgkodning är en del av det som förskönar din HTML-sida.
Färgkod i HTML fungerar som en identifierare som identifierar och representerar den färgen på webben. Den vanligt använda färgkodningen är av HEX som representerar 'Hexadecimal' kod för den färgen. På liknande sätt finns det andra färgkoder som RGB förkortning för "Röd, Grön, Blå". En annan färgkod som heter HSL, förkortning för "Nyans, mättnad, ljushet". HSL är en extra fördel när du väljer färgen du väljer.
Eftersom i allmänhet användningen av hexadecimala koder föredras har vi förklarat de hexadecimala koderna på vårt bästa. Hexadecimala färgkoder innehåller en symbol, en hash (#) och en uppsättning av sex siffror eller siffror. De finns i det hexadecimala nummersystemet Så en "FF" är det högsta talet och representerar " 255" från det hexadecimala talsystemet.
Dessa sex siffror innehåller tre par som representerar RB-färgkoden. Av dessa sex siffror representerar det första paret med två siffror intensiteten för din "röda" färg. Så en "FF" för platsen för vårt första par kommer att representera den röda färgen med maximal intensitet. '00' används för minst intensitet och 'FF' för den högsta. För att få en "grön" färg representerar mittparet intensiteten.
På samma sätt för "Blue" representerar det sista paret intensiteten.
- Så ett hexadecimalt antal som # FF0000 kommer att resultera i
- Ett hexadecimalt antal som # 00FF00 kommer att resultera i
- Och ett hexadecimalt antal som # 0000FF kommer att resultera i
- För att få en gul färg, som är en kombination av "Röd" och "Grön", skapas ett liknande hexadecimalt tal som # FFFF00.
HTML-färgväljare
En färgplockare när den skapas låter en användare " välja" en färg efter eget val. Den vanligaste färgväljaren används i Windows-applikationer som i MS Word eller Paint och andra. Ni är alla bekanta med en färgväljare, du kan jogga ditt minne genom att titta på bilden nedan:
En ingångstyp som "färg " används för att skapa inmatningsfält som innehåller en färg. Men vissa webbläsare som Internet Explorer 11 och äldre versioner stöder inte denna inmatningstyp. Beroende på webbläsaren dyker det därför upp en färgväljare när du använder ingångstypen. Vissa webbläsare förvandlar helt enkelt detta inmatningsfält till en textruta som nedan:
Således när en webbläsare som stöds används kommer samma kod att resultera i följande färgväljare
Och när du klickar på den färgade rutan dyker det upp en färgpalett. Här använder jag Google Chrome version '78.0.3904.97' som stöder ingångstypens färgattribut.
Koden för att skapa en sådan färgväljare förklaras i nästa avsnitt.
Källkod för att skapa en färgväljare
Följande är en förklaring för att skapa den enklaste färgväljaren i HTML. Se koden nedan:
Koda
Select your favorite color:
Ovanstående HTML-kod innehåller ett FORM-element som använder en inmatningstyp som kallas 'färg'. Denna färginmatningstyp skapar och visar den enklaste färgväljaren, Windows standardfärgväljare. Det gör att användaren kan välja en färg efter eget val.
Inmatningstypen som färg skapar en textruta eller mer av en knapp som har 'Svart' som standardbakgrundsfärg. När vi klickar på den visar det ett val för färger för användaren.
Observera hur denna färgväljare fungerar nedan:
Steg 1: Klicka på knappen med 'Svart' som standardbakgrundsfärg.
Ovanstående kod skapar helt enkelt en knapp som visas ovan.
Steg 2: Klicka och välj din nya färg.
Steg 3 : Vi valde en ljusgrön färg för demonstration. Klicka på 'OK' .
I ovanstående skärmbilder kan du enkelt se, den valda färgen visas i den sista skärmbilden.
Inmatningstypen "färg" ger denna enkla funktionalitet för färgväljaren i HTML5. När du har valt din färg är det ditt val av vad den valda färgen kan användas till.
I följande exempel ökade jag exemplet ovan och modifierade det med några inneslutningar.
Följande exempel är en kombination av HTML och Javascript. Detta exempel har ett FORM-element som använder inmatningstypen "färg" -tagg. Denna FORM när den skickas in, utlöses vår JAVASCRIPT.
Observera källkoden för FORM-elementet nedan:
Koda:
Select your favorite color:
Vi har lagt till en ny rad till vårt tidigare program. En skicka-knapp. Denna skicka-knapp är när du klickar, vårt Java-skript utlöses vilket anges nedan:
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);
)
När du klickar på knappen "Skicka" utlöses vår funktion i javascript. Ovanstående funktion, ReturnColor (), returnerar HEX-koden, det vill säga Hexadecimal kod för den valda färgen av vår färgväljare. När koden körs är följande vår utgång.
Ovanstående utgång är i HEX-kod. De 6 siffrorna representerar inkluderingen av röda, gröna och blå färger vilket resulterar i den valda färgen. Denna HEX-kod kan också enkelt konverteras till RGB-kod.
På liknande sätt kan vi spara koden ovan och ställa in den som en bakgrundsfärg eller en teckensnittsfärg för användaren. För att göra det har vi lagt till några rader med kod i vår redan befintliga källkod.
Följande är den fullständiga koden, där HTML-kroppen förblir densamma:
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(" ");
)
Detta är vårt kompletta manus. När koden körs och en färg väljs, är följande utgången som visas.
Slutsats
Det finns många sätt och många kombinationer som kan hjälpa dig att skapa en färgväljare, den för smarta. Till exempel med kombinationen av HTML5 och CSS tillsammans med JavaScript kan du använda ännu ett element som kallas 'canvas' som har sina egna bibliotek som hjälper till att skapa en lätt, liten och webbläsare färgväljare. Men det är för en annan tid.
Rekommenderade artiklar
Detta är en guide till HTML Color Picker. Här diskuterar vi introduktionen, HTML färgväljare källkoden tillsammans med koderna. Du kan också gå igenom våra andra föreslagna artiklar för att lära dig mer -
- HTML-stilattribut
- HTML-textlänk
- HTML-bildtaggar
- Vad är HTML5?
- Ställ in en bakgrundsfärg i HTML med exempel