HTML-värvikoodide abil on oma veebisaidi kujundusele värvide lisamine lihtne.
Avage veebiturvaline HTML-i värvikooditabel ja uurige saadaolevaid värve. Kuigi enamik arvuteid suudab kuvada mis tahes värve, on ainult veebikindlate värvide kasutamine juurdepääsetavam valik. Lisaks on valikus palju värve. Valige oma projekti jaoks värvid, mis sobivad teie veebisaidi teema ja kujundusega. Hea rusikareegel on valida kaks tasuta värvi ja üks aktsentvärv. Teine hea valik on neutraalne, näiteks must, valge, hall või punakaspruun.
Kopeerige nende värvide 6-kohalised HTML-värvikoodid, mida soovite oma veebisaidil kasutada. Need koosnevad numbritest 0, 3, 6 ja 9 ning tähtedest C ja F erinevates kombinatsioonides. Neid 6-kohalisi koode kasutatakse teie HTML-i veebisaidi koodis kõikjal, kus soovite värvilise aktsendi luua.
Valige oma veebisaidi taustaks üks värv. Tausta selle värvi muutmiseks kasutage HTML-koodi "
" ja asendage 6-kohaline kood soovitud värvikoodiga. Kuna see on kogu veebilehe keha tausta värv, asendab see HTML-koodilõik tavalist ""silt.Muutke oma veebisaidi lehel oleva teksti, pealkirjade või linkide värvi, lisades oma veebisaidi koodi lehele värvikoodid ja õige HTML-koodi. Igasugust teksti saab värvida, lisades HTML-i atribuudi "Pealkiri
" teie veebisaidi koodile.
Muutke oma veebisaidi kõigi pealkirjade värvi, kasutades selle asemel kaskaadlaadilehti (CSS). Kasutage koodi "h1 {color:#336699;}" vahel "
" ja "" sildid teie veebisaidi koodis. Iga kord, kui koodid "" teie veebisaidil on see seda värvi. CSS on veebisaitide kujundamise standardmeetod. See muudab ka sissepääsu ja muudatuste tegemise lihtsamaks, kui soovite ümber kujundada.
Muutke oma fontide, linkide ja muude asjade värvi CSS-is. Kasutage fontide jaoks CSS-koodi fragmenti "p {color:#336699;}". Iga tekstiploki HTML peab olema piiratud "
" ja "
"sildid. Lingi värve saab muuta kasutades "{color:#336699;}" ja "" HTML-i veebisaidi koodis. Muid HTML-märgendeid, nagu pildiäärised, horisontaalreeglid ja tabelilahtrid, saab muuta ka CSS-i põhikoodilõigu "{color:#336699;}" abil.