Uvod u HTML
HTML se, kao što svi znaju, naziva HyperText Markup Language, koji se koristi za prikazivanje tekstova na vašem pregledniku i uz pomoć njegovih posebnih skripti poput JavaScript i CSS, koji vaš sadržaj postaje lijep za gledanje. Kodiranje u boji dio je uljepšavanja vaše HTML stranice.
Kôd boje u HTML-u djeluje kao identifikator koji identificira i predstavlja tu boju na webu. Najčešće korišteno kodiranje boja je HEX koji predstavlja 'Hexadecimal' kod za tu boju. Slično, postoje i drugi kodovi boja poput kratice RGB za 'Crvena, Zelena, Plava'. Još jedan kod boje nazvan HSL, skraćenica za "Hue, Saturation, Lightness". HSL je dodatna prednost pri odabiru boje po vašem izboru.
Budući da se općenito preferira upotreba heksadecimalnih kodova, mi smo objasnili heksadecimalne kodove prema nama. Heksadecimalni kodovi boja sadrže simbol, hash (#) i skup od šest znamenki ili brojeva. Oni se nalaze u heksadecimalnom brojevnom sustavu. Dakle, 'FF' je najveći broj i predstavlja ' 255' iz heksadecimalnog brojačkog sustava.
Ovih šest znamenki sadrže tri para koja predstavljaju RB kod u boji. Od ovih šest znamenki, prvi par od dvije znamenke predstavlja intenzitet vaše crvene boje. Tako će 'FF' za mjesto našeg prvog para predstavljati crvenu boju s maksimalnim intenzitetom. '00' se koristi za najmanji intenzitet, a 'FF' za najveći. Da bi dobili "zelenu" boju, srednji par predstavlja intenzitet.
Slično kao i za 'Blue', zadnji par predstavlja intenzitet.
- Tako će doći do heksadecimalnog broja poput # FF0000
- Rezultat će imati heksadecimalni broj, poput # 00FF00
- A heksadecimalni broj poput # 0000FF rezultirat će u
- Da biste dobili žutu boju, koja je kombinacija 'crvene' i 'zelene', stvara se slični šesterokutni broj poput # FFFF00.
Birač HTML boja
Birač boja kad se stvori omogućava korisniku da " odabere" boju po vlastitom izboru. Najobičniji birač boja koristi se u Windows aplikacijama kao što su MS Word ili Paint i drugi. Svi ste upoznati s alatom za odabir boja, možete joj jog memoriju gledati donju sliku:
Vrsta unosa kao "boja " koristi se za stvaranje unosnih polja koja će sadržavati boju. No neki preglednici kao što su Internet Explorer 11 i starije verzije ne podržavaju ovu vrstu unosa. Tako ovisno o pregledniku, izbornik boja iskoči prilikom korištenja vrste unosa. Neki će preglednici ovo polje unosa jednostavno pretvoriti u tekstni okvir kao ispod:
Prema tome, ako se koristi podržani preglednik, isti će kod rezultirati u sljedećoj paleti za odabir boja
A kad se klikne taj okvir u boji, pojavljuje se paleta boja. Ovdje koristim verziju Google Chrome-a '78.0.3904.97' koja podržava atribut boje unosa.
Kôd za stvaranje takvog birača boja bit će objašnjen u sljedećem odjeljku.
Izvorni kod za izradu alata za odabir boja
Slijedi objašnjenje za stvaranje najjednostavnijeg alata za odabir boja u HTML-u. Pogledajte kôd u nastavku:
Kodirati
Select your favorite color:
Gornji HTML kôd sadrži FORM element koji koristi tip unosa zvan "boja". Ova vrsta unosa boja stvara i prikazuje najjednostavniji alat za odabir boja, Windows standardni izbornik boja. Omogućuje korisniku da odabere boju po svom izboru.
Vrsta unosa kao boja stvara tekstni okvir ili više gumba koji kao zadanu boju pozadine ima "Crno". Kada kliknemo na njega, korisniku se prikazuje izbor boja.
Promatrajte rad ovog alata za odabir boja dan ispod:
Korak 1: Klikom na gumb s crnom bojom kao zadanom pozadinskom bojom.
Gore navedeni kôd jednostavno stvara gumb kao što je prikazano gore.
Korak 2: Kliknite i odaberite svoju novu boju.
Korak 3 : Za demonstraciju smo odabrali svijetlo zelenu boju. Kliknite gumb 'U redu' .
Na gornjim snimkama zaslona lako možete vidjeti da je odabrana boja prikazana u posljednjem snimku zaslona.
Vrsta unosa "boja" pruža ovu jednostavnu funkciju biranja boja u HTML5. Nakon odabira vaše boje, na vama je odabir za koju se boju možete koristiti.
U sljedećem primjeru sam pojačao gornji primjer i modificirao ga s nekim uključenjima.
Sljedeći je primjer kombinacija HTML-a i Javascripta. Ovaj primjer ima element FORM koji koristi oznaku tipa 'color' unosa. Ovaj OBRAZAC kada se preda, aktivira se naš JAVASCRIPT.
Uočite izvorni kôd za FORM element u nastavku:
Kodirati:
Select your favorite color:
Naš prethodni program dodali smo novu liniju. Gumb za slanje. Ovo dugme za prijavu kada se klikne, aktivira se naša Java skripta koja je dana u nastavku:
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);
)
Kada se klikne gumb 'Pošalji', aktivira se naša funkcija u Javascript-u. Gornja funkcija ReturnColor () vraća HEX kôd, to jest Heksadecimalni kod odabrane boje od strane našeg odabirača boja. Kad se kôd izvrši, izlaz je sljedeći.
Gornji izlaz nalazi se u HEX kodu. 6 brojeva predstavljaju uključivanje crvene, zelene i plave boje, što rezultira odabranom bojom. Ovaj HEX kod se također može lako pretvoriti u RGB kod.
Slično tome, gore navedeni kod možemo spremiti i postaviti korisniku kao pozadinsku boju ili boju fonta. Da bismo to učinili, dodali smo još nekoliko redaka koda u svoj već postojeći izvorni kod.
Slijedi cjelokupni kôd, a HTML tijelo ostaje isto:
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(" ");
)
Ovo je naš cjeloviti scenarij. Kad se kôd izvrši i odabere boju, slijedi izlaz koji je prikazan.
Zaključak
Mnogo je načina i puno kombinacija koje vam mogu pomoći da stvorite alat za odabir boja, onaj previše pametan. Na primjer, uz kombinaciju HTML5-a i CSS-a, uz JavaScript, možete koristiti još jedan element koji se naziva "canvas" koji ima vlastite biblioteke koji pomažu u stvaranju laganog, malog odabira boja i preglednika boja. Ali to je za drugi put.
Preporučeni članci
Ovo je vodič za HTML Color Picker. Ovdje smo raspravljali o Uvodu, HTML boje Picker Izvorni kod zajedno s kodovima. Možete i proći naše druge predložene članke da biste saznali više -
- Atributi HTML stila
- HTML tekstualna veza
- Oznake HTML slike
- Što je HTML5?
- Postavite boju pozadine u HTML-u s primjerom
