Wprowadzenie do HTML
HTML, jak wszyscy wiedzą, nazywa się HyperText Markup Language, który jest używany do wyświetlania tekstów w przeglądarce i za pomocą specjalnych skryptów pomocniczych, takich jak JavaScript i CSS, na twoją treść staje się piękna. Kodowanie kolorami jest częścią upiększania strony HTML.
Kod koloru w HTML działa jako identyfikator, który identyfikuje i reprezentuje ten kolor w Internecie. Powszechnie stosowane kodowanie kolorami to HEX, który reprezentuje kod „szesnastkowy” dla tego koloru. Podobnie istnieją inne kody kolorów, takie jak skrót RGB dla „czerwony, zielony, niebieski”. Kolejny kod koloru o nazwie HSL, skrót od „Hue, Saturation, Lightness”. HSL stanowi dodatkową zaletę przy wyborze wybranego koloru.
Ponieważ ogólnie preferowane jest stosowanie kodów szesnastkowych, objaśniliśmy je najlepiej. Szesnastkowe kody kolorów zawierają symbol, skrót (#) oraz zestaw sześciu cyfr lub cyfr. Są w systemie liczb szesnastkowych, więc „FF” jest najwyższą liczbą i reprezentuje „ 255” w systemie liczb szesnastkowych.
Te sześć cyfr zawiera trzy pary reprezentujące kod koloru RB. Z tych sześciu cyfr pierwsza para dwóch cyfr reprezentuje intensywność twojego „czerwonego” koloru. Zatem „FF” dla miejsca naszej pierwszej pary będzie reprezentować kolor czerwony z maksymalną intensywnością. „00” jest używane dla najmniejszej intensywności, a „FF” dla najwyższej. Aby uzyskać kolor „zielony”, środkowa para reprezentuje intensywność.
Podobnie dla „Niebieskiego” ostatnia para reprezentuje intensywność.
- Tak więc wynikiem będzie liczba szesnastkowa, taka jak # FF0000
- Wynikiem będzie liczba szesnastkowa, taka jak # 00FF00
- I da w wyniku liczbę szesnastkową, taką jak # 0000FF
- Aby uzyskać żółty kolor, który jest kombinacją „czerwonego” i „zielonego”, tworzona jest podobna liczba szesnastkowa, taka jak # FFFF00.
Próbnik kolorów HTML
Po utworzeniu próbnik kolorów pozwala użytkownikowi „ wybrać” wybrany przez siebie kolor. Najbardziej standardowy próbnik kolorów jest używany w aplikacjach Windows, takich jak MS Word lub Paint i inne. Wszyscy jesteście zaznajomieni z próbnikiem kolorów, możecie pobudzić pamięć, patrząc na zdjęcie poniżej:
Typ wejściowy jako „kolor ” służy do tworzenia pól wejściowych, które będą zawierały kolor. Ale niektóre przeglądarki, takie jak Internet Explorer 11 i starsze wersje, nie obsługują tego typu danych wejściowych. Dlatego w zależności od przeglądarki pojawia się próbnik kolorów, gdy używasz typu danych wejściowych. Niektóre przeglądarki po prostu zamieniają to pole wejściowe w pole tekstowe jak poniżej:
Dlatego gdy używana jest obsługiwana przeglądarka, ten sam kod spowoduje wyświetlenie następującej palety próbnika kolorów
A po kliknięciu tego kolorowego pola pojawia się paleta kolorów. Korzystam z przeglądarki Google Chrome w wersji „78.0.3904.97”, która obsługuje atrybut koloru typu wejściowego.
Kod tworzenia takiego próbnika kolorów zostanie wyjaśniony w następnej sekcji.
Kod źródłowy do tworzenia próbnika kolorów
Poniżej znajduje się objaśnienie tworzenia najprostszego próbnika kolorów w HTML. Zobacz kod poniżej:
Kod
Select your favorite color:
Powyższy kod HTML zawiera element FORM, który wykorzystuje typ wejściowy o nazwie „kolor”. Ten typ wprowadzania kolorów tworzy i wyświetla najprostszy próbnik kolorów, standardowy próbnik kolorów w systemie Windows. Pozwala użytkownikowi wybrać wybrany kolor.
Typ wejściowy jako kolor tworzy pole tekstowe lub więcej przycisków, których domyślnym kolorem jest „Czarny”. Po kliknięciu wyświetli się wybór kolorów dla użytkownika.
Obserwuj działanie tego próbnika kolorów podanego poniżej:
Krok 1: Kliknięcie przycisku z „Czarnym” jako domyślnym kolorem tła.
Powyższy kod tworzy po prostu przycisk, jak pokazano powyżej.
Krok 2: Kliknij i wybierz nowy kolor.
Krok 3 : Wybraliśmy jasny zielony kolor do prezentacji. Kliknij przycisk „OK” .
Na powyższych zrzutach ekranu możesz łatwo zobaczyć, że wybrany kolor jest pokazany na ostatnim zrzucie ekranu.
Typ wejściowy „kolor” zapewnia tę prostą funkcjonalność próbnika kolorów w HTML5. Po wybraniu koloru należy wybrać, do czego może zostać użyty wybrany kolor.
W poniższym przykładzie zwiększyłem powyższy przykład i zmodyfikowałem go z pewnymi inkluzjami.
Poniższy przykład jest kombinacją HTML i JavaScript. W tym przykładzie jest element FORM, który używa znacznika typu wejściowego „color”. Ten FORMULARZ po przesłaniu zostaje uruchomiony nasz JAVASCRIPT.
Obserwuj kod źródłowy dla elementu FORM poniżej:
Kod:
Select your favorite color:
Dodaliśmy nową linię do naszego poprzedniego programu. Przycisk przesyłania. Po kliknięciu tego przycisku uruchamiany jest nasz skrypt Java, który podano poniżej:
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);
)
Po kliknięciu przycisku „Prześlij” uruchamiana jest nasza funkcja w javascript. Powyższa funkcja, ReturnColor (), zwraca kod HEX, czyli kod szesnastkowy dla wybranego koloru przez nasz próbnik kolorów. Kiedy kod jest wykonywany, nasze dane wyjściowe są następujące.
Powyższe dane wyjściowe są w kodzie HEX. 6 liczb oznacza włączenie kolorów czerwonego, zielonego i niebieskiego, co daje wybrany kolor. Ten kod HEX można również łatwo przekonwertować na kod RGB.
Podobnie możemy zapisać powyższy kod i ustawić go jako kolor tła lub kolor czcionki dla użytkownika. Aby to zrobić, dodaliśmy jeszcze kilka wierszy kodu do już istniejącego kodu źródłowego.
Poniżej znajduje się pełny kod, a treść HTML pozostaje taka sama:
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(" ");
)
To jest nasz kompletny skrypt. Po wykonaniu kodu i wybraniu koloru wyświetlane są następujące dane wyjściowe.
Wniosek
Istnieje wiele sposobów i kombinacji, które mogą pomóc w stworzeniu próbnika kolorów, który jest zbyt inteligentny. Na przykład, dzięki kombinacji HTML5 i CSS wraz z JavaScript, możesz użyć jeszcze jednego elementu zwanego „canvas”, który ma własne biblioteki, które pomagają stworzyć lekki, mały próbnik kolorów dla różnych przeglądarek. Ale to na inny czas.
Polecane artykuły
To jest przewodnik po Próbniku kolorów HTML. Tutaj omawiamy Wprowadzenie, HTML Kolor Wybierz kod źródłowy wraz z kodami. Możesz także przejrzeć nasze inne sugerowane artykuły, aby dowiedzieć się więcej -
- Atrybut stylu HTML
- Link tekstowy HTML
- Tagi graficzne HTML
- Co to jest HTML5?
- Ustaw kolor tła w HTML za pomocą przykładu