Inleiding tot HTML
HTML, zoals iedereen weet, wordt HyperText Markup Language genoemd, die wordt gebruikt om teksten in uw browser weer te geven en met behulp van speciale hulpscripts zoals JavaScript en CSS, wordt die inhoud van u mooi om naar te kijken. Kleurcodering maakt deel uit van het verfraaien van uw HTML-webpagina.
Kleurcode in HTML werkt als een ID die die kleur op internet identificeert en vertegenwoordigt. De veelgebruikte kleurcodering is van HEX die 'Hexadecimale' code voor die kleur vertegenwoordigt. Evenzo zijn er andere kleurcodes zoals RGB voor 'Rood, Groen, Blauw'. Een andere kleurcode genaamd HSL, kort voor 'Tint, verzadiging, lichtheid'. De HSL is een bijkomend voordeel bij het selecteren van de kleur van uw keuze.
Omdat over het algemeen de voorkeur wordt gegeven aan het gebruik van hexadecimale codes, hebben we de hexadecimale codes zo goed mogelijk uitgelegd. De hexadecimale kleurcodes bevatten een symbool, een hekje (#) en een set van zes cijfers of cijfers. Ze bevinden zich in het hexadecimale getalsysteem Dus een 'FF' is het hoogste getal en vertegenwoordigt ' 255' uit het hexadecimale getalsysteem.
Deze zes cijfers bevatten drie paren die de RB-kleurcode vertegenwoordigen. Van deze zes cijfers vertegenwoordigt het eerste paar van twee cijfers de intensiteit van uw 'rode' kleur. Dus een 'FF' voor de plaats van ons eerste paar vertegenwoordigt de rode kleur met maximale intensiteit. '00' wordt gebruikt voor de minste intensiteit en 'FF' voor de hoogste. Om een 'Groene' kleur te krijgen, vertegenwoordigt het middelste paar de intensiteit.
Evenzo voor 'Blauw' vertegenwoordigt het laatste paar de intensiteit.
- Dus een hexadecimaal getal zoals # FF0000 zal resulteren in
- Een hexadecimaal getal zoals # 00FF00 resulteert in
- En een hexadecimaal getal zoals # 0000FF resulteert in
- Om een gele kleur te krijgen, die een combinatie is van 'Rood' en 'Groen', wordt een vergelijkbaar hexadecimaal nummer gemaakt, zoals # FFFF00.
HTML-kleurenkiezer
Wanneer een kleurenkiezer wordt gemaakt, kan een gebruiker een kleur naar keuze ' kiezen'. De meest standaard kleurenkiezer wordt gebruikt in Windows-toepassingen zoals MS Word of Paint en andere. U bent allemaal bekend met een kleurenkiezer, u kunt uw geheugen opfrissen door de onderstaande afbeelding te bekijken:
Een invoertype als "kleur " wordt gebruikt voor het maken van invoervelden die een kleur zullen bevatten. Maar sommige browsers zoals Internet Explorer 11 en oudere versies ondersteunen dit invoertype niet. Afhankelijk van de browser verschijnt er dus een kleurenkiezer wanneer u het invoertype gebruikt. Sommige browsers veranderen dit invoerveld eenvoudig in een tekstvak zoals hieronder:
Wanneer een ondersteunde browser wordt gebruikt, resulteert dezelfde code in het volgende kleurenpalet
En wanneer op dat gekleurde vak wordt geklikt, verschijnt er een kleurenpalet. Hier gebruik ik Google Chrome-versie '78.0.3904.97' die het kleurtype van het invoertype ondersteunt.
De code voor het maken van een dergelijke kleurkiezer wordt in de volgende sectie uitgelegd.
Broncode voor het maken van een kleurenkiezer
Hierna volgt een verklaring voor het maken van de eenvoudigste kleurenkiezer in HTML. Zie onderstaande code:
Code
Select your favorite color:
De bovenstaande HTML-code bevat een FORM-element dat een invoertype genaamd 'kleur' gebruikt. Dit kleurinvoertype creëert en toont de eenvoudigste kleurenkiezer, Windows standaard kleurenkiezer. Hiermee kan de gebruiker een kleur naar keuze selecteren.
Het invoertype als kleur maakt een tekstvak of meer van een knop met 'Zwart' als standaard achtergrondkleur. Wanneer we erop klikken, wordt een keuze voor kleuren voor de gebruiker weergegeven.
Bekijk de werking van deze kleurenkiezer hieronder:
Stap 1: Klik op de knop met 'Zwart' als standaard achtergrondkleur.
De bovenstaande code maakt eenvoudig een knop zoals hierboven weergegeven.
Stap 2: Klik en selecteer uw nieuwe kleur.
Stap 3 : We hebben een felgroene kleur gekozen voor demonstratie. Klik op de knop 'OK' .
In de bovenstaande schermafbeeldingen kunt u gemakkelijk zien dat de geselecteerde kleur wordt weergegeven in de laatste schermopname.
Het invoertype 'kleur' biedt deze eenvoudige functionaliteit voor kleurkiezer in HTML5. Na het kiezen van uw kleur, is het uw keuze waarvoor de geselecteerde kleur kan worden gebruikt.
In het volgende voorbeeld heb ik het bovenstaande voorbeeld verhoogd en met enkele insluitsels aangepast.
Het volgende voorbeeld is een combinatie van HTML en Javascript. Dit voorbeeld heeft een FORM-element dat de tag 'kleur' van het invoertype gebruikt. Wanneer deze FORM wordt ingediend, wordt ons JAVASCRIPT geactiveerd.
Bekijk de broncode voor het onderstaande FORM-element:
Code:
Select your favorite color:
We hebben een nieuwe regel toegevoegd aan ons vorige programma. Een verzendknop. Op deze verzendknop wordt geklikt, ons Java-script wordt geactiveerd dat hieronder wordt gegeven:
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);
)
Wanneer op de knop 'Verzenden' wordt geklikt, wordt onze functie in javascript geactiveerd. De bovenstaande functie, ReturnColor (), retourneert de HEX-code, dat wil zeggen Hexadecimale code voor de geselecteerde kleur door onze kleurkiezer. Wanneer de code wordt uitgevoerd, is het volgende onze uitvoer.
De bovenstaande uitvoer is in HEX-code. De 6 cijfers vertegenwoordigen de opname van rode, groene en blauwe kleuren die resulteren in de geselecteerde kleur. Deze HEX-code kan ook eenvoudig worden omgezet in RGB-code.
Op dezelfde manier kunnen we de bovenstaande code opslaan en instellen als achtergrondkleur of lettertypekleur voor de gebruiker. Om dit te doen hebben we nog een paar regels code toegevoegd aan onze reeds bestaande broncode.
Hierna volgt de volledige code, waarbij de HTML-inhoud hetzelfde blijft:
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(" ");
)
Dit is ons complete script. Wanneer de code wordt uitgevoerd en een kleur wordt geselecteerd, is het volgende de uitvoer die wordt weergegeven.
Conclusie
Er zijn veel manieren en veel combinaties die u kunnen helpen om een kleurkiezer te maken, die te slim is. Met de combinatie van HTML5 en CSS samen met JavaScript, kunt u bijvoorbeeld nog een ander element genaamd 'canvas' gebruiken dat zijn eigen bibliotheken heeft die helpen bij het maken van een lichtgewicht, kleine en cross-browser kleurenkiezer. Maar dat is voor een andere keer.
Aanbevolen artikelen
Dit is een gids voor HTML-kleurkiezer. Hier bespreken we de introductie, HTML-kleurkiezer, de broncode en de codes. U kunt ook onze andere voorgestelde artikelen doornemen voor meer informatie -
- HTML-stijlkenmerk
- HTML-tekstkoppeling
- HTML-afbeeldingstags
- Wat is HTML5?
- Stel een achtergrondkleur in HTML in met Voorbeeld