Introduksjon til HTML
HTML kalles, som alle vet, HyperText Markup Language, som brukes til å vise tekster i nettleseren din og ved hjelp av dets spesielle hjelpeskripter som JavaScript og CSS, at innholdet i din blir vakker å se på. Fargekoding er en del av det som forskjønner HTML-siden din.
Fargekode i HTML fungerer som en identifikator som identifiserer og representerer den fargen på nettet. Den ofte brukte fargekodingen er av HEX som representerer 'heksadesimal' kode for den fargen. Tilsvarende er det andre fargekoder som RGB forkortelse for 'rød, grønn, blå'. En annen fargekode kalt HSL, forkortelse for 'Hue, Saturation, Lightness'. HSL er en ekstra fordel når du velger fargen du ønsker.
Siden generelt bruk av heksadesimale koder foretrekkes, har vi forklart de heksadesimale koder på vårt beste. De heksadesimale fargekodene inneholder et symbol, en hasj (#) og et sett med seks sifre eller tall. De er i det heksadesimale tallsystemet. Så en 'FF' er det høyeste tallet og representerer ' 255' fra det heksadesimale tallsystemet.
Disse seks sifrene inneholder tre par som representerer RB-fargekoden. Av de seks sifrene representerer det første paret med to siffer intensiteten til din 'røde' farge. Så en 'FF' for stedet for vårt første par vil representere den røde fargen med maksimal intensitet. '00' brukes for minst intensitet og 'FF' for den høyeste. For å få en 'grønn' farge, representerer midtparet intensiteten.
Tilsvarende for 'Blå' representerer det siste paret intensiteten.
- Så et heksadesimal tall som # FF0000 vil resultere i
- Et heksadesimal antall som # 00FF00 vil resultere i
- Og et heksadesimal tall som # 0000FF vil resultere i
- For å få en gul farge, som er en kombinasjon av 'rød' og 'grønn', opprettes et lignende heksadesimaltall som for eksempel # FFFF00.
HTML fargevelger
En fargeplukker når den opprettes, lar brukeren ' velge' en farge etter eget valg. Den mest standard fargevalgeren brukes i Windows-applikasjoner som i MS Word eller Paint og andre. Dere er alle kjent med en fargeplukker, du kan jogge minnet ved å se på bildet nedenfor:
En inndatatype som "farge " brukes til å lage inntastingsfelt som vil inneholde en farge. Men noen nettlesere som Internet Explorer 11 og eldre versjoner støtter ikke denne inngangstypen. Avhengig av nettleseren dukker det altså opp en fargevelger når du bruker inndatatypen. Noen nettlesere vil ganske enkelt gjøre dette inputfeltet om til en tekstboks som nedenfor:
Når en støttet nettleser blir brukt, vil den samme koden føre til følgende fargepalett-palett
Og når du klikker på den fargede ruta, dukker det opp en fargepalett. Her bruker jeg Google Chrome versjon '78.0.3904.97' som støtter inndatatype-attributtet.
Koden for å lage en slik fargevelger vil bli forklart i neste avsnitt.
Kildekode for å lage en fargevelger
Følgende er en forklaring for å lage den enkleste fargevelgeren i HTML. Se koden nedenfor:
Kode
Select your favorite color:
Ovanstående HTML-kode inneholder et FORM-element som bruker en inndatatype kalt 'farge'. Denne fargeinngangstypen oppretter og viser den enkleste fargevelgeren, Windows standardfargevelger. Den lar brukeren velge en farge etter eget valg.
Inputtypen som farge lager en tekstboks eller mer av en knapp som har 'Svart' som standard bakgrunnsfarge. Når vi klikker på den, viser den et valg for farger for brukeren.
Følg bruken av denne fargevalgeren nedenfor:
Trinn 1: Klikk på knappen med 'Svart' som standard bakgrunnsfarge.
Koden ovenfor oppretter ganske enkelt en knapp som vist ovenfor.
Trinn 2: Klikk og velg den nye fargen.
Trinn 3 : Vi valgte en lys grønn farge for demonstrasjon. Klikk på OK- knappen.
I skjermbildene ovenfor kan du enkelt se, den valgte fargen vises i det siste skjermbildet.
Inngangstypen 'farge' gir denne enkle funksjonaliteten til fargevelgeren i HTML5. Når du har valgt fargen, er det ditt valg av hva den valgte fargen kan brukes til.
I eksemplet nedenfor økte jeg eksemplet ovenfor og modifiserte det med noen inkluderinger.
Følgende eksempel er en kombinasjon av HTML og Javascript. Dette eksemplet har et FORM-element som bruker inndatatypen 'farge' -kode. Denne FORMEN når den sendes inn, utløses JAVASCRIPT.
Se kildekoden for FORM-elementet nedenfor:
Kode:
Select your favorite color:
Vi la til en ny linje til vårt forrige program. En innsendingsknapp. Denne sendeknappen er når du klikker, Java-skriptet vårt blir utløst som er gitt 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 du klikker på "Send" -knappen, utløses vår funksjon i javascript. Ovennevnte funksjon, ReturnColor (), returnerer HEX-koden, det vil si heksadesimal kode for den valgte fargen av fargevalgeren vår. Når koden kjøres, er følgende utdataene våre.
Ovennevnte utgang er i HEX-kode. De 6 tallene representerer inkluderingen av røde, grønne og blå farger som resulterer i den valgte fargen. Denne HEX-koden kan også enkelt konverteres til RGB-kode.
På samme måte kan vi lagre koden ovenfor og angi den som bakgrunnsfarge eller skriftfarge for brukeren. For å gjøre dette la vi til noen flere kodelinjer i vår allerede eksisterende kildekode.
Følgende er den komplette koden, hvor HTML-kroppen forblir den 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 vårt komplette manus. Når koden kjøres og en farge velges, er følgende output som vises.
Konklusjon
Det er mange måter og mange kombinasjoner som kan hjelpe deg å lage en fargevalger, den for smarte. For eksempel, med kombinasjonen av HTML5 og CSS sammen med JavaScript, kan du bruke enda et element kalt 'lerret' som har sine egne biblioteker som hjelper deg med å lage en lett, liten og tvers av nettleserens fargevelger. Men det er for en annen gang.
Anbefalte artikler
Dette er en guide til HTML Color Picker. Her diskuterer vi Introduksjon, HTML Color Picker kildekoden sammen med kodene. Du kan også gå gjennom andre foreslåtte artikler for å lære mer -
- HTML stilattributt
- HTML-tekstkobling
- HTML Image Tags
- Hva er HTML5?
- Angi en bakgrunnsfarge i HTML med eksempel