Introduktion til HTML
HTML kaldes, som alle andre, HyperText Markup Language, som bruges til at vise tekster i din browser og ved hjælp af dets specielle hjælpe-scripts som JavaScript og CSS, det indhold i din bliver smuk at se på. Farvekodning er en del af det, der forskønner din HTML-webside.
Farvekode i HTML fungerer som en identifikator, der identificerer og repræsenterer den farve på nettet. Den ofte anvendte farvekodning er af HEX, der repræsenterer 'Hexadecimal' kode for den farve. Tilsvarende er der andre farvekoder som RGB forkortelse for 'Rød, Grøn, Blå'. En anden farvekode kaldet HSL, forkortelse for 'Hue, Saturation, Lightness'. HSL er en ekstra fordel, når du vælger den valgte farve.
Da generelt brug af hexadecimale koder foretrækkes, har vi forklaret de hexadecimale koder bedst muligt. Hexadecimal farvekoder indeholder et symbol, en hash (#) og et sæt på seks cifre eller tal. De er i det hexadecimale talesystem Så en 'FF' er det højeste tal og repræsenterer ' 255' fra det hexadecimale talsystem.
Disse seks cifre indeholder tre par, der repræsenterer RB-farvekoden. Ud af disse seks cifre repræsenterer det første par to cifre intensiteten af din 'røde' farve. Så en 'FF' til stedet for vores første par vil repræsentere den røde farve med maksimal intensitet. '00' bruges til mindst intensitet og 'FF' til den højeste. For at få en 'grøn' farve repræsenterer det midterste par intensiteten.
Tilsvarende for 'Blå' repræsenterer det sidste par intensiteten.
- Så et hexadecimalt tal som # FF0000 vil resultere i
- Et hexadecimalt tal som # 00FF00 vil resultere i
- Og et hexadecimalt tal som # 0000FF vil resultere i
- For at få en gul farve, som er en kombination af 'rød' og 'grøn', oprettes et lignende hexadecimalt tal som f.eks. # FFFF00.
HTML farvevælger
En farvevælger, når den oprettes, giver en bruger mulighed for at ' vælge' en farve efter eget valg. Den mest almindelige farvevælger bruges i Windows-applikationer som i MS Word eller Paint og andre. I er alle fortrolige med en farvevælger, du kan jogge din hukommelse ved at se på billedet herunder:
En inputtype som "farve " bruges til at oprette inputfelter, der indeholder en farve. Men nogle browsere som Internet Explorer 11 og ældre versioner understøtter ikke denne inputtype. Afhængig af browseren dukker derved et farvevælger op, når du bruger inputtypen. Nogle browsere vil simpelthen forvandle dette inputfelt til et tekstfelt som nedenfor:
Når en understøttet browser bruges, vil den samme kode således resultere i følgende farvevælgerpalet
Og når der klikkes på den farvede boks, dukker der en farvepalet op. Her bruger jeg Google Chrome version '78.0.3904.97', som understøtter inputtypefarveattributten.
Koden til oprettelse af en sådan farvevælger forklares i det næste afsnit.
Kildekode til oprettelse af en farvevælger
Følgende er en forklaring på, hvordan du opretter den enkleste farvevælger i HTML. Se koden nedenfor:
Kode
Select your favorite color:
Ovenstående HTML-kode indeholder et FORM-element, der bruger en inputtype kaldet 'farve'. Denne farveinputtype opretter og viser den enkleste farvevælger, Windows standardfarvevælger. Det giver brugeren mulighed for at vælge en farve efter eget valg.
Inputtypen som farve opretter en tekstboks eller mere af en knap, der har 'Sort' som standard baggrundsfarve. Når vi klikker på det, viser det et valg for farver til brugeren.
Overhold brugen af denne farvevælger givet nedenfor:
Trin 1: Klik på knappen med 'Sort' som standard baggrundsfarve.
Ovenstående kode opretter blot en knap som vist ovenfor.
Trin 2: Klik og vælg din nye farve.
Trin 3 : Vi valgte en lysegrøn farve til demonstration. Klik på knappen 'OK' .
I ovenstående skærmbilleder kan du nemt se, den valgte farve vises i det sidste skærmbillede.
Inputtypen 'farve' giver denne enkle funktionalitet af farvevælger i HTML5. Når du har valgt din farve, er det dit valg af, hvad den valgte farve kan bruges til.
I det følgende eksempel steg jeg ovenstående eksempel og ændrede det med nogle indeslutninger.
Følgende eksempel er en kombination af HTML og Javascript. Dette eksempel har et FORM-element, der bruger input-typen 'farve'-tag. Denne FORM, når den indsendes, udløses vores JAVASCRIPT.
Overhold kildekoden for FORM-elementet nedenfor:
Kode:
Select your favorite color:
Vi tilføjede en ny linje til vores tidligere program. En indsenderknap. Denne indsendelsesknap er, når der klikkes, vores Java-script udløses, som er vist nedenfor:
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 der klikkes på knappen "Send", udløses vores funktion i javascript. Ovenstående funktion, ReturnColor (), returnerer HEX-koden, det vil sige Hexadecimal kode for den valgte farve af vores farvevælger. Når koden udføres, er følgende vores output.
Ovenstående output er i HEX-kode. De 6 numre repræsenterer inkluderingen af røde, grønne og blå farver, hvilket resulterer i den valgte farve. Denne HEX-kode kan også let konverteres til RGB-kode.
På samme måde kan vi gemme ovenstående kode og indstille den som en baggrundsfarve eller en fontfarve for brugeren. For at gøre dette tilføjede vi et par flere linjer med kode i vores allerede eksisterende kildekode.
Følgende er den komplette kode, hvor HTML-krop forbliver det samme:
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(" ");
)
Dette er vores komplette script. Når koden udføres, og der vælges en farve, er følgende output, der vises.
Konklusion
Der er mange måder og mange kombinationer, der kan hjælpe dig med at oprette en farvevælger, der er for smart. For eksempel med kombinationen af HTML5 og CSS sammen med JavaScript kan du bruge endnu et element kaldet 'lærred', der har sine egne biblioteker, der hjælper med at skabe en let, lille og krydsbrowser farvevælger. Men det er en anden gang.
Anbefalede artikler
Dette er en guide til HTML Color Picker. Her diskuterer vi introduktionen, HTML farvevælger kildekoden sammen med koderne. Du kan også gennemgå vores andre foreslåede artikler for at lære mere -
- HTML-stilattribut
- HTML-tekstlink
- HTML-billedmærker
- Hvad er HTML5?
- Indstil en baggrundsfarve i HTML med eksempel