Bevezetés a HTML-be
A HTML-t, mint mindenki tudja, HyperText Markup Language néven hívják felhasználásra, amelyet szövegek megjelenítésére használnak az Ön böngészőjében, és a speciális segítő szkriptek, például a JavaScript és a CSS segítségével, az Ön tartalma gyönyörűvé válik. A színkódolás része annak a HTML weboldalnak a szépítéséhez.
A HTML színkódja azonosítóként működik, amely azonosítja és ábrázolja a színt az interneten. A leggyakrabban használt színkódolás a HEX, amely az adott szín 'hexadecimális' kódját képviseli. Hasonlóképpen vannak más színkódok is, például az RGB rövid, a 'piros, zöld, kék'. Egy másik, HSL nevű színkód, röviden: „Hue, Saturation, Lightness”. A HSL további előnyt jelent a választott szín kiválasztásakor.
Mivel általában a hexadecimális kódok használatát részesítik előnyben, a hexadecimális kódokat a lehető legjobban magyaráztuk meg. A hexadecimális színkódok tartalmaznak egy szimbólumot, hash (#) és hat számjegyből vagy számból álló sorozatot. Ezek a hexadecimális számrendszerben vannak. Tehát az 'FF' a legnagyobb szám, és ' hexadecimális számrendszerből ' 255 'képviseli.
Ez a hat számjegy három olyan párt tartalmaz, amelyek az RB színkódot képviselik. E hat számjegyből az első két számjegy párosítja a 'piros' szín intenzitását. Tehát az első párunk „FF” jelképezi a piros színt a legnagyobb intenzitással. A '00' a legkevesebb intenzitás, az 'FF' a legmagasabb. A 'zöld' szín eléréséhez a középső pár jelzi az intenzitást.
Hasonlóan a 'kékhez', az utolsó pár az intenzitást képviseli.
- Tehát egy hexadecimális szám, például # FF0000 eredményez
- Egy hexadecimális szám, például # 00FF00 eredményez
- És egy hexadecimális szám, például # 0000FF eredményez
- Sárga szín elérése érdekében, amely a 'Piros' és a 'Zöld' kombinációja, hasonló hexadecimális számot hozunk létre, például # FFFF00.
HTML színválasztó
A színválasztó a létrehozása után lehetővé teszi a felhasználó számára, hogy saját maga választja ki a kívánt színt. A legszokásosabb színválasztót a Windows alkalmazásokban használják, mint például az MS Word vagy a Paint és mások. Mindannyian ismerik a színválasztót, az alábbi kép megtekintésével a memóriáját elmozgathatja:
A „színes ” bemeneti típus a színt tartalmazó beviteli mezők létrehozására szolgál. Néhány böngésző, például az Internet Explorer 11 vagy régebbi verziók azonban nem támogatják ezt a bemeneti típust. Így a böngészőtől függően megjelenik egy színválasztó, amikor a bemeneti típust használja. Néhány böngésző ezt a beviteli mezőt egyszerűen szövegdobozká alakítja, mint az alábbiak szerint:
Így egy támogatott böngésző használatakor ugyanaz a kód a következő színválasztó palettát fogja eredményezni
Amikor rákattint a színes dobozra, megjelenik egy színpaletta. Itt a Google Chrome '78.0.3904.97' verziót használom, amely támogatja a bemeneti típus színes attribútumát.
Az ilyen színválasztó létrehozásának kódját a következő szakasz ismerteti.
Forráskód színválasztó létrehozásához
Az alábbiakban bemutatjuk a legegyszerűbb színválasztó HTML létrehozását. Lásd az alábbi kódot:
Kód
Select your favorite color:
A fenti HTML kód tartalmaz egy FORM elemet, amely egy 'színes' bemeneti típust használ. Ez a színbemeneti típus létrehozza és megjeleníti a legegyszerűbb színválasztót, a Windows szabványos színválasztót. Ez lehetővé teszi a felhasználó számára, hogy kiválasztja a kívánt színt.
A beviteli típus színként létrehoz egy vagy több gombbal rendelkező szövegdobozt, amelynek alapértelmezett háttérszíne a „fekete”. Ha rákattintunk, megjelenik a felhasználó számára kiválasztott szín.
Vegye figyelembe a következő színválasztó működését:
1. lépés: Kattintson a gombra, amelynek alapértelmezett háttérszíne a 'Fekete'.
A fenti kód egyszerűen létrehoz egy gombot, amint azt a fenti ábra mutatja.
2. lépés: Kattintson és válassza ki az új színt.
3. lépés : Kiválasztottuk a fényes zöld színű bemutatót. Kattintson az 'OK' gombra.
A fenti képernyőképeken könnyen láthatja, a kiválasztott szín az utolsó képernyőképen látható.
A 'color' bemeneti típus biztosítja a színválasztó ezen egyszerű funkcióját a HTML5-ben. Miután kiválasztotta a színt, Ön választhatja ki, hogy mihez használható a kiválasztott szín.
A következő példában kibővítettem a fenti példát, és néhány zárással módosítottam.
A következő példa a HTML és a Javascript kombinációja. Ez a példa tartalmaz egy FORM elemet, amely a 'color' bemeneti típust használja. A FORM beküldésekor a JAVASCRIPT aktiválódik.
Vegye figyelembe az alábbi FORM elem forráskódját:
Kód:
Select your favorite color:
Új sort adtunk az előző programunkhoz. Beküldés gomb. A küldés gombra kattintva a Java szkript indul, amelyet az alábbiakban adunk meg:
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);
)
A „Küldés” gombra kattintva a javascript funkció aktiválódik. A fenti függvény, a ReturnColor (), a HEX-kódot, azaz a kiválasztott szín hexadecimális kódját adja vissza a színválasztó által. Amikor a kód végrehajtódik, az alábbiakban látható kimenetünk van.
A fenti kimenet HEX kódban van. A 6 szám a vörös, a zöld és a kék szín beépítését jelzi, ami a kiválasztott színhez vezet. Ez a HEX kód könnyen konvertálható RGB kódra is.
Hasonlóképpen menthetjük a fenti kódot, és háttérként vagy betűszínként állíthatjuk be a felhasználó számára. Ehhez még néhány sor sorot adtunk a már meglévő forráskódunkba.
Az alábbiakban látható a teljes kód, a HTML törzs változatlan marad:
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(" ");
)
Ez a teljes szkriptünk. A kód végrehajtása és a szín kiválasztása után a következő megjelenik a kimenet.
Következtetés
Sokféle módszer és kombináció segíthet a túl okos színválasztó létrehozásában. Például a HTML5 és a CSS kombinációjával a JavaScripttal együtt használhat egy újabb, a „vászon” nevű elemet is, amelynek saját könyvtárai vannak, amely elősegíti a könnyű, kicsi és a böngészők közötti színes színválasztó létrehozását. De ez egy másik alkalomra.
Ajánlott cikkek
Ez egy útmutató a HTML színválasztóhoz. Itt tárgyaljuk a Bevezetést, a HTML Color Picker forráskódját és a kódokat. A további javasolt cikkeken keresztül további információkat is megtudhat -
- HTML stílus attribútum
- HTML szöveges link
- HTML képcímkék
- Mi a HTML5?
- Állítsa be a háttér színét HTML-ben a Példa segítségével